光陽マーリンズ Website ひっそりと監督のメモ公開中 tag:koyo-marlins.biz,2008-08-24:/blog//10 2007-12-14T05:05:08Z このサイトならびにインターネット関連の技術メモや、そして時々、監督としてのドッジボールや健全育成について思ったことなどを書いています。 Movable Type Pro 4.21-ja リアルタイムに他サイトのFeedを表示する（2）：リアルタイム再構築プラグイン tag:koyo-marlins.biz,2007:/blog//10.286 2007-12-14T05:01:22Z 2007-12-14T05:05:08Z リアルタイムに他サイトのFeedを表示するには、藤本壱氏のThe blog of... 鋪田博紀 リアルタイムに他サイトのFeedを表示するには、藤本壱氏のThe blog of H.Fujimotoのリアルタイム再構築プラグインを使う方法があります。

具体的な方法は、リアルタイム再構築プラグイン（MT4専用版・その1）をお読み下さい。

なお、解説ページは、その1からその4まであります。

]]> リアルタイムに他サイトのFeedを表示する（1）：jsRSS tag:koyo-marlins.biz,2007:/blog//10.285 2007-12-14T04:56:49Z 2007-12-14T05:05:44Z このサイトで使っているBBSは、Movable Typeとは別のCGIプログラム... 鋪田博紀 このサイトで使っているBBSは、Movable Typeとは別のCGIプログラムを使っています。このBBSはFeedを出力できるので、そのFeedを読み込んでトップページで表示させています。

他サイトのFeedを読み込んで表示するにはいくつかの方法があります。

Movable Type 4には、FeedAppLiteというプラグインがインストールされており、簡単にFeedを表示するテンプレートが作れますが、このテンプレートを再構築しない限り、最新の情報に更新されません。

ここでは、FeedAppLiteを使わずに、大黒屋本舗で公開されている、jsRSS++ v3.15というCGIを使ってリアルタイムにFeedを表示させています。

大黒屋本舗からCGIをダウンロードして、任意のフォルダにアップロードし、テンプレートを好みにあわせて書き換えればいいだけで、非常に簡単に行えます。

]]> PHP モジュール化とAjax モジュール化 tag:koyo-marlins.biz,2007:/blog//10.276 2007-12-04T15:45:43Z 2007-12-09T04:08:56Z 活動レポートのエントリーページのサイドカラムに最近の活動として最近のエントリーリ... 鋪田博紀 活動レポートのエントリーページのサイドカラムに最近の活動として最近のエントリーリストを表示しています。

これはAjaxを使ってあらかじめ記事の更新のたびに再構築されたテンプレートを読み込んでいるものです。

詳しくは、「Movable Type WEBデザインの新しいルール」（翔永社：刊、荒木 勇次郎・松永 英明：共著）をご覧ください。

photo
Movable Type WEBデザインの新しいルール
荒木 勇次郎 松永 英明
翔泳社 2007-10-17

by G-Tools , 2007/12/09

また、概要については、荒木氏のサイト小粋空間にAjax によるモジュール化という記事で紹介されています。

よく似た方法で、藤本壱氏のThe blog of H.Fujimotoで紹介されているリアルタイム再構築プラグイン(その1)を使うことでも実現できます。

解説が掲載された「AjaxとPHPによるMovableType高速&最強システム構築法（技術評論社：刊、藤本壱：著）」という書籍がありますので参考まで。

photo
AjaxとPHPによる MovableType高速&最強システム構築法
藤本 壱
技術評論社 2007-07-04

by G-Tools , 2007/12/09

]]> RenameLabel Plugin tag:koyo-marlins.biz,2007:/blog//10.275 2007-12-04T15:37:37Z 2007-12-04T15:44:17Z MovableTypeに限らず汎用のCMSやブログでは、管理画面は、慣れないユー... 鋪田博紀 MovableTypeに限らず汎用のCMSやブログでは、管理画面は、慣れないユーザーには優しいものではありません。

本文や続きといったラベルはまだしも、タグやカテゴリ、キーワードといったラベルでは取っ付き難かったり、それらのフィールドを使ってURLを入力させたりする場合、管理者以外ではマニュアルでもなければ理解できません。

そこで、エムロジック放課後プロジェクトで公開されている、RenameLabel Pluginを使ってラベルの付け替えをしています。

]]> オリジナルのスタイルを作成する tag:koyo-marlins.biz,2007:/blog//10.273 2007-12-01T08:51:32Z 2007-12-01T09:37:54Z Movable Type 4 では、スタイルを選択することによりデザインを変える... 鋪田博紀 Movable Type 4 では、スタイルを選択することによりデザインを変えることができます。

管理画面の「デザイン」から「スタイル」を選択すると、「規定のスタイル」の他、「MT 4 スタイルライブラリ」からも新しいスタイルをダウンロードして使うことができます。

ここではオリジナルに作成したスタイルを、登録して利用する手順を紹介します。このサイトでも同様の方法でスタイルを適用しています。

オリジナルのスタイルを一から作成するよりも、気に入ったスタイルを真似て作るのが手っ取り早いと思います。

基本的には、デフォルトのスタイルシート(ベーステーマ:base_theme.css)の変更箇所を上書きするようなスタイルシートを作成することになります。こうすることでデフォルトのスタイルと互換性をもたせることで、デフォルトテンプレートに手を加えず、カスタマイズが可能になりますし、後々の変更も容易になります。

ちなみに、スタイルシート(メイン:styles.css)は、ベーステーマ（base_theme.css)を読み込む役目のスタイルシートです。

]]>
  • スタイルを保存するフォルダは、MT→mt-static→support→themesに、作成します。例えばmarlinsという名前をつけたフォルダを作成します。
  • 独自に作成したフォルダの中に、上書きするスタイルシートを、例えばmarlins.cssという名前をつけて保存する他、スタイルシートから読み込む画像も保存します。
  • スタイルシートの中に、 
    
@charset "shift_jis";
/*
name: Marlins (独自スタイルの名前：なんでもよい)
designer: Hironori Shikida (独自スタイルの作成者：なんでもよい)
designer_url: http://koyo-marlins.biz/ (独自スタイルの作成者のサイトURL：なんでもよい)
layouts: layout-wtt, layout-twt, layout-wt, layout-tw (独自スタイルのレイアウト：後述)
*/
    と記述します。

    • layouts: に書いてある、layout-wtt, layout-twt, layout-wt, layout-tw は、適用できるカラムレイアウトの種類です。

    • layout-wttは3カラムで大少少
    • layout-twtは3カラムで少大少
    • layout-wtは2カラムで大少
    • layout-twは3カラムで少大

    です。

    Movable Type 4 では、ネガネィブマージンという手法で、メインカラム（大：id="alpha"）が必ず先に来るようになっています。そのためスタイルシートの中に、

    /* Wide-Thin-Thin */
    .layout-wtt #alpha {
    width: 400px;
    }
    .layout-wtt #beta {
    width: 190px;
    margin-left: 30px;
    }
    .layout-wtt #gamma {
    width: 190px;
    margin-left: 30px;
    }
    /* Thin-Wide-Thin */
    .layout-twt #alpha {
    margin-left: 220px;
    width: 400px;
    }
    .layout-twt #beta {
    margin-left: -620px;
    width: 190px;
    }
    .layout-twt #gamma {
    margin-left: 30px;
    width: 190px;
    }
    /* Wide-Thin */
    .layout-wt #alpha {
    width: 610px;
    }
    .layout-wt #beta {
    width: 190px;
    margin-left: 40px;
    }
    /* Thin-Wide */
    .layout-tw #alpha {
    margin-left: 230px;
    width: 610px;
    }
    .layout-tw #beta {
    margin-left: -840px;
    width: 190px;
    }

    と、それぞれのレイアウトに対応してカラムサイズと配置を記述しておくいことで、先ほどの、layouts: に書かれた内容が適用できるようになります。

    ]]>     カテゴリーを並べ替えるプラグイン tag:koyo-marlins.biz,2007:/blog//10.239 2007-10-30T13:41:48Z 2007-10-30T13:46:42Z リンク集のページではカテゴリーを並び替えるために、The blog of H.F... 鋪田博紀 リンク集のページではカテゴリーを並び替えるために、The blog of H.Fujimotoのカテゴリーとフォルダを並べ替えるプラグイン（MT4専用）を利用しています。

    プラグインをダウンロードしてアップロードし、管理画面にログインすれば自動的にデータベースのアップロードがされてすぐにインストールが完了します。

    ]]>     IE6で透過pngを扱うjsライブラリ tag:koyo-marlins.biz,2007:/blog//10.178 2007-10-18T11:28:28Z 2007-10-30T13:53:34Z トップページで透過pngを使用していますが、IE6以前では透過されません。 そこ... 鋪田博紀 トップページで透過pngを使用していますが、IE6以前では透過されません。

    そこで、アルファ画像を扱うalphafilter.jsライブラリ[to-R]で紹介されているalphafilter.jsを使用しています。

    head要素内に

    <script type="text/javascript" src="alphafilter.js"></script>

    とライブラリを読み込み、

    
<p class="alphafilter"><img alt="" src="http://koyo-marlins.biz/img/hogehoge.jpg" /></p>

    としています。

    ]]>     年度別アーカイブを生成するためのMT4専用プラグイン tag:koyo-marlins.biz,2007:/blog//10.169 2007-10-12T16:25:01Z 2007-10-17T05:37:48Z Movable Type 4 からは、年別アーカイブがプラグインなしで実現できま... 鋪田博紀 Movable Type 4 からは、年別アーカイブがプラグインなしで実現できますが、実際には年度別での利用が多いのでは。

    このサイトでは、年度別アーカイブを作成する拡張プラグインを使っています。

    詳細は、FiscalYearlyArchives Plugin 0.01公開 - Ogawa::Memorandaをご覧ください。

    なお、現時点ではバージョンが0.03になっています。

    ]]>     Google Sitemaps に URL の更新 ping を送信する tag:koyo-marlins.biz,2007:/blog//10.168 2007-10-12T15:52:53Z 2007-10-30T13:54:49Z Google SitemapsにURLの更新pingを送信する、MTGoogle... 鋪田博紀 Google SitemapsにURLの更新pingを送信する、MTGoogleSitemapsPingを利用しています。

    詳しくは、Google Sitemapsへの更新通知を自動化するMovableTypeプラグイン - Open MagicVox.netをご覧ください。

    ]]>     Ajax 月送りカレンダー（MT4版） tag:koyo-marlins.biz,2007:/blog//10.167 2007-10-12T15:50:16Z 2007-10-17T05:36:48Z ブログページでは小粋空間: Ajax 月送りカレンダー（MT4版）を利用していま... 鋪田博紀 ブログページでは小粋空間: Ajax 月送りカレンダー（MT4版）を利用しています。

    使用するスクリプトは

    です。

    詳しくは、小粋空間: Ajax 月送りカレンダー（MT4版）をご覧ください。

    ]]>     新着記事にNewマーク表示 tag:koyo-marlins.biz,2007:/blog//10.166 2007-10-12T15:49:15Z 2007-10-17T05:36:15Z 小粋空間で紹介されていた小技を使っています。... 鋪田博紀 小粋空間で紹介されていた小技を使っています。

    ]]> まず次のスクリプトを作りnew.jsとして保存
    // passage time 
    
var pass = 168; 
    


    // display content 
    
var content = 'New'; 
    


    var currentDate = new Date(); 
    
var spans = document.getElementsByTagName('span'); 
    
for (i = 0; i < spans.length; i++) { 
    
    if(spans[i].getAttribute('class') == 'new' || 
    
       spans[i].getAttribute('className') == 'new') { 
    
        time = spans[i].innerHTML.split(":");
    
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
    
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
    
        now = Math.ceil(now); 
    
        if(-now <= pass){ 
    
            spans[i].innerHTML = content; 
    
            spans[i].style.display = 'inline'; 
    
        } 
    
    } 
    
}

    テンプレート中にNewマークを表示させるためのタグを


    
<span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span>

    として埋め込み、

    テンプレートの最後の部分に（本サイトではフッタの直下）


    
<script type="text/javascript" src="<$MTBlogURL$>new.js"></script>

    と記述。

    最後にcssに

    /* New表示用 */
    
span.new {
    
	background: #fff;
    
	color: red;
    
	font-size: small;
    
	display: none;
    
}
    と記述。

    テンプレートに埋め込んだ日付を<span class="new">で囲み、cssとjavascriptで表示・非表示切り替えているわけです。

    ]]>     メールフォーム tag:koyo-marlins.biz,2007:/blog//10.165 2007-10-12T15:44:11Z 2007-10-17T05:35:44Z メールフォームをCGIではなくプラグインで行なっています。 詳しくは、The b... 鋪田博紀 メールフォームをCGIではなくプラグインで行なっています。

    詳しくは、The blog of H.FujimotoのメールフォームプラグインV1.30（その1・概要）をご覧ください。

    エントリーは1から12までありますが、基本は1から10まで、ajax化する場合は11も、さらにサイドバーへ表示する方法は12で書かれています。

    メールフォームプラグインと、補助的に使用するGetQueryParamプラグインは、以下からダウンロードすることができます。ajax化する場合はprototype.jsもダウンロードします。また、ajaxのロード中に表示する画像はajaxload.infoというサイトで作成したものを使用しています

    なお、XHTML 1.0 Transitionalの場合はそのままでかまいませんが、Strictの場合は、テンプレートとスクリプトに若干の変更を加えます。

    ]]> form要素にはname属性が使えませんからid属性に置き換えます。具体には、

    
<form method="post" action="<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi" name="mail_form">

    を、

    
<form method="post" action="<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi" id="mail_form">

    と書き換えます。

    次に、「document.mail_form」では、form要素のname属性の値を得ることになり、id属性の値が得られないためスクリプトエラーになります。そのため、「document.name属性の値」ではなく、「document.forms['id属性の値']」としてやる必要があります。オリジナルのコードは、

    
<script type="text/javascript">
<!--
function mail_ajax(mode)
{
    $("send_status").style.display = 'block';
    document.mail_form.mail_preview.disabled = true;
    document.mail_form.mail_post.disabled = true;
    var params = Form.serialize("mail_form");
    if (mode == "post") {
        params += "&mail_post=1";
    }
    else if (mode == "preview") {
        params += "&mail_preview=1";
    }


        new Ajax.Request("<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi",
    
                     { method : "post",
    
                       parameters : params,
    
                       onComplete : displayMailResult,
    
                       onFailure : failureMailResult });
    
    return false;
    
}
    


    function displayMailResult(obj)
    
{
    
    document.mail_form.mail_preview.disabled = false;
    
    document.mail_form.mail_post.disabled = false;
    
    $("send_status").style.display = 'none';
    
    $("ajax_mail").innerHTML = obj.responseText;
    
}
    


    function failureMailResult(obj)
    
{
    
    alert('メールの処理が失敗しました。');
    
    document.mail_form.mail_preview.disabled = false;
    
    document.mail_form.mail_post.disabled = false;
    
    $("send_status").style.display = 'none';
    
}
    
//-->
    
</script>

    ですが、次のコードに書き換えます。

    
<script type="text/javascript">
<!--
function mail_ajax(mode)
{
    $("send_status").style.display = 'block';
    document.forms['mail_form'].mail_preview.disabled = true;
    document.forms['mail_form'].mail_post.disabled = true;
    var params = Form.serialize("mail_form");
    if (mode == "post") {
        params += "&mail_post=1";
    }
    else if (mode == "preview") {
        params += "&mail_preview=1";
    }


        new Ajax.Request("<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi",
    
                     { method : "post",
    
                       parameters : params,
    
                       onComplete : displayMailResult,
    
                       onFailure : failureMailResult });
    
    return false;
    
}
    


    function displayMailResult(obj)
    
{
    
    document.forms['mail_form'].mail_preview.disabled = false;
    
    document.forms['mail_form'].mail_post.disabled = false;
    
    $("send_status").style.display = 'none';
    
    $("ajax_mail").innerHTML = obj.responseText;
    
}
    


    function failureMailResult(obj)
    
{
    
    alert('メールの処理が失敗しました。');
    
    document.forms['mail_form'].mail_preview.disabled = false;
    
    document.forms['mail_form'].mail_post.disabled = false;
    
    $("send_status").style.display = 'none';
    
}
    
//-->
    
</script>

    とします。

    ]]>     サイトを、"Movable Type 4"でリニューアル tag:koyo-marlins.biz,2007:/blog//10.164 2007-10-12T15:05:36Z 2007-10-17T05:35:07Z サイトを、"Movable Type 4"でリニューアルしました。 管理のために... 鋪田博紀 サイトを、"Movable Type 4"でリニューアルしました。

    管理のために、カスタマイズした点をメモとしてこのブログに書き記します。

    ]]>