Embed Size (px)
Citation preview
JavaScript効率アップ開発手法
サンキュロットインフォ小泉勝志郎
今回
・ライブラリー ・マルチデバイス開発
自己紹介
小泉勝志郎
仕事なにしてるんですか？
仕事してるんですか？
大学非常勤講師
スマホアプリ開発
ITコミュニティ
1/25
東北ITニュース
2/21
東北デベロパーズ カンファレンス
http://tohoku-dev.jp/modules/eguide/event.php?eid=280
本題
初心者
みなさん
バグ
作らない！
ライブラリー
Special Thanks
JavaScript書けなくても 大丈夫編！
Font Awesome
しょっぱなから JavaScriptじゃないw
ライブラリーの入り口 としてあえて……
フォント形式なので拡大縮小も簡単! 色だって変えられちゃう
参考サイト http://h2ham.net/font-awasome
LICENSE
●ライセンス: フォント→SIL OFL 1.1 コード→MITライセンス →プログラムに同梱する限りは商用利用可能。 転売は不可
安西先生、スライドショーが 作りたいです……
fotorama
http://fotorama.io/
<!-- 1. Link to jQuery (1.8 or later), --> <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<!-- fotorama.css & fotorama.js. --> <link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.1/fotorama.css" rel="stylesheet"> <script src=“http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.1/fotorama.js"> </script>
<!-- 2. Add images to <div class="fotorama"></div>. --> <div class="fotorama"> <img src="http://s.fotorama.io/1.jpg"> <img src="http://s.fotorama.io/2.jpg"> </div> <!-- 3. Enjoy! -->
ここに好きな画像を！
スマホやタブレットにも対応！ →スマホで見てみましょう！
参考サイト 直感的な操作性がたのしい、画像ギャラリーのスクリプト -Fotorama
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-fotorama.html
LICENSE
●ライセンス: MITライセンス →商用利用可能。
JavaScript書ける人 やさしめ編！
無限スクロール
無限スクロール
「一番下に来た」 を取りたい
jquery.bottom.js
<script type="text/javascript"> $(window).bottom({proximity: 0.05});
$(window).bind('bottom', function() {
// ここに処理を記述!
} </script>
画面が残り5%になったら 0.5だと画面半分！
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="jquery.bottom-1.0.js"></script>
無限スクロール 実装にはAjaxやJSONも必要
参考サイト TwitterやFacebookのように一番下までスクロールしたら自動的にコンテ
ンツを表示する「jQuery.Bottomプラグイン」 http://www.koikikukan.com/archives/2012/02/06-015555.php
<script type="text/javascript"> var dummy = 'テスト'; var number = 51; $(function() { $(window).bottom({proximity: 0.05}); $(window).on('bottom', function() { var obj = $(this); if (!obj.data('loading')) { obj.data('loading', true); $('#image').html('<img src="loader.gif" />'); setTimeout(function() { $('#image').html(''); for (i=0; i<20; i++, number++) { $('#wrap div:last').append('<div>'+dummy+number+'</div>'); } obj.data('loading', false); }, 3000); } }); $('html,body').animate({ scrollTop: 0 }, '1'); }); </script>
FacebookのようなUIを！ 発展知識としてSEO対策した
無限スクロール
参考サイト jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロール http://www.koikikukan.com/archives/2014/02/18-015555.php
その他 オススメ
ドラッグ&ドロップで ファイルアップロード
ライブラリを 探すなら
http://www.jshc.jp/
not車輪の再発明！ →勉強にはなるけど
教育の現場
文法
アレルギー
学習の順序
・変数 ・ループ ・条件分岐
・CSS→jQuery ・WebService ・開発便利技
if文が中盤！
ロジック<jQuery
大学の講義で実験
学生の最終課題 http://bit.ly/1u1jDoa
マルチデバイス 開発便利技
検証
https://dl.dropboxusercontent.com/u/18796572/jquery_bottom-master/demo.html
サーバアップロードの 手間がない
……残念ながら 新規アカできません
そこで
Google Drive Hosting
https://googledrive.com/host/0B3suUrhlktR0QWxHLVBhMG5jN0U
フォルダを公開にした後
これからの開発
ためしてみます！
どんどん楽になっている
スピード感
企画書より
プロトタイプ
企画を考える人間が プロトタイプを作れると
ものすごく強い
プログラマは二極化する？ ・企画型：内容を自分で考え、手早くプロトタイプを作る ・深化型：バージョンごとの微妙な差等に詳しい
プランナーも デザイナーも
→プログラムを学ぶべき！
勉強したら
仕事で使う前に
腕試し
Have fun！
