OmniAICreator/Qiita-1.07M huggingface dataset:
elixirでhackerrankのString-o-Permuteを解いて気づいたこと

`string-o-Permute`という問題を説いた際にまた気がついたことがあったのでまとめていきます

# 問題内容
T行のL文字の偶数文字列が与えられるので各行毎に奇数文字と偶数文字を入れ替えて出力する

## input
```
T
String1
String2
..
StringT
```
但し  T <= 10, L <= 10^5, Lは偶数

## output
```
（String1の奇数文字と偶数文字を入れ替えたもの）
..
（StringTの奇数文字と偶数文字を入れ替えたもの）
```

## sample
```
# input
2
abcdef
12345678

# output
badcfe
21436587
```


# 解1(失敗)
## 方針
- [前回のやつ](https://qiita.com/protein_wasshoi/items/29bb66379bb315787617)を元に各文字列をリストにして先頭2文字をマッチングして残りの文字列を再起呼び出しすればいけるやんけ！

## コード
```elixir
defmodule StringOPermute do
  def permute([]), do: ""
  # ↓これ書けたときの全能感はすごかった
  def permute([str_hd | [new_str_hd | str_tl]]), do: new_str_hd <> str_hd <> permute(str_tl)
  def main(l), do: l |> Enum.each(&(permute(&1) |> IO.puts))
end

_ = IO.gets("") # Tは特に使わない
str_list = IO.read(:stdio, :all)
    |> String.split("\n")
    |> Enum.map(&String.trim(&1) |> String.codepoints)
# [["a", "b", "c", "d"], ["1", "2", "3", "4"]]

StringOPermute.main(str_list)
```

## 結果
**Terminated due to timeout**
(時間切れ)（死亡）
😇😇😇😇😇😇😇😇😇😇😇😇

## 原因
最大で10^5の文字列が10個もあるので再起呼び出しで1つずつ入れ替えてたら間に合わなかったぽい😇

# 解2（成功）
## 方針
- `Enum.chunk_every/2` を用いてリストを分割して`Enum.map/2`で処理すれば勝手に並列にやってくれないかな？（実は適当にやったらできた）

## コード
```elixir
defmodule StringOPermute do
  # 変数名strだけど実際はリストなのでよろしくない
  def permute(str) do
    str
    |> Enum.chunk_every(2) # [["a", "b"], ["c", "d"]]
    |> Enum.map(fn([first, last]) -> [last, first] end) # [["b", "a"], ["d", "c"]]
    |> List.flatten # ["b", "a", "d", "c"]
  end

  # 一行で書きたい病気
  def main(str_list), do: str_list |> Enum.each(&(permute(&1) |> IO.puts))
end

_ = IO.gets("")
str_list = IO.read(:stdio, :all) # ここも変数名str_listsとかの方がよかった気がする
     |> String.split("\n")
     |> Enum.map(&String.trim(&1) |> String.codepoints)
# [["a", "b", "c", "d"], ["1", "2", "3", "4"]]
StringOPermute.main(str_list)
```
## 結果
**†Accepted†**

# 所感
- 再起呼び出しだけに頼るのはやめよう
- Enumがいい感じにやってくれるっぽいしStreamやFlowでメモリやCPUを効率的に使えることからEnumのメソッドで済むものはそれで済ませよう
- パターンマッチングが最高に気持ちよくなってきた
[UE4] ログイン時に値を渡す

![2019-08-31_083141.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/d0cc8698-dbdf-59f8-5dc0-a2097038dbde.jpeg)


UE4は同じプレイヤーを人数分出すだけならとても簡単なのですが、ログイン時に値を渡してプレイヤーの衣装を替えたりといった場合は結構面倒な手順が必要です。
UE公式サンプルやよく見かける記事では
GameMode-OnPostLogin
を起点として
GameModeとPlayerController
で処理していますが,この記事では
Character-BeginPlayからほぼCharacter内で処理を行っています。
PlayerControllerでもなくCharacter、てのはちょっと気持ち悪いのですが、
一か所にまとめて記述でき、CharacterをRespawnさせる必要がないのでこうしています。

今回はログイン時にテキストボックスに入れた文字を各プレイヤーの頭上に表示してみます

流れとしては

＊ログイン前
　テキストボックスにいれた名前をGameInstanceに名前を入れる
![2019-08-31_083240.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/b72eae73-b4d4-5a59-1105-1c04ba5a516f.jpeg)

＊ログイン後
　テキストボックスにいれた名前が各自の頭上に表示される
![2019-08-31_083141.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/baaeb34d-6d4b-ce80-7178-870945340a9c.jpeg)

となります。


[手順]
サードパーソンの新規プロジェクトを用意する
![2019-08-31_084536.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/52d287e1-706f-1c2d-88ae-e256b8bbcdb9.jpeg)

ThirdPersonCharacterにTextRenderを追加しておく（ここに値を表示します）
![2019-08-31_084731.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/7a8dcebf-92e2-aac9-1135-2b7565dec800.jpeg)

文字列を保存する変数を追加したGameInstanceを用意する
テキストボックスに入れた文字をログイン後に引き継ぐための変数です
![2019-08-31_085556.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/4d6694f5-ae09-b354-f7f6-a9f90aec2fcd.jpeg)


構造体を用意する
プレイヤー名と受け渡すデータを配列に入れるために構造体を用意します。
GameModeにこの構造体の配列を用意し、プレイヤーが追加されるたびに
構造体も追加します
![2019-08-31_085032.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/0957603a-c5ee-0d39-8b74-1dd186696538.jpeg)


**ThirdPersonGameMode** に、
プレイヤー名と受け渡すデータを追加する関数
および自分の情報（頭上に表示する名前）を取得する関数を追加
![2019-08-31_090606.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/895959ca-94a4-3308-e282-e5380141128f.jpeg)
![2019-08-31_091016.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/917bb87d-82ed-a7ad-84c8-dab4a822ccec.jpeg)

**ThirdPersonCharacter** に、
受け渡された値を頭上に反映する一連の流れを追加します。
![2019-08-31_092049.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/0f97d5a4-be2d-eee3-93f7-da19a97f0d39.jpeg)

最後にプロジェクト設定で使用するブループリントを定義します（自分は良く忘れます）。
![2019-08-31_094242.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/3223f267-6be4-2b61-1054-e943ef27d526.jpeg)
![2019-08-31_094304.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/b473f0d2-6430-319e-d2aa-79b1af4538e9.jpeg)



以上です。

ブループリントはコピペができないので大変ですね。レッツ写経！
LeetCode / Reverse Bits

ビット表現祭り。

[https://leetcode.com/problems/reverse-bits/]

Reverse bits of a given 32 bits unsigned integer. 

Example 1:

Input: 00000010100101000001111010011100
Output: 00111001011110000010100101000000
Explanation: The input binary string 00000010100101000001111010011100 represents the unsigned integer 43261596, so return 964176192 which its binary representation is 00111001011110000010100101000000.

Example 2:

Input: 11111111111111111111111111111101
Output: 10111111111111111111111111111111
Explanation: The input binary string 11111111111111111111111111111101 represents the unsigned integer 4294967293, so return 3221225471 which its binary representation is 10101111110010110010011101101001.

Note:

Note that in some languages such as Java, there is no unsigned integer type. In this case, both input and output will be given as signed integer type and should not affect your implementation, as the internal binary representation of the integer is the same whether it is signed or unsigned.
In Java, the compiler represents the signed integers using 2's complement notation. Therefore, in Example 2 above the input represents the signed integer -3 and the output represents the signed integer -1073741825.

与えられたintegerに相当する32桁のビット表現を逆順にした際の、それに相当するintegerを返す問題です。
Javaではなんだか注意点があるようですが、、、僕はPythonista！関係ない！といつまで言ってられるか分かりませんが、スルーします。

#### 解答・解説

##### 解法1
Pythonでintegerを32桁のビット表現に変換するには、'{0:032b}'.format(n)と表記します。
変数nを32桁のビット表現に変換　→　逆順にソート　→　32桁のビット表現をintに戻す
という処理を行えばOKです。

```python
class Solution:
    # @param n, an integer
    # @return an integer
    def reverseBits(self, n):
        return int('{0:032b}'.format(n)[::-1], 2)
```

#### 解法2
ビット演算・シフト演算だけで行うことを考えると、以下のように書けます。

```python
class Solution:
    def reverseBits(self, n):
        res = 0
        for _ in range(32):
            res = (res<<1) + (n&1) # res<<1:1桁だけ左にずらし、空いたビットに0が入る, n&1:下1桁の値だけ取り出す
            n>>=1 # n>>1: 1桁だけ右にずらし、押し出された下1桁のビットは消える
        return res
```

#### 解法3
ビット・シフト演算を利用して、このように書くこともできます。

```python
class Solution:
    def reverseBits(self, n):
        n = (n >> 16) | (n << 16)
        n = ((n & 0xff00ff00) >> 8) | ((n & 0x00ff00ff) << 8)
        n = ((n & 0xf0f0f0f0) >> 4) | ((n & 0x0f0f0f0f) << 4)
        n = ((n & 0xcccccccc) >> 2) | ((n & 0x33333333) << 2)
        n = ((n & 0xaaaaaaaa) >> 1) | ((n & 0x55555555) << 1)
        return n
```

途中16進数の表現が入っていますが、分かりやすく32ビットの2進数表現に直すと

0xff00ff00 : '11111111000000001111111100000000'
0x00ff00ff : '00000000111111110000000011111111'
0xf0f0f0f0 : '11110000111100001111000011110000'
0x0f0f0f0f : '00001111000011110000111100001111'
（以下略）

のようになっています。

つまり、まず上16桁と下16桁の位置を交換し、次に各々の上8桁と下8桁の位置を交換し、次に各々の上4桁と下4桁の位置を交換し、次に各々の上2桁と下2桁の位置を交換し、次に各々の上1桁と下1桁の位置を交換すると、全体を逆順にしたことになる、というものです。

簡単のために8桁で、各桁の値の移り変わりを見ると、以下のようになります。
abcdefgh -> efghabcd -> ghefcdab -> hgfedcba
HTMLやCSSなどマークアップ・コーディングの技術を手に入れるまでの話 part0

#ここ最近の話（2019/08/31現在）
ここ最近のTwitterで
「HTMLとCSSは難しい」
「コーディングができないデザイナー」
などなど
マークアップ・コーディングに対してのかなりマイナスなイメージが多い…

確かにwebデザイナーがコーディングの知識があるないで、エンジニアとのコミュニケーションが取りやすくなったりするし。
チーム開発での運用についても大事なものだあと思う。

でも個人的には、ただHTMLとCSSを使ってページを作成するのはホントに簡単なものだと思っています。
（セマンティックとかを無視したらの話ですが）


#何を話すの？
今回は難しいと感じるHTMLとCSSを使ったマークアップ・コーディングの知識を
自分がどうやって手に入れたのか、そのフローを話したいなと。

自分の話をしつつ、
HTMLのDOMを積むときのCSSの書き方とか
マークアップ時にどこに気を付けているとか
自分なりにそんな話も混ぜつつ書き連ねたいなと。

当記事はpart0と書いてあるように、何ページが続く予定です。
なるべく早いうちに更新できるようにしたいですが、次回投稿は毎回未定…
投稿したらTwitterでつぶやくのでチェックはそちらでお願いしま。

part1以降からHTMLやCSSの技術の話をします。
prat0では私の話とマークアップに対しての印象とか載せてます。

##私について
名: キドユウタ ( [sutobu000.com](https://sutobu000.com/) )
性: 漢
SNS: [Twitter](https://twitter.com/sutobu000), [Facebook](https://www.facebook.com/sutobu000)

転職は2回していて最初はSES、次はフロントよりのweb制作会社、今はデザインエンジニアとしてエバンジェリスト的なことをやってたり。
SESでは未経験としてwebエンジニアになり、研修も行っていました。
ホントにwebに関して学び始めたのがこのころで、それまではwebのHTMLとかCSSとかの知識は皆無でした。
4~9月まではSESとして働いたのですが、初回から契約期間が毎回短くあまりにも転々と移動しそうで管理もずさんでした。
「気分よく座れる自分の席が欲しい…」と思い切って強制退職をして、10月にweb会社へ転職。
経験がほぼほぼ無かったけど、転職してからはコーポレートサイトやLPなどのサイトの制作全般を全部一任させてもらえるまでに。
その後3年近く勤めて、今後の生活のことを考え転職し今に至る。

今のマークアップの技術はそこで培ったものがほとんどで、色んな経験をしたわけではないです。
私なりに学んだことを一つずつ記事にできればよいと思ってます。（私が飽きなければ…）

---

次回から技術を手に入れる話をします。
次回はweb知識皆無の私がwebを知り同期の中で一番コーディングができるようになった話です。

→[次回](https://qiita.com/sutobu000/items/5270513a92b2eece8ddf)

お楽しみに。
Google Mapを自作サイトに組み込んでみた


自分で作成したHTMLのサイトにGoogleMapを挿入してみました。
Googleの機能を組み込むなんて、APIを取得したりするからめんどくさそうと思われがちですが、調べていると意外にもAPIを取得しなくても簡単に表示させられちゃうんですね。

# 共有機能を使う
実際にGoogleMapを開いて、表示させたい部分にピンをさして共有ボタンをクリックします。
すると、「地図を埋め込む」というタブが出てくると思うので、それを選択。
ここで次のようなコードが出てきます。

```
<iframe src="https://www.google.com/maps/embed?pb=○○" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
           
```
pb=○○の部分はランダムで作成される文字列のようで、widthとheightとframeborderに関しては任意の数値です。

これを表示させたい箇所に組み込むだけで、しっかりとサイトに表示されました。


# まとめ
埋め込みって必ず何らかのAPIを取得してやらないといけないと思い込んでいたので、少し驚きでした。
時短を目指してやっている人にはいい機能ですね。
Borutaが使うCPUスレッド数を指定する

#はじめに
RのBorutaを使う機会があったが、実行するとCPUがほぼ占有され作業ができない状態となっため、CPUスレッド数を指定する方法を調べた。


#環境
- Windows10
- Boruta 

#方法
引数num.threadsを指定すればよい。以下の場合、使うCPUスレッドが2に限定される。

```R
BorutaModel <- Boruta(type ~ ., data=trainSet,
                      getImp = getImpFerns,
                      maxRuns = 1000, num.threads=2)
```

#参考
- [Boruta for those in a hurry](https://cran.r-project.org/web/packages/Boruta/vignettes/inahurry.pdf)
Vue slider

# Vue参考
### Vue Example
https://vuejsexamples.com/

### Vue Showcase
https://madewithvuejs.com/

# Vueスライダー
https://vuejsexamples.com/tag/slider/
https://vuejsexamples.com/simple-product-carousel-with-hot-image-replacement/

### Owl🌟
https://vuejsexamples.com/vue-component-for-owl-carousel-2/
https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

### Hooper
https://vuejsexamples.com/a-customizable-carousel-slider-optimized-for-vue/
https://baianat.github.io/hooper/examples.html#group

### Best Carousel Swiper Slider
https://www.vuescript.com/best-carousel-swiper-slider/

### Vue Carousel
https://vuejsexamples.com/tag/carousel/
https://ssense.github.io/vue-carousel/
https://codepen.io/hanahana0201/pen/qVLvLv
https://masatoshihanai.com/vue-carousel/

### Vueper Slides
https://madewithvuejs.com/vueper-slides
https://antoniandre.github.io/vueper-slides/?ref=madewithvuejs.com


# Vueパーツ
### Enterance Animation
https://vuejsexamples.com/vuejs-plugin-for-creating-epic-sequential-animation-entrances/
CocosCreator2.1.2に内蔵されているelectronのバージョンをv1.7.5からv4.2.5に上げてみた 

# electronバージョン上げの理由

https://www.npmjs.com/package/electron-releases
electronの公式サイトに、そのelectronが使われているバージョンの記載があります。それによると、
electron v1.7.5:
・Node： 7.9.0
・Chrome：58.0.3029.110
・V8：5.8.283.38
・リリース日:2017-07-17

electron v4.2.5
・Node： 10.11.0
・Chrome：69.0.3497.128
・V8：6.9.427.31-electron.0
・リリース日:2019-06-21

Nodeのバージョンが古すぎると、ES7以降の文法が使えなくなり(Typescriptで今はカバーしていますが)。一部npmのパッケージが使えなくなる恐れがあります(こちらは実際に遭遇した問題で、それで当時CocosCreator2.1.1のelectronをv4.2.5にしました)。

今後CocosCreator2.2.0正式版ではelectron v5になるという話は聞きましたが、CocosCreator2.2.0のアルファ版はそうなっていません。

# まずは今回バージョン上げたCocosCreator2.1.2のリンクを貼ります。
説明: https://github.com/chooaya/CocosCreator2.1.2Electron4.2.5/releases/tag/0.1
ダウンロードリンク: https://github.com/chooaya/CocosCreator2.1.2Electron4.2.5/releases/download/0.1/CocosCreator2.1.2Electron4.2.5win32-x64.zip

# あとは今回どのような手順でバージョンアップしたかを説明します。
①まずは　CocosCreatorのダウンロード、これは公式からできます。
https://cocos2d-x.org/filedown/CocosCreator_v2.1.2_win
②インストールしたら、https://qiita.com/chooaya/items/d2ed0caa31c336973226 こちらの記事を参考に、app.asarを解凍します。終わったらapp.asarを別の場所へ退避してください。
③以下のリンクからelectron-v4.2.5をダウンロードし、その中身のファイルをCocosCreatorのインストール先に上書きコピーしてください。スキップはなし、全て置き換え。
https://github.com/electron/electron/releases/download/v4.2.5/electron-v4.2.5-win32-x64.zip
⑤一番重要の修正の二つのファイルはそのままhttps://github.com/chooaya/CocosCreator2.1.2Electron4.2.5/archive/0.1.zip
から持ってきて置き換えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228366/c8e3a521-dab6-81da-0c7b-5f515347b0e0.png)

上記リンクをダウンロードし、展開すれば、「CocosCreator.exe」がそれにあるはずです。もしなかったら、「CocosCreator.exe_」を「CocosCreator.exe」に改名し、実行してください。

ご不明な点等ございましたら、gitに私に連絡して頂けると助かります。
よろしくお願いいたします。
```
二つの有向グラフを結合させる

#BA Modelの生成
グラフをpythonのnetworkxで生成する。
ここでそのグラフはスケールフリーなグラフである。
スケールフリーとは次数分布がべき乗則に従うネットワークである。
生成はBarabási–Albert Model（BA Model）を採用する。

```python
n = 10000　#全ノード数
m = 3 #新たに加えるノードのリンク数

G1 = nx.barabasi_albert_graph(n, m)
G2 = nx.barabasi_albert_graph(n, m)
```
しかしこれは無向グラフしか生成できない。

#有向グラフ化
今、生成したグラフG1、G2のエッジリストをテキストファイルとして保存する。

```python
nx.write_edgelist(G1, 'G1.txt', data=False)
nx.write_edgelist(G2, 'G2.txt', data=False)
```

このテキストファイルを読み込むことで有向グラフ化する。

```python
G1 = nx.read_edgelist('G1.txt', create_using=nx.DiGraph())
G2 = nx.read_edgelist('G2.txt', create_using=nx.DiGraph())
```
#次数分布
この方法で生成したG1、G2の次数に相関があるか調べる。

```python
G1degree = dict(G1.degree)
G2degree = dict(G2.degree)
G1_value = []
G2_value = []
for key, value in G1degree.items():
    G2_value.append(G2degree['{}'.format(key)])
    G1_value.append(value)
```

```python
plt.scatter(G1_value, G2_value, s=10)
```
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/347bfd5b-05c2-682a-afde-bd0abec08c46.png)

```python
np.corrcoef(G1_value, G2_value)
#=>array([[1.        , 0.69557497],
#       [0.69557497, 1.        ]])
```
正の相関があるので
シャッフルして相関をなくす。

```python
node = list(G2.node)
node1 = node.copy()
random.shuffle(node1)
mapping = {k: v for k, v in zip(node, node1)}
G2 = nx.relabel_nodes(G2, mapping)
nx.write_edgelist(G2, 'G2.txt', data=False)
```

ノードのラベルをシャッフルして相関をなくした実際相関のグラフと相関係数は
![ダウンロード (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/dd2f42db-c93d-5a61-5f17-7a441a74277f.png)

array([[1.        , 0.01120365],
       [0.01120365, 1.        ]])
よって相関のない二つのグラフが生成できた。
#グラフの結合
networkxにある関数を使い結合する。

```python
G = nx.compose(G1, G2)
```
これで二つのグラフを結合することができた。
Material Color Tool が便利そう

## 概要
Material Design の Color Tool というのを見つけました。
https://material.io/resources/color/

![FireShot Capture 006 - Color Tool - Material Design - material.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95517/4c5c61d2-1f1d-780f-e126-1eca6bba6553.png)


※ 筆者が Android エンジニアのため、 Android をベースに書いています。

最新の Material Design の Color Pattern を、好きな色を選ぶだけで自動でいい感じにしてくれるみたいです。

ちなみに2019年8月時点の Android の Material Design Support は `1.1.0-alpha09` で、 `1.0.0` とかだとうまく適用できないかもしれません。 (1.0.0 と 1.1.0 は結構大きく変わっているようです)
https://github.com/material-components/material-components-android/releases

## 使い方
### まず Primary Color を選択する
![FireShot Capture 004 - Color Tool - Material Design - material.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95517/453ca365-5fe8-c451-c73b-eb8b9da4aa05.png)

これだけでもなんとなくいい感じになってる。

### 次に Secondary Color を選択する
![FireShot Capture 007 - Color Tool - Material Design - material.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95517/57992b05-24e6-da54-e6e7-f16feb497190.png)

必要に応じて、 Text on Primary / Secondary を変更することもできますが、白のままでちょうど良いのでそのままで。

### 可読性もわかりやすく示してくれます
![FireShot Capture 008 - Color Tool - Material Design - material.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95517/bc24aa0d-3128-9feb-e831-f20aa316aaed.png)

### どこでどの色が使われるのかも一目瞭然
<img height="512" alt="ss2019-08-31 7.12.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95517/5dccf313-330e-9e0d-db13-bea016f20321.png"><img height="512" alt="ss2019-08-31 7.14.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95517/4b1d756a-927a-f5cf-bf89-342d65737cb1.png">

### 各 Platform 向けに Export もできる
<img width="250" alt="ss 2019-08-31 7.18.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95517/f19dd8ff-08ef-53ca-3bb2-24c46ae68197.png"><img width="250" alt="ss 2019-08-31 7.15.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95517/daf92b05-c4d7-c870-0800-d1e9d9e1bcad.png">

できた成果物がこちら。

```xml:colors.xml
<!--?xml version="1.0" encoding="UTF-8"?-->
<resources>
  <color name="primaryColor">#3f51b5</color>
  <color name="primaryLightColor">#757de8</color>
  <color name="primaryDarkColor">#002984</color>
  <color name="secondaryColor">#007769</color>
  <color name="secondaryLightColor">#48a697</color>
  <color name="secondaryDarkColor">#004a3f</color>
  <color name="primaryTextColor">#ffffff</color>
  <color name="secondaryTextColor">#ffffff</color>
</resources>
```

## 感想
非常に簡単に使えました。
デザイナさんにも使ってもらえるとエンジニアが幸せになれそうな気がする。
ペアノの公理の後者をうっかり２つに増やすと実数になっちゃう説

Haskellで下記のデータ型を定義した時に`Binat -> Nat`型の単射な関数が思いつかず、タイトルの仮説が浮かんだ次第。

```.hs
data Nat = Zero | Succ Nat

data Binat = Bizero | LSucc Binat | RSucc Binat
```

# なんでそう思ったかの概略

証明する気はないが、なんで実数（と`Binat`型のすべての値の集合の濃度が同じ）と思ったか、概略を述べておく。

まず、`LSucc`と`RSucc`を`Bizero`に有限回適用して得られる値の集合$B_0$は可算無限集合。
次に、`RSucc`は有限回、`LSucc`は可算無限回`Bizero`に適用して得られる値の集合$B_1$も可算無限集合。
最後に、`LSucc`と`RSucc`を`Bizero`に可算無限回適用して得られる値の集合を$B_2$として、差集合$B_2 \setminus B_1$を考える。`LSucc`を0、`RSucc`を1と読み替えれば、半開区間$(0, 1]$の各実数を二進数の無限小数で一意[^1]に表したものと一対一に対応するので、$B_2 \setminus B_1$の濃度は連続体濃度。
以上より、`Binat`型のすべての値の集合は連続体濃度[^2]。



[^1]: 0.1とか0.1000...は0.0111...の表記に統一すると一意になる。なお、0.1の有限小数の表記は$B_0$に、0.1000...のゼロが無限に続く表記は$B_1$にそれぞれ対応するイメージ

[^2]: 正確には`x = LSucc x`みたいな`Bizero`を含まない奴らも考えてあげないといけないが、リストの`reverse`のような関数を想定すれば$B_2$の値と一対一対応するので無視して良いかなって感じがある
「考える」作業ができないプログラマを育てるには？

ツイッターでこんな投稿を見た。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">《ゆる募》<br><br>「考える」という作業ができない偏差値低めのプログラマを育てる方法<br><br>画面項目の出力値がおかしいとユーザーから指摘あり→えーと、うーんと、何していいか分かんないやのプログラマ<br><br>苦労している発注者やチームリーダーは多いはず。与えられた手札制約はつらいよね<br><br>皆さんの知恵をplz</p>&mdash; えいじおー@Webサービスを作った (@eizio_studio) <a href="https://twitter.com/eizio_studio/status/1167072343560114176?ref_src=twsrc%5Etfw">August 29, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

まじめに、問題と対策を考えてみる。

# どうして何をしていいのか、わからないのか？

コンピュータの中にいる小人さんと対話するスキルが足りないのでは！！

というのは古典ジョークだが、問題が起きた時に、その経緯に基づいた仮説・可能性が立てられていないのだと思う。

一般能

- 画面項目の出力値がおかしい？
- ・・・？？？？わからん。なにこれ？

プログラマ能

- 画面項目の出力値がおかしい？
- 表示だけがおかしい？（可能性１）
- 計算結果だけがおかしい？（可能性２）
- 入力がおかしい？（可能性３）
- 状態がおかしい？（可能性４）

# 原因の可能性を考えられないのは？

まず、十分な時間をかけて、ドキュメントやソースコードを理解できていないのではないだろうか。

私みたいな変人だと「ひゃっはー！どうせドキュメントなんぞ陳腐化して、実装と剥離するから、ソースコードよこせー」とやりかねないが…

普通の人はドキュメントをベースに、ちょっとずつ認識を広めていく必要がある。

でも、普通の人は「コンパイルされたバイナリ」と「よくわからない大量のソースコード」を目の前にすると、ぐへえ、ってなるのですよ！！

# 「失敗する経験」不足

たしかこれは、https://twitter.com/yontengop 氏の話でもあったと思うが、失敗を恐れすぎて何も手が動かせない可能性もある。

PC9801で、MS-DOS使ってた時代は？

「バグってPCとまったら、
　電源ぷちーして再起動したら、万事解決じゃーい！
　全部、元通りに戻って、全部ちゃらー」

ってなってた。

それが、ハードディスクが付き、Windowsになり、データベースと連携し、クラウドに連携し……と、いろんなものがごちゃごちゃ付きすぎたせいで、

「失敗したら壊れる」
「でも、何が起きているのかわからない」

という"ナンダカ　ヨク　ワカラナイ　モノ"担ってしまっている。

いや、本質は何も変わらないし、物理的にぶっ壊さなきゃ、大体なんとかなるようになってるんですけどね！

# ではどうしたらいいのか？

## 小規模でいいから、自分で物を作らせてみる。

画面表示がおかしい、というプログラムをいきなり保守しろというと固まるので、まず、簡単にでいいので、それを計算するプログラムをPC上で単組させる。

計算過程がどうなっているのかを観察させる。

もしくは、printf debugでいいから、計算の過程を確認しながら進めさせる。

とにかく、プログラムの中に手を突っ込ませる。

ちょっとずつでいいから、手を動かして、暗中模索を刺せる。

## 「わからなかった、ということが分かった」

手を実際に動かしてもらうときに重要なのは、

「わからなかった、ということが分かった」という事。

そこまで到達するには時間がかかるかもしれないが……。

「うまくできませんでした」という報告は突き返していい。

「どのように、うまくいかなかったか」という報告にさせる。

"どのように"の部分を突き詰めることで、原因を考えるようになる。


## あるいは、おもちゃを与える。

もし教育プランに余裕があるならば、おもちゃを与えるのもよい。

arduino https://www.arduino.cc
プチコン4 https://www.petc4.smilebasic.com/
ヒューマン・リソース・マシーン https://ec.nintendo.com/JP/ja/titles/70010000000753
セブン・ビリオン・ヒューマンズ
https://ec.nintendo.com/JP/ja/titles/70010000014082


## 壊してもいい環境をちゃんと提供しましょう。

「ここの環境は、あなたが実験するための環境なので、
　何をやってもいいし、何をプログラム的に壊しても、
　すぐに直せるsandbox（砂場）です。」と、伝える。

実際に、自分で壊してから、復旧させるのが一番いい。

組み込みシステム開発で一番最初にやることは環境構築なのはもちろんだけど…

そして、環境ぶっ壊しだよ！！！派手にディスクとかFLASHとか（論理的に）ぶっ飛ばすよ！！

というのもの、ぶっ壊した環境を復旧できる手段を確立しなかったら、実際に壊れた時に、何も作業できなくなるもの。

「壊していい」ということを体感させておけば、いろいろ考えられるのではないか？

## ほめるほめるほめるほめる。

成功したリザルトをほめるのではなく、
　成功するために考えたプロセスをほめる。

成功するかどうかなんて、時の運。
ぶっちゃけ同じやり方をやっても、次は失敗するかもしれない。

だから、どうやったら成功するか、考えたプロセスをほめる。


# まとめ
リソース厳しい、このご時世。物を壊したら怒られるんじゃないのかーって考える新人とかも少なくないと思う。

だけど、本当にヤバい破壊パターンは、組織としてつぶしておかねば、誰がいつしでかすのかわからない。だからこれは個人じゃ気にする必要が無い（やらないように気を付ける必要がある）。

その上で、「壊していい」をベースに、調査をさせるしかないと思う。

手を動かせる人材って、たぶん「壊せる人材」だと、私は考える。
JavaScriptで年齢計算機能を作ってみた

JavaScriptの標準ライブラリのDateを利用して年齢を計算する機能を作成してみました。

# コード
```age.html
<div id="text-button">
    <p id="countAge">年齢</p>
</div>
```

```age.css
#text-button {
    display: block;
    cursor: pointer;
    width: 500px;
    text-align: center;
    border: 1px solid #232323;
  }
```

```age.js
function countage(){
    const today = new Date();
    const birth = new Date(1997, 01, 01);


    const birthYear = 1997;
    const birthMonth = 2;
    const birthDay = 1;

    let nowYear = today.getFullYear();
    let nowMonth = today.getMonth() + 1;
    let nowDay = today.getDate();
    const nowHours = today.getHours();
    const nowMinutes = today.getMinutes();
    const nowSeconds = today.getSeconds();

    if(nowMonth === 1){
        nowMonth = 13;
        nowYear -= 1;
    };

    count = (`私が誕生してから${nowYear - birthYear}年${nowMonth - birthMonth}ヶ月${nowDay - birthDay}日${nowHours}時間${nowMinutes}分${nowSeconds}秒経ちました！`);

    document.getElementById("text-button").onclick = function(){
    document.getElementById("countAge").innerHTML = count;
    };
};
setInterval("countage();",1000);
```


# 結果
こちらを実行するとサイト上に「年齢」という欄が出てくるので、この文字をクリックすると「私が誕生してから○○経ちました。」とちゃんと表示されました。
クリックするたびに更新もしてくれます。


# 課題点
日付間の計算をプログラムする時に一番気をつけなければならないのは、「月」です。
例えば1月1日と2月5日の間は「1ヶ月と4日」なので純粋に引き算すれば大丈夫です。
一方1月6日と2月5日の間は「0ヶ月と30日」となるので複雑になります。
この部分で躓き、どのような数字にも当てはまるようなプログラムは書けなかったので、今後勉強していきたいです。
【転職】 Paizaの”カジュアル面談”で感じたコト。  



### はじめに
この記事は、Paizaを通しての転職活動記というより、Paizaの”カジュアル面談”って、企業によってPaizaのホームページでうたわれてる内容・形式と違うことがあるので、気をつけた方がいい(利用するなら、なるべく準備して行った方がいい)ということを言いたいエントリです。

### 私自身について
現在SIerでエンジニアとして10年目で、マネジメントだけはやたらうるさく言われる年次・環境になってきて、正直ここ数年はスキル的な成長もなく（マネジメントもスキルやツールはあるものの、基本的には上長からは「先を見据えて計画的にやれ」しか言われなくないですか？？）、「正直この環境では(職責や待遇はともかく)エンジニアとして成長できない」と思って転職活動を始めました。

（2019.08.31現在、まだ絶賛活動中です。）

### で、Paiza
しかし、これまで「他のとこ行った方がいいのかなぁ」と思うような時期は何度もあったものの、具体的な行動を起こしたコトはなく、転職活動は今回が人生で初めて。転職支援やエージェントサービスもいくつもあるものの、どこがいいのかイマイチ分からないし、何より、開発経験がほとんどCOBOL(しかも社内独自の環境やツールを使っての開発)しかやったコトがないので、スキル的に受け入れてくれるところがあるのかが不安・・・。
そんな中で、「少しでもスキル身につけておこう」というコトで、転職活動とほぼ同時にプログラミング学習サービスも探し始め、その中でPaizaがプログラミング学習サービスを提供しつつ、転職支援サービスも提供しているというコトで使ってみることにしました。

### カジュアル面談
Paiza独自のサービスとして、スキルチェックの結果スカウトを貰えた企業と、「カジュアル面談」という形式で０次面談のようなモノを受けることができます。
詳しくは<a href="https://paiza.jp/career/advice/paiza-interview#casual">Paizaのホームページ</a>でご確認頂きたいですが、私の認識では、１対１で企業説明会のようなお話をして頂いた上で、こちらからも軽く自己紹介や転職活動の方針等を伝えて、マッチングを確認する場かなぁ、と思っていました。
が、いざ行ってみると、企業によって全然スタイルが違いました。以下、ざっくり事例をメモしておきます。

####①面接
履歴書を渡すと、さっそく「自己紹介お願いします」から始まり、履歴書・職歴書の内容についての質疑応答。その後「こちらへも何か質問あれば」と言われ、いくつか質問して終了。完全に面接ですよね。
「あれ？向こうから事業内容等説明して頂けるのでは？」と感じたのが正直なところです。(質問して聞けばいい、というのとは別次元の話として)

####②会社説明会＋面接
まずは事業の概要をお話し頂いて、そのあとこちらも履歴書を渡して自己紹介。お互いに質疑応答して終了。だいたいこれが一般的なイメージなのかな、と思ってます。

####③会社説明会＋求人説明会
②にプラスしてどういったポジションで、どういった開発を担当して頂きたい、っていうトコまでお話し頂いたケースです。質問すれば①②のケースでも教えては貰えましたが、向こうからここまで詳しいお話をして貰えたのはあまりないです。
このケースでは履歴書も渡さず「面接希望されるのであれば、その際に」という流れでした。

####全体通して感じたこと
色々フィードバックを貰って感じたコトなんですが、「本人の希望が見えない。求人内容とマッチしない」みたいな理由であっさり落とされて、「え、説明聞いて自己紹介しただけなのに？？」って感じるコトがここまで多かったです。
自分の認識としては、カジュアル面談の段階では「御社の事業や求人の内容は理解しました。先の選考へ進むかはお話し頂いた内容を元に検討します。」くらいでいいと思っていたんですが、どうやら「御社の事業のここに共感しました。自分の能力のこういうトコを役立てて貢献したいです」っていう主張を返しておかないとあっさり落とされるんだなぁ、と。

こちらとしては「求人内容のもっと詳しい話が聞きたい」と思ってカジュアル面談を受けに行ったつもりでも、企業側は「ぜひ御社に転職したいです」という意思を持っているんだろう、という前提で待ち受けているというか。（規模の小さい会社への面談希望が多かったので、特に。）
　→要は、「まずは話を聞きに行ってみよう」じゃなくて、「面接受けに行こう」って意識で準備しておく必要があるんでしょうね。

私の本音としては、(これもエンジニア的発想かもしれませんが)「名は体を表す」という言葉の通り、Paiza独自の”カジュアル面談”という方式を採用している以上、企業によってその内容や前提をブレさせないで欲しいなぁ、というのが正直感じたところです。

#####2019.09.14追記
これはどこの転職サービスや企業でもあるのかも知れないけど、「求人票の内容と、実際に企業が求めるポジションが違って、開始５分で喋ることがなくなる」ってパターンもありました。（具体的には、求人票には設計〜開発工程の担当って書いてるのに、面談で「マネジメントでの求人です」って言われたパターン）
　→「がっつり開発してスキル身に付けたいんです！」って言った直後に、
　　「いや、マネジメントもしたいんですけどね」って・・・ウソっぽ過ぎてとても言えないでしょ・・・
なんで転職したいかとか、どういうポジションで何をやりたいかとかを考えて、それにマッチしてるであろう求人に対して応募したのに、ある意味「あ、それウソです」って言われた感じで、非常に憤りを覚えました。
（運営へのフィードバックに正直に気持ちをぶつけました。多分先方にも伝わってるんじゃないかと思います）
実際に転職してからイメージしてたポジション・業務と違う、っていうよりはマシかもしれませんが、お互い色んな準備をして面談に臨んでるであろうハズなのに、その時になって前提をひっくり返してくる感覚が正直どうかしてるなぁ、と。
求人内容とか、それに応募してきた人のプロフィールとか、企業側は面談前に確認しないんですかね。

ってモヤモヤするような面談もありました。

###頑張ります
今後Paizaを利用される方に向けて何かしら役に立てばと思ってザッと書きました。
少しモヤモヤしていたトコロもついでに吐き出せてよかったかな、と。

これを書いている時点でまだ転職先が決まるには至っていないので引き続き頑張ります。
plunkerでlua その4

#概要

plunkerでluaやってみた。
九九やってみた。

#写真

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b123a1a6-c978-46e0-9d74-52e5ce9bd99a.png)


#サンプルコード

```
      for i = 1, 9 do
        for j = 1, 9 do
          window:write( string.format("%3d", i * j))
        end
        window:write("<br>")
      end
```

#成果物

https://embed.plnkr.co/rmvWzHjfwrrJEGThmNvf/

以上。
Image Understanding with TensorFlow on GCPを受講した話

# 3行で
https://www.coursera.org/learn/image-understanding-tensorflow-gcp
Advanced Machine Learning with TensorFlow on Google Cloud Platform Specializationという一連のコースの3番目
画像認識のモデル構築に関する講義

# どんな人におすすめか
必須
・英語字幕で動画が理解できる
・クラウドサービスと機械学習に興味がある（触ったことがなくてもOK）
・画像認識のモデル構築に興味がある

推奨）
・オンプレの計算資源に依存しない機械学習システムを構築したい問題意識がある
・GCPの基本的な機能を使える
（不足を感じたらGoogle Cloud Platform Fundamentals: Core Infrastructureを受講するぐらいで大丈夫そう）
・画像認識への機械学習のアプローチに関する知識がある（CNN、augmentation、transfer learningなど聞いたことがあるけど実装したことない程度でOK）

不適
・どうしてもAWSしか使いたくないマン
・tensorflowで作ったResNetの転移学習コードをCMLEで学習、推論できる人

# どんなコースか
MNIST（手書き数字認識）のタスクを最初の題材として、どうしたらより精度の高いモデルを構築できるか考えていくコースです。
MNISTは28ピクセル四方の画像なので、各ピクセルの画素値をfeatureにした28*28=784次元のベクトルを入力として
最初はシンプルに線形回帰、次に多層パーセプトロン、次にCNNとなぜそうしなければならないかを説明しながらモデルの説明力を増していきます。
説明力の高いモデルを使ったときにしばしば遭遇するoverfittingの問題にも触れられます。
また、説明力を高くしようと思ってネットワークを深くした際に発生する問題に対しての処方箋(batch normalization, transfer learning, Residual Network, TPU)の効力についても解説されます。
もっと言えば、それらを考慮した上でどういうアーキテクチャを取るのが最適かをgoogleは常に考えてるので結果をシェアしますという話もされる。

# 感想など
これまで相当の時間をかけて学んだり考えたりしてきたことが、わずか十数時間にまとめられていた・・・・！！！！！！
いやまじで、僕も一回で覚えられない方だというのもあるけど、何度も困難にぶち当たって乗り越えてきたことが簡潔に説明されてて本当によい。ふりかえるとなおよい。

画像認識に興味を持って論文を読んでるそうな層にとっては多分既知の概念ばかりだろう。
だけど、それを実際なんらかのアプリケーションに実装してる人でないと、どういうAPIの使い方をしたらいいかわからないもんだ。このコースはそこをカバーしてる。
概念は知ってるけど実装したことない人にはおすすめできる。
伝統的な画像に対してのfeature engineeringのアプローチからはじまるので、CNNが生まれた理由を自然と受け入れられるんじゃないだろうか。
plunkerでlua その３

#概要

plunkerでluaやってみた。
fizzbuzzやってみた。

#写真

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b7bafc0b-6306-6d08-37c3-f7c178404d38.png)


#サンプルコード

```
    function fizzbuzz()
      for i = 1, 100 do
         if i % 15 == 0 then
            window:write("FizzBuzz")
         elseif i % 3 == 0 then
            window:write("Fizz")
         elseif i % 5 == 0 then
            window:write("Buzz")
         else
            window:write(i)
         end
          window:write(" ")
       end
    end
```

#成果物

https://embed.plnkr.co/owSPviXMcPsCSWYzKTkV/

以上。
Pythonモジュールvaderによる感情分析

# インストール


```bash
pip install vaderSentiment
```

# 使用例
```python
# インポート
from vaderSentiment.vaderSentiment import SentimentIntensityAnalyzer
analyser = SentimentIntensityAnalyzer()

# 関数例
def sentiment_analyzer_scores(sentence):
    score = analyser.polarity_scores(sentence)
    print("{:-<40} {}".format(sentence, str(score)))


sentiment_analyzer_scores("I'm so COOL!")

```
ネガ中立ポジと、分かりやすいです。
合成値(Compound)は全ての語彙レーティングの合計を標準化したもので、-1から+1の値を取る。無論、-1がネガティブ、+1がポジティブ。

絵文字、英語圏における顔文字「 ;) 」にも対応しているようです。大文字と小文字によって感情の度合いも変わるようです

# 注意
感情表現については男女差や年齢差、人種差もあるかもしれません。
例えばツイートを分析する際にある偏りを見つけた場合、それが話題による偏りなのか、その話題に典型的な年齢や性別による偏りなのか、適切に理解して使用しなければいけないと思います。
gitコマンド備忘録

# はじめに
gitコマンドはいまいち使いこなせておらず、よく意味もわかっていません。また、gitは自分の所持している複数のPCから触ることも多いので、どのPCからも備忘録を見られるようにするため、自分のためだけに書きます。

`$ git help ...`等のｺﾏﾝﾄﾞを活用し、できるだけ一次情報を得ようと頑張ります！

# 基礎
一人でGithubを使う限りはこれで良いのでは？

```sh:basic
# clone from remote repository
$ git clone <ip-addr>
# pull
$ git pull
# add 2種（変更点を全部addする方法）
$ git add .
$ git add --all
# commit (-mはmsgの意)
$ git commit -m "<comment>"
# push origin master
$ git push origin master
```
# リポジトリ作成
```sh:git_initialization
# 空のgitリポジトリを作成したいディレクトリで実行
$ git init
```

# 状態確認

```sh:status_check
# .git同一ディレクトリの変更したディレクトリ・ファイルを表示
$ git status
# diffは差分を表示
$ git diff head
$ git diff HEAD
# logはコミット履歴・各ブランチの位置を表示
$ git log
```

# ブランチ

```sh:about_branch
# ブランチを作成する
$ git branch <branch-name>
# ブランチ一覧を見る
$ git branch
# ブランチを移動する
$ git checkout <branch-name>
```

```sh:merge_branch
# ブランチをmasterに切り替える
$ git checkout master
# masterに<branch-name>をマージする
$ git merge <branch-name>
```

# リモートからブランチを持ってきてアップデート

```sh:pull_from_remote
# ブランチを切り替える
git checkout -b oritin/<branch-name>
# pull
git pull
```

# addしないディレクトリ・ファイル名を設定
`.git`と同一ディレクトリに`.gitignore`というファイルを作成し、addしたくないディレクトリ・ファイルを記入すると良い。

```plaintext:.gitignore
<filename>
```

この時、ワイルドカードを使用することで、拡張子を丸々除外することができる。

```plaintext:.gitignore
*<file extension>
```

.gitignoreに記入するおすすめ名
`*.log`
Mac → `.DS_Store`
cmake → `build/`
c,c++ → `*.out`
python → `__pycache__`
状況によって → `bin/`, `*.exe`

# おわりに
まだほとんど知らないこともあり、gitコマンドは数が膨大に感じます。しっかりと全容を把握して身近に感じられるまで、ｺﾏﾝﾄﾞを調べる・覚える度に勝手に追加していきます。
Production Machine Learning Systemsを受講した話

# 3行で
https://www.coursera.org/learn/gcp-production-ml-systems
Advanced Machine Learning with TensorFlow on Google Cloud Platform Specializationという一連のコースの2番目
モデリング以外の部分でより「良い」システムを作るには何を考慮すべきか解説される

# どんな人におすすめか
必須
・英語字幕で動画が理解できる
・クラウドサービスと機械学習に興味がある（触ったことがなくてもOK）

推奨）
・オンプレの計算資源に依存しない機械学習システムを構築したい問題意識がある
・GCPの基本的な機能を使える
（不足を感じたらGoogle Cloud Platform Fundamentals: Core Infrastructureを受講するぐらいで大丈夫そう）

不適
・クラウドサービスを完全に理解しているマン
・どうしてもAWSしか使いたくないマン
・機械学習のモデリング部分にしか興味がない人
・機械学習の実際のプロジェクトを何度も回したことがある人

# どんなコースか
いかに機械学習モデルを作るかという話はないです。
機械学習モデルが何らかあったとして、そのモデルを使った実用に耐えるアプリケーションをどう構成するかがコースのスコープです。
実用するとなれば、必要なだけのスループット、必要なだけのレスポンス、必要なだけのロバストネス、必要なだけのメンテナンス性を確保したいところ。
それらの要求にたいして実用上問題になりやすい事柄をピックアップして解説しています。例えば
・学習/評価/推論の間の差の解消
・自分の管理下でないところでのデータの変化
・分散コンピューティングのアーキテクチャ洗濯
など。


# 感想など
QwikLabはあまり多くない。そこが一番の評価だったのに拍子抜け。

実際のプロジェクトで出会いそうな困難について解説されるので、仕事として機械学習をするようになってから振り返るとありがたみがわかるんじゃないかと期待してる。

Maxの解説がやたらわかりにくい・・・。
これはこの先ずっと続くのでマジできつい。RNNの基礎がMaxの担当で本当に辛かった。
僕の英語のせいなのかMaxの説明が悪いのか不明だけど、とにかくわかりにくい。何度も動画を止めてscriptを確認した。
vimで複数行をコメントアウトする

![GIF2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330873/16d3b331-cfa5-5f60-540c-64ce0f17ac44.gif)


## 実際の入力

<pre>
ctrl + v      // 矩形ビジュアルモード
j             // 4行下へ
j
j
j
shift + i     // カーソルから前側に入力
#             // 入れたい文字を入力
Esc           // 選択行へ反映、若干時間差あり

ctrl + v      // 矩形ビジュアルモード
j             // 4行下へ
j
j
j
x             // 削除
</pre>



[vimで一気にコメントアウトする方法\(複数行の先頭に文字を追加する方法\) \- Qiita](https://qiita.com/shirochan/items/174c3169344043449339)

[vimで複数行のコメント入れたり消したりする\(矩形入力・矩形選択削除\) \- Qiita](https://qiita.com/rato303/items/035de4117ec0022a0eb0)

[vimで複数行のインデントを連続で行う \- Qiita](https://qiita.com/ymko/items/a19f5309c8eb1e9466b8)

[【レビュー】デスクトップを動画キャプチャーしてアニメーションGIFファイルにする「GifCam」 \- 窓の杜](https://forest.watch.impress.co.jp/docs/review/617499.html)

[mysql \- Docker Hub](https://hub.docker.com/_/mysql/)

```yml:stack.yml
# Use root/example as user/password credentials
version: '3.1'

services:

  db:
    image: mysql
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: example

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080
```
Laravelのエラー：Fatal error: require(): Failed opening required '/project/vendor/autoload.php' (include_path='.:') in /project/artisan on line 18

環境は以下の通り。

- Mac OS Mojave (バージョン 10.14.3)
- MacBook Pro (Retina, 13-inch, Early 2015)
- git version 2.22.0
- Composer version 1.9.0
- Laravel Framework 5.8.34

Laravel 5.8 を使用していて出た、下記のようなエラーの対処法です。仮にprojectという名前でLaravelのプロジェクトを作ったと仮定します。

```shell:laravel

Warning: require(/project/vendor/autoload.php): failed to open stream: No such file or directory in /project/artisan on line 18

Fatal error: require(): Failed opening required '/project/vendor/autoload.php' (include_path='.:') in /project/artisan on line 18
```

エラー内容を簡単に翻訳すると以下のような意味になります。

- `/project/artisan` の 18 行目で `/project/vendor/autoload.php` というファイルが要求されている
- しかし `/project/vendor/autoload.php` というファイルは存在しない

こちらに対しては、下記のコマンドを実行すると解消します。

```shell

composer install
```

コマンド入力後に諸々のファイルダウンロードが始まり、最終的に `Package manifest generated successfully.` と表示されれば成功です。 `composer install` をすることでprojectフォルダ内に vendor というフォルダが作成され、見つからないとアラートが出ていた `/project/vendor/autoload.php` のファイルも存在することになります。

原因としてよくあるのが、GitHubなどで他人のリモートリポジトリからクローンしてきたLaravelのプロジェクトフォルダの場合、基本的に /vendor フォルダは個々の環境に依存してGitの管理下に置かれないため、このようなエラーの原因となることがあります。
【SQL ZOO 解答集】(SELECT basics)

##本投稿の目的
- sql学習サイト[**sqlzoo**](https://sqlzoo.net/wiki/SQL_Tutorial)を用いたsqlの学習と理解
- 学習のアウトプット
- 学習メモとして、かつ公式の解答ページがなかったので作成した。

[0 SELECT basics(このページ)](https://sqlzoo.net/wiki/SELECT_basics)
[1 SELECT name](https://sqlzoo.net/wiki/SELECT_names)
[2 SELECT from World](https://sqlzoo.net/wiki/SELECT_from_WORLD_Tutorial)
[3 SELECT from Nobel](https://sqlzoo.net/wiki/SELECT_from_Nobel_Tutorial)
[4 SELECT within SELECT](https://sqlzoo.net/wiki/SELECT_within_SELECT_Tutorial)
[5 SUM and COUNT](https://sqlzoo.net/wiki/SUM_and_COUNT)
[6 JOIN](https://sqlzoo.net/wiki/The_JOIN_operation)
[7 More JOIN operations](https://sqlzoo.net/wiki/More_JOIN_operations)
[8 Using Null](https://sqlzoo.net/wiki/Using_Null)
[8+ Numeric Examples](https://sqlzoo.net/wiki/NSS_Tutorial)
[9 Self join](https://sqlzoo.net/wiki/Self_join)

####[0 SELECT basics](https://sqlzoo.net/wiki/SELECT_basics)
####問題1
#####ドイツの人口を表示
```sql
SELECT population 
FROM world
WHERE name = 'Germany'
```
####問題2
#####「スウェーデン」、「ノルウェー」、「デンマーク」の名前と人口を表示
```sql
SELECT name, population 
FROM world
WHERE name IN ('Sweden', 'Norway', 'Denmark');
```
####問題3
#####面積が200,000〜250,000の国の場合は、国と面積を表示
```sql
SELECT name, area 
FROM world
WHERE area BETWEEN 200000 AND 250000
```
次回
[1 SELECT name](https://qiita.com/m_masashi/items/3dbab4e1b8742de4476b)
loopback4でGraphQL Playgroundを使う

# 動機
お客さんに見せて、エクセル仕様書とかをつくるのを省くため、
なるべくわかりやすいUIを提供したかった。
あと、GraphiQLはヘッダー送れない

# 手順
loopback4起動(3001ポート)

openapi-to-graphql起動(3000ポート)

https://github.com/prisma/graphql-playground/blob/master/packages/graphql-playground-html/withAnimation.html
をダウンロードしてきて、自分のloopbackアプリのpublicに入れる

http://localhost:3000/withAnimation.html?endpoint=http://localhost:3000/graphql
のような感じでアクセス（うろ覚え）
なぜ外部発注は上手くいかないのか？

外部にシステムを発注する際には様々なトラブルが生じます。
自分が直近１年以内に経験した外注先とのトラブルで代表的なものを挙げてみました。

#はじめに
自分は以前は受託制作会社で働いており、現在はどちらかと言えば発注側にいます。
そのため発注側、受注側お互いの気持ちがある程度理解できるので受注側・発注側どちらか片方を責めるものではありません。

#ビジネスゴールの違い
前提として、受注側と発注側ではwebサイトを制作する際のビジネスゴールが違います。
受注側は、発注側が運営しているサイトに対して興味があるとは限らないし、請け負ったサイトが納品後に収益を上げているかどうかなんて興味はないでしょう。

**・受注側(制作会社)のビジネスゴール**
　制作依頼を請けて対価として制作料を受け取る。
**・発注側(事業会社)のビジネスゴール**
　PDCAを回してサイトの収益性を上げる。

#見積もり工数の違い
ビジネスゴールの違いは、見積もりにも現れてきます。外注の見積もり工数は社内エンジニアのそれよりも高くなる傾向にあるようです。

また、外注にその施策を行う意図が知らされていない事も原因だと思います。なぜその実装をするのか分からないまま見積もる為、余計な工数で見積もりが膨れ上がる可能性もあります。外注に発注するときは「なぜそれを作りたいのか？」という背景まで伝えたほうが良いかもしれません。

#過去にあった外注とのトラブル事例

##(1)とんでもない低品質で結局いちから作り直し
納品物のソースを確認したら以下のようにほとんど画像だった事があります。
更新頻度が高いテキスト部分も全部画像でした…。

```HTML:「コーディング」とは、、、？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>納品物</title>
</head>
<body>
<img src="image.png">
</body>
</html>
```

**上記問題の原因**
・発注した外注先のスキル不足、及び制作における意識の低さ。
・短納期・低予算だった可能性。

**上記問題の改善案**
・受注側と発注側で認識を合わせる。仕様をはっきりさせてから発注する。
・受注側は仕様が不明瞭なところは積極的に確認しにいく。
・そもそも作り直すほど低品質な物が納品されるのであれば、はじめから自社内で対応する。

##(2)「出来ます」と言われて発注したら納期直前(当日)に「間に合わない」と言われる
**上記問題の原因**
・受注側の納期に対する認識の甘さ。
・発注側が正確な仕様を伝えてなくて着手が遅れる。また受注側も仕様を確認しに行かない。
・そもそもできない仕事を引き受けてしまう。

**上記問題の改善案**
・外注の「出来ます」を100%信用しないようにする。
・発注側も外注の進捗を常に把握しておく。(例 gitのログをみてリモートリポジトリへ全くpushされていない場合は進捗はどうか確認する。)
・納期の○日前までにgitにpushの形跡がなければ自社で巻き取るというようなルールを作る。
・そもそもはじめから自社内で対応する。

##(3)運用ルール・コーディングルールを無視した実装

**上記問題の原因**
外部に制作を発注する場合、サイト全体の制作というよりLPや既存ページの一部改修という依頼が多いかと思います、その際外注がサイト全体の構成やコーディングルールを確認しないままそのページ「だけ」改修すると、他のページが崩れていたり、今後の運用に影響が出るような低品質な納品物を受け取る羽目になります。

**上記問題の改善案**
・外注側の基本的な意識が低いことが第一の原因ではありますが、発注側の雑な指示が原因の場合もあります。依頼する際に最低限守ってほしいガイドラインを共有すると良いでしょう。
・もし、ルールを共有しても守ってもらえないなら自社で対応した方が良いでしょう。

#外部に発注するメリットって？
外部に仕事を発注するメリットは大きく分けると２つあると思います。
１つは、社内にないノウハウを社外の人間に助けてもらうこと。そしてもう１つは**社内の人間がやるべきでない作業を外注化することで社内の人間が本来の業務に集中できるようになる事**です。
では**本来の業務をすべて外注化してしまった場合**、どのような弊害が起きるでしょうか？

**本来の業務を外注化してしまった場合の弊害**
・社内にノウハウが蓄積されなくなる。
・本来やらなくても良い外注の巻取りという仕事に時間を費やすことになる。
・サイト全体がブラックボックス化されていきいざという時に自社内で対応できる人間が少なくなる。

結果として
**→ ノウハウが外注先に溜まっていき自社内のエンジニアにスキルが蓄積されなくなる**
**→ 自社内のエンジニアがコーディングする機会が少なくなりスキルアップしにくくなる**
といった弊害が起きます。

#外注との理想的な関係とは？
結局どうすれば外注と良好な関係が築けるでしょうか？
そもそも受注側と発注側で理想が異なるので、どこで折り合いをつけるかが重要になると思います。

**受注側の理想**
・なるべく高単価で、納期に余裕をもって依頼して欲しい。
・仕様はしっかりまとめてから依頼をして欲しい。
**受注側の義務**
→受注側は、依頼された施策に対して出来るだけ高品質な納品をするのが仕事なので、情報が揃ってなければ発注側に取りに行くことが必須となります。

**発注側の理想**
・なるべく低単価で、短納期でも対応してくれたら嬉しい。
・仕様が100%まとまってから依頼するのはスケジュール的に難しいので、不明点はヒアリングして欲しい。
できれば提案もして欲しい。
**発注側の義務**
→発注側は、高品質な納品を期待するのなら、出来るだけ実装に必要な情報なるべく早く外注に提供することが必須になります。

上記の通り、受注側双方が自分の義務を果たしていてば、信頼関係が徐々に構築されていくと思います。
受注側、発注側、片方の努力だけでは外部発注は成功しません。


#まとめ
受注側は「仕様を完全に揃えてから依頼してほしい」って思ってるだろうし、発注側ももちろんそうあるべきだと分かっています。だけど諸々の事情があってそれが難しいとしたら、密にやり取りをしていくしかないと思います。
発注側がなんでもかんでも外注へ仕事を振りすぎるのも問題です。
中には外注が見積もり書を作成している間に社内エンジニアだったらリリースまで完了できる案件もあるはずですが、そういう施策も外注化してしまったら却って手間になってしまします。

外注化がどんどん進んでいくと、社内のエンジニアにとってはブラックボックスが増えていき、実装ノウハウがどんどん外に流れていき緊急時の対応も難しくなります。
社内エンジニアがさばききれない実装を外注に手伝ってもらう、または社内にノウハウがない実装を外注にお願いするというのが、外注先との健全な付き合い方かと思います。

（なんだかんだ外注さんには助けられてます…。）
ぼくのかんがえたさいきょうのTeraTermマクロ

## ぼくのかんがえたさいきょうのTeraTermマクロの条件

* 作業サーバを間違えない工夫ができる（背景や設定を別々にできる）
* 入力はパスワードだけにしたい
* ログが残る。ログファイル名にサーバ名が入ったりする
* 安全に倒した設定ファイルがベースになってる
* フォルダごと共有すればチームで同じ設定が使える
* 設定は差分定義でOK

```powershell:フォルダ構成
PS C:\path\to\teraterm> tree /a /f
フォルダー パスの一覧:  ボリューム OS
C:.
|   server1.ttl
|   server2.ttl
|
+---config
|       TERATERM.INI
|
+---logs
\---macro
        override.ttl
        ssh.ttl
```

起動用ファイル。サーバーごとにたくさんできる。
接続ごとに上書きしたい設定をOVERRIDE_SETTINGSに定義。
本番サーバは背景青、ステージングサーバは背景緑などで分けておくとよい。

```text:server1.ttl
SERVER_NAME = 'server1'
HOSTNAME    = 'host1'
PORT        = '22'
USERNAME    = 'user1'

OVERRIDE_SETTINGS_NUM = 2
strdim OVERRIDE_SETTINGS OVERRIDE_SETTINGS_NUM
OVERRIDE_SETTINGS[0] = 'MouseCursor=hand'
OVERRIDE_SETTINGS[1] = 'VTColor=101,123,131,253,246,227'

include 'macro\ssh.ttl'
```

```text:server2.ttl
SERVER_NAME = 'server2'
HOSTNAME    = 'host2'
PORT        = '22'
USERNAME    = 'user2'

OVERRIDE_SETTINGS_NUM = 1
strdim OVERRIDE_SETTINGS OVERRIDE_SETTINGS_NUM
OVERRIDE_SETTINGS[0] = 'MouseCursor=cross'

include 'macro\ssh.ttl'
```

以下は共通処理。

```text:ssh.ttl
; params
;   SERVER_NAME
;   HOSTNAME
;   PORT
;   USERNAME
;   OVERRIDE_SETTINGS_NUM
;   OVERRIDE_SETTINGS

getdir CURRENT_DIR

LOGFILE_PATH = CURRENT_DIR
strconcat LOGFILE_PATH '\logs\'
strconcat LOGFILE_PATH SERVER_NAME
strconcat LOGFILE_PATH '_%Y%m%d%H%M%S.log'

INIFILE_PATH = CURRENT_DIR
strconcat INIFILE_PATH '\config\TERATERM.INI'

CUSTOMFILE_PATH = CURRENT_DIR
strconcat CUSTOMFILE_PATH '\config\tmp_'
strconcat CUSTOMFILE_PATH SERVER_NAME
strconcat CUSTOMFILE_PATH '_TERATERM.INI'

DIALOG_MESSAGE = 'Enter password for '
strconcat DIALOG_MESSAGE username
strconcat DIALOG_MESSAGE '@'
strconcat DIALOG_MESSAGE hostname
passwordbox DIALOG_MESSAGE 'Get password'
PASSWORD = inputstr

include 'macro\override.ttl'

CONNECT_COMMAND = HOSTNAME
strconcat CONNECT_COMMAND ':'
strconcat CONNECT_COMMAND PORT
strconcat CONNECT_COMMAND ' /ssh /auth=password /user='
strconcat CONNECT_COMMAND USERNAME
strconcat CONNECT_COMMAND ' /passwd='
strconcat CONNECT_COMMAND PASSWORD
strconcat CONNECT_COMMAND ' /L="'
strconcat CONNECT_COMMAND LOGFILE_PATH
strconcat CONNECT_COMMAND '"'
strconcat CONNECT_COMMAND ' /F="'
strconcat CONNECT_COMMAND CUSTOMFILE_PATH
strconcat CONNECT_COMMAND '"'

connect CONNECT_COMMAND
```

設定ファイルを上書きする処理。ベースファイルをコピーしたものに上書き設定を反映して一時ファイルとして保存。

```text:override.ttl
; params
;   INIFILE_PATH
;   CUSTOMFILE_PATH
;   OVERRIDE_SETTINGS_NUM
;   OVERRIDE_SETTINGS

fileopen DEFAULT_INI INIFILE_PATH 0
filedelete CUSTOMFILE_PATH
fileopen CUSTOM_INI CUSTOMFILE_PATH 0
while 1
    filereadln DEFAULT_INI LINE
    if result = 1 break

    NEW_LINE = LINE
    MATCHED = 0

    for i 0 OVERRIDE_SETTINGS_NUM - 1
        strsplit OVERRIDE_SETTINGS[i] '='
        REPLACE_KEY = groupmatchstr1

        REGEX = "^"
        strconcat REGEX REPLACE_KEY
        strconcat REGEX '=.*'

        strreplace NEW_LINE 1 REGEX OVERRIDE_SETTINGS[i]
        if result = 1 then
            filewriteln CUSTOM_INI NEW_LINE
            MATCHED = 1
        endif
    next

    if MATCHED = 0 then
        filewriteln CUSTOM_INI LINE
    endif
endwhile

fileclose DEFAULT_INI
fileclose CUSTOM_INI
```
【Unity】Gizmosで円や正多角形を描く

# バージョン
Unity 2019.1.9f1

# はじめに
2Dゲームを作っているときなど、簡単な目印なんかのために、Gizmosで円や正三角形を描きたくなる時があるかもしれません。
そんなときには本クラスをどうぞ。

# ソースコード
下記GitHubに上げてあります。
[unity-gizmos-utility](https://github.com/neuneu9/unity-gizmos-utility)

# 使い方
こんな感じです。
![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/5e414f2e-5b8a-e6db-51ec-149149c5dfe1.png)

```cs:GizmosTest.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GizmosTest : MonoBehaviour
{
    private void OnDrawGizmos()
    {
        Gizmos.matrix = transform.localToWorldMatrix;

        Gizmos.color = Color.green;
        // 円(2D)
        GizmosUtility.DrawWireCircle(Vector3.zero, 2f);
        // 正三角形(2D)
        GizmosUtility.DrawWireRegularPolygon(3, new Vector3(4f, 0f, 0f), 2f);
        // 正四角形(2D)
        GizmosUtility.DrawWireRegularPolygon(4, new Vector3(8f, 0f, 0f), 2f);
        // 正五角形(2D)
        GizmosUtility.DrawWireRegularPolygon(5, new Vector3(12f, 0f, 0f), 2f);

        Gizmos.color = Color.red;
        // 円(3D)
        GizmosUtility.DrawWireCircle(new Vector3(16f, 0f, 0f), Quaternion.LookRotation(new Vector3(-1f, 1f, 0f)), 2f);
        // 正三角形(3D)
        GizmosUtility.DrawWireRegularPolygon(3, new Vector3(20f, 0f, 0f), Quaternion.LookRotation(new Vector3(-1f, 1f, 0f)), 2f);
        // 正四角形(3D)
        GizmosUtility.DrawWireRegularPolygon(4, new Vector3(24f, 0f, 0f), Quaternion.LookRotation(new Vector3(-1f, 1f, 0f)), 2f);
        // 正五角形(3D)
        GizmosUtility.DrawWireRegularPolygon(5, new Vector3(28f, 0f, 0f), Quaternion.LookRotation(new Vector3(-1f, 1f, 0f)), 2f);
    }
}
```
Device media is write-protected. への対処法

# 1. はじめに
「Device media is write-protected.」エラーメッセージが表示された時の対処法について、自分への備忘録としてまとめてみました。ご参考になれば幸いです。

# 2. 前提条件
- OS：Windows10
- 対象メディア：2GB USB
- メディアフォーマット：FAT または FAT32

# 3. 「Device media is write-protected.」解除操作
- DOSコマンドプロンプトから diskpart を起動する。
WIN + R
diskpart

- select disk n では対象のドライブを番号選択すること。

```shell:DISKPARTコマンドライン
DISKPART > list disk
DISKPART > select disk 1
DISKPART > CONVERT MBR
DISKPART > CLEAN
DISKPART > CONVERT GPT
DISKPART > CONVERT MBR
DISKPART > EXIT
```

# 4. 対象メディアでの操作
- 「Device media is write-protected.」エラーメッセージが解消しているかどうか確認する。

# 5. 参考：YouTube
- [How to Remove Write Protection for HP Disk Storage Format Tool](https://youtu.be/NidagvFl5kI)

# 6. 参考：FreeDOSコマンド

```shell:FreeDOSコマンドライン
// ディレクトリ内容表示
C:\> dir

// ディレクトリ移動
C:\> cd xxxx

// テキストファイル内容表示
C:\> type xxxx
```

# 7. おわりに
FreeDOSやDOS-on-USBを用いたマザーボードのBIOSアップデート時などの参考になれば幸いです。

2019/08/31 TAKAHIRO NISHIZONO
HackMDをハックしてエディタ上のコンテンツを操作する

HackMDのエディタの内容を操作する方法を紹介する。

## エディタのインスタンスのありか

HackMDのエディタはCodeMirrorを使っており、そのインスタンスは`window.editor`にある。

このオブジェクトの存在は、Chromeのインスペクタを開いて、Console上で確認できる。

```js
window.editor
```

このオブジェクトに対し、CodeMirrorのAPIを呼び出せば操作することができるわけだ。


## 本文を上書きする

```js
window.editor.setValue('test')
```

本文がまるっと"test"に書き換わる。

## 本文を取得する

```js
window.editor.getValue()
```

## カーソルの位置を取得する

```js
window.editor.getCursor()
```

インスペクタ上で試すときは、3秒後に実行されるように`setTimeout`をしかけると良い:

```js
setTimeout(() => console.log(window.editor.getCursor()), 3000)
```

## カーソルの位置をセットする

```js
setTimeout(() => console.log(window.editor.setCursor({ line: 0, ch: 2 })), 3000)
```
JavaScript jQuery 導入方法

#JavaScript jQuery 導入方法
1.jQueryのライブラリを読み込む
2.x snippetの下のscriptタグに囲まれた記述があるのでこの記述をコピーする
3.index.htmlのhead内に貼り付ける
  注意）**jQueryは他のJavaScriptファイルより先に読み込まないとエラーになるためhead内はJavaScriptファイルより上に置く必要がある**


####2.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460518/5b05a516-91bd-8cb2-34b3-b24f241805cd.png)
vagrant@127.0.0.1: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).

タイトルのエラーが発生したが、ググっても今回の原因の解決策が見当たらなかったため、解決法をここに示す。

# 事象
vagrant sshすると、Permission deniedとなりsshログインできなくなりました。

```
$ vagrant ssh
vagrant@127.0.0.1: Permission denied (publickey,gssapi-keyex,gssapi-with-mic).
```

sshログインに失敗した仮想サーバーは、下記のVagrantfileで構築したものです。

```
Vagrant.configure("2") do |config|
  config.vm.box = "centos/7"
  config.vm.synced_folder ".", "/home/vagrant"
  config.ssh.insert_key = false
end
```

# 解決法

Vagrantfileを以下のように変更した後、vagrant reloadをします。

変更前

```
  config.vm.synced_folder ".", "/home/vagrant"
```

↓
変更後

```
  config.vm.synced_folder ".", "/home/vagrant/working"
```

# 原因
変更前のsynced_folderの設定で、仮想サーバー内の/home/vagrant/が上書きされて、sshに必要な/home/vagrant/.ssh/が消されたためです。

仮想サーバー内の状況は、以下の画像のように、VirtualBoxより対象の仮想サーバーにログインすることで確認いただけます。
![2019-08-31_00h40_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204910/44f144f4-2edb-53c3-76c5-9bdbef7c4b73.png)


先に述べた解決法を実施することで、無事に、/home/vagrant/配下にsshの設定フォルダがあること、vagrant sshできることを確認できました。
![2019-08-31_00h36_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204910/752e82f0-53e6-894a-f412-baf54f0090c5.png)

```
$ vagrant ssh
Last login: Fri Aug 30 15:39:59 2019
[vagrant@localhost ~]$
```


# 当事象が発生しうる他の原因
今回の発生原因は、synced_folderによるものでしたが、他にも下記のような原因で発生し得るようです。

・ユーザーにprivate_keyへのアクセス権限がない。
　https://qiita.com/RyutaKojima/items/81c47ad085ccb7c69a90

・Vagrantがキーペアを置き換えた。
　https://github.com/hashicorp/vagrant/issues/9831


# まとめ
同じ問題を抱える人の助けになれば。
隣接行列（adjacency）と行列積

#隣接行列（adjacency）と行列積
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/153bd8e5-c631-e573-a0e7-d048b0e7ada5.png)
このネットワークの隣接行列$A$は

```math:
A = 
\begin{pmatrix}
0 & 1 & 0 \\
0 & 0 & 1 \\
0 & 0 & 0
\end{pmatrix}
```
また、２の頂点の位置ベクトル$x$は

```math:
x = 
\begin{pmatrix}
0 \\
1 \\
0
\end{pmatrix}
```
隣接行列と位置ベクトルの行列積$Ax$,$xA$はそれぞれ

```math:
Ax = 
\begin{pmatrix}
1\\
0\\
0
\end{pmatrix}\\
x^TA = 
\begin{pmatrix}
0\\
0\\
1
\end{pmatrix}^T
```
このようにある位置ベクトルに隣接行列を右からかけると矢印方向にすすみ、左からかけると矢印方向と逆に辿る形となる。
LAMP環境でFuelPHP動かしてみる vol.1 インストール編

# 概要
業務内でFuelPHP使用する可能性あったので自宅で公式ドキュメント見つつインストール行ってたら思ったより手間取ったのでMEMO
同じ境遇の方のお役に立てれば光栄です。
今回はインストール編

# 本文

## 筆者環境
```
#  OS
$ cat /proc/version
Linux version 4.4.0-75-generic (buildd@lgw01-21) (gcc version 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.4) ) #96-Ubuntu SMP Thu Apr 20 09:56:33 UTC 2017
```
```
#  mysql
$ mysql --version
mysql  Ver 14.14 Distrib 5.7.27, for Linux (x86_64) using  EditLine wrapper
```
```
#  php
$ php -v
PHP 7.0.33-0ubuntu0.16.04.6 (cli) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2017 Zend Technologies
    with Zend OPcache v7.0.33-0ubuntu0.16.04.6, Copyright (c) 1999-2017, by Zend Technologies
```


## クイックインストール

```
# まずはドキュメントルートに降りようか
$ cd /var/www/html/
# oil を Web からクイックインストール
$ curl get.fuelphp.com/oil | sh
sh: 2: Syntax error: newline unexpected
# いやシンタックスエラーでインストールできない
# https://qiita.com/amagurik2/items/d3fa36bead063d3b7f4b
$ curl https://get.fuelphp.com/oil | sh
# oil が、たった今、インストールされました。Sites ディレクトリで blog プロジェクトを作ります
$ mkdir Sites
$ cd Sites/
$ oil create blog
# エラー出た
Cannot create cache directory /home/vagrant/.composer/cache/repo/https---repo.packagist.org/, or directory is not writable. Proceeding without cache
# https://stackoverflow.com/questions/35874482/cannot-create-cache-directory-or-directory-is-not-writable-proceeding-withou
# composerをインストールしたとき、〜/ .composerフォルダーがルートによって作成されたため、$ sudoコマンドを使用したことを確認してください
$ sudo chown -R $USER $HOME/.composer
# もっかい！！！
$ oil create blog
```
## ブラウザで確認
http://[IPアドレス]/Sites/blog/docs/

## 参考にさせて頂いたリンク先
[FuelPHPのクイックインストールができない - Qiita](https://qiita.com/amagurik2/items/d3fa36bead063d3b7f4b)
[php - Cannot create cache directory .. or directory is not writable. Proceeding without cache in Laravel - Stack Overflow](https://stackoverflow.com/questions/35874482/cannot-create-cache-directory-or-directory-is-not-writable-proceeding-withou)