MovableTypeアーカイブ: eternalheart.com

MovableTypeのアーカイブ

Main | ウェブサイト »

iPod Touchから投稿

2007-12-23

iPodからの投稿です。

キーボードが小さくてなかなか大変です。

でも、慣れれば楽になるかな~

Categories :

MovableType

Permalink | Comments [0] | Trackbacks [0]

コメントする

PholiotのxmlをEntryImagesプラグインで作成すると良いですぞ！

2007-11-23

エタハーではおなじみの右上に写真がじわじわ動いているブログパーツ、Pholiotというのですが、こちらは僕の大好きなもので何度リニューアルしても必ずつけております。

Pholiotは非常に優れていてxmlファイルを読み込んでそちらで指定した表示方法で指定した画像を表示してくれるのですが、表示方法が多彩で、細かく設定することが可能です。

写真表示の単位もgalleryという単位でまとめられ、カテゴリーごとに表示させたりすることも可能です。

今までxmlファイルの作成はcollectプラグインとrandomentryプラグインを使用して作成しておりましたが、今リニューアルでThe blog of H.FujimotoさんのEntryImagesプラグインを利用するようにしました。

このプラグインは画像をピックアップするための便利機能が盛りだくさんでとても使いやすいです。

また今回からはギャラリーの機能を利用して、カテゴリー無し、オーストラリア、アジア、ニュージーランドの写真グループで表示させるようにしてみました。

参考までに設置方法を記しておきます。

Categories :

MovableType

Tags :

Pholiot再設置 ( 2006,3,29 )
MTの検索をAjaxで高速化する、さらにタグクラウドもAjaxで表示！ ( 2007,11,22 )
タグクラウドの文字の大きさの制御 ( 2007,11,19 )
MTでタグクラウドに時間の経過も要素に加えて表示させる ( 2007,11,18 )
外観変更 ( 2004,11,20 )
日記のほうも大改造！ ( 2005,7,25 )

Permalink | Comments [0] | Trackbacks [0]

コメントする

MTの検索をAjaxで高速化する、さらにタグクラウドもAjaxで表示！

2007-11-22

またまたタグクラウド関連なのですが、普通検索もそうですけど、MTの検索はものすごく遅くてなかなか使い勝手がよくありません。

標準では、普通のブログ内検索もタグクラウドの結果表示もmt-search.cgiをつかっていますが、こちらを使わずに超高速に検索する方法がありました。

暴想さんのココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScriptということでこれはすごいです。

仕組みは検索用のxmlファイルを用意しておいて、JavaScriptでそのファイルを検索し、検索結果をページ遷移せずに表示させるというもの。

初回の検索結果はxmlファイルを読み込むのに多少時間がかかりますがそれでもかなり早い！

さらにその後の検索はキャッシュを使うのでほぼ瞬間という感じです。

詳しい説明や設置方法などは世界中の１％の人々へさんの今日のMovable Type：Ajaxを利用したMT用超高速検索システムはスゴすぎる！を参考にさせていただきました。

今回は普通検索窓にこちらを適用し、さらにタグクラウドも検索結果が高速にAjaxで表示されるようにしました。

こちらは［CODE-R］さんの“Ajaxを利用したMT用超高速検索システム”をハックして、タグクラウドの結果表示に応用するを参考にさせていただきました。

導入方法はそれぞれの記事を読んでいただければ間違いないと思います。

まずは普通に今日のMovable Type：Ajaxを利用したMT用超高速検索システムはスゴすぎる！の記事どおりに設置していただき、その後、“Ajaxを利用したMT用超高速検索システム”をハックして、タグクラウドの結果表示に応用するの記事を参考にハックしていただければよいかと思います。

少し自分で手を加えたというか、普通検索の時はメインカラム全体で検索結果を表示させればよいので自分はblogというクラスを結果表示用に設定しました。

これをそのままタグクラウドのページで使うとタグクラウド自体が消えて検索結果が表示されてしまうのでもう一度タグクラウドを表示させてから別のタグをクリック、みたいななんだかちょっと残念な感じになってしまいます。

そこで、苦肉の策、タグクラウドのページのみ違う設定のblog_ajax_json_search.jsを作り読み込ますことにしました。

もう少し具体的に書くと、blog_ajax_json_search.jsをコピーして別名で保存します。blog_ajax_json_search2.jsとしました。

中の設定で結果表示のクラスをblogでは無くresultのままにしておいて、タグクラウドのテンプレートにはタグクラウドの上に<div class="result"></div>を追加して結果表示させるようにしました。

文章にするとなかなか難しいのですが、実際にタグクラウド以外のページでの検索と、タグクラウドのページでの表示の違いを見ていただければと思います。

検索周りはこれで完璧！

タグクラウドもこれで完璧！

« 続きを隠す

Categories :

MovableType

Tags :

タグクラウドの文字の大きさの制御 ( 2007,11,19 )
MTでタグクラウドに時間の経過も要素に加えて表示させる ( 2007,11,18 )
TagCloudのページを作る ( 2006,2,24 )
PholiotのxmlをEntryImagesプラグインで作成すると良いですぞ！ ( 2007,11,23 )
外観変更 ( 2004,11,20 )
日記のほうも大改造！ ( 2005,7,25 )

Permalink | Comments [0] | Trackbacks [0]

コメントする

タグクラウドの文字の大きさの制御

2007-11-19

2007/11/25 ソースに間違いが見つかりましたので変更させていただきました。

<MTCollateList limit="1" sort="tag_count:#:+">
<MTCollateList limit="1" sort="tag_count:#:-">

タグクラウド、いい！実にいい！！

しかーし、タグクラウドの見せ方なのですが、一つ問題がありまして、文字サイズは出現回数が増えれば増えただけ際限なく大きくなっていってしまいます。

そんな中、Open MagicVox.netさんのTagCloudをJavaScriptでパワーアップという記事に解決策がありました。

タグの使用回数の最大値と最小値を基にして、使用頻度が最も少ないタグのフォントサイズを size_min に、使用頻度が最も多いタグのフォントサイズを size_max に線形補間しています。

とありこれがぴったりなので早速導入する事に、しかしながらこちらはTagwireプラグインを使う事が前提になっていますのでそのままでは使えません。

何がだめかというと、タグの使用回数の最大値、最小値を引っ張り出す事ができません。

これを可能にするにはまた別のプラグインが必要になります。

MTCollateプラグインを使う

MTCollateプラグインを使うと、全てのタグの出現回数を引っ張り出しておいてその中から多い方から1番目まで、少ない方から1番目までという少々回りくどい表現になりますが、そういう形で取り出すことができます。

概念やら使い方はあんちもん2.LabさんのMTCollateのススメが詳しくてよいです。

MTCollateプラグインをインストール後テンプレートを書き換えると最大フォントサイズが決まったタグクラウドが出来上がります。

以下参考ソースとなります。
オリジナル(Ogawa::Memorandaさんのタグクラウドテンプレート)を改造後(Open MagicVox.netさんのテンプレート(改))に書き換えてご利用ください。

// オリジナル(Ogawa::Memorandaさんのタグクラウドテンプレート)
function calcFontSize (count) {
return count / 6 + 12;
}

// 改造後(Open MagicVox.netさんのテンプレート(改))
<MTCollateCollect>
<MTTags>
<MTCollateRecord>
<MTCollateSetField name="tag_count"><$MTTagCount$></MTCollateSetField>
</MTCollateRecord>
</MTTags>
</MTCollateCollect>

// min count of tag appearance (cf. to retrieve with MTTags)
var count_min = <MTCollateList limit="1" sort="tag_count:#:+"><MTCollateField name="tag_count"></MTCollateList>;
// max count of tag appearance (cf. to retrieve with MTTags)
var count_max = <MTCollateList limit="1" sort="tag_count:#:-"><MTCollateField name="tag_count"></MTCollateList>;

function calcFontSize (count) {
var size_min = 12; // min font size on count_max
var size_max = 60; // max font size on count_min
return (size_max - size_min) * (count - count_min) / (count_max - count_min) + size_min;
}

参考にさせていただきました皆様、ありがとうございました。

« 続きを隠す

Categories :

MovableType

Tags :

MTの検索をAjaxで高速化する、さらにタグクラウドもAjaxで表示！ ( 2007,11,22 )
MTでタグクラウドに時間の経過も要素に加えて表示させる ( 2007,11,18 )
TagCloudのページを作る ( 2006,2,24 )
PholiotのxmlをEntryImagesプラグインで作成すると良いですぞ！ ( 2007,11,23 )
外観変更 ( 2004,11,20 )
日記のほうも大改造！ ( 2005,7,25 )

Permalink | Comments [0] | Trackbacks [0]

コメントする

MTでタグクラウドに時間の経過も要素に加えて表示させる

2007-11-18

MT3.2のころに、Ogawa::Memorandaさんの記事を参考にしてtagwireプラグインを使ってタグクラウドのページを作りましたが、MT3.3以降はタグが正式にサポートされプラグインを使わずにタグクラウドのページを作成しておりました。

ですが、標準で用意されているテンプレートタグはシンプルなものなのでtagwireプラグインを使っていた時のような時間の経過と共に文字の色が薄れていくという時間経過も要素に加えるタグクラウドの作成はできませんでした。

仕方ないなとあきらめていたのですが、やはりOgawa::MemorandaさんのところでTagSupplementalsプラグインというプラグインが公開されておりました。さすが！

Movable Type 3.3でタグ機能がネイティブ対応されましたが、標準で用意されているテンプレートタグだけでは[:Tagwire Plugin.ja_JP:Tagwire Plugin]などと比較して機能が不足しているため、不便を感じなくはありません。

TagSupplementals Pluginは、MT 3.3の提供するテンプレートタグに加えて「あったらいいな」と思われるテンプレートタグのコレクションを実現します。今のところ以下のテンプレートタグを提供しています。

* MTEntryTagsCount変数タグ
* MTRelatedEntriesコンテナタグ
* MTRelatedTagsコンテナタグ
* MTArchiveTagsコンテナタグ
* MTTagLastUpdated変数タグ
* encode_urlplusグローバルフィルタ
* MTSearchTagsコンテナタグ(MT-Search用のテンプレート内でのみ利用可能)
* MTXSearchTagsコンテナタグ(MT-XSearchインストール時のみ利用可能)
* MTTagXSearchLink変数タグ(MT-XSearchインストール時のみ利用可能)

とのこと、すばらしいですね。

テンプレートの作成/修正

Ogawa::Memorandaさんで公開されているタグクラウドのテンプレートを修正して使用します。

<ul id="tags">
<MTTags>
<li title="<$MTTag$>:<$MTTagCount$>:<$MTTagDate format="%Y-%m-%d"$>"><a
title="Tag: <$MTTag$>"
href="<$MTBlogURL$>tag/<$MTTag encode_url="1"$>"><$MTTag$></a></li>
</MTTags>
</ul>

の部分を

<ul id="tags">
<MTTags>
<li title="<$MTTagName$>:<$MTTagCount$>:<$MTTagLastUpdated format="%Y-%m-%d"$>">
<a title="Tag: <$MTTagName$>" href="<$MTTagSearchLink$>"><$MTTagName$></a>
</li>
</MTTags>
</ul>

と修正して新しいインデックステンプレートに保存して再構築します。

これで出現頻度で文字の大きさ、経過時間によって文字の色が変わるタグクラウドができました。

CSSの作成/修正

3ping.orgさんのTag Cloudのスタイルという記事のスタイルがあまりにかっこいいので、参考にしてタグクラウドの見せ方を変えてみました。

こちらも参考までに乗せておきます。

/*--------------------------------------
Tag Cloud
---------------------------------------*/

ul#tags {
border: 1px solid #CCC;
padding: 10px;
margin: 10px;
display: none;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
}

ul#tags li {
margin: 0;
padding: 0;
display: inline;
}
ul#tags li a {
padding: 0 5px;
position: relative;
text-decoration: none;
background-color: #fff;
border: 1px solid #eee;
}

#tags li.hot a {
color: #00F;
}

#tags li.old a {
color: #777;
}

#tags li.oldest a {
color: #CCC;
}

#tags li a:active,
#tags li a:hover {
color: #6C3;
}

.coffButton {
color: #000;
background: #fff;
border: 1px solid #ccc;
padding: 2px;
cursor: pointer;
}

a.coffButton:hover {
color: #000;
background: #ccc;
}

#coff {
font-weight: bold;
padding: 2px;
}

/* オンマウス */
ul#tags li a:hover {
border-color: #666;
z-index: 10;
}