2020年度の振り返り(エンジニア1年目)
はじめに
公務員をやめて2020年4月にエンジニアになってからちょうど1年経ったので振り返りつつ技術の棚卸しでも。個人開発と業務ごちゃまぜです(業務系は当然守秘義務を厳守)。
1年間やったこと
つくったもの
ほか多数
- Pythonモジュール
ほか多数
- npmモジュール
Webアプリケーション
業務の6割くらいはこれ
Vue.js + Mapbox GL JSの組み合わせにかなり知識と自信がついたその他
こちらのジオコーディング部分を開発
業務で触った言語たち
- Python: たくさん書いた
- JavaScript/TypeScript(Node.js) ハゲるほどたくさん書いた
- Rust: ほぼ趣味
ライブラリ・フレームワーク
- GDAL
- QGIS-API
- PyQt
- OpenCV
- Vue.js
- React
- Mapbox GL JS
- OpenLayers
その他身についたこと
アウトプット
人気あったやつで選出
PyQtのsignalとconnectとlambda式について - Qiita
Pythonの数値計算をRustに置き換えて速度比較してみた - Qiita
地理院タイルとdeck.glで3D地図をつくろう - Qiita
Vue3.0 + TypeScript + Mapbox GL JSの環境構築 - Qiita
3D地図ライブラリ「harp.gl」でベクタータイルを描画する - Qiita
Vue+Vue router+AxiosによるAPIエラーハンドリングとページ遷移の実装パターン - Qiita
ラスタータイルのつくりかた(2021年版) - Qiita
登壇
www.slideshare.net
www.slideshare.net
感想
全てを書けてる訳じゃないですが、見返すといろんなことやったなぁと思いました。VueとMapbox GL JSでフロント開発しながらベクタータイル作りまくったり、Pythonでクソデカラスターをたくさん処理したり、LTとか登壇とかたくさんしたり、濃かったですね。ただいかんせん、物理的な出会いはほぼなく、なんなら1年でたぶん30日くらいしか出社してません。在宅率も高く、来年度の課題は健康維持でしょう。そんな感じで脳への刺激は足りない感じでしたが、楽しい年でした。
来年度はもっと良い年度になるよね、ハム太郎!
年末年始の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依存からは抜けられそうにありません。現場からは以上です。