チュートリアル(基本編)
チュートリアル(基本編)
Last modified by simdy on 2014年10月30日, 12:55
チュートリアル目次
このチュートリアルでは、hifiveのもっとも基本的な使い方を学びます。
アプリケーションをビュー・コントローラ・ロジックに分ける(構造化する)ことで、
全体の見通しを良くし、変更に強いアプリケーションを作りましょう。
01.準備
hifiveの読み込み方法
hifiveはこちらのページ からダウンロードできます。
また、お試し利用のためにコードホスティング も行っています。
以下のようにして、必要なCSSファイル、JSファイルを読み込んでください。
なお、hifiveはjQueryに依存していますので、先にjQueryを読み込むのを忘れないようにしましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- hifiveスタイルシートの読み込み -->
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
<!-- jQueryの読み込み。IE8以下の場合は1.xを、それ以外の場合は2.xを読み込む -->
<!--[if lt IE 9]>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<![endif]-->
<!-- hifiveフレームワークの読み込み -->
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.dev.js"></script>
</head>
<body>
Hello.
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<!-- hifiveスタイルシートの読み込み -->
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
<!-- jQueryの読み込み。IE8以下の場合は1.xを、それ以外の場合は2.xを読み込む -->
<!--[if lt IE 9]>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<![endif]-->
<!-- hifiveフレームワークの読み込み -->
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.dev.js"></script>
</head>
<body>
Hello.
</body>
</html>
※(注記)上のサンプルではお試し用のコードホスティング を利用しています。
hifiveを手元にダウンロードした場合、また本番利用などの際は、自分でホストしたファイルを読み込むようにパスを書き換えてください。
hifiveを手元にダウンロードした場合、また本番利用などの際は、自分でホストしたファイルを読み込むようにパスを書き換えてください。
動作確認
作成したページをブラウザで開いてください。
そして、ブラウザの開発者ツールを開き(F12キーを押すと開きます)、コンソールに
[INFO] 開発版のhifiveの読み込みが完了しました。リリース時はMinify版(h5.js)を使用してください。
というログメッセージが出力されていることを確認してください。
ログメッセージが表示されない場合の確認ポイント
- ファイルを保存しましたか?
- JavaScriptのURLは間違っていませんか?
- hifiveの前に、jQueryを読み込んでいますか?
- コンソールにエラーは出ていませんか?
- ブラウザによっては、ファイルとしてHTMLを開く(URLがfile://で始まる状態)と、JavaScriptの読み込みが行われない場合があります。その場合は、JavaScriptの実行を許可するか、適当なHTTPサーバを立ててhttp://のURLでファイルを開いてください。(※(注記)ファイルとして開いた場合、一部の機能が動作しない場合があるので、後者を推奨します。)
準備ができたら、まずはプログラミングの第一歩、hifiveでHello World!に挑戦しましょう。
次のステップ ⇒ 02.HelloWorld
参考
Eclipseを使用している方の場合、別途提供している"プロジェクト生成ウィザードプラグイン"を使って
プロジェクトの初期構成、ライブラリの取得を行うこともできます。