<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Di notebook</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/" />
    <link rel="self" type="application/atom+xml" href="http://www.d-improvement.jp/notebook/atom.xml" />
    <id>tag:www.d-improvement.jp,2009-10-01:/notebook//4</id>
    <updated>2010-03-10T00:25:40Z</updated>
    <subtitle>主にマークアップ関係のコーディング備忘録。HTML, CSS, Movable Type, jQuery, etc...</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/" version="4.25">Movable Type</generator>

<entry>
    <title>jQueryで角丸</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/javascript/jquery-corner.html" />
    <id>tag:www.d-improvement.jp,2010:/notebook//4.123</id>

    <published>2010-03-09T15:48:32Z</published>
    <updated>2010-03-10T00:25:40Z</updated>

    <summary> JQuery Corner でボックスの角っこを丸くする。 サンプル ...</summary>
    <author>
        <name>masa</name>
        
    </author>
    
        <category term="javascript" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        <![CDATA[<a href="http://malsup.com/jquery/corner/"> JQuery Corner </a>でボックスの角っこを丸くする。

<a href="http://www.d-improvement.jp/notebook/sample/jquery-corner.html">サンプル</a>]]>
        <![CDATA[## 手順

head要素の中で jQuery と jQuery Corner を読み込む。

    <script type="text/javascript" src="http://www.d-improvement.jp/notebook/sample/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://www.d-improvement.jp/notebook/sample/jquery.corner.js"></script>

角丸にしたい対象（HTML要素、id属性、class属性）に、角丸の大きさを指定する。head要素の中で指定する場合は、以下のように。

    <script type="text/javascript"> 
      $(document).ready(function(){
        $("#type1").corner("5px");
      });
    </script>
    ...
    <body>
    ...
    <div id="type1"> ... </div>
    <!-- ↑このブロック要素が角丸になる -->

## 注意したいこと
- classで指定した方が効率的な場合があるが、読み込みが重くなる恐れがあるので、なるべくidで指定する。
- 参照: <a href="http://d.hatena.ne.jp/nitoyon/20081211/jquery_fast_css">jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ</a>]]>
    </content>
</entry>

<entry>
    <title>MTユーザー情報のメールアドレスを公開する場合のスパム対策</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/movable-type/mt-user-mail.html" />
    <id>tag:www.d-improvement.jp,2010:/notebook//4.122</id>

    <published>2010-03-08T04:54:07Z</published>
    <updated>2010-03-08T04:57:07Z</updated>

    <summary><![CDATA[&lt;$MTEntryAuthorEmail spam_protect="1"...]]></summary>
    <author>
        <name>yu</name>
        
    </author>
    
        <category term="Movable Type" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        <![CDATA[    <$MTEntryAuthorEmail spam_protect="1"$>]]>
        
    </content>
</entry>

<entry>
    <title>Espresso + Zen-coding のメモ</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/espresso/espresso-zen-coding.html" />
    <id>tag:www.d-improvement.jp,2010:/notebook//4.121</id>

    <published>2010-03-04T07:56:13Z</published>
    <updated>2010-03-04T08:25:23Z</updated>

    <summary>Espresso (Version 1.1.1) でのZen-coding (V...</summary>
    <author>
        <name>masa</name>
        
    </author>
    
        <category term="espresso" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        <![CDATA[<a href="http://macrabbit.com/espresso/">Espresso</a> (Version 1.1.1) での<a href="http://code.google.com/p/zen-coding/">Zen-coding</a> (Version 0.6) メモ。]]>
        <![CDATA[##  Zen-coding のインストール

- <a href="http://code.google.com/p/zen-coding/downloads/list">Downloads - 
 zen-coding - Project Hosting on Google Code</a> から Zen Coding for Espresso v0.6 をダウンロード
- 解凍すると現れる TEA for Espresso.sugar をダブルクリックして Espresso にインストール

## Zen-coding の機能その1 : **Expand Abbreviation**

- （Zen-coding の記法で書かれた）略記を展開する
- ショートカット: **F1** 
- Zen-coding の記法を覚える必要がある。難易度は、HTML/CSSを書ける人ならすぐに理解できるレベル。非常にわかりやすい。

### Zen-coding の記法

- <a href="http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn">Zen HTML Elements</a>
- <a href="http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn">Zen HTML Selectors</a>

### 例

div （divと入力して[F1]キーを押すと、下記のように変換される。）

    <div></div>

img （src属性値を代入後、tabキーで、alt属性値の入力位置へカーソルが移動する。）

    <img src="" alt="" />

a

    <a href=""></a>

a[title]

    <a href="" title=""></a>

div#index

    <div id="index"></div>

div.section

    <div class="section"></div>

div.section.clearfix

    <div class="section clearfix"></div>

ul>li

    <ul>
    	<li></li>
    </ul>

ul>li*3

    <ul>
    	<li></li>
    	<li></li>
    	<li></li>
    </ul>

ul>li*3>a

    <ul>
    	<li><a href=""></a></li>
    	<li><a href=""></a></li>
    	<li><a href=""></a></li>
    </ul>

ul.nav>li*3>a

    <ul class="nav">
    	<li><a href=""></a></li>
    	<li><a href=""></a></li>
    	<li><a href=""></a></li>
    </ul>

ul>li#nav-$*3>a

    <ul>
    	<li id="nav-1"><a href=""></a></li>
    	<li id="nav-2"><a href=""></a></li>
    	<li id="nav-3"><a href=""></a></li>
    </ul>

div.section>h2.section-header+div.section-content

    <div class="section">
    	<h2 class="section-header"></h2>
    	<div class="section-content"></div>
    </div>

div.section>h2.section-header+div.section-content>ul>li*3>a

    <div class="section">
    	<h2 class="section-header"></h2>
    	<div class="section-content">
    		<ul>
    			<li><a href=""></a></li>
    			<li><a href=""></a></li>
    			<li><a href=""></a></li>
    		</ul>
    	</div>
    </div>

（つづく）]]>
    </content>
</entry>

<entry>
    <title>jQueryを使って、日時に合わせて背景画像を自動的に変更する</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/javascript/jquery-css-image.html" />
    <id>tag:www.d-improvement.jp,2010:/notebook//4.120</id>

    <published>2010-02-18T14:55:39Z</published>
    <updated>2010-02-19T00:22:55Z</updated>

    <summary>日時（月、時間など）に合わせて、背景画像を自動的に変更したいとき。 月に合わせて...</summary>
    <author>
        <name>masa</name>
        
    </author>
    
        <category term="javascript" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        日時（月、時間など）に合わせて、背景画像を自動的に変更したいとき。

月に合わせて、背景画像を（正月、節分、ひな祭り、......）のように替えたい場合、まず1〜12月の画像を連番で用意する。

1月はimage0.png、2月はimage1.png

のように0を初期値として連番で画像に名前をつける。表示するためのjavascriptは以下の通り。

    var theDate = new Date();
    var thisMonthImage = &quot;url(image&quot; + theDate.getMonth() + &quot;.png)&quot;;
    $(&quot;#content&quot;).css(&quot;background&quot;, thisMonthImage);

- head要素でjQueryを読み込んでおく
- id=&quot;content&quot;の属性を付けたHTML要素の背景画像が設定される
- getMonth()で得られる値は0から11で、0が1月、1が2月、...、11が12月となる
        
    </content>
</entry>

<entry>
    <title>ブログ記事編集中の自動保存を無効にする</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/movable-type/auto-save-frequency.html" />
    <id>tag:www.d-improvement.jp,2010:/notebook//4.117</id>

    <published>2010-01-06T01:13:59Z</published>
    <updated>2010-01-06T01:18:58Z</updated>

    <summary>mt-config.cgi に以下を追記する AutoSaveFrequency...</summary>
    <author>
        <name>masa</name>
        
    </author>
    
        <category term="Movable Type" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        mt-config.cgi に以下を追記する

    AutoSaveFrequency 0

※ieでは自動保存のタイミングでカーソルが勝手に移動してしまうらしい。なので標準で設定しておいた方がいい。※MT5では未確認。
        
    </content>
</entry>

<entry>
    <title>更新通知</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/movable-type/ping.html" />
    <id>tag:www.d-improvement.jp,2009:/notebook//4.111</id>

    <published>2009-12-10T01:56:13Z</published>
    <updated>2009-12-20T06:30:56Z</updated>

    <summary>設定 ＞ ウェブサービス の「更新通知」に以下を追加する http://api....</summary>
    <author>
        <name>masa</name>
        
    </author>
    
        <category term="Movable Type" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="ping" label="ping" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        設定 ＞ ウェブサービス の「更新通知」に以下を追加する

    http://api.my.yahoo.co.jp/RPC2
    http://rpc.reader.livedoor.com/ping

- 開発時には通知しないよう注意する
- technorati.com のチェックを外す（エラーが返るので 2009.12.20追記）
        
    </content>
</entry>

<entry>
    <title>UI画像のファイル名規則</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/guideline/ui-image-file-name.html" />
    <id>tag:www.d-improvement.jp,2009:/notebook//4.110</id>

    <published>2009-12-10T01:12:25Z</published>
    <updated>2009-12-10T01:43:53Z</updated>

    <summary>原則 ディレクトリ名に合わせる 英語を用いる コンテンツ画像と収容するフォルダを...</summary>
    <author>
        <name>masa</name>
        
    </author>
    
        <category term="guideline" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="ui" label="ui" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        ### 原則

- ディレクトリ名に合わせる
- 英語を用いる
- コンテンツ画像と収容するフォルダを分別できない場合（カラーミーショッププロなど）は、ui- を頭に付与する　例）ui-icon-blog.png
        ## サイトid（ロゴ）

    logo.png

## 見出し

    h-blog.png

## ナビゲーション

    nav-blog.png //グローバルナビゲーション
    footer_nav-blog.png //フッターナビゲーション
    local_nav-blog.png //ローカルナビゲーション

## アイコン

    icon-blog.png
    icon_s-blog.png //サイズ違いがある場合は、xxs, xs, s, l, xl, xxlを付与する

## バナー

    banner-blog.png
    banner_s-blog.png //サイズ違いがある場合は、xxs, xs, s, l, xl, xxlを付与する
    </content>
</entry>

<entry>
    <title>カスタムフィールドで入力したものを表示するタグ</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/movable-type/customfield-tag.html" />
    <id>tag:www.d-improvement.jp,2009:/notebook//4.103</id>

    <published>2009-11-05T01:58:28Z</published>
    <updated>2009-12-17T02:06:12Z</updated>

    <summary><![CDATA[テキストの場合 &lt;mt:If tag="■"&gt; &lt;mt:■&g...]]></summary>
    <author>
        <name>yu</name>
        
    </author>
    
        <category term="Movable Type" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        <![CDATA[テキストの場合

    <mt:If tag="■">
    <mt:■>
    </mt:If>


画像の場合

    <mt:If tag="■">
    <mt:■Asset><img src="<$mt:AssetURL$>" alt="" /></mt:■Asset>
    </mt:If>


■はフィールドテンプレートタグ]]>
        
    </content>
</entry>

<entry>
    <title>301リダイレクト（恒久的なリダイレクト）</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/htaccess/redirect-301.html" />
    <id>tag:www.d-improvement.jp,2009:/notebook//4.101</id>

    <published>2009-10-19T02:37:16Z</published>
    <updated>2009-10-19T02:50:03Z</updated>

    <summary>筆者が個人ブログに書いてあったMT関連の記事を、本notebook内に引っ越した...</summary>
    <author>
        <name>masa</name>
        
    </author>
    
        <category term=".htaccess" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        <![CDATA[筆者が個人ブログに書いてあったMT関連の記事を、本notebook内に引っ越した。それらの記事は、はてなブックマークで人気エントリーとなっていた（<a href="http://b.hatena.ne.jp/entry/www.mathatelle.com/archives/2004/09/mtdream_weaver.html">はてなブックマーク - Movable Type のテンプレートを Dreamweaver で編集する</a>）ので、本notebook内の記事へリダイレクトしてみる。]]>
        .htaccessに以下を記述し、旧ウェブサイトに配置する。

    Redirect 301 /archives/2004/09/mtdream_weaver.html http://www.d-improvement.jp/notebook/movable-type/movable-type-dreamweaver.html
    </content>
</entry>

<entry>
    <title>MTの追加プラグイン</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/movable-type/add-plugin.html" />
    <id>tag:www.d-improvement.jp,2009:/notebook//4.97</id>

    <published>2009-10-14T00:26:58Z</published>
    <updated>2010-02-20T05:38:17Z</updated>

    <summary>◎全案件 RenameLabelプラグイン  フィールド名を変更  &amp;raquo...</summary>
    <author>
        <name>yu</name>
        
    </author>
    
        <category term="Movable Type" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        <![CDATA[◎全案件

- RenameLabelプラグイン  
フィールド名を変更  
&raquo; <a href="http://labs.m-logic.jp/cat2/renamelabel/">http://labs.m-logic.jp/cat2/renamelabel/</a>
- UploadDirプラグイン  
アップロードするアイテムのディレクトリをあらかじめ決めておける  
&raquo; <a href="http://labs.m-logic.jp/cat2/uploaddir/">http://labs.m-logic.jp/cat2/uploaddir/</a>
- TemplateLinedFileManager  
MTテンプレートの「ファイルへのリンク」のパスを一括で設定する  
&raquo; <a href="http://www.ark-web.jp/blog/archives/2009/07/movable_type-template_lined_file_manager.html">http://www.ark-web.jp/blog/archives/2009/07/movable_type-template_lined_file_manager.html</a>

◎要件による

- PageButeプラグイン  
1ページに表示する記事の数を決めて、ページ送りをつける  
&raquo; <a href="http://www.skyarc.co.jp/engineerblog/entry/2642.html">http://www.skyarc.co.jp/engineerblog/entry/2642.html</a>
- A-Form  
メールフォームを作成  
&raquo; <a href="http://www.ark-web.jp/movabletype/">http://www.ark-web.jp/movabletype/</a>]]>
        
    </content>
</entry>

<entry>
    <title>body要素のid属性とclass属性の表記について</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/movable-type/body-id-class.html" />
    <id>tag:www.d-improvement.jp,2009:/notebook//4.96</id>

    <published>2009-10-07T07:07:04Z</published>
    <updated>2009-12-16T04:50:48Z</updated>

    <summary> id属性には1サイト共通で、[サイト名]を記載する。 class属性にはブログ...</summary>
    <author>
        <name>yu</name>
        
    </author>
    
        <category term="Movable Type" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        <![CDATA[<ul>
<li>id属性には1サイト共通で、<strong>[サイト名]</strong>を記載する。</li>
<li>class属性にはブログごとに共通で、<strong>id[id番号]-[ディレクトリ名]</strong> を記載する。<br />※別途、テンプレートごとに記載する（下表）</li>
</ul>
<table>
<tr>
<th colspan="2">MTテンプレートの種類</th>
<th>出力するもの</th>
<th>MTタグ</th>
</tr>
<tr>
<th colspan="2" rowspan="2">メインページ</th>
<td>main-index<br /></td>
<td></td>
</tr>
<tr>
<td>id[id番号]-[ディレクトリ名]-top（ホームの場合はhome）</td>
<td>id&lt;$MTBlogID$&gt;-[ディレクトリ名]-top</td>
</tr>
<tr>
<th colspan="2">インデックステンプレート</th>
<td>[ディレクトリ名]</td>
<td></td>
</tr>
<tr>
<th colspan="2" rowspan="2">ウェブページ</th>
<td>page</td>
<td></td>
</tr>
<tr>
<td>[フォルダ名]</td>
<td>&lt;$MTFolderBasename$&gt;</td>
</tr>
<tr>
<th rowspan="7">記事</th>
<th rowspan="4">リスト</th>
<td>entry</td>
<td></td>
<tr>
<td>entry-list</td>
<td><br /></td>
</tr>
<tr>
<td>entry-list-[リストの種類]</td>
<td></td>
</tr>
<tr>
<td>[カテゴリ名（※種類がカテゴリの場合）]</td>
<td>&lt;$MTCategolyBasename$&gt;</td>
</tr>
<tr>
<th rowspan="3">個別</th>
<td>entry</td>
<td></td>
</tr>
<tr>
<td>entry-detail</td>
<td></td>
</tr>
<tr>
<td>[カテゴリ名（複数ある場合は併記）]</td>
<td>&lt;MTEntryCategories glue=&quot; &quot;&gt;&lt;$MTCategoryLabel$&gt;&lt;/MTEntryCategories&gt;</td>
</tr>
</table>]]>
        
    </content>
</entry>

<entry>
    <title>Mac OSX に Movable Type 4 をインストール</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/movable-type/mac-osx-movable-type-4.html" />
    <id>tag:www.d-improvement.jp,2007:/notebook//4.100</id>

    <published>2007-07-28T05:16:21Z</published>
    <updated>2009-10-19T01:40:22Z</updated>

    <summary>Mac OS10.4.10(Intel) のローカルにテスト環境をつくり、 Mo...</summary>
    <author>
        <name>masa</name>
        
    </author>
    
        <category term="Movable Type" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        <![CDATA[<p>Mac OS10.4.10(Intel) のローカルにテスト環境をつくり、 Movable Type 4 をインストールしました（DBはSQLiteを選びました）。その覚え書きです。</p>
<p>2007.9.20追記：Movable Type 4 のbetaリリースの段階ではインストールウィザードが英語表記でした。現在は日本語化されています。</p>]]>
        <![CDATA[<h2>◎インストールしたもの </h2>
<ol>
<li>Xcode Tools</li>
<li>MAMP</li>
<li>DBI </li>
<li>DBD::SQLite</li>
<li>Movable Type 4 (version 4.0-beta7)</li>
</ol>
<h2>◎手順</h2>
<h3>Xcode Toolsのインストール</h3>
<p>Mac OS X Install Disc 1の中に「Xcode Tools」というフォルダがあります。その中の「xcodeTools.mpkg」を起動してインストールします。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922830194/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1126/922830194_9e0d229e7a.jpg" width="479" height="500" alt="mt4__xcodetools1.png" /></a></p>
<p><a href="http://www.flickr.com/photos/mathatelle/922830520/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1332/922830520_174115bebd.jpg" width="500" height="331" alt="mt4__xcodetools2.png" /></a></p>
<p>開発者の方なら、初期のセットアップ時にインストール済みだと思います。</p>
<h3>MAMPのインストール</h3>
<p><a href="http://www.mamp.info/en/download.html">MAMP & MAMP PRO Downloads</a></p>
<p>以前インストールしたバージョンから新しいものがリリースされていたので、バージョンアップしました。ダウンロードするとMAMP PROも同胞されていますが、MAMPの方で問題なく動作できました。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922829794/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1049/922829794_0ff59afa5b.jpg" width="500" height="337" alt="mt4__mamp.png" /></a> </p>
<p>左下のMAMPフォルダを上のApplicationsフォルダのエイリアスにドラッグすれば、インストール完了です。</p>
<p>※MAMPと似たようなパッケージに<a href="http://www.apachefriends.org/en/xampp-macosx.html">XAMPP</a>がありますが、MAMPの使い勝手が好きなのでコッチを利用しています。</p>
<h3>Movable Type 4 をダウンロード</h3>
<p><a href="http://www.movabletype.com/mt4/">MT4 Beta  Download Movable Type Beta</a></p>
<p>最新のMT4ベータ版をダウンロードします。※正式リリース後は上記ページ内容が変更になるかもしれません。</p>
<h3> Movable Type 4 ファイルの配置</h3>
<p>ダウンロードしたMTの圧縮ファイルを解凍すると「MT-4.0-バージョン名」というフォルダになります。フォルダ名を適当にリネームして（筆者の場合mt4）、以下のようにファイルを配置します。</p>
<ul>
<li>/Application/MAMP/cgi-bin/mt4/</li>
<li>/Application/MAMP/htdocs/mt-static/</li>
</ul>
<p>「mt-static」はmt4の中にあるので、それをまるまる移動します。</p>
<h3>MAMPを起動</h3>
<p>/Application/MAMP/MAMPをダブルクリックして起動します。</p>
<h3>Movable Type 4 のインストール（ウィザードを利用）</h3>
<p><a href="http://localhost:8888/cgi-bin/mt4/mt-wizard.cgi">http://localhost:8888/cgi-bin/mt4/mt-wizard.cgi</a></p>
<p>にアクセスし、インストールウィザードを起動します。MT3では、mt-config.cgiであらかじめ設定する必要がありましたが、その手間が省けました。システムの扱いが苦手な私にはうれしい新機能です（従来通り、mt-config.cgiをテキストエディタで編集してもOKです）。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922830918/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1197/922830918_f2bcf8bf54_o.png" width="500" height="700" alt="mt4_install1.png" /></a></p>
<p>ベータ版ということで、英語での説明になりますが、正式リリースの際には日本語にも対応されるでしょう。</p>
<p>「Static web path」の欄には、先ほど配置したmt-staticフォルダへのURLパスを記述します。この場合、</p>
<p>http://localhost:8888/mt-static/</p>
<p>になります。「Begin」のボタンを押して次に進みます。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922831368/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1217/922831368_d93ec29e12_o.png" width="500" height="650" alt="mt4_install2.png" /></a></p>
<p>うぅ。データベースにデータを蓄積するためにDBIが必要ですよと、要求されました。DBIをインストールすることにします。</p>
<p>※すでにPerlモジュールがインストールされている場合は、<a href="#mt4install">[ここから本番] Movable Type 4 のインストール</a> の説明へジャンプします。</p>
<h3>DBIのインストール</h3>
<p><a href="http://search.cpan.org/dist/DBI/">http://search.cpan.org/dist/DBI/</a></p>
<p>DBI-1.58をダウンロードしてきました。解凍し、そのままデスクトップにおいておきます。</p>
<p>インストールはターミナルから行います。慣れない人にはちょとハードルが高そうですが、手順通りにやれば簡単です。おおまかな流れは</p>
<ol>
<li>DBI-1.58フォルダ内に移動</li>
<li>コマンドを実行し、インストール</li>
</ol>
<p>となります。</p>
<p>まず、ターミナルを起動します。&quot;cd &quot;（←cdのあとに半角スペースをお忘れなく）と入力した後に、先ほど解凍した「DBI-1.58」フォルダをターミナルのウィンドウにドラッグします。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922831680/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1413/922831680_b4bbdcbba8_o.png" width="499" height="300" alt="mt4_install3.png" /></a></p>
<p>cd /Users/mathatelle/Desktop/DBI-1.58のように表示されるのを確認して（cdのあとに半角スペースがあります）</p>
<p><a href="http://www.flickr.com/photos/mathatelle/921984759/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1386/921984759_6bb062cc83_o.png" width="499" height="300" alt="mt4_install4.png" /></a></p>
<p>リターンキーを押します。</p>
<p>mathatelle:~/Desktop/DBI-1.58 mathatelle$ </p>
<p>のように表示されたらOKです。</p>
<p>cdは&quot;チェンジ・ディレクトリ&quot;の略で、デスクトップの「DBI-1.58」内に移動し、ターミナルからコマンドが実行できるようになります。</p>
<p>続いて、以下のコマンドを入力・実行します。</p>
<ol>
<li><strong>perl Makefile.PL</strong> と入力、リターンキーを押す。コマンドの実行完了までしばし待つ。<br />
</li>
<li><strong>make; make test</strong> と入力、リターンキーを押す。コマンドの実行完了までしばし待つ。<br />
</li>
<li><strong>sudo make install</strong> と入力、リターンキーを押す。コマンドの実行完了までしばし待つ。</li>
</ol>
<p>※途中パスワードを要求されるので、ログインする際のパスワードを入力します。</p>
<p>これでインストールが完了したので、ブラウザに戻り、</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922831368/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1217/922831368_d93ec29e12_o.png" width="500" height="650" alt="mt4_install2.png" /></a></p>
<p>「Retry」ボタンを押します。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/921985203/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1383/921985203_1ec4de1389_o.png" width="500" height="740" alt="mt4_install5.png" /></a></p>
<p>今度は、データベースモジュールがないよーとおこられました。SQLiteを使うので、DBD::SQLiteをインストールします。</p>
<h3>DBD::SQLiteのインストール</h3>
<p><a href="http://search.cpan.org/dist/DBD-SQLite/">http://search.cpan.org/dist/DBD-SQLite/</a></p>
<p>DBD-SQLite-1.13をダウンロードしてきました。インストール手順は、DBIと同じなので割愛します。インストール完了後、「Retry」を押すと、</p>
<p><a href="http://www.flickr.com/photos/mathatelle/921985559/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1078/921985559_6177f80ad9_o.png" width="500" height="420" alt="mt4_install6.png" /></a></p>
<p>全ての必要なPerlモジュールが見つかり、MTのインストールを進める準備が整ったということで、「Continue」ボタンを押して続けます。</p>
<h3 id="mt4install">[ここから本番] Movable Type 4 のインストール（ウィザードを利用）</h3>
<p>実質、先の段階はインストールのための確認でした。ここからが本番のインストールです。</p>
<p>データベースの構成を決めます。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922833258/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1439/922833258_969353e078_o.png" width="500" height="600" alt="mt4_install7.png" /></a></p>
<p>Databease TypeはSQLite Databaseを選び、Database Pathは <del>./db/mt.db</del> <ins>/Applications/MAMP/db/sqlite/mt.db</ins>とします。<ins>この場所にdbをつくることで、MAMPのSQLite ManagerからDBの操作ができるようになります。</ins></p>
<p><del>/Application/MAMP/cgi-bin/mt4/ の中にdbという名前でフォルダを作成し、</del></p>
<p>「Test Connection」ボタンを押します。次はメール関係の設定です。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922834432/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1300/922834432_e5651a2275_o.png" width="500" height="460" alt="mt4_install9.png" /></a></p>
<p><a href="http://www.flickr.com/photos/mathatelle/922834850/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1299/922834850_25ec472b0a_o.png" width="500" height="580" alt="mt4_install10.png" /></a></p>
<p>Sendmail経由でテストメールを送信してみます。「Test email from Movable Type Configuration Wizard」という件名のメールが届けばOKです。「Continue」ボタンで続けます。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922835200/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1439/922835200_ff32cc2bfb_o.png" width="500" height="420" alt="mt4_install11.png" /></a></p>
<p>これで、mt-config.cgiファイルが生成されます。「Continue」ボタンで続けます。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/921988555/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1427/921988555_b8c57b5651_o.png" width="500" height="390" alt="mt4_install12.png" /></a></p>
<p>アドミンのアカウントを発行します。Languageは「Japanese」を選択です。お忘れなく。:-)</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922836466/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1030/922836466_4a3e041fa1_o.png" width="500" height="750" alt="mt4_install13.png" /></a></p>
<p>最初のブログをつくります。これでインストール完了です！</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922836900/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1165/922836900_c8b2c8573b_o.png" width="500" height="680" alt="mt4_install14.png" /></a></p>
<p>データベースが初期化され...</p>
<p><a href="http://www.flickr.com/photos/mathatelle/922837344/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1315/922837344_ea5991f497_o.png" width="500" height="760" alt="mt4_install15.png" /></a></p>
<p>MTにログインすると...</p>
<p><a href="http://www.flickr.com/photos/mathatelle/921990735/" title="Photo Sharing"><img src="http://farm2.static.flickr.com/1420/921990735_691852d27c.jpg" width="466" height="500" alt="mt4_install16.png" /></a></p>
<p>新しい管理画面にご対面です。</p>]]>
    </content>
</entry>

<entry>
    <title>Movable Type のテンプレートを Dreamweaver で編集する</title>
    <link rel="alternate" type="text/html" href="http://www.d-improvement.jp/notebook/movable-type/movable-type-dreamweaver.html" />
    <id>tag:www.d-improvement.jp,2004:/notebook//4.99</id>

    <published>2004-09-29T06:56:26Z</published>
    <updated>2009-10-19T01:37:57Z</updated>

    <summary>※この記事はMovable Type 3を対象に書いた記事です。Movable ...</summary>
    <author>
        <name>masa</name>
        
    </author>
    
        <category term="Movable Type" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.d-improvement.jp/notebook/">
        <![CDATA[<p>※この記事はMovable Type 3を対象に書いた記事です。Movable Type 4 では設定方法が若干異なります。ご了承ください。</p>
<p>Movable Type（ムーバブルタイプ） を簡易的なCMS（コンテンツ管理システム）として利用する場合、テンプレートのカスタマイズを行うことになります。テンプレートはブラウザ内の管理画面から書き換えが出来ますが、ここで編集作業を行うことは効率的ではありません。Movable Type ではテンプレートを外部のファイルにリンクすることができるので、Dreamweaverや秀丸など使い慣れたエディタでシームレスに編集作業を行うことができます。ここでは、<a href="http://www.adobe.com/jp/products/dreamweaver/">Dreamweaver（ドリームウィーバー）</a>を利用した効率的なMTのテンプレート編集を紹介します。</p>]]>
        <![CDATA[<h2> 1. テンプレートが入るディレクトリを作成する</h2>
<p>任意の場所にテンプレートを入れるディレクトリを作成します。パーミッションは707とします。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/378902209/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/130/378902209_93c39c19a8.jpg" width="500" height="310" alt="mtdw1.png" /></a></p>
<p>私は<strong>themes/mathatelle1</strong>のようにして、mathatelle1の中にテンプレートファイルを入れています。こうしておくことで、themesの中にmathatelle1_20070203などとしてバックアップを管理できます。</p>
<h2>2. このテンプレートにリンクするファイルを設定する</h2>
<p>管理画面のメニューから「テンプレート」を開きます。まずは、インデックス・テンプレートの「メインページ」について設定をしてやりましょう。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/378902248/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/140/378902248_2f837fe94d.jpg" width="500" height="289" alt="mtdw2.png" /></a></p>
<p>「このテンプレートにリンクするファイル」に、リンクするファイルへのパスを指定します（MTのヘルプドキュメントでは絶対パスを推奨しています）。ファイル名はメインページなら"index.html"または"main.html"が良いでしょう。記入して保存ボタンを押せば、リモートサイトにテンプレートファイルが生成されます。</p>
<p>※パスがわからない人は、メニューから「環境」を開き、右上の「基本モードに切り替え」をクリックし、「サイトパス」を確認してください。</p>
<p><a href="http://www.flickr.com/photos/mathatelle/378902293/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/174/378902293_388e6243ba.jpg" width="500" height="289" alt="mtdw2_1.png" /></a></p>
<p><a href="http://www.flickr.com/photos/mathatelle/378902344/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/123/378902344_1e511d02fa.jpg" width="500" height="421" alt="mtdw2_2.png" /></a></p>
<p>他のテンプレートについても同様に設定します。</p>
<p>スタイルシートのテンプレートについては、日常的にFTPが使える環境であれば、外部CSSを参照し、そのCSSファイルをDreamweaverで編集すると良いでしょう。私の場合、styles-site.cssはテンプレートの内容を </p>

<pre><code>@import  "/themes/mathatelle1/css/style.css";</code></pre>

<p>として、style.cssをDreamweaverで編集、FTPでPUTしています。</p>
<p>また、スタイルシートのテンプレートについては、「自動的に再構築する」のチェックをはずしておきましょう。サイトの更新ごとに再構築する必要がないからです。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/378902378/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/153/378902378_f93c623f96.jpg" width="500" height="276" alt="mtdw2_3.png" /></a></p>

<h2> 3. 生成されたテンプレートをローカルにGETする</h2>
<p> <a href="http://www.flickr.com/photos/mathatelle/378902393/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/179/378902393_087f2abfeb.jpg" width="500" height="310" alt="mtdw3.png" /></a></p>
<p>リモートサイトに生成されたテンプレートをローカルにGETします。</p>
<p>編集に入る前に、環境設定でファイルを開くときの文字コードの設定を確認しておきましょう。</p>

<p><a href="http://www.flickr.com/photos/mathatelle/378902444/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/184/378902444_a0f9a0c31f.jpg" width="500" height="342" alt="mtdw3_1.png" /></a></p>
<p>これでDreamweaverで編集をする準備が整いました。</p>
<h2> 4. Dreamweaverでテンプレートを編集</h2>
<p>ローカルにGETしたファイルを開きます。メインページのテンプレートを開いてみましょう。</p>
<p> <a href="http://www.flickr.com/photos/mathatelle/378902494/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/126/378902494_83ced3954d.jpg" width="500" height="291" alt="mtdw4.png" /></a> </p>
<p><a href="http://www.adobe.com/jp/devnet/dreamweaver/articles/movable_type_3.html">Dreamweaver 拡張機能 for Movable Type 3</a>をインストールすれば、コードヒントにMTタグが追加されるので、コードビューでの編集が効率的になります。</p>
<p>視覚デザインの確認がしたければ、「デザインタイムスタイルシート」という機能を使ってCSSを適用してやります。作業中だけ適用されるCSSで、テンプレートのソースには影響がありません。手順は以下の通り。 </p>
<p><a href="http://www.flickr.com/photos/mathatelle/378902530/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/153/378902530_7a00aa798b.jpg" width="500" height="300" alt="mtdw4_1.png" /></a></p>
<p><a href="http://www.flickr.com/photos/mathatelle/378902565/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/141/378902565_7b3cd03098.jpg" width="500" height="253" alt="mtdw4_2.png" /></a></p>
<p><a href="http://www.flickr.com/photos/mathatelle/378902631/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/157/378902631_cd70d0feeb.jpg" width="500" height="490" alt="mtdw4_3.png" /></a></p>
<p><a href="http://www.flickr.com/photos/mathatelle/378902667/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/164/378902667_0831255099.jpg" width="500" height="253" alt="mtdw4_4.png" /></a></p>
<p>これでCSSが適用されます。</p>
<p> <a href="http://www.flickr.com/photos/mathatelle/378902737/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/148/378902737_7c3d13d20f.jpg" width="500" height="291" alt="mtdw4_5.png" /></a></p>
<h2>5. テンプレートをPUTし、再構築</h2>
<p>編集が終わったらテンプレートをPUTし、Movable Type の管理画面にログインして再構築を行います。これで完了です。</p>
<p> 特定のインデックステンプレートのみを更新したい場合は、該当テンプレートを開き「保存と再構築」ボタンを押します。エントリー・アーカイブなどアーカイブ・テンプレートを編集した場合は、メニューの「サイトを再構築」から再構築を行います。  </p>
<p><a href="http://www.flickr.com/photos/mathatelle/378902808/" title="Photo Sharing"><img src="http://farm1.static.flickr.com/144/378902808_b890ab6579.jpg" width="500" height="451" alt="mtdw5.png" /></a></p>

<h2>関連リンク </h2>
<ul>
<li><a href="http://www.sixapart.jp/movabletype/manual/3.3/03_blog_admin_guide/customizing_blogs/editing_templates.html">Movable Type 3.3 マニュアル - テンプレートの編集</a></li>
</ul>
<h2>更新履歴</h2>
2007年2月4日：動作対象をDreamweaver MX2004・Dreamweaver 8、Movable Type3.3として本ページを再編集しました。]]>
    </content>
</entry>

</feed>
