メタラー起業家SHUNのブログ

こんにちは、SHUNです。

gitのブランチ名を変更する方法を解説します。

実現方法

現在のブランチの名前を変更する場合（変更後ブランチ名：bbb）

git branch -m bbb

他のブランチの名前を変更する場合（ブランチ名：aaa→bbb）

git branch -m aaa bbb

リモートのブランチに反映

もともとのブランチを削除

git push origin :aaa

変更後のブランチをプッシュ

こんにちは、SHUNです。

JavaScriptで下記のようなObjectがあった場合、key2の要素だけ削除する方法を解説します。

var obj = { "key1": "abc", "key2": "123", "key3": "ddddd" };

実現方法

下記の方法で実現可能です。

こんにちは、SHUNです。

JavaScriptで文字列を含むかの確認をする方法を解説します。

実現方法

いくつか手法は存在しますが、indexOfを用いるのが最も良いでしょう。

var str = "hello world", substring = "hello"; if(str.indexOf(substring) > -1){ // 文字列を含んでいた場合の処理 }

解説

こんにちは、SHUNです。

JavaScriptで別ページにリダイレクトさせる方法を解説します。

実現方法

主に下記２パターンで実現可能です。

window.location.href = "http://www.example.com";

window.location.replace("http://www.example.com");

相違点

location.hrefの場合：リダイレクト後、ブラウザの戻るボタンをした時にそれまでにいたURLに戻ります。

location.replaceの場合：リダイレクト後、ブラウザの戻るボタンをした時に、それまでにいたURLに戻れなくなります。

使い分け

こんにちは、SHUNです。

2016年12月にAmazonからAthenaというサービスがリリースされました。

https://aws.amazon.com/jp/athena/

こちらに接続してクエリを投げ、結果をJSON stingで吐き出す方法について紹介します。

今回のコードはGithubにて公開しているので、よければ使ってみてください。

https://github.com/Shun0750/AthenaConnection

Amazon Athenaとは？

大規模なデータを高速にRDBライクに処理できるサービスです。EMRのように複雑な処理を必要とすることなく、S3に保存されたログのフォルダを指定し、テーブルを作成したあとクエリを投げるだけで、結果を得ることができます。

クエリごとに、スキャンしたデータ分だけ課金されます。 （2017/2/12現在、1 TBあたり5USD）

使い勝手はGoogleのBigQueryと非常に似ていますが、S3のデータを簡単に持ってこれたりするので、普段からAWSを使っている方には導入が容易かと思います。

Amazon Athenaへの接続

AthenaはAWSのコンソールから使うことができます。

コンソールからの使い方については下記の記事などをご参考ください。

Amazon Athenaを使ってみました

http://dev.classmethod.jp/cloud/aws/try-aws-athena/

非常に簡単なGUIで実行することができますが、現状はAthenaに接続するAPIはそれほど充実はしてはおらず、JDBCというJavaからデータベースを操作するAPIのみが提供されています。

Accessing Amazon Athena with JDBC

http://docs.aws.amazon.com/athena/latest/ug/connect-with-jdbc.html

ライブラリの準備

JDBCドライバのダウンロード

aws s3 cp s3://athena-downloads/drivers/AthenaJDBC41-1.0.0.jar [local_directory]

AWS CLIを用いて上記のようにAthenaのJDBCコネクタをローカルにダウンロードしてきます。

java-json-schema.jarをダウンロード

JavaでJSONを扱うために必要なライブラリをダウンロードしておきます。

http://www.java2s.com/Code/Jar/j/Downloadjavajsonschemajar.htm

上記サイトの下部にてダウンロード可能です。

JDBCでの接続

下記のような接続用のjavaファイルを作成しました。

AthenaConnection.java

import java.io.IOException; import java.io.PrintWriter; import java.sql.*; import java.util.Properties; import com.amazonaws.athena.jdbc.AthenaDriver; import org.json.JSONObject; import org.json.JSONArray; public class AthenaConnection { static final String athenaUrl = "jdbc:awsathena://athena.us-east-1.amazonaws.com:443"; public static JSONArray convertToJSON(ResultSet resultSet) throws Exception { JSONArray jsonArray = new JSONArray(); while (resultSet.next()) { int total_rows = resultSet.getMetaData().getColumnCount(); JSONObject obj = new JSONObject(); for (int i = 0; i < total_rows; i++) { obj.put(resultSet.getMetaData().getColumnLabel(i + 1) .toLowerCase(), resultSet.getObject(i + 1)); } jsonArray.put(obj); } return jsonArray; } public static void main(String[] args) { Connection conn = null; Statement statement = null; String sql = args[0]; try { Class.forName("com.amazonaws.athena.jdbc.AthenaDriver"); // プロパティの設定 Properties info = new Properties(); info.put("s3_staging_dir", "PATH_TO_STAGING_DIR"); info.put("log_path", "PATH_TO_LOGFILE"); info.put("user", "YOUR API KEY"); info.put("password", "YOUR API SECRET"); // Athenaへの接続 conn = DriverManager.getConnection(athenaUrl, info); statement = conn.createStatement(); // クエリの実行 ResultSet rs = statement.executeQuery(sql); // json形式に変換 JSONArray jsonArray = convertToJSON(rs); System.out.println(jsonArray); rs.close(); conn.close(); } catch (Exception ex) { ex.printStackTrace(); } finally { try { if (statement != null) statement.close(); } catch (Exception ex) { } try { if (conn != null) conn.close(); } catch (Exception ex) { ex.printStackTrace(); } } } }

infoには接続に必要な情報を設定していきます。

s3_staging_dir : クエリを保存しておくS3のパス。"s3://S3 Bucket Location/"という形式で指定してください。

log_path : ログを保存しておくローカルのパス。

user,password : それぞれ、AWS APIに接続する時に用いるAccess Key IDとSecret Access Keyを設定してください。

シェルスクリプトでSQLを渡す想定で作っています。

args[0]でSQLのstringを渡して、Athenaにクエリを送った後、JSONに変換して標準出力をするだけです。

javaファイルのコンパイル

コンパイル準備

manifest.mf

Main-Class: AthenaConnection Class-Path: lib/AthenaJDBC41-1.0.0.jar lib/java-json-schema.jar

manifest.mfを作成し、下記のようなフォルダ構成にします。

- AthenaConnection.java - manifest.mf - lib |- AthenaJDBC41-1.0.0.jar |- java-json-schema.jar

jarファイルの作成

最後にこのjavaファイルをコンパイルしてjarファイルとします。

$ javac -cp ".:lib/AthenaJDBC41-1.0.0.jar:lib/java-json-schema.jar" AthenaConnection.java $ jar cvfm AthenaConnection.jar manifest.mf AthenaConnection.class

その後、下記のようにしてjarファイルを実行することで結果を得ることができます。

こんにちは、SHUNです。

最近、高校〜大学でやっていたブレイクダンスを再開しました。久々に頭で回ってみたら体が重すぎ＆体力なさすぎて焦りました。

体力と時間が無くなってしまった今、別の方向性で勝負するしかありません。

前々からダンスに合わせて照明が変化させたりドローンを飛ばしたりして、ダンスとITをつなげられたらいいなあと思っていたので、第一弾として、ヘッドスピンの動画解析をしてみたいと思います。

やりたいこと

「動画を解析してヘッドスピンの回転数を計測する」

ダンスを解析するための一歩として、ヘッドスピンの回転数を計測するソフトウェアを作ってみたいと思います。

前提条件

画像解析のみを使う（赤外線センサや機械学習などは使わない。画像解析の練習！）

黒いニット帽をかぶる

カメラは動かない

回っている人は一人

制約多すぎてすみません（笑）。

ロバスト性云々言われるとつらいところがありますが、趣味レベルということでご承知おきください。

今回使った動画

ダウンロードはこちら

今年の３月にオフィスのダンススタジオで撮ったやつ。最近、回ってなさすぎて首と頭皮をハゲしく痛めました。ちなみに撮影者はうちの社長です。

MITライセンスにするので、自由に改変・解析・再配布しちゃってOKです。もっと良い手法で解析してブログとかで公開してもらっても大丈夫です。笑

完成品

こんな感じになりました。下にある数字が回転数なのですが、それなりに判定できていると思います。

処理の流れ

方針：「頭を見つけてニット帽と顔の入れ替わり数を計測する」

1. 体の位置・サイズを判定

2. 頭部の位置・サイズを判定

3. ニット帽と顔の入れ替わり数を計測

上記のような流れで回転数を判定していきたいと思います。iPhoneアプリを想定しているので、Objective-C、C++、OpenCVという構成で作っています。

以下にコードを公開しているので、詳しくはこちらをご覧下さい。

https://github.com/Shun0750/HeadSpinCounter

1.体の位置・サイズを判定

まずは、オプティカルフローを用いて、体のおおよその位置とサイズを判定します。。

オプティカルフローとは、画像のオブジェクトの動きをベクトルで表したものになります。画像の特徴的な点の動きを判定することができるので、動画内の物体の動きを検知することに有用です。

参考：オプティカルフロー推定の原理

オプティカルフローを用いる際、特徴量を抽出しておく必要があります。 スピード重視なので、今回は特徴量としてFASTを使用することにしました。

参考：局所勾配特徴抽出技術-SIFT以降のアプローチ

オプティカルフロー適用するとこちらのような感じになります。

※そのまま描画するとノイズが多いので、小さすぎる/大きすぎる移動量については除外しています。

コードは以下のようになっています。

cv::Mat frame; //元画像 cv::Mat grayMat; //グレースケール

// 色空間をRGBに cv::cvtColor(frame, frame, CV_BGR2RGB); // グレースケール化 cv::cvtColor(frame, grayMat, CV_BGR2GRAY); // 1フレーム前のFAST特徴量を取得 if(frame_num == 0){ preGrayMat = grayMat; } std::vector<cv::Point2f&rt; prevCorners; std::vector<cv::KeyPoint&rt; preKeypoint; cv::FAST(preGrayMat, preKeypoint, 20); cv::KeyPoint::convert(preKeypoint, prevCorners); cv::cornerSubPix(preGrayMat, prevCorners, cv::Size(5, 5), cv::Size(-1, -1), cv::TermCriteria(cv::TermCriteria::COUNT | cv::TermCriteria::EPS, 30, 0.01)); std::vector<cv::Point2f&rt; currCorners; std::vector<uchar&rt; featuresFound; std::vector<float&rt; featuresErrors; // オプティカルフローを求める cv::calcOpticalFlowPyrLK( preGrayMat, grayMat, prevCorners, currCorners, featuresFound, featuresErrors);

OpenCVにはSIFTやSURF、FASTなど、様々な特徴量ベクトルを返す関数がいくつもあります。今回はcv::FASTという関数で、１フレーム前のFAST特徴量ベクトルを求めてprevCornersというベクトルに挿入しています。

※preGrayMatは、１フレーム前のグレースケール画像になります。処理の最後にgrayMatを挿入するイメージです。

currCornersに対応した特徴量ベクトルが入っているため、prevCornaersとcurrCornersを結ぶ線を描画するとオプティカルフローを可視化できます。

求めたオプティカルフローをもとに、大きく画素の動きがある一帯を四角で囲みます。１フレームだけの判定ではノイズが乗りすぎるので、数フレームのオプティカルフローの位置とサイズを考慮して平均化させた領域を四角形で囲んでいます。

詳しくはレポジトリをご覧ください。

2.頭部の位置・サイズを判定

上記の処理で、おおよその体の位置とサイズが判定できました。 このデータをもとに頭部の位置とサイズを推定します。体の四角形領域よりも下にあって、体の大体３分の１以内としています。

頭部を判定するのは円形状の判定を用いています。 画像を2値化したうえで、円形状の判定をかけると下のようになります。幾つか判定される円があるので、先ほど求めた体の位置やサイズから、最も頭部っぽい円を選択します。

円形状を判定するにはcv::HoughCirclesを使います。コードは以下のようになります。

cv::Mat grayBinaryMat; //2値化画像 // エッジ抽出をして２値化 cv::threshold(grayMat,grayBinaryMat,40,150,cv::THRESH_BINARY); cv::Canny( grayBinaryMat, grayBinaryMat, 40, 150, 3 ); cv::GaussianBlur( grayBinaryMat, grayBinaryMat, cv::Size(3, 3), 2, 2 ); std::vector<cv::Vec3f&rt; circles; cv::HoughCircles(grayBinaryMat, circles, CV_HOUGH_GRADIENT, 10, grayBinaryMat.rows /5, 120, 40, (body_width + body_height) / 30 , (body_width + body_height) / 10 ); for( size_t i = 0; i < circles.size(); i++ ) { cv::Point tmpCenter = cv::Point(cvRound(circles[i][0]), cvRound(circles[i][1])); int radius = cvRound(circles[i][2]); circle( grayBinaryMat, tmpCenter, radius, cvScalar(255,255,0), 3, 8, 0 ); // 円の描画 }

毎フレーム同じ位置が判定されるとは限らないので、前のフレームと比較して極端にずれていないことも条件として入れています。

3.頭部のカラー変化を判定

先ほど求めた頭部位置の画素を取得して、「黒っぽい画素」と「肌色っぽい画素」の含まれる割合を計算します。 例によって平均化するため、いくつかのフレームの履歴の合計値を元にしています。

下記は頭部の四角形内の黒っぽい画素と肌色っぽい画素の数を計算しているコードになります。

// 頭部の色分布を取得 int black_num = 0; int brown_num = 0; for (int i = head_center.y - head_radius; i < head_center.y + head_radius; i++) { cv::Vec3b* ptr = frame.ptr<cv::Vec3b&rt;( i ); for (int j = head_center.x - head_radius; j < head_center.x + head_radius; j++) { cv::Vec3b rgb = ptr[j]; if(rgb[0] < 120 && rgb[0] &rt; 60 && rgb[1] &rt; 20 && rgb[1] < 80 && rgb[2] &rt; 0 && rgb[2] < 60){ brown_num++; } if(rgb[0] < 50 && rgb[1] < 50 && rgb[2] < 50){ black_num++; } } }

今回の実装の中で最もロバスト性の低い処理です。照明が変化したり、灰色のニット帽かぶってたりするとアウトです。

完成！

これらを組み合わせて判定システムができました！ 処理スピードを損なうことなく、それっぽく判定できるようになりました。

次の目標は、カメラを使ってリアルタイムで処理できるようにしようかな。後は、回転に合わせて照明や音響を操作できるようなシステムとか。

もっといいアルゴリズム募集中！

動画はMITライセンスで公開しておくので、もし「もっと良いやり方がある！」といった場合は、是非下記の動画をお使いください。

ダウンロードはこちら

自由に改変・解析・再配布てしまって大丈夫ですので、もっと良い手法で解析してブログとかで公開してもらっても大丈夫です。 ブログで公開する時は一言お声がけいただけますと幸いです。

余談

ヘッドスピンやりたい方はこちらのサイトにやり方載せてます！(10年くらい前に作ったサイトなので超絶レガシーですが。) Break SHUNKUN SKILL - ヘッドスピン

こんにちは。SHUNです。

for関数内でsetTimeoutを渡す際、ローカル変数を引数として渡す方法をまとめました。

ダメな例

var arr = ["test1","test2","test3"]; for(var i=0;i<arr.length;i++){ setTimeout(function(){ alert(arr[i]); },i*1000); };

arrに入っているテキストを1秒おきにalertで表示させる例ですが、iというローカル変数は、上記の書き方ではsetTimeoutで使うことはできません。 「undefined」とアラート表示されてしまうと思います。

クロージャを用いる方法

そこで、一般的な方法として、クロージャを用いて引数を渡す方法があります。

var arr = ["test1","test2","test3"]; for(var i=0;i<arr.length;i++){ (function(count){ //countという変数にiを挿入 setTimeout(function(){ alert(arr[count]); },i*1000); })(i); };

これで正常にarrの中身が1秒おきにアラート表示されるようになります。

setTimeoutの第３引数を用いる方法（非推奨）

下記のように、setTimeout関数の最後の位置にパラメータを追加し、functionの引数として受け取ることが可能です。

var arr = ["test1","test2","test3"]; for(var i=0;i<arr.length;i++){ setTimeout(function(count){ //countという変数名で受け取る alert(arr[count]); },i*1000,i); //第３引数にiをセット };

しかしながら、IE9以下は非対応のため、使用する際は注意する必要がありそうです。

参考：WindowTimers.setTimeout()

こんにちは。SHUNです。

MySQLのAUTO INCREMENTは便利な機能ですが、開発環境下でリセットしたり、手動でセットしたくなることもあるのでメモ。

手動でAUTO INCREMENTの値を設定

ALTER TABLE table_name AUTO_INCREMENT=1000;

AUTO INCREMENTのリセット

こんにちは。SHUNです。

デバイスのスクロール量を取得して、一定の位置までスクロールしたら、あるdivをposition:fixed;top:0;で固定表示させるコードを書いていました。

以下のような感じです。

setInterval(function(){ var obj = document.getElementById("obj"); if(window.pageYOffset > 100) obj.style.position = "fixed"; else obj.style.position = "relative"; }, 50);

Androidの場合は正常に100pxスクロールしたらobjが固定表示されていたのですが、iOSのSafariだと100pxスクロールしたタイミングで一瞬消えてしまうという現象が起きていました。

非常にマニアックなシチュエーションですが、下記の質問を発見！ http://stackoverflow.com/questions/18185736/prevent-fixed-position-element-from-flickering-during-jquery-animation

なんと、

transform: translateZ(0);-webkit-transform: translateZ(0);

を追加すれば正常に表示されるという驚くべき回答。

半信半疑でobjのstyleに上記２点を追加したところ、、 できたああああ！！

こんにちは。SHUNです。

リクエストを送ったときに数分かかる処理で、1分くらいで504 Gateway Timeout Errorになってしまいました。 その際の対処方法をメモ。

Nginx側でのtimeout設定

Nginx+Unicorn+Railsの構成だったので504を吐いているのはNginxのはず。 ということで、下記の設定を行っていました。 timeoutは5分（300秒）で設定。

proxy_connect_timeout 300; proxy_read_timeout 300; proxy_send_timeout 300;

参考：http://qiita.com/yutackall/items/e1d8bd8ebe8a992578e5

しかしながら・・なぜかまだ1分くらいで504 Gateway Timeout Errorに・・

ロードバランサ側のタイムアウトが原因だった

全く原因がわからず悩んでいたところ、下記の質問を発見。 http://serverfault.com/questions/642705/request-timeout-issue-with-nginx-unicorn-and-rails

なるほど、ロードバランサ側でタイムアウトが起きることがあるのか・・！

そういえば、AWSのLoad Balancerを使っているので、チェック。 http://docs.aws.amazon.com/ElasticLoadBalancing/latest/DeveloperGuide/config-idle-timeout.html

どうやらロードバランサ側ではデフォルトで60秒のタイムアウト制限がついているらしい！