Life

久しぶりの更新が新年のご挨拶ってどういうことよ

2009nengajo

あけましておめでとうございます。
札幌はずいぶんと穏やかなお正月です。

昨年は公私共、
多くの方々のお世話になり無事に2008年を過ごすことができました。
今年もカスタマイズ職人、WebbingStudioを何卒宜しくお願い申し上げます。

この年賀状は、
実際に今年(というかつい昨日 汗)発送したものです。

Illustratorで4時間くらいで描いてます。
これについても、いずれ記事にするかもしれません。

…うぇびんぐにブロガーの神が降りてきたら

。・゜・ ノД`)・゜・。 スイマセーン

Life

ワーキングプアな白袴の紺屋

先月後半あたりから凄く忙しくなり、週の半分徹夜という生活をしております。
一ヶ月先まで予約的な何かがびっちり入ってますし。
しかもロングスパンのお仕事ばかりで納品にならないという…^^;

このブログも、11月になったのでハロウィンから変えたいんですが
何とか休みを取った今日、できなかったら無理かもー;;

お客様に
「MovableTypeのデフォルトテーマになりそうな悪い予感がします」
とメールに書いたところ

よく、紺屋の白袴といいますから確かにそんなものかも。

とお返事が来ました。

こうやのしろばかま。

と聞くとかっこいいのですが、Webに従事する人間にとって「サイトを更新しない」というのは、その後のお仕事やスキルにも、もろに影響してしまいます。

紺屋のはかまが白くても恥ずかしいだけだし、
医者が不養生で入院しても頑張って職場復帰すればなんとかなりますが、
Webクリエイターは、自分がWeb制作で得たことを書き留めたり、サイトの見栄えを変えることを定期的に積み重ねていかないと、あっという間に置いていかれてしまうのです。

めでたさを自分のために手に入れるにはどうすればいいか。宮崎駿さんがある講演会で言っていた、同じことを言わせてもらいます。「自分が手の届く範囲のことを一生懸命やることが一番の宝だ」というのは本当だと思います。年寄りの忠告になるんですけど、それを信じてやってほしい。どういうことかというと、男の人に特に言うが、エロサイト見てる暇あったら自分の技量を磨け。

「お前らの作品は所詮コピーだ」――富野由悠季さん、プロ論を語る (4/5)

言い得て妙ではないですか。

まぁ、昨日の晩「涙がでちゃうコピペ」見て小一時間くらいうるうるしてしまったのですが。

J(´ー`)し カーチャンに親孝行しなきゃねえ…

でもたぶん仕送りの方が喜ぶ ノД`)

CMS

MovableTypeカスタムフィールドの、filtersの動作について

Movable Type のカスタムフィールドで「テキスト(複数行)」という種類のフィールドを利用する際、テキストエリアへの入力内容に改行や空行を含めても、出力される文字列の改行や空行はすべて除去された状態で出力されてしまいます。

本エントリーでは、この事象を解消する方法を紹介します。
小粋空間:カスタムフィールドのテキストエリアに入力した改行をページに反映させる

mtformat

複数行のカスタムフィールドを、本文と同じように<p>と<br />でマークアップするには、「filters="default"」モディファイアを指定するのが良いとされています。

ですが、この方法では詳細に改行を制御できません。
旧来からあった「convert_breaks」モディファイアとどう違うのか、というのも気になりますが、シックスアパート社からも詳細な解説は出ていません。

MovableType4.2で、「改行を変換」「リッチテキスト」などの各フォーマットでのカスタムフィールドの挙動を、詳しく検証してみました。

結論から言うと、
「複数行カスタムフィールドの改行や空行は、再構築時に反映されない」
という解説は、MovableType4.2においては正解ではありません。

複数行カスタムフィールドにモディファイアを何も指定しなかった場合は、「各記事の本文・追記に指定したテキストフォーマット」が優先されるのです。

なので、IDが1の記事のフォーマットが「改行を変換」ならば本文と同じですが、IDが2の記事で「なし」や「リッチテキスト(WYSIWYGエディタ含む)」に変更すると、本文フォーマットが優先され、改行がなくなってしまいます。

MovableType4は後者のフォーマットで使っている人が多いために、上記のような定説ができたのか、バージョン4.0、4.1の挙動が違ったのかはちょっとわかりません。すいません。

mtformat2

なので、何らかのモディファイアでカスタムフィールドの書式を縛ることになるのですが、
一般に推薦される「filters="__default__"」は
完全に固定的なものではありません。

まれなケースですが、フォーマットを「markdown」にしたときのみ、<br />が書き出されず、意図した表示になりません。
また、

  • 「どんなフォーマットを使用しても改行を変換させない」
  • 「<p>はいらないが<br />は変換したい」

ということは、「filters="__default__"」ではできません。
(引数の__default__を別の値にする方法も考えられますが、MovableTypeのコアファイルを調べてもわかりませんでした)
この場合は、昔からあった「convert_breaks」を使用するのが確実なようです。

convert_breaksモディファイアは、本文でのテキストフォーマットを「常に無視」します。
また、「convert_breaks="0"」で、改行を変換させないようにできます。

<br />のみを変換する「nl2br」もconvert_breaksと同じ性質を持っているので、
ちょっと複雑になりますが、下記のようにすると<br />のみ有効になります。

<$mt:CF_HogeHoge convert_breaks="0" nl2br="1"$>

自分だけがブログをカスタマイズ・運用している場合や、カスタムフィールドが本文の一部であればフォーマットが変わっても良いのですが、
大抵のカスタムフィールドは特定のマークアップを行った箇所に出力したり、テーブルのセル内に出力したりと、イレギュラーな使われ方をします。
同じカスタムフィールドでも、出力先のテンプレートによって改行の個別制御が必要なこともあります。

「更新したときの気分」でフォーマットが変わってしまってはのちのち面倒ですし、CMSとしてMovableTypeの構築をする場合は、更新担当者のあらゆる設定変更を想定しなければなりません。

プログラミングにも通じることですが、的確なグローバル・モディファイアを指定することで、想定外の不具合をできるだけ予防しておきたいものです。

CMS

MovableTypeのMTVarまわりで変わったリストを作る

mt-entrylist

先日、MovableTypeで図のような、各カテゴリーのリストが左右二段になり、連番を振ったサイトマップを作りました。

HTMLだと、このような感じです。

※数字もデザインしたかったので、olではなくulでコーディングしています。
olだった場合、連番の代わりにstart属性を与えることになります。

一般に横並びのリストの場合、普通にリスティングしてから、それぞれの<li>要素をCSSのfloatで流すのですが、それだと視線が左右に流れて、あまり見通しが良くありません。
サイトマップがトップページになるデザインだったこともあり、もっと工夫して、新しいパターンを考えたいと思ったのです。

リストを作るにあたって、以下のように考えました。

  1. 出力される件数を調べる
  2. 件数を2で割る
  3. 剰余(1)が出たら前半のリストの件数に加える
  4. 二回に分けてリスティング
  5. 併せて通し番号も振る

PHPを使って、前もって配列にリストを入れ込めばそんなに難しい処理ではありません。
ですが、静的ページへの出力を考えて、できるだけMovableTypeのタグだけでできないものかと思いました。


結局、できたのがこれです。

※改行と、MTIgnoreのコメントを加えています
※2009/01/08 mtIfNonZeroのtagモディファイアを間違って書いてたので修正

興味がある方は、上のをコピペして、実際に試してみてください。

うーん…
MTVarだけで処理しようとすると、複雑すぎます…(´~`;

MovableTypeは4.1以降、配列が登場するので、出力結果を配列に入れ込んで__loop__で繰り返し処理する方法があったかもしれませんが、リストを半分に割ってオフセットしなければならない点は変わりません。

MTIfのtestモディファイアを使うと、Perlの式での条件分岐ができます。
それをうまく利用すれば、前半の計算はいらないかもしれません。

見た目の割に複雑なことはしていないので再構築のパフォーマンスが悪くなることはないのですが、拡張性を考えるともっと改良が必要みたいです。

Webdesign

北海道開発オフ:jQueryでスマートなブログを考えてみる

北海道開発オフへ行ってきました。

ノートパソコンを持参して参加したはじめての勉強会。なのに、肝心のOSが真っ青な画面になってしまって動きません…
買って一ヶ月しか経ってないんですけど@@;

PHPを勉強するつもりだったのですが、仕方なく予定変更。
会場(@smokeymonkeyさんの会社)のパソコンからMovableTypeにアクセスして、やや仕事がらみの開発をすることになりました。


ときどき、ウェブサイト的なワンカラムレイアウトのブログ構築をすることがあります。
ワンカラムは目に入る文章量が少なく、ブログ的なデザインを打ち破れるのですが、各記事を移動するときにいちいちページの読み込みが発生してしまいます。

最近勉強している、jQueryを利用して、デザインもインターフェースもスマートなブログが作りたいなーと考えてみました。
(もう既出だろうけど、開発オフなのでそこは無問題 :P)

結局今日は、MovableTypeとjQueryでこんなものができました。
(ソースをコピーして、静的HTMLに直しています)

http://webbingstudio.com/souvenir/jquery_test/

メインカラム下に、JavaScriptが有効にならなかった場合のページへのリンクも貼ってあります。お暇な方は比較してみてください。

今回は右下にすぽーんと投げ捨てるようなページ切り替えになっていますが、jQueryはアニメーションの追加ライブラリが豊富なので、柔らかいフェードイン・フェードアウトや、MacOSX風ぐるりん切り替えなんかも良さげ。

現段階ではほんとうにさわりだけで、しかもFirefoxでしかチェックしてませんwww
Ajaxでの過去ログ読み込みもつけることも考えると、シンプルな見た目の割になかなか難儀そうです。また時間があるときに考えてみます。

余談ですが、ノートパソコンは帰宅後再起動したら何事もなかったように直ってました。
お昼の、9月下旬とは思えない残暑で熱にやられてしまったのか、中古なだけに実は内部がぶっ壊れる寸前なのか…
まめにバックアップ取って、仕事の重要なファイルは入れないように気をつけなくちゃです。