ueblog » Ajax

Google AdSense for Mapsを試してみた

ueblog — Sat, 12 Dec 2009 15:33:59 +0000

Google Maps APIを利用した地図上にAdSenseを表示できる、Google AdSense for Mapsを試してみた。

Google Japan Blog: Google Maps API でマネタイズ

AdSense for Mapsには２通りの方法があるようで、今回は地図の位置に合わせて広告が表示できる、「Maps Ad Unit」の導入方法を書いてみます。

PLAIN TEXT

JAVASCRIPT:

var map;
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(33.956461,-118.396225), 13);
}
// 自分のpubidを入力
var publisherID = 'yourPublisherID';
var adsManagerOptions = {
maxAdsOnMap : 2,
style: 'adunit',
channel: 'your_channel_id',
minZoomLevel: '6'
};
adsManager = new GAdsManager(map, publisherID, adsManagerOptions);
adsManager.enable();

javascriptで、mapオブジェクトを生成しているところあたりで、GAdsManagerというオブジェクトを作って、enableメソッドを呼ぶだけです。

サンプルの「yourPublishID」の部分は、自分のAdSense管理画面にある、「アカウント情報」タブ→「プロパティ情報」にある「コンテンツ向けAdSense:」に表示されている、

ca-pub-xxxxxxxxxxxxxxx

を利用する。

「maxAdsOnMap」は広告の表示数（デフォルト3）

「your_channel_id」に関しては、チャネルを利用して効果をトラッキングしている方は指定しましょう。チャネルIDは「AdSense設定」タブの「チャネル」に表示されています。

「maxAdsOnMap」は広告を表示するズームレベル（デフォルト6）ということですが、ズームレベルに関係なく表示されているようです。

詳しいドキュメントは下記です。

Maps APIのドキュメント

とても簡単ですね。

ちなみに「渋滞道路情報マップ」に表示させてみました。

あんまりマッチしてない気がしますが、、利用していると改善されるかも。

jQuery Gallery Scroller

ueblog — Sun, 25 May 2008 15:32:30 +0000

久々にjQueryネタ。

写真をアルバムのようにスライドしてくれる、jQueryプラグイン、jqCalScrollのご紹介。

実装方法は簡単。プラグインとjQueryのライブラリを読み込んで、呼んであげるだけ。HTMLはul要素で書くだけ。

PLAIN TEXT

HTML:

type="text/javascript" src="/js/jquery-1.2.1.min.js">
type="text/javascript" src="/js/jqgalscroll.js">
type="text/javascript">
$(document).ready(function(){
$("#demoOne").jqGalScroll();
});
type="text/css">
@import url("common/css/jqGalScroll.css");
id="demoOne">
src="http://ueblog.natural-wave.com/wp-content/uploads/2008/05/s-dscn7204.jpg" border="0"/>

src="http://ueblog.natural-wave.com/wp-content/uploads/2008/05/s-dscn7209.jpg" border="0"/>

src="http://ueblog.natural-wave.com/wp-content/uploads/2008/05/s-dscn7217.jpg" border="0"/>

src="http://ueblog.natural-wave.com/wp-content/uploads/2008/05/s-dscn7238.jpg" border="0"/>

これはすごい！

Googleのグラフが簡単に書けるAPI

ueblog — Mon, 10 Dec 2007 15:16:21 +0000

とうとうGoogleからグラフを簡単に書けるAPIがでました！

利用方法はimg srcタグにそのままAPIのURLを入れるだけでグラフ画像が生成される。
早速、試してみよう。

グラフの種類

Line Chart

Bar Chart

Pie Chart

Venn diagrams

Scatter plots

APIについて

グラフごとに必須となる項目（データ、ラベルなどの指定）がさまざま。バックグラウンドの色など含め、さまざまな効果をURLパラメータで指定できる。返ってくる画像はPNG方式。

パラメーターの意味はすこし難しいけど、これは便利だ！

利用方法的には、さまざまなデータをブログやインターネットサービスで公開するときが考えられるが、会社の売上げやら、サービスのPVなどをグラフ化しようとして、機密情報をGoogleに送るのはさすがにNGでしょう。（というか通信は暗号化されないので。）

詳しい仕様は下記へ
Developer's Guide - Google Chart API - Google Code

これは便利！誰でも簡単にグラフを描けるAPIがGoogleから登場！『Google Charts』

Google Code Chart - 折れ線グラフうぃざ～ど

HeartRails Express APIを利用して路線と駅のプルダウンをつくろう

ueblog — Sat, 08 Dec 2007 15:01:05 +0000

路線や駅情報を提供してくれる、HeartRails ExpressのAPIを利用して、路線と駅のプルダウンを作成してみます。

HeartRails ExpressのAPIは、JSONPをサポートしているので、javascriptだけでできてしまいます。

利用するライブラリは、
JQuery

selectタグの操作を楽にしてくれるJQueryのプラグイン

JSONPをサポートしてくれるライブラリjsr_class.js

ダウンロードして、jsファイルをとりだし、下記のように宣言してあげます。

PLAIN TEXT

JAVASCRIPT:

パスは適宜置き換えてください。

そして、実装コードはこんな感じになります。

PLAIN TEXT

JAVASCRIPT:

HTMLはシンプルにこんな感じで。（都道府県は省略しました・・・。都道府県の値もAPIから取得できますが。手抜きで。）

PLAIN TEXT

HTML:

id="pref" onChange="PrefChange();">
value="">都道府県を選択
value="東京都">東京都
value="神奈川県">神奈川県
value="埼玉県">埼玉県
value="千葉県">千葉県
/> />
id="train" onChange="TrainChange();">
value="">路線を選択
/> />
id="station">
value="">駅を選択

サンプルはこちら

これは地図系のサイトでかなり使えそうですね。

Lightweight Language Spiritに行ってきた

ueblog — Sat, 04 Aug 2007 14:58:11 +0000

猛暑の東京。そんな中Lightweight Language Spirit（LLSpirit）というイベントに行ってきた。別にLLという分野分けはどうでもいいかなと思っていて、そこまで期待してなかったのが正直あったが、中身は非常に濃いイベントだった。

Language UpdateでのRubyのペアプレゼンの展開には「やられた」し、自分の不勉強で知らない言語がたくさん（Lua、xtalなど）あるんだなと思ったり、みなさんないものは自分で作ってしまうのかと。普段利用ばかりしている自分のある意味、戒めとなるような内容でした。
特に日本語プログラムのなでしことか、プログラム言語の敷居をぐっと下げてくれそうなそんな期待を持った。
VM魂ではやっぱりJRubyがいまのところ一歩リードかな。というかRubyの勢いはこのイベントでもすごく感じた。

あとプレゼンソフトの部分でもみなさんおもしろい内容で、ほんとうにプレゼンがうまくて飽きさせない。
Javaの3Dもすごかったし、Gaucheのプレゼンもおもしろかった。最後のチャットでプレゼンも前代未聞だったけど楽しかったな～

詳細はおそらくWebで動画なり出ると思うのでそこでぜひ確認を。