作る人 （つくるんちゅ）日記

こちらの画像が、携帯からも見ることができるキリ番カウンターです。



僕が書いている「てぃーだブログ」には、携帯版もあります。
（ブログと同じURLに、携帯からアクセスすると、携帯用に変換されたサイトを見る事ができます。）

僕はPC派ですが、ほとんどの記事を携帯から投稿している人も多いようです。


さて、「てぃーだブログ携帯版」には、アクセスカウンターの表示がありません。
（無料で、これだけの機能を使えるので、十分ではありますが…）

昨日、20万アクセスの「キリ番プレゼント」企画をやっていて、そのことに気が付きました。
「携帯からは、見えないっす！」

そこで、携帯からも使える「キリ番カウンターCGI」を作ってみました。


導入は、以下の欄でタグを発行し、ブログ記事内に貼り付けるだけです。　　※05/28追記
（デフォルトでは、キリ番は1万となっています。7777等、設定可能。）携帯用

※キリ番イベントが終わったら、（なるべく）タグを外して下さいね。
※ＴＩ－ＤＡブログ専用
※サイドバーに組み込む際は（携帯からは見えません）幅を指定。<img src="http://tdsk.net/ti-da/just_m.cgi?counterid=○○○○&kiri=◇◇◇◇" width="170">

もし、上記でタグが発行出来ない場合用に、この記事の一番下に、手動での導入方法を書いておきます。


これで、携帯でも見れる「キリ番カウンター」を簡単に設置する事ができます。
（他の地域ブログの方は、ＣＧＩ本体の改造が必要です。ページ下部からダウンロードして内容を修正し、サーバーにアップして下さい）

◆2013.02.04追記
てぃーだブログのアップデートにより、本スクリプトの内容を見直しました。
諸事情を考慮し、下記スクリプトの修正方法は伏せておきます。　一般論としてお楽しみ下さい。
なお、アクセスカウンターを「表示しない」設定のブログからは、アクセス数は読み取れません。

---

さて、今回のCGIは、ごく簡単な作りですが、いろいろ応用が効くのでポイントだけ解説しておきます。
言語はPerlです。

昔は、簡単なCGIを公開・解説しているサイトはたくさんあったのですが、最近は見なくなりました。

AJAXとか、iPhoneアプリとか、他に面白いのがたくさんありますし…。
時代なんですかねー。

こうやって、ブログに書いていると、何だか懐かしくなったりします。

他のサイトから、データをGet！

別の場所にあるサーバーから、ファイルを取得するのは「LWP::Simple」を使います。

use LWP::Simple;
my $dat = get('取得したいサイトのURL');
これだけで、$datの中に、指定したサイトのHTMLが入ります。


Perlは正規表現と言って、文字列を扱うのが得意なので、取得したHTMLから必要な部分を抜き出します。
今回は、こんな書式を使っています。
$counter =~ s/doc.*?Total: (.*?)<.*?Today: (.*?)<.*?Yesterday: (.*?)<.*/$1,$2,$3,/g;
my($c_total,$c_today,$c_yesterday,) = split(/,/, $counter);
http://admin.ti-da.net/counter.php?counterid=2_making
これで、↑ の文字列から「Total／Today／Yesterday」の数値を取り出すことができます

文字の比較

if($c_total eq $kiri){
　　　　$mas = "あなたが $goal アクセスのキリ番です。"
}elsif($c_total < $kiri){
　　　　$mas = "$goalアクセスまで あと $c_last 。";
}else{
　　　　$mas = "$goalアクセスを達成しました。";
}
カウンターの数字が、設定と同じなら「キリ番」。
数字が小さければ、差を表示。
越えていれば「達成！」と、表示しています。

if（もし）、○○ ＞ △△（比較してみて）、$mas = "××"（結果によって、別々に書き込み）
という、分かりやすい指定です。

画像を作製

Perlで画像を作り出すには、Image::MagickかGDを使います。（今回はImage::Magick）

Image::Magickで新規の画像を作るのは、こんな書式。

use Image::Magick;
my $image = Image::Magick->new(size=>'200x50');
ここでは、200px×50px（単位はピクセル）と指定。

作った画像の中に、文字を書き込みます。
$image->Annotate( 　　　　　　　　#文字書き込み
　　　　font=>'ume-tgc4.ttf', 　　　#日本語フォント指定
　　　　text=>'書き込みたい文字'　　#文字を指定,
　　　　x=>'5', 　　　　　　　　　　　　　#左から
　　　　y=>'20', 　　　　　　　　　　　　#上から
　　　　pointsize=>'15', 　　　　　　#文字サイズ
);
ここでのポイントは、日本語フォントの指定。
TTFタイプのフォントを用意します。

今回は「梅フォント」を利用させて頂きました。

ライセンスの条項は、次の通りです。

　Licence
　これらのフォントはフリー（自由な）ソフトウエアです。あらゆる改変の有無に関わらず、また商業的な利
　用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

日本語フォントの製作は非常に手間がかかるのに、無償公開とは…。　感謝！
その他の便利なフリーフォントについても、近々レポートの予定です。

画像出力

最後に、画像として出力。
print "Content-type: image/gif￥n￥n";
$image->Write('gif:-');

写真等、JPGで出力したい場合は、上記の「gif」の部分を「jpeg」にします。

---

こうやって解説があると、自分でも作れそうでしょう？。

ちなみに、以前公開した「コメ★プロ」も、同じような仕組みで動いています。
あと、ブログランキングサイトのプログラムも、上記の「他のサイトから、データをGet！」の応用版です。


と、言うわけで、アイデアさえあれば、いろいろなプログラムを自分で作っちゃう事が出来るんです。
少しでも、興味を持って頂ければ、幸いです。


最後に、「キリ番カウンターCGI」のソースを置いときます
→ ダウンロード

■手動での、タグの取得方法
まず、パソコンで自分のブログを開きます。
（事前に、PC版の管理画面から、アクセスカウンターを表示する設定にしておきます）

１，右クリックで「ソースの表示」。

２，文字列から「アクセスカウンタ」を検索。
　<div class="counter"><div class="sidetitle">アクセスカウンタ</div>
　<script type="text/javascript" src="http://admin.ti-da.net/counter.php?
　counterid=2_making"></script>

　△このような文字列が見つかったら「counterid=○○○○」という部分に注目。
　※counteridとは、アクセスカウンターのID（ブログ別の記号）。

３，僕の作ったCGIで、画像を表示できるか、実験。
　http://tdsk.net/ti-da/just_m.cgi?counterid=○○○○&kiri=◇◇◇◇
　△上記の○○○○に、counteridを記入、◇◇◇◇には、5000等、キリ番の数字を入れます。
　ＩＥなどのブラウザーのＵＲＬ欄に、上記で作ったＵＲＬを入力して「enter」!

４，無事に表示できたら、ブログに記入します。
　・画像として表示する場合（携帯からは表示できません）
　<img src="http://tdsk.net/ti-da/just_m.cgi?counterid=○○○○&kiri=◇◇◇◇">

　・携帯用の指定
　<a href="http://tdsk.net/ti-da/just_m.cgi?counterid=○○○○
　&kiri=◇◇◇◇" target="_blank">キリ番カウンター</a>