Ajaxでデバッグしよう - ＠IT
Webアプリ開発で、動作確認メッセージが出力できない。そんなときは、Ajaxでブラウザの動作ログをサーバに出力してみよう。 現在、至るところでWebを利用したシステム開発が行われています。デバッグに使用しているテクニックの1つに、古くからの技法として変数や動作したことを示すメッセージ表示などの情報を出力するものがあります。残念ながらWebアプリケーションの開発の現場では、その技さえ使えない場合があります。 最近のWebアプリケーションの開発は、サーバ側のJSPやサーブレットの開発では統合開発環境を利用できるようになり、大幅に開発効率が向上しています。また、開発中の動作確認だけでなく、リリース後はサーバ側で動作するプログラムへメッセージを埋め込んでログとしてファイルに残すこともできます。 これらのログ機能は、IBM社のWebSphere、MS社のInternet Information Se
【レポート】Canvas 3D Renderer & 3D WalkerでHTML Canvasの実力を知る (MYCOMジャーナル)
ColorJackなどもそうだが、最近、Flashや特別なプラグインをインストールしなくても3D描画をサポートするWebサービスが出始めている。今のところFirefox、Opera、Safariなどでは動作するが、IEでは動作しない。これは「HTML Canvas Element」を使っているからだが、ここでは同機能を紹介しておきたい。 HTML Canvas Elementは2Dのビットマップサーフェス。JavaScriptから直接描画できるキャンパスのことで、同機能を活用すると特別なプラグインをインストールすることなく、同様の機能を実現できる。HTML Canvas Elementは現在策定が進んでいる「Web Applications 1.0 - Working Draft」において規定されている要素のひとつで、現在のところ2Dコンテキストを規定しているが、将来的には3Dコンテキスト
【レポート】Webデベロッパの新・御用達サイト - MiniAjax.comへようこそ! | エンタープライズ | マイコミジャーナル
MiniAjax.comをご存知だろうか。2006年2月に開設されたサイトなのだが、Webデベロッパにとってかけがえのないサイトになるかもしれない。 最近のWebデベロッパ、とくにはじめて取り組んだ開発がWebアプリケーションシステムの開発であるような新進気鋭のデベロッパは、生まれながらにスニップの扱いに長けている。こうした若いデベロッパは、そもそも開発や学習に対する姿勢が旧来から開発をしてきたデベロッパとは異なっているようだ。まずWebで対象をしらべ、ネットワーク上に点在するスニップ(snip)、いわゆるソースコードの断片を探してして、編集して組み合わせて活用する、そんな技術に長けている。 現在Webアプリケーションに関する関心の中心のひとつがAjaxにあり、ライトでクールなインタフェースの実現が注目されていることは疑いの余地がない。この場合、重要になってくるのはAjaxスクリプト(Aj
CGI不可のサーバでもできるAjaxによるHTMLの動的な整形：CodeZine
はじめに ここ最近、Web 2.0という言葉と共にクライアント側のプレゼンテーション技術としてAjaxが非常に注目されています。しかし、Ajaxという技術用語や概念の解説、または書籍が多く出版されているにもかかわらず、Ajaxを応用したコンテンツやアプリケーションは、キーワードとしてのAjaxの人気から考えれば、少ないと言えるでしょう。多くの人がGoogleなどの大手サイトでAjaxを体験しているにもかかわらず、Ajaxが使われているのは企業や大手ポータルサイトなど、限定されています。 では、Ajaxはそれほど敷居の高いものなのでしょうか。質の高い開発集団や、高額な開発環境、またはサーバーなどのインフラストラクチャが必要となるのでしょうか。確かに、Googleと同じレベルのものを作ろうと考えれば、相応の費用と技術が要求されます。しかし、Ajaxという技術要素だけを見れば、けっして大企業に独
Ajaxの高度な使用例、Yahoo! pipes Ajax うきうき Watch 第18回 ─ ＠IT
Yahoo! pipes 話題のサービスです。検索エンジンやRSSフィードなど、さまざまなソースのデータを足し合わせ、フィルタリングし、望みの情報だけを抽出したフィードを作り出すことができます。シンプルな分かりやすさと操作性の良さが特徴です。 Yahoo! pipesは、サーバ側で実行されRSSフィードを出力するサービスで、Ajaxとは直接関係がありません。にもかかわらず、今回のトップで紹介した理由は、パイプのデザインツールが非常によくできているからです。 画面左側のパレットから、必要な機能を選んで配置します。場所は自由にドラッグして決めることができます。そして、パーツ間を線でつなぐと、自動的に滑らかな線で結び付けられます。パーツの場所を移動しても線は追従します。さらに、個々のパーツ内部は入力フィールドになっていて、編集できます。これはAjaxの高度な使用例として見る価値があるでしょう。
AJAXでやってしまう間違い:Geekなぺーじ
「Ajax Mistakes」という面白い記事がありました。 AJAXを使ってWebアプリを作る時に陥りがちな間違いを列挙していました。 以下、要約してみました。 かなり削っているので、詳細は原文をご覧下さい。 AJAXを使うためにAJAXを使う AJAXはカッコイイ技術です。 しかし、AJAXはツールでしかありません。 AJAXはオモチャではありません。 実験的にAJAXを使うために、不必要なところにAJAXを無理矢理使っている場合が多いです。 戻るボタンの動作を妨げる 戻るボタンはWebインターフェースで重要な役割を果たしていますが、JavaScriptとの相性は良くありません。 戻るボタンの機能を維持できない場合があることは、JavaScriptのみで構成されているページをお勧めしない理由の一つです。 ただ、使い勝手の良いサイトというものは、そもそも戻るボタンに依存しなくてもユーザが
【コラム】そろそろきっちりJavaScript 第1回 "Firebug"の導入〜関数リテラルとは? (MYCOMジャーナル)
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi
[ThinkIT] 第1回：Prototype.jsを使う準備 (1/2)
筆者がPrototype.jsに初めて出会ったのは、2005年9月ごろだったと思います。この頃、オブジェクト指向JavaScriptはまだまだ黎明期で、オブジェクト指向の書き方もさまざまな我流が存在していたことを覚えています。 もちろん、筆者も我流のオブジェクト指向で書いていました。しかし、すべてのエンジニアが我流の書き方をしていては、JavaScriptのオブジェクト指向は普及しません。 そんな時にさまざまなブログで取り上げられ始めたのがPrototype.jsでした。Prototype.jsにはクラスを定義するという機能があり、すべてのエンジニアが同じ方法でクラスを定義できるのです。それは、大きなインパクトでした。しかし、その当時Prototype.jsにはまとまったドキュメントが無く、目利きのJavaScripterたちはこぞってソースを読んでいました。 そして、そのことが図らずとも
PrototypeでAJAX開発を効率化：CodeZine
去る8月30日（土曜日）、ライトウェイトプログラミング言語（Lightweight programming Language）の総合カンファレンス「LL Future」が、なかのZERO（中野区もみじ山文化センター）大ホールで開催された。当日は前線の影響で時おり豪雨に見舞われる中、さまざまな言語のユーザーや開発者など千人近くが集まった。
再帰クイックソートの可視化: Days on the Moon
「いやなブログ - JavaScript でソートアルゴリズムを可視化」より。何も考えずに再帰処理のクイックソートの様子を逐次描画しようとするとこうなります。 function quickSort(data, begin, end, log) { if (begin >= end) return data; var pivotPos = begin; var pivot = data[pivotPos]; for (var i = begin + 1; i < end; i++) { if (data[i] < pivot) { var temp = data[i]; data[i] = data[pivotPos + 1]; data[pivotPos + 1] = data[pivotPos]; data[pivotPos] = temp; pivotPos++; } } log(da
Shibuya.js: ActionScript でクロージャ、継続渡し : torus solutions!
Shibuya.js Technical Talk #2 で、 発表をさせていただきました。ありがとうございました。 5 分の中にいろいろ詰め込もうとしたら、 訳の分からない発表になってしまいました。 発表者やスタッフのみなさんお疲れさまでしたー。 今回の発表では、 まず ActionScript（JavaScript）でのクロージャと継続渡しスタイルの実装方法の説明をし、 その後、 A* アルゴリズムというグラフの最短経路探索アルゴリズムを例にとって、 クロージャや継続渡しスタイルの便利さをアピールしようとしました。 発表資料 当日使った発表資料をおいておきます。 スライドの PDF デモの Flash（SWF） デモの ActionScript ソース Flash 8 を持っていれば、次の Fla ファイルを使ってデモを試すことが出来ます。 （Flash 8 の体験版 でも OK です
Javascriptで継続渡し - ヒビノキロク
id:nozom:20060317#1142577630の続き。世界で最も誤解された言語とも呼ばれるJavascriptを使って継続渡しを書いてみた。 なお、Javascriptの処理系としてRhino*1を使った。参考文献は『入門Javascript』(ISBN:4756138713)。 function fib(n) { if ((n == 1) || (n == 2)) return 1; else return fib(n - 1) + fib(n - 2); } function fib_cps(n, k) { if ((n == 1) || (n == 2)) return k(1); else return fib_cps(n - 1, function(v1) { return fib_cps(n - 2, function(v2) { return k(v1 + v2);
継続を使ってSjaxをAjaxに簡単に変換する方法 - llameradaの日記
JavaScriptによる全文検索エンジンの最初のバージョンはAjaxではなく、Sjaxであった。その為、サーバへのリクエストが発生する毎にブラウザが固まってしまい、応答性が悪かった。なぜ、Sjaxで記述したかというと、連続してサーバへリクエストを送り、しかも、サーバからのレスポンスに応じてリクエストを変更するようなAjaxプログラミングが面倒だった為である。このようなSjaxのコード例を次に示す（prototype.jsを使用）。 // (Sjax)サーバからpathのデータをoffsetの位置からlengthバイト取得 function fetch(path, length, offset){ var range = ["bytes=" + offset + "-" + (offset + length - 1)].join(""); var options = { method: "
最速インターフェース研究会 :: 遅延評価を使ってSjaxをAjaxに変換する方法
継続を使ってSjaxをAjaxに簡単に変換する方法 http://d.hatena.ne.jp/llamerada/20070220/1171984586 を見て。こんなのはどうだろう。 ユーザーからの入力や、非同期のHTTPリクエストなんかを、具体化されてないオブジェクトとして捉えて、それらを受け取った関数側が遅延オブジェクトを具体化するためのリクエストを投げて再試行する。ネストが深くならないですむ、同期処理で書く場合との変更点が少ない、あるいは完全に差異を無くすことができる。 alert(args)のコメントを外せば、引数が具体化されていく様子が分かるはず。 Function.prototype.receive_lazy = function(){ var orig = this; return function(){ var thisObj = this; var me = argu
檜山正幸のキマイラ飼育記 - JavaScriptで学ぶ・プログラマのためのラムダ計算
「JavaScriptによるテンプレート・モナド、すっげー簡単!」にて： 紙と鉛筆でラムダ計算を実行できることは必要だな、やっぱり。 なんて強調したので、ラムダ計算の入門、いってみよう。 [追記]練習問題集を追加しました。説明を読みながら、あるいは読んだ後で是非やってみてください。→「JavaScriptで学ぶ・プログラマのためのラムダ計算 問題集」[/追記] ※印刷のときはサイドバーが消えます。 内容： JavaScriptの関数リテラル ラムダ式ってなんだ ラムダ計算の体系と適用操作 ラムダ式の例をいくつか β変換 -- ラムダ計算のキモ！ β変換を何度か実行してみる 中間まとめ、まだ続きがあるよ JavaScriptの関数リテラル 最初に、JavaScriptに関する知識を確認しておきましょう。なお、JavaScriptの対話的実行環境については「もっともお手軽な対話的JavaScr
超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」:phpspot開発日誌
Programming and Designing for the Web FrogJS Javascript Gallery FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。 以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。 実装方法は、まずスクリプトを読み込みます。 <script type="text/javascript" src="scripts/p
JavaScript でソートアルゴリズムを可視化 - bkブログ
JavaScript でソートアルゴリズムを可視化 JavaScript でソートアルゴリズムを可視化するプログラムを書いてみました。元ネタは Jon Bentley による ソートアルゴリズムを可視化する Java アプレットです。 アルゴリズム 要素数 動作確認は Firefox 2, IE 7, Opera 9 で行いました。要素数は最大で200まで選べますが、かなり重くなるので遅いマシンで実行すると危険です。 English version is also available. ソースコード: sort-animation.js 解説 X軸が配列の添え字、Y軸が配列の要素の値を示しています。最初に要素がランダムに並んでいる配列 (値に重複なし) を作って、それを各種のソートアルゴリズムでソートする様子をアニメーションで表示します。 ただし、要素のあらゆる変更に対して毎回表示を更新し
IT戦記 - [javascript] JavaScript 1.7 の yield が凄すぎる件について
Firefox 2.0 beta 1 が出ましたね＾＾ さっそく、新機能のひとつ、JavaScript 1.7 の yield を使ってみました。 まず yield の動作を試してみた。 var i = 1; var g = (function() {while(1) {yield i; i++}})(); alert(i); // 1 g.next(i); g.next(i); alert(i); // 2これで分かったこと。 なんと、 yield は関数を途中で終了させている。。。！ 実は。 いままで、何度も関数を途中で終了できればなーと思っていた。 JavaScript 以外のほとんどの言語でそれが可能で、それが便利だからである。 それとはなにか、それとはスレッドである。 スレッドは CPU レベルで細かーく処理を止めて、いろんな処理の流れを同時に実行させているようなものだ。 yie
![IT戦記 - [javascript] JavaScript 1.7 の yield が凄すぎる件について](https://cdn-ak-scissors.b.st-hatena.com/image/square/ad78b71efb80ed38311469993c1d5028fd597bf2/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17391345971647525980%2F17391345971647551580%2F1527141769)
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsの未来