Save 37% off PRO during our Black Friday Sale! »

JAWSDAYS2021_LINEDC

 JAWSDAYS2021_LINEDC

Tweet

Transcript

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

  2. #jawsdays2021_C

  3. ⾃⼰紹介 ようかん(井上陽介) - ⾼校⽣エンジニア - 未踏ジュニア2020スーパークリエータ - LINE API Expert

    Open Hack U Vol.4 Happy Hacking賞受賞 LINE APIを使った事例作り - 最近の活動 - 得意なこと ⻑距離を⾛ること(1.5km ‒ 10km) LINEAPIをいじること イベントを主催したり登壇したりすること 学校の同級⽣や後輩を巻き込んでいろいろやること @inoue2002
  4. @inoue2002 [LINEAPI]どれぐらい開発しているかというと サービス/ツールetc.. 50+

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

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

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

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

  9. @inoue2002 本⽇のアジェンダ ② AmplifyとLINEで作るJAWSDAYS投票システムの話 - 何を作ったの? - 特徴や拘ったところは? - 技術構成

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

    ③ ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話 - 何を作ったの? - どんな過程を経たの? - 技術構成 ① LINE Developers Communityとは - コミュニティ概要 - 普段の活動
  11. @inoue2002 LINE Developers Community(LINEDC)とは ・LINE Platformを使うエンジニア・クリエータによる有志のコミュニティ ・Connpass登録メンバー3000⼈超え ・さくっとLINEで何か試したい⼈からガチガチにシステムを作る⼈まで幅広い! ・毎週のようにイベントをやっている。ハンズオンやLTが多い ・#linedc

    で検索するといろいろ出てくる
  12. @inoue2002 LINE Developers Community(LINEDC)とは

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

  14. @inoue2002 LINE API Use Case

  15. @inoue2002 本⽇のアジェンダ ② AmplifyとLINEで作るJAWSDAYS投票システムの話 - 何を作ったの? - 特徴や拘ったところは? - 技術構成

    ③ ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話 - 何を作ったの? - どんな過程を経たの? - 技術構成 ① LINE Developers Communityとは - コミュニティ概要 - 普段の活動
  16. @inoue2002

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

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

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

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

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

    ようかん
  22. @inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話 ・ AWS Amplify - フロントからバックエンドまで開発をサポート - 爆速で開発できる -

    簡単に開発を進められる - 強靭なアプリが完成!
  23. @inoue2002 AmplifyとLINEで作るJAWSDAYS投票システムの話 ・システム構成

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

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

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

  28. @inoue2002 終了しました

  29. @inoue2002 本⽇のアジェンダ ② AmplifyとLINEで作るJAWSDAYS投票システムの話 - 何を作ったの? - 特徴や拘ったところは? - 技術構成

    ③ ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話 - 何を作ったの? - どんな過程を経たの? - 技術構成 ① LINE Developers Communityとは - コミュニティ概要 - 普段の活動
  30. @inoue2002 ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話

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

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

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

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

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

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

  37. @inoue2002 上映会

  38. @inoue2002 上映会

  39. @inoue2002 上映会

  40. @inoue2002 上映会

  41. @inoue2002 上映会

  42. @inoue2002 上映会

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

  44. @inoue2002

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

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

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

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

  49. @inoue2002 本⽇のアジェンダ ② AmplifyとLINEで作るJAWSDAYS投票システムの話 - 何を作ったの? - 特徴や拘ったところは? - 技術構成

    ③ ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話 - 何を作ったの? - どんな過程を経たの? - 技術構成 ① LINE Developers Communityとは - コミュニティ概要 - 普段の活動
  50. @inoue2002 1つだけ宣伝! 是⾮ご参加ください! LINE APIを使い倒す⾼校⽣4⼈のセッション⼤会を3/27 19:00-21:00に開催

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

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