[{"data":1,"prerenderedAt":326},["ShallowReactive",2],{"h1291989997":3,"h2304643362":210,"h3907755565":319},{"id":4,"title":5,"body":6,"description":28,"extension":200,"meta":201,"navigation":205,"path":206,"seo":207,"stem":208,"__hash__":209},"docs\u002Fja\u002Ftips\u002F2026\u002F10\u002F15\u002Fconfigure-the-liff-development-environment.md","LIFFアプリをローカルで開発するには？HTTPS対応のヒント",{"type":7,"value":8,"toc":180},"minimark",[9],[10,11,12,20,25,29,32,40,43,46,51,54,61,64,67,74,77,81,84,87,90,93,103,106,109,112,123,127,130,133,136,139,143,146,149,152,156,159,162,171,174],"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\u002F15","!mb-20",[26,27,28],"p",{},"こんにちは！テクニカルサポートを担当している岡です。",[26,30,31],{},"LIFFアプリを開発するとき、ローカル環境での動作確認に困ったことはありませんか？",[26,33,34,35,39],{},"一般的なWebアプリケーションの開発では、ローカル開発サーバーを起動し、",[36,37,38],"code",{},"http:\u002F\u002Flocalhost:3000","などのURLにアクセスして動作を確認します。",[26,41,42],{},"一方、LIFFアプリでは、LINE Developersコンソールに登録するエンドポイントURLはHTTPS形式でないといけません。",[26,44,45],{},"この記事では、ローカル開発サーバーを利用しながら、HTTPS経由でLIFFアプリの動作を確認する方法の一例を紹介します。",[47,48,50],"h2",{"id":49},"reasons-why-https-is-required","ローカル開発でHTTPSが必要になる理由",[26,52,53],{},"LIFFアプリは、一般的なWebアプリケーションと同じように、開発にローカルサーバーを利用できます。",[26,55,56,57,60],{},"たとえば、Viteなどの開発ツールを使うと、",[36,58,59],{},"http:\u002F\u002Flocalhost:5173","のようなURLでアプリケーションを起動できます。",[26,62,63],{},"しかし、このURLには2つの課題があります。",[26,65,66],{},"まず、このURLはHTTP形式であるため、HTTPSを要求するLIFFエンドポイントURLには登録することができません。",[26,68,69,70,73],{},"また、",[36,71,72],{},"localhost","はアクセスしている端末自身を指します。このため、開発用PCで起動したサーバーに、他のデバイスからこのURLを用いてアクセスすることはできません。",[26,75,76],{},"この2つの課題を解決する方法のひとつが、トンネリングサービスの利用です。",[47,78,80],{"id":79},"using-tunneling-service","トンネリングサービスでHTTPS接続を実現する",[26,82,83],{},"トンネリングサービスを利用すると、ローカル環境で起動しているWebサーバーに、インターネット経由でアクセスできるようになります。",[26,85,86],{},"トンネリングサービスには、ngrokやCloudflare Tunnelなどがあります。",[26,88,89],{},"これらのサービスを使うと、ローカル開発サーバーを直接HTTPS化せずに、HTTPS形式の公開URLを経由して開発したアプリケーションにアクセスできます。",[26,91,92],{},"構成の一例は次の通りです。",[26,94,95],{},[96,97],"img",{"alt":98,"className":99,"src":102}," ",[100,101],"w-fix-520","bg-border","\u002Fmedia\u002Ftips\u002F2026\u002Fconfigure-liff-development-environment-ja.png",[26,104,105],{},"具体的には、トンネリングサービスが発行したHTTPSのURLを、LINE DevelopersコンソールでLIFFアプリのエンドポイントURLに設定します。",[26,107,108],{},"これにより、スマートフォンのLINEアプリなどから、ローカル環境で開発中のLIFFアプリにアクセスできます。",[26,110,111],{},"なお、トンネリングサービスの設定や利用プランによっては、再接続するたびに公開URLが変更される場合があります。この場合は、LIFFエンドポイントURLもその都度更新する必要があります。",[113,114,117,120],"admonition",{"title":115,"type":116},"トンネリングサービスを利用する以外の方法","tip",[26,118,119],{},"他デバイスから開発中のローカル環境にアクセスするには、トンネリングサービスを利用する以外にも、ローカル開発サーバーを直接HTTPS化する方法があります。",[26,121,122],{},"ただし、スマートフォンなどからアクセスする場合は、ネットワーク設定や証明書の信頼設定などに注意するようにしてください。",[47,124,126],{"id":125},"prepare-LIFF-app-for-development","開発用のLIFFアプリを用意する",[26,128,129],{},"ローカル開発を進める際には、本番用とは別に開発用のLIFFアプリを用意しておくと便利です。",[26,131,132],{},"開発用のLIFFアプリには、トンネリングサービスで発行したHTTPSのURLを設定します。一方、本番用のLIFFアプリには、実際にユーザーへ提供するWebサーバーのURLを設定しておきます。",[26,134,135],{},"このように環境を分ければ、開発中にエンドポイントURLを変更しても、本番用のLIFFアプリには影響しません。",[26,137,138],{},"なお、開発用と本番用ではLIFF IDが異なるため、アプリケーション側でも環境に応じて適切なLIFF IDを使用する必要があります。",[47,140,142],{"id":141},"points-to-note","トンネリングサービスを利用する際の注意点",[26,144,145],{},"トンネリングサービスを利用すると、ローカル開発サーバーがインターネット全体からアクセス可能になる場合があります。",[26,147,148],{},"開発環境に機密情報を配置しないことや、必要に応じてアクセス制限を設定することなど、セキュリティにも注意しましょう。",[26,150,151],{},"また、開発が終了したら、不要になったトンネル接続を停止してください。",[47,153,155],{"id":154},"wrap-up","まとめ",[26,157,158],{},"LIFFアプリのローカル開発では、エンドポイントURLのHTTPS要件と、他のデバイスからのアクセス方法を考慮する必要があります。",[26,160,161],{},"今回紹介したトンネリングサービスを利用する方法は、これらの課題を解決する選択肢のひとつです。",[26,163,164,165,170],{},"ここでは紹介しませんでしたが、他にもローカル開発サーバーを直接HTTPS化する方法があるほか、",[166,167,169],"a",{"href":168},"\u002Fdocs\u002Fliff\u002Fliff-cli\u002F#serve","LIFF CLI","でローカル開発サーバーをHTTPSで起動したり、外部に公開したりする方法があります。",[26,172,173],{},"開発環境に応じて適切な方法を選び、LIFFアプリの開発に役立ててみてください。",[175,176],"tags",{"tags":177,"lang":178,"section":179},"liff, line-mini-app","en","tips",{"title":15,"searchDepth":181,"depth":182,"links":183},4,5,[184,188,191,194,197],{"id":185,"depth":186,"text":187},"ローカル開発でhttpsが必要になる理由-reasons-why-https-is-required",2,"ローカル開発でHTTPSが必要になる理由 {#reasons-why-https-is-required}",{"id":189,"depth":186,"text":190},"トンネリングサービスでhttps接続を実現する-using-tunneling-service","トンネリングサービスでHTTPS接続を実現する {#using-tunneling-service}",{"id":192,"depth":186,"text":193},"開発用のliffアプリを用意する-prepare-liff-app-for-development","開発用のLIFFアプリを用意する {#prepare-LIFF-app-for-development}",{"id":195,"depth":186,"text":196},"トンネリングサービスを利用する際の注意点-points-to-note","トンネリングサービスを利用する際の注意点 {#points-to-note}",{"id":198,"depth":186,"text":199},"まとめ-wrap-up","まとめ {#wrap-up}","md",{"date":202,"tags":177,"locale":203,"sidebar":204},"2026-10-15 00:00 UTC","ja",false,true,"\u002Fja\u002Ftips\u002F2026\u002F10\u002F15\u002Fconfigure-the-liff-development-environment",{"title":5,"description":28},"ja\u002Ftips\u002F2026\u002F10\u002F15\u002Fconfigure-the-liff-development-environment","qFeqkyF1oQ87Wq05JfKR98CoLurEb9RnLhxfIGO8TSw",{"id":4,"title":5,"body":211,"description":28,"extension":200,"meta":317,"navigation":205,"path":206,"seo":318,"stem":208,"__hash__":209},{"type":7,"value":212,"toc":310},[213],[10,214,215,219,221,223,225,229,231,233,235,237,241,243,245,249,251,253,255,257,259,261,266,268,270,272,278,280,282,284,286,288,290,292,294,296,298,300,302,306,308],{},[13,216,217],{"id":15,"class":16},[18,218],{},[21,220],{"date":23,"class":24},[26,222,28],{},[26,224,31],{},[26,226,34,227,39],{},[36,228,38],{},[26,230,42],{},[26,232,45],{},[47,234,50],{"id":49},[26,236,53],{},[26,238,56,239,60],{},[36,240,59],{},[26,242,63],{},[26,244,66],{},[26,246,69,247,73],{},[36,248,72],{},[26,250,76],{},[47,252,80],{"id":79},[26,254,83],{},[26,256,86],{},[26,258,89],{},[26,260,92],{},[26,262,263],{},[96,264],{"alt":98,"className":265,"src":102},[100,101],[26,267,105],{},[26,269,108],{},[26,271,111],{},[113,273,274,276],{"title":115,"type":116},[26,275,119],{},[26,277,122],{},[47,279,126],{"id":125},[26,281,129],{},[26,283,132],{},[26,285,135],{},[26,287,138],{},[47,289,142],{"id":141},[26,291,145],{},[26,293,148],{},[26,295,151],{},[47,297,155],{"id":154},[26,299,158],{},[26,301,161],{},[26,303,164,304,170],{},[166,305,169],{"href":168},[26,307,173],{},[175,309],{"tags":177,"lang":178,"section":179},{"title":15,"searchDepth":181,"depth":182,"links":311},[312,313,314,315,316],{"id":185,"depth":186,"text":187},{"id":189,"depth":186,"text":190},{"id":192,"depth":186,"text":193},{"id":195,"depth":186,"text":196},{"id":198,"depth":186,"text":199},{"date":202,"tags":177,"locale":203,"sidebar":204},{"title":5,"description":28},{"toc":320,"fullToc":320},[321,322,323,324,325],{"id":49,"depth":186,"text":50},{"id":79,"depth":186,"text":80},{"id":125,"depth":186,"text":126},{"id":141,"depth":186,"text":142},{"id":154,"depth":186,"text":155},1793252070619]