2007年3月アーカイブ

以前からずっと買い替えたかったタブレットを購入しました。iBookを購入して2週間で新しい機種が登場したという苦い思い出があるのですが、それにも懲りず今回も特に予備知識なく、どーんと買いました。特に理由なくApple Storeで購入したのですが、Amazonで購入した方が5000円ほど安いという事実に愕然としつつ、どーんと買いました。ヨドバシの方が安かったのではないかと後悔しつつも、調べるのも面倒なので、どーんと買ったのです。

いままではFAVOの方を利用していたので、広くなったタブレット領域に少しとまどいつつも、ブログのバナー画像をほそぼそと描いたのでした。文章を書くのも好きですが、絵をてきとうに誰に気兼ねすることなく、思いのままに描くのは本当に気持ちがいいです。考えなしに描いてしまったので、文章よりもバナー画像が無駄に大きい、そして右側に余白がたくさんあるというバランスの悪い状態ですが、気にしない、気にしない。

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を利用可能な状態に設定していきます。ターミナルを開いて下記を実行

1. mysqlのディレクトリに移動：cd /usr/local/mysql/
2. dataのディレクトリの権限をmysqlに変更：sudo chown -R mysql data
3. rootのパスワードを設定：/usr/local/mysql/bin/mysql/bin/mysqladmin -p -u root password xxxx
4. 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で必要最低限の設定だけします。

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

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

Ajaxライブラリリファレンスを参考に「フォントのサイズを段階的に変更する」というJavascriptを実験してみました。右のサイドバー（トップページのみ）の右上にひっそりとある「+ | - | reset」というリンクをクリックすると、記事のフォントサイズが大きくなったり小さくなったりします。「reset」をクリックすると、元のサイズ（12px）に戻ります。機能的にはあまり役に立ちませんが、課題演習だと思っていただければ。。

スクリプトは、prototype.jsとmoo.fxをインクルードして、利用できる関数を利用するだけで完成。Javascriptはよくわからないのであまり効率的な書き方にはなっていないと思いますが、なんとなく動いているようです（IE未確認）。ライブラリすごい。

Ajaxライブラリリファレンス（p183）では、fx.Text()という関数での利用例が記載されていたのですが、どうやらmoo.fx.jsが2.xにアップデートしたときに、関数の構成が変わったようです（おそらくより汎用的になった）。fx.Testの代わりにdivObj = new fx.Style("latest-posts","font-size",{duration:100});というような感じで利用すると、うまく動作します。

この関数では始めのサイズと終わりのサイズを指定することができるのですが、始めのサイズを固定値にすると連続的な動きにならないので、現在のサイズを取得してそれを参照するようにしてみました。現在のサイズを取得するのもprototype.jsのElement.getStyleを利用して取得しています。うーん、便利。

同じ要領で画像のサイズをページ内で拡大したり縮小したりもできそうですね。ふむふむ。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>moo/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>moo/moo.fx.pack.js"></script>
   
<script type="text/javascript"><!--
window.onload = function (){
divObj = new fx.Style("latest-posts","font-size",{duration:100});
}

function changeTextSize(num){
n = Element.getStyle("latest-posts", "font-size") ;
size = { current:"", changed:""};
size.current = parseInt(n.replace("px", ""));
size.changed = size.current + num;
divObj.custom(size.current, size.changed);
}

function changeTextSizeReset(){
n = Element.getStyle("latest-posts", "font-size") ;
size = { current:"", changed:""};
size.current = parseInt(n.replace("px", ""));
divObj.custom( size.current, 12);
}

// -->