Wiztools with (some useful)tools
いろんな便利なツールを使ってwiztoolsは成り立っています。
このタイトルで記事を書きたかっただけでしょとかそういうことは言ってはいけない
Javascript関連
jQuery
https://jquery.com/
基本。概略を説明すると、DOMの操作がすごくラクチンになる。
// typeがnumberであるinput要素にhighlightクラスを追加 $("input[type=number]").attr("class", "highlight");
jQuery UI
https://jqueryui.com/
jQueryをベースとするUI用ライブラリ。
他にもあるんだろうけど今回はこれを採用。
以下に示したDialogの他に、autocompleteなども使用している。
ていうかサイト作り始めの時jQueryすらロクにわかってなかったから仕方がない。
$(function(){ // 予め用意してあるdiv要素をdialogとして扱う $("div#mydialog").dialog({ autoOpen: false, modal: true, buttons: { "OK": function(){ $("div#mydialog").dialog("close"); } } }); }) function pushButton(){ // 用意しておいたdialogを開く $("duv#mydialog").dialog("open") }
jQuery cookie
https://github.com/carhartl/jquery-cookie
Cookieを簡単に操作するためのjqueryプラグイン。
webstorage使ったほうがいいかも。
chosen
https://harvesthq.github.io/chosen/
サイトの性質上、試走先を選択するコンボボックスがどうしても縦長になってしまいどうにも使いにくかったので導入。
お手軽に綺麗なコンボボックスを導入できるため、使用すると幸せになれる。
/* <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script> */ $("select.chosen").chosen();
html5sortable
http://farhadi.ir/projects/html5sortable/
ユーザーが要素を並び替えることのできるフィールドを用意するために導入。
iOSでは無問題だが、Androidだと並び替えできないのにタップスクロールが不可になる欠点があるため留意が必要。
/* <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5sortable/0.4.2/html.sortable.min.js"></script> */ // 並び替え可能にする $("div#abletosort").sortable(); // 並び替えられた結果を配列で取得 var sort_array = $('div#abletosort').sortable('toArray');
連携ツール
Visual Studio
以前はエディタとしてVSを使っていた。jsもhtmlも普通に書けるのはやはり統合開発環境と言うべきか。
後述のWebstormを導入したので最近はお役御免。
Webstorm
有料の優良ソフト(だれうま)。学生なら無料DL可能。
非常に重いがそれだけの機能はある。補完機能はVSでは味わえない有能さ。
git
バージョン管理といえばこれ。
webhook機能を使って、master/devブランチにpushがあった場合自動でサーバーのプログラムを走らせている。
サーバー上でgit initとremote設定を行っておき、push時に蹴られるphpでpullをさせれば自動更新システムの完成。
FTPとか全然使わなくなるのでおすすめ。
連携ツールと言っていいのかわからないけど一応。
前述の自動更新システムにcommit messageをツイートする機能を作ればあら簡単、自動告知シスt(ry
iPhone + jqueryUI Dialog
jQueryUI dialogはお手軽にdialog boxを表示させることができるが、妙な欠点もいくつかある。
その一つが、iphoneのブラウザでdialogを開いた時の挙動。
開いたダイアログの中にinputやselectタグが存在すると、自動的にフォーカスが合う。
そして、iOSの仕様でクソ使いにくいoption一覧をご親切にも勝手に出してくれるというわけである。
具体的には、こんな感じのコードが問題となる。 ex: https://jsfiddle.net/uoccz7La/
<!-- HTML部分 --> <!-- iOSでこのダイアログを開くと意図した動作をしない --> <div id="dialog" title="badtips"> <p>select your favorite number.</p> <select id="selectitem"></select> </div>
/* javascript部分 */ $(function(){ $("#dialog").dialog({ width: 450, open: function(){ var add_html = ""; for(var i=1; i <= 10; i++){ add_html += "<option value=" + i + ">" + i + "</option>" } $("#selectitem").html(add_html); } }) })
これをiPhoneで開いてダイアログを開くと、以下の画像のような結果となる。
要はopen時に内容が足される前のselectを開いてしまっている。
これを回避するには、フォーカスがselectにあわないようにしてあげればよい。
すなわち、以下のような付け足しでOK。
<!-- HTML部分 --> <div id="dialog" title="bettertips"> <span class="ui-helper-hidden-accessible"><input type="image"/></span> <!-- dummy --> <p>select your favorite number.</p> <select id="selectitem"></select> </div>