OmniAICreator/Qiita-1.07M huggingface dataset:
ansible-playbookの実行を早くするチューニング方法（default_forks）の紹介

# ansible-playbookの実行処理を早める方法
Ansibleのもくもく会に参加した時に教えていただいたansible-playbookの実行スピードを上げる方法を一つ紹介します。

## はじめに
Ansibleのplaybookは一度作れば自動化出来て便利ですが、サーバ数が多いと完了まで時間がかかります。
作業の中には100台単位のサーバにAnsibleを実行するものがありますが、ものによっては何時間もかかってしまうことがあります。

しかし、Ansibleでデフォルトで有効になっている機能をオフにしたり、設定値を変更することで処理速度を早めることが出来ます。その方法を記載します。

## default_forksの値を変更する

### default_forksとは
default_forksとは、同時実行サーバの上限数です。
ざっくりいうと、インベントリファイルに記載されたサーバに対して何台まで同時にコマンド処理を実行するかを設定するものです。

この値を指定しない場合（デフォルト）、5が設定されており同時接続処理台数のMAXは5台になります。
実際に3台のサーバに対してdefault_forksの値を1にした時と3にした時とで同じ処理を行いましたが、見た目でわかるほどの変化がありました。（一瞬止まる程度ですが）

ですので、実行処理が増えるほど、サーバ台数が増えるほどこの設定値の効果は如実に出てきます。

### default_forksの値を変更する方法

`ansible.config`ファイルに 「forks=**N**」のように記述します。
「forks=100」にすれば100台同時にコマンド実行処理をすることが可能です。

## 最後に
何台まで実行出来るかですが、よほど低いスペックのサーバで無い限り100くらいまで設定しても問題なさそうです。ただ、本番環境で実施するなら台数調整しながら試すかテスト環境などで試すと良いかもしれないです。
iOS Safariでinput要素のfocusを簡単に外す方法

# 始めに
iOS Safariでinput要素を選択してキーボードが出ているとき、何も設定しないと画面をタップしただけではfocusを外してキーボードを閉じることができません。これを何とかするために今まではJSでblurするようにしていましたが、もっと単純な方法があったのでその方法を紹介したいと思います。

# 結論
親のDOMにonclickイベントを設定したら外せます。めちゃくちゃ簡単ですね(笑)。onclickの処理を書かなくても問題ないです。また、どの階層にいても問題ないので、一番上のdiv要素にonclickを設定すればいいと思います。

```html:iOSでfocusが外れるようにする設定
<html>
<body>
  <!-- 親要素に空でもいいのでonclickの設定をする -->
  <div onclick="">
    <input text="" />
  </div>
</body>
</html>
```

# なぜこれで上手くいくか
仕様をちゃんと読んだわけではないので憶測ですが、どうやらonclickイベントを設定していないDOMはこのイベント自体を省略してしまうようです。HTMLの挙動的にはどれかをクリックしたらそちらにfocusが移るのですが、イベント自体が省略されているのでfocusが外れないようです。
なので一番親であるdiv要素とかにonclickイベントを設定することで必ずonclickイベントを拾えるようになるので、focusを外せるということです。（bodyタグでいけるかと思ったのですが、どうやらbodyだと拾ってくれなそうです）

# サンプルコード
CodePenでサンプルコードを書きましたのでそれをこちらに載せます。

<p class="codepen" data-height="402" data-theme-id="0" data-default-tab="html,result" data-user="wintyo" data-slug-hash="wLbqLN" style="height: 402px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="iOSでフォーカスを簡単に外す">
  <span>See the Pen <a href="https://codepen.io/wintyo/pen/wLbqLN/">
  iOSでフォーカスを簡単に外す</a> by wintyo (<a href="https://codepen.io/wintyo">@wintyo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

スマホで動作を確認する方は以下のURLからアクセスしたほうがいいと思います。
https://codepen.io/wintyo/full/wLbqLN

一番上にbodyのクリックイベントをカウントするようにしましたが、カウントされていない場所があると思います。そこはクリックイベントが送られていないのでfocusも外せない状態になっています。
ついでの発見ですが、どうやらonclickイベントを拾った要素にハイライトカラーが当たるようですね。実際はこれは邪魔だと思うのでハイライトカラーを消さないといけなそうですね。

# 終わりに
iOS Safariでfocusが外せない問題に結構悩まされていましたが、簡単に対応できる方法が見つかってよかったです。ただこのサンプルコードを書いていたら勝手にズームされたり、キーボード表示中にスクロールすると謎の黒い領域が現れたり、iOS特有の挙動に悩まされてしまいました。ズームはなんとかなりましたが、領域のほうは解決できませんでした・・・。もうちょっと普通の挙動をしてくれると嬉しいんですけどねぇ。
キラッとプリ☆チャンコーデ管理アプリを更新してみた！

以前、書いたこちらの記事（[キラッとプリ☆チャンのコーデ管理アプリを作ってみた話](https://qiita.com/hyzenthlay/items/69572e1a8bd2f9447b07)）から更新しました。
## 更新した部分
リストの読み込み部分を**SQLiteのデータベースにマルナゲ！**

前のは、いちいちソースに書いてたので、これをSQLiteで作成しておいたデータベースを取得して、アプリのリストビューで見れるように。

```java

     private class ListShowClickListener implements View.OnClickListener {

        @Override
        public void onClick(View view) {
            // データベースヘルパーオブジェクトを作成
            DatabaseHelper helper = new DatabaseHelper(PrichanJewel1.this);
            // データベース接続オブジェクトを作成
            try (SQLiteDatabase db = helper.getWritableDatabase()) {
                String sql = "select * from prij1corde order by _id";
                Cursor cursor = db.rawQuery(sql, null);
                String[] column = {"card_name", "card_own"};
                int[] cardList = {android.R.id.text1, android.R.id.text2};
                SimpleCursorAdapter adapter = new SimpleCursorAdapter
                        (PrichanJewel1.this, android.R.layout.simple_expandable_list_item_2,
                                cursor, column, cardList, 0);
                lvJprichan.setAdapter(adapter);
            }
        }
    }
```
これで、SQLiteに既に作られたデータベースにアクセスして、リストを取得して、リストビューに表示することができるようになりました。
更新の場合も同じような感じで出来ました。

```java

        public boolean onItemLongClick(AdapterView<?> adapterView, View view, int position, long id) {
            // 長押しされた位置を取得
            Cursor item = (Cursor)lvJprichan.getItemAtPosition(position);
            // 取得した位置にあるリスト名を取得（ここではカード名を取得する）
            String card_name = item.getString(item.getColumnIndex("card_name"));
            // データベースヘルパーオブジェクトを作成
            DatabaseHelper helper = new DatabaseHelper(PrichanJewel1.this);
            // データベース接続オブジェクトを作成
            try (SQLiteDatabase db = helper.getWritableDatabase()) {
                String upSql = "update prij1corde set card_own = '所持済' where card_name = '" + card_name + "'";
                SQLiteStatement stmt = db.compileStatement(upSql);
                stmt.executeUpdateDelete();
            }
            Toast.makeText(PrichanJewel1.this,
                    "登録完了！",Toast.LENGTH_SHORT).show();
            return true;
        }
```

なお、データベースヘルパーは
[男子大学生の考えること：自前のSQLiteDatabaseファイルをassetsからandroidで使えるようにする](http://programhhyy.hatenablog.com/entry/2014/10/31/230943)
で、紹介されているソースコードほぼそのまま使っています。
リスト取得はこちらの記事が参考になりました。

[sqliteで取得した値をListViewに表示する簡単な例](https://qiita.com/zaburo/items/b02f439e3f2c5ddb1c58)

##どうしてそう出来たの？

なかなかいいアイデアが閃かず、半ばヤケクソでJavaとPostgreSQLで同じような仕組みのを作ったことで、ひらめいたわけです。
**「データベース組み込んだらできるんじゃね？」**
と。
やったことが全く無かったので、色々調べて半信半疑でやってみたら、うまく行ってしまったのでこういうことになったわけです。

以上です。
プチコン3号経験者によるプチコン4まとめ (2) マップをスクロールさせてみる

前回は [BG画面とテキストの統合について](https://qiita.com/yamachan360/items/63a4019f85ac67a777b9) まとめましたが、今回はそれを引き継いで、マップのスクロールあたりを試したいとおもいます。

# 今回のお題はスクロールするマップ

[前回](https://qiita.com/yamachan360/items/63a4019f85ac67a777b9) まとめたように、テキスト部分の大幅な強化がプチコン4のポイントのひとつな気がします。

テキストの一部が書き換え可能で、それで背景を構成する！なんて、昔のBASICでは憧れの機能でした。欲しかったなぁ、シャープのX1… あと JR-100/200 とか、PCG 機能の追加ボードとか… (懐古モード)

さて、この拡張されたテキスト(に統合されたBG機能)を使って、よくあるスクロールするマップを作って動作を試してみましょう。

# プチコン3号との違い

プチコン3号では、スクロールするマップ作成にはまず [BGSCREEN](http://petitcom.net/manual/bgscreen) 命令で、BGレイヤーの大きさを指定しました。プチコン4 では BG* は T* に置き換わっていますので、[TSCREEN](https://sup4.smilebasic.com/doku.php?id=reference:%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E5%85%A5%E5%87%BA%E5%8A%9B) 命令で同様に設定できます。で、注目点はココ！

> 幅×高さが32768まで指定可能

プチコン3号の倍のサイズのマップが定義できるようになっています！

あと、細かいですが [BGOFS](http://petitcom.net/manual/bgofs) に対応する TOFS の座標系が変わっていることに注意。マニュアルによると

> THOMEで設定したテキストスクリーン上の座標を、TOFSで設定した画面上の座標に持って行く

と考えるそうで、そしてプチコン4では座標系が左上原点に統一されたため、BGOFS とは動きが逆になっています。例によって簡易的に関数で対応するなら以下な感じ。

```vb:プチコン4
DEF BGOFS X,Y,Z
 TOFS -X,-Y,Z
END
```

まあ、XとYが逆に動く、ってだけで。ハマるほどの問題ではないですねw

全体的を通して、命令の名前変更以外で、プチコン3号との大きな違いは感じませんでした。既存ゲームの移植など、わりと楽にできそうな気がしてきました。

# 今回のサンプル

今回のサンプル・プログラムは、RPGとかでよくある風の、マップのスクロールを実装してみました。
![2019071417064800-B4374FDA41BFF09D976C1FEA83EFB230.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193519/e936f416-f265-65fc-2de9-3533b31d93e9.jpeg)
サンプルを起動すると例の赤い戦士君が居ますので、左の上下左右ボタンでマップ中を動かしてください。戦士君は中央に固定で向きを変えるだけで、周りのマップがスクロールしていきます。障害物を進めない判定もアリ。Bボタンで終了です。

プログラム最初のWとHの値を変えると、マップの広さが変わるので試してみてくださいね。
![2019071417072500-B4374FDA41BFF09D976C1FEA83EFB230.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193519/a8e1a3f7-51c0-6b45-2fcd-9d13af338a00.jpeg)
THOME を使っていない、歩ける場所が1種類しかない、かなり手抜きなプログラムなんですけど。でもまあ、こんな短いプログラムで、ソコソコ動くサンプルが作れるのは、プチコンならではという気がしますね。

# というわけで

プチコン4 でいろいろ遊びつつ、プチコン3号からの変更点を中心に試し、まとめています。まとめることで自分の中で整理でき、より理解が深まった気がします。

今後もいろいろ試しつつ、こうやってまとめてみたいと思います。

ではでは！
TensorFlow,PyTorchの比較

#TensorFlow,PyTorchの比較
普段はTensorFlowを用いて機械学習、Deep Learningの勉強をしているのですが、今回は現在流行っているPyTorchを用いてプログラムの作成を行ったのでTensorFlowとPyTorchの比較を行ってみました。

#TensorFlowとは？
TensorFlowとはGoogle社が2017年にリリースしたオープンソースの機械学習用ライブラリです。

#PyTorchとは？
PyTorchはfacebook社の人工知能研究グループが開発したオープンソースの機械学習用ライブラリです。

#今回使用したPCのスペック
今回プログラムを動かす際に使用したPCのスペックは以下の通りです。
・Mac book pro2017
・Mac OS Mojave 
・プロセッサ　2.3 GHz Intel Core i5
・メモリ　8GB

#学習データ
今回は一次元のデータを用いて識別を行うデータで検証を行った。また、今回は2000回学習を行なった。


#TensorFlowでの結果
TensorFlowを用いた場合の結果は以下のようになった。
正解率は70%程度であり、学習時間は354秒程度となった。
<img width="167" alt="スクリーンショット 2019-07-14 18.08.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423140/c8725b7e-5bbf-19d5-174c-86e76a798f2f.png">

#PyTorchでの結果
PyTorchを用いた場合の結果は以下のようになった。
正解率は70%程度であり、学習時間は3.5秒程度となった。
<img width="167" alt="スクリーンショット 2019-07-14 18.13.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423140/a6156cae-493b-c533-210c-57009ac4bf82.png">

#使用してみた感想
TensorFlow,PyTorch共に結果としては正解率が70%程度であまり精度に違いはなかった。
しかし、学習にかかった時間はTensorFlowに比べPyTorchは100倍も早い結果となった。
使用した感覚としてはPyTorchは初期値に依存する傾向が強いように感じた。
TensorFlowは学習している最中にメモリが溜まるため学習が進むにつれて1回学習するのにかかる時間が長くなる。

#最後に
今回はあくまでもノートパソコンで計算を回した結果であり、GPUやTPUを用いて計算を行えば結果は変わるかもしれません。
今後TPUを用いて計算を回す予定があるのでその時にもう一度比較を行いたいと考えています。
【iOS対応】Vue.jsで背景固定のモーダルを作る

モーダルを作る際に面倒なのが、スクロールしたときの背景の固定。
別に背景が動いても直接問題が起きることはないのですが、やっぱり気にはなります。ユーザーにもこのサービス大丈夫かな...と余計な不安感を与えることにもなりますし。

ただ、この背景固定、一筋縄ではいかないのが面倒なところ。とくにiOSは他のデバイスと異なる挙動を示し、AndroidやWebではちゃんと固定されるのにiOSだけ上手くいかない...と悩んでいる人も多いと思います。


何か解決方法はないかと探していたところ、非常に便利なライブラリを見つけたので、それで対応することにしました。

## Body Scroll Lockを使う

名前の通り、機能を有効にすることで背景のスクロールを無効にできるライブラリです。便利なのは、ページ全てをスクロール無効にするのではなく、指定したDOM内部だけはスクロールできるように設定できること。
モーダル内部はスクロールさせたい！なんてケースにも対応可能ということです。

githubでのスターも1400個以上ついていますし、ある程度安心して導入できるのもメリットですね。公式サイトはこちら↓

[Body Scroll Lock](https://github.com/willmcpo/body-scroll-lock)

### Body Scroll Lockの使い方

何はともあれ、まずはnpm/yarnでinstallしましょう。

```
npm install body-scroll-lock
```

次に、背景固定を行いたいページ（コンポーネント）でimportします。

```
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
```

名前からしてそのままですが、背景を固定したい場合はdisableBodyScrollを、解除したい場合はenableBodyScrollを使えばOKです。

たとえば、モーダルコンポーネントに使うならこんな感じ。

```javascript:ModalLayout.vue
<template>
  <div class="modal-layer">
    <div class="modal">
      <slot />
    </div>
  </div>
</template>

<script>
import {
  disableBodyScroll,
  enableBodyScroll,
  clearAllBodyScrollLocks
} from 'body-scroll-lock';

export default {
  mounted() {
    const modal = document.querySelector('.modal')
    disableBodyScroll(modal)
  },

  beforeDestory() {
    clearAllBodyScrollLocks()
  }
}
</script>
```

ModalLayoutは親コンポーネントからv-ifで呼ばれる想定のコンポーネントです。
v-ifがtrueになったときにmounted()が走ることと、falseになるとbeforeDestoryが走ることを利用して、モーダルが表示されている場合にのみ背景が固定されるようにしています。

## まとめ

非常にシンプルで使いやすいので、背景固定に困っているケースで便利です。モーダル系ライブラリとも簡単に組み合わせられそうなのも良さそうですね。
割り当てられたホームページ領域がサブディレクトリだった場合に HUGO を利用するためにリンクの参照先を相対パスにする。

Hugo で吐き出した静的ファイルは標準状態では "/" から始まる絶対パスになっているので、サブディレクトリで運用しようと思うと非参照が多発し使い物にならない。

そんな場合は、config.toml に以下を追加すれば OK。

```toml
relativeURLS = true
canonifyurls = true
```
- ref. [URL Management \| Hugo](https://gohugo.io/content-management/urls/)
Raspberry Piで Laravel5.8 PHP7.3 nginx1.14の環境構築

Raspberry Pi 3 Model B+ を手にいれたもの、特に工作したいこともなかったので普通にサーバ用途に。
Laravelで作成したいアプリケーションがあったため環境構築。
とりあえずインストールまでの手順です。

ラズパイということでApacheでなく軽量なnginxにしました。
あまり効率的でない手順かもしれないですがご勘弁を。

[前提]
Raspberry Piセットアップ済み (OSはRaspbian)
あとはvimをインストール、デフォルトエディタ変更とbashrcを自分用に修正したくらいです

### とりあえずアップデート
```
rootユーザからの作業
$ sudo su -

アップデート
# apt-get update
```

## nginxインストール・設定
```
インストール
# apt-get install nginx

確認
# nginx -v

起動、自動起動設定
##systemctl start nginx
# systemctl enable nginx
```
ブラウザで表示確認。
http://Raspberry PiのIPアドレス

Welcomeされる。
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/02fc3146-02ef-f44f-60fd-2f46b53f34eb.png)


## php-fpmインストール・設定
```
インストール
# apt-get install php7.3-fpm

nginx + php設定
# vi /etc/nginx/sites-available/default

※44行目あたり (index.php追加)
[変更前]
# Add index.php to the list if you are using php
index index.html index.htm index.ngin-debian.html;
[変更後]
# Add index.php to the list if you are using php
index index.html index.htm index.ngin-debian.html index.php;

※56から63行目のコメントアウト削除 (62行目のfastcgi_passの行のみコメントのまま)
location ~ \.php$ {
…
fastcgi_pass unix:/run/php/php7.3-fpm.sock;
…
# fastcgi_pass 127.0.0.1:9000;
}

PHP設定
# vi /etc/php/7.1/fpm/php.ini
※775行目
[変更前]
;cgi.fix_pathingo=1
[変更後]
cgi.fix_pathingo=0

再起動
# systemctl restart php7.3-fpm
# systemctl enable php7.3-fpm
# systemctl restart nginx

PHP確認用
# echo '<?php phpinfo(); ?>' > /var/www/html/test.php
```

ブラウザで表示確認。
http://Raspberry PiのIPアドレス/test.php

phpinfo表示されたらOK。「あ」と表示されなくても大丈夫。
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/3ddad9f1-99c3-8e42-b8d0-09d77c4fb95b.png)

## Mariaインストール・設定
```
インストール
# apt-get install php7.3-mysql
# apt-get install mariadb-server

確認
# mysqld -V
# mysql -V

設定
# mysql_secure_installation
※rootパスワード設定、他は基本 Y+Enter

管理者権限でログインできるよう設定
# mysql -u root
> use mysql;
> update user set plugin='' where user='root';
> flush privileges;
> quit;

先ほど設定したパスワードでログイン確認
# mysql -uroot -p

自動起動しておく
systemctl enable mariadb
```

## Laravel環境セットアップ
```
Composerでやります
# apt-get install composer

確認
# composer -V

ディレクトリ作成
# mkdir /var/www/laravel

↓自分だけの開発環境のため安易に済ませている。
# chmod 777 /var/www/laravel

project作成に必要
# apt-get install php-xml

piユーザに戻る(もしくはLaravel実行ユーザ)
# exit

project作成(ちょっと時間かかる)
$ composer create-project laravel/laravel /var/www/laravel

Laravelバージョン確認
$ cd /var/www/laravel/
$ php artisan --version

rootに戻る
$ sudo su - 

DocumentRoot設定を書き換え
# vi /etc/nginx/sites-available/default
※41行目以下に変種

#       root /var/www/html;
        root /var/www/laravel/public;

nginx再起動
# systemctl restart nginx

failed to open stream対策
↓自分だけの開発環境のため安易に済ませている。
# chown -R www-data:www-data /var/www/laravel/storage
# chmod -R 757 /var/www/laravel/storage
```

ブラウザ確認
ブラウザで表示確認。
http://Raspberry PiのIPアドレス

白いのが表示されたらOK
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/3dcec706-e431-1c87-6adb-7c6c58c5d43d.png)
さくらVPS ufwで80番ポートを解放しているのに、外部から接続出来ない。

お題の通り、さくらVPSにubuntu,nginx導入して、ufwにport80追加。
その後、外部からアクセスしようとした所出来なかったのでメモします。:ok_woman_tone1:


##結論から言うとufwとiptablesを併用しない。

ufwでせっせとポートを追加していたのですが、さくらVPSではデフォルトのファイアウォールがiptablesを使用しているので、それ以外のを使う場合、iptablesを停止しないといけないらしい。
今回の場合は、ufwを採用しているので使わないiptablesファイルを削除する。
削除ファイルは下記を参考に2ファイル。

参考:
>※ さくらのVPSデフォルト設定であるiptables以外のファイアウォールをご利用になりたい場合は、再起動時に設定が２重に反映されてしまう可能性がありますため、/etc/network/if-pre-up.d/iptables  の削除が必要となります。あわせて、iptablesのルール情報である /etc/iptables/iptables.rules も不要となりますため削除いただくこと推奨いたします。

[さくらのVPS、スタートアップスクリプト「Ubuntu ufw」を更新しました](https://vps-news.sakura.ad.jp/2017/12/19/ubuntu-ufw/)

削除後、再起動して確認すると無事にアクセス出来ました。
反対にipconfigを利用する時はufwを無効化してあげれば良いですね。

#まとめ

普段の業務ではインフラ系は中々触らないので解決に時間がかかりましたが、
まずどこが問題なのか、問題では無いのかの切り分けぐらいはさっと行いたい。
今回の場合で言うと以下の切り分けでした。
1. nginxは起動出来ている。
→サーバー内でcurl→レスポンス確認
2. 外部アクセス時nginxのlogに何も記入されてない
→そもそも、nginxにたどり着けていない、そこの手前で問題になっている。
Leetcode #560: Subarray Sum Equals K

```swift
func subarraySum(_ nums: [Int], _ k: Int) -> Int {
    var dict = [Int: Int]()
    var answer = 0
    var sum = 0
    dict[0] = 1
    for i in stride(from: 0, to: nums.count, by: 1) {
        sum += nums[i]
        if let value = dict[sum-k] {
            answer += value
        }
        if let value = dict[sum] {
            dict[sum] = value + 1
        } else {
            dict[sum] = 1
        }
    }
    return answer
}
```
SCMとは？

# Git, Subversionのようなものを指すSCMとはなんの略？
- **software configuration management** の略
- **source code management** の略

どちらも間違いではないが、前者の方が広義らしい。

「SCMとは」でググると「**supply chain management**」の説明ばかり出てきて上記の情報になかなかたどり着けずムカついたので、記念カキコ。

# 略語のデジャブ

仕様書に「csv形式」と書いてあったのに、タブ区切だった時に、「**comma-separated values** じゃないじゃん！」と思ったが、**character-separated values** という解釈があるのを知って衝撃を受けたことを思い出した。

タブ区切りはtsvって呼ぼうぜ
新人エンジニアへ伝えたいこと

## はじめに
なぜこの記事を書こうと思ったの？と疑問に思う方もいると思うのですが、
私が数年働いてきた中で、
**エンジニア=技術者として頑張らなければならない**
というバイアスが蔓延っているように思えたからです。

このバイアスを否定したいわけではありません。
パイオニアが知識をインプット/アウトプットすることで私のようなエンジニアの端くれも扱えるようになっていますし、
そういった方々には感謝の思いでいっぱいです。

ただし全員がそうなれるかと言われたらNOですし、
全員がそこを目指しているかと言われたらNOのはずです。

**これからエンジニアとして働いていく新卒さんや未経験中途の方に向けて**
**「そんなにプレッシャーに感じなくてもいいんだよ」**
**「焦らなくてもいいんだよ」**
**というメッセージを発信したかったのでつらつらと書いてみます。**

### 筆者の経歴
- エンジニア歴：開発3年目
- 開発言語：Java、JavaScript、JSP(HTML)、シェルスクリプト等
    - FW：SpringBoot、MyBatis、Thymeleaf等
- 担当領域：FE、BE、バッチ
- 担当フェーズ：基本設計、詳細設計、製造、UT、IT、ST

## 現場で学べばいい、無理に勉強しなくてもいい
先ほどのバイアスに焦りを感じて
**「早く一人前になれるように勉強しなきゃ…」**
と意気込む人は沢山いると思います。
その心意気は大切ですし、意識していないと年々薄れていってしまうものです。
是非忘れないでください。

その反面、心の足枷になる場合もあります。
ここでお伝えしたいのは**急ぐことと無理をすることは違う**ということです。

例えばAさんとBさんというエンジニアがいたとします。
休日の過ごし方を見てみましょう。
> Aさん「興味のある言語があるから勉強してみよう！」
> Bさん「リフレッシュしたい！遊びまくろう！」

エンジニアとしてあるべき姿はどちらか。
**私はどちらも正しいと思います。**
もしかしたらAさんは、ストレス発散が苦手で2年後に体調を崩して休職するかもしれません。
もしかしたらBさんは、ある日を境に自主的に勉強を始めていくかもしれません。

人生何があるか分かりません。
普段は勉強したいと思える人でも「今日はしたくないな…」と思う日が必ずあります。
そういう時は休みましょう。
我々はエンジニアである以前に人間です。
無理をして精神的に病んでしまったり、体調を崩してしまっては元も子もないです。

私の考え方では、
**現場で使用している言語、ツール、アーキテクチャなどに興味を持つこと**
の方が重要です。

新人エンジニアとしては知らないことを知れるし、現場知識が増えることにより働きやすくなります。
何より業務時間内で基本的に済ませることができるため、余計な負担がかからないです。
現場からしても現場知識を持った人が増えることはプラスになりますし、チーム内に頼もしい人材が増えることになります。

**初めの内は何をどうやって学んだら分からないと思います。**
**まずは業務で触れられる部分から知識を深めていければ十分です。**
**「現場で働きながら学ぶ」という意識を持ってみましょう。**

## 人と比べない、必ず分かる時が来る
研修やOJTをしていく中で、どうしても理解度には差が出てきます。
**「〇〇さんは理解できているのに、なぜ自分は分からないのだろう」**
**「皆ができているのに、なぜ自分はできないのだろう」**
こういう考えに誰もが陥ります。私自身もそのタイプで、隣の芝生は青く見えるものです。

この考えが続くと、モチベーションが低下し理解を阻害します。
更には「自分はできないやつ」と自己肯定感が低下し、何に対しても興味がなくなります。
能動的に知識を求めなくなります。
人によっては**「なんで俺にだけは教えてくれないんだ」**と他責になるケースもあります。

**「人と比べること」にメリットや得られるものがあるでしょうか。**
**誰かに言われているわけではなく、全て自分の頭の中で進んでいることです。**
**自分で自分を苦しめているだけだと気付けるはずです。**

こういった話をいろんなエンジニアの方としますが、
**「続けていくとある日突然分かった」**
という意見が多いです。
私もその一人ではあるので、初めのうちは自分を評価しないようにしましょう。（難しいと思いますが）
**続けていけば必ず分かる時が来ます。**
**その時までは根気よく向き合い続けましょう。**

また人によって理解の方法は異なります。
**認知特性**[^1]というものがありますので、困っている方は[参考](https://jibun-compass.com/nintitokusei)にしてみてください。

## 聞くは一時の恥、聞かぬは一生の恥
初心者とは言えど「分からない、教えてほしい」と聞くことに抵抗がある場合があると思います。
**「こんなレベルのことを聞いたら怒られるんじゃないか」**
**「馬鹿だと思われるんじゃないか」**
**「分からないという事が恥ずかしい」**
…大抵の場合は取り越し苦労やくだらないプライドであることをお伝えしておきます。

今あなたの周りにいる先輩たちも、かつては何も分からなかったはずです。
生まれた瞬間から開発できる人は一人としていませんからね。
そしてその先輩たちは**「分からないことは何でも聞いてね」**と言うはずです。
なぜなら**その先輩たちも誰かに質問をして教えてもらった過去を経ているから**です。
成長には質問をすることが早いと知っているのです。

今あなたの周りに、仕事のできない中年エンジニアがいると思います。
彼らにはプライドや立場がある上に、
**「分からない」という事実を知られることは恥ずかしい**ために聞くことができません。

**どちらの道を歩むかはあなた次第です。**
**若いうちに聞けることを聞いておかないと、将来困るのはあなた自身です。**
**知らないこと、聞くことは恥ずかしいことではなく、寧ろ先輩エンジニアたちはあなたたちができるとは思っていません。**

現時点で気を遣うべきことは**質問の仕方**です。

- 断りを入れてから質問する。
    - 「今質問してもよろしいでしょうか」等
- 簡潔に質問する。
    - 質問しているあなた、回答する先輩、の二人の作業を止めています
    - 「何が分からない」「何をした」は最低限伝えましょう

## 最後に
最後までお読みいただきありがとうございました。

エンジニアというのは技術職、専門職ですが、エンジニアになる理由は多様化しているのかな？と感じています。
昔は「こんなものが作りたい」「世の中を便利にしたい」という思いが多かったと推測しますが、
現在では「長く働きたい」「無くならない仕事だと思うから」という理由が多いと感じています。
どちらも理由でも全く構いません。

売り手市場とも相まって、色んなモチベーションをもって働いている人が増えました。
それに適用していくことも課題の一つなんだろうな、と思っています。

今後どうなっていくか楽しみですね！

[^1]: 認知特性とは、外界からの情報を頭の中で理解したり、整理したり、記憶したり、表現したりする方法のことを指します。
【VScode】vim拡張機能でノーマルモードに戻る時に合わせて英数入力に切り替える

VScodeの[vimの拡張機能](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)を追加した状態で日本語のテキストを入力した後、ノーマルモードに戻った時に明示的に英数入力に切り替える操作が面倒だったので、
自動でに切り替える方法がないか調べたら[ドキュメント](https://github.com/VSCodeVim/Vim#input-method)に設定方法の記載が見つかりました。
以下はMac向けですが他OSの設定方法もドキュメントに記載があります。


## im-selectの準備
ドキュメント記載の方法では[im-select](https://github.com/daipeihust/im-select)というコマンドラインツールを使います。


### インストール
以下のコマンドでインストールを行います。

```shell

curl -Ls https://raw.githubusercontent.com/daipeihust/im-select/master/install_mac.sh | sh
```

インストール後コマンドが実行できる状態になっていればOKです。

```shell

$ curl -Ls https://raw.githubusercontent.com/daipeihust/im-select/master/install_mac.sh | sh
* Downloading im-select...
* im-select is installed!

$ which im-select
/usr/local/bin/im-select
```

### im-selectの使い方、動作確認

#### 現在の入力状態(imkey)の確認
インストール後`im-select`コマンドを実行すると現在の入力状態を表すパラメータ`(imkey)`が取得できます。
自分のgoogle日本語入力を使っている環境では以下の値が表示されました。このパラメータは各自の環境で異なったものになると思います。

```
# 英数入力状態の実行結果
$ im-select
com.google.inputmethod.Japanese.Roman

# 日本語入力状態の実行結果
$ im-select
com.google.inputmethod.Japanese.base
```

#### 指定のimkeyへの切り替え
先程のパラメータを以下のように`im-select`に指定してあげることで入力状態の切り替えを行うことができます。
先程取得したパラメータを指定して入力状態の切り替えができれば`im-select`側の準備は完了です。

```
# 英数入力へ切り替え
im-select com.google.inputmethod.Japanese.Roman

# 日本語入力へ切り替え
im-select com.google.inputmethod.Japanese.base
```

## vscode側の切り替え設定
vim拡張機能には入力切り替え用に以下の設定項目があります。
それぞれ設定してあげることで`im-select`コマンドの切り替えが実行され、ノーマルモードに切り替えた際に合わせて英数入力へ切り替わるようになります。

|設定値 |説明 |
|--------|------------|
|vim.autoSwitchInputMethod.enable|インサートモードを抜けた際のコマンド実行の有効/無効 |
|vim.autoSwitchInputMethod.defaultIM|デフォルト(ノーマルモード時)の入力状態を表すパラメータ|
|vim.autoSwitchInputMethod.obtainIMCmd|現在の入力状態のパラメータを取得するコマンドのフルパス|
|vim.autoSwitchInputMethod.switchIMCmd|入力状態の切り替えを行うコマンドのフルパス。 {im}部分には上記のデフォルト入力状態のパラメータが自動的に置換されて入力されます|

今回の場合は以下のような設定値になります。

```json

"vim.autoSwitchInputMethod.enable": true,
"vim.autoSwitchInputMethod.defaultIM": "com.google.inputmethod.Japanese.Roman",
"vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
"vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}"
```

設定画面では以下のような感じになると思います。

<img width="554" alt="vscode-vim-setting.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430214/5a6567cc-12e8-8ad3-a3f1-3c800407d063.png">

この設定を反映後、vimのインサートモードからノーマルモードの切り替えのタイミングで入力状態も英数入力へ切り替わっていれば設定完了です。
vueをtypescriptで使っていてCombinedVueInstanceのエラーが出た時の解決方法

↓こんなエラーが出た時の対応策
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5825/277f291f-c9d8-475a-87bd-f4d0cb510d9b.png)

package.jsonは以下の通り

```
  "devDependencies": {
    "@types/dateformat": "^3.0.0",
    "@vue/cli-plugin-typescript": "^3.9.0",
    "@vue/cli-service": "^3.9.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "stats-webpack-plugin": "^0.7.0",
    "typescript": "^3.5.3",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10",
    "webpack-bundle-analyzer": "^3.3.2"
  }
```

解決策は、functionに戻り値の型を書く。anyでも良い。

before 

```
  computed: {
    listUlClass: function (){
      return "";
    },
    listLIClass: function () {
      return {};
    },
}
```

after

```
  computed: {
    listUlClass: function ():string{
      return "";
    },
    listLIClass: function () :any{
      return {};
    },
}
```

アロー関数式でない普通のfunctionで戻り値の型を書く発想が無かった・・・。vue3では全部アローで書けるといいな
WordPress環境立ち上げるまでの最小ステップ

# はじめに
過去に職場の環境として、業務上のナレッジマネジメントで使用するWikiとしてWordPressを使用していたことから、個人的にもWordPress環境の構築の勉強しようと思いたち、とりあえず何も投稿していないWordPressを立ち上げるところまで出来たので備忘録として投稿。

# 環境
* macOS Mojave 10.14.5
* HomeBrewインストール済み
* Dockerを過去の学習でインストール済み

# HomeBrew install(導入済みなら不要)
ここを参照。
https://brew.sh/index_ja

# Docker install(導入済みなら不要)
この記事を参考にした。
https://qiita.com/nemui_/items/ed753f6b2eb9960845f7
けど以下だけでいけたような気がする。(遠い記憶)
`$ brew cask install docker`

# ここから本題
Dockerを起動できてることは前提としておきます。
`$ docker version`なり`$ docker ps`がエラーにならなければOK。

`$ docker pull mysql:5.7.26`
しばらく待つ。
`$ docker pull wordpress`
またしばらく待つ。
両方完了したら

```
$ docker run --name test-mysql -e MYSQL_ROOT_PASSWORD=test-pw -d mysql
$ docker run --name test-wordpress --link test-mysql:mysql -d -p 8080:80 wordpress
```
`$ docker ps`
でtest-mysqlとtest-wordpressが立ち上がっていることが確認できたら
`$ open http://localhost:8080/`
を実行するとWordPressの言語設定画面が出てくるので言語を選択。
これでダッシュボードが表示されたら最低限の環境の立ち上げ完了。

# 終わりに
brewの使い方とかdockerコマンドの意味とかは適宜確認してください。
コンテナ名とかPortとかは適宜変えたら良いです。
2019/7/14時点ではMySQLが8系だとWordPressが対応しておらずエラーが表示されるので、5系の最新を取ってくる必要があります。
面倒くさがってversion指定しなかったらローカルホストを表示した際にエラーが出てきて少しハマりました。
今回WordPress環境立ち上げようとググったりすると結構な確率でMAMPやXAMPが出てきたりして、バージョン管理が少々面倒だったり、新しくインストールして容量食わせたくなかったところから今回Docker使って立ち上げる方法を選択しました。(環境で書いたように元々Dockerはインストールしてたので)
そもそも自分がアプリ屋さんなのと、今はナレッジマネジメントでWordPressを業務で使っていないので、どんな立ち上げ方が主流なのかは知りませんが、MAMPやXAMP用意するよりDocker使えうほうが楽な気がしないでもない。
ドキュメントもないナレッジもないチームに捧ぐVue.js社内勉強会を開催した件

# 【概要】

開発・運用に携わるエンジニアがドキュメントやテストコードも残さず退職した結果、ドキュメントのないサービスの開発・運用にアサインされた経験がある方も多いのではないでしょうか。私の所属するチームの場合はドキュメントもナレッジもないVue.jsの案件が回ってきました。
チームの概要は以下の通りです。

* メンバー８人（うちマネージャー１人）
* 全員サーバーサイドエンジニア
* 普段使う言語はPHP
* 設計が分からないのか、Vue.jsが分からないのか、JSが分からないのかすら分からないレベル
* 某RPGで言うとスライムに苦戦するレベル（チーム公式表現）
* フロントエンドチームは別であり、Vue.jsのナレッジがあるエンジニアもいるが他の案件で忙しいため丸投げできない

この記事ではそんなチームのためにVue.jsの勉強会を行うまでの経緯と勉強会の内容を記載します。

# 【勉強会にこぎつけた経緯】

チームメンバーの1人が奮闘しGitLab CIによるCI/CD環境を整えるまでに持って行ってくれたため開発・運用が出来る体制はできました。そのため何個か小さい案件のデプロイは行いましたが、そもそもVue.jsのナレッジがないためレビューも機能せず、バグに対する危機察知能力もなりない、その代わりに結合テストで担保するという現状でした。
この現状はさすがにまずいとマネージャーに訴えた結果、理解をいただくことができ業務時間中に週２時間のVue.js勉強会を行う権利を獲得しました。
持ち回りで勉強会を行うことも考えたのですが勉強会が形骸化してしまう可能性が高まると判断して勉強会の裁量は自分に集約させました。
前述の通りスライムにすら苦戦するレベルであるため、せめてバブルスライムくらいには圧勝できるくらいのレベルに持っていくことを目的としました。

# 【勉強会を始めるまで】

私もVue.jsのナレッジがなかったため、まずは自身のナレッジを高めることから始めました。とりあえず入門書として [Vue.js入門 基礎から実践アプリケーション開発まで](https://www.amazon.co.jp/Vue-js%E5%85%A5%E9%96%80-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AE%9F%E8%B7%B5%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%81%BE%E3%81%A7-%E5%B7%9D%E5%8F%A3-%E5%92%8C%E4%B9%9F/dp/4297100916/ref=asc_df_4297100916/?tag=jpgo-22&linkCode=df0&hvadid=295678107984&hvpos=1o1&hvnetw=g&hvrand=13194506903661067977&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009303&hvtargid=pla-529052961492&psc=1&th=1&psc=1) を土日で読破しました。書籍を選んだ理由は単純で会社にあったからです。

次に勉強会の内容を考えました。大きく分けると講義形式とハンズオンがあると考えましたが、すでに開発案件は回ってきておりすぐにチームのナレッジをためる必要があったためハンズオンを選択しました。
ハンズオンの題材を考えていたところ、初回はProgateを使えば良いんじゃないかと考えProgateを見てみましたがVue.jsは扱っていないようでした。代わりになるサービスを探したところ [CODEPREP](https://codeprep.jp/) に行き当たりました。

# 【CODEPREPとは】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375860/ae5f1a25-024f-bb1d-787d-dd2bca62fd00.png)

CODEPREPとはProgateのようにプログラミング言語を修学できるWebサービスで、コードの一部が虫食いになっているため主に予約語を埋めていくことにより修学ができるサービスです。
ドキュメントとエディタ、実行画面が一体化しているため気軽に修学ができます。私が考えるCODEPREPのメリット・デメリットは以下の通りです。

## - メリット

* 開発環境を整えることなく修学ができる
* ドキュメントを読めば問題がすぐに理解できるため初心者にはオススメ
* 無料ででき、また選択できる言語・フレームワークも豊富

## - デメリット

* 広く扱っている代わりに浅いため深く理解はできない
* 穴埋めのため何となくでも正答できてしまう

# 【勉強会当日】

想定していた勉強会当日の流れは以下の通りです。

* CODEPREPの「はじめてのVue.js」を修学する(1時間)
* Todoリストのコードを写経する(15分)
* 自分が課題を用意したTodoリストの改修を行う(45分)

## - CODEPREPの「はじめてのVue.js」を修学する(1時間)

前述の通りCODEPREPの修学を行いました。ただしデメリットにも記載した通り、CODEPREPだけでは浅いため深く理解することが出来ないため都度Vue.jsの公式ドキュメントを読むようにしました。
1時間を想定していたのですが、実際には１時間２０分程度かかってしまいました。

## - Todoリストのコードを写経する(15分)

「はじめてのVue.js」では最終的にTodoリストを作るのですが、穴埋めで作っていくため出来上がったコードを写経するつもりでした。
しかし、CODEPREPの修学で時間をオーバーしてしまっていたため写経は各自の任意としてコードを共有しました。

## - 自分が課題を用意したTodoリストの改修を行う(45分)

CODEPREPおよび写経だけでは自身で考えるといった過程が少ないため課題を３問用意して解かせてみました。用意した課題は以下の３つです。

* Todoリストの件数を表示する
* 「〇〇を追加しました」、「〇〇を削除しました」といったTodoリストの操作履歴を表示する
* 新しく追加したTodoにはNEW！！と表示する

解かせてみた結果として１問目は全員解答出来ましたが、２問目以降は時間が足りませんでした。また私のミスとして２問目より３問目の方が簡単であったため、順番を入れ替えればもう少し解けていたと反省しました。

# 【勉強会の所感と今後】

初回の勉強会の内容としてCODEPREPを採用し、またデメリットである浅い理解を補うために公式ドキュメントを読むようにしたのは以下の点で良かったと思います。

* 題材を用意してくれているため自分の負荷が少ない
* 勉強会がスムーズに進む

今後はVue.jsのふりかえりと時間が足りず解けなかった課題の再挑戦を行ったのちに本格的にTodoリストを作っていこうかと考えています。

もし自分と同じような境遇にいる方は参考にしていただけると幸いです。
ノートPCのwifiでIEでエラー コード: INET_E_DOWNLOAD_FAILURE、chromeでError code 126: ERR_SSL_BAD_RECORD_MAC_ALERT

# 結論

Killer Contorol Center の 設定の Advanced Stream Detectをオフにする
![kccasd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128663/932c670f-bef5-a552-e223-5a4631ae2475.png)


# 事象

先日8年ぶりに新しく買ったノートPCでwifiに繋げたら、普通のサイトは表示されるのに、インターネットの一部が何か繋がらない。
awsのコンソールとか、gmailとか認証が必要な画面が何か繋がらない
下記のエラーコードが表示されておかしい

- chromeでERR_SSL_BAD_RECORD_MAC_ALERT
- IEで INET_E_DOWNLOAD_FAILURE

エラーコードで検索しても有用な情報が日本語ではさっぱりみつからない
有線LANなら何も問題なく繋がるのに！！なんで！？
と2ヶ月間ほど困ってましたが、ようやく解決しました



# 参考

https://www.reddit.com/r/techsupport/comments/aav3qe/msi_gs65_wifi_issues_inet_e_download_failure_err/

>Yetzel1 point·2 months ago
If anyone is coming to this post still looking for answers: Go into your Killer Control Center -> Settings -> disable Advanced Stream Detect. That should do it.


Thank you! Yetzel1
デバックツール(pry-rails)について　binding.pryの使い方

#はじめに
##デバックツールとは
一般的にデバックツールとはプログラムの作業を行う際に、バグの有無、エラーの原因箇所、コード上の問題がないかなどを確認するために用いるツールのことをいいます。

#pry-rails
##pry-railsとは
Rails用に使われるデバックツールのことをいい、Gemの一種であるため、使用をする際は以下の様にGemfileに追加する必要があります。

~~~ruby:Gemfile
gem 'pry-rails'
~~~

Gemの追加を行ったため、ターミナルで以下のようにbundle installを忘れずに行いましょう。

~~~
$ bundle install
~~~

これでpry-railsが使えるようになります。

##binding.pryとは
pry-railsを導入したことでpry-railsの機能が使えるようになりました。pry-railsの機能の一つにbinding.pryがあります。

binding.pryはコード上にbinding.pryを記述することで
binding.pryの書かれている箇所までの処理を実行し、
binding.pryの書かれている箇所で処理を一時的に止めることができます。

###使用方法
以下の様に、処理の確認をしたいコードの箇所に
binding.pryを記述します。

~~~Ruby:tweets_controller.rb
class TweetsController < ApplicationController
    def index
      @tweets = Tweet.all
      binding.pry
    end
end
~~~

記述をし、実行を行うとターミナルのローカルサーバー画面が以下のような表示になり、
binding.pryの記述している箇所で処理が止まります。

~~~
   3: def index
   4:   @tweets = Tweet.all
=> 5:   binding.pry
   6: end

  [1] pry(#<TweetsController>)>
~~~

この状態ではコンソールと似た操作ができるので
@tweets.find(6)のようなApplicationRecordメソッドを使い、binding.pryが書かれている箇所までの処理の値を確認することができます。


処理停止状態を終了させるには以下のようにexitを入力することで停止状態が終了し、binding.pry以降の処理を実行します。

~~~
  [1] pry(#<TweetsController>)>exit
~~~

ちなみにexit!を入力するとローカルサーバーも終了します。

#おわりに
以上pry-railsの説明とpry-railsでよく使うbinding.pryについてまとめました。
デバックツールはプログラミングをする上で非常にお世話になると思うので覚えておこうと思います。
Wordpressファイルアップロード時の許容サイズ変更とHTTPエラー

##はじめに
Wordpressで設定値以上のサイズのファイルをアップしたいと連絡をいただいたので設定を行いました。
その際に若干つまづいたところを備忘録も兼ねて簡単にまとめます。

とりあえずアップロードだけ行うのであればFTPやその他の手段でサーバーにアップすることもできるのですが、今回は設定を変更してほしいとのことでした。

環境は以下の通りです。
wordpress 5.2.2
php 7.3
nginx-1.15.8
##変更箇所
###php.ini
細部は公式に詳しくあります
[php.ini ディレクティブに関する説明](https://www.php.net/manual/ja/ini.core.php#ini.max-file-uploads)
まずはphp.iniの設定を変更していきます。

__ファイルアップロードの許容サイズの変更を行います。__
デフォルトから変更はしていなかったの、今回5Mとしています。
デフォルトは2M。

```
upload_max_filesize = 5M
```
__次にPOSTリクエストの許容サイズの変更をしました。__
upload_max_filesizeの変更だけでなく、忘れずにこちらも変更します。
デフォルトでは8Mになっています。

```
post_max_size = 10M
```

ここまで設定したところでWordpressの管理画面を確認したところ
アップロード画面の```最大アップロードサイズ```が5Mになっています。


試しにファイルアップロードをしてみたところ

___HTTPエラー___

さて困った、、と思い色々と試してみました。

##413 Request Entity Too Large Error
管理画面でアップロードする時に使用していたドラッグアンドドロップの
`マルチファイルアップローダー`から`ブラウザーアップローダー`に切り替えて同じファイル(2.3M)をアップしたところ
__413 Request Entity Too Large Error__と表示されました。
これでググったところnginxの設定について書かれていたのでとりあえず試してみました。
###nginx.conf
公式はこちらです
[Module ngx_http_core_module](http://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size)

__client_max_body_size__
nginxの受け付けることができる最大サイズを変更しました。
デフォルトでは1Mに設定されているのでここでは8Mにしました。

```
client_max_body_size 8M;
```
nginxをリスタートして再度アップロードを試したところ問題なくできました！

##おわりに
ググっている時に関連する内容の記事をたくさん見つけましたが、その中には上記のnginxの設定を変えても無視されたというものがありました。
OSやnginxのバージョンによって対処法が変わると思いますので注意が必要だと思います。
AWSの仮想マシンでJETSON nanoのDockerコンテナを快適にBuildしたい

#JETSON nanoのBuild時間を短縮したい

参考にさせていただくのはこちらの記事。
[Jetson 上で Docker イメージをビルドするのが辛かったので EC2 上にビルド環境を作った
](https://tech-blog.abeja.asia/entry/environment-of-building-docker-image-for-jetson)

nanoでも同じでいけるのではないか？

おそらく誰でもやっていると思いますが、勉強がてら自分でも調べながらやってみます。
AWSもAZUREも全然使っていないので練習練習。

※
一連の作業後、上の記事を書いた方が、もっと簡単にできる情報をアップされていらっしゃいました。
[64bit ARM チップを積んだ Edge device 用に Docker image をビルドする](https://qiita.com/seiro/items/64e9c06cca0c5a33c38c)
練習とかの必要がなければ、こちらを参考にするべきですね。


直前までAzureでRaspberryPiのBuildが出来ないかやってみたのですが、QEMUが安定動作するところまで持っていけなかったので、AWSに変更してUbuntu16マシン（xlarge）を使用します。

#仮想マシンはいいやつを使う
AWSのUbuntu 16マシンを選択しました。（参考にしたページで16.0.4を使用していた為）
無課金のものでできれば一番いいのですが、試したところコアが少ないとmake -j4でのBuildでマシンが固まって停止しました。
Jetson nanoでネイティブビルドした時と症状が同じだったので、なるほど・・・という感じです。
多少課金されても、「快適にBuildしたい」という今回の趣旨を優先しました。

```
sudo apt-get update

sudo apt-get upgrade

sudo apt-get install curl

curl -sSL https://get.docker.com/ | sh

sudo apt install -y apt-transport-https ca-certificates curl software-properties-common

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

sudo apt update

sudo apt install docker-ce

sudo usermod -aG docker ubuntu

docker run --rm --privileged multiarch/qemu-user-static:register
```

以上で準備完了。
Dockerfileを用意する。

```PHP:Dockerfile
FROM multiarch/ubuntu-core:arm64-xenial

RUN apt-get update && \
    apt-get install -y vim
```

buildして実行する。

```
docker build -t arm64-xenial-vim -f Dockerfile .
docker run -it --rm arm64-xenial-vim:latest bash

#sudo docker run --rm --privileged multiarch/qemu-user-static:register
```

dockerに入ったら、以下のコマンドで確認

```
uname -m
file /bin/bash
```

#重量級のBuildを試してみる

問題なさそうなので、2019/5にビルドで大変苦労した、産総研のOpenVSRAMをDockerでBuildします。
※無課金のマシンを使うと、CPUコアを複数使ったBuild(make -j4)で止まってしまったので、有償のxlargeマシンを使っています

```
git clone https://github.com/xdspacelab/openvslam
nano Dockerfile.desktop 
```
同梱のDockerfile.desktopを編集して、仮想マシンを追加します。
追加したのは先頭のみで、ubuntu:18:04は従来通り。

```php:Dockerfile.desktop
FROM multiarch/ubuntu-core:arm64-xenial
FROM ubuntu:18.04
ENV DEBIAN_FRONTEND noninteractive
<続く>
```

build実行します。
この時、make -j4でのbuildがあちらこちらに記載されていた為、貧弱なマシン構成では12%くらいまでの進捗で固まってしまい、マシンを落とすこととなりました。
十分な数のコアとメモリを用意します。（8コア32GBで実施）
手動であちこち書き換えてBuildを通すのは辛いです。

```
docker build -t openvslam-desktop -f Dockerfile.desktop . --build-arg NUM_THREADS=4
```

Jetson nanoで、通してbuildするのに2日以上、作業の手間（やり直し）などを含めて10日くらいかかったのですが、今回、Buildにかかった時間はわずかに20分でした。

あとは、これが実機に移動させて動けば良いのですが・・・

（実施中）
kaminariのページネーションを中央寄せにする

- kaminariを導入しているとビューで `pagination` メソッドを呼ぶと思いますが、その場合、自動的に `ul` 要素に `pagination` クラスが適用されます。
- `pagination` クラスのCSSを以下のようにカスタマイズすると、ページネーションを中央寄せにすることができます。

```app/assets/stylesheets/application.scss
.pagination {
  justify-content: center;
}
```
KSNCTF#2 Easy Cipherを解く

今回は
http://ksnctf.sweetduet.info/problem/2
を解きます。

![screenshot-ksnctf.sweetduet.info-2019.07.14-16_01_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262914/827d528b-ef5d-b832-7fc3-2b4f69800dca.png)

問題名見たらわかるようにEasy Cipherと書いてあるので
暗号解読だろうなって予想はできます。

問題文
>EBG KVVV vf n fvzcyr yrggre fhofgvghgvba pvcure gung ercynprf n yrggre jvgu gur yrggre KVVV yrggref nsgre vg va gur nycunorg. EBG KVVV vf na rknzcyr bs gur Pnrfne pvcure, qrirybcrq va napvrag Ebzr. Synt vf SYNTFjmtkOWFNZdjkkNH. Vafreg na haqrefpber vzzrqvngryl nsgre SYNT.

ぱっと見英語の文章がそのまま暗号化されてる感じがする。
多分シーザー暗号ですね

ABCってあったらそれを1つずらしてBCDって表示する的な
ってなったらあとはなんかそれっぽくなるまで文字をずらして行くと
13回ずらしたらなんか文字っぽく
![screenshot-cryptii.com-2019.07.14-16_07_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262914/35204688-1a1f-dd50-a492-003ee5030439.png)

>ROT XIII is a simple letter substitution cipher that replaces a letter with the letter XIII letters after it in the alphabet. ROT XIII is an example of the Caesar cipher, developed in ancient Rome. Flag is FLAG-----------. Insert an underscore immediately after FLAG.

この
Flag is FLAG???????.が答えです

FLAG_?????の形にしてgg
![screenshot-ksnctf.sweetduet.info-2019.07.14-16_28_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262914/ea7df78e-f0cc-5c77-226e-932e18808439.png)
Candy Pi Lite+ のPPP設定

この文書について
=====

Candy Lineさんの [Candy Pi Lite+](https://www.candy-line.io/%E8%A3%BD%E5%93%81%E4%B8%80%E8%A6%A7/candy-pi-lite-plus/) は、専用の接続設定ツール[candy-pi-lite-service](https://github.com/CANDY-LINE/candy-pi-lite-service)が提供されているが 、色々やりすぎ(＆ソース汚い)でわけわかんないので、単純にDebian(Raspbian)の標準的なツールでPPP接続を行ってみたメモ。


設定条件
====
ここでは、SPI-UART変換を使った接続(マニュアル上の低速通信モード)を使用する。
接続するSIMは[IIJmioのIoTサービス](https://www.iijmio.jp/mit/)のものを用いる。(IIJmioのIoTサービスは、LTEの場合はv6アドレスも降ってくる)
環境はRaspberry Pi 3B と Raspbian(buster)を使った。
Raspbianがクリーンな状態であれば、

```
sudo apt install screen ppp
```
を実行する。

DeviceTreeの設定
==================

Candy PI Lite+のボード上にあるSPI-UART変換のチップSC16IS752は、Raspberry Pi のSPI0に接続されている。

まず、candy-pi-lite-service で使っているDeviceTreeの設定をdtcでコンパイルする。

```shell
wget https://raw.githubusercontent.com/CANDY-LINE/candy-pi-lite-service/master/boot/overlays/sc16is752-spi0-ce1.dts
dtc -@ -I dts -O dtb -o /boot/overlays/sc16is752-spi0-ce1.dtbo sc16is752-spi0-ce1.dts
```

これを有効にするため、`/boot/config.txt`に

```bash
dtoverlay=sc16is752-spi0-ce1
```

を追加する。再起動すると、`/dev/ttySC1`が使用可能になる。

Baudrateの設定
=================
Candy Pi Lite+のBaudrateを設定する。
起動毎にbaudrateは115200に設定されるが、
921600まで設定可能なので、ATコマンドを使って値を設定する。
Candy Pi Lite+のモデムのモジュールは[Quictel EC21](https://www.quectel.com/product/ec21.htm) なので、
これのマニュアルを参照。

115200でUARTに接続する。

```shell
screen /dev/ttySC1 115200
```

ATコマンドでbaudrateを設定。

```
AT+IPR=921600;&W
```

一旦リブートしてから設定したBaudrateで再接続して、通信ができれば設定完了。
(`AT`と送信して`OK`が帰ってくることを確認する)


pppの設定
==============

`/etc/ppp/peers/provider`に pppdの設定を作る。candy-pi-lite-serviceでの設定(iijmio ipv4/v6併用の設定)に合わせている。(環境に応じて適宜修正する)

```shell

# /etc/ppp/peers/provider

/dev/ttySC1
921600
+ipv6
ipv6cp-accept-local
ipv6cp-accept-remote
user "mio@iij"
password "iij"
connect "/usr/sbin/chat -v -f /etc/chatscripts/quictel_ec2x"
nocrtscts
usepeerdns
noauth
noipdefault
defaultroute
ipcp-accept-local
ipcp-accept-remote
novj
novjccomp
noccp
ipcp-max-configure 30
local
lock
modem
persist
maxfail 3
nodetach
debug
ipparam provider
```

内部的に実行されるchatスクリプトを
`/etc/chatscripts/quictel_ec2x`に作成する。

```
ABORT "NO CARRIER"
ABORT "ERROR"
ABORT "NO DIALTONE"
ABORT "BUSY"
ABORT "NO ANSWER"
"" AT
OK ATH0
OK ATZ0
OK ATE0
OK AT+QCFG=\"nwscanmode\",0,1
OK AT+QCFG=\"nwscanmode\"
OK ATD*99# CONNECT ''
```

ここまで設定すると、 `pon`のコマンドで接続が行われる。


interfacesの設定
================

Debianのネットワーク設定は、`/etc/network/interfaces.d/` で行っている。

`/etc/network/interfaces.d/ppp0`を以下の内容で作成する。

```
iface ppp0 inet ppp
```

これで、`ifup ppp0`で接続が行われる。

問題
====

- `pon`, `ifup`でpppを起動するとpppの接続が完了するまでコマンドから復帰しない。
- wvdialだとなぜか接続できない。
discord.py のデバッガー ddiscord が便利

# discord.py のデバッグは少し難しい
[discord.py](https://github.com/Rapptz/discord.py) という、discord BOT を作るためのパッケージがあります。
大変使いやすくて良いのですが、非同期であるがゆえにデバッグが難しく、起動にも時間がかかるため、ちょっとしたモデレーション目的でコードを実行するのも面倒で困っていました。
そこで、デバッグを簡単にするためのツール [ddiscord](https://github.com/aiotter/ddiscord) を開発しました。

# ddiscord はこう使う
コマンド `ddiscord` を実行するとトークンを問われるので、自分のBOTのトークンを入力してください。
起動すると `discord.Client` のインスタンス `client` が使用可能な状態で REPL もどきが起動します。

```bash
$ ddiscord
 - Debugger for discord.py -
Running on Python 3.7.2. Send EOF (Ctrl-D) to exit.
Logged in as YourBot#0000 (012345678901234567)
You can refer to your Client instance as `client` variable. i.e. client.guilds

>>> len(client.guilds)
1
>>> client.user.bot
True
>>> await client.guilds[0].create_text_channel('test')
<TextChannel id=012345678901234567 name='test' position=1>
>>>
```

見ての通り discord.py の簡単なデバッグや、またコマンドによるサーバーの管理を行うことができます。

# インストール方法
PyPIに登録してありますので、`pip install` できます。

```bash
$ python3 -m pip install ddiscord
```

# Q and A
## 起動時に毎回トークンを入力するのがめんどくさい
カレントディレクトリに `token` というテキストファイルがあれば、ddiscord はそのファイルの中身をトークンとして認識します。
また、環境変数 `DISCORD_TOKEN` があれば、それをトークンとして認識します。
またトークンをコマンド引数として渡すこともできますので、複数のトークンを別々のエイリアスに登録しておくのも便利かと思います。
その他の起動方法は [GitHub](https://github.com/aiotter/ddiscord#how-to-start-ddiscord) に書いてあります。

## for文とか入力できないの？
~~今はまだ複数行の入力を受け付けません。方法を見つけたらそのうち対応したいですね……。
もし実現するためのアイデアをお持ちでしたらコメントやPRをいただけると助かります！~~
早速ですがアドバイスを頂いて、複数行に渡るコードをサポートしました！

## Ctrl-C で終了しようとしたらなんかエラーめっちゃ出たんだけど
既知のバグです。EOF を送信すればエラーなしに正常終了してくれます。Windows では `Ctrl-Z`、Linux では `Ctrl-D` です。
原因が掴めず困っているので、こちらもアドバイスありましたらぜひおねがいします。
表示高速化 スマホ画像をpictureのsrcsetで切り替える（2019年7月）

 レスポンシブ対応でスマホ用の画像を軽量化するため切り替えたい。
スマホとPCで画角を変更したい🏙

CSSで切り替える方法は運用更新が手間ですし、
SPAやWordPressでは、HTML側で画像を切り替えが前提です😒

IE11対応だからとスルーしてましたが、
HTML5のpictureで切り替え、IEへの対応方法を調べたのでご紹介します🙂

#srcsetブラウザ対応状況（2019年7月）

- 対応ブラウザ Edge、Chrome、Firefox、Safari 最新版に対応
- IEに対応していない  
Can I use... Support tables for HTML5, CSS3, etc  
https://caniuse.com/#feat=srcset

``` HTML:HTML
<picture>
  <source srcset="/media/img/hoge_sp.png" media="(max-width: 979px)">
  <img src="/media/img/hoge.png" srcset="/media/img/hoge.png 1x,/media/img/hoge@2x.png 2x" alt="altが入ります">
</picture>
```



#ポリフィル「picturefill.js」でIE対応

CDNで読み込むか、JavaScriptをダウンロードしてpicturefill.jsを読み込みます。

```HTML:HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>
```

HTML側で読み込み画像を指定できる srcset。
メリットが大きいので、仕様を理解して使っていきます〜。


#参考URL

Picturefill
http://scottjehl.github.io/picturefill/

HTML 5.1のsrcset・sizes属性とpicture要素の使い方 - レスポンシブイメージで画像表示を最適化 - ICS MEDIA
https://ics.media/entry/13324/

レスポンシブイメージのポリフィル「Picturefill.js」でブレイクポイントによって画像を切り替える ｜ Tips Note by TAM
https://www.tam-tam.co.jp/tipsnote/javascript/post13513.html
Lombok活用法(JUnitを中心に説明)

# 概要
[Lombok](https://projectlombok.org/)の基礎については、すでにたくさんの説明ページがあるので、Lombokの活用方法について主にJUnitを中心に記載していく.

## 記載対象のアノテーション
1. `@EqualsHashcode`
2. `@ToString`
3. `@Data`の功罪

# `@EqualsHashCode`について
このアノテーションを付与すると、`boolean:equals(Object)` と `int hashCode()`が自動生成される。 
どちらもObjectクラスのメソッドのオーバーライドとなる.

`equals`で作成されるコードは、ざっくりいうと配下のフィールドをすべて比較してすべて同一であったらtrueを返却する.

<details><summary>細かく書くと</summary>
以下順に精査を行う
1.  引数のNullチェック
2.  引数が同じクラスで作成されたインスタンスか?
    3.  (この精査は別途`protected boolean canEqual(Object other)`というメソッドが作成されるので、継承先でoverride可能)
3.  フィールドがすべて同じか？
</details>

## JUnitでの用途
`@EqualsAndHashCode`を実装すると、JUnitを行う際に、フィールドについて精査を行ってくれるので作成インスタンス自体に精査を行えば事足りる

(その後フィールドの増減が発生した際にも`equals(Object)`書き換わるので精査し忘れを防ぐことができる)

## EqualsHashCodeの注意点
あるクラスAを継承したクラスBに対して、`@EqualsHashCode`を付与した場合、そのままだとB配下のフィールドしか判定対象とならず、Aが保持しているフィールドは判定対象にならない.

~~~ java
@EqualsAndHashCode
@Setter
@Getter
class A {
  private String aField
}
~~~
~~~ java
@Setter
@Getter
@EqualsAndHashCode
class B extends A {
  private String bField
}
~~~

とクラスBを定義した場合

```  java
    @org.junit.Test
    public void test(){
        BDto b1 = new BDto();
        b1.setBField("b1");
        b1.setAField("a1");

        BDto b2 = new BDto();
        b2.setBField("b1");
        b2.setAField("aXXXXXXXXXX"); //b1と異なる値を設定

        assertEquals(b2,b1);
    }
```
上記テストは通ってしまう(本来は`aField`の値が異なるのでエラーとしたいのに)

そのため、とあるクラスを継承した場合は`@EqualsAndHashCode(callSuper = true)`と指定する。
ただし継承元のクラスが`equals`を継承している場合に限る

上記の場合は、Bの定義を以下のように書き換えると正しく判定を行えるようになる

~~~ java
@Setter
@Getter
@EqualsAndHashCode(callSuper = true)
class B extends A {
  private String bField
}
~~~

# `@ToString`について
## JUnitでの用途

`@ToString`を付与しないクラスの場合、下記テストでエラーになっても

```  java
    @org.junit.Test
    public void test(){
        BDto b1 = new BDto();
        b1.setBField("b1");
        b1.setAField("a1");

        BDto b2 = new BDto();
        b2.setBField("b1");
        b2.setAField("aXXXXXXXXXX"); //b1と異なる値を設定

        assertEquals(b2,b1);
    }
```

```
java.lang.AssertionError: 
Expected :BDto@81666743
Actual   :BDto@2d9f8
```
となって、何が悪いか全くわからない

その対応として`@ToString`を設定すると何が悪いかわかるようになるが、`@EqualsAndHashCode`と同様とあるクラスを継承した場合は`(callSuper = true)`をつけるのを忘れないようにすること

`(callSuper = true)`つけなかった場合の出力例(`@ToString`とだけ指定)

```
java.lang.AssertionError: expected: BDto<BDto(bField=b1)> but was: B<B(bField=b1)>
Expected :B<B(bField=b1)> 
Actual   :B<B(bField=b1)>
```
継承元の値が出力されないので何が悪いかわからない

`(callSuper = true)`つけた場合何が悪いか一目瞭然となる(`@ToString()`と指定)

```
java.lang.AssertionError: 
Expected :B(super=A(aField=aXXXXXXXXXX), bField=b1)
Actual   :B(super=A(aField=a1), bField=b1)
```
### クラスAとBの定義はこのような形となる
継承元

``` java
@EqualsAndHashCode
@Getter
@Setter
@ToString
public class A {
    private String aField;
}
```
継承先

``` java
@Getter
@Setter
@EqualsAndHashCode(callSuper = true)
@ToString(callSuper = true)
public class B extends A {
    private String bField;
}
```

# `@Data`の功罪
## 功
`@Data`を付与すると以下アノテーションを付与したのと同じになるので、楽に記載できる

* `@ToString`
* `@Getter`
* `@Setter`
* `@RequiredArgsConstructor`
* `@EqualsAndHashCode`

## 罪
上記の指定を一括で行ってくれるが、何もわからず使ってしまうと`(callSuper = true)`の設定ができないので、意図した実装にならない可能性があるので注意が必要
DiscordのBotをherokuにデプロイするときにハマった件

#### 1.今回起きた事象 

discord.pyを使ってdiscordのBOTを作成し終わったので、herokuにデプロイしてみるかーと思い、「git push heroku master」とコマンドを叩いたところ以下のエラーが…

``` log
remote: -----> App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/python.tgz
remote:        More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
remote: 
remote:  !     Push failed
```

上のエラーメッセージで調べると、実際にあげようとしているアプリの言語とherokuのアプリに設定されているbuildpackが異なると出てくるなんて記事がいくつか見つかった。

ただ、今回herokuのbuildpackもgit pushしたアプリの言語もpythonであっている…

#### 2.原因と解決
とりあえずherokuの公式ドキュメント見てみるかーと思ってみたらなんと…

ルートフォルダに「requirements.txt」と「Procfile」ってものを置いておかなければならないらしいので以下のように作成

``` requirement.txt
discord.py==1.2.3
```

``` Procfile
bot: python main.py
```

requirement.txtには依存関係のあるものを書かなければいけないようで、
「依存関係にあるファイル==そのバージョン」
という形で記載をしていけばよいらしい

Procfileは拡張子はいらなくて、そのアプリケーションを起動する際のコマンドを記載する必要があるとのこと

便利なものって最初使うときはハマるもんだなと思いましたとさ
AWS Cloud9の環境をコピーする

普段からAWS Cloud9の環境で開発していると、環境をコピーしたいと思うことが多々あります。
ググってもピンポイントな記事が無かったので、今回も備忘録的にやり方を残しておきます。

# 前提
そもそも、AWS Cloud9は（多くの場合）EC2インスタンス上で動いているので、
環境をコピーする場合はEC2インスタンスを複製し、
そのEC2インスタンスに繋ぐ環境を新規に作ってあげればよいことになります。

# EC2インスタンスの複製
このへんのやり方は詳しく説明してくれている記事がいくつもあるので、
それを見ながらやればいいと思います。
[Amazon Web Services(AWS) のEC2でインスタンスをコピーする方法](https://qiita.com/murachi1208/items/8be3cd006d31f1f81ee4)

# AWS Cloud9から接続
次に、AWS Cloud9から上記で複製したEC2インスタンスに接続します。
やり方は以下が参考になります。
[AWS Cloud9を東京リージョンのEC2で使う方法](https://qiita.com/unitia0323/items/466045e978e6af030b38)

ちなみに、接続を行う過程でEC2インスタンスのCUIを操作する必要があるので、
TeratermなどでSSH接続する必要があります。
[【初心者向け】Amazon EC2にSSH接続する【Windows、Macintosh】](https://dev.classmethod.jp/cloud/aws/aws-beginner-ec2-ssh/)

# 完成
これで完了です。
途中エラーになる場合、EC2インスタンスのセキュリティグループの設定などが上手くいっていない可能性があります。
AWS Cloud9のダッシュボードからボタン一つでできるようになればいいのに・・・

注意：このやり方では、AWS Cloud9上でSSH接続の扱いになるため、インスタンスの自動シャットダウンの対象にならないようです。EC2の管理画面から操作すれば問題ないですが、若干めんどくさいですね。。。
macOS Mojaveで最新のPHP(7.3)にVersion upする

# 背景

なんてことはないけど、エラーが多発したので備忘録として

## 操作

Homebrewはインストールしている前提

```shell
$ brew search php@7
$ brew install php@7.3
```

Pythonインストール時にerrorがでる

```
An unexpected error occurred during the `brew link` step
The formula built, but is not symlinked into /usr/local
Permission denied @ dir_s_mkdir - /usr/local/Frameworks
```

以下のコマンド実行

```
$ sudo mkdir /usr/local/Frameworks
$ sudo chown $(whoami):admin /usr/local/Frameworks
$ brew link python
```

もう一度

```
$ brew search php@7
$ brew install php@7.3
```

今度は

```
Error: The `brew link` step did not complete successfully
The formula built, but is not symlinked into /usr/local
Could not symlink sbin/php-fpm
/usr/local/sbin is not writable.

You can try again using:
  brew link php
```

Pythonインストール時のエラー同様に以下を実行

```
$ sudo mkdir /usr/local/sbin
$ sudo chown $(whoami):admin /usr/local/sbin
$ brew link php
```

以下のメッセージがでる

```
If you need to have php@7.3 first in your PATH run:
  echo 'export PATH="/usr/local/opt/php@7.3/bin:$PATH"' >> ~/.bash_profile
  echo 'export PATH="/usr/local/opt/php@7.3/sbin:$PATH"' >> ~/.bash_profile
```

指示通り

```
$ echo 'export PATH="/usr/local/opt/php@7.3/bin:$PATH"' >> ~/.bash_profile
$ echo 'export PATH="/usr/local/opt/php@7.3/sbin:$PATH"' >> ~/.bash_profile
$ brew services start php
```

ターミナルを再起動してPHPのVersion確認

```
$ php -v
```

以下のメッセージが出れば成功

```
PHP 7.3.7 (cli) (built: Jul  5 2019 12:44:05) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.7, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.7, Copyright (c) 1999-2018, by Zend Technologies
```

念の為 phpinfoを確認

```
$ touch index.php
$ echo "<?php phpinfo(); ?>" >> index.php
$ php -S localhost:8000
```

<img width="955" alt="スクリーンショット 2019-07-14 15.59.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133718/93898636-ce2b-1467-d94b-f28b7a1c5973.png">

がphpinfoでも出ればOK.

## 参考

[MacのPHPのバージョンを 7.3 に上げた
](https://koukitips.net/i-raised-my-macs-php-version-to-7-3/)
[Homebrewで入れたPythonでのlinkエラー問題](https://qiita.com/Jung0/items/d4012814e6fb1b694208)
Macでよく使う操作

# 一覧

## command + 〇 編

| コマンド | 説明 |
|:-----------------:|:------------------:|
| **command + C** | コピー |
| **command + V** | ペースト |
| **command + F** | ページ内検索 |
| **command + T** | 新しいタブを開く |
| **command + W** | タブを閉じる |
| **command + Z** | 一つ前に戻る |
| **command + I** | URLにフォーカスを当てる |
| **command + X** | 切り取り |
| **command + R** | リロード |
| **command + Q** | アプリケーションを終了する |


## control + 〇 編
| コマンド | 説明 |
|:-----------------:|:------------------:|
| **control + 右** | 右隣のウィンドウに移動 |
| **control + 左** | 左隣のウィンドウに移動 |


## command + shift + 〇 編

| コマンド | 説明 |
|:-----------------:|:------------------:|
| **command + shift + T** | 直前に閉じたタブを開く |
| **command + shift + 上** | カーソル部分から列の先頭までを選択 |
| **command + shift + 下** | カーソル部分から列の末尾までを選択 |
| **command + shift + 左** | カーソル部分から行の先頭までを選択 |
| **command + shift + 右** | カーソル部分から行の末尾までを選択 |
| **command + shift + F** | タブを隠す |


## command + option + 〇 編

| コマンド | 説明 |
|:-----------------:|:------------------:|
| **command + option + I** | デベロッパーツールを開く<br>（Chrome操作時） |
| **command + option + U** | ページのソースを開く<br>（Chrome操作時） |
| **command + option + P** | プリント印刷のコンソール表示 |
| **command + option + 右** | 右隣のタブに移動 |
| **command + option + 左** | 左隣のタブに移動 |

## 番外編

| コマンド | 説明 |
|:-----------------:|:------------------:|
| **command + shift + V** | clipyのクリップボード表示 |

### 参考

- [コピー＆ペーストをフル活用できるアプリ『Clipy』に惚れた！Macには絶対インストールしておきたいっ](https://blog.skeg.jp/archives/2015/09/copy-paste-clips.html)
KSNCTF#1 Test Problemを解く

今回は
http://ksnctf.sweetduet.info/problem/1
をときます。

まあ解くも何もないんだけど。
![screenshot-ksnctf.sweetduet.info-2019.07.14-15_55_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262914/5bcc7bff-fff2-7f3a-0e87-e1dacdd9c20c.png)

赤い文字で書かれてる[ FLAG_SRORGLnTh2Q5fTwu ] を入力したら終わり。


![screenshot-ksnctf.sweetduet.info-2019.07.14-15_57_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262914/315899ca-13b3-7653-cc7e-5720eac20156.png)

YaY！