この度、MdNさまから「現場のプロが教える HTML + CSS コーディングの最新常識」を共著で出させていただくことになりました。 尊敬するエンジニアやデザイナーである、小川 裕之さん、高梨 ぎんぺいさん、中江 亮さんとの共著で、株式会社まぼろしさまが企画してくれた、HTML + CSS コーディングのモダンなワークフローや技術について書かれた本です。 3/25 発売予定ですので、このブログの執筆時にはまだ買えませんが予約はできます。よかったら予約をよろしくお願いします！ 現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4 内容について この本は普通にコーディングはできるけど、今の新しい手法を追いきれていない人向け。コーディングを齧ったデザイナーさんなんかにもいいかもしれません。 この本では新し目の技術もそうですが、「アクセシビリティ」や「

前回の記事の続き。今回は主にライティング(照明)について。 今回からは新しい概念を学びつつも手を動かしていくということが重要になってきそうだということで、学んだことを反映したものを作った。教えて貰ったことを、自分の書き方でリライトした。 demo コード ※行列ライブラリはminMatrix.js(ライセンスフリー)を利用させていただいています。 まだしょぼしょぼな感じですけど、絶望に打ちひしがれていた最初のころと比べると進歩が目に見えてめでたい。 さて、前置きが長くなったけど早速今回の講座の咀嚼をしていく。 ※追記 "影" と表記していた箇所は、正しくは "陰" でした。 意味合いが全く異なりますので訂正いたします。 アニメーション まずはアニメーションについて。アニメーションは「事前準備」と「アニメーションフレーム」とを分けて考える。 まずは、レンダリング用の関数を作る。今回の講座でも

前回の記事の続き。 今回は、シェーダについて教わりました。今日はそこまで難しいとは感じなかったし、少しだけだけど手を動かしてものが作れたのが良かった。 シェーダをおさらい 専門用語が多すぎて厳しいので、一度シェーダはどういうものだったかを思い出してみる。 シェーダはちっちゃいコンピューターみたいなもので、WebGL ではそのコンピューターがデータをどのように処理するかを自分で書く必要がある。 そのコンピューターを使えるようにするには、書いたソースをコンパイルしてオブジェクトに変換する必要がある。 WebGL には、頂点シェーダとフラグメントシェーダの2種類があって、頂点シェーダはジオメトリパイプラインで使われ、フラグメントシェーダはフラグメントパイプラインで使われる。 WebGL ではこの2つが両方揃って初めて利用できるみたい。 "シェーダがデータをどのように処理するかを書く" と書いたけ

最近 WebGL の勉強を始めまして、doxas さんが主催している WebGL 勉強会に参加している。 WebGL、かなりややこしい感じなので、受講した日はその日の情報を咀嚼しようと思った。 （有料の講座ですが、こういうの書くのは講師の方に許可得てます。） 今日は WebGL の基本的な部分の話だった。 基本の部分で既に無事死亡している。 WebGL とは GPU に直接アクセスできるブラウザに組み込まれた API で、OpenGL というネイティブで動作するグラフィック API を、ブラウザから呼び出すパイプ的な存在。 直接 GPU を利用できるので、すっごい高速。ぬるぬるしてるのはそういうことなんですね。 ただ、ブラウザに組み込まれた API ということは、つまりブラウザ側の実装に依存しているというわけで、ブラウザ間の差異や、そもそも OS レベルで無効化されてることもあるそう。 ま

最近の Web サイトにおいてアニメーションによるコンテンツの演出が多く見られるようになりました。 ただ、重い。 手軽に導入できるようになった反面、描画コストにも意識を向ける必要があります。 最近一般的になってきたのは 「CSS 3 によるアニメーションは GPU を使うので、CPU への負荷が少なく良さがある、なるべく CSS で処理して、タイミングを JS でコントロールしましょう」 みたいなこと。 こちらの記事などはとても有名です。 スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） それに伴って、最近知ったのが、「アニメーションによる再描画の領域を可視化できる」ということ。 これは Chrome の dev ツールで出来る。（