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とか全然使わなくなるのでおすすめ。

twitter

連携ツールと言っていいのかわからないけど一応。
前述の自動更新システムにcommit messageをツイートする機能を作ればあら簡単、自動告知シスt(ry