テキストを画像の輪郭に合わせて折り返せる「jQSlickWrap」:phpspot開発日誌
テキストを画像の輪郭に合わせて折り返せる「jQSlickWrap」。jQueryプラグインです。 使い方もjQueryプラグインなので簡単で、slickWrapというプラグインメソッドを呼び出せば実装できるようです。 <script type="text/javascript" charset="UTF-8"> $(document).ready(function(){ $('.wrapReady').slickWrap(); }); </script> </head> <body> <img src="./myImage.jpg" class="wrapReady" /> <p>Lots of text goes here..</p> </body> 対応ブラウザでないと動きませんが、表示が崩れたりエラーが発生したりするわけではないので使ってしまってもよいかも。 Google Chrom
v8エンジンによるJavaScriptのWebサーバ·node.js MOONGIFT
node.jsはJavaScript製のフリーウェア（一部オープンソースのライブラリが入っている）。クライアントサイドとサーバサイド、両方が同じ言語で書ければどれだけ開発工数が低減されるだろうか。Web系の技術者は常にそこにジレンマを感じることだろう。 デモのチャットアプリ 方法は二つ、JavaScriptでサーバサイドを実装するか、GWTのようにJavaScriptを覆うかだ。node.jsはJavaScriptでサーバサイドを実装する。特徴的なのはそのエンジンとしてGoogle製のv8エンジンを採用していることだろう。さらにnode.js自体がポートをリッスンし、Webサーバとして動作するのが特徴だ。 独自でWebサーバを用意しているからだろうか、動作は軽快だ。チャットアプリケーションがデモとして用意されているが、レスポンスはとても良い。サーバサイドの実装と合わせて同一言語で開発できる
JavaScriptからローカルファイルシステムへのアクセスを可能にするFile API、標準化へ一 | スラド IT
JavaScriptからローカルファイルシステムへのアクセスを可能にするFile APIに関する仕様のドラフト文書が、Web標準規格を策定するW3Cに提出されたそうだ（Ars Technicaの記事、ドラフト文書）。 File APIを利用することで、たとえばローカルのテキストファイルを読み込んでテキストエリアにその内容を入力する、といった処理がクライアントサイドだけで実装できるようになる。また、セキュリティ的な問題を発生させないよう、フォームの<input type="file">要素でユーザーが指定したファイルのみにアクセスできるような制限が課せられているとのこと。 JavaScriptの可能性が大きく広がるのは歓迎できるが、セキュリティ面が考慮されているといってもちょっと怖い面があるのも否めない。あとはIEの対応ですかね……。
Web標準とその周辺技術の学び方：第5回 DOMとJavaScriptと互換性｜gihyo.jp … 技術評論社
今回は、動的なWebサイトやWebアプリケーションに欠かせない「DOM」と「JavaScript」という二つの技術を、関連する仕様とともに紹介したいと思います。 さまざまなものをオブジェクトで表現するDOM DOM (Document Object Model) とは、HTML文書にアプリケーションからアクセスするためのAPIです。オブジェクトモデルという名前のとおり、DOMではさまざまなものが「オブジェクト」として表されます。たとえばHTML文書は「要素」「属性」「テキスト」などのオブジェクトから成る集合として表されます。 オブジェクトで扱われるのは、文書内部のオブジェクトだけではありません。ウインドウや要素の座標、イベント、ブラウザーやユーザーインターフェースに関連するオブジェクトなどもあります。Webアプリケーションでは、これらのAPIを利用し複雑な処理を実現しています。 DOM
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」:phpspot開発日誌
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio
色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集:phpspot開発日誌
色々と使えそうなデータのビジュアリゼーションライブラリ集が２２個まとまったエントリのご紹介です。 FlashからPHPで描画するものや、APIを叩いて表示するものなど、既知の物も含まれていると思いますが、多数のグラフ作成用の仕組みが紹介されています。 Fly Charts マウス位置によって情報がポップアップされたり、タブでデータを区切ったり出来るFlash製のＵＩをしたユニークなグラフ描画ライブラリです。 単純に描画されるグラフ自体もデザイン性があっていい感じですね。 Fusion Charts こちらもFlash型のグラフ描画コンポーネントです。デモページを見ればその多機能さが分かります。 Axiis Flexで作られたデータビジュアリゼーション用フレームワーク。 Stlye Chart 色々な種類のユニークなデータビジュアリゼーションが実現できるライブラリ。 Jfree Chart
かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」:phpspot開発日誌
かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」 最初見たときはLightBoxも驚きましたが、これがかなり進化してきています。 TopUpは、次のように、閉じるボタンやドラッグ＆ドロップでき、リサイズできるOSのようなLightBoxを実現できます。 実現できる機能を簡単にまとめてみました。 画像のスライドショー ズーム時のアニメーション機能 iframe呼び出し機能 Flash SWF再生 Flash FLV再生 QuickTime再生 WindowsMedia再生 RealPlayer再生 という感じで対応可能なメディアは全て対応している模様。 １つの選択肢として覚えておいてよさそうですね。 以下のエントリを参照してください。 The #1 Javascript Pop Up - Get TopUp! - Home 関連エントリ 表示法が新しくセクシーなLi
要素を英数字や日付などでソートする機能ををJavaScriptに簡単機能追加:phpspot開発日誌
要素を英数字や日付などでソートする機能ををJavaScriptに簡単機能追加できる jquery.datasort.js が公開されています。 例えば、次のようなHTMLがあったとします。 <ul class='n'> <li>4.09</li> <li>4.10</li> <li>67.8</li> <li>100</li> <li>-98</li> <li>67.7</li> <li>23</li> </ul> datasort メソッドを実行すると次のようにソートが可能。 なんと、これを実現するためにJavaScriptコードはたった以下の1行だけ。 $('ul.n li').datasort({datatype: 'number', reverse: true}); 上記は、数字でソートを行っていますが、以下のデータ型についても要素を簡単にソートが出来て非常に便利です。 アルファベ
[JS]画像の形状に合わせてテキストを回り込ませるスクリプト -jQSlickWrap
通常画像にテキストを回り込ませる際は、テキストが矩形のエリアになりますが、これを円形や複雑な形状に合わせて回り込ませるスクリプトを紹介します。 スクリプトがオンの時は、画像の形状に合わせて回り込み スクリプトにはHTML5のcanvasが利用されており、IE6/7などの非対応ブラウザでは矩形に表示されます。 ※サイトにIE7でアクセスしたところ、「Google Chrome Frame をいれろ」と表示されました。 スクリプトを使用する際にはcanvasの知識は必要なく、floatやpaddingの設定はCSSベースで行えます。 jQSlickWrapはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sourceforge.jp
We’re getting things ready Loading your experience… This won’t take long.
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
http://code.google.com/speed/articles/html5-performance.html JavaScriptの高速化手法を紹介する、Googleのプロジェクト「speed」がリニューアルしたと言うので見てたら、「HTML5でパフォーマンスアップ」てなタイトルがあったので「なぬ？」と思って読んでみました。 HTML5使ってもそんな効力得られないだろう・・・と思って読んでみたら、「HTML5の記法を使えばnバイト節約」みたいなチョコザイな手法が主だったのでちょっと苦笑(^^; とはいえ、script要素に今度から加わるasync属性について等は、日本語で説明されている記事がほとんどないので、全体的に要約しておきます（あくまで翻訳ではなくて要約。時間がないので超適当です。正確なところは原文を読んでください）。 DTD HTML4までは以下のように書かなきゃいけな
jQueryでよくつかうインターフェイスをまとめた「Toolkit with 6 Awesome jQuery User Interface components」
jQueryでよくつかうインターフェイスをまとめた「Toolkit with 6 Awesome jQuery User Interface components」 タブメニュー・ツールチップ・スライドショーなどなど様々なWEBインタフェースを提供してくれるjQueryプラグイン化されていますので、実装もかなり簡易にでき、制作者にとってはありがたい存在です。今日紹介するのはjQueryでよくつかうインターフェイスをまとめたツールキット「Toolkit with 6 Awesome jQuery User Interface components」です。 各インターフェイス毎に様々な動きを実装できます。さらにToolキットは必要に応じてカスタマイズしてダウンロードできます。 詳しくは以下 ■tabs 様々なタブメニューを生成することが可能です。 ■tooltip 半透明からシンプルなものまで
IEのWebアクセス詳細トレースツール、jQueryデベロッパ絶賛 | エンタープライズ | マイコミジャーナル
Java/.NET Performance Monitoring, Analysis, Diagnostics & Profiling - Application Performance Management jQueryの開発者でありMozillaでJavaScriptエバンジェリストを務めるJohn Resig氏がDeep Tracing of Internet Explorerにおいてパフォーマンス分析ツールとしてdynaTrace AJAX Editionを紹介している。John Resig氏がこの手のツールを紹介するのは珍しい。 JavaScript関連の高速化処理についてはSteve Souders氏も有名だ。John Resig氏はSteve Souders氏がdynaTrace AJAX Editionについて書いたブログHigh Performance Web Sites
JavaScriptのビット演算の仕組みを理解する - 風と宇宙とプログラム
はじめに JavaScriptの数値表現はIEEE754の64ビットの倍精度型浮動小数ですが、ビット演算はどのように定義されているのでしょうか。今回はそのビット演算について解説します。この仕様は10年以上前から変わらないのですが、改めてその部分が書籍などでどのように解説してあるかを見ると、and, or などのビット演算が教科書的に書かれているだけで、任意の数値に対してどう定義されるかについてはほとんど説明されていません。 JavaScript以外の言語では？ JavaScriptについて説明する前に、他の言語ではどうなっているでしょうか。ここでは、ちょっと手を抜いて実際に実行した結果のみを示します。バージョンによっては結果が違うかも知れません。 まずは、一番単純な 0 との orを調べてみました。つまり x | 0 の結果です。 x C (gcc) Java Ruby Perl -123
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
JavaScript でリアルタイム 3DCG を実現する WebGL の使い方 - WebOS Goodies
先日、ちょっとした思いつきで WebKit の Nightly Build をインストールし、 WebGL を試してみました。 WebGL というのは現在策定中の新しい規格で、 JavaScript を使って本格的な 3DCG を実現する API です。同じ目的を持つものとして Google の O3D がありますが、 WebGL は OpenGL ES を管理している Khronos グループを中心に Google, Mozilla, Opera, NVIDIA, AMD といった企業が参画しており、標準化という面ではリードしています。 まだ策定中の規格なので今後変化するかもしれませんが（WebGL 1.0 が正式リリースされました）、少なくとも現状の WebKit の実装については使い方がわかったので、本日はそれをご紹介します。 WebGL は Web 上の最も重要なグラフィックス A
[JS]検索ボックスをSafari風デザインにするスクリプト -Safari Searcher
jQuery Safari Searcher demo 検索ボックスのスタイルは通常用とインクリメンタルサーチ用が用意されており、ダウンロードできるファイルには画像やアニメーションgifなど一式が揃っています。 ボックスの幅の対応は画像が500pxのため、それより小さい幅まではそのまま対応できると思います。 Safari SearcherはjQueryのプラグインのため、実装にはjquery.jsが必要です。
グーグルのJavaScriptツール集大成「Google Closure Tools」
2009年11月5日，Googleは自社サービス製品であるGmail，Google Maps，Google Docsなどの開発に使用しているJavaScriptアプリ開発ツール群「Google Closure Tools」を一般公開しました。 "Closure"は一般的に，閉鎖や閉店といった意味で使われます。ツールの命名としては少しネガティブなニュアンスを感じますが，Google Closure Toolsの場合は，終結といった意味で，開発プロジェクトにおける最終ステップの仕上げ用ツール。すなわち“栓”という意味で中身があふれ出さないようにキッチリ閉めておくものといった意味合いから命名されているようです。 Ultimate（究極）に近い意味でGoogleの自信の表れと受け取った方がいいかもしれません。Googleで新規公開になったプロジェクトとしては珍しく，ベータ版の表記もありません（Go
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]多彩なカスタマイズが可能な画像を拡大表示するスクリプト -TopUp
TOKI WOKI. Scroll Clock