AWS https通信で位置情報を取得する

AWSに入ります。

__| __|_ )
_| ( / Amazon Linux AMI
___|\___|___|

https://aws.amazon.com/amazon-linux-ami/2018.03-release-notes/
21 package(s) needed for security, out of 31 available
Run “sudo yum update” to apply all updates.

cyberduckでも入ります。

index.phpをつくります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>位置情報取得サンプル</title>

  <script>
    // Geolocation APIに対応している
    if (navigator.geolocation) {
      alert("この端末では位置情報が取得できます");
    // Geolocation APIに対応していない
    } else {
      alert("この端末では位置情報が取得できません");
    }

    // 現在地取得処理
    function getPosition() {
      // 現在地を取得
      navigator.geolocation.getCurrentPosition(
        // 取得成功した場合
        function(position) {
            alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
        },
        // 取得失敗した場合
        function(error) {
          switch(error.code) {
            case 1: //PERMISSION_DENIED
              alert("位置情報の利用が許可されていません");
              break;
            case 2: //POSITION_UNAVAILABLE
              alert("現在位置が取得できませんでした");
              break;
            case 3: //TIMEOUT
              alert("タイムアウトになりました");
              break;
            default:
              alert("その他のエラー(エラーコード:"+error.code+")");
              break;
          }
        }
      );
    }
  </script>
</head>
<body>
  <h1>位置情報取得サンプル</h1>
  <button onclick="getPosition();">位置情報を取得する</button>
</body>
</html>


wow, 緯度経度が取れました。※渋谷にいます。
httpsならいけるんですね。
リダイレクトで取得するとすると、地域はやはりipアドレス + geo liteでしょうね。
問題は年齢、性別をどのように取得するか。
まずは、アドセンスの仕組み解析からでしょうか。
アドセンス、ASPのタグの中身を見ていきましょう。

AWS ELB(ロードバランサ)を設定していく

ロードバランサーの種類の選択で、3種類ありますね。
1. Application Load Balancer
2. Network Load Balancer
3. Classic Load Balancer

TCPとは? ->IPと同様にインターネットにおいて標準的に利用されている プロトコルです。TCPは、IPの上位プロトコルでトランスポート層で動作するプロトコル。

HTTPSを選択します。

きた~~~~~~~~~~~~~~~!!!!!!!!!!!!!!!!!!!
きゃ~ わ~い、わ~い。 これは嬉しいぞ。

azureも簡単だったが、AWSも簡単だ! これは凄い!
httpsが開通したので、早速javascriptの位置情報取得を試したいですね。

AWS Certificate Manager

コンソールにログインし、Certificate Managerへ行きます。

証明書のプロビジョニング を押下します。
>お客様のサイトの名前を指定し、ID を設定してください。残りの手順は ACM が行います。ACM は Amazon またはお客様のプライベート認証機関が発行する SSL/TLS 証明書の更新を管理します。

ACMは、SSL/TLS証明書を管理すると記載があります。ACMってなんかヨーロッパのサッカーチーム名のようですね。
すると、

証明書のリクエストページに遷移します。
>新しい証明書をリクエストするのではなく既存の証明書をインポートするには、[証明書のインポート] を選択します。
>パブリック証明書のリクエスト
> プライベート証明書のリクエスト

Amazonからリクエストするので、パブリック証明書のリクエストでいいのかな。

ドメイン名の入力画面になります。

Route53で設定したドメインを入力していくと、

あれ、検証保留中だ。
あ、発行済みになりました。大体2~3分です。

Route 53のhosted zoneで、ドメインに、CNAMEが追加されていればOKです。

AWSのELBとクライアント間でhttps通信

概念図はこちら

※AWSのアイコンにも少し慣れてきました。

以下のパターンで実装できるとのこと
1.AWSの証明書管理サービスであるACM(AWS Certificate Manager)発行のもの
2.シマンテックなどの外部CAで発行したもの

AWSコンソールにログインします。
セキュリティ、アイデンティティ、コンプライアンスに、Certificate Managerがありますね。
こいつか!?

流れとしては、
1. Route 53にサブドメイン作成
2. ACM証明書設定
2.1. ACMから証明書発行
3. EC2インスタンス作成
4. ELB作成
5. 動作確認

サブドメインですか?
一応、Elastic IPを設定して、EC2とRoute 53は既に作成済みです。

ELBとは?
Elastic Load Balancingですね。

jsで位置情報を取得する

<div id="result"></div>

<script>
if(navigator.geolocation)
{
	navigator.geolocation.getCurrentPosition(

		function(position){

			var data = position.coords;

		var lat = data.latitude;
		var lng = data.longitude;
		var alt = data.altitude;
		var accLatlng = data.accuracy;
		var accAlt = data.altitudeAccuracy;
		var heading = data.heading;
		var speed = data.speed;

		document.getElementById('result').innerHTML = '<dl><dt>緯度</dt><dd>' + lat + '</dd><dt>経度</dt><dd>' + lng + '</dd><dt>高度</dt><dd>' + alt + '</dd><dt>緯度、経度の精度</dt><dd>' + accLatlng + '</dd><dt>高度の精度</dt><dd>' + accAlt + '</dd><dt>方角</dt><dd>' + heading + '</dd><dt>速度</dt><dd>' + speed + '</dd></dl>' ;

		var latlng = new google.maps.LatLng(lat, lng);

		var map = new google.maps.Map(document.getElementById('map-canvas'), {
			zoom: 15,
			center: latlng,
		});
			new google.maps.Marker({
				map: map,
				position: latlng,
			});
		},
		
		function(error)
		{
			var errorInfo = [
				"原因不明のエラーが発生しました。",
				"位置情報の取得が許可されませんでした。",
				"電波状況などで位置情報が取得できませんでした。",
				"位置情報の取得に時間がかかりすぎてタイムアウトしました。"
			];

			var errorNo = error.code;

			var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ];

			alert(errorMessage);
			document.getElementById("result").innerHTML = errorMessage;

		},
		{
			"enableHighAccuracy": false,
			"timeout": 8000,
			"maximumAge": 2000,
		}

		);

}

else
{
	var errorMessage = "お使いの端末は、Geolocation APIに対応していません。";

	alert(errorMessage);

	document.getElementById('result').innerHTML = errorMessage;
}

</script>

なに!? vagrantだから?

facebook広告のセグメント

facebook広告のセグメントを見てみます。

基本設定
– 地域、年齢、性別、言語
1.地域・・・市区町村、指定した場所から半径〇km
いまその地域にいる人、その地域に住んでいる人、その地域にいた人
2.年齢・・・13歳~65際まで 1歳単位で設定可能
3.性別・・・男性、女性、両方(男性、女性すべて)
4.言語・・・国籍もセグメント可能

詳細ターゲット ~利用者層~
5.恋愛対象
6.交際ステータス
7.学歴
8.職歴
9.子どもの年齢
10.世代
11.ライフイベント

詳細ターゲット ~興味・関心~
スポーツ・アウトドア(アウトドア活動、スポーツ)、テクノロジー(コンピュータ、家電・エレクトロニクス)、ビジネス・業界(ビジネス、中小ビジネス、小売業、広告、オンライン、営業、マネージメント、マーケティング、起業、エンジニアリング、デザイン、経済、ファイナンス、不動産、建設、建築、医療、看護・介護、科学、航空、農業、銀行サービス、高等教育)、フィットネス・ウェルネス(エクササイズ、ジョギング、フィットネス、フィットネスクラブ、ダイエット、栄養、ヨガ、ズンバ、ウェイトトレーニング、ボディービルディング、瞑想)、レジャー施設(音楽、読書、映画、テレビ、ゲーム、ライブ・イベント)、家族と交際関係(友情、出会い関連、ウェディング、結婚、子育て、母親、父親、家族)、買い物・ファッション(衣料品、ファッションアクセサリー、ショッピング、美容、玩具)、趣味・アクティビティ(ペット、ホーム・ガーデニング、乗り物、旅行、政治・社会問題、時事)、食品・飲料品(飲料品、お酒、食品、料理、クッキング、レストラン)

コマンドラインからvue init

[vagrant@localhost vue]$ vue init webpack hpscript

? Project name hpscript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner noTest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) no

vue-cli · Generated “hpscript”.

# Project initialization finished!
# ========================

To get started:

cd hpscript
npm install (or if using yarn: yarn)
npm run lint — –fix (or for yarn: yarn run lint –fix)
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

中を見てみます。
ほう、jsファイルですね。

to get startedで、
cd hpscript
npm install (or if using yarn: yarn)
npm run lint — –fix (or for yarn: yarn run lint –fix)
npm run dev

ん!? サーバー立ち上がった?

はあ!? 表示されないんだが。
どういうことだ。