[{"data":1,"prerenderedAt":459},["ShallowReactive",2],{"h476390110":3,"h1703672371":290,"h220214558":453},{"id":4,"title":5,"body":6,"description":28,"extension":280,"meta":281,"navigation":285,"path":286,"seo":287,"stem":288,"__hash__":289},"docs\u002Fja\u002Ftips\u002F2026\u002F10\u002F22\u002Fsolution-using-liff-cli.md","LIFF CLIでLIFFアプリ開発の手間を減らす",{"type":7,"value":8,"toc":263},"minimark",[9],[10,11,12,20,25,29,32,41,44,52,55,58,63,66,74,95,98,101,105,108,114,121,146,149,160,170,174,182,192,215,225,228,233,237,240,243,250,253,257],"Tips",{},[13,14,17],"h1",{"id":15,"class":16},"","!mb-4",[18,19],"page-title",{},[21,22],"display-date",{"date":23,"class":24},"2026\u002F10\u002F22","!mb-20",[26,27,28],"p",{},"こんにちは！テクニカルサポートを担当している岡です。",[26,30,31],{},"LIFFアプリを開発するとき、アプリの初期設定やローカル開発環境の準備、デバッグなどに手間がかかることはありませんか？",[26,33,34,35,40],{},"こうした作業を効率化するツールとして、",[36,37,39],"a",{"href":38},"\u002Fdocs\u002Fliff\u002Fliff-cli\u002F","LIFF CLI","が用意されています。",[26,42,43],{},"LIFF CLIを使うと、LIFFアプリの作成や管理、HTTPSを使ったローカル開発、LIFFブラウザ上でのデバッグなどをコマンドラインから行うことができます。",[26,45,46,47,51],{},"前回のTips記事「",[36,48,50],{"href":49},"\u002Ftips\u002F2026\u002F10\u002F15\u002Fconfigure-the-liff-development-environment\u002F","LIFFアプリをローカルで開発するには？HTTPS対応のヒント","」では、LIFFアプリのローカル開発環境を整える方法を紹介しました。",[26,53,54],{},"今回は、LIFF CLIが開発中のどのような場面で役立つのか、3つのユースケースを通してご紹介します。",[56,57],"toc",{},[59,60,62],"h2",{"id":61},"initial-setup-for-the-liff-app","LIFFアプリの初期設定をまとめて行う",[26,64,65],{},"LIFFアプリの開発を始めるには、LINE Developersコンソールでの設定や、アプリのひな形の準備などが必要です。",[26,67,68,69,73],{},"LIFF CLIの",[70,71,72],"code",{},"init","コマンドを使うと、チャネルの追加、LIFFアプリの作成、プロジェクトのひな形生成といった作業を、対話形式でまとめて進められます。",[75,76,80],"pre",{"className":77,"code":78,"language":79,"meta":15,"style":15},"language-bash shiki shiki-themes github-dark-default","liff-cli init\n","bash",[70,81,82],{"__ignoreMap":15},[83,84,87,91],"span",{"class":85,"line":86},"line",1,[83,88,90],{"class":89},"sQhOw","liff-cli",[83,92,94],{"class":93},"s9uIt"," init\n",[26,96,97],{},"コマンドを実行し、画面内に表示される案内に従って必要な情報を入力していくことで、開発を始めるまでの複数の作業を一連の流れで進められます。",[26,99,100],{},"このため、初めてLIFFアプリを作る場面や、新しいプロジェクトを立ち上げる場合に便利です。",[59,102,104],{"id":103},"simplification-of-endpoint-urls","ローカル開発用のエンドポイントURLを簡単に変更する",[26,106,107],{},"LIFFアプリをローカル環境で開発するには、HTTPSでアクセスできる環境を用意する必要があります。また、LIFFブラウザからローカルの開発サーバーにアクセスするためには、LIFFアプリのエンドポイントURLを設定する必要があります。",[26,109,68,110,113],{},[70,111,112],{},"serve","コマンドを使うと、ローカル開発サーバーを対象とするHTTPSプロキシの起動と、LIFFアプリのエンドポイントURLをプロキシのURLに変更が、一度に行えます。",[26,115,116,117,120],{},"たとえば、ローカル開発サーバーが",[70,118,119],{},"http:\u002F\u002Flocalhost:3000\u002F","で動作している場合、次のように実行します。",[75,122,124],{"className":77,"code":123,"language":79,"meta":15,"style":15},"liff-cli serve --liff-id 1234567890-Abcdefgh --url http:\u002F\u002Flocalhost:3000\u002F\n",[70,125,126],{"__ignoreMap":15},[83,127,128,130,133,137,140,143],{"class":85,"line":86},[83,129,90],{"class":89},[83,131,132],{"class":93}," serve",[83,134,136],{"class":135},"sFSAA"," --liff-id",[83,138,139],{"class":93}," 1234567890-Abcdefgh",[83,141,142],{"class":135}," --url",[83,144,145],{"class":93}," http:\u002F\u002Flocalhost:3000\u002F\n",[26,147,148],{},"これにより、HTTPSプロキシの起動とエンドポイントURLの変更を一度に行うことができます。",[26,150,151,152,154,155,159],{},"なお、",[70,153,112],{},"コマンドを使用するには、localhostに対して有効な証明書と秘密鍵を事前に用意する必要があります。詳しくは「",[36,156,158],{"href":157},"\u002Fdocs\u002Fliff\u002Fliff-cli\u002F#serve-operating-conditions","serveコマンドの動作条件","」を参照してください。",[161,162,165],"admonition",{"title":163,"type":164},"公開済みのLIFFアプリでは使用しないでください","note",[26,166,167,169],{},[70,168,112],{},"コマンドはLIFFアプリのエンドポイントURLを書き換えます。公開済みのLIFFアプリに対して実行すると、ユーザーがアクセスできなくなるため、開発・検証用のLIFFアプリで使用してください。",[59,171,173],{"id":172},"debugging-the-app","LIFFブラウザで動作するアプリをデバッグする",[26,175,176,177,181],{},"LIFFブラウザ上で発生する問題を調査したいときには、",[36,178,180],{"href":179},"\u002Fdocs\u002Fliff\u002Fliff-plugin\u002F#liff-inspector","LIFF Inspector","が役立ちます。",[26,183,184,185,187,188,191],{},"LIFF CLIでは、",[70,186,112],{},"コマンドに",[70,189,190],{},"--inspect","オプションを指定することで、LIFF Inspector ServerをHTTPSで起動できます。",[75,193,195],{"className":77,"code":194,"language":79,"meta":15,"style":15},"liff-cli serve --liff-id 1234567890-Abcdefgh --url http:\u002F\u002Flocalhost:3000\u002F --inspect\n",[70,196,197],{"__ignoreMap":15},[83,198,199,201,203,205,207,209,212],{"class":85,"line":86},[83,200,90],{"class":89},[83,202,132],{"class":93},[83,204,136],{"class":135},[83,206,139],{"class":93},[83,208,142],{"class":135},[83,210,211],{"class":93}," http:\u002F\u002Flocalhost:3000\u002F",[83,213,214],{"class":135}," --inspect\n",[26,216,217,218,220,221,224],{},"LIFFアプリ側にLIFF Inspector Pluginを導入した上でLIFF URLにアクセスすると、",[70,219,112],{},"コマンドを実行したターミナルに",[70,222,223],{},"devtools:\u002F\u002Fdevtools\u002F","から始まるURLが表示されます。",[26,226,227],{},"このURLをGoogle Chromeで開くことで、LIFFアプリをデバッグできます。",[26,229,230,231,159],{},"LIFF Inspectorの導入方法など、詳しい利用手順については、「",[36,232,180],{"href":179},[59,234,236],{"id":235},"wrap-up","おわりに",[26,238,239],{},"今回は、LIFF CLIが役立つ3つのユースケースを紹介しました。",[26,241,242],{},"LIFF CLIは、LIFFアプリの初期設定だけでなく、ローカル開発やデバッグなど、開発のさまざまな場面で活用できます。",[26,244,245,246,249],{},"また、今回紹介した機能のほかにも、LIFFアプリの登録情報を管理する",[70,247,248],{},"app","コマンドなどが用意されています。",[26,251,252],{},"LIFFアプリを開発する際は、ぜひLIFF CLIの活用を検討してみてください。",[254,255,256],"style",{},"html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}",[258,259],"tags",{"tags":260,"lang":261,"section":262},"liff, line-mini-app","en","tips",{"title":15,"searchDepth":264,"depth":265,"links":266},4,5,[267,271,274,277],{"id":268,"depth":269,"text":270},"liffアプリの初期設定をまとめて行う-initial-setup-for-the-liff-app",2,"LIFFアプリの初期設定をまとめて行う {#initial-setup-for-the-liff-app}",{"id":272,"depth":269,"text":273},"ローカル開発用のエンドポイントurlを簡単に変更する-simplification-of-endpoint-urls","ローカル開発用のエンドポイントURLを簡単に変更する {#simplification-of-endpoint-urls}",{"id":275,"depth":269,"text":276},"liffブラウザで動作するアプリをデバッグする-debugging-the-app","LIFFブラウザで動作するアプリをデバッグする {#debugging-the-app}",{"id":278,"depth":269,"text":279},"おわりに-wrap-up","おわりに {#wrap-up}","md",{"date":282,"tags":260,"locale":283,"sidebar":284},"2026-10-22 00:00 UTC","ja",false,true,"\u002Fja\u002Ftips\u002F2026\u002F10\u002F22\u002Fsolution-using-liff-cli",{"title":5,"description":28},"ja\u002Ftips\u002F2026\u002F10\u002F22\u002Fsolution-using-liff-cli","cx-Nj_TzWbaBP5_HSMAlyCrytkZj6RLQvBtIWvVOVIw",{"id":4,"title":5,"body":291,"description":28,"extension":280,"meta":451,"navigation":285,"path":286,"seo":452,"stem":288,"__hash__":289},{"type":7,"value":292,"toc":445},[293],[10,294,295,299,301,303,305,309,311,315,317,319,321,323,327,337,339,341,343,345,349,353,371,373,379,385,387,391,397,417,423,425,429,431,433,435,439,441,443],{},[13,296,297],{"id":15,"class":16},[18,298],{},[21,300],{"date":23,"class":24},[26,302,28],{},[26,304,31],{},[26,306,34,307,40],{},[36,308,39],{"href":38},[26,310,43],{},[26,312,46,313,51],{},[36,314,50],{"href":49},[26,316,54],{},[56,318],{},[59,320,62],{"id":61},[26,322,65],{},[26,324,68,325,73],{},[70,326,72],{},[75,328,329],{"className":77,"code":78,"language":79,"meta":15,"style":15},[70,330,331],{"__ignoreMap":15},[83,332,333,335],{"class":85,"line":86},[83,334,90],{"class":89},[83,336,94],{"class":93},[26,338,97],{},[26,340,100],{},[59,342,104],{"id":103},[26,344,107],{},[26,346,68,347,113],{},[70,348,112],{},[26,350,116,351,120],{},[70,352,119],{},[75,354,355],{"className":77,"code":123,"language":79,"meta":15,"style":15},[70,356,357],{"__ignoreMap":15},[83,358,359,361,363,365,367,369],{"class":85,"line":86},[83,360,90],{"class":89},[83,362,132],{"class":93},[83,364,136],{"class":135},[83,366,139],{"class":93},[83,368,142],{"class":135},[83,370,145],{"class":93},[26,372,148],{},[26,374,151,375,154,377,159],{},[70,376,112],{},[36,378,158],{"href":157},[161,380,381],{"title":163,"type":164},[26,382,383,169],{},[70,384,112],{},[59,386,173],{"id":172},[26,388,176,389,181],{},[36,390,180],{"href":179},[26,392,184,393,187,395,191],{},[70,394,112],{},[70,396,190],{},[75,398,399],{"className":77,"code":194,"language":79,"meta":15,"style":15},[70,400,401],{"__ignoreMap":15},[83,402,403,405,407,409,411,413,415],{"class":85,"line":86},[83,404,90],{"class":89},[83,406,132],{"class":93},[83,408,136],{"class":135},[83,410,139],{"class":93},[83,412,142],{"class":135},[83,414,211],{"class":93},[83,416,214],{"class":135},[26,418,217,419,220,421,224],{},[70,420,112],{},[70,422,223],{},[26,424,227],{},[26,426,230,427,159],{},[36,428,180],{"href":179},[59,430,236],{"id":235},[26,432,239],{},[26,434,242],{},[26,436,245,437,249],{},[70,438,248],{},[26,440,252],{},[254,442,256],{},[258,444],{"tags":260,"lang":261,"section":262},{"title":15,"searchDepth":264,"depth":265,"links":446},[447,448,449,450],{"id":268,"depth":269,"text":270},{"id":272,"depth":269,"text":273},{"id":275,"depth":269,"text":276},{"id":278,"depth":269,"text":279},{"date":282,"tags":260,"locale":283,"sidebar":284},{"title":5,"description":28},{"toc":454,"fullToc":454},[455,456,457,458],{"id":61,"depth":269,"text":62},{"id":103,"depth":269,"text":104},{"id":172,"depth":269,"text":173},{"id":235,"depth":269,"text":236},1793252070641]