Case: Tweet For a Read 大手出版社のペンギン・グループはブラジルで、人々の“読書離れ”を食い止めることができるという「ツイートするしおり」を開発しました。 インターネットが普及し、ネットサーフィンやSNSが日々の生活の一部となり、人々の読書離れは顕著なものになってきています。ブラジルでも読書時間や読書量の減少は深刻な問題の一つとして取り上げられているといいます。 せっかく本を手にして読み始めたとしても、ついついネットに勤しんでしまい、本を読んでいたことさえ忘れ、本をそのまま置き去りにしてしまう人も多いのではないでしょうか？ そんなインサイトに着目してペンギン・グループが考案したのが、本を読んでいたことを思い出させてくれ、再び本と向き合わせてくれる「ツイートするしおり」です。 一見普通のしおりですが、光センサー、タイマー、ナノチップが組み込まれていて、しおりをはさんで本

Webアプリケーションを開発する際にはテキストエディタやIDEを使うのが一般的です。しかし開発してWebブラウザに表示を切り替えて再読み込みして…というのは手間がかかるものです。 そこでWebアプリケーションをWebブラウザ上で開発してしまおうというのがChrome Dev Editorです。JavaScriptだけでなくDartを使った開発にも対応したエディタになります。 Chrome Dev Editorの使い方 こちらがメイン画面です。Chrome Dev EditorはChromeアプリとしてインストールされます。 最初にプロジェクトを作成します。 エディタはハイライトがついたもので使いやすいです。 内部サーバ機能付きです。 GitやChrome Web Storeへのデプロイ機能があります。 Web Starter KitやPolymerをベースに生成することもできます。 Chr

CSS3を使えば簡易的なアニメーションや回転もサポートするなど、より高度な表現が自由にできるようになります。とは言え、タイミングをずらしたりするのをすべてスタイルシートで行うのは大変です。 そこでJavaScriptを使ってCSS3を出力しようと言うライブラリがAgile Css3 Engineになります。アニメーション系に強いJavaScriptライブラリです。 Agile Css3 Engineの使い方 Agile Css3 Engineはクロスプラットフォームに対応し、デスクトップからスマートフォンまで幅広く動作します。またキーフレームベースのアニメーションもサポートしています。Agile Css3 Engineを使えばCSS3を使った（CanvasやSVG、WebGLは使っていません！）アニメーション処理が手軽に実装できそうです。 Agile Css3 EngineはJavaScr

TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard