
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.06.29
slider や sortable など、jQuery UI で用意された機能を利用すると、ドラッグや並び替え等 複雑な動作を短いコードで実装することができます。
ですが、スマートフォンのようなタッチデバイス上では期待した動きが望めない事もあります。
そこで今回は、タッチデバイス上でも マウスやキーボードの操作と同様に動かせる実装方法を紹介します。
1.jQuery UI Touch Punch
2.タッチイベント対応の slider
3.タッチイベント対応の sortable
jQuery UIをタッチデバイスに対応させるためのjQuery UI Touch Punchというライブラリがあります。
今回は、このjQuery UI Touch Punch を使用して タッチイベントに対応するシステムを作成します。
jQuery UI Touch Punch をダウンロードして使用する場合は、ダウンロードサイトから、jquery.ui.touch-punch.min.js ファイルをダウンロードして 任意の場所に保存し、次のように読み込んで使用します。
<script type="text/javascript" src="保存場所/jquery.ui.touch-punch.min.js"></script>
jQuery UI Touch Punch の CDN を利用する場合は、次のように記述して jquery.ui.touch-punch.min.js ファイルを直接読み込んで使用します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
こちらから最新バージョンをご確認下さい。
jQuery UI と共に jQuery UI Touch Punch を読み込んで、タッチイベントで動作可能なスライダーを作成します。
スライダーをタッチイベントで動かしてみて下さい。
また、タッチイベントに対応していないスライダーと比較してみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#wkSlider").slider(); }); //--> </script> <div style="background-color:#CCC; padding : 30px 50px;"> <div id="wkSlider"></div> </div>
jQuery UI Touch Punch を読み込むだけで、タッチイベント対応のシステムとなります。
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
今度は、タッチイベントで ドラッグ&ドロップによる並べ替えが可能となるように実装します。
次の 5 項目を、タッチイベントによるドラッグ&ドロップで入れ替えてみて下さい。
また、タッチイベントに対応していないものと比較してみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#sortableArea").sortable(); }); //--> </script> <div style="background-color:#CCC; padding : 20px 20px 10px;"> <div id="sortableArea"> <div class="ui-state-default">1</div> <div class="ui-state-default">2</div> <div class="ui-state-default">3</div> <div class="ui-state-default">4</div> <div class="ui-state-default">5</div> </div> </div>
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.