Blogger APIでAnywhere OSのトップページを作るまで

Anywhere OSの制作ログ1本目です。 今回は、Blogger APIの設定から、トップページのテーマ反映、商品導線の整理までをまとめます。

最初にやりたかったことはシンプルでした。 「どこにいても、学べる。どこにいても、稼げる。」というテーマで、Blogger上にAnywhere OSの母艦になるトップページを作ることです。

APIキーだけでは投稿できなかった

最初は、Blogger APIもAPIキーを取れば投稿できると思っていました。 しかし実際には、投稿や下書き作成にはOAuth 2.0認証が必要でした。

Google CloudでBlogger APIを有効化し、OAuthクライアントを作成し、テストユーザーを追加しました。 その後、認可コードを取得してrefresh tokenに交換し、Blogger APIからアクセストークンを取得できる状態にしました。

下書き投稿はAPIで作れた

OAuth認証が通った後、Blogger APIで下書き投稿を作成しました。 まずは接続テスト用の短い下書きを作り、次にトップページ用のHTML本文を下書きとして投入しました。

ここまではAPIで問題なく進められました。 ただし、ここで重要なことに気づきました。 投稿本文を作っても、ブログのトップページそのものは変わりません。

トップページを変えるにはテーマ編集が必要だった

BloggerのトップURLを開いたときに専用デザインを見せるには、投稿本文ではなくテーマ側の制御が必要でした。 ただし、Bloggerテーマは普通のHTMLではなく、Blogger専用のXMLです。

最初に本文HTMLをそのままテーマ編集画面へ貼ると、<b:skin> が見つからないというエラーになります。 これは、テーマ全体として必要な構造を壊しているという意味でした。

既存テーマをベースにトップだけ差し替えた

そこで、既存テーマXMLをダウンロードし、その構造を残したまま、トップページだけ専用デザインを表示する形にしました。 条件は data:view.isHomepage です。

これにより、トップページではAnywhere OSのブランドページを表示し、記事ページ、ラベルページ、アーカイブなどは既存テーマのまま残せます。 テーマ全体を作り直すのではなく、必要な場所だけを差し替えました。

文字化け対策も必要だった

テーマXMLへ日本語を入れると、環境によって文字化けすることがありました。 そこで、日本語を数値文字参照に変換したテーマXMLも作成しました。

たとえば日本語の文字を ど のような形式にしておくと、Blogger側で文字コードが崩れても、表示時には日本語として解釈されます。 最終的には、この文字化け対策済みテーマを使いました。

商品導線を置いた

トップページには、最初から強い販売導線を置くのではなく、次の3段階で整理しました。

• 無料サンプル: AI生活設計チェックリスト、データ商品アイデア出しシート、制作ログテンプレート
• 制作ログ: API設定、トップページ制作、商品設計の過程
• データ商品: Anywhere OS スターターキット、AI生活設計テンプレート集、データ商品設計シート

まだ商品は完成していません。 それでも、どの順番で価値を届けるかを先に決めておくことで、今後の制作ログや無料サンプルが作りやすくなります。

今回できたこと

• Blogger APIのOAuth認証を通した
• APIで下書き投稿を作成した
• トップページ用HTMLを作成した
• BloggerテーマXMLにトップページ専用デザインを組み込んだ
• 文字化け対策済みテーマを作成した
• トップページに商品導線を反映した

次に作るもの

次は、無料サンプルの1つ目として「AI生活設計チェックリスト」を作ります。 Anywhere OSは、完成品を一気に出すより、作る過程そのものをログとして積み上げる方針です。

小さく作り、小さく公開し、必要な人に届く形へ整えていきます。