[{"data":1,"prerenderedAt":555},["ShallowReactive",2],{"content-/2026-08-10-diary":3,"all-pages-for-dir":535,"related-/2026-08-10-diary":536,"og-image-/2026-08-10-diary":554},{"id":4,"title":5,"body":6,"category":516,"concepts":517,"description":518,"extension":519,"meta":520,"navigation":457,"ogImage":517,"path":521,"project_name":522,"published":523,"publishedAt":524,"seo":525,"source":526,"stem":527,"tags":528,"todo":517,"unpublished":523,"updatedAt":517,"__hash__":534},"pages/2026-08/2026-08-10/diary-2026-08-10.md","2026年8月10日の開発日記 - 図解カタログ27型をグリッドに載せ直した",{"type":7,"value":8,"toc":499},"minimark",[9,14,18,21,25,32,35,40,43,46,52,71,82,85,89,92,95,98,102,116,124,126,130,133,136,140,151,159,161,165,168,171,179,181,185,188,191,199,202,204,207,416,418,421,441,443,446,472,474,477],[10,11,13],"h1",{"id":12},"_2026年8月10日の開発日記","2026年8月10日の開発日記",[15,16,17],"p",{},"朝、図解カタログのページを開いたら、作例が7枚まとめて黒く塗りつぶされていた。\nスタイルの当て方が原因で、図そのものが壊れたわけではない。\nそこを直してから、一日かけて27枚をグリッドに載せ直した。\nただ、最初に敷いたグリッドは的を外していた。",[15,19,20],{},"動いていたセッションは19本で、プロジェクトは2つだった。\n図解の作業と並行して、家業の鍵屋サイトの検索対策と、設定を2台で共有する移行を進めた。",[22,23,24],"h2",{"id":24},"今日のタイムライン",[15,26,27],{},[28,29],"img",{"alt":30,"src":31},"タイムライン","/2026-08/2026-08-10/timeline-2026-08-10.png",[22,33,34],{"id":34},"今日やったこと",[36,37,39],"h3",{"id":38},"_1-図解カタログ27型をグリッドで整列させた","1. 図解カタログ27型をグリッドで整列させた",[15,41,42],{},"黒塗りを直させ、作例27枚とページ見出しを日本語表記に変えさせ、トップページに導線カードを置かせた。\nそこからが本題で、27枚をピクセル単位で整列させた。",[15,44,45],{},"最初は一律12カラムの背景を敷いた。\nところが図の上に載せてみると、そのカラムは図が何を成立させたかと噛み合っていない。\n実測させると、プロセス図は工程の列が8本で幅が100、空きが12だった。\nタイムラインは60px/月、ガントは64px/週で刻まれていた。\n軸の単位から逆算しないとグリッドは引けない、という形に行き着いた。",[15,47,48],{},[49,50,51],"strong",{},"主な成果:",[53,54,55,59,62,65,68],"ul",{},[56,57,58],"li",{},"27型それぞれに意味グリッドを定義し、Codex のレビュー指摘を反映した",[56,60,61],{},"作例にグリッド表示のトグルを付け、表示を整列版のSVGへ切り替えた",[56,63,64],{},"色とフォントの検査（パレット外の色、純黒、許可外フォント）を advisory で lint に足した",[56,66,67],{},"図解カタログ側にも4型を追加し、29型から33型になった",[56,69,70],{},"整列の手順を図解スキルと索引へ書き戻した",[15,72,73,76,77],{},[49,74,75],{},"詳細:"," ",[78,79,81],"a",{"href":80},"/diagram-catalog-grid-alignment","図解カタログ27型をグリッドで整列させ、手順をスキルへ戻すまで",[83,84],"hr",{},[36,86,88],{"id":87},"_2-家業の鍵屋サイトのローカルseo","2. 家業の鍵屋サイトのローカルSEO",[15,90,91],{},"検索結果に自分のサイト名が出ていなかった。\n原因を構造化データの不足まで追わせて、全ページに設定させた。",[15,93,94],{},"あるキーワードで調べたら、1ページ目に競合がほとんど入っていなかった。\nそこを狙う専用ページを新設した。",[15,96,97],{},"トップページの記事カードも作り替えた。\nカードを見ても記事の中身が想像できない状態だったので、記事の中にある画像を出す形に変え、サムネイルも内容に合うものへ差し替えさせた。",[15,99,100],{},[49,101,51],{},[53,103,104,107,110,113],{},[56,105,106],{},"検索結果にサイト名を出すための構造化データを追加",[56,108,109],{},"競合が手薄なキーワード向けに専用ページを新設",[56,111,112],{},"電話発信をアクセス解析のキーイベントとして設定した記録を残した",[56,114,115],{},"記事カードを記事内画像の表示に変更し、参照がなくなった旧サムネイルを削除",[15,117,118,76,120],{},[49,119,75],{},[78,121,123],{"href":122},"/locksmith-site-local-seo","家業の鍵屋サイトで、検索結果に出るサイト名と記事カードの画像を直す",[83,125],{},[36,127,129],{"id":128},"_3-claude-code-の設定を2台で共有する移行","3. Claude Code の設定を2台で共有する移行",[15,131,132],{},"セッションを開いたら、起動時のフックが失敗していた。\n参照先が Mac 側のパスのままで、Windows にはそのファイルが無い。",[15,134,135],{},"移行に入る前に、判断すべき項目が4件残っていた。\n自分と同じように2台で設定を共有している人はいるはずだ。\n一般的なやり方を先に調べさせてから方針を決めた。\n着手前に現状をコミットさせて復元点を作り、移行後に未了3件を翌日へ残した。",[15,137,138],{},[49,139,51],{},[53,141,142,145,148],{},[56,143,144],{},"移行計画と判断への回答をコミットし、着手前の復元点を作った",[56,146,147],{},"画面設定は実測できる項目だけ確定させ、夜間の時間指定は保留にした",[56,149,150],{},"移行完了の記録と、翌日に持ち越す3件を残した",[15,152,153,76,155],{},[49,154,75],{},[78,156,158],{"href":157},"/dotclaude-two-machine-migration","Claude Code の設定一式を Windows と Mac の2台で共有する移行作業",[83,160],{},[36,162,164],{"id":163},"_4-セッションをまたいだ指示の受け渡し","4. セッションをまたいだ指示の受け渡し",[15,166,167],{},"別のセッションで動いている Claude Code から、ブラウザ経由でこのセッションへ指示が届く形を運用した。\n届いたメッセージには、本人の発言ではなく承認の代わりにもならない、という注記が入る。\n受け取ったあとは元のセッションへ進捗を報告し返させて、往復にした。",[15,169,170],{},"設定ファイルを壊しかねない作業の直前で、一度コミットして退避した。\n引き継ぎ先では落ちていたテスト3件も直させてから、まとめてコミットしている。",[15,172,173,76,175],{},[49,174,75],{},[78,176,178],{"href":177},"/cross-session-handoff","Claude Code のセッション同士をブラウザ経由でつなぎ、作業を引き継がせた",[83,180],{},[36,182,184],{"id":183},"_5-cloudflare-os-のモデル調達を調べた","5. Cloudflare OS のモデル調達を調べた",[15,186,187],{},"組織にAIエージェントを配る基盤として公開された Cloudflare OS について、推論がどの経路を通るのかを調べさせた。\n気になっていたのは、ChatGPT のプランに含まれる Codex の枠をそのまま流用できるかどうかだった。\n結論は、使えない。\nその理由と、Claude Code から呼ぶ形なら定額枠が生きる境目まで整理して記事にした。",[15,189,190],{},"従量課金だと予算が取りづらいという話から、プリペイド払いの存在も確認できた。",[15,192,193,76,195],{},[49,194,75],{},[78,196,198],{"href":197},"/cloudflare-os-model-setup","Cloudflare OS に生成AIをどう入れるか — Codex の定額枠は使えない",[15,200,201],{},"そのほか、公開しないメモを2件残した。",[83,203],{},[22,205,206],{"id":206},"今日の試行錯誤",[208,209,210,232],"table",{},[211,212,213],"thead",{},[214,215,216,220,223,226,229],"tr",{},[217,218,219],"th",{},"#",[217,221,222],{},"テーマ",[217,224,225],{},"試したこと",[217,227,228],{},"結果",[217,230,231],{},"気づき",[233,234,235,253,269,285,301,317,333,350,366,383,400],"tbody",{},[214,236,237,241,244,247,250],{},[238,239,240],"td",{},"1",[238,242,243],{},"図解カタログ",[238,245,246],{},"カタログページを開いて全作例を目視確認",[238,248,249],{},"7枚が黒塗り",[238,251,252],{},"class スタイルに依存した作例だけが落ちていた",[214,254,255,258,260,263,266],{},[238,256,257],{},"2",[238,259,243],{},[238,261,262],{},"参照元のトーンをどう取り込むか、実装前に設計を出させた",[238,264,265],{},"採用",[238,267,268],{},"決裁フォームを立て直して方針を先に固めた",[214,270,271,274,276,279,282],{},[238,272,273],{},"3",[238,275,243],{},[238,277,278],{},"背景に一律12カラムのグリッドを敷いた",[238,280,281],{},"外した",[238,283,284],{},"カラムが図の成立条件と関係しておらず、軸の単位から逆算する形へ変えた",[214,286,287,290,292,295,298],{},[238,288,289],{},"4",[238,291,243],{},[238,293,294],{},"Before/After を並べたが After の変化を確認できない",[238,296,297],{},"改善",[238,299,300],{},"背景に基準線を敷いて初めて差が見えた",[214,302,303,306,308,311,314],{},[238,304,305],{},"5",[238,307,243],{},[238,309,310],{},"階層レイヤー図は Before が物足りなかった",[238,312,313],{},"作り替え",[238,315,316],{},"After のパターンへ寄せる判断をした",[214,318,319,322,324,327,330],{},[238,320,321],{},"6",[238,323,243],{},[238,325,326],{},"二重に存在するカタログを統合するか検討",[238,328,329],{},"統合しない",[238,331,332],{},"役割が違うので無理に1つにしなくてよい",[214,334,335,338,341,344,347],{},[238,336,337],{},"7",[238,339,340],{},"設定の2台共有",[238,342,343],{},"起動時フックのエラーを追った",[238,345,346],{},"原因特定",[238,348,349],{},"参照先が Mac のパスのままだった",[214,351,352,355,357,360,363],{},[238,353,354],{},"8",[238,356,340],{},[238,358,359],{},"実装より先に判断4件を片付けた",[238,361,362],{},"決着",[238,364,365],{},"使わない機能（夜間の時間指定）は保留のまま進めた",[214,367,368,371,374,377,380],{},[238,369,370],{},"9",[238,372,373],{},"セッション連携",[238,375,376],{},"別セッションへブラウザ経由で指示を送った",[238,378,379],{},"往復成立",[238,381,382],{},"指示を貼るセッションを一度間違えた",[214,384,385,388,391,394,397],{},[238,386,387],{},"10",[238,389,390],{},"鍵屋サイト",[238,392,393],{},"サイト名が検索結果に出ない原因を追った",[238,395,396],{},"構造化データを追加",[238,398,399],{},"キャッシュを2回疑ってから設定の不足に行き着いた",[214,401,402,405,407,410,413],{},[238,403,404],{},"11",[238,406,390],{},[238,408,409],{},"トップの記事カードを記事内画像の表示に変更",[238,411,412],{},"成功",[238,414,415],{},"サムネイルが記事とかみ合っていない問題も一緒に直した",[83,417],{},[22,419,420],{"id":420},"今日の学び",[53,422,423,426,429,432,435,438],{},[56,424,425],{},"グリッドは図の描画結果からは引けない。軸の単位（月、週、工程）を先に決めないと、載せた線が図の意味と無関係になる",[56,427,428],{},"整える順序は上からではなく下から。末端の兄弟を等間隔で確定してから親を置く",[56,430,431],{},"Before/After は並べるだけでは伝わらない。背景に基準線を敷いて初めて差が見える",[56,433,434],{},"二重に存在するカタログを、無理に統合しなくてよい場面がある",[56,436,437],{},"設定を2台で共有するときは、実装より先に判断を片付ける。判断が残ったまま手を動かすと戻る",[56,439,440],{},"壊しかねない作業の前にコミットしておくと、その後の判断が軽くなる",[83,442],{},[22,444,445],{"id":445},"明日やること",[53,447,450,460,466],{"className":448},[449],"contains-task-list",[56,451,454,459],{"className":452},[453],"task-list-item",[455,456],"input",{"disabled":457,"type":458},true,"checkbox"," 設定の2台共有で残した未了3件を片付ける",[56,461,463,465],{"className":462},[453],[455,464],{"disabled":457,"type":458}," 図解カタログの33型について、構造規律の Before/After 修正案を実装に落とす",[56,467,469,471],{"className":468},[453],[455,470],{"disabled":457,"type":458}," 非公開メモに残した2件の内容を読み直して、公開するかどうか決める",[83,473],{},[22,475,476],{"id":476},"関連記事",[53,478,479,483,487,491,495],{},[56,480,481],{},[78,482,81],{"href":80},[56,484,485],{},[78,486,123],{"href":122},[56,488,489],{},[78,490,158],{"href":157},[56,492,493],{},[78,494,178],{"href":177},[56,496,497],{},[78,498,198],{"href":197},{"title":500,"searchDepth":501,"depth":501,"links":502},"",2,[503,504,512,513,514,515],{"id":24,"depth":501,"text":24},{"id":34,"depth":501,"text":34,"children":505},[506,508,509,510,511],{"id":38,"depth":507,"text":39},3,{"id":87,"depth":507,"text":88},{"id":128,"depth":507,"text":129},{"id":163,"depth":507,"text":164},{"id":183,"depth":507,"text":184},{"id":206,"depth":501,"text":206},{"id":420,"depth":501,"text":420},{"id":445,"depth":501,"text":445},{"id":476,"depth":501,"text":476},"diary",null,"作例が黒く塗りつぶされる不具合から始まり、27型をピクセル単位で整列させるまで。家業の鍵屋サイトのローカルSEO、設定の2台共有、セッションをまたいだ指示の受け渡しも並行して進めた一日。","md",{},"/2026-08-10-diary","daily-log",false,"2026-08-10T00:00:00.000Z",{"title":5,"description":518},"make-diary","2026-08/2026-08-10/diary-2026-08-10",[529,530,531,532,533],"日記","図解","SVG","ローカルSEO","Claude Code","UeemoSXzieE_PsbvPX-IgsNGNrux5utJ_Yjf5mrAYjk",[],[537,538,542,546,550],{"title":81,"path":80,"publishedAt":524},{"title":539,"path":540,"publishedAt":541},"公開されているClaude Code用の図解スキルを、クローンせずにデューデリジェンスした","/svg-diagram-pattern-library-due-diligence","2026-08-09T00:00:00.000Z",{"title":543,"path":544,"publishedAt":545},"デロイトの351ページ資料は「7つの型」だけでできていた ─ note記事からSVG図解スキルに足りない要素を洗い出した","/svg-diagram-skill-deloitte-7-types-review","2026-07-16T00:00:00.000Z",{"title":547,"path":548,"publishedAt":549},"SVG図解を4:3比率から解放する ─ スキルに縦流しルールを追加して記事図解を一括刷新した","/svg-diagram-vertical-flow-rule","2026-07-04T00:00:00.000Z",{"title":551,"path":552,"publishedAt":553},"SVG-diagramスキルに ①②③ の中央寄せとカード下パディングのルールを追加","/svg-diagram-skill-numbering-padding","2026-07-01T00:00:00.000Z","https://log.eurekapu.com/og/blog/2026-08-10-diary.png?v=2026-08-10T00%3A00%3A00.000Z&title=2026%E5%B9%B48%E6%9C%8810%E6%97%A5%E3%81%AE%E9%96%8B%E7%99%BA%E6%97%A5%E8%A8%98%20-%20%E5%9B%B3%E8%A7%A3%E3%82%AB%E3%82%BF%E3%83%AD%E3%82%B027%E5%9E%8B%E3%82%92%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%81%AB%E8%BC%89%E3%81%9B%E7%9B%B4%E3%81%97%E3%81%9F&author=Kei%20Komatsu&sig=78ffad573e43d113",1786424477937]