iphoneでinput要素にfocus時に拡大してしまう問題

iphoneで名前や住所を入力する画面はよくあると思います。

ただiphoneの仕様で入力要素のfocus時に勝手に拡大されてしまう、ありがた迷惑な機能があります。

入力してfocusが外れても拡大されたままなので、とてもめんどくさい状態のままになってしまいます。

viewportのズーム許可を設定するuser-scalableをnoに設定して回避する事も可能ですが、ピンチイン・アウトで操作ができなくなってしまうのでユーザビリティ的によくありません。

解決策としては、input要素に設定されているfont-sizeが16px以上であれば拡大されなくなります。

補足

デザイン的に16pxは大きすぎるという場合にはtransform: scale()を使って無理やり縮小させるという方法があります。

sketchの簡単切り出し

自分が普段使っているちょっとした小技を紹介します。

sketchでとりあえず画像を切り出したい時ってありませんか？？

右下にあるExportから選択して保存先を指定して…っていちいちめんどくさいですよね。

そんな時はドラッグ&ドロップで簡単に画像が切り出せてしまいます。

左にあるレイヤーリストで切り出したい要素をドラッグ&ドロップします。

簡単に画像が切り出されました。ぜひ試して見てください。

markdownリスト記述方法

markdown記述でリストで記述する方法で、HTMLでいうとolにあたるものの書き方が独特でした。

1. リスト1
2. リスト2
3. リスト3

これで頭につく数値が 1. 2. 3.と数字が増えて行きますが、

1. リスト1
1. リスト2
1. リスト3

このような書き方で1. 2. 3.と表示されます。

2. リスト1
2. リスト2
2. リスト3

これでも同じです。なんか不思議ですね。

npm version

このコマンドはpackage.jsonのバージョンを上げてgitのコミットとタグを追加してくれるコマンドです。

1. gitのワーキングディレクトリがクリーンになってるか確認する
2. preversionのスクリプトを実行する
3. package.jsonのバージョンを上げる
4. versionのスクリプトを実行する
5. gitコミット作成＆タグ追加する
6. postversionのスクリプトを実行する

のような処理の流れになるみたいです。

npm-scriptsに何も処理を設定していない場合は１・３・５の処理だけ走ります。

scripts: {
  "postversion": "git push && git push --tags"
}

このscriptsを設定して、例えばnpm version minorと叩くと

package.jsonのversionを上げてくれて、gitのタグもきってくれる処理を一度にしてくれるのでとても便利です。

タグを切る時にとても便利なのでぜひ使って見てください。

docs.npmjs.com

ショートカットの大切さ

macでアプリケーションを変更する時のショートカットキーがあります。

command + tabこれはmacを使っている人ならほとんどの人が知っていると思います。

ただ自分は今までこのようなショートカットキーを使ってきていませんでした。

弊社の優秀なエンジニアは独自のショートカットの方法を持っていたりして、仕事のスピードをあげています。

最初は慣れず今まで通りタッチパッドで操作してしまう事が多々ありましたが、意識的に使うようにして体に覚えさせるようにした事で今ではスムーズに操作する事ができています。

もちろん操作の時間短縮がされましたし、日々パソコンを使ってる人にとっても有用な事だと思います。

エンジニアには技術的な事もとても大切ですが、それ以前にパソコンを扱うスキルもとても大切だという事だと思うようになりました。

placeholderに装飾をする場合

ちょうどform周りの実装をしていて、placeholderにオリジナルの色を付けたい時にどうしたらいいのだろうと思い、調べたら簡単にできました。 ちなみに端末や、ブラウザによってplaceholderの文字色はそれぞれ違う設定になっています。

例）
::-webkit-input-placeholder {
  color: red;
}

::-moz-placeholder {
  color: red;
}

:-ms-input-placeholder {
  color: red;
}

chrome/safari/firefox/ie用のベンダープレフィックスを付けて設定してください。

これで文字色以外にも色々手を加える事ができそうですね。

Passive Event設定によるスクロールイベントの改善

javascriptのイベントハンドラはevent.preventDefault()スクロールを止めてしまう事があります。

なのでイベントハンドラの処理が完了するまでスクロールする事ができずに、ユーザビリティのて低下につながってしまいます。。

document.addEventListener('touchstart', handler, {passive: true});

Passive eventはブラウザのスクロールを止めません。

上記で記述したようにpassive: trueで設定されたイベントハンドラは、処理が完了をするまで待つ事がなく、ユーザビリティの低下を防ぐ事ができます。

追記

ここで掲載されている動画で比較されています。 developers.google.com