galife

性能テスト

今回は「性能テスト」について「なんでやるの？」「どんなことやるの？」についてまとめます。

世間一般だと「負荷試験」とも呼ばれたりしていますが…まぁ、非機能の確認と思えば一緒のような気もします。

性能テストの必要性
性能テストの目的
性能テストの種類
- ロードテスト

ストレステスト

ロングランテスト

（おまけ）目標値

性能テストの必要性

なぜ性能テストを実施するのか

性能問題は往々にしてC/O後に問題が見つかります。通常行われる機能テストだけで検出できない問題のため、専用のテストを行っていないと性能問題がC/O後に発覚します。また、C/O後に性能問題が発生すると、以下のような問題が発生します。

サービス利用している事業者や利用者に対する影響
- 金銭的な損失、
- 機会損失
- 場合によっては人命に関わる問題
自社に対する影響
- サービス提供先への損害賠償
- 社会的な信用の失墜

加えて「発生した問題に対して原因究明が難しい」という問題もあります。

性能テストの目的

何のために性能テストを行うのか

前述の必要性から考えると「想定されるリスクに対して開発したシステムが対応できていることを確認する」と言えるでしょう。ただ…これは「（可用性、効率性、拡張性に関する）非機能要件が満たされていることを確認する」とも言えます。

想定されるリスクや性能テストに対する要件には以下のようなものが考えられます。

業務視点

C/O直後の大量登録処理が問題なく行えるか
順調に稼働したあと想定している利用者数の主要操作が問題なくさばけるか
（＝数年後を想定したデータを入れた状態でピーク時、通常時どちらも問題なく動作するか）
キャンペーンなど突発的なアクセス集中に耐えられるか
24H365Dの無停止運用できるのか
想定ユーザー数をさばける構成でできるだけ安くしたい
（＝目標値を満たせる最小構成を明らかにしたい）

システム視点

バッチなど他システムによるDB操作とのバッティングが起こらないか
システム再起動直後でキャッシュが揮発していても大丈夫か
性能限界はどのあたりにありそうか
性能限界を超えたようなときでも問題は起こらないか
スケールアウトできるか
スケールアウト/スケールアップするべき箇所はどこか

性能テストの種類

性能テストの種類は名前だけだと大きく３種類に分けられそうです。ただ…実態は「何のために」に依存するので、このテスト種類はあくまで参考程度な気がします。

ロードテスト
ストレステスト
ロングランテスト

システムに対して想定されるシナリオをベースに負荷がけして応答性能を確認するテスト。

シナリオは各種ユースケースを想定して作成します。確認するのは「スループット」を増やしていったときの「レイテンシ」です。「スループット」と「レイテンシ」が目標範囲内であるかどうかを確認します。目標に納まっていなければ原因究明して性能改善を行っていくのもロードテストの範囲です。

性能限界を超えたアクセスがあったときの挙動を確認するテスト。

「目標値」を超えただけだと限界に至っていないことがあります。ストレステストで確認したいのは「限界を超えたときの挙動」です。

システムに対して想定以上の負荷が加わったとき処理性能の劣化だけでなくデータ不整合などが起きないかを確認します。想定外の事態が発生したとしてもデータだけは安全であることの確認をします。

24H365Dを求められるようなケースでは、長時間稼働させたときの挙動確認も行います。

長時間稼働させた際、ガベージコレクションが適切に動作しているか、そのときシステムが長時間停止しないか、ガベージコレクションが動作した後はメモリがリークせず十分解放されているか…などを確認します。

（おまけ）目標値

ある程度サービスが稼働した数年後をイメージして以下を確認します。

想定ユーザー数（累積）
ユーザービリティの観点から求められる応答時間
1日の利用者数（○人/日）
1人あたり1日の平均アクセス数（○回/人日）
1日の平均アクセス数に対する最大ピーク時倍率

上述の値を確認することで、目標とする「スループット（rps）」と「レイテンシ（msec）」を求めます。また、前提となるデータ量についても算出します。

今回は「性能テスト」についてまとめました。参考になったでしょうか？本記事がお役に立っていると嬉しいです！！

ホームページに地図を表示する方法

今回は「Leaflet.js と Open Street Map を利用して地図を表示する方法」についてまとめます。

概要
実装
実行

概要

最近はホームページ上に地図を表示するサイトも増えています。今回は、そんな前例にならって自分も地図を表示したい！という方に向けた記事になります。

とはいえ、あらかじめ表示したい場所の緯度経度が分かっている前提になります。もし、任意の住所から緯度経度を調べたいのであれば「住所から緯度経度を求める方法」をまずは参照してみてください。

今回利用するのは「leaflet.js」と「Open Street Map」です。「leaflet.js」はオープンソースの地図操作を支援する JavaScript ライブラリです。「Open Street Map」はその名の通りオープンソースの地図データです。今回はこれらを組み合わせて地図表示を行ってみます。

実装

実装はポイントだけ記載すると分かりづらいので全体を載せてポイント解説します。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
  <style>
    #mapid { height: 500px; }
  </style>
</head>

<body>
  <div id="mapid"></div>

  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
  <script type="text/javascript">
var mymap = L.map('mapid',{
  center: [35.710063, 139.8107],
  zoom: 16
});

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
  attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>"
}).addTo(mymap);

L.marker([35.710063, 139.8107])
  .addTo(mymap)
  .bindPopup("スカイツリーはここ！")
  .openPopup();
  </script>
</body>

</html>

L.7 スタイルシートの追加

Leaflet.jsが提供するスタイルシートをhead内に追加します。

L.9 地図の高さを指定

地図の表示サイズはスタイルで指定します。

L.14 地図表示するdiv要素

実際に地図を描画するエリアです。この div要素に指定する id は後続のスクリプトでも利用します。

L.16 Leaflet.jsの本体スクリプトを追加

Leaflet.jsが提供するJavaScriptライブラリを追加します。独自に実装する初期化処理やマーカー追加処理より手前で読み込まれるように入れ込みます。

L.18-21 地図の初期化

何かのランドマークを地図中央に表示したいのであれば、サンプル実装のように center で指定する方法が簡易です。 zoom は数字が大きいほどズームインしている状態（詳細表示）、数字が小さいとズームアウトしている状態（広域表示）になります。

L.23-25 地図のスタイルを指定

マップデータを指定します。今回は Open Street Map を利用するので https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png を指定しています。地図データはコピーライトが付くことが多いので、必要に応じて attribute でルールに従ってコピーライトを付けておきます。

参考までに Open Street Map以外にも日本であれば国土地理院が提供している地図もあります。国土地理院のものが使いたい場合、以下のようなコードになります。

L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", {
  attribution: "&copy; <a href='https://maps.gsi.go.jp/development/ichiran.html'>国土地理院</a>"
}).addTo(mymap);

L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", {
  attribution: "&copy; <a href='https://maps.gsi.go.jp/development/ichiran.html'>国土地理院</a>"
}).addTo(mymap);

L.27-30 マーカーを追加

場所と文言を指定してマーカーを表示させます。

実行

前述の index.html をブラウザで開くと以下のような画面が表示されます。

地図は Google Map のようにドラッグ＆ドロップで移動したり、マウスホイールで拡大縮小したりできます。緯度経度を取得するのが面倒ではありますが…そこまでできていれば意外と簡単に地図表示できました。

今回は「Leaflet.js と Open Street Map を使って地図を表示する方法」についてまとめました。参考になったでしょうか？本記事がお役に立っていると嬉しいです！！

住所から緯度経度を求める方法

今回は「住所から緯度経度を求める方法」についてまとめます。

概要
GCP Geocoding API の準備
住所から経度緯度を取得
- Geocoding API を直接実行して取得
- Node.js ライブラリを利用して取得

概要

Goocle Cloud Platform (GCP) の Geocoding API を利用すると「住所から緯度経度を求める」ことができます。お金が 1000リクエストにつき 5$ （2020年2月時点）かかるようですが…。

今回は GCP の Geocoding API を利用して任意の住所から緯度経度を求める方法を準備から実装までまとめます。

GCP Geocoding API の準備

今回用に新しいプロジェクトを作成します。既存のものを使うのであればこの作業はスキップしてもOK。

「新しいプロジェクト」を選択
プロジェクト名を任意に設定して「作成」

左上にある「ナビゲーションメニュー」を選択
[APIとサービス]-[ライブラリ]を選択
検索窓に「geocoding」を入力
検索結果から「Geocoding API」を選択
「有効にする」を選択

ナビゲーションメニューから[APIとサービス]-[認証情報]を選択
上部にあるメニューから[認証情報を作成]-[APIキー]を選択
APIキーを確認して「閉じる」

以上で使える状態は作れたので、以降では実際に使っていきます。

住所から緯度経度を取得

直接 Geocoding API を実行する方法です。基本になる方法なのでおさえておくのが良い気がします。

リクエスト

リクエスト

GET: https://maps.googleapis.com/maps/api/geocode/<format>

パラメーター

パラメーター	必須	型	説明
パスパラメータ―
format	○	string	以下のどちらかを指定。 json xml
クエリパラメーター
address	○	string	検索したい住所を指定。
key	○	string	あらかじめ取得しておいた有効なAPIキーを指定。
language		string	戻り値の言語を指定。日本語の場合 ja を指定。その他の言語はサポート言語を参照。

レスポンス

{
  "results": [{
    "address_components": [{
      "long_name": string,
      "short_name": string,
      "types": [string ...]
    } ...],
    "formatted_address": string,
    "geometry": {
      "bounds": {
        "northeast": {
          "lat": number,
          "lng": number
        },
        "southwest": {
          "lat": number,
          "lng": number
        }
      },
      "location": {      // ★ 経度緯度はここに入る
        "lat": number,   // ★ 緯度(latitude)
        "lng": number    // ★ 経度(longitude)
      },
      "location_type": string,
      "viewport": {
        "northeast": {
          "lat": number,
          "lng": number
        },
        "southwest": {
          "lat": number,
          "lng": number
        }
      }
    },
    "place_id": string,
    "types": [string ...]
  }],
  "status": string
}

利用するモジュールは「@googlemaps/google-maps-services-js」です。このモジュールを使ったサンプルコードは以下のようになります。基本は「Geocoding API を直接実行」になりますので、リクエストパラメーターやレスポンスのオブジェクトは前述のリクエストレスポンスに類似します。

var Client = require("@googlemaps/google-maps-services-js").Client;
var client = new Client({});

client.geocode({
  params: {
    address: "<検索したい住所>",
    key: "YOUR-API-KEY"
  },
  timeout: 10000
}).then((res) => {
  if (res.data.results.length === 0) {
    console.log(res);
  }
  console.log(res.data.results[0].geometry.location);
}).catch((err) => {
  throw err;
});

連続アクセスすると取得できないことがあるので、エラー処理は入れておくのが無難です。また、連続処理させたい場合はいっきにリクエストを投げつけるのではなく、少し間隔をあけながらリクエストしたほうがうまく応答が返ってくるようでした。

今回は「住所から緯度経度を求める方法」についてまとめました。参考になったでしょうか？本記事がお役に立っていると嬉しいです！！

参考記事

Google Developers - Google Maps API : Geocoding API

galife

3月 2020年

性能テスト

性能テストの必要性

性能テストの目的

性能テストの種類

ロードテスト

ストレステスト

ロングランテスト

（おまけ）目標値

ホームページに地図を表示する方法

概要

実装

実行

住所から緯度経度を求める方法

概要

GCP Geocoding API の準備

プロジェクト作成

Geocoding API 有効化

APIキーの追加

住所から緯度経度を取得

Geocoding API を直接実行して取得

Node.js ライブラリを利用して取得

Labels

Archives

Pages

Contact