初めての JavaScript Web アプリ: インタラクティブな画像座標ファインダー

フルセイル大学で最初の JavaScript コースを修了した後、私は自分の新しいスキルをテストするプロジェクトに積極的に参加したいと考えていました。私の目標は、機能的で直感的で実用的なものを作成することでした。これが、私の最初の JavaScript Web アプリケーションである Interactive Image Coowned Finder の開発につながりました。

このアプリでは、ユーザーが地図画像をアップロードし、クリックして座標を記録し、一意の名前とオプションの URL を持つレイヤーとして保存できます。このツールを使用すると、誰でもカスタム画像をマッピングしたり注釈を付けたりできるため、Web ページ上の特定の領域やランドマークの識別を伴うビジュアル プロジェクトに特に便利です。この投稿では、アプリの機能、設定、使用方法について説明します。

始める前に、これは仕事のプロジェクトでもあるという重要な注意点があると思います。私の職場では、閉じたネットワークで作業しているため、API やその他のライブラリを使用することができないため、このプロジェクトはホイールを再作成するか、より現代的で高度な開発者が改良した古いアプローチを採用している可能性があります。私自身もそこに到達するのが待ちきれません。とりあえず始めましょう!

まず、中東の地図を表示するシンプルな Web ページを用意します。

これをどうやって便利にできるだろうかと考えました。単純なやり取りかもしれませんが、どうやって? Google、コードペン、その他いくつかのサイトを数時間検索した後、低レベルの方法は画像上の座標を使用することであることに気付きました。どうすれば見つけられますか?グーグルが私に絵を描くように指示したため、私は静かなオフィスの真ん中でパームと向き合うことになりました。そこで、それらを掴むのに役立つツールを作成することにしました。

実用性を重視した非常にシンプルな UI を作りたかったのです。このアプリを使用すると、ユーザーは画像を参照して画面に表示できます。ユーザーは、レイヤー名とオプションのリンクの入力を求められます。次に、対象とする画像領域の周囲の境界ボックスをクリックします。この例ではエジプトを選択しました。

ユーザーが [保存] をクリックすると、結果が以下のレイヤー ログに表示されます。ユーザーは座標だけをコピーしたり、GitHub リポジトリにリンクされたテスト ページで動作するコード行をコピーしたり、レイヤーを編集したりできます。またはレイヤーをまとめて削除します。

デモの最終結果は中東の地図で、ユーザーは国をクリックしてその Wikipedia ページにアクセスできます。このツールを使って試してみたいユースケースは他にもたくさんあります。

読んでいただきありがとうございます!

以上が初めての JavaScript Web アプリ: インタラクティブな画像座標ファインダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。