OmniAICreator/Qiita-1.07M huggingface dataset:
TensorFlow for C API で CPU で推論を行う

漢なら, TensorFlow for C API で推論を極めたいですね!

やりましょう!

C API は主に言語バインディング用に提供されていますが, 特に CPU で推論だけさせたい場合は, C++ API よりも C API を利用するといろいろ楽になります.



# 利点

## API がわかりやすい

C++ だと多数のヘッダファイルを読み込んだり, 各種使える class やメソッド名を調べるのが大変です. 特に TensorFlow の使い始めだと理解するのに時間がかかります.

C API はヘッダファイルが一つであり, API もわかりやすくなっています.

## メモリ管理が明示的

メモリ確保, 解放のタイミングが明示的なのでメモリ管理がわかりやすい. メモリリークが気になる場合は ASAN(Aaddress Sanitizer) などを使えばだいたいトラッキングできます.

## リンクしやすい

C++ だと, アプリに libtensorflow をリンクする場合に ABI やランタイムライブラリ(stdlib)周りでリンクの問題が発生しやすいですが, C だとその問題がなく簡単に組み込みがしやすくなります.

特に Windows(Visual Studio)でリンクの問題が解決します.

# 欠点

## コード量が増える

C++ に比べれば明示的なメモリ解放など, コーディングする量が冗長になりやすい.

## 拡張しづらいかも.

C API で wrap してあるクラスやメソッドしか利用できないので, C++ で提供されている全ての機能が使えるわけでない.

# PRNet-infer を C API 対応にする

PRNet を C++11 で動くようにして単一画像からの 3D 顔復元を行う.
https://qiita.com/syoyo/items/34be69a4b3bfe9174eeb

を TensorFlow C API バージョンのブランチ `c-api` を作りました.

https://github.com/lighttransport/prnet-infer/tree/c-api

アプリ部分は C++ ですが, TensorFlow を C で呼び出すようにしています.

TensorFlow 公式から落とせる prebuilt パッケージは .so(dll) のみなので, Windows(Visual Studio)でビルドする場合にはインポートライブラリを作る必要があります.

すでに C API のサンプルと, インポートライブラリ入りの prebuilt package を公開している repo がありますので, こちらを利用しました. ありがとうございます.

https://github.com/Neargye/hello_tf_c_api

最近(2019/10)では TensorFlow オフィシャルでも prebuilt package がホスティングされています.

https://www.tensorflow.org/install/lang_c

ただ, tf のバージョンはちょっと古いです(URL を少しいじれば最新 tf version を取得できるときもある)

C API の利用サンプルは

https://stackoverflow.com/questions/44378764/hello-tensorflow-using-the-c-api

も参考にしました.

結果,

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Got success to run C++ based 3D face reconstruction PRNet-infer on Windows using TensorFlow for C API! 🎉🎉🎉🎉💯💯💯😍😍😍✨✨✨ 💪💪💪 TF C API greatly simplified linking TensorFlow library with C++ app! &gt;   <a href="https://t.co/FN8mARqil4">https://t.co/FN8mARqil4</a> <a href="https://t.co/uievsM3HHq">pic.twitter.com/uievsM3HHq</a></p>&mdash; Syoyo Fujita ⚡️ No ray tracing No life (@syoyo) <a href="https://twitter.com/syoyo/status/1040672959042670594?ref_src=twsrc%5Etfw">September 14, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Voila! Visual Studio 2017 で無事ビルドと動作できました.

Happy TensorFlow for C API programming!

# ひっかかったところと注意点

TensorFlow `v1.10` を使って気になったところです.

`TF_NewTensor` には, 適当に deallocator を作って渡す必要があります. `TF_DeleteTensor` のときに必ず deallocator を呼ぶようなので, deallocator に nullptr を指定してしまうと, とアクセス例外がでます.

Visual Studio ビルドだと, なぜかたまにアクセス違反がでます(0x5). アプリに問題があるのか, TensorFow の Windows ビルドに問題があるのか. 不明です.

TF 内部でリークするケースがあると, libtensorflow.so が release build になっているため, ASAN などで追いづらいです. tensorflow for c のソースコードをみるなり, デバッグビルドするなりして解決する必要があります.

# TODO

* 優秀な TensorFlow C++ 若人が, 人類史上最速で TensorFlow for C 若人へと昇華なされるスキームを確立する旅に出たい.
* ラズパイや Android などで動かしたい
* Emscripten 化すればブラウザでも動くかも?(tensorflow.js のほうが楽かな?)
CSSクラス指定ではまったこと 複数のクラスをまとめて指定するとき

.hoge.fugaと.hoge .fugaはだいぶ違う
(半角スペースのあるなし)

```html

<p class="hoge fuga"></p>

.hoge.fuga {
    // css code
}

<div class="hoge">
    <p class="fuga"></p>
</div>

.hoge .fuga {
    // css code
}
```

これのやっかいなところは、html上はclass名を半角スペースで区切って書くのにCSS上は区切らないところです。

参考サイト
[My Vector Space 人生は寄り道してなんぼ
CSSで複数のセレクタ名を並べる時の記述で間違えやすいこと]
(http://ooigawa-bitter-sweet.hatenablog.com/entry/2013/07/10/233000_1)
AWS入門 AWSアカウントの登録から静的サイトの表示まで

前 [なし]()
次 [AWS入門 EC2を使ったWebサーバー構築](https://qiita.com/tseno/items/47ae835933fd919772e6)

# サインイン&AWSアカウントの作成

https://aws.amazon.com/jp/

- Eメールアドレスは、gmailのエイリアス（xxxxx+aws123@gmail.com）を使うと便利。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/78119903-4585-3ceb-8f68-7cede40912bd.png)

名前、住所、クレジットカード登録、電話認証後、ベーシックプランを選択する。
マネジメントコンソールログイン後、右上から東京リージョンを選択する。


## S3を使ったWebサイト構築

### S3のマネジメントコンソールを起動

- 「バケットを作成する」を押す。
- 一意のバケット名、東京リージョンを選択して、作成を押す。
- 作成したバケット名のリンクを押す。
- アップロードを押す。
- ファイルを全て選択してドラッグアンドドロップする。

index.htmlをクリックして、リンクのURLをクリックしてもアクセス拒否される。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/c635eb3c-31cc-cbc1-1caa-06c938aa4dd0.png)

公開するファイルやフォルダを右クリックから「公開する」を押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/3dbaa61a-5e5d-716b-b66b-d9c11f5c8705.png)

index.htmlをクリックして、リンクのURLをクリックを押すと表示される。、

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/623ca579-0597-8119-39df-29368abae753.png)

### ドメイン名だけでアクセスできるようにする

バケット→プロパティ→Static website hosting 

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/ea188f27-49c0-6fa3-53f9-b3825b4f3b91.png)

上記エンドポイントをクリックすると、アクセスできる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/7ddb005c-d412-6ede-c12b-f6841fdc3923.png)

参考
[Amazon Web Servicesではじめる新米プログラマのためのクラウド超入門](https://www.shoeisha.co.jp/book/detail/9784798144696)
MVC開発で、保守のためにやって欲しいこと

E-R図を見ると大体そのサービスがどういうものなのか分かる。という話があるが、データというものはコード以上に寿命が長かったり、結局コードはデータを元に加工して何やかんやしているだけなのでデータを見ればサービスが分かるというのは必然的だ。

しかし、E-R図を見ただけで事細かな実装が分かるわけではない。となれば実際のコードを駆けずり回って読んで行き、断片的な情報から少しずつ読み取っていく必要がある。
これは相当に大変な作業だ。
特にフレームワークを使った開発では暗黙の了解的な部分が多かったり、簡単に分割できるためスッキリしすぎて逆によくわからないといったケースは存在する。

長期間の開発において保守の問題は常に存在する。
それをどう解決していくかによって、プロジェクトの成功や今後の利益、どれだけ続けられるのかといった事が大きく左右される。
今回はそれらの解決策を、MVCフレームワーク、特にRailsを例に出して紹介して行きたい。

# 初めて関わったサービスを理解するために
新しく既に開発中の案件にエンジニアとして配属された時、コードのどこから見るだろうか？
大体の場合、**SchemaかModel**だ。
何故ならどんなテーブルが存在し、どうデータを管理しているのか分かるだけでサービスの概要が掴めるから。
しかし今ある全てのSchemaやModelを見ていくわけにもいかない。大体の部分だけ流し見して雰囲気をつかのが最初にやるべき事だと思う。

ならどっちを見るか？

Modelだと思う。
特にRailsのSchemaは後からどんどん変更され、最初のSchemaとは大きくデータ構造が変更されている場合があり、マイグレーションファイルのみでの保存のため非常に該当データを探しづらい。
となれば大体Modelを見て概要だけ知りたいと思うだろう。

とは言えども問題がまだある。

1. **Model名**を見てなんとなくの心構えをする。
2. **Modelのリレーション**を見てデータのつながりを確認し、もしかしたらその時点でリレーション先のModelも少し見たくなるかもしれない。
3. Modelのメソッドやバリデーション、scopeをなんとなく見ていき、使われ方を掴む。
4. そのModelを使用しているViewやControllerで実際の処理を見て、どのようなデータのつながりで扱われているのかといった詳しい情報を掴む。

まあ、大体の流れはこのようなものだろう。

一番注目して欲しいのは、**Modelを軸に見ている**という点だ。

Modelを見ると様々な事が分かる。
Model同士のリレーションが分かる。
データの形式が分かる。
データの使われ方が分かる。

ではModelのそれぞれを見ていかないと概要が分からないのではないか？
これらの流れを見てきて一番思うのは、Model毎にまとめられた**どういう意味を持つのかコメントとして概要を書いていれば見た瞬間分かるのではないか？**という事だ。

*いやいや......[コードコメントにはWhy notを書くべきだよ](https://twitter.com/t_wada/status/904916106153828352)*
全く持って同意したい。

*コメントやドキュメントを保守するコストってすごく高いんだよ？*
いやはや、その通りで。

**世の中に溢れているModelが一目でどういうものなのか分かるようになってないんだから、そんなの無理に決まってるだろ！！！！！！！！
大体データの存在意義なんて、そう1ヶ月毎にぽんぽん変わったりしないだろ！！
もし変わってるんだったら設計が悪すぎるか、めちゃくちゃ特殊ケースの場合だけだろ！！！**

```ruby:app/models/scenario.rb
# 台本を管理し、概要や全体の文を保持する
# 行毎の詳細情報はLineが保持している
class Scenario < ActiveRecord::Migration[5.0]
```
これだけでこのModelが何をしたいのか、存在意義がほとんど分かったようなもの。
分かりにくい部分のデータの流れも一目瞭然。これ以上細かい情報が必要になればModelの中を見たり、ViewやController、Schemaを見に行けばいい話だ。
`Line`に行毎の詳細情報を保存していることも分かったので、そちらを見にいくといった流れもあるかもしれない。

# まとめ
たった1,2行のコメントをつけるだけで、最初のリーディングがどれだけコストが低いものになるか分かった。
それだけでなく、新機能追加や保守をする時に使われるModelの概要を把握したい時にぱっと見るだけで理解出来るため、作業コストが大幅に削減できる。
しかもここまで大枠の概要が1ヶ月毎で変更されることなどほぼあり得ないので、コメントの保守コストもほぼかからない。
それだけでここまでの利点が得られるのなら、やらない手はない。


# 補足
運用のためにエンジニア以外にもこの概要を簡単に見れる必要があるという場合であれば、外部ドキュメントにまとめるといった解決策もあるのかもしれない。
その場合少しコストは上がってしまうが、場合による。
Ubuntu on windowsのコマンドでつまずいたこと:18/09/15

# 概要
Windowsだけどbashを使いたい。PowerShellは（習得時間が確保できなくてまだ）使えない。
という自分はWindowsの開発者用機能であるUbuntu on windowsを使っているわけですが、
たまに変な部分で引っかかるので、それをこちらにまとめておこうかなと。

# クリップボード使えない問題 : 18/09/15
- 目標：クリップボードを入出力の為に使いたい
- 動機：クリップボードを使うことで、ファイルなどを意識せず、データを直接ストリームに入れて処理できる。
- 解決策・copy 
    - こちらはわりと簡単かつ安全でSystemの実行ファイルをたたくだけです。
    - /mnt/c/Windows/System32/clip.exe
    - こちらにパイプでつなぐことで、出力をクリップボードに指定できます。
    - ex) `$ echo hoge | clip`
- 解決策・Paste：
    - こちらは少し面倒
    - 前述のSystem32フォルダにはpasteに該当するものが見つかりませんでした。
    - そこでネットから拝借
        - https://www.c3scripts.com/tutorials/msdos/paste.html
        -![image.png](https://qiita-image-store.s3.amazonaws.com/0/222816/46dd95a3-9743-b0c8-5b63-4dfb664d8cf9.png)
    -上記のページにあるpaste.zipを落としてきて、同じフォルダに入れちゃいましょう
        - System32フォルダにはnotepadも含めて一通りのexeがあるので、パス通しちゃうのがおすすめ


# catコマンドで取り込んだデータが改行を残している問題 : 18/09/15
- 目標： catコマンドの動作を通常のubuntuと合わせたい
- 動機
    - 普通にcat->awkなどを使うと、なぜか元ファイルの改行をそのまま残していたりする
    - 他で使っていたコマンドがそのままだと通用しなかったりして面倒
- 解決策
    - `tr '\r' ' '`をはさんでおくだけです
    - 歴史的な経緯としてWindowsでは主に`\n\r`が改行コードとして使われています。
    - 結果として、普通の開業削除処理は意味を成しません
    - Windowsのファイルやテキストまわりで問題が発生されたら
rbenvでrubyのバージョンを上げたときに The `rails' command exists in these Ruby versions: となる

# 背景
rbenvでrubyのバージョンを上げた後にrails コマンドを使おうとすると、下記のようになってしまった。

```
$ rails --version
rbenv: rails: command not found

The `rails' command exists in these Ruby versions:
  2.4.2
```

新しくインストールしたrubyの中にrailsというgemが入っていないために起こっているようだ。

# 対処

新しくインストールしたruby環境にrailsをインストールすることをゴールとします。

```
# gem のupdate
$ gem update --system
# bundler のinstall
$ gem install bundler
# rails のinstall
$ gem install rails
```

```
# バージョンが表示されたらrails コマンドが使えるようになっている
$ rails --version
Rails 5.2.1
```

# gem install railsはオススメできない
`gem install rails` はその時利用しているバージョンのRubyのグローバルな環境にRailsをインストールすることになるのであまりオススメではないです。

個人的には小さなプロジェクトでもGemfileを使った依存gemの管理を行い、プロジェクト毎に依存gemを管理し、railsコマンドを実行するときは必ず `bundle exec rails` or `bin/rails` を使うのがいいと思ってます。

既存プロジェクトの場合はbundle installすれば、bin/rails ... でそのプロジェクトで利用しているrailsのバージョンを使った操作が可能です。
新規プロジェクトの場合は[こちらの記事](https://qiita.com/yuitnnn/items/b45bba658d86eabdbb26)がわかりやすかったです。
Github Desktopでログインできなくなった時の対処法

## この記事では

```text:Authentication_Failed
We were unable to authenticate with github.com.
Please enter username and password to try again.
```
というGithub Desktopのエラーメッセージが起きた原因とその対処法を２つ紹介します。

![error.png](https://qiita-image-store.s3.amazonaws.com/0/162655/5ee7f255-87ed-9a44-1265-17fe054b6eca.png)

## 環境
- OS: MacOS
- 対象: GitHub Desktop

## 原因１） GitHubアカウントで二要素認証を有効にした

Personal access tokensをパスワードとして使うとログインできるようになります。

### 解決手順

1. Githubアカウントの個人ページより、自分のアイコンをクリックして`Settings`に移動
2. 移動先の左側のサイドバーで`Developer settings`に移動
3. 移動先の左側のサイドバーで`Personal access tokens`に移動
4. `Generate new token`でトークンを生成<br>
（権限スコープは必要なものを選ぶ）

これで生成したトークンをパスワードとして使うことで、ログインできるようになることがあります。

参考: https://mycyberuniverse.com/web/how-fix-fatal-authentication-failed-for-https-github-com.html

## 原因２) macOS Hight Sierra 10.13.1 にOSをアップデートした

キーチェーンアクセスを操作するとログインできるようになるようです。

### 解決手順

1. `アプリケーション/ユーティリティ/キーチェーンアクセス.app`を開く
2. Appの左上にあるログインキーチェーンを一度ロックしたのちに解除

「そんな馬鹿な...」と思うような対応策ですが、これで多くの人が解決したとの報告をしています。

参考: https://github.com/desktop/desktop/issues/3263
ROS講座58 ROSのツール概要

# 環境
この記事は以下の環境で動いています。

| 項目 | 値 |
|:-:|:-:|
| CPU | Core i5-8250U |
| Ubuntu | 16.04 |
| ROS | Kinetic |

インストールについては[ROS講座02 インストール](https://qiita.com/srs/items/e0e0a9dc3f94c2d3348e)を参照してください。
またこの記事のプログラムはgithubにアップロードされています。[ROS講座11 gitリポジトリ](https://qiita.com/srs/items/25a56a6abda41dcf396e)を参照してください。

# 概要
ロボットの開発には普通のプログラムの開発とは違う特性があるので、ROSには専用のツールがいくつか存在する。これらのツールの関係性を説明する。

# ROSのビルドツール
## catkin
ビルド(いわゆる`make`)を行うツールです。ただc++のコンパイルをするだけでなく、リンクしているファイルのパッケージのパスを取得したり、インストールを行うこともできます。

# ROSのランタイムツール
実行時のツールです。以下の図にまとめます。

![basic_overview.png](https://qiita-image-store.s3.amazonaws.com/0/254442/b31b850b-087a-db4f-a8ff-6c1e0f9c862f.png)


## Rviz
ロボットの情報としては単純な値やコマンドではなく3次元座標の位置や姿勢があり、これの数字を見ただけで状況を理解することは容易ではないです。そこでこれらの3次元情報を可視化するのがRvizです。Rvizはロボットに送るデータを可視化することも、ロボットから戻ってくるセンサー情報を可視化することの両方ができます（ここら辺のどちらをどう表示するかのポリシーは決めるのが難しいところ）。

## gazebo
ロボットの作業において実機を動かすのは予想以上に大変なことです。また、試してみたい環境があった時にそれを現実で構成するのも難しいことがあります。そこで現実を模擬するのがシミュレーターです。

## ROSbag
ROSbagはROSの動作を記録するものです。ロボットを動かしている時は（それがsimであっても）それに手いっぱいで詳しい考察をする暇はありません。記録をとって後で記録を再生することで、詳しい考察や検証をすることができます。

## UI
実はROSはあまり人間向けのUIが豊富ではありません。Rvizで足りないところはWebUIや各種ツールを使って補う必要があります。

## ROSlaunch
図には入っていませんが、このランタイム環境を起動するのはroslaunchです。実機とsimとの切り替えもroslaunchを使えば簡単に行うことができます。

# 目次ページへのリンク
[ROS講座の目次へのリンク](https://qiita.com/srs/items/5f44440afea0eb616b4a)
正規表現でHTML要素を別の要素に置換する

Rubyでhタグをpタグに置換する必要があり、調べてもあまり参考になるサイト等がなかったので共有します。
ニッチすぎて誰が読むんだって感じですが、こういう事も出来るよって参考程度に、、、

まずしたい事は

```

hogehoge<h2>fugafuga</h2>oraora を hogehoge<p>fugafuga</p>oraora にしたい！！
```

まず素のh1タグをpタグにしたいだけなら

```

Hoge = "hogehoge<h1>fugafuga</h1>oraora"
Hoge.gsub(/<h1>(.*?)<\/h1>/, '<p>\1</p>') 
# => "hogehoge<p>fugafuga</p>oraora"
```
で置換できますが、要素に属性を付けたい場合や、h2からh4タグだけを置換したい場合は少し応用が必要です。

h2からh4をpタグに置換したい場合は

``` 

Hoge2 = "hogehoge<h1>fugafuga</h1>oraora<h2>uraura</h2>warawara"
Hoge2.gsub(/<h[2-4]>(.*?)<\/h[2-4]>/, '<p>\1</p>')
# => "hogehoge<h1>fugafuga</h1>oraora<p>uraura</p>warawara"
```

としたり、要素に属性が付いている場合は

```
Hoge3 = "hogehoge<h3 class='foobar'>fugafuga</h3>oraora"
Hoge3.gsub(/<h[2-4](.*)?>(.*?)<\/h[2-4]>/, '<p\1>\2</p>')
# => "hogehoge<p class='foobar'>fugafuga</p>oraora"
```


また、属性を取らなくて良いなら最初から

```
Hoge3.gsub(/<h[2-4] .*?>(.*?)<\/h[2-4]>/, '<p>\1</p>') 
# => "hogehoge<p>fugafuga</p>oraora"
```

とすれば属性が入っていてもいなくても置換できます！

もっといい方法や、間違っている箇所がありましたら指摘をお願い致します！！！
Android webview proxyについて

#結論
設定可能です。

#やりかた
・以下プロキシの設定を行うことで、webviewからのアクセスがproxy経由になります。
※ proxyは無料で提供されているものを使用

```java
    public class MainActivity extends Activity {
    
        @SuppressLint("SetJavaScriptEnabled")
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            Properties prop = System.getProperties();
            prop.setProperty("proxySet", "true");
            prop.setProperty("proxyHost", "146.120.176.60");
            prop.setProperty("proxyPort", "54766");
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            WebView  myWebView = (WebView)findViewById(R.id.webView1);
            myWebView.setWebViewClient(new WebViewClient());
            myWebView.loadUrl("https://www.ugtop.com/spill.shtml");
            myWebView.getSettings().setJavaScriptEnabled(true);
        }
    }
```

# 備考
アプリをバックグラウンドにした場合でも、端末の別ブライザには影響を与えないようだ。
（アクセス元IPがproxyのIPではなかったため。）
メカトロ講座03 c++でudp通信をする方法

#概要
異なるコンピューター間で通信をしなければならない場合で簡単に通信がしたい場合は、UDPを使ってソケット通信するのがお手軽です。
以外とLinuxのC++でUDPのプログラムを書くのは情報が散逸していて、簡単な書き方がなかったのでまとめておきます(windowsだとincludeの名前などが少し変わってしまうはず)。
UDPはTCPと違って原理上は一方向の通信です。到達したかの応答もなく、送るほうはただ送るだけ受けるほうは受けるだけで、コネクションの確立などの操作もなく、簡単なシリアルポートと同じように使えます。

#ソース

## 共通部分
初期化やcloseの処理をしています。

```c++:simple_udp.h
#include <sys/types.h>
#include <sys/socket.h>
#include <netinet/in.h>
#include <arpa/inet.h>
#include <unistd.h>
#include <string.h>

class simple_udp{
	int sock;
	struct sockaddr_in addr;
public:
	simple_udp(std::string address, int port){
		sock = socket(AF_INET, SOCK_DGRAM, 0);
		addr.sin_family = AF_INET;
		addr.sin_addr.s_addr = inet_addr(address.c_str());
		addr.sin_port = htons(port);		
	}
	void udp_send(std::string word){
		sendto(sock, word.c_str(), word.length(), 0, (struct sockaddr *)&addr, sizeof(addr));
	}
	
	void udp_bind(){
		bind(sock, (const struct sockaddr *)&addr, sizeof(addr));

	}
	std::string udp_recv(){
		#define BUFFER_MAX 400
		char buf[BUFFER_MAX];
		memset(buf, 0, sizeof(buf));
		recv(sock, buf, sizeof(buf), 0);
		return std::string(buf);
	}
	void udp_recv(char *buf, int size){
		memset(buf, 0, size);
		recv(sock, buf, size, 0);
	}
	
	~simple_udp(){
		close(sock);
	}
};
```

## 送信側
送信側は特に考えることはありません。相手のアドレスとポートを指定してクラスを作成して、送信メソッドを実行するだけです。
コネクションの確立などの操作は必要ありません。

```c++:send.c
#include <stdio.h>
#include "simple_udp.h"
simple_udp udp0("127.0.0.1",4001);

int main(int argc, char **argv){
  udp0.udp_send("hello!");
  return 0;
}
```

## 受信側
受信側ではアドレスは`0.0.0.0`を指定します（たしか、送信アドレスが何でも受け入れるという意味のはず）。ポートは送信側と合わせましょう。
受信前に`udp_bind()`を実行します。これで受信待ちの状態になります。`udp_recv()`で受信データを取得します。ここでブロッキングになることに注意

```c++:recv.c
#include <stdio.h>
#include <string.h>
#include "simple_udp.h"
simple_udp udp0("0.0.0.0",4001);

int main(int argc, char **argv){
  udp0.udp_bind();
  while (1){
	std::string rdata=udp0.udp_recv();
	printf("recv:%s\n", rdata.c_str());
  }
  return 0;
}
```

# 目次ページへのリンク
[ROS講座の目次へのリンク](https://qiita.com/eri_aka/items/5f44440afea0eb616b4a)
Dockerに入門してみました。OSのベースイメージって何？

[Dockerに入門してみました。入口編。](https://qiita.com/forest1/items/18856bf3778404cb512a)
の続きです。

# ベースイメージにOSが有る謎
Docker環境を定義するDockerfileでは、
DockerHubとかで公開されているベースイメージを元にコンテナ環境を構築します。

その中には、UbuntuとかCentOSとかのイメージもありますが、
Dockerは仮想化によりホストOSの上で別のOSを動かすような仕組みでは無かったはずです。
どういうことでしょう？

Ubuntu環境でCentOSのDockerを動かすことが出来るということでしょうか？

# 異なる"ディストリビューション"が共存可能
UbuntuとかCentOSは、ディストリビューションと呼ばれており、
Linuxカーネルは同じで、その上に載っているコマンドとか設定が違うだけのものです。

なので、
Docker環境でもアプリはホストOSのLinuxカーネルをそのまま利用します。

コマンド類については、
Dockerコンテナで移動させたルートディレクトリ環境に、そのOS用のものを格納します。

これにより、アプリから見て、まるで別OSで動いているかのように**見せかけて**いるのです。

そういう意味では、WindowsとかMacOSのように、本当に別種類のOSを動かすことは出来ません。
Twitterのタイムラインに現れるアカウントを根こそぎいただく

# 日本のどこかで起こっていること
「どうした、元気がないな、また凍結か？」
「ああ」
「大変だな」
「[ふざけた仕様変更](http://www.itmedia.co.jp/news/articles/1808/15/news031.html)があってな、何がTwitterルールだ」

ただなにが困るって、凍結されると自分のフォロー一覧が見えなくなる。情報のアンテナとしての利用に困る。ああ困る。
ということでフォローの一覧（の一部）を回収しようそうしよう。


# どうしよう
TLを遡ることはできるので、マウスでグリグリ遡る。とにかく長く。
いくらほじくっても出てこない、ほとんど発言しなかった人はこの際

![Twitter (3).png](https://qiita-image-store.s3.amazonaws.com/0/48966/2af24686-5d31-c28e-fd29-d57bbc08e3e6.png)

で、consoleでこれを叩く。
あとはコピーするなり何なりと。

```js
Array.from(document.querySelectorAll("span.username.u-textTruncate")).map(e=>e.innerText).filter((x, i, self) => self.indexOf(x) === i).toString()
```


こうすればmap不要か。

```js
Array.from(document.querySelectorAll("span.username.u-textTruncate")).map(e=>e.innerText).filter((x, i, self) => self.indexOf(x) === i).toString()
```

# 何やってんだ

![ɐǝɹpuɐǝuoq  boneandrea さん   Twitter.png](https://qiita-image-store.s3.amazonaws.com/0/48966/3197e839-3e7d-74e5-0249-7df49f966c44.png)

赤枠の内容を取ってきてるだけですね。
困ったのは

- document.querySelectorAll()がNodeListを返すがmapが使えないので無理やり配列にした
- jsのArrayにはuniqueがないんだなー

# だめなところ
凍結されてること以外では、

- 他の人のリツイート元のアカウントも入ってくる
- [Twitterルールの改定](http://www.itmedia.co.jp/news/articles/1808/15/news031.html)がFuc*in
pecoってAWS System Manager Session ManagerでEC2にアクセスする

SSHを使わずEC2にアクセスできることで話題になった(?)Session Manager

- [AWS Systems Manager Session Manager のご紹介](https://aws.amazon.com/jp/about-aws/whats-new/2018/09/introducing-aws-systems-manager-session-manager/)
- [SSH不要時代がくるか!?AWS Systems Manager セッションマネージャーがリリースされました!](https://dev.classmethod.jp/cloud/aws/ssm-session-manager-release/)
- [AWS Systems Manager Session Manager for Shell AccessでMacからLinux EC2インスタンスに端末でアクセスする](https://dev.classmethod.jp/cloud/ssm-session-manager-from-mac-to-linux-ec2/)


便利なんですが、いちいちコマンド打つのも面倒なので、pecoってみました。
即席なのでアドバイス頂けると歓喜します。

それでは行ってみましょう。

## 必要なもの
- peco
- aws-cli v1.16.12
- aws ssm agent v2.3.50.0


こちらを参考にaws-cli, ssm agentをインストール/アップデートするといいと思います。
[AWS Systems Manager Session Manager for Shell AccessでMacからLinux EC2インスタンスに端末でアクセスする](https://dev.classmethod.jp/cloud/ssm-session-manager-from-mac-to-linux-ec2/)


## 本題のssm-peco

1. EC2のTag:Nameをpecoで一覧に出して選択
2. 選択したTag:NameからInstance Idを取得
3. ssm start-session

```bash:ssm-peco.sh
#!/bin/bash

# Tags.Name取得
export NAME_SSM2EC2=$(aws ec2 describe-instances \
    --query "Reservations[].Instances[].Tags[?contains(Key, \`Name\`)].Value[]" | \
    sed -e 's/[]" ,\[]//g' | \
    sed -e "/^$/d" | peco)

# instance-id取得
export ID_SSM2EC2=$(aws ec2 describe-instances --query "Reservations[].Instances[?contains(Tags[].Value, \`${NAME_SSM2EC2}\`)].InstanceId[]" | sed -e 's/[]" ,\[]//g' | sed -e '/^$/d')
aws ssm start-session --target ${ID_SSM2EC2}
```


## 使うとこんな感じ

1. `./ssm-peco.sh`を実行
![image.png](https://qiita-image-store.s3.amazonaws.com/0/222199/e58170c4-b598-1b86-17c2-8c0de2e83d32.png)

2. 接続先を指定してEnter
![image.png](https://qiita-image-store.s3.amazonaws.com/0/222199/15e3503d-a5df-3375-d0de-4f93c829c509.png)


## さいごに
オンプレの踏み台使っているようなところはどういう対策をするのでしょうか。  
CloudTrailで証跡取れるから要らなくなるのかな?
![image.png](https://qiita-image-store.s3.amazonaws.com/0/222199/74252e9e-a069-9159-eb05-2fbf7eaee217.png)
実行環境を記入するvimコマンド

READMEとかに自分の環境を載せたほうがいいんだろうけど、
なんかめんどくさい...

こういうことよくありますよね.

じゃあ`:EnvInfo`って打ったら、
こんなふうに環境情報が記入されるような設定を入れちゃいましょう.:thumbsup_tone1::thumbsup_tone2::thumbsup_tone3:

```
4.15.0-34-generic

Python 2.7.15

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=16.04
DISTRIB_CODENAME=xenial
DISTRIB_DESCRIPTION="Ubuntu 16.04.5 LTS"

kinetic
```

## 以下vimscript.

私はpython使うのでpythonのヴァージョンを表示させていますが、
これをcmakeだったりのヴァージョンに変えたりアレンジして使ってください.

```
command! EnvInfo call EnvInfo()
function! EnvInfo()
    " carnel version.
    execute ':r! uname -r'
    " python version.
    execute ':r! python -V'
    " Os version.
    execute ':r! cat /etc/lsb-release'
    " ros version.
    execute ':r! rosversion -d'
endfunction
```

## Using
vimにて、以下のexコマンドを実行する.

```
:EnvInfo
```
Gitで作業ブランチにコミットした内容だけを表示したい

```git diff master mybranch```
では、masterとmybranch 両方の対応が出てしまいます。

この時は、
```git diff master...mybranch```
とします。
これで、masterとの分岐点からmybranchに入れた内容だけが表示されます。
set.seedでの乱数固定を解除する

例えば、関数Aはユーザーが乱数を固定して何かしたいものだとして、関数Bは乱数を固定せず何かしたいものだとする。

```{R}
A <- function(seeds=123){
	set.seed(seeds)
}

B <- function(){
	print(runif(1))
	print(runif(1))
	print(runif(1))
}
```

もし関数Bを実行する前に、関数Aを実行してしまった場合、例えそれが関数の中で評価されたものだとしても、乱数が固定された状態が続いてしまうらしい。

```{R}
A()
B()
# > A()
# > B()
# [1] 0.2875775
# [1] 0.7883051
# [1] 0.4089769

A()
B()
# > A()
# > B()
# [1] 0.2875775
# [1] 0.7883051
# [1] 0.4089769
```

関数Aがテストデータ生成、関数Bが乱数を元にしたアルゴリズムだったりした場合、乱数が固定されて毎回同じ結果を返しているだけなのに、やけに収束が良いアルゴリズムだと勘違いしてしまいそうだ。

なので、set.seed(数字)のあとは、以下のように必ずどこかでset.seed(NULL)を入れないと、予期せぬことが起こりそう。

```{R}
A <- function(seeds=123){
	set.seed(seeds)
	set.seed(NULL)
}

B <- function(){
	print(runif(1))
	print(runif(1))
	print(runif(1))
}

A()
B()
# > A()
# > B()
# [1] 0.7819413
# [1] 0.4793704
# [1] 0.8743641

A()
B()
# > A()
# > B()
# [1] 0.7548444
# [1] 0.07935513
# [1] 0.7085605
```

```{R}
A()
B()
# > A()
# > B()
# [1] 0.2875775
# [1] 0.7883051
# [1] 0.4089769

A()
set.seed(NULL)
B()
# > A()
# > set.seed(NULL)
# > B()
# [1] 0.5758005
# [1] 0.4120173
# [1] 0.2110562
```
Cloud Spannerでテーブル一覧を取得する

ドキュメント読んでも、InstancesのListやDatabaseのListを取るAPIはあるけど、table一覧はなさそう。
MySQLでいうところの `SHOW TABLES;`みたいなやつはないのかと調べたら、以下のようなクエリで取れました。

```SQL
SELECT
  t.table_name
FROM
  information_schema.tables AS t
```

空のDatabaseに対してやると、以下のようなtableが取得できます。

```
COLUMNS
COLUMN_OPTIONS
INDEXES
INDEX_COLUMNS
SCHEMATA
TABLES
```

上記のデフォルトで作られるtableを除いて、ユーザが作ったテーブルだけ取得したい場合は以下のようなクエリになります。

```SQL
SELECT
  t.table_name
FROM
  information_schema.tables AS t
WHERE
  t.table_catalog = '' and t.table_schema = ''
```

これ探すの苦労したけど、ドキュメントに思いっきり書いてあった
[Information Schema  \|  Cloud Spanner Documentation  \|  Google Cloud](https://cloud.google.com/spanner/docs/information-schema)
cordova(Ionic1.3)+Laravelで画像のアップロードを実装する

今回、仕事で画像のアップロード機能を持ったサイトを作ることになりました。
でも、作ってみると意外と大変でした…。

#Cordovaでファイルアップロードを作る上であった問題点
・ファイルのアップロードには$cordovaFileTransferが使えない（←デプロイしようとするとcordovaFileに統合されたと書いてあるがレファレンスにも乗っていない
・そもそもcordovaFileで取得できるのはファイルパスだけ（FileやBlobではない）
・FileやBlobにするにはJavascriptでFileReaderを起動しなくてはいけないが、なぜかIonic1では動かなかった

#解決方法
・ファイルの取得にはcordovaFileではなくcordovaCameraを使用する（※CordovaCameraのソースとしてCamera以外にphotoalbumを選択できるので、ローカルの写真をアップロードするならこれでOK）
・CordovaCameraのコールバックオプションをDataURLにする。
・DataURLにしたものをPHPのエンドポイントに向けて投げる。

#laravel側での問題点
・どうにかしてDataURLをデコードして保存したい。

#decodeの時に気をつけること
・”data:image/jpeg;64base,”で始まるが最初のこの文字列はデコード対象に入れてはいけない。
※ちなみに、”data…”の文字列を含めた形でブラウザのアドレスバーにそのまま貼り付けると、画像がブラウザに表示されます。つまり、データとしては"data…"の部分がないと成り立たない。
Go言語でJSONを扱う

# Go言語でJSONを扱う

Go言語でJSONを扱うことがあったので知見をまとめていきます．

## JSON形式のレスポンスを取得する

ツイッターなどのAPIにリクエストを送って情報を取得する時，JSON形式で返却されることが多いと思います．
Go言語では受け取るJSONの形式と同じ構造の構造体を定義して，その構造体にはめ込む形でJSONを取得します．

### シンプルなJSON形式を取得

まずは，オーソドックスなJSONを取得します．例えば，以下のような形式のJSONが返ってきたとします

```
{
  "name": "tokumaru",
  "age": 20,
  "job": "student"
}
```

そのためにGo言語では以下のような構造体を定義します．

```go
type User struct{
  Name string `json:"name"`
  Age int `json:"age"`
  Job string `json: job`
}
```

### 文字列を構造体に格納する

`userStr`という名前の文字列型として先ほどのJSONを受け取った場合は以下のように構造体に格納します．

```go
var user User
err := json.Unmarshal([]byte(jsonStr), &user)
```

`json.Unmarshal()`はJSON形式のbyte型の配列を受け取って構造体にバインド的なことをする関数なのでbyte型の配列にキャストしています．

### ＊注意点
構造体の後ろの

```go
.. `json: "name"`
.. `json: "age"`
.. `json: "job"`
```

は受け取るJSONのキーと同じ名前にしないといけません．また，構造体の要素の名前の頭文字は大文字にするというルールもあります．小文字にして`User.name`みたいな感じでアクセスしようとすると値が取得できません．


### 配列形式のJSONを取得

次に，先ほどのJSONを配列形式にした以下のようなJSONがあったとします．

```
[
  {
	"name": "tokutoku",
  	"age": 21,
  	"job": "web"
	},
	{
  	"name": "toku",
  	"age": 20,
  	"job": "student"
	},		
	{
  	"name": "hoge",
  	"age": 22,
  	"job": "firefighter"
  }
]
```

この場合は，`User`型の配列なので以下のように格納します．

```go
var friends []*User
err = json.Unmarshal([]byte(fiendsStr), &friends)
```

### JSONを構造体の一部に格納する

次に，今までの応用として以下のような構造の構造体があったとします．

```go
type User struct {
	Name string `json:"name"`
	Age int `json:"age"`
	Job string `json:"job"`
	Friends []*User `json:"friends"`
}
```

この，`Friends`の部分に先ほどの配列形式のJSONを保存したいと思います．その場合は，このように格納できます．

```go
var user = &User{}
err := json.Unmarshal([]byte(fiendsStr), &user.Friends)
```

以下のようにも書けます．

```go
var user *User
user = &User{}
err := json.Unmarshal([]byte(fiendsStr), &user.Friends)
```

ポイントは，**ポインタに空の構造体のポインタを代入している**とこです．

```go
var user *User
err := json.Unmarshal([]byte(fiendsStr), &user.Friends)
```

これだとエラーが出ます．ヌルポインタにアクセスしようとしたから？みたいな感じです．初級者が気を抜くとやりがちです．~~自分のことです~~

ここまでで...

### 受け取るJSONの形式がわからない場合は？

って疑問が浮かぶと思います．その場合に便利なものがあります．`interface`です．なんでも受け取ります．以下のように使います．

```go
var friends interface{}
err := json.Unmarshal([]byte(fiendsStr), &friends)
```

構造体にレスポンスが格納できなくてなんで？って時にこれ使ったらいいかもです．


## いちいちAPI叩いてテストするのって

めんどいです．

いちいち

アクセストークン取得して，JSON取得して，受け取れてなくて，コード直して，実行して，アクセストークン..

..めんどい

てかそもそもさっきのヌルポインタにアクセスしようとしてたり，API以前の問題だったとか，いちいちリクエストしてテストしてたらしんどいので，自分でレスポンス形式のJSONを文字列で定義してテストしたいこともあるかもしれません．その場合は，このような方法があります．

```go
func main() {
  userStr :=
 `{
    "name": "tokumaru",
    "age": 20,
    "job": "student"
  }`
  var user User // 記事の最初に定義した構造体
  err := json.Unmarshal([]byte(userStr), &user)
}
```

JSON形式の文字列をベタ書きして格納する方法です．ポイントはバッククオーテーション(`)で囲んでいる点です．これにより改行しても大丈夫になってます．

また，キーはダブルクオーテーション`""`で囲んで，後ろにカンマをつけます．どう階層の要素の最後にはカンマはつけません．つけてたら怒られます．


## まとめ
ざっくりとGo言語でのJSONの扱い方を紹介しました．本当は効率のいいメモリの使い方とか，実行がめっちゃ早いコードを極めるとかしたいですが，基礎の文法を覚える段階で疲弊してしまっています．．今回の記事でとりあげたような，普段よく使うけど気を抜くとハマるみたいなことを完璧にしてコーディングのスピードをあげたいと考えています．
rake taskでSQLクエリファイルを実行する

## 背景
Railsアプリケーションを開発する時に、rakeタスクを使って、データを弄ることはたまりあります。自分のメモとして残します。

汎用性を考えるとクエリファイルでクエリを書いて、rake taskを実行することにした。

## 実装
- rake task 作成

```ruby
# Rails 5ではrakeタスクをrailsコマンドで実行できるようになった
bundle exec ./bin/rails g task execute_query file
```

複数のクエリを実行できるようなrake taskを作る

```ruby
#!/usr/bin/env ruby

require 'awesome_print'

namespace :execute_query do
  task :file, %w[sql_file] => :environment do |_task, args|
    sql = File.open(args['sql_file']) { |f| f.read }
    # split multiple queries
    queries = sql.split(/;$/)
    # remove last blank line if exists
    queries.pop if queries[-1] =~ /^\s+$/
    ap queries

    ActiveRecord::Base.transaction do
      queries.each do |q|
        result = ActiveRecord::Base.connection.execute(q)
        result.each { |r| ap r }
        # TODO: deal with the query result
      end
    end
  end
end
```

- テストSQLを用意する

```sql
select *
from places
limit 1;

select *
from locations
limit 1;
```

- 実行してみる

```ruby
$ bundle exec ./bin/rails execute_query:file['./lib/tasks/test.sql']
[
    [0] "select *\nfrom places\nlimit 1",
    [1] "\n\nselect *\nfrom locations\nlimit 1"
]
[
    [ 0] 3,
    [ 1] "六本木ヒルズ",
    [ 2] "xxxx",
    [ 3] "106-6108",
    [ 4] xxx,
    [ 5] 9,
    [ 6] 1,
    [ 7] "",
    [ 8] 2017-04-18 03:14:05 UTC,
    [ 9] 2018-04-13 01:12:36 UTC,
    [10] 5,
    [11] "xxxx",
    [12] 0,
    [13] 0,
    [14] nil,
    [15] 1,
    [16] nil,
    [17] 0,
    [18] 0,
    [19] 0,
    [20] 107932,
    [21] 0
]
[
    [0] 5,
    [1] 1,
    [2] "xxxx",
    [3] 0,
    [4] 0,
    [5] 2017-04-22 04:06:42 UTC,
    [6] 2017-04-22 04:06:42 UTC,
    [7] 6,
    [8] 7181,
    [9] 0
]
```

## 参照
- https://stackoverflow.com/questions/8342642/how-can-i-import-a-sql-file-into-a-rails-database
leafletを鍛える。その8

#概要
leafletを鍛えてみる。
threeを、表示してみた。

#写真

![image.png](https://qiita-image-store.s3.amazonaws.com/0/18104/4be8676e-68f2-aa90-1e4d-6cf3510c5ec5.png)


#サンプルコード

```
var map = L.map('map').setView([37.9, 140.1], 12);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
}).addTo(map);
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var glLayer = L.canvasOverlay().drawing(drawingOnCanvas).addTo(map);
var canvas = glLayer.canvas();
glLayer.canvas.width = canvas.clientWidth;
glLayer.canvas.height = canvas.clientHeight;
renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true
});
renderer.setSize(450, 450);
var camera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
camera.position.set(100, 100, 100);
camera.lookAt(new THREE.Vector3(0.0, 0.0, 0.0));
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 0, 1);
scene.add(light);
var cube = new THREE.Mesh(new THREE.CubeGeometry(30, 30, 30), new THREE.MeshLambertMaterial({
    color: 0xff00ff
}));
scene.add(cube);
renderer.render(scene, camera);
function drawingOnCanvas(canvasOverlay, params) {
    renderer.render(scene, camera);
}


```

#成果物

https://embed.plnkr.co/a194GEqaRLlPMr91C7cS/


以上。
Google検索 — 全角スペースが嫌いだ！ 美的なエンジニアのためのググリ方

最近の先生は優れているので、もはやスペースなしで検索する。

だいたい問題なくググれる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/694c6653-713e-2360-2348-503bb7a0a472.png)

スペースを入れた場合と結果は少しだけ違う模様。

(だけど全角スペースを使わない美意識のほうが大事)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/017d26fe-ba95-abd7-fc7f-d2ff8b9d7792.png)


## 元の問題

全角スペースが嫌。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/cdd10ee6-1ac6-26a1-03b9-f14938e25cc3.png)

IMEのかな切り替えも嫌。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/3f209815-4ed9-be53-cca7-c6480b52233f.png)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
IMEのかな切り替えが嫌いだ！ エンジニアの英語単語のググリ方

`keyword imi` 

とかでググればだいたい日本語サイトがヒットする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/53bfe6db-39e6-8ef2-70c2-d8c1c74c791f.png)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
【未経験向け】じゃあrails g で何打てばいいの？

プログラム未経験の方はやっぱりコマンド打って操作したり、ファイル作ったりするのちょっと抵抗あると思うんですよ。
実際、僕がそうです笑
Railsでアプリ作る時にまず打つのが「rails new アプリ名」。
じゃあその次に「rails g ◯◯」何ですけど、書き方やら何やらで毎回ググって見返すのでこれだけ見ればいいようにまとめてみました。

#自分でアプリを作る時

```
rails g controller Blogs index show new
```
**コントローラ**と**ビュー**(index,show,new)を作る。
ついでにコントローラの中身、アセット(cssやjsを書くファイル)、ルーティング、テスト（コントローラ用)、ヘルパーまでできる。

```
rails g model Blog title:string content:text
```
**モデル**と**マイグレーションファイル**を作る。
ついでにマイグレーションファイルの中身(t.string :title　t.text :content)を書くとそのまま「rails db:migrate」できる
あとテスト(モデル用)も作られる。

この2つでOK
表にすると

|コマンド|コントローラ|ビュー|モデル|マイグレーション|アセット|ルート|テスト|ヘルパー|
|:-----------:|:------:|:--:|:----:|:---------:|:---:|:--:|:--:|:----:|
|controller|◯|◯|||◯|◯|◯|◯|
|model     |||◯|◯|||◯||



#マイグレーションファイルを作る時

```
rails g migration AddImageToBlogs image:string
```

**マイグレーションファイルのみ**作る。
「AddImageToBlogs」は例なのでマイグレーションファイルの命名規則に従って入力する。

|コマンド|コントローラ|ビュー|モデル|マイグレーション|アセット|ルート|テスト|ヘルパー|
|:-----------:|:------:|:--:|:----:|:---------:|:---:|:--:|:--:|:----:|
|migration||||◯|||||



#とりあえず全部作る時

```
rails g scaffold Blog title:string content:text
```

**コントローラ**、**モデル**、**ビュー**、**マイグレーションファイル**などが全部できる。
もともとRailsに用意されているブログ機能が作られるので適当なアプリでgemをテスト使用したいときなどに。

|コマンド|コントローラ|ビュー|モデル|マイグレーション|アセット|ルート|テスト|ヘルパー|
|:-----------:|:------:|:--:|:----:|:---------:|:---:|:--:|:--:|:----:|
|scaffold|◯|◯|◯|◯|◯|◯|◯|◯|



#まとめ

|コマンド|コントローラ|ビュー|モデル|マイグレーション|アセット|ルート|テスト|ヘルパー|
|:-----------:|:------:|:--:|:----:|:---------:|:---:|:--:|:--:|:----:|
|controller|◯|◯|||◯|◯|◯|◯|
|model     |||◯|◯|||◯||
|migration||||◯|||||
|scaffold|◯|◯|◯|◯|◯|◯|◯|◯|


コマンド使えば早く手軽に作れるようになるので使えるようになろう！
使わないと慣れないので早いうちから積極的に使うべき！（自分もですが笑）



#最後に
初めてQiita投稿してみました。
これから継続してアウトプットしていきたいと思います。
コンストラクタでAuth::user()を取得する方法

今更ではありますが、Laravel5.3より`Auth：：user()`がコンストラクタで取得できない仕様に変更されたみたいです。

ググって分かりづらかった部分をシンプルに書きます。

## どういうこと？

通常のactionでは取得できる `Auth::user()　` が、コンストラクタの中では同じように記述しても取得できません。

```php

class HogeController extends Controller
{
    private $user;

    public function __construct()
    {
        $this->user = \Auth::user();
        \Log::info($this->user);  // null
    }

    public function index()
    {
        \Log::info($this->user);  // null
        \Log::info(\Auth::user());  // 取得できる
    }
}
```

## 解決策

こんな感じで書いたらいいです。

```php

class HogeController extends Controller
{
    private $user;

    public function __construct()
    {
        $this->middleware(function ($request, $next) {

            // ココに書く
            $this->user = \Auth::user();

            return $next($request);
        });
    }

    public function index()
    {
        \Log::info($this->user);  //取得できる
    }
}
```

## さいごに

（参考）
[Laravel 5.3　コントローラのコンストラクタの重要な変更　ーララジャパン](https://www.larajapan.com/2016/09/24/laravel-5-3%E3%80%80%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%81%AE%E3%82%B3%E3%83%B3%E3%82%B9%E3%83%88%E3%83%A9%E3%82%AF%E3%82%BF%E3%81%AE%E9%87%8D%E8%A6%81%E3%81%AA%E5%A4%89%E6%9B%B4/)

>作者は、ユーザー認証はクッキーやセッションがあってこそ成り立つものであり、それが入ってくるのはコントローラのメソッドにおいてのrequestの引数である。それゆえにrequestがないコンストラクタでその情報を取得するのはデザイン上「悪い」と。

推奨される方法が気になるところ。
new Array()の罠

既出かもしれませんが、こんなくだらないことで累計数時間ハマって悔しいので

# つまずき
普段どうやって配列初期化してますか？
私は、

```javascript
const array = new Array(3).fill(null)
```
とやることが多いのですが、2次元配列を作ったときについ

```javascript
const matrix = new Array(3).fill(new Array(3).fill(null))
```
とやってしまい、ドツボにはまりました。

# 原因
なにが悪いかというと、

```javascript
matrix[0] === matrix[1] // true
```
です。鳥肌モノですね。
ご存知の通り配列は

```js
[] === [] // false
new Array() === new Array() // false
```
なのですが、Arrayをfillするとtrueになってしまうようです？

当然、配列は参照型なので、

```js
console.log(matrix[0][0]) // null
console.log(matrix[1][0]) // null

matrix[0][0] = "hoge"
console.log(matrix[0][0]) // "hoge"
console.log(matrix[1][0]) // "hoge"
```
しんどい。

# 対策
楽しようとせず、丁寧にfor文を回しましょう

```js
const matrix = new Array(3).fill(null)
for(let i in matrix) {
    matrix[i] = new Array(3).fill(null)
}
console.log(matrix[0] === matrix[1]) // false
```
または、

```js
let matrix = new Array(3).fill(null)
matrix = matrix.map(v => new Array(3).fill(null))
console.log(matrix[0] === matrix[1]) // false
```
ふぅ…

---

ちなみに関係ないですが、

```js
const matrix = new Array(3).fill(null)
for(let i in matrix) {
    console.log(typeof i) // "string"
}
```
世知辛いのじゃ
css,javascriptのOSScomponentまとめ

# buefy

bulmaとvueのフレームワーク

https://buefy.github.io/

# bulma

https://bulma.io/

# vuesax

https://lusaxweb.github.io/vuesax/

# Bootstrap + Vue

https://bootstrap-vue.js.org/

# vuetify

https://vuetifyjs.com/ja/

# material-kit

bootstrap4対応のマテリアルデザインのUIkit

https://demos.creative-tim.com/material-kit/index.html
【gem gon】Railsで定義した変数をさくっとJavascriptで使う

# こんな人に見て欲しい
Railsで定義した変数をさくっとJavascriptで使いたい方へ。

# 経緯

Javascriptの処理をcurrent_userのidによって条件分岐したい
『でもどうやったら変数もってこれるんだああああ(泣)』
そんなときってありませんか？

偶然にも僕は昨日そんなタイミングがありました。

ということで、四苦八苦して何とか解決するに至ったので記録に残しておきます。

# 環境
- macOS High Sierra
- ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin17]
- Rails 5.0.7
- gon (6.2.1)


# 手順
### ①gemをインストール
★Gemfileに以下のコードを記入する

```gemfile
gem 'gon'
```
★ターミナルで以下のコマンドを実行する

```terminal
bundle install
```

### ②application.html.erbに設定追加
★headタグ内に以下のコードを記入する

```application.html.erb
<%= include_gon %>
```

### ③controller.rbにJavascriptファイルで使いたい変数を定義
★controller.rbに以下のコードを記入する
※必要なのは『gon.current_id = current_user.id』の1行だけです。周りのコードに関してはお気になさらず...

```muscles_controller.rb
def index
  @muscle = Muscle.all.order("created_at DESC")
  if user_signed_in?
    gon.current_user_id = current_user.id
    # 左辺にはgon.〇〇〇という形式で変数の名前を記入する。(頭にgon!!)
    # この名前を使ってJavascriptファイルから変数を呼び出す。
    # 右辺には代入したいオブジェクト(値)を記入する。
  end
end
```

### ④Javascriptファイルで変数を使用
★上述の変数を使ってJavascriptファイル内で変数を定義する、そして使う

```muscle.js
$(function() {
    $(".action-btn").on("click", function () {
        var c_u_id = gon.current_user_id;
        //左辺にはこのJavascriptファイル内で使用する変数の名前を記入する。
        //右辺には先程controller.rbで定義した変数名を記入する。
        //あとは左辺に記入した変数名を使って、煮るなり焼くなり！！
        if(c_u_id != 1) {
            $(".muscle").addClass("protein");
            return false;
        }
    });
});
```

# おわりに
以上、gem『gon』を使ってRailsで定義した変数の値をさくっとJavascriptで使う方法でした。

『もっと簡単にできる方法あるよーーー！』『ここ間違っているよーーー！』等ございましたらご連絡いただけると幸いです。

※参考ページ
GitHub - gazay/gon: Your Rails variables in your JS
https://github.com/gazay/gon
Googleスライドでテキストを「真ん中」の「中央」揃えにする ( 2018-09 現在 )

[Google スライド](https://www.google.com/slides/about/)

## 例1. 手軽な方法

### Slide > Apply Layout > Caption Header

レイアウトから *Caption Header* を選ぶ

![image](https://user-images.githubusercontent.com/13635059/45522302-22028700-b7fd-11e8-8eb5-ece952877c66.png)

### 真ん中の中央揃えのテキストボックスが出来る

![image](https://user-images.githubusercontent.com/13635059/45522205-9557c900-b7fc-11e8-91ac-1ed4e0fa5605.png)

## 例2. 自分で設定

テキストボックスを選択状態にしておく

### "Align" を選ぶ

![image](https://user-images.githubusercontent.com/13635059/45521824-c20ae100-b7fa-11e8-9efd-b2b0f9f0e170.png)

ブラウザサイズが小さい場合は *More* の中にたたまれているかも

![image](https://user-images.githubusercontent.com/13635059/45521818-bf0ff080-b7fa-11e8-9d6d-42811aef2aa4.png)

### "Align Center" を選ぶ

![image](https://user-images.githubusercontent.com/13635059/45521628-c71b6080-b7f9-11e8-8051-7012bbc58934.png)


### "Align Middle" を選ぶ

![image](https://user-images.githubusercontent.com/13635059/45521632-caaee780-b7f9-11e8-95ee-3804c8c3fe55.png)


### 結果

![image](https://user-images.githubusercontent.com/13635059/45521558-70158b80-b7f9-11e8-9c78-09a9dbda1f35.png)

## Links

- [Gist](https://gist.github.com/YumaInaura/9ba60e61a42b69febed74376264bf334)
- [Medium—imported](https://medium.com/supersonic-generation/google-slide-align-text-center-of-middle-93a64b1486c0)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
【Rails基礎】自動でrubyのプログラムを読み込ませる

# rubyでは `require` を使ってプログラムを読み込ませます。

----------

でも、毎回 require を書くのはめんどくさいですよね。

```rb:users_controller.rb
require "app/models/user.rb"
require "app/controllers/application_controller.rb"

class UsersController < ApplicationController
  def index
    @user = User.all
  end
  ...
```

----------

# Rails には、このめんどくささを解消する「プログラムの自動読み込み」という機能があります。

----------

# 自動読み込みの概要

* ファイルをクラス（またはモジュール）単位で分ける
* クラスの名前と、ファイル名を対応させる
* すると、Railsがクラス名からファイル名を推測し、勝手に require してくれる

----------

## 命名規則

クラス名の先頭の大文字を小文字にする

```rb:user.rb
class User
  ...
end
```

----------

## 命名規則

クラス名の途中に大文字があったら、小文字に変えてアンダーバーで区切る

```rb:application_controller.rb
class ApplicationController
  ...
end
```

----------

## 命名規則

クラス（またはモジュール）がネストされているなら、ネストに応じたフォルダにファイルを置く。

```rb:sample/users_controller.rb
module Sample
  class UsersController
    ...
  end
end
```

----------

## まとめ

* Rails には「自動読み込み」という、勝手に `require` してくれる機能がある。
* この機能を利用するため、Railsでは、クラス（またはモジュール）ごとにファイルを分け、クラス名にちなんだファイル名をつける必要がある。
pipでpermission errorが出た時の対処法

Visual Studioを使ってPython環境を構築している場合、pipコマンドを使ってライブラリやモジュールなどをインストールしていますよね？このpipコマンドというのはコマンドライン（Windowsならコマンドプロンプトから利用できる例の黒い画面です！）から実行できるやつです。ディレクトリ設定はどこでもいいので、例えばルートからなら、
`C:\>py -m pip install hogehoge`
みたいな感じでhogehogeの部分に書かれた名前のライブラリ即ちPythonファイルなどの諸々をいい感じにインストールしてくれます。フォルダの場所は勝手に設定してくれるので気にしなくても大丈夫なようです。と言ってもその辺をブラックボックス化されるとここぞという時に困るのがわれわれエンドユーザーなのが悩ましいのですが…。

ところで、このpipコマンドを使用して必要なファイルをインストールしようとするとき、Permission Errorなるものが出る時があります。これは要するに管理者権限をpipプログラム側が持っていないことに由来するエラーですね。Windowsさんは少々頭が固いので、「pip？あんた誰？怪しい奴やな。ようし、ここまでは通してやるけど、こっから先はダメやで！」てなわけで、ユーザーしかアクセスできない（この文脈ではアプリケーションは「部外者」）フォルダを予め線引きしてあります。とはいえこんな場合でも解決法は簡単で、--userコマンドを付け加えればいいだけです。あとは自動的に処理されます。
`C:\>py -m pip install oauthlib --user`
こんな感じでOKです。細かいことが気になるあなたのために細かいことを補足しておくと、「-m」とか「--user」のようなコマンドの順序は何でも良いです。あれ？これは正確にはコマンドではないのかな…。何か他に正しい呼称があったかもしれませんがわかりません。勉強しておきます。
CMakeとvcpkgとDirectX関連ライブラリ

vcpkgでDirectXTK，DirectXTex，DirectXMeshなどをインストールし，CMakeから利用した際のメモです．

# [CMake](https://cmake.org/)とは
設定ファイル(CMakeLists.txt)から複数の環境向けにビルド用ファイルを生成してくれるツールです．
例えば，Windows向けにはVisual Studioのソリューションとプロジェクトを生成してくれて，Mac向けにはXcodeのプロジェクトを生成してくれます．

## CMakeのインストール

[CMakeの公式サイト](https://cmake.org/)からインストーラをダウンロードして，インストールします．

# [vcpkg](https://github.com/Microsoft/vcpkg)とは
Microsoftが提供するC++のライブラリマネージャです．

## vcpkgのインストール

手順が変わる可能性もあるので，基本的には[公式リポジトリ](https://github.com/Microsoft/vcpkg)のインストール手順を見てインストールしてください．

なお，PS> はPowerShellで実行する，ということです．PS#>は管理者権限でPowerShellで実行する，ということです．

```
PS> git clone https://github.com/Microsoft/vcpkg
PS> cd vcpkg
PS> .\bootstrap-vcpkg.bat
PS#> .\vcpkg integrate install
```

### 環境変数の設定

vcpkgのフォルダへのパスを環境変数VCPKG_ROOTに設定しておきます．

## vcpkgの基本操作

```
# ライブラリを探す
PS> .\vcpkg search directxtk
# ライブラリをインストールする (32bit版)
PS> .\vcpkg install directxtk:x86-windows
# ライブラリをインストールする (64bit版)
PS> .\vcpkg install directxtk:x64-windows
```

# CMakeとvcpkgの連携

vcpkgはCMakeと連携できるようになっています．元々のライブラリがCMakeの利用を想定している場合，find_packageなども使えるのですが，DirectXTKなどはそうではないため，若干注意が必要です．

CMakeLists.txtに次のような内容を用意します．

```
# バージョンは適当に指定
cmake_minimum_required(VERSION 3.12.0)

# vcpkgを利用するようにする
if(DEFINED ENV{VCPKG_ROOT} AND NOT DEFINED CMAKE_TOOLCHAIN_FILE)
    set(CMAKE_TOOLCHAIN_FILE $ENV{VCPKG_ROOT}/scripts/buildsystems/vcpkg.cmake CACHE STRING "")
endif()

project(...)

# インストールしたライブラリのヘッダファイルを探し，そのインクルードパスを追加する
find_path(WIC_TEXTURE_LOADER_INCLUDE_DIR DirectXTK/WICTextureLoader.h)
include_directories(${WIC_TEXTURE_LOADER_INCLUDE_DIR})

# find_libraryでインストールしたライブラリを見つけて，そのパスをターゲットにリンクする
find_library(DIRECTXTK_LIBRARY DirectXTK)
target_link_libraries(ターゲット名 ${DIRECTXTK_LIBRARY})

```

このように，DirectXTKなどは，find_pathやfind_libraryを利用してプロジェクトに組み込みます．
無料のNAS用OSに関する情報のまとめ

## はじめに
NAS用OSが市中に多数存在しており、
自宅でNASを構築する際にどのOSを選択すべきか判断に困ったため情報をまとめてみました。
※自分用のメモなので説明が不足している点等もあるかと思います。ご了承頂ければ幸いです。

## そもそもNASとは？
- NAS(**N**etwork **A**ttached **S**torage)の概要
  - ネットワークに直接接続し、
    PCなどからネットワークを通じてアクセスできる外部記憶装置
  - 複数の端末間で共有ディスクとして使用することが可能
- NASの構成
  - コンピュータ本体(CPU、メモリ、ネットワークインタフェース)、記憶装置、OS、管理ソフト/機能等から構成される≒通常のコンピュータとほぼ同じ
        - →余ったPCをNASに換装することが可能
        - 販売されているNASはNAS用に特化した構成・機能になっているものが多い


## 無料のNAS用OS一覧
- FreeNAS
- XigmaNAS(NAS4Free)
- OpenMediaVault
- Rockstor

## 特徴まとめ
- FreeNAS
  - 特徴：対応する機能数が多い上に高速化/最適化もされている
  - 懸念点：ハードウェア要件が厳しい
- XigmaNAS
  - 特徴：BSDライセンスな上、非常に軽量な端末でも動作する
  - 懸念点：NAS4FreeからXigmaNASへプロジェクト名が変更された影響が本当にないのか？
- OpenMediaVault
  - 特徴：軽量な端末でも動作可能で、Raspberry pi用のイメージも存在  
  - 懸念点：SSD/USBメモリにインストールすることが非推奨
- Rockstor
  - 特徴：Dockerアプリケーション環境により、必要な機能を柔軟かつ即時に変更可能
  - 懸念点：安定版の更新が有料($20.00/1year)



## FreeNAS
- URL：http://www.freenas.org/
- ダウンロードページ：http://www.freenas.org/download-freenas-release/
- Github：https://github.com/freenas/freenas
- ベースOS：FreeBSD
- ライセンス：BSDライセンス
- 最新の安定版バージョン：FreeNAS 11.1
  - FreeNAS 11.1のハードウェア要件
    - CPU：64 bit-CPU (Intel製のCPUを推奨)
    - メモリ：8GB以上
- RAID対応：0/1/5/Z2(RAID 6に相当する機能)
- Web管理機能：◯
- 日本語対応：◯

## XigmaNAS
- 概要：FreeNASプロジェクトから派生したNAS用OS。以前はNAS4Freeという名称であった。
- URL：https://www.xigmanas.com/
- ダウンロードページ：https://sourceforge.net/projects/xigmanas/files/
- ベースOS：FreeBSD
- ライセンス：BSDライセンス
- 最新の安定版バージョン：XigmaNAS 11.2.0.4
  - XigmaNAS 11.2.0.4のハードウェア要件
    - CPU：64 bit-CPU
    - **メモリ：512MB以上**
- RAID対応：0/1/5/Z2(RAID 6に相当する機能)
- Web管理機能：◯
- 日本語対応：◯

## OpenMediaVault
- 概要：FreeNASプロジェクトから派生したNAS用OS。FreeNASの機能をDebianに移植して開発された。
- URL：https://www.openmediavault.org/
- ダウンロードページ：https://sourceforge.net/projects/openmediavault/files/
- ベースOS：Debian
- ライセンス：GNU General Public License
- 最新の安定版バージョン：OpenMediaVault 4.1.3
  - OpenMediaVault 4.1.3のハードウェア要件
    - CPU：要件なし(ARMも対応)
    - メモリ：1GB以上
    - **記憶装置：SSDやUSBメモリにインストールすることは非推奨**　
        - ※メモリ効率化による書き込み回数増により劣化が進む
- RAID対応：0/1/5/6/10
- Web管理機能：◯
- 日本語対応：◯

## Rockstor
- 概要：CentOSベースのNAS用OS。
- URL：http://rockstor.com/
- ダウンロードページ：https://sourceforge.net/projects/rockstor/files/latest/download
- ベースOS：CentOS
- ライセンス：GNU General Public License
- 最新の安定版バージョン：Rockstor 3.9.1
  - Rockstor 3.9.1のハードウェア要件
    - CPU：64-bit CPU(ARMも対応)
    - メモリ：2GB以上
- RAID対応：0/1/5/6/10
- Web管理機能：◯
- 日本語対応：◯
- **備考：安定版の更新は有償($20.00/1year)**
TheWorld for TwitterでCustom CK/CSを使用する

TheWorld for Twitterには発信元をユーザ独自のアプリ名に設定できる機能があります。

が、Callback URLが必要です。

Callback URLはどこでも良いわけではなく、最終的に TheWorld のスキームを指さないといけないのです。

## Callback URL

```
http://binder.sub.jp/redirect.pl
```

これを追加します。

公式からのアナウンスはありませんが、TheWorldの他のクライアントはここを指してるはずなので間違いはなさそうです。

![DnEo6fGUcAIAav4.jpg](https://qiita-image-store.s3.amazonaws.com/0/288605/449312c6-3cea-7fc2-bead-4aaa40a2a398.jpeg)

私の手元からはうまくいってますね。
Vue.js(CDN)を使ったhtmlコーディング最小構成

## 背景
みなさんこんにちは、都内でフロントエンドエンジニアをしています、かめぽんです。
最近、大きく環境が変わりましてVue.js+Atomic Designでかなーりかなーりがっつり開発していまして非常にエキサイティングな日々を過ごしております。

しかしながら、世の中そんな楽しい世界ばかりではなく思いっきりVueが使えない、案件的にレガシーな部分が多い、そもそもフロントエンジニアリングじゃなくてコーディングメインでだけどモダンなことしてみたい！という人もいると思います。
また、自分自身もコーディング作業をやってほしい！みたいなこと言われるんですが、Vueに取り憑かれてしまった以上jQueryを読み込みたく無いんですよね〜。
ということで、VueのCDNを読み込んでコーディングするための環境を１分くらいで考案したので、サクッとみてやってくださいm(_ _)m

## ターゲット
- Vueメッッチャきになるけどhtmlそんなにやってない人
- コーダーさん
- Vue使ってみたいけどWebpack環境までやら無い方
- 脱jQueryしたい人

## 概要
なんの変哲も無いhtmlコーディング用の環境です。

## ディレクトリ内容

```
|--.editorconfig
|--.gitignore
|--package.json
|--css
|  |--reset.css
|  |--style.css
|--js
|  |--script.js
|  |--vue.js
|  |--vue.min.js
|--static
|  |--img
|  |--svg
|--template
|  |--hoge.html
|  |-- ・・・
|--index.html
```

html/css/javascriptについては省きます。jsディレクトリ内のvue.js(開発用)とvue.min.js（プロダクション用）は[こちら](https://jp.vuejs.org/v2/guide/installation.html#lt-script-gt-%E7%9B%B4%E6%8E%A5%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF)で入手可能です。

### .editorconfig
こちらはコードのインデントや記述ルールに関するファイルです。[こちら](https://editorconfig.org/)のサイトからコピペで使えます。複数人でコードを共有するときタブとかスペースとかで喧嘩しないように仲良く開発しましょう。
下に例を貼っておきます。

```
| root = true |
|:--|
|  |
|  |
| [*] |
|  |
| indent_style = space |
| indent_size = 2 |
|  |
| end_of_line = lf |
| charset = 'utf-8' |
| trim_trailing_whitespace = true |
| insert_final_newline = true |
|  |
| [*.md] |
| trim_trailing_whitespace = false |
```

### package.json
npmパッケージを管理するためのファイルで、どんなパッケージをインストールしたかが書いてあり、他の人も使えるようにするため何を導入すればいいかが記述してあるファイルです。そのファイルと同じディレクトリで```npm install```や``` yarn install ```を叩くと記述されたものや依存関係にあるものを全てコマンド一発で導入してくれます。こんかいのパっケージではシンプルなサーバーを使うため```http-server```というものを使います。こちらはグローバルインストールするパッケージなので、事前に```npm install -g http-server```を打っておくことをお勧めします。そしてそのあとにpackage.jsonのscript内に```"dev": "http-server"```を追記します。こうすることで、ディレクトリ内で```npm run dev```と打つとサーバーが立ち上がりhtmlファイル達をブラウザでそのまま参照することができます。package.json自体は```npm init```のコマンドを作業ディレクトリをうち質問に答えると生成されます。

```
{
  "name": "html-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "http-server" // <<= この部分を追記しましょう。
  },
  "repository": {
    "type": "git",
    "url": "
  },
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://hoge"
  },
  "homepage": "https://hoge"
}

```

コーディング現場でもモダンフロントエンド開発っぽくできますので、じゃんじゃん使っていただけると嬉しいです。今回の内容のリポジトリは[こちら](https://github.com/isihigameKoudai/FrontendEnv/tree/html-starter)の```html-starter```にあります。
容量が読みにくいときのhオプション

`-h`

ヒューマンのhらしい
人間が読みやすいように表示する（よしなに単位をつけてくれる）

```
ls -hltr

drwxrwxrwx    1 docker   staff       4.0K Jul  8 03:17 app/
drwxrwxrwx    1 docker   staff       4.0K Sep  9 05:40 Dockerfiles/
```

```
du -hs Dockerfiles

170.0K  Dockerfiles
```

```
free -h

              total        used        free      shared  buff/cache   available
Mem:           2.0G         45M        1.7G        189M        231M        1.6G
Swap:          1.4G          0B        1.4G
```
MAMP+postgres+laravel memo

## user の作成
```sql
createuser -P testuser
```

## user の確認
```sql
psql -q -c'select * from pg_user' postgres
```

## databse の作成
```sql
createdb testdb -O testuser
```

## DB に接続
```sql
psql -U testuser testdb
```

## laravelのインストール
```bash
composer create-project --prefer-dist laravel/laravel test_app
```

## laravelの.envへのDB設定
```laravel
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=testdb
DB_USERNAME=testuser
DB_PASSWORD=testpass
```

## .envのDB設定があっているか確認
```bash
/Applications/MAMP/bin/php/php*.*.*/bin/php artisan migrate
```
## 全HTTPリクエスト

## 設定ファイル
configディレクトリ内

## ディレクトリパーミッションの変更 WEBサーバから書き込み可能にする
```bash
chmod -R 777 ./storage
chmod -R 777 ./bootstrap/cache
```