東京通勤道中のAdSenseをレスポンシブにしてみた

Google AdSenseにレスポンシブなサイズがあると聞き、試しに+東京+通勤+道中+の広告をレスポンシブにしてみました。PCで見ると横長でちょうどいいんですが、幅を狭めたら正方形の大きな広告になり、コンテンツがファーストビューに入らないかも…。

AdSenseをいじったのは久しぶりですが、コードもだいぶかわってたんですねー。

GoogleMapperバージョンアップ(0.4.0)- 色んなマーカー表示 & AdSense表示 など

久しぶりにGoogleMapper V3をバージョンアップしました。0.4.0です。

つい先日、Google Maps JavaScript API V3でAdSenseの表示ができるようになったので、それに対応した勢いでバージョンアップとなりました。

あと、だいぶ前からサンプルの方では表示していた(サンプルではBeta版を使っているので、気まぐれに機能追加が反映されている)のですが、カラーマーカー(文字を1文字なら表示可能)や、メッセージを表示できる吹出し型マーカーの表示機能も追加しています。
ちなみにカラーマーカーや吹出し型マーカーには、Google Maps APIではなくGoogle Chart APIを使っています。(V2の時からパメラさん作のライブラリで使われてた非公開のやつが正式にChart APIで公開された感じですね。)

あと細い変更としては、Google Maps API V3が早々にStreet Viewに対応したので、それに付随する細い変更も入れてます。(吹き出し表示時の動きとか。)

ちなみに、AdSense表示時にはGoogle MapsのJavaScriptのURLに「libraries=adsense」を追加しないといけないので注意してください!

Google Maps API V3を使って地図をお手軽に表示 – Google Mapper V3 [ゼロと無限の間に]

Google Mapper バージョンアップ(0.2.0)検索窓、ホイールによるスクロール、etc

Google Mapsをほどよくカスタマイズしてお手軽に表示 – Google Mapper [ゼロと無限の間に]

主な変更点

  • コントロール類のスタイルを、最新のGoogle Mapsと同じものにした。(左側のズームコントロールとか)
  • 左下に検索窓(GoogleBar)を表示し、地名で検索できるようにした。この検索結果には自分のGoogle AdSenseを表示することもできる。
  • マウスホイールをスクロールさせることによって地図のズームイン・ズームアウトを可能にした。
  • 地図をクリックしたときのイベントのサンプルとして、クリックした地点の緯度・経度・ズーム値を表示するようにした。

Google Maps API V3が出たが、まだV2より機能が少ない。早く出揃わないかなあ。ストリートビュー関連がシームレスに組み込まれると嬉しいんだけど。

掘出市場モバイル版(Beta)スタート

掘出市場を携帯電話のWebブラウジングに対応させた。対象はdocomo、au、Softbank、あと事情によりNokia。メジャーな機種ならたいてい大丈夫だと思う。

下のQRコードから携帯電話でアクセスできるはず。

QRコード(QRコードは(株)デンソーウェーブの登録商標です)

実は掘出市場の携帯対応はこれが2回目。かなり最初の頃から携帯対応していた。

ただし携帯対応とはいっても、最初のそれはauでなんとか見られるという程度のものだった。

  • 文字コートはUTF-8だし。(今ならdocomoでもUTF-8で概ねOKだけど。)
  • 外部スタイルシート読み込んでるし。

その後、掘出市場のリニューアルがあり、それ以降は携帯のことは無視していた。

しかしここで一念発起して、携帯対応してみた。

やったことは、

  • 文字コードをShift_JISにした。PHPで実質的に2行でできた。(いろんなことを考えると携帯はShift_JISの方が無難みたい。)
  • 英数字とカタカナを全て半角にした。これは数行。
  • ヘッダーとフッターを限界までシンプルなHTMLにした。携帯はHTML(cHTML?)で充分。docomoでインラインのスタイルシートが使えなくなることなんか気にしないのさ。
  • CSSの使用をほとんどやめた。docomoで使えないし。文字に色付けたかったらfont要素使うさ。

これぐらいか。

モバイルAdSenseは以前にやったし。(現在ゼロ円。通算で。)

後は辛抱強くGoogleのモバイルボットを待とう。

掘出市場にGoogleカスタム検索を導入

Google AdSenseの検索がリニューアルしたようなので、掘出市場に導入してみた。

テキストボックスの中にGoogle画像をウォーターマーク表示できてちょっといい感じ。ボタンのラベルをシンプルに「検索」にできるのも幅を取らなくてよい。

ヘルプを見る限りでは、ドメイン全体の検索だけでなく、特定のディレクトリ内に絞り込んだ検索等もできるはずなのだが、コード生成時に入力エラーになってしまう。要追加調査 😐 サイト内のコンテンツの多くは掘出市場だからとりあえずはいいか。

今回のリニューアルの目玉は、サイト内に検索結果を表示する連携機能のようだが、検索結果ページを作らなければいけないので今回はパス。Googleのページの方がシンプルで見やすいというのもある。

これをいじっているときに、掘出市場で検索ボタンをクリックできないことがあるのに気付いた。いろいろ試した結果、Free Website Ribbon Generatorで作った右上のリボンがクリックを邪魔していた。ちょっと言葉を追加して、リボン領域がボタンにかからないようにしたら回避できた。

z-indexとかで上に被さってるのかな?

掘出市場 携帯版にGoogle AdSenseを入れてみた

[掘出(H)市場] 安い?高い?人気の商品からえ゛っ?!というような珍品まで、驚き価格の掘出し物を発掘しよう

Google AdSenseに去年くらいからモバイル向けのが加わったが、このサイトでは面倒なので使ってなかった。だけどせっかくなので使ってみようかという気になった。

このサイトの中で携帯からアクセスされそうなのは掘出市場か。でも掘出市場はUTF-8のXHTML StrictでCSSの振り分けでなんとかauで表示できるようにしているだけという代物。DoCoMoとかでは見れないかも。まあ良いか。

Webサーバの先月のアクセスログを調べてみると、auらしきログが何件かあった。

普段アクセス解析にはGoogle Analyticsを使っているが、Google AnalyticsではJavaScriptが使えないブラウザは集計対象にならないので、今回は役立たなかった。そうだ、こういうときにモバイル版AdSenseを入れてれば簡易的なアクセス集計が分かるではないか。それはよいかもしれない。

ということで掘出市場に携帯からアクセスした場合のみ、モバイルAdSenseを表示するようにした。しばらくは様子見。