スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Uninput キーボード (Simple) のインストール数

拙作の Unicode キーボードが昨年末時点で 10,000 を越えてました。(2016-01-28 現在で 11,105 回)
ありがとうございます。
世界の Firefox OS ユーザはまだまだ健在。

Uninput Keyboard (Simple) - install stat: 2015-05-01 to 2016-01-28

気に入っていただけたら、有料版の Uninput Pro Keyboard も使ってみてください。

今年作った Firefox OS アプリ

これは、Firefox OS Advent Calendar 2015 23日目の記事です。

今年作った Firefox OS アプリを紹介します。
(それぞれ、Flame で動作確認しています。)

東京ラジオちゃん

FM ラジオ波を受信してラジオを聴くアプリです。
東京周辺のラジオ局をセットしてありますが、地域切り替えの UI を付けてラジオ局のデータ (JSON) を加えれば、他の地域でも楽しめます。

実は、プロトタイプができたのは一年くらい前で、MDN の FMRadio API の記事を翻訳した時に、この API を使って作りました。
JavaScript によるハードウェアの制御が体感できました。

Fx0 がまだ開発中の時に、KDDI の方に新しい端末で FM ラジオが使えるのかこっそり尋ねてみたりしたこともありましたが、残念ながら Fx0 で FM ラジオの受信はできないという結果になりました。

FM ラジオ搭載端末のお持ちの方は、ソースコードを自由にいじって遊んでください。

百人一首

小倉百人一首を閲覧するアプリです。
ゲームアプリではありません。そのうち坊主めくりでも実装するかもしれないので各カードのデータだけは入力してあります。
カルタ取りの読み上げ用にカードをランダム順で表示する機能もあります。

いろいろな環境で動作するアプリを作ってみたかったので、スマートフォンだけでなく、タブレットやデスクトップにも対応しています。
工夫したのは、タッチ操作だけではなく、キーボードナビゲーションができるところです。カーソルキーやスペースキーでページ移動等ができます。
l10n.js を使用して 6 か国語にも対応しています。

画像は、Wikimedia Commons のパブリックドメインのデータを使用させていただきました。
画像の圧縮には Optimizilla というオンラインで画像が圧縮最適化できるサイトを利用しました。

Uninput Keyboard

Unicode 文字をコード番号で入力するキーボードです。無料の Simple 版と有料の Pro 版があります。

Simple 版のほうは、Unicode 8.0 にアプリとしては世界最速 (?) で対応しました。
Pro 版の方は、Unicode 8.0 対応に加えて、こちらもおそらく世界最速で、公式の Emoji Data のエイリアス名 の表示に対応しています。

Simple 版は、Unicode の新版対応のバージョンアップのみ。Pro 版は、それに加えてさらに機能を追加していく予定です。

JaK

日本語フリック入力キーボードアプリの試用版です。

キーボードのフロントエンド部分 (文字入力、変換、編集、モード切替) を試すために作りました。
主に、自作の Swiper.js によるフリック入力と、InputMethod API による文字入力および変換操作です。

Protractor2D

カメラで撮った画面上で角度を測る分度器アプリです。

9 月開催の Firefox OS コードリーディングミートアップ #21 で発表しました。
3 日で作れて、何かハードウェアを制御するアプリがいいと思っていたので、前から構想していたこの測定アプリを作ることにしました。
Camera APISVG を使っています。

Firefox Marketplace に登録申請した時に、1か月待たされた挙句、なぜか (当時開発中の) 「Firefox OS 2.5 で動かないから」という理由で一旦却下されてしまったたわけですが、レビュアに「リリース版の 2.1 以前で動くんだから再レビューしてよ」と返信したら動作確認されて無事公開されるという顛末がありました。

Firefox OS 2.2 以降でカメラが使えなかった理由は、API の仕様変更によるもので、MDN の記事も 12 月まで更新されていませんでした。
仕方が無いのでソースコードを調べて 2.2 以降でも動作するようにしました。

連雀 (RenJaK)

Firefox OS 用の日本語入力アプリです。(未公開)
Firefox OS 日本語版にとってのミッシングピースである IME を開発しています。

Fx0 にはオムロン製の iWnn が搭載されていますが、その他の端末では、粗末な標準の日本語キーボードしかありません。というわけで鋭意製作中です。

InputMethod API の使い方とサードパーティキーボードのインストール周りは Uninput で、キーボードのフロントエンドは JaK で実験済み。
実は、辞書周りと変換エンジンの設計・実装には 3 年くらいかかってます。100% JavaScript で実装し、実用的なレスポンスで使えることを目指しました。プロトタイプと呼べる基本部分は 8 月ごろにすでに完成しており、当初の目標は達成しています。

辞書のデータは、基本漢字として 常用漢字 を入力済み、その他に naist-jdic をベースに整形・整理したものを使います。
この naist-jdic は、Firefox OS 標準の日本語キーボードの辞書データとしても使われています。

現在は、この naist-jdic の単語をすべて見直しているため、その整理に時間がかかっています。約 28 万行あり、進捗は 80% くらい。さらに、足りない単語も数千語追加しています。
とりあえず、辞書さえあれば使える感じになるので、整理ができ次第、Firefox Marketplace で公開する予定です。
お楽しみに。

...続きを読む

Swiper.js

JavaScript でタッチスクリーンのスワイプ・フリック操作を扱うライブラリをつくりました。
B2G (Firefox OS) のキーボードアプリで使われている swiping_detector.js を基にしています。

github.com/marsf/swiper.js

使い方

HTML ファイルでスクリプトを読み込んでください。

<script type="text/html" src="swiper.js">

JavaScript ファイルで、まず、Swiper のインスタンスを作成してください。引数には、操作対象の DOM 要素を渡します。

var swipe_container = document.getElementById("container");
var swipe = new Swiper(swipe_container);

次に、start() 関数で、要素に touchstart, touchmove, touchend イベントを追加します。

swipe.start();

stop() 関数はイベントを削除します。スワイプが不要になったタイミングで呼び出してください。

swipe.stop();

.onswiping プロパティと .onswiped プロパティにスワイプイベントで呼び出す関数を定義してください。どちらも任意です。

// スワイプ中 (touchmove) のイベントハンドラ
swipe.onswiping = swipingHandler;
function swipingHandler (event) {
  ...
}

// スワイプ後 (touchend) のイベントハンドラ
swipe.onswiped = swipedHandler;
function swipedHandler (event) {
  ...
}

上記の関数の event に、それぞれスワイプ時のデータが渡されます。
例えばスワイプ方向は、次のようにして取得できます。

var dir = event.direction;

onswiping の関数に渡されるデータは以下のとおり。

  • target: <DOM 要素>
    スワイプ開始時にタッチした DOM 要素です。
  • dx: <整数値>
    X 軸方向の移動量です。画面右方向が正の値。
  • dy: <整数値>
    Y 軸方向の移動量です。画面下方向が正の値。
  • direction: <文字列> 'right' | 'left' | 'up' | 'down' | 'point'
    スワイプ方向です。スワイプ中の方向は 4 方向のみです。 移動量が X, Y ともに 0 の場合は 'point' を返します。

onswiped の関数に渡されるデータは以下のとおり。

  • target: <DOM 要素>
    同上。
  • dx: <整数値>
    同上。
  • dy: <整数値>
    同上。
  • angle: <整数値> 0 - 360
    スワイプの始点と終点を結んだ直線の角度です。水平右方向が 0 度、そこから時計回りに 360 度です。
  • length: <整数値>
    スワイプの始点と終点を結んだ直線の長さです。
  • direction: <文字列>
    同上。ただし、ソースコードの dir_array 配列を書き換えることで何等分にでもできます。右方向から時計回りに定義してください。

追記 (6/30):
ver 0.2.5 向けに更新。

l10n.js 資料 (続き)

先日の FxOS コードリーディングミートアップ#16LT で発表した資料です。

l10n.js updates for Firefox OS 2.2 [PDF, 163KB]

前回の内容は、L20n API version 1.0 でした。今回は L20n API version 2.0 になって仕様変更したところの紹介です。

Firefox OS アプリの I18n に l10n.js を使用している方は、これを参考にしてください。
大きく仕様変更され、以前の方法では使えなくなったので注意してください。