LogoMark.png

猪本結衣/卒業研究I のバックアップソース(No.17)

#author("2021-06-11T17:27:11+09:00","default:member","member")
*Peep
Java Scriptによるアニメーションの実装 

// ここに Main Visual
~
#image(猪本結衣/情報デザイン研究II/mainV.png,left,100%)
~
~
~
~
~
-''[[猪本 結衣>猪本結衣]]''
-'''Keywords:Web Design, Java Script, Animation'''
-http://takearest.php.xdomain.jp/peep/
~


**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
のんびり眺めるサイト
*Peep…覗き見る
~
現状できること・見れるもの

-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--リロード(男の子の動作の再定義・部屋の照明を除き電源OFF)
--ヘルプ(このサイトについて)
--拡大/縮小
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
--カーソルの変化(クリックできる箇所にホバーでカーソルが拡大・色の変化)
--サイトにアクセス時、画像よりもウィンドウ幅が小さいと自動で中央にスクロール
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
//絵を描くのが好きでアニメーションを作る技術も多少あるので、何か活用できないかと考えた。「ただ眺めるだけのサイト」はあまり見ない気がしたので作成してみたいと思いこのプロジェクトに決定。訪れた方の暇つぶしになるサイトを作ることが目的。

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

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

~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
-ぼーっと眺めるサイト
少しでも誰かの癒しになればと作成。
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
-[[Peep(http://takearest.php.xdomain.jp/peep/)>http://takearest.php.xdomain.jp/peep/]]
~

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Atom
-CLIP STUDIO PAINT
~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
2020.9.16 〜
~

***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~


**Survey

***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
-昨今、短時間に受け取る情報量が多い。(TwitterやTikTok、TV等)

~
参考
-[[総務省|令和2年版 情報通信白書|主なメディアの利用時間と行為者率>https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r02/html/nd252510.html]]
-「ドヤ顔で語れるちょっとした小ネタ」として、現代日本人が1日に触れる情報量が「平安時代の一生分」であり「江戸時代の1年分」であることを紹介した。([[「よい」とされてきたことに疑問を持とう――澤円氏が語った、変化の激しい世界で生き抜くために必要なマインドセットとは? (1/2):EdTechZine(エドテックジン)>https://edtechzine.jp/article/detail/2751]]より引用)
-[[現代人が1日に触れる情報量は、平安時代の一生分、江戸時代の1年分 - けいのブログ>https://icchiku1783.hatenablog.com/entry/2017/07/03/013427]]に『スマホ脳』という書籍に「毎日2.5京バイトのデータが生まれてる」という記述がある、と述べられている。
九産大の図書館が同書籍と思しき資料を所蔵しているので、要確認。
-選択可能情報量をメディアグループ別にみると電気通信系の伸びが大きく、平成 18 年 度には平成 8 年度の 543 倍となっている。([[平成 18 年度情報流通センサス 報 告 書 - 総務省>https://www.soumu.go.jp/johotsusintokei/linkdata/ic_sensasu_h18.pdf]]p35より引用)
※選択可能情報量とは、各メディアの情報受信点において、1年間に情報消費者が選択可能なかたちで提供された情報の総量を計測したものである。([[(3)選択可能情報量>https://www.soumu.go.jp/main_sosiki/joho_tsusin/policyreports/japanese/papers/h12/html/C2A13000.html]]より引用)
受け取る情報ではなく受け取ることができる情報の量なので本来欲しい資料とは違うものの参考までに掲載。
-同資料のp113にて消費情報量は平成8年〜18年では横ばいとの記載あり。
-https://www.jst.go.jp/lcs/pdf/fy2020-pp-09.pdf(メモ。あとできちんと書く。)

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

***Precedent
//&color(red){先行事例の紹介、傾向分析など};
*コンセプト
眺める、癒される等が目的のサイトでかつアニメーションのものを探したものの、あまり見受けられなかった。以下近しいサイト。
-[[ぼーっと沖縄>http://boot-okinawa.com]]
-[[WindowSwap>https://window-swap.com]]
~

*デザイン
アイソメトリックのサイト・インタラクティブなサイトはそれぞれ存在するものの、両方の要素を持つサイトは見受けられなかった。
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリックなイラストを使用したサイト5選 | 株式会社LIG>https://liginc.co.jp/444279]]
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/experience/]]
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>https://www.borraginol.com/town/japan]]
--[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp/animation/]]
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse.com/]]
~

*レイアウト
作りたいサイトに似た雰囲気のサイトを収集。手書き感のある雰囲気のもの。
-[[クイックオバケさん(Twitter)>https://twitter.com/QuickObake/status/1310174687876456451?s=20]]
-[[魔法部|フェリシモ>https://web.archive.org/web/20210120234639/https://www.felissimo.co.jp/mahoubu/]](年度が変わったためかデザインが更新されたためアーカイブを掲載。プログラムが多少壊れている)
~

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

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
//以前はJavaScriptで作成していたが、諸事情でjQueryの方が詳しくなってしまったため組み直すか考え中。面倒いなどうするよ??
必要な技法
-JavaScript
-jQuery?
-イラスト・アニメーション
~

参考にしたサイト・文献(昨年の作業分を除く)
-[[マウスポインターをCSSでカスタマイズして任意の画像に変化させる方法 | TECHNICAL CREATOR>https://technical-creator.com/cursor-img/]]
-[[マウスカーソルの形状を変える:スタイルシート(CSS)一覧 - HTMLタグボード>https://www.dspt.net/stylesheet_css/009/003.html]]
-[[jquery - DIVの中央に水平スクロールバーを配置する方法 - ITツールウェブ>https://cloud6.net/so/jquery/1175151]]
[[【CSS3】Transform(変形)関連のまとめ - Qiita>https://qiita.com/7968/items/eddfeb4b424d7c2d2d34]]
~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[スケジュール>https://docs.google.com/spreadsheets/d/1ocb2doQljyJi03mQ7eW-lf6-DyiaHFMkWY04GCYhogo/edit?usp=sharing]](作成中)
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-最終的な完成図の作成
-スケジュールの完成
~
~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

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

**2021.6.8
***女の子のキャラデザ
女の子のキャラクターデザインをしました。
部屋の切り替えはリンクの移動を予定。
~
#image(girl_chara.png,left,40%)
~
~
~
~
~
~


**2021.6.4
***女の子の部屋の作成
女の子の部屋を作成することにしました。
それに併せて部屋を作成。キャラクターは未作成。
#image(girl.png,left,40%)
~
~
~
~
~
~

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

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

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

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


**2021.5.7
***面談
背景の方向性を相談
ターゲットをアニメや漫画を好きな女性に絞ることを検討。
~
***バグの修正
先日見つけたテレビとパソコンの明るさのバグを修正。
~
***レスポンシブの改善
画像サイズをpxで管理していたためモニターが大きい時に小さく表示されてしまっていたので、vhで管理する事でどのサイズにも対応できるようにした。
~
~

**2021.5.6
***サイトの更新
背景やコンセプト等を掲載していなかったため、ひとまず昨年の分([[情報デザイン研究II>猪本結衣/情報デザイン研究II]])を転用した。
未だに背景の部分が曖昧になっているため思案が必要。
~
***スケジュールの作成
ひとまず1ヶ月単位で作成しようとしたものの着地点が定まっていないため前半部分しか作成できていない。
最終的にどんなものを作るのか、どこまで作るのかを仮にでもいいので作成しなければいけない。
~
~

**2021.5.5
***レスポンシブデザインの修正
タイトル・時計・リロード/ヘルプボタンがスマホだと画面外に入ってしまっていたため、positionをfixedにし常に画面内に収まるようにした。
~
***プログラムの修正
去年レスポンシブで変わる画像のサイズや位置を全てpx単位で作っていたらしく、それらを全て%に修正。
それにより現れたバグ(歩くモーションの位置のずれ等)を併せて修正。
~
***バグの発見
-夜寝ているモーションの時に電気をつけ、テレビ/パソコンのON/OFFを切り替えた時にバグが発生。
明日辺りに修正する予定。
~
~

**2021.5.4
***ヘルプ画面の実装
先日作成したデザインをサイトに実装した。
~
***カーソルの変更
上記に併せてカーソルを変更。クリックできる箇所にホバーするとカーソルが変化するように。
パソコンでしかカーソルが表示させられないため、
スマホ用にデザインを作成しなければならない。
-[[マウスポインターをCSSでカスタマイズして任意の画像に変化させる方法 | TECHNICAL CREATOR>https://technical-creator.com/cursor-img/]]
-[[マウスカーソルの形状を変える:スタイルシート(CSS)一覧 - HTMLタグボード>https://www.dspt.net/stylesheet_css/009/003.html]]
~
***レスポンシブの作成
スマホでサイトを開くと縮小された状態で表示されていたため、等倍で表示されるように。
部屋の左上の方しか表示されないので、サイトを開いたタイミングに画面の中央に自動でスクロールするようにした。
-[[jquery - DIVの中央に水平スクロールバーを配置する方法 - ITツールウェブ>https://cloud6.net/so/jquery/1175151]]

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

**2021.4.29
***ヘルプ画面のデザイン作成
昨年に受講した[[情報デザイン研究II>猪本結衣/情報デザイン研究II]]にてヘルプ画面作成の予定を立てていたためデザインを作成。
~
#image(help_rough.png,left,40%)

~
~
~
~
~
~

**2021.4.21
***模様替え機能の検討
大きく家具の位置を移動させることは厳しいものの、色を変えるだけであれば可能なため検討した。
~
#image(color1.png,left,40%)
#image(color2.png,left,40%)

~
~
~
~
~
~

**2021.4.15
***参考サイト探し
アイソメトリックのサイト・インタラクティブなサイトはそれぞれ存在するものの、両方の要素を持つサイトは見受けられなかった。
~
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリックなイラストを使用したサイト5選 | 株式会社LIG>https://liginc.co.jp/444279]]
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/experience/]]
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>https://www.borraginol.com/town/japan]]
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse.com/]]
~

強いて言えばこのサイトが両方の要素を持ってるかもしれない。
[[Gegenbauer – transparent, einfach, digital>https://change.gegenbauer.de/]]
~
***卒業研究でしたいことの書き出し
#image(rough0415.png,left,50%)

~
~
~
~
~
~
~
~

**2020.9.22〜2020.11.25
[[昨年度の情報デザイン研究IIにて作成▷▷▷>猪本結衣/情報デザイン研究II]]
~
~