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

イベント受付をLIFFアプリで!開発・運用してみて分かったAzureの使いどころ

38a509643276213e62730e92ef220405?s=47 M
November 14, 2020

 イベント受付をLIFFアプリで!開発・運用してみて分かったAzureの使いどころ

38a509643276213e62730e92ef220405?s=128

M

November 14, 2020
Tweet

Transcript

  1. 2020.11.14 (Sat) 14:00~

  2. 自己紹介 ・三木聖隆(みきまさたか) ・福岡市内のソフトウェア開発会社勤務 ・2児(小4と年長)の父 ・CoderDojo 太宰府 主宰 ・LDGQ運営メンバー CoderDojo 太宰府のfacebook LDGQのconnpass

  3. 本日の流れ ❖ CoderDojo とは ➢ 子ども向けのプログラミング道場 ❖ LINE APIでイベントの受付管理をやってみてわかったこと ➢

    公式の管理画面( LINE Official Account Manager)について ➢ LINE APIでできること(初級編。 Bot, LIFF, ミニアプリ, etc...) ❖ Azure を選んだ理由 ➢ 足りない機能、将来的に欲しい機能 ➢ いろいろ検討して、 Azureを使おうと決めた ❖ Azureで開発してみてわかったこと ➢ 開発生産性, 管理の効率, 学習コスト, etc… ➢ LINEとの連携について ➢ LINE APIでできること(中級編) ❖ LINE API を効率よく学ぶ方法(おまけ)
  4. CoderDojo とは ・2011年にアイルランドではじまり、今では、世界中で約 2,000、日本でも200を超えるCoderDojo が ある ・完全に無料でやらないといけない ・子どものことを「ニンジャ」、大人のことを「メンター」という ・先生、生徒の関係ではなく、自主的に行動し、主体性を学ぶ場(何をやってもいい!)

  5. CoderDojo 太宰府の紹介 ・太宰府天満宮周辺で月に1回のペースで開催 ・現在はオンラインでの参加も可能 ・約2時間  →自己紹介、作業時間、途中5~10分間講座、最後に発表 ・Scratch, Viscuit, Hour of

    Code (Code.org), micro:bit, レゴ マインドストーム EV3, Arduinoな ど電子工作, etc...
  6. CoderDojo 太宰府でのLINEの使用について ・2019年10月とあるハンズオンで、 LINE PayとLIFFのアプリを体験 ・LIFF(LINE Front-end Framework)とは、 LINEアプリ上でも動くWebアプリで、 LINE

    APIを楽に使って開発できる ・イベントなどの受付のチャンネルが多く、 返信など面倒な作業が多かったので、 LINEに一元化したいと思った ・そして、LIFFめっちゃ簡単と思った (後で講師がよかっただけと気づく)
  7. LIFFアプリの作成手順 1)LIFF SDKを組み込んだ、WEBアプリを作成 2)LINE DevelopersでLINE ログインのチャネルを作成する 3)作成したLINE ログインに、LIFFを追加する →エンドポイントとして、1)の URLを設定する

    4) 追加したLIFFごとにURLが払い出される おまけ)Messaging APIのチャネルを作成して、LIFFの呼び出し元とする(ボット連携)
  8. CoderDojo 太宰府でのLINEの使用について ・当初:LINE API, Vue.js, Node.js, AWS EC2, S3, PostgreSQL,

    Gmailに通知 ・現在:LINE API, Vue.js, Node.js, Heroku, PostgreSQL, Slackに通知 →完全無料
  9. 当初困ったこと ・個別にLINEで返信できない 問い合わせ 返信

  10. 公式の管理画面について LINE Official Account Manager ・正直、これだけで 十分運用できる

  11. 応答モード

  12. 応答モード ・チャットモードだと、管理画面で、ユーザーとやりとりができる

  13. 応答モード ・Botモードだと、チャットモードに変更すれば、ユーザーとやりとりができる

  14. 簡易的な返信用画面をLIFFで作った ・LIFF(LINE Front-end Framework)とは、 LINEアプリ上でも動くWebアプリで、 LINE APIを楽に使って開発できる ・LINE APIを使えば、 アイコンや名前も替えることができる

    →使いどころ色々ありそうですね!
  15. LIFF LIFFとミニアプリとの違いについて ・LINEミニアプリは、LIFF上で実行されるウェブアプリ ・LINEミニアプリの開発資格と許可が必要 ・ミニアプリ独自の便利な機能 ・インストール不要、多様なアクセス方法 ・詳細は公式ドキュメントを https://developers.line.biz/ja/docs/line-mini-app/discover/introduction/ ミニアプリ

  16. 今後のミニアプリの普及について ・WeChat/微信における「ミニプログラム」の爆発的な普及からも分かる通り、 今後LINEミニアプリ市場に多くの企業や個人が参戦すると期待できる! ・まずはLIFFからはじめましょう

  17. その後、他にも困ったこと ・公式アカウントとして承認されない →プロバイダ名に問題?

  18. プロバイダーとチャネル ・開発者アカウントの配下に複数プロバイダーを作れる ・プロバイダー配下に複数チャネル ・プロバイダ内のユーザー IDは一意 ・プロバイダ名は変更できる

  19. プロバイダーとチャネルについて ・公式アカウントにプロバイダー名が表示される →公式ニュースでも、適切なプロバイダー名か確認して! ・プロバイダー名は変更できるが・・・

  20. 運用していると、追加したい機能も増えてきた ・チャットモードのようなやりとりを行う管理画面 ・複数の管理者で運用したい ・教材やイベントの周知、通知 ・イベントの出席管理に加え、教材の予約 ・メニュー増やしたい、分割したい

  21. 運用していると、追加したい機能も増えてきた ・チャットモードのようなやりとりを行う管理画面 ・複数の管理者で運用したい ・教材やイベントの周知、通知 ・イベントの出席管理に加え、教材の予約 ・メニュー増やしたい、分割したい 全体的に 作り直そう!

  22. Azureを使おう ・とあるハンズオンイベントで Azure Bot Serviceでオウム返しボットを作った ・LINEでチャネル(Messaging API)を作成し、そのアクセストークンと、チャネルシークレットを設定す るだけ →爆速(最短5分くらい)でボットが作れる ・できあがったら、ソース一式をダウンロードでき、簡単に変更を加えることができる

    LINEとの 親和性がも高い
  23. Azureを使おう LINEを選んで、 設定値を入力するだけ Botソースコードをダウン ロードできる

  24. Azureを使おう ・また、とあるハンズオンイベントで Azure Cognitive Servicesを使ったテイクアウトアプリを作った →感情分析を使った ・ボットといえば、AIの機能が必須!? →Cognitive Servicesには、自然言語解析、文章からキーフレーズや感情分析、動画から字幕生成な どもある(いずれも対応リージョンや日本語対応の課題あり)

    ・マイクロサービス活用 →今後もどんどん増える、 またはもっとよくなるだろうという期待 ・スケールが容易、高可用性 柔軟な開発
  25. Azureを始めるにあたって調べたこと ・使いにくい? ・価格が高い?

  26. Azure使いにくい? ・ポータル画面 →カスタマイズも できる(らしい)

  27. Azure使いにくい? ・リソースの概念 ・他にも、リソースプロバイダーやら、リソースマネージャ( ARM)、 リソースマネージャテンプレートやら ・リージョンによって使えたり、使えなかったり サブスクリプション リソースグループ リソースグループ リソース

    リソース
  28. Azureの勉強方法 ・公式ドキュメント https://docs.microsoft.com/ja-jp/azure/?product=featured →豊富なチュートリアル。書いてある通りやると誰でもできる!

  29. Azureの勉強方法 ・Microsoft Learn https://docs.microsoft.com/ja-jp/learn/ →Azure関連だけでも数百のコース。まずは、「 Azure 基礎」で検索し、 ラーニングパスをやる

  30. Azureの勉強方法 ・Microsoft Learn https://docs.microsoft.com/ja-jp/learn/ →Azure関連だけでも数百のコース。まずは、「 Azure 基礎」で検索し、 ラーニングパスをやる その他ネット記事、 書籍(少な目?)も

    ただし、情報の 正確性に要注意 公式のUpdate情報(英 語)や、Update情報を カバーしている日本語 のサイトもある
  31. Azureの価格について ・従量課金 →使った分だけかかるのか、使わなくてもかかるのかは、しっかり把握 ・料金体系は比較的わかりやすい ・請求のアラート設定は大切 ・個人、小規模で始める分はほぼ無料に近い感じで開発できる(ような気がしている) ・リソースグループごと 削除すると安心

  32. 新しいアカウントのメニューについて ・リッチメニューを作成 →作成方法がいくつかある ・GUIで作成 ・APIで作成 ・期間限定でメニューを変えたり、 APIを使えば、ユーザーによる変更や、 階層構造のメニューも可能 ・「リッチメニュー 事例」で検索して みてください!

  33. リッチメニューの作成(GUI) ・LINE Official Account Managerで作成 →テンプレートを選んで、楽々編集

  34. リッチメニューの作成(API) ・APIでrichmenuIdを払い出し、 画像をアタッチする →デフォルト設定もできるし、 特定のタイミングで設定する ようプログラムもできる

  35. リッチメニューの仕組み ・メニューごとにアクション(ポストバック、メッセージ、 URIなど)の設定が できるため、好きな単位でプロジェクト(リソースグループ)を作成し、 好きな環境や言語で開発できる Vue.js C# Bot ・LINE Offcial

    Account Managerでは、クーポンや ショップカードなども作れた りします
  36. LIFFの仕組み ・LIFFごとにIDやURLがあり、個別の開発も可能

  37. LIFFの仕組み ・LIFFはLINE以外のブラウザでも表示できる (公式には、Microsoft Edge, Google Chrome, Firefox, Safariと記載) ・ログインなしでユーザーデータにアクセスできる実装が見込める ・ユーザーIDが分かればメッセージを送信できるし、ユーザーの友だちやグループから選択してメッ

    セージを送ることもできる( Share Target Picker) ・バックエンドは何でもいい →つまり、Azureでもいい ・公式サイトにスターターアプリ ・QRコードリーダーの使用は要注意 →外部ブラウザ、iOSのLINEはNG
  38. Azureのサービスの選択 ・実際にLINE APIを使ったボットや、LIFF、ミニアプリを開発する際に、何 を選べばいいか? ① Azure Functions ② Azure Web

    Apps ③ Azure Static Web Apps
  39. ① Azure Functions ・サーバーレス。すぐにコードを書いて実行できる ・C#, JavaScript, Java, Pythonなど豊富な言語サポート ・http, blob,

    タイマーなど様々なサービスのイベントに反応。結果を様々なサービスに連携 ・柔軟なスケーリング → 公式ドキュメントのホスティングプランとスケールについてを参照 ・ログなど利用状況のモニタリング( Application Insights)→5GB/月まで無料 ・VS Codeに拡張がある ・使った分だけ課金(従量課金プラン)
  40. Visual Studio Code ・Azure サービスの拡張 →VS Code側でポチポチするだけで、 Azure Functionsのプロジェクトが作成でき、 簡単にデプロイできる

    ・Azure CLIを使うこともできる ・(多分初めは)結構な頻度で エラーが発生し、ネット などを調べる時間が掛かる →勉強になっている!
  41. ② Azure Web Apps ・WebアプリやREST APIをホストするサービス ・Windows , Linuxの環境を利用可能 ・豊富なテンプレートから開発を始められる

    ・VS Coderに拡張機能あり →Azure App Service(PREVIEW) ・無料プラン、共有プランあり →通常はBasicプラン以上(時間当たりの価格設定) ・DevOps環境に最適化されている
  42. ③ Azure Static Web Apps (PREVIEW) ( 1/2 ) ・HTML,

    CSS, JavaScript, 画像などの静的コンテンツの Web ホスティング(無償!) →Angular, React, Vueなど様々なフレームワークに対応 ・Azure Functionsによって提供される統合 API ・GitHub Actionsによるビルド&デプロイ(GitHub連携が必須) →高機能のCI/CDでソフトウェアワークフローを簡単に自動化
  43. ③ Azure Static Web Apps (PREVIEW) ( 2/2 ) ・カスタムドメイン対応、自動更新される無料の

    SSL証明書を利用可能 ・ビルトインの認証機構を利用可能(外部認証プロバイダー利用) →Google, Twitter, facebook, GitHub, Azure ADによるログイン ・ほぼVS Code上で開発が完結できる ・まだ、PREVIEW期間中 ・ホスティングできるアプリ数、ファイルサイズ(ファイル数も?)に上限がある
  44. Azure まとめ & その他の利点 ・VS Codeとの親和性。生産性アップ。開発が楽しい ・学習コストが低いとは言いづらいが、環境は整っている ・DBも豊富 →NoSQLのCosmos DBや、オンプレとの連携サービスもあり、選択肢が多い

    運用後、諸々を診断するサービスもある(パフォーマンス、クエリ診断等々) ・主要なサービスにSLAが設定されている →この値を踏まえ、要件と照らし合わせてサービスの利用や冗長化を決定できる
  45. LINE APIの勉強方法 ・書籍 『LINE API 実践ガイド』 2020年10月初版 マイナビ出版 著者 LINE API Expert

    認定メンバー
  46. LINE APIの勉強方法 ・Twitter(@LINE_DEV) ・LINE Engineering Blog https://engineering.linecorp.com/ja/blog/

  47. LINE APIの勉強方法 ・まずは、LINE APIのコミュニティのイベントに参加、できれば運営 LINE Developers Community https://linedevelopercommunity.connpass.com/ LINE Developer

    Group Kansai https://ldgk.connpass.com/ LINE Developer Group Q-shu https://linedevkyushu.connpass.com/ ゆるい感じでやって ます。目標は毎日イ ベント
  48. LINE APIの勉強方法 ・オンラインイベント後の懇親会タイムも楽しく交流、 情報交換がされています!?

  49. ご清聴ありがとうございました 次のLDGQのイベントでまたお会いしましょう!