事務局コダマです。

Webサイトやブログを運営時に、設置したリンクのクリック数やファイルのダウンロード数を調べたい場合のTipsです。
CGIなどを使うのもよいですが、Google Analyticsを導入しているならもっと手軽にクリックカウントが調べられます。

たとえばこの画像がクリックされた数を調べたい場合


<a href="http://app.fudemame.net/item/creo/f4996" target="_blank"
onClick="javascript:urchinTracker('/link/f4996');">
<img src="http://cs.web-creo.jp/image/creo/regular/f4996/small.png"></a>

赤字のようにjavascriptを追加するとGoogle Analyticsで、 /link/f4996　というURLのページビューの形でクリックカウントが調べられます。

ファイルのダウンロード数も同様に、xxxx.pdfやxxxx.zipへのリンクに対してjavascriptを追加するだけでＯＫ。

また、MovableTypeのように、ページ本文とサイドバーが分かれているブログから同じURLにリンクした時に、本文とサイドバーのそれぞれのクリック数を調べることも可能です。
本文のリンクに /link/main/xxxx　サイドバーのリンクに /link/sidebar/xxxx 　と記述すれば、Google Analytics上で別々にクリックされた数を見ることができます。

イラストのダウンロード数をページ上に表示、などの用途には使えませんが、SEO用にクリック数やDL数を調べるだけなら十分じゃないでしょうか。

事務局コダマです。
月別のアーカイブを新しい順にソートしたので、忘れないようにメモ。

MovableTypeのアーカイブを新しい順に並べる方法です。
MTってエントリーの表示順は設定画面から変更できますが、アーカイブはテンプレートを修正する必要があります。

月別のアーカイブは初期状態だと設定画面の「テンプレート>アーカイブ>日付アーカイブ」（day.html）になってます。
この中から、エントリーを並べ替えているMTタグを検索し、並び替え順を ascent（昇順）からdescend（降順）に変更すればOK。
変更後、再構築すると並びが新しい順になります。
並び順を変えたときには、”xxxに投稿されたすべてのエントリーです。新しいものから過去のものへ順番に並んでいます”の文章も正しく修正しておくことを忘れずに。

■変更例
day.html
<MTEntries sort_by="created_on" sort_order="ascend">
<MTEntries sort_by="created_on" sort_order="descend">

事務局コダマです！

クレオはeCREOLAB（ここです）と筆まめonlineの２つのブログでMovableTypeを使っています。
で、普段は何不自由なく使っているのですが、先日突然eCREOLABブログから筆まめonlineブログへトラックバックが貼れなくなったんです。

ログを見てみると、”HTTP error: 403 Throttled ”というエラーが発生していました。six apartのサポートサイトでは、” トラックバック先において、何らかの制限を設けている場合や、トラックバックを拒否するような設定が行われている場合にトラックバックが失敗することがあります。”って書かれてるんですけど、当然TB拒否設定なんかしてないワケで。

かなり困ったんですが、ふと気がついて筆まめonlineブログのトラックバック管理画面を見てみたら迷惑トラバが３００以上たまっているのを発見。これを消去したらめでたくトラックバックできました。

システム任せにしていると忘れがちなんですけど、スパムトラックバック＆コメントはまめにメンテしないといけないと反省した一件でした。

事務局コダマです。

ALPSLAB APIのエントリーでテーブルを使ってみて気がついたのですが、MovableTypeってエントリーの中でtableタグを使うと、テーブルの前に空行がいっぱい入っちゃうんですね。どうやらtrの数に比例して入るような…？

これを回避するには、tableの前にわざと1行空行を入れておくといいようです。
1行分は隙間があいてしまうけど、たくさん空行が入ってしまうよりはましですよね。

たくさんあいてしまう例：

1行だけ空行を入れた例：

事務局コダマです。

MovableType4が出荷されて３週間ほど経ちました。

eCREOLABは、駆け込みでMT3を購入して８／５に立ち上げたので、ほぼMT3最後発のサイトになっています。
時期的に微妙なのはわかっていたのですが、安定度を取った形になりますね。

MT3で不満（というほどでもないですが）なのは、エディット機能がプアな点。
ブラウザのテキストコントロールそのままの編集画面に、B I Uなどの今となってはレトロなボタン群…
普段タグ補完型のエディタを使っていると、タグ入力もちょっと面倒。
MT4ではかなりリッチなエディタを搭載しているようなので、機会を見て導入検討してみたいものです。

MTでメインサイトを構築している企業をよく見かけますが、編集はどうしているんでしょうね。

事務局コダマです。

サイトにPHPやHTMLのソースコードを掲載する場合、一般的にはpreとcodeタグを使うことが多いと思います。が、MTでpreタグを使うと、なぜか1行ごとに空行が挿入されてしまうんですよね。

<pre>

こんな風に

行間が空いてしまう

</pre>

しょうがないんでcodeタグだけ使っていますが、そうすると今度はインデントした分を&nsp;に置き換えないといけなくていちいち面倒ですよね。
なんかいい方法がないかと探していたら、PHP SPOTというサイトでPHPコード変換機というサービスを見つけました。

このサービスを使うとインデントの部分や<>を自動的に置き換えてくれてなかなか優秀です。
おまけにPHPコードの部分を色付けしてくれるので、見栄えもグー。
昨日掲載したソースを変換してみると、変換例のように色付けしてくれます。

こんな風にちょっとした問題を解決してくれるサービスっていいですね。
勉強になりました。

■変換例

<div class="whats-new-content">
    <h3 class="whats-new-header">What's New</h3>
    <div class="whats-new-body">
        <?php
            define("oneday","86400");  // １日の秒数
            $today = time();           // 今日の日付
        ?>
        <MTEntries category="What'sNew" lastn="3">
        <p><$MTEntryDate format="%Y/%m/%d"$> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
            <?php
                // 更新から１週間以内なら日付をwhats-new-new-dateにする
                $entrydate = strtotime('<$MTEntryDate format="%Y/%m/%d"$>');
                if( $today - $entrydate < oneday * 7 )
                {
                    print ' <span class ="whats-new-new-date"> recent!</span>';
                }
            ?>
            <br /><$MTEntryExcerpt$><br /></p>
        </MTEntries>
        others...<br />
        <div class="whtats-new-other">
            <MTEntries category="What'sNew"  offset="3" lastn="7">
                <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
            </MTEntries>
        </div>
    </div>
</div>



事務局コダマです。

What'sNewの自動化で紹介したものをPHPを使って改良してみました。

改良点は
１．最新１０エントリーをWhat'sNewに表示
２．うち最新３件を日付付きで表示
３．更新日が１週間以内のものは”recent!”を追加
４．４〜１０件目は日付なし＆小さめのフォントで一覧表示
です。

■実行例

■ソース
<div class="whats-new-content">
  <h3 class="whats-new-header">What's New</h3>
  <div class="whats-new-body">

    <?php
        define("oneday","86400");  // １日の秒数 
        $today = time(); // 今日の日付
    ?>

    <MTEntries category="What'sNew" lastn="3">
      <p>
        <$MTEntryDate format="%Y/%m/%d"$> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>

        <?php
          // 更新から１週間以内なら日付をwhats-new-new-dateにする
          $entrydate = strtotime('<$MTEntryDate format="%Y/%m/%d"$>');
          if( $today - $entrydate < oneday * 7 )
          {
             print ' <span class ="whats-new-new-date"> recent!</span>';
          }
        ?>

        <br /><$MTEntryExcerpt><br />
       </p>
    </MTEntries>
    others...<br />
    <div class="whtats-new-other">
       <MTEntries category="What'sNew"  offset="3" lastn="7">
           <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> 
       </MTEntries>
    </div>
  </div>
</div>

■解説
細かくはソースを見ていただくとして、大雑把な動きは

１．$entrydate = strtotime('<$MTEntryDate format="%Y/%m/%d"$>');でエントリー日をUNIXタイムスタンプに変換
２．もし$entrydateと今日の日付の差が７日未満の場合、文字色を赤に
※スタイルシートでwhats-new-new-dateをcolor:redに設定しておいてください

です。
MTとPHPを組み合わせると便利ですねー。

事務局コダマです。

”What'sNew”を追加しました。
せっかくのMovableTypeなので、MTタグで自動化しています。

MTEntriesタグを使うと特定カテゴリの抽出ができるので、それを使って”What'sNew”カテゴリのエントリーだけを一覧表示するようにしました。
こういう機能があるとCMSって感じがしますね！

■実行例

■ソース
  <div class="whats-new-content">
    <h3 class="whats-new-header">What's New</h3>
    <div class="whats-new-body">
      <MTEntries category="What'sNew" lastn="3">
      　 <$MTEntryDate format="%Y/%m/%d"$> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
      　 <$MTEntryExcerpt$><br />
      </MTEntries>
    </div>
  </div>
（”whats-new-content”などは、ブログのデザインに合わせて適当に設定してください）

■解説
<MTEntries category="What'sNew" lastn="3">で、カテゴリが”What'New”のエントリーを新しいものから３つリストアップしています。
MTEntryDate format：エントリーの投稿日
MTEntryPermalink：エントリーへのリンク
MTEntryTitle：エントリーのタイトル
MTEntryExcerpt：エントリーの抜粋（なければエントリーの先頭から２０ワード）
になります。

MTEntriesはいろんな制御ができるので、興味のある方はMT3.3のマニュアルをどうぞ。

事務局コダマです。

PHPによるモジュール化では、コードを埋め込むテンプレートファイルをPHPに対応させる必要があります。

eCREOLABではインデックス・テンプレートのメインページとアーカイブページ、アーカイブ・テンプレートのエントリページ、カテゴリーページ、日付ページをPHP化しました。

アーカイブページの変更を例にとると次の手順になります。
１．MT管理画面の「環境設定」にある「テンプレート」をクリック
２．「アーカイブページ」をクリック
４．出力ファイル名の拡張子を php　に変更（archives.html → archives.php）
５．インクルードしたい部分にPHPコードを記述
<div id="banner">
<div id="banner-inner" class="pkg">
<--　ブログのホームページと同じディレクトリにあるbanner.htmlを読み込む -->
<?php require_once('<$MTBlogSitePath$>banner.html'); ?>

すべてのページの修正が終わったら、サイトの再構築を実行すれば完了です。

MovableType（MT)に限らず、サイトを作っていると、サイドバーやフッターなど、いろんなページで共通化（モジュール化）したいところが出てきます。

eCREOLABではMTinclude、SSI、PHPの３つの方法でバナーやサイドバーなどをモジュール化を検討しました。

１．MTInclude（MTタグ）
例：<$MTInclude module="banner.html"$>
　　
２．SSI（サーバーサイドインクルード）
例：<!--#include file="banner.html"-->

３．PHP（プログラム言語）
例：<?php require_once('banner.html');?>

１はサイト再構築時に共通部分を読み込むので、構築時間がかかってしまう反面、静的にHTMLを吐き出すので実行時（閲覧時）に読者を待たせる事がありません。
２と３はその逆で、実行時に読み込む分再構築が劇的に短縮できるかわりに、ページ表示時にオーバーヘッドがかかってしまいます。

今回は将来的にエントリーが増える事や機能拡張のしやすさを考えて、PHPを使ってモジュール化を行いました。

MTをPHP化する場合、いくつか設定変更が必要になります。
設定の方法は、次のページで。

ブログ勉強中のコダマです。

eCREOLABのサイトを普通のwebサイトからMovableTypeに移植しているんですが、MovableType以前に、スタイルシートの初心者なので覚える事がいっぱいあって大変です。
で、どうせ勉強するなら、という事でサイトの更新をしつつ、進み具合を報告していきたいと思います。

今日はタグクラウドを追加してみました。
Flickrやニコニコ動画なんかで使われているアレです。

■MTでのタグクラウドの作り方
MovableTypeはエントリー・タグのランキングを管理するMTTagsがあるので、それを使うと簡単に追加でます。

■タグクラウドのソース
<div class="module-tagcloud module">
    <h2 class="module-header">人気タグ</h2>
    <div class="module-content">
        <ul class="module-list">
            <MTTags>
                <li class="module-list-item taglevel<$MTTagRank$>">
                <a href="<$MTTagSearchLink$>"><$MTTagName$>  </a>
                </li>
            </MTTags>
        </ul>
    </div>
</div>

■スタイルシート
.module-tagcloud .module-content {text-align: left;}
.module-tagcloud .module-content .module-list { list-style: none;}
.module-tagcloud .module-content .module-list .module-list-item { display: inline; }
.module-tagcloud .module-content .module-list li.taglevel1 { font-size: 21px; }
.module-tagcloud .module-content .module-list li.taglevel2 { font-size: 18px; }
.module-tagcloud .module-content .module-list li.taglevel3 { font-size: 15px; }
.module-tagcloud .module-content .module-list li.taglevel4 { font-size: 13px; }
.module-tagcloud .module-content .module-list li.taglevel5 { font-size: 11px; }
.module-tagcloud .module-content .module-list li.taglevel6 { font-size: 10px; }

初期値では6段階のランクを持てるようになっています。
ランクの数は MTTagRank max="10" とすると、10段階に変更できるようです。