ppBlog1.7.5に

category-icon

こんばんは、martinです。

いくつかの不具合やら、動作の改善を施して、バージョン1.7.5としてリリースしました。不具合は、オートセーブ機能やドラフト投稿周りです。あとは、細かいところの動作性の向上です。動作性操作性の向上に関しては、

  • エディタ画面で、テキストエリアが複数ある場合(=複数ページ)、一括して、テキストエリアをトグルする機能を付けた。
  • エディタ画面で、テキストエリア下端のリサイズバーのダブルクリックでサイズをトグル出来るように。
  • アクセス解析画面で、管理画面やブログトップページへのリンクアイコンを画面左上に固定した。IE6でも機能→このエントリーLink を活用。
  • アクセス解析画面で、「リンク元」ドメインを登録して、まとめて集計できるように。→マイナーなサイトからのリンクを見つけやすく。
  • 「エクスプローラー(ppExplorer)」のバージョンアップ。
  • エントリー(記事)が複数ページからなり、かつ1ページ目の文字数が720文字以上の場合は、記事の最初の方にも、ページナビが出るようにした。

って、とこです。いつものように、v1.7.4からの差分ファイルを添付しておきます。modules関係は2つ、既存のやつを上書きして下さい。jsファイルもjsディレクトリのものを上書き。stat類は、既存のやつを上書き、2つの画像(アイコン)はstat/iconディレクトリにアップして下さい。

 お試しサイトLink も、v1.7.5にしました。

[追 記 2008/07/28 09:04:59]

 書き忘れていましたが、stat/log.phpの36行目に
$displen = 5; // トータル数の桁数を設定 

というのがあります。これは、サイトで表示されるアクセス総数の桁数を指定するところです。いつのまにか、7桁必要な数になっていたので、このタイミングで、任意に桁数を指定出来るようにしました。初期設定は、5桁です。

添付ファイル: DIFF080727.zipattachedIcon 

— posted by martin at 06:17 am   commentComment [7]  pingTrackBack [1]

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]

T: Y: ALL: Online:
Created in 0.0189 sec.
prev
2008.7
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