関東 Firefox OS 勉強会 11th に行って来たので概要

行ってきました、飯田橋駅前の出来たてビル、飯田橋グラン・ブルーム。
ひろ〜い会議室にけっこう人がギッシリで、80人ほど集まったそうです。
白髪のお爺さんから若い女性まで色々な方がいらっしゃいましたが、これから開発を始めようと思っている人が多い感じでした。

始めにKDDIさんがプロモーションのために出てきまして、Fx0とロック画面アプリのお話をしていました。
自分は別途記事にしているのでここでは割愛します。

Fx0の存在はほとんどの人が知っていましたが、実際に購入していた人は3分の1くらいですかね。
仲間がいっぱいいて良かったです。

登壇者2人目のMozillaの方のお話は、スミマセン、すでに知っている情報ばかりだったのであまり印象に残っていません。

 
主役は登壇者3人目のCSPのお話だったようです。
マニフェストでつまずく人が多いので詳しく解説してくれました。
詳細は登壇者さんが使っていたスライドでご確認ください。

 
で、なぜ自分がこの勉強会に参加したかと言いますと、「キャッシュはどこへためるのか? ストレージにしたほうがいいのか?」という以前から抱いていた疑問を解決するためだったのですが、おかげさまで答えは見つかりました。

おまけで個人的に役に立ったお話があったのでそれをご紹介します。

まずprivileged(特権アプリ)でjQueryを使うとエラーを起こすという話がありまして、

工エエェェ(´д`)ェェエエ工!!!!!

てな感じでちょっと衝撃でした。

自分でjQueryを書き直すか、そもそもライブラリは重いので一から自分でJavaScriptを書くといいよと、「そこにある水取ってきて」くらいにサラリとおっしゃってました。

あと、そもそもFirefox OS用アプリを作る際にホスト型がいいのかパッケージ型がいいのか、パッケージ型ならprivilegedなのかそうでないほうがいいのか、という疑問です。

迷うんですよね、これ。
今作っているアプリの設計をしている時もかなり迷いました。

上のスライドにもあるかと思いますが、決めるポイントは以下だと思います。
(1) 自分で自由に使えるサーバーがあるか(サーバー負荷のことも考慮に入れること)
(2) 特権アプリでしか使えない機能を本当に使う必要があるのか

(1)のサーバーがないならパッケージ型しか選択肢がないです。

(2)の特権アプリ限定機能、例えばカメラを使いたいなら、元々入っているカメラ機能を呼び出すことが出来るので、必ずしもprivilegedにする必要がなかったりもします。

privilegedにしてしまう弊害としては、Marketplaceでの審査に時間がかかったり、頑なに同一オリジンに限定されるため外部サイトのファイルの読み込みができなくなります。

例えばバナー広告とかアナリティクスのコード埋め込みで支障が起きます。
iFrameを使うという裏技もあるようですが、なんだかメンドクサそうですね。

※同一オリジンとは、要はクロスドメイン禁止、ポートも同じでないとダメよ、httpとhttpsも区別するからね、というやつです。

なので登壇者さん曰く、なるべくprivilegedにはせず、よっぽどのことがない限り普通のパッケージ型にしておいたほうがいいよ、とのことでした。

んで、自分が困っていたストレージの問題に戻ります。
ストレージを使うならprivilegedにしないといけないわけですが、外部サイトをスクレイピングして使うアプリを作っているので、その時点で同一オリジンの原則から大きくはみ出しています。

特権アプリ、絶対無理じゃんw

というわけで答えがあっけなく見つかり大いに役立ちました。
登壇者さん、ありがとうございました。

しかしパッケージ型アプリといえば、キャッシュをためたい場合が多々あるかと思います。
例えば2ちゃんねるの専ブラアプリを作りたい、という時はキャッシュしておくと地下鉄の中で電波が悪かったりすると重宝しますよね。
そういう時どうするか、というお話になります。

けっこう大量だったらユーザーのSDカードに保存できるといいですが、privilegedにしないといけません。
ユーザーに消されるという危険性も孕んでいます。

そこでlocalforageの出番ですよ、ということでlocalforageなら実質容量制限がありません。
localforageとはMozillaが作ったストレージライブラリです。
ちょっと使ってみたのですが、PCのFirefoxブラウザでもWebIDEでもちゃんと動いてました。

今一番使われているlocalStorageだと容量制限が厳しかったり、動作が重くなったりするので推奨されていません。

ライブラリのソース自体がかなり頻繁に書き直されているようで、1年前の記事に書いてあるコードではエラーになってました。
というかGitHubの最新版でエラーになっているので、それをデバッグしてくれている人の個人サイトからライブラリファイルをもらってきたくらいです。

localforageはFirefox OSではなくてはならない存在になると思うので、後日詳しくこのブログで取り上げます。

JavaScript:Fx0専用アプリ「Kernel」ソース解説

au Fx0公式サイト内の「Creator Showcase」でソースを公開しました。
http://showcase.kddi.com/csc/works/view/107

Fx0専用の実際のソースは上のサイトからダウンロード出来ますが、PC用も作ってあるので、何をやっているのかこちらで詳しく解説してみようと思います。

Fx0専用に特別なことをしているわけではなくて、横幅や文字の大きさなど、見やすいように体裁を整えているだけなので、JavaScript部分に大きな違いはないです。

出来上がりのサンプルはこちら

ご覧頂くとわかるように文字を1文字ずつ表示し、ウィンドウからはみ出した場合はスクロールしているだけです。

jQueryはバージョン2の最新版を使っています。
ソースをコピペして使用される場合はjQueryを読み込んでください。

まずは文字を1文字ずつ表示するだけのスクリプトです。
表示させたい文字列をdiv id=”cont”に表示させています。

<head>
<script>
$(function(){
	var str="ニャンコが毛深くて困る";//表示させたい文字

	var n=0;//文字数
	var totalNum=str.length;//全文字数
	var timer=0;

	function display(){
		if(n <= totalNum){
			var pickupText=str.substr(0, n);//文字を抽出して1文字ずつ追加
			$("#cont").html(pickupText);//テキストを表示
			n++;

			timer=setTimeout(function(){
				display();
			}, 150);
		}else{
			clearTimeout(timer);
			return;
		}
	}
	display();
});
</script>
<title>test-1</title>
</head>
<body>

<div id="cont">
</div>

</body>
</html>

サンプルはこちら

最初、setTimeoutをdisplay()の外に出してしまい、なかなか動かなくて難儀したのですが、setTimeoutは関数の中に入れないといけないのですね。
すっかり忘れていました。

で、これだと表示させたい文字列が長いと破綻してしまうので、別のdivに表示させたい文字を用意してCSSでhidden(非表示)にしてしまおうと考えました。

しかしここで問題が発生、ウィンドウからはみ出すと、はみ出したっきりそこで動作が止まったように見えてしまうのです。
つまりウィンドウをはみ出す1行が表示される際に、1行分下にスクロールしないといけません。

そしてもう一つ問題が。
HTMLが自動で表示される場合、例えば「<br>」があると、端末側で<br>がタグだと解析が終わるまで「<」を表示してしまうのです。

半角の「&」があると自動的に「&amp;」と表示されるようなのですが、「&am」くらいまで一瞬表示されてしまうし、tabは無視されてしまいます。

その例がこちら
とても見苦しいです。

そこで<br>を「@」に、半角「&」を全角「&」に、半角「>」を全角「>」に変換しているというわけです。

PC用はおまけでtabも変換しておいたのですが、そもそもHTMLタグを使わず<pre>タグで囲んでしまってもいいと思います。
その場合は自動改行をしなくなるので、1行があまり長いと横がウィンドウからはみ出し、横スクロールバーが表示されてしまいます。

スクロールは普通にanimate()メソッドを使えばおk。

出来上がりのスクリプトはこちらです。

<script>
$(function(){
	var n=1;//文字数
	var totalNum=$("#sauce").html().length;//元原稿の全文字数を取得
	var winHeight=$(window).height();//ウィンドウの高さを取得
	var contHeight=0;//#contの高さ
	var contTop=0;
	var timer=0;

	function display(){
		var configText=$("#sauce").html();//元原稿を読み込み

		if(n <= totalNum){
			//文字を抽出して1文字ずつ追加
			var pickupText=configText.substr(0, n)+"<img src='img/cursor.gif'>";

			pickupText=pickupText.replace(/@/g, "<br>");//以下文字を変換
			pickupText=pickupText.replace(/&/g, "&");
			pickupText=pickupText.replace(/>/g, ">");
			pickupText=pickupText.replace(/%/g, '&nbsp;&nbsp;');

			$("#cont").html(pickupText);//テキストを表示
			n++;

			timer=setTimeout(function(){
				display();
			}, 150);

			//その時点での#contの高さを取得
			contHeight=$("#cont").height();

			//ウィンドウからはみ出したらスクロール
			if(contHeight>winHeight){
				contTop=contHeight-winHeight;
				$(function(){
					//はみ出した分だけ移動
					$("html,body").animate({"scrollTop": contTop},1);
				});
				return false;
			}
		}else{
			clearTimeout(timer);
			return;
		}
	}
	display();
});
</script>
<title>Kernel</title>
</head>
<body>

<div id="cont">
</div>

<div id="sauce">
#!/bin/bash@
@
REPO=${REPO:-./repo}@
sync_flags=""@
@
repo_sync() {@
%rm -rf .repo/manifest* &&@
%$REPO init -u $GITREPO -b $BRANCH -m $1.xml $REPO_INIT_FLAGS &&@
 ・
 ・
 ・
</div>

</body>
</html>

サンプルはこちら

マニフェストの書き方はこちらを参照ください。

始めてJavaScriptを書いた時にこんなアニメを作って遊んでました。
当時はクロスブラウザ対策がたいへんで、他のプログロマーさんに手伝っていただきました。

Fx0を見た瞬間に思い出したのがこのアニメだったので、今回は自分で作りました。
Firefox OSがいつしか台風の目にならんことを願い、これからもアプリの開発を続けていくつもりです。

シンプルなコードですが、皆様のお役に手に立てれば幸いです。

Firefox OS:Fx0専用ロック画面アプリを作る

とにかく一筋縄ではいかないFx0専用アプリのお話です。
人柱をやってみました。
ホスト型の「Hitmanga」アプリをFirefox Marketplaceで公開する時はスンナリいったのですが、パッケージ型の場合は最後の最後までけっこうたいへんです。

よく陥ると思われる問題点
(1) JavaScriptが動かない(これは単なるスキル不足です)
(2) manifestファイルの作り方がわからない(KDDI独自仕様に変更されています)
(3) auのCreator ShowcaseサイトからFx0にインストールが出来ない(zip解凍に失敗する)

(1)はこちらで詳しく解説しています。

(2)ですが、今回のロック画面アプリはパッケージ型なので、zipファイルの中にある「manifest.webapp」の他にもう一つマニフェスト・ファイルを作らなければいけません。

ところがここで問題が発生。

MDNというFirefox OSの開発者用オフィシャルサイトでは「package.manifest」というファイル名にしろと書かれているにも関わらず、Creator Showcaseサイトからファイルをアップロードする際に「拡張子は.webappでないとダメね」と叱られます。

そして肝心のマニフェストファイルをMDNにある例文をそのままコピペして上書きしても、「マニフェストの中身を正しく書き直してください」と叱られて、なかなかアップできません。

仕方ないのでCreator Showcaseサイトにアップされている、au公式くまモンアプリのソースを頂いて上書きし、ファイル名も同じにしておきました。
とりあえず通ったJSONコードを貼っておきます。

Firefox OS勉強会でこの件が話題になったのですが、KDDIのサーバー側の設定で、各プロパティをシングルクオテーションで囲まないといけないのだそうです。
ひっかかるのは「csp」の部分です。
面倒なので下のをコピって使ってください。

「package」フォルダの中で使用する「manifest.webapp」はこちら。
必ずトップのindexと同じディレクトリ(ルートディレクトリ)に入れる必要があります。

ファイル名:manifest.webapp

{
  "version": "1.0.0",
  "name": "アプリ名",
  "description": "簡単なアプリの解説",
  "launch_path": "/index.html",
  "icons": {
    "16": "/img/icon-16.png",
    "32": "/img/icon-32.png",
    "128": "/img/icon-128.png",
    "256": "/img/icon-256.png",
    "512": "/img/icon-512.png"
  },
  "csp" : "'default-src' *; 'script-src' 'none'; 'object-src' 'none'; 'frame-src' 'none'; 'connect-src' 'none'",
  "role":"lockscreen",
  "developer": {
    "name": "作成者の名前",
    "url": "作成者のサイト"
  },
  "default_locale": "ja"
}

そしてもう一つはpackageの中には入れず、Creator Showcaseサイトでアップロードするミニマニフェストです。

ファイル名:manifest-mini.webapp

{
  "name": "アプリ名",
  "version": "1.0.0",
  "description": "簡単なアプリの解説",
  "package_path": "http://hogehagehogehage.com/package.zip",
  "role":"lockscreen",
  "developer": {
    "name": "作成者の名前",
    "url": "作成者のサイト"
  },
  "default_locale": "ja"
}

これらがCreator Showcaseサイトでアップロードできるまでに自分は半日を費やしました。

そして最後の難関、Fx0にインスコできない!!! という問題が発生。

原因はzipの圧縮方法にありました。
packageフォルダをそのまま圧縮してはいけないのです。
packageの中のファイルやフォルダを選択して圧縮しないといけなかったのですね。

これだけで3日くらい費やしましたw

というわけで、(自作)Fx0専用ロック画面アプリ「Kernel」はこちら↓

Kernel

 
http://showcase.kddi.com/csc/works/view/107
ソースも公開されています。

Firefox OSアプリ用に戻るボタンとリロードボタンを付ける

ここ半年くらいずっと体調を崩して開発から離れていたのですが、やっと少し良くなってきたのでアプリの改善を再開しました。

まずはFirefox OSアプリ、ヒットマンガ・ネットに戻るボタンを付ける、というやつです。

Firefox OSアプリに戻るボタンを付ける

 
おまけで再読み込みボタンも付けておきました。
メモ代わりに、作ったコードを公開しておきます。

サイトをFirefox OS用アプリにしてしまうと、表面上はブラウザを使わないので戻るボタンがなくなってしまい、たいへん不便になります。

ボタンはFirefox OSでアクセスした場合のみ表示しないといけないので、当然UserAgentを調べるスクリプトを書きます。

■Firefox OSのUserAgent
 携帯電話:Mozilla/5.0 (Mobile; rv:26.0) Gecko/26.0 Firefox/26.0
 タブレット:Mozilla/5.0 (Tablet; rv:26.0) Gecko/26.0 Firefox/26.0
 デバイス特有:Mozilla/5.0 (Mobile; nnnn; rv:26.0) Gecko/26.0 Firefox/26.0
 ※アプリからアクセスしても同じです。

■Fx0のUserAgent
 Mozilla/5.0 (Mobile; LGL25; rv:32.0) Gecko/32.0 Firefox/32.0

■他OSのUserAgent(例:ブラウザにFirefoxを使った場合)
 Android:Mozilla/5.0 (Android; Mobile; rv:26.0) Gecko/26.0 Firefox/26.0
 Mac OS X:Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:10.0) Gecko/20100101 Firefox/10.0

「Android」や「Macintosh」の部分がFirefox OSの場合は「Mobile」か「Tablet」になるってことですね。
バージョンはコロコロ変わってしまうので正規表現で書きます。
以下、JavaScriptです。

<script type="text/javascript">
var UA=navigator.userAgent; //UserAgent取得

if(UA.match(/Mozilla\/[0-9]*\.[0-9]* \((Mobile)|(Tablet); .*rv:[0-9]*\.[0-9]*\)/)){
	//Firefox OS用の処理
}else{
	//それ以外の端末用の処理
}
</script>

これで分岐できます。

で、余談ですが、今回フッタに固定表示メニューを作ったのですけど、IEのことは考えなくても良いので単純にCSSで「position:fixed;」を指定すれば問題ありませんでした。

ただ、Fx0では処理が追いつかないようで、スクロールすると固定メニューが動いちゃうようです。

ちなみに戻るボタンとリロードボタンはHTML内に単純にJavaScriptで書きます。


<a href="#" onClick="history.back(); return false;">戻る</a>
<a href="#" onClick="location.reload(true);">リロード</a>

これで問題ありませんでした。
 

「Fx0 2円運用出来る説はデマでした」は嘘言いました、ゴメンなさい by KDDI

KDDIから二度、正式に謝罪を受けました。
今週、メールでKDDIと何度かやり取りをしたのですが、ご丁寧にメールの最後に「許可無く転載することを禁じます。」と©マークまで付けているのでコピペが出来ません。

引用程度なら問題ないとは思いますが、謝罪文を要約しますと、

ゴメンなさい、ゴメンなさい、ゴメンなさい、
間違いです、誤りです、嘘でした、申し訳ございません・・・!

ってな感じです。

補足しますが、以前このブログで「Fx0 2円運用出来る説はデマでした」という記事を書きました。
載せたままにしておくと紛らわしいし誤解を招くと思うので、今は引っ込めてあります(ログは残してありますが)。

事の経緯をご説明致します。

2014年12月に発売されたFx0の実機を確認し、自分はすぐに購入を決めました。
発売されるとすぐに「3円(今は2円)運用可能」という記事が週アスPLUSなどに掲載されました。

※2円というのはユニバーサルサービス料のことで、2円運用というのは実質基本料が無料ということです。

自分は2円運用できなくても買う気満々だったので、「へー、そうなんだー」くらいにしか思っておらず、1月に新宿のau直営店でFx0を購入しました。
その時店員から受けた説明は以下のとおりです。

・データ定額(LTEフラット)に入らないとFx0おトク割は適用されない
・月々の請求額は1,000円くらいになる

ここで自分は少しゴネました。
「ネットには2円運用できたという記事がありましたが」と。
すると店員は、

「契約書に『※他の割引施策と併用できない場合があります』って書いてありますよね。それがこれです。
これキャンペーンなんで、誰でも割、Fx0おトク割、LTEフラット、3つセットじゃないと割引はできないです。そもそも入力できないし」

つまり、すでに「誰でも割」が適用されているから重複して「Fx0おトク割」は適用されず、結果、2円運用はできません、とのことでした。
この店員の言葉は今でもハッキリ覚えています。

その後これをブログの記事にしたら「自分は2円運用できている」というコメントを頂きまして、早速auのコールセンターに確かめました。
「2ヶ月目以降の請求額はいくらですか?」と聞いたところ、

「税込で1,011円です」

と言われました。
そしてこの時「契約書にはFx0おトク割と書いてありますが?」というようなことも聞いたと思いますが、それに対しては、

「お客さまの場合、データ定額に入っておりませんので割引は適用されません」

と言われたと思います。
コールセンターに電話すると「会話は録音しますよー」と警告されるので、このログはしっかりKDDIに残っていただろうと思います。

その後しばらく忘れていたのですが、3月に入ってクレジットカードの請求額がドカンと5万円増えたので「そういえば」と思い出し、auお客さまサポートで契約内容を確認しました。

「適用中のキャンペーン」には「Fx0おトク割」と書いてあり、3月分の請求額が「2円」になっていました。

ソッコーでauコールセンターに電話しました。
ところが日曜日の夜9時くらいになっていたのでなかなか電話が繋がらず、メールでの問い合わせに誘導されたので問い合わせフォームからメールを送りました。

「嘘をついたのですか」と。

返信は早かったです。
内容は、

「Fx0おトク割の適用を確認しました」
「店舗および電話窓口にてご案内に誤りがあり、誠に申し訳ございません」

ここでブチっと切れましたけど、でも考えてみれば今回自分は損をしていないのです。
1,011円だと思っていたものが2円になっていたワケで、損害を受けたわけではありません。

ただKDDIともあろう大企業に嘘をつかれたことは事実です。
しかも二度。

ここはやはり怒っておかないといけないのだろうなと思い、「KDDIにとって一番イヤなことって何だろう?」と考えました。
それはこの事実を公表されて信用を失うことと、契約してもらえないことだろうと思い以下を伝えました。

「二度も嘘を付いたということですよね」
「常識的に、自分の店の商品の値段を間違えるなんて大企業のすることとは思えないです」
「怒るのは当然ですよね」
「客に二度も嘘をつくような会社は信用できないので、二度とKDDIのサービスは利用しないです」

「返事はいらない」と書いたのですが返信が戻ってきまして、テンプレだとは思うのですが、そうとも言えない部分もあり、ひたすら、ひたすら真摯に謝って頂きました。

というワケで、Fx0は2円運用できます
KDDIは嘘つきでした。