[Firefox OS][Gecko]おや? Promiseって?

 藪下@2課のガジェオタです。

 Gecko触って遊んでて気づいたんですが、Geckoで使ってるPromiseとcontentプロセスで使っているPromiseは別物みたいです。

Promise – MDN
https://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Reference/Global_Objects/Promise

 ここを見るとcatch使えますね。実際適当なHTMLとJSこさえたら使えました。
 でもGeckoいじってAPI作ってテスト書いてたらcatchは関数ちゃうでと怒られる。なんでだと思ったらgecko/toolkit/modules/Promise.jsmにcatchがいなかったんですね。ちなみにmasterのHEADだと怒られないです。遊んでた環境が古くてまだ実装されてなかったみたいです。

 でまあcatchが実装されてるとかされてないとかは割とどうでもよくて、Geckoでは実装されてないものがコンテンツにぶら下がってる方にはあったので別物だったのかーとなった次第です。
 ちなみにGecko側のにはPromise.defer()があるけどコンテンツのにはなかったりもしました。

 ざっくり見た感じGeckoでよく

let Promise = Cu.import("resource://gre/modules/Promise.jsm").Promise;

 されてるものはgecko/toolkit/modules/Promise.jsmで実装されていて、コンテンツ側で使うものはgecko/dom/promiseにいるみたいです。

 まだ整理されてないだけかもしれませんが、こういうこともあるんですね。

[JavaScript][Promise][CSS]JSにPromiseが入った! のとCSSに変数が入った! お話

 藪下@2課のHTMLとかJavaScriptとかよくわからない子です。

 HTML5Exparts.jpさんが定期的に掲載している海外記事の紹介があるんですが、今回のトピックに藪下の心に直撃したのが二つほどあったので紹介します。
 まずはHTML5Exparts.jpさんの記事はこちら。

HTML5Exparts.jp記事紹介

JavaScript Promises、CSS変数、Quartz ComposerのプラグインOrigamiなど海外WEBテク20本を一挙公開
http://html5experts.jp/cssradar/4509/

 この記事で紹介されているJavaScriptにPromiseが入るぞというお話とCSSに変数が導入されるぞというお話が藪下の注目トピックです。

Promiseのお話

JavaScriptにおけるPromises実装について – HTML5 Rocks
http://www.html5rocks.com/en/tutorials/es6/promises/

 藪下は過去の記事で触れている通りプロミスのような仕組みは面白いと思っています。計算や式を運ぶ方法があるというのは抽象的な観点を失わずに(つまり局所的な事情を知らずに)物事を記述する機会を増やせるということだと思っているので、こういったプロミス(とかFutureとか呼ばれる)のようなパターンやモナドや継続のような概念の導入はワクワクしてきます。

 紹介されている記事は結構いろいろしっかり書いてくれてますね。どういう使い方するものなの? とかAPIリファレンスとかちゃんとあります。

 藪下もざっくり読みなんで読み違えてるかもしれませんが、大体以下の見出しから図が出てくるあたりまでわかりやすくてよいです。
#英語読めなくてもコード読めるしね!

Complex async code made easier
http://www.html5rocks.com/en/tutorials/es6/promises/#toc-coding-with-promises

 そして気になるAPIリファレンスが以下。

Promise API Reference
http://www.html5rocks.com/en/tutorials/es6/promises/#toc-api

 このPromiseがChromeとFirefoxの開発版で使えるようになってるそうです。

CSSに変数が入るお話

CSSの変数(Custom Properties)で遊んでみよう – That Emil
http://thatemil.com/blog/2013/12/15/playing-around-with-css-variables-custom-properties/

 これもFirefoxのNightlyですね。

 CSSってなんで変数ないんだろうと前から思っていて、CSSプリプロセッサの類を知ったときはそうだよねーと思ったものです。藪下はCSSの思想とか設計原理とかよく知らないしCSSに変数を追加するペーパーが出たときから議論されてる内容も追いかけてないんですが、静的な意味だけでも変数がないとDRY原則を満たしづらいこととか出てきてめんどうですよね。いつかどこかでミスる。もちろん動的に値を変える意味でも変数があるといいなと思いますけどね。

 で、肝心の内容をざっくり見てみましょう。まずvar-で始まるカスタムプロパティが変数になるようです。HTML要素におけるdata-属性みたいなもんだよとのことです。

:root {
    var-primary-color:  firebrick; /* これが合法な色キーワードになるよ超クール! */
}

 これを参照するにはvar()関数にvar-をつけないプロパティ名とフォールバック値を与えるとのことです。これもHTML要素におけるelement.dataset APIみたいなもんだよ(ただしキャメルケースできない)とのことです。フォールバック値は変数がそこまでに宣言されていなくて継承もされていないとき用のデフォルト値だと思えばいいんですかね。

.myComponent {
    color: var(primary-color, #000);
}

 それ用のAPIも定義されたのでJSからも参照できるみたいです。

    // hogeはなんかのDOM要素
    hoge.style.var.get('primary-color'); // プロパティ名にはvar-付けない

 つまりは条件付きCSSみたいなことできちゃうってことですよね。夢がひろがりんぐ!

 詳しくはW3Cの仕様見ましょう。

CSS Custom Properties for Cascading Variables Module Level 1
http://dev.w3.org/csswg/css-variables/

さいごに

 たまには海外のブログも面白いですね。英語力ないので誰かが紹介してくれないと面白いことがあっても気づきもできないですが。
 あ、一応記事は読んだうえで書いてますが社内でも英語の読めなさ書けなさに定評のある藪下の英語力を信用してはいけませんので皆様も自分で読んでみてくださいね。

[Firefox]Firefox 26出来。Firefox OS v1.2は?

 藪下@2課のブラウザはFirefox派です。

 Firefox 26出てますね。忘れてました。

「Firefox 26」正式版がリリース、「Click to Play」がデフォルト機能に
http://gigazine.net/news/20131211-firefox-26/

 まあこのブログを読みに来る人だとFirefoxそのものよりもFirefox OSがどうなのかが本命ですよね。
 それはdynamisことMozillaのレッサーパンダさんが、もといMozillaのレッサーパンダことdynamisさんがアドベントカレンダーで書いてくれました!

Firefox OS Advent Calendar 2013 – 12/10
https://dev.mozilla.jp/2013/12/fxos-advent-calendar-20131210/

 そんなわけで端末に配信されるのはもう少し先ですね。
 でもZTE Openとかはテスト一週間ぐらいで済ますとかどこかで聞いたのでほんとにもう少しの辛抱ですよ!
 楽しみに待ちましょう。

[Firefox][Firefox OS] あれ、Firefox OS機じゃなくてもインストールできちゃうんだ。。。

 藪下@2課のガジェオタです。

 Firefox OSと言うかFirefox面白いですね。デスクトップでもfor AndroidでもFirefox OSアプリがインストールできちゃうみたいです。

Firefox OS (Boot to Gecko) ›
Firefox Application on Android
https://groups.google.com/forum/?fromgroups#!topic/firefoxos/7G1DsW7TAWY

 これはFirefox OSをお持ちでない方々も実機で遊べちゃうってことですよ。
 KEON買ったりしてがんばったけどがんばらなくてもできちゃうんだ。。。
 KEONはオレンジの筐体がかわいいので別にいいんだ(´・ω・`)

[ブラウザ][Opera]ChromiumベースのOperaがついに出てきました

 藪下@2課のなんでも屋さんです。

 OperaがエンジンをGoogle製に変えると発表されて久しいんですが、ついにプレビュー版がローンチです。

OperaがGoogleのエンジン採用の初バージョンをリリース–便利な独自機能による差別化に専念
http://jp.techcrunch.com/2013/05/29/20130528opera-launches-first-preview-of-its-chromium-based-desktop-browser-spins-off-email-client/

 Stashビューとかよさそうですよね。調べ物をしているときにまずは色々見てみようと思ってタブがいっぱいとかやりがちなのと、タブを行ったりきたりしながらあれ見てこれ見てってとてもしんどいのでこういう機能は大歓迎です。
 久しぶりにOpera使ってみましょうかね。

[ブラウザ][Firefox]今Firefoxが熱い!

 藪下@2課のHTML5は苦手な方です。

 Firefox熱いですね。asm.jsとかもうすぐ入るのかなと思うとオラわくわくしてきたぞ!

HiDPI サポート、HTML5 notifications、Parallel JS、asm.js など – Firefox Development Highlights
https://dev.mozilla.jp/2013/04/hidpi-support-html5-notifications-parallel-js-asm-js-and-more-firefox-development-highlights/

 asm.js以外にもC#っぽいλ式の構文とかParallel JSとかHTML5 notificationとか面白そうなものたくさんです。
 このあたりってFirefox OSにも入ってくるんですかね?
 こういったasm.jsとかChromeのNaClみたいなのとか入ってくると他のモバイルOSが速度で優位を主張するのも難しくなっていく気がしますね。胸熱です。

 

[Webkit][Blink] Googleの次世代ブラウザエンジンについてのパネルディスカッション (についての記事)

 藪下@2課のガジェオタです。

 Googleやmozillaが新しいHTMLエンジンを作ろうとしているようですが、Googleの新エンジンBlinkについて興味深いパネルがあったみたいです。

WebKitとBlinkのこれから
https://plus.google.com/u/0/117261322300109492957/posts/aH2JbHMRmnP

 藪下は英語が堪能でないのでこういう翻訳文があるととても助かります。
 最近調べ始めて見て思ったんですがHTML5界隈とてもホットですね。