MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

お天気アプリチュートリアル

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

テンプレートを使ったお天気アプリの作成

このチュートリアルでは、アプリ例weathermeを使って、ビルドの仕方を説明します。

我々は、あなたがWebアプリを書き始められるよう、Open Web App Bootstrap テンプレートを提供しています。これらテンプレートは、あなたが素早くアプリを書き始められるようセットアップされた、HTML/CSS/JSプロジェクトとなっています。

Open Web App BootstrapテンプレートのコードネームはMortarです。種々のアプリに対応した多くのテンプレートが存在しますが、今回は"app-stub"テンプレートを利用します。 これは基本的なテンプレートで、jQuery, require.js, volo, Mozilla Marketplace librariesや、その他のお役立ちツールを含みます。

必要なもの

  • Node.js (voloや、その他下記ツールを使うのに必要)
  • Git
  • GitHub アカウント (フリーアカウントで十分です)
  • Mortar

セットアップ

始めるにあたり、テンプレートをダウンロードするか、下記コマンドを実行します(gitはGPLライセンスに基づいたソースコード管理システムです):

$ git clone git@github.com:mozilla/mortar-app-stub.git weatherme

voloも必要になるので、まだインストールしていない場合は下記を実行します(npmはnode.jsに付属するユーティリティです:

$ npm install -g volo

Voloはプロジェクトのタスクを実行するためのツールで、あなたが素早くテスト、最適化、そしてデプロイすることを1コマンドで実現します。

ノート: もしあなたがすでにvoloをインストールしていて、エラーが出る場合は、最新バージョンのvoloをインストールしてみて下さい。

開発

これで開発の準備は整いました。しかし、HTML/CSS/JSファイルはどこにあるのでしょう?ディレクトリ構成を見てみましょう。

README.textile
package.json
tools
volofile
www

プロジェクトの実体はwwwフォルダ以下にあります。他のファイルは後で触れるテストやデプロイに関係します。

wwwフォルダの中には沢山のファイルがあると思います。多くはHTML5 Boilerplateプロジェクト由来ですが、オープンウェブアプリ用にかなりカスタマイズされています。

HTML

HTMLコードを追加するため、 www/index.htmlを開きます。最初にtitleタグやmetaタグへタイトルや説明を埋め込み、次にアプリHTMLをbodyタグに記述します。CSSやJavascriptはここではなく、後で記述します。

weathermeに追加されたコードはここで確認できます。 Twitter Bootstrapを使用しているため、ナビゲーション要素やボタンを見ることができると思います。

ブラウザでHTMLを確認しましょう。プロジェクトのrootからこのコマンドを実行して下さい:

$ volo serve

This fires up a simple server on your local computer, and you can see your project by opening http://localhost:8008.

JavaScript

Next, let's add a JavaScript library. A good one is underscore.js, and we can get it with a simple volo command:

$ volo add underscore

The add command finds the project on GitHub and fetches it (you can also pass it a URL). It is now available as a library that we can import with require.js.

Next, let's write some JavaScript to power the app. I'm using Yahoo's weather API to get forecast data. Open up www/js/app.js and you'll see JavaScript already in there. This sets up require.js and includes jQuery and other libraries already.

You'll see the following statement:

define(function(require) {

This is defining a require.js module, and you need to write your code within this function. You can see the JavaScript code for weatherme here.

If you want to use a JavaScript library, you need to import it first. We added underscore.js to our project above, so to use it we would write:

var _ = require('underscore');

With require.js, never load in JavaScript with <script> tags. There might be a few exceptions, but everything should be imported with require. This helps modularity, separates concerns, and makes it easy to minimize and concatenate everything for deployment.

Since weatherme uses the Twitter Bootstrap tab component, we need to include its JavaScript. Add this line:

require('bootstrap/tab');

You don't care about the return value because it modifies the jQuery object. You can view the rest of the JavaScript for weatherme on GitHub.

Note: jQuery and Twitter Bootstrap were added manually for this specific app

CSS

Now, for CSS. Open up www/css/app.css and you'll see that it imports defaults.css. Feel free to open up defaults.css and modify the defaults. Since we are using Twitter Bootstrap, uncomment the following line:

@import "bootstrap.css";

That will include the CSS for Twitter Bootstrap components. We don't need the responsive CSS, so we will leave that commented out. When we build the app for deployment, this will all be inlined into a single CSS file.

Write the rest of the CSS for your app in this file. You can view the weatherme CSS here.

Now that I've written HTML, CSS, and JavaScript, it's time to test it! Fire up the serve command again:

volo serve

And test your app at http://localhost:8008. Time to fix bugs!

Deployment

Before we deploy, we need to customize manifest.webapp. Open up the file in www change the name, description, and other properties. If you're going to host it on github, make sure to set the launch_path setting to /<project-name>/ instead of just /.

When you are ready to deploy, build your app (from the root directory):
 
volo build
This creates a www-built directory with all JavaScript and CSS concatenated and minified. If you want to test this, run the serve command with the base argument:
 
volo serve base=www-built

If you want an appcache so that your app can run offline, volo has a command to generate it for you. All you need to do is:

volo appcache

And it will create it in the www-built directory (building your app if it hasn't been yet). That's it! All of your files will be cached and usable offline.

Lastly, volo has a command for deploying to GitHub. We recommend hosting your app on GitHub because it is easy and stable. You can't do this if you need a server-side component, but if it's all client-side you should use GitHub Pages. Just type:

volo ghdeploy

And volo will create a repo for you if it doesn't exist yet and push to the gh-pages branch, which tells github to create your page at <username>.github.com/<project>. You app is now live!

When you make future changes, you must first build your app (volo build) and then deploy it (volo ghdeploy). The ghdeploy command does not automatically build your app.

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

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