Lepracaun's factory - レプラコーンファクトリー -: Ajax ＆ Javascript アーカイブ

2009年3月 1日

埋め込んだGoogle ストリートビューがIEで見れない場合

プライバシーの問題で、最近何かと話題のGoogle ストリートビュー（Google Street View）

今回はIE（Internet Explorer）でGoogle ストリートビューが見れなくなる不具合の件です。
要するにブラウザでリロード（再読み込み）すると、ストリートビューが表示されなくなるという問題。

正確に言うと、ストリートビューで表示される埋め込みタグ（「HTML を貼り付けてサイトに地図を埋め込みます」で表示されるiframeタグ）を使うと、この不具合が発生します。

もっと正確に言うと、iframeの問題ではなく、iframeのリンク先を直接表示させても、同様の問題が発生します。

ちなみにこの埋め込みタグを使う場合、解決方法は現時点では「ブラウザのキャッシュをクリアする」しかありません。

「またIEか！」と怨嗟の声が聞こえそうですね。キャッシュをクリアする以外の解決方法としては・・・

GoogleがIEに合わせてバージョンアップさせる。
誰かがIEをこの世から根絶させる。
別のJavascriptで実現する。

Googleが将来的にバージョンアップするのが一番平和的な解決方法ですが、とりあえず、ちょっと別のJavascriptを使って解決してみます。

簡単に言いますと、古籏一浩氏の「Google Maps and Street View (グーグルマップ＆ストリートビュー) API 例文辞典」のスクリプトを使わせてもらう方法です。

実はここに書いてある方法でストリートビューを表示させれば、IEでリロード（再読み込み）しても表示されなくなるなんてことはありません。
ですから通常のウェブサイトでストリートビューを使う場合にはなんら問題はないのです。

問題は「ブログに貼り付けたい」場合だと思います。

ブログのテンプレートがいじれる場合なら、それなりに対処方法があります。
現に、以前「Google Mapsの埋め込み」という記事を書きました。

これに近い方法で対応するしかなさそうです。

■ソースコード

かなり強引でしかも問題アリアリの方法なのでおススメしませんが、手っ取り早くブログにストリートビューを埋め込みたい場合にどうぞ。

投稿者 lepracaun : 23:21 | コメント (0) | トラックバック

2008年6月15日

各RIAプラットフォーム・・・真の狙いはOSを影の存在にすることか！？

このブログでは、立ち上げ当初からAdobe AIRやSilverlightなどの、RIA技術を追いかけてきました。
いまでは随分と余計な要素（いわゆるノイズ）が混じるようになってしまいましたが・・・

Adobeの「AIR」、Microsoftの「Silverlight」、Googleの「Gears」、Sunの「Java FX」、Curlの「Nitro」等々・・・
いずれも、ブラウザとデスクトップの両方にRIAを実現する技術で、アプローチ方法やベースとなる技術が違うだけで、その狙いはほぼ同じものだと思います。

それは、OSを影の存在にすることです。

ブラウザの枠を超えて、リッチなWebアプリケーションを実現するとか、ブラウザからPCのローカルデータにアクセスすることが「真の」目的ではないと思います。
どちらかというとそれはMicrosoftやAppleといった、OSを提供している企業を刺激しないための目くらましだと思います。

さて、ここ最近の私が個人的に気になった記事が3つあります。

第一段階として、インストールして使うアプリケーションから、ブラウザを使うWebベースに移行があります。
Google ドキュメントや、Zohoなどで提供しているワープロソフトや表計算ソフトなどがその代表。
両者とも一部でGoogle Gearsを使って、PCのローカルデータにアクセスできます。
Webアプリケーションがどんどん進化して、インストールタイプのアプリケーションソフトと同等になったとしても、オンライン上でしか使えなかったら用途は限られますが、その問題はすでに実用レベルで解決目前にまでi至っています。

こうなると、なんでもWebベースで・・・となるのが自然の流れ。
企業でも個人のPCに保存して欲しくないデータは、サーバーで管理。そうでなければローカルに保存することを許可する。こういったデータの管理の仕組みも実現可能です。ローカルにインストールするタイプのアプリケーションより企業側のコントロールがしやすい点、導入コストが安くなるケースもあるでしょう。

なんでもWebベースで・・・となると、OSは何でもいいや・・・ってことになります。
まず、インストールして使うタイプのアプリケーションから、その存在価値が低下を始め、やがてはOS自体の存在価値が低下を始める・・・

Adobeの「AIR」、Microsoftの「Silverlight」、Googleの「Gears」、Sunの「Java FX」、Curlの「Nitro」等々・・・はいずれもその可能性を秘めています。
私は前から実用的なAIRアプリなどの出現を歓迎してきました。なぜなら企業が採用に至るような実用的なRIAがこれらRIA技術の革新の要だと思うからです。逆に言いますと、ガジェットのようなお遊び的なものしか出てないうちはまだまだといえるでしょう。

ここまで見えてくると、将来有望な企業・技術が見えてきます。
まず、上記の技術を開発・提供している企業（どれが将来の覇者になるかはわかりませんが・・・）
そして、これらの技術を使って開発できるクリエイターやデベロッパー・・・
さらに、これらをSaaSやASPとして提供する企業・・・ということになります。

個人ベースで考えれば、これらの技術を使って、デザイン・開発できるように日々情報を追いかけておくことが必要そうです。
それにしてもどれかがスタンダードな技術になるとしたら、いったいどれでしょうね？
WebクリエイターとしてはAdobe AIRあたりになってくれるとありがたいですが、実はGoogle Gearsが最も有望ではないかと感じています。

投稿者 lepracaun : 14:03 | コメント (0) | トラックバック

2008年4月29日

画像拡大スクリプト「FancyZoom」でレイアウトが崩れる件

先日の記事『シンプルな画像拡大スクリプト「FancyZoom」』で紹介した「FancyZoom」ですが、IEで自分のブログを見たら、ヘッダー部分のレイアウトが崩れていました。

私は普段、Firefoxを使用しているため、IEのチェックが怠りがちで、レイアウト崩れやJavascriptのバグに気づかないことが多々あります。本当は最低でもIE6、IE7、Firefox、Safariあたりはチェックしなくちゃいけないんですけどね。

今回もまさにそのケース。
原因は「FancyZoom」が、bodyタグの直下にdivとtableをひそかに追加しているため。

私のブログの場合、コンテンツ領域をdiv#containerにmargin-top:30pxを指定していました。
「FancyZoom」が追加したdivの高さやポジションの指定のせいで、隣接する要素がうまく取得できず、マージンを取れなかったのが原因です。

Firefoxの拡張「Firebug」を使って判明。

div#ZoomSpin、div#ZoomBox、div#ZoomCapDiv、div#ShadowBoxという4つのdivに加えて、div#ZoomCapDiv、div#ShadowBoxの中にはtableが追加されています。

こんなときFirebugは便利ですね。
IEにも同様の機能と称する「DebugBar」っていうのがあるんですけど、DOMのツリー表示はできるものの、現時点のバージョンV5.0.2では要素の編集まではできません。
その上、幅の狭いサイドバーに表示されるので、ソースコードが非常に見づらい。しかもなぜか、タグが大文字に変換されていますし・・・
ただ、Javascriptのソース表示はありがたいですね。

同じくDOMツリーを表示して、なおかつ要素の編集機能があるのが「Internet Explorer Developer Toolbar」。マイクロソフト純正です。
CSSのプロパティやHTMLの要素を削除したり追加したりと・・・いわゆるデバッギングにはこちらのほうが便利。

話が逸れましたが、結局強引に自分とこのCSSを修正して緊急対応しました。
marginで余白を取れないため、paddingで余白を取るという、いかにも素人っぽい解決方法。
しかし、いろいろ試したものの、IEで「FancyZoom」によるレイアウト崩れを直す方法が見つかりませんでした。
また、追々調査していこうと思います。

投稿者 lepracaun : 11:55 | コメント (0) | トラックバック

2008年4月24日

Google Static Maps

Javascriptを利用できない環境でもGoogle Mapsが利用できるようになりました。

Google Static Maps API

通常のGoogle Maps APIではJavascriptで地図を表示させ、ズーム機能やマウスでドラッグして移動させたり、マウスオンでふきだしを表示させたりなどできました。
ただし、Javascriptを使用できないモバイルサイトでは利用できませんでした。

モバイルでGoogle Mapsを利用したい場合はiアプリ版の「モバイルGoogleマップ」がありましたが、これはドコモの903iシリーズ以降の対応となっており、かなり限定的でした。

これまではモバイル版Yahoo!地図情報にリンクを貼ったりしてモバイルサイトに対応していたのですが、今後はGoogle Static Maps APIにより、Google Mapsも利用できるようになりそうです。

Google Static Mapsは静的なGIF画像を表示させます。
当然、ドラッグして地図を移動させたり、マウスオンでふきだしを表示させたり、ズーム機能は使えません。
しかしながらあらかじめマーカーを表示させたり、通常のマップとモバイル用のマップのいずれかのマップタイプを指定できます。

利用するには従来版Google Maps APIと同様、API Keyが必要です。

同じ地図をモバイル用のマップタイプで表示させたのが下記のもの。

center: カンマ区切りで緯度と経度を指定
zoom: 0から19の間でズームレベルを指定
size: 地図画像のサイズ(最大512x512ピクセル)
maptype: roadmapまたはmobileを指定(roadmapはPC版Googleマップの画像、mobileはモバイル端末の解像度に最適化した画像)
markers: マーカーの緯度と経度、位置、色(red, green, blue)、アルファベット1文字を指定
- [緯度],[経度],[色][アルファベット]の順で記述し、複数マーカーはカンマで区切る。
- 色とアルファベットの間に区切りは入れない。たとえば緑で「A」のマーカーを表示させたいときは greena と記述する。
key: ドメインごとに取得するAPIキー(Google Maps APIと同じもの)

パラメータの指定の仕方も簡単ですし、とても便利なのですが、気になる点がひとつ。
それは、1日あたりの最大リクエスト数が1000ということです。
ユニーク画像リクエスト数ということですから、同一画像に1000人以上がアクセスしても駄目でしょうし、サイト内に複数の画像を設置していた場合、累計でカウントして1000アクセスを超えたら駄目ということです。
この辺は、設置しようとするサイトおよびページのアクセス解析をみながら判断するしかなさそうですね。

投稿者 lepracaun : 01:35 | コメント (0) | トラックバック

2008年4月 1日

シンプルな画像拡大スクリプト「FancyZoom」

画像を拡大表示させるJavascriptは数あれど、これほどシンプルなものはないのではないか？と思われるのが「FancyZoom」です。

デモの確認とソースのダウンロードは下記のサイトから。
cabel.name: FancyZoom 1.1

2008年2月8日に1.1にバージョンアップしたようです。

使い方はいたってシンプル。
ダウンロードしてきたスクリプトにリンクを貼ります。

bodyタグにonloadで読み込み。

あとはサムネールの画像のimgタグにアンカータグで拡大画像へリンクを貼るだけ。

画像から画像へのリンクは全てスクリプトが効きます。
他の画像拡大スクリプトのように、適用したい画像に記述を追加するのではなく、「適用したくない画像」にだけ、スクリプトを記述します。

rel="nozoom"

この記述を追加すれば、画像拡大しません。
title属性で画像のキャプションもつけることができます。

なぜ、数ある画像拡大スクリプトの中で、コレだけ紹介したかというと、このブログで採用したからです。
（飽きたらはずすかもしれませんが・・・）

投稿者 lepracaun : 01:38 | コメント (0) | トラックバック

2007年10月11日

ブロックレベル要素の高さを揃えるheightLine.js

シンプルでいて利用価値が非常に高いと思われるJavascriptのライブラリが発表されていました。
ブロックレベル要素の高さを揃えることができるという「heightLine.js」

複数のブロックレベル要素の高さを揃えれないというCSS固有の問題を解決できるという点で、かなり有意義なのではないでしょうか？
WEB標準に準拠という考え方に固執すると、ブロックレベル要素の高さを揃える必要性に疑問を感じなくもありませんが、現実問題として、デザイン上そういうニーズはあります。

そこだけテーブルレイアウトにしてしまうと、どこか「敗北感」みたいなものがあり、フルCSSレイアウトではなくなります。
そんな時、便利なheightLine.js。
ぜひ今度使わせていただきたいと思います。

投稿者 lepracaun : 01:27 | コメント (0) | トラックバック

2007年10月 6日

Google Mapsの埋め込み（その２）

このブログで「Google Mapsの埋め込み」という記事を書いた途端に、Google Mapsの方で簡単にブログに埋め込みができるようにアップグレードされました。
世の中そういうものですね。

やりかたは非常に簡単。

Google マップのページにアクセスします。
次に、埋め込みたい地図を表示させます。
それから、右上にある「このページのリンク」をクリック。

サイズなどをカスタマイズもできます。

拡大地図を表示

投稿者 lepracaun : 21:15 | コメント (0) | トラックバック

2007年8月22日

チェックボックスから特定の数だけチェック、パラメータをリンク先に渡す

チェックボックスから特定の数だけチェックさせ、そのvalue値をパラメータとしてリンク先に渡す方法です。
var itemNumで個数を設定。この個数以上、もしくはこの個数以下チェックされていてもアラートを表示させます。
チェックボックスのvalue値をパラメータとして連結させ、リンク先に渡します。
リンク先はjmpURLで設定します。

■Javascriptソース

■HTMLソース

<p>メニューからご希望の3つをお選びください。</p>
<form id="myform" name="myform" method="post" action="" onsubmit="return check()">
<ul>
<li><input type="checkbox" name="flag[]" value="itm1" />塩ラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm2" />みそラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm3" />しょうゆラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm4" />チャーシューメン</li>
<li><input type="checkbox" name="flag[]" value="itm5" />タンタンメン</li>
</ul>
<p>
<input type="submit" name="Submit" value="送信" />
</p>
</form>

投稿者 lepracaun : 21:28 | コメント (0) | トラックバック

2007年8月 8日

Google Mapsの埋め込み

MovableTypeにGoogle Mapsを埋め込みします。
ただMovableTypeのエントリー記事にGoogleMapsを埋め込むのは、他の方でもされていますので、ちょっと違ったアプローチ方法を取ってみました。

■設定条件
「表示する地図の緯度・経度をエントリー記事から指定できるようにする」

つまりあらかじめ決められた座標の地図をエントリーに表示させるのではなく、そのエントリーごと好きな座標の地図を表示できるようにするという条件を設定しました。

■実施手順

Google Mapsを利用するにはGoogleアカウントを取得後、Google Maps API-Sign Upで、API Keyを取得する必要があります。

今回私が取った方法は、MovableTypeのテンプレートにあらかじめAPI Keyを埋め込んでおく方法。

■注意点その１・・・文字コードUTF-8。
Google Maps APIを利用するには文字コードがUTF-8でなくてはなりません。
当ブログはUTF-8で記述しているので問題ありませんが、Shift-JISやEUC-JPでエンコードしている場合は、インラインフレームで呼び出すしかありません。

■注意点その２・・・Javascriptは<head>タグ内に。
FirefoxやOperaなどのブラウザでは問題ないのですが、IEでは<body>タグ内に、Javascriptを記述して直接GoogleMapsを呼び出そうとするとエラーが表示されます。
今回のケースのように、どうしてもエントリー記事内にJavascriptを記述する必要がある場合が出てくるでしょう。
そのときは、<body>タグ内のJavascriptはfunction化します。
<body onload="onLoad()" onunload="GUnload()">というように、<body>タグのonloadでそのfunctionを呼び出します。
※ちなみにonunload="GUnload()"はIEのメモリリーク対策用だそうです。

■ブログのテンプレート
各テンプレートの<head>内に、Google API Keyのソースを記述します。
同時に、緯度と経度、ふきだしに表示させるテキストを引数で受け取るためのスクリプトを記述します。
こちらは外部ファイル化したほうがスマートですが、説明を簡素化するため<head>タグ内に記述します。
引数lat、lon、lotに緯度・経度・文字テキストを受け渡します。
上記で記載の<body>タグのonloadを忘れずに！

■エントリー記事の記述例
ブログのエントリー記事内のGoogleMapsを表示させたい箇所に下記のように記述します。

<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
function onLoad() {
load(34.675813, 135.5037,"ハートンホテル南船場");
}
</script>

~~■実施の埋め込み例~~
2007年10月6日修正。実際の埋め込み例を削除しました。
理由はいちいちgoogleにアクセスして、ページが重くなるからです。
「Google Mapsの埋め込み（その２）」の記事を参照

参考サイトは下記の通り。

■Google Maps API - Sign Up
http://www.google.com/apis/maps/signup.html
何はともあれ、ここからスタート。
サーバーでGoogleMapsを利用するためにはAPI keyを取得する必要があります。
そのサインアップサイトです。サーバーによってKeyコードが違いますので、案件ごとサインアップする必要があります。

■Geocoding - 住所から緯度経度を検索
http://www.geocoding.jp/
GoogleMaps上での緯度経度の数値を取得するためのサイト。でも微妙にずれたりしますので、数値を鵜呑みにせず、本当にその場所であっているか確認・調査が必要です。

■Google Maps簡単作成ツール：GMapCreator
Google MAPS APIプログラミングにある便利なツール。
http://www.geekpage.jp/web/google-maps-api/gmapcreator/
Javascriptのソースコードを表示してくれます。これで吐き出したソースを組み合わせて使うのが、一番の近道かもしれません。

■Google-Maps-API-Japan
http://groups.google.com/group/Google-Maps-API-Japan/topics
GoogleグループのGoogleMapsディスカッションです。
自分がつまづいたところは、たいてい他の誰かもつまづいています。その誰かは、ここで質問を投げているケースが多いです。疑問点が出たら、まずここで答えを探しましょう。

■Google Maps入門
http://www.ajaxtower.jp/googlemaps/index.html
下記のオライリーのサポートページより説明がわかりやすいです。

■汎用Google Maps APIスクリプト KsGMap
http://www.ksgmap.jp/index.html
GoogleMapsを利用しやすくしたスクリプト。これ、とても便利です。

■Google Maps Hacks サポートページ
http://www.marlin-arms.co.jp/gmh/index.html
オライリーから出版された初期のGoogleMaps本の解説ページ。今となっては情報が若干古いです。

■Flashコンポーネントダウンロードサイト
http://www.afcomponents.com/components/g_map/
FLASHにもGoogleMapsが組み込めたりします。
ただし、AJAX(Javascript)ほど、自在にカスタマイズできません・・・（と思う）

投稿者 lepracaun : 01:12 | コメント (0) | トラックバック

2007年6月 9日

Google Ajax Feed API：キャッシュ騙しを使う方法

Google Ajax Feed APIを使って、livedoor blogからRSSを取得して、別のサーバーに新着情報として表示させていたときのことです。
どうも、キャッシュデータを表示しているんではないか？　ということが頻繁に起こりました。

修正したはずのエントリーが、古いままで表示されたり・・・
削除したはずのエントリーが、表示されたり・・・

All Aboutの「YUI+Google AJAX Feed API」という記事に、回答が載っていました。

引用させていただきますと・・・

GoogleのGAF用サーバーを経由したデータは、通常のプロクシサーバーと同じようにキャッシュされています。したがって、一度キャッシュされたデータは、次にGoogle側でリフレッシュされるまでの間は、もとのRSSが書き換わっていても反映しないことになります。

もし、これをどうしても強制的に書き換えたいというような場合には、URLクエリにダミーを追加する方法なども有効です。(下記では、ダミークエリ「?123」をURLに追記しています。)

だそうです。

そこで、下記のようにソースに手を加えて、いわゆる「キャッシュ騙し」をします。

このブログのRSSフィードを取得するソースの場合・・・

var feed = new google.feeds.Feed("http://www.lepracaun.info/blog/atom.xml?256");

?の後ろの数字は何でもいいわけです。
あるいは・・・

var feed = new google.feeds.Feed("http://www.lepracaun.info/blog/atom.xml"+"?"+(new Date()).getTime());

実行してみると、キャッシュされた内容が表示されて、最新のものが表示されずに困っていたものが、みごと解決できました。

投稿者 lepracaun : 08:13 | コメント (0) | トラックバック

2007年6月 2日

Google Ajax Feed API にFeedControlクラス追加

Google Ajax Feed API にFeedControlというクラスが追加されました。
これを使うと何ができるかと言いますと・・・

取得してきたフィードを簡単に定型的なフォーマットで表示させることができます。
複数のフィードを扱うことができます。

前回の記事「Google Ajax Feed API を試す（その２）」で日付フォーマットの成型について説明しましたが、このFeedControlというクラスを使用すると、そんなことをわざわざしなくても、勝手に日付フォーマットも成型してくれます。

定型的なフォーマットは3種類。

ベーシックモード
タブモード
サイドバーモード

タブモードはタブで複数のフィードを切り替えることができます。
他のモードは、複数のフィードを上から順番に表示していきます。

では、さっそく実行結果を見てみましょう。

＞ベーシックモードの実行結果を見る。
＞タブモードの実行結果を見る。
＞サイドバーモードの実行結果を見る。

タブモードの実行結果のHTMLソースを見ていただくとわかりますが、

feedControl.draw(
document.getElementById("feedControl"),
{
drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED
});

の箇所の「DRAW_MODE_TABBED」という部分で表示モードを切り替えることができます。
「DRAW_MODE_LINEAR」にすれば、サイドバー表示に切り替えることができます。

他にも、フィードのリンクの仕方（同ウインドウで開くとか、別ウインドウで開くなど）や、表示するフィードの件数も設定できます。

詳細は「Google AJAX Feed API Class Reference」にある「class google.feeds.FeedControl」にてご確認下さい。

投稿者 lepracaun : 09:41 | コメント (0) | トラックバック

2007年4月28日

Google Ajax Feed API を試す（その２）

※このエントリーは2007年6月5日に加筆修正しました。

Google Ajax Feed API に限らず、RSSでの日時フォーマットはW3CDTFというフォーマットです。
『yyyy-mm-ddThh:mm:ss+hh:mm』という表示形式ですね。

新着情報などでRSSを利用したい場合、この日時フォーマットではわかりづらいので、日本語表記にしたいところです。

【例】
2007-04-23T17:20:00+09:00
↓
2007年4月24日 2:00

そこで、日時の日本語表記バージョンを作ってみました。

＞実行結果を見る

サンプルソースは下記の通り。
当たり前ですが、API Keyの箇所と、RSSのURLを記載する箇所を修正してお使いください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Feed API - Simple Example</title>
<meta http-equiv="content-script-type" content="text/javascript" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=API Key"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed("http://url.rdf");
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var dd = new Date(entry.publishedDate); // now
        var yearNum = dd.getYear();
        if (yearNum < 2000) yearNum += 1900;
        var date = yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日 "+dd.getHours()+"時"+dd.getMinutes()+"分";
        container.innerHTML += "<p>" + date +"<br /><a href='" + entry.link + "' target='_blank'>" + entry.title + "</a></p>";
      }
    }
  });
}
google.setOnLoadCallback(initialize);

</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>

投稿者 lepracaun : 22:14 | コメント (0) | トラックバック

2007年4月25日

Google Ajax Feed API を試す（その１）

2007年4月16日に、Googleから「Google AJAX Feed API」が公開されました。
RSS/Atomなどの各種フィードを取得するためのJavaScript APIです。

いったい何がすごいのかと言いますと、他ドメインからRSS/Atomを取得してくることができる点だと思います。
CGIを使わないでJavascriptだけで、RSSを取得できるAJAXといえば、「[ajax] JavaScript版 RSSリーダー」で照会されている、JKL.ParseXML と JKL.Hinaではないでしょうか？
JKLといえば、XMLの制御を得意とするAJAXライブラリです。
JKL以外にXMLの制御に優れたAJAXライブラリといえば、Adobe Spryでしょうか。

ともかく、上記の「[ajax] JavaScript版 RSSリーダー」では、他ドメインのRSSは取得してくることができませんでした。

今回、Googleから公開された「Google AJAX Feed API」は、その問題点を解決したAPIです。

利用するにはGoogle API keyが必要です。この辺は、Google Mapを利用する場合と手続きが似ています。
下記のサインアップのサイトで、API Keyを取得します。

【Sign up for the Google AJAX Feed API】
http://code.google.com/apis/ajaxfeeds/signup.html

サインアップに成功すると、ご丁寧にAPIを利用するためのサンプルソースを表示してくれます。
とりあえずそれをコピペして、カスタマイズするところから始めます。

試しに、自分のサーバーでlivedoor blogからRSSを引っ張ってみましたが、非常に簡単でした。
Javascriptは本来、そのスクリプトが生成されたドメインにしか、ネットワークアクセスできないのです。
同一生成元ポリシーと呼ぶそうですね。
これを解決するために、Googleサーバがさまざまなソースからフィードを取得して、Googleサーバを介して外部フィードを取得するようにしたというわけです。

アクロバティックと言いますかなんと言いますか、とにかくGoogleだからできることですね。
とにかく、他ドメインのRSSをあちこちから集めてくるようなWebサイト・Webアプリケーションなどを作成したい場合にかなり重宝しそうです。

投稿者 lepracaun : 02:16 | コメント (0) | トラックバック

2007年3月17日

JavascriptとActionScriptの連携その1

JavascriptとActionScriptの連携をいくつかのケースに分けて実践してみたいと思います。
最初のケースは、別のHTMLに埋め込まれているswfの特定のタイムライン（ラベル）にジャンプさせる方法です。

今回のケースでは下記の条件を設定しました。

１．リンク先のHTMLファイルは一つ、swfファイルも一つとする。
２．swfのタイムラインにラベルを記載。リンク元のHTMLから、リンク先swfの特定のラベルのあるタイムラインを最初に表示するようにする。

リンク元HTMLファイル名を、index.html
リンク先HTMLファイル名を、jsas.html
リンク先HTMLに埋め込まれたswfファイル名をjsas.swfとします。

＞実行結果を見る

サンプルソースは下記の通り。

まず最初に、リンク元のHTMLからリンク先のHTMLにパラメータを渡してやります。

<a href="jsas.html">デフォルトの状態で表示させる</a><br />
<a href="jsas.html?scn1">ラベルscn1を表示させる</a><br />
<a href="jsas.html?scn2">ラベルscn2を表示させる</a><br />
<a href="jsas.html?scn3">ラベルscn3を表示させる</a><br />
<a href="jsas.html?scn4">ラベルscn4を表示させる</a><br />

リンク先HTMLのファイル名の後ろに?＋ラベル名を記述します。

リンク先HTMLからリンクを貼っている外部jsファイルに下記のJavascriptを記述します。

function Check() // 何の引数をつけて呼び出されたかをチェックする。
{
var strTemp = new String();
var strArg = new String();
var nLength;
strTemp = location.search;
nLength = strTemp.length;
strArg = strTemp.substring(1, nLength);

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,29,0" width="320" height="240" id="index">')
document.write('<param name="allowScriptAccess" value="always" />')
document.write('<param name="movie" value="jsas.swf?goJump='+strArg+'">')
document.write('<param name="quality" value="high">')
document.write('<param name="bgcolor" value="#ffffff">')
document.write('<embed src="jsas.swf?goJump='+strArg+'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="320" height="240" name="index">')
document.write('</object>')
}

<body>～</body>タグ内のswfを表示したい箇所に上記のjavascriptを呼び出すスクリプトを記述。

<script language="javascript">

</script>

呼び出されるswfのルートのタイムラインに下記のActionScriptを記載。

※注意点
swfファイルは完全にパラメータ等が読み込まれてからでないと、動作しないケースがあります。
ローディングバーをつけるなどして、FLASHで使用するデータを完全に読み込んでから実行します。

stop();
gotoAndPlay(_root.goJump);

以上で完了です。
仕組みとしては非常にシンプルです。
１．リンク元HTMLファイルからパラメータをつけて、リンク先HTMLへリンク。
２．リンク先HTMLでパラメータの文字列を取得、FlashVarsでswfファイルに変数goJumpを送信。
３．swfファイルで変数goJumpに該当するラベルにジャンプ。