2008年12月 Archive

今年（2008年）を振り返る記事をアクセス解析をみながらまとめてみます。恐らくまとまっていないことと思いますが

今年も残すところあとわずか。ということで年間のまとめ記事でも、と思っていてもアイデアが浮かばないので何気にアクセス解析でもながめながら記事を書くことにします。例によって、リッチテキストエディタを利用しなくてマイペースでいきます。

キーワードと探し求めている情報

あらかじめいっておきますと、解析にはGoogle Analyticsにもとづいてます。期間は2007年の12月31日から2008年12月30日にしました。

ざっと注目しているものをピックアップしてみますと

• カスタムフィールド
• Firefox 翻訳
• アーカイブマッピング

あたりが検索キーワードとして多いようです。Firefoxの翻訳のアドオンは需要があるんでしょうかね。Movable Typeのことをテーマとして主にあつかっているためか、ソレ系のキーワードが大半を占めているようです。

閲覧者のPC環境について

このサイトの閲覧者がどのような環境で閲覧されているか、というのも気になる情報です。ブラウザとOSについてみていこうと思います

ブラウザについて

閲覧者の環境でブラウザの項目をみていきますと、多いほうから順に以下のようになっていました。（）内は全体からの割合（％）で、セッションを基準とした集計です。

1. Firefox （47.60）
2. Internet Explorer （43.16）
3. Safari （5.37）
4. Opera （2.59）
5. Chrome （0.65）

今年はGoogle Chromeが登場した年でもありましたが、このサイトでは（割合は）低めかも。結局、自分もここまでインストールしてなかったり。

因みにInternet Explorerのバージョンはというと、

• 6.0 (50.82)
• 7.0 (47.78)
• 5.5 (0.17)

といった結果となりました。()の数字はIEの利用者のセッション中での割合です。全セッションにおける割合は別に計算しないといけないみたいで、時間の関係（ということにしておきます）で省略しちゃいます。

IE6ユーザはまだまだ多いという印象ですが、これは年間通じてのハナシ。特定期間（一箇月とか一週間など）でみると、IE7のほうが多いもよう。

WindowsとMac以外のOS

ちなみにMac利用者の割合は10パーセントちょっとくらいなのですが、いくつかピックアップします。以下、多い順です

• Linux
• NTT DoDoMo
• iPod
• FreeBSD

このなかでは、Linuxが圧倒的に多いです。それでも全体の１パーセントに満たないですが

最後に

ここでまとめないといけないんですね。いろいろと眺めていて時間ばかりが経過してしまいました。

検索エンジンからの訪問者の割合が多かったです。今後もそうなると思いますが。あと基本的にいえるのは全体でアクセス少ないです。ま、べつに気にはしてない（といえばウソ）ですが。来年のこの時期に同じような内容でどう変化があったか見れればいいなと思いました。それまでサイトが残っていることが条件ですが。全然まとまっておりませんが以上です。

それではよいお年をお迎えください。

Movable Typeのタグリファレンスでわかりやすくなったほうのリンクの活用のために以前このブログで書いた記事の補足です

• maRkのMyOwn - [MT]テンプレートタグリファレンスへのリンクを張りやすく

上に示しました記事において、テンプレートタグリファレンスリンクの紹介をさせていただきましたが、このリンクにつきまして、以下のようにしてみました。

• rel-tagを付与
• スタイルシートでタグであることを明示してみる

microformatsのrel-tagを使うとしたら、リファレンスへのパーマリンクよりも短縮された（便宜上での表現です）URIのほうが適しているようです。

あと、これは特にやっておくことではありませんが、文章中にタグとして埋め込んだということを少しわかりやすくするために、以下のようなスタイルを適用させてみました。

/* tags */

p > a[rel="tag"]:before {
content:url("タグを表す画像までのURL"); }

記事内でタグへのリンクにrel="tag"があるものに対してタグを表現した画像が前につくというものです。

見た感じではわかりにくいですが、以下の様な形になります。

• MTEntries
• entries

＊どちらもリンク先は同じですが、「タグ」についてみると、上のほうは「MTEntries」というタグ、下では「entries」というタグが対象となります。

MovableType4.2xのコメント返信機能つきテンプレートの編集。前回のものはmicroformatsをあまり意識してなかったのでその点だけ修正してみました

この記事は以下の記事の続きになります。コメント返信機能をmt.Vicunaテンプレートに適用させるといった内容です。

• 4.2のコメント・リプライお試し

テンプレートの変更

当該記事に示しましたテンプレート（のコード）のdt要素の部分だけ抜粋します。

<dt<MTIfArchiveTypeEnabled archive_type="Individual"> id="comment-<$MTCommentID$>"</MTIfArchiveTypeEnabled>>
<span class="name">
<MTIfNonEmpty tag="CommentAuthorIdentity">
<$mt:CommentAuthorIdentity$>
</MTIfNonEmpty>
<mt:IfCommentParent>
<span class="vcard author"><$mt:CommentAuthorLink default_name="Anonymous" show_email="0" spam_protect="1"$></span> replied to <a href="<mt:CommentParent><$mt:CommentLink$></mt:CommentParent>">comment from <mt:CommentParent><$mt:CommentAuthor$></mt:CommentParent></a>
<mt:Else><span class="vcard author"><$mt:CommentAuthorLink$></span>
</mt:IfCommentParent>
| <span class="date"><a href="<$mt:CommentLink$>"><$mt:CommentDate$></a></span>
<mt:IfCommentsAccepted>
| <$mt:CommentReplyToLink$>
</mt:IfCommentsAccepted>
</span>
</dt>

以下のよう書き換えをおこないます。

class="name"のところは、class="vcard autor name"、class="vcard author"のところは、class="fn"のようにしてみます。書き換え後のテンプレートは以下のようになります。

<dt<MTIfArchiveTypeEnabled archive_type="Individual"> id="comment-<$MTCommentID$>"</MTIfArchiveTypeEnabled>>
<span class="vcard author name">
<MTIfNonEmpty tag="CommentAuthorIdentity">
<$mt:CommentAuthorIdentity$>
</MTIfNonEmpty>
<mt:IfCommentParent>
<span class="fn"><$mt:CommentAuthorLink default_name="Anonymous" show_email="0" spam_protect="1"$></span> replied to <a href="<mt:CommentParent><$mt:CommentLink$></mt:CommentParent>">comment from <mt:CommentParent><$mt:CommentAuthor$></mt:CommentParent></a>
<mt:Else><span class="fn"><$mt:CommentAuthorLink$></span>
</mt:IfCommentParent>
| <span class="date"><a href="<$mt:CommentLink$>"><$mt:CommentDate$></a></span>
<mt:IfCommentsAccepted>
| <$mt:CommentReplyToLink$>
</mt:IfCommentsAccepted>
</span>
</dt>

class="url fn"としたいところなのですが、MTCommentAuthorLinkの出力が、コメントフォームでURL・メールアドレス共に記載されなかった場合、リンクはつかないという動作のために「コメント投稿者のリンクがあるかないか」の判断をおこなう処理が必要になってくるようなのでfnのみにしてあります。

今月(2008年12月)テンプレートなどカスタマイズした箇所をまとめたエントリです

月末までまだ少しありますが前倒し（？）していきます。

今月はあまり弄ってなかったりで、いわないとわからないような部分です。

1. mixiCommentプラグイン導入
2. blogchart.jpのパーツの表示が遅い場合の対策
3. 一部ページにrel-tagを追加
4. コメントフォームで、何もいれずにプレビューされた場合の対策

mixiCommentはmixi の ID を使って サインインをして、コメントを投稿できるようにするためのプラグインです。

• mixiComment | Movable Type プラグインディレクトリ

blgchart.jpのパーツで表示が遅いとき、そのパーツ以降のレンダリングが遅れる状況があり、以下のページを参照して改造をおこないました。

• blog chart.jp のブログパーツが重いので勝手に改造した ::: creazy photograph

あとタグ一覧のページ（リンクが上のナビリンクにあります）、ブックマークリストのページにrel-tagを追加してみました。

コメントフォームにAdd Your Commentと初期値に書かれていて、クリックのとき消えるようにしてあるのですが、入力されずにプレビューされたとき、プレビューで「Add Your Comment」がそのままでないように変えました。

入力内容の先頭の文字列をチェックして、Add Your Commentの文字列が入っているかをMTIFで条件を分岐させてるというだけのもので、まぁあまりスマートでない感じかも。

今月のカスタマイズは以上です。

これまで作成したFirefoxアドオン、Stylishで使うスタイルシートをまとめた記事です。

なお、自分基準で見れればいいかな、というレベルです（何の意味があるかわからないようなのもあります）ので、あまり参考にならないかも。というか、そもそもCSS苦手なのでアレですが

Stylishアドオンはこちらから。

• Stylish :: Firefox Add-ons

以下が作成したスタイルシートになります。気の利かないコメントつき

ブログ記事追記部分のスタイル

追記

#more,
#extended
         {
  background-image:none !important;
  border:1px dotted blue !important;
  padding: 3px !important;
}

はてなハイクのスターをサクラに

ハイク用addサクラ

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://h.hatena.ne.jp/")  
{

/* Addボタンの画像をurl()の中に指定します */
.hatena-star-add-button-image {
  background-image: url(http://f.hatena.ne.jp/images/fotolife/m/maRk/20080402/20080402142634_m.jpg)!important;
}

/* ☆の画像をurl()の中に指定します */
.hatena-star-star-image {
  background-image: url(http://f.hatena.ne.jp/images/fotolife/m/maRk/20080402/20080402142640_m.jpg)!important;
}

}

今使ってない。春になったら使うかも

ハイクモバイル版用のスタイル

ハイクモバイル

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://h.hatena.ne.jp/mobile/") {

body {width: 30em !important;}

#index, 
#keyword,
#following,
#album,
#user,
#id
 {
     margin-left:auto!important;
     margin-right:auto!important;
}

.body { width:100%!important; margin-bottom: 1.2em!important;}
.title { margin-bottom :1.2em!important; }
}

はてなエントリページで自分の位置に背景色

hatena::entrypage

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http://b.hatena.ne.jp/entry/) {
.userlist li.self{
                  background:#FFF/* !important*/;}
}

Deliciousみたいに自分のところを背景色に。背景が白でもまだ目立たない感じだけど、色彩センスがないので（ｗ）。!importantあるなしで若干違いあり。!importantつけると「お気に入り：」の処の自分アイコンにカーソルをあてたときのスタイルも無視してStylishで指定した背景色になる

Disqusでなんとなくinput要素が短いと感じたので

Disqus用input要素横幅拡張

#form-anon-name,
#form-anon-email,
#form-anon-url   {
              width: 32em!important; }

使ってないので意味はないです。ただやってみたかったとかいう。

注：古いDISQUS のスタイルの時のものです。

404のブログに

dankogai

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://blog.livedoor.jp/dankogai/") {
.amn { display: none!important; }
#links { display: none!important; }
#content { width:50em !important; }
}

右ペインの情報が......

coreserverサーバ管理画面用のボタンへのスタイル

coreserverサーバ管理画面用

input.S {
     -moz-outline: 3px solid #E0EBF5 !important;
     -moz-outline-radius: 13px !important;
     font-weight:bold!important;

     cursor:pointer !important;

border:1px solid #E0EBF5 !important;

/* 角丸 */
     -moz-border-radius:13px;
}

input.S:focus {
     -moz-outline: 3px solid #66CCFF !important;
     -moz-outline-radius: 13px !important;}

Bloglinesで左ペインのリンクリストをdisplay:blockに

bloglines

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(bloglines.com) {

.treeView li > a,
.treeView li > li.sub a{
display:block !important;}

.treeView li > a:hover,
.treeView li > li.sub a:hover{
background-color:#F0FFF0 !important;}
}

ブログタイトルが短いサイトなどで、クリックする箇所が文字以外の空白部分でも有効になるようにするためのもの。

Continue reading

maRkのつれづれぼっくす（Vox blog）の料理関係の記事をピックアップ

年末ですので恒例（なのかどうかわからないけど）の総集編（のようなもの）ということでその第一弾です(何

早く言うと、つれづれぼっくすでcookingタグがついている記事を拾ってみたものですが、以下のとおりです。

• 「cooking」タグの記事 | maRkのつれづれぼっくす

• Archives for cooking | maRkのつれづれぼっくす

• 目玉燒、不用油
  • 投稿日　2007/11/19
    • 内容：油をひかずに目玉焼きを作る

• ふきのとうミソ
  • 投稿日：2008/03/21
    • 内容：ふきのとうを茹でて味噌であえる

• 常備しておきたい調味料とか
  • 投稿日：2008/05/01
    • 内容：　常備している調味料類を列挙

• 白菜とブロックベーコンのクリームシチュウ
  • 投稿日：2008/11/16
    • 内容：　白菜とベーコンのクリームシチューの作り方

• お手軽。水炊き風
  • 投稿日：2008/12/05
    • 内容：　白菜を使った鍋料理風

このブログよりクロスポストした記事は以下のページとなります(リンク先は当ブログ内)

• 我家流しょうが焼肉
• 冷やし中華始める前に
• うずらのたまごについて本気出して考えてみようとしたけどやめた
• 普段使ってるフライパンで作るだし巻きたまご

InstaMTで編集しているテンプレートを特定のフォルダ内に収めて同期させるといった使い方についてです。

検索語から何かを勝手に読み取って答えるようなエントリ、みたいな企画を考えてまして。今回はその予行練習とでもいいましょうか、まぁそんな感じです。

検索されたワードは特に公開しないというお約束ですすめていこうと思います。

InstaMTに「このテンプレートにリンクするファイル」を設定してみる

さて、「あらかじめローカルで編集しテストをおこなったのち本番環境で使ってみる」、というようなとき一寸したものでしたら、InstaMTでも実現は可能です。

で、編集したテンプレートをバックアップ目的等でフォルダにまとめてローカルに保存したい、というようなときは「このテンプレートにリンクするファイル」(以下この記述を、「Link to File」とします)という機能をつかってみる、というのはどうでしょうか。

Link to Fileについては、「小粋空間」さまの以下の記事にて、その機能の詳細が説明されています。

• 小粋空間: 「このテンプレートにリンクするファイル」の使い方 for Movable Type

こちらが特に説明することはないのですが、InstaMTにおいての設定は以下のようになります。

ローカルディスク（C:）直下にInstaMTをインストールしたとして、mtVicunaというフォルダにStylesheetテンプレートを「styles.mtml」というファイル名にて任意フォルダにリンクさせるという場合です。

Link to Fileの項目には以下のように記述して保存または再構築します。

C:\instamt\www\mtVicuna\styles.mtml

＊パスが適正でないと、保存のときにエラー表示がでますのでご注意。保存がうまくいっているようならば、実際のフォルダを確認します。上の例ではmtVicunaフォルダ内にstyles.mtmlが入っているはずです。このファイルをテキストエディタ開いて直接編集してみます。そして、InstaMTを起動してテンプレートを見にいけばそのファイルを変更したテンプレートはその変更が反映されます。

ワタくシの環境で可能であったというものですので、その点はご承知おきください。あとInstaMTをUSBで使う場合は想定してません。

なお、InstaMTについては以下のページを参照します。

• InstaMT でかんたんデモ環境構築 | MovableType.jp

情報の古い記事をどう扱っていくのか、およびシークレットタグによる記事管理についてです

Open MagicVox.net (www.magicvox.net)さまのシークレットタグの使いドコロ～古い記事であることを示すという記事にシークレットタグを使った記事の管理方法などが紹介されています。

長い間，ブログを続けていると，様々な事情で記事内容が古くなってしまっていることがあります。例えば，プログラムのバージョンが変わったりするなどして，その紹介記事が現在のものと則さなくなってしまっているなどの理由です。そんな時にも，シークレット タグを上手く使って，古い記事の管理を簡単にすることができます。

シークレットタグの使いドコロ～古い記事であることを示す - Open MagicVox.net

人さまのサイトの運営方針などによる部分がありますので、おそらくはこれが正解という無二の答えのない問題なのですが、自分ならどうしようか、といったものを以下に記しておきます。

古い記事を示す文言について

やや本質から離れてしまいますが、常に情報は流れていくことですし、記事に記載されている情報が古くなることは当然のことのように思われます。

　この記事は時間経過やプログラムのバージョンアップなどの諸々の事情によって，現状に正しくそぐわない内容になっている可能性があります。

そこで、ズルい方法ですが、上記の文言を少しオールマイティな言い回しにしておいて（ex.「本サイトに記載されている記事は作成時点に基づく内容であり、適用されない可能性があります。最新の情報を参照するようにしてください」といったもの）、ブログのサイドカラムやら、はたまたブログの説明の箇所あたりに常に表示させておくことで記事内容が古くなることに気をつかうことなくやっていけるのではないでしょうか。

ただし、この方法だと例外となる記事がでてくることもあります。例えば、小粋空間さんのところの、ダジャレ記事のような普遍的な内容の記事などです。

あと、古い記事に対し最新の情報を提供する方法として、古い記事にむけて新しい内容の記事をトラックバックさせておく、といった手法もわりと使われているようです。古い記事は編集する派（？）の自分としては、「どこがどういう理由で適用できなくなったのかの説明を入れてあげたい」、という思いがあるために記事は編集するという形にしています。

余談：Movable Typeの記事検索の挙動に関して、管理ページで記事検索をおこなって、結果が1つのみの場合は、エディットリンクが展開され、直接記事の編集画面へと遷移されるもよう。どのバージョンからそうなっていたのかは不明ですが。

シークレットタグによる管理と記事編集について

ところで、Movable Typeでは、一旦公開された記事は公開の状態を設定（未公開・日時指定）できるものの、「後で編集する予定のある」ことを記事にマークしておくものがありません。（もしかして......プラグインとかあるのかな？）

そこで、編集することの多い記事やあとから編集する予定のある記事にはシークレットタグを付与して管理するというのはアリかと思いました。

例えば、編集予定のあるような記事に@flagといったタグをつけておいて、メニューの「一覧」＞「タグ」とすれば記事一覧のなかに@flagのついたものも表示されますから、そこから当該記事を編集するといった管理ができるというわけです。

酢豚の野菜の切り方や肉の加工のメモです。作り方じゃありません。

野菜類

• にんじん
  • 皮のついたまま乱切りにし、鍋でゆでる
• ピーマン
  • 真ん中から２つに割り、種など除去したあと、乱切り
• たまねぎ
  • たてに2等分し、くし型に切る
• しいたけ
  • 十字に4つ切りにする

肉

• ブロック肉（シチュー・カレー用にカットされてるもの）
  • 醤油と酒で味付けしてしばらく置いておく。片栗粉をまぶして油で揚げる
• 薄切りスライス適当な大きさに切る。
  • 味付けは先述のとおり。片栗粉をまぶして、フライパンまたは中華鍋に油をひいて、油が熱せられた後、肉を炒めて火が通ったら一旦皿にあけておく

MEMO: ピーマン・たまねぎをザルに取っておく（１）、茹でたにんじんをざるに取る際に上からゆでこぼしを（１）に注ぐ。油で揚げるほどでもないので薄切り肉のほうを自分はよく使っている。

W3C Markup Validation Serviceへのリンクをアーカイブページなど複数エントリへのリンクが存在するページに対して与えるカスタマイズ。

マークアップの妥当性をチェックするのにW3C Markup Validation Serviceを利用しますが、開いたページを確認するために、よくみかけるのは以下のようなリンクではないでしょうか。

• http://validator.w3.org/check?uri=referer

このリンクですが、アーカイブページでは一覧のページそのままの状態のチェックになりますから個別エントリをチェックするには更に確認したいページを見にいく必要があります。

そこで以下のようなリンクをアーカイブページのようなテンプレートに埋め込んでみます。オマケでオプションチェックのパラメタ付。見出しのアウトライン表示はValidが出ないと表示されないようです。

以下のキャプチャはためしに設置した例です(実際はつけていません)。

<a rel="nofollow" href="http://validator.w3.org/check?uri=<$MTEntryPermalink encode_url="1"$>;ss=1;outline=1">Validator Check</a>