OmniAICreator/Qiita-1.07M huggingface dataset:
KotlinでAndroidアプリを開発（プロジェクト作成編）

# 検証環境
この記事の内容は、以下の環境で検証しました。

* Java:open jdk 1.8.0_152
* Android Studio 3.0 Beta 2
* CompileSdkVersion:26
* MinSdkVersion:19
* TargetSdkVersion:26
* BuildToolsVersion:26.0.1

# AndroidStudioPreview3.0について
今回使用するAndroid Studio 3.0の新機能を簡単に説明する

## 特徴
* Core IDE changes
ベースのIntelliJを 2016年2月 ～ 2017年1月2日に変更

* Kotlin language
Kotlinをプラグインなしでサポート

* Support for Java 8 language features
Java8をサポート

* New Android Profiler
アプリのプロファイルをリアルタイムで確認可能

* Instant Apps support
モジュール作成に「Instant App modules」と「Feature modules」を追加

* APK Debugger
Android StudioでAPKをビルドすることなく、APKをプロファイルしてデバッグすることが可能


* New Device File Explorer
Android Studio本体にファイルエクスプローラーを追加


* Support for the Android O Developer Preview
Android Oに対応

* New templates for Android Things
Androidで実現するIOTのテンプレートが追加

* Layout Editor improvements
レイアウトエディターの以下を改善
  ・コンポーネントツリーのドラッグアンドドロップ
・エラーパネルの追加
・新たなビューの対応
・chain creationの改善

* Layout Inspector improvements
デバッグ時のLayout Inspector の改善

* Google's Maven repository
Maven repositoryにGoogleを追加

* APK Analyzer improvements
APKの解析を向上
詳細は以下を参照
https://developer.android.com/studio/preview/features/index.html#apk_analyzer_improvements

* New Android Plugin for Gradle
Gradleのプラグインを更新。処理速度を向上

* New Android Emulator features
エミュレータに新しい機能を追加
詳細は以下を参照
https://developer.android.com/studio/preview/features/index.html#new_android_emulator_features

# プロジェクト作成手順
前提としてAndroid Studio 3.x、SDKが正常にインストールされているものとする

1. はじめに『Start new Android Studio project』を選択し、『Next』ボタンを押下
![00_top.PNG](https://qiita-image-store.s3.amazonaws.com/0/99960/d6d720af-ff0d-1955-0448-91878d7659c8.png)


2. プロジェクトを作成する画面で**『Include Kotlin support』にチェックを入れる**、『Next』ボタンを押下
![01_create_project.PNG](https://qiita-image-store.s3.amazonaws.com/0/99960/243f7c24-62b0-e50a-0781-fe52959774ba.png)


3. ターゲットとなるデバイスとmin sdkを選択し、『Next』ボタンを押下
![02_min_sdk.PNG](https://qiita-image-store.s3.amazonaws.com/0/99960/b1287349-626f-0642-54f6-08c964876940.png)

4. 初期状態で追加するモジュールを選択し、『Next』ボタンを押下
![03_select_first.PNG](https://qiita-image-store.s3.amazonaws.com/0/99960/36ffff73-7464-7f44-7141-5f3ef46e2655.png)

5. 追加するモジュールの設定をし、『Finish』ボタンを押下
![04_choose_activity_name.PNG](https://qiita-image-store.s3.amazonaws.com/0/99960/c736dad8-9404-7055-e89e-5598f49e9a0f.png)

6. プロジェクトが作成されるまで待機
![05_waiting.PNG](https://qiita-image-store.s3.amazonaws.com/0/99960/1273d7d1-a6f4-7167-9828-1ce1cb999df8.png)


7. プロジェクトが生成されて以下の画面が表示されれば終了


# 参考
https://kotlinlang.org/docs/tutorials/kotlin-android.html
Golang に入門する


周辺で、最近、Goの採用が増えているとのことで、Goに入門した。この記事では、入門時に勉強に使った資料などを紹介していきます。

（注）基本的に英語の資料中心です。

# (Youtube) Writing, building, installing, and testing Go code

https://www.youtube.com/watch?v=XCsL89YtqCs

5 分間で Go をインストール、ビルド、テストする方法を紹介する動画です。いきなり言語仕様を勉強するより、短い動画を確認して、雰囲気をつかむのが良さそうです。

# How to Write Go code

https://golang.org/doc/code.html

上記の動画とは内容的に近いチュートリアルです。
言語仕様の網羅性としては、後述の A Tour of Go の方が良いですが、いきなり個々の細かい言語仕様を勉強するのは辛い場合に、こちらの方を先にやるのが良いかと思います。コードを書く際に必要な内容が網羅され、かつ比較的短くまとまっています。

# A Tour of Go

https://tour.golang.org

公式のチュートリアルです。言語仕様が比較的コンパクトにまとまっているので、最初のとっかかりとして良いかと思います。演習問題もついていて、理解度の確認に良いかと思います。

チュートリアルを一通り紹介する動画もありました。

https://www.youtube.com/watch?v=ytEkHepK08c

# An Introduction to Programming in Go

O'Reilly Mediaから出版された ["Introducing Go - Build Reliable, Scalable Programs"](http://shop.oreilly.com/product/0636920046516.do) のオンライン版が無料で読むことができます。内容的には [A Tour of Go](https://tour.golang.org) と同じですが、こっちの方が詳しそうです。

[Next Steps](https://www.golang-book.com/books/intro/14) の章で、本書を読み終えた後に取り組むべきことが紹介されています。いきなりオープンソースのプロジェクトに参加するのは難しいと思いますが、それ以外は初心者でもなんとかやれるのでは？

* 標準ライブラリの [io/ioutil.go](https://golang.org/src/io/ioutil/ioutil.go) コードを読んでみる。
* 何か作ってみる。何かプログラミングの問題を探しているなら、[Project Euler](https://projecteuler.net/)が参考になる。
* コミュニティに参加する。
	* メーリングリスト https://groups.google.com/forum/#!forum/golang-nuts
	* オープンソースのプロジェクト

# Writing Web Applications

ここまでやって慣れきたら、何か作ってみるのが良いと思いますが、いきなりスクラッチで書くのが難しいという方は、実用的なアプリケーションを題材にしたチュートリアルを写経するのも手かと思います。

以下は、簡単な Wiki を Web フレームワークなし、標準 API だけで、作るという記事です。データ型、関数、ファイル I/O、HTTP などが網羅されていて、言語仕様の復習にもなり良いかと思います。

https://golang.org/doc/articles/wiki/

# その先は？

ここに参考になるドキュメントが一通りまとまっているので、眺めてみて気になるのを見るのが良いと思います。

https://golang.org/doc/

Go の設計思想を理解するという意味では、以下の動画が参考になると思います。

* [Go: code that grows with grace](https://vimeo.com/53221560)
* [Google I/O 2012 - Go Concurrency Patterns
Google Developers](https://www.youtube.com/watch?v=f6kdp27TYZs)
* [Google I/O 2013 - Advanced Go Concurrency Patterns](https://www.youtube.com/watch?v=QDDwwePbDtw)

とりあえず以上です。
LaravelのArtisanで作成することのできるクラスのテンプレート

# はじめに
Laravelを使っています。
コントローラ、モデル、辺りまでは分かるのですが、フォームリクエスト、サービスコンテナ、サービスプロバイダー…、となるとよくつかめなかったりします。

LaravelではCakePHPでいうところのbakeのような機能がartisanにて提供されています。
そのリストを調べてまとめてみました。

```console
$ php artisan make
make               make:job           make:model         make:seeder
make:auth          make:listener      make:notification  make:test
make:command       make:mail          make:policy
make:controller    make:middleware    make:provider
make:event         make:migration     make:request
```

名前 | 作成されるもの | 説明
----|----|----
auth | ルートとビュー | ログインと登録用のスキャフォルドを作成します。
command | artisanコマンド用ファイル | 自前でartisanを作成できます。
controller | コントローラ | ルートから受けるところです。
event | イベント | イベント発火周りを書きます。リスナで受けます。
job | ジョブ | キューで処理するための行うための単位、ジョブを書きます。
listener | リスナ | 発火したイベントに対応する処理を書きます。
mail | メールクラス | メール。
middleware | ミドルウェア | 処理の途中にフックさせる処理を書きます。
migration | マイグレーション | 開発したDB構成の差分を書きます。
model | モデル | モデルクラスを作成します。`-m`でマイグレーションもセットで作れます。
notification | 通知 | 通知系のクラスです。SMSやメール、Slackもサポートされています。
policy | ポリシー | モデルを取りまとめたり制約を書きます。
provider | サービスプロバイダ | コンテナ、ルートの起動や登録を書きます。
request | リクエスト | リクエスト処理をまとめた処理を書きます。
seeder | シーダー | DBに入れる初期値セットを作成する処理を書きます。
test | テスト | ユニットテスト、ブラウザテストの処理を書きます。


# 感想
使ったことあるクラス、全然使ったこと無いクラスも結構ありますね。
ジョブ、イベント、リスナ周りはどうやって使ったらよいかまだつかめてません。機会があったら使ってみます。

# 参考
http://qiita.com/bmf_san/items/e96bb3533de0792f9382
http://qiita.com/zaburo/items/e8e786624f88c253c87d
http://qiita.com/nunulk/items/edb12902d609ca53187a
https://laravel.com/docs/5.4/authorization#generating-policies
https://laravel.com/docs/5.4/requests
https://laravel.com/docs/5.4/queues#generating-job-classes
UWSCでダイアログのメッセージを取得したい

UWSCを使って自動化を行っています

そのときに、複数のダイアログが表示されるのですが、タイトルがどれも同じで区別がつきません。

ダイアログごとに、「はい」「いいえ」を変える必要があるため
ダイアログのメッセージを取得して判断しようと考えています。

現状
GETITEM(id_msgbox, ITM_STATIC)
や
GETSTR(id_msgbox,1,STR_STATIC)
で取得しようとしてますが
空の文字列となって取得ができません。
※id_msgboxは対象のダイアログウィンドウのWindowID

何か間違いがあるのか、それとも他にいい方法があれば教えていただけたらと思います

宜しくお願いします。
Visual Studio Code (Windows 10 64bit) で API Blueprint を使う

# 目的
Windows 10 64bit & VSCode で、API Blueprint が使いたい
少し調べてみたが、情報が散見されていたのでまとめとして。

前提として、VSCodeは導入済み。CLIは、powershell

## 手順
1. node.js 導入：npm
2. aglio 導入：md → html 作成
3. drakov 導入：APIモック選定

### node.js導入
https://nodejs.org/ja/

公式より msi インストーラを取得＆実行。今回は、Currentを選択。
（周知の事実だと思うが、npm も導入される）

インストール完了後、コマンドで動作確認（powershell）
```
// node
node --version // v8.4.0
// npm
npm --version // 5.3.0
```

### aglio 導入
npm コマンドで aglio パッケージを導入
```
npm install -g aglio
```
特に詰まる事はなかった（ログに一部、Error表記はあったが機能はしている）

導入が完了したら、md → html をテスト
```
// aglio のチェック
aglio --version // aglio 2.3.0
// HTML出力
aglio -i api.md -o test.html
```
指定したMDファイルをベースにAPI 設計書のHTMLファイルが生成される
上記のHTML出力方法は、 オプション -i でインポート元、-o がアウトプット先となる

常時、npm server 起動してhtml 確認するには以下のコマンド
```
aglio -i api.md --server -p 3000
```
npm server が起動し、localhost:[PORT]で、html閲覧可能となる。
また、元のMDファイルの変更を検知して更新時にHTML側も同期を取ってくれる

-p オプションで起動ポートが指定できる。
（最初、起動ポートが分からなくて少し困ったので、ローカル環境に色々と環境があり競合しそうであれば指定していた方が分かりやすい）

### drakov 導入：APIモック選定
最初はよく名前を見た**api-mock**を導入しようとして試したがインストールに失敗。
どうやら node Ver.6 以降でインストールが出来ないという状況らしい。
特にこだわりはなかったので、他に名前をよく見かけた drakov を導入。

```
// 導入
npm install -g drakov

// モック起動
drakov -f api.md
```
ブラウザやクライアントソフトで、アクセスすると記載したレスポンス内容が返却される。

※ 詰まったところ
改行コード
最初、drakov でMDファイルをしていた所、パースエラーが発生。
調べたところ、**改行コードを[CRLF]→[LF]に変更**したら解決。

## 補足
- VSCodeを使うならプラグインでいけるんじゃね？  
**API Elements extension** 等、プラグインを漁るとかなり候補が出てくる。この辺を使う事が出来ればもっとさっくりと導入可能か？
OpenWrt/LEDEのbusyboxでdiffが無効になってる件

表題の通りですが、OpenWrt/LEDEではインストール直後の状態でdiffコマンドがありません。

- ディスクスペース節約のためOpenWrt/LEDEのbusyboxではdiffが無効になっている
- busyboxでcmpコマンドが有効なので、システム用のスクリプトではこちらを使ってね
- diffコマンドが欲しい人はdiffutilsを入れてね

だそうで。

cmpコマンドというのは下記のようなもの。

```
# cmp /tmp/resolve.conf.*
/tmp/resolv.conf.auto /tmp/resolv.conf.ppp differ: char 1, line 1
```

確かに、シェルスクリプトで分岐させるだけならこれでいけそう。でもsshログインして作業するときには不便。

というわけでdiffutilsをインストール。

```
# opkg install diffutils
(snip)
# ls -la $(which diff)
-rwxr-xr-x    1 root     root        102549 Feb  2  2017 /usr/bin/diff
```

なるほど100KB増加。diffが絶対必要だけど100KBが惜しい人は自分でbusyboxリビルドしてねってことですかね。

# 参考URL

- https://dev.openwrt.org/ticket/9133
シェルスクリプトでスケジュールのフォーマットを作成する

#環境
Mac：10.12.5
bash：3.2.57(1)-release

#はじめに
現チームはプランナーが不足しています。企画書やキックオフ、レビュー会などの内容をもとに、エンジニアである私が仕様書やスケジュールの作成・更新を行っています。そのスケジュール作成についての改善内容になります。

できるだけ時間をかけず、かつ共有が簡単な方法を模索中なのですが、今は下記のように仕様書のスライドの最後にテキストで記載しています。

```
08/24 (木) 田中休み
　クライアント着手開始

08/25 (金)
　サーバー着手開始

==============================

08/28 (月)

08/29 (火)
　仮デザインリソース納品

08/30 (水)
　リザルトのapi結合

08/31 (木)
　UI表示のapi結合
　fixデザインリソース納品

09/01 (金)　鈴木休み・佐藤休み
　1回目レビュー

==============================

09/04 (月)
　2回目レビュー

09/05 (火)
　デバッガー依頼

09/06 (水)
　コードレビュー依頼

09/07 (木)
　developマージ
...
```
※全て仮名称です。
このテキストの日付けを指定週分吐き出すシェルスクリプトを作成したのでまとめておきます。


#先にまとめ

```sh
# 引数チェック
if [ "$1" == "" ]; then
        echo "引数に何週間分のスケジュールを作成するか指定してください\n例）sh createScheduleFormat.sh 5"
        exit 1
fi

end=$(($1 * 7))
for (( i = 0; i <= $end; i++ )); do
        # 曜日で判定する
        case $(date -v +"$i"d "+%w") in
                [1-5])
                        # 平日なら日付け表示
                        date -v +"$i"d "+%m/%d (%a)"
                        echo
                        ;;
                6)
                        # 日曜なら区切線を描画
                        echo "=============================="
                        echo
                        ;;
        esac
done
```

```
# sh createScheduleFormat.sh 2 の実行結果
# 今日から2週間分のフォーマットを作成する

08/24 (木)

08/25 (金)

==============================

08/28 (月)

08/29 (火)

08/30 (水)

08/31 (木)

09/01 (金)

==============================

09/04 (月)

09/05 (火)

09/06 (水)

09/07 (木)

```


#解説
####算術式展開には$((~~~))を使う（8/28 追記）
コメントに指摘をいただいたので修正しました！

```
end=$(expr "$1" \* 7)
　↓
end=$(($1 * 7))
```
▽Qiita - シェルで変数のインクリメントに expr を使うと100倍遅い件
http://qiita.com/d_nishiyama85/items/a117d59a663cfcdea5e4
exprでないといけないといった場面は無さそうです。
普段互換性を意識するようなことは無いので、$((~~~))を使っていきます。


####シェルスクリプト内の掛け算（もしexprを使った場合）
▽minus9d's diary - シェルスクリプトで掛け算
http://minus9d.hatenablog.com/entry/20120518/1337346365
もしexprで掛け算をする場合は * ではなく \\* とします。
* で実行してシンタックスエラーとなってしまいました。

```
expr: syntax error
```

####Macのdateで日付けをずらす

```-v +"$i"d```で指定日分日付けをずらしています。
▽Qiita - Macのdateコマンドで時間調整するやり方
http://qiita.com/hawaku/items/2f0a8454bbead2f070d2
Linuxと微妙に異なるのでググった挙動と違ってハマりました...。

#さいごに
カレンダーを試したり（作成・更新に時間かかるし見てくれない）、redmineを試したり（エンジニア以外見てくれない）しましたが、今のとこ仕様書に付随したテキストが一番安定して運用出来ています。それでもこちらから定期的に提示しないと忘れられがちですが...。
【メモ】DB内の重複したレコードを一つだけ残して削除する

すでにレコードが入っているテーブルに後からユニーク制約を追加したいとき、すでに重複したレコードが含まれているとユニーク制約が追加できません。

そこでRailsのActiveRecordで、重複したレコードを一つだけ残して、残りを削除するスクリプトを書きました。以下は、articlesテーブルのtitle・media・user_idカラムに、複合ユニーク制約をつけたいケースです。

```ruby
# 重複したデータを取得する
sql = 'SELECT title, media, user_id FROM articles GROUP BY title, media, user_id HAVING COUNT(*) > 1;'

# 重複したレコードのIDを取得して、一つだけ残す
duplicates = Article.find_by_sql(sql)
duplicate_ids = duplicates.inject([]) do |duplicate_ids, dup|
  articles = Article.select(:id).where(title: dup.title, media: dup.media, user_id: dup.user_id) 
  duplicate_ids << articles.pluck(:id)[1..-1]
end

# 重複したレコードのIDを削除する
Article.where(id: duplicate_ids.flatten).destroy_all
```
Ruby の () の戻り値

[ブログ記事](http://secret-garden.hatenablog.com/entry/2017/07/08/170728)からの転載です。

Ruby だと () の戻り値は `nil` になるらしい。

```ruby
p ()      # => nil
p ().nil? # true
```

ほぼ使うことはないだろうけど知らなかった（そもそも `()` だけ評価出来ると思ってなかった。  
ちなみに `#call` が呼び出されるわけではない。

```ruby
class X
    def call
        "call"
    end

    def func
        p self.()   # => "call"
        p ()        # => nil
    end
end

X.new.func
```
UnityのImage EffectでSobelフィルタによるエッジ検出

UnityのImageEffectでSobelフィルタでエッジを検出するためシェーダーです。
プロパティの`_Width`と`_Height`にスクリーンサイズを、`_Threshold`にエッジと検出するための閾値を設定します。

```glsl
Shader "ImageEffect/Edge"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Width ("Width", Float) = 640 // Screen Size X
		_Height ("Height", Float) = 480 // Screen Size Y
		_Threshold ("Threshold", Range(0, 1)) = 0.5 // Threshold for edge
	}
	SubShader
	{

		Pass
		{
			CGPROGRAM
			#pragma vertex vert_img
			#pragma fragment frag
			
			#include "UnityCG.cginc"

			sampler2D _MainTex;
			float _Width;
			float _Height;
			float _Threshold;

			float gray (fixed4 c) {
				return 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b;
			}

			fixed4 frag (v2f_img i) : COLOR
			{
				float dx = 1.0 / _Width;
				float dy = 1.0 / _Height;
				float c00 = gray(tex2D(_MainTex, i.uv + float2(-dx, -dy))); 
				float c01 = gray(tex2D(_MainTex, i.uv + float2(-dx, 0.0))); 
				float c02 = gray(tex2D(_MainTex, i.uv + float2(-dx, dy))); 
				float c10 = gray(tex2D(_MainTex, i.uv + float2(0, -dy))); 
				float c12 = gray(tex2D(_MainTex, i.uv + float2(0, dy))); 
				float c20 = gray(tex2D(_MainTex, i.uv + float2(dx, -dy))); 
				float c21 = gray(tex2D(_MainTex, i.uv + float2(dx, 0.0))); 
				float c22 = gray(tex2D(_MainTex, i.uv + float2(dx, dy))); 

				float sx = -1.0 * c00 + -2.0 * c10 + -1.0 * c20 + 1.0 * c02 + 2.0 * c12 + 1.0 * c22;
				float sy = -1.0 * c00 + -2.0 * c01 + -1.0 * c02 + 1.0 * c20 + 2.0 * c21 + 1.0 * c22;

				float g = sqrt(sx * sx + sy * sy);

				return g > _Threshold ? fixed4(1, 1, 1, 1) : fixed4(0, 0, 0, 1);
			}
			ENDCG
		}
	}
}
```

![FrameBuffer.gif](https://qiita-image-store.s3.amazonaws.com/0/61569/05038358-fd20-eb4c-434a-b6274eaa2bda.gif)
UnityのCamera Projecterアセットを使って、球面ディスプレイに360度画像を表示する。

# はじめに

こちらは、[「Unity アセット真夏のアドベントカレンダー 2017」](https://atnd.org/events/89521#)の8/25日分の記事です。

前から、学研さんのワールドアイという球面（厳密には半球）ディスプレイに興味があったのですが、微妙に値段が高くて手が出ず。ところが、最近MIROさんにお勧めいただいたので値段をもう一度確認したら、Amazonでは1万円以下で売られていることが分かりまして、盆休みで少し時間があるし、触ってみることにしました。

![IMG_0877.PNG](https://qiita-image-store.s3.amazonaws.com/0/58503/a155a6ad-e61b-f6c3-f247-d7d7a552946c.png)


# ワールドアイの基本的な使い方

ワールドアイは、写真の通り、後ろにあるプロジェクターから前の半球に画像を投影します。付属のデモの地球儀（世界地図）上の経線から推測するに、だいたい160度の視野角があるようです。半球よりちょっと狭いようです。

ワールドアイに画像を表示させるには、USBに画像を保存するか、HMDI（HDMIケーブルミニを別途購入）でPC上の画像を表示させるか、のどちらかです。USBに画像を表示させる場合は、480px四方の中に160度視野に相当する画像を入れて、それの両側に余白をつけて640px * 480pxの.jpeg画像をにしてUSBドングルに入れると、以下のように360度画像（の一部）を表示できます。

![IMG_0873.JPG](https://qiita-image-store.s3.amazonaws.com/0/58503/643ff051-f6c7-52d8-0783-1a6a269005e0.jpeg)

360度画像のうち160度の部分だけを切り取るにはPTGuiなどのツールを使いましょう。PTGuiを使う場合は、横方向はFOV213、縦方向はFOV160にして、640x480の画像サイズで出力すればちょうど良いです。この際、拡張子を必ずjpgではなくjpegにしましょう。

# Unityを使って、PCからワールドアイに表示する。

ワールドアイのHDMI入力を使って、PC上のUnityから画像を表示します。私のSurface Proのデフォルトのディスプレイ設定だと画面の一部しか表示されませんが、1400px x 1050px にすると、上下左右ともに大体収まる感じになります。他のPCだと違うかもしれないので、いくつかのディスプレイ解像度設定を試して、デスクトップ全体がうまく収まる組み合わせを試してください。

次に、Unityでの160度の視野に相当すると画像の表示ですが、ここでCamera Projecterアセットを使います。

![IMG_0878.PNG](https://qiita-image-store.s3.amazonaws.com/0/58503/c1b198d2-aae4-8929-6b33-6901c42e3ee3.png)

今年の5月に出たばかりのアセットなので、まだ 使ったことがない人も多いのではないでしょうか。

これは、シーンに上下左右前後6つのカメラの画像をリアルタイムでスティッチし、それを指定の投影法（Stereographic, Equidistant, Equisolid, Orthographic, Geographic, Miller, Cassini)で投影したものをGameウィンドウに表示します。

Equidistant FOV 360度

<img width="431" alt="Equidistant.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/58503/7bc02bf4-31e1-119d-ab37-77b60198d5f5.png">

Equisolid FOV 360度

<img width="403" alt="Equisolid.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/58503/dbb5e311-b67b-d09c-2121-612bed4d4aac.png">

Orthographic FOV 360度

<img width="404" alt="Orthographic.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/58503/52c5de46-1dbc-b390-f92c-1b1d775a0632.png">

Geographic FOV 360度

<img width="454" alt="Geographic.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/58503/0dddb822-7c3e-9ea8-f433-afd81fb6a425.png">

Miller FOV 360度

<img width="452" alt="Miller.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/58503/a85991ad-48b2-2698-14a7-f5a895b82133.png">

Cassini FOV 360度

<img width="232" alt="Cassini.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/58503/54e3effd-7035-f5cb-d2da-60446a87f6b7.png">

THETAとかで撮影した写真を使うなら、Geographicが良いでしょう。すでに述べたように、ワールドアイでは視野160度しか表示されないので、Camera ProjecterコンポートでFOVを設定すれば良いです。

<img width="400" alt="CameraProjector.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/58503/d296c369-4515-834b-b422-7fd01fa83f0a.png">

あとは、Gameウィンドウを全画面表示した状態でPlayすれば、ワールドアイ上で以下のように映ります。

![IMG_2298.JPG](https://qiita-image-store.s3.amazonaws.com/0/58503/facde192-4682-5df5-0467-0f057abbdf32.jpeg)

この写真だと分かりづらいですが、実際に見るとまあまあ奥行き感あります。360度写真と一緒にテキストや3Dキャラクターなども表示してみました。

# 最後に

360度画像を表示するとアセットは過去にもありましたがFOVを調整可能なものは少ないので、Camera Projecterはワールドアイのような球面ディスプレイとの相性は良いと言えるでしょう。球面ディスプレイお持ちの方は、一度お試し下さい。
[クイズ]javascriptと仲良くなるための一歩　第３８話「配列」

#問題

##第1問

```js
var arr = [0,,2]
arr[1] //=> ?
```

##第2問

```js
var arr = [0]
arr[2] = 2
arr[1]     //=> ?
arr.length //=> ?
```

:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:
:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:


#答え

##第1問

```js
var arr = [0,,2]
arr[1] //=> undefined
```

##第2問

```js
var arr = [0]
arr[2] = 2
arr[1]     //=> undefined
arr.length //=> 3
```
mitmproxyでiOSの通信を確認するまで

イカリング2の通信が見たい！
iOSで一箇所だけ個人的にハマったのでメモ。

参考：http://qiita.com/hkurokawa/items/9034274cc1b9e1405c68

#pipインストール
1. [ここ](https://pip.pypa.io/en/stable/installing/#do-i-need-to-install-pip)からget-pip.pyをダウンロード
2. get-pip.pyのあるディレクトリに移動してインストール

```
python get-pip.py
```

#mitmproxyインストール
1. 普通にインストール

```
pip install mitmproxy
```

#iOSの設定
1. 設定>Wi-Fi>プロキシサーバにするマシンと同じネットワークに接続
2. ネットワーク設定（iマーク）の一番下にあるHTTPプロキシを手動に変更
3. 以下のように設定
    4. サーバ：プロキシサーバにするマシンのIP
    5. ポート：８０８０（なんでもいい）
    6. 認証：オフ

#mitmproxy起動
1. 普通に起動
```
mitmproxy
```

#証明書のインストール
1. iOSのSafariを開き、`http://mitm.it`へアクセス
2. リンゴマークをタップして証明書をインストール

#イカリング起動！
が、見れない。通信エラーになってる。

#証明書を有効にする
<font color="red">設定>一般>情報>証明書信頼設定>mitmproxy</font>のところをオンにする。
いろんなサイト見たけど何故か書いてなかった。

#起動できた。
あとはsplatoon2と書いてあるリクエストを見るだけ。
<img width="709" alt="スクリーンショット 2017-08-25 4.07.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/164059/862966ce-f049-36ca-2393-269da0a519c3.png">
Azureの各種アクセスをユーザー・リソースレベルで制限する方法(IAM)

## IAMについて

前回以下の記事でプロトコル・ポートレベルでのアクセス制限を書きました。
[Azureの仮想マシンの外部からのアクセスを制限する方法(ネットワークセキュリティグループ)](http://qiita.com/Vendetta1209/items/550e3884565fe96b3f05)
仮想マシンや仮想ネットワークを中心としてそこへのアクセスの出入り口をどのようにするか？というのがNSGだったわけですが、
利用させるユーザー目線で設定するのがIAMです。
設定の利用シーンはActiveDirectoryなどでの権限設定を思い浮かべると想像しやすいかもしれません。
仮想マシンのリソースに開発者だからといって全員がアクセスできるというのも問題です。
会社とAzureのリソースを結ぶVPN設定などは特定社員だけで良いはずです。
また、弊社では管理系の人間が経理ソフトを利用するために仮想マシンにアクセスしますが、
普通のアクセス権限だとリソースを誤って削除などしてしまうリスクもあるかもしれません。

## 設定の概要
### ユーザー
Microsoftアカウント(個人)と組織アカウント(AzureAD)のユーザーとそのグループに権限を割り振ることができます。
![iam1.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/642e5dd8-7d1d-5a40-6fc6-354457f869da.png)

### IAMの対象
①VMやAzureSQLといった各リソースごとや②それらを一つにまとめるリソースグループと③Azureのプランそのものであるサブスクリプションに設定することができます。
リソースグループというのは複数のサービスをまとめるメーリングリストのようなものです。
![iam3.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/7851cbbc-5d3b-0337-b30f-2ba89c141523.png)

## 設定方法
新ポータル(portal.azure.com)の各種リソースにアクセスすれば、「概要」のすぐ下に「アクセス制御(IAM)」とあるのがわかると思います。
「**+追加**」という箇所をクリックしてみましょう
![iam4.png](https://qiita-image-store.s3.amazonaws.com/0/123580/203fb1fa-b7e1-17bc-ccad-31c265a97af1.png)

既にある権限レベルがたくさん出てきます。
![iam5.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/875ad3b6-5709-ff7b-2215-2c070b5d9e8d.png)
すべてを把握しておく必要はございませんが、幾つか一般的に利用しそうなものをチョイスしておきます。

| 役割 | 権限内容 |
|:-----------|------------:|
| 仮想マシン管理者・閲覧者| 仮想マシンの各種設定ないし閲覧|
| 共同作成者|アクセス権限以外のすべての設定 |
| 課金管理者 | 課金情報を閲覧したり支払い情報などを編集できる |
| セキュリティ管理者| アクセス権限の編集 |

後はユーザーかグループ名を入力し、出てきた候補で保存をすれば設定可能です。

※参考1: [ロールベースのアクセス制御を使用して Azure サブスクリプション リソースへのアクセスを管理する](https://docs.microsoft.com/ja-jp/azure/active-directory/role-based-access-control-configure)
※参考2: [Azure ロールベースのアクセス制御の組み込みロール](https://docs.microsoft.com/ja-jp/azure/active-directory/role-based-access-built-in-roles)
クラスに Computed Property を設定する時にFlowに叱られないように

## 躓いた所

`constructor`の中とかで`this[key] = 1`とか入れようとするとFlowに叱られる。

例えばこんな感じ。

```js
class A {
  a: number;

  constructor(data: {|x: string|}) {
    this.a = 1;
    this[data.x] = 'value';
    // ^ assignment of computed property/element. Indexable signature not found in
    // ^ A
  }
}
```

## 解決

`this`を一時的に違う型にする。それには`(<var>: <type>)`というシンタックスを使う。
例えば今回なら、`{[string]: string}`というタイプを作ってこんな感じにすれば叱られなくなります。



```js
type ComputedProps = {[string]: string};

class A {
  a: number;

  constructor(data: {|x: string|}) {
    this.a = 1;
    (this: ComputedProps)[data.x] = 'value';
    // No errors!
  }
}

console.log(new A({x: 'aiueo'}));
// A { a: 1, aiueo: 'value' }
```

## Try

[https://flow.org/try/#0C4TwD...](https://flow.org/try/#0C4TwDgpgBAwg9gWzAV2BAJgBQE5zAZygF4oBvAbX2GwEsA7AcwF0AuKK2xgXwG4AoPgGMANgEN8hAIJk+UKKLZ1kCAEYRs-WVEFw6HZIOBxsACnSjgCsgB8AHmw70G1rgEoZcucAAWNfADpRYigARn5PKBMfPzZ4JFQMHDx8V3JzS39bJmCAcgA3UWFkCBzwzwB6cqgAOTgodVxsfABCLS4+dqFdfDhhCH9hOAYTOggAdyhJE1J7KBzRGmK4HLdXHiA)
dockerのデフォルトブリッジ(docker0)のIPアドレスを変更する

## はじめに
　Webを見ていると、docker0のIPアドレスを変更する様々な方法が見受けられます。docker.serviceの起動オプションを変更する、/etc/default/dockerにオプションを追記する等。
　しかし、バージョンが異なる為か、私の環境ではどれも動作しなかったので、こちらの環境で動いた方法を書いておきます。

## 環境
 | バージョン
---|---
Ubuntu | 16.04 LTS
Docker | 17.06.1-ce

## 手順

１. **/etc/docker/daemon.json** に、IPアドレスの設定を記述する(以下はIPアドレスを **192.168.0.1** に設定する場合)。ファイルがない場合は新規に作成する。

```json:例
{
  "bip": "192.168.0.1/24",
  "fixed-cidr": "192.168.0.0/24"
}
```

２. dockerを再起動する

```bash
service docker restart
```

## 参考
[Customize the docker0 bridge](https://docs.docker.com/engine/userguide/networking/default_network/custom-docker0/)

## 気になったこと
　この件と直接関係ないと思うんですが、VirtualBox上で動かすと、「intel_rapl: no valid rapl domains found in package 0」を表示後、再起動(?)するんですよね。物理マシン上では問題ないんですがなんでだろう...
Python - bitflyer 資産残高を取得

## pybitflyerインストール

```
pip install pybitflyer
```

## API Document

https://lightning.bitflyer.jp/docs?lang=ja&_ga=2.242195781.679665938.1503589602-1417182779.1500704462#資産残高を取得

## ソース

```py
import pybitflyer
import time
from datetime import datetime
from pytz import timezone
from dateutil import parser

BALANCE_KEYS = ["currency_code",
                "amount",
                "available"]

API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
API_SECRET = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
       
       
if __name__ == '__main__':
    api = pybitflyer.API(api_key = API_KEY, api_secret = API_SECRET)
    
    balances = api.getbalance(product_code="BTC_JPY")
    
    for balance in balances:
        for balance_key in BALANCE_KEYS:
            print(balance_key + " : " + str(balance[balance_key]))
        print("=================================================")
```

## 結果

```
currency_code : JPY
amount : 2793972636.0
available : 2793972636.0
=================================================
currency_code : BTC
amount : 600.2235
available : 600.2235
=================================================
currency_code : BCH
amount : 600.0685
available : 600.0685
=================================================
currency_code : ETH
amount : 0.0
available : 0.0
=================================================
currency_code : ETC
amount : 0.0
available : 0.0
=================================================
currency_code : LTC
amount : 0.0
available : 0.0
=================================================
```
All in One SEO Packの title, descriptionをプログラムで書き換える

All in One SEO Packを利用すると、titleや descriptionを自由に書き換えることができます。しかし、設定しきれない画面のタイトルを書き換えたい場合は、functions.phpで変更することができます。

```php
add_filter( 'aioseop_title', 'aioseop_title_func' );
 
function aioseop_title_func( $title ) {
    $title = 'new title';

    return $title;
}
```

descriptionは次のように書き換えます

```php
add_filter( 'aioseop_description', 'aioseop_description_func' );
 
function aioseop_description_func( $description ) {
    $description = 'new description';
    
    return $description;
}
```
tclのジェネレーター(コルーチン・イテレーター)

さっくりTclのジェネレーターについて調べたので載せておく。
比較用にjsとVBもね。

以外に日本語資料がなかったから困った。

```txt:出力
0
1
2
3
4
5
6
7
8
9
10
```

```tcl:Tcl
proc gen {} {
	yield [info coroutine]
	for {set i 0} {true} {incr i} {
		yield $i
	}
}
coroutine g gen

puts [g]
puts [g]
puts [g]
puts [g]
puts [g]
puts [g]
puts [g]
puts [g]
puts [g]
puts [g]
puts [g]
```

```js:JavaScript
function* gen(){

	for(let i=0;;i++){
		yield i;
	}
}
const g=gen();

console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
```

```vbnet:VB.Net
Imports System
Imports System.Console
Imports System.Collections.Generic

Module Program
	Iterator Function gen() As IEnumerator(Of Integer)
		For i As Integer=0 To Int32.MaxValue
			Yield i
		Next
	End Function

	Sub Main
		Dim g=gen()

		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
		g.MoveNext() : WriteLine(g.Current)
	End Sub
End Module
```
elvis 演算子の後に run

kotlin である変数が null のときと null でないときそれぞれに処理を書く方法は，２つあります．

- if 文
- スコープ関数 + elvis 演算子

普通に if 文を使うと，null チェックはできますが，可変な（`var`で宣言された）変数の場合は，スマートキャストが効きません．

```kotlin
var a: String? = "a"
var b: String = ""

if (a != null) {
  // a が null でないときの処理
  // エラー
  b = a
} else {
  // a が null のときの処理
  b = "b"
}
```

スコープ関数とelvis演算子を使えばうまく値を取り出すことができますが， そのままだと単一の式しか書くことができません．
式でないものも書けません．

```kotlin
var a: String? = "a"
var b: String = ""

a?.let {
  // ok
  b = it
} ?: b = "b" // NG 代入は式ではない
```

nullable な変数を notnull に束縛した上で，null なときも null でないときも複数行の処理を行いたいときは， run が見やすくていいと思います．

```kotlin
a?.let {
  // a が null でないときの処理
  b = it
} ?: run {
  // a が null のときの処理
  // 複数行処理を書けて便利
  b = "b"
}
```
Vue.js + axios で Qiita API v2 を叩いて投稿を取得する

# 検証環境
- Vue.js (v2.4.2)
- axios (v0.16.2)

gulpでトランスパイラを使用した状態で検証しています。

# 公式リンク
- [Qiita API v2ドキュメント](http://qiita.com/api/v2/docs)
- [mzabriskie/axios](https://github.com/mzabriskie/axios)

# axios のインストール

```bash
npm install axios --save
```

# 作成画面
読み込みボタン押下でリンク付きの投稿タイトルとタグを取得します。


![sc.png](https://qiita-image-store.s3.amazonaws.com/0/184518/78a88654-2dab-1907-a62b-53e311c9963a.png)

# ソースコード
```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Qiita Posts | Vue.js + axios test</title>
    <link rel="stylesheet" href="/css/main.css">
    <script src="https://unpkg.com/vue"></script>
    <script src="/js/main.js" charset="utf-8" async></script>
</head>
<body>
    <section id="qiita-posts">
        <h1>Qiita Posts</h1>
        <button v-on:click="request">読み込み</button>

        <hr>

        <ul>
            <li v-for="post in posts" >
                <span class="tag" v-for="tag in post['tags']">{{ tag['name'] }}</span>

                <a v-bind:href="post['url']" target="_blank" rel="noopener noreferrer">
                    <div>{{ post['title'] }}</div>
                </a>
            </li>
        </ul>
    </section>
</body>
</html>
```

```scss:main.scss
body {
    padding: 0 10px;
}

#qiita-posts {
    h1 {
        margin-bottom: 20px;
        font-size: 1.2rem;
        font-weight: bold;
    }

    button {
        margin-bottom: 10px;
        padding: 4px 10px;
        color: #fff;
        font-size: 0.75rem;
        background: #325d7c;
        border: none;
        border-radius: 2px;
        box-shadow: 0 4px 0 darken( #325d7c, 4% );
        cursor: pointer;
    }

    li {
        margin-bottom: 15px;
        line-height: 1.5;

        .tag {
            display: inline-block;
            margin: 0 1px 6px;
            padding: 2px 6px;
            color: #fff;
            font-size: 0.75rem;
            background: #7daaca;
        }

        a {
            color: darken( #7daaca, 24% );
        }
    }
}
```

```js:main.js
'use strict';

import axios from 'axios';

let vm = new Vue( {
    el: '#qiita-posts',
    data: {
        posts: void(0),
    },
    methods: {
        request: () => {
            axios.get( 'https://qiita.com/api/v2/users/[QiitaユーザID]/items' )
                .then( ( res ) => {
                    vm.posts = res.data;
                } )
                .catch( ( res ) => {
                    console.error( res );
                } );
        }
    },
} );
```

取得されるデータ構造の詳細は、[Qiita API v2ドキュメント - 投稿](http://qiita.com/api/v2/docs#投稿) を参照してください。

# おわりに
Vue.jsの勉強ついでに実装してみましたが、axiosと組み合わせるとAjax周りの処理が簡単すぎて驚くばかりです。
Rubyのバージョンが切り替わらない時の対処法！

Rubyのバージョンが切り替わらない時にやることは、

1. Rubyのバージョンが切り替わらない時は、どこを参照しているかチェックする
2. 問題がある場合は設定を変えてやる

# Rubyコマンドの参照先をチェック
```
$ rbenv global 2.4.1
$ ruby -v
ruby 2.0.0p645 (2015-04-13 revision 50299) [universal.x86_64-darwin15]
```

はい。切り替わってないですね。
こうなったら何処見てるかチェックします。

```
$ which ruby
/usr/bin/ruby
```

rbenvでRubyをインストールすると`/.rbenv/shims/ruby`って場所が正しい場所です。
なので、ここを参照するように切り替えます。

# 参照先の変更方法
```
$ cd
$ vi ~/.bash_profile
export PATH="~/.rbenv/shims:/usr/local/bin:$PATH"
eval "$(rbenv init -)"
$ source ~/.bash_profile # 変更をPCに反映させる
```

ってやったら、再度Rubyのバージョンをチェックする
```
$ ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin15]
```

でめたしでめたし
Windows10 IoT CoreをVMwareで仮想化(2) Bluetooth/BluetoothLE(BLE)

`I wrote it in English in the comment section.`

##◆はじめに##
性懲りもなく面白くもない仮想化ネタで攻める。
おそらく、仮想化なぞメリットが薄い、と感じる方ばかりではなかろうか。

前回記事のWindows10 IoT CoreのVMware Workstation Pro 12による仮想化で、ホストのBluetoothを手軽にゲスト側へ認識させられることについて触れた。
が、Bluetoothで、もう少し突っ込んだことを行おうとしたところでつまづいたためここに記す。

★前回の記事（Windows10 IoT CoreをVMwareで仮想化(1)）
http://qiita.com/PINTO/items/43d3f0540adea08013e9

★前々回の記事（Windows10 IoT CoreをHyper-Vで仮想化）
http://qiita.com/PINTO/items/0cf1a303be8666ca4643

さて本題。
Bluetoothはいとも簡単に認識するが、BLEデバイスは簡単には認識しないことに気づく。

体裁を一切気にせずハードコピーすら無いが、トーシローでも絶対成功するような細かい手順を残すことをモットーとするため、毎回インデントも何も無い汚い文面となる点はご容赦願いたい。

以下、BLEデバイスの通信をゲスト側で認識させるまでの手順。BLEに限らずBluetoothの認識が不安定なときも試す価値あり。
今回は必ず出費が必要。

##◆仮想Windows10 IoT CoreへBLEを認識させるための前提環境##
１．前回記事によりvmware+iotcoreの仮想環境を構築済みであること
２．Bluetooth/BLE両対応ドングル(例：iBUFFALO BSBT4D09BK Amazonで918円、自分はメルカリで安く仕入れた)
３．Bluetoothドングルのドライバがあらかじめホストマシンにインストール済みであること

##◆BLEデバイスをゲストのWindows10 IoT Coreへ認識させる手順##
１．ホストとBLEデバイスがペアリング済みであれば事前にペアリングを解除しておく
２．ホストPCで、VMware Workstation Proを起動
３．左側ペインで設定を仕込む対象ゲストOSをクリック
４．右側ペインの「USB コントローラ」をクリック
５．「ハードウェア」タブをクリック
６．左側ペインで「USB コントローラ」を選択
７．右側ペインの「接続」を下記のように変更
　（１）USBの互換性：USB2.0
　（２）新しいUSBデバイスを自動的に接続：チェックON
　（３）すべてのUSB入力デバイスを表示する：チェックON
　（４）Bluetoothデバイスを仮想マシンと共有：チェックOFF
８．ＯＫ
９．BluetoothドングルをホストPCへ挿入
10．右側ペインの「▶この仮想マシンをパワーオンする」をクリック
11．VMware画面右下のBluetoothマークをクリック(ホスト内蔵のBluetoothとドングルBluetoothの２個分マークが表示されるため、ドングル側をクリックする)
12．「接続（ホストから切断）」をクリック
13．警告ダイアログが表示された場合は「今後、このメッセージを表示しない」にチェックONしてOKクリック
14．Windows10 IoT Coreコンソール上の歯車マークをクリック
15．左側ペインの「Bluetooth」をクリック
16．右側ペインのスライドバーをクリックし、「オン」表示にする
17．BLEデバイスの電源をONにする
18．BLEデバイスの名前が「Bluetoothデバイスの管理」画面にリストアップされない場合は、一度スライドバーをOFF→ONし、数秒間待機すると表示される、それでもダメならゲストOSを再起動
19．「Bluetoothデバイスの管理」画面で接続対象のBLEデバイスの「ペアリング」ボタンをクリック
20．画面の上のほうに「ペアリングに成功しました。」と表示される

★ホストとBLEデバイス間のペアリング不要。むしろペアリングするとゲストでのデバイス検出が不安定になるためしないほうが良い。
★ゲストとBLEデバイス間で直接ペアリング可能。

これで、VisualStudioのデバッグで、BLEからのアドバタイズなどの通信受信状況をトレースできるようになっている。
Releaseビルドで実行ログのみ監視したい場合はVisualStudioで配置のみ実行し、Device Portalで対象アプリケーションを「Stopped」から「Running」状態に変更する。

##◆Device Portal##
http://(ゲストOSのIPアドレス 又は ゲストPC名):8080/
※ブラウザのURL欄へ上記URLを入力してEnterキー押下
※IEではまともに表示されないため、Edge又はGoogle Chromeを使用するのが吉

##◆Device Portalへうまく接続できないとき##
１．ホストPCのWindowsファイアウォールを無効化する
２．ゲストPC名でURL入力しているときはIPアドレスを指定してリトライ

##◆おわりに##
I2Cのリモートデバッグとロボ作成、仮想化を同時並行しているため余計に時間が無い。
次回は気が向いたら上記のうちどちらかを。

あとは、ARMベースのWindows10 IoT Core(Raspberry Pi3用)をWindows10x64上で実行できれば、すべての環境を仮想化できることになるため、QEMUの使い方にお詳しい方がいらっしゃれば、是非ご教示いただきたい。
かなりの時間格闘したが、成功する起動コマンドがどうしても組めない。。。

ちなみに、皆さんのお役に立つ記事としたいため、分かりにくい部分などがあれば、是非ともご指摘・ご質問いただきたい。都度加筆修正するつもり。
小さな割り込みハンドラメモ

# 前提

- ただprintkするだけ
- ネットワークデバイス(ens33,12番)への割り込みを拾う

# コード

```c:irq.c
#include <linux/module.h>
#include <linux/init.h>
#include <linux/interrupt.h>

MODULE_LICENSE("Dual BSD/GPL");
const int IRQ_NUM = 12;
void *irq_dev_id = (void *)&IRQ_NUM;

irqreturn_t kure_isr(int irq, void *dev_instance){
        printk("kure_isr: %s: irq, %d dev_instance, %p \n", __func__, irq, dev_instance);
        return IRQ_NUM;
}

static int kure_init(void){
        printk("kure_init\n");
        int ret;
        ret = request_irq(IRQ_NUM, kure_isr, IRQF_SHARED, "kure", irq_dev_id);
        if(ret){
                printk("error\n");
        }
        return 0;
}

static void kure_exit(void){
        printk("kure_exit\n");
        free_irq(IRQ_NUM, irq_dev_id);
}

module_init(kure_init);
module_exit(kure_exit);
```

```file:Makefile
KERNEL_DIR = /lib/modules/$(shell uname -r)/build
BUILD_DIR := $(shell pwd)
VERBOSE   := 0
obj-m := irq.o
all:
        make -C $(KERNEL_DIR) SUBDIRS=$(BUILD_DIR) KBUILD_VERBOSE=$(VERBOSE) modules
clean:
        rm -rf  *.o *.ko *.mod.c *.symvers *.order .tmp_versions .helloworld.*
```

# 実行
```
# make
# insmod irq.ko
```
自力で機械学習の訓練画像データを収集する(Tumblr API 吉岡里帆編)

# はじめに
画像中にある物体認識の機械学習モデルを作成するに当たってまず必要になるのが大量の訓練画像の収集です。
犬や車といった一般的なものであれば[ImageNet](http://www.image-net.org/)などのサービスからダウンロードすることができますが、例えば日本の有名人の画像なんかはありません。
今回はTumblr APIを使って機械学習用の画像データを集める方法をご紹介します。

[Google Custom Search API　ピカチュウ編はこちら](http://qiita.com/kazuooooo/items/37abb45c7806dbe31f14)

# Tumblr API Keyを取得
1. まず[こちら](https://www.tumblr.com/)からアカウント登録をします。
2. 次に[こちら](https://www.tumblr.com/oauth/apps)にアクセスしてアプリケーションを登録します。

アプリを登録するをクリック
![Tumblr.png](https://qiita-image-store.s3.amazonaws.com/0/71154/c5b5423e-5dd1-55b7-5ad3-349ca25689ae.png)

次にアプリケーションの情報を入力していきます。
URL入力(アプリケーションウェブサイト, App Store URL, Google Play Store URL)が必須ですが実際にOauthのアプリを作るわけではないのでここは適当なURLで華麗にかわしてしまいます。(今回は自分が昔作ったアプリのURLを使いました)

![Tumblr.png](https://qiita-image-store.s3.amazonaws.com/0/71154/395bbd62-ab81-fb71-dcf0-055fe0cccc32.png)

そうするとこんな感じの画面が表示されるのでおもむろにExplore　APIをクリックします
![Tumblr.png](https://qiita-image-store.s3.amazonaws.com/0/71154/250fae2a-820a-b4aa-141b-4ff591e46022.png)

許可をクリック
![Tumblr.png](https://qiita-image-store.s3.amazonaws.com/0/71154/654fb9ad-bedf-b586-7773-535c673cf4db.png)

するとこんな画面になるので
右上のShowKeysをクリックします
![API_Console___Tumblr.png](https://qiita-image-store.s3.amazonaws.com/0/71154/2916a91f-9245-1712-4cc6-92ed59ffab13.png)

ここにAPIKeyが表示されます。今回欲しかったものはこれなのでメモっておきます。
![API_Console___Tumblr.png](https://qiita-image-store.s3.amazonaws.com/0/71154/3700b347-c122-5e4c-f9a7-f5fdedf35701.png)

# 実際に画像を取得する
では取得したAPI KEYを使って実際に画像を取得してみます。Tumblrは写真の投稿が多く、ピカチュウなどのキャラクターの取得には向かないようです。
ということで今回は最近人気の吉岡里帆さんの写真を取得します。
imagesというディレクトリに取得した画像が順次保存されます。
(参考: http://taka-say.hateblo.jp/entry/2016/12/19/235554)

```py
import requests
import time
import shutil

LOOP = 10
URL = 'https://api.tumblr.com/v2/tagged'
payload = {
    'api_key': 'YOUR API KEY HERE',
    'tag': '吉岡里帆'
}
image_idx = 0

photo_urls = []
for i in range(LOOP):
    response_json = requests.get(URL, params=payload).json()
    for data in response_json['response']:
        if data['type'] != 'photo':
            continue
        for photo in data['photos']:
            photo_urls.append(photo['original_size']['url'])
    if(len(response_json['response']) == 0):
        continue
    payload['before'] = response_json['response'][(len(response_json['response']) - 1)]['timestamp']

for photo_url in photo_urls:
    path = "images/" + str(image_idx) + ".png"
    r = requests.get(photo_url, stream=True)
    if r.status_code == 200:
      with open(path, 'wb') as f:
        r.raw.decode_content = True
        shutil.copyfileobj(r.raw, f)
      image_idx+=1
```

![3.png](https://qiita-image-store.s3.amazonaws.com/0/71154/b228e3d0-e72c-d105-4a42-acdf9bc859dd.png)
![12.png](https://qiita-image-store.s3.amazonaws.com/0/71154/cc5cbc00-c79b-f9c5-8388-559dbd5b9d60.png)
![29.png](https://qiita-image-store.s3.amazonaws.com/0/71154/1385f3d4-0313-6c58-e91c-58c5f4070b52.png)

はいこんな感じで画像がたくさん取得できました。可愛いですね！
MySQL tips - パスワードの指定

最近知って、よく使っている方法。事前にパスワードを設定する事で、起動時に要求されないようにする（そして警告を表示しない）方法です。

最初に、必要な値をすべて変数に設定しておきます。パスワードを読み込む場合には read コマンドに -s オプションを付けましょう。

```
$ read db_host
（データベースサーバ名）
$ read db_user
（データベースのユーザ名）
$ read -s db_pswd
（$db_userのパスワード）
$ read db_name
（データベース名）
```

こういうのを記述しておく設定ファイルを用意して、そこから読み出すようにしてもいいですね。
手段はともかく、変数に代入さえ出来れば、以降はこれらを参照してアクセスできます。
```
$ MYSQL_PWD=$db_pswd mysql -h$db_host -u$db_user $db_name
```

MYSQL_PWDを別に設定してもいい。

```
$ export MYSQL_PWD=$db_pswd
$ mysql -h$db_host -u$db_user $db_name
```

繰り返し起動する必要がある場合にも便利ですが、シェルスクリプトの中でも威力を発揮するでしょう。データベースが持っている値を取り出して、それを加工する場合など。
例えば、以下のようにパイプでつないでLinuxコマンドによる加工が簡単に出来ます。

```
MYSQL_PWD=$db_pswd mysql -h$db_host -u$db_user $db_name -sN -e"show tables;" | wc -l
```

やり方はいくつかあると思いますが、このようにMYSQL_PWD変数を利用するのが一番スマートと思います（mysqlコマンドがその為に用意している方法という意味で）

なお、シェルはbashです。言わずもがなですが。
raspberry pi で動かしてたお天気ツイート用ボットをAWS Lambda に移行した話

# お天気ツイートボット

raspberry pi で お天気ツイートボットを動かしてました。しかし、WiFiドングルの不調が続いてツイート信頼性が落ちてきたので、より安定したプラットフォーム無いかなぁということで、AWS Lambda を使う発想に至りました。

raspberry pi での構成はこんなかんじでした

![image.png](https://qiita-image-store.s3.amazonaws.com/0/12550/45831649-03ed-360a-b2ca-245c93c137b2.png)

cron で シェルスクリプト(twitter.sh)を定期実行しています。このシェルスクリプトの中では単に、bam-weather(バイナリファイル)を実行しているだけです。ツイート自身はbam-weatherで行います。ちなみに、bam-weatherはgolangで書かれています。

お天気ツイートボットのソースは以下に置いてあります。
https://github.com/bamchoh/bam-weather


それを今回はこんな感じにしました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/12550/4dcb5f0b-9d5a-2e42-8ac4-b7051048bcc4.png)

cron は CloudWatch Events で代替しました。Lambdaはgolangが実行できないみたいなので、javascript経由でバイナリファイルを実行することでbam-weatherを実行しています。そのjavascript の詳細は以下のサイトに記述されています。また、以下のサイトにはAWS Lambda 上で実行するgolangバイナリの作り方も書いてあります。

http://blog.0x82.com/2014/11/24/aws-lambda-functions-in-go/

構成としてはそんなに大したことはないのと、内容も他のブログポストの内容を見れば大体わかると思います。ここでは私が詰まったところをご紹介したいなと思います。

# AWS コンソールにログインできない問題

はい、Lambdaとは全然関係ないところで一番初めに躓きました。前回ログインしたタイミングでルートアカウントの二段階認証をONにしていたにもかかわらず、認証用デバイスを登録していなかったというわけのわからないことをしてしまい、ログインできないという致命的な問題にぶちあたりました。一応、サポートのサイトから問い合わせを送ることで解決したのですが、シアトルから電話がかかってきて、一瞬ビビりましたが、そこはサポートのサイトに書いてある通り「Please support Japanese.」とカタコトでしゃべったら、何かを察してくれたようで、日本のAWSカスタマーサポートから再度電話がかかってきて、事なきを得ました（札幌からかかってきてビビったのはまた別のはなし）

上記のようなトラブルにぶち当たったら、以下の記事を見ましょう。私は解決してから、この記事を見つけました。つらい。。。
http://qiita.com/saku/items/a6ea19ca0acddefda2e9

# バイナリ実行できない問題

zipアーカイブを上げて、保存してテストを実行すると何故かエラーに、ログを確認すると`Error: spawn EACCES`なるエラーが確認できました。`EACCES` ということはパーミッション関係かな？と思い、Lambda のロールの権限を変える方法を色々調べていたんですが、そういうことではありませんでした。原因は **Windows でバイナリファイルを作っていたから** でした。Windows は実行権限をバイナリファイルに付与できないので、Macを使ってバイナリを作成し、zipアーカイブすることで事なきを得ました。こんなところにもOS依存な問題があるとは。。。

# ログ吐けない問題

バイナリを実行するとまたエラーが、`open bam-weather.log: read-only file system` というエラーでした。そのままですね、bam-weather.log は作れないよって感じだと思います。しかたなく、logファイルに吐くのをやめて、標準出力に出すようにコードを変更しました。

https://github.com/bamchoh/bam-weather/commit/f8eb7eb815188ea9f413b0db4cd19b9152e4d6bb

# タイムゾーンが日本じゃない問題

テストを動かして、ツイート/トゥートされる様子を見れたので、その日は就寝。朝起きたときにちゃんとツイートされているかなー？とドキドキとワクワクが入り混じりながら床に就きました。朝起きると、ツイートはされてるんですが、日付が一日前。なんでだろうと考えていると、タイムゾーンを設定していないことに気付きました。(CloudWatch Events を設定するときもUTCで設定したのでピンときました)

調べると、以下の記事の設定をすればよさそうです。
http://qiita.com/nullian/items/39ecf1f6d0194b72e8e6

これは今日設定したばかりなので、明日に結果がわかりますが、おそらくこれで問題なく動き続けてくれるはずです。そうあってほしい。お願い！

# まとめ

私の知識の不十分さにより、この一週間ハマり通しでしたが、何とかツイートボッドをraspberry pi から AWS Lambda に移行することができました。単純な構成の中にも、色々な制約や知識が必要であるということを再認識させられる良い機会だったかな？とポジティブに捉えています。なんにせよ、楽しかったです。今後は何か色々なものをAWSを使って作っていけたらなぁと思います。また浮いたraspberry pi で何かしたいなぁとも思っていますので、その時はまたこちらで記事を書かせていただこうかな。ではまた。
List.jsで検索にhitした件数をHTMLに表示する

# この記事の概要
list.jsを使ってテーブルをインクリメンタルサーチをしたときの検索数を表示するサンプルです

## 使ったもの
List.js http://listjs.com/
jQuery（必須ではないです）

#本文
##まずはテストデータ
list.jsの本家からサンプルを頂戴する。

http://listjs.com/examples/table/

```html
<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Gustaf Lindqvist</td>
        <td class="born">1983</td>
      </tr>
    </tbody>
  </table>

</div>
<script src="//listjs.com/assets/javascripts/list.min.js"></script>
```

##スクリプトを書く
インクリメンタルサーチするフィールドを定義する。これもサンプルのまま。

```js
var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);
```

これで、1つのテキストフィールでテーブル内のnameとbornの値でフィルタするところまでは完成。

##スクリプトを改良する
先ほど作ったスクリプトに、本家のlist apiページにある on(event, callback) を追加する。第一引数のeventはlist.jsで定義されている文字列で、以下の中から選べる。

- updated
- searchStart
- searchComplete
- filterStart
- filterComplete
- sortStart
- sortComplete

今回はsearchComplete(検索完了時のイベント）を仕込んでみた。

```js
userList.on('searchComplete', function(a){
  $("#hits").html(a.matchingItems.length);
 });
```

これで、テキストボックスに文字を入れたり消したりしたときに、#hitsの値がこりこりと変わる。コールバックの中でHTMLを書き換えてるので、HTMLどこかにhitsの表示エリアを作っておく必要がある。


ページ表示したときに、全件の件数が出ないのが気に入らなかったので、以下も追加してみた。

```js
$("#hits").html(userList.size);
```

ということで、全体としては、こんな感じでしょうか。

```html
<span id="hits"></span><!--ここ追加。検索数が表示されるところ-->
<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Gustaf Lindqvist</td>
        <td class="born">1983</td>
      </tr>
    </tbody>
  </table>

</div>
<script src="//listjs.com/assets/javascripts/list.min.js"></script>

<script>
var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

//これ以降、サンプルに追加した部分
userList.on('searchComplete', function(a){
  $("#hits").html(a.matchingItems.length);
 });

$("#hits").html(userList.size);
</script>
```
修正版　ThermoMSで取得したrawデータを開く方法

       
#ThermoMSで取得したrawデータを開く方法
前回
http://qiita.com/gili/items/bb09f963ff996ea1521b
のものより少しだけスマートになったと思う（なったとは言ってない）。

Xrawfi2_x64.dllのインストールおよび参照の追加は前回通り。
予めフォームへファイルをD&Dで開けるように設定しておいたものを利用。

```        
// 
  private void textBox1_DragDrop(object sender, DragEventArgs e)
        {
            MSFileReader_XRawfile rawfile = new MSFileReader_XRawfile();

　　　　　　string[] fileName = (string[])e.Data.GetData(DataFormats.FileDrop, false);
            rawfile.Open(fileName[0]);
	  //MSモードにする
            rawfile.SetCurrentController(0, 1);

```        
 rawデータを開き、SetCurrentController(0, 1)でMSデータを読み込めるようにする。

```        

            int totalscannum = 0;
            double lowmass = 0;
            double highmass = 0;
            double massresolution = 0;

            string MSname = null;
            string MSmodel = null;
```        

ここら辺は必要に応じて初期化
MS情報はrefで取得

```        
            rawfile.GetNumSpectra(ref totalscannum);
            rawfile.GetLowMass(ref lowmass);
            rawfile.GetHighMass(ref highmass);
            rawfile.GetMassResolution(ref massresolution);

            rawfile.GetInstModel(ref MSname);
            rawfile.GetInstName(ref MSmodel);

            double ProfilePeakWidth = 0.0;
            object MassList = null;
            object PeakFlags = null;
            int ArraySize = 0;
            int ArraySize2 = 0;

            object MassList2 = null;
```        

fullmass分析時にあらかじめm/z配列長を取得prescanを取っておくと便利な時がある

```        

            rawfile.GetMassListFromScanNum(1, null, 1, 0, 0, 0, ref ProfilePeakWidth,
            ref MassList, ref PeakFlags, ref ArraySize);

            double[,] mslist = (double[,])MassList;
            int prescan = mslist.GetLength(0);

```        
FullMSスキャンの時は配列をあらかじめ決め打ちできるので
下のやり方で問題ない。
MS/MS等を行うときは別途配列の初期化が必要。

```        

            double[, ,] array3d = new double[totalscannum, 2, mslist.GetLength(1)];


            for (int d1 = 1; d1 < totalscannum; d1++)
            {
                for (int d2 = 1; d2 < mslist.GetLength(1); d2++)
                {
                    long d3 = d2 - 1;

                    rawfile.GetMassListFromScanNum(d1, null, 1, 0, 0, 0, ref ProfilePeakWidth,
                    ref MassList2, ref PeakFlags, ref ArraySize2);

                    double[,] mslist2 = (double[,])MassList2;

                    array3d[d1, 0, d2] = mslist2[0, d3];
                    array3d[d1, 1, d2] = mslist2[1, d3];

                }
            }
        }
```

クロマトデータとMSデータを一緒にしているけれど、
必要がなければMassList2だけで十分な情報が得られるはず。
Docker コンテナ上で Puppeteer を動かす

# 追記

この記事は 2017/08 に投稿したもので、内容が古くなっています。
現在 (2019/02/04 (月) 時点) は公式リポジトリで Docker で動かす方法が紹介されているため、それを参考にするのが最良だと思います。

* [GoogleChrome/puppeteer » Troubleshooting » Running Puppeteer in Docker](https://github.com/GoogleChrome/puppeteer/blob/v1.12.1/docs/troubleshooting.md#running-puppeteer-in-docker)

# はじめに

最近 [Puppeteer](https://github.com/GoogleChrome/puppeteer) を触るのにハマっています。これはヘッドレス Chrome を Node.js で操作することのできるライブラリです。この Puppeteer を Docker コンテナ上で動かせれば、様々な環境でブラウザを操作できて便利そうだなと思い、試してみました。

# 方法

公式リポジトリ [GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer) の README.md にあるサンプルプログラムを少しだけ編集したものを Docker コンテナ上で動かすことを想定します。Docker イメージには `node:8.4.0` を使用します。

まず、サンプルプログラムを用意し `puppeteer.launch()` の引数だけ次のように変更します。[Linux SUID Sandbox](https://chromium.googlesource.com/chromium/src/+/lkcr/docs/linux_suid_sandbox.md) 環境ではエラーとなって動作しないためです。

```script.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  browser.close();
})();
``` 

次に `Dockerfile` を用意します。

```Dockerfile
FROM node:8.4.0

RUN apt-get update \
 && apt-get install -y \
      gconf-service \
      libasound2 \
      libatk1.0-0 \
      libc6 \
      libcairo2 \
      libcups2 \
      libdbus-1-3 \
      libexpat1 \
      libfontconfig1 \
      libgcc1 \
      libgconf-2-4 \
      libgdk-pixbuf2.0-0 \
      libglib2.0-0 \
      libgtk-3-0 \
      libnspr4 \
      libpango-1.0-0 \
      libpangocairo-1.0-0 \
      libstdc++6 \
      libx11-6 \
      libx11-xcb1 \
      libxcb1 \
      libxcomposite1 \
      libxcursor1 \
      libxdamage1 \
      libxext6 \
      libxfixes3 \
      libxi6 \
      libxrandr2 \
      libxrender1 \
      libxss1 \
      libxtst6 \
      ca-certificates \
      fonts-liberation \
      libappindicator1 \
      libnss3 \
      lsb-release \
      xdg-utils \
      wget

WORKDIR /app
RUN npm i puppeteer

COPY ./script.js .

ENTRYPOINT ["node", "/app/script.js"]
```

`apt-get` コマンドでインストールするライブラリについては [Puppeteer » Troubleshooting](https://github.com/GoogleChrome/puppeteer/blob/6fcf3d914845b9271548826151199c358a25b558/docs/troubleshooting.md) の Debian Dependencies を参考にしました。このドキュメントでは前述の `puppeteer.launch()` の引数についても言及されています。

あとは `docker build` ならびに `docker run` を実行すれば OK です。サンプルプログラム実行時に撮影されたスクリーンショットの画像ファイル `example.png` が `docker run` を実行したディレクトリに配置されていれば成功です :tada:

```bash
$ docker build -t puppeteer .
$ docker run --rm -it -v $(pwd):/opt/data-volume -w /opt/data-volume puppeteer
$ open example.png
```

![スクリーンショット 2017-08-31 21.28.40.png](https://qiita-image-store.s3.amazonaws.com/0/6697/b4184dba-aa78-7cd4-094d-b0228a4901a5.png)

# 参考

* [Puppeteer » Troubleshooting](https://github.com/GoogleChrome/puppeteer/blob/6fcf3d914845b9271548826151199c358a25b558/docs/troubleshooting.md)
* [Puppeteer » Issue #290 » Chrome Headless doesn't launch on Debian](https://github.com/GoogleChrome/puppeteer/issues/290)