  |
はてなキーワード:utf-8とは
以下ChatGPT
自分のホームページ（自前ドメイン＋自前HTML）を一度でも作って運用すると、SNS中心の“受け手”視点から、仕様・検索・配信・所有・継続の“作り手”視点に脳が切り替わる。結果、情報リテラシーは跳ね上がり、ネットのニュースや流行の見え方が根本から変わる——しかも想像以上に。
Before（作る前）:Web＝SNSのタイムライン。良し悪しは「バズってるか」「見やすいか」
After（作った後）:Web＝プロトコル＋ブラウザ＋HTML/CSS/JS＋CDN＋検索エンジン。
ページは**文書（Document）**であり、配置（IA）、意味づけ（セマンティクス）、配信（HTTP/HTTPS/HTTP/2/3）、キャッシュ戦略が気になりだす。
→ 同じ記事でも「タイトルの付け方」「hタグ構造」「画像最適化」「OGP」「サイトマップ」がまず目に入るようになる。
プラットフォーム依存の脆さを体感：規約変更やシャドウバンで露出が消える。
自サイトの資産化：ドメインに紐づくURLはリンクされ、検索に積み上がり、10年後も生きる。
POSSE（Publish (on your) Own Site, Syndicate Elsewhere）：まず自分のサイトに出してから外部へ配信する習慣が身につく。
3. “好き/嫌い”から“なぜ速い・なぜ遅い”へ
CoreWeb Vitals（LCP/FID/CLS）や画像の遅延読み込み、フォント最適化の重要性が腹落ちする。
広告・計測タグの重さに過敏になる。読者体験を壊さないためのパフォーマンス予算という概念が生まれる。
キーワード選定は“流入ゲーム”ではなく読者の課題→コンテンツ設計に帰着。
内部リンク・パンくず・スキーマ（構造化データ）・サイトマップの意味が実務として理解できる。
“書けば伸びる”ではなく“検索意図を満たす設計が伸びる”に目が覚める。
alt、見出し階層、コントラスト比、キーボード操作、焦点管理など、見えない品質が最重要になる。
デザインは飾りではなく“読み・理解・操作”のためのユーティリティだと分かる。
たまたま当たる1記事より、更新の継続・アーカイブ性・RSSのほうが効くと実感。
コメント欄・メールフォーム・X連携よりも、ニュースレターやRSS購読者の質に価値を見出す。
ドメイン、DNS、証明書、バックアップ、法務（特商法・プライバシーポリシー）に“運用者の責任”が生まれる。
その重みが情報の信頼性を引き上げる（＝他人のサイトの苦労も見えるようになる）。
トレンドは“輸入”ではなく選別になる。自分の歴史に合うものだけを採用して積層していける。
A. 最小HTML（雛形）
<meta charset="utf-8" />
<metaname="viewport" content="width=device-width,initial-scale=1" />
<title>あなたの名前 |ホーム</title>
<metaname="description" content="自分のホームページ。制作物・日記・メモを置いていきます。">
<link rel="alternate" type="application/rss+xml"title="RSS"href="/feed.xml">
<meta property="og:title" content="あなたの名前 |ホーム">
<meta property="og:description" content="自分のホームページ。制作物・日記・メモ。">
<meta property="og:type" content="website">
<nav>Home /About /Posts</nav>
<footer>© 2025あなたの名前</footer>
GitHubPages（Jekyll標準。Rubyベース、Node不要）
CloudflarePages（静的ファイルを置くだけで高速CDN）
レンタルサーバー（静的HTML＋SFTP/rsyncで十分）
C.ドメインの基本
DNSはA/AAAA/CAA/TXT最低限、HTTPS必須（Let’s Encryptで無料化）。
D. “最低限の品質チェック”5点
ログを読む：SearchConsoleと簡易アクセスログで“本文よりメタ情報”を磨く。
アーカイブ主義：記事は追記で更新。URLは変えない。Versioningを意識。
https://profile.hatena.ne.jp/dorawii_bukuma/
はてなのサイト側で読み込まれているはずのrksトークンを生成する関数を直接叩く方法がどうしても分からず結局request処理を自分で書く方法ではなく自動でUI側の保存ボタンをクリックするという無難な方向に落ち着いた。
最初から後者の方法をとっていればもっと全然早く作れたのにというは所詮言い訳か。
とにかくスクリプトを公開しておく。
@echo off
cd /d "C:\Users\user\Documents\jsscript"
:: Nodeサーバーを別ウィンドウで起動
start /min "" noderun-batch-server.js
::Pythonサーバーを別ウィンドウで起動（hatenaserver配下）
start cmd /k ""python hatenaserver\server.py
{
"username": "",
"password": ""
}from flask import Flask, request,jsonify
importjson
importos
from hatena_client import HatenaClient
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
config_path =os.path.join(os.path.dirname(__file__), 'config.json')
withopen(config_path, encoding='utf-8')as f:
config =json.load(f)
@app.route('/bookmark', methods=['POST'])
def handle_bookmark():
data = request.json
url = data.get("url")
if noturl:
returnjsonify({"error": "MissingURL"}), 400
client = HatenaClient(config["username"],config["password"])
client.start_browser()
if notclient.login():
client.quit()
returnjsonify({"error": "Login failed"}),403
success =client.add_bookmark(url)
client.quit()
returnjsonify({"status": "ok" if success else "fail"})
if __name__ == "__main__":
app.run(port=12347)
// ==UserScript==
// @name自動セルクマ送信
// @namespace tampermonkey.net/
// @version 2025-08-07
// @descriptiontry totakeoverthe world!
// @authorYou
// @matchanond.hatelabo.jp/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
consturl = location.href;
if (!/^https:\/\/anond\.hatelabo\.jp\/\d+$/.test(url)) return;
const editLink = document.querySelector('a.edit');
if (!editLink) {
// 既に編集ページなので処理をスキップ
console.log('編集リンクが存在するため、スクリプトを終了します。');
return;
}
fetch('localhost:12347/bookmark', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body:JSON.stringify({url:url })
}).then(r =>console.log("通知成功")).catch(e =>console.error("通知失敗", e));
})();
-----BEGINPGP SIGNEDMESSAGE-----Hash: SHA512https://anond.hatelabo.jp/20250821192753# -----BEGINPGP SIGNATURE-----iHUEARYKAB0WIQTEe8eLwpVRSViDKR5wMdsubs4+SAUCaKb0qwAKCRBwMdsubs4+SHfiAQDcXmTHBaZ5Zzr1KI/OxZ0xl69oevOdy1FXJYwYvsmo5AD/ZPtZiO1JgTDjm+27iymlkdzIXOIGWfC82UTr1mJ7EwU==YoV+-----ENDPGP SIGNATURE-----
これでも年収日本円換算で1,2億確約されてるなら別に構わないと思う
日本だとこれで1000万円届かないことありそう
<script asyncsrc="https://platform.twitter.com/widgets.js" charset="utf-8"></script>Scott Wuが買収したWindsurfチームに送ったメッセージえぐいな
「我々が求める仕事の水準は極めて高い。我々はワークライフバランスを信じていない。入社するなら、オフィスで週6日、週80時間以上働くことに同意することになる」…—久保田 雅也@Coalis (@kubotamas)August 5, 2025
軽トラのことがまた話題になってるが視野狭窄だ。端的に言って、軽トラや軽自動車が日本だけの商品と考えているのが大本の間違いだ。軽自動車はグローバル商品なんだよ。
https://b.hatena.ne.jp/entry/s/togetter.com/li/2584277
google:image:chevrolet damasで画像検索してみてくれ。見覚えのある軽バンが出てくるだろう。スズキエブリー（キャリーバン）だ。だがシボレーのバッジをつけているのだ。しかも左ハンドル。更にエンジンは韓国大宇製だ。何者だこれは。
これはスズキキャリーバンをGMがライセンス生産しているものである。
次はgoogle:image:suzuki bolanとgoogle:image:Carry Dabbaだ。
これはスズキキャリーをパキスタンで生産しているものだ。因みにパキスタンは左側通行なので右ハンドル。
この元になったキャリーは実は2スト360cc時代のもの。それに今の法規制に適合する4スト800ccEFIなんかのエンジンを載せているという異常進化を遂げている。
因みにこの生産ラインは、インドネシアキャリーがモデルチャンジする際に売却されたものと思われる。
お次はgoogle:image:piaggio porterだ。ピアッジオはベスパスクーターで有名な2輪メーカーだ。ダイハツハイゼットがそのピアッジオのエンブレムを付けてイタリアや他のEU諸国を走っている。
これはダイハツが生産した部品を現地でノックダウン生産しているものだ。外装のプラ部品や内装品は現地生産しているので見た目がかなり違う。
ついでにgoogle:image:piaggio porter ambulanceではハイゼットの救急車が見られるぞ。ゲテモノっぽいし狭苦しいのだが、道が狭い、ローマなどの歴史地区では無くてはならない車だ。
更にこのポーターのトラックの方が香港の救急車に改造されたのも見る事ができるだろう。日本→イタリア→香港と海を渡っているんだな。
日本だけ見てるとホンダが軽トラ撤退した意味は分からない。でもスズキとダイハツはこういう風に世界中で生産しているのだ。特にスズキは「グローバル軽自動車」界での巨人で、本当に世界中で生産されている。
このグローバル展開の鍵は実はアメリカの車メーカー（と韓国大宇）で、東南アジアを牙城としつつ、その勢力圏から離れる南米、中央アジア、中東ではGMやフォードがライセンス生産しているのである。
この馴れ初めは、経済が発展途上だった韓国でGMと大宇が合弁して現地ライセンス生産をしていた事に始まる。またフォードも台湾などで軽自動車のライセンス生産をしていた。
ホンダの場合は海外展開が北米に寄っている。北米は豊かなので軽トラ軽バンなどの市場とならない。
だからホンダの軽トラはモデルチェンジしたら古いモデルのラインは廃棄か部品生産用に低稼働となる。
だがスズキの場合は無駄にならないのだ。他国に売却するし技術指導もするからだ。更にライセンス生産だけじゃなくてOEMやノックダウン供給もやっている。
すると規模の経済が全然違うのだ。故に生産コストが断然有利だ。
すると、ホンダとしてはこういう条件で戦うのだったらOEM供給受けた方が良いということになる。
まあそういう訳で、軽自動車を日本だけで作っているという考えは間違い。特に軽トラ軽バンは昔からグローバル商品で、最近ではワゴンRもそれに続いている。多分、10年後の東南アジアや南米はワゴンRだらけだろう。
同時に、アメリカの車メーカー（GMとフォード）が世界中で軽自動車を作りまくっているので、アメ車メーカー＝デカい車しか作れない無能と考えるのも間違いだってことだ。それは米国市場だけのことなのだ。
ステランティス会長が「EUも軽自動車規格作れ」と言ったのはこういうのを見据えてのことだ。規格が通ったら、ハンガリーにスズキの工場があるので東欧はワゴンRとエブリイだらけになると思われるよ。
そういう事を逐一説明した増田を前に投稿したが長くてあまり読まれなかった。気になる人はドーゾ→https://anond.hatelabo.jp/20250625180545
自民党中央政治大学院という、大学ではない自民党内部の組織がある模様。
こういう勉強会？をするような内部の組織を維持できるっていうのは政党として重要なのだろう。
チャンネルURLのNewkomeitoってなんなんですかね。新しいの？
チャンネル登録者が少ない。社民党の次、日本保守党より少ない。
なんでこんなに少ないんだろう。
オードリー・タンとの対談なんかは、後で見てみてもいいかな？と思う。
チームみらいの安野貴博と対談してるのは、敵に塩を送った形なんでしょうか。
チャンネルURLがOishinJpn。そのOはどこから来た？大阪のOなの？
対談者の人選が疑問。成田悠輔、箕輪厚介、堀江貴文、呂布カルマ、ひろゆき。
正直なところ、動画のサムネイルをざーと眺めて、視聴したくなるような動画はなかった。
ネットをうまく使っていると言われることも多いが、どういう点なのかまだわかっていない。
結局は、伝えるべき政策がしっかりしていないと意味がないのだろう。
動画本数は最も多い。
国会の動画は見たことないので、興味のある分野でどういう質問がされているのかは後で見てみてもいいかな。
チャンネル登録者がかなり多い。参政党の次で2位。その割に選挙の結果はぱっとしない。
登録者が多いほど当選しやすいと単純化はできないだろうが40万人以上は立派な数字。
サムネイルがYoutubeっぽい。これは他の党も見習うべきでは？
ReHacQ、PIVOT、文藝春秋PLUS、TBSCROSS DIGとか、あのあたりの雰囲気のサムネイル。
人よりかはテーマを前に出したサムネイルで、興味を引きやすい。
ワクチンには興味がある、移民には興味がある、消費税には興味があるという人をひきつける。
この点は他の党と大きく異なる。
実際それは合理的でもある。政治家なんてものは、本来は国民の代理人でしかない。
国民がやりたいこと実現したいことではあるがひとりではできないことを、代わりにやる存在。
参政党のチャンネルを見た後だと、雰囲気が違うことがよくわかる。
候補者の紹介で、名前を売りたいのはわかるが、なんのテーマに興味がある人なのか、
サムネイルに書いておいてくれないとクリックしようという気になれない。
しかし、そういう組織だった動きができていない点が、選挙の結果にも表れている。
チャンネルURLが安野貴博。個人のYoutubeチャンネルを、政党のものとして使用している？
ここもまだ、組織だった動きができていない。
対談相手は多いので、密度は維新よりも薄いがここでも、堀江貴文、呂布カルマ、ひろゆき。
対談受けてくれる人ならだれでもいいの？
AIの解説をしていてDeep Seek, Devin, Grok, Cursorなどの名前が出てくるのは他の党にはない特徴。
情報ありがとう。動画105本と少なめではあるが、動画の方向性はおもしろ、親しみやすさを狙った方向性。
<html lang="ja"><head> <meta charset="UTF-8"> <title>GrokのPONGゲーム</title> <style>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; } </style></head><body>0 : 0<canvasid="gameCanvas" width="800" height="400"></canvas> <script>constcanvas = document.getElementById('gameCanvas');const ctx =canvas.getContext('2d');constscoreDisplay = 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 }; letscoreLeft = 0,scoreRight = 0; //キー入力constkeys = { w:false, s:false, ArrowUp:false, ArrowDown:false }; document.addEventListener('keydown', e => { if (keys.hasOwnProperty(e.key))keys[e.key] =true; }); document.addEventListener('keyup', e => { if (keys.hasOwnProperty(e.key))keys[e.key] =false; }); //ゲームループ function gameLoop() { // 移動 if (keys.w && paddleLeft.y> 0) paddleLeft.y -= paddleLeft.speed; if (keys.s && paddleLeft.y <canvas.height - paddleLeft.height) paddleLeft.y += paddleLeft.speed; if (keys.ArrowUp && paddleRight.y> 0) paddleRight.y -= paddleRight.speed; if (keys.ArrowDown && paddleRight.y <canvas.height - paddleRight.height) paddleRight.y += paddleRight.speed; //ボール移動 ball.x += ball.speedX; ball.y += ball.speedY; // 壁衝突 if (ball.y + ball.radius>canvas.height || ball.y - ball.radius < 0) ball.speedY = -ball.speedY; //パドル衝突 if ( (ball.x - ball.radius < paddleLeft.x + paddleLeft.width && ball.y> paddleLeft.y && ball.y < paddleLeft.y + paddleLeft.height) || (ball.x + ball.radius> paddleRight.x && ball.y> paddleRight.y && ball.y < paddleRight.y + paddleRight.height) ) { ball.speedX = -ball.speedX * 1.05; // 少し加速 } //得点 if (ball.x < 0) {scoreRight++; ballReset(); } if (ball.x>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()> 0.5 ? 5 : -5) * (Math.random() * 0.5 + 0.75); ball.speedY = (Math.random() * 4 - 2); } gameLoop(); </script></body></html>
<html lang="ja"><head> <meta charset="UTF-8"> <metaname="viewport" content="width=device-width, initial-scale=1.0"> <title>PONG Game</title> <style>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 solidwhite;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 solidwhite;padding:10px20px; font-size: 16px; cursor: pointer; font-family: 'Courier New', monospace;margin:10px; } .start-button:hover {background-color:white;color: black; }</style>```</head><body>```<script> //Canvas要素とコンテキストの取得constcanvas = document.getElementById('gameCanvas');const ctx =canvas.getContext('2d'); //ゲームの状態管理 let gameRunning =false; let animationId; //スコア要素の取得const playerScoreElement = document.getElementById('playerScore');constcomputerScoreElement = 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 } }; //キーボード入力の処理constkeys = {}; //キーが押されたときの処理 document.addEventListener('keydown', (e) => {keys[e.key.toLowerCase()] =true; //ゲームが停止中にスペースキーでゲーム開始 if (e.key === ' ' && !gameRunning) { startGame(); } }); //キーが離されたときの処理 document.addEventListener('keyup', (e) => {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 < 0) { game.playerPaddle.y = 0; } if (game.playerPaddle.y>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; //ボールとパドルの中心の差を計算constdifference = ballCenterY - paddleCenterY; // 反応に少し遅れを持たせる（人間らしい動き） if (Math.abs(difference)>10) { if (difference> 0) { game.computerPaddle.y += game.computerPaddle.speed; } else { game.computerPaddle.y -= game.computerPaddle.speed; } } //コンピューターパドルの画面外移動を防ぐ if (game.computerPaddle.y < 0) { game.computerPaddle.y = 0; } if (game.computerPaddle.y>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 < 0 || game.ball.y + game.ball.radius>canvas.height) { game.ball.speedY = -game.ball.speedY; } //プレイヤーパドルとの衝突判定 if (game.ball.x - game.ball.radius < game.playerPaddle.x + game.playerPaddle.width && game.ball.x + game.ball.radius> game.playerPaddle.x && game.ball.y + game.ball.radius> game.playerPaddle.y && game.ball.y - game.ball.radius < 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) < game.ball.maxSpeed) { game.ball.speedX *= 1.02; } } //コンピューターパドルとの衝突判定 if (game.ball.x + game.ball.radius> game.computerPaddle.x && game.ball.x - game.ball.radius < game.computerPaddle.x + game.computerPaddle.width && game.ball.y + game.ball.radius> game.computerPaddle.y && game.ball.y - game.ball.radius < 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) < game.ball.maxSpeed) { game.ball.speedX *= 1.02; } } //ボールが左右の壁を越えた場合（得点処理） if (game.ball.x < 0) { //コンピューターの得点 game.score.computer++; updateScore(); resetBall(); } else if (game.ball.x>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()> 0.5 ? 4 : -4); game.ball.speedY = (Math.random() - 0.5) * 6; } //スコア表示の更新 function updateScore() { playerScoreElement.textContent = game.score.player;computerScoreElement.textContent = game.score.computer; } // 描画処理 functiondraw() { // 画面をクリア 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();</script>```</body></html>
ここで言う「プログラミング初級者」とはプログラミングの記述が上から下へ向かって順番に処理されること、条件分岐やループという概念があることを理解しており、RPGゲームが作れる「RPGツクール(現RPG Maker)」や学童向けプログラミング環境「Scratch」、「ナビつき! つくってわかる はじめてゲームプログラミング(ナビつく)」、ADVゲームが作れる「吉里吉里(もしくは吉里吉里2)」、過去にBASICやC、HSP、Javascriptあたりでプログラミングへ挑戦し挫折したなどなど、ある程度の「プログラマブルなロジック」構築の経験がある者を指します。
ある時、筆者はふと思いました。「生成AIはなんだかんだで膨大なテキスト情報を処理している事がキモだよなぁ」とありきたりなことを。
そして、同時にプログラミング初級者の弱点として「現在記述されているコードの管理においてテキストと実際の処理フローが脳内で一致しない」「プログラミング言語ごとに定められているルールや関数予約語の把握が困難」なのが問題とも考えました。
前述したプログラミング初級者の弱点の考え自体は車輪の再発明であり、「Scratch」や、より高度な「UML」が既に存在しており、特筆すべきことは何もありません。
しかし、「Scratch」や「UML」、なんなら「RPGツクール」や「吉里吉里」などに無い点として、現代では自然言語処理が大幅に向上した生成AIが実用の域にまで到達しつつあるのが従来とは異なる点でした。
つまり、自然言語を混ぜ込みやすいテキストベースの言語、かつ、処理を記述するとフローが視覚的に理解しやすい言語、可能であれば情報量が多くて一部の界隈で広く使われている言語があればプログラミング初級者も気軽にプログラミングできるのではないか？と発想しました。
コンピュータ(コンパイラやインタプリタなどソフトウェアを含む)が解することができる言語にはプログラミング言語以外にも様々あり、今回取り上げるのは「データ記述言語」と呼ばれるものです。
データ記述言語の中でもグラフ作成へ特化しており、特にフローチャート作成で真価を発揮する「DOT言語」というものがあります。
早速ですが、実際に手を動かしてみましょう。ちなみにDOT言語はGraphviz OnlineというWebツールがあるため別途に何かしらをインストールして環境構築する必要はありません。便利な世の中ですね。
上記のGraphviz Onlineを開くと、既に左側のDOT言語で記述された内容が、右側で作図されています。DOT言語はこのような図を作図するためのデータ記述言語です。
一旦、左側の記述をCtrl+Aで全選択をしDeleteなどで全削除し、下記の内容をコピペしてみましょう。
digraph graphname {
A -> B;
}
DOT言語の詳細な使い方は様々なWebサイトやブログ記事、Qiitaなどへ譲るとして、A - > Bの見た目から発想の転換をしてみると処理Aから処理Bという流れに見えませんか？
DOT言語は生成AIを利用する上で有利なテキストベースでありながらグラフを作成できるのがキモであり、例えばこのA -> BがA「Webページを開いたら」 → B「Hello, Worldと表示する」という風にできるのであれば処理のフローが可視化されており本当に素晴らしいことです。
ここでプログラミングの有識者は「DOT言語をUMLなどに見立てて処理を記述するのは良いが、プログラミング初心者は求めた結果を出力するロジックやアルゴリズムを発想する知見や経験値が圧倒的に足りていないのが問題ではないか？」と至極真っ当かつ反論の余地がない問題点の指摘をすると思いますが、そこで活きるのが生成AIです。
生成AIは初級者プログラマ個人のロジックやアルゴリズムの作成能力へ無関係にロジックやアルゴリズムを生成できる(可能性が少なくともある)ので、処理のフローをDOT言語で記述することにより処理フローから初級者プログラマが求めるプログラムを生成AIへ推論させ生成させるというのが狙いです。実際に試してみましょう。
digraph graphname {
A[
label = "Webページを表示する"
];
B[
label = "Webページを表示したらHello, worldとテキストを表示する"
];
A -> B;
}
プログラミングの有識者はこの時点で「なるほど、自然言語の記述をそのままDOT言語に入れ込んでしまうのか」と気付いたのではないかと思います。
このDOT言語をGoogle Gemini 2.5Flashへ「下記のデータ記述言語のDOT言語で記述された処理フローをJavascript言語へ変換をしWebページ上へ「Hello,world」を表示したいので変換をお願いします。」と命令すると以下のコードが生成されました。
<!DOCTYPEhtml>
<html lang="ja">
<head>
<meta charset="UTF-8">
<metaname="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World Page</title>
</head>
<body>
<divid="output"></div>
<script>
//Webページが表示されたら（DOMが完全に読み込まれたら）実行される
document.addEventListener('DOMContentLoaded', function() {
// "Webページを表示する"ステップは、このHTMLファイル自体が表示されることで達成されます。
// "Webページを表示したらHello, worldとテキストを表示する"ステップ
const outputDiv = document.getElementById('output');
outputDiv.textContent = 'Hello, world';
});
</script>
</body>
</html>
フローを記述する利点は、ロジックやアルゴリズムを発想する知見や経験値が足りなくとも、フローのステップが明確に分かれているので生成AIが処理を切り分けて推論してくれることであり、そしてプログラミング初心者自身がフローチャートを視覚で確認できるので「Aを処理したらBを処理する」と切り分けて考えやすいことです。
また、求めている結果ではなく誤った結果が生成されても、A - > B - > Cとフローを細分化していくことで生成AIの推論精度を高めていくことができるのも利点です。
より生成AIへ精度の高い推論をしてもらうために補足情報を付加するのも有用です。
digraph graphname {
A[
label = "Webページを表示する"
];
B[
label = "Webページを表示したらHello, worldとテキストを表示する",
comment = "Webページが完全に読み込まれるまで待機"
];
A -> B;
}
labelの記述内容もcommentの記述内容も生成AIが推論のための情報として利用するので誤った結果が生成されてもA - > B - > Cとフローを細分化しなくとも良い場合があります。
DOT言語を知るプログラミング有識者が「DOT言語の仕様を考えれば確かにそうだが、その発想はなかった」と言っていただけるであろうDOT言語コード例だとこういう記述方法もアリです。
digraph増田コード {
最初の処理[
label = "Webページを表示する"
];
次の処理[
label = "Webページを表示したらHello, worldとテキストを表示する",
comment = "Webページが完全に読み込まれるまで待機"
];
最初の処理 -> 次の処理;
}
ノードの名称へ自然言語を採用することにより、例えばゲームプログラミング時に「キャラクターがジャンプする」という読んだそのままな処理のためのノード、というか一般的に言うオブジェクトを作成することが可能で、後は->で繋げて処理をさせられます。
ちなみに別のノードを作成する際に「"キャラクターがジャンプする"から継承する」の様なことをcommentなどへ記述しておくと生成AIが推論して継承します。なんならcommentなどへ「キャラクター画像にimage.gifを使用」などと記述しておくとファイルの読み込みもします。
更にDOT言語にはカスタム要素という仕様が存在しており、DOT言語の仕様で定められた予約語以外も使用が可能です。
digraph増田コード {
最初の処理[
label = "Webページを表示する"
];
次の処理[
label = "Webページを表示したらHello, worldとテキストを表示する",
comment = "Webページが完全に読み込まれるまで待機",
font_style = "フォントを太字のボールド体、色を赤(#FF0000)とする"
];
最初の処理 -> 次の処理;
}
生成AIはカスタム要素の名称からも推論を発揮し、上記の場合であればフォントスタイルを指定していると推論をするので生成AIの推論精度を高める補足情報として機能します。
つまりこれはカスタム要素の名称として"Action"などの名称を採用すると"動作"として推論をし、"decision"ならば"条件分岐"ですし、"input"ならば"入力"ですし、"loop"ならば"繰り返し"ですし、"Type"ならば"種別"です。
より詳細に process[type="Action"] などのノードを作成してどんどん生成AIの推論精度を高めていくことが可能であり、そろそろ察してきているかと思いますが 処理[種別="動作"] と自然言語で記述しても機能します。
プログラミング有識者は更に「プログラム言語自体の予約語、例えばJavascriptを生成する事を前提にlengthを名称にすると配列を使おうとするのか？」と疑問に感じるでしょうがお察しの通りで生成AIは配列を使おうとするので、敢えて使いたいプログラム言語の機能や外部ライブラリなどがある場合は補足情報として機能する形で記述しておくと生成AIは推論へ利用します(まぁそこまで知識ある方なら該当のプログラム言語使ったほうが手っ取り早いと思いますが)。
以上をもって「生成AIを利用したプログラミング初級者向けの温故知新な提案」を終えたいと思います。
色々とツッコミどころには筆者自身が気付いていて。例えば「結局はDOT言語の仕様を覚えないといけないのでは？」とか「プログラミング初級者に任せると生成前のソースであるDOT言語コードがスパゲッティになりそうだよな」とか「面倒くせぇから普通にプログラミング覚えろや」とか理解してますし至極真っ当かつ反論の余地がないと思ってます。
今回の提案のプログラミング有識者向けの本質は「生成AIへ向いた中間言語の発掘」であり、「DOT言語ならそこそこ普及してるしプログラミング初級者でも扱えるんじゃね？」と業務中に発想したものを書き留め公開いたしました。
何かプログラミング有識者の皆さんからより良い発想があれば参考にしたいと考えていますのでよろしくお願いいたします。以上。
Permalink |記事への反応(36) | 19:36
どこが岡田斗司夫なの？とかひどいこと書いてる！などというズレてる反応が多い。
しかし岡田斗司夫がしばしば使用する（と思われている）語尾である「～なんだよな」を用いた構文ははすでに若者のあいだでは岡田斗司夫ミームとして普及しており、インターネットでは広く使用されている
岡田斗司夫本人をゲストに迎えたバキ童の動画でも「岡田斗司夫ミーム」を取り上げている。バキ童チャンネルは10～20代の接触YouTubeチャンネルランキングでは7位に入っている人気チャンネルである（https://toyokeizai.net/articles/photo/759701?pn=3 ）
今回のようなはてなブックマーカーの要領を得ないリアクションは、はてな村の著しい高齢化、また動画文化を毛嫌いして文字文化を好む強いこだわり、さらに冗談を介さない彼らの特徴的な発達特性、知らないことを恥とは考えない厚顔っぷりなどが合わさったがゆえの不幸な文明の衝突なんだよな
Permalink |記事への反応(18) | 13:20
一度投稿したうえで別タブを開いてプログラム的(fetch)に送信してその別タブが閉じられる仕組み。
// ==UserScript== // @namePGP未署名検出と別タブ自動編集 // @namespacehttp://tampermonkey.net/ // @version 1.0 // @descriptionPGP署名がない投稿を自動編集ページへ誘導 // @matchhttps://anond.hatelabo.jp/* // @grantGM_setValue // @grantGM_getValue // @grantGM.openInTab // ==/UserScript== (function () { 'use strict';constbody = document.getElementById('entry-page'); if (!body) return;consttitleText = document.title; if (!titleText.includes('dorawii')) return;constpgpRegex = /BEGIN.*PGP(?: SIGNEDMESSAGE| SIGNATURE)?/;const preElements = document.querySelectorAll('div.body pre'); let hasPgpSignature =false; for (const pre of preElements) { if (pgpRegex.test(pre.textContent)) { hasPgpSignature =true; break; } } if (hasPgpSignature) return;const editLink = document.querySelector('a.edit');const childTab =GM.openInTab(editLink.href, {active:false, insert:true,setParent:true }); })();
// ==UserScript== // @name編集ページ処理と自動送信・閉じ // @namespacehttp://tampermonkey.net/ // @version 1.0 // @description編集ページで署名処理と送信、タブ自動閉じ // @matchhttps://anond.hatelabo.jp/dorawii_31/edit?id=* // @grantGM_getValue // @grantGM_xmlhttpRequest // @grantGM_setClipboard // @grantGM_notification // @connectlocalhost // ==/UserScript== (async function () { 'use strict';const shouldRun = awaitGM_getValue('open-tab-for-edit', '0');consttextareaId = 'text-body';consttextarea = document.getElementById(textareaId); if (!textarea) return;const content =textarea.value;constpgpSignatureRegex = /-----BEGINPGP SIGNEDMESSAGE-----[\s\S]+?-----BEGINPGP SIGNATURE-----[\s\S]+?-----ENDPGP SIGNATURE-----/; if (pgpSignatureRegex.test(content)) {console.log('[PGPスクリプト]署名が検出されたためそのまま送信します'); return; }consthttpRequest = (url, data) => { return newPromise((resolve,reject) => {GM_xmlhttpRequest({ method: 'POST',url:url, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: `value=${encodeURIComponent(data)}`,onload: function (response) { resolve(response.responseText); },onerror: function (error) {reject(error); } }); }); }; //textarea の値を取得 // 1.現在のページのURLからURLオブジェクトを作成const currentUrl = newURL(window.location.href); // 2.ベースとなる部分 (例: "https://anond.hatelabo.jp") を取得constorigin = currentUrl.origin; // 3. 'id'パラメータの値 (例: "20250610184705") を取得constidValue = currentUrl.searchParams.get('id'); // 4.ベース部分とIDを結合して、目的のURL文字列を生成 //idValueが取得できた場合のみ実行する let newUrl = null; if (idValue) { newUrl = `${origin}/${idValue}`; } // 5. 生成されたURLを変数に代入し、コンソールに出力して確認console.log(newUrl);constvalueToSend = newUrl;try {const signatureText = awaithttpRequest('http://localhost:12345/run-batch',valueToSend);console.log('バッチ応答:', signatureText); if (!signatureText.includes('BEGINPGP SIGNEDMESSAGE')) { alert('PGP署名がクリップボードに見つかりませんでした。'); return; }const newText = content.replace(/\s*$/, '') + '\n' + signatureText + '\n';textarea.value = newText;console.log('[PGPスクリプト]署名を貼り付けました。送信を再開します。');const form = document.forms.edit;const newForm = form.cloneNode(true); form.replaceWith(newForm); newForm.addEventListener('submit', async (e) => { e.preventDefault(); //HTML標準のsubmitをキャンセルconstbodyText =textarea?.value || ''; //reCAPTCHAトークンの取得constrecaptchaToken = await newPromise((resolve) => { grecaptcha.enterprise.ready(() => { grecaptcha.enterprise.execute('hoge', {action: 'EDIT' }) .then(resolve); }); }); // POSTするデータの構築const formData = new FormData(newForm); formData.set('body',bodyText); formData.set('recaptcha_token',recaptchaToken); formData.set('edit', '1');try {constresponse = await fetch(newForm.action, { method: 'POST',body: formData, credentials: 'same-origin' }); if (response.ok) {console.log('送信成功'); window.close(); } else {console.error('送信失敗',response.status); } }catch (err) {console.error('送信中にエラーが発生', err); } }); //プログラム的に送信トリガー newForm.dispatchEvent(new Event('submit', { bubbles:true })); }catch (e) {console.error('バッチ呼び出し失敗:', e); } })();
consthttp =require('http');const { exec } =require('child_process');const querystring =require('querystring');const server =http.createServer((req, res) => { if (req.method === 'GET' && req.url === '/ping') { res.writeHead(200); res.end('pong'); } else if (req.method === 'POST' && req.url === '/run-batch') { letbody = ''; req.on('data', chunk => {body += chunk.toString(); }); req.on('end', () => {constparsed = querystring.parse(body);constvalue =parsed.value || 'default'; // 値を引数としてバッチに渡す exec(`C:\\Users\\hoge\\Desktop\\makesign.bat "${value}"`, { encoding: 'utf8' }, (err, stdout, stderr) => { if (err) { res.writeHead(500); res.end('Error executing batch: ' + stderr); } else { res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }); res.end(stdout.trim()); } }); }); } else { res.writeHead(404); res.end('Not found'); }});server.listen(12345, () => {console.log('Batch serverrunningathttp://localhost:12345/');});
@echo offsetlocal enabledelayedexpansion::署名するファイル名set "infile=%~1"set outfile=%TEMP%\pgp_output.asc:: 以前の出力があれば削除if exist "%outfile%" del "%outfile%":signloop::AutoHotkeyでパスフレーズ入力（gpgがパスワード要求するダイアログが出た場合に備える）start "" /b "C:\Users\hoge\Documents\AutoHotkey\autopass.ahk"::PGPクリア署名を作成echo %infile% | gpg --yes --clearsign --output "%outfile%"::署名が成功していればループを抜けるif exist "%outfile%" (goto postprocess) else ( timeout /t 1> nulgoto signloop):postprocesspowershell -nologo -command ^ "$header = '>|'; $footer = '|<'; $body =Get-Content '%outfile%' -Raw;Write-Output ($header + \"`r`n\" + $body + $footer)"powershell -nologo -command ^ "$header = '>|'; $footer = '|<'; $body =Get-Content 'signed.asc' -Raw;Set-Clipboard -Value ($header + \"`r`n\" + $body + $footer)"endlocalexit /b
#Persistent#SingleInstance ignoreSetTitleMatchMode, 2WinWaitActive, pinentrySendInputpasswordSleep 100SendInput {Enter}ExitApp
動けばいいという考えで作っているので余分なコードも含んでいるかもしれない。
-----BEGINPGP SIGNEDMESSAGE-----Hash: SHA512https://anond.hatelabo.jp/20250613185036 -----BEGINPGP SIGNATURE-----iHUEARYKAB0WIQTEe8eLwpVRSViDKR5wMdsubs4+SAUCaEv1FQAKCRBwMdsubs4+SHHkAQDUOLgBcdji2T6MJ7h/vlMdFfGlWAzNdXijjE1gIuEPywEAiMNMZqhrMmtlc7UqRuggNJ/UTa5xTIcKp622+7jJQQg==Lgkl-----ENDPGP SIGNATURE-----
勧められているガイドラインを読むと…
https://www.jiaa.org/wp-content/uploads/2022/08/JIAA_futekisetujirei_20220824.pdf
「過度な肌露出があるもの、性行為を連想させるなど性に関する表現が露骨なもの」
として胸部が煽情的に強調された画像などがアウトとなるようだ。
当時のジェンダークレーマーは冷笑を持って切り捨てられたと記憶しているが、今回との違いは何か。
おそらく、
事にあるのではないか？
少女は胸部を強調するどころか逆に隠している。
| 検索 | 件数 | トップページ | トップページドメイン | ページ順位 |
|---|---|---|---|---|
| google:二十路 | 約 822,000,000 件 （0.19 秒） | sympathy 二十路歌詞 | www.uta-net.com 歌ネット | 17 |
| google:三十路 | 約 13,100,000 件 （0.18 秒） | 三十路祭り | www.union-alpha.jp株式会社ユニオンアルファ | 5 |
| google:四十路 | 約 13,600,000 件 （0.21 秒） | SUPER EIGHT - 四十路少年 (from "超DOME TOUR 二十祭") | www.youtube.comYouTube | 3 |
| google:五十路 | 約 42,700,000 件 （0.19 秒） | 五十路グループ | 五十路.com 五十路グループ | 3 |
| google:六十路 | 約 643,000,000 件 （0.18 秒） | Amazon.co.jp:Dvd 六十路熟女 | www.amazon.co.jpAmazon.jp | 2 |
| google:七十路 | 約 1,360,000 件 （0.23 秒） | 七十路の坂 | michinokuhit.jpみちのくレコード | 5 |
| google:八十路 | 約555,000,000 件 （0.45 秒） | 【5/25発売】八十路の考古学｜「雄山閣」学術専門書籍出版社 | www.yuzankaku.co.jp株式会社雄山閣 | 7 |
| google:九十路 | 約 446,000,000 件 （0.25 秒） | 九十路を楽しむ-今古（きんこ）もじり和歌集 | www.aomoritosyo.co.jp青森県図書教育用品株式会社 | 7 |
このうち、Amazonが1ページ目に出てくるのは四十路～七十路だった。