BMXUG 市川 IT 勉強会「LINE でお絵描きメッセージを送ってみよう」ハンズオン資料

1. BMXUG 市川 IT 勉強会
LINE でお絵描きメッセージを送ってみよう
2019.05.19 #bmxug
あらかじめテキストエディ
タを
インストールしておいてく
ださい！
例： サクラエディタ、
CotEditor 、・・

2. 自己紹介
本アイ・ビー・エム クラウドエバンジェリスト
witter: @dotnsf
og: http://dotnsf.blog.jp/
mail: dotnsf@jp.ibm.com
趣味： マンホール
木村 桂（きむら けい）
プログラマー
マンホールマップ : http://manholemap.juge.me/

3. 大まかな流れ
0. 諸準備
• IBM Cloud へログイン
• cf ツールインストール
• LINE Developer アカウント
1. IBM Cloudant の用意
• 画像データベース
2. Node.js アプリケーションのデプロイ
• お絵描きアプリケーション
3. LINE Developer での操作
• LINE アプリとの連動設定

4. 0. 諸準備

5. システム構成
トークルーム
Node.js
画像 DB
LIFF
LIFF(LIne Front-end Framework) によって
LINE アプリの中でお絵描きウェブアプリを呼び出し、
LINE とシームレスに連携して画像をトークルームに送信する

6. IBM Cloud へログイン (1)
https://cloud.ibm.com/

7. IBM Cloud へログイン (2)自分のアカウント名になっていることを確認

8. cf ツールインストール
https://github.com/cloudfoundry/cli/releases
自分の利用環境にあったものを選んでダウンロード＆インストール

9. LINE Developers(1)
https://developers.line.biz/ja/

10. LINE Developers(2)

11. LINE Developers(3)

12. LINE Developers(4)
「確認する」 → 「作成する」 でプロバイダーを作成
プロバイダー名（個人名）を入力

13. LINE Developers(5)
プロバイダー名を選択

14. LINE Developers(6)
新規にチャネルを作成

15. LINE Developers(7)
Messaging API を選択

16. LINE Developers(8)

17. LINE Developers(9)
※ アプリ名に "LINE" が含まれては駄目、らしいです

18. LINE Developers(10)

19. LINE Developers(11)

20. 1. IBM Cloudant の準備

21. IBM Cloudant の準備 (1)
Cloudant サービスを未作成の場合

22. IBM Cloudant の準備 (2)

23. IBM Cloudant の準備 (3)

24. IBM Cloudant の準備 (4)

25. IBM Cloudant の準備 (5)

26. IBM Cloudant の準備 (6)

27. IBM Cloudant の準備 (7)

28. IBM Cloudant の準備 (8)

29. IBM Cloudant の準備 (9)

30. IBM Cloudant の準備 (10)

31. IBM Cloudant の準備 (11)

32. IBM Cloudant の準備 (12)
この中の（ username と password の）値を後で使います

33. IBM Cloudant の準備 (13)
右クリック

34. 2. Node.js アプリケーションのデプ
ロイ

35. Node.js アプリケーションのデプロイ (1)

36. Node.js アプリケーションのデプロイ (2)

37. Node.js アプリケーションのデプロイ (3)
ダラスを選択
他の人が使っていないアプリ名（例 名前 -lineoekaki ）
128 MB または 64MB を選択

38. Node.js アプリケーションのデプロイ (4)

39. Node.js アプリケーションのデプロイ (5)
https://github.com/dotnsf/line_liff_doodle
git clone するか、 download して展開

40. Node.js アプリケーションのデプロイ (6)
（デスクトップ上にそのまま展開したと仮定して以降を説明します）

41. Node.js アプリケーションのデプロイ (7)
settings.js をテキストエディタで開く

42. Node.js アプリケーションのデプロイ (8)
exports.db_username の値を cloudant の接続情報で確認した username の値に、
exports.db_password の値を同 password の値に書き換えて保存。

43. Node.js アプリケーションのデプロイ (9)

44. Node.js アプリケーションのデプロイ
(10)
> cd Users （ユーザー名） Desktopline_liffdoodle-master
cd と入力してから
エクスプロラーのフォルダ部分を
ドラッグ＆ドロップして Enter キー

45. Node.js アプリケーションのデプロイ
(11)
> cf login -a https://api.ng.bluemix.net/ -u （ IBM Cloud のログイン名）
パスワードなどを入力

46. Node.js アプリケーションのデプロイ
(12)
> cf push （アプリ名）

47. （おまけ） LIFF とその挙動につ
いて

48. LIFF (LIne Front-end Framework) とは？
• 2018 年６月に LINE から提供が開始された、比較的新しい
Messaging API
• 従来の Messaging API では主に bot を作るための、バックエンドの機
能が提供されていた
• LIFF はその名の通りフロントエンドの機能が提供され、 LINE の利用者
の権限で実行することができる
• スマホの LINE アプリから外部のウェブアプリを呼び出し、そ
のウェブアプリから呼び出し元の LINE アプリ（のトークルー
ム）でメッセージを送信することができる
• ブラウザ用の JavaScript SDK が提供されている

49. システム構成
Node.js
画像 DB
トークルーム
LIFF
LIFF SDK を使って、
ウェブアプリケーション上からトークルームやユーザーの情報を取得し、
またトークルームへメッセージを送信することができるようになる
SDK(JavaScript ファイル）
（ SDK を外部読み込み）
https

50. LIFF の特徴
• ブラウザ上の JavaScript を使って LINE トークルームへメッセー
ジ送信ができる
• メッセージはテキストだけでなく、画像や動画、スタンプ、位置情報なども
可
• 画像の場合、 URL がインターネット上に公開されている必要がある
• 送信する人は LIFF URL をタップしたユーザー、送信先は元のトーク
ルーム
• LIFF URL で起動するウェブアプリケーションは https 対応している
必要あり
• ドメイン取得、証明書の発行、ウェブアプリケーションサーバーの SSL 対
応、・・
• IBM Cloud (PaaS) を使うと特に意識しなくても大丈夫 d(^^)

51. 今回 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

52. 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 ] );

53. 2. Node.js アプリケーションのデプロイ（の続
き）

54. Node.js アプリケーションのデプロイ
(13)
↑ 上記のような状態になればデプロイ成功

55. Node.js アプリケーションのデプロイ
(14)

56. Node.js アプリケーションのデプロイ
(15)
ブラウザ上でお絵描きアプリが動くことを確認

57. Node.js アプリケーションのデプロイ
(16)
線の色
線の太
さ
背景色
に設定
アンド
ゥ
リドゥ
初めから
やり直し
送信
※ この時点ではまだ「送信」できません
履歴
※ スマホからのみ利用可

58. 3. LINE Developer での操作

59. LINE Developer での操作 (1)

60. LINE Developer での操作 (2)

61. LINE Developer での操作 (3)

62. LINE Developer での操作 (4)

63. LINE Developer での操作 (5)
LIFF URL をなんとかして自分の LINE に（自分のスマホに）送る。
LINE のどこかのトークルーム内のメッセージにする

64. LINE Developer での操作 (6)

65. LINE Developer での操作 (7)
LIFF URL を友人と共有して遊ぶ

66. お願い！ 良さ気な作品ができたら（できなくても）、
画像をコピー＆ペーストして
#bmxug タグを付けて
Twitter でもつぶやいてください！
この後の記念撮影時の背景にします。。。

67. （おまけ）ソースコードについて

68. 興味がある方はソースコードを改良してみて
！
（１） app.js
- お絵描き画像の DB 保存
- お絵描き画像の取り出し
（２） public/index.ejs
- アプリケーションのユーザーインターフェース (HTML)
- LIFF SDK を使った LINE への画像送信
① お絵描き画像送信
② 画像格納
③ 画像 URL 返却
LIFF
④LIFF SDK を使って
LINE に画像送信
実質的なソースコードはファイル２つのみ

69. （おまけ）今後について

70. IT に興味を持つきっかけに・・・
感想、要望、等々・・・を
#bmxug タグを付けてでツイートしてください！

71. Q & A

72. BMXUG 市川 IT 勉強会
LINE でお絵描きメッセージを送ってみよう
2019.05.19 #bmxug