tande lab.

Firefox OS におさわりしてきたよ #osawarifx

Firefox OS を触ってみよう!に夫婦で参加してきました。

開発途中の Firefox OS を触れて、しかも中身をいじれる。
OS を自分でデザインできるっていう経験はあまりないですし、もしかしたら OS のデザインとして一部採用されるかも!楽しみ!ってことで、参加してきました。

004 さわってみよう Firefox OS | designers-hack(デザイナーズハック)

My image

@tommmmy さんが詳細なイベントレポートを起こしてくださっています。
そちらで楽しげな雰囲気が伝わるかと思います。

デザイナーズハック 004 「さわってみよう Firefox OS」 が終わりました | designers-hack(デザイナーズハック)

イベント概要

イベント名 004 さわってみよう Firefox OS designers-hack(デザイナーズハック)
日時 2012.11.3 Sat. 10:00-18:00
場所 豆蔵 トレーニングルーム at 新宿
参加者 30名

デザイナーズハックといいつつ、今回デザイナーさん @koeri 含めて5名と少なめ。

Firefox OS ?

iOS, Android, WindosPhone, などスマートフォン OS が激化する中、Mozilla が開発している新しいスマートフォン OS です。

他の OS との違いとしては、全てを Web の標準技術で作ろうとしていること。
なので OS 標準の UI なんかも全て HTML/CSS の知識があればいじれてしまうっていうのが、他 OS とは違った楽しみがあります。

詳しくは、Mozilla Japan 浅井さん (@dynamitter) のスライド参照。
当日の資料が SlideShare にアップされてなかったので似たような内容だった HTML5 Conference 2012 #html5j が熱かった!! でのスライドを引用。

実は HTML5 Conference 2012 でも私たち、浅井さんのお話聞いてたのですよね。

Firefox OS シミュレータをインストール

そんなわけで始まった、おさわりイベント。
参加者には事前準備に Firefox OS のシミュレータをインストールしておくよう連絡がありました。

「さわってみよう Firefox OS」に参加の方へ | designers-hack(デザイナーズハック)

Firefox OS のシミュレータ Firefox Extension "r2d2b2g" をインストールするとライブラリフォルダに OS のあらゆる機能がフォルダわけされてるのが見えます。

階層めっちゃ深いですけど。
https://lh3.googleusercontent.com/-1ZAkNoS4CJY/UJZHmvmOjdI/AAAAAAABK_8/OI_62xs9XiE/s640/121104-0001.png

このフォルダ内にある "application.zip" を解凍した中にある index.html や CSS, JacaScript を書き換えることで、デザインをカスタマイズすることができます。

書き換えたあとは、また全てのファイル類を "application.zip" として圧縮して Extension を再実行するだけで変更が反映されます。

@koeri 的にはまずこの構造理解するのに時間かかりまして、スタートラインが遠かったです orz
あるべきはずの場所にフォルダ群がなくて、探すこと小一時間。

Mac って Lion から ライブラリフォルダが不可視になってるんですね。
知らなかったよ!わたし恥ずかしい!

てことで、ターミナルでファイルを見えるように呪文をかけます!

chflags -R nohidden Library/

ようやくライブラリフォルダが見えるようになりました。

ファイル構造とか理解したところでようやく Let’s カスタマイズ!と思い、スプラッシュ画面+ロック解除音チームとして、色々頑張ることにしました。

デザイナー目線で Firefox OS を変えよう!

@masap さんによるお話。

Firefox OS Ver.1 に向けて開発中

  • テスター達によるテスト段階。
  • 新規機能の取り込みはしない。
  • 2013年初頭にブラジルにて発売予定。

テスター達の評価

ポジティブなコメント

  • フォトビューワが高速
  • アイドル時の電池のもちが良い
  • Bluetooth がちゃんと動く

ネガティブなコメント

  • キーボードにスペースキーない
  • WiFiが繋がらない
  • SMSを読み終えてもSMS通知が消えない
  • 設定した時刻にアラームが鳴らない

Gaia とは

  • HTML5(+CSS +JavaScript) で書かれた UI
  • UI 自体が HTML5 で書かれているのは Firefox OS だけ

起動画面

起動画面の色、画像、などまで HTML でいじれるようになってる。
ここまでいじれる OS は Firefox OS だけだと思います。

電話アプリ

音も HTML で指定して出せるようになっている。
たとえば HTML の箇条書き指定 li で追加するだけで項目を増やせる。

デザイナーさんのアイディア求むのはココ!

  • 設定画面に華がない
  • アイコン 何を表しているのか分かりづらい
    • 特に Notifications とか
  • ウィジェット (画面バーツ)
    • 小さくて押しづらい戻るボタン
    • 素人っぽいトグルボタン
    • 押せるように見えないボタン
    • OK などの確定ボタンが右上にある
  • ロック解除時の音が変
  • スプラッシュ画面 + ロック解除 (アニメーションもCSSで指定できる)

GitHub でソースが公開されている。
提案を送って受理されればブラジルで発売される端末でも搭載される!

成果

@koeri は Flash で アニメーションサンプル 作るも、それを HTML/CSS で実装できないという体たらく。

@soranchu はシミュレータが Windows で動かないというトラブルに合い、ずっとバグ探し。

そんな感じで大した成果出せないまま一日終了。ちーん。

でも、OS の UI を直接いじれちゃう!というのはとても面白かったです。
Web 系は本業ではないので、HTML/CSS もっとちゃんと勉強しないとなーと思った次第です。

それにしても

OS たくさんでてくるのは色々なバリエーションがあって個人的には楽しいですけど、それについていけるユーザーがどれくらいいるんだろう。というのが気になったりしました。