Ember アプリを作成する

« 前のページ次のページ »

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

何を作成するのか?

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

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

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

Note: You'll be using the command line a lot in this series of articles. If you are not sure how to access a command line, don't worry — this set of instructions explains it. Every operating system has a command line tool by default.

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

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

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

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

Note: If you get an error about permissions, or EACCESS and are on Linux, Mac OS X, or another flavor of Unix, you may have issues with the ownership of your .npm directory. One solution is to use the chown command on your command line, like so, substituting the path to your .npm directory: sudo chown -R $USER /Users/[YOUR USER NAME]/.npm.

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

Though we are deferring a fair amount of responsibility to Ember CLI, it is still important to familiarize yourself with the way these projects are set up. Let's get started by creating a new project. We will generate the basic app skeleton and serve it locally to be viewed in the browser.

The first step is to think up a short, memorable name for your project — in this case we'll use world-clock.
From your terminal or command line, navigate to a memorable directory on your hard drive where you want to create your app:
```
cd path-to-directory
```
Create your new project with the following command:
```
ember new world-clock
```
Ember will generate a new directory containing your project in the current directory. This folder contains all the tools and resources needed for a basic Ember application. Though it may seem like a lot to keep track of, you'll find this structure provides great flexibility when you want to add more functionality to your application.

cd into your project's root directory and have a look around:

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

アプリの開始

As you edit your application files, Ember CLI will automatically compile and concatenate your scripts for you. Ember CLI also provides a development server that allows you to view and debug your changes as you make them. To start your app:

From the root of your project, run the following command:
```
ember serve
```
If you get the message Run 'bower install' to install missing dependencies, run the command bower install in your command line/terminal then try ember serve again.
Another message that can appear is 'ENOGIT git is not installed or not in the PATH' — this means that Git is not available; install Git then try again.
Open your browser and navigate to https://localhost:4200/. You should see a page with a single heading, "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 Brocfile.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: Brocfile.js is broccoli's build specification file.

Note: 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.