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などの他の言語などをもっと学びたいです。
もっと色々なことを身につけられる機会、環境、時間が欲しいです。速さが足りない！

Sublime Text 2の設定とDiffの取り方

Sublime Text 2とは

凄く便利で使いやすいと最近エンジニアの間に話題になっているエディタです。
なんかめっちゃ色々できて良いらしいので使い始めることにしました。
Sublime Text: The text editor you'll fall in love withからダウンロードできます。
恋に落ちるエディタと自称するだけあってかなり評判いいです。

ライセンス料は$59ですが試用版でも無期限で使えるようです。
今後リリース予定のSublime Text 3はアップデートにお金がかかるらしいです。
Sublime Text 2 - Sales FAQ

おそらくSublime Text 2ユーザーは割安なアップデート料を払えばよくて
新規になると値上がりしてて手を出しにくくなるのが
この手のソフトウェアにありがちなパターンだと思うので今のうちに買っておくのが良いかもしれません。
PayPalで支払いができて今なら5000円切るので更に円安になる前に買っておくのがお得かと思います。

Sublime Text 2の設定

Sublime Text 2 > Preferences > Settings - User (command + ,)で設定ファイルを開きます。
開いても殆ど何も書かれていなくて何を設定すればいいのかわからないので
Sublime Text 2 > Preferences > Settings - Defaultから Settings - User にまるっとコピペしました。
設定に関してはSublime Text 2 のDefault設定ファイルを眺める - blue_ham_cake1024のブログと
Y.A.M の 雑記帳: Sublime Text 2 の設定を参考にして変更してみました。

// フォントの指定
-    "font_face": "",
+    "font_face": "consolas",

// フォントサイズ
-    "font_size": 12,
+    "font_size": 14,

// 指定した幅のところで縦線が入ります。配列形式で複数指定できます。
-    "rulers": [],
+    "rulers": [100, 120],

// スペースをタブに変換
-    "translate_tabs_to_spaces": false,
+    "translate_tabs_to_spaces": true,

// 折り返しを強制
-    "word_wrap": "auto",
+    "word_wrap": true,

// その代わりに幅は広めに
-    "wrap_width": 0,
+    "wrap_width": 120,

// ミニマップ上でのファイルの現在の表示範囲をボーター表示
-    "draw_minimap_border": false,
+    "draw_minimap_border": true,

// 現在の行をハイライト
-    "highlight_line": false,
+    "highlight_line": true,

// 空白類の表示を常に
-    "draw_white_space": "selection",
+    "draw_white_space": "all",

// インデントのラインをキャレットの色とは異なる色で表示
-    "indent_guide_options": ["draw_normal"],
+    "indent_guide_options": ["draw_active"],

// 保存時に末尾の空白を除去
-    "trim_trailing_white_space_on_save": false,
+    "trim_trailing_white_space_on_save": true,

// 保存時に最後の行が改行文字になるようにする
-    "ensure_newline_at_eof_on_save": false,
+    "ensure_newline_at_eof_on_save": true,

// 文字コードを特定できない場合に自動的に指定する文字コード(ASCII, UTF-8, UTF-16は自動判定してくれる)
-    "fallback_encoding": "Western (Windows 1252)",
+    "fallback_encoding": "Shift-JIS",

// デフォルトの改行コード
-    "default_line_ending": "system",
+    "default_line_ending": "windows",

// Shift + Tab で行のどこでもアンインデント
-    "shift_tab_unindent": false,
+    "shift_tab_unindent": true,

// 変更したファイルはタブバーでファイル名をハイライト
-    "highlight_modified_tabs": false,
+    "highlight_modified_tabs": true,

// 開いているファイルが無くなったらアプリケーションを閉じる
-    "close_windows_when_empty": false,
+    "close_windows_when_empty": true,

Sublime Text 2でのDiffの取り方

Diffを取りたい2つのファイルを含むフォルダをFile > Open...で開き、
2つのファイルを選択(Macだったらコマンドキー押しながらファイルをクリック)して、
右クリックでDiff Files...をクリックするとDiffが取れます。

ということで上の設定はデフォルト設定とユーザー設定をDiffを取ったものでした。
これから色々使ってみようと思います！

Webプログラマーになる前に学ぶべきこと、知っておきたかったこと

新米Webプログラマー@wada811がプログラマーになる前に学ぶべきこと、知っておきたかったことを
これからWebプログラマーになる人に向けてまとめてみました。

心構え

プログラマとして生きるための心構えとして情熱プログラマーを読んでおくのはオススメだと思います。
研修先から帰る新幹線の中で読み終わる程度の分量だったのでぜひ読んでおいて欲しいです。
さらっと読めてしまうけど学ぶことが多いので何度も読んでしまうお気に入りの本です。
コードについてはリーダブルコードを読みましょう。[書評]リーダブルコード The Art of Readable Code
志高く、良いコードを書こうという気概があれば技術者として伸びていけると思っています。こちらもぜひ！
あと、ブログを書こう！私がプログラマとしてブログを書く事をオススメする8つの理由 | DevAchieve

スキル

HTML/CSS

Web系なら基本中の基本です。
HTML5/CSS3とかアツいですし、HTML5の仕様策定も完了したのですが
ユーザーが使用するブラウザが対応していないことも多いのでまずは基本のHTML/CSSを抑えましょう。
ということで、Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイトはオススメです。
結構習うより慣れろ的なところがあるので既存のページをいじくりまわすだけでも勉強になるかと思います。

プログラミング

あんまり好きじゃないですけど最初はやっぱりC言語からなのかなぁという気がします。
最初はCの絵本や新版 明解C言語 入門編なんかを半年くらい挫折を繰り返したり
プログラミングの宝箱 アルゴリズムとデータ構造 第2版でちゃんとアルゴリズムを学んだり
AIZU ONLINE JUDGEのVolume100のものを一通りやったりとある程度できるようになるまで頑張りました。
今は3分動画でマスターする初心者向けプログラミング学習サイト - ドットインストールがあって
通信添削もしてくれるそうですからプログラミング学習については困らなそうですね。

JavaScript/jQuery

軽く知っていると実装に幅が出て捗ります。
ガッツリ習得してなくても何とかなっているけど基本くらいは知っておきたいですね。
プロになるためのJavaScript入門が最近出て、書評とか見る限り良さげだったので読むと良さそうです。
ガチでやるならJavaScript 第6版とJavaScriptリファレンス 第6版は役立ちそうです。

正規表現

もしかしたらJavaScriptより先にこっちを習得しておくべきかもしれません。
めんどくさいテキスト処理などを一発で片付けることができたりとかなり捗ります。
習うより慣れろで覚えてしまったのでどの書籍が参考になるとかは挙げられないのですが頑張って覚えましょう！

PHP

全く知らないのでは実務で困ることが多いと思うので概要をプロになるためのWeb技術入門と
プロになるための PHPプログラミング入門で抑えておけばなんとかなるはずです。
プログラミング自体が初めてでなければめっちゃ便利なC言語の上位版みたいな感じなので大丈夫だと思います。
あとはPHP: PHP マニュアル - Manualが詳しいので関数とかをマニュアル見れば使いこなせるかと思います。
フレームワークはCakePHPがよく使われているますが、入社時に習得してなくても
CakePHP Cookbookというドキュメントがあるので入社後に習得していけば大丈夫です。

SQL

PHPに合わせてSQLも学ぶ必要がありますが、入社時にはデータベースの概要がわかっていれば十分でしょう。
マンガでわかるデータベースがわかりやすかったです。[書評]マンガでわかるデータベース | DevAchieve
SQL ゼロからはじめるデータベース操作も読んでガリガリSQL書けるようになっていると凄いです。
[書評]SQL ゼロからはじめるデータベース操作 | DevAchieve

バージョン管理システム

SubversionかGitのどちらかを知っていて軽くでも使ってみていると実務で使う際に理解が早いかと思います。
個人で使うならGitだと思うので入門gitとか読んで実際に使ってみると良いんじゃないでしょうか？
GitならGitHubでソースコードを公開できるので何か作って公開しておくとヘッドハンティングとか来るかも？

資格

資格を持っていなくても基本情報レベルの知識はあった方が良いんじゃないかと思います。
僕は基本情報は入社直後の春に取りました。基本情報技術者試験を受験するまでに使った参考書3冊
基本情報が取れればちょっと勉強すれば応用情報も取れると最近聞いて来春受験に向けて勉強してます。
資格を取ったら祝い金とか貰えるとこなら頑張るのもいいと思います。

おわりに

こう見るとWebプログラマーに求められる技術は結構幅広いですね。
広く深い知識を習得していかなければなりませんので日々勉強が必要です。
万能選手でなければならないけどもスペシャリストでもなくてはならない、
それでいて一番の下手くそでもいたい。(情熱プログラマー)
こんな師匠がいて導いてくれていたらと思い、記事を書いてみました。
僕のWeb系の師匠になってくれる人を探しています！

[PHP]年末年始に働きたくないPHPerのためのタイマー予約機能の実装

もう仕事納めをして16連休を謳歌している@wada811です。
皆さん年末年始をいかがお過ごしの予定でしょうか？
え？クリスマスや年越し・新年の対応のために仕事しているんです？
そんな仕事はタイマー仕込んでさっさと年末年始をまったり過ごしましょう！

DateTimeクラスやDateInterval::formatを使っていて
PHP5.3以上でないと動かないのでideone.comなどでは動作が確認できないので
codepad.viper-7.comで確認してください。

<?php
/**
 * タイマー処理用判定クラス
 */
class Timer {

   /**
    * タイマー処理: 指定の日時からはtrueを返す
    * @param string $dateTime 'Y-m-d H:i:s'フォーマットな日時
    * @return boolean 判定結果
    */
   public static function fromDateTime($dateTime){
       $today = new DateTime();
       $limitDateTime = DateTime::createFromFormat('Y-m-d H:i:s', $dateTime, new DateTimeZone('Asia/Tokyo'));
       return $today->diff($limitDateTime)->format('%R') === '-';
   }

   /**
    * タイマー処理: 指定の日時まではtrueを返す
    * @param string $dateTime 'Y-m-d H:i:s'フォーマットな日時
    * @return boolean 判定結果
    */
   public static function toDateTime($dateTime){
       $today = new DateTime();
       $limitDateTime = DateTime::createFromFormat('Y-m-d H:i:s', $dateTime, new DateTimeZone('Asia/Tokyo'));
       return $today->diff($limitDateTime)->format('%R') === '+';
   }

}

使い方は簡単！Timerクラスを require するなどしたら後は日時を渡して呼び出すだけ！

if(Timer::toDateTime('2012-12-25 23:59:59')){
    // クリスマスまでの処理
}
if(Timer::fromDateTime('2013-01-01 00:00:00')){
    // 来年からの処理
}

DateTime::diffに渡される日時が同じである場合は'+'を返すので
Timer::toDateTimeは境界を含みますが、Timer::fromDateTimeは境界を含みません。
まぁ1秒だけだから細かいことは気にしなくても大丈夫だと思いますので
普通に切りの良い時間をそれぞれ指定してもいいかと思います。

[CSS]等幅フォントにするためのおすすめのfont-family指定

ゴシック体のオススメのfont-family指定はわかったので、今度はソースコードなどの表示に使えるものを。

使用するフォントはCSS Font Stackでmonospaceで掲載されているものです。
ConsolasはMicrosoftが開発したプログラミング用フォントです。
Courier NewはほとんどのWindows, Macにインストールされているフォントです。

Menlo と Mac の等幅フォント – terkel.jp
Courier、Courier New、Consolas – terkel.jp
上記のページを参考に設定するなら以下のようになるかと思います。

pre, code, var, samp, kbd, .mono {
    font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
    font-size: 14px;
    line-height: 1.2;
}

見慣れない要素名があるので解説をします。詳しくはリンク先の仕様を読んでください。
code: コンピュータのコードを表示するためのタグです。
var: 変数のインスタンスやプログラムの引数を表すためのタグです。
samp: プログラムやスクリプトからの出力のサンプルを表すためのタグです。
kbd: ユーザーが入力するテキストを示すためのタグです。

【決定版】僕の考えた最強のfont-family指定

本記事は200弱ツイート、500弱のはてブと16000PVを2日で稼ぎ出した(稼いだからってどうもないけど)
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！ | DevAchieveの反省会会場となります。
未読の方は先に読んでおくと話がわかりやすいかと思います。指定だけ見たい人はこちら。

[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！の狙い

タイトルではてブや検索流入を狙う

本当は教えたくないSEO！アクセス数が20倍になったブログタイトル32文字の法則 | Chrome Lifeで
解説されている通り、はてブは全角32文字までに入れないとトランケートされてしまうので短めに。
はてブユーザーが大好きな最強とか入れておいて、読んでブクマしてもらえるようにしておきます。
「font-family 指定 オススメ」というキーワードを埋め込んでおけば今後の検索流入も見込めます。

上記の狙いが上手くハマった結果です。もはや「font-family 指定」でググると2位に出てきます。
ちなみに「font-family 指定」でググって出てきた下記のサイトを参考にしているのでそんなに外れてないはず。
font-familyなに指定する？ | Tips Note
資料：日本のコーダーのfont-family指定 | ウェビンブログ
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ
いまさら聞けないCSS font-familyのまとめ: 小粋空間
CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn | DAICHIFIVE blog

適当にぶっこんでおくと訂正してもらえるメソッド

フォントに詳しくないからある程度調べてそれっぽいこと書いておいたら後は
はてブユーザーが何か指摘してくれると信じてました。

Exactly(その通りでございます)

line-height の値には単位なしが良いとされる理由 - lucky bag
line-height の値には単位なしが良いとされる理由を知らなかったので勉強になりました。

コレは知りませんでした。
僕の中では三点リーダは...のイメージなので問題ないんですがそうでないデザインの時は気をつけまます。

これなんかは普通にググってもわからない情報ですよね。上手くメソッドが実行されていて嬉しいです。
しかしWindows XP以前の人たちはメイリオ指定できなかった場合は
MS Pゴシックしかない気がするのですが、他に何を指定すればいいのでしょうか？
フォント云々の前にパソコンを買い換えて欲しいところです。

その他のフォント指定おすすめなど

id:sunoho
最初はHelvetica(Neue)で安定だと思います

id:Shir
Arialより前にHelveticaを・・・

id:gmsniper2
メイリオより前にヒラギノを表記するんだったらHelvetica(Arial)と組み合わせた方がいいと思うんだよなあ

id:n-yuji
ダメダメ。5年前ならコレでよかったかもしれんが。ヒラギノはProNにすべし、Osakaは入れる必要なし。

id:masamune61
参考に。ヒラギノは馬鹿にできません。

id:solidstatesociety
ヒラギノを甘く見すぎ

id:gnta
Verdanaは横幅を取り過ぎるし極小サイズでの視認性に優れてるだけでフォントフェイスも美しくないのでBodyフォントには向かない。

id:Falky
最近はfont-familyの指定順序だけで正しくクロスブラウザ和欧混植できるの？つい1年くらい前まではWebkit以外グダグダで、表示ブチ壊れるUAもあったはず。@font-face unicode-rangeめんどくさいですね。

などなど様々な意見がありました。
ヒラギノで批判されているようですが、いまいち意図がつかめないところが残念な所です。
ヒラギノはProNにすべしと言われたので調べてみるとProNでは略字体が正しい字になるようです。
Leopardの新フォント、ヒラギノ角ゴ ProNとは | トブ iPhone
iOS 6におけるブラウザの表示フォントについて（Hiragino Kaku Gothic ProとProNでも違いが...）｜Blog｜Skyward Design
iOSでもヒラギノはProNが良さそうですのでProNで行く事にしましょう。
あと、Mac OS 9以前のために一応残しておいたけどやっぱりOsakaはいらないみたいです。
@font-face unicode-rangeまで踏み込むのはよくわからないし面倒臭すぎるのでこのへんでお茶を濁します。

最強のfont-family指定(旧)

CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fontsや
Bootstrapを参考にして最強のfont-family指定決定版を作りました。

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: normal;
}

個人的にはこのブログで見る分にはVerdanaが幅広で英数字が読みやすく感じるのですが
他のサイトで使う用と考えてHelvetica系列に先を譲りました。
これで決定版を名乗ってもいいだろう。何かあったらまたご指摘下さい。

追記(2012/12/29 18:00)

萌えないごみの日: 【CSS】font-familyを指定するな。ユーザー選択に任せよ。
ユーザーの選択の尊重のためにfont-familyを指定するなという意見もいただきましたが、
Windows 7のフォント設定がデフォルトのままのIE9(ClearType有効)でこの有様です。
一部のフォントにこだわりのあるユーザーがブラウザ設定で自分好みのフォントで見れるようにするのために
大多数のフォントが設定できることも知らないユーザーにコレを見せろというのは受け入れることができません。
上記のページで言われている和文フォントと欧文フォントの不揃いを気にするならば
和文フォントのみの指定が良いかと思います。
確認用にこちらにfont sample pageを作りました。

font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', sans-serif;

メイリオがVerdanaっぽくて、ヒラギノ角ゴがHelveticaっぽくなっているので
少し違う印象を与えるのが微妙かもしれませんが、
和文フォントのみで指定するなら不揃いもなくていいかもしれませんね。

追記(2013/01/12 18:00)

上記のサイトでコメントを通して色々話しあった結果、和欧混植は不揃いが生じるので
和文フォントのみ指定、または総称ファミリを指定するのが良いという結論に至りました。
IEで総称ファミリ指定で上記のスクリーンショットのような中国語フォントが使用されてしまうバグがあるので
和文フォントを指定するのが安牌だろうと思います。
和文フォントを指定してもユーザーの環境によって表示が変わり得るのであくまで安牌ですが…。

結論: 最強のfont-family指定

body {
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: normal;
}

または

body {
    font-family: Sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: normal;
}

ちなみにOperaとかいう最強伝説を持つブラウザには和文フォントは日本語で指定しないといけないので注意。

[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！

追記記事を書きました

【決定版】僕の考えた最強のfont-family指定 | DevAchieve

元記事ここから

俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！
指定方法は下にあるぞ！

新規でサイトを制作するのに基本のフォント指定を持っていなかったので
色々調べたり、このブログのフォント指定を変更してみたりしたら
実は Arial より Verdana のほうが見やすいことがわかってしまった。
さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために
作ったフォントだ！Verdana - Wikipedia

フォント周りのオススメの指定

追記記事により良い指定を載せたのでこちらは掲載終了しました。

font-family めっちゃ長い！

何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。
だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。

余談だけどfont-size(文字サイズ)とline-height(行の高さ)はTwitterの指定と同じなので個人的に読みやすい。

どうしてこのfont-familyの指定なのか

英数字は欧文フォントに任せたほうが綺麗なので和文フォントよりも前に書く。

Verdana は Arial に比べて小さい文字でも潰れにくくて綺麗だったので
このブログも Arial から Verdana に乗り換えた。

日本語表記のフォントやスペースを含むフォントはクォーテーションで囲む

invalid property valueと怒られたくなかったらシングルクォートかダブルクォートで囲むんだ！

Macユーザーのためにヒラギノを先に書く

Macにはメイリオがデフォルトでは入っていないのだけど
Office for Mac を入れるとメイリオがインストールされるので
メイリオが先に書いてあるとメイリオで表示されてしまう。

Windowsでヒラギノが入っているとアンチエイリアスがかからなくて汚くなるらしいけど
gdippとかのアンチエイリアスをかけてくれるソフトを入れていると綺麗に表示されるらしいので
Windowsでヒラギノをインストールする人はそういうソフトを使ってもらうことにする。

俺はWindowsにヒラギノが入っていないので関係ない。
むしろOffice for MacをMacに入れているのでヒラギノが先がいい。メイリオ嫌いじゃないけど。

和文フォントの日本語表記と英語表記について

ブラウザの種類やバージョンによっては日本語表記と英語表記のどちらかしか解釈できない奴がいる。
メジャーなブラウザの最新版なら日本語表記だけでも大丈夫らしいけど一応両方書く。

sans-serifとは

総称ファミリと呼ばれるもので、フォントのカテゴリみたいなもの。
指定したフォントがひとつもインストールされていなかった場合は
環境依存のフォント指定になってしまうのでせめてカテゴリ指定しておくためのもの。
どんなのがあるかや、フォントがどのように分類されるかは総称ファミリ名分類のフォント名一覧が見やすい。

フォントについてもっと詳しく知りたいならウェブにおけるフォントのヒントが良い。

CSSでのフォントの指定方法についてもっと詳しく知りたければW3C CSS Fontsのページを読もう。

おまけ

たまに見るCSSのfontプロパティの指定。|| は順不同。[]? は中身を省略可。忘れるのでメモ。

font: [font-style || font-variant || font-weight]? font-size[/line-height]? font-family;

IEで2番目以降のGETパラメータが実体参照になり値が取得できないバグ

クリックでサンプルページへ
IE6/7/8/9 で確認しているバグ。IE10 で直っているかは知らない。
URL に GET パラメータを付けた際に2番目以降は & でつなぐわけだけど、
どうやら IE では実体参照と勘違いしてしまうみたいで変換されてしまうので
その GET 値が取得できなくなってしまう。PHP やってる時に出会ったわかりにくいバグだ。
IE 限定で起こるバグで GET の名前の部分が実体参照と被り、かつ それが2番目以降にあるというレアな限定バグ。
全て試したわけではないがHTML4 で使える文字実体参照の
「HTML2.0 以降で使える文字実体参照」は変換されてしまうようだ。

対処法は名前を変えるか、2番目以降に書かないか、だ。
うーん、ひどい。

[競技プログラミング][PHP][第2回早稲田大学プログラミングコンテスト]団子とうさぎ

A - 団子とうさぎ

時間制限 : 2sec / スタック制限 : 64MB / メモリ制限 : 64MB

古来より，月にはうさぎが住んでおり，餅をついていると言われている．
我々が月を見上げるとき，うさぎ達もまた地球を見ているのである．

問題

今，うさぎたちの目の前には N 段に積まれた団子がある．
今回の積み方では，上から x 段目には，x2 個の団子がある．
これらの団子を M 匹のうさぎたちで平等に分けることを考えよう．
あなたの仕事は，団子を平等に分けた時，いくつ団子が余るかを求めるプログラムを書くことである．

入力

入力は以下の形式で標準入力から与えられる．

N　M

団子の段数を表す整数 N(1≦N≦100) とうさぎの数 M(1≦M≦100)が半角スペース区切りで与えられる．

出力

団子を平等に分けた時，余る団子の数を標準出力に 1 行で出力せよ．
なお、最後には改行を出力せよ．

出典

A: 団子とうさぎ - 第2回早稲田大学プログラミングコンテスト | AtCoder

回答

AtCoder/wupc_01.php at master · wada811/AtCoder · GitHub

<?php
fscanf(STDIN, "%d %d", $n, $rabbit);
$count = 0;
for($i = 1; $i <= $n; $i++){
    $count += pow($i, 2);
}
echo $count % $rabbit . PHP_EOL;
?>

$count を求めるもっと上手い方法あったかな？

[競技プログラミング][PHP][東京大学プログラミングコンテスト2012]2012年12月02日

A - 2012年12月02日

時間制限 : 2sec / スタック制限 : 64MB / メモリ制限 : 256MB

問題

今日は2012年12月02日であって， 月日を構成する数字1202を並べ替えると西暦を表す数字2012になる．
このような日を良い日という事にする． 与えられた日付が良い日かどうかを答えよ．

入力

yyyy/mm/dd という形の文字列が一行で与えられる．
yyyyは，4桁の整数，mmは先頭が0でありうる2桁の整数，ddは先頭が0でありうる2桁の整数である．

yyyyが西暦，mmが月，ddが日を表している．

出力

与えられた日付けが良い日であるならば，yes 良い日でないならば，no を一行に出力せよ．

制約

1000≤yyyy≤9999
与えられる日付は，正しい日付を表している．

出典

A: 2012年12月02日 - 東京大学プログラミングコンテスト2012 | AtCoder

回答

AtCoder/utpc2012_01.php at master · wada811/AtCoder · GitHub

<?php
$date = trim(fgets(STDIN));
$date1 = array($date[0], $date[1], $date[2], $date[3]);
$date2 = array($date[5], $date[6], $date[8], $date[9]);
echo array_count_values($date1) == array_count_values($date2) ? 'yes' : 'no';
echo PHP_EOL;
?>

あんまり良い名前が思いつかなかったから適当な変数名。使い捨てのコード。ひどい。

[競技プログラミング][PHP][DigitalArts プログラミングコンテスト2012]Password

B - Password

時間制限 : 2sec / スタック制限 : 64MB / メモリ制限 : 64MB

問題文

セキュリティに興味がある高橋君は、デジタルアーツ株式会社に就職したい青年です。
そこで、高橋君は自分が運営するサービスであるAtCoderのセキュリティについて見なおしてみることにしました。

現在AtCoderのシステムでは、パスワードは 1 文字以上 20 文字以下の英小文字のみとしています。
そして、文字列 s に対してハッシュ値( hash(s) )を求める以下の式があり、
パスワードと入力した文字列に対して、それぞれこの式で算出したハッシュ値が一致すると、
入力した文字列は正しいとみなします。

hash(s)=Num(c1)+Num(c2)+…+Num(cN)　(ci は文字列 s の i 番目の文字を意味する)

なお、上記の式の関数 Num() とは英小文字を数字に変換する関数で、
Num(a)=1, Num(b)=2, …., Num(z)=26 というように、
a から z に対して順に 1 から 26 までの数字を返します。

高橋君は、このシステムではパスワードと違う文字列でも
簡単にハッシュ値が一致してしまうことに気づきました。
例えば、文字列 abc のハッシュ値は、1+2+3=6 となりますが、
文字列 bbb のハッシュ値も 2+2+2=6 ですし、f も 6 になってしまいます。

高橋君は、現在使っているパスワードに対してどのような文字列が
正しいパスワードとして認識されてしまうか知りたいです。
正しいパスワード以外で条件を満たすものを 1 つ出力しなさい。
条件を満たすものが複数ある場合は、どの文字列を出力しても構いません。
もし条件を満たすパスワードが存在しない場合は NO と出力しなさい。
なお、AtCoderのシステムで入力できるパスワードは 1 文字以上 20 文字以下の英小文字のみなので、
答えとして出力する文字列もその条件をみたします。

入力

入力は以下の形式で標準入力から与えられる。

c1c2‥‥cN

入力には正しいパスワードを表す長さ N(1≦N≦20) の文字列が 1 行で与えられる。
正しいパスワードの i 番目の文字を表す ci は英小文字 (a-z) である。

出力

与えられた正しいパスワードを表す文字列と等しいハッシュ値になる英小文字 1 文字以上 20 文字以下の文字列を、
正しいパスワード以外のいずれか 1 つ出力せよ。
また、そのような文字列が存在しない場合は NO と出力せよ。
なお、出力は 1 行のみとし、最後には改行を出力せよ。

出典

B: Password - DigitalArts プログラミングコンテスト2012 | AtCoder

回答

AtCoder/digitalarts_2.php at master · wada811/AtCoder · GitHub

<?php
$password = trim(fgets(STDIN));
$ascii_a = ord('a') - 1;
$numbars = array();
for($i = 0, $end = strlen($password); $i < $end; $i++){
    $numbars[] = ord($password[$i]) - $ascii_a;
}

$sum = array_sum($numbars);
// special case
if($sum === 1 || $sum === 26 * 20){
    // 'a' or 'zzzzzzzzzzzzzzzzzzzz'
    echo 'NO' . PHP_EOL;
    exit();
}

$answers = array();
if(count($numbars) === 1){
    // 'b' - 'z'
    $answers[0] = $numbars[0] - 1;
    $answers[1] = 1;
}else{
    while($sum){
        $answers[] = min(26, $sum);
        $sum -= min(26, $sum);
    }
}
// ex. 'za' -> 'az'
while($answers == $numbars){
    shuffle($answers);
}

$another_password = '';
for($i = 0, $count = count($answers); $i < $count; $i++){
    $another_password .= chr($answers[$i] + $ascii_a);
}
echo $another_password . PHP_EOL;
?>

2行目でtrimし忘れて意図しない改行コードで答えが合わなくて泣きそうになった。
文字列を配列でアクセスできるので１文字ずつアスキーコード変換して配列に入れる。
答えが NO になる例外を弾き、１文字のパスワードとそうでないもので処理を分ける。
後は28行目に書いたようなやつのためにshuffleして入れ替えておく。コレで確実。
あとはアスキーコードを逆変換して出力！

[競技プログラミング][PHP][DigitalArts プログラミングコンテスト2012]C-Filter

A - C-Filter

時間制限 : 2sec / スタック制限 : 64MB / メモリ制限 : 64MB

問題文

セキュリティに興味がある高橋君は、デジタルアーツ株式会社に就職したい青年です。
彼は、面接で自分をアピールするために、
得意なプログラミングでフィルタリングソフト「C-Filter」を作ろうと考えています。
「C-Filter」は、与えられた文字列 s に、
あらかじめ登録しておいた「NGワード」と一致する文字列が存在する場合、
その文字列の長さと等しい数の *に置き換えて出力するソフトウェアです。
この文字列を置き換える処理をフィルタリングと呼びます。
「NGワード」とは、半角英小文字と*から構成されます。
*はすべての半角英小文字 1 文字と一致します。
例えば myonmyon は、NGワードmyo*myonと一致します。
ただし、NGワードは単語ごとに適用されるため、myo myon はNGワード myo*myonとは一致しません。
また、NGワードはある単語に対して完全に一致する必要があります。
例えば、abcdeは、NGワードabcやbcd、cdeに一致しません。

文字列 s と、NGワードが与えられるので、C-Filterの出力する文字列を答えてください。

入力

入力は以下の形式で標準入力から与えられる。

s
N
t1
:
:
tN

入力は N+2 行からなる。
1 行目には 1 文字以上 1,000 文字以下の文字列 s が与えられる。
s はフィルタリングする対象の文字列を半角スペースで区切って繋げた文字列である。
2 行目にはNGワードの個数を表す整数 N(0≦N≦50) が与えられる。
3 行目から N+2 行目までNGワードを表す文字列 ti(1≦i≦N)が与えられる。
文字列 ti は半角英小文字と * から構成される。
文字列 ti の長さは 1 文字以上、 20 文字以下である。
文字列 ti に含まれる * は、半角スペースを除くすべての半角英小文字 1 文字をフィルタリングの対象とします。

出力

入力された文字列 s をC-Filterでフィルタリングした結果を 1 行で出力せよ。
なお、最後には改行を出力せよ。

出典

A: C-Filter - DigitalArts プログラミングコンテスト2012 | AtCoder

回答

AtCoder/digitalarts_1.php at master · wada811/AtCoder · GitHub

<?php
$sentence = trim(fgets(STDIN));
fscanf(STDIN, "%d", $n);
$filters = array();
for($i = 0; $i < $n; $i++){
    $filters[] = '/^' . str_replace('*', '.', trim(fgets(STDIN))) . '$/';
}
$words = explode(' ', $sentence);
$censored = preg_replace_callback(
                $filters,
                create_function(
                    '$matches',
                    'return str_repeat("*", strlen($matches[0]));'
                ),
                $words
            );
echo implode(' ', $censored) . PHP_EOL;
?>

fgetsで１行取得。この際にtrimしておかないと思わぬ改行コードでハマる。
6行目で取得しつつ正規表現に入れ込む。 間の空白を置換しないようにするのが面倒なので空白で分割。 preg_replaceのe修飾子が PHP 5.5.0 で非推奨になったので
AtCoder の PHP のバージョンは 5.3.6だけど使わないでおく。
代わりにpreg_replace_callbackでうまいことやる。
第二引数のコールバック関数にマッチした文字の文字数だけstr_repeatで繰り返す。
後は文字列に直して出力！テクニカルな感じでカッコいい！