コピペするだけ！簡単「七夕の短冊」

読ませて頂いた記事をマガジンに追加させて頂いております。

伺った際にはマガジンへの登録をさせて頂いていきますが、それはやめてほしいなどありましたら、DM / コメントで一言頂けましたら幸いです😊

ブックマークに置いとくだけ！

コピペするだけの簡単小道具！

Geminiで簡単！ツール作成！

一発作成プロンプトも紹介！

明日から7月ですね！
季節感なく過ごしていて、長い間七夕を意識したことはありませんでした。
ネット上の話だと、まだ早かったりするのでしょうか。
リアルではそろそろ準備とか始まっていそう。

Geminiさんに願いを込めて！

短冊画像を作るツールを作ってもらってみた！

色はランダムです！

ブックマークを押してお願いごとを書くと、別タブで短冊画像が出来上がります！

🛠️ 使い方（スマホ版）

1. 適当なページをブックマークする

まずは、今見ているこのページなど、何でもいいので一度ブックマークに登録します。

2. 「編集」を開く

ブックマークバーにある今作ったブックマークを長押しして、「編集」を選択します。

3. 内容を書き換える

表示された設定画面で、以下の2箇所を変更して保存します。

• 名前： （自分が分かりやすい名前）

• URL： もともと入っているURLをすべて消して、コードを貼り付ける。

ブックマークを押すだけ簡単！

📋これを貼ります！

javascript:(function(){const txt=prompt('短冊に書く願い事を入力してください（10文字自動改行）:');if(!txt)return;const lines=[];for(let i=0;i<txt.length;i+=10){lines.push(txt.substr(i,10));}const cols=lines.length;let maxL=0;for(let i=0;i<cols;i++){if(lines[i].length>maxL)maxL=lines[i].length;}const w=40+cols*60;const h=160+maxL*60;const canvas=document.createElement('canvas');canvas.width=w;canvas.height=h;const ctx=canvas.getContext('2d');const gradients=[['#ff9a9e','#fecfef'],['#a1c4fd','#c2e9fb'],['#d4fc79','#96e6a1'],['#f6d365','#fda085'],['#e0c3fc','#8ec5fc']];const rC=gradients[Math.floor(Math.random()*gradients.length)];const grad=ctx.createLinearGradient(0,0,w,h);grad.addColorStop(0,rC[0]);grad.addColorStop(1,rC[1]);ctx.fillStyle=grad;ctx.fillRect(0,0,w,h);ctx.strokeStyle='rgba(255,255,255,0.8)';ctx.lineWidth=2;ctx.beginPath();ctx.roundRect(10,10,w-20,h-20,15);ctx.stroke();ctx.fillStyle='rgba(0,0,0,0.8)';ctx.font='normal 32px serif';ctx.textAlign='center';ctx.textBaseline='middle';if(cols===1){ctx.fillText('願',w/2,50);for(let m=0;m<lines[0].length;m++){ctx.fillText(lines[0][m],w/2,110+m*60);}}else{for(let k=0;k<cols;k++){const cx=w/2+((cols-1-k)*60)-(cols-1)*30;for(let m=0;m<lines[k].length;m++){ctx.fillText(lines[k][m],cx,60+m*60);}}}const totalCX=w/2;const cy=h-50;ctx.fillStyle='rgba(255,255,255,0.7)';ctx.strokeStyle='rgba(255,255,255,0.7)';const drawStar=(x,y,r1,r2)=>{ctx.beginPath();for(let i=0;i<10;i++){const rot=Math.PI/5*i-Math.PI/2;const r=i%2===0?r1:r2;ctx.lineTo(x+Math.cos(rot)*r,y+Math.sin(rot)*r);}ctx.closePath();};const p=Math.floor(Math.random()*4);if(p===0){drawStar(totalCX,cy,18,8);ctx.fill();drawStar(totalCX-22,cy+8,10,4);ctx.fill();drawStar(totalCX+22,cy-6,8,3);ctx.fill();}else if(p===1){ctx.lineWidth=2;drawStar(totalCX,cy,18,8);ctx.stroke();drawStar(totalCX-22,cy+8,10,4);ctx.stroke();drawStar(totalCX+22,cy-6,8,3);ctx.stroke();}else if(p===2){ctx.font='32px serif';ctx.fillText('★',totalCX,cy);ctx.font='20px serif';ctx.fillText('★',totalCX-22,cy+8);ctx.font='16px serif';ctx.fillText('★',totalCX+22,cy-6);}else if(p===3){ctx.lineWidth=3;ctx.beginPath();ctx.moveTo(totalCX-25,cy+15);ctx.quadraticCurveTo(totalCX,cy,totalCX+25,cy-15);ctx.stroke();ctx.beginPath();ctx.moveTo(totalCX-15,cy+5);ctx.quadraticCurveTo(totalCX-25,cy-10,totalCX-5,cy-5);ctx.quadraticCurveTo(totalCX,cy+10,totalCX-15,cy+5);ctx.moveTo(totalCX+5,cy-5);ctx.quadraticCurveTo(totalCX+25,cy-15,totalCX+15,cy);ctx.quadraticCurveTo(totalCX-5,cy+5,totalCX+5,cy-5);ctx.fillStyle='rgba(255,255,255,0.7)';ctx.fill();ctx.stroke();}const wnd=window.open();if(!wnd)return;wnd.document.title='七夕短冊画像';const body=wnd.document.body;body.style.margin='0';body.style.backgroundColor='#1a1a1a';body.style.display='flex';body.style.flexDirection='column';body.style.justifyContent='center';body.style.alignItems='center';body.style.height='100vh';body.style.fontFamily='sans-serif';const img=wnd.document.createElement('img');img.src=canvas.toDataURL('image/png');img.style.maxWidth='90vw';img.style.maxHeight='80vh';img.style.boxShadow='0 4px 20px rgba(0,0,0,0.5)';body.appendChild(img);const pTag=wnd.document.createElement('p');pTag.textContent='🎋 画像を長押し・右クリックで保存してSNSやnoteへ！';pTag.style.color='#ffffff';pTag.style.marginTop='20px';pTag.style.fontSize='16px';pTag.style.letterSpacing='1px';body.appendChild(pTag);})();void(0);

一発作成プロンプト！

# 目的
JavaScriptのCanvas機能だけで、10文字自動改行・右から左への行送り対応の「1枚の美しい七夕短冊画像（PNG）」を動的生成し、別タブに一撃で出力するブックマークレットを作成してください。

# 描画・デザイン仕様（厳守）
1. 短冊カード自体の固定（全体で1枚）:
   - 入力文字列を10文字ずつで分割し、列数（cols）を出す。Canvasの横幅（w）は「40 + cols * 60」、縦幅（h）は最長列の文字数（maxL）を基準に「160 + maxL * 60」とする。
   - 背景の四角形および白色透過（rgba(255,255,255,0.8)・線幅2px）の実線外枠は、Canvas全体のサイズに対して【全体で1枚の大きな四角形（ctx.roundRectを使用）】として1回だけ描画すること。
2. 文字の配置（完璧な中央揃えと、右から左への行送り）:
   - 文字色は、淡い背景でも読めるように締まった黒「rgba(0,0,0,0.8)」にすること（白文字不可）。
   - 複数列時、右端の列から左に向かって行が並ぶよう、各列の横中心座標（cx）は全体の横中心（w/2）を基準とした数理「w/2 + ((cols - 1 - k) * 60) - (cols - 1) * 30」で算出すること。これにより左右余白を均等にすること。
3. 「願」の配置:
   - 列数（cols）が「1つだけ」の場合に限り、全体のど真ん中上部（横 w/2、縦 50）に「願」を1回だけ描画。複数列時は「願」は配置しないこと。1列のみの文字の開始縦座標（ty）は「110 + m * 60」、複数列時は「60 + m * 60」とする。
4. 最下段のランダム飾り（全体のど真ん中に1箇所）:
   - 短冊全体の最下段中央（横座標 totalCX = w / 2、縦座標 cy = h - 50）に、不透明度70%の白「rgba(255,255,255,0.7)」で、以下の4パターンのいずれかをランダム（Math.random()*4）で描画すること。
     - パターン0: 数理パスで描く「塗りつぶしの星」の大小混ざり（3つ）
     - パターン1: 数理パスで描く「白抜きの星」の大小混ざり（3つ）
     - パターン2: テキストの大小★（3つ）
     - パターン3: ベジェ曲線を用いた「笹の葉の線画」（基準座標はtotalCXベース）

# システム要件（Chrome / Safari両対応）
1. 起動時にpromptを表示し、空文字やキャンセルの場合は安全に処理を終了（return）すること。
2. 生成したCanvasは「toDataURL('image/png')」で同期的にBase64文字列に変換。
3. Chromeの Trusted Types エラーを完全回避するため、「w.document.write()」による生のHTML文字列注入は【絶対に禁止】とする。必ず「w.document.createElement()」等を使用してDOM要素を個別に生成し、「appendChild()」で安全に追加すること。
4. 開いた別タブの背景スタイルはダークグレー「#1a1a1a」にし、画面中央にジャスト配置（flex、justifyContent:center、alignItems:center、height:100vh）にすること。下部には「🎋 画像を長押し・右クリックで保存してSNSやnoteへ！」という案内テキストを添えること。
5. コード全体のあらゆる場所において「％（パーセント記号）」は【絶対に禁止】。最末尾には必ず「void(0);」を記述すること。
6. 全体を「javascript:(function(){ ... })();void(0);」形式で包み、完全な1行のコードとすること。

# 注意
・「roundRectのポリフィル（Polyfill）や互換用自作関数」はコードが長くなりAIが誤作動・エラー文を誤植する原因になるため、【絶対に書かない】でください。標準の ctx.roundRect をそのまま1行で呼び出してください。

# 出力形式
コードブロックに1行のコードだけを出力してください。前後の解説文や挨拶はすべて省略してください。

この記事について！

今更ながら、Gemini 3分クッキング記事について注意点など｜へろん

何でもどうぞ！答えられるものは全て答えます！

設置はお済みですか？図らずも人の庭でnote質問箱を試す！｜へろん

メンバーシップ始めました！

まだ手探りですが、ご要望/無茶振り/質問、可能な限りお受けします！

参加させて頂いています！是非チェックしてみてください😆

有料記事、今回は問題提起と警告！

note生活1ヶ月の総括記事を書きました！大事な部分は全て無料公開中！
何を考え何をしてきたのか、500人記念のワンコインで公開します！

小道具すべて、こちらに置きました！

☕ お時間あればこちらも是非！

気に入ったらスキ、フォローよろしくお願いします！
note外から見にきてくださったかたも、もしよければハートマーク押して頂けたら励みになります😊