カテゴリー : Webサイト

サイドバーに特定の「タグ」が付いたエントリー内の画像を表示させる

右サイドメニューには、「最近買ったもの」という箇所がありますが、ここには文字通り、最近購入したモノの画像とそのレビュー記事へのリンクを貼られています。

Movable Typeを使って、サイドバーに特定のエントリーの画像を表示させるテクニックは今までもあって、たとえばエントリーの最新X件の画像を表示させるとか、あるカテゴリーに属する画像を一覧表示させることはできます。

しかしこのブログのように、「買ったもの」は本、ゲーム、ハードウェアと色んなカテゴリーに分かれていますので、今回はエントリーのタグに「購入」が付いているエントリーの画像の最近5件を表示させています。 なお、この機能を使うためには、「Collect Plugin for Movable Type」というプラグインを導入する必要があります。
ソースは下記の通りです。

<MTEntries tags="購入" lastn="5">
<MTCollect tags="img">
<MTCollectThis show="0">
<$MTEntryBody$>
</MTCollectThis>
<MTIfCollected tags="img">
<MTCollected tags="img" offset="1">
<p class="img">
<a href="<$MTEntryLink$>" title="<$MTEntryTitle$>"><img src="<$MTCollectedAttr attr="src"$>" width="120" /></a>
</a>
</p>
</MTCollected>
</MTIfCollected>
</MTCollect>
</MTEntries> 

Movable Typeで「概要」を&#x3c;descripti&#x6f;&#x6e;&#x3e;に設定する。- 決定版(多分)

 このブログは、Movable Type 3.35(以下、MT3)で構築されています。
(2009年9月1日追記:今日現在このサイトはWordPressで構築されています。MT3→MT4→WPと変遷しています)

 んで、MT3はデフォルトの設定では、<head>の<meta>部分が設定されていません。<meta>部分はSEO的にもちゃんと記載しておいた方が好ましいと言われている箇所です。

 とはいえ、1個1個の記事に<meta>を設定しているのも骨が折れますので、極力、手をかけないために「概要」の部分を<meta>の<description>として表示させてみました。

 「概要」の部分を入力するのがめんどくさいという理由で、「エントリーの内容」の冒頭の200字程度をピックアップして概要の代替テキストとして充てている人も多いと思うのですが、このブログの場合、「エントリーの内容」がいきなり別ブログの引用から始まったりするので、冒頭部分を機械的に引っ張ってくることができないのです。そこで概要の部分にはちゃんとテキストを記入しています。

 この記事のタイトルに「決定版」と付けていますが、それは同様の記事でよく見かける、「<meta name="description" content="<$MTEntryExcerpt$>" />」という記述の場合、僕のブログではうまく機能しなかったからです。

 僕のブログの「概要」には、他サイトへのリンクがあったり、開業が入っていたりしますが、先の記述では、<description>がおかしなことになってしまいます。 そこで余計なhtmlのタグや改行を取り除きプレーンなテキストにする記述をお伝えします。

 
上のフォームをクリックするとソース全部が選択されますので、そのままコピーしてください。

問題点が無いことも無いので、次回の課題恬として挙げておきます。
(1)URLがそのまま入ってしまう
(2)htmlのタグがそっくりそのまま抜かれてしまう。今回のように<meta>とか<description>なんてあるとそこ部分がゴソッと抜かれる。

疑問が多いWeb制作会社ランキング

・総合ランキング
 http://tokyo.web-db.info/?cid=41495(WEB制作会社を評価採点するウェブ制作データバンク)

 ゴールネットが運営している「WEB制作データバンク」で、制作会社ランキングを発表している。
 親会社が3位にランクインして、それはそれでありがとうございます。

 だがやはりこのランキングはいかがなものか。
 キャンペーンサイトもコーポレートもいっしょくたに評価対象にされているが、それは明らかにおかしい。打率が1割のピッチャーに対して、お前はバッティングがダメだ!って怒るのと一緒で、的外れもはなはだしい。打率が評価の対象になるのは野手であり、投手は勝利数や防御率が問われるべきだろう。

 103位のソニックジャムが制作した「UNIQLOCK」は、W3Cで0ポイント(100ポイント)、ユーザビリティ10ポイント(0ポイント)と低評価だが、「UNIQLOCK」はフルFlashのキャンペーンサイトであり、W3Cに準じる必要はまるで無い。ユーザビリティも同様。もし話題性という項目があれば100点に近い点数を得られるはずである。

 それでは逆に評価項目の「SEO」「W3C」「ユーザビリティ」が全て高得点であれば、それは良いサイトなのだろうか?

 僕はそう思わない。
 サイトの良し悪しは、課せられた当初の目的をいかに果たしているか、という一点に尽きる。IRサイトのようにステークホルダーに対して出来うる限り情報を開示することを課せられているサイトは、当然ユーザビリティは重要となるが、SEOは必須ではない。永続的なプロモーションをしたい場合には当然SEOは重んじるべきだが、W3Cに囚われる必要は無い。

 このように、課せられる目的が異なれば、重要視する項目も変わる。
 SEOとW3Cとユーザビリティを等価値にしている時点でこの調査は破綻しているといっていい。

 100位以下でも、良い制作会社があるのを知ってるし、このランキングに影響される人がいないことを切に願う。

#ページ下部に「Copyright (C) 2004-2007 lolipop Some Rights Reserved.」ってあるけど、ロリポップは何か関係しているだろうか?

ブラウザーの挙動がおかしくなるサイト(スポーツナビなど)

・スポーツナビ

http://sportsnavi.yahoo.co.jp/

「スポーツナビ」を開くと、結構な確率で固まる。というか、ページを開くのにやたらと時間がかかる。
気持ち的には軽くブラクラ(ブラウザークラッシャー)を踏んだような敗北感に包まれる。
「Sleipnir+IE7」という環境だけに起きる現象なのか、は不明なんだけど、原因を知りたいところ。

あと、デザイン性が高いWebサイトを紹介する「あんじょうできてはる」も個々のエントリーを複数開けると固まる。

あんじょうできてはるデザイナーに役立つウェブサイトリンク集【】

2009年9月2日追記:IE8にバージョンアップしてからは、固まるサイトも無くなりました。IE 7ではJavaScriptの実行速度がやたら遅く、それが原因でブラウジングが激重だったようです。
 現在IE 7を使ってて、サイトが重いことに悩んでいる人は下記のテクニックを試してください。
Sleipnir(Trident)でJavascriptの実行速度を高速化できる裏技 (Sleipnirist)

ECサイトでパーマリンクが無いってどういうこと?

先日、CMSを提供しているという会社の方とお会いした。
ECサイトにもCMSを導入した実績があるとのことで、詳しく話を聞いてみると、Flashと(CMSから吐き出される)xmlを組み合わせて、ECサイトを構築している。

実際にそのECサイトを見せてもらったが、よく見かける一般的な作りをしていた。表組みに商品画像とそれに付随するちょっとした商品説明があり、商品画像をクリックするとその個別商品ページに飛ぶ。

たしかにごく普通のECサイトなのだが、それがオールFlashなのである。ページ内の遷移は全てFlashコンテンツ内で行われるため、カテゴリーページはおろか、個別商品ページでさえもパーマリンクは設定されていない。

見せてもらったECサイトは一般消費者がターゲットではなく、主に法人が対象となるような商品を扱っていた。それならば尚更、個別商品にパーマリンクが設定されていないとダメなんじゃない。

社内で検討するときなど、商品Aと商品Bのスペックを比較するということもあるはずだし、商品ページのURLを上司に伝えて、「この商品なんですが、どうでしょうか?」と相談することもあるだろう。パーマリンクを共有できない時点で、このサイトを去っていく人は存外多いのではないだろうか。

「トップページから、Aカテゴリーページに行ってもらって、そのページの上から3つ目のXって商品か、それともBカテゴリーの上から5つめのYがいいと思います」みたいな説明を客にいちいち強いるつもりなのだろうか。

ECにおける優先順位って↓こんな具合じゃない?
パーマリンクによる利便性 >>> Flashによる表現力
担当者は「どうですか!すごいでしょ!」と誇らしげだったが、「個別ページに内包する形でFlashが使われているならまだしも、ECサイトでパーマリンクが無いってないわー」とはさすがに気の毒すぎて言えなかった。
(Flashコンテンツでも擬似的にパーマリンクを設定する技とかあるわけだし、それを知らない時点で終わっている感)