すべて読む | セキュリティセクション | セキュリティ | バグ | インターネット

関連ストーリー：
Fortify、Ajaxのセキュリティ問題に警鐘 2007年04月04日
niftyに偽装した悪意のあるサイトが登場 2007年01月03日
Netscape/Mozillaにローカルファイル読みとりの脆弱性 2002年05月01日

すべて読む | ITセクション | ビジネス | インターネット | Yahoo!

関連ストーリー：
Amazonが液晶ディスプレイメーカーLiquavistaを買収 2013年05月15日
海外のネットビジネスを模倣して立ち上げるビジネスモデル 2012年08月21日
Microsoftが大型タッチスクリーンの開発会社Perspective Pixelを買収 2012年07月12日
ブログは死にゆく技術か? 2007年11月17日

Advertise here via BSA

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl. Two.js aims to make the creation and animation of flat shapes easier and more concise.

Two.js has a built in animation loop. It is simple in nature and can be automated or paired with another animation library. Two.js features a Scalable Vector Graphics Interpreter. This means developers and designers alike can create SVG elements in commercial applications like Adobe Illustrator and bring them into your two.js scene.

Requirements: JavaScript Framework
Demo: http://jonobr1.github.io/two.js/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

すべて読む | ITセクション | メディア | インターネット

関連ストーリー：
「ネガティブなコメントは検閲する」ことはネット上での議論を推進できるか 2013年05月09日
ISP への Tor 遮断要請は毎日新聞の誤報か、現状は有識者会議報告書待ち 2013年04月25日
警察庁、ISP業界などに「匿名通信の遮断」を要請へ 2013年04月18日
海外でソフトイーサのVPNサービスが話題に 2013年03月15日

すべて読む | ITセクション | ソフトウェア | 海賊行為 | 著作権

関連ストーリー：
世界における海賊版ソフトウェア使用状況、悪化 2012年05月24日
和解後も違法コピーされたソフトウェアを使い続けた企業に、定価の2倍の損害賠償 2009年08月15日
違法コピーソフトの利用が発覚した石川県、約4,000万円の支払いで和解 2009年07月19日
「一太郎」などの海賊版販売で 7人逮捕 2005年12月16日

ネーミングとコンセプトが気に入ったのでご紹介。

Sandwich Bikesでは、自分で（それこそサンドイッチのように）組み立てることができる木製自転車を販売している。

自分で組み上げることにより商品に愛着を持って貰える、という狙いがあるらしい。たしかにプラモデル感覚で楽しそうだし、既成品を買うより大事に使ってもらえるだろう。

また友人や家族にプレゼントして、一緒に組み立てることでさらに仲良くなる、といった使い方も出来そうだ。

このコンセプトは自転車以外にも応用できそうですな。なかなか素敵だと思うのだがいかがだろうか。

Linux カーネルに権限昇格の脆弱性が見つかり、注意が呼びかけられている (CVE-2013-2094より) 。

perf_event_open システムコールを利用することで一般ユーザが root を取得できる。対象はカーネル 2.6.37 から 3.8.9 までだが、カーネル 2.6.37 未満であっても、ディストリビューションによっては最新カーネルからのバックポートによりこの脆弱性の対象となっているものがあり注意が必要だ。原因は、kernel/events/core.c 内の perf_swevent_init 関数で event_id を取得する際に、不適切なデータ型を利用 (全ての bit を適切にチェックせずに u64 型を int 型で受け取った) ことによるもの。

既にエクスプロイトコードが出回っており、実際に Redhat Linux や CentOS、Ubuntu で一般ユーザから root 昇格できることが確認されていることから、今後このコードを用いた攻撃が行われることが予測される。各ディストリビューションからは緊急の Update がリリースされ始めており、早い対応が必要となりそうだ。

すべて読む | Linuxセクション | Linux | セキュリティ | バグ

今までこのサイトでも何度かプロトタイプとコンテンツの話をしてきました。一見、まったく違う分野の話をしているように見えますが、この 2 つは密接な関係をもつ重要なキーワードです。それがなぜ繋がっているのかを解説するにも絶好の機会でした。しかし、40 分という短い講義の中では説明しきれなかったことが多々あるので、補足情報も含めて紹介していきます。

ツールやテクニックの変化では足りない

この講演で静止画のようなデザインカンプはコミュニケーションの負荷が高過ぎるという話をした 1 週間後にFireworks の開発中止ニュースが報じられました。これは、アドビ社が Fireworks を諦めたのではなく、Fireworks のような存在を今の Web ワークフローに適応させるには、別の形がふさわしいと判断した結果だと思います。こうした変化はグラフィックソフト関連だけではありません。

特にここ 1, 2 年のフロントエンド周りの動きは活発です。Sass で記述したり、モジュール形式で管理 しようというのは、その動きのほんの一部に過ぎません。Bootstrap のような汎用性の高い高機能 HTML/CSS フレームワークを使うのも手段ですが、Bower を経由して好きな部品を落として使うといった方法でも、素早くサイトを作れるようになりました。

いきなり黒い画面での開発はできないという方は Mixture のようなツールから始めてみるのも手段です。

今まで以上に早く効率的に設計していくためのツールは出そろってきました。
見た目そのままを再現できる保証もなく、結局コードで作らなければならないことを考えると、静止画カンプは非効率ですし、クライアントに間違った印象を与えます。HTML で早く作れることを体感してしまうと、カンプへの違和感はさらに増していきます。そこで、ブラウザ上でいきなりデザインしたほうが良いという声も高まってきました。ビジュアル要素の多くは CSS3 で補えますし、必要に応じてグラフィックを作るというアプローチです。

しかし、こうしたマークアップを基軸にしたデザインプロセスには 3 つの課題があります。

• マークアップをしている方がディレクターかプロジェクト管理していれば成り立つ
• ビジュアルは後回しになり、ビジュアルによるデザインの効果を適応させにくくなる
• 今までの作業工程から大きく変わるので、変化へのコストをどう担保するか見え難い

私自身、早期から HTML を作り始める人のひとりなので、ツールやテクニック自体に異論があるわけではありません。しかし、ワークフローの変化がなければ成立しませんし、今まで仕事をしていた人たちに対して「こう変わればこのようなメリットが生じる」という部分が十分に説明されていないまま、「こんな素晴らしいツールがあるから使いましょう」「これが未来だから皆さんがんばりましょう」では変化のための決定打にならないと思います。

コンテンツがあるからデザインできる

そこで、HTML から画面設計が始められる開発プロセスを実現するにはどうするかを考える必要があります。私の中では以下の 3 点を解決することで新しい Web ワークフローが見えてくると考えています。

プロセスにおける役割を明確にする

HTMLからはじめるインブラウザ・デザインも万能ではありません。強みはどこにあるのかを明確にすると同時に、弱みを補うのは何が良いのかも検討したいところ。 インブラウザ・デザインの強みである画面遷移の設計、使い勝手、マルチデバイスでの状態の検証に特化しても良いでしょう。

技術制約なしで考えられるデザインは別途先に進める

レイアウトやインタラクションは難しいですが、それ以外のデザイン要素は、いきなり HTML で始めるより、デザイナーが完全にコントロールできる環境でつくったほうが効果的という場合があります。ビジュアルが変わるだけで使いやすくなったと感じる場合もあるわけですから、無視できません。

コンテンツがなければ成立しないことを説得・整備をはじめる

意味のあるマークアップ。装飾ではなく引き立てるビジュアルを作ることになると、コンテンツの存在が必須になります。しかし、現実はマルチデバイス対応がされていないですし、既に良いコンテンツはあると思い込んで作りはじめていることがあります。コンテンツの見直し、再設計を行うことではじめてデザインできるはずです。

誰がどのようなスキルを持っているかは組織によって異なりますが、従来のようにデザインとマークアップは別々で行う作業ではなく、より密接な関係になっていきます。

コンテンツから始めることが出来ないのであれば、従来のような静止画カンプを作ろうが、インブラウザ・デザインで作ろうが結果は同じだと思います。

例えば「使っているCMS Premium Themes」と検索してみてください。

5,000 円前後でカスタマイズ製が高く、魅力的なデザインが数百・数千すぐに出てきます。その中の多くは、この記事を読んでいる皆さんでも見たことがないものがほとんどだと思います。デザイン要素も自由に変えることができるだけでなく、パッと見の良いスマートフォンサイトにも変換してくれます。見た目を優先して、コンテンツを後回し。そして、今流行しているデバイスに対応するだけであれば、これで十分なわけです。

どんどん作ることが効率化されていく中、Web プロフェッショナルに発注するという意味を、問い直さなければいけない時期にきています。ただ早く安く作るところには答えはないですし、今流行しているツールの真意も早く安くという部分以外にあると思います。

今までの『常識』に捕われたまま、ツールやテクニックを変えても、良い結果は生まれません。根本的なワークフローの見直しは必須ですし、そこを変えるこで今流行しているツールやテクニックがさらに活かせるようになるはずです。

すべて読む | ITセクション | 映画 | 任天堂 | 広告 | YouTube | ゲーム | IT | お金

関連ストーリー：
ロシア人クラッカー、uPlay に不正侵入、リリース前の Ubisoft「Far Cry 3」にアクセス 2013年04月12日
オンライン広告に我慢できるのは何秒まで？ 2012年01月25日
ニコ動へのゲームプレイ動画投稿、「示談」で決着 2011年12月02日
動画共有サイトの「プレイ動画」で波紋 2011年05月12日
PS2 版「怒首領蜂大往生」ついに攻略される 2010年09月30日
角川グループ、YouTubeからの広告収入は月間1000万円超？ 2009年01月05日
YouTube、ユーザへの広告費配分を検討? 2007年01月28日

はは。

休日なので軽い話題で。

Bringin’ The Catsでは、テンションの高い音楽とともに猫画像を眺めることができる。

なかなか良いテンションなので、いざというときに使えるのかもしれない。

大画面でオフィスで流したらいい感じかもですな（でもないか）。

まぁ、今日はそんなところで。

なお、J-CASTニュースによる病院への取材時点では、院長から閉鎖という話は出ていないとのこと。

すべて読む | ITセクション | 変なモノ | 医療 | インターネット

関連ストーリー：
GeckoにてBLINKタグのサポート廃止が検討される 2013年04月09日
はてなブックマークがデザインをリニューアル、各所で話題に 2013年01月10日
Google、検索ページのデザインをまたリニューアル？ 2012年01月05日
改めて問う、marquee、blinkタグの意義 2008年11月24日
Mozillaはmarqueeタグをサポートすべきか、否か 2002年08月05日

すべて読む | ITセクション | Firefox | Mozilla | IT | プライバシ

関連ストーリー：
Firefox 22でのサードパーティーCookie仕様に米国の広告協会が文句を言う 2013年03月18日
Firefox 22はサードパーティーのCookieをデフォルトでブロック 2013年02月24日
Google、SafariのサードパーティCookie問題で2250万ドルの制裁金を支払う方向へ。 2012年07月12日
英国 Cookie 法、今週末より施行 2012年05月30日
知られざる Cookie の世界を詳らかにする調査 2012年04月19日
Safariで意図せずGoogleのCookieがセットされる問題、MSも斜め上から非難 2012年02月22日
EU、Cookie によるトラッキング時にはユーザーの同意を必須に 2011年03月10日

すべて読む | ITセクション | Google | マイクロソフト | IT | Chrome | 広告 | プライバシ | お金

関連ストーリー：
Google、MicrosoftのYouTubeアプリをストアから削除するように要求 2013年05月18日
Microsoft は Skype のメッセージを閲覧している 2013年05月16日
MicrosoftのWindows Phone用YouTubeアプリ、広告スキップ機能や動画のダウンロード機能を搭載 2013年05月11日
Microsoftらの業界団体、Androidは独占のための「トロイの木馬」だと主張 2013年04月11日
Microsoft、「Gmailはユーザーのメールをのぞき見ている」と主張するサイトを公開 2013年02月12日

ランニングやツーリングでなるべく坂道は避けたいなぁ、というときに使えそうなツールのご紹介。

Flattest Routeを使えば、ある2点間のルートのうち、もっとも高低差がないものを教えてくれるようだ。

丁寧にどのぐらいの高低差があるのかもグラフで見られるのでそちらも参考にしてもいいだろう。

サンフランシスコのような坂道だらけの町に住んでいたら日常的に使えそうである。

また英語にはなるが、普通に東京のルートも検索できたので坂道が気になる人は覚えておいてもいいですな。

すべて読む | ITセクション | モバイル | Google | マイクロソフト | スラッシュバック | YouTube | IT

関連ストーリー：
MicrosoftのWindows Phone用YouTubeアプリ、広告スキップ機能や動画のダウンロード機能を搭載 2013年05月11日
Microsoftが作成したGoogle Chromeのパロディー動画が流出 2013年05月19日

Google Play Music All Accessは米国で試用版の提供が開始されており、オンライン・オフラインで数百万曲を再生できるほか、自分のライブラリーから最大2万曲までアップロード可能。日本でのサービス開始は未定だが、「できるだけ早い時期にさらに多くの国でご希望のコンテンツを提供できるよう最善を尽くしております」とのことだ(Google Play、 bizmash!の記事)。

すべて読む | ITセクション | モバイル | Google | インターネット | 音楽

関連ストーリー：
Twitter、音楽連携サービス準備中 2013年04月17日
レコチョク、J-POP中心の定額制音楽配信サービスを開始 2013年01月24日
ソニー、定額制音楽配信サービス「Music Unlimited」を日本でも開始 2012年07月04日
KDDI、定額音楽配信サービス「LISMO unlimited」用のiOSアプリをリリース 2012年05月13日
iCloudに関するAppleとJASRACとの交渉は難航？ 2011年10月19日
Google や Amazon のクラウド音楽サービスは合法か ? 2011年07月07日
Apple、クラウドベースの音楽サービス開始に向けて音楽レーベルと契約を締結 2011年05月23日
Googleもクラウド経由の音楽ロッカーサービスを発表 2011年05月12日
アップロードした音楽をストリーミング再生できる「Amazon Cloud Player」発表 2011年03月30日
定額制音楽配信「ナップスター」、国内向けサービスを終了 2010年03月04日
Google、大手レーベルと手を組み音楽サービス開始? 2009年10月26日

すべて読む | セキュリティセクション | セキュリティ | YRO | Yahoo! | 情報漏洩 | プライバシ

関連ストーリー：
JR東日本の会員向けサービスでも不正ログイン 2013年04月20日
フレッツ光の会員サイト、不正ログインを受けて全アカウント約404万件をロック 2013年04月13日
Tポイントカード会員向けWebサイト「T-SITE」に不正ログイン、299IDが影響 2013年04月08日
JINSのオンラインショップに不正アクセス 2013年03月16日
Evernoteも不正アクセスを受ける 2013年03月03日
Apple、Javaプラグインの脆弱性を狙った攻撃を受ける。社内コンピュータの一部がマルウェアに感染 2013年02月21日
Facebook、マルウェアによる攻撃を受ける 2013年02月20日
Twitterにサイバー攻撃、25万件のアカウント情報に不正アクセス 2013年02月02日

• This week saw two new releases for YUI projects. First up was YUI 3.10.1, a patch release to resolve a vulnerability detected in the .swf files used in the IO utility and Uploader components. Please see this security bulletin for more details on the issue and steps to ensure your applications are secure. Also released this week was YUICompressor 2.4.8, which includes improved compression results as well as general fixes.

• At this week’s Open Roundtable (YouTube) we invited our friends at Wells Fargo to join us. After some quick intros, we began a discussion about their products and interest in YUI, then dove a bit deeper into some talking points regarding DataTable, Skinning, and Tooling. If DataTable development is something interesting to you, you’ll find quite a bit of discussion in the video about details of the component and its upcoming roadmap.

• YUI’s Shifter build tool got a version bump to v0.4.0 this week and you can upgrade via npm -g install shifter. This update fixes an issue that was discovered after our migration to Grunt for building releases. The version bump is a minor version (as opposed to a patch version, e.g. v0.3.9) because this does introduce a backwards incompatibility. If you are using a copy directive in any of your component build.json files, the 2nd parameter is now relative to your component’s build path as opposed to the source path, so you’ll need to make the appropriate update when you upgrade your copy of Shifter. An example of this change can be seen in commit 609f7d, which includes updates to /src/io/build.json and /src/uploader/build.json.

• Thanks to the AlloyUI crew for our awesome new t-shirts! If you are unfamiliar with AlloyUI, it’s a self-described “UI framework built on top of YUI3 that provides a simple API for building high scalable applications.” Their website is full of goodies, such as examples, Tutorials, and API docs. Check it out!

• Do you have experience with JavaScript, Java, Internationalization, and love solving complex problems at massive scale? Yahoo’s internationalization team is hiring!

• New and updated Gallery modules include: debounce, dd-momentum-plugin, task, scrollspy, io-utils, and affix.

• Links of the Week (thanks to JavaScript Weekly )

  • Draft Specification for ES.next (Ecma-262 Edition 6)
  • Introducing Augmented JavaScript
  • Introduction to Map and Reduce in Javascript
  • JavaScript Regular Expression Enlightenment
  • … and more

すべて読む | アップルセクション | ソフトウェア | アップル | Windows

関連ストーリー：
iTunes Storeでソニーミュージックの楽曲配信を開始 2012年11月07日
ブートはもう怖くない？短くなった起動時間 2011年08月16日
Windows 7はVistaと較べて、さほど速くない 2009年05月09日
Microsoft、スペック不足のPCにVistaをインストールさせて15億ドル稼ぐ 2009年01月07日

すべて読む | ITセクション | インターネット

関連ストーリー：
昔の電子メールを保存して閲覧するのによい方法は？ 2013年03月31日
電子メール暗号化ソフト、使ってる？ 2011年12月21日
おしりに拡張子が付いた「拡張子パンツ」 2011年08月09日

すべて読む | ITセクション | Google | 医療

関連ストーリー：
英国の障害者、世界で初めてロボットスーツを自宅に持ち帰る 2012年09月07日
大学中退のザッカーバーグはハイテク幹部志望者の悪い見本？ 2012年07月06日
Googleでは40歳を超えたら年寄り扱い？ 2010年06月25日
非可聴つぶやき声で音声認識 2004年04月06日

Advertise here via BSA

Transit is a super-smooth CSS transitions & transformations for jQuery. You can make transition on any CSS property. They will happen much smoother than if you were to use jQuery’s default .animate(). You can easily translate, rotate, scale, skew and etc.

Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. It is released under MIT License.

Requirements: jQuery Framework
Demo: http://ricostacruz.com/jquery.transit/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

When I started out on this app I was only really just interested in seeing if the web platform had really evolved to a point where an app like the hugely popular Instagram app could be built using just HTML, JavaScript and CSS. As it turns out we can in fact do exactly that. This article walks you through the technologies that make this possible and shows how it is entirely feasible today to build interoperable web applications that provide a great user experience no matter what brand of browser the user is running.

If you happen to be one of the two or so people who have not heard about Instagram then you might be pleased to hear that it is a hugely popular photo sharing and social networking service that allows you to take pictures, apply interesting digital filters on them and share them with the world to see. The service got so popular that it was acquired by Facebook for a bag full of cash and stock in April of 2012.

InstaFuzz is the name of the app I put together and while I don’t expect to be acquired by Facebook or anybody else for a billion green it does however make the case that an app such as this one can be built using only standards compliant web technologies such as Canvas, File API, Drag/Drop, Web Workers, ES5 and CSS3 andstill manage to runwell on modern browsers such as Internet Explorer 10,Google Chrome and Firefox. And you could easily use the code to build a Windows Store app too.

About the app

If you’d like to take a look at the app, then here’s where it is hosted at:

http://blogorama.nerdworks.in/arbit/InstaFuzz/

As soon as you load it up, you’re presented with a screen that looks like this:

The idea is that you can load up a photograph into the app either by clicking on the big red “Add” button on the bottom left hand corner or drag and drop an image file into the blackish/blue area on the right. Once you do that you get something that looks like this:

You’ll note that a list of digital filters are listed on the left of the screen showing a preview of what the image would look like if you were to apply the said filter. Applying a filter is a simple matter of clicking on one of the filter previews on the left. Here’s what it looks like after applying the “Weighted Grayscale” filter followed by a “Motion Blur”. As you can tell filters are additive – as you keep clicking on filters, they are applied on top of what was applied earlier:

Let’s next take a look at how the UI layout has been put together.

UI Layout

The HTML markup is actually so little that I can actually reproduce the contents of the BODY tag in its entirety here (excluding the SCRIPT includes):

<header>
<divid="title">InstaFuzz</div>
</header>
<sectionid="container">
<canvasid="picture"width="650"height="565"></canvas>
<divid="controls">
<divid="filters-list"></div>
<buttonid="loadImage">Add</button>
<inputtype="file"id="fileUpload"
style="display: none;"
accept="image/gif, image/jpeg, image/png"/>
</div>
</section>

<!-- Handlebar template for a filter UI button -->
<scriptid="filter-template"type="text/x-handlebars-template">
<divclass="filter-container"data-filter-id="{{filterId}}">
<divclass="filter-name">{{filterName}}</div>
<canvasclass="filter-preview"width="128"height="128"></canvas>
</div>
</script>

There’s nothing much going on here. Pretty much everything should be standard fare. I will however draw attention to the fact that I am using the Handlebars JavaScript templating system here for rendering the markup for the list of filters on the left of the screen. The template markup is declared in the HTML file (the SCRIPT tag in the snippet shown above) and then used from JavaScript. The template markup is then bound to a JavaScript object that supplies the values for handlebars expressions such as {{filterId}}and {{filterName}}. Here’s the relevant piece of JS from the app with a bit of DOM manipulation help from jQuery:

var templHtml = $("#filter-template").html(),
template = Handlebars.compile(templHtml),
filtersList = $("#filters-list");
var context = {
filterName: filter.name,
filterId: index
};

filtersList.append(template(context));

As you can tell from the HTML markup all the filter preview boxes feature a CANVAS tag as does the big box on the right where the final output is rendered. We’ll go into a bit more detail later on in the article as to how canvas technology is used to achieve these effects.
The app also usesCSS3 @font-face fonts to render the text in the header and the “Add” button. The fonts have been taken from the excellent Font Squirrel site and here’s what the declaration looks like:

@font-face {
font-family: 'TizaRegular';
src: url('fonts/tiza/tiza-webfont.eot');
src: url('fonts/tiza/tiza-webfont.eot?#iefix')
format('embedded-opentype'),
url('fonts/tiza/tiza-webfont.woff')format('woff'),
url('fonts/tiza/tiza-webfont.ttf')format('truetype'),
url('fonts/tiza/tiza-webfont.svg#TizaRegular')format('svg');
font-weight: normal;
font-style: normal;
}

This directive causes the user agent to embed the font in the page and make it available under the name assigned to the font-family rule which in this case is “TizaRegular”. After this we can assign this font to any CSS font-family rule like how we normally do. In InstaFuzz I use the following rule to assign the font to the header element:

font-family: TizaRegular, Cambria, Cochin, Georgia, Times,
"Times New Roman", serif;

You might also have noticed that there is a subtle shadow being dropped on the page by the container element.

This is made possible using the CSS3 box-shadow rule and here’s how it’s used in InstaFuzz.

-moz-box-shadow: 1px0px4px#000000, -1px-1px4px#000000;
-webkit-box-shadow: 1px0px4px#000000, -1px-1px4px#000000;
box-shadow: 1px0px4px#000000, -1px-1px4px#000000;

This causes the browser to render a shadow around the relevant element. Each comma separated section in the value specifies the following attributes of the shadow:

1. Horizontal offset
2. Vertical offset
3. Spread distance – positive values have the effect of softening the shadow
4. Shadow color

One can specify multiple shadow values separated by comma as in fact has been done above. Note that I’ve also specified the shadow using vendor prefix syntax for Firefox and Chrome/Safari using the moz and webkit prefixes. This causes the shadow to continue to work in versions of those browsers where support for this capability was provided using the vendor prefixed version of the rule. Note that the W3C version of the rule – box-shadow – is specified last. This is done deliberately to ensure that in case the browser supports both the forms then only the W3C behavior is actually applied to the page.

One often finds that web developers either fail to include vendor prefixed version of a given CSS3 rule for all the browsers that support that rule and/or fail to include the W3C version as well. Often developers just put the webkit version of the rule ignoring other browsers and the W3C standard version. This causes two problems – [1] poor user experience for users who are using non-webkit browsers and [2] it ends up resulting in webkit becoming a de-facto standard for the web. Ideally we want W3C to be driving the future of the web and not one specific browser implementation. So here are some things to remember when playing with experimental implementations of CSS features:

1. Use vendor prefixed versions of CSS rules by all means but remember to specify the rule for all supported browsers and not just the one that you happen to be testing the page in (if you’re using Visual Studio to edit your CSS then you might be interested in the supremely excellent extension for Visual Studio called Web Essentials that makes the job of managing vendor prefixes about as simple as it can possibly get).
2. Remember to specify the W3C version of the rule as well.
3. Remember to order the occurrence of the rules so that the W3C version shows up last. This is to allow clients that support both the vendor prefixed version and the W3C version to use the W3C specified semantics for the rule.

Drag/Drop

One of the things that InstaFuzz supports is the ability to drag and drop image files directly on to the big blackish/blue box. Support for this is enabled by handling the “drop” event on the CANVAS element. When a file is dropped onto an HTML element the browser fires the “drop” event on that element and passes in a dataTransfer object which contains a files property that contains a reference to the list of files that were dropped. Here’s how this is handled in the app (“picture” is the ID of the CANVAS element on the page):

var pic = $("#picture");
pic.bind("drop", function (e) {
suppressEvent(e);
var files = e.originalEvent.dataTransfer.files;
// more code here to open the file
});
pic.bind("dragover", suppressEvent).bind("dragenter", suppressEvent);
functionsuppressEvent(e) {
e.stopPropagation();
e.preventDefault();
}

The files property is a collection of File objects that can then subsequently be used with the File API to access the file contents (covered in the next section). We also handle the dragover and dragenter events and basically prevent those events from propagating to the browser thereby preventing the browser from handling the file drop. IE for instance might unload the current page and attempt to open the file directly otherwise.

File API

Once the file has been dropped, the app attempts to open the image and render it in the canvas. It does this by using the File API. The File API is a W3C specification that allows web apps to programmatically access files from the local file system in a secure fashion. In InstaFuzz we use the FileReader object to read the file contents as a data URL string like so using the readAsDataURLmethod:

var reader = newFileReader();
reader.onloadend = function (e2) {
drawImageToCanvas(e2.target.result);
};
reader.readAsDataURL(files[0]);

Here, files is the collection of File objects retrieved from the function handling the “drop” event on the CANVAS element. Since we are interested only in a single file we simply pick the first file from the collection and ignore the rest if there are any. The actual file contents are loaded asynchronously and once the load completes, the onloadend event is fired where we get the file contents as a data URL which we then subsequently draw on to the canvas.

Rendering the filters

Now the core functionality here is of course the application of the filters. In order to be able to apply the filter to the image we need a way to access the individual pixels from the image. And before we can access the pixels we need to have actually rendered the image on to our canvas. So let’s first take a look at the code that renders the image that the user picked on to the canvas element.

Rendering images on to the canvas

The canvas element supports the rendering of Image objects via the drawImage method. To load up the image file in an Image instance, InstaFuzz uses the following utility routine:

App.Namespace.define("InstaFuzz.Utils", {
loadImage: function (url, complete) {
varimg = new Image();
img.src = url;
img.onload = function () {
complete(img);
        };
    }
});

This allows the app to load up image objects from a URL using code such as the following:

functiondrawImageToCanvas(url) {
InstaFuzz.Utils.loadImage(url, function (img) {
// save reference to source image
sourceImage = img;

mainRenderer.clearCanvas();
mainRenderer.renderImage(img);

// load image filter previews
loadPreviews(img);
    });
}

Here, mainRenderer is an instance created from the FilterRenderer constructor function defined in filter-renderer.js. The app uses FilterRenderer objects to manage canvas elements – both in the preview pane as well as the main canvas element on the right. The renderImage method on the FilterRenderer has been defined like so:

FilterRenderer.prototype.renderImage = function (img) {
varimageWidth = img.width;
varimageHeight = img.height;
varcanvasWidth = this.size.width;
varcanvasHeight = this.size.height;
var width, height;

if ((imageWidth / imageHeight) >= (canvasWidth / canvasHeight)) {
width = canvasWidth;
height = (imageHeight * canvasWidth / imageWidth);
    } else {
width = (imageWidth * canvasHeight / imageHeight);
height = canvasHeight;
    }

var x = (canvasWidth - width) / 2;
var y = (canvasHeight - height) / 2;
this.context.drawImage(img, x, y, width, height);
};

That might seem like a lot of code but all it does ultimately is to figure out the best way to render the image in the available screen area considering the aspect ratio of the image. The key piece of code that actually renders the image on the canvas occurs on the last line of the method. The context member refers to the 2D context acquired from the canvas object by calling itsgetContext method.

Fetching pixels from the canvas

Now that the image has been rendered we will need access to the individual pixels in order to apply all the different filters that are available. This is easily acquired by calling getImageData on the canvas’s context object. Here’s how InstaFuzz calls this from instafuzz.js.

varimageData = renderer.context.getImageData(
    0, 0,
renderer.size.width,
renderer.size.height);

The object returned by getImageData provides access to the individual pixels via its data property which in turn is an array like object that contains a collection of byte values where each value represents the color rendered for a single channel of a single pixel. Each pixel is represented using 4 bytes that specify values for the red, green, blue and alpha channels. It also has a lengthproperty that returns the length of the buffer. If you have a 2D co-ordinate you can easily transform that into an index into this array using code such as the following. The color intensity values of each channel ranges from 0 through 255. Here’s the utility function from filters.js that accepts as input an image data object along with 2D coordinates for the pixel the caller is interested in and returns an object containing the color values:

functiongetPixel(imageData, x, y) {
var data = imageData.data, index = 0;

// normalize x and y and compute index
    x = (x < 0) ? (imageData.width + x) : x;
    y = (y < 0) ? (imageData.height + y) : y;
index = (x + y * imageData.width) * 4;

return {
r: data[index],
g: data[index + 1],
b: data[index + 2]
    };
}

Applying the filters

Now that we have access to the individual pixels, applying the filter is fairly straightforward. Here, for instance is the function that applies a weighted grayscale filter on the image. It simply picks intensities from the red, green and blue channels and sums them up after applying a multiplication factor on each channel and then assigns the result for all 3 channels.

// "Weighted Grayscale" filter
Filters.addFilter({
name: "Weighted Grayscale",
apply: function (imageData) {
var w = imageData.width, h = imageData.height;
var data = imageData.data;
var index;
for (var y = 0; y < h; ++y) {
for (var x = 0; x < w; ++x) {
index = (x + y * imageData.width) * 4;
var luminance = parseInt((data[index + 0] * 0.3) +
                                         (data[index + 1] + 0.59) +
                                         (data[index + 2] * 0.11));
	data[index + 0] = data[index + 1] =
data[index + 2] = luminance;
            }

Filters.notifyProgress(imageData, x, y, this);
        }

Filters.notifyProgress(imageData, w, h, this);
    }
});

Once the filter has been applied we can have that reflected on the canvas by calling the putImageData method passing in the modified image data object. While the weighted grayscale filter is fairly simple most of the other filters use an image processing technique known as convolution. The code for all the filters is available in filters.js and the convolution filters were ported from the C code available here.

Web Workers

As you might imagine doing all this number crunching to apply the filters can potentially take a long time to complete. The motion blur filter for instance uses a 9×9 filter matrix for computing the new value for every single pixel and is in fact the most CPU intensive filter among them all. If we were to do all this computation on the UI thread of the browser then the app would essentially freeze every time a filter was being applied. To provide a responsive user experience the app delegates the core image processing tasks to a background script using the support for W3C Web Workers in modern browsers.

Web workers allow web applications to have scripts run in a background task that executes in parallel along with the UI thread. Communication between the worker and the UI thread is accomplished by passing messages using the postMessage API. On both ends (i.e. the UI thread and the worker) this manifests as an event notification that you can handle. You can only pass “data” between workers and the UI thread, i.e., you cannot pass anything that has to do with the user interface – you cannot for instance, pass DOM elements to the worker from the UI thread.

In InstaFuzz the worker is implemented in the file filter-worker.js. All it does in the worker is handle the onmessage event and apply a filter and then pass the results back via postMessage. As it turns out, even though we cannot pass DOM elements (which means we cannot just hand a CANVAS element to the worker to have the filter applied) we can in fact pass the image data object as returned by the getImageDatamethod that we discussed earlier. Here’s the filter processing code from filter-worker.js:

importScripts("ns.js", "filters.js");

var tag = null;
onmessage = function (e) {
var opt = e.data;
varimageData = opt.imageData;
var filter;

tag = opt.tag;
filter = InstaFuzz.Filters.getFilter(opt.filterKey);

var start = Date.now();
filter.apply(imageData);
var end = Date.now();

postMessage({
type: "image",
imageData: imageData,
filterId: filter.id,
tag: tag,
timeTaken: end - start
    });
}

The first line pulls in some script files that the worker depends on by calling importScripts. This is similar to including a JavaScript file in a HTML document using the SCRIPT tag. Then we set up a handler for the onmessage event in response to which we simply apply the filter in question and pass the result back to the UI thread by calling postMessage. Simple enough!
The code that initializes the worker is in instafuzz.js and looks like this:

var worker = new Worker("js/filter-worker.js");

Not much is it? When a message is sent by the worker to the UI thread we handle it by specifying a handler for the onmessage event on the worker object. Here’s how this is done in InstaFuzz:

worker.onmessage = function (e) {
varisPreview = e.data.tag;
switch (e.data.type) {
case"image":
if (isPreview) {
previewRenderers[e.data.filterId].
context.putImageData(
e.data.imageData, 0, 0);
            } else {
mainRenderer.context.putImageData(
e.data.imageData, 0, 0);
            }

break;
// more code here
    }
};

The code should be fairly self-explanatory. It simply picks the image data object sent by the worker and applies it to the relevant canvas’s context object causing the modified image to be rendered on screen. Scheduling a filter for conversion with the worker is equally simple. Here’s the routine that performs this function in InstaFuzz:

functionscheduleFilter(filterId,
renderer,
img, isPreview,
resetRender) {
if (resetRender) {
renderer.clearCanvas();
renderer.renderImage(img);
    }

varimageData = renderer.context.getImageData(
        0, 0,
renderer.size.width,
renderer.size.height);

worker.postMessage({
imageData: imageData,
width: imageData.width,
height: imageData.height,
filterKey: filterId,
tag: isPreview
    });
}

Wrapping it up

The source for InstaFuzz is available for download here. We saw that fairly intricate user experiences are possible today with HTML5 technologies such as Canvas, Drag/Drop, File API and Web Workers. Support for all of these technologies is quite good in pretty much all modern browsers. One thing that we did not address here is the question of making the app compatible with older browsers. That, truth be told, is a non-trivial but necessary task that I will hopefully be able to talk about in a future article.

This article is part of the HTML5 tech series from the Internet Explorer team. Try-out the concepts in this article with three months of free BrowserStack cross-browser testing @ http://modern.IE

About the Author

Rajasekharan Vengalil is a self-proclaimed nerd working for a company called Microsoft. He is part of their Development and Platform Evangelism team which basically means that he gets to learn all about interesting new nerdy stuff that comes out of Microsoft and then talk about it with people (like building an app in HTML5. He thinks he’s really lucky to be paid for doing what he’d anyway be doing for free!

Sponsors

Professional Web Icons for Your Websites and Applications

Railscastsみたいで便利そうなのでご紹介。

embercastsでは最近話題のEmber.jsの使い方を動画で教えてくれる。

動画はすべて3分前後と、気軽に見られる点も良いだろう。

英語ではあるが、Ember.jsって何が出来るの？ということをさっと把握したいときにいいですな。

すべて読む | ITセクション | NTT | 携帯電話 | インターネット

関連ストーリー：
NTTドコモの「脱回線」は成功できるか 2013年05月15日
LINE に政党公式アカウント誕生 2013年05月14日
スマホ向けの新メールシステム「ドコモメール」を 10 月下旬に再延期 2013年04月23日

私はよく「コンテンツがない。壊れている。」と主張していますが、人によっては「既に自分たちには素晴らしいコンテンツがある。アピールするための素材もたくさん用意されている。」と考える方もいると思います。しかし、それは利用者からの視点からすればコンテンツでも何でもないノイズということもあります。

昨年末から全国で開催しているマルチデバイスを見据えたコンテンツ設計講座で、企業は的外れなコンテンツを出していることを事例を挙げながら紹介しています。クオリティの高い写真、映像、文章が使われているものの、中身は利用者のことを優先していない自己中心なメッセージばかりということがあります。残念ながら企業 Web サイトの大半はそんなところが多かったりします。

上記は Break Up という、広告主と消費者の関係を人間関係に見立てて表現した 2007 年のビデオです。以下、簡単にやりとりを抜粋しておきますが、動きや表情を見るだけでも参考になることが多々あるので、ぜひご覧になってください。会話がない一方的な関係にウンザリする消費者と、ナルシストで思い込みの激しい広告主の関係をコミカルに描いています。

• 消費者: 別れたい。全然話しかけてくれないじゃないの。
• 広告主: あんな大きな広告をつかって愛を宣言したじゃないか。
• 消費者: 愛していると言っているだけで、とてもそうは見えないわ。
• 広告主: そんなことはない。代理店は絶賛していたよ。
• 消費者: 私はもう変わったのに、あなたは何も変わっていない。
• 広告主: そんなに腹を立てているのは、クーポンが欲しいからだな。
• 消費者: 私のことなんて何も分かっていない。
• 広告主: もちろん知っているよ。28〜34の女性で趣味は音楽と映画で・・・
• 消費者: あきれた

美しい映像と音楽で素敵な内容にみえる Facebook Home のビデオですが、どんなときもオンラインの世界に没頭しているという奇妙な世界。自分たちの製品は素晴らしいという自己主張が見え隠れするものの、人の求めている価値なのかは疑問です。

2007年に公開された当時に比べると、ソーシャルメディアを活用したコミュニケーションが重視されている現在ですが、コミュニケーションの仕方は Break Up が公開されたときとあまり変わらないように見えます。これはオフラインの広告だけでなく、オンラインにも同様のことがいえます。今でも画面の大半が「自分たちは素晴らしい」という自画自賛のコンテンツによって占められています。利用者が求めている情報は数画面先に隠されていたり、そもそも Web サイトにないということもあります。

ビデオに登場する女性キャラクターと同様、日本の消費者もそんな自己主張が激しい割には中身のない企業のコンテンツにウンザリしています。今年のはじめに日本のビジネスは信用を失いつつあるという記事を公開しましたが、日本人は他の国に比べて疑い深く、企業からの情報を鵜呑みにしない傾向がでてきました。こうした中、今までどおりに「こんな素晴らしい自分たちを見てくれ」「こんなに面白くて楽しいのはイイヨネ」といった中身のないメッセージを送り続けても良いのでしょうか。

良いコンテンツは様々な要素によって構成されていますが、そのなかに人間中心であることが必須であると言われています。今は広告、マーケティング、Web で本当に顧客のことを考えているのかを証明しなければならない時期に来たのだと思います。美しい映像で、視聴者の心を揺り動かすことできるかもしれません。しかし、それでは企業がそもそも提供しなければならない価値を顧客に提供しているとは言えないと思います。

パッと見が良いイメージだけを配信していればロイアリティや印象が良くなるほど、顧客は単純ではないということ。コンテンツはあって当たり前、良いコンテンツを作っているから大丈夫という部分を一度疑い、見直してみると改善点は幾つか見つかるはずです。

すべて読む | ITセクション | セキュリティ | 携帯電話 | インターネット | 携帯通信

関連ストーリー：
IE8に新たな脆弱性が発見される。すでにこれを使った大規模攻撃も確認される 2013年05月08日
JINSオンラインショップへの不正アクセス、Struts 2の脆弱性を突かれたのが原因 2013年05月02日
米NGO、キャリアにより脆弱性が放置されたAndroidスマートフォンの調査と救済をFTCに求める 2013年04月20日

すべて読む | ITセクション | 日本 | インターネット

関連ストーリー：
whois情報公開代行サービスを利用している.inドメインが停止されている模様 2013年05月01日
関係ない会社の「特定商取引法に基づく表示」をコピーした偽ECサイトが登場 2013年04月18日
「.tc」ドメインの一部が大幅値上げ、4060円/年から50万円/年へ 2012年10月09日

すべて読む | ITセクション | テクノロジー | メディア | ソフトウェア

関連ストーリー：
キヤノンの「レタッチ検出システム」、破られる 2010年12月06日
Photoshop CS5の新機能「Content-Aware Fill」がスゴい 2010年03月27日
レタッチした人物写真に「ただし書き」を義務付ける法案、フランスで提出される 2009年09月25日
偽造写真を見破るソフトの開発 2006年02月02日

Special Thanks

In addition to the community at large, special thanks goes out to following individuals for sticking with us during this period of transition and shepherding their pull requests through the new process: @danbeam (Dan Beam), @faisalman (Faisal Salman), @killsaw (Steven Bredenberg), @ademey (Andrew Demey), @sbertrang (Simon Bertrang), @danielbeardsley (Daniel Beardsley), @bmouw, @bandesz, @ryansully (Ryan Sullivan), @apm (Adam Moore), @nlalevee (Nicolas Lalevée), and @tml (Joey Smith).

Changes

• Fixes for “important” and conditional comment processing
• Fixes a bug in the support for JS 1.7 style getters/setters
• Better compliance and improved compression in CSS results
• Many improvements to parameter parsing and batch mode

Join the YUICompressor Community

As we continue to expand our adoption of the new Contributor Model, we invite any who are interested in the progress of YUICompressor to join us on the mailing list, file issues or PRs on the GitHub repo, or just help us spread the word: YUICompressor lives!

If you know of systems that have integrated YUICompressor into their projects or codebases, please drop us a line or add a comment here so we can help push new versions of YUICompressor deeper into the community.

Release Links

• Compare v2.4.8 source code to v2.4.7
• Download the 2.4.8 release
• Download the 2.4.8 source archive

Advertise here via BSA

In the early days of internet the bulletin boards were rife with debate and conversation. Interactions were meaningful and the discussions had validity. After the latest trend of social websites these kinds of discussions have all but vanished. Today the conversations are littered with memes, funny pictures, viral videos, and trolling responses.

Moot is a radically different discussion platform, unencumbered by the weight of unnecessary features and distractions. It places the conversation back to the forefront. Clean user interface, persistent content and deep integration into the site will allow a more natural and meaningful discussion to take place. People will focus on topics they care about. You can add conversations to any site with a few lines of HTML. Gorgeous discussions, yours for free.

Requirements: -
Demo: https://moot.it/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Verlet-js is a simple Verlet integration physics engine written in javascript by Sub Protocol. Particles, distance constraints, and angular constraints are all supported by verlet-js. From these primitives it is possible to construct just about anything you can imagine.

You can a high level object used within the scene (ball, bridge, cloth and etc. You can also links particles together so they can interact with each other. You may use verlet-js under the terms of the very permissive MIT License.

Requirements: JavaScript Framework
Demo: http://subprotocol.com/verlet-js/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

heise online の記事によると、Skype 上で行ったチャットメッセージは Microsoft の関連企業が閲覧できるようになっているという (本家 /. 記事より) 。

発見したのは同紙の読者で、Skype のチャットの後に珍しいネットワークトラフィックがあるのを発見した。調査の結果、HTTPS で始まる URL に対して Microsoft の IP アドレスからのアクセスがあったことが判明したという。heise online が Skype 側に確認を取ったところ、Skype はスパムやフィッシングリンクを特定するために、Skype 上で交わされた IM や SMS をチェックすると返答してきたという。

すべて読む | セキュリティセクション | セキュリティ | マイクロソフト | インターネット | IT

関連ストーリー：
iPhoneの iMessage は米麻薬取締局でも傍受不可能 2013年04月09日
FBI、今年の最優先課題は Gmail や Dropbox などリアルタイム通信傍受・データ監視 2013年03月29日

あ、ちょっと便利かも。

Dictionary for Numbersは（そのままだが）数に関する辞書を提供してくれるChromeの拡張機能だ。

普段接しないような大きな数字も、「どこそこの人口と同じぐらい」と聞けばそれなりにイメージすることができる。そうした数値と感覚を結びつけてくれるのだ。

使い方も簡単で、普通にブラウジングしていれば自動的にテキストを置き換えてくれるので便利だろう（まぁ、英語だけだが）。またツールバーから直接検索することもできる。

普段から数値感覚を磨くために使ってもいいですな。

HTC FirstのスペックはAndroid 4.1/Qualcomm MSM8930AA（1.4GHz、デュアルコア）/RAM 1GB/ストレージ16GB/1280×720ドット4.3インチ液晶/LTE対応と悪くはないのだが、Facebook Homeの出来の悪さが足を引っ張っているという話もある。

すべて読む | ITセクション | Facebook | Android

関連ストーリー：
Facebook などが主導するオープンソースのネットワークスイッチ開発プロジェクト 2013年05月10日
Facebookの「いいね！」ボタンを押す傾向から、性的指向がバレてしまう可能性 2013年03月14日
Facebook Connectのバグ、数多くのWebサイトがエラーページにリダイレクトされる 2013年02月09日
Facebook、新検索サービス「グラフサーチ」を発表 2013年01月18日

教育系に興味があるのと、やっぱり物理はおもしろいのでご紹介。

Theoretical Minimumでは、スタンフォード大学の最新物理の授業を受けられるようだ。

授業はYouTubeの映像で提供されている。

大学の授業そのままなので、一つの講義は90分ほどだ。みっちりと教わることができるだろう。

確認テストや進捗管理といった機能は提供されてはいないが、こうした高度な授業を無料かつネットで受けられるというのは素晴らしいですね・・・。うまく活用したいところです。

Advertise here via BSA

The jQuery.mmenu-plugin is a jQuery plugin for creating slick, app look-alike sliding menus for you mobile website with only one line of javascript. The jQuery.mmenu-plugin provides a few options for customizing your menu. The default option values can be overridden by passing new values to the method.

After the plugin has been fired, a series of custom events are available for the menu. All custom events are bound to the .mmenu-namespace. The jQuery.mmenu-plugin was built using the jQuery-library, it is dual licensed under the MIT and GPL licenses.

Requirements: jQuery Framework
Demo: http://mmenu.frebsite.nl/
License: MIT, GPL License

Sponsors

Professional Web Icons for Your Websites and Applications