2009年12月 Archive

jQueryを使いタグの情報のはいったXMLファイルを読み込んでAjaxなタグリストを表示してみます

ということで、この前の続きになります。

さっと要点だけ申し上げますと、Movable Typeのタグまわりのテンプレートタグを利用して、タグの情報のはいったXMLファイルを作成する、というところまでをやりました。

このファイルを活用して何かしようということで(ご想像のとおりで)、jQueryを使ってAjaxなタグ一覧のようなものを作ってみました。

jQueryによるXMLファイルの読み込み

前回作成したファイル名をtags.xmlとして出力させたものとします。

用意するのは、jQuery本体(ここではヴァージョン・1.3.2ということにしておきます）でjQuery本体は先に読み込んでおくとします。

ページには、以下のようなタグリストが差し込まれる要素を埋め込んでおきます。

<ul>
    <li class="firstChild">Tag list here.</li>
</ul>

そして、XMLファイルを解析するコードを追加します。

$(function(){
    $.ajax({
    url: '<$MTBlogURL$>tags.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert("Error loading XML file.");
    },
    success: function(xml){
    $('.firstChild').remove();
    $(xml).find('items').each(function(){
        var tag = $(this).find('tagName').text();
        var link = $(this).find('link').text();
        var count = $(this).find('tagCount').text();
        var rank = $(this).find('tagRank').text();
        $('<li></li>')
            .html('<a href=\"'+link+'\" class=\"rank-'+rank+'\">'+tag+'</a>'+' ( '+count+' )')
            .appendTo('ul');
       });
   }
   });
});

このファイルは、外部のJavaScriptとして読み込めばコードがすっきりするでしょう。<$MTBlogURL$>の箇所は、インデックステンプレートでこのJavaScriptファイルを作成した場合のものです。JavaScriptファイルをMTを使わず作成するときは実際に出力されたXMLファイルまでのパスと置き換えします。

で、これを実際にやったのが以下となります。ここのブログでよく使われているタグ50件分をXMLファイルとしています。

• http://www.markdiary.com/sample/ajax_taglist.html

timeoutの数値を先に示したコードより長めにしてますが、サーヴァの状況により読み込みに時間がかかり失敗しているようならば、時間をおいてから読み込んでみてください。

Movable Typeで単にタグの一覧をXMLで出力するテンプレートを作成してみました。

<?xml version="1.0" encoding="UTF-8"?>
<tagcloud><MTTags sort_by="name">
<items>
    <tagName><$MTTagName encode_xml="1"$></tagName>
    <tagCount><$MTTagCount$></tagCount>
    <link><$MTTagSearchLink$></link>
    <tagRank><$MTTagRank max="10"$></tagRank>
</items></MTTags>
</tagcloud>

何かのカスタマイズとか、特にどうっていうものもないのですけれど、これをベースにちょっと学んでみようかなと考えています（わりとテキトウです）。

今月（2009年12月）テンプレートなどカスタマイズした点をまとめた記事です

今年最後のカスタマイズ記録となります（いつまで続くんだろか）。

今月いじったところは以下となっております

• search_data.txt で\nが表示されるのを置き換えて出力。（/\\n/g",""）
• AJAX JSON SEARCH JS をminimumに
• ふるふるブックマークをエントリページに
• mt-xsearchで結果表示の最大数を100に設定

Ajax検索のsearch_data.txtで改行のコードが出力されていたので、念のため。

Ajax JSON 検索のblog_ajax_json_search.jsをminimum sizeにしておきました。YUI Compressor(http://developer.yahoo.com/yui/compressor/)というツールを使いました。日本語の記述の部分があると実行中にエラーが返って止るようなので、先にライセンス表記を削除したのち、コード中の日本語をエスケープしてyuicompressor実行後にライセンス表記の部分を再び入れなおししてファイルをアップロードしています。

ふるふるブックマークについては、以下のページにコードが掲載されています。

• ふるふるブックマーク

タグをつけたエントリが100件に近づくのもあるので一応。それ以上あっても分割はしないという方針で。

要は&limit=というクエリを追加。

まずは、.htaccessにてRewriteRuleでlimitのクエリを追加。

タグ検索フォームだと、以下を追加（というより、action属性でcgiへのパスでなく、RewriteRuleで指定したものにすればとくに必要なし）

<input type="hidden" name="limit" value="100" />

あとタグ・アーカイブページで、100件以上ヒットしたとかでてるのに100件しかでてないよ、というツッコミ対策（何）で件数表示のところで

<em>
<mt:if tag="MTSearchResultCount" le="100">
    <$MTSearchResultCount$>
    <MTElse>100
</mt:if>
</em>

のようなかんじ。

ということで今年のカスタマイズは以上です。

これまでのカスタマイズリストは以下にあります。

• 当ブログのカスタマイズ記録

なんとなくですが、キーボードだけでソリティアをやってみましょう、なんておもいつきまして、操作に必要な部分を抜き出してみました。

キーの動作は自分で確認とりながらメモったものです。違っている部分があるかも知れません。

起動方法

特に覚えなくてもいいのですが、Windowsキー＋Rでsolと入力でソリティア起動です。

用語とか

• 山札　左上に積まれたカード
• 場札　7列ある
• 組札　右上にある、スタート時にカードが積まれていない４つのエリア

操作の基本となるもの

• [Esc] ：　主にキャンセル。
• 矢印キー(↑→↓←)：　移動
• [Tab]：　山札→組札→場札　間移動。　Shift＋Tabで逆方向
• [Enter]：　札の（選択・移動）の決定ほか
• [Home] ：　山に移動
• [End] ：　場の最後に移動

その他

• [Alt] [G] [C] ：　カードの変更
• [Alt] [G] [U] ：　元に戻す
• [F1] ：　Help表示
• [F2] ：　新規ゲーム
• [F10] ：　メニューバー選択状態（Altキーと同様）

選択状態について：

カーソルをカードの上にもっていってからEnterキーで選択状態。このとき、山札・組札は選択されたカードが数ドット下に下がる。場札のときは数枚分下にカードが下がる。

なお、オプションの設定で、「トランプの外枠だけ移動」にチェックをいれると、移動時に外枠が描画されてEnterキー押下したときにカードが移動されるという表示になる。好みで設定してみるとよいかも。

移動可能なすべてのカードを組札に移す

場にあるカードがすべて積み重ねが完了したときに、一枚ずつ、組札に移動するのは大変なので、Ctrl＋Aとすればよい。

2枚以上積み重ねたカードの移動

操作手順：移動したいカード（複数）のある列にカーソルを持っていき、↑キーで移動させたい箇所まで選択後、Enterで複数カードが選択状態になり移動できるようになる。矢印キーなどで移動してEnter。

複数のカード移動のさせ方は覚えるの必須だと思います（難しいことではないけど。これがわからないとゲームとして厳しいとおもいます）。

あとは慣れるのみかと。とか慣れたようにいってますが、キーボード操作だけで全て積んだことは未だないのでした。

CustomEditorButtonプラグインについて、このブログで書いたものなどをまとめたページを作りました。

個人的にMTシステムやブックマークなどから関連ページを探すのに手間だったりしたもので、以下のページにてまとめることにしました。

• Custom Editor Buttonプラグイン関連まとめページ « maRkdiary.com

Google Analyticsより、閲覧ブラウザとよくアクセスのある記事をまとめてみました。

今年ものこり1箇月を切っています。そこで（恒例なのか）、まとめ的な記事をやってみたいと思います。

閲覧ブラウザと記事のクエリは、以前書いた下記の記事をもとにおこなっています。

• メモ：Analyticsで利用ブラウザから閲覧ページを辿る

期間は、2009年1月1日から、2009年12月4日までです。カレンダーとしてはまだ少し日にちがありますけれども、上位はそれほど変化しないものと見なしました。

閲覧ブラウザとよく読まれている記事

2009/01/01から2009/12/04まででよく読まれている記事のタイトルで各上位７エントリです。

Safari

1. インデックス系ページでjQuery Accordion
2. 普段使ってるフライパンで作るだし巻きたまご
3. iPhone風のTwitterブログパーツ。
4. Lightbox2から、jQuery Lightbox Plugin (balupton edition)への移行メモ
5. maRkのMyOwn
6. 最近見かけなくなった屋外のFMアンテナ
7. MTカスタマイズ Archive

Internet Explorer

1. 最近見かけなくなった屋外のFMアンテナ
2. 普段使ってるフライパンで作るだし巻きたまご
3. 差分比較ソフト(DF)で、編集用エディタをTeraPadに
4. 紙で折る「ごみ箱」の最初の折る工程を省略する折りかた
5. 背景用ストライプ画像４種
6. インデックス系ページでjQuery Accordion
7. メモ：HTMLのコメントのつけかたなど

chrome

1. ウェブページで特定のフォルダのトップページを作成してみる
2. インデックス系ページでjQuery Accordion
3. 普段使ってるフライパンで作るだし巻きたまご
4. iPhone風のTwitterブログパーツ。
5. Lightbox2から、jQuery Lightbox Plugin (balupton edition)への移行メモ
6. 差分比較ソフト(DF)で、編集用エディタをTeraPadに
7. 最近見かけなくなった屋外のFMアンテナ

Opera

1. 普段使ってるフライパンで作るだし巻きたまご
2. インデックス系ページでjQuery Accordion
3. 最近見かけなくなった屋外のFMアンテナ
4. iPhone風のTwitterブログパーツ。
5. 差分比較ソフト(DF)で、編集用エディタをTeraPadに
6. maRkのMyOwn
7. メモ：HTMLのコメントのつけかたなど

Firefox

1. maRkのMyOwn
2. Firefoxアドオン、翻訳パネルのバージョンアップ
3. インデックス系ページでjQuery Accordion
4. Firefoxアドオン、ステータスバーの整理にOrganize Status Bar
5. Lightbox2から、jQuery Lightbox Plugin (balupton edition)への移行メモ
6. 差分比較ソフト(DF)で、編集用エディタをTeraPadに
7. MovableTypeのカスタムフィールドで特定キーワードを含む記事をリストアップするテンプレート

XMLファイルはこちら

参考までに、全体でよくアクセスのあるエントリタイトルは以下のようになっています。

• maRkのMyOwn
• インデックス系ページでjQuery Accordion
• 普段使ってるフライパンで作るだし巻きたまご
• Firefoxアドオン、翻訳パネルのバージョンアップ
• 差分比較ソフト(DF)で、編集用エディタをTeraPadに
• 最近見かけなくなった屋外のFMアンテナ
• Lightbox2から、jQuery Lightbox Plugin (balupton edition)への移行メモ

Firefoxがアドオン系の記事が目立つくらいですかね。Fifefox以外のブラウザについてあまり言及してないですし、アクセスの多い記事はどのブラウザでも多いかなといった結果でした。おしまい。

MovableType 5に同梱されている、Picoテーマで検索フォームで初期値をいれつつ、テンプレートを一元管理できるようにしてみました

単に、input要素のvalue属性に任意のワードを入れればいいのかと思っていたら、Picoテーマではvalue属性に<$MTSearchString$>がはいっていました。昔のテンプレートではSearchみたいな単語がはいっていた気がしたのですが、この状態では、検索フォームの初期値がない状態で使うことが前提という感じがしました。

そこで、初期値をいれるカスタマイズをおもいつきました。分岐については、以下のような方法を考えました。

まずは、日本語名で「検索」というテンプレート名のウィジェットテンプレートの先頭に以下を埋め込んで見ます。

<mtsetvars>defaultVal=キーワード
searchword=<$MTSearchString$>
</mtsetvars>
<mt:if tag="SearchString">
<mtsetvar name="defaultVal" value="$searchword">">
</mt:if>

変数名は任意でして、ここでは初期値としてdefaultVal（ここでは値を「キーワード」。この値も任意で）、検索されたキーワードを格納する変数にsearchwordとしています。

次に、同じく、検索ウィジェットで、<input type="text" id="search" class="ti" name="search"という部分を探して、value属性の<$MTSearchString$>を以下のように書き換えます（途中で折り返してますが、一行書きです）。

<input type="text" id="search" class="ti" name="search"
 value="<mt:var name="defaultVal">" />

これで、検索結果以外では「キーワード」という初期値で、検索をかければ、その値が検索フォームに入力されている状態となります（確認はMTOS 5にておこなっています）。

ここまできたら、検索フォームがフォーカスされているとき、初期値を空にするというのも追加してみたいと思います（欲張りです）。

バナーフッターあたりに以下のコードを入れておくことで実現可能かと。jQueryの本体は用意しておくか、Google AJAX APIを利用するなどします。

<script type="text/javascript" src="path-to/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#search').focus(function(){
    if($("#search").val !== "")
        { $(this).val(""); }
    }).blur(function(){
        if($(this).val()=="")
          { $(this).val(this.defaultValue); }
    });
});
</script>

コード自体は、第9回　今すぐできる！ユーザビリティを向上させるフォーム操作実践（1）｜gihyo.jp ... 技術評論社にて紹介されているものそのものです。特に説明の必要も無いかと。

と、まあこんな感じです。でもこれPicoテーマに限った話でもなくて、引き合いにだしたのは、なんとなくシンプルでいいなあと思ったというだけです。以上です。

Picoテーマを紹介されているサイト様

• Movable Type 5に「Picoテーマ」が追加 - The blog of H.Fujimoto
• 小粋空間: Movable Type 5.0 RC1 リリース
• MovableType5 RC版リリースとPicoテーマ追加 - StarBrother

FC2ブログにTypePad Connectを導入してみました。設置は簡単のようです。

ずいぶんと放置していた、http://marksanblog.blog119.fc2.com/ PetBasket (現在運用していません)ですが、ひさびさのカスタマイズということでコメントフォームにTypePad Connectを導入してみました。

設置に関して特にこれといって問題は無いように思います。TypeKeyのアカウントが既にあるかたはそのままTypePad Connectにログインすればいいですし。

設置は指示どおりにおこなえばそれ程むずかしいものでありませんでした。いつもの如く説明が長くなるので、以下のページでメモとしてまとめておきました（説明はVicunaテンプレートの例となっています）。

• FC2ブログにTypePad Connect設置したときのメモ