From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/code_snippets/canvas/index.html | 239 ++++++++++++ files/ja/code_snippets/cookies/index.html | 21 ++ .../code_snippets/dialogs_and_prompts/index.html | 342 +++++++++++++++++ .../ja/code_snippets/download_observer/index.html | 59 +++ files/ja/code_snippets/file_i_o/index.html | 403 +++++++++++++++++++++ .../finding_window_handles/index.html | 48 +++ files/ja/code_snippets/index.html | 131 +++++++ .../index.html | 69 ++++ files/ja/code_snippets/js_xpcom/index.html | 115 ++++++ files/ja/code_snippets/miscellaneous/index.html | 328 +++++++++++++++++ files/ja/code_snippets/modules/index.html | 32 ++ files/ja/code_snippets/on_page_load/index.html | 94 +++++ files/ja/code_snippets/page_loading/index.html | 19 + files/ja/code_snippets/preferences/index.html | 251 +++++++++++++ .../ja/code_snippets/progress_listeners/index.html | 117 ++++++ files/ja/code_snippets/queryselector/index.html | 99 +++++ .../code_snippets/running_applications/index.html | 48 +++ files/ja/code_snippets/sidebar/index.html | 44 +++ files/ja/code_snippets/tabbed_browser/index.html | 371 +++++++++++++++++++ files/ja/code_snippets/toolbar/index.html | 55 +++ files/ja/code_snippets/windows/index.html | 45 +++ files/ja/code_snippets/xml/index.html | 27 ++ 22 files changed, 2957 insertions(+) create mode 100644 files/ja/code_snippets/canvas/index.html create mode 100644 files/ja/code_snippets/cookies/index.html create mode 100644 files/ja/code_snippets/dialogs_and_prompts/index.html create mode 100644 files/ja/code_snippets/download_observer/index.html create mode 100644 files/ja/code_snippets/file_i_o/index.html create mode 100644 files/ja/code_snippets/finding_window_handles/index.html create mode 100644 files/ja/code_snippets/index.html create mode 100644 files/ja/code_snippets/interaction_between_privileged_and_non-privileged_pages/index.html create mode 100644 files/ja/code_snippets/js_xpcom/index.html create mode 100644 files/ja/code_snippets/miscellaneous/index.html create mode 100644 files/ja/code_snippets/modules/index.html create mode 100644 files/ja/code_snippets/on_page_load/index.html create mode 100644 files/ja/code_snippets/page_loading/index.html create mode 100644 files/ja/code_snippets/preferences/index.html create mode 100644 files/ja/code_snippets/progress_listeners/index.html create mode 100644 files/ja/code_snippets/queryselector/index.html create mode 100644 files/ja/code_snippets/running_applications/index.html create mode 100644 files/ja/code_snippets/sidebar/index.html create mode 100644 files/ja/code_snippets/tabbed_browser/index.html create mode 100644 files/ja/code_snippets/toolbar/index.html create mode 100644 files/ja/code_snippets/windows/index.html create mode 100644 files/ja/code_snippets/xml/index.html (limited to 'files/ja/code_snippets') diff --git a/files/ja/code_snippets/canvas/index.html b/files/ja/code_snippets/canvas/index.html new file mode 100644 index 0000000000..a488317d89 --- /dev/null +++ b/files/ja/code_snippets/canvas/index.html @@ -0,0 +1,239 @@ +--- +title: Canvas のコードスニペット +slug: Code_snippets/Canvas +tags: + - Canvas + - Code snippets + - Graphics +translation_of: Archive/Add-ons/Code_snippets/Canvas +--- +

<canvas> を利用するための一般的な情報については、canvas のトピックページ を参照してください。

+ +

ウェブコンテンツで役に立つコード

+ +

canvas 内にある特定の色のピクセルの数を取得する

+ +

以下の関数は、canvas 内にある r、g、b で指定した RGB 色を持つピクセルの数を返します。これは こちらのブログ記事 で説明しているように、例えばある領域と、その上にユーザーが描いた領域を比較するときにとても役に立ちます。

+ +
function getpixelamount(canvas, r, g, b) {
+  var cx = canvas.getContext('2d');
+  var pixels = cx.getImageData(0, 0, canvas.width, canvas.height);
+  var all = pixels.data.length;
+  var amount = 0;
+  for (i = 0; i < all; i += 4) {
+    if (pixels.data[i] === r &&
+        pixels.data[i + 1] === g &&
+        pixels.data[i + 2] === b) {
+      amount++;
+    }
+  }
+  return amount;
+};
+
+ +

canvas 内のピクセルの色を取得する

+ +

以下のスニペットは、canvas の x および y で示した位置にあるピクセルの色を、RGBA 値で表すオブジェクトを返します。これは、マウスカーソルがある図形の内部にあるか否かを調べるために役立ちます。

+ +
function getpixelcolour(canvas, x, y) {
+  var cx = canvas.getContext('2d');
+  var pixel = cx.getImageData(x, y, 1, 1);
+  return {
+    r: pixel.data[0],
+    g: pixel.data[1],
+    b: pixel.data[2],
+    a: pixel.data[3]
+  };
+}
+
+ +

メソッドを連結する

+ +

以下のクラスは、jQuery のように連続して 2D コンテキストのメソッドやプロパティにアクセスする機能を提供します。

+ +
function Canvas2DContext(canvas) {
+  if (typeof canvas === 'string') {
+    canvas = document.getElementById(canvas);
+  }
+  if (!(this instanceof Canvas2DContext)) {
+    return new Canvas2DContext(canvas);
+  }
+  this.context = this.ctx = canvas.getContext('2d');
+  if (!Canvas2DContext.prototype.arc) {
+    Canvas2DContext.setup.call(this, this.ctx);
+  }
+}
+Canvas2DContext.setup = function () {
+  var methods = ['arc','arcTo','beginPath','bezierCurveTo','clearRect','clip',
+    'closePath','drawImage','fill','fillRect','fillText','lineTo','moveTo',
+    'quadraticCurveTo','rect','restore','rotate','save','scale','setTransform',
+    'stroke','strokeRect','strokeText','transform','translate'];
+
+  var getterMethods = ['createPattern','drawFocusRing','isPointInPath','measureText', // drawFocusRing not currently supported
+    // The following might instead be wrapped to be able to chain their child objects
+    'createImageData','createLinearGradient',
+    'createRadialGradient', 'getImageData','putImageData'
+  ];
+
+  var props = ['canvas','fillStyle','font','globalAlpha','globalCompositeOperation',
+    'lineCap','lineJoin','lineWidth','miterLimit','shadowOffsetX','shadowOffsetY',
+    'shadowBlur','shadowColor','strokeStyle','textAlign','textBaseline'];
+
+  for (let m of methods) {
+    let method = m;
+    Canvas2DContext.prototype[method] = function () {
+      this.ctx[method].apply(this.ctx, arguments);
+      return this;
+    };
+  }
+
+  for (let m of getterMethods) {
+    let method = m;
+    Canvas2DContext.prototype[method] = function () {
+      return this.ctx[method].apply(this.ctx, arguments);
+    };
+  }
+
+  for (let p of props) {
+    let prop = p;
+    Canvas2DContext.prototype[prop] = function (value) {
+      if (value === undefined)
+        return this.ctx[prop];
+      this.ctx[prop] = value;
+      return this;
+    };
+  }
+};
+
+var canvas = document.getElementById('canvas');
+
+// Use context to get access to underlying context
+var ctx = Canvas2DContext(canvas)
+  .strokeStyle("rgb(30,110,210)")
+  .transform(10, 3, 4, 5, 1, 0)
+  .strokeRect(2, 10, 15, 20)
+  .context;
+
+// Use property name as a function (but without arguments) to get the value
+var strokeStyle = Canvas2DContext(canvas)
+  .strokeStyle("rgb(50,110,210)")
+  .strokeStyle();
+
+ +

特権を持つコードに限り役に立つコード

+ +

以下のスニペットは拡張機能や特権を持つアプリなど、特権を持つコード内に限り役に立ちます。

+ +

canvas のイメージをファイルに保存する

+ +

以下の関数は canvas オブジェクトと保存先ファイルパス文字列を受け取ります。canvas は PNG ファイルに変換され、指定された場所に保存されます。この関数は、ファイルの保存が完了したときに解決する promise を返します。

+ +
function saveCanvas(canvas, path, type, options) {
+    return Task.spawn(function *() {
+        var reader = new FileReader;
+        var blob = yield new Promise(accept => canvas.toBlob(accept, type, options));
+        reader.readAsArrayBuffer(blob);
+
+        yield new Promise(accept => { reader.onloadend = accept });
+
+        return yield OS.File.writeAtomic(path, new Uint8Array(reader.result),
+                                         { tmpPath: path + '.tmp' });
+    });
+}
+
+ +

canvas 要素にリモートのページを読み込む

+ +

以下のクラスは最初に非表示の iframe 要素を生成して、load イベントにリスナーを設定します。リモートのページが読み込まれると、remotePageLoaded メソッドを実行します。このメソッドは iframe の window への参照を取得して、window を canvas オブジェクトに描画します。

+ +

これ chrome のページで実行する場合に限り動作します。通常のウェブページで実行すると、'Security error" のコード "1000" エラーが発生します。

+ +
RemoteCanvas = function() {
+    this.url = "http://developer.mozilla.org";
+};
+
+RemoteCanvas.CANVAS_WIDTH = 300;
+RemoteCanvas.CANVAS_HEIGHT = 300;
+
+RemoteCanvas.prototype.load = function() {
+    var windowWidth = window.innerWidth - 25;
+    var iframe;
+    iframe = document.createElement("iframe");
+    iframe.id = "test-iframe";
+    iframe.height = "10px";
+    iframe.width = windowWidth + "px";
+    iframe.style.visibility = "hidden";
+    iframe.src = this.url;
+    // Here is where the magic happens... add a listener to the
+    // frame's onload event
+    iframe.addEventListener("load", this.remotePageLoaded, true);
+    //append to the end of the page
+    window.document.body.appendChild(iframe);
+    return;
+};
+
+RemoteCanvas.prototype.remotePageLoaded = function() {
+    // Look back up the iframe by id
+    var ldrFrame = document.getElementById("test-iframe");
+    // Get a reference to the window object you need for the canvas
+    // drawWindow method
+    var remoteWindow = ldrFrame.contentWindow;
+
+    //Draw canvas
+    var canvas = document.createElement("canvas");
+    canvas.style.width = RemoteCanvas.CANVAS_WIDTH + "px";
+    canvas.style.height = RemoteCanvas.CANVAS_HEIGHT + "px";
+    canvas.width = RemoteCanvas.CANVAS_WIDTH;
+    canvas.height = RemoteCanvas.CANVAS_HEIGHT;
+    var windowWidth = window.innerWidth - 25;
+    var windowHeight = window.innerHeight;
+
+    var ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0,
+                  RemoteCanvas.CANVAS_WIDTH,
+                  RemoteCanvas.CANVAS_HEIGHT);
+    ctx.save();
+    ctx.scale(RemoteCanvas.CANVAS_WIDTH / windowWidth,
+              RemoteCanvas.CANVAS_HEIGHT / windowHeight);
+    ctx.drawWindow(remoteWindow,
+                   0, 0,
+                   windowWidth, windowHeight,
+                   "rgb(255,255,255)");
+    ctx.restore();
+};
+
+ +

使用方法:

+ +
var remoteCanvas = new RemoteCanvas();
+remoteCanvas.load();
+
+ +

画像ファイルを base64 文字列に変換する

+ +

以下のコードはリモートの画像を取得して、Data URI スキーム に変換します。

+ +
var canvas = document.createElement("canvas");
+var ctxt = canvas.getContext("2d");
+function loadImageFile (url, callback) {
+  var image = new Image();
+  image.src = url;
+  return new Promise((accept, reject) => {
+    image.onload = accept;
+    image.onerror = reject;
+  }).then(accept => {
+    canvas.width = this.width;
+    canvas.height = this.height;
+    ctxt.clearRect(0, 0, this.width, this.height);
+    ctxt.drawImage(this, 0, 0);
+    accept(canvas.toDataURL());
+  });
+}
+
+ +

使用方法:

+ +
loadImageFile("myimage.jpg").then(string64 => { alert(string64); });
+
+ +

file タイプの {{HTMLElement("input")}} 要素を使用してローカルファイルの base64 コンテンツを取得したい場合は、FileReader オブジェクトを使用しなければなりません。

diff --git a/files/ja/code_snippets/cookies/index.html b/files/ja/code_snippets/cookies/index.html new file mode 100644 index 0000000000..b5f3b1efc5 --- /dev/null +++ b/files/ja/code_snippets/cookies/index.html @@ -0,0 +1,21 @@ +--- +title: Cookie +slug: Code_snippets/Cookies +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/Cookies +--- +

{{ 英語版章題("Removing all cookies") }} +

+

全てのクッキーを削除する

+

次のコードは Firefox/Seamonkey 上で全てのクッキーを削除する方法を示しています。 +

+
Components.classes["@mozilla.org/cookiemanager;1"]
+          .getService(Components.interfaces.nsICookieManager).removeAll();
+
+


+

+
+
+{{ languages( { "en": "en/Code_snippets/Cookies", "fr": "fr/Extraits_de_code/Cookies", "pl": "pl/Fragmenty_kodu/Ciasteczka" } ) }} diff --git a/files/ja/code_snippets/dialogs_and_prompts/index.html b/files/ja/code_snippets/dialogs_and_prompts/index.html new file mode 100644 index 0000000000..8e727d8453 --- /dev/null +++ b/files/ja/code_snippets/dialogs_and_prompts/index.html @@ -0,0 +1,342 @@ +--- +title: Dialogs and Prompts +slug: Code_snippets/Dialogs_and_Prompts +tags: + - Add-ons + - Extensions + - XUL +translation_of: Archive/Add-ons/Code_snippets/Dialogs_and_Prompts +--- +

+

この記事では、ダイアログボックスを表示・実行するためのコードサンプルを示しています。入門的情報とより多くの議論やサンプルが必要な場合は、chrome コードの中でウィンドウを利用する を参照してください。 +

{{ 英語版章題("Describing dialog windows") }} +

+

ダイアログウィンドウについて

+

{{ 英語版章題("Dialogs in Mozilla") }} +

+

でのダイアログ

+

アプリケーションでダイアログを生成したい場合、XUL ファイルのルートエレメントとして、(通常の <window> でなく) <dialog> を利用します。これにより +

+ +

{{ 英語版章題("Simple dialog code") }} +

+

簡単なダイアログコード

+

以下の XUL コードは 2 つのボタン、OK と Cancel (dialog の buttons="accept,cancel" 属性) を持つ簡単なダイアログを定義します。 +

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
+
+<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	id="..." title="..."
+	buttons="accept,cancel"
+	ondialogaccept="return onAccept();"
+	ondialogcancel="return onCancel();">
+
+<script src="chrome://..."/>
+
+<!-- Content -->
+
+</dialog>
+

onAccept と onCancel 関数をスクリプトに実装するだけです。それらの関数が false 以外の戻り値を返した場合ダイアログは閉じます。 +

{{ 英語版章題("Buttons in

") }} +

+

<dialog> のボタン

+

{{ 英語版章題("Predefined") }} +

+
定義されているもの
+

ダイアログの buttons 属性では次の 6 つのボタン型を利用できます。 +

+ +

これらのボタンに対して、label、accesskey と oncommand を dialog エレメントに buttonlabel<buttonname>, buttonaccesskey<buttonname> や ondialog<buttonname> 属性をいれることにより定義できます。たとえば、Apply ボタンをダイアログに加えたい場合、次のようにします。 +

+
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  id="..."
+  buttons="accept,cancel,extra1"
+  ondialogaccept="onAccept();"
+  ondialogextra1="onApply();"
+  buttonlabelextra1="Apply"
+  buttonaccesskeyextra1="A">
+
+<!-- Content -->
+</dialog>
+
+

<tt>gDialog.getButton(dlgtype);</tt> により定義されているどのボタンのオブジェクトでも得られます。gDialog は <dialog> エレメントで、dlgtype は上の 6 つのボタンタイプのうちの一つです。 +

{{ 英語版章題("Explicit") }} +

+
明示
+

dialog で定義されているボタンのレイアウトに満足できないなら、XUL ファイルに button エレメントを明示的に定義し、dlgtype をそれに追加することが可能です。dlgtype の有効な値は、上にリストされている 6 つのボタンタイプです。 +

dlgtype をもつボタンへ oncommand を導入するかわりに、dialog エレメントの ondialog* 属性を利用してください。これは、ボタンの oncommand はボタンが押されたときにのみ実行されるのに対し、ondialog* ハンドラはキーボード入力や他のイベントの時にも実行されることによります。 +

サンプル: +

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        ondialogaccept="alert('ok!');">
+<hbox>
+  <label value="Hey!"/>
+
+  <spacer flex="1"/>
+  <vbox>
+    <button dlgtype="accept"/>
+    <button dlgtype="cancel"/>
+  </vbox>
+</hbox>
+</dialog>
+

{{ 英語版章題("Default button") }} +

+
既定のボタン
+

Firefox 1.5 以来、defaultButton 属性とプロパティーが <dialog> エレメントに追加されました ({{ Bug(284776) }})。この属性に利用可能な値は上記のボタン名で、デフォルト値は過去のバージョンとの互換性の観点から "accept" です。 +

{{ 英語版章題("Using <dialogheader>") }}</dialogheader> +

+

<dialogheader> を利用する

+

dialogheader エレメントをウィンドウにハンドラを追加するのに利用できます。どのように動作するかについて見たい場合は、Firefox もしくは Thunderbird (v1.0 もしくはそれ以前のみ) のオプション (もしくは設定) ダイアログを見てください。セクションボタンの右側のヘッダは <dialogheader> です。 +

+
<dialogheader title="General" description="whatever"/>
+

注 : このエレメントは <dialog> の中でのみ利用すべきで、他のところでは正常に表示されない可能性があります。(<window> の中でも同様に動作しているようには見えますが。) +

{{ 英語版章題("Links") }} +

+

リンク

+ +

{{ 英語版章題("Passing arguments and displaying a dialog") }} +

+

引数を渡してダイアログを表示する

+

以下のコードはダイアログに独自の引数を渡して、ダイアログの中で利用し、ユーザが変更した値を呼び出し側に戻す方法を紹介します。mydialog.xul というダイアログを開いて、引数を渡すコードは次です。 +

+
var params = {inn:{name:"foo", description:"bar", enabled:true}, out:null};
+  window.openDialog("chrome://myext/chrome/mydialog.xul", "",
+    "chrome, dialog, modal, resizable=yes", params).focus();
+  if (params.out) {
+    // User clicked ok. Process changed arguments; e.g. write them to disk or whatever
+  }
+  else {
+    // User clicked cancel. Typically, nothing is done here.
+  }
+
+

mydialog.xul: +

+
<dialog
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  id="myDialogId"
+  title="My Dialog"
+  ondialogaccept="return onOK();"
+  onload="onLoad();"
+  persist="screenX screenY width height"
+  windowtype="myDialogWindowType">
+
+  <script type="application/x-javascript" src="chrome://myext/content/mydialog.js"/>
+  <grid>
+    <columns><column/><column/></columns>
+    <rows>
+      <row align="center"><label value="Name:"/><textbox id="name"/></row>
+      <row align="center"><label value="Description:"/><textbox id="description"/></row>
+      <row align="center"><spacer/><checkbox id="enabled" label="Check to Enable"/></row>
+    </rows>
+  </grid>
+</dialog>
+
+

mydialog.js: +

+
// ダイアログが表示されるときに一度呼ばれる
+function onLoad() {
+  // 呼び出し側によって渡される引数
+  document.getElementById("name").value = window.arguments[0].inn.name;
+  document.getElementById("description").value = window.arguments[0].inn.description;
+  document.getElementById("enabled").checked = window.arguments[0].inn.enabled;
+}
+
+// ユーザが OK をクリックした時だけに一度実行される
+function onOK() {
+   // 変更した引数を返す
+   // ユーザが cancel をクリックした時は、window.arguments[0].out は null のまま
+   // この関数が呼ばれないので
+   window.arguments[0].out = {name:document.getElementById("name").value,
+        description:document.getElementById("description").value,
+        enabled:document.getElementById("enabled").checked};
+   return true;
+}
+
+

ダイアログにパラメータを渡し、戻り値を受け取る方法 も参照してください。 +

{{ 英語版章題("Displaying the standard \"Open File\"/\"Save File\"/\"Select Folder\" dialogs") }} +

+

標準の "ファイルを開く" / "ファイルを保存する" / "フォルダ選択" ダイアログを表示する

+

nsIFilePicker 参照 +

{{ 英語版章題("Prompts and the prompt service") }} +

+

プロンプトとプロンプトのサービス

+

ここまででダイアログについては理解したと思いますので、プロンプトについて見てみましょう。ダイアログと異なり、独自の XUL を要求しません。しかしながら、このため、カスタマイズ性には劣ります。ウェブ開発者にとっては、alert() 関数でおなじみです。 +

Image:AlertHelloWorld.png +

これがもっとも単純なプロンプトのサンプルです。 +

nsIPromptService は C++ や chrome JavaScript コード (ウェブページの JS ではありません) への XPCOM インターフェースで、いくつかのタイプのダイアログを表示するメソッドを提供します。 +

ファイル・フォルダー選択ダイアログについては、nsIFilePicker を参照してください。 +

nsIPromptService は理解するために重要な 9 つの関数といくつかの定数をもちます。この文書では、これらのうちいくつかについて解説し、すべてについてサンプルを提供します。 +

{{ 英語版章題("Getting nsIPromptService") }} +

+

nsIPromptService を取得する

+

はじめに、メッセージを表示するためのプロンプトサービスを取得する必要があります。これは +

+
var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+
+

として行えます。 +

{{ 英語版章題("nsIPromptService methods") }} +

+

nsIPromptService メソッド

+

{{ 英語版章題("alert()") }} +

+
alert()
+

alert() は最も単純な関数で、単に指定されたタイトルとメッセージでメッセージボックスを表示します。たとえば、 +

+
var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+prompts.alert(window, "Window title", "Hello world!");
+
+

です。 +

他のたくさんの nsIPromptService のメソッドと同じく、最初のパラメータは nsIWindowWatcher.openWindow の 親ウィンドウ です。もし、親ウィンドウが nsIWindowWatcher.activeWindow である場合、null を入れることもできます。 +

{{ 英語版章題("alertCheck()") }} +

+
alertCheck()
+

alertCheck() は指定されたタイトル・文字列・チェックボックスでメッセージボックスを表示します。チェックボックスは、"このメッセージを次から表示しない" オプションか同様のものです。 +

+
var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+check = {value: false}; // default value
+prompts.alertCheck(window, "Window title", "You have been warned",
+                   "Don't ask again", check);
+// do something with check.value;
+
+

チェックボックスの状態の取得方法に注意してください。この関数は check オブジェクトの value メンバーを変更します。そして、結果は check.value で受け取ることになります。これは、XPCOM コンポーネントでのいわゆる "out" パラメータの標準的な取得方法です。 +

{{ 英語版章題("confirm() and confirmCheck()") }} +

+
confirm() と confirmCheck()
+

confirm() も単純です。指定されたタイトル・文字列、そして OK Cancel の二つのボタンを持つダイアログを表示します。 +

+
var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+var result = prompts.confirm(window, "Title", "Do you want to quit?");
+
+

次のものはチェックボックスを持つ確認メッセージを表示するサンプルです。これは、confirm() と alertCheck() の混合で、追加コメント無しに簡単に理解できるでしょう。 +

+
var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+var check = {value: false};
+var result = prompts.confirmCheck(window, "Title", "Do you want to quit?",
+                                  "Do not ask me again", check);
+// do something check.value / result
+
+

{{ 英語版章題("prompt()") }} +

+
prompt()
+

prompt() は非常に重要で、入力を受け付けるさまざまな場面で有用です。XUL ダイアログを準備したり、テキストボックスを追加するかわりに、この関数を呼ぶだけですみます。最初のいくつかの引数は他の関数と同じですが、追加のオブジェクトを要求します。これらのオブジェクトは関数が呼ばれる前に既定の値を設定し、戻ってきたあとは新しい値に変更されています。 +

+
var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+var input = {value: "default value"};
+var check = {value: false};
+result = prompts.prompt(window, "Title", "What's your name?", input, "Do not ask again", check);
+// input.value is the string user entered
+// check.value indicates whether or not the checkbox is checked
+// result - whether user clicked OK (true) or Cancel
+
+

{{ 英語版章題("promptPassword() and promptUsernameAndPassword()") }} +

+
promptPassword() と promptUsernameAndPassword()
+

次のものは、prompt の別のバージョンで、パスワード入力ボックスを持つ promptPassword() と、ユーザ名とパスワード入力ボックスを持つpromptUsernameAndPassword() です。 +

+
//promptPassword
+var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+input = {value:"password"};
+check = {value:false};
+okorcancel = prompts.promptPassword(window, 'title', 'Text', input, 'Check?', check);
+return input.value;
+return check.value;
+return okorcancel;
+
+//promptUsernameAndPassword
+var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+username = {value:"ihoss"};
+password = {value:"password"};
+check = {value:false};
+okorcancel = prompts.promptUsernameAndPassword(window, 'title', 'Text', username, password, 'Check?', check);
+return username.value;
+return password.value;
+return check.value;
+return okorcancel;
+
+

{{ 英語版章題("confirmEx()") }} +

+
confirmEx()
+
var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+var check = {value: false};
+var flags = 0;
+var button = prompts.confirmEx(window, "Window title", "Message text", flags,
+             "Button 0", "Button 1", "Button 2", "Checkbox label", check);
+// |check.value| indicates whether or not the checkbox is checked
+// |button| indicates which button was clicked
+
+

confirmEx() は独自のメッセージを利用可能になるようにカスタマイズ可能な形で設計されています。(必要なら翻訳された) 既定のもしくはコードで設定したラベルを持つ最大で 3 つのボタンと、必要ならチェックボックスも表示できます。もしチェックボックスが必要ないならば、null を 8 番目のパラメータ (チェックボックスのラベル) に与えてください。 +

flags はダイアログにどのボタンを表示するかを決定するフラグです。それぞれのボタンは、タイトルフラグと配置フラグの積で定義されます。 +

+ + + +
ボタン配置フラグボタンタイトルフラグ
BUTTON_POS_0
BUTTON_POS_1
BUTTON_POS_2		BUTTON_TITLE_OK
BUTTON_TITLE_CANCEL
BUTTON_TITLE_YES
BUTTON_TITLE_NO
BUTTON_TITLE_SAVE
BUTTON_TITLE_DONT_SAVE
BUTTON_TITLE_REVERT
BUTTON_TITLE_IS_STRING
+

ボタンには定義されているタイトルも利用可能です。もしくは、BUTTON_TITLE_IS_STRING が指定されれば、ボタンに指定された文字列パラメータが利用されます。 +

flags はボタンの値の和に設定します。 +

どのボタンが表示されるかはプラットフォームによります。ボタンのデフォルトフラグが flags にない場合、ボタン 0 が既定で選択されます。 +

+ + + +
ボタンのデフォルトフラグ
BUTTON_POS_0_DEFAULT
BUTTON_POS_1_DEFAULT
BUTTON_POS_2_DEFAULT
+

たとえば、flags が次のように設定された場合、ダイアログは保存ボタン、キャンセルボタン、そしてタイトルが confirmEx() の 7 番目の引数で指定されるボタンを表示します。(上記のサンプルでは "Button 2" です。) +

+
var flags = prompts.BUTTON_TITLE_SAVE      * prompts.BUTTON_POS_0 +
+            prompts.BUTTON_TITLE_CANCEL    * prompts.BUTTON_POS_1 +
+            prompts.BUTTON_TITLE_IS_STRING * prompts.BUTTON_POS_2;
+
+

flags を STD_OK_CANCEL_BUTTONS もしくは STD_YES_NO_BUTTONS にすれば、OK/Cancel もしくは Yes/No ボタンのセットを表示します。 +

{{ 英語版章題("select()") }} +

+
select()
+

select() はリストボックスと OK/Cancel ボタンを持つダイアログを表示します。リストボックスは、指定されたオプションを表示し、ユーザはそれの一つを選択できます。selected.value にユーザが選択した項目のインデックスが入りますので、list{{ mediawiki.external('selected.value') }} により値を取得できます。4 番目のパラメータは、表示したいエントリの個数で、list アレイの長さと等しいか少なくなるべきです。その値までの個数のアイテムがリストボックスに表示されます。 +

+
var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
+                        .getService(Components.interfaces.nsIPromptService);
+var list = ["ihoss", "internet", "firefox", "xul", "stupid entry", "out of ideas"]
+var selected = {};
+var ok = prompts.select(window, "Window title", "Prompt text",
+                        list.length, list, selected);
+// selected.value contains the index
+// |ok| indicates whether OK or Cancel button was pressed
+
+

{{ 英語版章題("=Original version=") }} +

+
オリジナルバージョン
+

このチュートリアルのオリジナルは、ここ にあります。 +

{{ 英語版章題("=Links=") }} +

+
リンク
+

nsIPromptService +


+

+
+
+{{ languages( { "en": "en/Code_snippets/Dialogs_and_Prompts", "fr": "fr/Extraits_de_code/Dialogues_et_invites", "pl": "pl/Fragmenty_kodu/Okienka_dialogowe" } ) }} diff --git a/files/ja/code_snippets/download_observer/index.html b/files/ja/code_snippets/download_observer/index.html new file mode 100644 index 0000000000..3d9f356b0b --- /dev/null +++ b/files/ja/code_snippets/download_observer/index.html @@ -0,0 +1,59 @@ +--- +title: Download Observer +slug: Code_snippets/Download_Observer +tags: + - MDC Project + - NeedsContent +translation_of: Archive/Add-ons/Code_snippets/Downloading_Files +--- +

Firefox ダウンロードマネージャー用のダウンロード監視サンプル

+
// ******************************
+// DownloadObserver
+// ******************************
+function sampleDownload_init(){
+  //**** ダウンロード監視の追加
+  var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                  .getService(Components.interfaces.nsIObserverService);
+  observerService.addObserver(sampleDownloadObserver, "dl-start", false);
+  observerService.addObserver(sampleDownloadObserver, "dl-done", false);
+  observerService.addObserver(sampleDownloadObserver, "dl-cancel", false);
+  observerService.addObserver(sampleDownloadObserver, "dl-failed", false);
+
+  window.addEventListener("unload", function() {
+    observerService.removeObserver(sampleDownloadObserver, "dl-start");
+    observerService.removeObserver(sampleDownloadObserver, "dl-done");
+    observerService.removeObserver(sampleDownloadObserver, "dl-cancel");
+    observerService.removeObserver(sampleDownloadObserver, "dl-failed");
+  }, false);
+}
+var sampleDownloadObserver = {
+  observe: function (subject, topic, state) {
+    var oDownload = subject.QueryInterface(Components.interfaces.nsIDownload);
+    //**** ダウンロードファイルを持つオブジェクトを取得
+    var oFile = null;
+    try{
+      oFile = oDownload.targetFile;  // New firefox 0.9+
+    } catch (e){
+      oFile = oDownload.target;      // Old firefox 0.8
+    }
+    //**** ダウンロード開始イベント
+    if (topic == "dl-start"){
+      alert('Start download to - '+oFile.path);
+    }
+    //**** ダウンロードキャンセルイベント
+    if(topic == "dl-cancel"){
+      alert('Canceled download to - '+oFile.path);
+    }
+    //**** ダウンロード失敗
+    else if(topic == "dl-failed"){
+      alert('Failed download to - '+oFile.path);
+    }
+    //**** ダウンロード完了
+    else if(topic == "dl-done"){
+      alert('Done download to - '+oFile.path);
+    }
+  }
+}
+window.addEventListener("load", sampleDownload_init, false);
+
+

 

diff --git a/files/ja/code_snippets/file_i_o/index.html b/files/ja/code_snippets/file_i_o/index.html new file mode 100644 index 0000000000..1ac91619f7 --- /dev/null +++ b/files/ja/code_snippets/file_i_o/index.html @@ -0,0 +1,403 @@ +--- +title: File I/O +slug: Code_snippets/File_I_O +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/File_I_O +--- +

+

この文書では、chrome JavaScript 内でローカルのファイル入出力を行う方法について解説しています。 +

ファイルシステムには、Mozilla XPCOM コンポーネント経由でアクセスできます。ローカル I/O のために利用されるコンポーネントのリストは XUL Planet にあります。 +

{{ 英語版章題("Available libraries") }} +

+

利用可能なライブラリ

+

いくつかの I/O に関する XPCOM コンポーネントの JavaScript ラッパが存在します。JSLib や io.js (MonkeeSage が元) を参照してください。io.js モジュールはより小さくて、非常に簡単に利用できます。(簡単なサンプルがモジュール内にあります) +

{{ 英語版章題("Creating a file object (\"opening\" files)") }} +

+

ファイルオブジェクトの作成 (ファイルを "開く")

+
var file = Components.classes["@mozilla.org/file/local;1"]
+                     .createInstance(Components.interfaces.nsILocalFile);
+file.initWithPath("/home");
+
+
+

注意: initWithPath() へ渡すパスは、(<tt>"C:\\Windows"</tt> といった) ネイティブ形式である必要があります。もし、初期化に file:// URI を利用したいならば下を参照してください。 +

+
+
+

注意: initWithPath() / initWithFile() 関数はファイルが存在しなくても例外を投げません。例外は、isDirectory(), moveTo() といったファイルが存在する必要のあるメソッドを読んだ時に投げられます。 +

+
+

{{ 英語版章題("Getting special files") }} +

+

特殊ファイルを取得する

+
// get profile directory
+var file = Components.classes["@mozilla.org/file/directory_service;1"]
+                     .getService(Components.interfaces.nsIProperties)
+                     .get("ProfD", Components.interfaces.nsIFile);
+
+

"ProfD" に入れるべき文字列は以下のものです。(MonkeeSage の I/O モジュールコンポーネントから抜粋) +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
文字列 + 意味 +
ProfD プロファイルディレクトリ +
DefProfRt ユーザの (/root/.mozilla など) +
UChrm  %profile%/chrome +
DefRt  %installation%/defaults +
PrfDef  %installation%/defaults/pref +
ProfDefNoLoc  %installation%/defaults/profile +
APlugns  %installation%/plugins +
AChrom  %installation%/chrome +
ComsD  %installation%/components +
CurProcD (通常) インストールされたディレクトリ +
Home OS ルートディレクトリ (/root など) +
TmpD OS 一時ディレクトリ (/tmp など) +
ProfLD Windows でのローカル設定; ネットワークキャッシュや fastload ファイルの保管場所 +
resource:app XULRunner アプリケーションでのアプリケーションディレクトリ +
+

他の利用可能な文字列に関しては、ソースを見てください : {{ Source("xpcom/io/nsDirectoryServiceDefs.h") }} や {{ Source("xpcom/io/nsAppDirectoryServiceDefs.h") }} +

{{ 英語版章題("Getting your extension\'s folder") }} +

+

あなたの拡張のフォルダーを取得する

+
+

注意: Firefox/Thunderbird 1.5+ で動作します。1.0 では動きません。 +

+
+

拡張がインストールされているディレクトリを取得するには、nsIExtensionManager を次のように呼びます。 +

+
const id = "ID";
+var ext = Components.classes["@mozilla.org/extensions/manager;1"]
+                    .getService(Components.interfaces.nsIExtensionManager)
+                    .getInstallLocation(id)
+                    .getItemLocation(id);
+// ext は nsIFile のインスタンス、ext.path はディレクトリ文字列を保持します
+
+

ID を拡張の ID に置き換えてください。nsIFile に拡張のディレクトリが入って戻ります。この値は読み出し専用です。詳細については、ソースを見てください : {{ Source("toolkit/mozapps/extensions/public/nsIExtensionManager.idl") }} +

JavaScript XPCOM コンポーネント中では、ここ に述べられている特別な __LOCATION__ 変数を利用することもできます。 +ここにあるように、この方法は、より信頼性が高く、Firefox/Thunderbird 1.5+ と 1.0 の両方で動作します。 +

{{ 英語版章題("Creating Folders") }} +

+

フォルダーの作成

+

フォルダーを作成するには、nsIFile.create() を利用します。 +

+
var file = Components.classes["@mozilla.org/file/directory_service;1"]
+                     .getService(Components.interfaces.nsIProperties)
+                     .get("ProfD", Components.interfaces.nsIFile);
+file.append("DIR");
+if( !file.exists() || !file.isDirectory() ) {   // if it doesn't exist, create
+   file.create(Components.interfaces.nsIFile.DIRECTORY_TYPE, 0664);
+}
+
+

上のサンプルは、プロファイルフォルダー の中に "DIR" という名前のフォルダーを作成します。詳細は、nsIFile.create リファレンス を参照してください。 +

{{ 英語版章題("Creating temporary files") }} +

+

一時ファイルの作成

+

一時ファイルを作成するには、nsIFile.createUnique() を利用します。 +

+
var file = Components.classes["@mozilla.org/file/directory_service;1"]
+                     .getService(Components.interfaces.nsIProperties)
+                     .get("TmpD", Components.interfaces.nsIFile);
+file.append("suggestedName.tmp");
+file.createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 0664);
+// 作成したファイルに必要なことを行ってください
+alert(file.path);
+
+

{{ 英語版章題("User input via nsIFilePicker") }} +

+

nsIFilePicker 経由のユーザからの入力

+

ファイル選択コンポーネント (nsIFilePicker) を、標準的なファイルを開く・保存するダイアログを開くのに利用できます。このコンポーネントは、nsIFile でユーザの指定したファイルを返します。 +

{{ 英語版章題("nsIFile and path strings") }} +

+

nsIFile とパス文字列

+

nsIFile.path をプラットフォーム依存のパス文字列を取得するのに利用可能です。たとえば、 <tt>"C:\Windows\System32"</tt> や <tt>"/usr/share"</tt> などです。 +

もし、ファイルの file:// URL や file:// URL から nsIFile を取得したいなら、nsIFileProtocolHandler を利用できます。 +

+
// file is nsIFile
+var ios = Components.classes["@mozilla.org/network/io-service;1"]
+                    .getService(Components.interfaces.nsIIOService);
+var fileHandler = ios.getProtocolHandler("file")
+                     .QueryInterface(Components.interfaces.nsIFileProtocolHandler);
+var URL = fileHandler.getURLSpecFromFile(file);
+
+

file://, http://, chrome://, resource:// や他の URL 形式から直接読み込むには、XMLHttpRequest か nsIChannel を利用してください (サンプル)。 +

一般的には nsIFile::path を利用する必要はありません。可能ならば nsIFile を直接利用してください。以下のサンプルで、ユーザ設定にどのようにパスを保存するかを示しています。 +

{{ 英語版章題("Storing nsILocalFile in preferences") }} +

+

nsILocalFile をオプションに保存する

+

次の二つのコード例は、ファイルパスをユーザのオプションに保存する正しい方法を示しています。(Mozilla でのオプションについての詳細): +

{{ 英語版章題("Absolute path (nsILocalFile)") }} +

+

絶対パス (nsILocalFile)

+

絶対パスをユーザのオプションに保存するには、次のコードを利用します。 +

+
// |file| is nsILocalFile
+// 1. パスを prefs に書き込む
+var prefs = Components.classes["@mozilla.org/preferences-service;1"]
+                      .getService(Components.interfaces.nsIPrefService)
+                      .getBranch("extensions.myext.");
+prefs.setComplexValue("filename", Components.interfaces.nsILocalFile, file);
+
+// 2. prefs からパスを読み込む
+var file = prefs.getComplexValue("filename", Components.interfaces.nsILocalFile);
+
+

{{ 英語版章題("Relative path (nsIRelativeFilePref)") }} +

+

相対パス (nsIRelativeFilePref)

+

プロファイルフォルダーからの相対パスといった、上にリストされているフォルダーを親とする相対パスを保存するには、次のコードを利用します。 +

+
// 1. prefs へ書き込む
+var relFile = Components.classes["@mozilla.org/pref-relativefile;1"]
+                        .createInstance(Components.interfaces.nsIRelativeFilePref);
+relFile.relativeToKey = "ProfD"; // ProfD もしくは上にリストされている文字列
+relFile.file = file;             // |file| is nsILocalFile
+prefs.setComplexValue("filename",
+     Components.interfaces.nsIRelativeFilePref, relFile);
+
+// 2. prefs から読み込む
+var value = prefs.getComplexValue("filename",
+     Components.interfaces.nsIRelativeFilePref);
+// |value.file| is the file.
+
+

{{ 英語版章題("Navigating with nsIFile") }} +

+

nsIFile でナビゲーションを行う

+

{{ 英語版章題("Get a file in given directory") }} +

+

与えられたディレクトリのファイルを取得する

+

file は nsIFile で、なんらかのディレクトリをさしているとします。(ユーザプロファイルディレクトリなど) file.append("myfile.txt"); で、file が同じディレクトリの中の <tt>myfile.txt</tt> をさすようにできます。 +

+
+

注: クロスプラットフォームでないことから、dir.path+"\\"+"myfile.txt" を利用しないでください。((path.search(/\\/) != -1) ? path + "\\" : path + "/") + "myfile.txt"; のようなものも可能ですが、nsIFile.append() がより簡単に読め、Mozilla が動作する全てのプラットフォームで動作が保障されています。 +

+
+

{{ 英語版章題("Enumerating files in given directory") }} +

+

与えられたディレクトリのファイルを表示する

+

以下のコードは、与えられたディレクトリのサブディレクトリやサブファイルの nsIFile の配列を作成します。フォルダーかファイルかは、それぞれの entry で nsIFile.isDirectory() と、nsIFile.isFile() を呼ぶことで判断できます。 +

+
// file は nsIFile のディレクトリです
+var entries = file.directoryEntries;
+var array = [];
+while(entries.hasMoreElements())
+{
+  var entry = entries.getNext();
+  entry.QueryInterface(Components.interfaces.nsIFile);
+  array.push(entry);
+}
+
+

{{ 英語版章題("Reading from a file") }} +

+

ファイルを読み込む

+
+

注: 以下のサンプルコードは non-ASCII 文字を含むテキストを処理できません。詳細とそれらの文字を含むテキストを読む方法については、Reading textual data を参照してください。 +

+
+

{{ 英語版章題("Simple") }} +

+

単純な方法

+
// |file| is nsIFile
+var data = "";
+var fstream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                        .createInstance(Components.interfaces.nsIFileInputStream);
+var sstream = Components.classes["@mozilla.org/scriptableinputstream;1"]
+                        .createInstance(Components.interfaces.nsIScriptableInputStream);
+fstream.init(file, -1, 0, 0);
+sstream.init(fstream);
+
+var str = sstream.read(4096);
+while (str.length > 0) {
+  data += str;
+  str = sstream.read(4096);
+}
+
+sstream.close();
+fstream.close();
+alert(data);
+
+

{{ 英語版章題("Line by line") }} +

+

行ごとに

+
// file から入力ストリームを開く
+var istream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                        .createInstance(Components.interfaces.nsIFileInputStream);
+istream.init(file, 0x01, 0444, 0);
+istream.QueryInterface(Components.interfaces.nsILineInputStream);
+
+// 行を配列に読み込む
+var line = {}, lines = [], hasmore;
+do {
+  hasmore = istream.readLine(line);
+  lines.push(line.value);
+} while(hasmore);
+
+istream.close();
+
+// データで何かする
+alert(lines);
+
+

{{ 英語版章題("Asynchronously") }} +

+

非同期

+

以下のサンプルでファイルを UI スレッドとは独立に読み込めます。 +

+
// |file| is nsIFile
+var ios = Components.classes["@mozilla.org/network/io-service;1"]
+                    .getService(Components.interfaces.nsIIOService);
+var fileURI = ios.newFileURI(file);
+var channel = ios.newChannelFromURI(fileURI);
+var observer = {
+  onStreamComplete : function(aLoader, aContext, aStatus, aLength, aResult)
+  {
+    alert(aResult);
+  }
+};
+var sl = Components.classes["@mozilla.org/network/stream-loader;1"]
+                   .createInstance(Components.interfaces.nsIStreamLoader);
+sl.init(channel, observer, null);
+
+

{{ 英語版章題("Binary File") }} +

+

バイナリファイル

+

単純な例として、PNG ファイルのデータの取得方法 +

+
var ios = Components.classes["@mozilla.org/network/io-service;1"]
+                    .getService(Components.interfaces.nsIIOService);
+var url = ios.newURI(aFileURL, null, null);
+
+if (!url || !url.schemeIs("file")) throw "Expected a file URL.";
+
+var pngFile = Components.classes["@mozilla.org/file/local;1"]
+                        .createInstance(Components.interfaces.nsILocalFile);
+pngFile.initWithPath(url.path);
+
+var istream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                        .createInstance(Components.interfaces.nsIFileInputStream);
+istream.init(pngFile, -1, -1, false);
+
+var bstream = Components.classes["@mozilla.org/binaryinputstream;1"]
+                        .createInstance(Components.interfaces.nsIBinaryInputStream);
+bstream.setInputStream(istream);
+
+var bytes = bstream.readBytes(bstream.available());
+
+

{{ 英語版章題("Writing to a file") }} +

+

ファイルに書き出す

+
+

'注: このコードは国際化されていません。non-ASCII文字列では、正常に動作しません。国際化については、Writing textual data を参照してください。 +

+
+
// file は nsIFile、data は文字列
+var foStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
+                         .createInstance(Components.interfaces.nsIFileOutputStream);
+
+// ファイル追記の際は、0x02 | 0x10 を使う
+foStream.init(file, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate
+foStream.write(data, data.length);
+foStream.close();
+
+

nsIFileOutputStream::init() 関数のフラグパラメータは次のようなものです。 +(詳細は {{ Source("nsprpub/pr/include/prio.h") }} を参照してください) +

フラグ: ファイルステータスフラグです。以下のBITフラグの bit ごとの OR を利用します。(最初の三つについては、どれか一つを利用します) +

+ + + + + + + + + + + + + + + + + + +
名前 値 説明 +
PR_RDONLY 0x01 読み込み専用 +
PR_WRONLY 0x02 書き出し専用 +
PR_RDWR 0x04 読み書き両方 +
PR_CREATE_FILE 0x08 +

ファイルが存在しないならば作成する。ファイルがあれば何もしない。 +

+
PR_APPEND 0x10 +

書き込みごとにファイルポインタはファイルの最後にセットされます。(追記モード) +

+
PR_TRUNCATE 0x20 +

ファイルが存在すれば、長さを 0 にします。 +

+
PR_SYNC 0x40 +

書き込みごとにファイルデータとステータスが物理的にアップデートされるのを待ちます。 +

+
PR_EXCL 0x80 +

PR_CREATE_FILE と一緒に利用された場合、ファイルが存在しなければ作成されます。 +ファイルが存在すれば、NULL を返してなにもしません。 +

+
+

{{ 英語版章題("Writing a Binary File") }} +

+

バイナリファイルを書き込む

+

例として、PNG データをファイルに書き込むサンプルです。 +

+
// pngBinary は既に存在する
+var aFile = Components.classes["@mozilla.org/file/local;1"]
+                      .createInstance(Components.interfaces.nsILocalFile);
+
+aFile.initWithPath( "/tmp/mypicture.png" );
+aFile.createUnique( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 600);
+
+var stream = Components.classes["@mozilla.org/network/safe-file-output-stream;1"]
+                       .createInstance(Components.interfaces.nsIFileOutputStream);
+stream.init(aFile, 0x04 | 0x08 | 0x20, 664, 0); // write, create, truncate
+
+stream.write(pngBinary, pngBinary.length);
+if (stream instanceof Components.interfaces.nsISafeOutputStream) {
+    stream.finish();
+} else {
+    stream.close();
+}
+
+

{{ 英語版章題("More") }} +

+

発展

+

nsIFile と nsILocalFile インターフェースにはよりたくさんのメソッドとプロパティーがありますので、 +XUL Planet のドキュメントを参照してください。これらのメソッド・プロパティーは大半が一目瞭然ですので、ここにはサンプルを入れていません。 +

+
+
+{{ languages( { "en": "en/Code_snippets/File_I//O", "fr": "fr/Extraits_de_code/Fichiers_E//S", "pl": "pl/Fragmenty_kodu/Plik_I//O" } ) }} diff --git a/files/ja/code_snippets/finding_window_handles/index.html b/files/ja/code_snippets/finding_window_handles/index.html new file mode 100644 index 0000000000..faab6e4c99 --- /dev/null +++ b/files/ja/code_snippets/finding_window_handles/index.html @@ -0,0 +1,48 @@ +--- +title: Finding Window Handles +slug: Code_snippets/Finding_Window_Handles +tags: + - Add-ons + - Extensions + - XPCOM +translation_of: Archive/Add-ons/Code_snippets/Finding_Window_Handles +--- +

Windows プラットフォーム上での開発では、さまざまな API やフレームワークが、ウィンドウハンドル (HWND 型) を要求します。Mozilla は出来る限りクロスプラットフォームになるように努力していますが、必要なハンドルを取得するのは難しいです。

+
+

{{ gecko_callout_heading("2.0") }}

+

Gecko 2.0 {{ geckoRelease("2.0") }} から、最上位のブラウザウィンドウだけが HWND をもつようになりました。（タブの中の）Web コンテンツウィンドウは、それ自身の HWND を持つことはありません。一般に最上位のブラウザウィンドウの HWND は子供を持ちませんが、(Flash のような) ウィンドウモードのプラグインは、最上位のブラウザウィンドウの HWND を親とする HWND を持ちます。

+
+

Mozilla のウィンドウハンドルへアクセスするためのいくつかの簡単なコードを紹介します。このコードは外部アプリケーションや拡張で利用されている XPCOM コンポーネントからのためのものです。

+

{{ 英語版章題("Finding the content window handle") }}

+

コンテントのウィンドウハンドルを取得する

+
 HWND hContent = 0;
+
+ // メインのブラウザウィンドウを探す必要があります
+ HWND hFF = ::FindWindowEx(0, 0, "MozillaUIWindowClass", 0);
+ if (hFF) {
+    // 次に固定された構造にしたがって降りて行きます
+    HWND hTemp;
+    hTemp = ::FindWindowEx(hFF, 0, "MozillaWindowClass", 0);
+    hTemp = ::FindWindowEx(hTemp, 0, "MozillaWindowClass", 0);
+
+    // このレベルにあるうち一つのウィンドウだけが子を持つと仮定します
+    // そしてその一つの子がわれわれが必要なものです
+    HWND hChild = ::GetWindow(hTemp, GW_CHILD);
+    while (hTemp && !hChild) {
+      hTemp = ::GetWindow(hTemp, GW_HWNDNEXT);
+      hChild = ::GetWindow(hTemp, GW_CHILD);
+    }
+
+    // 子を持つウィンドウを発見したか？
+    // その子はコンテントウィンドウのはず
+    if (hTemp) {
+      hTemp = ::GetWindow(hTemp, GW_CHILD);
+      hContent = ::FindWindowEx(hTemp, 0, "MozillaContentWindowClass", 0);
+    }
+ }
+
+ // この時点で hContent は NULL もしくは、コンテントウィンドウの HWND です
+
+
+

ウィンドウ構造に関する仮定がどの程度危険かは分かりませんが、SPY++ で得た値とは一致しました。

+

{{ languages( { "en": "en/Code_snippets/Finding_Window_Handles", "fr": "fr/Extraits_de_code/Trouver_les_gestionnaires_de_fen\u00eatres" } ) }}

diff --git a/files/ja/code_snippets/index.html b/files/ja/code_snippets/index.html new file mode 100644 index 0000000000..061d10a727 --- /dev/null +++ b/files/ja/code_snippets/index.html @@ -0,0 +1,131 @@ +--- +title: Code snippets +slug: Code_snippets +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets +--- +

ここにあるのは、さまざまな Mozilla アプリケーションの拡張開発者にとって有益なコードの切れ端 (小さなコードの例) のリストです。これらのうちのかなりのものが XULRunner アプリケーションや Mozilla のコード自体でも利用されています。

+

これらの例は一見しただけではわからない基本的な課題を解決する方法を示します。

+

{{ 英語版章題("General") }}

+

一般

+
+
+ ウィンドウ用コード
+
+ ウィンドウを開くことと操作
+
+
+
+ ツールバー
+
+ ツールバー関係のコード
+
+
+
+ XML
+
+ XML をパース、書き出し、操作するためのコード
+
+
+
+ File I/O
+
+ ファイルを読み書き、処理するためのコード
+
+
+
+ Dialogs
+
+ ダイアログボックスを表示、処理するためのコード
+
+
+
+ オプション
+
+ オプションを読み書き、変更するためのコード
+
+
+
+ JS XPCOM
+
+ JavaScript でカスタム XPCOM コンポーネントを定義し、呼び出すためのコード
+
+
+
+ アプリケーションの実行
+
+ 外部アプリケーションを実行するためのコード
+
+
+
+ <canvas> 関係
+
+ WHAT WG Canvas 関係のコード
+
+
+
+ XPI への署名
+
+ PKI で XPI へ署名する方法
+
+
+
+ 色々
+
+ 便利な様々なコードの断片
+
+

{{ 英語版章題("Browser-oriented code") }}

+

ブラウザ指向のコード

+
+
+ タブブラウザ用コード (Firefox/SeaMonkey)
+
+ Mozilla のブラウザアプリケーションの核心であるタブブラウザの基本的な操作
+
+
+
+ Cookie
+
+ cookie の読み出し、書き込み、変更、削除
+
+
+
+ ページの読み込み
+
+ ページを読み込み、再読み込み、そしてページ読み込みを監視するコード
+
+
+
+ 特権コードと非特権コードの協調
+
+ 拡張とウェブサイト間などの通信方法
+
+
+
+ ダウンロード監視
+
+ Firefox ダウンロード・マネージャ用のダウンロード監視を行うオブザーバのサンプル
+
+

{{ 英語版章題("Windows-specific") }}

+

Windows 特有

+
+
+ Window ハンドルを取得する (HWND) (Firefox)
+
+ さまざまな Mozilla window ハンドルを取得するために Windows API を利用する方法。Window ハンドルは IPC やアクセシビリティ機能の目的に利用できます。
+
+
+
+ XPCOM で Windows レジストリを使う
+
+ レジストリキーと値を読み書き、修正、削除、列挙、監視する方法。
+
+

{{ 英語版章題("External links") }}

+

外部リンク

+

MozillaZine サンプルコード の内容が、ここに徐々に移動されつつありますが、まだ今のうちは有益なサンプルを見つけることができるでしょう。

+

 

+
+  
+

{{ languages( { "en": "en/Code_snippets", "fr": "fr/Extraits_de_code", "ko": "ko/Code_snippets", "pl": "pl/Fragmenty_kodu" } ) }}

diff --git a/files/ja/code_snippets/interaction_between_privileged_and_non-privileged_pages/index.html b/files/ja/code_snippets/interaction_between_privileged_and_non-privileged_pages/index.html new file mode 100644 index 0000000000..45df9cbd8c --- /dev/null +++ b/files/ja/code_snippets/interaction_between_privileged_and_non-privileged_pages/index.html @@ -0,0 +1,69 @@ +--- +title: Interaction between privileged and non-privileged pages +slug: Code_snippets/Interaction_between_privileged_and_non-privileged_pages +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages +--- +

 

+ +

データを非特権ドキュメントから chrome へ送る

+ +

ウェブページから拡張機能へデータを送るのに簡単な方法は、カスタム DOM イベントを利用する方法です。あなたの拡張機能の browser.xul オーバーレイで、カスタム DOM イベントをリッスンするコードを書いてください。この例ではイベントに MyExtensionEvent という名前を付けます。

+ +
var myExtension = {
+  myListener: function(evt) {
+    alert("Received from web page: " +
+          evt.target.getAttribute("attribute1") + "/" +
+          evt.target.getAttribute("attribute2"));
+  }
+}
+document.addEventListener("MyExtensionEvent", function(e) { myExtension.myListener(e); }, false, true);
+
+ +

ウェブページ (非特権コード) からのデータは、attribute1 と attribute2 の値です。alert() をリスナの中でトリガし、データをウェブページから送るには、ウェブページに次のようなコードを書いてください。

+ +
if ("createEvent" in document) {
+  var element = document.createElement("MyExtensionDataElement");
+  element.setAttribute("attribute1", "foobar");
+  element.setAttribute("attribute2", "hello world");
+  document.documentElement.appendChild(element);
+
+  var evt = document.createEvent("Events");
+  evt.initEvent("MyExtensionEvent", true, false);
+  element.dispatchEvent(evt);
+}
+
+ +

このコードは、<MyExtensionDataElement/> のように自由な名前の要素を作成し、ウェブページの DOM に挿入します。値は、要素の中の二つの属性に設定されています。名前はあなたの自由につけられますが、ここでは attribute1 と attribute2 を選びました。最後に、コードは MyExtensionEvent というカスタムイベントを作成し、発行 (dispatch)します。これは、onclick ハンドラでキャッチできる標準の DOM click イベントと同じようなものです。イベントはウェブページから浮上 (bubble up)し、拡張機能 (特権コード) に到達し、あなたのリスナがキャッチ、イベントが発生した DOM 要素から属性値を読み出します。

+ +

あなたの拡張機能のオーバーレイが browser.xul と直接やり取りできない場合、例えば サイドバー内にある場合は、以下のようにすれば簡単にトップレベルドキュメントにイベントリスナを追加できます。 (子ウィンドウからトップレベルドキュメントの要素にアクセスする も参照してください)

+ +
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                  .getInterface(Components.interfaces.nsIWebNavigation)
+                  .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
+                  .rootTreeItem
+                  .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                  .getInterface(Components.interfaces.nsIDOMWindow);
+mainWindow.document.addEventListener("MyExtensionEvent", function(e) { myExtension.myListener(e); }, false, true);
+
+ +

もし、大量のデータを渡す必要があるならば、独自要素の単なる属性ではなく、CDATA セクションを利用することを検討してください。

+ +

chrome から非特権ドキュメントへデータを送る

+ +

ウェブページに (リターンコードなどの) 答えを返すには、拡張機能からイベントターゲット要素 (サンプルでは <MyExtensionDataElement/>) に属性を設定するか、子要素を追加します。

+ +

作成した要素は削除してもかまいませんし、ウェブページが読み込まれる時に一度だけ作成し、そのつど再利用するのも良いでしょう。

+ +

セキュリティーノート

+ + + +

資料

+ +

Mozillazine Forum での議論

diff --git a/files/ja/code_snippets/js_xpcom/index.html b/files/ja/code_snippets/js_xpcom/index.html new file mode 100644 index 0000000000..6e1b257c99 --- /dev/null +++ b/files/ja/code_snippets/js_xpcom/index.html @@ -0,0 +1,115 @@ +--- +title: JS XPCOM +slug: Code_snippets/JS_XPCOM +translation_of: Archive/Add-ons/Code_snippets/JS_XPCOM +--- +

 

+

JavaScript で XPCOM コンポーネントを利用するためのいくつかの有用なコードを示します。

+

{{ 英語版章題("Contract IDs") }}

+

コンタクト ID

+

コンタクト ID は XPCOM オブジェクトの固有の名前になります。XPCOM で既知のオブジェクトを作成もしくはアクセスするときに利用します。

+

{{ 英語版章題("Interfaces") }}

+

インターフェース

+

全ての XPCOM オブジェクトは、一つ以上のインターフェースをもちます。インターフェースは簡単には、nsIFile のようなオブジェクト上で呼び出せる定数やメソッドのリストです。全ての XPCOM オブジェクトは、nsISupports インターフェースを実装していなければなりません。

+

{{ 英語版章題("Accessing XPCOM components from JavaScript") }}

+

JavaScript から XPCOM コンポーネントにアクセスする

+

XPCOM オブジェクトは新規インスタンスとして作成 (完全に新しいオブジェクトが戻ります) するか、もしくはサービスとして作成 (同じオブジェクトが戻ります。シングルトンと呼ばれてもいます。) することが可能です。新しいインスタンスとして作成するかサービスとしてアクセスするかはオブジェクトに依存します。XPCOM オブジェクトを取得するには、オブジェクトのコンタクト ID と呼び出したいインターフェースを知っておく必要があります。

+

{{ 英語版章題("Creating an instance of a component") }}

+

コンポーネントのインスタンスを作成する

+
var component = Components.classes["@mozilla.org/file/local;1"]
+                          .createInstance(Components.interfaces.nsIFile);
+
+

このコードにより、コンタクト ID が @mozilla.org/file/local;1 のオブジェクトへの新しいインスタンスが生成され、nsIFile インターフェースの全てのメソッドを呼ぶことができます。

+

{{ 英語版章題("Getting an XPCOM service") }}

+

XPCOM サービスを取得する

+
var preferences = Components.classes["@mozilla.org/preferences-service;1"]
+                            .getService(Components.interfaces.nsIPrefService);
+
+

このコードにより、設定オブジェクトの nsIPrefService インターフェースの全てのメソッドを呼ぶことができます。

+

{{ 英語版章題("Getting a different interface for a component") }}

+

コンポーネントの別のインターフェースを取得する

+

コンポーネントによっては一つ以上のインターフェースを自走しています。時によっては JavaScript はコンポーネントに存在する全てのインターフェースを認識するほど賢いですが、ほとんどの場合はあなたがインターフェースをチェックする必要があります。先ほどの設定サービスのサンプルでは次のように調べます。

+
preferences = preferences.QueryInterface(Components.interfaces.nsIPrefBranch2);
+
+

このコードにより、nsIPrefBranch2 インターフェースのメソッドを利用できるようになります。

+

{{ 英語版章題("Implementing XPCOM components in JavaScript") }}

+

XPCOM コンポーネントを JavaScript で実装する

+

JavaScript による XPCOM コンポーネントの簡単なサンプルです。利用するためには、次のことをする必要があります。

+ +
function ExampleComponent()
+{
+        // コンポーネントの初期化コードはここに追加
+}
+
+ExampleComponent.prototype = {
+QueryInterface: function(iid)
+{
+	if (iid.equals(Components.interfaces.myInterface)
+		|| iid.equals(Ci.nsISupports))
+	{
+		return this;
+	}
+	else
+	{
+		throw Components.results.NS_ERROR_NO_INTERFACE;
+	}
+}
+};
+
+var initModule =
+{
+	ServiceCID: Components.ID("{examplee-xamp-leex-ampl-eexampleexam}"),  // quote の中に guid を追加
+	ServiceContractID: "@example.com/example;1",                          // quote の中にコンタクト ID を挿入
+	ServiceName: "",                                                      // quote の中に名前を挿入
+
+	registerSelf: function (compMgr, fileSpec, location, type)
+	{
+		compMgr = compMgr.QueryInterface(Ci.nsIComponentRegistrar);
+		compMgr.registerFactoryLocation(this.ServiceCID,this.ServiceName,this.ServiceContractID,
+			fileSpec,location,type);
+	},
+
+	unregisterSelf: function (compMgr, fileSpec, location)
+	{
+		compMgr = compMgr.QueryInterface(Ci.nsIComponentRegistrar);
+		compMgr.unregisterFactoryLocation(this.ServiceCID,fileSpec);
+	},
+
+	getClassObject: function (compMgr, cid, iid)
+	{
+		if (!cid.equals(this.ServiceCID))
+			throw Components.results.NS_ERROR_NO_INTERFACE
+		if (!iid.equals(Components.interfaces.nsIFactory))
+			throw Components.results.NS_ERROR_NOT_IMPLEMENTED;
+		return this.instanceFactory;
+	},
+
+	canUnload: function(compMgr)
+	{
+		return true;
+	},
+
+	instanceFactory:
+	{
+		createInstance: function (outer, iid)
+		{
+			if (outer != null)
+				throw Components.results.NS_ERROR_NO_AGGREGATION;
+			return new ExampleComponent().QueryInterface(iid);
+		}
+	}
+}; //Module
+
+function NSGetModule(compMgr, fileSpec)
+{
+	return initModule;
+}
+
+

 

+

 

+ +

{{ languages( { "en": "en/Code_snippets/JS_XPCOM", "fr": "fr/Extraits_de_code/JS_XPCOM", "pl": "pl/Fragmenty_kodu/JS_XPCOM" } ) }}

+ +

 

+

<hints id="hah_hints"/>

diff --git a/files/ja/code_snippets/miscellaneous/index.html b/files/ja/code_snippets/miscellaneous/index.html new file mode 100644 index 0000000000..3cdf54a37e --- /dev/null +++ b/files/ja/code_snippets/miscellaneous/index.html @@ -0,0 +1,328 @@ +--- +title: Miscellaneous +slug: Code_snippets/Miscellaneous +tags: + - Add-ons + - Code + - Code snippets + - Extensions + - Snippets +translation_of: Archive/Add-ons/Code_snippets/Miscellaneous +--- +

このページは、小さく、見ればすぐわかるようなコード片を載せています。

+ +

ウェブページをローカルファイルに保存する

+

次のコードはユーザにファイル名を入力するように聞いてきませんが、それは ファイルピッカーコンポーネント を使用することで可能です。

+ +
var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
+
+file.initWithPath("C:\\filename.html");
+
+var wbp = Components.classes['@mozilla.org/embedding/browser/nsWebBrowserPersist;1']
+  .createInstance(Components.interfaces.nsIWebBrowserPersist);
+wbp.saveDocument(content.document, file, null, null, null, null);
+
+ +

Downloading Files も見てください。

+

任意のURLをローカルファイルに保存する

+ +
var file = Components.classes["@mozilla.org/file/local;1"]
+                     .createInstance(Components.interfaces.nsILocalFile);
+
+file.initWithPath("C:\\filename.html");
+
+var wbp = Components.classes['@mozilla.org/embedding/browser/nsWebBrowserPersist;1']
+                    .createInstance(Components.interfaces.nsIWebBrowserPersist);
+var ios = Components.classes['@mozilla.org/network/io-service;1']
+                    .getService(Components.interfaces.nsIIOService);
+var uri = ios.newURI("http://www.google.com/", null, null);
+
+wbp.saveURI(uri, null, null, null, null, file);
+
+ + +

Downloading Files も見てください。

+

オペレーティングシステムを検出する

+ +
// Windows Vista, XP, 2000, NT では "WINNT" が返る。
+// GNU/Linux では "Linux" 。Mac OS X では "Darwin" が返る。
+var osString = Components.classes["@mozilla.org/xre/app-info;1"]
+                         .getService(Components.interfaces.nsIXULRuntime).OS;
+
+ + +

nsIXULRuntime が手に入らないケース (古い SeaMonkey のバージョン) では、 nsIHttpProtocolHandler.oscpu か {{domxref("window.navigator.oscpu","navigator.oscpu")}} を使うことができます:

+ +
Components.classes["@mozilla.org/network/protocol;1?name=http"]
+          .getService(Components.interfaces.nsIHttpProtocolHandler).oscpu;
+ + +

ホストアプリケーションとそのバージョンを検出する

+ +
var info = Components.classes["@mozilla.org/xre/app-info;1"].getService(Components.interfaces.nsIXULAppInfo);
+// このコードを実行しているアプリケーションの名前を取得する
+info.name; // Firefox では "Firefox" が返る
+info.version; // Firefox バージョン 2.0.0.1 では "2.0.0.1" が返る
+
+ + +

拡張機能の install.rdf に記載されたその拡張機能のバージョンを読み出す

+ +
var em = Components.classes["@mozilla.org/extensions/manager;1"]
+                   .getService(Components.interfaces.nsIExtensionManager);
+
+// extension-guid@example.org をバージョンを読み出したい拡張機能の GUID に変更すること
+// 例えば FoxyProxy なら foxyproxy@eric.h.jung
+var addon = em.getItemForID("extension-guid@example.org");
+var version = addon.version;
+
+ +

入力ストリームから出力ストリームにコピーする

+ +
// istream は nsIInputStream、ostream は nsIOutputStream
+
+// 出力ストリームを機能させるにはバッファリングする必要がある
+var bostream = Components.classes["@mozilla.org/network/buffered-output-stream;1"]
+                    .createInstance(Components.interfaces.nsIBufferedOutputStream);
+bostream.init(ostream, 0x8000);
+
+// 入力ストリームから読み込むためにストリームポンプとストリームリスナを用意する
+var pump = Components.classes["@mozilla.org/network/input-stream-pump;1"]
+                     .createInstance(Components.interfaces.nsIInputStreamPump);
+pump.init(istream, -1, -1, 0, 0, true);
+
+/* ファイルを閉じるべきタイミングを知るために独自のオブザーバが必要 */
+var observer = {
+  onStartRequest: function(aRequest, aContext) {},
+  onStopRequest: function(aRequest, aContext, aStatusCode) {
+    bostream.close();
+  }
+};
+
+// 出力ストリームに書き出すためにシンプルストリームリスナを用意する
+var listener = Components.classes["@mozilla.org/network/simple-stream-listener;1"]
+                         .createInstance(Components.interfaces.nsISimpleStreamListener);
+listener.init(bostream, observer);
+
+// コピー開始
+pump.asyncRead(listener, null);
+
+

Firefox/Thunderbird を再起動する

+ +

アプリケーションを再起動する単純な方法を提供することで、 {{Bug(338039)}}は改善しています。

+

マウス、キーイベントをシミュレートする

+

nsIDOMWindowUtils インタフェースにはマウスイベントやキーイベントをシミュレートするための有用なメソッドがあります。

+

Firefox 3 / Gecko 1.9 の新機能

+ + +
var req = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor);
+var utils = req.getInterface(Components.interfaces.nsIDOMWindowUtils);
+
+utils.sendMouseEvent("mousedown", 10, 10, 0, 1, 0);
+utils.sendMouseEvent("mouseup", 10, 10, 0, 1, 0);
+
+ +

貧弱な難読化

+

このコードは幾分敏感なデータ（例えば拡張機能のパスワード）をぱっと見では発見できないようにするための小細工です。一見ちんぷんかんぷんですが、これは簡単に破られてしまいます。パスワードの保存については、 このドキュメント が nsIPasswordManager の使用について説明しています。

+
function encrypt(val) {
+	num_out = "";
+	if(val == "") {
+		return "";
+	}else {
+		str_in = escape(val);
+		for(i = 0; i < str_in.length; i++) {
+			num_out += str_in.charCodeAt(i) - 23;
+		}
+		return unescape(num_out);
+	}
+}
+
+function decrypt(val) {
+	str_out = "";
+	if(val == "") {
+		return "";
+	} else {
+		num_out = val;
+		for(i = 0; i < num_out.length; i += 2) {
+			num_in = parseInt(num_out.substr(i,[2])) + 23;
+			num_in = unescape('%' + num_in.toString(16));
+			str_out += num_in;
+		}
+		return str_out;
+	}
+}
+
+
+

マウスホイールイベントの検出

+

エレメント上でマウスホイールを回転させたとき、 DOMMouseScroll イベントが起こります。 event.detail はスクロールした行の数を含みます。このイベントは Mozilla オンリーです。他のブラウザでは window.onmousewheel をサポートしているかもしれません。

+ 
<div id="scrollArea" style="overflow: scroll; height: 6em; width: 10em;">
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+	This is the scrolling area.
+</div>
+
+<script type="text/javascript">
+	var elm = document.getElementById("scrollArea");
+	elm.addEventListener("DOMMouseScroll", function scroll(event){
+		//event.detail は下へスクロールしたとき正、上へスクロールしたとき負です。
+		alert("scrolling " + event.detail + " lines");
+	}, false);
+</script>
+

もし何か修飾キー(Ctrl,Shift,Alt,Meta)を押しているときは DOMMouseScroll イベントを受け取れないなら、 mousewheel.withcontrolkey.action と関連するプリファレンスをチェックするべきです。 action のプリファレンスの意味は下のテーブルに書かれています。

+ + + + + + + + + + + + + + + + + + + + + + + +
mousewheel.withXXXkey.actionResult
0行ごとにスクロール。これにセットされているとき、 DOMMouseScroll イベントを受け取る。
1ページごとにスクロール。
2履歴の中を動く。これにセットされているとき、 DOMMouseScroll イベントを受け取らない。
3テキストサイズを変更する。これにセットされているとき、 DOMMouseScroll イベントを受け取らない。
+

ふつうのクリックイベントと同じように、マウスホイールクリックイベントをリスンすることができます。マウスホイールがクリックされたとき、 event.button は 2 と等しくなります。

+
+
+

カーソルの位置にテキストを挿入する

+ 
function insertText(element, snippet) {
+  var selectionEnd = element.selectionStart + snippet.length;
+  var currentValue = element.value;
+
+  var beforeText = currentValue.substring(0, element.selectionStart);
+  var afterText = currentValue.substring(element.selectionEnd, currentValue.length);
+
+  element.value = beforeText + snippet + afterText;
+  element.focus();
+
+  //挿入したテキストの後にカーソルを置く
+  element.setSelectionRange(selectionEnd, selectionEnd);
+}
+
+insertText(window.content.document.getElementById("example"), "the text to be inserted");
+
+
+
+

上記コードは、フォーム内の<input type="text" id="example">内に記載されたテキストに文字を追記するコードです。

+

何も無い<div id="example">テキスト</div>等に追加されるわけではありません。

+

現在選択されているテキストを取得

+

browser.xul にオーバーレイしている状況で、

+ 
var selectedText = document.commandDispatcher.focusedWindow.getSelection().toString();
+

も見てください。

+
+
+

プログラムから JavaScript を無効化する

+ 
// browser.xul から現在のアクティブなタブでJSを無効化する
+getBrowser().docShell.allowJavascript = false;
+
+

もしこれがあなたのブラウザでないなら、値を保存し、終了したとき復元するべきです。もしそのURI上の選択されているスクリプトをブロックしたいなら、 nsIContentPolicy を実行します。

+
+
+

ロードされたドキュメントでどの要素がフォーカスを持っているのか見つける

+ 
// focussedControl はフォーカスされている領域を記憶し、何もないときは null になります。
+// 単純のためテキストエリアは除外していますが、 onPageLoad() はテキストエリアも同様に調べるように
+// 簡単に修正できます。さらなる強化では、動的にページに加えられた（例えばページのjavascriptによって）
+// フィールドの取り扱いを含めることができます。
+
+var focussedControl;
+
+window.addEventListener("load", function(e) { onWindowLoad(e); }, false);
+
+function onWindowLoad() {
+  addEventListener("load", onPageLoad, true);
+}
+
+function onPageLoad() {
+  var pageDoc = document.commandDispatcher.focusedWindow.document;
+  var inputList = pageDoc.getElementsByTagName('input');
+
+  for (var i = 1; i < inputList.length; i++) {
+    inputList.item(i).
+      addEventListener("focus", function(e) {onFocusInput(e);}, false);
+    inputList.item(i).
+      addEventListener("blur", function(e) {onBlurInput(e);}, false);
+  }
+}
+
+function onFocusInput(focusEvent) {
+  focussedControl = focusEvent.originalTarget;
+}
+
+function onBlurInput(blurEvent) {
+  focussedControl = null;
+}
+
+
+
+

拡張機能が無効化/アンインストールされる前に通知を受け取る

+

xulplanet entry on global notifications

+ +

この通知は拡張機能が無効化されるとき、ただし実際に無効化される前に伝わります。ユーザは再起動の前にその動作を取りやめることができます。その場合、拡張機能は無効化されません。この通知を受け取ったとき、フラグをセットし（そしてユーザが動作をキャンセルしたときは外し）、終了の時に掃除することができます。欠点はFirefoxが不適切に終了したときコードが実行されないということです。

+

アイテムIDを読み取ってあなたの拡張機能に対してだけコードを実行するようにすべきです。

+
+

JavaScript から文字列バンドルを使う

+

拡張機能が次のような設定名/値のペアを持った myext.properties を持っているとします:

+
 invalid.url=The speficied URL, %S, is invalid. That was attempt number %S.
+

これらのプロパティは JavaScript から次のようにアクセスできます:

+ +
var common = {
+
+  _bundle: Components.classes["@mozilla.org/intl/stringbundle;1"]
+    .getService(Components.interfaces.nsIStringBundleService)
+    .createBundle("chrome://myext/locale/myext.properties"),
+
+  getLocalizedMessage: function(msg) {
+    return this._bundle.GetStringFromName(msg);
+  }
+};
+
+alert(common.getLocalizedMessage("invalid.url"));
+
+
+

もう一つの似た代替方法 (GetStringFromName と formatStringFromName の両方を使う)は:

+ +
var fcBundle = Components.classes["@mozilla.org/intl/stringbundle;1"]
+						.getService(Components.interfaces.nsIStringBundleService)
+						.createBundle("chrome://myext/locale/myext.properties");
+
+function getStr(msg, args){ //get localised message
+	if (args) {
+       args = Array.prototype.slice.call(arguments, 1);
+       return fcBundle.formatStringFromName(msg,args,args.length);
+	} else {
+		return fcBundle.GetStringFromName(msg);
+	}
+}
+
+/* Usage */
+alert(getStr("invalid.url", "http://bad/url/", "3")); //パラメータ付きのメッセージ
+alert(getStr("invalid.url")); //パラメータ無しのメッセージ
+
diff --git a/files/ja/code_snippets/modules/index.html b/files/ja/code_snippets/modules/index.html new file mode 100644 index 0000000000..46b808913a --- /dev/null +++ b/files/ja/code_snippets/modules/index.html @@ -0,0 +1,32 @@ +--- +title: モジュール +slug: Code_snippets/Modules +translation_of: Archive/Add-ons/Code_snippets/Modules +--- +

単純なコードで JavaScript モジュール を Mozilla 固有でないコードにします (ブラウザにポーティングする場合など)。eval() は、ユーザの入力に依存しない EXPORTED_SYMBOLS 配列上でのみ使用されるため心配いりません。

+
function importModule (thatObj) {
+    thatObj = thatObj || window;
+
+    var EXPORTED_SYMBOLS = [
+    // シンボルをここに置く
+    ];
+
+    // ここにコードを書く...
+
+    // コードの終わりに: ('i' や 'thatObj' はエクスポートされません！)
+    for (var i=0; i < EXPORTED_SYMBOLS.length; i++) {thatObj[EXPORTED_SYMBOLS[i]] = eval(EXPORTED_SYMBOLS[i]);}
+}
+
+

あるいは、モジュールを一度だけ使用する場合:

+
(function (thatObj) {
+    thatObj = thatObj || window;
+
+    var EXPORTED_SYMBOLS = [
+    // シンボルをここに置く
+    ];
+
+    // ここにコードを書く...
+
+    // コードの終わりに: ('i' や 'thatObj' はエクスポートされません！)
+    for (var i=0; i < EXPORTED_SYMBOLS.length; i++) {thatObj[EXPORTED_SYMBOLS[i]] = eval(EXPORTED_SYMBOLS[i]);}
+})(); // オブジェクトの引数をここに置けます
diff --git a/files/ja/code_snippets/on_page_load/index.html b/files/ja/code_snippets/on_page_load/index.html new file mode 100644 index 0000000000..38aadfe388 --- /dev/null +++ b/files/ja/code_snippets/on_page_load/index.html @@ -0,0 +1,94 @@ +--- +title: On page load +slug: Code_snippets/On_page_load +translation_of: Archive/Add-ons/Code_snippets/On_page_load +--- +

この記事はブラウザやメールで新しいページを読み込んだときにコードを実行したい XUL/JavaScript 開発者のためのものです。もし、コードをページを読み込んでいる時やタブを切り替えた時など、さらに高度な条件下で実行したいときは、 Progress Listeners を見てください。

+

Progress listeners により、拡張機能にドキュメントの表示やタブ切り替えのイベントを知らせることができます。 Progress listeners は nsIWebProgressListener interface を実行します。

+

オーバーレイの作成

+

まず、以下のXULドキュメントの一つ（あるいはあなたが対象としているアプリケーションによってはもっと）への overlay を作成します。

+ +
Application URI to overlay
Firefox chrome://browser/content/browser.xul
Thunderbird chrome://messenger/content/messenger.xul
Navigator from Seamonkey chrome://navigator/content/navigator.xul
+

スクリプトの記述

+

overlay するスクリプトに、このコードを加えることで、 load イベントリスナーを appcontent element (ブラウザ) または messagepane (メール) に追加します。

+
window.addEventListener("load", function() { myExtension.init(); }, false);
+
+var myExtension = {
+  init: function() {
+    var appcontent = document.getElementById("appcontent");   // ブラウザ
+    if(appcontent)
+      appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
+    var messagepane = document.getElementById("messagepane"); // メール
+    if(messagepane)
+      messagepane.addEventListener("load", function () { myExtension.onPageLoad(); }, true);
+  },
+
+  onPageLoad: function(aEvent) {
+    var doc = aEvent.originalTarget; // doc は "onload" event を起こしたドキュメント
+    // 読み込んだページに対する動作。
+    // doc.location は Location オブジェクト (このページの一番下のリンクを見てください。).
+    // 特定のページでだけコードを実行するようにさせることができます。
+    if(doc.location.href.search("forum") > -1)
+      alert("a forum page is loaded");
+  }
+}
+
+

現在の Firefox は onPageLoad function をドキュメントだけでなく、 xul:images (tabbrowser の favicons) に対しても実行します。もしドキュメントのときだけ実行したいなら、 aEvent.originalTarget.nodeName == "#document" 　の条件を使います.

+

拡張機能を初めて使うときやアップデートしたときにコードを実行する

+

browser に overlay するスクリプトに、以下のコードを加えて load イベントリスナーを追加します。

+
var Prefs = Components.classes["@mozilla.org/preferences-service;1"]
+                   .getService(Components.interfaces.nsIPrefService);
+Prefs = Prefs.getBranch("extensions.my_extension_name.");
+
+
+var Overlay = {
+  init: function(){
+    var ver = -1, firstrun = true;
+
+    var gExtensionManager = Components.classes["@mozilla.org/extensions/manager;1"]
+                            .getService(Components.interfaces.nsIExtensionManager);
+    var current = gExtensionManager.getItemForID("extension@guid.net").version;
+    //バージョン番号の取得
+    //"extension@guid.net" はあなたの拡張機能の GUID に置き換える必要があります。
+
+    try{
+	ver = Prefs.getCharPref("version");
+	firstrun = Prefs.getBoolPref("firstrun");
+    }catch(e){
+      //nothing
+    }finally{
+      if (firstrun){
+        Prefs.setBoolPref("firstrun",false);
+        Prefs.setCharPref("version",current);
+
+        // ここに初めて実行したとき用のコードを挿入します。
+
+        // 下の例では新しいタブを開いてページを読み込んでいます。
+        // ミニチュートリアルを読み込むのに使っています。
+        window.setTimeout(function(){
+          gBrowser.selectedTab = gBrowser.addTab("about:mozilla");
+        }, 1500); //Firefox 2 の修正 - タブは時間が経過すると閉じます。
+
+      }
+
+      if (ver!=current && !firstrun){ // !firstrun によりこのセクションは拡張機能を初めて使うときは実行されません。
+        Prefs.setCharPref("version",current);
+
+        // バージョンが異なるとき、すなわちアップグレードしたときに実行するコードを挿入します。
+      }
+    }
+    window.removeEventListener("load",function(){ Overlay.init(); },true);
+  }
+};
+
+
+window.addEventListener("load",function(){ Overlay.init(); },true);
+
+

参照

+ +

{{ languages( { "fr": "fr/Extraits_de_code/Sur_un_chargement_de_page" , "en":"en/Code_snippets/On_page_load"} ) }}

+

  

+ +

 

+
Quick Lookup:
diff --git a/files/ja/code_snippets/page_loading/index.html b/files/ja/code_snippets/page_loading/index.html new file mode 100644 index 0000000000..b6a2654e9c --- /dev/null +++ b/files/ja/code_snippets/page_loading/index.html @@ -0,0 +1,19 @@ +--- +title: ページの読み込み +slug: Code_snippets/Page_Loading +translation_of: Archive/Add-ons/Code_snippets/Page_Loading +--- +

+

ページの読み込み

+
ページの読み込み時 +
ブラウザ/メールの中に新しいページが読み込まれた時に毎回コードを実行する方法 +
+
読み込みリスナ (Progress Listeners) +
読み込みリスナは拡張にブラウザ内のドキュメントの読み込みとタブの切替えに関連づけられたイベントを通知します。 +
+
データをウィンドウに投げる +
既存のあるいは新しいウィンドウ/タブにデータを投げる方法 +
+
+
+{{ languages( { "en": "en/Code_snippets/Page_Loading", "fr": "fr/Extraits_de_code/Chargement_de_page", "pl": "pl/Fragmenty_kodu/Wczytywanie_strony" } ) }} diff --git a/files/ja/code_snippets/preferences/index.html b/files/ja/code_snippets/preferences/index.html new file mode 100644 index 0000000000..ff07d35ebc --- /dev/null +++ b/files/ja/code_snippets/preferences/index.html @@ -0,0 +1,251 @@ +--- +title: Preferences +slug: Code_snippets/Preferences +tags: + - Add-ons + - Extensions + - 要更新 +translation_of: Archive/Add-ons/Code_snippets/Preferences +--- +

この文書では、Mozilla 設定システムを利用しようとする拡張機能開発者向けのサンプルを示しています。ここにあるものは、Mozilla Suite、Firefox、Thunderbird、そしておそらくその他の Mozilla ベースのアプリケーションに適用可能です。Mozilla での設定システムについてのより詳細については、設定システム を参照してください。

+

もし、まだ理解していないなら、Mozilla 設定システムに関する XULPlanet や mozilla.org にある文書を読んでください。(追加情報 にリンクがあります)

+
+ 注: この文書は設定を扱う既存の全てのメソッドを説明しているわけではありません。メソッドの完全なリストについては、追加情報 にリストされている XULPlanet XPCOM リファレンスを参照してください。設定のインターフェースはよく文書化されていますので、ここで触れていないメソッドを利用するのも容易だろうと思われます。
+

{{ 英語版章題("XPCOM interfaces for preferences system") }}

+

設定システムの XPCOM インターフェース

+

Mozilla はいくつかの XPCOM インターフェースを介して設定を公開します。追加情報 の設定に関連したインターフェースのリストへのリンクを参照してください。

+

nsIPrefService、 nsIPrefBranch と nsIPrefBranch2 が三つのよく利用されるインターフェースです。これらは凍結されており変更されることはありません。

+

また、nsIPref インターフェースも存在はします。ある場所で利用されているかもしれませんが、廃止予定 であり、利用すべきではありません。

+

設定サービスは、あなたが他の XPCOM サービスのインスタンスを作成するときと同じように作成できます。これについての詳細は XULPlanet の XPCOM コンポーネントの作成方法 を見てください。nsIPrefBranch を取得するには、QueryInterface() に設定サービスを入れる (この場合、ルートブランチが取得できます) か、nsIPrefService.getBranch() を呼んで sub-branch を取得してください。

+

次の二つがサンプルです:

+
// ルートブランチを取得
+var prefs = Components.classes["@mozilla.org/preferences-service;1"].
+                    getService(Components.interfaces.nsIPrefBranch);
+
+
// "extensions.myext" ブランチを取得
+var prefs = Components.classes["@mozilla.org/preferences-service;1"].
+                    getService(Components.interfaces.nsIPrefService);
+prefs = prefs.getBranch("extensions.myext.");
+
+

{{ 英語版章題("Simple types") }}

+

単純型

+

設定には三種類の型が存在します。文字列, 整数値 そして 真偽値 です。設定データベース (prefs.js) の中でそれぞれのエントリは、これらのうちのひとつの型を持ちます。nsIPrefBranch には設定の取得・設定のための 6 つのメソッドがあります。getBoolPref(), setBoolPref(), getCharPref(), setCharPref(), getIntPref() そして setIntPref() です。これらは次のように利用できます。

+
// nsIPrefBranch 経由の設定操作
+// branch を取得する方法は一つ上の章を読んでください
+var value = prefs.getBoolPref("accessibility.typeaheadfind"); // 取得
+prefs.setBoolPref("accessibility.typeaheadfind", !value); // 設定
+
+

{{ 英語版章題("Complex types") }}

+

複合型

+

前の章で説明したとおり、設定データベース中 (prefs.js) の各エントリは文字列、整数値、もしくは真偽値のどれかを持つ必要があります。ただし、複合型 もあり、開発者にとって nsILocalFile や nsISupportsString オブジェクトを設定に保存しやすくなります。(文字列として — 設定システムの面からみると、複合型は nsIPrefBranch.PREF_STRING の型の値となります。)

+

この型についての nsIPrefBranch の実装には二つのメソッドがあります — setComplexValue() と getComplexValue() です。これらの実装については、{{ Source("modules/libpref/src/nsPrefBranch.cpp#228", "nsPrefBranch.cpp") }} がソースとなり、IDL 定義は次のようになります。

+
void getComplexValue(in string aPrefName, in nsIIDRef aType,
+                     [iid_is(aType), retval] out nsQIResult aValue);
+void setComplexValue(in string aPrefName, in nsIIDRef aType, in nsISupports aValue);
+
+

見て分かるように、二つともパラメータをとり、aType は次の値のいずれかです (正確には、定義されていない nsIWhatever ではなく、Components.interfaces.nsIWhatever を渡す必要があります。)

+
+
+ nsISupportsString
+
+ 設定にある Unicode 文字列を処理するのに利用します。ユーザ名のように non-ASCII 文字列を含む設置値の場合にこれを利用してください。
+
+ nsIPrefLocalizedString
+
+ nsISupportString とほぼ同じですが、ユーザ設定値が無い場合に getComplexValue() で異なる動作を示します。詳細は下記を参照してください。
+
+ nsILocalFile と nsIRelativeFilePref
+
+ 設定にパスを保存します。nsILocalFile は絶対パス、nsIRelativeFilePref はプロファイルフォルダーなどの特別なディレクトリからの相対パスを保存するために利用します。
+
+

{{ 英語版章題("nsISupportsString") }}

+

nsISupportsString

+

上記の通り、これは設定の Unicoide 文字列を処理するのに利用します。たとえば

+
// prefs is an nsIPrefBranch
+
+// サンプル 1: Unicode 値を得る
+var value = prefs.getComplexValue("preference.with.non.ascii.value",
+      Components.interfaces.nsISupportsString).data;
+
+// サンプル 2: Unicode 値を設定する
+var str = Components.classes["@mozilla.org/supports-string;1"]
+      .createInstance(Components.interfaces.nsISupportsString);
+str.data = "some non-ascii text";
+prefs.setComplexValue("preference.with.non.ascii.value",
+      Components.interfaces.nsISupportsString, str);
+
+

{{ 英語版章題("nsIPrefLocalizedString") }}

+

nsIPrefLocalizedString

+

Mozilla でサポートされている別の複合型として、nsIPrefLocalizedString があります。これは、ユーザ設定値が無い場合を除いて nsISupportsString に似ていますが、getComplexValue() はロケールファイル (既定値をローカライズできるようにするため) から既定値を取得します。

+

サンプルを示す方が説明がしやすいですので、extensions.myext.welcomemessage<code> 設定値の既定値をローカライズする時を例にとって説明します。まず、以下のようにする必要があります。

+
    +
  1. (あなたのロケールの全ての) .properties ファイルに次の行を加えます。chrome://myext/locale/defaults.properties です。 + 
    extensions.myext.welcomemessage=ローカライズされた既定値
    +
    2. +
  2. extensions.myext.welcomemessage に既定値を追加し、あなたの拡張に 既定の設定 を次のように書き加えることで、properties ファイルを示すようにします。 + 
    pref("extensions.myext.welcomemessage", "chrome://myext/locale/defaults.properties");
    +
    3. +
  3. 設定を aType に nsIPrefLocalizedString を渡して getComplexValue で読みます。 + 
    var prefs = Components.classes["@mozilla.org/preferences-service;1"].
+      getService(Components.interfaces.nsIPrefService);
+var branch = prefs.getBranch("extensions.myext.");
+var value = branch.getComplexValue("welcomemessage",
+      Components.interfaces.nsIPrefLocalizedString).data;
+
    +
    4. +
+

ステップ 3 では、ユーザ設定値が無い場合 chrome://myext/locale/defaults.properties からの既定値が読み込まれているはずです。それ以外の場合は nsISupportString が aType に渡された場合と同じ動作をします。

+

設定に nsIPrefLocalizedString を利用して設定する場合は、nsISupportsString と同じです。

+
var pls = Components.classes["@mozilla.org/pref-localizedstring;1"]
+                    .createInstance(Components.interfaces.nsIPrefLocalizedString);
+pls.data = val;
+prefs.setComplexValue("preference.with.non.ascii.value",
+                      Components.interfaces.nsIPrefLocalizedString, pls);
+
+

{{ 英語版章題("nsILocalFile and nsIRelativeFilePref") }}

+

nsILocalFile と nsIRelativeFilePref

+

Leave this section to have nice TOC nsILocalFile と nsIRelativeFilePref についての詳細は File IO についての文書 を参照してください。

+

{{ 英語版章題("Default preferences") }}

+

既定の設定値

+

someone should reword this section それぞれの設定値は最大二つの値をもちます。— 設定値 と 既定値 です。これは、現在と既定の二つの "設定木:" があることを意味し、それぞれが設定に対して値を持つ・持たないの両方が可能であるということです。

+

設定値の一覧は about:config (存在すれば) でみることが可能です。ユーザ設定値がある場合は太字で、ユーザ設定値が無いものについては通常のフォントで表示されます。

+

nsIPrefService.getBranch() と nsIPrefService.getDefaultBranch() 関数により両方の木を取得できます。詳細は下記を参照してください。

+

{{ 英語版章題("The effect of default preferences on get methods") }}

+

get メソッドでの既定の設定値の影響

+

nsIPrefBranch の get メソッドの一つが呼ばれた (設定値の方の木を想定します) とき、以下のように動作します。

+
    +
  1. 設定値 の木に値が存在するかと設定がロックされているかどうかを確認します。
    2. +
  2. 要求に一致する型の値が存在するか (たとえば、getBoolValue は nsIPrefBranch.PREF_BOOL 型の値を想定します) を確認し、設定がロックされていなければ、その値を返します。
    3. +
  3. 異なる型の値であり、かつ設定がロックされていなければ、NS_ERROR_UNEXPECTED 例外を投げます。
    4. +
  4. 設定がロックされているか、設定値 の木に設定値がなければ、get メソッドは既定値の木を確認します。
    5. +
  5. 既定値 の木に求められる型の値がある場合、それを返します。(例外として、aType に nsIPrefLocalizedString が設定された getComplexValue() の呼び出しの場合があります。上記参照)
    6. +
  6. 上記のどれでもなければ NS_ERROR_UNEXPECTED 例外を投げます。
    7. +
+

木が 既定値 のものであれば、get メソッドは設定値を一切チェックしません。

+

(libpref 内の実装を完全に説明してはいませんが、等価です。)

+

{{ 英語版章題("Where the default values are read from") }}

+

既定値はどこから取得されるか

+ +

これらのファイルは、簡単な JavaScript に似た形式です。設定に既定値を加えるには、あなたの既定の設定ファイルに次の行を加えてください。

+
pref("extensions.extensionname.preferencename", false);
+
+

{{ 英語版章題("How to install an extension\'s defaults files") }}

+

拡張機能の既定値のファイルをインストールするには

+

Mozilla Suite については、(appdir)/defaults/pref に インストールスクリプト でコピーしてください。

+

Firefox や Thunderbird については、myext.xpi/defaults/preferences/ に保存してください。設定システムで自動的にコピーされ登録されます。

+

{{ 英語版章題("More about preferences \"branches\"") }}

+

設定 "木" についての詳細

+

設定名はドット区切りの文字列で構成され、関連する設定は通常は同じプレフィックスをもちます。たとえば、Mozilla のほとんどのアクセシビリティー関係の設定は、"accessibility" で始まります。

+

これは、全ての存在する設定が木のようにイメージできることを示します。たとえば次のように。

+
+
+|
++-- accessibility
+|         |
+|         +-- typeaheadfind
+|         |         |
+|         |         +-- autostart (accessibility.typeaheadfind.autostart)
+|         |         |
+|         |         +-- enablesound (accessibility.typeaheadfind.enablesound)
+|         |
+|         +-- usebrailledisplay (accessibility.usebrailledisplay)
+|
++-- extensions
+          |
+          +-- lastAppVersion (extensions.lastAppVersion)
+
+

これは、nsIPrefBranch に隠されたメタファーです。ただ、Mozilla の設定システムはドットを特別なものとして扱わないという事実に注意してください。 たとえば、次のコードも設定の accessibility.typeaheadfind.enablesound 値を返します。

+
var prefs = Components.classes["@mozilla.org/preferences-service;1"].
+                    getService(Components.interfaces.nsIPrefService);
+var branch = prefs.getBranch("acce");
+var enablesound = branch.getBoolPref("ssibility.typeaheadfind.enablesound");
+
+

これは、ドットで終わる文字列を getBranch() に渡すべきであることを示す一つの理由です。つまり prefs.getBranch("accessibility.") のように。

+

もう一つの注意として、nsIPrefBranch.getChildList("",{}) が、設定木の root で始まる設定名の配列を返すことに注意してください。たとえば

+
var branch = prefs.getBranch("accessibility.");
+var children = branch.getChildList("", {});
+
+

は上の木を例に取ると、あなたの期待しているであろう直接の子供 ("typeaheadfind" and "usebrailledisplay") ではなく、"typeaheadfind.autostart", "typeaheadfind.enablesound", and "usebrailledisplay" のアイテムを返します。

+

{{ 英語版章題("Using preference observers") }}

+

設定オブザーバを利用する

+

ある木の設定への変更を監視するのに nsIPrefBranchInternal インターフェースを利用できます。

+
+ 注 Gecko 1.8 の開発にて、nsIPrefBranchInternal は nsIPrefBranch2 に変更 ({{ Bug(281414) }}) され、凍結されました。nsIPrefBranchInternal は Gecko 1.8 ではまだサポートされていますので、拡張を Gecko 1.7 と Gecko 1.8 (Firefox 1.0/1.5) の両方に対応させる場合はこちらを利用すべきです。新しい拡張では、nsIPrefBranch2 を利用すべきです。
+

サンプルは次のようになります。

+
var myPrefObserver =
+{
+  register: function()
+  {
+    var prefService = Components.classes["@mozilla.org/preferences-service;1"]
+                                .getService(Components.interfaces.nsIPrefService);
+    this._branch = prefService.getBranch("extensions.myextension.");
+    this._branch.QueryInterface(Components.interfaces.nsIPrefBranch2);
+    this._branch.addObserver("", this, false);
+  },
+
+  unregister: function()
+  {
+    if(!this._branch) return;
+    this._branch.removeObserver("", this);
+  },
+
+  observe: function(aSubject, aTopic, aData)
+  {
+    if(aTopic != "nsPref:changed") return;
+    // aSubject is the nsIPrefBranch we're observing (after appropriate QI)
+    // aData is the name of the pref that's been changed (relative to aSubject)
+    switch (aData) {
+      case "pref1":
+        // extensions.myextension.pref1 was changed
+        break;
+      case "pref2":
+        // extensions.myextension.pref2 was changed
+        break;
+    }
+  }
+}
+myPrefObserver.register();
+
+

{{ Source("modules/libpref/public/nsIPrefBranch2.idl", "nsIPrefBranch2.idl") }} により詳細があります。

+

{{ 英語版章題("Using prefHasUserValue()") }}

+

prefHasUserValue() を利用する

+

nsIPrefBranch.prefHasUserValue(preference) により、既定値から設定が変更されたかどうかを確認できます。変更されていれば true を、変更されていなければ false を返します。特に、既定値が設定されていない場合、prefHasUserValue() は設定が存在するかを確認する手段になります。

+

get*Pref メソッドで存在しない設定を読もうとしたとき例外が投げられます。読み込む前に、prefHasUserValue() を確認することで設定が存在するかどうかを確認できます。たとえば次のように。

+
if(prefs.prefHasUserValue("mypref")) {
+  alert(prefs.getCharPref("mypref");
+}
+
+

注: getCharPref() は設定が存在しても、型が違う場合に例外を投げます。

+

{{ 英語版章題("Using preferences in extensions") }}

+

拡張で設定を利用する

+

Toolkit アプリケーション (Firefox, Thunderbird, Nvu など) 向けに拡張機能を書いている場合、拡張機能の設定に既定値を設定する方が望ましいです。(上記の詳細を参照してください。) これには次のような利点があります。

+ +

{{ 英語版章題("JavaScript wrappers for preferences system") }}

+

設定システムの JavaScript でのラッパ

+

コードを単純化するためにいくつかの JavaScript でのラッパが存在します。http://mozilla.doslash.org/prefutils や Firefox と Thunderbird に含まれる nsPreferences ラッパです。(chrome://global/content/nsUserSettings.js)

+

{{ 英語版章題("Resources") }}

+

追加情報

+ diff --git a/files/ja/code_snippets/progress_listeners/index.html b/files/ja/code_snippets/progress_listeners/index.html new file mode 100644 index 0000000000..c04c3fea56 --- /dev/null +++ b/files/ja/code_snippets/progress_listeners/index.html @@ -0,0 +1,117 @@ +--- +title: Progress Listeners +slug: Code_snippets/Progress_Listeners +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/Progress_Listeners +--- +

Progress Listeners

+

Progress listeners を使うことで拡張機能にドキュメントの読み込みやタブの切替イベントなどを通知することができます。 Progress listeners は nsIWebProgressListener インターフェースを実装しています。

+

メモ: 単にページをロードするごとにコードを実行したいだけなら、 もっと簡単な関数 (onPageLoad()) でできます。

+

例

+
    +
  1. nsIWebProgressListener を実装するオブジェクトを作ります。 + 
    const STATE_START = Components.interfaces.nsIWebProgressListener.STATE_START;
+const STATE_STOP = Components.interfaces.nsIWebProgressListener.STATE_STOP;
+var myListener =
+{
+  QueryInterface: function(aIID)
+  {
+   if (aIID.equals(Components.interfaces.nsIWebProgressListener) ||
+       aIID.equals(Components.interfaces.nsISupportsWeakReference) ||
+       aIID.equals(Components.interfaces.nsISupports))
+     return this;
+   throw Components.results.NS_NOINTERFACE;
+  },
+
+  onStateChange: function(aWebProgress, aRequest, aFlag, aStatus)
+  {
+   // myListener を二つ以上のタブ/ブラウザで使うなら、onStateChangeイベントを起こした
+   // タブ/ウインドウを取得するのに aWebProgress.DOMWindow を使用してください。
+   if(aFlag & STATE_START)
+   {
+     // ここはロードイベントが始まったときに実行されます。
+   }
+   if(aFlag & STATE_STOP)
+   {
+     // ここはロードが終わったときに実行されます。
+   }
+   return 0;
+  },
+
+  onLocationChange: function(aProgress, aRequest, aURI)
+  {
+   // これはロケーションバーが変更されたとき実行されます。例: ロードイベントが完了したとき、ユーザーがタブを切り替えたとき。
+   // myListener を二つ以上のタブ/ウインドウで使うなら、
+   // イベントを起こしたタブ/ウインドウを取得するのに aProgress.DOMWindow を使用してください。
+
+   return 0;
+  },
+
+  // 残りの関数の定義については XULPlanet.com を見てください。
+  onProgressChange: function() {return 0;},
+  onStatusChange: function() {return 0;},
+  onSecurityChange: function() {return 0;},
+  onLinkIconAvailable: function() {return 0;}
+}
    +
    2. +
  2.  progress listener を <browser> か <tabbrowser> 要素に追加してください。例: Firefox の場合は、次のコードをメインウインドウの load listener に追加してください{{ 訳注(' 詳しくは次の節のコードを参考にしてください') }}。 + 
    gBrowser.addProgressListener(myListener,
+  Components.interfaces.nsIWebProgress.NOTIFY_STATE_DOCUMENT);
    +

    二番目の引数は受け取るイベントのタイプを決める status filter です。例えフィルターが使われていても、 六つ全ての progress handler 関数が定義されなければなりません。

    +
    3. +
  3. unload イベントハンドラか、あるいはもっと早くに removeProgressListener を呼ぶことを忘れないでください。
    4. +
+

myListener を独自の識別子（名前）に変更すること忘れないでください{{ 訳注('他の拡張機能と名前がかぶらないようにするため') }}。Also remember that if you're adding listeners inside a function, make sure to have a reference to your listener object that stays in memory (this is due to the required nsISupportsWeakReference interface). That is, the listener object shouldn't be declared solely in the temporal function.

+

例:アドレスバーの値の変更を検出する

+

よく聞かれる質問にアドレスバー（ロケーションバーとも言う）のURLの変更を、どうやって検出するのかというのがあります。次のコードを使うことで、ユーザーが他のページへ移動する操作を行ったとき（リンクをクリックしたり、戻る/進むボタンを使ったり、ロケーションバーにアドレスを打ち込んだときなど）あるいはタブを切り替えたときを検出することができます。

+
var myExt_urlBarListener = {
+  QueryInterface: function(aIID)
+  {
+   if (aIID.equals(Components.interfaces.nsIWebProgressListener) ||
+       aIID.equals(Components.interfaces.nsISupportsWeakReference) ||
+       aIID.equals(Components.interfaces.nsISupports))
+     return this;
+   throw Components.results.NS_NOINTERFACE;
+  },
+
+  onLocationChange: function(aProgress, aRequest, aURI)
+  {
+    myExtension.processNewURL(aURI);
+  },
+
+  onStateChange: function() {},
+  onProgressChange: function() {},
+  onStatusChange: function() {},
+  onSecurityChange: function() {},
+  onLinkIconAvailable: function() {}
+};
+
+var myExtension = {
+  oldURL: null,
+
+  init: function() {
+    // ウェブページのロードをリスンする。
+    gBrowser.addProgressListener(myExt_urlBarListener,
+        Components.interfaces.nsIWebProgress.NOTIFY_STATE_DOCUMENT);
+  },
+
+  uninit: function() {
+    gBrowser.removeProgressListener(myExt_urlBarListener);
+  },
+
+  processNewURL: function(aURI) {
+    if (aURI.spec == this.oldURL)
+      return;
+
+    //これでurlが新しく更新されたことを知る
+    alert(aURI.spec);
+    this.oldURL = aURI.spec;
+  }
+};
+
+window.addEventListener("load", function() {myExtension.init()}, false);
+window.addEventListener("unload", function() {myExtension.uninit()}, false);
+
+

メモ : もし二つ以上のタブ/ウインドウで同じリスナーを使っているなら、コールバックメソッドにおいて state change イベントを起こしたタブ/ウインドウを取得するのに aWebProgress.DOMWindow を使用してください。

diff --git a/files/ja/code_snippets/queryselector/index.html b/files/ja/code_snippets/queryselector/index.html new file mode 100644 index 0000000000..6662d876ab --- /dev/null +++ b/files/ja/code_snippets/queryselector/index.html @@ -0,0 +1,99 @@ +--- +title: QuerySelector +slug: Code_snippets/QuerySelector +tags: + - DOM +translation_of: Archive/Add-ons/Code_snippets/QuerySelector +--- +

jQuery や Prototype などの他のフレームワークのラインに沿って、 "querySelector" という名前を短縮すると便利です：

+ +
function $ (selector, el) {
+     if (!el) {el = document;}
+     return el.querySelector(selector);
+}
+function $$ (selector, el) {
+     if (!el) {el = document;}
+     return el.querySelectorAll(selector);
+     // Note: the returned object is a NodeList.
+     // If you'd like to convert it to a Array for convenience, use this instead:
+     // return Array.prototype.slice.call(el.querySelectorAll(selector));
+}
+alert($('#myID').id);
+
+ +

(Firefox の Web コンソールを使用している間は、上記の機能は自動的に利用可能です。)

+ +

XUL と XML の両方を簡単にサポートすることができます (次の代替アプローチは、ChromeWindow.prototype または Window.prototype を追加したり、this.document.querySelector にアクセスしたり、jQuery スタイルのチェーンに続いて $() のプロトタイプメソッドを含む 'this' を返すことです)：

+ +
HTMLDocument.prototype.$ = function (selector) { // Only for HTML
+    return this.querySelector(selector);
+};
+
+Example:
+
+<h1>Test!</h1>
+<script>
+HTMLDocument.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+alert(document.$('h1')); // [object HTMLHeadingElement]
+</script>
+
+ +
XULDocument.prototype.$ = function (selector) { // Only for XUL
+    return this.querySelector(selector);
+};
+
+Example:
+
+<label value="Test!"/>
+<script type="text/javascript"><![CDATA[
+XULDocument.prototype.$ = function (selector) { // Only for XUL
+    return this.querySelector(selector);
+};
+
+alert(document.$('label')); // [object XULElement]
+]]></script>
+
+ +
Document.prototype.$ = function (selector) { // Only for plain XML
+    return this.querySelector(selector);
+};
+var foo = document.implementation.createDocument('someNS', 'foo', null); // Create an XML document <foo xmlns="someNS"/>
+var bar = foo.createElementNS('someNS', 'bar'); // add <bar xmlns="someNS"/>
+foo.documentElement.appendChild(bar);
+alert(foo.$('bar').nodeName); // gives 'bar'
+
+ +
Element.prototype.$ = function (selector) { // Works for HTML, XUL, and plain XML
+    return this.querySelector(selector);
+};
+
+HTML example:
+<h1><a>Test!<a/></h1>
+<script>
+Element.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+alert(document.getElementsByTagName('h1')[0].$('a').nodeName); // 'A'
+
+XUL example:
+<hbox><vbox/></hbox>
+<script type="text/javascript"><![CDATA[
+Element.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+var XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
+alert(document.getElementsByTagNameNS(XULNS, 'hbox')[0].$('vbox').nodeName); // vbox
+]]></script>
+
+XML example:
+<foo xmlns="someNS"><bar/></foo> in document earlier
+var foo = document.getElementsByTagNameNS('someNS', 'foo')[0];
+alert(foo.$('bar'));
+
+
+ +

単純なXMLの場合、# 'id' セレクタは 'id' 属性では機能しないことに注意してください (このような名前付き属性は HTML や XUL にはありますが、XML では必ずしも ID 型である必要はない) xml:id で動作します。

+ +

しかし、プレフィックスのないアトリビュート (「id」など。しかし xml:id：http://www.w3.org/TR/selectors-api/#resolving ではない) をターゲットとする属性セレクタでも機能します (CSS3 名前空間の属性セレクタ：http://www.w3.org/TR/css3-selectors/#attrnmsp および潜在的な xml:id as＃：http://www.w3.org/TR/css3-selectors/#id-selectors をサポートしています)。

diff --git a/files/ja/code_snippets/running_applications/index.html b/files/ja/code_snippets/running_applications/index.html new file mode 100644 index 0000000000..7027616a78 --- /dev/null +++ b/files/ja/code_snippets/running_applications/index.html @@ -0,0 +1,48 @@ +--- +title: Running applications +slug: Code_snippets/Running_applications +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/Running_applications +--- +

 

+

このページでは、Mozilla XPCOM インターフェースを利用して、chrome JavaScript コードから他のプログラムを起動する方法について解説します。プログラムを実行するには二つの方法があります。一つ目はnsILocalFile:launch メソッドで、二つ目は nsIProcess インターフェースです。

+

{{ 英語版章題("Using nsILocalFile.launch()") }}

+

nsILocalFile.launch() を利用する

+

このメソッドは、ファイルをダブルクリックしたのと同じ効果をもたらします。たとえば、実行可能ファイルであれば、ファイルがパラメータ無しで実行されます。いくつかのプラットフォームではこの機能は実装されていませんので、あなたのターゲットとするプラットフォームでこのメソッドが利用可能か確認してください。

+

nsIFile/nsILocalFile の詳細については、File I/O を参照してください。

+
var file = Components.classes["@mozilla.org/file/local;1"]
+                     .createInstance(Components.interfaces.nsILocalFile);
+file.initWithPath("c:\\myapp.exe");
+file.launch();
+
+

{{ 英語版章題("Using nsIProcess") }}

+

nsIProcess を利用する

+

最も推奨されるのは、nsIProcess インターフェースを利用する方法です。

+
// 実行可能ファイルに nsILocalFile を作成する
+var file = Components.classes["@mozilla.org/file/local;1"]
+                     .createInstance(Components.interfaces.nsILocalFile);
+file.initWithPath("c:\\myapp.exe");
+
+
// nsIProcess を作成する
+var process = Components.classes["@mozilla.org/process/util;1"]
+                        .createInstance(Components.interfaces.nsIProcess);
+process.init(file);
+
+
// プロセスの起動。
+// 最初のパラメータが true なら、スレッドはプロセスが終わるまでブロックされます。
+// 二つ目と三つ目のパラメータは、プロセスのコマンドライン引数になります。
+var args = ["argument1", "argument2"];
+process.run(false, args, args.length);
+
+

{{ 英語版章題("References") }}

+

リファレンス

+ +

 

+ +

{{ languages( { "en": "en/Code_snippets/Running_applications", "fr": "fr/Extraits_de_code/Ex\u00e9cuter_des_applications", "ko": "ko/Code_snippets/Running_applications", "pl": "pl/Fragmenty_kodu/Uruchamianie_aplikacji" } ) }}

+ +

 

+

<hints id="hah_hints"/>

diff --git a/files/ja/code_snippets/sidebar/index.html b/files/ja/code_snippets/sidebar/index.html new file mode 100644 index 0000000000..769a24197a --- /dev/null +++ b/files/ja/code_snippets/sidebar/index.html @@ -0,0 +1,44 @@ +--- +title: Sidebar +slug: Code_snippets/Sidebar +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/Sidebar +--- +

+

Firefox サイドバー拡張機能の作成に関するステップバイステップの説明は Firefox のサイドバーの作成チュートリアルを参照してください。 +


+

著者: もっとサイドバー関連のコンテンツを追加してください +

{{ 英語版章題("Resizing the sidebar programmatically") }} +

+

サイドバーをプログラムからリサイズ

+

サイドバーの幅を変更したい場合は以下のコードを使ってください +

+
function setSidebarWidth(newwidth) {
+ var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+ .getInterface(Components.interfaces.nsIWebNavigation)
+ .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
+ .rootTreeItem
+ .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+ .getInterface(Components.interfaces.nsIDOMWindow);
+ mainWindow.document.getElementById("sidebar-box").width=newwidth;
+}
+
+

あるいは +

+
function setSidebarWidth(newwidth) {
+  window.top.document.getElementById("sidebar-box").width=newwidth;
+}
+
+

サイドバーのスピリッタを隠すことで、マウスを使った手動のリサイズを無効にすることができます。このコードの断片を動くようにするには、前のコードブロックで書いたように mainWindow を宣言しなくてはなりません: +

+
mainWindow.document.getElementById("sidebar-splitter").hidden = true;
+
+

スピリッタの hidden 属性を変更するときは注意してください。サイドバーが閉じられるあるいは他のサイドバーで置き換えられるときにそれらを安全な値にリセットする必要があります。例えば、これをサイドバーの Unload イベントハンドラで使用してください: +

+
mainWindow.document.getElementById("sidebar-splitter").hidden = mainWindow.document.getElementById("sidebar-box").hidden;
+
+
+
+{{ languages( { "en": "en/Code_snippets/Sidebar" } ) }} diff --git a/files/ja/code_snippets/tabbed_browser/index.html b/files/ja/code_snippets/tabbed_browser/index.html new file mode 100644 index 0000000000..9edd1bd4e3 --- /dev/null +++ b/files/ja/code_snippets/tabbed_browser/index.html @@ -0,0 +1,371 @@ +--- +title: タブブラウザ用コード +slug: Code_snippets/Tabbed_browser +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Tabbed_browser +--- +

このページには Firefox のタブブラウザを扱うのに有用なコードがリストされています。あなた自身のコードを挿入すべき場所には通常コメントが入れられています。

+

通常、それぞれのコードには初期化の際に実行するべきコードが含まれています。これらは load リスナーで実行するのがいいでしょう。コードはブラウザウィンドウのコンテキストの中で実行されることを想定しています。もし、ブラウザでないウィンドウでタブを操作したい場合は、ブラウザウィンドウへの参照を最初に取得する必要があります。詳細は chrome コードでウィンドウを操作する を参照してください。

+

{{ 英語版章題("Multiple meanings for the word 'browser'") }}

+

「ブラウザ」という単語の意味

+

「ブラウザ」という単語はいろいろな使い方をされます。当然、Firefoxのアプリケーション全体は“ブラウザ”と呼ばれます。Firefoxブラウザの中にはタブがあり、一般のウェブページブラウザのイメージからしても、{{ XULElem("browser") }}要素というXUL的なイメージからしても、内側のそれぞれのタブもブラウザです。さらに、この文書中や一部のFirefoxのソースに現れる「ブラウザ」には、FirefoxのXULウィンドウ中の“tabbrowser要素”を意味するものもあります。

+

{{ 英語版章題("Getting access to the Browser") }}

+

ブラウザへのアクセス方法

+

{{ 英語版章題("From main window") }}

+

メインウィンドウから

+

browser.xul にオーバーレイするような拡張機能では普通ですが、FirefoxのグローバルなChromeWindowで実行されるコードならば、大域変数 gBrowser を使って{{ XULElem("tabbrowser") }}要素にアクセスできます。

+
// gBrowser はブラウザウィンドウ (browser.xul) のスコープからのみアクセス可能
+gBrowser.addTab(...);
+
+

gBrowser が未定義ならば、あなたのコードはブラウザウィンドウのスコープで実行されていないか、もしくは早すぎる段階で実行されています。gBrowser にはブラウザウィンドウが完全にロードされた後でのみアクセス出来ます。ウィンドウが開かれたすぐ後に gBrowser に対して何かしたければ、 load イベントをリッスン し、イベントリスナの中で gBrowser を使ってください。

+

{{ 英語版章題("From a sidebar") }}

+

サイドバーから

+

基本的には、拡張機能がサイドバーで動作しているなら以下のようにできます。

+
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                   .getInterface(Components.interfaces.nsIWebNavigation)
+                   .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
+                   .rootTreeItem
+                   .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                   .getInterface(Components.interfaces.nsIDOMWindow);
+
+mainWindow.gBrowser.addTab(...);
+
+

{{ 英語版章題("From a dialog") }}

+

ダイアログから

+

もし、コードがブラウザウィンドウから直接立ち上げられたダイアログで実行されているなら、以下のようにできます。

+
window.opener.gBrowser.addTab(...);
+
+

もし、window.opener が動作しないなら、このコードによって最も最近使われたブラウザウィンドウを取得できます。

+
var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var mainWindow = wm.getMostRecentWindow("navigator:browser");
+mainWindow.gBrowser.addTab(...);
+
+

{{ 英語版章題("Opening a URL in a new tab") }}

+

新しいタブを開く

+
// タブの追加
+gBrowser.addTab("http://www.google.com/");
+
+// タブの追加とアクティブ化
+gBrowser.selectedTab = gBrowser.addTab("http://www.google.com/");
+
+

{{ 英語版章題("Manipulating content of a new tab") }}

+

新しいタブのコンテンツの操作

+

新しく開かれたタブのコンテンツについて仕事をしたいときは、内容がロードされ終わるまで待つ必要があります。

+
// 間違った方法(ページがロードし終わってない)
+var newTab = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
+alert(newTab.contentDocument.body.innerHTML);
+
+// よい方法
+var newTab = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
+newTab.addEventListener("load", function() {
+  newTab.contentDocument.body.innerHTML = "<div>hello world</div>";
+}, true);
+
+

(このonLoadハンドラのイベントターゲットはXULの'tab'要素になります。) 詳しくはtabbrowser の getBrowserForTab() を見てください。

+

{{ 英語版章題("Opening a URL in the correct window/tab") }}

+

URL を適切なウィンドウやタブで開く

+

簡単にURLをタブで開くことができるメソッドが chrome://browser/content/utilityOverlay.js にあります。openUILinkIn と openUILink です。

+
openUILinkIn( url, where, allowThirdPartyFixup, postData, referrerUrl )
where:
  • "current" 現在のタブ (もしブラウザウィンドウがなければ、代わりに新しいウィンドウで開く)
  • "tab" 新しいタブ (もしブラウザウィンドウがなければ、代わりに新しいウィンドウで開く)
  • "tabshifted" "tab"と同じだが、デフォルトが「新しいタブを選択する」ならバックグラウンドで開く。逆も同様。
  • "window" 新しいウィンドウ
  • "save" ディスクに保存する (ファイル名は指定できない!)
openUILink( url, e, ignoreButton, ignoreAlt, allowKeywordFixup, postData, referrerUrl )
+
+

次のコードでは、押されたマウスのボタンや、押されている Ctrl などのホットキーによって、新しいタブ、現在のタブ、現在のウィンドウのどこに URL が開かれるかが決まります。このコードは {{ XULElem("menuitem") }} 用のものですが、他の XUL 要素でも同じように動作します。このコードは browser.xul のオーバーレイでのみ動作します。

+

XUL:

+
<menuitem oncommand="myExtension.foo(event)" onclick="checkForMiddleClick(this, event)" label="Click me"/>
+
+

JS:

+
var myExtension = {
+  foo: function(event) {
+    openUILink("http://www.example.com", event, false, true);
+  }
+}
+
+

{{ 英語版章題("Reusing tabs") }}

+

タブの再利用

+

毎回必要なときに新しいブラウザウィンドウやタブを開くより、もしあれば必要としている URL をすでに表示している既存のタブを再利用することを考える方がよいでしょう。この方法をとれば、あなたの拡張機能が作成するブラウザやタブを最小にすることができます。

+

{{ 英語版章題("Reusing by URL/URI") }}

+
URL/URI により再利用する
+

さまざまな拡張機能で共通する機能として、拡張機能のボタンやリンクをユーザがクリックしたときに、ブラウザウィンドウで chrome:// URI (ヘルプや about 情報など) や外部の (オンラインの http(s)://) HTML 文書を開くようにしています。次のコードは、すでに必要な URL や URI を表示しているタブを再利用する方法を示しています。もし、存在しなければ、指定された URL や URI を新しいタブで開きます。

+
function openAndReuseOneTabPerURL(url) {
+  var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                     .getService(Components.interfaces.nsIWindowMediator);
+  var browserEnumerator = wm.getEnumerator("navigator:browser");
+
+  // 必要としている URL を開いている browser が無いか確認する
+  var found = false;
+  while (!found && browserEnumerator.hasMoreElements()) {
+    var browserWin = browserEnumerator.getNext();
+    var tabbrowser = browserWin.gBrowser;
+
+    // browser インスタンスの全てのタブを確認する
+    var numTabs = tabbrowser.browsers.length;
+    for (var index = 0; index < numTabs; index++) {
+      var currentBrowser = tabbrowser.getBrowserAtIndex(index);
+      if (url == currentBrowser.currentURI.spec) {
+
+        // URL はすでに開いています。タブを選択します。
+        tabbrowser.selectedTab = tabbrowser.tabContainer.childNodes[index];
+
+        // *この*ブラウザウィンドウにフォーカスを移す
+        browserInstance.focus();
+        found = true;
+        break;
+      }
+    }
+  }
+
+  // URL が開かれてないので新たに開く
+  if (!found) {
+    var recentWindow = wm.getMostRecentWindow("navigator:browser");
+    if (recentWindow) {
+      // 既存のブラウザウィンドウを利用する
+      recentWindow.delayedOpenTab(url, null, null, null, null);
+    }
+    else {
+      // すでに開いているブラウザウィンドウがないので、新たに開く
+      window.open(url);
+    }
+  }
+}
+
+

{{ 英語版章題("Reusing by other criteria") }}

+
その他の条件によって再利用する
+

すでにどのような URL/URI を開いているかにかかわらず、既存のタブを再利用したいということがあるでしょう。そのタブがほかのブラウザコンポーネントにでなく、あなたの拡張機能により開かれたとします。最初にタブを開くときに独自の属性を付加しておくことで、タブを再利用できます。後々そのタブを再利用したい時には、開かれているすべてのタブからその独自の属性をもったタブを探します。そのようなタブがあれば、そのタブのURL/URIを変更し、そのタブを選択してフォーカスします。そうでなければ (ユーザがタブを閉じたか、そもそもそのようなタブを開いていないかでしょう)、独自の属性をもった新しいタブを作ります。

+
function openAndReuseOneTabPerAttribute(attrName, url) {
+  var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                     .getService(Components.interfaces.nsIWindowMediator);
+  for (var found = false, index = 0, tabbrowser = wm.getEnumerator('navigator:browser').getNext().gBrowser;
+       index < tabbrowser.tabContainer.childNodes.length && !found;
+       index++) {
+
+    // 次のタブを取得
+    var currentTab = tabbrowser.tabContainer.childNodes[index];
+
+    // このタブは独自の属性をもっているかな?
+    if (currentTab.hasAttribute(attrName)) {
+
+      // Yes -- それを選択・フォーカス
+      tabbrowser.selectedTab = currentTab;
+
+      // 他のブラウザウィンドウがフォーカスされている場合、*この*ウィンドウをフォーカス
+      tabbrowser.ownerDocument.defaultView.focus();
+      found = true;
+    }
+  }
+
+  if (!found) {
+    // ここから開かれたタブはない。新規に開く。
+    var browserEnumerator = wm.getEnumerator("navigator:browser");
+    var tabbrowser = browserEnumerator.getNext().gBrowser;
+
+    // タブを作成
+    var newTab = tabbrowser.addTab(url);
+    newTab.setAttribute(attrName, "xyz");
+
+    // タブを選択・フォーカス
+    tabbrowser.selectedTab = newTab;
+
+    // 他のブラウザウィンドウがフォーカスされている場合、*この*ウィンドウをフォーカス
+    tabbrowser.ownerDocument.defaultView.focus();
+  }
+}
+
+

この関数は以下のように呼びます。

+
openAndReuseOneTabPerAttribute("myextension-myattribute", "http://developer.mozilla.org/").
+
+

{{ 英語版章題("Closing a tab") }}

+

タブを閉じる

+

このサンプルは現在選択されているタブを閉じます。

+
gBrowser.removeCurrentTab();
+
+

また、引数として XUL の {{ XULElem("tab") }} 要素を一つだけ取る、より汎用的な removeTab というメソッドもあります。

+

{{ 英語版章題("Changing active tab") }}

+

選択されているタブを変更する

+

タブを一つ右へ移動します。

+
gBrowser.tabContainer.advanceSelectedTab(1, true);
+
+

こちらは左へ移動します。

+
gBrowser.tabContainer.advanceSelectedTab(-1, true);
+
+

{{ 英語版章題("Detecting page load") }}

+

ページ読み込みの検出

+

Code snippets:On page load も参照してください。

+
function examplePageLoad(event) {
+  if (event.originalTarget instanceof HTMLDocument) {
+    var win = event.originalTarget.defaultView;
+    if (win.frameElement) {
+      // タブにフレームが読み込まれました。winはフレームセットのtop windowで
+      // なければなりません。もし、このウェブページに frame/iframe が
+      // 読み込まれたときに何もしないなら、次の行のコメントアウトを外してください
+      // return;
+      // ルートドキュメントを探索する
+      win = win.top;
+    }
+  }
+}
+
+// ブラウザウィンドウが初期化されるまでコールバック関数を追加しようとしないで
+// ください。タブブラウザへのコールバックの追加はブラウザウィンドウが
+// 読み込まれたあとにする必要があります。
+window.addEventListener("load", function () {
+  // ドキュメントが読み込まれるたびに実行されるコールバック関数を追加する
+  // ドキュメント内部の frame/iframe にも適用されるので注意が必要
+  gBrowser.addEventListener("load", examplePageLoad, true);
+}, false);
+
+...
+// もし、必要なくなれば
+gBrowser.removeEventListener("load", examplePageLoad, true);
+...
+
+

{{ 英語版章題("Notification when a tab is added or removed") }}

+

タブが追加もしくは削除されたときに通知する

+
function exampleTabAdded(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser は追加された browser をさす XUL 要素です
+}
+
+function exampleTabMoved(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser は移動した browser をさす XUL 要素です
+}
+
+function exampleTabRemoved(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser は削除された browser をさす XUL 要素です
+}
+
+// 初期化中に
+var container = gBrowser.tabContainer;
+container.addEventListener("TabOpen", exampleTabAdded, false);
+container.addEventListener("TabMove", exampleTabMoved, false);
+container.addEventListener("TabClose", exampleTabRemoved, false);
+
+// 必要なくなれば
+container.removeEventListener("TabOpen", exampleTabAdded, false);
+container.removeEventListener("TabMove", exampleTabMoved, false);
+container.removeEventListener("TabClose", exampleTabRemoved, false);
+
+

{{ gecko_callout_heading("1.9.1") }}

Gecko 1.9.1 {{ geckoRelease("1.9.1") }} から、簡単に すべてのタブのイベントをlistenする 方法が使えます。

+
+

{{ 英語版章題("Notification when a tab's attributes change") }}

+

{{ h2_gecko_minversion("タブの属性が変更されたときに通知する", "2.0") }}

+

Gecko 2.0 以降では、TabAttrModified をlistenすることでタブの属性の変更を検知することができます。以下の属性が変更されると、このイベントが送られます。

+ +
function exampleTabAttrModified(event) {
+  var tab = event.target;
+  // ここで、タブに何の変更があったのかチェックする
+}
+
+// 初期化時に
+var container = gBrowser.tabContainer;
+container.addEventListener("TabAttrModified", exampleTabAttrModified, false);
+
+// 必要なくなったとき
+container.removeEventListener("TabAttrModified", exampleTabAttrModified, false);
+
+

{{ 英語版章題("Notification when a tab is pinned or unpinned") }}

+

{{ h2_gecko_minversion("タブがアイコン化したとき、解除されたときに通知する", "2.0") }}

+

Gecko 2.0 以降では、タブはアイコン化(pin)できます。すなわち、タブは特別なアプリケーションタブ (アイコンタブ) となって、タブバーの先頭に固定され、ファビコンだけを表示します。TabPinned と TabUnpinned イベントを監視することで、タブがアイコン化したり解除されたりしたときに検知できます。

+
function exampleTabPinned(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser はアイコン化したブラウザのXUL要素
+}
+
+function exampleTabUnpinned(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser はアイコン化したブラウザのXUL要素
+}
+
+// 初期化
+var container = gBrowser.tabContainer;
+container.addEventListener("TabPinned", exampleTabPinned, false);
+container.addEventListener("TabUnpinned", exampleTabUnpinned, false);
+
+// 必要なくなったとき
+container.removeEventListener("TabPinned", exampleTabPinned, false);
+container.removeEventListener("TabUnpinned", exampleTabUnpinned, false);
+
+

{{ 英語版章題("Detecting tab selection") }}

+

タブが選択されたことを検出する

+

次のコードでブラウザの新たにタブが選択されたことを検出できます。

+
function exampleTabSelected(event) {
+  var browser = gBrowser.selectedBrowser;
+  // browser はその時に選択された browser の XUL 要素
+}
+
+// 初期化中に
+var container = gBrowser.tabContainer;
+container.addEventListener("TabSelect", exampleTabSelected, false);
+
+// 必要なくなれば
+container.removeEventListener("TabSelect", exampleTabSelected, false);
+
+

{{ 英語版章題("Getting document of currently selected tab") }}

+

現在選択されているタブのドキュメントを取得する

+

次のコードで現在選択されているタブのドキュメントを取得できます。このコードはブラウザウィンドウのスコープで動作します (ブラウザウィンドウへのオーバーレイで動作させる時など) 。

+
gBrowser.contentDocument;
+
+

もしくは

+
content.document
+
+

ブラウザウィンドウから開かれたウィンドウやダイアログで動作させる場合は、このコードを使って、そのウィンドウを開いたブラウザウィンドウの、選択されているタブで表示されているドキュメントを取得できます。

+
window.opener.content.document
+
+

ブラウザウィンドウから開かれたものでないウィンドウやダイアログからは、nsIWindowMediator を使って、一番最近使われたブラウザウィンドウの、選択されているタブで表示されているドキュメントを取得できます。

+
var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"].
+         getService(Components.interfaces.nsIWindowMediator);
+var recentWindow = wm.getMostRecentWindow("navigator:browser");
+return recentWindow ? recentWindow.content.document.location : null;
+
+

chrome コードでウィンドウを操作する も参照してください。

+

{{ 英語版章題("Enumerating tabs") }}

+

タブの列挙

+

ブラウザで開いている全てのタブを取得するには、最初にブラウザウィンドウへの参照を取得します。もし、Firefox の browser.xul オーバーレイから実行されているコード (たとえば、ツールバーボタンやメニューでの click ハンドラなど) なら、現在のウィンドウにすでに定義されている変数である window でアクセスできます。しかしながら、それ自身のウィンドウから実行されているコード (たとえば、設定やオプションダイアログなど) なら、nsIWindowMediator をブラウザのウィンドウを取得するのに利用する必要があります。

+

次に、<tabbrowser/>要素を取得します。前の手順で取得したブラウザのウィンドウを win とすると、win.gBrowser によって取得できます。もし、browser.xul オーバーレイの中で動作しているなら、より簡単に window.gBrowser でなく、gBrowser で取得可能です。

+

最後に、gBrowser.browsers.length により開いているタブの数を取得し、gBrowser.getBrowserAtIndex() により <browser/> 要素を取得します。たとえば、

+
var num = gBrowser.browsers.length;
+for (var i = 0; i < num; i++) {
+  var b = gBrowser.getBrowserAtIndex(i);
+  try {
+    dump(b.currentURI.spec); // 開いている全てのタブの URL をコンソールへ出力
+  } catch(e) {
+    Components.utils.reportError(e);
+  }
+}
+
+

<browser/> や <tabbrowser/> 要素でどんなメソッドが利用できるかについてより詳細は、DOM Inspector を利用するか、browser.xml や tabbrowser.xml の対応する XBL バインディングを参照してください。

+

{{ 英語版章題("Getting the browser that fires the http-on-modify-request notification") }}

+

http-on-modify-request 通知が発火されたブラウザを取得する

+

HTTP リクエストの中にはタブと関係ないものもあることに注意してください。例えば、RSS フィードの更新、拡張機能マネージャのリクエスト、XPCOMからの XMLHttpRequest などです。それらの場合、次のコードはnullを返します。

+
observe: function (subject, topic, data) {
+  if (topic == "http-on-modify-request") {
+    subject.QueryInterface(Components.interfaces.nsIHttpChannel);
+    var url = subject.URI.spec; /* リクエストされたurl。きっと必要になるでしょう。 */
+    var browser = this.getBrowserFromChannel(subject);
+    if (browser != null) {
+      /* 何かの処理 */
+    }
+  }
+},
+
+getBrowserFromChannel: function (aChannel) {
+  try {
+    var notificationCallbacks =
+      aChannel.notificationCallbacks ? aChannel.notificationCallbacks : aChannel.loadGroup.notificationCallbacks;
+
+    if (!notificationCallbacks)
+      return null;
+
+    var domWin = notificationCallbacks.getInterface(Components.interfaces.nsIDOMWindow);
+    return gBrowser.getBrowserForDocument(domWin.top.document);
+  }
+  catch (e) {
+    dump(e + "\n");
+    return null;
+  }
+}
+
+

{{ languages( { "en": "en/Code_snippets/Tabbed_browser", "fr": "fr/Extraits_de_code/Onglets_de_navigation", "pl": "pl/Fragmenty_kodu/Przegl\u0105danie_w_kartach" } ) }}

diff --git a/files/ja/code_snippets/toolbar/index.html b/files/ja/code_snippets/toolbar/index.html new file mode 100644 index 0000000000..7a5020da7a --- /dev/null +++ b/files/ja/code_snippets/toolbar/index.html @@ -0,0 +1,55 @@ +--- +title: Toolbar +slug: Code_snippets/Toolbar +tags: + - Add-ons + - Extensions +--- +

 

+

 

+

{{ 英語版章題("Adding a toolbar button") }}

+

ツールバーボタンを追加する

+

二つのチュートリアルが参照可能です。

+ +

{{ 英語版章題("Adding button by default") }}

+

Adding button by default

+

スタマイズされたツールバーパレット用のツールバーボタンを入れて、あなたの拡張を開発・配布したとしても、デフォルトではボタンは有効になりません。ユーザはボタンをツールバーへドラッグする必要があります。下のコードを利用することで、あなたのボタンが最初のインストールおよび XPI の再起動後にデフォルトで表示されるようにできます。

+
+

ボタンをデフォルトで追加するのは、正しく行うのが非常に難しいという点で、ほぼ間違いなく悪習慣です。ユーザはあなたがボタンを追加したツールバーを非表示にしているかもしれませんし、追加したコードが正常に動作しないようにツールバーをカスタマイズしているかもしれません。

+

Firefox がこの目的に API を提供することに対しては、バグが立てられています。need the bug #

+
+

{{ 英語版章題("Notes") }}

+

メモ

+
    +
  1. このサンプルは、Firefox 独自のものですが、Thunderbird でも正しいノードをターゲットに変更することで動作します。
    2. +
  2. デフォルトでボタンを追加するのは、正しい値とともに追加可能で、あなたの拡張のよく利用される機能に対してである場合だけにしてください。ユーザに限られた UI スペースしかないかもしれないことを考慮し、本当に必要かどうか検討してください。
    3. +
  3. このコードは browser.xul のオーバーレイに含められる必要があります。
    4. +
+

{{ 英語版章題("Example") }}

+

サンプル

+
 try {
+   var firefoxnav = document.getElementById("nav-bar");
+   var curSet = firefoxnav.currentSet;
+   if (curSet.indexOf("my-extension-button") == -1)
+   {
+     var set;
+     // Place the button before the urlbar
+     if (curSet.indexOf("urlbar-container") != -1)
+       set = curSet.replace(/urlbar-container/, "my-extension-button,urlbar-container");
+     else  // at the end
+       set = firefoxnav.currentSet + ",my-extension-button";
+     firefoxnav.setAttribute("currentset", set);
+     firefoxnav.currentSet = set;
+     document.persist("nav-bar", "currentset");
+     // If you don't do the following call, funny things happen
+     try {
+       BrowserToolboxCustomizeDone(true);
+     }
+     catch (e) { }
+   }
+ }
+ catch(e) { }
+
diff --git a/files/ja/code_snippets/windows/index.html b/files/ja/code_snippets/windows/index.html new file mode 100644 index 0000000000..dff0175a5c --- /dev/null +++ b/files/ja/code_snippets/windows/index.html @@ -0,0 +1,45 @@ +--- +title: ウィンドウ用コード +slug: Code_snippets/Windows +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/Windows +--- +

 

+ +

{{ 英語版章題("Opening new browser windows") }}

+ +

新しいブラウザウィンドウを開く

+ +

新しいブラウザウィンドウを開くには、単純に window.open() でできます。しかしながら、window.open() は、ブラウザウィンドウそのものではなく Window オブジェクトを返しますので、最初に chrome Window を取得しておく必要があります。最も簡単な方法は nsIWindowMediator を利用する方法です。

+ +

{{ 英語版章題("Example") }}

+ +

サンプル

+ +

 

+ +
window.open();
+var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var newWindow = wm.getMostRecentWindow("navigator:browser");
+var b = newWindow.getBrowser();
+
+
+ +

{{ 英語版章題("Other resources") }}

+ +

その他の参考文献

+ + + +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/Code_snippets/Windows", "fr": "fr/Extraits_de_code/Fen\u00eatres", "pl": "pl/Fragmenty_kodu/Okna" } ) }}

diff --git a/files/ja/code_snippets/xml/index.html b/files/ja/code_snippets/xml/index.html new file mode 100644 index 0000000000..fb2a4ec983 --- /dev/null +++ b/files/ja/code_snippets/xml/index.html @@ -0,0 +1,27 @@ +--- +title: XML +slug: Code_snippets/XML +tags: + - Add-ons + - Extensions +translation_of: Archive/Add-ons/Code_snippets/XML +--- +

+


+

+ +


+

+
+
+{{ languages( { "en": "en/Code_snippets/XML", "fr": "fr/Extraits_de_code/XML", "pl": "pl/Fragmenty_kodu/XML" } ) }} -- cgit v1.2.3-54-g00ecf