作って理解するAjax (2)：IT Pro
図2●作成したクライアントをテスト<br>クライアントから受信したデータをそのまま返送するサーバーを使ってテストした様子。入力データがそのまま表示されるのが分かります。 前回はAjaxの概念や利点を説明し，筆者が作成したAjaxアプリケーションを紹介しました。紹介したものの一つがインクリメンタル検索用アプリケーションです。検索ボタンをクリックして初めて検索される通常のWeb検索とは異なり，インクリメンタル検索はキーワードを1文字入力するたびに即座に検索を実行します。検索結果はKWICという形式で表示します（図1[拡大表示]）。KWICはKeyWord In Contextの略で，前後の文脈付きで検索結果を表示する形式です。 今回から2回にわたり，このインクリメンタル検索を実現するAjaxアプリケーションを作成します。単なる動作説明用の「おもちゃ的な」サンプルではなく，実用性のあるツールとし
InteractiveJS その３ - nak2kのブログ
moongiftさんからコメントがきていたので慌てて修正版をアップロードするエントリー（汗 以下の点を修正しています。 グローバルコンテキストの名前の汚染を最小限になるように修正。 入力されたスクリプトの実行をグローバルコンテキスト直下でevalするように修正。 実行時にスクリプトのあるディレクトリにlibサブディレクトリがなくてもエラーにならないように修正。 終了はCtrl+Zでできます。 ijs.jsのダウンロード ライセンスはこの内容だと Public Domain Software ってことにしても問題ないかな、と。 （まさかMoongiftさんのようなとこから紹介の問い合わせが来るとは思ってなかったのであまり考えてなかったのです^^;） 一応、これまでの経緯へのリンク。 Win版インタラクティブJavaScript - nak2kのメモ帳 InteractiveJS その２ -
JavaScript あれこれ
2005-08-31 カテゴリは Ajax だけど、その中の「j (JavaScript) 」の話。 便利なライブラリ prototype.js を使うにしても、やっぱり JavaScript の基礎が分かってないと辛い。 Object.extend = function(destination, source) { ... } Object.prototype.extend = function(destination, source) { ... } の違いとか。 といっても、 Web ページのお化粧としての JavaScript の解説ページは多々あるけど、言語そのものの機能について言及しているページはあまり見かけない。 ざっと調べた中で、読んでおいた方がよさそうなものをピックアップ。 オブジェクト指向プログラム言語としてのJavaScript JScript - Dynamic S
fladdict.net blog: Google Analyticsを制御するクラスを作ってみたよ
昨日のエントリをベースに、FlashからAnalyticsを制御するクラス、GAnalyticsを作ってみた。 サンプル、ドキュメント一式はこちら まずは基本的な使い方。 ページの遷移を集計したい場合とかはこんな感じで行うわけです。 var ga = GAnalytics.getInstance(); ga.call("集計したい/イベントを/パス的表現で"); 次にコンポーネント等のDOM3イベントと、Analyticsとのバインディング機能。 「イベントの発行～Analyticsでの集計」という一連の処理を自動化するわけです。 ボタンのクリックを集計する場合は、こんな感じですね。 var ga = GAnalytics.getInstance(); ga.bindEvent( Buttonインスタンス, "click", "menu/button1/click"); これで、ボタンを押
Google Mapsでレーシング公開！ [tech.nitoyon.com]
Google Maps API を利用した便利なサービスが数々発表されているけど、別に遊びのために活用してもいいよね。 そんな思いから、Google Mapsをレーシングゲームに応用してみました。 Google Mapsで鈴鹿サーキット試走 簡単操作のテスト版ですが、それなりに楽しめると思います。時間測定や当たり判定がないのはご愛嬌ということで許してください。 応用例 操作方法などはリンク先に書いたので、ここではさらに応用例を考えてみます。 実測地図を利用したRPG ドラクエ３をリアルな世界地図で・・・とか。 リアル桃鉄 データさえ入力すれば実現できるはず。オンラインゲーム化したら楽しそう。 フライトシミュレータ サテライト写真を使えば、実際に飛んでいる気分になる！ 高度が上がるにしたがって、ズームレベルを変更するとリアリティーが出るかも・・・。 シューティングゲーム インベーダから地球を
![Google Mapsでレーシング公開！ [tech.nitoyon.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0152b5a283748a3bce479101d22b9b4c157d2c27/height=288;version=1;width=512/https%3A%2F%2Ftech.nitoyon.com%2Fapple-touch-icon-114x114.png){kind=icon}
オブジェクト指向JavaScript - 大きな画像をポップアップ
Java等のオブジェクト指向はクラスベースのオブジェクト指向と呼ばれる。一方、JavaScriptはプロトタイプベース、あるいはインスタンスベースオブジェクト指向と呼ばれる。 クラスベースは、まずクラスを定義し、クラスを型とするインスタンスを作成することでプログラミングする。プロトタイプベースによるオブジェクト指向では、クラスの定義は必須ではなく場合によってはクラスという概念自体が存在しない。既存のオブジェクトのクローンとして新しいオブジェクトを作成し、そのオブジェクトに独自の性質を付加してプログラミングする。 JavaScriptのオブジェクトの性質は動的に変更可能。Java等では一度決定したオブジェクトの振る舞いは変更できないが、JavaScriptでは実行中の任意の場所でメソッドの動作を変更したり、新しく追加したり、削除したりすることができる。
テキストによるプログレスバーを実現するライブラリ ProgressText.js
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
prototype.js の Class 拡張試案 (2): 継承とスーパークラスへのアクセス - (new Hatena).blog()
(注意: この記事には幾つか問題点があります。次の記事 id:reinyannyan:20051118:p1 で修正しますので、そちらと併せてお読みください。) prototype.js は、JavaScript というプロトタイプ・ベースのオブジェクト指向言語 (クラスが存在しない = 全てがオブジェクト、という世界) に、クラス・ベース的なクラス設計や継承の仕組みを与えます。 これは画期的な、革命的な出来事と言っても良いと思いますが、少し不満もあります。スーパークラスの定義が全てサブクラスによって上書きされてしまうという点です。 以下は、この問題を何とかしてみようという試みです。 ソリューション 1 オリジナルの Object.extend を見てみると、第一引数に親オブジェクト、第二引数には子オブジェクトを受け取り、子オブジェクトから親オブジェクトに対してメンバーを追加、あるいはコピ
prototype.js v1.5.0 の使い方
それは何？ prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス
MOONGIFT - InteractiveJS - Windows向けのJavaScript Shell
サイト制作効率向上 IEとFirefoxを同時に表示できるリアルタイムCSSエディタです。 サイト制作効率向上 Firefoxのシェアが伸びている。昔はIEのみに対応したサイトが多かったが、徐々にFirefoxにも対応したサイトが増えてきた。IEでしかまともに表示されないサイトは、ビジネスチャンスを幾らか損をしている可能性がある。 確かに確認は面倒だ。JavaScriptは使わなければ良いだけだが、CSSはSEOやデザイン性からも使わない訳にはいかない。ただ、この解釈が随分異なるのだ。FirefoxとIEを立ち上げ、何度も切り替えるのは非常に手間のかかる作業だ。 本日紹介するフリーソフトウェアはCSSVista、そんな苦労が吹き飛んでしまうソフトウェアのご紹介だ。 何とIEとFirefoxを同時に表示できる。これだけで作業効率が二倍は向上する。更に、CSSがリアルタイム編集できる。 左のペ
text-hatena.js 公開 [tech.nitoyon.com]
本家 Text::Hatena で HTML::Parser を用いている部分は実装できていません。 URL の自動リンクや HTML のエスケープなどは実装できていません。 Cookie を利用するようなサイトに text-hatena.js を利用するのはお勧めできません。 ライセンスは Text::Hatena と同等とします。 技術的なアレコレ Perl と JavaScript って意外と似てるよね、というところから出発しました。特に、Text::Hatena のソースコードはそのまま JavaScript に置き換えられるぐらいに洗練されたコードです。例えば、Hatena.pm の一部に次のようなソースがあるのですが sub parse { my $self = shift; my $text = shift or return; $self->{context} = Text
フォームに入力を促すメッセージを出力する JavaScript
■ フォームに入力を促すメッセージを出力する JavaScript input type="text" なフォームに最初から「ここに入力して下さい」みたいなメッセージを薄い色で表示させておいて入力を促すようなのありますよね。なんか、あれを、現実逃避気味に書いたので。 function inputDefault(elm, msg) { this.elm = elm; this.msg = msg; this.color = '#999999'; this.bgColor = '#F9FFF9'; } inputDefault.prototype.set = function() { this._cleared = false; this._defColor = this.elm.style.color; this._defBGColor = this.elm.style.background
Collection & Copy - Googleデスクトップ検索のサイドバープラグインをJavaScriptを使って作成する
Googleデスクトップ検索のサイドバープラグインをJavaScriptを使って作成する 技術 準備 Googleデスクトップ検索のバージョン2から、ニュースや株価検索などの小窓が表示されるサイドバーという機能が追加された。 プラグインをJavaScriptで記述することができる。 これに興味はないが調査を行なった。読んだから書きたい。 Google デスクトップ本体 各種プラグイン(iTunes操作などあり) 開発者ドキュメント まず本体をセットアップする。 JavaScriptを使ったプラグインを動作させるためには、英語のバージョン2正式版である必要がある。 作成 次にSDKをダウンロードする。 /GD_SDK/api/samples/scripts/displayに、サンプルが存在する。 HelloWorld、カレンダー、Windows Media Playerの操作(COM経由)、
ステップアップWSH
昨年(2003年)、Tech-Ezo 2003 Round 23で「おサルなWSH ～WSH初心者が贈るWSHへの誘い～」と題しましてスクリプトの勉強会を行いました。私が、講師を務めさせて頂いたのですが、お題にもあるように私自身WSHに詳しいとはとても言えません。しかしながら、難しいことを余り考えずに、ちょこっと覚えるだけで何かと便利になるWSHを体験して頂くという目的で、初心者(既に初心者歴うん年になりますのでどちらかと言えば未熟者ってところですね)なりに纏めさせて頂きました。 ここでは、実習形式で行った勉強会のテキストを公開しています。前半で、WSHの簡単な説明と動かし方を説明し、後半では使えそうなスクリプトを徐々にステップアップしながら作って行きます。
作って理解するAjax (1)：IT Pro
最近，Webエンジニアのまわりで注目されている技術に「Ajax」(エイジャックス)があります。従来のWebアプリケーションはインタラクティブな処理の際，ユーザーにページのリロード作業を強いることが多く，決して操作性が良いとは言えませんでした。しかしAjaxを利用すると，サーバーと非同期な通信ができるので，ページをリロードすることなくコンテンツを更新できます。このためデスクトップ・アプリケーションと同様な操作性を持つWebアプリケーションを作成できます。本連載では，実際にAjaxアプリケーションを開発しながら，Ajaxアプリケーションの動作の仕組みや，既存のWebアプリケーションとの違い，実装上の注意点などについて紹介していきます。 「枯れた技術」を組み合わせる 筆者にとってAjaxの第一印象は強烈でした。「Google Map」のスムーズな地図操作，「Google Suggest」のリアル
最速インターフェース研究会 :: キー割り当て用ライブラリを作った
依頼を受けて作ってみた。 http://la.ma.la/roll.html http://la.ma.la/js/hotkey.js j,kでスクロールできる。 使いまわしがきくように他のライブラリに依存も影響もしないように作ってあります。Bloglinesのj,kでスクロールみたいなのを作りやすいようにするのが目的。ただsafariとかは何かかなり違うらしいので、そこらへんは良く知らない。あとOperaはデフォルトでワンキーショートカットが割り当てられてたりするので動くとは限らない。 全体に対してキーイベントを設定すると、フォームの入力ができなくなるっていう問題があるのでイベントの発生元がinput|textareaの場合は処理しないようにしてある。 追加したコードはこんな感じ。 var kb = new HotKey; kb.add(["j","2","down"], functio
HTMLリアルタイム編集（ブックマークレット） @ ZEROBASE BLOG
quickedit by ZEROBASE'+b.innerHTML.replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"')+'');var t=x.getElementById('t');t.onchange=t.onkeyup=function(){b.innerHTML=t.value;};}())">[HTML編集] このリンクをブラウザのブックマークバーにドラッグ＆ドロップするなどにより登録してください。 使い方 編集したいページで上記ブックマークレットを実行します。ためしに上記リンクをクリックしてみてください。 テキストエリア内にHTMLが表示されますので、それを編集してください。変更が即座に反映され、もとのウィンドウが書き換わります。 書き換えているのは、ブラウザのメモリ上のHTMLです。サーバには何の影響もありません。 便利
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
11月11日の技術勉強会 - はてな技術発表会日記 - 機能変更、お知らせなど
Flashのバージョンを検出するJavascriptコード:phpspot開発日誌
Mugi's Homepage - JavaScript