4.6 ウィジェット起動時の実装 ここではウィジェット起動時の基本事項、画面解像度の対応など、ウィジェ ットの起動と復元について解説します。 4.6.1 ウィジェット起動時の基本事項 ウィジェットの起動フローチャートを図4.6-1に示します。 図 4.6-1 ウィジェットの起動フロー ウィジェット起動 index.htmlの読み込み index.htmlのlinkタグに デフォルトCSSが指定 されている？ ［プログラミングポイント］ （1）<head>でJavaScriptファイル を読み込み、必要な全ての 関数定義を行っておくことで、 確実に<body>で関数の呼び 出しが成功するようにする onloadが実行される前まで （2） に、全てのイベントハンドラ への登録を済ませておくこ と （再登録は不可） ［構築ポイント］ デフォルトCSSの読み込み いいえ index.htmlの<script>タグ内 に直接記述されたJavaScript コードの実行 ①画面解像度の判定 ②CSSの置き換え JavaScriptファイルを読み込み、 各種イベントハンドラを登録 （1）HTMLとCSSだけで、可能な限 り、通常表示状態を想定し た最低限の表示を済ませる 必要なインライン要素とブ （2） ロック要素もbody要素内に 記述しておくことを推奨 HTMLとCSSによるレンダリング 次頁に続く 144 はい ［プログラミングポイント］ ウィジェットの起動が遅くな る原因となるので、< s c r i p t > タグ内ではできるだけオブジ ェクトの初期化を行わないこ と （onloadのタイミングで行 うこと）。ここでの処理に時 間がかかると、ウィジェット の起動から画面の描画終了ま での間に、不定なウィンドウ （白く塗りつぶされただけの ウィンドウ）が表示されてし まう可能性が高い 4.6●ウィジェット起動時の実装 図4.6-1続き 前頁より続く レンダリングと表示の関 係から、この時点で画面 にウィジェットが表示さ れる可能性が高い window.onload イベントハンドラの呼び出し ［プログラミングポイント］ （1）一般的なウィジェットでは、 通常表示状態を前提とした 初期化を行う o n l o a d 処 理 の 直 後 に、 （2） widget.ondockイベントハン ドラやwidget.onmaximize イベントハンドラが呼び出 されることを想定する 前回終了時の 表示状態は？ 通常表示状態 or 新規起動 最大表示状態 ドック表示状態 widget.onrestore イベントハンドラは呼ばれない widget.onmaximize イベントハンドラの呼び出し widget.ondock イベントハンドラの呼び出し 通常表示状態に遷移 最大表示状態に遷移 ドック表示状態に遷移 4 まずはHTML、CSS、JavaScriptの連携において、ウィジェット起動時の ウ ィ ジ ェ ッ ト 開 発 の 基 本 を 理 解 し よ う 基本的な考慮事項についてみていきましょう。 q スタートHTMLファイル 通常、HTML、CSS、JavaScriptの各種ソースコードはその種類ごと、あ るいは用途やソースの長さなどに応じてファイル分割し管理します。ウィジ ェットのエントリポイントであるスタートHTMLファイルでは、ウィジェッ トに必要な他のHTMLファイルやCSSファイル、JavaScriptファイルなどが、 ウィジェット起動時に適切に読み込まれるように配慮しなければなりません。 （a）事前のファイル読み込み 追加で読み込むHTMLファイルやCSSファイル、JavaScriptファイルは全 て<head>タグ内で指定します。 145 リスト4.6-1 ファイル読み込み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" type="text/css" src="sample.css" charset="UTF-8" /> <script type="text/javascript" src="sample.js" charset="UTF-8"></script> </head> <body bgcolor=white> <div id="text"> </div> </body> </html> リスト4.6-1の例では、sample.cssとsample.jsの2つのファイルが読み込ま れるように指定しています（リスト白部分）。head内で指定することにより、 全てのファイルがbody実行前に読み込まれ、またJavaScriptユーザ関数の定 義やイベントハンドラへの登録もbody実行前に行われることになります。 （b）body内で関数呼び出し ウィジェットエンジン内で関数定義が完了しないうちにJavaScript関数が 呼び出されることを防ぐため、関数の呼び出しは<body>タグ内で行う必要が あります。ただし、ウィジェット開発者の方で関数定義が確実に行われてい ると明らかにわかる場合は、この限りではありません。 w JavaScript （a）できるだけ静的コンテンツで記述 基本的にJavaScriptの実行は、HTML+CSSのレンダリングよりも比較的時 間がかかります。また、window.onloadイベントハンドラの処理に時間がか かると、onload処理が完了する前に、画面に対してそれまでのレンダリング 146 4.6●ウィジェット起動時の実装 結果が反映されてしまう可能性の高いことがわかっています（onloadと描画 処理は同期していません）。したがって、開発ガイドラインとしては可能な限 りHTMLとCSSだけで構築するように努め、メインの表示状態（一般的には通 常表示状態）を想定した最低限の表示を完了させておくようにしてください。 あらかじめ起動に時間がかかることが予想される場合は、最低限の表示＋「起 動中」であることを示すメッセージを出すなど、ユーザに対する配慮を心が けましょう。 （b）onload前のJavaScriptコード量は少なく window.onloadイベントハンドラが呼び出される前のJavaScriptの実行は、 ウィジェットの起動が遅くなる原因となるので、JavaScriptのコード量をで 4 きるだけ少なくすることが大切です。ここでの処理に時間がかかると、ウィ ジェットの起動から画面の描画終了までの間に、不定なウィンドウ（白く塗り ウ ィ ジ ェ ッ ト 開 発 の 基 本 を 理 解 し よ う つぶされただけのウィンドウ）が表示される可能性の高いことがわかってい ます。 たいていの場合、onload呼び出し前には後述する4.6.2の処理やイベントハ ンドラへの関数登録だけに留めるのが一般的です。比較的時間のかかるオブ ジェクトの初期化などは、onloadが呼ばれたタイミングで行いましょう。 4.6.2 解像度に応じたレイアウト表示 q ウィンドウサイズの指定 通常表示状態と最大表示状態の場合、コンフィギュレーションXMLドキュ メント（config.xml）に解像度ごとのウィンドウサイズを指定できます。なお ドック表示状態のサイズはモバイル端末に依存するので、ウィジェット開発 者はサイズを指定することはできません。 display要素のtype属性にそれぞれの解像度を指定します。通常表示状態の 147 ウィンドウサイズ用としてwidth／height属性を、最大表示状態のウィンドウ サイズ用としてmaximizedwidth／maximizedheight属性を使用します。この 記述例を次に示します（リスト白部分）。コンフィギュレーションXMLドキュ メントのdisplay要素、ウィンドウサイズの適用ルールについての詳細は5.4.4 を参照してください。 リスト4.6-2 ウィンドウサイズの指定例 <widget id="http://www.ric.co.jp/widgets" version="1.0" width="100" height="100"> <xwidget profile="1.0"> <display type = "VGA" width = "300" height = "200" maximizedwidth = "300" maximizedheight = "250" /> <display type = "QVGA" width = "150" height= "100" maximizedwidth = "300" maximizedheight = "250" /> </xwidget> </widget> w 解像度ごとにコンテンツを用意 QVGA用とVGA用のコンテンツをそれぞれ用意します。アイコンやボタン、 背景などの画像リソースやCSSなど、解像度による振り分け対象のファイル は、QVGAとVGAで対応するファイル同士を同一の名前で作成し、次のよう に画面解像度ごとにフォルダ分けして配置します（図4.6-2） 。 148 4.6●ウィジェット起動時の実装 図4.6-2 解像度振り分けを考慮したウィジェットのフォルダ構成 ウィジェットのルートフォルダ QVGA 画像ファイル CSSファイル VGA 画面解像度に対応する画像やCSSのファイル 名は、QVGAとVGAで対応するファイル同士 を同一の名前にしておきます。こうすること によって、JavaScript側ではフォルダを切り 替えるだけで済むので、コードの共通化を図 ることができます。 画像ファイル CSSファイル コンフィギュレーションXMLドキュメント(config.xml) 4 スタートHTMLファイル(index.html) ウ ィ ジ ェ ッ ト 開 発 の 基 本 を 理 解 し よ う JavaScriptファイル QVGAとVGAで共通化できるものは、極力共通化しておきましょう。この ような構成にしておくと、JavaScriptからは解像度判定後にフォルダを切り 替えるだけで済み、コードも共通化することができます。 e CSSファイル用のlinkタグを記述 次に、メインとなるCSSファイル用のlinkタグをスタートHTMLファイルに 記述します。これは、後でJavaScriptから解像度に応じたCSSファイルを指 定するための受け皿になります。linkタグのid属性はJavaScript側で特定する ために使用します。なお、特に必要なければ、このlinkタグのhref属性にデフ ォルトCSSファイルを指定する必要はありません（リスト4.6-3） 。 149
© Copyright 2024 Paperzz
