Wikipedia:カスタムJS

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動先: 案内検索

ウィキペディアで各利用者が設定できるカスタムJavaScriptカスタムJS)について解説します。ユーザースクリプトとも呼ばれます。これは各利用者が記述できるJavaScriptのコードで、利用者空間のサブページに置くことでページの表示時に実行されるものです。様々な機能を実現することができます。

既存のカスタムJSを利用する場合はカスタムJSの一覧をご覧ください。ガジェットは共有されたJavascriptで個人設定からクリックで導入できます。

導入方法[編集]

標準の方法[編集]

  1. カスタムJSを使用するには、まずアカウントを取得してログインします。
  2. 各スキン共通の各利用者用のcommon.jsを開きます。あるいは、各スキンでだけ使うには、標準のベクタースキン用には各利用者のvector.jsを使います。異なるスキンを使っている場合、特別:個人設定の「表示」タブから、使用しているスキンの「カスタムJS」を開きます。これらの js のページは、本人だけが編集できます。
  3. 上記の通り開いた common.js などの js のページに、使いたいコードを記述し保存します。既存のカスタムJS一覧の中からウィキペディア日本語版の利用者:Hogehoge/hoge.js に置かれているコードを使用する場合、次のように書いて保存します。
    importScript('User:Hogehoge/hoge.js');
    
    他言語版または他プロジェクトに置かれているコードを使用する、例えば英語版の User:Foo/bar.js に置かれているコードを使用する場合は、次のように記述します。
    mw.loader.load('//en.wikipedia.org/w/index.php?title=User:Foo/bar.js&action=raw&ctype=text/javascript');
    
  4. キャッシュを消します。これで、各ページにて保存したスクリプトが実行されるようになります。

見本[編集]

どのように編集してよいかよく分からないときは、ウィキペディア内で検索することで、他の利用者のJSを閲覧できます。まずそれを参考に編集していくと良いでしょう。

ブックマークレットを使う方法[編集]

ブックマークレットとしてスクリプトのアドレスをブックマークしておくことで、使いたい時だけクリックして使用できます。たとえば利用者:Hogehoge/hoge.js にあるスクリプトをブックマークする場合、以下のURLで登録します。

javascript:(function(){mw.loader.load('//ja.wikipedia.org/w/index.php?title=User:Hogehoge/hoge.js&action=raw&ctype=text/javascript');})()

Greasemonkeyを使う方法[編集]

Firefoxを使用している場合、Greasemonkeyにスクリプトを登録しておくことで、適宜 有効・無効を切り替えてスクリプトを利用できます(Greasemonkeyダウンロード)。 アドオンをインストール後、Firefoxのメニューから「ツール」->「Greasemonkey」->「新規ユーザスクリプト」を開き、各項目を埋めて登録します。登録の方法はgreasemonkey 作り方などで検索してください。

カスタムJS以外のJavascript[編集]

MediawikiにはカスタムJS以外にJSを置く場所があります。

独自の変数と関数[編集]

Mediawiki上でJavaScriptを動かす場合、次のような変数と関数を利用できます。

読み込まれるファイルの一覧は「en:Wikipedia:Catalogue of CSS classes(英語)」に記載されています。mw:ResourceLoader/Modulesには、MediaWikiの関数やjQueryについて説明されています。

変数[編集]

以下の変数名をグローバル変数から直接呼び出すことは非推奨とされており、mw.config.get を利用してください。wgPageName の場合、mw.config.get( 'wgPageName' ) と記述します。

  • wgPageName - 現在表示中のページ名。
  • wgUserName - ページを表示させている利用者の名前。
  • wgUserLanguage - 利用者が設定している言語の種類。日本語であれば ja 、英語であれば en 。

以上は主なものです。その他の変数については「mw:Manual:Interface/JavaScript#mw.config(英語)」も参照してください。

関数[編集]

  • importScript( /* ページ名 */ ) - 同じウィキ内のJavaScriptソースを読み込む。ページ名で指定。
  • mw.loader.load( /* URI */ ) - 任意のサイトの任意のページにあるJavaScriptソースを読み込む。URIで指定。
  • importStylesheet( /* ページ名 */ ) - 同じウィキ内のCSSを読み込む。ページ名で指定。
  • mw.loader.load( /* URI */, 'text/css' ) - 任意のサイトの任意のページにあるCSSを読み込む。URIで指定。
  • $( /* 関数名 */ ) - ページの読み込みが完了する前、DOMの構築が終わった後に関数を実行する。関数名を指定。$( document ).ready( /* 関数名 */ ) と同等。

API[編集]

Mediawikiには各種のAPIが用意されています。APIを使用するメリットとして、各種の情報(投稿回数、カテゴリ一覧)を得られること、処理しやすい整形された情報が得られること、そして応答が早いこと、などが挙げられます。

APIへのアクセスはAjaxで行います。

JavaScriptでMediawikiAPIを使用する際のひとつの制約として、JavaScriptが持つSame origin policy(別ドメインの情報に直接アクセスできない)により、多言語版や他プロジェクトへのアクセスは出来ません。

デバッグ[編集]

最も原始的なデバッグの方法はアラートコメントアウトを使う方法です。

アラートとコメントアウト[編集]

アラート[編集]

アラートを使う方法は問題が起きていそうな場所に次のようなコードを入れて実行することです。

alert(変数名);

これにより変数がどういう値を取っているか、またif文などの分岐を含む文であればその場所が実行されているかが、ポップアップの有無とその内容により分かります。

コメントアウト[編集]

コメントアウトを使う方法も単純です。問題が起きていそうな場所で、行の先頭にスラッシュ二つを入れるか、または/* */で囲みます。

//abc = hoge.IndexOf('foo');

/*
abc = hoge.IndexOf('foo');
x = abc;
*/

こうした一部分のコメントアウトで今まで動かなかったコードが動き出したら、問題はコメントアウトした部分の周辺にあることが分かります。

ブラウザ別のデバッグ機能[編集]

Firefox[編集]

  • CTRL Shift を押しながら K を押します。
    • あるいは、ウィンドウ右上の「三」のようにみえるマークを押す。メニューから「開発ツール」->「WEBコンソール」をクリックします。

アドオンのJavaScript Debuggerもあります。追加してからFirefoxを再起動し、メニューから「ツール」->「JavaScript Debugger」をクリックすると、デバッガが立ち上がります。ブレークポイントの指定、変数のウォッチなどが可能です。

Chrome[編集]

  • CTRL Shift を押しながら I を押します。
    • あるいはウィンドウ右上の「三」のようにみえるマークを押す ->「その他のツール」->「デベロッパーツール」をクリック。

表示されたペインの「Console」にエラーなどが表示されます。

Opera[編集]

画面上で右クリック->「要素を調べる」をクリック。表示されたペインで「Console」という所をクリックすると、デバッガが表示されます。

Microsoft Edge / Internet Explorer[編集]

F12 を押すとウィンドウが表示されます。または、メニューから「ツール」->「F12 開発者ツール」でも同様です。ここで「スクリプト」という所をクリックすると、デバッガが表示されます。

関連項目[編集]