IEにも対応 javaScriptでSVGのpathをアニメーション描画

SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。

これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき
CSSのアニメーションでも設定できます。

参考:
SVGでアウトラインをカスタマイズしてみよう | Webクリエイターボックス

が!!
IEはver.11(2016年12月現在の最新版)でもこれに対応していないため
何も表示されていない状態で静止してしまいます。

IEでもSVGをアニメーションさせるには、stroke-dashoffsetの値をjavaScriptのループで少しずつ大きくする形で制御します。

See the Pen SVG path drewing by webdev (@webdev-jp-net) on CodePen.0

currentTargetで無名関数を使わずイベントターゲットを取得

たとえば、jQueryでイベントを設定するとき、こんな書き方をしたことはありませんか?

// フォーカスが外れると改行を削除する
var deleteLinefeed = function(obj) {
	var v = obj.val();
	v = v.replace(/¥n/g, '');
	obj.val(v);
};
$('textarea').on('blur', function(){
	deleteLinefeed($(this));
});

この無名関数が冗長で気になる!
なにより、無名関数で紐付けたら、イベントリスナーを削除しにくいです。

そこで、イベントオブジェクトのcurrentTargetを活用すると
このようにスッキリさせられます。

// フォーカスが外れると改行を削除する
var deleteLinefeed = function(e) {
	var obj = $(e.currentTarget),
	v = obj.val();
	v = v.replace(/¥n/g, '');
	obj.val(v);
};
$('textarea').on('blur', deleteLinefeed);

currentTargetで取得するのは、イベントを紐付けてあるオブジェクトです。
これと似たtargetでは、イベントを発動させたオブジェクトを取得できます。

参考:
三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net

GoogleMapsAPIでルート検索のよう道筋を表示

スタート地点、ゴール地点、移動手段を指定すると、GoogleMapsAPIの地図上へルート表示できます。

GoogleMapsはデフォルトで最短ルートの道筋をマーキングしてくれるので、
クライアントワークで最寄り駅から目的地までのルートをGoogleMapsで設置するとき、かなり細い路地や、飲み屋街の真ん中を突っ切る表示になってしまうことがあります。
そんなとき応用が効くよう、経由ポイントを設定して道順をカスタマイズする方法もあわせてご紹介します。

“GoogleMapsAPIでルート検索のよう道筋を表示”の続きを読む

jQueryのtriggerはcreateEventで代用

jQueryのtriggerを使うと、すでに付与されているイベントを呼び出して実行できて便利なのですが
プラグインが使えないときもあるため、代用方法を紹介します。

jQueryを使えないときは
createEventでイベントを作成し、initEventで初期化し、dispatchEventで付与しすると
イベントを発火させられます。

この方法は
clickなどの基本的なイベントはIE8以上から対応しており
独自に作成したカスタムイベントは、IE9以上からの対応しています。

なお、triggerがIEのバーションに縛られず実行できるのは
ここで紹介するcreateEventを単純に使っているのではなくjQuery内で独自にオブジェクトを組んで作りこんであるためです。
古いブラウザへの対応が必須だったり、急遽サポート範囲が広がったり、納期がいきなりタイトになるなど心配事があるなら
安定性を考慮して、jQueryが使えるよう働きかけるほうが賢明だと個人的には思います…

“jQueryのtriggerはcreateEventで代用”の続きを読む