この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、中村です。 すっかりご無沙汰でしたがLINE関連のブログです。昨年数多くのアップデートがLINE API周りでありましたが、中でもLIFFは大きい部類に入るのではないでしょうか。今回は、入門編としてLINE Front-end Framework（LIFF）を使ってみたいと思います。
はじめに
LINE Front-end Framework（LIFF）は、LINE内で動作するウェブアプリのプラットフォームです。LIFFに登録したウェブアプリ（LIFFアプリ）をLINE内で起動すると、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。
LIFFを実装してみる
LIFFを利用するためには、LIFFアプリを作成しチャネルに登録します。
登録したいチャネルのLIFFタブでLIFFアプリを作成をクリック。
名前・サイズ・エンドポイントURL・BLE featureを入力し保存するをクリック。（今回は、エンドポイントURLをCloudfront+S3で構築しました。）
成功すると一覧に表示されます。LIFF URLと呼ばれるURLが生成されています。このURLをユーザーがタップすることでLIFFにアクセスできます。
登録はこれで終了です。あとは、LIFFの実装をしていきましょう。
<p id="id"></p>
<p>メッセージを送信する</p>
<button id="message">Hello, world!</button>
<p>プロフィールを取得する</p>
<button id="profile">プロフィールを取得する</button>
<p id="userId"></p>
<p id="displayName"></p>
<p id="pictureUrl"></p>
<p id="statusMessage"></p>
<p>URLを開く</p>
<button id="open">クラスメソッドを開く</button>
<p>LIFFアプリを閉じる</p>
<button id="close">閉じる</button> <script src="https://d.line-scdn.net/liff/1.0/sdk.js" type="text/javascript"></script>
<script type="text/javascript">
const idSPace = document.getElementById('id');
const errorSpace = document.getElementById('error');
//liff init
liff.init(
data => {
const userId = data.context.userId;
idSPace.innerText = userId;
},
err => {
console.log('error', err);
}
);
document.getElementById('profile').addEventListener('click', function () {
liff.getProfile()
.then(profile => {
const userIdSpace = document.getElementById('userId');
const displayNameSpace = document.getElementById('displayName');
const pictureUrlSpace = document.getElementById('pictureUrl');
const statusMessageSpace = document.getElementById('statusMessage');
userIdSpace.innerText = profile.userId;
displayNameSpace.innerHTML = profile.displayName;
pictureUrlSpace.innerHTML = profile.pictureUrl;
statusMessageSpace.innerHTML = profile.statusMessage;
})
.catch((err) => {
console.log('error', err);
});
});
document.getElementById('open').addEventListener('click', function () {
liff.openWindow({
url: 'https://classmethod.jp/'
});
});
document.getElementById('close').addEventListener('click', function () {
liff.closeWindow();
});
document.getElementById('message').addEventListener('click', function () {
liff.sendMessages([
{
type:'text',
text:'Hello, World!'
}
])
.then(() => {
console.log('message sent');
})
.catch((err) => {
console.log('error', err);
});
});
</script>テスト
実際にテストしてみます。このような形でLIFFが表示されます。
テキスト送信
テキスト送信のボタンを押すとテキストが送信されます。（おうむ返しのボットのため、同じ内容がボットから返却されています）
プロフィール
プロフィールを取得するボタンを押すとプロフィールが取得できます。ユーザーID, 名前, プロフィール画像, ステータスメッセージが取得できます。
URL表示
クラスメソッドを開くを押すと、クラスメソッドのサイトを内部ブラウザで開きます。
とりあえず機能が正常に動いていることを確認できました！（LIFFアプリを閉じるファンクションも確認しました）
まとめ
いかがでしたでしょうか。 LIFFを利用することでよりリッチなUXを作成できそうです。
弊社では、「Amazon Connect」の導入を検討している方を対象とした無料相談会を毎週開催中です。
また音声を中心とした各種ソリューションの開発支援も行なっております。
1
