$30 off During Our Annual Pro Sale. View Details »

【Amplify Studio×LIFF×Figma】ローコードで電子チケットアプリを作るハンズオン

【Amplify Studio×LIFF×Figma】ローコードで電子チケットアプリを作るハンズオン

https://linedevelopercommunity.connpass.com/event/237286/
で実施しましたハンズオンのオープニング、クロージングで利用したスライドです。

動画:
https://www.youtube.com/watch?v=i8aFuGLKFl8
ハンズオン資料:
https://zenn.dev/ufoo68/books/dd47602c20ec472d11de
ハンズオン用リポジトリ:
https://github.com/ufoo68/linedc-ticket-liff

Yasuhiro MATSUDA

February 18, 2022
Tweet

More Decks by Yasuhiro MATSUDA

Other Decks in Technology

Transcript

  1. None
  2. 自己紹介と 所属コミュニティ紹介

  3. 自己紹介(松永 勇太) 所属 株式会社ACCESS 1994年生まれ滋賀県出身、現在は埼玉に 在住。業務ではAWSを用いたサーバー開 発をメインで行っていて、仕事・趣味でも Node.jsを使うことが多い。 コミュニティ活動 としてLTやハッカソンへの参加を積極的に

    行っているが、個人でもスポーツ IoTLTの 主催を行っていたりしている。 好きなことは 「シンプルなもの」をつくること
  4. 自己紹介(木原 卓也) 所属 生活協同組合コープさっぽろ デジタル推進本部 システム部所属 コミュニティー Amplify Japan User

    Group 運営メンバー ゆるWeb勉強会@札幌 主催 AWS Community Builder (2Q 2021) 好きなフィギュアスケートの技 スプレッド・イーグル Amplify Studio 解説担当です! Twitter: @tacck
  5. 紹介(Amplify Japan User Group)

  6. 自己紹介(松田 康宏) 所属 イースト株式会社 教育コンテンツ事業部 コミュニティー JAWS-UG 金沢支部運営メンバー 趣味 ランニング・ボウリング・家庭菜園

    ファイナンシャルプランナーとして 家計相談もやってます!
  7. 紹介(JAWS-UG 金沢支部) 石川県金沢市を中心に、1ヶ月ごとに 勉強会を行っています。「AWSに興味 のあるかた」「よりいっそう活用したい方」「使ってる仲間を見つけたい方」ぜひ ともご参加ください! 今回で78回目になります。2019年にAWS Community Day Kanazawaを開催しました!

  8. 自己紹介(河野 剛) 河野 剛(かわの ごう) 株式会社サーバーワークス 福岡オフィス所属 AWS×LIFFアプリ開発に興味があり、 趣味で自炊記録 Bot などを開発してます。 Twitter:

    @goubou5
  9. 自己紹介(織田 繁) 株式会社NSD所属 コミュニティ運営は ・JAWS-UG初心者支部 ・JAWS SONIC 2020 ・JAWS DAYS

    2021 ・JAWS PANKRATION 2021 ・今日は画面共有役です!
  10. 紹介(JAWS-UG 初心者支部) AWSをこれから活用したい人や一緒に勉強す る仲間が欲しい人を主なターゲットとしていま す。 https://jawsug-bgnr.connpass.com

  11. LINE Developer Communityとは? •LINE Platformでものづくりするエンジニア・クリエイターによる有志 のコミュニティです。 •LINEの技術が好きな方とのネットワーク作り、LINE Platformの勉強 会を通じ、参加者同士の情報交換を行い、日々の開発運用に役立 てることを目指します。

    •要はLINEで面白いものを作ったり、エンジニア同士の情報交換・コラ ボを促進しようというコミュニティ
  12. ツイートのお願い 皆様、ぜひ感想ツイートよろしくお願いします! 次回実施の活力につながります! #AWSAmplifyJP #jawsug #LINEDC #jawsug_kanazawa #jawsug_bgnr

  13. 【Amplify Studio×LIFF×Figma】 ローコードで電子チケットアプリを作るハンズオン 本日のテーマ

  14. タイムテーブル 19:00 - 19:05
 オープニング 
 松田 康宏
 19:05 -

    19:15
 LIFFについて
 河野 剛
 19:15 - 19:35
 ハンズオン①
 松永 勇太 織田 繁
 19:35 - 19:45
 休憩
 19:45 - 20:00
 Amplify Studioとは?
 木原 卓也
 20:00 - 20:45
 ハンズオン②
 松永 勇太 織田 繁
 20:45 - 21:00
 休憩
 21:00 - 21:15
 お片付け
 松永 勇太 織田 繁
 21:15 - 21:20
 クロージング
 松田 康宏

  15. 質問は、メッセージ欄に質問を入れてください。 進捗を時々お尋ねしますので、手を挙げてください。 相談したいボタンでのご相談は長時間の対応ができない場合があります。 shilasの使い方

  16. 本編へ!

  17. LIFFについて

  18. LIFF(LINE Front-end Framework) • LINE Front-end Framework(LIFF)は、 LINEが提供するウェブアプリのプラットフォーム • ウェブアプリをLINEのトークルーム上で動作することができる

    トーク画面から LIFF URL にア クセス トーク下部から、 ウェブアプリが出現
  19. 設定方法 1. LINE Developers でアカウント作成 2. LINE ログインチャンネルを作成 3. LIFF

    を追加 a. LIFFがリダイレクトする HTTPS のエンドポイントを設定 4. LIFF URLが発行
  20. LIFF SDK ▪ LIFF SDK でLINEとの連携がさらにシームレスに ・アプリ上でLINEプロフィール情報の取得ができる ・トーク画面にメッセージを送信することができる ・LINEのQRコードリーダーを使用することができる ・etc..

    ・API リファレンス: https://developers.line.biz/ja/reference/liff/ 「LINEのユーザー情報を活用したアプリケーション」や、「チャットボットのUIでは 対応が困難(メッセージでのやり取りではユーザーのUXが悪い)」の場合は LIFF を検討することをオススメします!
  21. ドキュメント ・https://developers.line.biz/ja/docs/liff/ ★初めての方は要チェック★ ・開発ガイドライン:  https://developers.line.biz/ja/docs/liff/development-guidelines/ ・LIFFアプリを開く  https://developers.line.biz/ja/docs/liff/opening-liff-app/ ・LIFFアプリおよびサーバーでユーザー情報を使用する  https://developers.line.biz/ja/docs/liff/using-user-profile/

  22. チャンネル登録お願いします󰢛 本日のアーカイブ/最新情報や事例の紹介 勉強会動画を分かりやすく編集してアップ / LINE DC などなど 登録者増 = 他の配信者、他チャンネルとのコラボレーション

    が可能になり、より多くのコンテンツをお届けできるようになり ます!
  23. 次回予告!イベント盛りだくさん! 詳しくはconnpassページをチェック! https://linedevelopercommunity.connpass.com/ 3/7(月) 19:00〜 3/3(木) 19:00〜

  24. アンケートにご協力ください! LINE Developer Community のイベントへの参加ありがとうございます。 次回以降さらに良いイベントを開催するため、事後アンケートへのご協力をお願いします。 全てに目を通し次回開催の参考とさせていただきますので、ぜひご協力よろしくお願い致します。 https://forms.gle/79wfuFSwswv1fYYf6

  25. None