CodeSandboxを使えば、ブラウザ上でLINEと連携するWebアプリや、LINEのようなチャット画面を持つWebアプリを開発できます。ただし、最初に理解しておきたいのは、LINE本体のWeb版をそのまま複製できる公式ソースコードが公開されているわけではないという点です。
LINEと正式に連携するアプリを作る場合は、LY Corporationが提供するLINE DevelopersのLIFF（LINE Front-end Framework）やMessaging APIを利用するのが基本です。一方、学習目的でLINE風のチャットUIを作りたいだけなら、Reactなどを使って画面とメッセージ機能を自作する方法があります。
この記事では、LINE本体の非公開プログラムを探すのではなく、公式に公開されているSDK・GitHubサンプルを利用してCodeSandboxで開発する方法を整理します。
「LINE Web版を作る」の意味を最初に整理する
一口に「LINEのWeb版」といっても、作りたいものによって必要な技術が大きく異なります。LINEのトーク画面に似たWebチャットを作りたい場合と、実際のLINEユーザーと通信するサービスを作りたい場合は別物です。
| 作りたいもの | 主な方法 |
|---|---|
| LINE風のチャット画面 | HTML/CSS/JavaScript、Reactなどで自作 |
| LINEアカウントと連携するWebアプリ | LIFFを利用 |
| ユーザーから受信して自動返信するBot | Messaging APIを利用 |
| LINE本体と同じサービスを複製 | 公式クライアントのソースコードは一般公開されていないため、公開APIの範囲で別アプリとして開発 |
特に重要なのは、LINEの画面を模倣することと、実際のLINEサービスへ接続することを混同しないことです。実サービスとの連携には、公開されている公式APIやSDKを利用します。
GitHubにはLINE公式のサンプルコードが公開されている
LINE Developersでは、Messaging API用のJava、PHP、Python、Node.js、Go、Rubyなどの公式SDKが案内されています。SDKやサンプルコードはGitHub上でも公開されているため、ゼロからAPI通信部分を書くより、公式サンプルを参考にする方が安全です。
Webアプリの学習では、LINE公式のLIFF Starterが参考になります。これはLIFFの基本機能を確認するための小規模なWebアプリで、依存パッケージをインストールして起動できる構成になっています。
[参照] LINE公式 LIFF Starter（GitHub）
また、LINEが公開しているAPIのOpenAPI仕様もGitHubで確認できます。Messaging APIなどを詳しく調べたい場合に役立ちます。
公式SDKの一覧についてはLINE Developersにもまとめられています。
CodeSandboxではまずLINE風UIだけを作ると分かりやすい
初心者の場合、いきなりLINE APIへ接続するより、まずCodeSandbox上でチャット画面を完成させる方法がおすすめです。例えばReactで「メッセージ一覧」「入力欄」「送信ボタン」という3つの要素を作ります。
画面の構造としては、メッセージを配列で管理し、送信ボタンを押したときに新しいメッセージを配列へ追加するだけでも簡単なチャットUIになります。この段階ではLINEのサーバーには接続せず、ブラウザ内部だけで動作させます。
例えば「こんにちは」と入力して送信すると、自分側の吹き出しとして「こんにちは」が追加される仕組みです。ここまで完成させてからバックエンドやLINE APIを追加すると、問題が起きた場所を切り分けやすくなります。
実際のLINEと連携したいならLIFFを使う
LINEと連携するWebアプリを作りたい場合に重要なのがLIFFです。LIFF SDKはnpmパッケージとしてWebアプリへ組み込むことができ、LINEプラットフォームと連携した機能を開発できます。
LIFFを使う場合は、単にGitHubのプログラムをCodeSandboxへコピーするだけでは完了しません。LINE Developers側で必要な設定を行い、発行されたLIFF IDなどを自分のアプリへ設定する必要があります。
[参照] LINE Developers LIFFドキュメント
公式LIFF Starterでは依存関係をインストールしてアプリを起動する構成が採用されています。CodeSandboxでもNode.js/npmを利用できるプロジェクトであれば、同様にpackage.jsonを基準として依存パッケージを導入して開発する考え方になります。
GitHubのプロジェクトをCodeSandboxで動かすときの確認ポイント
GitHub上のプロジェクトを利用するときは、まずREADME.mdとpackage.jsonを確認します。READMEには起動方法、package.jsonには必要なライブラリや実行用スクリプトが記載されていることが多いためです。
例えばREADMEに「npm install」や「npm ci」の後に「npm start」を実行するよう書かれている場合、そのプロジェクトがNode.jsのパッケージ管理を前提としていることが分かります。CodeSandboxへGitHubリポジトリをインポートした後も、依存関係と起動コマンドが正しく認識されているか確認します。
ただし、GitHubにあるLINE関連プロジェクトなら何でも安全というわけではありません。古い非公式ライブラリでは現在のAPI仕様に対応していなかったり、第三者へ認証情報を送信する危険なコードが含まれていたりする可能性があります。最初はLINE公式のリポジトリと公式ドキュメントを基準にするのが安全です。
Messaging APIを使えばLINE Botを作れる
LINE上でユーザーからメッセージを受け取り、それに応答する機能を作りたい場合にはMessaging APIを利用します。LINE公式ドキュメントによると、Messaging APIではユーザーからのイベントをWebhookで受け取り、返信メッセージやプッシュメッセージなどを送信できます。
利用開始にはLINE Official Accountを用意し、Messaging APIを有効にしてチャネルを準備します。その後、Channel Access TokenやWebhook URLなどを設定してサーバー側のプログラムと接続します。
ここで注意したいのは、Messaging APIは通常のLINEユーザーになりすまして自由にメッセージを読み書きするためのAPIではないことです。基本的にはLINE Official Accountとユーザーとのコミュニケーションを構築する仕組みとして考えると分かりやすいでしょう。
Webhookを使う場合はフロントエンドだけでは完結しない
Messaging APIを利用したBotでは、LINE PlatformからWebhook URLへHTTP POSTリクエストが送信されます。そのため、単純なHTML/CSS/JavaScriptだけの静的ページとは異なり、Webhookを受信するサーバー側の処理が必要です。
また、LINE公式ドキュメントではWebhookを受信した際に署名を検証するよう案内されています。外部から偽のリクエストを送信される可能性があるため、署名検証を省略するべきではありません。
[参照] Messaging APIのWebhook受信と署名検証
CodeSandboxを開発・検証環境として利用する場合でも、外部からアクセス可能なHTTPSのエンドポイント、環境変数、サーバー側コードなどが必要になる構成では、そのプロジェクトで必要なサーバー機能を実行できるかを確認してください。
Channel SecretやAccess Tokenをコードへ直接書かない
LINE連携で非常に重要なのが認証情報の管理です。Channel SecretやChannel Access TokenなどをJavaScriptファイルへ直接記述して公開すると、GitHubやブラウザから第三者に取得される危険があります。
秘密情報をGitHubの公開リポジトリへコミットしたり、ブラウザへ配信されるフロントエンドコードへ埋め込んだりしないでください。サーバー側の環境変数など、利用する開発・ホスティング環境が提供する安全な秘密情報管理機能を利用します。
誤って公開してしまった場合は、単にGitHub上の文字列を削除するだけでは不十分なことがあります。漏えいした認証情報は無効化・再発行し、新しいものへ切り替えることを検討してください。
初心者におすすめの開発順序
最初からLINEに似たサービス全体を作ろうとすると、フロントエンド、バックエンド、認証、データベース、API、セキュリティを同時に扱うことになります。まず小さな機能単位に分けると理解しやすくなります。
最初にCodeSandboxでLINE風チャットUIを作り、次にメッセージをブラウザ上で追加できるようにします。その後、必要ならデータベースを使った保存機能を追加し、実際のLINEとの連携が必要になった段階でLIFFまたはMessaging APIを導入する流れが現実的です。
実際のLINEユーザーとの連携が目的なら、独自の非公式LINEクライアントを探すより、LINE公式SDK・LIFF・Messaging APIのサンプルを出発点にすることで、仕様変更やセキュリティ上の問題にも対応しやすくなります。
まとめ｜LINE本体のコードではなく公式APIとサンプルから始める
CodeSandboxでLINE関連のWebアプリを開発することは可能ですが、「LINEそのもののWeb版」と「LINEと連携する独自Webアプリ」は区別する必要があります。LINE本体のプログラムを探すのではなく、公開されているLIFFやMessaging APIを利用するのが基本です。
GitHubにはLINE公式のLIFF Starter、各言語向けMessaging API SDK、OpenAPI仕様などが公開されています。まず公式サンプルのREADMEとpackage.jsonを確認し、必要な依存関係や設定を理解してからCodeSandbox環境へ持ち込むとスムーズです。
学習目的なら「LINE風UIをCodeSandboxで作る → メッセージ送信処理を実装する → 必要に応じてLIFFまたはMessaging APIを追加する」という順番がおすすめです。認証情報を公開コードへ書かないことと、Webhookでは署名検証を行うことも忘れず、安全な構成で開発を進めましょう。
コメント