]]>
CMS入門第3日目の予定は以下の通りです。
CMS入門第2日目の予定は以下の通りです。
CSSのカスタマイズを試す際、変更したことが分かりやすい箇所をピックアップしました。
386行目から（本文のフォント指定）
body {
font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif;
font-size: 12px;
}
・font-familyを変えてみる
・font-sizeを変えてみる
451行目から（本文のフォント指定）
body {
min-width: 720px;
color: #333;
background: #36414d;
}
・colorを変えてみる
・backgroundを変えてみる（周辺の色が変わる）
469行目から（バナーのサイズと色）
#banner {
width: 710px; /* necessary for ie win */
background: #a3b8cc;
}
・backgroundを別の色に変更してみる（バナーの背景色が変わる）
・バナーの背景に画像を設定する
background-image: url(http://www.***/***/banner.gif);
background-repeat: no-repeat;
background-position: left top;
489行目から（バナーのヘッダ部分のフォントなど）
#banner-header {
margin: 0;
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 1;
text-shadow: #36414d 0 2px 3px;
}
・font-sizeを変えてみる
・font-family指定を追加してみる
例：font-family: "ＭＳ Ｐゴシック", "Osaka";
529行目から（エントリーのヘッダ部分のフォントなど）
.entry-header {
margin-top: 0;
border-left: 5px solid #dae0e6;
padding: 0 0 0 10px;
color: #666;
font-size: 18px;
}
・border-leftの幅を変えてみる
・border-leftの色を変えてみる
・font-sizeを変えてみる
・font-family指定を追加してみる
MTでは、エントリーとして作成したファイルを、テンプレートに従って再構築し、最終的なHTMLを生成します。テンプレートには、通常のHTMLのタグに加えて、MT専用のタグが記述されています。
テンプレートは、メインページやアーカイブページなど、ページの種類ごとに用意されています。スタイルシートが全体共通で1枚なのに対して、テンプレートは多くの種類があるという点には注意が必要です。
テンプレートで使用されているタグは、SixApartのマニュアルにも説明があります。
MTはブログ用としてかなりメジャーなツールであるため、ウェブや書籍での解説もかなり充実しています。ただし、バージョン3.1→3.2→3.3と、マイナーバージョンアップにもかかわらず、比較的大きな変更が繰り返されましたので、最新の3,3に対応した解説になっているかどうかに関しては注意してください。
エントリの本体はMTEntriesから/MTEntriesまでの間に書かれたものが表示されます。
メインページに常時表示したいテキストがある場合には、次のように間に書くことで表示されます（この例ではclassをentry-body、表示位置をセンタリングにしています）。
デフォルトのスタイルシートからカスタマイズしていくのはCSSの勉強にもなりますが、ゼロからスタイルシートを書くのは大変です。そうした場合、StyleCatcherというプラグインを使用して、自分の目的に近いデザインを選択した後、カスタマイズしていくのと比較的楽にカスタマイズすることができます。
まず、cgi-bin/mt/plugins/StyleCatcherにあるstylecatcher.cgiの属性をデフォルトの644から700に変更します。また、mt-static/themesの属性を777に変更します。
次に、「メイン・メニュー > システム・メニュー > プラグイン」StyleCatcherプラグインの「設定を表示」をクリックし、以下の設定を参考にURLとパスを設定します。
設定が終わったら、Movable Type - Style Libraryからベースにするスタイルを選択します。スタイルが選択できたら「Show Details」をクリックし、表示された項目の中から「Zip File」のリンクをクリックしてダウンロードします。ダウンロードが終わったら解凍し、mt-static/themesにフォルダごとアップロードします。
アップロードが終わったら、StyleCatcherを選んで「デザインを適用」し、「サイトを再構築」します。
CMS入門で制作しているブログは、特にアクセス制限などをかけることなく運用されています。これは、Googleなどの検索エンジンを含めて、外部から誰でも見られる状態になっていることを意味します。このため、次のような点には十分注意して制作を進めてください。
こうした点には十分注意することが必要です。しかし、自分でよく考えた上で自分なりの情報発信をしていくことは、様々な意味で重要です。もしどうしても判断に迷うような点があれば、担当教員などに相談してください。
特に明記しなくとも、皆さんがブログに書いた文章は公開した時点で著作権が発生します。著作権は、みなさんの創作物の権利を保護するための重要なものです。しかし、過度に著作権が保護されることにより、新たな創作が著しく制限されてしまう危険性もあります。こうした問題について、クリエイティブコモンズという新しいライセンスの考え方があり、MTではオプションの設定次第でこのライセンスの元で公開していることを簡単に表示できるようになっています。ブログは気軽に始められる表現活動の1つですが、こうした著作権の問題についても関心を持ち続けていくことが重要です。
MTのテンプレート（スタイルシートも含む）を本格的に編集する場合、ウェブブラウザ上のフォーム内で編集するだけでは保存を行う度にどこを編集していたのかが分からなくなってしまい、不便です。これを解消するための方法として、フォーム内テキストを一度テキストエディタにコピー＆ペーストし、テキストエディタ上で編集を加えてからフォーム内にコピー＆ペーストする、という方法があります。この方法では、毎回コピー＆ペーストが必要になりますが、編集していた箇所を見失うことがありませんので便利です。
これ以外の方法としては、「このテンプレートにリンクするファイル」という設定項目を利用する当方法があります。次の図は設定例です。ここでは、public_htmlの下にtemplatesというフォルダを作り、その中に保存するよう設定しています（フォルダのみ用意すれば、ファイルは「保存と再構築」ボタンをクリックすると生成されます）。このようにリンクを設定すると、外部エディタでファイルを編集し、FTPでこの位置にアップロードし、サイトを再構築することで自動的に反映されるようになります。一見、コピー＆ペーストするのと大きな違いがないように思えるかもしれませんが、高機能なFTPクライアントではローカルのファイルを編集するかのようにサーバ上のファイルを編集する機能がありますので、この仕組みを利用すると便利です。
リテラシーのウェブ入門で扱ったウェブサイト構築法は、HTMLとCSSをエディタなどを用いて作成するものでした。ウェブサイト構築用のツール（例：Dreamweaver）を利用することにより、こうした作業を効率良く行うことは可能です。しかし、こうした静的にウェブサイトを構築する方法では更新の度にウェブデザイン担当者が作業を行う必要が生じます。
これに対して、動的にウェブサイトを構築すると、コンテンツ作成の作業と視覚的なデザインの作業を独立して行うことができ、視覚的なデザインを変更することなくコンテンツだけを追加することや、その逆も可能になります。ウェブログやWikiはこうしたものの代表例です。
ブログを「個人が日記を書くツール」としてとらえる場合も多いようですが、2007年時点のインターネットにおいてブログやWikiが与えている影響力には計り知れないものがあり、きちんと把握しておく必要があります。
Movable TypeはSixapartが開発したウェブログのためのシステムです。IAMASではアカデミック・サイトライセンスを購入しているため、このライセンスの規約に従う範囲において、個別にライセンス料金等を支払うことなく利用できます。Movable Typeには以下のような特長があります。
今回の実習では、現時点で最新版となる3.35日本語版を用います。ダウンロード済のアーカイブが共有サーバにありますので、それを利用してください。
基本的なインストール方法は「Movable Type 3.3マニュアル」にしたがって行います。ただし、IAMASの公式サーバの環境に合わせるため、以下の設定項目に注意してください。
今回の実習では、以下のようにディレクトリを構成します。
以下は環境設定ファイル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とサイト・パスは次のように設定してください。
| サイトURL | http://www.iamas.ac.jp/~username/blog/ |
| サイト・パス | /home/httpd/username/public_html/blog |
ブログの持つ機能を理解するため、次の作業を実際にやってみましょう。コメントやトラックバックは、お互いのブログに対して書き込んだり、飛ばしたりしてみましょう。
カスタマイズの第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数名くらいまでのグループのブログをつくる」です。条件は以下の通りです。
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日にこれ以上のトラックバックが来たら無視する
