GUI部品とイベント処理の基本をマスターしよう (3/5)
作成:2011-05-09 08:24
更新:2011-05-09 08:24
更新:2011-05-09 08:24
■生成されたHTMLページを見てみよう
作成したWebページ関連のファイルは、Dashcodeによって自動生成されたものです。したがって、Webアプリを作る人間が自分で直接コードを編集することはほとんどないでしょう。が、「Webページがどのような仕組みになっているか」を理解する上で、その内容をざっと把握しておくことは重要です。
では、index.htmlの中身をチェックしてみましょう。下のリスト欄に、生成されたindex.htmlのソースコードを掲載しておきます。予想外に難しそうな内容なのに驚いたかも知れません。
ヘッダー部分でかなりいろいろなことが記述されているのがわかりますが、これらの詳細を理解するのは大変でしょう。「Webページを構築するために必要なスクリプトやイメージ、スタイルシートなどを読み込む処理をしている」と考えてください。
スクリプトは、<script>タグを使い、src="Parts/parts.js" とsrc="main.js"を読み込んでいることがわかります。parts.jsは、Dashcodeのライブラリで、Dashcodeが必要とする様々な機能がまとめられており、必要に応じて呼び出されます。そして、main.jsが、先ほどボタンの処理などを記述したスクリプトファイルになります。つまり、「parts.jsはシステムのスクリプト、main.jsはユーザが処理を追加するときに使うスクリプト」というわけです。
ボディ部分では、まず<body>タグに「onload="load();"」という属性が用意されているのがわかります。このonloadという属性は、ページの読み込みが完了したときに発生するイベントを処理するためのものでしたね。ページがすべて読み込み終わったところで、このload関数を呼び出してる、というわけです。
また、ボディの表示は、基本的に<div>タグを使って行われていることもわかります（唯一、入力フィールドについては<input type="text">を使っています）。スタイルシートにより、これらの<div>タグに細かな表示の設定を割り当てることで、Dashcodeでデザインした表示を作成しているのです。
その他の細々としたものは、今は理解する必要などありませんが、「HTMLのGUI用のタグ（フォームで使われる<input>タグ関係）がそのまま使われているわけではない」という点は理解しておく必要があるでしょう。入力フィールドは<input type="text">を使っていますが、プッシュボタンは<input type="button">などではなく、ただの<div>タグです。ただ単に、HTMLのフォーム関係のタグを生成しているわけではないのです。
では、index.htmlの中身をチェックしてみましょう。下のリスト欄に、生成されたindex.htmlのソースコードを掲載しておきます。予想外に難しそうな内容なのに驚いたかも知れません。
ヘッダー部分でかなりいろいろなことが記述されているのがわかりますが、これらの詳細を理解するのは大変でしょう。「Webページを構築するために必要なスクリプトやイメージ、スタイルシートなどを読み込む処理をしている」と考えてください。
スクリプトは、<script>タグを使い、src="Parts/parts.js" とsrc="main.js"を読み込んでいることがわかります。parts.jsは、Dashcodeのライブラリで、Dashcodeが必要とする様々な機能がまとめられており、必要に応じて呼び出されます。そして、main.jsが、先ほどボタンの処理などを記述したスクリプトファイルになります。つまり、「parts.jsはシステムのスクリプト、main.jsはユーザが処理を追加するときに使うスクリプト」というわけです。
ボディ部分では、まず<body>タグに「onload="load();"」という属性が用意されているのがわかります。このonloadという属性は、ページの読み込みが完了したときに発生するイベントを処理するためのものでしたね。ページがすべて読み込み終わったところで、このload関数を呼び出してる、というわけです。
また、ボディの表示は、基本的に<div>タグを使って行われていることもわかります（唯一、入力フィールドについては<input type="text">を使っています）。スタイルシートにより、これらの<div>タグに細かな表示の設定を割り当てることで、Dashcodeでデザインした表示を作成しているのです。
その他の細々としたものは、今は理解する必要などありませんが、「HTMLのGUI用のタグ（フォームで使われる<input>タグ関係）がそのまま使われているわけではない」という点は理解しておく必要があるでしょう。入力フィールドは<input type="text">を使っていますが、プッシュボタンは<input type="button">などではなく、ただの<div>タグです。ただ単に、HTMLのフォーム関係のタグを生成しているわけではないのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>sampleapp</title>
<!--[if IE]><script>document.write('<base href="' + location.protocol + '//' +
location.host + location.pathname.replace(/\/[^\/]*$/, '/mobile/') + '"/>')
</script><![endif]-->
<base href="mobile/">
<script id="DC_baseScript">if(navigator.userAgent.indexOf('AppleWebKit/') == -1)
document.write('<base href="' + location.protocol + '//' + location.host +
location.pathname.replace(/\/[^\/]*$/, '/mobile/') + '"/>')</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0,
maximum-scale=1.6">
<meta name="apple-mobile-web-app-capable" content="YES">
<link rel="apple-touch-icon" href="Images/WebClipIcon.png">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="Parts/parts.js" charset="utf-8"></script>
<script type="text/javascript" src="main.js" charset="utf-8"></script>
</head>
<body onload="load();">
<div id="content">
<div id="text1" apple-part="com.apple.Dashcode.part.webtext"
class="apple-text apple-no-children" apple-default-image-visibility=
"hidden"apple-text-overflow="ellipsis" apple-style=
"part-height-dependent: true;part-width-dependent: true;"></div>
<input id="field1" type="text" name="" value=""
class="apple-textfield apple-no-children" apple-part=
"com.apple.Dashcode.part.textfield">
<div id="button1" apple-part="com.apple.Dashcode.part.pushbutton"
class="apple-no-children" apple-text-overflow="ellipsis"
apple-style="image-theme: 0; image-shape: 3; image-button-type: 0;
image-opacity: 1.00; image-top-color: 0.290196091,0.423529416,0.607843161,1;
image-bottom-color: 1,1,1,1; image-radius: 5,5,5,5; image-border: 1;
image-border-color: 0,0,0,0.2; image-border-width: 1; shine-on: 1;
shine-strength: 0.17; shine-alpha-level: 0.04; shine-height: 0.50;
glass-arc-height: 0.00; embossed-on: 1; embossed-depth: 1;
embossed-shadow: 0.68; embossed-highlight: 0.3;
shadow-include-shadow: 0;"></div>
</div>
<div apple-part="com.apple.Dashcode.part.webtext"
class="apple-text apple-no-children" apple-default-image-visibility="hidden"
apple-text-overflow="ellipsis" id="footer" apple-group="text" apple-style=
"part-height-dependent: true;"></div>
</body>
</html>
※関連コンテンツ
「DashcodeによるiPhone用Webアプリ作成入門」に戻る