チュートリアル（基本編）
チュートリアル（基本編）
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>
動作確認
作成したページをブラウザで開いてください。
そして、ブラウザの開発者ツールを開き(F12キーを押すと開きます)、コンソールに
[INFO] 開発版のhifiveの読み込みが完了しました。リリース時はMinify版（h5.js）を使用してください。
というログメッセージが出力されていることを確認してください。
準備ができたら、まずはプログラミングの第一歩、hifiveでHello World!に挑戦しましょう。
次のステップ ⇒ 02.HelloWorld
参考
Eclipseを使用している方の場合、別途提供している"プロジェクト生成ウィザードプラグイン"を使って
プロジェクトの初期構成、ライブラリの取得を行うこともできます。