そこで、PowerPC G5（OS10.4.x）の起動ディスクを外付けハードディスクにインストールし、iBookで起動することにした。

FireWire（またの名をIEEE 1394、さらにまたの名をi.Link）

Mac OSを外付けハードディスクにインストールするには、Firewireで接続しなければいけない。というわけで、店員さんに起動ディスクとして使いたい旨を伝えて、LaCieの「Little Disk」を購入した。さっそく、10.4.xがインストールされている別のマシーンに接続し、インストールディスクを挿入→ディスクを起動させ、再起動。
ところが、インストール先に外付けハードディスクが表示されるが、インストール先に選択できない。

もしかしたら、Firewire400だから！？800なら問題ないのでは！？

Firewire800

できないもんはできないので、LaCieのFirewire800対応の「Rugged Hard Disk」に交換してもらい、もう一度試すと今度はばっちりインストールできた。

これで、iBookでSafari1.xと2.xを、PowerPCでSafari3.xを動作確認できる環境が整いました！

インデックステンプレート、すべてのアーカイブテンプレートで利用できます。

検索窓

<form method="get" action="<mt:cgipath><mt:searchscript>">
<input type="text" name="search" value="" />
<input type="hidden" name="IncludeBlogs" value="対象ブログID" />
<input type="submit" value="検索">
</form>

複数のブログを検索対象した場合、検索結果は最初に対象としたブログのシステムテンプレート「検索結果」に表示されます。

タグクラウド

<a href="<mt:cgipath><mt:searchscript>?tag=キーワード">キーワード</a>

検索結果ページ作成

検索窓やタグクラウドを利用の検索結果ページは共通で、システムテンプレートの検索結果を利用します。

検索結果の最初の場合や検索結果の最後の場合（*1）

<MTBlogResultHeader>
<MTIfStraightSearch> キーワード検索の場合 </MTIfStraightSearch>
<MTIfTagSearch> タグ検索の場合 </MTIfTagSearch>
</MTBlogResultHeader>

<mt:searchstring>

検索文字列を表示

<mt:searchresultcount>

検索結果数

<mt:entryeditlink>

記事の編集画面へのリンクを表示する（MTにログインしている場合にのみ表示される）。

<mt:categorylabel setvar="カテゴリ名">
<MTIf name="カテゴリ名" eq="カテゴリ1">
<MTEntries lastn="10" category="カテゴリ1">
<MTEntriesHeader><ul></MTEntriesHeader>
<li><mt:entrytitle></li>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>
</MTIf>
<MTIf name="カテゴリ名" eq="カテゴリ2">
<MTEntries lastn="10" category="カテゴリ2">
<MTEntriesHeader><ul></MTEntriesHeader>
<li><mt:entrytitle></li>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>
</MTIf>

これで問題ないのですが、たとえば最新10件を5件に変更する場合を考えてみてください。
lastn="10"をlastn="5"に修正するだけです。
ひとつのブログで管理している場合は問題ないのですが、複数のブログをマルチブログ管理している場合、ブログの数だけ同様の作業が発生します。これは非効率と言わざるを得ません。
そこで別の方法を考えます。

カテゴリアーカイブとMTInclude、共通モジュールをうまく活用する

まず、下記のようなカテゴリーアーカイブをブログごとに作成します。

<MTEntries lastn="10">
<MTEntriesHeader><ul></MTEntriesHeader>
<li><mt:entrytitle></li>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>

アーカイブマッピングは「category/sub-category/lastn.html」とカスタマイズします。

このアーカイブは、カテゴリごとにそのカテゴリ内の最新エントリ10件を書き出したファイルを出力します。

続いて、エントリーアーカイブ

<mt:categorybasename setvar="カテゴリファイル名">
<MTIf name="カテゴリファイル名" eq="sample1">
<MTInclude file="sample1/lastn.html">
</MTIf>
<MTIf name="カテゴリファイル名" eq="sample2">
<MTInclude file="sample2/lastn.html">
</MTIf>

最後に、先ほど作成したカテゴリーアーカイブを共通モジュール化します。ここでは、グローバルテンプレートを利用して、モジュール名を「カテゴリ別一覧」とします。

モジュール

<MTEntries lastn="10">
<MTEntriesHeader><ul></MTEntriesHeader>
<li><mt:entrytitle></li>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>

カテゴリーアーカイブ（各ブログ）

<MTInclude module="カテゴリ別一覧">

こうすることで、最新件数を変更する場合は、ひとつのモジュールを変更するだけで全ブログに反映させることができます。つまり、 lastnに限らず、MTEntries内のモディファイア（属性）を修正する可能性がどれだけ考えられるかを考えて使い分けるのがよいかと思います。

特定カテゴリのエントリ一覧

<MTEntries lastn="10" category="カテゴリ名">
<MTEntriesHeader><ul></MTEntriesHeader>
<li><mt:entrytitle></li>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>

エントリーアーカイブに、このように記述することで、特定カテゴリの最新10件エントリを表示することができます。

カテゴリごとのエントリ一覧

次に、「特定カテゴリ」を「カテゴリごと」に置き換えるために、カテゴリごとに表示を切り替えるようにします。

<mt:categorylabel setvar="カテゴリ名">
<MTIf name="カテゴリ名" eq="カテゴリ1">
<MTEntries lastn="10" category="カテゴリ1">
<MTEntriesHeader><ul></MTEntriesHeader>
<li><mt:entrytitle></li>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>
</MTIf>
<MTIf name="カテゴリ名" eq="カテゴリ2">
<MTEntries lastn="10" category="カテゴリ2">
<MTEntriesHeader><ul></MTEntriesHeader>
<li><mt:entrytitle></li>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>
</MTIf>

「カテゴリ名」という変数を定義し、その値にブログを書くときに選択したカテゴリ名を設定します。
カテゴリ名が「カテゴリ1」のときは「カテゴリ1」内の最新10件を・・・、「カテゴリ2」のときは「カテゴリ2」内の最新10件を・・・、と分岐処理をすることで、カテゴリごとに表示を切り替えることが可能となります。

最適化

共通処理をする箇所に関しては、モジュール化しておきます。ここでは、「カテゴリ別一覧」というモジュールを作っておきます。

<MTEntries lastn="10" category="カテゴリ2">
<MTEntriesHeader><ul></MTEntriesHeader>
<li><mt:entrytitle></li>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>

最終エントリーアーカイブは下記のようになります。

<mt:categorylabel setvar="カテゴリ名">
<MTIf name="カテゴリ名" eq="カテゴリ1">
<MTEntries lastn="10" category="カテゴリ1">
<MTInclude module="カテゴリ別一覧">
</MTEntries>
</MTIf>
<MTIf name="カテゴリ名" eq="カテゴリ2">
<MTEntries lastn="10" category="カテゴリ2">
<MTInclude module="カテゴリ別一覧">
</MTEntries>
</MTIf>

1. 形式の選択項目から「GIF」を選択
2. 「すべての色を割り付け」を選択
3. 「インデックス透明」を選択
4. 背景色と馴染ませる必要がある場合、背景色を選択する。

「すべての色を割り付け」にすべきところを、いつも「アダプティブ」を選択していたため、うまいように透明GIFをコントロールすることができなかったのだ。なるほど〜。

sample.xml

<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet href="sample.xsl" type="text/xsl"?>
<CD>
<title>to tell the truth</title>
<song>all in the mind</song>
<type>エモ・哀愁</type>
</CD>

sample.xsl

<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<xsl:apply-templates />
</xsl:template>

<xsl:template match="CD">
<html>
<body>
<xsl:apply-templates />
</body>
</html>
</xsl:template>

<xsl:template match="title">
<h1><xsl:value-of select="." /></h1>
</xsl:template>

<xsl:template match="song">
<p><xsl:value-of select="." /></p>
</xsl:template>

<xsl:template match="type">
<p><xsl:value-of select="." /></p>
</xsl:template>

</xsl:stylesheet>

出力結果

<html>
<body>
<h1>to tell the truth</h1>
<p>all in the mind</p>
<p>エモ・哀愁</p>
</body>
</html>

記述方法

<プリフィックス:要素名 xmlns:プリフックス="URI">

• プリフィックスは任意の名称
• URIは、名前空間を識別するためのURLを記述するのだが、ファイルの有無は動作に影響しない

サンプル

名前空間を使用しない場合

<?xml version="1.0" encoding="Shift_JIS"?>
<CD>
<タイトル>to tell the truth</タイトル>
<詩>all in the mind</詩>
<ジャンル>エモ・哀愁</ジャンル>
</CD>

名前空間を使用した場合

<?xml version="1.0" encoding="Shift_JIS"?>
<mycd:CD xmlns:mycd="http://www.allinthemind.biz/xml/mycd" >
<mycd:タイトル>to tell the truth</mycd:タイトル>
<mycd:詩>all in the mind</mycd:詩>
<mycd:ジャンル>エモ・哀愁</mycd:ジャンル>
</mycd:CD>

1. プリフィックス「mycd」を追加
2. 属性「xmns:mycd」を追加

複合する名前空間

<?xml version="1.0" encoding="Shift_JIS"?>
<mycd:CD xmlns:mycd="http://www.allinthemind.biz/xml/mycd" >
<mycd:タイトル>to tell the truth</mycd:タイトル>
<mycd:詩>all in the mind</mycd:詩>
<mycd:ジャンル>エモ・哀愁</mycd:ジャンル>
<mydvd:dvd xmlns:mycd="http://www.allinthemind.biz/xml/mydvd" >
<mydvd:タイトル>to tell the truth</mydvd:タイトル>
<mydvd:詩>all in the mind</mydvd:詩>
<mydvd:ジャンル>エモ・哀愁</mydvd:ジャンル>
</mydvd:dvd>
</mycd:CD>

この例のように、同要素名を区別したいときに、名前空間を使用することで対応できる。

デフォルト名前空間

<?xml version="1.0" encoding="Shift_JIS"?>
<CD xmlns="http://www.allinthemind.biz/xml/mycd" >
<タイトル>to tell the truth</タイトル>
<詩>all in the mind</詩>
<ジャンル>エモ・哀愁</ジャンル>
<mydvd:dvd xmlns:mycd="http://www.allinthemind.biz/xml/mydvd" >
<mydvd:タイトル>to tell the truth</mydvd:タイトル>
<mydvd:詩>all in the mind</mydvd:詩>
<mydvd:ジャンル>エモ・哀愁</mydvd:ジャンル>
</mydvd:dvd>
</CD>

この例では、プリフィックス「mydvd」がない要素はすべて、「http://www.allinthemind.biz/xml/mycd」に属する。

• 結構、JavascriptやCSSではまって、そこから脱出したときに、経験値が増えてく。CSSなら数行で説明できるからいいのだけど、問題はJavascript。結果にいたる経緯を紹介できればと思うが、このサイトで紹介するにはボリュームありすぎかも。
• prototype.js、JQuery.jsとか、今やかなり素敵なライブラリがあふれている。appleの公式サイトでも使用されている。これからは、どれだけナイスなjsを書くかより、どれだけライブラリをカスタマイズができるか、が重要なポイントになってくる。でも、そもそもカスタマイズしようにもJavascriptの知識が乏しいため、どのようにすればいいのか分からない。
• Javascript, Flex, Air, Silverlight。気になる要素満載。

新サイト、テーマは「研究所」

というわけで、新しい技術を身につけたら、どうやってその技術を身につけたのか、そのtipsをまとめたサイトでも作ろうかな、と。
んでもって、自分のライブラリを作ろうかなと。
んでもって、クリエイティブコモンズにして社会貢献。

ふむふむ。よし、さくっと作ってみよう！

WP

ウェブページ

B

ブログ記事

BL

ブログ記事リスト

D

日別

W

週別

M

月別

Y

年別

U

ユーザー別

C

カテゴリー別

アーカイブテンプレートの自動変数とarchive_calssの値の「_」と「-」の違いに注意。

これらの変数の値を条件判断することで、テンプレートごとに異なる内容を表示することができます。
たとえば、出力するアーカイブの種類が「ブログ記事リスト - カテゴリ - 月別」の場合、テンプレートに何も記述されていなくても、以下の変数が宣言されています。

同じアーカイブテンプレートや、複数のアーカイブテンプレートで同じ種類のマッピングを作成する場合、優先するアーカイブマッピングを選択します。

• インデックステンプレート
• アーカイブテンプレート
• テンプレートモジュール
• システムテンプレート
• ウィジェット

また、グローバルテンプレートは3種類に分類されます。

• テンプレートモジュール
• メールテンプレート
• ウィジェット

インデックステンプレート

ひとつのテンプレートに対して、ひとつのファイルを出力（さまざまなファイル形式での出力が可能）。

アーカイブテンプレート

ひとつのテンプレートに対して、出力できるファイル数はブログ記事やカテゴリの件数に依存・さまざまな種類のファイルを出力・各々のテンプレートがなにかしらのコンテキストになる。

• ウェブページ
• ブログ記事
• ブログ記事リスト

ウェブページ

ひとつのテンプレートに対して、公開中のウェブページの件数だけファイルを出力。ウェブページをコンテキストとする。

ブログ記事

テンプレートはひとつだが、公開中の記事の件数だけファイルを出力。ブログ記事をコンテキストとする。

ブログ記事リスト

公開中のブログ記事をさまざまな条件でインデックスし、アーカイブとするテンプレート。選択したアーカイブにより、コンテキストは変わる。

テンプレートモジュール

共通利用可能な内容を、複数のテンプレートで使い回ししたいときは、テンプレートモジュールを利用する。

システムテンプレート

特定の画面のデザインを設定するためのテンプレート。システムテンプレートはCGIを利用し、閲覧時のみページを生成して表示する。

• コメントプレビュー（ブログ記事個々をコンテキストとする）
• コメント完了（ブログ記事個々をコンテキストとする）
• ダイナミックパブリッシングエラー
• ポップアップ画像
• 検索結果

ウィジェット

テンプレートモジュール群を部品として管理。自由に追加・削除できます。

グローバルテンプレート

MTで管理しているすべてのブログで共通利用したいテンプレートモジュールなどをグローバルテンプレートでモジュール化（ウィジェット化）しておくと便利。

「システムメニュー」→「グローバルテンプレート」

たとえば、グローバルテンプレートで「ヘッダー」モジュールを作成しておけば、ブログ単位で「ヘッダー」モジュールを作成する必要がない。
また、あるブログでヘッダーの中身を変更したい場合、グローバルテンプレートで作成したモジュールと同じ名前「ヘッダー」モジュールをそのブログ内で作成することで、優先して読み込まれる。

優先度：ブログのテンプレート > グローバルテンプレート

なるほど、グローバルテンプレートは大変便利。でも、命名規則を明確にしておかないと、ブログが増えるたびに混乱してしまう原因になりそうだがら注意したい。

まずは、Movable Type「MT-4_1-ja」フォルダを「mt4」にリネイムし（ネーミングは任意です）、[（ドライブアイコン）] → [アプリケーション] → [MAMP] → [cgi-bin] 内にフォルダごと設置します。
続いて、MAMPを起動しMovable Typeの設定を行います。設定方法は2種類あります。

設定方法 その1

1. ブラウザで「http://localhost:8888/cgi-bin/mt4/mt-wizard.cgi」を開く
2. Static web pathに「/mt-static/」を入力、「開始」をクリックし、次の画面で「次へ」をクリック
   
3. データベースのパスに「/Applications/MAMP/db/movabletype」を入力、「接続テスト」をクリックし、次の画面で「次へ」をクリック
   
4. メール送信プログラムから「Sendmail」を選択、テスト送信するメールアドレスを入力し、「次へ」をクリック
   
5. 以上でMovable Typeの設定は終了です。
   
   いよいよここからMovable Typeが始まります。「次へ」をクリック

設定方法 その2

1. [（ドライブアイコン）] → [アプリケーション] → [MAMP] → [cgi-bin] → [mt4] → 「mt-config.cgi-original」ファイルをテキストエディタで開きます。
2. CGIPathを「http://localhost:8888/cgi-bin/mt4/」に変更
3. StaticWebPathを「/mt-static/」に変更
4. MYSQLとPOSTGRESQLにある各項目の先頭に「#」を追記し、コメントアウト
5. SQLITEのDatabaseを「/Applications/MAMP/db/movabletype」に変更
   
6. ファイルを別名「mt-config.cgi」で保存（拡張子をcgiに変更）
7. ここからいよいよMovable Typeの始まりです。ブラウザで「http://localhost:8888/cgi-bin/mt4/mt.cgi」を開きます。

Movable Typeのアカウント設定

アカウント設定し終えたら、Movable TypeをMacのローカル環境で作業できるようになります。

MovableTypeをMac環境で

1. 作業に必要な環境を整える
2. データベースが使えるようにする
3. Movable Typeの設定を行う

CSS3の概念と実践的なテクニックが紹介されました。Safari3やFirefox3、Opera9.xなどのモダンブラウザでは、すでに実装できるプロパティも多数あるということで。今後の実験的なサイトで実装していきたいなと思った次第。

新セレクタ

::selection

::selection{
background-color:#ff0000;
}

二つ「:」をつなげる。選択時の振る舞いを指定。

:target

p:target{
background-color:#ff0000;
}

疑似クラス。う〜ん、ちょっとちゃんと使ってみないとイマイチ使いどころがつかめない。

:first-child, :last-child, :nth-child(n)

p:first-child{
font-weight:bold;
}
p:last-child{
font-size:200%;
}
p:nth-child(3){
font-size:150%;
}

疑似クラス。一番はじめのp要素内を太字に、最後のpタグの文字サイズを200%に、3番目のpタグの文字サイズを150%にする。これってJavascriptでやってたことだけど、CSSだけでできちゃうなんて！！！

:nth-child(odd), nth-child(even)

さらに偶数と奇数の振り分けもできるから、class属性なんかを追加する必要がないから素敵！！

:enabled, :disabled, :checked

さらにフォームタグなどで活用できる疑似クラス。

@font-face

@font-face{
font-family:"matrix";
src:url(http://www.〜/xxx.ttf) format("truetype");
}
h1{
font-family:matrix, sans-selif;
}

これって誰かがフォントを持っていて、それを参照できるってこと！？だとしたらすごい！！

新プロパティ

column-count, column-width, column-gap, column-rule

p{
column-count:3;
column-width:10em; %は使えないので注意
column-gap:2em; カラムの間隔
column-rule:1px solid #000; カラム間の振る舞い
}

border-radius, border-top-left-radius・・・

p{border-radius:1em;}

もう角丸のための画像もスクリプトも要らない。CSSで出来ちゃいます。ポイントは「em」指定すること。「px」指定すると画像を拡大したときに画像が崩れてしまう。

ほかにも、text-shadow（テキストに影付き）、text-stroke（テキストにふち）、box-shadow（要素に影付き（borderみたいなもんかな））、box-refkect（反射）、opacity（透明度。0から1の値を設置。配下へopacityは引き継ぐ）などなど。
background:rgba(xxx,xxx,xxx,xx);（テキスト、ボーダーには無理）。scale(0.5);（拡大縮小）。

回転

これは、すごい！え？CSSだけ！？って感じ。

transform

p{
transform:roteate(90deg); 90度回転
orign:0 0; 始点
margin-left:1em;
}

Silverlightで写真や動画やWebサービス(Flickrとか)を遊んでみる

春日井 良隆（マイクロソフト）

何度か、いろいろなセミナーでSilverlight2の説明を聞いている。そして、その容易（と思われる）な操作に魅力を感じる。ただ、どこまで普及されるのか、AdobeのAirとかFlexとかとはどう位置づけされるのか・・・。年内はまだ、xslとかmtとか勉強しようと思ってて、その先にあるもの、動的かつインタラクティブかつデスクトップアプリケーションってのに興味津々。今後の動きにもキャッチアップしていきたい。

BARIMIのカヤック徹底解剖 脳髄から湧き出るアイデア主導のクリエーション

Barimi（面白法人カヤック / BM11）

ものすごい変わった会社。こんな会社いいなぁってのがほんとにある。でもそれだけのことができるには、それ相当の辛いこともあるんだと思う。ただその辛さも前向きに捉えられるんだから素敵だ。ふと中学生の部活時代を思い出した。今にして思えば想像を絶する練習量も当時はそれがこなすべき課題であり、普通のことだった。
「好きこそものの上手なれ」こんな言葉が似合う会社なんだろうなぁ。

住 太陽×TAKAGISMトークバトル クリエーターから作家というキャリアパス

住 太陽×高木 敏光（TAKAGISM）

正直、あまり期待はしていなかった。業界通とはほど遠いので、各人がどれだけすごい人なのか、まるで知っていなかったから。実際、武勇伝を聞いているようで、憧れ感はあったが、そこから得るものはどれだけあったか・・・。とか思いつつ、どっぷり話に聞き入って。思わず高木さんの本まで買ってしまった。
自分は今が勝負どこなんだと思う。

シャッフルTV@スーパーデラックス

川井 拓也（ヒマナイヌ）

紹介する製品がどれも魅力的で、「欲しい！」って思えるものだった。早く商品化されることを願うばかり。特に両面写真。欲しいなぁ。「せっかくの機会だから名刺交換とかして、人脈を作ろう」というのが、CSS Niteの裏趣旨として感じている。今回、このセッションでそれを感じ。それをありがたいと思いつつも、極度の人見知りの自分はいつも参加できないでいた。が、今回はがんばった。左右の方と顔見知りになることができた。
少しずつ自分を表現できるようにもなっていかなきゃなと思う次第。

住 太陽×切込隊長トークバトル 「Web衰退時代をどう楽しむか」

住 太陽×山本一郎（切込隊長）

切込隊長こと山本一郎、とか言いつつ、誰だか全く知らなかったが、話を聞いていて、あ〜すごい人なんだなぁ、と。不満に思うことをそのまま口にする「バカヤロー」と「クソ」と。この打たれ弱い御時世、しかも大手クライアントをバカ呼ばわりする山本氏、なるほど切込隊長だ。聞いててすっきりする。あ〜そんなこと言えたらなぁ、って思った。自分はいつも相手の立場になって、その背景に染まってしまうから。自分の意見をはっきりするようにせにゃいかんなぁと痛感。