[Javascript] GoogleBloggerのHTMLを簡単に取得できるライブラリ

2025/07/03

GoogleBlogger Javascript Tool

t f B! P L
eyecatch 最近もっぱら活躍してくれているホームページ制作の仕様が、GoogleBloggerを使って、WordPressっぽく誰でも簡単にページ編集できるというやりかたです。 でも、Feedの扱いやら、データ取得のAjaxやら、セットするのがめんどいというのはよくわかります。 個人的に、自分ライブラリをコピペしてこれまで使っていたんですが、 今後爆発的に管理が増えてくる予感がしたので、ライブラリ化しておくことにしました。

概要

静的なHTMLホームページを作って、ニュース一覧を表示したり、子階層のページの内容をそっくりそのままHTMLを取り込む事で、 内容のコンテンツ部分を、ゴッソリとそのままGoogleBloggerで管理するというやり方を実現するためのライブラリです。 GoogleBloggerには、大きく分けて、ブログコンテンツと、ページコンテンツの2つの種類があり、 「お知らせ」や「ニュース」などのリスト表示するアイテム系は、ブログとして登録して、ラベルで種別を切り分け、 ページをそのまま表示したければ、ページ機能を使う事で、手軽にHTMLと、公開日(日時)管理、タイトル文字列のデータが管理できます。 このやり方の最大のメリットは、サーバー管理がGoogleがやってくれるので、お金もかからなければ、gmailアカウントがあれば、手軽に使えてしまうというメリットだらけなんですよね。 ※もしもの時のサーバー障害などは、対応できないので、よほどSLAなどが必要なサービスページなどの場合は、サブ的な要素で使うことを検討ください。

Github

https://github.com/yugeta/load_blogger MITライセンスなので、煮るなり焼くなりお好きにお使いください。(何かあれば自己責任ですが、)

使い方

githubでcloneしたモジュールをサイト内に設置して、以下の工程で、GoogleBloggerからのデータ取得ができるようになります。 ※GoogleBloggerの設定は事前にしてあることを前提にしています。

1. Javascriptで、bloggerクラスを読み込む

import { Blogger } from "../../../plugin/load_blogger/src/blogger.js"

2. Bloggerクラスのインスタンスを作成(newする)

new Blogger({ blog_id : "※blogger_idを登録(※注1)", type : "pages", max_results : 1, path : `ページpathを登録(※注2)`, }).promise.then((res)=>{ this.#loaded(res.datas) }) ※注1 : blogger_idは、GoogleBloggerの管理画面のURLから取得できます。 ※注2 : ページpathは、GoogleBloggerでページ登録をして後悔した時の、https://example.com/p/@@@.html の /p/@@@.html の箇所です。(@@@は、ページタイトルがアルファベットの場合はそのままですが、日本語の場合は何かしらのコードに置き換わります、また全て小文字になるので必ず確認してください) 上記の設定は、特定ページ単体を取得する書き方ですが、pathをセットせずに、max_resultsを調整することで、全て(一部)のページデータを読みこむことも可能です。

3. 取得したデータからHTMLをページに貼り付ける

取得できるデータは、次の通り。
date : 公開日 (year-month-day) time : 公開時間 (hour-minute-second) url : 公開URL title : ページ(ブログ)タイトル label : セットされているラベル(複数の場合もあるので、配列データです) img : サムネイル画像のURL img_m : サムネイルの中サイズ(w:800px) img_s : サムネイルの小サイズ(w:400px) html : ページ(ブログ記事)のhtml(登録されているHTMLデータ) text : ページの文字列(htmlのタグ無しバージョン)
データ取得後、ご自身のサイトに合わせてhtmlをinnerしてあげることで、動的ページの出来上がりです。 若干の読み込み遅延は、ご愛嬌ですが、よほど読み込みページの画像やらコンテンツ内容が膨大じゃない限りかなり有効なツールだと自画自賛しています。

あとがき

GoogleBloggerで、ホームページの更新箇所を動的に読み込むためのプラグインを紹介しましたが、 ブロガー自体をホームページのように改良して公開することも可能です。 独自ドメインも無料で使えるし(DNS設定が必要ですが・・・)、 うちの会社では、ホームページを無料で運用したいというクライアントさんには、 この方法でホームページを構築して提供しているので、すでにたくさんの実績を保有しています。 いや〜、WOrdpressなんか使わずに、なんでみんなこの方法を使わないのか不思議ですね。 天下のGoogleが管理してくれているサービスを無料で使えるので、むしろ安心感すらあるのに。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ