6.2.7. 画面レイアウトの作成ルール¶
項目
6.2.7.1. 作成ルール¶
- html 、 body 、 head を書いてはいけません。
- title を書きましょう。
- <imart type=”head”> を使って script 、 link を書きましょう。
- <body onload=”func”> は $(document).ready(func) に置き換えましょう。
6.2.7.2. テーマで指定してあるので変更できないもの¶
以下は、テーマで指定してあるため、変更できません。
DOCTYPE
<!DOCTYPE html>
charset
<meta charset=”UTF-8”>
base
<base href=”http://hostname:portnumber/iap” target=”_self”/> ホスト名などはシステムによって異なります。
favicon
<link rel=”icon” href=”favicon.ico” type=”image/x-icon” /> <link rel=”Shortcut Icon” type=”img/x-icon” href=”favicon.ico” />
必須の CSS
テーマ固有の CSS
theme.css
後述の UI コンポーネント固有の CSS
imui.css
Twitter Bootstrap の CSS
bootstrap.css
- 必須の JavaScript ライブラリ
jQuery
jQueryUI
jQuery 、 jQueryUI Plugin
後述の UI コンポーネントが定義してある JavaScript
imui.js
画面遷移のユーティリティが定義してある JavaScript
imui-form-util.js
im_json.js 、im_window.js
メニュー制御で使用します。
6.2.7.3. 指定しなくてはならないもの¶
6.2.7.3.1. タイトルタグ <title></title>¶
すべての画面に説明的なタイトルを記述しなければなりません。 タイトルに指定する内容は、アプリケーション名、画面名、操作対象などから構築します。 これらを詳細なものから広範なものへと並べ、- (ハイフン) でつなげることを推奨します。
スケジュールの参照画面を例として挙げます。
リソース名 例 アプリケーション名 スケジューラ 画面名 予定の参照 操作対象名 対象の予定のタイトル
上記のような構成の場合、title タグは下記の通りです。
1 | <title>打ち合わせ - 予定の参照 - スケジューラ</title>
|
titleタグに指定した文字列は、以下のような用途に使われます。
- ブラウザのお気に入り (ブックマーク) へ登録する際の名前の初期値
- ブラウザウィンドウ、またはタブの名前
ユーザがお気に入りに登録することを考慮すると、ユーザごとに一意なタイトルを記述することを推奨します。 タイトルが一意になることで、お気に入りの中で重複しなくなるためです。
6.2.7.4. 任意で指定するもの¶
独自で追加したい CSS や JavaScript
- 独自 CSS
- <link rel=”stylesheet” type=”text/css” href=”somewhere/cssfile”>
- ページ独自の css ファイルへの参照を記述する
- 独自 JavaScript
- <script src=”somewhere/csjs.js”>
- ページ独自のクライアント JavaScript ファイルへの参照を記述する
ただし、これらのタグを head タグに直接記述することはできません。 これらのタグを記述したい場合は <imart type=”head”> タグの中に追記したいタグを記述します。 <imart type=”head”> タグの中に記述した内容が head タグの必須のスクリプトの後に追加されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <imart type="head">
<link rel="stylesheet" href="sample.css" type="text/css" />
<style type="text/css">
.sample {
background-color: black;
}
</style>
<script type="text/javascript" src="sample.js"></script>
<script type="text/javascript">
function doSomething() {
var foo='foo';
someFunction(foo);
}
</script>
</imart>
|
コラム
6.2.7.4.1. head タグにスクリプトを記述したい¶
head タグに画面固有のスクリプトやCSSを記述したい場合は、<imart type=”head”></imart> タグの中に記述します。 下記の HTML 実装例を参考にしてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!-- head タグ-->
<imart type="head">
<title>画面名</title>
<script>
function hoge(){
doSomething();
}
</script>
</imart>
<!-- 画面タイトル -->
<div class="imui-title">
<h1>画面タイトル</h1>
</div>
<!-- ツールバー -->
<div class="imui-toolbar-wrap">
<div class="imui-toolbar-inner">
<!-- ツールバー左側 -->
<ul class="imui-list-toolbar">
<!-- 戻る -->
<li><a href="#" class="imui-toolbar-icon" title="戻る"><span class="im-ui-icon-common-16-back"></span></a></li>
</ul>
<!-- ツールバー右側 -->
<ul class="imui-list-toolbar-utility">
<li><a href="#" class="imui-toolbar-icon" title="最新情報"><span class="im-ui-icon-common-16-refresh"></span></a></li>
</ul>
</div>
</div>
<!-- コンテンツエリア -->
<div class="imui-form-container">
<!--コンテンツエリア-->
</div>
|
6.2.7.4.2. body タグの onload 属性にJavaScriptを記述したい¶
body タグの onload 属性に JavaScript を記述したい場合、jQuery の機能を利用して実行するようにしてください。
1 2 3 | jQuery(document).ready(function() {
doSomething();
});
|