OmniAICreator/Qiita-1.07M huggingface dataset:
React.js/Next.js：Stateless Functional Componentの最低限の書き方、呼び出し方備忘録

# 概要
* React.jsを使用して`Stateless Functional Component`（SFC)を書く場合の備忘録
* Next.jsを使用しているのでpageディレクトリなどが登場する
* domをレンダリングするcomponentと、domをレンダリングしないcomponentの二種類


# domをレンダリングするcomponent
## component側

```js:my_app/components/code_test/SfcDom.js
import React from 'react';

function SfcDom() {
    return <div>Hello World</div>;
}

export default SfcDom;
```


## 呼び出し側
```js:my_app/pages/code_test/sfc_dom_test.js
import React from 'react';
import Head from 'next/head';

// 自作component
import SfcDom from '../components/code_test/SfcDom';

export default class extends React.Component {
    render() {

        return (
            <div>
                <SfcDom/>
            </div>

        )
    }
}
```


## ブラウザからアクセス

![sfc_dom.png](https://qiita-image-store.s3.amazonaws.com/0/107536/e97c79c3-66b7-14c5-d00d-1a29c399bf7f.png)







# domをレンダリングしないcomponent
console.logで"Hello World"するだけのcomponent

## component側
```js:my_app/components/code_test/SfcConsole.js
function SfcConsole(){
    console.log('Hello World');
}

export default SfcConsole;
```


# 呼び出し側

```js:my_app/pages/code_test/sfc_console_test.js
import React from 'react'
import Head from 'next/head'

// 自作component
import SfcConsole from '../../components/code_test/SfcConsole'

export default class extends React.Component {
    render() {
        SfcConsole();

        return (
            null
        )
    }
}
```
## ブラウザからアクセス
![sfc_console.png](https://qiita-image-store.s3.amazonaws.com/0/107536/abd53243-dac4-36af-772d-ef8f51283ead.png)




# まとめ的な
reactを不定期に少しずつ触っていますが、exportとかrenderとかreturnとか結局何がしたいのかわからなくて混乱する。

この辺は英語できる人はとくに支障無いんだろうか。
JSON Schemaを動的に使いたい話

（「こんなふうにAPIつくりたい話」改め）
@tkawa
Sendagaya.rb 2017-12-18

※まだ実装がないので構想（妄想）の話になりますがご了承ください

---

# RubyKaigi 2017

[API Development in 2017](http://rubykaigi.org/2017/presentations/onk.html) onkさん

* [Rails での JSON API 実装まとめ](https://blog.onk.ninja/2017/09/21/history_of_json_api_with_ruby)

* [スキーマファースト開発のススメ](https://blog.onk.ninja/2017/09/21/schema_first_development)

---

# スキーマ

正直、スキーマの必要性をあまり感じていなかった

* [JSON Hyper-Schemaのようなサービスディスクリプションがうまくいかない理由](http://d.hatena.ne.jp/tkawa/20140828/p1)  


特定のフォーマット使えば良い派だったから

* [Web APIにはJSONベースのフォーマットを使おう](https://qiita.com/tkawa/items/2841e155e5b51c09ed40)

でも、HALなどがあまり普及していないところをみると、求められているものはスキーマなのかも

---

# スキーマ

> JSON Schema は「JSON の構造を定義できる」だけで、「API として使う JSON」の定義は JSON Schema の上にもう一つレイヤーが必要。

* JSON Schema / Hyper-Schema
* API Blueprint
* OpenAPI (Swagger)
* RAML

> だいたい全て
> * markdown とか YAML とかの書き易いツールで API 定義を書いたら
> * ドキュメントがめっちょ綺麗に出力されて
> * mock サーバも勝手にできて
> * ドキュメントの HTML 上からでも request/response を実際に投げてチェックできる

---

# 例えば Swagger の場合
https://swagger.io/specification/
サンプル
https://github.com/OAI/OpenAPI-Specification/blob/master/examples/v3.0/petstore-expanded.yaml
https://github.com/OAI/OpenAPI-Specification/blob/master/examples/v3.0/uber.yaml

パス、メソッド、パラメータ（型）、レスポンスの構造など
これがそのままAPIドキュメントになりそうな記述。
良いように思えるが…

だからパス、メソッド、パラメータは動的なんだって。
動的にしないと変化させることができない。

一応、「リソースタイプ」についての記述ととらえられなくもない。
パス定義は余計だが、「特定のリソースタイプは特定のパスに置かれる」という制約だと解釈できなくもない。（再利用を阻害するけど）

---

# スキーマは動的に（実行時に）解釈できなければならない

RESTful Web APIs 12章より
> しかし、「リソースの抽象セマンティックタイプ」と「私のデータモデルでのクラスの実装の詳細」を混同する強い誘惑があります。HydraコンテキストやODataメタデータドキュメントやWADLドキュメントは、サーバサイドのAPI開発者を誘惑して、標準の語彙を再利用する代わりに、それらの内部データモデルに基づいた1回限りの語彙を自動的に生成させます。
>
> そして、私が第9章で前述した大きな問題があります。これらのドキュメントはあまり頻繁に変更されないので、クライアントサイドのAPI開発者は、APIのアプリケーションセマンティクスの完全な概要を提供することが可能なサービス記述ドキュメントとしてそれらを扱うという誘惑にかられます。ユーザは、Hydraコンテキストに基づいてクライアントコードを生成する誘惑にかられるでしょう。それはコンテキストが変化すると壊れてしまうクライアントコードです。

---

# JSON Hyper-Schema

今までの使い方が間違い

* リソースごとの記述にして、それぞれをリンクさせて実行時に解決できるようにする
  - HTMLに対するCSSのように、JSONに対するスキーマ 
* JSON Schemaをフォームとしても使う。リクエスト・レスポンスどちらの構造もカバーできる

## フォーマットとの組み合わせ

* JSON + JHS  
  みんなが最初にやる形。でも結局ルールが決まってないのでやりづらい。
* HAL + JHS  
  HALに欠けているフォームがJHSで補える。コレクションの扱いに難。
* JSON-LD + JHS  
JSON-LDでやりたいならなぜHydra使わないの？という話ではある

---

# Railsでの実装アイデア

- JSON Schema をビューテンプレート(app/views)にしてJSONを生成する。
- JSON Schema を assets(app/assets) として asset pipeline にのせる
- JSON Schema を assets(app/javascripts) として Webpack にのせる

JSON Schemaはリソースごとに用意する必要があるため、どこでunify（&参照解決)するか。

---

# react-jsonschema-form

[react-jsonschema-form playground](https://mozilla-services.github.io/react-jsonschema-form/)

JSON Schema (+ UI Schema) に対応するHTMLフォームを組み立てる React component

すでにこれだけできてるから、可能なのでは

---

# 懸念

JSON Schema が本当にフォームの代わりに使えるのか
readonly, default, required, disabled, example(placeholder) みたいなもののサポート
バリデーションのコンテキストが必要？

JSON Schemaのセマンティックボキャブラリ拡張になるのかも。

---

# HTMLでやればいいじゃん

**その通り**

…だけど、React Native版ができたりすると夢がある
今年の振り返り（C#とともに歩んだ日々）

この記事は [Silbird Advent Calendar 2017](https://qiita.com/advent-calendar/2017/silbird) の19日目の記事です。

# Who?
僕は元々、WebエンジニアとしてWebサイトのコーディング業務を行ってました。
主に扱っていた技術は、HTML/CSS/JavaScript/PHPです。
JavaScriptについては、jQuery（ライブラリも含め）を扱う事が殆どで、稀に素のJavaScriptを扱うレベルです。PHPを扱う場合は、CMS絡みの多少のカスタマイズが必要なレベルです。
現在は、SilbirdでC#を扱ったサーバーサイドの開発をさせてもらっています。

# 今年1年の振り返り
今年は、一言で言うとプログラマとしての一歩を踏み出せた年でした。
プログラマとは何か。フロントエンドエンジニアとは何なのか。サーバーサイドエンジニアとは何なのか。
何ができればそう思えるのか。これまでの自分を曇りなき眼で見定めたとき、HTML/CSSの領域に尽きた自分を
プログラマと思えたことはありませんでした。ですが、今は少しだけ自分のことをそう思えるようになれましたし、認められるようになれました。

# エンジニア（プログラマ）と思えるようになれたのは
偏に、CTO, Chief, 隣で助けて下さったエンジニアの皆さんと社風のおかげです。
そして、自分自身の力であり、C#と出会えたことでもあります。
具体的に、下記に挙げたことを教わり、こなしていく中でそれを実感できたように思います。

## テストをすること、レビューをしてもらうこと
開発スピードは爆速です。そんな中、スピードを意識しながら費用対効果が伺える改修や施策をガンガン当ててもらいました。
仕組み上でのエンジニアテストを行う中で、テストをするたびに既存を疑います。
テストはチェックだけではなく、サービスをよりよくするためのプロセスでもあります。
テストを行うことで、既存の仕様を理解し、更にはコードの読解力やコードを追う力も身に付いたように思います。

また、自分がどのようにテストしたのかを書くことで、言語仕様の齟齬にも気付き理解し直すことも出来ました。品質も担保出来ます。pullreqレビューでは、自分の書いたコードの改善点に気付き、知見を得ることが出来ました。

## 問題の解決方法とその考え方をエンジニア視点で伝えること
「実現したい内容と実装のかい離がないか、正しい問題にフォーカスしているか等を考えること、そして、それをエンジニア視点で伝えること」を意識出来るようになりました。

## アウトプットすること
「量は質に転化する、量によって質が磨かれる」という言葉があります。社内エンジニア色強めなので、アウトプットすることで多くの技術のインプットを得ることが出来ます。
また、理解し合い（他人の考えを全否定することや考えを変えさせることではなく）、認識を擦り合わせることも、時に自分が主体となり、責任を持ってプロダクトをより良きものにすることも出来ます。

# C#/ASP.NET に出会えて良かったこと
はじめの一歩として、C#に出会えたことは、JavaScript/TypeScript(AltJS)を理解し直す点でも大いに良い出会いでした。

## 静的型付け
型があることの良さとしては、いくつかありますが、
個人的には、下記のような利点があると感じました。

・そのメソッドが表しているデータの種類が分かる、またドキュメント替わりでもある
・コンパイル時に型違いだとエラーチェックが走る
・オーバーロード便利

型定義と実装の差が密接に結びついているので、なぜこのメソッドがあるのか、
このメソッドで何がしたかったのか、を知る道標にもなり、日々助けられています。

## LINQ
LINQとは「Language　Integrated　Query」の略で、オブジェクト、データベース、XML等のデータに問い合わせ処理が可能です。簡単に書くとこんな感じです。

```Csharp
using System;
using System.Collections.Generic;
using System.Linq;

namespace ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
            var nums = new List<int> { 1, 2, 3, 4, 5, 6 };
            var queries = nums.Where(x => x % 2 == 0);

            foreach (var query in queries)
            {
                Console.WriteLine(query); // 2, 4, 6
            }
        }
    }
}
```

Whereメソッドは、複数の要素の中から条件に一致した要素を見つけるメソッドです。配列でもList<T>でも、Dictionary<TKey,TValue>でもそれ以外のオブジェクトであっても、IEnumerableインターフェイスを実装している型であれば利用できます。LINQのメソッドは他にもいくつかありますが、SQLライクであったり、直感的で分かりやすく、コードも美しく端的に表すことができます。

## MVCの概念（ASP.NET MVC）
MVC（Model-View-Controller アーキテクチャー）パターンを扱うとアプリケーションの各側面（MVCそれぞれが持つべきロジック/役割/債務）を分離することが出来ます。
各側面を分離することで、1つの側面に専念して開発することができます（それぞれが疎結合なので独自で開発することが出来ます）。今となっては、これがないと、どこに何を書けば良いのやら。。。と迷ってしまいます。

参考：https://msdn.microsoft.com/ja-jp/library/dd381412(v=vs.108).aspx

フロントエンド界隈でも、MVW(Whatever), MVVMパターンなどありますが、
ASP.NET MVCに触れられたおかげで、合わせて体系的に理解する足掛かりになりました。

# 最後に
拙い記事になってしまいましたが、僕は、Webの技術が好きで、フロントが好きで、でも今は C# も大好きです。お世話になっている先輩方や開発メンバーには、本当に感謝しかありません。人間的な面でも技術的な面でも尊敬しています。最初こそ挫けなかったのは、優しくも厳しく教え支えてもらえたからだと思っています。
百尺竿頭に行き着くことはないとは思いますが、行き着いたとしても更に一歩を進み、今後とも精進したいと思います。
全ての Pod を一発でリロードさせる方法

前提条件:

- Deployment を使ってアプリケーションのデプロイ管理を行っている

## tl;dr

PodTemplateSpec の Label か Annotation (`.spec.template.metadata.[labels|annotations]`) に適当な key-value を追加・上書きする。
value はタイムスタンプにでもしておくと便利。

```yaml
apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: awesome-app
  labels:
    name: awesome-app
    role: web
spec:
  minReadySeconds: 30
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxSurge: 50%
      maxUnavailable: 0
  replicas: 20
  template:
    metadata:
      name: awesome-app
      labels:
        name: awesome-app
        role: web
      annotations:
        reloaded-at: "20171217190756" # <========== これ
```

シェルコマンド一発でやるなら以下。エイリアス作っておくと便利。

```bash
# "frontend" Deployment 配下の Pod を全部リロードする
$ kubectl patch deployment frontend -p \
  "{\"spec\":{\"template\":{\"metadata\":{\"annotations\":{\"reloaded-at\":\"`date +'%Y%m%d%H%M%S'`\"}}}}}"
```

## Why

Kubernetes で Pod に設定を注入するには ConfigMap や Secret が主に使われます。
これらの中身は Pod 起動時に Pod へコピーされる仕組みとなっているため、アプリケーション起動中に中身を変更してもそれが即反映されるわけではありません。
Pod を作りなおす必要があります。

じゃあどうするか？

### 今動いている Pod を消す

Running Pod を消せば、ReplicaSet の設定に基づいて Pod が必要な数だけ再作成されます。
…が、当然ながら相当乱暴なやり方です。

### Deployment の仕組みに則ってデプロイする

通常のデプロイだと、`kubectl set image` などで PodTemplateSpec にある Docker image tag を更新して新しい Pod をデプロイします。
しかし、Kubernetes では**差分のない PodTemplateSpec** を再度デプロイすることはできません。
つまり、通常のオペレーションでは同じ Docker image をデプロイすることができません。

## What

PodTemplateSpec に差分が発生すれば新しい ReplicaSet が作られて Pod がデプロイされます。
なので Docker image や環境変数以外のアプリケーション動作に影響しない Pod spec、つまり Label や Annotation を編集すればよいのです。

いつリロードしたのかわかりやすいように、注入する値はタイムスタンプにでもしておくとよいでしょう。

Deployment の設定に基づいて Pod の再作成が行われるので、（設定をちゃんとしていれば）パフォーマンス劣化やダウンタイムが発生することもない graceful restart となります。

## Ref

- [Force deployment rolling-update · Issue #27081 · kubernetes/kubernetes](https://github.com/kubernetes/kubernetes/issues/27081#issuecomment-229252547)
VAE と AE の違いを調べてみた

# ちょっと目を離すと、わからなくなる AI の進展

ざっくりと研究の同行を追っていたが、忙しくなるとすぐに追いつけなくなる。「まぁ、いいや」と放置していたところ、ある講義をやることになった。

準備段階で Auto Encoder のサンプルを探していたが、ほとんど見つからず。Variational Auto Encoder は見つけたけど、「Auto Encoder と Variational Auto Encoder って何が変わったんだっけ？」と疑問点をつぶすことになった。

# 教えて Google 先生!

ちょっと調べてみると、こんなんが出てきた。

https://www.quora.com/Whats-the-difference-between-a-Variational-Autoencoder-VAE-and-an-Autoencoder

Auto Encoder の説明を抜粋する。

> autoencoders learn a “compressed representation” of input (could be image,text sequence etc.) automatically by first compressing the input (encoder) and decompressing it back (decoder) to match the original input. The learning is aided by using distance function that quantifies the information loss that occurs from the lossy compression. So learning in an autoencoder is a form of unsupervised learning (or self-supervised as some refer to it) - there is no labeled data.

Google 翻訳にかけると、こんな感じ。

> オートエンコーダーは、最初に入力（エンコーダー）を圧縮し、元の入力に一致させるために元に戻す（デコーダー）ことによって、入力の「圧縮表現」（画像、テキストシーケンスなど）を自動的に学習します。学習は、非可逆圧縮から生じる情報損失を定量化する距離関数を使用することによって助けられる。したがって、オートエンコーダーで学習することは、教師なし学習（または、それを参照するように自己監督する）の一形式です。ラベル付きデータはありません。

たぶん、基底関数のようなものを作っていることに該当しそう。

他方で、VAE の説明を抜粋する。

> Instead of just learning a function representing the data ( a compressed representation) like autoencders, variational autoencoders learn the parameters of a probability distribution representing the data. Since it learns to model the data, we can sample from the distribution and generate new input data samples. So it is a generative model like, for instance, GANs.

Google 翻訳にかけると、こんな感じ。

> オートエンコーダーのようにデータ（圧縮された表現）を表す関数を学習するだけでなく、VAEはデータを表す確率分布のパラメーターを学習します。データをモデル化することを学ぶので、分布からサンプリングして新しい入力データサンプルを生成することができます。つまり、GANのような生成モデルです。

AE の処理にくわえて、確率分布ありき、かつ、データの分布を確率分布にフィッティングさせている、と理解。

以下、Chainer の VAE のサンプルコードを解析してみた。

# クラス図にしてみた

Chainer のサンプルコードをクラス図（とロバストネス図のちゃんぽん）にしてみた。

![train_vae.py.png](https://qiita-image-store.s3.amazonaws.com/0/73790/e7575a46-9e20-2cf8-3048-a6101cc1e2e8.png)

VAE.get_loss_func と学習・評価まわりの処理が本質的なところに見える。

- AE は encoder から decoder で再構築する際の損失(reconstruction loss)のみで評価する
- VAE は reconstruction loss だけでなく、KL Divergence による損失も加味する。そこではベルヌーイ分布の尤度を想定する（参考資料を見た気がするが、ロストしてしまった）。

確率分布の選択がどれだけ妥当なのか、それは扱うデータによると思う。その選択肢にどのようなものがあるか、使い分けるポイントは何か、というところが残課題として残った。

しかしながら、とりあえず目的である VAE と AE の差分はわかったので、メモとして残し、心のイシュー管理上では本件をクローズしておく。
Kotlinでデータベースを使おう！③（ランキングを作る・アクセス権限）

##**【Kotlin×mBaaS】シリーズ概要**

* Kotlinで[ ニフクラ mobile backend ](http://mbaas.nifcloud.com)(通称：mBaaS)を使ってSwiftで開発を始めたい人向けのドキュメントです。
* [ ニフクラ mobile backend のAndroid(Java SDK)用ドキュメント](http://mbaas.nifcloud.com/doc/current/index.html)を**Kotlin**用に書き換えて動かしてみたものをまとめました。
* 初心者でもわかりやすいよう心掛けて作っていますが、わかりにくい部分がありましたらコメントをいただければ訂正しますのでお気軽にご意見をお願いします^^*
* 今回は**＜データストア編③＞**としてランキングを作る・アクセス権限設定です！
 * 注：「データストア」が[ ニフクラ mobile backend ](http://mbaas.nifcloud.com)の「データベース」のことです◎

##**事前準備のお願い**

* 事前に ニフクラ mobile backend の登録とアプリの新規作成をし、[KotlinでmBaaSを始めよう！](https://qiita.com/nifcloud_mb/items/5b6290977f3147c3bc4f)をご覧いただき、必要な初期設定(SDKのインストールなど)をAndroid Studio上で行った上でご利用ください。

##**Kotlinでデータベースを使おう！**

* [ ニフクラ mobile backend ](http://mbaas.nifcloud.com)のダッシュボードで確認をしながらAndroid Studioで動作確認をしてください。
* ドキュメントの動作確認の方法については[Kotlinでデータベースを使おう！①（保存・取得・更新・削除）](https://qiita.com/nifcloud_mb/items/eef8102fd47bf7e5aa9f)の「ドキュメントの動作確認方法」にまとめてありますので参考にしてみてください。

##**ランキングを作る**

Androidアプリでランキングを実装する場合の使い方について解説します。

### **_スコアの保存_**

* 通常のオブジェクトの保存方法と同じようにプレイヤー名とスコアを設定してデータストアのHighScoreクラスに保存します。

```kotlin:Kotlin
// HighScoreクラスのインスタンスを作成
val score = NCMBObject("HighScore")
// 名前とスコアをセット
score.put("Name", "name")
score.put("Score", 0)
// データストアに保存
score.saveInBackground { e ->
    if (e != null) {
        // 保存に失敗した場合の処理
    } else {
        // 保存に成功した場合の処理
    }
}
```

###**_ランキングの取得_**

* 各プレイヤーのスコアが保存されるHighScoreクラスから、スコアの降順データを検索することで、簡単にランキングを取得できます。

```kotlin:Kotlin
// HighScoreクラスを検索するNCMBQueryを作成
val query = NCMBQuery<NCMBObject>("HighScore")
// Scoreの降順でデータを取得するように設定
query.addOrderByDescending("Score")
query.setLimit(5)
query.findInBackground { objects, e ->
    if (e != null){
        // 検索失敗時の処理
    } else{
        // 検索成功時の処理
    }
}
```
* ゲームのにオンラインランキングはこんなに簡単に実装できてしまうんですね！！

##**アクセス権限設定**

データストアのACL機能を利用して各データのアクセス権限を会員、ロールごとに設定する方法を説明します。

* ACLを設定する場合は、NCMBAclクラスを利用します。

```kotlin:Kotlin 
//ACLオブジェクトを作成
val acl = NCMBAcl()
//読み込み(検索)・書き込みを全開放を設定
acl.publicReadAccess = true
acl.publicWriteAccess = true

val obj = NCMBObject("test")
//オブジェクトにACLを設定
obj.acl = acl
obj.save()
```
* 会員やロールを対象にACLを設定することも可能です。このとき、会員やロールは登録が済んでおりobjectIdを持っている必要があります。
* 一部会員管理クラス(userクラス)の知識が必要です。
  * 会員管理のドキュメントには[__＜会員管理編＞__](https://qiita.com/nifcloud_mb/items/bcd4581dfade77cb123e)をご覧ください。

```kotlin:Kotlin
val sharedNote = NCMBObject("Note")
sharedNote.put("content","This note is shared!")
// NCMBACLのインスタンスを作成
val groupACL = NCMBAcl()
val user = NCMBUser()
user.userName = "user"
user.setPassword("password")
//上記ユーザー名とパスワードで新規登録ログインを実施
user.signUp()
// 引数で渡された会員userへの読み込み権限を設定する
groupACL.setReadAccess(user.objectId, true)
// 引数で渡された会員userへの書き込み権限を設定する
groupACL.setWriteAccess(user.objectId, true)
//ACLをオブジェクトに設定する
sharedNote.acl = groupACL
sharedNote.save()
```

##**参考**

* 元サイト
 * [データストア \(Android\) : ランキングを作る \| ニフクラ mobile backend](http://mbaas.nifcloud.com/doc/current/datastore/ranking_android.html)
 * [データストア \(Android\) : アクセス権限設定 \| ニフクラ mobile backend](http://mbaas.nifcloud.com/doc/current/datastore/contents_android.html)
rbenv + ruby-build + bundle 実行手順


## localバージョンを指定

```
rbenv local 2.4.3
```

## bundlerインストール

```
rbenv exec gem install bundler
rbenv rehash
```

## Gemfile生成 & 設定

```
rbenv exec bundle init
vi Gemfile
.....
```

## bundle install実行

```
rbenv exec bundle install --path vendor/bundle
```
phpのcURL(sftp)でファイルをダウンロードする

#
PECL ssh2が使える環境では、
ssh2_connectなどを使って接続するのがいいと思います。

## ssh2_系が使えるか確認(使えないパターン)
```bash
$ php -r 'ssh2_connect("example.com");'
PHP Fatal error:  Call to undefined function ssh2_connect() in Command line code on line 1
```

## ssh2_系が使えなかったので、cURLでやってみる。

```php5
        $host = 'test.example.com';
        $port = 22;
        $src = '/home/hoge/remote.txt';  // フルパス
        //$src = '/~/remote.txt';        // 相対パス
        $dst = './local.txt';

        $fh = @fopen($dst, 'w');
        if (!$fh){
            throw new \Exception("ファイルが保存できません。");
        }

        $curl = curl_init();

        curl_setopt($curl, CURLOPT_FILE, $fh);

        // プロトコルの設定
        curl_setopt($curl, CURLOPT_PROTOCOLS, CURLPROTO_SFTP);

        // 認証は適宜修正(今回は、id:pass)
        curl_setopt($curl, CURLOPT_SSH_AUTH_TYPES, CURLSSH_AUTH_PASSWORD);
        curl_setopt($curl, CURLOPT_USERPWD,"{$username}:{$password}");

        // ポートの設定
        curl_setopt($curl, CURLOPT_PORT, $port);

        $url = "sftp://{$host}:{$src}";
        curl_setopt($curl, CURLOPT_URL, $url);

        $ret = curl_exec($curl);
        if (!$ret){
            // 失敗したときは、ファイル削除した方がいいかも
            throw new \Exception("ファイルのダウンロードに失敗しました。");
        }

        curl_close($curl);

        fclose($fh);
```

### 注意
CURLPROTO_SFTPが指定できない環境もあるようです。
react-intlが0を表示しない

# react-intlのvaluesに 0 を渡すと 0 が描画されない

例えば以下のような時

```javascript
<FormattedMessage
  id={'メッセージのID'}
  values={{ min: 0, max: 255 }}
/>

// 0 ~ 255 と表示されることを期待
// 実際には ~ 255 と表示される
```

`react-int`内部で使用している`intl-messageformat`のバグでした。
このバグは`intl-messageformat v2.0.0`で解消されてます。

メッセージに`values={{ min: 0, max: 255 }}`を埋め込む以下の処理でバグが発生していたようです。

```javascript
/* /src/compiler.js */
StringFormat.prototype.format = function (value) {
  // 修正前
  if (!value) { // 0はfalseになる
    return '';
  }
  // 修正後
  if (!value && typeof value !== 'number') { // 0はnumberなので通らない
    return '';
  }

  return typeof value === 'string' ? value : String(value);
}
```

コミットコメントに`zero values should not return an empty string`の文言がなかったら絶対見つけれなかった・・・


一応解決方法は以下に載ってました。
試しておりませんが載せておきます。
https://github.com/yahoo/react-intl/issues/561

または、0を文字列にして指定してやると表示されます。
Macの操作をWindowsっぽくする

2017年新卒のひよっこです。
今回は、Macの操作をWindowsっぽくしているので、それを紹介しようと思います。

#内容
ざっくりとした内容はこんなかんじ。

1. WindowsのCtrlとMacの⌘の位置を同じにする
2. キー入力をWindows風にする
3. Windowsの画面分割ショートカットと同じ機能をするソフトを入れる

#メリット
- WindowsでもMacでも操作が似ているため、覚えやすい！
- WindowsとMac両方使っている時の操作間違いが起きにくい！

#デメリット
- 他人のPCを操作するときに、めちゃくちゃ間違える！

#Ctrlと⌘を同じ位置に
Macで一番イライラしたのが、WindowsのCtrlの位置にあるのが、Capsなこと。
癖ですぐ押すので、すぐにロックがかかってしまい、文字の入力中にローマ字になってしまうなんてことが…。
Capsはほとんど使わないので、なんとかここにCtrlの代わりになる⌘を入れたい…。

ありました！

Macのデフォルトの機能で、キーを変えることができます。

##手順
1. システム環境設定を開く
2. キーボードを選択
3. キーボードタブの右下にある、「修飾キー…」を選択
4. 一番上のCaps Lockキーを「⌘　Command」に変更
5. OK

これで左下のCapsキーが、⌘と同じになりました！
ためしにコピペのショートカットを使ってみるとわかると思います。

#キー操作をWindows風にする
Macは、Enterキーを二回押さないと確定してくれません。
しかも、入力中に勝手に変換する…。
なので、それもWindowsに寄せます。

1. システム環境設定を開く
2. キーボードを選択
3. 入力ソースタブを開く
4. 「ライブ変換」のチェックを外す
5. 「Windows風のキー操作」にチェックをつける

<img width="400px" alt="キーボード.png" src="https://qiita-image-store.s3.amazonaws.com/0/195419/6efbaaed-51c5-b567-5d01-29172c5d9f9b.png">

これでおっけーです！

#画面分割ショートカットソフト
Windowsは「Windowsキー + 矢印キー」でウィンドウを画面右半分に寄せたり…左半分に寄せたり…全画面にしたり…がとても簡単にできます。
Macの仮想デスクトップでも似たようなことができますが、アプリ同士をくっつけたいわけじゃないし、アプリを全画面にしたいわけでもない…。

それでおすすめなのが、ShitItです。

1. [ダウンロードページ](https://github.com/fikovnik/ShiftIt/releases)からzipファイルをDL
2. 適当な場所で展開
3. 中のappをアプリケーションフォルダに移動
4. ダブルクリックで開く

###開発元がうんちゃら…で開けなかったら…
1. システム環境設定を開く
2. セキュリティとプライバシーを開く
3. 一番下にappが開けなかった…という文字と一緒に「開く」ボタンがあるのでそこをクリック
4. 本当にいいかと聞かれるのでOKを選択
5. あとは、自動アップデートするか、などと尋ねられるので、そこはお好みで

##Mac側の設定
このままだと、Macが認識してくれないので、MacにShitItを認識して！とお願いしに行きます。

1. システム環境設定を開く
2. セキュリティとプライバシーを開く
3. アクセシビリティをクリック
4. 「下のアプリケーションに…」と書かれているところにある、「ShiftIt.app」にチェックを入れる
    - もし変更できなかったら、左下の鍵マークをクリックして変更可能にしてください。

すると、上のバーに、なんかよくわからない、四角の中に、毛を横にしたようなマークが出てくると思います。

##ShitIt側の設定
上のマークをクリックすると、設定できるようになります。

1. クリック後、環境設定を選択
2. 左のタブからショートカットを選択

ここの一覧に、あてはめたいキーを入れれば、おっけーです！

###**注意**
ブラウザやMacで使っているショートカットよりも上になるので、同じショートカットをあてないように気をつけてください。

#まとめ
これでだいぶWindowsに近づいたと思います。
Macの操作をWindowsっぽくしたい…という方がいたら、参考にしてみてください。
【Swift4】タップでラベルのテキストをクリップボードへ【iOS】


不可視ボタンを乗せたり、touchesEndedをオーバーライドする手もありますが、タップジェスチャーがおすすめです。
　
<i>
不可視ボタン => ラベルオブジェクトのサイズが可変な場合は制約を同じにする必要がある
touchesEnded => タップされたオブジェクトの判別ロジックが必要
</i>

### コードから

```swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tapLabel:UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tapLabel.text = "please tap here"
        tapLabel.isUserInteractionEnabled = true

        let tg = UITapGestureRecognizer(target: self, action: #selector(ViewController.tappedLabel(_:)))
        tapLabel.addGestureRecognizer(tg)
    }

    @objc func tappedLabel(_ sender:UITapGestureRecognizer) {
        UIPasteboard.general.string = tapLabel.text
        print("clip board :\(UIPasteboard.general.string!)")
    }
   
}
```

### ストーリーボードで

```swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tapLabel:UILabel!
    @IBAction func tapAction(_ sender: UITapGestureRecognizer) {
        UIPasteboard.general.string = tapLabel.text
        print("clip board :\(UIPasteboard.general.string!)")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tapLabel.text = "please tap here"
        tapLabel.isUserInteractionEnabled = true
    }  
}  
```
　

##### テキストを扱う場合、setValue()ではなく、stringプロパティを使うこと
```swift
// iOS11では動作しない
UIPasteboard.general.setValue("source string", forPasteboardType: "public.text")

// これならOK
UIPasteboard.general.string = "source string"
```
[VR] K∀RT3 GARDENで目指したもの

はじめまして、株式会社プレイドの秋山です。

非エンジニアな僕ですが今回[PLAID Advent Calendar](https://qiita.com/advent-calendar/2017/plaid)に参加することにしました。

早速ですが先月(11月末)に"K∀RT3 GARDEN" (KARTE GARDEN)というVRプロダクトを発表しました。

##K∀RT3 GARDENとは
弊社の"[KARTE](https://karte.io/)"というサービスが目指している世界観を表現する一つの形です。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">K∀RT3 GARDENの動画だよー<a href="https://t.co/ZwvulWGrns">https://t.co/ZwvulWGrns</a><a href="https://twitter.com/hashtag/karte?src=hash&amp;ref_src=twsrc%5Etfw">#karte</a> <a href="https://twitter.com/hashtag/VR?src=hash&amp;ref_src=twsrc%5Etfw">#VR</a></p>&mdash; GO AKIYAMA (@ggg) <a href="https://twitter.com/ggg/status/935779718665682945?ref_src=twsrc%5Etfw">2017年11月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

一言で言うと、WEB上のユーザの行動をVR空間内に割当て、人感重視な可視化をしたものです。

今回はPAL様のご協力で、[PAL Closet](https://www.palcloset.jp/)に実際に来ているユーザーをリアルタイムでVR空間にアバターとして表示しています。
PAL Closetでは、トップスやパンツ、アクセサリーなどの商品カテゴリがあり、それぞれのカテゴリをVR店舗内のコーナーに割当てています。

こんな感じ。
<img width="1020" alt="2017-12-13 15.48.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/45192/829c1921-9ea0-cf6b-5fed-7b96f7257bb8.png">

今回はK∀RT3 GARDENの目的中心で書きます。

##目的は？
まぁVRなんで**体験してもらわないと価値が伝えにくい＆そもそも体験する機会が多く作れない**、という現段階では越えられない壁がありますが、このプロダクトで感じ取って欲しいのは、**「WEBと実店舗での接客(UX)の乖離」**です。
それを理解してもらうには"人感"が重要なのでVRを採用しました。

##接客の乖離
人が何かモノを買うという意味では、WEBサイトでも実店舗でも**本質的に違いはありません**。
それなのに、どうやらWEBマーケティングというやつは一人のユーザーを数字で捉えてしまう。
数字は大事だし便利なのですが、数字でしか捉えないのが問題で、その過程で僕らの考える"人感"を無くしてしまいます。

例えば、実店舗にて同じ商品を長い時間見ているお客さんがいたら、「色かサイズ感か値段で悩んでいるのだろうか？」と、わりと当たり前な感覚を店員は持てると思います。

しかし、WEBサイト上ではほとんどの場合、そのようなユーザーに対しては放置しています。
ここに実店舗とWEBサイトの接客には乖離があります。

人同士の直感的なコミュニケーションの差異が乖離であり、その乖離を埋めるヒントは"人感"だと考えました。


##人感の演出
正直、"人感"をどう表現するべきなのか答えは出ていません。
しかし、VRであれば自分のすぐ横をアバターが横切る、よく知っている目線で他のアバターを見るなど、人の気配に似た感覚は持てそうでした。

そのためにはアバターが移動するアニメーションや、アバター自身の見た目も重要です。

やったことはシンプルで、KARTEで行った接客やユーザーセグメントなどをVR内のアバターに反映させただけです。
サイト内の回遊があればVR店舗内のコーナーの移動、接客が発動すれば光の柱（通称マンションエフェクト）が表示、という具合に。

アバターのデザインはリアルに寄せてしまうと"不気味の谷"など今回の主旨とは関係ない問題が起こるので、あえてシンプルなデザインとしています。

![img_02.jpg](https://qiita-image-store.s3.amazonaws.com/0/45192/09c5d46c-cb74-baf6-b086-77976a5265ea.jpeg)

あとは一般的なVRと同様、酔いにくくするためにフレームレートの維持や、なるべく直感的な操作を目指したUI、最初に一通り体験してもらうためのチュートリアルなどを作成しました。


##まだまだ未完
実は、今回のK∀RT3 GARDENは本当に最初の一歩であり、構想としてはまだまだ先があります。
嬉しいことに、今回のK∀RT3 GARDENは色々な方から興味を持って頂き、またフィードバックも頂いております。
それらを踏まえて、今後もK∀RT3 GARDENならではの提供価値を追求していきたいと思います。

ぜひ体験されたい方は、2018年の1月14日(日)に開催される「JapanVR Fest 2018銀座」にて出展いたしますのでお越し下さいー！
http://jvr-fest.com/2017/11/2958/
ええっ！？　文字列で書くの！？　ログレベル付きロガーhashicorp/logutilsのご紹介

全世界100万人のコンパイルエラーラバーの皆さんこんばんは、この記事は[Go Advent Calendar 2017](https://qiita.com/advent-calendar/2017/go)の18日目の記事です。

## 標準パッケージの`log`

Goで作るものはミドルウェアだったり、Webアプリケーションだったり、CLIツールだったり様々だと思いますが、ちょっと凝ったことをするとついてくるものといえばロギングですよね。Goには`log`という標準のログライブラリがありますが、

* 標準パッケージなので`import "log"`だけで使える
* インターフェイスがシンプル。だいたい`fmt`
* 複数goroutineから扱っても混ざらない
* そのまま使っても時間が出る

などなど、最低限の実用性があります。ただ、他の言語のロガーと比べると、

* ログレベル
* 構造付きログ

などの機能が不足していると言えます。

## よく使われているロガー

そもそもこの記事を書くきっかけとなったのが、[Go Conference 2017 Autumn](https://gocon.connpass.com/event/66615/)での、[Goのロギング周りの考察](https://www.slideshare.net/ssuser88ff5b/gocon2017go)という発表を見たことだったのですが、このトークでは様々なロガーが上げられています。

私が使ったことがあるものだと、[github.com/sirusupen/logrus](https://github.com/sirupsen/logrus)と[go.uber.org/zap](https://github.com/uber-go/zap)が挙げられていました。この2つは提供する機能も似通っていますが、私がほしい「ログレベル」と「構造付きログ」の機能は搭載されています。

ちなみに、WebSocketを扱うミドルウェア[kuiperbelt](https://github.com/mackee/kuiperbelt)では、以前[logrusからzapへの移行](https://github.com/mackee/kuiperbelt/pull/35)を行いました。理由はベンチマーク上の速さなどからです。

## ミニマリスト向けロガーlogutils

先ほどの発表スライドの中で気になったのが[github.com/hashicorp/logutils](https://github.com/hashicorp/logutils)です。このライブラリは、標準パッケージの`log`と同じインターフェイスを持ちながらログレベルの機能を実現しています。

え？？？　思うのですが、こんな感じです。

```go
log.Printf("[DEBUG] debug log")
log.Printf("[WARN] warning log")
log.Printf("[ERROR] error log")
```

ええっ！？　文字列で書くの！？　というわけで先頭に書いた`[***]`をログレベルの指定とみなして出力するかどうかを決めているわけです。

さらに言うとこの`log`というのは標準パッケージの`log`です。使い始めるときには

```go

import (
    "log"
    "github.com/hashicorp/logutils"
)

func main() {
    filter := &logutils.LevelFilter{
        Levels: []logutils.LogLevel{"DEBUG", "WARN", "ERROR"},
        MinLevel: logutils.LogLevel("WARN"),
        Writer: os.Stderr,
    }
    log.SetOutput(filter)

    // do something
}
```

と標準パッケージの`log`の出力先に`logutils`のフィルタを指定することで、出力するかどうかを決めているわけです。一番初めのエントリーポイントでこのように書いておけば、他のロガーライブラリのように書き方自体を全部変更して回るみたいなこともしなくてよいわけです。

開発初期は`log`とか`fmt`でログ出していたけれど、後からログレベルがほしいなってときには便利ですね。

## しかし文字列だとtypoするやろ

静的型付け世界にいる我々としては、出来るだけ文字列の中の何かで挙動を変えることはせず、型や変数などで指定したくなります。何故なら、typoしたときにコンパイラが怒ってくれるからです。しかし`logutils`は、それと逆行するようなライブラリです。いくら互換性と言われても。

私もはじめはそう思ったのですが、よく考えると発展性があるなと思いました。自分で関数書けば良いわけです。

```go
func debug(msg string) {
    log.Print("[DEBUG] " + msg)
}

func warn(msg string) {
    log.Print("[WARN] " + msg)
}

// errorであってもerrであっても被ることが多いのでここだけはerrorlogにする
func errorlog(msg string) {
    log.Print("[ERROR] " + msg)
}
```

とまあ、自分でこういう簡単なラッパーを作ってあげれば、typoに対する備えも出来ます。

## 構造化されたログ出力が欲しい

これもラッパー作りましょう

```go
func debugJSON(msg interface{}) error {
    bs, err := json.Marshal(msg)
    if err != nil {
        return err
    }
    debug(string(bs))
}
```

`[]byte`から`string`にキャストし直しているのとかちょっとダサいですが概観はこんな感じです。あとログ吐くときにエラーもらってもどうするねん問題とかありますね。それはまあさておき。

## まとめ

* `github.com/hashicorp/logutils`はパッと見ちょっとあれ？ってなるけれど、使い始めるのが楽で良いよ
* 元がシンプルすぎて機能が足りなかったら簡単なラッパー書けばいいよ
* typoもラッパー書けば防げるよ

という話でした。
Terraformの使い方 ver.2017冬

続きをかきました→ https://qiita.com/uraura/items/e13d883827443f27bf98

# 概要
TerraformでAWSのリソース管理をしていますが，(少人数でやるには[^2])まぁまぁ良い感じに落ちついたのでご紹介します．

以下，話を簡単にするためにTerraformでAWSのリソースを管理しているという前提で話をすすめます．

# 問題
Terraformは便利で，使いはじめると何でもかんでもコード化してやろう!!などと思ってしまいますが，すぐに以下のような問題にぶち当たります．

1.  コード化をすすめると`plan/apply`にかかる時間が増大していく
2. `plan`が通っても`apply`でコケる場合がままある

##  コード化をすすめると`plan/apply`にかかる時間が増大していく
コード化されてるリソースが少ないうちはあまり問題にならないのですが，時がたちコード量が増えてくると，`plan/apply`にかかる時間がどんどん伸びていきます．

巨大な`module`があると，コード量の増加は数行だったとしても所要時間は一気に増えたりするので要注意です．

## `plan`が通っても`apply`でコケる場合がままある
プルリクエスト作ったら`plan`して，マージされた`apply`する，というフローをよく(?)みかけます．
一見すると分かりやすいフローではありますが，**planが成功していようが結局applyしないとどうなるかわかりません**．一度この状態に陥ると，

- applyを通すために微修正したプルリクエストを何度も作ることになってつらい
- applyが通っても意図した通りの結果になっていなくてつらい

みたいなことになり，加えてコード量がそれなりに多い場合は(1)の問題がクリーンヒットしてきます．

# どうしたか
大きくわけて2つです．

- AWSアカウントを開発(dev)／ステージング(stg)／本番(prd)で分ける
- [Terraform Provider](https://www.terraform.io/docs/providers/terraform/index.html)を使う

## AWSアカウントを開発(dev)／ステージング(stg)／本番(prd)で分ける
よくある話だと思います．(IAMを完全にマスターすれば1アカウントで頑張れるのかもしれませんが，ちょっと自分には無理です．．．)

各アカウントの用途は以下のような感じになります．

- devはローカルマシンから`plan/apply`できるようにしてしまう
- CIからapplyする確認はstgで取る
- stgで確認できたらprdにもapplyする

devを，**対象プロジェクト専用のsandbox**とみなしてしまうのがポイントです．
そもそもdevは壊れる前提で作ってるわけですし，ぶっ壊れたら作りなおせばいいよね?(それをしないなら何のためにコード化を．．．?)
新規で何かリソースを追加するにしても，既存のリソースがある前提で考えられますし，
何よりdevで`apply`までやってしまうことにより，無駄なプルリクエストを作りまくらなくても良くなりCI待ちなども無くサクサク開発できるようになります．

※冒頭で**少人数で**と書いたのはこのあたりの事情にもよります．複数人で1つの環境に同時に`apply`すると多分よくわからない状態になります．

### :thinking:  Terraform検証用AWSアカウントについて
以前は，Terraformの検証は調査／学習用の(共通の)AWSアカウントでやる，という感じでした．その場合はローカルマシンから`apply`できるようになっていると思いますが，以下のような問題もあります．

- 関係ない他のリソースが作られていたりする
- 検証したいリソースに必要な依存先があればそれも含めて作る必要がある
- 検証終わったらちゃんと消さないと無駄に金がかかる

また，通常は必要最低限のリソースしか作らないので，**そのコードを加えた際に増加するapply時間**がまったく見えなくなります．

というわけで，一切プロジェクトと関係ないリソース(個人の趣味とか将来的には使うかもとか．．．)の確認には良いですが，現在のプロジェクトで使う前提のリソースを確認する目的なのであればそのプロジェクトのdevでやるのが良いのでは，という感じです．

## [Terraform Provider](https://www.terraform.io/docs/providers/terraform/index.html)を使う
Terraform ProviderというProviderがあります．一言でいうと，**他で実行されたTerraformのtfstateを参照できる**Providerです．イメージは下記の通りです．

```tf:terraform_A
resource "aws_s3_bucket" "foo" {
 :
} 

output "s3_bucket_foo" {
  value = "${aws_s3_bucket.foo.id}"
}
```

```tf:terraform_B
data "terraform_remote_state" "tf_a" {
  backend     = "s3"

  config {
   :
  }
}

data "aws_s3_bucket" "foo" {
  bucket = "${data.terraform_remote_state.tf_a.s3_bucket_foo}"
}
```

これで，`terraform_A`を`apply`した結果できたS3バケットfooを，別の`terraform_B`が参照できるようになります．
`terraform_B`内ではS3バケットfooは存在することを前提として動けるため，`plan/apply`が爆速になります．

基本は`module`で完結させ，`module`外で必要なリソースは`output`を定義する，という感じにする[^1]と，どこに何があるのか把握しやすくて良い感じです．
`terraform output`コマンドで`output`されている値を一覧できる[^3]ので，必要なときにぱっと探しやすいという利点もあります．

# まとめ
- Terraformはapplyしやすい環境を整えると捗る
- Terraform Providerをつかってtfstateを分割すると時短になる[^4]

---

[^1]: 具体的な構成はまた別の記事に書くかも．．．
[^2]: 自分自身がそんなに大勢の人がTerraformを同時にいじくるという環境にいたこと無いというのと，現実的にはインフラ構成いじるの少人数じゃない?という憶測があるためです．
[^3]: `terraform_remote_state`で参照するためには`root`レベルで`output`されてなければいけない(仕様)せいで若干めんどくさかったりもする．
[^4]: [TerraformのBest Practice](https://www.terraform.io/docs/state/workspaces.html#best-practices)的にも推奨っぽい
Full Page Screen Capture の使い方

最近、ページ全体のスクリーンショット（スクロールが必要なページ）を取る必要があり、Chromeの拡張機能でぴったりの機能があったので紹介します。

# Full Page Screen Capture

以下のURLにアクセスし、右上の `Chromeに追加` ボタンを押せば、使えるようになります（簡単！！）。

- [Full Page Screen Capture](https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl)


# Full Page Screen Capture の使い方

urlの横にカメラのアイコンが出てくるので、それを押すだけ。
パックマンに似ているやつが、ボールを全部食べると結果の画面を見せてくれます。

右上のダウンロードボタンを押せば、ページ全体のスクリーンショットをゲット！
Log Viewerを2017.2.0p2以降に入れる場合の注意

## [Log Viewer](https://assetstore.unity.com/packages/tools/log-viewer-12047)便利ですよね。
端末単体でのテストプレイであってもログを見る事が出来るのは素敵だと思います。
しかもタダだし。これはインポートするしか無い（やり方は割愛）！

## あれ？ エラーがでる。
![logviewer_builderror.png](https://qiita-image-store.s3.amazonaws.com/0/48561/6dca6ff9-5c98-f4c9-ccb3-e7823d0ca4cd.png)
あらやだ。obsoleteじゃないですか。

## デバッグしましょう
以下の3行をコメントアウトでOKです。

```c#:Unity-Logs-Viewer/Reporter/Reporter.cs
if (Application.platform != RuntimePlatform.OSXWebPlayer && Application.platform != RuntimePlatform.WindowsWebPlayer)
	if (!url.Contains("://"))
		url = "file://" + url;
```

# アップデートを待ちましょう
Log Viewerがアップデートするのを待ちましょう。改善されたらこの記事も更新します。


##### 2017/12/21追記
アップデートが来ていたので早速入れましたが相変わらずビルドエラーは解消されていませんでした。
また、良く見たらMonoBehavior.OnLevelWasLoadedを使っているので、更に未来には使えなくなる可能性が見えています。ここも改善出来ればいいなぁ。
Delphi Starter Edition ユーザーが使用できる、自作フリーソフトのソースコードを、２本公開いたします。 


### (ソースコード公開サイトは、ただいま準備中でございますが、ご興味のある方は、[公開ソースコード申し込みフォーム](http://den6.jp/index.php/about/den6%E3%80%801.17-%E3%83%A4%E3%83%9E%E3%83%88b2c-ie%E8%BB%A2%E9%80%81%E7%94%A8%E3%80%80%E5%85%AC%E9%96%8B%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%28delphi-xe10%29/) にて、ご連絡いただき、少し、お待ちくださいませ)

- ソースの内容と、Delphi 10.2.2 Starter Editionでの環境構築手順は、こちらをご覧ください。
http://a23.sblo.jp/article/181871502.html
http://a23.sblo.jp/article/181872541.html

- https://den6.jp/
のフリーソフトの中より、コンポーネントのインストールが必要なもの1本　(メモなどから、住所氏名などの項目を分割して、送り状を印字するもの)

- タイプライブラリのインポートが必要なもの1本　(メモなどから、住所氏名などの項目を分割して、IE11の各項目にデータを転送するもの)

- [タイプライブラリのインポートはこちらが参考になります]
https://ht-deko.com/delphiforum/?vasthtmlaction=viewtopic&t=2026
https://ht-deko.com/delphiforum/?vasthtmlaction=viewtopic&t=2027
http://mrxray.on.coocan.jp/Delphi/CompoInstall/TypeLibraryD2009.htm#01

- ご興味のある方は、お試しください。
https://yuru-phi.connpass.com/
でも、基礎的な学習から、すこしステップアップしてみたい方のトレーニング用に、にいかがでしょうか? 
お使いいただければ、幸いでございます。
iOSでコマンドラインで実機にアプリをインストールできる、ios-deployについて

### はじめに
* android 開発の場合、AndroidSDK には、実機をコマンドラインで操作できる adb がついてくるので、アプリ(apk)を、コマンドラインで実機にインストールできます。
* 一方、iOSSDK にはそのようなコマンドラインツールはついてこないので、アプリ(ipa)を実機にインストールするときは、いちいちXCodeを開いてインストールする必要があります。
* そんなときに、ios-deploy という便利コマンドラインを使うと、 ipa ファイルをコマンドラインで実機にインストールすることができます。

--- 

### install
```
npm install -g --unsafe-perm=true ios-deploy
```

* --unsafe-permについて
このフラッグをつけないと、下記のようなエラーがでるので、対象のOSの人はつけてください。
```
You are on OS X 10.11 El Capitan or greater, you may need to add the
!!!! WARNING:   `--unsafe-perm=true` flag when running `npm install`
!!!! WARNING:   or else it will fail.
!!!! WARNING: link:
!!!! WARNING:   https://github.com/phonegap/ios-deploy#os-x-1011-el-capitan
```

--- 

### ipaのインストール
* 事前に実機を USBケーブルでつないでおいてください
* Developemnt で sign したipaが必要です

```
$ios-deploy --bundle <path_to_ipa>
```

--- 

### ipaのアンインストール

```
$ios-deploy --uninstall_only --bundle_id <bundle_id>
```

--- 

### FAQ
* 端末の接続を確認するには? 

```
$ios-deploy  --detect
```

* 複数の端末を同時につないでいたらどうなるの？ → すべての端末にインストールされます
* 特定の端末にインストールするには？ → --id で device id を設定できます

--- 

### その他
* ドキュメント的なもの upload できるようなので、便利かも（試していません）
* ReactNative のフロントエンドと、組み合わせると幸せになれるはず（試していません）
* fastlane にも、単に ios-deploy を叩く install_on_device という Action が用意されているので合わせて利用すると便利です
glsl 出来ること出来ないこと

# glsl 出来ること出来ないこと

画面出力に関しては、画面解像度の最小単位、1ドット毎の出力コントロールが出来るので、理論上は出来ないことはないと言える。但し、その処理が重いかどうかは別問題。そこで、この記事では、glslの得意なことと不得意なことを挙げていく、尚、バーテックスシェーダーとフラグメントシェーダーでそれぞれ、glslの得意なことと不得意が変わってくるので、それじれの項目で挙げていく

# フラグメントシェーダー
## 不得意なこと
### 文字の表示
ベジエ曲線での描画が困難。glslでのシェイプ描画方法であるディスタンスフィールドと互換性がない。文字については、頑張ってディスタンスフィールドで作って、ASCII文字(A-Z 0～9)を表示できるようにしたものがある。すべての漢字に対応したものは見たことがない。フラグメントシェーダーしか使えないshadertoyやglslsandbox上で漢字を表示するのは困難である。

### ベジエ曲線の表示
ベジエ曲線での描画が困難。glslでのシェイプ描画方法であるディスタンスフィールドと互換性がない。
ベジエ曲線のディスタンスフィールドは実装が存在するが、複数パスを持つベジエ曲線は、塗りの問題があったり、大量の頂点を配列の扱うのが難しい為、なかなか実装が難しい。バーテックスシェーダーでベジエ曲線を描く方法は割と多く見かけることが出来、頑張れば実装できる。

### タイムライン処理
状態の保存が出来ないため、常にすべてのタイムラインを演算する必要がある。それも、毎フレーム毎、全ピクセル分でプログラムが実行されるため、とても効率がが悪い。タイムラインが長くなればなる程に重くなる。if文による条件分岐で少しは軽くすることが出来るが、そもそも、glslは条件分岐も得意じゃない。glslsandboxやshadertoyに投稿するのでなければ、タイムライン処理はJavaScriptに任せた方がいい。

## 得意なこと
### フィルター処理
After EffectsやPhotoshopにあるようなフィルターを簡単に書くことができる。
但し、After EffectsやPhotoshopのフィルターの仕組みを知っている必要がある。
### 塗り
ポリゴンの影を付ける言語ゆえに、塗りの自由度は極めて高い。
PhotoshopやIllustratorで1つの操作で出来ない塗りも楽々こなす。
但し、PhotoshopやIllustratorの塗りの仕組みを自分で作る必要がある。

# バーテックスシェーダー
## 不得意なこと
### 塗り

バーテックスシェーダー単体で塗りを行うのは厳しい。頂点に色を付け、それを群体として、点や線、面を使って塗りのようなものを再現することは出来る。その場合でも少なくとも色の出力をフラグメントシェーダーで表示できるようにしておく必要がある。逆にこれを利用して、画像を分解して飛び散らせる処理などはバーテックスシェーダーの方が向いている。

## 得意なこと
### パーティクルの描画
頂点情報をパーティクルの情報として扱えば、高速なパーティクルの描画が可能になる。但し、glslは情報の保存が出来ないので、パーティクルの情報をテクスチャーに焼き込んで使用する必要がある。

### 文字の表示
Three.js等のライブラリを利用することで文字を表示するのは比較的簡単かつ、低負荷である。
尚、コード自体は複雑なので、ライブラリを用いず自分でバーテックスシェーダーを書こうとすると大変である。
テッセレーションを用いて実現しているので、曲面が角張り易いという問題がある。

### ラインアート、ドットアート
座標によって大きさや幅が変わらない点や線によるアートを作ることができる。
だが、実際には円を線状に伸ばしたものが使われたりするので、あまり、活用できる事例はなかったりする。大量に線と点を扱う場合には有効。また、最初から、角ばった表現を利用したいときなど
Project Euler Q49 【素数数列】

Project Eulerをワンライナーで解いてみる。
間違っていたらコメントください。


## 問題
項差$3330$の等差数列$1487, 4817, 8147$は次の$2$つの変わった性質を持つ.

(i)$3$つの項はそれぞれ素数である.
(ii)各項は他の項の置換で表される.

$1, 2, 3$桁の素数にはこのような性質を持った数列は存在しないが, $4$桁の増加列にはもう$1$つ存在する.

それではこの数列の$3$つの項を連結した$12$桁の数を求めよ

## 解答

```bash
seq 1000 $((9999-2*3330)) |
factor |
awk 'NF==2{print $1*1,$1+3330,$1+2*3330}' |
factor |
tr ' ' '_' |
xargs -n3 |
tr '_' ' ' |
awk 'NF==6{print $2$4$6}' |
awk -v FS= '{delete a;for(i=1;i<=NF;i++){a[$i]=1};print $0,length(a)}' |
awk '$2<=4{print $1}' |
tail -1
296962999629
```

最初は問題文の読み取りが正しく出来なかった。公差$3330$であることも条件のひとつだとは読み取れなかったし、各数字もユニークでなければならないと思った。

## 答え合わせ
こちらのサイト様と一致していればOKとした。
http://kingyojima.net/pje/049.html
iosでスクロールできない時 

何度か同じバグにぶち当たってる気がするので、備忘録も兼ねて書いておきます。

スマホでナビゲーションを実装する時にスクロールできたり、できなかったりするバグがある。
jsの書き方が悪いのかな？とか思って調べてみたが、なんてことはない、cssの書き方の問題でした。
```ios9``` と ```ios10``` で確認済み。

## 原因
同じ要素の
```position``` プロパティに ```absolute``` か ```fixed```で絶対位置指定をしている
```height``` プロパティと ```overflow``` プロパティを使って要素内スクロールさせようとしている
```-webkit-overflow-scrolling``` プロパティに ```touch``` を指定している

**Before**

```css

.menu-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  max-height: 77vh;
  padding-top: 55px;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  overflow-y: scroll;
}
```

## 解決方法

**After**

```css

.menu-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11;
  background-color: #fff;
}
.menu-content-inner {
  padding-top: 55px;
  max-height: 73vh;
  -webkit-overflow-scrolling: auto;
  overflow-scrolling: auto;
  overflow-y: scroll;
}
```

```position``` と ```overflow```を別の要素に指定してあげる。

``` overflow-scrolling ```を```auto```にする。

これで解消できました。
touchを指定したままだと、解消できなかったのですが、autoだと慣性スクロールができないので、使い勝手が悪いです。。

何か解決方法ないですかね。


参考URL
https://qiita.com/chocolamint/items/67d25933880404c93db0
Vectorクラスをカジュアルに使っていく

Ruby の標準ライブラリのなかの Vector クラスがとても便利なのですが、利用の機会が少ないようなので、もっと気軽に使っていく例を紹介します。

# 例1. 普通に計算が面倒なときに使う

まず `require "matrix"` します。このなかに Vector クラスが入ってます。

で、配列の同じインデックスの要素をそれぞれ足したい場合、

```rb
[1, 2] + [3, 4] + [5, 6]                      # => [1, 2, 3, 4, 5, 6]
```
とするのは、単に配列同士が繋がってしまいます。

そこで次のようにしてもいいのですが、

```rb
[[1, 2], [3, 4], [5, 6]].transpose.map(&:sum) # => [9, 12]
```

Vector を使うとより自然に表現できます。

```rb
Vector[1, 2] + Vector[3, 4] + Vector[5, 6]    # => Vector[9, 12]
```

# 例2. 座標として使う

二次元座標なら、

```rb
a = Vector[1, 2]
b = Vector[3, 4]
a + b                           # => Vector[4, 6]
```

三次元座標なら、

```rb
a = Vector[1, 2, 3]
b = Vector[3, 4, 5]
a + b                           # => Vector[4, 6, 8]
```

`a + b` の部分は同じというところがポイントです。

# 例3. Railsアプリのデバッグ中に使う

まとめて引き算もできるので、関連テーブルのレコード数の変化をさっと確認したいときなど、次のように簡単に書けます。

```rb
a = Vector[User.count, Article.count, Favorite.count, Community.count]
# (ここで何か実行)
b = Vector[User.count, Article.count, Favorite.count, Community.count]
p b - a
```
cssで縦書きするの楽しい。

css大好きフロントエンドエンドエンジニアです。

知り合いに「[たてよこ webアワード](https://tategaki.github.io/#SCT4)なんてものがあるよ」と教えられ、見てみると想像以上に面白かったので、触ってみた感想を書きます。

# 縦書きと横書き
まずは、縦書き横書きについて軽く

現在の日本語では縦書きと横書きとどちらも使われているんですが、元来日本語は漢文に倣って文字を上から下へ、そして行を右から左へと進める縦書きの表記を行うものでした。
思い返してみると、中学、高校時代の教科書に乗っていた、歴史的な文章（古文とかでやったやつ）は全部縦書きでした。
古い看板などで、（例えば武道館を「館道武」みたいな感じに）右読みの横書きになっている文章も、実は縦書きで、「一行一文字」の縦書きらしいです。

あとは、なんか有名な人が「日本語は縦書きが美しい」みたいなありがたい言葉を残していたような気がします...
もともと縦書きのするために作られた文字なんだしそうだよなあと気もします。

そして、まあいろいろありまして、戦後ぐらいから現在でメジャーな左読みの横書きが一般的に使われるようになったそうです。

詳しいことはwikipediaなどで調べると良いでしょう。
[wikipedia | 縦書きと横書き](https://ja.wikipedia.org/wiki/%E7%B8%A6%E6%9B%B8%E3%81%8D%E3%81%A8%E6%A8%AA%E6%9B%B8%E3%81%8D)

# webでは横書き
上にだらだら書いたような歴史があるものの、webで通常使われるのは横書きですよね。
自分でもついこの間までは、「webでは横書き」 そう思っていました。
webの仕事をやってて縦書きを気軽に使える環境がないことには何の疑問もなく過ごしていたんですが、
冒頭に紹介した、[たてよこ webアワード](https://tategaki.github.io/#SCT4)や、縦書きの歴史的なものをみると、「縦書き標準化されてないのいやだああ」ってなりますよね、

しかし！現在！ブラウザ(IE,Edgeとか)で対応していないプロパティはあるものの、ブラウザで表示が若干違うものの、
css3からcssで縦書きデザインをできるみたいです。
やったー！

# cssで縦書き
とりあえず、何も考えずやってみました
文章は福沢諭吉先生の「学問のすすめ」の一部です
（[青空文庫](http://www.aozora.gr.jp/cards/000296/files/47061_29420.html)より引用）

<a href='https://codepen.io/eeonk/pen/VyePVG/'>
<img width="517" alt="スクリーンショット 2017-12-18 17.45.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/130949/1b6fd853-b034-a88c-58f2-10517b99bc81.png"></a>
<a href='https://codepen.io/eeonk/pen/VyePVG/'>codepenのサンプル</a>

なかなかいい感じです。
これだけで縦書きができるなんて、天国でしょうか

```html
<div class="container">
  <div class="exp">
    <p>「天は人の......</p>
    <p> ... </p>
  </div>
<div>
```

```scss
.container {
  text-align: center;
  padding: 5%;
  box-sizing: border-box;
}
.exp { 
  writing-mode: vertical-rl;
  column-count: 4;
  column-gap: 2em;
  display: inline-block;
  height: 1600px;
  text-align: left;
  margin-bottom: 30px;
  p + p{
    margin-right: 2em;
  }
}
// ※-webkit-とかprefixつける必要あるんですが、省いてます
```

## やっぱりかゆいところもある
IE,Edgeで非対応のプロパティがあったり、だいぶ崩れがあったりなどあるんですが、そこらへんは時間が解決してくれるでしょう...

### 現在IE,Edge非対応のプロパティ
text-orientationプロパティが現在（2017年12月20日 win7 IE11で確認）使えないっぽいです。

```scss
  // テキストに応じて自動判断
  text-orientation: mixed;

  // すべてのテキストを正立
  text-orientation: upright;

  // すべてのテキストを横倒し
  text-orientation: sideways;
// -webkit-つける必要あります
```

縦書きの中で和文と英数それぞれの縦組みと横組みを指定するやつなんですが、
ざっとこんな結果になりました。
<a href="https://codepen.io/eeonk/pen/zpqbOO/">![tex-otientation-sample.png](https://qiita-image-store.s3.amazonaws.com/0/130949/6f424644-cb39-886e-5726-ad4f76217c54.png)</a>
<a href="https://codepen.io/eeonk/pen/zpqbOO/">codepenのサンプル</a>

毎度毎度IEの「え？何か言った？」みたいな態度には、もう格好良ささえ感じてきそうです...

### いい感じに段落送りしてくれない
それ以外でかゆいと感じたところは、幅固定で、はみ出るたびに下に送る的なことができないこと...
やってみようとしたら、はみ出た分も表示されるもののboxとしてはheightで指定した高さまでしかブロックとして表示してくれないので、下に来るコンテンツがしっかり被っちゃいました。
<a href='https://codepen.io/eeonk/pen/jYWMZL/'>
![スクリーンショット 2017-12-18 17.50.17.png](https://qiita-image-store.s3.amazonaws.com/0/130949/706b6f91-63ac-dae2-aaae-f34a456ee7a7.png)
</a>
<a href='https://codepen.io/eeonk/pen/jYWMZL/'>codepenのサンプル</a>

上のようなこと起きなくするために、何かしらのハックがあったりするといいなあと思いつつ、ここら辺で終わります。

# まとめ
webの縦書き楽しいなというのがですね
縦書きサイトの可能性を感じつつ、cssの縦書き対応がもっと使いやすくなることを期待することとします。
縦書きのデザイン作るのも楽しそうですし...
かっこいい縦書きwebサイト増えるといいですね。
人工知能と強化学習について簡単に解説してみる

PLAID Advent Calendar 2017 20日目です。

今日は人工知能と強化学習について @eshinji が簡単に触れてみます。

対象読者は人工知能とか強化学習に興味はあるけどよくわかってない人です。

# 人工知能とは
人工知能（以下AI）には強いAIと弱いAIという分類があるのをご存知でしょうか？強いAIは人間の脳そのものをシミュレートを目指しています。弱いAIは強いAIと違い、問題解決や推論を行うソフトウェアの実装つまり、特定の問題に対しての解決というのが目的となります。今回はその弱いAIについての話です。

# 強化学習とは
機械学習の一種で、行動の選択を取り扱うような問題を解く手法の一つです。本稿は強化学習について簡単な解説が趣旨となります。そもそも機械学習が何かというと、人間が自然に行っている学習能力と同等の機能をコンピュータで実現しようとするものです。機械学習はAIを構成する要素技術であり、ほぼAIと等価だと思って頂いて構いません。その中の強化学習は特定の問題に対する手法なので弱いAIに分類されます。

# 探索と活用
学習能力を実現することが目標なのですが、学習とは何なのでしょうか。辞書的には「人間も含めて動物が、生後に経験を通じて知識や環境に適応する態度・行動などを身につけていくこと。不安や嫌悪など好ましくないものの体得も含まれる。」とあります。端的に言うと経験を通じて適応していくということになるかと思います。ではどうやってコンピュータ上に実現していくかという話になっていくのですが、キーワードは探索と活用です。意味付けでいえば経験を探索、適応を活用と置き換えてみてください。問題を探索しその結果を活用するという流れが強化学習ということです。

## 多椀バンディッド
TD学習やQ学習の方が強化学習としてはメジャーなのですが、ABテストといえば多椀バンディッドアルゴリズムがよく比較されるということで、今回はこの多椀バンディッドについて解説していきます。なぜABテストかって言うと弊社プロダクトで提供してるからです。（ちなみに後述の強化学習も実装済みです）

### 問題設定
簡単に言うと以下のような問題があった時にどう効率よく攻略するかということになります。

- 複数台のスロットを独占して回す時に報酬を最大化したい
 - 回せる回数には限りがある
 - スロット毎に当たり期待値が異なるため期待値の高い台を多く回したい

期待値の高い台を探しながら報酬を最大にするにはどうすればよいかということになります。探索のためには台を評価しないといけないため、問題を解くには各台のその時の評価が重要ということになります。

以下が基本的な強化学習の流れになります。

1. 台の評価
2. 探索：いろんな台を試す
3. 活用：良かった台を回す

探索と活用は同時だったり、片方だけ実行されたりします。

#### 台の評価
期待値をそのまま使うのが一番簡単な方法になりますが問題を解くアルゴリズムに応じて評価方法が異なります。事項で簡単にですが解説します。

#### 探索と活用
以下のアルゴリズムが一般的によく知られています。基本的にはどの台を回すかを決定するアルゴリズムです。

- ε-greedy
- softmax
- UBC(Upper Confidence Bounds)
- Thompson Sampling

##### ε-greedy
εの確率で探索を行いそれ以外で活用を行います。探索時は選択肢を同じ確率としてランダムに決定するのが一般的です。εを施行回数に応じて100から0にしていくことで台を固定させることができますがあまり一般的な方法ではありません。探索時の確率がこれまでの試行を無視して一定のため、探索時の活用が他の手法に比べ劣ります。

特殊なケースとして`ε = 100%`をABテストとみなすことができます。

##### softmax
評価から台の選択確率を計算して台を選択します。n台のうちiが選択される確率は以下のように計算されます。確率で台が選択されるため探索と活用を同時に行います。

```math
\frac{exp(r_i/\tau)}{\sum_{k=1}^{n}exp(r_k/\tau)}
\\r_i は台iの期待値
```

パラメータ(*τ*)に応じて確率計算時の確率が異なります。*τ*が小さければ小さいほどより期待値の高いものが選択されやすくなります。εと同様にτを0に近づけることによって台を固定することが可能です。

##### UCB
各台を以下の式で評価します。全試行回数（*totalCount*）に比べて、試行回数（*count*）が少ない台の評価が高くなるため選択されやすくなります。期待値部分が活用で回数考慮の部分が探索になります。

```math
r_i + \frac{\sqrt{2log(totalCount)}}{count_i}
```

実行回数が増えていくと台が固定化されていきます。

##### Thompson Sampling
試行回数を報酬からβ分布に従った確率分布を求め、確率分布に従ったサンプリングによって確率的に評価をし回す台を決定します。同じ状態であってもランダムで評価が変化するため探索と活用を同時に行います。試行回数が増えていくことによって選択される台は固定されていきます。

### 多椀バンディッド問題まとめ
多椀バンディッド問題を例に、強化学習で用いられる手法について簡単に解説してみました。どの手法にも言えることですが、どのように正しい評価に効率よく近づけるかというのを考えて設計されています。ただし、必ずしも1番良い台に固定されることは保証されていません。2番目3番目に固定されていくことも原理的にはあり得ます。そのことも良し悪しで、全体の報酬を良くするという意味では探索を早めに切り上げてその時に1番良いと思うものだけを実行するとというのも大事な戦略です。

## おわりに
強化学習を多椀バンディッドを例に簡単に解説してみました。結局そんな大したことしてないなとか思っていただけると幸いです。
nodebrewで9.3.0を入れようとしたら怒られた


9.3.0が出たのでアップデートしようとして

```bash
$ nodebrew install-binary 9.3.0

v9.3.0 is not found

Can not fetch: https://nodejs.org/dist/v9.3.0/node-v9.3.0-darwin-x64.tar.gz
```

となった。 ちなみに`macOS High Sierra`です。

調べたら[nodebrewでinstallが失敗するようになった](https://qiita.com/shimitei/items/7975bc1b60cfb477817e)の記事にあたりました。

>nodejsサーバーが新しくなったことによりレスポンスの解釈ができなくなったためのようだ。
> http://var.blog.jp/archives/70091283.html

らしい、僕の場合は`nodebrew selfupdate`を実行するだけで解消したので残しておきます。定期的に起こるのかもしれないですね。

```
$ nodebrew selfupdate

Fetching nodebrew...
Updated successfully
```

そのあと問題なくインストールできました。

```
$ nodebrew install-binary 9.3.0

Fetching: https://nodejs.org/dist/v9.3.0/node-v9.3.0-darwin-x64.tar.gz

・
・
・
####################################################################### 100.0%
Installed successfully
```

```
$ nodebrew use 9.3.0
use v9.3.0
```

```
$ node -v
v9.3.0
```
Meshしてみた


# やりたいこと

- meshをgetしたのでmesh → RaspberryPi → SpreadSheet までをやってみる
- 職場の電気の点灯、消灯を検知してみる

# 事前準備

- mesh 光センサー
- Raspberry Pi 3 Model B
- microSD SanDisk Ultra Plus 16GB
- マウス、キーボード、HDMIケーブル（初回設定時に利用）
- SDカードアダプタ（OSイメージコピー時に利用）

![image03.png](https://qiita-image-store.s3.amazonaws.com/0/4873/94d8c4e1-90f4-3aa5-cc44-c6bdf4690ece.png)


# [rasp側] OSインストール
http://techblog.clara.jp/2016/04/raspberry-pi-3-model-b_install_and_ssh_connect/

- install [os:RASPBIAN STRETCH WITH DESKTOP] ※2017-11-29-raspbian-stretch.img
- ssh enable
- timezone -> jp

# [rasp側] セットアップ
https://support.meshprj.com/hc/ja/articles/115002125554

- パッケージダウンロード

```bash
pi@:~ $ cd Downloads
pi@:~ $ wget -O mesh_1.0.0_armhf.deb 'DOWNLOAD URL'
```
- 依存パッケージ
 
``` bash
pi@:~ $ sudo apt-get update
pi@:~ $ sudo apt-get install bluez dnsutils sqlite3 libcrypto++-dev libcrypto++-utils libcurl4-openssl-dev
```
- install

``` bash
pi@:~ $ sudo dpkg -i mesh_1.0.0_armhf.deb
```
- boot

``` bash
pi@:~ $ mesh start
```
``` bash
pi@:~ $ ps -ef | grep mesh | grep -v grep
root     28273     1  0 12:55 ?        00:00:02 /opt/mesh/node/bin/node /opt/mesh/current/index.js
root     28284 28273  3 12:55 ?        00:15:45 /opt/mesh/node/bin/node /opt/mesh/current/bin/meshhub
root     28387 28284  0 12:55 ?        00:00:28 /opt/mesh/node/bin/node /opt/mesh/current/services/recipe/RecipeRuntimeChildProcess.js 000001
root     28401 28284  4 12:55 ?        00:21:41 /opt/mesh/node/bin/node /opt/mesh/current/bin/taghub
pi@:~ $
```

# [mesh側] 設定

- スマホのMeshアプリを使って"raspberry pi"に接続

![image01.png](https://qiita-image-store.s3.amazonaws.com/0/4873/324dfb1f-9de7-b8eb-7b1a-c392a7570e6b.png)

- Meshアプリでセンサーとspreadsheet(IFTTT)をつなぐ

![image02.png](https://qiita-image-store.s3.amazonaws.com/0/4873/18bc4c54-b64b-dae1-ea8e-1c1488ec4f60.png)

```
[中身]
タグ
　→明るさ
ロジック
　→明るさが変わったら
　　→１～２：消灯
　　→４～５：点灯
```

- ためす

![image04.png](https://qiita-image-store.s3.amazonaws.com/0/4873/9dffe1b3-d963-6d54-d70c-5ca96cb0c82d.png)

# まとめ

Mesh操作のあたりはGUI操作のみで
プログラムらしいプログラム何も書かないで終わりました
ただ上の結果にもある通りうまくやらないと結構誤検知になってしまいます（センサー的には正しい）
そのあたりはプログラマならではのロジックが必要なんでしょう（きっと）