[{"data":1,"prerenderedAt":351},["ShallowReactive",2],{"post-liff_on_line_developers":3,"blog-categories":154,"blog-sidebar-banners":350},{"post":4},{"id":5,"date":6,"date_gmt":7,"guid":8,"modified":10,"modified_gmt":11,"slug":12,"status":13,"type":14,"link":15,"title":16,"content":18,"excerpt":21,"author":23,"featured_media":24,"comment_status":25,"ping_status":26,"sticky":20,"template":27,"format":28,"meta":29,"categories":31,"tags":33,"acf":34,"aioseo_notices":35,"_links":36,"_embedded":78},256,"2023-05-24T12:18:35","2023-05-24T03:18:35",{"rendered":9},"https://blog.cloco.co.jp/?p=256","2026-03-12T20:15:31","2026-03-12T11:15:31","liff_on_line_developers","publish","post","https://blog.cloco.co.jp/liff_on_line_developers/",{"rendered":17},"LINE DevelopersでLIFFアプリを作成してみた",{"rendered":19,"protected":20},"\n\u003Cp>こんにちは。えのもとです。\u003C/p>\n\n\n\n\u003Cp>普段はバックエンドを担当することが多いですがインフラからフロントエンドまで何でも屋として働いております。\u003Cbr>最近自分のアイデンティティがどこにあるのか不安な者です。\u003C/p>\n\n\n\n\u003Cp>よろしくお願いします。\u003C/p>\n\n\n\n\u003Cdiv id=\"ez-toc-container\" class=\"ez-toc-v2_0_62 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n\u003Cdiv class=\"ez-toc-title-container\">\n\u003Cp class=\"ez-toc-title \" >目次\u003C/p>\n\u003Cspan class=\"ez-toc-title-toggle\">\u003Ca href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\">\u003Cspan class=\"ez-toc-js-icon-con\">\u003Cspan class=\"\">\u003Cspan class=\"eztoc-hide\" style=\"display:none;\">Toggle\u003C/span>\u003Cspan class=\"ez-toc-icon-toggle-span\">\u003Csvg style=\"fill: #424242;color:#424242\" xmlns=\"http://www.w3.org/2000/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\">\u003Cpath d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\">\u003C/path>\u003C/svg>\u003Csvg style=\"fill: #424242;color:#424242\" class=\"arrow-unsorted-368013\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\">\u003Cpath d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"/>\u003C/svg>\u003C/span>\u003C/span>\u003C/span>\u003C/a>\u003C/span>\u003C/div>\n\u003Cnav>\u003Cul class='ez-toc-list ez-toc-list-level-1 ' >\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-1\" href=\"https://blog.cloco.co.jp/liff_on_line_developers/#%E4%BB%8A%E5%9B%9E%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\" title=\"今回の記事について\">今回の記事について\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-2\" href=\"https://blog.cloco.co.jp/liff_on_line_developers/#LINE_Developers%E3%81%A8%E3%81%AF%EF%BC%9F\" title=\"LINE Developersとは？\">LINE Developersとは？\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-3\" href=\"https://blog.cloco.co.jp/liff_on_line_developers/#LIFF%E3%81%A8%E3%81%AF%EF%BC%9F\" title=\"LIFFとは？\">LIFFとは？\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-4\" href=\"https://blog.cloco.co.jp/liff_on_line_developers/#%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F\" title=\"やってみた\">やってみた\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-5\" href=\"https://blog.cloco.co.jp/liff_on_line_developers/#%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B\" title=\"確認してみる\">確認してみる\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-6\" href=\"https://blog.cloco.co.jp/liff_on_line_developers/#%E3%81%BE%E3%81%A8%E3%82%81\" title=\"まとめ\">まとめ\u003C/a>\u003C/li>\u003C/ul>\u003C/nav>\u003C/div>\n\u003Ch2 class=\"wp-block-heading\" id=\"今回の記事について\">\u003Cspan class=\"ez-toc-section\" id=\"%E4%BB%8A%E5%9B%9E%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\">\u003C/span>今回の記事について\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>LINEが提供するLINE Front-end Framework (LIFF)について、LINE公式アカウントの登録からLIFFアプリの起動までの手順をまとめてみました。\u003Cbr>公式サイトのドキュメントは豊富ですが、これらの手順をまとめたドキュメントは見当たらなかったので、どなたかの参考になれば幸いです。\u003Cbr>今回作成するLIFFアプリの全体像をまとめると下記のような構成になります。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg fetchpriority=\"high\" decoding=\"async\" width=\"881\" height=\"550\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/57403340b5892d2e2c5cdeaad8b8edaf.png\" alt=\"\" class=\"wp-image-257\"/>\u003C/figure>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"line-developersとは\">\u003Cspan class=\"ez-toc-section\" id=\"LINE_Developers%E3%81%A8%E3%81%AF%EF%BC%9F\">\u003C/span>LINE Developersとは？\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>LINEのさまざまなプロダクトを利用するための開発者向けポータルサイトです。\u003Cbr>\u003Cbr>LINE公式アカウントの管理やLIFFの設定を行うことができます。\u003Cbr>また開発ドキュメントも閲覧することができます。\u003Cbr>\u003Cbr>\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"liffとは\">\u003Cspan class=\"ez-toc-section\" id=\"LIFF%E3%81%A8%E3%81%AF%EF%BC%9F\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/LIFF_on_LINE_Developers/#liff%E3%81%A8%E3%81%AF\" class=\"broken_link\">\u003C/a>LIFFとは？\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>LINE上で動作するウェブアプリです。\u003Cbr>HTML、CSS、JSで構成されています。\u003Cbr>\u003Cbr>LINEのプラットフォームで実行することでLINEのユーザー情報を取得することができます。\u003Cbr>そのため、それらの情報を活用した機能の開発やユーザーの代わりにメッセージを送信したりできます。\u003Cbr>\u003Cbr>\u003C/p>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"やってみた\">\u003Cspan class=\"ez-toc-section\" id=\"%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F\">\u003C/span>\u003Ca href=\"https://stg.blog.cloco.tech/LIFF_on_LINE_Developers/#%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F\" class=\"broken_link\">\u003C/a>やってみた\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>さっそくLIFFアプリを試してみます。\u003Cbr>\u003C/p>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"アカウント登録\">\u003Ca href=\"https://stg.blog.cloco.tech/LIFF_on_LINE_Developers/#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E7%99%BB%E9%8C%B2\" class=\"broken_link\">\u003C/a>アカウント登録\u003C/h3>\n\n\n\n\u003Cp>まずはLINE Developersのアカウントを登録します。\u003Cbr>公式サイトから”ログイン”をクリックし”アカウントを作成”をクリックします。\u003Cbr>\u003Ca href=\"https://developers.line.biz/ja/\" target=\"_blank\" rel=\"noreferrer noopener\">LINE Developersの公式サイト\u003C/a>\u003Cbr>\u003Cbr>メールアドレスを入力します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg decoding=\"async\" width=\"1920\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Business-ID_2.png\" alt=\"\" class=\"wp-image-258\"/>\u003C/figure>\n\n\n\n\u003Cp>メールが飛んできますのでメールにあるリンクから名前とパスワードを登録します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg decoding=\"async\" width=\"1905\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Business-ID_1.png\" alt=\"\" class=\"wp-image-259\"/>\u003C/figure>\n\n\n\n\u003Cp>登録をクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"2850\" height=\"1526\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Business-ID_3.png\" alt=\"\" class=\"wp-image-260\"/>\u003C/figure>\n\n\n\n\u003Cp>サービスに移動します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"2850\" height=\"1526\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Business-ID_4.png\" alt=\"\" class=\"wp-image-261\"/>\u003C/figure>\n\n\n\n\u003Cp>アカウント情報を入力し、アカウントを作成します。\u003Cbr>これでアカウント登録は完了です。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"2118\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_0.png\" alt=\"\" class=\"wp-image-262\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"プロバイダーの登録\">プロバイダーの登録\u003C/h3>\n\n\n\n\u003Cp>まずプロバイダーを登録します。これがないと何も始まりません。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_1.png\" alt=\"\" class=\"wp-image-263\"/>\u003C/figure>\n\n\n\n\u003Cp>なおここで登録する名前はLINE公式アカウントの提供者としてそのまま表示されますので注意が必要です。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_2.png\" alt=\"\" class=\"wp-image-264\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"lineログインチャネルの登録\">LINEログインチャネルの登録\u003C/h3>\n\n\n\n\u003Cp>次にLIFFアプリ用にチャネルを登録します。\u003Cbr>チャネルにはいくつか種類がありますが、LIFFアプリを設定するためには “LINEログイン” チャネルを選択する必要があります。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"886\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_3.png\" alt=\"\" class=\"wp-image-265\"/>\u003C/figure>\n\n\n\n\u003Cp>必要な情報を入力します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"2372\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_4.png\" alt=\"\" class=\"wp-image-266\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"liffアプリの登録\">LIFFアプリの登録\u003C/h3>\n\n\n\n\u003Cp>LIFFアプリを追加します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_5.png\" alt=\"\" class=\"wp-image-267\"/>\u003C/figure>\n\n\n\n\u003Cp>LIFF IDを取得するためここではエンドポイントは仮のURLとしています。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1855\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_6.png\" alt=\"\" class=\"wp-image-268\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"liffアプリの構築\">LIFFアプリの構築\u003C/h3>\n\n\n\n\u003Cp>次にLIFFアプリを構築します。\u003Cbr>構築には公式チュートリアルを利用します。\u003Cbr>\u003Ca href=\"https://developers.line.biz/ja/docs/liff/trying-liff-app\" target=\"_blank\" rel=\"noreferrer noopener\">LIFFアプリの公式チュートリアル\u003C/a>\u003Cbr>\u003Cbr>チュートリアルではnetlifyを利用するためアクセス可能なWebsite URLを得ることができます。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"235\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/216b3b330a720a570ad1ba35aa5c2222.png\" alt=\"\" class=\"wp-image-269\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"liffアプリのエンドポイントを設定\">LIFFアプリのエンドポイントを設定\u003C/h3>\n\n\n\n\u003Cp>構築したLIFFアプリのWebsite URLをLIFF設定画面のエンドポイントに設定します。\u003Cbr>これでLIFFアプリの用意ができました。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1905\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_7.png\" alt=\"\" class=\"wp-image-270\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"messaging-apiチャネルの登録\">Messaging APIチャネルの登録\u003C/h3>\n\n\n\n\u003Cp>次に公式アカウントの設定を行なっていきます。\u003Cbr>まずは”新規チャネル作成”をクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_8.png\" alt=\"\" class=\"wp-image-271\"/>\u003C/figure>\n\n\n\n\u003Cp>チャネルの種類は “Messaging API” を選択します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1905\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_9.png\" alt=\"\" class=\"wp-image-272\"/>\u003C/figure>\n\n\n\n\u003Cp>必要な情報を入力します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"2413\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_10.png\" alt=\"\" class=\"wp-image-273\"/>\u003C/figure>\n\n\n\n\u003Cp>確認画面が表示されますので “OK” をクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1905\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_11.png\" alt=\"\" class=\"wp-image-274\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\" id=\"リッチメニューの登録\">リッチメニューの登録\u003C/h3>\n\n\n\n\u003Cp>リッチメニューとは公式アカウントで表示できるカスタムメニューのことです。\u003Cbr>\u003Cbr>まずは LINE Official Account Managerに移動します。\u003Cbr>先ほど作成した Messaging APIチャネル の “チャネル基本設定” にリンクがありますのでこちらをクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_12.png\" alt=\"\" class=\"wp-image-275\"/>\u003C/figure>\n\n\n\n\u003Cp>ホームに移動します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1905\" height=\"886\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Official-Account-Manager_1.png\" alt=\"\" class=\"wp-image-276\"/>\u003C/figure>\n\n\n\n\u003Cp>サイドメニューの”トークルーム管理”から”リッチメニュー”をクリックし”リッチメニューを作成”をクリックします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1905\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Official-Account-Manager_2.png\" alt=\"\" class=\"wp-image-277\"/>\u003C/figure>\n\n\n\n\u003Cp>必要な情報を入力して”保存”をクリックします。\u003Cbr>これでリッチメニューの登録は完了です。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1948\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Official-Account-Manager_3.png\" alt=\"\" class=\"wp-image-278\"/>\u003C/figure>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"確認してみる\">\u003Cspan class=\"ez-toc-section\" id=\"%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B\">\u003C/span>確認してみる\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>LINE Developersのサイトに戻って、Messaging API チャンネルのQRコードをスマホで読み取ります。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"1905\" height=\"943\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/LINE-Developers_13.png\" alt=\"\" class=\"wp-image-279\"/>\u003C/figure>\n\n\n\n\u003Cp>友だち追加します。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"1334\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/IMG_9148.png\" alt=\"\" class=\"wp-image-280\"/>\u003C/figure>\n\n\n\n\u003Cp>デフォルトのウェルカムメッセージとリッチメニューが表示されました。\u003Cbr>リッチメニュー（Aが表示されているエリア）をタップします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"1334\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/IMG_9149.png\" alt=\"\" class=\"wp-image-281\"/>\u003C/figure>\n\n\n\n\u003Cp>すると認証画面が開くので “許可する” をタップします。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"1334\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/IMG_9150.png\" alt=\"\" class=\"wp-image-282\"/>\u003C/figure>\n\n\n\n\u003Cp>登録しておいたLIFFアプリが起動しました。\u003Cbr>これでLIFFアプリでLINEのユーザー情報を取得することができるようになりました。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"1334\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/IMG_9151.png\" alt=\"\" class=\"wp-image-283\"/>\u003C/figure>\n\n\n\n\u003Ch2 class=\"wp-block-heading\" id=\"まとめ\">\u003Cspan class=\"ez-toc-section\" id=\"%E3%81%BE%E3%81%A8%E3%82%81\">\u003C/span>まとめ\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>長くなってしまいましたが手順としては以上になります。\u003Cbr>冒頭でもお見せしましたが、プロバイダ、チャネル、LIFFなどの全体像をまとめると下記のような構成になります。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg loading=\"lazy\" decoding=\"async\" width=\"881\" height=\"550\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2023/12/57403340b5892d2e2c5cdeaad8b8edaf-1.png\" alt=\"\" class=\"wp-image-284\"/>\u003C/figure>\n\n\n\n\u003Cp>チャネルの種類の違いやLIFFとの関係性、またLIFFの起動方法など、\u003Cbr>調査をしつつ全体像を把握するのに苦労しました。\u003C/p>\n\n\n\n\u003Cp>LIFFを初めて扱う方々の参考になれば幸いです！\u003C/p>\n",false,{"rendered":22,"protected":20},"\u003Cp>こんにちは。えのもとです。普段はバックエンドを担当することが多いですがインフラからフロントエンドまで何でも屋として働いております。\u003C/p>\n",7,550,"closed","open","","standard",{"om_disable_all_campaigns":20,"_monsterinsights_skip_tracking":20,"_monsterinsights_sitenote_active":20,"_monsterinsights_sitenote_note":27,"_monsterinsights_sitenote_category":30,"_themeisle_gutenberg_block_has_review":20,"footnotes":27},0,[32],14,[],[],[],{"self":37,"collection":40,"about":43,"author":46,"replies":50,"version-history":53,"predecessor-version":57,"wp:featuredmedia":61,"wp:attachment":64,"wp:term":67,"curies":74},[38],{"href":39},"https://blog.cloco.co.jp/wp-json/wp/v2/posts/256",[41],{"href":42},"https://blog.cloco.co.jp/wp-json/wp/v2/posts",[44],{"href":45},"https://blog.cloco.co.jp/wp-json/wp/v2/types/post",[47],{"embeddable":48,"href":49},true,"https://blog.cloco.co.jp/wp-json/wp/v2/users/7",[51],{"embeddable":48,"href":52},"https://blog.cloco.co.jp/wp-json/wp/v2/comments?post=256",[54],{"count":55,"href":56},1,"https://blog.cloco.co.jp/wp-json/wp/v2/posts/256/revisions",[58],{"id":59,"href":60},285,"https://blog.cloco.co.jp/wp-json/wp/v2/posts/256/revisions/285",[62],{"embeddable":48,"href":63},"https://blog.cloco.co.jp/wp-json/wp/v2/media/550",[65],{"href":66},"https://blog.cloco.co.jp/wp-json/wp/v2/media?parent=256",[68,71],{"taxonomy":69,"embeddable":48,"href":70},"category","https://blog.cloco.co.jp/wp-json/wp/v2/categories?post=256",{"taxonomy":72,"embeddable":48,"href":73},"post_tag","https://blog.cloco.co.jp/wp-json/wp/v2/tags?post=256",[75],{"name":76,"href":77,"templated":48},"wp","https://api.w.org/{rel}",{"author":79,"wp:featuredmedia":94,"wp:term":131},[80],{"id":23,"name":81,"url":27,"description":82,"link":83,"slug":84,"avatar_urls":85,"acf":87,"_links":88},"えのもと","　","https://blog.cloco.co.jp/author/enomoto-kosuke/","enomoto-kosuke",{"24":86,"48":86,"96":86},"https://blog.cloco.co.jp/wp-content/uploads/2024/01/enomoto02.png",[],{"self":89,"collection":91},[90],{"href":49},[92],{"href":93},"https://blog.cloco.co.jp/wp-json/wp/v2/users",[95],{"id":24,"date":96,"slug":97,"type":98,"link":99,"title":100,"author":55,"featured_media":30,"aioseo_notices":101,"acf":102,"caption":103,"alt_text":27,"media_type":104,"mime_type":105,"media_details":106,"source_url":115,"_links":116},"2026-03-12T20:15:21","liff_on_line_developers-2","attachment","https://blog.cloco.co.jp/liff_on_line_developers/liff_on_line_developers-2/",{"rendered":12},[],[],{"rendered":27},"image","image/png",{"width":107,"height":108,"file":109,"filesize":110,"sizes":111,"image_meta":112},1200,800,"2023/05/liff_on_line_developers.png",769849,{},{"aperture":113,"credit":27,"camera":27,"caption":27,"created_timestamp":113,"copyright":27,"focal_length":113,"iso":113,"shutter_speed":113,"title":27,"orientation":113,"keywords":114},"0",[],"https://blog.cloco.co.jp/wp-content/uploads/2023/05/liff_on_line_developers.png",{"self":117,"collection":119,"about":122,"author":125,"replies":128},[118],{"href":63},[120],{"href":121},"https://blog.cloco.co.jp/wp-json/wp/v2/media",[123],{"href":124},"https://blog.cloco.co.jp/wp-json/wp/v2/types/attachment",[126],{"embeddable":48,"href":127},"https://blog.cloco.co.jp/wp-json/wp/v2/users/1",[129],{"embeddable":48,"href":130},"https://blog.cloco.co.jp/wp-json/wp/v2/comments?post=550",[132,153],[133],{"id":32,"link":134,"name":135,"slug":136,"taxonomy":69,"acf":137,"_links":138},"https://blog.cloco.co.jp/category/web_app/","webアプリ","web_app",[],{"self":139,"collection":142,"about":145,"wp:post_type":148,"curies":151},[140],{"href":141},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/14",[143],{"href":144},"https://blog.cloco.co.jp/wp-json/wp/v2/categories",[146],{"href":147},"https://blog.cloco.co.jp/wp-json/wp/v2/taxonomies/category",[149],{"href":150},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=14",[152],{"name":76,"href":77,"templated":48},[],[155,176,196,211,231,251,272,291,311,331],{"id":156,"count":157,"description":27,"link":158,"name":159,"slug":160,"taxonomy":69,"parent":30,"meta":161,"acf":162,"_links":163},13,3,"https://blog.cloco.co.jp/category/dx/","DX","dx",[],[],{"self":164,"collection":167,"about":169,"wp:post_type":171,"curies":174},[165],{"href":166},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/13",[168],{"href":144},[170],{"href":147},[172],{"href":173},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=13",[175],{"name":76,"href":77,"templated":48},{"id":177,"count":55,"description":27,"link":178,"name":179,"slug":180,"taxonomy":69,"parent":30,"meta":181,"acf":182,"_links":183},6,"https://blog.cloco.co.jp/category/qa/","QA","qa",[],[],{"self":184,"collection":187,"about":189,"wp:post_type":191,"curies":194},[185],{"href":186},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/6",[188],{"href":144},[190],{"href":147},[192],{"href":193},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=6",[195],{"name":76,"href":77,"templated":48},{"id":32,"count":197,"description":27,"link":134,"name":135,"slug":136,"taxonomy":69,"parent":30,"meta":198,"acf":199,"_links":200},2,[],[],{"self":201,"collection":203,"about":205,"wp:post_type":207,"curies":209},[202],{"href":141},[204],{"href":144},[206],{"href":147},[208],{"href":150},[210],{"name":76,"href":77,"templated":48},{"id":212,"count":55,"description":27,"link":213,"name":214,"slug":215,"taxonomy":69,"parent":30,"meta":216,"acf":217,"_links":218},10,"https://blog.cloco.co.jp/category/architect/","アーキテクト","architect",[],[],{"self":219,"collection":222,"about":224,"wp:post_type":226,"curies":229},[220],{"href":221},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/10",[223],{"href":144},[225],{"href":147},[227],{"href":228},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=10",[230],{"name":76,"href":77,"templated":48},{"id":232,"count":197,"description":27,"link":233,"name":234,"slug":235,"taxonomy":69,"parent":30,"meta":236,"acf":237,"_links":238},4,"https://blog.cloco.co.jp/category/infra/","インフラ","infra",[],[],{"self":239,"collection":242,"about":244,"wp:post_type":246,"curies":249},[240],{"href":241},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/4",[243],{"href":144},[245],{"href":147},[247],{"href":248},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=4",[250],{"name":76,"href":77,"templated":48},{"id":252,"count":253,"description":27,"link":254,"name":255,"slug":256,"taxonomy":69,"parent":30,"meta":257,"acf":258,"_links":259},12,8,"https://blog.cloco.co.jp/category/mobile_app/","スマホアプリ","mobile_app",[],[],{"self":260,"collection":263,"about":265,"wp:post_type":267,"curies":270},[261],{"href":262},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/12",[264],{"href":144},[266],{"href":147},[268],{"href":269},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=12",[271],{"name":76,"href":77,"templated":48},{"id":157,"count":157,"description":27,"link":273,"name":274,"slug":275,"taxonomy":69,"parent":30,"meta":276,"acf":277,"_links":278},"https://blog.cloco.co.jp/category/project_management/","プロジェクトマネージメント","project_management",[],[],{"self":279,"collection":282,"about":284,"wp:post_type":286,"curies":289},[280],{"href":281},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/3",[283],{"href":144},[285],{"href":147},[287],{"href":288},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=3",[290],{"name":76,"href":77,"templated":48},{"id":292,"count":232,"description":27,"link":293,"name":294,"slug":295,"taxonomy":69,"parent":30,"meta":296,"acf":297,"_links":298},11,"https://blog.cloco.co.jp/category/beginner/","初心者","beginner",[],[],{"self":299,"collection":302,"about":304,"wp:post_type":306,"curies":309},[300],{"href":301},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/11",[303],{"href":144},[305],{"href":147},[307],{"href":308},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=11",[310],{"name":76,"href":77,"templated":48},{"id":312,"count":23,"description":27,"link":313,"name":314,"slug":315,"taxonomy":69,"parent":30,"meta":316,"acf":317,"_links":318},9,"https://blog.cloco.co.jp/category/it_industry_news/","業界最新情報","it_industry_news",[],[],{"self":319,"collection":322,"about":324,"wp:post_type":326,"curies":329},[320],{"href":321},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/9",[323],{"href":144},[325],{"href":147},[327],{"href":328},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=9",[330],{"name":76,"href":77,"templated":48},{"id":23,"count":253,"description":27,"link":332,"name":333,"slug":334,"taxonomy":69,"parent":30,"meta":335,"acf":336,"_links":337},"https://blog.cloco.co.jp/category/company_introduction/","自社紹介","company_introduction",[],[],{"self":338,"collection":341,"about":343,"wp:post_type":345,"curies":348},[339],{"href":340},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/7",[342],{"href":144},[344],{"href":147},[346],{"href":347},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=7",[349],{"name":76,"href":77,"templated":48},[],1775546928900]