LogoMark.png

長岡茉理奈/情報デザイン研究II のバックアップの現在との差分(No.0)


#author("2021-12-15T14:34:52+09:00","default:member","member")
*Photoframe
写真にフレームをつけるサイト

~
#image(main.jpeg,70%)

~


-''nagaoka marina''
-'''Keywords:photo,decoration,everyday, ・・・'''
-https://marina-nagaoka1.github.io/photo_9/

~


**概要
***これは何?
//&color(red){これは何か・・を簡潔に};
好きな写真やイラストなどにフレームをつけたりデコレーションすることのできるサイト
~

***背景と目的
//&color(red){プロジェクトの背景と目的};
SNSが普及してInstagramやTwitterを利用して、写真など情報の共有をすることが当たり前になりました。写真を撮ってSNSなどにあげる際、なんだかこのままでは味気ないなと感じることがあり、
簡単にデコレーションができるようなサイトがあれば便利で使いやすいと考えたから。
~

***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
フレームを気軽に使える。
~

***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
Webサイト

https://marina-nagaoka1.github.io/photo_9/

~

//***メンバー
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};
~

***制作ツール
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-Github
--JavaScript
--CSS
-Atom
-ibisPaint X
-Procreate

~

***プロジェクトの期間
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
3年後期

~

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

-今までのWebサイトを作る授業の中では学んでこなかった領域を自主的に調べ、学ぶことが出来て勉強になりました。今後の制作にも役立てていきたいです。

-写真をサイトに表示することはすぐに出来たが、canvas内に表示することが出来なかった。document.getElementByIdを使うとcanvas内に表示することができるようになりました。

-写真を選択してサイトにあげ、フレームを重ねることは出来た。しかし消すボタンをクリックすると、アップロードした写真まで消えてしまうので改善する必要がある。



~
~


**調査

***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
SNSが普及して当たり前の存在になった現代、InstagramやTwitterなどで情報を発信することが手軽にできるものとなった。
SNSでは画像を拡散するために、編集して投稿するのだが、現状画像編集して、フレームをつけることが出来るものはアプリをインストールして使用するものが多い。
~

***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};

-[[LINEカメラ>http://camera.line.me/ja]]
自分で撮影した写真や好きな画像に、フレームをつけたりスタンプを貼ることが出来る。
現状、フレームの種類や普段使い出来そうなものが少ないと感じた。

-[[SNOW>https://apps.apple.com/jp/app/snow-%E3%82%B9%E3%83%8E%E3%83%BC/id1022267439]]
カメラアプリであるが編集をすることができ、フィルターをかけたり顔認識しての加工もできる

-[[Picsart>https://apps.apple.com/jp/app/picsart-%E5%86%99%E7%9C%9F-%E5%8B%95%E7%94%BB%E7%B7%A8%E9%9B%86%E3%82%A2%E3%83%97%E3%83%AA/id587366035]]
写真や動画の加工で出来ることが多い。自由に切り抜いたり、コピースタンプを使うこともでき、多様なエフェクトも使用できる。
アプリをインストールして、会員登録する必要がある。

//【2021年度版】SNSの年代別、利用数・利用率や目的を徹底比較!
//https://grove.tokyo/media/g0113/~

***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
https://blog.ver001.com/javascript_preview_canvas/

https://qiita.com/No_LINE/items/d3a9dada9f98a7819693

https://blog.katsubemakito.net/html5/canvas-concat

~
~

**プロジェクト管理

***スケジュール

-[[スケジュール>https://ksumail-my.sharepoint.com/:x:/g/personal/k19as021_st_kyusan-u_ac_jp/EfbiayRtXnFDpbzLZ282UxoBvJpxziQ3RvgQZj7Ap6Ndwg?e=QJIT6e]]

//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
//-ロゴ制作
//-タイトル
//-サイト
//-サイト全体の色を明るくする。
//-色をまとめる
//-フレームを並べる
//-フレームを選んで写真に重ねることが出来るようにする
//-実際にサイトを使ってできたものを印刷する。
//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};

~
~

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

**2021.12.15

https://marina-nagaoka1.github.io/photo_9/

**2021.12.08
***試作

https://marina-nagaoka1.github.io/photo_7/


**2021.12.01
https://marina-nagaoka1.github.io/btn_sample_3/
-ボタンをクリックしてcanvasに画像を表示できるようになったのでこれを応用する
-フレームを消せるボタンをつける

https://marina-nagaoka1.github.io/photo_6/
-ボタンをクリックする前からフレームが想定していないところに出る
-ボタンが反応しない

**2021.11.24
***試作
ボタンに画像を入れたサンプル
https://marina-nagaoka1.github.io/btn_sample_2/
応用してcanvas上に画像を表示できるようにする

~

**2021.11.17
***試作
onclickを使ってボタンをクリックすると
画像が切り替わるようにしたサンプル
https://marina-nagaoka1.github.io/btn_sample_1/


~


**2021.11.10
***試作
https://marina-nagaoka1.github.io/photo_5/

canvasに選択した写真を描写する事ができた。
フレームのonloadの実行が上手くいかず、ボタンに画像が表示されない、押してもcanvasにフレームが描写されない点を改善させていく。
~
https://marina-nagaoka1.github.io/photo_4/

https://marina-nagaoka1.github.io/photo_3/


**2021.10.27
***試作
https://marina-nagaoka1.github.io/photo_2/
JavaScriptのFileAPIで画像のプレビューを表示し、
canvasに描写させることによって画像加工を可能にした。
選択した画像を実際に表示することに時間がかかりすぎて、
デザインまで手が回らなかった。
今後はcssのデザインと、フレームを選べるようにして並べていくことが課題。


**2021.10.20
***試作
フレーム案の作成
-[[スケッチ1>https://drive.google.com/file/d/1kZJrP6GfdDwaaUddbzUUSYWYVybqWI68/view?usp=drivesdk]]
-[[スケッチ2>https://drive.google.com/file/d/1j5ZCwkmDHySgm_olZyjTQ9249Pwo4RUQ/view?usp=drivesdk]]
日常的に使えるものからユニークなものまで揃えていきたいと考えて、作成していく。


**2021.10.13
***試作
https://marina-nagaoka1.github.io/photo_1/
dropzoneを使ってファイルを選択できるようにした。
-[[スケッチ>https://drive.google.com/file/d/1RDk8wGl7T-gsE5g1bEQH11bCPEVIZiW6/view?usp=drivesdk]]

**2021.10.06
***調査
-LINEカメラ
//http://camera.line.me/ja
自分で撮影した写真や好きな画像に、フレームをつけたりスタンプを貼ることが出来る。
現状、フレームの種類や普段使い出来そうなものが少ないと感じた。
#image(line_sample.jpg,28%)


~
***企画の方向性
-写真にフレームなどをつけ、より魅力的にできるようなサイト
-アプリなどをインストールしなくてもブラウザ上で簡単に使えるようにしたい。
~
~

**2021.09.22
***概要
-自分の好きな写真にフレームをつけたりできるサイト
-サイトを使った人が写真をあげて、最終的に画像として保存できるようにしたい
~
***
-
-
~
~

**2021.09.15
***概要
-Web、イラスト、
-フォトフレーム


//**20XX.XX.XX
//***XXXXXX
//-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
//-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
~
//***XXX
//-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
//-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
~
~

~