以下の「GET URUSHI」を押下して、zipファイルをダウンロードしてください。
githubから直接ダウンロードする場合は下記にアクセスしてください。
https://github.com/future-architect/urushi/releases
ダウンロードしたファイルを解凍してください。 解凍したフォルダをHTTPサーバーに下記のように配置してください。 ブラウザから[配置したフォルダのHTTP Path]test/にアクセスするとデモのトップページが開きます。 開いたトップページから任意のWeb Componentにアクセスしてください。
test, utilフォルダーはdemoを確認するために必要なファイル群です。 デモが不必要な場合は、フォルダごとtest、utilを削除してしまって構いません。 また、requirejsを既に利用している場合、requirejsのコンフィグファイルにurushiモジュールのパスを追記するようお願いします。
いよいよUrushiをWebサイトに組込みます。
UrushiをWebサイトに組み込むには3つのステップが必要です。
まず、HTMLにUrushiを組み込むためのscriptタグを追加します。
次に、JavaScriptでUrushiのTemplate Engineを起動するためのソースコードを追加します。
これでUrushiを利用する準備は完了です。
Urushiを利用するには、UrushiのWeb Componentの定義を属性としてHTMLタグに追加します。
その前に、Urushiを組み込むHTMLファイルを作成しましょう。
下記フォルダ構造を参考にしてindex.htmlを新規作成してくだい。
それでは、1ステップずつ進めていきましょう。
headタグの中に2つのscriptタグを記述してください。 Urushiはrequirejsを利用しています。 まず、requirejsのコンフィグになるJavaScriptファイル(requireConfig.js)を読み込むためのscriptタグを記述します。 次に、requirejsの読み込み、及びrequirejsの初期化処理完了後に起動するJavaScriptファイル(main.js)を読み込むためのscriptタグを記述してください。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link href="./urushi/material/style/material.css" rel="stylesheet">
<script src="./config/requireConfig.js"></script>
<script src="./lib/js/require.js" data-main="./main"></script>
</head>
<body>
</body>
</html>
Urushiを起動するためのJavaScriptを記述します。
index.htmlと同じフォルダにmain.jsを作成してください。
main.jsはrequirejsの初期化処理が完了したら実行されます。
main.jsに以下のソースコードを記述してください。
Template engineに対して、第1引数に指定されたDocument Treeを解析しUrushiのWeb Componentに置き換えていく処理を命令しています。
// main.js
require.config(requireConfig);
require(['templateEngine', 'templateConfig'], function (templateEngine, templateConfig) {
templateEngine.renderDocument(document.body, templateConfig);
});
UrushiのWeb Componentを利用するには、HTMLタグにdata-urushi-type属性を追加し、Web Component名を記述します。
これだけでUrushiのWeb Componentは使えます。
また、data-urushi-options属性を記述することで、Web Componentのコンストラクタ引数を指定可能です。
Web ComponentのUsage一覧は現在作成中です。少々お待ちください。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link href="./urushi/material/style/material.css" rel="stylesheet">
<script src="./config/requireConfig.js"></script>
<script src="./lib/js/require.js" data-main="./main"></script>
</head>
<body>
<div data-urushi-type="panel" data-urushi-options='{"header" : "Header title"}'>
<button data-urushi-type="button">CLICK ME</button>
Toggle <input data-urushi-type="togglebutton" checked>
<input data-urushi-type="checkbox"> Check me!
</div>
</body>
</html>
プレビューを確認してみましょう。正しく導入出来ていると以下のプレビューと同じようなプレビューを確認できます。