鰯のテクニカルノート

2007年4月12日

「はてブの被ブックマーク数を表示する」をBloggerでやってみる

はてなに記載されている、「自分のブログに被ブックマーク数を表示する - Blogger」は、たぶん、Beta 版の時の方法ではないかと思う、、
(少なくとも自分のBloggerではテンプレートの変更方法が違う、、)
なので、新バージョンとなった、Blogger にて被ブックマーク数を表示する方法を解説しようと思ふ。。。
方法は２つあって、1つ目の方法は、簡単だけど表示位置が微妙。。２つ目の方法は、表示を位置を合わせるために、ちょっと難しくなってしまった方法。。

【方法１】※自己責任において編集を行ってください。。
１．「管理画面(マイレポートorダッシュボード) > テンプレート > HTML の編集 > テンプレートを編集」を表示して、右上にある、「ウィジットのテンプレートを展開」のチェックボックスを ON にする。

２．下記のように記載されている場所を探して、その下にはてブ表示ようのコードを貼り付け。※今回は、バックリンクの横あたりに配置してみる。

       <!-- backlinks -->
       <span class='post-backlinks post-comment-link'>
         #... いろいろ ...
       </span>
       # ---- ↓ココに貼り付け ----- #
       <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target="_blank">
       <img expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' alt="このエントリーを含むはてなブックマークを表示" title="このエントリーを含むはてなブックマークを表示" style="border:0;" />
       </a>
       # ---- ↑ココに貼り付け ----- #

っと、これが簡単な方法ですが、表示をしてみると、画像の位置が微妙にずれている、、、。
※HTMLタグのコピーは、マウスで範囲選択でやって下さい。。表示しきれてない文字があるので、、。

【方法２】
１．方法１－１と同様。
２．方法１と同様にコードを貼り付けるのですが、少しコードを変更してあります。

       <!-- backlinks -->
       <span class='post-backlinks post-comment-link'>
         #... いろいろ ...
       </span>
       # ---- ↓ココに貼り付け ----- #
        <a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target="_blank" title="このエントリーを含むはてなブックマークを表示">
          <span class='hatena-counter' expr:style='"background-image: url(http://b.hatena.ne.jp/entry/image/" + data:post.url + ")"'> </span>
        </a>
       # ---- ↑ココに貼り付け ----- #

※HTMLタグのコピーは、マウスで範囲選択でやって下さい。。表示しきれてない文字があるので、、。

３．スタイルシートの追加をする。テンプレートの上部に、<b:skin> .. </b:skin> で、囲まれた部分があるので、その中へ下記のスタイル定義を追加する。

.hatena-counter {
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: left center;
  margin:0pt 0pt 0pt 0pt;
  padding: 15px;
}

簡単に解説すると「方法１」は、img タグでそのまま表示しているが、「方法２」は、span タグの background として、center 表示をしています。他の画像を見てみたら、そうやって定義されてたから真似してみただけ、、。

っと、以上ですが、もっと簡単な方法とかあったら教えてください( >< )

2007年4月6日

Text::CSV は日本語入ってるとダメなんだ、、、orz

Text::CSV で parse したらエラー出まくりだったので、エラーになってる CSVのファイルをのぞくと日本語の行がエラーになっていた、、、orz どうやら、日本語入っているとダメみたい、、っで、検索してみたら「勝手に添削 - PerlによるCSVファイルの高速集計 2 - 404 Blog Not Found」で、Text::CSV_XS で、{binary=>1} のオプションを付けると、どうやら日本語混じりでも OK らしいので、さっそくインストールしてコードを修正。モジュール名の変更だけで済んだ。

use strict;
use warnings;
use Text::CSV_XS;

$| = 1;

my $file = './hoge.csv';

my $csv = Text::CSV_XS->new({binary=>1});

open my $fh, '<', $file or die $!;
while (<$fh>) {
    chomp;
    $csv->parse($_) or next;

    my @fields = $csv->fields;

    # ... your code here ...
}
close $fh;

ちなみに環境

C:\>perl -v

This is perl, v5.8.8 built for MSWin32-x86-multi-thread
(with 50 registered patches, see perl -V for more detail)

Copyright 1987-2006, Larry Wall

Binary build 820 [274739] provided by ActiveState http://www.ActiveState.com
Built Jan 23 2007 15:57:46

Perl may be copied only under the terms of either the Artistic License or the
GNU General Public License, which may be found in the Perl 5 source kit.

Complete documentation for Perl, including FAQ lists, should be found on
this system using "man perl" or "perldoc perl".  If you have access to the
Internet, point your browser at http://www.perl.org/, the Perl Home Page.

2007年4月3日

Blogger でも、コードハイライトしてみる。by google-code-prettify

もともと、はてなダイアリーを使っていたのだが、見た目の良さや使い勝手から、Blogger に乗り換えた。ただ、はてなダイアリーだとプログラムを載せるときに、しっかりハイライトしてくれるところが、すごく良いんだけど、残念なことに Blogger にそのような機能は無い、、、orz
っで、自分で作ろうかなぁとか思ってたら、すでに Google が、ライブラリ作ってたよ、、、。って事で、この Blogger で使えるか試してみたら使えたので、その手順を公開。

１．google-code-prettify - syntax highlighting of code snippets in a web page から、ソースをダウンロード。
２．Blogger の「ダッシュボード」から、該当ブログの「レイアウト」を選択
３．「ページ要素を追加」で、「HTML/JavaScript」を選択
４．「コンテンツ」にソースをベタ貼り（これでプログラムソースを読み込ませる）
↓↓↓こんな感じ

<script type="text/javascript"><!--

// prettify.js code here!!

// --></script>
<style type="text/css">

/* prettify.css code here!!

</style>

５．次に、「HTML の編集」で、body の onload で、スクリプトを実行させる。

  <body>
  <!-- ↓↓↓ onload で prettyPrint() を実行 -->
  <body onload='prettyPrint()'>

６．ここまでが、準備で実際に利用する時は、

<pre class="prettyprint">
  <!-- ココに自分のプログラムソースを書いて投稿する -->
</pre>

以上。
っで、鰯のブログは、背景が黒なので、黒に合うように、css を編集しました。以下参考までに。あと、css 編集してて知ったのだが、"#080" は、"#008800" って感じに展開されるようになっているらしい。

<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #09F; }
.com { color: #800; }
.typ { color: #96F; }
.lit { color: #399; }
.pun { color: #996; }
.pln { color: #CCC; }
.tag { color: #09F; }
.atn { color: #96F; }
.atv { color: #080; }
.dec { color: #96F; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>

【追記】
何故か、、HTML のソースで適用すると、改行が削除されてしまいます、、、orz 原因調査中。。。
【原因 2007/04/03 20:00】
Blogger で投稿する際、改行が br タグに変換されて、pre 内で、HTML をハイライトさせようとした時に、br が google-code-prettify でパース中に削除されてしまっていた。。具体的に削除されている場所までは、わからなかったけど、とりあえず、以下のような感じで対応させてみた。

// fetch the content as a snippet of properly escaped HTML.
// Firefox adds newlines at the end.
var content = PR_getInnerHtml(cs);
content = content.replace(/(?:\r\n?|\n)$/, '');

// do the pretty printing
var newContent = prettyPrintOne(content);

↓↓↓こんな感じに変えてみた、、、

// fetch the content as a snippet of properly escaped HTML.
// Firefox adds newlines at the end.
var content = PR_getInnerHtml(cs);
content = content.replace(/(?:\r\n?|\n)$/, '');
content = content.replace(/<br>/g, "\n");

// do the pretty printing
var newContent = prettyPrintOne(content);

prettify.js line:1442 にあたりに追加した。パースさせる前に、br を改行に変換、、、orz すんません。。。

参考
【ハウツー】
ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを

google-code-prettifyが対応しているソースコードはC、C++、Java、Javascript、Python、Ruby、PHP、 Perl、Bash、Awk、Makefiles、HTML、XML、CSSなど。一方、コメントの慣例のためにSmalltalk、LispやCAML ライクなプログラミング言語のソースコードでは正しく動作しない。厳密にその言語でなくとも、対応しているプログラミング言語と記述方法が似ていれば動作する。

2007年4月2日

メッセージボックスをコピー。

メッセージボックスのテキストはクリップボードにコピーできる。で紹介されている方法、たぶん、これ以外と知られていないと思う。。初めて知った。っで、試してみた。

---------------------------
秀丸エディタ
---------------------------
(無題) は更新されています。保存しますか？
---------------------------
はい(Y)   いいえ(N)   キャンセル   
---------------------------

おぉぉ!
これって、Mac もできるのかなぁ？？帰ったら試してみよう。

2007年3月25日

Firefox が、ひどいメモリ食い

Mac で、Firefox を長時間使っていると、いつの間にか、ものすごいメモリを食っていて、めっちゃスワップしてしまいます、、、何故でしょう、、、。。。

>top
 PID COMMAND      %CPU   TIME   #MREGS RPRVT  RSHRD  RSIZE  VSIZE
2059 firefox-bi  12.9% 80:50.32  3073   422M+ 65.9M   448M  1022M

2007年3月23日

RedHat で CapsLock → Ctrl に変更

IBM ThinkPad X22(古!!) に、RedHat9 を入れてあって、たまにしか使っていなかったのだが、いい加減キーボード使いづらいよって事で、キーの配置を変更しました。その時の作業メモ。

cd /etc/X11/
vi XF86Config
----------------------------------------------
Option  "XkbOptions"    "ctrl:nocaps"

追加するか、コメントはずして X を reboot すると有効になりました。これで、やっと快適な、ThinkPad Life を過ごせそうです、、、w

参考
中谷彰宏のサイバー研究室

2007年3月19日

ブラウザの特殊文字認識について物申す

ブラウザの特殊文字(&..etc)の認識についてご報告です。

A タグの href 属性の中で、以下のようなコードを書くと、IE や Opera では、特殊文字として認識されてしまいます。FireFox では認識されずに済む。

<A href="./xxx.cgi?q=test®_flg=xxx">LINK</A>

とした場合に、&reg が、® として認識されてしまう、、、orz
確かに、特殊文字については、;(セミコロン)を省略して記載できるのだが、href 属性の中まで、特殊文字の表示として認識しなくてもいいのでは？？これは、Bug ではないかと思っているのだが、どうなのだろう、、。
W3C で規定されている特殊文字は、他にも多く存在するため、同様の問題に遭遇する人は多いのではないかと思うのだが、、、。何か、回避策をご存知のかたは、コメント頂けると嬉しいです。
おそらく、この投稿を IE や Opera で見ると、A タグの &reg が特殊文字に変換されてしまっているのでは、と思います。

登録: 投稿 (Atom)

鰯のテクニカルノート

2007年4月12日

「はてブの被ブックマーク数を表示する」をBloggerでやってみる

2007年4月6日

Text::CSV は日本語入ってるとダメなんだ、、、orz

2007年4月3日

Blogger でも、コードハイライトしてみる。by google-code-prettify

2007年4月2日

メッセージボックスをコピー。

2007年3月25日

Firefox が、ひどいメモリ食い

2007年3月23日

RedHat で CapsLock → Ctrl に変更

2007年3月19日

ブラウザの特殊文字認識について物申す

ブログアーカイブ

ラベル

自己紹介

2007年4月12日

2007年4月6日

2007年4月3日

2007年4月2日

2007年3月25日

2007年3月23日

2007年3月19日

ブログ アーカイブ

ラベル

自己紹介

ブログアーカイブ