いま注目のExt JS
美麗かつ高機能なUIコンポーネントが満載のExt JS Ext JSは日本では実際の利用例はまだ少ないですが、今後使われていくことが増えるであろう注目のAjaxライブラリの1つです。 Adobe Airのベータ版の時にサンプルアプリケーションとしてHTMLベースでできたRSSリーダー「Fresh」のデモがありましたが、実はそれはExt JSで作られていました。 Ext JSは当初、YUI（The Yahoo! User Interface Library）用の拡張ユーティリティ「yui-ext」としてJack Slocum氏により開発がスタートしました。その後、YUIのほかにベースライブラリとしてprototype.jsやjQueryもサポートするようになり、名前が「Ext JS」となり、さらに現在では独自のベースライブラリも用意され、ほかのライブラリに依存せずに、Ext JS単体でも開発
第2回 JSONを使ってみよう！ | Think IT
JSONを使ったAjaxアプリケーション 前回はJSONの概要と記法、そしてJavaScriptでの利用方法について説明しました。連載2回目となる今回はAjaxアプリケーションでのJSONの利用方法を、サンプルを作成しながら紹介していきます。 なお、本記事のサンプルを実行するにはApacheなどのWebサーバが必要になります。また、本記事の後半ではPHPを用いた動的なJSONの生成方法にも触れますので、Apache上でPHPが利用できる環境を用意してください。環境の構築方法については割愛します。 prototype.jsについて prototype.js（http://www.prototypejs.org/）はさまざまなJavaScriptライブラリの中でも最も初期に登場したもので、多くのAjaxアプリケーションで利用されています。 DOMの操作などAjax以外にも便利な機能を備えていま
[Think IT] 【これならわかる！JavaScript/Ajax】やりなおしのJavaScript 第1回：そろそろ本気で学びませんか？ (1/3)
画面の一部を瞬時に切り替える方法 JavaScriptを勉強したいけど、プログラム構造がよく分からなくて、なんとなく使っている人は多いのではないかと思います。市販の本やWebサイトにはJavaScriptのサンプルがたくさん載っているので、必要なところをコピー＆ペーストしてしまうと、JavaScriptの文法が分からなくても動いてしまいます。 しかし、このような使い方をしていると、JavaScriptサンプルを少しだけ修正したいという時に対応できなくなります。これでは「JavaScriptを使える」とは言えませんよね。 そこで、本連載では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて紹介していきましょう。 最初のトピックでは、JavaScriptを使ってHTMLのコンテンツを入れ替える方法について紹介してます。この技術は、最近話題になっているAjaxのベース
onclick 属性問題について - IT戦記
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜ 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 （あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。） JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？ たとえば 以下は、クリック時に href に GET を送るための oncli
Ajaxライブラリの変遷
Ajaxライブラリが生まれた経緯 Ajaxテクノロジで開発する上で、大きな問題となることの1つは各Webブラウザ間の互換性問題です。主にInternet Explorer（以下、IE）とそれ以外のWebブラウザの仕様の違いに依存しています。 まず、Ajaxの肝となるXMLHttpRequestの呼び出し方からして異なっています。 IEの場合は、「xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")；（IE７はXMLHttpRequest()でも可能）」となり、それ以外のWebブラウザでは、「xmlhttp = new XMLHttpRequest()；」となります。 また、オブジェクトにイベントをアタッチするやり方も違います。 IEの場合は、「element.attachEvent('onclick', handler);」となり、それ以外のWe
Comet/Ajaxの上を行く技術 - Blog by Sadayuki Furuhashi
上を行くかどうかは知りませんが :-p Ajaxはクライアントの都合でサーバーに通信を仕掛けるpull型の通信ができ、Cometはサーバーが好きなタイミングでクライアントへデータを送りつけるpush型の通信ができるわけですが、新たに双方向の通信ができる技術を開発しました。 具体的には、JavaScriptとサーバーの間で双方向のRPCができます。すなわち、サーバーからクライアント側のJavaScriptのメソッドが呼べるし、逆にクライアント側からサーバー側のメソッドを呼ぶこともできます。 サーバー側で call("addMessage", "Hello!") とやると、JavaScript側の function addMessage(msg) { ... } という関数が呼ばれたりします。 この技術を使って、試しにチャットシステムを作ってみました ＞ デモ （ソースコード）*1 リアルタイ
第31回 他サイトに埋め込まれるJavaScriptを作るときの作法
前回（「JavaScriptの動作を軽くするための工夫」）は，JavaScriptの体感速度を上げるために開発されている様々な工夫についてみてきました。今回も引き続き，JavaScriptとサービスの使い勝手について考えてみます。今回取り上げるのは，ほかのサイトに埋め込まれて利用されるJavaScriptに関する話題です。 「ほかのサイトに埋め込まれて利用されるJavaScript」というのは，例えばブログパーツやウィジェットなどで使われている，「ページにこのJavaScriptを埋め込めば，この機能が簡単に貼り付けられますよ」というタイプのものです。 前回紹介したRead/WriteWebの記事「JavaScriptがウェブを遅くする--今できる緩和策を考える」でも，主に触れられているのは，ウィジェットに関するものでした。 ここで述べられていることは，JavaScriptを使ったブログパ
MOONGIFT: � Opera発Firebug対抗ツール「Opera Dragonfly」:オープンソースを毎日紹介
最近、Operaはサイトの動作確認用くらいにしか使っていなかった。Web開発者にとって、ブラウジングと開発を分けるのは面倒というもの、ブラウジングで便利なブラウザをそのまま開発に使いたいし、逆もまた然りだ。 スクリプト その点、Firefoxにとって大きな力になっていたのがFirebugだ。これがあるからFirefoxから乗り換えられない人も多いはず。そしてOperaから同種のソフトウェアが登場した。 今回紹介するオープンソース・ソフトウェアはOpera Dragonfly、Opera内蔵の開発者向けツールだ。 Opera DragonflyはOperaに内蔵して提供されているソフトウェアだ。ツールメニュー→詳細ツール→開発者用ツールから実行する。JavaScriptを見たり、コマンドラインから実行することはもちろん、DOMを使ってHTMLの階層構造も閲覧できる。 DOM 他にも読み込まれ
[Think IT] 第1回：Ajaxの基礎知識 (1/3)
Ajaxの定義を考える 皆さんはAjaxという言葉がなんの略かご存じですか？ AjaxはAsynchronous JavaScript + XMLの略称で、Asynchronousは非同期という意味です。この言葉はデザインコンサルティング会社Adaptive PathのJesse James Garrett氏によって提唱されました。 その内容はadaptive pathの2005年2月18日掲載記事で読むことができます（出典：Ajax: A New Approach to Web Applications）。 その記事によればAjaxという具体的な技術があるわけではなく、既存技術の組み合わせによって定義されると述べられています（図1）。 では、それを満たさないとAjaxと言えないのでしょうか？ データ通信に関して最近ではJSONというフォーマットが主流でXMLを使うことは少ないですし、動的
JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
20行のJavascript+canvasでここまでできる | 秋元@サイボウズラボ・プログラマー・ブログ
# Internet Explorer不可 OZONE Asylumというフォーラムで出された今月のお題「20行のJavascriptでできるだけ多くのエフェクトを同じスクリーンに出す」に対して出てきたすごい答がこれ。 ソースを見ると、たしかに有効な行は20行しかない。 Opera9.5とFirefox3(どっちもまだベータ)で作者の意図どおり動くとのこと。Firefox2やOpera9でも動き自体は見えるが、Firefox2では光る効果が見えなかったり。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘いただければ幸いです。最新の状況を調べて新しい記事を書
SeleniumでJavaScriptを使う方法いろいろ（変数・関数などの利用） | colori
Selenium(Selenium Core, Selenium IDE, Selenium RC など)でテストケースを書く場合、かゆいところに手を届かせたい時に是非とも利用したいのがJavaScriptです。 しかし、まだまだその情報が気軽に手に入らないのが残念なところ。 「ないなら書いてしまえ！」ということでSeleniumでJavaScriptを利用したい場合に使える方法をまとめてみることにしました。 逆引き辞典にしたいのかリファレンスにしたいのかわけがわからんカテゴライズになっていますが、少しづつ増やしていくので気長にお待ちください。 使用バージョンはSelenium 1.0です。 目次 JavaScript基本編 Selenium空間とページ空間の違いによるJavaScriptの使い分け JavaScriptによるDOM指定でエレメント(要素)を特定する 各種コマンドの入力欄に
XPath入門、実用例 - 素人がプログラミングを勉強していたブログ
すべての要素 //* div直下のp //div/p style属性を持つspan //span[@style] alt属性のないimg //img[not(@alt)] idがheaderな要素 id("header") rel属性がshortcut iconなlink要素 //link[@rel="shortcut icon"] 子要素にimgを持つa要素 //a[./img] 子、子孫にa要素を持つh2要素 //h2[.//a] 子要素にulがないdiv //div[not(.//ul)] javascript:から始まるhref属性を持つa要素 //a[starts-with(@href,"javascript:")] alt属性の値がsrc属性の値と同じであるimg要素 //img[@alt=@src] alt属性の値がsrc属性の値と異なるimg要素 //img[@alt!=@
Othello Game
(define #t 1) (define #f 0) (define -> (jsspform "function(self, prop) { var self = ev(self, this), prop = self[prop]; return (typeof prop == 'function') ? function() { return prop.apply(self, arguments) } : prop }")) (define if (jsspform "function(cond, t, f) { return ev(cond, this) ? ev(t, this) : ev(f, this); }")) (define cond (jsspform "function() { var i; for(i = 0; i (jslambda "function(a, b
Scheme on JavaScript でオセロゲーム - elm200 の日記(旧はてなダイアリー)
動機 先日、JavaScript 界にその名をとどろかす、かの id:amachang にお会いする機会に恵まれた。amachang は、評判どおり、やさしく礼儀正しい好青年であった。最近、私は Gauche を勉強していて、その流れで amachang が作った JavaScript で動く Scheme の話になった。いろいろ教えていただいたので、そのささやかなお礼に、amachang の作った Scheme 風処理系のうえで、私が Gauche のために書いた簡単なオセロゲームのプログラムを走らせてみた。 謝辞 まずは Scheme on JavaScript を作ってくれた amachang に感謝します。ソースコードはわかりやすかった。言語実装者の気分がちょっぴり味わえて楽しかった。 あとはオセロゲームのアルゴリズムを解説しているこのサイトにも大変お世話になっております。非常に整
MOONGIFT: » JavaScriptでXPath/XSLT「AJAXSLT」:オープンソースを毎日紹介
個人的にはあまり得意でないXSLT。XML自体がどうも冗長的な感じがするのと、さらにそれを解析して出力するというのがどうも合わない。が、時代はXMLでのデータやり取りが主流になっている。好き嫌いで判断してはいけない。 XPathのデモ 手軽にXPathやXSLTを利用できるツールも登場している。これはJavaScriptから操作するライブラリだ。 今回紹介するオープンソース・ソフトウェアはAJAXSLT、JavaScriptによるXPath/XSLT向けライブラリだ。 AJAXSLTはJavaScriptベースでXMLを解析し、XSLTと合わせて出力するライブラリだ。その解析の中でXPathが利用されているようだ。複雑なXMLを利用する場合には、DOM操作よりも効率的に開発できるXPathが利用できるのは嬉しい。 XSLTのデモ そして取得したXMLを整形して表示する際に利用するのがXSL
div要素もリンクにするjavascript「jquery.biggerlink」
リンクと言えばaタグですが、ボックス単位の大きなdiv要素もリンクにしたくなります。 jquery.biggerlinkはそんな我が儘を叶えてくれるjavasrciptです。 sponsors 使用方法 jquery.biggerlinkからjquery.biggerlink.jsを、jQueryからjquery.js（v1.2.1）をダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.biggerlink.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#id名 div')
JavaScriptライブラリのPrototypeで作られたRPGゲーム『ProtoRPG』 | 100SHIKI
JavaScriptでここまでできる！を体現したようなサイトのご紹介。ProtoRPGはJavaScriptライブラリのPrototypeを駆使して作られたRPGゲームである。 矢印キーで移動し、U（Use）やT（Talk）を使いながらゲームを進めていくことができる。ゲーム感は一昔前の家庭用ゲーム機とまったく変わらない。ブラウザでここまでできるかぁ、と実に感慨深い。 なお、同サイトにはブログやWikiも併設されており、このゲームがどのように作られたかも公開されているようだ。技術的な話に興味がある人は覗いてみるといいだろう（まだ記事数は多くないが・・・）。 ブラウザで何ができて何ができないのか。そうした知識は常にアップデートしていきたいですね。
秋元@サイボウズラボ・プログラマー・ブログ: lightboxライブラリ37個の比較表
写真などをページ上で強調表示する、いわゆるlightbox効果を実現するJavascript+CSSライブラリを37個も集めて、ライブラリサイズやそれぞれの機能、どのJavascriptライブラリを使っているかなどで絞り込めるようにした比較表が発表されている。 このようなUI系のライブラリを使う際には、自分が普段使っているベースライブラリとの親和性などが重要だと思うので、このような形でまとまっているとdel.icio.usで”lightbox”タグで絞り込む、といった調べ方よりも楽にライブラリが選べていい。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社
