[B! Canvas] drupaのブックマーク

JavaScript を PNG に圧縮する | Yomotsu net

JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的にローカルにファイルとして存在しているものを使うそのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。

drupa 2015/05/12

リンク

CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB

HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。デモ今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript

drupa 2015/02/19

リンク

Web上で QR コードを読むページ(QRコードリーダー)を作成しました - 強火で進め

スマホ向けQRコードリーダー http://tsuyobi.heteml.net/html/tools/qr_code_reader/ アプリの開発中などに借りてきた端末に URL を送りたい時に短縮URLで送るのも面倒くさいので Web 上でQRコードを読めるページを作成しました。借りた端末だとQRコードリーダーをインストールしたり出来ないので必要に迫られて制作。使い方サイトにアクセスして、「ファイルアップロードのボタンを押す→QRコードをカメラで撮影」以上。あまり、解析の精度は高く無いのでなるべくQRコードだけが映るように撮影して下さい。 iPhone で撮影する時の Tips 最近の iPhone だとマクロ撮影がイマイチ上手く出来ないので撮影するものから離してピントを合わせる必要が有ります。しかし、その状態だとQRコードを上手く解析出来ないのでQRコードを大きく撮影する必要が

drupa 2015/01/04

リンク

フロントエンドの実装から見る第四十七回衆議院選挙　開票速報ページまとめ - 暮らしの技術

700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです．報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます．まとめ長いので先にまとめです．まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は　トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い．フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶

drupa 2014/12/15

リンク

Canvas Fingerprintingはクッキーより怖いのか技術的に調べてみた｜TechRacho by BPS株式会社

morimorihogeです。最近忙しくて遠征すらおぼつかない状態です。夏イベント資源足りるのかこれ。なんかはてブ界隈などでCanvas Fingerprintingの話題が出ていて、Cookieより怖い！とか、Adblockみたいに無効にする方法がないのにユーザトラッキングできて怖い！！といったアオリの記事がぽこぽこ出てきているようです。でも、ざっと調べた限りの日本語のどの記事を読んでも、具体的にどうやってユーザ個々のトラッキングができるようになるのか、技術的に解説されている記事が見つかりませんでした。というわけで、エンジニアとしてはここは一つキッチリ理解しておきたいと思い、調べた結果をまとめます。もし僕の読解がおかしくて変なことを言っている部分があれば、はてブやTwitter、コメント欄などで指摘して頂ければ更新していこうと思いますので、マサカリ上等です ;) Canvas F

drupa 2014/07/29

リンク

ブロックできないオンライントラッキングツールが人気サイトに浸透

プリンストン大学とルーヴェン・カトリック大学の研究者がまとめた論文「The Web never forgets: Persistent tracking mechanisms in the wild」によると、Canvas Fingerprinting技術を使ったオンライントラッキングツールがAlexaトップサイトに浸透している。同ツールが使われていると、ブラウザユーザーが追跡をブロックするのが非常に難しくなる。モダンブラウザがサポートするCanvas APIを通じてレンダリングされたイメージには端末ごとのわずかな違いが生じる。これをデバイスの指紋のように用いるテクニックを2012年にカリフォルニア大学サンディエゴ校の研究者が発表し、Canvas Fingerprinting(Canvasの指紋採取)と呼んだ。同技術を採用したオンライントラッキングツールは、ユーザーには見えないテキストを