見出し画像
Photo by yamshita0129

Cloudflare WorkersでLINEミニアプリをホスティングしたハンズオンレポート

ToMYF

はじめに

先日、2025年2月6日開催の 「Cloudflare×LINEミニアプリで実践！モダンな予約システムハンズオン」 に参加してきました​。

このイベントは、Cloudflareのサービスを活用してLINEミニアプリの開発を体験する内容で、登壇者は LINE APIエキスパートの三浦 耕生さん と Cloudflare社エバンジェリストの亀田 治伸さん でした​。

なぜ参加したかというと、普段からサーバーレスやフロントエンド開発に興味があり、特に Cloudflare Workers で何か面白いことをやってみたいと思っていたからです。さらに、LINEミニアプリ開発は未経験だったので、実践的なハンズオンを通じて学べる良い機会だと感じ参加を決めました。

ハンズオンの内容

ハンズオンは三浦さんが執筆されたZennの記事をベースに進められ、ステップごとに実装と解説が行われました。

具体的には、Next.js で作成したアプリケーションを Cloudflare Workers（実際にはCloudflare Pages経由でデプロイされ、裏側でWorkersが動作）にデプロイし、そのURLをLINEミニアプリ（LIFFアプリ）のエンドポイントとして設定する流れを体験しました。

まずはローカルでNext.jsアプリを開発し、Cloudflareのコマンドラインツールである wrangler を使って Workers KV など必要なリソースを準備しました。その後、wrangler publish 等の操作でアプリをデプロイすると、*.workers.dev（あるいはPagesのカスタムドメイン）といったURLが発行されます。このURLをLINE Developersコンソールでミニアプリのエンドポイント（LIFFのエンドURL）に登録することで、LINEアプリ上から先ほどデプロイしたNext.jsアプリにアクセスできるようになります。

実際にLINEアプリからミニアプリを起動してみると、iOSのWebView上でNext.jsアプリが動作し、まるでネイティブの一部であるかのように画面遷移や操作ができました。Web技術で構築したアプリがLINE内でスムーズに動く様子は、ちょっとしたハイブリッドアプリのようで面白かったです。特に、LINEのコンテキスト（ユーザーIDなど）を利用できるので、ログイン状態の共有やユーザーごとの表示切り替えがシームレスに実現できる点が印象的でした。

トラブル発生と解決方法

ハンズオンを進める中で、一箇所ハマりポイントがありました。LINEミニアプリを実際に自分のスマホで開こうとした際に、400エラー の画面が表示され、アプリを起動できない事態に遭遇したのです。最初は「デプロイに失敗したかな？」「URLの設定ミスかな？」と原因を探りましたが、Cloudflare側の問題ではなくLINE側の設定に原因がありました。

エラーの原因は、LINEビジネスアカウントに登録したメールアドレスと、自分がLINEアプリでログインしているアカウントが異なっていたことに起因していました。つまり、ミニアプリのチャネルを作成したアカウントと実際に利用しようとしたLINEアカウントが別だったため、権限がなく弾かれてしまっていたのです​。

LINE Developersコンソール上で該当チャネルの権限設定を確認したところ、自分の利用しているLINEアカウントが開発者/管理者として登録されていませんでした。

解決策として、LINE Developersコンソールでミニアプリのチャネル権限を修正しました。具体的には、チャネルの「権限付与」設定に自分のLINEアカウント（メールアドレス）を追加し、開発者として承認することでアクセス権を得られるようにしました。あるいは、テスト用に「全員に公開」に設定する方法もありますが、今回は自分のアカウントを権限リストに加える対応で十分でした。権限設定を更新後、再度LINEアプリからミニアプリを起動すると無事エラーが消え、アプリが正常に表示されました。

得られた知見

ハンズオンを通じて得られた知見やTipsをまとめます。

  • wrangler devを使ったローカル開発時の注意点: Cloudflare Workersはwrangler devコマンドでローカル開発・プレビューが可能ですが、そのままではローカルホスト上で動作するため、外部から（つまりLINEアプリから）アクセスできません。ローカルで開発中にLINEミニアプリとの連携をテストしようとしても、LINE側から自分のPC上のサーバーにリクエストが届かないので注意が必要です。

  • Cloudflare Tunnelの活用: 上記のローカル開発問題を解決するために、Cloudflareのトンネル機能（Cloudflare Tunnel）を利用する方法があります。Cloudflare Tunnelを使うと、自分のローカル環境を一時的に公開URLに紐づけることができ、開発中のWorkersアプリをインターネット経由で参照可能になります。ハンズオンでは触れられていましたが、私自身後で試したところ、トンネル経由でLINEミニアプリにローカル環境のURLを設定して動作確認ができました。これにより、デプロイ作業を繰り返さなくてもリアルタイムにLINE連携の挙動を確認でき、開発効率がぐっと上がると感じました。

  • LINEミニアプリ開発のTips: まず、LINE Developersコンソールでの各種設定（LIFFのエンドポイントURLやチャネル権限など）は細かくチェックすることが重要です。権限周りの設定ミスは今回のようにすぐ400エラーとして現れるので、開発者アカウントやテスターの登録は忘れずに行いましょう。また、ミニアプリはLINEアプリ内のWebViewで動くため、通常のWebアプリと同様に開発できますが、スマホ内部ブラウザ特有の挙動（例えばiOSでのスクロール挙動やCookieの扱い）にも注意が必要だと感じました。実機での動作検証を早めに行うことで、画面がはみ出さないか、OSごとの表示の違いはないか、といったUX面の問題も事前に発見できます。さらに、LIFF SDKを使えばLINEのユーザー情報取得やメッセージ送信なども可能なので、必要に応じて公式ドキュメントを参照しながら実装していくと良いでしょう。

まとめと今後の展望

今回、初めてのLINEミニアプリ開発ハンズオンに参加してみて、「思ったより手軽にミニアプリが作れる！」 というのが率直な感想です。Cloudflare Workers上にホスティングすることでサーバーレスかつエッジ環境で動作するアプリを簡単に公開でき、従来サーバー構築が必要だった部分が大幅に楽になりました。また、今回は Workers KV も利用してデータの保存・共有を実現しましたが、サーバーレス環境でもグローバルなKey-Valueストアを活用することで状態管理ができる点は非常に便利だと感じました。組み合わせ次第で、ユーザーごとの簡易セッションやキャッシュ機構も構築できそうです。

さらに、Cloudflareには Durable Objects や D1 (クラウド上の分散SQLite) といった新しい機能も提供されています。今回のハンズオンでは触れませんでしたが、例えばDurable Objectsを使って予約システムの在庫管理やリアルタイム通知をより厳密に行ったり、D1を使ってよりリレーショナルなデータを扱うことも将来的には検討できます。Cloudflare Workers + KVの組み合わせだけでも十分に強力ですが、これらを活用すればさらにスケーラブルでリッチなミニアプリ開発ができるのではないかと感じました。

今回得た知見を活かして、今後は自分でも何か小さなLINEミニアプリを作ってみようと思います。例えば、友人内で使えるちょっとした投票アプリや、イベント出欠管理のミニアプリなど、アイデアは広がります。サーバーレスとMessagingプラットフォームの融合というの開発体験を味わえたので、これからも継続してキャッチアップしながら色々と試していきたいです。

素晴らしい資料と解説を提供してくださった三浦さん・亀田さん、ハンズオンありがとうございました。

いいなと思ったら応援しよう！