【WhatYa】LIFFについて

Owned by 尾関沙紀
Last updated: 2022/04/01 by 空色　小鮒 俊太朗
3 min read

こちらの記事はLIFFというLINEのサービスを利用し、LINEのトークルーム上でWhatYaのチャットウィンドウを起動しBOT/有人応対をご利用いただく場合の設定についてご紹介しております。

※LIFF（LINE Front-end Framework）とはLINEのアプリ上で動くWebアプリのプラットフォームのことです。
端的に申し上げると、LINEと連携できるWebページのことで、この仕組みを使うことで、LINE上に独自Webページを表示することができます。

LINE公式アカウントやLINE Developersの設定方法については、あくまでも弊社作成の実装サンプルとなります。
つきましてはLINE公式アカウントやLINE Developersの詳しい設定方法や動作に関しては、弊社にてサポートできかねますこと予めご了承ください。

弊社で作成したテスト用のLINE公式アカウントにてLIFFの動作をお試しいただくことができます。
以下のボタンから弊社が作成したLINE公式アカウントの情報をご確認いただけます。

 

LIFFの実装方法は、リッチメニュータップ後のアクションタイプをリンクにし、WhatYaを埋め込んだページのURLを設定しております。

パネルをクリックすると、各STEPの手順に移動します。

STEP1：WhatYaタグの埋め込み

STEP1はLIFF用に新たにページを作成し、WhatYaタグを埋め込んでいただきます。

御社にてLIFF（LINEブラウザ）に表示させるためのWebページを作成いただき、弊社からお渡ししたタグを埋め込んでいただきます。
具体的な埋め込み方法につきましては、WhatYaデザインベンダー向け資料をご確認ください。

STEP2：LIFFアプリ設定

LINE公式アカウントやLINE Developersの設定方法については、あくまでも弊社作成の実装サンプルとなります。
つきましてはLINE公式アカウントやLINE Developersの詳しい設定方法や動作に関しては、弊社にてサポートできかねますこと予めご了承ください。

STEP2はLINE Developersの管理画面にて設定を行います。
※LINE Developersを初めてご利用いただく場合は、こちらのページhttps://developers.line.biz/ja/docs/liff/getting-started/#step-one-create-provider を参考に
プロバイダーを作成ください。

LIFFを利用する場合は、新しくチャンネル「LINEログイン」を作成します。
以下、チャンネル作成とLIFF設定方法をご紹介します。

  1. 「Create a new channel」をクリック

     

  2. 「LINE Login」をクリック

     

  3. チャンネルの基本情報を入力
    ※必須項目と任意項目がありますので、適宜御社の情報をご入力ください。

     

    利用規約を確認後、チェックを入れ「Create」ボタンをクリック

     

  4. LIFFアプリの設定を追加
    タブ：LIFFをクリック


    新しくLIFFアプリを追加するため、「Add」ボタンをクリック

     

  5. LIFFアプリの基本情報を入力
    ※必須項目と任意項目がありますので、適宜の情報をご入力ください。

     

    SizeはLIFFアプリの表示サイズを設定します。
    全画面での表示する場合は、「Full」を選択ください。


    Endpoint URLはSTEP1で作成したWhatYaを埋め込んだページのURLを入力します。


    また、今回サンプルではリッチメニュータップ後に自動でWhatYaが立ち上がるようにするため
    URLの末尾にこちらのパラメーター「?wy_opn=true」をつけます。
    このパラメーターをつけることで、URLを開いた時自動的にWhatYaが立ち上がります。


    Scopesは「profile」「openid」にチェックを入れます。


    Bot link featureは「Off」を選択します。


    「Add」ボタンをクリック

     

  6. 作成したチャンネルを公開
    「Developing」をクリック

     

    「Publish」をクリックし、LINEチャンネルの公開が完了となります。


    STEP3のリッチメニューの設定でLIFF URLを使用するので、LIFF URLをコピーしてください。


    LINE Developersでの設定は以上となります。

STEP3：リッチメニュー設定

LINE公式アカウントやLINE Developersの設定方法については、あくまでも弊社作成の実装サンプルとなります。
つきましてはLINE公式アカウントやLINE Developersの詳しい設定方法や動作に関しては、弊社にてサポートできかねますこと予めご了承ください。

STEP3はLINE公式アカウントの管理画面にて設定を行います。

  1. 左側メニュー：トークルーム管理 「リッチメニュー」をクリック

     

  2. 「作成」ボタンをクリック

     

  3. リッチメニュー設定画面 表示設定
    タイトル、表示期間、メニューバーのテキスト、メニューのデフォルト表示に任意の値を設定

     

  4. リッチメニュー設定画面 コンテンツ設定
    ※リッチメニューの画像の作成や設定は御社にてご用意ください。

    アクションタイプ「リンク」、URLにSTEP2で作成したLIFF（LINEのブラウザ）のURLを入力し、設定を保存

    以上で設定は完了となります。

 

その他ご不明点がありましたら、WhatYaヘルプセンターにお問い合わせくださいませ。