SVG Colk Board を作った話

SVG Colk Board

これは何？

Illustrator 上で図をコピーしてテキストエディタにペーストすると、SVGが出力されます。 しかし、そこで出力されるSVGは不要な記述も多く、末尾に付加されている謎文字のおかげで正常に表示されません。

これらをクリーンに最適化する為に作ったのが SVG Colk Board です。

使い方

1. Illustrator上で図をコピーする
2. それを SVG Colk Board 上でペーストする
3. 配置された図を選択すると「SVG」「DataURI」ボタンが表示される
4. 「SVG」「DataURI」のボタンをクリックすると、それぞれ最適化された結果がクリップボードにコピーされる
5. 結果をテキストエディタにペースト

• ペーストした図のデータは localStorage に保存されるので、ブラウザを閉じた後も保持されます
• つまり貼り付けられる図の数は localStorage の容量依存です
• もちろんブラウザをまたいでは保持されません

SVG Colk Board の中身

このアプリケーションは Vue.js で作られています。 そして Vue と共に利用しているのが Vuex と vuex-persistedstate です。

Vuex

ここでは詳しい説明を省きますが、 Vuexとは、中規模以上のアプリケーション開発向けの状態管理ライブラリで、 公式ではこのように説明されています。

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
https://vuex.vuejs.org/ja

簡潔に言うと、状態管理にストア（store）という概念を導入する為のライブラリです。 以下、ものすごくざっくりとした説明をします。

Vue.js のコンポーネントは各々が持つ data の値を基にビューを構築・描画し、必要に応じて処理を行います。 store というのはその data に似た振る舞いをしますが、 data が値へのアクセスで直接変更出来るのに対し、 store はセッターのようなメソッドを介してのみ値を変更する事ができ、 それにより値を保護し、変更を集中管理する事ができます。

ざっくりしすぎていてあまりイメージし辛いかと思いますので、下記ページを参考にしてください。

• 状態管理 — Vue.js

先に述べた通り、中規模以上のプロジェクトでなければあまり恩恵にあずかれず、冗長になるだけと感じるかもしれません。 しかし、Vue.js を採用するという事は、ある程度の規模のあるプロジェクトとなる予測が立つとも言えるので、 転ばぬ先の Vuex を問答無用で入れてしまうのも選択肢の一つだと考えられます。

vuex-persistedstate

今回作った様なミニマムなアプリケーションでは正直Vuexは不向きな気がします。 それでもVuexを導入したのは、半分はVuexで習作してみるため、 もう半分はこの vuex-persistedstate を使うためです。

• robinvdvleuten/vuex-persistedstate: Persist Vuex state with localStorage.

vuex-persistedstate は、Vuexのストアの中身（state）をまるっとlocalStorageに保存してくれるプラグインです。 Vuexでストアを書く時にちょっとインポートしてやれば簡単に導入できます。 （下記はREADMEのコードそのままです）

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
});

これで（同じブラウザで見る限りは）ページの状態を永続化できるという寸法です。 なんて便利なんでしょうか！

まとめ

もともとはイラレが吐き出すSVGを最適化する事しか考えてなかったのですが、 ちょうどよいお題だと思って Vuex を使って習作してみたというお話でした。 このアプリで使用している netlify の知見も少しずつたまり始めたので、それはまたいずれ。

近代以降、人は時間にしばられ、あるいは守られながら生活をするようになりました。 ここでそれが良いことだとか悪いことだとか考えるような詮無い事はしません。 今日は、私達の暮らしに欠かせない「時間」を測定する装置について考えていきたいと思います。

つまり時計である

時間を計測する装置、つまるところ「時計」と呼ばれる装置なのですが、 今あるアナログ時計のデザインに私達はあまりにも慣れ親しみすぎてしまいました。 なのでその存在からは一旦離れて、 改めて私達の生活に必要な「時間」を測る装置のデザインについて思いを馳せます。

なんでこんな事を考え始めたのか

VueでSVGベースのコンポーネントを試してみたかったからです。 ハワイの住人は非常に緩やかな時間感覚をもっていて、それは「ハワイアン・タイム」などと呼ばれるそうです。 常日頃時間に追われて生活していると、ふとそういう物に憧れをもつ事があります。 「大雑把な時間感覚で、ゆるく生きていきたい」と。

そこで、大雑把に時間を把握できるデザインの時計を考えてみようと考えました。

作ってみたサンプル達

そしてこちらが作ってみたサンプルです。 実用性等はあまり深く考えずに自由に、4種ばかり作ってみました。

• ArClock

サンプル1 : 比較的普通なそれ

普段目にするアナログ時計にかなり近いデザインです。 異なる点と言えば、針が円弧になり、時間を表す部分が12時間ではなく24時間単位、つまり1日で1周になる所です。

なぜ今あるアナログ時計が24時間ではなく12時間で1週なのかは詳しく調べていないのでわかりませんが、 12時間の方がぱっと見てより精細に時間を知ることが出来るのは確かです。 ですので、より大雑把にする為に24時間にしてみました。

サンプル2 : 波の様なそれ

このサンプルはちょっとお気に入りです。

時間部分のトータルが24時間になっているのはサンプル1と同様ですが、基点が朝の6時になっていて、右端からスタートします。 つまり、右の円弧は6時から18時までの「昼間」を表し、左の円弧は18時から翌6時までの「夜間」を表します。 右から左にしたのは、東から昇って西に沈む太陽をイメージしていたりします。

分と秒も一応なんとなく分かるようにはなっていますが、これは、あまりに動きがないとつまらないので付けたただの飾りです。 昼間/夜間のだいたい何時くらいなのかがわかれば良いというテーマの時計です。

サンプル3 : 週を意識したそれ

もっと大雑把にしてみました。一週を一つの単位として表現してみた時計（？）です。 月曜日を起点として、現在週のどの辺りなのかを大まかにあらわします。 今回作った時計（？）の中で最も動きの無い、面白みのない物となりました。

日曜日を中央に押し込んだ理由は3つあります。 1つ目は、Saturday と Sunday で “S” が続いて見づらいこと、 2つ目は、7だと360を割り切れないこと、 3つ目は、6ならばリボルバーの弾倉っぽくなるのでイメージとして採用してみようと思った次第です。 （しかし、調べたら7発装填のリボルバーも存在する様でした。 ナガンM1895 – Wikipedia ）

この7つの曜日が全て赤く染まる時、我々は月曜日の到来に恐れおののく事でしょう。

サンプル4 : 年を意識したそれ

さらに単位を大きくして、年にしてみました。 年輪をイメージしていますが、輪になってないしひとつの層は別に年じゃないでしょう？というのは野暮な突っ込みです。 むしろゼンマイをイメージしていると言った方が理解を得られるかもしれません。

このゼンマイ状の線は、現在が1年のどの辺りなのかを示しますが、 半径ではなく線分の長さであらわしている為、見た目と実際に感覚としてズレが生じるでしょう。 しかし、年始の一ヶ月よりも年末の一ヶ月の方が短く思えるのはわりと一般的な感覚のように思えます。 そんな錯覚も表現出来てしまう時計であります。

角層の塗りは60秒で終端にたどり着きます。 ちょっとした動きが欲しかったのと、ぐるぐる動いているのが楽しかったので付けてみました。

技術的な話

これらのサンプルは全てインラインSVGで作られていて、 パスは一部の物を除いてほとんど <path> の A コマンドで描画してあります。 動きはほとんど stroke-dash-array と stroke-dash-offset で実装されていて、アニメーションは全て transition です。

せっかく Vue で作ったサンプルなので <path>　の d 属性を直接書き換えてアニメーションを、とも思ったのですが、 頂点の数が変わると transition は効かないので他の方法をとりました。

SVGベースのVueコンポーネント

インラインSVGをベースにしたVueコンポーネントを今回試してみましたが、なかなか面白いものです。 <path> の描き方を理解すると大抵の物は描けますし、動的に操作する事も容易です。 例えばデータを渡してグラフを描画するコンポーネント実装などでその実力を大いに発揮しそうです。というか、まさにそういうケースで先日発揮しました。

そういった部品を実装しててふと思い出したのが ActionScript3 で作るFlashコンテンツで、非常に類似しています。 AS3でも受け取ったデータから Graphics クラスで動的に描画をするなどしていましたね。 あんなイメージです。

Netlify

Netflix とよく似ている為よくタイポしてしまいがちな Netlify にデプロイしてみました。

Netlify: All-in-one platform for automating modern web projects.
Build, deploy, and manage modern web projects

このサービスは、GitHub等のリポジトリサービスと連携して、そのリポジトリの指定したブランチにpushするだけでデプロイが完了するというお手軽なWebサーバーです。 それに加えて、様々な機能をご利用いただけます。

• ビルドコマンドをデプロイ前に実行してくれる
• Functions 機能で AWS Lambda にもデプロイできる
• Form 機能でフォームリクエストをハンドリングできる
• Let’s Encrypt によるSSL対応（独自ドメインが必要）

Lambdaと連携出来るので、開発コストはさておき大体の事は実現できそうですね。 今回はビルドコマンドの実行ぐらいしか活用していませんが、機会があればがっつり使ってみたい所存です。

まとめ

色々な時計を作ってみましたが、先に申し上げたとおり、実用出来る代物ではありません。 少なくとも、この国で今の生活をしているかぎりは…。

Web制作の現場で「黒い画面」を使うことは、近年ではごく当たり前な事になってしまいました。 フロントエンドエンジニアの方はもちろん、マークアップエンジニアの方ならば抵抗は無いでしょう。 しかし、デザイナーさんには未だに「黒い画面」は苦手意識がある方も少なくないのではないでしょうか。 その苦手意識を払拭する為に、少しばかり「黒い画面」への理解を深めてみましょう。

1. デザイナーが触れる「黒い画面」
2. 「黒い画面」ことターミナルとは
3. 「黒い画面」の基本
4. 「黒い画面」の怖い話
5. Windows環境での「黒い画面」

デザイナーが触れる「黒い画面」

そもそもデザイナーが「黒い画面」に触れる事は数年前まではあまり考えられていませんでした。 黒い画面上の作業はあくまでもバックエンドエンジニアやプログラマーの領域であって、デザイナーが触れるのはPhotoshopやIllustratorといったグラフィカルなアプリケーションまでに留まっていたと思います。

ところがWebの技術が度重なる変化・進化を遂げ、JavaScriptやCSSをビルドするようになったり、Node.jsが台頭してきたりで、プロジェクトの「黒い画面」への依存度が一気に上がってきました。 マークアップエンジニアは勿論のこと、肩書がデザイナーの人間も「黒い画面」を触れるようになる必要が出てきたのです。

例えば、こんなケースであったり

人手不足でデザインに加えてマークアップもやる事になった。 CSSをビルドする為に「黒い画面」が必要だ。

また例えば、こんなケースもあるでしょう。

プロジェクトにデザイナーとしてジョインしたが、 マークアップエンジニアが作った画面をレビューする為に「黒い画面」でコマンドを叩かなければならない。

「黒い画面」ことターミナルとは

まず「黒い画面」とは何なのか。その正体について軽く触れてみます。

Macにおける黒い画面である「ターミナル」は、GUI（グラフィカルインターフェース）によらず、 CUI（キャラクタユーザーインターフェース）、つまり文字列のコマンドでコンピュータを直接操作する為の物であると理解しておけば良いでしょう。

例えばMacでファイルを探し出すのにFinderを使用しますが、これはGUIによる機能ですね。 ターミナルでは、CUIで謎の呪文こと、コマンドを打ち込む事でそれとほぼおなじ事をすることが出来ます。 （勿論CUIなので見た目はただの文字列です） Finderをはじめとした、私達が普段パソコン上で使っているGUIアプリケーションは、ターミナルで行える処理を視覚的に見やすい形、そして操作しやすい形でラッピングされているのです。

ちなみに、MacOSXは元々Unix系のFreeBSD由来のOSで、 Unix系のコマンドの多くがそのまま使用できるのはその為です。 （Windowsについては後述しましょう）

「黒い画面」の基本

まずは黒い画面を立ち上げて触ってみましょう。 Mac環境ならば「アプリケーション」 > 「ユーティリティ」 > 「ターミナル」と辿っていけば立ち上がります。 あるいは Spotlight 検索で “term” あたりまで入力すれば出てくると思います。

ここまで「黒さ」を連呼していますが、Macでのデフォルトは白ベース黒文字の「白い画面」になっています。なんとなく、怖さが少し和らぎますね。

コマンドを入力してみる

黒い画面への入力については、キーボードで文字を入力するだけなので難しいことはないでしょう。 試しに一つコマンドを打ってみましょう。

$ whoami

[your user name]

whoami コマンドは、現在ログインしているユーザーの名前を出力します。 貴方のユーザー名が表示されましたか？

「何処」で「何」を対象に「何」するか

コマンドを覚えていく前に、次の3つの事を意識するようにしてみましょう。

1. 現在どこのディレクトリにいるか
2. そこで何をするか
3. 何を対象に行うか

例えばこんなコマンドを打ったとします。

$ mkdir myfolder

上の例では、現在いるディレクトリの中に myfolder という新しいディレクトリ（フォルダ）を作成しています。

もう少し詳しく見てみましょう。 コマンドはコンピューターへの命令であり、文法で言うところの述語です。 基本的に、コマンドは英語の文法に則っていて、述語であるコマンドの後には目的語を指定します。

この目的語は「引数（ひきすう）」と呼ばれ、上の例では myfolder が引数に値します。 つまり、 myfolder という名前で、ディレクトリを作る命令（ mkdir ）を行ったわけです。

また、命令によっては目的語を持たない（あるいは省略できる）場合もあります。

$ # ユーザー名を出力するだけなので引数が必要ありません
$ whoami
$ # 引数を省略すると、ユーザーのホームディレクトリに移動します
$ cd

さらにまた、目的語を二つとる命令もあります。

$ # 目的語1（foo.txt）を、目的語2（bar.txt）として複製する
$ cp foo.txt bar.txt

ファイルやディレクトリを引数にする

先程言ったように、コマンドには目的語である引数を渡す事が多いのですが、 その引数となるのはファイル名やディレクトリ名がほとんどです。

$ rm ./needless.txt

上の例では、今いるディレクトリにある “needless.txt” という名前のファイルを削除しています。 ファイル名の前についている “./” は一体なんでしょうか？ これは「今いるディレクトリにあるファイル」という事を明示的に指定しています。

Unixのファイルシステムでは、ファイルの場所（パス）について次のような表現を用います。

• “.” … 現在のディレクトリ
• “..” … 一つ上のディレクトリ
• “/” … ディレクトリの境目
• 一番頭が “/” … ルートディレクトリからの絶対パス

つまり上の例では、「現在いるディレクトリ下にあるneedless.txt」を指定しているわけです。

ここで「”./”は要らないのではないか」という疑問が浮かんだのではないでしょうか。 その通り、”./” は省略でき、次のように表現しても同じ処理を行います。

$ rm needless.txt

省略できるのならば、なぜ例示でわざわざ “./” を付けたのかというと、その方が安心出来るからです。 ファイルを指定する時は、”./” や “../” からはじまる相対パスで表現する事をお勧めしたいです。

特に、上で例に挙げている rm コマンドはファイルやディレクトリを削除してしまう破壊的なコマンドです。 必ず “./” ではじめる事を意識すれば、現在いるディレクトリを誤ったり、朦朧としながら作業をしていて操作ミスをしたりして、処理してはいけないファイルを処理してしまう危険性をわずかばかりではありますが、和らげる事ができます。

$ rm /the/path/to/target # NG
$ rm target # NG
$ rm ./target # Good

「どのように」行うか（オプション）

多くのコマンドは、「オプション」を渡すことで挙動をコントロールする事ができます。 ここでは ls コマンドを例に上げてみます。このコマンドは、ディレクトリ内にあるファイルをリスト表示してくれます。

$ ls
bar.txt         directory       foo.html

何もオプションを渡さない場合、ただファイルの名前のみが羅列されます。 ファイル名だけだと情報が足りないので、l オプションを追加してみましょう。

$ ls -l
total 16
-rw-r--r--@ 1 mach3  staff  212 12 12 16:03 bar.txt
drwxr-xr-x@ 2 mach3  staff   68 12 12 16:02 directory
-rw-r--r--@ 1 mach3  staff  248 12 12 16:03 foo.html

色々な情報が詰まったフォーマットで出力されました。 さらにドット（”.”）からはじまる隠しファイルも表示する為に、くわえて a オプションを指定してみます。

$ ls -la
total 16
drwxr-xr-x@ 6 mach3  staff  204 12 12 16:19 .
drwxr-xr-x@ 8 mach3  staff  272 12 12 16:01 ..
-rw-r--r--@ 1 mach3  staff    0 12 12 16:19 .hidden
-rw-r--r--@ 1 mach3  staff  212 12 12 16:03 bar.txt
drwxr-xr-x@ 2 mach3  staff   68 12 12 16:02 directory
-rw-r--r--@ 1 mach3  staff  248 12 12 16:03 foo.html

またさらに、t オプションを追加して更新時間順にソートしてみましょう。 （デフォルトでは名前順です）

$ ls -lat
total 16
drwxr-xr-x@ 6 mach3  staff  204 12 12 16:19 .
-rw-r--r--@ 1 mach3  staff    0 12 12 16:19 .hidden
-rw-r--r--@ 1 mach3  staff  248 12 12 16:03 foo.html
-rw-r--r--@ 1 mach3  staff  212 12 12 16:03 bar.txt
drwxr-xr-x@ 2 mach3  staff   68 12 12 16:02 directory
drwxr-xr-x@ 8 mach3  staff  272 12 12 16:01 ..

オプションを指定するルールがお分かりいただけたでしょうか。 オプションは主に1文字の英数字や短い言葉で指定し、 ダッシュ（”-“）の後ろに続けて打ち込む事で複数のオプションを合わせて利用する事ができます。 （このルールに則らないコマンドも存在するのでご注意ください）

各々のコマンドは、それぞれのオプションを持っています。 とても全てを覚えきれる物ではないので、その説明は次回に持ち越す事にします。

「黒い画面」の怖い話

「黒い画面は怖くない」と言いたいところですが、残念な事に「黒い画面」は怖いのです。

GUIのアプリケーションで警告が発せられるような処理でも、「黒い画面」は警告を発してくれません。 GUIのアプリケーションなら行わないような危険な処理も、「黒い画面」は実行してしまいます。 良く知らないままにコマンドを実行して、環境を壊してしまうなんていう悲劇も往々にしてあり得る事です。

うまく動かないからネットで検索したコマンドコピペして実行したら、パソコンが起動しなくなった

ジョークみたいな話ですが、実際に私の観測圏内で起こった出来事です。

ネットで拾ったコマンドを調べずに実行しては絶対にいけません。 コマンドがどのような処理を行う物なのか、渡している引数は何なのか、どのようなオプションで実行されているか、コピーしたコマンドはつまるところどういう命令なのか、 それらを調べて理解したうえで実行しましょう。 そして、インターネットは怖いところだという事を肝に銘じておきましょう。

Windows環境における「黒い画面」

Windowsにおける「黒い画面」は「コマンドプロンプト」と呼ばれる物ですが、これはおすすめできません。 WindowsはUnix由来でない為、Macで使えるような基本的なコマンドも使用できず、そもそもコマンド自体が非常に少なく、使い勝手がよくないのです。 「他と違う」という事は、つまり問題が起きた時に調べても解決策にたどり着きにくいという事です。

いくつか代替の手段があるので、そちらを使うようにした方が良いでしょう。

1. Git Bash

Windows環境で開発作業を行うのならば Git for windows は恐らくインストールされているはずなので、 これにバンドルされている「Git Bash」を活用します。 インストールされてない場合は、インストールしましょう。Gitはもはや開発環境に無くてはならない存在です。

Git Bash は msys と呼ばれるエミュレータで動いており、いささかLinuxやMacとは使い勝手が違いますが、基本的なコマンドは使用する事ができます。 （msysは、昔なつかしのcygwinからのフォークです）

Git Bashのメリットは、Windowsにおける実行ファイル（.exe）が容易に呼び出せる点です。 ショートカット（.lnk）もちゃんと追随してくれるので、「好きな名前で好きなアプリを立ち上げる」なんていう設定も簡単にできます。（ここでは説明は割愛します）

$ # 現在いるディレクトリでエクスプローラーが立ち上がります
$ explorer .

2. Bash on Windows

Windows10ならば、Windows上でUbuntuが動作します。 Windows Subsystem for Linux（WSL）と呼ばれる仕組みで、まさにLinuxがWindows上で動作していると思って良いでしょう。

中身はUbuntuなので、apt で楽々パッケージを追加インストールできるのが大きな魅力で、 参考になる情報もネットで収集しやすいです。

• Bash on Ubuntu on Windowsをインストールしてみよう！ – Qiita

前編まとめ

• デザイナーも「黒い画面」が必要な時代になった
• 「黒い画面」の基本的な使い方を学ぶ
• 「黒い画面」は怖いので用法を守って正しく使う
• インターネットの情報は鵜呑みにしてはいけない
• Windowsでの「黒い画面」は Git Bash または Bash on Windows を活用しよう

後編では最低限覚えておくと捗るコマンドと使い方を書くかもしれません。

アップデートのきっかけ

LESSTESTERを見直すきっかけになったのは、StackOverflowで「バージョンが古い。5年前のバージョン。（意訳）」と言及されていたのを見かけた事。 実際は、Less v1.7.0が出たのが2014年2月でLESSTESTERアップデートが翌3月なので3年しか経ってない事をここに釈明しておきます。 しかし、Lessのバージョンがv2.7.2まで上がっている間ずっと放置してしまったのは反省しないといけませんね。

cf) https://github.com/less/less.js

本当はLessユーザーも希少な様子なので閉めようかとも考えましたが、 せっかく公式にも取り上げてもらっていた事ですし、 案件で得られた経験値を試すついでにまるっと作り直してみようと思いました。

そして出来たもの

新しくついた機能 :

• ドラフトが端末に保存できるようになりました
• Lessのバージョンを選択できるようになりました
• キーマップに sublime が追加されました
• リアルタイムコンパイル

新しくつけようと思ったけどやめた機能 :

• URLでシェアする機能（理由 : コストのわりに使われ無さそう）

活用した技術など :

• Vue.js – https://jp.vuejs.org/
• AWS S3の静的サイトホスティング
• AWS Route53 + CloudFront でSSLに対応
• （おまけ） さくらのメールボックス

感想

ゼロから組み直したにしては、AWSとVue.jsが大変便利だったおかげで短時間で完成しました。

Vue.js

現在進行系で進んでいるプロジェクトで使っているのですが、 低い学習コストのわりに高機能かつ使い勝手が良く、規模問わず動的なWebアプリケーションを作るのに大変便利です。

AWS S3

言わずと知れたS3さんは便利すぎる。 もう全部これでいいんじゃないでしょうか。

AWS Route53 + CloudFront

SSL対応がこんなに簡単で安価になるとは、時代を感じます。 CloudFrontは高機能である反面、デプロイと変更の適用で結構待たされるので、いろいろな設定を試す段階ではちょっと辛い部分はありました。

また、今回は使っていませんが API Gateway / Lambda / RDS あたりは触る機会がどんどん増えていくのではないかなと思っています。

さくらのメールボックス

SSL対応の際にドメイン所有者の確認のためメールが送られるので、それを受け取る為に使いました。 年額1000円程度で複数ドメインを使用できるのでかなりリーズナブルです。 メールサーバの構築はなにかと面倒なので、ぜひ利用していきたい選択肢ですね。

セキュリティ対策を強化したメールサーバー専用プラン【メールボックス】

まとめ

お買い物もホビーも開発もAmazonに依存する時代の到来です。 それぞれのリソースについては時間があれば追って使い方などを記事にまとめておきたいところです。

今年のアドベントカレンダーは、23ほどのjQuery拡張関数を連日ご紹介してまいりました。

おさらい

毎度お世話になっているjQueryで、毎回書いてしまうちょこざいな関数をつらつらとしたためて来ました。 実際の中身はjQueryの機能への依存度はさほど高くない（？）ので、少しいじれば別にjQueryと一緒に使わなくても良い物もあったりします。 強いて言えば元々そんなにjQueryは好きではありませんが、結局使うことが多いので仕方ないですね。

インデックス

23個まとめてリストにしておきます。目次のようなもの。

$.chainCase(str) :String

キャメルケースの文字列をチェインケース・スネークケースに変換する
jQuery依存度 : 無

$.classify(obj) :Function

クラスライクな関数を生成する
jQuery依存度 : 中

$.configify(obj) :Object

オブジェクトに options を設定・変更する config() メソッドを実装する
jQuery依存度 : 中

$.dig(path, obj) :Any

ドットシンタックスの文字列を渡すとそのオブジェクトを掘り起こして返す
jQuery依存度 : 無

$.escapeHTML(str) :String

HTML文字列をエスケープする
jQuery依存度 : 無

$.eventify(obj) :Object

オブジェクトにイベント管理のメソッド（on, off, trigger）を実装する
jQuery依存度 : 低-中

$.attributify(obj) :Object

オブジェクトに属性管理のメソッド .attr() を実装する
jQuery依存度 : 低

$.format(template, str, str…) :String

“%s%d” 形式のフォーマットに則って整形された文字列を返す
jQuery依存度 : 無

$.formatNumber(num) :String

数値を三桁ずつカンマで区切った文字列で返す
jQuery依存度 : 無

$.observe(callback) :Deferred

コールバック関数を渡してその返り値を監視する
jQuery依存度 : 無

$.parseQuery(str, asArray) :String

URLのサーチ文字列（”?key=value&key2=value2″ ）をパースする
jQuery依存度 : 低

$.parseURL(str) :Object

URL文字列をホスト名やサーチ文字列・ハッシュなどにパースする
jQuery依存度 : 無

$.random(start, end) :Any

範囲の間からランダムな数値を取得したり、リストの中からランダムに値を取得する
jQuery依存度 : 無

$.rebase(obj, pattern) :Object

オブジェクトに属しているメソッドをそのオブジェクトに bind する
jQuery依存度 : 低

$.render(template, data) :String|Function

単機能のテンプレート関数
jQuery依存度 : 低

$.scrollTo(dest, offset, options, selector) :void

ページあるいは要素の中身をアニメーションでスクロールする
jQuery依存度 : 高

$.fn.serializeObject() :Object

フォーム要素をシリアライズして、オブジェクトで返す
jQuery依存度 : 高

$.fn.extract(asArray) :Object|Array

非Form要素の内容をシリアライズする
jQuery依存度 : 高

$.series(callback, callback …) :Deferred

連鎖的に直列処理を実行する
jQuery依存度 : 高

$.fn.submitAsync(props) :Deferred

Form要素を非同期でsubmitする
jQuery依存度 : 高

$.times(count, callback) :void

n回処理を繰り返す
jQuery依存度 : 無

$.timing.*

User Timing API のラッパー
jQuery依存度 : 無

$.fn.transition(props, options) :jQueryObject

$.fn.animate() のようにCSS Transitionを実現する
jQuery依存度 : 高

リポジトリ

全て纏めた物をGithubのリポジトリにしてあります。ご自由にどうぞ。

jquery-tiny-extentions @ GitHub

それでは皆様、良い年末をお過ごしください。

$.fn.transition は、$.fn.animate の様にCSS Transitionを実現する関数です。

$.fn.transition(props, options)

CSS Transition によるアニメーションはJavaScriptによるアニメーションに比べてパフォーマンスが非常によく、綺麗です。 しかし一方で、非対応環境の為に .animate() を使わなければならない事が多いので、 両者で動作するように対応できる関数をしたためてみました。

使い方

// 要素を left: 100 に移動
$(".item").transition({
    left: 100
}, {
    duration: 300, // 所要時間 300ms
    delay: 100, // アニメーション開始までのディレイ 100ms
    easing: "linear" // イージング関数の指定
});

基本的な使い方は .animate() と概ね同じです。

• 第一引数 : アニメーションするスタイル
• 第二引数 : オプション

CSS Transition に対応していないレガシーな環境では $.fn.animate で代替しています。 イージング関数名として渡せるのは jQuery.easing の名前ではなく、 CSS Transition で定義されている名前です。（ease | linear | ease-in | ease-out | ease-in-out）

// 要素をアニメーション後、削除
$(".item").transition({
    opacity: 0,
    right: 500
}, {
    done: function(){
        $(this).remove();
    }
});

.animate() 同様に、オプションで done を渡して完了時の処理を実装できます。 .animate() にあるその他多数のオプションは使えません。

また、stop() とかはできません。とまりません。

コード

$.extend($.support, {
    cssTransition: ("transition" in document.createElement("i").style)
});

$.transition = function(props, options){
    var o, transition = [];

    o = $.extend({
        duration: 400,
        delay: 0,
        easing: "ease",
        done: $.noop
    }, options);

    if(! $.support.cssTransition){
        switch(o.easing){
            case "ease": o.easing = "swing";
            case "ease-in": o.easing = "easeInSine";
            case "ease-out": o.easing = "easeOutSine";
            case "ease-in-out": o.easing = "easeInOutSine";
            default: break;
        }
        o.easing = (o.easing in $.easing) ? o.easing : "swing";

        this.stop().delay(o.delay).animate(props, {
            duration: o.duration,
            easing: o.easing,
            done: o.done
        });

        return this;
    }

    $.each(props, function(key, value){
        transition.push(
            [
                key,
                o.duration + "ms",
                o.easing,
                o.delay + "ms"
            ].join(" ")
        );
    });
    transition = transition.join(",");

    this.each(function(){
        var el = $(this),
            done = (function(e){
                o.done.call(this, e);
                $(this).css("transition", "").off("transitionend", done);
            }).bind(this);

        el.css("transition", transition)
        .on("transitionend", done)
        .css(props);

        setTimeout(function(){
            el.trigger("transitionend");
        }, o.duration + 33);
    });

    return this;
};

ベンダープレフィックス無しの “transition” を持たない環境は、使えない物とみなしています。 （面倒だったのもありますが、必要性もあまり感じなかった為）

非対応環境ではイージング関数を jQuery.easing の名前に書き換えています。 といっても、デフォルトで実装されているのは “swing” と “linear” だけなので、 jQuery.easing プラグイン も含めて、近しい物を割り当てています。 こちらも一緒に使う事で表現は豊かになりますが、なければないで、そこらへんが全部 “swing” になるだけです。

完了時の処理に “transitionend” を利用していますが、 これは実際に値が変わってトランジションが発生していないと発火しない代物なので、 時間経過と共に無理やり発火させています。 「アニメーションしないアニメーション」の完了時に何かしたい事なんてないだろうと思いますが、念のため。

$.timing は、User Timing API のラッパーです。 わずかな機能だけですが、非対応環境に擬似的に対応してみました。

User Timing API とは

User Timing APIは、Webページ上のパフォーマンスを計測するためのインターフェースです。 その役割と使い方は下記URLのエントリーで解説されています。

• User Timing API: あなたの Web アプリをもっと理解するために – HTML5 Rocks

ものすごくざっくりと使い方を紹介すると、こんな感じ。

• mark() を使って任意のタイミングでタイムスタンプを「マーク」として記録
• measure() を使って、記録したマーク間の所要時間を計測
• タイムスタンプは1/1000ミリ秒という高精度で記録される

執筆時点でのメジャーどころの対応状況は IE10+ / Edge / Firefox / Chrome / Opera 40+ となっていて、 IE9以前やSafari（iOS含）は非対応です。

$.timing

使い方

// マークを記録
$.timing.mark("foo");
$.timing.mark("bar");

// マーク間の所要時間を記録
$.timing.measure("from_foo_to_bar", "foo", "bar");

// 名前からタイムスタンプを取得
$.timing.get("from_foo_to_bar"); // => number

// 記録したマークを全て取得
$.timing.marks(); // => object

// 記録したメジャーを全て取得
$.timing.measures(); // => object

• .mark(name) でそのタイミングのタイムスタンプを記録します
• .measure(name, start, end) で、開始マークから終了マークまでの所要時間を記録します
• .get(name) で名前からマーク・メジャーの時間を数値で取得します
• .marks() / .measures() で記録したマーク・メジャーを全てオブジェクトで取得

Polyfill とは呼べないモノ

$.timing はほんの一部の機能しか実装していません。 また、擬似的に再現してみたとはいえ1/1000ミリ秒単位で計測はちょっと出来無さそうで、 Polyfillと呼ぶにはあまりに片手落ちですね。

core-js あたりでPolyfillを書いているかも？と思いましたが、 中の人が「無理デス」 とおっしゃっています。

Thanks for proposal, but it can’t be polyfilled – only little part and with serious limitations.
https://github.com/zloirock/core-js/issues/130

コード

$.timing = {
    _supported: ("performance" in window) && ("timing" in window.performance),
    _data: {},
    _start: (new Date()).getTime(),

    mark: function(name){
        if(this._supported){
            window.performance.mark(name);
        } else {
            this._data[name] = {
                type: "mark",
                startTime: (new Date()).getTime() - this._start
            };
        }
    },

    marks: function(){
        return this.getEntries("mark", "startTime");
    },

    measure: function(name, start, end){
        if(this._supported){
            window.performance.measure(name, start, end);
        } else {
            this._data[name] = {
                type: "measure",
                duration: this.get(end) - this.get(start)
            };
        }
    },

    measures: function(){
        return this.getEntries("measure", "duration");
    },

    get: function(name){
        if(this._supported){
            var items = window.performance.getEntriesByName(name);
            return items.length ? items[0].startTime : void 0;
        }
        return (name in this._data) ? this._data[name].startTime : void 0;
    },

    getEntries: function(type, key){
        var data = {};
        if(this._supported){
            window.performance.getEntriesByType(type)
            .forEach(function(item){
                data[item.name] = item[key];
            });
        } else {
            $.each(this._data, function(name, item){
                if(item.type === type){
                    data[name] = item[key];
                }
            });
        }
        return data;
    }
};

$.times() は、n回処理を繰り返してくれる関数です。

$.times(count, callback)

使い方

var str = "";

$.times(10, function(index){
    str += index;
});

console.log(str); // => "0123456789"

第一引数に繰り返したい回数を整数で、 第二引数に実行したい関数を渡します。 関数には0からはじまるインデックスが渡されます。

コード

$.times = function(count, callback){
    var i = count;
    while(i--){
        callback(count - i - 1);
    }
};

正直細かすぎたかなって思ってます。

実際にプロダクトのコードに使われる事はあまりなく、デモデータの生成やテスト等で使ったりはします。

$.fn.submitAsync() は、form要素を非同期でsubmitするための関数です。

$.fn.submitAsync(options)

使い方

<form action="/" method="post" id="demo-form"> ... </form>

<script>

$("#demo-form").submitAsync()
.then(function(){
    console.log("--送信完了--");
});

</script>

返り値は $.ajax() なので、then/done 等で結果を受け取ることができます。 引数には $.ajax() のオプションを渡すことができます。

$("#demo-form").submitAsync({
    url: "/api/foo",
    dataType: "jsonp"
})
.then(function(){ ... });

送信先のURLは通常 action 属性が使用されますが、引数のオプションで上書きする事もできます。 リクエストメソッド（”type”）も同様。

コード

$.fn.submitAsync = function(options){
    var props = $.extend({
        url: this.prop("action"),
        type: this.prop("method"),
        data: this.serializeObject()
    }, options);
    return $.ajax(props);
};

Form の属性を読んで $.ajax() するだけの簡単なお仕事ですね。なくてもまったく困りません。 尚、内部で先に紹介した $.fn.serializeObject() を使用しています。

$.series() は、連鎖的に直列処理を実行していく関数です。

$.series(callback, callback, …)

使い方

// 引数で渡した関数を順番に呼んでいきます
$.series(
    function(){
        console.log("Process: 1");
        // 数値（ミリ秒）を返すとその時間分次の処理を遅延させます
        return 1000;
    },
    function(){
        console.log("Process: 2");
        // 何も返さない（undefined）場合は `return 1;` と同じ
    },
    function(){
        // Deferredオブジェクトを返すと処理完了時に次の処理に移行します
        return $.ajax({url: "/api"}).done(function(){
            console.log("Process: 3");
        });
    },
    function(){
        // false を返すとそこで処理を中断して reject します
        return false;
    }
)
.then(
    function(){
        console.log("--処理完了--");
    },
    function(){
        console.log("--途中で処理が中断されました--");
    }
);

渡した関数が返す値によって、次の処理までの挙動が変わります。

• 数値 : 数値（ミリ秒）待機してから次の処理へ
• Deferred : resolveされてから次の処理へ
• false : 一連の処理を中断してrejectする
• undefined : 何も返さない場合は 1 を返した場合と同じ

$.series() は Deferred を返すので、完了・失敗を then() 等で受け取る事ができます。

コード

$.series = function(){
    var df = $.Deferred(),
        args = arguments,
        i = -1,
        timer = null,
        run;

    run = function(){
        var r;

        clearTimeout(timer);
        i += 1;
        if(i >= args.length){
            return df.resolve();
        }
        r = args[i]();
        if(false === r){
            df.reject();
        }
        r = (r === void 0) ? 1 : r;
        switch($.type(r)){
            case "number": timer = setTimeout(run, r); break;
            case "object":
                if($.isFunction(r.then)){
                    r.then(run ,function(){
                        df.reject();
                    });
                }
                break;
            default: break;
        }
    }

    run();

    return df;
};

Cに必要なAとBをやって、Dに必要なCをやってからDやって…というような感じに連鎖的に直列処理したい時や、 タイムラインで組んだアニメーション等が作れそうですね。

普通に Deferred 等で繋いでいっても良いんですが、コードが見づらくなってしまうので、 気持ちよく書きたいがためにうまれた関数です。