■初めに
関西のとある企業でエンジニアをしている物です!
普段はバックエンド領域の構築や運用を行っています。
フロントエンド領域のエンジニアをみて華があって良いなと思う事があります.....
そこで今回は裏方の私がChatGPTの力を借りてwebアプリを作成したお話となります。
今回はサービス解説となります、技術解説は次回の記事に作成させて頂きます。
■IP住所検索サービス
今回作成したwebサービスは「IP住所検索サービス」となります。
IPアドレスやドメインから所属する住所情報を取得し表示するサイトとなります。
フォームに入力したIPデータをJavaScriptのFetchAPIを使用しipinfo.ioのAPIから住所情報を取得します。
次に緯度経度情報を使用し「OpenStreetMap」にて位置情報を埋め込み表示させる機能を作成致しました。
ドメインが入力された際はgoogleのDNSを利用しIPに変換して上記の処理を実行しています。
また現在はベータ版とさせて頂いております!
■結果表示
今回は例として「8.8.8.8」を検索しました。
検索結果は上記画像の様に表示されます。
表示される項目は以下となります。
- マップ情報
- 検索情報
- 国情報
- 所属地域
■主な特徴
- ローカル環境で実行
- マップ表示
- ドメイン対応
■表示速度
本サイトはHTMLとJSのみの静的サイトとなる為、比較的早いスピードで表示されます。
デザインも白を基調としたシンプルな構成となっております。
■コラム記事ページ
コラムページではサービス利用方法やIP検索に関連する記事を掲載しております。
■まとめ
いかがでございますでしょうか。
今後はまだ未実装のマルチ言語対応等を進めていく予定となります。
こんな機能が欲しい等の要望がございましたらコメントよろしくお願い致します。