JavaScript

2008年09月24日

JavaScript:flexigridを使ってみた(その1)

 テーブルを綺麗にマークアップしてくれるflexigridを使ってみた。

 実はこれWebCreatorsの7月号で見て以来いつか使ってみようと思っていたのだけどようやく日の目を見ることができた。

 ちなみに、タイトルがその1なのは最終的にはデザインを変えたり、RoRと組み合わせてページングできるようなので、それを試して見ようと思っているからです。

 サンプル

 項目の表示非表示が変更できたり、カラムの幅を変更できたりして使いようによってはこれでもかなり便利かもしれません。
 まぁ、サンプルは更新履歴の部分で利用しているので、役には立たないでしょうけど・・・。

 ApacheなのかRoRなのか不明ですが、なにやらキャッシュ処理が働いていてサーバー環境で動かすのにかなり時間を喰ってしまった・・・。RoRはもっと使いこんでマスターしなければ。

(WebCreators7月号は確認したところAmazonでは既に扱っておりませんが、10月号のバックナンバーではまだ購入できる状態でしたので興味がある方はどうぞ)

2008年09月22日

本の紹介:JavaScript(前編)

 前編です。
 第一部であるコアJavaScriptの部分をようやく読み終えたので、感想。

 ちなみに二部がクライアントサイドJavaScriptでブラウザで動かした場合の実装になりより実践的になります(たぶん)。

 第一部は文法や、JavaScriptの言語仕様の解説となっており、巷のJavaScript本ではなかなか踏み込んでくれない部分でもあります。

 序盤はデータ型の解説、前にも書きましたが基本データ型とオブジェクト型の違いがしっかり学べます。str.lengthという風にいかにもオブジェクトの如くアクセスできる文字列ですが、実は基本データ型というのは驚きでした。
 ArrayとObjectの違いも勉強になります。

 続いて関数の仕組み。
 JavaScriptでStaticっぽく関数固有の変数を持つ方法や、
 Arguments型の利用方法、arguments.calleeで再帰呼び出しする方法なんて初耳でした。

 そしてオブジェクト。
 JavaScriptでプライベート変数を扱う方法や、オブジェクト定義の方法などを学ぶことができます。

 他にもJavaScriptのスコープチェーンの仕組みや、クロージャについては脱初心者としては是非押さえておきたい所だと思いました。(自分はスコープチェーンについては、完璧に理解したとはいえません・・・)

 jQueryなどのフレームワークを利用すると、
 あまり言語仕様を意識することはありませんが、しっかり言語仕様を知っていないと不安になるのは技術者の性ですかねぇ。



2008年09月08日

vista風ツールバーがFireFox3とChromeで表示が崩れていた

 製作中のサイトVista風ツールバーを利用していたのですが、デフォルトだとFireFox3やChromeという今後伸びそうなブラウザでことごとく表示がずれていたので修正。

 リストのa要素につけていたfloat:rightが効かず、最後のサイトマップのボタンが右寄せになっていなかったのですが、CSSで対策が思いつかず、JavaScriptで対応

if(window.innerWidth) {
var ul = document.getElementById("vista_toolbar_ul");
ul.style.width = window.innerWidth + "px";
}


 リサイズ? えぇ、面倒なんでそんなもの未対応です、ハイ。
 誰かCSSで解決したかた教えて下さいませ。

2008年07月10日

jQueryUIを使ってみた

 これまでブログで紹介してきた書籍をまとめるべく、
 サイトにコンテンツを作成していたのだが、
 あまりのデザイン力不足のためになかなか製作が進まず、
 その不足を補うためにJavaScriptのエフェクトに頼ってみた。

 jQueryUIのアコーディオンを使ってみたのですが、
 項目が2つだとあんまり恩恵が無いなぁ・・・。

 土台もできあがっていないページは以下。

 アコーディオンの動作を見てみる

 左ナビの灰色の部分をクリックするとアコーディオンの動きが(一応)確認できると思います。

 実装は非常に簡単でした。


【参考にした書籍】

 丁寧に書かれていて、読みやすい本。



 上記と比べると読みにくい感がありましたが、
 サンプルコードはこちらの方が多い。

2008年05月11日

Shadowbox.jsを試してみる

 lightbox.jsだとswfファイルを表示できなかったので、
 shadowbox.jsというツールを試してみる。

 script.aculo.usprototype.jsが必要なのでDL。

 これらをheadタグで読み込んで、
  window.onload = function() {
Shadowbox.init();
}


 オンロード時にイベントを開始。

 表示したい画像やswfにrel属性をつけてあげれば簡単に動きました。
 下記ページの
 
 サンプルページ
 
 このページで開くサンプル

 をクリックすれば効果の程が確認できます。
 以外と簡単でした。

 導入方法はWeb creators (ウェブクリエイターズ) 2008年 04月号 [雑誌]を参考にしました。たぶん、Webでも検索すれば導入方法を解説したサイトはあるはず。



2008年05月10日

本の紹介:標準DOMスクリプティング

 一応書けるけど、
 しっかり基礎文法を押さえていない言語が2つあります。

 JAVAJavaScript(C#もですが、書けるというレベルではないので除外)。

 奇しくも、似たような名前の言語ですが、
 必要が生じてきたのが、前者がFlashMedeiaServerの使用言語がJavaScriptライクである(本当、なんてよべばいいんだこのFMSの言語?)ということと、
 Red5でサーバーサイドのスクリプトを書く際にJAVAで書くという同期もなんだかシンクロ気味。

 そんなわけで、職場随一のJavaScript職人のタックンのオススメ

 
半分読めばInternetExplorerが嫌いになれますよ


 を受けて(推薦の言葉としてどうかはさておき)、

 本書標準DOMスクリプティング JavaScript+DOMによるWebアプリデザインの基礎を購入したわですが、

 先日の、FlashMediaServerのIE(一部プラグインインストール)でのバグで
 不満の保温効果が残っていましたので、

 
最も遅れているのがInternet ExplorerでDOM Level1までしか実装されておりません。しかしDOM Level2に相当するメソッドやプロパティが独自の方法で実装されており、


 で沸騰、

 お前か!!
 お前がW3Cに準拠してねーから、HttpRequestでブラウザ分けとかしなきゃいけないのかっ!!


 半分どころかわずか9ページで十分嫌いになれました。

 その後も、他のブラウザではこう記述するけど、IEはこれねー、という棲み分けがいたるところに登場。
 Microsoftさん、IE8ではW3C準拠頼みますよ。あと、FMSのバグもよろしく。

 IEについてはここまでとして、
 本書はJavaScriptの丁寧な解説本ですが、
 JavaScriptの文法には深く立ち入らず、DOM操作やイベント操作に焦点を絞って書かれているため、
 HTMLを操作する言語としてのJavaScriptの良い書籍になっていると思います。

 FlashMediaServer用のスクリプト、
 公開されているライブラリが動かなかったら少し修正する、
 といった使用法がメインだった自分には勉強になりました。

 JavaScriptの敷居が高い要素は、

 HTML、CSSの知識がある程度前提として必要になること、
 デバック、コード補間、クロスブラウザ対応のIDEが無いこと、
 ブラウザによって挙動が違うこと、
 
 だと思っていましたが、最後の項目の戦犯は本書で白日の元にさらすことができます。
 ブラウザ競争で各社が独自実装を進めた名残で差異があるのだとずっと思っていました・・・。



2008年02月12日

今更ながらjQueryを触ってみた

 JavaScriptの勉強は、
 ブラウザ間の差異に悶絶しながら、
 生のhttpRequestをいじくる時代で止まっていたのですが、

 会社で勉強会があったり、
 巷でjQueryの名前が当たり前の如く発せられるようになって、
 遅まきながらjQueryを軽く触ってみました。

 コードの量が少なく書けて便利ですね。
 少なくとも止まって時代とは隔世の感があります。

 それでも、CakePHPのAjaxヘルパーは、
 Prototype.jsとscript.aculo.usがメインだったり、
 大好きなAdobeはDreamweaverにSpryという独自のJavaScriptフレームワークを載せてくるし(デザインさんはSpry?)、
 2、3年後に

 あーこのページはjQueryで、こっちはSpryかー、どっちももう使わないから読みにくいことこのうえないっ


 とか悶絶してそう。

 なんて言っていては、
 日進月歩のAjaxワールドから取り残される一方なので、
 Ajaxヘルパーと、jQueryで何ができるか色々さわってみよう。

2007年04月21日

JavaScriptでマウスの座標を取得する方法

 チップヘルプを出す際に、
 マウス座標の取得をしたかったのですが、

 ブラウザのスクロールの影響か、
 はたまたCSSでfloatを使っている影響か、
 場合によっては、ブラウザのサイドバーなんかを表示している影響だったりで思うような場所にヘルプを表示させることができませんでした。

 色々調べたところ、
 http://diaspar.jp/node/47
 のやり方で、うまく取得できました。

  // 水平スクロール量
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

// 垂直スクロール量
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

 こんな感じで書くとx,y座標ともスクロールしても正常に取得できました。

 ちなみにヘルプ用のタグはCSSで、
 position:absolute;
 visible:hidden;
 にしておいて、 

 var tip_help = document.getElementById("tip_help");
 tip_help.style.left = e.x + scrollLeft + "px";
 tip_help.style.top = 8 + e.y + scrollTop + "px";

 hiddenを変えてあげればマウスオーバーしたちょっと下にチップヘルプを表示することができます。

Profile

シーラカンス

Recent Comments
QRコード
QRコード
livedoor Readerに登録
RSS
livedoor Blog(ブログ)