2013年10月16日に開催された「関東Firefox OS勉強会 4th」の発表資料です。 https://unsolublesugar.com/20131017/162844/

1. Firefox OSがモテないのは
どう考えてもお前らが悪い！
2013年10月16日
関東Firefox OS勉強会 4th
星影

2. 自己紹介

3. 名前：星影
Twitter：@unsoluble_sugar
所属：元SIer（全文検索エンジンが云々）

4. ファイナルファンタジーを
愛しています！
アイコンはFFじゃないけど…

5. 現在『光の戦士』としてエオルゼアの平和を
守っています。
訳：良いお仕事があれば教えてください

6. 言語：C/C++/Java/PHP/ASP.NET/
VB.NET/VBA/VBScript/JavaScript
環境：Windows/Linux/UNIX/Mac/
iOS/Android/Windows Phone/
Firefox OS ← New!!

7. ブログやってます

8. ブログ
http://unsolublesugar.com

9. ガジェット関連の記事書いたり
参加したイベントのまとめ書いたり
FFのこと書いたり
FFのこと書いたり
FFのこと書いたり
私はFF14を続けるよ！

10. 関東Firefox OS
勉強会

11. 4th

13. なん…だと……

15. ＿人人人人人人人＿
＞ 突然の登壇 ＜
￣Y^Y^Y^Y^Y^Y￣

16. スマホアプリ開発未経験だけど
愛さえあれば関係ないよねっ

17. Firefox OSアプリ
作ってみたいけど

18. スマホアプリ開発？何それおいしいの？

19. スマホアプリ開発？何それおいしいの？
そもそもFirefox OS端末持ってないよ

20. スマホアプリ開発？何それおいしいの？
そもそもFirefox OS端末持ってないよ
ていうかPeak+注文したけどまだ来ない
→10月中に来るー？

21. 色々つらいけど
愛さえあれば関係ないよねっ

22. Firefox OSを知ろう

23. Firefox OSを知ろう
「Firefox OSアプリ開発ガイド」を読む
http://www.ric.co.jp/book/contents/book_921.html

24. Firefox OS =

25. HTML5
+
CSS
+
JavaScript

26. Webの技術で作られている

27. これならできるかも∼

28. さわってみよう

29. 実機無いけど？

30. シミュレーターあり

31. さわってみよう
Firefox OS Simulator入れる
https://addons.mozilla.org/ja/firefox/addon/firefoxos-simulator/

32. さわってみよう
色々いじってみる

33. さわってみよう
色々いじってみる

34. 意外とイケるんじゃね？

35. 磯野ー、アプリ作ろうぜー

36. 作ってみた

37. Twitterクライアント

38. Icewolf

39. 開発環境
OS：Mac OS X Mountain Lion
エディタ：Sublime Text 2
ブラウザ：Firefox、Google Chrome
画像編集：Gimp
動作確認：Firefox OS Simulator

40. UIテンプレート

41. UIテンプレート
FxOS Stub
https://github.com/Jaxo/fxosstub

42. 認証

43. 認証
ライブラリ：jsOAuth
https://github.com/bytespider/jsOAuth
PINコードベースの認証

44. 認証
manifest.webapp
permissionsにsystemXHRを設定
アプリケーションのtypeをprivilegedに
XMLHttpRequest の引数に
{mozSystem: true}を渡す
XMLHttpRequest({mozSystem: true})
http://qiita.com/iizukak/items/d149047cd20041747640

45. タイムライン

46. タイムライン
ライブラリ：twitter-text-js
https://github.com/twitter/twitter-text-js
つぶやきに含まれるメンションやURL、ハッシュ
タグなどをハイパーリンク化してくれる

47. 新規投稿

48. 新規投稿
ライブラリ：charCount.js
http://cssglobe.com/jquery-plugin-simplest-twitterlikedynamic-character-count-for-textareas/
入力文字数をカウントして表示
Google Chrome上では日本語入力が確定前で
もリアルタイムでカウントされる。Firefox上で
は確定しないとカウントされない

49. ディスプレイガイドライン
https://dev.twitter.com/terms/display-requirements

50. Timestamps
1.For Tweets that have been sent in
the last 24 hours, use the short
form timestamp relative to the
current time, for example "20s" for
a Tweet sent 20 seconds ago, "3m"
for 3 minutes ago, "5h" for 5 hours
ago.
2.Tweets older than 24 hours should
show a short form date including

51. Timestamps
created_atの中身
→Fri Oct 11 06:23:11 +0000 2013

52. Fri Oct 11 06:23:11
+0000 2013

53. なんか見たことない
フォーマット
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

54. Timestamps
Twitter独自のフォーマットをJavaScriptの
Date()で取得できるフォーマットに整形
ついでにローカル環境のタイムゾーンで取得
var date = new Date(created_at);

55. Timestamps
Fri Oct 11 06:23:11 +0000 2013
Fri Oct 11 2013 15:23:11 GMT+0900 (JST)

56. Timestamps
UNIX時間（エポック秒）に変換
→PHPの strtotime() がJavascriptに
無かったのでライブラリを使用
http://phpjs.org/functions/strtotime/
現在時刻との差分をとって比較
相対時間 or 絶対時間表示の判定

57. Timestamps

58. Timestamps
24時間以内のつぶやきは相対時間で表示
秒(s)、分(m)、時間(h)

59. Timestamps
24時間経過後のつぶやきは絶対時間で表示
月日(MM/DD)、年月日(YYYY/MM/DD)

60. デモ

61. いつ出すの！？

62. いま…は無理ぽ

63. 今後の予定
ツイート詳細表示
リプライ、リツイート、お気に入り
Browser API 使う
検索機能の実装
Marketplaceへのアプリ登録申請

64. 俺はまだ
本気出していないだけ

65. 希望的観測
リスト
画像添付
位置情報
通知
マルチアカウント対応
etc...

66. Firefox OSアプリ開発
楽しい！！
✌( ω ✌ )三✌( ω )✌三( ✌ ω )✌

67. ところで

68. 関東Firefox OS
勉強会

69. 2nd

70. 開発端末の所有率

71. 4th

72. 登壇者不足

73. ・・・

74. Firefox OS
アプリ開発者いない？

75. Firefox OS
アプリ無い

76. Firefox OS
モテない

77. お前ら

78. お前ら
アプリ開発

79. お前ら
アプリ開発
しろ

80. Firefox OSがモテないのは
どう考えてもお前らが悪い！

81. ご清聴ありがとうございました。