Yone Yone Club 本室

Ｗｈａｔ's Ｎｅｗ！

JavaScriptとAJAXの活用研究

DOMとXMLの研究

県から路線と駅を選択するセレクトボックスクラス: 駅データ(Station Database)サイトが提供しているAPIサービスからデータをJSONPで取得し、セレクトボックスのオプションを生成するオブジェクト
XML Select Box (1): XMLのテキストノード(属性値はだめ)をXPATHで検索し、セレクトボックスを動的に生成する。
Iframe Contents Search: Iframe内にHTMLをロードして、テキスト検索し、ハイライト表示とリスティングを行う。
Iframe Contents Search By Ajax: Iframe内にHTMLをロードして、テキスト検索し、ハイライト表示とリスティングを行う。HTMLのロードはPHPで行いクロスドメインアクセスに対応する。
ハンドラー付き時間帯選択クラス: (機能)午前/午後のチェックボックスから時間=>時間帯を表示､クリックしたら何か動かす
ハンドラー付きセレクトボックスクラス: (機能)セレクトボックスで選んだら、ハンドラーを実行
テーブルサーチ: テーブル内のテキストを探して表示行を制御、表ナビゲーションを作成する
XMLのロード: JavascriptでXMLをロードして、DOMで弄る
XMLのノード表示: JavascriptでXMLをロードして、ノードリストを階層表示(FireFox用)
XMLのノード表示: JavascriptでXMLをロードして、ノードリストを階層表示(IE用)
XMLのノード表示: Microsoft.XMLDOMでXMLをロードして、ノードリストを階層表示(IE用)
JavascriptでXpathを使う: JavascriptでXMLをロードして、Xpathで弄る

CSS(Style Sheets Rule)やstyle属性のハンドリング

夜空に花火を打ち上げる。又はビッグバン！: (機能) CSSルールの追加/変更とインターバルタイマー使用の研究とついでにAudio要素も
複数画像を縦スクロールさせるオブジェクト: (機能) 要素内に複数画像を縦スクロールさせるクラス
FadeIn/FadeOut Object: (機能) タイマーでアルファとサイズを変更してフェードイン/アウトさせるオブジェクト
H1 スクロール: (機能)タイマーでstyle.topを変えながら、スクロールさせる
IframeのCSSを親に反映させる: (機能)IframeのCssRulesを全て取得して親のStyleSheetsのCssRulesに追加する。
テキストの文字色をCSS Rulesを使って部分的に変える。: (機能)テキストノード内にSPANを生成してStyleSheetsのCssRulesを変更し色を変える。
Style属性で画像をスクロール: (機能)要素のheightとwidthのstyle属性をタイマーで変更しながら縦スクロールさせる

MultiMediaの研究

Flash Player By swfobject.js（1）: Adobe Flash Playerをswfobject.jsで再生する。
Flash Player By swfobject.js（2）: Adobe Flash Playerをswfobject.jsを使って制御する。
Flash Static Player: Adobe Flash PlayerをStaticに配置
Flash Player Express Install: Adobe Flash PlayerをSWFOBJで Express Installする。
MIDI BGM By Quick Time Player: APPLE　QuickTimeでMIDIのBGMを流す
Play MIDI By Quick Time Player: >APPLE　QuickTimeをJavascriptで制御しMIDIを選曲する。
SWF TEST By JWPLAYER By JWswfobject（1）: JW FlexPlayerとSwfObjを使ってFLVを再生する。
SWF TEST By JWPLAYER By JWswfobject（2）: JW FlexPlayerとSwfObjを使いJavascriptでプレーヤーを制御する。
JW FlexPlayer（1）: JW FlexPlayerをJavascriptで制御しMP3を再生する。
JW FlexPlayer（2）: JW FlexPlayerをShdowBoxに組み込んで使う。
Window Media Player（1）: WMPをJavascript/Jscriptで制御しwnvを再生する。
Window Media Player（2）ＩＥのみ: Staticに組み込んだWindow Media Player ページをIFRAMEにロード
WMV TEST By Silverlight Player: JW Silverlight Playerをjavascriptで制御しwmvを再生する。
HTML5 Video Play: HTML5のVIDEO要素をjavascriptで制御しOGGを再生する。
HTML5 Audio Play: HTML5のAUDIO要素をjavascriptで制御しwavを再生する。

JavaScriptの研究

正規表現パターンのチェックを簡易に行う(1): (機能) Javascriptの正規表現でパターンを入力してマッチング結果を表示する。
正規表現パターンのチェックを簡易に行う(2): (機能) PHPの正規表現(PREG)でパターンを入力してマッチング結果を表示する。
Text Pad: (機能) Javascriptの正規表現のリプレースを使ったテキストエリアの編集(仕掛り中)
Toggle Image Object: (機能) マウスオーバーで次次に画像が変わるクラス
Toggle Button Object: (機能) マウスオーバーで画像が変わるボタンオブジェクト

MS JScript(ActiveX)の研究

Wscript Go: (機能)WScript.Shellでローカルプログラムを実行する。
Wscript Keysend: (機能)WScript.Shellでキーコードを送出する。

PHPやVBAやJAVAやら

Formのチェック(1): フォームをチェックして自身を実行
Formのチェック(2): チェックボックスがONならフォームをチェックして自身を実行

AJAXを利用したWeb検索 APIサービスの活用研究

Web検索の活用

Google.search.WebSearch APIをそのまま使用: Google WebSearch APIで検索し、結果(JSON)をjQueryで成形し、ページャーを加える
http://ajax.googleapis.com/ajax/services/search/web? にGET要求: jQueryでAJAX GET送信しJSONを解析
Google.search.SearchControl からWebサーチャーを呼び出して使用: Google提供のサーチャーコントロールを使ってインクリメンタルサーチを実装
Ｙａｈｏｏ！オークション検索の実装 1.(キーワードからの検索): Yahoo! AuctionWebServiceよりAJAXでJSONを取得してリスト表示する
Ｙａｈｏｏ！オークション検索の実装 2.(出品者IDからの検索): Yahoo! AuctionWebServiceよりAJAXでJSONを取得してリスト表示する
Ｙａｈｏｏ！オークション検索の実装(おまけ): 同じものをFancy Boxでやってみた
Goole News Box By AJAX: Google AJAX Search APIのNewsSearchをJsonpで取り込みリストボックスを生成し、タイマーで次々に表示する。

マルチメディア検索の活用

Google.search.VideoSearch APIでマルチメディア検索: Google VideoSearch APIで検索し、jQueryで成形、ShdowBoxでポップアップ再生する。
Google.search.SearchControl からVideoサーチャーを呼び出して使用: Google提供のVideoサーチャーコントロールを使ってインクリメンタルサーチを実装し、結果をjQueryで成形、ShdowBoxでポップアップ再生する。
Google Video Search Control API を単独使用: Google提供のVideoサーチコントロールをそのまんま利用

Google DATA API と Google YouTube Player API でYouTubeを検索・再生: 「Google DATA API」でYouTubeを検索、結果をjQueryでリストに成形、｢Google YouTube Player API｣でリストの右側にプレーヤーを生成し、再生する。

RSS/Feed配信の活用

Google AJAX Feed APIでRSSを取得: Yahoo!ブログ新着情報のRSS(XML)をGoogle AJAX Feed APIで取得しXMLをJavascripでパースして新着情報をリスティングする。
Google AJAX Feed RESTful インターフェースでRSSを取得（1）: Yahoo!ブログ新着情報のRSS(XML)をGoogle AJAX FeedにGET要求して、JSONPで取得し新着情報をリスティングする。
Google AJAX Feed RESTful インターフェースでRSSを取得（2）: 教えてＧｏｏ！新着情報のRSS(XML)をGoogle AJAX FeedにGET要求して、JSONPで取得し新着情報をリスティングする。
Google AJAX Feed RESTful インターフェースでRSSを取得（3）: 教えてＧｏｏ！新着情報のRSS(XML)をGoogle AJAX FeedにGET要求して、JSONPで取得し、新着記事ページに移動する。
Google AJAX Feed RESTful インターフェースでRSSを取得（4）: ＦＣ２ブログの新着情報のRSS(XML)を複数Google AJAX FeedにGET要求して、JSONPで取得し、条件に合うものをリスティングする。
Blog Sarch By PHP: Ｇｏｏブログの新着情報のRSS(XML)をPHPで取得してXpathでサーチし結果をリスティングする。

AJAXを利用した地図情報 Web APIサービスの活用研究

Google Maps API の活用

鉄道路線図１(by Goole Map): 駅データ(Station Database)サイトが提供しているAPIサービスをJSONPでアクセスし、県からから路線と駅のデータを取得し、左にリストを生成、右の地図に路線を複数表示する。さらに路線クリックで駅リストと駅マーカーを追加し、駅からの路線検索も行う。
住所のXMLファイルを読み込んで地図にポリゴンを描画しリストを表示: XMLファイルから、緯度/経度/名前を取得して、２カラムレイアウトの左にマーカーリスト、右に地図とマーカー、ポリゴンを自動生成する。（ポリゴンポイントは４象限に分けてソートし凸問題を解決）
ランダムなマーカーから地図にポリゴンを描画: マーカー座標からポリゴンポイントを方位でソートして凸問題を解決し、ポリゴンを自動生成する。（仕掛り中）
ドラッグ可能な Google Street Viewer: 指定された住所の地図を表示し、人形をクリックしてストリートビューを左に表示、人形をドラッグしてビュー地点を自在に移動、人形を再びクリックしてストリートビューを閉じる。
軽巡洋艦｢矢矧｣操艦ゲーム: Google Map APIを利用した艦船の操艦シミュレーションゲームです。日本海軍軽巡洋艦｢矢矧｣の操艦と索敵･砲雷撃をﾏｯﾌﾟ上で行います。
汎用地図1: (機能)住所から緯度・経度を調べて地図表示、マーキング機能、マーカー間の距離算出と直線描画、原点を中心に地表面距離が等距離の円を書く、他
データ地図1-1.: (機能)住所から基点を検索しデータ毎に度数別マーカーを表示する。基点からの等距離円表示も行なえる。データ(緯度・経度・度数)はJSON形式のファイルをサーバーから取得する。
データ地図1-2.: (機能)住所から基点を検索しデータ毎に度数別マーカーを表示する。基点からの等距離円表示も行なえる。データ(緯度・経度・度数)はJSON形式のファイルをサブミットして取り込める。
※このデータ地図1-2をＶＢでアクセスし、活用出来るＥｘｃｅｌのサンプルがあります。

GeoCoding の利用

地図上の指定した地点が、ある特定の領域内にあるか調べる。: (機能)地図上でマーカーをドラッグしてポリゴン領域を作成し、逆ジオコーディングで検索した地点がポリゴン領域内にあるか調べる。
地図上で逆ジオコーディング及びジオコーディングの結果を確認する: (機能)Google Map Apiのジオコーディング及び逆ジオコーディングを使い地図上でマーカーをドラッグするか、名称検索して結果オブジェクトをすべて表示する。
地図をクリックして住所と郵便番号を検索する。: (機能)｢Google Map APIｼﾞｵｺｰﾃﾞｨﾝｸﾞｻｰﾋﾞｽ｣の逆ｼﾞｵｺｰﾃﾞｨﾝｸﾞ機能を使い、緯度･経度から住所を求めて、｢Postal Search Ajax API｣に渡し郵便番号を調べる。
GeoCoding Yahoo VS. Google (Simple版): (機能)住所から緯度と経度を調べる機能をYahooローカルサーチAPIとGoogleジオコーディングAPIで比較します。(1件づつ住所を入力して処理時間を計測ます。)
GeoCoding Yahoo VS. Google (Simple Map版): (機能)住所から緯度と経度を調べる機能をYahooローカルサーチAPIとGoogleジオコーディングAPIで比較します。(住所を入力して結果をGoogle Mapに表示します。)
GeoCoding Yahoo VS. Google (Google マップレット版): (機能)住所から緯度と経度を調べる機能をYahooローカルサーチAPIとGoogleジオコーディングAPIで比較します。(住所を入力して結果をGoogle Mapに表示します。)
GeoCoding Yahoo VS. Google (Multi版): (機能)住所ファイルをサブミットし、検索した緯度と経度を付加してダウンロードする機能をYahooローカルサーチAPIとGoogleジオコーディングAPIで比較します。(全件を処理にかかった処理時間を計測ます。)

KML情報の利用

KML MAP 1: (機能)PHPを経由して外部KMLを取得し、GoogleMapsApiのGGeoXmlでそのまま地図を表示する。
KML MAP 2: (機能)KMLを読み込み、「kml2gmap.js」でGoogleMapに展開する。
KMLをロードして地図を表示(Google Maps V3): (機能)PHPを経由して外部KMLを取得し、GoogleMapsApiV3のKmlLayerを使って地図に表示する。
KMLを読み込みセレクトボックスで選択したマーカーを表示する。: (機能)KMLをGGeoXmlで地図に展開し、Javascriptで制御する
Google Static Mapの利用（1）: (機能)Google Static Mapを表示
Google Static Mapの利用（2）: (機能)GClientGeocoderで住所から位置を検索してGoogle Static Mapを表示

Yahoo!地図情報APIの利用

JSON Script Tag によってクロスドメインアクセスを可能とし、http://api.map.yahoo.co.jp/LocalSearchService/V1/LocalSearchより検索結果をJSONPで受取る。

汎用地図2-1: (機能)住所から世界測地型の緯度・経度を調べ、地図を表示する。
※CGI(PHP)を利用してYahooより､JSONを受け取ってJSONPを生成
汎用地図2-2: (機能)住所から世界測地型の緯度・経度を調べ、地図を表示する。
※CGI(Perl)を利用してYahooより､xmlを受取り、CGIがJSONに変換してJSONPを生成
汎用地図2-3: (機能)住所から世界測地型の緯度・経度を調べ、地図を表示する。
※CGI(PHP)を利用してYahooより､xmlを受取り、CGIがJSONに変換してJSONPを生成する。
PHPではPEARのHTTP/RequestでXMLを取り込み、XML/Unserializerでパースして、JsphonのEncoderでJSONに変換している。

汎用地図3: (機能)住所から世界測地型の緯度・経度を調べて返す。
HttpRequestのみでXMLをParse（ＩＥ用です）)
汎用地図4: (機能)住所から世界測地型の緯度・経度を調べて返す。
JKL.ParseXMLを利用して簡単にXMLをParseする。

ＡＪＡＸで、郵便番号検索サービスAPIを活用する。

住所から郵便番号の検索addrzip.htm: (機能)｢Google Map APIｼﾞｵｺｰﾃﾞｨﾝｸﾞｻｰﾋﾞｽ｣と｢Postal Search Ajax API｣を組み合わせ､住所を入力するか、地図をクリックして郵便番号をを調べる。
市区町村名から郵便番号の検索addrzipm.htm: (機能)「Postal Search Ajax API」で市区町村名から郵便番号を調べる。
郵便番号から住所の検索zipaddr.htm: (機能)「Postal Search Ajax API」で郵便番号から住所、緯度、経度等を調べる。