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

【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. View Slide

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

    View Slide

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

    View Slide

  4. 自己紹介(木原 卓也)
    所属
    生活協同組合コープさっぽろ
    デジタル推進本部 システム部所属
    コミュニティー
    Amplify Japan User Group 運営メンバー
    ゆるWeb勉強会@札幌 主催
    AWS Community Builder (2Q 2021)
    好きなフィギュアスケートの技
    スプレッド・イーグル
    Amplify Studio 解説担当です!
    Twitter: @tacck

    View Slide

  5. 紹介(Amplify Japan User Group)

    View Slide

  6. 自己紹介(松田 康宏)
    所属
    イースト株式会社
    教育コンテンツ事業部
    コミュニティー
    JAWS-UG 金沢支部運営メンバー
    趣味
    ランニング・ボウリング・家庭菜園
    ファイナンシャルプランナーとして
    家計相談もやってます!

    View Slide

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

    View Slide

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

    View Slide

  9. 自己紹介(織田 繁)
    株式会社NSD所属
    コミュニティ運営は
    ・JAWS-UG初心者支部
    ・JAWS SONIC 2020
    ・JAWS DAYS 2021
    ・JAWS PANKRATION 2021
    ・今日は画面共有役です!

    View Slide

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

    View Slide

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

    View Slide

  12. ツイートのお願い
    皆様、ぜひ感想ツイートよろしくお願いします!
    次回実施の活力につながります!
    #AWSAmplifyJP #jawsug #LINEDC
    #jawsug_kanazawa
    #jawsug_bgnr

    View Slide

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

    View Slide

  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
 クロージング
 松田 康宏


    View Slide

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

    View Slide

  16. 本編へ!

    View Slide

  17. LIFFについて

    View Slide

  18. LIFF(LINE Front-end Framework)
    • LINE Front-end Framework(LIFF)は、
    LINEが提供するウェブアプリのプラットフォーム
    • ウェブアプリをLINEのトークルーム上で動作することができる
    トーク画面から LIFF URL にア
    クセス
    トーク下部から、
    ウェブアプリが出現

    View Slide

  19. 設定方法
    1. LINE Developers でアカウント作成
    2. LINE ログインチャンネルを作成
    3. LIFF を追加
    a. LIFFがリダイレクトする HTTPS のエンドポイントを設定
    4. LIFF URLが発行

    View Slide

  20. LIFF SDK
    ■ LIFF SDK でLINEとの連携がさらにシームレスに
    ・アプリ上でLINEプロフィール情報の取得ができる
    ・トーク画面にメッセージを送信することができる
    ・LINEのQRコードリーダーを使用することができる
    ・etc..
    ・API リファレンス: https://developers.line.biz/ja/reference/liff/
    「LINEのユーザー情報を活用したアプリケーション」や、「チャットボットのUIでは
    対応が困難(メッセージでのやり取りではユーザーのUXが悪い)」の場合は
    LIFF を検討することをオススメします!

    View Slide

  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/

    View Slide

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

    View Slide

  23. 次回予告!イベント盛りだくさん!
    詳しくはconnpassページをチェック!
    https://linedevelopercommunity.connpass.com/
    3/7(月)
    19:00〜
    3/3(木)
    19:00〜

    View Slide

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

    View Slide

  25. View Slide