LINE の新しい開発フレームワークである LIFF（LIne Front-end Framework）の存在を教えていただいたので、試しに使ってみました。
この LIFF 最大の特徴はスマホの LINE アプリ内で HTML5 の Web アプリケーションを動かすことができる、という点です。この Web アプリケーション内で LIFF の SDK を併用すると、アプリケーションからLINE にメッセージや画像（やスタンプ）を送ることも可能です。
この LIFF を使って指で画面にお絵かきをするような HTML5 アプリを作り、その絵を LINE アプリに送信する、というアプリケーションを作ってみました。LINE はスタンプを送信する文化がメジャーですが、その延長で自分でその場でお絵かきした画像を送る、という使い方を想定したアプリケーションです。ソースコードは github で公開したので、興味ある方は実際に試してみてください：
なお、今回提供しているソースコードでは IBM Cloud の NoSQL マネージド・データベースである Cloudant を使っているので、IBM Cloud のアカウントも必要です。無料のライトアカウントもあるので IBM Cloud のアカウントをお持ちでない場合はあわせて取得してください。
【IBM Cloudant の準備】
今回紹介するアプリケーションでは IBM Cloundant のインスタンスが必要です。IBM Cloud にログインし、インスタンスを１つ作成して、あらかじめ画像格納用のデータベースを用意しておきます。なお無料のライトプランの場合、Cloudant には 1GB までのデータしか格納することができないという点をご了承ください。
まず IBM Cloud にログインし、「リソースの作成」から IBM Cloudant を追加します。IBM Cloudant は「データベース」カテゴリ内に存在しています：
作成時のロケーションはどこでも構いません（下図では「シドニー」を使っています）。ただ認証方法は従来の方式が利用できる方（"Use both legacy credentials and IAM"）を選択しておく必要があります：
また価格プランも任意で構いませんが、Lite プランの場合は無料です。ただし 1GB までしかデータを格納することはできません。最後に「作成」をクリックしてインスタンスを作成します：
Cloudant インスタンス作成直後の画面です。まずここから目的の（画像格納用の）データベースを作成するため、Cloudant のダッシュボードに移動します。下図の緑のボタンをクリック：
Cloudant のダッシュボード画面に移動しました。データベース一覧が表示されていますが、作成直後の場合は何も存在してません。ここで「Create Database」をクリックして、データベースを作成します：
作成するデータベースの名前を指定します。デフォルトでは "doodledb" を使います（後述の settings.js 内で指定されている名称と一致している必要があります）ので、とりあえず doodledb と入力して「Create」します：
doodledb データベースが作成され、doodledb データベース内の文書一覧画面に移動しました（当然中身はありません）。左上の "<" 印をクリックしてデータベース一覧に戻ります：
データベース一覧に戻りました。先程とは変わって、"doodledb" が一覧に含まれているはずです。これでデータベースの準備ができました：
次にこのデータベースへ接続するための情報を確認します。IBM Cloud の画面に戻り、「サービス資格情報」タブを選択します。サービス資格情報は（この時点では）存在していないはずなので、「新規資格情報」ボタンをクリックして作成します：
設定項目は変更せずに「追加」します：
資格情報が追加されると先程の画面内に「資格情報の表示」メニューが追加されているはずです。ここをクリックして内容を確認します：
資格情報の内容が JSON テキストで表示されます。今回必要なのは "username" と "password" の値です。これらの情報を後で利用するので、メモしておくか、コピペできるようにしておきます：
これで IBM Cloudant の準備はできました。
【ランタイム（Web アプリケーション・サーバー）の準備】
次に LIFF が参照する Web アプリケーションサーバーを作成します。このサンプルは Node.js 上で動作するサンプルですが、今回は IBM Cloud 上にアプリケーション・サーバーを作成することにします（これもライトプランの無料枠内で作成することができます）。
Cloudant の時と同様に IBM Cloud にログイン後にリソース作成で「コンピュート」カテゴリの「SDK for Node.js」を選択します：
ロケーションは「ダラス」を選択します（するとドメインは "mybluemix.net" となります）。そして「アプリ名」にアプリケーション名称を指定します。下図の例では "linedoodle" というアプリケーション名称としており、この場合のエンドポイント URL は https://linedoodle.mybluemix.net/ となります。なおアプリ名は他で使われていないものを指定する必要があります。自分の名前や日付を指定するなどして、ユニークなアプリケーション名称を指定してください。最後に「作成」をクリックします：
しばらく待つとアプリケーションサーバーが起動します。これで LIFF アプリからアクセスできるパブリッククラウド上にアプリケーションサーバーが用意できました：
【LINE Developers の準備】
LINE の LIFF アプリを作成するには LINE Developers でのチャネル登録が必要です。LINE Developer において新規にチャネルを作成します：
チャネルの種類は「Messaging API」を選択します：
アプリ名とプラン（Developer Trial）を選択し、作成します：
作成すると、このチャネルにアクセストークンが割り当てられます。「アクセストークン（ロングターム）」と書かれた項目の値をこの後で使うことになるのでメモするか、コピペできるようにしておきます：
また、ここで LIFF アプリとしてのアプリ URL を作成しておきましょう。LIFF タブを選んで「追加」ボタンをクリックします：
名称、サイズ（Full または Tall のいずれかを選択）、そしてエンドポイント URL（上述の Node.js アプリケーションのエンドポイント URL）を入力して「保存する」をクリックします：
すると LIFF アプリが登録され、LIFF URL が確認できるようになります。この LIFF URL は実際に LINE からアプリケーションを起動する際に利用します：
これで LIFF アプリの登録も完了しました。あと少し。
【アプリケーションの準備】
上記で作成したアプリケーション・サーバーに HTML5 アプリケーションをデプロイします。まずはソースコードを入手します。github のリポジトリからソースコードをダウンロードまたは git clone して入手します：
https://github.com/dotnsf/line_liff_doodle
ソースコードがダウンロードできたら settings.js ファイルを環境にあわせて編集して保存します：
最後にこのアプリを上記で作成したアプリケーションサーバーにデプロイします。IBM Cloud では cf コマンドを使ってデプロイするので、未導入の場合は cf コマンドをダウンロード＆インストールしてください：
https://github.com/cloudfoundry/cli/releases
そして cf コマンドを使って IBM Cloud へ IBM ID でログインし、アプリケーションをプッシュ（デプロイ）します：
ここまでの作業が全て成功すると LIFF アプリが IBM Cloud 上にデプロイされ、LINE のチャット上で LIFF URL をクリックすると、LINE 上で同アプリケーションを呼び出すことができるようになります。
【LINE で動作確認】
では実際に LINE を使って動作確認してみます。上述で取得した LIFF URL （"line://app/" で始める文字列）をコピー＆ペーストするなどして LINE のメッセージとして表示させます：
この LIFF URL 部分をタップすると画面下部から LIFF アプリである HTML5 の Web アプリケーションの画面が表れます。今回の Web アプリはお絵かきアプリとなっていて、指でキャンバス上をドラッグして絵を描くアプリとなっています。色やフォントの太さを変えたり、失敗したら "reset" ではじめからやり直すこともできます：
たとえばこんな絵を描いてみました。書き終わったら "post" をタップします：
描いた絵が LINE の会話内に画像として表れます。その場でステッカーを作って送るような感覚です：
・・・というアプリを作ってみたのでした。いかがでしょう？ ちなみに iPhone 版の LINE でのみ動作確認しています。Android 版 LINE でうまく動かなかったらごめんなさい。
以前から似たようなアプリを Twitter 向けに作ってみたりしていて、同じようなのを LINE 向けにも作れたらいいなあ、と思っていました。が、LINE にはクライアント側を操作できる API が提供されておらず作ることができずに諦めていました。 が、今回 LIFF の存在を教えていただいて、「これならできるかも・・」と期待してがんばってみたら、なんとか実現できた、という経緯です。アプリ実装の詳細についてはまた別の機会にでも。
ある意味で LINE のステッカービジネスを根底から否定（苦笑）するアプリなので、あまり LINE 受けはよくないかもしれません。(^^; でも教えていただいたおかげで実現することができました。この場をお借りしてお礼申し上げます。
そうそう。繰り返しになりますが、IBM Cloud の（無料の）ライトアカウントを使って作成した場合、データベースには 1GB ぶんの画像しか格納できません。定期的にデータを削除するとか、データベースを消して作り直すとかして対応してください。
（参考）
LIFF API リファレンス
この LIFF 最大の特徴はスマホの LINE アプリ内で HTML5 の Web アプリケーションを動かすことができる、という点です。この Web アプリケーション内で LIFF の SDK を併用すると、アプリケーションからLINE にメッセージや画像（やスタンプ）を送ることも可能です。
この LIFF を使って指で画面にお絵かきをするような HTML5 アプリを作り、その絵を LINE アプリに送信する、というアプリケーションを作ってみました。LINE はスタンプを送信する文化がメジャーですが、その延長で自分でその場でお絵かきした画像を送る、という使い方を想定したアプリケーションです。ソースコードは github で公開したので、興味ある方は実際に試してみてください：
なお、今回提供しているソースコードでは IBM Cloud の NoSQL マネージド・データベースである Cloudant を使っているので、IBM Cloud のアカウントも必要です。無料のライトアカウントもあるので IBM Cloud のアカウントをお持ちでない場合はあわせて取得してください。
【IBM Cloudant の準備】
今回紹介するアプリケーションでは IBM Cloundant のインスタンスが必要です。IBM Cloud にログインし、インスタンスを１つ作成して、あらかじめ画像格納用のデータベースを用意しておきます。なお無料のライトプランの場合、Cloudant には 1GB までのデータしか格納することができないという点をご了承ください。
まず IBM Cloud にログインし、「リソースの作成」から IBM Cloudant を追加します。IBM Cloudant は「データベース」カテゴリ内に存在しています：
作成時のロケーションはどこでも構いません（下図では「シドニー」を使っています）。ただ認証方法は従来の方式が利用できる方（"Use both legacy credentials and IAM"）を選択しておく必要があります：
また価格プランも任意で構いませんが、Lite プランの場合は無料です。ただし 1GB までしかデータを格納することはできません。最後に「作成」をクリックしてインスタンスを作成します：
Cloudant インスタンス作成直後の画面です。まずここから目的の（画像格納用の）データベースを作成するため、Cloudant のダッシュボードに移動します。下図の緑のボタンをクリック：
Cloudant のダッシュボード画面に移動しました。データベース一覧が表示されていますが、作成直後の場合は何も存在してません。ここで「Create Database」をクリックして、データベースを作成します：
作成するデータベースの名前を指定します。デフォルトでは "doodledb" を使います（後述の settings.js 内で指定されている名称と一致している必要があります）ので、とりあえず doodledb と入力して「Create」します：
doodledb データベースが作成され、doodledb データベース内の文書一覧画面に移動しました（当然中身はありません）。左上の "<" 印をクリックしてデータベース一覧に戻ります：
データベース一覧に戻りました。先程とは変わって、"doodledb" が一覧に含まれているはずです。これでデータベースの準備ができました：
次にこのデータベースへ接続するための情報を確認します。IBM Cloud の画面に戻り、「サービス資格情報」タブを選択します。サービス資格情報は（この時点では）存在していないはずなので、「新規資格情報」ボタンをクリックして作成します：
設定項目は変更せずに「追加」します：
資格情報が追加されると先程の画面内に「資格情報の表示」メニューが追加されているはずです。ここをクリックして内容を確認します：
資格情報の内容が JSON テキストで表示されます。今回必要なのは "username" と "password" の値です。これらの情報を後で利用するので、メモしておくか、コピペできるようにしておきます：
これで IBM Cloudant の準備はできました。
【ランタイム（Web アプリケーション・サーバー）の準備】
次に LIFF が参照する Web アプリケーションサーバーを作成します。このサンプルは Node.js 上で動作するサンプルですが、今回は IBM Cloud 上にアプリケーション・サーバーを作成することにします（これもライトプランの無料枠内で作成することができます）。
Cloudant の時と同様に IBM Cloud にログイン後にリソース作成で「コンピュート」カテゴリの「SDK for Node.js」を選択します：
ロケーションは「ダラス」を選択します（するとドメインは "mybluemix.net" となります）。そして「アプリ名」にアプリケーション名称を指定します。下図の例では "linedoodle" というアプリケーション名称としており、この場合のエンドポイント URL は https://linedoodle.mybluemix.net/ となります。なおアプリ名は他で使われていないものを指定する必要があります。自分の名前や日付を指定するなどして、ユニークなアプリケーション名称を指定してください。最後に「作成」をクリックします：
しばらく待つとアプリケーションサーバーが起動します。これで LIFF アプリからアクセスできるパブリッククラウド上にアプリケーションサーバーが用意できました：
【LINE Developers の準備】
LINE の LIFF アプリを作成するには LINE Developers でのチャネル登録が必要です。LINE Developer において新規にチャネルを作成します：
チャネルの種類は「Messaging API」を選択します：
アプリ名とプラン（Developer Trial）を選択し、作成します：
作成すると、このチャネルにアクセストークンが割り当てられます。「アクセストークン（ロングターム）」と書かれた項目の値をこの後で使うことになるのでメモするか、コピペできるようにしておきます：
また、ここで LIFF アプリとしてのアプリ URL を作成しておきましょう。LIFF タブを選んで「追加」ボタンをクリックします：
名称、サイズ（Full または Tall のいずれかを選択）、そしてエンドポイント URL（上述の Node.js アプリケーションのエンドポイント URL）を入力して「保存する」をクリックします：
すると LIFF アプリが登録され、LIFF URL が確認できるようになります。この LIFF URL は実際に LINE からアプリケーションを起動する際に利用します：
これで LIFF アプリの登録も完了しました。あと少し。
【アプリケーションの準備】
上記で作成したアプリケーション・サーバーに HTML5 アプリケーションをデプロイします。まずはソースコードを入手します。github のリポジトリからソースコードをダウンロードまたは git clone して入手します：
https://github.com/dotnsf/line_liff_doodle
ソースコードがダウンロードできたら settings.js ファイルを環境にあわせて編集して保存します：
exports.db_username = '（Cloudant の username）'; exports.db_password = '（Cloudant の password）'; exports.db_name = 'doodledb'; exports.app_port = 0; exports.base_url = 'https://（アプリケーション名）.（ドメイン）/'; exports.line_access_token = '（LINE Developer で取得したロングタームアクセストークン）'; : :
最後にこのアプリを上記で作成したアプリケーションサーバーにデプロイします。IBM Cloud では cf コマンドを使ってデプロイするので、未導入の場合は cf コマンドをダウンロード＆インストールしてください：
https://github.com/cloudfoundry/cli/releases
そして cf コマンドを使って IBM Cloud へ IBM ID でログインし、アプリケーションをプッシュ（デプロイ）します：
$ cd （ソースコードのあるフォルダ） $ cf login -a https://api.ng.bluemix.net/ -u （IBM ID） $ cf push （アプリケーション名）
ここまでの作業が全て成功すると LIFF アプリが IBM Cloud 上にデプロイされ、LINE のチャット上で LIFF URL をクリックすると、LINE 上で同アプリケーションを呼び出すことができるようになります。
【LINE で動作確認】
では実際に LINE を使って動作確認してみます。上述で取得した LIFF URL （"line://app/" で始める文字列）をコピー＆ペーストするなどして LINE のメッセージとして表示させます：
この LIFF URL 部分をタップすると画面下部から LIFF アプリである HTML5 の Web アプリケーションの画面が表れます。今回の Web アプリはお絵かきアプリとなっていて、指でキャンバス上をドラッグして絵を描くアプリとなっています。色やフォントの太さを変えたり、失敗したら "reset" ではじめからやり直すこともできます：
たとえばこんな絵を描いてみました。書き終わったら "post" をタップします：
描いた絵が LINE の会話内に画像として表れます。その場でステッカーを作って送るような感覚です：
・・・というアプリを作ってみたのでした。いかがでしょう？ ちなみに iPhone 版の LINE でのみ動作確認しています。Android 版 LINE でうまく動かなかったらごめんなさい。
以前から似たようなアプリを Twitter 向けに作ってみたりしていて、同じようなのを LINE 向けにも作れたらいいなあ、と思っていました。が、LINE にはクライアント側を操作できる API が提供されておらず作ることができずに諦めていました。 が、今回 LIFF の存在を教えていただいて、「これならできるかも・・」と期待してがんばってみたら、なんとか実現できた、という経緯です。アプリ実装の詳細についてはまた別の機会にでも。
ある意味で LINE のステッカービジネスを根底から否定（苦笑）するアプリなので、あまり LINE 受けはよくないかもしれません。(^^; でも教えていただいたおかげで実現することができました。この場をお借りしてお礼申し上げます。
そうそう。繰り返しになりますが、IBM Cloud の（無料の）ライトアカウントを使って作成した場合、データベースには 1GB ぶんの画像しか格納できません。定期的にデータを削除するとか、データベースを消して作り直すとかして対応してください。
（参考）
LIFF API リファレンス
コメント
コメント一覧 (16)
私の知る限り、まだメジャーなLIFFアプリケーションは世の中に少ないような気がします、これからが楽しみです。
SDK for Node.jsが見つからないんですけどどうすればよいですか？
ソースコードにexports.base_urlとexports.line_access_tokenがないんですけど書き足せばよいですか？
cfコマンドをAndroidでダウンロードできないんですけどどうすればよいですか？
SDK for Node.jsが見つからないんですけどどうすればよいですか？
ソースコードにexports.base_urlとexports.line_access_tokenがないんですけど書き足せばよいですか？
cfコマンドをAndroidでダウンロードできないんですけどどうすればよいですか？
cf コマンドはブログ内のリンク先からインストールしてください。
base_url と line_access_token はソースでは空ですが、自分の環境で取得したものを書き入れてください。
可能であれば Windows, Mac, Linux のいずれかでやったほうがいいと思います。
やってみます！
Windows 64bitのPCでブログ内のリンク先からWindows 64bitのやつをインストールしたんですけど、起動させると即座に消えてしまいます。
どうすればいいですか？
インストール後はコマンドプロンプトから cf と入力して利用します。このブログでは "cf login" と "cf push" をする所で使います。
インストールはできました。
その後はコマンドプロンプトに何を入力すればいいですか？
サイトに書いてあるように入力したらエラーが出ました。
<C:\Users\****>"C\Users\****\Documents\line_liff_doodle-master"
ありがとうございます！！