We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

Web技術を使ってアプリをビルドする構造は多くの異なるものがあり、組織だって決定するのは時間がかかります。幸運にも、Ember CLI といったコマンドラインツールを使って作業する時には、アプリケーションの構造は決まっています。これは素早く新しいリソースやテンプレートをスキャッフォルディングしたり、反復作業を自動化したりするのを簡単にしてくれ、あなたのアプリを作成するのに多くの時間を残してくれます。この記事では Ember CLI のインストールと、ビルドする場所として、基本的なアプリのスケルトン作成をするのに使うことを記します。

何を作成するのか?

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

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

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

: この記事のシリーズではコマンドラインを多く使います。コマンドラインにアクセスする方法に詳しくなくても、心配しないで — このマニュアルで説明しています。すべてのOSはデフォルトでコマンドラインを持っています。

難しいアプリ機能を実装するのを容易にして、クリーンでリーダブルなコードを書くのを補助する、追加の JavaScript ライブラリも使います。:

  • アプリのテンプレートを作成するための Handlebars、Ember には自動で入っています。
  • オフラインデータを保管して管理するための LocalForage。あとでこのインストール方法を示します。
  • 使えるタイムゾーンを供給して、簡単に読み易くフォーマットしてくれるためのMoment Timezone。同じく、あとでこのインストール方法も示します。

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

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

    npm install -g ember-cli
  5. インストール成功を確認するのに、次をタイプします:

    ember -v

: パーミッションや EACCESS のエラーが Linux, Mac OS X, や Unix 系で見られたら、.npm ディレクトリーのオーナー権限の問題です。解決法として、コマンドラインで chown コマンドを使って、次のようにします( .npm ディレクトリーへのパスは置き換えます ) : sudo chown -R $USER /Users/[YOUR USER NAME]/.npm.

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

かなりの責任を CLI に負っていますが、このプロジェクトがセットアップされる方法を知っておくのは重要です。新しいプロジェクトを作ってみましょう。基本的なアプリのスケルトンを生成し、ローカルで起動してブラウザーから見てみます。

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

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

    ember new world-clock

    Ember は現在のディレクトリーにプロジェクトを含んだ新しいディレクトリーを生成します。このフォルダーは Ember アプリケーションが必要とするすべてのツールとリソースが入っています。見ていくのに多いように思えるかもしれませんが、アプリケーションに機能を追加しようとするときには柔軟性に富んでいることがわかるでしょう。

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

    cd world-clock
    ls      # use the dir command instead on Windows
    

アプリの開始

アプリケーションのファイルを編集していと、Ember CLI は自動的にスクリプトをコンパイル、連結してくれます。Ember CLI は変更を加えたらそれを見てデバッグできる開発サーバーも提供します。アプリを始めるには:

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

    ember serve
  2. IRun 'bower install' to install missing dependencies というメッセージが出たら、コマンドライン/ターミナルで bower install を実行してから ember serve を実行します。
  3. 他に出てくる可能性のあるメッセージは 'ENOGIT git is not installed or not in the PATH' — これは Git が使えないという意味です; Git をインストールしてやり直します。
  4. ブラウザーを開いて http://localhost:4200/ に移動します。"Welcome to Ember.js" と書いたひとつの見出しだけのページが見えるはずです。

Ember アプリの構造

You'll learn more about the Ember app structure as you work through subsequent sections of this guide, but there are a few important files and folders worth pointing out now. 

Have a look at the directory structure again using ls/dir. (or view it in a file explorer window if you like.)

  • You'll notice a dist directory in the application structure. Whenever Ember CLI builds your application, it places the final production-ready files of your app in this directory. You should never edit any of these files directly, as they will be overwritten any time Ember CLI builds your files.
  • You'll also see an app directory: this is where you make direct changes to your application's code. The contents of this directory are built then copied into dist when you run ember serve.
  • There is also a public directory, where you put raw assets such as fonts and images that don't require any building. This is copied over to the dist directory unchanged when you run ember serve.
  • There's a package.json file in your root directory, which contains configuration information, such as the name of the app, and what dependencies it has.
  • In your root directory you'll also find ember-cli-build.js, which contains details of all the 3rd party libraries, assets, etc. that need to be included when your app is built. Ember CLI asset compilation is based on the broccoli asset pipeline tool.

: A more detailed explanation of your app structure can be found in the Ember documentation.

次に

We now have a fresh new application running locally that we can begin working with. Next, we'll demonstrate how to add a route to your app that displays content from a corresponding template.

 

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

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