> This page is for プラットフォーム, version レガシー.
> For other versions, use one of these documentation indexes:
> - V4 (default): https://next.developer.frame.io/platform/v4/llms.txt
> - V4 Experimental: https://next.developer.frame.io/platform/v4-experimental/llms.txt
> - レガシー: https://next.developer.frame.io/platform/v2/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://next.developer.frame.io/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://next.developer.frame.io/_mcp/server.

# ngrok の使用

ngrok は使いやすいツールで、ローカルマシン上に安全なトンネルと公開 URL を作成して、ローカルプロジェクトをテストしたり、クライアントやチームメイトによるレビュー用に作業を共有したりできます。HTTP または HTTPS を設定できます。よく使われているツールなので、うまくいかないことがあっても、様々な問題解決法の解説記事が多数あります。この記事では、ngrok をインストールするいくつか簡単な方法と、web アプリケーションが ngrok と通信できない場合の対処方法について説明します。

<Info title="ngrok">
ngrok の友人たちが、ngrok を介した Frame.io webhook のサポートに特化した素晴らしい記事を書いています。[こちら](https://ngrok.com/docs/integrations/frameio/webhooks)をご覧ください。
</Info>

## ngrok のインストール
ngrok を使えるようにする方法は次のとおりです。

### ngrok インストーラーを使用したインストール
1. ngrok の web サイトにアクセスし、指示に従います：[https://ngrok.com/download](https://ngrok.com/download)
2. アカウントを接続することで提供される機能が必要な場合は、説明されている手順に従ってアカウントとトークンを取得する必要があります。

アカウントの取得やトークンの追加は必須ではありませんが、ダウンロードページをチェックして、必要かどうかを確認してください。

<Info title="注意：">
この方法を使用する場合、システム全体で使用可能にしない限り、ngrok は保存した場所から実行されます。
</Info>

### Homebrew を使用したインストール
ngrok の推奨インストール方法です。Homebrew がインストール済みであれば、`homebrew cask install ngrok` と入力するだけで ngrok がインストールされ、どこからでも使用できるようになります。最大の利点は、ターミナルで各コマンドの先頭に `./ngrok` ではなく `ngrok` と入力するだけになることです。このオプションの詳細については[こちら](https://gist.github.com/wosephjeber/aa174fb851dfe87e644e)を参照してください。

## ngrok の使用
ngrok のセットアップが完了したら、`3000` などのポートを選択し、ターミナルのコマンドラインから ngrok http `3000` コマンドを使用して実行します。ポート `3000` を使用する必要はありませんが、これがセットアップでの選択で一般的に使用されるポートです。

ngrok が特定のフォルダーから実行されるようにセットアップした場合は、ngrok を配置したフォルダーに移動し、`./ngrok http 3000` コマンドを使用する必要があります。

プロジェクト用のサーバーを始動させてこのポートをリッスンすると、ngrok が提供する公開アドレスを使用して作業にアクセスできるようになります。

### Web アプリで使用する ngrok のトラブルシューティング - 末尾のスラッシュ
ngrok で発生する可能性のある問題の 1 つが、web アプリで使用する ngrok URL の設定時にサーバーに接続できないことです。この問題の厄介なところは、何を送信しても ngrok に登録されないことです。localhost:4040 を開くことはできますが、状況を確認しようにも何も表示されません（localhost:4040 は ngrok が提供しているので、サーバーが受信するリクエストを監視できます）。ngrok は、アドレスを (/.) **ではなく /(.) とマッチさせるようですので、アドレスの末尾にスラッシュを追加しなかった場合、ngrok の監視ツールに何も表示されません。指定したアドレスとの一致を ngrok が見つけられないからです。

末尾にスラッシュを追加した例を次に示します：`http://something.ngrok.io/`

スラッシュを含むエンドポイントに解決するサンプルアプリケーションを作成することもできます。Frame.io アプリがサーバーに到達できるようにするため、サンプルアプリがエンドポイント `/actions` を使用している場合は、ngrok アドレスの末尾に /actions エンドポイントを追加する必要があることに注意してください。例えば、ngrok アドレスが `http://something.ngrok.io` の場合は、カスタムアクションの設定で `http://something.ngrok.io/actions` と指定する必要があります。これは他の web アプリケーションでは異なることがあるので、すぐに機能しない場合は ngrok アドレスの末尾を変えてみてください。

### ngrok のほかに使用できるものは？Glitch を試してください！
Glitch は ngrok の魅力的な代替ツールで、より迅速に設定できます。Glitch を使用すると、アカウントを作成し、Glitch のサーバーで公開 URL を使用して独自のアプリを構築できます。他のユーザーと共同作業したり、コードを公開または非公開にしたり、様々な言語やプラットフォームから選択したりできます。利用可能な機能については、[https://glitch.com/create](https://glitch.com/create) を参照してください。

Glitch でプロジェクトをセットアップすると、一部の web アプリケーションで末尾のスラッシュ問題が生じます。Frame.io の場合は、[developer.frame.io](https://developer.frame.io) でカスタムアクションを設定する際、Glitch が提供する URL の末尾に末尾のスラッシュを含める必要があります。/actions エンドポイントであっても、他に何も追加する必要はありません。

### 今すぐ試せる設定は？
はい。ngrok を使用しない場合や、独自の Glitch プロジェクトを作成しない場合は、[https://frameio-custom-action.glitch.me](https://frameio-custom-action.glitch.me) にサンプルアプリケーションを用意してありますので、お試しください。[https://developer.frame.io](https://developer.frame.io) の「カスタムアクション」エリアにこのアドレスを追加する際、末尾のスラッシュを忘れないでください。

### リソース
このセクションでは、この記事でリストされているすべてのリソースをリストします。

- **ngrok** [https://ngrok.com/](https://ngrok.com/)
- **Glitch** [https://glitch.com/](https://glitch.com/)
- **Glitch で使用できるプラットフォーム** [https://glitch.com/create](https://glitch.com/create)
- **JavaScript で記述されたカスタムアクション用 Glitch サンプルアプリ** [https://frameio-custom-action.glitch.me](https://frameio-custom-action.glitch.me)
- **Frame.io 開発者の新規登録と設定** [https://developer.frame.io/](https://developer.frame.io/)
- **Frame.io web アプリ** [https://app.frame.io/](https://app.frame.io/)