年末年始の1ヶ月超、実家でワーケーションしてみた話
はじめに
前回がこちら
反省点が以下
キーボードを持っていかなかったので、大変打ちにくかった(実家にはJIS配列でおかしな感触のキーボードしかなかった) 机と椅子の環境があまりよくなかった
改善した結果
- キーボードは職場・マンションと全く同じものを別途購入
- マウスもやっすいやつを購入
- 机と椅子は身内・地元ルートで格安で入手
- モニタとモニタアームは余していたものを設置
- 加湿器は別途購入(保湿だいじ)
要はね、職場・マンションとほぼ同じ環境を整えた訳です。 そもそも職場にほぼ出勤しない状況になっている訳で、実家だろうがオンラインな訳で、物理的な条件を揃えてやれば常に同じように仕事ができるでしょう。 (子供の頃からずっとフルサイズキーボードユーザーなので、ラップトップのキーボードを使うと大幅に効率が低下します、ノートのキーボードとトラックパッドで作業できる人ならもっと身軽ですね)。
ちなみに同じメーカーのキーボードを3台買ったのは人生で初めてです。(プログラマーはHKKBを携帯すべきなんでしょうが私にはアレは高すぎるし荷物がかさばる)
https://www.amazon.co.jp/dp/B00G4TS1Y8/
おわりに
複数拠点で同じレベルの作業効率を実現させるには、キーボードやマウス、モニタといった機器に加え、ネットワーク速度を一定以上の水準にする必要があるでしょう。 正直普段の作業となんにも変わらなかったので、たけー家賃払ってマンションを維持する必要があるのか悩ましいこの頃。
OpenLayersでバイナリベクトルタイルをstyle.jsonでスタイリング表示する
はじめに
OpenLayersは基本機能だけでバイナリベクトルタイルをソースとしたレイヤーを表示する事が出来ます。
でも基本機能ではMapbox Style形式のいわゆるstyle.jsonを読み込む事は出来ません。 ここで、ol-mapbox-styleなるモジュールを使用して、style.jsonを適用してみました(React + TypeScriptでやってみました)。
ol-mapbox-style
yarn add ol-mapbox-style
対象のバイナリベクトルタイル
# 地理院ベクトルタイル https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf
地理院ベクトルタイルのstyle.jsonは以下で取得出来ます。
実装例
React + TypeScript環境での実装例です。
型定義の適用
インストールするだけだと型定義が適用されずトランスパイラに怒られます。
上記に従い、tsconfig.json
にいくつか追記します。
(includeとtypeAcquisitionを追記すればOK)
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src", "node_modules/ol-mapbox-style/**/*" ], "typeAcquisition": { "exclude": [ "ol-mapbox-style" ] } }
React Function Component + hooksでの実装例
import { useRef, useState, useEffect } from 'react'; import styled from 'styled-components'; import Map from 'ol/Map'; import View from 'ol/View'; import VectorTileLayer from 'ol/layer/VectorTile'; import VectorTileSource from 'ol/source/VectorTile'; import MVTFormat from 'ol/format/MVT'; import { fromLonLat } from 'ol/proj'; import 'ol/ol.css'; import style from './std.json'; import stylefunction from 'ol-mapbox-style/dist/stylefunction'; const MapPaneDiv = styled.div` width: 100%; height: 800px; `; const MapPane = () => { const [mapInstance, setMapInstance] = useState<Map>(); const mapContainer = useRef<HTMLDivElement | null>(null); const vt = new VectorTileLayer({ source: new VectorTileSource({ format: new MVTFormat(), url: 'https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf', attributions: [ '<a href="https://github.com/gsi-cyberjapan/gsimaps-vector-experiment" target="_blank" rel=”noopener noreferrer”>国土地理院</a>', ], }), }); // style.jsonで定義されているlayerのidを全て抽出 const layers = style.layers.map((layer) => layer.id); // stylefunction(対象のOpenLayersレイヤー, mapbox-style, 対象のmapbox-layerのidの配列)でスタイル適用 stylefunction(vt, style, layers); useEffect(() => { if (!mapInstance) { if (!mapContainer.current) { return; } const map = new Map({ target: mapContainer.current, view: new View({ center: fromLonLat([140.46, 36.37]), zoom: 10, }), layers: [vt], }); setMapInstance(map); } }, [mapInstance]); return <MapPaneDiv ref={mapContainer}></MapPaneDiv>; }; export default MapPane;
終わりに
OpenLayers自体が標準でベクトルタイル対応している事もあり、OSSの外部モジュールを使用するとは言え実装は簡単です。しかし非WebGLゆえの限界か、地物数が多くなると動作はかなりモッサリです。やはりMapbox GL JSは偉大だったんだなと。個人的にはharp.glに注目している訳ですが、まだまだMapbox GL JS依存からは抜けられそうにありません。現場からは以上です。
audio-technicaのATH-PRO5のイヤーパッドを交換した話
はじめに
15年くらい使い続けているオーテクのATH-PRO5、イヤーパッドが10年くらい前からボロボロになっていたけどなんだかんだそのまま使い続けていた
見てのとおり、合皮部分が全部剥げて中の生地が完全に露出している(さらにドライバー面のメッシュも破けている)。 見た目が悪いだけなのでそのまま使い続けていたが、このデフォルトのイヤーパッドだと30分程度つけているだけで耳が痛くなる(耳の外周部分がガッツリ押さえつけられる)。 という事で交換品を調べてみると、耳を完全に覆ってくれそうな商品があった。
ATH-PRO5mk3と書いてあるが形状は同じなので装着可能である。
実際はちゃんと使えるか多少不安だったし、実際ヘッドホンに対してイヤーパッドの装着部分がかなり小さかった。 だが端の方からハメていきつつ、後半はかなり引っ張って半ば無理やり突っ込んでやればちゃんと装着できる。
もう15年使えそうだ。