モノトーンの伝説日記

OBS Studio と Blackmagic Design が大好き。

最近やってること、「Mntone HTML5 UIKit(仮称)」について

 自分的にはなかなかよくできてると思うんだけども。

f:id:mntone:20141209215055p:plain

概要

  1. 作ろうと思ったキッカケ
  2. 今後、どうしていくか

1. 作ろうと思ったキッカケ

 やはり HTML5 はいろいろなプラットフォームで動くのが非常に魅力的で、中には 3DS とかのゲームデバイスも使えるわけで、やはり Web アプリや native HTML5 アプリでの汎用性もあります。しかし世の中、WinJS などそういうのがありますが、やはりあれらは Web アプリに使うのに個人的に「でかい」と思ってます。100 KB 越えってのは個人的に許せないなぁ、って思うんですけど。圧縮して 50 KB ぐらいに収まってほしい、って思ってます。

 でもまあこんな理由だけで使わないわけはないよね。

 もちろん、デザインが嫌いだから――ってのもあります。

 否定はしませんが、最近、同じような Web サイトばっかりで本当に詰まらんですね。「重い」「似てる」「コントラストが低い」の 3 段活用的な。

 私はコントラストを低くして設計する意味がわからないのです。コントラストは OS 側で設定できるべきだし、むしろ低コントラストに偏る意味が私にはわからんのです。

 何より、固定フォントサイズという最悪な状態になってたりする。固定フォントサイズ前提のサイトとか見ると悲 C。

 ブラウザーにはフォントサイズ設定ができたり、あるいはフォントサイズ指定を切ったりとかさまざまな設定があるけど、どのぐらいの人がこの設定を切って、コンテンツが見切れて表示されないとか確認しているのでしょう。

 IE6 対応する前にまずそっちやれよ! って思うのは俺だけなんですかねぇ…

 まあそういうわけで WinJS は好きなんだけど、流石にあれは巨大なライブラリーすぎて Web アプリじゃかなりつらいので、そういうわけで自作 UIKit を作ろうと。

 題名、仮称ってなってるけど、UIKit っていう別製品あるから、正直この名称を使うのはどうかなーって思ったりするけど、一応略称は MNUik なので、いいのかなーって思ったり。

2. 今後、どうしていくか

 私が Web アプリで一番大事なのはキーボード ユーザービリティだと思ってます。これが本当にないアプリが多い。私はキーボードで操作する人なので、アプリはやっぱりキーボード♪ だと思ってますから、このあたりのサポート、JavaScript 使ってできるだけライトウェイトに仕上げていきたいなーというところです。

 ただまあキーボードサポートの前に、コレクション同期の仕組みを実装しないといけないですね。それやらないといちいちめんどくさいことするのかと…w

 うーん、そこは外部ライブラリーに頼るのもアリなんでしょうけど、外部ライブラリーに頼るとなると、キーボードの実装とかいろいろ組み込めない気がするんですけど。うーん… まだ未定です。

 とりあえず最近始めたプロジェクトで最終的な目標は、キーボード、マウス、タッチパッド、ペンタブ、タッチパネル、リモコン、もろもろで使いやすいってのを目指したいなーってところです。リモコンってのは TV のブラウザーって思ってもらったらいいです。今後 Smart TV が爆発的に売れなくても徐々に移行すると思うので (まあハイブリットキャスト [HTML5] 搭載していく方向性なので)、そんな感じで将来を見据えて、みたいな。

 GitHub にまだプロジェクトないですし、今練っているところです。特別、何らかの固有のデザインを実装するつもりはなくて汎用的な機構を搭載する予定です。Flyout 周りは汎用的に大事だと思ってますし、Dialog もそうだし、Tooltip もそうなのでこのあたりは搭載します。

 だいたいそんなところですかね。キーボード サポートが一番大変そう。

 WinJS の JavaScript コード読んでて思ったんですけど、DOM ツリー解析して WinJS.UI Object 生成したりとかいう処理やってるんですね。もちろん JavaScript 側で初期化もできるみたいでなかなか面白い作り方だな、って思いました。

 拡張 UI に関してはそれに近いやり方になるんじゃないんですかね。レーティングとかスライダーとかこのあたり将来的に実装したいですが、それやるのもキーボードサポートの後ですかね。

3. 他

 もともと自分のサイト用の新デザイン作ろうと思っててそこから fork する形で MNUik を作り始めました。なので、俺の思想が入りまくってますがいいです。今ある Web アプリをきちんとサイトとシームレスなデザインで使えるようにしたいですね。1 つしかないですけど(´・ω・`)

 一応、テストしながら作ってるので、以下のサンプルページはどんどん更新されます。LESS 使ってそれを WinLess でコンパイルかけてそれをそのままアップロードしてるだけなので、中身はあれかもです。

 こちらのソースコートですが一応 MIT license です。ただ、正直 Bootstrap とか UIKit 見てるとこういうデザインは嫌いな人が多いと思うので、誰も使わないので安心ですね。いや、まあ使うなら一声かけてくださいよ。喜びますから。

http://mntone.minibird.jp/mnuik/

 以上!