diff options
Diffstat (limited to 'files/ja/mozilla/add-ons/sdk')
9 files changed, 1511 insertions, 0 deletions
diff --git a/files/ja/mozilla/add-ons/sdk/guides/content_scripts/index.html b/files/ja/mozilla/add-ons/sdk/guides/content_scripts/index.html new file mode 100644 index 0000000000..071cf1fb6f --- /dev/null +++ b/files/ja/mozilla/add-ons/sdk/guides/content_scripts/index.html @@ -0,0 +1,484 @@ +--- +title: Content Scripts +slug: Mozilla/Add-ons/SDK/Guides/Content_Scripts +translation_of: Archive/Add-ons/Add-on_SDK/Guides/Content_Scripts +--- +<article id="wikiArticle"> +<p><span class="seoSummary">アドオンの多くはウェブページへアクセスし修正する必要があります。しかしアドオンのメインのコードは直接ウェブコンテンツにアクセスできません。 代わりにアドオン SDK は <em>content scripts </em>と呼ばれる別のスクリプトからウェブコンテンツにアクセスします。このページでは content scripts の開発・実装方法を記述します。</span></p> + +<p>SDK を扱う上で content scripts はあなたを混乱させてしまうかもしれませんが、おそらくそれを使わなければなりません。下記は5つの基本原則です:</p> + +<ul> + <li>"main.js" を含むアドオンのメインコードやその他の "lib" 以下のモジュールは、SDK の<a href="/en-US/Add-ons/SDK/High-Level_APIs">高水準</a>または<a href="/en-US/Add-ons/SDK/Low-Level_APIs">低水準</a>なAPIを利用できますが、ウェブコンテンツには直接アクセスできません</li> + <li>content scripts は<a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts#API_Access_for_Add-on_Code_and_Content_Scripts"> SDK の API を使用できません</a> (no access to globals <code>exports</code>, <code>require</code>) が、ウェブコンテンツに直接アクセスできます</li> + <li><a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod">page-mod</a> や <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">tabs</a> のような content scripts を扱う SDK の API は、アドオンのメインコードから content scripts をウェブページにロードする機能を提供します</li> + <li>content scripts は文字列として読み込まれますが、アドオンの "data" ディレクトリ以下に別々のファイルとして保存します。jpm はデフォルトでは "data" を作らないので、 自分でディレクトリを作成し content scripts を置く必要があります</li> + <li>message-passing API でメインコードと content scripts とでお互いにコミュニケーションすることができます</li> +</ul> + +<p>This complete add-on illustrates all of these principles. Its "main.js" attaches a content script to the current tab using the <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">tabs</a> module. In this case the content script is passed in as a string. The content script simply replaces the content of the page:</p> + +<pre class="brush: js">// main.js +var tabs = require("sdk/tabs"); +var contentScriptString = 'document.body.innerHTML = "<h1>this page has been eaten</h1>";' + +tabs.activeTab.attach({ + contentScript: contentScriptString +});</pre> + +<p>The following high-level SDK modules can use content scripts to modify web pages:</p> + +<ul> + <li><a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod">page-mod</a>: enables you to attach content scripts to web pages that match a specific URL pattern.</li> + <li><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">tabs</a>: exports a <code>Tab</code> object for working with a browser tab. The <code>Tab</code> object includes an <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"><code>attach()</code></a> function to attach a content script to the tab.</li> + <li><a href="/en-US/Add-ons/SDK/High-Level_APIs/page-worker">page-worker</a>: lets you retrieve a web page without displaying it. You can attach content scripts to the page, to access and manipulate the page's DOM.</li> + <li><a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu">context-menu</a>: use a content script to interact with the page in which the menu is invoked.</li> +</ul> + +<p>Additionally, some SDK user interface components - panel, sidebar, frame - are specified using HTML, and use separate scripts to interact with this content. In many ways these are like content scripts, but they're not the focus of this article. To learn about how to interact with the content for a given user interface module, please see the module-specific documentation: <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel">panel</a>, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_sidebar">sidebar</a>, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame">frame</a>.</p> + +<p>Almost all the examples presented in this guide are available as complete, but minimal, add-ons in the <a href="https://github.com/mdn/addon-sdk-content-scripts">addon-sdk-content-scripts repository</a> on GitHub.</p> + +<h2 id="Loading_content_scripts">Loading content scripts</h2> + +<article id="wikiArticle"> +<p>You can load a single script by assigning a string to either the <code>contentScript</code> or the <code>contentScriptFile</code> option. The <code>contentScript</code> option treats the string itself as a script:</p> + +<pre class="brush: js">// main.js + +var pageMod = require("sdk/page-mod"); +var contentScriptValue = 'document.body.innerHTML = ' + + ' "<h1>Page matches ruleset</h1>";'; + +pageMod.PageMod({ + include: "*.mozilla.org", + contentScript: contentScriptValue +});</pre> + +<p>The <code>contentScriptFile</code> option treats the string as a resource:// URL pointing to a script file stored in your add-on's <code>data</code> directory. jpm doesn't make a "data" directory by default, so you must add it and put your content scripts in there.</p> + +<p>This add-on supplies a URL pointing to the file "content-script.js", located in the <code>data</code> subdirectory under the add-on's root directory:</p> + +<pre class="brush: js">// main.js + +var data = require("sdk/self").data; +var pageMod = require("sdk/page-mod"); + +pageMod.PageMod({ + include: "*.mozilla.org", + contentScriptFile: data.url("content-script.js") +});</pre> + +<pre class="brush: js">// content-script.js + +document.body.innerHTML = "<h1>Page matches ruleset</h1>";</pre> + +<div class="note"> +<p>From Firefox 34 onwards, you can use "./content-script.js" as an alias for self.data.url("content-script.js"). So you can rewrite the above main.js code like this:</p> + +<pre class="brush: js">var pageMod = require("sdk/page-mod"); + +pageMod.PageMod({ + include: "*.mozilla.org", + contentScriptFile: "./content-script.js" +}); +</pre> +</div> + +<div class="warning"> +<p>Unless your content script is extremely simple and consists only of a static string, don't use <code>contentScript</code>: if you do, you may have problems getting your add-on approved on AMO.</p> + +<p>Instead, keep the script in a separate file and load it using <code>contentScriptFile</code>. This makes your code easier to maintain, secure, debug and review.</p> +</div> + +<p>You can load multiple scripts by passing an array of strings to either <code>contentScript</code> or <code>contentScriptFile</code>:</p> + +<pre class="brush: js">// main.js + +var tabs = require("sdk/tabs"); + +tabs.on('ready', function(tab) { + tab.attach({ + contentScript: ['document.body.style.border = "5px solid red";', 'window.alert("hi");'] + }); +}); +</pre> + +<pre class="brush: js">// main.js + +var data = require("sdk/self").data; +var pageMod = require("sdk/page-mod"); + +pageMod.PageMod({ + include: "*.mozilla.org", + contentScriptFile: [data.url("jquery.min.js"), data.url("my-content-script.js")] +});</pre> + +<p>If you do this, the scripts can interact directly with each other, just like scripts loaded by the same web page.</p> + +<p>You can also use <code>contentScript</code> and <code>contentScriptFile</code> together. If you do this, scripts specified using <code>contentScriptFile</code> are loaded before those specified using <code>contentScript</code>. This enables you to load a JavaScript library like jQuery by URL, then pass in a simple script inline that can use jQuery:</p> + +<pre class="brush: js">// main.js + +var data = require("sdk/self").data; +var pageMod = require("sdk/page-mod"); + +var contentScriptString = '$("body").html("<h1>Page matches ruleset</h1>");'; + +pageMod.PageMod({ + include: "*.mozilla.org", + contentScript: contentScriptString, + contentScriptFile: data.url("jquery.js") +});</pre> + +<div class="warning"> +<p>Unless your content script is extremely simple and consists only of a static string, don't use <code>contentScript</code>: if you do, you may have problems getting your add-on approved on AMO.</p> + +<p>Instead, keep the script in a separate file and load it using <code>contentScriptFile</code>. This makes your code easier to maintain, secure, debug and review.</p> +</div> + +<h3 id="Controlling_when_to_attach_the_script">Controlling when to attach the script</h3> + +<p>The <code>contentScriptWhen</code> option specifies when the content script(s) should be loaded. It takes one of:</p> + +<ul> + <li><code>"start"</code>: load the scripts immediately after the document element for the page is inserted into the DOM. At this point the DOM content hasn't been loaded yet, so the script won't be able to interact with it.</li> + <li><code>"ready"</code>: load the scripts after the DOM for the page has been loaded: that is, at the point the <a href="https://developer.mozilla.org/en/Gecko-Specific_DOM_Events">DOMContentLoaded</a> event fires. At this point, content scripts are able to interact with the DOM content, but externally-referenced stylesheets and images may not have finished loading.</li> + <li><code>"end"</code>: load the scripts after all content (DOM, JS, CSS, images) for the page has been loaded, at the time the <a href="https://developer.mozilla.org/en/DOM/window.onload">window.onload event</a> fires.</li> +</ul> + +<p>The default value is <code>"end"</code>.</p> + +<p>Note that <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"><code>tab.attach()</code></a> doesn't accept contentScriptWhen, because it's generally called after the page has loaded.</p> + +<h3 id="Passing_configuration_options">Passing configuration options</h3> + +<p>The <code>contentScriptOptions</code> is a JSON object that is exposed to content scripts as a read-only value under the <code><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts/self">self</a>.options</code> property:</p> + +<pre class="brush: js">// main.js + +var tabs = require("sdk/tabs"); + +tabs.on('ready', function(tab) { + tab.attach({ + contentScript: 'window.alert(self.options.message);', + contentScriptOptions: {"message" : "hello world"} + }); +});</pre> + +<p>Any kind of jsonable value (object, array, string, etc.) can be used here.</p> + +<h2 id="Accessing_the_DOM">Accessing the DOM</h2> + +<p>Content scripts can access the DOM of a page, of course, just like any scripts that the page has loaded (page scripts). But content scripts are insulated from page scripts:</p> + +<ul> + <li>content scripts don't see any JavaScript objects added to the page by page scripts</li> + <li>if a page script has redefined the behavior of some DOM object, the content script sees the original behavior.</li> +</ul> + +<p>The same applies in reverse: page scripts can't see JavaScript objects added by content scripts.</p> + +<p>For example, consider a page that adds a variable <code>foo</code> to the <code>window</code> object using a page script:</p> + +<pre class="brush: html"><!DOCTYPE html"> +<html> + <head> + <script> + window.foo = "hello from page script" + </script> + </head> +</html></pre> + +<p>Another script loaded into the page after this script will be able to access <code>foo</code>. But a content script will not:</p> + +<pre class="brush: js">// main.js + +var tabs = require("sdk/tabs"); +var mod = require("sdk/page-mod"); +var self = require("sdk/self"); + +var pageUrl = self.data.url("page.html") + +var pageMod = mod.PageMod({ + include: pageUrl, + contentScript: "console.log(window.foo);" +}) + +tabs.open(pageUrl);</pre> + +<pre>console.log: my-addon: null +</pre> + +<p>There are good reasons for this insulation. First, it means that content scripts don't leak objects to web pages, potentially opening up security holes. Second, it means that content scripts can create objects without worrying about whether they might clash with objects added by page scripts.</p> + +<p>This insulation means that, for example, if a web page loads the jQuery library, then the content script won't be able to see the <code>jQuery</code> object added by the library - but the content script can add its own <code>jQuery</code> object, and it won't clash with the page script's version.</p> + +<h3 id="Interacting_with_page_scripts">Interacting with page scripts</h3> + +<p>Usually the insulation between content scripts and page scripts is what you want. But sometimes you might want to interact with page scripts: you might want to share objects between content scripts and page scripts or to send messages between them. If you need to do this, read about <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts/Interacting_with_page_scripts">interacting with page scripts</a>.</p> + +<h3 id="Event_listeners">Event listeners</h3> + +<p>You can listen for DOM events in a content script just as you can in a normal page script, but there are two important differences:</p> + +<p>First, if you define an event listener by passing it as a string into <a href="https://developer.mozilla.org/en/DOM/element.setAttribute"><code>setAttribute()</code></a>, then the listener is evaluated in the page's context, so it will not have access to any variables defined in the content script.</p> + +<p>For example, this content script will fail with the error "theMessage is not defined":</p> + +<pre class="brush: js">var theMessage = "Hello from content script!"; +anElement.setAttribute("onclick", "alert(theMessage);");</pre> + +<p>Second, if you define an event listener by direct assignment to a <a href="/en-US/docs/Web/API/GlobalEventHandlers">global event handler</a> like <code>onclick</code>, then the assignment might be overridden by the page. For example, here's an add-on that tries to add a click handler by assignment to <code>window.onclick</code>:</p> + +<pre class="brush: js">var myScript = "window.onclick = function() {" + + " console.log('unsafewindow.onclick: ' + window.document.title);" + + "}"; + +require("sdk/page-mod").PageMod({ + include: "*", + contentScript: myScript, + contentScriptWhen: "start" +});</pre> + +<p>This will work fine on most pages, but will fail on pages which also assign to <code>onclick</code>:</p> + +<pre class="brush: html"><html> + <head> + </head> + <body> + <script> + window.onclick = function() { + window.alert("it's my click now!"); + } + </script> + </body> +</html></pre> + +<p>For these reasons, it's better to add event listeners using <a href="https://developer.mozilla.org/en/DOM/element.addEventListener"><code>addEventListener()</code></a>, defining the listener as a function:</p> + +<pre class="brush: js">var theMessage = "Hello from content script!"; + +anElement.onclick = function() { + alert(theMessage); +}; + +anotherElement.addEventListener("click", function() { + alert(theMessage); +});</pre> + +<h2 id="Communicating_with_the_add-on">Communicating with the add-on</h2> + +<p>To enable add-on scripts and content scripts to communicate with each other, each end of the conversation has access to a <code>port</code> object.</p> + +<ul> + <li>to send messages from one side to the other, use <code>port.emit()</code></li> + <li>to receive messages sent from the other side, use <code>port.on()</code></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7873/content-scripting-overview.png" style="display: block; margin-left: auto; margin-right: auto;">Messages are asynchronous: that is, the sender does not wait for a reply from the recipient but just emits the message and continues processing.</p> + +<p>Here's a simple add-on that sends a message to a content script using <code>port</code>:</p> + +<pre class="brush: js">// main.js + +var tabs = require("sdk/tabs"); +var self = require("sdk/self"); + +tabs.on("ready", function(tab) { + worker = tab.attach({ + contentScriptFile: self.data.url("content-script.js") + }); + worker.port.emit("alert", "Message from the add-on"); +}); + +tabs.open("http://www.mozilla.org");</pre> + +<pre class="brush: js">// content-script.js + +self.port.on("alert", function(message) { + window.alert(message); +});</pre> + +<div class="note"> +<p>The context-menu module doesn't use the communication model described here. To learn about communicating with content scripts loaded using context-menu, see the <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu">context-menu documentation</a>. </p> +</div> + +<h3 id="Accessing_port_in_the_content_script">Accessing <code>port</code> in the content script</h3> + +<p>In the content script the <code>port</code> object is available as a property of the global <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts/self"><code>self</code></a> object. So to emit a message from a content script:</p> + +<pre class="brush: js">self.port.emit("myContentScriptMessage", myContentScriptMessagePayload);</pre> + +<p>To receive a message from the add-on code:</p> + +<pre class="brush: js">self.port.on("myAddonMessage", function(myAddonMessagePayload) { + // Handle the message +});</pre> + +<div class="note"> +<p><span>Note that the global <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts/self"><code>self</code></a> object is completely different from the <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/self"><code>self</code> module</a>, which provides an API for an add-on to access its data files and ID.</span></p> +</div> + +<h3 id="Accessing_port_in_the_add-on_script">Accessing <code>port</code> in the add-on script</h3> + +<p>In the add-on code, the channel of communication between the add-on and a particular content script context is encapsulated by the <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/content_worker"><code>worker</code></a> object. So the <code>port</code> object for communicating with a content script is a property of the corresponding <code>worker</code> object.</p> + +<p>However, the worker is not exposed to add-on code in quite the same way in all modules.</p> + +<h4 id="From_page-worker">From <code>page-worker</code></h4> + +<p>The <code>page-worker</code> object integrates the worker API directly. So to receive messages from a content script associated with a <code>page-worker</code> you use <code>pageWorker.port.on()</code>:</p> + +<pre class="brush: js">// main.js + +var pageWorkers = require("sdk/page-worker"); +var self = require("sdk/self"); + +var pageWorker = require("sdk/page-worker").Page({ + contentScriptFile: self.data.url("content-script.js"), + contentURL: "http://en.wikipedia.org/wiki/Internet" +}); + +pageWorker.port.on("first-para", function(firstPara) { + console.log(firstPara); +});</pre> + +<p>To emit user-defined messages from your add-on you can just call <code>pageWorker.port.emit()</code>:</p> + +<pre class="brush: js">// main.js + +var pageWorkers = require("sdk/page-worker"); +var self = require("sdk/self"); + +pageWorker = require("sdk/page-worker").Page({ + contentScriptFile: self.data.url("content-script.js"), + contentURL: "http://en.wikipedia.org/wiki/Internet" +}); + +pageWorker.port.on("first-para", function(firstPara) { + console.log(firstPara); +}); + +pageWorker.port.emit("get-first-para");</pre> + +<pre class="brush: js">// content-script.js + +self.port.on("get-first-para", getFirstPara); + +function getFirstPara() { + var paras = document.getElementsByTagName("p"); + if (paras.length > 0) { + var firstPara = paras[0].textContent; + self.port.emit("first-para", firstPara); + } +}</pre> + +<h4 id="From_page-mod">From <code>page-mod</code></h4> + +<p>A single <code>page-mod</code> object might attach its scripts to multiple pages, each with its own context in which the content scripts are executing, so it needs a separate channel (worker) for each page.</p> + +<p>So <code>page-mod</code> does not integrate the worker API directly. Instead, each time a content script is attached to a page, the page-mod emits an <code>attach</code> event, whose listener is passed the worker for that context. By supplying a listener to <code>attach</code> you can access the <code>port</code> object for content scripts attached to that page by this page-mod:</p> + +<pre class="brush: js">// main.js + +var pageMods = require("sdk/page-mod"); +var self = require("sdk/self"); + +var pageMod = pageMods.PageMod({ + include: ['*'], + contentScriptFile: self.data.url("content-script.js"), + onAttach: startListening +}); + +function startListening(worker) { + worker.port.on('click', function(html) { + worker.port.emit('warning', 'Do not click this again'); + }); +}</pre> + +<pre class="brush: js">// content-script.js + +window.addEventListener('click', function(event) { + self.port.emit('click', event.target.toString()); + event.stopPropagation(); + event.preventDefault(); +}, false); + +self.port.on('warning', function(message) { + window.alert(message); +}); +</pre> + +<p>In the add-on above there are two messages:</p> + +<ul> + <li><code>click</code> is sent from the page-mod to the add-on, when the user clicks an element in the page</li> + <li><code>warning</code> sends a silly string back to the page-mod</li> +</ul> + +<h4 id="From_Tab.attach()">From <code>Tab.attach()</code></h4> + +<p>The <code>Tab.attach()</code> method returns the worker you can use to communicate with the content script(s) you attached.</p> + +<p>This add-on adds a button to Firefox: when the user clicks the button, the add-on attaches a content script to the active tab, sends the content script a message called "my-addon-message", and listens for a response called "my-script-response":</p> + +<pre class="brush: js">//main.js + +var tabs = require("sdk/tabs"); +var buttons = require("sdk/ui/button/action"); +var self = require("sdk/self"); + +buttons.ActionButton({ + id: "attach-script", + label: "Attach the script", + icon: "./icon-16.png", + onClick: attachScript +}); + +function attachScript() { + var worker = tabs.activeTab.attach({ + contentScriptFile: self.data.url("content-script.js") + }); + worker.port.on("my-script-response", function(response) { + console.log(response); + }); + worker.port.emit("my-addon-message", "Message from the add-on"); +} +</pre> + +<pre class="brush: js">// content-script.js + +self.port.on("my-addon-message", handleMessage); + +function handleMessage(message) { + alert(message); + self.port.emit("my-script-response", "Response from content script"); +}</pre> + +<h3 id="The_port_API">The port API</h3> + +<p>See the <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts/port">reference page for the <code>port</code> object</a>.</p> +</article> + +<h3 id="The_postMessage_API">The postMessage API</h3> + +<p>Before the <code>port</code> object was added, add-on code and content scripts communicated using a different API:</p> + +<ul> + <li>the content script called <code>self.postMessage()</code> to send and <code>self.on()</code> to receive</li> + <li>the add-on script called <code>worker.postMessage()</code> to send and <code>worker.on()</code>to receive</li> +</ul> + +<p>The API is still available and <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts/using_postMessage">documented</a>, but there's no reason to use it instead of the <code>port</code> API described here. The exception is the <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu">context-menu</a> module, which still uses postMessage.</p> + +<h3 id="Content_script_to_content_script">Content script to content script</h3> + +<p>Content scripts can only communicate with each other directly if they have been loaded into the same context. For example, if a single call to <code>Tab.attach()</code> attaches two content scripts, then they can see each other directly, just as page scripts loaded by the same page can. But if you call <code>Tab.attach()</code> twice, attaching a content script each time, then these content scripts can't communicate with each other. You must then relay messages through the main add-on code using the port API.</p> + +<h2 id="Cross-domain_content_scripts">Cross-domain content scripts</h2> + +<p>By default, content scripts don't have any cross-domain privileges. In particular, they can't access content hosted in an <code>iframe</code>, if that content is served from a different domain, or make cross-domain XMLHttpRequests.</p> + +<p>However, you can enable these features for specific domains by adding them to your add-on's <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a> under the <code>"cross-domain-content"</code> key, which itself lives under the <code>"permissions"</code> key. See the article on <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts/Cross_Domain_Content_Scripts">cross-domain content scripts</a>.</p> +</article> diff --git a/files/ja/mozilla/add-ons/sdk/guides/index.html b/files/ja/mozilla/add-ons/sdk/guides/index.html new file mode 100644 index 0000000000..0a6a4422d6 --- /dev/null +++ b/files/ja/mozilla/add-ons/sdk/guides/index.html @@ -0,0 +1,115 @@ +--- +title: ガイド +slug: Mozilla/Add-ons/SDK/Guides +translation_of: Archive/Add-ons/Add-on_SDK/Guides +--- +<p>This page lists more theoretical in-depth articles about the SDK.</p> +<hr> +<h3 id="Contributor's_guide"><a name="contributors-guide">Contributor's guide</a></h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="Guides/Getting_Started">Getting Started</a></dt> + <dd> + Learn how to contribute to the SDK: getting the code, opening/taking a bug, filing a patch, getting reviews, and getting help.</dd> + <dt> + <a href="Guides/Modules">Modules</a></dt> + <dd> + Learn about the module system used by the SDK (which is based on the CommonJS specification), how sandboxes and compartments can be used to improve security, and about the built-in SDK module loader, known as Cuddlefish.</dd> + <dt> + <a href="Guides/Classes_and_Inheritance">Classes and Inheritance</a></dt> + <dd> + Learn how classes and inheritance can be implemented in JavaScript, using constructors and prototypes, and about the helper functions provided by the SDK to simplify this.</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="Guides/Private_Properties">Private Properties</a></dt> + <dd> + Learn how private properties can be implemented in JavaScript using prefixes, closures, and WeakMaps, and how the SDK supports private properties by using namespaces (which are a generalization of WeakMaps).</dd> + <dt> + <a href="Guides/Content_Processes">Content Processes</a></dt> + <dd> + The SDK was designed to work in an environment where the code to manipulate web content runs in a different process from the main add-on code. This article highlights the main features of that design.</dd> + </dl> + </div> +</div> +<hr> +<h3 id="SDK_infrastructure"><a name="sdk-infrastructure">SDK infrastructure</a></h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="Guides/Module_structure_of_the_SDK">Module structure of the SDK</a></dt> + <dd> + The SDK, and add-ons built using it, are of composed from reusable JavaScript modules. This explains what these modules are, how to load modules, and how the SDK's module tree is structured.</dd> + <dt> + <a href="Guides/SDK_API_Lifecycle">SDK API lifecycle</a></dt> + <dd> + Definition of the lifecycle for the SDK's APIs, including the stability ratings for APIs.</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="Guides/Program_ID">Program ID</a></dt> + <dd> + The Program ID is a unique identifier for your add-on. This guide explains how it's created, what it's used for and how to define your own.</dd> + <dt> + <a href="Guides/Firefox_Compatibility">Firefox compatibility</a></dt> + <dd> + Working out which Firefox releases a given SDK release is compatible with, and dealing with compatibility problems.</dd> + </dl> + </div> +</div> +<hr> +<h3 id="SDK_idioms"><a name="sdk-idioms">SDK idioms</a></h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="Guides/Working_with_Events">Working With Events</a></dt> + <dd> + Write event-driven code using the the SDK's event emitting framework.</dd> + <dt> + <a href="Guides/Content_Scripts">Content scripts guide</a></dt> + <dd> + An overview of content scripts, including: what they are, what they can do, how to load them, how to communicate with them.</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="Guides/Two_Types_of_Scripts">Two Types of Scripts</a></dt> + <dd> + This article explains the differences between the APIs available to your main add-on code and those available to content scripts.</dd> + </dl> + </div> +</div> +<hr> +<h3 id="XUL_migration"><a name="xul-migration">XUL migration</a></h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="Guides/XUL_Migration_Guide">XUL Migration Guide</a></dt> + <dd> + Techniques to help port a XUL add-on to the SDK.</dd> + <dt> + <a href="Guides/XUL_vs_SDK">XUL versus the SDK</a></dt> + <dd> + A comparison of the strengths and weaknesses of the SDK, compared to traditional XUL-based add-ons.</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="Guides/Porting_the_Library_Detector">Porting Example</a></dt> + <dd> + A walkthrough of porting a relatively simple XUL-based add-on to the SDK.</dd> + </dl> + </div> +</div> +<p> </p> diff --git a/files/ja/mozilla/add-ons/sdk/index.html b/files/ja/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..d1a2754a26 --- /dev/null +++ b/files/ja/mozilla/add-ons/sdk/index.html @@ -0,0 +1,99 @@ +--- +title: Add-on SDK +slug: Mozilla/Add-ons/SDK +translation_of: Archive/Add-ons/Add-on_SDK +--- +<p>Add-on SDKを使って、JavaScript、HTML、CSSなどのウェブ技術を用いたFirefoxのアドオンを作成することができます。SDKにはアドオンを作成するためのJavaScript APIや、アドオンの作成、実行、テスト、そしてパッケージングを行うためのツールが含まれています。</p> +<hr> +<h3 id="チュートリアル">チュートリアル</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#getting-started">はじめに</a></dt> + <dd> + <a href="/en-US/Add-ons/SDK/Tutorials/Installation">SDKのインストール方法</a>と、アドオンの開発、テストおよびパッケージングのための<a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">cfxツールの使い方</a>について。</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#interact-with-the-browser">ブラウザと対話する</a></dt> + <dd> + <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">ウェブページを開き</a>、<a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">ページが読み込まれたことを確認し</a>、 <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">開いているタブの一覧を取得</a>してみましょう。</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#development-techniques">開発のためのテクニック</a></dt> + <dd> + <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">ユニットテスト</a>、 <a href="/en-US/Add-ons/SDK/Tutorials/Logging">ログの出力</a>、<a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">再利用可能なモジュールの作成</a>、 <a href="/en-US/Add-ons/SDK/Tutorials/l10n">ローカライズ</a>、 そして<a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">モバイル向けの開発</a>などの、アドオン開発のための一般的なテクニックについて学びましょう。</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#create-user-interfaces">ユーザーインターフェースの作成 </a></dt> + <dd> + <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">ツールバーボタン</a>、 <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">コンテキストメニュー</a>、<a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">メニュー項目</a>、そして<a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">ダイアログ</a>などの、ユーザーインターフェースの構成要素を作成しましょう。</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials#modify-web-pages">ウェブページを変化させる</a></dt> + <dd> + <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">特性のパターンにマッチした</a><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">U</a><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">RL</a>のページや、<a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">特性のタブに表示されているページ</a>の内容を修正してみましょう。</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tutorials/Annotator">まとめ</a></dt> + <dd> + Annotatorアドオンを例とした、アドオン開発の概略。</dd> + </dl> + </div> +</div> +<hr> +<h3 id="ガイド">ガイド</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Guides#contributors-guide">コントリビューターズガイド</a></dt> + <dd> + <a href="/en-US/Add-ons/SDK/Guides/Getting_Started">SDKへのコントリビュートの始め方</a>をお知らせします。また、<a href="/en-US/Add-ons/SDK/Guides/Modules">モジュール</a>や<a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">クラスと継承</a>、<a href="/en-US/Add-ons/SDK/Guides/Private_Properties">プライベートプロパティ</a>、そして<a href="/en-US/Add-ons/SDK/Guides/Content_Processes">コンテンツの処理</a>などの、SDKのコードで使われている最も重要な手法についてお知らせします。</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">SDKの下部構造</a></dt> + <dd> + SDKの根底にあるテクノロジーについて。<a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">モジュール</a>、<a href="/en-US/Add-ons/SDK/Guides/Program_ID">プログラムID</a>、<a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">Firefoxの互換性</a>を定義する規則など。</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Content script</a></dt> + <dd> + <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content scriptの扱い方</a>についての詳細なガイド。<a href="/en-US/Add-ons/SDK/Guides/Loading_content_scripts">content scriptの読み込み</a>、<a href="/en-US/Add-ons/SDK/Guides/Accessing_the_DOM">DOMへのアクセス</a>、<a href="/en-US/Add-ons/SDK/Guides/Communicating_with_other_scripts">content script同士またはほかのアドオンとのやり取りの方法</a>など。</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">SDKのイディオム</a></dt> + <dd> + SDKにおける<a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">イベントの扱い方</a>、および<a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">add-on scriptとcontent scriptの区別</a>について。</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XULからのマイグレーション</a></dt> + <dd> + <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XULで作成されたアドオンをSDKに移植する</a>ためのガイドです。 <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">二つのツールセットの比較</a>や<a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector">移植の実施例</a>を含みます。</dd> + </dl> + </div> +</div> +<hr> +<h3 id="リファレンス">リファレンス</h3> +<div class="column-container"> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/High-Level_APIs">高レベルAPI</a></dt> + <dd> + SDKの高レベルなAPIについてのドキュメント。</dd> + <dt> + <a href="/en-US/Add-ons/SDK/Tools">ツール</a></dt> + <dd> + アドオンの開発、テストおよびパッケージングに利用する<a href="/en-US/Add-ons/SDK/Tools/cfx">cfxツール</a>、ログの出力に利用する<a href="/en-US/Add-ons/SDK/Tools/console">console</a>オブジェクト、および<a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a>についてのドキュメント。</dd> + </dl> + </div> + <div class="column-half"> + <dl> + <dt> + <a href="/en-US/Add-ons/SDK/Low-Level_APIs">低レベルAPI</a></dt> + <dd> + SDKの低レベルなAPIについてのドキュメント。</dd> + </dl> + </div> +</div> +<p> </p> diff --git a/files/ja/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html b/files/ja/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html new file mode 100644 index 0000000000..32e4e520f8 --- /dev/null +++ b/files/ja/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html @@ -0,0 +1,142 @@ +--- +title: ポップアップを表示する +slug: Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Display_a_Popup +--- +<div class="note"> + <p>このチュートリアルを行うには <a href="/ja/docs/Mozilla/Add-ons/SDK/Tutorials/Installation">SDK をインストール</a> し、<a href="/ja/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_started"><code>cfx</code> の基本</a> について学んでいる必要があります。</p> + <p>このチュートリアルは、Firefox 29 以降で使用可能な <a href="/ja/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_action">アクションボタン</a> API を使用しています。</p> +</div> +<p>ポップアップダイアログを表示するには、<a href="/ja/docs/Mozilla/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a> モジュールを使用します。パネルのコンテンツは HTML を使用して定義されます。パネル内でコンテンツのスクリプトを実行できます: パネル内で実行されるスクリプトは、アドオンのメインコードには直接アクセスできませんが、パネルのスクリプトとアドオンのコードの間でメッセージを交換できます。</p> +<p>このチュートリアルでは、クリックした際にパネルを表示する <a href="/ja/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_action">アクションボタン</a> をツールバーに追加したアドオンを作成します。パネルには、<code><textarea></code> 要素のみが含まれています: <code>return</code> キーを押すと、<code><textarea></code> 内のコンテンツがメインのアドオンコードに送信されます。メインのアドオンコードでは、<a href="/ja/docs/Mozilla/Add-ons/SDK/Tutorials/Logging">メッセージをコンソールログに表示</a> します。</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7647/panel.png" style="display: block; margin-left: auto; margin-right: auto;">アドオンは 6 つのファイルで構成されています:</p> +<ul> + <li><code>main.js</code>: アドオンのメインコードで、ボタンとパネルを生成します</li> + <li><code>get-text.js</code>: パネルのコンテンツとインタラクティブなコンテンツスクリプトです</li> + <li><code>text-entry.html</code>: パネルのコンテンツそのもので、HTML で記述されます</li> + <li><code>icon-16.png</code>、<code>icon-32.png</code>、<code>icon-64.png</code>: 3 つの異なるサイズのボタン用アイコンです</li> +</ul> +<p>"main.js" は以下のようになっています:</p> +<pre class="brush: js">var data = require("sdk/self").data; +// Construct a panel, loading its content from the "text-entry.html" +// file in the "data" directory, and loading the "get-text.js" script +// into it. +var text_entry = require("sdk/panel").Panel({ + contentURL: data.url("text-entry.html"), + contentScriptFile: data.url("get-text.js") +}); + +// Create a button +require("sdk/ui/button/action").ActionButton({ + id: "show-panel", + label: "Show Panel", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +// Show the panel when the user clicks the button. +function handleClick(state) { + text_entry.show(); +} + +// When the panel is displayed it generated an event called +// "show": we will listen for that event and when it happens, +// send our own "show" event to the panel's script, so the +// script can prepare the panel for display. +text_entry.on("show", function() { + text_entry.port.emit("show"); +}); + +// Listen for messages called "text-entered" coming from +// the content script. The message payload is the text the user +// entered. +// In this implementation we'll just log the text to the console. +text_entry.port.on("text-entered", function (text) { + console.log(text); + text_entry.hide(); +});</pre> +<p>コンテンツスクリプト "get-text.js" は、以下のようになっています:</p> +<div> + <pre class="brush: js">// When the user hits return, send the "text-entered" +// message to main.js. +// The message payload is the contents of the edit box. +var textArea = document.getElementById("edit-box"); +textArea.addEventListener('keyup', function onkeyup(event) { + if (event.keyCode == 13) { + // Remove the newline. + text = textArea.value.replace(/(\r\n|\n|\r)/gm,""); + self.port.emit("text-entered", text); + textArea.value = ''; + } +}, false); +// Listen for the "show" event being sent from the +// main add-on code. It means that the panel's about +// to be shown. +// +// Set the focus to the text area so the user can +// just start typing. +self.port.on("show", function onShow() { + textArea.focus(); +});</pre> + <div> + </div> +</div> +<p>そして、"text-entry.html" ファイルで <code><textarea></code> 要素を定義します:</p> +<div> + <div> + <pre class="brush: html"><html> +<head> + <style type="text/css" media="all"> + textarea { + margin: 10px; + } + body { + background-color: gray; + } + </style> + </head> +<body> + <textarea rows="13" cols="33" id="edit-box"></textarea> + </body> +</html></pre> + <div> + </div> + </div> +</div> +<p>3 種類のアイコンファイルを "data" ディレクトリに保存します:</p> +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="width: 16px; height: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="width: 32px; height: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="width: 64px; height: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> +<p>試してください: "main.js" をアドオン内の <code>lib</code> ディレクトリに保存し、他の 5 つのファイルをアドオン内の<code>data</code> ディレクトリに保存してください:</p> +<pre>my-addon/ + data/ + get-text.js + icon-16.png + icon-32.png + icon-64.png + text-entry.html + lib/ + main.js +</pre> +<p>アドオンを実行し、ボタンをクリックすると、パネルが表示されます。テキストを入力し、"return" を押すと、コンソールに出力されます。</p> +<p>Firefox 30 以降では、<a href="/ja/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">トグルボタン</a> を使用すると、<a href="/ja/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons"> ボタンからパネルを呼び出せます</a>。</p> +<h2 id="詳しく学ぶ">詳しく学ぶ</h2> +<p><code>panel</code> モジュールについてさらに学ぶには、<a href="/ja/docs/Mozilla/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code> API リファレンス</a> をご覧ください。</p> +<p>ボタンについてさらに学ぶには、<a href="/ja/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_action">アクションボタン</a> と <a href="/ja/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">トグルボタン</a> API リファレンスをご覧ください。</p> diff --git a/files/ja/mozilla/add-ons/sdk/tutorials/getting_started/index.html b/files/ja/mozilla/add-ons/sdk/tutorials/getting_started/index.html new file mode 100644 index 0000000000..3eb0b80ec6 --- /dev/null +++ b/files/ja/mozilla/add-ons/sdk/tutorials/getting_started/index.html @@ -0,0 +1,167 @@ +--- +title: 入門 +slug: Mozilla/Add-ons/SDK/Tutorials/Getting_started +translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29 +--- +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">SDK を</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">使用してシンプルなアドオンの作成を始めるための手順の概略です</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">。</span></p> +<h2 id="必要条件">必要条件</h2> +<p>SDK を使用してアドオンを作成するには、まず最初に <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">SDKをインストールして起動するための手順</a>に従ってください。インストールは一度だけ行えばよく、SDK の起動はコマンドプロンプトごとに行う必要があります。準備が整ったら、コマンドプロンプトを見てください。</p> +<p>Linux または Mac OS X の場合、コマンドプロンプトの先頭は SDK のルートディレクトリ名となります。</p> +<pre>(addon-sdk)~/mozilla/addon-sdk > +</pre> +<p>Windows の場合、コマンドプロンプトの先頭は SDK がインストールされたディレクトリの絶対パスとなります。</p> +<pre>(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk> +</pre> +<h2 id="アドオンの初期化">アドオンの初期化</h2> +<p>コマンドプロンプトで新しいディレクトリを作成してください。SDK のルートディレクトリ以下の場所以外であれば、任意の場所に作成することができます。作成後はそのディレクトリに移動し、<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">cfx init </span><span style="line-height: 1.5;">を実行してください。</span></p> +<pre>mkdir my-addon +cd my-addon +cfx init +</pre> +<p>そうした場合、以下のように出力されるでしょう。</p> +<pre>* lib directory created +* data directory created +* test directory created +* doc directory created +* README.md written +* package.json written +* test/test-main.js written +* lib/main.js written +* doc/main.md written +Your sample add-on is now ready for testing: +try "cfx test" and then "cfx run". Have fun!" +</pre> +<h2 id="アドオンを実装する">アドオンを実装する</h2> +<p>lib ディレクトリにある main.js ファイルに、アドオンのコードを書くことができます。これは前のステップで作成されたものです。main.js を開き、以下のコードを追加してください。</p> +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("http://www.mozilla.org/"); +} +</pre> +<p>コードを追加したら、ファイルを保存してください。</p> +<p>次に、以下の3つのアイコンファイルを data ディレクトリに保存してください。</p> +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="width: 16px; height: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="width: 32px; height: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="width: 64px; height: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> +<div class="note"> + <p>上記のコードは、Firefox 29 以降においてのみ使用できる<span style="line-height: 1.5;"> </span><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action" style="line-height: 1.5;">action button</a><span style="line-height: 1.5;"> モジュールを使用していることに注意してください。それ以前のバージョンの Firefox を使用する場合、アイコンがブラウザウィンドウの右下に表示されることを除けば、以下のコードを使用して同じものを実装できます。</span></p> + <pre class="brush: js">var widgets = require("sdk/widget"); +var tabs = require("sdk/tabs"); +var widget = widgets.Widget({ + id: "mozilla-link", + label: "Mozilla website", + contentURL: require("sdk/self").data.url("icon-16.png"), + onClick: function() { + tabs.open("http://www.mozilla.org/"); + } +});</pre> +</div> +<p>コマンドプロンプトに戻り、以下のコマンドを実行します。</p> +<pre>cfx run +</pre> +<p>これは、開発中のアドオンがインストールされた状態でFirefoxの新規インスタンスを実行する、 SDK のコマンドです。Firefox が起動されると、ブラウザの右上にFirefox ロゴのアイコンが表示されます。そのアイコンをクリックすると、<a href="http://www.mozilla.org/" rel="noreferrer">http://www.mozilla.org/</a> が読み込まれた新しいタブが開きます。</p> +<div class="note"> + <p>cfx run と入力したとき、以下のようなメッセージが表示される場合があります。</p> + <pre class="bz_comment_text" id="comment_text_0">A given cfx option has an inappropriate value: + ZIP does not support timestamps before 1980</pre> + <p>もし表示されたのであれば、<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1005412">bug 1005412</a> に行き当たったことになります。これは、ダウンロードしたアイコンファイルに1970年のタイムスタンプが付与されていることを意味します。このバグが修正されるまでは、<a href="http://www.linfo.org/touch.html"><code>touch</code></a> コマンドを使ってタイムスタンプをアップデートすることによってバグを回避してください。</p> + <pre>touch icon-16.png</pre> +</div> +<p>このアドオンが行うことは、これで全部です。このアドオンは2つの SDK モジュールを使用しています。一つは、ボタンをブラウザに追加することができる <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> モジュール、もう一つは、基本的なタブの操作を可能にする <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a> モジュールです。今回は、Firefox アイコンのボタンを作成し、それをクリックすると新しいタブで Mozilla ウェブサイトのホームページを読み込むためのハンドラを追加しました。</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7643/mozilla-button.png" style="width: 382px; height: 221px; display: block; margin-left: auto; margin-right: auto;">先述のファイルを編集してみましょう。例えば、読み込むページを変更することができます。</p> +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("https://developer.mozilla.org/"); +}</pre> +<div class="note"> + <p><span style="line-height: 1.5;">上記のコードは、Firefox 29 以降においてのみ使用できる</span><span style="line-height: 1.5;"> </span><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action" style="line-height: 1.5;">action button</a><span style="line-height: 1.5;"> モジュールを使用していることに注意してください。それ以前のバージョンの Firefox を使用する場合、アイコンがブラウザウィンドウの右下に表示されることを除けば、以下のコードを使用して同じものを実装できます。</span></p> + <pre class="brush: js">var widgets = require("sdk/widget"); +var tabs = require("sdk/tabs"); +var widget = widgets.Widget({ + id: "mozilla-link", + label: "Mozilla website", + contentURL: require("sdk/self").data.url("icon-16.png"), + onClick: function() { + tabs.open("http://developer.mozilla.org/"); + } +});</pre> +</div> +<p>コマンドプロンプトで、再び <code>cfx run</code> を実行してください。今度は <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a> が表示されます。</p> +<h2 id="アドオンをパッケージ化する">アドオンをパッケージ化する</h2> +<p>アドオンが完成して配布する準備ができたとき、XPI ファイルとしてパッケージ化する必要があります。これは Firfox アドオンとしてインストール可能なファイル形式です。XPI ファイルを独自の手段で配布するか、<a href="https://addons.mozilla.org" rel="noreferrer">https://addons.mozilla.org</a> で公開しましょう。そうすれば、ほかのユーザーがそのアドオンをダウンロードし、インストールすることできます。</p> +<p><span style="line-height: 1.5;">アドオンのディレクトリで </span><code style="font-style: normal; line-height: 1.5;">cfx xpi</code><span style="line-height: 1.5;"> コマンドを実行するだけで、</span>XPI をビルドすることができます。</p> +<pre>cfx xpi +</pre> +<p>そうした場合、以下のようなメッセージが表示されるでしょう。</p> +<pre>Exporting extension to my-addon.xpi. +</pre> +<p>アドオンが動くかどうかテストするために、あなたがインストールした Firefox に XPI ファイルをインストールしてみましょう。Firefox で Ctrl+O の組み合わせ(Mac であれば Cmd+O)でキーを入力するか、Firefox の「ファイル」メニューから「ファイルを開く」を選択します。すると、ファイル選択ダイアログが表示されます。アドオンの XPI ファイルがある場所まで移動してファイルを開き、アドオンをインストールするためのプロンプトに従ってください。</p> +<h2 id="要約">要約</h2> +<p>このチュートリアルでは、3つのコマンドを使ってアドオンの構築およびパッケージ化を行いました。</p> +<ul> + <li><code>cfx init</code> による空のアドオンのテンプレートの初期化。</li> + <li><code>cfx run</code> による、アドオンがインストールされた状態での Firefox の新規インスタンスの実行。アドオンの動作確認を可能にします。</li> + <li><code>cfx xpi</code> による、配布可能な XPI ファイルとしてのアドオンのパッケージ化。</li> +</ul> +<p>これら3つのコマンドは、SDK を用いてアドオンを開発するときに使用する主要なコマンドです。利用可能な全てのコマンドとオプションを網羅した<a href="/en-US/Add-ons/SDK/Tools/cfx" rel="noreferrer" style="line-height: 1.5;">リファレンス</a><span style="line-height: 1.5;">も用意してます。</span></p> +<p>アドオン自体のコードは、<a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> と <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a> の2つのモジュールを使用しています。SDKの<a href="/en-US/Add-ons/SDK/High-Level_APIs" rel="noreferrer">高レベルなAPI</a> および <a href="/en-US/Add-ons/SDK/Low-Level_APIs" rel="noreferrer">低レベルなAPI</a> のリファレンスも用意しています。</p> +<h2 id="次のステップ">次のステップ</h2> +<p>SDKのAPIを使ってできることに慣れるためには、いくつかの<a href="/en-US/Add-ons/SDK/Tutorials" rel="noreferrer">チュートリアル</a>を進めてみてください。 </p> +<h2 id="上級テクニック">上級テクニック</h2> +<h3 id="組み込みのモジュールの上書き">組み込みのモジュールの上書き</h3> +<p>アドオンを実装するために使用する SDK モジュールは、Firefox に組み込まれているものです。アドオンを <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">cfx run</span><span style="line-height: 1.5;"> コマンドで実行したり、</span><code style="font-style: normal; line-height: 1.5;">cfx xpi</code><span style="line-height: 1.5;"> コマンドでパッケージ化したりする場合は、アドオンは Firefox が提供するバージョンのモジュールを使用します。</span></p> +<p>アドオン開発者としては、通常これは望ましい挙動です。しかし、SDK のモジュール自体を開発する場合には、当然それは望ましくない挙動でしょう。この場合、仮にSDKを <a href="https://github.com/mozilla/addon-sdk" rel="noreferrer">GitHub リポジトリ</a>からチェックアウトし、そのルートディレクトリで <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">bin/activate</a> スクリプトを実行するものとします。</p> +<p>そのときは、"-o" オプションを渡して <code>cfx run</code> または <code>cfx xpi </code>コマンドを実行します。</p> +<pre>cfx run -o +</pre> +<p>これにより、cfx は Firefox 組み込みのモジュールではなく、SDK モジュールのローカルコピーを使用するようになります。</p> +<h3 id="cfx_を実行せずに開発する">cfx を実行せずに開発する</h3> +<p><code>cfx run</code> を呼び出すたびにブラウザが再起動されるため、アドオンを頻繁に変更する場合、開発効率をいくらか損なうことになるでしょう。それに代わるものとして、特定のポートの新しい XPI ファイルを自動的にインストールする <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/" rel="noreferrer" style="line-height: 1.5;">Extension Auto-Installer</a><span style="line-height: 1.5;"> アドオンを利用した開発があります。これにより、ブラウザを再起動する必要なく新しい変更点をテストすることができます。</span></p> +<ul> + <li>アドオンに変更を加えます</li> + <li>cfx xpi コマンドを実行します</li> + <li>特定のポートにアドオンをポストします</li> +</ul> +<p>さらに、このワークフローを簡単なスクリプトで自動化できます。例えば、以下のようなスクリプトです。</p> +<pre>while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done +</pre> +<p>この方法を使った場合、<span style="line-height: 1.5;">アドオンを </span><code style="font-style: normal; line-height: 1.5;">cfx run</code><span style="line-height: 1.5;"> コマンドにより実行した場合と比べて、</span><span style="line-height: 1.5;">コンソールへのログ出力のレベルが異なることに注意してください。つまり、 </span><a href="/en-US/Add-ons/SDK/Tutorials/Logging" rel="noreferrer" style="line-height: 1.5;"><code>console.log()</code></a><span style="line-height: 1.5;"> が出力するメッセージを見たい場合、設定を微調整する必要があります。詳細については、</span><a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels" rel="noreferrer" style="line-height: 1.5;">ログ出力のレベル</a><span style="line-height: 1.5;">に関するドキュメントを参照してください。</span></p> diff --git a/files/ja/mozilla/add-ons/sdk/tutorials/getting_started_(jpm)/index.html b/files/ja/mozilla/add-ons/sdk/tutorials/getting_started_(jpm)/index.html new file mode 100644 index 0000000000..26fa4e6c4b --- /dev/null +++ b/files/ja/mozilla/add-ons/sdk/tutorials/getting_started_(jpm)/index.html @@ -0,0 +1,174 @@ +--- +title: Getting Started (jpm) +slug: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_(jpm) +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Getting_Started_(jpm) +--- +<p>{{AddonSidebar}}</p> + +<div class="blockIndicator warning"> +<p dir="ltr" id="docs-internal-guid-02db9a93-7fff-3bd4-b03f-ecfeb67b25c5">Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}</p> + +<p> </p> + +<div class="note"> +<p>Add-on SDK は開発環境の作成, 実行, テスト, アドオンのパッケージング等を行うことができるコマンドラインツールを含みます. <a href="http://nodejs.org/">Node.js </a> を元に作成された jpm と呼ばれるクライアントツールは古い cfx tool を置き換えるものです.</p> +jpm は Firefox 38 以上で使用可能です. + +<p>この記事では jpm を使ってどのように開発を行うのかを説明します.</p> +</div> + +<p><span class="seoSummary">このチュートリアルでは SDK を使ってシンプルなアドオンを作成していきます.</span></p> + +<h2 id="前提条件">前提条件</h2> + +<p>SDK を使って Firefox のアドオンを作成するには, 以下の環境が必要です:</p> + +<ul> + <li>Firefox version 38 以上. それ以前の Firefox を使用する場合, 従来の cfx tool が必要です. <a href="/en-US/Add-ons/SDK/Tutorials/Getting_started_(cfx)">getting started with cfx</a> のインストラクションを参照してください.</li> + <li>コマンドラインツール jpm. <a href="/en-US/Add-ons/SDK/Tools/jpm#Installation">installing jpm</a> のインストラクションを参照してください. 導入が終了したらコマンドプロンプトを開いてください.</li> + <li>作成したアドオンのテストのために <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Version</a> をインストールしてください.</li> +</ul> + +<h2 id="最初のアドオンの初期化">最初のアドオンの初期化</h2> + +<p>コマンドプロンプト上で, 新規ディレクトリを作成します. そのディレクトリに移動し <code>jpm init</code> , と入力し, エンターを押します:</p> + +<pre>mkdir my-addon +cd my-addon +jpm init +</pre> + +<p>作成するアドオンに関する情報を入力するように求められます: この情報はこれから作成するアドオンの <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a> ファイルを 生成するために使用されます. 今回は, それぞれのプロパティをデフォルトにするため, ただ Enter を押していきます. <code>jpm init</code> に関する詳細な情報は, <a href="/en-US/Add-ons/SDK/Tools/jpm#Command_reference">jpm command reference</a> を参照してください.</p> + +<p>これらのプロパティの,値を入力, または デフォルト値に設定した後に "package.json" の完全な内容が表示され、それを受け入れるように求められます.</p> + +<h2 id="アドオンの実装">アドオンの実装</h2> + +<p>それでは, アドオンのコードを書いて行きましょう. "entry point" の値 (これは package.json の "<a href="/en-US/Add-ons/SDK/Tools/package_json#main">main</a>" にあります) を変更していない限り, アドオンの root 直下の "index.js" です. このファイルは前のステップで作成されたものです. このファイルを開き以下のコードを追加します:</p> + +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("http://www.mozilla.org/"); +} +</pre> + +<div class="note"> +<p>jpm では "entry point" のデフォルト値は "index.js" であることに注意してください. これは, アドオンの主要なファイルが "index.js" であることを意味しています. また, これはアドオンの root ディレクトリを検索します. and it is found directly in your add-on's root.</p> + +<p>cfx では, entry point はデフォルトに "main.js" になります. これは, アドオンの root 直下の "lib" ディレクトリに置かれています.</p> +</div> + +<p>ファイルをセーブします.</p> + +<p>続いて, <strong>"data"</strong> という名前のディレクトリをアドオンの root 直下に作成し,</p> + +<pre>mkdir data +</pre> + +<p>そして以下の 3 つのアイコンファイルを <strong>"data"</strong> ディレクトリに保存します:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> + +<p>コマンドプロンプトに戻り, 以下のコマンドを入力します:</p> + +<pre>jpm run</pre> + +<p>この jpm コマンドは作成したアドオンをインストールした状態の新規 Firefox インスタンスを実行します.</p> + +<p>Firefox は見つからない場合や, Firefox Developer を代理のブラウザとしてインストールしている場合には, そこまでの path を渡す必要があるかもしれません. 例えば Ubuntu の場合:</p> + +<pre>jpm run -b /usr/bin/firefox</pre> + +<p>Firefox が起動すると, ブラウザの右上端に Firefox のロゴにアイコンが見えるはずです. このアイコンをクリックすると, 新しいタブが開き, <a href="http://www.mozilla.org/" rel="noreferrer">http://www.mozilla.org/</a> が読み込まれます.</p> + +<p>これでこのアドオンでやることは終了です. ここでは, 二つの SDK モジュール を使っています: <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> モジュール, これはブラウザにボタンを追加することができるモジュールです, <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a> モジュール, これはタブの基本的な操作を行うことができるモジュールです. 今回のケースでは, 我々は Firefox アイコンのボタンを作成しました. また, 新規タブに Mozilla のホームページを読み込むクリックハンドラを追加しました.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7643/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;"> このファイルを編集してみましょう. 例えば, 読み込むページを変更することができます.</p> + +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("https://developer.mozilla.org/"); +}</pre> + +<p>コマンドプロンプトで, <code>jpm run</code> を再度実行します. この時に, ボタンをクリックすると <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a> に移動します.</p> + +<h2 id="アドオンのパッケージング">アドオンのパッケージング</h2> + +<p>アドオンを作成し終え, 配布準備をする際には, アドオンを XPI にパッケージングする必要があります. これは Firefox アドオンをインストールするためのファイルフォーマットです. XPI を自分で配布したり, 他のユーザーがアドオンをダウンロードまたは, インストールできるようにするために, <a href="https://addons.mozilla.org" rel="noreferrer">https://addons.mozilla.org</a> に 公開することが可能です.</p> + +<p>XPIをビルドするためには, <code>jpm xpi</code> コマンドをアドオンのディレクトリで実行するだけです:</p> + +<pre>jpm xpi</pre> + +<p>次のようなメッセージを見ることができます:</p> + +<pre>JPM info Successfully created xpi at /path/to/my-addon/@my-addon-0.0.1.xpi +</pre> + +<p>これが機能することをテストするために, XPI ファイルを自身がインストールしている Firefox にインストールしてみましょう. これは Firefox から Ctrl+O (Mac では Cmd+O)キーで行うことができます. もしくは, Firefox の "File" メニューから, "Open" を選択してもよいです. するとファイル選択ダイアログが開きます: "@my-addon.xpi" ファイルを選択すると アドオンインストールプロンプトが開きます.</p> + +<p>Firefoxでは, 基本的にローカルで開発されたアドオンでも署名が必要であることに注意してください. インストールが終了した後で, インストールされたアドオンのリストで disabled が示されている場合, 署名の不足を確認してください.注意してください。 開発中や, 公開する予定がない場合, 署名の無いアドオンを実行できるように <a>about:config</a> を開き, <em>xpinstall.signatures.required</em> を <em>false</em> に設定してください. この設定を全てのアドオンに適応されてしまうため, 他の場所から悪意のあるものを誤ってインストールしないように特別な注意を払ってください.</p> + +<p>アドオンを配布するために, <a href="https://addons.mozilla.org/en-US/developers/addon/submit/2"> XPI を addons.mozilla.org に提出</a> します. また自身のサーバーにアドオンを配布したい場合, <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm#jpm_sign">jpm sign</a> を 実行します.</p> + +<h2 id="結論">結論</h2> + +<p>このチュートリアルでは, 3 つのコマンドを使いアドオンのビルドやパッケージングを行いました:</p> + +<ul> + <li><code>jpm init</code> 空のアドオンテンプレートを初期化する</li> + <li><code>jpm run</code> アドオンがインストールされた Firefox インスタンスを実行する. 作成したアドオンを試すことができる</li> + <li><code>jpm xpi</code> 配布用にアドオンをXPIファイルにパッケージングする</li> +</ul> + +<p>これらは, SDK アドオン開発している時に使用する 3 つの主要なコマンドです. これらがとれるオプションや利用できるすべてのコマンドをカバーした包括的な <a href="/en-US/Add-ons/SDK/Tools/jpm" rel="noreferrer">リファレンス</a> があります.</p> + +<p>アドオンコードでは 二つの SDK モジュール, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> や <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a> を使用しました. SDK における 全てのAPIs, <a href="/en-US/Add-ons/SDK/High-Level_APIs" rel="noreferrer">high-level</a> や <a href="/en-US/Add-ons/SDK/Low-Level_APIs" rel="noreferrer">low-level</a> に関するレファレンスは存在します.</p> + +<h2 id="What's_next">What's next?</h2> + +<p>SDK APIs を使ってできるいくつかのことを把握するために, <a href="/en-US/Add-ons/SDK/Tutorials" rel="noreferrer">tutorials</a> に挑戦してみてください.</p> diff --git a/files/ja/mozilla/add-ons/sdk/tutorials/index.html b/files/ja/mozilla/add-ons/sdk/tutorials/index.html new file mode 100644 index 0000000000..e7be834a87 --- /dev/null +++ b/files/ja/mozilla/add-ons/sdk/tutorials/index.html @@ -0,0 +1,146 @@ +--- +title: チュートリアル +slug: Mozilla/Add-ons/SDK/Tutorials +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials +--- +<p>{{AddonSidebar}}</p> + +<p>SDK を使用したアドオンの開発方法を実践的に説明したページの一覧です。</p> + +<hr> +<h3 id="はじめに"><a name="getting-started">はじめに</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tools/jpm#Installation">インストール</a></dt> + <dd>Windows、OS X および Linux 上で、SDK をダウンロード、インストール、および初期化します。</dd> +</dl> + +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">トラブルシューティング</a></dt> + <dd>よくある問題を解決する場合や、支援を求める場合のヒントを説明します。</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">入門</a></dt> + <dd>jpm を使用してシンプルなアドオンを作成を始めるための手順の概略です</dd> + <dt></dt> +</dl> +</div> +</div> + +<hr> +<h3 id="ユーザーインターフェイスの作成"><a name="create-user-interfaces">ユーザーインターフェイスの作成</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">ツールバーボタンの追加</a></dt> + <dd>Firefox アドオンツールバーにボタンを追加します。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Firefoxへのメニュー項目の追加</a></dt> + <dd>Firefox のメインメニューにアイテムを追加します。</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Display_a_Popup">ポップアップの表示</a></dt> + <dd>HTML および JavaScript を使用して実装したポップアップダイアログを表示します。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">コンテキストメニュー項目の追加</a></dt> + <dd>Firefox のコンテキストメニューに項目を追加します。</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="ブラウザの操作"><a name="interact-with-the-browser">ブラウザの操作</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Open_a_Web_Page">Webページを開く</a></dt> + <dd>モジュールを用いて、新しいタブまたはウィンドウでWebページを開き、そのコンテンツにアクセスします。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Listen_for_Page_Load">ページの読み込みを確認する</a></dt> + <dd>モジュールを用いて、新しい Web ページが読み込まれたときに通知を受け取り、それらの Web ページのコンテンツにアクセスします。</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/List_Open_Tabs">開いているタブの一覧を表示する</a></dt> + <dd>tabs モジュールを用いて、現在開いているすべてのタブに対して反復処理を行い、それらのコンテンツにアクセスします。</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Webページの変更"><a name="modify-web-pages">Webページの変更</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">URLに基づいたWebページの変更</a></dt> + <dd>URL に基づいて Web ページを検索するフィルタを作成します。フィルタに一致する URL の Web ページを読み込んだときに、フィルタ内の指定したスクリプトを実行します。</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">アクティブなWebページの変更</a></dt> + <dd>現在アクティブな Web ページに、動的にスクリプトを読み込みます。</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="開発テクニック"><a name="development-techniques">開発テクニック</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Logging">ログの出力</a></dt> + <dd>診断を行うために、メッセージをコンソールにログとして出力します。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Creating_reusable_modules">再利用可能なモジュールの作成</a></dt> + <dd>アドオンを別個のモジュールとして体系化し、開発、デバッグ、およびメンテナンスを容易にします。 また、作成したモジュールが入った再利用可能なパッケージを作成し、他の開発者もそのモジュールを使用できるようにします。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Unit_testing">ユニットテスト</a></dt> + <dd>SDK のテストフレームワークを使用して、ユニットテストを作成し実行します。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Chrome_authority">Chrome 権限</a></dt> + <dd>この権限を使用すると、アドオンが Components オブジェクトにアクセスできるので、どんな XPCOM オブジェクトでも読み込んで使用できるようになります。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Creating_event_targets">イベントターゲットの作成</a></dt> + <dd>定義したオブジェクトがイベントを発生させられるようにします。</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">読み込みと読み込み解除の確認</a></dt> + <dd>Firefox にアドオンが読み込まれたり、読み込み解除されたりしたときに通知を受け取ります。またコマンドラインからアドオンに引数を渡します。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Using_third-party_modules_(jpm)">サードパーティーモジュールの使用</a></dt> + <dd>SDK 自体に含まれていない追加のモジュールをインストールして使用します。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/l10n">ローカライゼーション</a></dt> + <dd>ローカライズ可能なコードを作成します。</dd> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Mobile_development">モバイル開発</a></dt> + <dd>Android 用 Firefox モバイルのアドオン開発を始める手順を説明します。</dd> +</dl> + +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Mobile_development">アドオン用のデバッガー</a></dt> + <dd>アドオン内のJavaScriptのデバッグを行います。</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="応用"><a name="putting-it-together">応用 </a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ja/Add-ons/SDK/Tutorials/Annotator">アノテーターアドオン</a></dt> + <dd>より複雑なアドオンの開発作業を順を追って説明します。</dd> +</dl> +</div> +</div> diff --git a/files/ja/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/ja/mozilla/add-ons/sdk/tutorials/installation/index.html new file mode 100644 index 0000000000..b01e14ded3 --- /dev/null +++ b/files/ja/mozilla/add-ons/sdk/tutorials/installation/index.html @@ -0,0 +1,72 @@ +--- +title: インストール +slug: Mozilla/Add-ons/SDK/Tutorials/Installation +translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation +--- +<h2 id="前提条件">前提条件</h2> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">アドオン SDK を使用して開発を行うには、以下が必要です。</span></p> +<ul> + <li> + <p><a href="http://www.python.org/">Python</a> 2.5、2.6 または 2.7。<span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">Python バージョン 3.0 と 3.1 はサポートされていません。</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">環境変数 PATH に Python のパスを設定してください。</span></p> + </li> + <li> + <p>Firefox</p> + </li> + <li> + <p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">SDK 本体。</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">最新の安定したバージョンの SDK は、</span><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.tar.gz" style="line-height: 1.5;"><span style="line-height: 1.5;">tarball </span><span style="line-height: 19.9939994812012px; color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px;">または </span><span style="line-height: 19.9939994812012px; color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px;">zip ファイル として入手できます。あるいは、最新の開発バージョン</span></a>を <a href="https://github.com/mozilla/addon-sdk" style="line-height: 1.5;">GitHub </a>リポジトリ<a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.tar.gz" style="line-height: 1.5;"><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">から入手することもできます。</span></a></p> + </li> +</ul> +<p><span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Mac OS Xでの Homebrew を使ったインストール</span></p> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">アドオン SDK を </span><a href="http://brew.sh/" style="line-height: 1.5;">Homebrew</a><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> を用いてインストールするには、</span><span style="line-height: 1.5;">以下のコマンドを実行してください。</span></p> +<pre>brew install mozilla-addon-sdk</pre> +<h2 id="Mac_OS_X_Linux_でのインストール">Mac OS X / Linux でのインストール</h2> +<p>shell や commnd prompt を用いて、任意の場所にアドオン SDK のファイルを展開し、SDK のルートディレクトリに移動してください。以下はコマンドの一例です。</p> +<pre>tar -xf addon-sdk.tar.gz +cd addon-sdk +</pre> +<p>次に、 Bash を使用している場合は以下を実行します。</p> +<pre>source bin/activate +</pre> +<p>Bash 以外を使用している場合は、以下を実行します。</p> +<pre>bash bin/activate +</pre> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">コマンドプロンプトの先頭に、SDK のルートディレクトリ名が追加されます。</span></p> +<pre>(addon-sdk)~/mozilla/addon-sdk > +</pre> +<h2 id="Windows_でのインストール">Windows でのインストール</h2> +<p>shell や commnd prompt を用いて、任意の場所にアドオン SDK のファイルを展開し、SDK のルートディレクトリに移動してください。以下はコマンドの一例です。</p> +<pre>7z.exe x addon-sdk.zip +cd addon-sdk +</pre> +<p>次に、以下を実行します。</p> +<pre>bin\activate +</pre> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">コマンドプロンプトの先頭に、SDK のルートディレクトリ名が追加されます。</span></p> +<pre>(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk> +</pre> +<h2 id="SDK_仮想環境">SDK 仮想環境</h2> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">上記のようにコマンドプロンプトが変更されていれば</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">、シェルで仮想環境が起動し、アドオン SDK コマンドラインツールにアクセスできます。</span></p> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">仮想環境は</span> <code>deactivate</code> <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">を実行していつでも終了することができます。</span></p> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">仮想環境は、そのコマンドプロンプトにおいてのみ有効です。</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">コマンドプロンプトを閉じると</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">仮想環境が終了するので</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">、再び</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">仮想環境を起動するには、</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">新しいコマンドプロンプトを起動し </span><code style="font-style: normal; font-size: 13px; vertical-align: baseline; font-family: 'andale mono', monospace; color: rgb(68, 68, 68); line-height: 19.9939994812012px; background-clip: initial;">source bin/activate</code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> または </span><code style="font-style: normal; font-size: 13px; vertical-align: baseline; font-family: 'andale mono', monospace; color: rgb(68, 68, 68); line-height: 19.9939994812012px; background-clip: initial;">bin¥activate</code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> と入力する必要があります。</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">新しいコマンドプロンプトを開くだけでは、SDK は起動されません。</span></p> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">ディスク上の異なる場所に SDK の複数のコピーを置き、切り替えて使用することもできます。</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">さらには、別個のコマンドプロンプトで、それぞれの</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">コピー</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">を同時に起動することも可能です。</span></p> +<h3 id="activate_永続化"><code>activate</code> 永続化</h3> +<p><code>activate</code> が行う処理は単に、<span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">最上位レベルの </span><code style="font-style: normal; font-size: 13px; vertical-align: baseline; font-family: 'andale mono', monospace; color: rgb(68, 68, 68); line-height: 19.9939994812012px; background-clip: initial;">bin</code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> ディレクトリにあるスクリプトを使用して、現在のコマンドプロンプトに関する複数の環境変数を設定することだけです。</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">そこで、使用する環境でこれらの変数が永続化されるように設定すれば、新しくコマンドプロンプトを開くだけでそれらの変数が読み込まれ、仮想環境が常に使用できます。</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">これにより、新しいコマンドプロンプトを開くたびに </span><code style="font-style: normal; font-size: 13px; vertical-align: baseline; font-family: 'andale mono', monospace; color: rgb(68, 68, 68); line-height: 19.9939994812012px; background-clip: initial;">activate</code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> と入力する必要がなくなります。</span></p> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">ただし、コマンドプロンプトに関する変数が、新しい SDK のリリース時に変更されることがあります。設定が必要な変数を特定するために </span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">SDK の起動スクリプトを参照するのが最良の方法です</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">。</span><span style="line-height: 1.5;"> B</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">ash 環境(Linux および Mac OS X)と Windows 環境では、起動に使用するスクリプトも、それによって設定される変数も異なります。</span></p> +<h4 id="Windows">Windows</h4> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">Windows では、</span> <code>bin\activate</code> <span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">を実行すると </span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">activate.bat </code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">が使用されます。SDK を常に有効にするには、コマンドラインから</span><code style="font-style: normal; line-height: 1.5;"> </code><code style="font-style: normal; line-height: 1.5;">setx</code><span style="line-height: 1.5;"> </span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">ツールを使用するか、コントロール パネルを使用します。</span></p> +<h4 id="LinuxMac_OS_X">Linux/Mac OS X</h4> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">Linux および Mac OS X では、</span> <code>source bin/activate</code> により <code>activate</code> Bash スクリプトが実行されます。<span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">SDK を常に有効にするには、</span><span style="line-height: 1.5;">Linuxの場合は</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">~/.bashrc</code><span style="line-height: 1.5;"> を、</span><span style="line-height: 1.5;">Mac OS Xの場合は</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">~/.bashprofile </code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">を使用します。</span></p> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">あるいは、</span><code style="font-style: normal; font-size: 13px; vertical-align: baseline; font-family: 'andale mono', monospace; color: rgb(68, 68, 68); line-height: 19.9939994812012px; background-clip: initial;">‾/bin</code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> ディレクトリにある </span><code style="font-style: normal; font-size: 13px; vertical-align: baseline; font-family: 'andale mono', monospace; color: rgb(68, 68, 68); line-height: 19.9939994812012px; background-clip: initial;">cfx</code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> プログラムへのシンボリックリンクを作成する方法もあります。</span></p> +<pre>ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx +</pre> +<h2 id="サニティチェック">サニティチェック</h2> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">シェルプロンプトで以下を実行します。</span></p> +<pre>cfx +</pre> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">一行目には以下のように表示されるでしょう。それに続いて、多数の使用方法の情報が表示されます。</span></p> +<pre>Usage: cfx [options] [command] </pre> +<p><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">これが</span> <a href="/en-US/Add-ons/SDK/Tools/cfx"><code>cfx</code> コマンドラインプログラム</a> です。<code style="font-style: normal; font-size: 13px; vertical-align: baseline; font-family: 'andale mono', monospace; color: rgb(68, 68, 68); line-height: 19.9939994812012px; background-clip: initial;">cfx</code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> は、アドオン SDK の主要なインターフェイスで、Firefox の起動とアドオンのテスト、アドオンを配布するためのパッケージング、</span><span style="line-height: 1.5;">説明書</span><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;">の表示、および単体テストの実行に使用します。</span></p> +<h2 id="問題が発生した場合">問題が発生した場合</h2> +<p><a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">トラブルシューティング</a> のページを参照してください。</p> +<h2 id="次のステップ">次のステップ</h2> +<p><a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">cfx 入門</a>のチュートリアルに目を通してください。<code style="font-style: normal; font-size: 13px; vertical-align: baseline; font-family: 'andale mono', monospace; color: rgb(68, 68, 68); line-height: 19.9939994812012px; background-clip: initial;">cfx</code><span style="color: rgb(68, 68, 68); font-family: 'helvetica neue', arial, helvetica, sans-serif; font-size: 13px; line-height: 19.9939994812012px;"> ツールによってアドオンを作成する方法を説明します。</span></p> diff --git a/files/ja/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html b/files/ja/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html new file mode 100644 index 0000000000..80db0e8976 --- /dev/null +++ b/files/ja/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html @@ -0,0 +1,112 @@ +--- +title: トラブルシューティング +slug: Mozilla/Add-ons/SDK/Tutorials/Troubleshooting +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Troubleshooting +--- +<p>アドオン SDKを起動したり実行したりする際に問題があっても、慌てる必要はありません!問題を突き止めるにはどこから着手すれば良いのかを順番に見ていきましょう。</p> +<h2 id="Quarantine_Problem_on_Mac_OS_X">Quarantine Problem on Mac OS X</h2> +<p>On Mac OS X, you might see the following error when you try to run <code>cfx</code>:</p> +<pre>/path/to/sdk/bin/cfx: /usr/bin/env: bad interpreter: Operation not permitted +</pre> +<p>This might be because the <code>cfx</code> executable file has been placed in quarantine during download from the Internet.</p> +<p>To get it out of quarantine, use the <code>xattr -d</code> command, specifying <code>com.apple.quarantine</code> as the name of the attribute to delete, and <code>cfx</code> as the file from which to delete that attribute:</p> +<pre>xattr -d com.apple.quarantine /path/to/sdk/bin/cfx +</pre> +<h2 id="Check_Your_Python">Check Your Python</h2> +<p>The SDK's <code>cfx</code> tool runs on Python. If you're having trouble getting <code>cfx</code> to run at all, make sure you have Python correctly installed.</p> +<p>Try running the following from a command line:</p> +<pre> python --version +</pre> +<p><code>cfx</code> currently expects Python 2.5 or 2.6. Older and newer versions may or may not work.</p> +<h2 id="Check_Your_Firefox_or_XULRunner">Check Your Firefox or XULRunner</h2> +<p><code>cfx</code> searches well known locations on your system for Firefox or XULRunner. <code>cfx</code> may not have found an installation, or if you have multiple installations, <code>cfx</code> may have found the wrong one. In those cases you need to use <code>cfx</code>'s <code>--binary</code> option. See the <a href="/en-US/Add-ons/SDK/Tools/cfx">cfx Tool</a> guide for more information.</p> +<p>When you run <code>cfx</code> to test your add-on or run unit tests, it prints out the location of the Firefox or XULRunner binary that it found, so you can check its output to be sure.</p> +<h2 id="Check_Your_Text_Console">Check Your Text Console</h2> +<p>When errors are generated in the SDK's APIs and your code, they are logged to the text console. This should be the same console or shell from which you ran the <code>cfx</code> command.</p> +<h2 id="Don't_Leave_Non-SDK_Files_Lying_Around">Don't Leave Non-SDK Files Lying Around</h2> +<p>Currently the SDK does not gracefully handle files and directories that it does not expect to encounter. If there are empty directories or directories or files that are not related to the SDK inside your <code>addon-sdk</code> directory or its sub-directories, try removing them.</p> +<h2 id="Search_for_Known_Issues">Search for Known Issues</h2> +<p>Someone else might have experienced your problem, too. Other users often post problems to the <a href="http://groups.google.com/group/mozilla-labs-jetpack/topics">project mailing list</a>. You can also browse the list of <a href="https://bugzilla.mozilla.org/buglist.cgi?order=Bug%20Number&resolution=---&resolution=DUPLICATE&query_format=advanced&product=Add-on%20SDK">known issues</a> or <a href="https://bugzilla.mozilla.org/query.cgi?format=advanced&product=Add-on%20SDK">search</a> for specific keywords.</p> +<h2 id="Contact_the_Project_Team_and_User_Group">Contact the Project Team and User Group</h2> +<p>SDK users and project team members discuss problems and proposals on the <a href="http://groups.google.com/group/mozilla-labs-jetpack/topics">project mailing list</a>. Someone else may have had the same problem you do, so try searching the list. You're welcome to post a question, too.</p> +<p>You can also chat with other SDK users in <a href="http://mibbit.com/?channel=%23jetpack&server=irc.mozilla.org">#jetpack</a> on <a href="http://irc.mozilla.org/">Mozilla's IRC network</a>.</p> +<p>And if you'd like to <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Add-on%20SDK&component=General">report a bug in the SDK</a>, that's always welcome! You will need to create an account with Bugzilla, Mozilla's bug tracker.</p> +<h2 id="Run_the_SDK's_Unit_Tests">Run the SDK's Unit Tests</h2> +<p>The SDK comes with a suite of tests which ensures that its APIs work correctly. You can run it with the following command:</p> +<pre> cfx testall +</pre> +<p>Some of the tests will open Firefox windows to check APIs related to the user interface, so don't be alarmed. Please let the suite finish before resuming your work.</p> +<p>When the suite is finished, your text console should contain output that looks something like this:</p> +<pre> Testing cfx... + ............................................................. + ---------------------------------------------------------------------- + Ran 61 tests in 4.388s + +OK + Testing reading-data... + Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'. + Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmpu26K_5.mozrunner'. + .info: My ID is 6724fc1b-3ec4-40e2-8583-8061088b3185 + .. + 3 of 3 tests passed. + OK + Total time: 4.036381 seconds + Program terminated successfully. + Testing all available packages: nsjetpack, test-harness, api-utils, development-mode. + Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'. + Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmp-dzeaA.mozrunner'. + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ............................................... + +3405 of 3405 tests passed. + OK + Total time: 43.105498 seconds + Program terminated successfully. + All tests were successful. Ship it! +</pre> +<p>If you get lots of errors instead, that may be a sign that the SDK does not work properly on your system. In that case, please file a bug or send a message to the project mailing list. See the previous section for information on doing so.</p> |