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

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を使ってソートや検索等、管理がかなり便利です。

この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で簡単スムーススクロール」
  スクロールの実装にはこちらを参考にさせて頂きました。ありがとうございます。