猪本結衣/情報デザイン研究II をテンプレートにして作成

開始行:
*Peep Java Scriptによるアニメーションの実装 // ここに Main Visual ~ #image(mainV.png,left,100%) ~ ~ ~ ~ ~ -''[[猪本 結衣>猪本結衣]]'' -'''Keywords：Web Design, Java Script, Animation''' -http://takearest.php.xdomain.jp/peep/ ~ **Overview ~ ***Introduction //&color(red){これは何か？ 簡潔に}; のんびり眺めるだけのサイト ＊Peep…覗き見る ~ 現状できること・見れるもの -男の子（以下６種をランダムで表示） --部屋を歩き回る --パソコンをする --雑誌を読む --ゲームをする --スマホをする --寝る（夜０時〜６時は固定で寝てる） ~ -クリック処理 --扉横のスイッチ（部屋の照明のON/OFF） --テレビ（電源のON/OFF） --パソコン（電源のON/OFF） --リロード（男の子の動作の再定義・部屋の照明を除き電源OFF） ~ -その他 --時間により空の色が変化（朝・昼・夕・夜） ~ ***Background and Purpose //&color(red){プロジェクトの背景と目的}; 絵を描くのが好きでアニメーションを作る技術も多少あるので... 「ただ眺めるだけのサイト」はあまり見ない気がしたので作成... 訪れた方の暇つぶしになるサイトを作ることが目的。 ~ ***Concept //基本的な考え方、枠組み、視点など -暇な時にぼーっと眺めるサイト 少しでも誰かの癒しになればと作成。 ~ //***Target //&color(red){誰のために}; //息抜きしたい人（仮） //~ ***Output //&color(red){成果物の形式・サイズ}; -[[Peep(http://takearest.php.xdomain.jp/peep/)>http://tak... ~ ***Tools //&color(red){使用する機材・ソフトウエア}; -Atom -CLIP STUDIO PAINT ~ ***Term //&color(red){プロジェクトの期間}; 2020.9.16 〜 ~ ~ **CurrentStatus ~ 当初の目的通り「眺めるだけ」の「暇つぶしができる」サイト... 時間帯によって空の色が変わる点やそれに伴い部屋の照明を消... またプロジェクトを初めてすぐにはなかった、干渉できる仕組... まだ決定事項ではないが卒業制作で続きを作成することを考え... ~ ~ **Survey ~ ***Present Status //現状調査、現状の問題の洗い出し 現状できること・見れるもの -男の子（以下６種をランダムで表示） --部屋を歩き回る --パソコンをする --雑誌を読む --ゲームをする --スマホをする --寝る（夜０時〜６時は固定で寝てる） ~ -クリック処理 --扉横のスイッチ（部屋の照明のON/OFF） --テレビ（電源のON/OFF） --パソコン（電源のON/OFF） --リロード（男の子の動作の再定義・部屋の照明を除き電源OFF） ~ -その他 --時間により空の色が変化（朝・昼・夕・夜） ~ 問題点 -男の子の動作の種類が少ない。 -男の子の動作をリロードしないと切り替えられない。 -メインビジュアルのように色をちゃんとつけてやりたかったが... ~ ~ ***Precedent //先行事例の紹介、傾向分析など 眺めることを目的にしたサイトを調べたところ、実際に撮影さ... -[[ぼーっと沖縄>http://boot-okinawa.com]] -[[WindowSwap>https://window-swap.com]] ~ レイアウトの参考 -[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp/... -[[クイックオバケさん（Twitter）>https://twitter.com/Quic... ~ ~ *** Technique / Technology //プロジェクトの遂行に必要な技法・技術に関する調査 参考にしたサイトにてCreateJSが使われていたため勉強。 %%行き詰まり相談したところ別の方法を勧められたためそちら... 結局全く知らないCreateJSよりも多少知識のあるJavaScriptnの... JavaScriptの勉強用に作成した試作品もせっかくなのでいくつ... //まあもとよりCreateJSもJavaScriptも勉強し始めの知識量は... -[[CreateJSの試作たち>http://takearest.php.xdomain.jp/cre... ~ ~ **Project Management ~ //***Schedule //&color(red){計画的な遂行のために、進行管理表を作成して... //~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... -男の子の動作の種類を増やす -クリックした際のアクションを増やす --種類を増やすための作画 -%%時計の実装%% -%%夕方の実装%% -%%背景画像の作成%% -%%背景・ターゲットの練り込み%% ~ -%%CreateJSの勉強%% --%%コマアニメーションの勉強%% --%%画像の処理%% -%%作成物の決定%% ~ ~ ~ #hr CENTER:''worklog'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **2020.11.25 ***面談 以下面談で上がった話のメモとその導入方法 -Aboutページを作ったら親切かもしれないので後日、または卒... イメージとしては画面が暗くなったあと上に文字（白文字？）... --Peepとは？（学科サイトのIntroductionやConceptから引用し... --リロードボタンに矢印をつけて「リロード」って書いて見た... ---背景が暗くなっても押せるところは明るいまま、で説明文な... 「明るい場所はクリックできる場所です。押してみてください... --画面を暗くするのは照明のON/OFFを応用すればいい？かも。... ---すでに暗いのを追加で暗くするには？ filter : brightness(' + dark + '%); 現状これで部屋の照明を変更しているのでdarkを(dark - about... -男の子に直接干渉できると楽しいので卒制時に考える。 -男の子にちゃんと色をつけてやりたいのでこれも卒制時に。 ~ ~ **2020.11.24 ***バグの修正 テレビがつかなくなってしまったため修正。 ~ ***バグの発見 [[CreateJSの試作たちのキーボード操作のページ>http://takea... あくまで試作品で、かつ本来したかったキーボード操作に影響... 後日時間を見つけて修正したい。 ~ ~ **2020.11.23 ***夕方の追加 時間によって背景や部屋の明るさが変わるプログラムに夕方を... 併せて夕方用の窓の画像を作成。 ~ ***男の子の種類の追加 スマホをいじっているものとゲームをしているもの・ゲームの... ~ ***バグの修正 画面を縮めると画像が右にはみ出してスクロールできないバグ... ~ ~ **2020.11.22 ***リロードボタンの追加 サイトを開くたびにランダムで男の子の動作が変わるように作... 画像を多く使っていてリロードに少し時間を要してしまってい... 一度数値をリセットして再度ランダムに男の子を表示させるこ... ~ ***時計を追加 時計用の数字を作成し、画面右下に時計を追加した。 ~ ~ **2020.11.21 ***ランダム関数の実装 ランダム関数を利用し、 リロードするたびに男の子の動作が変わるようプログラムを作... 併せてパソコンを見ている時に画面がつくよう調整。 ~ ~ **2020.11.20 ***サイトの軽量化 歩いているgifの正面・背面を不透明度で切り替えていたので、 htmlを書き換えるものに変更。 ~ ***夜寝るように 24時になると寝ているgifに切り替わるようプログラムを作成。 併せて部屋の電気が消えるようにした。 ~ ~ **2020.11.18 ***部屋の電気の設定 部屋の照明をスイッチを押すことでon/offを切り替えられるよ... ~ ~ **2020.11.17 ***gifを書き出し 動きの確認用でしか書き出していなかったため、 サイトで扱えるよう色を単色でつけ背景を透過したものを作成。 本当はきちんと色をつけたものを使いたいが時間の関係で単色... 時間ができたら色をつけ再度書き出したいが怪しい。 また様子を見るために試しに全てサイトに設置した。 ~ ***窓の外の画像を作成 窓の外を作り忘れていたため作成。 こちらも時間に合わせて変わる。 ~ ***レスポンシブの作成 ウィンドウを最大にすると画像が小さくなってしまったため大... ぐるぐる回っている男の子もきちんとレスポンシブデザインに... スマホ用のデザインは作成できていない。 ~ ***背景の修正 部屋の淵が変に目立ってしまっていたので修正。 ~ ~ **2020.11.16 ***パソコンとテレビの作成 テレビとパソコンをクリックしたら画面がつくようgifとプログ... イメージはどうぶつの森。 ~ ~ **2020.11.15 ***バグの修正 ウィンドウ幅を変えると背景は合わせて移動するが、 男の子が無視して歩き続けるバグが発生していたため修正。 ~ ~ **2020.11.14 ***時間で動くプログラムの作成 時間に合わせて背景が変わるプログラムを作成。 朝、昼、夜を実装。 夕方を入れてもいいかもしれない。 ~ ~ **2020.11.11 ***面談 以下面談で浮上した修正点 -部屋の淵の色が悪目立ちしている。 -グルグル歩く男の子のバグ。 ~ ~ **2020.11.8 ***gifの作成 ベッドで眠っている男の子を作成 [[作成物>https://drive.google.com/file/d/1_ecQFRjcS3QCaBb... ~ ***サイトのデザイン 左から順番に朝、昼、夜 時計のデザイン案1、2 [[高画質版>https://drive.google.com/drive/folders/1VgtlvP... （メモ）男の子の色、作画コストを考えると単色でもいいのか... 背景が青系統なので赤系の色で色をつけたら目立つ。 時計は２つめの方が個人的に好き。 ~ #image(asa.png,left,25%); #image(hiru.png,left,25%); #image(yoru.png,left,25%); #image(clock1.png,left,25%); #image(clock2.png,left,25%); ~ ~ ~ ~ ~ ~ ~ ~ **2020.11.3 ***gifの作成 パソコンを扱ってる男の子のgifを作成 [[作成物>https://drive.google.com/file/d/1Xsx9MvYKybwiI7x... ~ ~ **2020.11.2 ***gifの作成 メインビジュアルの絵のgifをまだ作成していなかったので作成。 [[作成物>https://drive.google.com/file/d/1OAeD9afQBrWjipO... ~ ~ **2020.11.1 ***サイトのデザイン -白い背景では少し絵が弱い気がしたので先行事例を収集。 --[[トコトコネコパズル>http://unico-inc.jp/app/tokotoko/]... --[[源氏物語>https://www.google.com/search?q=%E6%BA%90%E6... --[[箱庭>https://www.google.com/search?q=%E7%AE%B1%E5%BA%... トコトコネコパズルのようなものが個人的には好きだが、 Peepでそのまま使うと少しくどい？ような気がする。 あとこれは屋外のゲームのため室内にする場合そのまま参考に... 源氏物語の絵を以前紹介してもらったがいまいちピンと来なか... Peepを考え始めた一番最初の構想としてはこの箱庭のようなも... 実際に描いた部屋の背景が白めなせいで絵が弱く見えてしまっ... 色味を変えてもっと小物を増やせば良くなるだろうか。 ~ -歩き回るプログラム --自動で歩き回るプログラム --移動に伴う画像の重なる順番の入れ替え --動作の変更による男の子のgifの切り替え 以上3点ができるようにひとまず机の周りをグルグル歩き回るプ... http://takearest.php.xdomain.jp/create/walk2/walk.html ~ ~ **2020.10.27 ***時計の作成 -部屋の中に時計を置きたかったので勉強。 http://takearest.php.xdomain.jp/create/clock/clock.html ~ ~ **2020.10.25 ***アニメーションの作画 以前こちら側に歩いてくるgifは作成したため、あちら側に歩く... こちらも色はまだつけていない。 [[作成物>https://drive.google.com/file/d/1uMyHwilp8BP4M39... ~ ~ **2020.10.23 ***JavaScriptの勉強 -画像の移動処理をあまり把握できていなかったため勉強。 [[以前頂いてたサンプル>https://design.kyusan-u.ac.jp/Open... ただ時間が足りず一から自分で組めなかったため今度時間を見... ~ ~ **2020.10.21 ***中間発表 -以下発表にて浮上した課題等のメモ --Webサイトのデザイン決めを早くしないといけない。 --また時間によって部屋の明るさを変えたり行動パターンを変... 難しそうであればボタンを設置しそれで時間を変えられるよう... --クリックやキーボードでテレビやパソコンの画面をオンオフ... --テレビやパソコンだけでなく他のものも考えてみる。 ~ ~ **2020.10.20 ***歩くモーションの組み込み 先日作成した歩くアニメーションをサイト上で動くよう作成。 キーボードの十字キーで動くが実物は自動で動かすため要勉強。 -[[http://takearest.php.xdomain.jp/peep>http://takearest.... -メインビジュアルの作成 当サイト上部に掲載するメインビジュアル用の画像を作成。 ~ ~ **2020.10.17 ***歩くモーションの作成 ひとまず線画のみで歩くアニメーションを作成。 後日様子を見ながら色をつけていく予定。 [[作成物>https://drive.google.com/file/d/17D1HTD4dkB5eVTh... ~ ~ **2020.10.13 #image(bg2.png,right,20%); ***背景の描き込み -背景を描きこんだ。 10日時点では背景に線画を使う予定はなかったが試しに入れて... 小物をもっと増やしたい。ティッシュとかテレビのリモコンと... 手前がスカスカなので何か入れたい。 猫飼わせる？作画コストが大幅に上がってしまうので余裕がで... [[高画質版>https://drive.google.com/file/d/1NYsaBYREc4uQ7... -作画中にいくつか浮かんだアイデアメモ --ベッドに目覚まし時計を置いてクリックしたら鳴る→男の子が... --部屋の照明のスイッチをクリック→電気が消える 自分の技術的に実装できるかはわからないため、ひとまず保留。 全て作成が終わり余裕があれば作成予定。 -peepで検索をかけたところ人工呼吸？とアプリがヒット。 タイトル変えた方がいいかもしれない。 ~ ~ **2020.10.11 #image(chara.png,right,20%); ***キャラクターの作成 -キャラクターのデザインや配色を作成 当初女の子で考えていたが髪の動き等作画コストが大きいため... アニメーションの作画に想像以上の時間がかかる気配がする。 [[高画質版>https://drive.google.com/file/d/16CnVG7SVruSuP... ~ ~ **2020.10.10 #image(bg1.png,right,20%); ***背景画像の作成 -ラフ程度のものを作成 家具の位置や間取りが決まらないため苦戦中。 [[高画質版>https://drive.google.com/file/d/1cxEbygVKTJtpz... ~ ~ **2020.10.9 ***参考サイトの収集 -[[アイソメトリックイラストを使用したサイト>https://ligin... https://twitter.com/QuickObake/status/1310174687876456451... ２個目のリンクのような雰囲気のものを作成したい。 ~ ~ **2020.10,7 #image(rough.png,right,20%); ***面談 -現在考えている方向で良さそうなので続行 -ラフの作成 現在右上２つのような家の中で構想中。 [[高画質版>https://drive.google.com/file/d/14U6uFkpcBqyC8... ~ ~ **2020.10.6 ***タイトル等の設定 -（仮）でタイトルやイントロダクションを設定。 ターゲットや背景がまだ固まっていないため早く考えないとい... ~ ~ **2020.10.3 ***JavaScriptの勉強 -以前面談の時に紹介してもらったサイト（[[https://design.k... このサイト内のコードと仕組みに関してはある程度把握できた... これを応用して画像をパラパラ漫画の要領で動かしたいが、画... ~ ~ **2020.9.29 ***試作のアップロード・CreateJSの勉強（コマアニメーション） -今までのcreateJSの勉強をする際に作ったものをまとめたサイ... メモ的な用途を想定。 [[CreateJSの試作たち>http://takearest.php.xdomain.jp/crea... ~ -先日のサイト（[[Canvasで連番画像をコマアニメーション>htt... よく見たらcanvasを用いたものでCreateJSでなかったためもう... [[PreloadJSをつかって画像をプリロードする>https://kimizuk... コピペしたところきちんと動作したものの、どういった仕組み... ~ ~ **2020.9.27 ***作りたいもののイメージ -たまたま見つけたツイートが作りたいイメージに近かったため... 定点カメラから眺めるイメージ https://twitter.com/QuickObake/status/1310174687876456451... ~ ~ **2020.9.26 ***CreateJSの勉強（画像の導入・アニメーション） -最初の方に見つけたサイト（[[cly7796.net CreateJSを使って... ~ -画像をパラパラ漫画の要領で動かす方法を調べたものの目当て... それに近い？サイトは見つけたが、連番の画像を動かすような... [[IT工房 HTML5 canvasを使用してみる>https://itstudio.co/... ~ -オブジェクトの削除（[[CreateJSで表示オブジェクトを削除す... ただしやたらコードが長くなったためやはりきちんとした方法... --追記：それらしいサイトを発見したものの時間がなかったた... ただ記事が4年前のもののため動くかはわからない。 [[Canvasで連番画像をコマアニメーション>https://kimizuka.h... ~ -上記の無理やり作成したアニメーションに移動の処理を施すた... 親子構造を用いる必要があったため勉強。 [[CreateJSの表示オブジェクトの親子構造>https://ics.media/... ~ ~ **2020.9.25 ***CreateJSの勉強（導入〜簡単な動作） -先日見つけたサイト（[[cly7796.net CreateJSを使ってみる>h... 恐らくオブジェクトを右から左に…のような簡単な動きの応用を... その部分だけでも自分で理解して組めるようになることを目標... ~ -CreateJSについて調べていたらクリック処理について出てきた... きちんと動かすことができたため何かに応用したい。未定。 [[CreateJSのクリック処理の実施方法>https://ics.media/tuto... [[CreateJSのドラッグ＆ドロップの実施方法>https://ics.medi... ~ ~ **2020.9.23 ***面談 -22日に出したアイデアの後者（[[参考サイト>https://www.kyo... CreateJSを使うといいとのアドバイスを頂いたが全く触ったこ... ~ -空き時間が少しあったため試しにCreateJSを調べた。 まだよくわからないため腰を据えて勉強しなくてはいけない。 [[CreateJSホームページ>https://www.createjs.com]] [[CreateJS入門サイト>https://ics.media/tutorial-createjs/]] [[cly7796.net CreateJSを使ってみる>http://cly7796.net/wp/... ~ ~ **2020.9.22 ***資料集め･アイデア出し -http://web-media.blue-puddle.com 以前見つけた好きなサイトを発掘 こういう系統の変わったサイトを作るのも楽しいかも知れない ~ -https://www.kyowa-cab.co.jp/jp/animation/ こういう雰囲気で、時間によって景色が変わるサイト Webサイトである必要性は？ 眺めるだけか何か要素を足すべきか、要検討 ~ ~ ~ ~ //http://design.kyusan-u.ac.jp/socialdesign/index.php?cmd...

終了行:
*Peep Java Scriptによるアニメーションの実装 // ここに Main Visual ~ #image(mainV.png,left,100%) ~ ~ ~ ~ ~ -''[[猪本 結衣>猪本結衣]]'' -'''Keywords：Web Design, Java Script, Animation''' -http://takearest.php.xdomain.jp/peep/ ~ **Overview ~ ***Introduction //&color(red){これは何か？ 簡潔に}; のんびり眺めるだけのサイト ＊Peep…覗き見る ~ 現状できること・見れるもの -男の子（以下６種をランダムで表示） --部屋を歩き回る --パソコンをする --雑誌を読む --ゲームをする --スマホをする --寝る（夜０時〜６時は固定で寝てる） ~ -クリック処理 --扉横のスイッチ（部屋の照明のON/OFF） --テレビ（電源のON/OFF） --パソコン（電源のON/OFF） --リロード（男の子の動作の再定義・部屋の照明を除き電源OFF） ~ -その他 --時間により空の色が変化（朝・昼・夕・夜） ~ ***Background and Purpose //&color(red){プロジェクトの背景と目的}; 絵を描くのが好きでアニメーションを作る技術も多少あるので... 「ただ眺めるだけのサイト」はあまり見ない気がしたので作成... 訪れた方の暇つぶしになるサイトを作ることが目的。 ~ ***Concept //基本的な考え方、枠組み、視点など -暇な時にぼーっと眺めるサイト 少しでも誰かの癒しになればと作成。 ~ //***Target //&color(red){誰のために}; //息抜きしたい人（仮） //~ ***Output //&color(red){成果物の形式・サイズ}; -[[Peep(http://takearest.php.xdomain.jp/peep/)>http://tak... ~ ***Tools //&color(red){使用する機材・ソフトウエア}; -Atom -CLIP STUDIO PAINT ~ ***Term //&color(red){プロジェクトの期間}; 2020.9.16 〜 ~ ~ **CurrentStatus ~ 当初の目的通り「眺めるだけ」の「暇つぶしができる」サイト... 時間帯によって空の色が変わる点やそれに伴い部屋の照明を消... またプロジェクトを初めてすぐにはなかった、干渉できる仕組... まだ決定事項ではないが卒業制作で続きを作成することを考え... ~ ~ **Survey ~ ***Present Status //現状調査、現状の問題の洗い出し 現状できること・見れるもの -男の子（以下６種をランダムで表示） --部屋を歩き回る --パソコンをする --雑誌を読む --ゲームをする --スマホをする --寝る（夜０時〜６時は固定で寝てる） ~ -クリック処理 --扉横のスイッチ（部屋の照明のON/OFF） --テレビ（電源のON/OFF） --パソコン（電源のON/OFF） --リロード（男の子の動作の再定義・部屋の照明を除き電源OFF） ~ -その他 --時間により空の色が変化（朝・昼・夕・夜） ~ 問題点 -男の子の動作の種類が少ない。 -男の子の動作をリロードしないと切り替えられない。 -メインビジュアルのように色をちゃんとつけてやりたかったが... ~ ~ ***Precedent //先行事例の紹介、傾向分析など 眺めることを目的にしたサイトを調べたところ、実際に撮影さ... -[[ぼーっと沖縄>http://boot-okinawa.com]] -[[WindowSwap>https://window-swap.com]] ~ レイアウトの参考 -[[こんなところに共和産業>https://www.kyowa-cab.co.jp/jp/... -[[クイックオバケさん（Twitter）>https://twitter.com/Quic... ~ ~ *** Technique / Technology //プロジェクトの遂行に必要な技法・技術に関する調査 参考にしたサイトにてCreateJSが使われていたため勉強。 %%行き詰まり相談したところ別の方法を勧められたためそちら... 結局全く知らないCreateJSよりも多少知識のあるJavaScriptnの... JavaScriptの勉強用に作成した試作品もせっかくなのでいくつ... //まあもとよりCreateJSもJavaScriptも勉強し始めの知識量は... -[[CreateJSの試作たち>http://takearest.php.xdomain.jp/cre... ~ ~ **Project Management ~ //***Schedule //&color(red){計画的な遂行のために、進行管理表を作成して... //~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... -男の子の動作の種類を増やす -クリックした際のアクションを増やす --種類を増やすための作画 -%%時計の実装%% -%%夕方の実装%% -%%背景画像の作成%% -%%背景・ターゲットの練り込み%% ~ -%%CreateJSの勉強%% --%%コマアニメーションの勉強%% --%%画像の処理%% -%%作成物の決定%% ~ ~ ~ #hr CENTER:''worklog'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **2020.11.25 ***面談 以下面談で上がった話のメモとその導入方法 -Aboutページを作ったら親切かもしれないので後日、または卒... イメージとしては画面が暗くなったあと上に文字（白文字？）... --Peepとは？（学科サイトのIntroductionやConceptから引用し... --リロードボタンに矢印をつけて「リロード」って書いて見た... ---背景が暗くなっても押せるところは明るいまま、で説明文な... 「明るい場所はクリックできる場所です。押してみてください... --画面を暗くするのは照明のON/OFFを応用すればいい？かも。... ---すでに暗いのを追加で暗くするには？ filter : brightness(' + dark + '%); 現状これで部屋の照明を変更しているのでdarkを(dark - about... -男の子に直接干渉できると楽しいので卒制時に考える。 -男の子にちゃんと色をつけてやりたいのでこれも卒制時に。 ~ ~ **2020.11.24 ***バグの修正 テレビがつかなくなってしまったため修正。 ~ ***バグの発見 [[CreateJSの試作たちのキーボード操作のページ>http://takea... あくまで試作品で、かつ本来したかったキーボード操作に影響... 後日時間を見つけて修正したい。 ~ ~ **2020.11.23 ***夕方の追加 時間によって背景や部屋の明るさが変わるプログラムに夕方を... 併せて夕方用の窓の画像を作成。 ~ ***男の子の種類の追加 スマホをいじっているものとゲームをしているもの・ゲームの... ~ ***バグの修正 画面を縮めると画像が右にはみ出してスクロールできないバグ... ~ ~ **2020.11.22 ***リロードボタンの追加 サイトを開くたびにランダムで男の子の動作が変わるように作... 画像を多く使っていてリロードに少し時間を要してしまってい... 一度数値をリセットして再度ランダムに男の子を表示させるこ... ~ ***時計を追加 時計用の数字を作成し、画面右下に時計を追加した。 ~ ~ **2020.11.21 ***ランダム関数の実装 ランダム関数を利用し、 リロードするたびに男の子の動作が変わるようプログラムを作... 併せてパソコンを見ている時に画面がつくよう調整。 ~ ~ **2020.11.20 ***サイトの軽量化 歩いているgifの正面・背面を不透明度で切り替えていたので、 htmlを書き換えるものに変更。 ~ ***夜寝るように 24時になると寝ているgifに切り替わるようプログラムを作成。 併せて部屋の電気が消えるようにした。 ~ ~ **2020.11.18 ***部屋の電気の設定 部屋の照明をスイッチを押すことでon/offを切り替えられるよ... ~ ~ **2020.11.17 ***gifを書き出し 動きの確認用でしか書き出していなかったため、 サイトで扱えるよう色を単色でつけ背景を透過したものを作成。 本当はきちんと色をつけたものを使いたいが時間の関係で単色... 時間ができたら色をつけ再度書き出したいが怪しい。 また様子を見るために試しに全てサイトに設置した。 ~ ***窓の外の画像を作成 窓の外を作り忘れていたため作成。 こちらも時間に合わせて変わる。 ~ ***レスポンシブの作成 ウィンドウを最大にすると画像が小さくなってしまったため大... ぐるぐる回っている男の子もきちんとレスポンシブデザインに... スマホ用のデザインは作成できていない。 ~ ***背景の修正 部屋の淵が変に目立ってしまっていたので修正。 ~ ~ **2020.11.16 ***パソコンとテレビの作成 テレビとパソコンをクリックしたら画面がつくようgifとプログ... イメージはどうぶつの森。 ~ ~ **2020.11.15 ***バグの修正 ウィンドウ幅を変えると背景は合わせて移動するが、 男の子が無視して歩き続けるバグが発生していたため修正。 ~ ~ **2020.11.14 ***時間で動くプログラムの作成 時間に合わせて背景が変わるプログラムを作成。 朝、昼、夜を実装。 夕方を入れてもいいかもしれない。 ~ ~ **2020.11.11 ***面談 以下面談で浮上した修正点 -部屋の淵の色が悪目立ちしている。 -グルグル歩く男の子のバグ。 ~ ~ **2020.11.8 ***gifの作成 ベッドで眠っている男の子を作成 [[作成物>https://drive.google.com/file/d/1_ecQFRjcS3QCaBb... ~ ***サイトのデザイン 左から順番に朝、昼、夜 時計のデザイン案1、2 [[高画質版>https://drive.google.com/drive/folders/1VgtlvP... （メモ）男の子の色、作画コストを考えると単色でもいいのか... 背景が青系統なので赤系の色で色をつけたら目立つ。 時計は２つめの方が個人的に好き。 ~ #image(asa.png,left,25%); #image(hiru.png,left,25%); #image(yoru.png,left,25%); #image(clock1.png,left,25%); #image(clock2.png,left,25%); ~ ~ ~ ~ ~ ~ ~ ~ **2020.11.3 ***gifの作成 パソコンを扱ってる男の子のgifを作成 [[作成物>https://drive.google.com/file/d/1Xsx9MvYKybwiI7x... ~ ~ **2020.11.2 ***gifの作成 メインビジュアルの絵のgifをまだ作成していなかったので作成。 [[作成物>https://drive.google.com/file/d/1OAeD9afQBrWjipO... ~ ~ **2020.11.1 ***サイトのデザイン -白い背景では少し絵が弱い気がしたので先行事例を収集。 --[[トコトコネコパズル>http://unico-inc.jp/app/tokotoko/]... --[[源氏物語>https://www.google.com/search?q=%E6%BA%90%E6... --[[箱庭>https://www.google.com/search?q=%E7%AE%B1%E5%BA%... トコトコネコパズルのようなものが個人的には好きだが、 Peepでそのまま使うと少しくどい？ような気がする。 あとこれは屋外のゲームのため室内にする場合そのまま参考に... 源氏物語の絵を以前紹介してもらったがいまいちピンと来なか... Peepを考え始めた一番最初の構想としてはこの箱庭のようなも... 実際に描いた部屋の背景が白めなせいで絵が弱く見えてしまっ... 色味を変えてもっと小物を増やせば良くなるだろうか。 ~ -歩き回るプログラム --自動で歩き回るプログラム --移動に伴う画像の重なる順番の入れ替え --動作の変更による男の子のgifの切り替え 以上3点ができるようにひとまず机の周りをグルグル歩き回るプ... http://takearest.php.xdomain.jp/create/walk2/walk.html ~ ~ **2020.10.27 ***時計の作成 -部屋の中に時計を置きたかったので勉強。 http://takearest.php.xdomain.jp/create/clock/clock.html ~ ~ **2020.10.25 ***アニメーションの作画 以前こちら側に歩いてくるgifは作成したため、あちら側に歩く... こちらも色はまだつけていない。 [[作成物>https://drive.google.com/file/d/1uMyHwilp8BP4M39... ~ ~ **2020.10.23 ***JavaScriptの勉強 -画像の移動処理をあまり把握できていなかったため勉強。 [[以前頂いてたサンプル>https://design.kyusan-u.ac.jp/Open... ただ時間が足りず一から自分で組めなかったため今度時間を見... ~ ~ **2020.10.21 ***中間発表 -以下発表にて浮上した課題等のメモ --Webサイトのデザイン決めを早くしないといけない。 --また時間によって部屋の明るさを変えたり行動パターンを変... 難しそうであればボタンを設置しそれで時間を変えられるよう... --クリックやキーボードでテレビやパソコンの画面をオンオフ... --テレビやパソコンだけでなく他のものも考えてみる。 ~ ~ **2020.10.20 ***歩くモーションの組み込み 先日作成した歩くアニメーションをサイト上で動くよう作成。 キーボードの十字キーで動くが実物は自動で動かすため要勉強。 -[[http://takearest.php.xdomain.jp/peep>http://takearest.... -メインビジュアルの作成 当サイト上部に掲載するメインビジュアル用の画像を作成。 ~ ~ **2020.10.17 ***歩くモーションの作成 ひとまず線画のみで歩くアニメーションを作成。 後日様子を見ながら色をつけていく予定。 [[作成物>https://drive.google.com/file/d/17D1HTD4dkB5eVTh... ~ ~ **2020.10.13 #image(bg2.png,right,20%); ***背景の描き込み -背景を描きこんだ。 10日時点では背景に線画を使う予定はなかったが試しに入れて... 小物をもっと増やしたい。ティッシュとかテレビのリモコンと... 手前がスカスカなので何か入れたい。 猫飼わせる？作画コストが大幅に上がってしまうので余裕がで... [[高画質版>https://drive.google.com/file/d/1NYsaBYREc4uQ7... -作画中にいくつか浮かんだアイデアメモ --ベッドに目覚まし時計を置いてクリックしたら鳴る→男の子が... --部屋の照明のスイッチをクリック→電気が消える 自分の技術的に実装できるかはわからないため、ひとまず保留。 全て作成が終わり余裕があれば作成予定。 -peepで検索をかけたところ人工呼吸？とアプリがヒット。 タイトル変えた方がいいかもしれない。 ~ ~ **2020.10.11 #image(chara.png,right,20%); ***キャラクターの作成 -キャラクターのデザインや配色を作成 当初女の子で考えていたが髪の動き等作画コストが大きいため... アニメーションの作画に想像以上の時間がかかる気配がする。 [[高画質版>https://drive.google.com/file/d/16CnVG7SVruSuP... ~ ~ **2020.10.10 #image(bg1.png,right,20%); ***背景画像の作成 -ラフ程度のものを作成 家具の位置や間取りが決まらないため苦戦中。 [[高画質版>https://drive.google.com/file/d/1cxEbygVKTJtpz... ~ ~ **2020.10.9 ***参考サイトの収集 -[[アイソメトリックイラストを使用したサイト>https://ligin... https://twitter.com/QuickObake/status/1310174687876456451... ２個目のリンクのような雰囲気のものを作成したい。 ~ ~ **2020.10,7 #image(rough.png,right,20%); ***面談 -現在考えている方向で良さそうなので続行 -ラフの作成 現在右上２つのような家の中で構想中。 [[高画質版>https://drive.google.com/file/d/14U6uFkpcBqyC8... ~ ~ **2020.10.6 ***タイトル等の設定 -（仮）でタイトルやイントロダクションを設定。 ターゲットや背景がまだ固まっていないため早く考えないとい... ~ ~ **2020.10.3 ***JavaScriptの勉強 -以前面談の時に紹介してもらったサイト（[[https://design.k... このサイト内のコードと仕組みに関してはある程度把握できた... これを応用して画像をパラパラ漫画の要領で動かしたいが、画... ~ ~ **2020.9.29 ***試作のアップロード・CreateJSの勉強（コマアニメーション） -今までのcreateJSの勉強をする際に作ったものをまとめたサイ... メモ的な用途を想定。 [[CreateJSの試作たち>http://takearest.php.xdomain.jp/crea... ~ -先日のサイト（[[Canvasで連番画像をコマアニメーション>htt... よく見たらcanvasを用いたものでCreateJSでなかったためもう... [[PreloadJSをつかって画像をプリロードする>https://kimizuk... コピペしたところきちんと動作したものの、どういった仕組み... ~ ~ **2020.9.27 ***作りたいもののイメージ -たまたま見つけたツイートが作りたいイメージに近かったため... 定点カメラから眺めるイメージ https://twitter.com/QuickObake/status/1310174687876456451... ~ ~ **2020.9.26 ***CreateJSの勉強（画像の導入・アニメーション） -最初の方に見つけたサイト（[[cly7796.net CreateJSを使って... ~ -画像をパラパラ漫画の要領で動かす方法を調べたものの目当て... それに近い？サイトは見つけたが、連番の画像を動かすような... [[IT工房 HTML5 canvasを使用してみる>https://itstudio.co/... ~ -オブジェクトの削除（[[CreateJSで表示オブジェクトを削除す... ただしやたらコードが長くなったためやはりきちんとした方法... --追記：それらしいサイトを発見したものの時間がなかったた... ただ記事が4年前のもののため動くかはわからない。 [[Canvasで連番画像をコマアニメーション>https://kimizuka.h... ~ -上記の無理やり作成したアニメーションに移動の処理を施すた... 親子構造を用いる必要があったため勉強。 [[CreateJSの表示オブジェクトの親子構造>https://ics.media/... ~ ~ **2020.9.25 ***CreateJSの勉強（導入〜簡単な動作） -先日見つけたサイト（[[cly7796.net CreateJSを使ってみる>h... 恐らくオブジェクトを右から左に…のような簡単な動きの応用を... その部分だけでも自分で理解して組めるようになることを目標... ~ -CreateJSについて調べていたらクリック処理について出てきた... きちんと動かすことができたため何かに応用したい。未定。 [[CreateJSのクリック処理の実施方法>https://ics.media/tuto... [[CreateJSのドラッグ＆ドロップの実施方法>https://ics.medi... ~ ~ **2020.9.23 ***面談 -22日に出したアイデアの後者（[[参考サイト>https://www.kyo... CreateJSを使うといいとのアドバイスを頂いたが全く触ったこ... ~ -空き時間が少しあったため試しにCreateJSを調べた。 まだよくわからないため腰を据えて勉強しなくてはいけない。 [[CreateJSホームページ>https://www.createjs.com]] [[CreateJS入門サイト>https://ics.media/tutorial-createjs/]] [[cly7796.net CreateJSを使ってみる>http://cly7796.net/wp/... ~ ~ **2020.9.22 ***資料集め･アイデア出し -http://web-media.blue-puddle.com 以前見つけた好きなサイトを発掘 こういう系統の変わったサイトを作るのも楽しいかも知れない ~ -https://www.kyowa-cab.co.jp/jp/animation/ こういう雰囲気で、時間によって景色が変わるサイト Webサイトである必要性は？ 眺めるだけか何か要素を足すべきか、要検討 ~ ~ ~ ~ //http://design.kyusan-u.ac.jp/socialdesign/index.php?cmd...

ページ名: