ウェブ技術を使用して構築されたアプリを構造化するにはさまざまな方法があり、組織の意思決定に時間がかかることがあります。 幸いにも、Ember CLI のようなコマンドラインツールで作業する場合、アプリの構造は決定しています。 これにより、新しいリソースやテンプレートをすばやく足場に置いたり、反復作業を自動化したりすることが容易になり、アプリの改善に集中する時間を残してくれます。 この記事では、Ember CLI をインストールし、それを使って、その上に構築するための基本的なアプリのスケルトンを作成する方法について説明します。

何を作成するのか?

world-clock(世界時計)という簡単な MVC アプリを作っていきます。 これは現地時刻を表示し、毎秒更新し、表示する追加のタイムゾーンを選択できるようにします。 アプリのデモを見たり、Github で完全なソースコードをチェックアウトできます。

世界時計のスクリーンショット

ツールセットのインストール

Ember/Ember CLI をインストールするには、この章の手順に従う必要があります。

: この一連の記事では、コマンドラインを多く使います。 コマンドラインにアクセスする方法がわからない場合は、心配しないでください — このマニュアルで説明しています(訳注:ここには適切な説明がありません)。 すべての OS にはデフォルトでコマンドラインツールがあります。

難しいアプリ機能を実装しやすくし、よりきれいで読みやすいコードを書くのに役立つ、いくつかの追加の JavaScript ライブラリも使います。

  • アプリのテンプレートを作成するための Handlebars。 Ember にはこれが自動的に含まれます。
  • オフラインデータの保存と管理のための LocalForage。 後でインストール方法を示します。
  • Moment Timezone は利用可能なタイムゾーンのリストを提供し、わかりやすい形式で容易にフォーマットすることができます。 これも後でインストール方法を見ていきます。

開始するには次のステップに従います。

  1. Ember の機能のいくつかを使うには、Git をインストールする必要があります。 今すぐインストールしてください。 (訳注:Pro Git という本の日本語版がダウンロードできます。)
  2. Ember CLI には Node.js が必要です。 次のステップを続ける前に、Node のダウンロードとインストール をします。
  3. ターミナルかコマンドプロンプトを開きます。
  4. node パッケージマネージャ(NPM)を使って、Ember CLI をインストールします。

  5. npm install -g ember-cli
  6. インストールが成功したことを確認するには、次のように入力します。

    ember -v

: パーミッションや EACCESS に関するエラーが Linux、Mac OS X、Unix 系で見られたら、.npm ディレクトリのオーナー権限に問題がある可能性があります。 1つの解決策は、コマンドラインで次の chown コマンドを使用することです(パスは、あなたの .npm ディレクトリに置き換えます)。 sudo chown -R $USER /Users/[YOUR USER NAME]/.npm

基本的なアプリのスケルトンの作成

Ember CLI にはかなりの責任を引き渡していますが、これらのプロジェクトがどのように設定されているかを理解することは重要です。 新しいプロジェクトを作ってみましょう。 基本的なアプリのスケルトンを生成し、ブラウザーでローカルに表示することができます。

  1. 最初のステップはプロジェクトの短く、覚えやすい名前を考えることです — ここでは world-clock を使います。
  2. ターミナルやコマンドラインで、アプリを作るためのハードディスクドライブ上の覚えやすいディレクトリに移動します。

    cd path-to-directory
  3. 次のコマンドで新規プロジェクトを作成します。

    ember new world-clock

    Ember は、現在のディレクトリにプロジェクトを含む新しいディレクトリを生成します。 このディレクトリには、基本的な Ember アプリに必要なすべてのツールとリソースが含まれています。 把握するにはたくさんあるように見えるかもしれませんが、アプリにもっと多くの機能を追加したいときに、この構造が大きな柔軟性を提供することがわかります。

  4. プロジェクトのルートディレクトリに cd して、見渡してみます。

    cd world-clock
    ls      # Windows では dir コマンドを使用する
    

    (訳注:Windows では、構築時に tmp ディレクトリを頻繁に使うため、構築が遅くなります。 ウィルス対策ソフトとコントロールパネルのインデックスのオプションで、このディレクトリを除外する設定をしてください。 Build Error の原因はこれだと思われます。 また、「Running without permission to symlink will degrade build performance.(symlink にパーミッションを指定せずに実行すると、構築のパフォーマンスが低下します。)」というメッセージは、ユーザーアカウントが Administrators グループに属しているなら、コマンドプロンプトを管理者として実行すると出なくなりますが、逆効果のようです。)

アプリの起動

アプリのファイルを編集すると、Ember CLI は自動的にスクリプトをコンパイルして連結します。 Ember CLI には開発サーバーも用意されています。 開発サーバーを使用すると、変更を確認してデバッグすることができます。 アプリを起動するには、

  1. プロジェクトのルートディレクトリで、次のコマンドを実行します。

    ember serve
  2. (訳注:原因不明で Build Error が発生することがあります。 このときは開発サーバーを Ctrl-C で停止して再起動です。 (Ctrl-C は Ctrl キーを押しながら C キーを押します。))
  3. 「Run 'bower install' to install missing dependencies(不足している依存関係をインストールするために bower install を実行する)」というメッセージが表示された場合は、コマンドライン/ターミナルで bower install コマンドを実行し、もう一度 ember serve を試してみてください。
  4. 表示される別のメッセージは、 「ENOGIT git is not installed or not in the PATH(ENOGIT git がインストールされていないか、PATH にありません)」です。 これは Git が利用できないことを意味します。 Git をインストールしてからやり直します。
  5. ブラウザーを開いて http://localhost:4200/ に移動します。「Welcome to Ember.js」と書いたひとつの見出しだけのページが見えるはずです。 (訳注:現在は、とても凝ったウェルカムメッセージが表示されるようになっています。)

「Welcome to Ember.js」と書かれたページのスクリーンショット

Ember アプリの構造

このガイドの後続のセクションでは、Ember アプリの構造について詳しく説明しますが、今注目すべき重要なファイルとディレクトリがいくつかあります。

ls/dir を使用してディレクトリ構造を再度見てください(お好みならば、ファイルエクスプローラのウィンドウで表示します)。

  • アプリの構造の dist ディレクトリに気づくでしょう。 Ember CLI がアプリを構築するときはいつでも、このディレクトリにアプリの最終的なリリース可能なファイルを置きます。 Ember CLI がファイルを構築するときに上書きするため、これらのファイルは直接編集しないでください。
  • app ディレクトリも見えます。 ここでアプリのコードを直接変更します。 このディレクトリの内容は、ember serve を実行するときに構築され、dist にコピーされます。
  • public ディレクトリには、構築する必要のないフォントや画像などの生のアセットを置くこともできます。これは、ember serve を実行するときに dist ディレクトリにコピーされます。
  • ルートディレクトリには、アプリの名前や依存関係などの設定情報が含まれている package.json ファイルがあります。
  • ルートディレクトリには、アプリ構築時に含める必要があるサードパーティライブラリ、アセットなどの詳細を含む ember-cli-build.js があります。 Ember CLI のアセットのコンパイルは、broccoli アセットパイプラインツールに基づいています。

: アプリの構造の詳細については、Ember のドキュメントを参照してください。

次に

現在、作業を開始できるローカルで実行する新たなアプリを持っています。 次に、ルートをアプリに追加する方法を示します。 アプリは、対応するテンプレートからのコンテンツをディスプレイします。

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

このページの貢献者: Wind1808, mfuji09, Uemmra3
最終更新者: Wind1808,