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


今年も後1日で終わりです。いろいろあったような気がするけど、そうでもなかったような年でした。

ちょっとだけ自分の話をすると、ブログの更新頻度が下がったのは、あることを成し遂げようとして、そちらに時間を割いたからなのですが、結局途中で挫折しました(まあ、挫折した後も更新頻度あがらなかったわけですが……)。

仕事のほうはというと、就職して初めて出張しました。飛行機(格安航空)で東京や北海道まで行きました。その出張することになったあるプロジェクトで、初めてLinuxとシェルスクリプトに携わりました。大変だったけど、面白かったです(その時は、ですが)。

というわけで、今年も買ってよかった技術書(Web制作・プログラミング関連の本メイン)を10冊に絞って紹介します。紹介順は購入した順番です。2015年に買ってよかった本といっときながら、昨年購入したけど昨年時点では読み終えてなかった本も含みます。
過去のエントリーは下記。
2013年、買ってよかったWeb制作・プログラミング等の本 | while(isプログラマ)
2014年、買ってよかったWeb制作・プログラミング等の本 | while(isプログラマ)

プロとして恥ずかしくない 新・WEBデザインの大原則

プロとして恥ずかしくない 新・WEBデザインの大原則
プロとして恥ずかしくない 新・WEBデザインの大原則
昨年の12月に購入した本。WEBデザインとあるけど、中身は配色やユーザビリティやアクセシビリティ、Sass、運用・分析手法など、Web制作(フロントエンド側)全般について書かれた本。
Webフォントとして利用できる日本語フォントについてもいくつか紹介しており、使ってみたいと思った(まだ使ってない……)。

Webエンジニアの教科書

Webエンジニアの教科書
Webエンジニアの教科書
3月に購入した本。Ruby on RailsやPHPでのサーバ言語、NoSQL、データの可視化や環境構築まで、Web技術全般について幅広く書かれた本。ただ、教科書とあると初心者向けなイメージがあるけど、少なくとも初心者向けではない。ある程度フロントエンドやサーバサイドに携わったことがある人じゃないと少しむずかしいんじゃないかと思った(少なくとも、SQLは分かってないと難しいと思う)。
自分はまだこの本のレベルに達していないのだけど、これぐらいのことを分かっておきたいとは思った。

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4
現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4
3月に購入した本。『知らないと困るWebデザインの新ルール』シリーズ4つ目。最近のHTMLとCSSのコーディング手法について書かれた本。AltJSだとかCSSプリプロセッサだとか、覚えたら便利なんだろうけど、面倒そうなうえに、直接修正してしまったら後から修正が困難と思っていて敬遠しているのだけども、Emmetという短縮記法はそういう問題もなく、すごい便利だと思った。

コーディングWebアクセシビリティ – WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
コーディングWebアクセシビリティ – WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
3月に購入した本。Webアクセシビリティについての具体的な書き方について。今までアクセシビリティについては意識したことはなかったのだけど、この本を読んで意識してコードを書いていきたいと思った。

ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁 オブジェクト指向からシングルページアプリケーションまで

ブレイクスルーJavaScript  フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで
ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで
5月に購入した本。フロントエンドエンジニアとしてステップアップしたいと思ったら読んだほうがいいと思った本。JavaScriptのオブジェクト指向、UI・インタラクティブ表現、グラフィック表現、Ajax・API連携、シングルページアプリケーションについて網羅してある。jQueryの$.Deferredの勉強にもなった。

これからの「標準」を学ぶマルチデバイス対応サイト構築

これからの「標準」を学ぶ マルチデバイス対応サイト構築 (Web Designing BOOKS)
これからの「標準」を学ぶ マルチデバイス対応サイト構築 (Web Designing BOOKS)
6月に購入した本。名前のとおり、パソコンやスマホやタブレットなど、様々なデバイスに対応したサイト制作について書かれた本。レスポンシブデザインはもちろん、画像の最適化やWebページの高速化まで。
Webページ最適化はなるほどと思うところも確かにあったのだけど、CSSのファーストビューの箇所のみインライン化するというのはさすがにやりすぎじゃないかと思った。修正がかなり大変になりそう。

SQL実践入門 高速でわかりやすいクエリの書き方

SQL実践入門──高速でわかりやすいクエリの書き方 (WEB+DB PRESS plus)
SQL実践入門──高速でわかりやすいクエリの書き方 (WEB+DB PRESS plus)
8月に購入した本。今年、うちの会社の技術に関して、かなりの広範囲を担当していた上司が退職し、自分はデータベースを引き継ぐことになったので読んでみた。正直、SQLは基本的なselect文が分かれば後はパズル的な感じと思っていたし、実際そういう箇所も多いのだけど、ウィンドウ関数すら自分にとっては目からウロコだった。コレ知ってると、ウィンドウ関数が使えないMySQLは使いたくなくなります。
他にもデータベースの更新処理が非同期など、初めて知ることが多くあったので、自分はまだまだデータベースについて精通していないことを実感した。もっと勉強していきたいです。

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック HTML文法解析から機械学習まで まだ、Webデータを手で集めていますか?

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック
JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック
10月に購入した本。Webスクレイピングとありますが、スクレイピングしたデータを用いた形態素解析やベイジアンフィルタによる分類、文字認識やチャートの作成と、かなり広範囲に書かれておりJavaScript(ほとんどはNode.js)でここまでできるのかと驚きました。本当に、いろいろな手法が書かれており、自分もいろいろ試してみたいと思いました。
今回紹介する本の中で、最も買ってよかったと思った本です。

図解HTML5&CSS3 最新版

今すぐ使えるかんたんmini 図解 HTML5&CSS3[最新版]
今すぐ使えるかんたんmini 図解 HTML5&CSS3[最新版]
正直、1000円程度の本を買う必要があって買っただけで、さほど内容については期待してなかったのですが、薄い本ながらもHTML5とCSS3について広範囲に書かれており、HTML5にどういうものがあるか振り返るのにいいと思いました。
よくよく考えたら、今年購入した本でWeb Componentsについて書かれてる本はこれだけかもしれない。

新米探偵、データ分析に挑む

新米探偵、データ分析に挑む
新米探偵、データ分析に挑む
11月に電子書籍版を購入。とある弁当屋の統計技師(データサイエンティスト) ―データ分析のはじめかた―の著者による、最新の統計(?)小説です。
平均や中央値などの統計の基本的なことから、回帰分析や因子分析、テキストマイニングにまで幅広く、R Studioを用いた方法について書かれており、さらに小説形式なのでどういう時にどういう解析をすればいいのかも分かり、ためになった。
とはいっても、最近はR言語を全く触ってないんですけどね……。

以上、オススメの10冊でした。もちろん、他にもいろいろ買ったのですが、あまりに多くなるのもなんなので10冊にしぼりました。一応、その他に今年買ってすでに読み終えた技術書を下記に列挙しておきます。
Webエンジニアが知っておきたいインフラの基本 ~インフラの設計から構成、監視、チューニングまで~
Web API: The Good Parts
CSS3&jQueryで作る スマートフォンサイトUI図鑑 (WEB PROFESSIONAL)
Gitが、おもしろいほどわかる基本の使い方33〈バージョン管理、SourceTree、Bitbucket〉
頼られるWeb担当者になる! Googleウェブマスターツールの教科書
WEB+DB PRESS総集編[Vol.1~84] (WEB+DB PRESS plus)
ヘルシープログラマ ―プログラミングを楽しく続けるための健康Hack(これは技術書じゃないですが)
入社1年目からの「Web技術」がわかる本
プログラマ脳を鍛える数学パズル シンプルで高速なコードが書けるようになる70問

決して、良書ではないというわけではないです。どちらかというと、読んだものはいいものの、実践できていないという本がオススメ10冊から漏れました(特に、インフラ本とWeb API本とGit本)。
ただ、『入社1年目からの「Web技術」がわかる本』については、誤字脱字が多く、それが修正されない限りはオススメしません。
『WEB+DB PRESS総集編[Vol.1~84]』については、総集編だからという理由で外しました。オススメからは外しましたが、買って損はないと思います。

それにしても、こうやって振り返ってみると、昨年とくらべてもあまり読んでる本が代わり映えしていないような気がします。内容が大きく変わったかというと、そうでもないし、試せているかというと全くそんなこともないわけです。
正直いうと、現状、読んで満足してしまってる本も多いので、来年はもう少し読む数を減らして、実際にコードなどを試していく作業をもっと増やしていきたいと思います。

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冊の本にあげた本と似たような内容なので外しました。良書ではあるので、オススメはします。

3種類のPhotosynthまとめ


最近、わけあって(というより仕事で)、Photosynthについて調べてるので簡単にまとめてみます。本当は自分でアップロードしたものを載せてから記事にしようと思ったのですが、面倒なのでやめました。
Photosynth – Capture your world in 3D.

Photosynthというのは、Microsoftが開発したサービスで、複数の写真を縫い合わせたような3D空間が作れるというサービスです。読み方は、『フォトシンス』ではなく、『フォトシンセ』のようです(参考:Microsoft APPS 2012 No.1 – Windows Phone)。Photo(画像)とSynth(シンセサイザー)の単語をつなげたものと思うと、『フォトシンセ』と読めると思います。利用や閲覧には大概の場合、Silverlightが必要なので、基本、Windowsじゃないと見れないかもしれないです。

ところで、一概にPhotosynthといっても、大きくわけて三種類あります。ここでは仮に、第一世代、第二世代、第三世代として簡単に紹介していきます。

第一世代(original synths)

写真の重複部分を縫い合わせて3D空間を作り出すPhotosynth :教えて君.net

2008年、最も最初にリリースしたPhotosynth。様々な角度と場所で撮った写真を一つの空間内に納めるような技術となっています。上記のNASAが公開しているのが一番有名かも。

マウスを載せるとところどころで四角いフィルターのようなものが表示されマウスカーソルがポインター状になると思うので、その時にクリックすると拡大したり縮小したり角度が変わったりする。その他、右下の四角が2つ重なってるアイコン(右から2つ目)にマウスを載せると『3Dビュー』『頭上からの角度』『2Dビュー』『点群の3Dモデル』のそれぞれのモードに切り替えることができる。
第一世代
2Dビューにすると、写真をクリックするだけでは見れない方向の写真もあることが分かる。そういう場合は、2Dビューモードにして特定の写真を選択し、3Dビューモードに切り替えるとその写真を含んだ3Dビューが見れる。点群モードにすると、写真の特徴点を3Dモデルの点の集まりが見れる。ある意味、3Dビューモードより、3Dっぽいかもしれない。

投稿するには、投稿用ソフトのダウンロードが必要(Create your own Photosynths – Photosynth)。左記サイトの『Download Photosynth for synthing and publishing』の『Photosynth』部分のリンクがダウンロード用のリンクとなっている。そのソフトに写真をいれて『Synth』ボタンを押せば投稿できる。
第一世代
左の『Visibility』というのは、多分、検索に引っかかるかどうかということだと思います。『Public』が検索にひっかかり、『Unlisted』がひっかからない。ただし、Unlistedでも、直接URLを入力してアクセスすれば閲覧することができます。

第二世代(stitched panoramas)

無料で立体感のあるパノラマ画像を作成できるアプリ「Photosynth」 – GIGAZINE

2011年リリース。いわゆる、パノラマ写真を作ることができる。パノラマ写真といっても、横か縦というわけではなく、横も縦も360度とることができるため、全天球な写真も作ることが可能。

利用にはPC版(Microsoft Research Image Composite Editor (ICE))とアプリ版があり、アプリ版はWindows PhoneアプリとiOSアプリを提供している(Android版はなし)。

360°天球カメラのTHETAにも対応しており、THETAを使うと簡単に全天球のパノラマ写真を作ることが可能。
参考:PhotosynthでThetaを試す | 景観デザインを目指せ
不動産のサイトなんかでよく使われるようです。

ちなみに、この世代はSilverlightが入っていないiPhoneやiPadのSafariでも、HTML5のcanvasの機能とCSS3のtrans-formの機能を使ってみることができるようになっている。

第三世代(technical preview)

無料でストリートビュー風のスライドを作成できるようになった「Photosynth」 – GIGAZINE

asteroid explorer hayabusa2 rollout はやぶさ2機体公開 at sagamihara by nvs-live on photosynth

2013年12月リリース。複数の写真を動画のように見せる技術となっている。第三世代とひとくくりにいっても、この中に細かく『スピン』『パノラマ』『ウォール』『ウォーク』の4種類のモードがある。エキスパート撮影ガイドがあるので、それを見ると分かりやすいと思う(エキスパート撮影ガイド)。

投稿はブラウザを使って行う。第一世代が投稿するだけで投稿用のソフトをダウンロードしなければならなかったが、現在はHTML5が普及してきたためウェブで完結するようになってると思われる。

閲覧時にcキーを押すことにより、カメラモードになる。どういうものか説明しづらいのだけれども、ある1点から、撮影した写真一つ一つを3D状に配置したものを離散的に見ることができ、マウスホイールを使うことにより視点を近づけたり離れたりすることができる。こんな説明じゃよく分からないと思うので、試しに見てる最中にcキーを押してみることをお勧めする。

また、mキーを押すとマップモードになる。このキーを押すことにより、右上に一本の線が表示され、動画の動きの流れが分かる。マリオカート64においてレース中に画面右下に表示されるコース概要図のようなものといえば分かるかも(余計わからないか)。

HTML5のCanvasを使ったお絵かきツールまとめ


昔、お絵かき掲示板というものをよく閲覧していたのですが、最近はめっきり見なくなりました。今考えると結構すごい機能があったけど、FlashやJAVAアプレットだからiPadとかでは使えないんだよなぁ。なんて思っているとCanvasでお絵かきアプリ (全8回) – プログラミングならドットインストールというレッスンがあるのを見て、突然HTML5のCanvasで作ったお絵かき掲示板を作ってみたいと思うようになりました。

いや、でもそもそもすでにCanvasで作られたお絵描きツールはあるんじゃないかと思い、調べてみたらすでにいろいろある模様。以下、見つけたもののリスト。

イラストブック – 無料レンタルお絵かき掲示板
今回見つけたもののなかで最もお絵かき掲示板っぽかったもの。普通にChromeで見てみるとかなり高機能なFlashを使ったお絵かきツールになるのですが、ChromeのUserAgentをiPadに変更したらCanvasで作られたお絵かきツールを見ることができました。
Canvas Painter
描画の軌跡を記録できるのが特徴のお絵描きツール。線や四角や円がドラッグしてる最中にも描画できるというのは正直どうやっているのかよく分からない。ただ、投稿どころか画像に変換する機能すらなさそう。また、タッチパネル対応でもない様子。
なお、このサイトは下記記事で見つけました。
ASCII.jp:HTML5のCanvasで作る、Flash不要のお絵かきツール (1/5)|古籏一浩のJavaScriptラボ
rails3 + html5 canvasでお絵かき投稿サイトを作ろう! | KRAY Inc
Drawing
Canvasを使ったお絵かき掲示板を作るのには一番ためになりそうなサイト(Coffee Scriptはよく分からないけど)。投稿された画像をクリックするとCanvasに反映されるよう。ただこれもタッチパネルには対応してなさそう。
WingMemo: HTML5でお絵かきツールを作ってみた
お絵かき
透明度や背景透明の設定が面白い。ブラシの種類も多い。タッチパネルには対応してないよう
Canvasお絵描きアプリ – YoheiM.NET
なんとレイヤー機能つき。Canvasで作られたお絵描きツールをいろいろ探してみたけど、レイヤー機能をもってるのはこれしか見つからなかった。ただ、四角を描く時にドラッグ時に描画されない。タッチパネルには非対応のよう。
JavaScriptで比較的本気でお絵描きアプリを作ってみた | fladdict
JavaScriptで作ったお絵描き掲示板のソースを公開するよ | fladdict
JSPaint runs except IE
すごい高機能。色の選択が本格的。散布ブラシと指先は全くどうやってるのか思いつかない。ズーム機能まである。
オープンソースのHTML5お絵かきウィジェット「Literally Canvas」:phpspot開発日誌
About — Literally Canvas v0.3-rc2 documentation
基本的な機能のみをもったお絵描きウィジェットらしい。タッチパネル対応のよう。文字入力機能がある。上記のphpspotのページを見てみると関連エントリに似たようなエントリへのリンクがあった。
Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」:phpspot開発日誌
お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」:phpspot開発日誌
wPaint.jsがすごいよさそう。塗りつぶし機能もあるし、タッチパネルにも対応してる。

純粋なお絵かき掲示板機能をもったCanvasで作られたお絵描きツールは少なそうですが、canvasで作られたお絵描きツールはいろいろあるようです。
うーん。それにしても、jQueryプラグインがあるのか。実装するとしたら、そのプラグインを使ったうえで足りないところ(投稿機能など)は自分で追加していくという形をとるのが一番簡単かな。
いやでも、勉強用にいろいろやってみようかな。すぐに挫折しそうな気もするけど。

さて、いろいろCanvasで作られたお絵描きツールを見てきたけど、お絵かき掲示板の代表格の『しぃペインター』のほうがまだまだ高機能な印象です(参考:しぃペインターの使い方(しぃペインター講座))。
一部分のコピー機能を実装したCanvasのお絵描きツールというのはないのだろうか。

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


2013年も残す所後少し。というわけで、よそでもやっていそうな2013年に買ってよかった技術書(Web制作・プログラミング関連の本メイン)を10冊(+1)を紹介。紹介の順序は購入した順です。

Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ

Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)
Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)
今年の1月に買った本。毎年毎年、1月になると「今年こそはWebサービスを作る!」なんて思ってしまうので買ったような気がします(あいかわらず何も作ってないのですが)。
下準備、企画、設計、開発、プロモーションと運用についてそれぞれ章分けして書かれており、コレひと通りできるのであれば確かにそれなりのWebサービスが作れるだろうなとは思います。
ただ、いかんせん、サンプルがMACとPerkという自分には全く未知の分野だったので、理解するのに苦労しました(というより、多分ほとんど理解できてない)

フロントエンドエンジニアの教科書

フロントエンドエンジニアの教科書
フロントエンドエンジニアの教科書
2月に買った本。当時の自分の業務は、HTMLやCSSのコーダーや、プログラムを書くのもJavaScriptばかりだったので、買ってみました。
内容は、フロントエンドエンジニアがどういうものかということが一章で書かれており、その後にHTML5やCSS3、jQueryやスマートフォンサイト、さらにはWordPressサイト、レスポンシブウェブサイトのつくり方やWeb APIを使ったサイト、高速化手法まで幅広くかかれており、それでいて分かりやすく書かれています。特に、第3章のjQueryを用いたスライダーやライトボックス、パララックスサイトのアルゴリズムの説明とそのサンプルコードはありそうでなかったので、とくに勉強になります。
ネットで注文した後に、この書籍を書いたクロノドライブという会社のブログの、はてなブックマークコメントを見たのですが(はてなブックマーク – HTML/XHTML、CSSコーディング最安保障~クロノドライブ~)、それを見るとかなり悪い評判という印象を受けたので内容が心配したのですが、そんな心配が嘘なようにすごい良書でした。
まさに、『フロントエンドエンジニアの教科書』だと思います。個人的に、今回紹介する中では一番のオススメです。

コーディングを支える技術 ~成り立ちから学ぶプログラミング作法

コーディングを支える技術 ~成り立ちから学ぶプログラミング作法 (WEB+DB PRESS plus)
コーディングを支える技術 ~成り立ちから学ぶプログラミング作法 (WEB+DB PRESS plus)
4月に買ったプログラミングの歴史についての本。といったら語弊があるかもしれないけれども、自分はそのような印象を受けました。
具体的にいうと、関数や型やデータ構造などの概念がなぜ生まれたのかを書いている本です。
様々なプログラミング言語での記述サンプルが書かれており、いったい著者はどれだけのプログラミング言語を知っているのだろうと感嘆します。

HTTPの教科書

HTTPの教科書
HTTPの教科書
6月に買った本。正直、ネットワーク分野には疎い自分。HTTPについてもまだまだ分かってない部分があったので買ってみました。
またまた『教科書』とついている本だけあって、HTTPのことについて幅広く、分かりやすく書かれています。ステータスコードやHTTPヘッダーについての記述はもちろん、BASIC認証やSSLクライアント認証のような認証技術から、SPDYやHTTP2.0などの最新の次世代HTTPと言われるプロトコル、はてはWebへの攻撃技術まで幅広く書かれています。
特に個人的に面白かったのが、第9章の『HTTPに機能を追加するプロトコル』と第11章の『Webへの攻撃技術』について。見聞きしたことぐらいはある言葉が分かりやすく書かれており、ためになりました。攻撃技術なんて、自分は思っていた以上の種類が書かれており、会社で作成しているウェブサイトのチェックにつかえました。

プログラマの考え方がおもしろいほど身につく本 問題解決能力を鍛えよう!

プログラマの考え方がおもしろいほど身につく本 問題解決能力を鍛えよう!
プログラマの考え方がおもしろいほど身につく本 問題解決能力を鍛えよう!
7月に購入したプログラミングをする際の考え方についての本。
C++で書かれているのでC++の勉強にもいいかもしれません。
先頭再起と末尾再帰では先頭再起のほうがいいというのは、なるほど。と思った。けど、実際に業務で書いた再起は末尾再帰になってしまったという・・・。
演習問題がついてるので、その演習問題をやることによってさらに勉強になるのだろうけど、すみません。自分はやってません・・・。

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質
開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
7月に買ったJavaScriptの、主にオブジェクトについての本。
JavaScriptが「どのように」「なぜ」動作するのかということが書かれており、JavaScriptに関する疑問や注意事項について簡潔に書かれています。
JavaScriptを少し勉強した、初級者~中級者向けの本だと思います。自分はまだまだ初心者なのでついていくだけで大変でしたが、なんとなく内容をつかむことはできたと思います。
ただ、ここに書いてある内容どおり使いこなせるようになるのは、まだまだ先です・・・。

絶対わかる! TCP/IP超入門 改訂版

絶対わかる! TCP/IP超入門 改訂版 (日経BPムック)
絶対わかる! TCP/IP超入門 改訂版 (日経BPムック)
7月末に購入したTCP/IPだけでなく、ネットワークプロトコル全体について書かれた本。
ネットワークについては、大学時代に単位を落としてしまったぐらい実はよく分かってないのですが、この本でひと通りのことが書かれています。
ただ、今の自分にはまだまだ分からないことだらけということは否めません。
それにしても、こうやって見ると、7月はいろいろ買ってしまっている・・・。

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】
HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】
8月に購入したHTML5とCSS3についての本。
基本的なスタイリングから、レスポンシブウェブデザインやCSS3のアニメーション設定方法と、基本的な手法から最近流行りのWEB制作手法まで幅広く書かれています。
特に、HTML5のコンテンツモデルについては曖昧にしかよく分かってなかった自分にはためになりました。

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
10月に購入した、jQueryプラグインとTwitter Bootstrap(バージョンは2)についての本。
一応、コリス | サイト制作に関する最新の情報をご紹介というブログのRSSを購読してることもあって、ある程度最近のjQueryプラグインについては分かってるつもりではあったけれども、それでもここに書かれているjQueryプラグインは目からウロコだった。
特に、『jmpress』というプラグインに驚愕。でも、これはすごすぎて使いドコロが難しいような気はします。
ただ、個人的にはもう少し仕組みについても書いてあったらよかったです。

データサイエンティスト養成読本 [ビッグデータ時代のビジネスを支えるデータ分析力が身につく! ]

データサイエンティスト養成読本 [ビッグデータ時代のビジネスを支えるデータ分析力が身につく! ] (Software Design plus)
データサイエンティスト養成読本 [ビッグデータ時代のビジネスを支えるデータ分析力が身につく! ] (Software Design plus)
10月に購入した本。会社で急遽、統計に関する仕事をやることになったので購入しました。
データサイエンスに関する基本的なことが幅広く書かれている本です。データサイエンスについて全く理解してない自分には、『特集1 データ分析実践入門』が役にたちました。今でもRで分からないことがあればページを開くことがしばしば。
ただ、いろいろなことを細々と書かれてあるので、分かりにくい部分も多いです。

なお、同時期に下記の本も購入しました。
とある弁当屋の統計技師(データサイエンティスト) ―データ分析のはじめかた―
とある弁当屋の統計技師(データサイエンティスト) ―データ分析のはじめかた―
小説形式でデータサイエンス(主に回帰分析)について書かれて本です。
Rを用いた説明となってるので、Rの勉強にもなります。ちょうどRで重回帰分析についてやりたいところだったので、この本は個人的にかなり役にたちました。
箱ひげ図の見方や、カテゴリー変数、t値やP値の意味について全くもって理解できない(というより知らない)自分だったのですが、この本を読んでよく分かりました。

12月にもjQuery最高の教科書という本を購入したのですが、まだ読めてません。来年の似たようなエントリーを書くことがあれば入れます(入れれるような本であってほしいという願望ですが)。

こうやって見ると、買って読んだ本の割に、あまり成長できていない気が・・・。2014年は中途半端なインプットだけではなく、アウトプットにもいかしていきたいところです。