GitHub Copilot は、より優れたコードをより迅速に記述するのに役立つ AI を利用したコード アシスタントです。 GitHub Copilot では、プロンプトからコード スニペットを生成し、既存のコードの入力候補を提案できます。 GitHub Copilot は、コードと設定から学習し、スタイルとニーズに適応することもできます。 GitHub Copilot は、コードを Bing Maps Web SDK から Azure Maps Web SDK に直接変換したり、Bing Maps API から Azure Maps API に変換したりすることはできませんが、このハウツー記事では、GitHub Copilot を使用して Azure Maps アプリケーションのコードを生成する方法を示します。 これは、Bing Maps for Enterprise から Azure Maps に移行する場合に特に役立ちます。
[前提条件]
- Azure アカウント
- Azure Maps アカウント
- サブスクリプション キー、またはその他の形式の Azure Maps での認証
- Azure Maps Web SDK の基本的な理解
- Azure Maps API の基本的な理解
- GitHub Copilot の GitHub アカウントとサブスクリプション
- Bing Maps for Enterprise と Azure Maps の違いの基本的な理解については、次の記事を参照してください。
ヒント 1: プロンプトを明確な文で記述する
GitHub Copilot を使用する最初の手順は、単純な文でプロンプトを記述することです。 プロンプトは、コードで実行または達成したい操作の簡単な説明です。 たとえば、Azure Maps Web SDK で GeoJSON ファイルを表示する場合は、次のようなプロンプトを記述できます。
Azure Maps WebSDK v3 を使用して HTML プログラムを作成し、次の URL から SymbolLayer に GeoJSON 機能を表示します。 https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson
GitHub Copilot は、選択した言語とフレームワークを使用して、プロンプトに一致するコード スニペットを生成します。 たとえば、HTML と JavaScript を使用している場合、GitHub Copilot は次のようなコード スニペットを生成する可能性があります。
<!DOCTYPE html>
<html>
<head>
<title>Earthquake Data</title>
<script src='https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js'></script>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<style>
#myMap { width: 100%; height: 500px; }
</style>
</head>
<body>
<div id="myMap"></div>
<script>
var map = new atlas.Map("myMap", {
center: [-100, 39],
zoom: 3,
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'Your Azure Maps Key'
}
});
map.events.add('ready', function() {
fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson')
.then(response => response.json())
.then(data => {
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
dataSource.add(data);
map.layers.add(new atlas.layer.SymbolLayer(dataSource));
});
});
</script>
</body>
</html>
ご覧のように、GitHub Copilot は、シンプルで明確なプロンプトから完全で機能的なコード スニペットを生成できます。 その後、コード スニペットをコピーしてコード エディターに貼り付けるか、必要に応じて変更できます。 GitHub Copilot に代わりのコード スニペットを生成するか、既存のコードの変更を完了または提案するように依頼することもできます。
Bing Maps for Enterprise アプリケーションのコード スニペットに依存するのではなく、明確な文でプロンプトを記述する利点は、アプリケーションのロジックと機能に集中できるため、GitHub Copilot が目標を理解する精度が高まります。 また、あいまいで GitHub Copilot を混乱させる可能性があるコード スニペットをコピーして貼り付けないようにすることもできます。
注
同じプロンプトを実行するたびに異なる結果が得られる場合があります。また、存在しないメソッドなど、誤りが発生することがあります。 ブラウザー コンソールでエラーがないか確認し、必要に応じてコードを調整してください。
ヒント 2: 詳細な手順を提供する
GitHub Copilot を使用するための 2 番目のヒントは、詳細な手順を提供することです。 製品の機能仕様を作成している製品マネージャーであるとします。 たとえば、住所 '1 Microsoft Way, Redmond, WA' をジオコーディングし、マップ上にマーカーを追加する場合は、次のようなプロンプトを記述できます。
Azure Maps Web SDK v3 を使用して HTML プログラムを作成し、'1 Microsoft Way, Redmond, WA' の座標のジオコーディング要求を行い、その場所にマーカーを配置します。ステップ 1. ジオコード API エンドポイントを利用する: https://atlas.microsoft.com/geocode?api-version=2023-06-01&subscription-key=${subscriptionKey}>query=${query}。 応答の例が参照用に提供されています。
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"address":{"countryRegion":{"name":"United States"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}],"formattedAddress":"15127 NE 24th St, St, Redmond、 WA 98052","locality":"Redmond","postalCode":"98052","addressLine":"15127 NE 24th St"},"type":"Address","confidence":"High","matchCodes":["Good"],"geocodePoints":[{"geometry":{"type":"Point","coordinates":[-122.138681,47.630358]},"calculationMethod":"Rooftop","usageTypes":["Display"]},{"geometry":{"type":"Point","coordinates":[-122.1386787,47.6302179]},"calculationMethod":"Rooftop","usageTypes":["Route"]}]},"geometry":{"type":"Point","coordinates":[-122.138681,47.630358]},"bbox":[-122.14632282407,1 47.626495282429325,-122.13103917593001,47.63422071757068]}]}
手順 2. '1 Microsoft Way, Redmond, WA' の座標に対してジオコード API 要求を行います。
手順 3. Azure Maps WebSDK を使用してマップを表示し、ジオコード API 応答から取得した座標を中心にマップを表示します。
手順 4. マップ リソースの準備ができるまで待ちます。
ステップ 5. API 応答から取得した座標にマーカーをマップ上に配置します。
GitHub Copilot では、 Azure Maps Geocode API と Azure MapsWeb SDK を使用して、手順に一致するコード スニペットが生成されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Maps Geocode and Pushpin Example</title>
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var subscriptionKey = 'YOUR_SUBSCRIPTION_KEY'; // Replace with your Azure Maps subscription key
var query = '1 Microsoft Way, Redmond';
// Make Geocode API request
fetch(`https://atlas.microsoft.com/geocode?api-version=2023-06-01&subscription-key=${subscriptionKey}&query=${query}`)
.then(response => response.json())
.then(data => {
// Extract coordinates from the API response
var coordinates = data.features[0].geometry.coordinates;
// Initialize map
var map = new atlas.Map('map', {
center: coordinates,
zoom: 14,
view: 'Auto',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: subscriptionKey
}
});
// Wait until map resources are ready
map.events.add('ready', function () {
// Add pushpin to the map
var pushpin = new atlas.HtmlMarker({
position: coordinates,
htmlContent: '<div style="background-color: #286090; color: #fff; padding: 5px;">1 Microsoft Way</div>'
});
map.markers.add(pushpin);
});
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>
複雑なプロンプトを個々の手順に分割すると、GitHub Copilot が理解して従うのが簡単になり、コード フローをより適切に制御できるようになります。
注
効果的なプロンプトを作成するには、さまざまなシナリオに合わせてカスタマイズする必要があります。 プロンプトを繰り返し調整することで、可能な限り最良の結果を得ることができます。
ヒント 3: API 要求の入力と応答の出力の例を含める
GitHub Copilot を使用するための 3 番目のヒントは、API の入力と出力の例を含める方法です。 例を提供することで、データの処理方法を学習できるようにすることで、正確で関連性の高いコード スニペットを生成する Copilot の能力を向上させることができます。
Azure Maps API の入力と出力の例については、 Azure Maps REST API のドキュメントを参照してください。 たとえば、Azure Maps ジオコーディング Batch API と Azure Maps Directions API の要求本文と応答のサンプルを確認できます。 Azure Maps を使用して 2 つの場所間でルーティングするアプリケーションを作成する場合は、次のようなプロンプトを作成できます。
Azure Maps Web SDK v3 を使用して HTML プログラムを実装し、ユーザーが指定した場所のルート案内を表示します。ステップ 1. ユーザーが開始および終了の番地を入力するための 2 つの入力ボックスを作成します。 送信ボタンを追加して、次の手順に進みます。
手順 2. Batch POST のジオコーディング API を利用する: https://atlas.microsoft.com/geocode:batch?api-version=2023-06-01&subscription-key=${subscriptionKey} を使用して、始点と終点の座標を検索します。
要求本文の例
{ "batchItems": [ { "addressLine": "1 Microsoft Way, Redmond, WA" }, { "addressLine": "400 Broad St, Seattle, WA" } ] }
応答の例:
{"batchItems":[{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.128265,47.1 },"bbox":[-122.13590814413995,47.63552228242932,-122.12062185 586005,47.643247717570674],"properties":{"type":"Address","confidence":"Medium","matchCodes":["Good"],"geocodePoints":[{"calculationMethod":"Rooftop","usageTypes":["Display"],"geometry":{"type":"Point","coordinates":[-122.128265,47.639385]}},{"calculationMethod":"Rooftop","usageTypes":["Route"],"geometry":{"type":"Point","coordinates":[-122.1271239,47.63855 19]}}],"address":{"addressLine":"1 Microsoft Way","postalCode":"98052","locality":"Redmond","formattedAddress":"1 Microsoft Way, Redmond, WA 98052","countryRegion":{"name":"United States","ISO":"US"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}}},{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.349309,47.620498]},"bbox":[-122.3569493829292329,47.47.1 61663528242932,-122.34166861707672,47.624360717570674],"properties":{"type":"Address", "confidence":"High","matchCodes":["Good"],"geocodePoints":[{"calculationMethod":"Rooftop","usageTypes":["Display"],"geometry":{"type":"Point","coordinates":[-1] 122.349309,47.620498]}}},{"calculationMethod":"Rooftop","usageTypes":["Route"],"geometry":{"type":"Point","coordinates":[-122.3485587,47.6200534]}}],"address":{"addressLine":"400 Broad St","postalCode":"98109","neighborhood":"Queen Anne","locality":"Seattle","formattedAddress":"400 Broad St, Seattle, WA 98109","countryRegion":{"name":"United States","ISO":"US"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}]}]],"summary":{"successfulRequests":2,"totalRequests":2}}
手順 3. Azure Maps WebSDK を使用してマップを表示します。
手順 4. マップ リソースの準備ができるまで待ちます。
ステップ 5. DataSource を作成してマップに追加します。
ステップ 6. SymbolLayer を作成してマップに追加します。
手順 7. LineLayer を作成してマップに追加します。
手順 8. Route POST API を利用する: https://atlas.microsoft.com/route/directions?api-version=2025-01-01&subscription-key=${subscriptionKey} を使用して、始点と終点の間のルートを検索します。 DataSource に GeoJSON 応答を追加し、応答の境界ボックスに基づいてマップのカメラを調整します。
要求本文の例
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "coordinates": [ -122.1271239, 47.6385519 ], "type": "Point" }, "properties": { "pointIndex": 0, "pointType": "waypoint" } }, { "type": "Feature", "geometry": { "coordinates": [ -122.3485587, 47.6200534 ], "type": "Point" }, "properties": { "pointIndex": 1, "pointType": "waypoint" } } ], "routeOutputOptions": [ "routePath" ],
"travelMode": "driving" }
応答の例:
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.127124,47.47.638552]},"properties":{"routePathPoint":{"legIndex":0,"pointIndex":0},"order":{"inputIndex":0},"type":"Waypoint"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.348533,47.620073]},"properties":{"routePathPoint":{"legIndex":0,"pointIndex":113},"order":{"inputIndex":1},"type":"Waypoint"}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[-122.127123,47.638551],[-122.127236,47.638786],[-122.127778,47.639321],[-122.127588,47.639453],[-122.126935,47.639906],[-122.128569,47.64092],[-122.128269,47.641159],[-122.128004,47.641435],[-122.128064,47.641947],[-122.127464,47.642446],[-122.127433,47.642452],[-122.127358,47.642589],[-122.127333,47.642706],[-122.127044,47.643317],[-122.127,47.646063],[-122.12707,47.646064],[-122.1355,47.646072],[-122.135465,47.645943],[-122.134932,47.644569],[-122.134655,47.643384],[-122.134688,47.64219],[-122.134994,47.640816],[-122.135396,47.640114],[-122.135694,47.639576],[-122.136586,47.638589],[-122.138502,47.637193],[-122.14906,47.631126],[-122.150578,47.630481],[-122.152672,47.629904],[-122.15453,47.629628],[-122.156691,47.629525],[-122.163925,47.630213],[-122.168574,47.629931],[-122.170237,47.629981],[-122.171667,47.630214],[-122.179348,47.631954],[-122.181849,47.632144],[-122.185924,47.632041],[-122.186778,47.632117],[-122.187833,47.632345],[-122.188876,47.632739],[-122.190017,47.633476],[-122.190692,47.634194],[-122.191623,47.635672],[-122.192652,47.636933],[-122.195835,47.639784],[-122.197456,47.640891],[-122.199124,47.641725],[-122.20114,47.642394],[-122.202483,47.642648],[-122.206548,47.643149],[-122.208346,47.643164],[-122.210355,47.642861],[-122.218068,47.640503],[-122.219353,47.64005],[-122.220547,47.639476],[-122.223398,47.637523],[-122.224491,47.636915],[-122.22566,47.636477],[-122.226843,47.636165],[-122.228471,47.635972],[-122.229575,47.636001],[-122.231286,47.636192],[-122.238445,47.637468],[-122.241606,47.638218],[-122.243095,47.638484],[-122.269838,47.642514],[-122.275227,47.643424],[-122.279804,47.644349],[-122.282342,47.644655],[-122.289531,47.645049],[-122.29387,47.645413],[-122.296978,47.645393],[-122.300182,47.645129],[-122.304222,47.64444],[-122.308205,47.64353],[-122.30968,47.64328],[-122.31467,47.643113],[-122.318608,47.64274],[-122.318874,47.642714],[-122.321852,47.642389],[-122.322434,47.642195],[-122.322857,47.641863],[-122.323024,47.641566],[-122.323072,47.641284],[-122.323134,47.638686],[-122.323246,47.637911],[-122.323243,47.637778],[-122.323332,47.636353],[-122.323548,47.635195],[-122.323781,47.634413],[-122.324407,47.632851],[-122.324663,47.632356],[-122.3252,47.631657],[-122.326806,47.630159],[-122.327268,47.629875],[-122.327954,47.629266],[-122.328755,47.628281],[-122.328928,47.627756],[-122.328967,47.626499],[-122.329233,47.626199],[-122.330614,47.625588],[-122.332592,47.625034],[-122.334379,47.624774],[-122.334564,47.624765],[-122.336411,47.624697],[-122.340045,47.624729],[-122.342033,47.624546],[-122.343379,47.624517],[-122.347561,47.624571],[-122.347564,47.624483],[-122.347606,47.62079],[-122.347687,47.620726],[-122.3485 [33,47.620073]],"bbox":[-122.348533,47.620073,-122.126935,47.646072]},"properties":{"resourceId":"v70,h-1356265451,i0,a0,cen-US,dAAAAAAAAAAA1,y0,s1,m1,t0,wO6aTEbzRR0CPQkjMIohewA2
v12,k1,qatt:1","trafficCongestion":"None","trafficDataUsed":"None","distanceInMeters":21606,"durationInSeconds":1455,"departureTime":"2024-03-04T03:05:01+00:00","arrivalTime":"2024-03-04T03:29:16+00:00","type":"RoutePath ","legs":[{"distanceInMeters":21606,"durationInSeconds":1455,"departureTime":"2024-03-04T 03:05:01+00:00","arrivalTime":"2024-03-04T03:29:16+00:00","routePathRange":{"legIndex":0,"range":[0,113]},"description":"WA-520 W"}}}]}v12,wBmPp6F3PR0AfTybJTpZewA2
GitHub Copilot では、次のコード スニペットを作成して、ユーザーが開始アドレスと終了アドレスを入力し、サンプルの入力と出力に基づいて Azure Maps API を使用してマップ上にルートを表示するためのインターフェイスを提供できます。
<!DOCTYPE html>
<html>
<head>
<title>Azure Maps Route Directions</title>
<meta charset="utf-8" />
<link
href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css"
rel="stylesheet"
/>
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<style>
html,
body,
#myMap {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#inputPanel {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="inputPanel">
<input id="startInput" placeholder="Enter starting address" />
<input id="endInput" placeholder="Enter ending address" />
<button id="submitBtn">Get Directions</button>
</div>
<div id="myMap"></div>
<script>
var subscriptionKey = "YOUR_SUBSCRIPTION_KEY";
var map, dataSource;
function getCoordinates() {
var startAddress = document.getElementById("startInput").value;
var endAddress = document.getElementById("endInput").value;
fetch(
`https://atlas.microsoft.com/geocode:batch?api-version=2023-06-01&subscription-key=${subscriptionKey}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
batchItems: [
{
addressLine: startAddress,
},
{
addressLine: endAddress,
},
],
}),
}
)
.then((response) => response.json())
.then((data) => {
var startCoordinates =
data.batchItems[0].features[0].geometry.coordinates;
var endCoordinates =
data.batchItems[1].features[0].geometry.coordinates;
getRoute(startCoordinates, endCoordinates);
});
}
function getRoute(startCoordinates, endCoordinates) {
fetch(
`https://atlas.microsoft.com/route/directions?api-version=2025-01-01&subscription-key=${subscriptionKey}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
coordinates: startCoordinates,
type: "Point",
},
properties: {
pointIndex: 0,
pointType: "waypoint",
},
},
{
type: "Feature",
geometry: {
coordinates: endCoordinates,
type: "Point",
},
properties: {
pointIndex: 1,
pointType: "waypoint",
},
},
],
routeOutputOptions: ["routePath"],
travelMode: "driving",
}),
}
)
.then((response) => response.json())
.then((data) => {
dataSource.clear();
dataSource.add(data);
map.setCamera({
bounds: atlas.data.BoundingBox.fromData(data),
padding: 50,
});
});
}
map = new atlas.Map("myMap", {
authOptions: {
authType: "subscriptionKey",
subscriptionKey: subscriptionKey,
},
});
map.events.add("ready", function () {
dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
map.layers.add(new atlas.layer.LineLayer(dataSource));
map.layers.add(new atlas.layer.SymbolLayer(dataSource));
document
.getElementById("submitBtn")
.addEventListener("click", getCoordinates);
});
</script>
</body>
</html>
Azure Maps API 要求の入力と応答出力の例を提供すると、GitHub Copilot がより正確で関連性の高いコード スニペットを生成するのに役立ちます。 必要に応じて、JSON を縮小してトークン数を減らします。 独自の API サービスを呼び出すときにも同じ手法を適用できます。これにより、GitHub Copilot は API のしくみを理解できます。
既知の制限事項
生成されたコード スニペットでは、確認するエンジニアリング作業が必要であり、いくつかの制限事項があることに注意してください。
- CSS スタイルは、GitHub Copilot に明示的に追加するよう指示しない限り、通常は含まれません。
- Bing Maps Web SDK コードを Azure Maps Web SDK コードに変換するように Copilot に依頼すると、通常、それらの間に一対一のマッピングが存在するとは限らないため、結果が低くなります。
- 誤りが発生する場合があり、デバッグ スキルといくつかの試行錯誤が必要です。
結論
このハウツー ガイドでは、GitHub Copilot を使用してアプリケーションのコード スニペットを生成する方法を示します。 この機能は、Bing Maps for Enterprise から Azure Maps にアプリケーションを移行するときに役立ちます。
以下について説明しました。
- プロンプトを明確な文で記述します。
- 詳細な手順を説明します。
- Azure Maps API 要求の入力と応答出力の例を含めます。
次のステップ
プロンプトの調整に役立つその他の高度なプロンプト エンジニアリング手法について説明します。