ã€WhatYa】LIFFã«ã¤ã„ã¦

ã“ã¡ã‚‰ã®è¨˜äº‹ã¯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ã‚’åˆã‚ã¦ã”利用ã„ãŸã ãå ´åˆã¯ã€ã“ã¡ã‚‰ã®ãƒšãƒ¼ã‚¸ãƒãƒ£ãƒãƒ«ã‚’作æˆã™ã‚‹ ã‚’å‚考ã«
プロãƒã‚¤ãƒ€ãƒ¼ã‚’作æˆãã ã•ã„。

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ヘルプセンターã«ãŠå•ã„åˆã‚ã›ãã ã•ã„ã¾ã›ã€‚