創作ゼミ報告書
青森観光情報サイトの制作
緑川研究室
ソ２５０１６

富岡 新共同研究者
ソ２５０２１

宮崎 広大

◎研究目標文章が長く必要な情報が何処に記載されているのか分かりづらい、情報探しが『困難なサイト』とは真逆の誰でも簡単に必要な情報を取得することができる『容易なサイト』を制作する。
最終的には、必要な情報をひと目で分かるような情報サイトの完成を最終目標とする。

◎研究内容
メニューやスライドショー等、各ブラウザに対応させるには JavaScript にプログラムしなければならない。
しかし、この方法では非常に効率が悪い。
そこで素の JavaScript で記述し、各ブラウザ（IE や Google Chrome 等）ごとに対応させることを避け、『簡単』且つ『効率よく対応』することが可能な JavaScript 用のライブラリ『jQuery』を使用した HP 制作を行うことにした。
この『jQuery』を使用することにより「どのくらい効率が良いのか」と言うと、メニューやスライドショー等の何かを実装する際、通常は素の JavaScript に各ブラウザに対応できるようにプログラムしないといけないが『jQuery』を使用することにより数行のプログラムで各ブラウザに対応したものを実装することが可能だ。
HP に掲載する青森のおすすめスポットとして『利用者の多い青森駅周辺』や『スキー観光客で賑わう山周辺』、『個人的に紹介しておきたい地元おすすめのスポット』等を掲載することに決め、『合浦公園』、『かやの茶屋』、『新町商店街』、『青い海公園』、『ワ・ラッセ』、『A-FACTORY』の 6 ヶ所の情報を掲載しようと考え、各スポットの撮影を行った。A-FACTORY については、12 月に店内の撮影許可が下りたので「アオモリシードル」を作っている工房や館内の飲食店等の撮影を急遽することになった。
撮影したものは、画像編集・加工ソフトウェア『GIMP2』やビデオ制作・編集ソフトウェア『Windows ムービーメーカー』で加工及び編集を行い、観光名所の情報については共同研究者（宮崎広大）が調べて掲載するものを一通り揃えた。
※ 写真加工については『GIMP2』の「色」→「トーンカーブ」を使い、撮影した写真を少し鮮やかにした。画像の加工前と加工後の写真は、項目『使用したツール』→『GIMP2』の図.5 と図.6 に記載している。
撮影が終了し、HP に掲載するもの（写真や動画・各スポットの情報等）が一通り揃ったので HP の制作を本格的に始めた。各ページでどのような情報を掲載するのか共同研究者（宮崎広大）と相談した結果、各青森おすすめスポットにどのようなところなのかを長文にならないように出来る限り数行でまとめた。
『かやの茶屋』
・『ワ・ラッセ』
・『A-FACTORY』等のお店については、どのようなところなのかという情報だけでなく、そのお店の商品情報（商品名や価格）・駐車場情報（場所や料金）を表でまとめることにした。
jQuery プラグイン（SmartMenus や bxSlider、FitVids 等）でメニューやスライドショーなど実装し、最終的にはシンプルな青森の観光情報サイトが完成した。
※ 各プラグインについては、項目『使用したツール』→『使用したプラグイン』に記載している。

◎使用したツール
・jQuery
ジョン・レッシグ氏によって開発・公開された JavaScript 用のライブラリ。
簡単且つ効率よく各ブラウザ（IE や Google Chrome 等）ごとに対応させることが可能な為、この jQuery を使用した。

～使用したプラグイン～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～『SmartMenus』
ブラウザーの幅に合わせて変わるレスポンシブメニュー。
最近はスマートフォンで Web を見る人が多い。そこでレスポンシブメニューの実装をすることにした。
下の図のようにパソコンやスマートフォンそれぞれに対応するメニュー表示になる。

図 1.パソコンでの表示

図 2.スマートフォンでの表示『bxSlider』
レスポンシブ対応のスライダー。
HP のトップ画面で写真をスライドさせようと考え、実装することにした。
簡単に実装することができ、色々とオプションもある。
下の図のようにトップ画面でメニューの下にスライドが表示される。

図 3.トップ画面

『FitVids』
動画をレスポンシブに対応させることができる。
YouTube 等の動画を下の図のように HP へ埋め込むことができる。

図 4.HP 上で動画を再生～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

・メモ帳
Microsoft Windows に付属されているテキストエディタ。HTML や CSS、JavaScript のプログラムはこのメモ帳で行った。

・GIMP2
画像の加工をすることができるフリーソフト。
HP 上に掲載している画像は全てこのソフトで加工している。下の図の通り、加工すると鮮やかになる。

図 5.画像加工前

図 6.画像加工後・Windows ムービーメーカー
Microsoft が開発した動画編集ソフトウェア。
HP のムービーギャラリーに掲載している動画はこのソフトで編集したものである。

・♪案内地図簡単にオリジナルマップを作ることが出来るフリーソフト。
右の図は A-FACTORY のオリジナルマップである。

図 7.A-FACTORY の地図

◎使用機材（カメラ）PENTAX デジタルミラーレス一眼 Q10
主にこのカメラで写真及び動画の撮影を行った。

図 8.使用機材 1

FUJIFILM デジタルカメラ FinePix Z110

予備のカメラ。
共同研究者（宮崎広大）と撮影に行った際、使用した。
図 9.使用機材 2◎スケジュールについて
2015 年・4 月～5 月
jQuery・HTML の基礎の勉強。
・6 月
研究内容を決定。HP デザインを考える。
・7 月
インターネットなどを使用し、各観光名所の情報収集を開始する。
・8 月～9 月
掲載する予定のところの撮影をする。
サイトの『Home』、『青森おすすめスポット』各ページベース完成。
・9 月～10 月『青森おすすめスポット』の各ページ情報記載開始。
・11 月
各観光名所の情報収集を終了する。
『青森おすすめスポット』の各ページ情報記載完了。
・12 月
A-FACTORY の店内撮影の許可が出たので急遽撮影。
特設ページ(A-FACTORY)を制作開始。
『青森おすすめスポット』の各ページ及び特設ページ完成。全ページ見直し。
2016 年・1 月
緑川研究室の HP に掲載予定。

◎結論・研究成果
予定していた撮影期間や情報収集の期間など大幅に過ぎてしまったため、実装する予定だったプラグインや観光名所の情報（駐車場の位置や地図等）の掲載をいくつか断念。想像していたホームページとは違い、情報量も必要最低限にしたので全体的にシンプル過ぎる青森の観光情報サイトが完成した。
jQuery だけではなく、HTML も初の試みだったのでメニューやスライドショーの実装など HP 作りの奥深さを実感することができた。

◎参考文献（書籍・Web データの出典等）
・Web 制作の現場で使う jQuery デザイン入門[改訂新版]…西畑一馬
・はじめての JavaScript…天野友道
・Youtube などの動画コンテンツをスマートフォンの横幅に合わせてくれる jQuery「FitVids.js」の搭載手順
http://ozpa-h4.com/2012/08/08/fitvids-youtube-smartphone-fit-width/
・さまざまなデバイスに対応しているレスポンシブメニュー「SmartMenus」
http://webkaru.net/jquery-plugin/smartmenus/
・[JS]主要ブラウザ全てに audio 要素で MP3 を再生できるようにするスクリプト -audio.js
http://coliss.com/articles/build-websites/operation/javascript/js-audio-js.html