Jenkinsビルド結果メールの設定について(特にSMTPサーバ)

Jenkinsでビルド結果を通知するためにメールの設定をするのだが、
SMTPサーバの設定について少し悩んだ。

初めてJenkinsをインストールした時は社内だったので社内のSMTPサーバを
設定すればよかったのだが、個人でJenkinsをインストールしようとした時に
SMTPサーバを持っているわけがないのでどうしようかと考えた。

調べてみるとGmailのSMTPサーバが使えることが判明した。

メール通知の設定値

Jenkinsで「Jenkinsの管理」→「システムの設定」→「E-mail 通知」を開く

項目	設定値
SMTPサーバー	smtp.gmail.com
E-mailのサフィックス	特に入力なし
SMTP認証	チェックを入れる
ユーザ名	Gmailのアカウント(xxx@gmail.com)
パスワード	Gmailのパスワード
SSL	チェックを入れる
SMTPポート	465
返信先アドレス	特に入力なし
文字セット	UTF-8

設定後に「メールを送信して設定を確認」にチェックを入れて、
メール送信のテストをする。
指定したアドレスにメールが届いていれば設定完了。

エラーが出る場合はGmailのセキュリティ設定を変更すること。
GmailでGmail以外のアドレスでGmailのSMTPが使えなくなってた件(実は使えた件)

今回、AWSのEC2にJenkinsをインストールしていたのでSMTPサーバも
自前でEC2で立てようかと思ったがGmailのSMTPサーバが使えたので楽できた。

でも知識習得のために自前でSMTPサーバも立ててみたいなと思ったり……。

参考サイト

GmailでGmail以外のアドレスでGmailのSMTPが使えなくなってた件(実は使えた件)
Jenkinsでビルド失敗時にGmailで通知する - 飲んだり寝たり
EC2インスタンスからメール送信のための準備 | cloudpack.media
kakakikikekeのブログ: Jenkinsでビルドが失敗したらGmailに通知する方法

JJUG CCC 2017 Springに参加してきた

5月17日にJJUG CCC 2017 Springに参加してきました。
(大分前だけど...)

ようやく書く気が起きたので、参加してきたセッションについて
まとめてみる。

全部 Java で作っちゃえ!! Vaadin 8 による "オール Java" Web アプリ開発のしくみと実践

スライド
全部 Java で作っちゃえ!😁 Vaadin 8 によるオール Java Web アプリ開発の仕組みと実践

AWTみたいなコード
https://demo.vaadin.com/sampler/
https://demo.vaadin.com/valo-theme/#!common

v7からv8への変更点
・データバインディング系のAPI

SpirngBootとの連携が進んでいる

Eclipseが一番成熟している
ビルドシステムは基本Maven

Vaadinを採用するモチベーション
・フロントとバックで型を共通化したい
・JSやHTML5の知識がある人材がチームにいなくても
　WebUIを作成したい
・俺はJava(JVM言語)が書きたい人

Javaエンジニアに知って欲しいRDBアンチパターン

スライド→
RDB anti-pattern that Java engineer wants to know // Speaker Deck

DBの変更は難しいので設計をきちんとする必要がある
・削除フラグで設計書を確認しないとわからない値が入っているなど
・カラムの追加　memo,memo2,memo3 とか
・データにロジックを埋め込むのはNG 先頭1桁がユーザの種類を表す会員IDなど

RDBの機能に頼りすぎるとそれが制約となる(ストアドなど)
→DBとアプリの設計のバランスが重要

Javaの話ではなくRDBの話ではあったが、
どのシステムでもDBは使用するため為になる内容だった。
DBAよりの話のためアプリ側の人は特に見た方が良いスライドだと思う。

Introduction of Project Jigsaw

スライド→
Introduction of Project Jigsaw

JSR376→Project Jigsawに関する草案
JSR379→SE9に関する草案

SE9(JSR379)は通過したがJigsaw(JSR376)が厳しい
ちなみにJSR379の中にJigsawの記述があるみたい

jar地獄
→依存関係の解消が面倒(バージョン違いで動かないことも)
Java言語として依存関係の表現ができない
→mavenでは表現できるよね

上記を解決するためmoduleが登場した

module-info.java
→これがあればモジュールとする
依存性と公開範囲を記載する
階層のトップレベルに配置する
requiresで指定する（モジュール依存関係）
exportsは公開範囲

java —list-modules
→モジュール一覧

Jigsawの草案が否決されているから
SE9のリリースはまだ先になりそうだな...

新卒2年目から始めるOSSのススメ 〜明日からできるコミットデビュー〜

スライド→
新卒2年目から始めるOSSのススメ~明日からできるコミットデビュー~

コミットしたOSS→ERFlute
ER図を作成するツール

OSSの勧め
簡単な修正から始めよう
nullぽとか文字化けをなど簡単なところから始めよう

業務知識が関係ないのが良い
→ソースコードが全て

特殊な環境だったためコミットできた
→メインコミッターが会社の人
→導入が事前に決定しているプラグインだった
→明確に不具合がわかっていた

このセッションを聞いて、OSSに対する
ハードルが低くなった気がした。
コミットまではいかなくてもまずはソースコードを
読むところから始めてみようと思った。

AWS Amazon Rekognitionを使ってみた

Amazon RekognitionはAWSが提供しているサービスの1つで
深層学習に基づく画像分析を行ってくれるサービス。

このサービスを用いることで元の画像と比較対象の画像を
照らし合わせて同一人物がいるか探すことも可能である。

今回は複数の画像を用いた顔比較(同一人物かどうかを判定)を
試してみた。

大まかな流れは以下の感じ

①S3のバケットに事前に画像を格納する
②S3のバケットから画像を取得し、Collectionに格納する
③S3のバケットから1枚、比較対象の画像を取得して比較する
④顔比較の結果と画像を表示する

まず①の準備。
S3のバケットに適当な画像を格納しておく。

次は②
「rekognition.createCollection」でCollectionを作成する。
パラメータとして、「CollectionId(コレクションを識別するID)」が必要
Class: AWS.Rekognition — AWS SDK for JavaScript

「rekognition.indexFaces」でCollectionに画像を追加する。
Class: AWS.Rekognition — AWS SDK for JavaScript

普通に「rekognition.indexFaces」をループさせて画像を追加しようとしたが、非同期処理のため
Collectionに全ての画像が追加される前に次の処理に行ってしまう問題があったため
JavaScriptの「yield」を用いて処理を制御した。（コールバック地獄回避のため）
yield - JavaScript リダイレクト 1 | MDN

/********************************************/
//Rekognitionテスト処理
/********************************************/
var addFunction;

function rekognitionTest() {

    //Collection作成
    var paramsCreate = {
        CollectionId: "photos"
    };

    rekognition.createCollection(paramsCreate, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            addFunction = addImage();
            addFunction.next();
        }
    });

}

/********************************/
//Collectionに画像を追加する処理
/********************************/
function* addImage() {

    for (var cnt = 2; cnt <= 6; cnt++) {
        var paramsAdd = {
            CollectionId: "photos",
            Image: {
                S3Object: {
                    Bucket: "storage-keya-us",
                    Name: 'yone_san_' + cnt + '.jpg'
                }
            },
            ExternalImageId: 'yone_san_' + cnt + '.jpg'
        };

        rekognition.indexFaces(paramsAdd, function (err, data) {
            if (err) {
                console.log(err, err.stack);
            } else {
                console.log(data);
                addFunction.next();
            }
        });

        yield;
    }

    searchImg();
}

次は③
「rekognition.searchFacesByImage」で顔検索を行う。
Class: AWS.Rekognition — AWS SDK for JavaScript
「MaxFaces」は確か、似ている画像上位10枚までを表示するみたいな設定だったと思う。

/********************************/
//画像認識(元画像と似ている画像を探す)
/********************************/
var searchImg = function () {
    var params = {
        CollectionId: 'photos',

        Image: {
            S3Object: {
                Bucket: 'storage-keya-us',
                Name: 'yone_san_1.jpg'
            }
        },
        FaceMatchThreshold: 0.0,
        MaxFaces: 10
    };
    rekognition.searchFacesByImage(params, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
            showImgs(data);
            deleteCollectiom();

        }
    });
}

最後は④
ここはS3から画像のURL取得と
画像の似ている度合いを表示する処理

/********************************/
//画像表示処理(画像認識結果)
/********************************/
function showImgs(data) {
    var s3 = new AWS.S3({
        params: {
            Bucket: 'storage-keya-us',
            Region: s3RegionName
        }
    });
    var htmlImg ="";
    for (var i = 0; i < data.FaceMatches.length;i++) {
        //URL取得
        var paramsSource = {
            Bucket: 'storage-keya-us',
            Key: data.FaceMatches[i].Face.ExternalImageId
        };

        var sourceUrl = s3.getSignedUrl('getObject', paramsSource);

        htmlImg += "<img src='" + sourceUrl + "'/><br/>" + "<span>" + "Similarity:" + data.FaceMatches[i].Similarity + "%" + "</span><br/>";
    }

    $("#imgList2").html(htmlImg);
    
    $('img').css('width','150px');
}

全体のソースコードはこんな感じ

$("#rekognitionButton").on("click", rekognitionTest);

var s3BucketName = 'translator-app-bucket';
var s3RegionName = 'us-east-1';

AWS.config.update({
    accessKeyId: 'your_accessKeyId',
    secretAccessKey: 'your_secretAccessKey'
});

var rekognition = new AWS.Rekognition({
    region: 'us-east-1'
});

/********************************************/
//Rekognitionテスト処理
/********************************************/
var addFunction;

function rekognitionTest() {

    //Collection作成
    var paramsCreate = {
        CollectionId: "photos"
    };

    rekognition.createCollection(paramsCreate, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            addFunction = addImage();
            addFunction.next();
        }
    });

}

/********************************/
//Collectionに画像を追加する処理
/********************************/
function* addImage() {

    for (var cnt = 2; cnt <= 6; cnt++) {
        var paramsAdd = {
            CollectionId: "photos",
            Image: {
                S3Object: {
                    Bucket: "storage-keya-us",
                    Name: 'yone_san_' + cnt + '.jpg'
                }
            },
            ExternalImageId: 'yone_san_' + cnt + '.jpg'
        };

        rekognition.indexFaces(paramsAdd, function (err, data) {
            if (err) {
                console.log(err, err.stack);
            } else {
                console.log(data);
                addFunction.next();
            }
        });

        yield;
    }

    searchImg();
}

/********************************/
//Collection削除処理
/********************************/
var deleteCollectiom = function () {
    var paramsDelete = {
        CollectionId: "photos"
    };
    rekognition.deleteCollection(paramsDelete, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
        }
    });
}

/********************************/
//画像認識(元画像と似ている画像を探す)
/********************************/
var searchImg = function () {
    var params = {
        CollectionId: 'photos',

        Image: {
            S3Object: {
                Bucket: 'storage-keya-us',
                Name: 'yone_san_1.jpg'
            }
        },
        FaceMatchThreshold: 0.0,
        MaxFaces: 10
    };
    rekognition.searchFacesByImage(params, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
            showImgs(data);
            deleteCollectiom();

        }
    });
}

/********************************/
//画像表示処理(画像認識結果)
/********************************/
function showImgs(data) {
    var s3 = new AWS.S3({
        params: {
            Bucket: 'storage-keya-us',
            Region: s3RegionName
        }
    });
    var htmlImg ="";
    for (var i = 0; i < data.FaceMatches.length;i++) {
        //URL取得
        var paramsSource = {
            Bucket: 'storage-keya-us',
            Key: data.FaceMatches[i].Face.ExternalImageId
        };

        var sourceUrl = s3.getSignedUrl('getObject', paramsSource);

        htmlImg += "<img src='" + sourceUrl + "'/><br/>" + "<span>" + "Similarity:" + data.FaceMatches[i].Similarity + "%" + "</span><br/>";
    }

    $("#imgList2").html(htmlImg);
    
    $('img').css('width','150px');
}

htmlファイルはこんな感じ

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

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!-- jQueryCDN -->
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>

    <!-- AWS SDK for JavaScript -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.7.27.min.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>

</head>

<body>

    <h3>Rekognitionテスト</h3>
    <img src="https://s3.amazonaws.com/storage-keya-us/yone_san_1.jpg" style="width:150px"/>
    <br>
    <input type="button" value="searchFaces" id="rekognitionButton">

    <div id="imgList2"></div>

    <script type="text/javascript" src="./js/main.js"></script>

</body>

</html>

表示画面はこんな感じ

ボタンを押下すると画像と似ている度合いを表示してくれる

※一応同一人物だけどSimilarity(信頼度)にもの凄い差がある……。
　ちなみに二人セゾン時のアー写もS3に格納したはずが、
　似てなさ過ぎて表示されないらしい。
　まぁ成長したと捉えればいいのか。

今回はブラウザのJavaScriptで実装してみたけど、意外と簡単に
実装することができた。
これぐらい簡単なら画像認識系の機能は自分で実装せず、
クラウドサービスに任せるのもアリかもしれない。

他の値とかを取得したければ、自分で画像認識の機能を
実装するしかないんだけどね……。

■参考サイト
Class: AWS.Rekognition — AWS SDK for JavaScript
yield - JavaScript リダイレクト 1 | MDN
米谷奈々未 - エケペディア
→画像を拝借

AWSIoT httpを用いてのpublish(メモ)

console.log('start');

$("#button").on("click", test);

var iotdata = new AWS.IotData({
    endpoint: 'endpoint',
    accessKeyId: 'accessKeyId',
    secretAccessKey: 'secretAccessKey',
    region: 'region'
});

function test() {

    console.log('click');

    var params = {
        topic: 'testTopic',
        payload: JSON.stringify({
            message: "hello"
        }),
        qos: 1
    };


    //メッセージをpublishする
    iotdata.publish(params, function (err, data) {
        if (err) {
            console.log(err, err.stack);
        } else {
            console.log(data);
        }
    });

}

APIGatewayからAWSLambdaを叩く(POST送信)

『サーバーレスアーキテクチャ』という言葉にひかれて、
APIGatewayからAWSLambdaを叩いてみた。
そして、色々詰まったのでメモとして残しておく。

まずはAPIGatewayの設定。

メソッドリクエストの設定。

リクエスト本文のコンテンツタイプに
application/x-www-form-urlencoded を設定する。
これを設定することFormの値をPOSTメソッドでも送信することができる。

統合リクエストの設定。

本文マッピングテンプレートのコンテンツタイプは
メソッドリクエストと合わせる。
また、ここでリクエストボディに詰められた
Formの値を取り出すためにマッピングテンプレートを設定する。

マッピングテンプレートはVTLで記述する。
Velocityの文法 - Javaについて

{
    "headers" : {
        #foreach( $key in $input.params().header.keySet() )
            "$key" : "$input.params().header.get($key)"#if( $foreach.hasNext ),#end
        #end
    },
    "queryParameters" : {
        #set( $tmpstr = $input.body )
        #foreach( $keyandvaluestr in $tmpstr.split( '&' ) )
        #set( $keyandvaluearray = $keyandvaluestr.split( '=' ) )
            "$keyandvaluearray[0]" : "$keyandvaluearray[1]"#if( $foreach.hasNext ),#end
        #end
    },
    "stage" : "$context.stage",
    "sourceIp" : "$context.identity.sourceIp",
    "userAgent" : "$context.identity.userAgent"
}

特にこの部分でFormで送信したkeyとvalueを取り出している。

    "queryParameters" : {
        #set( $tmpstr = $input.body )
        #foreach( $keyandvaluestr in $tmpstr.split( '&' ) )
        #set( $keyandvaluearray = $keyandvaluestr.split( '=' ) )
            "$keyandvaluearray[0]" : "$keyandvaluearray[1]"#if( $foreach.hasNext ),#end
        #end

統合レスポンスの設定。
今回はFormで2つの値を送信し、足し算を行った結果を
htmlで表示するためコンテンツタイプを
text/htmlに設定する。

本文テンプレートは以下のように、計算結果を表示するように記述。

<html>
    <head>
        <title>title</title>    
    </head>
    <body>
        <span>$input.path('ans')</span>
    </body>
    
</html>

メソッドレスポンスでは、
統合レスポンスと同様にtext/htmlを設定する。

次はLambdaの作成。
今回はNode.jsで作成。

exports.handler = (event, context, callback) => {
    
    //値を取得する
    var num1 = parseInt(event.queryParameters.param1);
    var num2 = parseInt(event.queryParameters.param2);
    var answer = num1 + num2;
    
    //レスポンス
    context.done(null, {"ans": answer});
    
};

最後はFormを送信するhtmlを作成。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>LambdaTest</title>

</head>
<body>
    
    <form action="create api url" method="post">
        
        値1:<input type="text" name="param1"><br>
        値2:<input type="text" name="param2">
        
        <input type="submit" name="test">
    </form>

</body>
</html>

実行結果はこんな感じ。

特に詰まったのは統合リクエストのマッピングテンプレートだった。
VLTは初めてだったので、処理を書くのに時間がかかった。

あと、今回APIを作成したおかげでGETとPOSTのリクエストの中身を
細かく知ることができてよかった。(POSTはリクエストボディがあるなど)

■参考サイト
API Gateway + Lambda にFormからPOSTする時のマッピングテンプレートを作成しました ｜ Developers.IO
[Web] HTTPリクエストの中身を学んでみた。GETやPOSTの違いなど - YoheiM .NET
HTTP入門
Amazon API Gatewayをブラウザから呼んでみた ｜ Developers.IO
パーセントエンコーディング - Wikipedia
application/x-www-form-urlencoded ‐ 通信用語の基礎知識
node.jsのcontext.succeedで気をつけること | hacknote
docs.aws.amazon.com

GoogleMapsAPI リクエスト メモ

var directionsService;
var directionsDisplay = [];
/*緯度*/
var longitude = 35.7102849;

/*経度*/
var latitude = 139.77714030000004;

var map;

var allCount = 1;

var i = 0;

function initMap() {
    var mapdiv = document.getElementById('map');
    
    directionsService = new google.maps.DirectionsService();

    //オプション設定
    var myOptions = {
        zoom: 17,
        center: new google.maps.LatLng(longitude, latitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };

    //マップを描画
    map = new google.maps.Map(mapdiv, myOptions);

    //マップ上に線を描く
    drawLine();

}

function drawLine() {
    
    var divisor = 100000;
    
    if(i == 500){
        return;
    }

    var originLatLng;
    // 経由地点を設定 
    var wayPoints = [];

    if (allCount != 1) {
        originLatLng = new google.maps.LatLng(longitude + allCount / divisor, latitude + allCount / divisor);
    } else {
        originLatLng = new google.maps.LatLng(longitude, latitude);
    }

    //waypoints作成
    for (var count = 1; count <= 20; count++) {

        wayPoints.push({
            location: new google.maps.LatLng(longitude + allCount / divisor, latitude + allCount / divisor)
        });

        allCount++;

    }

    var request = {
        origin: originLatLng, //入力地点の緯度、経度
        destination: new google.maps.LatLng(longitude + allCount / divisor, latitude + allCount / divisor), //到着地点の緯度、経度
        travelMode: google.maps.DirectionsTravelMode.WALKING, //ルートの種類
        waypoints: wayPoints
    }

    /* 描画 */
    directionsService.route(request, function (result, status) {
        directionsDisplay.push(new google.maps.DirectionsRenderer());
        directionsDisplay[directionsDisplay.length - 1].setDirections(result); //取得した情報をset
        directionsDisplay[directionsDisplay.length - 1].setMap(map); //マップに描画
    });
    
    i++;
    
    $("#count").empty();
    $("#count").append(i);
    
    setTimeout(function(){ 
        drawLine();
    }, 1000);
    


}

JavaScript bindメモ

aタグに対するbindのメモ

JavaScript

$(function () {
    $("#jump").bind('click', function (event) {
        alert("hoge");
    });
});

HTML

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

<head>
    <meta charset="UTF-8">
    <title>JavaScript ClickTest</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="click.js"></script>
</head>

<body>

    <a href="https://www.google.co.jp" id="jump">
        <img src="duke.jpg">
    </a>

</body>

</html>