2014年、買ってよかったWeb制作・プログラミング等の本


前回のエントリーに書いたとおり、今月の後半にインフルエンザにかかってしまい、とっくに治ってはいるのですが、ずっと頭がジンジンするような違和感を感じています(“違和感を感じる”という言葉は日本語としてあってるのだろうか?)。

まあそれはともかく気づくと2014年も残す所後一日。というわけで、今年も買ってよかった技術書(Web制作・プログラミング関連の本メイン)を10冊に絞って紹介します。紹介順は購入した順番です。2014年に買ってよかった本といっときながら、昨年購入したけど昨年時点では読み終えてなかった本も含みます。
2013年版は下記。
2013年、買ってよかったWeb制作・プログラミング等の本 | while(isプログラマ)

jQuery最高の教科書

jQuery最高の教科書
jQuery最高の教科書
昨年の12月に購入した本。jQueryを使った様々なテクニックが載っており、ウェブ制作を作るにあたってちょっとこった動きをしたいという場合はとても参考になる。
ただ、『教科書』というと実践的なことはあまり書いてないものの、様々な視点から対象の物事について書かれているというイメージが自分にはあるのだけれども、この本の半分は実践的なことが書かれており、さらにjQueryについてもUIの制作手法についてばかりだったのが残念ではある。具体的にいうと、jQueryによるAjaxの手法について知りたかったのだけれども、Ajaxについてはほとんど書かれていなかった。さらに、本をめくるたびにカバーがキュッキュキュッキュと鳴るのが少しうるさい。

JavaScriptの新しい教科書

JavaScriptの新しい教科書 基礎から覚える、深く理解できる。
JavaScriptの新しい教科書 基礎から覚える、深く理解できる。
昨年の12月に購入した本。JavaScriptについて汎用的に書かれており、こちらは確かに教科書のようだと感じた。ただ、『はじめに』でこれからJavaScriptを学びはじめる人を対象にしていると書いてあるけれども、これから学び始める人には少しむずかしいかもしれない。特に、今までプログログラミングを勉強してこなかった人には。
最初に述べたように汎用的で基本文法やイベントリスナー、DOMの操作はもちろん、jQueryやCoffeeScript,TypeScript等のAltJS、フレームワークのBackbone.jsやセキュリティについてまで書かれてあり、JavaScriptでステップアップしたいけど、オライリーのサイ本やパーフェクトJavaScriptは少しハードルが高いと思っている人にオススメしたい。特に最後のイディオム集は便利で、こんな書き方ができるのかと驚かされる。

HTML5テクニックバイブル

HTML5 テクニックバイブル
HTML5 テクニックバイブル
1月に購入した本。ここのブログでも何度か紹介しており、このブログ経由では最も多く売れた本でもあります(といっても5冊だけです)。広義のHTML5(CSSも含む)について、いろんな最新のテクニックを網羅している本です。こんなことができるのか! と目からうろこのテクニックがいくつも収録されていて、驚愕でした。今もこのブログを書きながらパラパラめくっているのですが、「コレ試そうと思って試してなかった」というものがいくつかあるのに気づきました。とにかくボリュームがすごく、この量でこの値段はすごいと思います。その分、文字は小さいですが、そんなことは大した問題ではないです。しいていうなら、どのブラウザで動くのかが書かれていなかったのは少し残念かもしれない。

現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール

現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール
現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール
2月に購入した本。最新のWeb制作手法についてUIやCSSの書き方や、管理・運用手法など、様々な視点から書かれています。Web制作に関わっている人には持っていて損はないと思う。Web制作を行ううえで便利なツールにもいろいろ書かれており、これを読んで実行すればかなり効率できるではないかと思う(まず、お前がやれと言われそうですが・・・。みなさんは読むだけで満足しないようにしましょう)。

HTML5デザイン

HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック
HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック
3月に購入した本。様々なWeb制作のテクニックが書かれており、あのUIやアニメーションはこうやると作ることができるのか! と思えるようなテクニックがいくつか書かれている。
ただ、『仕事のネタ帳』とあるけど、中身は結構高度です。それどころか、しょっぱなのテクニックが『マウスからパーティクルが飛び出すアニメーション』と、いったいどんな人が仕事として使えるネタなんだと思うテクニックもあります。

オブジェクト指向JavaScriptの原則

オブジェクト指向JavaScriptの原則
オブジェクト指向JavaScriptの原則
7月に購入した本。JavaScriptでオブジェクト指向プログラミングをしようと思うのであれば読んでおきたい本。ECMAScript5を前提にかかれているので、ECMAScript5の勉強にもなる。JavaScriptという言語は他のプログラミング言語と比べると独特なようにも思うけれども、この本を読めばだいぶその動きを理解できるのではないかと思う。

フロントエンドエンジニア養成読本

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)
フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)
7月に購入した本。読んでみて、想像以上にフロントエンドエンジニアの世界は奥が深いと思いました。自分はフロントエンドエンジニアだと思ってたけど、まだまだなんだろうなと・・・。テスト手法やWeb componentsやECMAScript6など、まだまだ分かってないことがあるんだなということを実感しました。

CSS設計の教科書

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
9月に購入した本。CSSのモダンな書き方について書かれている本です。CSSにオブジェクト指向をとりいれるという手法が最近の書き方なようで(OOCSSというよう)、SMACCSやBRMなど、様々なCSSの設計アイデアについて書かいてあります。正直、3年前に欲しいと思いました。3年前にあるウェブサイトのほとんどのCSSを書いたのですが、この本を読んであの書き方がどれだけひどかったのかよく分かりました。クラスをできるだけ書かないように、隣接セレクタや子セレクタを使いまくってたりしてたんですよね。さらに、他の箇所に影響を受けないように、一つのセレクタに5階層分書いていたり・・・。今までも修正したいと思っていたのですが、この本を読んでより修正したいと思うようになりました。

モダンWeb

モダンWeb ―新しいWebプラットフォームの基盤技術
モダンWeb ―新しいWebプラットフォームの基盤技術
9月に購入した本。もともと、原書は2013年4月に発売されたということもあって、流れの早いWeb業界のモダンってもはやモダンじゃないんじゃ・・・と思ったけど、まったくもってそんなことはなかった。むしろ、全体的に近未来な内容のようにも思います。実際、一種類のブラウザでしか動かないテクニックも書いてありますしね。後、この本を読むとそろそろCSSのFlexboxやGrid Layoutの手法についてちゃんと勉強したほうがいいような気がしてきました。

現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3

現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3
現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3
10月に購入した本。最近のWebデザインの手法についてさまざまな視点から書かれています。自分は違うけど、Webデザイナの人は読んでおいて損はないんじゃないかと思います。ただ、自分みたいにプログラマ寄りでさらにMacではなくWindowsを使っているような人間はターゲットにしていなさそうなので、あまりお得感はないかも? それでも、最新のWebデザイン手法を知りたいという場合にはかなり勉強になるので、オススメです。今までに紹介してきた本を読んでもよく書いてあったのだけれども、最近のWebではアニメーションが重要になっているのだなということがよく分かります。自分ももう少し、CSSやSVGでのアニメーション手法を勉強していこうと思いました。

以上、オススメの10冊でした。もちろん、他にもいろいろ買ったのですが、あまりに多くなるのもなんなので10冊にしぼりました。一応、その他に今年買ってすでに読み終えた技術書を下記に列挙しておきます。
UIデザインの教科書 マルチデバイス時代のサイト設計-アーキテクチャからUXまで
web creators特別号 HTML5完全読本―実践テクニックとWebデザインの最新動向 (インプレスムック)
演習で学ぶWebサイト・Webアプリケーション制作入門
GitHub実践入門 ~Pull Requestによる開発の変革 (WEB+DB PRESS plus)
WordPressユーザーのためのPHP入門 はじめから、ていねいに。
フロントエンド開発徹底攻略 (WEB+DB PRESS plus)
こうやってみてみると、今年もいろいろ読みました。
この中だと、『演習で学ぶWebサイト・Webアプリケーション制作入門』はあまりオススメしないです。どうも大学で使われている教科書なようですが、微妙に情報が古いうえに、コードの書き方も古いような気がします(それ以前に、なぜそんな書き方をするのか分からないというのも)。
『GitHub実践入門』と『WordPressユーザーのためのPHP入門』は良書だとは思うのですが、この本を読んだうえで行動にうつすことがなかったので入れませんでした。本が悪いわけではなく、自分の行動力の無さが悪いです。その他の本は、今回あげた10冊の本にあげた本と似たような内容なので外しました。良書ではあるので、オススメはします。

インフルエンザになりました


久々に普通の日記です。

インフルエンザで先週の土曜日から倒れてました。月曜日になって体温は下がったものの、現在もまだ病み上がりで頭がクラクラしています。

事の始まりは金曜日の昼ごろ。昨日にジムに行っていないというのに、やけに足にダルさを感じました(倦怠感)。ただ、ダルさは感じながらも、疲れてるという感じはせず、あまり気にしないで仕事を続けることに。といっても金曜日は特別やることがなく、だからといってダルいので仕事がないか上司に尋ねるのも億劫だったので、前からやろうと思っていたこと(もちろん、仕事に関すること)をずっとやっていました。そうして17時過ぎ、火曜日頃からずっとマスクをして咳も止まらない様子だった上司が早めに帰社。ここ数日はずっと早退していたが、金曜日は少し体調がマシになったのか、遅めの早退(この言葉の使い方はどうなんだと言われそうだが)。自分も特にすることがなくなったので、普段より少し早めに会社をでた。確か、18時すぎだったはずだ。

もちろん、足はずっとダルい状態が続いていた。じゃあ、そのまま家に帰ったのか。と思うかもしれないが、実はそんなことはなく、「ジムで運動や筋トレしたらリフレッシュになって案外よくなるかも」と思ってそのままジムへ。ちなみに自分は、だいたい月・水・金にジムに行くことにしている(もちろんそれ以外の日に行くことはあるし、実際先週は月・水は行かずに火曜日に行った)。さて、さっそく普段どおりマシントレーニングをやろうとしたものの、中には普段の負荷量ではなかなかトレーニングできないマシンがあったの、少し負荷(重さ)を下げてトレーニングすること。合間合間にバイクマシンにも乗り、テレビで妖怪ウォッチスペシャルを見ていたりした。

ジムについて一時間後、普段だいたい3セット分のトレーニングをやるが、どうも疲れてきたので2セットでやめて帰ることに。着替えて熱めの温度でシャワーを浴びたが、なんだ寒かったのを覚えている。その後ジムに出て駅まで歩いている最中、かなり徒労感があった。ジムに行ったのはどう考えても逆効果だったなと思いながらも、「帰ったら寝るか」程度にしか考えていなかった。

電車では最初からは座ることができず。やけにつかれていて、立つことすら辛い状況だった。さらには、睡魔まで襲ってきたので危うく立ちながら寝る所だった。幸い、途中の駅で座っていた人が降りたのでそこに座ることに。そのまま寝たのだけど、降車駅についたら立ち上がるのがしんどかったのを覚えている。

帰ってから母に、「昼から足がダルい」と言うと、やけに驚かれ、そして不安がられた。どうやら、インフルエンザの特徴らしい。でも、インフルエンザならもうちょっとしんどいだろと思った自分は、インフルエンザではないと思ったのだけれども、熱を測ると38.2度。最近の自分は、高熱かもしれないと思って計ってみると36度後半とたいしたことない熱という結果のことが多かったのでこれは驚きました。確かにダルかったけど、まさかこんなに高熱だったとは。今まで、こんなに高熱があったらもうちょっとしんどかったような気がするのですが。

というわけで翌日の朝、内科に行ってきました。歩いて5分以内の場所にも内科はあるのですが、正直あまり好きじゃないので、原付きバイクでもう少し離れた内科に行くことに。なお、この時には足にダルさはほとんど感じていなかったです。内科につくと問診票を書き、体温計を渡されたので熱を測ることに。が、この体温計がやけに通知音が鳴るのが遅い。うちにある体温計も3分~5分ほど待たされるけど、それよりさらに遅い。聞き漏らしたか? と思って、再度測り直すもの、なかなか音が鳴らない。と思っていたら、受付の人がやってきて、「たまに鳴らないことがあるんです」と。体温計を外してみると、38.5度だったので、それを問診票に書いて渡した。その後、他の人と共同の待合室ではなく、『点滴室』と書かれた部屋に入れられる。いわゆる、隔離ですね。15分ほどして呼ばれ、いつからどういう症状かを話してインフルエンザ検査をするため、鼻に紐状のものを入れられる。再度、点滴室に入って10分後、結果が出たようで再度呼ばれた。

結果は、『陰性』。確か、5年ぐらい前もインフルエンザ検査を受けると陰性だったんですよね・・・。で、インフルエンザ用の薬(多分、タミフル)を飲むとだいぶよくなったという。インフルエンザ検査って陽性がでるとほぼ確実にインフルエンザらしいんですが、陰性がでてもインフルエンザの可能性って高くないですかね・・・。発症して早い内だとインフルエンザでも陰性になる可能性が高いそうなんですが、なんとかならないもんかなぁ。アンチウイルスソフトだって偽陰性率を日々下げようと努力してるわけだし(また違うけど)。

風邪という診断で、ツムラ麻黄湯エキス顆粒とカロナール錠200という薬を処方してもらった。ツムラ麻黄湯エキス顆粒は3食の食前、カロナール錠のほうは38度以上の発熱の時に飲むようにとのことだった。このカロナール錠というのがすごい効き目で、飲んで寝ているとやけに汗をかき、一時は36.7度まで熱が下がった。ただ、またしばらくすると熱があがってきた。

内科の先生によると、日曜になっても熱が下がらないようであれば、休日応急の診療所にいくようにとのことだった。で、日曜の朝、熱を計ってみると37.9度だった。微妙に下がってはいるものの、まだまだ高いといえるし、体調も相変わらずだ。というわけで、教えてもらった休日応急診療所に行くことに。自分は宝塚市に住んでるのですが、宝塚市では市役所の横でやっていました(参考:休日・救急診療 | 宝塚市医師会)。こんな場所があるなんて初めて知りました。

待合室の人数はいるにはいるのですが、だいたい想定内。ただ、どうもスタッフの人たちがのんびりしているような気がしました。まあ、日曜にやってくれてるだけありがたいですが。診療所について50分後にようやく体温計を渡されて熱を測ることに。測ると体温は37.3度。あれ? 微熱じゃん・・・。もし、うちで測ってこの温度だったら来なかったぞ。そうして10分後、名前を呼ばれていつからどういう症状かを話した。ただ、熱が37.3度だったこともあり、やっぱりインフルエンザじゃなくてただの風邪なのかと思い始めていた。どうも先生もそう思っていたらしく、インフルエンザ検査を受ける前も「どうする? 一応、受けてみる?」とインフルエンザではないだろうと思っている様子。ただ、自分としてもここまで来たし、もともとそのつもりだったので、受けることに。土曜日の先生とくらべてやけに奥までいれられたうえに、やけに長い時間いれられました。これが辛い。偽陰性もそうだけど、この検査方法もどうにかならないものか。だいたい、インフルエンザは空気感染するような症状なのだから、口から息を吐いてその息から検査ということはできないもんなのだろうか。

結果は、『陽性』。A型のインフルエンザです。思わず、「えっ?」と言ってしまったような気がします。それだけ告げられると、隣の部屋で待つようにいわれ、しばらくすると薬剤師さんがやってきて薬を持ってきた。一つは土曜も処方してもらったカロナール錠200。今度は毎食後に飲むようにとのことだ。もう一つはイナビル。こっちは吸入型の薬で、一回吸うだけで数日間効き目が持続するらしい。今ってタミフルじゃないんですね(参考:インフルエンザ特効薬「イナビル」がすごいらしい – NAVER まとめ)。だいたい、インフルエンザというものは肺で感染・増殖するものですし、吸入型のほうが確かに直接ウイルスを退治しにいけるんでしょうね。でも、そうならやっぱり検査のほうももっとなんとかできないものかと思ってしまう・・・。

インフルエンザと分かったため、帰ってから休みなのに連絡していいものか迷ったけれども、上司の携帯電話に連絡して、インフルエンザという旨と明日休むということを伝える。

で、次の日の月曜日にはすでに平熱を下回っていました。ただ、病み上がりでやけに頭がクラクラするのが未だに続いています。なんだか、今までの病み上がりとくらべてかなり症状が悪い気がするのだけれども、いっつもこんなにひどかっただろうか・・・。そもそも、子どもの時は病み上がりってあっただろうか。熱が下がったら普通に学校に行って、自宅療養なんてしてなかったような気がするのだけれども(多分、覚えてないだけ)。いったいいつまでこの頭のクラクラは続くのだろう・・・。

実は、母からずっと予防接種受けろと言われてたんですよね・・・。受けない結果がこの有り様です。来年からは受けるようにしたいと思います。

自動印刷など、IEの印刷制御を行うScriptXについて調べてみた


業務でイントラサイトのページを自動的に印刷する必要があったので調べてみると、MeadCo’s ScriptXというIEで使えるよさげなActiveXコントロールを見つけたのでいろいろ試してみた。有料版もあるようだけど、無料で用紙の方向(縦か横)、ヘッダとフッタ、マージンの指定、さらにダイアログを出さない印刷もできるのでかなり有用に使える。歴史あるツールらしく、調べてみたら結構古いサイトばかりヒットした。ただ、ActiveXコントロールってIE10以降や64ビットの端末では動かないイメージがあるので、古いサイトばかり引っかかるということは最新のIEやWindowsでは動かないんじゃ・・・と心配していたものの、あっさり動いた。同梱していたヘルプHTMLによると、Windows2000以上、IE6以上で動作するよう(英語で書いてあるのでちゃんとは読めていない)。こんなすごい便利なツールがあるのに今まで知らなかった。

参考:IEの印刷設定をActiveXコントロールとJavascriptで行う方法 – 星屋工作室ブログ
参考:ブラウザで印刷時のヘッダ・用紙の向き・用紙マージンを操る
参考:ScriptXでWebページ印刷設定 | ブログ | ソフトウェア開発なら福岡市のくじらシステム開発│Web人事考課システム│情報共有システム

使う前にまずダウンロードしてくる必要があります。公式サイトのDownloadページ右側の『Click to Download』というボタンをクリックすると『ScriptXClientKit.msi』というインストーラファイルをダウンロードできるので、そのファイルをダブルクリックしてインストール。多分、Cドライブの『Program Files』フォルダ(もしくは『Program Files (x86)』フォルダ)に『MeadCo ScriptX Resource Kit』というフォルダができるので、その下の『redist』フォルダ内の『smsx.cab』が印刷制御に使うActiveXコントロールです(他はよく分かりません。ScriptX.msiは再インストール用で、cleansx.exeは昔のScriptXで使われていたファイルのアンインストール用のファイルっぽい)

次に、印刷するHTMLファイルを作成し、その中に下記のように記述してScriptXを読み込むobjectタグを追加します。

調べてみるとどこもcodebase属性のパスはいろいろ調べてみると、ほとんどのサイトでは絶対パスで書かれてあるようだけど相対パスでもOKなよう。今回はHTMLファイルと同じ階層に置くことに。

印刷制御の指定は下記のような感じになります。

printing.Printの第一引数は印刷ダイアログを出すかどうかの指定。いろいろ調べてみるとtrueの場合はださないと書いてあるサイトがいくつかあったのだけど、trueだとダイアログを出すが正しいはず(昔は逆だったのだろうか?)。第二引数の指定もあるようですが、よく分かってません。多分、フレームがあるHTMLについての指定だと思います(参考:MeadCo’s ScriptX:Print)。また、『factory.printing.Preview();』と指定することにより、印刷プレビューを表示することもできます。

ヘッダとフッタで使える特殊記号は下記の通りです。

  • &w:印刷するページのタイトル
  • &u:印刷するページのアドレス
  • &d:現在の日付。コントロールパネルの地域設定で変わるようで、日本だと/で区切った日付になるはず
  • &D:現在の日付。コントロールパネルの地域設定で変わるようで、日本だと○年○月○日となる
  • &t:現在の時刻。コントロールパネルの地域設定で変わるようで、日本だと:で区切った時刻表記
  • &T:現在の時刻。:で区切った時間。つまり、日本だと&tと同じ
  • &p:現在のページ番号
  • &P:総ページ数
  • &&:アンパサンド(&)

また、ヘッダやフッタ中に&bが一つあると、&bを境に左側の文字列は左寄せ、右側の文字列は右寄せとなる。&bが二つあると、一つ目の左側の文字列は右寄せ、&bに挟まれてる文字列は中央寄せ、二つ目の右側の文字列は右寄せとなる。

サンプル用のページはこちら

最初にIEで開くと下記のようにインストールを促すダイアログが表示されると思うので、インストールボタンを押します(その後、ユーザーアカウント制御のダイアログがでたら『はい』をクリック)。
インストール

そうすると、ScriptXを使わない場合、印刷プレビューは下記のように表示されていましたが、
ScriptXを使わない場合
ScriptXを使うと下記のようになりました。
scriptx

なお、factory.printing.Printメソッドの第一引数をfalseにしているのに印刷ダイアログが表示されるということがあると思います(ちなみに、そのダイアログで『キャンセル』をクリックするとなぜかJavaScriptエラーになる)。これは、[ツール]の[インターネットオプション]の[セキュリティ]の[信頼済みサイト]に対象ページのドメインを追加することにより、ダイアログがでなくなります(参考:ScriptXで印刷ダイアログが表示されないようにしたい)。インターネットに一般公開するわけではなく、イントラネットで必要だったなので、この設定作業はたいした問題になりません。こういうのがあって本当によかったです。

そもそもこういうのって、CSSでできてくれたら一番ありがたいんですよね。今回のサンプルページでも指定しているpage-break-inside(その要素内の改ページを避ける指定。今回はセルの途中で改ページが起こらないように指定している)というプロパティは印刷専用のプロパティなわけだし、なんで印刷の向きやマージンを指定できるプロパティがないのかと(一応、あるにはあるっぽい:size-スタイルシートリファレンス)。ヘッダやフッタの指定もJavaScriptで指定できたらいいのに。

jQueryのisメソッドのセレクタ指定でhover擬似クラスを使う


jQueryにはhover擬似クラスは対応してないはずなので、isメソッドでも使えないだろうと思って使ってみたら、使えました。

あれ? でも前にやった時には使えなかったような・・・、と思ってjQueryのバージョンをいろいろ変えてみて試してみると、1.4.3からis(‘:hover’)という指定ができるようになったようです。1.4.2以前だと、『Syntax error, unrecognized expression: hover』というエラーが表示されました。結構前からできたんですね。ただ、調べても1.4.3からできるようになったと書かれてるサイトがないのですが。

例えば、下記のように、setIntervalを用いて3秒ごとにあるブロック要素が左右に動くという指定をし、さらに当該要素にマウスが乗っている場合は動かないようにする場合は、『if(!($moveDiv.is(‘:hover’)))』で動かなくなります。

さて、ところで最初に『jQueryにはhover擬似クラスは対応してないはず』と書き、その後にisメソッド内だと対応していると書きましたが、よくよく考えたら試してないので下記のようなコードで試してみました。

mouseenterはその要素にマウスが入ったら、つまりhover状態になったら実行するイベントです。なので、mouseenterのイベントが発動した時には確実にカーソルが要素上に乗っている状態なので、hover擬似クラスが対応していたら背景が赤くなるはずです。

普通に赤くなりました。実行サンプル:jQueryのhover擬似クラス

うーん。なんで自分はできないと思いこんでたんだ・・・(まあ、こんな使い方することはめったにないとは思いますが)。