ドットインストール代表のライフハックブログ
![jQueryでテーブルをかなり便利にフォーマットしてくれる『Flexigrid』 - IDEA*IDEA ~ 百式管理人のライフハックブログ ~](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c59c202be2c364fbf83573b5c95fc2a8dc12392/height=288;version=1;width=512/http%3A%2F%2Fwww.ideaxidea.com%2Farchives%2F2008%2F03%2F24%2Ftable_1.gif)
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
こんにちは、最近おみくじ引くと「凶」が出る シーブレインの toyama です。想像以上に凹みます! クライアントさんから渡される原稿には Excel でつくられたものがよくあります。 「この表、table 組みにしてー」と思っても、鮮やかなテクニックを駆使してすばらしく入り組んだ表になってたり、背景に色がついてたりして、内容だけコピペしていくのは絶対間違える自信があるし、かといってこのまま HTML 形式で書き出しても鬼のようなゴミタグが!ゴミタグを掃除するのも時間かかる! そんなときは「エクセルシートを HTML テーブルに変換しちゃう君 (ββ)」です。 まじかるタルるートくんに出てくるようないい名称です。 1.Excel の表部分をコピーする とりあえず、こんな感じの表を作ってみました。ちなみに Openoffice でもできちゃいます。 2.エクセルシートを HTML テーブルに
弊社のユーザ行動観察調査では、アイトラッキング(ユーザの視線分析)を利用していますが、ある程度ユーザ理解があれば、「認知的ウォークスルー」(ユーザになりきってそのサイトを検証する)という手法でも、視線の流れを意識したサイト評価・設計ができるようになります。 今回はWebページ内の表のつくり方を例に、「視線を意識したサイト設計」のヒントをご紹介しましょう。 このニュース一覧は、ぱっと見はきれいなのですが、実際にはユーザの情報収集を妨げています。その理由がわかるでしょうか? この例の場合、ユーザはまず文頭を見て自分に必要な情報を探すのに対し、文章が中央ぞろえになっているため、視線を左右に動かす必要があり、情報収集の効率を下げています。 そこで、文頭を左寄せにすることで視線がスムーズに流れ、表が読みやすくなります。 ただし、左寄せが万能なわけではありません。次の例をご覧ください。 いかがでしょう
公開前のWebサイトなどに簡単なアクセス制御として、「.htaccess」でベーシック認証を利用している方も多いのではないでしょうか? 簡単に「.htaccess」を作成できる「.htaccess Editor」なんて便利なツールもあるので、ひとつひとつの詳しい意味が分からなくても簡単に認証をかけることができますよね。 …が、何かの時に役立つかもしれないので、この「.htaccess Editor」で作成されたファイルの意味を解説したいと思います。 まず、「.htaccess Editor」で、作成した「.htaccess」に記述する内容が以下です。 ユーザー名、パスワードともにichikawaで作成いたしました。 <Files ~ "^.(htaccess|htpasswd)$"> deny from all </Files> AuthUserFile /home/foo/bar/.ht
既存のテーブルにソート、ハイライト表示、データ分割、ページネーション機能を追加できる、高性能な超軽量(2.5KB)スクリプトをLeigeberから紹介します。 TinyTable JavaScript Table Sorter demo このスクリプトは、以前紹介した「設置も簡単なテーブルのデータをソートする超軽量のスクリプト」のバージョンアップ版で、主な機能は下記の通りです。 既存のテーブルに簡単に設置が可能。 2.5KBの超軽量スクリプト(他のスクリプトへの依存無し)。 列を交互に自動ハイライト。 選択した行のハイライト。 データの表示件数をコントロール。 分割したデータのページネーションを設置。
携帯サイトを運営する上で、携帯端末のみをアクセス可能にしたい場合にサーバーに設置が必要なサーバー定義ファイル「.htaccess」を簡単に生成します。キャリアや検索エンジンのクローラーごとに設定可能なため、例えば「auは許可し、docomoは拒否」といった設定も可能です。 アクセスを許可したいキャリアやクローラーを選択し、最後に「htaccess生成」ボタンを押すと、htaccess用に書かれたIP情報(自IP含む)が表示れます。表示内容をコピーし、「.htaccess」という名前で保存した後、自分のサーバーにアップロードすれば完了です。 以下の携帯キャリアとモバイル向け検索エンジンに対応しています。 ※スマートフォンは対象外です。 携帯キャリア (5) NTT docomo, au by KDDI, SoftBank, 旧willcom(新Y!mobile), 旧emobile(新Y!m
.htaccessを使用して、他のサイトが画像などのファイルを無許可で使用するのを禁止する方法をThe Web Squeezeから紹介します。 Stop Image Hotlinking with .htaccess 「.htaccess」に、下記を記述します。 ※必要の無い箇所は、削除・修正して使用してください。 ※「.htaccess」を修正する場合は、必ずバックアップをしてください。 ※有効範囲は、設置ディレクトリの配下です。 <textarea name="code" class="html" cols="60" rows="5"> #Stop Image Hotlinking RewriteEngine on RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC] RewriteCond %{HTT
1年に 1回は書いているこのネタ、懲りずに私が個人的に日常利用している Firefox アドオン(+ Greasemonkey ユーザースクリプト)を挙げてみました。Firefox 3 対応のアドオンのみを集めています。 1年に 1回は書いているこのネタ、懲りずに私が個人的に日常利用している Firefox アドオン(+ Greasemonkey ユーザースクリプト)を挙げてみました。Firefox 3 対応のアドオンのみを集めています。 アドオンはあんまり数多くインストールすると結構重くなるので注意してくださいね。その場合は、インストールしても、使うとき以外は無効にしておくなど工夫しましょう。メモリてんこ盛り PC ならあまり気にならないと思いますが。 今回は数が多いので大まかにグループ分けして紹介してみます。あと、特定のアドオンに依存しているものもありますので、その辺はまとめています。
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいUIの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、1行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
約1年ぶりとなった本連載。これから数回にわたり、最新バージョン1.2にフォーカスして、技術動向をお届けします。 2009年1月、Cake PHP 1.2登場 前回の連載記事から約1年ぶりとなりました。この間、150人規模のCakePHPのイベントが開かれたり、多数のCakePHPの書籍が発売されたり、公式サイトのトップページが日本語化されたりと日本におけるCakePHPの「普及期」であったと言えるでしょう。 そして2009年の1月にはCakePHP 1.2のバージョン表記に待望の「Stable」表記が付けられました。Stableとは直訳で「安定した」という意味で、同一のバージョン系列上では互換性を大きく損なうような仕様変更は行われず、バグが無い状態を保っていることを(少なくともCakePHPでは)示します。なので、alphaやbetaとは安心感が格段に違います。今までに1.1を使ったことが
株式会社パソナが提供するオウンドメディアサイトです。
こんにちは、ktanakaです。今日はjQueryを利用したら無意識に使っているかもしれないレキシカル変数についてとりあげます。まず、jQueryを利用したコードを示し、それをレキシカル変数を利用したコードに書き直します。 jQuery で click して toggle するコード とりあえず、レキシカル変数とは何か?という話は置いて、 jQuery を利用したコードを示します。 index.html <html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="program.js"></script> </head> <body> <p><input type="button" id="trigger" value
こんにちは!まだまだ開発者テスト修行中のktanakaです。 今日は、jQueryについてくるユニットテストツールのQUnitで遊んでみます。 QUnitの概要 QUnitはjQueryプロジェクトの為のユニットテストツールです。(QUnit - ABOUTより)有名な各種xUnitフレームワークよりチェックのための関数も少なく、シンプルに書けそうな感じです。そしてなによりブラウザ上でテストが走ります。 Using QUnitを見るとテストに必要なものがわかりますが、必要なファイルは、jquery.js, QUnitのテストランナー(testrunner.js)とスタイルシート, テスト対象のコードとテストコードです。 Moneyオブジェクトの例を写経 いきなりjQueryプラグインのテストとか心臓に悪そうなので、普通のテストをやってみます。(dollar.test.js) ちなみにこのエ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く