猪本結衣/情報デザイン研究II
をテンプレートにして作成
HOME
ソーシャルデザイン学科
最新の更新
2017
MEMBER 2017
伊藤晃生
加藤麻梨絵
木原慧士
古賀梨紗子
堺由加子
髙橋結
畑瀬英晴
平田愛恵
松浦直幹
山本桜雅
山本将嗣
井上友雅
河野紗恵
小池和輝
野村麗奈
榎木美里
王淑嬋
林ありさ
前田さや
枡田瑞穂
上田真衣
2018
MEMBER 2018
井上大輝
猪本結衣
上原一成
幸田奨之
小森丈
佐伯華帆
坂本将駄
田代飛凱
豊田祥歩
中川弘章
平塚海登
深江沙羅
眞島渓斗
山口佳奈
山村樹
江崎悠芽
大村雅人
小倉龍聖
中尾日香梨
林花野
増丸竣太
河原涼奈
富山真至
森栄里子
2019
MEMBER 2019
阿萬薫秋
生末知菜美
岩井玄貴
上村仁
岡部明日香
折橋和真
鹿毛鈴菜
川村晋太郎
紀野はるか
日下恵輔
興梠愛加
古賀旭
榛葉啓人
進こうへい
鈴木貴久
田中満里奈
手柴数騎
當山清龍
中嶋碧海
長岡茉理奈
奈須本真椰
成田佳津希
西隆彰
野田萌々菜
平川真聖
古野海志
銘苅和輝
森江龍雅
山川滉生
山本航
吉永龍太朗
渡部楓花
矢幡龍星
池田亮介
緒方悠人
木村柊介
小南龍翔
園田浩志郎
真嶋康成
森岡彦磨
安田美菜
2020
MEMBER 2020
有川真純
井田あぐり
伊藤みらの
岩井皓熙
大石修悟
大浦脩介
大隈莞名
奥田真矢
川口大空
木村天美
吉良琉汰
沓掛渚
児玉七菜美
佐藤洋祐
ジャング李音
高橋莉奈
谷口菜々子
玉木晴菜
名嘉はな
中村暁成
西元聖喜
野田悠斗
蓮子太蔵
林耕平
平島功晴
堀田七海
牧野友紀
宮崎あゆ
山崎耀大
山城英太郎
山路由依
山田晃大
山田美優
山元友敬
有馬優
石垣永樹
石原明
江口虹晴
國政愛里
小林未來
佐藤拓眞
志土地裕月
中林幹仁
二宮龍之輔
波多江七穂
林竜我
眞鍋翔太
水野里菜
森美咲
STAFF
井上貢一
井上友子
岩田敦之
釜堀文孝
北島己佐吉
渡邊雄二
OBOG
SESSION
専門科目一覧
ソーシャルデザイン応用演習
情報デザイン演習I
地域ブランド企画演習I
情報デザイン演習IIIA
情報デザイン演習IIIB
情報デザイン研究II
地域ブランド企画演習IIC
地域ブランド企画演習IID
地域ブランド企画演習IIIB
デザイン企画演習
視覚デザイン実習
視覚デザイン演習
卒業研究
教務ガイダンス
卒展2021
OpenCampus
RecommendedVideo
BasicKnowledge
PROJECT
LINKS
SEARCH
開始行:
*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…覗き見る
~
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明の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
//現状調査、現状の問題の洗い出し
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明の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...
(メモ)男の子の色、作画コストを考えると単色でもいいのか...
背景が青系統なので赤系の色で色をつけたら目立つ。
時計は2つめの方が個人的に好き。
~
#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...
2個目のリンクのような雰囲気のものを作成したい。
~
~
**2020.10,7
#image(rough.png,right,20%);
***面談
-現在考えている方向で良さそうなので続行
-ラフの作成
現在右上2つのような家の中で構想中。
[[高画質版>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…覗き見る
~
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明の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
//現状調査、現状の問題の洗い出し
現状できること・見れるもの
-男の子(以下6種をランダムで表示)
--部屋を歩き回る
--パソコンをする
--雑誌を読む
--ゲームをする
--スマホをする
--寝る(夜0時〜6時は固定で寝てる)
~
-クリック処理
--扉横のスイッチ(部屋の照明の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...
(メモ)男の子の色、作画コストを考えると単色でもいいのか...
背景が青系統なので赤系の色で色をつけたら目立つ。
時計は2つめの方が個人的に好き。
~
#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...
2個目のリンクのような雰囲気のものを作成したい。
~
~
**2020.10,7
#image(rough.png,right,20%);
***面談
-現在考えている方向で良さそうなので続行
-ラフの作成
現在右上2つのような家の中で構想中。
[[高画質版>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...
ページ名: