Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JAWSDAYS2021_LINEDC

 JAWSDAYS2021_LINEDC

Tweet

More Decks by ようかん(YosukeInoue

Other Decks in Programming

Transcript

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

    View Slide

  2. #jawsdays2021_C

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. @inoue2002
    LINE Developers Community(LINEDC)とは

    View Slide

  13. @inoue2002
    LINE Developers Community(LINEDC)とは

    View Slide

  14. @inoue2002
    LINE API Use Case

    View Slide

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

    View Slide

  16. @inoue2002

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. @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が動作

    View Slide

  26. @inoue2002

    View Slide

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

    View Slide

  28. @inoue2002
    終了しました

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. @inoue2002
    上映会

    View Slide

  38. @inoue2002
    上映会

    View Slide

  39. @inoue2002
    上映会

    View Slide

  40. @inoue2002
    上映会

    View Slide

  41. @inoue2002
    上映会

    View Slide

  42. @inoue2002
    上映会

    View Slide

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

    View Slide

  44. @inoue2002

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide