メモログ: 検索結果

404ページを作成する

今さら感はありつつも気が向くままにMTのウェブページ機能を使って404ページを作成してみました。新規ウェブページ作成画面を開いて404.phpというページを作成。.htaccessに下記のように記述。

ErrorDocument 404 http://memolog.org/404.php

コンテンツ部分以外は他のページと同じものが使われるので、あとはコンテンツの文言を考えるだけで完了。私はこんな風な404ページにしてみました。404ページにだけスタイルを指定したい場合は、コンテンツ部分についている個別ページ用のid属性を使用しました。

#page-435 {margin:-40px 60px 30px;padding:20px 30px;border:10px solid #e6e6e6;}
#page-435 #page-title { font-size:20px; font-family:serif; color:#333; font-weight:normal;}
#page-435 form {margin:1em 0}
#page-435 .asset-content {font-size:12px;line-height:1.8;}
#page-435 .asset-content ul {margin-left:1.2em; list-style-type:circle;}

MT：記事の出力ファイル名がハイフンになる

メモ。例えば記事の出力ファイル名を「test_test」とアンダースコアを入れてに設定しているのに、実際に出力されるファイル名は「test-test」とハイフンになってしまう。

なんでかなあと思っていたら、テンプレートのアーカイブマッピングのパスが「basenameyyyy/mm/entry-basename.php（%-f）」となっていました。この場合、区切り文字がハイフンに統一される。バージョンアップしたときにここが変更されてしまったみたいです。パスを「%f」に変更して再構築を実行。

いい加減にバージョンアップするとこういう切ないことになりますが、これもバージョンアップの一つの楽しみということで。前向きに。

アーカイブマッピングで利用するアーカイブファイル名の定義

ようやくMT5にアップグレードしてみました。今回は動作環境がMySQL5.0以上になったので、先にレンタルサーバー（さくら）のMySQLを5に変更してから、バージョンアップしました。そこでちょっと（というかかなり）失敗したので、最終的にSQLでの移行はせずに、新規で作成したMTにエクスポートしたMTのデータをインポートしました。その結果、アクションストリームのデータはなくなりました。データ的にいつまでも残す必要もないですし、まあ心機一転ということでアクションストリームは終了。

MTのバージョンアップはMTのディレクトリをそのまま差し替え、何を入れたか忘れたプラグインもすべてなくしました。結果的にですが、記事のデータ以外は何も引き継いでいません。画像とかのデータはMTに直接アップロードしているものはプロフィール画像くらいなものなので特に気にせず。Thickbox対応していたところも放置的な。いい加減な人間に思えるかもしれませんが仕事はまじめにやってます。

デザインは「Pico」のテーマに変えてみました。バナー画像とかフォントの大きさとかだけアレンジ。そのうち何か、こう、すごいことするかもしれません。あとTypePad Connect を復活させてみました。

もうすでに1ヶ月経ってしまい、抱負も何もないんですが、今年はもっと更新するぞ。

追記：MySQLの移行は「MySQL 4.1 から 5.0に、文字化けせずにmysqldumpでデータを移行する」を参照すると失敗せずにすむかもしれません。私は手遅れですが。

ThickBox対応したFlickrのAction Streamを作成する

Action Streamで得たFlickrのActivityをThickBoxを利用して表示したいなと思いたち、そこで独自のAction Streamsプラグインを作成するのページと、既存のAction Stream pluginとGoogle検索などを見ながら、自分用のFlickr for thickbox pluginを作成してみました。

続きを読む: ThickBox対応したFlickrのAction Streamを作成する

Action Stream をなんとなく入れてみました

ちまたで噂のAction Streamをなんとなく入れてみました。右上の「Stream」というタブをクリックすると、最近の5日間のアクティビティが流れます。

テンプレートはサンプルのテンプレートをそのまま利用。自分のテンプレート対策として、mt:includeのHeaderとFooterをそれぞれ「ヘッダー」「フッター」に変更して、「Today」を「今日」に変更しているだけ。あと、アーカイブはとりあえず作成していないので、アーカイブへのリンクはmt:ignoreで隠しています（そのうち使うかもしれないので一応残してる）。

とはいえ、del.icio.usしかアクティビティがないのです（一応、Flickrやvoxもアクティビティのリストには追加しているけど、頻繁に更新していない）。Streamが寂しいからTwitterに登録するという、本末転倒ぶりを発揮しています。わたしのように活発に稼働していない人は、無用なものなのかもとか思いつつ、やはりこのサイト（メモログ）が自分のホームページって感じがしていて、そこに自分の情報を集約しておきたい、そんな欲望を満たしてくれるのです。

MT4.0 から MT 4.1 にアップグレード

MTを4.0から4.1にアップグレードしました。アップグレードはドキュメントを見ながら、手順通り行いました。アプリケーションディレクトリ全体の上書きはしないで、新しいバージョンのMTに、古いMTのmt-config.cgiとpluginディレクトリを上書き。

アップロードしたCGIのパーミッションを755にし忘れるという初歩的なところでつまづきましたが、無事完了（したと思う）。わーい。

MTPaginate: Movable Typeでページネーションをする

ふと、Movable Type でインデックスページをページネートしたいなと思い、実践してみました。MTPaginate というプラグインを使って、ページネーションを行います。MTPaginateは、個人は無償ですが、商用利用の場合は20ドルかかります。

MTPaginate のインストール

MTPaginateをダウンロードしてきて、pluginフォルダの中身をMTのpluginフォルダに、mt-static/pluginsフォルダの中身をMTのmt-static/pluginsフォルダにそれぞれアップロードします。

phpファイルの生成

phpでないと動作しないので、phpファイルのインデックステンプレートを生成します。「インデックスページ」の中身を丸ごとコピーして、新たに「インデックスページ（ページネート）」というテンプレートを作成しました。ファイル名は「index.php」。インデックスページをそのまま利用しても良かったのですが、この方が何か問題が起きたときに後戻りしやすそうだったので。

そして、さくらのレンタルサーバーはファイルのパーミッションが705か755でないとphpを利用できないので、mt-config.cgiにHTMLPerm 0755 と追記。

ページネーション部分のタグを記述

エントリーの生成部分を下記のように変更。max_sectionsで1ページあたりのエントリー数を指定して、ページネートするエントリーの件数はMTEntriesで100件に指定。

<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries lastn="100">
<MTPaginateSectionID><$MTEntryID></MTPaginateSectionID>
<$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>

<MTPaginateIfMultiplePages>
<div class="pagenate"><$MTPaginateNavigator style="links" separator=" " $></div>
</MTPaginateIfMultiplePages>

<MTPaginateIfLastPage_>
<div class="lastpage">より過去の記事は<a href="<$MTBlogURL$>archives.html">記事タイトル一覧</a>を参照ください。</div>
</MTPaginateIfLastPage_>

</MTPaginate>

CSSの追加

CSSはこんな感じのを追加しました（そのうち変更するかもしれません）。

/* pagenate */
.pagenate,.lastpage {font-size:11px; color:#666; margin:1em 0; border-top:1px dashed #ccc; padding-top:0.7em;}
.lastpage {border:none;margin-top:0; padding-top:0;}
.pagenate a {border:1px solid #ccc; text-decoration:none;padding:2px 1px; font-size:11px;}
.pagenate a:hover {color:#fff; background-color:#fc3; border-color:#fc3;}
.pagenate .pagenate-last {border:none; text-decoration:underline;}
.pagenate a.pagenate-last:hover{background-color:transparent; color:#666;}

index.html の撤収

FTPにてindex.htmlファイルを削除して、index.htmlが再構築されないように「インデックスページ」の「再構築オプション」のチェックをオフにして保存。index.htmlでアクセスがあった場合に、index.phpにリダイレクトするように.htaccessを指定（詳細は省略）。

以上です。作業内容はこれだけなのですが、ローカルで試したりしているうちにあっというまに時間がすぎていきました。ページングのもっと賢いやり方があれば、ぜひ教えてください。

TagSupplementals で同じタグを利用しているブログ記事を表示

TagSupplementals のpluginを入れて、関連するブログ記事を表示するようにしてみました。MTRelatedEntriesで同じタグを利用しているブログ記事を出力してくれます。下記のようなhtmlを追加しました（pluginのページのサンプルと変わりませんが・・）。

<div class="related-entries">
<h2 class="related-entries-header">関連するブログ記事</h2>
<ul>
<MTRelatedEntries lastn="10">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTRelatedEntries>
</ul>
</div>

CSSはこんな感じです。-moz-border-radius、-webkit-border-radiusは個人的に重宝しています（IEで同じ対応がないのが残念・・）。

.related-entries-header {font-weight:normal;margin-bottom:0.5em; font-size:12px; color:#666; 
padding-bottom:0;}
.related-entries {margin-bottom:25px;}
.related-entries ul {list-style-type:circle; font-size:11px; margin:0; padding:1em 2em; color:#666; 
background-color:#f0f0f0; -webkit-border-radius: 10px; -moz-border-radius:10px;}
.related-entries li {padding-bottom:0.1em;}

MT4のダッシュボードにMT3ライクなブログ一覧を表示

My Blogs | Movalog Plugins: Movable Type plugins by Arvind Satyanarayan

小ネタ。MT3以前からMT4を使い続けていると、以前のトップページの方が使いやすいかもと思うときもあります。個人で運営しているブログで、ブログのスタッツがあまり必要がないときはとくに（まさに私）。My BlogsのWidgetはMT4のDashboardにMT3ライクなブログ一覧を表示してくれるWidgetです。My BlogsのWidgetをインストールして、所定のフォルダに追加するだけで利用することができます（あとDashboard画面で追加したWidgetを追加するだけ）。詳細はInstalling My Blogs | My Blogs | Movalog Plugins: Movable Type plugins by Arvind Satyanarayanを参照。

日本語で表示されると、右上の「新しいブログ記事 ? 新しいウェブページ ? ファイルアップロード」のショートカットが長く表示されてしまうのですが、たぶんそんなに気にならないと思います（気になる人は気になるかも）。個人利用はフリーで、商用利用、エンタープライズでの利用にはライセンスの購入が必要。

MTIfタグを利用したタブ型ナビゲーション

Movable Type 4 から追加されたMTIfタグを利用して、現在いるページがアクティブな状態になるタブ型ナビゲーションを設置してみました。作業内容的にはMTで奇数行、偶数行ごとに背景色をつける方法と変わりません。今回は分岐の条件をテンプレートの種類（名前）にしています。

まずナビゲーションのHTMLがこちら。アクティブにしたいタブに「here」というclassを指定しています。MTUnless を併用するともう少しかしこいHTMLにできるかもしれません。

<div id="banner-image">
<div id="banner-image-inner">

<div id="topnavi">
<div id="topnavi-inner">
<ul>
<li class="rss"><a href="http://feeds.feedburner.jp/memolog">
<img width="9" height="9" alt="RSS" src="http://memolog.org/mt/mt-static/images/status_icons/feed.gif"/>
RSS</a></li>
<li class="archives<MTIf name="archive_index"> here</MTIf><
MTIf name="entry_template"> here</MTIf><MTIf name="datebased_archive"> here</MTIf>"><a href="
<$MTBlogURL$>/archives.html">archives</a></li>
<li class="profile"><a href="http://memolog.org/mt/mt-search.cgi?tag=profile&IncludeBlogs=5">profile</a></li>
<li class="home <MTIf name="main_index">here</MTIf>"><a href="<$MTBlogURL$>">home</a></li>
</ul>
</div>
</div>

</div>
</div>

CSSはこんな感じ。背景画像の上にタブを載せているので、表示がずれないようにピクセル単位でガチガチに指定しています（ulのマージンが入ることに気づかずに、しばらく悩んだ）。

/* top navigation */
#banner-image {height:160px; background:#fff url(http://memolog.org/site-design/0701/050101.gif) no-repeat; width:940px; margin:0 auto;}
#banner-image-inner {padding-top:125px;}

#topnavi {height:35px;}
#topnavi-inner {padding-bottom:10px; padding-right:20px; text-align:center;}
#topnavi ul {list-style-type:none; margin:0;}
#topnavi li {width:54px; height:25px; margin:0 2px; float:right;}
#topnavi li a {width:46px; height:17px; display:block; padding:4px; background-color:#e6e6e6; 
font-size:11px; font-familiy:Verdana,sans-serif; opacity: 0.8;-moz-opacity: 0.8;filter: alpha(opacity=80);}
#topnavi li a:link, #topnavi li a:visited {text-decoration:none;}
#topnavi li.here a{background-color:#fff; opacity: 1;-moz-opacity: 1;filter: alpha(opacity=100);}
#topnavi li a:hover {background-color:#A1D0FF; opacity: 1;-moz-opacity: 1;filter: alpha(opacity=100);}
#topnavi li.rss img {margin-right:4px;}

MTEntryImages を使って最近読んだ本の画像をリスト表示

Six Apart - Movable Type プラグインディレクトリ: EntryImages

MTEntryImagesを使って、最近読んだ本（と音楽CD）の画像をリスと表示してみました。MTEntryImageの良いところはAmazonから貼付けている画像でも取得して表示してくれるところです。作業はMTEntryImagesプラグインをインストールして、下記のようなウィジェットを作成しただけです。

メモログでは、本と音楽の記事にはそれぞれ「book」「music」というタグがついているので、その記事にある画像だけを表示させます。

<div class="widget-books module">
<h2 class="widget-header">最近の本と音楽</h2>
<div class="widget-content">
<ul><MTEntries tags="book OR music" lastn="9">
<MTEntryImages img_lastn="1" this_entry="1">
<li><a href="<MTEntryImageEntry><$MTEntryPermalink$></MTEntryImageEntry>"><
img src="<$MTEntryImageSrc$>" alt="<$MTEntryImageAlt$>"></a></li>
</MTEntryImages></MTEntries>
</div>
</div>

CSSは下記のような感じです。

.widget-books img, .all-books-musics img {width:65px;}
.widget-books ul, .all-books-musics ul {list-style-type:none;margin:0;padding:0;}
.widget-books li, .all-books-musics li {display:inline;}

上記と同じ要領で、過去の読んだ本・買ったCDの画像を表示するページを作成してみました。なかなかいい感じです。

MTで奇数行、偶数行ごとに背景色をつける方法

The blog of H.Fujimoto：Movable Type 4のブロックタグ内で使える変数

ブロックタグ内で使える変数を利用して、奇数行（odd）と偶数行（even）にわけてclassを指定することができます。偶数行と奇数行にわけて配色したいというときに非常に便利。これだけでデザインの幅がかなり広がる。右側の「最近のブログ記事」の一覧で実践してみました。作成したテンプレートは下記のようなかたち（不要な箇所は割愛しています）。

<MTEntries lastn="10">
<li class="widget-list-item <MTIf name="__odd__">odd</MTElse>even</MTIf>">
<a href="<$MTEntryPermalink$>" ><$MTEntryTitle$></a></li>
</MTEntries>

そして適用したCSSは下記のような感じ。

.widget-archives .widget-header {border:none; padding-bottom:0; margin-bottom:0;}
.widget-archives ul {border:1px solid #ddd;}
.widget-archives li {margin:0;padding:0; overflow:hidden;}
.widget-archives li {display:inline;}
.widget-archives li a {display:block; padding:5px;}
.widget-archives li.odd a {background-color:#f0f0f0;}
.widget-archives li.even a {background-color:#e6e6e6;}
.widget-archives li.even a:hover {background-color:#FFA6E9;}
.widget-archives li.odd a:hover {background-color:#FFBFEF;}

これで完了。MTEntriesの他に、MTCommentsでも利用可能。コメントの場合で、たとえばエントリーの投稿者のコメントには特別のCSSを入れたいという場合には、<MTIfCommenterIsEntryAuthor>author</MTIfCommenterIsEntryAuthor> というような形で、authorというclassを追加すると良いかもしれない。

Intel Mac に MT4 betaをインストールする

Intel MacにMovable Typeをインストールしてみましたの続編です。今度は話題沸騰中のMT4（Movable Type 4）のBETA版をmacにインストールしてみました。大事なウェブサイトだからbeta入れて問題があったら困るとかで、すぐに乗り換えることができなくても、自分のMacでならてきとうに楽しめる！

MT4 betaをダウンロード

MT4 betaのページにアクセスして、ページの右側にある「DOWNLOAD MT4 BETA」をクリック。ページの指示に従ってダウンロード

ダウンロードしたファイルを解凍して「Sites」フォルダの下に格納します。格納後、フォルダのパーミッションを777に変更します。Macの場合はフォルダを右クリックして「情報を見る」を開くと「所有権とアクセス権」という項目があるので、そこから詳細の情報の権限をすべて「読み／書き」に変更します。

MT4用のデータベースを作成

/usr/local/mysql bin/mysqladmin -p -u root create mtbeta4

前回のインストール時に必要なものはすでにインストールしているので、今回はMySQLにMT4用のデータベースを作成するだけです。

MT4にアクセス

MT4のフォルダにアクセスします（私の場合は、http://10.0.1.2/~username/MT4-beta1-20070605）。「Log in to Movable Type」というリンクをクリックすると、自動的にインストール用のウィザードが開きます。

まずRequirements checkが出ます。前回インストールしているため、特に不足moduleはなしでした。オプションで必要なモジュールについては、いくつかありましたがMacにうまくインストールできない（認識できなかった）ため、今回はスキップ

Databaseの設定を行います。Databaseの名前は先ほど作成した「mtbeta4」。Database serverの「localhost」はそのままで大丈夫。

データベースのチェックが終了すると、メールの設定画面に移動。Macの場合はsendmailを選んでおけば、とりあえず問題ないです。パスも変更しなくて大丈夫。test sendingの項目に自分のメールアドレスを追記しておくと、テストでメールを送ってくれます（入れなくても大丈夫）。

この作業が終わると、自動的にmt-config.cgiを作成してくれます。次にユーザーの作成。それが終わると、Databaseの初期化を自動的に行います。

「Login to Movable Type」のリンクをクリックするとmt.cgiにアクセスして、新しくなったCMS画面を見ることができます。

ブログ用のフォルダの作成

Sitesの下にブログ用のフォルダを作成します。名前はなんでも良いと思いますが、とりあえず「blogmt4beta」で作成しました。パーミッションもmtが作業できるように777に変更。Macの場合はフォルダを右クリックして「情報を見る」を開くと「所有権とアクセス権」という項目があるので、そこから詳細の情報の権限をすべて「読み／書き」に変更します。

ブログの公開設定を変更

「config」の「blog setting」の項目を選択して、設定のページに移動。そこから左メニューにある「publishing」のリンクをクリックして「publishing setting」のページに移動します。

デフォルトで記入されている内容を変更。

設定を変更して、ブログを再構築！右上のメニューから「目」の形をしたアイコンをクリックすると、ウェブページを確認できます。

これで完成！　ほとんど言われた通りに作業するだけなので簡単です。唯一つまづきそうなのは、パーミッションの変更を忘れてしまうとか、それぐらいではないでしょうか。

Intel MacにMovable Typeをインストールしてみました

Tiger UNIX的システム構築を参考に、自分のMacにMovable Typeをインストールしてみました。技術的素地の薄い私ですが、インストールできました。自分のMacにインストールしても無意味なのでは？と疑問に思う方もいると思いますが、テンプレートを書き換えたいなど、生成されたテンプレートをみながら行いたい作業などをするときにローカルにあるといろいろ便利です。また、自分のリスクだけで実験ができるので、気楽にいろいろ試すことができます。（インストールは個人の責任の範囲でお願いします）

とりあえずXcode2をインストール

Macの開発ツールであるXcode 2をとりあえずMac OS XのCDからインストール。プログラムを組み込む（コンパイル）するために必要なツールなど入っています。

Apatcheの起動と設定

システム環境設定の「共有」設定で、「パーソナルWeb共有」のチェックを入れる。これで完了。設定ウィンドウの右に表示されているアドレスが、ローカルのアドレスになります（たぶんhttp://10.0.1.2/username）。

設定は先に挙げた本を参考に、/etc/httpd.confのperlとphpに関する設定のコメントを外しましす。

MySQLのインストール

MySQLのサイトからMySQLをダウンロード。書籍ではバージョン4をダウンロードしていますが、ここは5でダウンロードしました（Mac OS package formatのmax版）。書籍は2005年7月に発行されているので若干情報が古いです。

ダウンロードしてきたパッケージをすべてインストール（readmeファイルをのぞきますが）。システム環境設定に「MySQL」を作成するか尋ねられたら「はい」を選択。

インストールが終わったら、システム環境設定に作成されている「MySQL」の項目から、MySQLを起動。起動完了！

MySQLの設定

/usr/local/mysql にインストールされたmysqlを利用可能な状態に設定していきます。ターミナルを開いて下記を実行

mysqlのディレクトリに移動：cd /usr/local/mysql/
dataのディレクトリの権限をmysqlに変更：sudo chown -R mysql data
rootのパスワードを設定：/usr/local/mysql/bin/mysql/bin/mysqladmin -p -u root password xxxx
MT用に「blog」という名前のデータベースを新規作成/usr/local/mysql/bin/mysqladmin -p -u root create blog

.bash_profileにPATHを追加

.bash_profileに「export PATH=/usr/local/bin:/usr/local/:$PATH」を追加。これで/usr/localにインストールしたプログラムを優先してみてくれます。echo $PATH を実行するとで実際に読み込むパスの順番がわかります。

perlモジュールのDBIとDBD::mysqlをインストール

必須のモジュールのインストールです。書籍では該当モジュールをダウンロードしてmakeする方法が紹介されていますが、ターミナルからsudo perl -MCPAN -e 'install DBI'して、インストールする方法をとりました。perl -MCPANでは依存関係にあるファイルを自動的にダウンロードしてくれるので、便利。いろいろと設定を聞かれますが、勇気を持って対応します。（このときwgetをあわせてインストールしました）

ただ、DBD::mysqlのモジュールの最新版（4.001）をmakeしたところ、正体不明のエラーが発生。。。試行錯誤の結果、3.0008だとインストールがうまくいくというところで、正体不明のまま決着。

Movable Typeをダウンロード

Movable Typeの個人無償版をダウンロードします。ダウンロードしたデータは、ユーザーフォルダの「Sites」に投入します。

mt-config.cgiの設定

ブラウザを開いて、http://10.0.1.2/username/mt/mt-check.cgiにアクセスして、最低限のモジュールがそろっているかを確認。そしてmt-config.cgiで必要最低限の設定だけします。

CGIPathをhttp://10.0.1.2/username/mtに変更
mysqlの設定らしき場所のコメントを外して、設定
- Database blog
- DBUser root
- BDPassword xxxxx

http://10.0.1.2/username/mt/にアクセス。表示されたページの「ログインページへ」をクリック。インストールが始まります。あとはインストールが終わるまで待って完成です！

タグ「mt」が付けられているもの

2010年2月 5日

2010年2月 1日

2010年1月31日

2009年3月29日

2008年2月 2日

2008年1月26日

2007年10月27日

MTPaginate のインストール

phpファイルの生成

ページネーション部分のタグを記述

CSSの追加

index.html の撤収

2007年10月 8日

2007年9月18日

2007年9月13日

2007年9月 8日

2007年8月 1日

2007年6月10日