1. JavaScript のあれやこれは
本当に FirefoxOS で動くのか？
2013/08/31
関西 FirefoxOS 勉強会 3rd GIG

2. 自己紹介
●
佐藤 諭
● @DummyFunny
●
BRILLIANTSERVICE 在籍
●
元 Web 屋

3. 前フリ

4. かつての Web は。。。

5. かつて JavaScript はいらん子でした
●
ブラウザの JavaScript 仕様が違う
●
またバグ。。。 orz
●
ダイヤルアップなめんなよ
➢
ページはシンプルに！
➢
JavaScript は使わな
い！

6.
救世主が現れる！
しかしある時！

7. GoogleMaps が颯爽登場

8. Ajax が注目の的に！
●
「非同期」通信スゲェ！
●
JavaScript を世間が認めだした
●
Web ページが表現豊かになり、アプリケー
ションらしくなってきた
歴史の転換点

9. 時は流れ…

10. JavaScript の時代がやってきた

11. 特にこの子は必須

12. ふと思い出す

13. あいつに泣かされ続けた日々を

14. まさかそんなこと…
無い無い無い！

15. … 無いとは思うけど。
一応ね。

16. お世話になるのが
●
JavaScript の開発で重要なのがライブラリ
プラグインが豊富

17. パララックス
●
視差効果
●
視界が移動する際に各物体がそれぞれ異なったス
ピードでスクロールすることにより、奥行き感を
演出する効果がある
● Parallax scrolling
● http://f6design.com/journal/2011/08/06/build-a-parallax-
scrolling-website-interface-with-jquery-and-css/

18. カルーセル
●
メリーゴーランド
●
画像などの要素を延々グルグル回す。
● carouFredSel
● http://caroufredsel.dev7studios.com/

19. スライダー
●
つまみとかそんな意味
●
画面上に表示され、マウスで操作するつまみの一
種です。上下や左右にスライドさせることで、画
面内の「位置」を指定したりします。
● FlexSlider
● http://www.woothemes.com/flexslider/

20. ローダー
●
読み込み中
●
「処理中です」をアニメーション表示するやつ。
待たされる方のストレスが和らぐとかなんとか。
● Ladda
● http://lab.hakim.se/ladda/

21. アコーディオン
●
蛇腹に鍵盤付いた楽器
●
メニュー部分によく利用される。開いたり閉じた
りする様がアコーディオンに似ているから。
● accordionjs
● http://weboook.blog22.fc2.com/blog-entry-347.html

22. ジェスチャー
●
身振り手振り
●
という意味だが、 PC 上ではポインタ（マウス）
の軌道のこと。タッチパネル操作で言いかえる
と、スワイプ軌道のことになる。
● jQuery Fancy Gestures
● http://anantgarg.com/2009/05/21/jquery-fancy-gestures/

23. 結論
●
なんとなく使えそう
●
なめらかな動きにならないやつも。。。（マ
シンスペックのせい？わからん）
●
デモサイトを引っ張ってきただけなので、レ
イアウトとかメチャクチャでした。すみませ
ん orz

24. 今後は
●
今日紹介したプラグインは、言っても PC の
Web ブラウザを想定して作られているものば
かり。
●
今後はモバイルを想定したプラグインがもっ
と充実していく予感がする。