写真集（ギャラリー）の制作

Ⅱ 制作編
写真集（ギャラリー）の制作
1
概要
写真集（ギャラリー）の制作では、次のようなページ構成を考えました。
●カバーページ
図5.1にカバーページを示します。このページは、いわば写真集の表紙になり
ます。ヘッダの部分に「ミニギャラリー」とタイトルが入ります。そして画面左
上に著作者からのコメントやURLなどを参照できるページ（図5.2）にリンクし
た「About」のボタンと、作品の一覧をリスト形式で見られるページ（図5.3）
にリンクした「作品」ボタンを付けています。
図5.1
70
Chapter 5
写真集（ギャラリー）の制作
1
2
3
4
5
6
7
8
9
10
11
Chapter
●著作者からのコメントページ
Chapter
Chapter
Chapter
Chapter
図5.2
Chapter
●作品リスト
Chapter
Chapter
Chapter
Chapter
Chapter
図5.3
71
Ⅱ 制作編
●作品ページ
そして実際の作品ページがこれです（図5.4）。作品リストをタップしてこの
ページに入ります。ヘッダ部には「後」
「前」ボタンも配置したので、写真をこ
れで順送りにして閲覧する事も可能です。iPhoneは本来指を使ったフリックが
得意なのですが、開発で使うSafariなどではフリックはできないので、手堅く
タップボタンを設けています。
図5.4
2
概略HTML
では次にこれらのページを構成しているHTMLファイルを見てみましょう
（リスト5.1）
。写真が何ページも続こうが短いものになります。jQuery Mobile
ではdata-role="page"で各ページを表します。そしてそのIDに着目してい
ただくとわかりますが、cover、list、item、aboutの４ページ分を設定さえす
ればOKです（15行目、27行目、42行目、54行目）。
72

Download Report