LogoMark.png

猪本結衣/卒業研究I

Peep

JavaScriptを使用した誰かの癒しになるサイトの作成


mainV.png










Overview

Introduction / What is This

のんびり眺めるサイト
*Peep…覗き見る


現状できること・見れるもの

Background and Purpose

ネットやテレビと短時間に多くの情報を浴びる機会の多い現代。
確かにたくさんの情報を受け取ることも大事だが、そればかりだと疲れてしまう。
何も情報を受け取らない、ぼーっとする時間も大切だと考えた。

ターゲットは、ネットやテレビを扱う機会が多いであろうアニメや漫画・ゲーム等が好きな人たち。
イラストやアニメーションを用いることでそういった人たちに親しみやすいサイトを目指す。


Concept

Output

Tools

Term

2020.9.16 〜

Plan

Conclusion / Summary




Survey

Present Status



参考

調べていく上で、「現代で1日に受け取る情報量は江戸時代の1年分・平安時代の一生分」といった記述を多く目にした。しかしそのほとんどが「〜という説がある」に留まり、ソースはどこにも見受けられない。一体何を根拠にその説を掲げているのか。

Precedent

*コンセプト
眺める、癒される等が目的のサイトでかつアニメーションのものを探したものの、あまり見受けられなかった。以下近しいサイト。

*デザイン
アイソメトリックのサイト・インタラクティブなサイトはそれぞれ存在するものの、両方の要素を持つサイトは見受けられなかった。

*レイアウト
作りたいサイトに似た雰囲気のサイトを収集。手書き感のある雰囲気のもの。

*その他
Gegenbauer – transparent, einfach, digital
(インタラクティブで、かつサイトの雰囲気が作成したいものと似ていた。手描き感。)



Technique / Technology

必要な技法

参考にしたサイト・文献(昨年の作業分を除く)

Project Management

Schedule

スケジュール(作成中)

ToDo


worklog




2021.7.1

女の子バージョンの部屋の作画

前回のものに加え、テレビ、テレビ台、ゴミ箱のデザインを変更。
他にも小物を加えたいがこれ以上作画しなくても一応はいいかな?というラインまで描けたためひとまず打ち止め。(1枚目,左)
併せて、実際にサイトに入れるとどうなるか確認するため先程の画像と、先日キャラデザをした際のものを組み合わせた画像を作成。(2枚目,右)

girl2.png
girl_demo.png












調査

背景の「情報を多く浴び続ける」が一体どれくらいなのか、テレビ・YouTube・Twitterに絞って調査。

2021.6.24

女の子バージョンの部屋の作画

机と座椅子のデザインを変更。
他の部分も変更したいため、完成次第画像をアップロードする。



2021.6.15

取得した天気の反映

先日作成した試作品を改変。
取得した天気に合わせた絵文字がページ下部に表示されるようになった。
晴れ 所により〜のように天気の名詞だけでないことがままあるので、最初の名詞だけを切り出し変数に落とし込んだ。(先日考案したもので作成することができた。)
これを応用すればPeepのサイト上の天気を変えることができるはず。

ヘルプ画面のバグ修正

ヘルプ画面がレスポンシブやズームイン/ズームアウトをした際に表示が崩れてしまうバグがあったため修正。



2021.6.11

天気の取得

試作品気象庁の天気予報JSONファイルをWebAPI的に利用したサンプルアプリ | サンプルアプリ集 | あんこエデュケーションのプログラムを引用)
昨日見つけたサイトのプログラムを引用し天気を取得することに成功。
都道府県コードを書き換えることにより場所を指定することができるようだ。

「今日の天気」の部分に入っている文字列から全て、もしくは空白手前までの文字を取得すれば多分プログラムに落とし込めるはず。

現在地の取得

試作品javascript で訪問者のアクセス地域(国、都道府県、市区町村、緯度、経度)を取得する: Nothing much better to doよりプログラムを引用)
昨日見つけたサイトのプログラムを引用したところ上手く動作しなかった。
どうやらこの方法はブラウザ次第ではきちんと動作しないらしく、私が現時点で試せる方法は全て動作しなかった。

ここまで失敗が重なるとプログラムが機能していないという可能性が浮上する。
phpを用いて取得することができるかもしれないと昨日面談にて伺ったため、そちらも後日調べてみることにする。

参考にしたサイト



そもそもアクセスした場所でなく特定の地域(例えば九産大の近く)に定めてしまっても構わないわけではある。
世界観を先に決めてしまってから現在地取得を勉強した方が時間を無駄にせずに済むかもしれない。なんとなく負けた気持ちにはなるけど。




2021.6.10

面談

サイトの背景(空)の天気が変わると楽しいのでは?との意見をいただいた。
併せて、指定の地域の天気を取得するプログラムと現在地を取得するプログラムを紹介しているサイトを探した。
後日試運転用のサイトを立ち上げて見たいと思う。
気象庁の天気予報JSONファイルをWebAPI的に利用したサンプルアプリ | サンプルアプリ集 | あんこエデュケーション
javascript で訪問者のアクセス地域(国、都道府県、市区町村、緯度、経度)を取得する: Nothing much better to do



2021.6.8

女の子のキャラデザ

女の子のキャラクターデザインをしました。
部屋の切り替えはリンクの移動を予定。

girl_chara.png












2021.6.4

女の子の部屋の作成

女の子の部屋を作成することにしました。
それに併せて部屋を作成。キャラクターは未作成。

girl.png












2021.5.30

動画の埋め込み

サイトに何回も訪れてもらえるように、テレビで動画がランダムで再生されるプログラムを作成。
全ての動画を一回のアクセスで見終わらないように、あえて動画は固定されるようにした。
上記はサイトの軽量化も兼ねている。
【CSS3】Transform(変形)関連のまとめ - Qiita
【YouTube入門】動画の埋め込みコードをカスタマイズする方法。自動再生や開始位置を自由に設定できる! | できるネット



2021.5.20

サイトの更新

背景・コンセプトを主に、サイトの埋めていない項目を埋めたりデザイン研究から変わった点の修正を行なったりした。



2021.5.19

プロジェクトの背景・コンセプト

先日の面談時に背景やコンセプト等を簡単に考えていたため、それらをまとめた。



2021.5.8

ズームイン/ズームアウト機能の作成

スマホのピンチアウトをできないようにしていたため、ズームイン/ズームアウトをできるようにした。
画像の全体がすでに見えるようになっている状態でもズームアウトできてしまうため、修正予定。



2021.5.7

面談

背景の方向性を相談
ターゲットをアニメや漫画を好きな女性に絞ることを検討。

バグの修正

先日見つけたテレビとパソコンの明るさのバグを修正。

レスポンシブの改善

画像サイズをpxで管理していたためモニターが大きい時に小さく表示されてしまっていたので、vhで管理する事でどのサイズにも対応できるようにした。



2021.5.6

サイトの更新

背景やコンセプト等を掲載していなかったため、ひとまず昨年の分(情報デザイン研究II)を転用した。
未だに背景の部分が曖昧になっているため思案が必要。

スケジュールの作成

ひとまず1ヶ月単位で作成しようとしたものの着地点が定まっていないため前半部分しか作成できていない。
最終的にどんなものを作るのか、どこまで作るのかを仮にでもいいので作成しなければいけない。



2021.5.5

レスポンシブデザインの修正

タイトル・時計・リロード/ヘルプボタンがスマホだと画面外に入ってしまっていたため、positionをfixedにし常に画面内に収まるようにした。

プログラムの修正

去年レスポンシブで変わる画像のサイズや位置を全てpx単位で作っていたらしく、それらを全て%に修正。
それにより現れたバグ(歩くモーションの位置のずれ等)を併せて修正。

バグの発見

2021.5.4

ヘルプ画面の実装

先日作成したデザインをサイトに実装した。

カーソルの変更

上記に併せてカーソルを変更。クリックできる箇所にホバーするとカーソルが変化するように。
パソコンでしかカーソルが表示させられないため、
スマホ用にデザインを作成しなければならない。

レスポンシブの作成

スマホでサイトを開くと縮小された状態で表示されていたため、等倍で表示されるように。
部屋の左上の方しか表示されないので、サイトを開いたタイミングに画面の中央に自動でスクロールするようにした。

(参考にしたサイトを貼り付けたほうが後から便利なことに気づいたので極力貼りたい)



2021.4.29

ヘルプ画面のデザイン作成

昨年に受講した情報デザイン研究IIにてヘルプ画面作成の予定を立てていたためデザインを作成。

help_rough.png












2021.4.21

模様替え機能の検討

大きく家具の位置を移動させることは厳しいものの、色を変えるだけであれば可能なため検討した。

color1.png
color2.png












2021.4.15

参考サイト探し

アイソメトリックのサイト・インタラクティブなサイトはそれぞれ存在するものの、両方の要素を持つサイトは見受けられなかった。

強いて言えばこのサイトが両方の要素を持ってるかもしれない。
Gegenbauer – transparent, einfach, digital

卒業研究でしたいことの書き出し

rough0415.png
















2020.9.22〜2020.11.25

昨年度の情報デザイン研究IIにて作成▷▷▷



PAGES

GUIDE

添付ファイル: filegirl_demo.png 113件 [詳細] filegirl2.png 115件 [詳細] filegirl_chara.png 127件 [詳細] filegirl.png 119件 [詳細] filehelp_rough.png 149件 [詳細] filecolor1.png 160件 [詳細] filecolor2.png 163件 [詳細] filerough0415.png 172件 [詳細]
Last-modified: 2021-07-02 (金) 13:42:36