【中級】Web開発の新手法Ajax 第1回
Webアプリケーションは，クライアントからサーバーに要求を送信し，その結果をブラウザ内に表示するという流れが一般的だ。それに対してAjaxでは，ページの一部だけを差し替えたり，マウスの移動をきっかけにコンテンツを動かせたりする。そうしたメリットがある一方で，標準外の技術を利用するのでWebブラウザの種類に依存してしまう。 Webアプリケーション開発の新手法として注目を集める「Ajax（エイジャックス）」。前編と後編の2回に分けて，Ajaxの基本的な仕組みや特徴，周辺技術などを解説する。前編となる今回は，Ajaxの利点と利用する際の注意点，そして仕組みを理解するために肝となるソースコードの概要を説明する。 JavaScriptが主役 画面1●Google Mapsの画面 場所を検索したり航空写真を見たりできる地図サービス。Ajaxアプリケーションとして構成されており,地図はマウスでスクロール
最速インターフェース研究会 :: 萌ディタとSleipnirとWEBrickを使って人のサイトのCSSをリアルタイム編集するデモ
Shiubya.js #1で話したネタですが、Winkでデモを作ってみました。 http://la.ma.la/misc/demo/realtime_cssedit.htm エディタとブラウザが並んでて窮屈ですが、実際はこれを20インチワイド液晶縦置きデュアルでやります。 仕組みは、WEBrickでローカルプロキシを立てて、同名のファイルがローカルにある場合は内容を置き換えて表示する、というもので、CSSやJavaScriptを編集するのに向いています。 プロキシサーバーはPerlで書かれた同等のものがここにあります。 http://www.ornithopter.jp/archives/2006/05/perl_perl.html 自分が使ってるのは必要に応じて行き当たりばったりに拡張していったりするのですが、現時点でのソースを置いておきます。 http://la.ma.la/misc/
gooブログ無料版にもはてブのコメント数を表示しちゃうぞ！ - EKKEN♂
やぁ！ おひさしぶりんこ。 はてなブックマークでは、そのブログの記事のはてなブックマークコメント数を表示するサービスが始まりました。 gooブログ無料版ではHTMLをカスタマイズすることが出来ないので、これを自動的に表示することはむるなんだけど、手軽に表示させるブックマークレットをご紹介。 以下の文字列をコピペして、テキストエディタなどの機能で「全角→半角」変換を行ってください。 ｊａｖａｓｃｒｉｐｔ：ｖｏｉｄ（ａ＝ｐｒｏｍｐｔ（％２７％２７，％２７＜ｉｍｇ ｓｒｃ＝％２２ｈｔｔｐ：／／ｂ．ｈａｔｅｎａ．ｎｅ．ｊｐ／ｅｎｔｒｙ／ｉｍａｇｅ／％２７＋ｌｏｃａｔｉｏｎ．ｈｒｅｆ＋％２７％２２％２０＞％２７））； これのブックマークレットをブラウザのお気に入りにいれて、はてなブックマークのコメント数を表示したい記事上で使えば、例の赤い数字とusersの画像のタグが完成。 応用すれば、自動的にその
Ajax実現にも便利なJavaScriptパッケージ - Dojo 0.1公開 | エンタープライズ | マイコミジャーナル
The Dojo Foundationは29日(現地時間)、はじめての公式パブリックリリースとなるDojo version 0.1を公開した。Dojo version 0.1に関する多くのドキュメントは近日中に公開される予定。DojoはAcademic Free License version 2.1のもと公開されているオープンソースのJavaScriptパッケージ集で、ウェブアプリケーションを開発するためのDHTMLツールキットということになる。Academic Free License version 2.1はBSDライセンスによく似たライセンス。 Dojo version 0.1には次の5つのエディションが用意されている。 AJAXエディション I/O (XmlHttp)エディション Event + I/Oエディション Widgetsエディション The "Kitchen Sink"
日付入力をクールにやりたい！！：UX ～ユーザーエクスペリエンス～：オルタナティブ・ブログ
開発者の皆さん、お久しぶりです。僕の街ザグレブではもうワールドカップの話題で持ちきりです。 毎朝メールボックスにジダンに関するジョークやら、Flashで頭突きして倒すゲームやら舞い込んできて 読むだけでも大変です。 今日はDojoライブラリを使った日付入力の方法を紹介したいと思います。 なぜDojoライブラリかと言いますと、商業的に成功しているからです。 スポンサーとしてIBM,Sunがついているのでしばらくはちゃんとバージョンアップを 続けていくと思われます。 企業としてAjaxライブラリを選ぶとなると、それなりに勉強にコストが掛かりますので せっかく１，２週間かけて覚えたライブラリの開発が止まってしまうとそのコストが無駄になってしまいます。 そういう視点でDojoライブラリはお勧めです。もちろん機能設計もちゃんとしていて、簡単に使おうと思えばサックリ使えますし、 ちょっと複雑な場合でも
難読化されたJavaScriptコードを元に戻す:phpspot開発日誌
JsDecorder Decode javascript obfuscated code ! 難読化されたJavaScriptコードを元に戻すJsDecorder。 JavaScriptはコードが見えてしまい、サイズも大きくなるので難読化＆圧縮されたソースは結構ありますが、このツールを使えばWEB上で読みやすくデコードできます。 ↓ オンラインですぐ使えるというので便利ですね。 この逆は、「オンラインでJavaScriptコードを簡単圧縮＆難読化」で紹介したサイトで行えます。
次期、散財.com の JS 管理は dojo toolkit - IT戦記
散財.com 開発ログ（自分用メモ） 最近の JavaScript 開発の悩み 無駄な処理をはさむと、処理が遅くなる。orz 細かくファイルを分けて、必要なものだけインクルードするようにする。orz ファイル数が非常に多くなる。orz ファイルの依存関係を脳内解決。orz ファイル数が多いので、リロード時の描画が遅い。orz 依存関係が脳内フラッシュして、カオスへ突入。orz バグが出た部分を直すと他のページへの影響が不明。orz 例えば、はてなの「この」編集ページ。 <script type="text/javascript" src="/js/prototype-1.4.0.js"></script> <script type="text/javascript" src="/js/cookie.js"></script> <script type="text/javascript" s
GIGAZINE - いろいろな効果を追加できるJavaScriptライブラリ「jQuery」
ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。 ダウンロードや実際の例、使い方などの各種取り扱い説明は以下の通り。 jQuery: New Wave Javascript http://jquery.com/ 上記ページの「Run」をクリックするとその機能の一端を垣間見ることができます。面白い効果です。 その他のデモとしてはこんな感じでいろいろなところに使えます。特に一番下の「Example G」のボタンをクリックしてから本文の上にマウスを乗せると色が変わり、フェードしながら元に戻るというのはシンプルながら面白い。 JQuery http://codylindley.com/blogstuff
iandeth. - ActionScript - ループ中でクロージャ作る際の注意点
iandeth. Perl, Flash ActionScript, MySQL, Movable Type, システム開発 - そんなテーマのサイトdeth. まずはクロージャ基本形 function setFunc (){ var lex = '1 dayo'; return function (){ return lex }; } var obj = {}; obj.func = setFunc(); trace( lex ); // undefined trace( obj.func() ); // 1 dayo これをループ中におこなうと・・・ // set closure var arr = []; for (var i=0;i<3;i++){ var obj = {}; var lex = i + ' dayo'; obj.func = function (){ return
Timeout your Mouseovers
This is a fun effect I built for Chowhound that does one better for mouseovers. The problem with most menu systems is that they’re really touchy whether you’re too fast or slow with the mouse. The trick is to use a timeout with the effect, so it will wait a fraction of a second to pop-up, and a fraction of a second to go away…just enough to make the effect feel solid and not finicky. I won’t take
Enjoy×Study - JavaScriptの正規表現で、メタ文字の"\s","\d"はクロスブラウザでの互換性が無い。
正規表現で"\d"は、"[0-9]"と一緒だとずっと思っていましたが、FireFoxでは全角数字もマッチします。(FireFox1.5.0.4で確認) /\d/.test('1') // =>true /\d/.test('１') // =>trueちなみにIE 6、Opera 9では、"/\d/.test('１')"はfalseとなります。 気になったので、"\s"、"\w"についても調べてみたところ、下記のような結果になりました。 パターンFireFox 1.5,2.0IE 6, 7Opera 9 /\s/.test(' ') // 半角truetruetrue /\s/.test(' ') // 全角truefalsetrue /\d/.test('1') // 半角truetruetrue /\d/.test('１') // 全角truefalsefalse /\w/.test('
マウスオーバーのタイムアウトを使ったJavaScript - GIGAZINE
通常のマウスオーバーを使うメニューだと、展開まで早すぎる、あるいは遅すぎる場合が多々あるわけですが、このスクリプトだとちょうどいい速度で展開してくれるらしい。 スクリプトの詳細は以下の通り。 Timeout your Mouseovers 上記ページの「Roll over me」の上にマウスを乗せれば展開されます。確かに今までのものよりもスピードやタイミングがちょうどいい感じな気もする。ちょっと一呼吸置いてから展開される感じですね。
Collection & Copy - AJAX/JavaScriptライブラリまとめ
AJAX/JavaScriptライブラリまとめ (2005/9/6 Revision .1.3) 翻訳 原文：Survey of AJAX/JavaScript Libraries Copyright 2005 by Sergio Pereira, Joe Walker, Matthew Eernisse ※本翻訳は、2005/9/6の1.3版を基に作成されています。原文であるWikiページは、1.18以上に更新が進み記載されているライブラリの数が増え、複数の誤りが修正されているようです。最新の情報は原文を参照してください。 Prototype (http://prototype.conio.net/) ライセンス：MIT 概要： Prototypeは、動的なウェブアプリケーションの開発を容易にするためのJavaScriptフレームワークです。Ruby on Railsフレームワーク駆動で
ブラウザに合わせたスクリプトを実行する：CodeZine
はじめに ブラウザの種類やバージョン、各々のブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを、クロスブラウザスクリプトと言います。本連載では、クロスブラウザスクリプトを実現する方法について順を追って解説します。 クロスブラウザスクリプトを作る上で、それぞれのブラウザがどのJavaScriptをサポートしているかを知ることは大切です。さらに、それを知った上で、そのスクリプトが実行されるブラウザの種類やバージョンを特定することが、すべての基本となり、最も重要な事柄の一つになります。 前回、『ユーザエージェントからブラウザの種類やバージョンを判断する』では、JavaScriptに対応した主なブラウザがサポートしているJavaScriptを明確にしました。そしてさらに、ブラウザの種類やバージョンに関しては、ブラウザ自身の素性を表すユーザエージェントを元に、どのブラウザがどのようなユ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript++かも日記 - 1997年からの
JavaScript++かも日記 - 1997年からの
Dojo Toolkit
Shibuya.js Technical Talk #2 のメモ
JavaScript++かも日記 - 1997年からの
JavaScript++かも日記 - 1997年からの