Fanplayr Docs

日本語

English
Español
Italiano

日本語

English
Español
Italiano

Appearance

JavaScriptタグのテスト ​

このガイドでは、本番環境にJavaScriptタグを実装する前に、Chromeブラウザ拡張機能を使用してウェブサイト上でJavaScriptタグをテストするプロセスを順を追って説明します。

概要 ​

JavaScriptタグをデプロイする前にテストすることは、それらが正しく機能し、ウェブサイトの機能に干渉しないことを確認するために不可欠です。この方法により、ライブウェブサイトに変更を加えることなく、ブラウザで安全にタグをテストできます。

前提条件 ​

  • Google Chromeブラウザ
  • Chrome拡張機能をインストールするための管理者権限
  • テストしたいJavaScriptタグコード

インタラクティブガイド ​

このインタラクティブガイドに従って、User JavaScript and CSS ブラウザ拡張機能のインストール方法を学びましょう。

  1. 拡張機能のページにアクセスする: https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

  2. 以下のインタラクティブガイドで**「Get Started」**をクリックして、手順通りに進んでください。

ステップバイステップガイド ​

User JavaScript and CSS 拡張機能のインストールと使用に関するより詳細な手順については、このステップバイステップガイドに従ってください。

ステップ1: User JavaScript and CSS拡張機能をインストールする ​

  1. Google Chromeを開き、Chromeウェブストアに移動します。

  2. 次のURLにアクセスします: https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

  3. 「Chromeに追加」ボタンをクリックします。

    Clicking the "Add to Chrome" buttonClicking the "Add to Chrome" button

  4. プロンプトが表示されたら、「拡張機能を追加」をクリックしてインストールを確認します。

    Clicking the "Add extension" buttonClicking the "Add extension" button

  5. 拡張機能のアイコンがChromeのツールバーに表示されるはずです（表示されない場合はパズルピースアイコンをクリックする必要があるかもしれません）。

    Locating the extension in the Chrome toolbarLocating the extension in the Chrome toolbar

  6. 拡張機能のアイコンを右クリックするか、パズルピースアイコンの下で見つけて、「拡張機能を管理」ボタンをクリックして拡張機能の設定を開きます。

    Clicking the "Manage extension" action in the Chrome toolbar.Clicking the "Manage extension" action in the Chrome toolbar.

  7. 拡張機能の設定で、「Allow user scripts」の設定がオンになっていることを確認します。この設定を見つけるには、設定ページを下にスクロールする必要があるかもしれません。（この手順が完了したら、この設定タブを閉じてもかまいません。）

    Ensuring the "Allow user scripts" setting is turned on for the extension.Ensuring the "Allow user scripts" setting is turned on for the extension.

ステップ2: 拡張機能にアクセスする ​

  1. JavaScriptタグをテストしたいウェブサイトに移動します。例えば、https://fanplayr.com。

  2. ChromeツールバーにあるUser JavaScript and CSS拡張機能のアイコンをクリックします（表示されない場合はパズルピースアイコンをクリックする必要があるかもしれません）。

    Clicking the extension icon in the Chrome toolbar.Clicking the extension icon in the Chrome toolbar.

  3. 拡張機能パネルが開き、ウェブサイトの新しいルールを定義するオプションが表示されます。

  4. 「新しいルール」ボタンをクリックします。これにより、ウェブサイトに挿入するJavaScriptタグを指定できるルールを定義するための新しいタブが開きます。

    Clicking the "New Rule" button in the extension panel.Clicking the "New Rule" button in the extension panel.

ステップ3: JavaScriptタグを追加する ​

JavaScriptタグの例のフォーマット ​

html
<script>
  (function (w, d, s) {
    var js = d.createElement(s);
    js.async = true;
    js.src = 'https://cdn.fanplayr.com/....../adaptor.js';
    var fjs = d.getElementsByTagName(s)[0];
    fjs.parentNode.insertBefore(js, fjs);
  })(window, document, 'script');
</script>

TIP

拡張機能には、<script>と</script>のHTMLタグの間にあるJavaScriptコードのみをコピーするようにしてください（上記の例では2行目から8行目）。

  1. 拡張機能のオプションを開くと、JavaScriptコードを入力できるテキストエリアが表示されます。

    Area to paste JavaScript code.Area to paste JavaScript code.

  2. JavaScriptタグコードをこのエリアに貼り付けます。もし存在するなら、先頭の<script>と末尾の</script>を取り除き、JavaScriptコードのみを含めるようにしてください。

    Pasting JavaScript tag code into the rule.Pasting JavaScript tag code into the rule.

  3. 「保存」ボタンをクリックします。

    Clicking the "Save" button.Clicking the "Save" button.

ステップ4: JavaScriptタグのテスト ​

  1. JavaScriptタグをテストしたいウェブサイトをリフレッシュします。

  2. JavaScriptコードが実行されるはずです。

Copyright © 2011-present Fanplayr Inc