javascriptによる開発も複雑化されてきたので
javascript開発の複雑化・大規模化が進むということは、
より洗練されたコーディングが必要なわけです。
そんなわけで、抑えておきたいポイントがこれ。
javascriptはプロトタイプベースオブジェクト指向言語なので、
クラスベースの言語に慣れていると取っ付きにくい。
そのへん上記ページでは上手く解説されていてよさげです。
javascript アーカイブ
2008年01月23日
2007年01月26日
web標準時代のjavascript。
昔からjavascriptは存在していましたが、htmlに直接記述してソースが煩雑になったり、activeXのセキュリティ上の問題などが原因で使用を控えていた時期がありますが、web標準が注目されはじめ、同時にjavascriptも再び注目を集め始めてきました。ajaxを利用したアプリケーションも公開されてきました。googleマップが良い例ですね。
というわけで、web標準に適したjavascriptの書き方を説明しているサイトを紹介。
一撃必殺JavaScript日本語リファレンス
ここまで充実かつWEB標準に準拠した日本語javascriptリファレンスサイトは類を見ないくらいなのでオススメです。DOMやAjaxライブラリのリファレンスなども充実しています。
2007年01月21日
リンク先をサムネイル表示 ＆ IE6、5で透過PNGさせるテクニック
javascriptを使いリンク先のサムネイルを表示させる方法と、IE6以下でも透過PNGを使用する方法を見つけたので紹介。
まずはサムネイルの表示方法から。以下の文章はPHPSPOT開発日誌様の文章を引用しています。
- previewbubble.zip をダウンロード
- previewbubble.js の var bubbleImagePath = '/images/bg.png'; の画像パスをあわせる
- <script type="text/javascript" src="previewbubble.js"></script> でJS読み込み
- class に previewlink を付与 <a class="previewlink" href="http://www.cnn.com">CNN</a>
これだけで、サムネイルの表示が可能（このアプリケーションがサムネイルを保持している必要がありますが）です。ソースもほとんど手を加えなくて済むのでラクチンです。
続いて透過PNG。以下の文章はデザインウォーカー様から引用しています。
- iepngfix.jsっちゅうスクリプトをダウンロードしてサーバにアップロード（右クリックで対象を保存で。）
- 透過PNG画像を表示したいhtmlの<head>から</head>の間に
<script language="JavaScript" type="text/javascript" src="iepngfix.js"></script>
って書いてiepngfix.jsを読み込みます。- CSS（スタイルシート）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。
* html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); }
（.iepngfixの部分はPNG画像を指定したクラス名、もしくはID名を指定）
* はIE6、5用のCSSハックですね。これでIE6、5でposition:fixedが使えれば最強なんだけどなぁ。ちなみにこれらのスクリプトはIE6、5にのみ適用すればいいので、条件分岐コメントを使用しても良いかと思います。
ちなみに、サムネイル表示はリンクページで実践済みなので是非ご覧下さい。
--追記--
これらのテクニックはIE5.01では使用できないみたいです。IE6とIE5.5のみ適用されます。透過PNGのほうも試してみたので紹介。
まず黒地の背景に透過PNGを普通に置いた場合。
FireFox、opera、IE7で見ると画像が透けて黒地の背景が見えますが、IE6、IE5.5では背景部分がグレーになっているかと思います。
次に上記ライブラリを使用した場合。
IE6、IE5でも画像が透けて見えるようになったかと思います。
最後に上記ライブラリを使用し、背景を白地にした場合。
画像は同じものを使用しているのにもかかわらず、見た目が異なることがわかります。
これでデザインのバリエーションが増えること間違い無しですね。
※このライブラリはposition:absoluteそれに加えてbackgroundと組み合わせると色々と問題が発生するので注意！
↑単純にIEがpositionとbackgroundの組み合わせに不具合があるだけなのかも知れないので一旦保留。検証する時間が無いので申し訳ないです。
2007年01月11日
javascript : ページの読み込みを待たずにDOM操作
all aboutの記事でwindow.onloadを待たずにDOM処理を開始するというものがあったのですが、なるほどなと。
まず、DOMとはなんぞや？
- DOM
DOMとは、Document Object Modelの省略表記で、プログラムやスクリプトが文書の内容や構造、見栄えに対してアクセスできるようにするためのインターフェースのことです。
つまり、javascriptやPHPなどのプログラムを使い、XHTML(XML)の各要素にアクセスし、テキストの内容を変更したり、属性値を変更したりなど何かと便利な仕組みのことです。
通常、javascriptでDOMを操作するにはページが全て読み込まれてからでないと無理（DOMはノード（各要素やテキスト）を扱うので、それが無ければ当然操作ができない。）なのですが、上記サイトの例ではbody要素をjavascriptで無理やり書き出してノードを追加して色々やってるみたいです。色々と副作用もありそうな感じですが、覚えておいて損はない感じ。（特に、アフィリエイトとかやっている人は読み込み待ちが長いと思うので実用的かも。）
javascriptとDOMを使いたいならこの本がオススメ！DOMの一覧や各種オブジェクトが綺麗に整理されて書かれているので大変読みやすいです。javascriptのリファレンスの中では一番の出来かと。
JavaScriptビジュアル・リファレンス
また同シリーズでactionscriptリファレンスも出ています。こちらも、かなり実用的。一通りイベントハンドラメソッドやリスナー、各クラス（MX2004以下）などが網羅されているので持っておくと便利。冒頭にオブジェクト指向プログラミングの基礎知識的なもの載っているので、そこまで詳しくない人でも入りやすいかも。
ActionScriptビジュアル・リファレンス
2007年01月08日
javascript + cssでフォントサイズ切り替え
ユーザービリティやアクセシビリティを意識して、フォントサイズ切り替え機能を実装するサイトが増えてきましたが、どうやって作るのか分からない人も多いかと思いますので制作方法を紹介。
当サイトではjavascript + cssでフォントサイズ切り替え機能を実現していますので、ある程度javascriptとcssの知識があることを前提として説明していきます。
フォントサイズ切り替え機能の概要を説明しますと…
- ユーザーがフォントサイズ切り替えボタンを押す
- 押したボタンに対応するデータをクッキーに保存し、ページリロード処理
- クッキーの情報を元に、対応するフォント用のスタイルシートを読み込む
といった感じです。では実際のソースを見てみましょう。まずXHTML(HTML)から。ちなみに、このサンプルは実際サイトで使っているものと違うものなので、コピペしても動作の保証はしません。あくまで大まかな流れとしてとらえてください。
■XHTML
//ヘッダー内に以下の一行を追加（この部分がフォント用CSSに置き換わる）
//このファイル内にクッキーの有無の判定やクッキーの書き込み処理を定義
//（複数スタイルシートを読み込む際はこのファイルを優先させる必要があるので最後に書く）
<script src="http://sample.com/common/js/fontsize.js" type="text/javascript"></script>
//body内のフォント切り替えボタンにしたい部分にonClickイベントハンドラを追加
//fontsize.js内のfontChange関数を実行
<p>文字の大きさ</p>
<ul>
<li onClick="fontChange('big')">大</li>
<li onClick="fontChange('medium')">中</li>
<li onClick="fontChange('small')">小</li>
</ul>
■javascript( fontsize.js内に記述 )
//イベントハンドラから受け取った値を元にクッキーに値を書き込む関数
function fontChange(str){
var targetFile;
switch(str){
case "small":
targetFile="http://sample.com/common/css/font_small.css";
break;
case "medium":
targetFile="http://sample.com/common/css/font_medium.css";
break;
case "big":
targetFile="http://sample.com/common/css/font_big.css";
break;
default:
alert("error");
break;
}
//フォント用CSSのファイル名をクッキーの値として保存
//フォント切り替え機能をサイト全体適用するためpathに/（ルート）を指定
document.cookie="fontstyle="+targetFile+";path=/;";
window.location.reload(); //ページをリロードして設定を反映。
}
//以下はページが読み込まれる際必ず実行される処理
var name="fontstyle";
var cookie=document.cookie; //クッキーを取得
if(-1==cookie.indexOf(name)){ //クッキーがなければsmallを指定（デフォルト）
var file='http://sample.com/common/css/font_small.css';
}else{
var pos_s=cookie.indexOf(name)+name.length+1; //クッキーの値の開始位置
var pos_e=cookie.indexOf(";",pos_s); //クッキーの値の終了位置
if(-1==pos_e){ //末尾にセミコロンがあるか？
var file=cookie.slice(pos_s); //無い
}else{
var file=cookie.slice(pos_s,pos_e); //有る
}
}
//クッキーの値に対応するCSSを読み込む。
document.write('<link rel="stylesheet" href="'+file+'" type="text/css" />');
■CSS
//font_small.css内
#content p{ font-size : 10px ; }
#content h2{ font-size : 12px ; }
//font_big.css内
#content p{ font-size : 14px ; }
#content h2{ font-size : 16px ; }
//font_large.css内
#content p{ font-size : 12px ; }
#content h2{ font-size : 14px ; }
と、だいたいこんな感じになります。
このケースではcontent部分のpとh2のフォントサイズを切り替えてますが、臨機応変に指定してください。
今回はフォントサイズ切り替え機能として取り上げましたが、CSSで指定するプロパティを変更すれば、背景色や文字色、レイアウトなども変更が可能です。
2006年12月13日
更新：フォントサイズ切り替え機能実装
今まで機能していなかった、フォントサイズ切り替え機能をついに実装。画面右上のメニューから3段階の調整が可能です。
ちなみにこの機能の実現方法は簡単なもので、フォント用のスタイルシートを別途用意しておき、javascriptでクッキーの値を読み取り動的にスタイルの切り替えをしています。
簡単といえど、cookieの扱いに慣れてない為若干手間取りました。。。あと、当初はＤＯＭでＨＴＭＬの属性値を切り替えてリロード無しでフォント切り替えをしたかったのだけど、何故かＯＰＥＲＡしかまともに動かなかったので、やむなくリロードで切り替える方法にしました。
2006年12月03日
onloadイベントハンドラメソッド。
onloadイベントハンドラメソッドとは、特定の要素が読み込まれたときに実行されるメソッド。
現状onloadイベントハンドラメソッドを適用できるのは、windowとimgのみ。つまり、ページ全体が読み込まれた時と、特定の画像が読み込まれた時のみに使えるメソッドであるということ。
h要素やul要素に適用できれば、柔軟な処理ができるんだけどなぁ。
ちなみに当サイトのプルダウン式ナビゲーションはwindow.onload後に使えるように設定してあるので、ページ全てを読み込み終わるまで動作しません。。。TOPページはamazonのバナーがやたらと読込に時間かかるので、なかなかプルダウン式ナビゲーションが使えるようにならない。。。
2006年11月22日
イベントハンドラメソッドの扱い
actionscriptではイベントハンドラメソッドを使う時以下のように記述できるが、
data.onLoad=function(){
/*データが読み込まれたときの処理*/
}
javascriptでは、
window.onload=function(){
/*画面が読み込まれたときの処理*/
}
と「onLoad」→「onload」と全て小文字で表記しなければならない。
ただし、ＨＴＭＬに直接イベントハンドラを埋め込む場合は前者のように指定する。
actionscriptに慣れているとハマりやすい落とし穴。
Ajax開発支援ライブラリ prototype.js
googleマップやgoogleサジェストの登場で、ajaxがされ始めていますが、サーバーサイドの言語とは違い、ajaxではjavascriptを使うので、ブラウザの互換性を意識して制作しなければなりません。
スクリプト言語なので初心者にも受け入れ易い言語ではありますが、多くのブラウザに対応させるとなると、相当なスキルを要する言語でもあります。
そこで登場するのが「prototype.js」というjavascriptライブラリです。
prototype.jsを使うことで、ソースの簡略化、ブラウザの互換など様々な恩恵を受けることが可能です。
邦訳された解説サイトもあるので、利用してみてはいかがでしょうか？
prototype.js http://prototype.conio.net/
解説サイト http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html
ちなみに、書籍「
Ajax実践テクニック
prototype.js ver1.5 ではCSSのような方法でノードの指定ができるので、かなり使い勝手が向上しそうです。リリースが楽しみ。
2006年11月18日
ブラウザがデスクトップに！？
ブラウザがデスクトップになるという代物。Ajax(html+css+js+xml)で動いているんだけど、かなり再現度が高くて驚いた。特に、msnメッセンジャーをアプリケーション内部で動作させたり。
http://www.startforce.jp/
Ajaxの可能性を感じさせるアプリケーションだけど、実用性はゼロに近いかも。
ネット上にデスクトップ作っても、通信上の不具合で中断されたり、html+css+jsで駆動しているわけだから、操作にも制限が出てくるわけで。
せめて、こういうコンテンツはflashで作るべきだろうな。新しい表現ができそう。
