サイドバーはブログの本文記事が掲載されている横(サイド)に確保された領域です。ブログの最近の見出しや,管理者のプロフィール,過去の記事へのアーカイブへのリンクなどの「付加情報」を掲載するためによく用いられています(図1)。
図1:ブログのサイドバー(赤い枠で囲んだ部分)
サイドバーは左右,どちらかについていたり,ブログによっては左右の両方についていたりします。左右どちらかについているものを「2ペイン」,両方についているものを「3ペイン」のデザイン,と呼んだりします。ブログによってその設定方法は様々ですが,サイドバーをどう表示するか,ということを,ブログのデザインをカスタマイズする際に選択できるブログサービスも多くなっています。
様々なブログパーツが公開されている
で,ブログの画面に掲載できる部品として配布されているものが「ブログパーツ」です。ブログパーツは,JavaScriptやFlash,iFrameなどを使って作られています。ブログの管理者は,指定された数行のコードを自分のブログのテンプレートにコピーするだけで,簡単に貼り付けができるようになっています。ブログパーツは様々な企業や,また個人の開発者が非営利目的でも公開しており,その選択肢はかなりたくさんあります。Amazonや楽天などオンラインショップのおすすめ商品などを紹介するアフィリエイト目的のもの,天気やニュースなどを表示する情報表示型,時計,マスコットキャラクターを表示したり,ゲームを表示できるものなど,その種類も豊富にそろっています(図2)。
図2:様々なブログパーツ
「ブログパーツ.com」や「ブログイン」など,ブログパーツを紹介することを目的としたブログやウェブサイトもいくつか存在しています。それらをみると,どんなブログパーツが公開されているのかを知ることができるでしょう。
今回ブログパーツの話をしようと思ったのは,筆者が勤務する株式会社はてなのサービス「はてなダイアリー」では,先日ブログパーツを貼り付けられる機能を公開しまして,筆者もその機能の開発に関わったからです。
ブログパーツは,JavaScriptを貼り付けるためのscriptやiframe,Flashムービーを貼り付けるために,objectやembedといった要素(タグ)をブログのテンプレートに貼り付ける必要があります。ブログサービスによっては,そうした要素を貼ることが完全に許可されているところも多いのですが,はてなダイアリーではセキュリティ上の問題から,これまではそうした要素を埋め込めない仕様になっていました。しかし,それはJavaScriptやFlashムービーを何でも埋め込めてしまう場合の話です。多くのブログパーツは危険なはずがありませんから,ホワイトリストを用意して,安全性を確認したブログパーツについては貼ることができるようにしました。
その開発の際に,公開されている様々なブログパーツを調べ,その使い勝手や,ブログパーツというモノの立ち位置などについていろいろと考えたので,ここでもその続きを考えてみたい,と思ったわけです。
ちなみに,ブログパーツは海外ではWidgetとかBadgeとかという名前で呼ばれています。Badgeは「缶バッジ」といった言葉で使うバッジです。確かにブログにバッジを貼り付ける,という感覚だよなあ,と思います。
国内外におけるブログパーツ貼り付けコードの違い
国内外のブログパーツをいろいろ調査して思ったこととして,日本のブログパーツの貼り付け用コードに比べて,海外のブログパーツの貼り付け用コードがすごく複雑だということです。ブログパーツを貼り付けるには,そのブログパーツを提供しているサイトに行って,貼り付け用のコードを取得しなければなりません。その際には,例えば,表示される内容をカスタマイズするために,いくつもの設定項目が用意されていて,そこで自分の好きな設定に変更すると,カスタマイズされたコードが表示されるようになっています。
図3はFlickrのものです。
図3:ブログパーツをカスタマイズしてコードを取得する画面(Flickr)
生成されるFlickr Badgeの貼り付け用のコードはリスト1のようになります。あまりに長くてびっくりします。
リスト1:Flickr Badgeの貼り付け用のコードの例
一方,日本のブログパーツの多くは,非常に簡単です。比較のために,同じフォトシェアリングサービスである「フォト蔵」の貼り付け用コードを以下に示します(リスト2)。
リスト2:フォト蔵の貼り付け用コードの例
Flickrよりは遙かに短くなっていますが,日本製のブログパーツのなかでは,これでもまだ結構長い部類に入ります。もっと短いものだと,SCRIPT要素一つきり,というものも少なくありません。
例えば,ブログ上に仮想のペットを飼うことができる「ブログペット」の場合は以下のようなコードになっています(リスト3)。
リスト3:ブログペットの貼り付け用コードの例
これらのコードは,ブログの管理者がコピーして,自分のブログのテンプレートに埋め込むものですから,短いほうが使いやすいに決まっています。貼り付けるときにも,短いほうが(気持ち的にも)簡単ですし,貼り付けてあったコードを後から探して削除するとか,場所を移動する,といった場合にも,短いほうが楽です。そもそも,HTMLについて,あまり知識がない人にとっては,「これを貼り付けてください」といって大量なコードを見せつけられたら,それだけでしんどくなってしまって,貼り付けるのを断念してしまうかもしれません。
ただ,貼り付け用のコードをシンプルにした場合でも,そこから呼び出されるJavaScriptで様々なデータを出力したり,といったことが必要になります。したがって,なるべく多くの記述をブログ側で行ってもらったほうが,ブログパーツの提供側で出力するデータや,それを用意するための処理が少なくなり,サーバーの負荷は減ると思います。
とは言っても,貼ってもらえなければそもそも意味がないわけですから,なるべく簡単にはれるように工夫をする,というのは大事なことで,日本のブログパーツのほうが,そうした点においては一歩先に行っている気がします。