docs: translate README into ja

- Translates `README.md` and `example/README.md` into Japanese.

Author: kikuomax

README.md

@@ -1,3 +1,5 @@
+English / [日本語](./README_ja.md)
+
 # Mapbox Collision Boxes
 
 A utility library for [Mapbox GL JS (`mapbox-gl`)](https://docs.mapbox.com/mapbox-gl-js/guides/), that calculates collision boxes of symbols on a Mapbox map in the screen coordinate.
@@ -45,13 +47,13 @@ You can find a complete project in the [`example`](./example) folder.
 
 I have been developing an app that shows custom symbols on a map using [symbol layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol) of `mapbox-gl`.
 When symbols overlap on the screen, `mapbox-gl` shows only the first one and hides other overlapping ones.
-As far as I know, there is no `mapbox-gl` API to get symbols hidden by a specific symbol on the screen\*.
+As far as I know, there is no `mapbox-gl` API to get symbols hidden by a specific symbol on the screen.
 This is not convenient for my app because it wants to list all the symbols including hidden ones at a clicked point.
 Although there is an [option](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-icon-allow-overlap) that makes `mapbox-gl` skip collision detection and show every single symbol on the screen, this will make the map too busy if there are many overlapping symbols.
 
 So I decided to **develop a library that can aggregate symbols overlapping with a specific symbol on a Mapbox map**.
 
-Please refer to my [blog post](https://codemonger.io/blog/0009-mapbox-collision-boxes/) for more details.
+Please refer to [my blog post](https://codemonger.io/blog/0009-mapbox-collision-boxes/) for more details.
 
 ## API Documentation
 
@@ -61,7 +63,7 @@ Please refer to [`api-docs/markdown/index.md`](./api-docs/markdown/index.md).
 
 ### Viewport padding
 
-Collision boxes collected by `collectCollisionBoxesAndFeatures` include constant offsets.
+Collision boxes collected by [`collectCollisionBoxesAndFeatures`](./api-docs/markdown/mapbox-collision-boxes.collectcollisionboxesandfeatures.md) include constant offsets.
 They have the actual screen position + `100`\* along both the x- and y-axes.
 Since the offsets do not matter to hit tests among collision boxes, this library leaves them to avoid unnecessary calculation.
 If you want to project collision boxes to the actuall screen, you have to subtract `100` from their x- and y-axis values.

README_ja.md

@@ -0,0 +1,71 @@
+[English](./README.md) / 日本語
+
+# Mapbox Collision Boxes
+
+Mapboxマップ上の衝突ボックスを画面座標系で計算する、[Mapbox GL JS (`mapbox-gl`)](https://docs.mapbox.com/mapbox-gl-js/guides/)用のユーティリティライブラリです。
+
+## はじめる
+
+### 事前準備
+
+このライブラリは`mapbox-gl`バージョン2以降と一緒に使用する想定です。
+
+### インストール方法
+
+このレポジトリを依存関係に追加してください。
+
+```sh
+npm install https://github.com/codemonger-io/mapbox-collision-boxes#v0.1.0
+```
+
+### 使い方
+
+以下のスニペットはクリックしたシンボルに画面上で隠されているFeatureを集めてくる例です。
+
+```ts
+import mapboxgl from 'mapbox-gl';
+import { boxesIntersect, collectCollisionBoxesAndFeatures } from 'mapbox-collision-boxes';
+
+const map = new mapboxgl.Map(
+    // ... マップの初期化
+);
+// ... その他の設定
+const layerId = 'cats-and-dogs'; // カスタムレイヤーを追加した想定
+const map.on('click', layerId, async event => {
+    const clickedFeatureId = event.features[0].id;
+    const collisionBoxes = await collectCollisionBoxesAndFeatures(map, layerId);
+    const clickedBox = collisionBoxes.find(box => box.feature.id === clickedFeatureId);
+    const hiddenBoxes = collisionBoxes.filter(box => box !== clickedBox && boxesIntersect(box.box, clickedBox.box));
+    const hiddenFeatures = hiddenBoxes.map(box => box.feature);
+    // ... Featureの処理
+});
+```
+
+[`example`](./example)フォルダに完成したプロジェクトがあります。
+
+## 動機
+
+私はマップ上に`mapbox-gl`の[Symbol Layer](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol)を使ってカスタムシンボルを表示するアプリを開発中です。
+画面上でシンボルが被ると、`mapbox-gl`は最初のものだけ表示し、他の重なるものは隠してしまいます。
+私の知る限り、`mapbox-gl`には画面上で特定のシンボルによって隠されているシンボルを取得するAPIはありません。
+開発中のアプリでは非表示のものも含めてクリックされたポイントにあるすべてのシンボルをリストしたいので、これでは不都合です。
+`mapbox-gl`に衝突検出をスキップさせてすべてのシンボルを画面に表示させる[オプション](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#layout-symbol-icon-allow-overlap)はありますが、重なるシンボルがたくさんある場合は画面がごちゃごちゃし過ぎてしまいます。
+
+ということで**Mapboxマップ上で特定のシンボルと重なるシンボルを集めることのできるライブラリを開発**することにしました。
+
+詳しくは[私のブログ投稿](https://codemonger.io/blog/0009-mapbox-collision-boxes/)をご覧ください。
+
+## APIドキュメント
+
+[`api-docs/markdown/index.md`](./api-docs/markdown/index.md)をご覧ください。
+
+## Tips
+
+### ビューポートオフセット
+
+[`collectCollisionBoxesAndFeatures`](./api-docs/markdown/mapbox-collision-boxes.collectcollisionboxesandfeatures.md)が集める衝突ボックスは固定のオフセットを含んでいます。
+xとyの両軸について実際の画面位置 + `100`\*になっています。
+オフセットは衝突ボックス同士の衝突判定には影響しないため、このライブラリでは不必要な計算を避けるためにそのままにしてあります。
+衝突ボックスを実際の画面に投影したい場合は、xとy軸の値から`100`を引かなければなりません。
+
+\* この定数は`viewportPadding`として https://github.com/mapbox/mapbox-gl-js/blob/e29e113ff5e1f4c073f84b8cbe546006d2fb604f/src/symbol/collision_index.js#L50 に定義されていますが、`mapbox-gl`はエクスポートしていません。

example/README.md

@@ -1,3 +1,5 @@
+English / [日本語](./README_ja.md)
+
 # Example for Mapbox Collision Boxes
 
 A simple [Vue 3](https://vuejs.org) app to demonstrate `mapbox-collision-boxes`.

example/README_ja.md

@@ -0,0 +1,45 @@
+[English](./README.md) / 日本語
+
+# Mapbox Collision Boxesのサンプル
+
+`mapbox-collision-boxes`のデモをする簡単な[Vue 3](https://vuejs.org)アプリです。
+このプロジェクトは`npm init vue@latest`で生成しました。
+
+このアプリは東京駅周辺の[Mapbox](https://www.mapbox.com)マップを表示し、ランダムに猫と犬のシンボルを撒き散らします。
+猫か犬のシンボルをクリックしどのシンボルが隠されているかを見ることができます。
+![スクリーンショット](./screenshots.png)
+
+## はじめる
+
+### 事前準備
+
+[Node.js](https://nodejs.org/en/)をインストールする必要があります。
+このライブラリはバージョン16で開発しましたが、バージョン12以降なら問題ないはずです。
+
+[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/)はマップデータをダウンロードするために[アクセストークン](https://docs.mapbox.com/help/getting-started/access-tokens/)を要求します。
+アクセストークンはこのレポジトリに含まれていませんので、自身で作成しなければなりません。
+[「Mapboxアクセストークンを設定する」](#Mapboxアクセストークンを設定する)をご確認ください。
+
+### Mapboxアクセストークンを設定する
+
+`mapbox-config.ts`ファイルを`src`フォルダに作成し、以下の内容を書き込んでください。
+```ts
+export const MAPBOX_ACCESS_TOKEN = '<Your Mapbox Access Token Here>';
+```
+
+`<Your Mapbox Access Token Here>`をあなたのMapboxアクセストークンで置き換えてください。
+`src/mapbox-config.ts`はこのレポジトリにプッシュされません。
+
+### 依存関係を解決する
+
+```sh
+npm install
+```
+
+### 開発サーバーでサンプルを動かす
+
+```sh
+npm run dev
+```
+
+開発サーバーは http://localhost:5173 でホストされます。