OmniAICreator/Qiita-1.07M huggingface dataset:
Laravel学習(ルーティング①)_2019/04/17

#Laravel ドキュメント学習 (基礎：ルーティング①)

###基本的なルーティング
---------
```php

Route::get('foo', function () {
    return 'Hello World';
});

```

ドキュメントには、「一般的にはURIと「クロージャ」により定義され、単純で記述しやすいルートの定義方法を提供しています。」と書かれています。

そもそもクロージャとはなんぞやってことなので調べました。
「クロージャとは、プログラミング言語における関数オブジェクトの一種」
だそうです。よくわからなかったので、関数とオブジェクトと分けて考えることにしました。書いた事柄に関して情報吐き出してくれる物と解釈しました。(何となくわかりそうなものを説明しようとすると難しい...)

<b>＜自分なりの解釈＞</b> 
ルーティングとは、URLでページを表示したい場合、色々な条件をつけて指定ができること。
ルーティングは「/routes/web.php」に記述する事。


###使用可能なルート定義メソッド
---------
```php
Route::get($uri, $callback);
Route::post($uri, $callback);
Route::put($uri, $callback);
Route::patch($uri, $callback);
Route::delete($uri, $callback);
Route::options($uri, $callback);

```
ドキュメントには、「ルータはHTTP動詞に対応してルートを定義できるようにしています。」と書かれています。
簡単に言うと、HTTP動詞(上記でいう、"get","post","put","patch","delete","options"のこと)の形に合わせて、処理手続きを決目ているという事です。
HTTP動詞ってなんだよってはじめ思っていたので、補足を書くと通信するときの決まりごとだと僕は理解しています。「こんにちは」って日本語で挨拶したのに「ドベル　ダン」って返されたら??ってなりますよね。会話できるように言語を合わせようって事だと僕は思っています。ちなみに「ドベル　ダン」ってスロベニア語らしいです。


それぞれのHTTP動詞の形の意味は、
>GET・・・データの取得
POST・・・データの追加
PUT・・・データの更新
PATCH・・・データの更新(一部)
DELETE・・・データの削除
OPTIONS・・・使えるメソッド一覧を表示

詳しくは僕がわかりやすいなと思ったリンクを貼ります。
[PUT か POST か PATCH か？](https://qiita.com/suin/items/d17bdfc8dba086d36115)
[HTTP（GET・POST）について](https://qiita.com/7968/items/4bf4d6f28284146c288f#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%81%A8%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E3%81%AE%E5%86%85%E5%AE%B9%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B)


###CSRF保護について
--------------------------
CSRFとは、クロス・サイト・リクエスト・フォージェリのことで、Webアプリケーションの脆弱性やそれを利用した攻撃のことを表し、成りすましによって悪意のある操作を行うことです。
Laravelでは、クロス・サイト・リクエスト・フォージェリを防ぐためにトークン(本人であるという証拠のようなもの)を自動的に生成し、認証済みのユーザーかを確かめています。
そのため、POST、PUT、DELETEルートへ送信されるHTMLフォームはすべて、CSRFトークンフィールドを含まなければいけません。

```php

<form method="POST" action="/profile">
    @csrf
    ...
</form>

```

<b>＜自分なりの解釈＞</b> 
ルーティングの処理を書く際、POST、PUT、DELETEを使うときは@csrftを書く必要がある事。
Laravelが勝手にセキュリティー強化をしてくれてるんだな。

###正規表現制約とグローバル制約について
------------------------------
ドキュメントには、「指定した正規表現でいつもルートパラメータを制約したい場合は、patternメソッドを使ってください。」と書いてあります。
ルートパラメータとはidやnameなどURLに指定したい値が都度変わるときのルーティング書き方のことで、それを例えばidだったら数字以外は入らないから数字のみの制約をつけたり、nameであればa~zの文字しか入らないからa~zの文字のみの制約をつけたりすることです。
それらの制約を都度書くのは面倒なので、1回書けば他も自動的に制約をかけてくれる機能があり、それがpatternメゾットという事です。書き方は以下の通り。

```php
Route::get('user/{id}/{name}', function ($id, $name) {
    //
})->where(['id' => '[0-9]+', 'name' => '[a-z]+']);
```

```php
/**
 * ルートモデル結合、パターンフィルタなどの定義
 *
 * @return void
 */
public function boot()
{
    Route::pattern('id', '[0-9]+');

    parent::boot();
}
```

ちなみに正規表現とは、文字列を特定する際に、曖昧な感じで指定ができる表現方法のことで「これ！」ではなく「こんな感じ！」と指定できるもののことです。
例えば、麻婆豆腐が食べたい。じゃなくて辛いものが食べたいというみたいな感じだと思ってます。

<b>＜自分なりの解釈＞</b> 
ルーティングを書くときに都度入る値が変わるときは、{id}のよう"{}"で指定する事
patternメゾットを使えば正規表現の指定が、1回で済むという事。



###感想
---------
自分自身のため、プログラミング初心者にも伝わるように説明が記することを意識して書いたが、何となくやふわっとしか理解していなかったIT用語をわかるように書くのが難しかったが、自分自身とても学習になったのでよかったです。
ルーティングについて、ドキュメントを見て簡単にわかるところ以外は、全部まとめたかったが結構大変で分けることにしました。
次は、ドキュメントでいうルートグループあたりから書こうと思います。
プログラミング学習記録67〜インターネット技術とC〜

##今日やったこと
- インターネット技術について学ぶ
- C言語に触れる

昨日の続きです。
インターネット技術について学びました。

一通りやったのですが、まだまだわけわからん状態ですね。
実際に手を動かして、仕組みを体感してみないとおそらく理解できないと思います。

読むだけじゃ理解できないものだとわかったのが、今回の１番の収穫です。

あと今日はC言語もやってみました。
C言語の基礎の基礎である構文を使って、ビルドし、実行してみました。

```
#include <stdio.h>
int main(void)
{
   printf("Aの「文字コード」は%dです\n",'A');
   return 0;
}
```

これを実行して、
`Aの「文字コード」は（空欄）です`
（空欄）の部分に何が表示されますか？
という問題が出題されました。

答えは65です。

[ASCIIコード表](http://www3.nit.ac.jp/~tamura/ex2/ascii.html)
こちらのサイトでAの部分を確認すると65であることがわかります。

この問題がなんのためにあるのかはわかりませんが、正解にたどり着けてよかったです。

おわり
vimでマークダウンのプレビューが見たい

# はじめに

vimを使い始めてmarkdownのプレビューを見れるようにしたかった。
そこで、いくつかのプラグインを導入して簡単にプレビューできるようにしました。
プラグイン管理には`dein.vim`を使っています。

# 最初にやってエラーが出た
以下の設定を`.vimrc`に書いたところ、エラーを吐きました。

```vim
call dein#add('tpope/vim-markdown')
call dein#add('kannokanno/previm')
call dein#add('tyru/open-browser.vim')

au BufRead,BufNewFile *.md set filetype=markdown
let g:previm_open_cmd = 'open -a Firefox'
```
エラーの内容は以下の通りです。なぜかはわかりません。

```
[vimproc] vimproc#get_command_name: File "open" is not found.
```

# 動くようにした

```vim

  "Markdown用のプラグイン
  call dein#add('tpope/vim-markdown')
  call dein#add('kannokanno/previm')
  call dein#add('tyru/open-browser.vim')
```

このままでもいいのですが自動的に折りたたまれてしまうのでいくつか設定しておきます。\
`<Ctr-p>`でプレビューを表示するようにします。

```vim
""" markdown {{{
   autocmd BufRead,BufNewFile *.mkd  set filetype=markdown
   autocmd BufRead,BufNewFile *.md  set filetype=markdown
   " Need: kannokanno/previm
   nnoremap <silent> <C-p> :PrevimOpen<CR> " Ctrl-pでプレビュー
   " 自動で折りたたまないようにする
   let g:vim_markdown_folding_disabled=1
   let g:previm_enable_realtime = 1
 " }}}
 ```

 マークダウンを編集している間自動的に更新してくれるので便利です。
 プレビューはこんな感じです。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283552/8801a144-5ff0-f5e2-3bf0-044398997036.png)

# 参考にしたもの

[vimでMarkdownのプレビュー](https://qiita.com/uedatakeshi/items/31761b87ba8ecbaf2c1e)
[Vimでmarkdownをリアルタイムにプレビューできるようにする](https://blackhawk888.github.io/blog/2018/02/08/vim-markdown/)
Python でバルーン（通知）出したいとき Plyer 使うとメチャ楽

# 経緯
唐突に（天啓）**Pythonでバルーン出したかった**ので調べてみると、やることの割に結構**面倒くさそうな実装**が多かった。

**モダンなやり方**を少し調べてみたら出てきたので共有。

[Stack Overflow | How to create a system tray popup message with python? (Windows)](https://stackoverflow.com/questions/15921203/how-to-create-a-system-tray-popup-message-with-python-windows)


どうやら **Plyer** の **Notification** を使用すると良い感じらしい

# 実装
ペってして実行する

```balloontest.py
from plyer import notification

notification.notify(
    title='通知だよ',
    message='これはメッセージだよ',
    app_name='アプリ名だよ',
    app_icon='./icon.jpg'
)
```

エラーが出てしまいました

```error
Exception: Could not load icon ./icon.jpg
```

なんかアイコンが読み込めてないっぽいですが指定ディレクトリは正しいです。

![OeJrqztlzVfzEHW1556078782_1556078798.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/8cfb7fdf-94b8-c992-fd97-ef1f15c4fd27.jpeg)


原因が不明なので公式ドキュメントを読みます

[Plyer | class plyer.facades.Notification](https://plyer.readthedocs.io/en/latest/#plyer.facades.Notification)

>**When called on Windows, app_icon has to be a path to a file in .ICO format.**

拡張子は `.ico` じゃないとダメってことですね。



## 拡張子を `.ico` に変換
適当に変換サービス使って変換します。

こちらのサービスを使用させて頂きます。
[JPEG/PNG/GIFからアイコンを作成する「アイコン コンバータ」](https://service.tree-web.net/icon_converter/)

![x70nuQun1icOTEg1556079039_1556079044.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/1a5791fb-8e6c-1b70-78b4-1939c31e6cc3.jpeg)
出来たのでもう一回実行する。


![bandicam 2019-04-24 20-51-43-475.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256196/6e8a95f3-07bd-fb3b-d439-770d449e1c6d.jpeg)
**バルーン（通知）**が出た!!!!!!


めちゃめちゃ楽

Python で Windows 周りのこと触る機会がないのですがこれだけでもワリと楽しい。


# 参考
[How to create a system tray popup message with python? (Windows)](https://stackoverflow.com/questions/15921203/how-to-create-a-system-tray-popup-message-with-python-windows)
[Plyer | class plyer.facades.Notification](https://plyer.readthedocs.io/en/latest/#plyer.facades.Notification)
代表的なLinuxのディストリビューション

[YYPHP](https://yyphp.connpass.com/)で[ぬーぺっと](https://qiita.com/nouphet)さんに
教えていただいた代表的なLinuxのディストリビューションについて

## Redhat系
 - Red Hat Enterprise Linux (RHEL:レル)
     - 有償、RedHat社のサポートが受けられる。
     - 質問したりできる。

 - Fedora
     - 無償
     - RHELの開発版
     - RHELに先行して新しいパケージが入っていたり。

 - CentOS(Community ENTerprise Operating System)
     - RHELの無償版
     - Red Hat ではなくコミニティが作っている。
     - RHELの有償部分をとるかオープンソースのものに置き換えている。
     - RHELの代わりに使われることが多い。

 時系列のイメージ
　Fedora →　RHEL　→　CentOS



## Debian系
 - Debian
   - RedHatより先進的な機能を使っている。
   - Linuxのカーネルのバージョンが比較的新しい。
   - 軽量でシンプルな構成。

 - Ubuntu
   - Debianをベースにしたデスクトップ向けに開発されたディストリビューしション
   - PCを操作する為のOSとして使ったり、サバー用途としても使用されることもある
   

軽量がいいならDebian、最初から色々入っていて欲しい場合はUbuntu



## Alpine
 - 超軽量Linux
 - 容量が小さいのでDockerイメージによく使われる。
   - Dockerイメージの容量が大きいとダウンロードに時間がかかったりするらしい。

https://qiita.com/ryuichi1208/items/6020cfabc92bd8153654

>CentOS 約4GB
Ubuntu 約700MB
Alpine 約100MB
【CSS】flexで複数のアイテムを並べたいとき、余白をスマートに記述する方法。 

先輩のコードを見て、覚えた小技。

Flexを使って、以下のような横並びアイテムが続くページを作りたいとする。

![スクリーンショット 2019-04-24 19.52.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235781/da6bb786-0866-518b-b750-48b778bb45a9.png)


だいたい画像とかが中身に入ったdivをwrapして、flexをかけると思う。

```scss
.flexWrap {
  display: flex;
  flex-wrap: wrap;
  .flexItem {
    flex-basis: 50%;
  }
}
```

このとき、大抵アイテム間に**余白**があると思うんけど、それどう実装するか、という話。

## コード
```scss
.flexWrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  @media print, screen and (min-width: 767px) {
    margin: 0 -20px;
  }
  .flexItem {
    box-sizing: border-box;
    flex-basis: 50%;
    max-width: 50%;
    padding: 10px;
    @media print, screen and (min-width: 767px) {
      flex-basis: 33.3%;
      max-width: 33.3%;
      padding: 20px;
    }
    img {
      max-width: 100%;
    }
  }
}
```

Itemにアイテム間の余白/2のpaddingをつける。(20pxなら10px
Wrapにpaddig分の左右マイナスマージン。
マイナスマージンにより、paddingで凹んだ部分がもとに戻される。

レスポンシブのときは、余白とマージンを上書きするだけでよし！

うーん、スマート！

詳しくはcodepenを参照。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="dorara_css" data-slug-hash="PgydyQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="sample-flex-margin">
  <span>See the Pen <a href="https://codepen.io/dorara_css/pen/PgydyQ/">
  sample-flex-margin</a> by dorara. (<a href="https://codepen.io/dorara_css">@dorara_css</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Can't connect to local MySQL server through socket '/tmp/mysql.sock'(2)が出た場合の対処法

自分のメモ用に書きます

原因：

```
mysql.server start
```
これでは権限が無く、MySQLが動かない

```
sudo mysql.server start
```

これで

```
Password:
```
とパスワードをきかれるので、`macOSのパスワード`を入力する。

こうなれば成功！

```
Starting MySQL
.... SUCCESS! 
```
jsdoでjor1k その２

#概要

jsdoでjor1kやってみた。
エンディアンを調べてみた。

#結果


```
~ $ cat main.c                                                                  
#include <stdio.h>                                                              
                                                                                
int main(void)                                                                  
{                                                                               
    int i = 1;                                                                  
    if (*(char *) &i)                                                           
    {                                                                           
        printf("litlle!!");                                                     
    }                                                                           
    else                                                                        
    {                                                                           
        printf("big!!");                                                        
    }                                                                           
}                                                                               
                                                                                
                                                                                
                                                                                
~ $ gcc main.c                                                                  
~ $ ./a.out                                                                     
big!!~ $                                                                        
```

以上。
Unityのテキストファイル書き出しUtilクラス

## ログファイルの保存

> [C#のStreamWriterの挙動について](http://soysoftware.sakura.ne.jp/archives/1246)
> 消費メモリと処理速度の観点から検証しましたが、やはりファイルオープンしっぱなしで毎フレームちょっとずつ音声データをWrite、最後にファイルクローズという手法で問題なさそうです。

こういうのがやりたかったのですが、ネット上のサンプルコードがなぜか即`Flush()`即`Close()`してばっかりで「そうじゃねんだよなぁ……」って感じなので自分で作りました。

[TextFileWriter.cs](https://gist.github.com/nekomimi-daimao/ee205e6d3949aa672913474107f542d1)

## 使い方
```c#:usecase
_fileWriter = new TextFileWriter(Application.temporaryCachePath + "/temp.txt");

for (int count = 0; count < 10000; count++)
{
    _fileWriter.Write(count);
}

_fileWriter.Dispose();
```

ちゃんと保存されます。

`Flush()`と`Close()`は`Dispose()`のときにしか呼んでいません。なので使い終わったら必ず`Dispose()`してください。呼ばなくてもわりと保存されてますが。
'StreamWriter.AutoFlush'を`true`に設定すると書き込むたびに中で`Flush()`してくれるようです。パフォーマンスに影響は出ますが、はっきりわかるレベルまで負荷がかかることはないと思います。嫌だったら`AutoFlush`のくだりを消しておいてください。デフォルトは`false`です。

```c#:TextFileWriter.cs
public TextFileWriter(string path)
{
    _streamWriter = new StreamWriter(path, true, Encoding.UTF8) {AutoFlush = true};
}
```

## まとめ
わざわざラッパー作らなくても`StreamWriter`直叩きでいいかな……って気がすごくしますが、まあ作っちゃったのでいちおう。パフォーマンス計測とかあんまりやったことないのでどうしたらいいか知らないのです。基本は気合と根性で書いて、速度はフレームワークとかハードウェアがなんとかしてくれるゆとり世代です。

ところでほんとにこれっぽいサンプルがネットで見つからなかったのですが、あまりにも当然だから書くまでもなかったのか、実はそんなに需要がないのか。謎。

おしまい。
Pipenvで始める！Python開発環境構築

# はじめに
会社からPCが支給されて、キレイな環境を手に入れた！
いつまでもキレイな状態を保ち続けたい！
そうした思いから、解決方法を色々と調べたので備忘録としてまとめた。
![clean.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107176/ac918c34-ac07-02b9-a6cb-002890888247.png)

#目次
- 概要
- Pipenvとは
- メリット
- 使い方
    - Pipenvのインストール
    - 環境の作成
    - 環境をアクティベート切り替え
    - パッケージのインストール
- まとめ

# 概要
Pipenvの導入から実際に使うまでの一連の流れをまとめた。

# Pipenvとは
[公式](https://pipenv-ja.readthedocs.io/ja/translate-ja/)より一部抜粋
>Pipenvは、手動でパッケージのインストールおよびアンインストールを行うのと同じように Pipfile に対してパッケージの追加および削除を行うのに加え、自動でプロジェクト用の仮想環境を作成し管理します。
...
Pipenvは主にアプリケーションのユーザーと開発者に、簡単に作業環境を作れる方法を提供するためのツールです。

# メリット
[公式](https://pipenv-ja.readthedocs.io/ja/translate-ja/)の記述一部を自分なりに解釈してみた。

1. `pip`と`virtualenv`を別々に使う必要がなくなる
2. `requirements.txt `の代わりに`Pipfile`および`Pipfile.lock`を使う
3. `.env`ファイルを読み込むことで、開発ワークフローの能率が上がる

今までは、`pyenv`と`vertualenv`を使って適宜環境の切り替えを行っていたが、時々切り替えを行わないままグローバルの`pip`でパッケージをインストールしてしまい、気がついたらグローバルが汚れてしまっていた…。

また、自分の開発環境を再現したいような場合も`pip freeze > requirements.txt`でパッケージの一覧をファイルに吐き出して、それを`pip install -r requirements.txt`としてインストールする…別に悪いわけじゃないけどちょっと手間に感じるときもある。

上記の経験から個人的には1, 2が嬉しいポイント👍

# 使い方
### Pipenvのインストール
筆者は`pip`を使ってインストールしているが、macユーザーなら`brew`でもいいかもしれない。

```bash
$ pip install pipenv
or
$ brew install pipenv
```

上記以外のインストール方法は[ここ](https://pipenv-ja.readthedocs.io/ja/translate-ja/install.html#installing-pipenv)を参考にするといい。


### 環境の作成
今回は普段使っているPythonのバージョンで環境を作成したいので、自身が使っているPythonのバージョンを確認する。

```bash
$ python3 -V
Python 3.7.3
```

次に、Pythonのバージョンを指定して環境を作成する。
ここでは、先程出力された`Python 3.7.3`(人によって異なる)とする。
**※既にPipfileが存在した場合はその中に記述されている情報を元に環境が作成される**

```bash
$ pipenv install --Python 3.7.3
```

以下のようにすれば、それぞれPython2系と3系で環境を作ることができる。

```bash
$ pipenv --three
$ pipenv --two
```

すると、カレントディレクトリにPipfileが作成され指定したバージョンのPythonが記述されていることが確認できる。

```plaintext:Pipfile
[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[dev-packages]

[packages]
python = "*"
3-7-3 = "*"

[requires]
python_version = "3.7" <====これ
```

### 環境をアクティベート切り替え
いま作成した環境に入るには以下のようにする。

```bash
$ pipenv shell
```

環境を有効化するとプロンプト($)の左側にカレントレィディレクトリ名が表示されるはず。

逆に環境から出たい場合は以下のようにする。

```bash
(test_env)$ exit
```

### パッケージのインストール

```bash
$ pipenv install requests
```
先程作成された`Pipfile`の中身が書き換わっていることが確認できる。

```plaintext:Pipfile
[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[dev-packages]

[packages]
python = "*"
3-7-3 = "*"
requests = "*"

[requires]
python_version = "3.7"
```

アンインストールは以下の通り。

```bash
$ pipenv uninstall requests
```

# まとめ
とりあえず、上記にまとめた内容でなんとかなりそう。

# 参考
- [Pipenv公式](https://pipenv-ja.readthedocs.io/ja/translate-ja/)
- [Pythonで、Pipenvを使う](https://narito.ninja/blog/detail/58/)
- [Pipenv で Python パッケージを管理する](https://qiita.com/QUANON/items/4a371651b07bb61fde41)
Keynoteでカスタムフォーマットで符号付きの割合（パーセント）を出す

ポイントは次の3つ。たぶんNumbersでも同じ。

- 「ルールを追加」で 0 より大きいか小さいかで場合分けする
- 小数点以下を入れたい場合は、「小数の桁数」を持ってくる。
- 「尺度」をドラッグして、「％」を選択するとパーセント表示になる

## 設定例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19478/d3d112b3-fbdb-40c8-e7c0-23d9ac5fcc21.png)
初めてのUnity作品

# 初めてのUnity作品

初めまして。futagoyamaです。  
唐突ですが、私はヱヴァン〇リヲンの兵装ビルが大好きです。
そこで、半年程前に"FlakTowerType-C"もどきを作ってみました。  
Mキーを押すと…
<img width="960" alt="FlakTowerType-C1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404618/40979566-7d6e-b7ca-0906-200fe0555f4b.png">  
こうなって
<img width="960" alt="FlakTowerType-C2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404618/dd78b620-0c87-da08-a7da-cd5133a38b8a.png">  
完了!
![FlakTowerType-C3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404618/713504f9-79ec-1472-d691-4272cf5023e8.png)

- 展開している途中でMが押されるとパーツがバラバラになる
- 真っ白
- 音がない  
等、まだまだ不完全なところが多いです。  

FlakTowerType-Cもどき : https://github.com/futagoyama/FlakTowerType-C

Unityも完全に素人ですが、本やネットなどで勉強してフリーゲームが作れるレベルまでには成長していきたいです。
MySQLでBase64に変換されたJSONを扱う

# これはなに
Base64に変換したJSON文字列をMySQLに突っ込む際に、いい感じに取り扱ってほしい場合があります。

MySQL 5.7です。

# データとクエリ

FROM_BASE64でただ変換するとbinaryな文字列として扱われ、解釈されません。

```sql
> select json_extract(FROM_BASE64('eyJuYW1lIjoicm1hbnpva3UiLCJhZ2UiOjMwfQ=='), '$.name');
ERROR 3144 (22032): Cannot create a JSON value from a string with CHARACTER SET 'binary'.
```

JSONにCastするとよくわからないものが返ります。

```sql
> select cast(FROM_BASE64('eyJuYW1lIjoicm1hbnpva3UiLCJhZ2UiOjMwfQ==') as JSON);
+-----------------------------------------------------------------------+
| cast(FROM_BASE64('eyJuYW1lIjoicm1hbnpva3UiLCJhZ2UiOjMwfQ==') as JSON) |
+-----------------------------------------------------------------------+
| "base64:type253:eyJuYW1lIjoicm1hbnpva3UiLCJhZ2UiOjMwfQ=="             |
+-----------------------------------------------------------------------+
1 row in set (0.03 sec)

> select json_extract(cast(FROM_BASE64('eyJuYW1lIjoicm1hbnpva3UiLCJhZ2UiOjMwfQ==') as JSON), '$.name');
+-----------------------------------------------------------------------------------------------+
| json_extract(cast(FROM_BASE64('eyJuYW1lIjoicm1hbnpva3UiLCJhZ2UiOjMwfQ==') as JSON), '$.name') |
+-----------------------------------------------------------------------------------------------+
| NULL                                                                                          |
+-----------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)
```

JSON内で使っている文字セットでcharへ変換することで扱うことができます。

```sql
> show variables like 'character_set_connection';
+--------------------------+-------+
| Variable_name            | Value |
+--------------------------+-------+
| character_set_connection | utf8  |
+--------------------------+-------+
1 row in set (0.00 sec)

> select json_extract(cast(FROM_BASE64('eyJuYW1lIjoicm1hbnpva3UiLCJhZ2UiOjMwfQ==') as char), '$.name');
+-----------------------------------------------------------------------------------------------+
| json_extract(cast(FROM_BASE64('eyJuYW1lIjoicm1hbnpva3UiLCJhZ2UiOjMwfQ==') as char), '$.name') |
+-----------------------------------------------------------------------------------------------+
| "rmanzoku"                                                                                    |
+-----------------------------------------------------------------------------------------------+
1 row in set (0.00 sec)
```
入力値のサニタイズで使うhtmlspecialchars関数について紹介！

## サニタイズとは
- 特殊な文字を別の文字に置き換えることです。
- セキュリティ対策として用いられる手法です。

※「サニタイズ」と同じ意味で「エスケープ」という言葉も用いられています。

## サニタイズの役割
- サニタイズにより入力値に特殊な文字を入力されても無害化して、予期せぬ動作を防ぐ役割があります。

## サニタイズの事例

ここでは、サニタイズの役割についてもう少しわかりやすく説明します。

### サニタイズが無効になっている場合

例えば、以下のようなお問い合わせフォームがあるとします。

「名前」の箇所に次のようなJavascriptのコードを入力して送信します。

<img width="763" alt="お問い合わせ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392565/31159c70-7f85-e88c-87a3-efa9ec95f573.png">

すると、Javascriptのコードが処理され、画面にアラートウィンドウが表示されてしまいました。

<img width="467" alt="localhost_8888_の内容_と_お問い合わせ完了.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392565/60c2cf75-ad6b-0dd1-537a-f9f2582b18dc.png">


このように、入力値にコードが入力されてしまうと、予期せぬ動作が引き起こす可能性があります。

そのため、サニタイズにより入力値に特殊な文字を入力されても無害化する必要があります。

## サニタイズの書き方

- サニタイズはhtmlspecialchars関数を使います。

```
htmlspecialchars($string, $flags, $encoding);
```

### 引数
```
$string - 文字列
$flags - フラグの種類
$encoding - 文字コード
```

#### 文字列
- 対象の文字列を指定します。

#### フラグの種類
`ENT_COMPAT`
ダブルクオートは変換するが、シングルクオートは変換しない

`ENT_QUOTES`
シングルクオートとダブルクオートを共に変換する

`ENT_NOQUOTES`
シングルクオートとダブルクオートは共に変換されない

#### 文字コード
- UTF-8などの文字エンコードを指定します

## HTMLエンティティ化
htmlspecialchars関数を使うことで、HTMLタグやスクリプトコードなどの特殊な文字を変換することを「HTMLエンティティ」と言います。

例えば、HTMLタグで「”」(ダブルクォート)が```「&quot;」```に変換されます。
また、「’」(シングルクォート)が```「&#039;」```または```「&apos;」```に変換されます。

## コード例

```
<?php echo htmlspecialchars($_POST["name"], ENT_QUOTES, "UTF-8")?>
```

こうすることによって、先程のJavascriptのコードの場合、画面にアラートウィンドウが出力されることなく、安全に動作します。
メソッド名・変数名などに使用する英語の使い分けついてのガイドライン

英語のニュアンスがわからないため微妙なところで名付けに困ることがあります。
これは自分なりの使い分けのガイドラインです。

# どういう表現を使用するか
## 数
### 積極的に採用
* `hoge_number` : 番号を表すときは`number`
* `hoge_count` : 計数（個数や回数）を表すときは`count`

### 採用したくない
* `number_of_hoge` : 長くなるから嫌う人は多いと思う
* `hoge_no` : `no`では意味がわからない

## コレクション
### 積極的に採用
* `hoges` : 一般的に複数形にすることでコレクションであることを表現できる
* `hoge_group` : なんらかの規則で集められたグループであることを示唆できるかもしれない

### 採用したくない
* `hoge_list` : データ構造を明示するのは冗長（だが必要となることもある）

## 〜〜者
日本語では多用するが英語にするのが難しい。特に「担当者」という言葉はなんでもありなので業務システムの設計としては分析不足かもしれない。

### 積極的に採用
* 動詞 + `er` : 〜〜する人という造語法で誰でも理解可能であり、単純なのでまずはこれを検討
  * ただし、「描画者」を表現しようとして`drawer`にすると「引き出し」の意味が強く混乱の元になるので、このような一部の単語には要注意
* 動詞 + `ee` : 〜〜される人という造語法。日本語話者には一般的ではないが他のプログラマがこれで理解してくれたらありがたい。

### 採用したくない
* `hoge_rep` : representativeの略で正しい表現だがわかりにくい。
* `hoge_member` : 苦肉の策


# 複数の表現をどう使い分けるか
## 状態 `state`/`status`
* **状態**1つを表す場合は`state`
* 状態を組み合わせてできる複合的な**状況**は`status`

## 可否 `can`/`-able`
* 権限としてできるかどうかの場合は`can`
* 状態としてできるかどうかの場合は`-able`

## 開始と終了
* `begining`/`end` : 始まり/終わり（名詞）
* `start`/`stop` : 始める/やめる（動詞） 
* `begin`/`finish` : 着手する/完了する（動詞）

## 実行 `run`/`do`/`perform`/`exec(ute)`
そもそも実行するという名付けそのものがよくない。何を実行するのかに基づいて命名すべき。とはいえ、やりすぎた抽象クラスなどで使うこともありうる。
* サーバのように実行中(running)状態があるようなものを実行する場合、`run`
* 下準備を色々してから最後に実行するという場合、`execute`
* ある一つのタスクを実行する場合、`perform`
* `do`は多くの言語で予約語的扱いなので使用しない

## 追加 `add`/`append`/`insert`
* 通常は`add`
* コレクションに順序性があり末尾に追加する場合は`append`
    * 先頭に追加する場合は`prepend`
    * 途中に追加する場合は`insert`

## 作成 `create`/`build`/`generate`
* 無から作成する場合は、`create`
* 材料を組み立てて作成する場合は、`build`
* 材料をもとに質的に別な物を生成する場合は、`generate`

## 変更 `update`/`change`/`modify`/`patch`
* 変更結果が永続化されるなら`update`
* 変更結果が一時的なものなら`change`
* `modify`は使用しない
* いわゆる「パッチ」を実行する場合のみ`patch`

## 削除 `delete`/`destroy`/`remove`/`erase`
* 削除結果が永続化されるなら`delete`
  * または`destroy`。慣習による
* 一時的に取り外すだけなら`remove`
* `erase`は使用しない

## 属性 `property`/`attribute`
使用している言語やフレームワークの慣習に従っておく。
NEMOのインストール方法

#NEMOとは
N体問題を解く場合、天体の初期条件は自分で作らないといけません。N個の天体モデルについてシミュレーションしたい場合、必要なパラメーターは、「粒子数」、「各粒子の質量」、「初期座標」、「初期速度」となります。
NEMOは、これらの初期条件を含んだデータを作ってくれるソフトウェアパッケージです。最新はNEMO4.0で、UNIX環境で動きます。
[N体学校](http://www.cfca.nao.ac.jp/content/n%E4%BD%93%E5%AD%A6%E6%A0%A1)の講義資料の中で、GRAPEを用いた多体問題の初期条件を与えるツールとして言及されています。

#インストール
~~基本的なインストール方法は、[NEMO - A Stellar Dynamics Toolbox](http://bima.astro.umd.edu/nemo/)にある、「PDF version of the NEMO manual」を参考にしてください。この記事では、これをもとに、ハマりやすいところの説明をします。~~
2021/10/9現在、リンク切れとなっていました。今後はおそらく[NEMO Documentation](https://astronemo.readthedocs.io/en/latest/install.html#install)が参考になると思います。別のチュートリアルを見つけた方はコメントで教えて下さい。
※僕の環境「CentOS7+GNOME」でハマりやすいところということになります。
※今回は、ライブラリとバイナリしかインストールしません。PGPLOTとVOGLは飛ばします。

##① NEMO manualを開く
まずは、「PDF version of the NEMO manual」をダウンロードして、Appendix Iを見てください。ここの、I.1にあるコマンドを実行していくことになります。

##②コマンドの実行
以下、マニュアルの丸写しです。このコマンドを実行してください。

```cmd.sh
git clone https://github.com/teuben/nemo
cd nemo
./configure --with-yapp=pgplot --with-pgplot-prefix=`pwd`/libsource
nemo_start.csh
make postconfig
rehash
make libs
make bin
```

うまくいけば、ちゃんとmakeできて、NEMOのコマンドが通るはずです。ですが、大体の場合うまくいかないので、あとでハマりやすいところを説明します。
#インストールできたかのチェック
`mkplummer sample.dat 1024`
`tsf sample.dat`
とコマンドを入れて、sample.datの中身が表示されていれば成功です。
ファイルはカレントディレクトリに生成されています。
#うまくいかないとき
各コマンドごとにハマったところ、ハマりそうなところを説明していきます。
##gitがうまくいかないとき
一行目からつまずいた人は、とりあえずgitをyumまたはapt-getで追加してください。

##configureがうまくいかないとき
おそらく、ここでエラーが出る場合がほとんどのはずです。僕は、コンパイラを入れていないことでエラーが出ました。必要なコンパイラは以下の通りです。

* gcc
* g++
* gfortran
* g77

それぞれ、○○ --version のコマンドでコンパイラが入っているか確かめてみましょう。gfortran、g77が入っていない場合は、次のコマンドでパッケージを入れてください。(yumは各自で読み替えてください)
`yum install gcc-gfortran libfortran`
`yum install gcc* compat-gcc*`
(参考サイト:
http://www.rivhiro-weather.com/knowledge/?p=806
http://dotnsf.blog.jp/archives/1046769728.html
)

configureが成功すると、nemoのディレクトリ内に、Makefileができています。

##nemo_start.cshがうまくいかないとき
そもそも、configureがうまくいかないと、`nemo_start.csh`が生成されないです。configureがうまくいくまで、ここには進めません。
また、`make postconfig`も、configureがうまくいってないと成功しません。

さて、`nemo_start.csh`があるのに実行できない場合、シェルの種類が違っていると考えられます。
cshファイルには、cshで動作するシェルスクリプトが入っています。現在のシェルが何なのかを確かめるために、
`echo $SHELL`
とコマンドを入れましょう。結果が `/bin/bash` や `/bin/sh` の時は、`nemo_start.sh`
を実行するか、chshコマンドでシェルをtcshにしましょう。

##rehashがうまくいかないとき
シェルがsh系のときは、
`hash -r`
をrehashの代わりに実行してください。

#まとめ
ここまで、NEMOパッケージのインストール方法を説明してきました。基本的にはエラーメッセージに従って修正していけば大丈夫だと思います。
Linux初心者の僕がハマったところを紹介しましたが、他にもエラーがでてきて進まない、という場合はコメントお願いします。
[Docker] debian系のコンテナでrootユーザーになる方法

# 結論
docker runのオプションで指定してあげる必要あり
例
`docker run -it --rm -u root --entrypoint /bin/sh hoge:1.1.1`

# なぜdocker runの段階なのか
- rootユーザーのパスワードがわからないのでコンテナの中に入ってから`su root`はできない
- `sudo`コマンドはdebianではデフォルトでインストールされていない。インストールしようとすると`su root`する必要が出てくるが、パスワードがわからないのでインストールできない

参考: https://unix.stackexchange.com/a/425664
業務未経験で大学中退マンがはじめてwebアプリを作ってみた。BMI計算アプリ。

<h1>超簡易BMIアプリを作った</h1>
どうもフロッキーです。
Webエンジニアになるべく、rubyを極めている最中です。
そこで今回は初めて作ったBMIアプリのソースコードを記します。
クソ簡単とはいえ、２週間前の自分では「hello,world」を表示するhtmlすらデプロイ出来ていないので進歩だと思います。
<h1>URLはこちら</h1>
heroku無料版のため、開くのに時間がかかります。
https://azuna20190424-bmi.herokuapp.com/
<h1>ソースコードはこちら</h1>

```apps_controller.rb　
class AppsController < ApplicationController
  def calcs
    
  end
  
  def result
    weight = params["users_info"]["weight"].to_f
    height1 = params["users_info"]["height"].to_f
    height2 = height1 / 100
    
     @BMI = (weight / (height2 ** 2)).round(2)
    
  end
end

```

```calc.htmlerb
<h1>BMI計算アプリ</h1>
    <%= form_tag("/create") do%>
    <p>体重</p>
    <%= text_field :"users_info", :"weight"%>
    <p>身長</p>
    <%= text_field :"users_info", :"height"%><br><br>
    
    <%= submit_tag "計算をする",class:"btn btn-primary"%><%end%>
```

```calc.html.erb
<h1>入力結果</h1>

<p>あなたのBMIは<%= @BMI%>です</p>
```

<h1>まとめ</h1>
指摘に
```
@BMI = (weight / (height2 ** 2)).round(2)
```

の一文が一番頭を使った部分です(笑)。こんなLispみたいな書き方出来るんだと(笑)
雑: gRPC in Ruby

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208/a79038d4-d367-f3b3-9c30-9d445849a3e2.png)

---

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208/47f66c18-26b4-705a-3881-ab85f315e050.png)

---

## gRPC とは

* Google が開発している RPC フレームワーク
* Protocol Buffers によるスキーマ定義、シリアライゼーション
* Go, C++, Java, Python, そして Ruby など様々な言語に対応
    * protoc がスキーマ定義からコード生成してくれる
* 複数のリクエスト・レスポンス形式
    * ストリームによるリクエストまたはレスポンスもできる
* HTTP/2.0 によるトランスポート
    * ELB 等でロードバランシングできないので別の方法を考える必要がある

---

## gRPC in Ruby

* [grpc/grpc](https://github.com/grpc/grpc) という monorepo で他の言語とともに開発されている
    * grpc-go とかは別リポジトリになっている
* 一部 C による Extension として書かれている
* マルチスレッドサーバー
* Interceptor により Server/Client の両方でフックポイントに実装を挟める

---

## Interceptor

* Rack における Middleware のようなもの
* https://github.com/grpc/grpc/blob/master/src/ruby/lib/grpc/generic/interceptors.rb
* Rack と違って Client 側にも同じような層がある
    * Faraday の Middleware みたいなイメージ? (Faraday 使ったことないので適当なこと言ってます)
* 仕様は grpc/proposal というリポジトリに
    * https://github.com/grpc/proposal/blob/master/L11-ruby-interceptors.md

---

## 独断と偏見、gRPC in Ruby における二大問題

* Interceptor がイマイチ
* マルチプロセスじゃないのでスケールしにくい

---

## Interceptor がイマイチ

* レスポンスを取ることができない (nil が返る)
    * レスポンスをフィルタしたり、ログしたりができない
* ストリームをラップしたりすることができない
    * Go とかはできる
    * ストリームの内容をログしたり、メトリクスを残すことができない
* 結果として普通に誰か作ってるだろうという Interceptor が GitHub にも転がっていない
    * NewRelic でメトリクスとるやつとか、エラーを Sentry に投げるやつとか
    * Rack Middleware とかに比べるとエコシステムがあまりにも残念

---

## マルチプロセスじゃないのでスケールしにくい

* Ruby には GVL があるので

---

## grpc/grpc 以外の実装

---

## [cookpad/griffin](https://github.com/cookpad/griffin)

* Cookpad 独自実装の gRPC Server
* 僕が思う二大問題を両方解決している！！！
* マルチプロセス x マルチスレッド
* ただし、Interceptor のインターフェイスが微妙に異なるので互換性がない (はず)
* [cookpad/griffin-interceptors](https://github.com/cookpad/griffin-interceptors) に欲しい Interceptor がだいたいある

---

## [twitchtv/twirp](https://github.com/twitchtv/twirp)

* gRPC ではなく、Protocol Buffers を使った Twitch 独自の RPC フレームワーク
* 欲しいのは gRPC それ自体ではなく Protocol Buffers なんだ！的な
* Go, Ruby 等の実装がある
* HTTP/1.1 によるトランスポート
* Rack に準拠しているそうなので Middleware とかも使えるっぽい (自分で試すことなく適当なことを言っています)
* ストリームはない
    * ストリームはスケーラビリティとかいろいろ難しいから使わない方が良い、という主張 https://github.com/twitchtv/twirp/issues/70#issuecomment-470367807

---

## 趣味としての活動

---

## [yuya-takeyama/ruby-grpc_prometheus](https://github.com/yuya-takeyama/ruby-grpc_prometheus)

* 今さっき公開
* [grpc-ecosystem/go-grpc-prometheus](https://github.com/grpc-ecosystem/go-grpc-prometheus) と同等のことが Ruby でもできるよう目指している
* Prometheus 用のエンドポイントを expose してメトリクスを取ることができる
* Quipper は Datadog を使っているが、Datadog では Prometheus 形式のメトリクスを収集することが可能
    * https://qiita.com/mumoshu/items/9fb7988ccbefa88b61cd

---

## 雑: gRPC in Ruby (終)
【Unity】XBOXコントローラの左右トリガー入力を別々に取得する 

## 結論
Windowsなら、9th-axisと10th-axisを使えば左右別々に取得できます。
Androidだと14th-axisと15th-axisです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232140/2b7ffdf1-2ea6-bfd9-f3ee-279c154038e0.png)


## 概要
- Unityでゲームパッド（XBOX）を使うとき、[はこねさんの記事](https://hakonebox.hatenablog.com/entry/2018/04/15/125152)にお世話になりました。記事内でも述べられていますが、左右のトリガー入力はまとめて一つのfloat型で3rd-axisから取得しているので、左右のトリガーのそれぞれの押し具合が分からなくなります。

- Windowsでは、3rd-axisで左右混合の入力を取得できますが、9th-axisと10th-axisを使えば左右別々に取得することができます。

- Androidビルドでは3rd-axisは使えないですが、14th-axisと15th-axisで左右トリガーの入力が取れます。


## 検証環境
- Windows10 64bit + XBOX 360 コントローラ（有線）
- Oculus Go + XBOX ONE コントローラ（無線）
- Unity2017.4.24f1


## 参考記事
- [Unityでゲームパッドからの入力したいからまとめてみる(XBox One Controller)](https://hakonebox.hatenablog.com/entry/2018/04/15/125152)
- [PART 11: USING AN XBOX ONE CONTROLLER WITH UNITY ON WINDOWS 10](https://ritchielozada.com/2016/01/16/part-11-using-an-xbox-one-controller-with-unity-on-windows-10/)
- [DEVELOPING WITH THE XBOX ONE-S CONTROLLER USING BLUETOOTH ON ANDROID AND UNITY](https://ritchielozada.com/2016/11/15/developing-with-the-xbox-one-s-controller-using-bluetooth-on-android-and-unity/)
- [Xbox controller triggers?](https://forum.unity.com/threads/xbox-controller-triggers.590398/)
pythonの__self__ってなんだよ


pythonはあまり詳しくないけど、マッチョな友達から質問が来たので調べてみた。
ついでに`__func__`もなんなのか解説。

## よくわかるコード

```python

class Cat:
    def __init__(self, name):
        self.name = name

    def say(self):
        print(self.name + ' ' + Cat.bunmatsu())

    @classmethod
    def bunmatsu(cls):
        return 'danya'

bob = Cat('bob')

print(bob.say.__self__ is bob) # True
print(bob.say.__func__ is Cat.say) #True
print(Cat.bunmatsu.__self__ is Cat) # True

```

`__self__`はインスタンスメソッドかクラスメソッドの読み出し専用特殊属性です。インスタンスメソッドの場合、そのメソッドを呼んだインスタンス自身を指します。クラスメソッドの場合、そのメソッドがあるクラスを指します。`__func__`はインスタンスメソッドの読み出し専用特殊属性で、生成元のクラスにあるメソッドを指します。

## 何故こんなフィールドが必要か？

Pythonのメソッドは、クラスに記述する際は引数`self`がありますが、実行する際は引数の数が変わっていますね。これは、インスタンスメソッドが内部で`__func__(__self__, *args)`を実行することで実現しているからです。（上の例で言えば`bob.say.__func__(bob.say.__self__)`と`Cat.say(bob)`は同じ結果になることを利用しています。)クラスメソッドの場合も同様です。

## このフィールドどこで使えるの？

知りません。mixinあたりでうまい使い方を思いつく人もいそう。





## 参考文献

[Python 言語レファレンス 3.データモデル 3.2標準型の階層](https://docs.python.org/ja/3/reference/datamodel.html#the-standard-type-hierarchy)
mysqlが起動しない。ERROR! The server quit without updating PID file の対処


参考：
http://mnmandahalf.hatenablog.com/entry/2017/10/03/002827
https://qiita.com/kanohisa/items/564035efd74d9c75bdcb


##エラー内容



```
$ mysql.server start

Starting MySQL
... ERROR! The server quit without updating PID file (/usr/local/var/mysql/username.local.pid).
```

##状況

・ mysqlやhomebrewをuninstall/install しても治らなかった
・ local.pid ファイルをtouchで作成しても、mysqlを起動させたら消える
・ local.pidやlocal.errにchownでユーザーネームやmysqlの権限を与えても治らなかった
・ 


##対処メモ 
手動でmysql.sockを作成する必要があった

```
$ sudo touch /var/lib/mysql/mysql.sock
$ sudo chown mysql:mysql /var/lib/mysql/mysql.sock
```
JSX

ReactJSは、ユーザーインターフェイスを構築するためにFacebookによって開発されたJavaScriptライブラリです。 ReactJSを参照して、それはJSXを言及せずに欠けているでしょう。 私がJSXについて学んだとき、私は何人かの人々がまだjsxの知識について少しあいまいであるか、単にそれを無視していることがわかりました。

それで、JSXとは何か、どんな場合にJSXで使われるか、なぜJSXをReactJSと一緒に使うべきなのか。

###１．定義
JSX = Javascript ＋　XML。 ほぼXML構文をJavascriptに変換して、プログラマがJavascriptを使用する代わりにXML構文でReactJSをコーディングできるようにします。 XML要素や属性やおよび子はReact.createElementに渡された引数に変換されます。
それが、XMLは何ですか？
XML－eXtensible Markup Languageは、W3Cによって提案された、他のマークアップ言語を作成することを目的としています。これはさまざまなデータ型を記述できる単純なサブセットなので、システム間でデータを共有するのに非常に役立ちます。最も典型的なのは、作成にXMLの構文を使用するHTMLハイパーテキストマークアップ言語で、ブラウザブラウザでデータを表示する場合に機能する柔軟でない要素と属性を持ちます。
XMLの構文は入れ子になったNODE構造上に構築されて、各ノードは次のように開始タグと終了タグを持ちます。

```html:demo.js
<ノード名>内容</ノード名>
```
- <ノード名>：開始タグです。このタグの名前は自分で定義します。
- </ノード名>：終了タグです。このタグの名前は開始タグの名前と一致する必要があります。
- 内容：このタグの内容です

したがって、基本的なjsx構文は次のようになります。

```jsx:demo.js
const element = <h1>Hello, world!</h1>;
```
FacebookはJSXを使用してUIコンポーネントを表示します。

###2. シンタックスJSX
JSXの構文はXMLに似ています。

- 開始タグと終了タグ

```html:demo.js
<JSXElementName></JSXElementName>
```
**ご注意：**終了タグの名前は開始タグの名前と一致する必要です。
- SelfClosingElement

```jsx:demo.js
<JSXElementName />
```
**ご注意：**JSXのフィールド名はhtmlと同じではありません、例えば：
HTML：

```html:demo.html
<div class="container">...</div>
```
JSX：

```html:demo.js
<div className="container">...</div>
```
- 中括弧で閉じることで、任意のJavaScript式をJSXに埋め込むことができます。

```jsx:demo.js
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);
```
- コンパイル後、JSX式は通常のJavaScriptオブジェクトになります。つまり、if文とforループの中でJSXを使用し、それを変数に割り当て、それを引数として受け入れ、関数から返すことができます。

```jsx:demo.js
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
```
- 引用符を使って文字列リテラルを属性として定義できます。

```jsx:demo.js
const element = <div tabIndex="0"></div>;
```
中かっこを使用して、JavaScriptの式を属性に埋め込むこともできます。

```jsx:demo.js
const element = <img src={user.avatarUrl}></img>;
```
###3. なぜJSXを使うのか
ReactJSでJSXを使用するように強制しません。純粋なJSのみを使用できます。しかし、ReactJSでJSXを使う理由はたくさんあります。

- XMLに似た構文、属性を表示するときのツリー構造を持つJSXを使用すると、JavaScriptで複数の関数やオブジェクトを定義して呼び出す必要がなく、複雑なコンポーネントを簡単に定義および管理できます。その構造を見ると、コンポーネントの意味を読みやすくなります。コードJSXはJSコードより短く、理解しやすいです。
- JSXはJavascriptのセマンティクスを変えません。
- HTMLタグの近くに書くことで、それは普通の開発者（デザイナーなど）がそれを容易に理解するのを助けます。そして、それは大した困難なしにコードを書くか、編集することができます。
python3.5にopencv3を入れる方法（ラズパイ編）

研究でラズパイを使っているのですが、画像処理をしなければならなくなったのでしぶしぶopencvを入れようと思いインストールしました。
しかし、どのサイトをみてもなかなかうまくいかなかったのでここにまとめておきます。

#まずはpipを使え
まず始めに以下を実行してください。


```
sudo pip3 install opencv-python
```


これで一旦opencvは入るはずです。

#pythonで確認
コマンドにpython3を入力するとpythonが使えるようになるはずです。
そこでまず

```
import cv2
```

を入力してください。
すると何かしらエラーが出るはずです。
そこでみて欲しいのが

```
ImportError: ~
```
というところで〜のところで足りないライブラリを教えてくれますので、それを随時

```
sudo apt-get install ライブラリ名
```

でインストールしていきます。

#この流れをあとは繰り返すのみ！
あとはこれまでの流れを繰り返すだけです。
cv2をインポートして、インポートエラーのライブラリをインストールして確認して、、、
おそらく二、三回でエラーがなくなるはずです。
メカニカルキーボード 軸 スイッチ についてのまとめ

# キーボードのスイッチについて

※ この記事には投稿者の感覚的表現が含まれています．

メカニカルキーボードには，キーひとつひとつにスイッチが内蔵されている．このスイッチに違いによって打鍵音，打鍵感が異なる．

## 打鍵感の違い

- linear  : 線形の一定の感触．（スッ）
- tactile : 押した感触がある．（カタッ）
- clicky  : クリック感がある．（カチッ）

スイッチは軸の色で種類分けされている．
スイッチを作っている会社によって，軸の色と機能に相違があるが，定番として不変な色を紹介．

## 有名な4軸

- <font color="red">赤軸   </font> 
    - linear  
- <font color="brown">茶軸 </font>  
    -  tactile 一般的なキーボードに近い押し心地
- <font color="blue">青軸  </font>  
    -  clicky  カチカチいい音だけどうるさい
- <font color="black">黒軸 </font> 
    - linear  赤軸より重い

## スイッチを作っているメーカー達

- [CHERRY (チェリー)](cherryamericas.com)
    - 1953年に起業したドイツのメーカー
    - 高い信頼性と耐久性
    - 有名なのは CHERRY MX軸
    - 日本のDIATEC社では，FILCOでMX軸を採用
- [GATERON (ガテロン)](gateron.com)
    - 中国のメーカー
    - CHERRY社と比べ，安価
- [Kailh（カイル)](kailh.com)
    - 中国メーカー，Kaihua社のスイッチ
    - こちらも安価
- [Razer(レイザー)](razer.com)
    - アメリカのメーカー
    - ゲーミングのキーボードやマウスを販売
    - 独自のキースイッチを搭載したキーボードを販売
    - 最近(2017年)，linearな軸キーボードを販売

<!--
# メーカーと軸によるスイッチの機能の違い

今回は，上記のメーカー4社による比較を随時行う．
|    |cherry|gateron|kailh|razer|
|:--:|:----:|:-----:|:---:|:---:|
|赤|dsfa <br> fsad||||
|茶|||||
|青|||||
|黒|||||
-->

＃ 最後に
キーボードを買うにしろ，自作するにしろ，一度打鍵感を試すべきです．
秋葉原に行けばいいと思います．

# 参考

- [An introduction to Cherry MX mechanical switches]
(http://www.keyboardco.com/blog/index.php/2012/12/an-introduction-to-cherry-mx-mechanical-switches/)
[初級] 5分で学ぶクラスタリング

## クラスタリング
クラスタリングには**階層的クラスタリング**と**分割最適クラスタリング**がある。

## 階層的クラスタリング


階層的クラスタリングはボトムアップ的にそれぞれのクラスタ間の類似度を求め、
類似度の高いクラスタ（つまり近い位置にあるクラスタ）を連結していく。

![cra.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177172/5192ca4d-e491-1b3a-b1f2-a193b28f1a02.jpeg)
出典：データ化学工学研究室(金子研究室)＠明治大学「階層的クラスタリング(クラスター分析)、近いクラスターを結合していく」2018/4/25

この類似度の置き方には、以下のようなものがある。

- 単連結法
クラスタ間で最も近いデータ同士の距離を類似度とする方法
クラスタの形が縦長だったりすることがある

- 重心法
クラスタ重心間の距離をとる方法でバランス型

- **Ward法** :thumbsup: 
  下で説明

比較的良好な結果を示すメジャーな方法としては **Ward法** が挙げられる。
これは”クラスタの重心と各データの距離の二乗和”と、”類似度を比較する2つのクラスタを一つのクラスタとしたときに同様に出した二乗和”の差を類似度として用いる。

## 分割最適クラスタリング
分割最適クラスタリングの代表手法は **k-mean(k平均法)** がある。
説明は[この記事](https://qiita.com/Octoparse_Japan/items/674e7dabc47b297f88ec)がわかりやすい。 :hand_splayed: 

ここで **k-meanの評価関数** について話す。
k-meanの評価関数は*各クラスタとそれに属するデータの距離の総和*である。
（各クラスタが評価関数を持つのではないよ！）

データの所属するクラスタが変わるということは、これは評価関数を小さくする。
クラスタ中心の更新はクラスタに所属するデータから距離の総和が最小になる場所を見つけているということで、これも評価関数を小さくする。

こういうことから、k-meanは評価関数を小さくするように機能することがわかる。

ただし、これで見つかるのは局所的な最適解である。
そのため、異なる初期値で複数回試してみて、
最も評価関数の最も小さいものを解とする必要がある。（単純にスラカーを比較するだけ）

## あとがき
自分用のメモですが、役に立てば幸いです。
なにか間違いがあればご指摘いただけるとありがたいです。 :bow:
Cognos Analytics レポートで条件によってレポート表示内容を変える条件付きスタイル

#条件付きスタイルを使う
図のように、特定の条件で背景色を付けたり、特定の列を出力させないなどの、条件でレポート表示をコントロールする「条件付きスタイル」を学びます。
![014.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/7dabbb65-9a56-101b-6bdc-cd3f2bd9916f.jpeg)


#手順
A1.Reportを出発点とする。
「数量」が800万以上の特に売れている製品ラインを目立たせたいとする。
![001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/7edaacc9-b15b-c190-6066-020bbb28cb41.jpeg)

リスト列の本体の「製品ライン」のプロパティから、「条件付きスタイル」を選択し、条件付きスタイルウィンドウで、「＋」の右側のプルダウンから「詳細な条件付きスタイルを作成...」を選択。
![002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/99a009d7-ec47-03ab-bf5c-43bef56e5ba4.jpeg)

名前を適当に記載し「＋」
![003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/35a4c9fd-1090-bcba-3cbe-22884c80a777.jpeg)

以下のように式の定義を記載し「OK」
![004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/3b02e39f-0d40-207c-e2ad-22009f1ab021.jpeg)

作成された条件の赤枠の鉛筆アイコンを選択し、「背景色」を指定。
※この条件に当てはまった場合、背景色をこの色で表現する、という意味。
![005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/0fd24571-137b-e098-96c5-db29cc78457b.jpeg)

レポートを実行すると、以下の表示となる。
![006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/9cafb4b1-0071-3233-365a-fb8c30dab32d.jpeg)

次に、レポートをPDF出力した場合は、特定の列（数量列）を表示したくないとする。

以下のように「数量」列の本体およびタイトルの両方をCtrlボタンを押しながら選択し、プロパティの「条件付きスタイル」から「詳細な条件付きスタイルを作成」
![007.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/d0eb9a9d-a5a9-d5f1-f026-573b2cfd46eb.jpeg)

名前を記載し「＋」から、以下の様に式の定義を記載。
**ReportOutput () = 'PDF'**
※ReportOutput()は関数で、図のようにf(x)タブのレポート関数から使用できる
![008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/cc4fda94-36ac-12e2-4b30-47b95c2d1140.jpeg)

追加された条件の鉛筆マークから、「詳細設定」タブを選択し、ボックスのタイプを「なし」に指定。
※この条件に当てはまった場合、「なし」つまり表示しないという設定。
![009.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/98a9f347-4dae-0c69-9fb8-9562af0c9af3.jpeg)

レポートをHTMLで実行してみる。「数量」列は表示されている。
![010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/44f3f8aa-1fce-c781-2778-5d3514f049be.jpeg)

レポートをPDF形式で実行してみる。
![012.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/00df3a4c-f4ad-2427-bc0f-7b9743d5c605.jpeg)

PDF形式では「数量」列が表示されない事がわかる。
![011.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147246/6cfc8de1-d6ff-d24b-dbb1-b8328c2b501c.jpeg)


#自己学習記事一覧
**Cognos Analytics をエンドユーザーの方に自己学習して頂くためのサイト**
https://qiita.com/shinyama/items/95885c7246dc413b6448
pyramidフレームワークで作成したプロジェクトに、alembicを追加する。（スキーマ管理）

pyramidのSQLAlchemyでプロジェクトを作成しておくこと
作成されたプロジェクトは、今回はhelloという名前でプロジェクト作成している
[ここで作成したものに追加した例です](https://qiita.com/noracorn92/items/23cb8754b063b9198fef)

## 仮想環境

```
source env3/bin/activate
```

## alembicのインストール

```
pip install alembic
```

## alembic用のiniファイルを作成
alembicコマンドで、初期化します。
今回は、mydbというディレクトリを作成に初期化したものを入れます。（第二引数）

```
cd hello
alembic init mydb
```

## DBへの接続用文字列を変更

```
vi alembic.ini
```
develop.iniを見ると、

```
sqlalchemy.url = sqlite:///%(here)s/hello.sqlite
```
のように書いてあるので、それで上書きします。


## 一番初めのalembicファイルを作成

```
alembic -c alembic.ini revision -m "initial"
```
こんな内容のファイルが作成されます。
スキーマ管理用のファイルで、upgradeはバージョンを上げた場合、downgradeはバージョンを下げた場合の挙動を記述します。

```
def upgrade():
    pass


def downgrade():
    pass
```
たとえば、テーブルの作成を例に作成します。

```
"""create table store

Revision ID: XXXX
Revises: YYYY
Create Date: 2019-04-13 12:23:59.707962

"""
from alembic import op
import sqlalchemy as sa
from sqlalchemy.sql.expression import text
from sqlalchemy.sql import functions as sqlf

Identifier = sa.BigInteger

# revision identifiers, used by Alembic.
revision = 'XXXX'
down_revision = 'YYYY'
branch_labels = None
depends_on = None


def upgrade():
    op.create_table(
        'Store',
        sa.Column('id', Identifier, primary_key=True),
        sa.Column('name', sa.Unicode(length=255), nullable=False, index=True),
        sa.Column('tel', sa.Unicode(length=13), nullable=False, index=True),
        sa.PrimaryKeyConstraint('id')
    )


def downgrade():
    op.drop_table('Store')
```

## スキーマファイルを適用します
これでupgradeが動き、テーブルが作成されています。

```
alembic -c alembic.ini upgrade head
```

## スキーマファイルの適用を戻す
リリースなどで失敗して戻したい場合は、以下のように戻します。
これでdowngradeが動き、テーブルが削除されます

```
alembic -c alembic.ini downgrade -1
```

## スキーマファイル追加
初回に追加したのを積み重ねていくことで、スキーマを管理します。

```
alembic -c alembic.ini revision -m "schema description"
```

## alembicの過去履歴を見る

```
alembic -c alembic.ini history
```

## mysqlにつなぐ場合
ユーザ名：test
パスワード：test
DB名：test

```
sqlalchemy.url = mysql+pymysql://test:test@127.0.0.1/test?use_unicode=true&charset=utf8
```
node.js 12 LTS(予定) がリリースされました

[Introducing Node.js 12 – Node.js Foundation – Medium](https://medium.com/@nodejs/introducing-node-js-12-76c41a1b3f3f)

サーバサイド JavaScript や、フロントエンド JavaScript ビルドを実現する [node.js](https://nodejs.org/) が、新しいバージョンである 12 をリリースしました！

node.js は偶数番号が Long Term Support となるため、 v8, v10 に続いてこの v12 が 2019 年 10 月 から LTS となる予定です([LTS戦略はこちら](https://github.com/nodejs/release))。

上記 Medium の記事を要約してみます。

## V8 エンジンを 7.4 へアップグレード

JavaScript エンジンである V8 エンジンがアップグレードされ、パフォーマンス向上や言語・ランタイムの更新が行われました。ハイライトとしては以下。

- [Async スタックトレース](https://v8.dev/blog/fast-async#improved-developer-experience): Chrome 開発者ツールにはすでに搭載されている、 async 利用時にもスタックトレースをうまく表示する機能
- [引数のミスマッチ時の高速化](https://v8.dev/blog/v8-release-74#faster-calls-with-arguments-mismatch): 定義した引数と異なる数(多くても少なくても)を渡すことが出来ますが、その際の速度を最大 60 % 高速化
- [Await の高速化](https://v8.dev/blog/v8-release-73#faster-await): await 時に `Promise` インスタンスを渡していれば、初期化処理を挟まなくなるため高速になる。[詳細](https://v8.dev/blog/fast-async#await-under-the-hood)
- [JavaScript パースの高速化](https://v8.dev/blog/v8-release-72#javascript-parsing)

など。

## TLS 1.3 サポート

TLS 1.2 と 1.3 はマイナーバージョンアップに見えますが、実態としてはかなり大きな変更です。 OpenSSL 1.1.1 が入ったことにより、サポートが可能になりました。

## デフォルトのヒープ制限を調整

デフォルトのヒープサイズが 700 MB から 1400 MB になりました。

## 起動速度の向上

ビルトインライブラリに対してコードキャッシュを生成することで、最大 30 % 程度の起動速度向上が見込まれます。

## ES6 Module サポート

`<script module>` という形式が今後一般的になっていきそうという話を[以前しましたが](https://qiita.com/il-m-yamagishi/items/119cd99197cd3e9b79c2)、その新しい実装が入りました。現在はまだ experimental フラグを付けないと利用できませんが、 v12 が LTS になる 10 月までにフラグなしでも利用出来るようになるかもしれないとのことです。[詳細](https://medium.com/@nodejs/announcing-a-new-experimental-modules-1be8d2d6c2ff)

---

node.js は後方/前方互換性を非常に重視していて、 v4 で書いたスクリプトが普通に v12 で動いたりします。今回もほとんどのコードがそのまま動くと思います。

特に ES6 Module 周りが進んでいて良い感じですね。今後に期待です。
Rails5でFacebook認証を導入する方法

# 環境
ruby 2.6.3
Rails 5.2.3

# 前提
deviseで、ログイン機能を導入しておく。

※参考サイト
https://ruby-rails.hatenadiary.com/entry/20140804/1407168000#devise-add-column-to-model

https://qiita.com/t12u/items/52721d3ea2ce1e605ae9

https://qiita.com/RYOSUKE310/items/2f9ec73aaecd4d80f997


#ハマるポイント
1.対象サイトについて、SSL証明書の発行が必須
→localで動作確認したい場合に困った.....

2.コールバックURLの実装
→ルートURLだけで、以前はよかったような....


#SSL証明書の発行
https://qiita.com/t12u/items/52721d3ea2ce1e605ae9
ここの説明通りに実装して行くと、localでもhttpsでサーバーを立ち上げることができる


#Facebook for developers側でコールバックURLの設定
有効なOAuthリダイレクトURIの設定の際に、
**URLの後ろに/users/auth/facebook/callbackをつける**

# 実際の実装手順
https://qiita.com/RYOSUKE310/items/2f9ec73aaecd4d80f997

##追加情報

```ruby:Gemfile(envファイルを使ってでID/PASSをgithubにプッシュしないように！！)
gem 'omniauth'
gem 'omniauth-facebook'

group :development do
  # 〜省略〜

  gem 'dotenv-rails'

end
```

```ruby:routes.rb(順番を逆にすると無限ループし、リダイレクトされない)
#　ここは、作成するアプリ毎で変える。ただ、コールバックURLの設定を先に読ませないと、エラーになる。

Rails.application.routes.draw do
      devise_for :users, controllers: {
        omniauth_callbacks: 'users/omniauth_callbacks',
        sessions: 'users/sessions'
      }
end
```

```ruby:config/initializers/devise.rb(絶対にID/PASSを直書きしない！！)
  config.omniauth :facebook, ENV["APP_ID"], ENV["APP_SECRET"], scope: 'email', info_fields: 'email,name'
```

DBのカラム周りに関して、NOT NULL制約をつけたり、色々と調整が必要な気もするので、調査でき次第、更新します！
docker-composeを使ったdjnagoアプリケーションの作成[基礎]

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているryota_miraidenshiです。
今回は、docker-composeでdjangoアプリケーションを作っています。
docker-comopseとdjangoはそれぞれ個別で勉強しましたが、いざ組み合わせてみるとなかなかうまく行かなかったのでここにまとめておきます。


#1.djnago-composeの作成
まずは、
https://docs.docker.com/compose/django/
このサイトをみてdjango-composeを作成していきましょう。
これは公式が出している手順なのでかなり信頼度は高いです。
今回、このサイトの通りDBにはpostgresqlを指定しています。

#2.docker-compose run web /bin/bash 
次に新しくターミナルを立ち上げて、このコマンドを入力します。
すると、webアプリのコンテナに入り、コマンド入力ができる状態になります。

#3.python manage.py startapp アプリ名
コンテナ内でアプリを立ち上げます。
その後に以下にアプリを追加します。

```プロジェクト名/settings.py
INSTALLED_APPS = [
    ...
    'アプリ名',
]

```



#4.マイグレート
アプリを立ち上げた時点でマイグレート（DBへ反映）を行いましょう。
マイグレートを行うには、マイグレーションファイルを作成してマイグレートをする必要があります。
まずは、現在のマイグレーションファイルを確認しましょう。
これはコンテナ内で行う場合のコマンドです。

```
 ➤ python manage.py showmigrations                                                                                               
App
 [X] 0001_initial
admin
 [X] 0001_initial
 [X] 0002_logentry_remove_auto_add
 [X] 0003_logentry_add_action_flag_choices
auth
 [X] 0001_initial
 [X] 0002_alter_permission_name_max_length
 [X] 0003_alter_user_email_max_length
 [X] 0004_alter_user_username_opts
 [X] 0005_alter_user_last_login_null
 [X] 0006_require_contenttypes_0002
 [X] 0007_alter_validators_add_error_messages
 [X] 0008_alter_user_username_max_length
 [X] 0009_alter_user_last_name_max_length
 [X] 0010_alter_group_name_max_length
 [X] 0011_update_proxy_permissions
contenttypes
 [X] 0001_initial
 [X] 0002_remove_content_type_name
sessions
 [X] 0001_initial
```

これをみると今回作成したアプリのマイグレーションファイルがありません。
（今回はjournalsというアプリを作りました。）

そこで、マイグレーションファイルを作りましょう。

```
docker-compose web exec ./manage.py makemigrations アプリ名
(コンテナ内：python manage.py makemigrations アプリ名)
```

その後にマイグレートを行いましょう。

```
docker-compose web exec ./manage.py migrate アプリ名
(コンテナ内：python manage.py migrate アプリ名)
```

すると以下のように感じでアプリが追加されたのを確認できます。

```
djangoProjectonDocker ➤ docker-compose exec web ./manage.py showmigrations                                                                                                
admin
 [X] 0001_initial
 [X] 0002_logentry_remove_auto_add
 [X] 0003_logentry_add_action_flag_choices
auth
 [X] 0001_initial
 [X] 0002_alter_permission_name_max_length
 [X] 0003_alter_user_email_max_length
 [X] 0004_alter_user_username_opts
 [X] 0005_alter_user_last_login_null
 [X] 0006_require_contenttypes_0002
 [X] 0007_alter_validators_add_error_messages
 [X] 0008_alter_user_username_max_length
 [X] 0009_alter_user_last_name_max_length
 [X] 0010_alter_group_name_max_length
 [X] 0011_update_proxy_permissions
contenttypes
 [X] 0001_initial
 [X] 0002_remove_content_type_name
journals <---------これ！！！！！！！！！！！
 [X] 0001_initial
sessions
 [X] 0001_initial
```

コツとしてはshowmigrationsを適宜行なって状態を確認することです。
ここはかなり大事ですので確実に行いましょう。


#models.py編集後、同様にマイグレートを行う
モデルを編集したら必ずマイグレートを行いましょう。


#あとはサイトを参考に！
これで基礎は出来上がりました。
あとは自分の好きなサイトでやっていきましょう！！
ちなみに自分は
https://www.djangobrothers.com/tutorials/blog_app/first_app/
このサイトでやりました。
WordPressプラグインのslugを取得する

# 概要
WordPress本番環境から開発環境をVCCWで建てるのにプラグインの`slug`一覧を手っ取り早く取得したい

# 管理画面からWordPressプラグインのslugを取得する
管理画面からプラグイン一覧に移動してコンソール開いて以下のJavaScriptを実行

```js
"- " + [...document.querySelectorAll("#the-list tr")]
  .map(el => el.getAttribute("data-slug"))
  .filter((x, i, self) => self.indexOf(x) === i)
  .join("\n- ");
```

こんな感じで取得できます

<img width="538" alt="スクリーンショット 2019-04-24 18.17.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74405/e1ba4dcc-af33-df3d-033a-c62c0b2db8e1.png">

あとはVCCWの設定ファイルにコピペするだけ
<img width="338" alt="スクリーンショット 2019-04-24 18.19.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74405/a6320531-fb53-5310-bd22-86845dcbd0fa.png">