最初のアプリを作る

この翻訳は不完全です。英語から この記事を翻訳 してください。

Web 技術を利用したアプリ構築の方法は多く存在し、組織的に意思決定を行うためには時間がかかります。幸いな事に、Ember CLI のようなコマンドラインツールを利用するとき、アプリケーションの構造はあなた自身が決定します。これはアプリの改善に時間を割けるように、新しいリソースやテンプレート、繰り返した酸くの自動化などを簡単にしてくれます。この記事では Ember CLI を使ってアプリケーションを作って説明します。

アプリケーションを作る


Ember CLI の責務を多く延期しているにも関わらず、Ember CLI は未だにプロジェクトセットアップの方法として重要なものとなっています。新しいプロジェクトを作るところから初めてみましょう。基本的なアプリケーションのスケルトンを作成して、それをブラウザで表示させてみます。その後にクイックスタートとして、タイムゾーンをサポートしたシンプルな時計アプリをスケルトンから作ってみます。

  1. 最初にプロジェクトの名前を考えます。これは短く覚えやすいものにするべきです。今回のケースでは「world-clock」とします。
  2. ターミナルまたはコマンドラインから、アプリを作成したいハードディスクの覚えやすいディレクトリに移動します。

    cd path-to-directory
  3. 以下のコマンドを使って新しいプロジェクトを作ります。

    ember new world-clock

    Ember は現在のディレクトリにプロジェクトのディレクトリを新たに作成します。このディレクトリには、Ember アプリケーションの基本的なリソース・ツールのすべてが含まれています。追跡するには多すぎるファイルがあるように見えますが、この構造はアプリケーションの機能を追加しようとしたときに、とても強力な柔軟性を提供します。

  4. プロジェクトのルートディレクトリに移動し、見渡してみてください。

    cd world clock
    ls (use the dir command instead on Windows)
    

アプリケーションを起動する

アプリケーションのファイルを編集したときに、Ember CLI は自動でコンパイルし、スクリプトを連結します。Ember CLI はアプリケーションの変更した時の表示やデバッグができるように開発用のサーバーも提供しています。アプリケーションを起動するためには以下の手順で実行します。

  1. プロジェクトルートから、以下のコマンドを実行します。

    ember serve
  2. もし、「Run 'bower install' to install missing dependencies」というメッセージが表示されたときは、「bower install」コマンドを実行した後に ember serve をリトライしてみてください。
  3. ブラウザを起動し、http://localhost:4200/ に移動します。そうすると1行「Welcome to Ember.js」とヘッダーの書かれたブランクページが表示されます。

アプリケーションの構造

今新しいアプリケーションの構造すべてを説明する必要はありません。クイックスタートのサブシーケンスセッションを通してもっと学ぶ事になります。しかし、今は2つの事だけを説明したいと思います。

最初に、開発用サーバーをコマンドライン / ターミナルから終了するには、Ctrl + C を押してください。ディレクトリの構造を ls/dir を使ってもう一度見てください。

  • アプリケーションの構造に dist ディレクトリがある事に気づくでしょう。Ember CLI がアプリケーションを構築すると、必ずアプリのディレクトリに最終的な製品用として配置されます。このディレクトリのファイルは編集すべきではありません。 これらのファイルは Ember CLI のビルドしたときだけ上書きされます。
  • app ディレクトリは、アプリケーションのコードに直接変更を加える箇所です。このディレクトリのコンテンツは ember serve を実行した段階で dist にコピーされます。
  • public ディレクトリはビルドする必要のない画像やフォントなどのアセットデータを配置する場所です。 ember serve を実行した際に dist ディレクトリにコピーされます。
  • package.json ファイルがルートディレクトリにあり、これにはアプリ名、依存関係などの情報が設定されています。

注意:アプリケーションの構造の詳しい説明については、ember のドキュメントから見つける事ができます。

Firefox OS のマニフェストファイルを作成する

もしアプリケーションを Firefox Marketplace に提出して、Firefox OS 端末にダウンロードを可能にする予定がある場合は、マニフェストファイルを作成する必要があります。

マニフェストファイルのコンセプトは共通の課題であり、ビルドツールやアプリの様々な開発環境と密接なものです。アプリケーションの重要な詳細情報を提供し、プロジェクトのルートディレクトリに配置すべきものです。

Ember CLI を利用する場合、我々が用意したマニフェストファイルを生成するアドオンをインストールする事ができます。

  1. プロジェクトのルートディレクトリで、以下のコマンドを実行すればアドオンをインストールできます。

    npm install ember-cli-fxos --save-dev
  2. 以下のコマンドでマニフェストファイルを生成できます。

    ember g fxos-manifest

これでアプリケーションの /public ディレクトリに manifest.webapp ファイルが作成されます。Ember CLI がファイルをビルドするとき、このマニフェストファイルは 上述した最終製品ディレクトリである /dist フォルダにコピーされます。

マニフェストファイルは始めるにあたっての必要最低限の設定だけ用意されたものが作成されます。@@から始まるプレフィクス(例えば @@appName) の全ての値はビルド時に package.json から引き出した情報です。アプリケーションを作っていく段階で、必要に応じてマニフェストファイルのプロパティの追加や値の調整をする必要があります。

注意:Firefox OS のマニフェスト設定オプションの詳しいリファレンスは MDN から見つける事ができます。

次のステップ

これで始めるにあたってのローカルで動作する新しいアプリケーションができました。次のステップは、アプリケーションの表示、テスト、デバッグをビルド時に手助けしてくれる開発ツールをみていきます。

 

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

 このページの貢献者: mantaroh
 最終更新者: mantaroh,