html5fun 20150123 javascript効率化

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！