ヘルプ:追加のJavaScriptとCSSをインクルードする/技術情報

グローバル JavaScript のメソッドimportArticles()は、コミュニティにあるスクリプトやスタイルを含む記事などの共通インタフェースを提供します。ここでは、MediaWiki名前空間などその他の名前空間のページも「記事」 (article) として説明しています。

この機能は既存のメソッド importScriptPageとimportStylesheetPageに似ています。しかしimportArticles()はいくつもの記事をひとつにまとめ、ミニファイし、単一のリクエストとして機能する外部のコミュニティの記事をインポートできます。これは多数の追加ファイルの読込みを高速化して、コミュニティを効果的に利用できるようになり、ファイルサイズとWebのトラフィックを両方とも軽減します。

使用法[]

importArticles — Fandom で JavaScript を導入するためのベストプラクティス

importArticles 構文を利用すると、複数のHTTPリクエストを１つのデータ転送にまとめ、複数のスクリプトをより速く読み込み、実行することができます。複数の異なるスクリプトを導入している場合、JavaScriptファイルをインポートする構文を最適化させられる場合があります。“開く”をクリックして、効率的な一括インポート構文によって、パフォーマンスを向上させ、コードをより簡潔に書く方法をご確認ください。また、MediaWiki:ImportJSを利用する方法も有効です。

JavaScriptファイルが importScript、importScriptPage、または importArticles から始まる複数行のコードで構成されていた場合、コードをまとめて最適化することをおすすめします。複数のスクリプトを一括してインポートすることで、JavaScriptコードの読み込み速度が速くなり、コードも読みやすくなります。以下の例をご覧ください。左の例のようなコードを使っている場合は、右の例のようなコードへ書き換えを行ってください。

多重インポート — 読みづらく、非効率的です

一括インポート — 読みやすく、効率的です

importScriptPage('AjaxRC/code.js','dev');

importScript('MediaWiki:localScript.js');

importArticle({
  type: 'script',
  article: 'u:dev:FloatingToc/code.js'
});

importScriptPage('page1.js', 'wikiname');

importScriptPage('page2.js', 'wikiname');

importArticles({
    type: 'script',
    articles: [
        'u:dev:AjaxRC/code.js',
        'MediaWiki:localScript.js',
        'u:dev:FloatingToc/code.js',
        'u:wikiname:page1.js',
        'u:wikiname:page2.js'
    ]
});

注：コンマ等の位置にご注意ください。 プログラミングに詳しくない人は特に、（詳しい人でも、）コンマや引用符などの大事な記号を誤って削除したり、忘れたり、場所を間違えたりしがちです。importArticles を利用する際は、構文エラーを起こさないよう、コードの書き方に十分注意してください。

その他の例や高度な利用法など、importArticles の詳細については、ヘルプ:追加のJavaScriptとCSSをインクルードするをご覧ください。

importArticles()メソッドは記事を読み込む「モジュール」定義に依存します。モジュールは本質的に、キー／値のプロパティのJavaScriptオブジェクトです。下記のプロパティはすべてのモジュールで必要とされます：

type - このプロパティはこのモジュールが包含する記事のタイプを意味します。サポートされているタイプは以下の通りです：
- script - JavaScript を包含する記事 (例えば "MediaWiki:Common.js")。
- style - CSSを包含する記事 (例えば "MediaWiki:Wikia.css")。
articles - インポートしたい記事。ここに入力する内容の詳細については下記の記事の配置セクションをご覧ください。

モジュールはいくらでもimportArticles()から移すことができます。しかし、モジュールにあるすべての記事は同一のタイプでなけれはなりません。

ファイル:Bulb.png

キャッシング（Caching）

importArticles()（と下記で説明されている高度なテクニック）で生成したリンクは最大10分間キャッシュに保管されます。そのため、importArticles()を使えば、10分後にあなたのウィキにいるすべてのユーザーがJSとCSSファイルのアップデートされたバージョンを見ることになると考えられます。

記事の配置[]

インポートしようとしている記事の配置には簡単な構文が使用されます。これはウィキ間リンクに非常によく似ており、互換性があります：

(プレフィックス:<Wiki名>:)<記事>

上記でパーレン（丸括弧）内の記述はオプションです。ブラケット（角括弧）内の記述はユーザーの入力を意味します。コロンは構文解析用に文字列を別々の断片に分けるのに使用されます。プレフィックス (prefix、接頭辞) は、どうやって記事をルックアップしたいかを命令し、ローカルのコミュニティの場合を除き、たいていはコミュニティ名に従います。

ローカルの記事[]

ローカルコミュニティにある記事は普通にリンクするのと同様の方法でタイトルで配置できます。それらの記事ではコミュニティ名のプレフィックスは必要ありません。たとえば、記事 MediaWiki:Common.js をインポートしたい場合は、下記の構文を用います：

MediaWiki:Common.js

外部の記事[]

外部のコミュニティの記事は普通にリンクするのと同様の方法で配置できます。しかし、ローカルの記事とは違い、外部の記事はインポートするコミュニティとそのコミュニティを特定する方法を決定づけるプレフィックスおよびコミュニティ名を使用する必要があります。Fandomでは、通常はコミュニティとそのURLによって英語風の名称となることが多い「データベース」名によるコミュニティのルックアップをサポートしています。データベースのルックアップは、外部のプレフィックス (または「remote」や短縮形「w」) で機能し、URLのルックアップは url プレフィックス (または短縮形の「u」) で機能します。例えば、Wikia Developers Wiki から記事 Highlight/code.css をインポートしたい場合は、下記の構文で機能します：

u:dev:Highlight/code.css

この構文は他の言語のコミュニティでも機能します。例えば、イタリア語版のワンピース Wiki から記事 MediaWiki:Common.js をインポートしたい場合は次のようにします：

u:it.onepiece:MediaWiki:Common.js

「データベース」名よりもURLで外部のコミュニティにあるリソースを配置することは、両者が常にマッチするとは限らないため、ほとんどの場合さらに簡単になります。

高度な使用法[]

裏では、importArticles()のメソッドは3つの必須のタスクを実行しています：

ResourceLoaderとともに使用するための適切にフォーマットされたURLの生成。
適切にフォーマットされていることを確認するためにモジュール上でのサニティチェック（プログラムの整合性検査）を実行。
エラーがある場合に、ユーザーのフィードバックを提供。

しかし、このメソッドの使用は複数の記事をひとつのリクエストにまとめミニファイする利点のために、厳密に要求されているわけではありません。お好みならば、URLを手動で生成して、CSSの@importステートメントやJavaScriptのjQuery.getScriptなどのような他の方法を用いてアセットをロードすることもできます。

URLにインクルードできる多数のパラメータがありますが、下記は恐らくもっとも役立つでしょう：

パラメータ	パラメータの解説
`mode`	ResourceLoader に、記事を読み込んでいることを伝えます。「articles」がセットされている必要があります。
`articles`	記事の一覧。もし複数の記事が与えられた場合は、パイプ「\|」記号で分ける必要があります。
`only`	インポートする記事のタイプ。「scripts」または「styles」のいずれかがセットされている必要があります。
`debug`	このパラメータはデフォルトでは必要ありませんが、インポートされた記事の問題のデバッグを簡単にできるよう、ミニフィケーションの無効化を「true」に設定できます。

最終的には、このようなURLになっているはずです：

/load.php?mode=articles&articles=One.css|Two.css&only=styles

@importと合わせて使用すると、このようになります：

@import url("/load.php?mode=articles&articles=One.css|Two.css&only=styles");

もしCSSが他のコミュニティまたはドロップボックスのような外部サイトに運営されている場合、URLにhttp://かhttps://を加える必要があります。アセット・ファイルの例：

@import url("https://dl.dropboxusercontent.com/s/0p9ay0nqibx2wr7/manga_list.css");

これはソースのウェブサイトからCSSページがどのような状態だったか伝えるためインポートするときCSSファイルを使用します。スタイル・シート・ファイルがコミュニティ外部で編集され、RAWファイルが使われた構文をインポートした場合、即座に変更が加わります。インポートが使用されて編集されたCSSページは変更の前に待機時間が生じます。これにはインポートされたCSSが別の、Fandom以外に運営されたインターネット・ソースから来ていた場合、変更を反映するためコミュニティのインターフェイスをカスタマイズするコードを付けるべきです。

Javascriptでは、外部の第三者サイトを使用することでセキュリティ・リスクが発生するため、Fandom内のサイトからインポートしてください。

例[]

ローカルのコミュニティからひとつ、外部のコミュニティからひとつ、合わせてふたつのスクリプト記事をインポート :

importArticles({
    type: "script",
    articles: [
        "MediaWiki:MyCustomJavaScript.js",
        "external:dev:MediaWiki:External_include.js"
    ]
});

ローカルのコミュニティからひとつ、外部のコミュニティからひとつ、合わせてふたつのスタイル記事をインポート :

importArticles({
    type: "style",
    articles: [
        "MediaWiki:Common.css",
        "external:starwars:MediaWiki:External_include.css"
    ]
});

単一のメソッド呼び出しで複数のモジュールをインポート :

importArticles({
    type: "script",
    articles: [
        "MediaWiki:MyCustomJavaScript.js",
        "external:dev:MediaWiki:External_include.js"
    ]
}, {
    type: "style",
    article: "MediaWiki:Common.css"
});

代替の構文例[]

importArticles() メソッドはよく使われる使用事例として簡素化された代替の構文もサポートしています。便宜上、importArticle() のメソッドも定義されています。

モジュール定義を使用してローカルのコミュニティにあるファイルをインクルード :

importArticle({
    type: "style",
    article: "MediaWiki:Common.css"
});

その他のヘルプとフィードバック[]

ヘルプ:コンテンツでは、他のヘルプページを閲覧、検索することができます。
最新の情報やヘルプについては、コミュニティセントラルをご覧ください。
この記事で不明確な点や、曖昧な点がございましたら、Fandomとの連絡方法をご確認ください。
このヘルプはコミュニティセントラル内にて管理されています。