Mapboxはウェブマッピングツールキットの定番、geojson.ioのアップデートを行いました。この記事では、過去数ヶ月間にどのようにgeojson.ioを改良し、今後メンテナンスがしやすいようにしていったかを簡単に説明します。

私（筆者クリス氏）はこのツールを何年も使っており、用途によって5つの使い分けをしています。新しい利用者にgeojsonとは何かを説明するためには、地図上にポリゴンを描き、整形されたデータをコードエディターで即座に表示させることが一番だと思います。

geojson.ioは元Mapboxエンジニアのトム・マクライト氏が一人で行ったプロジェクトだとずっと思っていましたが、彼が去って何年も経った今も、Mapboxツールに関する助けを求めて検索すれば、必ず公開されているgithubスレッドにたどり着きます。そこでは、トムがオープンで活発な技術議論をリードし、あらゆる意見を聞き、多くの意見を出してくれています。

トムは、長年にわたってオープンな場でコーディングすることのメリットを私に教えてくれました。彼はその後、空間データ管理のためのgeojson.ioの後継プロジェクトであるPlacemark.ioに従事するようになりました。

問題が山積み

Geojson.ioは時折GitHubに問題が出ていました。

このメッセージは2018年にreadmeに追加されましたが、その後4年間に追加された75の新しい課題は、開発者がまだ使っていて、改善を求めていることを表しています。

geojson.ioは非常にシンプルであることがポイントです。100もの機能やボタンがあるGISツールではないため、誰でも簡単に扱えて、空間データを扱うほとんどの人がすぐに結果を出すことができます。空間データの描画と編集、プロパティの手動編集、異なるフォーマットへの変換が可能です。

また、データパイプラインからの出力データをすばやくプレビューし、すべてが適切に処理されていることを確認することもできます。

さらに高みを目指して

掘り下げる前に、geojson.ioがMapbox GL JSを使用するために何が必要か調べました。Mapbox GL JSとはベクトルタイル、増分ズーム、スムーズなピッチングと回転、スムーズな60fps WebGLレンダリング（他にもたくさんありますが、今回は代表例を挙げてみました）などでWebマッピングに革命を起こしたライブラリです。

Mapbox GL JSは、geojson.ioの最初のコミットから数年後の2015年に初めてリリースされました。geojson.ioは、Webマッピングの古いパラダイムを表すleafletベースのフロントエンドライブラリであるmapbox.jsを利用しており、通常はタイル状のラスターベースマップの上にSVGベクターデータがレンダリングされるものでした。

こちらは2017年にユーザーからGL JSの持ち込みについて質問されたものです。

この問題は、Mapbox GL JSレイヤーのスタイルエディターの必要性を如実に示しており、現在ではMapbox Studioという形で提供されています。

「他の人たちもgeojson.ioの機能をGL JSに加えることに興味があると思うので、もし試してみたいなら、私はいくらでも貢献します！」このコメントがキッカケで改良が始まり5年が経ちました。

Mapbox GL JSを導入するために必要な作業を把握するために、数回にわたってコードベース周辺を調査しました。javascriptバンドルのビルドは古いバージョンのパッケージに依存しており、最新バージョンのnode.jsではうまく動作しないため、すぐにローカル開発環境での問題にぶつかりました。これは、Mapboxの社員であろうとなかろうと、多くの開発者を足止めすることになります。そのため、開発環境をシンプルにして、コードベースに対する障壁をなくすことが最優先事項となりました。

私は個人的なGithubアカウントにフォークして、改良版で作ったgithub-pagesサイトを、geojson.ioに興味がある人々と共有しながら、急速に進展させました。

‍

マップのレンダリングと描画のビットは、コードの中でうまく分離されています。データがインポートされたり、ローカルストレージからロードされると、そのデータは中央のステートオブジェクトに格納され、テーブル、コードエディタ、マップなどを更新するためにイベントがディスパッチされます。 

同様に、ジオメトリの描画やポップアップによる編集の際には、マップがイベントをディスパッチして、中央に保存されたデータを更新することができます。移行は、Mapbox.jsの各呼び出しをMapbox GL JSの同等のものと交換し、L.geoJSON()とmap.addSource()やmap.addLayer()などをトレードインするだけです。

Mapbox GL Drawは描画などの部分でLeaflet Drawと全く同じようには動作しないため、この機能を持たせることが重要になりました。いくつかのカスタムボタンと、Mapbox GL Drawには存在しない明確な「編集」ステートが必要です。

Mapbox GL JSにはベースマップという概念がないため、ベースマップを変更したい場合にも若干の作業が必要でした。マップのスタイルにはベースマップとみなされるすべてのレイヤーを含めることができますが、カスタムまたはアプリ固有のレイヤーはスタックのどこにでも挿入できます。 そのため、スタイルの変更を反映させ、作業中のデータセットのソースレイヤーを再挿入するコードを追加する必要がありました。

数ヶ月の間に、表示、編集、レイヤーの切り替えが安定的に行えるようになりました。

リリースする

作業ブランチは素晴らしいスタートですが、すぐにこれらの変更を取り入れるために実際に何が必要なのかを考える時期になりました。私は社内の slackチャンネルを立ち上げ、様々な機能について意見を述べたり、コードをレビューしたり、このプロジェクトに少しでも参加できる同僚から意見を聞くようにしました。

また、私はステージングサイトへのリンクやスクリーンショット、質問を投下し、様々な機能のメリットについて、常に対話しました。そして、数週間にわたるテストと改良を経て、ようやく完成にこぎつけました。

以下は、最終的にmapboxglを導入したPull Requestです。

https://github.com/mapbox/geojson.io/pull/703

認証の削除という大きな懸念となる機能が導入されています。geojson.ioはgithubリポジトリやgistへの読み書きを可能にします。一部のユーザーには人気の機能ですが、長年にわたって問題をはらんでおり、第三者にgithub権限を付与する必要がありました。

私たちは、この機能を完全に削除し、後日この機能全体を一貫してサポートできるようになったときに、再検討するのが最善であると考えました。認証のためのコードのほとんどはそのまま残っており、当面はUIを隠すだけです。

この変更が公開された後、twitter上でいくつかの動きがあり、またブログの投稿もあって、変更履歴を更新するようにとの指示がありました。githubでは、いくつかの問題点が指摘され始め、その隙間をぬってリグレッションが発生し、リリース後、それらに対応する小さなPRが次々と出てきました。 その一例が、simplestyle-specの実装です。シンプルと書いてあるように、これは色、ストローク、不透明度などのスタイルを geojsonパラメータで定義できるようにするための仕様です。

‍

‍

また、いくつかのうれしい機能も追加されました。

• コードエディタでの折りたたみ可能なブラケット
• コアスタイル(ベースマップ)の追加
• Globe view投影とメルカトル投影の切り替え
• ベースマップと投影法の設定をセッションを跨ぐ
• コードエディタでのコピーボタン

これは私の仕事？はい、そうです！

私はMapboxの新しいデベロッパーリレーションズ（DevRel）プログラムのリーダーとして、Mapboxのツールを使って開発する全ての人にインスピレーションを与えることを使命としています。

私はこの仕事を3つの柱に分けました。デベロッパーコンテンツ、デベロッパーコミュニティ、デベロッパーツールです。ツールは私にとって大きな柱です。空間開発者のツールキットには、まだ十分に注目されていないもの、文書化されていないもの、サポートされていないものがたくさんあります。DevRelで私と一緒に働く人には、コンテンツ制作の際に作成するチュートリアルや簡単なデモに加え、実際のツールのサポートとメンテナンスも担当してほしいと思っています。

また、オープンソースプロジェクトとして、geojson.ioが私たちの開発者コミュニティ構築の一翼を担えることを期待しています。Mapbox のすべてのオープンリポジトリを検証することはできませんが、今のところgeojson.ioの開発は「停止していない」ので安心してください。 あなたが課題を開いたときには、私のチームの誰かが見ていますし、コミュニティからの貢献やフィードバックを奨励するために、より活発なフォーラムを提供するつもりです。

未来の計画

geojson.ioを改良する機会を得たことは、私にとって大きな意味を持っています。

コア機能、UI、アーキテクチャはほとんど同じで、最近の変更の多くは、ビルドプロセスのリファクタリングと、既存の機能セットへの洗練されたベルやホイッスルの追加でした。私はコードベースに深く潜り込み、開発環境のセットアップを容易にし、プロジェクトを前進させるための良いポジションにいます。課題リストをご覧ください。「スタータータスク」の課題がたくさんあり、みなさんの助けが必要です！

上記で説明した社内のslackチャンネルが包括的でコミュニティに焦点を当てたものではないことを十分に認識しています。geojson.ioの問題やPR は公開されていますが、その周りの多くの議論は公開されていません。

私はそれを変えたいと思い、DevRelについての分科会を開催し、DevRelプログラムについての私の目標と、コンテンツ、コミュニティ、ツーリングに関する最近の取り組みについてお話する予定です。

‍

お読みいただきありがとうございました。geojson.ioがあと10年、そしてその先まで生き続けますように！

＊本記事は、Mapbox Inc. Blogの翻訳記事です。