ようやくネットも繋がって、久しぶりのエントリー。

FICC代表取締役社長、荻野英希のブログ「I AM BLOGGING NOW.」を制作しました。「I AM BLOGGING NOW.」はFICC代表取締役社長 荻野英希の考えを知ることが出来るブログです。WEBプロモーションやブランディング等についても書かれており、FICCにおけるリアルタイムなWEBプロデュースのプロセスの一部を垣間見ることが出来ます。こういうブログ、意外と見当たらないのでとても参考になるのではないでしょうか。

制作は3月頃に行ったのですが、ちょうどDWCS3のMT4.1用の拡張機能が出たので、それを使った外部テンプレートで構築しました。作業効率がかなりアップ、便利です。
また、記事に関連したFICCのワークスを表示する機能を、現存のFICCで使用するMTと絡ませて実装しました。本来なら複数ブログとして管理したいところですが、MT3とMT4とで互換性が無い様なのでXMLとJSで実装。使用したのはSPRYです。ライブラリを使用するほどたいそうな事をするわけではないのですが、今後の拡張や他での活用も考え使ってみました。今回のブログでは十分に機能を活用していませんが、XMLを使ってソートや検索等、管理がかなり便利です。

MTのお話です。最近久しぶりにMTを触っていて参考になった事を2つ。

• その1：カテゴリーやアーカイブでも全体の最新エントリーを一覧表示させる

<MTArchiveList archive_type="Individual" lastn="5">
<ul>
    <li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
</ul>
</MTArchiveList >

• その2：月別アーカイブのページで月別アーカイブをリストアップ出来ない

<MTIfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly">
<MTArchiveListHeader>
<ul>
</MTArchiveListHeader>
    <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> [<$MTArchiveCount$>]</a></li>
</ul>
</MTArchiveList>
</MTIfArchiveTypeEnabled>

このblogで使用しているプルダウンメニューについて簡単に。
カテゴリーとアーカイブを省スペースでまとめ、デザインの中にうまく溶け込ます。かつ、ページ遷移した際は選択内容を維持する事でより機能的なナビゲーションを目指しました。フォームのデザインにはjQueryのプラグイン、NiceJFormsを使用しています。(使用例) NiceJFormsをダウンロードし解凍すると、中にhtml、css、imgが入っています。htmlの<select size="1" id="mySelect1" name="mySelect1" class="width_320">の部分とcssとimgを修正することでフォームの変更が可能です。NiceJFormsでデザインを変更した後、プルダウンメニューにリンクを持たせるのにJavaScriptを使ったMM_jumpMenu()と組み合わせようかと考えました。しかし、試してみたところ動作せず...。どうやらMM_jumpMenu()で使用しているfromのoptionsを、NiceJFormsでも使用しているのでオーバーライトしている模様。どうしようかと困った所でniceforms.jsの397行目からのプルダウンのoptionsに関する記述を見てみると

$(jQuery.NiceJForms.selects[q]).children().each(function(w){
    var optionHolder = document.createElement('p');
    var optionLink = document.createElement('a');
    var optionTxt = document.createTextNode(jQuery.NiceJForms.selects[q].options[w].text);
    jQuery(optionLink)
        .attr({href:'#'})
        .css({cursor:'pointer'})
        .append(optionTxt)
        .bind('click', {who: q, id:jQuery.NiceJForms.selects[q].id, option:w, select:q}, function(e){self.showOptions(e);self.selectMe(jQuery.NiceJForms.selects[q].id, w, q)});
    jQuery(optionHolder).append(optionLink);
    jQuery(optionsDiv).append(optionHolder);
    //check for pre-selected items
    if(jQuery.NiceJForms.selects[q].options[w].selected) {self.selectMe($(jQuery.NiceJForms.selects[q]).attr("id"), w, q);}
});

var optionLink = document.createElement('a');というリンクに関する記述を見つけました。しかしここの部分、.attr({href:'#'})と、リンクの設定はなされていない様子。そこで、 optionsのvalueにリンクを持たせるよう書き換えてみました。

$(jQuery.NiceJForms.selects[q]).children().each(function(w){
    var optionHolder = document.createElement('p');
    var optionLink = document.createElement('a');
    var optionTxt = document.createTextNode(jQuery.NiceJForms.selects[q].options[w].text);
    var optionValue = jQuery.NiceJForms.selects[q].options[w].value;
    jQuery(optionLink)
        .attr({href:optionValue})
        .css({cursor:'pointer'})
        .append(optionTxt)
    jQuery(optionHolder).append(optionLink);
    jQuery(optionsDiv).append(optionHolder);
    //check for pre-selected items
    if(jQuery.NiceJForms.selects[q].options[w].selected) {self.selectMe($(jQuery.NiceJForms.selects[q]).attr("id"), w, q);}
});

リンクを持たせるので、必要の無いclickは外します。あとはMTのテンプレートで、valueにリンクを持たせてあげ、でリンク先ではセレクトされた部分が表示されるように、それ以外ではで---が表示されるようにしました。

<MTIf name="category_archive">
<option value="<$MTCategoryArchiveLink$>" selected="selected"><$MTCategoryLabel$></option>
<option value="">---</option>
</MTIf>
<MTUnless name="category_archive">
<option value="" selected="selected">---</option>
</MTUnless>

このBlogでは、今紹介したプルダウンメニュー、ラジオボタン、チェックボックスでのみNiceJFormsが動作するよう修正してあります。なのでサーチやコメントは主にcss。NiceJFormsのテキストエリアの使い勝手があまり良くなかったので。JavaScriptが有効じゃないと動作しないという制約はありますが、ブラウザによって見え方が大きく変わるformを、どのブラウザでも共通したデザインに変更できるのは大変魅力的です。試してみる価値はあるのでは無いでしょうか。

その他のjQueryプラグイン ご参考までに

• ThickBox
  Light BoxのjQuery版。画像以外の表示も可能なので応用が利きます。他のライブラリと混ぜて使うにはソース内の$()をすべてjQuery()に書き換えるそうです。
• jCarousel
  コンパクトなフォトスライダー。バリエーションが豊富で、かなりカスタマイズされています。ThickBoxとの連携もあるので、小さく設置し、大きく見せることも可能です。
• slideViewer
  スライドピクチャーギャラリー。選択中のボタンの切り替えにも対応しています。
• jQuery Flash Plugin
  SWFObjectのjQuery版。sIFRも出来る。試してみたいと思っています。
• Stylesheet switcher
  スタイルシートの切り替え、jQuery版。
• jQuery: Plugins
  jQueryのPlugins一覧


• jQuery UI
  その外に新しいウィジェットライブラリ。まだ開発段階ですが、今後、これを使ったWebアプリケーションの開発が期待できそうです。

• Interface Elements
  jQuery基本上乗せライブラリ。
• Emotional Web 「Interface.jsで簡単スムーススクロール」
  スクロールの実装にはこちらを参考にさせて頂きました。ありがとうございます。

このblogで使用しているようなswfでイメージを観覧できる機能を、どのような手法でMTに実装したかを質問される機会があったので、簡単に紹介したいと思います。

ひとつのswfを共通で使い回すには、それを区別する情報をswfに与える必要があります。このblogではswfにとって区別に必要となるエントリーの情報の生成をCustomFieldsで、htmlからswfへ情報を変数として受け渡すにはSWFObjectを使用しています。
CustomFieldsで生成した新たなテンプレートタグ、そのタグに与えた情報はエントリーのID、画像の枚数、画像の高さと幅の4点です。画像の高さと幅は、固定にしてしまえば無くて構いません。私は可変にしたかったので。枚数もswf側で処理すれば無くて構いませんが、重要なのはエントリーIDです。このIDを画像の番号に振り分けることで、swfと画像を確実にリンクさせます。エントリーIDで分類するので、画像の名前が被る事はありません。私は"エントリーID_画像の番号.jpg"として、全てのエントリーに対する画像をひとつのフォルダにまとめました。管理もしやすく、絶対パスでの表記が出来るので、blogのページ構造に左右されることがないからです。また、SWFObjectで<div>で囲ったclassにアクセスする際、どのclassをswfで上書くのか指定するのにも役立ちます。(classにID番号を割り当て、上書くエリアが被らないようにするということ)

<div id="SWFObjectで上書くdiv class名と<$MTEntryID$>">
//対応のplayerが無かった場合は1枚目の画像を表示
<a href="<画像に持たせるリンクを持たせるためのMTEntryタグ>"target="_blank"><img src="blogのイメージフォルダまでの絶対パス/<$MTEntryID$>_1.jpg" /></a>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("swfのパス","","<swfで加算される幅を考慮した画像幅のMTEntryタグ>","<swfで加算される高さを考慮した画像高さのMTEntryタグ>","8","#000000");
so.addParam("menu","false");
so.addVariable("imagesNum", "<画像の枚数MTEntryタグ>");
so.addVariable("entryID", "<$MTEntryID$>");
so.addVariable("siteLlink", "<画像のリンクMTEntryタグ>");
so.write("SWFObjectで上書くdiv class名と<$MTEntryID$>");
// ]]>
</script>

実はこの方法を試す前に、各エントリーに対しエントリーIDの名前の付いたxmlを書き出し、そのxmlから画像の情報を取得する方法で制作していました。単純に情報の外部読み込みといったらxmlだと思ったからで。その方法でもうまくいったのですが、swfをSWFObjectで貼り付ける段階でSWFObjectに変数を持たせるだけでいいのでは？という事に気づいてしまいました。おそいって...もし各画像に対する情報などを持たせてあげるのであればxmlで良かったのですが。
そのとき思ったことがひとつ。xmlを使った場合エントリーに付随する形でxmlを吐き出すので、画像の表示が必要無かった場合もxmlを吐き出してしまうことになります。情報のないxmlまで吐き出してしまうのは無駄なので、吐き出すxmlには別な用途で使える写真以外の情報でも入れようかと考えていましたが...もっとシンプルな方法がありそうな...ひとつのxmlじゃ重たくなるし...なんだろ。