path: root/files/ja/archive/b2g_os/quickstart/初めてのアプリ/index.html

---
title: 初めてのアプリ
slug: Archive/B2G_OS/Quickstart/初めてのアプリ
tags:
  - Apps
  - Guide
translation_of: Archive/B2G_OS/Quickstart/Your_first_app
---
<div class="note">
<p><strong>注記</strong>: Quickstart セクションは新しく、<a href="/ja/Apps/Quickstart">Firefox OS アプリの基礎</a> にフォーカスしたものに更新されていて、以前の Quickstart 記事とは置き換わっています。古い記事よりも使いやすく学びやすくなったドキュメントになっているでしょう。</p>
</div>

<article class="brush: js">
<div class="summary">
<p>Open Web Apps は、Web 開発者が何年も望んでいた HTML / CSS / JavaScript だけで作られたインストール可能なアプリに対応しているクロスプラットフォーム (Open Web Apps のための Firefox OS などの) を提供します。<span class="seoSummary">このガイドは、素晴らしいアプリを作成するために基本アーキテクチャですぐに動作させる方法とビルド手順を紹介します。</span></p>
</div>

<p>このガイドに沿って作業したい場合、<a href="https://github.com/chrisdavidmills/mdn-app-template">クイックスタートアプリテンプレート</a> をダウンロードしてください。これに含まれているものについての詳細は、<a href="/ja/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">アプリテンプレート</a> ガイドをご覧ください。</p>

<h2 id="アプリ構造">アプリ構造</h2>

<h3 id="パッケージ型_vs._ホスト型アプリ">パッケージ型 vs. ホスト型アプリ</h3>

<p>パッケージ型とホスト型の 2 つの Open Web Apps のタイプが存在します。パッケージ型アプリは、アプリケーションのすべてのアセット (HTML / CSS / JavaScript / 画像 / マニフェストなど) が含まれる zip ファイルです。ホスト型アプリは、与えられたドメインでサーバー上から起動するアプリです。両方のアプリのタイプはマニフェストを利用します。Firefox Marketplace でアプリが一覧に表示される際に、アプリは zip ファイルとしてアップロードするか、ホスト型アプリとして存在する URL が提供する必要があります。</p>

<div style="width: 480px; margin: 0 auto;">
<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/Q7x-B13y33Q?rel=0&amp;html5=1"></iframe></div></div><p></p>

<div class="video-caption">
<p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p>
</div>
</div>

<p>このガイドの目的は、<code>localhost</code> アドレスに存在するホスト型アプリを作成することです。アプリを Firefox Marketplace に表示する準備ができると、パッケージ型もしくは、ホスト型として起動するかを選択することができます。</p>

<h3 id="アプリマニフェスト">アプリマニフェスト</h3>

<p>すべての Firefox アプリはアプリのルートに配置する manifest.webapp ファイルが必要です。<code><a href="/ja/Apps/Manifest">manifest.webapp</a></code> はアプリのバージョン、名前、説明、アイコン、ロケール、インストールすることのできるドメインなど多くの重要な情報を提供します。必須項目はアプリの名前と説明だけです。アプリテンプレート内にある簡単なマニフェストの例は以下のようなものになります:</p>

<pre class="brush: js">{
  "version": "0.1",
  "name": "Open Web App",
  "description": "Your new awesome Open Web App",
  "launch_path": "/app-template/index.html",
  "icons": {
    "16": "/app-template/app-icons/icon-16.png",
    "48": "/app-template/app-icons/icon-48.png",
    "128": "/app-template/app-icons/icon-128.png"
  },
  "developer": {
    "name": "Your Name",
    "url": "http://yourawesomeapp.com"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "http://yourawesomeapp.com"
      }
    },
    "it": {
      "description": "La tua nuova fantastica Open Web App",
      "developer": {
        "url": "http://yourawesomeapp.com"
      }
    }
  },
  "default_locale": "en"
}</pre>

<div style="width: 480px; margin: 0 auto;">
<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/dgAUgHQOm8M?rel=0&amp;html5=1"></iframe></div></div><p></p>

<div class="video-caption">
<p>Made in partnership with Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p>
</div>
</div>

<p> </p>

<p>基本的なマニフェストは整いました。マニフェストに関するもっと詳しい情報は <a href="/ja/Apps/Manifest">App Manifset</a> の記事をご覧ください。</p>

<h2 id="アプリのレイアウトと設計">アプリのレイアウトと設計</h2>

<p>様々な端末上で画面解像度が増えるにつれ、レスポンシブデザインはますます重要になっています。アプリのメインターゲット端末が Firefox OS のようなモバイルプラットフォームでも、他の端末でも同じようにアクセスできます。<a href="/ja/docs/Web/Guide/CSS/Media_queries">CSS メディアクエリ</a> を使用すると、レイアウトを端末に適応することができます。以下に、スケルトン CSS の例を示します:</p>

<pre class="brush: css">/* The following are examples of different CSS media queries */

/* Basic desktop/screen width sniff */
@media only screen and (min-width : 1224px) {
  /* styles */
}

/* Traditional iPhone width */
@media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* styles */
}

/* Device settings at different orientations */
@media screen and (orientation:portrait) {
  /* styles */
}
@media screen and (orientation:landscape) {
  /* styles */
}</pre>

<p>多くの JavaScript と CSS のフレームワークは、レスポンシブデザインとモバイルアプリ開発に役立ちます(<a href="http://getbootstrap.com/">Bootstrap</a> など)。アプリや開発スタイルに最も適したフレームワークを選んでください。</p>

<h2 id="Web_API">Web API</h2>

<p>JavaScript API は端末と同様に次々と作成され拡張されています。Mozilla の <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> は数十もの標準モバイル機能の JavaScript API へ影響を与えました。<a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> のページで、端末のサポートとステータスの一覧を確認できます。以下に例のような JavaScript の機能検知はまだベストプラクティスです:</p>

<pre class="brush: js">// If this device supports the vibrate API...
if('vibrate' in navigator) {
    // ... vibrate for a second
    navigator.vibrate(1000);
}</pre>

<p>以下の例では、端末のバッテリ状態の変化に基づいて <code>&lt;div&gt;</code> の表示スタイルが変更されます。</p>

<div>
<pre class="brush: javascript">// Create the battery indicator listeners
(function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
      indicator, indicatorPercentage;

  if(battery) {
    indicator = document.getElementById('indicator'),
    indicatorPercentage = document.getElementById('indicator-percentage');

    // Set listeners for changes
    battery.addEventListener('chargingchange', updateBattery);
    battery.addEventListener('levelchange', updateBattery);

    // Update immediately
    updateBattery();
  }

  function updateBattery() {
    // Update percentage width and text
    var level = (battery.level * 100) + '%';
    indicatorPercentage.style.width = level;
    indicatorPercentage.innerHTML = 'Battery: ' + level;
    // Update charging status
    indicator.className = battery.charging ? 'charging' : '';
  }
})();</pre>

<p>上記のコード中では、<a href="/ja/docs/Web/API/window.navigator.battery">Battery API</a> を一度サポートしているか確認してから、<code>chargingchange</code> <code>や</code> <code>levelchange</code> <code>のリスナーを追加して、要素の表示を更新しています。以下のクイックスタートテンプレート追加して、動作しているか確認することが出来ます。</code></p>

<p><a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> のページで、最新のデバイス API のステータスを確認してください。</p>

<h3 id="インストール_API_機能">インストール API 機能</h3>

<p>クイックスタートアプリのテンプレートサンプルでは、アプリを標準的な Web ページとして表示したときに、クリックできるインストールボタンを実装していています。クリックすると Firefox OS にアプリとしてインストールします。ボタンのマークアップに特別なことはしていません:</p>

<pre class="brush: html">&lt;button id="install-btn"&gt;Install app&lt;/button&gt;</pre>

<p>このボタンの機能はインストール API (install.jsをご覧ください) を使用して実装されています:</p>

<pre class="brush: js">var manifest_url = location.href + 'manifest.webapp';

function install(ev) {
  ev.preventDefault();
  // define the manifest URL
  // install the app
  var installLocFind = navigator.mozApps.install(manifest_url);
  installLocFind.onsuccess = function(data) {
    // App is installed, do something
  };
  installLocFind.onerror = function() {
    // App wasn't installed, info is in
    // installapp.error.name
    alert(installLocFind.error.name);
  };
};

// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
var button = document.getElementById('install-btn');

var installCheck = navigator.mozApps.checkInstalled(manifest_url);

installCheck.onsuccess = function() {
  if(installCheck.result) {
    button.style.display = "none";
  } else {
    button.addEventListener('click', install, false);
  };
};
</pre>

<p>簡単に何をしているのかを見ていきます。</p>

<ol>
 <li>インストールボタンを参照して、<code>button</code> 変数にそれを格納します。</li>
 <li><code>navigator.mozApps.checkInstalled</code> を使用して、<code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> <code>の</code>マニフェストファイルに定義されたアプリが既に端末にインストールされているかを確認します。この検証結果は <code>installCheck</code> <code>変数へ格納します。</code></li>
 <li>確認が成功したら、成功イベントが発火し、<code>installCheck.onsuccess = function() { ... }</code> <code>が実行されます。</code></li>
 <li><code>installCheck.result</code> <code>が存在するかを</code> <code>if</code> <code>文で確認します。</code>もし存在する場合、アプリはインストール済みを意味するため、ボタンを非表示にします。インストールボタンは既にインストール済みであれば不要です。</li>
 <li>アプリがインストールされていない場合、ボタンクリック時に <code>install()</code> <code>関数が</code>実行されるように、ボタンにリスナーを追加します。</li>
 <li>ボタンがクリックされ <code>install()</code> <code>関数が実行されると、</code><code>manifest_url</code> <code>と呼ばれる変数にマニフェストファイルのロケーションを格納し、</code><code>navigator.mozApps.install(manifest_url)</code> <code>を使用してアプリをインストールして、インストールの参照を</code> <code>installLocFind</code> <code>変数へ格納します。</code>インストールも成功 / 失敗のイベントを受け取ることができるので、成功 / 失敗の時のアクションを実行することが出来ます。</li>
</ol>

<p>最初にインストール可能な Web アプリに遭遇した時、<a href="/ja/Apps/Apps_JavaScript_API">API の実装状況</a> を検証したいでしょう。</p>

<div class="note">
<p>注記: インストール可能な Open Web Apps は "1つのオリジンに対して1つのアプリ" のセキュリティポリシーがあります。基本的に、1つのオリジンで1つ以上のインストール可能なアプリをホスティングすることはできません。これはちょっとトリッキーなテストになりますが、アプリごとのに異なるサブドメインを作ったり、Firefox OS シミュレータを使ってテストをしたり、デスクトップにインストール可能なWeb Apps をインストールすることになりますが、Firefox Aurora/Nightly のインストール機能を使うなどの回避手段は存在します。<br>
 オリジンについての更なる情報は<a href="/ja/Apps/FAQs/About_app_manifests">アプリマニフェストについてのFAQ</a> をご覧ください。</p>
</div>

<h2 id="WebRT_API_(パーミッションベース_API)">WebRT API (パーミッションベース API)</h2>

<p>利用可能な WebAPI は数多くありますが、機能を有効にするためのパーミッションが必要です。アプリは以下のように <code>manifest.webapp</code> <code>ファイルにパーミッションを登録しなくてはなりません。</code></p>

<pre class="brush: js">// New key in the manifest: "permissions"
// Request access to any number of APIs
// Here we request permissions to the systemXHR API
"permissions": {
    "systemXHR": {}
}</pre>

<p>パーミッションには、以下のように3つのレベルが存在します。</p>

<ul>
 <li>Normal — アクセスパーミッションを記載する必要のないAPI群</li>
 <li>Privileged — アプリ開発者が自身のアプリのためにマニフェストファイルへパーミッションを記載していたり、信頼されたソースを通して配布している場合に利用可能なAPI群</li>
 <li>Certified — 電話やメッセージサービスなどの端末のクリティカルな機能を制御するAPI群。これらは一般的にサードパーティーが開発する時には利用することが出来ません。</li>
</ul>

<p>パーミッションレベルの更なる情報については、<a href="/ja/Apps/Packaged_apps#Types_of_packaged_apps">パッケージ型アプリの種類</a>を参照してください。どのAPIがパーミッションが必要で、どのパーミッションが必要なのかは、<a href="/ja/Apps/App_permissions">アプリの許可設定</a>をご覧ください。</p>

<div class="note">
<p>Firefox OS シミュレータではすべてのWeb API は実装されていない点については注意してください。</p>
</div>

<h2 id="ツールとテスト">ツールとテスト</h2>

<p>モバイル端末をサポートするときテストは非常に重要になってきます。インストール可能なOpen Web Apps のテストのオプションは多く存在します。</p>

<h3 id="Firefox_OS_シミュレータを含むWebIDE">Firefox OS シミュレータを含むWebIDE</h3>

<p><a href="/en-US/docs/Tools/WebIDE">WebIDE</a> と呼ばれるテストツールの新参者があります。このツールはデスクトップ版Firefox とUSB 経由の互換端末(または、Firefox OS シミュレータ)と接続し、アプリを直接端末へインストールしたり、アプリの検証をしたり、端末上で動作させながらデバッグすることが出来ます。</p>

<h3 id="ユニットテスト">ユニットテスト</h3>

<p>ユニットテストは、異なる端末でのテストするときやビルドするときにとても価値のあるものになります。 jQuery の<a href="http://qunitjs.com/">QUnit </a>はクライアントサイドのテストユーティリティとして人気がありますが、あなたが望むほかのテストツールを使っても構いません。</p>

<h3 id="端末にFirefox_OS_をインストールする">端末にFirefox OS をインストールする</h3>

<p>Firefox OS はオープンなプラットフォームなので、あなたの端末にFirefoxOS をインストールしたり、ビルドするためのコードやツールは入手可能です。ビルドとインストール説明や、同じように端末へインストール可能かどうかの注意書きについては、<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a> から見つけ出すことが出来ます。</p>

<p>Firefox OS 開発者プレビュー専用のデバイスは入手可能です。更なる情報については我々の<a href="https://marketplace.firefox.com/developers/dev_phone">開発端末ページ</a>をご覧ください。</p>

<h2 id="アプリの提出と公開">アプリの提出と公開</h2>

<p>一度アプリが完成すると、標準的なウェブサイトまたはアプリ(更なる情報は、<a href="/ja/Marketplace/Options/Self_publishing">アプリの自主配布</a>をご覧ください)としてホスティングすることが出来ます。または、<a href="https://marketplace.firefox.com">Firefox マーケットプレイス</a>へ<a href="https://marketplace.firefox.com/developers/submit/app/manifest">提出</a>することが出来ます。アプリのマニフェストは検証され、どの端末でアプリをサポートするかを選択することが出来ます(例：Firefox OS、デスクトップ版Firefox、モバイル版Firefox、タブレット版Firefox)<br>
 一度検証されると、アプリについての追加情報(スクリーンショット、説明、価格など)を加えることが出来ます。そして、公式に提出されたアプリとしてマーケットプレイスにリスト化されます。一度承認を得ると、アプリは全世界から購入・インストールすることが可能になります。</p>

<h3 id="マーケットプレイスと表示情報についての更なる情報">マーケットプレイスと表示情報についての更なる情報</h3>

<ol>
 <li><a href="/ja/Apps/Submitting_an_app">Firefox OS マーケットプレイスにアプリを提出する</a></li>
 <li><a href="/ja/Apps/Marketplace_review_criteria">マーケットプレイスのレビュー基準</a></li>
 <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&amp;autoplay=false">アプリ提出までのビデオ</a></li>
</ol>
</div>
</article>