小粋空間: 2006年12月アーカイブ

Top ＞ December 2006 [全て開く]

2006年ブログ総括

December 31,2006 2:22 AM
Category：[blog]
Tag：[Blog]
Permalink

今回は色々な側面から、このブログで起きた1年を振り返ってみたいと思います。

毎日エントリー

ブログを始めて2年半余りになりますが、ついに昨年はネタが直前まで浮かばないという状態が何回が発生し、非常に焦った思いをしました。そういう苦い経験から今年は「とにかく思いついたことを未公開エントリーとして書き溜める」という自己目標をたて、ネタがなくなると書き溜めたものから使えそうなものを掘り起こすという作業を繰り返してきました。
このお陰で、今年はなんとか1エントリー/日を達成できました。ちなみに、未公開エントリーは使えるものから公開できない位寒いダジャレも含めて、まだ140ほど残ってます。

また今年は、頂いたコメントの質問・要望に対し、エントリー上で回答・公開したものがかなり多く、これには非常に助けられました。まさに「もちつもたれつ」というところでしょうか。まだ回答できていないものもあり、これらは年を越してしまうことになりますが、継続して回答したいと思います。
テンプレート・カスタマイズに対するご質問やエントリーにないご要望等は、実現の可否にかかわらず受け付けております。

はてなブックマーク

巷で流行っている「はてなブックマーク」、その「最近の人気エントリー」にいくつかエントリーされましたので、気がついたものを以下に挙げておきます。

その他、はてなブックマークから被ブックマークされているすべてのエントリーは「www.koikikukan.com の注目エントリー」をご覧ください。

このような瞬間風速的なアクセスは非常に嬉しく、ワクワクするのも事実ですが、長いスパンで有効な内容のエントリーについては、そのまま埋もれてしまわないよう、訪問者の方の目に触れられるような仕組みがないかと思案中です。例えばタグ等でそういう記事をうまく抜き出す仕組みができれば、数ヶ月周期で RSS で配信するという手もあるかと。

BlogPeople1200リンク

11月2日に BlogPeople の被リンク数が 1200 になりました（関連記事）。現在 1250 で、来年には是非 1400 を超えたいと思います。
まだ当サイトへリンクしていない方はどしどしリンクしてやってください（関連記事）。

紹介いただいた書籍

今年は下記の書籍で当サイト、あるいは当サイトのカスタマイズを紹介いただきました。ありがとうございました。

テンプレート

今年は、FC2 ブログ・Seesaa ブログ・livedoor ブログの3つのブログサービスに対応したテンプレートを公開しました。ひとつのサイトで、各ブログツール・ブログサービスに対応したテンプレート配布というのは他ではあまりみかけないので、今後もこのサイトの売りのひとつにしたいと思っています（どこまでメンテナンスできるか分かりませんが…）。
とりあえず来年は WordPress 対応のテンプレートを公開したいと思っています。

YST 絶不調

今年のいつ頃からか忘れましたが、YST からのアクセスが激減し、SEO 対策をそこそこやったつもりですが、さらにアクセスが減ってしまい、現在 3% をきっている状態です。逆に Google 検索は好調です。

Amazon の売れ筋商品

アフィリエイトでは、Amazon を利用して紹介した下記の商品が結構売れました。

こういうお小遣いは小額ながら、正直モチベーションを上げてくれます。

まとめ

とにかく無事に1年を終えることができたことが何よりの喜びです。皆様には大変お世話になりました。来年もテンプレート・カスタマイズ記事とダジャレを中心に書き続ける所存ですので、ご指導・ご鞭撻の程、どうぞよろしくお願い致します。
それでは2007年もどうぞよろしくお願い致します。そして良いお年をお迎えください。

Comments [9] | Trackbacks [0]

YouTube 革命

December 30,2006 12:50 AM
Category：[書籍]
Tag：[Amazon, Book, YouTube]
Permalink

2006 年に大ブレイクし、今年の Web2.0 を代表するサービスにとどまらず、映像の世界をも大きく揺るがそうとしている YouTube の新書が発売中です。

YouTube革命テレビ業界を震撼させる「動画共有」ビジネスのゆくえ
神田敏晶

ソフトバンククリエイティブ 2006-12-16
売り上げランキング : 511

Amazonで詳しく見る by G-Tools

YouTube（ユーチューブ）は、すでにご存知の通り、無料/大容量/タグをつけることで検索できる/動画を共有できる/ブログ等で動画を公開できる/連鎖反応（人気のある動画から新たな動画が生まれる）等、Web2.0 の特徴をもち、人気が急速に伸びた動画配信サービスです。著作権違反の動画の削除タイミングが緩やかであったことも人気に拍車をかけました。（以上、本書より引用）

この本では、

動画共有革命の衝撃
ユーチューブのメディアパワー
方向転換を余儀なくされるテレビ業界
動画共有が創造するビジネスモデル
著作権2.0を考える
ユーチューブ後の世界

の6章に分け、YouTube が登場したことによってもたらされた変革、インターネット広告や著作権の考え方等が語られています。

とりわけ著作権については、違反防止によって著作者の利益を守ることと、違反によって逆に著作者に得られる利益を考え、共存することについての比較は興味深いです。全ての著作物が同一の性質でないにしても、ウェブの普及が進むにしたがって、前者から後者へシフトしていくのではないかと思います。

ちなみに、YouTube の「Tube」はブラウン管を表すそうです。そういえばトレードマークの「Tube」の文字の部分がブラウン管になってました。

Comments [0] | Trackbacks [1]

ドネーション（寄付）の方法

December 29,2006 2:53 AM
Category：[お知らせ]
Tag：[Donation, Paypal]
Permalink

当サイトのテンプレートやカスタマイズあるいはご質問に対する回答について、以前よりドネーション（寄付）を受け付けています。送金には paypal というサービスを利用していますが、やや分かりづらく、「入金方法を教えてください」というご質問も頂きましたので、本エントリーにて説明致します。

paypal はクレジットカード決済です。銀行振込みをご希望の方は、プロフィール→メールフォームよりご連絡頂ければ入金口座をご連絡致します。
また、ドネーションのリンクで説明しております通り、将来に向けてのご寄付（例：ドネーションによる機能追加や改善要望）は、それらが実現しない可能性があるためご遠慮ください。

テンプレートのページあるいはカスタマイズのページにある「Make a Donation」のリンクをクリック。

金額が設定されていない場合は、寄付金額（単位はドル）を設定（?）して、paypal のアカウントを持っていない方は「Continue」をクリック（?）。アカウントをお持ちの方は、メールアドレス・パスワードを入力して「Log In」をクリック。

金額が設定されている場合、アカウントを持っていない方は「Continue」をクリック（?）。アカウントをお持ちの方は、メールアドレス・パスワードを入力して「Log In」をクリック。

アカウントを持っていない方は、「Continue」をクリックして表示された下記のページで必要項目（下記）を入力します。Adress2 以外は全て必須です。

メニュー	項目	設定内容
?Country	Country	国名（Japan）
?Credit or Debit Card Information	First Name	クレジットカードに記載された名
	Last Name	クレジットカードに記載された姓
	Card Type	プルダウンメニュー（MasterCard/Visa/Discover/American Express）から利用可能な会社を選択
	Card Number	カード番号（16桁・ハイフンなし）
	Expiration Date	有効期限
	Card Security Code	セキュリティコード（カード裏に記載された番号の下3桁）
?Billing Address	Address 1	町名・番地等（参考）
	Address 2	ビル・マンション名等、必要に応じて記入
	City	市
	Prefecture	在住する県名をプルダウンメニューから選択
	Postal Code	郵便番号（7桁）
	Is this your shipping address?	入力した住所が配達先と同一の住所か、異なる住所かを選択
?Contact Information	Email Address	メールアドレス
?Contact Information	Home Telephone	電話番号（国番号は不要で市外局番（0なし）から入力）
?Security Check	Enter the code as shown below	ページ下に表示されたセキュリティコードを入力

入力後、フォーム一番したの「Continue Checkout」をクリック（?）。入力項目に誤りがなければ次のような画面が表示されます。

内容を確認して「Pay」をクリック。入力項目に誤りがある場合は警告画面が表示されるので指示にしたがって修正します。

Comments [0] | Trackbacks [0]

Movable Type wheeljack の新機能（その2：Assets関連MTタグ）

December 28,2006 12:45 AM
Category：[wheeljack]
Tag：[MovableType, Wheeljack]
Permalink

2006年12月27日現在の Movalbe Type wheeljack Assets 関連タグ一覧です。Asstes 以外にもいくつかの新しい MT タグが追加されています。

タグ種別	タグ名	意味
コンテナ	MTAssets	Asset の一覧
	MTAsset	一意の Asset を表示（id 属性必須）
	MTAssetTags	Asset のタグ一覧
	MTAssetsHeader	Asset リストの最初だけ実行
	MTAssetsFooter	Asset リストの最後だけ実行
条件	MTAssetIfTagged	Asset がタグ付けされている場合に実行
	MTAssetIsFirstInRow	不明
	MTAssetIsLastInRow	不明
変数	MTAssetID	Assetに割り当てられる ID
	MTAssetFileName	Asset のファイル名
	MTAssetURL	Asset のURL
	MTAssetType	Asset のタイプ
	MTAssetMimeType	Asset のマイムタイプ
	MTAssetFilePath	Asset のパス
	MTAssetDateAdded	Asset をアップロードした日付？
	MTAssetAddedBy	Asset をアップロードしたユーザ？
	MTAssetProperty	Asset のプロパティ
	MTAssetFileExt	Asset の拡張子
	MTAssetThumbnailURL	Asset のサムネイルURL
	MTAssetLink	Asset のリンク（a要素で表示）
	MTAssetThumbnailLink	Asset のサムネイルへのリンク（a + img 要素で表示）
	MTAssetCount	Asset 数

また MTAssets には下記の属性が付与できるようです。

author
type
file_ext
tag
tags

その他、MTEntries と同じ振る舞いが可能な属性も使えるようです。これらを用いれば、MT のデフォルト機能として、最近アップロードした画像（サムネイル）リストをサイドバーに表示することも可能になるでしょう。

Comments [0] | Trackbacks [0]

MTEntries タグの lastn 属性と sort_order 属性（ascend）の同時指定が有効にならない件について

December 27,2006 1:10 AM
Category：[トラブルシューティング]
Tag：[MovableType, MTEntries, TroubleShooting]
Permalink

テンプレートに対し、一番古いエントリータイトルを取得するタグ（下記）を設定しても、最新のエントリータイトルが取得されます。

<MTEntries lastn="1" sort_order="ascend"><$MTEntryTitle$></MTEntries>

この問題は「『Ajax月送りカレンダー』でデフォルト表示を一番過去の月にしたい」というご質問で発覚しました。

とりあえずネットで類似情報がないか検索したところ、Movable Type Community Forum で下記の記事を発見。

Sort_order Ascend Not Working In 3.33?

lastn 属性は、MTEntries タグで指定された sort_order 属性をくつがえす、内部の「sort_order="descend"」を持っています。この振舞いのため、lastn 属性が指定された場合、sort_order 属性は無視されます

と、Nov 3 2006, 07:54 PM の回答で書かれています。たしかに lib/MT/Template/ContextHandlers.pm の 1333 行にそのような実装がありました。

仕様か不具合かという話は別として、とりあえず lastn 属性が指定された場合でも sort_order 属性を有効にするためのパッチを作ってみました。

--- lib/MT/Template/ContextHandlers.pm.bak      Fri Aug  4 12:31:56 2006
+++ lib/MT/Template/ContextHandlers.pm  Wed Dec 27 00:47:35 2006
@@ -1330,7 +1330,7 @@
             }
         }
         $args{'sort'} = 'created_on';
-        $args{direction} = 'descend';
+        $args{direction} = $args->{sort_order} ? $args->{sort_order} : 'descend';
         if (!@filters) {
             if (my $last = $args->{lastn}) {
                 $args{limit} = $last;

が、このパッチは他の属性と競合した場合の問題等を考慮していません。ご指摘ならびに改善案をお待ち申し上げます（他力本願）。

Comments [4] | Trackbacks [1]

タグ検索でエントリーの画像を表示する

December 26,2006 1:25 AM
Category：[エントリー・タグ, 検索]
Tag：[Customize, MovableType, SearchResult, Tag]
Permalink

Movable Type のタグ検索機能で、エントリータイトル・概要の代わりに、エントリーに含まれる画像を検索結果画面に表示するカスタマイズです。

下のスクリーンショットは、デフォルトテンプレートで、"image" というタグを与えた3つのエントリーにそれぞれ異なる画像を表示させ、"image" タグで検索した検索結果画面のサンプルです。

タグ検索でエントリーの画像を表示する

デザインが大雑把で申し訳ありませんが、以前このカスタマイズについてのご質問を頂いていてからかなり時間が経ってしまいましたので、取り急ぎの公開です。

試してみたところ、Collect プラグインを利用すれば、タグ検索による画像表示が行えることが判明しました。

１．プラグインのダウンロード

下記のサイトにある「Download」のリンクをクリックして、Collect Plugin をダウンロード

staggernation.com：Collect Plugin for Movable Type

解凍した中にある Collect.pl を plugins フォルダ直下にアップロード。

２．検索結果テンプレートの修正

ここでは、デフォルトテンプレートを例にして <MTSearchResults>～</MTSearchResults> の修正箇所を示します。

リスト1 のように、赤色を削除して青色を追加します。

<MTSearchResults>
    <MTBlogResultHeader>
        <h3 class="search-results-header">
        <MTIfStraightSearch>
            ブログ: <$MTBlogName$> での検索結果
        </MTIfStraightSearch>
        <MTIfTagSearch>
            <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
        </MTIfTagSearch>
        </h3>
        <div class="search-results-container">
        <MTIfTagSearch>
<ul>
        </MTIfTagSearch>
    </MTBlogResultHeader>
 
    <MTIfStraightSearch>
        <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
        <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
    </MTIfStraightSearch>
        <MTIfTagSearch>
            <div class="entry-tags">
                <h4 class="entry-tags-header">タグ:</h4> 
                <ul class="entry-tags-list">
                    <MTEntryTags>
                        <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                    </MTEntryTags>
                </ul>
            </div>
            <MTCollect tags="img">
                <MTCollectThis show="0">
                    <$MTEntryBody$>
                </MTCollectThis>
                <MTIfCollected tags="img">
                    <MTCollected tags="img" lastn="1">
<li style="display:inline"><a href="<$MTEntryPermalink$>"><img src="<$MTCollectedAttr attr="src"$>" /></a></li>
                    </MTCollected>
                </MTIfCollected>
            </MTCollect>
        </MTIfTagSearch>
 
        <MTIfStraightSearch>
        <p class="entry-footer">
            <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
        </p>
        </MTIfStraightSearch>
 
    <MTBlogResultFooter>
        <MTIfTagSearch>
</ul>
        </MTIfTagSearch>
        </div>
    </MTBlogResultFooter>
</MTSearchResults>

リスト1　検索結果テンプレート修正箇所

ここで行っている修正は主に下記の通りです。

タグ表示部分に Collect プラグインの MT タグを挿入
タグ検索は順序なしリスト（ul - li）で表示
タグ検索結果の ul 要素の開始タグは MTBlogResultHeader に、終了タグは MTBlogResultFooter に埋め込み（ここに埋め込まないと、検出されたエントリー数分表示されるため）
エントリータイトルおよび投稿者情報部分は通常検索時のみ表示されるよう、<MTIfStraightSearch>～<MTIfStraightSearch> で括る

修正方法は他にも色々ありますので、お試しになってください

３．エントリーに含まれる画像の表示数を変更する

エントリーに含まれる画像の件数を設定しているリスト2 の赤色部分を変更します。

<MTCollected tags="img" lastn="1">

リスト2　画像表示数変更方法

なお、エントリー表示数を制御することはできません（検索されたエントリー数分を全て表示）。

Comments [0] | Trackbacks [0]

記事（エントリー）に絵文字を使う for Serene Bach

December 25,2006 1:25 AM
Category：[絵文字]
Tag：[Entry, Image, SereneBach]
Permalink

Serene Bach の記事（エントリー）およびコメント欄に絵文字を入力できるようにするカスタマイズです。

これは「公開テンプレートのコメントに絵文字を使う for SereneBach」のテクニックを記事部分に適用させたものです。

記事に絵文字を入力するカスタマイズは stroll::blog さんの「sb絵文字入力支援スクリプト」がポピュラーですが、「ブラウザに依存しないで入力する方法はないですか？」という質問を頂いたので、本エントリーにて紹介致します。

設定方法は当サイトで公開しているテンプレートを例にしていますが、一部修正すれば他のテンプレートでも利用可能です。

なお「公開テンプレートのコメントに絵文字を使う for SereneBach」と設定内容が若干異なるため、記事とコメントの両方に絵文字と併用したい場合は、本エントリーのカスタマイズを行ってください（本記事はコメントの絵文字にも対応しています）。

１．記事投稿画面の修正

Serene Bach をインストールしている配下にある、

lib/resource/ja/entry.html

をダウンロードして、任意のエディタで開き、１．１～１．３項の修正を行ないます。
修正する自信のない方は、下記のリンクから修正済の entry.zip（または entry.lzh）をダウンロードして解凍し、２項に進んでください。なお、EUC-JP 版とUTF-8 版でダウンロードするファイルが異なりますのでご注意ください。

EUC-JP版: entry.zip / entry.lzh
UTF-8版: entry.zip / entry.lzh

このファイルは 2.05R をもとに修正したものです（~~2.09R~~2.12R まで確認済）。Serene Bach バージョンアップには対応できていないかもしれませんので予めご了承ください。

１．１ script 要素の追加

ファイルの一番先頭に下記を追加します。

<script type="text/javascript" src="emoji.js" charset="utf-8"></script>

１．２「本文」への絵文字一覧表示スクリプトの追加

「本文」のテキストエリア上部へ絵文字一覧を表示するタグを追加します。

<div class="entry_tool">
<!-- BEGIN sb_entry_extool_body -->
<a href="#" onclick="return addHtmlTag('entry_body','{sb_entry_extool_elem}','{sb_entry_extool_opt}');"><img src="{sb_site_template}tool/{sb_entry_extool_img}.gif" width="30" height="20" alt="{sb_entry_extool_alt}" title="{sb_entry_extool_alt}" /></a>
<!-- END sb_entry_extool_body -->
</div>
<dl><dt style="display:inline;">絵文字</dt><dd style="margin-left: 5.5em;">
<script type="text/javascript">
writeCustmizeEmojiTagList('document.mainform.entry_body');
</script>
</dd></dl>
<textarea name="entry_body" id="entry_body" rows="{sb_entry_body_rows}" cols="40" class="text">{sb_entry_body}</textarea>

１．３「続き」への絵文字一覧表示スクリプトの追加

「続き」部分も絵文字を使いたい場合は、「続き」のテキストエリア上部へ絵文字一覧を表示するタグを追加します。

<div class="entry_tool">
<!-- BEGIN sb_entry_extool_more -->
<a href="#" onclick="return addHtmlTag('entry_more','{sb_entry_extool_elem}','{sb_entry_extool_opt}');"><img src="{sb_site_template}tool/{sb_entry_extool_img}.gif" width="30" height="20" alt="{sb_entry_extool_alt}" title="{sb_entry_extool_alt}" /></a>
<!-- END sb_entry_extool_more -->
</div>
<dl><dt style="display:inline;">絵文字</dt><dd style="margin-left: 8.1em;">
<script type="text/javascript">
writeCustmizeEmojiTagList('document.mainform.entry_more');
</script>
</dd></dl>
<textarea name="entry_more" id="entry_more" rows="15" cols="40" class="text">{sb_entry_more}</textarea>

２．ファイルのアップロード

修正した entry.html を元のディレクトリにアップロードします。

３．スクリプトのダウンロード

下記のリンクより emoji.js をダウンロードしてください。

emoji.js

この emoji.js は「公開テンプレートのコメントに絵文字を使う for SereneBach」で配布しているものと若干異なります。
「公開テンプレートのコメントに絵文字を使う for SereneBach」で配布している emoji.js をお使いの場合は、下記の修正を行ってください。上記のリンクよりダウンロードしてお使いになる場合は、そのまま４項へ進んでください。

３．１絵文字一覧表示部分（赤色を削除し、青色を追加）

function writeCustmizeEmojiTagList(textarea) {
    // コメントを入力するテキストエリアを指定
    var textarea = 'document.mainform.entry_body';
 
    // ***************** 設定ここまで *****************

３．２絵文字表示部分（赤色を削除し、青色を追加）

// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag(commentAreaIdName, commentAreaTag, commentBodyClassName) {
    // （１）コメント全体のタグの id 属性
    var commentAreaIdName = 'comments';
    // （２）コメント全体のタグ名
    var commentAreaTag = 'div';
    // （３）各コメントの class 属性
    var commentBodyClassName = 'comment';
 
    // ***************** 設定ここまで *****************
    var list = getCommentEmojiList();
    var att = getCustmizeEmojiAttribute();
    var objComArea;
    var classComArea;
    var objComBody = new Array();

４．スクリプトに絵文字URLの追加

emoji.js を任意のエディタで開き、ご自身のお好きな絵文字を下記の青色のように挿入してください。

// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
    var list = new Array();
    // 画像名、画像URLの設定
    list[list.length] = new Array('00a', 'http://yourhost/images/pp_00a.gif');
    list[list.length] = new Array('01a', 'http://yourhost/images/pp_01a.gif');
    list[list.length] = new Array('02a', 'http://yourhost/images/pp_02a.gif');
　　　　　　　　　　　　　　　　　　：
    return list;
}

ちなみに、冒頭のスクリーンショットに表示させている画像は下記のサイトよりお借りしました。ありがとうございました。

.:. PEPPER .:. FREE GRAPHICS FOR WEB SITE

注：この emoji.js のファイルの文字コードは UTF-8 です。EUC-JP 版の Serene Bach をお使いでも、ファイルの文字コードは UTF-8 のままお使いください。

５．スクリプトのアップロード

修正した emoji.js を、index.html と同じディレクトリにアップロードします。

６．テンプレートの修正

</head> の直前に下記のタグを追加します。

<script type="text/javascript" src="{site_top}emoji.js" charset="utf-8"></script>

そして記事関連ブロック終了の直前に、記事に表示された、絵文字に対応する記号を実際の絵文字に変換するためのスクリプト（青色部分）を追加します。

<!-- BEGIN entry -->
<h2 id="entry{entry_id}" class="date">{entry_date}</h2>
<div class="entry">
<h3 class="entry-header">&#9679;<a href="{entry_permalink}">{entry_title}</a></h3>
<div class="entry-content">
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
</div>
<div class="entry-footer">
Posted by {user_name} at {entry_time} | Category: {category_name} | {comment_num} | {trackback_num}
</div>
</div>
{trackback_auto_discovery}
<script type="text/javascript">
<!--
changeCustmizeEmojiTag('content', 'div', 'entry_body'); // 本文に絵文字を表示する
changeCustmizeEmojiTag('content', 'div', 'entry_more'); // 続きに絵文字を表示する
// -->
</script>
<!-- END entry -->

赤色部分はご利用のテンプレートによって異なります、それぞれの意味は下記の通りです。

content：中央カラム全体を括っている div 要素の id 属性（一例として "main" という設定のテンプレートが結構あるようですが、ご利用のテンプレートをよくご確認ください）
div：記事またはコメント本文全体を括っているタグ
entry_body / entry_more：記事またはコメント本文全体を括っているタグの class 属性

要するに画像を変換する場所を絞り込んでいる訳です。この部分でつまづく場合が多いようですが、ご利用のテンプレートおよび本エントリーのコメント欄等で不具合をよくご確認の上、どうしても分からない場合のみご質問ください。

changeCustmizeEmojiTag の起動は、「本文「用と「続き」用の2行があります。「続き」に絵文字を使わない場合は

changeCustmizeEmojiTag('content', 'div', 'entry_more'); // 続きに絵文字を表示する

を削除してください。

記事に絵文字を表示するカスタマイズは以上です。

管理画面の新規記事および記事編集画面に絵文字が表示されること
絵文字をクリックすると、テキストエリアに絵文字に対応した値が設定されること
記事を公開すると、ブログの記事部分に絵文字が表示されること

を確認してください。
コメントにも絵文字を利用する場合は次項のカスタマイズを行ってください。

７．コメント部分にも絵文字を利用する場合

まずコメントの form 属性に name 属性を追加してください。

<form name="comform" action="{site_cgi}" method="post">
 
<div class="comments-open" id="comments-open">
<h2 class="comments-open-header">Comment form</h2>
<div class="comments-open-content">
 
<div id="comments-open-data">

次に、テンプレートのコメント部分に絵文字を表示するためのタグを追加します。

<dl>
<dt><label for="name" id="labelname">name:</label></dt>
<dd><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" size="20" /></dd>
<dt><label for="email" id="labelemail">email:</label></dt>
<dd><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" size="30" /></dd>
<dt><label for="url" id="labelurl">url:</label></dt>
<dd><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" size="30" /></dd>
<dt><label id="cookie_label" for="set_cookie">cookie:</label></dt>
<dd><input type="checkbox" tabindex="4" name="set_cookie" value="1" id="set_cookie" /></dd>
<dt>icons:</dt><dd style="margin-left: 5.5em;">
<script type="text/javascript">
<!--
writeCustmizeEmojiTagList('document.comform.description');
// -->
</script>
</dd>
<dt><label for="description" id="labeldescription">comments:</label></dt>
<dd><textarea tabindex="5" id="description" name="description" rows="8" cols="45"></textarea></dd>
</dl>

最後にコメント関連ブロック終了の直前に青色のタグを追加します。

</form>
</div>
<script type="text/javascript">
<!--
changeCustmizeEmojiTag('comments', 'div' ,'comment');
// -->
</script>
<!-- END comment_area -->

「公開テンプレートのコメントに絵文字を使う for SereneBach」のカスタマイズを行っている場合は設定内容が微妙に異なるので、以前の設定は一旦削除した方がいいかもしれません。

８．CSS 設定

絵文字とテキストがきれいに並ばない場合は、下記のCSSを追加してください。

.emoji{
    vertical-align: middle;
}

必要に応じて margin / padding プロパティも加えてください。

2007.01.09 追記
６項の説明を追加しました。

2007.01.25 追記
EUC-JP 版に対応しました。

2007.03.10 追記
挿入される絵文字の img タグに class 属性を付与しました。それに伴い８項を追加しました。

2007.03.20 追記
green lettuce さんより頂いたコメントより、適用可能バージョンを 2.12R に修正しました。

Comments [172] | Trackbacks [27]

サンタクロース

December 24,2006 12:22 AM
Category：[ダジャレ]
Tag：[Joke]
Permalink

続きを読む ≫

Comments [9] | Trackbacks [1]

YST（Yahoo! Search Technology）との戦い：その3 ＆ Google 関連検索

December 23,2006 12:50 AM
Category：[blog]
Tag：[Google, Yahoo]
Permalink

最近、Yahoo 検索で当サイトに訪れる方がさらに減りました。
下は Google Analytics による当サイトの昨日（12/21）の「ソース別の訪問数」です。

Google Analytics

64.95%：google
8.05%：(direct)
2.87%：msn
2.51%：yahoo
1.09%： yujiro.dyndns.org
20.52%：(other)

Yahoo はこれまで第3位（4～5%）でしたが、ついに msn に抜かれて 4位になりました。トップは変わらず Google で、相対的に比率が上がって 64.95% です。

気になるのは、旧サイトのドメインを検索結果から除外するために、旧ドメインのウェブサーバのトップディレクトリに robots.txt を置いているのですが、相変わらず検索結果に反映されてしますようです。

Yahoo 検索

下記の説明を読むと、ドメイン変更前にテンプレートをご利用になっているサイトのバナーやパーマリンクに残っているのが原因に思われます。

Yahoo!検索：特定のページ、キャッシュを検索結果から削除したい

設定を行うと、ページ内のテキストの内容はデータベースに登録されませんが、ページのURLがほかの公開されているウェブページからの参照リンクとして、データベースに残る可能性はあります。

説明では検索結果に表示されることは名言されていませんが、上記の検索結果より、「データベースに残る=検索結果に反映される」という風に解釈しています。
ディレクトリ自体を削除するという手もありますが、もう少し様子を見てみたいと思います。

これまでの経緯は下記のページをどうぞ。

上記とは別に Google では「関連検索」なるものが表示されるようになりました。当サイト名で検索すると、ページ下に下記のような検索結果が表示されます。

Google 検索

Comments [0] | Trackbacks [0]

Simply Threaded プラグイン

December 22,2006 1:20 AM
Category：[プラグイン]
Tag：[Comment, MovableType, Plugin]
Permalink

投稿されたコメントに対しリプライをする際、「＞hogehoge さん」という元コメント情報を表示することができる Movable Type プラグインです。また、元コメントへのページ内リンクも自動的に設定してくれます。

１．インストール

Movalog：Simply Threaded 1.0へアクセス

「Getting Simply Threaded」に名前とメールアドレスを入力して、Submit をクリック。右側に「sent!」と表示されたら届いたメールに記載されているURLにアクセスします。

開いたページに「Download」のフォームがありますので、適宜ダウンロードします。商用の場合は最低 $20 のドネーションが必要です。

ダウンロードアーカイブを解凍して、php ディレクトリ、plugins ディレクトリにそれぞれアップロードします（詳細な配置はダウンロードページ下に記載されています）。

mt.cgi 実行時、アップグレード画面が表示されます。これはDBに情報を追加するためと思われますので慌てずそのまま実行。

実行後、管理画面にログインします。

プラグイン一覧に「Simply Threaded」が表示されればOKです。

２．テンプレート修正

エントリー・アーカイブに下記の設定を行います。コメントプレビューにも同じ追加を行うと思いますが試しておりません。

まず、リプライ用のリンクを表示する MTCommentReplyLink タグをコメント投稿者情報の末尾に追加します。

<p class="comment-footer">
      投稿者:
      <$MTCommentAuthorLink default_name="匿名"$> <$MTCommentAuthorIdentity$> |
      <a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a> |
      <MTCommentReplyLink>
</p>

埋め込んだタグは、スクリーンショットのように「Reply」が表示されます。

MTCommentReplyLink タグにはオプションで text 属性が用意されています。これで表示テキストを変更できます。

<MTCommentReplyLink text="Reply to this comment">

リプライ先を表示する場合は、上記のタグに、さらに MTRepliedComment タグを追加します（英語表記ですいません）。

<p class="comment-footer">
      <MTRepliedComment>Posted, in reply to <a href="#c<MTCommentID>"><MTCommentAuthor>'s comment</a>, by<MTElse>Posted by</MTElse></MTRepliedComment>
      <$MTCommentAuthorLink default_name="<MT_TRANS phrase="Anonymous">"$> <$MTCommentAuthorIdentity$> |
      <a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a> |
      <MTCommentReplyLink>
</p>

この設定を行えば、リプライコメントの場合、投稿者情報欄に

Posted, in reply to X's comment, by Y

と表示され、通常の新規投稿であれば、

Posted by Y

と表示されます。
個人的には下記のような形式がお勧めです。

<div class="comment-content">
  <MTRepliedComment><p>&gt;<a href="#c<MTCommentID>"><MTCommentAuthor></a>さん</p></MTRepliedComment>
  <$MTCommentBody$>
</div>
<p class="comment-footer">
      Posted by <$MTCommentAuthorLink default_name="Anonymous"$> <$MTCommentAuthorIdentity$> |
      <a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a> |
      <MTCommentReplyLink>
</p>

こうすると、リプライした時にコメント内容の先頭に引用元の名前を表示することができます。

最後に、リプライする・しないを決めるチェックボックスを、コメント欄に追加します。

<p>
   <label for="comment-bake-cookie"><input type="checkbox"
      id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
       この情報を登録しますか?</label>
</p>
<MTCommentReplyField>

前に設定した「Reply」のリンクをクリックすると、コメント投稿欄に追加したMTタグ（後述）の位置に、リプライ元の情報を引用するチェックボックスが表示されます。

Comments [0] | Trackbacks [0]

Creative Commons Licence のライセンス・マーク変更

December 21,2006 1:11 AM
Category：[Creative Commons]
Tag：[CreativeCommons]
Permalink

久しくチェックしていなかった「Creative Commons」のライセンス・マークが変更されていたので、右サイドバー下部に表示しているバナーを変更しました。
また、分かりにくかったライセンスマーク名称も変更されています。

クリエイティブ・コモンズ：ライセンス・マーク名称の変更について

CCライセンスが普及するにつれて、皆様から、「帰属」「同一条件」などの名称は一見して内容が分かりにくい、とのご意見を多数いただくようになり、このような状況を受けてCCJP事務局内で熟考のうえ討議した結果、ライセンス・マーク名称をより判別しやすく使いやすいものへと変更することと致しました。

新名称と旧名称の対応は下記の通りです。

新	旧	意味
表示	帰属	原著作者のクレジットを表示しなければなりません
非営利（変更なし）		作品を営利目的で利用してはなりません
改変禁止	派生禁止	作品を改変、変形または加工してはなりません
継承	同一条件許諾	作品を改変、変形または加工した場合、あなたはその結果生じた作品をこの作品と同一の許諾条件の下でのみ頒布することができます

なお「名称変更により各マークの機能が変わることはありません」ということです。

その他、「公開する」のリンクをクリック→「ライセンスを選ぶ」のフォームをクリックした先のページに、（ウェブサイトを持っていない場合）ライセンス付きファイルをホストできるサイトでクリエイティブ・コモンズ・ライセンスを適用する方法が掲載されています（英語ですが）ので、一部抜粋しておきます。

1番目と3番目のものは ccPublisher というものをダウンロードして適用させるようです。

Comments [0] | Trackbacks [1]

公開テンプレートのサイドバーのカラム幅を変更する

December 20,2006 1:36 AM
Category：[CSS]
Tag：[CSS, Customize, Template]
Permalink

公開テンプレートのサイドバーのカラム幅の変更方法についてご質問を頂いておりますので、本エントリーで変更方法をご紹介致します。

CSSは公開しているテンプレートで（多分）共通ですので、テンプレート配布のブログ（Movable Type / Serene Bach / FC2 ブログ / Seesaa ブログ / livedoor ブログ等）をお使いでしたらどれでも適用可能と思われます。

修正するのはスタイルシートのみです。スタイルシートを修正する箇所には似たようなセレクタが並んでおりますので、修正する際には、下記の該当する修正リストのセレクタ名の部分をマウスコピーして、編集画面（またはエディタ）上で検索すると良いでしょう。

なお、固定レイアウトの場合は下記のツールを是非ご利用ください。

テンプレートカスタマイズ支援ツール Column Resizer

１．固定レイアウト

１．１ 3カラムレイアウト

スタイルシート後方に出現する、リスト1.1 の赤色部分（2ヶ所）を変更します。

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
　　　　：
　　（中略）
　　　　：
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}

リスト1.1　固定レイアウト・3カラムの変更箇所

上の 850px は3カラム全体（左・中央・右）の幅、そして下の 185px が左右サイドバーの幅です。ということで、まず 185px をお好みの幅に変更してください。ここでは 15px 加えて 200px にひろげる例で進めます。

そして、この値を元に上の 850px の部分を修正します。算出式は

元の値 + サイドバー幅の増分×2

になります。今回の例では、

850px + (200px - 185px) ×2 = 880px

となるので、880px を設定します。
サイドバーの幅をデフォルト値より少なくした場合は、逆に 850px から減算します。

ちなみにサイドバーの全体幅は 185px ですが、余白を左右 15px とっているので、実際に表示される幅はデフォルトで 155px です。Google Adsense のキーワード広告等、160px で設定されている部品をおさめるには、5px 加えて 190px にすれば（多分）大丈夫だと思います。

１．２ 2カラムレイアウト（左サイドバー/右サイドバー）

左サイドバーの場合、スタイルシート後方に出現する、リスト1.2 の赤色で示したサイドバーの幅を、お好みの値に変更します。

.layout-two-column-left #links-left-box {
    float: left;
    width: 185px;
}

リスト1.2　固定レイアウト・2カラム（左サイドバー）の変更箇所

右サイドバーの場合、左サイドバー同様、リスト1.3 の赤色で示したサイドバーの幅を、お好みの値に変更します。

.layout-two-column-right #links-right-box {
    float: left;
    width: 185px;
}

リスト1.3　固定レイアウト・2カラム（右サイドバー）の変更箇所

そして、左サイドバー・右サイドバー、いずれの場合もリスト1.4 の赤色部分を併せて変更してください。

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

リスト1.4　固定レイアウト・2カラム（左サイドバー・右サイドバー共通）の変更箇所

665px は 2カラム全体の幅を示しており、変更したサイドバー幅の値を元に、665px の部分を修正します。算出式は

元の値 + サイドバー幅の増分

となります。
例えば、サイドバー幅 185px を 200px にひろげた場合は、

665px + (200px - 185px) = 680px

となるので、680px を設定します。

２．リキッドレイアウト

２．１ 3カラムレイアウト

スタイルシート後方に出現する、リスト2.1 の赤色部分（3ヶ所）を変更します。

/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

リスト2.1　リキッドレイアウト・3カラムの変更箇所

ちょっとややこしいですが、155px はサイドバーに実際に表示される部分の幅、最初の185px がサイドバー全体の幅が設定されています。

まず、サイドバーの表示部分 155px の値を変更した後、

元の値 + サイドバー幅の増分

を加算してください。例えばサイドバーの表示部分の幅を 155px から 160px に変更した場合、185px の部分は、

185px + (160px - 155px) = 190px

となり、190px を設定します。

２．２ 2カラムレイアウト（左サイドバー）

スタイルシート後方に出現する、リスト2.2 の赤色部分（2ヶ所）を変更します。

/* 2カラム(リキッドレイアウト：左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
.layout-two-column-liquid-left #links-left {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}

リスト2.2　リキッドレイアウト・2カラム（左サイドバー）の変更箇所

値の変更方法は２．１項を参考にしてください。

２．３ 2カラムレイアウト（右サイドバー）

スタイルシート後方に出現する、リスト2.3 の赤色部分（2ヶ所）を変更します。

/* 2カラム(リキッドレイアウト：右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-liquid-right #links-right {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

リスト2.3　リキッドレイアウト・2カラム（右サイドバー）の変更箇所

値の変更方法は２．１項を参考にしてください。

３．中央カラム幅も変更する（固定レイアウトの場合のみ）

３．１ 3カラムの場合

中央カラムの幅を変更する場合は下記の赤色部分を修正します。増加分はリスト1.1 の 850px の部分に、さらに追加します。

.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

リスト3.1　固定レイアウト・3カラムの変更箇所

３．２ 2カラム（左サイドバー）の場合

下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。

/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}

リスト3.2　固定レイアウト・2カラム（左サイドバー）の変更箇所

３．３ 2カラム（右サイドバー）の場合

下記の赤色部分を修正します。増加分はリスト1.4 の 665px の部分に、さらに追加します。

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}

リスト3.2　固定レイアウト・2カラム（右サイドバー）の変更箇所

中央カラム幅のみ変更する場合は「中央カラムにバナー広告を表示する」を参照願います。

Comments [14] | Trackbacks [0]

Movable Type Wheeljack の新機能（その1：Assets）

December 19,2006 12:38 AM
Category：[wheeljack]
Tag：[MovableType, Wheeljack]
Permalink

現在、Six Apart では、Wheeljack というプロジェクトで Movable Type の開発が進んでいます。

Six Apart：Tech Talk Blog：Movable Type Wheeljackで遊ぼう

上記の記事にしたがって、Windows 上でソースコードのダウンロード・ビルドを行うことで、Movable Type Wheeljack を入手でき、Movable Type のインストールすることで実際に使ってみることができます。
注：正規のライセンスをお持ちでない場合、Wheeljackをダウンロードして運用することはできません。個人ライセンスも同様です。

ということで、Wheeljack で新たに追加された機能についてご紹介します。今回紹介する内容は下記のサイトでも紹介されています。

Assets

3.33 の管理メニューにあった「ファイルのアップロード」は「ASSETES」に変わっています。現状では和訳されていませんが、Asset は「資産・財産」という意味ですが、ここでは Movable Type にアップロードするファイル類を指すようです。
推測ですが、エントリーと同じ感覚でアップロードしたファイルを管理できるようになると思われます。管理できるメリットは色々あると思いますが、例えば公開したエントリーを削除した時、エントリーに紐付いたファイルを管理画面から削除するというケースが考えられます。実際にエントリーとファイルの関連付けまで管理されるかどうかは不明ですが、利便性が高くなることは間違いないでしょう。

ASSETS のページ。まだファイルがひとつもアップロードされていない状態です。ファイルをアップロードするには右上の「Upload New File」をクリックします。

Ajax を利用したファイルのアップロード画面が表示されます（Windows 自宅サーバ環境+IE6では正常に動作せず）。この画面ではこれまでの通り、アップロードするファイルとアップロード先を指定し、「Upload」をクリックします。

アップロードすると、オプションとして新しいエントリーの作成／エントリーへの画像表示／表示位置（左・中央・右）／サムネイル作成／ポップアップへのリンク／設定内容の保存、等が表示されます。この画面では全て表示されていますが、「表示オプション」はチェックボックスのチェック状態で非表示になり、ユーザビリティが考慮されています。

エントリーを作成する場合、エントリー画面へジャンプします（これは 3.3 で実装済）。

ファイルをいくつかアップロードした後の ASSETES のページ。「Type」欄にはファイルの種類が表示され、サイズも分かります。

「Filename」欄をクリックすると、画像ファイルであればイメージとURL、アップロード先のパス等が表示されます。

Assets にはタグを付与できます。Assets のページでタグを付与したいファイルを選択し、右上にあるプルダウンメニューで「タグの追加...」を選択して「Go」をクリック。

ここでは「picture」を入力します。

入力したタグが反映されました。

タグは Assets の検索条件として利用できます。

Comments [0] |

小粋空間 - a cheap joke and a play on words site

2006年ブログ総括

毎日エントリー

はてなブックマーク

BlogPeople1200リンク

紹介いただいた書籍

テンプレート

YST 絶不調

Amazon の売れ筋商品

まとめ

YouTube 革命

ドネーション（寄付）の方法

Movable Type wheeljack の新機能（その2：Assets関連MTタグ）

MTEntries タグの lastn 属性と sort_order 属性（ascend）の同時指定が有効にならない件について

タグ検索でエントリーの画像を表示する

１．プラグインのダウンロード

２．検索結果テンプレートの修正

３．エントリーに含まれる画像の表示数を変更する

記事（エントリー）に絵文字を使う for Serene Bach

１．記事投稿画面の修正

１．１ script 要素の追加

１．２ 「本文」への絵文字一覧表示スクリプトの追加

１．３ 「続き」への絵文字一覧表示スクリプトの追加

２．ファイルのアップロード

３．スクリプトのダウンロード

３．１ 絵文字一覧表示部分（赤色を削除し、青色を追加）

３．２ 絵文字表示部分（赤色を削除し、青色を追加）

４．スクリプトに絵文字URLの追加

５．スクリプトのアップロード

６．テンプレートの修正

７．コメント部分にも絵文字を利用する場合

８．CSS 設定

サンタクロース

YST（Yahoo! Search Technology）との戦い：その3 ＆ Google 関連検索

Simply Threaded プラグイン

１．インストール

２．テンプレート修正

Creative Commons Licence のライセンス・マーク変更

公開テンプレートのサイドバーのカラム幅を変更する

１．固定レイアウト

１．１ 3カラムレイアウト

１．２ 2カラムレイアウト（左サイドバー/右サイドバー）

２．リキッドレイアウト

２．１ 3カラムレイアウト

２．２ 2カラムレイアウト（左サイドバー）

２．３ 2カラムレイアウト（右サイドバー）

３．中央カラム幅も変更する（固定レイアウトの場合のみ）

３．１ 3カラムの場合

３．２ 2カラム（左サイドバー）の場合

３．３ 2カラム（右サイドバー）の場合

Movable Type Wheeljack の新機能（その1：Assets）

Assets

１．２「本文」への絵文字一覧表示スクリプトの追加

１．３「続き」への絵文字一覧表示スクリプトの追加

３．１絵文字一覧表示部分（赤色を削除し、青色を追加）

３．２絵文字表示部分（赤色を削除し、青色を追加）