Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Smashing Editoria氏がSmashing Magazineにおいて50 Fresh JavaScript Tools That Will Improve Your Workflowのタイトルで50のJavaScriptに関連したツールやライブラリを紹介している(実際には51)。RIA開発においてJavaScriptは重要な地位を占めつつあり、適切な開発ツールやライブラリ、フレームワーク、プラグインを選択することは、迅速で効果的な開発を実現するために欠かせない。紹介されているツールやライブラリは次のとおり。 JavaScriptツール FireUnit (Firebug向けJavaScrip
Windowsアプリケーション上でテキストや画像を選択して右クリックすると、選択した対象に応じたメニュー（コンテキストメニュー）が表示されます。必要な機能をすぐに選択できるので、メニューバーに並んだ膨大なメニューの中から選ぶのに比べて効率的です。Webサイトでも同じように、ページ上のそれぞれの項目に応じたコンテキストメニューが表示されれば、ユーザーにとって便利ではないでしょうか。 実はこのコンテキストメニュー、JavaScriptライブラリを使えば意外に簡単にできます。今回は、jQueryの「Context Menu Plugin」を使ってコンテキストメニューを表示する方法を紹介します。 「Context Menu Plugin」を使ってみよう 「Context Menu Plugin」は、Cory LaViska氏が開発したjQueryプラグインです。以下のページで配布されています。 h
前回の記事で作ったファイルアップローダーは、ファイル本体をバイナリデータとして DB に保存したが、DB ではなくファイルとしてサーバに置くものを作ってみる。 それだけではつまらないので、今回は ajax_scaffold_generator を使って見栄えのいいものを作ってみることにした。 ■ バージョン情報 $ ruby script/about ./script/../config/boot.rb:29:Warning: require_gem is obsolete. Use gem instead. About your application's environment Ruby version 1.8.5 (i686-linux) RubyGems version 0.9.2 Rails version 1.2.2 Active Record version 1.15.2
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
■ 本当はもっと怖いGoogleマイマップ 適当に検索して見つけたブログで（既に消えているようだが）こんな発言があったようだ。 Googleマップで他人の個人情報を晒したことに気づいてあわてている人のニュースが、最近、盛んだ。 いったいどうしてこんなことになってしまうのか、私には不思議でならない。 私もマイマップはよく使っているので、公開・非公開の違いは注意深くチェック ... Googleマップに他人の個人情報を掲載する愚か者と、ここぞとばかりに ..., オリマー, 2008年11月8日 しかしどうだろう。Googleマイマップを「よく使っている」という人でも、自分が作成するマップがいつどの時点で公開状態となるのか（パブリッシュされるのか）、そのタイミングを理解している人はどれだけいるだろうか。 Googleマイマップの「新しい地図を作成」をクリックした直後はこうなっている。
web開発者が知っておくべき20の上位リストを作成している記事がありましたのでご紹介。 何気なくAjax使ったりしますけど、色々あるものですねぇ。 中でもこれは使えそうだなぁと思う7点をピックアップいたしました。 テキストボックスのオートフォーム 自動入力完備というか、入力した語句から検索してリスト化する機能。 サンプル / ダウンロード ブラウザでインスタントメッセンジャー ブラウザ上でスムーズなメッセージのやり取りを可能にする。 地味に日本語も対応されているところが素敵ですね。 サンプルログインはID『test』PASS『test』です。 サンプル / ダウンロード フォームの監視 ユーザーがフォームに入力し、送信するというのは、一般的な仕組みとして使われています。 こうした仕組み上、誤った情報を入力し、送信→誤りがありますというメッセージとともに、再度入力ページに戻るというフォームス
インターネットでは買いにくいものだからこそ、サイトの使い勝手やデザインにしっかりこだわる――そうした取り組みで成功しているのが、「ファッション」分野のECサイトではないでしょうか。素材や色味、サイズや形など、実際に手にとって見て、確認してから買いたい。あるいは、店頭でのスタッフとのコミュニケーションも楽しみたい。リアル店舗にはあってECサイトにはないデメリットを解消するため、アパレル系のECサイトにはさまざまな工夫が見られます。 「JOURNAL STANDARD」などの若者向けアパレルブランドを展開するベイクルーズのECサイト「スタイルクルーズ」もその1つです。今回はこのスタイルクルーズが採用しているUI（ユーザーインターフェイス）を参考にさせてもらいましょう。 今回のお手本サイト：『スタイルクルーズ』 「JOURNAL STANDARD」「IENA」などを展開するベイクルーズが2007
前回、オプション指定の順序を間違えて、勝手に出来ないと思い込んでいたので、ここでもう一度オプション指定を見直してみることに。以下は現状で自分が理解できたauto_completeに関連するのオプションの指定方法の一部。 text_field_with_auto_completeのオプション 書式は以下のようになる。第3引数のハッシュはtext_fieldに設定されるオプションになるようだ。第4引数のハッシュはauto_completeに設定されるオプションだ。 <%= text_field_with_auto_complete :bank, :kana, {text_fieldオプション}, {auto_completeオプション} %> スタイルシートの出力をキャンセルする。 text_field_with_auto_completeは、text_fieldごとに選択リスト描画用のスタイ
まず検索フォームの記述がある「list.rhtml」を編集します。ファイルの冒頭でJavaScriptのライブラリを読み込みます。 <%= javascript_include_tag "prototype" %> <%= javascript_include_tag "effects" %> <%= javascript_include_tag "controls" %> 続いてテキストフィールド部分の記述を変更します（「text_field」タグを「text_field_with_auto_complete」に書き換え）。なお「:contact」は対応するモデル名、「:name」はその属性名です。 変更前
新しいウインドウを開くべき？ このサイトはHTMLのルール上、新しいウインドウを開いてはいけないのですよ(いや、別に自分で決めたわけじゃなくて...)。XHTML strictの決まりごとです。 ルールを無視して、target="_blank"をアンカータグ<a>に放り込めば問題なく新しいウインドウで開くことができるんです。でもアクセシビリティ上よくないのですよ。 最近知ったのですが、ページ読み上げソフトなどを使用している場合、新しいウインドウが開いてもユーザーは分からないそうです。要するに、戻るボタンなどが効かなくなり混乱するので良くない、というわけです。少なくともアンカータグ<a>にtitle属性で新しいウインドウが開く旨を記述する必要があるそうです。 その話については少し置いておいて... 外部のサイト = 新しいウインドウ？ ところが外部リンクも全部同じ窓で開くと、飛んだ外部のサイ
ドットインストール代表のライフハックブログ
ドットインストール代表のライフハックブログ
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
bookreader.jsは、長文を縦スクロールではなく、横スクロールで表示し読みやすくするJavaScriptライブラリです。 →プロジェクトのホーム (Google Code) - New!! →ダウンロード(ver 0.4.6) - 2009/04/18公開 ※ダウンロードの詳細については、こちらのページをご覧下さい。 まずは、このページで体験してみて下さい。キーボードの[→]/[←]キーが、「進む」あるいは「戻る」に対応します。画面上に表示される、半透明の▶/◀ボタンをクリックしてもOKです。使い方の詳細は「ヘルプ」を参照ください。 次期バージョンの開発状況 幸いにしてさまざまな方からフィードバックをいただきました。ありがとうございます。それを元に機能の絞り込みとWEBサイトへの「組込み方」について検討を行っています。まだ、実装の方針が定まった、という段階ですが次期0.8.x系のサ
GoogleからGoogle AJAX APIを拡張する新しいサービス「The AJAX Libraries API」が公開された。The AJAX Libraries APIはGoogleのサイトで人気のある有益なJavaScriptライブラリを提供しようというもの。これまでYUIであればYahoo!、DojoであればAOLなどが同類のサービスを提供していたが、特定のJavaScriptライブラリに限定することなく有益であれば配布に追加するというポリシーをもっている点が新しい。 JavaScriptライブラリを活用するタイプのWebアプリケーションは数多くある。結果として、何度も似たようなJavaScriptライブラリをダウンロードしていることになり、このままいけば今後ライブラリ自体のサイズの巨大化や多くのサービスの登場でライブラリダウンロード総量は増加することになる。 The AJAX
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
