「Webデザインの新しいルール Movable Type 4.x」について(その3:カスタマイズ)

August 31,2007 3:33 AM
Category:[お知らせ]
Tag:[, ]
Permalink

半月に一度ペースでお送りしている「Webデザインの新しいルール Movable Type 4.x」の第3回目のプロモーションです。

現在、校正の真っ只中で、丸1日家に閉じこもってゲラと睨めっこしています。
執筆時点でキャプチャした画面は Beta7 辺りのもので、正式版の管理画面と微妙に異なっているので、ほぼ全ての画面を再キャプチャしている状態です。また MT4 が出る前に書いた部分は MT3 の内容になっているので、ほぼ全面見直しという状態です。

私が担当させて頂いたページは約200ページあり、先週の土曜日から開始して、1日20?30ページのペースで進んでます。来週月曜日が初校の締め切りで、今のペースではギリギリになりそうです。

ちなみに現在の発売予定は10月16日(火)です。また、他に数冊併せてシリーズで出版されると以前書きましたが、今のところこの1冊のみです。

その3:カスタマイズ

書籍のメインコンテンツのひとつであるテンプレートのカスタマイズは、どちらかと言えば実用的なものを主体にしています。ページのナビゲーションやユーザビリティに着目したものが多く含まれています。

企業サイトにも適用できるカスタマイズを松永さんが担当され、私はその路線で、企業サイト・個人サイトどちらでも使えそうな具体的なカスタマイズを担当しています(デザインはブログから離れていませんが)。

またテンプレートタグがMT4でかなり機能拡張されたので、PHP や JavaScript でこねくりまわしている部分を MT タグオンリーに直したりして、新しいタグの使い方も少しだけ披露させて頂いてます。

また、PHP化やダイナミック・パブリッシング、モジュール化といったパフォーマンスに関する内容もあり、さらに、MT4 で追加された管理画面での分かりにくいところ等もできるだけ噛み砕いて解説しているつもりです。途中でバージョンが上がって画面が変わらないことを祈ってます。

またスタイルを変更するカスタマイズでは、CSSの変更前後のコードを掲載しているだけですが、編集者の方と打ち合わせて、プロパティに対応する画面も掲載して分かりやすくしようと、この期に及んで企んでいます。

そういう訳で、おそらくここ数日が佳境なので、コメントのご返事は全くできないと思います。申し訳ありません。

関連記事:

Comments [2] | Trackbacks [0]

Movable Type 4 のバックアップ機能

August 30,2007 2:35 AM
Category:[]
Tag:[, ]
Permalink

Movable Type 4 ではブログ全体をバックアップできる「バックアップ機能」が搭載されました。現在校正中の「Webデサインの新しいルール Movable Type(仮称)」でも詳しく解説していますが、設定項目がやや分かりにくいので、本エントリーで少しだけ触れておきます。

1.ブログのバックアップとシステム全体のバックアップ

バックアップは、ブログのバックアップとシステム全体(複数ブログを運営している時に一度でバックアップできる)のバックアップのいずれかを選択することができます。

どちらも、システムメニューの「ツール」→「バックアップ」を選択し、ブログを特定したい時は、「バックアップするブログを選択」でブログを選択します。

システムのバックアップ

が、ブログ単体のバックアップをするのであれば、ブログの管理メニューにある「バックアップ」を利用した方がいいと思っています。こちらであればブログを選択する必要はありません。

ブログのバックアップ

このメニューに辿り着くにはダッシュボード右にある「ショートカット」の「インポート」→「バックアップ」で進んでください。
ベータ版の途中までは、このメニューには一番下の「ツール」から進めたのですが、正式版では意図的に進めなくなっています(ツールで進めるのはログのみ)。復元がシステムメニューからしか行えないので、もしかしたらブログ単体のバックアップメニューはなくなるのかもしれません。

2.圧縮フォーマットと出力ファイルのサイズについて

「圧縮フォーマット」と「出力ファイルのサイズ」の関係がちょっと分かりにくいので、先に解説しますと、「出力ファイルのサイズ」は「圧縮しない」を選択した時のみ有効になります。この設定項目についてはユーザビリティがいずれ改善されるでしょう。

さて、圧縮フォーマットは OS によって異なり、Linux では tar.gz、Windows では zip になるみたいです。

ラジオボタンから「圧縮フォーマット」を選択した場合、つまりバックアップデータを圧縮する場合は、全てのバックアップデータをひとつのアーカイブファイルにしてダウンロード画面に移行します。
復元する時はこのアーカイブファイルを指定するだけで、解凍する必要はありません。

「圧縮しない」を選択した場合は、「出力ファイルのサイズ」にかかわらず、バックアップデータが /tmp に作成され、画面下にバックアップされたファイルの一覧が表示されます(下)ので、それらをローカル PC にダウンロードします。「ファイルのアップロード」機能を利用してアップロードしたアイテム(ここでは jpg/png)等もバックアップされます。

分割しないバックアップ

アイテム類がなければ、ここで生成されるのは、マニフェスト(manifest)ファイルとXMLファイルのみです。バックアップの実体はXMLに含まれ、マニフェストファイルはバックアップファイルのXMLの一覧が記述されているだけです。

XML ファイルがひとつしかないとマニフェストの意義がわかりづらいのですが、上記は、「出力ファイルのサイズ」で「分割しない」を選択した動作で、下が、「出力ファイルのサイズ」で「300KB」を選択したものです(上記と異なるブログなのでアイテムの表示が異なりますが無視してください)。

分割したバックアップ

この例では(画面上は分かりませんが)XML ファイルが 300KB 単位に分割されています。分割対象となるファイルは XML のみで、サイズは 300KB ぴったりではなく大体です。
また XML ファイルが指定したサイズを超える場合のみ分割されます。

ファイルのサイズ

マニフェストファイルには、このXMLファイルの一覧が記述されています(下はマニフェストファイルの中身)。

<manifest xmlns='http://www.sixapart.com/ns/movabletype'>
<file type='backup' name='Movable_Type-2007-08-29-16-55-32-Backup-1.xml' />
<file type='backup' name='Movable_Type-2007-08-29-16-55-32-Backup-2.xml' />
<file type='backup' name='Movable_Type-2007-08-29-16-55-32-Backup-3.xml' />
<file type='asset' name='tea.jpg' asset_id='5' />
</manifest>

このファイルは何に使うのか?という話ですが、「圧縮しない」を選択して作ったバックアップで復元する時には、最初にこのマニフェストファイルを指定します。

指定されたマニフェストファイルには XMLの一覧、つまりバックアップの実体が書かれているので、システムがこの内容を読み取り、復元時に「次はこのXMLファイルをアップロードしてください」というウィザードのように進めることができる、という訳です(下)。

システムのバックアップ

圧縮した場合は、これらの面倒な作業はシステムが勝手に行ってくれます。またどちらも含まれる内容は全く同じものです(アーカイブする・しないの違いだけ)。

3.一時ディレクトリの変更について

「圧縮しない」でバックアップすると、/tmp 配下にバックアップが作成されます。バックアップ機能のメッセージにも書かれていますが、公開すべきではない情報も含まれています。言い換えると、XML ファイルはテキスト形式なので、管理情報が丸見えです(パスワードは暗号化されている模様)。

システムのバックアップ

このメッセージでは「一覧に表示されたファイルを/tmpディレクトリからダウンロードした後、すぐに削除することを忘れないでください。」と書かれていますが、サーバによってはアクセス制限で FTP ツールでは /tmp に移動できない場合があります(ただしこのエリアは周期的に削除されるはず)。

その問題とは別に、バックアップファイル名が全世界でユニークな名称ではないようなので、共有タイプのサーバの場合、衝突する可能性がないとは言い切れません(権限はオーナーだけなのでどのような動作になるか分かりませんが)。

上記を踏まえて、バックアップを分割しない方法で保存する場合は、事前に mt-config.cgi の末尾の行に、一時ディレクトリを自身のディレクトリにする設定(下記)を追加することをお勧めします。

TempDir [一時ディレクトリのパス]

[一時ディレクトリのパス]にはサイトパスの末尾に /tmp を加えた内容を記述すると良いでしょう。/temp とかでは、ルートのディレクトリにアクセスしようとするため、エラーになります。

また、mt-config.cgi の設定だけではディレクトリは自動生成されません。FTP ツールで tmp ディレクトリを追加しましょう。

tmp ディレクトリは Movable Type 4 のフォルダ機能を使って作成していいかもしれませんが、ディレクトリの性質が異なる(tmpはバックアップすべきエリアではない)ので、その辺りはご自身で見極めてください。

4.その他

バックアップ機能は大変良いと思っているのですが、このエントリーはバックアップ機能を保証するものではありません。

バックアップ機能のご利用に際してはご自身の責任で行ってください(可能であれば他のバックアップ方法と併用することを推奨します)。

Comments [0] | Trackbacks [1]

Movable Type 4 にアップグレードするメリット

August 29,2007 2:55 AM
Category:[4.0]
Tag:[, ]
Permalink

Movable Type 3.x を使っている方対象に、Movable Type 4 へアップグレードするメリットをまとめてみました(今更感がありますが)。

主観的な見解で、これはいいと思ったものから順に並べています。

1.バックアップ/復元機能

Movable Type 3 まではエントリーの書き出しや、データベースのバックアップ等で、ブログのバックアップを行っていましたが、Movable Type 4 ではブログ全体のバックアップ&復元機能が追加されました。
執筆のために何度かバックアップ機能については動作を確認しましたが、エントリーからテンプレート、アイテム等、全てのデータを完璧に復元してくれます。

私のブログはまだ 3.21-ja で、データベースのバックアップも正常に行えないため、エントリーの書き出しを周期的に行っている状態ですが、この機能さえあれば万が一の時も安心ですし、アップグレードする代わりに「新規インストール+復元」という選択肢も使えるので、時間に余裕ができれば Movable Type 4 にアップグレードしたいと思います。

2.ウェブページ作成

Movable Type 3 までは単一のウェブページを作るには、インデックステンプレートを利用するか、カテゴリーを割り当てる(そして、そのカテゴリーを全カテゴリーから除外する)るしか方法がありませんでした。
私はインデックステンプレートを利用しているのですが、テンプレート内に直接コンテンツを書く必要があり、エントリーの自動改行機能も使えず、全て手動で(X)HTMLマークアップを記述するという面倒さがありました。

Movable Type 4 では「ウェブページ」という機能が追加されたので、エントリーと同じ環境でコンテンツを作成できるのが魅力です。

3.コメント返信機能

Movable Type 3 までは運営者自身がコメントする時にはブログのエントリーアーカイブから投稿する必要がありましたが、Movable Type 4 では管理画面から返信することができます。

実際の運用では使っていませんが、かなり便利な機能ではないかと思います。

4.アイテム管理

Movable Type 3 までのファイルのアップロード機能は、アップロードはできましたがその後の管理はできません。したがって不要になるとFTPツールで削除するといった手間がありました。

Movable Type 4 では「アイテム」という機能が追加され、Movable Type を利用してアップロードしたアイテム(ファイル)は Movable Type の管理下に置かれます。ファイル名を変更することはできませんが、削除やタグの付与が可能です。

またテンプレート・タグを使うことでアイテム表示を制御することもできるようになりました。感覚的ですが、もしかしたらフォトログがかなり作りやすくなるかもしれません。

5.フォルダ管理

Movable Type 3 まではフォルダ(ディレクトリ)の管理機能はありませんでしたが、4項のアイテムと同様、Movable Type で作成したフォルダは Movable Type で制御できるようになります。

フォルダにも、対応するテンプレート・タグが追加されたので、これも感覚的ですが、ディレクトリ一覧およびファイル一覧によるナビゲーションのサイトを作れるかもしれません。

6.ブログ記事削除時の動作

Movable Type 3 ではブログ記事の削除やファイル名変更で、対応する(X)HTMLファイルの削除が完璧でなかったのですが、Movable Type 4 ではかなり改善されています。全自動とまではいきませんが、再構築が必要なものについては必ず再構築を促すようになっています(多分)。

7.ポータル・ブログ

MultiBlog プラグインがプリインストールされ、Movable Type Enterprise のポータル・ブログ(複数のブログをまとめて表示する代表ブログ)機能が MT4 にも搭載されました。MT4 のドキュメントにはまだ掲載されていないので Enterprise マニュアルの名称で「ポータル・ブログ」と書いてます。

8.テンプレート・タグ

Movable Type 4 では、上記のウェブページやアイテム・フォルダ関連のタグを含め、約150近いタグが追加されています。

特に条件判定タグの拡張と、いわゆる Getter/Setter 系 MT タグの組み合わせで、これまでテンプレート・タグだけではできなかった(=PHP や JavaScript に依存していた)処理ができるようになったことが大きなメリットではないかと感じています。

Comments [2] | Trackbacks [2]

Google マップの埋め込み HTML でふきだしを消す方法

August 28,2007 3:17 AM
Category:[サービス]
Tag:[, ]
Permalink

「Google マップの貼り付け用 HTML でふきだしを消す方法はありませんか?」というご質問を頂きましたので、紹介致します。

ちなみに、ふき出しの右上にある×印をクリックして、ふき出しを消した状態でHTMLコードを取得しても、貼り付けたブログではふき出しが表示されてしまいます。

これを消す方法は簡単で、まず Google マップで検索結果が表示されます。

Google マップ検索結果

表示結果の中央地点にある緑色の矢印を右クリックして「検索結果をクリア」を選択。

検索結果をクリア

これでふき出しが非表示になったので、この状態で右上の「このページのリンク」をクリック。

非表示になった状態

このHTMLコードを取得してご自身のブログに貼り付ければふき出しは表示されません。

HTMLコードを取得

ふき出し以外のマークも、このワザを使えば消すことができます。

ふき出し以外のマークも消去可能

宣伝ですが、埋め込みHTMLのマークアップが気にいらない方は「Google マップの貼り付け用 HTML を valid にする」スクリプトをご利用ください。

このスクリプトにも適用しようと企んだのですが、URIに含まれるクエリーがかなり異なるので挫折しました。

Comments [0] | Trackbacks [0]

Movable Type 4 テンプレート不具合と修正のお知らせ

August 27,2007 2:17 AM
Category:[テンプレート]
Tag:[, ]
Permalink

現在配布中の Movable Type 4 テンプレートに不具合がありました。

事象は「Safari でブログ記事アーカイブ(エントリーアーカイブ)を表示すると、表示が崩れる(フッタがヘッダの直下に表示され、サイドバーがコンテンツの下に表示される)」というものです。

原因はテンプレートモジュール「コメント入力フォーム」の(X)HTMLマークアップ誤りです。ご利用中の皆様には大変ご迷惑をおかけして申し訳ございません。この場をお借りしてお詫び申し上げます。
また情報を提供下さった皆様にお礼申しあげます。ありがとうございました。

現在当サイトで配布中の Movable Type 4 用のテンプレートをご利用の方は、

  1. 「コメント入力フォーム」テンプレートをダウンロードして差し替え
  2. 「コメント入力フォーム」テンプレートを手修正

のいずれかを行ってください。

なお「Movable Type テンプレート」にあるダウンロードアーカイブは修正済です。

1.「コメント入力フォーム」テンプレートをダウンロードして差し替える場合

下記のリンクをクリックして「コメント入力フォーム」テンプレートをダウンロードし、解凍した内容を、現在設定されているテンプレートモジュール「コメント入力フォーム」の内容と入れ替えてください。

comment_form_utf8_1_3.zip
comment_form_utf8_1_3.lzh

2.「コメント入力フォーム」のテンプレートを手修正する場合

「コメント入力フォーム」テンプレート編集画面で下記の修正を行ってください。

修正前

    :
<div id="comment-form-remember-me">
   <p>
      <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />
      ログイン情報を記憶</label>
</p>
    :

修正後(青色で示す div 終了タグを追加)

    :
<div id="comment-form-remember-me">
   <p>
      <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />
      ログイン情報を記憶</label>
   </p>
</div>
    :
Comments [2] | Trackbacks [0]

ミニブログ「フィークル」

August 26,2007 2:05 AM
Category:[サービス]
Tag:[, ]
Permalink

最近流行のミニブログ「フィークル(Feecle)」の紹介です。

以前、メールで日本サイワールド株式会社の方より「フィークル」のご案内を頂いていたのですが、ご返事も差し上げておらず、大変失礼致しました。この場をお借りしてお詫び申しあげます。

私よりご存知の方が多いと思いますが、ミニブログという名前の通り、仰々しい記事を投稿するのではなく、ひとりごとみたいな短い文章を投稿し、それに対して一言コメントをつけられるという、ゆるやかなコミュニケーションを得られるサービスです。

feecle

ミニブログサービスとしては、他に「Haru.fm」や「Timelog」「もごもご」等があり、いずれも日本語版「twitter」といったところでしょうか。

サイトのトップページ(上)を拝見すると、投稿量の多さはもちろんですが、それよりも投稿に対するコメントの量が半端ではありません。最新の投稿をみても、コメントがついていない記事がほとんど見当たりません。皆さん待ち構えているのでしょうか。(笑)
いずれにしても、反応があるという意味では投稿する楽しみはありそうです。

自分のブログで手一杯という状態なので、あまりあれこれ手を出してないのですが、フィークルの印象は「mixi 日記」を不特定多数に公開しているようなイメージです。
会員登録に必要なのはメールアドレスとIDとパスワードのみなので誰でも簡単に始めることができます。

私も一応登録させて頂いてますので、いずれ軽くつぶやいてみたいと思います。

Comments [0] | Trackbacks [0]

ジレットの男性用カミソリ「フュージョン5+1」

August 25,2007 12:47 AM
Category:[サービス]
Tag:[]
Permalink

「舌でなぞるような優しい剃り心地」の「ジレット・フュージョン5+1」の宣伝です。

剃り心地の秘密は、5枚刃に加えた微小波動により肌への摩擦を和らげ、刃の滑りをなめらかにしているところにあるようです。
85%の人が「以前使ったものより肌に優しい」というアンケートの結果も出ています。

下記の再生ボタンをクリックするとネットCMを見ることができます(音声つきですのでご注意ください)。再生後に公式サイトへジャンプすることができます。

動画を見終わった後の Flash が凝ってますね(私の趣味ではありませんが…)。

Comments [0] | Trackbacks [0]

Movable Type 4 におけるインポート・エクスポート機能の改善

August 24,2007 2:30 AM
Category:[]
Tag:[, , ]
Permalink

Movable Type 4 のインポート・エクスポート機能では、新たに下記のデータが引き継がれるようになりました。

  • ファイル名(BASENAME)
  • タグ(TAGS)

特にファイル名が引き継がれるようになったのは大きなメリットです。

1.Movable Type 3.x での問題

Movable Type 3.x でのエクスポート(書き出し)機能ではファイル名が書き出されないため、インポート(読み込み)時にエントリー・アーカイブ(MT4ではブログ記事アーカイブ)のファイル名が付与され直されます。

デフォルトのアーカイブファイル名は、エントリータイトルにしたがってファイル名を付与することになっているため、エントリータイトルが全て日本語の場合は post.html、post_1.html、post_2.html … というファイル名が付与されます。

また、一度公開したエントリーを削除し、その後新たに公開したエントリーには削除したファイル名が付与されます。例えば、post_3.html までファイルがある状態で、post_2.html を削除すると、次の(タイトルが全て日本語の)エントリーに付与されるファイル名は post_4.html ではなく、post_2.html となります。

このような運用状態で「エクスポート(書き出し)→インポート(読み込み)」を実施すると、過去の(タイトルが全て日本語の)エントリーに対し、post.html、post_1.html、post_2.html …と付与されるため、バックアップ前と同一のファイル名を付与できないという問題がありました。

そういう訳で、Movable Type 3.x では「ファイル名にはタイムスタンプを利用する」という手法が一般的だった訳です(DBのバックアップを利用するのであればこのような考慮は不要)。

関連記事:
エントリー・アーカイブファイル名の不具合を解消する

2.Movable Type 4 でのファイル名

ファイル名がインポート・エクスポート機能で引き継がれるようになったことと、それ以前にブログのバックアップ機能が盛り込まれたので、Movable Type 4 ではタイムスタンプを利用する作戦は不要になり、任意のファイル名を自由に付与できるようになります。

余談ですが、Movable Type 4 では、ブログ自体のバックアップはバックアップ機能を利用し、インポート・エクスポート機能は異なるブログ間の移行用、というのが本来となるでしょう。
とはいえ、エントリーデータはバックアップとあわせて周期的にエクスポートしておいた方が安全かもしれません。

3.Movable Type 4 でのエクスポートファイルフォーマット

参考までに、Movable Type 4 でエクスポートされる1つのブログ記事のフォーマットは以下のようになります。青色部分が新たに追加されたフォーマット(ファイル名/タグ)です。

フォーマット(CONVERT BREAKS)も種別が増えています。サブカテゴリーは残念ながら引き継がれません。

AUTHOR: hogehoge
TITLE: Movable Type 4.0 へようこそ!
BASENAME: movable_type_40
STATUS: Publish
ALLOW COMMENTS: 0
CONVERT BREAKS: richtext
ALLOW PINGS: 0
PRIMARY CATEGORY: カスタマイズ
CATEGORY: movable type
CATEGORY: カスタマイズ
DATE: 08/09/2007 12:41:09 AM
TAGS: 4.0,mt
-----
BODY:
このブログ記事は、Movable Type 4のインストール完了時に、システムによって自動的に作成されたブログ記事です。 新しくなったMT4の管理画面で、早速ブログを更新してみましょう。
-----
EXTENDED BODY:
 
-----
EXCERPT:
 
-----
KEYWORDS:
 
-----
 
COMMENT:
AUTHOR: mtbook
EMAIL: 
IP: 
URL: 
DATE: 08/09/2007 12:41:09 AM
このコメントは、Movable Type のインストール完了時に、システムによって自動的に投稿されたコメントです。MT のブログに投稿されたコメントが、どのように表示されるのかを、ご確認いただけます。
-----

4.MT3 → MT4 の移行でエクスポート・インポートを利用する場合

MT3 → MT4 を通常の手順でアップグレードする場合は問題ありませんが、(デフォルト設定のファイル名で)エクスポート・インポートによって MT4 に移行する場合、MT3 のエクスポートフォーマットではファイル名が引き継がれません。

ファイル名を引き継ぐには下記の記事を参考にすると良いでしょう。

5.注意事項

Movable Type のエクスポートデータフォーマットのセパレータ(フィールドの区切り文字)には連続したハイフンが使われています。

したがって連続したハイフンを本文で用いると正常にインポートできなくなる可能性があります。本文には連続したハイフンを使わないようにしましょう。
なお、この記事ではハイフンを「&#45;」で実体参照しています。

このサイトでも、頂いたコメントに連続したハイフンが含まれていたことがあり、そのため正常にバックアップできない事象が何度かありました。
ということで、コメントにもハイフンはご使用にならないでください。

Comments [8] | Trackbacks [2]

Movable Type 4.01 Beta リリース

August 23,2007 7:50 PM
Category:[4.0]
Tag:[, ]
Permalink

Movable Type 4.01 Beta がリリースされました。

Movable Type 4.01 Beta

So we are happy to announce the release of Movable Type 4.01 Beta 1 which has three primary goals:

  • To address high priority issues found by users following the release of Movable Type 4.0; the majority of these issues revolving around issues users faced with upgrading from previous versions of Movable Type and migrating to MT4 from other blogging platforms.
  • To make the necessary changes to the core application in support of the upcoming availability of the Movable Type Enterprise Solution.
  • To support developers who are in the process of upgrading their existing plugins and developing entirely new plugins for the MT4 platform.

ダウンロードのページより日本語対応版もダウンロードできます。

差分をみたところ変更ファイルが多い(約90)ことと、ベータ版であることから差分の公開は見送りたいと思います。

Comments [0] | Trackbacks [0]

Google マップの貼り付け用 HTML を valid にする

August 23,2007 1:23 AM
Category:[JavaScript]
Tag:[, ]
Permalink

Google マップをブログ等に貼り付ける「埋め込み HTML」の提供が開始されましたが、その HTML を valid にするスクリプトを公開します。

1.埋め込み HTML の利用方法

埋め込み HTML 自体の利用方法ですが、まず Google マップで任意の地図を表示させ、「このページへのリンク」をクリックします(スクリーンショット右上)。

リンクをクリックすると、HTMLコードがすぐ下に表示されます(下)ので、

「HTML を貼り付けてサイトに地図を埋め込みます」の下に表示されている、

<iframe width="425" height="350" ?

のコードをマウスコピーして、それをブログの投稿画面に貼り付ければOKです。

2.問題点

埋め込み HTML で使われている iframe タグは HTML4.01 Strict・XHTML1.0 Strict では未定義、XHTML1.1 では廃止されていることと、以下に示す問題のため、この HTML をブログに埋め込むと not Valid になる可能性があります。

  • & が実体参照(&amp;)されていない
  • br 要素の"/"の前に空白がない

3.変換スクリプト

ということで、埋め込み用 HTML を valid にするスクリプトを作成してみました。

上のテキストエリアに Google マップ埋め込み用 HTML を貼り付けて、 object または iframe + object のボタンをクリックすると下のテキストエリアに valid な HTML が表示されますので、それをブログ等に貼り付けてください。

object 要素だけではどうもクロスブラウザにならないようです(IE で正常に表示されない等)ので、現状では iframe + object(条件付きコメント利用)を推奨します。


Windows XP + IE6/IE7/FireFox2/Opera9/Safari3で動作確認し、Markup Validation Service で valid になることを確認していますが、不具合等ございましたらご連絡ください。

参考までに、このスクリプトでは下記の変換を行っています。

  • iframe 要素を object 要素に変更
  • src 属性を data 属性に変更
  • object 要素で不要な属性(frameborder/scrolling/marginheight/marginwidth)を削除
  • object 要素に type="text/html" を追加
  • object 要素の「要素の内容」に「non data」を挿入
  • & を &amp; に置換(object要素内のみ)
  • br 要素に半角空白を付与

4.関連・参考

Comments [0] | Trackbacks [9]

クリスタルガイザースパークリング

August 22,2007 12:50 AM
Category:[mono]
Tag:[]
Permalink

「クリスタルガイザースパークリング」はミネラルウォーターで有名な「クリスタルガイザー」の炭酸版、いわゆる「炭酸水」です。
炭酸水の有名どころとしてはキリン「NUDA」がありますが、個人的に「クリスタルガイザースパークリング」の味が気に入って、ここ数ヶ月愛飲しています。

飲み続けている理由には「美味しい」「飽きない」ということの他に、元々コーラやサイダー等の炭酸は苦手(胃が膨れる感じ)だったのですが、炭酸水はなぜか全く苦になりません。かといって炭酸が弱い訳ではなく、爽快な喉ごしです。

「1日の水分摂取量は多い方が良い」と言われる昨今、ミネラルウォーターで長続きしない時は炭酸水がいいかもしれません。

さて本題はここからで、スーパーやコンビニで売っている「クリスタルガイザースパークリング」はレモン味(下)が大半です。自宅近辺や出先のコンビニ等、探してみましたが、どこもレモン味オンリーでした。

(お徳用ボックス) クリスタルガイザースパークリングレモン 500ml ×24本(お徳用ボックス) クリスタルガイザースパークリングレモン 500ml ×24本

クリスタルガイザー
売り上げランキング : 40
おすすめ平均

Amazonで詳しく見る
by G-Tools

実はこのシリーズにはライム味(下)があります。味はレモン味よりもあっさりとした印象です。ラベルはレモン味がイエロー系、ライム味はグリーン系ですが、パッと見はかなり紛らわしいです。

(お徳用ボックス) クリスタルガイザー スパークリングライム 500ml×24本(お徳用ボックス) クリスタルガイザー スパークリングライム 500ml×24本

クリスタルガイザー
売り上げランキング : 336

Amazonで詳しく見る
by G-Tools

最初に飲んだ炭酸水がたまたまこれだったというのもありますが、私はこのライム味が大変気に入っています。
両者の「売り上げランキング」から、レモン味が美味しいのか、ライム味が知られていないのかは定かではありませんが、興味のある方は是非一度お試しになってみてください。

ショッピングセンターでは千葉・海浜幕張の「カルフール幕張」で取り扱ってます。もしかしたらイオンなら扱っているのでしょうか(探していないので分からず)。

Comments [0] | Trackbacks [0]

Movable Type のスケジュール・タスク実行(Windows 編)

August 21,2007 1:50 AM
Category:[管理画面]
Tag:[, , ]
Permalink

Windows のタスク・スケジューラを利用した、Movable Type のスケジュール・タスク実行方法を紹介します。スケジュールタスクを実行することで、MT4 であれば指定日投稿・迷惑コメント(トラックバック)削除・公開キュー等のスケジュール処理が可能になります。
MT3 も同じ設定方法です(公開キューはMT4のみ)。

この設定は自宅サーバで Windows XP 等を利用している場合の設定方法です。レンタルサーバの場合は Linux 上で同様の設定を行います。

以下、設定手順です。

「スタート」→「設定」→「コントロール パネル」→「タスク」→「スケジュールされたタスクの追加」を選択。

スケジュールされたタスクの追加

タスク ウィザードで「次へ」をクリック。

タスク ウィザード1

「参照」をクリック。

タスク ウィザード2

perl プログラム(ここでは C:¥usr¥bin¥perl.exe)を選択して「開く」をクリック。拡張子を表示しない設定の場合は「perl」を選択。

perl選択

日単位を選択して「次へ」をクリック。

タスク ウィザード3

開始時刻を設定し、このタスクの実行から「毎日」を選択して「次へ」をクリック。

タスク ウィザード4

表示されたユーザーのパスワードを設定して「次へ」をクリック。

タスク ウィザード5

「[完了]をクリックしたときに詳細プロパティを開く」をチェックして、「完了」をクリック。

詳細プロパティ

ここからの設定が重要です。開いたプロパティ画面で

  • 実行するファイル名:C:¥usr¥bin¥perl tools¥run-periodic-tasks
  • 開始:アプリケーション・ディレクトリのパス(例はC:¥web¥mt)に書き換える

を設定し、「OK」をクリック。実行するファイル名の tools¥run-periodic-tasks の前には半角空白を入れてください。「開始」のアプリケーション・ディレクトリとは、mt.cgi があるディレクトリです。

とりあえずこれで「OK」をクリックすれば設定完了です。
ただしこのままでは日に1回しか実行されないので、実行周期を短くする場合は「スケジュール」タブの詳細設定をクリック。

オプションの詳細設定で「タスクを繰り返し実行」で間隔を設定します。継続時間は間隔より長く設定してください。
スケジュールを変更するとパスワードの設定が求められる場合があります。

オプションの詳細設定

作成したタスクは最初の「スタート」→「設定」→「コントロール パネル」→「タスク」→「XX」で起動することができます。

オプションの詳細設定

Comments [0] | Trackbacks [0]

Movable Type 4 のデフォルトテンプレートで @import が表示される問題

August 20,2007 2:15 AM
Category:[4.0, トラブルシューティング]
Tag:[]
Permalink

いくつかのブログで「Movable Type 4 のデフォルトテンプレートを使用すると @import が上部に表示される」という事象が発生しているようです。

原因はデフォルトテンプレートの「ヘッダー」の7行目にある、

<$MTInclude identifier="styles" trim_to="0"$>

が展開されてしまうためですが、当サイトでは再現しませんでした。

検索してみたところ、Perl 5.8.0 のバグのようです。

この行は styles、つまり「スタイルシート(メイン)」をインクルードするのですが、「最初のN文字を取り出す」という trim_to 属性の値が 0 になっているということは、このタグでは何も表示されないのが正しい動作のところ、Perl 5.8.0 では表示されてしまうようです(7行目が何故必要かについては理解できていませんStyleCatcherで必要らしいです)。

ちなみに、8行目で、

<link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />

と、「スタイルシート(メイン)」を取得しているので、7行目は style 要素で括るのではなく、参照元サイトにある通り、

<MTSetVarBlock name="__null__">
<$MTInclude identifier="styles"$>
</MTSetVarBlock>

が良いでしょう。

追記:あんちもん2.Labさんの MTVoid プラグインでも同様の結果を得られます。

Comments [2] | Trackbacks [4]

VOLVO「C30」

August 19,2007 1:35 AM
Category:[サービス]
Tag:[]
Permalink

VOLVOの新型車「C30」が登場しました。

VOLVO(ボルボ)と言えば、セダンやステーションワゴンというイメージ(というか、実際にそういったラインナップしかありません)でしたが、この「C30」は2ドア+ガラスハッチゲートというリアの独特なデザインと、VOLVO伝統の安全性を両立している車、だそうです。

下記の再生ボタンをクリックするとネットCMを見ることができます(音声つきですのでご注意ください)。再生中または再生後に動画をクリックすると公式サイトへジャンプできます。

おおざっぱですいませんが、C30のラインナップは

  • C30 2.4i Aktiv(285万?)
  • C30 2.4i SE(348万?)
  • C30 T-5(387万?)

となっています。詳細は公式サイトをご覧ください。

この動画は広告として掲載を依頼されたものです。

Comments [0] | Trackbacks [0]

Ajax 月送りカレンダー(MT4版)

August 18,2007 3:33 AM
Category:[Ajax, カレンダー]
Tag:[, , , ]
Permalink
Ajax 月送りカレンダーMovable Type 4 版の Ajax 月送りカレンダーのカスタマイズです。リアルタイムカレンダー(本日の日付の装飾)および土・日・休日表示も盛り込まれています。

MT4 では、MT3 で紹介した「Ajax 月送りカレンダー」とは、アーカイブマッピングの方法が異なっており、「MT4でのカスタマイズ方法が分かりません」というリクエストを頂きましたので、本エントリーにて説明致します。
Ajax 月送りカレンダーの概要は割愛します(「Ajax 月送りカレンダー」をご覧ください)。

ここではデフォルトテンプレートおよび公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。

1.スクリプトのダウンロード・アップロード

下記のスクリプトをダウンロードします。

ダウンロードした ajaxCalendar.jsdayChecker.js はメインページと同じディレクトリにアップロードしてください。
また prototype.js も、ダウンロードしたスクリプトをメインページと同じディレクトリにアップロードしてください。

2.カレンダーテンプレート作成

注:ブログの文字コードが UTF-8 以外で運用されている場合は、2.1項のカスタマイズも併せて行ってください。

管理メニューの「デザイン」→「テンプレート」→「アーカイブテンプレート」→「アーカイブテンプレートを作成」の「ブログ記事リスト」をクリック。

テンプレート新規作成

次画面で下記を設定してください。

  • テンプレート名(一番上のテキストフィールド):カレンダー
  • ファイルへのリンク:(設定不要)
  • テンプレートの内容(テキストエリア):下記のいずれか
    注:テキストエリアにペーストする際はテキストエリア右上にある構文強調表示切替を「強調表示なし」を選択してから作業を行ってください。「構文強調表示」の状態でペーストするとテンプレートの内容の改行が失われます。
    構文強調表示

デフォルトテンプレートの場合

<div class="widget-calendar widget">
<h3 class="widget-header"><MTArchivePrevious><a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a> </MTArchivePrevious><$MTArchiveDate format="%B %Y"$><MTArchiveNext> <a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a></MTArchiveNext></h3>
<div class="widget-content">
<table summary="<MTArchiveDate format="%Y/%m">">
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>

公開テンプレートの場合

<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">&#65308;</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$> 
<MTArchiveNext>
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogArchiveURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >&#65310;</a>
</MTArchiveNext>
</caption>
<tr height="15">
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>

設定後は次のような感じになります。

テンプレート作成

設定が終わったら「保存」をクリックしてください。

2.1 ブログの文字コードがUTF-8以外の場合

Ajax(XMLHttpRequest)は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1

ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。

まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。

そして、2項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。

<MTEncodeText to="utf8">
      :
 (カレンダーテンプレート)
      :
</MTEncodeText>

本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。

3.カレンダーテンプレートを月別アーカイブに関連付け

テンプレートを保存すると、同じページの下に「アーカイブマッピング」の項目が表示されるので、「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「種類」から「月別」を選択して「追加」をクリック。

アーカイブマッピング追加

これでカレンダーテンプレートが月別アーカイブとして定義され、カレンダー用の「パス」が表示されます。
注:「月別」欄の右側にあるチェックボックスは絶対にチェックしないでください。

アーカイブマッピング追加完了

次に「パス」欄の右にあるセレクトボックスより「カスタム」を選択。

セレクトボックスより「カスタム」を選択

「パス」欄に下記の内容を設定して、「保存」をクリックしてください。

calendar/%y/%m/%i

パス変更

下のようになればアーカイブマッピングの設定完了です。

パス変更完了

4.日別アーカイブの追加

この設定は、カレンダーに表示された日付のリンク先のページとして日別アーカイブを生成するためのものです。
注:この設定を行わないと月別アーカイブの再構築で下記のエラーが表示されます。

再構築エラー

「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を選択し、アーカイブマッピングの「新しいアーカイブマッピングを作成」をクリック。

アーカイブマッピング

「日別」を選択して「追加」をクリック。

アーカイブマッピング

これで日別アーカイブが追加されました。

日別アーカイブの追加

5.テンプレート修正

5.1 外部ファイルのインクルード

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」をクリックし、<head>~</head> の間に下記を追加して「保存」をクリック。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

5.2 カレンダー表示部分の設定

「デザイン」→「テンプレート」→「テンプレートモジュール」→「サイドバー2(またはサイドバー)」をクリックし、カレンダーを表示させたい位置に下記を追加して「保存」をクリック。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogArchiveURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>

div は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。

6.CSS修正

「デザイン」→「テンプレート」→「スタイルシート(メインまたはベーステーマ)」を選択し、下記を追加して「保存および再構築」をクリックします。

デフォルトテンプレートの場合

確認中

公開テンプレートの場合

#calendar {
    margin: 5px 0 10px;;
    color: #444444;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
#calendar table {
    padding: 0;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    text-align: center;
    font-size: 9px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    text-align: center;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

公開テンプレートの場合、すでにカレンダー関係のスタイル設定が行われており、設定の競合を避けるため、古い設定(下)を削除またはコメントアウトしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #333;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
span.day {
    text-align: center;
    font-size: 9px;
}
span.saturday {
    color: blue;
}
span.sunday {
    color: #e50003;
}
td.today {
    display: block;
    border: 1px solid #333;
}

7.再構築

全てのページを再構築します。これでメインページ等を表示してカレンダーが表示されれば完成です。

8.ページ表示時にローディング状態を表示する場合

インチキっぽいですが、4.2項で設定した

<div id="calendar"></div>

に、例えば青色の

<div id="calendar">loading ...</div>

を追加することで、ページ描画でカレンダーが表示されるまでローディング状態を示すことができます。img タグを設定すれば画像を表示することも可能です。

月送り時は挿入した文字は表示されません。またカレンダー取得失敗の場合は表示が消えます(これは7項の設定と関連します)。

9.カレンダー取得失敗時にメッセージ等を表示する

Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。

このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ

File Not Found

を表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。

function errorProcess() {
    $('calendar').innerHTML = 'File Not Found';
}

メッセージを変更したい場合はこの青色部分を修正してください。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、6項の表示がそのまま残りますのでご注意ください。

「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、6項の「loading ...」というメッセージの代わりに、カレンダータグ(通常のカレンダータグ)を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。

10.トラブルシューティング

10.1 一度も表示されない場合

カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます(全てではありませんが思いついたものを挙げておきます)。

  • カレンダーアーカイブの再構築ができていない
  • カレンダーアーカイブページへのパス設定が誤っている
  • テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
  • カレンダーアーカイブが UTF-8 で出力されていない

ご質問の前に確認していただきたいのは、

  1. ブラウザの[表示]-[ソース](あるいは「ソースの表示」)で、カレンダーを設定しているページのソースを表示
  2. 表示されたソースから下記のタグをみつけ、getCalendar() の3番目のパラメータに設定されている URL(赤色)をブラウザに設定して実行
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/", "1", "http://user-domain/calendar/yyyy/mm/");
</script>

何も表示されない場合(404 Not Found)はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。

逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。

10.2 一度表示され、リロードすると表示されなくなる場合

クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、2項のテンプレートに埋め込んでいるアーカイブパスが誤っている可能性があります。よくあるのは次のように最後の"/"が抜けているケースです。

<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/archives", "1", "http://user-domain/archives/calendar/yyyy/mm/");
</script>

これは、管理画面の [設定] - [公開] で「アーカイブの設定」にチェックをつけていて、 [アーカイブURL] の最後に "/" がない場合に発生します。

2007.08.21
2項と4項の「ブログ記事」を「ブログ記事リスト」に修正しました。

2007.11.08
5.2項のタグに一部誤りがありましたので修正致しました。

2008.02.04
typo を修正しました(Wen → Wed)。


*1:文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。

Comments [93] | Trackbacks [12]

「Webデザインの新しいルール Movable Type 4.x」について(その2:タグリファレンス