📋️ 【制作日誌】深夜の自作CMS大改修!Webhook自動化から完璧なJSON-LDまで一晩で構築した話
気がつけば時計は午前4時……。 ふとした思いつきから始まった自作CMS(万能ノート)の改修作業でしたが、過集中(ゾーン)に入ってしまい、インフラの自動化から最先端のSEO対策まで、一晩でサイトのエコシステム全体をひっくり返すレベルの大改修を行ってしまいました。
今回は、未来の自分のための備忘録(Post-it)として、今夜構築したシステムとアーキテクチャの全貌をまとめておきます。
📱 1. MacroDroid × Webhookによる「完全自動投稿システム」の構築
外出先やスマホから、思いついたアイデアを即座に自作CMSへ流し込むためのパイプラインを開通させました。
* Webhookの受信とパース: スマホのMacroDroidから送信されたMarkdown形式のテキストを、PHPで安全に受信・解析するロジックを実装。 * 強固なセキュリティ(API-Key): エンドポイントが第三者に叩かれないよう、HTTPヘッダーにカスタムキー(API-Key)を仕込み、完全な認証システムを構築。これでスパムの恐怖とは無縁に。
🏗️ 2. W3Cもニッコリ。美しすぎるセマンティックHTML5
Markdownから吐き出されるフラットなHTMLを、PHPのパーサー側で高度に処理し、完璧な文書構造(DOMツリー)へと変換する仕組みを作りました。
* ページ全体を <article> で包み、各呟き(時間ごと)を <section> で分割。 * itemprop="headline" や aria-label も完備。 * 5chやLINEのように時系列(昇順)で長々と表示させることで、月ごとの「チリツモ」効果を狙い、SEO的に評価される「情報密度の高い長文コンテンツ」へ育てる設計に。 * 重要なメモにはシンプルに 🔖 マークを付け、CSSを重くせずに視認性(UX)を極限まで高める工夫も実装。
🔗 3. 著作権クリアとホワイトハットSEOの導線設計
クリエイターとして最も重要な「権利関係」と「サイト間の回遊性」のルールを定義しました。
* 公式リファレンスの扱い: 元ネタの画像(Apexのレイスなど)は自サーバーに保存せず、公式へのテキストリンクやX(Twitter)の埋め込み(Embed)を徹底。DMCAリスクをゼロに。 * AI生成画像の明記: 構想段階でGemini等に生成してもらった画像には、透明性を担保するためにクレジットを添える運用ルールを策定。 * 最強のハブ(内部リンク): ノートの「描きたいキャラメモ」から、本家サイト(霊狐の神楽舞)の「完成したイラスト記事」へリンクを繋ぐことで、Googleが最も喜ぶ自然な文脈のリンクエコシステムを構築。
🤖 4. Googlebotを歓喜させる完璧な「構造化データ(JSON-LD)」
これが今夜のハイライト。ガワ(HTML)だけでなく、中身(データ)も最高峰のSEO仕様にアップグレードしました。
* sameAs によるドメイン権威の統合: 万能ノート側の BlogPosting の著者情報に、本家サイト(reiko-kagura.ink)のURLを紐付け。これにより「この2つのサイトは同一のクリエイター(シスター † アンネ)が運営している」とGoogleに完全に認識させ、E-E-A-T(専門性・権威性・信頼性)を共有する最強のパイプラインが完成。 * 本家ギャラリーの ImageObject 完璧化: 本家サイトのイラスト一覧(70件超)に、Google画像検索で「ライセンス可」バッジを表示させるためのプロパティ(creditText, license 等)や、動的な閲覧数(InteractionStatistic)を網羅した、1000点満点のJSON-LDを実装。無断転載対策としても最強の防衛線に。
🌅 まとめ:チリツモが山となる日を夢見て
「メモにするほどでもない付箋(Post-it)」から始まった構想が、一晩でここまで堅牢なシステムに育つとは思いませんでした。 これからはスマホから気軽に呟くだけで、システムが自動的に月別アーカイブを生成し、美しいHTMLとJSON-LDでGoogleにインデックスされていきます。