GUI部品とイベント処理の基本をマスターしよう (5/5)

このように、Webページではindex.htmlの他にmain.jsやmain.cssといったファイルが生成されており、他にparts.jsといったシステムライブラリなども利用されていることがわかりました。では、作成されたWebアプリは、どのようなファイル構成になっているのでしょうか。

前回説明して「実行と共有」の設定で展開先に自分のMacを選び、動作形式で保存してみてください。「サイト」フォルダにWebアプリのファイルが保存されます。Findeでこのフォルダを開き、その中身を見てみましょう。ざっと以下のようなファイル類が作成されていることがわかるでしょう。

◯Webアプリのフォルダ内
index.html――作成したWebページです。
「images」フォルダ――Webアプリの背景イメージが保存されています。
「Parts」フォルダ――フレームワークのJavaScriptファイルが保管されています。
「mobile」フォルダ――作成したモバイル向けのスクリプトやスタイルシート、イメージなどがまとめられています。この中には、更に以下のようなものがあります。

◯「mobile」フォルダ内
「Images」フォルダ――モバイルサイトで必要なイメージがまとめられています。
「Parts」フォルダ――モバイルサイト向けのフレームワークで使用するJavaScriptファイルとイメージが保管されています。
main.js――ユーザーが定義したイベント処理用の関数類が記述されたスクリプトファイルです。
main.css――ユーザーが作成したレイアウトで使うスタイルシートファイルです。

これらの中で重要となるのは、既に説明した３つのファイルです。まず、「index.html」ファイル。これが、Webページのファイルになります。そして、「mobile」フォルダ内にある「main.js」と「main.css」。これらが、Webページで作成したスクリプトやGUIのスタイルになります。

今は、まだ直接これらのファイルの中身を見て操作することはないでしょう。が、実際にWebアプリを作成していくようになると、これらの中身について理解していく必要が生じます。とりあえず、今は「こんな感じでWebアプリは構成されているんだ」ということがわかっていれば十分でしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。