Wikipedia:カスタムJS

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動先: 案内検索
表示のカスタマイズ

Aide 外装の設定
Aide 外装の詳細設定(メタ)


page perso. common.css 個人用
page perso. vector.css 個人用
Namespace MediaWiki.svg Common.css共通
Namespace MediaWiki.svg Vector.css共通
Nuvola apps kpager.svg クラス一覧(英語)


カスタムJS一覧

page perso. common.js 個人用
page perso. vector.js 個人用
Namespace MediaWiki.svg Common.js機能共通
Namespace MediaWiki.svg Vector.js共通
Namespace MediaWiki.svg ガジェット提案
Icon tools.svg ウィキ技術部一覧


Mediawiki-logo.png MediaWiki / 拡張機能
Icono de traducción.svg 翻訳

ウィキペディアで各利用者が設定できるカスタム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 開発者ツール」でも同様です。ここで「スクリプト」という所をクリックすると、デバッガが表示されます。

関連項目[編集]