2012年に @wada811 が読んだ技術書まとめ

2012年も終わりに近づいているので@wada811が読んだ技術書を振り返ってみようかと思います。

2012/01/14 [書評]Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト | DevAchieve

趣味でやっていたHTML/CSSを業務レベルに上げるために基礎からおさらいしました。
最近HTML5が仕様策定完了したのでHTML5/CSS3バージョンで出して欲しいですね。
CSS3まだまだぐちゃぐちゃしてて無理かもしれませんが…。(linear-gradientとか使ってみたけど酷い…)

2012/01/15 [書評]WEB+DB PRESS 総集編 [Vol.1～60] | DevAchieve

ちょっとずつ読んでいって最近全部読み終わりました。
流石に古くかったり、やってない言語などは参考にはならなかったけど
普遍的な内容は結構勉強になった。効率が良いかと問われると微妙だと言わざるをえないけど…。
最近の号はやはり得るものはそこそこ多いので普通に買うのはありかもしれません。

2012/01/15 [書評]良いコードを書く技術　読みやすく保守しやすいプログラミング作法 | DevAchieve

ある程度良いコードを書けていればリーダブルコードを読んだ方が得るものもあるんじゃないかと思います。
原典にあたる重要性を教えてくれるのと参考文献を紹介してくれるのでそこはいいと思います。

2012/01/15 [書評]コンピュータはなぜ動くのか ～知っておきたいハードウエア＆ソフトウエアの基礎知識～ | DevAchieve

2012/01/15 [書評]プログラムはなぜ動くのか 第２版 知っておきたいプログラムの基礎知識 | DevAchieve

2012/01/15 [書評]ネットワークはなぜつながるのか 第2版<br>知っておきたいTCP/IP、LAN、光ファイバの基礎知識 | DevAchieve

なぜ〜なのかシリーズ。レビューを書いたのがこの日というだけでさすがに1日で3冊読めるものじゃない。
基本情報技術者を取るのと、ソフトウェア会社でエンジニアになるにあたって
非情報学科の大学生だった俺がとりあえず基礎知識を仕入れておかねばと読んだ本です。
まぁそこまで無駄ではなかったと思いたいです。ネットワークはちんぷんかんぷんのままだったけど…。

2012/03/31 [書評]できる逆引き Excel VBAを極める 勝ちワザ700 2010/2007/2003/2002対応 (「できる逆引き」シリーズ) | DevAchieve

内定先アルバイトでExcel VBAをやるのに読んだ本です。なかったら結構きつかったかも。

2012/03/30 [書評]よくわかるPHPの教科書 | DevAchieve

レビュー日だから日付が前後してますが、読んだのはこっちが後です。
プログラミング言語はもういくつか使っていたのでPHPでどんな事するのかの概要を知るために買ってみました。
プログラミング経験があればプロになるためのWeb技術入門と
プロになるための PHPプログラミング入門で十分な内容だったかも。

2012/04/15 基本情報技術者試験を受験するまでに使った参考書3冊 | DevAchieve

基本情報技術者試験に受かったので使った参考書のレビューをしました。
改訂新版 基本情報技術者 らくらく突破 表計算はオススメだと思います。
後は過去問やっておけばなんとかなるような気がしますね。
そのくらい過去問でやってたことが形を変えて出てきます。

2012/04/21 [書評]プログラミングの宝箱 アルゴリズムとデータ構造 第2版 | DevAchieve

基本情報技術者試験に受かったはいいものの、情報科出身ではないのでアルゴリズムとデータ構造について
まともに学んだことがなくてイマイチな得点だったので勉強のために読んでみました。
アルゴリズムとデータ構造について学んだことがない人は読んでおくといいと思います。

2012/04/25 [Twitter][API]改訂で2012年5月14日までに開発者がするべきこと | DevAchieve

Twitter API ポケットリファレンスの事もちょっと書いている記事なので。
TwitterのAPIを叩くなら結構必須だと思います。かなり役に立ちました。
TwitterのAPIが1.1にバージョンアップしますが読んでおくと1.1のこともわかりやすいかもしれません。

2012/05/12 [書評]よくわかるiPhoneアプリ開発の教科書【iOS 5＆Xcode 4.2対応版】 | DevAchieve

iPhoneアプリを作ることになってXcodeやInterface Builderの使い方がぜんぜんわからなかったので
そのへんを解説している一番簡単そうな本を読んでみました。
iPhoneを使っていなかったのでどんな機能、どんなパーツがあるかを知ることができたのは良かったと思います。

2012/05/09 [書評]詳解 Objective-C 2.0 第3版 | DevAchieve

iPhoneアプリを作るにはObjective-Cで書くのだけれど結構他の言語とは異なっていたので
よく理解するために読んでみました。使いこなせてはいないけど理解することはできました。
もっとObjective-CをマスターしてiPhone/Android両方できますと胸を張って言えるようになりたいです。

2012/06/02 [書評]知る、読む、使う！ オープンソースライセンス | DevAchieve

昔、図書館で読んだソフトウェアライセンスの話が電子書籍になって出版されていたので読んでみました。
ソフトウェアライセンスも大事な話ですから一回は学んでおいたほうがいいですね。

2012/06/03 [書評]「プロになるためのWeb技術入門」なぜ，あなたはWebシステムを開発できないのか | DevAchieve

アプリばっかり作っていてWebとかPHPとかのあたりが全然わかってなかったのでコレで勉強しました。
コレはもっと早く読んでおきたかったというくらいの基礎知識でした。

2012/06/09 [書評]iPhoneプログラミングUIKit詳解リファレンス | DevAchieve

話はまたiPhoneに戻って今度はUIKitを解説した本です。
コレがなかったらリファレンスを読むしかなかったかもしれません。
この本はiOS4ベースで今使い物になるか不安になるかもしれませんが、
iOS5/6で追加はされましたが既存のものはそんなに変わっていないと思うので大丈夫かと思います。

2012/06/30 [書評]iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン | DevAchieve

iPhoneに限らずAndroidアプリのデザイン設計をするのにも役立つ本です。
こういうの本の内容を理解していない人がアプリって
すごく微妙だったりするので使いやすいアプリを作りたいなら必読です！

2012/07/23 [書評]達人プログラマー システム開発の職人から名匠への道 | DevAchieve

名著だと言われていたので読んでました。
実際のプログラミング、システム開発に近い所でのプログラマがどうあるべきかを説いている本です。
プログラマとしてどうあるべきか不安がある人は読んでおくといいかもしれません。

2012/07/08 日経ソフトウエアをまとめ買いしてやったぜぇ～ワイルドだろぅ？ | DevAchieve

2012/08/09 [書評]日経ソフトウエア 2012年 01月号 | DevAchieve

2012/08/12 [書評]日経ソフトウエア 2012年 02月号 | DevAchieve

2012/08/20 [書評]日経ソフトウエア 2012年 03月号 | DevAchieve

2012/09/03 [書評]日経ソフトウエア 2012年 04月号 | DevAchieve

2012/09/09 [書評]日経ソフトウエア 2012年 05月号 | DevAchieve

2012/09/10 [書評]日経ソフトウエア 2012年 06月号 | DevAchieve

2012/09/16 [書評]日経ソフトウエア 2012年 07月号 | DevAchieve

2012/09/18 [書評]日経ソフトウエア 2012年 08月号 | DevAchieve

2012/09/25 [書評]日経ソフトウエア 2012年 09月号 | DevAchieve

忙しい中で効率的に最新情報を手に入れるには雑誌がいいのでは？
ということで日経ソフトウエアを購読してみました。
最初は興味が有ることが多くて良かったのだけど、
終盤は読みたい記事も少なくなりコスパ悪かったので購読やめちゃました。
他にも読みたい本あるし必要な時にちゃんとした本で情報を仕入れた方が確実な知識が手に入ると思いました。

2012/08/24 [書評]必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意 | DevAchieve

ネット上でよくブログ論、ブログテクニックの記事を読んでいたので目新しいことはなかったのですが、
逆にそういうのを読んでいない人は本書を読んでおくと良いかもしれません。ブログで稼ぎたい人向です。
僕はセルフブランディングと備忘録が出来ればいいのでブログで直接お金を稼ぎたいわけではないので
この本を読んでどうこうしようというのはありませんでした。技術ブログで記事量産とか無理ですし…。

2012/08/26 [書評]リーダブルコード The Art of Readable Code | DevAchieve

コードは理解しやすくなければならないという考えのもと、
理解するための時間を最短にするための実践的なテクニック集を解説している本です。
変数名には説明的な名前をつけるべきとか
どういうコメントを書くべきかとかを解説しているので読んでマスターしてください！

2012/09/04 [書評]ウェブデザインのつくり方、インターフェイスデザインの考え方。 | DevAchieve

デザインというから敬遠されがちですが、スタイリングとかデコレーション的なアートな感じではなく
設計なのでWeb系の開発者は読んでおくと良いと思います。(プログラマーもデザインを理解しておくべき論)

2012/09/11 [書評]マンガでわかるデータベース | DevAchieve

データベースの概念、基礎知識をマンガで解説した本です。
なんとなくSQLを書いたことがある人がしっかりデータベースを勉強しようと思ったら
この本から学んでいくのが良いと思います。情報処理技術者試験のデータベースあたりの勉強にも使えます。
ちなみにごっちゃになりやすい第二正規形と第三正規形の違いは連鎖があるかどうかです。(詳しくは記事へ)

2012/09/26 [書評]SQL ゼロからはじめるデータベース操作 | DevAchieve

標準SQLでRDBMSによらないSQLが書けるようになる本です。
コレ一冊でOracle, SQL Server, DB2, PostgreSQL, MySQLで動くSQLが書けるようになります。
この本をマスターしたら後のSQLは応用するだけで組めるようになるので是非マスターしましょう！

2012/10/02 [書評]プログラミングコンテストチャレンジブック [第2版] | DevAchieve

競技プログラミングをたまにやっているので勉強用にと読んでみました。
難しいこと書いてあって睡眠導入剤として優秀すぎたので読むのは諦めました…。

2012/11/03 [書評]Android SDK開発のレシピ | DevAchieve

第1版と第2版ともに読んだ本です。第2版はカメラ周りが実装にかなり役に立ちました。
その他のサンプルも役に立っているので手元において開発をしていました。

1年で書籍25冊と雑誌9冊を読んだ！

正確には書評を書いていない書籍とかあったり、つまみ読みで通して読んでない本とかあったり、
途中で読むのをやめた書籍があったりで書籍と雑誌あわせて40冊くらいだと思います。
今年読んだけど書評を書いてない本は以下のとおり。
Webを支える技術、情熱プログラマー、入門git、Objective-C逆引きハンドブック、
PHP 逆引きレシピ、平成25年度【春期】【秋期】 応用情報技術者 合格教本
12月はレビューを一冊も書いていないのですが、
これは応用情報技術者の勉強を始めたので他の本は全然読んでいないからです。

これだけ本を読んで身につけたのがObjective-CとPHPとSQLくらいでしょうか。
まだまだユニットテストとかTDDとかJenkinsでCIとかの高位な部分や、
JavaScriptやRubyなどの他の言語などをもっと学びたいです。
もっと色々なことを身につけられる機会、環境、時間が欲しいです。速さが足りない！

[書評]必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意

必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意
コグレマサト
インプレスジャパン
発売日：2012-03-23

ブクログでレビューを見る»
ブログで稼ぎたい人のためのテクニック集。
ネット上でよくブログ論、ブログテクニックの記事を読んでいたので目新しいことはなかった。

逆にそういうのを読んでいない人は本書を読んでおくと良い。

ブロガーは二つのタイプに分けられる。
時間をかけ、濃い内容の記事を書くタイプと、一本の記事は軽く短く、それを量産するタイプ。

著者の二人は後者で、僕は前者のブロガー(のつもり)だ。
後者は記事を量産してPV稼いで広告などでマネタイズをはかる戦略で
この本でもそのためのテクニックなどが載っている。
僕自身はブログ自体をマネタイズというのは熱心にやってはいないが
ブログ論とかブログテクニックなどの記事は読んでいたのでそれほど目新しいことはなかった。
だが、ブログで稼ぎたい人などはネットでそういう記事を探しまわるよりはこの本を買うと手っ取り早いかと思う。

時は金なりですよ。記事を読んだって、やってみなきゃわからないことがあるんだから行動を起こさないとね。
たくさん記事書いてみて自分のブログスタイルを確立できたらでもいいかもしれないけどね。
肩肘張って稼ぐためとか考えると続かなそうだし、まずは適当に100記事くらい書けばいいんじゃないですかね。
100記事も書き続けられたら書くこと自体が苦にならないと思う。
むしろちょっとくらいお小遣い稼ぐようにしないともったいないと思うようになったら
この本買って色々やればいいんじゃないかな？

本より著者の二人のブログ([N]ネタフルと和洋風KAI)の広告の貼り方のほうが参考になりそう。
月にチューハイ一本飲めるかぐらいしか稼げてない(しかも換金できてない…)から参考にしたい。

必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意

私がプログラマとしてブログを書く事をオススメする8つの理由

だって人間は忘れる生き物だから

一回やってしまえば終わりな環境構築とか滅多に書かないコードとか全部覚えてられますか？私は無理です。
だいたいのことは検索すれば出てくるので、その都度検索すれば良いと思うでしょうが私はそうは思いませんでした。
私は面倒な事が嫌いです。同じ事を何度も検索するのが嫌いです。

その姿は毎度のようにお道具箱をひっくり返す小学生に似ていた

ネットは他人のお道具箱です。
ゴミのようにグシャグシャになったプリント混じりのお道具箱の中から
必要な道具を時間掛けて探すなんて苦行に何故耐えられるのですか？
私は面倒な事が嫌いなんです。
道具を他人のお道具箱に入れてる限り、その道具は自分の道具のようにすぐに取り出すことは出来ないのです。
頭の容量が無限大にあって、どんなに時間がたっても劣化せずに
素早く読み出せるのなら全部覚えてるのでもいいのでしょうけど…。

ブログは私のお道具箱

残念ながら少なくともわたしの脳はそのようにはできていないので全てを覚えておくことは不可能です。
かと言って忘れたら再び他人のお道具箱を漁るのは嫌です。
私は面倒な事が大嫌いなので。
じゃあどうするかと言ったら自分のお道具箱に綺麗に整理整頓して入れておくしか無いわけです。
勝手知ったる自分のお道具箱なら必要な道具を取り出すことは容易に行うことができます。

どんなに便利な道具も他人のお道具箱に入れてあったら他人の物だ

道具を借りている以上、それ以上のものはそこから得られません。
複数集めれば十分な知識を得られるかもしれませんが、忘れたら全て調べ直しです。
面倒な事が嫌いな私はそんなことを許せるはずもありません。
Googleの気分次第で見つからなくなったり、情報自体が消え去ってしまうかもしれないのですよ。
ブログに書いて自分の物にしてしまえば全て自分の知識になるのです。

勉強するのにノートを書かないなんて

そういうことでプログラマの方には是非ブログを書くことをオススメしたいのですが、
「他の人がもう書いてるから書く必要がない」とか「拙い知識で書いてもしょうがない」とか返されることがあります。
でもそんなことはないと声を大にして言いたい。
前者は是非他人の道具を自分の物にして欲しい。複数ページを参照しているのならまとめることで体系化した知識にできる。
後者は自分のために書いた方がいい。コードを見て、そう書いた理由が、関連知識が全て思い出せますか？
両者とも何かを学んだならブログに書こう。

書けば覚える、少なくとも書いたという事は

やはり人間、ブログを書いても時が経てばどうしても忘れてしまいます。
でも不思議とブログに書いたという事は覚えていたりするものです。
その際にちゃんとブログに書いてあれば読み返すだけで思い出せます。

書くなら詳しくわかりやすく

忘れてしまった未来の自分のために詳しくわかりやすく書いた方が良いのはもちろん現在の自分にもメリットがあります。
詳しくわかりやすく書くためにはそれ相応の知識が必要になるので必然的に調べることになるので理解度が上がります。
調べることで勉強にもなるし、より良い方法を見つけることもあるので「詳しくわかりやすく」を心がけましょう。

調べるときには必ず原典にあたる

2次ソース、3次ソースを参考に書かないほうがいいです。間違っていたり、古くなっていたりすることがあります。
必要なことしか書かれていないことが多いのでそれが知識の上限にならないようにするためにも必ず原典にあたりましょう。
これができている人はやはり凄いです。

さいごに

本当は[企画]なんでブログ書こうと思ったのさ！『あなたのブログ始めたキッカケ教えてください』 #myblogstartの
企画に乗った記事を書こうと思ったんだけこの記事をキッカケにして欲しいという気持ちが強かったのでシフトしてしまった。

一緒に読んでほしい：「師匠になる」 - 情熱プログラマー ソフトウェア開発者の幸せな生き方

target="_blank"を設定したらリンクテキストのあとにアイコンを表示する

先日リンクにファビコンを表示する記事が話題になっていたことからヒントを得た。
これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！ | バンクーバーのWEB屋
このようにリンクテキストのあとに新しいタブで開くことをアイコンで表示することができる。

知っている人には何を今更って内容なのだろうけど今までずっと謎だったので解説記事書く。

<a href="http://wada811.blogspot.com/" target="_blank">DevAchieve</a>

.entry-content a[target]:after {
    margin: 0 2px;
    content: url(http://表示したい画像のURL);
}

.entry-content はBloggerの記事内部を表すクラス。記事の外のスタイルは変更したくなかったので。
a[target] はaタグを属性セレクタでtarget属性を持つもののみを指定。
:after は疑似要素。要素の後のスタイルを指定できる。
content で表示内容を指定。画像で表示したいのでBloggerでアップロードしてURLを指定した。

インスピレーションを得たFavicons Next To External Links | CSS-Tricksでは
a[href^="http"]:before で、 [href^="http"]で前方一致していた。
同様にして[target="_blank"]でできそうなんだけどスタイルが適用されなかった。
仕方ないので target の記述があるかどうかだけチェックしてます。
普通は target="_blank"を指定するときだけ target 属性を書くと思うので。

参考リンク

意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
:after疑似要素 (E:after)｜セレクタ｜CSS HappyLife ZERO

BloggerのモバイルページをGoogle検索に表示させない方法

モバイルページをPCで開くとモバイル表示のままでPC版にリダイレクトされないし、
ソーシャルなリアクションがモバイル版のURLで行われてしまうので
Google検索でモバイルページを表示させないようにしたほうがいいかもしれないです。
スマホとかでPC版にアクセスしてもモバイル版にリダイレクトされるから
モバイルページを検索に載せておく必要性はないしね。

ということでGoogle検索にモバイルページを載せないように設定しましょう。
参考：BloggerのモバイルページをGoogleにインデックスさせない方法 +Plus One World
方法としてはウェブマスター ツールの設定＞URLパラメータの項目で、
パラメータを追加ボタンからモバイル用のパラメータ「m」を追加してクロールしないにチェックを入れて保存します。
これだけ！これでGoogle検索にモバイルページが表示されなくなります。

Bloggerのページタイトルを「記事タイトル | ブログタイトル」にする方法

ブログのページタイトルは「記事タイトル | ブログタイトル」がデファクトスタンダードのようで、
たいていのブログはこの形式になっていますし、Googleもこの形式の方が認識しやすいらしいです。
Google検索やその他のページなどでは先頭何文字かしか表示されないことも多いので
できるだけ記事タイトルを多く表示できるようにこの形式にしたほうがよさそうです。

ということでBloggerの設定をいじることにしましょう。
今回参考にしたのは以下の記事です。
Blogger ブログのページタイトルを「投稿タイトル | ブログタイトル」の順にする方法
Blogger設定画面 > テンプレート > HTMLの編集 > 続行 から以下のコードを検索します。

<title><data:blog.pageTitle/></title>

以下のコードに変更します。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
  <b:else/>
    <title><data:blog.pageTitle/></title>
  </b:if>
</b:if>

2行目が記事タイトルで、5行目がBloggerの「ページ」のタイトルで、
7行目がトップページなどのその他のページのタイトルになります。

Bloggerでラベル別に分類表示された記事一覧ページを作る

DevAchieve: Bloggerのページ機能と記事一覧を表示する方法で記事一覧ページを
作ったんだけど、単なるGoogleReaderへのリンクでユーザーが一旦外に出てしまうし、
ラベル別になっていなくて微妙でした。

これはその点では問題なしです！記事が500件超えたらどうなるのか…とは思いますが…。

Blogger ブログにサイトマップ - ラベル分類された投稿一覧を「ページ」に表示する方法
http://www.kuribo.info/2012/04/blogger.html

<script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.kuribo.info/feeds/posts/summary?redirect=false&amp;max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Bloggerのページ機能と記事一覧を表示する方法

ブログタイトルとブログ説明の下にメニューバーを設置しました。

これはBloggerの「ページ」機能を使ったものです。
Blogger管理画面の「ページ」を選択して、
プルダウンメニューからウェブアドレスを選択して下さい。
ページタイトルとURLを指定すればメニューバーにそのURL先へのリンクが作成できます。

ここに記事一覧を表示するページを作成します。
一番簡単な方法は Google Reader に飛ばしてしまうことです。
ユーザーがGoogleアカウントを持っていれば
Google Reader で記事一覧を表示することができます。
購読を促しつつ、記事一覧の表示とクリックしたら記事内容を Google Reader で表示できるという合わせ技です。

設定するURLの例は以下の通りです。"wada811"の部分を各自のIDに変更して下さい。
http://www.google.co.jp/reader/view/feed/http%3A%2F%2Fwada811.blogspot.com%2Ffeeds%2Fposts%2Fdefault

追記：削除しました。

Bloggerの最新コメントをウィジェットに表示する

BloggerのコメントはRSSフィードが配信されているので
それをフィードウィジェットで表示するだけ！
コメントRSSの例：http://wada811.blogspot.com/feeds/comments/default

Bloggerのリダイレクトによる弊害を回避するための二つの方法の比較

この問題に対して2つの対処法を紹介しました。
が、2つの方法のメリット・デメリットについて書いていませんでした。
初見の人はどちらの方法で対処していいのかわからないと思うのでココで思いつく限り上げてみたいと思います。

1.Bloggerでblogspot.jpにリダイレクトされるのを防ぐ方法

メリット

・導入が簡単。
・将来追加するウィジェットがデータタグ「data:post.url」を使っていても気にする必要なく追加できる。
・人気の投稿などで使っていたデータタグの「data:post.href」で .com URLを取得できる。
→人気の投稿にTweet＆はてブカウンターを表示させている人は .com URLでカウントできる。

デメリット

・.jp から.com にリダイレクトしているのが見えてダサい。
・JavaScript なので、ユーザーが JavaScript を OFF にしていると .com URLにリダイレクトできなくてユーザーが分散する。
→そこでソーシャルなリアクションがあっても .com URLではないので .com URLではカウントが増えない。
・Googleの意向に歯向かうような形になっているため、将来的に不利益を被る可能性があるかもしれない。
・海外からのアクセスでリダイレクトが無限ループになるらしい！←New!←修正済み

(2012/04/07)※「.jp」のみ「.com」にリダイレクトするようにコードを修正しました。コードの確認をお願いします。

2.Bloggerのリダイレクトで失われたソーシャルカウントを取り戻す方法

メリット

・Blogger 公式のデータタグを利用しているので何か問題が起こる可能性が少ない。
・Google の意向にも従っているので将来的な不安もなく、再び対応させられることがないと思われる。

デメリット

・新たにウィジェットなどを追加した時に「data:post.url」があったら毎回「data:post.canonicalUrl」に直さなければならない。
・人気の投稿などで使っていたデータタグの「data:post.href」で .com URLが取得できず、取得する方法が不明。

以上です。他にもあったらコメントして下さい。
このメリット・デメリットを比較して自分に合った方法を導入しましょう。

ちなみに私は記事下の「人気記事TOP5」が元々は人気の投稿で、
「data:post.href」を使用しているので(1)の方法を適用しています。

それでは。

Bloggerのリダイレクトで失われたソーシャルカウントを取り戻す方法

まとめ：DevAchieve: Bloggerのリダイレクトによる弊害を回避するための二つの方法の比較

前回のDevAchieve: Bloggerでblogspot.jpにリダイレクトされるのを防ぐ方法では
JavaScriptでリダイレクトし直していたわけですが、一部上手くいかないという報告がありました。
InternetExplorer9、Firefox11、GoogleChrome18、Safari5、Opera11にて確認しましたが、原因不明です。

代わりにJavasriptをOFFにしていると
.com URLにリダイレクトし直すことができないという問題を発見しました。

コレでは .com と .jp への分散は避けられません。

Googleの方針に逆らい続けるのも今後デメリットがあるかもしれないし、
リダイレクトし直してるのが見えるのも少しダサい、という要望に応えて
前回の方法に代わる新しい対処法をご紹介します。

新しい対処法

blogspot.comからblogspot.jpへリダイレクトに伴なってソーシャル系で困った場合の対処方法 - buzzword update
data:post.url を使われていた場所に data:post.canonicalUrl を使うようにして下さい。
こちらは xxxxx.blogspot.com のURLを返します。

ということで、data:post.canonicalUrl は必ず blogspot.com のURLを返してくれます。
HTMLソースをエディタなどにコピペして置換機能で置換してしまいましょう。
ソーシャルなリアクションがついていた blogspot.com でカウントしてくれるので
失われたソーシャルカウントが復活します。
このデータタグはBloggerの正式なタグですので今後不利益を被る可能性もないと思います。

おまけ

Bloggerデータタグの返すURL
・ブログ全体
data:blog.url : http://wada811.blogspot.jp/ // 表示中のページの .jp URL
data:blog.canonicalUrl : http://wada811.blogspot.com/ // 表示中のページの .com URL
・記事ループ内
data:post.url : http://wada811.blogspot.jp/2012/03/bloggerblogspotjp.html
data:post.canonicalUrl : http://wada811.blogspot.com/2012/03/bloggerblogspotjp.html
・ウィジェットの記事ループ内
data:post.href : http://wada811.blogspot.jp/2012/03/bloggerblogspotjp.html

ウィジェットの記事ループ内での .com URLを返すデータタグが不明です。
ご存じの方はコメントして行ってくれると嬉しいです。
ググった感じでは存在しないんじゃないかと思いました。
data:post.href は具体的には人気の投稿に使われていると思います。
(これが正常に動かないので私は前回の対処法を継続しています。)

Bloggerのリダイレクトによる弊害を回避するための二つの方法の比較

Bloggerでblogspot.jpにリダイレクトされるのを防ぐ方法

追記(2012/04/07)：海外からのアクセスでリダイレクトが無限ループになる問題を修正しました。
コードを修正したのでハイライトされた部分を修正してください。

追記：DevAchieve: Bloggerのリダイレクトで失われたソーシャルカウントを取り戻す方法

まとめ：DevAchieve: Bloggerのリダイレクトによる弊害を回避するための二つの方法の比較

Bloggerで日本において blogspot.com から blogspot.jp にリダイレクトされるようになりました。
これは不具合でもバグでもなく、悲しいことに仕様です。
ですが対処法はあります。御託はいいから方法はよ。って人は記事の下から読んで下さい。

このリダイレクトは簡単に説明すると、中国みたいな国の検閲でも
その国において非表示にするだけで済むという運用上のためのもののようです。
この問題について詳しくは：
クリボウの Blogger Tips: Blogger ブログ（blogpot.com）へのアクセスが blogspot.jp にリダイレクトされる

これによるデメリット

ソーシャルなリアクションはURLでカウントされているので、リダイレクトによって今までのリアクションが見かけ上消えます。
俺の+1返せ！ヽ(`Д´)ﾉｳﾜｧｧｧﾝ!!　URLリダイレクトでBloggerブログが悲惨なことに…… ~ Plus One World

blogspot.jpにリダイレクトされるのを防ぐ方法

Disable Blogger Country Specific Domain Redirection | Ravi Saive: A Technology Blog For Newbiesを意訳&修正。
Bloogerの国固有ドメインリダイレクトの無効化

最近、Bloggerは国固有URLのリダイレクトをすべてのBlogSpotドメインに導入しました。
blogspot.com ドメイン拡張の代わりに、あなたの読者は読者の国固有ドメイン拡張を見ることになります。
リダイレクトは現在インドでも実装されていて、
これまでのところ blogspot.com ドメインから blogspot.in にリダイレクトされています。

(中略)

このリダイレクトは"country-code Top Level Domain" (ccTLD)と呼ばれるもので、
一時的な変更である"302 Redirect"として知られています。
アドレスの恒久的な変更である"301 redirect"ではありません。

この302国固有ドメインリダイレクトを無効化するために

あなたはこのリダイレクトに対処し、blogspot.comにこだわるために
ブログテンプレート少しのコードを追加する必要があります。
以下のステップに従ってブログから302 リダイレクトを無効化してしまいましょう！

ブログの国固有ドメインリダイレクトを無効化する方法

1. Blogger設定画面＞テンプレート＞HTMLの編集＞続行
2. 変更を行う前にテンプレートのバックアップを取っておきましょう！
3. ウィジェットのテンプレートを展開にチェック。
4. テンプレートから以下のコードを検索する。

</head>

5. </head>の前に以下のコードをコピペする。

<script type='text/javascript'>
if ((window.location.href.toString().indexOf('.jp/'))!='-1'){
window.location.href = window.location.href.toString().replace('.blogspot.jp/','.blogspot.com/ncr/');
}
</script>

(保存後にBlogger側で少し自動変換されますが問題はないかと思います)
6. テンプレートを保存してブログを確認しましょう。

もしまだリダイレクトされる場合は、コメント欄に質問を投稿してくれたら手助けできるかもしれません。

以上、意訳おわり。たぶんコレで大丈夫です。
このブログもblogspot.comで表示できているでしょう？

それでは。

追記：もう一つの方法があります。

DevAchieve: Bloggerのリダイレクトで失われたソーシャルカウントを取り戻す方法

まとめ：DevAchieve: Bloggerのリダイレクトによる弊害を回避するための二つの方法の比較

ツイートボタンをカスタマイズして「@～さんから」を非公式RT形式にする

きっとこの記事を見る人は記事のTweetボタンからツイートした時に表示されている「@～さんから」というのは
画像がなくても伝わると思うので、細かいことは抜きに改善方法だけを載せておきます。

元のコードはDevAchieve: Bloggerの記事フッターに各種ソーシャルボタンを設置する方法にある通り。

<a class='twitter-share-button' data-via='null' data-count='horizontal' data-lang='ja' expr:data-text='data:blog.title + ": "+ data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>

<a class='twitter-share-button' data-count='horizontal' data-lang='ja' expr:data-text='" RT @null "+ data:blog.title + ": "+ data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>

変更点は data-via='wada811' の削除と、
expr:data-text への " RT @wada811 "+ の追加です。
自分であまり使わないから気にしてなかったんですが、
ちょうど下の記事を見たのでウチでも直しておきました。
Happy-Go-Lucky: Bloggerで"ブログ内ツイートボタンをカスタマイズして
Twitterアカウント名をイイ感じに表示してみた"
この記事の新規性は無いけど
情報源は多いほうが良いということで。(俺が発掘するの面倒だし)

Bloggerの検索結果のCSSを上書きする

この画像を見るとわかるようにBloggerの検索ウィジェットから検索した時に表示される結果に
変な border-botttom がかかっていて見苦しかったので修正しました。
検索結果のページのCSSは別に読み込んでいるようなので !important を指定して強制上書きしました。

画像では見切れているけど枠のボーダーは消えずにヒットした件数と各結果の border-bottom が消えました。
タブ部分もくっついて良い感じの表示になります。

.gsc-result{
 border-bottom: none !important;
}

.gsc-result-info{
 border-bottom: none !important;
}

.gsc-tabsArea{
 margin: 0px !important;
}

DevAchieveブログカスタマイズまとめ

Blogger設定画面＞テンプレート＞カスタマイズ

テンプレート：Awesome Inc.(黒)
背景：変更なし
幅を調整：ブログ全体1100px, サイドバー310px
レイアウト：右サイドバー, 下段２段組

アドバンス
ページ：Verdana 14px
リンク：#9fc5e8
表示済み：#ea9999
カーソル：#b6d7a8
ブログタイトル：Times New Roman 40px
ブログの説明：Verdana 14px
タブのテキスト：Verdana 14px
日付ヘッダー：Verdana 14px
投稿タイトル：Verdana 22px
ガジェットタイトル：Verdana 14px
ガジェットテキスト：Verdana 14px
ガジェットのリンク：リンクと同じ
フィードのリンク：リンクと同じ

CSSを追加：
DevAchieve: Bloggerのラベルウィジェットのカスタマイズ
DevAchieve: CSS3でボックスを角丸にするborder-radiusを使ってみた
DevAchieve: CSS3の角丸を使ってキーを表現してみた
DevAchieve: BloggerにソースコードをハイライトするSyntaxHighlighterを導入する
DevAchieve: Bloggerの検索結果のCSSを上書きする
target="_blank"を設定したらリンクテキストのあとにアイコンを表示する | DevAchieve

HTMLの編集：
DevAchieve: Bloggerの「登録: 投稿 (Atom)」の表示を消す方法
DevAchieve: BloggerをIEで開くと最新版でもIE7として表示されることによる問題
DevAchieve: Bloggerの人気の投稿にTweet＆はてブカウンターを表示させる方法
DevAchieve: Bloggerの記事フッターにGrow!ボタンを設置する方法
DevAchieve: Web上でチップが貰えるぞ！噂のGrow!をBloggerに設置する方法
DevAchieve: Bloggerの記事フッターに各種ソーシャルボタンを設置する方法
ツイートボタンをカスタマイズして「@～さんから」を非公式RT形式にする | DevAchieve
Bloggerのページタイトルを「記事タイトル | ブログタイトル」にする方法 | DevAchieve


ウィジェットの追加：
DevAchieve: Bloggerのページ機能と記事一覧を表示する方法
Bloggerの最新コメントをウィジェットに表示する | DevAchieve

その他
BloggerのモバイルページをGoogle検索に表示させない方法 | DevAchieve

関連：
DevAchieve: Bloggerのリダイレクトによる弊害を回避するための二つの方法の比較

結構色々なことやったので、リセットされた時にすぐに復活できるように。

CSS3でボックスを角丸にするborder-radiusを使ってみた

追記(2012/06/01):border-radiusについてはベンダープレフィックス(8, 9行目の記述)は必要なくなりました。

SyntaxHighlighterで表示する程でもないコマンド系のコードを
角丸ボックスで表示しているのを見てカッコ良かったので取り入れてみました。
例↓
git push -u origin master

導入方法はコチラ：CSS3 角丸を表現する border-radius | CSS Lecture

こんな感じでカスタマイズしました。

span.cmd {
    color: #000000;
    margin: 5px;
    padding: 5px 10px;
    line-height: 2em;
    background-color:  #FFFFFF;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

marginは左右にしか効かないので上下の幅はline-hrightで指定することになります。
IE8以下は角丸に対応していないので角が丸くなりません。
リンク先ではOperaでは角丸にならないと書かれていましたが、
少なくともOpera11.61では角丸になることを確認しました。

CSS3の角丸を使ってキーボードのキーを表現してみた

追記(2012/06/01):border-radiusについてはベンダープレフィックス(9, 10行目の記述)は必要なくなりました。

ショートカットキーとかを表示させる時に画像を用意するのは面倒なのでCSS3の角丸と
昔ながらのborder-styleを使ってキーボードのキーを表現してみた。

例↓
Windows 7ではWin+数字でタスクバーにあるソフトを起動できます。

と、こんな感じで表示することができます。
border-style: outset;は古臭いHPの香りがしますが、
角丸にすると本当にキーっぽくて良い感じです。

サンプルコードはコチラ。

span.key {
    border: 5px #eee outset;
    color: black;
    margin: 5px;
    padding: 5px 10px;
    line-height: 2.5em;
    background-color: #eee;
    border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
}

BloggerをIEで開くと最新版でもIE7として表示されることによる問題

記事フッターのソーシャルボタンがIEだけ右の画像のように改行されてました。
画像には写りきってないですがソーシャルボタンだけで3行使っていて
レイアウトがカッコ悪くてどうにかしたかったのですが原因不明なので諦めてました。

各ブラウザの最新版をサポートするはずの
Gorw!ボタンの背景が白くなっていたので
とりあえずTwitterに投げときました。

きっとGrow!の中の人が
エゴサーチして対応してくれると
思ってた(・ω＜)ﾃﾍﾍﾟﾛ

本当に対応していただいて、
実はBloggerのテンプレートにIEを見たらIE7だと思えというアレなコードが入ってたということでした。
以下がそのコードです。

<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

2行目の部分を削除することによってIE9などで開いてもIE7として表示されることはなくなります。

最新版のIEさえもIE7として認識させる理由はなんなのでしょうね…。
IE7の方がマシなんてことは普通ないと思いますけど…。

不具合報告ってほどのことをしてないけどお礼にGrow!してもらっちゃった！やった！(*´∀｀*)

それではー

Bloggerの「登録: 投稿 (Atom)」の表示を消す方法

RSSの登録のためのウィジェットをブログのフッターに設置しているので
記事の後に表示される「登録: 投稿 (Atom)」で同じものが表示される意味がありません。
なのでテンプレートのHTMLをよく探してみるとフィードのリンクがあったので
消してみたら表示されなくなりました。
昨日、Bloggerのテンプレートを復旧しなければならなくなって大変だったので
小さな変更ですがメモしておきます。

Blogger設定画面＞テンプレート＞HTMLの編集＞続行
で、HTMLをエディタなどにコピーして以下のタグを検索します。

<b:include name='feedLinks'/>

これを削除すれば、「登録: 投稿 (Atom)」の表示を消すことができます。

Bloggerのラベルウィジェットのカスタマイズ

ラベルウィジェットを設置したのだが
ラベルを表示させると縦に羅列されて、
サイドバー以外に設置する場合は
あまりにもスペースを取りすぎるので
カスタマイズしました。
ラベルウィジェト自体はHTMLのリストタグを
使って構成されているので
CSSをいじって横に並べるようにしました。
floatを使ったリストの基本的な横配置です。

.list-label-widget-content ul li{
    float: left;
    margin-right: 3px;
    white-space: nowrap;
}

これで置いてみるとラベル名と()で囲まれた投稿数が半角スペース1つ分くらい空いていて
投稿数が左右どちらのラベルに対応しているかわかりにくかったのでカンマを挟んで、マージンを設定しました。

<b:widget id='Label1' locked='false' title='ラベル' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<a expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default/-/" + data:label.name + "?alt=rss"' expr:title='data:postLabelsLabel + " " + data:label.name + " (RSS)"'><data:label.count/></a>),</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-" + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<a expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default/-/" + data:label.name + "?alt=rss"' expr:title='data:postLabelsLabel + " " + data:label.name + " (RSS)"'><data:label.count/></a>),</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

なぜか、white-space: nowrap; を設定しないとIE7以下で正常に表示されません。
コレを取るとリストの表示幅終端付近で押しつぶされたタグが表示されるので必須です。

追記(2012/03/31)
ラベルカウント部分にラベル毎のフィードへのリンクを追加しました。
参考：Windup T: Blogger - ラベル別のフィード配信