OmniAICreator/Qiita-1.07M huggingface dataset:
[HTML]：ブロックレベル要素とインライン要素

#はじめに 
今回はHTMLを勉強中にブロックレベル要素とインライン要素に配置ルールがあるということを知りましたので、メモ代わりに・・・

##ブロックレベル要素 & インライン要素について
- ブロックレベル要素：文字通りブロックとして認識されます。ブラウザの前後には改行が入る。
 (例) ol , ul , p , divタグ等

- インライン要素：ブロックレベル要素の内容として用いられる要素です。ブラウザでは改行が入らず、文章の一部として表示されます。
 (例) span , img , input , textareaタグ等

###配置ルール
ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 しかし、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。




簡単ですが、これにて
Android Studio(IntelliJ)のRunタブのConsoleが消えてしまった場合の対処法

# 1. FlutterアプリのデバッグにAndroid Studioを使っていたら、RunタブからConsole等が消えていた…

<img width="434" alt="itsgone.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38538/6e430d63-da47-fc46-6ee0-1ea91dc12d8a.png">

# 2. ~/Library/Preferences/AndroidStudio3.5/options/ へ移動してみる

<img width="1267" alt="cd.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38538/547d347d-acc5-2f31-5fff-d6f65b581b9b.png">

# 3. おもむろにrunner.layout.xmlを削除してみる

<img width="151" alt="rm.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38538/b2ec5675-dc17-09c2-02c5-e02fa481de45.png">

# 4. Android Studioを再起動してもう一度トライ

<img width="537" alt="yay.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38538/72675c7c-d411-2364-76d4-d1a47f8a5edc.png">

出た…

参考になりましたら幸いです。
Laravel5: Controll内で使用するEloquentモデルを動的に変更

使用するEloquentモデルが違うだけで処理が同じControllerがあったので、一つにまとめたかった。

# モデル名を入れた変数で呼び出す

呼び出すClass名を変数に格納すれば、そこからnewもstaticメソッドも利用が可能。

例えばinputで受け取った値が"staff"なら```Staff::select(〜```、それ以外なら```User::select(〜```に切り替えたい場合。

```HogeController.php
class HogeController extends Controller
{
    public function index(Request $request)
    {
        if ('staff' === $request->type) {
            $table = 'App\Staff';
        } else {
            $table = 'App\User';
        }
        $contents = $table::select('id', 'name')->get();
        return response()->json($contents);
    }
}
```

変数に入れる文字列は```use App\Staff;```を設定していても```$targetModel = 'App\Staff';```と書く必要があるので注意。

# 参考

[PHPにおいてstaticメソッドの呼び出し元クラスを動的に変更](http://dekokun.github.io/posts/2013-01-14.html)
Unityエディタでアニメーションを停止させたまま他のオブジェクトを操作する

#はじめに
以下Gif画像の通り、Animationタブの右上の鍵マークでロックすると、
アニメーションを止めたまま他のゲームオブジェクトを操作できます。

![20190910_Animation2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/e5464864-0202-b669-bfec-95f1537397b4.gif)

※同時に止めることのできるアニメーションは１つのみのようで、アニメーションするゲームオブジェクトを複数止めたい場合はスクリプトを書く必要がありそうです。
JS基礎知識

#独学のアウトプットの場としてQiitaの利用開始。（2019年9月） 

勉強期間はざっと4ヶ月。内容は

・html
・css

以上。
縦長のサイトが模写できる程度には成長。

#今日やったこと
Javascriptの基礎知識を学んだ。
###1つ目は配列とオブジェクトの違いについて。
#####["ばなな", "りんご"]
こんなのが配列。
#####{name:"ばなな", price:"15円"}
こっちがオブジェクト。
実はいまいちわかっていない。
オブジェクトの中に配列入れたり、その逆もあったり複雑。謎。

###2つ目は関数、引数、戻り値について。
#####関数
ある程度まとまった処理を一つにまとめて好きな時に呼び出すことを可能にしているのが関数。


#####引数
次が引数。
そもそも読み方がわかんない。いんすう？ひきすう？
関数の処理を書く **{}** の前に **()** があるんだけど、その中に名前を付ける。
そして、後からその名前に具体的な数値を入れて処理と連動させる。
テンプレートリテラルと一緒に使ってた。

#####戻り値
最後がこれ。
あまり理解ができなかった。難しい。
曰く、関数の処理結果を呼び出し元で受け取る方法がこれにあたるらしい。
とりあえず、関数の中にreturnと書き、その後ろに引数に動きをつける。今日やったやつだと足したり割ったり簡単な奴。
そして後から引数に数値を入れてconstとかでなんか作って呼び出す。
すると、returnの後ろに書いた動きがついてる。
具体的には

```js
 const oooag = (a, b) => {

  return a + b;
 
 };

 const result = oooag(3, 4);
```

で、これをconsole.logで出すと、7って出る。謎。

１記事目終了。
Githubのmasterにgitbookを上げる流れ

## 経緯
+ Githubを使ってドキュメント管理がしたかった。
    + リポジトリ内にてドキュメントのバージョン管理を行う
    + GitHubPagesでその内容が見れるようにしたい
    + gitbookがいい感じなのでそれを使いたい。
+ ブランチを切って、そこにドキュメントを上げることで、GithubPagesにリポジトリ単位でURL指定をすると、見ることができる。<br>(例) https://sample.github.io/sampleRepository

    + ブランチを切ってあげなければならない、上げるコマンドが若干複雑(怠惰)
    + Githubにてコードと同じリポジトリ内で、ブランチを切らずにバージョン管理ができないものか。。。

## 手順
そもそも今は、わざわざbranch切らなくても、masterやmaster/branch選択できるようになった模様。(参考を参照。)
⇒ じゃあそれ使ってみよう！
#### 1. githubにてリポジトリを作成する
=> [Githubに新規リポジトリを追加](https://qiita.com/sodaihirai/items/caf8d39d314fa53db4db)を参照
#### 2. gitbookを作成する
1\. リポジトリに移動する

```
C:>chdir sampleProject
```

2\. "docs"フォルダを作る(これがgitbookをデプロイするフォルダになる)

```
C:\sampleProject>mkdir docs
```

3\. docsフォルダに移動する

```
C:\sampleProject>chdir docs
```

4\. gitbookを管理するフォルダを作る

```
C:\sampleProject\docs>mkdir gitbookFolder
```

5\. gitbookを管理するフォルダに移動する

```
C:\sampleProject\docs>chdir gitbookFolder
```

6\. gitbookを初期化する

```
C:\sampleProject\docs\gitbookFolder>gitbook init
```

7\. gitbookをいろいろいじった後、ビルドする(HTMLに変換する)

```
C:\sampleProject\docs\gitbookFolder>gitbook build
```

8\. _bookフォルダに展開されたHTML、静的ファイルをdocsフォルダ(親フォルダ)にコピーする

```
C:\sampleProject\docs\gitbookFolder>xcopy _book ..\ /s/e/i
```

結果こうなる。

```
C:\sampleProject\docs\gitbookFolder>tree C:\sampleProject /f
C:.
│  index.html
└─docs
    │  index.html
    │  search_index.json
    ├─gitbook
    │  ├─fonts
    │  │  └─fontawesome
    │  ├─gitbook-plugin-fontsettings
    │  ├─gitbook-plugin-highlight
    │  ├─gitbook-plugin-lunr
    │  ├─gitbook-plugin-search
    │  ├─gitbook-plugin-sharing
    │  └─images
    └─gitbookFolder
        │  README.md
        │  SUMMARY.md
        └─_book
            │  index.html
            │  search_index.json
            └─gitbook
                ├─fonts
                │  └─fontawesome
                ├─gitbook-plugin-fontsettings
                ├─gitbook-plugin-highlight
                ├─gitbook-plugin-lunr
                ├─gitbook-plugin-search
                ├─gitbook-plugin-sharing
                └─images
```

この状態でgitコミット

```
C:\sampleProject\docs\gitbookFolder>chdir C:\sampleProject
C:\sampleProject>git add *
C:\sampleProject>git commit -m "make gitbook"
C:\sampleProject>git push origin master
```

#### 3. github側の設定でgitbookの読み取り先を変更する
1\. githubでgitbookの読み取り先を設定する
![movie.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100765/34392ab8-a856-e7a0-3d04-2f77f538a974.gif)

2\. 開いてみる。([https://ユーザー名.github.io/リポジトリ名]())
![スクリーンショット (49).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100765/518b11ef-028d-ac9b-531b-3c3ccfb8b4ed.png)


#### 4. その後
その後は、7\.以降を繰り返せばOK.
※ もっといいフォルダの切り方はあるかもしれないです。その辺は各自の工夫に任せます。(自分的にはこの構成が好きです)

## 参考
+ [GitHubのmasterブランチをWebページとして公開する手順（GitHub Pages）](https://qiita.com/tonkotsuboy_com/items/f98667b89228b98bc096)
React HooksのuseEffectパターン集

## はじめに
React Hooks使っていますか？
機能をコンポーネント単位で管理することができ、メンテナンスしやすいコードが書けるので大変便利ですよね。

ただClass Componentのときと比べて一部の機能、特にuseEffectの書き方に迷ってしまうシーンが多いため比較的使うであろうパターンについてまとめました。

## useEffectパターン

### コンポーネント内の特定の値が変化したら更新
第二引数に変更を監視する値を置き、値が変化したら関数が実行されます。

```tsx
useEffect(() => {
  console.log(stateA)
}, [stateA])
```

### コンポーネント内の何かしらの値が変化したら更新
第二引数を省略します。
いずれかのstate等が変化すると実行されます。

```tsx
useEffect(() => {
  console.log('hello')
})
```

### アップデート前の値を取得する
return内の処理ではupdateが行われる前の値を取得できます。

```tsx
useEffect(() => {
  console.log(stateA)
  return () => {
    console.log(stateA)
  }
}, [stateA])
```

### componentDidMount (コンポーネントのマウント時)
useEffectの第2引数を空にするとcomponentDidMountと同様の処理を行うことができます。[^componentDidMount]

```tsx
useEffect(() => {
  // 処理
  console.log('Mounted!')
}, [])
```

### componentDidUpdate (コンポーネントのアップデート時)
useEffectではコンポーネントのレンダーがトリガーになり、mountとupdate両方の処理が行われてしまうのでそのままではupdateのみを行うことはできません。
updateのみを実現するためにはuseRefを使い、マウント時の処理を防ぐことによって表現できます。[^componentDidUpdate]

```tsx
const mounted = useRef(false)
useEffect(() => {
  if(mounted.current) {
    // 処理
    console.log('Updated!')
  } else {
    mounted.current = true
  }
}, [stateA])
```

### async componentDidMount (マウント時に順次処理)
useStateの第一引数はasyncにすることはできないのでasyncで囲った関数を呼び出すようにします。
当然ながら第一引数の関数内では非同期処理が適用されず複数の処理を行う場合は注意が必要です。[^asynccomponentDidMount]

```tsx
useEffect(() => {
  asyncFunc()
}, [])

const asyncFunc = async () => {
  await new Promise(resolve => {
    setTimeout(() => resolve(console.log('hello')), 1000);
  });
  console.log('world');
}
```

### async componentDidUpdate (アップデート時に順次処理)
考え方は基本的にasync componentDidUpdateと同じです。
非同期処理を行う関数内で実行してあげましょう。

```tsx
const mounted = useRef(false)

useEffect(() => {
  if(mounted.current) {
    asyncFunc()
  } else {
    mounted.current = true
  }
}, [stateA])

const asyncFunc = async () => {
  // 処理
  await new Promise(resolve => {
    setTimeout(() => resolve(console.log('hello')), 1000);
  });
  console.log('world');
}
```

### componentWillUnmount 
第二引数を空にした状態でreturnを行うと同様の結果を得られます。

```tsx
useEffect(() => {
  return () => {
    // 処理
    console.log('Unmounting!')
  }
}, [])
```

### componentDidMount + componentDidUpdate
マウントとアップデートそれぞれ別の処理を行いたい場合、上記の書き方を利用し両方に記述すると表現できます。


```tsx
const mounted = useRef(false)

useEffect(() => {
  if(mounted.current) {
    // Update時の処理
    console.log('Updated!')
  } else {
    // Mount時の処理
    console.log('Mounted!')
    mounted.current = true
  }
}, [stateA])
```

## 最後に
useEffectは使いこなせると便利ですがそれまでが大変です。
今回はClass Component目線での書き方にしましたが、Functional ComponentでのuseEffectは完全に同じものではないのでご留意ください。正確な違いについては[こちら](https://ja.reactjs.org/docs/hooks-effect.html)をご確認ください。
場合によってはClass Componentの方が最適である可能性もあるのでそちらも検討してみてください。

楽しいReactライフを！

## 参考

[^componentDidMount]: https://ja.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
[^componentDidUpdate]: https://stackoverflow.com/questions/53255951/equivalent-to-componentdidupdate-using-react-hooks
[^asynccomponentDidMount]: https://stackoverflow.com/questions/53332321/react-hook-warnings-for-async-function-in-useeffect-useeffect-function-must-ret
GASでGoogle Books API使って書籍管理

## 概要
**Google Apps Script**を用いて、**Google Book API**の情報を呼び出してみました。
書籍管理用のスプレッドシートとかに使えるかも。

## 完成図
A列に書籍コードであるISBNを入力すると、B~G列に書籍の情報が自動挿入されるものを作ります。

<img width="1385" alt="スクリーンショット 2019-09-09 23.52.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/048da997-05f8-5e5a-9beb-2d5a82e8e2fd.png">

## 手順
### 1. スプレッドシートのスクリプトエディタを開く
**メニュー > ツール > スクリプトエディタ** を選択。
<img width="1384" alt="スクリーンショット 2019-09-09 23.56.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/33f40bce-9cb6-1afe-6e8c-ed746f21283b.png">

### 2. スクリプトファイルにコードを記載する

```js
function setBookInfo(){

  sheet = SpreadsheetApp.getActiveSheet(); // 開いているシートのオブジェクトを取得
  insertRow = sheet.getActiveCell().getRow(); // 選択している行のオブジェクトを取得
  isbn = sheet.getActiveCell().getValue(); // 選択しているセルの値を取得し、変数isbnに代入
  Logger.log(isbn); // isbnをログ出力

  // Google Books APIを叩いてレスポンスを取得  
  response = UrlFetchApp.fetch('https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + '&country=JP');

  data = JSON.parse(response.getContentText()); //JSON形式のレスポンスをオブジェクトとしてパース
  bookInfo = data.items[0].volumeInfo; //本の情報を取得

 sheet.getRange(insertRow,2).setValue('=IMAGE("'+bookInfo.imageLinks.thumbnail+'")'); // 2列目にサムネイルを挿入
  sheet.getRange(insertRow,3).setValue(bookInfo.title); // 3列目にタイトルを挿入
  sheet.getRange(insertRow,4).setValue(bookInfo.canonicalVolumeLink); // 4列目にリンクを挿入
  sheet.getRange(insertRow,5).setValue(bookInfo.authors.join()); // 5列目に著者を挿入
  sheet.getRange(insertRow,6).setValue(bookInfo.publishedDate); //6列目に発行日を挿入
  sheet.getRange(insertRow,7).setValue(bookInfo.categories.join()); //7列目にカテゴリを挿入
  
}

function onEdit(e){
  // 編集カラムが1列目であればsetBookInfo関数を呼び出す
  if(e.range.getColumn() == 1) {
      setBookInfo();
  }
}
```

## 3. トリガーを設定する
**メニュー > 編集 > 現在のプロジェクトのトリガー** を選択。
<img width="1262" alt="スクリーンショット 2019-09-10 0.12.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/1cc4caa6-dc66-9b41-19df-12f2c3fb477b.png">

**トリガーを追加** をクリック。
<img width="1440" alt="スクリーンショット 2019-09-10 0.15.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/ca1df33e-29fe-0b92-34ec-b72a0177d0b1.png">

実行する関数： **onEdit**
イベントのソース： **スプレッドシートから**
イベントの種類： **編集時**
を設定して保存。


これで完成です。

## 参考

- [Google Apps Script 公式ドキュメント](https://developers.google.com/apps-script/reference/)
- [Google Books APIs 公式ドキュメント](https://developers.google.com/books/docs/overview)
- [超初心者向けGASでBotを作りながら基礎を学ぶ](https://tonari-it.com/gas-script-editor/)
- [Google Books APIsを使ってISBNから書籍情報を取得する](http://ytkg.hateblo.jp/entry/2019/03/07/233235)

## 最後に
GASは独自の関数などは探さないといけないですが、直感的でわかりやすくサクッと作れたので良かったです。
今後はISBNをカメラからバーコードで読み取って挿入できるようにしたいです。
記事に間違いや不明な点があれば遠慮なくご指摘ください。

**追記**
掲載ありがとうございます！
[WEB開発に役に立つAPI一覧+API毎に関連するQiita記事を分類 ！](https://qiita.com/hamaup/items/cd7212aa1d0b1f0e37de#_reference-383c1a8fdfaa3a9d514a)
身内向けにGitHubの勉強会をした話

# 概要
友人に共同開発をしよう！って投げかけて、共同開発をしたことがないメンバーだったため、身内向けに`GitHub`の勉強会を開きました。
それなりに頑張って作ったつもりなので、その時使用したスライドを公開します。

## 方針
- プレゼン形式で私が喋りながら、実際にGitのコマンドやGitHubの機能を使ってみて、理解を深める。
- あとから見返してもなんとなく雰囲気はつかめる資料を目指した。

## クリックするとslideshareのページに飛びます。
追記：編集画面だとサムネイルクリックで飛べたけど、通常の記事からだと飛べなかったので、リンクを張り直しました…。
---
[ここ](https://www.slideshare.net/ArusuDev/github-170197912)から飛べます。
（Qiitaに埋め込めると良いんだけどなぁ…)
[![thumbnail](https://image.slidesharecdn.com/githubslide-190909072356/95/slide-1-1024.jpg)](https://www.slideshare.net/ArusuDev/github-170197912)
HTMLのheaderの雛形を作ったのでメモ

HTML・CSSでheaderの雛形を作ったのでメモ。

https://codepen.io/ckona/pen/RwbQzER

## 参考

- https://www.mercari.com/jp/
- Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ
ハードウェアの基本知識

#基本的なシステムハードウェア
##CPU
コンピュータのメイン機能である演算処理を行う部分。メモリ上からプログラムを読み出し、処理を実行する。CPUには様々な種類があり、Linuxは非常に多くのCPU(アーキテクチャ)に対応している。GHzえ表される動作周波数は、性能の指標の1つとして見られている。

(例)

- Intel系のCPU｜「x86」、「IA-32」、x86アーキテクチャを64bitに拡張した「x86-64」など
- ARM系のCPU｜組み込み機器に多く使われている。

##メモリ
データを記憶する役割を持つパーツがメモリ(メインメモリ、主記憶)という。メモリに記憶された内容はシステムの電源が切れると消えてしまう。Linuxが動作するには、256MB〜1GB程度以上のメモリが必要になる。

##ハードディスク
メモリは容量もそれほど大きくはなく、電源を切ると内容は消失してしまうため、大きなサイズのデータや長期間保存するデータはハードディスクに格納する。システムに内臓するタイプのものと、外付けで接続する形態のものがある。ハードウェアなどの記憶装置をまとめてストレージとも呼ぶ。

##拡張カード
マザーボードの拡張スロットに装着する形で様々な機能を提供するハードウェア部品を指す。ネットワークカード(NIC)、サウンドカード、モデムカード、ビデオカード、SCSIカード、RAIDカードなどがある。拡張カードを取り付けたり取り外したりするときは、一般的にシステムの電源を切っておく必要がある。

#BIOS/UEFI
##BIOS(Basic Input Output System)
キーボードやハードディスクなどのデバイスを制御する、最も基本的な制御プログラム。BIOSはコンピュータのマザーボードや拡張カードに搭載されたフラッシュROMに書き込まれている。OSやアプリケーションは、BIOSのインターフェイスを利用して簡単にハードウェアにアクセスすることができる。マザーボード上のBIOSはシステムBIOS、拡張カード上のBIOSは拡張BIOSと呼ぶ。

*フラッシュROM｜ROM(Read Only Memory)は読み出し専用のメモリ。フラッシュROMは書き換えることが可能なROM

BIOSの役割

- OSを起動するためのプログラムをディスクから読み込んで実行する
- デバイスの動作を設定する
- 基本的な入出力を制御する

##UEFI(Unified Extensible Firmware Interface)
BIOSの後継となるファームウェア規格。
UEFIでは、一部OSにおける起動ドライブの容量制限(BIOSでは2TB)がなかったり、GUIベースのセットアップ画面を利用できるなど、様々な拡張がされている。

BIOS/UEFIセットアップで設定できる基本項目

- 日付や時刻(ハードウェアクロック)
- ディスクドライブや各種デバイスのパラメータ
- キーボードの使用/不使用
- 電源管理
- 起動ドライブの順序
- デバイスのIRQ(Interrupt Request：割り込み要求)の割り当て
- 各種デバイスの使用/不使用
文字列操作Excel関数

Excel関数の組み合わせを備忘録として残しておきます。

###FQCNからクラス名を取得する
```vb
=RIGHT(A1,LEN(A1)-FIND("★",SUBSTITUTE(A1,".","★",LEN(A1)-LEN((SUBSTITUTE(A1,".",""))))))
```

```:結果
A1セル sample.group1.StrClass
結果 StrClass
```

###フルパスからファイル名を取得する
```vb
=RIGHT(A1,LEN(A1)-FIND("★",SUBSTITUTE(A1,"\","★",LEN(A1)-LEN((SUBSTITUTE(A1,"\",""))))))
```

```:結果
A1セル C:\vbaSample\sample\test.txt
結果 test.txt
```

###フルパスからディレクトリを取得する(末尾\なし)
```vb
=LEFT(A1,FIND("★",SUBSTITUTE(A1,"\","★",LEN(A1)-LEN(SUBSTITUTE(A1,"\",""))),1)-1)
```

```:結果
A1セル C:\vbaSample\sample\test.txt
結果 C:\vbaSample\sample
```

###フルパスからディレクトリを取得する(末尾\あり)
```vb
=LEFT(A1,FIND("★",SUBSTITUTE(A1,"\","★",LEN(A1)-LEN(SUBSTITUTE(A1,"\",""))),1))
```

```:結果
A1セル C:\vbaSample\sample\test.txt
結果 C:\vbaSample\sample\
```
FontAwesome.WPFを使ってみた

# ことはじめ

FontAwesome.WPFなんて素晴らしいものがあったので使ってみました

```xml
<Window x:Class="TemporalTableTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TemporalTableTest"
        xmlns:fa="http://schemas.fontawesome.io/icons/"
        mc:Ignorable="d"
        Title="MainWindow" ResizeMode="NoResize" SizeToContent="WidthAndHeight">
    <Grid>
        <Button HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Margin="10,10,0,0"
                Width="75"
                >
            <WrapPanel>
                <fa:FontAwesome Icon="Plus" Margin="0,3,8,0"/>
                <TextBlock>New</TextBlock>
            </WrapPanel>
        </Button>
    </Grid>
</Window>
```

1. NuGetで`FontAwesome.WPF`をインストール
2. `xmlns:fa="http://schemas.fontawesome.io/icons/"`を書く
3. `<fa:FontAwesome Icon="Plus" Margin="0,3,8,0"/>`を書く

`Margin`ですが、フォントサイズと合っていないからか、少し上よりで表示されてしまうので、調整しています。

ですが、基本的な使い方は非常に簡単でデザインセンスがないエンジニアとして、こういったライブラリは嬉しい限りです。
Windows構築メモ

# 開発環境構築
Windowsを初期インストールしたため、開発環境構築メモ

# エディタ
1. [サクラエディタ](https://sakura-editor.github.io/download.html)  
    V2(Unicode版) 最新版
2. [VScode](https://code.visualstudio.com)
3. VSCode 拡張  
  `Japanese Language Pack for VS Code`
  `Bookmarks`
  `Bracket Pair Colorizer`
  `Indenticator`
  `Log File Highlighter`
  `Output Colorizer`
  `Partial Diff`
  `Path Autocomplete`
  `Prettier`
  `Trailing Spaces`
  `vscode-icons`
  `YAML`
  ~~`Local History`~~
  `Marp for VS Code`
  `Paste Image`
  `Diff Folders`
  `Auto Rename Tag`
  `Auto Close Tag`
  `Beautify`
  `JavaScript(ES6() Snippets`
  `Vue Peek`

#### 参考
* [VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)

# Git
1. [Git for Windwos](https://gitforwindows.org/)
2. VSCode 拡張 
  `Git History`
  `GitLens`

#### 参考
* [VSCodeでのGitの基本操作まとめ](https://qiita.com/y-tsutsu/items/2ba96b16b220fb5913be)

# PrantUML
1. Java SDK(OPEN JDK)  
 http://jdk.java.net/archive/ から`11.0.2`のzipをダウンロード展開し、環境変数に`JAVA_HOME`設定
2. Graphviz
3. VSCode 拡張
  `PlantUML *jebbs版`

#### 参考
* [Windows 版 OpenJDK インストール手順](https://qiita.com/ryo-sato/items/87d05021fcc0519e8828)
* [[Visual Studio Code][Windows] PlantUMLの環境を設定する（シンタックスハイライト+リアルタイムプレビュー）](https://qiita.com/koara-local/items/e7a7a7d68a4f99a91ab1)

# パッケージ管理
1. [Chocolatey](https://chocolatey.org/install)
　　powerShell（管理者権限）で以下を実行

　　 [Chocolateyパッケージリポジトリ](https://chocolatey.org/packages)

```
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
```
`chocolatey -v`でインストール確認
`choco install chocolateygui`

#### 参考
* [【Chocolatey入門】導入から注意点、今後の可能性まで](https://qiita.com/kangetsu121/items/b6352b547cd32e71bc65)


# Node.js
1. [Node.js](https://nodejs.org/en/download/)

`choco install nodejs`
2. [yarn](https://yarnpkg.com/lang/ja/docs/install/#windows-stable)

`choco install yarn`

#### 参考
* [Nuxt.js (Vue.js) + Express + Socket.IO でリアルタイムWeb (チャット) を体験する](https://qiita.com/Masayuki-M/items/840a997a824e18f576d8)


# Nuxt.js
1. [Nuxt.js](https://ja.nuxtjs.org/guide/)

`yarn global add nuxt`
`yarn global add vue-cli`
`yarn create nuxt-app <project-name>` プロジェクト作成

2. VSCode 拡張 `Vetur`

#### 参考
* [windows10にNode.jsをインストールする](https://qiita.com/rema424/items/c1ef92625ecaf4421e6f)


# DBクライアント
1. [TablePlus](https://tableplus.com)

#### 参考
* [Sequel proの代わりを探すためにTeamSQL、TablePlus、DBeaverを使ってみた結果](https://qiita.com/murapon/items/5e95302e854ded387390#_reference-052ac1e0fc30cd4d3ce6)
* [SequelProよりも使いやすい！？ TablePlusの使い方](https://workout-engineer.com/tableplus/)

# 図形描画
1. [drawio](https://www.draw.io/)  
`choco install drawio`

# PDF作成
1. [cubepdf](https://www.cube-soft.jp/cubepdf/)

# アイコン無料
1. [icooon-mono](https://icooon-mono.com/category/sign/)

# favicon作成サイト
[Favicon Generator](https://realfavicongenerator.net/)
各デバイス用のfaviconが一気に作成できて超便利！

# PWABuilder
[PWABuilder](https://www.pwabuilder.com/)
PWA用のfaviconやmanifestファイルを作成してくれる。

# FTPツール
[WinSCP](https://winscp.net/eng/download.php)
ちょうどいいFTPツール

・・・随時更新
Node.jsでもUNIXドメインソケットを使いたい

# はじめに
Node.jsで使うことのできる通信方式としては、TCPソケット、ストリーミングIPCエンドポイント、そしてHTTPインターフェースです。HTTPインターフェースに関しては、実際にはTCPソケットとして動いているので、実質前の2つになります。
では、TCPソケットとストリーミングIPCエンドポイントの違いは何でしょうか？

TCPソケットは、TCP/IPの上でソケットを用いて行う通信方式です。
一方のストリーミングIPCエンドポイントは、IPC(Inter-Process Communication)の下、同一マシーン内でプロセス間通信をストリーミングで行う通信方式です。

このストリーミングIPCエンドポイントをUNIX上で実現されている技術が、『 **Unix domain sockets** 』です。

## UNIXドメインソケットとは？
ローカルで開かれたソケットファイルを通じて、サーバー側とクライアント側とで通信を行う方法です。
Node.jsでは適用されていませんが、一般的には `unix://` でURLが始まります。

TCPで行う通信と異なり、ローカルファイルを指定して通信を行うため、ドメインの解決や外部通信をしません。
そのため、TCPに比べ速いです。
その検証に関しては、 [Performance Analysis of Various Mechanisms for Inter-process Communication](http://osnet.cs.binghamton.edu/publications/TR-20070820.pdf) をご覧ください。

![『TCPソケット』の接続イメージ](https://github.com/walk8243/unix-domain-socket/raw/master/images/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%892.JPG "『TCPソケット』の接続イメージ")
![『UNIXドメインソケット』の接続イメージ](https://github.com/walk8243/unix-domain-socket/raw/master/images/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%891.JPG "『UNIXドメインソケット』の接続イメージ")

# 使ってみよう！
この記事のサンプルプログラムは [unix-domain-socket](https://github.com/walk8243/unix-domain-socket) にあります。

UNIXドメインソケットは、Node.jsのビルドインモジュールの `net` の中で提供されています。
そのため、この記事では `net` を主に用いてプログラムを書いていきます。
[Net | Node.js](https://nodejs.org/api/net.html)

## 送信側
以下のようなプログラムを作成しました。

```.ts
import net from 'net';

// UNIXドメインソケットのコネクションを作成する
// net.createConnectionの引数にファイルを指定するとUNIXドメインソケットで繋がる
const client = net.createConnection('/tmp/unix.sock');
client.on('connect', () => {
  console.log('connected.');
});
client.on('data', (data) => {
  console.log(data.toString());
});
client.on('end', () => {
  console.log('disconnected.');
});
client.on('error', (err) => {
  console.error(err.message);
});
client.write('hello');
```

## 受信側
以下のようなプログラムを作成しました。

```.ts
import net from 'net';
import fs from 'fs';

// サーバーを設定
const server = net.createServer((connection) => {
  console.log('connected.');
  connection.on('close', () => {
    console.log('disconnected.');
  });
  connection.on('data', (data) => {
    console.log(data.toString());
  });
  connection.on('error', (err) => {
    console.error(err.message);
  });
  connection.write('unix domain socket');
  connection.end();
});

// ソケットファイルを削除（存在するとlistenできない）
try {
  fs.unlinkSync('/tmp/unix.sock');
} catch (error) {}

// UNIXドメインソケットでlistenする
server.listen('/tmp/unix.sock');
```

## 実行してみる
ともに同じ仮想サーバー内で実行しています。
左側は送信側で、右側は受信側です。
![UNIXドメインソケットの実行状況](https://github.com/walk8243/unix-domain-socket/raw/master/images/bash.gif)

# おわりに
このUNIXドメインソケットは、ローカルマシーン内でプロセス間で通信を行う場合に効果を発揮します。
例えば、KubernetesのPod内のコンテナ間で通信を行う場合に使うことができます。

ボリュームを共有してマウントすることで通信ができるので、ドメインの名前解決に縛られることが無くなります。
ポートで通信を行う場合と比べて制限を受けない部分もあるので、一度使ってみてはどうですか？
VBAからWinMergeを起動する方法

## はじめに
VBAからWinMergeを起動する方法について忘備録として残しておきます。

## Excel
以下のように差分を取りたい対象のフルパスが入った表を用意します。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278934/bea5277f-a1f1-57f4-5906-231ca2be4aac.png)

ここでは同じ行のファイル1とファイル2を比較します。

## コード
```vb
Sub ExecWinMerge()

    '結果
    Dim rc As Long
    '選択セル(WinMerge比較)の行番号
    Dim targetRow As Long
    '選択セル(WinMerge比較)と同じ行の対象ファイル1
    Dim targetFile1 As String
    '選択セル(WinMerge比較)と同じ行の対象ファイル2
    Dim targetFile2 As String
    'WinMerge の実行ファイル
    Dim winExeFile As String
    '実行時の引数を結合した文字列
    Dim exeStr As String
    
    '選択しているD列の行番号を取得
    '例)D2を選択している場合は2
    targetRow = Selection.Row
    '対象ファイル1のパスを取得
    '例)D2を選択している場合は(2,2)
    targetFile1 = Cells(targetRow, 2)
    '対象ファイル2のパスを取得
    '例)D2を選択している場合は(2,3)
    targetFile2 = Cells(targetRow, 3)
    'WinMergeの実行ファイルを指定
    '/eを指定することでescキーで閉じられるようにしている
    winExeFile = "C:\PROGRA~1\WinMerge\WinMergeU.exe /e "
    '文字列を結合して実行時のコマンドを作成
    '例)C:\PROGRA~1\WinMerge\WinMergeU.exe C:\vbaSample\before\test1.txt C:\vbaSample\after\test1.txt
    exeStr = winExeFile & " " & targetFile1 & " " & targetFile2
    
    'WinMerge起動
    rc = Shell(exeStr, vbNormalFocus)
    
    'エラー処理
    If rc = 0 Then MsgBox "起動に失敗しました"

End Sub
```

## その他
ショートカットキーを設定することで、D列の選択行の対象ファイル1と対象ファイル2の比較がよりやりやすいです。

また、WinMergeの実行ファイルの指定について、コマンド上で半角スペースを含んだ「Program Files」では正しく認識されないため「PROGRA~1」としています。

```:正しく認識されない例
C:\>C:\Program Files\WinMerge\WinMergeU.exe C:\vbaSample\before\test1.txt C:\vbaSample\after\test1.txt
'C:\Program' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

#### 参考
・https://so-zou.jp/software/tech/tool/diff/winmerge/commandline/
・https://www.itmedia.co.jp/help/tips/windows/w0140.html
第二回Try English LT! for engineers 発表資料まとめ

# Try English LT! for engineersとは？

エンジニア向けの英語のみのLTイベントを行っています！
LTのテーマはエンジニア向けの内容であれば自由です。
英語でLTをやるとなると、中々ハードルが高く、
参加者が海外の人ばかりだと、なおさら難しく感じると思います。
ちょっと自信はないけど、
英語のLTにチャレンジしてみたいという人にぜひ発表してもらいたいです。
英語が好きなエンジニア同士で交流できるイベント運営ができればと思っています。

第二回イベントページ
https://try-english-lt.connpass.com/event/141242/

## 発表資料
・Toshi さん
LaaI - LT as an Icebreaking
https://drive.google.com/file/d/1swQ-T3W6LfoyycFAZMS5N47UkjUpCGz4/view

・Nobu
綺麗で読みやすいコードの書き方
how to write clean code
https://docs.google.com/presentation/d/1RRscs5WfCeDKrwhqgSk7dmnpy1j7lW3YeIUT6esDLwo/edit?usp=sharing

・Manami さん
Bridge SEとしての仕事ってどんな感じ？
What’s it Like My Job as a Bridge SE?
https://speakerdeck.com/penguin_note/whats-it-like-my-job-as-a-bridge-se

・n_watanabe さん
日本人のためのアリババクラウド
Alibaba Cloud for Japanese
https://www.slideshare.net/NobuhideWatanabe1/alibaba-cloud-for-japanese-169288211/NobuhideWatanabe1/alibaba-cloud-for-japanese-169288211

・もーすけ さん
Encouragin you to write technology blogs
https://www.slideshare.net/mosuke5/encouragin-you-to-write-technology-blogs

・alamin365 さん
コンテナ戦争：Kubernetes対Docker Swarm対Amazon ECS
Container Wars: Kubernetes vs. Docker Swarm vs. Amazon ECS
https://docs.google.com/presentation/d/1KLw8x3Ba6eydqhy_A6Z5gBLWR8F8en-6FVKcS-yb090/edit#slide=id.p

・EmiYaegashi さん
Sierと事業会社で習得できる英語スキルの違い
The differences of English skills which can be acquired between Sier and Service Company
https://speakerdeck.com/eyaegashi/the-differences-of-english-skills-which-can-be-acquired-between-sier-and-service-company
Selenium IDEで作ったテストをselenium-side-runnerを使ってheadlessで動かしてTravisCIでビルドする

# 背景
[10分でわかるブラウザ処理自動化！初心者向けSelenium IDE入門ガイド (2019/08版 : Selenium IDE v3.12.0)](https://qiita.com/oh_rusty_nail/items/5b584c95e01759c00869)で初心者向けの入門ガイドを書きました。
更に次のステップに進むと、これだけではやりたいことはあってもそれをどのコマンドを使って実現できるのかわからないと思い、[Selenium IDE コマンドリファレンス (2019/09版 : Selenium IDE v3.12.0 [全96コマンドを徹底解説])](https://qiita.com/oh_rusty_nail/items/77782973b4152992017b)を書きました。

導入からテスト作成まで自動化するハードルが全然高くないというのはご理解いただけたのではないでしょうか。

ただこれが出来るようになると先が見えるようになり、「これを毎日定期的に実行したい！実際に開発のビルドの度に実行したい！」などという次のステップに向かうと思います。
本記事では、それを実現するためのコマンドライン実行 → TravisCI実行 → headless実行をする手順を書いていきます。

# 1. コマンドライン実行
コマンドラインで実行するためには、SeleniumIDEで作成したファイルをSaveして.sideファイルとして保存します。
また、コマンドラインで実行するためには、selenium-side-runner, chromedriver(chromeで動かす場合)が必要になります。
selenium-side-runner, chromedriverの入手方法については本記事でも紹介しますが、詳しくは[こちら](https://qiita.com/oh_rusty_nail/items/5b584c95e01759c00869#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%E5%AE%9F%E8%A1%8C)を参照してください。

## Mac OSX環境

```
$ brew install node
$ npm install -g selenium-side-runner
$ npm install -g chromedriver
$ selenium-side-runner -c "browserName=chrome" xxxx.side 
```

## Windows環境
https://nodejs.org/en/download/ からnodeをインストールしてください。

```
> npm install -g selenium-side-runner
> npm install -g chromedriver
> selenium-side-runner -c "browserName=chrome" xxxx.side 
```

# 2. CI(TravisCI)で実行

CIツールはいくつもありますが、本記事ではTravisCIでのビルド方法を紹介します。
TravisCIはリポジトリのルートに以下のような.travis.ymlを配置しておくだけで自動ビルドを行えます。
その際、https://travis-ci.org/[Githubアカウント名]/[リポジトリ名]/settings にアクセスしてビルドを有効にする必要があります。
.travis.ymlは、　**コマンドライン実行** と同様で必要最低限のことしか定義していません。
ブラウザが立ち上がるため xvfb を使用しています。

```:.travis.yml
language: node_js
services:
  - xvfb
addons:
  chrome: stable
node_js:
  - "11"
before_script:
  - npm install -g chromedriver
  - npm install -g selenium-side-runner
script:
  - selenium-side-runner -c "browserName=chrome" xxxx.side
```

# 3. selenium-side-runnerを使ってheadlessで動かす 

2019/09/09 現在、ググるとそれっぽいものは出てくるものの実際に試してみると「やっぱりブラウザが立ち上がるじゃん！」というものが多かったです。
おそらくオプションの指定が変わった？もしかしたらあるバージョンまではそれで動いていたなどかもしれません。

今回、Chrome バージョン76でヘッドレス起動できることを確認したためその方法を載せておきます。
ズバリ、実行コマンドを以下に変更するだけです。

`$ selenium-side-runner -c "goog:chromeOptions.args=[--headless,--nogpu] browserName=chrome" xxxx.side`

TravisCI(.travis.yml)でヘッドレス起動で動かす場合の設定は以下のようになります。
xvfbが不要になります。

```:.travis.yml
language: node_js
addons:
  chrome: stable
node_js:
  - "11"
before_script:
  - npm install -g chromedriver
  - npm install -g selenium-side-runner
script:
  - selenium-side-runner -c "goog:chromeOptions.args=[--headless,--nogpu] browserName=chrome" xxxx.side
```

# ただの宣伝
Seleniumに関する記事を書いたまとめです。書いたのは結構前ですがちょこちょこアップデートしています。

* [全国のSeleniumer必読](https://qiita.com/oh_rusty_nail/items/b8ba525d31ea7c522856)
UbuntuでEFSをマウントする

# 概要
　Amazon Linuxでは多かったですが、Ubuntuでの解説がなかなか見つからなかったので、書いてみました。

# EFS作成
　この辺は情報が多いので、割愛します。

# セキュリティグループの設定

## EFSのページにあるセキュリティグループを確認する。
![WS000002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/8e0d6941-99f0-db17-8fd9-10fb646d32bf.jpeg)


## EFSのマウントターゲットのSecurityGroupに対して、EC2インスタンスからのNFSを許可する。
　NFS、ポート番号2049を選択し、EFSに設定したセキュリティグループ名を入力します。
![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/969759d0-6f8a-d2b4-0974-27304cac9b88.jpeg)

# amazon-efs-utilsをインストール

## binutilsをインストール
```
$ sudo apt-get -y install binutils
```

## ソースコードを GitHub から取得
```
$ git clone https://github.com/aws/efs-utils
$ cd efs-utils
```

## RPM パッケージをビルド&インストール
```
$ ./build-deb.sh
# パッケージの確認
$ ls ./build/amazon-efs-utils*deb
```

## DEV パッケージをビルド
```
# DEV パッケージをインストール
$ sudo apt-get install -y ./build/amazon-efs-utils*deb
...
Setting up amazon-efs-utils (1.3) ...
Processing triggers for libc-bin (2.23-0ubuntu10) ...
Processing triggers for systemd (229-4ubuntu21.2) ...
Processing triggers for ureadahead (0.100.0-19) ...
$
```

# マウントを実施
## DNS名を確認します。
![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/160be1b1-acb1-4417-6c20-f98c003b187d.jpeg)



## ディレクトリを作成します。
```
sudo mkdir /mnt/efs
```

## マウントを実行します。
```
sudo mount -t efs <DNS名>:/ /mnt/efs
```
# 起動後に自動マウントを行う場合

## /etc/fstabを編集
```
sudo vi /etc/fstab
```

以下を追記します。

```
<DNS名>:/ /mnt/efs efs defaults,_netdev 0 
```

# 確認
```
df -h
```

以上です。

# 参考
　以下のサイトを参考にさせて頂きました。ありがとうございます。
https://dev.classmethod.jp/cloud/aws/install-amazon-efs-utils/
https://dev.classmethod.jp/etc/20181209-efs/
docker-composeでSpringBoot + MySQLを動かした際にSpringBootが起動しなかったのでメモ

# 原因
MySQLの起動完了前に、SpringBootが初期接続を試みて失敗していた

# 環境
* SpringBoot : 2.1.7.RELEASE
* MySQL : 8.0.17
* Docker : 19.03.2
* docker-compose : 1.24.1
* compose-file : 3.7

# 対応
`application.yml`にDB初期接続時のTimeOutの設定を追加

```application.yml
spring:
  datasource:
    hikari:
      initializationFailTimeout: 0
```
上記はコネクションプールライブラリにHikariCPを使用している場合の設定
`hikari`以降の`key`は使用しているライブラリによって異なる
※コネクションプールの設定は以下の記事を参考にさせて頂きました
[Spring Boot DBコネクションプール](https://qiita.com/unhurried/items/d879d1c36bf367798a00)

# initializationFailTimeoutを0に設定するとどうなるか
[HikariCPのREADME](https://github.com/brettwooldridge/HikariCP#infrequently-used)によると
>If the value is zero (0), HikariCP will attempt to obtain and validate a connection. If a connection is obtained, but fails validation, an exception will be thrown and the pool not started. However, if a connection cannot be obtained, the pool will start, but later efforts to obtain a connection may fail.

値に`0`を設定した場合、接続を試み、検証を行う。コネクションを獲得したが、検証に失敗した場合、例外を投げ、プールは開始しない。しかしながら、コネクションを獲得できない場合でもプールは開始される。ただし、後からコネクションを獲得しようとしても失敗する可能性がある。

とのこと。

# ちなみに

はじめは`docker-compose.yml`で`depends_on`を書いておけば、mysqlが利用可能になってからアプリケーションがスタートするものと思っていたが、[Docker-docs](http://docs.docker.jp/compose/startup-order.html)によるとそうではなく、データベースが起動していない場合の対処はアプリ側で再接続処理を入れるなどして責任を持つべきとのこと
イントラネットのhttpサーバからファイルサーバーへリンクを開けるようにした話(Windows限定)

イントラネットに、Growiというwikiを設置した(された)んですが、そこのページからファイルサーバーへのリンクを張ろうとすると…できません。

イントラネットなんだし、多少セキュリティがガバっても利便性を取ろうってことで、なんとかやろうとしたことに辿り着くまでの話です。

**真似をしても、当方は一切責任を負いません。自己責任で実施してください。**

## ブラウザの制約

現代のブラウザだと`file:`プロトコルでリンクを貼っても、クリックしても開けません。
Firefoxだと、`about:config`で[設定を変える必要があるようです。](https://qiita.com/lulucowcow/items/c29ca8255a149364e728)
Chromeだと、[起動オプションを設定する必要があるようです。](https://qiita.com/kannkyo/items/8ba6cfc9a4ce1e04ff66)
Edgeは知りませんが、多分同様なんでしょう。

なるべくブラウザを問わない解決方法となると、独自プロトコルを使います。
クリックするとiTunesが開く`itmss://music.apple.com/...`とか、Githubで`x-github-client://openRepo/https://github.com/...`ってなっているやつですね。
(蛇足ですが、`calculator:`というリンクにすると、電卓が立ち上がります。)

今回やろうとしている事は、fileプロトコルをブラウザ自体で開くのではなく、エクスプローラーなり関連付けられているアプリケーションで開ければ良いので好都合です。

Firefoxの様にホワイトリストでリンク元を制限できればいいのですが、独自プロトコルはリンク元がイントラネットかどうか問いません。
悪用されかねないため、独自プロトコルの名前は外部に漏れないようにし、可能な限り推測できないもの(GUIDとか)を使用したほうが良いでしょう。
(面倒だと適当なプレフィックスにしちゃいます。)

## プロトコルハンドラーを追加する。

独自プロトコルをアプリケーションで開くには、レジストリにプロトコルハンドラーを設定します。

プロトコルハンドラーの実装はvbscriptとかでもいいのですが、今回はc++で実装しました。

ネイティブアプリなのでwindows defenderなどのセキュリティーソフトからは警告が出まくります。
(オレオレ)コード証明書でサインする運用が良いでしょう。
登録と解除の機能も兼ね備えています。

https://github.com/udaken/CustomFileProtocolHandler

コードは[Registering an Application to a URI Scheme](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/aa767914(v=vs.85))あたりを参考にしました。

`ShellExecuteEx`でファイルを開くので、ローカルファイルを実行できない様に`PathIsNetworkPath`でパスに制約を掛けてます。(気休めだけど。)

### ビルド

ニッチなアプリケーションなので、バイナリでの配布はしていません。
CustomFileProtocolHandlerはVisual Studio 2017以降(Express)でビルドできます。
Windows SDK バージョンは環境に合わせて適宜変更してください。

## Wikiのリンクを独自プロトコルに変換する
growiのmarkdownでは、`file:`プロトコルへはリンクが張れない様に制限がかかっています。
`[doc.txt](file://Contoso/share/doc.txt)`
と書くと、リンクにならずそのまま表示されます。

カスタムプロトコルハンドラーで開かれるように、
`[doc.txt](A6C4D2B1-62BA-4C53-9018-B186E2E6A5EC://Contoso/share/doc.txt)`
もしくは
`[doc.txt](A6C4D2B1-62BA-4C53-9018-B186E2E6A5EC:\\\Contoso\share\doc.txt)`
と書くようにします。

わざわざカスタムプロトコルを書くのが面倒な場合は、tampermonkeyやgreasemonkey等のuserscriptで、`\\\Contoso\share\doc.txt`を独自プロトコルを用いたリンクに置き換えます。
userscriptの代わりにGrowiのカスタムスクリプト機能でもできそうですが、管理者権限が無いため私は未確認です。
docker-composeで「docker-compose up」ができないとき

docker-composeで`docker-compose up`を実行すると、以下のように

```
(略)

web_1        | 
web_1        | - Gracefully stopping, waiting for requests to finish
web_1        | === puma shutdown: 2019-09-09 13:48:21 +0000 ===
web_1        | - Goodbye!
web_1        | Exiting
app_web_1 exited with code 1
```

といったエラーが出てしまうときがあります。

## 解決方法
docker-composeでは、gemを新規で導入するときには、まず以下のコマンドを実行すれば良いだけでした。

```
$ docker-compose build
```
それから、`docker-compose up`を実行すれば、通常通りコンテナが生成されるようになります。
Wi-Fi通信速度測定

## 【序文】
久しぶりに 3B を動かしてみたら、Wi-Fi の遅さに閉口（3B+ に比べて）。
こんなもんだっけ？
Wi-Fi の通信速度を測定してみた。

## 【環境】

| Pi | 説明 |
| ---- | ---- |
| Pi2B | 測定用サーバ |
| Pi3B | 測定対象 |
| Pi3B+ | 比較用に測定 |
| PiZero WH | ついで |


## 【ベンチマークツールインストール】
無印はもう古くてメンテナンスもされていないそうだしで `iperf3` を以下コマンドでインストール。（サーバ、クライアント両方）

```
sudo apt-get -y install iperf3
```

## 【サーバ側準備】
と言っても以下コマンドを実行するだけ。

```
iperf3 -s
```

## 【測定】
クライアント側で以下コマンド実行。`192.168.11.101` はサーバの IPアドレス。

```
iperf3 -c 192.168.11.101
```

実行結果は以下。

```
pi@raspberrypiz:~ $ iperf3 -c 192.168.11.101
Connecting to host 192.168.11.101, port 5201
[  5] local 192.168.11.112 port 34818 connected to 192.168.11.101 port 5201
[ ID] Interval           Transfer     Bitrate         Retr  Cwnd
[  5]   0.00-1.00   sec  3.00 MBytes  25.2 Mbits/sec    0    120 KBytes
[  5]   1.00-2.00   sec  3.48 MBytes  29.2 Mbits/sec    0    148 KBytes
[  5]   2.00-3.00   sec  3.17 MBytes  26.6 Mbits/sec    0    157 KBytes
[  5]   3.00-4.00   sec  2.98 MBytes  25.0 Mbits/sec    0    157 KBytes
[  5]   4.00-5.00   sec  3.23 MBytes  27.1 Mbits/sec    0    157 KBytes
[  5]   5.00-6.00   sec  2.86 MBytes  24.0 Mbits/sec    0    165 KBytes
[  5]   6.00-7.00   sec  3.23 MBytes  27.1 Mbits/sec    0    165 KBytes
[  5]   7.00-8.00   sec  3.23 MBytes  27.1 Mbits/sec    0    165 KBytes
[  5]   8.00-9.00   sec  3.17 MBytes  26.6 Mbits/sec    0    165 KBytes
[  5]   9.00-10.00  sec  3.36 MBytes  28.1 Mbits/sec    0    165 KBytes
- - - - - - - - - - - - - - - - - - - - - - - - -
[ ID] Interval           Transfer     Bitrate         Retr
[  5]   0.00-10.00  sec  31.7 MBytes  26.6 Mbits/sec    0             sender
[  5]   0.00-10.00  sec  31.3 MBytes  26.3 Mbits/sec                  receiver

iperf Done.
```

上記は PiZero WH での実行結果で、速度は 26.6 Mbits/sec ということになる。

## 【実行結果まとめ】
| Pi | 使用周波数帯域 | Mbits/sec |
| ---- | ---- | ---- |
| Pi3B | 2.4GHz | 26.4 |
| Pi3B+ | 5GHz | 92.4 |
| PiZero WH | 2.4GHz | 26.6 |

## 【所感】
3B+ は 3B に比べ、ネットワークも約3倍速くなったというのが売りで、その通りの結果となった。
これは Wi-Fi が 5GHz に対応したことによる。
上記表には記載していないが、 3B+ でも、2.4GHz で接続した場合は、Pi3B、PiZero WH と同程度のスピードだった。
逆に考えれば、3B でも 5GHz 対応 Wi-Fi USBドングルを接続すれば速くなるだろうし、デュアルバンドに対応してるものなら更に速くなる可能性はある。

しかし、Wi-Fi USBドングルを購入するとなると、Pi3本体とまでいかなくても、PiZero WH本体程度の値段はするしで考えてしまう。（最初から家に転がっていました、とかならいいけど）
そう考えると、Wi-Fiオンボードが当たり前になっている今日日の SBC ってパフォーマンスがいいよなぁと改めて感心。
9/9 Tech Expert (事前学習) day 10　/　変数スコープ

【学習アウトプット】

今日の目標(やること)
Ruby!

#今日のまとめ
##変数のスコープ
変数には、その変数が使える範囲がきまっている。
（例：メソッド内ではそのメソッド内で定義した変数）
スコープの範囲外の変数を使おうとすると、エラーが起こる。

【例】スコープの範囲内のため、正常に動作する

```rb 
capital = "東京"        # 首都は「東京」
puts capital
``` 

【例】スコープの範囲が違うため、エラーになる

```rb
capital = "東京"        # 首都は「東京」
 def america
 puts capital
end

america                 # エラー
```

【例】同じ名前の変数でもスコープが違えば別の変数となる

```rb
capital = "東京"         # 首都は「東京」

def america
  capital = "ワシントン"   # americaの首都は「ワシントン」
  puts capital
end

america                 # => ワシントン
```


  
##引数（ひきすう）
引数はメソッドの外からメソッドに渡す値
「メソッドを呼び出す部分（本引数）」と「メソッドを定義している部分(仮引数)」両方に書く

```rb
def メソッド名(仮引数)
   実行する処理
end
```

【例】引数を用いたメソッドの実行

```rb
def multi(input)
  　puts input * input
end

puts "何か数字を入力してください"
input = gets.to_i

multi(input)
```

(メソッドmultiは、引数として渡した数を2乗した数字を出力してくれるメソッド)
()のinput
この記述により、メソッドmultiが実行される際にinputを引数として利用することが出来る。

・メソッドの中では仮引数の名前で扱うため、本引数と仮引数の名前が同じである必要はない。
・仮引数の名前は何でも良いが、誰が読んでもそれが何を指すかわかるようなネーミングを。（aやｂではなく、numberやnameを使おう。）（引数が渡されたメソッドの性質によって名前を変えた方がわかりやすい場合がある。）

先ほどのメソッドの仮引数を以下のようにしても問題ない。
(仮引数の変数名をnumberに変更)

【例】仮引数の名前を変更

```rb
def multi(number)
  puts number * number
end

puts "何か数字を入力してください"
input = gets.to_i

multi(input)
```


##〜独り言(まとめやら感想やら)〜
特になし。。。
Chat Botを作ってみる

#Watson Assistantのサービス作成

カタログ → AI → 「Watson Assistant」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/b159deea-672e-790f-f33a-1fb6b96c10b9.png)
サービス名：任意
その他はデフォルトのまま
→ 「作成」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/d0acd81d-e0c2-af61-9eb5-e44f8f43cdb8.png)
「Watson Assistantの起動」をクリック

#スキルの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/c1477c47-92e6-dd8f-1c29-c62f8b96bb63.png)
「Skills」を選択


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/8d002b55-d738-dc3f-5d8d-3ce154340f87.png)
「Create skill」を選択


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/9998bc32-3195-a61f-48d1-3ac9494a05d1.png)
「Dialog skill」 -> 「Next」


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/a0de4e88-0692-cc4f-6b93-8c5070f00e37.png)
Name:任意
Description:任意
Language:選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/903b8004-f424-821b-4999-714243499b35.png)


#Entityの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/237a8550-a03b-5e00-8556-35dc36a46311.png)
「Entities」 -> 「Create entity」


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/cf44539a-40cf-7af2-dc69-7c2dca9c53f7.png)
Entity name：@＋（任意）


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/b67b3044-12dc-d7a6-1f2b-a7314b045ab7.png)
・「Add value」で各あいさつを入力し、同じ意味の言葉をいくつか追加する。
・これを適宜繰り返す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/cb063cb0-aa24-1596-22b1-9226f2a130ec.png)


# Dialog（チャットボットが話す言葉）の作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/59734649-8a7f-116b-29dc-7cb2fe71b2c1.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/0d1ab76d-5dc2-6d3b-438f-b14037828486.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/8dd5f1e1-221d-708a-5af0-79774d8e427c.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/72445224-2d56-a9f3-254b-fb946570607a.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/578cc988-c920-7265-3a13-7b9b7282fb13.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/721d84de-9a31-c6ad-b340-fa6c6cd20e67.png)

#結果の確認
右上の「Try it」をクリックすると、実行結果を試せる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492530/1bc5938b-a84f-285c-d06f-7f4b19a0e7a0.png)
材料からの料理のランダム抽出を行うPGM

材料から料理のランダム抽出を行うPGMです

githubURL: https://github.com/NanjoMiyako/RyoriGatya

サンプルページURL: https://nanjomiyako.github.io/RyoriGatya/

GASPGM: https://github.com/NanjoMiyako/SampleGasScripts1/blob/main/ryori1.txt


参考ページ
<a href="https://hrroct.hatenablog.com/entry/2019/02/28/000000">GAS (Google Apps Script) でファイル出力を行う - HRR Co., Ltd.</a>

<a href="http://monopocket.jp/blog/html/1091/">リンクを新規タブで開かせる方法（HTML） | monopocket blog</a>

使い方
まずデータインポートタブから材料・料理のJSONデータをインポートしてから
検索を行います。JSONデータはGASのシートからoutput()のマクロを実行して作成します。

JSONデータ作成シートURL: https://docs.google.com/spreadsheets/d/1Krh4gF3TeNxEdxNG9VfN0KZ8DoqGpd5LC20AJFGxG9Q/edit?usp=sharing

スクリーンショット
![screenshot.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412430/8849818e-df26-df6d-f5e0-3b8f5b3b275a.jpeg)
PythonでHTML解析(スクレイピング)

サイトリニューアルのとき、よくあるデータ移行があります。
手動作業はできますが、コストかかりますので、
バッチでHTML取得⇒解析⇒新システムに投入　というような機能が役に立つ場合があります。

Javaでは、jsoupというライブラリは有名です。
Pythonでは、beautifulsoup4 というライブラリは有名です。

jsoup: https://jsoup.org/
beautifulsoup4: https://pypi.org/project/beautifulsoup4/

#VSCodeのターミナルからインストール
`pip install beautifulsoup4`

#HTMLのfragmentの解析
##解析サンプル
```python
from bs4 import BeautifulSoup

html = "<body><h1>PythonでHTML解析</h1><p>HTML解析の説明</p></body>"
soup = BeautifulSoup(html, "html5lib")
print(soup.h1)
```
##結果
`<h1>PythonでHTML解析</h1>`

一点注意したいのは、ライブラリにあるファイルを自分のプロジェクトフォルダーに作成するとエラーになる可能性があります。
例えば、「bs4.py」というファイルを作成して実行しようとするとエラーです。 

#URLから解析
```python
from urllib.request import urlopen
from bs4 import BeautifulSoup

html = urlopen("https://news.yahoo.co.jp/").read()

soup = BeautifulSoup(html, 'html.parser')

# print(soup.prettify())
# css-selectorを書く
elements = soup.select(".topicsList li.topicsListItem a")
for element in elements:
    print("title: " + element.text + ", href: " + element.get("href"))

```

##解析結果
```text
title: 日産・西川社長 16日付で辞任, href: https://news.yahoo.co.jp/pickup/6336028
title: 日産社長退任 裏に激しい攻防, href: https://news.yahoo.co.jp/pickup/6336027
title: 停電続く千葉「耐えるしか」, href: https://news.yahoo.co.jp/pickup/6336024
title: 上皇后さま 術後の経過順調, href: https://news.yahoo.co.jp/pickup/6336026
title: ヤマト 住所なしで発送可能に, href: https://news.yahoo.co.jp/pickup/6336019
title: 経費削減 減りゆくテレビCM, href: https://news.yahoo.co.jp/pickup/6335992
title: 騒然 ロッテ井口監督が即退場, href: https://news.yahoo.co.jp/pickup/6336025
title: 3選手がメッシとの会話拒否か, href: https://news.yahoo.co.jp/pickup/6336029
```

詳しい情報のURL：https://www.crummy.com/software/BeautifulSoup/bs4/doc/

以上
Raspberry PiとKV-7500で上位リンク通信

# 概要
Raspberry PiからKV-7500(keyence製PLC)にEtherNet/IPを利用してアクセスしてみました。
KV-7500の上位リンク通信機能を利用し、TCPサーバーとして機能します。
Raspberry PiはTCPクライアントとしてKV-7500と通信します。

# KV-7500の設定
ユニットエディタを開いて下記のように設定します。
### 機能
・ソケット通信：使用する
### 基本
・先頭DM番号：DM10000
・先頭リレー：R10000
・IPアドレス：固定IPアドレス(＊)
・IPアドレス：192.168.0.10(デフォルトでOK)
・サブネットマスク：255.255.255.0(デフォルトでOK)
### ポート番号
・ポート番号(上位リンク)：8501(デフォルトでOK)

あとの設定は特に変更する必要はなさそうです。

# Raspberry Piの設定・プログラム

TCP/IPでKV-7500に接続して、コマンドを送信します。
KV-7500からの返答がきたら、結果を表示します。

```Python:tcp-client.py
import socket

host_ip = '192.168.0.10'    # kv-7500のIPアドレス
host_port = 8501            # 上位リンク通信のポート番号

client = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
# socket.AF_INETでip4を使うことを指定。socket.SOCK_STREAMでTCPを使うことを指定。
client.connect((host_ip,host_port))
# サーバーに接続(kv-7500にTCP接続/上位リンク通信)

comand = "?K"               # 上位リンク通信のコマンド（これは機種の問い合わせコマンド）
separator = "\r"            # 区切り符号CRの16進数表記
msg = comand + separator

client.send(msg.encode("ascii"))    # 上位リンク通信のデータコードがASCIIなのでエンコード
print("send : " + msg)

response = client.recv(1024)
response = response.decode("UTF-8") # PLCからの返答がbyteデータなのでUTF-8にデコード

client.close()

print("Received :" ,response)
```

「Received:55」と表示され、これは、KV-7500を意味します。

# 終わりに
上位リンク通信を利用してRaspberry PiからKV-7500にコマンドを送り、機種を確認することができました。
KV-7500には機種問い合わせのほかにも、データ読み出しやデータ書き込みなどのコマンドが用意されているので、随時試していきます。
React.memoしたコンポーネントのdisplayNameを取得する

Reactのデバッグ用に、コンポーネントの名前を出力していたのですが、その過程で`React.memo`したコンポーネントは特殊な扱いが必要でした。

## `displayName`とは

以前に[べからず集](https://qiita.com/jkr_2255/items/041f238a940f923e4dfc#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E6%99%82%E3%81%ABdisplayname%E3%82%92%E3%82%BB%E3%83%83%E3%83%88%E3%81%97%E3%81%AA%E3%81%84)でも触れましたが、コンポーネントに`displayName`がセットしてあると、それがデバッグ時にコンポーネント名として表示されます。

そして、[React公式サイトにあるコード片](https://ja.reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging)にも`WrappedComponent.displayName || WrappedComponent.name`のようなコードがあるように、関数宣言やクラスなどで`name`が設定されていれば、それで代用できます。

### `React.memo`を使った場合

ところが、`React.memo`を使った場合、`displayName`はセットされません（もちろん関数生成ではないので、自動的に`name`が付くこともありません）。なので、`displayName || name`のコードでは何も取れません。

ただ、Reactのデバッグツールでは`Memo(WrappedComponent)`のような名前がしっかりと出ています。このような名前を取得できないか調べてみました。

## `react-is`とは

そして、調べてみると、`React.memo`で生成したコンポーネントには`type`というプロパティがあって、ここにもとのコンポーネントが来ることが判明しました。あとはメモ化コンポーネントを識別できれば、要件は片付きます。

もちろん内部データにアクセスして調べられなくもないのかもしれませんが、それをやっていると将来的に内部構造が変化したときに死にます。そこでReactチームが**公式に**用意している手法として、`react-is`というライブラリがあります（[GitHub](https://github.com/facebook/react/tree/master/packages/react-is)）。

以下のようなメソッド・定数が用意されています。

* `ReactIs.isValidElementType(arg)`…`arg`がReactコンポーネントにできるもの（タグ名の文字列・関数コンポーネント・クラスコンポーネントなど）かを判定する
* `ReactIs.typeOf(arg)`…`arg`の種類を、以下の定数のどれかで返す
 * `ReactIs.ConcurrentMode`
 * `ReactIs.ContextConsumer`
 * `ReactIs.ContextProvider`
 * `ReactIs.Element`
 * `ReactIs.ForwardRef`
 * `ReactIs.Fragment`
 * `ReactIs.Memo`
 * `ReactIs.Lazy`
 * `ReactIs.Portal`
 * `ReactIs.Profiler`
 * `ReactIs.StrictMode`
 * `ReactIs.Suspense`
* `ReactIs.is***`（上の定数に対応したメソッドがあります）…それぞれの種類かを判定する

なお、どういうわけか`import ReactIs from 'react-is'`の形では読み込めず、`import {isMemo} from 'react-is'`と単品で呼ぶか、全部読み込む場合は`import * as ReactIs from 'react-is'`とする必要があります。

## 実際に書いてみた

素材が揃ったので、あとはコードに起こすだけです。

```javascript
import {isMemo} from 'react-is';

function getDisplayName(component) {
  const {name, displayName} = component;
  // displayNameがついていればそれを採用
  if(displayName) return displayName;
  // メモ化コンポーネントの場合
  if(isMemo(component)) return `Memo(${getDisplayName(component.type)})`;
  // あとはnameなどをチェック
  return name || null;
}
```
Visual Studio Codeでファイル保存時に自動TSLint fix

業務でプルリクエスト前にTSLintのコマンドを実行するのを忘れており、CIが落ちてしまったのですが、そもそもファイル保存時に自動で実行すれば、漏れなくLintエラーを修正することができます。
Visual Studio Codeでは、拡張機能を使用することで可能となります。

### 前提
tslint.jsonをプロジェクト配下に作成済みである

### 拡張機能インストール
左メニューの拡張機能アイコンから検索画面を表示し、以下Microsoft公式の拡張機能をインストールしましょう。
 [TSLint拡張機能](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)
<img width="1437" alt="スクリーンショット 2019-09-09 21.43.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194498/5cefbff3-1de8-3efc-9e44-d6f682d8f0b6.png">
※他にdeprecatedとなっているTSLintがあるので、そちらをインストールしないよう注意しましょう。

### 設定
ファイル保存時に自動修正するには以下のようにsettings.jsonに設定を追加します。
ファイル保存時の挙動として、tslintのfixコマンドを設定します。

```json
"editor.codeActionsOnSave": {
    "source.fixAll.tslint": true
}
```

ぜひ、設定してLintエラーの無い快適な日々をお過ごしください。