kitak's blog

Kみたいなエンジニアになりたいブログ

MobileSafari でダブルタップしたらズームするのを防ぐ

iOS10 から <meta name="viewport" ...user-scalable=no の指定が無効になって、ダブルタップしたらズームされるようになった。

読み物系のサイトでは問題ないと思うんだけど、ボタンを連打するようなUIを作っている場合、拡大されるとUXとしてよろしくないので、防ぎたい。

調べたら JS で touch 系のイベントリスナーを登録して、フラグが立ったら preventDefault するようなハックをよく見かけたのだけど、もう少しシンプルにできないか、と思った。
そういえばタッチの振る舞いを決める CSS プロパティがあったことを思い出して、サイト上でのタップ操作をサポートする  |  Web  |  Google Developers を読んだら、touch-action: manipulation; というドンピシャなものがあった。クリック遅延を防止するらしいので、画面をタップした際の click イベントが発火するタイミングにも良い影響があるかもしれない。

touch-action: manipulation ダブルタップ操作を無効にして、ブラウザでのクリック遅延を防止します。 スクロールやピンチズームの処理はブラウザに委ねます。

ベースの CSS に以下の記述を足しておしまい。

html {
  touch-action: manipulation;
}

寝具を買い替えた

同じ寝具でも、人によって合う合わないあると思うので、あくまで参考程度で。

引っ越したときに寝具を買い替えたのだけど、自分の身体に合わなくて、腰が痛くなっていた(メーカーや商品名は伏せるけれど、いわゆる体圧分散マットレスというやつ)

もともと、ベッドや布団も検討していたのだけど、ベッドを置くと今の部屋の広さでは窮屈、ベッドや布団から出るホコリが苦手なのもあって、「折り畳めて、立て掛けることができる or 収納ができる」「ホコリがでない」「洗濯可能」といった条件を満たすマットレスにしたのだった。

色々調べて、買い替えた結果、以下の組み合わせでぐっすり眠れるようになって、腰の痛みが改善された。 特にグースリーのマットレスが良い。羽毛を使っていないのに羽毛のようにふかふかしていて、ホコリも出ない、洗濯も可能という優れものだった。寝心地が良すぎて、朝なかなか起き上がることができなくなるぐらい。

https://www.amazon.co.jp/gp/product/B07GKR5B9Q/

rollup で Vue コンポーネントの npm パッケージを作る時に SSR も考慮する

お手伝いしている会社で、対応したやつのメモ。

Vue のコンポーネントを複数のプロジェクトで共有するために npm パッケージ化しているときに遭遇した問題。 Vue コンポーネントを npm パッケージ化する — Vue.js 等を参考にパッケージを作っている場合は、ブラウザで動作させる前提のバンドルファイルが生成されるので、これを SSR に利用すると、documentなどのブラウザのAPIにアクセスしてエラーになる。

対応としては、SSR 用のバンドルファイルを別に用意して、実行するプラットフォームに応じて利用するバンドルファイルを切り替える。 具体的には、rollup の場合、Examples | Rollup Plugin Vue に書かれているオプションを指定すると SSR 用のバンドルファイルが生成される。

切り替えは nuxt の場合、以下のようにプラットフォームごとにプラグインのファイルを用意して

foo-ui-client.js

import Vue from 'vue'
import FooUI from 'foo_ui'
Vue.use(FooUI)

foo-ui-server.js

import Vue from 'vue'
import FooUI from 'foo_ui/dist/ssr'
Vue.use(FooUI)

プラグインの設定で、作成したファイルに対して適切な mode を指定する。

plugins: [
  ....,
  { src: '@/plugins/foo-ui-client.js', mode: 'client' },
  { src: '@/plugins/foo-ui-server.js', mode: 'server' },
 ],

七都市物語(4)を読んだ

七都市物語(4) (ヤンマガKCスペシャル)

七都市物語(4) (ヤンマガKCスペシャル)

前巻に引き続き、今回もノルトくんががんばる。
この作品は、登場人物のキャラが立っているし、都市間の攻防の戦略・戦術も読んでいて感心する。原作者が同じ銀英伝もそうだけど、三国志的な面白さを近未来SFに持ってきたらこんなかんじになるだろうな、という作品。七都市だからひょっとしたら春秋戦国時代とかが元になっているのかも。 次が最終巻らしいのだけど、めっちゃ面白いので寂しい。

2019年3月4日

鹿児島3日目。足が棒のようになっていて痛い。

最終日は観光をする。まち巡りバスに乗って、城山、西郷洞窟、仙巌園に行った。雨の日で景色はちょっと微妙だったけど、桜島の大きさに感嘆する。 ちょっと駆け足で3時間程度で回った。

お昼は、とんかつ川久に行こうとしたが、行列がすごく一時間待つということだったので夕方に行くことにして、鹿児島中央駅構内のお寿司を食べた。アラやキンメダイなど、白身のお魚をいただく。ねっとりと甘い味でよかった。

身体を休めるために夕方まで天文館近くのスパでのんびりする。足をマッサージしてもらった。痛気持ちいいかんじで、声を出すのをなぜか必死でこらえてしまった。 サウナがフィンランド式っぽい本格的なやつで、ロウリュウのサービスがあると書いてあり期待したが、時間になってもロウリュウは始まらなかった。残念。

鹿児島中央駅に戻って、とんかつ川久へ。17時の開店10分前についたが、既に3,4人並んでいた。開店と同時にぞろぞろ人がやってきてあっという間に席が埋まる。上黒豚ロースカツをいただく。トンカツでこんなレアっぽいのあるの!とびっくりした。箸を入れると脂が流れて、慌てて口に運ぶと口いっぱいに旨味が広がって、うほぉ、となった。とんかつをいつでも食えるぐらいの人間であり続けたい。

とんかつをいただいた後はバスで空港へ。本を読みながら、ぼんやりしていた。飛行機のトラブルで到着が遅れて、家についたのは日付が変わった後。
録画しておいたビジャレアルvsアラベスを見る。前半が終わったぐらいのところで疲れて寝た。

2019年3月3日

鹿児島マラソンに参加。天気はレース中は曇りで、絶好のマラソン日和だった。
4時間半が目標で、最初はゆっくりのペースで始めて、15km毎にペースを上げていくプランだったが、35km地点で急に足が重くなり、勾配のアップダウンが続いたこともあって、ペースダウン。 最終的に4時間44分21秒でフィニッシュ。 直前に30kmLSDもやったのでいけるかなーと思ったけど、甘くなかった。40~50kmのLSDをやるか、長距離ランの最後にビルドアップ走を加えて、終盤にスパートをかけることができる足を作らないとだめだなーという反省。

ラソンの後は、ホテルに戻って次の予定まで休息。

18時から前職の同期のNと、アミュプラザの「いちにぃさん」でご飯を食べる。蒸ししゃぶしゃぶが野菜がホクホク、豚肉の旨味が染みていておいしかった。

2019年3月2日

鹿児島マラソンに参加するために鹿児島へ。

早朝に足に刺激を与えるために6:30~7:00/kmぐらいのペースで5kmを走る。 その後、飛行機で羽田空港から鹿児島空港へ。鹿児島は雨。鹿児島空港から鹿児島中央駅へバスで移動する。大体40分くらい。

移動中「親切すぎるiPhoneアプリ開発の本」を読んでいた。コードをいじくって実験をしながらSDKの解説をしている本で、簡単なチュートリアルをこなした後に読むと自分の中でブラックボックスになっていたアプリの起動の過程とかUIKitのクラスヒエラルキーが頭の中で整理されてよかった。逆に何も知らない状態で読むと、きつそう。

ホテルにチェックインした後に鹿児島中央駅から市電で天文館へ。公園でナンバーカードを受け取る。雨のせいで露天や催し物はガランとしていた。
友人のIさんと落ち合って、むじゃきでしろくまを食べる。

移動で疲れてしまったので、ホテルに戻って、2時間ぐらい横になる。明日がクラシコなので、WOWOWでやっていたクラシコ直前特集(契約なしで見れる)をなんとなく見ていた。鹿児島にいるので、リアルタイムで見れないのが残念。

その後、普段、仕事をしていて、今回マラソンに一緒に参加する福岡の会社のOさん、Hさんと鹿児島中央駅近くの吾愛人で豚しゃぶを食べる。脂が甘くておいしかった。

明日は7時集合なので、早めに寝る。