ブログの技術的背景
概要
本ブログ「Blogress」を構築するにあたり採用した技術構成、および実装における工夫の記録。
1. 構成
- SSG: Astro
- CMS: microCMS
- Infra: Cloudflare Pages
2. 実装の工夫
動的INDEX（目次）の自動付与
cheerio を用いて取得したHTMLを解析。h2, h3 タグを抽出してIDを動的に付与し、ページ上部に自動でINDEX（目次）を展開する。
フローとストックの統合：MomentsのSNS化
短文のつぶやき（Moments）と長文の記事（Blog）を統合。特にMomentsにおいては、公式アプリを介さず「iOSショートカット × microCMS API」の連携により、iPhoneのホーム画面から直接投稿する仕組みを構築。
Base64による画像アップロードの突破
microCMSの標準的な「画像フィールド」を介さず、iPhoneから送信されたバイナリデータをBase64形式で「テキストエリア」へ保存。フロントエンド側でURL形式とBase64形式を自動判別（startsWith('http')）して表示するハイブリッド・レンダリングを実装し、爆速投稿と画像表示を両立。
関連記事のフィルタリング
各記事のカテゴリ情報をキーに、microCMSのAPIクエリで同一カテゴリかつIDが異なる記事を抽出。