JAWSDAYS2021_LINEDC - Speaker Deck

Slide 1

Slide 1 text

AmplifyとLINEで作るJAWSDAYS投票システムの話 / ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話ようかん（@inoue2002） #jawsdays2021 アプリケーションサポーター

Slide 2

Slide 2 text

#jawsdays2021_C

Slide 3

Slide 3 text

⾃⼰紹介ようかん（井上陽介） - ⾼校⽣エンジニア - 未踏ジュニア2020スーパークリエータ - LINE API Expert Open Hack U Vol.4 Happy Hacking賞受賞 LINE APIを使った事例作り - 最近の活動 - 得意なこと⻑距離を⾛ること(1.5km ‒ 10km) LINEAPIをいじることイベントを主催したり登壇したりすること学校の同級⽣や後輩を巻き込んでいろいろやること @inoue2002

Slide 4

Slide 4 text

@inoue2002 [LINEAPI]どれぐらい開発しているかというとサービス/ツールetc.. 50+

Slide 5

Slide 5 text

@inoue2002 [LINEAPI]どれぐらい開発しているかというとサービス/ツールetc.. 50+

Slide 6

Slide 6 text

@inoue2002 ようかんはLINEDCで何をしている⼈なの？ ① イベント参加/登壇/主催 ② LINE APIを使ったアウトプット ③ 最年少LAEとして、僕ならではのLINEAPI事例発掘&共有

Slide 7

Slide 7 text

@inoue2002 アイスブレイク ① Amplify、どこのセッションでも聞くワードですね!!! ② 話して欲しいことととかツイートしてもらえると嬉しいです! ③ 我々のシステム、しっかり動いている模様です!!

Slide 8

Slide 8 text

@inoue2002 このセッションでは何が聞けるの？ ① LINE Developers Communityがどういったものか分かる ② AWSを⽤いて短期間で開発したシステムの裏話が聞ける ③ LINEとAWSを⽤いて実際に⾏ったプロジェクトを知れる

Slide 9

Slide 9 text

@inoue2002 本⽇のアジェンダ ② AmplifyとLINEで作るJAWSDAYS投票システムの話 - 何を作ったの？ - 特徴や拘ったところは？ - 技術構成 ③ ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話 - 何を作ったの？ - どんな過程を経たの？ - 技術構成 ① LINE Developers Communityとは - コミュニティ概要 - 普段の活動

Slide 10

Slide 10 text

Slide 11

Slide 11 text

@inoue2002 LINE Developers Community(LINEDC)とは・LINE Platformを使うエンジニア・クリエータによる有志のコミュニティ・Connpass登録メンバー3000⼈超え・さくっとLINEで何か試したい⼈からガチガチにシステムを作る⼈まで幅広い！・毎週のようにイベントをやっている。ハンズオンやLTが多い・#linedc で検索するといろいろ出てくる

Slide 12

Slide 12 text

@inoue2002 LINE Developers Community(LINEDC)とは

Slide 13

Slide 13 text

@inoue2002 LINE Developers Community(LINEDC)とは

Slide 14

Slide 14 text

@inoue2002 LINE API Use Case

Slide 15

Slide 15 text

Slide 16

Slide 16 text

@inoue2002

Slide 17

Slide 17 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・使⽤されたセッション - クラウドパワポカラオケ選⼿権 - ピタゴラスイッチ選⼿権 - チーム対抗提案コンペ〜仮想RFPに提案してみよう！〜・利⽤⽤途 - 各種対抗企画の参加者投票 xxx

Slide 18

Slide 18 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・独⾃投票UI DEMO - スライダーの場所に応じて表情が変わる！ - 複数⼈への投票をカルーセルで簡単にに⾏える！・集計結果はリアルタイムで表情を⾒て確認！

Slide 19

Slide 19 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・投票UIのヒント - 昨年未踏ジュニアにてリアクション回収ツール「critica」を開発していた - 半年間、意⾒やリアクションを集めることについて考え続けてた経験を⽣かした https://critica.uno

Slide 20

Slide 20 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・投票UIのヒント - 昨年未踏ジュニアにて開発を⾏ったリアクション回収ツール「critica」に実装されていた - プロジェクトの相⽅である伊藤祐聖が発案した https://critica.uno

Slide 21

Slide 21 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・開発メンバー - 3⼈で分担して開発を進めましたリーダー/バックエンドもっちゃんさん認証周り/バックエンドささげさんフロントエンドようかん

Slide 22

Slide 22 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・ AWS Amplify - フロントからバックエンドまで開発をサポート - 爆速で開発できる - 簡単に開発を進められる - 強靭なアプリが完成！

Slide 23

Slide 23 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・システム構成

Slide 24

Slide 24 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・システム構成図・シーケンス図・UI設計図・DB設計

Slide 25

Slide 25 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・認証 - 認証はCognitoのCustom Auth機能とLINEのAccessToken認証を組み合わせて実現 1. 3. 2. 4. 5. 6. 7. 8. API Gateway Amazon Cognit Lambda Create Auth Challenge Lambda Verify Auth Challenge Lambda Voting 1.フロントから認証要求 2.LambdaがLINEのアクセストークンを答えることを求めるAuth Challengeを作成 3.フロントからLIFFで作成したアクセストークンを答える 4.CognitoからLambdaにアクセストークンを伝搬 5.LINEにアクセストークンを問い合わせ、Cognitoの認証と連携 6.投票リクエスト 7.API GatewayがCognitoに認証ステータスを問い合わせ 8. 認証ステータスが付与された状態で投票functionが動作

Slide 26

Slide 26 text

@inoue2002

Slide 27

Slide 27 text

@inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話・サーバーレスすごい使った分だけの⽀払いで開発できるので、今⽇までの開発期間でも、かなりコストを抑えることができました！・サーバーレスアーキテクチャ！リクエスト数、まらびに処理の実⾏時間に応じた課⾦となり、実際の処理量と⾦額が⽐例する。事前の初期投資が不要なので、コストゼロからスタートが可能！！

Slide 28

Slide 28 text

@inoue2002 終了しました

Slide 29

Slide 29 text

Slide 30

Slide 30 text

@inoue2002 ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話

Slide 31

Slide 31 text

@inoue2002 きっかけは懇親会(11/14) ようかんくん、⼀緒になんかやりません？わーい！ぜひぜひ！ FBグループ作りますね！

Slide 32

Slide 32 text

@inoue2002 LINEDC ✖VoiceAppLab ✖ ようかん企画誕⽣🎂 ⾳声ユーザーインタフェース（VUI）の可能性を研究するクリエイター集団。たくさんのスキルやアプリを開発されています。また、最近ではLINE 上で動くゲームを開発されています。

Slide 33

Slide 33 text

@inoue2002 ⽣徒会の⼦にも協⼒してもらいモザイクアートに挑戦する

Slide 34

Slide 34 text

@inoue2002 学校にも協⼒してもらい校⻑先⽣の許可をもらいにいく情報科の先⽣を仲間にする学年団の先⽣と職員会議学校の公式企画として開始

Slide 35

Slide 35 text

@inoue2002 投票は「Bot追加して画像をとにかく投げるだけ」

Slide 36

Slide 36 text

@inoue2002 学校の公式⽂章配布とともに募集開始 4⽇で⽬標の倍の数集まった

Slide 37

Slide 37 text

@inoue2002 上映会

Slide 38

Slide 38 text

@inoue2002 上映会

Slide 39

Slide 39 text

@inoue2002 上映会

Slide 40

Slide 40 text

@inoue2002 上映会

Slide 41

Slide 41 text

@inoue2002 上映会

Slide 42

Slide 42 text

@inoue2002 上映会

Slide 43

Slide 43 text

@inoue2002 ポストカードも作ってみた

Slide 44

Slide 44 text

@inoue2002

Slide 45

Slide 45 text

@inoue2002 技術構成学校管理のサーバー実はコード⾃体は2⾏

Slide 46

Slide 46 text

@inoue2002 みんなからものすごく褒めてもらえた🎉

Slide 47

Slide 47 text

@inoue2002 学校のHPで紹介された🙌(してもらった?)

Slide 48

Slide 48 text

@inoue2002 コミュニティやAWSの⼒ですごく良い思い出を作れた・LINEAPIを知っていて、少し技術をしっているだけで、いろんなことができる。・開発者コミュニティではこんないい話も⽣まれることがある・プロジェクトが終わった時、18年間⽣きてて⼀番楽しい１⽇でした。・これからも技術とコミュニティを⼤切にして、⼤学⽣活を送っていきたいと思います！開発者コミュニティで⽣まれる可能性は無限⼤！！！

Slide 49

Slide 49 text

Slide 50

Slide 50 text

@inoue2002 1つだけ宣伝！是⾮ご参加ください！ LINE APIを使い倒す⾼校⽣4⼈のセッション⼤会を3/27 19:00-21:00に開催

Slide 51

Slide 51 text

@inoue2002 ご清聴ありがとうございました🙇 この後はoViceでお待ちしております！

Slide 52

Slide 52 text

AmplifyとLINEで作るJAWSDAYS投票システムの話 / ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話ようかん #jawsdays2021 アプリケーションサポーター