IBM FamilyDay 2022 で紹介した「帰ってきた LINE 手描きスタンプ」コンテンツ資料

1. 「帰ってきた」LINE 手描きスタンプ
日本アイ・ビー・エム株式会社 東京ソフトウェア＆システム研究所
木村 桂
2021
2021
IBM Family Days 2022
デジタルで「もっと」つ・な・が・るIBM

2. 12
参加いただく皆様へ（１）
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
 このセッションで行うこと
– 約45分間の体験会を予定しております。途中、休憩はありません
– スマートフォンの画面に指でお絵描きをします
– そのお絵描きを全員で共有したり、LINE のスタンプとして家族やお友達に送信します
 LINE のお絵描きスタンプは本日のファミリーデー終了後もお使いいただけます
 用意いただくもの
– Webex のインストールされたパソコン
 今この画面が見えていれば問題ありません
– LINE がインストールされたスマートフォン（iPhone, iPad, Android）
 この後使います。お手元にご用意ください
 パソコン版の LINE にはない機能を使います。パソコン版 LINE では参加できません
 お子様がスマートフォンをお持ちでない場合は、親御様からお貸しいただけますようお願いいたします
 LINE がインストールされたスマートフォンを２台以上準備いただける場合はお子様だけでなく、親御様も是非ご参加ください
 （LINE とは別に）スマホのカメラ機能で QR コード読み取りを行います

3. 13
参加いただく皆様へ（２）
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
 録画について
– 本セッションは録画します。
– 特に質問などがない場合、皆さんの映像や音声を記録することはありません。
 どうしても映りたい人はご自由にカメラを ON にしてください v(^o^)v
 Webex の画面について
– 本セッションでは主催者のパソコン画面を共有して行います。パソコンの画面を見ながら手元でスマートフォン
を操作してご参加いただきます。
– 本セッション中、特に質問やコメントを音声でお伝えいただく必要がない場合はカメラもマイクも OFF にし
てください。
– 質問等がある場合はマイクを ON にしてお伝えいただくか、または Webex のチャット機能を使ってお伝え下
さい。 チャット
カメラ
マイク マイクとカメラは赤が OFF、
黒が ON で、一回ごとに切替わります

4. 14
本日、ご一緒させていただきます！
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
木村 桂

5. 15
LINE で手描きスタンプに挑戦！
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
 まずは練習
 LINE で手描きスタンプ送信
 「自画像」で記念撮影

6. 16
手描きの練習（準備）
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
https://doodleshareex.yellowmix.net/?room=ifd2022
①スマートフォンを取り出し、
QR コード読み取りか、
上記 URL を入力
③この画面になったら準備完了
そのまま
名前（あだ名）
最後にタップ
②"ifd2022" はそのまま
Your name に名前を入力してStart
名前（あだ名）

7. 17
手描きの練習（画面説明）
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
入力した名前（あだ名）
線の太さ
線の色
背景色（最初は透明）
１回やり直し
やり直しのやり直し
はじめからやり直し
キャンバス（ここに指で絵を描く）

8. 20
お題：「夏休み」
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
？
？ ？

9. 21
手描き共有の仕組み
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
アプリケーションサーバー
①
タップした指を離したら、
描いた絵を画像に変換して、
送信（アップロード）する
②
画像が送信されてきたら、
送信者と画像情報を
WebSocket に通知する
③
WebSocket を監視して、
画像が送られてきたら
送信者のフレーム内を
新しい画像で書き換える
お絵描き
アプリ （木村）
https://github.com/dotnsf/doodleshareex

10. 22
手描きイラストを LINE スタンプで送る！
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
(1) LINE インストール済みスマホで←の
QRコードを撮影し、「お絵描きスタンプ」
を友達登録
(2) 「お絵描きスタンプ」メッセージの URL
をタップ（同意画面が表示されたら「許
可」）
(3) 表示されたキャンバス内に線の色や
太さを指定してお絵描きして 送信
(4) お絵描きが LINE スタンプになる！

11. 23
仕組み
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
ケ
アプリケーションサーバー
①
LINE 上の URL をタップすると
お絵描きアプリケーション起動
②
お絵描きを送信すると、
画像サーバーに記録され、
LINE でこの画像が送信された
時のように振る舞う
③
LINE に戻ると、記録された
画像がトークルーム内の全員
に表示される
（画像）データベースサーバー
LINE用
お絵描き
アプリ
https://github.com/dotnsf/line_liff_doodle

12. 24
別のお友達にも送ってみよう！
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
①「LINE お絵描きスタンプはこちらです」
のリンクを長押し
③お友達とのトークルームやグループ LINE
を開いて、送信欄を長押し→「ペースト」
して送信
②「コピー」を選択
④同じトークルームやグループ LINE 内の
人全員が手描きスタンプを使える！

13. 25
記念撮影
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
https://doodleshareex.yellowmix.net/?room=ifd2022
「自画像」や「書きたいもの」を描いて
全員で記念撮影しましょう！
お名前を入力後、Start

14. 26
2021
IBM Family Days 2022 デジタルで「もっと」つ・な・が・るIBM
IBM Family Day 2022
帰ってきた LINE 手描きスタンプ！
ご参加ありがとうございました！
LINE 手描きスタンプでお楽しみください！

15. IBM Family Days 2022
デジタルで「もっと」つ・な・が・るIBM