OmniAICreator/Qiita-1.07M huggingface dataset:
Orange Pi ZeroからRaspberry PiにMQTTで通信する

[Raspberry PiにMosquitto Brokerをインストールした](http://qiita.com/morinokami/items/2491ee501c908fb0e8f2)ので、Orange PiからMQTTを用いてpublishし、Raspberry Piでsubscribeしてみます。今回はPythonのMQTT Python client libraryである[paho-mqtt](https://pypi.python.org/pypi/paho-mqtt)を利用します。


# Raspberry Pi (Subscriber) 側の準備

Subscriber側のコード (mqtt_subscriber.py) は以下のようになります:

```py
#!/usr/bin/env python

import paho.mqtt.client as mqtt

host = '127.0.0.1'
port = 1883
keepalive = 60
topic = 'mqtt/test'

def on_connect(client, userdata, flags, rc):
    print('Connected with result code ' + str(rc))
    client.subscribe(topic)

def on_message(client, userdata, msg):
    print(msg.topic + ' ' + str(msg.payload))

client = mqtt.Client()
client.on_connect = on_connect
client.on_message = on_message

client.connect(host, port, keepalive)

client.loop_forever()
```

`on_connect`はBrokerとの接続確立時に呼ばれるコールバック関数です。また、`on_message`はBrokerからメッセージを受信した際に呼ばれるコールバック関数です。


あとは、このコードを任意のディレクトリで実行します:

```shell-session
$ virtualenv venv
$ source venv/bin/activate
$ pip install paho-mqtt
$ python mqtt_subscriber.py
Connected with result code 0
```

# Orange Pi (Publisher) 側の準備

Publisher側のコード (mqtt_publisher.py) は以下のようになります:

```py
#!/usr/bin/env python

import time
import paho.mqtt.client as mqtt

host = 'xxx.xxx.xxx.xxx'
port = 1883
keepalive = 60
topic = 'mqtt/test'

client = mqtt.Client()
client.connect(host, port, keepalive)

for i in range(3):
    client.publish(topic, 'hello from orangepi')
    time.sleep(1)

client.disconnect()
```

1秒間隔で三回、"hello from orangepi"というメッセージをBrokerにpublishしています。`host`にはRaspberry PiのIPアドレスを指定します。

Subscriber側が実行されていることを確認した上で、こちらのコードも実行します:

```shell-session
$ virtualenv venv
$ source venv/bin/activate
$ pip install paho-mqtt
$ python mqtt_publisher.py
```


# 実行結果

```shell-session
$ python mqtt_subscriber.py
Connected with result code 0
mqtt/test hello from orangepi
mqtt/test hello from orangepi
mqtt/test hello from orangepi
```

無事MQTTによってOrange Pi ZeroからRaspberry Piへと通信することができました:thumbsup:
定期的にネットワーク速度をチェックして後でまとめて閲覧したい

# 家のネットワーク速度を計測しよう

最近、夜にネットが非常に重たい。SpeedTestかけると1Mbps行かないこともしばしば・・・。
何曜日の何時頃にどれぐらい重たいとか調べて、その間はインターネットしない生活しようと計画しました。

## 概要

CentOS7でpip入れてspeedtest-cli入れてcronで定期実行、出力は可能な限り見やすくする。

## 事前準備

`speedtest` コマンドが使えるように準備。
rootで作業してます。一般ユーザーであれば適宜sudoをしてください。

```bash
yum install epel-release
yum install python2-pip
pip install --upgrade pip
pip install speedtest-cli
```

`speedtest` 実行結果を見やすく、後で再利用しやすい形にしたいため `moreutils` も入れておく。

```bash
yum install moreutils
```

## スクリプト準備

`/root/bin/` に設置して、 `/root/speedtest/` 以下に結果を保存する前提。

```bash:save-speedtest.sh
#!/bin/sh

save_path=/root/speedtest/$(date +'%Y%m%d')/$(date +'%Y%m%d-%H%M%S.txt')
mkdir -p $(dirname $save_path)
/usr/bin/speedtest | ts '%Y-%m-%dT%H:%M:%S' > $save_path 2>>/root/speedtest_error.txt
```

このスクリプトをcronで定期実行させます。(省略)

## 計測結果の閲覧方法

とりあえず、Downloadだけ。

```bash
grep -Rh Download /root/speedtest
```

以下のような出力が得られます。

```
2017-06-22T23:57:30 Download: 8.66 Mbit/s
2017-06-23T00:01:01 Download: 2.08 Mbit/s
2017-06-23T00:01:00 Download: 3.10 Mbit/s
2017-06-23T00:20:21 Download: 4.90 Mbit/s
2017-06-23T00:20:53 Download: 6.92 Mbit/s
```

タイムスタンプはRubyで `Time.parse` できる形にしてます。
後でグラフ化とかしたくなったときのためです。
詳しく見たくなったらRubyスクリプトでも書こうかと思います。

## あとがき

データがとれたら、あとはデータをニンマリしながら見るだけですね。
mac用HTMLパースライブラリを作りました。


#製作理由など

趣味で作っているmacアプリにおいてWebページのパースが必要になったため
Cのライブラリをブリッジしました。
メモリリークなどバグがあればコメントにお願いします。

またスキームを追加すればiOS,tvなどでも使えるはずです。

今Gitにつながらないので一旦こっちに
https://drive.google.com/open?id=0BwMN9FfQw1aoZlRJUDRsSmJaTXM
(PC復旧したらあげ直します。)




#使用例

```swift

let htmlString = 
"""
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <div class = \"box\",id = \"main_box\">
      Hello World
    </div>
  </body>
</html>

"""

let html = HTML(string: htmlString)
let title = html.nodes(at: "head/title").first?.string //Title
let divNode = html.nodes(at: "body/div/div")[0]
let attributes = divNode.attributes //["class":"box","id":"main_box"]
let value = divNode.string //Hello World
let content = divNode.content //<div class = "box",id = "main_box">\nHello World\n</div>
let tag = divNode.tag //div  

```

HTMLの`func nodes(at xpath:String)->HTML`はXMLのXpathです。
Xpathについては
http://qiita.com/merrill/items/aa612e6e865c1701f43b
に詳しく説明があります。

#構造

すべでget onlyです。

```swift

class HTML {
    var tag: String? //Nodeのタグ divとかh1とか
    var children: [HTML] //自身の直下にあるNodes
    var parent: HTML?  //自身の直上にあるNode
    var content: String?  //要素を含めたコンテンツ
    var string: String?  //要素を含めないコンテンツ
    var attributes: [String : String] // class,id など

    func nodes(at path: String) -> [HTML] //Xpathによって指定されたNodes
    init(data: Data, encoding: String.Encoding = default) //default Encoding は utf8
}

extension HTML {
    var stringValue: String //stringがnil なら から文字列
    subscript(key: String) -> String? //attributes[key]　と同値
    convenience init(string: String)  //Stringからのコンストラクタ、一度データに変換するため少し非効率
}

```

また`Equatable,CustomStringConvertible,NSCopying`に批准しています。

本当はStructとして実装したかったがCのポインタのコピーのタイミングがわからなかったので、
NSCopyingのcopy()で複製可能に
structのコピーについていい案がありましたら教えていただけいる幸いです。
JSだけでGitPitchみたいにGitHubのファイルパスを渡すとスライドにしてくれる奴

もうすでに１０個位ありそうだけど。

はてなの合間に仕事をしているとこんな記事を見かけました。(URLすごいですね)
http://paiza.hatenablog.com/entry/2017/06/22/GitHubだけで超高機能なスライド資料が作れる「GitPitch」の

これ、そこまで高機能でないのであればJavaScript(reveal)だけで完結しないかなと思ってやったら３０分くらいでできたので、そのままGithub Pagesにおいておきますね。

https://github.com/daichirata/rawreveal
http://daichirata.github.io/rawreveal?markdown=daichirata/rawreveal/master/demo/slide.md

GETパラメータでちょっとだけrevealの挙動を変更できます。

* theme
* markdonw
* separator
* separator-vertical
* separator-notes

ちなみに、普通に考えるとGithubのファイルをJavaScriptで読むことってCORS的に無理なんですが http://rawgit.com/ と言うものがあってここを経由することでJavaScriptからでもファイルを読めるようになります。CDNを経由しない奴はアクセス多いと弾かれちゃいますが、便利ですね。
Slack連携アプリ開発とES6+の便利なAPIの話

# 前提
最近社内業務システムのためにSlack連携アプリを開発する話があり、社員でプロトタイプの開発を行っています。今回は自分が開発している仮想通貨チェックアプリの紹介そして開発状況について報告を行いたいと思います。

#自分が制作したアプリ：仮想通貨チェッカー
仮想通貨の売買を行っている同僚が多いため、Slackにて仮想通貨の変動をチェックできるアプリを作成しました。
<img width="400" alt="readme.png" src="https://qiita-image-store.s3.amazonaws.com/0/118558/ebc588fa-e7dd-4cb0-6295-0b400f816ac7.png">
https://github.com/zikaa/slack-cryptocurrency-checker
**利用できるコマンド**
- `/ccc list`:主要な仮想通貨5つをリストアップしてくれます。
- `/ccc <currency_name>`:指定した通貨をリストアップ、コンマを使用することで複数指定できます(例: `/ccc btc,eth,etc`)
- `/ccc <currency_name> <exchange>`:指定した通貨を他の仮想通貨の単位でリストアップします(例: `/ccc btc eth`)

#開発環境
- 使用言語: Javascript
- 開発環境: Nodejs Version8.1
- ホスティング: Heroku

#参考にした記事
・[BotkitでSlackのSlash Commandを作る](http://qiita.com/hiconyan/items/b506b0631265268a850b)
つまづいた点としてはRedirect URLsの設定がアプリ作成時に設定できなくなっており、アプリをインストールできなかったことでした。これは**Add features and functionality＞Permissions**にて行えます。<br/>
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/118558/9cc4cd65-929e-7b06-2174-5f5105fe9aea.png)

#Node Version8.1
実行環境としてNodejs V8.1を指定している理由としては便利なAPIが豊富に実装されているためです。とくにasync/awaitをネイティブAPIで利用できることはコールバックのネスティングを防ぎ、またそれによってコードの可読性を獲得することできます。その他に便利なAPIとしては

- 分割代入

```
const { HIGH24HOUR, LOW24HOUR, PRICE, CHANGE24HOUR, FROMSYMBOL } = currency[exchange];
```

- Object.values()

```
const availableCoinList = Object.values(coinList.Data).map(data => { return data.Name});
```

- デフォルト引数

```
const filterCoins = (currencies = [], exchange = "USD", coinList = {}) => {}
```
- テンプレート文字列

```
    "author_icon":`https://www.cryptocompare.com/${ImageUrl}`,
    "fallback": `Current rate for the ${FROMSYMBOL} is ${formatPrice(PRICE, exchange)} ,
```
- アロー関数
 
```
const doSomething = () => {}
```

などが挙げられます。これらのAPIのおかげでコードの行数をかなり抑えることができました。

#Heroku
### HerokuをV8で実行する
HerokuをV8環境にて実行するには`package.json`にて
```
  "engines":{
    "node": "8.1"
  }
```
と記述してデプロイを行います。

### HerokuとGithubを連携する
HerokuはGithubと連携を行うことができます。これによってGithubにプッシュを行うとHerokuにも自動的に更新され、GithubとHeroku両方にプッシュする手間が省ける上に、GithubとHerokuで実行されているコードが違うなどという問題が発生しなくなります。

**Githubと連携を行う方法**
1. Herokuにログインする
2. Slackアプリを実行しているappsを指定する
3. deployを選択すると以下の画面が表示されるので、`Deployment method`を選択後リポジトリと連携を行います。
4. 連携後、`Automatic deploys`にてブランチを指定すれば、そのブランチが更新されるたびに自動デプロイが行われます。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/118558/aa2fd714-1fe9-fd24-792a-35d130c243f2.png)

#感想
- NodeV8を利用することによってコーディングがめちゃくちゃ気持ちいい
- async/await最高
- Herokuでのホスティングは非常にお手軽なのでおすすめ
- Slackは送信できるフォーマットが予め決まっているため、自由度が低い
- Herokuにデプロイを行うたびにアプリを再連携する必要があり、面倒である。
- 今後はデータベースと接続することによってユーザーごとにリストアップできる仮想通貨をカスタマイズできるようにしたいが、スパム攻撃を防ぐ方法を見つける必要がある。
nightmareでScreenshotを撮る

# nightmareってなんぞ？
`nightmare`はelectronを使用して作られているブラウザで、headlessで動かすことができます。また、コールバック地獄なしに操作ができます。
以前は、Phantom.jsのwrapperだったみたいです。


+ [nightmare](http://www.nightmarejs.org)
  このページ見ると`The Long Dark`を思い浮かべちゃうなぁw

+ [nightmare(Github)](https://github.com/segmentio/nightmare)

+ [The Long Dark](http://store.steampowered.com/app/305620/The_Long_Dark/?l=japanese)

# 環境
node.js v8.1.2

# Screenshotを撮る

使い方はすごく簡単なので、実際ソース見てください。

```
'use strict';

const Nightmare = require('nightmare');

const nightmare = new Nightmare();
// showにtrueをセットすると可視化されます。
// const nightmare = new Nightmare({show:true});


main();

async function main() {
    await screenshot('https://www.google.co.jp');
}

async function screenshot(url) {
    await nightmare
        .goto(url)
        .viewport(1024, 768)
        .screenshot('screenshot.png')
        .end();
}
```
React始めました〜①下準備〜

今更ながらReactに触れてみました。

ということで、下記サイトで勉強しようと思ったら環境部分でだいぶ引っかかったので、備忘録として書いときます。
(環境構築ならcreate-react-appで一発だけど、理解のため最初から構築したかったので…)

>30分間React入門「いいねボタン」作成チュートリアル
>http://c16e.com/1510161700/

# 環境
Ubuntu 16.04.2 LTS
node 8.1.2
npm 5.0.3

# 下準備

まずはフォルダ作って、移動

```
mkdir react-like-button
cd react-like-button
```

その後は、package.jsonを作成（すべて未入力で進めました）
`npm init`

そしてnpmで下記をインストール

* react
* react-dom
* webpack
* babel-core　←参考サイトには書いてないけど、これ入れないとダメ！
* babel-loader
* babel-preset-react
* babel-preset-es2015
* babel-preset-stage-0

```
npm install --save react react-dom
npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015 babel-preset-stage-0
```

インストールが終わると、多分package.jsonにいろいろと追加されてると思う(多分)ので
webpackのビルドタスクをscriptsに追加

【追加】
` "build": "rm -rf dist/*.js && webpack"`
` "watch": "rm -rf dist/*.js && webpack -w`

```package.json
{
  "name": "react-like-button",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "webpack": "^3.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf dist/*.js && webpack",
    "watch": "rm -rf dist/*.js && webpack -w"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}
```

そしたらwebpackの設定ファイルを作成
注→`query: {presets: ["react"]}`こうしないとコンパイルでエラーになってしまう！

```webpack.config.js
module.exports = {
  entry: __dirname + "/src/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "like-button.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, loader: "babel-loader", query: {presets: ["react"]}}
    ]
  }
};

```

ふぅ、疲れた…
あ、ソースコード置き場と、ビルドされたJSが生成される場所を作るのを忘れてました
（環境構築で力尽きた）
`mkdir src dist`

ついでに今回のソースと確認用HTMLを作成
【ソース】
`touch src/main.js`

【確認用HTML】
`touch dist/index.html`

# 構成
最終的には以下のようなフォルダ構成になりました。

>react-like-button
　-dist
　　-index.html
　-node_modules
　-src
　　-main.js
　-package.json
　-webpack.config.js


とここで疲れてしまったので、実際に作っていくのは次回ということでorz
同名のスコープとクラスメソッドがあるとき　〜僕が君で、君が僕で。〜


同名のスコープとクラスメソッドがあるとき、
後から定義したやつが前のやつを上書きしちゃいます。

### スコープ＝＞クラスメソッドの順で定義すると・・・

```ruby
class User
  scope :hoge, -> { "スコープ" }
  
  def self.hoge
    "クラスメソッド"
  end
end

User.hoge # => "クラスメソッド"
```

### 逆に、クラスメソッド＝＞スコープの順で定義すると・・・

```ruby
class User
  def self.hoge
    "クラスメソッド"
  end

  scope :hoge, -> { "スコープ" }
end

User.hoge # => "スコープ
```
pythonでsqlite3を扱う


```python3
#coding :utf-8
import sqlite3

dbname='database.db'
conn = sqlite3.connect(dbname)
c = conn.cursor()

#sqlを実行
create_table='''create table users(id int, name vachar(64),
                age int, gender vachar(32))'''
#c.execute(create_table)

# SQL文に値をセットする場合は，Pythonのformatメソッドなどは使わずに，
# セットしたい場所に?を記述し，executeメソッドの第2引数に?に当てはめる値をタプルで渡す
insert = "insert into users(id, name, age, gender) values(?,?,?,?)"
user = (1,"Tato",44,"male")
c.execute(insert,user)

# 一度に複数のSQL文を実行したいときは，タプルのリストを作成した上で
#executemanyメソッドを実行する
users = [
        (2,"shota",54,"female"),
        (3,"nana",40,"female"),
        (4,"FFFF",65535,"male")
]
c.executemany(insert,users)
conn.commit()

#sqlデータを取り出す
select ='select * from users'
for row in c.execute(select):
    print(row)
#sqlを閉じる
conn.close()

```
SolrでDataImportHandlerのTransformerをJavaScriptで書く


自部署で運営しているサービスのバックエンドにSolrを使用しており
DBからDataImportHandler（DIH）を介してドキュメントを登録しています。

登録の一部で、取得したデータをJSON文字列にして組み込みたい箇所があり
本記事ではそれを実現するために使った機能についてまとめます。

Solrのバージョンは5.5.3ですが
かなり古いバージョンからある機能を使用するため、特に重要ではありません。

## 背景

DIHでのインポート時にデータを加工するためには
データ取得からインデックス作成までの間に処理を挟む必要があります。

この処理のためには様々な[Transformer](https://cwiki.apache.org/confluence/display/solr/Uploading+Structured+Data+Store+Data+with+the+Data+Import+Handler#UploadingStructuredDataStoreDatawiththeDataImportHandler-Transformers)が提供されています。
> Transformers manipulate the fields in a document returned by an entity. A transformer can create new fields or modify existing ones.

ドキュメント内のフィールドを加工したり、新しいものを作ることができます。

## 問題点

既存のTransformerの中に、都合よく「JSON文字列を作る」ものはありません。
> You can also write your own custom transformers, as described in the Solr Wiki (see http://wiki.apache.org/solr/DIHCustomTransformer).

そして、ないならカスタムで作りましょうと記載されています。
ただし私は大学の授業でしかJavaを書いたことがなく
少なくともすぐには真っ当なコードを書ける自信がありません。

そこで見つけたのが[ScriptTransformer](https://cwiki.apache.org/confluence/display/solr/Uploading+Structured+Data+Store+Data+with+the+Data+Import+Handler#UploadingStructuredDataStoreDatawiththeDataImportHandler-TheScriptTransformer)でした。

## ScriptTransformerとは

> The script transformer allows arbitrary transformer functions to be written in any scripting language supported by Java, such as Javascript, JRuby, Jython, Groovy, or BeanShell. Javascript is integrated into Java 8; you'll need to integrate other languages yourself.

（雑な和訳）
Javaでの動作がサポートされている言語で書けるTransformer。
色んな言語で使える。JavascriptだけはJava 8の環境ならデフォルトで動く。

Javaよりは書いた経験もあるので、今回はJavascriptで書くことにしました。

## やったこと

### ScriptTransformerの定義

`data-config.xml`（DIHの設定が書かれたファイル）内で
`<script>`エレメントに処理を記載します。

ここに記載した処理はインポートの開始時に一度実行されます。

```xml:data-config.xml
<script><![CDATA[                                                
  var mapper = new com.fasterxml.jackson.databind.ObjectMapper();

  function toJsonString(row) {
    row.put('json_string', mapper.writeValueAsString(row));

    return row;
  }
]]></script>
```

* functionは`Java Map<String,Object>`（`row`）を1つ受け取る
* `row`には`get`,`put`,`remove`の処理が可能
* `Java Map<String,Object>`のかたちで値を返す必要がある

Javaのライブラリを呼び出すこともできるため、今回は[Jackson](https://github.com/FasterXML/jackson)を使用し
row全体をJSON文字列化したものを`json_string`カラムでrowに追加しました。
なお、Jacksonは別途Solrに組み込んでおく必要があります。

JavaScriptらしく`JSON.stringify()`を先に試しましたが
この方法では`row`をパースする際にエラーが出てしまいました。

### ScriptTransformerの呼出

通常のTransformerと同様に、`entity`エレメントに記載します。

```xml:data-config.xml
<entity name="articles"
  query="{{ 1レコードを取得するクエリ }}"
  transformer="script:toJsonString">
  <field column="json_string" name="articles" />
</entity>
```

前述の`toJsonString()`が返す`json_string`カラムの値を
`articles`という名称のフィールドに追加して完了です。

ちなみに、デバッグは面倒ですが[コチラ](https://gist.github.com/pgwillia/6676703)を参考にログを吐かせると
Solrのコンソールログ内に情報が出力されます。

## まとめ

結局JavaとJavaScriptのシンタックスが入り混じっていましたが
比較的簡単にTransformerを作成することができました。

具体的に計測はしていませんが、純粋なJava以外の処理が動くため
多少のオーバーヘッドは存在するのではないかと思います。

インポート時の速度が強く求められる場合は、必ず事前にご検証ください。
Unity 5.6からの動画再生機能 VideoPlayerで動画再生

[[Unity] ドラッグ&ドロップ一切使わずスクリプトのみでいろいろ取り込み](http://qiita.com/gshirato/items/b823a0a4ea7baff102f2)より
再生形式やインポートの不具合（[記事](http://qiita.com/gshirato/items/4cff37a3d467cf0dc5ac)）に苦しめられたうえに、ビルド後の仕上がりを見てMovieTextureになんとなく嫌気がさしてきたところで、VideoPlayerというものがとっくに存在することを確認

##やること
上リンクと同じ、スクリプトだけで動画を再生。

##MovieTextureとの違い
MovieTextureは動画(イメージ)をテクスチャとしてオブジェクト(平面など)に貼り付けるのに対して、VideoPlayerは動画をクリップとして扱えるため直感的で扱いやすく、機能も動画用に特化してて豊富。

url、clipから読み込める事ができることを確認。

##早速

```csharp:Using
using UnityEngine.Video;

```

```csharp:VideoPlayer

VideoPlayer videoPlayer;
VideoClip videoClip;



void play_byClip()
{
    GameObject plane = GameObject.Find("Plane");
    //すでに存在するアセット(ライトやカメラ)に予めVideoPlayerを付けておくか、AddComponentで取得
    videoPlayer = GetComponent<VideoPlayer>();
    
    //記入漏れ clip使う際のみ必要です
    videoPlayer.targetMaterialRenderer = plane.GetComponent<Renderer>();
    vp.clip = vc;
    vp.play();
}

void play_byURL(string _url)
{
/**************
　　　　ほぼ一緒 clipの部分だけ削除
**************/
    vp.url = _url;
     

    //　2017年07月06日追記
    if(vp.isPrepared)
    {
        vp.play(); 
    }
}



```
## 「最低限」を脱するために

###音声
~~MovieTextureのときと同じく同時にAudioSource再生かな。
VideoPlayerにaudioあるからうまく使いたいところ。~~
[VideoPlayerにスクリプトで音をつけたい (http://qiita.com/gshirato/items/88096b0b350f5921f8d4)](http://qiita.com/gshirato/items/88096b0b350f5921f8d4)へ
###その他


```csharp:ScriptingAPIより

//動画のレンダリングの仕方。デフォルトだとカメラが見れる一番遠く(Far)でレンダリングするっぽい　
//カメラの設定を使う場合はスクリプトをカメラにアタッチしたほうが良いかも
videoPlayer.renderMode = VideoRenderMode.CameraNearPlane;
//開始フレームの設定(最初にスキップするフレームの数)
videoPlayer.frame = 100;
//ループONに
videoPlayer.isLooping = true;
//動画が最後まで来たときのループ処理
videoPlayer.loopPointReached += Loop;

//引数ないと怒られます
void Loop(VideoPlayer vp)
{
       print("LoooooP");
}

```

など

###VideoRenderMode

| Mode |説明|
|:-:|:-:|
|CameraFarPlane |Far位置にレンダリング(背景化？)  |
| CameraNearPlane|Near位置にレンダリング(とにかく動画だけ見える) |
|MarterialOverride|Rendererに上書き(Planeなどに貼る場合はコレ)  |
|RenderTexture|Renderer Textureに使う（あまり使い方にピンときてないです）|
|APIOnly|データだけ使う、レンダリングなし|


##参考
[Unity Documentation: VideoPlayer](https://docs.unity3d.com/ScriptReference/Video.VideoPlayer.html)


#HoloLens開発記事一覧
[こちら](http://qiita.com/gshirato/items/6c026f2c67dc332f829b)から
yarnの使いかた

# yarnとは
yarnはパッケージマネージャー。https://yarnpkg.com/en/
nodeをインストールすると自動でインストールされるnpmと役割は同様。
ただ、並行処理でのインストールによってnpmよりも高速にパッケージをインストールできる。

## 使い方
新しいプロジェクトを始める際に

```bash
yarn init
```

### プロジェクトに対してパッケージを追加
プロジェクトに対してのパッケージの追加方法

```bash

yarn add パッケージ名
yarn add パッケージ名@バージョン #バージョンを指定してパッケージのインストール
yarn add パッケージ名@タグ # これはいったい、、、
```

### グローバルに対してパッケージを追加
プロジェクトではなく、グローバルにパッケージの追加方法
◯◯-cliのようなパッケージをよくグローバルに追加するような気がします。

```bash
yarn global add パッケージ名
```

### パッケージのアップグレード（バージョンアップ）

```bash
yarn upgrade パッケージ名
yarn upgrade パッケージ名@バージョン
yarn upgrade パッケージ@tag
```

### パッケージの削除
```bash
yarn remove パッケージ名
```

### 全てのパッケージと依存関係をインストール
```bash
yarn
```

## yarnのワークフロー
ドキュメントの通り

1. Creating a new project
2. Adding/updating/removing dependencies
3. Installing/reinstalling your dependencies
4. Working with version control (i.e. git)
5. Continuous Integration

### 1. Creating a new project
yarnを追加したいディレクトリで以下を実行

```bash
yarn init
```

実行すると、対話形式でyarnの追加が始まる
何も入力しなくても良いし、しても良い。

```
name (your-project):
version (1.0.0):
description:
entry point (index.js):
git repository:
author:
license (MIT):
```

質問に答え終わったら`package.json`が作成されている。
質問に答えた内容で最低限のpackage.jsonが作られている。
自分だとこんな感じになってた。

```json:package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "index.js",
  "author": "kyohei",
  "license": "MIT"
}
```

package.jsonにはアプリケーションの情報を保存していく。
保存する情報で最も重要なのは、アプリケーションにインストーする必要があるパッケージ（と依存関係）。

### 2. Adding/updating/removing dependencies
別のパッケージを使用する場合は、そのパッケージを依存関係として追加する必要がある。
先に紹介したパッケージを追加するコマンドを実行する。

```bash
yarn add パッケージ
```
実行するとpackage.jsonに依存関係を追加する。
同時に依存を反映させたyarn.lockも更新される。

#### yarn.lock
yarn.lockは、誰でも同じバージョンの依存をインストールできるように各依存のバージョンを管理するファイル。
add, upgrade, removeなどのyarnコマンドを実行すると自動でyarn.lockも更新される。

### 3. Installing/reinstalling your dependencies
`yarn install`は、アプリケーションにすべての依存をインストールするために行う。
pacakge.jsonを元に依存のインストールを行い、yarn.lockでバージョンを管理する。

#### yarn installのオプション
オプションもいくつかあるよ
実際に使うときに詳しく調べる
https://yarnpkg.com/en/docs/installing-dependencies

### 4. Working with version control (i.e. git)
パッケージを管理するには、以下のファイルをソース管理（git）に置く必要がある。

- package.json
    - 現在の全ての依存の管理
- yarn.lock
    - 依存のバージョン管理
- ソースコード


### 5. Continuous Integration
yarnはビルドを早めるためにyarnのキャッシュディレクトリは全体に保存できる。

## 便利なyarn run
package.jsonのscriptsに定義したことを実行してくれる。

```json:package.json
{
  "name": "my-package",
  "scripts": {
    "build": "babel src -d lib",
    "test": "jest"
  }
}
```

このようにすると、ターミナルで以下のようにして実行できる。

```bash
yarn run test
```

以下と同義

```bash
yarn run jest
```

引数も渡せる。

```bash
yarn run test -- -o --watch
```

node_modules/.bin/の中にローカルインストールされた実行可能ファイルもscriptsに書ける。
Raspberry PiにMosquitto Brokerをインストールする

OSはRaspbian Jessieという前提です。

まず、新しいバージョンのMosquittoをインストールするために、リポジトリを追加します:

```
# GPG鍵のインストール
$ wget http://repo.mosquitto.org/debian/mosquitto-repo.gpg.key
$ sudo apt-key add mosquitto-repo.gpg.key

# mosquitto-jessie.listのインストール
$ sudo wget http://repo.mosquitto.org/debian/mosquitto-jessie.list -O /etc/apt/sources.list.d/mosquitto-jessie.list
```

以上でインストールの準備が整ったので、実際にMosquittoをインストールします:

```
$ sudo apt-get install mosquitto
```

インストールされたMosquittoのバージョンを確認します:

```
$ mosquitto -v
1498138035: mosquitto version 1.4.12 (build date Thu, 25 May 2017 22:38:16 +0100) starting
1498138035: Using default config.
1498138035: Opening ipv4 listen socket on port 1883.
1498138035: Error: Address already in use
```

最後に"Error: Address already in use"と表示されていますが、これは既にMosquitto Brokerが動いている場合に表示されるもので、無視しても問題ないようです。

これで、デフォルトの1883ポートでBrokerが動作するようになりました!
「ゼロから作る　Deep Learning」本　コマンド操作で学んでつまづいた箇所メモ

#ゼロから作る　Deep Learning をコマンドをうちながら学ぶ　つまづいたところなど

##環境
- windows10
- Anaconda 4.4.0
- python3.6.1

##下準備
- anacondaのインストール
 https://www.continuum.io/downloads　
よりダウンロードしてインストールする
- 『ゼロから作る Deep Learning』のリポジトリのインストール
- anacondaと同一ディレクトリに　https://github.com/oreilly-japan/deep-learning-from-scratch
からダウンロードしたファイルを展開。通常はC:\Users\ユーザー名\Anaconda3　配下にインストールする。
- window10のコマンドプロンプトを起動して、C:\Users\ユーザー名\Anaconda3 配下にcdする。

##コマンドはチェンジディレクトリして、フルパスで指定する
C:\Users\ユーザー名\Anaconda3　配下にpython.exeがあるので、例えば サブディレクトリーch01　からコマンドを実行する場合には、ch01にチェンジディレクトリして、C:\Users\ユーザー名\Anaconda3\python img_show.py などとpython自体はフルパスで入力することとなる。　
ちなみに、本書の章に該当するのがch01（１章）などのサブディレクトリである。

##気づいた点など
- 本書のリポジトリのch0xディレクトリは、本書の章に対応している。1章ならch01であり、その中にプログラムやデーターがある。
- shapeは要素の確認が可能　ndimは次元を確認する（２次元行列であれば、行数、列数にかかわらず２となる。ベクトルは１次元）

1. a=np.array([[2,3],[3,2]])
　　a.shape=(2,2) この場合、２行２列の行列となる
　　a.ndim=2  ２次元の行列である

2. a=np.array([2,3])
　　a.shape=(2,) この場合、行列ではなくてベクトルとして表示される。大きさは２
　　a.ndim=1 １次元のベクトルである

3. a=np.array([[2,3]])
　　a.shape=(1,2) 上記とよく似ているが、この場合、行列として表される。１行２列の行列である。
　　a.ndim=2  ２次元の行列である

- 行列でSIZEをとると？

```x=np.array([[1,2],[3,4]])
for idx in range(x.size):
```
この場合は、x.sizeは要素の数となり2x2の４となる。
４回ループするので、idxは0から始まり３で終了する。xの要素の中身が入るわけではない。

- 形の異なる行列の和は求められるのか？
p114  ２レイヤーの出力の予想値を求める計算で、
a1 = np.dot(x,W1) + b1

この時、x.shape(100,782) W.shape(782,100) b1.shape(100,) であり、100行100列ｘ1行100列の和の計算ができないのでは？と思ったが、各行の値にb1を足せるようだ。（基本的な事？）

例
a=np.array([1,1,1])
b=np.array([[2,2,2],[3,3,3]])
c=a+b
print(c)
↓
[[3 3 3]
 [4 4 4]]

- shape(0)の意味
hoge.shape(0)は配列の０番目の中身だと思ったが、そうではないらしい。・・
下記によると、shape[0]とした場合は、hogeの行数が返される。ちなみにshape[1]は列数が返される。

   # 行列の大きさ
    print("行列Aの大きさ:", A.shape)
    print("行列Aの行数:", A.shape[0])　　
    print("行列Aの列数:", A.shape[1])
新人エンジニアがSwiftを9日間学んで思ったこと。

# はじめに
　YWT手法で9日間を振り返ってみます。ぜひみなさんのオススメの勉強方法を教えてください！

# YWT手法でふりかえり
## やったこと
* 書籍「これからつくるiPhoneアプリ開発入門」でとりあえずアプリ何個か作ってみる
* コードをサンプル通りに書いてわからないところを都度調べる
* 誰かが書いたSwiftのサイトを読み漁る
* 学習に目処を立てずにダラダラ学習
* 調べてもわからなかったら上司に聞く
* 現状身についた力で自作のアプリを作る

## わかったこと
* アプリってこんな感じで作ってくんだ
* とりあえずやって後で調べるは効率が悪い
* 参考にする文献が決まってないため調べるのに時間がかかる
* わからないことを自力で解決するのは時間がかかる
* いくら調べてもわからないことがある
* 上司に聞いたらすぐに解決したり、理解が深まる
* 自分で考えたアプリを作るのは楽しいしサンプルアプリのコードを書くより身になる

## 次にやること
* Swiftの概念をまずしっかり学ぶことで調べる回数を少なくする
* 調べる、参考にする文献を定める
* わからないことは調べる時間を決め、時間内で調べきる
* 時間内で調べきれなかったら上司に聞く
* いつかこんなアプリ作りたいなとか、学んだ知識でこんなアプリ作れそうだなってのを思いついた時にリストアップして、後日作る
* 長期的、短期的な学習のプランをちゃんと考える

# 経験者エンジニアはどう勉強しているのか
## [Hatena Developer Blog「2017年の夏、Swiftをどうやって学ぶか」](http://developer.hatenastaff.com/entry/how-to-learn-swift-2017)によるSwift学習の進め方のススメをまとめてみた
1. 最初にSwiftについて一通り学んでみる
1. 書く前に読む力を身に付ける
1. 「読む」「書く」「聞く」「見せる」というサイクルを回す
1. プログラムに登場する概念や、その概念が自分の取り組む言語にどう実現されているか、そして、それらを活用してどのようにプロダクトを作っていくのかという視点で学習する
1. なるべくチームメンバーが近くに座り「みんなで仕事する時間」をはじめました。このため細かな質問をし易い体制でした。
1. 誰かに「ここ今こうしてるけど、どうしようか迷っている。今考えているのは〜」というような会話を投げかけると、何故か自分でどうすればよいか見えてくる
1. Apple公式のこのドキュメントは、Swiftの言語仕様について単に網羅的に説明しているだけでなく、個々の機能がSwiftの根底にある思想に基づいて整理されている。繰り返し読み込むことで、それが理解できるようになるはずだ
1. Swiftで小さなプログラムを書けるようになった次にはprotocolについて学ぶとよい
1. はてなのインターンに参加する

## 実践すべきと考えたこと
1. プログラミングの概念を学ぶ（書籍）
1. Swiftの概念を学ぶ（公式ドキュメント）
1. Xcodeを学ぶ（はてなのインターンの教材）
1. 積極的に質問する（席の移動、Slack）
1. コードレビューを依頼する
1. アウトプットをする（Github、Docbase、Qiita）
1. はてなのインターンに参加する

# 個人的にわかりやすかったサイト
* [Swift言語を学ぶ](http://tea-leaves.jp/swift/)
* [「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](http://wa3.i-3-i.info/index.html)
ローカル環境でMAMPを使用してconcrete5の開発環境を構築

表題の通り、MAMPを使用してconcrete5を使うための備忘録。
※MAMPをローカルにインストールしている前提でざっくり説明します。

#データベースを作成
MAMPを起動して、phpadminからデータベースを作成します。
-データベース名※任意
-照合順序 「utf8_general_ci」
「作成」します。

#concrete5をダウンロード
以下URLからconcrete5をダウンロードします。
※今回は執筆時点での最新バージョン8.1.0を使用

[ダウンロード](https://concrete5-japan.org/about/download/)

#MAMPのフォルダを通す
Web　Serverでconcrete5を構築するフォルダに指定します。
サーバーを起動して、「http://localhost/」にアクセス。
インストール画面が表示されて、言語を設定。

##データベース情報
-サーバ：localhost
-MySQLユーザー名：root
-MySQLパスワード：root
-データベース名：concrete　※上で作ったデータベースの名前を入れます

後はサイト情報を入力すれば、インストール完了です。
ServiceNow 開発者向けインスタンスをアップグレードする

ServiceNowインスタンスのバージョンには、ABC順に名付けられた大きなバージョン（HelsinkiやIstanbulなど）と、その中の小さなバージョン（Istanbul Patch1やIstanbul Patch6など）がある。
大きなバージョンはファミリー（Family）と呼ばれており、<font color="red">ファミリーが変わるアップデートをアップグレード</font>、<font color="blue">ファミリーが変わらないアップデートをパッチ</font>と言う。

本記事ではServiceNow開発者向けインスタンスのアップグレードを扱う。
開発者向けインスタンスではあまり気にすること無くアップグレードしても良いとは思うが、色々スクリプトを組んだアプリケーションを開発しているのであればしっかりチェックしつつ行うことを推奨する。
（実環境での手順は[こちらのサイト](https://express.servicenow.com/support/skip-line-upgrade-istanbul-sooner/)が参考になる）
インスタンスのビルドタイプはIstanbul。
パッチに関しては次の記事に記載している。
> - [ServiceNow 開発者向けインスタンスに公式パッチを当てる](http://qiita.com/Kisaragi13/items/564fc9dbf3b0432b291a)

# 1. リリースノートを確認する
公式が出しているリリースノートを確認し、既存の実装に影響がないことを確認する。
URL（2017年6月時点）：https://docs.servicenow.com/

【確認手順】
ファミリーを選択する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/bf97ad62-1c4b-465d-853c-7c22718d6aa3.png)

リリースノートを選択する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/3366c051-9c45-d211-607d-babc7ef580b0.png)

**Features and changes by product**には変更点などが載っている。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/e79fac5a-c924-1fbd-c0a8-37b991768c24.png)

# 2. アップグレードの手順を確認する
公式がアップグレード計画のチェックリストを出しているので、確認する。

リリースノートから**Upgrade to `<Family Name>`**を開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/1ab8c9eb-fa46-0fae-b070-941073d0316d.png)

**Upgrade planning checklist**を開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/ae023c75-a732-1bd3-82d5-187949376dd6.png)

チェックリストを元に、インスタンスアップグレード計画を練る。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/ad64eaa6-df67-ac52-cba2-5817a45288ac.png)

# 3. アップグレードを行う
[ServiceNow Developersのインスタンスページ](https://developer.servicenow.com/app.do#!/instance)を開く（要ログイン）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/493c3798-2e70-7891-8173-fd547247c2cb.png)

**Action** -> **Upgrade to `<Instance Name>`**を選択する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/e823a58f-96df-a111-172c-9f8a12749593.png)

確認メッセージが表示されるので「**YES**」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/a105adec-735e-ef68-bb7a-8fa04bdd6472.png)

暫く待つ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/d2ffd8e9-9a77-5407-13d7-20e53acb05dc.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/82d3272c-951f-4532-6344-bebf6fa49086.png)

アップグレード中はインスタンスにログインできない
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/2ef5e153-8baa-84b7-872a-c6265f10880e.png)

プラットフォームのアップグレードが完了するとプラグインのロードなどが行われる。このときはログインができる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/175688/417aedc0-0491-4f6c-7198-57ddbda1e037.png)

# 関連記事
> - [ServiceNow 開発者向けインスタンスに公式パッチを当てる](http://qiita.com/Kisaragi13/items/564fc9dbf3b0432b291a)

# 参考サイト
> 『ServiceNow Wiki』
http://wiki.servicenow.com/
> 『ServiceNow jakarta Release Notes』
https://docs.servicenow.com/bundle/jakarta-release-notes/page/release-notes/jakarta-release-notes.html
> 『Skip the Line – Upgrade to Istanbul Sooner』
https://express.servicenow.com/support/skip-line-upgrade-istanbul-sooner/
cmdshelfによるスクリプト運用のご提案

# 追記
- 2017/10/28追記: swiftpmコマンドはなくなりました
- 2018/9/3追記: cmdshelfはRustに移行しました。同時にblobコマンドは無くなりました。homebrewからインストールできます！

---
# これまでのスクリプト運用の課題🐢
アプリのリポジトリにコミットしてしまっていて運用がつらい
- 他のプロジェクトと共有するのが面倒
- 例えばmasterにしかなくてhotfixでそのscriptが使えないという状況があり得る

どこかのOSSだったり、内製したものだったり、自分専用のものだったり、置き場所が点在している

---
# AbemaTV iOSチームの場合
ios/tvos 共通で使い回したいスクリプトたち

- acknowledgement_generator.swift
- init_design.sh
- carthage/update carthage/checkout

現状それぞれにコミットされていたりいなかったりするのを統一したい

---
# 構想🤔
- scriptの管理場所や所有者なんて使う時にはただのノイズ
- 必要な時に必要なスクリプトを迅速に使いたい
- $PATHの設定とか正直面倒

---
# そんなあなたに cmdshelf 📚

---
# cmdshelf 📚
- ~/.cmdshelf.yml でスクリプトの置き場所を管理
- `cmdshelf run hoge.sh` でhoge.shがどこにあるか気にすることなく実行できる
- 自分好みの .cmdshelf.yml を持ち歩ける
- Written in Swift

---
# .cmdshelf.yml
![cmdshelf-yml.png](https://qiita-image-store.s3.amazonaws.com/0/35008/39ea2a2d-64e7-d5b3-5700-0fb74f6808cb.png "cmdshelf-yml.png")

---
# .cmdshelf.yml
![cmdshelf-yml1.png](https://qiita-image-store.s3.amazonaws.com/0/35008/c8e87ef4-7d56-b5c1-d03a-eea67d4d8229.png "cmdshelf-yml1.png")

---
# .cmdshelf.yml
![cmdshelf-yml2.png](https://qiita-image-store.s3.amazonaws.com/0/35008/1023c76b-b59a-89f2-7593-d69d0eedb666.png "cmdshelf-yml2.png")

---
# .cmdshelf.yml
![cmdshelf-yml3.png](https://qiita-image-store.s3.amazonaws.com/0/35008/7dd9df41-2407-2f5d-d04f-e0034ac43ce3.png "cmdshelf-yml3.png")

---
# remoteの追加
```
$ cmdshelf remote add abema-ios-script https://github.com/abema/inherited-scripts-ios.git
$ cmdshelf list
remote:
  abema-ios-script:
    carthage/checkout
    carthage/update
    design/init_design.sh
    specific/abema-swift-api-session/validate-unit-test.sh
    tools/acknowledgement_generator.swift
    tools/outdated-localizables.sh
$ cmdshelf run "carthage/update APIKit"
```
最新のmasterがcheckoutされる
基本的にコンソールで実行可能なものならなんでもok

---
# blobの追加
```
$ cmdshelf blob add random https://gist.githubusercontent.com/toshi0383/32728879049e95...
$ cmdshelf list
blob:
  random: https://gist.githubusercontent.com/toshi0383/32728879049e95db41ab801b1f05500...
$ cmdshelf run random
```
blobはローカルパスかhttp(s)のURLいずれかを登録可能
基本的にコンソールで実行可能なものならなんでもok

---
# リポジトリの更新
```
$ cmdshelf update
```
remoteとswiftpmを更新

---
# インストール

https://github.com/toshi0383/cmdshelf#install

---
# 今後の展望
- Makefile (CI) サポート

CIにcmdshelfをインストールするのに要する時間が許容範囲かどうか検証が必要
まずはzipダウンロードで入れられるように設定したいとは思っている (どうやんのかな

=> [解決済！](https://github.com/toshi0383/cmdshelf#installsh)

---
# まとめ
- cmdshelfでラクにスクリプトを共有
- もう$PATHの設定に煩わされる必要なし👍

---
# オープンソースです
イシューやプルリクなどコントリビュートお待ちしております。
https://github.com/toshi0383/cmdshelf

---
# End

この資料は2017/06/21にチーム内で共有したものほぼそのままになります。
この時から色々と改善を実施したので詳細はリポジトリのCHANGELOGをご覧ください。
https://github.com/toshi0383/cmdshelf
DockerでMySQL/PostgreSQLの初期データが生成されないときに確認すること

Dockerにて、MySQLやPostgreSQLを構築しようとしたとき、初期データとしてユーザやデータベースを作成しておきたい、なんてことはよくあるんじゃないでしょうか。  
そんなときは、`/docker-entrypoint-initdb.d/`の下に、`.sh`,`.sql`,`.sql.gz`らの拡張子でファイルを置いておくと、よしなにしてくれるそうです。


```:Dockerfile
...

COPY ./db/init.sql /docker-entrypoint-initdb.d/

...
```

```:init.sql
CREATE USER hoge_user WITH CREATEDB;
```

しかし、何度もbuildしてはコンテナに入って確認し…
なんてことを続けていると、「ユーザ名変えたはずなのに変わってない」「データがインポートできなくなった！」
と、自分のミスではないところで時間を取られてしまうことになります。

そんな時は、以下の点に気をつけて確認してみると良いかもです。

キャッシュを使わずにbuildしてみましょう

```
$ docker-compose build --no-cache
```

コンテナに、以前実行されたものがないか確認して、もしあれば消してみましょう

```
$ docker ps -a
CONTAINER ID        IMAGE                COMMAND                  CREATED             STATUS                         PORTS                    NAMES
76960e4db0df        xxxxxxxxxxxxxx_app   "irb"                    12 hours ago        Exited (1) 10 seconds ago                       xxxxxxxxxxxxxx_app_1
5cf684f2a2dd        xxxxxxxxxxxxxx_db    "docker-entrypoint..."   12 hours ago        Exited (0) 6 seconds ago                        xxxxxxxxxxxxxx_db_1


$ docker rm 76960e4db0df 5cf684f2a2dd
```

参考：[Initializing a fresh instance 辺り](https://hub.docker.com/_/mysql/)
XML のレイアウトファイルからフォントを設定する

Support Library v26 から xml のレイアウトファイルでフォントを変更することができるようになりました。
API Level 14 ( Android 4.0 ) 以降で利用できます。

## 準備
Support Library を導入します。
Android Studio 3.0 Canary 4 を使用しています。

```groovy:build.gradle(app) 
apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.0"
    defaultConfig {
        applicationId "jp.hoge.example"
        minSdkVersion 19
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    androidTestImplementation('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    testImplementation 'junit:junit:4.12'
    implementation 'com.android.support:appcompat-v7:26.0.0-beta2'
}
```
( Gradle の記述が Compile → implementation とか色々変わってる…)


## 実装
res フォルダを右クリックで New > Android resource directory を選択し、font を入れるフォルダを作成します。
Resource type の中に font があるのでそちらを選択すればOK。
<img width="826" alt="スクリーンショット 2017-06-22 10.14.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/126298/862bfb82-1f75-aca7-8e78-7d64381f4e84.png">


作成した Font フォルダに使用したいフォントのファイルを追加します。
<img width="316" alt="スクリーンショット 2017-06-22 10.24.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/126298/81f7fb45-0556-bd6d-fc36-000875cda7f2.png">

最後にフォントを表示したい View に追加したフォントを指定します。

```xml
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/font_muller_thin"
        android:text="@string/dummy_text" />
```

するとこのようにフォントが変更されます。

API Level 19 ( Android 4.2 )
<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/126298/d3d3ec12-4251-5c97-95e1-7e04ab4fe2bf.png">

API Level 26 ( Android O )
<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/126298/ce7d4369-b7cd-ca99-3186-87bb96e4b351.png">

## 参考
[https://developer.android.com/preview/features/fonts-in-xml.html](https://developer.android.com/preview/features/fonts-in-xml.html)
COBOLの基本（コーディング制約）

---

あくまでも自分用のメモ書きなので読みづらくても知りません

---
#プログラムを動かす
まずCOBOLのファイルの拡張子は.cbl。(他にもあるがとりあえず基本的にはこれでいきたい）
ファイル名がtest.cblの場合、openCOBOLだと次のようにする。
`cboc -x test.cbl`
![Screenshot from 2017-06-22 00-24-12.jpg](https://qiita-image-store.s3.amazonaws.com/0/156607/c079bc05-96bd-76c8-ca9e-a5377bcd2578.jpeg)
このコマンドを入力するとtestというファイルが作成される。
これは他の言語でも言えるのだが、このプログラムを実行するためには
`./test`
というコマンドを入力する。HELLO, WORLD!という文字を出力するだけのプログラムなら次のようになる。
![hello.jpg](https://qiita-image-store.s3.amazonaws.com/0/156607/93af5803-603a-6a2c-e95f-da81cd01f033.jpeg)
以上。とりあえずこれでプログラムは動かせる。ちなみにcboc -x云々に関してはコーディングミスってるとエラー吐かれて死ぬ。
#コーディング制約
COBOLでは、次のような書き方をしないといけないらしい。

```COBOL:coding.cbl
000010 IDENTIFAICATION                DIVISON.   
000020 PROGRAM-ID.                     DSP001.
000030 PROCEDURE                      DIVSION.
000040     DISPLAY    "HELLO, WORLD!"
000050     STOP RUN.
```

これは先程動かしたHELLO, WORLD!と表示させるプログラム。
かなり面倒だけどとりあえずこんなふうに書かないといけない。
COBOLでは、80文字以内にコードを収めないといけないらしい。糞だなこの言語。
しかもおまけに文字数（COLUMN）で役割がわかれているらしい。
###一連番号領域
先ほどのコードで言うところの頭の<font color="blue">NNNNNN</font>という六文字は<font color="red">一連番号領域</font>と呼ばれているらしい。
1行進む毎に10を足していくだとか。ちなみに固定長なのでNNNNN(5文字)とかはだめっぽい。
更に追記しておくと6文字スペースでもいいらしい。適当やん・・・まあ時代の進歩なのだが。
###標識領域
その後の7文字目は<font color="red">標識領域</font>と呼ばれているもの。
ここでは空白（スペース）だが、ちゃんと役割があるらしい。

| 標識| 説明 |
|:---:|:---:|
|(空白)|COBOLのプログラムコード行である。|
|*|コメント行である。|
|/|プログラムコードを印刷する際の改ページ行である。|
|-|前行から継続している。|

非常にわかりやすい。いやわからんわ。
###A領域
標識領域の次は<font color="red">A領域</font>。
8-11文字目をA領域と言う。ここでは各部の宣言(IDENTIFICATION DIVISIONとか)などを書く。
###B領域
AがあればBもある。<font color="red">B領域</font>は12-72文字目までを使う。
B領域では命令文など、処理部となるコードを記述する。
###見出し行
73-80文字目は<font color="red">見出し行</font>と呼ばれている。
ここでは最終更新日だったり説明だったり作者だったりを記述するらしい。
ぶっちゃけコンパイルする際には関係ないらしいからどうでもいいのでは？
###まとめ？
とまあこんな感じで様々な領域に分かれているらしい。80文字しか使えないのにこんなクソみたいな固定長の制約なんて！！！
まあそこがCOBOLのいいところでもあるらしいしそういう言語なのだと割り切れれば別に問題ない。
昔と違って今はカードに印刷したりする必要ないしね。後続を次の行に書けるし。
ちなみに、<font color="green">大文字と小文字は区別されない</font>らしい。でも皆基本的に大文字だし大文字で書いた方が見栄えは良さそう。
調子に乗って1-8文字目までを記述せずにいきなり宣言なんてしようものならコンパイル時にエラー吐いてくれる。面倒くさい子である。
先程記述していたコードは空白の部分は割と適当にしたので文字数とかあってないかもしれない。そこらへんは適当にやっても実際に動いたしいいと思う。
基本的な部分はこんな感じ。
この記事はここまで。地道に勉強していきます。
Jupyter notebookにMatplotlibでリアルタイムにチャートを書く

Jupyter notebook上でリアルタイムに変化するチャートを書くのに苦労したのでコードを記載しておきます。

```python
import matplotlib
%matplotlib inline

import numpy as np
import matplotlib.pyplot as plt

plt.ion()

from random import randint
import time

from ipywidgets import FloatProgress
from IPython.display import display, clear_output

siz = 10
dat = np.zeros((siz, siz))

fig = plt.figure()
axe = fig.add_subplot(111)

num = 1000

for i in range(num):
    clear_output(wait = True)
    
    data = np.random.rand(10)
    axe.plot(data)
    
    fig.set_size_inches(18.5, 10.5)
    display(fig)
#     time.sleep(.2)
    axe.cla()
```
文字カウンターアプリ

準備中

``

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Comment Form</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <textarea id="comment" placeholder="your comment here"></textarea>
    <div class="btn">submit</div>
    <p><span id="label">30</span>characters left</p>
    
  </div>
</body>
</html>
``

``
@charset="UTF-8";
body {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  background: #e0e0e0;
}

.container {
  width: 400px;
  margin: 30px auto;
}

textarea {
  width: 400px;
  box-sizing:border-box;/*ボーダーをボックスの中に収める*/
  height: 200px;
  padding: 14px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  margin-bottom: 14px;
  line-height: 1.5;
}

textarea:focus {
  outline: none;
}

p {
  color: #333;
  font-size: 14px;
  margin: 0;
  padding-top: 10px;
}

#label {
  font-weight: bold;
}

.btn {
  display: inline-block;
  width: 150px;
  background: #00aaff;
  padding: 5px;
  color:#fff;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 #0088cc;
  float: right;
}
``
(コードが)動けばよかろうの世界で仕事をしてきて、出来ていなかった事一覧

開発や修正の業務を丸2年くらい経験しました。
パーフェクトPHPなどの手堅い入門書は一通り目を通したことがありました。
しかし、レビューとテストコードが無く、動けばよかろうの現場で作業をこなし、
また、コードを磨く意思がありませんでした。

そこから、テストコード、レビューがある世界に行き、
2ヵ月くらいで出来る様になった事の一覧です。

将来的に指導する立場になったら、
初心者はどんな壁に当たっているだろうかと思い出すためにも、
残しておきます。

# 出来ていなかった事一覧
## 最低限のお作法
- コードフォーマットすること
    - viewにフォーマッタはかけない
- テストが動く状態であること
- アクセス修飾子の確認
- [PSR-2 コーディングガイド（日本語）](http://www.infiniteloop.co.jp/docs/psr/psr-2-coding-style-guide.html) に従うこと
    - スネーク,キャメル
    - コメント
        - 処理・変数の説明
        - パラメータ、返却値の説明や型
        - phpで戻りが無い場合は```@return void```
    - TRUE/FALSEは小文字
- フルパスを使用していない事
- typoしていない(これは今でもある)

## アルゴリズム
- いずれかの条件に一致の場合、1つの条件に一致したらすぐに返す
    - なるべく早くreturn
- 異常返しパターン、正常返しパターンを読む量が少なくなる様に使い分ける
- 関数の中で落とすか、returnしてから落とすかを統一する
    - 統一されていれば、好みで決めて良い
- 中間変数が無い方が良い場合は削除
- メンバ変数にするものとローカル変数にするものを意識(変数のスコープを小さく)

## テスト・デバッグ関連
- テストケースを考えてエラー文言を作成する
- テスト項目を考えてから、関数の単位を作る
    - テストがしやすい関数を心がける

## ネーミング
- 関数は基本 動詞 + 名詞 の順でネーミング
- 処理内容が伝わる言葉を用いているか
    - [関数名によく使われる英単語（動詞）の意味とニュアンス | PHP Archive](http://php-archive.net/php/words-in-function-names/)
- getは簡単な取得処理のみ
    - 取得処理が重い(作る)場合は別の言葉
    - make,calculate,generate
- 実装をイメージさせるネーミングは使用しない
    - [ハンガリアン記法](http://qiita.com/inabe49/items/a4eedae3b7c44fe04c0d) とかが典型
    - 業務要求を中心にネーミングする  
- 否定のネーミングを使って分かりにくくしていないか
- 長過ぎる変数名を避ける
- [困ったらcodic] (https://codic.jp/)

## リファクタリング時の習慣
- 修正する際にはコメントを含めてリファクタリングする
- テストコードの修正も忘れない
- 修正前の名前が残っていないか再検索
匿名クラスのオブジェクトからインターフェースを実装したクラスのメソッドを呼ぶには

タイトルがイマイチ決まらないが、つまり次のコードのようなこと。`this@<interface>`を使う。`super`でも`this`でもない。

```kotlin
interface I {
    fun meth()

    fun obj() = object : I {
        override fun meth() { this@I.meth() }
    }
}

class A : I {
    override fun meth() = println("I am A")
}
```
これで`A().obj().meth()`は`"I am A"`を印字する。
お手軽にブラウザ上のjsコードで使うデータのバックアップと復帰を行いたい




# ダウンロード

クライアントの内部データを手軽にバックアップしたい時に使っているコードです。


```typescript

async function download(data: any, filename: string) {
  let blob = new Blob([data], { 'type': 'octet/stream' });
  let a = document.createElement('a');
  a.href = window.URL.createObjectURL(blob);
  a.download = `${filename}`;
  a.click();
}

```

# アップロード

復帰させたい場合


```typescript

function upload(): Promise<string> {
  let input = document.createElement('input');
  input.type = 'file';
  return new Promise<string>(resolve => {
    input.addEventListener('change', async (e) => {
      let files = input.files;
      if (files === null) { return; }
      if (files.length <= 0) { return; }
      const file = files.item(0);
      let text = await readAsText(file);
      resolve(text);
    });
    input.click();
  });
}

const readAsText = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => resolve(reader.result as string);
    reader.onerror = e => reject(`Error reading ${file.name}: ${reader.result}`);
    reader.readAsText(file);
  });
};


```

# サンプルコード

[こちら](https://goo.gl/X5fCAv)に動くサンプルを置いています

サンプルを含めたコードはこちらです。

``` typescript

async function download(data: any, filename: string) {
  let blob = new Blob([data], { 'type': 'octet/stream' });
  let a = document.createElement('a');
  a.href = window.URL.createObjectURL(blob);
  a.download = `${filename}`;
  a.click();
}

 const readAsText = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => resolve(reader.result as string);
    reader.onerror = e => reject(`Error reading ${file.name}: ${reader.result}`);
    reader.readAsText(file);
  });
};

function upload(): Promise<string> {
  let input = document.createElement('input');
  input.type = 'file';
  return new Promise<string>(resolve => {
    input.addEventListener('change', async (e) => {
      let files = input.files;
      if (files === null) { return; }
      if (files.length <= 0) { return; }
      const file = files.item(0);
      let text = await readAsText(file);
      resolve(text);
    });
    input.click();
  });
}


let text = '';

let b = document.createElement('button');
b.innerText = "upload";
b.onclick = async () => {
  text = await upload();
  let pre = document.createElement('pre');
  pre.innerText = text;
  document.body.appendChild(pre);
}

let b2 = document.createElement('button');
b2.innerText = "download";
b2.onclick = async () => {
  await download(text, 'text.txt')
  alert('download')
}

document.body.appendChild(b);
document.body.appendChild(b2);

```
Orange Pi Zeroの購入からWi-fi接続まで

# 購入
Banggoodにて[3-in-1 Orange Pi Zero 512MB Development Board + Expansion Board + Black Case Kit](https://www.banggood.com/3-in-1-Orange-Pi-Zero-512MB-Development-Board-Expansion-Board-Black-Case-Kit-p-1135881.html)を購入しました。拡張ボードやケースが付属するタイプのものです。商品の代金が2131円、シッピング料金が146円でした。

# 到着まで
2017年6月10日の夜中に注文し、12日の夜に広州から発送されました。16日に川崎の交換局に到着し、17日に東京の自宅に到着しました。大体1週間弱で手元に到着です。
<img width="375" alt="2017-06-20 15.51.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/82777/5f90937c-b74c-ebb7-450b-1d8a4bd8e6f4.png">

# OSの選択
色々な場所（たとえば[ここ](http://qiita.com/blucky@github/items/642856fe5754c82aa788)など）を調べていると、公式のDownloads経由でのインストールは微妙という情報を目にすることが多いので、[Armbian](https://www.armbian.com/)というOSのimgファイルを直接ダウンロードして使用することにしました（[ここ](https://www.armbian.com/orange-pi-zero/)からダウンロードできます）。フォーマットや```dd```コマンドの方法は情報が溢れているのでここでは省略します。

# 有線での設定
Armbianが起動するようになったら、Wi-fiの設定をおこなっていきます。`wpa_passphrase`等のコマンドを使用した設定方法は使用せずに、`nmtui`コマンドを使用しました。詳しくはArmbianの[docs](https://docs.armbian.com/User-Guide_Getting-Started/#how-to-connect-to-wireless)に記載されています。

設定は以下のコマンドを打ち込むだけです:
```$ nmtui-connect SSID```
これにより、SSIDへのパスワードを入力する画面が表示されるので、そこで適切な値を入力します。これだけで、Wi-fiへの接続は終了です。簡単!!

# Wi-fiを経由してSSH
最後に適当な端末からSSHして接続できれば完了です:thumbsup:
mybatisを半年使ってみて思ったことを書く

# mybatisとは？
* https://github.com/mybatis/mybatis-3

OR mapper for Javaの一種で、以下のような特徴がある。

* SQLをアノテーション内もしくはxmlファイル内に記述する
 * 正規化されてないレガシーシステムにも適用しやすい
 * SQLチューニングしやすいのでDBが性能ボトルネックになりやすいようなシステムにも適用しやすい

自分が担当しているプロジェクトで使用して半年たったので、良かった点や課題部分について記していく。

# 良かった点

## SQLアクセスするために使うクラスがへる
### JDBCの場合
* お約束として以下のようなクラスを使う
 * DataSource
 * Connection
 * PreparedStatement
 * ResultSet
* SQL発行処理が終わったら、Coneection, PreparedStatement, ResultSet を忘れず閉じる必要がある

### mybatisの場合
* SQLアクセスに使うライブラリは以下の二つ
 * SqlSessionFactory
 * SqlSession
* 閉じるのはSqlSessionだけでよし
* 当然ながら、ResultSetからgetValue()してオブジェクトにsetして、は不要

## SQLをXMLに書ける
### JavaでSQL組み立てる時

```
StringBuffer sql = new StringBuffer();
sql.append("select * from table ");
sql.append("where id=? ");
sql.toString();
```
* これだとSQLだけ抜き出してちょっとWorkbenchとかpgAdminから実行したい、って時にすごくめんどい

## MybatisのMapperXMLの場合

```
<select id="selectPerson" parameterType="int" resultType="hashmap">
  SELECT * FROM PERSON WHERE ID = #{id}
</select>
```

* XMLタグ要素の中身として書けるので、ここだけ切り出してちょっと実行してみる、ってのが格段にやりやすい

## SQLがロジック（Javaファイル）と完全に分離される

* ゆえに、SQLとロジックのステップ数を分離してカウントするのが容易
 * うちらのプロダクトってSQLがロジックと同じだけステップ数あるで！DBおばけシステムやな！とかいう自虐ができる

# 悪かった点

## XMLなのでeclipseのリファクタリング機能が使えない

* Modelクラス名変更しよう、とかいう時にソースをgrepして・・・と、スクリプト言語のようなことをする必要がある

## XMLなのでカバレッジが取れない

* うちのプロジェクトではJacocoを使ってカバレッジを計測してるけど、当然Mapper XMLファイル内のカバレッジは計測できない
* XML内で、値が指定されている時だけwhere句を追加する、とかいうif文が書けるけど、これを全部網羅しているかがわからない

# まとめ
* 大した洞察はしてませんが、概ねmybatisには満足しています
* レガシーアプリのメンテの際には、ぜひ検討してみてはいかがでしょうか
GitLabのリポジトリ移行

社内でGitLabのサーバが新旧2台たっており最近では新サーバのみメンテナンスされている状態でしたのでリポジトリを移行しました。
その時の作業手順となります。

# GitLabバージョン
```
旧サーバ ： GitLab 6.2.4
新サーバ ： GitLab 9.2.2
```
# 作業内容
1. 予め移行先のリポジトリを作成しておく。
2. 下記のコマンドでリポジトリを移行する。

```:旧サーバのリポジトリをmirrorオプションを指定してクローン
$ git clone --mirror git@[旧サーバホスト名]:[ポート番号]/[移行対象リポジトリ名].git
```
```:クローンしたディレクトリに移動
$ cd [旧サーバリポジトリ名].git
```
```:リモートリポジトリの指定を削除
# ※これをしておかないと git remote add で fatal: remote origin already exists. となる
$ git remote rm origin
```
```:リモートリポジトリに移行先のリポジトリを追加
$ git remote add origin ssh://git@[新サーバホスト名]:[ポート番号]/[移行先リポジトリ名].git
$ git remote -v
```
```:ブランチ、タグを移行先にプッシュ
$ git push -u origin --all
$ git push -u origin --tags
```
Amazon API Gateway+Cognito+JavaScriptでちょっと気をつけること

(2017.6.23現在の情報です)
Amazon API Gatewayを、cognito認証で使うときの注意点です。

リソース設定後、ステージから「SDKの生成」を選ぶことができます。
ただ、このSDK、Cognito認証を想定してないっぽいです。
（認証なし=NONEか、AWS_IAMの認証しか想定してない）

Cognitoで認証する場合、こんな感じです。
※すでにサインイン済みの想定です。

```js:sample.js
AWS.config.region = 'ap-northeast-1'; // Region

var poolData = { UserPoolId: 'ap-northeast-1_xxxxxxxx',
              ClientId: 'xxxxxxx'
};

var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData);

if (cognitoUser != null) {
    cognitoUser.getSession(function(err, sessresult) {
         if (sessresult) {
             var idToken = sessresult.getIdToken().getJwtToken();
             
             var apigClient = apigClientFactory.newClient ();

             var params = {};//必要なら設定
             var body = {};//必要なら設定
             var additionalParams = {
                 headers: {
                    Authorization:idToken //ここが大事
                 }
             }
 
             apigClient.methodName(params, body, additionalParams)
             .then(function(result){
                  //成功
             }).catch( function(result){
                  //失敗
             });
         }

    });
}


```

ヘッダーにちゃんとIDトークンを入れるってだけですが。。。
わかんなかったので書いておきます。

最初、IAMのほうの設定の問題かなぁ。。。とか思って色々やってたけど、
そっちはとくに関係なさそうでした。
cognitoとても便利だけど、ちょっとまだ追いついてない感じもしました。

README.mdに書いといて欲しいな。