Vue.js の イベント装飾子で preventDefault と stopPropagation

Vue.js 2では、テンプレートでイベント装飾子を使うと簡単にpreventDefaultやstopPropagationを定義できます。

参考:
イベントハンドリング – Vue.js

event.preventDefault -> .prevent

<a href="#" @click.prevent="ファンクション">link</a>

event.stopPropagation -> .stop

<a href="#" @click.stop="ファンクション">link</a>

重ね付け

<a href="#" @click.prevent.stop="ファンクション">link</a>

サンプル

formの枠をクリックで背景色が点滅
リンク先の設定してあるリンクにclickイベントを付与し、.preventと.stopのサンプル
actionでURLが設定してあるformのbuttonにclickイベントを付与し、.preventと.stopのサンプル

See the Pen Vue.js event modifier by webdev (@webdev-jp-net) on CodePen.0

登録なしで地図を組込みたいなら Leaflet.jsで国土地理院地図を表示

2016年の6月からGoogleMapsAPIのサービスが、APIキー必須になったため
無料とはいえ、地図を設置するWEBサイトを登録することが必須になりました。

そこで、代わりというには少し毛色が違うかもしれませんが
ルート検索などの機能はついていないものの、登録なしで自由にさわられる地図表示の仕組みとして
JavaScriptライブラリLeaflet.jsを使い、国土地理院が無料で公開している地理院地図のタイルデータを表示するサンプルを紹介します。

See the Pen Leaflet.jsで国土地理院地図を表示 by webdev (@webdev-jp-net) on CodePen.0

“登録なしで地図を組込みたいなら Leaflet.jsで国土地理院地図を表示” の続きを読む

MacOS 10.12 SierraにしてからGitでPermission denied (publickey).

以前、GitのSSH接続ができなくなったときの対応として
ssh秘密鍵id_rsaのパーミッションは600という記事を書いたのですが
それを以ってしても Permission denied (publickey). エラーが出続ける事態が。

結論

ssh-addコマンドで、SSHエージェントに秘密鍵を登録すると、解消されました。

$ ssh-add -K ~/.ssh/【Github用の秘密鍵】

“MacOS 10.12 SierraにしてからGitでPermission denied (publickey).” の続きを読む

iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ

iOS Safari 8, 9, 10 では
overflow-scrolling: touch; を指定している要素の親に position: fixed; を指定している要素があると
要素を最後までスクロールしたあと、さらにスクロールしようとする操作をしたとき
…つまり、バウンスが発動しようとしてfixedで阻止された瞬間に
画面が数秒間フリーズする不具合があります。

いろいろ試しましたが、行き着いた回避策は2つ

  1. fixedを諦める
  2. overflow-scrolling: touch;の慣性スクロールを諦める

いずれかでした。

“iOS Safari で fixed 配下の overflow-scrolling要素がフリーズするバグ” の続きを読む

package.jsonのscriptsでローカルインストールしたgulpでtaskを実行

執筆当時の2017年5月は、gulpはバージョン3.9.1でしたが
ベータ版のgulp4が公開されていたので、それをローカルインストールしてプロジェクトを作成してみました。

gulp4をローカルインストールすると、package.jsonの記述はこのようになります。

    "gulp": "github:gulpjs/gulp#4.0",

ですが、このまま普通に gulp コマンドでdefaultのタスクを実行すると
ローカルインストールしたgulp4ではなく、グローバルインストールしてあるほうのgulpでタスクが実行されてしまいます。

“package.jsonのscriptsでローカルインストールしたgulpでtaskを実行” の続きを読む

gulp4でTypeErrorがでるときはgulp-cliが原因

gulp4を使用しているプロジェクトをnpm installから展開し、gulpのdefaultタスクを実行しようとすると
このようなエラーがでました。

$ gulp
[xx:xx:24xx Using gulpfile /xxx/gulpfile.js
/Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                  ^

TypeError: Cannot read property 'apply' of undefined
    at /Users/xxx/.nodebrew/node/v6.1.0/lib/node_modules/gulp/bin/gulp.js:129:19
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Function.Module.runMain (module.js:577:11)
    at startup (node.js:160:18)
    at node.js:445:3

調べてみると、gulp4とgulp-cliのバージョンが噛み合わないと出るエラーだと判明。

$ gulp -v
[XX:XX:XX] CLI version 3.9.1
[XX:XX:XX] Local version 4.0.0-alpha.2

とりあえず、gulp-cliのバージョンを上げてみました。

$ sudo npm install -g gulp-cli
$ gulp -v
[xx:xx:xx] CLI version 1.3.0
[xx:xx:xx] Local version 4.0.0-alpha.2

これで解決。
gulpのタスクも実行できるようになりました。

$ gulp
[xx:xx:xx] Using gulpfile /xx/gulpfile.js
[xx:xx:xx] Starting 'default'...

JavaScriptでカラーコードをHEX(16進数)/RGB変換

HEX(#ff000などの16進数カラーコード)をrgbに変換するJavaScriptです。
HEX指定の色を、半透明にしたくてrgbaコードがほしい時に使いました。

See the Pen HEX <--> RGB by webdev (@webdev-jp-net) on CodePen.0

HEX→RGB

HEXは、R2桁+G2桁+B2桁が集合した6桁なので
この手順でRGBに変換できます。

  1. substringで2桁ずつ3つに分解
  2. parseIntで16進数から10進数に変換

RGB→HEX

HEXからRGBの逆パターンです。

  1. R,G,Bそれぞれの値をparseIntで10進数から16進数に変換
  2. 6桁に結合

Internet Explorer 11の開発者ツールでウィンドウサイズ指定

InternetExplorer 11から、F12開発者ツールが新しくなりました。
増えた機能もそこそこありますが、ブラウザウィンドウのサイズを指定する機能は
このアップデートでなくなってしまいました。

意外とプレゼンやマニュアルなどに役立つんですよね、この機能。
私は今回、レスポンシブデザインの説明に使うキャプチャ撮影で必要に迫られました。
ブレークポイントの説明で、サイズをアバウトにできないため、px決め打ちでサイズ変更できなくて一瞬焦りました。

調べてみると、
ツールをインストールする方法や、ショートカットを作成する方法が該当。
う…ちょっと面倒だな。

前置きはさておき、発想を転換すれば
F12開発ツールのみで手軽にウィンドウサイズを変えられ事に気づいたのでご紹介します。

“Internet Explorer 11の開発者ツールでウィンドウサイズ指定” の続きを読む