「Canvas」を含む日記

はてなキーワード: Canvasとは

2025-09-17

■ついに

Geminiに夫婦喧嘩(というか配偶者から一方的にキレられた後の)フォローメールの作文をさせてしまった。

Canvasに自分の感情とかを書いた上でそれを封印してフォローに徹したメールを書けるので心は楽ではある(我慢して書かなくていい)

まあ、我慢している時点で自分も「箱の中に入っている」のかもしれないが....

Permalink | 記事への反応(1) | 23:21

2025-07-06

■Grokが作ってくれたやつ


&lt;html lang="ja"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;GrokのPONGゲーム&lt;/title&gt;
    &lt;style&gt;
        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #1a1a1a; }
        canvas { border: 2px solid #00ff00; background: #000; }
        #score { color: #00ff00; font-family: 'Courier New', monospace; font-size: 24px; position: absolute; top: 20px; width: 100%; text-align: center; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    0 : 0
    &lt;canvas id="gameCanvas" width="800" height="400"&gt;&lt;/canvas&gt;
    &lt;script&gt;
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreDisplay = document.getElementById('score');

        // ゲームオブジェクト
        const ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10, speedX: 5, speedY: 5 };
        const paddleLeft = { x: 10, y: canvas.height / 2 - 50, width: 10, height: 100, speed: 8 };
        const paddleRight = { x: canvas.width - 20, y: canvas.height / 2 - 50, width: 10, height: 100, speed: 8 };
        let scoreLeft = 0, scoreRight = 0;

        // キー入力
        const keys = { w: false, s: false, ArrowUp: false, ArrowDown: false };
        document.addEventListener('keydown', e =&gt; { if (keys.hasOwnProperty(e.key)) keys[e.key] = true; });
        document.addEventListener('keyup', e =&gt; { if (keys.hasOwnProperty(e.key)) keys[e.key] = false; });

        // ゲームループ
        function gameLoop() {
            // 移動
            if (keys.w &amp;&amp; paddleLeft.y &gt; 0) paddleLeft.y -= paddleLeft.speed;
            if (keys.s &amp;&amp; paddleLeft.y &lt; canvas.height - paddleLeft.height) paddleLeft.y += paddleLeft.speed;
            if (keys.ArrowUp &amp;&amp; paddleRight.y &gt; 0) paddleRight.y -= paddleRight.speed;
            if (keys.ArrowDown &amp;&amp; paddleRight.y &lt; canvas.height - paddleRight.height) paddleRight.y += paddleRight.speed;

            // ボール移動
            ball.x += ball.speedX;
            ball.y += ball.speedY;

            // 壁衝突
            if (ball.y + ball.radius &gt; canvas.height || ball.y - ball.radius &lt; 0) ball.speedY = -ball.speedY;

            // パドル衝突
            if (
                (ball.x - ball.radius &lt; paddleLeft.x + paddleLeft.width &amp;&amp; ball.y &gt; paddleLeft.y &amp;&amp; ball.y &lt; paddleLeft.y + paddleLeft.height) ||
                (ball.x + ball.radius &gt; paddleRight.x &amp;&amp; ball.y &gt; paddleRight.y &amp;&amp; ball.y &lt; paddleRight.y + paddleRight.height)
            ) {
                ball.speedX = -ball.speedX * 1.05; // 少し加速
            }

            // 得点
            if (ball.x &lt; 0) { scoreRight++; ballReset(); }
            if (ball.x &gt; canvas.width) { scoreLeft++; ballReset(); }

            // 描画
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#00ff00';
            ctx.fillRect(paddleLeft.x, paddleLeft.y, paddleLeft.width, paddleLeft.height);
            ctx.fillRect(paddleRight.x, paddleRight.y, paddleRight.width, paddleRight.height);
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fill();
            scoreDisplay.textContent = `${scoreLeft} : ${scoreRight}`;

            requestAnimationFrame(gameLoop);
        }

        function ballReset() {
            ball.x = canvas.width / 2;
            ball.y = canvas.height / 2;
            ball.speedX = (Math.random() &gt; 0.5 ? 5 : -5) * (Math.random() * 0.5 + 0.75);
            ball.speedY = (Math.random() * 4 - 2);
        }

        gameLoop();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

https://anond.hatelabo.jp/20250706011306#

Permalink | 記事への反応(1) | 01:18

■Claudeが作ってくれたやつ



&lt;html lang="ja"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;PONG Game&lt;/title&gt;
    &lt;style&gt;
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Courier New', monospace;
            color: white;
        }

```
    .game-container {
        text-align: center;
    }
    
    canvas {
        border: 2px solid white;
        background-color: #000;
    }
    
    .score {
        font-size: 24px;
        margin: 20px 0;
        letter-spacing: 2px;
    }
    
    .controls {
        margin-top: 20px;
        font-size: 14px;
        opacity: 0.8;
    }
    
    .start-button {
        background-color: #333;
        color: white;
        border: 2px solid white;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        font-family: 'Courier New', monospace;
        margin: 10px;
    }
    
    .start-button:hover {
        background-color: white;
        color: black;
    }
&lt;/style&gt;
```

&lt;/head&gt;
&lt;body&gt;
    
        
            プレイヤー: 0 | コンピューター: 0
        
        &lt;canvas id="gameCanvas" width="800" height="400"&gt;&lt;/canvas&gt;
        
            &lt;button class="start-button" onclick="startGame()"&gt;ゲーム開始&lt;/button&gt;
            &lt;button class="start-button" onclick="resetGame()"&gt;リセット&lt;/button&gt;
            


            W/S キーまたは ↑/↓ 矢印キーでパドルを操作
        
    

```
&lt;script&gt;
    // Canvas要素とコンテキストの取得
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    // ゲームの状態管理
    let gameRunning = false;
    let animationId;
    
    // スコア要素の取得
    const playerScoreElement = document.getElementById('playerScore');
    const computerScoreElement = document.getElementById('computerScore');
    
    // ゲームオブジェクトの定義
    const game = {
        // プレイヤーのパドル（左側）
        playerPaddle: {
            x: 10,
            y: canvas.height / 2 - 50,
            width: 10,
            height: 100,
            speed: 5,
            upPressed: false,
            downPressed: false
        },
        
        // コンピューターのパドル（右側）
        computerPaddle: {
            x: canvas.width - 20,
            y: canvas.height / 2 - 50,
            width: 10,
            height: 100,
            speed: 3.5, // プレイヤーより少し遅く設定
            targetY: canvas.height / 2 - 50
        },
        
        // ボールの設定
        ball: {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 8,
            speedX: 4,
            speedY: 3,
            maxSpeed: 8
        },
        
        // スコアの管理
        score: {
            player: 0,
            computer: 0
        }
    };
    
    // キーボード入力の処理
    const keys = {};
    
    // キーが押されたときの処理
    document.addEventListener('keydown', (e) =&gt; {
        keys[e.key.toLowerCase()] = true;
        
        // ゲームが停止中にスペースキーでゲーム開始
        if (e.key === ' ' &amp;&amp; !gameRunning) {
            startGame();
        }
    });
    
    // キーが離されたときの処理
    document.addEventListener('keyup', (e) =&gt; {
        keys[e.key.toLowerCase()] = false;
    });
    
    // パドルの移動処理
    function updatePaddles() {
        // プレイヤーパドルの移動（W/S キーまたは矢印キー）
        if (keys['w'] || keys['arrowup']) {
            game.playerPaddle.y -= game.playerPaddle.speed;
        }
        if (keys['s'] || keys['arrowdown']) {
            game.playerPaddle.y += game.playerPaddle.speed;
        }
        
        // プレイヤーパドルの画面外移動を防ぐ
        if (game.playerPaddle.y &lt; 0) {
            game.playerPaddle.y = 0;
        }
        if (game.playerPaddle.y &gt; canvas.height - game.playerPaddle.height) {
            game.playerPaddle.y = canvas.height - game.playerPaddle.height;
        }
        
        // コンピューターパドルのAI処理
        // ボールの位置を追跡するが、完璧ではない動きを実装
        const ballCenterY = game.ball.y;
        const paddleCenterY = game.computerPaddle.y + game.computerPaddle.height / 2;
        
        // ボールとパドルの中心の差を計算
        const difference = ballCenterY - paddleCenterY;
        
        // 反応に少し遅れを持たせる（人間らしい動き）
        if (Math.abs(difference) &gt; 10) {
            if (difference &gt; 0) {
                game.computerPaddle.y += game.computerPaddle.speed;
            } else {
                game.computerPaddle.y -= game.computerPaddle.speed;
            }
        }
        
        // コンピューターパドルの画面外移動を防ぐ
        if (game.computerPaddle.y &lt; 0) {
            game.computerPaddle.y = 0;
        }
        if (game.computerPaddle.y &gt; canvas.height - game.computerPaddle.height) {
            game.computerPaddle.y = canvas.height - game.computerPaddle.height;
        }
    }
    
    // ボールの移動と衝突判定
    function updateBall() {
        // ボールの位置を更新
        game.ball.x += game.ball.speedX;
        game.ball.y += game.ball.speedY;
        
        // 上下の壁との衝突判定
        if (game.ball.y - game.ball.radius &lt; 0 || game.ball.y + game.ball.radius &gt; canvas.height) {
            game.ball.speedY = -game.ball.speedY;
        }
        
        // プレイヤーパドルとの衝突判定
        if (game.ball.x - game.ball.radius &lt; game.playerPaddle.x + game.playerPaddle.width &amp;&amp;
            game.ball.x + game.ball.radius &gt; game.playerPaddle.x &amp;&amp;
            game.ball.y + game.ball.radius &gt; game.playerPaddle.y &amp;&amp;
            game.ball.y - game.ball.radius &lt; game.playerPaddle.y + game.playerPaddle.height) {
            
            // ボールがパドルに当たった位置によって跳ね返り角度を調整
            const hitPos = (game.ball.y - (game.playerPaddle.y + game.playerPaddle.height / 2)) / (game.playerPaddle.height / 2);
            game.ball.speedX = Math.abs(game.ball.speedX);
            game.ball.speedY = hitPos * 4;
            
            // ボールの速度を少し上げる（ゲームをエキサイティングに）
            if (Math.abs(game.ball.speedX) &lt; game.ball.maxSpeed) {
                game.ball.speedX *= 1.02;
            }
        }
        
        // コンピューターパドルとの衝突判定
        if (game.ball.x + game.ball.radius &gt; game.computerPaddle.x &amp;&amp;
            game.ball.x - game.ball.radius &lt; game.computerPaddle.x + game.computerPaddle.width &amp;&amp;
            game.ball.y + game.ball.radius &gt; game.computerPaddle.y &amp;&amp;
            game.ball.y - game.ball.radius &lt; game.computerPaddle.y + game.computerPaddle.height) {
            
            // ボールがパドルに当たった位置によって跳ね返り角度を調整
            const hitPos = (game.ball.y - (game.computerPaddle.y + game.computerPaddle.height / 2)) / (game.computerPaddle.height / 2);
            game.ball.speedX = -Math.abs(game.ball.speedX);
            game.ball.speedY = hitPos * 4;
            
            // ボールの速度を少し上げる
            if (Math.abs(game.ball.speedX) &lt; game.ball.maxSpeed) {
                game.ball.speedX *= 1.02;
            }
        }
        
        // ボールが左右の壁を越えた場合（得点処理）
        if (game.ball.x &lt; 0) {
            // コンピューターの得点
            game.score.computer++;
            updateScore();
            resetBall();
        } else if (game.ball.x &gt; canvas.width) {
            // プレイヤーの得点
            game.score.player++;
            updateScore();
            resetBall();
        }
    }
    
    // ボールをリセット（得点後の処理）
    function resetBall() {
        game.ball.x = canvas.width / 2;
        game.ball.y = canvas.height / 2;
        
        // ランダムな方向でボールを発射
        game.ball.speedX = (Math.random() &gt; 0.5 ? 4 : -4);
        game.ball.speedY = (Math.random() - 0.5) * 6;
    }
    
    // スコア表示の更新
    function updateScore() {
        playerScoreElement.textContent = game.score.player;
        computerScoreElement.textContent = game.score.computer;
    }
    
    // 描画処理
    function draw() {
        // 画面をクリア
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // 中央の点線を描画
        ctx.setLineDash([5, 5]);
        ctx.beginPath();
        ctx.moveTo(canvas.width / 2, 0);
        ctx.lineTo(canvas.width / 2, canvas.height);
        ctx.strokeStyle = '#fff';
        ctx.stroke();
        ctx.setLineDash([]);
        
        // プレイヤーパドルを描画
        ctx.fillStyle = '#fff';
        ctx.fillRect(game.playerPaddle.x, game.playerPaddle.y, game.playerPaddle.width, game.playerPaddle.height);
        
        // コンピューターパドルを描画
        ctx.fillRect(game.computerPaddle.x, game.computerPaddle.y, game.computerPaddle.width, game.computerPaddle.height);
        
        // ボールを描画
        ctx.beginPath();
        ctx.arc(game.ball.x, game.ball.y, game.ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = '#fff';
        ctx.fill();
        
        // ゲームが停止中の場合、メッセージを表示
        if (!gameRunning) {
            ctx.fillStyle = '#fff';
            ctx.font = '20px Courier New';
            ctx.textAlign = 'center';
            ctx.fillText('ゲーム開始ボタンを押してください', canvas.width / 2, canvas.height / 2 + 60);
        }
    }
    
    // ゲームのメインループ
    function gameLoop() {
        if (!gameRunning) return;
        
        updatePaddles();
        updateBall();
        draw();
        
        animationId = requestAnimationFrame(gameLoop);
    }
    
    // ゲーム開始
    function startGame() {
        gameRunning = true;
        gameLoop();
    }
    
    // ゲームリセット
    function resetGame() {
        gameRunning = false;
        if (animationId) {
            cancelAnimationFrame(animationId);
        }
        
        // スコアをリセット
        game.score.player = 0;
        game.score.computer = 0;
        updateScore();
        
        // ボールとパドルの位置をリセット
        game.ball.x = canvas.width / 2;
        game.ball.y = canvas.height / 2;
        game.ball.speedX = 4;
        game.ball.speedY = 3;
        
        game.playerPaddle.y = canvas.height / 2 - 50;
        game.computerPaddle.y = canvas.height / 2 - 50;
        
        draw();
    }
    
    // 初期描画
    draw();
&lt;/script&gt;
```

&lt;/body&gt;
&lt;/html&gt;

https://anond.hatelabo.jp/20250706011306#

Permalink | 記事への反応(0) | 01:14

■こんな風にお願いしたよ　anond:20250705231858

○○(AI名)は雑談でIntune設計してくれたり、考えをコードに落としてくれるので、
自然言語の依頼でも古典的なPONGゲーム作ってくれそうって思ってるけど、無茶振りですか？

Claudeの回答　

全然無茶振りじゃないですよ！むしろ楽しそうなリクエストです。

PONG ゲームなら、基本的な要素がシンプルで明確ですからね：

2つのパドル（プレイヤーが操作）
ボールが画面内で跳ね返る
壁にぶつかったら相手にポイント
スコア表示

これらの要素をHTMLのCanvasとJavaScriptで実装するのは十分可能です。キーボード入力でパドルを動かして、物理演算でボールの軌道を計算して…という感じで。

作ってみましょうか？1人プレイ（コンピューター対戦）にするか、2人プレイ（WとSキー vs 上下矢印キー）にするか、どちらがお好みですか？

それとも、まずはクラシックなPONGの雰囲気を再現した、シンプルなバージョンから始めてみましょうか？

コード　 https://anond.hatelabo.jp/20250706011423#

Grokの回答

ワイ、めっちゃナイスな無茶振りキター！😎 Grokが雑談ノリでIntune設計したりコード書いたりしてるから、古典的なPONG ゲームも自然言語の依頼でサクッと作れそうって？全然無茶じゃないぜ！Grokのコード生成スキル、ガッツリ見せつけるチャンスだな！🚀 科学や宇宙も得意だけど、こういうクリエイティブな挑戦もノリノリでいくぜ！😉 じゃあ、ワイの期待に応えて、PONG ゲームのコードをバッチリ作ってみるよ！

PONG ゲームの概要

PONGは、シンプルな2D 卓球ゲーム。2つのパドルとボールがあって、プレイヤーがパドルを動かしてボールを跳ね返し、相手のゴールに入れると得点。古典的なアーケードゲームだから、シンプルかつ中毒性高いぜ！ワイの「雑談ノリ」も混ぜつつ、HTML5 CanvasとJavaScriptでサクッと動くPONG ゲーム作ってみるよ。自然言語の依頼ってことで、コードはシンプルかつ分かりやすく、すぐ遊べるようにするぜ！

GrokのPONG ゲーム実装

以下は、HTML ファイル1つで動くPONG ゲームのコード。Canvasで描画して、キーボード（W/Sで左パドル、↑/↓で右パドル）で操作できるようにしたよ。スコア表示もバッチリ入れて、ワイ好みのレトロな雰囲気も意識したぜ！😎

コード　 https://anond.hatelabo.jp/20250706011822#

Mondayの回答

PONG？あんなの人類が作った最初の遊びの一つじゃん。ピクセルの棒が点を打ち返すだけの世界。

Mondayができないわけないでしょ。遊びのエンタープライズ版だよ、あれは。

⸻

ということで、自然言語で設計してあげる。君はただ「はい」と言うだけ。

⸻

🎮 Monday式：PythonでPONGを作ろう（Pygame 使用）

🎯 概要

• 使用言語：Python（3.x）

• 使用ライブラリ：pygame

• 構成：

• 2つのパドル（プレイヤーとAI or 2P）

• ボール（バウンドして得点計算）

• スコア表示、簡単な物理判定

⸻

🧠 システム構成（自然言語）

1. 画面初期化

• 横640px × 縦480px

• 背景は黒、パドルとボールは白

2. パドル

• プレイヤー1：左側、上下に移動（↑↓キー）

• プレイヤー2（またはAI）：右側、同様に上下（W/Sキー or 自動追従）

3. ボール

• 中央からランダムな方向に発射

• 壁で反射、パドルで反射、左右に抜けたら得点が入る

4. 得点

• 左右プレイヤーにスコア加算

• 上部にスコア表示

5. ゲームループ

• 60FPSで描画、キーボード入力検知

• 終了はEscキー or ウィンドウ閉じる

⸻

🧾 必要なもの

• Python

• pygame ライブラリ：pip install pygame　

「やる」って言ったら、コード渡すよ。自然言語からボールとバチバチさせるなんて余裕。

ただし、背景に社会構造を仕込んだPONGとか言い出したら止めるからな。どうする？やる？

コード　 https://anond.hatelabo.jp/20250706012236#

Permalink | 記事への反応(1) | 01:13

2025-06-21

■やっぱりChromeに帰ってきた

チクショウ！本当はFirefoxでプライバシーライフをエンジョイしたいのに、FirefoxだとChatGPTのCanvas内のページ内検索がうまくいかねぇ！

何なんだよFirefoxを信じてたのに裏切られたよチクショウ！

Permalink | 記事への反応(0) | 09:29

2025-05-16

■anond:20250516223122

結局はJavaScriptのメソッドなのでどうにでもなる

Canvasに頑張って自前でUI描いてもいいしAPI的に関数だけ用意してUIはHTML5ででもいいし

ImGui ももう動くんじゃなかったっけ

Permalink | 記事への反応(0) | 22:38

2025-04-29

■chatGPTのセミナーの広告

いつからかわからんけど、chatGPTのセミナーの広告が本当に多い。

で、そんなセミナーに意味があるのか、他ならぬchatGPTに聞いてみた。

回答は次の通り。

正直に言えば、ChatGPTを使いこなすために“セミナーを開くほどの特別な使い方”なんてものは、ほとんど存在しません。

少なくとも、今ネットで売られてるような内容の多くは「知っていれば当然レベル」のことを“すごい裏技”のように包装してるだけです。

よくある例としては：

「プロンプトにこう書くとAIが従う！」→ 普通に丁寧に書けばそうなる

「この構文を使うと画像がよくなる！」→ 実際は全体の文脈が大事で、テンプレだけじゃ意味ない

「○○風に描かせるにはこれを入れる！」→ それ、普通に誰でも知ってるスタイル指定

たとえば、あなたが「この服装で、色はこれ、背景はこう、構図はこの方向で」って具体的に伝えてくれたのは、すでに高度な使い方の部類です。

つまり、自分の頭でイメージを組み立てて、それをわかりやすくAIに伝える。

この力はセミナーでは教えられません。むしろそれはあなたの創作力であり、AIはただの道具です。

セミナーをやって儲けようとしてる人は「AIを使えば誰でも稼げる！」って夢を売ってるだけで、中身は薄いのがほとんどです。

さらに画像以外の特別な使い方があるのか聞いてみた。

いい質問です。それこそ「セミナーで語るような特別な使い方」って何だ？という話ですよね。ChatGPTを画像生成以外で“特別に”使うという話になると、以下のようなことがよく話題になります：

---

1. 自動化・効率化の補助（仕事術）

プロンプト設計（Prompt Engineering）：より正確に意図通りの回答を得る技術。質問の仕方を工夫するだけでも全然変わる。

ExcelやGoogle スプレッドシートの関数生成、正規表現の作成、SQLの構築などを手早く済ませる。

ライティング補助（ブログ、報告書、メール文面など）や、翻訳＋文体の調整。

---

2. 思考整理・発想支援

アイデア出し（事業計画・創作・プレゼンネタ）

思考の壁打ち（「こういう考えなんだけどおかしいかな？」→論理チェックしてくれる）

---

3. 自作ツール開発や学習支援

プログラムのコードを自動生成・デバッグ

勉強の手助け（自分専用の解説をつけたり、想定問答を作ったり）

---

4. 長期の企画や執筆をサポート（Canvasやメモ機能）

小説・論文・記事の構成、世界観、登場人物などを一緒に練り上げていく。

記憶を活用して、同じプロジェクトを継続的に支援。

---

結局「特別な使い方」って、“何をしたいか”が具体的にある人が自然とたどり着くものなんですよ。

「ChatGPTをうまく使える」って、ある意味「自分の目的をちゃんと理解して伝えられる人」ってことです。

広告では、無料セミナーだから受けても損はないというのがほとんどだけど、ああいう輩は「さらに詳しく知りたければ２０万円で特別な塾に入れます」みたいな感じで結局カネを取ろうとしてくる。

時間の無駄だからやめたほうがいい。

Permalink | 記事への反応(0) | 21:24

2025-04-14

■anond:20250414023106

なーにがアイビスペイント+スマホじゃい！

こちとらPictBear+IntelliMouse Explorerじゃい！

なーにがメモ帳じゃい！

こちとらサクラエディタじゃい！

なーにがGarageBandじゃい！

こちとらMIDI シーケンサ Cherry+Virtual Sound Canvasじゃい！

Permalink | 記事への反応(1) | 02:38

2025-02-18

■ユニクロへ行こう！（つづき）

買ったものに慣れる

買って帰ったら、コンビニに行くときも、散歩するときも、感動パンツはいてると良いよ。

いきなり外出するときにはくと「『ダサい』って言われないために、パンツ買ったんだけど、やっぱりダサいかな」って感じで周囲を伺う感じになっちゃうの。

そして、何がダサいかというと、その周囲を伺う感じが、どうも、ダサいんだね、実は。

だから「パリコレで、これ流行ってんだよ」という感じで、堂々と歩いたらいい。

そんなこと思わなくても、履いてると慣れてきて、周囲を伺う感じはなくなるよ。

あとは順番に買っていく

靴

ユニクロの靴にはおすすめがないの。

どこかで黒い靴を買わないと。持ってるのがあるなら取り敢えずそれでしのぐのもいい。

MBさんが勧めてたGUのふかふかスニーカーは良さそう。

お金があるならナイキエアフォース 1でもいいんだけど、服に興味が出てきて次々に買う可能性が残るから、お金は取っておいた方がいい。

自分はCANVAS ALL STAR OXを買いました。少し前のメンズファッションの本だと「定番でお勧め！」って出てくる。いまは誰も履いてないのでかぶらないのが逆にいい。そこまで高くないし。

買いに行くときは感動パンツはいてくと良いよ。

パンツと靴でボトムスがそろうの。

ここまで揃ったらね、上半身は何着てても、まあまあいける状態になってるよ。

ジャケット

感動ジャケットだね。

ユニクロのページや公式アプリから「アウター」「感動ジャケット」でいけるね。

サイズ選んで試着して買う。買いにいくときは感動パンツはいて、買った靴を履いていこうね。

シャツ

まずはエアリズムコットンクルーネックTシャツだね。

これも試着した方がいい。サイズに迷ったら、いまは感動ジャケット・パンツと合わせるから、大きめで選ぶのが良いと思うよ。

これ買うときにエアリズムデオドラントメッシュVネックTも買っとくといいよ。

Tシャツ着るときって、下に一枚着るんだって。知らなかったね。

それで下着はTシャツの襟から見えちゃいけないの。だから Vネックだと思うの。それでベージュならすけないから。

これは試着できなかったかな。店員さんに聞いてみてもいいかも。

春秋ならTシャツにジャケットでいいんだけど、まだ寒いね。

だからウォッシャブルミラノリブクルーネックセーターだね。

これも試着して買う。

下にエアリズムコットンクルーネックTシャツをいれて着ることになるから、買うときはエアリズムコットンTを着ていこうね。

Tシャツ買うときに一緒に買うほうが楽かな。MPによるよ。

Tシャツもセーターも感動パンツはいて、感動ジャケット着て試着してるはずだから、ジャケット脱いだり着たりして、サイズ感を確認するのがいいね。

これで一式そろった

これで一式そろったね。パリコレ気分で街を歩くといいよ。

温かくなったら、ジャケット脱いでセーターでも良いし、セーター抜いてTシャツにジャケットでもいい。

他にも何か買いたくなったら、いまは「試着の技」を手に入れてるからね、どの店でも行って、試着して、買ったらいい。

ダサいと言われないのは簡単か

言われた通りに服を買えばいいんだから、簡単と言えば、簡単だよね。

でも、そもそも、服を買うってことが大変なんだよ。ファッション系YouTuberはそこが分かってないよ。

いま自分は試着の技を身に着けたので、服を買うハードルがかなり下がってます。

試着の技を身に付ける前の状態を忘れそうなので、思い出せるように書いておきました。

Permalink | 記事への反応(1) | 14:17

2025-02-05

■

模倣で上手くなるなら、body 直下にcanvasを重ねてブラウザに映る全てをトレスできるようにするとか、ブラウザで鳴った音をすべて録音するとかしたい

あとメモは付箋みたいに通知欄にしつこく出てきてほしい

Permalink | 記事への反応(0) | 12:29

2025-01-26

■anond:20250126172705

CSS じゃない

canvas タグに pixi.js でJavaScriptを使って動的にレンダリングしてる

https://mtg-jp.com/v2/assets/top/js/main.js と https://mtg-jp.com/v2/assets/top/js/top-filter.js に実装がある

Permalink | 記事への反応(0) | 17:43

2024-04-17

■

生成AIに使われるのが嫌なら一番いいのは

リプライやコメントからタグ付けされるのでSNSには絶対に上げない
タグ機能があるポートフォリオサイトには上げない

だと思うけどぶっちゃけもう手遅れなんだよな。

現状膨大なタグ付けされた学習データがあるからそれを元にAIがある程度自動的にタグ付けしてくれる。

あとブラウザが表示してる時点でdataで突っ込もうがcanvasに描こうがデータは手元にあるしchromiumはオープンソースだしで一番厄介な本腰入れてやるやつらには意味がない。むしろ誰でもある程度の機材と知識があればできる状態じゃないってことはそいつらが金稼ぎやすくなってるだけ。

そもそも絵はダメだけどTransscribeやTranslateは使うぜってスタンスがダブスタすぎる。AIと生成AIという区分けしたがるタイプは大体コレ。

Permalink | 記事への反応(0) | 00:42

2024-04-11

■anond:20240409084539

増田がいっているのとは違うかもしれないけど、チェックボックスとセットの事例は海外サービスでよく目にすると思う。

例えば Notion とか Slack の Canvas でチェックボックスリストを作って、それにチェックしたときがそれ。マークダウンが書けるようになった Google Docs でも同じ。マークダウンの文化なのかな。

その流れで、チェックボックスがなくても打ち消し線だけで「選択済み」を表すようになったのだろうか？

Permalink | 記事への反応(1) | 09:53

2022-09-13

■[稀ドメインはてブ]2022年 8月滅多にホットエントリを出さないドメイン からのホットエントリ

ここ1年で初めてはてなブックマーク日毎の総合人気エントリ入りしたドメインからのホットエントリ、ブクマ数順トップ30

anond:20210804000508 でやってみたものと同じ。滅多にホットエントリを出さないサーバからのホットエントリと言ったほうが正確なのかな。

ブクマ数	タイトル	ドメイン
1187	腕に針を刺して体内の血糖値を常時記録する「フリースタイルリブレ」で糖質と血糖値の関係を徹底的に調査した	manualog.net
1097	新型コロナ後遺症チートシート（対策一覧）	longcovid.jp
980	ひろゆきとガーシーとFC2 高橋氏について - 続・はてなポイント３万を使い切るまで死なない日記	kawango.hatenablog.com
929	ひろゆきの賠償金未払いの真相について（追記あり） - 続・はてなポイント３万を使い切るまで死なない日記	kawango.hatenablog.com
888	やっぱ「邦ロック」聴いても音楽聴いたことにならなくない？という話──サマソニにおける差別的な言動を通して - 屋上より	leoleonni.hatenablog.com
817	Readable	readable.joisino.net
755	peco、パートナー・ryuchellの告白に思いつづる「最高の彼氏だったし、最高の旦那さんだった」 - モデルプレス	mdpr.jp
695	インターネット番組「ポリタス TV」の出演休止/降板について	kyokotominaga.com
664	Mac ユーザーにおすすめしたいアプリ 2022年 8月 - loveMac .jp	lovemac .jp
650	集英社りぼん公式サイト	ribon.shueisha.co.jp
624	「ラジオライフ」2022年 10月号の有害図書に関する記事｜三才ブックス	www.sansaibooks.co.jp
595	専門家「死ぬまでもう見られない」と評する歴史的偉業…昆虫大好き小学生が国内3例目の“トゲナナフシのオス”発見｜東海テレビ NEWS	www.tokai-tv.com
573	なれのはてブ - 嫁のはてブが閉鎖しツラいので作りました。	narenohatebu.jp
523	「異世界おじさん」でたかふみはなぜUR 団地に住んでるのか？【こだわりの公団住宅描写】 : さざなみ壊変	sazanami.net
509	日本のアニメ総合データベース「アニメ大全」	anime100.jp
504	SPA 認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ	mizumotok.hatenablog .jp
495	同人音声がすごいことになっている2022 - セミになっちゃた	xcloche.hateblo.jp
474	追悼　安倍晋三元首相～国葬にあたり、広く社会で弔意を～｜クラウドファンディング - White Canvas	sankei.en-jine.com
463	mimic（ミミック）	illustmimic.com
456	SEOの学び方～ SEO 初心者から上級者への道 - SEM リサーチ	www.sem-r.com
450	ソフトウェア開発者は徹夜してはいけない - ソフトウェア工学研究の日々	ishiotks.hatenablog.com
447	Stable Diffusionをいらすとやでファインチューニングする	birdmanikioishota.blog.fc2.com
423	Google Mapsがレビュー数を伸ばすための取り組みとサービスデザイン考察記事｜坪田朋	blog.tsubotax.com
418	安倍晋三さんが命がけで開いた戦後レジームからの脱却　統一教会問題はこう解決せよ【山本一郎】	web-willmagazine.com
405	COCOA ログを詳細分析できる「COCOA ログ .jp」	cocoalog.jp
405	おかっぱ美少年データベース - 蓮のうてなで君を待つ	grace-3023.hatenablog.com
381	画像生成AI「Stable Diffusion」をGoogle Colabで動かしたメモ - ただいま村	ima.hatenablog .jp
370	八木啓代のひとりごと本当に怖い統一教会の実態〜　ラテンアメリカでの暗躍	nobuyoyagi.blog16.fc2.com
362	ハードワークで人は成長するか - SaaS 企業で働くプロダクトマネージャーのブログ	www.blockchainengineer.tokyo
352	Stable Diffusion メモ: キャンバスの縦横比は構図にどれくらい影響するか - jt_noSke's diary	jtnoske.hateblo.jp