jQueryとも共存できる「Ext JS 3.0」入門 (1/4)
「デスクトップアプリケーション並みの美しいユーザーインターフェイスが作れる」と評判のJavaScript/Ajaxフレームワーク「Ext JS」の最新版、「Ext JS 3.0」が7月6日にリリースされました。「古籏一浩のJavaScriptラボ」第4回は、実際に簡単なサンプルを作りながらExt JSの魅力に触れる入門記事をお届けします。 （編集部） Ext JSとは？ 「Ext JS」は、米Ext JS, LLCが公開しているオープンソース（※）のJavaScript/Ajaxフレームワークです。「フレームワーク？ ライブラリーなら聞いたことあるけど……」と首をかしげる人も多いかもしれません。「Prototype.js」や「jQuery」、「Yahoo UI Library」「MooTools」などの有名なJavaScript/Ajax“ライブラリー”に対して、Ext JSは“フレームワ
これが新時代のJavaScriptなのか…サーバサイトJavaScriptフレームワーク·Ejscript MOONGIFT
JavaScriptはAjaxを境にして一気に進化の階段を上っている。JavaScriptフレームワークをはじめとして、様々なJavaScript周囲の実装が出始めている。そんな中にあって、JavaScriptの立ち位置はまだクライアントサイドが中心になっている。 サーバサイドJavaScriptのみならずアプリケーションフレームワークも提供 そろそろ一歩脱しよう。そう、サーバサイドJavaScriptを目指すのだ。 今回紹介するオープンソース・ソフトウェアはEjscript、サーバサイド&フレームワークのJavaScriptエンジンだ。 サーバサイドJavaScriptを実現する技術やソフトウェアは幾つか存在する。その中にあって、特にEjscriptに注目したいのはWebフレームワークも実装されている点だ。それもScaffoldやMVCのサポート、Webサーバ機能などがある。Ruby o
iTunes風のあのクールな容量比率ゲージを実装できるJavaScript「gauge.js」:phpspot開発日誌
gauge.js (javascript programmable gauge) iTunes風のあのクールな容量比率ゲージを実装できるJavaScript「gauge.js」 次のようなゲージを描画できるようです。 色はいろいろ選べてカラフルにすることも出来ます。colors指定で簡単指定 サイズも自由に調整可能なのでおき場所に困らないかも。(winth, height指定で直感的) Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+など殆どのメジャーブラウザで動作。 投票結果とか、サイトのアクセス解析の利用者比率なんかを表したりするのに使えそうですね。
JsDoc ToolkitでJavascriptのドキュメントを自動生成 - 小さい頃はエラ呼吸
2009.03.30追記 JsDoc Toolkit2.xでは、ディレクトリの構成が変わっていて、このエントリに記載した方法ではうまくいかないため、以下のエントリを参照してください。 JsDoc Toolkit2.1.0でJavascriptのドキュメントを自動生成する - 大人になったら肺呼吸 はじめに JSDocというJavascript用のドキュメントジェネレータがあるのを何日か前に知り、試してみようと思ったのだけど、Perlのモジュールを入れたりとPerl使いじゃない僕には分からないことが多く、敷居が高いなあと思っていた矢先、JsDoc Toolkitというツールがあることを知った。 JsDoc Toolkitは、JSDocのJavascript移植版らしい。実際にはJREを使って、HTMLドキュメントを生成しているみたいだけど、とりあえず今日試したところまでをメモ。 JsDoc
javascript - ソースを見せてかつ動かすための３つのtips : 404 Blog Not Found
2009年02月24日04:30 カテゴリLightweight LanguagesTips javascript - ソースを見せてかつ動かすための３つのtips livedoor Blogを私が愛用しつづけている理由のひとつが、JavaScriptを受け付けること。 おかげでかなりのentriesが溜まりましたが、それだけにで実行用のソースと表示用のソースを用意するのが人一倍おっくうに感じられます。そんなわけで、どうやれば怠慢をもっと発揮できるかをまとめてみました。 0. DOMにIDをふらずにデモる こんな感じのデモがあったとしましょう。「404 Blog Not Found:javascript - Array#sortがオレquicksortより遅い!?」にあるものを書き直したものです。 # of Items: よくあるのは、inputタグやpreタグにIDをふって、docume
2行でJavaScriptを高速化する方法 - rand's
id:amachangさんの 一行で IE の JavaScript を高速化する方法 - IT戦記 に対して、id:uupaaさんが http://d.hatena.ne.jp/uupaa/20081230/1230604575 でIE以外でも使える色々な方法を提案なさっています。でも、 「正直documentを_docに置き換えるの面倒＞＜」 そこで、たかがreplace(/document/g, '_doc')の手間を惜しむ皆様のために用意した、2行でJavaScriptを高速化する方法がこちら： script全体を(function(document){と})(document)で囲む これだね！ ベンチマーク uupaaさんの記事にあるB系のソースを使わせていただきました。 ブラウザ B0 B1 B2 B3 B4 B5 b6 IE 6 10281 4938 10844 4672
タイムテーブルを実装するための便利なJavaScriptライブラリ『today's timetable』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
Comet/Ajaxの上を行く技術 - Blog by Sadayuki Furuhashi
上を行くかどうかは知りませんが :-p Ajaxはクライアントの都合でサーバーに通信を仕掛けるpull型の通信ができ、Cometはサーバーが好きなタイミングでクライアントへデータを送りつけるpush型の通信ができるわけですが、新たに双方向の通信ができる技術を開発しました。 具体的には、JavaScriptとサーバーの間で双方向のRPCができます。すなわち、サーバーからクライアント側のJavaScriptのメソッドが呼べるし、逆にクライアント側からサーバー側のメソッドを呼ぶこともできます。 サーバー側で call("addMessage", "Hello!") とやると、JavaScript側の function addMessage(msg) { ... } という関数が呼ばれたりします。 この技術を使って、試しにチャットシステムを作ってみました ＞ デモ （ソースコード）*1 リアルタイ
ヨモツネット 実験室 » フォームに入力された全角文字を自動で半角に変換する
このスクリプトに機能を追加した valueconvertor.js を公開しています。アーカイブとしてこの記事は残してありますが、この replaceascii.js 機能をご利用する場合は、より安定している valueconvertor.js のご利用をおすすめします。 概要 フォーム入力時に『半角英数で入力してください』の項目があった場合、ユーザの入力ミスを少なくしてあげるために便利なスクリプトです。 ただし、JavaScript が使えない環境では動作しませんので、あくまでもオプションとしてお使いください。 動作確認用の DEMO ダウンロード 使い方 ダウンロードした replaceascii.js を XHTML ファイルの head 要素内などで読み込んでください。 このとき、replaceascii.js と読み込む XHTML ファイルの文字コードが同じになるようにしてくだ
Web::Scraperのjavascriptバージョンwebscraper.js - bits and bytes
perlのWeb::Scraperみたいな記述で、ページの中からデータを取り出すwebscraper.jsという小さなjavascriptのライブラリを書きました。 ブックマークレット データを取り出したいページでブックマークレットでwebscraper.jsを読み込んでFirebugコンソールで使います。 ブックマークレット webscraper コードwebscraper.js つかいかた Web::ScraperのSYNOPSISで例としてあげられているebayでapple ipod nanoを検索した結果からデータを取り出すときは 検索結果ページで上のブックマークレットを呼び出してFirebugコンソールで取り出す部分を記述します。 こんなかんじ。 SYNOPSISのperlのコードで変数$ebay_auctionに一度代入されている部分をそのままインラインで書き直すと my $e
わずか565バイトテトリスのプログラミング解説
「往年の名作「スーパーマリオブラザーズ」、あの濃い内容でわずか40キロバイト」に載っていたわずか565バイトのテトリス。文字数にして551文字。79文字*7行のプログラミングで、テトリスが動きます。 以下のソースコードをメモ帳に貼り付けて、htmlで保存すればテトリスが動きます。 <body onKeyDown=K=event.keyCode><script>X=[Z=[B=A=12]];h=e=K=t=P=0;function Y() {C=[d=K-38];c=0;for(i=4;i--*K;K-13?c+=!Z[h+p+d]:c-=!Z[h+(C[i]=p*A-Math.round(p/ A)*145)])p=B[i];!t|c+4?c-4?0:h+=d:B=C;for(f=K=i=0;i<4;f+=Z[A+p])X[p=h+B[i++]]=1 if(e=!e){if(f|B){fo
ECMAScript 4 の Draft をざっくり読んでみた - てっく煮ブログ
ECMAScript 第4版の最終ドラフトが公開された、というので、ざっくり読んでみた。PDF はこれ：http://www.ecmascript.org/es4/spec/overview.pdfこのドキュメントは Overview の最終ドラフト。このあと、Overview が固まって、そこから Specification が作られていくものと思われる。(追記) コメント欄で mal_blue さんから間違いを指摘や補足をしていただいてます。コメント欄もあわせてご覧ください。概要大まかな特徴はこんなところ。オブジェクト指向クラスとインターフェースがサポートされて、OOP なコーディングができるようになるよ。OOP なコーディング方法は ActionScript 3.0 と同じ（のはず）。 もちろん、ECMAScript 3 時代の手続き型な書き方も使える模様。厳密にも書けるnamesp
【ハウツー】ゼロからはじめるLightWindow 2.0 - Flashムービーも表示できるAjaxライブラリ (1) ゼロからはじめるLightWindow 2.0 - ムービーやPDFも表示できる多機能ライブラリ | パソコン | マイコミジ�
LightWindow 2.0とは? LightWindow 2.0はAjax(非同期通信処理)を利用して画像を表示するライブラリです。同じ種類のライブラリとしてはLightBoxやThickBox、GreyBoxなどがあります。その中でLightWindowは最も高機能なライブラリに位置しています。ページや画像だけでなくQuickTimeムービーやFlashムービー、PDFや他のサイト表示など非常に多くのデータをページ内に表示させることが可能です。 LightWindow 2.0はこのURLにあるページからダウンロードすることができます。 LightWindow 2.0公式サイト ページの一番下の方にある「lightwindow.zip(v2.0)」と書かれた文字をクリックするとダウンロードが行われます。 lightwindow.zip(v2.0)をクリックする ダウンロードされたファイ
MOONGIFT: » Webサイトを手軽にクールに「GreyBox」:オープンソースを毎日紹介
最近のWebサイトでは画面遷移をなくし、Ajax化するのが好まれる。とは言え、既存のサービスに対して実装するのはそうそう単純ではない。それにAjaxを使った場合、PVの計測が難しく、メディア等では取り入れづらい。 だが、これを使えば簡単にそれっぽい実装ができそうだ。 今回紹介するオープンソース・ソフトウェアはGreyBox、Webページにも対応したCSSポップアップウィンドウだ。 GreyBoxは最近良く見かける、画像をクリックすると同じページ上でポップアップするライブラリになる。特徴的なのは、画像のみならずWebページでもポップアップしてくれる点だ。 既存のAタグに対して情報を埋め込めば、それだけでクリックすると背景をグレーアウトし、クールなポップアップを表示してくれる。これならばお問い合わせフォームや、詳細検索等のフォームでも使えそうだ。 大きさを指定したり、フルスクリーンでの表示もで
ブックマークレットから起動できるブックマークレットエディタを作ってみた | fladdict
ブックマークレットを簡単に作れるブックマークレットを作ってみた。 ■これをブックマーク ブラウザから任意のページでブックマークレットを実行すると、↓のようなエディタが出現します。 ここにJavaScript書けば、直接ページに対してスクリプトをインジェクトできます。 ・RunボタンでページにJavaScriptを適用 ・一応タブエディタ ・エディタに書いたコードはページをまたいで持ち越せるよ。 ・Copy as Bookmarkletボタンで、javascript:(function()～みたいな形のワンライナーに整形してくれる。 そんな感じ。Flexアプリケーションをブックマークレットから起動するってコンセプトは、ちょっとこれから流行るんじゃないかと思ってるのですが、誰もやらないのでとりあえず作ってみました。 もうちょっと完成度高めたかったのだけど、最近忙しくて１ヶ月以上放置してるのでも
MOONGIFT: ? サイトのパフォーマンス向上を目指そう「YSlow」:オープンソースを毎日紹介
AjaxやCSSや様々なJavaScriptライブラリによって、サイトが豪華になっていく反面、全体的なシステムパフォーマンスは急激に悪化している。JavaScript等で、このサイトは重いなと感じる事が少なからずあるはずだ。 便利な機能を提供する限り、これは変えられないのだろうか。いや、そんな事はない。変えるべきポイントは幾つも存在する。それを的確にアドバイスしてくれるのがこのツールだ。 今回紹介するオープンソース・ソフトウェアはYSlow、Firebugと連携するパフォーマンスチェッカーだ。 YSlowはYahoo! Inc.により開発、提供されているソフトウェアで、FirefoxのアドオンであるFirebugと連携して利用する。パフォーマンスを改善したいサイトにアクセスし、YSlowのアイコンをクリックすれば良いだけだ。 チェックされる項目はHTTPリクエストの数、Gzip圧縮されてい
yohgaki's blog - いろいろ変わったXSSがありますが...
(Last Updated On: 2007年10月12日)私が知らなかっただけかもしれませんが、これにはかなり驚きました。いろんな所で問題が指摘されていますが、ECMAScriptにXML機能を追加したのはどうなんでしょうね…. 確かにかなり便利なのですが以下のコードでスクリプトが実行されることはほとんど知られていないでしょうね。 <script> 123[”+<_>ev</_>+<_>al</_>](”+<_>aler</_>+<_>t</_>+<_>(1)</_>); </script> 好むと好まざる関係なくFirefox 1.5から使えるのでWeb開発者は知っておかなればならないです。 日本語訳 http://www.ne.jp/asahi/nanto/moon/specs/ecma-357.html 原文 http://www.ecma-international.org/pu
MOONGIFT: » XHTMLにも対応したWYSIWYGエディタ「Whizzywig」:オープンソースを毎日紹介
※ 画像は公式サイトデモより。 テキストエリアをHTMLオーサリングツール風にするソフトウェアは各種存在する。有名なものとしてはFCKEditorやSPAW Editor、Xinhaなどがある。 この手のソフトウェアの難点として、HTML構造は汚い事が多かった。XHTML Validなサイトを作っている場合はこれを使ってみる事をお勧めする。 今回紹介するフリーウェアはWhizzywig、Webベースのリッチテキストエディタだ。 Whizzywigは各種文字装飾をボタンを押すだけで簡単にできる。画像挿入（アップロードには未対応）、テーブル組もできる。日本語はまだだが、多言語対応も想定されている。 そして最大の特徴とも言えるのがXHTML Validなソースを作成できる点だろう。イメージタグも<img 〜 />のようになる。また、独自のCSSを認識させる事もできるので、見栄えと照らし合わせなが
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」:phpspot開発日誌
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 2007年10月11日- Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript I believe that it isn't necessary to point out the benefits of having a sitemap somewhere on your site.サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 スタイルなしの状態のリストを美しくツリー状に整形できます。 JavaScript によってツリーがクリックで開閉できます。 3種類の違うスタイルのサンプルが公開されているのでお好みのサンプ
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
