アプリ開発関連ドキュメントの索引

128 ページあります:

# ページ タグと要約
1 アプリセンター Apps, Mobile, Modern web apps, Progressive web apps, Web Development
最新のウェブ技術とアイデアを使ってモダンなウェブアプリ (最新のモダンブラウザーにおいてとても強力であるが、力のないブラウザーでも受け入れられるユーザー体験を提供するウェブアプリ) を作る方法を学びます。
2 App Installation and Management API Apps, Apps API
Open Web Apps の JavaScript API は、Web アプリをインストールしたり、ユーザがインストールしているクライアントサイドの Web アプリのリストを管理したりするためのプログラミングインタフェースです。このリストは「アプリケーションレポジトリ」と呼ばれます。
3 navigator.mozApps.amInstalled Apps, Apps API
アプリがインストール済みかどうかを判断する手段をアプリに提供します。このメソッドは通常、アプリをホストしている配布元から呼ばれます。
4 navigator.mozApps.getInstalledBy Apps, Apps API
コールバック関数を通じて、呼び出し元ドメインによってインストールされたアプリを返します。これにより、アプリディレクトリやアプリストアが、訪問者に代わってインストール済みアプリを判別することができます。
5 navigator.mozApps.mgmt.clearWatch Apps, Apps API, NeedsExample
ウォッチコールバック関数を削除します。この関数が呼び出された後、指定されたウォッチ·コールバックはもはや呼び出されません。
6 navigator.mozApps.mgmt.list Apps, Apps API
ユーザーのリポジトリ内のすべてのインストール済みのアプリケーションを一覧表示します。
7 navigator.mozApps.mgmt.uninstall Apps, Apps API, NeedsExample
ユーザーのリポジトリからアプリをアンインストールします。
8 navigator.mozApps.mgmt.watchUpdates Apps, Apps API
アプリをインストールしたり、リポジトリから削除されたときに呼び出されるコールバック関数を設定します。
9 エラーオブジェクト Apps, Apps API
Open Web Apps の JavaScript API では、エラーが発生したとき関数によって DOMError オブジェクトが返されます。
10 Firefox Marketplace 登録前チェックリスト Apps, Firefox OS, Marketplace, Mobile
デスクトップコンピュータ上で Firefox OS シミュレータ をインストールし、シミュレータのコントロールパネルを使って、シミュレータ内でアプリをインストールします。
11 Marketplace レビュー要件 Apps, Firefox OS, Marketplace, Mobile
アプリのレビューとそれに該当しないことについて、Mozilla が期待していることは以下の通りです。
12 Open Web Apps の設計 Apps, Beginner, CSS, Design, DesignAccessibility, Examples, Guide, Layout, Mobile, Styleguides, UX, Usability, Web Development, patterns
このセクション以下にある項目は、Web アプリの設計に一般的に当てはまる内容です。
13 Firefox OS for TV UX Overview
この記事はTV上のFirefox OSのUXデザインについて調査したものです。ユーザーインターフェース上で利用されるカード表現や、Homeスクリーンやアプリケーションなど、他のプラットフォーム(スマートフォンなど)と比較して、どのようなUXが求められているかについての概説が含まれています。
14 Firefox OS アイコンフォント Design, Firefox OS, Gaia, Icons, icon font
Firefox OS アイコンフォントは Github の Gaia アイコンストア からダウンロードするか、以下のように bower を使ってインストールできます。
15 Firefox OS デザイン素材ライブラリ Apps, Firefox OS, Firefox OS UX, UX
No summary!
16 Firefox OS トランジション Firefox OS, Gaia
No summary!
17 アプリ内ナビゲーション Example, Firefox OS, Gaia, In-app navigation, Transitions
18 キーボードの呼び出し Firefox OS, Gaia, Guide, Transitions, keyboard
19 タスクを切替える Firefox OS, Gaia, タスク切替え
20 他のアプリを呼び出すアプリ App invokes app, Firefox OS, Gaia, Transitions
21 通話の開始と終了 Firefox OS, Gaia, Guide, Transitions, calls
通話を開始する:
22 Firefox OS ビルディングブロック Design, Design patterns, Firefox OS, UI, building blocks
Firefox OS ビルディングブロックのコードは Gaia Github レポジトリshared/style 以下にあります。ここでは、その特定のビルディングブロックのためのスタイルを含んだ CSS ファイルと、部分的な HTML コードや画像素材を含むサブディレクトリを見つけることができます。独自のスタンドアロン Web アプリを作成しているなら、その CSS、HTML、画像素材ファイルをあなたのプロジェクトにコピーするだけです。そのアプリが Firefox OS へのインストールのみを目的としたものであるなら (Firefox OS でのアプリ使用時に限ってそれらの機能を使用したいなら)、Gaia 内部で使用可能なバージョンへリンクさせることができます。
23 Firefox OS 1.x ビルディングブロック Firefox OS, Firefox OS UX, UX, アプリ
No summary!
24 Firefox OS 2.0 ビルディングブロック 2.0, Firefox OS, building blocks, implementation
No summary!
25 Firefox OS 2.3 ビルディングブロック Design, Firefox OS, UI, building blocks
No summary!
26 UI レイアウトの基本 Design, Layouts, UI
No summary!
27 モバイルファースト Apps, CSS, HTML
Planning your App」の記事の中で、わたしたちは、アプリのコーディングを始める前に決める必要がある機能性と計画の種類について、高いレベルで見てきました。これにはデスクトップとモバイルのデザインのためのいくつかのアイデアも含まれます。この記事は、モバイルファースト (モバイル端末用の標準的なレイアウト/構成を設計し、デスクトップブラウザ用のレイアウトや機能を、その標準的なレイアウト構成の上に積み重ねるやり方) のコンセプトに注目し、いくつかの関連するアイデアを提案します。このガイドは、モバイルファーストの包括的な内容を含む、いくつかの有用な技術に注目します。
28 レスポンシブデザインとアダプティブデザイン
レスポンシブデザインもアダプティブデザインも、異なるビューポートサイズ、解像度、使用される文脈、制御メカニズムなどを調整して、異なるデバイス間でユーザーエクスペリエンスを最適化しようという試みは同じです。
29 レスポンシブデザインのブロックの構築 Apps, CSS3, HTML5, Mobile, Responsive Design
現在ウェブサイトやアプリケーションのUIを、使用しているブラウザや機器によって変化させ、それぞれに応じて最適化された体験を提供することが一般的になってきています。そのための一つの方法として、使用される機器やブラウザに合わせて異なるサイトやアプリを作り、それぞれ異なった結果を出力するという方法がありますが、この方法は非効率的です。ブラウザはエラーを起こす可能性がありますし、何より全てのソースコードを保守するのは骨が折れます。
30 X-tag と独自要素 Apps, Firefox OS, Mobile, x-tags
X-tag とは、HTML5 アプリ開発に使える一連のビルディングブロック (コンポーネント) を提供する独自 HTML 要素です。必要なコンポーネントが見当たらなければ、独自の X-tag を定義して、他の正式な HTML タグと同様に使うことができます。以下に 10 個の X-tag と、その使い道の説明を挙げます。
31 インストール型アプリの考慮点 Guide, UX
インストール可能なOpen Web Appを設計する時、インストール後にアプリがどのような挙動をするかという事について、頭に入れておくべき考慮点が多数あります。この記事ではアプリを設計する際に注意すべき点を解説します。
32 レスポンシブナビゲーションのパターン Guide, Mobile, Navigation, Responsive Design, patterns
アプリのナビゲーションを設計するにあたって手助けが必要ですか? これらのパターンは最初に見るべき最適な情報です。
33 構想 Apps, Design, Planning
No summary!
34 アプリの構想 Apps, Firefox OS
いったんWebアプリを思いついたら、コーディングやデザインを始める前に計画を立てるべきです。大半の皆さんにとっては驚くほど明らかですが、完全に新規のアプリを作るのか、既存のアプリを目的変更するのかは、言い過ぎることのないポイントです。この記事ではアプリケーションを計画し、実装の準備する時に心に留めておく主要な概念に触れます。
35 Web アプリの基本 Apps, Firefox OS, Mobile
No summary!
36 Web アプリの開発 Apps, Firefox OS, Guide, Mobile
この記事では、Open Web Apps の開発に関するトピックを取り上げ、単に異なるブラウザや端末に対応するだけでなく、Firefox OS のようなプラットフォームにインストールした場合にも快適に動作するアプリを作成するにあたって注意を向けて欲しい最も重要な分野の解説を行います。
37 Manipulating video, audio and images HTML5, Media, NeedsTranslation
Whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. Currently, to support all browsers we need to specify two formats, although with the adoption of MP3 and MP4 formats in Firefox and Opera, this is changing fast. You can find compatibility information in the following places:
38 HTML5 の動画へのキャプションと字幕の追加 Example, Guide
他の記事で、 ブラウザーに依存しない動画プレイヤーの構築を、 HTMLMediaElement 及び Window.fullScreen API を使用して行う方法と、プレイヤーのスタイル付けの方法について見てきました。この記事では、同じプレイヤーと使って、 WebVTT 形式及び <track> 要素を用いてキャプションや字幕を追加する方法を紹介します。
39 Setting up adaptive streaming media sources Audio, HLS, HTML5, HTTP ライブストリーミング, MPEG-DASH, Video, adaptive streaming
たとえば、 HTML5 メディア要素内で利用するために、サーバー上の適応型ストリーミングメディアソースを設定するとします。あなたはどうしますか?この記事では、最も一般的な形式である MPEG-DASH と HLS (HTTP Live Streaming) の二つについて見ていきます。
40 ウェブの音声や動画のライブストリーミング ガイド, 適応型ストリーミング
ライブストリーミング技術は、よくスポーツやコンサートなどのイベントの中継や、もっと一般的にはテレビやラジオの番組の配信などによく採用されています。よくストリーミングと略されるライブストリーミングは、コンピューターや機器へメディアを「ライブ」で転送するプロセスです。これは実に複雑で数多くの変量がある初期段階の主題ですので、この記事では主題を紹介し、どのように始めることができるかを説明します。
41 アプリで基本的なデータフローを制御する Beginner
{{draft}}
42 アプリのローカライズ Apps, Firefox OS, Gaia, L10n.js, Localization
この一連の記事では、ローカライズされたバージョンのアプリを提供したい開発者のための情報を提供します。
43 Firefox OS アプリをローカライズする
Firefox OS アプリは世界中で使われています—スペイン、ポーランド、コロンビア、ベネズエラ、その他多数の国で—なので最初からアプリをローカライズするのを考えておくことは重要です。しかしopen webはそのものがオープンなため、ローカライゼーションに関して選択すべきフレームワークやテクノロジーがたくさんあります。例えば、 Jed Gettext-スタイルのライブラリは人気の伝統的な選択肢です。ほかにも新しい開発中のプラットフォームで現在のライブラリの容量が拡張されます。例えば、Mozilla では、L10nに感動的な新機能を拡張する見込みある ローカライゼーション プロジェクト があります。良く知るには、 Mozilla Tools group をチェックします。
44 Gaia ローカライズするコードのベストプラクティス B2G, Firefox OS, Gaia, Localization, l10n, アプリ
ローカライズ可能なコードを書く最良の方法は、l10n (localization)、つまりローカライゼーションの省略系 の論理を可能な限り宣言的HTMLに移動する事です。
45 アプリ開発FAQ Apps, FAQ, Firefox OS, アプリ
There are a few different potential solutions here:
46 インストール可能な Firefox OS アプリ Firefox OS, Installation, Layout, distribution, l10n:priority, packaging
Firefox OS (コードネーム Boot to Gecko または B2G) はMozilla のオープンソースモバイルOS です。これはLinux カーネルベースで、Open Web Apps をインストールして動作可能なGecko ベースのランタムが動作しています。Gecko はFirefox がWeb コンテンツを表示してレンダリングするのに使用しているレンダリングエンジンです。
47 アプリマニフェスト Apps
本項では、アプリマニフェストの作成、使用にあたって知っておくべき重要な事柄について解説します。
48 初心者向け Firefox OS アプリ作成チュートリアル
この文書は初心者向けの Firefox OS アプリチュートリアルです。Web 開発者とモバイルアプリ開発者に向けて、Firefox OS アプリの作成方法と、一般の Web サイトや Web アプリとの違いを解説しています。
49 オフラインサポート IndexedDB, Offline, appcache, localStorage, localforage
次の図はオフラインアプリの典型的なワークフローを示したものです。最初のステップは、ダウンロードもしくはインストールのあと、アプリが立ち上がった時です(ダウンロードはオンライン Web アプリ、インストールは Firefox OS などのインストールアプリの場合です)。この時点での標準的な挙動は、アプリで使われるアセットや初期状態のデータをデバイスに保存することであり、可能なら、アプリが使えるようになった後に、データをオフラインに保存して定期的にデータをサーバーと同期することでしょう。
50 データを収集し変更する
次のフローチャートは、Open Web Appsホストしているデバイスからデータを取得するための一般的なワークフローを示しています:
51 バリデータを使用したWebアプリの検証
バリデータに含まれる検証する項目の例:
52 パフォーマンス Apps, Firefox OS, Performance
Open Web App や Firefox OS のパフォーマンスに関する記事。
53 UI の同期性
UI の同期性では、ユーザーインターフェイスがユーザー操作に反応する方法を、ブロックする/しないやり方のいずれも、記述します。
54 低メモリFirefox OS端末向けアプリ Firefox OS, tarako, アプリ, パフォーマンス, 低メモリ
このガイドのターゲットはアプリがローエンドのFirefox OS端末、及びその他要素にてどのように動作するかの影響を判断する必要があるアプリ開発者、レビュアーとします。必ずしもこのガイドを使う人全員がローエンド端末に触れた事があるとは想定していません。
55 ユーザー通知
通知管理の一般的なフローはこのようになります。
56 最新のウェブアプリのアーキテクチャ Apps, Architecture, Ember, Frameworks, Guide, MVC, Tools
さまざまなツールの選択肢や学ぶべき新しい理論など、オープンなウェブアプリを構築するにはさまざまな方法があります。 このシリーズでは、最新のウェブアプリ開発について学ぶときに出くわす可能性のあるツールの種類を紹介し、ウェブ上で使用される最も一般的なタイプのアプリのアーキテクチャである Model View Controller(MVC)の理論について説明します。 その理論を取り上げ、チュートリアルのセットを紹介して、自分で MVC アプリを構築できるようにします。
57 Ember アプリのスタイリング Apps, CSS, Ember, Fonts, Guide, Images, Styling
最初にアプリを生成したときに Ember CLI によって作成されたアプリの構造には、public ディレクトリが含まれています。 このディレクトリの内容は、ember serve でアプリを提供するときに dist フォルダのルートに変更されずにコピーされるので、画像やフォントのような、あなたのアプリで使用されるアセットを置くべき場所です。 別々の imagesfonts のディレクトリを持つなど、これらを保存するためのいつも良い方法を使用する必要があります。
58 Ember アプリの作成 Apps, Command Line, Ember, Ember CLI
world-clock(世界時計)という簡単な MVC アプリを作っていきます。 これは現地時刻を表示し、毎秒更新し、表示する追加のタイムゾーンを選択できるようにします。 アプリのデモを見たり、Github で完全なソースコードをチェックアウトできます。
59 MVC アーキテクチャ Apps, Architecture, Controller, Ember, MVC, Model, Tutorial, View
MVC(Model View Controller)はソフトウェアアーキテクチャのパターンであり、一般的にユーザーインターフェイス(UI)を実装するために使用されます。 したがって、ウェブアプリのアーキテクチャとして人気があります。 一般に、アプリのロジックを3つの別々の部分に分け、モジュール性ならびにコラボレーションと再利用の容易さを促進します。 また、アプリの柔軟性を高め、反復を歓迎します。
60 アプリの公開 Apps, Ember, GitHub, Guide, build, gh-pages, production, publication
(訳注:gh-pages ブランチを使用するよりも、/docs ディレクトリを使用するほうが便利です。 また、ここにある説明では、git の使い方がまるで解りませんので、初心者なりに説明を追加してみます。)
61 コントローラ App, Architecture, Controller, Ember
コントローラは、アプリのデータとビューを更新および操作する方法を提供します。 それらは、モデルが変化したとき(例えば、状態やデータ)に何が起こるべきかを記述するアプリのロジックを提供します。 コントローラは MVC の "C"です。
62 ビューとテンプレート Application, Apps, Links, Routes, Templates, views
ルートは、コンテンツ/機能の特定の部分が特定の URL に存在することをアプリに伝えます。 各ルートで表示されるコンテンツの構造を指定するテンプレートとともに、Ember アプリの MVC の "V"(ビュー)の基礎を形成します。 ルートをアプリの「ページ」と考えてください。
63 モデルとアプリのデータ Adapter, Apps, Data Store, Ember, Routes, data, models
ここでは、タイムゾーンのリンクをクリックしたときにディスプレイされる追加のタイムゾーンをユーザーが選択できるようにする機能を追加して、world-clock アプリを完成させます。 これにより、ユーザーはサンフランシスコ、ブエノスアイレス、ロンドンなどのさまざまな場所の友人とのミーティングをスケジュールするのに役立ちます。 Ember Data と LocalForage ライブラリを使用してデータを IndexedDB インスタンスに保存し、アプリをオフラインで使用できるようにし、Moment Timezone ライブラリを使用してタイムゾーンデータを提供します。
64 移植 Apps, Firefox OS, porting
No summary!
65 音声と動画の加工 HTML5, Web Audio API, WebGL, キャンバス, リファレンス, 動画, 音声
動画の各フレームからピクセルの値を読むことができることは、とても有用です。
66 Web 開発者のアプリ開発 Apps
最小要件はこれだけです。
67 アプリに関するよくある質問 Apps, Web Development
No summary!
68 Marketplace に関する FAQ Apps, Firefox OS, Marketplace

この記事では、Firefox Marketplace でのアプリの公開に関する様々な一般的質問に答えます。

69 アプリに関する FAQ Apps
Open Web App は通常の HTML5 アプリケーションよりもはるかに多くの意味を持ちます。Open Web Apps (OWA) は、Web 標準に基づくアプリケーション、あるいは「Web ランタイム」アプリケーションであると考えてください。
70 アプリに関する一般的な FAQ Apps
No summary!
71 アプリマニフェストに関する FAQ Apps, Firefox OS, Marketplace, Mobile
Open Web App のマニフェストファイルに関するよくある質問。
72 アプリの CSP Apps, Firefox OS
CSP が アプリマニフェスト 内で指定されている場合、その CSP と、そのアプリの種類に適用される既定の CSP がマージされます。指定された CSP が既定 CSP の制約を緩和することはありません。Firefox Marketplace のバリデータは、アプリの登録時に CSP 違反を判別するようになっています。このバリデータは開発中にあらかじめ問題を発見するのにも役立ちます。
73 アプリのインストールに関するプラットフォーム固有の詳細 Apps
Gaia (Firefox OS のユーザインタフェース) では、2 番目のホームページ上に Marketplace へのリンクが置かれており、アプリはここからインストールできます。Gaia に含まれているデフォルトアプリは端末上の Gecko プロファイルに保存されており、Web アプリのオフラインキャッシュは /data/local/OfflineCache/* にあります。
74 アプリのレイアウト Apps, Design
モダンな Web サイトや Web アプリのためいかに効果的なレイアウトを行うかはひとつの課題です。ある意味では、開発者の仕事は簡単になったと言えるでしょう。CSS は一般的に、かつてよりはるかに堅実で一貫性のある対応がブラウザやプラットフォームを越えて実現していますから、多くのひどいハックに頼る必要はもうありません。しかし一方で難しくなった点もあります。近頃では Web へアクセス可能な端末が多数あり、搭載ブラウザ、画面サイズ、解像度、プロセッサ処理速度、使用場面 (端末が携帯用なのか、ネットワークに接続されているかなど) もバラバラです。
75 アプリの更新 Apps, Firefox OS, Marketplace
アプリは一般的な Web キャッシュのルールに従います。起動時間を短縮するため、HTML5 AppCache などの高度な機能を任意で使用することも可能です。その場合、アプリが使用する通常のリソースを更新するにあたって特別に考えることはありません。
76 アプリの構造 Apps
アプリはそれをホストしているサーバ (「自主配布」) かストアからインストールできます。Mozilla は 2012 年中にアプリを登録できる Firefox Marketplace のベータ版を立ち上げました。他のサードパーティアプリストアもこの構造を利用可能です。無料有料どちらのアプリにも対応します。ストアは、購入したユーザだけがアプリを実行できるようにする購入検証に対応することも可能です。Firefox Marketplace はそうした仕組みを導入します。
77 アプリの許可設定 Apps, Firefox OS, Intermediate, Permissions, Reference, Référence(2)
許可設定には 3 つのレベルがあり、それらには簡潔に言えば以下のような違いがあります。
78 アプリへの個人認証の統合 Apps
Mozilla が提供しているオープンな個人認証ソリューション「BrowserID」 (「Mozilla Persona」の一部) は、アプリエコシステムで様々な方法で利用されています。その多くは (Firefox Marketplace へのログイン以外に) アプリ開発者による行動を必要としません。
79 アプリテンプレートの使用 Apps
これには以下のものが含まれます。
80 アプリ開発のためのAPIレファレンス
以下のリストは Firefox OS アプリを作成する上で必要とされるであろう API のコードレベルでのレファレンスです。WebAPI とメソッドをより高速に検索するには
81 Firefox Marketplace のサービス API, Apps, Firefox OS, Marketplace, Reference, Référence(2)
これらのドキュメントとガイドは、Firefox Marketplace でアプリの公開と管理に必要な API のリファレンスを提供します。
82 Firefox OS device APIs
Web プラットフォームの標準は数多く表れ、デバイスAPIは Firefox OSアプリ開発や Open Web Appsにとって決定的なものです。この記事ではそのようなAPI をカバーしたページのリスト(個々のアプリマニフェストでのパーミッション説明を含む)を提供します。
83 Firefox OS アプリの基礎 API, Apps, Firefox OS, Reference, Référence(2)
Firefox OS アプリは単なる Open Web App ですが、オフライン作業やインストール対応など、特別な検討事項や機能がいくつかあります。
84 Firefox OS アプリ開発ツール Apps, Firefox OS, Firefox for Android, resources
このセクションでは、利用可能な Firefox OS 専用コードテンプレート、ライブラリ、スニペットープラグインを紹介します。
85 レイアウトと構造 API, Apps, Firefox OS, Reference, Référence(2)
Open Web App に最適な構造を作るために役立つ一連の記事です。
86 一般的な Web API API, Apps, Firefox OS, Reference, Référence(2)
要素、イベント、ネットワークリクエスト、ストレージ、その他 Open Web Apps に便利な機能を提供する標準的な Web API をまとめました。Web API チームの主要 Wiki ページ にある要約表も、何がどこで対応されているか分かりやすい概要を提供してくれます。
87 描画とアニメーション API, Apps, Firefox OS, Reference, Référence(2)
モダンなアプリ体験を提供するためには、アニメーションや軽量グラフィックスの使用は不可欠です。以下のページはこの分野で必要な情報を提供します。
88 アプリ開発を始めよう Apps
Web アプリとは、Web 標準技術を使って開発されたアプリケーションです。すべてのモダンな Web ブラウザで動作し、好きなツールを使って開発できます。Web サイトと Web アプリを区別する特徴をいくつか挙げるとするなら、アプリはユーザによってインストールされ、自己完結型で、ブラウザウィンドウのクローム (ユーザインタフェース部品) を必ずしも必要とせず、オフラインでも動作するように開発できます。Gmail、Twitter、Etherpad などが Web アプリに当たります。
89 アプリ開発ツール Apps, Tools
この記事では、Firefox OS アプリ、つまり Open Web Apps の開発、テスト、デバッグに役立つ、最も便利なツールをすべて簡単に紹介します。
90 アプリ開発者向けチュートリアル Apps, NeedsContent
以下に挙げる様々なアプリ開発の記事は、アプリ開発の各課程に参考となる参考資料を多数掲載した、まとまったチュートリアルを提供します。
91 Media demo app tutorial Apps, NPR, Tutorial
これは、"NPR demo" アプリのチュートリアルです。
92 お天気アプリチュートリアル
このチュートリアルでは、アプリ例weathermeを使って、ビルドの仕方を説明します。
93 アプリのデバッグ Debugging, Firefox OS, Guide
WebApp ランタイム内で実行されているアプリの問題をデバッグする手段として、コマンドラインから起動し、古い (しかし未だに便利な) エラーコンソール を有効にすることができます。
94 一般的なアプリ開発チュートリアル Apps, Marketplace
iOS や Android といったプラットフォーム向けのアプリケーションと異なり、Web アプリの最上位言語は HTML、CSS、そして JavaScript です。これらの言語は世界中の Web 開発者に支持されています。この一連の Web 技術は、すべてのモダンなモバイルやデスクトップ向けハードウェア上で使えるもので、コードを最大限再利用可能にするとともに、少ない追加作業で様々なプラットフォームや端末を使用している多数のユーザへ潜在的なリーチを実現します。このチュートリアルでは、Web アプリの作成に関する様々な側面を探り、柔軟で機能的なアプリの設計方法から、完成までのアプリのコーディングについてまで見ていきます。
95 Area Tweet アプリの作成 Apps
設計目標やコーディング標準をすべて見てきたところで、実際にアプリのコーディングに取り掛かりましょう。
96 HTML5 Web アプリの基礎 Apps
Open Web App は基本的には HTML5 アプリです。HTML、CSS、JavaScript、それぞれの役割はよく知られているかもしれませんが、HTML5 アプリでそれぞれが各自の重要な役割をどう演じるか、要点を簡単にまとめてみましょう。
97 Your app development environment Text editors, Web developer tools
Web アプリケーションの作成を始める前に、必要なツールを用意しておく必要があります。
98 アプリからの収益 Apps, Firefox OS, Marketplace
No summary!
99 アプリのコード Apps
アプリが使う色や画像を別にすれば、アプリの設計は必ずしも動的ではありません。柔軟性の高いアプリの設計指針もほぼ同じです。しかし、アプリのコーディングに開発者が使うスタイルやツールについてはまったく別の話です。モバイルアプリのコーディングには様々なライブラリやフレームワークを利用できます。
100 アプリのテスト Apps
アプリのテストは、特に複数のプラットフォームや端末に対応する場合、非常に重要です。必要なテストの回数や種類は、対応する端末やプラットフォームによります。テストの種類には以下のようなものが挙げられます。
101 アプリのデバッグ Apps, Firefox OS
アプリをデバッグする際、最初に行うことといえばもちろん、Firefox などフル機能のデスクトップブラウザとその利用可能なツールを活用することです。しかし一度アプリがプラットフォーム上にインストールされてしまうと (参考: アプリのインストールに関するプラットフォーム固有の詳細)、それはネイティブアプリとなり、Web アプリランタイムの中で実行され、事態はより複雑になってきます。
102 アプリの設計 Apps
Web アプリを設計する前に熟慮すべきことはたくさんあります。
103 自分のアプリを作成しよう Apps
オープンな Web 技術を用いて、様々な端末向けにリッチでパワフルなアプリケーションを作成することは、楽しく、やりがいがあり、潜在的には利益を挙げられるプロセスです。オープン Web はアプリの作成を可能にするため必要なツールを提供してくれます。また Mozilla はアプリを紹介、配布するための優れたマーケットプレイスを提供しています。この記事で書かれている情報を活用し、自分自身の驚くべきアプリを開発し、全世界に向けて公開しましょう!
104 開発環境の設定 Apps
ウェブアプリケーションの作成に取り掛かる前に、まず必要なツールが揃っているか確認しましょう。
105 音声・動画アプリのチュートリアル
No summary!
106 アプリ開発関連ドキュメントの索引 Apps, Index
123 ページあります:
107 ゲームアプリの開発 Apps, Games
No summary!
108 ゲーム開発における特別な配慮 Apps, Firefox OS, Games, Mobile
この記事では、アプリの開発を始めるにあたって に書かれている基本を越えて、ゲームアプリを開発する際に考慮すべきいくつかの事柄を説明します。特に興味深いのは、ゲームを (警告と制限付きで) オフラインでもプレイできるようにする方法、プレーヤー情報の保存、プレーヤーが友人と交流できるようにする方法です。
109 ゲームエンジンとツール Apps, Engines, Games, HTML5, JavaScript, Tools
以下は HTML5 と JavaScript で実装されたゲームエンジンの一例です。
110 ツールとフレームワーク Apps, Firefox OS, Frameworks, Libraries, Tools, Workflows
No summary!
111 Web Components と Mozilla Brick
アプリケーションのプラットフォーム、という点において、ウェブには課題があります。HTMLという、文書をかんたんにマークアップすることができ、そして意味を与えることができる言語は、アプリケーションを組み上げるには、充分な要素がありません。HTML5 の仕様には、かなり多くの新しい要素が追加されましたが、しかし、それらのサポートはブラウザごとに不完全で、他のプラットフォームにはないウィジェットがたくさんあります。例えば、Flex や iOS が提供する独特なものです。結果として、開発者は、メニューバー、スライダーコントロール、カレンダーといったものを、セマンティックでない HTML (よくあるのは
要素) を用いて、JavaScript でインタラクティブにし、CSS で見た目を整えて、それぞれが独自の「ウィジェット」をつくっています。
112 パッケージ型アプリ Apps, Firefox OS, Mobile
パッケージ型アプリ は、リソース (HTML、CSS、JavaScript、アプリマニフェストなど) を Web サーバ上へ置く代わりに、それらをすべてひとつの ZIP ファイルにまとめた Open Web App です。パッケージ型アプリは、ルートディレクトリに アプリマニフェスト を含んだ単なる ZIP ファイルです。マニフェストには manifest.webapp というファイル名を付ける必要があります。
113 プログレッシブウェブアプリ Apps, Modern web apps, PWA, Progressive web apps, アプリ
プログレッシブウェブアプリ (Progressive web apps) (PWA) は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションを作成します。これらのアプリはどこでも動作し、ネイティブアプリと同様の使い勝手を提供する様々な機能を提供します。この一連の文書では、これについて知るために必要なすべてをお伝えします。
114 PWA をインストール可能にするには PWA, a2hs, js13kGames, インストール可能, ホーム画面に追加, 進歩的ウェブアプリ
In this article, we learned about how we can make PWAs installable, using web manifest and Add to home screen.
115 Progressive web app の構造
ここで PWA の背後にある理論を知りましょう。実際のアプリの推奨構造を見てみましょう。まず、js13kPWA アプリケーションの分析、それがなぜそのように構築されているのか、それがもたらす利点について説明します。
116 サービスワーカーで PWA をオフラインで動作させる PWA, js13kGames, オフライン, サービスワーカー, 進歩的, 進歩的ウェブアプリ
In this article we took a simple look at how you can make your PWA work offline with service workers. Be sure to check out our further documentation if you want to learn more about the concepts behind the Service Worker API and how to use it in more detail.
117 ホーム画面に追加 PWA, アイコン, サービスワーカー, ホーム画面に追加, マニフェスト, 進歩的ウェブアプリ
ホーム画面に追加 (または A2HS と略記) はモダンなスマートフォンブラウザーで利用できる機能で、開発者は簡単かつ気軽に、お気に入りのウェブアプリケーション (またはウェブサイト) を表すショートカットを自分のホーム画面に追加することができるので、今後はこのショートカットを一回タップすればアクセスできるようになります。このガイドでは、 A2HS の使用方法と、ユーザーがこの機能を利用できるようにするために開発者として行う必要のあることについて説明します。
118 通知とプッシュを利用して PWA を再エンゲージ可能にするには
アプリのコンテンツをキャッシュできるようにしてオフラインで動作させるのは、すばらしい機能です。ユーザーがホーム画面にウェブアプリをインストールできるようにすることは、もっと良いことです。しかし、ユーザーの操作のみに頼らず、プッシュメッセージと通知を使用すれば、さらに自動的に再エンゲージを行い新しいコンテンツが利用できるようになるたびに配信することができるようになります。
119 進歩的ウェブアプリの紹介
この記事では進歩的ウェブアプリ (Progressive Web Apps) (PWA) を紹介し、普通のウェブアプリよりもどのような利点があるのかを説明します。
120 モバイルアプリケーション開発者のアプリ開発 Apps, Mobile
モバイルアプリケーション開発者に対して、Open Web Apps プロジェクトは次のようなメリットを提供します。
121 リファレンスアプリ
ダウンロード、インストールして、実際に試して学べる様々なサンプルアプリをまとめました。楽しんで!
122 レシートの検証 Apps, Firefox OS, Marketplace, Receipts, Web Payment
Marketplace で有料アプリを提供している場合、ユーザが有効なレシートを所持していることを確認する必要があります。確認しないと、ユーザがアプリを購入した直後に 購入を取り消して返金を受け取れば、アプリを無料で使用できてしまいます。または、単純に開発者のサイトからマニフェストファイルを直接参照して、アプリ をインストールすることも可能です。この記事では、独自のレシート検証を組み込むためのコードとワークフローについて説明します。
123 独自ストアの開発 Advanced, Apps, Firefox OS, Guide, Marketplace
Firefox OS、Android 版 Firefox、デスクトップ版 Firefox 上のアプリのインストール、管理方式は、Firefox Marketplace から独立したものとなっています。これにより、アプリを自主配布するだけでなく、独自のマーケットプレイスを作成し、そこでアプリをホストすることも可能となっています。究極的には、オープンソースソフトウェアを使って独立マーケットプレイスを実装することも可能でしょう。このページでは、取り得る選択肢につい説明し、それぞれの実装についての概要を提供します。
124 設計ガイドライン Apps, Responsive Design
魅力的で使いやすいアプリの開発に役立ついくつかの提案。
125 アプリの簡潔な説明 Apps
エレベーターに乗っているぐらいの長さしか時間がないとき、あなたのアプリを他人へどう紹介しますか? それがあなたのアプリの「エレベーターピッチ」、つまり、そのアプリが誰を対象としているのか、なぜその人たちにとって便利かということの簡単な要約です。
126 一般設計指針 Apps, Design
言葉に一貫性を持たせましょう。アプリ内ではひとつのアクションやアイテムを同じ用語で呼び、各用語はひとつのアクションやアイテムのみに使用します。
127 参考資料 Apps, Guide, Responsive Design, Web Development
No summary!
128 購入後
このページは今後のコンテンツのためのプレースホルダーです。

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: Marsf
最終更新者: Marsf,