2011年3月24日 (木)

ココログ記事下にFacebookの「いいね！」ボタンとTwitterの「ツイートする」ボタンを設置する

Facebook Twitter ロゴ

このブログの記事下にも「いいね！」ボタンと「ツイートする」ボタンを設置してみました。まだ少しおさまりが悪いとか、一部ブラウザで表示が崩れるとかの不具合は残っていますが、一応無事に動いているようです。
不出来ではありますが、まずはできたところまででご紹介します。


基本方針
設置に向けた考え方は下記のとおりです。

(1)facebook、Twitterそれぞれからボタン生成用スクリプトを取得
(2)facebookボタンはスクリプト内にURLを埋め込む必要があるので、「今見ているページ」のURLを埋め込めるようにスクリプトを修正
(3)それぞれのスクリプトをdivでくくって記事下に配置(外部JavaScriptで)
(4)記事が複数表示されるページ(インデクスページやカテゴリーページなど)にはボタンが表示されないように細工

以下、それぞれのポイントをざっくりご紹介します。


1.スクリプトの取得
スクリプトの取得は簡単です。
それぞれ下記から取得しました。

＞Like Button - Facebook開発者
＞Twitter / ツイートボタン


2.facebook用スクリプトの改造
facebookの「いいね！」ボタンのスクリプトには、取得時に設定したURLが埋め込まれています。しかし、URLにブログのトップページなどを指定したままだと、どの記事で「いいね！」を押してもトップページ用のカウントになってしまうので、記事のURLに変更しないといけません。

これは下記のようにすると変更できます。
今見ているURLをエスケープして、URL部分に埋め込んでいます。

<iframe src="http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(document.URL) + '&amp;layout=button_count&amp;show_faces=true&amp;width=450&action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>


3.記事下に配置
それぞれのスクリプトをdivでくくって、マージンやら配置やらを調整しながら記事下に設置します。ただ、すべての記事を書くときにいちいちすべてを記載するのは面倒なので、この部分は外部JavaScript化してしまいました。
これまでもAdsense等の表示は外部スクリプトにしていたので、そのスクリプトに各ボタンの出力部分を追記した感じになります。

スクリプトはむちゃくちゃ汚いのであまり公開したくないのですが、各ボタンの表示部分だけ抜き出すと下記のような感じになっています。
なお僕の使っているテンプレートは外部CSSが編集できないため、しかたなくスタイルはすべてインラインで記述してしまっています。

document.write('<div style="display:table-cell; float:right; vertical-align:bottom; margin:0 0 1px 0;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="gadget_watch" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div style="display:table-cell; float:right; vertical-align:bottom; margin:1px 0 0 0;"><iframe src="http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(document.URL) + '&amp;layout=box_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:65px;" allowTransparency="true"></iframe></div><div style="clear:all;"></div>');


4.トップページなどでの表示の防止
2.でも書いているとおり、「いいね！」ボタンについては今見ているURLに対してカウントする形になっています。そのため、トップページやカテゴリーページなど、記事が複数並ぶページにはボタンを表示したくありません。
ココログの場合、トップページやカテゴリーページなどは「URLが/(スラッシュ)で終わる」もしくは「/index.htmlになっている」のどちらかのようなので、現在のURLがどちらかに該当する場合は3.の部分を出力しないようにしました。

if( !( document.URL.match(/\/$/) || document.URL.match(/index.html$/) ) ) { (ここに上記のコード) }

これで、記事単体が表示されたときのみ上記ボタンが表示されるようになりました。
このブログは検索などから各記事に直接来訪されることが多いので、この程度の対応でも問題なしですね。


現状の課題と今後
実はIE6/IE7では表示が崩れると思います。これはdivを並べるときに、これらのブラウザで対応していないプロパティを使っているためです。ここについては早々に直したいですね…。それにまだまだスクリプトが汚いですし、位置もしっくりきてないので、しばらくはTry&Errorで格闘してみるつもりです。
まずは、こんな感じで設置ができますよ、というサンプルとしてお使いいただければと思います。


関連サイト
Like Button - Facebook開発者
Facebookオフィシャルの「いいね！」ボタン生成ツールです。

Twitter / ツイートボタン
Twitterオフィシャルの「ツイートする」ボタン生成ツールです。

2011年3月24日 (木) プログラム(Perl・HTML・JavaScript) | | コメント (0) | トラックバック (0)

2010年12月28日 (火)

ココログの記事下にGoogle Adsenseを設置する(「ユニット3回まで」に対応)

Advertisement 広告

普段からご覧頂いている方はお分かりと思いますが、本ブログでは各記事の下にGoogle Adsenseの広告枠を設置しています。
まぁ収益を目的にブログを書いているわけではありませんが、それでもたまにクリックがあると嬉しかったり(^-^;)。

さてそのAdsenseですが、1ページ内に設置できるユニット(広告枠)の数には上限があります。節操無く広告だらけのページはお客様も見たくないでしょうし、そんなページには出稿側としても広告なんて出したくないですもんね。

そんなわけで今回は、回数制限の上限を超えずに枠を設置する方法をご紹介します。
おそらくもっとエレガントなやり方はあると思いますので、まずはご参考程度に。


目的・背景
■目的
Google Adsenseの広告枠について、上限数以上は表示しないようにしたい。

■背景・解説
このブログの記事下にある「レクタングル」というユニットは「1ページ3つまで」という規定があります。

記事下に広告枠を設置する場合、1記事のみが表示されているページであれば当然広告枠も1つのみ表示されるので問題になりません。
しかしブログの場合はバックナンバーやカテゴリーページなどの「1ページ中に記事が多数表示されるページ」が生成されるため、単純に記事下に枠を設置しただけでは規定回数以上表示されるページが出てきてしまいます。

そのため、広告表示を何らか動的に制御することを考えました。


解決案
JavaScriptで広告枠の表示回数を把握し、それ以上は表示しないようにします。
具体的には、広告枠だけを記載したHTMLファイルを作り、そのHTMLをJavaScriptで生成した iframe 内に表示するようにしました。
直接JavaScriptからAdsenseのタグを吐き出しても良いのですが、iframeのほうがデザイン的に崩れなかったので。

具体的な手順は下記のような感じになります。


■Google Adsenseのみを記載したHTMLファイルを作成する
<body> ～ </body>の間に Adsense のタグのみを書いた、シンプルなHTMLファイルを用意します。(iframeの「具」となるファイルです)

ファイルができたらココログのファイルマネージャで転送し、表示確認をしておきます。
例として、ファイル名は「gw_adsense.html」としておきましょう。


■JavaScriptファイルを作成する
上記で作成した HTML を iframe 内に表示するJavaScriptを作成します。
内容としてはこんな感じですね。
面倒なので、グローバル変数として「googlecounter」なる変数を使っています。

(JavaScriptの内容)

if( typeof(googlecounter) == "undefined")
{
var googlecounter = 0;
gw_ads_msg = '<iframe style="border:none;" src="http://xxxxxxxx/gw_adsense.html" width="336" scrolling="no" height="280" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
}
else
{
googlecounter++;
}
if(googlecounter < 3) { document.write(gw_ads_msg); }

内容はソースを見ればお分かりですよね。
単純にカウンターの変数が定義されていなければカウンター定義と表示内容(タグ)の定義を行い、カウンターが定義されていればインクリメントしたうえで3回までタグを表示する、という作りになっています。

出来上がったJavaScriptもファイルマネージャで適当なフォルダに転送しておきます。
例として、ファイル名は「footer.js」ということにしましょう。


■記事を書く
実際の記事への設置は記事下の広告を入れたい場所で上記の外部スクリプトを呼ぶだけです。

<script type="text/javascript" src="http://xxxxx/footer.js">

ほら、簡単ですね。


他の利点も多いです
このやり方だと広告ユニットの上限設定のほか、デザインを変えたりするときにも非常に簡単です。HTMLファイルの中身を変更すれば全ページにデザインが反映されますし、広告ユニットの上限が増えた際にはJavaScriptを直してやれば済みます。

見る人が見ればエレガントじゃないことをやってるのだとは思いますが、まずはこれで実現できているのでよしとしたいと思います。
ご参考になれば幸いです。


2010年12月28日 (火) プログラム(Perl・HTML・JavaScript) | | コメント (4) | トラックバック (0)

2007年10月20日 (土)

PerlのNKFモジュール(NKF.pm)のつたない解説

初めてのPerl
初めてのPerl
posted with amazlet at 08.10.11
ランダル・L. シュワルツ トム フェニックス
オライリージャパン
売り上げランキング: 2957
おすすめ度の平均: 4.5
5 素晴らしきPerlの世界への案内
5 読み物としても十分面白い
5 定番書
5 初心者も持っておきたい一冊
5 CGI言語としてのPerl
Amazon.co.jp で詳細を見る


今日は珍しくお仕事系の話。
先日メール関連処理のために使ったPerlのNKFモジュールが非常に使い勝手が良かったので、ご紹介です。
僕と同様、Perl付属のEncodeライブラリに四苦八苦している方は参考になると思いますよ。


NKF.pmについて
NKF.pmは文字コード変換プログラム nkf のPerlモジュール版です。
往年のPCユーザは「nkf」と聞くと懐かしく感じるのでは。
unix系マシンとWindowsマシンでテキストファイルをやり取りしたりする上では必須のアプリでしたよね。

このnkf、地道にバージョンアップを続けていて、この記事を書いている時点での最新版は「Ver2.0.8b」です(安定板は2.0.7)。nkfは知らないうちに非常に便利なオプションが追加されていて、これ1つでメール周りの処理を簡単に行うことができるようになっています。
また、同時にPerlモジュール版もバージョンアップを続けていて、nkfの便利な機能をPerlのプログラム内で簡単に利用できるようになっています。


なぜNKF.pmか？
Perlの文字コード変換関連には様々なモジュールがあります。
Perl標準のEncodeライブラリのほか、Jcode や jcode.pl(最近は使わないかな)などなど。
ですが、その中でNKFを選んだ理由は下記です。

・必要な十分な機能
文字コード変換(utf8、半角カナ変換対応)、MIMEエンコード/デコード、マッピング不可文字の変換(「〓」で表現)など、Perlで日本語を扱うときに必要そうな機能はたいてい入ってます。
これらがモジュール1つで賄えるところが便利。

・バイナリ版nkfとの親和性
基本的な使い方は $result = nkf("オプション",$source) という感じ。で、オプションの指定のしかたはバイナリ版のnkfと共通です。
なので、昔からnkfを使っている人にとってはわかりやすいです。

・見通しがいい
Perl標準のEncodeライブラリは非常に強力なのですが、「utf8フラグ」などの概念を理解しないと難しいです。僕もひととおりは勉強したつもり…なのですが、いまだにencodeを2回呼んでしまっておかしくなったりというミスが多いです。
# もちろん僕の技術力によるところが大きいんですけどね。
NKFモジュールはutf8フラグなどを気にしなくていいので、ミスしにくいというところがいいと思います。


利用前の準備(宣言)
まずは準備です。
Perlプログラム内で利用するため、useで宣言しましょう。

use NKF;

はい準備完了。簡単ですね。
おっと、インストールはこれ以前に済ませて置いてくださいね。
マニュアルどおりやれば問題ないはずです。


主な使い方
主な使い方は下記のような感じ。
サンプルを見たほうが早いですよね。

■$input の文字列をShift-jisに変換
基本的に入力文字列の文字コードは自動判別するので、変換したい先の文字コードのみをオプションで指定します。

$output = nkf("-s",$input);

これで $output に $input をShift-jisに変換した文字列が入ります。

■ヘッダのMIMEエンコード、デコード
メール内の日本語のヘッダ(FromやSubjectなど)はMIMEでエンコードする必要がありますが、NKFモジュールを使うとエンコード後文字列の行分割までひっくるめてちゃんと処理してくれます。

(1)エンコード

$subject = nkf("-M","【転送】ガジェットWatchでこんな記事見つけました");

これで$subjectにMIMEエンコードされた文字列が入ります。

(2)デコード

$subject_decoded = nkf("-m",$subject);

MIMEエンコードされた $subject をデコードし、普通の日本語として $subject_decoded に格納します。同時に出力文字コードの指定も可能なので、いきなりEUCにすることもできます。
(単純にデコードしただけだとJISになりますよね。)

■$input の文字コードの推定
文字コードの推定をする場合はバイナリ版nkfとちょっとやり方が違います。
一旦nkfモジュールをその文字に対して適用したあとで、「inputcode()」関数を使います。

nkf("",$input);
print inputcode(); # 「EUC-JP」「ASCII」などの文字列を表示

inputcode()関数で、最後に評価した文字列の推定文字コードを取得できます。

■$input に含まれる「まずそうな文字」をつぶした上でEUC変換
ケータイの絵文字など、JISで表現できない文字を「〓」に変換します。
当然その部分は読めなくなりますが、変なコードと認識して誤動作しちゃう～という最悪の状態は避けられます。

$output = nkf("-Ie",$input);

「〓」に変換するのが「-I」、EUCで出力するのが「-e」オプションです。
オプションは上記のように重ねて「-Ie」などと書くことができます。


まとめ
このほかにもNKF2.0.7ではバイナリデータもMIMEストリームに変換できる( = 添付ファイルが簡単に作れる)など、便利な機能が増えています。
本当にちゃんとしたメール処理を行うならMIME::Entityなどを利用することになると思いますが、そこまでの機能が不要で簡単に書くならNKF.pmモジュールは非常に見通しがいいと思います。

Perl5.6以降の日本語関連で困っている方がいればぜひご参考に。
あ、一応正しいつもりで書いていますが、上記コードが間違っていたらぜひともご指摘ください。


関連サイト
Project Info - nkf Network Kanji Filter (SourceForge)
現在のnkfプロジェクトです。
ソースのダウンロードやマニュアルの取得はここから。

2007年10月20日 (土) プログラム(Perl・HTML・JavaScript) | | コメント (1) | トラックバック (0)

2007年5月18日 (金)

JavaScriptでHTMLを出力するときの小技(ヘッダメニューの続き)

HTML Source image

以前の記事で、ココログのヘッダ部分にメニューを設置した話を書きました。メニュー作成のHTMLを全部JavaScriptで記述し、外部ファイルに追い出してしまうことで、内容が変わっても「ブログへの反映」が必要なくなるというアイディアです。
ただ、このやりかただとJavaScriptが「document.write()」の嵐になってしまいますので、多少エレガントな方法を考えてみました。
# タイトル画像は特に記事に関係あるわけじゃないです(^-^;)。

基礎知識
JavaScriptファイルの中で行末に「\」を書くと、そのあとの改行が抑制され、「次の行もつながってるんだよ」という意味になります。
前回の例ではHTMLを1行書くたびに「document.write()」を使ってましたが、「\」を使うともう少し簡単に書けるみたいです。

具体例
今までの例と改善後の例を見てみます。

(1)今までの例

document.write('<hr>');
document.write('<a href="xxxx.html"><br>');
document.write('<img alt="test" src="xxxx.jpg">');
document.write('<hr>');

(2)改善例

document.write(' \
<hr> \
<a href="xxxx.html"><br> \
<img alt="test" src="xxxx.jpg"> \
<hr> \
');

必ず行末に「\」をつけなきゃならないですが、それでもこっちのほうが幾分スマートですよね。
ご参考になれば。

まとめ
本当はJavaScriptにもPerlなどのような「ヒアドキュメント」があればよいのですが、現状は実装されていませんので、上記のようなやりかたになるのかな～という感じ。
中にはJavaScriptの関数で擬似的にヒアドキュメントを実装しちゃったような方もいますが、今回の話はそこまでやるほどのことじゃないですしね。
もっと大量のHTMLをJavaScript上から吐き出す必要がでてきたら、擬似ヒアドキュメントライブラリも使ってみたいと思います。

関連サイト
JavaScript用ヒアドキュメントライブラリを試作 (風柳亭 - 別館：書庫のある庵様)
出力するHTMLが増えたらこれですね。
ブログパーツなど、結構な量のHTMLを吐き出す必要があるときに使えそう。

2007夏モデルＦＭＶ新登場

2007年5月18日 (金) プログラム(Perl・HTML・JavaScript) | | コメント (0) | トラックバック (4)

2007年4月24日 (火)

ココログにヘッダメニューを設置する方法

Blogのタイトルと説明が出ている部分にヘッダメニューを設置してみました。
ちょっと無理やりな方法なのですが、ヘッダメニュー以外にもいろいろ応用が利くやりかたです。
ご存知の方も多いと思いますが、ご参考になれば。

前提知識
具体的なやりかたの前にちょっと前提知識を。

ココログではHTMLタグをヘッダやサイドメニューに入れることができます。
ヘッダの場合、入れる場所は「ブログのサブタイトル(キャッチフレーズ)」の部分。
管理画面の「ブログ」→「設定」→「基本設定」のところにあります。

ココログサブタイトル

ここ、普通はテキストのみを書いていると思いますが、HTMLタグをそのまま書くことが可能です。
ここをうまく利用すると、今回のようなメニューを作成したり、標準のスタイルシートを書き換えたり、アクセス解析用のタグを埋め込んだりできるわけです。

ちなみにサイドメニューに入れる場合は「マイリスト」の「リンク」を使い、コメント欄にタグを入れます。
これについてはいろいろなページで解説されているので、探してみてください。

基本設計
さて、サブタイトル欄に直接タグを書いてもいいのですが、そうするとちょっとした変更のたびに「ブログへの反映」が必要になります。
時間もかかる作業ですし、トラブルの可能性もゼロではないので、できればそんな作業は避けたい。

というわけで、今回はサブタイトル欄から一旦外部JavaScriptを呼び出し、そのScript内でHTMLを生成することにしました。(このあたりが「ちょっと無理やり」なところ)。
Scriptは「document.write()」の嵐になってしまうのですが、こうしておけば「コントロールパネル」→「ファイル」でJavaScriptを上書きするだけで、サイト全体へ設定を反映させることが可能です。ここが今回のキモですね。

具体的な設定
(1)JavaScriptを書いてアップロードし、(2)ヘッダから呼び出すという2段階で進めます。

(1)JavaScript
下記のようなファイルをメモ帳などでローカル(あなたのPC)の中に作ります。
ファイル名は何でもいいですが、慣例的に ○○.js とするのが普通です。
ただ、保存するときの文字コードはUTF-8にしてください。
ココログのデフォルト文字コードはUTF-8なので、それ以外の文字コードでスクリプトを記述してしまうと、呼び出されたときに日本語が化けてしまいます。

// ヘッダメニュー
document.write('<div style="margin:15px 0px 0px 0px; width:665px; padding:5px; background:#abb3cd; color:#ffffff; float:left">'); //←色は適当に。
document.write('<a style="color:#ffffff" href="http://gadgetwatch.cocolog-nifty.com/">トップページ</a> | ');
document.write('<a style="color:#ffffff" href="http://gadgetwatch.cocolog-nifty.com/gadgetwatch/archives.html">バックナンバー</a> | ');
// ↑こんな感じでHTMLを出力し、リンクを追加します。
document.write('</div>');
document.write('<div style="clear:both"></div>');

1行目のスタイルで指定している「float:left」と最後のの「clear:both」がポイント。
これがないとFirefox系で表示が崩れます。

保存したら、ファイルをココログへアップロードします。
場所はどこでもいいですが、「common」などのフォルダを作っておくと修正がやりやすいかも。
アップロードしたら一旦ファイルをクリックして、URLを取得しておきましょう。

(2)サブタイトル
サブタイトルの設定はこのスクリプトを呼び出す記述だけです。
設定が終わったら、「ブログへの反映」が1回必要です。

(あなたのココログのサブタイトル)
<script src="ここにJavaScriptファイルのURLを記述" type="text/javascript"></script>

あとは見栄えなどを調整しながら、(1)のファイル修正～アップロードを繰り返せばOK。
多少手間はかかりますが、それでも毎回反映がいらないぶんこちらのほうが楽だと思いますよ。
工夫次第では何でもできるので、お試しください。

関連サイト
メニューをつけてみました (KOROPPYの本棚 様)
まさにココログを「使い倒している(^-^;)」感じです。
メニューもきれいにまとまっていていい感じですよね。

第35回：サブタイトル部分に簡易メニューを付けてみよう (初めてのココログ・カスタマイズ 様)
これがココログでできるんだ～という発見がいっぱいです。

2007年4月24日 (火) プログラム(Perl・HTML・JavaScript) | | コメント (4) | トラックバック (1)

その他のカテゴリー

もの＞おもちゃ・ゲーム もの＞たべもの・のみもの もの＞ちょっとしたもの もの＞クルマ もの＞デジタルガジェット もの＞住まい・インテリア もの＞携帯・スマートフォン もの＞観葉植物 パソコン・インターネット プログラム(Perl・HTML・JavaScript) 日記・コラム・つぶやき