#author("2026-01-30T14:15:05+09:00","default:member","member") #author("2026-01-30T14:16:48+09:00","default:member","member") *MEMORIES COLLECTION テンプレートを使った映画の思い出オリジナルカードを作成できるサイト #image(情報デザイン研究三年後期.png) -堀玲二 -[[MEMORIES COLLECTION サイト>https://horire.github.io/MEMORIES-COLLECTION/]] //-[[MEMORIES COLLECTION プロトタイプ>https://www.figma.com/proto/p5JBql8twIhdpwzmcPNsRN/%E7%84%A1%E9%A1%8C?node-id=4-3&t=pzWSNBCdlvrId6GY-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=4%3A3]]// -movie tickets, collection, web site -[[前期研究ページ>堀玲二/情報デザイン研究I]] **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 映画鑑賞の思い出を記録し、コレクションできるオリジナルカード作成サイト //映画鑑賞を事例とした思い出を記録し、コレクションできるオリジナルカード作成サイト// ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 映画を観に行ったときにもらうチケットは、多くの場合映画鑑賞後に捨てられてしまう。思い出は次第に風化され、チケットが捨てられれば記憶を思い出すきっかけを失うことになる。本研究ではwebサイトを用いて映画鑑賞という思い出をテンプレートやユーザーが自ら選択した写真を使い思い出オリジナルカードを作成する。この方法で思い出を形に残し、「コレクション」として楽しめるようにすることで、記憶を呼び起こすきっかけを作り、感動をいつまでも忘れないようにする。 ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -思わずとっておきたくなるようにグラフィック要素を取り入れた上で統一感を持たせ、コレクション性を加える。 -既存のチケットに記入されている情報に追加して、グラフィック要素や感想記入欄を作ることにより、記憶を残しやすくする。 -ユーザーが使う写真をサイト上に自らアップロードできるようにすることでオリジナル性を持たせる。 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -前期 映画のチケットのテンプレートを４案×色違い４種 計１６種 映画の思い出オリジナルカードを作成できるサイトのプロトタイプ -後期 GitHubにて公開するWebサイト ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //堀玲二 ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; Adobe Illustrator VScode Procreate figma ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; ４月２９日〜１月１０日(通年) ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 中間まとめ -現在はサイト作成に使用するグラフィック素材と サイト機能を作成できている。 -今後はこの素材を使用し実際にプロトタイプ通りに形にしていく。 -サイト構築の過程でグラフィック修正の必要が出てくる可能性があるので、修正をする前提での日程調整をする必要がある。 ~ 全体まとめ -写真と文章という形での記録で、記憶への定着、思い出の思い出しやすさがより向上していることが予想できる。 -成果物であるサイトを使用することで、思い出や感動をいつまでも忘れないようにするという目標は達成できていると感じる。 -今回の研究での経験を活かし、今後もWebサイトを使用した課題解決の可能性を探っていきたいと思う。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ''人生で一番大切な仕事は「思い出づくり」'' __[[DIE WITH ZERO 人生が豊かになりすぎる究極のルール>https://ameblo.jp/moriyuri2023/entry-12812990128.html]]__ ''映画を観た後、チケットの半券を捨てている人の割合は53.9%'' __[[映画の半券を捨てるか捨てないかのアンケート記事>https://research-panel.jp/rpdr/view.php?eid=465157&aid=1968977#goog_rewarded]]__ ''映画のチケットを窓口で購入している人の割合は 63.5％'' __[[実践『ペルソナ』通信 (No.47)映画の半券の保存状況に関する調査結果>https://www.jissen.ac.jp/learning/human_sociology/research/persona/vpbrbb000000vx72-att/PersonaA_no47.pdf?utm_source=chatgpt.com]]__ ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; [[ピンタレストのボード>https://pin.it/2DimonZgX]] [[思い出きっぷ>https://design.kyusan-u.ac.jp/socialdesign/?cmd=read&page=%E5%90%89%E8%89%AF%E7%90%89%E6%B1%B0%2F%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6&word=%E6%80%9D%E3%81%84%E5%87%BA%E3%81%8D%E3%81%A3%E3%81%B7]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; [[デザインの心理学>https://321web.link/design-psychology/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[情報デザイン研究ガントチャート>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as027_st_kyusan-u_ac_jp/EdG0DX8bYmtNtW1p5X7NwPgBHFApWJiDb3S935L9DBh8wg?e=vrMMZy]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; %%チケットのデザイン案を計４案考える%% %%デザイン案をもとにチケット作成%% %%ジャンル別に使う色を考える%% %%サイトマップを考える%% %%ワイヤーフレームを考える%% %%サイトで使用する機能のリスト化%% ％％サイト内原稿の作成％％ %%サイトで使用する機能簡易作成%% ％％チケットデザイン案ブラッシュアップ％％ ％％コーディング％％ //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.12.08 ~ ''発表のフィードバック'' -チケットを作成するときの動線を一本にしてわかりやすく -言葉をもっと柔らかく -ユーザーが入力したデータは製作者側が取得することはないという記載をする ~ ~ **2025.12.01 ~ 発表用完成画像 |#image(original-example.jpg )| |#image(exampleImg.jpg)| ~ ~ ~ ''ユーザーが好きな画像をアップロードし'' ''その画像をキャンバス内に表示させる機能'' 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字 以内)'); }); ~ -inputタグについて コード例 <input type="file" accept="image/*"> type="file"を指定するとユーザーがファイルを指定できるようになる。 --type="file" ファイル選択ダイアログを表示する input --accept 選択できるファイルの種類（MIMEタイプや拡張子）を制限する属性 --image/* image 系の すべての画像タイプ を表すワイルドカード （* は「全部」という意味） つまり画像ファイル（JPEG / PNG / GIF / WebP / SVG など）だけを選択対象にする。 ~ -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値：false, 0, "", null, undefined, NaNなど）を判定する手法です。if (!value) のように論理否定演算子 ! を使い、値が「存在しない」または「空である」かを簡潔にチェックします。これは、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) => {} ~ ~ 自動改行機能解説 ① textInput7.addEventListener('input', () => { drawCanvas(textInput6.value || '作品タイトル',textInput7.value || '自由記述(300字以内)'); }); HTMLのテキストエリアにて入力した内容を取得しイベントを発生させる。テキストに記入された内容があればその内容をなければ「自由記述(300字以内」を文字列として渡す。この時NULLとして扱われずに、文字列として扱われる。 ② const maxCharsPerLine = 30; const drawCanvas = (title,free) => { const freeLines = wrapTextByChars(free || '', maxCharsPerLine); const freeLines = wrapTextByChars(free || '', maxCharsPerLine); } drawCanvas内にて関数wrapTextByCharsを呼び出す。この関数は自動改行機能の要となる関数。引数のfreeにはHTMLのテキストエリアにて入力した内容または代用文字列が渡される。 ③const wrapTextByChars = (text, maxChars = 30) => { const lines = []; const rawLines = String(text).split('\n'); rawLines.forEach(line => { for (let i = 0; i < line.length; i += maxChars) { lines.push(line.slice(i, i + maxChars)); } if (line.length === 0) lines.push(''); }); return lines; } 引数textには引数のfreeにはHTMLのテキストエリアにて入力した内容または代用文字列が入る。maxChars = 30はデフォルト引数。 const lines = [];で空の配列を用意。 const rawLines = String(text).split('\n'); stringは渡された値をそのまま文字列にする。渡されたものが文字数以外の時にエラーを防ぐ役割がある。split(‘\n’);は指定した文字列の中に（）内で指定した文字があればその位置で文字列を分割し配列に格納する機能を持つが今回の場合は指定した文字がないので、全体をそのまま意要素の配列として格納する。 rawLines.forEach(line => { for (let i = 0; i < line.length; i += maxChars) { lines.push(line.slice(i, i + maxChars)); } でsplit()で出来た配列から要素を分割して取り出し、push()で指定した配列の末尾に要素を追加する。今回はあらかじめ用意していた空配列に入れる。for文の条件チェックでは分割された残りの文字列の長さは見ていない。見ているのは元のline.lengthの長さ。 ④return lines;で配列の値を返す。 ⑤drawCanvas内にて戻り値の配列を一つずつ取り出して、座標をずらしてfillTextでキャンバス内に描画。 終了 ~ ~ **2025.11.17 ~ コーディング作業を進めました。 #image(toppage.jpg,center,40%) ~ ~ **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サイトを用いて映画鑑賞という思い出をテンプレートを使い思い出オリジナルカードを作成する。この方法で思い出を形に残し、「コレクション」として楽しめるようにすることで、記憶を呼び起こすきっかけを作り、感動をいつまでも忘れないようにする。 ~ -コンセプト 思わずとっておきたくなるようにグラフィック要素を取り入れた上で統一感を持たせ、コレクション性を加える。 既存のチケットに記入されている情報に追加して、グラフィック要素や感想記入欄を作ることにより、記憶を残しやすくする。 画像保存と現物保存の二つの中からユーザーに合うコ方法でコレクションを促し、思い出を振り返りやすくする。 ~ -調査 ''映画を観た後、チケットの半券を捨てている人の割合は53.9%'' __[[映画の半券を捨てるか捨てないかのアンケート記事>https://research-panel.jp/rpdr/view.php?eid=465157&aid=1968977#goog_rewarded]]__ ''映画のチケットを窓口で購入している人の割合は 63.5％'' __[[実践『ペルソナ』通信 (No.47)映画の半券の保存状況に関する調査結果>https://www.jissen.ac.jp/learning/human_sociology/research/persona/vpbrbb000000vx72-att/PersonaA_no47.pdf?utm_source=chatgpt.com]]__ ~ -中間発表までの成果物 --ウェーブ背景 ---[[ウェーブ背景GitHub>https://horire.github.io/wave/]] ---[[参考技術・技法>https://www.youtube.com/watch?v=MMNEEdGa5eE]] --スクロール表記の切り替え ---[[スクロール表記の切り替えGitHub>https://horire.github.io/TopOrScroll/]] --入力した文字を画像上に出力 ---[[入力した文字を画像上に出力GitHub>https://horire.github.io/img_display/]] --画像ダウンロード機能 ---[[画像ダウンロード機能GitHub>https://horire.github.io/download/]] --文字出力と画像ダウンロード ---[[文字出力と画像ダウンロードGitHub>https://horire.github.io/downloadAndDisplay/]] --ローディング画面 ---[[ローディング画面GitHub>https://horire.github.io/loading/]] --スライダー ---[[参考技術・技法>https://www.youtube.com/watch?v=29jbN6cYDCM&t=866s]] ---[[スライダーGitHub>https://horire.github.io/slider/]] --文字数チェッカー ---[[文字数チェッカーGitHub>https://horire.github.io/count/]] --フェードインアニメーション ---[[アニメーションGitHub>https://horire.github.io/animation/]] --チェックボックス ---[[チェックボックスGitHub>https://horire.github.io/check/]] ~ -まとめ（現状と今後） 現在はサイト作成に使用するグラフィック素材と サイト機能を作成できている。 今後はこの素材を使用し実際にプロトタイプ通りに形にしていく。 サイト構築の過程でグラフィック修正の必要が出てくる可能性があるので、修正をする前提での日程調整をする必要がある。 ~ ~ **2025.09.29 ~ ***機能お試し作成 -ウェーブ背景 --[[ウェーブ背景GitHub>https://horire.github.io/wave/]] --[[参考技術・技法>https://www.youtube.com/watch?v=MMNEEdGa5eE]] -スクロール表記の切り替え --[[スクロール表記の切り替えGitHub>https://horire.github.io/TopOrScroll/]] -入力した文字を画像上に出力 --[[入力した文字を画像上に出力GitHub>https://horire.github.io/img_display/]] -画像ダウンロード機能 --[[画像ダウンロード機能GitHub>https://horire.github.io/download/]] -文字出力と画像ダウンロード --[[文字出力と画像ダウンロードGitHub>https://horire.github.io/downloadAndDisplay/]] ~ ***サイトで使用する機能のリスト化 -%%ローディング画面%% -%%フェードインアニメーション%% -%%ウェーブ背景%% -ハンバーガーボタン -%%スライダー%% -%%文字数チェッカー%% -%%スクロール表記の切り替え%% -%%入力した文字を画像上に出力%% -%%画像ダウンロード%% ~ ***Webサイトアニメーション理由 この記事では便宜的に、サイトを閲覧しているユーザーを「閲覧者」、サイトで情報を発信・運用している管理者を「発信者」とします。 -閲覧者の視線を誘導する -閲覧者の操作で画面内の要素に変化が起きたときに、 何が起きているかを通知する -UIもしくはWebサイト全体の使用感を向上させる -発信者が表現したい世界観・雰囲気を演出する __[[参考サイト>https://note.com/unshift/n/ne474ac3e9092]]__ ~ ***インプット技術 -onload 使用例 対象の要素.onload = () => {}; img.onload = () => {}; onload は 読み込み完了時に自動で実行されるイベント 画像なら「画像が表示できる状態になったとき」に呼ばれる ページ全体では「ページ内のすべてのリソースが揃ったとき」に呼ばれる 画像をキャンバスに描画するときは、onload を使って画像の準備完了後に描画するのが必須 -canvas 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' が保存されるファイル名になります。 --click() 使用例 対象要素.click() →（）の中には関数を入れるパターンと入れないパターンがある。 関数を入れると対象要素がクリックされた時に関数を実行する。 関数を記入していないと対象要素がクリックされた時と同じ動作を実行させることができる。自動でボタンをクリックできる。この時マウスオーバーなどは起こらない。 - || (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 ~ ***機能お試し作成 -ローディング画面 --[[ローディング画面GitHub>https://horire.github.io/loading/]] -スライダー --[[参考技術・技法>https://www.youtube.com/watch?v=29jbN6cYDCM&t=866s]] --[[スライダーGitHub>https://horire.github.io/slider/]] -文字数チェッカー --[[文字数チェッカーGitHub>https://horire.github.io/count/]] -フェードインアニメーション --[[アニメーションGitHub>https://horire.github.io/animation/]] -チェックボックス --[[チェックボックスGitHub>https://horire.github.io/check/]] **2025.09.15 ~ ***サイトで使用する機能のリスト化 -ローディング画面 -フェードインアニメーション -ウェーブ背景 -ハンバーガーボタン -スライダー -文字数チェッカー -スクロール表記の切り替え -入力した文字を画像上に出力 -画像ダウンロード いきなりサイトを作り始めるのではなく機能のみの作成から始める。 入力した文字を画像上に出力が時間がかかる見込みなので、それ以外 の機能から作成を開始する。 ~ ***研究進行について -ガントチャートの作成 -ToDoリストの作成 ~ ~