以前より当サイトを訪問してくださっている読者の方はお気づきかもしれませんが、当サイトでは、幅固定のレイアウトから、リキッドレイアウト（ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト）に変更しました。 上記の理由に加えて、そもそもWeb（インターネット）はユーザー主導型のメディアなので、Webコンテンツの表示サイズについても「基本的にはユーザーが任意にコントロールできるようにすべき」という想いがあります。たとえば弱視のユーザーが文字サイズを極力大きくしたい場合なども含めて考えると、その人なりの心地よい一覧性を実現する意味で、表示されるWebページの幅や高さを自由にコントロールしたいというニーズは高いのでは、と思うのです。 ただ誤解していただきたくないのですが、私は「固定幅レイアウトよりもリキッドレイアウトのほうが絶対的に優れている」と主張しているわけではありません。リキ

前回 Flexigrid のパラメータのメモを残しましたが、表をHTMLに表示する際、データベースのデータをそのまま表示するのではなく、表示用に変換させてから表示するという場合が少なくありません。 たとえば表に画像を表示したり、詳細ページのリンクを張ったりと。 出力する JSON なり XML 自体を変換して出力してやれば済む話なんですが、タグをそのまま出力するのでエスケープ処理をさせたりしなくちゃならない。 なんとなくここまできたら表示部は表示部で分離させたい！となりました。 で、いろいろ模索してると見つけました！ パラメータに preProcess というメソッドを指定することができ、データ取得時の表示直前に全読み込みデータを引数として渡されます。 たとえば下記のようなデータを読み込むとします。 { page: 1, total: 5, rows: [ {id:'1',cell:['1

データを簡単にテーブルにフォーマットしてくれるjQuery プラグイン Flexigrid を使ってみた。 Flexigrid http://www.flexigrid.info/ Google Code http://code.google.com/p/flexigrid/ DBから吸い出して管理画面などでさくっとテーブルにしたい場合に非常に便利！ 具体的にどんなことができるのかはマイコミジャーナルさんの記事がわかりやすいのでリンク わずか数行で”ものすごいテーブル”に! – jQueryプラグイン「Flexigrid」 ただこのプラグインあまりリファレンスがない・・・ jsを開けばオプションは一目瞭然なのだが、自分メモとして残しておきます。 オプションパラメータ一覧 UIパラメータ width テーブルの横幅。数値もしくは auto が利用可能。auto に設定した際は横のリサイズは無

<textarea name="code" class="js" cols="60" rows="5"> $("#fullswitch").click(function() { $("#list").removeClass("compact"); }); $("#compactswitch").click(function() { $("#list").addClass("compact"); }); </textarea>

JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 2009年07月07日- FontEffect jQuery plugin JavaScriptのみで画像ツールで作った風のフォントを描画できるjQueryプラグイン「FontEffect」 ontEffect プラグインを使って、次のようなフォントを描画することが出来ます。画像ではないところが驚き。 実装の容易さについても注目で、次のように、FontEffect メソッドにオプションを渡すだけです。 $('#example24').FontEffect({ outline:true,  // 枠線 outlineColor1:"#00c",  // 枠線色１ outlineColor2:"#00c",  // 枠線色２ outlineWeight:1, // 枠線幅 sha

ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 2009年07月07日- Modernizr ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 ライブラリを使って、Canvas、opacity、Multiple backgrounds といったCSS3やHTML5の機能に対応しているかを簡単に調べることが出来るようです。 Google Ghrome の場合で対応を明示 Firefox 3 の場合で対応を明示 JavaScript では、次のように使えるようです。 if (Modernizr.cssgradients) { alert('対応'); } else { alert('未対応'); } cssgradients の他には以下のようなプロパティが利用可能。 Modernizr.ca

Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」 2009年07月08日- jQuery Google Charts 1.0 - Demo Site Google Chart API を jQuery で簡単に使えるラッパーライブラリ「jQuery Google Charts」。 たとえば、次のようなコードを書きます。 var api = new jGCharts.Api(); var opt = { data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]//mandatory }; jQuery('<img>').attr('src', api.make(opt)).appendTo("#bar1"); すると、次のグラフが簡単にページに挿入されます。 もちろ

ブックレビュー： PHP×携帯サイト 実践アプリケーション集 Tweet 2009/7/6 月曜日 matsui Posted in ブックレビュー | No Comments » マイネット・ジャパンの平島様からご献本いただきました。ありがとうございます。 書籍が届いてから少し遅くなってしまいましたが、レビューを書かせていただきたいと思います。 →　Amazon　PHP×携帯サイト 実践アプリケーション集 [amazon.co.jp] 本書「PHP×携帯サイト 実践アプリケーション集」は、その名の通りすぐ使えるケータイサイト用プログラムがまるごと掲載された、CD-ROM付きのサンプルコード集です。 著者はケータイサイト作成に多くの実績がある「株式会社マイネット・ジャパン」の平島氏・伊藤氏・中本氏、3名の共著という形になっているようです。 表紙に見覚えがあるなと思った方も多いと思いますが、

Drag and drop table content with JavaScript demo デモではテーブル内のコンテンツをドラッグ&ドロップでセル間の移動が可能で、配置したコンテンツの量でセルの高さも変更します。 スクリプトはjQueryなど他のスクリプトに依存せず単体で動作するもので、対応ブラウザはIE6をはじめFx3にも対応しています。

CastPreloaderが読み込み処理中にブラウザのURLを変更すると読み込み処理は停止されます。 この時エラー表示されることがあるので抜かり無く対策をしておこう。 表示されるエラーはこんな感じ。 たとえば読み込み中にブラウザの戻るボタンを押したりすると発生することがある。 キャッシュされていると表示されない模様。 URLLoaderのエラーイベントにハンドラを設定してないからだけれど、Progressionの便利さに目がいって忘れがち。開発中は良いとして公開段階では表示されないようにハンドラを設定しておいた方がよいかと思います。 public function Preloader() { url = "index.swf"; this.addEventListener( IOErrorEvent.IO_ERROR, ioErrorHandler ); } protected funct

このブログにProgressionを使ったSWFを貼付けた時に気づいたことがあります。 それはSWFが表示されないこと。結構ハマったのでエントリー。原因は存在しないシーンへの遷移に起因していました。 まず、普通に以下のリンクを試していただきたい。 その1 1) http://nipx.jp/2px/lab/progression/a/index.html 2) http://nipx.jp/2px/lab/progression/a/index.html#/top 3) http://nipx.jp/2px/lab/progression/a/index.html#/top/ 4) http://nipx.jp/2px/lab/progression/a/index.html#top ここで表示しているSWFは、ルートシーンにindexSceneだけを持つProgressionを使ったSW