使用技術一覧

言語系

ライブラリ・フレームワーク

API

目次

1. プロジェクトの概要
2. 環境
3. ディレクトリ構成
4. 事前準備
5. 開発環境構築

プロジェクトの概要

プロジェクト名

ALTMAP (Access Log To heatMAP)

プロジェクトについて

アクセスログからIPアドレスを抽出し，アクセス元をヒートマップで可視化するツール．

プロジェクトのデモ画像

環境

言語・フレームワーク	バージョン
Node.js	21.1.0
React	18.3.1
MUI	5.15.19
Leaflet	1.9.4

その他のパッケージのバージョンはpackage.jsonを参照してください．

ディレクトリ構成

.
├── .env.local
├── .gitignore
├── README.md
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.jsx
    ├── App.test.js
    ├── api
    ├── assets
    ├── index.js
    ├── layout
    ├── pages
    ├── reportWebVitals.js
    ├── setupTests.js
    ├── store
    ├── theme
    └── utils

事前準備

本プロジェクトでは，IPアドレスの情報を取得するために，IPinfo のAPIを使用しています． このAPIを使用するには，アクセストークンを取得する必要があるため，IPinfo公式サイトで取得してください．

開発環境構築

1. Githubから本リポジトリをクローン．

git clone https://github.com/Tomee0818/ALTMAP.git

2. パッケージのインストール．

npm install

3. .env.localファイルの作成．

cp .env.local.sample .env.local

この.env.localファイル内のREACT_APP_ACCESS_TOKENに，IPinfoの公式サイトで取得したアクセストークンを記入．

4. プロジェクトを実行．

npm run start