Google Adsenseの表示タイミングを制御する

category-icon

 日本を出る前後、昨年の9月頃から、このページでグーグルのAdsenseを利用しています。使いこなしていないせいか、広告収入が100$に達するのに、あと数年はかかりそうなペースです。さて、この広告表示は、JavaScriptのdocument.writeを使ってインラインフレーム(IFRAME)で書き出すということをしています。前回のエントリーで使用しているBLOCKQUOTEのボーダー枠を演出するJavaScriptの実行タイミングが遅いなと感じていたんですが、原因は、このdocument.writeの存在でした。ちょうど2年前に、これに関するエントリーLinkdocument.write()の実行タイミングをずらす方法)を書いていたのを思い出し、早速、このサイトにも適用させてみました。

 効果はてきめんで、先にBLOCKQUOTEの装飾が終わり、その後、Google Adsenseが表示されるようになりました。ppBlogでは、DOMの構築が終わるタイミングで実行されるJavaScriptが多いので(これはドキュメントの読み込み完了前に実行される)、document.write()に起因する描画遅延対策は大切ですね。

 具体的に行った対処法は、シンプルです。テーマのtemplate.phpを弄ります。このサイトのベーシックなテーマでは、左側のカラム(サイドバー)にGoogle Adsense用のDIVタグ(IDはgoogle-ads)を用意してます。

<div id="google-ads">
 /* この中にグーグルからの広告用javascriptを貼り付けている */
</div><!--#google_ads-->

で、この中身を以下のようにします。既存のグーグルのコードをいじることはないです。

<div id="google-ads">
 <script type="text/javascript">
  (function (){
   var alts = [];
   d._write = d.write;    /* オリジナルのdocument.writeをコピーしておく */
   d.write = function(s){ alts.push(s);};  /* 新たにdocument.writeを定義。ここでは、単に配列に入れるだけ */
   oParts.start(function(){  /* DOM構築完了のタイミングで実行されるように登録する */
    o("#google-ads").html(alts.join("")); /* 配列に入れた本来のdocument.writeの中身を書き出す */
    d.write = d._write;   /* オリジナルのdocument.writeに戻す */
   });
  })();
 </script>
   /* 以下、既存のコード */
 <script type="text/javascript"><!--
   google_ad_client = "pub-XXXXXXXXXXXX";
   google_ad_slot = "XXXXXXXX";
   google_ad_width = 180;       /* 広告の幅 */
   google_ad_height = 150;     /* 広告の高さ */
 //--></script>
 <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
 </div><!--#google_ads-->

 基本的には、これでOKです。後は、予め広告のサイズが分かっているので、見栄えとしてCSSファイルを少しいじるだけです。このサイトでは以下のように指定しています。

#google-ads { 
  margin: 70px auto 0 10px;
  padding: 0;
  width: 180px;    /* 広告の幅に合わせる */
  height: 150px;   /* 上と同様に */
}

 ちなみに、このサイトのwebRingLink は、「ページ作成機能」を使って作っていますが、表示スクリプトはBlogPeopleさんLink のを利用しています。ここでもdocument.writeが使われているので、それに対処した記述をしています。その中身をさらしておきます。

<div class="center" style="color:#2f4f4f;">
<h2>ppBlog's webRing</h2>
<p style="padding:1em;font-size:14px;width:300px;margin:auto;">
ppBlog使いの方々です。随時募集中。
<br />多分に見落としなどもあると思いますので,このサイトもお願いしますというのがあれば
気兼ねにメール下さい。自薦他薦問いません。</p>
<div id="_webRing" style="margin: 2em auto;width:300px;text-align:left;"></div>
  /* ここから */
<script type="text/javascript">
 (function (){
   var alts = [];
   d._write = d.write;
   d.write = function(s){ alts.push(s);}
   oParts.start(function(){
    o("#_webRing").html(alts.join(""));  /* 上で用意した DIV#_webRing に流し込む */
    d.write = d._write;
   });
  })();
</script>
  /* ここまでがポイント */
<script type="text/javascript" charset="utf-8"
 src="http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js"></script>
</div>

 

— posted by martin at 11:08 pm   commentComment [0]  pingTrackBack [0]

 

アクセス解析の「リンク元」をすっきりさせたい

category-icon

 以前、ユーザーの方からのコメントで以下のような要望がありました。

2.アクセス解析の「リンク元」統計へのURL置換機能の実装
私が使っていたことのあるアクセス解析サービスにあった機能なのですが…… どういう機能かというと、登録してある文字列を含むアドレスを一つのリンク元として扱うようなものです。例えばgoogle.co.jpと登録しておけば、グーグルからのアクセスを全部まとめて何件、と表示します。 というのも、検索エンジンからのアクセス自体は別項目で詳しく見れますし、「リンク元」項目では逆に検索エンジンからのアドレス文字列が大量に羅列しているため一般サイトなどからのアクセスが判別しにくいという現状がありまして要望させていただきました。

 これは、ごもっともな意見であるので、実装してみました。従来の「リンク元」の画面が、少し変わって、ドメインの部分がクリック出来るようになっています。クリックすると、ドメインをまとめたいか?と訊ねてくるので、「OK」ボタンを押すと、選んだドメインはまとめて集計するようになります。こうやって、いくらでもドメイン毎にまとめることが可能です。現状、登録のみで削除とかは、直接設定ファイル(stat/data/replace.ini.php)を弄るしかありませんが、まぁこれで良いかなと思います。

register1
まとめたいドメインをクリックすると、ダイアログが表示されます。左上のアイコンにも注目。

 これを使って、このサイトのリンク元の主要なドメインを纏(まと)めてみました。検索エンジンのドメインがひとくくりに集計されるので、それ以外のマイナーなサイトからのリンクが見つけやすくなりました。

register2
このようにすっきりした表示になった。良い感じ。

 これを適用するためのファイルを添付しておきます。なお、従来のアクセス解析画面では、ページの一番下に[AdminTop]とか[BlogTop]とか付いていて、正直、使い辛いなと思ったので(インターフェイスも洗練されていない)、アイコン化して、ページの左上に固定表示させました(IE6にも対応)。そのためのアイコンやらCSSファイルも同梱してます。アイコンは、stat/iconディレクトリに入れて下さい。view.php, stat.cssは既存のものを上書き(いずれもstatディレクトリの中です)して下さい。ppBlogのバージョンは、最新でなくても1.6系以上(1.5系も?)であれば大丈夫だと思います。念のため、元のview.phpは保持しておくのがベターですが。

 ご指摘があれば、どうぞ。「登録したら、もはやリンク表示にしなくていいんじゃない?」 とか。←2008-07-26 03:02:56 そうしました。

添付ファイル: new-stat.zipattachedIcon 

— posted by martin at 05:25 am   commentComment [4]  pingTrackBack [0]

記事編集時に表示しているページに簡単にアクセスしたい

category-icon

 こんばんは。この週末は時間が取れそうなので、マイナーアップデートを予定しています。さて、自分のブログを書いていて、不便に思ったところを改善してみたのでメモ。

 この旅日記Link のようにページ数が10ページとかなると、記事の編集時には、テキストエリアが縦にずらっと10個並ぶわけです。で、修正したいページのテキストエリアにたどり着くのに、ちょっと間を取られるので、(ログインモードで表示される)編集アイコンをクリックしたら、直接、表示しているページのテキストエリアにフォーカスが行き、かつ、その他のテキストエリアは、縮めた状態で表示させるようにしてみました。修正は、jsファイルのみで済みます。

 記事の各ページはAjaxを利用して、該当ページの部分のみ動的に読み込んでいるので、ログイン中に記事タイトルの右横に表示される編集アイコンEDITのリンクは、最初のページのままで変わりません。なので、記事ページを読み込んだタイミングで、この編集アイコンのリンクも書き換えるようにします。これはlib.jsのloadPage()をいじります。簡単でして、

if(o('a[href*=edit]', ownerDiv)){
 o('a[href*=edit]', ownerDiv).each(function(a){a.href = (a.href.replace(/&?page=¥d+$/, '') + "&page=" + page);});
}

というのを追加するだけです。やってることは、記事DIV要素の中で、リンク先にeditを含むA要素を探し出して(これは2つあります)、それぞれのリンクhrefに表示しているページを追加してあげる、という単純なものです。

 次に、editor.jsの方をいじります。この中のInitEditor()関数の最後の方に、以下のやつを追加。

var targetPage = /page=(¥d+)$/.exec(location.href);
if(targetPage){
 o('textarea[id^=Page]').each(function(page, index){
  if(index + 1 == targetPage[1]){
   resizeTextArea(page);
   ed = page; ed.focus(); o('#Page'+targetPage[1]+'Tab').view(1);
  } else o(page).css('height: 20px;');
 });
}

やってることは、記事編集画面でのリンク先がpage=3とかで終わっていたら、該当する3番目のテキストエリアのみを適切な縦幅で表示させて(フォーカスも合わせる)、他のテキストエリアは縦幅20ピクセルに縮めておく、ということです。

 尚、各テキストエリアの高さは、それぞれのリサイズバーをマウスでドラッグすることで自由に変えることが出来ますが、昔のマックのウィンドウシェード(MacOSXでも残っているのかな?)みたいに、ダブルクリックでトグルさせるようにするには、やはりInitEditor()関数の中に、次の記述を追加します。

o('.textareaHandler').on('dblclick', function(){
 var tar = oParts.target().sib(-1);  /* リサイズバーのひとつ前の要素、つまりテキストエリア要素を取得 */
 if(tar.css('height') == 20) resizeTextArea(tar.$); else tar.css('height: 20px');
});

 自分でいじりながら、JSファイルの修正だけで実現できたのは、ちょっと意外だったり;-) この修正を施したjsファイルを添付しておきます。特に問題がなければ、次回アップデートに反映されるでしょう。

添付ファイル: editor.jsattachedIcon  lib.jsattachedIcon 

 

— posted by martin at 10:42 am   commentComment [0]  pingTrackBack [0]

今日の差分

category-icon

 こんにちは。昨日1.7.4をリリースしましたが、新機能を取り入れた後なので、新たなバグが付きものですが、早速ご指摘がありました(--)従来のドラフト投稿と、記事の削除が出来なくなるというもので、これのチェック忘れてました。今日付のダウンロード版は、修正されています。

 後、アクセス解析のバージョンアップです。Firefox3.xでのアクセスに対応したのと、あとWindows 98仕様のエージェントが実際よりも多くカウントされるのを修正しています。

 以上、2点のファイルを添付しておきます。view.phpは、statディレクトリのやつを上書きして下さい。

[追記2008/07/08 21:38:57]

 添付した2点のファイルがダウンロード出来なかったようで。utils_admin.phpの入れ替え前後でこの記事を書いていたので、エラーが出たりしてたんですが、そのゴタゴタのせいでうまくIDが付加されなかったようです。後、画像をお洒落に見せるスクリプトがIE系でうまく機能しなくなってたので、そのjsファイルも添付しておきます。IE6に合わせようとして、余計に動かなくなるって、なんだか以前も経験したような。。

[追記2008/07/09 01:26:43]

 photoeffect.js最新版のタイムスタンプは$ 2008/07/09 01:14:17となってます。
添付ファイル: utilsadmin.phpattachedIcon  view.phpattachedIcon  photoeffect.jsattachedIcon 

— posted by martin at 09:28 pm   commentComment [15]  pingTrackBack [0]

 

1.7.4のリリースです。

category-icon

 こんばんは。貴種流離譚Gというモチーフはあまり好きでないmartinです。さて、バージョン1.7.3で暫く経過していましたが、細かい不具合とか、動作上、気になる点がいくつかあったので、それの修正がメインのアップデートです。あと、新たな機能として、目玉というほどでもないのですがオンタイム投稿を実装してみました。つまりは、未来の日時に設定しておくと一旦ドラフト投稿となって、その設定した時刻以降に自動的に公開されるというやつです。公開されるタイミングは、完全にアクセス依存(自分に限らない)なので、全くアクセスがないと投稿されませんが、まぁそういうことはないでしょう・・・。

 1.7.3からのアップデートですが、今回、キモの設定ファイルowner/ini.inc.phpに1カ所だけ修正が入ったので、上書きされる際は、まずこのownerディレクトリのini.inc.phpの修正からはじめて下さい。具体的には、次の一行を、71行目あたりのPPBLOG_VERSIONの上か下の行に追加します。

define('TIMEZONE','Asia/Tokyo');                      /* タイムゾーン。通常は変更不要。*/

 まぁタイムゾーンの設定なのですが、将来のことを考えると今の内に入れておいたが良いかなと。一応、参考として、差分添付ファイルにini.inc.phpも梱包してます。これは参考なので、間違えて上書きアップロードしないように注意して下さい。

 サーバー上のご自分のowner/ini.inc.phpをダウンロードして、上記修正後、無事に上書きアップロードしたら、次は、log.phpというPHPファイルがあるので、これはstatディレクトリの中のやつを上書きします。

 とりあえず、この2つの作業をこの順番でやるのが、今回のポイントです。後は、いつものように、残りのutils.phpやらutils_admin.phpやらindex.php、cache.phpはトップレベルのディレクトリのやつを上書きして、modulesフォルダの中のいくつかのPHPファイルは、サーバー上のmodulesディレクトリの中のやつを上書きすればOKです。

 index.phpに修正が入っていますが、これは画像認証のスクリプトhiratpchaの呼び出し先を変えたためです。この呼び出す部分の処理を削りました。

 あ、あと、jsファイルもいくつか修正が入ってます。これも上書きで。Firefox3になって、画像をお洒落に見せるスクリプトがエラーを吐くようになったり、IE6での挙動がやっぱり変だったりしたのを修正してます。これでも、完璧とは言えませんが、概ね動いてくれるかなと。

 後、js関連でいえば、ひとつのエントリーに複数のページを設定している際に、ページリンクをクリックすると、記事タイトルの部分にフォーカスが移るようにしてたつもりでしたが、そうなってなかったのを修正したりとかです。

 modules群の修正は、主にページ遷移に関する部分での修正です。記事が多くなってページ数が増えてきて、何だかページリンクの挙動がおかしいと気付きました。

 最後になりますが、自動インストール版は、今日の朝にダウンロード出来る状態にしておいたのですが、夕方になって、画像ギャラリー用のスクリプトmodules/gallery.inc.phpの手直しをしたので、これは日本時間で23時過ぎに入れ替えてます。なので、心当たりの方は適宜、最新版と入れ替えて下さい。添付しておきます。

 日本では七夕か。

添付ファイル: DIFF080707.zipattachedIcon  gallery.inc.phpattachedIcon 

— posted by martin at 04:14 am   commentComment [8]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0051 sec.
prev
2024.3
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31