関西firefoxos勉強会 3rd gig
TRANSCRIPT
![Page 1: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/1.jpg)
JavaScript のあれやこれは本当に FirefoxOS で動くのか?
2013/08/31
関西 FirefoxOS 勉強会 3rd GIG
![Page 2: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/2.jpg)
自己紹介● 佐藤 諭● @DummyFunny
● BRILLIANTSERVICE 在籍● 元 Web 屋
![Page 3: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/3.jpg)
前フリ
![Page 4: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/4.jpg)
かつての Web は。。。
![Page 5: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/5.jpg)
かつて JavaScript はいらん子でした● ブラウザの JavaScript 仕様が違う● またバグ。。。 orz
● ダイヤルアップなめんなよ
➢ ページはシンプルに!➢ JavaScriptは使わない!
![Page 6: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/6.jpg)
救世主が現れる!
しかしある時!
![Page 7: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/7.jpg)
GoogleMapsが颯爽登場
![Page 8: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/8.jpg)
Ajaxが注目の的に!● 「非同期」通信スゲェ!● JavaScriptを世間が認めだした● Webページが表現豊かになり、アプリケーションらしくなってきた
歴史の転換点
![Page 9: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/9.jpg)
時は流れ…
![Page 10: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/10.jpg)
JavaScriptの時代がやってきた
![Page 11: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/11.jpg)
特にこの子は必須
![Page 12: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/12.jpg)
ふと思い出す
![Page 13: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/13.jpg)
あいつに泣かされ続けた日々を
![Page 14: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/14.jpg)
まさかそんなこと…
無い無い無い!
![Page 15: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/15.jpg)
… 無いとは思うけど。一応ね。
![Page 16: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/16.jpg)
お世話になるのが● JavaScript の開発で重要なのがライブラリ
プラグインが豊富
![Page 17: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/17.jpg)
パララックス● 視差効果
● 視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることにより、奥行き感を演出する効果がある
● Parallax scrolling● http://f6design.com/journal/2011/08/06/build-a-parallax-
scrolling-website-interface-with-jquery-and-css/
![Page 18: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/18.jpg)
カルーセル● メリーゴーランド
● 画像などの要素を延々グルグル回す。● carouFredSel
● http://caroufredsel.dev7studios.com/
![Page 19: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/19.jpg)
スライダー● つまみとかそんな意味
● 画面上に表示され、マウスで操作するつまみの一種です。上下や左右にスライドさせることで、画面内の「位置」を指定したりします。
● FlexSlider● http://www.woothemes.com/flexslider/
![Page 20: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/20.jpg)
ローダー● 読み込み中
● 「処理中です」をアニメーション表示するやつ。待たされる方のストレスが和らぐとかなんとか。
● Ladda● http://lab.hakim.se/ladda/
![Page 21: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/21.jpg)
アコーディオン● 蛇腹に鍵盤付いた楽器
● メニュー部分によく利用される。開いたり閉じたりする様がアコーディオンに似ているから。
● accordionjs● http://weboook.blog22.fc2.com/blog-entry-347.html
![Page 22: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/22.jpg)
ジェスチャー● 身振り手振り
● という意味だが、 PC 上ではポインタ(マウス)の軌道のこと。タッチパネル操作で言いかえると、スワイプ軌道のことになる。
● jQuery Fancy Gestures● http://anantgarg.com/2009/05/21/jquery-fancy-gestures/
![Page 23: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/23.jpg)
結論● なんとなく使えそう● なめらかな動きにならないやつも。。。(マ
シンスペックのせい?わからん) ● デモサイトを引っ張ってきただけなので、レ
イアウトとかメチャクチャでした。すみません orz
![Page 24: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/24.jpg)
今後は● 今日紹介したプラグインは、言っても PC の
Web ブラウザを想定して作られているものばかり。
● 今後はモバイルを想定したプラグインがもっと充実していく予感がする。
![Page 25: 関西FirefoxOS勉強会 3rd GIG](https://reader031.vdocuments.site/reader031/viewer/2022030318/5a6d66587f8b9abd418b6467/html5/thumbnails/25.jpg)