2006年10月 - ポエツ | poets

Logs

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログプラントで、デザインについて思った (2)

ブログの状態を可視化するのに、植物の形にしたのは、もともと『OrganicHTML』からの着想でした。「集合住宅」や「牧場」などでも、”シムシティ”的にブログの発展をビジュアル化できますが、引き続き「植物」にしたのは、一個の生命体のほうが〈成長〉を表現しやすかったからです。ただ承前で述べたように、このままの構造では不格好に伸びてしまいます。

ちょっと先回りして結論を言うと、「ブログプラント」は共有登録するかもしれません。1年前の時点では〈移植〉の方法が思いつかなかったのですが、1枚の「アパート式」のテンプレート(参照)にしてしまえば、配布共有は可能です。ブログパーツとしてサイドバーに置きたい場合は、インラインフレームで読み込めばいい。縦だけに延びるデザインにした理由にはそれもあります。

そこを含めて、ブログプラントがどこまで伸びるか? という問題があるんです。私のところでブログプラントを表示させる分には、月々の記事が10~15程度なので問題はありません。配布するとなると、記事が何件あるかはブログによって違うので、0件でも100件でもそれなりの外観を保持できるのか。

記事が0の場合は旧プラントでも同様ですが、こんなふうに上と下がくっつくだけです(むしろこっちのほうがカワイぃと言うw…)。逆に多い場合と言うのは想定し切れないので、30件を目安にしました。FC2ブログは「日付ネスト」が可能(大概は設定していないか、テンプレが未対応)なので、設定すれば月別でもそれ以上の数にはならないからです。

新旧を並べると、プラントはひとまわり低くなっています。旧プラントは1節 20px の高さがありました。最大を30件(節)と想定すると高さは600px になり、かなり大きくなります。ですが、1節を小さくしてしまうと、画像(花や実)を描画できる領域も狭くなってしまいます。今回のリニューアル作業で、まず画像を新たにしてみたところ、15px あれば画像表現は維持できそうだったので、1節を 16px までダウンサイジングしました。
これはファビコンなどでおなじみの規格です。ブログプラントは当初から、「画像を差し替えることでオリジナルプラントが作れる」を目指していたので、このサイズであれば汎用性があります。画像をいじるアプリが使えなくても、画像を16*16px にリサイズしてくれるウェブツールならいろいろあります。(はてなのプロフィールアイコンもそうだし)
結果、最大30件(節)のプラントの高さは 480px となりました。解像度800*600 のディスプレイでも1画面になんとか収まるサイズです。

次にリニューアルに伴う変更点をいくつか。
旧プラントでは、(向かって)左をコメント数、右をトラックバック数、幹にとまるテントウムシが投稿時間と曜日を表わしていました。
コメントは比較的コンスタントに増えるので変化を見るのもおもしろいのですが、トラックバックは一般的なブログではそうそう付くものではありません(ごあいさつトラバとかやってるならともかく)。
そこでトラックバックをテントウムシの部分にあてて、投稿曜日・時間は蝶や鳥にして、樹木の外側に出しました。これで幹にびっちり付いて多少うるさかったテントウムシも減りました。また外側に出したのは全体の横幅を拡げる目的もありました。縦方向を縮めたこととあわせて、全体のバランスを整えるためです。
余談ですが、鳥はハチドリをイメージしています。サイズ比は気にしてないんですが、ハチドリには蝶と変らないくらい小さい種類がいるそうです。そう考えるとこのテントウムシでかいな…。
[ (3)に続く]

[前記事]ブログプラントで、デザインについて思った (1)
スポンサーサイト

ブログプラントで、デザインについて思った (1)

ブログプラントをリニューアルしました。ブログプラントを公開したのが昨年9月(参照)なので、およそ1年ぶりに手を入れたことになります。その時はブログを始めて3ヶ月、何を隠そう、ソラでHTMLでテーブルを組むことすら覚束なかったものですから、今回ブログプラントがどれだけアップグレードできたでしょうか?

旧バージョンはドット画だったので、見た目はだいぶ変りましたが、実は構造的な変更はほとんどされていません。新旧をならべたキャプチャ画像は、どちらもこのブログの2006年9月をプラント化した状態です。いくつか仕様の変更はありますが、基本はほとんど同じです。
なぜ拡張しなかったのか、また今回のリビジョンで思うところがあったので、それについて書いてみます。

バージョンアップにはいくつかの構想がかねてよりありました。(参照
まず第一に、記事の数だけ延々と縦長になってしまうプラントの構造をどうにかしたかった。なにしろ見た目がよくないからです。記事が1件でも、50件でも対応できるデザインではない。
いただいたアイデアのような「集合住宅」型はいい案です。そもそも「ブログ」はレイアウト自体が、1エントリごとにブロック状になっているのですから、インラインに流せば、縦横両方向に伸びて行く形にできる。それをアパートやビルの1部屋に見立てて、窓に明かりがついたり、ポストに新聞が投函されてたり…なんてのもおもしろいです。

と、その前に。1年以上前の話題ですので、「ブログプラント」って何? という説明から始めないと、なじみの常連さんにしか分からない話になりかねません(笑)
ブログプラントは、ブログの記事に付いたコメント数やトラックバック数をスタイルシートのクラス名にしたり、あるいは画像のファイル名にあてるなどして、ブログの状態を画像に置換したものです。構造はとても単純で、初歩的なHTMLとスタイルシートの知識があれば組むことができます。エントリの分だけ伸びたり、コメントが付けば花が咲いたりするので、「ブログの成長」を見ると言ってもいいでしょう。カスタマイズできるブログであれば、おそらくFC2以外でも同様のものは作れると思います。

たとえば、こんなふうになります。コメントを受け付けていると小さな枝が生えます(コメントを受け付けてない記事では何も出ません)。1件目のコメントで葉が付き、2件目で花が咲きます(文字通り”話に花が咲く”と…) それに返信をすると花は2つになり、やがて実がなります。さらにコメントが増えれば実は赤く熟してゆく。

自分で作っておいてナンですが、まあ実験精神と酔狂で思いついたこともあって、「ブログプラントとは何か」なんて意義やコンセプトを真剣に考えてなかったんですね(←ってオイ)。
私はどちらかといえば「ビジュアル派」ではなく「テキスト派」でして、ウェブデザインについては画像よりもフォントカラーやサイズをいじってデザインすることを重視してます(ラクだからってのが大きいです。だからスタイルシートって好き。「ホームページ入門」時代はページを1枚の画像にしてクリッカブルマスク切ったり、インラインフレームはめたり…て道は通りましたが)
ブログプラントではコメントの数で実がなりますが、そんなのは「コメント:5件」と表示させておけば「ああ、5件なのね」と(当たり前ですが)わかるわけです。テキストデータならコピーして使い回しやすいとか、容量が軽いとか利点が大きいですし、私としては画像に頼った視覚化・可視化にそれほど感心はなかったんですな。

ところが、これはこのブログの月別のプラントを並べたものですが、なかなかわかりやすいと思ったんです。記事の投稿数の差は5件くらい、右側の月は寄せられたコメントが多く、トラックバックもある(カブトムシは2件以上のトラックバックで付く)、と言うのが感覚的にとらえられる。「ブログの成長記」という言葉がまさにぴったり。
画像を使った視覚化・可視化の意外なおもしろさに今さら気づいたわけです。「茎がどんどん伸びてゆく」のは非常に明確な表現で、これはむしろこのままがいいと感じたので、その形状は変更しなっかたのです。今回は逆にそこを起点にして、デザインの見直しを図りました。
[]

親タグ、子タグ、タグは複数付けてこそ(2)

タグ付けする際に、1:1の紐付けとなる、1回使いきりのタグだけを付けるのはあまり効果的でないと思うのです。複数のタグを付けておいて、それを複数条件で抽出できるのが理想です。
しかしブログやSBMで、「複数タグ検索」ができるというのは、私の狭い見聞ではあまりないと思います。そこで以前、検索で考案したのと同じ手法で(参照)、「複数タグ検索」もとい正確には「親子タグ検索」の可能性を試してみます。
〈正確に〉と言うのは、Tags[a , b , c] が対象として、[a , b]、[a , c]、[c , a]などの、どの組み合せで検索しても条件が一致するのが、本来の「複数タグ検索」です。それに対し「親子タグ検索」は、[a , b]、[b , c] のような親子の連続のみを(疑似的にですが)抽出します。「親 - 孫」のように中ヌケしてたり、「子 - 親」のように順序が逆だとヒットしなくなります。
その具体的な変数の組み方の前に、まず「親子式のタグ付け」とはなんぞや? をちょっと解説しておきます。「親子」という言葉どおり、より大括りの、包括的なワードから順にタギングします。

記事1 tags [スポーツニュース , 球技 , 野球]
記事2 tags [スポーツニュース , 球技 , サッカー]
記事3 tags [観戦記 , 球技 , サッカー]
記事4 tags [スポーツアイテム , シューズ , サッカー]

上のようなタグ付けがされている場合、[球技] で引くと上の3件が、[サッカー]で引けば下の3件が抽出できます。
これを [球技] + [サッカー] あるいは [スポーツニュース] + [野球]のように、複数タグで検索できれば、記事を2件まで絞り込むことが可能になります。ショップサイトなんかではもっと具体的な効力を発揮するはずです。

商品1 tags [~¥10000 , キッチン , amadana]
商品2 tags [~¥10000 , キッチン , TOSHIBA]
商品3 tags [¥10000~, キッチン , TOSHIBA]
商品4 tags [~¥10000 , 家電 , amadana]

[~¥10000](1万円以内)の”価格タグ”で検索すれば3件がヒットします。”商品分類”をあらわす [キッチン] でも3件が抽出できます。
そして前述の例と同じく [~¥10000] + [キッチン] にすれば2件に絞り込めます。 [amadana] のような個別性が高いタグも「孫タグ」に位置づけることで効果を発揮します。
この方法の欠点は [~¥10000] + [TOSHIBA] のように、真ん中を跳ばして連続してないタグは抽出できないことです。あくまで疑似的な複数語検索にすぎません。
この疑似複数タグ検索をユーザータグで行なうために、リストは以下のように組んでみます。

<ul class="plugin-tag" &align>
<!--ctag-->
<!--not_tag_area-->
<li><a href="<%ctag_url>"><%ctag_name>(<%ctag_count>)</a></li>
<!--/not_tag_area-->
<!--tag_area-->
<li class="tlist<%tag_word><%ctag_name>"><a href="./?tag=<%tag_word>+<%ctag_parsename>"><%tag_word>+<%ctag_name></a> | <a href="./?tag=<%ctag_parsename>+<%tag_word>"><%ctag_name>+<%tag_word></a></li>
<!--/tag_area-->
<!--/ctag-->
</ul>

タグ検索エリア以外では通常のタグリストですが、タグ検索をすると、「いま検索したタグ+別のタグ」が次の検索語になる仕組みです。つまりこれが「親 - 子」関係のタグワードになります(<%tag_word>はエンコード化されていないので、環境によっては文字化けしてURLにできないかも)。「別のタグ+いま検索したタグ」の組み合せも設定してあります。

これだと、「いま検索したタグ+いま検索したタグ」という項目もリストに出現することになりますが、これには使い途がありません。これは以下のようなスタイルを head 内に追加することで除去することができます(上記のコードにはクラス名が設定されています)。

<style type="text/css">
.tlist<%tag_word><%tag_word>{display:none;}
</style>

基本的には以前考案した「絞り込み検索」と同じですが、ユーザータグを用いている分(手打ちしなくていいと言う点で)実用性は高くなっています。もうひとつ難を言えば、タグリストには「件数順」、「投稿順」、「ランダム」の3種類しかなく、任意の順に並べ替えができません。上で例に挙げた商品リストだと、[価格]タグも[商品分類]タグも整列せず、全て混在してしまうところが欠点かもしれません。

[註]ユーザータグは半角スペースで区切られていますが、実際には、半角が間に入って繋がっている一連の文字列、として認識されることを利用している絞り込み検索方法です。タグ付け自体は従来どおりの方法です(ただし親子関係を組むようにタギングする)。

[参照]
FC2tyle-FC2ブログstyle-「FC2タグで出来そうな事」
親タグ、子タグ、タグは複数付けてこそ(1)

用FC2,寫部落格日誌也都簡單阿!

検索語抽出

ポップアップ・コメント

poets designed

Ajax検索
AD

台湾留学 完全サポート

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。