YouTrack および Hub ヘルプの開発者ポータル

カスタムウィジェットをテストする

カスタムウィジェットページには、ウィジェット遊び場ページへのリンクが含まれています。ウィジェットプレイグラウンドを使用すると、ウィジェットを開発中にプレビューおよびテストできます。

このページでは、基本的に、サンドボックス環境でウィジェットをロードできます。

ウィジェットプレイグラウンドにカスタムウィジェットをロードする

ウィジェットをテストするには、ウィジェットのプレイグラウンドにウィジェットをロードする必要があります。

ウィジェットをウィジェットのプレイグラウンドに読み込むには、次の手順を実行する

  1. 最初に、ウィジェットを開発サーバーにアップロードします。

    webpack(英語) などの静的ファイルをホストするサーバーソフトウェアを使用できます。このオプションを使用する場合、開発サーバーはウィジェットにコンテンツをロードするための playground アクセスを提供する特別なヘッダーを提供する必要があります。このヘッダーは、webpack-dev-server の webpack-config で設定されます。例:

    devServer: { headers: { 'Access-Control-Allow-Origin': '*' } },

    npm http-server(英語) を使用して、ローカルディレクトリで静的サーバーを実行することもできます（Node.js が必要です）。例: 次のコマンドは、http-server をグローバルにインストールし、ポート 9002 の widget-folder ディレクトリに格納されているコンテンツを提供します。

    npm install http-server -g http-server ./widget-folder --cors -c-1 -p 9002

    次に、http://localhost:9002/ アドレスからウィジェットをウィジェットプレイグラウンドにロードできます。

    どちらのオプションを使用するにしても、ウィジェットを HTTPS 経由で提供する必要があります。詳細については、安全な接続を介したウィジェットのテストを参照してください。

  2. ウィジェットのプレイグラウンドページを開きます。

    • 管理メニューからサーバー設定> カスタムウィジェットを選択します。

    • ウィジェット遊び場リンクをクリックします。

  3. 入力フィールドにカスタムウィジェットの Web アドレスを入力します。

  4. ウィジェットを読み込むボタンをクリックしてください。

    • ウィジェットがウィジェットのプレイグラウンドにロードされて表示されます。

      Widget playground

コードを変更してこれらの変更を Web サーバーにアップロードした場合は、ウィジェットの再読み込みボタンを使用してウィジェットのコンテンツをリフレッシュし、リフレッシュをテストしてください。

安全な接続を介したウィジェットのテスト

カスタムウィジェットをウィジェットプレイグラウンドに読み込むには、ウィジェットの提供に使用する開発サーバーが HTTPS 経由で利用可能である必要があります。これは、最新のすべての Web ブラウザーのセキュリティ要件です。

YouTrack Cloud を使用している場合、ブラウザーは、インスタンスとのセキュリティで保護されていない接続を確立しようとする試みもすべてブロックします。

以下のオプションを検討してください。

  • webpack を使用する場合は、開発サーバーの実行に使用するコマンドで --https オプションを渡すことができます。サーバーには自己署名証明書があるため、ローカルマシンの信頼できる証明書のリストに追加する必要がある場合があります。詳細については、webpack のドキュメント(英語)を参照してください。

  • ngrok(英語) または同様のトンネリングリバースプロキシを使用して、有効な SSL 証明書を使用して HTTPS 経由でローカルサーバーをインターネットに公開できます。ngrok を実行するには、ご使用のオペレーティングシステムのダウンロードおよびインストール手順を参照してください。

    次の例は、開発サーバーを実行して、macOS および Linux の Web に公開する方法を示しています。

    # Run your dev server, for example: http-server ./widget-folder --cors -c-1 -p 9002 # Expose this port ngrok http 9002

    ngrok サービスは、ウィジェットのプレイグラウンドページにウィジェットをロードするために使用できる安全なパブリック URL を生成します。

カスタムウィジェットチュートリアル カスタムウィジェット API リファレンス