Skip to content

1.x tutorial index html hbs

Jump to bottom Edit New page
fkei edited this page Dec 20, 2013 · 1 revision

HTML

概要

Beezは、「シングルページアプリケーション - SPA」をサポートします。

このチュートリアルでも、シングルページアプリケーションを作成します。

準備

先ほど作成した、tutorial プロジェクトをブラウザで表示します。

http://0.0.0.0:1109/m

tutorial ディレクトリが、先ほど作成した tutorial プロジェクトのディレクトリになります

エントリーポイントのhttp://0.0.0.0:1109/m/tutorial/s/index をブラウザで開いてください。下記のような表示になっていると思います。

Static Server - /m/tutorial/s/index

HTMLファイル

チュートリアルアプリケーションでは、index.html.hbsを元に、index.htmlに自動変換しています。

Beezで利用するHTMLファイルは、テンプレートエンジン - Handlebars(hbs) から自動変換することが出来ます。 そのため、直接HTMLファイルを触らずにHandlebarsのテンプレートの開発のみでも問題ありません。 この機能は、配信サーバー(beez-foundation#Static Server)で自動的に行われます。

index.html.hbs 自動変換ルール

Beezは、開発環境・ビルド・デプロイまでを一貫して意識しているプロダクトです。 そのため beez, beez-foundation で自動生成されるファイルは、設定ファイル郡(conf/)の構成に大きく依存することになります。

index.html.hbsの場合であれば、下記のようなルールでファイルが生成されます。

index.html.hbs -> [env].[key].html

[env] とは

  • ローカル版、開発版、リリース版と言った環境別に設定を分けて管理するための 名前
  • 抽出元 : conf/local.json
  • 開発サーバー(beez-foundation)の起動オプションで指定できます。

[key] とは

  • [env] の中で更に、圧縮版、非圧縮版、issue版といった、開発内容の種別に設定を分けて管理するための 名前
  • 抽出元 : conf/local/develop.json and conf/local/release.json

conf ディレクトリ:

設定ファイルは全て、conf/ディレクトリ内のJSONファイルで指定していきます。 JSONファイルの設定を変更して保存するだけで、反映されるので開発サーバーの再起動は必要ありません。 このことも開発スピードの速さに貢献しています。

conf/
├── local.json # [env] に相当します
│
├── local
│   ├── develop.json # [key]に相当します
│   └── release.json # [key]に相当します
│
│
└── mockdata # このディレクトリは無視されます。

上記ルールの結果、変換結果は下記のようになります。

JSONファイルの内容などについてはConfigurationや、StaticServer · CyberAgent/beez-foundation Wikiを参照してください。

テンプレートエンジン(Handlebars)

Beezでは、テンプレートエンジン - Handlebars(hbs) を様々な箇所で利用しています。

index.html.hbsでも利用しており、利用されているファイルの拡張子は .hbs に統一されています。

index.html.hbs 内 変数

beezのhbsファイルでは、変数が利用できます。

index.html.hbsの {{XXXX}} で利用可能なデータ

変数 型 説明
{{...}} JSON Object conf/local/[key].json
{{name}} 文字列 [env]
{{key}} 文字列 [key]

自動生成 実行

上記の設定をしてあれば、http://0.0.0.0:1109/m/tutorial/s/index を表示するタイミングで、事前に利用可能な自動生成ファイル後のファイルを表示しています。 あとは、リンクをクリックすれば自動で生成されたファイルデータが取得できます。

元になるhbsファイルが下記のようになっているとします。

index.html.hbs

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <title>Beez github - [{{name}}]</title>
  </head>
  <body>
    <div id="w"></div>
      <script type="text/javascript" data-main="{{requirejs.config.beez_core.url.base}}/index/require.beez.{{name}}.{{key}}" src="{{requirejs.config.beez_core.url.vendor}}/require.js"></script>
  </body>
</html>

beez-foundationで自動変換ルールに沿って変換されたファイルは以下のようになるはずです。

local.develop.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <title>Beez github - [local]</title>
  </head>
  <body>
    <div id="w"></div>
      <script type="text/javascript" data-main="http://0.0.0.0:1109/m/tutorial/s/index/require.beez.local.develop" src="http://0.0.0.0:1109/m/tutorial/vendor/require.js"></script>
  </body>
</html>

コード説明

HTMLで注目する場所は <script> タグになります。 data-main 属性で定義されたJSファイルを起点とする設定になります。 上記のlocal.develop.html で言えば、http://0.0.0.0:1109/m/tutorial/s/index/require.beez.local.develop がブートストラップ用のJavaScriptファイルになります。

この部分を環境やキーに応じてBeezが変更するために状況に応じたデプロイなどが可能になっています。

require.js では、定義する際に拡張子.jsを除外した形で定義します。 beezは、JSのロードをすべてrequire.jsで管理していますので、詳しくはrequire.js#data-mainのドキュメントを参照ください。

TIPS

  • Beezでは、迅速な開発を実現するため可能な限り設定ファイルや生成ファイルを自動で処理します。
  • ソースコードの変更は、ファイル保存 ＋ ブラウザリロードですぐに確認することが出来ます。
  • 開発Webサーバーからの配信ファイルはすべてキャッシュが有効にならないように設定されています。
Add a custom footer
Add a custom sidebar

Clone this wiki locally