.Fav(blog)

Movable Type 3.3からエントリーにタグが登録できるようになっていますが、いろいろなカスタマイズやプラグインを追加しているため、もしアップデートしたらまた一からやり直しかも。と言うことでこのブログではMovable Type 3.21-jaでアップデートは止まっていますが、カテゴリーも増えてきたので、以前からやりたかった機能追加 タグクラウド（タグ一覧）を設置しました。これでエントリー時にタグ（キーワード）を入力しておけるのでカテゴリーよりも更に細かい分け方ができる・・・と思ったのですが、いろんな事を１つのブログでやってるとキーワードが増えて結果見にくいような感じです。テーマが決まってるブログであればかなり良いでしょうね。しかしせっかく設置したので公開することにしました（笑）

参考にさせていただいたのは、このブログのテンプレートやカスタマイズでお世話になっている「小粋空間」さんで、何度も見て手順などを確認させていただきました。

小粋空間

・ Tag Cloud のページを作る

ただ気になったのは、この小粋空間さんのエントリーが2005年の記事ということで、新しい記事を探していたところ、「MovableType備忘録」さんのエントリーを見つけました。こちらでは、日本語に対応する方法と、複数のタグ（キーワード）の区切り文字の指定方法が載っていたので参考にさせていただきました。

MovableType備忘録

・ Tag Cloudのページを作ってみる

更に、「MovableType備忘録」さんのところでは、カラフルなタグクラウドを作る方法も載っています。

やはり一番たいへんなのは、どちらのブログにも書かれてるように、各エントリーにタグ（キーワード）を入力する作業。このブログではすでにエントリーが1000超えてて、まずタグの付け方をどうするか、カテゴリーと同じキーワードだと意味が無いので、付け方も考えてたんですが、何度も付け足したり消したり・・・その時間もかかりますが、エントリーを入力して再構築するのにもかなり時間がかかるので1000以上のエントリーは1日では無理。というか今でもまだかなりキーワード未登録があります。

これは、少しずつやっていこうと思ってます。またエントリーにタグ（キーワード）を登録中に気付いたのが、区切り文字で、デフォルトがスペース半角なので、半角スペースがあるタグに関しては、タグクラウドを見ると別々のタグになっててやり直しもありました。それで区切り文字は，（カンマ）に途中から変更。ここは最初に気付いておけば･･･と思いましたが手遅れで再入力。

ということで、まだ未完成ですが、タグ一覧（タグクラウド）のページは下記になります。

●タグ一覧 (Tag Cloud):.Fav(blog)

同じタグで登録されている数が多いと文字が大きく表示されています。文字色は青色が2週間以内のエントリーで、60日以内のものは黒色、60日～1年は灰色、1年以上前のものは薄い灰色表示になっています。

最近、よくいろいろなサイトでリンク先のチラ見というかプレビューを小さい画像でポップアップ表示しているサイトなど見てて、便利と（自分は）思ったので、いろいろと試してみました。結果としては、今すでに導入しているSnapなのですが、それまで２種類ほど試してみましたのでその使い心地なども紹介したいと思います。

最初は、HeartRails Glance
　対応ブラウザは、Internet Explorer、Firefox、Operaということで、これを見たときに即導入しましたが、Firefoxできちんと表示されていたので大丈夫と思っていたらこのブログではInternet Explorerで表示した時にエラーが起き、ページ全部が表示された後に、画面が真っ白になり、エラー表示。他のサイトではきちんと表示されているようなので、ここだけの問題なのは確実なのですが、残念でした。ウィンドウのカラーが6 色から選択できたり、検索ボックスの種類の多さや、Amazon のアソシエイトプログラムにも対応していたりと高機能。導入もscriptタグを入れるだけなので簡単でした。「チラ見」 ウィンドウの必要を感じない方には無効にする機能も付いているのでユーザーの使い勝手に対応しているのは嬉しい機能でした。本当はこれを使いたかったんですが、他のエラーを調べる時間がなかったので断念しました。

次に同じような機能で見つけたのはWebSnapr。WebSnapr自体はプレビューを作成する機能だけなのですが、Pluginsでチラ見機能が実現できます。
　PluginsのPreview Bubble Javascript v2.0を使用してみましたが、こちらは素材やjsファイルをダウンロードしてサーバー側に保存しておかないといけないのでちょっと手間がかかりますが、表示される画面はプレビュー画面だけのシンプルさです。Wordpress pluginやWindows Live Writer Pluginなどもあります。 ただプレビューの画面が、半日経っても表示できなくて「Thumbnail has been queued」と表示されるだけだったので諦めました。また表示も若干遅い感じがしました。

それで結局決めたのは、Snapで、こちらはWebSnaprののように、遅くもなく、表示できなかったサイトも表示できるようになるまでの反映が早かったことと、HeartRails Glanceのようなカスタマイズ機能もあり、下記のような点で導入しました。

内部リンク内ではプレビューを表示しない設定ができる。

ユーザーが必要ないと思えば消すこともできて、消した後また表示させたいときの対応用にバナーがある。

日本語表示にも対応。

スクリプトを貼り付けるだけで設置完了

このブログではトップページの左下にこの切替スイッチを置いておくことにしました。

チラ見機能では無いですが、Technoratiからこのサイトへのリンクで見つけたevasiveさんのサイト http://evasive.jugem.jp/
いろんなネットサｰビスを紹介されていますが、その中で紹介されていたサイト。

　AoD（アド・オン・デマンド ）
キーワードなどのクリックで表示されるAoD !デモのサイトを見ていて綺麗かつ便利そうなポップアップで驚きでした。

ユンサンさん自体のブログはこちらになります。こういうものを見てるとあっという間に時間が過ぎてしまいます。

アド・オン・デマンドの方では、アフィリエイト・プログラム用タグ作成、フィーダーツールも公開されているので、早速作って貼り付けてみました。こちらはAoD !と違ってポップアップでは無いですが、スクリプトを貼り付けるだけというシンプルさ。下記はウィルスをキーワードにソフトウェアカテゴリの売り上げ順３位までで表示したものです。う～ん。いろいろ遊んでみたくなります。

左の画像、実物は画像ではありません。（何言ってるか分かりませんね）　どっとねっとふぁんBlogの小野さんのところのエントリーで見かけたのですが、イメージをHTMLに変換して表示した画像です。ここに貼り付けているのはそのスクリーンショットですが、「不明な技術ではありますが、でもなんか面白い（ｗ」と語ってある通り面白いです。以前私も、TABLEタグと空白で文字を作ろうとしたことがあり（手動で）かなり苦労しましたが、これはイメージで、しかも「convert」押してもそんなに時間かからないですね。（サイズが大きいと時間かかるかもしれないですが、あまり大きいサイズは変換できないようになってます。）

実際にHTMLコードはどうなってるかと言うと、フォントサイズは1ptで、0と1の文字が色指定されて画像を作っています。画像の部分を全選択して、テキストエディタに貼り付けてみたらすごく時間かかりました(笑)

技術的な説明は下記
ASP.NET Image-To-HTML Conversion Reloaded

実際のデモは下記
IMAGE TO HTML CLASS DEMO

コピーして使われたくない画像を表示したい時とかに使えるのかな。

---

今日仕事場でWindows Vistaを入れる機会がやっとできて、インストールしてネットサーフィンとかやってたんですが、メイリオフォントって見やすいな～と言うことで早速このブログでも導入してみました。

ちょうど、ウィンドウズ開発統括部　及川さんの記事「違いがわかりますか？ 」を見たのもありますが指定は簡単で、 font-familyのところに Meiryo を追加するだけ。
ちなみに、メイリオは明瞭からきていてカタカナで読むと、メイリョー。これが格好悪いと言うことでMeiryoにしたところ、外人さんはこの読みをメイリオと呼ぶことからきた。とどこかの記事で見ましたが、そういううんちくは、どうでもいいですね(笑)

メイリオフォントのデザイナーは、河野英一氏。欧文文字はVerdanaフォントを作成したマシュー・カーター氏に依頼してできたものです。
小粋空間さんのテンプレートでは、スタイルシートのフォントで、Verdanaが最初のフォントとして指定されているため、メイリオでも崩れないだろうと思ってVerdanaの前にMeiryoを追加してみました。

小粋空間さんのVerdanaフォントに関するエントリー
・フォントに Verdana が使われている理由

Windows VistaからIE7+で見てみると「ナビゲーションバーのところ崩れてる(笑)」その後、崩れてるまま通常業務に戻って仕事して、帰宅してから手直しすることに。ここで誤解が無いように、小粋空間さんのテンプレート自体はメイリオフォントにしても大丈夫です。私の場合、タイトルの下にナビゲーションバーを付けてますが、その背景もちょっといじってるので、そこの部分が崩れてました。（もしかしたらずっと崩れてたかも(笑)）

その後の確認では、自分は最近よく下記のサイトを使わせてもらってます。

Browsershots
http://browsershots.org/

ここにWebのアドレスを入力するといろいろなブラウザやエンジンなどの環境ブログ画面のスクリーンショットを撮ってくれて見せてくれます。OSもLinux Debian, Mac OS X, WindowsXP SP2の環境があります。

但し、Webのアドレスを入れてもすぐには確認することはできません。キューイングされて、できあがるまでの時間は教えてもらえます。時間はかかりますが、できあがったスクリーンショットはクリックすれば等倍まで表示してくれるので見え方など気にしている方には便利なサイトだと思います。

---

efasio サマーバーゲン 好評につき再入荷
【非売品シャネルのコスメポーチ】を期間中もれなくプレゼント（100個限り）

お昼に「新ブログツール[RSS2.0アイコン]無料配布のご案内」というメールが届きました。なんだろうと見ていたらうちでは、feed meter（RSSフィードの人気度と更新頻度を計測するメーター）や track feed（Webサイトにリンクが張られたら瞬時に RSS で配信 ）など提供してくれているサイドフィード社からのメールでした。

「RSSアイコン2.0」が新しいツールとして追加。だそうです。
内容は「RSSアイコン2.0は、説明ページつきのRSSアイコンを作成する無料サービスです。」とのことで、ホームページまたはフィード(RSS,ATOM)のURLを入力することでRSSアイコンと親切な説明ページを表示してくれます。

早速URL（http://rssicon20.com/）で確認したところ、

こんなアイコンが・・・でクリックすると

こんな感じで、今までRSS（フィード）のアイコン一個一個入れてたのが楽になります。
画面もシンプルにできますしね。またファイル名指定では無く、/で終わると自動的にそこにあるもの全部引っ張ってきてくれるようです。（ATOM,RSS1.0,RSS2.0等）ってことでこれ終わったら早速導入するっす。
作成するときに、日本語版だけで無く、英語版でもできます。海外から見に来る人が多いサイトであればそちらの方が良いかもしれないですね。
またドラッグ＆ドロップして登録できるRSSリーダーを使ってる場合、このアイコンをそのままドラッグ＆ドロップしても登録できます。（クリックすると説明ページが開くようになっています。）

また以前のエントリーで紹介したTrend Match広告も日本語解析エンジンが約100万ブログからアップグレードで約400万ブログを解析した結果を反映するようになったそうです。

RSS広告社の広告に新しい機能が付いてたので、ちょっと試してみました。
「Trend Match Combine」というもので、ブログの中身の文章（HTMLタグはエラーになります）を貼り付けるとその文章を解析？してその文からキーワードに関連する品物の広告が出てきます。そこからチョイスして完成した広告を、自分のブログに貼り付けることができるものです。RSS広告社の提供する広告と共にAmazon, Biddersから関連するものが出てきます。

AmazonとBiddersのWebサービスを使用できるようで、Trend Match Combineを選択して、各IDを入力して広告の作成が可能です。もちろん、自分に合った品物（もしくはブログの内容に合わない品物）の広告がない場合はキーワード検索でも広告が作成できます。

IE7β2にした事で、ちょっとサイト側でコントロールのアクティブ化をやってみることにしました。
Microsoftなどで公開されている情報では、
ActiveX コントロールのアクティブ化
の中にあるように、外部からの対話型コントロールの読み込みが必要なようです。

外部ファイルなら良いのかとちょっとPHPでやってみましたがあっさり、ダメでした(笑)

ということでMicrosoftで言われてるように、Javascriptでファイルを読み込むことに。
このブログではカレンダーとワールドカップまでのカウントダウンのFlashのActiveXコントロールがありますが、ここではカレンダーだけやることにしました。
ここで使用しているカレンダーは、Kinarie&MayさんのところのMT(MovableType)用カレンダーです。
貼り付けるコードまで出してくれるので、非常に簡単にFlashカレンダーが設置できます。

ブログに貼り付けるコードは

<OBJECT classid='clsid:D27CDB6E～><PARAM～>
<EMBED src='http://～'></EMBED></OBJECT>

のようになっていますが、これを外部ファイルにする準備をします。
MT上でも構いませんがJavascriptファイルを作成します。ここではcal.jsと言うファイル名にしました。

cal.jsの中は関数名を書きます。ここではRunCalと言う関数名にしました。

function RunCal()
{
　document.write('<OBJECT ～>\n');
　document.write('<PARAM ～>\n');
　・・・
　document.write('<EMBED ～>>\n');
　document.write('</EMBED>\n');
　document.write('</OBJECT>\n');
}

自分が行ったのは、元のコード
<OBJECT ～><PARAM～>
<EMBED src='http://～'></EMBED></OBJECT>
のコードの < と >を１行としてdocument.writeの１行に対応するようにしました。
（１行全部をdocument.writeの後に付けても良いかもしれないですが、見にくくなるのでやってないです。）

このcal.jsファイルを作るときの注意点は、元のコードを貼り付ける時は、' (シングルクォーテーション)であるところを "(ダブルクォーテーション)に変更する点です。
document.writeが (' と ') に区切られてるので、ここをミスするとカレンダーが表示できなくなります。
cal.jsをMovableTypeのテンプレートページから作成している場合は、そのまま再構築で。エディタで作成している方は、保存後にFTPクライアントツールでサーバにアップロードすればとりあえず外部ファイル化の部分は完了です。

次にできたcal.jsファイルを読み込ませる方法ですが、元々貼り付けたページの
<head>～</head>の間に１行追加します。

<script src="[path]cal.js" type="text/javascript"></script>

[path]はこのcal.jsファイルを置いている場所です。

そして、元々ページの中でカレンダーを表示するためのコードの部分は削除せずに
<noscript>～</noscript>で囲みます。

<noscript>
<OBJECT classid='clsid:D27CDB6E～><PARAM～>
<EMBED src='http://～'></EMBED></OBJECT>
</noscript>

その後、その<noscript>の前にcal.jsファイルの中で作った関数(ここではRunCal)を実行させるようにします。

<script type="text/javascript">RunCal();</script>

以上で、とりあえずアクティブ化は、できるようになります。
ちなみに、このブログでは、一部だけ行っています。（2006年5月9日現在）
そのページはセレクト - パソコンのページで、ここだけはクリックしなくてもアクティブ化してます。（IE7βで確認済）

また以前もエントリしましたが、下記はアドビシステムズのサイトの内容のリンクです。
アクティブコンテンツのアップデートに関する記事
ここでは複数の埋め込みコンテンツがある場合 なども例として載っています。

ごみ箱アイコンの所で紹介したファイル形式には(pngとico)2種類ありました。pngファイルの方は、よくDockアイコンと言われ、Windows上ではサポートしているソフトウェアを使うことでアイコンと同じように使えるのですが、Windows単体だけでは使うことはできません。ここで紹介するサイトはWindowsで使われるアイコンファイル(拡張子ico)とDockアイコンファイル(拡張子png)の相互変換を行ってくれるサイトです。ファイル変換できるソフトウェアを持っていない場合などには便利ですので紹介します。（ファイルは１つずつ指定のため、大量なファイル変換には向いていません。）
※pngファイルが必ずしもDockアイコンファイルのためだけの形式ではありません。


サイトは英語なのですが、使い方自体は簡単です。

URL：http://www.punksoftware.com/converticon

まず元となるファイルがicoかpngかの指定は変換元のファイル名で認識していますのでファイル指定時だけ気にすれば良いです。

元ファイルの場所を指定しますが、その元ファイルがリモートにある場合には Load a Remote Imageと書かれている下のテキストボックスにhttp://～書きます。
リモートでは無く、自分のパソコンの中に元ファイルがある場合には Upload an Image の所に直接文字を打ち込むか、その横にある「参照」ボタンを押してファイルを選択します。
ここで指定したファイルがicoであれば、返還後にはpngファイルがダウンロードできますし、指定したファイルがpngであれば、返還後にicoファイルがダウンロードできます。

Load a Remote Image, Upload an Image のテキストボックスどちらか指定した後に一番下にある「convert」ボタンを押せば完了です。
新しく表示されたページ上にはそのイメージが表示されると共に、その上の部分に

Your New Icon もしくは Your New PNG （返還後のファイル形式）
Click to Download

と言う表示があるのでClick to Download をクリックすると変換後のファイルがダウンロードできます。一応、試した結果の状況は一番上の画像で、クリックすれば大きく表示されるので確認してみてください。