OmniAICreator/Qiita-1.07M huggingface dataset:
Selenium のサンプル (Java)

Selenium のサンプルです。

```java:ex01.java
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
 
public class ex01 {
 
    public static void main(String[] args) {
        WebDriver driver = new FirefoxDriver();
        driver.get("https://ekzemplaro.org/storytelling/");
	try {
		System.out.println("5秒停止します");
		Thread.sleep(5000);
		System.out.println("一時停止を解除しました。");
	} catch(InterruptedException e){
		e.printStackTrace();
		}
        driver.quit();
    }
}
```

```text:Makefile
ex01.class: ex01.java
	javac ex01.java -cp ./client-combined-3.14.0.jar 
clean:
	rm -f ex01.class
```

コンパイル

```text
$ make
javac ex01.java -cp ./client-combined-3.14.0.jar
```

実行方法

```bash
export CLASSPATH=.:./client-combined-3.14.0.jar:./guava-26.0-jre.jar:./okhttp-3.11.0.jar:./okio-2.0.0.jar:./kotlin-stdlib-1.2.60.jar:./commons-exec-1.3.jar
#
java ex01
```

実行時に次の jar が必要になります。
>client-combined-3.14.0.jar
guava-26.0-jre.jar
okhttp-3.11.0.jar
okio-2.0.0.jar
kotlin-stdlib-1.2.60.jar
commons-exec-1.3.jar

使った Java の環境です。

```text
$ javac --version
javac 10.0.2
$ java --version
openjdk 10.0.2 2018-07-17
OpenJDK Runtime Environment (build 10.0.2+13)
OpenJDK 64-Bit Server VM (build 10.0.2+13, mixed mode)
```
Xcode ver9.4.1でAutoLayoutを設定してる時Localization issueと出てしまったけど

# 概要


Pinを用いてButtonとTextFieldの上下間に制約をつけようとしたが、
以下のような警告が出てしまった。

ちなみにButtonのwidthを80にしたい。

<img width="793" alt="スクリーンショット 2018-09-20 19.04.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/7c5e9820-3cb0-96eb-d112-48e0edfd3b1f.png">

どうにか警告をなくしたかったので、あれこれやったら警告が消えた。

# 解決策


内容を詳しく見ると以下のようなことが書かれていた。

<img width="539" alt="スクリーンショット 2018-09-20 19.04.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/a5aa9e41-d650-90ae-6cac-b62c1db6bcff.png">

結論から言うとSet Constraint to ≧ Current Widthを選択すると解決する。

つまり今の値(80)より大きくセットしとくという意味。
多分
**80のままだとiPadとかの表示で小さ過ぎちゃうんじゃない？
だからサイズ80以上にしとこ？**
っていうXcode側からの提案かと勝手に解釈してる笑

一応他の選択肢について説明する。

ここでremoveを選択すると制約自体が消えるので、幅80という条件自体が消えてしまう。
なのでダメ。

一番下のSet Constraint to ≧ Minimum Widthは
そもそものButtonのデフォルト値(この場合は46だった)より
大きくセットしとくという意味。
幅は80に設定したいのにデフォルト値46が反映されてしまうので、これもダメ。

これで解決した。
めでたしめでたし。

<img width="775" alt="スクリーンショット 2018-09-20 19.30.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/c7371e43-76f3-48d6-47a8-1990689b60d5.png">

#まとめ

- AutoLayoutの制約を設定する時に出た警告
- Localization issueが出てきたらSet Constraint to ≧ Current Widthを選択

終わり。
terraformをパースして自動で命名規則等のアラートを出したい！

# やりたきこと
- いちいち命名規則を見に行きたくない
- tagとかも統一したい
- s3のloggingルールとかも忘れないように・・・
- description書けるやつは忘れずに書きたい！

tfファイルをパースして名前とかを正規表現で引っ掛けるしかない！！

# まずローカルでプログラムが動くように！
以下のサンプルを例にファイルから読み込んでパースできるようにする
[ohsawa0515/hcl_parse_sample](https://github.com/ohsawa0515/hcl_parse_sample)

### 発生した問題
docker内のGoで以下のようなコードを書いていたのですが。。。

```dockerfile:Dockerfile
FROM golang:latest

WORKDIR /go/src/app
RUN go get -u github.com/golang/dep/cmd/dep

ADD . .
RUN dep ensure

CMD ["go", "run", "main.go"]
```


```go:main.go
package main

import (
	"fmt"
	"io/ioutil"
	"log"

	hclParser "github.com/hashicorp/hcl/hcl/parser"
)


func main() {
	log.Println("--- Parsing HCL ---")

	d, err := ioutil.ReadFile("./s3.tf")
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(string(d))

	if astFile, err := hclParser.Parse([]byte(string(d))); err == nil {
		fmt.Println(astFile)
	} else {
		fmt.Println("Parsing failed.")
	}
	fmt.Println(astFile.name)

	log.Println("--- Generate HCL ---")
}
```

goがよくわからない！！！笑
パースした中身がちゃんとできているか確認もできない状態。。。

### pythonのパッケージを見つけたので急遽そちらに
[virtuald/pyhcl](https://github.com/virtuald/pyhcl)
pythonでdict型に変換できるのでスラスラ進み始める

# 最終的にできたもの
ひとまず動くものができた！！
[test_tf_review](https://github.com/ys-tydy/test_tf_review)

```python:main.py
# coding: UTF-8
import hcl
import yaml
import re
import codecs


def tag_check_review(resource_dict, review_dict_list):
    for review_dict in review_dict_list:
        if "tags" not in resource_dict:
            return False, "tags not use"
        if review_dict["tag"]["key"] not in resource_dict["tags"]:
            return False, "need tag " + review_dict["tag"]["key"]
        if not re.match(review_dict["tag"]["regex"], resource_dict["tags"][review_dict["tag"]["key"]]):
            return False, "tag regex not matched " + review_dict["tag"]["key"] + " " + review_dict["tag"]["regex"]
        return True, "pass"


if __name__ == '__main__':
    with codecs.open('./s3.tf', 'r', 'utf-8') as fp:
        obj = hcl.load(fp)

    with codecs.open('./review_book/s3.yaml', 'r', 'utf-8') as fp2:
        review_book = yaml.load(fp2)

    for key in obj["resource"]["aws_s3_bucket"].keys():
        flg, res = tag_check_review(obj["resource"]["aws_s3_bucket"][key], review_book["aws_s3_bucket"])
        print(key)
        print(res)
```

# 今後やりたいこと
ひとまずローカルで動くものができたので、

- レビューの設定（今回だと `review_book/s3.yaml`）をどのようにまとめるかを決める
- タグ以外のテストも汎用的に動くようにする
- 既存のterraform reposirtoryに対してpull requestでレビューを実行する

あたりを進めていこうと思います。
１週間でNext.js とReact.jsでSPAを作って公開するまで

# 作ったもの

[![Image from Gyazo](https://i.gyazo.com/e0c18f823de25e452a576c073b17a4b4.gif)](https://gyazo.com/e0c18f823de25e452a576c073b17a4b4)

日本人起業家のおすすめされている本は日本語で検索するとよく出てきますが、海外の方がおすすめされている本って日本語で検索してもあまりヒットしませんよね ....
そこで私が海外のサイトでおすすめされていた本をまとめたサイトを作成いたしました。
イーロン・マスクやビル・ゲイツなど世界の有名起業家がおすすめしてる本をまとめたサイトです。（まだ６人しか追加しておりませんが....笑）

https://book-recommender.com


# 目指しているもの
これからどんどん海外の有名な起業家の本を追加していきたいです。
あのかっこいい起業家はどういう本を好んでいるんだろうと思った時にこのサイトを訪れるとパッとわかるようにするつもりです。

# 使用技術

**react.js**
業務でも react.jsを使用しているのとhtmlを書くのがめんどくさいのでこちらを選びました。


**next.js**
直感的にroutingを組むことができるのとnowというデプロイツールが充実している、またコミュニティがとても活発なのでこちらを使用しました。


# ディレクトリ構成
```
  /
  ├ static/     # 画像などの静的コンテンツ
  ├ components  #　コンポーネント
  ├ pages       # 実際に表示するコンポーネント
  ├ routes.js   # dynamic routingを定義
  └ server.js   # サーバー周り

```
一般的なnext.jsで作成するアプリのディレクトリ構成に乗っ取っております。（最初画像などもcomponents配下に置いていて読まれなくてパニックってました... 静的コンテンツはstatic配下に置かないとnext.jsは読み取っってくれないそうです。）


# 実装手順

-　見た目を作る
-　ルーティング
-　公開


# 見た目を作る
ここはreduxでさえ使っておりません。ひたすらreactでcomponentをボコボコ作成しました。
デザインについては [material-ui](https://material-ui.com/) というライブラリを使いました。これでresponsiveデザインも簡単にできます。

# ルーティング
next.jsではルーティングはpagesというフォルダ内のファイル名によって勝手に決まります。index.jsというファイルをpagesフォルダ配下に置くとルートパスが呼ばれた時にindex.jsが呼ばれます。show.jsを配置すると/showとアクセスされた時に呼ばれるって具合です。

# 公開

ここでかなり手こずりました。英語のdocumentを読みまくったり[コミュニティ内](https://spectrum.chat/next-js)で質問したりしていやっと解決できました。
まず、next build →next export →  now の３つのコマンドによって簡単にデプロイできます。

```package.json
 "scripts": { 
    "dev": "next dev", 
    "build": "next build", 
    "export": "next export"
}
```
まずこのようにpackage.json内に記述します。

そしてnext buildコマンドで　ビルドします。そしてnext exportコマンドによってreact.jsをhtml、css, jsに変換して outフォルダ配下にその変換された後のファイルを入れてくれます。それから outフォルダに移動して nowというコマンドを打てばもうデプロイの完了です。
早すぎてびっくりです。ちなみにnowのコマンドを使えば　`buy ドメイン名`と打つだけでドメインを買うこともできるそうです。nowやばい(ﾟ∀ﾟ；)　強すぎる... 

自分のようにお名前ドットコムで取得した方は　DNSサーバーを a.zit.world, b.zeit.worldと指定してあとは

```

now alias 今のドメイン名 お名前ドットコムで取得したドメイン名

```
これを実行するだけでお名前ドットコムで取得したドメインに切り替えることができます。

# 振り返ってみて
next.jsを使用すればSPA作成は爆速でできるなと思いました。あとnext.jsで詰まっても[コミュニティ](https://spectrum.chat/next-js)に質問すれば遅くても2日以内に応答してくれるので前に進めなくなるということもないです。あとnowというデプロイツールは無料枠でもレスポンスがかなり早いです。herokuの無料枠のレスポンスの遅さとは比べ物にならないです。next.jsは MagicLeepの公式サイトやNetflixの公式求人サイトでも使われているそうです。ぜひ、みなさんも一度使ってみてはいかがでしょうか。😀
【WordPress】Lenix scss compilerを使ったWordPressへのSCSSの導入

#SCSSの基礎知識
拡張子：.scss
メリット：CSSの書き方がそのまま使える

SCSS記法は、括弧{}を使って入れ子構造にすることでCSSの依存関係を示す。

#導入の流れ
###１．プラグインの追加
使用プラグイン：**Lenix scss compiler**
「プラグイン」＞「新規追加」で検索したら出てくるので「今すぐインストール」

####Lenix scss compilerについて
#####メリット
- アンインストールしてもコンパイルしたCSSファイルが残る
- コンパイルするディレクトリを複数指定できる
- 指定できるフォルダの位置がWP-SCSSより自由（./wp-content/themesより下の階層ならどこでもOK）

#####デメリット
- 使っている人が少ない
- 使っている人が少ないからドキュメントがほとんど英語


####２．SCSSファイルの作成
Lenix scss compilerは前述の通り、themes以下のファイルをコンパイルしてくれるのでthemes以下にファイルを作成。
今回の場合は、子テーマにスタイルを当てているので「./wp-content/themes/子テーマ/」に設置。

####３．プラグインの設定
「設定」＞「Lenix scss compiler」から設定。
画面はこんな感じ
![scss_001.PNG](https://qiita-image-store.s3.amazonaws.com/0/207589/289f9eb7-8541-3e86-e57d-2c566fd0d8ce.png)

「**Add Compiler**」を押すとコンパイルしたいディレクトリの指定を増やせる。
「scss folder」にコンパイルしたいディレクトリを指定して、
「css folder」に吐き出す先のディレクトリを指定。

指定の仕方は
【scss folder】
　thmes/子テーマ/コンパイルするディレクトリ
【css folder】
　themes/子テーマ/吐き出す先のディレクトリ

**※注意**
**吐き出す先にコンパイルするscssファイルと同じ名前のcssファイルがいると勝手に上書きされちゃう**

「変更を保存」したら設定完了。
これであとはscssファイルを保存するたびに勝手にコンパイルしてくれる。


####４．ファイルを読み込む
吐き出されたCSSファイルを読み込まないといけないので、読み込みたいところで**CSSファイル**を呼び出す。
今回の場合は、すべてのページに適用されてほしいので「header.php」の他のスタイルを読み込んでいる場所に<link ～を記述。

####５．テーマの編集でSCSSを編集できるようにする
~~Snippetsにテーマの編集で表示される拡張子を追加するための記述を作成。
今回つけた名前は「拡張子追加（テーマの編集）」
下記のコードを書いてSnippetsをアクティブにすればテーマの編集に表示される。~~
**「Code Snippets」を使っていたためSnippetsに記述と書きましたが、functions.phpに書いても問題なく動きます。**

```php:拡張子追加（テーマの編集）
add_filter('wp_theme_editor_filetypes', function($default_types) {
  $default_types[] = 'scss';
  $default_types[] = 'js'; /* 追加したい拡張子を1行ずつ増やしていけば出てきてくれる */

  return $default_types;
});
```

####６．実際に書いてみる
あとはSCSSで書くだけ。
SCSSの記述にミスがあった場合、保存が終わらずSave Boxが一生居るので消えないな？と思ったらミスがある。

wordpressのエディタでミスを探すのは至難の業なのでローカルで書いて少しずつ移していくにしたほうがいいかな？
Atomだったら「**sass-autocompile**」が保存のたびにコンパイルしてエラーチェックしてくれるので便利。


#※追記（動作に関して）
1年弱使ってみての感想

####保存に関して
保存時にコンパイルしてくれますが、保存完了までの時間は体感ではあまり変わらず？でした。
ちなみにファイルの行数としては3,000行くらいだったのでこれ以上多くなった場合はちょっとわからないです。

####エラーに関して
1年弱使って、記述が正しいのに動かなかったのは1回のみ。

```scss:sample.scss
// これだと動かない
border-radius: 0 0 10px 10px / 0 0 10px 10px;

// これだと動く
border-radius: 0 0 10px 10px / 0px 0 10px 10px;
border-radius: 0px 0px 10px 10px / 0px 0px 10px 10px;
```

「/」の後に数値のみだとうまくコンパイルされないようで、単位をつけると問題なく動きました。
React Profilerを試してみる

## 要旨
React v16.5から入った[React Profiler](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)をちょろっと試してみました。

## ざっくりとした説明
- React DevToolsにProfilerタブが追加された
- プロファイリングを開始すると、コンポーネントがレンダリングされるたびに情報を収集する
- プロファイリングを停止すると、コミットごとにレンダリング時間、props、stateを表示してくれる
- interactionとコミットを紐付けて可視化することもできる

## 前提条件
- React v16.5.0+
- React Developer Tools v3.3.2+

## 動作
[デモ](https://k9983k7mz5.codesandbox.io/)

- 同期カウンター
- 非同期カウンター
- レンダリング速度が遅くなるとき

の3つの例を確認できるデモを作ってみました。

## 同期カウンター/非同期カウンター
プロファイリングしながら、同期カウンター/非同期カウンターをそれぞれ押してみます。
![Screen_Shot_2018-09-20_at_18_36_25.png](https://qiita-image-store.s3.amazonaws.com/0/98379/13598b10-f040-3902-ca38-da35695ea188.png)
![Screen_Shot_2018-09-20_at_18_36_38.png](https://qiita-image-store.s3.amazonaws.com/0/98379/02c4cacb-4b5b-fb82-e7c1-53eb4e05235a.png)

2つのコミットが記録されてますね！

interactionを確認してみると、
![Screen_Shot_2018-09-20_at_18_37_15.png](https://qiita-image-store.s3.amazonaws.com/0/98379/3a898302-02d1-30a7-f36a-3f75939cec11.png)
同期と非同期のボタンを押した時にそれぞれ記録されています！
非同期のほうは2秒タイムアウトを入れてるので、そのぶんバーが伸びています。
また、■をクリックすると、interactionに紐づいているコミットに飛ぶことができます。

## レンダリング速度が遅くなるとき
プロファイリングしながら、テキストボックスの値をだんだんと増やしてみます。
最初のコミットではあまり時間がかかっていませんが、
![Screen Shot 2018-09-20 at 18.38.33.png](https://qiita-image-store.s3.amazonaws.com/0/98379/c3842b12-3376-09cf-c2ea-2d1bbce666db.png)
値が増えると遅くなることがわかります。
![Screen Shot 2018-09-20 at 18.38.49.png](https://qiita-image-store.s3.amazonaws.com/0/98379/74441795-6e15-e865-b52c-536e51d1c84b.png)
![Screen Shot 2018-09-20 at 18.39.19.png](https://qiita-image-store.s3.amazonaws.com/0/98379/126e764d-b4fb-6bca-4f81-bd88de2a53f8.png)
閾値を設定して時間のかかってるコミットだけを表示することもできます。

## 思ったこと
- interactionをactionに仕込むのは有用そう
    - production環境だとinteractionは表示されないらしい
    - redux-loggerとか使ってるとあまり魅力に感じないかも
    - interaction周りは後にブログに書かれるみたいです
    - 現状、unstableなのでAPI周りは大いに変わりうる
- Elementsで選択した親コンポーネントに紐づく子要素だけを表示してくれて便利
- かかってる秒数で絞り込んでボトルネックを探していけて便利

## まとめ
interactionは自分で仕込まないといけないけど、
プロファイリングだけならReactのversionあげればいいだけなので、お手軽。

## 関連Doc
- [公式Doc](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)
- [trackingの説明](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16)
- [tracking周りのAPI(ソース)](https://github.com/facebook/react/tree/master/packages/schedule)
Browsersync で SSI を使う (rewriteRules編)

## Browsersync で SSI したい

Browsersync で SSI を使いたい場合、ちょっと調べると [browsersync-ssi](https://www.npmjs.com/package/browsersync-ssi) などのパッケージを middleware として使う方法がよく出てきます。

ただ、すでに他の middleware を導入しており、バッティングしてすんなり動かない……というケースがありましたので、別の方法で SSI を動かしてみたメモです。

## rewriteRules を使う

Browsersync の rewriteRules オプションで、html の中身を自由に書き換えられる模様。
ということで SSI の仕組みをそこに埋め込みます。

ざっくりこんな感じ

```
const browserSync = require('browser-sync');
const fs = require('fs');
const path = require('path');

browserSync.init({
    server: 'public',
    files: 'public/**/*',
    rewriteRules: [
        {
            match: /<!--#include virtual="(.+)" -->/g,
            fn: function (req, res, match, filename) {
                const filePath = path.join(__dirname, 'public', filename);
                if (! fs.existsSync(filePath)) {
                    return `<span style="color: red">${filename} could not be found</span>`;
                }
                return fs.readFileSync(filePath);
            }
        }
    ],
});
```

ゴリゴリ感はありますが、動いた。

### 参考

- BrowserSync/recipes
    - https://github.com/BrowserSync/recipes/tree/master/recipes/server.includes
php-fpm の動作確認



## 概要
* docker で nginx と php-fpm を別々のDockerコンテナで構築する際  
  `nginx => 9000Port => php-fpm` でどうしてもアクセスできなかった
* 9000Port はhttpプロトコルではなくfastcgiなプロトコルなので確認しづらい
* cgi-fcgi コマンドを利用することで、レスポンスが返却されるか確認出る


## install

### CentOS

```
yum --enablerepo=epel install fcgi
```

ubuntu(未確認)

```
apt-get install libfcgi0ldbl
```

## 接続テスト

* 確認用スクリプトの設置

```
echo "<?php phpinfo(); ?>" >> /var/www/html/index.php 
```

* リクエスト

```
SCRIPT_NAME=index.php \
SCRIPT_FILENAME=/var/www/html/index.php \
REQUEST_METHOD=GET \
cgi-fcgi -bind -connect 127.0.0.1:9000
```

* レスポンスが返却されれば成功！

```
X-Powered-By: PHP/7.2.10
Content-type: text/html; charset=UTF-8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
/*以下略*/
```

## その他

### コマンドHELP

* UNIX domain socket も対応していそうです。

```
[root@ee1633ae5f0c /]# cgi-fcgi --help
Unknown option --help
Missing application pathname
Missing -connect <connName>
Usage:
    cgi-fcgi -f <cmdPath> , or
    cgi-fcgi -connect <connName> <appPath> [<nServers>] , or
    cgi-fcgi -start -connect <connName> <appPath> [<nServers>] , or
    cgi-fcgi -bind -connect <connName> ,
where <connName> is either the pathname of a UNIX domain socket
or (if -bind is given) a hostName:portNumber specification
or (if -start is given) a :portNumber specification (uses local host).
```



### 参考
https://easyengine.io/tutorials/php/directly-connect-php-fpm/
二次元配列を一次元配列にする

たとえば、[[1,2,3],[5, 6, 7]] という二次元配列があったとして、これを [1, 2, 3, 4, 5, 6, 7] というふうにひとつの配列にまとめたい場合、Array.reduce を使えば簡潔に書くことができる。

```javascript
const arrayOfArray = [[1,2,3],[5, 6, 7]];
const flattenedArray = arrayOfArray.reduce((acc, eachArray) => acc.concat(eachArray), []);
console.log(flattenedArray); //[1, 2, 3, 4, 5, 6, 7]
```

[MDN　Array.reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
centos7にgitからデプロイ

これで俺のgitデプロイ環境は完成。
手間取ったので残しておく。
セキュリティ的に何かあっても俺は知らない。
だってテスト環境だし。

環境
・centos7
・bitbucket

```console
# yum -y install git
```
必要なら

```console
# mkdir デプロイディレクトリ
```
ここから真面目に

```console
# cd デプロイディレクトリ
# git init
```
毎回パスワードを入れるのが面倒なので、

```console
# git clone -b ブランチ名 https://bitbucket.org/hoge/hoge.git
```
を、

```console
# git clone -b ブランチ名 https://ユーザー名:パスワード@bitbucket.org/hoge/hoge.git
```
とした。

あとは、修正するたびに、

```console
# git pull
```
で。
Windows Server 2016でWifiを使用する方法

##結論

「サーバーマネージャー」から「ワイヤレスLANサービス」の機能を追加する。

####それでもダメだった場合

・無線アダプターのベンダーのホームページからの最新ドライバをダウンロードして当ててみる。Win2016ならWin10。

※アイ・オー・データのWNPU1167Mでは動いた。他のはわかりません。
http://www.iodata.jp/product/network/adp/wnpu1167m/index.htm
Storyblokのdocs翻訳チャレンジその11！！！

### ソース

https://www.storyblok.com/docs/Delivery-Api/Tags 

# タグ

## 全てのタグを取得

### エンドポイント

```
GET /v1/cdn/tags
```

### パラメータ

|名前|説明|
|:--|:--|
|token(必須)|プライベートトークン|
|starts_with|slugで始まる|

### リクエスト
クエリパラメータ

```
token=wANpEQEsMYGOwLxwXQ76Ggtt
starts_with=de
```

cURL

```
curl "https://api.storyblok.com/v1/cdn/tags?token=wANpEQEsMYGOwLxwXQ76Ggtt&starts_with=de" -X GET \
	-H "Accept: application/json" \
	-H "Content-Type: application/json"
```

### レスポンス

ボディー

```json
{
  "tags": [
    {
      "name": "spicy",
      "taggings_count": 1
    },
    {
      "name": "red",
      "taggings_count": 1
    }
  ]
}
```
Uncaught Error: Syntax error, unrecognized expression

jQueryのバージョンが変わり、正規表現の書式が厳密になったようです。

$(‘a[href^=#]’)を
$(‘a[href^=”#”]’) に変更すれば動く。
記事が多くみられました。

自分も、同じエラーになったので少し変えてみました。
自分の場合は、
$("window").on("load", function() {　　　　　を
$('window').on("load", function() {　　　　　に変えると動きました。

windowの部分ですね。"" を ' 'に変更するとエラーがなくなりました。
よっしゃ。
Markdown PDFでファイルパスの円マークがバックスラッシュに変わる問題への対策

# 概要

Visual Studio Code の拡張機能 [Markdown PDF](https://github.com/yzane/vscode-markdown-pdf/blob/master/README.ja.md) を使うと markdown を簡単にPDF化できますが、デフォルト設定ではファイルパスの円マークがバックスラッシュに変わってしまう問題があります。

円マークをそのまま「￥」として表示させる方法について記載します。

# 現象

まずはバックスラッシュに変わる現象の確認です。
以下のような markdown からPDF化してみます。

<pre>
# ファイルパスのテスト

```
C:\サンプル\sample
```
</pre>

![001.png](https://qiita-image-store.s3.amazonaws.com/0/278145/257aa732-09b5-81eb-2196-79a0a7cb3e49.png)

ファイルパスの円マークがバックスラッシュに変わっています。

# 原因

Markdown PDFでは markdown から html に変換してPDF化しているため、変換時に html ファイルが一時的に生成されます。
この html ファイルを開いてファイルパスの箇所のスタイルを確認してみます。

![002.png](https://qiita-image-store.s3.amazonaws.com/0/278145/e009eec3-9129-3661-f962-411e260276af.png)

適用されている `font-family` が `Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback"` となっています。

この `font-family` を解除してみます。

![003.png](https://qiita-image-store.s3.amazonaws.com/0/278145/453cedc2-e4ed-c7b6-5792-dea290b94ee7.png)

デフォルトのスタイルシートが適用されて `font-family` が `monospace` に変わりました。
バックスラッシュも円マークに戻っているのでMarkdown PDFが使用しているスタイルシートの `font-family` に原因があるようです。

# 対策

Markdown PDFには外部のスタイルシートを適用するための設定が用意されているので、ここからスタイルシートを指定して `font-family` の上書きを行います。

```javascript:設定
markdown-pdf configuration
  // A list of local paths to the stylesheets to use from the markdown-pdf. All '\' need to be written as '\\'.
  "markdown-pdf.styles": [],
```

設定をコピーし、ワークスペースの設定からスタイルシートを指定します。

```javascript:ワークスペースの設定
{
    "markdown-pdf.styles": ["style.css"]
}
```

ワークスペースには `style.css` を作成しておきます。

```css:style.css
code {
  font-family: "ＭＳ ゴシック";
}
```

スタイルシートから `font-family` を `ＭＳ ゴシック` に上書きしました。改めてPDF化してみます。

![004.png](https://qiita-image-store.s3.amazonaws.com/0/278145/af44d921-0cce-9bc0-e7aa-649e16e460e5.png)

無事に円マークをそのまま「￥」として表示させることができました。
【Firebase】15秒でわかるTest LabのiOS版は何ができるのか？

FirebaseにTest Labというクラウドベースでテスト実行できるサービスがあります。
Test LabのiOS版どんなことが出来るのかパッとわからなかったので、パッと分かるように15秒で説明します。

（やり方については公式ドキュメントを見れば簡単に出来ますので割愛）
https://firebase.google.com/docs/test-lab/ios/firebase-console?hl=ja

# やれること

XCTestを実行できるよ
自分のXCodeでビルドしたファイルをzipで固めてアップロードする必要があるよ

# 実行環境

<img width="791" alt="Screenshot at Sep 20 17-52-33.png" src="https://qiita-image-store.s3.amazonaws.com/0/24308/0add11b5-6dce-17a2-f1f5-2737ed3bea11.png">

↑いろいろな端末やOS選べて、並列実行出来るよ
利用可能な端末一覧
https://firebase.google.com/docs/test-lab/ios/available-testing-devices?hl=ja


# 出力

<img width="823" alt="Screenshot at Sep 20 17-50-07.png" src="https://qiita-image-store.s3.amazonaws.com/0/24308/66571c6d-76a9-7029-577e-753a99199cc7.png">

↑テストケースの結果が出るよ

<img width="823" alt="Screenshot at Sep 20 17-50-46.png" src="https://qiita-image-store.s3.amazonaws.com/0/24308/77059ce3-3999-c254-2481-afc52ae81823.png">

↑ログみれるよ

<img width="822" alt="Screenshot at Sep 20 17-51-04.png" src="https://qiita-image-store.s3.amazonaws.com/0/24308/5b9583d0-84f6-bac6-b813-a97d0abd3f0f.png">

↑動画も取ってくれるよ

<img width="762" alt="Screenshot at Sep 20 17-51-26.png" src="https://qiita-image-store.s3.amazonaws.com/0/24308/e5e818c9-a072-06a9-189b-e692aad76f97.png">

↑結果はGCPのStorageに格納されるよ

# その他

無料プランだとテストできる回数に制限あるみたい


以上！
【JavaScript】正規表現を使ってパラメータの値を取得する

指定したパラメータの値を取得するための関数。

```javascript:script.js
function getParam(val) {
  var p = location.search;
  var v = '(?:(?:^|.*\s*)' + val + '\s*\=\s*([^&]*).*$)|^.*$';
  return p.replace(new RegExp(v), '$1');
}

alert(getParam('hoge'));
```
GoLand で linter を有効にする

# はじめに

* GoLand でファイルのセーブ時に go fmt, goimports, gometalinter を有効にする手順

# バージョン

* GoLand 2018.2.2

# 手順

* メニューの `GoLand > Preferences > Tools > File Watchers` を開く
* `+` を押下しデフォルトで用意されている `go fmt`, `goimports`, `gometalinter` を追加する
  * 未インストールであればインストールするウィザードが出るのでそのままインストールする
  * gometalinter は各種 linter のラッパーなので、インストール後にターミナルから `gometalinter -i` を実行し、利用している linter をインストールする

# gometalinter の設定

* gometalinter はデフォルトでは多数の linter を実行するのでそこそこ重くなる
* File Watchers の設定で `Arguments` に必要な linter だけを有効にするよう引数で指定すると使いやすくなる

```デフォルトの引数（実行時間 20sec 程度）
--vendor --fast --enable-gc --tests --aggregate --disable=gotype $FileDir$
```

```軽量化した引数（参考までに）（実行時間 2sec 程度）
--vendor --fast --enable-gc --tests --aggregate --disable=gotype --disable=gosec --disable=gocyclo --disable=vetshadow $FileDir$
```
phina.js 1日1ゲーム企画！ 自作クラスを作る！ 2日目

1日1ゲーム企画！
２日目です！
え？1日目から何日も経ってる気がしますが気のせいです！
では、今日もがんばりましょう。

開発には、javscriptのライブラリであるphina.jsを使わせていただきます！

今回は、前回書いたコードを自作クラスにまとめて呼び出してみました！


[Runstantで開く](https://goo.gl/886BxA)

```js
phina.define('day1', {
  init: function(parent) {
      // 背景色を指定
    parent.backgroundColor = '#ccc';
    // ラベルを生成
    this.label = Label('これから毎日ゲームを作るよ！').addChildTo(parent);
    this.label.x = parent.gridX.center(); // x 座標
    this.label.y = parent.gridY.center(); // y 座標
    this.label.fontSize = 40; // 塗りつぶし色
    this.label.fill = '#f00'; // 塗りつぶし色
  },
});
```

上記のように、day1クラスを作成して、
以下のように、引数にthisを渡しつつ呼び出しています。

```js
// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    var day = day1(this);
  },
});
```


2日目は以上です！
jQuery -counterUp

CounterUpの方法
1.まずhtmlでcounterクラスを作成し、価格など動かしたい数字を記入する。
2.下に貼ったurlに飛びzipファイルをダウンロードする。
3.自分のエディタにあるjsフォルダに
jquery.waypoints.min.js
jquery.counterup.min.js
を保存する。
4.bodyの一番下に二つのファイル名を記述する。
5.エディタにhtml,cssと同様にjsのファイルを作りそこに$(function)から始まるやつをペーストするだけ。



```:jquery-counter

$(function(){
  $('.counter').counterUp({
    delay:10,
    time:2000
  });
});
```

```
<body>
    <script src="jquery.waypoints.min.js"></script>
    <script src="jquery.counterup.min.js"></script>
</body>
```


URL載せときます。
```
https://github.com/ciromattia/jquery.counterup
```

ここから飛んでいけます。
Flutter StudioでFlutterのUIをつくる

Flutterにjsxないの？という話が、githubのIssuesではちょくちょく議論が白熱していますが、いいや、そもそもコード書きたくないんだが？というPaul Mutisyaさんが、Flutter StudioなるUI作成ツールをつくっています。

* https://medium.com/@pmutisya/create-flutter-studio-using-dart-501f6577c1ca

ちなみに、いまはV2になっています。

* https://medium.com/@pmutisya/flutter-studio-version-2-41cce10fcf3d

神です。VSCodeにとりこまれて、公式化したらさらに神だなと思います。

追記：
このあまりに内容のない記事に「いいね」くださり、とても恐縮ですので、Flutter Studioについてもっと詳細に書かれた以下の本もおススメしておきます。
www.amazon.co.jp/dp/4798055832

# Widget

Flutterでは、UIを全部Widgetで表現します。
HTML/CSSのように構造とレイアウトを分離することはできないので、一緒に考えて作る必要があります。

公式でたくさんのWidgetがサポートされています。
https://flutter.io/widgets/

本来は、これらの仕様を見て、地道にコードを書いていかないといけないところですが、、、

# Flutter StudioでWidgetを使う

https://flutterstudio.app/

Flutter Studioなら、サポートされているWidgetをただメニューから選んで、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/44912/055068c3-1510-80a3-3563-9c39ce2c0740.png)

スマホエリアにD&Dするだけです。
属性も簡単に変えられます。
シンプルな作りになっているので、操作に迷うことはないと思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/44912/bf76772d-c8a5-2436-50ac-62ed4b744652.png)

source codeタブを開けば、ソースコードが生成されているので、あとはコピペするだけです。なんという神。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/44912/187c3e58-c22c-e5dc-22fc-9db135159a17.png)

おしまい。
試練のテスト・・・

　先のBlogに書いたように今週から本格的にアプリの各機能をテストし始めました。テストの仕方としては、デバック用に新しくproviderを作り、app.config.tsにデバックコードを追記し、page内のconfiguration.tsに「設定」を押すと下記のようにmodalwindowが表示されるように処置を施しました。

　上記のような処理を施すことによって偉人診断結果にあたる全32種類が表示され、相手側も同様に全32種類を選ぶことができ、偉人相性診断全1024通りが素早く表示できるようになりました。内部容量の関係で全パターンを表示させることはできませんが、以前のように閾値を確認しながら全部で40項目ある質問にいちいち答えていく必要はなくなりました。

　・・・ただ、全ての相性パターンを表示させることはできましたが、用意されたmasterデータと実際にブラウザで確認できる表示との称号は全て行わなければならないため、来週の火曜日にかけて行っていこうと思います。単純計算で1時間で60パターンを見ることができると試算して、1024÷60で約17時間、今日2時間程テストしてみたところ6人×32人＝192人分見ることができました。今日だけでは全体の２割にも満たない数しか見ることができませんでした・・・残りは832人・・・まだまだ、これからという感じですが、時間をかければどうにかなる作業であるため、土日&月火を使い少しずつ見ていこうと思います。。。

　どんなアプリを作る際にも必ず必要な行程になると分かっていても、やはり非常に退屈&面倒と言わざろう得ないテストです。。。(涙)
<img width="768" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/245982/b178cb43-210e-940c-d8ae-63f7de6e1785.png">
Swift4.2へのバージョンアップで自動置換できなかったパターン

# Swift4.2へバージョンアップした際のメモ

- 基本的に、エラーが出るようになった部分の `fix` ボタンを押すことで、renameやreplaceされたものが自動変換される
- 以下、 `fix` ボタンを押しても上手く自動置換が効かなかったパターンを列挙し、書き換え後の内容を併記

```swift
.UIKeyboardWillShow
//　↓
UIResponder.keyboardWillShowNotification
```

```swift
NSNotification.Name.UIKeyboardWillShow
//　↓
UIResponder.keyboardWillShowNotification
```

```swift
.UIKeyboardWillHide
//　↓
UIResponder.keyboardWillHideNotification
```

```swift
NSNotification.Name.UIKeyboardWillHide
//　↓
UIResponder.keyboardWillHideNotification
```

```swift
UIImageJPEGRepresentation(uiImage, self.compressionQuality)
//　↓
uiImage.jpegData(compressionQuality: self.compressionQuality)
```

```swift
.UIDeviceOrientationDidChange
//　↓
UIDevice.orientationDidChangeNotification
```

```swift
NSNotification.Name.UIDeviceOrientationDidChange
//　↓
UIDevice.orientationDidChangeNotification
```
複数宿に対応できるWP宿泊予約プラグインをさがしてみた

複数ホテルに対応できるWP宿泊プラグインを夏に探しました。

探す際の要件は

 - 宿の予約ができる
 - 複数の宿を登録できる
 - 宿ごとに管理者を設定できる
 - 多言語対応できる

です。

# 困ったこと

一つの宿の予約機能を作れるプラグインはたくさんあるのに、複数宿に対応できるプラグインはほとんどない！

ほとんどないどころか、日本語で検索した時には1つも見つからなかったので少し苦労しました(英語力大事…！)

考えてみればほとんどないのは当たり前で、大抵の場合は一つの宿の管理ができればいいですよね。

# 見つけたプラグイン
さて、今回見つけたプラグインは[Jomres](https://www.jomres.net/)。
英語のプラグイン紹介サイトで見つけました(リンクはメモりわすれました)

> Joomla & WordPress Online Booking Engine and Property Management Solution


だそうです。

デモは[こちら](https://www.jomres.net/demo)から。

Jomresのオススメポイントと欠点を紹介します。

**オススメポイント**

 - 上記の要件をすべて満たす
 - 機能がめちゃくちゃ豊富
 - Jomres用のプラグインが非常にたくさんあるのでカスタマイズができる

機能が豊富すぎてまだ全容を把握しきれていません。
宿の運営に必要な機能はだいたい揃っているように見受けられます。
宿の予約のみならず、レンタカーの予約などもできるようです。

**欠点**

 - 英語ドキュメントしかない上に英語ドキュメントで足りない点も多い
 - 日本語の場合は翻訳ミスを直す必要あり
 - すんなり設定がうまくいくわけではない(エラーの対処などをする必要がある)

# 最後に
複数宿を1つのWPアプリケーションで管理し、かつ多言語対応をする必要がある場合はおそらくこれしかないと思いますが、もっと良いプラグインがあったら教えてください！
git コミット時のファイルモードの変更を無視する設定を探す旅

gitとファイルモード、

実際のところは、よくわかんないんだけども、とりあえず、

まず、
gitにコミットしようとしたら、ファイルモードが変更されていて差分として表示されてしまう状況がありました。
今回はファイルモードを変更する必要はないのと、毎度差分として表示されるのも面倒なため、これを無視する方法はないかとググってみると、まぁ出てくるわけです。

```bash:ファイルモードの変更を無視する設定らしい
git config core.filemode false
```

よく見れば、殆ど config を変更する方法だったので、念のためマニュアルを読みました。
この項目「core.fileMode」は、使用しているファイルシステムによって実行可能ビットが欠落してしまったりその逆になったりするなどの状況があるので、その異なるファイルシステム間で整合性を保ってやりとりするための設定のようです。（？：参考例であってそのためだけってわけでは無いかもしれません。）
これは git clone した時か、git init した時に自動設定されるので、変更する必要がそもそもなさそうな感じがします。
そもそもファイルモードが変更されてるのがおかしいわけですが、他と協調してやってるから仕方ないところもある。
それにファイルモードを変更したい場合もあるでしょうし。（自分の現場では全然無いですが。）

そのため今回のように元の意図と異なる使い方ではないかなどと悩む。
ファイルモードにこだわる必要がない場合か、
全員同じファイルシステムで扱ってる前提なら false に設定しておけば僅かに楽になるので悪くないという気はしますが、実際のとこどうなんでしょうか？、という。

とはいえ、任意で変更できるように項目が用意されているわけですから使えるときは使えということも同時に真です。

要は自分がコミットする際にファイルモードが変更されてなければ問題ないわけですから false にする分には問題ないのかもしれません。
今回のことで言えば　false　から　true　にするわけではないので問題はないのかもしれません。
何はともあれ、自分の環境を確認してから任意で変更したほうがよいでしょう。

わかりませんが。

//TODO:
・・・


*　HFS　Plusだと思ってたらAPFSになってた。しかし今回のことで大差はないだろう。
Macのファイル容量が圧迫しまくってるときの魔法コマンド



こんにちわ。はこです。
「システム」の容量が156GBになって、仕事用のMacBook Proが溢れてきました。つらい。


# 使うコマンド


```bash
$ sudo du -g -x -d 5 / | awk '$1 >=5{print}'
```



このコマンドで「5GB以上あるディレクトリ」を表示してくれます！
やったね！！



## 説明

```bash
$ du -g(GB表示) -x(別ファイルシステムは除外) -d 5 (ディレクトリを掘る。5階層掘る)
$ awk '$1 >=5{print}'(duの結果をスペース区切りした結果の1番目(つまり何GBかのとこ)が、5以上なら、その行を出力)
```



そんだけ。
大した話じゃないけど便利。
プライベートな、OpenStack上にdocker-machineを使ってインスタンスを作るときのTips

# 概要

- `x509 ....` のようなエラーがでたり、
- ネットワークを指定し忘れたり
- sshのキーペアのやり方わすれたり
- ssh するユーザーの指定するやり方をわすれたり
- floating ip pool の指定の仕方をわすれたり
- docker 用のport開け忘れたり

するので、メモ的に。


# まず見るべきところ

ここに、いろいろオプションがでている

- [OpenStack — Docker-docs-ja 17.06.Beta ドキュメント](http://docs.docker.jp/machine/drivers/openstack.html) 


# 結論

## `x509 ....` のとき

証明書関連でこんな感じのエラーがでたときで、理由がわかっているならば、

`--openstack-insecure`

を使うと良い

## ネットワークを指定し忘れたら

`--openstack-net-name`

を書けば良い

## ssh のキーペアの指定の仕方

少なくとも以下の２つを足す。
必要があれば、
`ssh-add プライベートキーのファイル`

- `--openstack-keypair-name OpenStack上でつけたキーペアの名前`
- `--openstack-private-key-file プライベートキーのファイル`

## ssh するユーザ名の指定

`--openstack-ssh-user ユーザー名`

## floating ip pool の指定の仕方をわすれたり

`--openstack-floatingip-pool プールの名前`

## docker 用のポート 2376 をあけわすれたら

security groupに追加する
フラグメントをネストしている場合に子フラグメント内での画面遷移をバックキーで戻したい場合

Fragment内にFragmentを入れ子にしている場合(※1)に、子Fragmentでは、addToBackStack()メソッドを呼んでも、ハードキーのバックキーで一つ前に戻ることができない。その場合は、以下のコードを追加することで一つ前に戻ることができる。
(※1)getChildFragmentManager()を使用している場合


```MainActivity.java
	@Override
	public void onBackPressed() {
	    // if there is a fragment and the back stack of this fragment is not empty,
	    // then emulate 'onBackPressed' behaviour, because in default, it is not working
	    FragmentManager fm = getSupportFragmentManager();
	    for (Fragment frag : fm.getFragments()) {
	        if (frag.isVisible()) {
	            FragmentManager childFm = frag.getChildFragmentManager();
	            if (childFm.getBackStackEntryCount() > 0) {
	                childFm.popBackStack();
	                return;
	            }
	        }
	    }
	    super.onBackPressed();
	}
```
CSSの擬似要素について

　今回の内容はアプリ制作を進めていくうえで使用した擬似要素についてです。

　昨日と同様にHTML、CSSのリファクタリングを進めていたところ、矢印の部分を作る際に擬似要素に書き換える必要が出てきました。理由としては、 HTML上に記述する要素はできるだけ少なく、分かりやすいようにするべきであるからとのことでした。

＊昨日制作した左右の両端の部分です。
![スクリーンショット 2018-04-12 18.51.30（2）.png](https://qiita-image-store.s3.amazonaws.com/0/245982/5911d8c5-5159-b8c1-3471-2680c3deb98d.png)


　擬似要素の特徴はHTML上に記述せずとも、CSS上で記述することでブラウザ上に表示させることができる便利な機能のことです。

(例)　::before、::after　etc...

＊具体的なCSS上における書き方

.example:before {/
   　content: 'TITLE HERE';
  　 color: gray;
  　 font-size: 2em;
 　  display: block;
   }
　ちなみに　content:'  '　を書き、'  'の中に文字を書くことで、もとの要素とは別にブラウザ上に文字を表示させることもできます。

　慣れるとCSSだけでこんなもの↓まで書けるようになるそうです。フロントエンドエンジニアとして活躍していくからには、JS関連のフレームワークだけでなく、身近にあるCSSもより上級なものを扱えるようにしていきたいと思います。
<img width="1440" alt="スクリーンショット 2018-04-12 22.12.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/245982/310c5ec1-b3e1-8db1-6700-ebb7d6a8cf6f.png">

ちなみに今回参考にしたのはこちら↓の記事です。

https://saruwakakun.com/html-css/basic/before-after

　このシリーズはCSS関連の情報が非常に分かりやすく、かつ豊富に揃っているため、リファレンスとして非常におすすめです。
機械学習をgpuでぶん回すための、ubuntu, cuda, cudnn, chainer, cupyの設定

macで機械学習させていたのですが、あまりの計算の遅さにやっぱgpuっしょということで、ubuntuを使うことに。そのための設定手順を書きますー。クラウド使わない、目の前にgpuがあるタイプのローカル環境での設定です。
今回のセットアップ、他の記事でも書かれているように、自分もはまってしまいました。
きちんと一次情報を見に行くことは大事、ですね、、、、教訓。


大枠の流れは、
・ubuntuをインストール
・CUDA（NVIDIA社のGPUでGPGPUしたい人のためのプログラミング環境）のインストール
・cuDNN（NVIDIAが公開しているDeep Learning用のライブラリ）のインストール
・chainer, cupyのインストール
です。キーワードとしては、
`ubuntu 18.04 LTS` `CUDA Toolkit 9.0` `cudnn-9.0-linux-x64-v7.2.1.38.tgz`
です。

参考にした記事は、
「Ubuntu18.04にNvidia Driver, CUDA, cuDNNを入れる」
https://qiita.com/nakamura21/items/2b2ff6524710d167d618
「Ubuntu(16.04)にChainer+GPU環境を構築する」
https://chain-pylog.hatenablog.com/entry/2018/03/20/202555
です。

#1. ubuntu 18.04 LTSをインストールするためのブートUSB作成
2023年4月までサポートと、最も長いサポートのあるUbuntu 18.04 LTSを採用。
SSDに以前のwinOSが入っていたので、それを起動しないように、マザボでbootの優先順位の設定など必要でした。こういうの久々だと忘れてる。
https://qiita.com/hktm/items/0bacdd144365c2da1165

#2. ubuntuで、gpuを認識するための設定
ここはサクッと

```
sudo add-apt-repository ppa:graphics-drivers/ppa
sudo apt update
sudo apt install nvidia-387

# インストールが終わったら再起動
sudo reboot
# 確認も
nvidia-smi
```

https://websiteforstudents.com/install-proprietary-nvidia-gpu-drivers-on-ubuntu-16-04-17-10-18-04/

#3.CUDAの設定
nvidia公式ページからダウンロード、書いてあるがままにコード
今回は、`CUDA Toolkit 9.0` `Linux Ubuntu 16.04 x86_64`を選択。

|![スクリーンショット 2018-09-20 11.27.31.png](https://qiita-image-store.s3.amazonaws.com/0/255578/dd2a7e5e-d9d9-2929-a2e0-258c6c8871dc.png)|
|:-:|

https://developer.nvidia.com/cuda-downloads?target_os=Linux&target_arch=x86_64&target_distro=Ubuntu&target_version=1804&target_type=deblocal
表示されるがまま実装すればいける、はず。

```
sudo dpkg -i cuda-repo-ubuntu1604-9-0-local_9.0.176-1_amd64.deb
sudo apt-key add /var/cuda-repo-ubuntu1604-9-0-local_9.0.176-1_amd64.deb
s/7fa2af80.pub
sudo apt-get update
sudo apt-get install cuda
```

#4. cuDNNのインストール
はまったのここ。
DLするのに、登録必要なので注意。
選んだのは、cuDNN v7.2.1 for CUDA 9.0の欄の「cuDNN v7.2.1 Library for Linux」

```
#展開
tar xzvf cudnn-9.0-linux-x64-v7.2.1.38.tgz

#コピー
sudo cp -a cuda/lib64/* /usr/local/cuda/lib64/
sudo cp -a cuda/include/* /usr/local/cuda/include/
```

はいきました　。PATHを通さないとですね。いつもこいつにやられるんです。
.bashrcの一番下に、以下のコードをコピペで。

```
LD_LIBRARY_PATH=/usr/local/cuda/lib64:$LD_LIBRARY_PATH
PATH=/usr/local/cuda/bin:$PATH
LIBRARY_PATH=/usr/local/cuda/lib64:$LD_LIBRARY_PATH
```
書き込み終わったら、
`source ~/.bashrc`忘れずに。
パスってナニ？って方はこちら
http://www.obenri.com/_operation/path_through.html


#5. cupy, chainerのインストール
cupyもきちんと一次情報を読んで、インストール。
https://docs-cupy.chainer.org/en/stable/install.html
案外ここも時間取られた泣


chainerもpipして。

```
pip install chainer
```

最後は、確認しましょう。

```
>>>import chainer
>>>import cupy
>>>chainer.cuda.check_cuda_available()
```

なにも表示されなければokです！
お疲れ様です。
標準入出力を使ったjsonとtsvの変換

[昨日の記事](https://qiita.com/nirs_kd56/items/c20fc6f94d5a902f1858)の続き。

```
$ ruby json_to_tsv_std.rb < meibo.json >meibo.txt
```
のようにして、プログラム内でFile.openせずに標準入出力だけで変換するプログラムを書きました。

```ruby:json_to_csv_std.rb
require 'json'
hash = JSON.load(STDIN.read)
hash.each do |person|
  data = [person["name"],person["gender"],person["age"]]
  STDOUT.puts(data.join("\t"))
end
```

STDIN,STDOUTめちゃくちゃ便利ですね。どんなメソッドが使えるのかしっかり把握したいです。ARGF,ARGVも使いこなせるようになりたい。

参考にしたのはこちら。

- [標準入力・標準出力ってなに?](https://qiita.com/angel_p_57/items/03582181e9f7a69f8168)
 
- [たまに便利な、Rubyの組み込み定数](https://qiita.com/mnuma/items/e9a7e4c2e82053157f61)

これも便利そうなのでメモ
[OptionParser の基本](http://maku77.github.io/ruby/io/optparse.html)
Ionicについて

　今回は、現在私が開発現場でメインフレームワークとして日々使っているIonic(アイオニック)について語ろうと思います。このIonicですが、何者かというと一言で言うと「ハイブリッドアプリ」になります。
　Webアプリ + ネイティブアプリ = ハイブリットアプリと行ったところです。それぞれの特徴を併せ持っており、特にWebviewというコンポーネントをもっていることからマルチプラットフォームに対応したアプリを開発できます。このWebviewは非常に便利で、QRコードリーダーやカメラ、マイクなど高性能かつ多くの機能を備えています。また、利用するWebサイトの内容を更新することですぐにブラウザ場で変化を確認できるため、ちょっとした変更点をすぐに確認・修正することができます。そのため、これまでより少ないコストでSPAを作ることができます。
　特にIonicですとAngular(2以降)をベースにApache Cordovaの豊富なプラグインを使用可能で、Ionic独自のライブラリも相まって慣れれば少ない記述量でハイレベルなUIを実装することができます。私個人として一番良いと思ったのは、環境構築が非常に容易で、「npm install」を初めとした僅か数回のコマンドで環境構築が完了し、具体的な開発に移ることができる点です。開発環境構築に多々悩まされていた私としては何よりもありがたいことでした。

　・・・と利点ばかり述べてきましたが、Ionicにも欠点はあり、特に大きいのは日本語の参考文献の少なさです。主に海外で多く使われているためか、散見する文献のほとんどが外国語のため、いちいちGoogle翻訳に頼らなければならないことが挙げられます。また、複数のフレームワークから構成されている故に様々な動作は緩慢で、素早くはありません。最大の欠点は習得難易度の高さです。Ionicに慣れるためには構築する際の基礎言語としてHTML、CSS、Typescript、フレームワークとしてAngular、Apache Cordova、Ionic独自のライブラリ、デプロイ時にXcodeの操作知識などを習得する必要があり、ある程度他の言語を使える人でないと扱うのが困難であるということです。

　ここ数年、フロントエンド(クライアントサイド)フレームワークの変遷の激しさは話題を醸していますが、ハイブリットアプリも同様の傾向が見られます。まだまだ成熟しているとはいえない反面、伸びしろがあり、使いこなせる技術者も少ない現状ですので、SPA開発やモバイル端末開発を考えるている方には是非とも使ってみて欲しいです。また、使っていくうちに気付いた点が出てきたら逐一加筆していこうと思います。
![ionic.jpg](https://qiita-image-store.s3.amazonaws.com/0/245982/f9bf2b98-0c35-d5fc-628d-e2b426ec78f1.jpeg)
RaspberryPi→AWS IoT まで来たデータをグラフにしたい

[dynamoDBにデータが入りました！](https://qiita.com/fumie23/items/534b242394e6b06acf57)までは良かったんですけど、これをどうやって可視化したらいいのかサッパリ分かりませんで困っていたところ、dynamoDBじゃなくてAWS IoT Coreの「ルール」で「Amazon Elasticsearch Service にメッセージを送信する」アクションがあれば一発らしい＆**表示するだけならdynamoDBは不要**らしいということが先人の皆さんからの投稿でわかりました。AWS lambda ってやつを噛ませないといけないとか色んな投稿が出てきたので、どうやらこんなラクになったのはAWS側がこの機能をつけてくれてからみたいです。

↓こちらの記事を参考にさせていただきました。
[「AWS IoTのデータをKibanaに表示する」をやってみた。2017/3版](https://qiita.com/moritalous/items/8907685d57ec8d3b5dbb)
[AWS IoTのデータをKibanaに表示する](https://qiita.com/hideyuki/items/eb4a87243eaeafa74c04)

基本的には@moritalous さんの2017/3版の通りやっていきます。

# 全体の流れ
1. Elasticsearch Serviceを立ち上げる
2. 登録済みの「ルール」に「アクション」を追加する
3. ESからkibanaを開き、設定する

## 1. Elasticsearch Serviceを立ち上げる
いままでの私とAWSの関係性からすると「先に立ち上げたりとかすると失敗して、ルールの設定の中からやらないといけないのでは…？」と思ったのですが、何と今回はESを先に作っても大丈夫でした！本当に10分くらいかかるから出鼻をくじかれる。このステップを終えてからおトイレ行ったり飲み物を用意してもいいと思うくらいでした。
アクセスポリシーは「1つ以上のAWSアカウントまたはIAMユーザにアクセスを許可」にしました。この辺を複雑にすると色々うまくできませんでした。クラスター設定の「kibana認証」もなし。
※本当に大事なデータの場合はこんなゆるゆるアホ設定ではダメだと思います。
ESが立ち上がっているのを確認したら画面を閉じておきます。

## 2. 登録済みの「ルール」に「アクション」を追加する
既に作成済の「dynamoDBに書き込む」アクションをつけたルールがあるので、そのルールを「編集」で開いて「アクションの追加」を押し、「Amazon Elasticsearch Service にメッセージを送信する」を選択します！
ドメイン名のところで、1で立ち上げたESをプルダウンから選択。
その他に入力する値は、元記事の値をそのまま入れたら最終的にうまくいったので
${newuuid()} / timestamp / timestamp
でいきました。IAMロールはこの画面から新しく作成しました。
せっかくなのでdynamoDBに書き込むのはそのままにしておきます。

## 3. ESからkibanaを開き、設定する
ESのダッシュボードからドメインを選ぶと「概要」のところにkibanaのURLがあるのでそれをクリックします。
初期設定は元記事の通りでOKでした。
ちょっとハマったのは、私はセンサーデータを時系列で線グラフにしたかったんですけど、初期値が「count」になってるので絶妙にへんてこりんなグラフが誕生…。

### X軸がタイムスタンプでY軸がセンサーデータ のグラフ
Metrics Y-Axis
Aggregation： Top Hit
Field： センサーデータ
Aggregate with： Max
Size： 1
Sort On： (元データのタイムスタンプ)

Buckets X-Axis
Aggregation： Terms
Field： (元データのタイムスタンプ)
Order By： Term
Size (ここで入れた値がX軸のデータポイント数)

Y軸の最大値・最小値の設定の仕方
上のタブのMetrics&Axesをクリックして、Y-AxesのAdvanced Options
Scale to Data Boundsを選ぶとデータの幅に合わせて自動で変わる
Set Axis Extentsを選ぶと固定値が入れられる

こんな感じの設定をして、いいかんじの線グラフを表示することができました！
このURLはPCのブラウザやiPadのSafariだと開けるのですが、iPhoneのSafariでは開けませんでした。[チュートリアルで作った](https://qiita.com/fumie23/items/c566266d5da50a93b7d4)ページはiPhoneでも開けたのになんでだろう？と思ったのですが、チュートリアルではS3にバケットを作ってモバイルに対応したサイトをホスティングして、そこに可視化したデータを表示させる……みたいなことをしていたのではないかと思います。(ESのkibanaのURLを直接開いてるのではない)

なので次はチュートリアルのようなサイト(表示画面)を作れたらいいなーと思います。Raspberry Piはpythonの勉強もできるし、AWSとくっつけてAWSの勉強もできるし、楽しいですね！
【git】submoduleでプルリク送るまでの流れ


## 1. branchをきる(in submodule)
まずサブモジュールで作業する

```sh
cd submodule/

git checkout -b feature/submodule
```

## 2. git add/commit(in submodule)
```sh
git add .
git commit -m "add config"
```

## 3. リモートブランチにpush(in submodule)
```sh
git push origin feature/submodule
```

## 4. メインリポジトリでsubmoduleのcommit取り込み

```sh
git add submodule
git commit -m "update submodule"
```

## 5. プルリクだす
1. submoduleのgithubでプルリク作成
2. メインリポジトリのgithubでプルリク作成


## memo: 1~3をメインリポジトリから操作する場合
※動作未確認

```sh
// サブモジュール外で

git submodule foreach git add -A
git submodule foreach git commit -m "add config"
git submodule foreach git checkout -b feature/submodule
git submodule foreach git push origin feature/submodule
```
画像の種類について

　今日は、現場であった体験をもとに画像の種類とその特性について触れていこうと思います。
　現在三択の質問内容に対して答える性格診断アプリを開発現場で作っているのですが、その際下部に三択のTabがあり、ディレクターから参照リストにないオリジナルのアイコンを入れるよう指示がありました。その挿入予定の画像ファイルをみると画像ではなく、パスをはじめとするコードがギッシリ書いてありました。普段ですと挿入予定の画像が見れるはずなのに「？」マークを頭に浮かべ、画像ファイルをよくみると拡張子が「SVG」という見慣れないものであることに気が付きました。普段は「JPEG」や「PNG」などの拡張子の付いている画像を使っていたため、見慣れない拡張子が気になり、調べてみました。

その結果がこちら → https://ferret-plus.com/8445

　どうやら特徴としては、伸縮・拡張性に優れた画像形式であり、レスポンシブデザインと好相性なものであるとのことです。また、HTML上で書いたclassをCSSで読み込んだり、JavascriptでAjax通信を行うSPA形式のwebページ・アプリケーションとの整合性も確かであるということです。ここ最近、JavaScriptフレームワークを使用したSPA開発が流行しているため、関連するフレームワーク・ライブラリとともにセットで使用していこうと思います。

ちなみにPNG等その他の画像に関してはこちらに詳しく載っています → https://sole-color-blog.com/blog/103/
Microsoft Azure Notebooks を試してみる


Azure Notebookがβ版ですが使いやすいとのことでJupyterを動かしてみました。:writing_hand:
アカウントとしては、Microsoft Accountが必要ですが、
標準で有効化するSurfaceがこれだけ普及しているとお持ちの方も多いと思います。
（私もSurfaceユーザーです。）

サイトのデザインも秀逸です。
![AzureNotebook1.png](https://qiita-image-store.s3.amazonaws.com/0/94200/7ac3419d-f357-c5ae-7b3e-936a00001a0b.png)

Library作成時にGit Cloneもできます。Gitにたくさんあるipynbファイルをそのまま読み込みできます。
![AzureNotebook2.png](https://qiita-image-store.s3.amazonaws.com/0/94200/36536fcd-b4c6-8904-f127-f059a98558b4.png)

Azure Notebooks と表示されます。
![AzureNotebook3.png](https://qiita-image-store.s3.amazonaws.com/0/94200/38a696d9-dc00-04de-452b-ce61d3fd5342.png)

ターミナルも表示できます。
![AzureNotebook4.png](https://qiita-image-store.s3.amazonaws.com/0/94200/2ea79d46-e470-d6bb-38b4-80fd133a7dee.png)
Windows7でEclipseのフォントを整える

`Consolas`フォントが好きだが日本語に対応していないのでフォントリンクを使って対応してみます。対応には[meiryoKeジェネレータ6.02](http://okrchicagob.blog4.fc2.com/blog-entry-169.html)を使う必要があります。

# meiryoKeジェネレータを使ってMeiryoKeを作成
1. [ここから](http://web1.nazca.co.jp/nzkchicagob/m6x9801/rmk1bs5/meiryoKe_gen_6.02rev1.zip)ダウンロードしたmeiryoKeジェネレータ6.02を解凍する。
2. 解凍したフォルダに`メイリオ`フォントをコピーする。
3. ジェネレータ`meiryoKe_gen_6.02rev1.exe`を実行して作成されたフォントをインストールする。

# レジストリを編集してMeiryoKe_Consoleをリンク
レジストリエディタを起動してMicrosoft Sans SerifにMeiryoKe_Consoleをリンクする。
※Eclipseでは`Consolas`に対するフォントリンクは`Microsoft Sans Serif`が使用されている?

```
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontLink\SystemLink

値の名前：Microsoft Sans Serif
値のデータ：meiryoKe_602r1.ttc,MeiryoKe_Console
```

編集後はパソコンを再起動する。

# Eclipseのフォントを設定

```
ウィンドウ > 設定 > 一般 > 外観 > 色とフォント > 基本 > テキスト・フォント

フォント名：Consolas
サイズ：9
```
命名規則の重要性

　今回は業務中に指摘されたことについて少し掘り下げて書いていこうと思います。
　現在開発中の自己&相性診断アプリの機能の大部分が完成し、先週末からCTOと先輩にコードレビューをしてもらっているのですが、やはり開発現場で数年＋四半世紀コードを書き続けている方々からのレビューは確かなもので、非常に参考になりました。特に今回取り上げるのは、クラスの命名規則についてです。
　私の場合、アプリ中の各フォルダ及び各ファイルに因んだ命名を基本的に行い、その中でさらに内容に応じて命名するようにしてきました。

(例)　styleDiagnosisファイル内にあるクラスの場合

① 文章が書いてあるところではstyleDiagnosis_content、詳しい内容が書いてある箇所ではstyleDiagnosis_detail、イメージ画像が貼り付けてあるところではstyleDiagnosis_imageなどです。

② 同じようなものが複数あるところではstyleDiagnosis_image1のような形でクラスを分けて書いてきました。

　ただ、CTOと先輩の話だとクラスの命名は抽象的な内容ではなく、誰が見てもわかるように、端的、詳細かつ具体的に書くべきであるとのことです。

(例)上記と同様にstyleDiagnosisファイル内にあるクラスの場合

　①の診断内容について詳しく書かれている箇所ではdiagnosisContent_details、イメージ画像が複数ある際にはstyleDiagnosisUser_image、styleDiagnosisOther_imageなどクラスを見た際により限定的に記述内容を把握できるような命名をすべきであるとのことです。

　理由としては、以前書いたフォルダ名やファイル名をスネークケースやキャメルケースで統一して書くように言われた時と同様、コードに統一性を持たせるとともに別の人が見ても書いてある内容がすぐに分かるようにすることが目的であるとのことです。さらに統一性を持たせることで可読性を向上させるとともに保守性(バグを見つけやすくする)や拡張性(機能追加)を上げる意味合いもあるということです。
　プロとして成果物&売り物としてアプリを仕上げなければならないため、やはりただ単にアプリを作るだけでなく、先々のことまで考えて製作していくことが何よりも重要であると感じました。
　小さな心掛けや習慣が大きな成果に繋がるため、コーディングをする際に常に頭の片隅において置こうと思います。
VSCode Java Debugger for Java Build failed 原因と対策

# Visual Studio Code でJavaのデバッグがしたい話
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/230077/e99f767e-9482-78f2-c90f-8f0dd2b165f2.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/230077/0d3981d3-2a6d-6842-a73e-46dddfe5286f.png)

Debugger for Java Build failedになってしまう

## sampleコード
設定等はこちらを参考にさせていただきました
[Visual Studio Code を使った Javaプログラム事始め](https://qiita.com/kare/items/11309fef5822788501b5)

``` test.java
public class test {
    public static void main(String[] args) {
        for (int i = 0; i < 10; i++)
            sayHello();
    }

    private static void sayHello() {
        System.out.println("こんにちは世界！");
    }
}
```

最初は上手くいくが
２回目以降VSCodeを開き直してもう一度実行するとエラーを履いてdebugができない事象に遭遇

# VSCode Java Debugger for Java Build failed エラー

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/230077/e99f767e-9482-78f2-c90f-8f0dd2b165f2.png)

これ。

デバッグコンソールには

```
エラー: メイン・クラスtestが見つからなかったかロードできませんでした
```
ってでてくる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230077/0d3981d3-2a6d-6842-a73e-46dddfe5286f.png)

「java メイン・クラス が見つからなかったかロードできませんでした」
「VS code Debugger for Java Build failed」
とかでググると
パスが間違っているのが原因と多くの記事に書いてある。
しかしこんなシンプルなソースでしかも１回目はうまくいくのに意味不明である。

# 原因
VSCodeのワークスペースが問題。
VSCodeで[ファイル]->[フォルダーを開く]から
test.javaがあるフォルダを指定するとなぜかワークスペースは一つ階層が上がった場所になる。:sweat_smile::sweat_smile::sweat_smile:

debugの際にVScodeはlaunch.jsonを参照するが自動で作成されるものはこれ

```
{
	// IntelliSense を使用して利用可能な属性を学べます。
	// 既存の属性の説明をホバーして表示します。
	// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"type": "java",
			"name": "Debug (Launch)",
			"request": "launch",
			"cwd": "${workspaceFolder}",
			"console": "internalConsole",
			"stopOnEntry": false,
			"mainClass": "",
			"args": ""
		},
		{
			"type": "java",
			"name": "Debug (Launch)-test",
			"request": "launch",
			"cwd": "${workspaceFolder}",
			"console": "internalConsole",
			"stopOnEntry": false,
			"mainClass": "test",
			"args": ""
		},
		{
			"type": "java",
			"name": "Debug (Attach)",
			"request": "attach",
			"hostName": "localhost",
			"port": "<debug port of remote debuggee>"
		}
	]
}
```

"cwd": "${workspaceFolder}"
こいつがあるのでワークスペースを参照してtest.javaを探しに行くが
[ファイル]->[フォルダーを開く]という動作を行うとワークスペースが一つ上の階層にあるためそんなものはない。:head_bandage:
よって
エラー: メイン・クラスtestが見つからなかったかロードできませんでした
となる。

# 対策
対策としてはワークスペースの場所をtest.javaがある場所にすれば良い
[ファイル]->[名前をつけてワークスペースを保存]
ここから適当な名前をつけて保存
.code-workspace
ができるので次回からは
[ファイル]->[ワークスペースを開く]
からこのファイルを開けばOK

なんで[ファイル]->[フォルダーを開く]をすると
ワークスペースが一つ階層が上がるのかはわからなかった。
どこか設定があるのかもしれない:thinking:
接続元IPアドレスを使って、国ごとに場合分けをする

## 概要
IPアドレスを取得して、国ごとに対応したかったので、やったことをメモ

Railsでrequest.remote_ipをすることでIPを取れるわけだが、Local環境で使うと `::1` となるので、そこは注意しなければならない。
`::1 ` は、　IPv4上では `127.0.0.1` , IPv6上では `0000:0000:0000:0000:0000:0000:0000:0001` のアドレスを省略される決まりがあるため、 `::1` が出力される。本番ではこのようなことはないが。学校で習っていたため知見はあったが、初めて見ると「あれ？」てなると思うので、一応参考までに。

## 実装

①application作成

```console:
  rails new sample -d mysql
```

②国ごとにIPを識別するgemを追加
https://dev.maxmind.com/geoip/geoip2/geolite2/
が提供している
https://github.com/yhirose/maxminddb
というgemを使う
他にも2つほどあるが、代表的ぽいやつを選抜。
Document通りにやって行けば問題なくこなせるが、ここに沿って実装していく

```ruby:Gemfile
gem 'maxminddb'
```

```console:
bundle install
```

または

```console:
gem install maxminddb
```

③下記のページの `Downloads` という場所から
https://dev.maxmind.com/geoip/geoip2/geolite2/

・国ごとのバイナリデータ または　csvデータ(GeoLite2 City)
・都市ごとのバイナリデータ または　csvデータGeoLite2 Country)
のうち欲しいデータをダウンロードするする

ダウンロードしたデータを解凍して、db配下もしくはconfig配下に移動させる

④この説明はプロジェクトごとによって違うと思うが、僕の場合
db配下にダウンロードしたファイル(GeoLite2-Country.mmdb)を置いた場合は

```ruby:config/application.rb 
config.x.maxminddb = MaxMindDB.new("#{Rails.root}/db/GeoLite2-Country.mmdb")
```

と記述。


⑤最後に国の名前を取得する

関数を作る場所はどこでもいいが今回はわかりやすく `application_contoller.rb` に記述する

```ruby:application_controller.rb
ip = request.remote_ip #localだと::1 今回は日本のIPアドレスが入っていたとする
ret = Rails.configuration.x.maxminddb.lookup(ip)

ret.found? # => true
ret.country.name # => 'Japan'
ret.country.iso_code # => 'JP'
ret.city.name(:...) # => 'cityを使った時に使えるOsaka,Tokyoとか'
ret.subdivisions.most_specific.name # => '都市名'
ret.location.latitude # => 000.000 緯度
ret.to_hash # =>　ハッシュ値

ex.
if ret.country.iso_code == 'JP'
 ...
elsif ret.country.iso_code == 'US'
  ...
end
```


## まとめ
まぁGeo系やIP系の話はしってた方がいいかも。
webやってると触る機会多いし。
設計の重要性 〜Modelについて〜

　アプリを製作していくうえで感じたことはやはり設計段階でどのようなアプリを作っていくのかを具体的にイメージし、設計書・コードに落とし込んでいくことが重要であるということでした。
　以前Ruby on railsをメインにアプリを作成した際には、migrationfileに必要なデータを記述し、rake db:migrateコマンドでデータベース内にカラム・レコードを作り、Schemaの履歴を確認する作業を行いました。　
　Ionic(Angular)の場合、データベースに直接テーブル定義をするのではなく、Modelに必要な処理を施し、それを各module単位でimportする形式をとります。
　今回の場合ですと「Entry」moduleをimportし、「Entry」クラスの情報をもとに必要なクラスを定義します。そのため、データベースから来た情報に型を与え、クラス生成を行う空間としてModelはとても重要になります。
　Ruby on rails の場合、MVCの三つにそれぞれ役割が分散されていましたが、Ionic(Angular)の場合ですとView・Modelの二つにその役割が凝縮されているため、静的空間であるViewを動かすために動的機能を与えるModeの設計が重要であることを今回の製作を機に理解しました。今回作成するアプリのModelは情報の型・クラス定義だけであるため、仕組みが分かればそこまで難しいものではありませんでした。
　 CTO曰く、Model設計の際に留意すべき点はクラス名であるとのことです。
　これは、Modelで定義されたクラスを様々な空間で使うため、変更する必要が無いように普遍的かつ、独自性があるように命名することが重要であるためです。
<img width="1280" alt="スクリーンショット 2018-03-29 17.00.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/245982/79535515-ac21-fb63-f572-26bfd7ab236a.png">
<unknown>:0: error: Swift does not support the SDK 'MacOSX10.12.sdk'みたいなエラーが出てきたとき

下記のようなエラーが出たときについて
`<unknown>:0: error: Swift does not support the SDK 'MacOSX10.12.sdk'`

# 解決策
OSのバージョンとxcodeのバージョンを最新に揃える
（小ネタ）連番を作成する方法

昔は効率よく作成できなかった連番の作成方法です。
手入力で
1
2
3
4
5
...
とやって打ち間違えたり。。
今思いつくものを挙げてみます。
例はほとんどが1から1ずつ増加するパターンですが、ほぼ逆順や間隔を指定できます。

# 色々な作成方法

色々と言っておきながら、あまり思いつきませんでした。。

## Excelやスプレッドシートを使う

一番知っている人が多そうです。
セルに上から
1
2
3
と入力していき、「3」のセルの右下を下方向にドラッグするとセルごとに連番が入力されていきます。

## ATOMのSequential Numberプラグインを使う

無理矢理感があり、まずやりませんがとっさに思いついたので。（笑）
Sequential Numberプラグインはインストール済とします。

1. 新規ファイルを開き振りたい数字の数だけ改行する。
2. 改行をドラッグしてコマンドパレットから「Split into lines」を実行（もしくはCtrl(Cmd) + Shift + LでもOK）
3. コマンドパレットから「Sequential Number」を実行
4. 各行に連番が出力されます。

## seqコマンドを使う

手っ取り早くて、一番よく使います。
例のように逆順や間隔指定もさほど難しくありません。

```
seq 2 -1

2
1
0
-1
```

```
seq 0 3 9

0
3
6
9
```

Vimエディタ上でseqコマンドを使うこともあります。（むしろその方が多い。）
コマンドモードで外部プログラムを呼び出す方法です。

```
:r!seq 0 3 9
```

## echoコマンドを使う

echoコマンドでも作成できます。
seqコマンドほどシンプルではありませんが、下記のように連続したアルファベットやクォート付きも作成できます。

```
echo \\n{1..10}

1
2
3
4
5
6
7
8
9
10

echo \\n\'{A..J}\'

'A'
'B'
'C'
'D'
'E'
'F'
'G'
'H'
'I'
'J'
```

## プログラマーらしく（？）プログラムで出力

上のseqコマンドがあるので、やはりあまりやりませんが、
（この方法を使うとすれば、もっと複雑な数列の場合でしょう。）
プログラマーがプログラムで解決しようとする心がけが大切と思っておくことにします。
ここではphpをターミナルで実行させていますが、お好きな言語でどうぞ。

```
php -r 'for ($i = 1; $i <= 10; $i++) {echo $i . "\n";}'

1
2
3
4
5
6
7
8
9
10
```

上述のseqコマンドと同じく、PHPのワンライナーもVimエディタの書き込みに使うことができます。
Vimから外部コマンドを呼び出してその標準出力をエディタのカーソル位置に書き込むテクニックは色々と使えます。

```
:r!php -r 'for ($i = 1; $i <= 10; $i++) {echo $i . "\n";}'
```

# 「連番」でググってみると

連番作成のフリーソフトやWeb上で連番を作成できるツールがけっこう転がっていますね。
上記の方法、意外に知られていないかも？