プログラミングで青森を紹介
チーム5408
青森大学 ソフトウェア情報学部 4年
喜來 公貴、林 千夏

発表テーマ
１．八甲田周辺の観光サイト
喜來 公貴
２．弘前城の四季のアニメーション
林 千夏
今年度卒業研究で取り組んだ、２テーマの成果に
ついて発表する

テーマ1 八甲田周辺の観光サイト
2022年度卒業研究 喜來 公貴
• 八甲田山に興味がある人や自然に興味がある人に
向けて紹介サイトを制作した。
• 観光サイトの制作には、HTML、CSS、JavaScript
を使用した。
• 360度写真を使用することで、多方向見渡せ、観光
地の大まかなイメージをもってもらいたい。
• 発表者のバックカントリーやツアーガイド補助で
の体験を盛り込むことで、八甲田山の周辺の7つの
スポットの魅力を引き出すことを目指した。
萱野茶屋、雪中行軍記念像、八甲田ロープウェー、
城ヶ倉大橋、地獄沼、睡蓮沼、赤倉岳湧水

テーマ１ Webの作成はHTMLとCSS
• Webサイトの作成は、HTMLと呼ばれる言語を使う。
• サイトで表示される文字や画像、背景などのレイアウト
を自由に設定するためには、CSSと呼ばれる言語が利用
される。
HTML内のアンカーリンクにCSSを適用させた結果
HTML内にアンカーリンクを適用した結果
↓

テーマ1 動きを付けるJavaScript
• ブラウザに動きをつけるためにJavaScript言語を使う。
HTMLやCSSなどと組み合わせることで、ブラウザ上
でアニメーションなどの表示ができる。
元の360度写真 360度で見てみよう

テーマ1 八甲田周辺の7スポットを紹介
http://aomoriu-5408.sakura.ne.jp/kk/sotuken/main.html
こちらへアクセス‼

テーマ2 弘前城の四季のアニメーション
2022年度卒業研究 林 千夏
• 青森の観光名所の一つである弘前城の四季の移
り変わりをテーマにアニメーションを制作した。
• 既存のソフト等は使用せず、自分で思うような
動きを付けるために、JavaScriptで図形描画が
容易にできるp5.jsを使用した。
• 弘前城のシルエットを背景に、春に桜が舞って、
夏には花火が上がり、秋にはもみじが落ちて、
冬は雪が降る、四季を表現した。

テーマ2 p5.jsでアニメーション
をプログラミング
• p5.jsは、手軽に
Web上でビジュア
ルメディアの作成
が行え、図形を描
画する機能、マウ
ス・キーボードを
使ったインタラク
ティブなプログラ
ムの作成ができる
参考にしたサイト
ダニエル・シフマン, The Coding Train: Snowfall,
https://thecodingtrain.com/tracks/snowflakes/88-snowfall
魚谷知司, Processing Fan: Fire Flower,
https://processing-fan.firebaseapp.com/galary/fire-flower/index.html

テーマ2
弘前城の
四季をアニ
メーション

テーマ2 ふわふわ感を付けた雪
弘前城の四季
• http://aomoriu-5408.sakura.ne.jp/hayashi/season/index.html
ふわふわ感の雪
• http://aomoriu-5408.sakura.ne.jp/hayashi/snow/index.html
ふわふわ感
の雪
弘前城の
四季
※ スマートフォンやブラウザ環境によっては動きが遅い場合があります
こちらへ‼

アンケートをお願いします