JavaScript

http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/

相変わらず、SMASHING MAGAZINEはネタが豊富。

CSSやJSを利用したナビゲーションの面白いアイデアが掲載されています。
どれも個性的で、デザインだけでなく動作も洗練されているので、応用しだいで素敵なナビゲーションデザインができそう。

http://www.tomcoote.co.uk/JavaScriptCookieCrumbs.aspx

（http://coliss.com/articles/build-websites/operation/javascript/693.htmlで紹介されていた）

ユーザーが辿ってきたページの経路履歴をクッキーに保存して、その経路をパンくずリストとして書き出すタイプ

http://www.mtblue.org/pc/web/breadcrumbs.php

ディレクトリの構造を取得して、上の階層へ辿るリンクをパンくずリストとして書き出すタイプ

 

色々ありますな。

http://www.jgari.com/?p=22

JQGRIDは、jqueryでリッチなグリッドが実装できる。

http://www.sigmawidgets.com/products/sigma_grid2/index.html

Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェア。（データの表示に際してJSONでデータを渡す必要がある。）

参考サイト：http://www.moongift.jp/2008/11/sigma_grid/

まずカラムごとにソートができる。これは小数点や桁数をきちんと解釈した上でソートされる。セル内のデータを編集することはもちろん、ライブでバリデーションも行われる。編集されたカラムは色分けされて表示される。

テーブルについては大きさを変えることができる。さらにカラムの幅を変えることができ、長い文章の場合は「…」で省略してくれる。ページネーションにも対応し、簡易グラフ表示や印刷機能もある。

まだまだある。セルに画像やリンクを付けることができ、それはヘッダにも使える。ヘッダはグルーピングして多段にでき、ヘッダの下にテキストボックスやドロップダウンを配置（一括更新用！）もできる。フィルタリングを使ってテーブルデータを絞り込む機能があり、テキストのみならず数字に対しては以上以下といった条件指定ができる。

まだまだまだある。カラムはドラッグで移動させることができる。スキンに対応し、Vista風や中華風といったテーマが付属している。セル間における計算結果を表示する、イベント処理を感知する、メニューをつける、マウスオーバーでハイライトする、行の追加や削除処理にも対応するなどなど…とにかく多機能すぎて書ききれないほどだ。ああ、そうそう。左側のカラムを固定表示にすることもできるのだった。IDや会社名を固定に、横に長いデータをみる場合に絶賛の機能だ。

http://www.ajaxdaddy.com/

AJAXライブラリがカテゴリごとに分類され、サンプルもあるので、比べたり吟味しながら、欲しいライブラリを探せる。

http://www.freerichtexteditor.com/

 

【参考】その他のWYSIWYGエディタ色々
http://blog.webdistortion.com/2008/03/09/9-of-the-best-rich-text-editors-reviewed/

http://codezine.jp/article/detail/2907

『CodeZine』にて、「サンプルアプリケーションを作成してjQueryの概要を理解しよう」という趣旨の記事を見つけた。

jquairyは、最近WEB開発でリッチなインターフェイスを実装しようとすると、いつも出てくるけど、いざ、これって何よ？ってことになると、？だったりする。
この記事で一通りの知識を身につけておきたいところ。

jQuiryを使うと、

 $(“#sampleDiv”).css(“margin-top”, “35px;”);

なんてコードで、CSSをインタラクティブに書き換えたり。

ぜひ、お勉強して、カッチョイイページを作ってチョウダイ。

http://sixrevisions.com/javascript/promising_javascript_frameworks/

jQuaryは既にみんな使ってますねぇ。
JSが好きな人やコーダーの人は、JSのフレームワークは色々面白いものを探して活用しているよう。
こういうのを集めておくと、何かインタラクティブな仕掛けをしたいサイトのときに、とても役立ちそう。（とか言いつつ、たまっていくだけのネタ帳；）

http://snook.ca/archives/javascript/jquery-bg-image-animations/

こちらは、デモページ。

http://snook.ca/archives/javascript/jquery-bg-image-animations/

滑らかな動作で面白い効果が色々ある。
ナビゲーションをちょっとデザインしたいときなんかに良いね。

その他のjQuiryとかCSSを使ったアニメーション効果色々。

• Create a Cool Animated Navigation with CSS and jQuery [nettuts.com]
• CSS Sprites2 – It’s JavaScript Time [alistapart.com]
• Animated navigation items using jQuery [tyssendesign.com.au]
• Garage Door Style Menu [css-tricks.com]

LIGHTBOXというのはJAVASCRIPTで、要は画像のポップアップとかに使うわけだけども、クールなインターフェイスでなかなかカッコイイのですな。複数画像をグループ化して、フォトギャラリーみたいなスライドも出来る。

1. 『ゼロからはじめるLightbox 2.0 – 簡単にWebで写真アルバム機能を
   http://journal.mycom.co.jp/articles/2007/06/14/lightbox/
   LIGHTBOXの概要と使い方が分かりやすくまとまっている。
2. 『Lightboxスクリプトいろいろ』
   http://www.designwalker.com/2008/01/lightbox.html
   スクリプトサンプルとか。
3. Ｌｉｇｈｔview
   http://www.nickstakenburg.com/projects/lightview/
   デザインが素敵なブランチ版
4. 2.0をちょっと改造したひと。
   http://www.fsiki.com/jet/css-xhtml/lightbox-js-v2.html

こういうのが、色々あると、WEBのデザインインターフェイスもたのしいですね。

よくわけが分からないタイトルになってしまったけど。

ECの商品の詳細ページで、メインの画像が1つあって、その他に詳細画像が3つあり、それらをマウスオーバーでメイン画像と入れ替えて大きく表示できるようにしたいとき使う。

【JavaScriptのソース】

「imagechange.js」（名前はなんでもいい）と名前をつけて、保存。

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

【HTMLのソース】

１）JavaScriptへのリンクを<head></head>に入れるか、<body></body>の一番上に入れる。

<script type=”text/JavaScript” src=”【JSへのパス/】imagechange.js”></script>

もしも、JavaScriptを別ファイルで保存することが出来ない場合は、

<script language=”JavaScript” type=”text/JavaScript”>【この間に上記のソースを入れる】</script>

として、同じようにロールオーバーを使用するページのHTMLの<head></head>に入れるか、<body></body>の一番上に入れる。

２）商品の詳細画像を並べるコードを利用したいところへ入れる。　

<!– 商品メイン画像 –>
<img src=”<【メインイメージへのパス】>” class=”mainimg” name=”mainimg” />
<!–// 商品メイン画像 –>
<!– 商品詳細画像 –>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【1つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【1つ目の小さい画像へのパス】” alt=”詳細イメージ１”  name=”img_s01″ /></a>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【２つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【２つ目の小さい画像へのパス】” alt=”詳細イメージ２”  name=”img_s02″ /></a>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【３つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【３つ目の小さい画像へのパス】” alt=”詳細イメージ３”  name=”img_s03″ /></a>
<!–// 商品詳細画像※3つ以上増やしたい場合は、<a></a>までを1組コピーして番号を変えればOK –>

 

作成したJavaScriptと画像ファイルを、コードで指定したディレクトリへFTPでアップロードする。

 

カラーミーショップなどのASPでは、商品の画像パスなどは、商品登録するときに自動的に生成されるため、パスを指定する際に、その画像やリンク箇所へのパスを変数で取得する必要がある。
また、テンプレートに制限があったり、FTPが使えなかったり、などで、JSを別ファイルにできないこともある。

以下、カラーミーショップの設置例。

管理メニューの『お店をつくる』→『デザイン設定をする』から、テンプレートを選び、『デザイン設定』ボタンをクリック。

１）1番目の共通テンプレートの『HTML CSS 編集』ボタンをクリックして、HTMLの編集画面を開く。
HTMLコードの一番上に、

<script language=”JavaScript” type=”text/JavaScript”>
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

を追加し、『更新」ボタンを押して、保存。

２）4番目の商品詳細テンプレートの『HTML CSS 編集』ボタンをクリックして、HTMLの編集画面を開く。
メイン画像とオプション画像のコードをロールオーバー用に書き換える。

例えば、プレーンの場合であれば、L13からL28までを下記のように変更して『更新』。

<div style=”margin-bottom:10px;”>
 <{if $product.img_url != “”}><img src=”<{$product.img_url}>” class=”large” name=”large” /><{else}><img src=”http://img.shop-pro.jp/tmpl_img/13/now200.gif” class=”large” name=”large” /><{/if}>
</div>

<!– 商品画像その他 –>
<div>
<{if $product.ot1_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot1_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>” alt=”詳細イメージ１”  name=”img_s01″ /></a><{/if}>
<{if $product.ot2_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot2_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot2_url}>” alt=”詳細イメージ２”  name=”img_s02″ /></a><{/if}>
<{if $product.ot3_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot3_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot3_url}>” alt=”詳細イメージ３”  name=”img_s03″ /></a><{/if}>
</div>

例２。
その他、下記のようにDIVタグやSPANタグのクラスを使ってマーキングしておくと、画像の並びや背景のデザインをCSSで調整できる。

<div class=”detail_img clearFix”>
<!– 商品メイン画像 –>
 <{if $product.img_url != “”}><img src=”<{$product.img_url}>” class=”large” name=”large” /><{else}><img src=”http://img.shop-pro.jp/tmpl_img/13/now200.gif” class=”large” name=”large” /><{/if}>
<!–// 商品メイン画像 –>
<{if $product.ot1_url != “”}>
<div class=”smallimg”>
<{if $product.ot1_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot1_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>” alt=”詳細イメージ１”  name=”img_s01″ /></a><{/if}>
<{if $product.ot2_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot2_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot2_url}>” alt=”詳細イメージ２”  name=”img_s02″ /></a><{/if}>
<{if $product.ot3_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot3_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot3_url}>” alt=”詳細イメージ３”  name=”img_s03″ /></a><{/if}>
</div>
<span class=”checkred”>＊マウスを重ねると拡大します。</span>
<{/if}>
</div>

大体こんな感じで。もし、マウスアウトしたときに、自動的に元の画像に戻って欲しくない場合は、onmauseoutの記述部分を削除すれば、OK。（onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>”　←この部分。）

http://www.deensoft.com/lab/protochart/index.php

JavaScript（PROTOTYPE.JS）で図のようにグラフィカルでインタラクティブなグラフが描けます。

オープンソースのコードがダウンロードできます。

http://www.nickstakenburg.com/projects/prototip2/

ツールチップは、リンクにマウスオーバーすると、ぽこっと小さく説明が出てくる、そう、あれです。
フォームの入力注意書きやヘルプなんかにも使えそうですね。
結構なバリエーションがあるので、見ているだけでも面白いです。

【その１】
NETTUTS – Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

AJAX＋CSSでメニューが縦に展開します。同一ウインドウでコンパクトにコンテンツを魅せたいときに。
デモあり。

【その２】
JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」

こちらもAJAX＋CSSのアコーディオンメニューですが、横に展開します。＆うにゅーんとゴムを引っ張ったようなスムーススライドです。

【その３】
The CSS-Only Accordion Effect – CSSnewbie

こちらは、CSSのみで実装のアコーディオンUIです。解説も細かく（英語だけど）勉強にもなりますね。

【その他】

• Easy Scroll v1.0 – Unobtrusive content scroller
• Accordion v2.0
• NYOKIGLITTER – Tab Styled Accordion
• NETTUTS – Web development tutorials and links – Create a Cool Animated Navigation with CSS and jQuery
• woork: Using CSS and Mootools to simulate Flash horizontal navigation effect

コンセプトは、同じですが、こんなに色々なデザインや動きがあるのね、ってくらい、色々あってどれも面白いです。

http://www.virtual-gadjo.com/mooVRotatingMenu.php

マウスカーソルを合わせるとクルクル回転するメニューが作れます。
こちらの動きも洗練されていて美しいです。

http://www.coswest.com/c/jquery/carousel3d/

http://abeautifulsite.net/notebook.php?article=58#overview

折りたたみが可能なツリー構造を表示できる。

jQueryプラグインとして動作。
IE6/7, FF2/3, Safari3, Opera9 で動作確認。

kweansphere

単なるタブＵＩではなく、ページの切り替えにスライドアニメーション機能を加えたというもの。
利用にはjQueryが必要。

 toInlineCSSDoCoMo.tar.gz

HTML::DoCoMoCSS　（こっちは元になったPERL版）

 http://ke-tai.org/blog/2008/07/09/toinline/　（記事はこちら：KE-TAI.ORGさん参照） 

インストールは簡単。

# pear install HTML_CSS

で、必要なPEARライブラリをインストールして、ダウンロードしたファイルを展開するだけ。
中に入っている「sample.php」にアクセスすれば、サンプルが表示されるらしい。

require_once ‘../lib/toInlineCSSDoCoMo.php’;

$document = file_get_contents(‘sample.html’);
try {
echo toInlineCSSDoCoMo::getInstance()->setBaseDir(‘./’)->apply($document);
} catch (RuntimeException $e) {
var_dump($e);
} catch (Exception $e) {
var_dump($e->getMessage());
}
?>

以下、仕様の説明。（ゆどうふブログさん（http://d.hatena.ne.jp/Yudoufu/20080709/1215626811）

toInlineCSSDoCoMoの仕様なんですが、はてブとかで「外部参照をインライン化」だと思ってる人とかがいるみたいなので言っとくと、外部参照だけじゃなくて内部参照のsytleタグもよしなにパースしてくれます。

外部参照やstyleタグ指定が複数あってもそれらを全てsytle要素に突っ込んでくれるので、定義が多段になってる状態でもきちんとできます。sytle要素が個別に定義してあるタグでも、ちゃんとマージします。

無論、class指定が複数記述してあっても、*1全部適用します。
 

また、パースし終わった外部参照・内部参照のlinkタグ・styleタグは除去されるので、通常ブラウザベースで開発を行っていても、ざっくりとしたデザインの確認に支障が出ることはありません*2。(除去されないと、専用エミュレータか実機での確認が必要)*3

あと子孫セレクタとかその辺は、結構ちゃんとやってくれます。ただ、ブログにも書いたとおり疑似クラスはa:link,・・・の4つしか対応してません。

一応、それらの疑似クラスは全部内部参照としてCDATAつけてstyleタグに突っ込むようになっています。*4

それ以外はDoCoMoではどのみち無効ということもあって無視しています。

このあたりは、携帯のCSSだし、元々あんまり使ってる人いないようなので、ひとまずざっくり仕様で。

ホームページ制作・運営のヒント(http://ceo.sourcelab.jp/archives/97)

JavaScriptでフリガナを自動入力させることができます。
フォームの入力で漢字いれてフリガナ入れてって、結構面倒です。 

■設置の仕方
以下の2つのJavaScriptをダウンロードしてください。

prototype.js （ダウンロードページ）
auto_ruby.js　（ソースそのままダウンロード）

Head内に読み込みます。
<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”auto_ruby.js”></script>

名前のフィールドのidを[name]に、フリガナのidを[ruby]にします。
ただし、フォームのあるページはUTF-8のみの対応です。
（読み込み時 charset=”Shift_JIS”で対応出来る？）

※auto_ruby.jsの上の方に、設定項目があります。
「ふりがな（ひらがな）」で表示したい場合は、var convFlag = 0;
「フリガナ（カタカナ）」で表示したい場合は、var convFlag = 1;
にして下さい。

サンプルファイル(ZIP)