MEMORIES COLLECTION
テンプレートを使った映画の思い出オリジナルカードを作成できるサイト
- movie tickets, collection, web site
- 前期研究ページ
概要
これは何？
映画鑑賞の思い出を記録し、コレクションできるオリジナルカード作成サイト
背景と目的
映画を観に行ったときにもらうチケットは、多くの場合映画鑑賞後に捨てられてしまう。思い出は次第に風化され、チケットが捨てられれば記憶を思い出すきっかけを失うことになる。本研究ではwebサイトを用いて映画鑑賞という思い出をテンプレートを使い思い出オリジナルカードを作成する。この方法で思い出を形に残し、「コレクション」として楽しめるようにすることで、記憶を呼び起こすきっかけを作り、感動をいつまでも忘れないようにする。
コンセプト
- 思わずとっておきたくなるようにグラフィック要素を取り入れた上で統一感を持たせ、コレクション性を加える。
- 既存のチケットに記入されている情報に追加して、グラフィック要素や感想記入欄を作ることにより、記憶を残しやすくする。
- 画像保存と現物保存の二つの中からユーザーに合うコ方法でコレクションを促し、思い出を振り返りやすくする。
成果物の仕様
- 前期
映画のチケットのテンプレートを４案×色違い４種 計１６種
映画の思い出オリジナルカードを作成できるサイトのプロトタイプ
制作ツール
Adobe Illustrator
VScode
Procreate
figma
プロジェクトの期間
４月２９日〜１月１０日(通年)
まとめ
中間まとめ
- 現在はサイト作成に使用するグラフィック素材と
サイト機能を作成できている。
- 今後はこの素材を使用し実際にプロトタイプ通りに形にしていく。
- サイト構築の過程でグラフィック修正の必要が出てくる可能性があるので、修正をする前提での日程調整をする必要がある。
調査
現状調査
人生で一番大切な仕事は「思い出づくり」
DIE WITH ZERO 人生が豊かになりすぎる究極のルール
映画を観た後、チケットの半券を捨てている人の割合は53.9%
映画の半券を捨てるか捨てないかのアンケート記事
映画のチケットを窓口で購入している人の割合は 63.5％
実践『ペルソナ』通信 (No.47)映画の半券の保存状況に関する調査結果
先行事例
ピンタレストのボード
思い出きっぷ
技法・技術情報
デザインの心理学
プロジェクト管理
スケジュール
情報デザイン研究ガントチャート
ToDo
チケットのデザイン案を計４案考える
デザイン案をもとにチケット作成
ジャンル別に使う色を考える
サイトマップを考える
ワイヤーフレームを考える
サイトで使用する機能のリスト化
サイト内原稿の作成
サイトで使用する機能簡易作成
チケットデザイン案ブラッシュアップ
コーディング
進捗記録
2025.12.01
ユーザーが好きな画像をアップロードし
その画像をキャンバス内に表示させる機能
javascriptコード例
const canvas = document.querySelector("#myCanvas");
const ctx = canvas.getContext("2d");
const imageUpload = document.querySelector('#imageUpload');
let userImage = null;
const img = new Image();
imageUpload.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
img.src = reader.result;
img.onload = () => {
drawCanvas(textInput6.value || '作品タイトル',textInput7.value || '自由記述(40字以内)'); // ← 画像ロード完了後に描画
};
};
reader.readAsDataURL(file);
});
textInput6.addEventListener('input', () => {
drawCanvas(textInput6.value || '作品タイトル',textInput7.value || '自由記述(40字 以内)');
});
textInput7.addEventListener('input', () => {
drawCanvas(textInput6.value || '作品タイトル',textInput7.value || '自由記述(40字 以内)');
});
- files[0]
- input type="file" 要素に対してブラウザが提供する
標準のDOMプロパティです。
- <input type="file" id="imageUpload">
- このような file input でユーザーが画像を選ぶと、
JavaScript 選択した画像が配列のようなオブジェクトに格納される。
- 選択した画像を使用したいときはinput要素とfilesを.で繋ぐ
（例）const file = e.target.files[0];
- FileReaderについて
ユーザーが選択したローカルファイルを、読み取り、
JavaScriptやCanvasで使える形式に変換するための
機能。
使い方
- ①FileReaderを作る
②読み終わった後の処理を定義
③読み込み開始
コード例
const reader = new FileReader();
reader.onload = () => {
img.src = reader.result;
};
reader.readAsDataURL(file);
①const reader = new FileReader();
- ユーザーのPC・スマホにあるローカルファイルを、
JavaScript で扱える形に変換するブラウザのセキュリティ上、<img src="C:/Users/xxxx/photo.png">
こういう直接アクセスは禁止されている。
そのため FileReader を使います。
new FileReader();は読み取り機
②reader.onload = () => {
img.src = reader.result;
};
reader.result は、**FileReader がファイルの読み取りを終えたときに格納する「読み取り結果」**を保持するプロパティです。
読み方（readAsDataURL / readAsText / readAsArrayBuffer）によって中身の型や形式が変わります。
③reader.readAsDataURL(file);
- ユーザーが選んだファイル（画像など）を Data URL に変換するためのメソッド
指定対象は「<input type="file"> から取得したファイル」
- img.src は URL文字列しか受け取れないため「DataURL としてファイルを読み込む」ためのFileReader のメソッド
toDataURL()との違い
- toDataURL()はCanvas に描かれている「見た目の結果」を Data URL に変換します。指定対象は<canvas> 要素
キャンバス内に画像表示をする際の画像中央での自動切り取り機能
コード例
const drawCanvas = () => {
const canvasW = canvas.width;
const canvasH = canvas.height;
const imgW = img.width;
const imgH = img.height;
// canvasを覆うための拡大率（cover）
const scale = Math.max(canvasW / imgW, canvasH / imgH);
const drawW = imgW * scale;
const drawH = imgH * scale;
// 中央配置
const dx = (canvasW - drawW) / 2;
const dy = (canvasH - drawH) / 2;
ctx.clearRect(0, 0, canvasW, canvasH);
ctx.drawImage(img, dx, dy, drawW, drawH);
ctx.fillStyle = `rgba(0, 0, 0, 0.4)`;
ctx.fillRect(0, 0, canvas.width, canvas.height)}
解説
const scale = Math.max(canvasW / imgW, canvasH / imgH);
ここでやっていること
- 1横方向に合わせるための倍率
canvasW / imgW
- 2縦方向に合わせるための倍率
canvasH / imgH
- 小さい倍率だとどちらか一方がキャンバスに届かず、余白が出るためその2つのうち、大きい方を選ぶ
Math.max(...)
const drawW = imgW * scale;
const drawH = imgH * scale;
何をしているか
- 元の画像サイズに 同じ倍率（scale） をかけています。
横幅 → imgW * scale
高さ → imgH * scale
同じ倍率なので
縦横比は絶対に崩れません
const dx = (canvasW - drawW) / 2;
const dy = (canvasH - drawH) / 2;
何をしているか
- はみ出した画像をキャンバスの中央に配置するための座標計算
- 左右・上下の切り取り量を均等にする
ctx.drawImage(img, dx, dy, drawW, drawH);
におけるdx、dyは画像を描き始める X座標とY座標
(canvasW - drawW)と(canvasH - drawH)ではみ出した分を割る２で均等にはみ出して画像を配置する。
実際に画像を切り取っているのではなくCanvas の「キャンバス外に描かれたものは表示されない」という特性を利用して、画像を左右・上下に均等にはみ出す位置に配置している。
2025.11.24
キャンバス内の文章自動改行機能
インプット知識
- falsyチェック
- プログラミング言語で、偽とみなされる値（falsyな値）を判定する処理のことです。これは、if文などの条件式で、真偽値ではない値が自動的に真偽値に変換され、偽として扱われることを利用しています。
(例) if (!text) { return [''] };
- String()
- 関数は、渡された引数を文字列に変換する。
"ABC" → "ABC"（そのまま）
123 → "123"（文字列になる）
(例) const rawLines = String(text).split('\n');
- .split()
- 文字列を特定の区切り文字で分割し、配列にする」
という JavaScript のメソッド。()内に特定の区切り文字を指定する。
文字列の中に指定した区切り文字がなければ全体をそのまま 1 要素の配列にする。
(例) const rawLines = String(text).split('\n');
- push()
- 配列の末尾に要素を追加するメソッドです。
(例) const arr = [];
arr.push("hello");
console.log(arr); // ["hello"]
- slice(start, end)
- start から end の直前までの文字列を取り出す（end は含まない）
(例) "abcdef".slice(2, 5) // "cde"
- 戻り値について
- 戻り値: 関数が処理を行った結果を呼び出し元に返す場合があります。この結果は「戻り値」と呼ばれ、return文を使って返されます。
「呼び出し元」とは、特定の関数やメソッドを実行する部分のこと。
呼び出される関数が「呼び出し先」となる。
returnについて
- 「return」を使うと、関数内で処理をした結果を呼び出し元に「戻り値」として返すことができます。これはどういうことかと言うと関数は「return」を使わずに処理を行ったらそのまま終了となる。
しかし「return」を使うことで処理を行った結果の値を返せるので、その値を使ってさらに別の処理を続けることが出来る。
書き方
【 return 値・式・関数など 】のようにreturnのあとに続けてさまざまな値や式などを記述します。
「return」は関数内に記述するので、上記のように何らかの処理を行った結果を返すのが一般的です。ただし、returnが実行されるとそれ以降の処理は実行されずに中断するので注意が必要。
(例) return lines;
- Math.round()
- JavaScript の標準組み込みオブジェクト Math（数学用ツール箱）のメソッドで、
引数の数値を四捨五入して整数にする。Canvas の fillText で文字を描画する時、「行のY位置が小数だと少しにじみやすい」という仕様がある。なので、行間は 整数(px) にするほうがキレイ。
(例) const lineHeight = Math.round(10 * 1.3);
- デフォルト引数
- デフォルト引数とは、関数やメソッドの定義時に引数に初期値を設定する機能です。関数を呼び出す際に引数が省略された場合、その設定されたデフォルト値が自動的に使われます。これにより、引数を省略して関数を呼び出すことが可能になります。引数名の後ろに = デフォルト値を書く。
(例) const wrapTextByChars = (text, maxChars = 20) => {}
2025.11.17
コーディング作業を進めました。
2025.10.27
技術
- innerHTML
- innerHTMLとは、JavaScriptのプロパティで、HTML要素の中身（子要素やテキスト）を取得・変更するために使用されます。
- .filter() の仕組み（中の動き）
コード例
＊productsは配列の中にオブジェクトが収納されている要素だとする。
const cheapProducts = products.filter(p => p.price <= 2000);
filter(p => p.price <= 2000);の部分は次の書き方と同じ意味
function(p) {
return p.price <= 2000;
}
pには配列の各要素が代入される。
- products の中身を順番に取り出す
- 各商品について、p.price <= 2000 を評価
- 条件が true → 新しい配列に「残す」
- 条件が false → 「除外」
- 条件を満たす要素だけをまとめて 新しい配列 として返す
2025.10.20
コーディング作業
2025.10.13
発表フィードバック
- ユーザーの好きな画像を使えるようになれば良いのではないか
- ユーザーがこのサイトを使用する意味を作る必要がある
- グラフィックのブラッシュアップ
2025.10.06
発表準備
- 背景と目的
映画を観に行ったときにもらうチケットは、多くの場合映画鑑賞後に捨てられてしまう。思い出は次第に風化され、チケットが捨てられれば記憶を思い出すきっかけを失うことになる。本研究ではwebサイトを用いて映画鑑賞という思い出をテンプレートを使い思い出オリジナルカードを作成する。この方法で思い出を形に残し、「コレクション」として楽しめるようにすることで、記憶を呼び起こすきっかけを作り、感動をいつまでも忘れないようにする。
- コンセプト
思わずとっておきたくなるようにグラフィック要素を取り入れた上で統一感を持たせ、コレクション性を加える。
既存のチケットに記入されている情報に追加して、グラフィック要素や感想記入欄を作ることにより、記憶を残しやすくする。
画像保存と現物保存の二つの中からユーザーに合うコ方法でコレクションを促し、思い出を振り返りやすくする。
- 中間発表までの成果物
- ウェーブ背景
- スクロール表記の切り替え
- 入力した文字を画像上に出力
- 画像ダウンロード機能
- 文字出力と画像ダウンロード
- ローディング画面
- スライダー
- 文字数チェッカー
- フェードインアニメーション
- チェックボックス
- まとめ（現状と今後）
現在はサイト作成に使用するグラフィック素材と
サイト機能を作成できている。
今後はこの素材を使用し実際にプロトタイプ通りに形にしていく。
サイト構築の過程でグラフィック修正の必要が出てくる可能性があるので、修正をする前提での日程調整をする必要がある。
2025.09.29
機能お試し作成
- ウェーブ背景
- スクロール表記の切り替え
- 入力した文字を画像上に出力
- 画像ダウンロード機能
- 文字出力と画像ダウンロード
サイトで使用する機能のリスト化
ローディング画面フェードインアニメーションウェーブ背景- ハンバーガーボタン
スライダー文字数チェッカースクロール表記の切り替え入力した文字を画像上に出力画像ダウンロード
Webサイトアニメーション理由
この記事では便宜的に、サイトを閲覧しているユーザーを「閲覧者」、サイトで情報を発信・運用している管理者を「発信者」とします。
- 閲覧者の視線を誘導する
- 閲覧者の操作で画面内の要素に変化が起きたときに、
何が起きているかを通知する
- UIもしくはWebサイト全体の使用感を向上させる
- 発信者が表現したい世界観・雰囲気を演出する
参考サイト
インプット技術
- onload
使用例 対象の要素.onload = () => {}; img.onload = () => {};
onload は 読み込み完了時に自動で実行されるイベント
画像なら「画像が表示できる状態になったとき」に呼ばれる
ページ全体では「ページ内のすべてのリソースが揃ったとき」に呼ばれる
画像をキャンバスに描画するときは、onload を使って画像の準備完了後に描画するのが必須
JavaScriptと合わせて使用するhtmlタグ
- new Image();
- 使用例 const img = new Image();
img には 空の画像オブジェクト が作られます。
作った直後はまだ画像データは入っていません。
- src にファイルのURLをセットすると、ブラウザがその画像をダウンロードし始めます。
記入例 img.src = 'images/dummy.png';
new Image() は「キャンバスに描画するための画像の入れ物を作っている」と考えるとわかりやすいです。
- new Image()
JavaScript内で画像を扱うためのオブジェクト
DOMには追加されない（見えない）
キャンバスなどに描画するために使う
- <img>タグ
HTMLのページに直接画像を表示するための要素
DOM（HTMLツリー）に追加される
ページにそのまま表示される
- まとめ
new Image() は JavaScriptで画像オブジェクトを作るコンストラクタ
作っただけでは何も表示されない
src を設定すると画像を読み込み始める
主にキャンバス描画や画像の加工など、HTMLに直接表示しないときに使う
- fillText
- fillText は キャンバスに文字を書き込むためのメソッド 。
ここでは ctx（2Dコンテキスト）を使って指定した座標に文字を描画している。
使用例 ctx.fillText(文字列, x座標, y座標 [, 最大幅]);
第1引数：描画するテキストの内容
第2引数：テキストの開始位置の x 座標（横方向の位置）
第3引数：テキストの開始位置の y 座標（縦方向の位置）
第4引数（省略可）：最大幅（指定した幅を超えると文字が縮小されて収まる）
- getContext 使用例 const ctx = canvas.getContext('2d');
→ 2D 描画を行うための「ペン」を取得。
ctx.fillStyle は「これから塗る色」を指定するプロパティ。
描画命令（fillRect や fillText など）を呼ぶ瞬間の色が反映される。
だから複数回設定すれば、そのたびに違う色で描ける。
- キャンバス内に描画する文字の設定や場所について
描画ツールの設定” にすぎません。
変更しても、すでに描いたものの色や場所は変わりません。
（紙に書いた絵の色はペンを持ち替えても変わらないのと同じ）
描画するたびに、その時点で設定されている設定が使われます。
- fillRect()
fillRect() は Canvas に「塗りつぶした四角形」を描くための命令です。
今回のような オーバーレイ（暗くする処理） で非常によく使われます。
使用例 ctx.fillRect(x, y, width, height);
各項目に以下の要素を記入する。
x 左上のX座標
y 左上のY座標
width 四角形の横幅
height 四角形の高さ
- toDataURL 使用例 lcanvas.toDataURL("image/png")
Canvas の描画内容を PNG画像のデータURL（例："data:image/png;base64,..." という文字列）に変換します。
- ()の中身について
toDataURL() のデフォルト指定は PNG
指定を書かなくてもPNG指定になる
だから "image/png" だけ書けば十分
それ以外の形式にしたいときだけ別の指定が必要
PNG は劣化しないので多くの用途で最適
- createElement 使用例 ldocument.createElement('a')
→ 新しく <a>（リンク要素）を作ります（HTMLにはまだ表示されません）。
- href 使用例 llink.href = dataURL;
→ このリンク先を、さきほど作った 画像データURL に設定します。
→ 普通はリンク先にWebページのURLを書きますが、ここでは画像データを直接指定しています。
link.href = dataURL; は、
link（新しく作った <a> タグ）の
href 属性（リンク先） に
Canvasを画像化したデータURL を代入している
という意味です。
これによって、クリックしたときにサーバーからではなく その場で作ったCanvas画像をリンク先として開いたりダウンロードできる ようになるのです。
- download 使用例 link.download = 'canvas_image.png';
→ リンクをクリックしたときに表示ではなく ダウンロードされるようにする属性 です。
→ 'canvas_image.png' が保存されるファイル名になります。
- || (OR または)
- 二つの条件のうち、どちらか一つだけ満たす条件をOR条件といい、
「｜（バーティカルバー）」記号を条件式の間に二つ続けて書く。
- DOMContentLoaded
- DOMContentLoaded
HTML(DOM)解析が終わった直後（画像の読み込みはまだ）
- load
画像を含めてすべての読み込み完了後
- DOMだけが必要？ → DOMContentLoaded
画像やCSSのロード完了が必要？ → load
- loadイベントだとwindow.addEventListener
DOMContentLoadedイベントだとdocument.addEventListener
と記述される。windowとdocumentの部分が違っている。
これはそれぞれのイベントがwindowオブジェクトとdocumentオブジェクトに対して動作しているから。
- inset: 0;
- inset: 0; は、position: absolute; や position: fixed; などのpositionプロパティが指定されている要素に対して有効です。
しかし、imgタグにはデフォルトでposition: static;が適用されているため、inset: 0;だけでは画像の大きさや位置は変わりません。
- position relative とposition absolute
- position: absolute; は、一番近い position: relative; などが指定された親要素を基準に配置されます。
もし親要素に position: relative; が指定されていなければ、body（またはhtml）全体を基準に絶対配置されます。
- css background
- CSSにおける「background」プロパティは、要素の背景に関する複数のスタイ(背景色、背景画像、サイズ、位置、繰り返しなど)を一度にまとめて指定するためのショートハンドプロパティです。個別のプロパティ(background-colorやbackground-imageなど)をすべて指定する代わりに、backgroundプロパティを使えば簡潔に記述できます。
- css animation
- リニア（linear）： 等速で変化する。のっぺりとした安定した印象。
- イーズイン（ease-in）： 徐々に加速する。加速するような勢いのある印象。
- イーズアウト（ease-out）： 徐々に減速する。
変化の余韻が残りやすい印象。
- イーズインアウト（ease-in-out）： 加速してから減速。
2025.09.22
機能お試し作成
- ローディング画面
- スライダー
- 文字数チェッカー
- フェードインアニメーション
- チェックボックス
2025.09.15
サイトで使用する機能のリスト化
- ローディング画面
- フェードインアニメーション
- ウェーブ背景
- ハンバーガーボタン
- スライダー
- 文字数チェッカー
- スクロール表記の切り替え
- 入力した文字を画像上に出力
- 画像ダウンロード
いきなりサイトを作り始めるのではなく機能のみの作成から始める。
入力した文字を画像上に出力が時間がかかる見込みなので、それ以外
の機能から作成を開始する。
研究進行について
