JavaScript製顔認識ライブラリを紹介します。 試してみたところ想像以上に精度が高かったので驚きました。横顔や傾けた顔の認識は難しようですが、正面の精度がすごい。 auduno/clmtrackr デモは画像の顔認識トラッキング（Tracking in image）ビデオの顔認識トラッキング（Tracking in video）認識顔に別の顔を乗せてマスキング（Face masking）認識した顔のデフォルメ（Face deformation）の4つがあります。 デフォルメとマスキングが特に面白いのでお試しあれ。 ちなみにおっぱいを顔として認識してもらおうとしたら怒られました。

かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。 なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。 昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。 そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。 チート

無料で学べるドットインストール 無料でプログラミングの基礎を簡単に動画で学習できるドットインストールというサイトをご存知でしょうか。こちらのサイトではHTMLやCSSといったWEBページを作るための基礎知識やWEBシステムやWEBページのデザインをするためのプログラミング言語の解説が幅広く網羅されているサイトだ。 初心者でなくても、新しい言語を気軽に学べるようになっており、WEB技術の学習に対する敷居を大きく下げてくれている。今日はこれからWEBページを作りたいという方やWEBディレクターをやっているが作り方を実はよく知らないという方が最低限押さえておきたいレッスンをピックアップする。 HTML これが書けなきゃ始まらない。HTMLは全く難しいものではありません。整形した文書をWordで作ったことがある方は多いと思うが、HTMLはインターネットに整形した文書を公開するための言語だ。 WEB

ユーザーがページ表示に待てるのは2秒までと言われている。WEBサイトパフォーマンス最適化の話は多数上がっており、画像サイズやJavaScript・CSSの最適化、HTML上の外部リソースの読み込み順序、CDNの利用、DNSルックアップを減らす、HTTPリクエストの数を減らす、コンポーネントを圧縮するなどなど対応し始めたらキリがない。 実際の案件でしっかり最適化を行えているWEB製作者の方は意外に少ないのではないだろうか。今回は最適化のコトハジメとしてまず手軽に誰でも行える画像最適化に使えるツールを挙げてみたいと思う。 ローカルアプリケーション ImageOptim（Mac向け） ドラッグアンドドロップだけでJPEGやPNGの余計なメタ情報を削ってサイズダウンしてくれるアプリ。オフラインでがっと使えるのがうれしいマストツールだ。 ImageOptim — make websites and

HTMLコーディングの次世代標準機能を備えるエディタ 先日紹介したAdobe Edge Tools & Servicesのエディタ担当Adobe Edge Codeを紹介します。対応OSはWindowsとMac OS Xで現在プレビュー版で無償で使うことができる。 先行して公開されているオープンソースプロジェクトBracketsをコアに採用しており、革新的な機能が備わっている。次世代エディタの標準となりそうな機能の解説を盛りだくさんでみていこう。 尚、ショートカットはMacベースで説明します。Winの方は適宜CmdをCtrlに読み替えてください。 HTMLファイル上から各タグのCSSを直接オープン これは感動的過ぎる。HTMLファイル内のスタイルを編集したいタグにカーソルを合わせ、Cmd + Eを叩くと、なんと直下にCSSの定義が呼び出されて表示される。奇跡だ。 なぜこの機能を今まで他のエ

Flash界最強ライブラリの一角 jQuery animateよりも圧倒的パフォーマンス。Flashの最強アニメーションライブラリTweenMax。JavaScript版があるのはご存知でしょうか。 TimlineMax/Lite TweenMax/Liteの4つのライブラリ群の総称でGSAP JSというパッケージ構成です。※要ライセンス注意（後述） まずはその圧倒的パフォーマンスを体感してください。プルダウンから主要ライブラリを選んで、STARTを押すと右下のfpsの数値が変わります。 GreenSock Animation Speed Test 豊富なアニメーション機能 GSAP JSの主要な機能として下記の物が挙げられます。パララックスなどのインタラクティブなサイトを作る上でもとてもすごく重宝しそうです。 ベジェアニメーション 繰り返し 逆再生 時間指定 一時停止 フレームラベル ゆ

さようなら、InternetExplorer8 2012年も後3ヶ月を切りました。今年6月に出たアナウンスの予定で行くと来年jQueryは初のメジャーバージョンアップを迎えます。 jQuery2.0の主な機能等はまだ特にアナウンスされていませんが、注目はなんといってもIE8以下をサポート対象から外すという点です。 HTML5の時代が本格的に到来 これまでjQueryがWEB開発の世界にもたらしたメリットは計り知れません。WEBサイトを作っている方でお世話になったことの無い方はほとんどいないでしょう。 jQueryがIE8以下のサポートを切るということは、jQuery2.0のリリースと共にHTML5が標準として使われるようになるまで秒読み段階に入ると考えてもいいかもしれません。 2013年、IE8以下にどのように対応するかが問われる IE対応なんてやってられない 近年モバイルデバイスの普及に

簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア

頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。 早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加 Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge

JavaScriptの書籍はjQueryやサンプル中心のチップス本などを含めると、多数出ており、これから勉強したい人にとってはどれから読めばいいか迷うところだと思います。 今日はここ数年で出た書籍の中で初級者から脱中級者になるまでに読みたい書籍を、この順番で読めばステップアップできるという内容で紹介したいと思います。 STEP1. 初心者へのおすすめはダントツでこれ一択。 初心者向けの内容としてはこれがダントツでおすすめです。内容が易しく丁寧な上にサポートサイトで書籍の内容を動画で説明してくれています。 Amazon.co.jp： よくわかるJavaScriptの教科書: たにぐち まこと: 本 サポートサイトはこちら STEP2. 全体を把握するには十分なボリューム。脱初級者向けにはこの2冊。 2冊とも初級者にとっては少し厳しい内容になっていますが、この2冊が理解できれば後は作りまくる