MAYFAIR at IAMAS

動的なウェブサイトについて

リテラシーのウェブ入門で扱ったウェブサイト構築法は、HTMLとCSSをエディタなどを用いて作成するものでした。ウェブサイト構築用のツール（例：Dreamweaver）を利用することにより、こうした作業を効率良く行うことは可能です。しかし、こうした静的にウェブサイトを構築する方法では更新の度にウェブデザイン担当者が作業を行う必要が生じます。

これに対して、動的にウェブサイトを構築すると、コンテンツ作成の作業と視覚的なデザインの作業を独立して行うことができ、視覚的なデザインを変更することなくコンテンツだけを追加することや、その逆も可能になります。ウェブログやWikiはこうしたものの代表例です。

ブログを「個人が日記を書くツール」としてとらえる場合も多いようですが、2007年時点のインターネットにおいてブログやWikiが与えている影響力には計り知れないものがあり、きちんと把握しておく必要があります。

Movable Typeの概要

Movable TypeはSixapartが開発したウェブログのためのシステムです。IAMASではアカデミック・サイトライセンスを購入しているため、このライセンスの規約に従う範囲において、個別にライセンス料金等を支払うことなく利用できます。Movable Typeには以下のような特長があります。

• 日本語が正式にサポートされていて日本国内でも多数の動作実績がある
• ウェブや書籍でカスタマイズのための情報が豊富に入手できる
• CSSやテンプレートをカスタマイズすることによりブログ以外でも利用することができる
• スタンダードなシステムであるため、後から他のシステムに移行する場合にもツールなどが用意されていることが多い

Movable Typeのインストール

今回の実習では、現時点で最新版となる3.35日本語版を用います。ダウンロード済のアーカイブが共有サーバにありますので、それを利用してください。

インストール方法

基本的なインストール方法は「Movable Type 3.3マニュアル」にしたがって行います。ただし、IAMASの公式サーバの環境に合わせるため、以下の設定項目に注意してください。

• データベースはBerkley DBを使用します
• suexecが利用可能ですのでDBUmask、HTMLUmask、UploadUmask、DirUmaskを設定します（.cgiの属性は700に設定します）

ディレクトリ構成

今回の実習では、以下のようにディレクトリを構成します。

• アプリケーション・ディレクトリ
  • パス：/home/httpd/username/public_html/cgi-bin/mt
  • URL：http://www.iamas.ac.jp/~username/cgi-bin/mt/
• スタティック・ディレクトリ
  • パス：/home/httpd/username/public_html/mt-static
  • URL：http://www.iamas.ac.jp/~username/mt-static
• ブログ・ディレクトリ
  • パス：/home/httpd/username/public_html/blog
  • URL：http://www.iamas.ac.jp/~username/blog/
• データベース・ディレクトリ
  • パス：/home/httpd/username/db

環境設定ファイル

以下は環境設定ファイルmt-config.cgiの例です（usernameの部分は各自のアカウント名に置き換えてください）。

CGIPath    http://www.iamas.ac.jp/~username/cgi-bin/mt/
StaticWebPath    http://www.iamas.ac.jp/~username/mt-static
DataSource  /home/httpd/username/db

DBUmask 0022
HTMLUmask 0022
UploadUmask 0022
DirUmask 0022

インストール後の設定

FTPでの転送と.cgiに対する属性の設定が終わったら、「システム・チェックの実行」に従ってチェックを実行します。ここで何か問題が生じた場合には、mt-config.cgiの設定を再度確認します。

システム・チェックが正常に終了したら、「システム管理者の登録」に従ってシステム管理者の情報を登録します。

ログインができたら、「ブログの新規作成」に従ってブログを作成します。ブログ名は自由ですが、サイトURLとサイト・パスは次のように設定してください。

MovableTypeを実際に使ってみる

ブログの持つ機能を理解するため、次の作業を実際にやってみましょう。コメントやトラックバックは、お互いのブログに対して書き込んだり、飛ばしたりしてみましょう。

• 新規エントリーの作成と公開
• ファイルのアップロード
• コメント（他のブログに対して）
• トラックバック（他のブログに対して）

MovableTypeのカスタマイズ：CSS

カスタマイズの第1段階として、スタイルシートを変更してみましょう。MTのスタイルシートは、ウェブ入門で扱ったCSSです。スタイルシートの変更は環境設定→テンプレートから行うことができます。MovableTypeは、標準でそれなりに複雑なスタイルシートが用意されています。ここでは、変更を加えたことがわかりやすい部分をピックアップして、そこに加えた変更がきちんと反映されることを確認しましょう。

// idで指定されている部分の例
// idは1ページ内で1回しか使用できない
457: #container {
458:     width: 720px;
459:     margin-bottom: 20px;
460:     background: #fff;
461: }

// classで書かれている部分の例
// classは1ページ内で何回でも使用できる
529: .entry-header {
530:     margin-top: 0;
531:     border-left: 5px solid #dae0e6;
532:     padding: 0 0 0 10px;
533:     color: #666;
534:     font-size: 18px;
535: }

// ページ内の基本要素となるbanner、alpha、beta
469: #banner {
470:     width: 710px; /* necessary for ie win */
471:     background: #a3b8cc;
472: }

509: #alpha { margin: 15px 15px 0 15px; width: 480px; }
510: #beta { width: 200px; background: #e6ecf2; }

なお、CSSの構造を確認する場合、Firefox用のWeb Developerというプラグインが便利です。また、スタイルシートを元に戻したい場合は、環境設定→テンプレートでスタイルシートの左側のチェックボックスをチェックした状態で「テンプレートを初期化する」を実行します。

課題について

最終課題は「自分が所属する10数名くらいまでのグループのブログをつくる」です。条件は以下の通りです。

• グループのメンバーなら誰でも書き込めるという想定
• 一般公開するという想定
• 架空のグループはなし
• 図版（写真やイラストなど）を必ず挿入すること
• ブログのタイトルを決める
• グループの説明文を入れる

トラックバック時の403エラーに関して

CMS入門時間中にトラックバックを試したとき、403エラーでトラックバックできなかった人がいたと思います。これは、MTがトラックバックスパムを防ぐために設定している初期値が厳しく、同一のブログに短時間に集中してトラックバックが行われた場合、「スロットリング」という処理が行われてしまったことが原因です。これは、昨今のスパム事情を考慮したものですが、正規のトラックバックもはじかれてしまうことにつながります。これに対しては、次の項目を設定することで制限を緩めることができます。

# http://www.sixapart.jp/movabletype/manual/3.3/d_configuration_directives/#index-comment
ThrottleSeconds 20    # これ以下の間隔でトラックバックが来たら無視する

# http://www.sixapart.jp/movabletype/manual/3.3/d_configuration_directives/#index-trackback
OneHourMaxPings 30    # 1時間以内にこれ以上のトラックバックが来たら無視する
OneDayMaxPings 50    # 1日にこれ以上のトラックバックが来たら無視する

ツールなど

• FFFTP
• NoEditor
• Web Developer日本語版

参考書籍

• ウェブ進化論 本当の大変化はこれから始まる：梅田望夫（2006）
• 改訂新版 Movable Type標準ハンドブック：平田大治・関根元和（2006）