OmniAICreator/Qiita-1.07M huggingface dataset:
【Flutter】FlutterでHello World

開発環境
⭐️Flutter
（flutter_macos_v1.9.1+hotfix.5-stable）

⭐️Android Studio 3.5.1
⭐️Xcode１１.２ beata

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">✨✨Flutter(フラッター)✨✨<br>Flutterの環境構築と「Hello World」を表示してみたよぉ😍<br><br>Flutter(フラッター)は Dart というGoogle が開発している言語🧸🧸<br>同じコードで 🐸Androidと🍎iOS 両方の📲アプリを作る事ができるフレームワーク😊<a href="https://t.co/s7hYorzwhn">https://t.co/s7hYorzwhn</a><a href="https://twitter.com/hashtag/Flutter?src=hash&amp;ref_src=twsrc%5Etfw">#Flutter</a> <a href="https://t.co/Lxww6AtXd9">pic.twitter.com/Lxww6AtXd9</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1186695340512038919?ref_src=twsrc%5Etfw">October 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

まず、Flutterのプロジェクトを作成します。
詳細については、下記に記載してます。

【Flutter】Flutterの環境構築
https://qiita.com/nonkapibara/items/b7d09bf48cb0b71035a8

エラーが発生した場合は、下記を参考にしてください
【Flutter】Android StudioでXcodeでエラーが発生した時の対応方法
https://qiita.com/nonkapibara/items/38d1a952c366fa339b18


「main.dart」を下記のように書き直す
<img width="332" alt="スクリーンショット 2019-10-23 1.47.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/cf1202a3-e33e-9d9b-11cc-14ff5969541a.png">

<img width="1005" alt="スクリーンショット 2019-10-23 1.49.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6f19f706-9f72-3bd9-f830-74e5da774b07.png">

```
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'non Flutter Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('のんちゃん Flutter Demo'),
      ),
      body: new Center(
        child: new Text('Hello World'),
      ),
      ),
    );
  }
}

```

Androidエミュレーターで起動
<img width="440" alt="スクリーンショット 2019-10-22 23.01.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/73a6f30d-7ad2-d207-3db7-7c7cce806e19.png">

起動成功！

IOSシミュレーター起動
<img width="422" alt="スクリーンショット 2019-10-23 0.13.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/1c98439e-bbe0-df86-dfd8-1a8ccfa6fb19.png">

起動成功！
PyInstaller+multiprocessingをWindows上で動かす時のメモ

# まえがき（ちゅうい）
当方並列、非同期に詳しくないです
マサカリはコメントにて随時お待ちしています
ドキュメントに書いてあるようなレベルの低レベルなお話です

# TL;DR
PyInstallerにmultiprocessingを使うときは
**必ずmultiprocessing.freeze_support()を最初に呼ぶようにする**

# 無駄な本文
## multiprocessing
Pythonで並列しようと思ったら標準にthreading, multiprocessing, asyncioがあります
全部挙動に違いがあるらしいのでその辺は調べてください
今回はmultiprocessingについてです

```Python:hoge.py
import multiprocessing as mp
import time

def f(x):
    time.sleep(1)
    return x

def main():
    with mp.Pool(processes=3) as p:
        r = p.imap(f, [1, 2, 3])
        result = list(r)
        print(result)

if __name__ == '__main__':
    main()
```

例えば上のようなコードを書いてやると

```
$python hoge.py
[1, 2, 3]
```

みたいな出力が約1秒後に出ます
1秒待たされる関数fを3つプロセス生成して3つ同時に動くようにしたわけです

```python:osoi.py
def main():
    result = []
    for i in [1, 2, 3]:
        result.append(f(i))
    print(result)
```

みたいな下手を打つと3秒かかっちゃうので3倍速です
嬉しいですね

## PyInstaller

PyInstallerはpyファイルから実行ファイルを吐いてくれます
ただし動かしてるOS用のものが吐かれるのでそこは注意
linux上ではlinux用の実行ファイルが、Windows上ではexeが吐かれます

実行もお手軽で、

```
$pyinstaller hoge.py
```

みたいにしてやるといい具合にやってくれます
ひとまとめにしてやりたいときは`--onefile`オプションつけるだけ
簡単ですね

## 本題

では上の`hoge.py`を実際にPyInstallerにかけて、吐かれた実行ファイルを実行したりするとどうなるかというと、

- Linux: 実行できる
- Windows: 実行できない（挙動は様々ですが大量のタスクが生成されてCPUに異常な負荷がかかったりします）

というわけでWindowsユーザーが悲しみを背負います

## multiprocessing.freeze_support()

そこでこいつを使います
どうやらWindowsでは上手くいかないのに対応するためだけに存在するようなものらしく、書かれていてもLinux上では影響はありません
というわけで

```Python:hoge.py
import multiprocessing as mp
import time

def f(x):
    time.sleep(1)
    return x

def main():
    with mp.Pool(processes=3) as p:
        r = p.imap(f, [1, 2, 3])
        result = list(r)
        print(result)

if __name__ == '__main__':
    mp.freeze_support() #add this line
    main()
```

この1行足すだけでexeも普通に動きます

# けつろん

- PyInstallerなどで実行ファイルを作りたい時
- Windows上での実行ファイルの利用がある時

は`multiprocessing.freeze_support()`をとりあえず最初に書いておきましょう

# 参考
https://docs.python.org/ja/3/library/multiprocessing.html
公式ドキュメントは正義
MSXML

c++でXMLを読み書きするためのメモ。

■XMLのパース
https://www.hiramine.com/programming/windows/msxmlload.html

■MSXML6.0のリファレンス
https://w.atwiki.jp/hakoniwa_project/pages/16.html

■https://www.wikihouse.com/TakaraIzumo/index.php?msxml%A4%CB%A4%C4%A4%A4%A4%C6#content_1_3

■結局やりたいことに一番近いこと（でもMSXML6.0非対応？）
https://www.s34.co.jp/cpptechdoc/article/xml-persist/
http://funini.com/kei/vs/msxml.shtml

■c#　＋　外部ツール使えるなら。。。
https://qiita.com/Midoliy/items/58d56e202f104ebf867a



単純な出力すらできん。。。
よーわからん。。。

【期待値】
<?xml version="1.0" encoding="UTF-8"?>
\<AAA>
\<BBB>
\</BBB>
\</AAA>

【結果】
<?xml version="1.0" encoding="UTF-8"?>

【ソース】
IXMLDOMDocumentPtr pDoc("MSXML2.DOMDocument.6.0");
IXMLDOMProcessingInstructionPtr pPi;
pDoc->createProcessingInstruction(bstr_t("xml"), bstr_t("version='1.0' encoding='UTF-8'"), &pPi);
pDoc->appendChild(pPi, NULL);

IXMLDOMNodePtr pAAA;
VARIANT type;
type.uintVal = MSXML2::NODE_ELEMENT;
pDoc->createNode(type, bstr_t("AAA"), bstr_t(""), &pContent);
pDoc->appendChild(pContent, NULL);

IXMLDOMNodePtr pHeader;
pDoc->createNode(type, bstr_t("Header"), bstr_t(""), &pHeader);
pDoc->appendChild(pHeader, &pContent);
Ansibleでハマりがちなミスの自分用メモ

開発環境
Git Lab
Source Tree
Visulal Studio Code
Docker
Ansible


作業環境
1.Git LabのリポジトリをoriginにしてSource Treeにリモートリポジトリ設定
2.Source Treeでブランチを切ってローカルに保存
3.ローカルのリポジトリをVSCodeで読ませてコード編集
4.編集したらコミット、プル
5.サーバにログインしてDockerを立ち上げて同期・コンテナ起動
6.Ansibleでdry run（diffオプションで特定のノードグループとの比較を取る）

1,2は事前設定なので実作業としては3～6を繰り返すことになる。

ハマった箇所と原因と対策
・一括変換によるコーディングミス
The error appears to have been in '***/***/***/***.yml': line *, column *, but may
be elsewhere in the file depending on the exact syntax problem.

The offending line appears to be:

********:
^ here

だいたいこういう感じでシンタックスエラーが出る。
エラー箇所そのものを表示してくれるわけではないのできちんと前後関係を読まなければいけない。
この場合、変数にエラーがあったということだが、実際は変数の次の行でダブルクォートの囲みミスがあった。
before	    - /usr/local/src/***.rpm"
after	- "/usr/local/src/***.rpm"
ダブルクォートの囲みミスは一括変換でやりがちなので気をつけたい。

・半角スペースの文字コードエラー
VSCode上で編集中は気づかないが、文字コードが混在していてサーバに同期したときに半角スペースが???と表示されていることがあった。
前任者から引き継いだ作業だったが前任者と会話をしたことはなかったので確認していなかった。
度々起きたエラー。

・ansible.cfgがない
ERROR! the role '***' was not found in ***

The error appears to have been in '****.yml': line *, column *, but may
be elsewhere in the file depending on the exact syntax problem.

The offending line appears to be:

  roles:
    - { role: ******               , tags: [ '*****' ] }
      ^ here

そんなロールはないと言われている。
roles_pathの場所が定義されていない。rolesの変数はあってもどこにrolesはあるのか？と問われている状態。
原因はansible.cfgを配置していなかったこと。
ここが一番ハマったが、他の環境からコピーして解決した。

・スペルミス
そんなロールはないその2。ありがち。
directoryならdirectolyなどと書いているようなもの。

・node_groupが存在しない
そんなロールはないその3。
特定のノードグループと比較しながらdry runを流していたが、
あるノードグループだけ、ymlファイルはあるのにそんなロールはないと言われてしまう。
ノードグループの数をチェックしていたら、そのノードグループはディレクトリごと存在していなかったというオチ。


他にもあったら追記するかもしれない。
Windows 版 Amazon Corretto インストール手順

[Windows 版 OpenJDK インストール手順 - Qiita](https://qiita.com/ryo-sato/items/87d05021fcc0519e8828) の二番煎じ。

## 調べ方

- [amazon corretto - Google Search](https://www.google.com/search?hl=en&q=amazon+corretto)
- [windows ライフサイクル site:microsoft.com - Google 検索](https://www.google.com/search?q=windows+%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB+site%3Amicrosoft.com)
- [エクスプローラー アドレスバー - Google 検索](https://www.google.com/search?q=%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%97%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC+%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%83%90%E3%83%BC&tbm=isch)

## 前提

- サポートされている Windows であること。

## 備考

- 新しいバージョンの Amazon Corretto をダウンロード, 展開した場合は, **JAVA_HOME** の変数値を変更するだけで OK.
   - Path は `%JAVA_HOME%\bin` のままとする。

## インストール手順

1. [Amazon Corretto Production-ready distribution of OpenJDK](https://aws.amazon.com/corretto/) にアクセスする。
   - 日本語版のサイトは情報が古い場合があるため, 画面上部より **English** を選択する。
1. 画面右の **Download Amazon Corretto 11** ボタンを押下する。
   - [Downloads for Amazon Corretto 11 - Amazon Corretto](https://docs.aws.amazon.com/corretto/latest/corretto-11-ug/downloads-list.html) に遷移する。
   - 先ほどと同様, 日本語版のサイトは情報が古い場合があるため, 画面上部より **English** を選択する。
1. *Windows x64* の *JDK* に記載された **zip** ファイルをクリックする。
   - 今回は **amazon-corretto-11.0.5.10.1-windows-x64.zip** をクリックしたものとする。
1. ダウンロードしたファイルを右クリックし, **すべて展開** をクリックする。
   - *圧縮 (ZIP 形式) フォルダーの展開* ウィンドウが開く。
1. *ファイルを下のフォルダーに展開する* 欄に, `C:\` と入力し, **展開** ボタンを押下する。
   - 上記は, OS やブラウザーによってはコロン (`:`) の次にバックスラッシュが表示される場合があるが, 日本語キーボードの場合は円記号で OK.
   - C ドライブ直下に, `jdk11.0.5_10` というフォルダーが展開される。
1. ダウンロードしたファイルを削除する。
1. 展開したフォルダーに移動し, アドレスバーよりパスをコピーする。
   - 今回のパスは `C:\jdk11.0.5_10` となる。
1. **スタート - 設定** を開く。
   - *Windows の設定* ウィンドウが表示される。
1. 検索窓に `環境変数` と入力する。
   - *環境変数を編集* と *システム環境変数の編集* が候補として表示される。
1. **環境変数を編集** をクリックする。
   - *環境変数* ウィンドウが表示される。
1. *ユーザー環境変数* の **新規** ボタンを押下する。
   - *新しいユーザー変数* ウィンドウが表示される。
1. 以下の通りに入力し, **OK** ボタンを押下する。
   - 変数名: **JAVA_HOME**
   - 変数値: (先ほどコピーしたパスを貼り付ける。)
      - 今回の場合は `C:\jdk11.0.5_10` を貼り付けることになる。
1. *環境変数* ウィンドウに戻るので, *ユーザー環境変数* の **Path** をクリックし, **編集** ボタンを押下する。
   - *環境変数名の編集* ウィンドウが表示される。
1. **新規** ボタンを押下し, `%JAVA_HOME%\bin` と入力, **OK** ボタンを押下する。
   - *環境変数* ウィンドウに戻る。
1. そのまま **OK** ボタンを押下する。
   - *Windows の設定* ウィンドウは閉じても OK.
1. コマンドプロンプトを開き, `java` や `javac` コマンドが利用できることを確認する。
   - `> java -version`

    ```shell
    openjdk version "11.0.5" 2019-10-15 LTS
    OpenJDK Runtime Environment Corretto-11.0.5.10.1 (build 11.0.5+10-LTS)
    OpenJDK 64-Bit Server VM Corretto-11.0.5.10.1 (build 11.0.5+10-LTS, mixed mode)
    ```

   - `> javac -version`

    ```shell
    javac 11.0.5
    ```

どっとはらい。
JavaScript　初歩知識

# 記事を載せるにあたり
JavaScriptを学習中で、講義を聞いて個人的にまとめた内容になります。不明な点や間違いがある場合がありますので、お気づきの方はコメントしていただけると幸いです。

## JavaScriptの構図と仕組み
- 先頭は小文字、続く単語一つ一つの頭を大文字にする。

## JavaScriptのプログラムが動くきっかけ
1. 組込まれた時

    ```js
    <script src="js/main.js"></script>
    ```

2. html文書が読み込まれた後(エレメント:ボタンなどのこと)
    - onload時

    ```js
    window.onload = function (){

	alert("ok");
    }
    ```

3. イベント発生時
    - クリック、キーダウン、フォーカス

    ```js
    function 名前(){
        <input type="button" onClick="名前()" />
    }
    ```
## 更に詳しく解説

### 組込まれた時
- 変数宣言の仕方

    ```js
    var 変数名[=値];
    ```
- 配列宣言(値を入れない場合)

    ```js
    var 配列名=new Array(個数);
    ```
- 配列宣言(値を入れる場合)

    ```js
    var 配列名=[値,値,・・・・];
    ```
- サンプルaという配列を10個

    ```js
    var a=new Array(10);
    var a=[0,0,0,0,0,0,0,0,0,0];
    ```
### onload時
- htmlの文書の中

    ```js
    <input type="text" id="id名" />
    ```
- TextBoxの値の取得

    ```js
    変数名=document.getElementById("id名").value;
    //valueはtextでもidでもok
    ```
- TextBoxに値を設定

    ```js
    document.getElementById("id名").value=値;
    //値は変数でもok。文字列の囲み方は縛りがない。
    ```
### エレメント

    ```js
    テキストボックス     id = "t1"
    テキストボックス     id = "t2"
    ボタン　　　　　    id = "btn"
    　　　　　　　onClick = "copy()"
    変数
    val
    ```

### 構文してみる
- 組込まれた時

    ```js
    var val;
    ```
- onload時

    ```js
    document.getElementById("t1").value = "";
    document.getElementById("t2").value = "";
    //F5で更新したときは、クリアはされない。
    ```
- 記述方法1

    ```js
    function copy(){
        val=document.getElementById("t1").value;
        //t1のテキストボックスの中身がvalに代入
        document.getElementById("t2").value = val;
        //t2に代入
    }
    ```
- 記述方法2

    ```js
    function copy(){
    document.getElementById("t2").value = document.getElementById("t1").value;
    }
    ```
___
aarch64アーキテクチャ向け開発環境（日本語入力編）

# はじめに

ASUS Chromebook Flip C101PAを愛用しています。CrostiniというLinux環境が使えるのでちょっとしたプログラミングなどはChromebookで済ませています。
ただこのChromebook、aarch64(ARM 64bit)環境なので何かとパッケージが整っていないのが現状です。
そこで、今後aarch64環境で困ったことがあれば随時シェアしていきたいと思います。今回はまず日本語化環境構築からです。

# aarch64アーキテクチャ向け日本語環境構築

ChromebookはLinux環境を標準で使えるのですが、日本語入力環境まではサポートされていません。そのため、ソースコードからビルドしなければいけません。結論としては、すごく分かりやすい以下２つの記事を参考にすれば良いのですが、ここにまとめて記載しておきたいと思います。

https://qiita.com/mitsuharu_e/items/3902a7f6e83ee10d72ba
https://matoken.org/blog/2017/06/05/on-debian-mozc-build-with-arm64/

## 1. 日本語フォントのインストール

```bash
$ curl -OL https://github.com/adobe-fonts/source-han-code-jp/archive/2.011R.tar.gz
$ tar zxf 2.011R.tar.gz
$ sudo cp ./source-han-code-jp-2.011R/OTF/* /usr/local/share/fonts
$ sudo fc-cache -fv
```

## 2. mozcをaarch64環境でビルド

```bash
$ sudo apt update
$ sudo apt upgrade
$ sudo apt install build-essential devscripts fakeroot
$ sudo apt build-dep mozc
$ apt source mozc
$ wget https://gist.githubusercontent.com/matoken/afce66ce67392c11d3ed20d7bbab5833/raw/2bb0163f30291caa6ba7b41b3d4352c7e6c0b6a7/patch
$ patch -p0 < patch
$ cd mozc-2.19.2623.102+dfsg
$ time dpkg-buildpackage -us -uc -j4
$ dch -i
$ head debian/changelog 
$ dpkg-buildpackage -j4
$ cd ..
$ ls -1 "*.deb" | xargs sudo dpkg -i 
　(できたdebファイルはとりあえずすべてインストール)
```

## 3. 環境変数設定

/etc/systemd/user/cros-garcon.service.d/cros-garcon-override.confに以下を追加

```bash
Environment="GTK_IM_MODULE=fcitx"
Environment="QT_IM_MODULE=fcitx"
Environment="XMODIFIERS=@im=fcitx"
```
~/.bashrcに以下を追加

```bash
fcitx > /dev/null 2>&1
/usr/bin/fcitx-autostart > null
```

fcitx-configtoolを実行して、Input MethodにMozcを追加

```bash
$ fcitx-configtool
```

「+」ボタンを押す

![mozc0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516812/c80438e3-9b12-3182-b209-2f5d5b43b46b.png)

「Only Show Current Language」のチェックをはずす

![mozc1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516812/ce67a637-7251-85c8-2d19-bb9b3e91afc0.png)

テキストエリアに「mozc」と打って検索。Mozcを選択したらOKボタンを押して追加します。

![mozc2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516812/46be7130-0553-6121-0770-d1ffb391aa08.png)

【補足】

全角と半角を切り替えるためのキー設定もやってみたのですが、私の環境ではキー登録しようとするとキー割当を聞かれてしまってうまく行きませんでした。（おそらくバグ。。）

キー登録しようとするも、、

![mozc3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516812/3975c77f-8b3d-7952-3fa7-581d77363ee2.png)

「キーコンビネーションを押せ」と言われる。

![Screenshot 2019-10-23 at 00.33.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516812/4d22ccd4-4480-df86-8895-8af413013a5e.png)

ひとまず、かなキーで切り替えられるので深入りは保留とします。
Chrome拡張機能作ってみた！DO IT！おじさん編

# Chrome拡張機能作ってみた
タイトルの通り今回はChrome拡張機能を作ってみたいなと思ったので作ってみました。

## 今回製作するもの
![9LmqjxG.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/35558903-ad78-4818-71a9-c42d00c28533.png)

DO IT！おじさんをWEBページ上の画像と差し替えて表示させます。

### 背景
[Webページの画像を全部俺の顔にするChrome拡張]
(http://inabajunmr.hatenablog.com/entry/2018/12/21/033400)
上記の記事を見つけ
Chrome拡張機能作るの初めてだし、どうせなら面白いものがいい！！
あとDO IT!おじさんが見守ってくれていたら作業効率が爆上がりするような気がしたからです。
### 完成画像
<img width="1415" alt="スクリーンショット 2019-10-19 17.40.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/098a865f-3172-fce2-0f37-59e2f3f88060.png">

## 実装
実装自体は簡単でした。
### フォルダ構成
```
app/ ─
     ├ images/
     │     ├ icons/
     │     │   ├ icon-16.png
     │     │   ├ icon-19.png
     │     │   ├ icon-38.png
     │     │   └ icon-128.png
     │     └ targetImage.png
     ├ scripts/
     │     └ script.js
     └  manifest.json
```
#### script.js

``` script.js
// サイト読み込みのあと画像を差し替え
window.onload = function () {
	images = document.querySelectorAll('img')
	images.forEach(function(element) {
		element.src = chrome.extension.getURL('images/targetImage.png')
		element.removeAttribute('srcset')
	})
}
```

### manifest.json
#### 参考記事
[Chrome 拡張機能のマニフェストファイルの書き方](https://qiita.com/mdstoy/items/9866544e37987337dc79)

``` manifest.json
{
  "name": "DOIT!",
  "short_name": "DOIT!",
  "description": "This app make all images into my can do it",
  "version": "1.0.0",
  "manifest_version": 2,
  "icons": {
    "16": "images/icons/icon-16.png",
    "128": "images/icons/icon-128.png"
  },
	"content_scripts": [{
		"matches": ["<all_urls>"],
		"js": ["scripts/script.js"]
	}],
  "browser_action": {
    "default_icon": {
      "19": "images/icons/icon-19.png",
      "38": "images/icons/icon-38.png"
    },
    "default_title": "This app make all images into can do it"
  },
  "web_accessible_resources": [
    "*.png"
  ]
}

```
[web_accessible_resources](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources)
`web_accessible_resources`
拡張機能で画像をウェブページで使用できるようにします。
この記述なしに`chrome.extension.getURL`で画像ファイルが表示されませんでした。
パッケージ内のリソースにはデフォルトでアクセスできないため

## 動作確認
### Chrome設定画面から拡張機能を選択
<img width="1440" alt="スクリーンショット 2019-10-23 21.39.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/68a09370-a502-f426-f3db-1c74c7c06778.png">
### 画面上部のデベロッパーモードにチェック
<img width="1439" alt="スクリーンショット 2019-10-23 21.47.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/cb16f6db-c076-b0e5-0ccd-87f04d17c293.png">
### パッケージ化されてない拡張機能を組み込むでmanifest.jsonが入っているフォルダ(app)を選択
<img width="1439" alt="スクリーンショット 2019-10-23 21.47.55のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/87447620-57a6-8bcc-78e7-02eca7e307e6.png">
これで作った拡張機能を確認できます

## 結果！
画像が差し変わるのがうざすぎて拡張機能をオフにした結果作業効率が上がりました！！
次はbackgroundで画像をしている奴にも対応していこうかなと思います。

## 作ったコード
https://github.com/takaHAL/doit
VRMとAR Quick Lookで遊ぼう

最近Twitterで知人がVRMモデルをusdzに変換して遊んでるのを見かけたので自分もやってみた。
会社で遊んでた際に、ふと「あれ？これ遊びたい人多いと思うけど手順が結構プログラマ向けだな？」と思ったのでわかりやすい記事を書いてみようと思ったので実行（ΦωΦ）

#準備するもの
**Mac**
**対応してるiPhone or iPad**
**VRMデータ**
**AppleID**
**usdz変換ツール**
**usdzをアップする場所**

###VRMの準備
VRoidHubで持ってきたらいいんでない？（ΦωΦ）
https://hub.vroid.com/

###usdz変換ツール
↓ここからDLできるよ入るときAppleID必要だよ（ΦωΦ）
[usdz変換ツール](https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Fdownload%2Fmore%2F%3F%3DUSDPython&rv=1)

![スクリーンショット 2019-10-23 0.05.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/b0e9be54-7d2d-85a3-68eb-dd94a5674711.png)

0.61のバージョンをDLして来たら適当に解凍しておきましょう。

###VRMモデルを.glbに変換
VRMモデルデータの.vrmを名前変更で.glbに変更してください（ΦωΦ）
![スクリーンショット 2019-10-23 0.11.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/55c5b7d0-e9ce-d9d3-7c35-9c324926094d.png)

こんな感じね。

そしたらルートの直下にでも置いてください。
ルートがわからないとな？（ΦωΦ）
他のQiitaの記事で「Macの使い方」とか探して勉強して行きましょう（’ΦωΦ）

###usdz変換ツールを使ってusdzに変換
さて、先程ダウンロードして適当なところに解答した変換ツールの中に「USD.command」というのがありますね（ΦωΦ）
![スクリーンショット 2019-10-23 0.17.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/4211ccb5-3fb5-8c7d-946b-4c64bd9b36f3.png)
これを起動します。
![スクリーンショット 2019-10-23 0.20.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/471c5e25-8b45-0696-c656-ea350bbbe896.png)

こんな感じのが出てくるので
ここで先程の.glbファイルを変換します。
usdzconvert ****.glb って入れて
![スクリーンショット 2019-10-23 0.24.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/40627fdf-e85f-e5f4-7575-949151dbb44b.png)

![スクリーンショット 2019-10-23 0.25.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/13ee1477-5deb-9cfe-f9f7-8d35124bf1d2.png)
Output file　と出てきて
ちゃんと.usdzになったファイルが出てこればOK！（ΦωΦ）

あと、このファイルを自分のサイトに入れるなり
AWSのS３にいれておくなりして手元のiPhoneのSafariから見に行けば〜
<img width="375" alt="AR.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62400/ebc1f522-dc5b-d021-f5a1-c9d5a6df36bc.jpeg">

上手にできました〜（ΦωΦ）

興味出た人はfixOpacityでアルファ周り処理したりとか
アニメーションが入った.glb作って見たりとかしてみてく遊んでみてください。

ではでは（ΦωΦ）
Windowsでの環境構築メモ

## TL;DR

Windowsで環境構築するために調べたことを忘れないようにメモしておく。どうでもよさそうな設定関連とかも一応メモ。

### 初期設定関連

#### 設定
- 設定 -> システム ->通知とアクションで通知をオフ
- 設定 -> システム -> ディスプレイで表示画面を拡張するに変更
- 設定 -> システム -> ストレージでストレージセンサーをオンにして設定
- 設定 -> プライバシー -> バックグラウンドアプリで不要なものをオフ
- 設定 -> プライバシー -> アクティビティの履歴でアクティビティの収集、同期をオフ
- エクスプローラーの表示で拡張子と隠しファイルを表示するようにしておく

#### Tips

- [マルチディスプレイで違う壁紙を表示](http://tanweb.net/2018/09/15/23169/)
- [Noto sans font](https://www.google.com/get/noto/)を使用。[Merio UIも大っきらい](http://www.vector.co.jp/soft/dl/winnt/util/se500183.html)で設定する。[設定方法](https://www.change-your-tomorrow.com/windows10-macos-noto-sans/)
- win + Rのファイル名を指定して実行 (msconfig) -> ブート -> GUIブート無し
- Google日本語入力でUSキーボードを使う設定（[半角全角の切り替え](https://ko-log.net/tech-log/archives/3826932.html)）

### WSL

基本的にWSL上に環境構築するので、まずWSLをインストールする。

どうせ使いそうなパッケージ関連をインストール

```bash 
sudo apt update
sudo apt install build-essential
sudo apt install libreadline-dev libncursesw5-dev libssl-dev libsqlite3-dev libgdbm-dev libbz2-dev liblzma-dev zlib1g-dev uuid-dev libffi-dev libdb-dev
```

### Shell

zshを使用するのでインストール

```bash
sudo apt-get install zsh
chsh -s $(which zsh)
```

tmuxとかはなぜか入っているので、dotfilesなどをセットアップしておく。

### linuxbrewのインストール

最近

### VScode

Settings Syncで設定をダウンロードして同期。
起動するターミナルがzshになると思うのでwslのインストールを忘れない。

### Python

[Pythonのリリースサイト](https://www.python.org/downloads/release/)で欲しいパッケージのURLを取得
apt-getで入るのは3.5くらいなのでふるい。しかしビルドが一部成功しない。何らかのパッケージが足りてなさそう。

`pyenv`を使うのがベストプラクティスっぽい？要検討

```bash
# 必要なライブラリのインストール
sudo apt update
sudo apt install build-essential
sudo apt install libreadline-dev libncursesw5-dev libssl-dev libsqlite3-dev libgdbm-dev libbz2-dev liblzma-dev zlib1g-dev uuid-dev libffi-dev libdb-dev
# ここでURLを使用。今回は3.8.0
wget https://www.python.org/ftp/python/3.8.0/Python-3.8.0.tar.xz
tar -xf Python-3.8.0.tar.xz
cd Python-3.8.0
./configure --enable-optimizations
# -jnでコア数を指定
make -s -j4
sudo make altinstall
```

### Nim

#### install
choosenimを使ってインストール

```bash
curl https://nim-lang.org/choosenim/init.sh -sSf | sh 
export PATH=$HOME/.nimble/bin:$PATH >> ~/.profile
```

### Rust

```
curl https://sh.rustup.rs -sSf | sh
```

### Node

apt-getで入るnodejsは非常に古いので、`nodebrew`を使ってインストールする。パッケージ管理はyarnを使う。

```bash
# install nodebrew
curl -L git.io/nodebrew | perl - setup
export PATH=$HOME/.nodebrew/current/bin:$PATH >> ~/.profile

# brewを使う場合
brew install nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH >> ~/.profile
nodebrew setup #これがないと諸々エラーになる

# install nodejs
nodebrew install v12.13.0
nodebrew use latest

# install yarn
# curl -sS dl.yarnpkg.com/debian/pubkey.… | sudo apt-key add -
# echo "deb dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
# sudo apt-get install yarn
# export PATH="$PATH:`yarn global bin`" >> ~/.profile

# npmでインストールのほうが楽そう
npm install -g yarn

# install React
yarn global add create-react-app
```
SendGridの日本語ドキュメントをガイドするGoogle Chrome Extensionを作ってみた

タイトルの通りですが、[SendGrid](https://sendgrid.kke.co.jp/)の表示画面にあわせて日本語のドキュメントを案内するGoogle Chrome Extensionを作ってみました。

[Chrome ウェブストア「SendGrid JP Helper」](https://chrome.google.com/webstore/detail/sendgrid-jp-helper/fpceoaopooclccopohgpjogjeilhdinb?hl=ja&gl=JP)
![sendgridjphelper.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/46f9e02a-13bd-732d-b57a-df687f19c436.gif)

私はSendGridのサポートエンジニアをしているのですが、日々の問合せ対応で**「これはFAQに載っている質問と同じだな」**とか**「ここのドキュメントをみれば解決するな」**といったケースをよく見かけます。SendGridの画面は英語表記のみなので、画面内から日本語情報にたどり着きにくいのかもしれません。

**「画面内でうまく日本語ドキュメントに導く方法がないかな？」**と悩んでいたところ、[こちらの記事](https://blog.a-know.me/entry/2019/10/06/125049)をみてChromeの拡張機能ならできるかも、と思って早速作ってみました。

ソースはこちら。
https://github.com/kikutaro/SendGridJPHelper

Chrome Extensionを作るのは初めてで、JavaScriptもあまり慣れていないため、現時点では開いている画面のURLに基づいて固定的にドキュメントと紐づけています。リンクの情報もベタ書き…。

```javascript
var docArr = [
  {
    "name":"はじめに",
    "url":"https://sendgrid.kke.co.jp/docs/Tutorials/B_Marketing_Mail/marketing_campaigns0.html"
  }
];
var faqArr = [
  {
    "name":"マーケティングキャンペーン機能とはどのような機能ですか？",
    "url":"https://support.sendgrid.kke.co.jp/hc/ja/articles/115000015701"
  },
  {
    "name":"マーケティングキャンペーン機能にはどのような制限事項がありますか？",
    "url":"https://support.sendgrid.kke.co.jp/hc/ja/articles/115000016082"
  },
  {
    "name":"マーケティングキャンペーン機能利用料金の計算方法について教えてください。",
    "url":"https://support.sendgrid.kke.co.jp/hc/ja/articles/115000018142"
  }
];
```

これではメンテが大変なのでデータはAPIで取得する仕組みなどに変えていきたいです。他に、画面内のHTML要素を書き換えてツールチップなどでヘルプ情報を表示するとかもやってみたいなぁと。あとChromeだけではなくFirefoxの拡張機能も作りたい。

SendGridを使ってる方はぜひお試しください。
Linuxのディレクトリの色がSSH接続で見ると見辛い

# Linuxのディレクトリの色が見辛い
Linuxターミナルを利用するときに自端末で利用するときには問題ないですが、
SSHを利用してwindows端末から見ようとすると非常に見辛い！

どんなふうに見辛いかと言うとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67358/e30a521b-1b3f-bb52-cf8d-63124b4d0747.png)
もう見辛いというか、見えない・・・。
(Ubuntu18.04で確認してます。)

## 設定変更方法
`.dircolors`としてユーザ直下に置くと設定が可能。
(Vimとかbashとかと同じ感じ)

**現在の設定は残したまま、ディレクトリに関するものだけ変更したい・・・**
下記のコマンドで現在の設定が確認可能。
`dircolors -p`

なので、一回ユーザ直下に現在の設定ファイルを下記のコマンドで出力
`dircolors -p > ~/.dircolors`

出力したファイルの中でDIRで始まる項目を編集します。
初期状態だと下記でした。
`DIR 01;34 # directory`
Vimの設定変更していないとDIR以外はディレクトリと同じ感じに見辛い・・・

色については  [ISO 6429 (ANSI) カラーシーケンス](http://www.linux-cmd.com/dir_colors.html)が設定されてます。
あんまり色が無いですが、お好みでいい感じに。

私は下記の設定にしました。
`DIR 02;36 # directory`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67358/5f778a9e-8414-fcf8-ff24-9566b0b3682b.png)
濃い緑な感じで割と見やすい。
年末まで毎日webサイトを作り続ける大学生 〜4日目 cssで板を回転させる〜

##はじめに
初めまして。
年末まで毎日webサイトを作っている者です。
今日は板を回転させるサイトを作りました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は4日目。(2019/10/22)
よろしくお願いします。

##サイトURL
https://sin2cos21.github.io/day4.html

##やったこと
板の上にカーソルを持ってくると大きくなって回転します。
cssのtransformプロパティ・transitionプロパティで実装しました。
![スクリーンショット 2019-10-22 23.49.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/cd87af84-fc91-2281-70cc-5adb2109e115.png)

hoverすると・・・↓
![スクリーンショット 2019-10-22 23.53.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/a9d600ca-19e9-6713-3e05-5fa17f7730e5.png)
なんと板が浮き出てきて回転するぞ！

##こだわったところ
なるべく多くtransform・transitionの値を詰め込みました。（回転とか拡大とか）

```css
.a1, .a2, .a3, .a4, .a5 {
  width:100px;
  height: 500px;
  margin-right: 4px;
  background-color:rgba(200, 50, 50, 1);
  transition-duration: 2s;
  border: 0.1px solid rgba(190, 40, 40, 1);
}

p.a1:hover,
p.a2:hover,
p.a3:hover,
p.a4:hover,
p.a5:hover {
    background-color: rgba(200, 100, 50, .5);
    transform:rotate3d(50,100,0,80deg) scale(3,2);
}
```

htmlはとてもシンプルです↓

```html
<h3>板が回転するシステム</h3>
    <div class="test">
        <p class="a1">1</p>
        <p class="a2">2</p>
        <p class="a3">3</p>
        <p class="a4">4</p>
        <p class="a5">5</p>
    </div>
```

##感想
いやー、今日は時間配分失敗しました。
正規表現で何か作ろうと調べてたらろくに身につかない上に時間だけが経っているという・・・。
でも絶対に年末までに正規表現をマスターしてみせます！

##参考
【CSS3】Transition（変化）関連のまとめ - Qiita(https://qiita.com/7968/items/812d6a21fc4dd9ae9c75)
windowsでtviewを使うときの設定

日本語 + Windowsは、文字設定が面倒。

tviewなどに修正が入る可能性があるので、対応には注意。

# その1

```
chcp 437
go run main.go
```

戻すときは

```
chcp 932
```

https://github.com/rivo/tview/issues/66
https://docs.microsoft.com/en-us/windows/win32/intl/code-page-identifiers

# その2

自分の環境だけの場合

```
package main

import (
	"github.com/rivo/tview"
	"github.com/mattn/go-runewidth"
)

func main() {
	runewidth.DefaultCondition = &runewidth.Condition{EastAsianWidth: false}
	box := tview.NewBox().SetBorder(true).SetTitle("Hello, world!")
	if err := tview.NewApplication().SetRoot(box, true).Run(); err != nil {
		panic(err)
	}
}
```

# その3

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32985/c4b062a5-6594-fb4a-bcfd-25b29f7d1237.png)
Linux でパスを通す　環境変数の設定 / 確認 / 削除する


パスの通し方について、シンプルにまとめます。

#パスを通すとは
環境変数PATHによく使うコマンドなどのパスを設定しておくことで、コマンド名のみで使用できるようになる。

（例）lsコマンドの場合


```
$ /usr/bin/ls
```
lsコマンドの場合、長いコマンドの記述が必要なところを、環境変数でパスに/usr/binが登録されていることで、lsのみで実行できている。

```
$ ls
```


##環境変数を確認


```
$ printenv

PATH=/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin
```
PATH部分が環境変数のパス設定部分となります。

##  環境変数を上書き

```
$ export PATH=/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:追加したいパス
```
※　単純に追加したいパスとしないように注意
export　PATH=追加したいパス

※　小文字にしないように注意 （PATHとpathは全く別の変数として扱われるため)
export path=...

## 環境変数を削除

```
$ export -n 削除したい環境変数名
```
間違ってPATHではなく、pathで登録してしまった時などに削除できる。

##永続的に環境パスを設定する
コンソールからexportコマンドで登録した環境変数は、一時的なものなのでログアウトすると環境変数はリセットされてしまう。

```
$ vi ~/.bashrc
```
.bashrcにexportコマンドを書いておくと、環境変数の変更が永続化される。（ログアウトしてもリセットされない。）


誰かの役に立てれば幸いです。
マスターカレンダー作成用SQL(Oracle Database)

## マスターカレンダー作成

### Oracle Database用

```sql
select
     a.calendar                            as mcal_date
    ,to_char(a.calendar,'YYYY') as mcal_yyyy -- 年：YYYY
    ,to_char(a.calendar,'MM'  ) as mcal_mm   -- 月：MM
    ,to_char(a.calendar,'YYYY')||to_char(a.calendar,'MM'  ) as mcal_yyyymm -- 年月：YYYYMM
    ,to_char(a.calendar,'DD'  ) as mcal_dd   -- 日：DD
    ,case when to_number(to_char(a.calendar,'MM')) < 4 then 
        to_number(to_char(a.calendar,'YYYY')) - 1
     else
        to_number(to_char(a.calendar,'YYYY'))
     end as mcal_nendo                                  -- 年度：YYYY
    ,case when to_number(to_char(a.calendar,'MM')) < 4 then
        to_number(to_char(a.calendar,'MM')) + 9
    else
        to_number(to_char(a.calendar,'MM')) -3
    end as mcal_mm_sort                                -- 月ソート順
    ,to_char(a.calendar, 'DY') as mcal_dy              -- 曜日(漢字)
    ,to_number(to_char(a.calendar, 'D')) as mcal_d     -- 曜日(数値)
from
(
    select
        to_date('20010401', 'YYYYMMDD') + rownum - 1 as calendar --- 起点を2001年04月01日とする
    from
        (select rownum as "dummy" from dual connect by rownum <= 36500) -- 100年分のダミーレコード。それより長くする場合は要調整
    where
        to_date('20010401', 'YYYYMMDD') + rownum - 1 <= to_date('20210331', 'YYYYMMDD') -- 範囲を2001年04月01日～2021年03月31日とする
    order by
        1
) a;
```

## 参考リンク
[Oracleで連続する日付データ(カレンダー)を作成する](https://everyday-growth.com/?p=1385)
[Oracle でテーブルやビューを使わずに任意の複数行のデータを取得したい](https://blog.mukairiku.net/2018/02/oracle-%E3%81%A7%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%84%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%9A%E3%81%AB%E4%BB%BB%E6%84%8F%E3%81%AE%E8%A4%87%E6%95%B0%E8%A1%8C%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%97%E3%81%9F%E3%81%84.html
)
【Cassandra】Compaction


## Compactionの目的

### SSTable統合による読み取りオーバヘッドの削減
　SSTableはmemtableの(定期的なflushによる)ダンプという形で作成されるため、経時とともに多くのファイルが作成されることになり、よって、読み取りクエリは複数のSSTableを読み取る形となり、オーバヘッドが発生する。このオーバヘッドの削減のため、SSTableファイルをソートマージする。

### 不要データの物理削除
　Cassandraは更新処理や削除処理で元のデータの置換えを行わないことで、更新/削除処理時のI/Oオーバヘッドを軽減しているが、無駄なディスク容量が発生したままになる。このため、SSTableファイルをソートマージして、重複/期限切れデータを削除する。
※逆にいうと、物理的なレコード削除はCompactionのタイミングでしか行われない。

## Compactionプロセス

### 発動タイミング
・発動タイミングは以下
　・テーブルごとに定義したCompaction Strategyに基づく、バックグランド自動起動
　・管理者によるnodetool compactコマンド実行
　・SSTableの変換(nodetool upgradesstables等)、rebuild(nodetool rebuild)
　・incremental repairに伴うCompaction 

### 実行プロセス
・各SSTableのデータをマージ、tombstoneを排除して、SSTableを1つの新しいSSTableファイルに統合
　・tombstoneの削除は、そのtombstoneの猶予秒( gc_grace_seconds )が終了している場合のみ実行　　  　　　　　
　　※猶予秒( gc_grace_seconds )のデフォルト: 864,000秒=10日間
　　　( データのゴースト化復活回避のために、すべての廃棄( tombstone )がrepairで正常伝播される必要あり )　　
・古いSSTableファイルは、マージ完了後、継続中の読み取りによるファイルの使用が終了を待って削除
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497751/25566735-4068-472a-890f-0edc6123f424.png" width=50%>

### 処理結果の確認
・system.logあるいはdebug.logに出力されるCompactionExecutorのログ出力で確認可能
　・Compacting ～
　　Compaction処理対象のSSTableを確認可能
　・Compacted ～
　　Compaction処理結果を確認可能
　　・Compacted ～ sstables to ... [SSTableをマージした数]
　　・～ bytes to ～ [前後のデータサイズ]
　　・～ total partitions merged to ～ [前後のパーティション数]
　　・{1:～, 2:～,} 何個のSSTableからいくつパーティションをマージしたか
　　　例えば、「2:46」は、46パーティションを2つのSSTableからマージしたことを示す

## Compactionの留意点
・Compaction処理時、新旧のSSTableが共存するため、ディスク領域の使用量が一時的に増加
・Compaction処理時、ディスクI/O、CPU使用が増加
エンジニアスタンプラリー～フロントエンド編＃13

## 企画主旨
[Frontend Developer Roadmap](https://roadmap.sh/frontend)をひたすら巡回する企画 
詳しくは[こちら](https://qiita.com/tonchan1216/items/8d5f072cf769dfe1bc4f)

## 今回の実施内容
SSR(Server Side Rendering)

## Server Side Rendering

#### Next.js (React.js)
[Getting Started | Next.js](https://nextjs.org/docs#setup)を参考に、今までのReactアプリをSSRに無理やりコンバート。
作業としてはエントリーポイントだったindex.tsを./pages/index.tsxに移動して修正。

```tsx:index.tsx
import React from 'react';
import { Provider } from 'mobx-react';
import Head from 'next/head'

import App from '../src/js/App';
import SkillStore from '../src/js/stores/SkillStore';
import "../src/sass/main.scss"

const store = new SkillStore();

export default () =>(
  <React.Fragment>
    <Head>
      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
      <meta name="description" content="The Stamp Rally of FDR" />
      <meta name="theme-color" content="#ffffd9" />
      <title>Frontend Developer Roadmap スタンプラリー</title>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
    </Head>

    <Provider store={store}>
      <App />
    </Provider>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </React.Fragment>
);
```


## 成果物
意味があるとかないとかじゃない。使ってみることが目的。
Githubページに上げられない。。。
https://github.com/tonchan1216/WDR-frontend/tree/v13
GCP StackDriver 設定例


# 前提

GCEにStackDriver Monitoringのエージェントがインストールされていること
古いGCEだと、Linuxのカーネル上げないとだめだった・・・

# 設定例


設定画面までいく方法はネットに情報があるので割愛する。
左のAlertingからCerate Policyする

通知設定EメールやSlackは別途ページを設ける予定。

### ディスク使用率監視

Filterにホストを指定していないので、全GCEに設定される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/9feee6a6-22b4-f5a4-4ee7-f3e932a75cdf.png)

###  メモリ使用率

こちらはホストを指定している例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/22c87821-d023-46ff-f1b5-ea57de262287.png)

###  プロセス監視

同じプロセスで数種類ある場合、Containsが便利と思う
単純に、nginxという名前のプロセスを監視したいって場合はCommandに入れればいい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/2ad79812-3a6f-420c-724c-618ca4f7fb16.png)

###  サービス監視

上記とかと入り口が違うので注意。Uptime Checksから。
海外6ｹ箇所からポーリングしてくれるけど、今回は、そこまではいらないかな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/4731ae62-8a0f-c499-e467-7adc69d75fab.png)

###  ログ監視

Comming soon.
まだ作ってない。
DeepChemでLightGBMを使う

# はじめに
DeepChemでは、scikit-learnの予測アルゴリズムの他、参考URLにあるようにXGBoost等も使える。実際、DeepChemを使ったMoculeNetというベンチマークでは、比較対象の既存手法の中にXGBoostも存在する。しかし昨今はLightGBMも比較対象にしたいとうニーズもあるでしょうということで、今回DeepChemからLightGBMを利用するコードを書いてみた。

# 環境
- python3.6
- DeepChem 2.2.1.dev54
- scikit-learn 0.21.2
- lightgbm 2.2.3

# ソース
ソースは以下の通り。ほぼ参考URLの流用でいけたので解説は省略。
コマンドラインからCSVファイル、目的変数のカラム、smilesのカラム指定して実行すればよい。


```python
import argparse
import deepchem as dc
from lightgbm import LGBMRegressor


def model_builder(model_params, model_dir):
    estimator = LGBMRegressor()
    estimator.set_params(**model_params)
    return dc.models.SklearnModel(estimator, model_dir)


def main():

    parser = argparse.ArgumentParser()
    parser.add_argument("-train", type=str, required=True, help="trainig data file(csv)")
    parser.add_argument("-target_col", type=str, required=True)
    parser.add_argument("-smiles_col", type=str, default="smiles")
    args = parser.parse_args()

    featurizer = dc.feat.RDKitDescriptors()

    # 学習データの読み込み
    loader = dc.data.CSVLoader(tasks=[args.target_col],
                               smiles_field=args.smiles_col,
                               featurizer=featurizer)

    dataset = loader.featurize(args.train)

    splitter = dc.splits.RandomSplitter(dataset)

    train_dataset, valid_dataset, test_dataset = splitter.train_valid_test_split(dataset, frac_train=0.8,
                                                                                 frac_valid=0.1, frac_test=0.1)
    transformers = [
        dc.trans.NormalizationTransformer(transform_y=True,
                                          dataset=train_dataset)
    ]

    for transformer in transformers:
        train_dataset = transformer.transform(train_dataset)
        valid_dataset = transformer.transform(valid_dataset)
        test_dataset = transformer.transform(test_dataset)

    print(train_dataset.X.shape)
    print(valid_dataset.X.shape)
    print(test_dataset.X.shape)

    metric = dc.metrics.Metric(dc.metrics.r2_score)
    optimizer = dc.hyper.HyperparamOpt(model_builder, verbose=True)
    params_dict = {
             "num_leaves": [50, 100, 150, 200],
             "max_depth": [50],
             'min_data_in_leaf': [50],
             "learning_rate": [0.01],
             "n_estimators": [2000, 2500, 3000],
             'reg_lambda': [0],
        }
    best_model, best_model_hyperparams, all_model_results = optimizer.hyperparam_search(params_dict, train_dataset, valid_dataset, transformers, metric=metric)


if __name__ == "__main__":
    main()
```

# おわりに
scikit-learnのインターフェースに準拠しているものであれば、同じやり方でいけるはずだ。

#参考
- [Deepchem④(XGBで回帰)](https://horomary.hatenablog.com/entry/2018/10/23/000216)
勉強ログ_day1_開発環境構築(Win10)

# はじめに
非エンジニアの勉強ログ。
**超初心者プレイ**のため、内容は自分の勉強メモです。

### 今日のゴール
- 「開発環境」というものを構築する

### 環境
- Windows10 Pro 1903
- VirtualBox 6.0.4
- Vagrant 2.2.4
- Cyberduck 7.0.0

### 参考資料・引用元など
- ドットインストール：[ローカル開発環境の構築(Windows編)](https://dotinstall.com/lessons/basic_localdev_win_v2 "ローカル開発環境の構築(Windows編)")
- Qiita：[【Laravel超入門】開発環境の構築](https://qiita.com/7968/items/97dd634608f37892b18a "【Laravel超入門】開発環境の構築")
- Qiita:[【まとめ】Vagrant コマンド一覧](https://qiita.com/oreo3@github/items/4054a4120ccc249676d9 "【まとめ】Vagrant コマンド一覧")



# 開発環境を作る意味
### 1.本番環境をこわさないため
プログラミングをして、アプリを作ったりするには
相応の環境を整える必要がある。
今使っているパソコンにそのまま環境を適用すると、**パソコンを日常利用する中で、想定しない動きをする**かもしれない。
でも別のパソコンを買ってきて、、、なんて面倒だし高価。

パソコンの中に、**いつものパソコン（OS？）から隔離された箱**（仮想マシン？）をつくれば
安全に、（操作感覚的には）いつものパソコンで、色々開発したり操作したり出来る。


### 2.インターネットに公開するのに便利だから？
開発したら、いずれはインターネットに自分の作品を公開したりする（かもしれない）。
その時、自分のパソコンとつなげると、自分のパソコンの中身が見えちゃうリスクがあって、危険。
仮想マシンをつくっておけば、それだけインターネットに見せればいいので、公開がラク？


# 開発環境構築のための、ダウンロード
### 1. VirtualBox
いつものパソコンの中に、仮想マシンをつくってくれるソフト。
[ここ](https://www.virtualbox.org/ "VirtualBox")　からダウンロード

### 2. Vagrant
VirtualBoxでつくった箱に対して
箱の電源を入れたり、開発に必要な設定のインストールをする指示をしたりしてくれるソフト。
[ここ](https://www.vagrantup.com/ "Vagrant")からダウンロード

※指示するのは人間じゃないのか・・・？　これはナゾ。
※VirtualBoxは箱つくるだけなのだったら、なんかあんまり役割無いように見える。箱つくるのが大変なのかなあ

### 3. PuTTY
自分のパソコンから、仮想マシンに、接続するためのソフト。
仮想マシンは自分のパソコンの中にあるけど、箱が別なので
自分のパソコンで操作するには、特別な道（これがＳＳＨ？）を通って操作しないといけない。
なおPowerShellは仮想マシンの外から仮想マシンに指示する、PuTTYは仮想マシンの中で仮想マシンを操作する

### 4. Cyberduck
ファイル転送ツール。
GUIで仮想サーバにあるフォルダが見える。



# 仮想マシンの初回構築
ドットインストール参照に設定していく。
- [仮想マシンを立ち上げる](https://dotinstall.com/lessons/basic_localdev_win_v2/38605)
    - さらっとOSがMyCentOS指定になっているが、実際には[VagrantBox](https://app.vagrantup.com/boxes/search)見ながら選べるよ
- [仮想マシンにログインする](https://dotinstall.com/lessons/basic_localdev_win_v2/38607)
- [仮想マシンにアクセスする](https://dotinstall.com/lessons/basic_localdev_win_v2/38610)

# 2回目以降の仮想マシンの使い方
- [学習をやめる手順](https://dotinstall.com/lessons/basic_localdev_win_v2/38612)
    - Cyberduckは×で閉じれる
    - PuTTYは、webサーバはCtrl + Cで止めて、exitでPuTTYから抜ける
    - 仮想マシン自体はPowerShellで一時停止。vagrant suspend
- [学習を再開する手順](https://dotinstall.com/lessons/basic_localdev_win_v2/38613)
    - PowerShellで仮想マシンの電源を入れる。vagrant up
    - PuTTYで仮想マシンにログインする
    - Cyberdeckでファイルつくったりする


# あとがき
- Markdown記法がそもそもむずかしい
- 勉強をまとめるのが大変だな　続く気がしないな
Windows10でHHKBのUSキーボードを使う



¥円マークが無いとか、_アンダーバーが無いとかいってごめんなさい。
キーボードをよく存じ上げておりませんでした。

でも以外とググっても情報がでてこないので、共有します。（画像だけの手抜きだけど）
Windowsで使おうってやつがいないのか・・・

# 日本語キーボードからUSキーボードへ設定変更をする


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/e9778973-3eb9-f739-5856-5f5eefdefcbe.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/0f5643ad-ce5a-7099-2bb0-a246b1da5bc9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/fc7f6e69-a313-7b8e-6646-0c07e53886c7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/43048f92-2c65-2d04-07d3-edfce0335bd4.png)


# おまけ Ctrl+Spaceで日本語/英字変換する 何もインストールせずに

普通のFn+delは折角のキーポジションを崩してしまうので、即効設定したほうがいい
Google入力の情報が多くて、AutoHotKeyの情報もあったが、
余計なものは、なにも入れたくないのが人情。標準でできるじゃん。。。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/a31aba75-fe7b-167b-2d1a-4e858c6e9f15.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/8f4d37f9-9986-5cfa-9cb8-8bacc2b6f66b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364471/9141de16-ae9e-2c04-4658-b92cd2f7ce06.png)


# おまけ 無変換(カタカナに変換したい)がないのだ

Ctrl ＋ i を提案します。

# おまけ F10(半角英数へ変換)が押しにくいのだ

Ctrl + t を提案します。
setIntervalでイベントが１回だけしか起こらない問題の解決法！たった２文字の変更で直る

#setInterval(function()←ここに括弧をつけてはいけない！#
たとえば「aiueo」という関数を1秒（＝1000ミリ秒）ごとに何回も呼びだしたいとき、

```js
setInterval(aiueo(),1000);　#=>初めの１回しかイベントが起きない
```
↑これだと最初の１回しかイベントが起きません。

思い通りに何回も動かすためには、

```js
setInterval(aiueo,1000);　#=>OK!
```
**第１引数の関数名の後ろに「()」を付けない**


もしくは、

```js
setInterval("aiueo()",1000);　#=>これもOK!
```
**関数名をダブルクォーテーションで囲う**


これで解決できます。

#実際に私が失敗したコードと成功したコード#

＜失敗例＞
ページを開くと「あ」と書かれたポップが出てきて、「OK」を押すたびにポップの内容が「い」「う」「え」「お」に変化、そしてまた「あ」にループするというものです。

```js
i = 0;

function aiueo()
{arr = ["あ","い","う","え","お"];
  alert(arr[i]);
  i++;
  if(i >4){i = 0;}}

onload=function play()
{setInterval(aiueo(), 1000);}
```
最後の行が
{setInterval(**aiueo()**, 1000);}となっています。

実行結果は
![qiita失敗.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513594/b21bf9b9-5e43-a737-a10b-8535709d90e7.gif)
最初の「あ」しか出てきません。


＜成功例＞

```js
i = 0;

function aiueo()
{arr = ["あ","い","う","え","お"];
  alert(arr[i]);
  i++;
  if(i >4){i = 0;}}

onload=function play()
{setInterval(aiueo, 1000);}
```
最後の行を修正、
{setInterval(**aiueo**, 1000);}に。

実行すると
![qiita_success.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513594/295e4916-99ef-ef00-5f11-ccce8ce0c472.gif)

しっかり思い通りに動いてくれました。

以上です！
setIntervalに苦しむ方がもしいれば、助けになれれば幸いです。
DSP FMラジオ RDA5807FP+ATTINY85+AQM0802A　その１　全体構成

#はじめに
* DSPラジオのモジュールやCHIPをいくつかArduinoで動かしてきたが、まとめとして、乾電池駆動の箱型ラジオを作成してみた。
* 合わせて、割込み処理や、LCDへの出力なども勉強してみた。
* いろいろ試行錯誤したのですが、最終的には以下のような形になりました。

#全体的なつくり
* あまり複雑なものは作れないので、機能を絞って比較的シンプルな形にしました。
* 乾電池駆動。全体を3.3Vで統一。
* スピーカー一つでの出力。ボリューム付き。
* FMのみ。
* LCD付き。
* SEEK機能での選局
* 手動で0.1MHzずつの調整。
![radio_omote.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482773/8d3d6e18-845c-dfd2-4e5c-dbe1a96df26e.jpeg)
![radio_ura.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482773/6d473741-bcfa-67a1-c238-fe17f1f8d64a.jpeg)

#主として使用したパーツ
* FMラジオCHIP：　RDA5807FP
    * RDA5807シリーズの中から、FPを選択。割込み機能用のGPIOピンがあり、DIP化の際のはんだ付けが容易なため。
    * Aliexpressで調達。10個で200円（送料込み）。安すぎ。
* マイコン：ATTINY85-20PU
    * ATMEGA328を使っても良かったが、勉強もかねてATTINY85を選択。
    * プログラムメモリは足りたが、割込み用のピンが少なく苦労した。
* LCD：AQM0802A-RN-GBW
    * 秋月電子で調達。I2C接続の小型LCD。ピッチ変換基板は自作。
    * 一般的なLCD1602Aは、大きさ、電圧の関係で使いにくかった。
* オーディオアンプ：　PAM8403利用のモジュール。
    * AMAZONで安価で売っているもの。

#おおまかな制御方法
* SEEK機能での選局：選局が完了すると、5807FPのGPIOピンからトリガがでる。
    * このトリガでATTINY85に割込みをかけて、周波数、RSSIをLCDに出力。
* SEEK機能の再開：タクトスイッチでSEEKを再開させる。
    * タクトスイッチの状態をLOOPで読んで、SEEK機能を呼び出す。
* 手動で+0.1MHZ：タクトスイッチで0.1MHZずつ周波数を増やす。
    * タクトスイッチの状態をLOOPで読んで、周波数セット機能を呼び出す。

#おまけ
* 本記事はここまで。各パーツ、各機能にわけて投稿予定です。
JavaScript(ES6)初心者向けの基本的な文法

振り返りと個人的メモを共有します。  

## JavaScript ES6

[ECMAScript 2015(ES6)](https://ja.wikipedia.org/wiki/ECMAScript)


### 変数の宣言  
``` javascript
var name = "xxxx";//再宣言可、再代入可、関数スコープ(ES5以下でも動作)
let name = "xxxx";//再宣言不可、再代入可、ブロックスコープ
const name  = "xxxx";//再宣言不可、再代入不可、ブロックスコープ
```

### 算術演算子

|演算|数式|
|:--:|:--:|
|加算|a+b|
|減算|a-b|
|乗算|a*b|
|除算|a/b|
|剰余|a%b|



### if文
``` javascript
if (a === b) {
  proc();
  } else if {
  proc();
  }else{
  proc();
  }
```
### switch文

``` javascript
switch (val) {
  case 1:
```
***
### 関数
``` javascript
const 定数名 = function(){
  //纏めたい処理
};

```
定数に対し、function()の内容を代入することで
関数を定義する。  
  
関数を定義しただけでは処理は実行されない
「定義した定数名();」と書くことで実行される。

#### アロー関数  
関数定義時の`function()`を`()=>`と記載することも可能。 
これはES6から導入された**アロー関数**と呼ばれるもの。 

``` javascript
const 定数名 = ()=>{

  //纏めたい処理

};

```
#### 引数
``` javascript
const 定数名 = (第1引数,第2引数,・・・)=>{

  //纏めたい処理

};

```

#### 戻り値
関数の中で`return`を使うと、呼び出し元で値を受け取れるようになる。

##### 値の返却
``` javascript
const 関数A = (第1引数,第2引数,・・・)=>{

  //纏めたい処理

  return 値;
};

const 結果用変数 = 関数A(引数1,引数2);
console.log(結果用変数); // =>returnされた値
```
##### 真偽値の返却
``` javascript
const 関数A = (第1引数,第2引数,・・・)=>{

  //纏めたい処理

  return 値 === x; //条件に応じたtrue/falseを返却
};

if(関数A(引数)){ //関数の真偽を条件に処理を実行
  //関数Aが真の場合に実行する処理
}else{
  //関数Aが偽の場合に実行する処理
}
```
***

### 文字列中の変数展開

#### テンプレートリテラルによる文字列中での変数展開

``` javascript
const val = "World"
// ダブルクォート
const output1 = "Hello " + val + "!" // => Hello World!
// テンプレート構文
const output2 = `Hello ${val}!` // => Hello World!
```
#### プレースホルダー内での値の取り扱い

プレースホルダー${...}内では計算や関数呼び出しが可能。 

``` javascript
const num1 = 2, num2 = 3

console.log( `num1 + num2 = ${num1 + num2}` )
// => num1 + num2 = 5

function sub(a, b) {
  return b + a
}
console.log( `num1 + num2 = ${sub(num1, num2)}` )
// => num1 + num2 = 5
```
わい、SDカードにxamppポータブルを入れてみるの巻 



人生で歯医者に行った回数よりもXAMPPをインスコして設定をいじった回数のほうが多いと自負します
ちなみに歯医者は5年くらい行ってないですｗ
 
#今回の目的
・2台のノートPCを気分によって使い分けるのでどっちでも使えるようにSDカードに入れたい。
(ノートPCにはたいてい専用の差込口があり普段の利用頻度もUSBより少ないので都合がいい)
　　
・複数のバージョンのPHPを試せるようにしておきたい。


#対象環境
**PC**
どっちも Windows 10(64bit)

**SDカード**
ドラレコ用に使ってたやつを再利用(32GB Class10)
![45987.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/145db69b-f53a-43ca-8640-a47f3879c9bc.jpeg)




#手順

##まずSDカードのドライブレターをXに変更
※他のパソコンで使うときも同様の設定が必要になります。
>(参考)ドライブレター ( 「 F: 」 など ) を変更する方法 ( Windows 10 )
>http://faq3.dospara.co.jp/faq/show/3362?site_domain=default


![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/45de5d97-19a8-f046-b7e9-a0f846205d99.png)
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/91051327-c0d9-fb37-8d4a-06ce6a60085c.png)
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/624bff01-e298-6ed6-0f9f-b3bddbc4ee31.png)



##XAMPPポータブル版をダウンロード
今回はPHP7.3用でインストールします。
>Home / XAMPP Windows / 7.3.10
>https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/7.3.10/

![2222.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/51a7392a-7b26-c129-0617-857b0a7b4471.png)



##インストール先
このフォルダを作成してインストールします。
`X:\XAMPP\7_3`

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/5b2fbf43-abf9-eba3-f79d-8653100d8bb1.png)
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/49a872df-d6bc-21c8-997e-f13e1571e0bc.png)



※もしPHP5.6を同じ手順で入れるときはこんな感じのフォルダ名にすると思います。
`X:\XAMPP\5_6`





##初回起動確認
インストールが完了したら動作確認します。
http://localhost/
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/5525f361-c314-77a6-ac89-9b68a5050e39.png)



これだけでも十分ですが、さらに複数バージョンで同じ設定のドキュメントルートを参照できるように変更します。

##共通で使える設定ファイルを作成
X:\XAMPP\management\my-httpd.conf

```my-httpd.conf
# 共通で使うドキュメントルート
DocumentRoot "X:/XAMPP/www"

<VirtualHost *:80>
    DocumentRoot "X:/XAMPP/www"
    ServerName "localhost”
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" common
</VirtualHost>
<Directory "X:/XAMPP/www">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted
</Directory>

```

## ドキュメントルート確認用のスクリプト配置
X:\XAMPP\www\index.php

```index.php
<?php 
// このphpファイルの配置パスを表示
var_dump(__FILE__);

// PHP infoを表示
phpinfo();
```




## Apacheのhttpd.confの最後に追記
X:\XAMPP\7_3\apache\conf\httpd.conf

```httpd.conf
# 独自設定読み込み
Include "X:/XAMPP/management/my-httpd.conf"
```

## Apacheを再起動し起動確認

http://localhost/

このような表示になっていれば設定完了です。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66209/76773d38-02b9-f7f2-3bda-5008bd6d133f.png)



# さいごに
DBに関してはWordpressを立ち上げられるくらいはできましたが、あまり使わないほうがいいかもしれません。
(この記事を書く前にXAMPP内のmariaDB環境を一回壊してしまい、自力でレストアしきれず結局XAMPPを再インストールしました)

壊れたらいつでも再インストールできるようにXAMPPポータブル版のインストーラーの保管をおすすめします。

あと、この方法で複数XAMPPをインストールできますが起動は1つのXAMPPしかできません。
他のXAMPP環境に切り替えたいときは使っているXAMPP環境をOFFにしてからにしましょう。
Ruby On Rails 初心者がWindows向けにサンプルを作ってみた時にハマったことを共有 

はじめまして、wattak777と申します。

Ruby On Railsを自宅のPCに入れて遊んでみようとインストールを行い、その後サンプルアプリを作ってみたのですがエラーが発生したので、それを対処した話です。

<h1>１．インストール</h1>

<a href="https://qiita.com/kako351/items/ad04ba4ae80f2f144d9c">ここ</a> を参考にしたのですが、記事当時は2.4.2だったのですが、下記のようにバージョンが進み、Devkitも追加されておりました。

![install.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514729/92832168-a9c4-7a82-5bbb-1e018bdc5b93.jpeg)
<a href="https://www.buildinsider.net/language/rubytips/0004">ここ</a> によるとDevkit推奨とされていたのでDevkitありをインストールしました。

その後のrailsのインストールは先ほど紹介したページのまま行い、サンプル作成時にsqlite3のエラーが出るかも、といった記載があったのでこれについては <a href="https://techplay.jp/column/512">ここ</a> にある「sqlite3ライブラリをインストール」にある2つの手順（gem install sqlite3とサイトからdll、toolsをコピペ）で行いました。

<h2>２．サンプル作成時のエラー</h2>

作りたいディレクトリまで移動して「rails s」を実行したのですが、以下のエラーメッセージが…。

<pre>
C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/webpacker-4.0.7/lib/webpacker/configurati
on.rb:91:in `rescue in load': Webpacker configuration file not found xxx/sample/
config/webpacker.yml. Please run rails webpacker:install Error: No such file or
directory @ rb_sysopen - xxx/sample/config/webpacker.yml (<u>RuntimeError</u>)
</pre>

解決方法はなんてことはない <a href="https://qiita.com/bonoboz/items/52780af6a9d77d8a14ba#%E5%AF%BE%E5%87%A6%E6%B3%95">ここ</a> にある方法をそのまま使いました。