6.2.7. 画面レイアウトの作成ルール¶

項目

作成ルール
テーマで指定してあるので変更できないもの
指定しなくてはならないもの
- タイトルタグ <title></title>
任意で指定するもの
- head タグにスクリプトを記述したい
- body タグの onload 属性にJavaScriptを記述したい

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 タグの必須のスクリプトの後に追加されます。

<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>

コラム

テーマおよびUIコンポーネントは、jQueryを利用しています。
prototype.js を利用したい場合、<imart type=”head”>タグの中で prototype.js を読み込んでください。
UIコンポーネントは、(function($){...})(jQuery) のように無名関数として実装しているので、$関数の競合は発生しません。

6.2.7.4.1. head タグにスクリプトを記述したい ¶

head タグに画面固有のスクリプトやCSSを記述したい場合は、<imart type=”head”></imart> タグの中に記述します。下記の HTML 実装例を参考にしてください。

<!-- 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 の機能を利用して実行するようにしてください。

jQuery(document).ready(function() {
  doSomething();
});

目次