PB-100の宇宙の中の人
PBロッキーの日記

11年のお付き合いとなったBlogger改造のおもひでとWebサービス盛衰の点描

Yahoo! Pipes のスクリーンショットを wikipedia.org のものからPBロッキーが記録していたものに差し替えました。(2020/1/10)


盛況のうちに終わった Google Blogger Advent Calendar 2019 の最終日にはイラストレーターのさんがつ氏によるアドベントカレンダー参加者を書き込んだイラストが公開されました。PBロッキーの姿も描いて頂きました。是非探してみてください。(2019/01/05 追記)

Google Blogger Advent Calendar 2019 25日全てが投稿で埋まる

記事は Google Blogger Advent Calendar 2019 の23日目です。“Google が提供するブログサービス Blogger ですが、横のつながりを持つ機能がありません。ゆるく一緒に遊んでみるのもいいかと思い、カレンダーを作ることにしました。”という企画です。

23日担当の僕、PBロッキーは11年のお付き合いとなった Blogger テンプレートのカスタマイズの日々を、当 Web サイトの運営史と、出会ってはお別れした外部の Web サービスとのアレコレを交えつつ書き留めてみます。読者の方がお世話になった Web サービスが出てきたら一緒に涙してください。

気が付けば10年を超えた Blogger との付き合い

こことは別のブログですが Blogger に本格的に触り始めたのは2008年の7月でした。以来 Blogger とは11年以上のお付き合いになるわけです。この間にもいくつもの Web サービスが現れては消えました。時にユーザーが紡いだ膨大な量の知的活動の成果物ともども消滅しました。

そんな中で Blogger が存続し現在もアップデートを続けていることは、この11年の間に晴れの日も雨の日も折に触れて Blogger に記録を残し続けた僕には幸いなことでした。11年の月日を遡ることが出来たのも Blogger のお陰です。

そうそう、この昼にも投稿一覧を開くと新しいデザインにアップデートされていました。Google のサービスへの意欲に安堵する瞬間です。

安定しなかった0年代のBloggerの苦い想いで

2008年以前には、文章を書くのが好きなバイト先のチーフに店舗のブログを始めては、と勧めたのが Blogger でした。生憎とチーフが Web フォーム内で書き上げた記事は投稿の前に消えてしまいました。今にして思うと Blogger のせいではなく当時の Web ブラウザの問題だったのかも知れません。

何れにしろ、まずはメモ帳で執筆する、などと気の利いた助言が出来なかったことは申し訳ない事でした。少なくとも僕の退職までの間にチーフが再び Blogger に向かうことはありませんでした。

高いカスタマイズ性と広告も出ない太っ腹

2009年から2012年まで使用したデザイン、但しスクリーンショットは2011年に撮影

PBロッキーのブログをここ Blogger で始めたのは2009年6月の事でした。当時の僕は Blogger のカスタマイズの自由さに惚れ込んでいました。

Yahoo!ジオシティーズで運営していたホームページとブログを同じデザインにして、見ための上では両者をシームレスに繋ぎました。これが出来ないならばブログを始めることは無かったようにも思います。そしてデフォルトで広告が表示されない点も納得のデザインをする上で助けになりました。

2009年の僕は、趣味でも仕事でも Web 技術に関わっていましたがサーバをレンタルするには至りませんでした。レンタルサーバ会社への入金が止まった段階で Web サイトが消えてしまうようでは、ハイパーテキストを未来に遺すという運営の主旨に叶わないからです。

Bloggerと無料サービスを使ってCGIのような事をする

外部のデータによって内容が更新されるホーム。スクリーンショットは2013年の web.archive.orgより

しかし無料サービスで出来ることに不満があったのも事実です。そんな折に Blogger の BlogList ウィジェットを使って CGI のようなことをするテクニックを考案します。

BlogList ウィジェットは外部のブログを登録するとそのフィードを取得して、最新の投稿のタイトルとサムネイル等を表示します。このような外部のブログは複数を登録できます。

ここに登録するのが外部のブログではなく、表示させたい任意のコンテンツをフィード形式にしたものにすると、貴方の Blogger に存在しないコンテンツを注入することが出来ます。このような任意のフィードを作ってくれる無料の Web サービスが提供されていて恩恵に与りました。

マッシュアップの時代、Yahoo! Pipesとともに

Yahoo! Pipes で2つのブログのフィードを合わせて時系列順で一つに並べる、2009年のスクリーンショット

それが米国 Yahoo の提供する Yahoo! Pipes です。Pipes は各 Web サービスが発行しているデータを、Pipes の Web GUI 上で様々に加工した後に json や jsonp, XML などの形式で再発行してくれました。勿論ブログフィードでの発行も出来ました。

Pipes が登場した2007年2月の背景としてさまざまな企業や団体が所有するデータベースを公開する WebAPI を整備するようになり、これらのデータを組み合わせることで新たなサービスを生み出すマッシュアップという手法が注目されました。このマッシュアップの時代に華麗に登場したのが優れた UI を備えた Pipes でした。

残念ながら Pipes は2015年9月30日に終了します。ややあけて2016年1月に当サイトは Google Apps Script で同等の機能を実装しました。お陰様で現在も pb-100.blogspot.com のホームでは、PB-100の宇宙のサイト群の更新情報をマッシュアップして表示しています。

ファイル置き場の流転の日々

執筆時点の land.to、息の長いサービスです

BlogList ウィジェットを使った改造に味を占めた僕は順調に Blogger に嵌っていくのですが、度々悩まされたのが CSS, Javascript 等の置き場所です。

当初は無料ホームページサービスながら他ドメインからファイルを呼び出すことが出来た land.to を利用していました。しかし引け目を感じて Google Code へ移ります。Google Code では初めてオープンソースプロジェクトのオーナーになるということでドキドキしました。

Google Code の2015年の閉鎖を経て Dropbox の公開フォルダにファイルを移します。間もなく2017年の公開フォルダの無効化を経て Github Pages に移ることとなりました。

Github Pages で落ち着いた感はあったのですが、http: でアクセスしても https: にリダイレクトしてしまうためゲーム機等の古いブラウザで閲覧できない問題がありました。2019年3月にホームページを Google App Engine に移した際に、リダイレクトの無い GAE を Blogger 用のファイル置き場にしました。

こうして振り返ると、ようやく腰が据わったという気がします。

日付出来事
2015年1月25日Google Code の閉鎖
2016年8月31日Google ドライブの Web ホスティング機能の廃止には巻き込まれませんでした
2017年3月15日Dropbox は無料ユーザー向けの公開フォルダが無効に
2019年3月31日Yahoo!ジオシティーズの終了
現在Google App Engine をファイル置き場に

2015年からBlogger改造熱の再燃、2016年にリリースのSNS対策の新機能

2015年に私の Blogger 熱は再燃し、再びテンプレートの改造と Web デザインの改善に力を入れるようになりました。なんとこの時の熱は現在も続いていて、4年半に渡って様々なスクリーンサイズとメディアで閲覧性の優れるテキストサイト用の HTML, CSS の開発を続けています。

そんな折に2016年の春から初夏にかけて Blogger のテンプレートに強力な新記法が登場したのでした。

resizeImageオペレーター

Twitter Card Validator で OGP 対応を確認する

resizeImage()によって Google Photo 等に置いた画像を任意のピクセルサイズに縮小したり、トリミングが出来るようになります。72pxで固定だった記事一覧のサムネイル画像のサイズが柔軟に設定できるようになりました。しかし何よりも大きいのは OGP の提供が可能になった点だと思います。

この記法の登場で SNS でシェアする際に、効果的に記事中の一番最初の画像を引用することが出来るようになりました。

ラムダ式

Google の検索結果にパンくずリストが反映されている

同時期に登場したラムダ式によって、記事にパンくずリストを追加したり、画像の無い記事にラベルに基づいた代替のサムネイル画像を追加する、といった従来に比して高度な処理を行えるようになりました。

Google の定義した XML がブログを生成するプログラム言語であることをより印象付ける変更です。しかし実のところ XML でプログラムを書くのはしんどいです。XML で無ければどれほど楽だったかなと思いつつ、しかし目当ての表示を実現できるだけで有難いと思って頑張る他ありません。

レイアウトバージョン2についても

2010年に登場し2011年まで段階的にアップデートが行われたレイアウトバージョン2にも触れておきます。

レイアウトバージョン2ではウィジェットのプロパティが整理され、<b:defaultmarkup> に定義した内容を種類の異なるウィジェット間で <b:include> できるようになりました。現在このブログのテンプレートは2555行という長大なものになっていますが、コードを再利用する仕組みが整ったお陰でなんとかメンテナンスが出来ている感じです。

最新のレイアウトバージョンは2017年に登場した3ですが、<data:blog.isMobile> によるモバイルとデスクトップの内容の切り替えが出来なくなっている為、レイアウトバージョン2を使い続けています。


僕がこれらを自身のテンプレートに取り込むのは2018年頭頃で、新機能のリリースから2年弱のタイムラグがありました。Blogger のテンプレート改造に関する情報は少なく、Google 提供のテンプレートのソースコードを見て新機能の存在を知ったりしていました。

2018年の海外のテンプレート配布サイトには、これら機能を利用していないテンプレートも散見されました。更にはサムネイルの画像のリサイズを javascript で行っているものもあって、javascript を切った状態で閲覧すると寂しいデザインになってしまっていました。

2019年3月のYahoo!ジオシティーズの閉鎖によりWebサイトをGoogle App Engineに移行

2003年から16年弱に渡って間借りしてきた無料ホームページサービスのYahoo!ジオシティーズが遂にその幕を降ろしました。当サイトの移転先は Google App Engine としました。

2009年よりこの間、頑なに避け続けていたレンタルサーバですが GAE は隔世の感があり無料枠の範囲でも使い勝手が大変に良いです。いつしか Blogger のコンテンツも GAE に移して Web サイトのコンテンツと併せて一元的に管理したいと考えるようになりました。

Blogger への不満

将来に GAE へ移行できれば、この間に Blogger に対して感じた諸々の不満から解放されます。ということで最後は Blogger への不満について軽く触れておきます。

  1. format オペレーターの出力が日本標準時の9時間だけ遅れている
  2. 投稿ページで次の記事、前の記事のタイトル等が表示できない
  3. スタティックページの更新日時を表示できない
  4. ページ数付きのナビゲーションができない
  5. ラベル一覧で記事数を超えて、前の記事へのリンクが提供される
  6. しっかりした AMP 対応が出来ない
  7. PWA が出来ない、但しサードパーティードメインを設定すれば可能に思えるツイートで訂正しました
  8. サードパーティドメインの設定が出来ない、私は昨年暮れからトライして設定できていません
  9. スタティックページとコメントの内容が検索ウィジェットの検索対象ではない
  10. テンプレートを改造した際の CSS と Javascript 等の置き場所に困る
  11. 記事一覧画面が必ずしもユーザーが設定した記事数を表示しない場合がある
    • 一覧画面に表示される記事の分量が一定を超えないように記事が減らされる
    • <!--more--> を長文の記事に設定すると解消する

上記の中には Javascript で補えるものもあります。しかし Ajax や DHTML といった手法は閲覧者の回線とマシンリソースに負荷を掛けます。そもそも Javascript が切られている場合に欠落が生じるため、特に Web 文書に於いては可能な限りサーバ側でコンテンツを用意したいところです。

ブログサービス全般の問題

続いて Blogger に限らず無料ブログサービス全般の不満についても触れておきます。

  1. 移転したサイトのリンク更新などで記事の一括検索、一括更新が出来ない
  2. 記事の更新履歴を残すことが出来ない

Web 上に良質な公開ノートを残す、その為に遠からずブログサービスを卒業する日が来ると思います。

最後に

在りし日の Blogger の管理画面

うまくすれば来年の今頃は Blogger から卒業しているかもしれませんが、しかし未だに強くお勧めのサービスであることは変わりません。

“無料 ブログ”で真っ先に検索結果に出てくるアメブロなどではなく、落ち着いてじっくり執筆の出来る、無用な広告を閲覧者に浴びせ掛けない、Google の堅牢なインフラの上に構築された Blogger を是非ご検討下さい。

いざとなったら記事のエクスポート機能もキッチリ提供されているので何とかなります。つまり Blogger は強くお勧めなわけであります。

アドベントカレンダーについて

前日、22日の記事はののさんで『Blogger へんぴだけど居心地がいい』です。明日24日の記事はいししさんで『Blogger への道』です。