Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LINE お絵描きアプリハンズオン

530 views

Published on

IBM Cloud と LIFF(LIne Frontend Framework) を使って LINE と連携した手描きイラスト送信アプリケーションを作る

Published in: Business
  • Be the first to comment

LINE お絵描きアプリハンズオン

  1. 1. BMXUG 女子部勉強会 LINE でお絵描きメッセージを送ってみよう 2019.02.19 #bmxug #bmxgg
  2. 2. 自己紹介 本アイ・ビー・エム クラウドエバンジェリスト witter: @dotnsf og: http://dotnsf.blog.jp/ mail: dotnsf@jp.ibm.com 趣味: マンホール 木村 桂(きむら けい) プログラマー マンホールマップ : http://manholemap.juge.me/
  3. 3. 大まかな流れ 0. 諸準備 • IBM Cloud へログイン • cf ツールインストール • LINE Developer アカウント 1. IBM Cloudant の用意 • 画像データベース 2. Node.js アプリケーションのデプロイ • お絵描きアプリケーション 3. LINE Developer での操作 • LINE アプリとの連動設定
  4. 4. 0. 諸準備
  5. 5. システム構成 トークルーム Node.js 画像 DB LIFF LIFF(LIne Front-end Framework) によって LINE アプリの中でお絵描きウェブアプリを呼び出し、 LINE とシームレスに連携して画像をトークルームに送信する
  6. 6. IBM Cloud へログイン (1) https://console.bluemix.net/
  7. 7. IBM Cloud へログイン (2)
  8. 8. IBM Cloud へログイン (3)自分のアカウント名になっていることを確認
  9. 9. cf ツールインストール https://github.com/cloudfoundry/cli/releases 自分の利用環境にあったものを選んでダウンロード&インストール
  10. 10. LINE Developers(1) https://developers.line.biz/ja/
  11. 11. LINE Developers(2)
  12. 12. LINE Developers(3)
  13. 13. LINE Developers(4) 「確認する」 → 「作成する」 でプロバイダーを作成 プロバイダー名(個人名)を入力
  14. 14. LINE Developers(5) プロバイダー名を選択
  15. 15. LINE Developers(6) 新規にチャネルを作成
  16. 16. LINE Developers(7) Messaging API を選択
  17. 17. LINE Developers(8)
  18. 18. LINE Developers(9) ※ アプリ名に "LINE" が含まれては駄目、らしいです
  19. 19. LINE Developers(10)
  20. 20. LINE Developers(11)
  21. 21. 1. IBM Cloudant の準備
  22. 22. IBM Cloudant の準備 (1) Cloudant サービスを未作成の場合
  23. 23. IBM Cloudant の準備 (2)
  24. 24. IBM Cloudant の準備 (3)
  25. 25. IBM Cloudant の準備 (4)
  26. 26. IBM Cloudant の準備 (5)
  27. 27. IBM Cloudant の準備 (6)
  28. 28. IBM Cloudant の準備 (7)
  29. 29. IBM Cloudant の準備 (8)
  30. 30. IBM Cloudant の準備 (9)
  31. 31. IBM Cloudant の準備 (10)
  32. 32. IBM Cloudant の準備 (11)
  33. 33. IBM Cloudant の準備 (12) この中の( username と password の)値を後で使います
  34. 34. IBM Cloudant の準備 (13) 右クリック
  35. 35. 2. Node.js アプリケーションのデプ ロイ
  36. 36. Node.js アプリケーションのデプロイ (1)
  37. 37. Node.js アプリケーションのデプロイ (2)
  38. 38. Node.js アプリケーションのデプロイ (3) ダラスを選択 他の人が使っていないアプリ名(例 名前 -lineoekaki ) 64MB を選択
  39. 39. Node.js アプリケーションのデプロイ (4)
  40. 40. Node.js アプリケーションのデプロイ (5) https://github.com/dotnsf/line_liff_doodle git clone するか、 download して展開
  41. 41. Node.js アプリケーションのデプロイ (6) (デスクトップ上にそのまま展開したと仮定して以降を説明します)
  42. 42. Node.js アプリケーションのデプロイ (7) settings.js をテキストエディタで開く
  43. 43. Node.js アプリケーションのデプロイ (8) exports.db_username の値を cloudant の接続情報で確認した username の値に、 exports.db_password の値を同 password の値に書き換えて保存。
  44. 44. Node.js アプリケーションのデプロイ (9)
  45. 45. Node.js アプリケーションのデプロイ (10) > cd Users (ユーザー名) Desktopline_liffdoodle-master
  46. 46. Node.js アプリケーションのデプロイ (11) > cf login -a https://api.ng.bluemix.net/ -u ( IBM Cloud のログイン名) パスワードなどを入力
  47. 47. Node.js アプリケーションのデプロイ (12) > cf push (アプリ名)
  48. 48. (おまけ) LIFF とその挙動につ いて
  49. 49. LIFF (LIne Front-end Framework) とは? • 2018 年6月に LINE から提供が開始された、比較的新しい Messaging API • 従来の Messaging API では主に bot を作るための、バックエンドの機 能が提供されていた • LIFF はその名の通りフロントエンドの機能が提供され、 LINE の利用者 の権限で実行することができる • スマホの LINE アプリから外部のウェブアプリを呼び出し、そ のウェブアプリから呼び出し元の LINE アプリ(のトークルー ム)でメッセージを送信することができる • ブラウザ用の JavaScript SDK が提供されている
  50. 50. システム構成 Node.js 画像 DB トークルーム LIFF LIFF SDK を使って、 ウェブアプリケーション上からトークルームやユーザーの情報を取得し、 またトークルームへメッセージを送信することができるようになる SDK(JavaScript ファイル) ( SDK を外部読み込み) https
  51. 51. LIFF の特徴 • ブラウザ上の JavaScript を使って LINE トークルームへメッセージ送 信ができる • メッセージはテキストだけでなく、画像や動画、スタンプ、位置情報なども 可 • 画像の場合、 URL がインターネット上に公開されている必要がある • 送信する人は LIFF URL をタップしたユーザー、送信先は元のトーク ルーム • LIFF URL で起動するウェブアプリケーションは https 対応している必 要あり • ドメイン取得、証明書の発行、ウェブアプリケーションサーバーの SSL 対 応、・・ • IBM Cloud (PaaS) を使うと特に意識しなくても大丈夫 d(^^)
  52. 52. 今回 IBM Cloud 上で動かすアプリケー ション • HTML5 の Canvas 上に(マウスや)タッチでお絵かきするアプ リケーション • 元はこれ : https://github.com/dotnsf/html5pen • マウスイベントやタッチイベントをハンドリングして座標点を線で結 ぶ • POST ボタン送信時に Canvas の内容を画像化して保存し、その URL を指定して LIFF で sendMessages() と closeWindow() を実行し、「画 像を添付して送信し終了」する • ストローク単位のアンドゥ&リドゥまでは実装 • 今日のハンズオンの(ざっくりな)内容はブログでも紹介 • http://dotnsf.blog.jp/archives/1073002287.html • http://dotnsf.blog.jp/archives/1073088825.html
  53. 53. LIFF を使ったメッセージポスト 1. ウェブアプリの中に以下を記述( SDK をロード) <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script> 2. ページロード後に JavaScript で以下を実行して初期化 <script> liff.init( data => {}, err => {} ); </script> 3. 以下のコードで LINE にメッセージ送信 <script> var data = { type: "text", text: " こんにちは " }; liff.sendMessages( [ data ] ); </script> 画像を添付する場合は以下のように変更 var data = { type: "image", originalContentUrl: " 画像の URL", previewImageUrl: " サムネイル画像の URL" }; liff.sendMessages( [ data ] );
  54. 54. 2. Node.js アプリケーションのデプロイ(の続 き)
  55. 55. Node.js アプリケーションのデプロイ (13) ↑ 上記のような状態になればデプロイ成功
  56. 56. Node.js アプリケーションのデプロイ (14)
  57. 57. Node.js アプリケーションのデプロイ (15) ブラウザ上でお絵描きアプリが動くことを確認
  58. 58. 3. LINE Developer での操作
  59. 59. LINE Developer での操作 (1)
  60. 60. LINE Developer での操作 (2)
  61. 61. LINE Developer での操作 (3)
  62. 62. LINE Developer での操作 (4)
  63. 63. LINE Developer での操作 (5) LIFF URL をなんとかして自分の LINE に(自分のスマホに)送る。 LINE のどこかのトークルーム内のメッセージにする
  64. 64. LINE Developer での操作 (6)
  65. 65. LINE Developer での操作 (7) LIFF URL を友人と共有して遊ぶ
  66. 66. Q & A
  67. 67. BMXUG 女子部勉強会 LINE でお絵描きメッセージを送ってみよう 2019.02.19 #bmxug #bmxgg

×