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 翻訳

ここではウィキペディア上で各利用者が設定できるカスタムJS(カスタムJavaScript)について解説します。

カスタムJSは各利用者ひとりひとりがカスタマイズできるJavaScriptコードで、利用者空間のサブページにソースを置くことで、ページの表示時に自動で読み込まれ実行されるものです。

これにより様々な機能を実現することができます。

既存のカスタムJSを利用する場合はカスタムJSの一覧をご覧ください。

概要[編集]

導入方法[編集]

標準の方法[編集]

  1. カスタムJSを使用するには、まずアカウントを取得してログインします。
  2. 特別:MyPage/vector.jsにJavaScriptのコードを書き込み保存します。使用スキンをデフォルトから変更している場合は特別:個人設定の「表示」タブから、使用しているスキンの「カスタムJS」という部分をクリックし、そこにコードを保存してください。カスタムJS保存用のページは、本人だけが編集できます。既存のカスタムJS一覧の中からウィキペディア日本語版の利用者:Hogehoge/hoge.js に置かれているコードを使用する場合、次のように書いて保存します。
    importScript('User:Hogehoge/hoge.js');
    
    他言語版または他プロジェクトに置かれているコードを使用する、例えば英語版の User:Foo/bar.js に置かれているコードを使用する場合は、次のように記述します。
    importScriptURI('http://en.wikipedia.org/w/index.php?title=User:Foo/bar.js&action=raw&ctype=text/javascript');
    
  3. キャッシュを飛ばします。
  4. すると以後、ページを表示するたびに、先ほど保存したコードが読み込まれ実行されます。

見本[編集]

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

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

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

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

Greasemonkeyを使う方法[編集]

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

カスタムJS一覧[編集]

色々な人が作成した既存のカスタムJSが、カスタムJSの一覧にまとめられています。

カスタムJS以外[編集]

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

変数[編集]

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

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

以上は主なものです。使用できる変数の一覧は各ページで右クリックし「ソースを表示」を選択し、表示させたソースの上からちょっと下りた所を見てください。そこに wg から始まる変数の一覧が書かれています。

関数[編集]

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

  • importScript() - 同じウィキ内のJavaScriptソースを読み込む。ページ名で指定。
  • importScriptURI() - 任意のサイトの任意のページにあるJavaScriptソースを読み込む。URIで指定。
  • importStylesheet() - 同じウィキ内のCSSを読み込む。ページ名で指定。
  • importStylesheetURI() - 任意のサイトの任意のページにあるCSSを読み込む。URIで指定。
  • addOnloadHook() - ページのロードが終わった後に、指定した関数を実行する。関数名を指定。

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[編集]

  • メニューから「ツール」->「エラーコンソール」をクリックすると、JavaScriptの実行時エラーの内容と行数が表示されます。
  • JavaScript Debugger - 無料のアドオンです。追加してからFirefoxを再起動し、メニューから「ツール」->「JavaScript Debugger」をクリックすると、デバッガが立ち上がります。ブレークポイントの指定、変数のウォッチなどが可能です。

Chrome[編集]

ウィンドウ右上の「三のマーク」->「ツール」->「JavaScriptコンソール」をクリック。表示されたペインで「Scripts」という所をクリックすると、デバッガが表示されます。ブレークポイントの指定、変数のウォッチなどが可能です。

Opera[編集]

画面上で右クリック->「要素を調べる」をクリック。表示されたペインで「Scripts」という所をクリックすると、デバッガが表示されます。またはメニューから「ツール」->「詳細ツール」->「Opera Dragonfly」でも表示できます。

IE[編集]

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

関連項目[編集]