OmniAICreator/Qiita-1.07M huggingface dataset:
CSVを値をオブジェクトに設定するときのプラクティス

CSVを読み込んで、その値を1レコードに1オブジェクトに保持させたいときがあります。
たとえば、

```csv:tokyo.csv
千代田区,ちよだく,Chiyodaku
中央区,ちゅうおうく,Chuoku
港区,みなとく,Minatoku
新宿区,しんじゅくく,Shinjukuku
文京区,ぶんきょうく,Bunkyoku
台東区,たいとうく,Taitoku
墨田区,すみだく,Sumidaku
（以下略）
```
を1行ずつ処理しようとすると、こんな感じになるかと思います。

```java:TokyoWard.java

public class TokyoWard {

	private String kanji;

	private String kana;

	private String roman;

	public TokyoWard(String line) {
		String[] columns = line.split(",", -1);
		this.kanji = columns[0];
		this.kana = columns[1];
		this.roman = columns[2];
	}
}
```
```java:Main.java
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;

public class Main {

	public static void main(String[] args) throws IOException {
		for (String line : Files.readAllLines(Paths.get("../tokyo.csv"))) {
			TokyoWard ward = new TokyoWard(line);
		}
	}
}
```
`TokyoWard`のコンストラクタで、インデックスを指定してカラムを取り出しています。
しかしこれだと、CSVのカラムの順序が入れ替わったときに、インデックスを修正する必要があります。

```csv:tokyo.csv
千代田区,ちよだく,Chiyodaku
中央区,ちゅうおうく,Chuoku
```
が

```csv:tokyo.csv
ちよだく,Chiyodaku,千代田区
ちゅうおうく,Chuoku,中央区
```
に変わると、プロパティへの設定箇所も、以下のように変わります。

```java:TokyoWard.java
	public TokyoWard(String line) {
		String[] columns = line.split(",", -1);
		// this.kanji = columns[0];
		// this.kana = columns[1];
		// this.roman = columns[2];

		this.kanji = columns[2];
		this.kana = columns[0];
		this.roman = columns[1];
	}
```
３カラムくらいだと配列のインデックス修正もかわいいもんですが、何十とカラムのあるCSVだと割と手間です。
さらに実際には、可読性を考慮して、コードの順序も変更します。
CSVのカラムの順序と一致していたほうがわかりやすいですからね…

```java:TokyoWard.java
	public TokyoWard(String line) {
		String[] columns = line.split(",", -1);
		// this.kanji = columns[0];
		// this.kana = columns[1];
		// this.roman = columns[2];

		// this.kanji = columns[2];
		// this.kana = columns[0];
		// this.roman = columns[1];

		this.kana = columns[0];
		this.roman = columns[1];
		this.kanji = columns[2];
	}
```

そこで、どうせCSVのカラムの順序に合わせたコーディングをするのなら、CSVのカラムの順序とプロパティの設定順序を一致させてしまえばいいのでは？と考えたのがこちら。

```java:TokyoWard.java
	public TokyoWard(String line) {
		String[] columns = line.split(",", -1);
		int index = 0;
		this.kana = columns[index++];
		this.roman = columns[index++];
		this.kanji = columns[index++];
	}
```

こうすることで、

- マジックナンバーを最小限に抑えられる（`int index = 0`のみ）
- CSVのカラムの順序が変わっても、その順序変更に合わせてコードの順序を変えるだけで良い（インデックスを一つ一つ書き換える必要がない）

というようなメリットがあります。
外部ファイルとコードが密結合チックになっちゃうのは気になりますが…。
もっと良い方法があるのかなあ。
Python画像処理

#はじめに
SLP KBIT Advent Calendar 2018の記事です。
期間まで時間がなかったので簡単にできそうな画像処理をしました。
Pythonのライブラリpillowを使いました。
###環境
-Python 3.7.1
#画像処理

```img.py
from PIL import Image 

#画像の名前を入力する
original = input("画像の名前を入れる>>")
#元となる画像
image = Image.open(original)
#画像を8ビット/256階調グレースケールにし、オリジナルの名前＋-grayscale.jpgで保存する
image.convert("L").save(original+"-grayscale.jpg")
```
カラーの画像を256階調の白黒に変更します。
###実行する
例に使う画像はイケてる写真
<img src="https://qiita-image-store.s3.amazonaws.com/0/309116/f1c4caf6-07d9-849b-0a94-76ea79e92c11.jpeg" width=60%>
```
画像の名前を入れる>>イケてる.JPG
```
これで実行すると
<img src="https://qiita-image-store.s3.amazonaws.com/0/309116/18b34522-24f7-a18a-bfd8-d872c9ad5017.jpeg" width=60%>
こんな感じで256階調の白黒になる。
#最後に
頑張った自分にスタンディングオベーション
マークアップエンジニアが制作開始前に確認しておきたいこと。〜制作仕様編〜

マークアップエンジニアなみなさんがコーディングを始める際に、事前に必ず確認することってありますよね。

・どんな条件のもとで作っていくべきなのか
・デザインカンプからどう作っていくか
etc…

クライアントからの要求・要望を形にしていくために、確認することがたくさんある！！
制作途中で「これ確認したっけ？漏れてた:fearful:」「事前に確認しておくべきだった:scream:」
となってしまうと、時間のロスや取り返しのつかない事態になる可能性も…

そうならないために、事前に確認すべき項目をチェックしておきましょう。

今までの制作を振り返ってポイントとなる項目をピックアップしてみます。

#サイト制作要件（仕様）
クライアント側に制作のガイドラインが定まっている場合は、それに従って制作していく必要があります。
例えば、
- コンテンツ幅の制限
- ターゲットブラウザの指定（ない場合はこちらで用意します）
- テンプレート（ヘッダー・フッターなど）の共通データの有無
など。

#ディレクトリ構成及び公開URL
階層の違いでパスの指定が変わったり、
フォルダ名、ファイル名を制作途中で変更することはミスる可能性が高いです。
確定した内容で進めていきたいところ。

#WEBフォント
WEBフォントは使う？
どのWEBフォントを使う？
- Google
- TypeSquare
- フォントデータをサーバに置く
etc…
実際の表示確認（テスト環境での確認）をどうする？

#GoogleMap
GoogleMapを設置する際には、課金アカウントを有効にするか否か。
どんな機能をもたせたいのか？
それによって実装工数がかなり変わってきます。
APIキーの取得はクライアントに行ってもらう。

#動画
動画を使う場合は
- YouTube
- mp4
- その他
実装方法が変わってきます。
また、JavaScriptで操作が必要な場合も実装方法・工数も変わってきます。

#レスポンシブ
実は意外な盲点。
レスポンシブが当たり前ではなく、PC,SP別で作成する案件もあります。
（一度PC、SP別で作った後に実はレスポンシブだった！ということがあり、闘志を燃やしたことがあります。事前確認では別。という話だったのだけどね…）

#システムが絡む案件
フロントでもバックエンドでもどちらでも実装可能というグレーゾーンに対して、
フロントで実装するのはどこまでなのか？切り分けをハッキリとさせておく。

#GAなど解析タグ
解析に伴う特別な実装はあるか
（例：クリック、スクロールでの取得など）

#納品方法
弊社でサーバーにアップするのか、またはデータ納品なのか。
前者の場合、サーバー情報をください。

-------------------------

以上、思いついた限りをピックアップしてみました。
これらを事前に確認しておくことで、制作に専念できるかとおもいます。

他にもこれ確認したほうがいいんじゃない？というものがありましたらこっそりと教えていただけると嬉しいです。
GKEのCronJobでバッチを回そうとしたらハマった話

# はじめに
GKEでCronJobを使おうとしたのですが、接続用のCloudSQLProxyのコンテナがうまく落ちなくてこまっていました。
そもそも1バッチ動かすためのpodの中にバッチを動かすアプリケーションコンテナと、CloudSQLProxyコンテナが動いていたため、podの使用cupリクエストは200mとなかなかかさむなぁとおもっていたのです。

そこでGCPの人とちょっと話たところ、CloudSQLはプライベートIPに対応したとのことで、GKEからCloudSQLへプライベートIPで接続を試してみたところだいぶスッキリしたので記載しておきます。

>CloudSQLのプライベートIPは2018/12/12現在ベータ版です
ご了承の上お使いください


# CloudSQLのプライベートIPを有効にする

![181212-0001.png](https://qiita-image-store.s3.amazonaws.com/0/42874/32eb82fc-52d6-2085-1b60-25450e7de1d8.png)

プライベートIPにチェックをつけて自動割り当てボタンをおします。
それが終わったら保存します。完了までに数分かかります。

> ※1 プライベートIPはCloudSQL第二世代じゃないと使えません
> ※2 GKEのリージョンと同じリージョンである必要があります。
> ※3 GKEのバージョンは1.8以上である必要があります。

参照
https://cloud.google.com/sql/docs/mysql/private-ip

## 出来上がったプライベートIPをメモっておきます
![181212-0002-2.png](https://qiita-image-store.s3.amazonaws.com/0/42874/7e222441-6d38-248e-313b-2fd3c7b81e19.png)


# アプリ側の接続をCloudSQLProxy経由からプライベートIPに変更します

```yaml:deploy.yaml
apiVersion: batch/v1beta1
kind: CronJob
metadata:
  name: cron-batch
spec:
  schedule: "*/5 * * * *"     # <=テストのため5分ごとに走らせる
  failedJobsHistoryLimit: 1
  successfulJobsHistoryLimit: 1
  jobTemplate:
    spec:
      template:
        metadata:
        spec:
          containers:
            - name: cron-batch
              image: [イメージ名]
              command: [コマンドは適当にSQLへの接続があるものを指定]
              env:
              - name: MYSQL_DSN
                value: [プライベートIP] # <= 元はプロキシ接続だったので、127.0.0.1だったはず！これをプライベートIPに変更
              - name: MYSQL_USER
                valueFrom:
                  secretKeyRef:
                    name: cloudsql-db-credentials
                    key: username
              - name: MYSQL_PASSWORD
                valueFrom:
                  secretKeyRef:
                    name: cloudsql-db-credentials
                    key: password
              - name: MYSQL_DATABASE
                value: ******
```

アプリケーション側へのホストの渡し方はこれに限ったことではないので、ご自身のプロジェクトに合わせてください

# これで繋がるかとおもったらSQLSTATE[HY000] [2002] Operation timed out"といわれた

なぜか、、

![181212-0003-2.png](https://qiita-image-store.s3.amazonaws.com/0/42874/9dba938f-51cd-1de8-6468-f08f25ed61bd.png)

VPCネイティブはGKEクラスタの作成時にチェックをつけることで有効にできます。
<img width="1804" alt="181212-0004.png" src="https://qiita-image-store.s3.amazonaws.com/0/42874/b7af71eb-4bd6-58a3-854e-c8ba89b5747a.png">

私は無効で作成してしまっていたので、クラスタを作り直しました
これで無事CronJobがSuccessedになりました。めでたしめでたし

![181212-0005-2.png](https://qiita-image-store.s3.amazonaws.com/0/42874/fb425a8e-2d53-860c-047c-229e5e30a8db.png)


# 参考
https://medium.com/@rohitgoyal/use-google-cloud-managed-postgres-with-kong-ce-a3d749be2da3

https://cloud.google.com/sql/docs/mysql/private-ip
【Swift】UIStackViewをスクロールさせる

投稿6回目。
最近はポケモンカードに夢中になってなかなか勉強できていません。
心改めて意識的に学習に取り組んでいきましょう。

# 本題です
StackView便利ですよね。レイアウト組むとき、制約つけるのなんか難しい＞＜
ていう意識のある人にとっては、とっても重宝されるものかと思います。
自分もStackView大好きでよく使っているのですが、StackViewを使っていると「StackViewをスクロールさせたい」と思う場面があると思います。
スクロールといえばUIScrollViewですが、UIScrollViewていうのはそもそも制約の付け方に一癖ある代物。そんなScrollViewと、AutoLayoutへの理解に横着したものが愛用するStackViewを組み合わせるのは、おそらく結構な冒険。。
やってみたところ案の定制約の付け方でつまづいたところがあったので、この度メモ書きとして記事に残しておこうと思いました。
「縦スクロールするStackView」を作るまでの手順に沿って、説明していきます。

# １.ViewControllerにScrollViewを配置する
ViewController内にScrollViewを配置しましょう。
で、ScrollViewに`親ビューに対して上下左右スペース０`の制約をつけます。
これで画面いっぱいにScrollViewが広がることになります。

スクロールさせたいコンテンツはこのScrollView内に配置していけばOkてことっすな。

# 2.ScrollViewにStackViewを配置する
ScrollView内にStackViewを配置しましょう。
で、StackViewに`親ビューに対して上下左右スペース０`の制約をつけます。
これでScrollViewいっぱいにStackViewが広がること... **にはなりません！**
 
【ポイント】
ここで意識しておきたいのが、ここでつけた制約は親ビューであるScrollViewに対してではなく **ScrollViewのContentSizeに対してつけられた** ということです。（表現として完全に適切ではなさそうですが。。）

（ContentSizeについては[こちら](https://qiita.com/malt/items/6468921e57a30594d037)の記事に詳しく書いてあったのでご参照ください。）

StackView に`上下左右スペース０`つけたとして、StackViewのサイズと親ビューScrollViewのサイズとが同じになるというわけではなく、StackViewのサイズと　**ScrollView.contentSizeとが** 同じ大きさとなります。ScrollView.contentSizeの大きさは子ビューの大きさが決まらないと決まりません。

ので、`上下左右スペース０`の制約をつければ親ビューの画面いっぱいに広がる！という考え方は、親ビューがUIScrollViewの場合通用しません！＞＜
必ず子ビュー（ここでいうStackView）のサイズを決めなければ全体のサイズが決まらず、制約の付け方が不十分であるという旨の赤い警告が表示されるはずです。

めっちゃややこしいですが、一応これでStackViewのサイズに合わせてScrollView.contentSizeの大きさも変わるようにはなりました。
つまり、StackViewの大きさがScrollView自体の大きさを超えている場合、StackViewの大きさに合わせてScrollView.contentSizeの大きさも広がり、ちゃんとスクロールできるようになったよ。ということですわ。

では、次のステップでStackViewの大きさがちゃんと決まるようにしていきましょう。

# 3.StackViewにView(Labelなんか)を配置する
StackView内に、レイアウトしたいLabelなんかをいろいろ配置しましょう。
で、StackViewのAxis(今回は縦スクロールなのでvertical)やAlignmentやDistributionなんかの設定をいろいろ決めてあげます。
SackViewについては[こちら](https://qiita.com/kinopontas/items/d08f84dbb711c5acbe28)に詳しく書いてあったのでご参照ください。
これでStackViewいっぱいにいい感じにViewたちが配置されます。

中身のViewたちの大きさが決定すれば、それによってStackViewの大きさも決定します。
UILabelなんかは特別制約を設定しなくても、フォントや行数によって大きさが決定するViewなので、StackViewにそのまま突っ込んでやるだけで、前のステップで出ていただろう制約に関する警告は消えてくれるはずです。
めでたしめでたし。

# 4. StackViewの幅調整
ここまででで、

- StackViewの中身が大きくなったら、それに伴ってStackViewも広がってくれるようになりました。
- そしてさらにそれに伴ってScrollView.contentSizeも広がってくれるので、StackViewの大きさが画面サイズからはみ出すくらいになってもちゃんとスクロールしてくれるようになりました。
- いい感じ。

しかしまだ不十分な部分があります。
（ここが、はじめに言ったつまづいた部分でもあります。）

今回作るスクロールビューは縦スクロールの設定なのに、ここまでのやり方だとStackViewが横に大きくなってしまった場合におかしくなります。横幅はきっちり画面幅に合わせておきたい。。
ステップ２でStackViewに`上下左右スペース０`の制約をつけたのだから、横幅は親ビューであるScrollViewと同じになってるでしょ？横には広がらないよ？
と、思うかもしれません。いやいや、思い出してください。

ステップ２で
> StackViewのサイズと親ビューScrollViewのサイズとが同じになるというわけではなく、StackViewのサイズと　**ScrollView.contentSizeとが** 同じ大きさとなります。

と言ってたところですね。
**StackViewの横幅はScrollViewと同じにはなっていません。**
StackViewに`上下左右スペース０`の制約をつけることによって実現するのは、StackViewの大きさ（StackViewの中身によって広がった大きさ）に合わせてScrollView.contentSizeが決まるということだけです。

ので、StackViewの横幅がScrollView自体の横幅より大きくなってしまわないように、**StackViewに対して** `width = 親ビューのwidth`の制約をつけてあげる必要があります。
ここまでやってあげれば完璧です。b

# 結
だんだん記事が雑になってきてる気がしますね。。
わかりにくかったらすみません。もしお役に立てていたら何かしら反応いただけると嬉しく思います。
目指せ最速開通！Stripeすぐに開通します！って言うからタイムトライアルしてみた

Stripe Advent Calendar 2018の13日めです！
https://adventar.org/calendars/3096
温めてたネタが孵らなかった（調査不足…）ので、基本的な所をお届けします！笑

ECな商談の際、カード決済の話は後日にしましょうか・・・となりがちですよね？
一般的なカード決済なら申請してから本人確認などで２～４週間程かかってしまうのが常識でしたが、
Stripeなら、速攻で本番環境まで開通させることが可能です！

で、よくどれだけスムーズに審査を通過（開通）するのか聞かれるのですが、公式にありましたので以下引用。
>[Stripe Support]審査にはどれくらいの期間がかかりますか？
>すぐに使えます！アカウントの申し込みを提出するとすぐに、決済の受付を開始できます。
via https://support.stripe.com/questions/jp-how-long-is-the-approval-process

と、いうわけでどれだけスピーディーに審査が通るか、他のお客様案件で新規アカウントを開設する機会がありましたので、動画でキャプりながら試してみました。（事前準備なし感ハンパないですがお許しを。。。）

#[0：00-0：30]メールアドレス、氏名、パスワードを入力
![image.png](https://qiita-image-store.s3.amazonaws.com/0/76660/d237e3f7-f233-22fc-db1e-368125e39fa3.png)


#[0：47]管理ダッシュボードにログイン
この時点で即ダッシュボードがお目見えです。管理画面を見せるまでなら秒で行ける！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/76660/41e6d96f-decc-181c-a776-16d165097aad.png)

#[0：47-5：45]ビジネス設定などを入力
企業情報やメール、電話番号の設定でSMSやメールを経由しながら確認作業を行います。
カード情報などご準備いただければスムーズでしょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/76660/eb95cdbe-3d0f-4498-6517-70235c163311.png)

#[5：45-11：10]本番環境利用の申請
この時点で、すでにテストデータでの決済が可能になっています。
テストモードの公開キーとシークレットキーがあればテスト決済可能です。
コンプライアンス関連の質問、拠点の情報入力、販売する商品の説明など入力します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/76660/5d1a6c91-a438-5039-99b5-f45459b1a8ab.png)

#[11：10]本番環境申請完了！

15分とは掛かりませんでしたね。ここからECサイトへの設定をすれば実際のクレジットカードで決済します。
テストモードで決済してもいいですが、本番モードで少額決済し、Stripeの管理画面から返金など試してもいいのではないでしょうか？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/76660/8d97a0a3-77be-0e90-00f8-084b48b4b7d7.png)

https://support.stripe.com/questions/jp-why-do-i-need-to-upload-a-scan-or-photo-of-my-passport-or-driver-s-license
こちらにあるように政府発行の身分証明書のスキャンや写真をアップロードをリクエストする場合があるとも書いてありましたが、今回は聞かれず。（他のお客様では提出した記憶がうっすらですが・・・）

と、いうわけで本番環境開通まで**11分10秒！**これまで数週間待たされていた事を思えば相当ストレスフリー！
すぐに始められるという魅力はかなりイイ！と個人的に思います。

ライトな内容で恐縮ですが、次にバトンを回します！
（※この情報は2018/12/12時点での情報です）
コードカバレッジを見つつユニットテストを書く

# 対象読者

Kotlinで開発しているAndroidエンジニア

# はじめに

みなさん、ユニットテストは書いてますか？
コードカバレッジはどうでしょうか？

# コードカバレッジとは？

ソースコードのテストされた割合です。
測定手法がいくつかありますが、今回は2つだけご紹介します。

## 命令網羅(C0)

ソースコードの **各文** が実行されているかどうか。


```kotlin
fun hoge(x: Int) {
    println("hoge")
    if (x > 0) {
        println("fuga")
    }
}
```

`hoge(x = 1)` だけで **C0:100%**

## 分岐網羅(C1)

ソースコードの **各条件** が実行されているかどうか。

```kotlin
fun hoge(x: Int) {
    println("hoge")
    if (x > 0) {
        println("fuga")
    }
}
```

`hoge(x = 1)` と `hoge(x = 0)` で **C1:100%**

# コードカバレッジ、何か嬉しいことがあるの？

ユニットテストが充分か？の判断基準の一つとして使えます。
例として、既存コードのリファクタリングを考えてみます。

## 既存コード

```kotlin
fun hoge(x: Int): String {
    if (x >= 3) return "many"
    if (x == 2) return "two"
    if (x == 1) return "one"
    if (x == 0) return "zero"
	return "other"
}
```

## ユニットテストを書く

```kotlin
@Test
fun hogeTest() {
    assert(hoge(3) == "many")
    assert(hoge(2) == "two")
    assert(hoge(1) == "one")
    assert(hoge(0) == "zero")
}

```

でも、このユニットテストで充分なのだろうか･･･？:thinking:

そこでコードカバレッジ！

## コードカバレッジを計測する方法

* Android Studio
* **JaCoCo** :arrow_left: 今回はこちらをご紹介
* Other...?


### JaCoCoの準備


デフォルト設定だと、
Kotlinが計測対象になりません:scream:

[arturdm/jacoco-android-gradle-plugin Issue 37](https://github.com/arturdm/jacoco-android-gradle-plugin/issues/37) の [JaCoCoの設定](https://gist.github.com/almozavr/3cd46c4b4f0babbfc136db91924ab56e) を参考にすればOK :muscle:

※上記の設定は build variants も考慮されていてステキ :pray:

## カバレッジ結果をみてみる:eyes:

`$ gradlew jacocoDebugReport` 実行後に、

`app/build/reports/jacoco/jacocoDebugReport/html/index.html` を開きましょう。

### アプリ全体のレポート
![report_index.png](https://qiita-image-store.s3.amazonaws.com/0/24788/a3241898-05bc-9623-2e31-264aaa398a45.png)

### クラスごとのレポート
![report_all.png](https://qiita-image-store.s3.amazonaws.com/0/24788/4acf5b43-01b6-b6bf-3b60-c256b6153d08.png)

### クラス内の各関数ごとのレポート
![report_hogeKt.png](https://qiita-image-store.s3.amazonaws.com/0/24788/44ffb47d-3fa5-bd02-f8ee-654aea620614.png)


### ソースコードレベルのレポート
![report_hoge1.png](https://qiita-image-store.s3.amazonaws.com/0/24788/5586bced-b4eb-234a-5c51-dca560587052.png)

緑：分岐網羅 OK
黄：分岐網羅 NG（片方の分岐しか実行されてない、など）
赤：一度も実行されていない

## テストコードを足す

カバレッジレポートを見たところ、ユニットテストに不足があることがわかりました。
テストコードを追加しましょう。

```kotlin
@Test
fun hogeTest() {
    assert(hoge(3) == "many")
    assert(hoge(2) == "two")
    assert(hoge(1) == "one")
    assert(hoge(0) == "zero")
    assert(hoge(-1) == "other") // ★追加テストコード
}
```

### 無事、カバレッジ100% :tada:
![report_hoge2.png](https://qiita-image-store.s3.amazonaws.com/0/24788/32d8d866-cad7-ef61-3669-3e6351ee5515.png)

これで、ある程度信頼できるユニットテストができました。
なので、リファクタリングも怖くありません。


## Kotlinっぽくしてみる

```kotlin
fun hoge(x: Int): String =
    when {
        x >= 3 -> "many"
        x == 2 -> "two"
        x == 1 -> "one"
        x == 0 -> "zero"
        else -> "other"
    }
```

![report_hoge3.png](https://qiita-image-store.s3.amazonaws.com/0/24788/14223bf4-60ab-d156-a394-f16edadc27eb.png)

分岐網羅100%＆ユニットテストも通っているので、大丈夫そうです。

# 補足

* カバレッジ100%だからユニットテスト完璧、ではない
  * でも、判断基準の一つとして使えます
* カバレッジ100%必達では無い
  * 例えばユニットテスト書きづらいところは、手動で確認しても良いと思います
[関数系] sys_get_temp_dir, tmpfile の仕様

# 概要

標準関数 sys_get_temp_dir と tmpfile の挙動について困ったことがあったため、いろいろ調べてみた。

# 前提

OS: CentOS
ミドルウェア: apache
PHP: 5系

# 内容

## sys_get_temp_dir()

こちらはシステムの一時ファイル置き場とするディレクトリを取得する関数。
では、一時ファイル置き場となるディレクトリは、設定できるのか。
これが気になったので、調べてみた。


### 調査結果

変えられる。


#### 環境変数による変更


以下の環境変数のいずれかを設定することによって、修正可能。
数字は優先度。TMPが設定されていたら、 TMPDIR と TEMP は無視される。

1. $_ENV['TMP']
2. $_ENV['TMPDIR']
3. $_ENV['TEMP']

```php:TMPが設定されていない場合(linux)
<?php
var_dump(sys_get_temp_dir());

// 結果　=> /tmp
```

```php:TMPが設定されていない場合(linux)
<?php
// $_ENV['TMP'] → ~/tmp
var_dump(sys_get_temp_dir());

// 結果 => ~/tmp
```

などといった挙動となる。
またこれに伴い、tmpfile() も挙動が変更される。

## tmpfile()

tmpfile() は公式ドキュメントにも記載がないが、
sys_get_tmp_dir で取得できるディレクトリに一時ファイルを作成するように動いている模様。
そのため、環境変数を設定すると、この関数の挙動も変更できる。


```php:環境変数の変更がない場合
<?php
var_dump(tmpfile());
// 結果 => ~/tmp/phpS76qDj
```

```php
var_dump(tmpfile());
// 結果 => ~/tmp/phpS76qDj
```
Turnipで書いたfeatureにパスに応じて異なるtypeをつける方法

この記事は[Okinawa.rb Advent Calendar 2018](https://qiita.com/advent-calendar/2018/okinawarb)の12日目の記事です。
昨日は @hanachin_ さんの[定数の名前を書き換えloadするimport_as gemの紹介](https://qiita.com/hanachin_/items/c3c513b1215de18b62f3)でした。
明日は @hanachin_ さんの[RubyでJavaScriptのTemplate literalsの真似をする](https://qiita.com/hanachin_/items/f1f822ff2ecd5f384eca)です。

## Turnipで複数のtypeのfeatureを書くサンプルアプリケーション

リポジトリは以下です
https://github.com/hanachin/turnip_example

以下の2つのTurnipのテストがあります。

- spec/models/article.feature: `metadata[:type]`が`:model`のmodel spec
- spec/system/article.feature: `metadata[:type]`が`:system`のsystem spec

## Turnip.typeは常に1つ

Turnip.typeを設定するとTurnipのexampleのmetadataのtypeを変更することが出来ます。
でも、Turnip.typeは1つしか設定できない!

例えばmodel specもsystem specもGherkinで書きたくなったときに困ります

## どうやってTurnipのexample groupに対して異なるtypeを設定するか

[define_derived_metadata](https://www.rubydoc.info/github/rspec/rspec-core/RSpec/Core/Configuration:define_derived_metadata)をつかうと上書きできます！べんり！

例えば`spec/models/article.feature`のtypeをmodelに変更するには以下のように`file_path`オプションにfeatureにマッチするような正規表現を指定して、`metadata[:type]`を上書きします。

```rb
RSpec.configure do |config|
  config.define_derived_metadata(:file_path => %r{/spec/models/.*.feature}) do |metadata|
    metadata[:type] = :model
  end
end
```

モデル以外のfeatureはsystem specとして動かしたい場合は以下のようにデフォルトの`Turnip.type`を`:system`に設定し、`spec/models`以下のfeatureのtypeを`:model`に設定するといいです。

```rb
Turnip.type = :system
RSpec.configure do |config|
  config.define_derived_metadata(:file_path => %r{/spec/models/.*.feature}) do |metadata|
    metadata[:type] = :model
  end
end
```

## まとめ

- `Turnip.type`を使うとTurnipのexample groupoのtypeを設定できる
- `Turnip.type`は1つしか設定できない
- `define_derived_metadata`を使うとパスに応じてmetadataを書き換えられる

それでは、よいTurnipライフを〜 :hibiscus:
アジャイル開発で取り組んでいることそのに


こんにちは♪前回もアジャイル開発で取り組んでいることとして
「ドラッカー風エクササイズ」をご紹介しました。
今回は「インセプションデッキ」についてお話したいと思います！

## ？インセプションデッキとは
メンバー全員で、プロジェクトに関わる10の設問の
回答を模索していくことで、認識を合わせることができる取り組みです。
さらに、この回答をクライアントに提示すれば
お客様とも認識があっているか、確認ができるというもの！

>①我々はなぜここにいるのか？
②エレベーターピッチを作る
③パッケージデザインを作る
④やらないことリストを作る
⑤「ご近所さん」を探せ
⑥解決案を描く
⑦夜も眠れなくなる問題はなにか？
⑧期間を見極める
⑨何をあきらめるのかをはっきりさせる
⑩何がどれだけ必要なのか？

①～⑤はプロジェクトの全体像をとらえ
⑥～⑩は具体的な解決案を考えていく設問です。

このインセプションデッキは数日から2週間程度をかけて
行うのが理想とされています。
ですが、今回のプロジェクトはスパンが短いため
2週間は時間をかけられなかったのが現状です。

そのため10の設問からいくつか抜粋し、メンバーで話し合いをしました。


## ①我々はなぜここにいるのか？
これはプロジェクトメンバー全体の認識を合わせるために
とても重要な設問でした。
「なぜここにいるのか？」というちょっと抽象的な設問を
まずはメンバーひとりひとり回答していきます。

お客様から「こういうことがしたい」と話し合いや、資料を頂いてはいたものの
実際にメンバーひとりひとりに聞いてみると、微妙に違った回答が出たのです。
もちろん、ひとりひとりの回答が違うからといって
それが間違いではありません。
※お客様からの要望を完全に読み違えて、的外れな回答出ない限り※

全員の「なぜここにいるのか？」を聞き、お互いの思いを知ったうえで
お客様の話の背景までしっかり考えて深掘りすると
真の「ここにいる理由」がでてきます。

最終的にでた意見はとてもシンプルなものでした。
こちらはお客様にも最終回答を提示し
お互いの認識齟齬がないことを確かめることができました。


## ②エレベーターピッチを作る
これもお客様と認識を合わせるうえで、非常に役立った設問でした。

>〇〇は、
「企業の販売促進担当者」の
「販売促進のヒントを提供するサービス」です。

>「業界を代表するITメディア」とは、違い
「すぐに使える、わかりやすい販売促進の情報」を配信しています。

>企業の販売促進担当者は、
「企画会議で煮詰まった時や、今までは、ちょっと違う販売促進の視点が欲しい時」に
当サイトを訪れて、自社の企画の参考に使います。

こちらはエレベーターピッチのテンプレートです。
ターゲットを明確にすること、どういうシステムなのか一言で簡潔に
真理を示すこと、重要な利点を伝えること・・・

最初は一言ではなかなか言い表せないものですが
ブラッシュアップしていくうちに、すっきりと落とし込めるものができてきます。
そしてそれをお客様にもお見せしたところ、認識があっている箇所は
安心して頂けましたし、違っているところは訂正して頂き
お客様と認識を合わせることができました。

途中、なかなかまとまらないと続ける意味を見失ってしまいがちですが
しっかりと落とし込めば、プロジェクトに非常に有益な手法です。



## ⑤「ご近所さん」を探せ
プロジェクトのメンバーでなくても、困ったときや相談したいとき
相談相手を見つけておくという考え方です。

たとえば、今回の開発メンバーではなくても
以前に同じような機能を作ったことがあるエンジニアがいれば
技術的な相談をもちかけることができます。

今回の案件でも、すでに何名かの「ご近所さん」に
アドバイスを求めております。
一言、都合のよさそうな時にお声掛けをし、見て頂くだけで
格段にプロジェクトを進めやすくなっています。



#　まとめ

いかがでしたでしょうか！
インセプションデッキは質問数が多いので
すべてやろうとすると時間がかかってしまいますが
「これとこれをやってみよう」と絞って取り組みだけでもだいぶ違います。

ぜひみなさんもやってみてください(*´ω｀*)
【Ruby】メソッド・引数・戻り値

戻り値でわたわたしていたので・・・Rubyのメソッド近辺の基礎の基礎をまとめたいと思います～

#基礎用語
##メソッド
「def メソッド名」と「end」の間に、まとめたい処理を書くことでメソッドをつくることができる。このことを「メソッドを定義する」と言う。

```ruby:
def メソッド名
   処理
end
```

メソッドを実行する＝メソッドを呼び出すには
図のように、「メソッド名」とすることで実行できる

```ruby:
def メソッド名
   処理
end

メソッド名
```

##引数
メソッドに与える追加情報のようなもの。
メソッドを呼び出すときに一緒に引数を渡すことで、メソッドの中でその値を利用することができる

引数を渡してメソッドを呼び出すには、「メソッド名(値)」とします。
メソッドは、指定した値を受け取り、その値は引数に代入される。

```ruby:
def メソッド名(引数名)
  処理
end

メソッド名(値)

＜例＞ーーーーーーーーーーーーー
def introduce(name) #１
  puts "#{name}です" #２
end

introduce("なまえ") #３


結果：　なまえです
#１のintroduceメソッドが、３の「なまえ」という値を受け取り、１の引数nameに代入され、２の処理が実行される
```

##戻り値
呼び出し元で受け取る処理結果を戻り値（もどりち）と呼び、このことを「メソッドが戻り値を返す」と言う。

・メソッドの中で、returnを使うと呼び出し元で値を受け取れるようになる。
・戻り値がある場合、メソッドの呼び出し部分がそのまま戻り値に置き換わる。
・下図のようにメソッドの呼び出し部分を変数に代入するように書くことで、メソッドの戻り値を受け取ることができる

```ruby:
def add(a,b)
  return a+b #戻り値
end

sum = add(1,3) #変数：sum、呼び出し部分：add(1,3)
#戻り値を受け取るには変数への代入が大事！

puts sum

結果：４
```

#課題を考える

##課題１

```ruby:task1.rb
def rename(name) # 1
  name = "#{name}:CAMP" # 2
  return name # 3
end

name = "TECH" # 4
rename(name) # 5
puts name
```

①　４の変数nameに代入されたTECHが、５の引数nameに代入され値となる。
５は１の引数nameに代入され、２の変数nameにTECH:CAMPとして代入されるが、３の戻り値を受け取る部分がないので・・・×

②　４のTECHが変数nameに代入され、puts nameが実行される。〇

よってtask1.rbの結果は、「TECH」


##課題2

```ruby:task2.rb
def rename(name) # 1
  name = "#{name}:CAMP" # 2
  return name # 3
end

name = "TECH" # 4
name = rename(name) # 5
puts name
```

４の変数nameに代入されたTECHが、１の引数nameに渡され、変数展開されTECH:CAMPで２のnameに代入される。
２の変数name（TECH:CAMP)=３の変数name、５で３の戻り値を受け取り、変数nameに代入（このとき４のnameは再代入＝上書きされる）。

結果は、５の変数nameが実行されるので・・・結果は「TECH:CAMP」
√2^√2 は何？



こんにちは。学生LTで関東運営兼代表しています。
すごい苦し紛れにネタを出したので温かい目で見ていただけたら嬉しいです。

####12/13追記
数学はエンジニアリング(?)
間違いがあったら修正お願いします。すぐ対応するので

# √2^√2は何？ 
$\sqrt2^\sqrt2$ってなにと言われてすぐ答えられるでしょうか？
僕は初見では答えられません(￣ー￣)
こいつが何かという証明を今から行ってみましょう。

```math
ゲルフォント＝シュナイダーの定理より\\
\sqrt2^\sqrt2は超越数である。(証明終)
```
終わりです。ありがとうございました。

#終わらせるな
これで終わりなんて言ったらコメントで怒られてしまいそうなのでしっかりと解説をさせていただきます（間違ってたら教えてください。そして間違えてたらごめんなさい)

##超越数とは

>超越数（ちょうえつすう、英: transcendental number）とは、代数的数でない数、すなわちどんな有理係数の代数方程式
${\displaystyle x^{n}+a_{n-1}x^{n-1}+\cdots +a_{0}=0} x^n + a_{n-1} x^{n-1} + \cdots + a_0 = 0　　（n ≥ 1 かつ、各 ai は有理数）$
の解（英語版）にもならないような複素数のことである。
([wikipedia](https://ja.wikipedia.org/wiki/%E8%B6%85%E8%B6%8A%E6%95%B0)より参照)

要するに、代数的数ではない数($f(x)≠0$)だったら超越数ということです。代数的数の説明は次に書きます。

###代数的数とは

>代数的数（だいすうてきすう、英: algebraic number）とは、 複素数であって、有理数係数（あるいは同じことだが、分母を払って、 整数係数）の 0 でない一変数多項式の根 （すなわち多項式の値が 0 になるような値）となるものをいう
([wikipedia](https://ja.wikipedia.org/wiki/%E4%BB%A3%E6%95%B0%E7%9A%84%E6%95%B0)より参照)

これは、超越数で書いた有利係数の代数方程式
${\displaystyle x^{n}+a_{n-1}x^{n-1}+\cdots +a_{0}=0} x^n + a_{n-1} x^{n-1} + \cdots + a_0 = 0　　（n ≥ 1 かつ、各 ai は有理数）$ 
ある数$x$が$f(x)=0$となれば代数的数となります。

例として$2$は$x-2 = 0$となるので$2$は代数的数です。
今回の$\sqrt2$なら$x^2-2=0$となるので$\sqrt2$は代数的数です。
$\pi$は$f(x)=0$となる$f$がないので$\pi$は超越数となります。

##ゲルフォント＝シュナイダーの定理とは
>ゲルフォント＝シュナイダーの定理 (ゲルフォント＝シュナイダーのていり、英: Gel'fond-Schneider's theorem) は、指数関数の値の超越性に関する定理である
([wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B2%E3%83%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%EF%BC%9D%E3%82%B7%E3%83%A5%E3%83%8A%E3%82%A4%E3%83%80%E3%83%BC%E3%81%AE%E5%AE%9A%E7%90%86)より参照)

こちらゲルフォント=シュナイダーの定理は
>$α$ を 0, 1 以外の代数的数、$β$ を有理数ではない代数的数としたとき、$  {\displaystyle \alpha ^{\beta }}$ は、超越数である。
という定理です。

$α$ が 0, 1 以外の代数的数というのは、そのまんまの通りで0,1以外の代数的数ということです。$f(x) = 0 (x≠0,1;x\in\mathbb{Q})(\mathbb{Q}は有理数を指している)$

$β$ が有理数ではない代数的数というのもそのまんまの通りで有理数ではない代数的数のことです。
$f(x) = 0(x\in\bar{\mathbb{Q}}\setminus\mathbb{Q})(\bar{\mathbb{Q}}は代数的数を指している, \setminus は右を除くの意味)$

よって今回は$\sqrt2$は0,1以外の代数的数かつ有理数ではない代数的数なのでゲルフォント=シュナイダーの定理を使用することができます。
こうして、$\sqrt2^\sqrt2$は超越数ということがわかりました。これでわかった！スッキリ！！！！！！

#√2って無理数なの？？？
$\sqrt2$をひとよひとよにひとみごろ(1.41421356)と覚えませんでしたか？
循環小数でないので分数に表すことができませんので$\sqrt2$は無理数ですね。
けど本当にそうなのでしょうか？
人類が見つけていないだけで実は割り切れる桁が存在しているかもしれません。
ですので、$\sqrt2$が無理数ということを証明してみましょう。
##背理法を用いた√2が無理数の証明
```math
\sqrt2 が有理数であると仮定する。\\
このとき，互いに素な正の整数 p,q を用いて \sqrt2=\frac{q}{p} とおける。\\

両辺二乗して分母を払うと，2p^2=q^2\\
左辺は 2 の倍数なので q2 は 2 の倍数。よって q は 2 の倍数。\\

すると，q^2 は 4 の倍数になるので，p^2が 2の倍数。よって p も 2 の倍数。\\
これは p と q が互いに素であることに矛盾。\\
```
([高校数学の美しい物語](https://mathtrain.jp/sqrt2irrational)より参照)

背理法は$ P \Longrightarrow Q$を$P かつ Q$として考えます。こうすると仮定と結論に矛盾が生まれるので証明終了となります。
これで$\sqrt2は$無理数という証明が終了しました。これでやっと$\sqrt2^\sqrt2$が何かわかりましたね！

#まとめ
超越数は代数的数ではない数($f(x)≠0$)。
代数的数はある方程式$f$に対し$f(x)=0$となる数。
今回の$\sqrt2^\sqrt2$が何かの証明はゲルフォント=シュナイダーの定理を使えばOK!!!


すごい苦し紛れでごめんなさい。何か質問がありましたら[Twitter](https://twitter.com/PotyaExe?lang=ja)までお願いします。
それでは、良い数学ライフを！
Yahoo毎日くじを全部引くスクリプトを書いた

### 動作環境
OS：Windows8
GoogleChrome バージョン: 70.0.3538.110（Official Build） （64 ビット）
Python：3.70
Selenium Webdriver：この記事を書いた時点で最新のもの
chromedriver.exe：この記事を書いた時点で最新のもの

※スクリプトと同じフォルダに'chromedriver.exe'を置いてください。

```python:yahoo_every_kuji_all.py
# coding: UTF-8
from selenium import webdriver
from time import sleep

# 引きたいくじのURLリスト。期間限定が多いので、URLは随時更新して下さい
#（但し、「くじを引くボタン」がid="btnLot"でなければなりません）
kuji_urls = [
'https://toku.yahoo.co.jp/travel201811/lot/',
'https://toku.yahoo.co.jp/dining201811/lot/',
'https://toku.yahoo.co.jp/srkuji201812/lot/',
'https://toku.yahoo.co.jp/39kuji201812/entry/',
'https://toku.yahoo.co.jp/shopping201811/lot/',
'https://toku.yahoo.co.jp/everyspc201811/lot/',
'https://toku.yahoo.co.jp/shpyoshi201812/lot/',
'https://toku.yahoo.co.jp/fmhaagendazs201812/lot/',
'https://toku.yahoo.co.jp/tamatebako201812/lot/',
'https://toku.yahoo.co.jp/shpkaientai201812/lot'
]

login_url = 'https://login.yahoo.co.jp/config/login?.src=kuji&card_cushion_skip=1&.done=https://toku.yahoo.co.jp/everyday/lot'
driver = webdriver.Chrome('./chromedriver.exe')
driver.get(login_url)

id = driver.find_element_by_name('login')
id.send_keys('your_login_id')
btn_id = driver.find_element_by_name('btnNext')
btn_id.click()

sleep(1)

pw = driver.find_element_by_name('passwd')
pw.send_keys('your_password')
btn_pwd = driver.find_element_by_name('btnSubmit')
btn_pwd.click()

# くじを引きながら画面遷移
for kuji_url in kuji_urls:
    try:
        # くじボタンがある場合の処理
        btn_kuji = driver.find_element_by_id('btnLot')
        btn_kuji.click()
        sleep(5)
        print("kuji_OK: " + kuji_url )
        driver.get(kuji_url)
    except:
        # くじボタンがない場合の処理
        print("kuji_ERROR: " + kuji_url )
        driver.get(kuji_url)

# ポイント通帳に遷移してポイントを確認
driver.get('https://points.yahoo.co.jp/book')
```
GLSLでtransitionが書けるスライダーライブラリをつくっている


##はじめに
ライブラリを育てたい欲が湧いたので作っている。
イメージしているのは["Swiper"](https://idangero.us/swiper/)みたいなスライダーライブラリのGLSLでtransitionできるやつ。
つくってみたはいいものの実際に使ってもらうようにドキュメントを整備したりするのはまだまだ時間がかかりそう。
継続するにはモチベーションの維持が必要。。

##XSlider
demo
https://112ka.github.io/xslider/demo/

特徴
- shaderでtransitionが書ける
- 他のライブラリに依存していない
- svgの&lt;foreignObject&gt;タグを使って、DOMをTextureにできる
  (&lt;foreignObject&gt;タグでは、cssのbackground-imageの画像が表示されないというMSEdgeのバグ有)
- 何個かスライド飛ばすときの連続で切り替わる仕様は気に入っている↓↓↓
![output.gif](https://qiita-image-store.s3.amazonaws.com/0/207875/b51f5b88-a5e4-fc91-baea-ffab788d1cc2.gif)
- あと無駄にスライドつかんで投げられる↓↓↓
![xslider2.gif](https://qiita-image-store.s3.amazonaws.com/0/207875/4961f151-27a6-80c7-cd4c-69a3ca87780c.gif)
（PCでドラックするとテキスト選択して動作微妙になっちゃうけど、スマホなら投げる感じがでやすい）




##使い方
最小構成は [こちら](https://112ka.github.io/xslider/samples/base/)。

### インストールしてCSSとJSをinclude
```shell
npm install xslider
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/xslider.min.css">
</head>
<body>
    ...
    <script src="path/to/xslider.min.js"></script>
</body>
</html>
```

### htmlの書き方例
```html
<div class="xslider">
    <div class="xslider-view">
        <div class="xslider-slide">
            <div class="xslider-layer-gl">Elements as texture</div>
            <div class="xslider-layer-ui">Elements as DOM</div>
        </div>
        <div class="xslider-slide"></div>
        ...
    </div>
    <div class="xslider-pager"></div>
</div>
```

### cssの記述
```css
.xslider {
    width: 400px; height: 300px;
}
```

### jsの記述
```js
new XSlider(".xslider");
```

##Transitionについて
Preset TransitionのGLSLは以下のサイトを大いに参考にさせていただいている。
https://gl-transitions.com/
引用は各ソースに書いた。

ピックアップすると、

- [Cross Warp](https://112ka.github.io/xslider/demo/#transition=CrossWarp&loop&touchMoveEnabled&throwable)
- [Cross Zoom](https://112ka.github.io/xslider/demo/#transition=CrossZoom&loop&touchMoveEnabled&throwable)
- [Cube](https://112ka.github.io/xslider/demo/#transition=Cube&loop&touchMoveEnabled&throwable)
- [Pixelate](https://112ka.github.io/xslider/demo/#transition=Pixelate&loop&touchMoveEnabled&throwable)

など。
リンクを開いて左右の矢印でtransitionが確認できる。

この他、オリジナルのtransitionも追加しやすいようなつくりのつもりだが、追加のやり方がわかるようなDocumentはまだない。

##svgの&lt;foreignObject&gt;でのdom描画について
[dom-to-image](https://github.com/tsayen/dom-to-image)を参考にさせてもらった
最初はこのライブラリに依存していたが、不具合の検証したくなったりで、カスタマイズしたくなって結局車輪の再開発をすることに。。


### MSEdgeで背景に設定した画像が表示されない。
問い合わせてはいるが私の英語がうんこなため、 -> [対応が止まっている気がする](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17408255/)
(↑「Assigned to comptriage」ってなんやねん)
Edgeでみれないとなると、案件ではなかなか使えない。
スマホのみで見せるやつだったり、background-imageで画像を指定しなければEdgeでもいけるはず。

##webglの描画システムについて
最初THREE.jsで動かしていたが、余計な記述で増える容量が気になったので、以前c++でつくってたやつをjsに移植した。
多少余計な記述は残っているが、トータルでは軽くなった。

##まとめ
- まだまだ人に使ってもらうにはドキュメント足りない
- 動作の検証も十分にできていない
- とりあえず自分の仕事で使ってみたいが、Edgeで動作保証してないので、スマホサイトのみの案件で機会があればつかってみる
[25分でできる！]Laradockを使ったLaravel環境構築

## この記事に書いていること
Laradockを使ったLaravelの環境構築方法を書いています.
Laravel以外の周辺技術はMySQL, Nginxです.

[5分でおわる！]みたいなタイトルにしたかったのですが, Dockerイメージのダウンロードに合計25分くらいかかってしまうので, [30分でできる]というなんとも微妙な数値になりました.
インターン先でLaravel勉強会を開催したときの資料をほぼ使いまわしていますが, 改めて見てもかなり一瞬で環境構築終わるので素敵でした.

## 環境構築の前に必要なもの
- Docker
- Docker-compose

[Dockerはこちらからダウンロードが可能です](https://www.docker.com/get-started)

- Git

## 環境構築


### 1: 作業ディレクトリを作成する

環境構築が完了したときのディレクトリ構成を説明しておくと以下のようになります.

- 作業ディレクトリ
  - laradock
  - application

applicationディレクトリの中にLaravelのソースコードがあります.
まずは適当な場所に作業ディレクトリを作成し, カレントディレクトリをそこへ移します.
今回は `laravel` という作業ディレクトリを作成し, そこで作業を進めることにします.

```
mkdir laravel && cd laravel
```

### 2: Laradockをクローンする

先程作成した `laravel` ディレクトリ配下にlaradockをクローンします.

```
git clone https://github.com/LaraDock/laradock.git
```

[Laradockの公式ページ](https://laradock.io/)

### 3: 環境設定ファイルを作成

laradock用の設定ファイルを作成します. ベースのなるファイルがlaradockディレクトリにあるのでそれをコピーするだけでOKです.

```
cd laradock # 先程クローンしたlaradockディレクトリに移動します
cp env-example .env
```

### 4: Laravelアプリケーションを作成する

一度Laravel用のコンテナを立ち上げます. Laravelサーバーはworkspaceという名前のコンテナです.
docker-composeコマンドはlaradockディレクトリ配下で行います.

```
docker-compose up -d workspace
```

コンテナが作成されたらコンテナ内に入り, Laravelアプリケーションを作成するコマンドを実行します.

```
docker-compose exec workspace  /bin/bash
```

コンテナ内で以下のコマンドを実行し, Laravelアプリケーションを作成します.
｢sample_app｣がアプリケーション名になり, ディレクトリ名にもなります.

```
composer create-project laravel/laravel sample_app 
```

Laravelアプリケーションが作成されたら一度コンテナから出ます

```
exit
```

### 5: 環境設定ファイルの修正

手順2 で作成した `.env`   を修正します.
8行目のアプリケーションへのPATHを指定します.

```
# Point to the path of your applications code on your host
APP_CODE_PATH_HOST=../sample_app
```

また, MySQLのデータベースがlatestだと8.0になってしまい, うまく動作しないことが多いので, 5.7に設定しておきます（198行目）

```
MYSQL_VERSION=5.7
```

### 6: コンテナの再起動

Laravel, nginx, MySQLのコンテナを立ち上げます.

```
docker-compose up -d workspace nginx mysql
```


### 7: ブラウザで見る

`http://localhost`
へアクセスするとLaravelの初期画面が見えるはずです！

[![Image from Gyazo](https://i.gyazo.com/b9cbabe450cda9d006dd8ec5c3deac52.png)](https://gyazo.com/b9cbabe450cda9d006dd8ec5c3deac52)


laravelディレクトリ配下にsample_appというディレクトリができており, そこでLaravelの開発ができます！
試しに, sample_app/resources/views/welcome.blade.php をいじってみると画面が変わります！
データの分類方法

## データの分類方法

* 問題提起
   * 分析に使えそうなデータを整理したい。まず何をするべきだろうか？
   * 最大値や最小値、平均などを取ればいいだろうか？
   * しかしその場合、最大値や最小値、平均に意味がないデータが存在する。
      * 男=1、女=0というようなカテゴリカルなデータなど。

* 答え
   * 集計の前に、データを分類する。

* データの大まかな分類
   * 量的データ
      * 数値で表されるデータ。
      * 例: 身長、体重、金額、温度など。
   * 質的データ
      * カテゴリデータや、順位データ(カテゴリデータに順位をつけたもの)。
      * カテゴリデータの例: 男=1、女=0というような、数値に区別の意味しかないデータ。
      * 順位データの例: 大変良い(5)、良い(4)、普通(3)、悪い(2)、大変悪い(1)というような、数値に区別と順位の意味があるもの。
         * 量的データとは異なる。
         * 「大変良い(5)」は「大変悪い(1)」よりも高い値という順位はある。しかし「大変悪い(1」を5倍したり「大変悪い(1」が5個あれば、「大変良い(5」になるわけではなく、加減乗除に意味がない。
   * ※ このような分類を`測定尺度`による分類という。

* 比率データと間隔データ
   * 量的データは2つに分類できる。
      * 比率データ
         * 絶対的なゼロ点を持ち、加減乗除が可能
         * 例: 身長、体重、金額
      * 間隔データ
         * 絶対的なゼロ点がなく、足し算引き算は可能だが、掛け算や割り算はできない。
         * 例: 摂氏の温度、知能指数

* データの分類の表
* 
   ||データの名称|測定尺度|直接できる演算|主な代表値|主な事例|
   |---|---|---|---|---|---|
   |量的データ|比率データ|比率尺度|＋－×÷|各種平均|質量、長さ、年齢、時間、金額|
   |量的データ|間隔データ|間隔尺度|＋－|算術平均|温度(摂氏)、知能指数|
   |質的データ|順位データ|順序尺度|＞＝|中央値、最頻値|満足度、選好度、硬度|
   |質的データ|カテゴリデータ|名義尺度|度数カウント|最頻値|電話番号、性別、血液型|
   * 参考文献[1]から引用(フォーマットを一部変更)

* データの整理の例

   * サンプルデータの説明
      * アンケート結果を格納したアンケートテーブルがあるとする。

   * アンケートテーブルの構成
      * 名前
      * 年齢
      * 性別
         * 男: 1、女: 0
      * 出身地方
         * 都道府県を記載
      * 身長
      * 体重
      * BMI
         * 身長と体重から自動計算
      * 「健康に興味がありますか？」という問いの答え: はい(=1)、いいえ(=0)の二択
      * 「あなたの健康状態を5段階で教えてください」という問いの答え: 5,4,3,2,1のいずれかの値。数値が大きいほどよい。

   * サンプルデータの各列を測定尺度で分類し、集計方法を考える。
      * 名前
         * 分析対象外
      * 年齢
         * 量的データ(比率データ)
         * 集計の例: 最大、最小、平均、分散(標準偏差)を取得。
      * 性別
         * 質的データ(カテゴリデータ)
         * 集計の例: 度数を取得
      * 出身地方
         * 質的データ(カテゴリデータ)
         * 集計の例: 度数、最頻値を取得
      * 身長
         * 量的データ(比率データ)
         * 集計の例: 最大、最小、平均、分散(標準偏差)を取得。
      * 体重
         * 量的データ(比率データ)
         * 集計の例: 最大、最小、平均、分散(標準偏差)を取得。
      * BMI
         * 量的データ(比率データ)
         * 集計の例: 最大、最小、平均、分散(標準偏差)を取得。
      * 「健康に興味がありますか？」の答え: はい(=1)、いいえ(=0)の二択
         * 質的データ(カテゴリデータ)
         * 集計の例: 度数を取得
      * 「あなたの健康状態を5段階で教えてください」の答え: 5, 4, 3, 2, 1のいずれかの値。数値が大きいほどよい。
         * 質的データ(順序データ)
         * 集計の例: 度数、中央値、最頻値を取得

   * 一言
      * 数千万件、数億件のレコードを格納したデータベースでは、最大や最小などの集計にはそれなりの時間がかかる(数分～数時間)。
      * どの列も一律に最大値や最小値を算出するのではなく，データを分類し、適切な集計をすることで、無駄を省き、役に立つ集計結果が得られる。

* 参考文献
   * [1] 入門統計学-検定から多変量解析・実験計画法まで-(栗原伸一)
組織づくりベース Meetup 「俺のOKR」イベント参加レポート

## イベント概要

- イベント URL: https://peatix.com/event/570304
- 場所: 株式会社 empath

## Session 1. OKR の運用における実感と課題

- メルカリ 矢野さん
- 2015/01-2015/06 50-100 人のときに OKR 導入
- 当初はスプレッドシートで管理
- なぜ OKR を導入するのか
    - 会社 OKR から個人 OKR までの結びつきが見えやすい
    - 各メンバーの視点を上げやすい
    - 今会社が重要としている観点で話ができる
- 4 半期で見直すという観点で、スピードを持った組織になる
- OKR 設定時の注意点
    - 十分にストレッチされたものであるか
    - Objective: 達成したらワクワクするもの
    - Key Result: 定量的に達成したか確認できるか
- OKR の課題
    - 長期的な施策をどのように評価につなげるか
        - 研究開発とか
    - 4 半期毎の Review の Operation 業務
    - 自社で開発したシステム内で Review Cycle を完結
        - MTC2018 で登壇 http://youtu.be/G0SqLEqgMKQ

![IMG_20181212_192547.jpg](https://qiita-image-store.s3.amazonaws.com/0/19698/6f6b070e-f7b9-626f-bdf7-a049a2ef4de1.jpeg)
全社　> チーム > 個人 の OKR

![IMG_20181212_192642.jpg](https://qiita-image-store.s3.amazonaws.com/0/19698/9c3e907b-028b-0f7e-e239-80e963ff42a1.jpeg)
OKR スケジュール

![IMG_20181212_193345.jpg](https://qiita-image-store.s3.amazonaws.com/0/19698/bd86bc25-70f8-ac65-a447-66252d7724af.jpeg)
自社開発 OKR プロダクト: Reviews 

## Session 2. OKRを事業成長と紐づけるために

- Sansan 西村さん
- ミッションドリブン
    - 旧: ビジネスの出会いを資産に変え、働き方を確信する
    - 新: 出会いからイノベーションを生み出す
- OKR 導入は 2015 年 12 月
    - 元々はスプリットシートだった
- 状態変化を目的にする定量を追いすぎない
- 人事から見た OKR
    - 参考情報として客観性を保つ、評価に使う
    - 評価は基本的に評価 1on1 で決める
- 導入は大変だが、慣れると楽しくなってくる
- 導入ツール: https://resily.com/hiyaku_okr/


## Session 3. パネルディスカッション

### パーソルプロセス＆テクノロジー 河内さん

- 四半期ごとに、OKR を設定
- 定期的な冗長との 1on1 で個人 OKR の進捗確認・見直し
- プロダクトごとに隔週のウィンセッションを行い振り返り
- https://www.hito-link.jp/performance/

![IMG_20181212_201050.jpg](https://qiita-image-store.s3.amazonaws.com/0/19698/45ed7032-b53f-2d1f-78a8-18429fe1acf4.jpeg)
HITO-Link の OKR 運用

### 質問ベースでパネルディスカッション

- 矢野さん、西村さん、河内さん
- https://m.umu.co/model/ssu_ldP6f0a
- 人事評価との兼ね合い（MBO などの評価制度がある場合にどうすみ分けるべきか）
    - 河内さん: 何 10 社かとはなしたけど結論が出てない
    - 矢野さん: 何をやったかの参考資料として利用
- 管理部門のなど定量化しづらいKRの設定方法、具体的な例を知りたいです。
    - KR に When の要素を入れる（期限を設ける）
        - `いついつ` までに `なになに` をする
    - N % 達成など
CSSで@charsetを指定するとエラーになる場合

<h2>原因</h2>
１行目にコメントを書いていたためでした。

文字コードはCSSの１行目に記述する必要があるようです。最初に「このCSSの文字コードは◯◯です」と指定してあげないといけないわけですね。

<h2>解決法</h2>
コメントを削除して@charsetを１行目に書くだけです。

コメントを残す必要があるなら

```
@charset "UTF-8";    /* コメント */
```
というように書くとかですね。
ActiveRecord の or は merge とセットで使え

# さて問題
ActiveRecordでこんなクエリ（ `where` 句）を作るにはどうしたら良いでしょうか？

```sql
where A and (B or C or D) and (E or F)
```

# 答え
```ruby
Model.where(A)
     .merge(Model.where(B).or(Model.where(C)).or(Model.where(D)))
     .merge(Model.where(E).or(Model.where(F)))
```

`merge()` を使うと、 `or()` の部分をグルーピングすることができます。

SQLの条件組み立ては `and` で条件を絞り込んでいくのが基本ですから、 `or` の部分はまとめて　`and` でつないでいきましょう。

`or()` はどこでグルーピングがどこに入るのか予測不可能なことが多いですが、`merge()` と併用するとグルーピングを明示的に制御できるようになります。
Count up sample on vue-class-component

# この記事の目的

Vue CLI 3 では簡単に TypeScript でかけるようになりました。
vue-class-component を使うと、使わないときのコードと比べて、具体的にどのように変化するのかを、簡易なサンプルで見比べたいと思います。

# つくるもの

クリックをするとカウントアップされるサンプルです。

![vuejstype.gif](https://qiita-image-store.s3.amazonaws.com/0/45822/60120f7c-17b3-10cd-22c5-45d96173d045.gif)

# Not use TypeScript

TS 使わない場合は、ふつうです。

```vue:App.vue
<template>
  <div id="app">
    <MyButton></MyButton>
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue'

export default {
  name: 'app',
  components: {
    MyButton
  },
}
</script>
```

```vue:MyButton.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="countUp">count up</button>
  </div>
</template>

<script>
export default {
  name: "MyButton",
  data: function () {
    return {
      count: 3
    }
  },
  methods: {
    countUp: function(){
      this.count++
    }
  }
};
</script>
```

# Use vue-class-component

すこし、スッキリした気がします。...気のせいかもしれません。
（少なくとも `MyButton.vue` の `export default` 内はすっきりしました

```vue:App.vue
<template>
  <div id="app">
    <MyButton></MyButton>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MyButton from './components/MyButton.vue';

@Component({
  components: {
    MyButton,
  },
})
export default class App extends Vue {}
</script>
```

```vue:MyButton.vue
<template>
  <div class="hello">
    <p>{{ count }}</p>
    <button @click='countUp'>count up</button>
  </div>
</template>

<script>
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Mybutton extends Vue {
  count = 3
  countUp () {
    this.count++
  }
}
</script>
```

# 雑感

今ぼくは、TS を使って書くのか書かないのか迷っています。が、カジュアルなプロジェクトでの利用なので、積極的に使っていきたいところです。
「Ajaxって何？」だったんで勉強した。

聞いたことがあるけど、全く関わりのなかったAjax通信なのですが、ついに接点を持ったので、勉強しました。

# Ajaxって何？
「Asynchronous JavaScript + XML」の略らしいです。

**ん、何それ？**

「Asynchronous = 非同時性の、非同期の」らしいですね。

なるほど、じゃあつまり、
**Ajax通信はJavaScriptとXMLで非同期にサーバとの間の通信を行う**ことなのね。

ここまできてわからないのは、

- 非同期通信
- XML

ですね。それぞれ勉強しましょう。

# 非同期通信って何？

[「非同期通信」とは何？ Weblio辞書](https://www.weblio.jp/content/非同期通信)いわく。

>非同期通信とは、データの通信に際して送信側と受信側で厳密にクロック周波数や位相を一致させないで通信する方式のことである。 送信者と受信者の両方がオンラインである必要がなく、片方が接続しているだけで通信が成立する。 非同期通信の仕組みは、典型的なものとしては電子メールを挙げることができる。

なるほど、つまり片方が一方的に通信を行うような通信方法なのね。
サーバーなどの仲介役がいることによって、この通信方法は実現していると。

# XMLって何？

「Extensible Markup Language」の略らしい。
日本語でいうと**「拡張可能なマークアップ言語」**。

おろろ、「マークアップ言語」ってなんだっけ？

## マークアップ言語って何？
[マークアップ言語とは - Markup Languageの種類とその歴史](https://mynavi-creator.jp/blog/article/what-is-mark-up-language)いわく。
>マークアップ言語とは、文章を構造化するための言語です。「文章を構造化する」というと、なんだか非常に難しそうな印象を受けますが、基本的には「ここはタイトル部分です」「ここから本文が始まります」「ここは非常に重要な部分です」など、人間であれば直感的に理解できる事柄を、タグや記号で表示し、コンピューターに認識させることを指します。

なるほど、コンピュータに対して、文章を構造化して示すための言語なのね。

# まとめ
- Ajax通信はJavaScriptとXMLで非同期にサーバとの間の通信を行うこと
- 非同期通信は片方が一方的に通信を行うような通信方法
- XMLは拡張可能なマークアップ言語
Oracle APEX テーマのスタイル変更

Oracle APEXでテーマの色を変更する方法
# カレントテーマのスタイルを変更する
**Before**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/324853/e4b520af-5eca-3449-33db-a0e97596da35.png)

**After**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/324853/2680817f-862a-6df1-de8b-23d46966d912.png)

# 手順
アプリケーションビルダーより、対象アプリを開いた後、[共有コンポーネント]を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/324853/6579f472-01ed-d2cb-0e2d-cc206baf910c.png)

[ユーザー・インターフェース]より、[テーマ]を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/324853/825e4759-5ed6-bc29-8e0a-f2414a0ca1a9.png)

変更したいテーマを選択(テーマ名を選択)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/324853/6f25c107-52fe-f558-3677-a4475b6983e9.png)

タブを[スタイル]に切り替え、カレントにしたい[スタイル]を選択(スタイルの追加を行うことも可能)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/324853/d69e9bd8-09d1-f420-23a4-c56fcbe947ad.png)

[設定]タブの[カレント]を**「はい」**に変更し、[変更の適用]ボタンをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/324853/ab2864b8-8429-ce92-f01f-b6921e81b0d1.png)

アプリケーションを保存すると、テーマのスタイルが変更されていることが確認できる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/324853/57c86d09-0a00-f93e-62d1-c8f745fda1f8.png)
自宅サーバーへのhostsをよしなに変更したいソリューション笑の提案


本日のお昼休みにその場のノリで始まったマグロ大学、もとい近畿大学のエンジニア見習いが今日から毎日書いていくであろうアドベントカレンダー1日目(12日目）の記事です。

一発目という事で技術よりですが軽めの記事です。

# 何のソリューション？

LAN内の自宅サーバーにsshしたいときどのように接続しますか？
`ssh $user@$domain`とかやりたいですが、ローカルなので何もしないままではドメインで接続できません。

内向きDNSを建ててドメインをサーバーIPに向けてやればできないこともないですが私はもう二度とBINDには触れたくありません。

じゃあhostsを書き換えてやろうとなるわけですね。なりますね。

`sudo echo "192.168.xxx.yyy $domain" >> /etc/hosts`
これで無事接続できるようになりますね。

が、これが家の内外で使うノートPCだとまた不具合が出るわけです。

外出先でsshしたくなったらhostsの上記の行をコメントアウトしてやらなければなりません。。。

なんとダサい。

というわけで今回はこんな煩わしい問題を解決するためのソリューションのご提案です。

# なにするん？

手軽に用意したかったこともあり、ネットワーク状況の変更を見て家であればhostsを～みたいなことはしませんでした。

しかし、よく使うターミナル上手軽に変更したかったので適当なディレクトリにパスを通してそこにスクリプトを置くことでコマンドっぽく実行できるようにします。

# どうするん？

具体的には適当なディレクトリにスクリプトと外用、内用のhostsをそれぞれ置いて、スクリプトから/etc/hostsへコピーします。

```sh
    $ mkdir ~/programfiles
    $ cd ~/programfiles
    $ echo "export PATH=\$PATH:$(pwd)" >> ~/.bash_profile
    $ source ~/.bash_profile
    $ cp /etc/hosts ./
    $ cp hosts homehosts
    $ cp hosts otherhosts
    $ vi homehosts # 書く
```


```sh
#!/bin/bash

SCRIPT_DIR=$(cd $(dirname "${BASH_SOURCE:-$0"); pwd)

if [ $# -ne 1 ]; then
    echo "please host type in first argument"
    exit -1
fi

HOST=${1}

if [ $HOST = "home" ]; then
    eval "sudo cp ${SCRIPT_DIR}/homehosts /etc/hosts"
    echo "set host file to home preset"
    exit 0
elif [ $HOST = "other" ]; then
    eval "sudo cp ${SCRIPT_DIR}/otherhosts /etc/hosts"
    echo "set host file to other preset"
    exit 0
else
    echo "please give args \"home\" or \"other\""
    exit -1
fi

```

# 使う

`$ change home` # 家用hostsへ
`$ change other` # 外用hostsへ


もっといい感じのｿﾘｭｰｼｮﾝがあれば教えてください
MAMPでPython実行時の「premature end of script headers」

※開発環境はMacです。
MAMPフォルダのcgi-binフォルダにhello.pyを作成し、
ターミナルにて
```$ cd /Applications/MAMP/cgi-bin 
$ chmod +x hello.py```
と打ち込むことで実行権限を与え、いざpythonを書いていこうという時に現れた「premature end of script headers」

よくよくエラーコードを読んでみると、
「SyntaxError: Non-ASCII character '\\xe5' in file /Applications/MAMP/cgi-bin/hello.py on line 18, but no encoding declared; see http://python.org/dev/peps/pep-0263/ for details」
と書かれており、どうやらencodingでトラブっているらしい。

と思ってコードを見直すと、18行目にそういえば日本語を含むコメントを入れていたことに気づく。


```python

#!/usr/bin/python --

print 'Content-type: text/html'
print ''
〜省略〜
L18 #日本語を含む文字列

```

\#コメントの日本語を取り除いたらエラーは解決しました。
JavascriptでIoTをやる方法

この記事は[JavaScript Advent Calendar 2018](https://qiita.com/advent-calendar/2018/javascript)の12日目です

@n0bisuke さんと合わせて２日連続でjavascriptのIoTに関するAdventCalendarになりました。
・・・と言っても、話が続いてるというわけでは無いです

前半戦なので、全体感ということで、JavascriptでIoTをやろうとしたときに
どんなやり方があるよという話をしたいと思います。
IoTやるとどんな事ができるよ！の話は[こちらのAdventCalendar](https://qiita.com/advent-calendar/2018/iotlt)でも見ていただければと思います。


それぞれマイコンボードごとに分類してます。
## Raspberry PiでIoT
javascriptのパワーユーザーならこれが一番違和感なく簡単なんじゃないでしょうか。
Linuxが手足のように使えるレベルの知識がある人向け。

![computer_single_board.png](https://qiita-image-store.s3.amazonaws.com/0/227015/1f8c9e62-2a9d-2b0e-bee3-5477e4723647.png)


- **Raspberry Pi にnodejsをインストール・実行でIoTを行う**
Raspberry PiはただのLinux PCなので、node.jsがそのまま入ります。そのまま動かせばjavasriptで入出力ができます。
Linuxの環境構築はとてもめんどいですが、パワーユーザーならきっと日常的にやってるはず。


- **[CHIRIMEN](https://chirimen.org)というミドルウェアを入れ、Raspberry Pi内のブラウザでjavascriptを実行**
CHIRIMENというのを入れると、電子工作に必須のio制御が内部ブラウザからの関数呼び出しでできるます。ブラウザカスタマイズしたのかな？

## ESPでIoT
RaspberryPiとは逆に、電子工作バリバリできまっせ！という人はこちらがおすすめです。
なによりも安い

<img width="362" alt="スクリーンショット 2018-12-12 19.42.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/227015/85068600-9cda-3352-8093-2295c0e1ee14.png">


- **[Moddable](http://www.moddable.com)をつかってJavascriptをコンパイルして書き込んで使う**
javascriptだってコンパイルすればただのアセンブラ。こういう系はjavascriptの機能が一部使えないことが多いですが、どこまで使えるのかはちょっと探しきれませんでした・・・。

- **[Mongoose OS](https://mongoose-os.com/mos.html)をつかってJavascriptをコンパイルして書き込んで使う**
こちらも同じで書き込んで使います。evalとか使えるのかな・・・？
Moddableとの違いもよくわかってないです。


## ArduinoでIoT
電子工作といえばarduino!というぐらい簡単にプログラムが書けます。**C言語なら**。
JavaScriptで書こうとするとひと工夫必要です。

![computer_one-board_microcomputer.png](https://qiita-image-store.s3.amazonaws.com/0/227015/87e62a5b-c266-f6c1-3137-806a4b5534b9.png)



- **[Johnny-Five](http://johnny-five.io)というOSをarduinoに入れ、有線で接続したPCでnode.jsを動かしarduinoに指示を出す**<br/>
 生のnode.jsを使うことができるので、なんでもやりたい放題です。そのかわり、有線でPCとArduinoをつないでおく必要があります。動作中ずっと。



## obnizでIoT
クラウド上のAPIを叩くとマイコンの入出力が制御できるというマイコン。
他のボードとはインターネット越しの制御がよくも悪くも違う。
<img width="773" alt="howobnizworks.png" src="https://qiita-image-store.s3.amazonaws.com/0/227015/6cc2cafe-5022-f1a5-13a9-5a35824d2432.png">

- **obnizが用意しているクラウドのサーバー上のAPIをjavascriptで叩いて使う**
APIなのでブラウザから指示を送れます。ブラウザ上のボタンを押したらモーターが回る　などのブラウザ連携ができるのが特徴ですね。

- **obnizが用意しているクラウドのサーバー上のAPIをnode.jsで叩いて使う**
こちらも同じですね。node.jsでも動くのでサーバーサイドからもいろいろできます。
（むしろjavascriptじゃなくてもいい・・・？）
VUIと組み合わせてgoogle　home連携とかも簡単です。


#まとめ

図にするとこんなのです。
自分のスキルと目的にあったマイコンボードを手に入れて、ハードウェア動かしましょう！
<img width="992" alt="スクリーンショット 2018-12-12 20.02.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/227015/0a24c769-e7aa-65cc-e567-405ae800de73.png">
AWS CLIのインストールと基本的な使い方

#AWS CLIとは
　AWS CLIは、AWSのサービスをWindowsのコマンドプロンプトやPowerShell、MacやLinuxのターミナルなど、手持ちの環境からコマンドラインベースで設定することができるツールです。AWSを使い始める際には、ブラウザを使って管理コンソールから操作した方がわかりやすいと思いますが、慣れてくるとコマンドラインがあると便利。また、コマンドラインでしかできない設定もある様です。

#インストール
特に難しいことはないと思います。WindowsならMSIインストーラーで次へ次へとクリックしていけば入る感じ。MacやLinuxの場合は、Python環境があればpipコマンドでインストールできます。

## Windowsでのインストール
　以下のページにて案内されているWindows用のインストーラーをダウンロードして、インストールします。（→[AWS CLIのインストール説明ページ](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/awscli-install-windows.html)）

　Windows環境においても、定期的にAWS CLIの最新版を追っていきたい場合は、上記MSIインストーラーよりもMac/Linuxと同様にPythonのpipを使ったインストールの方が良いかと思います。
　
## MacやLinuxでのインストール
　Python環境を整えてpipでインストールしてしまいましょう。Pythonとpipのインストール方法については、省略します。時間があれば別記事で紹介できればと思います。

ちなみに、記事投稿時点での自分のMac環境は次の通り。

```
$ python3 --version
Python 3.7.1
$ pip3 --version
pip 18.1 from /Users/(UserName)/Library/Python/3.7/lib/python/site-packages/pip (python 3.7)
```
この環境で次の様にインストールしました。

```
$ sudo pip3 install awscli 
```
Macの場合、brewを使ったインストールもお手軽とのことでしたが、後日AWS SAM CLIをインストールした際にうまく動いてくれなかった（なぜかは不明）ため、今はpipインストールでの環境を使っています。

# 初期設定
　インストールが終わったら初期設定です。

## お手軽コース
次のコマンドを叩いくといろいろ質問されるので、聞かれるがままにAWSアカウントのAccess Key IDとSecret Access Key、リージョン、出力フォーマットを指定します。

```
$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: ap-northeast-1
Default output format [None]: json
```
各行コロン（：）の右側は入力する文字列です。リージョンとして指定しているap-northeast-1は東京リージョンのことです。

## 自分で設定ファイルを書くコース
　自分で設定ファイルに書き書きして行く心意気のある方は、ホームディレクトリ直下にできている.awsディレクトリ配下に設定ファイルがありますので、そちらをどうぞ。

　上記お手軽コースで設定した内容は、credentialsファイルに直接書くこともできます。四角カッコで括られたセクションごとにIAMユーザーの情報を書いてゆく形です。どのユーザーでコマンドを実行するのか？は、このセクション単位で指定した情報が使われ、これをプロファイルと呼びます。

```
[default]
aws_access_key_id=AKIAIOSFODNN7EXAMPLE
aws_secret_access_key=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

[sonotano-account]
aws_access_key_id=AKISONOTANOACCOUNTMO
aws_secret_access_key=wFerfgbsDgstgSghsgDFHbshSHGderthDJdjyDJd
```

[default]セクションに基本的に一番よく使うアカウントの情報を書き込むことで、特にプロファイルを指定せずにコマンド実行する際に利用されます。AWS CLIでのコマンド実行はこんなイメージです。

```
$ aws (対象サービス名) (実行したい操作) --profile sonotano-account
```
対象サービス名は、S3だったりdynamodbだったり。実行したい操作は、S3のディレクトリ一覧であればlsといった感じです。defaultに指定したプロファイルでコマンド実行する際は、--profile以下は記述不要です。

## スイッチロールする場合の設定
　スイッチロールする場合は、追加の作業が必要です。スイッチロールというのは、複数のAWSアカウント間を一つのIAMユーザーでシングルサインインする場合に行う操作のことです。

スイッチロールする場合、スイッチ元のIAMユーザーとスイッチ先のIAMロールを関連づける必要があります。なので、その関連を＋C configファイルに記載します。configファイルも.awsディレクトリの直下にあります。

```
[default]
region=ap-northeast-1
output=json

[profile apple]
region=ap-northeast-1
role_arn=arn:aws:iam::123456789012:role/SwitchedAccessRole
source_profile=default
```

上記の例では、appleという名前のプロファイル名を定義して、IAMユーザー（スイッチ元）とIAMロール（スイッチ先）とを関連づけています。role_arnは、スイッチ先AWSアカウントのIAMロールを管理コンソールで開くと、そのARNが表示されるので、それをそのまま書きましょう。source_profileは、関連づけるスイッチ元のIAMユーザーを定義しているプロファイル名を記載します。

以上、一通り自分への備忘録を兼ねてまとめてみました。