開発者ブログ
チュートリアル(基本編)

チュートリアル(基本編)

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>
※上のサンプルではお試し用のコードホスティングを利用しています。
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を使用している方の場合、別途提供している"プロジェクト生成ウィザードプラグイン"を使って
プロジェクトの初期構成、ライブラリの取得を行うこともできます。

ツール/プロジェクト生成ウィザードプラグイン


Copyright (C) 2012-2016 NS Solutions Corporation, All Rights Reserved.