2020/12/04 開催 IBM Cloud Festa Online 2020 にて紹介した D-4 セッションの資料

1. 「LINE お絵描きスタンプ」
はこうして作られた
IBM Cloud を使って開発するメリットとは？
#icfesta

2. ワークショップ、セッション、および資料は、IBMまたはセッション発表者によって準備され、それぞれ独自の見解を反映したものです。それらは情報
提供の目的のみで提供されており、いかなる参加者に対しても法律的またはその他の指導や助言を意図したものではなく、またそのような結果を生むも
のでもありません。本講演資料に含まれている情報については、完全性と正確性を期するよう努力しましたが、「現状のまま」提供され、明示または暗
示にかかわらずいかなる保証も伴わないものとします。本講演資料またはその他の資料の使用によって、あるいはその他の関連によって、いかなる損害
が生じた場合も、IBMは責任を負わないものとします。 本講演資料に含まれている内容は、IBMまたはそのサプライヤーやライセンス交付者からいかな
る保証または表明を引きだすことを意図したものでも、IBMソフトウェアの使用を規定する適用ライセンス契約の条項を変更することを意図したもので
もなく、またそのような結果を生むものでもありません。
本講演資料でIBM製品、プログラム、またはサービスに言及していても、IBMが営業活動を行っているすべての国でそれらが使用可能であることを暗示す
るものではありません。本講演資料で言及している製品リリース日付や製品機能は、市場機会またはその他の要因に基づいてIBM独自の決定権をもって
いつでも変更できるものとし、いかなる方法においても将来の製品または機能が使用可能になると確約することを意図したものではありません。本講演
資料に含まれている内容は、参加者が開始する活動によって特定の販売、売上高の向上、またはその他の結果が生じると述べる、または暗示することを
意図したものでも、またそのような結果を生むものでもありません。 パフォーマンスは、管理された環境において標準的なIBMベンチマークを使用した
測定と予測に基づいています。ユーザーが経験する実際のスループットやパフォーマンスは、ユーザーのジョブ・ストリームにおけるマルチプログラミ
ングの量、入出力構成、ストレージ構成、および処理されるワークロードなどの考慮事項を含む、数多くの要因に応じて変化します。したがって、個々
のユーザーがここで述べられているものと同様の結果を得られると確約するものではありません。
記述されているすべてのお客様事例は、それらのお客様がどのようにIBM製品を使用したか、またそれらのお客様が達成した結果の実例として示された
ものです。実際の環境コストおよびパフォーマンス特性は、お客様ごとに異なる場合があります。
IBM、IBM ロゴ、ibm.com、IBMCloud、IBM Watson は、 世界の多くの国で登録されたInternational Business Machines Corporationの商標です。他の製品名お
よびサービス名等は、それぞれIBMまたは各社の商標である場合があります。現時点での IBM の商標リストについては、
www.ibm.com/legal/copytrade.shtmlをご覧ください。
LINE は、NHN Japanの商標です。
#icfesta

3. 自己紹介
• 木村 桂（きむら けい）
• 所属
• 日本アイ・ビー・エム IBMガレージ所属
• 趣味
• プログラミング
• マンホール
マンホールマップ: https://manholemap.juge.me/
#icfesta

4. 「LINE お絵描きスタンプ」？
2020年 IBM FamilyDay（年に一度の「家族参観日」）で提供したコンテンツ
#icfesta

5. 手描きイラストを LINE スタンプで送る！
(1) スマホに LINE をインストール
(2) LINE を起動して、誰かとのトークルー
ムを開く
(3) トークルーム内で以下のURLをメッ
セージとして送信
https://liff.line.me/1624220123-mbERyVgb
(4) 送信したリンクをタップ
（同意画面が表示されたら「許可」）
(5) 線の色や太さを指定してお絵描きして
送信
エル・アイ・エフ・エフ・ドット・エル・アイ・エヌ・イー・ドット・エム・イー
小エム・小ビー・大イー・大アール・小ワイ・大ブイ・小ジー・小ビー
IBM FamilyDay 2020 コンテンツより
#icfesta

6. 仕組み
ケ
アプリケーションサーバー
①
LINE 上の URL をタップすると
IBM Cloud 上のお絵描き
アプリケーションを起動
②
お絵描きを送信すると、
画像サーバーに記録され、
LINE でこの画像が送信された
時のように振る舞う
③
LINE に戻ると、記録された
画像がトークルーム内の全員に
表示される
（画像）データベースサーバー
LINE用
お絵描き
アプリ
https://github.com/dotnsf/line_liff_doodle
IBM FamilyDay 2020 コンテンツより
#icfesta

7. より正確なアーキテクチャ
ケ
アプリケーションサーバー
①
LINE 上の URL をタップすると
LIFF SDK が組み込まれた
IBM Cloud 上のお絵描き
アプリケーションを起動
②
お絵描きを送信すると、
画像サーバーに記録され、
LIFF SDK によって
LINE でこの画像が送信された
時のように振る舞う
③
LINE に戻ると、記録された
画像がトークルーム内の全員に
元の送信者が送信した画像とし
て表示される
（画像）データベースサーバー
LINE用
お絵描き
アプリ
LIFF
SDK
#icfesta

8. LIFF SDK とは？
LINE から開発者向けに提供されている
フロントエンドフレームワークの
Javascript SDK
(LIne Front-end Framework SDK)
以下のようなことが可能：
- LINE を起動したままウェブアプリケー
ションをオーバーラップさせて起動
- ウェブアプリケーションから LINE に
ログインする
- ログインしたユーザーの権限で、呼び
出し元のトークルームにメッセージ送信
する、など
#icfesta

9. ウェブアプリケーションを LIFF アプリ
として LINE Developers に登録
ウェブアプリケーションの URL を登録
（今回は IBM Cloud を利用）
LIFF アプリケーションとして発行された ID
（次ページで利用）
下のウェブアプリケーションを LINE から呼び出す際に指定する URL
#icfesta

10. 具体的に LIFF を使っているコード
• LINE ログイン（初期化）
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
liff.init( { liffId: 'XXXXXXX' } ).then( function(){
:
:
});
• LINE の画像メッセージ送信
var data = {
type: "image",
originalContentUrl: img_url, // 画像のURL
previewImageUrl: img_url
};
if( liff.isInClient() ){
//. Use sendMessages()
liff.sendMessages([
data
]).then( () => {
console.log( 'message sent' );
liff.closeWindow();
}).catch( ( err ) => {
console.log( 'error', err );
alert( JSON.stringify( err, null, 2 ) );
});
:
:
LIFF SDK をロード
LINE に LIFF アプリを登録した際に発行された
ID （前ページ参照）を指定して初期化
この初期化時に呼び出し元となった LINE から
ログイン ID や利用中のトークルームを特定
画像の URL を指定
以下が実行される前にお絵描き内容を画像として保存し、
画像を参照するための URL を取得しておく
画像の URL を指定して送信
（つまり LINE 的にはスタンプを送信
するのではなく、画像を送信している）
#icfesta

11. IBM Cloud を使うメリット
• LIFF API を実行するにはウェブアプリケーションは https 接続が必
須
• 要は "https://xxxx.xxx.xxx/****" という URL フォーマットのウェブページか
らでないと LIFF SDK は使えない仕様
• LIFF 以外でも同様の API は多い（セキュリティを高めるため）
• 多くのクラウド環境では、アプリケーションの https 化は面倒
• ドメイン取得、DNS 登録、証明書取得、アプリの SSL 対応、・・・
• IBM Cloud の PaaS 環境は何も意識することなく https 化できる
• 他に無料でできるのは heroku くらい？
• ぶっちゃけ「https って何？」というレベルでも OK
• 多くのサービス API が利用可能
• IBM Watson や IoT, データベースなど、アプリケーションサーバー以外の
API が充実
• しかも一定範囲内は無料で利用可能
簡単に SSL 化（https 対応）できて、各種サービス API まで併用できるクラウドは
IBM Cloud のみ
#icfesta

12. 応用技術
ケ
アプリケーションサーバー
LINE用
翻訳アプリ
LIFF
SDK
IBM Watson
Language Translator
Hello
（無料枠内で稼働 早いもの勝ち）
https://liff.line.me/1655227474-kJZGnd2Z
#icfesta

13. まとめ
• LIFF を使うことで LINE のフロントエンドとウェブアプリケー
ションの統合が実現できる
• 実際の LINE ユーザーの権限で操作ができる
• IBM Cloud を使うと、LIFF API で操作するウェブアプリケー
ションの開発が容易
• https の制約を意識する必要がない。アプリ開発に専念するだけ
• IBM Watson などの各種サービスを併用した LINE 統合アプリ開発が
可能
#icfesta

14. 補足リンク
• LINE お絵描きアプリのソースコード
• https://github.com/dotnsf/line_liff_doodle
• LINE 翻訳（応用技術で紹介したもの）のソースコード
• https://github.com/dotnsf/line_liff_translate
• LIFF(LINE Front-end Framework)
• https://developers.line.biz/ja/docs/liff/
• LIFF v2 API リファレンス
• https://developers.line.biz/ja/reference/liff/
• お絵描きアプリ（LINE 内でタップする URL）
• https://liff.line.me/1624220123-mbERyVgb
• 翻訳アプリ（LINE 内でタップする URL）
• https://liff.line.me/1655227474-kJZGnd2Z
#icfesta