<indexファイルの編集>

CEPエクステンションのUIはHTMLベースなので、Webサイトと同様にindexファイルが存在します。UIの見栄えや機能はこのファイルによってもたらされます。

 

CC Extension Builderで作成された新規プロジェクトのindexファイルは以下のようになっています。

これを骨組みだけを残して消去し、<body>タグを以下のように変更します。

<body id="ntWindow">

これはNakatoji UIライブラリを使用する上で必須の編集になります。

 

結果的に以下のようになっていればOKです。

この骨組みに肉付けしていきます。

まず、<body>タグの先頭にライブラリの読み込みを記述します。

<script src="/js/libs/jquery-2.0.2.min.js"></script>
<script src="/js/libs/nakatojiUiLib-0.15.js"></script>

これらが先に読み込まれていないとNakatoji UIライブラリでUIが作成できませんので、必ず先頭に記述します。

 

続けて以下のスクリプトの読み込みもここに記述します。

<script src="/js/main.js"></script>

これはUI側で処理するスクリプトの読み込み指定で、記述位置は後半でも構いません。ただ、ここに「読み込み系」としてまとめておいたほうがメンテナンスが楽でしょう。

 

ここまでで以下のようになっていればOKです。

 

 

<ライブラリの初期化>

ここからがUIに関する記述になります。

Nakatoji UIライブラリを使ったUI作成はJavaScriptで行いますので、<script>タグの中に記述していきます。

<script type="text/javascript">
</script>

 

まず、ライブラリを機能させるためには初期化が必要です。初期化に関する解説は以下のページにあります。

参照:ライブラリの初期化

今回使用するオプションは「fontSize」「defaultFont」「fontOffset」「testMode」です。

nakatojiLib.init({
	fontSize: 11,
	defaultFont: "'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif",
	fontOffset: 0,
	testMode: true
});
  • fontSize:今回は11(ピクセル)にしています。
  • defaultFont:ここにはWebのFont指定で定石的な記述をします。
  • fontOffset:ベースラインに不満がある場合に使用します。しかし、これは実際に表示して見ないとわからないので、とりあえず「0」しておきます。
  • testMode:解説ページにある通り、実際にホストアプリで読み込ませるまではtrueにしておきます。

以下のようになっていればOKです。 

 

<部品等の配置>

Illustratorで作ったモックアップを開き、その座標を参照しながら必要な部品を配置していきます。

今回作ったモックアップは以下のようになっています。

まずは必要なボタンを配置します。ボタンの作成に関する解説は以下のページにあります。

参照:<個別解説>ボタン

今回使うオプションは「name」と「icon」です。

nakatojiLib.addCntl("button", [15, 4], [22, 22], {
	name: "button_L",
	icon: "./icons/ui_L.png"
});
  • name:このオブジェクトに対するユーザーのレスポンスを受け取るために必要です。
  • icon:ボタンに表示するアイコンのファイル名を記述します。indexファイルから見た相対パスで記述します。

この要領で必要なボタンについて記述していきます。 

 

ボタンに続き、テキストエリアも配置します。テキストエリアの作成に関する解説は以下のページにあります。

参照:<個別解説>テキストエリア

今回使うオプションは「name」「fontsize」「value」です。

nakatojiLib.addCntl("textArea", [51, 80], [18, 44], {
	name: "txa",
	fontsize: 10,
	value: "0"
});
  • name:ユーザーがこのオブジェクトに書き込んだ内容を取得するために必要です。
  • fontsize:この大きさのエリア内に合わせて10(ピクセル)にしています。
  • value:初期値として「0」が表示されるようにしています。

 

最後はテキストエリアに付帯するテキストの配置です。テキストエリアの作成に関する解説は以下のページにあります。

参照:<個別解説>テキスト

今回使うオプションは「value」のみです。

nakatojiLib.addCntl("text", [54, 40], undefined, {
	value: "offset : "
});
  • value:表示するテキストです。

座標についてはプレビューしながら後からバランスを修正していきます(暫定的に経験則でこの値にしています)。

 

すべて記述すると以下のようになります。

わかりやすくするためにコメントを付けていますが、もちろん必須ではありません(座標の数値は各々の作り方によって違ってきます)。

  

<UIのプレビュー>

ここまで出来たらプレビューしてみます。

プロジェクトのプレビューは、Bracketsのウィンドウの右上にあるライブプレビューボタン(カミナリマーク)をクリックします。

記述にエラーがなければchromeのウィンドウが開き、以下のように表示されるはずです。

なお、プレビューではマニフェストで指定したウィンドウの大きさは反映されません。

また、アイコンの表示がずれていますが、プレビュー時と実際のアプリでの表示では描画のされかたが違うので、表示位置の微調整はもう少し先で行います。

 

Nakatoji UIライブラリを使用すると、たったこれだけの記述で標準的な見栄えのUIが完成します。

さらに見栄えだけではなく、すでにユーザーのアクションを捕まえる仕組みも機能しています(後述)。

 

 

Joomla templates by a4joomla