猪本結衣/卒業研究II
をテンプレートにして作成
HOME
ABOUT
最新の更新
2021
MEMBER 2021
青木暁光
石坂大翔
出光美心
岩崎貴生
岩下雄真
内尾颯太
江川珠貴
大中啓旦
亀田日向
川村洸太
木村円香
久保絢菜
倉員優実
桑原歩未
鴻上早紀
崔昊
佐光美憂
柴田一輝
竹谷匠冬
田籠祐貴
田代爽乃
内藤彩乃
西山実伶
濱有希子
濱田侑里
藤本唯人
松岡佑樹
松藤陽
村山陽菜
山田宗周
渡邊来美
渡辺侑貴
中西華子
原田朋奈
水田修太朗
宮副咲葉
猪須大翔
川面翔太
隈翔太
柴田葉月
角祐菜
豊岡壮大朗
吉井麻吏菜
2022
MEMBER 2022
棈松智也
梅木悠民
江頭奏
大井このか
大石颯
太田糸音
太田姫奈
越智楓
鎌田真幸
楠田佑月
興梠媛愛
後藤太成
坂井彩華
指方依緒
徐泰陽
杉野市之助
堤晴司
角田雄一
中井千尋
原朋恵
平嶋明日花
増田里奈
深町彩海
藤島早希
宮路咲希
梁井英翔
山口愛麗
山本彩花
松田葉奈
松本龍太郎
熊谷涼花
近藤ひかる
善結穂
待永萌衣
三浦遥
石松匡広
上田莉帆
宇田川春稀
宇美希美
佐野美和
竹之内咲希
土斐崎種定
野村優亜
福田千紗
山川彩香
山田侑加子
重松優花
甲斐陸斗
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
池邉成
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
山口恵
早稲田加奈恵
渡邊優希
十時明日香
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
中川飛鳥
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
蒲田花菜
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
佐藤美月
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
茂山和寛
髙嶋莉彩
橘彩以
田中さゆり
田村宥奈
徳永歩乃佳
轟はなの
庭瀬美来
橋本音花
若狭映那
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン概論
ソーシャルデザイン演習
情報デザイン演習IIA
情報デザイン演習IIB
地域ブランド企画演習IIA
地域ブランド企画演習IIB
視覚デザイン演習
Webデザイン演習
3DCG演習
情報デザイン研究I
地域ブランド企画研究I
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
//***アンケートを実施中
//Peepがどれだけコンセプト通りに作成できているか等の調査...
//ご協力のほどよろしくお願いします。
//[[アンケート回答用のリンク>https://forms.gle/dmBSxXEwjZ...
//~
//※ブラウザによってはGoogleにログインした状態だとメールア...
//~
//#hr
//~
//~
*Peep
JavaScriptを使用した誰かの癒しになるサイトの作成
// ここに Main Visual
~
#image(猪本結衣/情報デザイン研究II/mainV.png,left,100%)
~
~
~
~
~
-''[[猪本 結衣>猪本結衣]]''
-'''Keywords:Web Design, Java Script, Animation'''
-https://takearest1.github.io/peep/
~
**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
のんびり眺めるサイト
*Peep…覗き見る
~
現状できること・見れるもの
-男の子・女の子(以下各6種をランダムで表示)
--部屋を歩き回る(一定時間毎。それぞれの動作のつなぎの動...
--パソコンをする
--雑誌を読む
--スマホをする
--寝る(夜0時〜6時は固定で就寝)
--ゲームをする(男の子のみ)/手芸する(女の子のみ)
~
-クリック処理
--ドアをクリックすることで男の子と女の子の部屋を行き来
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--クローゼットの開閉
--窓の開閉
--リロード(キャラクターの動作の再定義・照明やテレビ等の...
--ヘルプ(このサイトについて)
--拡大/縮小
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
--カーソルの変化(クリックできる箇所にホバーでカーソルが...
--サイトにアクセス時、画像よりもウィンドウ幅が小さいと自...
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};
//絵を描くのが好きでアニメーションを作る技術も多少あるの...
ネットやテレビと短時間に多くの情報を浴びる機会の多い現代。
確かにたくさんの情報を受け取ることも大事だが、そればかり...
「焚き火を眺めるだけ」のような動画が流行ったことから何も...
ターゲットは、特にネットやテレビを扱う機会が多いであろう...
//アニメや漫画・ゲーム等が好きな人たち。
イラストやアニメーションを用いることでそういった人たちに...
~
***Concept
//&color(red){基本的な考え方、枠組み、視点など};
大量の情報を浴び続ける現代の人たちにゆとりを提供できるよ...
ターゲットは情報を特に多く受ける機会の多い若い人たち。
そういった方々に受け入れてもらいやすいイラストやアニメー...
~
***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視...
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本...
-[[Peep(https://takearest1.github.io/peep/)>https://takea...
~
***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Atom
-FileZilla
-CLIP STUDIO PAINT
-Photoshop
-[[GIFアニメ作成・編集『GIFアニメスタジオ』:作成フォーム>h...
-[[GIF作成 - GIF画像(GIFアニメ)を無料で作成できるサイト!...
~
***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX...
2020.9.16 〜
~
~
~
***Conclusion / Summary
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**Survey
***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
-昨今、短時間に受け取る情報量が多い。(TwitterやTikTok、T...
~
参考
-[[総務省|令和2年版 情報通信白書|主なメディアの利用時間...
-「ドヤ顔で語れるちょっとした小ネタ」として、現代日本人が...
-[[現代人が1日に触れる情報量は、平安時代の一生分、江戸時...
九産大の図書館が同書籍と思しき資料を所蔵しているので、要...
-選択可能情報量をメディアグループ別にみると電気通信系の伸...
※選択可能情報量とは、各メディアの情報受信点において、1年...
受け取る情報ではなく受け取ることができる情報の量なので本...
-同資料のp113にて消費情報量は平成8年〜18年では横ばいとの...
-https://www.jst.go.jp/lcs/pdf/fy2020-pp-09.pdf(メモ。あ...
-ツイッターに絞って調べたところ有用な資料を発見。サイトに...
-[[【2021年2月更新!】データからみるTwitterユーザー実態ま...
-試しに自分で1分間に通過したツイート数を数えたところ35ツ...
調べていく上で、「現代で1日に受け取る情報量は江戸時代の1...
~
***Precedent
//&color(red){先行事例の紹介、傾向分析など};
*コンセプト
眺める、癒される等が目的のサイトでかつアニメーションのも...
-[[ぼーっと沖縄>http://boot-okinawa.com]]
-[[WindowSwap>https://window-swap.com]]
~
*デザイン
アイソメトリックのサイト・インタラクティブなサイトはそれ...
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリック...
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/exp...
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>ht...
--[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp...
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse....
~
*レイアウト
作りたいサイトに似た雰囲気のサイトを収集。手書き感のある...
-[[クイックオバケさん(Twitter)>https://twitter.com/Quic...
-[[魔法部|フェリシモ>https://web.archive.org/web/2021012...
~
*その他
[[Gegenbauer – transparent, einfach, digital>https://chan...
(インタラクティブで、かつサイトの雰囲気が作成したいもの...
~
~
***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
//以前はJavaScriptで作成していたが、諸事情でjQueryの方が...
必要な技法
-JavaScript
-jQuery?
-イラスト・アニメーション
~
参考にしたサイト・文献(昨年の作業分を除く)
-[[マウスポインターをCSSでカスタマイズして任意の画像に変...
-[[マウスカーソルの形状を変える:スタイルシート(CSS)一...
-[[jquery - DIVの中央に水平スクロールバーを配置する方法 -...
[[【CSS3】Transform(変形)関連のまとめ - Qiita>https://q...
~
~
**Project Management
***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成して...
[[スケジュール>https://docs.google.com/spreadsheets/d/1oc...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-猫の部屋
~
-歩く(計2個)
--手前に
--奥に
-キャットタワー(計3個)
--で外見てる
--に上る
--から降りる
-ベッド(計3個)
--で寝てる
--に入る
--から出る
-ねこじゃらし(計3個)
--で遊んでる
--に近づく
--から離れる
-開閉(計3個)
--クローゼットを
--カーテンを
--ドアを
→合計14個(+部屋のPNG)
~
~
-犬の部屋※※
-キャラクターにいたずら※※
(※はあわよくばしたい、くらいのもの)
(※※は重労働だからしたくないけどできたら楽しいもの)
~
#hr
-%%男の子の色を付ける。%%
-%%現時点では左下のリロードボタン、もしくはサイトのリロー...
-%%女の子を追加%%
--%%男の子のモーションとほとんど同じにする予定だが、一部...
%%(ゲームをしてるモーション→化粧するモーション など。何...
--%%リロードボタンが消えるので、男の子に切り替えるボタン...
(自分で動作の切り替えはできるままにした方がいいと判断し...
--%%軽量化したいため、画像を切り替えるのではなくリンクを...
-%%天気の実装※%%
--%%晴れ・雨・くもり以外の天気が出てきた時、ひとまず晴れ...
-%%height極限まで縮めた時に起こるバグの修正%%
-%%窓の開閉で部屋の明るさ変えたい※%%
-%%前のサーバーのPeepから今のサーバーのPeepに飛ぶプログラ...
-%%デモ版の作成%%
-%%月齢%%
-%%リモコンでチャンネル切り替え%%
-%%女の子の部屋の左右反転%%
//-スケジュールの完成
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2021.12.16
***猫の模様決め
部屋の家具等の色と合わせ、紛れ込まないサバシロにすること...
~
***歩く猫
歩いている猫のアニメーションを作画するにあたって資料を収...
野良猫が歩いている動画が骨格がわかりやすくて参考になる。
[[Cat walk ネコ,歩く。(YouTube)>https://www.youtube.co...
~
**2021.12.15
***説明パネルの準備
先日作成した説明パネルに画像を挿入した。
サイトのスクリーンショットを入れたいが家のパソコンの画面...
~
**2021.12.13
***説明パネルの準備
説明パネルに文章を入れた。画像は後日挿入する。
~
**2021.12.10
***猫部屋の準備
猫の部屋に設置する家具をそれぞれpngで書き出し、サイトの方...
cssで家具の位置を調整済み。
男の子のプログラムを複製し利用しているため、マウスや本が...
まだ家具を置いたのみで猫はいないのでアップロードはしてい...
~
**2021.12.9
***猫の練習3
#image(study2.png,right,20%);
昨日に引き続き写真を模写した。
併せてラフの猫をきちんと描きなおし、原画とする。
猫は個人的に黒猫が好きなのだが、あまりよく思わない人も一...
[[高画質版>https://drive.google.com/file/d/1xrF4y45PKLcDE...
~
**2021.12.8
#image(study1.png,right,20%);
***猫の練習2
猫の骨格を検索し、出てきた物を模写する形で練習を行った。
[[高画質版>https://drive.google.com/file/d/1rr-z6-zWjzF7M...
~
***メモ
おそらく海外のサイトだが、猫を描くのにかなり便利そうなサ...
頭蓋骨の3DCGを好きな向きに回し、動物を指定して検索をかけ...
[[Animal Photo Art References Search>https://x6ud.github....
~
**2021.12.6
***猫の練習
先日ラフを作成した際に猫の理解が全体的に薄いことを実感し...
キャンバスがまだ埋まっていないため後日まとめてアップロー...
~
**2021.12.5
#image(catdemo.png,right,30%);
***猫の背景の作画
背景のラフの線画をし、ラフをそのまま塗り込む形で作画。
実際にサイトに差し込んで確認したところ大きな違和感はない...
~
**2021.12.3
***ヘルプ画面の修正
ヘルプ画面に再生中のYouTubeの詳細(タイトル・URL)と天気...
それに併せてサイトの下部に表示されていたYouTubeの詳細を撤...
~
**2021.12.2
***バグの修正
先日の面談中に見つけたバグを修正。
背景の家のシルエットの色がおかしくなるバグがなくなった。
あわせてGitHubを最新版に更新した。
~
女の子の部屋を反転した際にテレビに映るYouTubeもまるごとひ...
~
***作成するGIFのリスト化
猫の部屋を作成するにあたって作成しないといけないGIFをリス...
-歩く(計2個)
--手前に
--奥に
-キャットタワー(計3個)
--で外見てる
--に上る
--から降りる
-ベッド(計3個)
--で寝てる
--に入る
--から出る
-ねこじゃらし(計3個)
--で遊んでる
--に近づく
--から離れる
-開閉(計3個)
--クローゼットを
--カーテンを
--ドアを
→合計14個(+部屋のPNG)
~
***プレゼンの準備
プレゼンを一通り通して、引っ掛かる部分の原稿の準備や入れ...
ちょうど5分くらいに収まったので緊張しなければ大丈夫。多...
~
***明日の面談に関することのメモ
-女の子の部屋を反転した
-猫の部屋を作ることにした。GIFだけでいいから多分一ヶ月、...
-デモ用のボタンをどうするか相談したい
--デモのボタンとユーチューブのリンクと今日の天気を一画面...
~
**2021.12.1
***概要の修正
誤字を発見したので修正。ドライブの概要を更新した。
~
***プレゼンの準備
概要に書かれている順番に合わせて原稿の修正。まだ時間の調...
メモ:猫の部屋作ることも発表したいから画像を準備する。そ...
あとブラッシュアップについてもう少しまとめる。今日の福岡...
~
**2021.11.30
***アクティビティモニタの使用
先日の面談で教えていただいたアクティビティモニタを使用し...
結果、使用メモリが上昇し続けるといった不具合は見受けられ...
~
***猫部屋の検討
猫を飼っている友人に意見を貰いつつアイテムの追加・移動を...
モーションと直接紐づける予定はないが、背景を本描きすると...
モーションはひとまず画像にある「キャットタワーから外を眺...
この3つが完成し余裕があった場合は追加で作成したい。
~
#image(cat2.png,left,30%);
~
~
~
~
~
**2021.11.29
***猫部屋の検討
色味はひとまず保留で何のオブジェクトの位置に重きを置き検...
ただ今から猫の部屋を作るとなると相当時間がかかるため、本...
ちなみに猫なのは犬よりも若者人気があるため。
~
#image(cat.png,left,30%);
~
~
~
~
~
**2021.11.28
***部屋の左右反転
男の子の部屋と繋がってる感を演出するために女の子の部屋を...
反転させたい部屋の家具や背景、キャラクター等の要素を新規...
部屋が線対象でないため、タイトルやリロードボタン等の位置...
男の子の部屋と女の子の部屋で同じ位置に来るよう、かつ両方...
~
#image(reflect.png,left,40%);
#image(reflect2.png,left,40%);
~
~
~
~
~
**2021.11.24
***リロードボタンの機能の調整
デモ画面で時間や天気をいじった後元に戻すことができなかっ...
併せて、クローゼットとカーテンの開閉もリセットされるよう...
~
***プログラムの合併
ベースのページとデモのページでプログラムを分けていたのを...
ベースのプログラムにデモ用の変数を用意することで、それぞ...
~
**2021.11.19
***バグの修正
昨日のメモに沿って修正。
メモの方法でsetIntervalをリセットすることができた。
しかしいまだsetTimeoutが修正できていない。
以下昨日のメモ以外の試してみたこと。
~
元のプログラム▼
/*一定時間毎の処理*/
変数名1=setTimeout{
関数1();
変数名2=setTimeout{
関数2();
…
,1000};
,1000};
/*クリックした時の処理*/
clearTimeout(変数名1);
clearTimeout(変数名2);
…
書き換えてみたプログラム▼
/*一定時間毎の処理*/
変数名1=setTimeout{
関数1();
,1000};
変数名2=setTimeout{
関数2();
,2000};
/*クリックした時の処理*/
clearTimeout(変数名1);
clearTimeout(変数名2);
…
関係ないと思ったけどclearTimeoutを変数1→変数2の順で止めて...
~
**2021.11.18
***メモ
当サイト更新作業中にバグの修正に使えそうなアイデアが少し...
時間の関係で今日はもう作業できないため明日以降に試してみ...
-リロードでリセットするやつ[[setIntervalタイマーをリセッ...
-リロードと一定時間毎のプログラムが混ざる問題
/*一定時間毎の処理*/
変数名1=setTimeout{
変数名1=setTimeout{
…
};
};
/*クリックした時の処理*/
clearTimeout(変数名1);
みたいになってるのを
変数名1=setTimeout{
変数名2=setTimeout{
…
};
};
clearTimeout(変数名1);
clearTimeout(変数名2);
…
ってしたら直らないかな。わからない。いい加減直って欲しい。
~
**2021.11.17
***バグの修正の修正
昨日の作業分が時間を置いてわからなくなったことと修正が出...
また表記ミス等の細々したバグが少し見つかったため併せて修...
~
**2021.11.16
***バグの修正(未完)
一定時間毎に入る移動のプログラムの実行中にリロードを押す...
しかしsetTimeoutで走らせた動作を途中で停止する方法がわか...
以下試したもの▼
-clearTimeout(参考:[[【JavaScript入門】clearTimeoutとは...
-フラグを切り替えてifで管理
~
***動作不良の確認
昨日触ったリロードのタイミングでsetIntervalをリセットする...
~
**2021.11.15
***リロード後の動作処理
一定時間毎に動作するプログラムがタイミング次第でリロード...
~
~
**2021.11.14
***バグの修正
FireFoxでは確認できなかった表示のバグがSafariで確認された。
デモのページで天気を切り替えた際の雨→晴れで窓の表示がおか...
ついでに一定時間毎にアニメーションが切り替わる一瞬だけ部...
~
**2021.11.8
***アップロード作業
バグの修正やプログラムの統一化に伴い細々とした修正を多数...
~
**2021.11.7
***バグの修正
先日見つけたバグを修正。
併せて男の子と女の子のJavaScriptの中身が同じもの(背景や...
~
**2021.11.5
***バグの発見
ズームアウト/ズームインをし、かつ一定のウィンドウサイズの...
~
**2021.11.4
***月齢の変化
先日調査した月齢を管理するプログラムと、昨日作成した画像...
~
***デモ画面の作成
卒業制作展で使用するデモのたたき台として、天気と時間を変...
フラグの管理が甘い部分が複数箇所確認されたため、後日バグ...
[[Peepのデモ用ページ>https://takearest1.github.io/peep/de...
以下メモ
-sleepスタートで照明のフラグ(s_frag)が立ったり降りたり...
-深夜の睡眠中から時間をいじって起こした時に布団が2枚出た...
~
~
**2021.11.3
***月齢の変化
先日作成した月齢のプログラムに組み込む画像を作成。
大まかに7種類に分けた。
#image(moon.png,left,50%);
~
~
~
~
**2021.11.2
***ジャンプ処理
以前にアップしていたサーバーのPeep(xFree版)から、現在の...
現在は移動した旨とジャンプしますと伝えるのみなので、少し...
参考>[[自動的に他のページにジャンプする>https://www.hash...
~
***リモコンのアップロード
先日作成したリモコンのクリック処理をアップロードした。
~
~
**2021.10.29
***リモコンのクリック処理の作成
リモコンをクリックすることでテレビの画面が切り替わるよう...
全6種の動画+初期に入れていたGIFが順番に周り、最後に画面...
これでサイトごとリロードしないと番組が変わらなかったとこ...
~
***概要の微修正
小さなミスを数カ所修正。
~
~
**2021.10.28
***天気のプログラムの修正
天気のプログラムに使用したjsonに「晴れ・くもり・雨」以外...
~
***月齢についての調査
夜になった際に出てくる月を現実のものとリンクさせたかった...
月齢を扱っていたサイトがあったためプログラムを調べたとこ...
フリーで公開されていたため試作としてプログラムをいくらか...
月齢を扱ったサイト>[[【みんなの知識 ちょっと便利帳】現在...
福原直人さん作成のJS>[[月齢計算(JavaScript)>https://news...
色々実験しながら試作したページ>[[http://takearest.php.xd...
~
~
**2021.10.27
***バグの修正
昨日したバグの修正によってヘルプ画面の背景がズレるという...
~
~
**2021.10.26
#image(bug1.png,right,20%);
***バグの修正
ウィンドウの縦幅を縮めると部屋から家具がはみ出るバグを修...
ついでに画像の最小サイズを設定したため視認できなくなるほ...
~
***バグの修正の確認
昨日見つけた17時になったタイミングで背景の色がおかしくな...
~
~
**2021.10.25
***部屋の明るさの調整
カーテンを開閉した際、部屋の明るさが変化するようにした。
瞬間的に明るさが変化すると少し違和感があったため、明るさ...
参考にしたサイト>[[jQueryで数字をカウントアップしながら...
~
***バグの発見
17時になって背景が夕方になる際、背景の地面の部分がおかし...
昼の地面を#fffで不透明度を低くしていた関係?
修正したため明日また様子を見る予定。
~
~
**2021.10.24
***概要の作成
前期の概要を一部修正する形で概要を作成。
~
~
**2021.10.22
***面談
以下先生にいただいた意見のメモ
-実際の天気や時間とリンクしているものとは別に、自分で天気...
--リンクの移動で実現可能?
-月の形が現実にリンクしてても楽しいかもしれない。
--月齢?調べてみる
-窓の外に猫がたまに遊びにきても楽しい。
--日向ぼっこしてる。しっぽが揺れてる。とか
-ほか概要の件やアンケートの件について
~
~
**2021.10.21
***サーバーの移動
昨日から時間をおいてサイトにアクセスしたものの改善されな...
それどころか以前に作成して当時はきちんと動いていたはずの...
xFreeのサーバーからアップすると広告がついてしまうという問...
GitHubにアカウントを作成。アップロードの方法を調べつつサ...
移動前(xFree)[[http://takearest.php.xdomain.jp/peep/]]
移動先(GitHub)[[https://takearest1.github.io/peep/]]
参考にしたサイト[[自分で作ったWebページをインターネット上...
後日元のページリンクから新規のリンクに飛ぶプログラムを作...
//~
//***概要の作成
~
~
**2021.10.20
***天気の導入
昨日に引き続き天気を導入。
くもりの窓を作画し、背景同様雨が窓を伝うGIFを重ねて雨の画...
~
***概要の作成
前期の概要のファーストビュー等に使用していた画像を最新の...
~
***アンケートの回答確認
-回答に女の子の部屋のテレビがつかないとの報告が入っていた...
-質問の文面の意図がうまく伝わらなかったとのことだったため...
~
***バグ?の確認
-テレビが機能しない
テレビの画面自体は問題なくつくものの、YouTubeがなんらかの...
SafariやスマホのChrome・FireFoxでは開けるためパソコンの方...
きちんと再生できた頃のバックアップを改めて開いたもののう...
-HTMLのデータを直接FireFoxで開く分には問題なく開けるが、x...
明日原因を調査する予定。
~
~
**2021.10.19
***天気の作成
以前に[[試作>http://takearest.php.xdomain.jp/weather/]]し...
利用したjsonにどう言う名前で登録されているのかわからない...
それ以外の天気が出た際にバグってしまうため要修正。
天気の反映に伴いくもり・雨の背景色を、時間ごとに切り替わ...
雨はくもりの背景をベースに雨が降っているGIFを重ねることで...
明日は天気に合わせた窓の作画を予定。
~
**2021.10.17
***アンケートの設置
昨日作成したアンケートを学科サイトのトップに設置。
併せて当ページのトップにも設置した。
~
~
**2021.10.16
***アンケートの修正
先日いただいたアドバイスを元にアンケートを作り込んだ。
時間が遅かったため明日設置予定。
~
~
**2021.10.15
***開閉するプログラムの作成
先日作成したクローゼットとカーテンのGIFをサイトに実装。
クリックすることでGIFが入れ替わり開閉できる。
~
***面談
忘れないうちに頂いたアドバイスや意見をメモしておく。
-アンケートについて
--見出しをつける
--追加して欲しい機能
--思い通りに動かないところの報告
-窓開けて部屋が明るくなったら楽しい
-女の子の部屋を左右反転すると部屋を移動してる感がでるかも...
~
~
**2021.10.14
***カーテンとクローゼットのGIFの作成
#image(closet_b.png,left,20%);
#image(closet_g.png,left,20%);
カーテンとクローゼットをクリックすることで開閉できるよう...
併せてクローゼットの中も新規で描いた。
しかし描きこみすぎて浮いてしまったため色を塗り直す予定。
(もったいないので掲載)
[[カーテン_開く>https://drive.google.com/file/d/15kRfN_zV...
[[クローゼット_開く>https://drive.google.com/file/d/1y9W9...
~
~
**2021.10.13
#image(andasi.png,right,20%);
***アンケートの作成
アンケートに入れる設問を書き出し、整理し削る作業をした。
その後設問を作成した。今度の授業にて先生方にこれでいいか...
~
~
~
~
**2021.10.12
***うろうろするプログラム(女の子.ver)の作成
男の子のプログラムを複製し歩き回るプログラムを作成。
歩き回るプログラムを作成するのに際し他のプログラムも少し...
案の定バグが乱立したためそちらも修正し、ひとまず確認され...
これで男の子と女の子、両方のプログラムが作成し終わった。
~
~
**2021.10.11
***うろうろするプログラムの続き
昨日乱立したバグを修正。
歩き回るプログラムを作成するのに際し他のプログラムも少し...
これで男の子と女の子、両方のプログラムが作成し終わった。
~
***アンケートの作成
コンセプト通りに作成できてるか、ブラッシュアップに向けた...
~
~
**2021.10.11
***うろうろするプログラムの続き
昨日乱立したバグを修正。
歩き回るプログラムを作成するのに際し他のプログラムも少し...
これで男の子と女の子、両方のプログラムが作成し終わった。
~
***アンケートの作成
コンセプト通りに作成できてるか、ブラッシュアップに向けた...
~
~
**2021.10.10
***スイッチを押すGIFの作成
不足していたGIFを作画。
昨日作成していたのは全て男の子の部屋だが、女の子の同GIFも...
[[照明のスイッチON/OFF(男の子)>https://drive.google.com...
[[〃(女の子)>https://drive.google.com/file/d/10R0BsIEbh...
~
***うろうろするプログラムの続き
作成したGIFを追加し、寝る前後に都度照明を点滅するようプロ...
部屋の照明を管理するために作っていたフラグを利用し、すで...
これで男の子の方のプログラムは完成。
~
***うろうろするプログラム(女の子.ver)の作成
男の子のプログラムを複製し歩き回るプログラムを作成。
案の定バグが乱立したので明日修正する予定。
~
~
**2021.10.9
***うろうろするプログラムの作成の続き
引き続きうろうろするプログラムを作成。
ゲームをしに行く、ゲームを終え別の場所に移動するプログラ...
また寝るためにベッドへ行くプログラムを作成しようとしたも...
スイッチを押すアニメーションは作成していなかったため明日...
~
~
**2021.10.8
***先生との面談
主にアンケートの取り方についての相談をし、作成方法を検討。
部屋の中をうろうろするプログラムが未完成なため、完成次第...
~
***ランダムでうろうろするプログラムの作成
男の子のうろうろするプログラムを作成。
全て作成し終わったら女の子の方に複製し、調整することで同...
先日作成していた読書⇔PCのプログラムを応用し、ひとまず他の...
バグが乱立するため時間がかかりそうな予感がしている。
~
~
**2021.10.7
***GIFの作成
ベッドから出る/入るGIFを作成。
以上で全ての立つ/座るGIFが完成したため、サイトに入れ込む...
[[立つ>https://drive.google.com/file/d/1y5oH5tH40TJ-TDLLp...
[[座る>https://drive.google.com/file/d/1OQoVVpc-ju__82ogg...
この記事を書きながら手からスマホを消す作業をしていないこ...
[[立つ(修正版)>https://drive.google.com/file/d/1TRcw8De...
~
***作成したGIFの反映作業
GIFをサイトに入れる際のCSSの部分を全て調整した。
~
***細かいアイテムの追加
女の子の読んでいる本や手芸道具など、アニメーションを自動...
以下追加したもの一覧
-ゲームのリモコン(男の子)
-テレビのリモコン(両方)
-本(女の子)
-手芸道具(女の子)
~
~
**2021.10.6
***GIFの作成
ベッドから出るアニメーションを作成。
完成まではしなかったが、ベッドに入るアニメーションは今日...
明日まとめて書き出したものを掲載予定。
~
~
**2021.10.5
***GIFの作成
スマホの座るアニメーションを作成。
スマホと同じベッドに上がるアニメーションをいくつか用いて...
10/1から1日遅れていたスケジュールがようやく追いついて一安...
[[座る(スマホ)>https://drive.google.com/file/d/1CAhzpQF...
[[立つ(読書)>https://drive.google.com/file/d/10IV9JZTKf...
[[座る(読書)>https://drive.google.com/file/d/1-0g0nHwDC...
~
~
**2021.10.4
***GIFの作成
手芸しているアニメーションの座るGIFとスマホの立つGIFを完...
[[座る(手芸)>https://drive.google.com/file/d/16oCXVH9-8...
[[立つ(スマホ)>https://drive.google.com/file/d/1YRzEfTe...
~
~
**2021.10.3
***GIFの作成
PCの立つ/座るアニメーションを完成させた。
手芸は同じ机の前に座るアニメーションのため、PCの分をいく...
手芸道具や布は机の上に最初から置いてあることにしたので、...
[[立つ(PC)>https://drive.google.com/file/d/17dswqscusP2...
[[座る(PC)>https://drive.google.com/file/d/1etsDBD5x6Ww...
[[立つ(手芸)>https://drive.google.com/file/d/1DYF5vkXSz...
~
~
**2021.10.1
***GIFの作成
ベッドに入るアニメーションを完成させた。
PCの立つアニメーションに少しだけ着手したため、こちらも完...
[[起きる>https://drive.google.com/file/d/11YKRVovAYFFQwC5...
~
~
**2021.9.30
***GIFの作成
寝ているアニメーションの立つ・布団に入るGIFを作成。
立ち上がる方はまだ描いている途中。布団に入るアニメーショ...
描きかけの方も何となく書き出したのでアップロードしてみる。
[[寝る>https://drive.google.com/file/d/1KrFaXWfuraYxerEde...
[[起きる(途中)>https://drive.google.com/file/d/1HiIKYYX...
~
~
**2021.9.29
***GIFの作成
寝ているアニメーションの布団に入るGIFを作成。
布団が動くため作画に時間がかかる。
男の子の布団は無地なためまだいい方だが、女の子の布団は模...
作画の途中なので完成し次第アップロードを予定。
~
~
**2021.9.27
***GIFの作成
スマホをしているアニメーションの立つ/座るGIFを作成。
[[立つGIF>https://drive.google.com/file/d/1_WCWRePsGLtES2...
[[座るGIF>https://drive.google.com/file/d/1LspUN8JqflIfYE...
~
~
**2021.9.26
***GIFの作成
ゲームをしているアニメーションの立つ/座るGIFを作成。
[[立つGIF>https://drive.google.com/file/d/1_UPdyUJzcgbcRG...
[[座るGIF>https://drive.google.com/file/d/14lvtr2tFL4ncSW...
~
~
**2021.9.24
***自動化のシステムの試作
ひとまず現在ある素材(PCの立つ/座る・雑誌の立つ/座る)を...
<立つ・移動先をランダムで指定>→<移動>→<座る>→<アニ...
PCと雑誌しか存在しないため種類を増やすとバグが生まれる可...
現段階ではPC⇔雑誌をぐるぐる移動し、他のアニメーションに変...
~
前期の終わりでは全てを自動化した後はリロードボタンを消す...
~
~
**2021.9.23
***立つ/座るアニメーションの作成
昨日に引き続き、今日はベッドの上で雑誌を読んでいるものの...
処理の手間を省くため、手に持っていた雑誌を手に届く範囲(...
明日ベッドの上の雑誌のpngを作る。
二日かけてアニメーションを作ってみたものの、これできちん...
~
~
**2021.9.22
***立つ/座るアニメーションの作成
リロードボタンを消すための自動化に必要な固定→移動の繋ぎの...
今回はパソコンをしているものの立つ/座るのアニメーションを...
ゲームも同じ場所に座っているため一部複製できないかと思っ...
ゲームと番組の切り替え用にテレビのリモコンを机の上に置い...
~
~
**2021.9.20
***女の子の手芸のアニメーションの作成
先日の線画を修正。のち着彩。
[[完成したGIFのプレビュー>https://drive.google.com/file/d...
~
***バグの修正
併せてサイトのゲームをしているGIFと入れ替え、ゲーム画面を...
~
~
**2021.9.19
***女の子の手芸のアニメーションの作成
先日の原画をもとにアニメーションの線画を作成。明日着彩の...
~
~
**2021.9.18
***女の子の手芸のアニメーションの作成
原画を数枚だけ作成。未完成なため、完成し次第掲載。
~
~
**2021.9.17
***男の子の着彩の終了
着彩の途中だった歩いているアニメーションの着彩を完了。併...
~
***女の子の歩くアニメーションを作成
男の子のアニメーションをトレースする形で女の子の歩くアニ...
併せてサイトに仮置きしていたものを差し替えた。
~
~
**夏季休暇中の作業
-男の子のアニメーションの着彩
歩いているもの以外を着彩(歩いているものは着彩の途中)。
サイトにて使用しているGIFを差し替えた。
-女の子のアニメーションの作成
前期に作成したキャラクターデザインを使用し作成。こちらは...
男の子のゲームをしているアニメーションの代わりになるもの...
手芸にしたとしてその手芸道具はどこから?クローゼット?多...
それか机の上に置いておく。そっちの方がアニメーション作り...
-女の子の部屋のページを作成
男の子の部屋を複製し、画像を差し替え女の子の部屋を作成。
家具やアニメーションのサイズの違いによって表示がおかしく...
-ドアの開閉のアニメーションの作成
ドアにマウスをホバーした時にドアが開き、外すと閉まるアニ...
併せて同様の動きをするようプログラムを作成した。
ドアがリンクになっているため、クリックすることで男の子の...
-PCのクリックできる場所の修正
PCだけでなくテーブルもPCのON/OFFの当たり判定に含まれてし...
現在はクリックできる箇所はPCのみになっている。
//USBが壊れて女の子の.clip(フォトショでいうところの.psd...
~
~
**2021.4.15〜2021.7.1
[[前期の卒業研究Iにて作成▷▷▷>猪本結衣/卒業研究I]]
~
~
**2020.9.22〜2020.11.25
[[昨年度の情報デザイン研究IIにて作成▷▷▷>猪本結衣/情報デザ...
~
~
終了行:
//***アンケートを実施中
//Peepがどれだけコンセプト通りに作成できているか等の調査...
//ご協力のほどよろしくお願いします。
//[[アンケート回答用のリンク>https://forms.gle/dmBSxXEwjZ...
//~
//※ブラウザによってはGoogleにログインした状態だとメールア...
//~
//#hr
//~
//~
*Peep
JavaScriptを使用した誰かの癒しになるサイトの作成
// ここに Main Visual
~
#image(猪本結衣/情報デザイン研究II/mainV.png,left,100%)
~
~
~
~
~
-''[[猪本 結衣>猪本結衣]]''
-'''Keywords:Web Design, Java Script, Animation'''
-https://takearest1.github.io/peep/
~
**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
のんびり眺めるサイト
*Peep…覗き見る
~
現状できること・見れるもの
-男の子・女の子(以下各6種をランダムで表示)
--部屋を歩き回る(一定時間毎。それぞれの動作のつなぎの動...
--パソコンをする
--雑誌を読む
--スマホをする
--寝る(夜0時〜6時は固定で就寝)
--ゲームをする(男の子のみ)/手芸する(女の子のみ)
~
-クリック処理
--ドアをクリックすることで男の子と女の子の部屋を行き来
--扉横のスイッチ(部屋の照明のON/OFF)
--テレビ(電源のON/OFF)
--パソコン(電源のON/OFF)
--クローゼットの開閉
--窓の開閉
--リロード(キャラクターの動作の再定義・照明やテレビ等の...
--ヘルプ(このサイトについて)
--拡大/縮小
~
-その他
--時間により空の色が変化(朝・昼・夕・夜)
--カーソルの変化(クリックできる箇所にホバーでカーソルが...
--サイトにアクセス時、画像よりもウィンドウ幅が小さいと自...
~
***Background and Purpose
//&color(red){プロジェクトの背景と目的};
//絵を描くのが好きでアニメーションを作る技術も多少あるの...
ネットやテレビと短時間に多くの情報を浴びる機会の多い現代。
確かにたくさんの情報を受け取ることも大事だが、そればかり...
「焚き火を眺めるだけ」のような動画が流行ったことから何も...
ターゲットは、特にネットやテレビを扱う機会が多いであろう...
//アニメや漫画・ゲーム等が好きな人たち。
イラストやアニメーションを用いることでそういった人たちに...
~
***Concept
//&color(red){基本的な考え方、枠組み、視点など};
大量の情報を浴び続ける現代の人たちにゆとりを提供できるよ...
ターゲットは情報を特に多く受ける機会の多い若い人たち。
そういった方々に受け入れてもらいやすいイラストやアニメー...
~
***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視...
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本...
-[[Peep(https://takearest1.github.io/peep/)>https://takea...
~
***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Atom
-FileZilla
-CLIP STUDIO PAINT
-Photoshop
-[[GIFアニメ作成・編集『GIFアニメスタジオ』:作成フォーム>h...
-[[GIF作成 - GIF画像(GIFアニメ)を無料で作成できるサイト!...
~
***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX...
2020.9.16 〜
~
~
~
***Conclusion / Summary
//&color(red){プロジェクトが完結したら「まとめ」を記載し...
~
~
**Survey
***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
-昨今、短時間に受け取る情報量が多い。(TwitterやTikTok、T...
~
参考
-[[総務省|令和2年版 情報通信白書|主なメディアの利用時間...
-「ドヤ顔で語れるちょっとした小ネタ」として、現代日本人が...
-[[現代人が1日に触れる情報量は、平安時代の一生分、江戸時...
九産大の図書館が同書籍と思しき資料を所蔵しているので、要...
-選択可能情報量をメディアグループ別にみると電気通信系の伸...
※選択可能情報量とは、各メディアの情報受信点において、1年...
受け取る情報ではなく受け取ることができる情報の量なので本...
-同資料のp113にて消費情報量は平成8年〜18年では横ばいとの...
-https://www.jst.go.jp/lcs/pdf/fy2020-pp-09.pdf(メモ。あ...
-ツイッターに絞って調べたところ有用な資料を発見。サイトに...
-[[【2021年2月更新!】データからみるTwitterユーザー実態ま...
-試しに自分で1分間に通過したツイート数を数えたところ35ツ...
調べていく上で、「現代で1日に受け取る情報量は江戸時代の1...
~
***Precedent
//&color(red){先行事例の紹介、傾向分析など};
*コンセプト
眺める、癒される等が目的のサイトでかつアニメーションのも...
-[[ぼーっと沖縄>http://boot-okinawa.com]]
-[[WindowSwap>https://window-swap.com]]
~
*デザイン
アイソメトリックのサイト・インタラクティブなサイトはそれ...
-アイソメトリック
--[[可愛い!動く!見ているだけで癒されるアイソメトリック...
--[[こんなところにTDK>https://www.jp.tdk.com/athletic/exp...
--[[株式会社メルペイ>https://jp.merpay.com/]]
--[[ボラギノールタウン|ボラギノール公式ブランドサイト>ht...
--[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp...
-インタラクティブ
--[[Nomadic Tribe — makemepulse>https://2019.makemepulse....
~
*レイアウト
作りたいサイトに似た雰囲気のサイトを収集。手書き感のある...
-[[クイックオバケさん(Twitter)>https://twitter.com/Quic...
-[[魔法部|フェリシモ>https://web.archive.org/web/2021012...
~
*その他
[[Gegenbauer – transparent, einfach, digital>https://chan...
(インタラクティブで、かつサイトの雰囲気が作成したいもの...
~
~
***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関す...
//以前はJavaScriptで作成していたが、諸事情でjQueryの方が...
必要な技法
-JavaScript
-jQuery?
-イラスト・アニメーション
~
参考にしたサイト・文献(昨年の作業分を除く)
-[[マウスポインターをCSSでカスタマイズして任意の画像に変...
-[[マウスカーソルの形状を変える:スタイルシート(CSS)一...
-[[jquery - DIVの中央に水平スクロールバーを配置する方法 -...
[[【CSS3】Transform(変形)関連のまとめ - Qiita>https://q...
~
~
**Project Management
***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成して...
[[スケジュール>https://docs.google.com/spreadsheets/d/1oc...
~
***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメ...
-猫の部屋
~
-歩く(計2個)
--手前に
--奥に
-キャットタワー(計3個)
--で外見てる
--に上る
--から降りる
-ベッド(計3個)
--で寝てる
--に入る
--から出る
-ねこじゃらし(計3個)
--で遊んでる
--に近づく
--から離れる
-開閉(計3個)
--クローゼットを
--カーテンを
--ドアを
→合計14個(+部屋のPNG)
~
~
-犬の部屋※※
-キャラクターにいたずら※※
(※はあわよくばしたい、くらいのもの)
(※※は重労働だからしたくないけどできたら楽しいもの)
~
#hr
-%%男の子の色を付ける。%%
-%%現時点では左下のリロードボタン、もしくはサイトのリロー...
-%%女の子を追加%%
--%%男の子のモーションとほとんど同じにする予定だが、一部...
%%(ゲームをしてるモーション→化粧するモーション など。何...
--%%リロードボタンが消えるので、男の子に切り替えるボタン...
(自分で動作の切り替えはできるままにした方がいいと判断し...
--%%軽量化したいため、画像を切り替えるのではなくリンクを...
-%%天気の実装※%%
--%%晴れ・雨・くもり以外の天気が出てきた時、ひとまず晴れ...
-%%height極限まで縮めた時に起こるバグの修正%%
-%%窓の開閉で部屋の明るさ変えたい※%%
-%%前のサーバーのPeepから今のサーバーのPeepに飛ぶプログラ...
-%%デモ版の作成%%
-%%月齢%%
-%%リモコンでチャンネル切り替え%%
-%%女の子の部屋の左右反転%%
//-スケジュールの完成
~
~
~
#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記...
#hr
~
~
**2021.12.16
***猫の模様決め
部屋の家具等の色と合わせ、紛れ込まないサバシロにすること...
~
***歩く猫
歩いている猫のアニメーションを作画するにあたって資料を収...
野良猫が歩いている動画が骨格がわかりやすくて参考になる。
[[Cat walk ネコ,歩く。(YouTube)>https://www.youtube.co...
~
**2021.12.15
***説明パネルの準備
先日作成した説明パネルに画像を挿入した。
サイトのスクリーンショットを入れたいが家のパソコンの画面...
~
**2021.12.13
***説明パネルの準備
説明パネルに文章を入れた。画像は後日挿入する。
~
**2021.12.10
***猫部屋の準備
猫の部屋に設置する家具をそれぞれpngで書き出し、サイトの方...
cssで家具の位置を調整済み。
男の子のプログラムを複製し利用しているため、マウスや本が...
まだ家具を置いたのみで猫はいないのでアップロードはしてい...
~
**2021.12.9
***猫の練習3
#image(study2.png,right,20%);
昨日に引き続き写真を模写した。
併せてラフの猫をきちんと描きなおし、原画とする。
猫は個人的に黒猫が好きなのだが、あまりよく思わない人も一...
[[高画質版>https://drive.google.com/file/d/1xrF4y45PKLcDE...
~
**2021.12.8
#image(study1.png,right,20%);
***猫の練習2
猫の骨格を検索し、出てきた物を模写する形で練習を行った。
[[高画質版>https://drive.google.com/file/d/1rr-z6-zWjzF7M...
~
***メモ
おそらく海外のサイトだが、猫を描くのにかなり便利そうなサ...
頭蓋骨の3DCGを好きな向きに回し、動物を指定して検索をかけ...
[[Animal Photo Art References Search>https://x6ud.github....
~
**2021.12.6
***猫の練習
先日ラフを作成した際に猫の理解が全体的に薄いことを実感し...
キャンバスがまだ埋まっていないため後日まとめてアップロー...
~
**2021.12.5
#image(catdemo.png,right,30%);
***猫の背景の作画
背景のラフの線画をし、ラフをそのまま塗り込む形で作画。
実際にサイトに差し込んで確認したところ大きな違和感はない...
~
**2021.12.3
***ヘルプ画面の修正
ヘルプ画面に再生中のYouTubeの詳細(タイトル・URL)と天気...
それに併せてサイトの下部に表示されていたYouTubeの詳細を撤...
~
**2021.12.2
***バグの修正
先日の面談中に見つけたバグを修正。
背景の家のシルエットの色がおかしくなるバグがなくなった。
あわせてGitHubを最新版に更新した。
~
女の子の部屋を反転した際にテレビに映るYouTubeもまるごとひ...
~
***作成するGIFのリスト化
猫の部屋を作成するにあたって作成しないといけないGIFをリス...
-歩く(計2個)
--手前に
--奥に
-キャットタワー(計3個)
--で外見てる
--に上る
--から降りる
-ベッド(計3個)
--で寝てる
--に入る
--から出る
-ねこじゃらし(計3個)
--で遊んでる
--に近づく
--から離れる
-開閉(計3個)
--クローゼットを
--カーテンを
--ドアを
→合計14個(+部屋のPNG)
~
***プレゼンの準備
プレゼンを一通り通して、引っ掛かる部分の原稿の準備や入れ...
ちょうど5分くらいに収まったので緊張しなければ大丈夫。多...
~
***明日の面談に関することのメモ
-女の子の部屋を反転した
-猫の部屋を作ることにした。GIFだけでいいから多分一ヶ月、...
-デモ用のボタンをどうするか相談したい
--デモのボタンとユーチューブのリンクと今日の天気を一画面...
~
**2021.12.1
***概要の修正
誤字を発見したので修正。ドライブの概要を更新した。
~
***プレゼンの準備
概要に書かれている順番に合わせて原稿の修正。まだ時間の調...
メモ:猫の部屋作ることも発表したいから画像を準備する。そ...
あとブラッシュアップについてもう少しまとめる。今日の福岡...
~
**2021.11.30
***アクティビティモニタの使用
先日の面談で教えていただいたアクティビティモニタを使用し...
結果、使用メモリが上昇し続けるといった不具合は見受けられ...
~
***猫部屋の検討
猫を飼っている友人に意見を貰いつつアイテムの追加・移動を...
モーションと直接紐づける予定はないが、背景を本描きすると...
モーションはひとまず画像にある「キャットタワーから外を眺...
この3つが完成し余裕があった場合は追加で作成したい。
~
#image(cat2.png,left,30%);
~
~
~
~
~
**2021.11.29
***猫部屋の検討
色味はひとまず保留で何のオブジェクトの位置に重きを置き検...
ただ今から猫の部屋を作るとなると相当時間がかかるため、本...
ちなみに猫なのは犬よりも若者人気があるため。
~
#image(cat.png,left,30%);
~
~
~
~
~
**2021.11.28
***部屋の左右反転
男の子の部屋と繋がってる感を演出するために女の子の部屋を...
反転させたい部屋の家具や背景、キャラクター等の要素を新規...
部屋が線対象でないため、タイトルやリロードボタン等の位置...
男の子の部屋と女の子の部屋で同じ位置に来るよう、かつ両方...
~
#image(reflect.png,left,40%);
#image(reflect2.png,left,40%);
~
~
~
~
~
**2021.11.24
***リロードボタンの機能の調整
デモ画面で時間や天気をいじった後元に戻すことができなかっ...
併せて、クローゼットとカーテンの開閉もリセットされるよう...
~
***プログラムの合併
ベースのページとデモのページでプログラムを分けていたのを...
ベースのプログラムにデモ用の変数を用意することで、それぞ...
~
**2021.11.19
***バグの修正
昨日のメモに沿って修正。
メモの方法でsetIntervalをリセットすることができた。
しかしいまだsetTimeoutが修正できていない。
以下昨日のメモ以外の試してみたこと。
~
元のプログラム▼
/*一定時間毎の処理*/
変数名1=setTimeout{
関数1();
変数名2=setTimeout{
関数2();
…
,1000};
,1000};
/*クリックした時の処理*/
clearTimeout(変数名1);
clearTimeout(変数名2);
…
書き換えてみたプログラム▼
/*一定時間毎の処理*/
変数名1=setTimeout{
関数1();
,1000};
変数名2=setTimeout{
関数2();
,2000};
/*クリックした時の処理*/
clearTimeout(変数名1);
clearTimeout(変数名2);
…
関係ないと思ったけどclearTimeoutを変数1→変数2の順で止めて...
~
**2021.11.18
***メモ
当サイト更新作業中にバグの修正に使えそうなアイデアが少し...
時間の関係で今日はもう作業できないため明日以降に試してみ...
-リロードでリセットするやつ[[setIntervalタイマーをリセッ...
-リロードと一定時間毎のプログラムが混ざる問題
/*一定時間毎の処理*/
変数名1=setTimeout{
変数名1=setTimeout{
…
};
};
/*クリックした時の処理*/
clearTimeout(変数名1);
みたいになってるのを
変数名1=setTimeout{
変数名2=setTimeout{
…
};
};
clearTimeout(変数名1);
clearTimeout(変数名2);
…
ってしたら直らないかな。わからない。いい加減直って欲しい。
~
**2021.11.17
***バグの修正の修正
昨日の作業分が時間を置いてわからなくなったことと修正が出...
また表記ミス等の細々したバグが少し見つかったため併せて修...
~
**2021.11.16
***バグの修正(未完)
一定時間毎に入る移動のプログラムの実行中にリロードを押す...
しかしsetTimeoutで走らせた動作を途中で停止する方法がわか...
以下試したもの▼
-clearTimeout(参考:[[【JavaScript入門】clearTimeoutとは...
-フラグを切り替えてifで管理
~
***動作不良の確認
昨日触ったリロードのタイミングでsetIntervalをリセットする...
~
**2021.11.15
***リロード後の動作処理
一定時間毎に動作するプログラムがタイミング次第でリロード...
~
~
**2021.11.14
***バグの修正
FireFoxでは確認できなかった表示のバグがSafariで確認された。
デモのページで天気を切り替えた際の雨→晴れで窓の表示がおか...
ついでに一定時間毎にアニメーションが切り替わる一瞬だけ部...
~
**2021.11.8
***アップロード作業
バグの修正やプログラムの統一化に伴い細々とした修正を多数...
~
**2021.11.7
***バグの修正
先日見つけたバグを修正。
併せて男の子と女の子のJavaScriptの中身が同じもの(背景や...
~
**2021.11.5
***バグの発見
ズームアウト/ズームインをし、かつ一定のウィンドウサイズの...
~
**2021.11.4
***月齢の変化
先日調査した月齢を管理するプログラムと、昨日作成した画像...
~
***デモ画面の作成
卒業制作展で使用するデモのたたき台として、天気と時間を変...
フラグの管理が甘い部分が複数箇所確認されたため、後日バグ...
[[Peepのデモ用ページ>https://takearest1.github.io/peep/de...
以下メモ
-sleepスタートで照明のフラグ(s_frag)が立ったり降りたり...
-深夜の睡眠中から時間をいじって起こした時に布団が2枚出た...
~
~
**2021.11.3
***月齢の変化
先日作成した月齢のプログラムに組み込む画像を作成。
大まかに7種類に分けた。
#image(moon.png,left,50%);
~
~
~
~
**2021.11.2
***ジャンプ処理
以前にアップしていたサーバーのPeep(xFree版)から、現在の...
現在は移動した旨とジャンプしますと伝えるのみなので、少し...
参考>[[自動的に他のページにジャンプする>https://www.hash...
~
***リモコンのアップロード
先日作成したリモコンのクリック処理をアップロードした。
~
~
**2021.10.29
***リモコンのクリック処理の作成
リモコンをクリックすることでテレビの画面が切り替わるよう...
全6種の動画+初期に入れていたGIFが順番に周り、最後に画面...
これでサイトごとリロードしないと番組が変わらなかったとこ...
~
***概要の微修正
小さなミスを数カ所修正。
~
~
**2021.10.28
***天気のプログラムの修正
天気のプログラムに使用したjsonに「晴れ・くもり・雨」以外...
~
***月齢についての調査
夜になった際に出てくる月を現実のものとリンクさせたかった...
月齢を扱っていたサイトがあったためプログラムを調べたとこ...
フリーで公開されていたため試作としてプログラムをいくらか...
月齢を扱ったサイト>[[【みんなの知識 ちょっと便利帳】現在...
福原直人さん作成のJS>[[月齢計算(JavaScript)>https://news...
色々実験しながら試作したページ>[[http://takearest.php.xd...
~
~
**2021.10.27
***バグの修正
昨日したバグの修正によってヘルプ画面の背景がズレるという...
~
~
**2021.10.26
#image(bug1.png,right,20%);
***バグの修正
ウィンドウの縦幅を縮めると部屋から家具がはみ出るバグを修...
ついでに画像の最小サイズを設定したため視認できなくなるほ...
~
***バグの修正の確認
昨日見つけた17時になったタイミングで背景の色がおかしくな...
~
~
**2021.10.25
***部屋の明るさの調整
カーテンを開閉した際、部屋の明るさが変化するようにした。
瞬間的に明るさが変化すると少し違和感があったため、明るさ...
参考にしたサイト>[[jQueryで数字をカウントアップしながら...
~
***バグの発見
17時になって背景が夕方になる際、背景の地面の部分がおかし...
昼の地面を#fffで不透明度を低くしていた関係?
修正したため明日また様子を見る予定。
~
~
**2021.10.24
***概要の作成
前期の概要を一部修正する形で概要を作成。
~
~
**2021.10.22
***面談
以下先生にいただいた意見のメモ
-実際の天気や時間とリンクしているものとは別に、自分で天気...
--リンクの移動で実現可能?
-月の形が現実にリンクしてても楽しいかもしれない。
--月齢?調べてみる
-窓の外に猫がたまに遊びにきても楽しい。
--日向ぼっこしてる。しっぽが揺れてる。とか
-ほか概要の件やアンケートの件について
~
~
**2021.10.21
***サーバーの移動
昨日から時間をおいてサイトにアクセスしたものの改善されな...
それどころか以前に作成して当時はきちんと動いていたはずの...
xFreeのサーバーからアップすると広告がついてしまうという問...
GitHubにアカウントを作成。アップロードの方法を調べつつサ...
移動前(xFree)[[http://takearest.php.xdomain.jp/peep/]]
移動先(GitHub)[[https://takearest1.github.io/peep/]]
参考にしたサイト[[自分で作ったWebページをインターネット上...
後日元のページリンクから新規のリンクに飛ぶプログラムを作...
//~
//***概要の作成
~
~
**2021.10.20
***天気の導入
昨日に引き続き天気を導入。
くもりの窓を作画し、背景同様雨が窓を伝うGIFを重ねて雨の画...
~
***概要の作成
前期の概要のファーストビュー等に使用していた画像を最新の...
~
***アンケートの回答確認
-回答に女の子の部屋のテレビがつかないとの報告が入っていた...
-質問の文面の意図がうまく伝わらなかったとのことだったため...
~
***バグ?の確認
-テレビが機能しない
テレビの画面自体は問題なくつくものの、YouTubeがなんらかの...
SafariやスマホのChrome・FireFoxでは開けるためパソコンの方...
きちんと再生できた頃のバックアップを改めて開いたもののう...
-HTMLのデータを直接FireFoxで開く分には問題なく開けるが、x...
明日原因を調査する予定。
~
~
**2021.10.19
***天気の作成
以前に[[試作>http://takearest.php.xdomain.jp/weather/]]し...
利用したjsonにどう言う名前で登録されているのかわからない...
それ以外の天気が出た際にバグってしまうため要修正。
天気の反映に伴いくもり・雨の背景色を、時間ごとに切り替わ...
雨はくもりの背景をベースに雨が降っているGIFを重ねることで...
明日は天気に合わせた窓の作画を予定。
~
**2021.10.17
***アンケートの設置
昨日作成したアンケートを学科サイトのトップに設置。
併せて当ページのトップにも設置した。
~
~
**2021.10.16
***アンケートの修正
先日いただいたアドバイスを元にアンケートを作り込んだ。
時間が遅かったため明日設置予定。
~
~
**2021.10.15
***開閉するプログラムの作成
先日作成したクローゼットとカーテンのGIFをサイトに実装。
クリックすることでGIFが入れ替わり開閉できる。
~
***面談
忘れないうちに頂いたアドバイスや意見をメモしておく。
-アンケートについて
--見出しをつける
--追加して欲しい機能
--思い通りに動かないところの報告
-窓開けて部屋が明るくなったら楽しい
-女の子の部屋を左右反転すると部屋を移動してる感がでるかも...
~
~
**2021.10.14
***カーテンとクローゼットのGIFの作成
#image(closet_b.png,left,20%);
#image(closet_g.png,left,20%);
カーテンとクローゼットをクリックすることで開閉できるよう...
併せてクローゼットの中も新規で描いた。
しかし描きこみすぎて浮いてしまったため色を塗り直す予定。
(もったいないので掲載)
[[カーテン_開く>https://drive.google.com/file/d/15kRfN_zV...
[[クローゼット_開く>https://drive.google.com/file/d/1y9W9...
~
~
**2021.10.13
#image(andasi.png,right,20%);
***アンケートの作成
アンケートに入れる設問を書き出し、整理し削る作業をした。
その後設問を作成した。今度の授業にて先生方にこれでいいか...
~
~
~
~
**2021.10.12
***うろうろするプログラム(女の子.ver)の作成
男の子のプログラムを複製し歩き回るプログラムを作成。
歩き回るプログラムを作成するのに際し他のプログラムも少し...
案の定バグが乱立したためそちらも修正し、ひとまず確認され...
これで男の子と女の子、両方のプログラムが作成し終わった。
~
~
**2021.10.11
***うろうろするプログラムの続き
昨日乱立したバグを修正。
歩き回るプログラムを作成するのに際し他のプログラムも少し...
これで男の子と女の子、両方のプログラムが作成し終わった。
~
***アンケートの作成
コンセプト通りに作成できてるか、ブラッシュアップに向けた...
~
~
**2021.10.11
***うろうろするプログラムの続き
昨日乱立したバグを修正。
歩き回るプログラムを作成するのに際し他のプログラムも少し...
これで男の子と女の子、両方のプログラムが作成し終わった。
~
***アンケートの作成
コンセプト通りに作成できてるか、ブラッシュアップに向けた...
~
~
**2021.10.10
***スイッチを押すGIFの作成
不足していたGIFを作画。
昨日作成していたのは全て男の子の部屋だが、女の子の同GIFも...
[[照明のスイッチON/OFF(男の子)>https://drive.google.com...
[[〃(女の子)>https://drive.google.com/file/d/10R0BsIEbh...
~
***うろうろするプログラムの続き
作成したGIFを追加し、寝る前後に都度照明を点滅するようプロ...
部屋の照明を管理するために作っていたフラグを利用し、すで...
これで男の子の方のプログラムは完成。
~
***うろうろするプログラム(女の子.ver)の作成
男の子のプログラムを複製し歩き回るプログラムを作成。
案の定バグが乱立したので明日修正する予定。
~
~
**2021.10.9
***うろうろするプログラムの作成の続き
引き続きうろうろするプログラムを作成。
ゲームをしに行く、ゲームを終え別の場所に移動するプログラ...
また寝るためにベッドへ行くプログラムを作成しようとしたも...
スイッチを押すアニメーションは作成していなかったため明日...
~
~
**2021.10.8
***先生との面談
主にアンケートの取り方についての相談をし、作成方法を検討。
部屋の中をうろうろするプログラムが未完成なため、完成次第...
~
***ランダムでうろうろするプログラムの作成
男の子のうろうろするプログラムを作成。
全て作成し終わったら女の子の方に複製し、調整することで同...
先日作成していた読書⇔PCのプログラムを応用し、ひとまず他の...
バグが乱立するため時間がかかりそうな予感がしている。
~
~
**2021.10.7
***GIFの作成
ベッドから出る/入るGIFを作成。
以上で全ての立つ/座るGIFが完成したため、サイトに入れ込む...
[[立つ>https://drive.google.com/file/d/1y5oH5tH40TJ-TDLLp...
[[座る>https://drive.google.com/file/d/1OQoVVpc-ju__82ogg...
この記事を書きながら手からスマホを消す作業をしていないこ...
[[立つ(修正版)>https://drive.google.com/file/d/1TRcw8De...
~
***作成したGIFの反映作業
GIFをサイトに入れる際のCSSの部分を全て調整した。
~
***細かいアイテムの追加
女の子の読んでいる本や手芸道具など、アニメーションを自動...
以下追加したもの一覧
-ゲームのリモコン(男の子)
-テレビのリモコン(両方)
-本(女の子)
-手芸道具(女の子)
~
~
**2021.10.6
***GIFの作成
ベッドから出るアニメーションを作成。
完成まではしなかったが、ベッドに入るアニメーションは今日...
明日まとめて書き出したものを掲載予定。
~
~
**2021.10.5
***GIFの作成
スマホの座るアニメーションを作成。
スマホと同じベッドに上がるアニメーションをいくつか用いて...
10/1から1日遅れていたスケジュールがようやく追いついて一安...
[[座る(スマホ)>https://drive.google.com/file/d/1CAhzpQF...
[[立つ(読書)>https://drive.google.com/file/d/10IV9JZTKf...
[[座る(読書)>https://drive.google.com/file/d/1-0g0nHwDC...
~
~
**2021.10.4
***GIFの作成
手芸しているアニメーションの座るGIFとスマホの立つGIFを完...
[[座る(手芸)>https://drive.google.com/file/d/16oCXVH9-8...
[[立つ(スマホ)>https://drive.google.com/file/d/1YRzEfTe...
~
~
**2021.10.3
***GIFの作成
PCの立つ/座るアニメーションを完成させた。
手芸は同じ机の前に座るアニメーションのため、PCの分をいく...
手芸道具や布は机の上に最初から置いてあることにしたので、...
[[立つ(PC)>https://drive.google.com/file/d/17dswqscusP2...
[[座る(PC)>https://drive.google.com/file/d/1etsDBD5x6Ww...
[[立つ(手芸)>https://drive.google.com/file/d/1DYF5vkXSz...
~
~
**2021.10.1
***GIFの作成
ベッドに入るアニメーションを完成させた。
PCの立つアニメーションに少しだけ着手したため、こちらも完...
[[起きる>https://drive.google.com/file/d/11YKRVovAYFFQwC5...
~
~
**2021.9.30
***GIFの作成
寝ているアニメーションの立つ・布団に入るGIFを作成。
立ち上がる方はまだ描いている途中。布団に入るアニメーショ...
描きかけの方も何となく書き出したのでアップロードしてみる。
[[寝る>https://drive.google.com/file/d/1KrFaXWfuraYxerEde...
[[起きる(途中)>https://drive.google.com/file/d/1HiIKYYX...
~
~
**2021.9.29
***GIFの作成
寝ているアニメーションの布団に入るGIFを作成。
布団が動くため作画に時間がかかる。
男の子の布団は無地なためまだいい方だが、女の子の布団は模...
作画の途中なので完成し次第アップロードを予定。
~
~
**2021.9.27
***GIFの作成
スマホをしているアニメーションの立つ/座るGIFを作成。
[[立つGIF>https://drive.google.com/file/d/1_WCWRePsGLtES2...
[[座るGIF>https://drive.google.com/file/d/1LspUN8JqflIfYE...
~
~
**2021.9.26
***GIFの作成
ゲームをしているアニメーションの立つ/座るGIFを作成。
[[立つGIF>https://drive.google.com/file/d/1_UPdyUJzcgbcRG...
[[座るGIF>https://drive.google.com/file/d/14lvtr2tFL4ncSW...
~
~
**2021.9.24
***自動化のシステムの試作
ひとまず現在ある素材(PCの立つ/座る・雑誌の立つ/座る)を...
<立つ・移動先をランダムで指定>→<移動>→<座る>→<アニ...
PCと雑誌しか存在しないため種類を増やすとバグが生まれる可...
現段階ではPC⇔雑誌をぐるぐる移動し、他のアニメーションに変...
~
前期の終わりでは全てを自動化した後はリロードボタンを消す...
~
~
**2021.9.23
***立つ/座るアニメーションの作成
昨日に引き続き、今日はベッドの上で雑誌を読んでいるものの...
処理の手間を省くため、手に持っていた雑誌を手に届く範囲(...
明日ベッドの上の雑誌のpngを作る。
二日かけてアニメーションを作ってみたものの、これできちん...
~
~
**2021.9.22
***立つ/座るアニメーションの作成
リロードボタンを消すための自動化に必要な固定→移動の繋ぎの...
今回はパソコンをしているものの立つ/座るのアニメーションを...
ゲームも同じ場所に座っているため一部複製できないかと思っ...
ゲームと番組の切り替え用にテレビのリモコンを机の上に置い...
~
~
**2021.9.20
***女の子の手芸のアニメーションの作成
先日の線画を修正。のち着彩。
[[完成したGIFのプレビュー>https://drive.google.com/file/d...
~
***バグの修正
併せてサイトのゲームをしているGIFと入れ替え、ゲーム画面を...
~
~
**2021.9.19
***女の子の手芸のアニメーションの作成
先日の原画をもとにアニメーションの線画を作成。明日着彩の...
~
~
**2021.9.18
***女の子の手芸のアニメーションの作成
原画を数枚だけ作成。未完成なため、完成し次第掲載。
~
~
**2021.9.17
***男の子の着彩の終了
着彩の途中だった歩いているアニメーションの着彩を完了。併...
~
***女の子の歩くアニメーションを作成
男の子のアニメーションをトレースする形で女の子の歩くアニ...
併せてサイトに仮置きしていたものを差し替えた。
~
~
**夏季休暇中の作業
-男の子のアニメーションの着彩
歩いているもの以外を着彩(歩いているものは着彩の途中)。
サイトにて使用しているGIFを差し替えた。
-女の子のアニメーションの作成
前期に作成したキャラクターデザインを使用し作成。こちらは...
男の子のゲームをしているアニメーションの代わりになるもの...
手芸にしたとしてその手芸道具はどこから?クローゼット?多...
それか机の上に置いておく。そっちの方がアニメーション作り...
-女の子の部屋のページを作成
男の子の部屋を複製し、画像を差し替え女の子の部屋を作成。
家具やアニメーションのサイズの違いによって表示がおかしく...
-ドアの開閉のアニメーションの作成
ドアにマウスをホバーした時にドアが開き、外すと閉まるアニ...
併せて同様の動きをするようプログラムを作成した。
ドアがリンクになっているため、クリックすることで男の子の...
-PCのクリックできる場所の修正
PCだけでなくテーブルもPCのON/OFFの当たり判定に含まれてし...
現在はクリックできる箇所はPCのみになっている。
//USBが壊れて女の子の.clip(フォトショでいうところの.psd...
~
~
**2021.4.15〜2021.7.1
[[前期の卒業研究Iにて作成▷▷▷>猪本結衣/卒業研究I]]
~
~
**2020.9.22〜2020.11.25
[[昨年度の情報デザイン研究IIにて作成▷▷▷>猪本結衣/情報デザ...
~
~
ページ名: