OmniAICreator/Qiita-1.07M huggingface dataset:
Rails テストについて  2 （モデル編）

#はじめに
テストに拒否反応があるので、まずは整理したいと思います。
少しづつ記事を書いていきます。
前回記事　→　[Rails テストについて  1](https://qiita.com/raigakun/items/b88af7e80e64abfedcca)

もうすでにご存知の方、省略の仕方等ご存知でしたら、ご助言願います。


##必要なGemのインストール！
```
Gemfileに追記

gem 'rspec-rails'
```

その後、bundle installです。

##web_console(gemfile内)の記述！
- web_console というgemはtest環境で動かすと不具合が起きる可能性があるようです。
- ということで、development環境でのみ動くようにしてください。
- group :development do ~ endの記述が無ければ下記のように作成!
- 既にある場合、その記述の間にweb_consoleを移動！

```
Gemfile

group :development do
  gem 'web-console'
end
```
その後、bundle installです。


##RSpecの設定

- RSpec用設定ファイルの作成

```
ターミナル

%rails g rspec:install
```

↓

こんな感じで4つ作成されます！

```
ターミナル

%rails g rspec:install 

Running via Spring preloader in process 3820
      create  .rspec　　　　　　　　　　　　　①
      create  spec　　　　　　　　　　　　　  ②
      create  spec/spec_helper.rb　　　　  ③
      create  spec/rails_helper.rb　　　　 ④
```


###ファイル説明
- rails_helper.rb
  - RailsにおいてRSpecを利用する際に、共通の設定を書いておくファイル
  - 各テスト用ファイルでこちらのファイルを読み込むことで、共通の設定や、メソッドを適用できる。

- spec_helper.rb
  - rails_helper.rbと同じくRSpec用の共通の設定を書いておくファイル
  - しかし、こちらはRSpecをRails無しで利用する際に利用する。

##.rspecファイルに追記
表示の出力を**綺麗**にしてくれる一文です！
その分、出力数が多いです。

```
.rspecファイル内に追記


--format documentation
```


## 正常にRSpecが起動するか確認

```
ターミナル

% bundle exec rspec
```
```
No examples found.

Finished in 0.00077 seconds (files took 0.30404 seconds to load)
0 examples, 0 failures
```

と出力されれば、おkです！


###テスト編、続きます・・・（さて準備が完了っすよ・・・）


#さいごに
日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。
Unicorn の自動起動と etc/init.dの使い方

railsをawsに置く作業をしていた時にUnicornの自動起動も試しておきたいと思いやったこと、学習したことを書きます。

Unicornの自動起動をする際に、etc/init.dにスクリプトを置くとのことで置いてみた。
これって、プログラミング言語で言うと何に当たるんだろう？？と気になりつつも進めます。

まず、etc/init.d/にUnicornのfileを作成します。
作成した後には、chkconfig コマンドで自動起動をさせなきゃならない。

そもそも、initはlinuxが起動した時に呼ばれ実行する。その際、run levelが0~6まであり、2~5あたりのrun levelをchkconfig コマンドで変更する。ex)chkconfig on unicorn

変更すると、etc/rc0~6.dのfileにrun levelに応じたfileのシンボリックリンクが作成され、
実際に起動、読み込みするのは、etc/rc0.dだが、参照先としてetc/init.d/unicornが参照される。

そして、linixを起動すれば、etc/rcが動きunicornの中身も一緒に読み込まれて起動すると言う仕組みらしい。
以下は、etc/rc3.dをlsで見た際、S85unicornと言うfileができていることが確認できるかと。(シンボリックリンク付き)

```shell-session
[ec2-user@ip-00000 rc3.d]$ ls -la
合計 0
drwxr-xr-x  2 root root  63  4月 26 14:47 .
lrwxrwxrwx  1 root root  20  4月  7 01:51 K50netconsole -> ../init.d/netconsole
lrwxrwxrwx  1 root root  17  4月  7 01:51 S10network -> ../init.d/network
lrwxrwxrwx  1 root root  17  4月 26 14:47 S85unicorn -> ../init.d/unicorn

```

Unicornの一部

```shell
start()
{
  if [ -e $PID ]; then # もしPIDがあれば
    echo "$NAME already started+${PID}"
    exit 1
  fi
  echo "start $NAME" # もしPIDがなければ
  su - ${USER} -c "cd ${ROOT_DIR} && ${CMD}"
}

```


これは、調べるとすんなり出てくる。

```shell:/etc/init.d/unicorn
#!/bin/sh

#chkconfig:   - 00 00
#description: unicorn shell

USER="ec2-user"
NAME="Unicorn"
ENV="production"

ROOT_DIR="/var/www/application"

PID="${ROOT_DIR}/tmp/pids/unicorn.pid"
CONF="${ROOT_DIR}/config/unicorn.rb"
OPTIONS=""
CMD="RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c ${CONF} -E ${ENV} -D"

start()
{
  if [ -e $PID ]; then
    echo "$NAME already started+${PID}"
    exit 1
  fi
  echo "start $NAME"
  su - ${USER} -c "cd ${ROOT_DIR} && ${CMD}"
}

stop()
{
  if [ ! -e $PID ]; then
    echo "$NAME not started"
    exit 1
  fi
  echo "stop $NAME"
  kill -QUIT `cat ${PID}`
}

force_stop()
{
  if [ ! -e $PID ]; then
    echo "$NAME not started"
    exit 1
  fi
  echo "stop ${NAME}"
  echo ${PID}
  kill -INT `cat ${PID}`
}

reload()
{
  if [ ! -e $PID ]; then
    echo "$NAME not started"
    start
    exit 0
  fi
  echo "reload $NAME"
  ##kill -HUP `cat ${PID}`
  su - $USER -c "cd ${ROOT_DIR} && bundle exec unicorn_rails:reload"
  ## su $USER -lc "cd ${RAILS_ROOT}&& bundle exec rake unicorn_rails:reload"
}

restart()
{
  force_stop
  sleep 5
  start
}


case "$1" in
  start)
    start
    ;;
  stop)
    stop
    ;;
  force-stop)
    force_stop
    ;;
  reload)
    reload
    ;;
  restart)
    restart
    ;;
  *)
    echo "Syntax Error: release [start|stop|force-stop|reload|restart]"
    ;;
esac
```

自動起動の際につまづいたことは、etc/environmentに環境変数入れていて手動では動いていたけども、
自動起動する際には動かなかったこと。
それは、Rails自体の環境変数がないためでcredentials.ymlなどに環境変数をきちんと設定してあげるといいと思います。
自分は、これで三日潰しました。

また、init自体はroot 権限で動かすみたいなので注意が必要かもしれません。
#Vue で配列の要素を v-for に直接書いて展開する ( elements write directly as v-for  array )

```vue
<!-- https://vuejs.org/v2/guide/list.html -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
  <ul id="example">
    <!-- 配列要素を直接書く -->
    <li v-for="(value) in [1,2,3]">
      {{ value }}
    </li>
  </ul>

  <!-- 何も持たない Vue インスタンス -->
  <script>
    new Vue({
      el: '#example',
    })
  </script>
</body>
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3094











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
#Vue の v-for で form select option の 簡単なHTMLフォーム作る ( key value の配列を展開する )

```vue
<!-- https://vuejs.org/v2/guide/list.html -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>

  <div id="example">
    <form action="./">
      <select name="param">
        <option v-for="(value, key) in selectableItems" :value="value">
          {{ key }}
        </option>
        <input type="submit">
      </select>
    </form>
  </div>

  <script>
    new Vue({
      el: '#example',
      data: {
        selectableItems: {
          foo: "foo-value",
          bar: "bar-value"
        }
      }
    })
  </script>
</body>
```

例

![image](https://user-images.githubusercontent.com/13635059/80558707-41701700-8a16-11ea-93f1-9dd2ef99318f.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3093











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Comic reader ( onigoetz/comicsreader )

* ※ [Comic reader ( ubooquity ) - Qiita](https://qiita.com/tukiyo3/items/2942413e43bc51f17b15)のほうがより使い勝手が良い

* [onigoetz/comicsreader](https://hub.docker.com/r/onigoetz/comicsreader)

zip,rar対応

## 起動

```sh
docker run \
  --name=comics \
  --restart unless-stopped \
  -it -d \
  -v $(pwd):/comics \
  -p 8080:8080 \
  onigoetz/comicsreader
```

* http://localhost:8080 にアクセスして表示されること

## 認証 (nginx)

```sh:htpasswd
user-name:{PLAIN}pass-w@rd
```

```nginx:default.conf
server {
    listen       80;
    server_name  localhost;

    location / {
	auth_basic "Restricted";
	auth_basic_user_file /etc/nginx/htpasswd;
        proxy_pass http://192.168.xx.xx:8080;
    }

}
```

```sh
docker run -it --restart=always -d \
 --name nginx \
 -v $(pwd)/nginx/default.conf:/etc/nginx/conf.d/default.conf \
 -v $(pwd)/nginx/htpasswd:/etc/nginx/htpasswd \
 -p 80:80 \
 nginx
```

* http://localhost にアクセスして表示されること
macOS で Docker 内で動かした X11 アプリを表示させる

手順としては以下のような感じになります。

# 前準備
X11サーバ（[XQuarts](https://xquartz.org)）をセットアップ。

```
# XQuarts をインストール
brew cask install xquartz

# Dockerから接続するのに必要な設定
## 「環境設定→ セキュリティ→ 接続を認証」 をチェック
defaults write org.macosforge.xquartz.X11 no_auth -bool false
## 「環境設定→ セキュリティ→ ネットワーク・クライアントからの接続を許可する」 をチェック
defaults write org.macosforge.xquartz.X11 nolisten_tcp -bool false

# 必須じゃないけど個人的に有用な設定
## 「環境設定→ 入力→ OptionキーでAlt_LとAlt_Rを送信」 をチェック
defaults write org.macosforge.xquartz.X11 option_sends_alt -bool true
## XQuartz 起動時に勝手に xterm が起動しないようにする（デフォルト値は /opt/X11/bin/xterm）
defaults write org.macosforge.xquartz.X11 app_to_run ""
## xterm とか起動したときのデフォルトシェルを変更
defaults write org.macosforge.xquartz.X11 login_shell "/bin/bash"
## OpenGL が使えるようにする
defaults write org.macosforge.xquartz.X11 enable_iglx -bool true

# 確認方法
defaults read org.macosforge.xquartz.X11
```

以上で準備OK。今後は XQuarts を起動してさえあれば X11 が使えます。

あとよく使うなら XQuartz の自動起動をしておくなど。


# Docker で X11 アプリを実行してみる

実行時は `DISPLAY` 環境変数にホスト名を設定し、`~/.Xauthority` をボリュームマウントしてやればOKです。

```bash
docker run --rm -e DISPLAY="$(hostname):0" -v ~/.Xauthority:/root/.Xauthority alpine sh -c 'apk add --no-cache xeyes && xeyes'
```

とか、OpenGL を使ったデモなら↓こんな感じでとりあえず動きます。

```bash
docker run --rm -e DISPLAY="$(hostname):0" -v ~/.Xauthority:/root/.Xauthority alpine sh -c 'apk add --no-cache mesa-demos && glxgears'
```

# 注意点
自分がハマった点なのですが、XQuarts を初めて起動する以前に

```bash
docker run -v ~/.Xauthority:/root/.Xauthority 〜
```

を実行したことがあると、`~/.Xauthority` というパスに空ディレクトリが作成されてしまい、その後のX11アプリケーションの実行に支障が出ます。

もし以下のような状態になってしまっているようなら

```console
$ ls -ld ~/.Xauthority*
drwxr-xr-x 2 kawaz staff 64 2020-04-30 13:11:11.716 /Users/kawaz/.Xauthority
-rw------- 1 kawaz staff 49 2020-04-30 13:16:24.357 /Users/kawaz/.Xauthority-n
```

`rm -rf ~/.Xauthority*` してから XQuarts の再起動をしましょう。

意図してその状態にしているなら `docker run` の引数を `-v ~/.Xauthority-n:/root/.Xauthority` に変えてやれば動きます。まぁ意図している人には釈迦に説法ですが、意図してない人が大抵だろうから通常は一度削除しとく対処で良いと思います。


# 参考
- [Docker for Mac で X11 アプリケーションを動かす - Qiita](https://qiita.com/hoto17296/items/bdb2ab24bc32b6b7f360)

基本的には参考エントリと同じこと書いてますが `~/.Xauthority` の辺りでハマったので個人的整理も兼ねてこのエントリを書きました。
#Vue で key value のハッシュを v-for で展開する HTML の例 ( foreach key value array )

```vue

<!-- https://vuejs.org/v2/guide/list.html -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
  <ul id="example">
    <li v-for="(key, value) in someItems">
      {{ key }} - {{ value }}
    </li>
  </ul>

  <script>
    new Vue({
      el: '#example',
      data: {
        someItems: {
          message1: 'Foo',
          message2: 'Bar',
        }
      }
    })
  </script>
</body>
```

結果

![image](https://user-images.githubusercontent.com/13635059/80557707-c78a5e80-8a12-11ea-9f82-76502b93a78a.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3091











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
#Vue で data に配列を二個持って展開する簡単な例 ( foreach two kind array simple case )

- data は複数のデータを、それぞれ別の名前で持てる。好きな名前をつけられるので、それを v-for で使えば良い。


```vue
<!-- https://vuejs.org/v2/guide/list.html -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
  <div id="example">
    <ul>
      <li v-for="(value) in fooItems">
        {{ value }}
      </li>
    </ul>

    <ul>
      <li v-for="(value) in barItems">
        {{ value }}
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#example',
      data: {
        fooItems: [1,2,3],
        barItems: ["X", "Y", "Z"],
      }
    })
  </script>
</body>
```

結果

![image](https://user-images.githubusercontent.com/13635059/80558015-c7d72980-8a13-11ea-8f70-be59cc437c06.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3092











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
macOS CatalinaのUnityでオーディオファイルをインポートするとフリーズする

# 各種バージョン

|ソフトウェア|バージョン|
|---|---|
|macOS Catalina| 10.15.4 |
|Unity| 2018.2.20f1 |

# 概要

既存 Unity プロジェクトでアセットの依存関係を整理していると、「Inconsistency Detected」というエラーが出た。

```
Inconsistency Detected

An inconsistency has been detected in your project's AssetDatabase. This should never happen.
If possible, please report a bug, attaching your project and describing any asset-related actions you took leading up to this point.
Continuing may lead to strange behaviour, loss of data, and crashes. Rebuilding the AssetDatabase via the 'Reimport All' command is recommended.
```

どうやら何かのミスで AssetDatabase に不整合が生じてしまったらしい。
エラーダイアログによると「Reimport All」で解決するらしいので、早速 Asset -> Reimport All を実行した。

しかし、何時間待っても Importing Assets が完了しないので、プログレスバーを見に行くと `.mp3` のオーディオファイルのインポート処理で停止してしまっていた。該当のオーディオファイルを一旦削除して再度 Reimport All しても今度は別のオーディオファイルでフリーズしてしまう...。(mp3, wav, ogg でも同様の問題が発生)

これは想像よりも面倒な問題なのでは無いかと思ったので、調査した結果をまとめておく。

# 原因

[Installing Unity on macOS Catalina - Unity Forum](https://forum.unity.com/threads/installing-unity-on-macos-catalina.689089/#post-4685435) に答えがあった。

> The Wav file import issue with 2017.4 LTS, we have identified the issue as being an issue with an FMOD Tool being 32bit which is not supported in MacOS 10.15. We will release a fix for 2017.4 LTS but we will not be releasing an update for 2018.1/2018.2 as these are unsupported releases. The issue doesn't manifest in 2018.3+ and we will update the documentations etc.. to represent the support matrix below.

古いバージョンの Unity ではオーディオファイルのインポートで32ビットのFMODツール(サウンドエフェクトエンジン)を利用していたが、これが Catalina ではサポート対象外になってしまった事が原因な模様だった。よって、Catalina に対応している Unity バージョンへアップグレードする事で本問題は解決可能である。

# 解決策

Catalina は下記バージョンの Unity しか対応していないので、これを使えば解決。

- 2017.4 LTS
- 2018.3 / LTS
- 2019.1+

弊社では 2018.2.20f1 → 2018.4.22f1 にアップグレードして対応した。
(2019.1+ へのアップグレードはプロジェクトが正常に動作しなくなったので一時断念)

なお、アップグレードによるコードの変更等の影響は(今のところ)特に無かった。

# 最後に

元々 macOS 10.14 を利用して Unity 開発をしており、途中で OS のアップグレードを行った。
この時点ではすでにオーディオファイルはインポート済みなので本事象は発生してなく、Asset の再インポートを行った時に初めて問題が浮き彫りになったため、Catalina が原因だとは全く想像がつかなかった。

そのため、プロジェクトの `git clone` やり直しや、UnityEditor の再インストール等で試行錯誤をしてしまったため、問題の解決に多くの時間が掛かってしまった。

もしかしたら自分と同じように苦しんでいる人がいると思うので、この記事が誰かの助けになれば幸いである。
Visual studio 2017 ユーザマクロの値の変更



Visual studio 2017を使用しています。

プロジェクトファイルでユーザマクロを追加して値を設定したのですが、

これをプロパティダイアログで値を変更する方法を教えて頂けないでしょうか？
https://docs.microsoft.com/ja-jp/cpp/build/working-with-project-properties?view=vs-2019
を見て、「編集」→ 「マクロ｝の操作で、
ユーザマクロの一覧とその値を、プロパティダイアログで参照する方法は分かったのですが、

その値を変更する方法がが分かりません。

どなたかご教授下さい。

編集→マクロと遷移した画面を以下に示します。
イメージ説明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625572/e98d4cb3-0175-2941-edf1-ad25b4ee4d55.png)

画像の説明をここに入力

上図で選択状態になっているのが、新しく追加したマクロです。
このマクロの値を変えたいのです。
【Rails】gemのアンインストール・バージョン変更

# Gemのアンインストール方法
バージョンを指定することも可。

```
$ bundle exec gem uninstall gem名 -v 'バージョン名'
```
後は、Gemfileから直接削除し、`bundle install`すればok。
Gemfile.lockを確認すると、消えているハズ。

# Gemのバージョン変更
### バージョンダウンの場合
アンインストール後に、バージョンを指定してインストールする。

### バージョンアップの場合
※ gem名を指定しなければ、Gemfileに記載の全てに対して、最新バージョンにアップデートされる。

```
$ gem update gem名
```

# インストール済みのGemの確認
```
$ gem list
```
# インストール済みのGemのバージョン確認

```
$ gem名 -v
```
Linear Models (線形モデル)について

#Linear Models (線形モデル)について

[scikit-learnの公式サイト](https://scikit-learn.org/stable/modules/linear_model.html)を参考に線形モデルについてまとめる。

##Ordinary Least Squares¶
最小２乗回帰（OLS：Ordinary Least Squares regression）


##Ridge regression and classification¶

##Lasso¶

##Multi-task Lasso

##Elastic-Net

##Multi-task Elastic-Net

##Least Angle Regression

##LARS Lasso

##Orthogonal Matching Pursuit (OMP)

##Bayesian Regression

##Logistic regression

##Stochastic Gradient Descent - SGD

##Perceptron

##Passive Aggressive Algorithms

##Robustness regression: outliers and modeling errors

##Polynomial regression: extending linear models with basis functions
初心者の初心者による初心者のための者による初心者のためのウェブサイト作り

#はじめに
今回からはHTMLとCSSの勉強を踏まえウェブサイトを作っていきたいと思います。プログラミング言語の中では比較定期簡単らしいのでArduinoプログラムの内容よりわかりやすいと思います。

本題に入る前にヘッド部のコードを記述しておきましょう。titleやhrefの中身は自分に合ったものを設定しておいてください。

~~~
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>
            ウェブサイト作成
        </title>
        <link rel="stylesheet" href="">
    </head>
</html>
~~~

##ヘッダーの作成
まずは、ウェブサイトのヘッダーから作っていきたいと思います。今回作成するヘッダーはスクロールしても常に画面の上部に表示され続けるものです。タイトル、サブタイトル、お問い合わせフォームへと移るボタンの設置をHTMLとCSSの順に分けて行っていきます。

###HTMLのコーディング

ではあらかじめ記述しておいたHTMLのコードに以下のbody部を追記していきます。

~~~
　　<body>
        <div class="header">
            <a href="">
                <img src="http://putiya.com/img/title/animal/felet/am_ft_2015_01_r8_c1.jpg" height="70" alt="title" class="title">
            </a>
            <div class="subtitle">
                サブタイトル
            </div>
            <button type="button" class="btn-requsest">
                お問い合わせはこちら
                <a href="#request-form"></a>
            </button>
        </div>
    </body>
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552605/350460be-0604-82f7-91ac-f637ee50d31c.png)

sabtitleクラスとbtn-requestクラスはheaderクラスを親要素にもつ子要素へとすることでCSSで編集する際に個別に設定する必要がなくなります。
今回の内容ではお問い合わせフォームの作成までいかないので <a href… の行自体は現時点で何の役割も持ちません。
HTMLを記述しただけなので上から並べられた形となっているので、次のCSSでデザインを変更していきます。

###CSSのコーディング
次にCSSの記述を行っていきます。

~~~
.header
{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 70px;
    background-color: white;
    z-index: 10;
}
~~~

まず、headerクラスを編集していきます。top、right、leftを0にしてpositionにfixedを設定することで画面上部に固定されたヘッダーの土台が出来上がります。

ヘッダーの固定ができたのでタイトルのイラストとサブタイトルの位置を指定していきます。

~~~
.header a img
{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    padding: 0;
    margin: 0;
}

.subtitle
{
    position: absolute;
    left: 200px;
    bottom: 5px;
    padding: 0;
    margin: 0;
    color: black;
}
~~~

タイトルイラストをtop: 50%に設定するとタイトルイラストの上部の辺が上から50％の位置に合わせられるためtransform: transulate(0,-50%)を加えます。こちらは、50％の位置からタイトルイラストの50％分上にずらすことができます。そのため、ヘッダー内の中心にタイトルイラストを設置できます。

次にお問い合わせフォームへと移るボタンを設置していきます。

~~~
.header button
{
    position: absolute;
    top: 50%;
    right: 2.5%;
    transform: translate(0,-50%);
    padding: 1.5% 5%;
    margin: 0;
    color: white;
    background-color: tomato;
    border: none;
    border-radius: 30px;
}
~~~

こちらもtransform: transulate(0,-50%)でヘッダーの中心に配置します。
border: none；を加えることで周囲の余計な線を消すことができ、border-radius: 30px;　によってかわいらしく丸みの持つボタンにできます。

最後に気持ち程度のオリジナリティを出すためにお問い合わせフォームボタンの上にカーソルが乗ったときに色が変わるようにしてみます。

~~~
.header button:hover
{
    background-color: orangered;
}
~~~

この数行だけなので簡単ですね！

![2020-04-24 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552605/98f0399b-736b-11ef-d73c-ebdea4245efb.png)

**完成です！**
※わかりやすいように背景の色を変えています

確認はしづらいですが画面の上部に固定されたヘッダーができました。次回以降はこの続きから記述していこうと思います。
問題を解決するための段取り


# 前提
> 要求仕様で分からないことを問題化してから、わからない原因を分析するためにはの次章へ読み進める

# 確認事項	
	
## 「原因分析」のための準備
### 1. 静的構造の明示させる
### 2. 動的構造の明示させる

> ①「原因分析」に該当
    「問題」が起きるパターンを明らかにする

	
> ②「解決方針立案」及び「具体化」に該当
	その状況を解消するために、
    どのように静的・動的構造を組み替えるかを考える

## 原因分析の前には、準備が必要	
	
	1. 問題分析
	
	2. 静的構造の明示
	
	3. 動的構造の明示
	
	4. 原因分析

> 2と3が抜けている人が多い
	
## 静的構造の明示や動的構造の明示する方法	
```vim	
	例
	鉄道のダイヤグラム
	
	「鉄道線路上の各駅間の距離」を静的構造として、
	その上に「そこを走る列車の動き」を動的構造とする
	
	静的や動的構造を、問題の性質にもっとも適した形で
	表現すると、極めて短時間で「問題」を解決できることがある。
	
	
	・思いつかないときは、箇条書きで整理
	⇒箇条書きで満足してはいけない
	
```
	
## まとめ	
```vim
	■ 全体像を踏まえて考えないと、思考は迷路になりやすい
	
	■ 複数の要素が入り混じって関連してるシステムの全体像を把握するためには図解が必須
	
	■ 図解のコツは、元ネタ資料の読解力、それを向上させるには「ラベリング」が有効
	    文章だけでは、10時間の理解時間が必要なのに対して、図解中心というだけで1時間で理解可能
	★ 図解するために必要なもの
	     1. 対象物の理解
	     2. 1の上で表現の構築
	    複雑な情報をまず理解して、補正し、説明しやすいように表現することが大切
	
	※ 例
	・チーム内で記載粒度にバラつきが生じる
	・打合せで意見が合わない
	・作業上の意識合わせに齟齬ができてしまう
```



> なぜなぜで原因の系統立てた垂直の掘り下げによる洗い出すをすることで分析が整理される

> チームに水平展開をする場合は、一次分析結果や二次分析結果を展開させて二次災害を事前に防ぐ

![Screenshot_20200516_080306.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57249/991f8aa0-b343-368b-0c59-04e342a451f6.jpeg)
TouchDesignerで心理学実験システム

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70810/eac323bc-8882-923c-9316-b90be17c69e2.png)

## はじめに
心理学実験、心理物理実験、認知実験やユーザースタディなどを行う研究活動において、あるタスクを所定の条件を変えながら繰り返し行い、実験参加者の行動データを記録して解析するような実験プログラムが必要になります。

そのプログラムを何で実装するか？は切実な問題です。既にチームが所属する機関で共通して使われている実装環境を用いる事が多いとは思いますし、実験プログラミング作成のためのすばらしい環境やフレームワークは数多くあります。（psychoPy, Psychtoolbox, OpenSesame..」）

実験に用いたい機材と実験プログラムを統合したり、プログラムの試作と修正を最速で進めたいとき、TouchDesignerで実験プログラム（システム）を実装したら今の所良かったので、現時点でいくつかまとめてみたいと思います。すでに、心理実験制作のデファクトスタンダードともいえるpsychoPyに敬意を込めて、勝手に**psychoTD**と名付けています。

## TouchDesignerとは

https://derivative.ca/

もともとは、実験プログラム実装用ではありませんが、1. リアルタイムグラフィック、インタラクティブインスタレーションなど、映像や音声のための高い時間制御要件に対応し、2. グラフィックレンダリング、信号処理、ネットワーク、外部機器制御（VRやKinectセンサ等も）への対応も早く、3. 内部においてpythonスクリプトの実行やC++のカスタムモジュールを実装することも可能であり高い拡張性があります。4. そして（慣れると）ノートベースでのプログラム作成の恩恵により試行錯誤が爆速で可能になります。この4点が大変魅力であり、実験環境構築としては未だ未開拓ではあるとは思いますが、大きなポテンシャルを持っていると思います。

> また、使用できる映像サイズが1280pixまでの制限や、ごく一部の機能制限を除いてはTouchDesignerは無料で使用ですることができます。その点でも、大変ありがたいです。

TouchDesigner自体の入門は、多くの素晴らしい講義資料・チュートリアルがあるので、そちらを見てからこの記事を見ると良いかもしれません。なので、その点では、この記事はTouchDesignerを用いて何故か心理実験等を作りたくなった場合のニッチにな資料になります。

http://satoruhiga.com/TDWS2019/

https://note.com/toyoshimorioka/m/m29f2bdbc8dbb

https://www.youtube.com/channel/UCKwb_ZPHs-DEzK9TdVl3_Ew


## TouchDesignerで心理学実験システムシリーズ

今シリーズ記事では、分かりやすい視覚刺激課題を実際にTouchDesignerで組むのと、その内容をベースにした筆者が作成したモジュールの紹介をします。
> 本記事は以前作成した記事のアップデート・拡充版になります。
https://qiita.com/shks/items/6ebdbbfdc64d8ae20897


結果、Qiitaではなく、noteに書いてしまったので、5回分を下記にまとめて記載することにしました。



#### TouchDesignerで心理学実験システム.001：画面遷移を作る
https://note.com/shks/n/nda90fdc68b2e

#### TouchDesignerで心理学実験システム.002：実験条件からの視覚刺激生成
https://note.com/shks/n/n51bc30024f87

#### TouchDesignerで心理学実験システム.003：条件を変えたタスクの繰り返し
https://note.com/shks/n/ndaaccacdef51

#### TouchDesignerで心理学実験システム.004：反応を取得する
https://note.com/shks/n/nc34c78b55858

####TouchDesignerで心理学実験システム.005：実験結果を記録する
https://note.com/shks/n/n2aa8ee6f42e8

TouchDesignerで心理学実験システムシリーズは一旦これで終わりますが、気が向いたら他のトピックについても更新、追加したいと思います。
ROS2 What is ?

ROS2の世界観を勉強するためのメモです．

# はじめに
ROS2の目的と用途について述べる．
## ROS2の目的
- オープンソースでロボットプロジェクトを簡単に行うことができ，開発した内容を共有することが目的．
- そのために，Robot Operating System（ROS）は，ロボットアプリケーションを構築するためのソフトウェアライブラリとツールのセットを用意している．
- つまり，ドライバーから最先端のアルゴリズム，強力な開発者ツールを備えており，ロボットプロジェクトに必要なものがすべてオープンソースで揃っている．  

## ROS2の用途
- ROSが提供するユースケースとは違った，別のユースケースに対応することがROS2の用途である．
- つまり，以下のような用途である．
    - **複数のロボットのチーム**：
        - 今日のROSを使用してマルチロボットシステムを構築することは可能ですが、標準的なアプローチはなく、それらはすべて、ROSのシングルマスター構造の上にあるハックのようなものです。
    - **小さな組み込みプラットフォーム**：
        - 「ベアメタル」マイクロコントローラーを含む小さなコンピューターを、デバイスドライバーによってROSから分離するのではなく、ROS環境の第一級の参加者にしたいと考えています。
    - **リアルタイムシステム**：
        - プロセス間通信やマシン間通信（適切なオペレーティングシステムやハードウェアのサポートが前提）を含め、リアルタイム制御をROSで直接サポートしたいと考えています。
    - **非理想的なネットワーク**：
        - 低品質のWiFiから地上から宇宙への通信リンクまで、損失や遅延が原因でネットワーク接続が低下した場合でも、ROSが可能な限り動作することを望みます。
    - **実稼働環境**：
        - ROSが引き続き研究室で選択されるプラットフォームであることが重要ですが、ROSベースのラボプロトタイプが実際のアプリケーションでの使用に適したROSベースの製品に確実に進化できるようにしたいと考えています。
    - **システムを構築および構築するための所定のパターン**：
        - ROSの特徴である根本的な柔軟性を維持する一方で、ライフサイクル管理やデプロイメントの静的構成などの機能のための明確なパターンとサポートツールを提供したいと考えています。

# ROS2の世界観

- (現在の勉強した限りの認識だと)**ROS graph**がすべてです．
- ROS graphは，一度に一緒にデータを処理するROS2の要素のネットワーク．
- つまりは，すべての実行可能ファイルとそれらの接続が含まれた視覚的マップのことです．
- だから，ここではROS graphの登場人物を紹介します．

## ROS graph上の主な登場人物

- graphなので基本的には，point(vertex)役とedge役の2つ．
- point役は，**node**．
- edge役は通信機能のことで，主に**topic**.その他にも，**service**と**action**がある．

### node

- ROS2のサービスとして，publisher/subscriber，server/client，parameterなどの機能を提供するもの．
- 単一のモジュールの目的であり，複数のnodeを複合的に組み合わせて協調的に動作させることでロボットシステムを作る．
- ROS2ではnodeをクラス化することで，1つのターゲットで複数のノードの実行順を制御可能．

### topic

- nodeがメッセージを交換するための通信機能であり，ROSグラフの重要な要素．
- トピックはデータがノード間，つまりシステムの異なる部分間を移動するための重要な方法のひとつ．
    - この他の通信機能として，`service`と`action`の2つがある．
- 周期的なデータ通信に向いている．

### service

- ROSグラフ上のnodeのもう1つの通信方法です．
- serviceは，topicのpublisher/subscriberモデルではなく，コールアンドレスポンスモデルに基づいています．
- topicを使用すると，nodeはデータストリームをsubscribeして継続的な更新を取得できますが，serviceは，clientによって明示的に呼び出された場合にのみデータを提供します．
- serviceがnodeに情報を渡すのはそのnodeが具体的に要求した場合のみであり，（連続ストリームではなく）要求ごとに1回だけ行います．
- 通常は継続的な呼び出しにサービスを使用したくありません．継続的な情報伝達にはtopicやactionがより適しています．

### action

- 長時間実行されるタスクを対象としたROS2の通信タイプの1つ．
- これらは目標，結果，フィードバックの3つの部分で構成されています．
- actionはtopicとserviceに基づいて構築されています.
- それらの機能はserviceに似ていますが，actionはプリエンプティブです（実行中にキャンセルできます）．
- また，単一の応答を返すserviceとは対照的に，安定したフィードバックを提供します．
- publisher/subscriberモデルと同様のclient/serverモデルを使用します．
-「action_client」nodeは「action_server」nodeに目標を送信し、「action_server」nodeは目標を確認して、フィードバックと結果のストリームを返します。

## その他の登場人物

- nodeの内部状態を記述した**parameter**がある．
- また，nodeとtopicなどの登場人物で構成された集合に特別な名前がついたものとして，target，library，package，projectがある．開発規模が大きくなると，重要性が上がる．

### parameter

- nodeの構成値です．parameterはnode設定と考えることができます．
- nodeは，整数・浮動小数点数・ブール値・文字列・リストとしてparameterを格納できます．
- ROS2では，各nodeは独自のparameterを維持します．
- すべてのparameterは動的に再構成可能で，`ROS2 service`から構築される．

### target

- クラス化したnodeを1つ以上組み込み，実行可能にしたもの．

### library

- nodeを共有ライブラリ化したもの．

### package

- 関係があるターゲットとライブラリで構成された集合．

### project

- 関係があるターゲットとライブラリで構成された集合．

### workspace

- ライブラリで構成された集合であり，トップディレクトリ．


# 参考サイト
- https://index.ros.org/doc/ros2/
- https://qiita.com/NeK/items/cd88fa49747f2a8b8392
Node - ES6 imports cannot find module

# Problem

```javascript:index.js
import HttpConnect from './src/Library/Connect/HttpConnect';

...
...
...
```

```
node --experimental-modules index.js
```

```
$ node --experimental-modules index.js
internal/modules/run_main.js:54
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '\home\johnny\test\src\Library\Connect\HttpConnect' imported from \home\johnny\test\index.js
    at finalizeResolution (internal/modules/esm/resolve.js:272:11)
    at moduleResolve (internal/modules/esm/resolve.js:652:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:695:13)
    at Loader.resolve (internal/modules/esm/loader.js:97:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:42:40)
    at link (internal/modules/esm/module_job.js:41:36) {
  code: 'ERR_MODULE_NOT_FOUND'
```

# Solution

```javascript:index.js
import HttpConnect from './src/Library/Connect/HttpConnect.js'; <- including the file extension

...
...
...
```

https://stackoverflow.com/questions/60059121/nodejs-es6-imports-cannot-find-module
Linux sshポートフォワーディング（トンネル）設定

Linuxサーバに掲題の内容を設定する機会があり、
なんだかんだ時間がかかってしまったためメモ。
そして誰かの役に立ってくれればと思い、書いてみました。

#やりたかったこと
・Linuxサーバ（Local)にトンネル（local:50000）を設置
・Linuxサーバ（踏み台）からRDSへ接続
・とあるサービス（Linuxサーバ（Local)で動いている)でトンネルを使用してRDSへ接続
・なので自分が接続するためではなく、あくまでなんかのサービス様の利用目的
#各情報
####Localサーバ
・port 50000をRDSへsshポートフォワーディング
####踏み台サーバ
ホスト　：「999.999.999.999」
ユーザ名：「fumidai」
証明書　：「/etc/ssh/fumidai.pem」
####RDS
ホスト　：「RDS.com」
ポート　：「3306」
#結局いきついたコマンド
上記の各情報を踏まえて以下になりました。
「ssh -o ServerAliveInterval=30 -f -N -L 50000:RDS.com:3306 fumidai@999.999.999.999 -i /etc/ssh/fumidai.pem」

####簡単なコマンドの説明
#####オプション「-o」
「-o」オプションを設定することで、ssh_configに記載されているパラメータを設定できるみたい。
「-o XXXXX=30」とか。
#####オプション「-f -N」
ポートフォワーディング（トンネル）のプロセスをバックグラウンドにしたい場合に必要。
二つじゃないとだめ、「-f」だけだと無理。
#####オプション「-L」
Localサーバのlocalポート指定時に使用。
「-R」の場合リモートみたい。詳しくは調べてない。
#####オプション「-i」
証明書の参照先。

#コマンドにいきつくまで大変だったこと。
基本的なことだけど、出たとこ勝負でやるところがあるから何度もこけまくった。
####証明書の権限
sshは権限に厳しいです。ちゃんと設定しないと接続してくれません。
参考サイト様：(https://note.mokuzine.net/ssh-permission-denied/)
####プロセスが勝手に落ちる
どこのサイト様を見ても、バックグラウンドでトンネル設定を入れて、削除する場合は
プロセスを見つけてkillするとある。
しかし勝手に落ちられてしまうのは勘弁したい。

「-f -N」で動かした以上、バックグラウンドで動いてくれる。
netstatコマンドでも確認したが、ちゃんとListenの状態になっている。
しかし、大体2時間15分後くらいに落ちる。
しかも、プロセス起動して1時間後くらい(Listenのまま放置）に、サービス側に通信させると、
だいぶ放置しちゃったからなのか、ちゃんと通信が行われない。途中で失敗する。
そりゃ、通信も何も無しなので、なんか起きてるんだろうなと思ってました。

詳しく調べてみると、karnel？の仕様か何かで、通信が無い場合は、切れるみたい。
実際にプロセスを実行したターミナルにはプロセスが落ちたタイミングで「Write failed: Broken pipe」
って表示されてた。

参考サイト様：(https://www.riscascape.net/archives/9570)
　　　　　　：(https://alpha-netzilla.blogspot.com/2011/12/tcp-keepalive.html)
　　　　　　：(https://qiita.com/kuni-nakaji/items/c07004c7d9e5bb683bc2)

####プロセスをどうにか生き永らえさせる
sshには「ServerAliveInterval」等があり、指定された周期・回数で通信を行ってくれる。
これで勝手に死ぬことはなくなりました。
1時間後くらい(Listenのまま放置）してもちゃんと通信も出来ている。
sshdの設定ではこのあたりの設定はデフォルトで「0」動きません。

参考サイト様：(https://qiita.com/ysk24ok/items/2f4ced5edf306fdd9dfb)
　　　　　　：(http://www.koganemaru.co.jp/cgi-bin/mroff.cgi?sect=5&cmd=&lc=1&subdir=man&dir=jpman-11.2.2%2Fman&subdir=man&man=ssh_config)
　　　　　　：(https://tech.sv-cat.net/entry/2018/08/21/190127)

#今後の課題
といってもやはりプロセスは1回起こせばいいってものじゃない。
多分なんかで落ちてしまう場合があるはず。
通信先の踏み台やRDSが落ちたりしたら、間違いなくプロセスは落ちちゃう。
なので不慮の事故を想定して、再度プロセスを起動する仕組みが必要。
crondで監視して回す予定。systemdでサービス化も考えたけれども、
結局シェル頼みになりそうだから、crondでよさそう。

他にもっと良い手段等ございましたら、ご享受いただけると幸いです。
Arduinoでラジコンサーボの応答性を確認する

#概要
Arduinoと位置フィードバック付きのラジコンサーボを使い、サーボの応答性を確認してみます。


#用意するもの
|No.|項目|型式|備考|
|:-:|:--|:--|:--|
|1|マイコン|[Arduino Uno R3](https://www.switch-science.com/catalog/789/)|-|
|2|ラジコンサーボ|[FS5115M-FP](https://www.switch-science.com/catalog/5743/)|位置フィードバック付き|
|3|電池ボックス|問わず|単三4本用|
|3|電池|単三×4本|サーボ電源用|

位置フィードバック付きサーボの外観を以下に示します。通常のラジコンサーボから出ているコネクタはグランド、電源、信号入力の３つですが、それに加えて回転角度をアナログで取得できる出力(緑の線)がついています。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626968/063af063-5931-bb91-6a99-cdfef0ba8999.jpeg">


#配線図
配線図を以下に示します。
![servoTestSketch_ブレッドボード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626968/e2409547-6b40-aa7f-36a0-0aef3e817b13.png)


#プログラム
loop部分の大きな流れは下記の通りです。ラジコンサーボの制御はArduino IDEのサンプルプログラムを参考にしました。

①ラジコンサーボに対し目標角度を出力
②現在角度を取得
③目標角度、現在角度などのデータをPCに送信
④制御周期が50msになるようにディレイを調整

```ruby:servoTest.ino
#include <Servo.h>

//サンプリング周期関連
const int SMP_TIME = 50;
unsigned long startTime = 0;
unsigned long endTime = 0;
int dlyTime = 0;
int indx = 0;

//サーボ関連
Servo myservo;  // create servo object to control a servo
// twelve servo objects can be created on most boards

//目標角度
const int PIN_X = 15;//アナログ入力ピンのA1をデジタル出力として使う
int r = 0;//目標角度(deg)

//現在角度
const int PIN_Y = 0;//アナログ入力A0で現在角度を取得
const int AIN_DEG_000 = 609;//角度0のときのアナログ入力値
const int AIN_DEG_180 = 76;//角度180のときのアナログ入力値
const float ANLG2DEG = 180 / (float)(AIN_DEG_180 - AIN_DEG_000);//アナログ入力値から角度を求める定数

int ya = 0;//現在角度(アナログ入力)
float y = 0;//現在角度

void setup() {

  //シリアルポートの通信設定
  Serial.begin(9600);

  //サーボで使用するピンの設定
  myservo.attach(15);

  //サーボ位置の初期化
  myservo.write(0);//0deg
  delay(2000);//2s待つ
  
  Serial.println("");
  Serial.println("--------START--------");
}

void loop() {

  startTime = millis();//現在時刻を取得

  if(indx < 10){
    //はじめの10サンプルは目標位置0deg
    r = 0;
  }else{
    r = 180;
  }

  //①ラジコンサーボに対し目標角度を出力
  myservo.write(r);//目標値は常に180deg

  //②現在角度を取得
  ya = analogRead(PIN_Y);//現在角度を取得する
  y = (float)(ya - AIN_DEG_000) * ANLG2DEG;//角度に変換

  //③目標角度、現在角度などのデータをPCに送信
  Serial.print(indx);
  Serial.print(",");  
  Serial.print(startTime);//現在時刻
  Serial.print(",");  
  Serial.print(r);//目標角度
  Serial.print(",");
  Serial.print(y);//現在角度
  Serial.print(",");
  Serial.println(ya);//現在角度(アナログ入力そのまま)
  
  //インデックス
  indx++;
  //ここまでの処理で約17ms

  //④制御周期が50msになるようにディレイを調整
  endTime = millis();//現在時刻を取得
  dlyTime = SMP_TIME - (endTime - startTime);  
  delay(dlyTime);

}
```

Arduinoから出力されるデータはArduino IDEのシリアルモニタなどを利用して受信します。受信したデータは適当な範囲までコピーし、テキストエディタなどに貼り付けてデータファイルとして保存しておきます。そのデータファイルをグラフ描画ソフトなどで読み込み、次の「結果」で示すようなグラフを描画します。

#結果
無負荷状態で目標角度を0-180degにステップ状に変化させた場合の応答を以下に示します。約800ms(16サンプル)で目標角度に到達していることがわかります。
![servoTest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626968/96f7a396-fcbe-ed1f-efe1-ce3129076f77.png)

#今後
- ラジコンサーボの周波数応答特性を測定してみたい
- ラジコンサーボで位置制御ベースの力制御をしてみたい

#免責注意事項
この記事に従って発生した如何なる損害も筆者は負うことができません。
【雑談GCP-1】GCPの受験勉強について - Associate Cloud Engineer

#背景

今年(2020)から、仕事でGCPを触れるようになったため、GCPの機能をはやくつかまないと自分のためにならないと感じました。

５月にアソシエイト資格(Cloud Associate Engineer)を取ろうとしてますが、GCPの初心者として、何の本を読むか、どれくらいの時間を勉強したら合格できるかは、webの情報をすでにいっぱいあると思われます。

ここでは、それらの勉強方法とは異なり、個人的な勉強手順、どういう心境で勉強しているのかを記録していきたいです。そう！本人はアソシエイトの資格まだ取れてないので、「勉強方法」とは言えないですね。参考になればと思われます。

#はじめに
本記事は、以下の二点について述べていきます。

- 個人的な勉強手順
- 勉強している心境

本人のプロフィールでも書いてあるように、JavaでのWeb開発を2年間してました。前職のお話しになりましたが、GCPに関するものは、元同僚のAさんから口にする「bigquery」、「app engine」などの言葉でした。転職するきっかけなどを端折りますが、いきなり何も知らないGCPを本番に触ると、誰でもドッキリするでしょうね。

##個人的な勉強手順

###読書
入社説明会や会社の先輩からのアドバイスなど、すすめられた本をまず3冊くらい読みました。正直に言うと、GCPってどういうものかをイメージがつきました。

###実践
QwiklabsやCouseraで本番のGCPを触れるので、ぜひ試してみてください。Couseraのコースは、英語でのビデオは大量にあるので、しっかり時間を作らなければ、短時間内(平日の2,3時間ほどで一週間)で全部見終わらせないと思います。

###その他
Udemyにもさまさまコースがありますが、セールス時に、お気に入りのコースをご購入いただければいいと思いますね。

##勉強している心境

###読書
すすめられた本を読んで、資格試験を目指してる方には参考になれないと個人的な考えです。なぜかというと、模擬試験を受けてみたらわかると思われます。それでは、本の話はここまでにさせてください。

###実践
QwiklabsやCouseraでGCPを触ってみると、あれあれ？って私はよく心の中で叫んでました。聞いたこともない言葉、ほとんど英語での講座ビデオ...英語が下手な方にはメンタルケアが必要になると思いましたね。それにプラス在宅勤務になっている時期、高効率なコミュニケーションはできなく、時間がかかってしまうため、一層心が折れそうですね。

###その他
Udemyの模擬試験問題を受験日まで繰り返し練習していこうとしています。

#最後に

うちの会社はGoogleのパートナー会社なので、たまにはBootcampなどのイベントも誘われたことがあるのです。それらのイベントも含めて、慌てずに受験準備ができると思われました。

もっと効率的な勉強方法あるよ！や、日本語の表現がおかしくない？などを思われる方がいらっしゃると思いますが、ご教示いただけますと幸いです。

##実践用およびその他の練習資料

以下の資料は私が使われている一部のものですが、ご参考にいただければと思います。

###Udemy
- [GCP Google Cloud Associate Cloud Engineer Practice Test 2020](https://www.udemy.com/course/gcp-ace-practice-tests-latest/)
- [Google Certified Associate Cloud Engineer Certification](https://www.udemy.com/course/google-certified-associate-cloud-engineer/?aEightID=s00000016735001&a8=Qj6APjFZneIi6ek1KYIeuEhHmTg3I68THYbdFelUBdsZne6hOe6eOHChueRqCq8budrHUf6.uj6Ats00000016735001)

###Qwiklabs
- [Google Cloud Essentials](https://www.qwiklabs.com/quests/23?catalog_rank=%7B%22rank%22%3A1%2C%22num_filters%22%3A1%2C%22has_search%22%3Afalse%7D)
- [Baseline: Infrastructure](https://www.qwiklabs.com/quests/33?catalog_rank=%7B%22rank%22%3A2%2C%22num_filters%22%3A1%2C%22has_search%22%3Afalse%7D)
- [Google Cloud Fundamentals: Core Infrastructure](https://www.qwiklabs.com/courses/870?catalog_rank=%7B%22rank%22%3A2%2C%22num_filters%22%3A0%2C%22has_search%22%3Atrue%7D&search_id=5014761)
- [Cloud Architecture](https://www.qwiklabs.com/quests/24)

###Cousera
-[Preparing for the Google Cloud Associate Cloud Engineer Exam](https://ja.coursera.org/learn/preparing-cloud-associate-cloud-engineer-exam)
-[Cloud Engineering with Google Cloud](https://ja.coursera.org/professional-certificates/cloud-engineering-gcp)
WebStormのチュートリアル機能「IDE Features Trainer」が最高だった件

俺はこういうのを求めていたんだ

# 概要
WebStormのバージョンを2020.1にアップデートしたら、おすすめプラグインの一覧に
[IDE Features Trainer](https://plugins.jetbrains.com/plugin/8554-ide-features-trainer)
が出てきたので試しに入れてみたら神機能だった。

# 何ができるか
WebStormの便利な使い方をStep by Step形式で教えてくれる。

![スクリーンショット 2020-04-30 12.09.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27623/2531c55a-8acc-e7db-51ab-b51ff34f423c.png)

左側に書かれたチュートリアルの通りに進めると、WebStormが提供している便利機能を疑似体験できる。
実際にコードを書きながら学べるので、便利さの身にしみ具合がハンパない。

4月30日現在、以下のチュートリアルが提供されている

* 基本機能 （Editor Basics）
* デバッグのやり方 （WebStorm Debugger 101）
* テストの実行 （Getting Started with Testing）

特に「基本機能」はかなり知らない機能があってビビった。

# 注意点
`WebStorm Debugger 101` > `Before Debugging: Run/Debug Configurations`
の章だけ、提示されたショートカットキー`^⇧R`を押しても先に進めなかった。

僕は一旦無視して先に進みました。（先に進めた人は教えてほしい）

# 終わりに
今後もどんどん新しいチュートリアルを増やしてほしい。

みんなもWebStorm使おうな（ニッコリ）
FragmentでActionBarのTitleを設定する方法

# FragmentでActionBarのTitleを設定する方法
## すぐ忘れるのでメモ。
Navigationでもっとかっこよく出来るはずだが。。

```
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        (activity as AppCompatActivity).supportActionBar?.title = "タイトル"
    }
Goで作成したc-sharedなライブラリでexportしたはずの関数が見つからない

## 事象

node-ffiで呼び出そうとするとこうなる。

```
Error: Dynamic Symbol Retrieval Error: Win32 error 127
```

## 原因

exportの先頭にスペースを入れてはいけない。

```
// OK
//export FuncName

// NG
// export FuncName
```
HTML5のcanvas要素を使って図形を描く

# 始まる前に
今回はHTML5のcanvasを使って簡単な図形を描いてみたいと思います。

# 描画する図形
![f81fd2e4c52864042852c112ce927ae2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232062/a6150718-8a0e-9c6a-aa9e-69455351bee8.png)

# ソースコード
```html:index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        var ctx;
        function init() {
            var canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
 
            //コンテキストの設定
            ctx.strokeStyle = "#FF0000";
            ctx.fillStyle = "#00FF00";
            ctx.lineWidth = 10;
            ctx.lineCap = "round";
            ctx.shadowColor = "#000000";
            ctx.shadowBlur = 20;
 
            //線を引く
            ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.lineTo(180, 250);
            ctx.stroke();
            //矩形を塗りつぶす
            ctx.fillRect(300, 100, 100, 150);
            //矩形を描く
            ctx.strokeRect(500, 100, 100, 150);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="canvas" width="700" height="400"></canvas>
</body>
</html>
```

# 描画の手順

1. HTMLでcanvas要素を定義
2. JavaScriptでcanvas要素を取得
3. canvas要素からコンテキストを取得
4. コンテキストに色や線の太さなどを設定
5. コンテキストに対して線や矩形などの描画を行う

# ソースの説明

HTMLではcanvas要素を定義します。

```html
<canvas id="canvas" width="700" height="400"></canvas>
```


ここで注意してほしいのは幅をwidth属性で,高さをheight属性で指定することです。

この指定が正しくなされてないと意図した大きさで描画されないこともありますので注意が必要です。

JavaScriptでは8列の


```javascript
var canvas = document.getElementById("canvas");
```
でcanvasへの参照を取得し、次に9列の

```javascript
ctx = canvas.getContext("2d");
```
でコンテキストを取得します。このctxが絵筆などの情報を格納するオブジェクトとなります。

多くのプログラムでは、コンテキストをctxやcontextといった広域変数に格納するのが主流です。

引数に「2d」とありますが、現在のHTML5では「2d」しか指定出来ません。

コンテキストを取得したらプロパティ（絵筆の属性）を設定します。（列11-17）

主なプロパティは以下の通りです。

| プロパティ   |  内容       |  
|:-----------------|:----------------- |
| ctx.strokeStyle             |              線や輪郭の色 | 
| ctx.fillStyle           |            	塗りつぶしの色 | 
| ctx.lineWidth             |              線の幅 |
| ctx.lineCap               |                線の終端の形状で、butt、round、squreの値が使用される |
| ctx.shadowColor             |             	現状の影の色 |
| ctx.shadowBlur	          |           影に適用するぼかす範囲 |

コンテキストにプロパティを設定した後、線、矩形の塗りつぶし、矩形を描画しています。

描画する際に筆を動かすようにcanvasでは必ず「パス」と呼ばれる軌跡を設定します。

そのパスを初期化するのが「**beginPath()**」です。

「**moveTo()**」で筆を下ろし、「**lineTo()**」で筆を動かします。

その後、「**stroke()**」で初めて線が描画されます。

ちなみに、「**fill()**」では「**パス**」で囲まれた範囲が塗りつぶされます。

「**fillRect()**」と「**strokeRect()**」は名前から予想できると思いますが、塗りつぶした矩形の描画をしてくれます。

座標系はマウスイベントと同じく、canvasの左上を原点(0,0)、右方向にx軸、下方向にy軸となります。



> 引用 : [Dripcoke](https://dripcoke.com/program-matome)
>> [(Webゲーム開発)canvasの基本-(1)-canvas要素で図形を描く](https://dripcoke.com/archives/3800)
CDKでGraphQLに挑戦する(Resolver編)

# はじめに

本日は[GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/89)の２日目ですね。[昨日](https://qiita.com/ufoo68/items/cff4e8c2ead1f62ed2a9)はスキーマだけ実装してデプロイしただけなので、今日はデータの操作、つまり**Resolver**を実装していきます。

# スキーマを少し変更

`ItemInput`の内容を少し変更しました。

```graphql
input ItemInput {
  data: String!
}
```

inputの情報に`id`を消しました。調べてみるとidの生成を簡単に自動化できるみたいなので、`data`のみを入力させるようにしました。

# Resolverを追加

**Resolver**はGraphQLの処理を実装する箇所ですね。**AppSync**に直接**DynamoDB**を連携させると、なんか実装してみると拍子抜けするほど簡単でした。前回のコードを以下のように書き加えます。

```typescript
import * as cdk from '@aws-cdk/core'
import { GraphQLApi, CfnApiKey, MappingTemplate, PrimaryKey, Values } from '@aws-cdk/aws-appsync'
import { Table, AttributeType } from '@aws-cdk/aws-dynamodb'

export class CdkAppsyncTestStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props)

    const api = new GraphQLApi(this, 'graphQlApi', {
      name: 'test-api',
      schemaDefinitionFile: './schema.graphql',
    })

    new CfnApiKey(this, 'apiKey', {
      apiId: api.apiId,
    })

    const itemTable = new Table(this, 'itemTable', {
      partitionKey: {
        name: 'id',
        type: AttributeType.STRING,
      }
    })

    const itemDS = api.addDynamoDbDataSource('Item', 'Item data source', itemTable)
    itemDS.createResolver({
      typeName: 'Query',
      fieldName: 'allItem',
      requestMappingTemplate: MappingTemplate.dynamoDbScanTable(),
      responseMappingTemplate: MappingTemplate.dynamoDbResultList(),
    })
    itemDS.createResolver({
      typeName: 'Mutation',
      fieldName: 'addItem',
      requestMappingTemplate: MappingTemplate.dynamoDbPutItem(
          PrimaryKey.partition('id').auto(),
          Values.projecting('item')),
      responseMappingTemplate: MappingTemplate.dynamoDbResultItem(),
    })
  }
}
```

これだけです。**単純なDynamoDBの操作だけならLambdaの実装はいらない**みたいです。

# 実行する

早速デプロイして前回と同じクエリを実行してみましょう。ちなみにクエリ変数だけは以下のように変更しているのでそこだけ注意です。

```json
{
  "input": {
    "data": "test"
  }
}
```

## Mutationの実行

idに自動的に値が割り振られた状態でちゃんと値が返ってきました。
![mutation.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209689/b8c38cd8-d457-47aa-c9de-37382860c9c8.jpeg)

## Queryの実行

さきほど追加した値がちゃんと返ってきましたね。
![query.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209689/48dda16a-9c52-efb1-e0f5-c733719ce03d.jpeg)

# さいごに

AppSyncでめちゃ簡単にGraphQLサーバーの実装ができてしまいました。明日は認証の実装をしてみたいと思います。ではまた！
Xojo Web アプリで GETメソッドを実現するには

フォームのGETメソッドを伴うページ遷移をしたい。


# 送信側

```

Me.ShowURL("http://www.google.com/search?q="+TextField1.text)
```

上記はサニタイズしていないので適宜処理を追加する必要がある。

# 受信側

http://URL/?test=こんにちは

でアクセスしたパラメータを取得する場合、

Appに String1 As String および「HandleURL」Eventを追加。HandleURLを以下のように記述する

```

String1=Request.GetParameter("test")
```

WebPage1にButton1を配置し、Actionに以下を追加する

```

messagebox(App.String1)
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/22fbd1df-8163-f404-b714-484cdd0877df.png)

## WebApplication.HandleSpecialURL

以下のような、 「api」または「special」へアクセスする場合、

http://127.0.0.1:8080/api/GetAllCustomers
http://127.0.0.1:8080/special/GetAllCustomers

WebApplication.HandleSpecialURL

を使って独自のHTML応答を実現できる。
http://docs.xojo.com/WebApplication.HandleSpecialURL
10行以内のスクリプト(2.vimrc)

### 【初心者向け】10行以内のスクリプト(2.vimrcの記述)
pythonで色々なライブラリを使えば、「少ないコードでもちょっとした事が出来て、少なければ5行程でもちょっとしたスクリプトが作れ、便利だな。」と思ったので、pythonやその他、コマンドを羅列しただけのものも出てくるかも知れませんが、10行程のスクリプトを不定期で投稿してみようと思います。

**第2回**として、<font color=blue>3分で出来る最小限の.vimrcを投稿したいと思います。</font>
pythonでもないのですが、vimrcもスクリプト言語といえると思います。
端末やサーバの設定・運用といった<font color=blue>インフラまわりは、vimというより最低限でも良いのでオリジナルのviを覚える必要があり、プログラミングでも開発環境のコンフィグの編集にvimを使いたい場面はまだまだあると思います。</font>

近年、Linuxの統合環境も進化し、付属のエディタも手軽で便利だと思います。
開発環境ではIDEもあり、プログラミングはIDEが主流なのだろうと思いますが、私の場合はコンフィグの記述の他、「ちょっとエディタにsqlを書いておいて、貼り付けるか？」とかちょっとしたスクリプトの記述に使う事があります。
特にSQLの場合、標準の環境だと入力に手間が掛かる場合が多いと思います。

<font color=blue>vimも奥が深く、viやvimの設定ファイルの記述も組み込みのスクリプト言語といえます。</font>
掘り下げると制御構文などもある様で難易度も高いですが、ディストリビューションによっては、インストールした時点で便利に使用出来る場合もあるかと思います。
Linuxのディストリビューションの中には、viの実体が便利なしかし、カスタマイズされたvimのエイリアスになっていたりする場合もあると思います。

<font color=blue>初期状態で便利過ぎるのも他の環境で使う時に、逆に違和感を感じる事もあると思います。</font>
そう考え、プラグインを使わずに最小限の設定を記述してみようと考えました。
まずは、シンタックス・ハイライトとインデントの設定くらいが入っていれば良いと思い、必要になれば、少しずつ追記する様にする想定です。

あまり.vimrcを記述したり、プラグインを導入する事は無かったのですが、最近、debian10を使う事が多くなり、初期状態では、vimのプラグインが導入されていないというより、vimのインストール自体がされていませんでした。

しばらくオリジナルのviを使っていました。
viの設定ファイルを記述しても良いのですが、vimも導入しました。しばらく「set　tabstop=4」と良くやっていたのですが、その必要がなくなっただけでも、かなり楽になりました。

***

### 1. vimがインストールされていない場合は、インストール
・debian系の場合はapt等で、vim-noxを入れれば、vim本体も入ります。
vimrcで様々な設定を入れる場合は、vim-noxも入れましょう。
・redhat系等はパッケージ名が違います。

```terminal:インストールされているか？確認

$ which vim
/usr/bin/vim

# apt search vim-nox
i   vim-nox                         - Vi IMproved - enhanced vi editor - with sc
p   vim-nox:i386                    - Vi IMproved - enhanced vi editor - with sc

root@mint01:~# exit 

```

### 2. vimrcの記述
一般ユーザーのホームディレクトリで、.vimrcを編集若しくは、無い場合は新規で作成します。
このコンフィグでは、6行の設定を入れました。
【要注意: .vimrcはドットファイルです】
行頭のダブルクォート「"」は、コメントです。
 
```terminal:.vimrc

$ vim  .vimrc
" 行番号の表示
set number

" 対応するカッコやブレースを表示
set showmatch matchtime=1

" コメントの色(水色)を指定
hi Comment ctermfg=3

" タブキーの文字幅
set shiftwidth=4

" インデント幅
set tabstop=2

" syntax
syntax on

```

**以上、3分で出来る.vimrcの記述でした。**
【Go】echoでハマったこと

# echoを使っていてハマったことまとめ
## 概要
Go言語のWebフレームワークであるechoを使っていてハマったことについて、メモとしてまとめていこうと思います。

## middleware
### CORS
#### CORSWithConfig()の戻り値とe.Use()の引数が不一致
##### 事象

自分の作ったフロントエンドからのみアクセスできるようにカスタムCORS設定をしようとして以下のようなコードを作成しました。

```golang
package main

import (
	"net/http"

	"github.com/labstack/echo/middleware"
	"github.com/labstack/echo/v4"
)

func main() {
	e := echo.New()
	e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
		AllowOrigins: []string{"http://localhost:3000"},
		AllowMethods: []string{http.MethodGet, http.MethodPut, http.MethodPost, http.MethodDelete},
	}))
	e.GET("/public", public)
	e.Logger.Fatal(e.Start(":1323"))
}

func public(c echo.Context) error {
	return c.String(http.StatusOK, "hello public!")
}
```

すると、以下のようなエラーに遭遇しました。

```zsh
cannot use middleware.CORSWithConfig(middleware.CORSConfig literal) (type "github.com/labstack/echo".MiddlewareFunc) as type "github.com/labstack/echo/v4".MiddlewareFunc in argument to e.Use
```

どうやらe.Use()では`v4`の`MiddlewareFun`を引数として要求しているようですが、
`CORSWithConfig()`の戻り値は`v4`ではない`MiddlewareFun`らしいです。

##### 解決策
最初は、キャストすればいいかと思ったのですが、うまくいきませんでした。
そこで、少し調べてみるととても簡単なことで、自分がGoのバージョン管理などに不慣れなことが原因でした。

問題の箇所は、以下のimoprt文になります。

```golang
    "github.com/labstack/echo/middleware"
    "github.com/labstack/echo/v4"
```

ここで、`echo`については`v4`を指定してインポートしているのですが、`middleware`は何も指定しておりません。
そのため、インポートされた`middleware`と`echo`の間でバージョンの不一致が起きてしまい先ほどのエラーが生じたようです。

解決策は、簡単で以下のように`middleware`にも`v4`を付けてあげるだけ。

```golang
	"github.com/labstack/echo/v4/middleware"
```

これでエラーは出なくなり、無事にCORSの設定ができました。

## 終わりに
今後も`echo`を使う中で自分がハマったことや、コメントでいただいたハマりポイントについて書いていきたいと思います。
何かご指摘や、ハマりポイントなどありましたらコメントよろしくお願いします。
raspberrypiとESP32を使った自分でIoTプラットホーム作成(その3)~ESP32設定編アナログ温度センサー

前回でESP32とArduinoの接続が問題なかったので、温度センサーを接続してそれをシリアルで読み取ります。
センサーは手元にあったLM35DZ-Nという製品です。
温度の換算は別として無事、Arduino-IDEでモニタリングすることができました。

次はBuletoothを使ってRaspberryPiとESP32リンクさせます。
これはやったことがないので大きな難関です(やり方はQiitaやWebにたくさん記載ありますが)。

```
#define LM35DZN 25
void setup(){
    Serial.begin(115200);
    while(!Serial);
    pinMode(LM35DZN,INPUT);
}
void loop(){
  int e=analogRead(LM35DZN);

  float Vout = e/4095.0*3.3+0.1132;
  float temp =(Vout -0.6)/0.01;
  Serial.println(temp);
  delay(1000);
}
```
[Kotlin] all, any, count, findについてまとめる

## はじめに
Kotlin勉強中の時にわからない単語などを調べてまとめていく

## 内容
[やってること](https://play.kotlinlang.org/koans/Collections/All%20Any%20and%20other%20predicates/Task.kt)

```
// Return true if all customers are from the given city
// 全部条件に合うか。一つでも合わなければfalse
fun Shop.checkAllCustomersAreFrom(city: City): Boolean = customers.all{it.city == city}

// Return true if there is at least one customer from the given city
// 一つでも条件に合うか。合えばtrue
fun Shop.hasCustomerFrom(city: City): Boolean = customers.any{it.city == city}

// Return the number of customers from the given city
// いくつ条件にあっているか
fun Shop.countCustomersFrom(city: City): Int = customers.count {it.city == city}

// Return a customer who lives in the given city, or null if there is none
// 条件にあった最初の要素を返す
fun Shop.findAnyCustomerFrom(city: City): Customer? = customers.find{it.city == city}
```
[kotlin] listのmap, filterについて

## はじめに
Kotlin勉強中の時にわからない単語などを調べてまとめていく

## 内容
filter, mapが便利だったのでまとめる

[やってること](https://play.kotlinlang.org/koans/Collections/Filter%20map/Task.kt)

```filter.kt
// Return the set of cities the customers are from
// customersの要素をみて、cityに変換して返している
fun Shop.getCitiesCustomersAreFrom(): Set<City> = customers.map{it.city}.toSet()

// Return a list of the customers who live in the given city
// 要素の中からit.city == cityに当てはまるものだけにtrueを返して、listの中に残している
fun Shop.getCustomersFrom(city: City): List<Customer> = customers.filter{it.city == city}
```
Ruby と Perl と Java と Python で解く AtCoder ABC 047 C 正規表現

# はじめに
*[AtCoder Problems](https://kenkoooo.com/atcoder/#/)* の Recommendation を利用して、過去の問題を解いています。
AtCoder さん、AtCoder Problems さん、ありがとうございます。
# 今回のお題
*[AtCoder Beginner Contest 047 C - 一次元リバーシ](https://atcoder.jp/contests/abc047/tasks/arc063_a)*
<font color="brown">Difficulty: 650</font>

今回のテーマ、正規表現
# Ruby
例えば、`WWWWBBWBBB` を W B でそれぞれまとめますと `WBWB` となり、3回で一色にできることが分かります。
こういう文字列の処理は正規表現を使用すると簡単に解けます。
*[AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問 ～](https://qiita.com/drken/items/fd4e5e3630d0f5859067)*で有名な *[C - 白昼夢](https://atcoder.jp/contests/abc049/tasks/arc065_a)* も正規表現ですと*[スッキリ](https://qiita.com/c3drive/items/020170ad2851c39f9a33)*解けます。

```ruby.rb
s = gets.chomp
s.gsub!(/W+/, "W")
s.gsub!(/B+/, "B")
puts s.size - 1
```
`W+` は1文字以上の連続した**W** を表現しています。
# Python
```python.py
import re

s = input()
s = re.sub(r'W+', "W", s)
s = re.sub(r'B+', "B", s)
print(len(s) - 1)
```
*Python* で正規表現を使用する場合、`import re` が必要です。
# Perl
```perl.pl
chomp (my $s = <STDIN>);
$s =~ s/W+/W/g;
$s =~ s/B+/B/g;
print length($s) - 1, "\n";
```
# Java
```java.java
import java.util.*;

class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        String s = sc.next();
        sc.close();
        s = s.replaceAll("W+", "W");
        s = s.replaceAll("B+", "B");
        System.out.println(s.length() - 1);
    }
}
```

||Ruby|Python|Perl|Java|
|:--:|:--:|:--:|:--:|:--:|
|コード長|71 Byte|97 Byte|87 Byte|310 Byte|
|実行時間|36 ms|38 ms|21 ms|239 ms|
|メモリ|10076 KB|4468 KB|640 KB|35160 KB|
# まとめ
+ ABC 063 C をスッキリ解いた
+ Ruby に詳しくなった
+ Python に詳しくなった
+ Perl に詳しくなった
+ Java に詳しくなった

参照したサイト
*[pythonで、とっても便利な正規表現を！](https://qiita.com/hiroyuki_mrp/items/29e87bf5fe46de62983c)*
*[Java での正規表現の使い方メモ](https://qiita.com/opengl-8080/items/f68829533ce042c38266)*
*[instance method String#gsub](https://docs.ruby-lang.org/ja/latest/method/String/i/gsub.html)*
*[ABC049C - 白昼夢を簡単に導く方法が知りたい（Golang）](https://qiita.com/c3drive/items/020170ad2851c39f9a33)*