堀玲二/情報デザイン研究II をテンプレートにして作成

開始行:
*MEMORIES COLLECTION テンプレートを使った映画の思い出オリジナルカードを作成で... #image(情報デザイン研究三年後期.png) -堀玲二 -[[MEMORIES COLLECTION　サイト>https://horire.github.io/M... -[[MEMORIES COLLECTION　プロトタイプ>https://www.figma.co... -movie tickets, collection, web site -[[前期研究ページ>堀玲二/情報デザイン研究I]] **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 映画鑑賞の思い出を記録し、コレクションできるオリジナルカ... //映画鑑賞を事例とした思い出を記録し、コレクションできる... ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 映画を観に行ったときにもらうチケットは、多くの場合映画鑑... ~ ***コンセプト //&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){プロジェクトが完結したら「まとめ」を記載し... 中間まとめ -現在はサイト作成に使用するグラフィック素材と サイト機能を作成できている。 -今後はこの素材を使用し実際にプロトタイプ通りに形にしてい... -サイト構築の過程でグラフィック修正の必要が出てくる可能性... ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問... ''人生で一番大切な仕事は「思い出づくり」'' __[[DIE WITH ZERO 人生が豊かになりすぎる究極のルール>http... ''映画を観た後、チケットの半券を捨てている人の割合は53.9%'' __[[映画の半券を捨てるか捨てないかのアンケート記事>https:... ''映画のチケットを窓口で購入している人の割合は 63.5％'' __[[実践『ペルソナ』通信 (No.47)映画の半券の保存状況に関... ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹... [[ピンタレストのボード>https://pin.it/2DimonZgX]] [[思い出きっぷ>https://design.kyusan-u.ac.jp/socialdesign... ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関す... [[デザインの心理学>https://321web.link/design-psychology/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成して... [[情報デザイン研究ガントチャート>https://ksumail-my... ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... %%チケットのデザイン案を計４案考える%% %%デザイン案をもとにチケット作成%% %%ジャンル別に使う色を考える%% %%サイトマップを考える%% %%ワイヤーフレームを考える%% %%サイトで使用する機能のリスト化%% サイト内原稿の作成 %%サイトで使用する機能簡易作成%% チケットデザイン案ブラッシュアップ コーディング //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしな... //&color(red){例：10人以上の会議には出ない。苦手なことは... ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **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 || '作品タイトル'... }; }; reader.readAsDataURL(file); }); textInput6.addEventListener('input', () => { drawCanvas(textInput6.value || '作品タイトル',textInp... }); textInput7.addEventListener('input', () => { drawCanvas(textInput6.value || '作品タイトル',textInp... }); ''キャンバス内に画像表示をする際の画像中央での自動切り取... コード例 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 --小さい倍率だとどちらか一方がキャンバスに届かず、余白が... 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 (!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 lines; -Math.round() --JavaScript の標準組み込みオブジェクト Math（数学用ツー... 引数の数値を四捨五入して整数にする。Canvas の fillText で... (例)　const lineHeight = Math.round(10 * 1.3); -デフォルト引数 --デフォルト引数とは、関数やメソッドの定義時に引数に初期... (例)　const wrapTextByChars = (text, maxChars = 20) => {} ~ ~ **2025.11.17 ~ コーディング作業を進めました。 #image(toppage.jpg,center,40%) ~ ~ **2025.10.27 ~ 技術 -innerHTML --innerHTMLとは、JavaScriptのプロパティで、HTML要素の中身... -.filter() の仕組み（中の動き） コード例 ＊productsは配列の中にオブジェクトが収納されている要素だ... const cheapProducts = products.filter(p => p.price <= 200... 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 ~ ''発表準備'' -背景と目的 映画を観に行ったときにもらうチケットは、多くの場合映画鑑... ~ -コンセプト 思わずとっておきたくなるようにグラフィック要素を取り入れ... 既存のチケットに記入されている情報に追加して、グラフィッ... 画像保存と現物保存の二つの中からユーザーに合うコ方法でコ... ~ -調査 ''映画を観た後、チケットの半券を捨てている人の割合は53.9%'' __[[映画の半券を捨てるか捨てないかのアンケート記事>https:... ''映画のチケットを窓口で購入している人の割合は 63.5％'' __[[実践『ペルソナ』通信 (No.47)映画の半券の保存状況に関... ~ -中間発表までの成果物 --ウェーブ背景 ---[[ウェーブ背景GitHub>https://horire.github.io/wave/]] ---[[参考技術・技法>https://www.youtube.com/watch?v=MMNEE... --スクロール表記の切り替え ---[[スクロール表記の切り替えGitHub>https://horire.github... --入力した文字を画像上に出力 ---[[入力した文字を画像上に出力GitHub>https://horire.gith... --画像ダウンロード機能 ---[[画像ダウンロード機能GitHub>https://horire.github.io/... --文字出力と画像ダウンロード ---[[文字出力と画像ダウンロードGitHub>https://horire.gith... --ローディング画面 ---[[ローディング画面GitHub>https://horire.github.io/load... --スライダー ---[[参考技術・技法>https://www.youtube.com/watch?v=29jbN... ---[[スライダーGitHub>https://horire.github.io/slider/]] --文字数チェッカー ---[[文字数チェッカーGitHub>https://horire.github.io/coun... --フェードインアニメーション ---[[アニメーションGitHub>https://horire.github.io/animat... --チェックボックス ---[[チェックボックスGitHub>https://horire.github.io/chec... ~ -まとめ（現状と今後） 現在はサイト作成に使用するグラフィック素材と サイト機能を作成できている。 今後はこの素材を使用し実際にプロトタイプ通りに形にしてい... サイト構築の過程でグラフィック修正の必要が出てくる可能性... ~ ~ **2025.09.29 ~ ***機能お試し作成 -ウェーブ背景 --[[ウェーブ背景GitHub>https://horire.github.io/wave/]] --[[参考技術・技法>https://www.youtube.com/watch?v=MMNEEd... -スクロール表記の切り替え --[[スクロール表記の切り替えGitHub>https://horire.github.... -入力した文字を画像上に出力 --[[入力した文字を画像上に出力GitHub>https://horire.githu... -画像ダウンロード機能 --[[画像ダウンロード機能GitHub>https://horire.github.io/d... -文字出力と画像ダウンロード --[[文字出力と画像ダウンロードGitHub>https://horire.githu... ~ ***サイトで使用する機能のリスト化 -%%ローディング画面%% -%%フェードインアニメーション%% -%%ウェーブ背景%% -ハンバーガーボタン -%%スライダー%% -%%文字数チェッカー%% -%%スクロール表記の切り替え%% -%%入力した文字を画像上に出力%% -%%画像ダウンロード%% ~ ***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/p... --()の中身について 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 を代入している という意味です。 これによって、クリックしたときにサーバーからではなく その... --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; ... しかし、imgタグにはデフォルトでposition: static;が適用さ... -position relative とposition absolute --position: absolute; は、一番近い position: relative; な... もし親要素に position: relative; が指定されていなければ、... -css background --CSSにおける「background」プロパティは、要素の背景に関す... -css animation --リニア（linear）： 等速で変化する。のっぺりとした安定し... --イーズイン（ease-in）： 徐々に加速する。加速するような... --イーズアウト（ease-out）： 徐々に減速する。 変化の余韻が残りやすい印象。 --イーズインアウト（ease-in-out）： 加速してから減速。 ~ ~ **2025.09.22 ~ ***機能お試し作成 -ローディング画面 --[[ローディング画面GitHub>https://horire.github.io/loadi... -スライダー --[[参考技術・技法>https://www.youtube.com/watch?v=29jbN6... --[[スライダーGitHub>https://horire.github.io/slider/]] -文字数チェッカー --[[文字数チェッカーGitHub>https://horire.github.io/count... -フェードインアニメーション --[[アニメーションGitHub>https://horire.github.io/animati... -チェックボックス --[[チェックボックスGitHub>https://horire.github.io/check... **2025.09.15 ~ ***サイトで使用する機能のリスト化 -ローディング画面 -フェードインアニメーション -ウェーブ背景 -ハンバーガーボタン -スライダー -文字数チェッカー -スクロール表記の切り替え -入力した文字を画像上に出力 -画像ダウンロード いきなりサイトを作り始めるのではなく機能のみの作成から始... 入力した文字を画像上に出力が時間がかかる見込みなので、そ... の機能から作成を開始する。 ~ ***研究進行について -ガントチャートの作成 -ToDoリストの作成 ~ ~

終了行:
*MEMORIES COLLECTION テンプレートを使った映画の思い出オリジナルカードを作成で... #image(情報デザイン研究三年後期.png) -堀玲二 -[[MEMORIES COLLECTION　サイト>https://horire.github.io/M... -[[MEMORIES COLLECTION　プロトタイプ>https://www.figma.co... -movie tickets, collection, web site -[[前期研究ページ>堀玲二/情報デザイン研究I]] **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 映画鑑賞の思い出を記録し、コレクションできるオリジナルカ... //映画鑑賞を事例とした思い出を記録し、コレクションできる... ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; 映画を観に行ったときにもらうチケットは、多くの場合映画鑑... ~ ***コンセプト //&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){プロジェクトが完結したら「まとめ」を記載し... 中間まとめ -現在はサイト作成に使用するグラフィック素材と サイト機能を作成できている。 -今後はこの素材を使用し実際にプロトタイプ通りに形にしてい... -サイト構築の過程でグラフィック修正の必要が出てくる可能性... ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問... ''人生で一番大切な仕事は「思い出づくり」'' __[[DIE WITH ZERO 人生が豊かになりすぎる究極のルール>http... ''映画を観た後、チケットの半券を捨てている人の割合は53.9%'' __[[映画の半券を捨てるか捨てないかのアンケート記事>https:... ''映画のチケットを窓口で購入している人の割合は 63.5％'' __[[実践『ペルソナ』通信 (No.47)映画の半券の保存状況に関... ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹... [[ピンタレストのボード>https://pin.it/2DimonZgX]] [[思い出きっぷ>https://design.kyusan-u.ac.jp/socialdesign... ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関す... [[デザインの心理学>https://321web.link/design-psychology/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成して... [[情報デザイン研究ガントチャート>https://ksumail-my... ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメ... %%チケットのデザイン案を計４案考える%% %%デザイン案をもとにチケット作成%% %%ジャンル別に使う色を考える%% %%サイトマップを考える%% %%ワイヤーフレームを考える%% %%サイトで使用する機能のリスト化%% サイト内原稿の作成 %%サイトで使用する機能簡易作成%% チケットデザイン案ブラッシュアップ コーディング //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしな... //&color(red){例：10人以上の会議には出ない。苦手なことは... ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記... #hr ~ ~ **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 || '作品タイトル'... }; }; reader.readAsDataURL(file); }); textInput6.addEventListener('input', () => { drawCanvas(textInput6.value || '作品タイトル',textInp... }); textInput7.addEventListener('input', () => { drawCanvas(textInput6.value || '作品タイトル',textInp... }); ''キャンバス内に画像表示をする際の画像中央での自動切り取... コード例 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 --小さい倍率だとどちらか一方がキャンバスに届かず、余白が... 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 (!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 lines; -Math.round() --JavaScript の標準組み込みオブジェクト Math（数学用ツー... 引数の数値を四捨五入して整数にする。Canvas の fillText で... (例)　const lineHeight = Math.round(10 * 1.3); -デフォルト引数 --デフォルト引数とは、関数やメソッドの定義時に引数に初期... (例)　const wrapTextByChars = (text, maxChars = 20) => {} ~ ~ **2025.11.17 ~ コーディング作業を進めました。 #image(toppage.jpg,center,40%) ~ ~ **2025.10.27 ~ 技術 -innerHTML --innerHTMLとは、JavaScriptのプロパティで、HTML要素の中身... -.filter() の仕組み（中の動き） コード例 ＊productsは配列の中にオブジェクトが収納されている要素だ... const cheapProducts = products.filter(p => p.price <= 200... 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 ~ ''発表準備'' -背景と目的 映画を観に行ったときにもらうチケットは、多くの場合映画鑑... ~ -コンセプト 思わずとっておきたくなるようにグラフィック要素を取り入れ... 既存のチケットに記入されている情報に追加して、グラフィッ... 画像保存と現物保存の二つの中からユーザーに合うコ方法でコ... ~ -調査 ''映画を観た後、チケットの半券を捨てている人の割合は53.9%'' __[[映画の半券を捨てるか捨てないかのアンケート記事>https:... ''映画のチケットを窓口で購入している人の割合は 63.5％'' __[[実践『ペルソナ』通信 (No.47)映画の半券の保存状況に関... ~ -中間発表までの成果物 --ウェーブ背景 ---[[ウェーブ背景GitHub>https://horire.github.io/wave/]] ---[[参考技術・技法>https://www.youtube.com/watch?v=MMNEE... --スクロール表記の切り替え ---[[スクロール表記の切り替えGitHub>https://horire.github... --入力した文字を画像上に出力 ---[[入力した文字を画像上に出力GitHub>https://horire.gith... --画像ダウンロード機能 ---[[画像ダウンロード機能GitHub>https://horire.github.io/... --文字出力と画像ダウンロード ---[[文字出力と画像ダウンロードGitHub>https://horire.gith... --ローディング画面 ---[[ローディング画面GitHub>https://horire.github.io/load... --スライダー ---[[参考技術・技法>https://www.youtube.com/watch?v=29jbN... ---[[スライダーGitHub>https://horire.github.io/slider/]] --文字数チェッカー ---[[文字数チェッカーGitHub>https://horire.github.io/coun... --フェードインアニメーション ---[[アニメーションGitHub>https://horire.github.io/animat... --チェックボックス ---[[チェックボックスGitHub>https://horire.github.io/chec... ~ -まとめ（現状と今後） 現在はサイト作成に使用するグラフィック素材と サイト機能を作成できている。 今後はこの素材を使用し実際にプロトタイプ通りに形にしてい... サイト構築の過程でグラフィック修正の必要が出てくる可能性... ~ ~ **2025.09.29 ~ ***機能お試し作成 -ウェーブ背景 --[[ウェーブ背景GitHub>https://horire.github.io/wave/]] --[[参考技術・技法>https://www.youtube.com/watch?v=MMNEEd... -スクロール表記の切り替え --[[スクロール表記の切り替えGitHub>https://horire.github.... -入力した文字を画像上に出力 --[[入力した文字を画像上に出力GitHub>https://horire.githu... -画像ダウンロード機能 --[[画像ダウンロード機能GitHub>https://horire.github.io/d... -文字出力と画像ダウンロード --[[文字出力と画像ダウンロードGitHub>https://horire.githu... ~ ***サイトで使用する機能のリスト化 -%%ローディング画面%% -%%フェードインアニメーション%% -%%ウェーブ背景%% -ハンバーガーボタン -%%スライダー%% -%%文字数チェッカー%% -%%スクロール表記の切り替え%% -%%入力した文字を画像上に出力%% -%%画像ダウンロード%% ~ ***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/p... --()の中身について 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 を代入している という意味です。 これによって、クリックしたときにサーバーからではなく その... --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; ... しかし、imgタグにはデフォルトでposition: static;が適用さ... -position relative とposition absolute --position: absolute; は、一番近い position: relative; な... もし親要素に position: relative; が指定されていなければ、... -css background --CSSにおける「background」プロパティは、要素の背景に関す... -css animation --リニア（linear）： 等速で変化する。のっぺりとした安定し... --イーズイン（ease-in）： 徐々に加速する。加速するような... --イーズアウト（ease-out）： 徐々に減速する。 変化の余韻が残りやすい印象。 --イーズインアウト（ease-in-out）： 加速してから減速。 ~ ~ **2025.09.22 ~ ***機能お試し作成 -ローディング画面 --[[ローディング画面GitHub>https://horire.github.io/loadi... -スライダー --[[参考技術・技法>https://www.youtube.com/watch?v=29jbN6... --[[スライダーGitHub>https://horire.github.io/slider/]] -文字数チェッカー --[[文字数チェッカーGitHub>https://horire.github.io/count... -フェードインアニメーション --[[アニメーションGitHub>https://horire.github.io/animati... -チェックボックス --[[チェックボックスGitHub>https://horire.github.io/check... **2025.09.15 ~ ***サイトで使用する機能のリスト化 -ローディング画面 -フェードインアニメーション -ウェーブ背景 -ハンバーガーボタン -スライダー -文字数チェッカー -スクロール表記の切り替え -入力した文字を画像上に出力 -画像ダウンロード いきなりサイトを作り始めるのではなく機能のみの作成から始... 入力した文字を画像上に出力が時間がかかる見込みなので、そ... の機能から作成を開始する。 ~ ***研究進行について -ガントチャートの作成 -ToDoリストの作成 ~ ~

ページ名: