2010年3月アーカイブ

2010_03_28_title.jpg

このブログのメタタグの出力部分にミスを発見!
最後に公開されたエントリーの概要が全ページに指定されていました・・・。

アホですかいな・・・。

メモ代わりと修正の履歴としてソースを貼っておきます。

このブログは(2010/03の時点で)変数ブロックばっかり集中して書かれた「mtvar」という名前のモジュールを読込む様につくってあります。そのモジュールの内容をそのまま公開。

<MTIgnore><!--キーワード--></MTIgnore>
<MTRemoveBlank>
<MTSetVarBlock name="KeyWordsTxt">
<mtif name="pageName" eq="top"><meta name="Keywords" content="Web制作,MT,MovableType,HTML,CG,デザイン" /></mtif>
<MTIfArchiveType archive_type="Individual"><meta name="Keywords" content="<mt:If tag="CategoryDataCategory_keyword"><mt:CategoryDataCategory_keyword></mt:If>,<$MTEntryKeywords$>" /></MTIfArchiveType>
<MTIfArchiveType archive_type="Category"><meta name="Keywords" content="<mt:If tag="CategoryDataCategory_keyword"><mt:CategoryDataCategory_keyword></mt:If>" /></MTIfArchiveType>
<MTIfArchiveType archive_type="Monthly"><meta name="Keywords" content="Web制作,MT,MovableType,HTML,CG,デザイン,<MTEntries lastn="3" glue=","><$MTEntryKeywords$></MTEntries>" /></MTIfArchiveType>
</MTSetVarBlock>
<MTIgnore><!--概要--></MTIgnore>
<MTSetVarBlock name="DescriptionTxt">
<MTIfArchiveType archive_type="Individual"><meta name="Description" content="<$mtEntryExcerpt$>" /></MTIfArchiveType>
<MTIfArchiveType archive_type="Category"><meta name="Description" content="Soh-Web<$MTArchiveTitle$>のアーカイブです。<$MTCategoryDescription$>" /></MTIfArchiveType>
<MTIfArchiveType archive_type="Monthly"><meta name="Description" content="Soh-Web<$MTArchiveTitle$>のアーカイブです。<$MTBlogDescription$>" /></MTIfArchiveType>
<mtif name="pageName" eq="top"><meta name="Description" content="<$MTBlogDescription$>" /></mtif>
</MTSetVarBlock>
<MTIgnore><!--タイトル--></MTIgnore>
<MTSetVarBlock name="titleTxt"><title><mtif name="pageName" eq="top"><$MTBlogName$></mtif><mtif name="pageName" eq="search"><$MTBlogName$></mtif><MTIfArchiveType archive_type="Individual"><$MTEntryTitle$>&nbsp;|&nbsp;<$MTEntryCategory$>&nbsp;|&nbsp;<$MTBlogName$></MTIfArchiveType><MTIfArchiveType archive_type="Category"><$MTArchiveTitle$>&nbsp;|&nbsp;<$MTBlogName$></MTIfArchiveType><MTIfArchiveType archive_type="Monthly"><$MTArchiveTitle$>&nbsp;|&nbsp;<$MTBlogName$></MTIfArchiveType></title>
</MTSetVarBlock></MTRemoveBlank>

<MTRemoveBlank>はMTタグを使用すると出力時の余計な改行を削除してくれるというプラグイン「RemoveBlank」用のタグ。
こちらのブログを参考にさせていただきました。感謝です。

でも思ったほどには削除してくれなくて結局は書き終えたら自分で改行を詰めちゃってるので上記みたいなソースになっているわけです。

思うに一つのモジュールに詰め込み過ぎなんですよねぇ~。
でも今は修正が面倒くさいのでいずれ直そうかなと思っています。

さて、<mtif name="pageName" eq="top">なんて記述がありますが、これはトップページ用のテンプレートに

<$MTSetVar name="pageName" value="top"$>
<$mt:Include module="mtvar"$>

ってな記述になっているわけです。
これは後々インデックステンプレートを増やしていく計画がある為、その時に「pageName」という変数でmetaタグやらjavascriptやらcssやらの内容を変えていこうと考えているわけです。現在はmetaタグのみですけど。

しかし見づらいソースですなー。
改善しようっと。反省です。

2010_03_21_title.jpg

なんかすごいタイトルでスイマセン・・・。
こういうタイトル画像が作りたかっただけなんです・・・。

さて。

MovableType(以下MT)に初めて触れた時、正直いって何をどうするべきかサッパリ分かりませんでした(笑)
しかしプログラミングが出来なくても更新性の高いサイトが構築できるという事は大きな魅力ですよね。

タイミング良く現場で「MTを利用してサイトを制作して欲しい」との要望も出た為、よくわからないながらも制作してみたのがきっかけでMTをよく触るようになりました。

以前、既存サイト内にブログを設置する仕事があり、WordPressで作成したブログから記事を抜き出してPHPで既存ページに埋め込む作業をした事がありました。
その時に「なるべく考え方を単純にして最低限のソースだけを扱う」と決めて作業をしました。それが功を奏し、比較的短い作業時間でサイトへの組み込み作業を終了させる事が出来ました。

MTでも同じ様に「最低限のソース」だけで作業すれば誰でもサイト制作に利用できる筈!と考えました。

下準備

ここでは「頻繁に更新の必要があるページの本文だけをピンポイントで更新できれば良い」という事にして話を進めます。

  1. MTで更新予定の部分以外の全てをあらかじめ完成させておきます。
  2. MTをサーバーにインストール。インストールが完了したらテンプレートを全て削除してしまうのがお勧め。とっておくと余計な混乱を招くので。
  3. テスト用で構わないので記事を一つ作成。記事のID番号を取得しておく(IDについては後述)。

組み込み

あらかじめ制作済みのサイト側で、MTで更新したいページの更新したいコンテンツ部分にMTタグを記述。記述内容は後述を参考に。
MTタグの記述を終えたらそのファイルをそのままMTのテンプレートにするのでファイル名を「mt_temp.html」とか分かりやすい名前にしてお く。

MTで更新する部分以外は通常通りに完成させてしまう

サイトをサーバーにアップロード。

MTのテンプレートメニューから「インデックステンプレート」を新規作成。テンプレートの設定部分から「ファイルへのリンク」で先ほどの「mt_temp.html」などのファイルを指定。出力ファイル名を実際のサイトで使用する名前を記述して保存する。

テンプレートとして制作したファイルを読込ませる

 

「サイト再構築」させる。再構築が終わったらテスト用に作成した記事の内容がサイトに反映されるかをチェック。

MTで更新したいページ分だけ名前を変えて同じ事を繰り返す。

と、一気手順をに書いてみました。わかり難いですかね?
一応ググリ易いように制作上のポイントになるキーワードを入れながら書いたつもりです。
  

完璧なCMSを作る事にはこだわらない

前述では説明を飛ばしたMTタグについての簡単に解説させて頂きます。

MTに初めて触って難しいと感じたりつまずいたりするのは多分制御系のタグ。
プログラムを書いている人にとっては何て事のないタグだと思いますが、苦手な人はここで尻込みしてしまう事もあります。

ならば思いっきり単純化して最初は<MTEntries>とその周辺で使うタグだけ覚えればいい事にすればグッと敷居が下がり、簡単に使えるようになりますよね。

例1:記事のIDを固定してしまう考え方

<MTEntries id="1">
<!--記事のタイトル-->
<h2><$MTEntryTitle$></h2>
<!--記事の内容-->
<$MTEntryBody$>
</MTEntries>

「IDが1の記事(MTEntries id="1")のタイトル(MTEntryTitle)と記事(MTEntryBody)」を表示するというだけの内容。

この作り方の特徴は

  • 更新したいコンテンツのエントリー画面は一つだけなので分かり易い

まぁこれだけなんですけど。
ではIDの解説です。

記事はそれぞれ固有の「ID」をもっています。エントリー編集画面(ブログ記事の編集画面)を開いている時にそのページのURLを見ると記事のIDが表示されています。複数のブログを作成している時はブログのIDも表示されます。

ちなみにこの記事のIDはURLに「id=53」と表示されています。
 記事のIDとブログのIDが表示されている

これは WordPressでも同じ様に特定の記事をID指定で呼びだすようにタグを入れていけば簡単に管理画面を利用して更新可能なWEBサイトが出来上がるわけです。

ID固定で表示させる

まあ、これは一番簡単な作り方で、急いでいる時にサイト全体の内の数ページでやった事があります。
実務で全ページこれだったら多分怒られます(笑)まかりなりにも数万円のライセンス料を支払ってMTを導入しているワケですからねぇ(苦笑)。
こういう作りで済ませてしまうならWordPressの方がいいですね。無料なんで。

例2:1コンテンツ1カテゴリーにしてしまう考え方

<MTEntries category="News" lastn="1">
<!--記事のタイトル-->
<h2><$MTEntryTitle$></h2>
<!--記事の内容-->
<$MTEntryBody$>
</MTEntries>

「Newsとういうカテゴリー(MTEntries category="News")の最後の一つ(lastn="1")」を表示するという内容です。

先ほどよりもうちょっとだけ機能性もたせたのがこの2番目の方法です。

こちらはこんな機能があります。

  • 過去記事を保存しておける
  • 記事の投稿予約が出来る(サーバー環境により左右されます)

先ほどの例1の時では「ID」を特定していましたが、今度はそれを「カテゴリー」にしているだけです。
このやり方にすると、現在表示させている記事の他に同じカテゴリーとして過去記事や公開前の記事を下書きとして保存して置けます。
この例では「test」というカテゴリーの記事の中で最新のものが一つだけしか表示されないのですが過去の記事に戻したい時などは新しい記事の「公開状 態」を未公開にすれば良いわけです。

特定カテゴリーの最新記事一件を表示させる

また、サーバーの都合で「cron」が使えるのならば予約投稿の機能を使って指定日時に記事を入れ替える事ができます。
先ほどよりもひとつ機能が増えました。
※cronとはunix系のマシンでコマンドを自動実行させるプログラム。実は使えないサーバーって多いんですよ。そんな時はほぼ指定日投稿なんてプラグインもあったりします。

この例では「lastn="1"」にしていますがコレを「lastn="5"」とかにして更に日付を表示させていくと通常のブログのような見た目になっていきます。

カテゴリーの使い方は工夫次第で面白いことが出来ますので慣れてきたら色々実験してください。

余談:パーツのモジュール化について

MTには「パーツのモジュール化」する機能があります。サイトを様々なパーツに分割して管理する方法です。
モジュール化は便利ですが、僕の場合それが必須だとは考えていません。

この記事では「MTで更新する部分以外は予め完成させておく」という前提で話を進めてきました。ということは基本的にサイトはほぼ完成しているので、無理にMTでパーツのモジュール化を進めてもただ仕事を増やしているだけですよね。
MTタグを積極的に使用して様々な条件分岐を施して出力させている場合、その部分に関しては当然MTでモジュールする必要があります。個人的にはそれ以外の部分はPHPでモジュール化(言葉は適切ではないかも知れませんが)した方が好きです。

理由は簡単。MTでモジュール化すると再構築が必要で、個人的は「かったるい」んですよ(笑)

まぁ自分の作りやすい方法で良い結果が出せれば好きな方法で制作してください。あんまりMTに囚われ過ぎて制作がスムーズにいかなくなると困りますから。

僕がMovableType(以降MT)のサイト構築をする際、必須事項にしているのがダッシュボード等の管理画面のカスタマイズです。
サイト運用者が直感的に運用できるようにする為、専用のメニューを付けてあげることでより運用が簡単になり、実用性が向上します。

MTの管理画面はMTタグによって作られています。
通常のページ作成時には使用されない特殊なタグが出てきたりもするのですが、そういう危なそうな部分には触らないようにして自分に分かりそうな部分をいじる程度でグッと使いやすいサイトに生まれ変わりますよ。

管理画面のテンプレートを直接いじくってもいいのですが、何か不具合が出た際にはデフォルトに戻したいですよね。その為、通常はalt-tmplというフォルダーに管理画面用の代替テンプレートを入れてあげる事でカスタマイズを行います。

alt-tmplの使い方

まず管理画面を構成するテンプレート類がMTをインストールしたフォルダーのtmpl/cmsに納められているので編集用に丸ごとコピーしておきます。
この中から編集したいファイルを選んで編集すればいいわけですが、一体どれをいじればいいのやら・・・
ってな感じになるはずですよね。ここでは僕がいつも使用するファイルを2つだけ紹介します。

  • edit_entry.tmpl(エントリー画面のテンプレート)
  • header.tmpl(ヘッダー画面のテンプレート「include」に入ってます)

僕はこの2つだけのカスタムにとどめています。あんまり手を広げすぎると収拾付かなくなりそうなので・・・。
これらのファイルに必要な変更を加えてMTをインストールしたフォルダー内にあるalt-tmplというフォルダーに入れてやるとalt-tmpl内のテンプレートに代替されます。

簡単な例

header.tmplの207行目辺りに次のような記述があります

 <div id="content-header"><div id="content-header-inner" class="inner pkg">

 この行の後に次の一行を加えてUTF-8で保存してサーバー内のalt-tmplにアップロードしてください。

<p>管理画面カスタム</p>

するとこんな感じで変化します。

alt_tempに追記した簡単な例

独自の変更が反映されたことが確認できました。
alt-tmplからファイルを削除すればデフォルトに戻ります。

管理画面のカスタマイズ方法を覚えるに当たって以下のサイトを参考に勉強させて頂きました。

The blog of H.Fujimotoさんの MTの管理画面カスタマイズの基本

また、もうひとつ踏み込んでカスタムを進めていくに辺り、Junnama Online(野田純生)さんのMovable Type管理画面の「壊れにくい」カスタマイズのために。という記事が参考になります。

先人達の知恵に感謝!

| トラックバック(0)

LightBoxの組み込み実験をしてみました。
以前にも「AutomatixLightBox-1.0」というプラグインを使用した事があるんですけど、ちょっと不具合が出ていたんで使用を中止していました。

今回は「to-R」さんで紹介したいたプラグインを使用してみる事にしました。
http://blog.webcreativepark.net/2008/05/19-235050.html
順調に動作はしていますが2010/03/08の時点で、このブログ上ではCloseボタンが表示されてないですねぇ・・・。

下のCGは実験用に引っ張りだした過去のCG作品です。
CGについての記事も、まぁ追々書いていく予定です。

 

fighter101-thumb-150x120-32.jpg 05zaku01.jpg

 

 

CloseボタンやNextボタンが表示されないのはこのブログのCSSとLightBox側のCSSがぶつかっているんでは?と考えてます。

また、記事単体のページでは動作していますがアーカイブページでは動いていません。


まあ後日修正予定です。

 

追記2010/03/08

to-Rさんのプラグインが動作しているのかと思いきや、「AutomatixLightBox」のほうが動作していました。
Closeボタンが表示されてないのは「AutomatixLightBox」の仕様ですかね?

「AutomatixLightBox」はプラグインとして導入すればすぐ使えるというスグレモノなんですが、僕のブログ使用したところ表示位置がおかしくなる事があったのです。

今回の記事内では大丈夫なようですが、LightBoxは様々なタイプもある事ですのでまずは色々試して見たいですね。

2010_03_04_RSS.jpg

このブログを作り始めた時からどうにもRSSの調子が良くないと思ってまして。
何故かFireFoxでうまく受信できなかったんですよ。

で、RSS配信用のxmlを作り直し、尚且つRSS2.0で配信する事にしました。
何故RSS2.0に?と思われるかも知れませんが、単純にWordPressで運用している方のブログがRSS2.0なので何となく安心感があって・・・というだけなんですけどね。

RSS2.0のソースを仕込む

今回の改造では「The blog of H.Fujimoto」さんのMovable Type 4.2以降でRSS 2.0のフィードを配信するという記事を参考にして作成を行いました。

まず紹介されているソースをそのまま使って動作検証。
何の問題もなく構築されると以下のようなxmlが生成されます。

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>ブログのタイトル</title>
        <link>ブログのURL</link>
        <description>ブログの概要</description>
        <language>言語は日本語</language>
        <copyright>コピーライト</copyright>
        <lastBuildDate>チャンネルの最終更新日時</lastBuildDate>
        <generator>チャンネルを生成したプログラムの識別名</generator>
        <docs>RSS2.0のドキュメントを表すURI</docs>
        <item>
            <title>アイテム(記事)のタイトル</title>
            <description>記事の概要</description>
            <link>記事のURL</link>
            <guid>ページのパーマリンク</guid>
            <category domain="特定の分類をあらわす任意属性(よくわからん)">アイテムが属するカテゴリ</category>
            <pubDate>チャンネルが構築された日時</pubDate>
        </item>
    </channel>
</rss>

ただそのままでは全文が配信される仕様になっているので、配信内容を変更する事にしました。

<description><$MTEntryBody encode_xml="1"$></description>

この部分を見ると一目瞭然、エントリーを全て吐出しています。 まあ別にこれはコレでいいんですけど。

<description><$MTEntryBody words="200" encode_xml="1"$>・・・</description>

一応200文字配信って事にしました。
200文字の後に「・・・」が付くようにしてますけど、これは乱暴な書き方ですよねぇ。
本来ならちゃんと文字数をカウントさせて200文字以上なら「・・・」を付け、それ以下なら付けないってのが正しいです。

まあ、そこは後日やります・・・。

RSSの仕様について

今回RSS配信用ソースを仕込むにあたって「RSSの仕様って本当はどうなってるんだろう?」と思い、調べてみました。


参考にしたのはこちら

http://wiki.koshigoe.jp/doku.php?id=koshigoewiki:feed:rss2.0%E4%BB%95%E6%A7%98
ちゃんとジャンプできるかわからないのでトップページのURLも貼っておきます。
http://wiki.koshigoe.jp/doku.php?id=

 もう一つ参考サイト
http://memorva.jp/memo/api/rss.php

各オプション、item要素についてはこちらを参考にしました。
http://blog.koshigoe.jp/archives/2005/05/rss20.html

以外と配信内容を選択できるんだな、と思いました。
まったく使いそうにないオプションも結構ありますが。 

おまけ

記事の先頭にある画像は何となくRSSの大きな画像を作りたくてRSSアイコンの良さげなものを探してきて素材として使用させて頂きました。

情報はこちらのブログより頂きました。感謝!
http://kawaguchi.wonder-mix.com/2007/06/21-103018.html

1
2011年6月

ウェブページ