|||| Ajaxで今よみがえる(^^;;-->[クロスブラウザ技術 ]DHTMLサンプル集

JavaScript++かも日記

*このスクリプト動かないよ〜、とかの情報は、 各「コメント欄」へ書き込んでいただけるとうれしいです。 直せないかもしれないけどf^^;;;

カスタム検索 -- ↑ 多少AjaxやJavaScript 寄りのGoogle検索 --

--> かも日記を your [my del.icio.us]へ追加
【各種Ajax関連ライブラリ等へのリンク】 
【ピックアップ】

【統計資料】実質輸出入
http://jsgt.org/lib/jquery/plugin/csv2table/v002/sample-yusyutsunyu.htm (/ )

【郵便番号辞書】 2009.11.30 インストール方法 (for Google 日本語入力) with 根性
http://jsgt.org/mt/01/zip/readme.htm (/ )

【書籍】『 jQuery入門 〜魔法のJavaScriptリファレンス&サンプル〜』関連
アマゾン, 正誤表. チートシート+目次

htcブログ (ソフトバンク携帯X01HTなど) ()
【X01HT】携帯でSSHできることの意味 ()

【iPhone】iPhone用 JavaScriptデータベースプログラミング入門 (目次) (/ )
【携帯】iPhone用Webコンテンツを作るためのリンクリスト(/ )

jQueryの魔法 (/ )
【jQuery】Selectors (/ )
【jQueryプラグイン作成中】jQchart ドラッガブル グラフ (/ )
jQchart + CanvasGradient (/ )
【jQueryプラグイン】csv2tableCSVファイルを読み込み、テーブル表示 (/ )
これは便利だ!Excel→Table化するjQueryプラグイン (/ )
【jQueryプラグイン作成中】jQuery-calendar (/ )
jQueryバージョン間のコード比較 (/ )

YUIライブラリを使う準備 (/ )
Google Ajaxはじめの一歩 XMLHttpRequest (/ )

入門Ajax 増補改訂版 /サポート ()
入門 Ajax(旧版)/サポート ()
Ajax実践テクニック/サポート (Yahoo UI! 、Dojo 、prototype.js 、script.aculo.us 、Ricoのサンプル) ()

ブラウザのリクエストヘッダ調査
forin window
AjaxでShift_JISやEUC-JPは使えるのか?-1- responseText編 ()
AjaxでShift_JISやEUC-JPは使えるのか?-2- responseXML編 ()
文字コードによって生じる文字化け調査(Ajax) ()
PHPとJSのURIエンコード比較 ()

PHPJSON/簡単なテスト:基本 ()

Google Mapsを自サイトに設置する (/ )
経度・緯度を調べる(地図作成作業補助サンプル) (/ )
Google Maps API v2 クラスリファレンス 意訳とサンプル (/ )
Google Maps API v1 クラスリファレンス 意訳とサンプル ()

クロスブラウザ関数 () / クロスブラウザ関数 ミラー1 () / クロスブラウザ関数 ミラー2 ()
ダイナミックロード用関数 ()
暫定(簡易)版Ajax用ライブラリ ()
【Ajax風】JSONIframeReqest ()
Ajax 動的なテーブル書き換え ()
AjaSQL ()
AjaSQL BBS2 ()

【jQuery】日付入力用カレンダー ()

【jQuery】日付入力用カレンダーをjQueryプラグイン用に移植中 ()
日付入力用カレンダー ()
日付入力用カレンダー(旧版) ()

ドラッガブルフロートなDIV ()
ProgressBarオブジェクト ()
Indicatorオブジェクト ()
洪水警報メールシステム ()
各OS/ブラウザ別 navigatorオブジェクトのプロパティ一覧 ()
JavaScriptのオブジェクト指向プログラミング関連リンク ()
Web Sockets Domo

* サーバー側は、小松氏のこれをbloga.jp:80へ置いてあります。
* クライアント側はWS処理をjQueryプラグイン化してみました。これです。
* ちなみに、このDemoサンプルは、下記5行でローカルでも別ドメインでもどこにでも設置出来ます。
<script src="http://bloga.jp/ws/jq/js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://bloga.jp/ws/jq/js/jquery.ws-0.3-noenc-pre.js" type="text/javascript" charset="utf-8"></script> <script src="http://bloga.jp/ws/jq/conn/wschatdemo0.3.js" type="text/javascript"></script> <script>/*サポートしてない時のalertメッセージを抑止*/$.ws.wsSetup({nonosupportmsg:true});</script> <div id="wsdemos"></div>

【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いです。実験用ですので、カオス(混沌)をあえて意図したりもしますので、標準やValidとは無縁だったりしますが、何卒、ご了承ください ( _ _ b

【info】 最近はTwitterでぶつぶつ言ってることが多いです。
>http://twitter.com/toshirot

2010年02月06日

【雑談】紛失したコリラックマに約9万円の懸賞金

雑談 ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed



紛失したリラックマに約9万円の懸賞金をかけて捜索している男性
http://gigazine.net/index.php?/news/comments/20100205_search_bear_couple/

Christopher Ferreiraさんが探しているのは2年前、世界旅行をしている時にガールフレンドと日本で購入した2体の「コリラックマ」。購入してからは旅行先のあちこちで写真やビデオ撮影をしていました。 しかし、Ferreiraさんはカリフォルニアのエメリビルにある映画館でコリラックマを紛失。買い直すことはせずに捜索のためのウェブサイトを開設し、1000ドル(約9万円)の懸賞金までつけました。

Oakland Couple Offers $1K Reward For Stuffed Bears
http://cbs13.com/watercooler/missing.stuffed.bears.2.1467047.html
A Grand Day Out With The Bears
http://wearebearz.com/

へぇ、外国人でもリラックマ好きがいるのか、、、と感心して見ていたら、コリラックマフリークのまりもが、その二人を連れてきました。

これです。
我が家の食卓に乗ったコリラックマです。が、彼が探している9万円の二人ではありません。




【スポーツ】eスポーツの初期衝動

スポーツ ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed



これは、展開ありそう。


First e-Sports platform pilot unit / e-sports Ground
http://eleb.jmworks.co.uk/?p=674




2010年02月05日

【ブラウザ】Opera 10.5が「今」最速

ブラウザ ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed



Opera 10.5最速をマーク、Chrome 5とSafari開発版
http://journal.mycom.co.jp/news/2010/02/04/021/index.html

It's a three-way race: Opera preview clings to lead over Safari 4, Chrome 5
http://www.betanews.com/article/Its-a-threeway-race-Opera-preview-clings-to-lead-over-Safari-4-Chrome-5/1265150085




2010年02月03日

【Ajax】クロスドメインリクエスト cross-site xmlhttprequest with CORS

Ajax ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed



cross-site xmlhttprequest with CORS
http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/




2010年02月01日

【仕様】IETF 意訳 The Web Socket protocoll/1.8. Web Socket プロトコルを使ったサブプロトコル

Web Sockets , 仕様 ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed




WebSocketsのプロトコルの仕様書の翻訳がここ↓にあって
http://ymotongpoo.appspot.com/websocket_jp/index.html
これは、本当に有り難いんですけれど、惜しむらくは 44版なんですよね。

今日現在 71版になっているので、英語わからんちんのわたしには、チンプンカンプン
なところがあります。

しようがないので(文字通り仕様がない^^;)YahooとGoogle翻訳使いつつ、
1項目だけ訳してみました。

どうかなぁ。。。

メモ付きかついいかげんな意訳ですので、本当に確認したい方は原文見てください。

仕様IETF原文
http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-71#section-1.8

以下、71版


1.8.  Subprotocols using the Web Socket protocol
1.8.  Web Socket プロトコルを使ったサブプロトコル

   _This section is non-normative._
   _このセクションは非標準です_

   The client can request that the server use a specific subprotocol by
   including the |Websocket-Protocol| header in its handshake.  If it is
   specified, the server needs to include the same header and value in
   its response for the connection to be established.

   クライアントは、ハンドシェイク内の|Websocket-Protocol|ヘッダに含まれ
   る特定のサブプロトコルをサーバーが使うようリクエストすることができる。

   それが指定されるならば、サーバーは接続が確立されるために、同じヘッダ
   と値をそのレスポンスに含む必要が有ります。。

------------------------------------------------------------------
高橋memo: 

      Web Sockets APIでは、
       
       new WebSocket( url[, protocol]) 
        
     という書式の第2引数protocolでサブプロトコルを指定します。
     protocolは省略可能です。
     
     これはたとえば、こんな書き方になります。
     
       new WebSocket( "ws://example.com:80", "sample" ) 
       
     この結果、下記のようなヘッダをクライアントブラウザが送り、、、

       GET /demo HTTP/1.1
       Upgrade: WebSocket
       Connection: Upgrade
       Host: example.com
       Origin: http://example.com
       WebSocket-Protocol: sample ★これ

     下記のようなレスポンスをサーバーが返すことでハンドシェイクが
     成立します。

       HTTP/1.1 101 Web Socket Protocol Handshake
       Upgrade: WebSocket
       Connection: Upgrade
       WebSocket-Origin: http://example.com
       WebSocket-Location: ws://example.com/demo
       WebSocket-Protocol: sample ★これ
------------------------------------------------------------------

   These subprotocol names do not need to be registered, but if a
   subprotocol is intended to be implemented by multiple independent Web
   Socket servers, potential clashes with the names of subprotocols
   defined independently can be avoided by using names that contain the
   domain name of the subprotocol's originator.  

   これらのサブプロトコル名は登録される必要はありません、しかし、サブ
   プロトコルが複数の独立したWeb Socketサーバーで実行されることを目的
   とするならば、独立して定められるサブプロトコルの名前との潜在的衝突
   はサブプロトコルの発信者のドメイン名を含む名前を用いて避けられるこ
   とができます。


------------------------------------------------------------------
高橋memo: 

     これはたとえば、example1.comとexample2.comでサブプロト
     コル名が同じ hoge だったとしてもドメイン名で区別できる
     ので衝突しないね、みたいな意味かな?
------------------------------------------------------------------

   For example, if Example Corporation were to create a Chat subprotocol
   to be implemented by many servers around the Web, they could name it
   "chat.example.com".

   たとえば、Example Corporation社が多くのサーバーでインプリメントさ
   れるためのチャット用サブプロトコルをつくることになっているならば、
   彼らはそれに「chat.example.com」という名前をつけることができます。

------------------------------------------------------------------
高橋memo:  

     つまりこういうこと。

       GET /demo HTTP/1.1
       Upgrade: WebSocket
       Connection: Upgrade
       Host: example.com
       Origin: http://example.com
       WebSocket-Protocol: chat.example.com ★これ
------------------------------------------------------------------

   If the Example Organisation called their competing subprotocol
   "example.org's chat protocol", then the two subprotocols could be
   implemented by servers simultaneously, with the server dynamically
   selecting which subprotocol to use based on the value sent by the
   client.

   もし、Example Organisation 機構が彼らの競争しているサブプロトコルを
  「example.orgのチャットプロトコル」と呼ぶならば、クライアントで送ら
   れる値に基づいてどのサブプロトコルを使うべきかをダイナミックに選ん
   でいるサーバーで、2つのサブプロトコルは同時にサーバーで実行される
   ことができます。

------------------------------------------------------------------
高橋memo:  

     「example.orgのチャットプロトコル」と呼ぶ とは具体的には、
     クライアントからは
     Websocket-Protocol: chat.example.org
     と送ってサーバーも対処するってことかな?

     つまりこういうこと

       GET /demo HTTP/1.1
       Upgrade: WebSocket
       Connection: Upgrade
       Host: example.com
       Origin: http://example.com
       WebSocket-Protocol: chat.example.org ★これ
------------------------------------------------------------------

   Subprotocols can be versioned in backwards-incompatible ways by
   changing the subprotocol name, eg. going from "bookings.example.net"
   to "bookings.example.net2".  

   サブプロトコルは、サブプロトコル名を変えることによって、後方に
   非互換の方向でバージョン付けすることができます。例えば、
  「bookings.example.net」から「bookings.example.net2」へ。

   These subprotocols would be considered completely separate by 
   Web Socket clients.  

   これらのサブプロトコルは、ウェブSocketクライアントからは完全に
   別々であるとして扱われます。

   Backwards-compatible versioning can be implemented by reusing 
   the same subprotocol string but carefully designing the actual
   subprotocol to support this kind of extensibility.

   後方互換性を持つバージョニングをするためには、同じサブプロト
   コル文字列を再利用することで実装できるが、ただし、この種の拡張
   性を裏づけるために実際のサブプロトコルを慎重に設計します。
   
   
------------------------------------------------------------------
高橋memo:  

  てなわけで、具体的にサブプロトコルを使うには、たとえば、
     mod_pywebsocketでいうと、request.sock.ws_protocolとか
    request.headers_in.get('WebSocket-Protocol')などの
     HTTPヘッダの値から取得できる サブプロトコル文字列
     に応じて対応サービスを分岐する?
------------------------------------------------------------------



【Webサービス】Google Friend Connec

Web Sockets , Webサービス ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed



ちょっとだけGoogle Friend Connectを試してみたらWebSocketとXHRの比較みたいな感じになった。違うけど。

Web Sockets Demo & Links -
http://bit.ly/90S4pq




2010年01月30日

【JavaScript】加速度センサーで画像を移動

JavaScript ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed



加速度センサーで画像を移動
http://d.hatena.ne.jp/nakamura001/searchdiary?word=%2a%5b%b2%c3%c2%ae%c5%d9%a5%bb%a5%f3%a5%b5%a1%bc%5d

Demo
http://tsuyobi.heteml.jp/html/firefox/orientation_event/index2.html

Firefox 3.6から搭載の加速度センサーで画像を動かすサンプルを作ってみた
http://d.hatena.ne.jp/nakamura001/searchdiary?word=%2a%5b%b2%c3%c2%ae%c5%d9%a5%bb%a5%f3%a5%b5%a1%bc%5d

window.onmozorientation - MDC
MozOrientation イベント
https://developer.mozilla.org/ja/DOM/window.onmozorientation

#加速度センセーかぁ。ゲーム作れるなぁ。









AllaboutのJavaScript記事を連載させていただいてます。最近は、jQueryを主に取り上げていますが、多少なりとも参考になれば幸いです。