OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.jsからaxiosで適当なjsonデータを取得して表示する

Vue.jsの入門としてまずは `vue-cli` を使わずにjsだけで色々と試してみたいなと思った今日この頃。

## jsonデータ

[MyJson](http://myjson.com/)を使って適当なJsonを返してくれるURLを作成する。
MyJsonはCORSに対応しているのでaxiosから直接アクセスしても大丈夫。

https://api.myjson.com/bins/1h6kbm

## Webサーバー

Dockerでhttpdの公式イメージから起動。

```
docker run --name httpd -d -p 8080:80 -v ${pwd}:/usr/local/apache2/htdocs/ httpd
```

マウントしたディレクトリに下記のファイルを配置する。

### HTML

```html
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="index.css">
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="itemContainer">
                <div v-for="result in results" class="item">
                    <div>ID: {{ result.id }}</div>
                    <div>名前: {{ result.name }}</div>
                    <div>値: {{ result.value }}</div>
                </div>
            </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>
```

### CSS

```css
html, body {
    margin: 5px;
    padding: 0;
}

.itemContainer{
    display: flex;
}

.item {
    border: solid;
    margin: 5px;
}
```

### js

```javascript
var app = new Vue({ 
    el: '#app',
    data: {
        results: []
    },
    mounted () {
        axios
            .get("https://api.myjson.com/bins/1h6kbm")
            .then(response => {this.results = response})
    }
});
```

### ブラウザで表示

`http://localhost:8080/` にアクセス

|![03.png](https://qiita-image-store.s3.amazonaws.com/0/165884/a9169653-d289-ea5e-d576-19599c8e522a.png)|
|:-:|
例外の黙殺は最悪（プログラマはなぜExceptionを黙殺するのか？）

# はじめに、この文書の目的
- 流れとしては、catch(Exception e) {} の撲滅 と、これに続くポエムを書いてます。
- Exceptionで書いてますが、エラーとは何なのか？どう扱うべきか？を考察
- プログラマへ「Exception を黙殺 しないほうがメリットあるよ」を伝えたい
- 設計者へ「超レアな Exception の扱いを決める設計をすべきだ」と伝えたい

# あるプログラマの行動
- 「あぁ、例外ね。それ発生しないから、よくわからないから、黙殺しておけばいいや。catch(Exception e) {} でOK」
- これ最悪です。

# 立場を変えて考えてみます。
- throw Exception している側は、(非常にレアであったとしても)異常事態が発生しているから throw してるんです。

# 例外を黙殺するとどうなるか？
- Exceptionが発生しても、何事もなかったかのようにあたかも正常に動き続ける。
- 怖いですね「子供が頭痛い！」と言ってるのに親は無視し続けるんですね。
- 後々取り返しのつかないことになりませんか？後悔しませんか？

# なぜ、プログラマ(使う側)はExceptionを黙殺してしまうのか？
- 設計で扱いが決まっているExceptionはちゃんと処理しますよね。(通信エラーのリトライとか)
- 問題は、設計で扱いが決まっていない例外の扱い方です。そこでプログラマが「扱いが決まっていない→黙殺でいいや」という選択をしてしまうんですね。

# では、扱いが決まっていない例外はどうすればいいのか？
- 「扱いが決まっていない例外 → catchしてそのままthrow」しましょう。
- これが正解です。

# 「え？よくわからない例外をthrowしていいの？」と思った人へ
- そもそも、設計で扱いが決まっていない例外とは、超レアな例外のことです。（発生することが、実質あり得ないから、設計が無いんですね）
- だから、発生することはほぼ絶対にありません。だから、黙殺しようがthrowしようが、実際にはそのコードが実行されることはないので、そういう意味ではどちらを選択しても同じなんです。
- でもあえてどちらか選択するなら、＊仮に発生したとき＊のことを考えるなら、黙殺するよりはthrowの方がましですね。（ところが、本当に発生したときは最強の味方になってくれます）

# 「超レアな例外で、ほぼ絶対発生しないなら、やっぱり黙殺してもいいじゃん」と思った人へ
- 今は「ほぼ絶対発生しない」と思っていますが、運用フェーズに入ると、突然発生したりするんです。
- 人間の想定できる範囲(設計力)には限界があります。現実はそれを軽く超えてきます。
- 黙殺してると、現実が超えてきたとき、手も足も出ないんです。開発フェーズなら打てる手はたくさんありますが、運用フェーズだと死にます。

# 「いやいや、お前は例外をthrowするという意味を分かってるのか？システム止まるんだぞ？そんな怖いこと書く勇気はないぞ」と思った人へ
- 気持ちはわかります。ごめんなさい。本当のことを書きます。
- 実は、この問題、設計が悪いんです。なぜか？
- 「超レアな例外をどう扱うか？」設計していないからです。だから設計しましょう。

# 「いやいや、超レアな例外をどう設計するんだ？」と思った人へ
- 例えば「超レアな例外は、最上位のクラスでcatchし、ERRORとしてログ出力してシステムは継続する」とするのはどうでしょうか。
- ほら、もう安心して、超レアな例外をthrowできますね。

# 「いやいや、超レアな例外発生しているのに、ログ吐いてシステム継続なんていう、そんないい加減な設計では困るんだ」と思った人へ
- ごめんなさい。(正体不明な原因で発生した)超レアな例外をちゃんと復旧する方法なんてわかりません。
- そもそも、超レアケースなのでログ出力だけで我慢してください。

# 「いやいや、超レアな例外でも、発生原因が分かるものはあるでしょう？そういうのは、ちゃんと設計してもらわないと困るんだ」と思った人へ
- 超レアなんですよ？普通発生しないですよ？本当に設計しますか？
- 設計だけで終わりませんよ？実装も試験も運用も工数増えますよ？
- 費用対効果は悪いですよ？負担する覚悟はありますか？
- で、本当にやりますか？
next.jsをGoogle App Engineで動かす。ついでにTypeScriptで動かす


next.jsをFirebase FunctionやGoogle Cloud Containerで動かす話はあったが、GAEの話があんまり無さそうだったのでざっくりメモる。

* https://qiita.com/mizchi/items/60722563b8a938e7336f
* https://medium.com/google-cloud/next-js-tutorial-deploy-to-docker-on-google-cloud-container-engine-6b0c19dd8ecb

# GAEについて
Google App Engine、ざっくり言うとHerokuっぽいもの。

GAEにはflexibleとstandardというのがあり、NodeのStandardが追加されたということ。

https://qiita.com/comameito/items/3738262923c49da94fb9

この部分に疎いので、どちらが良いのかわからないが、下記のデモなどでもStandardを利用しているため、Standardを利用する（Flexibleだと何がまずいのかいまいちわかっていない）

https://github.com/blainegarrett/node-next-gae-demo

# GAEの手続き

このあたりをやった（このへんは資料溢れているし簡単だったので、すっとばす）

* カード登録をしてのGCPの有効化
    * 無料枠がそこそこあるので、すぐに課金とかは無さそう
* プロジェクトの作成
    * ~~リージョンが後から変更出来ないので、東京になるようにしておく必要がある~~
    * ~~firebaseと紐付けるなど考えると、firebaseプロジェクトより先にこっちを作っておいたほうがいいのかもしれない~~
    * ↑firestore使えなかったりするので今の所デフォルトのリージョンじゃないと不幸があるっぽい
    * チュートリアルが出てくるがスキップした。
* 予算の設定
    * 一応変な動きしてたらまずいので100円でアラートなるようにした

## nextの設定

server側もtypescriptで動かしたい。
https://github.com/zeit/next.js/tree/canary/examples/custom-server-typescript
を見るといちいちコンパイルしていてちょっとやりたくなかったので、ts-nodeで直で動かせる方法を考えた。

楽さをとってるので、上記のほうが自動再起動とかしてくれる嬉しさはあると思う。

### next.config.js

```
yarn add next @zeit/next-typescript ts-node
```

```js
const withTypescript = require("@zeit/next-typescript")

module.exports = withTypescript()
```

package.jsonのスクリプトコマンドはこんな具合。

```js
  "scripts": {
    "dev": "ts-node -T server/server.ts ",
    "prestart": "next build",
    "start": "NODE_ENV=production ts-node -T server/server.ts ",
    "deploy": "gcloud app deploy"
  },
```

ポイントとしては、ts-nodeの引数に`-T`のtranspileOnlyを指定してやること。
そして、prestartを仕掛けて、start前にビルドされるようにする

### 欄外: nodemonも入れる
exampleよく見たらdevの場合だけnodemonするの良さそう。
（動作確認出来てないのでなにか足りてないかも）

```
yarn add nodemon
```

```package.js
{
    "dev": "nodemon --exec ts-node -T server/server.ts",
}
```

```nodemon.json
{
  "watch": ["server/**/*.ts"],
  "execMap": {
    "ts": "ts-node --emit"
  }
}
```

## gcloudのコマンドインストール

```
brew cask install google-cloud-sdk
```

```
gcloud
gcloud auth login
```

そして先程設定したproject-idで

```
gcloud config set project <Project-ID>
```

を設定する

## app.yamlの設定

```yaml
runtime: nodejs8
```

## deploy

Cloud Container Builderの有効化を促されるので従う。

```
gcloud app deploy
```

1分ちょいかかる感じ

# エラーログを見る

なんか動かなかったらエラーログを見るとよい
App Engine -> バージョン -> 「診断」のカラムにある「ツール」-> 「ログ」で吐き出されてるログがそのまま見れるはず。
第24話 リュカのキャノンボール問題

この記事は[仮面ライダービルドの数式](https://qiita.com/izmktr/items/e26a624e79bce3edccc9)の第24話です。

```math
\sum_{n=1}^{N} n^2=m^2,N=24
```

リュカのキャノンボール問題といわれる問題です。
キャノンボールとは大砲の弾を意味します。

式の左側は平方数を順に足したもので、四角錐数とも呼ばれます。
月見団子のように丸い玉をピラミッド状に積み上げると、
団子は何個必要か、を表すものです。

そうやって、24段のピラミッドを作った時、
それらを崩して正方形に並べることができる、というのが今回の式です。
わかりやすく書くとこうです。

```math
1^2+2^2+3^2+⋯+24^2=4900=70^2
```

これを満たすのは、N=1,24だけです。

左の式は以下の式で値を求めることができます。

```math
\sum_{n=1}^N n^2=\frac{N(N+1)(2N+1)}{6}  
```

N,N+1,2N+1は互いに素なので、この値が平方数になるには、
以下のような形になる必要があります。

```math
(N,N+1,2N+1)=(6a^2,b^2,c^2 )
```


N,N+1が連続するのが上記の式は以下のように変形できます。

```math
b^2-1=(b+1)(b-1)=6a^2
```

あとは、場合分けをしながらaとbの値を決めるだけです。具体的には、このようになります。

```math
(N,N+1,2N+1)=(24,25,49)
```
jenkinsコンテナ上でdockerを利用する

jenkinsおじさんを触り始めてみました。dockerでjenkins利用した時にjenkins上で`docker build`したいなーと思っています。できるかとかはまだ試せていません。

一旦以下を参考にホストのdocker daemonを利用するjenkinsのDockerfileを作成しました。
[Docker in Docker のベタープラクティス - Qiita](https://qiita.com/sugiyasu-qr/items/85a1bedb6458d4573407#%E5%8F%82%E8%80%83)

# 参考URL
- [docker/README.md at master · jenkinsci/docker](https://github.com/jenkinsci/docker/blob/master/README.md)
- [Dockerを一般ユーザで実行する - Qiita](https://qiita.com/naomichi-y/items/93819573a5a51ae8cc07)

# ホストマシンのdocker daemonのソケット権限確認
今回ホストマシンのdocker daemonを利用するために/var/run/docker.sockを利用します。
アクセス権限が必要になるのでGIDを取得します。

```sh
$ls -lshn /var/run/docker.sock
0 lrwxr-xr-x  1 501  20    65B  7 29 11:23 /var/run/docker.sock -> /Users/uhoi/Library/Containers/com.docker.docker/Data/docker.sock
```
今回私の場合は501ですね。

# dockerfile
`DOCKER_GROUP_GID`に先ほど取得したホストのGIDを設定します。

```dockerfile
FROM jenkins/jenkins:lts

# docker daemonの動いているホストのGIDを指定する
# docker run -v /var/run/docker.sock:/var/run/docker.sock で
# ホストのdocker daemonを共有する前提
ENV DOCKER_GROUP_GID 501

USER root

# docker のバイナリをinstall
RUN wget https://download.docker.com/linux/static/stable/x86_64/docker-18.03.1-ce.tgz
RUN tar -xvf docker-18.03.1-ce.tgz
RUN mv docker/* /usr/bin/

# jenkins userでもdockerが使えるようにする
RUN groupadd -o -g ${DOCKER_GROUP_GID} docker
RUN usermod -g docker jenkins

# jenkinsのuidは1000
# jenkinsユーザを利用するのがベストプラクティス
USER jenkins
```

# build
```sh
$ docker build -t jenkins-master:latest .
```

# run
```
$ docker run  -d  --name jenkins -p 8080:8080 -p 50000:50000 -v jenkins_home:/var/jenkins_home -v /var/run/docker.sock:/var/run/docker.sock jenkins-master
```

`-v /var/run/docker.sock:/var/run/docker.sock` でホストのdocker daemonを共有しています。

# dockerが利用できるか確認
```sh
$ docker exec -it jenkins /bin/bash
jenkins@6dde32d18460:/$ docker info
Containers: 61
 Running: 30
 Paused: 0
 Stopped: 31
Images: 62
Server Version: 1.13.1
Storage Driver: aufs
 Root Dir: /var/lib/docker/aufs
 Backing Filesystem: extfs
 Dirs: 388
 Dirperm1 Supported: true
Logging Driver: json-file
...
```

jenkins container上でdockerが利用できました。
EKSを操作するためのツールをコンテナ化した

# 概要

[EKSの使用開始](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/getting-started.html) に従ってセットアップすると、以下の3つをローカルにインストールすることになります。

- kubectl
- heptio-authenticator-aws
- AWS CLI

PCを変えるたびにこれらをセットアップをしないで済むよう、コンテナ化しました。

# 構築

## Dockerイメージ作成

以下のDockerfileを作成します。

```dockerfile
FROM alpine:3.8

RUN apk add --no-cache curl python

RUN curl -o /usr/local/bin/kubectl https://amazon-eks.s3-us-west-2.amazonaws.com/1.10.3/2018-06-05/bin/linux/amd64/kubectl \
    && chmod +x /usr/local/bin/kubectl

RUN curl -o /usr/local/bin/heptio-authenticator-aws https://amazon-eks.s3-us-west-2.amazonaws.com/1.10.3/2018-06-05/bin/linux/amd64/heptio-authenticator-aws \
    && chmod +x /usr/local/bin/heptio-authenticator-aws

RUN curl https://bootstrap.pypa.io/get-pip.py | python \
    && pip install awscli

ENTRYPOINT ["kubectl"]
```

Dockerイメージをビルドします。

```bash
docker build -t eks-kubectl .
```

## コンテナ実行のシェルスクリプト化

eks-kubectl.shというシェルスクリプトを作成します。

```bash
#!/bin/bash -eu

IMAGE_NAME=eks-kubectl

HOST_AWS_DIR=`pwd`/.aws
CONTAINER_AWS_DIR=/root/.aws

HOST_KUBE_DIR=`pwd`/.kube
CONTAINER_KUBE_DIR=/root/.kube

docker run \
    --rm \
    -v $HOST_AWS_DIR:$CONTAINER_AWS_DIR \
    -v $HOST_KUBE_DIR:$CONTAINER_KUBE_DIR \
    $IMAGE_NAME \
    $@
```

パーミッションを変更します。

```
chmod +x eks-kubectl.sh
```

# 動作確認

[EKSの使用開始](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/getting-started.html) に従って、EKSを起動します。

任意のディレクトリに .aws/config、.aws/credentials、.kube/config を配置し、そのディレクトリで eks-kubectl.sh を実行します。

例えば、以下のようになります。

```bash
$ ./eks-kubectl.sh get node
NAME                                           STATUS    ROLES     AGE       VERSION
ip-192-168-182-25.us-west-2.compute.internal   Ready     <none>    5m        v1.10.3
ip-192-168-231-64.us-west-2.compute.internal   Ready     <none>    5m        v1.10.3
ip-192-168-76-116.us-west-2.compute.internal   Ready     <none>    5m        v1.10.3
```

# まとめ

EKSの操作に必要なコマンドをコンテナ化することができました。
コマンドをコンテナ化することで、ポータビリティが非常に高くなります。
また、.awsや.kubeをボリュームとすることで、今どの環境を操作しているのかも分かりやすくなります。

ソースコードは以下です。
https://github.com/os1ma/eks-sample/tree/master/eks-kubectl
Gradleでeclipseプロジェクト用ファイルを生成するときのTips

gradleを使って、eclipseプロジェクトを生成する際にbuild.gradeに追加する設定のTips。自分用。
これらの設定はgradleでeclipseプロジェクトファイルを作った後に、IDE上から設定可能だが、毎回やるのは手間なのでbuild.gradleに入れたいと思っていたもの。

# .classpathファイルからパスを抜く
特定のモジュール（具体的にはDynamoDBLocal）をgradleの依存関係に設定してeclipseプロジェクトを作ると、.soや.dllがクラスパスに入ってくるため、eclipseプロジェクトがエラーになる。
この場合、以下のようにして生成されるファイルからパスを除外する。

```gradle
eclipse.classpath.file {
    whenMerged { classpath ->
        classpath.entries.removeAll { entry -> (entry.path.endsWith('dll') || entry.path.endsWith('so') || entry.path.endsWith('dylib')) }
    }
}
````
# JREのデフォルトアクセスルールに追加をする
特定のパッケージ（具体的にはjavafxやjavax.smartcardio)は、デフォルト状態ではeclipseから見えなくなっており、エラーになる。
この場合、以下のようにしてJREのアクセスルールに追加をする。

```gradle
eclipse.classpath.file {
    whenMerged {
        def jre_container = entries.find { it.path.contains 'org.eclipse.jdt.launching.JRE_CONTAINER' }
        jre_container.accessRules << new org.gradle.plugins.ide.eclipse.model.AccessRule("accessible", "javax/smartcardio/**")        
    }
}
```

# Project Natureを追加する
特定のProject Nature（具体的にはgradleやSTSのGradleプラグイン)はデフォルトでは設定されない。
この場合、以下のようにしてproject natureを追加する

```gradle
eclipse.project {
    buildCommand 'org.eclipse.buildship.core.gradleprojectbuilder'
    natures 'org.eclipse.buildship.core.gradleprojectnature'
}
```

またBuildshipの場合、.settings以下のprefファイルがないとエラーになるので、以下のようにしてファイルを作成する。

```gradle
tasks.eclipse.doFirst {
	File prefs = file(".settings/org.eclipse.buildship.core.prefs")
	if(!prefs.exists()){
    	prefs.append('''
			connection.project.dir=
			eclipse.preferences.version=1
    		'''.stripIndent())
	}
}
```

なおこれらの設定は、すでに各種設定ファイルがある場合一見うまくいっているように見えるため、

```bash
gradle cleanEclipse eclipse
```

で一旦eclipseプロジェクトファイルをcleanしたほうが良さそう。

参考にさせていただいたエントリ： 
- https://www.ois-yokohama.co.jp/oisblog/archives/2236
- https://github.com/redhat-developer/vscode-java/issues/275
ありがとうございますm(_ _)m
GoogleOptimizeでA/Bテストをしてみる

# 対象者
・GoogleOptimizeを使ってみたい方。
・初めてABテストを行う方

## 初期設定

### ①
https://optimize.google.com/ にアクセスし、***利用を開始*** をクリック。

<img width="1180" alt="スクリーンショット 2018-07-25 21.59.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/201127/7a5da4bf-d98f-99b0-ab54-cb22a8406221.png">
 
初回はメールの登録や利用規約の同意などがあります。

### ②

登録が終わるとコンテナ画面に以降しますので ***テストを作成*** をクリックします。
<img width="894" alt="スクリーンショット 2018-07-25 22.02.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/201127/ad54923c-ca3e-a592-a799-2ccba41c12d4.png">

### ③
・テストの名前
・対象サイトのURL
・テストのタイプ
の3つを入力します。

<img width="616" alt="スクリーンショット 2018-07-25 22.03.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/201127/d325b348-3240-fdd3-ed63-02d17f5b73a1.png">


### ④
その後 ***パターンの作成*** をクリックし、パターンの名前を入力します。

<img width="612" alt="スクリーンショット 2018-07-25 22.06.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/201127/7de695b1-b29f-82e5-eb70-d4d383fb06d1.png">

作成されたパターンをクリックしましょう！

### ⑤

作成されたパターンをクリックすると、先ほど登録したサイトの編集画面が起動します。
`※ Chrome拡張を入れていない方は案内にしたがってインストールしましょう。`


### ⑥

今回検証したい箇所を編集し、右上の ***保存*** を押してコンテナ画面に戻りましょう。
`※なお、AB/テストは必ず1箇所ずつ行いましょう。`
https://liskul.com/what-is-ab-test-17813

<img width="481" alt="スクリーンショット 2018-07-25 22.20.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/201127/b5eee707-f638-1df0-c1e6-9b28d1692db5.png">

### ⑦

続いて Googleアナリティクスとの連携を行いましょう。

テスト作成画面の右側にある ***プロパティのリンク*** を選択して右上の ***リンク***をクリックします。

クリックすると***オプティマイズのスニペットをサイトに追加しますか？***　という文言が現れます。

### ⑧

続いてテストの目標の設定を行います。
<img width="408" alt="スクリーンショット 2018-07-25 22.33.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/201127/3bb56abd-9977-f527-47eb-7d7f7a605d58.png">

目標選択画面から今回成果を伸ばしたい目標を選択します。

完了したら右上の***保存*** をクリックしましょう。

### ⑨

いよいよテストの実行です。

***テストを開始***をクリックしてテストを開始しましょう。


### 最後に

以上、GoogleOptimizeでA/Bテストを実施してみました。
非常に簡単に、しかも無料で利用できるので手軽です。
EthernetⅡフレームについて

##1.EthernetⅡフレームの中身
フレームフォーマット
![image.png](https://qiita-image-store.s3.amazonaws.com/0/230465/6003dab6-891c-795e-cef9-b5739536635b.png)
##2.プリアンブル
プリアンブルとは、Ethernetフレームを送る合図を意味する8byteの特別なビットパターン。
先頭から「10101010」が7つ送られ、最後に「10101011」が1つ送られる。
受信側の端末はEthernetフレームの最初に付与されている。
プリアンブルは受信側から見て、Wiresharkなどでキャプチャするより前に取り外されてしまうので、キャプチャできない。
##3.宛先/送信元MACアドレス
MACアドレスは、Ethernetネットワークに接続されている端末を表す6byteの識別ID。
送信側の端末は、フレームを送り届けたい端末のMACアドレスを「宛先MACアドレス」に、
自分のMACアドレスを「送信元MACアドレス」にセットして、フレームを送出する。
##4.タイプ
ネットワーク層でどんなプロトコルを使用しているか2byteで表す。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/230465/41c8ea1b-0f10-9212-59dc-cde0d7a7c076.png)
##5.Ethernetペイロード
Ethernetペイロードは、上位層のデータそのもの。
例で言うと、Ethernetペイロード＝IPパケット、ARPならEthernetペイロード＝ARPフレーム。
46byteに足らないようであれば、「パディング」というダミーのデータを付加して、46byteにする。
パディングは送信側から見て、Wiresharkでキャプチャするより後に付加されるので、受信パケットには付加されていても、送信パケットには付加されていない。
##6.FCS
FCSは、Ethernetペイロードが壊れていないかどうかを確認するためにある4バイトのフィールド。
送信側の端末が送信する時に、「宛先MACアドレス」「送信元MACアドレス」「タイプ」「Ethernetペイロード
」に対して一定の計算を行い、その結果をFCSとして付加し、受信側の端末がフレームを受け取ると、同じ計算を行い、その値が同じなら正しいEthernetフレームを判断する。
ionicで検索フォームを作ってみた

# できたもの
まず先にどんなものを作るのかというところですが下図です。
![Jul-25-2018 21-56-46.gif](https://qiita-image-store.s3.amazonaws.com/0/199445/8d26ed7b-af7e-2d69-c428-1d4b3edbdcaf.gif)

検索条件が追加されていくような感じのフォームです。
ionicが自動で生成するプログラム部分は割愛して、今回追加したコードだけ記載しています。

```typescript:home.ts
export class HomePage {

// 省略

  public wordInput: string = '';
  public words: string[] = [];

  addWord(formValue) {
    this.words.push(formValue.wordValue)
    this.wordInput = ''
  }

  delete(idx: number) {
    this.words.splice(idx, 1);
  }

}
```

```html:home.html
<form #form="ngForm" (ngSubmit)="addWord(form.value)">
  <ion-item>
    <ion-label>
      <ion-icon name="search"></ion-icon>
    </ion-label>
    <ion-input [(ngModel)]="wordInput" name="wordValue"></ion-input>
    <button ion-button item-right type="submit" icon-only>
      <ion-icon name="md-arrow-forward"></ion-icon>
    </button>
  </ion-item>
</form>
<div class="tags">
  <ion-chip *ngFor="let word of words; let i = index" id="word_{{i}}">
    <ion-label>{{ word }}</ion-label>
    <button ion-button clear color="dark" (click)="delete(i)">
      <ion-icon name="close-circle"></ion-icon>
    </button>
  </ion-chip>
</div>
```

```scss:home.scss
.tags {
  display: flex;
  padding-top: 5px;
  overflow: scroll;
}
```
[AutoHotKey]配列オブジェクトが空かどうか判定する


## 目標
例えば、ある変数が空であるか判定するには以下のようになるが、

```sample.ashk
If (Var != Blank)
{
    msgbox, , , 変数Varは空ではありません
}
```

変数ではなく配列だったらどうすればよいだろうか。

## AutoHotKeyにおける配列とは
AutoHotKeyの配列はオブジェクトの一種で、`object`という名称のオブジェクトである。オブジェクトがゲシュタりそう。

添え字が整数インデックスの配列、および添え字が文字列キーの連想配列が可能である。
ある配列は、整数インデックスを持つ要素と文字列キーを持つ要素の、両方を格納することができる。

対象（の文字列？）がオブジェクトであるかどうかは、[IsObject\(\)](http://ahkwiki.net/IsObject)関数で判定できる。

配列の内容は、添え字を含めて全く不明とする。

## 要素数を得る/1つ目の要素を取り出す
配列オブジェクトに格納されている要素数は、通常`length`メソッドで得られる。

```sample.ahk
; 配列の要素数が0より大きければループ処理
if (Array.length() > 0)
{
    for, index, value in Array
    {
        msgbox, , , %index%: %value%
    }
}
```

ただし、これは**整数インデックスの要素**のみがカウントされる。文字列キーを持つ要素はカウントされない。
（よって、対象の配列が整数インデックスのみを持つとわかっているなら（例えばスクリプトの引数が格納される配列`A_Args`など）話はこれで終わり。）

例えば、以下の例では`Array.length()`は1になる。

```sample.ahk
Array := Object(1,"a","2","b") ; bは文字列キーを持つ要素
MsgBox, , , % Array.length()
```

つまり、ある配列の要素が文字列キーを持つなら、`length`メソッドでは正しい要素数を得られない。

配列の1つ目の要素が取り出せるなら、空でないと判定できるように思われる。
`MsgBox, , , % Array[1]`のように個々の要素にアクセスすることもできるが、「配列全体の中での要素の順番（整数）」ではなく、「ある要素が持つ整数インデックスまたは文字列キー」を指定する必要がある。よって、**配列の1つ目の要素**を確実に取り出すことはできない。

## 結局`For`ループなんだよなあ
このような場合、`For`ループを行えば、確実に1つ目の要素を取り出すことができる。1回以上ループできれば空ではないということ。

配列が1つも要素を持たない場合、ループは行われない。

```sample.ahk
for, key, value in Array
{
    msgbox, , , 配列は空ではありません
    Break
}
```

もちろん、正確な要素数を得ることもできる。

```sample.ahk
length = ; 変数を初期化
for, key, value in Array
{
    length += 1
}
```

……というか、そんなことはわかりきってるので他の方法を探したのだが、やっぱり無かった。
配列だか連想配列だかその混合だかもわからないオブジェクトの要素へ確実にアクセスするには、とにかく`For`ループ。それから、1つ目だけ取り出すなら即`Break`とか工夫すればいい。

## 配列が空であるか判定する関数
真偽値を返す。（[Return \- AutoHotkey Wiki](http://ahkwiki.net/Return)）
パラメータが配列でなければ、偽を返し、かつ`ErrorLevel`を`Var`とする。

```IsArray.ahk
; 真=1 偽=0
IsArray(Target) {
    If not (IsObject(Target))
    {
        ErrorLevel = Var
        Return, 0
    }
    For, key, value in Target
        Return, 1
        ; ループだが1回めでReturnするため2回め以降は実行されない
    Return, 0
}
```

これで、変数と同じように簡単に判定できる。

```sample.ashk
If (IsArray("Array"))
{
    msgbox, , , 配列Arrayは空ではありません
}
```
数式と Haskell 式の対応関係をまとめてみた

# はじめに

[数式とPython式の対応関係をまとめてみた - Qiita](https://qiita.com/wotsushi/items/fcd4b5edfab3d64e27f7) を Haskell に置き換えてみました。良質な記事をありがとうございます。

## 記号論理

数式における $X$ および $Y$ は命題、 $A$ は集合、 $P$ は述語を、Haskell における $X$ および $Y$ は `Bool` 型の値、 $A$ はリスト型の値、 $P$ は `Bool` 型の値を返す関数を表すとします。

|意味|数式|Haskell|
|---|---|---|
|論理積| $X \land Y$ | X && Y |
|論理和| $X \lor Y$ | X &#124;&#124; Y |
|論理否定| $\lnot X$ | not X |
|論理包含| $X \Rightarrow Y$ | not X &#124;&#124; Y |
|全称限量記号| $\forall a \in A, P(a)$| and [P a &#124; a <- A] |
|存在限量記号| $\exists a \in A, P(a)$| or [P a &#124; a <- A] |

`and`, `or` は `Prelude` モジュールの関数で、結構便利です。

## 集合論

数式における $A$ および $B$ は集合を、$P$ は述語を、Haskell における $A$ および $B$ はリスト型の値、 $P$ は `Bool` 型の値を返す関数とします。

|意味|数式|Haskell|
|---|---|---|
|内包表記| $\\{a \mid a \in A, P(a) \\}$ | [a &#124; a <- A, P a] |
|元である| $a \in A$ | a \`elem\` A |
|元でない| $a \notin A$ | not (a \`elem\` A) |
|部分集合| $A \subseteq B$ | all (\`elem\` B) A |
|真部分集合| $A \subset B$ | all (\`elem\` B) A && not (all (\`elem\` A) B)|
|積集合| $A \cap B$ | A \`intersect\` B |
|和集合| $A \cup B$ | A \`union\` B |
|差集合| $A \setminus B$ | A \\\\ B |
|べき集合| $2^{A}$ | filterM (\\_ -> [True, False]) A |
|直積集合| $A \times B$ | [[x, y] &#124; x <- A, y <- B] |
|最大値| $\max{A}$ | foldr1 max A |
|最小値| $\min{A}$ | foldr1 max A |
|濃度| $ \mid A \mid$ | length A |

`intersect`、`union`、`\\` は `Data.List` で定義されている関数、`filterM` は `Control.Monad` で定義されている関数です。

真部分集合を扱うことはほとんどないと思いますが、Haskell で表現しようとするとしんどいですね。

## 定数

`pi` は `Prelude` モジュールで定義されている値です。

|意味|数式|Haskell|
|---|---|---|
|0| $0$ | 0 |
|1| $1$ | 1 |
|円周率| $\pi$ | pi |
|ネイピア数| $e$ | N/A [^1] |
|虚数単位| $i$ | N/A [^2] |

Haskell では、複素数を `4 :+ 2` のように表せます。

## 代数学

数式における $n$ は自然数、$A$ は集合、$f$ は $\mathbb{N} \rightarrow \mathbb{R}$ なる写像、$g$ は $A \rightarrow \mathbb{R}$ なる写像、$m$ は非負の整数、 $x$ および $y$ は実数、$z$ は複素数、Haskell式における `n` は 1 以上の `Integral` 型の値、$A$ はリスト型の値、`f`、`g` は `Num` 型の値を返す関数、`m` は 0 以上の `Integral` 型の値、 `x` および `y` は `Num` 型の値、`z` は `Data.Complex` 型の値を表すとします。

|意味|数式|Haskell|
|---|---|---|
|総和| $\sum_{i=1}^{n} f(i)$ | sum (map f [1..n]) |
|総和| $\sum_{a \in A} g(a)$ | sum (map g A) |
|総乗| $\prod_{i=1}^{n} f(i)$ | product (map f [1..n]) |
|総乗| $\prod_{a \in A} g(a)$ | product (map f A) |
|階乗| $m!$ | product [1..m] |
|天井関数| $\lceil x \rceil $ | ceiling x |
|床関数| $\lfloor x \rfloor $ | floor x |
|絶対値| $\mid x \mid $| abs x |
|実部| $\Re{z}$ | (z :+ _) |
|虚部| $\Im{z}$ | (_ :+ z) |
|指数| $x^y$ | x ** y |
|冪根| $\sqrt[m]{x}$ | x ** (1 / m) |

`:+` は `Data.Complex` で定義されるデータコンストラクタです。

## おわりに

標準ライブラリだけでも、多くの数式をきれいな Haskell で表現できますね。

[^1]: ネイピア数をリーズナブルに表現する関数は Haskell には（多分）存在しません
[^2]: Haskell では虚数単位は存在しませんが、敢えて表すとするなら `0 :+ 1` でしょうか
Mint - SPA に特化した言語

Mint という、 SPA のための新しいフレームワークがあり、まとめてみた。

2018/07/25 現在では、 Alpha Stage である。

https://guide.mint-lang.com/

いつかちゃんと使ってみたい。

# 特徴

- SPA に特化している
    - 一つのファイル (モジュール) に、 HTML / CSS / JS を書く
    - React + CSS Module っぽいかも
    - Store をデフォルトでサポート
    - ルーティングもデフォルトでサポート
- 関数型っぽい書き方のサポート
    - Pipe 構文
    - Case 式
- 静的な型（ `record` と呼んでいる）サポート
- Crystal で書かれており、JSに依存していないっぽい？
    - `package.json` の代わりに `mint.json`
- 依存が少ない
    - 全て Built In なので、 なんとかloader みたいな概念が無いっぽい
- パッケージマネージャなどの拡張はこれからのよう

# 例

HTML を出力する

```tsx
component Test {
  property size : String = "small"
  property color : String = "red"
​
  fun render : Html {
    <div>
      <{ color }>
      <{ size }>
    </div>
  }
}
```

スタイリング

```tsx
component Main {
  style button {
    background: red;
    color: white;
    border: 0;
  }
​
  fun render : Html {
    <button::button>
      <{ "Click ME!" }>
    </button>
  }
}
```

レコード（ `Struct` 的な）の定義

```typescript
record User {
  email : String,
  name : String,
  id : Number
}
```

型指定

```typescript
  fun renderGreeting (name : String, greeter : Function(String, Html)) : Html {
    greeter(name)
  }
```


関数型っぽい書き方ができる

```elixir
case (condition) {
  match1 => value1
  match2 => value2
  match3 => value3
  => defaultValue
}

"blah"
|> Number.fromString()
|> Result.isError() # true
```

# 感想

こういう All-in-One 的なフレームワークは、ロックインしてしまう心配があるが、どうなのだろう。
CentOSのyumで「Repodata is over 2 weeks old. Install yum-cron? Or run: yum makecache fast」が出た時の対処方法

yumを使用したら「Repodata is over 2 weeks old. Install yum-cron? Or run: yum makecache fast」が出て調べたら「yum clean all」を実行と書いてあるサイトもあるが文中にある「yum makecache fast」を実行した方がよさそう。

・yum makecache fast
現在有効になっているレポジトリを確認して全てのメタデータをダウンロードして使用できるようにします。

・yum clean all
yum clean headers、yum clean metadata、yum clean dbcacheのコマンドを全て実行します。

・yum clean headers
依存関係を解決するために使用するヘッダーファイルを全て削除します。

・yum clean metadata
パッケージのリモートアベイラビリティを判断するために使用する全てのファイルを削除します。

・yum clean dbcache
メタデータへの高速アクセスに使用されるsqliteキャッシュを削除します。
テキストをTextViewに1行まるまる収める

# はじめに
Androidは端末の種類が豊富なので、アプリの見た目には気をつけたいところです。
TextViewもその1つで、どうしてもテキスト全文表示させたいのに「...」で省略されてしまうことがあります。

下の画像はTextViewに`maxLines = 1`を指定した場合に省略される例です。

![スクリーンショット 2018-07-25 20.53.37.png](https://qiita-image-store.s3.amazonaws.com/0/259412/c333a78a-007d-b2c2-477e-c9cfb1094279.png)

# 対策
テキストの長さを変えないのであれば、テキストサイズを変えましょう！
「TextViewの横幅」と「中身のテキストの横幅」を比較して、**横幅が 『TextView > テキスト』** になればいいのです。

![スクリーンショット 2018-07-25 21.04.07.png](https://qiita-image-store.s3.amazonaws.com/0/259412/ff89be63-ed9e-fec4-53ce-b977dbde321b.png)

## テキストサイズを変えるコード
```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, formatTextSize(textView))
}

private fun changeTextSize(textView: TextView): Float {
    // TextViewの横幅
    val textViewWidth = textView.width

    // TextViewのサイズ
    var textSize = textView.textSize
    
    val paint = Paint()

    // Paintを使ってTextViewのサイズをセット
    paint.textSize = textSize

    // Paintを使ってテキストの横幅を測定
    var textWidth = paint.measureText(textView.text.toString())

    // テキストサイズの最小値
    val min = 1f   

    // 横幅が　TextView > テキスト　になるまで実行
    while (textViewWidth < textWidth) {
        // テキストのサイズが最小
        if (min >= textSize) {
            textSize = min
            break
        }
        // TextViewのサイズを小さくする
        textSize--
        paint.textSize = textSize

        // テキストの横幅を更新
        textWidth = paint.measureText(textView.text.toString())
    }
    return textSize
}
```

### ...これだけではできない！のでさらに対策
ログを見ると明らかになるが、`textView.width　（＝ getWidth()）`が`0`で返ってくる。。
なのでずっとwhileを実行し、テキストサイズがminに達してbreak。テキストが最小化されてしまう。

これの対策として、viewTreeObserverを使います。
`onGlobalLayout()`の中であれば、`textView.width`が正常に返ってくるはずです。

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    // textViewの横幅を取得するため
    val viewTreeObserver = textView.viewTreeObserver
    viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
        override fun onGlobalLayout() {
            textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, formatTextSize(textView))
            textView.viewTreeObserver.removeOnGlobalLayoutListener(this)
        }
    })
}
```

## 補足
基本的に`textView.width`や`paint.textSize = textSize`などは全て、dpではなくpxで値を返しています。
そのため単純に`textView.textSize = formatTextSize(textView)`してしまうと、予期していたサイズよりも大きく表示されてしまいます。

`textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, formatTextSize(textView))`は、その解決策です。
第1引数に`TypedValue.COMPLEX_UNIT_PX`を指定すると、dpに変換してくれる優れものです。
`TypedValue.COMPLEX_UNIT_PX`の他に`TypedValue.COMPLEX_UNIT_DIP`や`TypedValue.COMPLEX_UNIT_SP`などもあります。
SquidGuardメモ


仕事でプロキシのフィルタリング機能を強化したいとのことでURLフィルタリングプラグインの「SquidGuard」を使うことにしました。

ただプロキシ系は技術的に枯れているのかあんまり情報がないため、こっちにもメモ

大体の説明は公式サイトからいろいろかいつまんでる

※まだ書き途中なので具体的なインストール方法やチューニングなどは後で書きます^^;

## SquidGuardとは？

![squidGuard.gif](https://qiita-image-store.s3.amazonaws.com/0/89244/a9aefa1e-a8ab-8a00-642f-eb1579411cc6.gif)
出典：[公式サイトより](http://www.squidguard.org/)

こんなイカのやつ（ちょっとHPが古いのでなんとかしてほしい）

プロキシサーバーとして使われているSquidのでURLフィルタリングをするツール

簡単に言うとプロキシ経由で外部のネットワークに接続する際のドメインやURLを見てブロックするというものです。

よくあるブラウザのフィルタリングツールと仕組みは一緒

## 導入するメリットは？

なんと言ってもSquidさえ買っていれば無料でWebフィルタリングができるので結構便利です。

基本はブラックリスト形式で特定のURLのサイトやドメイン名のものをブロックできるので自由度も結構高いのがメリットです。

あと、ライセンスがGPLライセンスなので自分で好きに改変してOK（ただし著作権はちゃんと表記してねというやつ）

## 逆にデメリット

標準のブラックリストがアメリカのリストを対象としたもの（後ちょっと古い）ので独自にカスタマイズする必要がある

あとSquidのプラグイン的なものなのでSquidが入ってないのと何の役にも立ちません。。。

OSSなのでメンテが大変なのでそのへんはあしからず

※２０１８/25現在
とりあえず具体的なインストール方法などに関しては時間がなかったので後で書きますスマソ
GitLabとSSH接続

## はじめに
PCを買い替え、gitでssh接続しようと思ったらなかなか接続できずに困ったので解決方法を短くまとめようと思います。

## sshキーの作成
[公式ドキュメント](https://gitlab.com/help/ssh/README.md)を参考にしました。

```
ssh-keygen -t rsa -C "your.email@example.com" -b 4096
```
と入力すると作成されます。

## GitLabにsshキーを登録
`~/.ssh/id_rsa.pub`の内容をそのまま登録をします。
ログインをして[ここ](https://gitlab.com/profile/keys)貼り付けてください。

## いよいよ本題
sshキーを登録したら接続テストを行います。

```
$ ssh -T git@gitlab.com
```
ここで
`Welcome to GitLab, ユーザー名!`
と出たら良いみたいなのですが、いくら待っても何も起こってくれませんでした。
そこでググって`~/.ssh/config`のファイルをこねくり回しても固まるか以下のようなエラーが発生してなかなかつながりませんでした。

```
ssh_exchange_identification: Connection closed by remote host
```

## 接続成功した設定がこちら！
```~/.ssh/config
Host gitlab.com
  User git
  IdentityFile ~/.ssh/id_rsa
  HostName altssh.gitlab.com
  Port 443
```
上記のようにconfigを書き換えて接続テストをすると成功しました！
bitbucket-pipelinesを使ってAWS beanstalkのデプロイを自動化しようと思ったけどハマった話

# やりたかったこと
bitbucketにプッシュしたときにbitbucket-pipelinesを使って、ステージングへのデプロイを自動化したい。

# はまったこと
```bash
pip install awsebcli --upgrade
```

をbitbucket-pipelines.ymlに書いた時に

```bash
ERROR: UnicodeDecodeError - 'ascii' codec can't decode byte 0xe3 in position 52: ordinal not in range(128)
```

のエラーが出てデプロイが進まない。

# 直したこと
```bash
pip install awsebcli==3.1.0
```

にしたら動いた、どうやら最新版のバグらしい。

追記
違った、これだとebignoreがうまく聞かないので、これだとうまくいくっぽい

```
image: python:2.7.13
```

にすると治る。
どうやらPythonのバージョンの問題っぽい、これでebignoreも反映されて、楽しいアジャイルライフを送ることができるようになった
MonacaでFirebaseのCloud Firestoreを利用してみる

皆さんこんにちは（＾＾

今回はMonacaでFirebaseのCloud Firestoreを使う手順を書いてみます。
お客さんから相談を受けたときにデモアプリを作ったりするのによく[Monaca](https://monaca.mobi/ja/)を利用しています。


※Monacaの利用方法については良記事がたくさんあるので、そちらをご参照ください。

#環境
この記事を書くにあたり利用した環境は以下です。

Monaca 個人用 Freeプラン
コーディングはMonacaのクラウドIDEを利用
プロジェクトは「Onsen UI V2 Angular 1 Tabbar」で作成しました。

#Firebaseの準備
まずは↓のURLからFirebaseコンソールにログインします。
https://console.firebase.google.com

###プロジェクト名を入力してプロジェクトを作成します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/76e79232-b2e5-1bbd-cd3f-cdc698097340.png" width="320">

###Cloud Firestoreを有効にする
「Database」の「データベースの作成」をクリック
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/fd383458-9b87-f46e-3da2-3b99ab029b7d.png" width="320">

とりあえず「テストモードで開始」で作成します。ロックモードは後ほどやります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/91186c13-d7f3-65ee-c4b8-c9ea212f9a06.png" width="320">

試しに"news"というコレクションを追加します。
ドキュメントのIDは自動生成で、フィールド名を"text"としました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/af749600-81bd-844e-6277-c001a271ffbb.png" width="320">


次に「Project Overview」に戻って「ウェブアプリにFirebaseを追加」をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/05cc5340-5f72-1b33-abe1-edb5c43f60f1.png" width="320">

その時に表示される↓このJavascriptのソースコード部分をコピーしておいてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/023725e1-6725-65b9-fa37-6b81255e79d4.png" width="320">

#MonacaでFirebaseを使えるようにする

Firestoreに追加したnewsのデータをMonacaから参照してみます。

###index.htmlの&lt;head&gt;タグ内に&lt;script&gt;タグを追加

```html:index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script> // ←これと
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script> // ←これを追加。app.jsより前に追加してください
<script src="js/app.js"></script>
```

###app.jsの先頭にFirebaseの初期化コードを追加してFirestoreにアクセスしてみる

```javascript:app.js
// apps.jsの最初に、さっきコピーしたコードを追加
var config = {
    apiKey: "*******************************",
    authDomain: "********.firebaseapp.com",
    databaseURL: "https://*******.firebaseio.com",
    projectId: "*******",
    storageBucket: "********.appspot.com",
    messagingSenderId: "**********"
  };
firebase.initializeApp(config);

// お知らせの読み取り
var db = firebase.firestore();
db.collection('news')
  .get()
  .then((querySnapshot)=>{
    querySnapshot.forEach((doc)=>{

      console.log(doc.data().text); // textに先ほど追加したデータが入っています。

    })
  });

```

これでコンソールにデータが表示されます。
上記の例だとコンソールに出しているだけですが、私の場合Onsen-UIのons-lazy-repeatで一覧表示したりします。

今回はFirestoreの読み込みまで行いました。
次回は[Firebase AuthenticationのSNS認証](https://qiita.com/nemutame/items/290f7385e02593f7e3e3)をやります。

以上です。
ありがとうございました。
【GCP】BigQueryを使ってみる～テーブル作成～

#まずは触る！
まずはGCPにログインするわけですが、[ビッグデータ]-[BigQuery]てな場所にメニューがあります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/138274/9c3e68b6-1bb4-15d5-b601-68cb3df48997.png)

#ようこそが表示される！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/138274/65f18086-c904-5bf7-85e9-1ccb1ee89d55.png)

#公式を読んでみる！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/138274/579aec16-7603-16ed-88db-9a1869461980.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/138274/f1e7d629-64fd-90c2-cf45-c0c5f4c3ed6c.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/138274/f71eef4b-a411-afe8-8dc4-94e0454b23a4.png)

#というわけで作ってみる！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/138274/440217b5-d766-6827-4ac2-8b4dbf93e03d.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/138274/de5610e9-c00f-384f-befe-133d6663a12b.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/138274/24765f64-4c6e-049b-c2fe-58c498285556.png)

#テーブル作成画面が表示されました！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/138274/4a1c35a2-6cac-b64a-912d-aa590f0ead5f.png)
AWSの高可用性と耐障害性をまとめてみる

※コメントでご指摘頂いたSLAの箇所を修正しました。

## 高可用性とは
何か障害があっても、<strong>システムの停止時間をなるべく少なくすること</strong>を指す。絶対に止まらないということではなく、障害が発生することを前提とし、停止時間をどれだけ短くすることができるのかという考え方。
高可用性の実現には、複数のAZおよびリージョンにまたがるアーキテクチャにしたり、Auto Scalingを使用するといった方法がある。
### 高可用性を実現するAWSサービス例
- Amazon RDS
- Amazon DynamoDB
- Amazon S3
- Amazon SQS
- Elastic Load Balancing

### 高可用性を実現したシステム構成の例
仮に、SLAを満たすには4つのEC2インスタンスが必要なシステムをAWS上に構築していたとします。

![AWS高可用性.png](https://qiita-image-store.s3.amazonaws.com/0/200260/5567dcf4-f0b3-0a08-2025-0bb006a03023.png)

- 2つのAZに2つずつEC2インスタンスを起動
- AZ-aに障害が起きた場合、残るのはAZ-bの2つのみ
- 残されたAZ-bに、新たに2つのEC2インスタンスが起動されるまではSLAを満たすことができない

この構成例だと常時4つのEC2インスタンスが起動しているため、平常時はSLAを満たすことが出来ている。しかし、AZ-aに障害が起きると一時的に2つのEC2インスタンスしか起動していない状態になり、SLAを満たせない時間が発生する。
可用性レベルを向上させたいのならば、Auto Scalingを設定しておいて、足りなくなった2つのEC2インスタンスが自動的にAZ-bで起動されるような構成を取るとよい。


## 耐障害性とは
高可用性は、システムの停止時間をどれだけ短くできるかに焦点を当てた考えた方。耐障害性は、<strong>何か障害が起きたときでもシステムのパフォーマンスを落とすことなくシステムを稼働し続けられる冗長構成のこと</strong>を指す。すなわちサービスレベルアグリーメント(SLA)を守り続けられる構成のこと。
### 耐障害性を実現するAWSサービス例
- Amazon DynamoDB
- Amazon Route53

### 耐障害性を実現したシステム構成の例
こちらも仮に、SLAを満たすには4つのEC2インスタンスが必要なシステムをAWS上に構築していたとします。

![AWS耐障害性.png](https://qiita-image-store.s3.amazonaws.com/0/200260/9a91f173-407a-0327-d170-e43bc49d9abb.png)

- 2つのAZに4つずつのEC2インスタンスを起動
- AZ-aに障害が起きた場合でも、AZ-bにはまだ4つのEC2インスタンスが残っている
- したがってシステムのパフォーマンスは落ちないためSLAを守り続けることができる

こうすることで、AZ-aまたはAZ-bに障害が発生した場合でもSLAを満たし続ける構成にすることができる。ただし、常時8つのEC2インスタンスを起動し続けているため、コスト的には高可用性の構成よりも運用コストは高くなってしまう。

## まとめ

- 高可用性
    - システムが止まらないための構成を考える
    - 仮にシステムが止まったとしても停止時間をいかに短くするかを考える
- 耐障害性
    - 障害発生時でもシステムのパフォーマンスを落とさないことを考える
    - 一般的に耐障害性を高めるとコストは高くつきやすい


高可用性と耐障害性をバランスよく実現するのであれば、前述の例でいくと、3つのAZに2つずつEC2インスタンスを起動する構成が考えられる。通常の運用コストは6つのEC2インスタンス分ですむし、いずれかのAZに障害が発生したとしてもSLAを守り続けることができる。
設計的にはAZ3つにまたがる形になるため、システムの複雑さは増す。
【疲れ目対策】スイッチ一つで目に優しいセピアな画面に切り替える

Linux(Debian)で画面を暖色に変える方法です。

## 準備

- [Redshift](http://jonls.dk/redshift/)(Amazonじゃない方)をインストール ``sudo pacman -S redshift``
- もしなければ、xgammaもインストール ``sudo pacman -S xorg-xgamma``

## シェルスクリプト

```sh
#!/bin/sh

XGAMMA=$(xgamma 2>&1 | sed -e "s/.*Red \(.*\), Green \(.*\), Blue\ \ //")
if [[ "${XGAMMA}" = 1.000 ]]
then
	xgamma -bgamma 0.8
	redshift -O 3500
else
	xgamma -bgamma 1
	redshift -x
fi
```

以上のファイル名を``sepia``とし、``sudo chmod u+x``で実行権を加え、パスの通った``~/.bin``フォルダなどに入れておきます（``redsfhit -O 3500``と``xgamma -bgamma 0.8``の数字はお好みで変更可）。色調と同時に``xbacklight -set 1%``などと記入して輝度を下げるとなお目に優しいです。

＊自分の場合は、i3を使っているので以下のようにショートカットキーを割り当てました。

```sh
bindsym XF86Display exec --no-startup-id "~/.bin/sepia"
```

## 備考

中身はあくびが出るほど単純で、Linuxの場合であれば``xgamma``から出力されるメッセージでBlueが``1.000``と表示されたら、色が変わり、それ以外なら元に戻すという仕組みです。Blueの数字だけを認識するために``sed``で不要な部分を消しています。

最初はredshiftだけ切り替えできればよかったのですが、redshiftには現在の色温度を表示する機能がなかったので、xgammaを併用してみることにしました。[参考](https://github.com/jonls/redshift/issues/117)

macosでは、xgammaがないのでこの通りにはできませんが、redshift自体は``brew install redshift``でインストール可能です。もっとも[f.lux](https://justgetflux.com/news/pages/macquickstart/)を使えば事足りると思います。
スタイルガイドを作成する時のメモ

## 状況
- フロントエンドエンジニア担当
- 新規Webアプリ作成
- デザイナーからカンプがSketchで渡される
- スマホ、タブレットのレスポンシブ対応
- カンプは１デバイスのみで、ピクセルパーフェクト意向
    - レスポンシブの概念があるのはフロントエンドエンジニアのみ 
- UIデザイナーが不在？

## 問題
- カンプベースでアプリ作成だと、グラフィック優先で独自のUIモジュールだらけになり修正/運用が難しい
- 使い捨てCSSばかりになりコードがカオスになりかけている

## やりたい事
- ブラウザベースでのUI確認、かつUIモジュール作成での効率化が必要

## 認識 理解してもらった箇所
- marginは `５の倍数` でお願いしマンモス


## 解決に向けて
- ブラウザベースでのスタイルガイドの導入
    - 導入に10日ほど期間をもらった

--- 

# 共有したWiki内容↓

## スタイルガイドはなぜ必要？

### [共有したい記事](http://photoshopvip.net/87756)

![](http://photoshopvip.net/wp-content/uploads/2016/03/styleguide2016-top.jpg)

---

## ゴール

### Bootstrapのスタイルガイドのように、誰でもコピペで運用、拡張可能にする
[https://getbootstrap.com/docs/4.0/layout/grid/](https://getbootstrap.com/docs/4.0/layout/grid/)

- ジェネレーターのコード実装はフロント側が行う
- デザイナーは全UIをSketchなどで網羅する
- デザイナーにはオブジェクト全てに命名をつけてもらう 

![image](https://user-images.githubusercontent.com/36254262/41293087-562f114a-6e8f-11e8-8c87-5935468d2e59.png)


## How 実現するために 
- デザイナー先行でUIパーツやレイアウトを、パターン化していく
- ページ間をまたいでも、構造が同じUパーツであれば同じ名前のモジュールとし、スタイルガイドを作成していく
- 例外パターンはスタイルガイドで作成したUIモジュールを拡張して、A# A## 的なモジュールにする
- １回しか出てこないものは基本的スタイルルールのみの適応とし、スタイルガイド化しなくて良

## About 前提条件 確認
- モジュールの観念
- レスポンシブ構造の把握
- AtomicDesignについて認識


### [プロトタイピングにおける Sketch のシンボル機能を利用した Atomic Design の実践と所感](https://www.d-wood.com/blog/2017/11/30_9359.html)

![](https://i0.wp.com/www.d-wood.com/wpmt/wp-content/uploads/2017/11/2017-11-28_sketch_atomic_design_03.png?zoom=2&resize=594%2C288&ssl=1)

## What スタイルガイド作成の課題
 
1. デザイナーがすべて作成
2. デザイナーとフロントエンドで共同作成
3. 2以も加えて複数担当をまたいで作成

### Tech 必要技術 知識
- 再利用可能なUI設計 = Atomic Design などの認識共有
- ブラウザベースでのスタイルガイド作成
  - ↑ であればレスポンシブのスタイルガイドを作成しなくても、１点ずつで良い
  - HTML/CSS記述の必要あり（誰担当になるか）

### SketchのAtomic Designモジュールサンプル

- これを参照に、加えてフォルダーやシンボルに、クラス名（機能や状態を表す）名前を Bootstrapモジュールを参考に付けていただけたら、
第一段階としてローカルでのスタイルガイドの作成は進められるのではと思います

![](https://user-images.githubusercontent.com/36254262/41317181-6c341fc2-6ecf-11e8-8d38-8389bf8823ba.png)

### Tool
- 作成時のスムーズなコミュニケーションツール
- デザインツール選定(ローカル)
  - Sketch 
  - PhotoShop
  - その他オンライン協業のデザインツーなど
- バージョン管理フロー(過去経緯の閲覧も出来ながら、最新版しか存在しない状態)


こういうのを一つは用意しておきたい！Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材
https://coliss.com/articles/build-websites/operation/work/nested-symbols-style-guides.html

## フローイメージ
Scketchベースであれば
- フォルダ名で役割が見える モジュール名に
- フォルダ名で検索して単一であるか、複数出てくるか
  - 複数あればジェネレーター登録
画像の Orientation を補正して表示してくれる loadImage がIE11で動かなかった

画像のEXIF情報を読んで補正してくれるライブラリ https://github.com/blueimp/JavaScript-Load-Image を使っていて、IE11でOrientationの向きが反映されなかったのでメモ。

原因は `loadImage` にURLを渡していたからだった。IE11の場合URLを渡すと画像のメタ情報を取れないみたい。

> If the file is given as URL and the browser supports the fetch API, fetches the file as Blob to be able to parse the meta data.

README.md に書いてあった。 [fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)に[対応していないブラウザ](https://caniuse.com/#feat=fetch)はURLで渡すとメタ情報を作れない。

```javascript:example.js

// URL
loadImage('http://example.org/some-image.png', function(img, data){
  // IE11だとundefined
  console.log(data.exif);
}, { orientation: true });

// blob
loadImage(document.querySelector('input[type=file]').files[0], function(img, data){
  console.log(data.exif); // 何か出る
}, { orientation: true });
```
bundle installしたら、 mysql error　がでちゃう


mysql errorがでちゃうので以下を実行した。
（mysqlのバージョンは5.6）

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

```
mysqlのバージョンを確認
5.8系の場合は `brew uninstall mysql`を実行

`mysql install mysql56`

一度linkを外す　`brew unlink mysql@5.6`

linkをつなぎ直す `brew link --force mysql56`

アプリのディレクトリでmysql2をインストール `sudo gem install mysql2 -v '0.3.18' --source 'https://rubygems.org/'`

`bundle install`
```
---------------
これでも行けん場合は
以下を実行してみるのもいいかも？？
https://qiita.com/hurutoriya/items/7dacfe6edfe5b0fbca2f
railsでテーブルを使わないでいいね機能を作る（jquery>controller）

railsでいいね機能を作るというと、
likeテーブルを作ってボタンを押される度にレコードを作成しているものが多いと思います。

今回は単純にレコードのlikeカラムを＋1する方法で
いいね機能を実装しました。
![wq9e2-mx7ou.gif](https://qiita-image-store.s3.amazonaws.com/0/145707/3ba9fb03-9ea2-79ca-2b9b-0ebd98d9b589.gif)

#処理の流れ
- divクリックをjqueryで感知
- 要素のクラスを付け替え ＞ 見た目を変える＆再クリック防止
- 数字を＋1
- ajaxでrailsコントローラの関数を呼ぶ
- 関数内で+1する
- 正常に終わった場合、コンソールログに”正常終了”と出す

本当はajaxが正常に終わった段階で
クラスの付け替え、数字の加算をしようとしたのですが、微妙にラグが出るのでやめました。

#実装
##DB構成
osusumes と novels が1対多で繋がっています。

おすすめという1ページにたくさんの小説情報がぶら下がり、
その小説情報のいいねが増えていく感じです。

**アクセスして来たみんなが
「その小説いいよね！」といいねして、
いいね数で並び替え、人気の小説ほど上に来る
ということを実装したいと考えています。**


##画面の情報
osusumes#show画面に、
リレーションしているnovelsを表示しています。


##コントローラ&ルーティング

osusumesの画面から飛ぶので、
osusumes_controllerにアクションを追加します。

```ruby:osusumes_controller.rb
  def like
      # params[:id]の情報はajaxで送ります。
      @novel = Novel.find_by(id: params[:id])

      if @novel.like == nil
        @novel.update(like: 1)
      else
        @novel.update(like: @novel.like + 1)
      end
  end
```

追加したアクションを呼ぶルートを追加します。

```ruby:routes.rb
Rails.application.routes.draw do
  get "osusumes/get_novel_info"
  #このosusumes/likeのルートを追加しました
  get "osusumes/like"
  resources :comments
  resources :novels
  resources :osusumes
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root "osusumes#index"
end
```

##javascript(ajax)

```javascript:application.js
$(document).on('turbolinks:load',function(){
  $(".novel-card-like").click(function(){
    //クラスの付け替え（クラスで見た目とクリック防止を実装）
    $(this).removeClass("fa-heart-o").addClass("fa-heart");
    //いいね数プラス1
    var old_like_count = parseInt($(this).find(".novel-like-count").text());
    $(this).find(".novel-like-count").text(old_like_count + 1);

    $.ajax({
        //osusumesの画面からurl likeを呼ぶことで、osusumes_controllerのlikeアクションを呼び出し
        url: "like",
        //novelのidをhtmlにhiddenパラメータで埋め込み
        //jqueryでidを取得してintegerに変換して送る
        data: { id : parseInt($(this).siblings(".novel-id").text()) },
        dataType: "html",
        //successをこの書き方すると、この中で$(this)が使える（今回は使わなかった）
        success: (data) => {
          console.log("正常にいいね完了")
        },
        error: function(data) {
          console.log('いいねをつけるのに失敗しています');
        }
    });
  });
});
```
参考URL : [$(this) inside of AJAX success not working](https://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working)

##scss

```scss:osusumes.scss
  .fa-heart-o{
    color: grey;
  }
  .fa-heart{
    color: red;
    //クリック防止
    pointer-events: none;
  }
```

##html(haml)

```haml:_novel-card.haml
    .fa.fa-heart-o.novel-card-like
      %span{class: "novel-like-count"}
        - if novel.like != nil
          #{novel.like}
        - else
          0
    //novel.idを埋め込み
    .novel-id{style: "display:none"}
      #{novel.id}
```

#課題
リロードすると何回でもいいね出来てしまう。
同じPC、ipアドレスからは1日1回のみいいね出来るとかそんな感じにしたいかも。

ipアドレステーブルみたいなのを作って、
ipアドレスとnovel.idを格納、
本日中のがあったらlike機能で足すのをやめるとかかな。。
【Swift4】おんなじようなデザインの時に簡単にViewを使い回す方法


こんな共通クラスを用意して

```swift
struct Data {
   var title: String
   var subTitle: String
   var image: UIImage
   var textColor: UIColor
}

class BaseView: UIView {
    
    @IBOutlet private weak var thumbnailImageView: UIImageView?
    @IBOutlet private weak var titleLabel: UILabel?
    @IBOutlet private weak var subTitleLabel: UILabel?
    
    func set(_ data: Data) {
        self.titleLabel?.text = data.title
        self.titleLabel?.textColor = data.textColor
        self.subTitleLabel?.text = data.subTitle
        self.subTitleLabel?.text = data.textColor
        self.thumbnailImageView?.image = data.image
    }
}
```

あとは、BaseViewを継承して、BaseViewのIBOutletにxibとかから参照？をくっつけてやればOK
参照をくっつけたIBOutletのみnilじゃなくなるので値が設定される。xibファイルは個々のSampleViewで用意する

```swift

final class SampleView: BaseView {
    
    func set(_ data: Data) {
        super.set(data)
    }
}

final class Sample2View: BaseView {
    
    func set(_ data: Data) {
        super.set(data)
    }
}
```

ありなんかな
PowerShellでEnumを定義して、引数のバリデーションに使用する

とりあえず覚書。
清書は気が向いたらする。(編集リクエストお待ちしてます)

# Enumの定義

```powershell
Enum Name {
    Value1 = 100
    Value2 = 200
}
```

# Paramへの書き方

```powershell
Param(
    [ValidateScript({[Enum]::GetValues([Name]) -contains $_})]
    [string]valueText
)

# Paramが先頭でないとエラーになるのでこの位置に定義
Enum Name {
    Value1 = 100
    Value2 = 200
}

# Enumの型に変換する
$value = [Name]$valueText

# 二段変換でもいいらしい
$valueInt = [int][Name]$valueText
```
AWS command lineのautocompleteの設定

## 背景
AWSの依存度が高くなる一方なので、awscliを使う機会が増え続けます。commandが長くて、autocompleteが欲しくなります。

## 公式ドキュメント
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-command-completion.html

## インストール説明
pip3を使ってインストールした。

```
pip3 install awscli
pip3 install awscli --upgrade --user
```

## 問題
簡単だと思いますが、aws_completerがどこにあるかがわからない。

```sh
FO-602:bin user-name$ which aws_completer
FO-602:bin user-name$ whereis aws_completer
FO-602:bin user-name$ locate aws_completer
```

全くない

```sh
FO-602:bin user-name$ pip3 show awscli
Name: awscli
Version: 1.15.64
Summary: Universal Command Line Environment for AWS.
Home-page: http://aws.amazon.com/cli/
Author: Amazon Web Services
Author-email: UNKNOWN
License: Apache License 2.0
Location: /Users/user-name/Library/Python/3.6/lib/python/site-packages
Requires: docutils, colorama, rsa, botocore, s3transfer, PyYAML
You are using pip version 9.0.3, however version 18.0 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.
FO-602:bin user-name$ find  /Users/feng.zhang/Library/Python/3.6/lib/python/site-packages/ -name  aws_completer
FO-602:bin user-name$ 
```

それでもない

```sh
FO-602:bin user-name$ ls /Users/user-name/Library/Python/3.6/
bin lib
FO-602:bin user-name$ ls /Users/user-name/Library/Python/3.6/bin/
__pycache__           aws_bash_completer    jp.py                 pyrsa-encrypt         pyrsa-priv2pub        rst2html.py           rst2latex.py          rst2odt_prepstyles.py rst2xetex.py
aws                   aws_completer         pyrsa-decrypt         pyrsa-encrypt-bigfile pyrsa-sign            rst2html4.py          rst2man.py            rst2pseudoxml.py      rst2xml.py
aws.cmd               aws_zsh_completer.sh  pyrsa-decrypt-bigfile pyrsa-keygen          pyrsa-verify          rst2html5.py          rst2odt.py            rst2s5.py             rstpep2html.py
```

見つけた。

## 設定
```sh
complete -C '/Users/user-name/Library/Python/3.6/bin/aws_completer' aws
```
ParcelでPWA化する最速の方法

# PWAに必要なもの、こと（最低限）
- PWA化するWebサイト、Webアプリケーション
- service-worker設定ファイル（js）
- manifest設定ファイル（json）
- それらをHTMLファイルから参照するlinkタグの追記

# 最速の方法
## 1. parcel-plugin-sw-precacheの導入
```shell
npm i -D parcel-plugin-sw-precache
# =yarn add -D parcel-plugin-sw-precache
```

`parcel-plugin-sw-precache`は、service-worker設定ファイルとHTMLからのリンクを*いいカンジ*に生成してくれるプラグインです。
一応細かい設定もできますが、基本的にはこれを入れてParcelを動かすだけで大丈夫です。

- [parcel-plugin-sw-precache - npm](https://www.npmjs.com/package/parcel-plugin-sw-precache)

## 2. manifest.webmanifestの作成
GoogleによるManifest Documentでは、`manifest.json`というファイル名での記述を指定していますが、このファイル名ではParcelがファイル名を改変してしまい、上手く動作しません。

そこで、MDNが指定している`manifest.webmanifest`というファイル名で記述し、HTMLファイルから

```html
<link rel="manifest" href="/manifest.webmanifest">
```

のように参照します。こちらは手動です。

`manifest.webmanifest`の中身は`manifest.json`と同じです。[MDNによるドキュメント](https://developer.mozilla.org/en-US/docs/Web/Manifest)に記載されている例をコピペしていじればすぐに作成できます。

```json:Example_manifest(MDN_Webサイトより)
{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}
```

# 以上です。
この記事を書いた理由は主に２つあります

- `parcel-plugin-sw-precache`を初めて知ったため
- `manifest.json`でハマったため

もし、これらより簡単な方法があればぜひ教えてください。
では。
Travels2Nepal

![1_CO8W7t0_7Jf3HTfNfqWv5w.jpeg](https://qiita-image-store.s3.amazonaws.com/0/275286/67c0b58f-f655-fce8-db93-daba7131aada.jpeg)
Nepal is safe country to travel the Nepal. There are local people to supporting the tourist, and talk with the friendly. Our Travel Tourist guider expert shares the tourist advice to safe places. You want to travel the Nepal Contact Travels2Nepal .
Visit us: https://www.travels2nepal.com