OmniAICreator/Qiita-1.07M huggingface dataset:
「約物半角専用のWebフォント」Yaku Han JPを紹介する。

フロントエンドの方には当たり前の知識かもしれませんが、感動したので[Yaku Han JP](https://yakuhanjp.qranoko.jp/)を紹介する。

私の現職はエディトリアルな紙モノのデザインやグラフィックが多く、文字詰めというのはかなり気を使います。メインのタイトルは特に一文字ずつサイズや詰めを調整して仕上げる必要があります。現在フロントエンドを勉強中なのですが、webでの文字詰めには限界があるのだろうと、難を覚えつつあまり気にしないことにしておりました。

しかし、このフォント「Yaku Han JP」を導入するだけで半角記号が詰められるのです！はじめて知ったときは本当に感動的でした！

#どういうことか？
約物？という方のために、公式HPよりキャプチャしたものを引用します。

これが
![キャプチャ2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89564/c8e466a6-9aad-7844-b0e2-a076ea7609b8.jpeg)
こうなります！！
![キャプチャ3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89564/7beac1c1-ab51-2ab5-c11a-703a330404b4.jpeg)

「」や（）【】、。などの約物と呼ばれる記号が半角になっています。

この記事のタイトルの1文字目を見てほしいのですが、
“「約物半角専用の…」…”
タイトルの1文字目“「”の前ににまるで半角スペースを空けているような気持にならないでしょうか...。
エディトリアルでは多くの場合この微妙なスペースを詰めます。理由は見た目など様々ありますが、広告のキャッチコピーなどでわざわざ記号を目立たせる必要性がないことを考えれば自然な処理かと思います。

この辺の文字詰めなどをもっと直感的に知りたい方はグラフィック社の[Typography](http://www.graphicsha.co.jp/search_list.html?search_word=Typography)というシリーズ書籍がおすすめです。webデザインの情報などは全くありませんが、書籍自体の文字詰めが素敵＆紹介事例の質が高い印象です。
ただの文章やタイトルなのに「な、なんかかっこいい！」となること請け合いです。

Yaku Han JPにおいては、[公式のホームページ](https://yakuhanjp.qranoko.jp/)からフォントや文字サイズを変えたり、シミュレーションをすることができます。

#使い方はとってもカンタン。
cdn版は読み込んで、cssのfont-familyの一番最初に設定するだけ。

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanjp.min.css">
```

```style.css
.example {
  font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
```

#改めて、Yaku Han jpについて
約物半角専用のWebフォントです。
デザイナーの[クラクさん](https://twitter.com/Qrac_JP)（twitterリンク）が開発されました。公式HPのほか[Scrapbox](https://scrapbox.io/yakuhanjp/)で開発経緯や導入事例をいくつか紹介されています。CDNのアクセス数は月間で1億、jsDelivrに登録されている全ライブラリ中39位とのこと。(2018年4月のScrapboxへの書き込みより)

##全6種類
＜ゴシック体・明朝体・丸ゴシックの3種類＞×＜約物全部入り・カッコのみの2種類＞で前6種類のラインナップ。

|| ゴシック体 | 明朝体 | 丸ゴシック |
|:------|:-------:|:-------:|:-------:|
|約物全部入り | YakuHanJP | YakuHanMP | YakuHanRP |
|カッコのみ| YakuHanJPs | YakuHanMPs | YakuHanRPs |

###それぞれ下記のフォントをベースに作成しているとのこと。
ゴシック体はNoto Sans
明朝体はNoto Serif
丸ゴシックはRounded M+

###約物全部入りとカッコのみの違い
、。！？・；：などが含まれるか否かだけです。

||中身|
|:-----------------|:------------------|
| 全部入り | 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝ |
| カッコのみ | 〈〉《》「」『』【】〔〕（）［］｛｝ |

句読点まで詰まると若干詰まりすぎな印象があったので、私はゴシック体のカッコのみを使用しています。

参考：
[公式HP](https://yakuhanjp.qranoko.jp/)
[Scrapbox](https://scrapbox.io/yakuhanjp/)
[github](https://github.com/qrac/yakuhanjp)
url(forResource:withExtension:) のありがたい仕様(swift)

# はじめに
タイトル通り。swift の `Bundle` の `url(forResource:withExtension:)` の動作についてです。
# 動作
Xcode のプロジェクトに下記のようにファイルを追加します。

<img width="226" alt="resource" src="https://user-images.githubusercontent.com/34936885/61182993-5beb2680-a676-11e9-87f1-0eac4d1c4f6d.png">
## ファイル名と拡張子指定
```swift
let url = Bundle.main.url(forResource: "test", withExtension: "json")
```
通常の指定方法です。`test.json` の URL が取得できます。
## 指定なし
```swift
let url1 = Bundle.main.url(forResource: "", withExtension: "")
let url2 = Bundle.main.url(forResource: nil, withExtension: nil)
```
引数を無しにします。`url1` も `url2` も当然 `nil` になります。
## ファイル名のみ指定（拡張子なし）
```swift
let url1 = Bundle.main.url(forResource: "test", withExtension: "")
let url2 = Bundle.main.url(forResource: "test", withExtension: nil)
```
引数の拡張子指定を無しにします。`url1` も `url2` も `nil` になります。
## ファイル名のみ指定（拡張子あり）
```swift
let url1 = Bundle.main.url(forResource: "test.json", withExtension: "")
let url2 = Bundle.main.url(forResource: "test.json", withExtension: nil)
```
引数のファイル名に拡張子まで指定し、引数の拡張子を無しにします。`url1` も `url2` も `test.json` の URL が取得できます。
## 拡張子のみ指定
```swift
let url1 = Bundle.main.url(forResource: "", withExtension: "json")
let url2 = Bundle.main.url(forResource: nil, withExtension: "json")
```
引数のファイル名指定を無しにします。`url1` も `url2` も `test.json` の URL が取得できます。*んっ！？* なんか取れた...

[公式のドキュメント](https://developer.apple.com/documentation/foundation/bundle/1411540-url)を見てみると下記のように書いてあります。
>
If you specify nil, the method returns the first resource file it finds with the specified extension.

なんか最初に見つけたやつ返してくれるみたいです。詳しい動作はわかりませんが、どこかにキャッシュを持ってるらしく clean build してもプロジェクトから指定のファイルを消しても最初に取れた URL が取れました。（プロジェクトから指定のファイルを消してアプリを削除して入れ直すとまた別のファイルが取れました）取れるファイルはアルファベット順とか `Copy Bundle Resources` の追加順ていうわけではなさそうだったので、どのファイルが取れるのかはよくわかりません。
# まとめ
`url(forResource:withExtension:)` はちゃんと指定しなくても何か返してくれる。ちなみに `path(forResource:ofType:)` も動作は同じっぽい。
# さいごに
ファイル名が `nil` なのになんかファイルを返却してくれるのはどこかで役に立つんだろうか？

```swift
func url(forResource name: String?, withExtension ext: String?) -> URL?
```

返却値がオプショナルなんで `nil` でも良さそうなのに...
Dockerでtabcmd実行環境を作る方法

Tableau Serverをコマンドラインから操作できる`tabcmd`ですが、Javaのバージョンが8以下でないとエラーが起るようです。（実際、Java12がインストールされた環境でtabcmdを実行するとエラーが起こります）
https://community.tableau.com/docs/DOC-22179

そこで、Openjdk8をベースイメージにして、Dockerで`tabcmd`を実行できる環境を構築します。

今回はDockerコンテナを起動し、`docker exec`でTableau Serverへのログイン、Publish、ログアウトをやってみます。

# 環境

- mac Mojave 10.14.5
- Tableau Desktop 2019.2.1
- Tableau Server 2019.2.1
- tabcmd-2019-2-1

# ディレクトリ構成
以下のディレクトリ構成にします。

```
tabcmd/
　├ docker-compose.yml
　├ Dockerfile
　├ sh
  　└ publish.sh
　└ start.sh
```

#作成ファイル
##Dockerfile
Openjdk8をベースイメージに、Dockerイメージを作成します。
`curl`で`tabcmd`を取得し、展開します。

```Dockerfile
FROM openjdk:8

ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update
RUN apt-get install -y sudo curl gdebi
# download tabcmd
RUN curl -L -O https://downloads.tableau.com/esdalt/2019.2.1/tableau-tabcmd-2019-2-1_all.deb
# extract deb
RUN gdebi -n tableau-tabcmd-2019-2-1_all.deb
```

##docker-compose.yml
ローカルのsh/publish.shをDockerコンテナ上にマウントします。

```docker-compose.yml
version: '3'

services:
  tabcmd:
    build: ./
    tty: true
    container_name: tabcmd
    image: tabcmd
    volumes:
    - ./sh:/var
```

##sh/publish.sh
`docker-compose.yml`で記載されている通り、Dockerコンテナ上にマウントされます。
引数を受け取り、Tableau Serverにログイン、Publish、ログアウトを実施します。

```publish.sh
#!/bin/bash
# set env path of tabcmd
source /etc/profile.d/tabcmd.sh

# login
echo "starting login."
tabcmd --accepteula login -s $1 --username $2 --no-certcheck --password $3
echo "completed login."

# Publish
echo "starting publish."
tabcmd publish $4 -o $5 -r $6 --db-username $7 --db-password $8 --save-db-password --save-oauth --no-certcheck
echo "completed publish."

# logout
echo "starting log out."
tabcmd --accepteula logout -s $1 --no-certcheck
echo "completed log out."
```

##start.sh
パラメータを設定し、ローカルで実行します。
ローカルのPublish対象のtwbファイルをDockerコンテナ上にコピーし、`docker exec`によってDockerコンテナ上でスクリプトを実行します。

```start.sh
#!/bin/bash

# set param
TABLEAU_SERVER_URL=
TABLEAU_SERVER_LOGIN_ID=
TABLEAU_SERVER_LOGIN_PASS=
# tableau twb in local
TWB_PATH_LOCAL=
# in docker (ex. var/test.twb)
TWB_PATH_DOCKER=
OVERWRITE_WB_NAME=
PJ_NAME=
DB_USERNAME=
DB_PASSWPRD=

# copy from local to docker
docker cp $TWB_PATH_LOCAL tabcmd:$TWB_PATH_DOCKER
# exec publish on docker
docker exec tabcmd bash -c "source var/publish.sh $TABLEAU_SERVER_URL $TABLEAU_SERVER_LOGIN_ID $TABLEAU_SERVER_LOGIN_PASS $TWB_PATH_DOCKER $OVERWRITE_WB_NAME $PJ_NAME $DB_USERNAME $DB_PASSWPRD"
```

#環境構築
上記のファイルを作成後、ローカルで`docker-compose.yml`と同一ディレクトリで以下を実行します。

```
docker-compose up -d
```
実行完了後、以下を実行してコンテナが起動していることを確認します。

```
 docker ps
```

結果：

```
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
823a47830565        tabcmd              "bash"              About an hour ago   Up About an hour                        tabcmd
```

#スクリプト実行
ローカルで`start.sh`と同一ディレクトリで以下を実行します。

```
sh start.sh
```

これでPublish完了です。

#まとめ
Dockerを使うと環境間の差異が原因での実行エラーを防げます。
学習コストは高いですが、作業の標準化にはうってつけだと思います。
Macのローカルサーバにアクセスする2つの方法とサーバの起動例

ご存知の方はご存知でしょうが、ちょっとつまずく時があるのでメモしておきます。
IPアドレス直叩きとMacの共有機能を使った方法です。

## はじめに

__Macと対象端末を同一のローカルネットワークに接続します。__
いつの間にか切り替わっている時があるので、アクセスできない場合は真っ先に確認しましょう。
iPhoneではコントロールセンター内のWiFiアイコンを長押しすることで接続先を確認できます。

## Macの共有機能を利用する場合

対象端末はiOSに限定されますが、IPアドレスが変更されてもアクセスできるため、管理しやすい方法です。
まず、 `システム環境設定` → `共有` → `（コンピュータ名の）編集` → `ローカルホスト名` に任意の名前を設定します。
ここでは `hanako` （ `hanako.local` ）としました。

### ローカルサーバを起動する

共有設定が済んだらローカルサーバを起動します。ここでは個人的に良く使うサーバの起動コマンドを取り上げてみました。
__なお、ローカルサーバのデフォルトのホスト名は `localhost` ですが、このままでは端末からアクセスできません。先に設定した `hanako.local` とする必要がある点に注意してください。__

#### PHP

MacにビルトインされているPHPのデバッグサーバを使うケースです。これが一番簡単ですね。

```shell
$ php -S hanako.local:8080 -t /Users/hanako/www/
```

#### webpack

`webpack-dev-server` では `--host` と `--port` でホスト名とポート番号を指定できます。

```shell
$ webpack-dev-server --content-base ./dist --watch-content-base --hot --inline --open --open-page index.html --host hanako.local --port 8080
```

#### Parcel

Parcelでは最近追加された `--hmr-hostname` でホスト名を、 `--port` でポート番号を指定できます。

```shell
$ parcel ./src/index.html --hmr-hostname hanako.local --port 8080
```

ポート番号では似たようなパラメータに `--hmr-port` がありますが、本件で使うのはこちらではありません。

#### React

`create-react-apps` ではあらかじめ環境変数に設定する形になります。

```shell
$ HOST="hanako.local" PORT=8080 react-scripts start
```

#### Vue

Vue CLIの `vue-cli-service` は内部的には `webpack-dev-server` らしく、設定の仕方も同じなんですが…

```shell
$ vue-cli-service serve --host hanako.local --port 8080
```

ネットワークエラーが出て起動できませんでした。正直Vue CLIは良くわからないので頑張ってください（ぶん投げ）。

### ローカルサーバに接続する

後はもうお察しの通り、端末のブラウザから `http://hanako.local:8080` にアクセスするだけです。
油断すると `www.hanako.local` のように `www.` を頭に付けられる時があるのでお気を付けください。

## IPアドレスにアクセスする場合

MacのIPアドレスに直接アクセスする方法です。
言うまでもなく、あらゆる端末で利用できるのが強みですね（Kindleからでもアクセスできます）。
まず、下記コマンドでMacのIPアドレスを取得しましょう。

```shell
$ ipconfig getifaddr en0
```

機能しない場合は、下記コマンドの出力内にある `en0:` の `inet` 横に表記されているアドレスを探してください。

```shell
$ ifconfig
```

私の環境では `192.168.100.100` でした。
後はローカルサーバをデフォルト設定のまま起動し、 `http://192.168.100.100:8080` のようにしてアクセスするだけです（ポート番号はサーバによって変わるので注意）。
微分とは？

# めあて
この記事は、数式を書くのではなく、微分や積分の概念について迫りたいと思います。

# 微分
簡単に言うと、3次方程式のグラフがあったとします。ではこの傾きについて考えてみましょう。3次方程式は上がり下がりしているので傾きは不定です。ここで使うのが**微分！！**
たとえば$y(x)=x^3$と言う関数があったとします。
ここでx=1の時の傾きを求めたいとします。微分と聞くと$lim$などが思い浮かびますが今は気にしません。y(1)=1です。そこから1に、限りなく0に近づけた数を足します。これをzとします。ここで限りなくとあるので、0ではないが0に一番近い数という事なので$0.000…$
ここで使うのが**極限！！**
これを使うと数学上ではほとんど0として表していいです。⇦余談
傾きは$f(z)-f(1)$で、$0.0000…$です。(厳密にいうと0ではない)
VSCodeでDoxygenのプレビューをしたい！

# 概要
この記事ではDoxygenPreviewerの説明と、下記のような作成で得た知識のまとめの導入をします。

* doxygenのソースコードのコンパイルとそれに関すること
* Visual Studio Codeの拡張機能の作成方法とそれに関すること

# DoxygenPreviewer
## なにそれ
筆者が作成した、現在編集しているCソースコードのdoxygenをすぐに見れる、Visual Studio Codeの拡張機能です。C言語用です。C++もある程度はOKです。
https://github.com/hakua-doublemoon/DoxygenPreviewer に公開しています。
~~近いうちに（何事もなければ）マーケットにも出します。~~
Marketplaceで公開されました。使ってみてください。

## なぜ作った
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227756/527442f2-5b0c-1f68-dbee-7c2d2694d685.png" " width=60%>

というのが今の開発現場のコードレビューでよくあるからです。
解決策としてはDoxygenコメント（doxygen用のspecial comment blocksの中身のことを簡単にこう呼ぶことにします）をlintみたいな感じでチェックするのが一番だと思いますが、そこまでのプログラムを作る能力がなかったので、次善策としてDoxygenのプレビュー機能を作ることにしました。

## 使い方
インストール方法は、上記のgitの中にvsixが入っているのでそれからインストールしてください。
インストール後、ソースファイルもしくはヘッダーファイルを開いている状態でVisualStudioCodeのコマンドを（Ctrl+Shift+pで）呼び出し、"Doxygen Previewer"のコマンドを実行すれば、下の画像のようにDoxygenのドキュメントが表示されます。
![dp_demo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227756/6d07fc49-ebf8-b071-8350-a010c74562cc.png)

# 動作原理

やっていることは単純:

1. 開いているソースファイルをtempフォルダにコピーする
2. TypeScript/JavaScriptのコードでDoxygenを実行するプログラム（doxyapp.exe）をコピーしたファイルに実行する
3. 生成されたhtmlからソースファイルの名前を含むものを探し表示する

本当はdoxygenのプログラムを使って直接パースされたデータを得たかったのですが、パースしたデータの格納構造がよくわからない上に、ファイル出力したらすぐ破棄されるような状態だったので諦めました。

# 作ってみて
まあ……プレビューをまじまじと見ないとやっぱり間違いには気付けないので、目覚ましい効果というのはないですね。
でもちょっとおかしなdoxygenコメントはプレビューしながら調整できるようになったので便利かとは思ってます。

そういうわけでこのDoxygenPreviewerのmaking的な話を書いていきます。

----

Making一覧:
1. [DoxygenをVisualStudioでlibclang依存のビルドをする](https://qiita.com/hakua-doublemoon/items/0cd9353baf2b475689fe)
2. [DoxyfileなしでDoxygenドキュメント作成とdoxyapp](https://qiita.com/hakua-doublemoon/items/150a485770d07262eb6c)
3. [VSCodeでHTMLを表示する拡張機能を作る](https://qiita.com/hakua-doublemoon/items/cfb638fe1ab43ca42cb8)
C++のxcode実装時のエラー Thread 1: signal SIGABRTについて

#事の起こり
xcodeでc++のコード実行時、main関数を抜けた際に、
　　　　Thread 1: signal SIGABRT
が起きてしまいました・・・。(簡単なコードなのにショック)
問題のコードはこちら。Runchクラスを2つ用意してコピーして内容表示するだけの簡単なもの。

```cpp
class Runch{
public:
    string* menu; //ポインタであることに注意
    int value;
    Runch() : menu(new string){}//コンストラクタ
    ~Runch(){//デストラクタ
        delete menu; //フリーストアに確保されたmenuを解放
    }
};

int main(void) {
    Runch Sukiya;
    *Sukiya.menu = "牛丼";
    Sukiya.value = 400;
    //Sukiyaの牛丼は400です。と表示
    cout << "Sukiyaの"<<*Sukiya.menu << "は" << Sukiya.value << "です。"<<endl;
    
    Runch Matuya(Sukiya);//MatuyaにSukiyaをコピー(コピーコンストラクタによるコピー)
    //Matuyaの牛丼は400です。と表示
    cout << "Matuyaの"<<*Matuya.menu << "は" << Matuya.value << "です。"<<endl;
    return 0;
}
```

#原因
端的に言うと、Runchのメンバのmenuがポインタである事が原因でした。今回のコードで何が起きているのかと言うと・・・

1. Runch Matuya(Sukiya)とした時に、コピーコンストラクタによってMatuyaのSukiyaの内容がコピーされる。
2. コピーにより、SukiyaとMatuyaのメンバのmenuは同じアドレスを指すようになる。
3. main関数終了時にRunchで明示的に定義したデストラクタが働き、フリーストアに確保されたMatuyaとSukiyaのmenuを解放する。

と言うことが起きています。一見なんの不備もないように思われますが、実は3で問題が起きていました。

デストラクタは基本的に、そのクラスが不要になった時(今回だったらmain関数が終わった時)に働くものです。今回は、SukiyaとMatuyaの二つのクラスがあるのでmain関数の終わりにはSukiyaとMatuyaのそれぞれの2つのコンストラクタが働いて、フリーストアに確保されているmenuを解放しようとします。
しかし、ここで2つのクラスのmenuは同じアドレスを指しています。すなわち、同じ物を2回解放しようとしてします。これにより、
Thread 1: signal SIGABRT
によるエラー終了が発生していたようです。

#対策
コピーコンストラクタを次のように明示的に定義して、コピーの際に、menuのアドレスを直でコピーしないようにしました。

```cpp
class Runch{
public:
    string* menu; //ポインタであることに注意
    int value;
    Runch() : menu(new string){}//コンストラクタ
    ~Runch(){//デストラクタ
        delete menu; //フリーストアに確保されたmenuを解放
    }
    Runch(const Runch& x){//コピーコンストラクタを明示
        string oldMenu = *x.menu; //コピー元のmenuを一時避難
        menu= new string(oldMenu);//新たなmenuをフリーストアに確保
        value = x.value;
    }

};

int main(void) {
    Runch Sukiya;
    *Sukiya.menu = "牛丼";
    Sukiya.value = 400;
    //Sukiyaの牛丼は400です。と表示
    cout << "Sukiyaの"<<*Sukiya.menu << "は" << Sukiya.value << "です。"<<endl;
    
    Runch Matuya(Sukiya);//MatuyaにSukiyaをコピー(コピーコンストラクタによるコピー)
    //Matuyaの牛丼は400です。と表示
    cout << "Matuyaの"<<*Matuya.menu << "は" << Matuya.value << "です。"<<endl;
    return 0;
}
```

このようにすると、Runch Matuya(Sukiya)とした時に、明示的に定義したコピーコンストラクタが働き、Sukiyaの*menu(Gyudon)がoldMenuとしてコピーされ、新たにフリーストアに確保したMatuyaの*menuにコピーされます。
こうすると、SukiyaとMatuyaのメンバ menuはそれぞれ別のアドレスを指すのでデストラクタによる2重解放を防ぐことができ、Thread 1: signal SIGABRTを消すことができました。

#まとめ
今回調べてみて分かったことですが、Thread 1: signal SIGABRTは今回のようなフリーストアに確保した資源の２重解放以外の原因でも発生するようです。(一つのエラーコードに複数の原因があるのはいかがなものか・・・)
今回のように2重解放だけが原因でないかもしれませんが、Thread 1: signal SIGABRTに出くわした時は、2重解放していないかどうか疑ってみてはどうでしょうか.
モンテカルロ法で円周率を求める

[scratchで試したプログラム](https://scratch.mit.edu/projects/320005938)

# モンテカルロ法とは？
1.円の外側で、ギリギリ円に接触する正方形を使う。
2.正方形のランダムなところに点を打つ。
3.円に触れたかを調べる。式は$x^2+y^2\leqq 1$
4.適当な回数をやったなら6に行く
5.2に戻す
6.$触れた個数 / 打った個数*4$が円周率

# 感想
とっても簡単でした。
この方法では円周率に近くなるまでに時間がとてもかかりますが、時間がある人はやってみてください。
rails　ページネーションの使い方

#はじめに
###ページネーションとは
1ページに表示する情報が多いときに、分割して複数のページを作成しアクセスをしやすくすることです。

Googleで検索したとき、検索結果が多いと複数のページに渡って検索結果があると思うのですが、あれがページネーションになります。ページ下のGoooooooooogleってなってるやつです。

##実装方法
###kaminari

Gemの一種である「kaminari」をインストールすることで、ページネーションを簡単に実装できます。


###kaminariのインストール

以下のように、Gemfileにkaminariを記述し、ターミナルでbundle installを実行します。

~~~ruby:Gemfile
gem 'kaminari'
~~~

~~~
$ bundle install
~~~

これでページネーションを実装するためのメソッドを使用できるようになります。

###ファイルの編集

ページネーションを実装するにはコントローラーファイル、ビューファイルを編集する必要があります。

編集の例としては以下のようになります。

~~~ruby:コントローラーファイル編集例
class TweetsController < ApplicationController
  def index
   @tweets = Tweet.all.page(params[:page]).per(5)
  end
end
~~~

ここでページネーションのために使用するメソッドはpageメソッドとperメソッドになります。

####perメソッド
perメソッドの引数には１ページに表示したい要素の数を持たせます。つまり１ページに表示する検索結果を決めることができる。

####pageメソッド
kaminariをインストールすることでparamsにpageのキーが追加されます。そのためpageメソッドの引数にparams[:page]を持たせることで現在のページ番号を指定できます。

~~~erb:ビューファイル編集例
 <%= paginate(@tweets) %>
~~~

ビューファイルには以上の記述をすることで記述をした場所にページネーションのリンクを表示させることができます。

#おわりに
ページネーションが使えるようになるとサイト作ってるなぁって感じがします笑

なんでGemの名前がkaminariなのか気になります。
わかったらまた追記したいと思います。
Nuxt.js + Typescriptの環境をフルスクラッチで作ってみた

どうも、副業フリーランサーの刀根です。今回は個人的にNuxtをいじろうと思ったので、環境構築の内容を記事にしてみました。
意外とフルスクラッチで環境構築している記事が見つからなかったので、参考になれば幸いです。

# deprecated!!
この記事の内容はちょっと古めの内容になりました。
最新のnuxt + typescriptの環境構築は[こちら](https://typescript.nuxtjs.org/)を参照してください

# TL;DR
Nuxt.js + TypeScriptの開発環境を、create-nuxt-appなどのテンプレート生成を利用せずにフルスクラッチで作ってみました。
今回のゴールは、`npm run lint` でlintをかけられるようになるところまでやっていきます。

# 先ずは公式のガイドを参考にして作っていく
[公式のインストール方法(英語)](https://nuxtjs.org/guide/installation)の下の方に、`Starting from scratch`という章があるのでその内容に従う。

まずはフォルダを作成し、その中に移動。

```bash
mkdir my-project
cd my-project
```

そして、 `npm init`で`package.json`を生成する。（途中の質問はEnter連打ですっ飛ばしてOK）

その後、`scripts`内に、nuxtを起動するscriptを設定(`"dev": "nuxt"`)

```json:package.json
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "nuxt", #この行を追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  中略
}
```

そしてnuxtをインストール

```bash
npm i --save nuxt
```

公式ドキュメント通り、`pages/index.vue`を作成

```bash
mkdir pages
touch pages/index.vue
```

```vue:index.vue

<template>
  <h1>Hello world!</h1>
</template>
```

ここまでできたら、一度起動してみる。

```bash
npm run dev
```

localhost:3000にアクセスすれば
![スクリーンショット 2019-07-14 19.12.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153926/ed62d846-dd41-a5b4-a110-be4f1172c3c8.png)

成功。

# Typescript対応
[公式のtypescript化方法](https://nuxtjs.org/guide/typescript)の通りに進めていく。

まずはパッケージをインストール

```bash

npm i -D @nuxt/typescript
npm i ts-node
```

さらに`tsconfig.json`を作成する。ちなみに中身は空でよく、nuxtを実行した際に勝手に値が入ります。

```bash

touch tsconfig.json
```

さらに、nuxt.config.tsを作成。こちらは中身が空ではダメです。

```typescript:nuxt.config.ts

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  // Type or Press `Ctrl + Space` for autocompletion
}

export default config
```

# ESLintのインストール・設定
引き続き[こちら](https://nuxtjs.org/guide/typescript)を参考にして進めていく。

まずは、必要なパッケージをインストール

```bash

npm install --save-dev eslint @nuxtjs/eslint-config @typescript-eslint/eslint-plugin @typescript-eslint/parser
```

次に、`eslintrc.js`を作成。

```javascript:eslintrc.js
module.exports = {
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  extends: [
    '@nuxtjs'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error'
  }
}
```

その後、`scripts`内に、lintを走らせるscriptを設定(`"lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."`)

```json:package.json
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "nuxt", 
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .", #この行を追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  中略
}
```

# Gitの設定
最後に、`.gitignore`がないとlintでエラー吐かれてしまうので最低限のgitの設定だけしてしまいましょう。

```bash
git init
touch .gitignore
```

```text:.gitignore
node_modules
.nuxt
```

以上で設定は終了です。`npm run lint`でちゃんとlintが動作するかどうか、`npm run dev`でHello worldができるかどうか確かめてみましょう。


もし「書かれている通りにやったのに動かない！」とかその他諸々ありましたら遠慮なくコメントください。
論理演算

#And回路
2つの入力が1の時だけ1を返す
〜かつ〜の事

#Or回路
1つでも入力が1の時1を返す
〜または〜の事

# not 演算
入力が1の時0、入力が0の時1を返す
〜ではないの事

#xor 演算
次の論理回路で求められる
(a,bが入力)
`((not a) and b) or (a and not(b))`

#半加算器
1bit+1bitの足し算
(a,bが入力)

```
1の位が a and b
10の位が a xor b
```
GoogleHomeからslackに投稿する

googlehomeからslackに乗り換え情報(ジョルダン)のリンクを投稿する。

##iftttの設定
<img src =https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417037/130f2bc6-fecd-b30f-fc07-3e817b5bf3f6.png width = 60%>
<img src= https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417037/9559bcbf-9674-0e6f-b1dd-f678dd6ac494.png width=60%>



##コード

```post.gs
function postSlack(mes) {

  var slackApp = SlackApp.create(/*slackのトークン*/);
  slackApp.postMessage(#チャンネル名, mes);

}


function getInfo() {
  
  var get_sheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = get_sheet.getActiveSheet();
  var station = sheet.getRange("B:B").getValues();
  var lastrow = station.filter(String).length;

  var date = new Date();
  var month = date.getMonth() + 1
  
  date = date.toString().replace(/[a-zA-Z]+/g, "");
  date = date.match(/[^\s]+/g);
  var time = date[2].split(":");
  //自宅の最寄駅等
  var starting_station = encodeURI("東京");
  
  var url = "https://www.jorudan.co.jp/norikae/cgi/nori.cgi?eki1=" + starting_station + "&eki2=" + encodeURI(station[lastrow - 1]) + "&eki3=&via_on=1&Dym=" + date[1] +"&Dhh="+ month + "&Ddd=" + date[0] + "&Dhh=" + time[0] + "&Dmn=" + time[1] +
+"&Cway=0&Cfp=1&Czu=2&C7=1&C2=0&C3=0&C1=0&C4=0&C6=2&S=%E6%A4%9C%E7%B4%A2&Cmap1=&rf=nr&pg=0&eok1=R-&eok2=&eok3=&Csg=1";
  
  postSlack(url);

}
```

スプレッドシートから => 変更時でトリガーを設定する。　 

利用したライブラリ
https://qiita.com/soundTricker/items/43267609a870fc9c7453
それは「else if」ではない「else」と「if」だ

　言語によっては elseif なんていうのもありますが、「else if」と言われているものは、elseのときに実行する処理がif～だという超小ネタです。

「if や else は必ず {} で囲め」というコーディング規約に書いているのに、そのコーディング規約の中でもelseやifを……

```javascript
if (/*条件*/) {
  // 略
} else if (/*条件*/) {
  // 略
}
```

……みたいに書かれていたりすると「こいつ分かってないな」と思ってしまいます。
迷路を自動生成してみる

# どうやるの？
## 1.棒倒し法
1. まず、周りを壁にします。

```
11111111111
10000000001
10000000001
10000000001
10000000001
10000000001
11111111111
```
2.次に奇数の点に点を打ちます。

```
11111111111
10000000001
10101010101
10000000001
10101010101
10000000001
11111111111
```
3. それぞれの点を伸ばします。

注意！一番上の段は上下左右、それ以外は下左右に伸ばします。(この中の1方向をランダムで選ぶ。)

```
11111111111
10100000001
10111010111
10000010001
10111110101
10001000101
11111111111
```

結果、今回の場合では今回の場合では

```
11111111111
10100000001
10111010111
10000010001
10111110101
10001000101
11111111111

(1が壁、0が通路)
```
できたやつ
<img width="495" alt="6D9E2039-4A53-4997-BC1F-5865F924199D.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411107/24b3210e-989c-07dd-be80-ad04f6766548.jpeg">
ACMでSSL証明書を別リージョンで発行する際、同一サブドメインなら別途CNAMEレコード登録は不要な件

# このページについて
・同一サブドメインのSSL証明書のDNS認証は、AWSの別リージョンごとにCNAMEレコード登録する必要がないことの検証になります。

# 経緯
・先日、お客様の環境でファイルアップロードすると「504 Gateway Timeout Error」が発生し、原因がCloudFrontの「Origin Request Timeout」値が30秒だったためでした。
当値の上限は60秒（AWS上限緩和申請で60秒以上に上限をあげることは可能だが何秒まで上限緩和できるのかはわかりません。。）だったため、以下構成に変更しようということになりました。
（CLBの「Idle Timeout」値を600秒に設定すれば、504エラーを解決できると考えたため。）

・変更前
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413372/c3d2c001-40f6-e2dc-8333-dd41787e0f77.png)
・変更後
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413372/1ef823dd-8aa9-84ae-35c6-9c6e4813d273.png)

CloudFront用のSSL証明書発行は、バージニア北部リージョンで発行しており、CLBを配置するリージョンが東京リージョンだったため、東京リージョンで別途証明書発行する必要がありました。
その際、証明書の検証をDNSにて実施しようと考えていましたが、バージニア北部と同一のCNAMEレコードが発行されたため、Route53にDNS検証用CNAMEレコードの登録は実施する必要がないことを初めて知り、記事にすることにしました。

# 検証
1.リージョン「バージニア北部」でサブドメイン用のSSL証明書を発行します。
<img width="1440" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413372/bac7c75b-3f6d-9b79-e89b-a2c95fe9d378.png">
2.「1」により、CNAMEレコードが発行されます（DNSサーバへレコード登録していないため、検証状態が「検証保留中」になっています）。
<img width="1440" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413372/85cabe25-7724-bdbf-a59a-63bac60ae337.png">
3.検証用CNAMEレコードを、Route53に登録します。
<img width="1440" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413372/6e50f75a-5f35-9aa5-47f9-a578ab173039.png">
4.しばらくすると、Route53にCNAMEレコードを登録したため、検証状態が「成功」になりました。
<img width="1440" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413372/a4f5278e-b769-271a-0bae-20182735a83a.png">
5.次は、リージョン「東京」で、同じサブドメインのSSL証明書を発行します。
<img width="1440" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413372/55ab604b-0a76-50ab-2e8b-fb3933b38678.png">
6.リージョン「バージニア北部」のときと同様に、検証状態が「検証保留中」になっています。
<img width="1440" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413372/7672a7ae-4c6d-56a5-881b-7c03073b75c1.png">
7.しばらくすると（Route53へのCNAMEレコード登録未実施の状態で）、検証状態が「成功」になりました。
<img width="1439" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413372/84e72649-be86-cedf-56b0-61ad45b668af.png">

# あとがき
DNSサーバへのレコード登録は、別会社が管理している場合、都度レコードの登録を依頼しなければならないので手間です。
今回の知見により、無駄なレコード登録依頼をせずに済みそうです（今回、レコード登録依頼をして、後からきづいたんですけどね。。）。
ただ、なぜリージョンごとに別のCNAMEレコードが吐き出されないのかが理解できていないので勉強するひつようがあるというのが現状です（1サブドメインにつき1CNAMEレコードなのかな。。？？）。
AWS認定ソリューションアーキテクト-アソシエイトに合格した話

# 概要
AWSのベンダー資格である、ソリューションアーキテクトアソシエイトを受験し合格したので、勉強方法を共有します。

# 動機
個人的な今年度の目標でAWS認定資格のプロフェッショナルを2種取得することを設定していました。
しかし、はや第一四半期が終わり、進捗はありませんでした。
このままでは年度末の詰め込みが辛くなると感じたので、せめてアソシエイトぐらい取っておかないとなーとといった危機感から受験しました。

# 受験前のAWSの経験・知識
- 新卒2年目
- LPIC level1、IPAの応用情報・DBスペシャリストを保有している
- 業務・趣味を合わせたAWS経験は半年ほど
    - Gitlabサーバの構築・運用
    - 開発環境・CICDパイプライン構築
- AWSで使用したことのあるサービス
    - EC2,VPC,Route53,Cognito,Lamda,S3,RDS,DynamoDB,CodeBuild,CodeCommit,CodeDeploy,CodePipeline,IAM

# 勉強方法
やったことは模試受験、WEB問題集1周、AWSInnovate資料流し読み、模擬の問題を再確認です。

## 模試受験
最初に2000円払って公式の模擬試験を受けて自分のレベルを確認しました。
というのも、バックグラウンド的に実は何もしなくても合格できるのではないかと淡い期待があったからです。
また、後の復習用に出題画面のスクリーンショットを取っておきました。
※控えた問題を公開することは規約違反になるのでやめましょう。

結果は6割程度の正解率でした。
各サービスの基礎は抑えているものの、例えばボリュームの種類などの細かいことは知らないといった感触でした。

確実に合格するために8割程度の正解率は欲しい思うものの、
AWSの各種ドキュメントやホワイトペーパーを網羅的に読むといった、結局何を覚えれば良いか分からない勉強はしたくない思いが有りました。

## WEB問題集
過去のAWS以外の試験経験から、私はWEB上から過去問ベースで勉強する方法が向いているという実感がありました。
無料のWEB問題集が無かったため、以下のサイトのダイヤモンドプランに登録しました。
[AWS WEB問題集で学習しよう](https://aws.koiwaclub.com/)
※6000円ほどかかりますが、圧倒的問題量と次回受験予定のソリューションアーキテクトプロフェッショナルの問題も用意されていたので、市販の本をそれぞれ買うより割安と判断しました。

受験日を自由に決められる試験はダラダラと勉強を続けても辛いだけであることをLPICで経験していたので、
短期集中で2日で1周850問を解き切りました。
正解率は全体を平均して6~7割程度だったと思います。

2週目は8～9割程度いくだろうという感触を得れたため、最低限の知識の確認だけ済まして試験を申し込むことにしました。

もし参考にされる場合、周回数は知識の定着具合にあわせてください。ただ、だらだら周回するのは経験上とても辛いです。

## AWSInnovate資料流し読み
一応試験申し込み前に知識の抜け漏れをざっと確認する意味で、
今年の5月に開催されたAWSInnovateのソリューションアーキテクトアソシエイト向けの試験対策講座の資料を全て流し読みしました。
AWSInnovateで資料だけは一通りダウンロードしていたので流用しました。

この確認作業は正直不要でした。WEB問題集で8～9割程度取れるようになっていれば、自然と身についているはずです。

AWS未経験の方はWEB問題集に取り組む前に読んでおくと、全体が把握できて効果的だと思います。
※今は、どこから資料をダウンロードできるのか分かりませんが。。

## 模擬の問題を再確認
最初に模試を受けた時に控えておいた問題を確認します。
問題はしっかり忘れていたものの、9割方確信をもって答えれるようになっていました。

おおよそ合格する安心が持てたので、記憶が忘却する前に急いで翌日の受験申込みをしました。

# 結果
881点で無事合格しました。

[WEB問題集](https://aws.koiwaclub.com/)をマスターすることが最強の勉強法だと感じました。
試験中、WEB問題集に収録されていた問題と完全に一致・類似しているといった問題が半分以上あったように感じました。

# 今後受験される方へ
## 学生向け
時間が許されるのであれば、AWSをまずは最初触りましょう。
学生がAWSのコンソールを触ったことが無い状態で、資格ありきで勉強をスタートする意味は特に無いと思います。

Route53,VPC,EC2を駆使してベーシックな構成で開発したのち、APIGateway、LamdaやS3を組み合わせてサーバレスなアーキテクチャで開発できるようになれば、就活でもアピールポイントになりうる非常に良い経験になると思います。

その後は、私の勉強法を踏襲するなりして、試験にフォーカスして知識を吸収してくと良いと思います。

## 社会人向け
学生向けにはなるべくAWSのサービスに実際に触れた方が良いと書いたものの、AWSコンソールに一切触ったことが無くても合格できる試験内容です。

AWSを多少知っている（サービス名を聞けば、それが何のサービスか分かるぐらい）方であれば、[WEB問題集](https://aws.koiwaclub.com/)に課金して8割程度の正解率になるまで周回する勉強方法がオススメです。

AWSを何も知らないのであれば、問題集形式でない各サービスを説明した試験対策本を1冊読んでから、問題集に入ると理解しやすいと思います。

ざっと調べた感じ、古いことが気になりますが以下の本が簡単で良さそうです。
[合格対策 AWS認定ソリューションアーキテクト －アソシエイ](https://www.amazon.co.jp/%E5%90%88%E6%A0%BC%E5%AF%BE%E7%AD%96-AWS%E8%AA%8D%E5%AE%9A%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88-%EF%BC%8D%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88-%E5%A4%A7%E5%A1%9A%E5%BA%B7%E5%BE%B3-ebook/dp/B01LZ2CBKB)
# 今後
[AWS WEB問題集で学習しよう](https://aws.koiwaclub.com/)にはソリューションアーキテクトプロフェッショナル向けの問題も用意されているので、記憶が定着しているうちにプロフェッショナル向けの勉強を進めます。
【JavaScript】クロージャとクラスの書き方の違い

もともとswiftで「クロージャ」について調べていました。するとJavaScriptでも同じ概念があるということで、記事数も多いJavaScriptで調べてみました。
特に感じたのが、クラスと似ているということ。そこでクラスとの違いの観点からクロージャの使い方についてまとめてみました。

# イメージ
クロージャはクラスと同じようなことができ、比べるとこんなイメージです。

- クラスは「クラスの中に関数がある」
- クロージャは「関数の中に関数がある」

# クラスの使い方

以前はJavaScriptにクラスという概念がなく、ES6で新しくクラスを作れるようになりました。
以下の例は、Userクラスを定義して名前を変更、取得する動きをします。

```javascript
class User {
  constructor() {
    this._name = '太郎';
  }
  userName() {
    return this._name;
  }
  setName(name) {
    this._name = name;
  }
}
const user = new User();
console.log(user.userName()); //太郎
user.setName('次郎');
console.log(user.userName()); //次郎
console.log(user.name); //undefined
```
`get`や`set`を関数の前につけるとゲッターとセッターにすることも機能としてありますが、今回はJavaのように書ける方を優先しているため使用していません。
プロパティは`constructor()`内で定義するのがちょっと面倒でしょうか。
また`_name`など変数にアンダーバーを付けている理由は、プライベートな変数を表現するためです。ただし**本当にプライベート変数になっているわけではなく**`console.log(user1._name)`で取得できてしまいます。あくまでルールとしてこのようにすることもできます。個人的な話ですが、実はアンダーバーをつければ勝手にプライベート変数になると勘違いしていたんですよね。。。

#クロージャの使い方

下の例は上のクラスの例と同じ動きです。

```javascript

function funcUser() {
  let name = '太郎';

  return {
    getName: function() {
      return name;
    },
    setName: function(value) {
      name = value;
    }
  };
}

const user = new funcUser();
console.log(user.getName()); //太郎
user.setName('次郎');
console.log(user.getName()); //次郎
console.log(user.name); //undefined
```
クロージャのイメージは**関数の中に関数がある**です。この形を取ることで外側の関数＝クラスみたいな使い方ができます。
文法の説明ですが、関数の内部でも関数を書くことができるだけでなく、`return`で関数を返すこともできます。さらにその返す関数をオブジェクト形式で関数を書くことで、呼び出し方が`変数.関数名`の形で実行することができます。newするところもクラスの書き方と同じですね。
しかも関数内の変数にはアクセスできないので（関数スコープ）、実質プライベートなプロパティを作ることもできます。

#比較して
こうしてみるとクロージャの方が便利なのでは？と思いましたが、以下のようなデメリットもあります。

- 継承できない（クラスはできる）
- メモリリーク問題
- 他言語からきた人にとってとっつきにくい

なので基本的にはクラスを使った方が良く、クロージャは特殊な書き方の例として留めておくのが私の中での結論です。

# 参考
[現代の JavaScript チュートリアル](https://ja.javascript.info/)
Markdown記法

#はじめに
投稿の練習としてMarkdown記法についてまとめていみようと思う。
少しずつ更新していこう。

#見出し
```ruby:heading
#H1
##H2
###H3
####H4
#####H5
######H6
```
見出しは６段階まで可能

#強調・打ち消し線
```ruby:emphasis
通常：emphasis
太字：**emphasis**
イタリック：*emphasis*
打ち消し線：~~strikethrough~~
```
通常：emphasis
太字：**emphasis**
イタリック：*emphasis*
打ち消し線：~~strikethrough~~

#リンク
```ruby:link
[リンクテキスト](URL "タイトル")

[リンクテキスト][名前]
[名前]：URL "title"　（：は小文字）
```
[マイページ](https://qiita.com/m9m6n1m8t51080 "マイページ")
[マイページ][mypage]
[mypage]:https://qiita.com/m9m6n1m8t51080 "マイページ"

#画像
```ruby:image
![代替テキスト](URL "タイトル")
```
![atomic-symbol-1494506_1920.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436668/e84a0768-987f-902a-4714-eeacd8267352.png "マイアイコン")

大きさ設定はどうするんだ？
↓いいのがあった

```ruby:image
<img width="表示幅" alt="ファイル名" src="URL">
```

<img width="150" alt="atomic-symbol-1494506_1920.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436668/e84a0768-987f-902a-4714-eeacd8267352.png">

いい感じ

#参考
[バッククオートは キーボードでどうやって 出せばいいか](https://qiita.com/kinoshitatomomi/items/1ca6849b1a11123047a2 "taitle")
[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#2-9)
[Qiita(28)画像の大きさ調整](https://qiita.com/kaizen_nagoya/items/cef6ae1fcbdbec9e7be2)
手動テストを圧倒的に効率化するChrome DevTools技3選

## はじめに

Chrome DevTools、とっても便利ですよね。
自分はそんなに使いこなせてないので、同僚エンジニアのディスプレイを覗き見ると「ま、またおれの知らないDevTools技使ってる……！」と驚かされることがよくあります[^1]。

今回は、自分が同僚から教えてもらった多くのスゴ技のうち、良く使うものを3つご紹介します。

なお、Chromeの話をしていますが、きっと他のブラウザにも似たような機能はあるかと思いますので、Chrome絶対使いたくないマンはぜひお気に入りのブラウザで探してみて下さい。

## Javascriptの実行を途中で止める

DevTool上からブレークポイントを設定することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112393/e0be5801-646f-31b3-cdc3-b165da17e106.png)

ブレークポイントをご存じない方のために説明しておくと、「特定の場所まで来たら実行を一時停止する」機能です。
↑の例では `特定のDOM要素に変更があった時に実行を一時停止` させていますが、他にも

- コードの特定の行に差し掛かったら実行を一時停止する
- 特定のイベントが発火したら（例えば特定の要素のclickイベントが発火したら）実行を一時停止する

などが出来ます。
テスター的には上記例で挙げた `特定のDOM要素に変更があった時に実行を一時停止` が一番便利でしょう。

---

停止後は再生ボタンが表示され、停止を解除して次のブレークポイントまで実行したり、コードを1行ずつ実行（ステップ実行と呼びます）することもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112393/136c80e3-9486-99aa-829c-7fbd6827846f.png)

## 特定の操作を繰り返し実行する

`Network` タブを開くと、それ以降に発生した通信ログを全て記録してくれます。
SPAとかでAjax通信がたくさん発生するシーンでとても有効でしょう。
不具合の原因がフロントエンドにあるのかバックエンドにあるのかを突き止めるのに使ったりしています。

個人的にとても気に入っているのが、 `Copy As Fetch` という機能で、これはリクエストを `Console` タブに貼り付けて実行できる形でコピーしてくれます。
画面上の操作を繰り返し実行したい時に便利です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112393/739259ec-a957-9cc7-b768-95ce70254579.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112393/2c40e057-92e2-06b0-d3f1-1dfc9b27c09e.png)

例えば「コメントを100回投稿する」みたいなことをやりたい時に

- コメントを投稿する
- `Network` タブで該当のリクエストを探し出す
- `Copy As Fetch` でリクエストをコピーする
- Consoleにペーストする
- オラオラオラオラオラオラオラオラオラオラオラオラオラオラ（略）

みたいにすると簡単に量産することが出来ます[^2]。

## Cookieを見たり編集したりする

`Application` タブからStorageやCacheを見ることができます。
Storageというのはブラウザ内で保存しているデータのことです。
よくCookieとかLocalStorageとか聞くと思うんですが、まさしくそれのことです。

バグチケットを切った時に
「こちらの環境では再現しないですね」
「なんか変なCookieが残ったりしてないですかね」
などのように言われたら、とりあえず `Application` タブをチェックしてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112393/9f48874c-0761-f272-83d6-b9138c350fa4.png)

Cookie周りの不具合が発生したときは、Webアプリ側の操作でどのようにCookieの値が変わるのかを見ながらテストするとわかりやすいです。
また、値は編集可能ですので、直接編集して挙動を確認してみるのも良いでしょう。

不具合調査以外で自分が良く利用するユースケースでは、例えば言語設定をCookieに保存していたりする場合、 `locale: ja` となっているところを `en` に変更して言語を切り替える、みたいなことをしたりすることがあります。


[^1]: ごくまれに、せっせとSlackの絵文字作ってるところに出くわすこともあります。
[^2]: 実際にはCSRFトークンなどの関連でうまく動かないときもあります。
諦めたらそこで試合終了ですよ・・・？　デプロイにつまったら(AWS,unicorn)

どうも！！！
中学時代は弱小バスケ部の副キャプテンをやっていましたチャンクノです。
さてみなさん一つのサービスを作り上げた時の最後の試練てなんだか分かりますか？
そう、、、**デプロイ**です。
私は昨日エラーと一日中格闘し、最終的にはできませんでした、、、。
できたと思ったら途中でフリーズしおった😡😡😡
というわけで私が調べに調べまくってこれは使えるんじゃないかと思ったサイトと調べる前にまずは実践してほしいことを紹介します。
ちなみにAWS兼ユニコーンを使ってデプロイするときの話です。

# ①デプロイにつまったらまずはこれ!!!
**１.ユニコーンを停止する。**

```
ターミナル上で以下のコマンドを実行
ps -ef | grep unicorn
```
**↑**ユニコーンが起動しているかどうかの確認。

```
kill -9 ~
```
~の部分には上記のpsコマンドで出たmaster部分の数字が入ります。
それぞれスペースキーで1つ空けます。
**全角に気をつけて！！！**
エラーが出なければ無事停止しているはずです。

**2.mysqlを再起動する**

```
以下のコマンドをターミナルで実行
sudo service mysqld restart
```
**3.Nginxを再起動する**

```
以下のコマンドをターミナルで実行
sudo service nginx restart
```
この三点セットをお試しください。
もしかしたらユニコーンを停止するだけでもいいのかもしれませんが、私は2と３だけ試してできたこともあるので一応お試しください。
いずれもサーバー側のターミナルでやることだけお気をつけください。



# ②デプロイ中にターミナルがフリーズしてしまったら。
これが一番最悪です。
鬼の謎現象です。
ターミナルが停止してしまったらその日は大人しく別のことをしてください。
そして次の日にもう一度チャレンジしてください。
私はここでターミナルを強制終了してしまいえらい目にあいました、、、。
しかし、昨日フリーズ中のターミナルを放置したまま寝たのですが、本日朝起きて強制終了してもなんともありませんでした。謎すぎます。
大切なのは無理にやらず一日置くことです。
ターミナルがフリーズしたら大人しく寝ましょう。
私はふて寝して、朝起きてからチャレンジしたらできました。
とにかく諦めずに頑張ってください。

参考サイト

https://qiita.com/zaru/items/ddbb0c029d6c5760dc54

```
ssh_exchange_identification: read: Connection reset by peer
```
というエラーが出てしまったら以下参照。
全て試してダメだったらEC2インスタンスを作り直しましょう。
私は作り直しました、、、。

https://codeday.me/jp/qa/20181219/2152.html

https://altarf.net/computer/server_tips/2211

https://qiita.com/colorrabbit/items/59c988fcb33869f37d08#varlogsecure-%E3%82%92%E8%A6%8B%E3%82%8B

心折れそうになることもありますが皆同じです。
諦めずに前だけ見て進み続けましょう！！！
それでは皆様のよきプログラミングライフを祈って🙏🙏🙏
noindex について調べたこと

## はじめに
* SEO対策のため、metaタグを修正するにあたり、noindexについて調べたことを記載しておきます
* 何となく知っていたことでしたが、自分用の備忘録として残しておきます

## noindexタグとは
* サイト内のページを検索エンジンにインデックスさせないために使うmetaタグの1つ

## noindexの仕組み
* Googleにページが認識、評価される過程はクロール → インデックス → ランキングの3段階に分かれる
* noindexはこの過程を2段階目、インデックス前で止める働きをする
    * 検索エンジンのクローラーを制御するmetaタグの一つで、検索エンジンに対して、該当するページを検索エンジンのインデックスへ登録しなくてよい、と伝える効果がある
    * Googleはサイトを認識するが、評価の対象にしないため検索結果には表示されないようにする
    * noindexの記述されているURLは、原則としてどのようなキーワードで検索しても検索結果に表示されることがなる

## なぜ noindex を仕込むのか
* サイト全体の評価を下げてしまうのを防ぐため
    * 文字数が少なかったり、重複コンテンツがあったりするページをGoogleは品質の低いページとみなすため
* 作成中のページやテストページなどの完成していないページが、検索結果に表示されるのを防ぐため

## どんなページに noindex を仕込むのか
* 重複コンテンツ
* コピーコンテンツ
* 情報量（文字数）の少ないページ
* サイトマップ
* エラーページ

## タグの設置方法

~~~html
<meta name="robots" content="noindex, nofollow" />
~~~

* noindex とともに nofollow タグを使用して、リンク先にリンクパワーを与えないようにする

## Googleのコンテンツ評価基準E-A-Tについて
* https://seopack.jp/seoblog/20160407-qc-1-eat/

## metaタグに関すること
* https://saruwakakun.com/html-css/basic/meta-tag#section1
    * 今回のテーマとは別にはなりますが、備忘録のためOGPタグの一覧を抜き出しておきます

~~~html
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">
~~~

## おわりに
* むやみに noindex を使用したことで流入が減る可能性があるため、設置する際は注意が必要になるかと思います
Office VBA 当面不使用 2016以降に参照設定できる Office Private

Library OfficePrivate
C:\Program Files\WindowsApps\Microsoft.Office.Desktop_16XXX.XXXXX.XXXXX.X_x86__規則性のある乱数\VFS\ProgramFilesCommonX86\Microsoft Shared\OFFICE16\MSOPRIV.DLL
    Microsoft Office.NET Private Object Library
Class Hailstorm
    OfficePrivate のメンバー
Hail storm 雹の意味
#名前では見つからないのでDLL名から検索すると、
Microsoft Office.NET Private object Library
が本当の名前らしい。

#日本語以外の言語でExcel,Word,AccessかOutlook使用時に参照する？

ネットで検索すると日本語以外の言語圏域でAccess2013のaccdbファイルをAccess2010で開いたときにエラーメッセージが表示される。
これを参照設定から外すとWordかOutlookとの連携がうまくいかなくなるようだ。

http://veroniquefrizzell.com/more-automation/
これがOutlookとまたは、もしくはMSOPRIV.DLLを参照設定しろとある
参照設定をするのにCreateObjectを使用しておりややこしい。
GALを使っているので、このOutllokとExcelは法人用のものだ
Excelを起動し、
次のマクロをセットして
A1に登録されている名前を入れる
ここで重要なのは姓名の間にスペースを入れないこと
また法人の株式会社表示、名前に連続して所属が表示されている場合、それを削って比較しないと合致しない。
なので実際はGalや連絡先の登録の仕方によって、文字列のスペースを削るなどもっと調整が必要。
合致すると第一番目のメールアドレスが、3列目に入る。
あと個人的なこだわりになるのかもしれないが、
 - 参照設定したので、コードを統一。 CreateObjectを使わない（ただし完成したら遅延バインディングしてもよい）
 - OutlookとExcelのどのオブジェクトか明示。参照設定をはずしたら Outlook. で置換して削る。
 - Defaultfolderを取得（エラー時にアカウントを確認するなどバグの時に使う）

```vb
Sub test()
'For Excel
Dim olApp As Outlook.Application: Set olApp = New Outlook.Application
Dim NS As Outlook.Namespace: Set NS = olApp.GetNamespace("mapi")
Dim olDfolder As Outlook.Folder: Set olDfolder = NS.GetDefaultFolder(Outlook.olFolderContacts)
Dim myCItem As Outlook.ContactItem
Dim olAddLst As Outlook.AddressList, olAddLsts As Outlook.AddressLists
Dim olAddEns As Outlook.AddressEntries, olAddEn As Outlook.AddressEntry
Dim wb as Excel.Workbook, Set wb = Thisworkbook
Dim c As Excel.Range, r As Excel.Range, AddressName As String
Dim exchangeUser As Outlook.exchangeUser
Dim i As Long
i = Cells(Rows.Count, 1).End(xlUp).Row + 1
'Set olAddLsts = NS.AddressLists
'Set olAddLst = NS.AddressLists.Item("Gloabal Address Lists")
Set olAddLst = NS.GetGlobalAddressList
Set r = Range(Cells(1, 1), Cells(i, 1))

For Each c In r

AddressName = Trim(c.Value)
Set olAddEns = olAddLst.AddressEntries

For Each olAddEn In olAddEns
If olAddEn.Name = AddressName Then
Set exchangeUser = olAddEn.GetExchangeUser
c.Offset(0, 2).Value = exchangeUser.PrimarySmtpAddress
Set exchangeUser = Nothing
Exit For

End If
Next
Next c

End Sub
```

しかしこのコードでも、Office Privateは必要がない。
いったい何なのか。
https://www.ka-net.org/blog/?p=11788
おそらくこれが同趣旨のはずだが、やはり参照設定していない。

とりあえず、参照設定して使うサンプルがないこと、当方でも過去に使用実績がないこと、海外の情報を検索すると、参照設定していると互換性でトラブルが起きる例しかないので、当面はこの参照設定は使わないことにした。
https://outlooklab.wordpress.com/2016/06/25/%E9%80%A3%E7%B5%A1%E5%85%88%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%81%AE%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC%E3%81%AE%E9%83%A8%E7%BD%B2%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/
なお、ここでメールアドレスをまたGALからメールアドレスをとるようなことをしているが、実際はほかの情報が取得できる（肩書とか）。しかし住所録（連絡先）に登録すると、GALと切れてしまうため、再び取得するにはアドレスや名前をキーにしてGALから取得しなければならない。
こういうGAL（グローバルアドレスリスト）を検索するVBAが海外を含めて存在する理由はこうした背景があるわけです。

#参考サイト
namespace.getglobaladdresslist
https://docs.microsoft.com/ja-jp/office/vba/api/outlook.namespace.getglobaladdresslist
【Python】Google Maps Platformを使ってGoogleマップの画像を作る

[Google Maps Platform](https://cloud.google.com/maps-platform/) の勉強。
### APIキーを手に入れる
以下の2つのAPIを使う。

- Maps Static API（マップに含まれている）
- Geocoding API（プレイスに含まれている）
![gmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407268/e213e77a-20c1-5d19-801c-0433cef3853f.png)
画像取り忘れたけど1, 2, 3の順に進めればAPIキーが表示される。  
再度確認したい場合は「GCPコンソール > APIとサービス > 認証情報」

### 使うライブラリ
ドキュメントのページにリンク貼られてたのを使う。
[Python client library for Google Maps API Web Services](https://github.com/googlemaps/google-maps-services-python)
```$ pip install -U googlemaps```

### コード
Geocoding APIで経度と緯度取ってきてMaps Static API用のURL作るだけ。
いくつかのパラメータを設定できるようにした。

```python:main.py
import googlemaps
import requests

MY_API_KEY = "あなたのAPI KEY"
URL_FORMAT = "https://maps.googleapis.com/maps/api/staticmap?center={}"\
    "&zoom={}&size={}&format={}{}&maptype=roadmap"\
    "&key={}"


def dl_image(filename, img_format, url):
    file_name = "{}.{}".format(filename, img_format[:3])
    res = requests.get(url)
    if res.status_code == 200:
        with open(file_name, "wb") as f:
            f.write(res.content)
    else:
        print("失敗")


def make_url(lat, lng, zoom, size, img_format, custom_icon):
    location = "{},{}".format(lat, lng)
    size_param = "{}x{}".format(*size)
    if custom_icon is None:
        icon_param = ""
    else:
        icon_param = "&markers=icon:{}|{}".format(custom_icon, location)
    url = URL_FORMAT.format(
        location, zoom, size_param, img_format, icon_param, MY_API_KEY)
    return url


def get_map_image(
        place, zoom, size=(600, 300), img_format="png",
        custom_icon=None, filename=None):
    """
    place : 場所\n
    zoom  : 1)世界 5)大陸 10)市 15)通り 20)建物\n
    size  : (width, height) 最大 640x640\n
    img_format : png(png8), png32, gif, jpg, jpg-baseline\n
    custom_icon : IconのURL
    """
    gmaps = googlemaps.Client(key=MY_API_KEY)
    geocode_result = gmaps.geocode(place)
    # for k, v in geocode_result[0].items():
    #     print("key : " + k)
    #     print(v)
    #     print("-" * 10)

    lat = geocode_result[0]["geometry"]["location"]["lat"]
    lng = geocode_result[0]["geometry"]["location"]["lng"]
    url = make_url(lat, lng, zoom, size, img_format, custom_icon)
    if filename is None:
        filename = place
    dl_image(filename, img_format, url)


if __name__ == "__main__":
    get_map_image("スカイツリー", 15)
    get_map_image(
        "スカイツリー", 15, custom_icon="https://i.imgur.com/zzmQALF.png",
        filename="スカイツリー_アイコン付き")
```
#### パラメータ
もっと色々出来る。公式ドキュメント参照。
https://developers.google.com/maps/documentation/maps-static/dev-guide

### できた画像
#### カスタムアイコン無し
![スカイツリー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407268/91b25ac4-6d2a-2ee9-fe46-0296fd0fe80b.png)

#### カスタムアイコン有り
スカイツリーの位置にスカイツリーアイコン
![スカイツリー_アイコン付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407268/2361537c-2020-c704-2126-460543d1f2d0.png)

### わざわざ画像作りたくない
imgタグのsrcにurl指定すればok

```html:sample.html
<html>
    <body>
        <img src="url" alt="地図">
    </body>
</html>
```
### おわりに
他にもいっぱいAPIがあるんで使ってみたい。  
おわり。
サクラエディタで選択した文字を自動でマークを付ける方法

サクラエディタでログファイル等を参照する場合、選択した文字を自動でマークされると便利だったりします。
ここではサクラエディタで文字をダブルクリックした場合に、選択した文字を自動でマークする方法を紹介します。

### 文字をダブルクリックして選択すると、選択した文字がマークされる。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/051c4132-7588-4764-f8b9-2ce8b22dc793.png)


### 設定方法

###### 以下のファイル「highlight.mac」を作成し、任意の場所に配置する。

```mac:highlight.mac
S_SelectWord(0);
S_SearchClearMark(0);
```

###### サクラエディタのメニューの「設定」－「共通設定」を選択する。
![サクラ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/1758f1c6-7e30-f9eb-32ea-e2c1bcd92382.png)

###### 「マクロ」タブで以下を設定する。
①「マクロ」タブを選択する。
②「マクロ一覧」に「highlight.mac」を配置したパスを設定する。
③「名前」に任意の名称（ここでは「自動マーク」）、「File」にマクロファイル名（ここでは「highlight.mac」）を設定する。
④「設定」ボタンを押下する。
⑤マクロ一覧に表示されたことを確認する。
![サクラ3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/49da1f15-2d81-33cf-ebc3-6ae64dd9316c.png)


###### 「キー割り当て」タブで以下を設定する。
①「キー割り当て」タブを選択する。
②「種別」で「外部マクロ」を選択する。
③「機能」で設定したマクロ名（ここでは「自動マーク」）を選択する。
③「キー」で「ダブルクリック」を選択する。
⑤「割付」ボタンを押下する。
⑥「OK」ボタンを押下する、
![サクラ4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/7c0aa16b-e210-76f4-f09d-793a304a830f.png)
  
  
以上
macの初回セットアップ備忘録

## はじめに
macの設定でググった時の備忘録メモです。

## macの設定篇
### ピープ音をミュート

ピープ音ってこんな種類あったんですね。
カエルの鳴き声がゲコゲコだったら選んでたかなw
外付けのスピーカーとか内臓マイクで音拾うときもこの画面っぽい。

```
システム環境設定/サウンドエフェクト/通知音の音量:をいい感じに左へ
```

### 日本語を英語に

```
システム環境設定/言語と地域/いい感じに英語にする
```

### 英数キーを2回押して半角英数に変換

こちらの記事を参考にさせて頂きました！

https://lflab.work/fix-mac-keyboard-eisuu

## アプリ
### iTerm2のインストール
手前味噌ですが自分の記事を。
ログ保存のセットアップとスクロールバック永久メモってた自分を褒めてやりたい。

https://qiita.com/sosat/items/2eec8552b6dafd35916a

### その他
VScode, Skitch, Clipyとか。あとは都度都度でおk

Skitchのショートカットはmacのデフォとぶつかっちゃうので以下の記事を参考に解除しました。多謝。

https://best-cloud.jp/skitch-shortcut/

## おわりに
久しぶりにMacのセットアップすると何もかも忘れてるので、この記事結構大事ですねw

簡単ですが以上です！
公開鍵認証を使ってMacからラズパイにssh接続する ssh-copy-id便利！

### なぜ、ssh接続？

ラズパイを使う時、Mac / Linux / PC からネットワーク接続して使うと何かと便利です。専用のディスプレイ、キーボード、マウスを用意しなくて良いので、とても気軽。

その際、ssh接続だと毎回パスワードを入力しなくて良いのでさらに便利。セキュリティ面でも安心。気軽で便利で、かつ安心ということです。

クラスで使う時など、たくさんラズパイがあるときには必須。


## 前提
 - Macからの接続（ローカル）
 - Raspbian Stretchへの接続（リモート）
 - パスワード認証によるローカル〜リモート間SSH接続ができている。
 - リモートホスト名がhostname001の時、名前解決によりhostname001.localでアクセスできている。

```ssh hostname001```と打つだけで、ターミナル接続ができるようになります。

## ローカル（Mac）で鍵ペアを作成する。

```ssh-keygen -t rsa```

~/.ssh/に作成される。
秘密鍵：id_rsa
公開鍵：id_rsa.pub

## リモート（ラズパイ）に公開鍵を転送／登録

```ssh-copy-id pi@hostname001.local```

ssh-copy-idコマンドが無い場合、```brew install ssh-copy-id```でインストール。このコマンドの中身は実はスクリプトです。```cat `which ssh-copy-id` ``` で確認できます。

.sshディレクトリ（存在しない場合は作成）とその中にauthorized_keysファイルが作成され、公開鍵id_rsa.pubが中に収容される。別の鍵がすでに存在する時は、authorized_keysに追記される。

同じ鍵を送ろうとすると、すでにありますと言って何もしない。素晴らしい。scpやsftpなどを使うより格段に楽で間違いも起きない。

公開鍵登録後、すぐに鍵による接続が可能になります。


## エイリアスで接続できるようにする

エイリアスで接続できるようにすると、さらにさらに簡単接続。

ただし、scpコマンドなどssh関連コマンドで使われる他、Transmit5などのアプリでも使われる場合があるので、設定したことを忘れていると、今までできていた接続ができなくなって慌てます。

```
通常のコマンド行
ssh pi@itrobot001.local

エイリアス利用の場合、こんなに簡単。
ssh itrobot001
```

```
nano .ssh/config

CheckHostIP no

User pi
Port 22
IdentityFile ~/.ssh/id_rsa

Host itrobot*
    HostName %h.local

Host primbell*
    HostName %h.local

Host nao2g-server
    HostName %h.local
```

```
CheckHostIP no      known_hostsにIPアドレスを書き込まなくなる。IPアドレスが変わった時の面倒がなくなる。
User pi  コマンド行でユーザー名を省略できる。
Port 22  コマンド行でポート番号を省略できる。22以外の番号にしている時など便利。
Host     コマンド行のホスト名でフィルタリング。
Hostname ホスト名を指定する。
%h コマンド行で指定したホスト名が使われる。
```


## パスワード認証を廃止したり、ルートログインを禁止したり、する？

セキュリティを考える場合、従来のパスワード認証を廃止、ルートでのログインを禁止などの設定をリモート（ラズパイ）のファイル編集にて行なうと良いです。設定に失敗すると、ネットワーク接続での作業が続行できなくなるので、慎重に。

```
sudo nano /etc/ssh/sshd_config

パスワード認証廃止。デフォルトはyes。
PasswordAuthentication no

ルートでログインできなくする。デフォルトはyes。
PermitRootLogin no


デフォルトでyesだが、明示的に公開鍵認証を可能にする。
PubkeyAuthentication yes

```
AWS cloud9を使ってRuby on Railsを起動させる際に躓いたところ

## 環境
`Rails　5.0.7.2`

## AWS cloud9のPreview
### 問題
* Preview -> Preview Running Application にて接続が拒否されて表示されない
<img width="664" alt="スクリーンショット 2019-07-14 18.14.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260353/b1432a83-4b40-9046-5e66-7ac5f459874d.png">

### 解決策
* 上記画像のBrowserの隣りにあるPop Out New Windowのボタンを押す
    * Yay!

<img width="575" alt="スクリーンショット 2019-07-14 18.15.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260353/46b201db-f58f-da76-4a8e-76b9d736f231.png">

## SQLまわり

### 問題
*  PreviewしたらNoConnectionPool
<img width="667" alt="スクリーンショット 2019-07-14 18.08.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260353/0e3c93da-24e9-f8a5-1473-813673779384.png">

### 解決策
* Gemfileにsqlite3のバージョンを明確に指定する

<img width="252" alt="スクリーンショット 2019-07-14 18.17.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260353/eb824257-020b-4940-1e16-74e83d82aa49.png">
LeetCode / Remove Duplicates from Sorted Array

（[ブログ記事](https://mhiro216.hatenablog.com/entry/2019/07/14/191526)からの転載）

[https://leetcode.com/problems/remove-duplicates-from-sorted-array/]

Given a sorted array nums, remove the duplicates in-place such that each element appear only once and return the new length.

Do not allocate extra space for another array, you must do this by modifying the input array in-place with O(1) extra memory.

Example 1:
Given nums = [1,1,2],
Your function should return length = 2, with the first two elements of nums being 1 and 2 respectively.
It doesn't matter what you leave beyond the returned length.

Example 2:
Given nums = [0,0,1,1,1,2,2,3,3,4],
Your function should return length = 5, with the first five elements of nums being modified to 0, 1, 2, 3, and 4 respectively.
It doesn't matter what values are set beyond the returned length.

Clarification:<br>
Confused why the returned value is an integer but your answer is an array?
Note that the input array is passed in by reference, which means modification to the input array will be known to the caller as well.

予め昇順にソートされた数値のリストを、重複を削除するように直接修正したリストを作成するという問題です。
入力のリストを<b>直接</b>修正するというのがポイントで、アウトプットのために別のリストを用意しない解法が求められています。

この問題はBad評価が多いのですが、おそらく以下が原因と思います。
<b><span style="color: #ff5252">入力のリストnumsに対して、関数の返り値はリストの要素数nで、正解を判定する対象はnums[:n]になる</span></b>
なぜこういうややこしい設定にしたのか・・・問題文を最後まで読む力を試してるんですかね。

#### 回答・解説

##### 解法1
公式の解法はこちら。
入力のリストの要素数が0の場合は0を返しておきます。
iとjという2つの変数を作成し、これをポインタとして使います。
jはリストの要素数分ループを回すための通常のポインタで、iはリスト中の値が変わったときだけ+1し、リストの要素を新しい値で置き換えるためのポインタです。
このようにすることで、最後に正解を判定する対象nums[:i+1]が重複のない異なる値から構成されることになります。

```python
class Solution:
    def removeDuplicates(self, nums: List[int]) -> int:
        if len(nums) == 0: return 0
        i = 0
        for j in range(1, len(nums)):
            if nums[j] != nums[i]:
                i += 1
                nums[i] = nums[j]
        return i + 1
```

##### 解法2
計算量は解法1が優れているのですが、<b>正解を判定する対象はnums[:n]になる</b>のがどうにも気に入らず、numsがそのまま正解判定対象になるように書いたのが以下です。
まあ私の意地みたいなコードなので、ご参考まで。
リストの初期の要素数分だけループを回し、重複する値はdelで削除していくという処理です。

```python
class Solution:
    def removeDuplicates(self, nums):
        if len(nums) == 0: return 0
        i = 1
        for _ in range(1,len(nums)):
            if nums[i] == nums[i-1]:
                del nums[i]
            else:
                i += 1
        return len(nums)
```