OmniAICreator/Qiita-1.07M huggingface dataset:
Svelte入門 環境構築・フォルダ構成について

##Svelte入門 環境構築・フォルダ構成に関する忘備録

![1_YwhNJXizPs__GeqoivtbYg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10793/1c514bdf-28b0-a906-c6a8-04cd8055bf64.png)

Vue.jsの50倍早いとかでフロントエンド界隈で注目を浴びている？svelte.jsを少し触ってみたので忘備録としてまとめました。

##環境構築手順

Vue.jsのようにCDNを張り付けるだけで試せるような手軽さはありません。
まず、Node.jsがインストールされている事が前提条件としてあり、npxコマンドでプロジェクトを作成する必要があります。

###プロジェクトの生成
npxコマンドを実行して新規プロジェクトを作成します。

```
npx degit sveltejs/template my-project
```

npxコマンドはnode.jsをインストールしたら一緒についてくるらしいのですが、自分の環境では認識されませんでした。その場合は別途npxをインストールします。

```
$ npm install -g npx
```

プロジェクトフォルダに移動して```npm install```を実行します。

```
cd my-project/
npm install
```
package.jsonを開くと```npm install```コマンドでインストールされたパッケージが確認できます。

```
{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^12.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}
```

###サーバーの起動
インストールが完了したら、```npm run dev```コマンドを実行します。
``Your application is ready~!``と表示されたらサーバーが起動しているので、```http://localhost:5000```にアクセスします。
すると、svelteの初期画面 HELLO WORLD! が表示されます。

```
  Your application is ready~! 

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose
```

Svelteの初期起動時の画面
![hello_world.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10793/4f365ca5-96c6-cac6-6968-242b6eab6d28.png)

Svelteの環境構築は以上です。
HELLO WORLDを表示させるまでは約10分程度で完了します。

##フォルダ構成の確認
次にフォルダ構成を確認してみます。
プロジェクト作成後のフォルダ構成は以下のようになっています。
srcフォルダ以下に、``App.svelte``と``main.js``が格納されており、この２つのファイルが初期起動時のHELLO WORLDの画面を作っているようです。

```
project
 ├─node_modules
 │
 ├─public
 │  └─build
 ├─scripts
 └─src　←ここにあるファイルを編集する
```

各ファイルを開いてソースコードを確認してみました。
``App.svelte``の``{name}``部分に``main.js``で書かれているpropsの値がバインドされているようです。

```html:src/App.svelte
<script>
	export let name;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>
```

```javascript:src/main.js
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});

export default app;
```


#まとめ

今回は導入から、フォルダ構成の確認まで行いました。
VueのようにCDN読み込みで使えないので、バリバリフロント開発しているところでないと導入のハードルはやや高いように思いました。

とはいえ実行速度はVueの50倍らしいし、サンプルを見る限り構文はとてもシンプルみたいなので日本語ドキュメントがもっと充実してきたら普及するのかも知れません。

次はSvelteの公式にある実装例を参考になにか作ろうかと思います。
https://svelte.dev/examples#hello-world
2021年の家庭内LANを考える

2020年は、ぼちぼち Flets の契約変更や WiFi AP の入れ替えの時期

## ここ2,3年の変化

- WPA2 は安心ではない
- WPA3 （修正後）

- 家庭でも 10GB 接続が見えてきた。
    - NTT Flets 光 クロス 10GB
    - Nuro 光、au光  (eonet関西） 2GB
- 家庭内 LAN は 1000Base-T では間に合わない。

## WiFi6

- WiFi6 = 802.11ax + WPA3

- セキュリティ面
WPA2 はハンドシェークを攻略されているので、WPA3 への移行が必要。

- WiFi 5GHz だと回り込まないため、一軒家や2階建だと子機が欲しくなる。
-> メッシュネットワーク。こなれ始めてきた。実用に耐える。一方で有線で繋げば確実。

## 802.11ax

- iPhone 11 は対応済み。
- iPhone 11 の Wi-Fi は最大 1.2Gbps、2ストリームMIMO (2x2) の 80MHz幅

- 802.11ax の中で、速度のランクがある。
- 802.11ax は複数のストリームを束ねて速度を出すため、アンテナの数と送受信機の数によって最大速度が違う。

## ランク （各社の言ったもん勝ちキャッチフレーズ）

最大実行速度で
AX1200 = max 1.2Gbps
AX2200 = max 2.2Gbps
AX3000 = max 3Gbps
AX5300 = max 5.3Gbps (2.4Gbps/5GHz + 1.733Gbps/5GHz + 1.147Gbps/2.4GHz)

## 最大速度を出す要素

1. CPU （トラフィックをさばく CPU か ASIC. ルーティング・フィルター)
1. 送受信機（周波数ごと）
1. アンテナ （ストリームごと）

iPhone 11 1台だと AX1200 でフルスピードに十分だが、家庭に 2台あると AX2400 がほしくなる。

## 2020年7月お薦めルーター

NEC Aterm  AX6000HP 実効スループット約4040Mbps 38940円

欠点: 10GB の口が 1ポートしかない。in/out どちらかの選択式。つまり有線 LAN は捨て。

## WiFi 6E

（おい、余計なことすんな）
https://k-tai.watch.impress.co.jp/docs/column/keyword/1230134.html
WiFi 6E = WiFi 6 + 6GHz (802.11be)
（専用の送受信機とアンテナが追加されるということ。。。）
USA 2020-
EU 2021- 
Japan ? 2020年4月はまだ周波数再編の議論が始まっていない。 早くて 2022-? 

WiFi 7 へのつなぎ、らしい。
Rails  Active Storage ファイルのパスを取得する方法

## 投稿した理由
divタグのstyle属性の値background-imageを使う際にURLが必要になったから

## やり方
rails_blob_pathを使う(has_one_attached :image)

```show.html.erb
<div style="background-image: url(<%= rails_blob_path(@user.image) %>) "></div>
```

## Active Storage インストール方法
①image magick（画像変換ツール)をインストール

```ターミナル
$ sudo yum install -y ImageMagick
```
②image magickを使えるようにするために、mini_magick(gemファイル)をバンドルインストールする

③Active Storageのインストール

```ターミナル
$ rails active_storage:install
$ rails db:migrate
```

## おまけ
ActiveStorageメソッドあれこれ

- image.attached? - 画像のアップロードがされているかを確かめるメソッド
AWS EventBridgeでCronで設定した時間に起動しない原因と対処法



AWS EventBridge のcron設定でつまづいたので、
その内容を共有します。もし同じ現象の方がいましたらぜひ参考にしてください。

##現象
cronの設定を下記の画像のように設定した。

<img width="801" alt="qiita_part1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676640/b3502e88-39f4-9846-365b-3493df0273f0.png">

上記の画像のように設定したが

**平日の月曜日〜金曜日の８時に起動する認識だったが指定した時間に起動しなかった。**

##原因

Cronの設定を見直してみると下記のように設定されていた。

<img width="651" alt="part2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676640/68b4ffb4-c8c8-17ba-8942-94a138b3a368.png">

確かに平日の月曜日〜金曜日の6時に設定されているが、
**GMT基準で設定されているから。**

GMTと日本の時差は９時間あるので、このCronの設定だと、
**月曜日〜金曜日の15時に起動することになります**
(ちなみにGMTより日本の方が9時間早いです。）


##対処法
簡単に言うと、**日本時間をGMTに変換すればいいだけです。**

ちなみに以下のサイトで日本時間をGMTに変換できます。
https://www.jisakeisan.com/

<img width="631" alt="a7228be11cf4dba04bdd3331ce024ff7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676640/0495b705-f21f-4fa2-0a80-d5307d5020fd.png">

今回は、平日の6時に設定したいので

Cron側で**月曜日〜金曜日の21時**と設定すれば良いです。

<img width="364" alt="589767c36711df13b01407add1d20f51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676640/9c6b9d11-9e13-5173-ec29-315c255ec8e0.png">
React ref初心者の覚書

初心者がrefがよくわからなかったのでメモしています。


### [ref のフォワーディング](https://ja.reactjs.org/docs/forwarding-refs.html)の記事メモ

- ref のフォワーディングはあるコンポーネントを通じてその子コンポーネントのひとつに ref を自動的に渡すテクニック

- ref のフォワーディングはオプトインの機能であり、それにより、コンポーネントが ref を受け取って、それをさらに下層の子に渡せる（つまり、ref を “フォワーディング” できる）ようになります。

下の例では、FancyButton は渡された ref を取得して、それをレンダーする button DOM にフォワーディングするために、React.forwardRef を使っています。

```ref.js
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
```

- フォアード
転送
意味は「特定の〜にやってきたデータを別の〜に向かって送り出してやること」です。



### [ReactのRefsを正しく取り扱う](https://qiita.com/tatakahashiap/items/3ecf3ed3d026c2b9ee8d)の記事メモ
- Refsを使うべきシチュエーション
  - そもそも、Refsはあまり多用すべきでないと公式でアナウンスされています。というのもReactでは、親コンポーネントから子プロセスへの一方向データフローを原則としていて、Refsを使ってコンポーネントに作用をすると、その原則が崩れてしまうためです。

- Refsを使って良い例は
  - テキストの選択、フォームへのフォーカスもしくはメディア（動画、音声）の再生の制御
  - アニメーションを発火させる場合
  - サードパーティのDOMコンポーネントを組み込む場合＞mapboxを組み込むのもサードパーティ

これで何となくイメージだけ、、
下記の本家で詳しい説明があった。
### [Ref と DOM](https://ja.reactjs.org/docs/refs-and-the-dom.html)からのメモ

```js

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}
```

Ref へのアクセス

- ref が render メソッドの要素に渡されると、そのノードへの参照は ref の current 属性でアクセスできる。
- ref の値はノードの種類によって異なります。
- HTML 要素に対して ref 属性が使用されている場合、React.createRef() を使ってコンストラクタ内で作成された ref は、その current プロパティとして根底にある DOM 要素を受け取る
- ref 属性がカスタムクラスコンポーネントで使用されるとき、ref オブジェクトはコンポーネントのマウントされたインスタンスを current として受け取ります
関数コンポーネント (function components) には ref 属性を使用してはいけません。なぜなら、関数コンポーネントはインスタンスを持たない

まだ把握しきれない、、

```js
class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // textInput DOM 要素を保持するための ref を作成します。
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 生の DOM API を使用して明示的にテキストの入力にフォーカスします。
    // 補足：DOM ノードを取得するために "current" にアクセスしています。
    this.textInput.current.focus();
  }

  render() {
    // コンストラクタで作成した `textInput` に <input> ref を関連付けることを
    // React に伝えます。
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}
```
pythonでメールを飛ばすモジュールを作った話

##作ったものの概要
smtplibとかMIMETextを使ってメールを飛ばすモジュール作ってみました。
引数に件名、本文、送信元、送信先、Ccを指定することで送信が可能です。
今回利用していた送信元メールが認証不要のものだったので、認証機能はとくに作ってません。
多分server.loginとかやればできると思います。(試してませんが。。。)
##コード
```mail.py

import smtplib
from email.mime.text import MIMEText

def send_mail(subject, body, f_email, t_email, c_email):
    # 送受信先とメール件名、本文の指定
    msg = MIMEText(body, "html")
    msg["Subject"] = subject
    msg["To"] = t_email
    msg["From"] = f_email
    msg["Cc"] = c_email  
    # サーバを指定する。サーバーとポートにメールサーバー名とポート番号を渡しておく
    server = smtplib.SMTP(サーバー, ポート) 
    # メールを送信する
    server.send_message(msg)
    # 閉じる
    server.quit()

    return
```
Laradock にログイン機能（laravel/ui）を導入する

# 概要
以下のような方を対象としています。

- Laradock をすでに導入済
- Laravel 6 のプロジェクトを作成済
- ユーザーログイン機能を導入したい

自身のアウトプット兼メモ用で作成しました。

## 導入方法
はじめに、laradock ディレクトリに移動します。
その後、以下の流れで入力していきます。

#### 1. ワークスペースに入る

```
docker-compose exec  workspace bash
```

#### 2. laravel / ui のインストール

```
composer require laravel/ui:^1.0 --dev
```

#### 3. ログイン・ユーザー登録機能の作成
今回はBootstrapを用いた形にします。

```
php artisan ui bootstrap --auth
```

#### 4. パッケージのインストール

```
npm install
```

#### 5. インストールパッケージのビルド

```
npm run dev
```

#### 6. ワークスペースから出る

```
exit
```

## 参考
[Laravel 6.x JavaScriptとCSSスカフォールド](https://readouble.com/laravel/6.x/ja/frontend.html)
[ログイン機能の作成（laravel6）]
(https://laraweb.net/tutorial/6792/)
Node 12 以降の環境で Gulp 3系を動かす

Gulp 3系がサポートされなくなってから結構たちましたが、3系環境の案件を保守する事例はまだ少なくないです。ただ、 Node 12 以降では正常に動作しないので、ほとんどの場合エラーになるかと思います。
なので単純にマシンに Node 11 を入れ直せば一応は動くんですが、代わりに最近の NPM が動かなくなってしまいます。（案件ごとに Node を都度入れ直さないといけない感じになってしまいます。）

## バージョンを切り替えられるようにする

Node を都度入れ直すのはかなり手間だし複数案件やってるとき作業止まってしまうので、自分は Node バージョンを切り替える様にしています。ちなみに以前は [n](https://www.npmjs.com/package/n) を使用していたんですが、Catarina から $PATH env がおかしくなって Node 自体が使い物にならなくなりました。
※ `/usr/local/bin/n` のシンボリックリンクと、 `/usr/local/lib/node_modules/n/bin/n` を削除して対処するはめになりました。

これはイシューにも上がってて、まだ解消されてないので、いったん n はもうやめて別のにしました。
切り替えツール系に、 nodebrew と nodenv があって（他にもあるかもですが）、nodenv を入れます。前にも使ったことはあるんですがちょっと面倒だったので、今回手順をのこしています。
※ちなみに違いとしては、どちらもプロジェクトごとに切り替えられるには切り替えられるんですが、nodebrew は `nodebrew use v11.0.0` みたいな感じで都度都度コマンド叩く必要があるのに対して、nodenv は .node-version ファイルをプロジェクトフォルダに生成でき、切り替えコマンド不要で Node バージョン切り替えできるという感じです。（グローバルも変えられます）

## 手順

### nodenv を ~（ホームディレクトリ） にクローン

```zsh
% git clone git://github.com/nodenv/nodenv.git ~/.nodenv
```

※ nodenv 自体は本来、マシンの Node 環境構築に利用するものらしいです。

### nodenv にパスを通す

```zsh
% echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc
% echo 'eval "$(nodenv init -)"' >> ~/.zshrc
```

※ bash の場合（Catarina未満）は下記

```bash
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
```

### node-build をクローン

```zsh
% git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build
```

※ node-build は Node の各バージョンのビルダーらしいです。

ちなみに自分はここでパーミッションで弾かれてしまいました。
なので sudo つけて再度。

```zsh
% sudo git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build
```

※ 記事によっては /usr/local/src にクローンしてるケースも有りました。OS古い場合は下記コマンドが良いかもしれません（未検証）。

```zsh
% git clone https://github.com/nodenv/node-build.git /usr/local/src
```

```zsh
% nodenv init
% PREFIX=/usr/local /usr/local/src/node-build/install.sh
```

※ nodenv init はシェルの再起動→nodenv再ロード

### 使用する Nodeバージョンを選んで利用可能にしておく

11.15.0（Node 11系の最新）と、12.14.0（執筆時点の LTS）をインストールしておく。
（`~/.node-gyp` にインストールされる）

```zsh
% nodenv install 11.15.0
% nodenv install 12.14.0
```

ちなみにインストール可能なバージョンのリストを下記コマンドで表示できる

```zsh
% nodenv install -l
```

### 実際に切り替える

グローバルのバージョン指定をする場合は下記コマンド。
ただ、すでにLTSを入れているので自分は特にしなかった。

```zsh
% nodenv global 12.14.0
```

ローカルのバージョン指定は下記コマンド。

```zsh
% nodenv local 11.15.0
```

-> `.node-version` ファイルがプロジェクトに作成される

### Gulp 3系を走らせてみる

そのまえに、一回 `npm i` してしまってるプロジェクトの場合は、（`cd` でプロジェクトに移動した上で）node_modules と NPM キャッシュの削除をしておく。

```zsh
% rm -rf node_modules
% npm cache clean --force
```

ローカルの Node バージョンを `nodenv local 11.15.0` などで Node 12 以前にしている状態でモジュールのインストールを実施。

```zsh
% npm i
```

package.json の `start` スクリプトを追記。（すでにあったら何もしない）

```json
"scripts": {
  "start": "gulp"
}
```

`npm start` で、正常にGulpが走れば、一通り成功。

```zsh
% npm start
```

# 参考

[nodenv を使って Mac に Node.js の環境を構築する](https://qiita.com/1000ch/items/41ea7caffe8c42c5211c)
心拍のリアルタイムデータをスマホで取得する方法を考察

ウェアラブルデバイスからリアルタイムデータをスマホに取得する方法を考える機会があったのでメモ
インターネット非接続も考慮する必要があったので、変化球的なのもある

## BLE通信
機器とスマホの接続でデータ受信できるのでネット非接続でも良いです
計測データの保持がスマホ依存になるのがネックかも

### [Polar OH1](https://www.polar.com/ja/products/accessories/oh1-optical-heart-rate-sensor)
![NoName_2020-7-29_11-55-37_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/9e5907db-ba4f-a6b9-0ca0-b41d9f72156f.png)
SDKが公開されているのでAPP開発しやすそうなのが○
AndroidでBLE接続のSDK公開
https://github.com/polarofficial/polar-ble-sdk

### [Fitbit Charge3](https://www.fitbit.com/jp/charge3)
![NoName_2020-7-29_11-59-36_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/d0022ad4-366f-c79b-aab1-fef30b1792d6.png)

BLE接続に関して公式では対応してないっぽい？
調べが足りないのかもですが

####参考

Raspberry Pi Zero WでFitbitからリアルタイムにデータを取る
https://qiita.com/horihiro/items/de8822edc403b97a776d

Fitbit Charge HRとBLEで通信したい
https://shima-nigoro.hatenablog.jp/entry/2016/06/04/105400

Fitbit LiveData取得備忘録
https://qiita.com/horihiro/items/03c4bef3e71539eddaad

Raspberry Piで心拍データをBLEでリアルタイムに受信する
https://qiita.com/Yoshiki_w/items/a8224fe8e398fc5f591c




## ANT+通信
サイクルコンピュータなどで利用が多いやつらしい。。
データの保持がスマホ依存なりようなのが同じくネックかも？

### [Garmin vívofit® 4](https://www.garmin.co.jp/products/wearables/vivofit-4-black/)
![NoName_2020-7-29_11-54-15_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/c3535fd1-039b-6157-f065-775af353d84d.png)

心拍転送モード
https://support.garmin.com/ja-JP/?faq=8G7NCxDkuo6bUMb6YTY8j6

#### 参考
心臓が止まったらSNSに「死にました」と投稿する
https://qiita.com/inamori/items/9fccb65528f28f3a81bc

## ウェアラブルデバイスにAPP構築
データ直読みできそうなのは良さそうですが、スマホなどに送信するが難しそう
クラウドにアップできる機能がありそうなら併用が良さそう
リアルタイムはウェアラブルで直接確認してそれ以外はクラウドにアップしたデータ利用など

### [Fitbit Ionic](https://www.fitbit.com/jp/ionic)
![NoName_2020-7-29_11-56-26_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/75fac5ce-63e8-d61b-eeb8-db5d25d7e0f1.png)
Getting Started
https://dev.fitbit.com/getting-started/

## ウェアラブルデバイスにローカルサーバー構築
全部作っちゃう発想でデータ取得などはラズパイにサーバー立ててWifi経由だと開発は楽そう
活動量や睡眠などの判定する脳みそがないので、そこがネックになりそう

### ラズパイなどで自作
![NoName_2020-7-29_11-57-28_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/17c47bf0-6f98-0419-5c20-19a6c0b4c888.png)

脈拍センサー パルスセンサモジュール
https://www.amazon.co.jp/dp/B01CFGOZM0/ref=cm_sw_r_tw_dp_x_ajmiFbPP15C7H


##参考サイト

Raspberry Pi Zero WでFitbitからリアルタイムにデータを取る
https://qiita.com/horihiro/items/de8822edc403b97a776d

Fitbit Charge HRとBLEで通信したい
https://shima-nigoro.hatenablog.jp/entry/2016/06/04/105400
https://shima-nigoro.hatenablog.jp/entry/2016/06/04/105420

Fitbit LiveData取得備忘録
https://qiita.com/horihiro/items/03c4bef3e71539eddaad

Raspberry Piで心拍データをBLEでリアルタイムに受信する
https://qiita.com/Yoshiki_w/items/a8224fe8e398fc5f591c

Getting Started
https://dev.fitbit.com/getting-started/

Polar OH1
https://www.polar.com/ja/products/accessories/oh1-optical-heart-rate-sensor

AndroidでBLE接続のSDK公開
https://github.com/polarofficial/polar-ble-sdk

脈拍センサー パルスセンサモジュール
https://www.amazon.co.jp/dp/B01CFGOZM0/ref=cm_sw_r_tw_dp_x_ajmiFbPP15C7H

Garmin心拍転送モード
https://support.garmin.com/ja-JP/?faq=8G7NCxDkuo6bUMb6YTY8j6

心臓が止まったらSNSに「死にました」と投稿する
https://qiita.com/inamori/items/9fccb65528f28f3a81bc
Acquia認定サイトビルダー試験その①

#Drupalを理解する

##モジュール
 - ユーザーアカウントの管理 (User module)
 - 基本コンテンツ管理 (Node module) 
 - フィールド管理(Field and Field UI modules)
 - ナビゲーションメニューの管理 (the core Menu UI module)
 - リスト、グリッド、およびブロックを作成する (Views and Views UI modules)

##テーマ
 - サイトの視覚的な外観を定義する一連のファイル

##ディストリビューション
 - コアソフトウェア、提供されたモジュール、テーマ、および事前定義された構成を含む単一のダウンロードとして、特定のタイプのサイトにサイトの機能を提供

##データのタイプ
 - コンテンツ
  - サイトの訪問者に表示することを意図した情報
 - 構成
  - コンテンツではないが比較的永続的なサイトに関する情報
 - 状態
  - cronジョブが最後に実行された時刻など、サイトの現在の状態に関する一時的な性質の情報
 - セッション
  - 個々のサイト訪問者がログインしているかどうかやCookieなど、サイトとのやり取りに関する情報

##Drupalプロジェクト
 - コアコンテンツ管理システムソフトウェアのほか、アドオンモジュール、追加のテーマ、翻訳、ドキュメント、および特殊目的のディストリビューションを開発することを目的としたFOSSプロジェクト
 - コミュニティには、特定のDrupal関連ソフトウェアの開発、ドキュメントの作成、Drupalソフトウェアのセキュリティの維持、Drupalソフトウェアの特定の言語への翻訳、特定の目的でのDrupalの使用など、さまざまなタスクを実行する多くの小さなグループが含まれる

##Drupal Association
 - 世界中で大規模な大会を開催
 - Drupal.orgの Webサイトとそれらが実行されるサーバーの維持
 - DrupalをWebプラットフォームとして宣伝する
 - Drupalの教育とトレーニングのサポート
 - Drupalコミュニティにその使命を支援するための助成金を提供する 
 - これらの目的のための資金調達

##Drupalライセンス
 - GNU General Public License（GPL）バージョン2以降
 - Drupal.org上のプロジェクトの一部であるファイルを自由にダウンロード、再利用、変更、および配布できる

#サイト計画

##リージョン
 - コンテンツを配置決定

##サイトレイアウトの計画
 - PC,SP両方のデザイン
 - すべてのページにあるべき情報
 - コンテンツ（定型更新）
 - ページタイプ

##コンテンツエンティティ
 - コンテンツデータのアイテム
 - コアソフトウェアまたはモジュールによって定義
 - エンティティタイプにグループ化され
  - コンテンツアイテム
  - コメント
  - ユーザープロフィール
  - カスタムブロック
  - タクソノミー
  - ファイル
  - フォーム

##フィールド
 - フィールドタイプは、コアソフトウェアまたはモジュールによって定義
 - 管理者はエンティティサブタイプにフィールドを追加できる

##モジュラーコンテンツ
 - モジュラーコンテンツを使用して複合ページとページセクションを作成
 - 重要なアイデアは、各情報が1つの場所でのみ編集される

##ワークフローの管理
 - 公開/非公開のステータス
 - リビジョン追跡
 - ワークフロー
 - ブロック配置

##ユーザーインターフェイス、構成、コンテンツ変換
 - ユーザーインターフェイステキスト
 - 構成テキスト
 - コンテンツのテキストとファイル

##セマンティックバージョニング(Semantic Versioning) ⇒ SemVer
 - 数字三桁
 - 必要Public API

```
※8.2.9
8 ⇒ メジャーバージョン　⇒　API変更
2 ⇒ マイナーバージョン　⇒　同一API
9 ⇒ パッチ　　　　　　　⇒　バグFIX
```

#インストールについて

##サーバー要件
 - ディスクスペース
  - ベースファイル100MB
 - PHP7.2以降、64MB以上のメモリーサイズ
 - ウェブサーバー
  - Apache(推奨)
  - Nginx
  - Microsoft IIS
 - データベース
  - MySQL-5.5.3以降とInnoDB互換のプライマリストレージエンジン
  - PostgreSQL-9.1.2以降
  - SQLite-3.4.2以降

##ツール
 - Drush and Drupal Console
  - ユーザーインターフェイスよりもコマンドラインの方が速い
  - サイト関連のコマンドをサーバー上の他のコマンドと組み合わせるスクリプトを記述して、より複雑なタスクを自動化
  - 管理インターフェースでは利用できない追加機能を提供（クエリなど）
 - Git
 - Composer
  - PHPの依存関係を管理するためのツール
 - Devel
 - Coder
  - モジュールとテーマがコーディング標準やその他のベストプラクティスに準拠しているかどうかを確認
  - コーディング標準違反を修正
 - ブラウザデバッグツール

#ユーザー、ロール、権限

##ユーザー
 - 匿名ユーザー
 - 認証ユーザー
 - 管理者ユーザー（ユーザーID１、ルートアカウント）

##権限
 - アクションを提供するモジュールによって定義

##ロール
 - 個々の権​​限を各ユーザーに直接割り当てるのではなく、権限をロールにグループ化

##Drupalバージョンアップ手順
 - バックアップ実施
 - メンテナンスモードに変更
 - コアのアップデート
 - データベースのアップデート(update.php実施)
 - メンテナンスモード解除
 - キャッシュクリア
 -
Windows で Automatic git sync

- git(https://git-scm.com/download/win) をダウンロードしてインストールする option(with linux command)
- 
```gitsync.bat
REM Switch Disk
D:
cd D:\your-git-folder
git checkout -f master
git fetch origin master

REM Keep Local Change File Here
git update-index --assume-unchanged Unity/Assets/Model/AppInfo.cs

REM Remove Merge Problem File Here
rm -rf Unity/Assets/Model/AppInfo.cs.meta

git pull origin master
PAUSE
```

後は TaskManager 実行するだけ
Debugbar をインストール

##Debugbarを使う。
まずは、Debugbarをインストールします。

```
$ composer require --dev barryvdh/laravel-debugbar
```
次にDebugbarの設定ファイルを作成します。

```
$ php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"
```

ここで作成された環境設定ファイル「.env」に、設定情報を記載します。

# 以下のいずれかを追記する。
```
DEBUGBAR_ENABLED=null  # デフォルト。APP_DEBUGに応じて決まる
DEBUGBAR_ENABLED=true  # 必ず有効
DEBUGBAR_ENABLED=false # 必ず無効
```

これでデバッグを行う準備ができました。
デバッグしたい場所に次のコードを記述すればデバッグすることができます。

```
 \Debugbar::info(確認したい変数など);
```
これでOKです！
[Rails] マイグレーションファイルの新規作成、書き方

マイグレーションファイルの新規作成コマンド
`rails g migration <migration-file-name>`

例えば、usersテーブルにカラムを追加、削除するマイグレーションファイルを作成するなら下記のように書く。
`rails g migration add_remove_column_to_users`

マイグレーションファイルの中には下記のように書く。

```.rb
def change
  # usesテーブルにbirthdayカラムを追加
  add_column :users, :birthday, :string
  # usesテーブルにageカラムを削除
  remove_column :users, :age, :string

end
```

最後に、
`rails g db:migrate`
をすればマイグレーションファイルがDBに反映されます。
【GitHub新機能】プロフィール画面にREADME.mdを追加できるようになったので自己紹介してみた

![mabataki_github.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/0d40ea15-582d-d034-f3fc-16bc35143a2f.gif)
GitHubのプロフィール画面が動いた…！

# GitHubプロフィール画面にREADME.mdを作れるようになったらしい
最近少し話題になっていますが、GitHubプロフィール画面にREADME.mdを作れるようになったらしいです。

ここに自分の経歴や実績などをまとめておけると強いですね！
転職や案件探しの時にGitHubのURLだけを提出すればいいだけになったら素敵やん。。

日本語版の情報はまだ少ないですが、海外だとそこそこ試している人が多いみたいです。

[How To Create A GitHub Profile README](https://www.aboutmonica.com/blog/how-to-create-a-github-profile-readme)

> GitHub recently released a feature that allows users to create a profile-level README to display prominently on their GitHub profile. This article walksthrough how to access this new feature.

自分もさっそく試してみたので作成方法をまとめておきます。

# さっそく試してみる
## Repository作成
自分のGitHubアカウント名と同じRepositoryを作成して、その直下にREADME.mdを作成するとできるみたいです。

<img width="553" alt="create1.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/3f45ec43-b998-992d-fcae-523686733aaf.png">

Repository nameに自分のGitHubアカウント名で `yagi-eng` を入力すると、以下のように案内が出てきました。
<img width="543" alt="create2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/2c42843c-d453-7468-c1b0-bde9c72e5f26.png">
⇒「Repository name」が赤くなっているのは自分は既にこの名前でRepositoryを作成済みのためです。

> You found a secret! yagi-eng/yagi-eng is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started.

README.mdが必要なので、 `Initialize this repository with a README` にはチェックを入れます。
もちろん後から作成してもOK。
<img width="306" alt="create3.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/bffba640-43da-8b2e-37ab-8540c93e2f63.png">

## プロフィールページを確認
https://github.com/yagi-eng
のように自分のプロフィールページにアクセスすると、自動生成されたREADME.mdの内容が表示されました！
<img width="939" alt="profile1.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/df06ba84-c2d4-126b-8022-841fcef34a4a.png">

> Hi there 👋

# 本格的に自分のプロフィールを書いてみる
## 完成品
https://github.com/yagi-eng
<img width="933" alt="result.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/f5879bb5-4f28-be17-c698-86d00c197c23.png">

あんまり長文を書きすぎると、`Top repositories` にたどり着くまでにたくさんスクロールしなくてはいけなくなるので、このくらいの分量が限度かなと思います。

詳細な経歴や実績はREADME.mdの末尾にリンクとしておいて、別ページに飛んでもらうと良さそうです。
自分はこのRepositoryのルート直下に `detail` ディレクトリを作成してそこにREADME.mdを配置し、そこに詳細な経歴を記載することにしました。

<img width="1113" alt="detail.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/0145c062-afa7-651d-29f0-7b240d3861d1.png">

まあmarkdownなのでなにか奇抜なデザインができるかというとそうでもないですが、gifを入れたりすると動きが出てライバルに差をつけることができますね！

でもhtmlタグを入れることもできるっぽい。。？
ここは自分は未検証です。

## ボツ案1
カバー画像を入れてみたけど邪魔だった。。
<img width="953" alt="coverari.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/7cfabbef-3356-c10b-6260-8dca77050409.png">

## ボツ案2
冒頭のように、遊び心で似顔絵がまばたきしているgifを入れてみたけど似顔絵2つはうざかった。。
![mabataki_github.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/0d40ea15-582d-d034-f3fc-16bc35143a2f.gif)
tiptap editor ペースト時にタグを削除

tiptapエディタを使うときにペーストする。
その際ゴミタグまでペーストされてしまう。
そんなとき、ゴミタグは削除してペーストする方法。

```
editor: new Editor({

editorProps: {

    //ペースト時に br タグと p タグは許可。それ以外の画像とかは削除する
    transformPastedHTML(str){
    
    var arrowTag = ['br', 'p'];
    
    // // 配列形式の場合は'|'で結合
    if ((Array.isArray ?
    Array.isArray(arrowTag)
    : Object.prototype.toString.call(arrowTag) === '[object Array]')
    ) {
    arrowTag = arrowTag.join('|');
    }
    
    // arrowTag が空の場合は全てのHTMLタグを除去する
    arrowTag = arrowTag ? arrowTag : '';
    
    // パターンを動的に生成
    var pattern = new RegExp('(?!<\\/?(' + arrowTag + ')(>|\\s[^>]*>))<("[^"]*"|\\\'[^\\\']*\\\'|[^\\\'">])*>', 'gim');
    return str.replace(pattern, '');
},

```

ちなみに改行brタグを利用するときは

```

import HardBreak from '../assets/HardBreak'

```

も必要なので読み込んでおく。
【初心者でもわかる】cssで使ってはいけないclass名、使わない方がいいclass名

# どうも、7noteです。今回はcssで使ってはいけないclass名、使わない方がいいclass名について。

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/technique/classname/
cJobjectでkintoneのデータをExcelシートに一括転記

#はじめに
１年以上前の案件がQiita下書きに残っていた。
忘れかけてたけど思い出しながら記録に残します。

#開発環境
Excel (Office365)

#背景
kintoneは帳票機能が弱い。
エクセル管理をやめてkintoneアプリで管理できるみたいなこと言うけど
帳票機能が貧弱過ぎて結局kintoneアプリのデータをエクセルに移して帳票するっていう需要があった。

#cJobjectとは
kintoneアプリのデータ(json)をエクセルデータに変換するのがcJobjectライブラリです。
jsonデータはそのままではエクセルデータには変換できない。

#事前に必要なこと
- kintone APIを生成しておく。
- kintoneアプリ番号を調べておく。
- kintoneの各パーツ（テキスト入力やラジオボタンなど）に対してちゃんと命名しておく。適当にやると後で分からなくなりがち。

- 
#内容
この順序で実施すればうまくいくはず。

1.クエリ生成
2.APIトークン情報
3.XMLHTTPオブジェクトの生成
4.リクエストを送信/レスポンスを取得
5.エクセルシートに入力

#####1.クエリ生成
１行目：エクセルのB3セルに入力されたクライアントNoを変数に代入する。
２行目：クライアントNoをキーにしてクエリを生成します。
３行目：URLエンコードします。
４行目：URLエンコードを使用してリクエストURLを生成します。
　　　　https://xxxx はテナント名を入れて、app=99はアプリ番号を入れる。

```vb:vba
str = Worksheets("Form").Range("B3").value
strQuery = "Client_No = " & str & ""

strQuery = URL_Encode(strQuery)
strURL = "https://xxxx.cybozu.com/k/v1/records.json?&app=99&query=" & strQuery
```

```vb:vba
Function URL_Encode(ByVal strOrg As String) As String
  Dim d As Object
  Dim elm As Object

  strOrg = Replace(strOrg, "\", "\\")
  strOrg = Replace(strOrg, "'", "\'")
  Set d = CreateObject("htmlfile")
  Set elm = d.createElement("span")
  elm.setAttribute "id", "result"
  d.appendChild elm
  d.parentWindow.execScript "document.getElementById('result').innerText = encodeURIComponent('" & strOrg & "');", "JScript"
  URL_Encode = elm.innerText

End Function
```

#####2.APIトークン情報
kintoneで作成したAPIトークンを変数に代入する。

```vb:vba
aipToken = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
```

#####3.XMLHTTPオブジェクトの生成
```vb:vba
Set objHttpReq = CreateObject("MSXML2.XMLHTTP")
objHttpReq.Open "GET", strURL, False

objHttpReq.setRequestHeader "X-Cybozu-API-Token", aipToken
objHttpReq.setRequestHeader "Host", "xxxx.cybozu.com" + ":443"
objHttpReq.setRequestHeader "If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT"
```

#####4.リクエストを送信/レスポンスを取得
エクセルB3セルに入力した、クライアントNoのレコードデータが配列変数strJSONに格納される。
クライアントNoがkintoneアプリ上に存在しなかった場合はエラー処理。

```vb:vba
objHttpReq.send (Null)

strJSON = objHttpReq.responseText
Debug.Print strJSON
Set resp = JSONParse(strJSON)

If strJSON = "{""records"":[],""totalCount"":null}" Then
    MsgBox "Client No: " & str & " is not found.", vbCritical
    Exit Sub
End If
```

#####5.エクセルシートに入力
仮にクライアント情報の住所データであれば、下記のように指定すればOK。
変数"records"はkintoneアプリ内の指定のレコードデータ（全フィールド）が代入されています。
そのデータのAddress1のデータにアクセスするには.child(1).child("Address1").child("value").valueを末尾に加える。

```vb:vba
Worksheets("Form").Range("P3").value = resp.child("records").child(1).child("Address1").child("value").value
```

kintoneアプリ内に作成した入力用テーブルの項目にアクセスするには長い記述が必要でした。
ここではkintoneアプリの入力用テーブル"TableA1"のフィールド"DescriptionA_1"のデータにアクセスして変数代入します。

```vb:vba
Worksheets("Form").Range("J9").value = resp.child("records").child(1).child("TableA1").child("value").child(1).child("value").child("DescriptionA_1").child("value").value
```

#おわりに
なさそうで意外にある、なし寄りのありな需要だと思います。
[Oracle PL/SQL] SQL*Plusで"Hello World!"出力

#　コード

```sql

SET SERVEROUTPUT ON; -- 出力結果を表示する

-- 無名ブロック
begin
  dbms_output.put_line('Hello World!');
end
/

```

# 出力表示設定確認

```sql
SQL> show serveroutput
-- serveroutput OFF の場合は出力結果が表示されない
```

# 参考

* [SET SERVEROUT[PUT] {ON | OFF} [SIZE {n | UNL[IMITED]}] [FOR[MAT] {WRA[PPED] | WOR[D_WRAPPED] | TRU[NCATED]}]](https://docs.oracle.com/cd/E57425_01/121/SQPUG/GUID-5EA17047-1EBC-44BA-A21A-B4CEC27FD6B0.htm)
jsPsychで直前のトライアル（画面）での反応に基づいて何かする方法

[jsPsych (de Leeuw, 2015)](https://www.jspsych.org/)は、心理学のオンライン実験を行うときに便利なJavaScriptライブラリです。詳しい使用方法は、@snishymさんの[jsPsychによる心理学実験作成チュートリアルまとめ](https://qiita.com/snishym/items/1e0511f8622282993ed1)をご覧ください。すばらしくまとまっています。

この記事では、実験中の反応に基づいて何かをする方法について解説します。例として、ある画像に対して反応したあとに、その反応時間を参加者にフィードバックすることを考えてみます。

jsPsychのexamplesフォルダにはたくさんのサンプルプログラムが入っていますが、この中のjspsych-image-keyboard-responseを変更してみましょう。このファイルを別名で（同じ場所に）保存します。そして次のオブジェクトを作成してください。

```javascript
var feedback = {
  type: 'html-keyboard-response',
  stimulus: 'Hello, World!',
  choices: ['space'],
  on_start: function(trial) {
    var all_data = jsPsych.data.get().values();
    console.log(all_data);
  }
}
```

feedbackは、html-keyboard-responseプラグインを使っているので、冒頭で次のようにしてプラグインを読み込む必要があります。

```javascript
<script src="../plugins/jspsych-html-keyboard-response.js"></script>
```

最後に、jsPsych.initの中にあるtimelineを次のように変更します。trial_3をfeedbackと入れ替えています。

```javascript
timeline: [trial_1, trial_2, feedback],
```

以上の変更を終えたらサンプルプログラムを動かしますが、ここではコンソールの表示を確認したいので次の手順を行ってくうださい。

- Chromeでは，表示　→　開発/管理　→ デベロッパーツール
- Firefoxでは，ツール　→　ウェブ開発　→　開発ツールを表示
- Safariでは，開発　→　JavaScriptコンソールを表示
- Edgeでは，F12キーを押す

プログラムを実行すると、2枚の画像が順番に表示されて、最後に **Hello, World!** と表示されるはずです。

さらにコンソールでは次のような表示が確認できるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495823/1f8dc990-fa9d-ebee-077f-756ad6303b8e.png)

2試行分の反応時間（rt）や刺激として表示されたファイルの名前（stimulus）が確認できますね。これは、

```javascript
var all_data = jsPsych.data.get().values();
console.log(all_data);
```
の結果です。つまり、`jsPsych.data.get().values();`によって、それまでのすべての結果を得ることができるわけです。`all_data[0]` とすれば最初に提示された画像に対する結果を、`all_data[1]` とすれば2番目に提示された画像に対する結果を参照することが可能です。

ではここで、**Hello, World!** と表示する代わりに、2番目の画像に対する反応時間を画面に表示することを考えてみましょう。

上記のコンソール画面を見ていただくと分かりやすいですが、2番目の画像に対する反応時間は、`all_data[1].rt`で参照することが可能です。

そして、on_start (event) 関数を使うことで stimulus (Hello, World!) を上書きすることが可能です。ぜひ[公式サイトの説明](https://www.jspsych.org/overview/trial/#the-on_start-event)もご覧ください。trialオブジェクトがその試行の刺激や受け付けるキー情報などを持っています。

ということで、on_startを以下のように変更すると、Hello, World! ではなく、2番目の画像に対する反応時間が表示されるようになります。

```javascript
  on_start: function(trial) {
    var all_data = jsPsych.data.get().values();
    console.log(all_data);
    trial.stimulus = all_data[1].rt;
  }
```

ちなみに、以下のように書いても挙動は同じです。ただ汎用性が高い書き方は上のほうだと思います（すべての試行のデータにアクセスできるため）。

```javascript
  on_start: function(trial) {
    var last_trial_data = jsPsych.data.getLastTrialData().values();
    trial.stimulus = last_trial_data[0].rt;
  }
```

なお、基本的に上に書いたことと同じものですが、[こちらの公式フォーラムでのやりとり](https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/jspsych/jnHnCRoHuOk/w6wDflVfBgAJ)も参考になると思います。
Googleカレンダーでリマインダーを検索する方法

Googleカレンダーの[リマインダー](https://support.google.com/calendar/answer/6285327)、便利ですが検索にちょっと難があります。

# Androidアプリでの検索

[Androidのカレンダーアプリ](https://play.google.com/store/apps/details?id=com.google.android.calendar)だと、予定と同様に普通に検索すれば表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335774/1402c144-769e-1adf-c64e-8534fb972f57.png)

# webアプリでの検索

ところがブラウザから[webアプリ](https://calendar.google.com/calendar/)でカレンダーを使うと、検索できるのは予定だけで、リマインダーは検索できません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335774/0b5fc4a1-78ac-e377-0e62-34f695465274.png)

Calendar Helpでも[以前から指摘](https://support.google.com/calendar/thread/10742241)されていますが、直る気配がないです。

# Google検索での検索

何か方法がないかと調べてみたら、[StackExchangeの投稿](https://webapps.stackexchange.com/questions/94732/how-to-search-reminders-added-to-google-calendar/130503#130503)で

```
search reminders 文字列
```
を(カレンダーでの検索ではなく)Google検索すれば出る、ということがわかりました:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335774/603f08a1-92c2-5855-0c2d-1ece870ec062.png)

しかしなぜか日本語のリマインダーは出ません…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335774/f1777f01-5b1a-470d-b50f-080a3965aac1.png)

もしかするとsearch my remindersに相当する日本語キーワードがあるのかもしれませんが、見つかりません。

# リマインダーの一覧

関連する[Calendar Help情報](https://support.google.com/calendar/thread/1446611?msgid=1450351)ですが、

```
my reminders
```
をGoogle検索するとリマインダー一覧も出ました。こちらは日本語も出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335774/fe3d0a42-f92a-43eb-400b-01e2ffc53e66.png)
カレンダーでもリマインダー以外のチェックボックスを外せばリマインダー一覧は出るわけですが、
入力した日付と思われる日付(7月29)も出るのがちょっと面白いです(使い道あるかわかりませんが)。

# もっと短縮できないか

Google検索だけあって、上記のキーワード以外にいろんなキーワードで同じことができるようです。
見つかった中では、検索は

```
find reminder 文字列
```
一覧は

```
my reminder
```
が一番短そうです。もっと短縮できたら教えて下さい。

いやその前に日本語検索をなんとかしたいところなんですが。
Mac用.gitignoreテンプレート

# gitignore Mac用

.DS_Storeとか、環境依存の不要なファイルをgitに混入させない設定

内容としては、[github/gitignore: A collection of useful .gitignore templates](https://github.com/github/gitignore)の紹介です。

## ディレクトリとファイル作って、vimで編集

まずはグローバルの設定を変更します。

```terminal
mkdir -p ~/.config/git && vim $_/ignore
```

## ignoreの中身 （コピペでOK）

参考: [gitignore/macOS.gitignore at master · github/gitignore](https://github.com/github/gitignore/blob/master/Global/macOS.gitignore)

```~/.config/git/ignore
# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
```

Mac以外の人は以下の一覧から探して入れる。
参考: [gitignore/Global at master · github/gitignore](https://github.com/github/gitignore/tree/master/Global)

## 言語ごとにローカルの.gitginoreを設定する

自分の場合はCなのでCのディレクトリの.gitignoreは以下の設定を入れる。

参考: [gitignore/C.gitignore at master · github/gitignore](https://github.com/github/gitignore/blob/master/C.gitignore)

```
# Prerequisites
*.d

# Object files
*.o
*.ko
*.obj
*.elf

# Linker output
*.ilk
*.map
*.exp

# Precompiled Headers
*.gch
*.pch

# Libraries
*.lib
*.a
*.la
*.lo

# Shared objects (inc. Windows DLLs)
*.dll
*.so
*.so.*
*.dylib

# Executables
*.exe
*.out
*.app
*.i*86
*.x86_64
*.hex

# Debug files
*.dSYM/
*.su
*.idb
*.pdb

# Kernel Module Compile Results
*.mod*
*.cmd
.tmp_versions/
modules.order
Module.symvers
Mkfile.old
dkms.conf
```

他にもいろんな言語が網羅されています。
参考: [github/gitignore: A collection of useful .gitignore templates](https://github.com/github/gitignore)
Raspberry Pi 4BとArduino Uno R3を使ったローバー開発日記

# はじめに
どーも、ゆーじです。
大学在学時から個人的にずっとやりたかったローバーを作るプロジェクトを始めることにしました。
これまで大学のロケットチームの高度制御システム開発でRaspberry Pi ZeroやArduino Nanoに触れる機会があったのですが、基本的に回路設計などの電子系は全部チームメイトに任せて、ソフトウエアとメカニカルのデザインしかやってこなかったので、今回、ローバーを一人で作ることを通して色々勉強しようと思います。

# ローバーの機能リスト
具体的にどんなローバーにするか開発しながら決めていく予定ですが、現状は以下のものです。

+ モーターによる前後左右移動
+ カメラで遠隔操作
+ 障害物認識・自動回避

# 手順
以下の手順で開発を進めていきたいと思います。随時更新していくつもりです！

+ 電子系部品の準備
+ 車体部品の準備
+ Raspberry Piのカメラモジュールのセットアップ
+ 車体組み立てとArduinoでモータ制御
+ Arduino UnoとRaspberry Pi 4Bのシリアル通信
+ Raspberry PiとFirebaseとスマホアプリで遠隔操作
+ 遠隔操作アプリへのカメラのストリーミングの組み込み
+ OpenCVと超音波センサーで障害物回避
会員登録（変更）時に認証URLだけで完了するのをやめて欲しい

会員登録やメールアドレスの変更時に、メールアドレスの存在確認のために認証用URLを送信して、それをクリックさせて会員登録（変更）完了、というシステムがよくあるけれど、危ないのでやめてほしい。

1. メールアドレスを間違えて登録
2. それがたまたま他人（Aさん）のメールアドレスとマッチし、そこに受信する
3. Aさんが認証URLをクリックする
4. 認証完了
5. Aさんがログインできるようになる
6. あれ、私の個人情報、丸見え？ 

これ、二段階認証などを設定していた場合でも、**認証URLが正しければ変更完了、かつ、ログインする** というシステムまであって「まじかよ？」となる。

せめて、

- 認証メールクリックからのパスワード入力

とか

- メールには認証用URLではなくpinコードあたりを送信してメール送信画面で入力する

とかにしてくれないだろうか。

「確認用メールアドレスの入力欄があるから大丈夫」って誰が考えたんだろう・・・
【PHP】ChatworkAPIを用いてファイルを送信する

```
// Chatworkの送信先ルームID
$room_id = '000000';

// APIトークン
$api_token = '*********';

// ファイルの設定
$file = new CURLFile('./file.xml', 'text/xml', 'filename.xml');
    // Laravelの場合
    // $file = new \CURLFile('./file.xml', 'text/xml', 'filename.xml');

// メッセージの設定
$message = 'メッセージ';

$options = array(
    CURLOPT_URL => 'https://api.chatwork.com/v2/rooms/'.$room_id.'/files',
    CURLOPT_HTTPHEADER => [
        'X-ChatWorkToken: '. $api_token,
        'Content-Type: multipart/form-data'
    ],
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => [
        'message' => $message,
        'file' => $file,
    ],
);

$ch = curl_init();
curl_setopt_array($ch, $options);
$response = curl_exec($ch);
curl_close($ch);
```

参照
https://developer.chatwork.com/ja/endpoint_rooms.html#POST-rooms-room_id-files
最適化コンパイラを作りたい人にとって必要な解析器の数学的基礎を与えてくれそうな An Introduction to the Theory of Optimizing Compilers の斜め読みのしかた

超ニッチな記事です。

An Introduction to the Theory of Optimizing Compilers という書籍を知りました。[(Amazon リンク)](https://amzn.to/30Teck0)

一読して，この書籍は最適化コンパイラを作りたい人にとって必要な解析器の数学的基礎を与えてくれそうな書籍だと思いました。なので，2020年度はこの書籍を輪読することにしました。

この記事は，この書籍を読むにあたって，読破するためのモチベーションを高めるために，斜め読みして，どんなことに役立つかを先に知る方法について紹介します。

# 1. 目次より，章のタイトルを眺めます

この書籍の各章のタイトルとそれぞれのページ数を紹介します。

1. Fundamentals: 36
2. The Control Flow Graph: 52
3. Data Dependence Analysis: 14
4. Dataflow Analysis: 32
5. Optimization on SSA Form: 76
6. Instruction Scheduling: 16
7. Resister Allocation: 14
8. Whole-program optimization: 4
9. LLVM: 10
10. Performance Measurements: 4

このうち，第9章，第10章はページ数からも分かるとおり，おまけ程度の記載です。これらを期待して買うとガッカリします。

それぞれの解析の用途がわかる達人だったら，目次を見ただけで，期待値が高まることでしょう。目次の次のページに掲載しているアルゴリズムの一覧もあるので，それらを活用して必要な時に辞書的な使い方をするというのもありです。

本記事は，コンパイラの基礎は学習済で，私にそそのかされて，この書籍を買ってはみたものの，この各章のタイトルを読んだだけでは，ピンとこない人向けの記事です。

# 斜め読みするポイント

この書籍が何に役立つのかを知るためには，次の箇所を斜め読みすると良いです。

* 1.1節 Introduction
* 第2〜6章の各章の第1パラグラフ (第7章以降も第1パラグラフを読むと良いのですが，少し分量が多くなります。ざっと掴むには第6章までで良いかも)
* 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8 の各節の第1パラグラフ

最適化コンパイラを作りたいという意欲がある初学者にとっては，これらを読むことで，読破するモチベーションが高まるものと思います！

# おわりに

この書籍は，意外なことに，基本的に数学の本なので，頭からていねいに読まないと身につかないものと思います。でもそういう人は，作りたい気持ちが先行すると思うので，このような記事を書いてみました。数学は基礎の積み上げが大事だけど，それに立ち向かうのには途切れることがないモチベーションがいるものなので，その助けになればと思います。
Rails 複数カラムの追加

##やり方

```:ターミナル
$ rails g migration AddColumnToUsers
```

```ruby:マイグレーションファイル
class AddColumnToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :family_name, :string
    add_column :users, :first_name, :string
    add_column :users, :family_name_kana, :string
    add_column :users, :first_name_kana, :string
  end
end
```
Vue3でv-modelがどう変わったか

## はじめに
Vue3になって、v-modelにも少し変更があったようなので、
どう変わったのか動作を確かめてみました。
変更点については、以下を参考にしています。
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md

## 変更点
### 通常の使い方は変わらない
これまで通り、`<input>`要素に対してのv-modelの使い方は変わらないようです。

```html
<input v-model="name" type="text">
```

### 値を受けとるProps名がvalueからmodelValueに変更
Vue2.0だと明示的に指定しない場合は`value`というpropsに対してv-modelの値がバインドされていましたが、
Vue3では、`modelValue`という名前のpropsに対してバインドされるようになっています。

**[Vue2以前]**

```javascript
export default {
  props: {
    value: String //ここにv-modelで渡される値が入る
  }
}
```

**[Vue3]**

```javascript
export default {
  props: {
    modelValue: String //ここにv-modelで渡される値が入る
  }
}
```

### 複数のデータをv-modelで同期できるようになる
Vue2.0だとv-modelは子コンポーネントの`value`propsにバインドされていたため、
v-modelによって子コンポーネントの複数のデータと同期することができなかったのですが、
Vue3では、props名を指定することで複数データの同期ができるようになってます。

```vuejs:ParentForm.vue(親)
<name-input
  v-model:familyName="familyName"
  v-model:givenName="givenName"
></name-input>
```
```vuejs:NameInput.vue(子)
<div>
  <input :value="givenName" @input="$emit('update:givenName', $event.target.value)" type="text">
  <input :value="familyName" @input="$emit('update:familyName', $event.target.value)" type="text">
</div>
```


実のところVue2.0でも複数のデータを同期したい場合は、
`.sync`を使用することで同様のことができました。（※2.3.0以降）

[.sync 修飾子 — Vue.js](https://jp.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A3%BE%E5%AD%90)

例えば、名前を入力するコンポーネントがあった場合、
次のような形で、子のプロパティと同期することができました。

```vuejs:ParentForm.vue(親)

<name-input
  :familyName.sync="familyName"
  :givenName.sync="givenName"
></name-input>
```

```vuejs:NameInput.vue(子)
<div>
  <input :value="givenName" @input="$emit('update:givenName', $event.target.value)" type="text">
  <input :value="familyName" @input="$emit('update:familyName', $event.target.value)" type="text">
</div>
```

見ての通り子コンポーネント側は変わってないです。
このことから、
今回の変更は、「これまでの`.sync`をv-modelという名前で使えるようになった」という理解の方が近いと思いました。
※`.sync`はv-modelと同じ動きになるということで、廃止されています。

## 最後に
内部的な仕様は変わりつつも、
使う側がその変更を極力意識しなくて済むように
アップデートされていていいなと思いました。
v-modelは便利なので、これからも上手く使っていきたいです。

また、間違いや指摘etcがあれば、是非コメントにお願いします！

## 追記（2021/03/06）
公式ドキュメントにも分かりやすい説明が記載されているのでリンク貼っておききます。
（日）https://v3.ja.vuejs.org/guide/migration/v-model.html
（英）https://v3-migration.vuejs.org/breaking-changes/v-model.html
調べたりするのによく使うサイトとか本とか

###初めに
タイトル通りよく使っているサイトとか本を記載します。
こんなサイトもいいよという情報が有れば教えてコメントしてください。
***とても喜びます***

---

[IT用語辞典 e-Works](http://e-words.jp/)
サイト名通りIT用語についての情報がまとめられている。
ググってよくわからないサイトに行くよりは、すんなりほしい情報が得られると思う
大体最初にここで調べてザックリ理解してもう少し情報が欲しいときにググる
HTTPについて[備忘録]

###初めに

HTTPとは、ブラウザーとサーバー間(クライアントとサーバー)でデータをやり取りするための取り決め(プロトコル)
やり取りをするために使われるのが、**HTTPメッセージ**というもの
HTTPメッセージには**HTTPリクエスト**と**HTTPレスポンス**がある

---
###HTTPリクエストとHTTPレスポンス[比較表]
[クライアント→サーバー/(サーバー→クライアント]

| |ステータス行|メッセージヘッダー|メッセージボディ|
|:-----------------|:------------------:|:------------------:|:------------------:|
|HTTPリクエスト(クライアント→サーバー)|Webサーバーに対してどのような処理を依頼するのかを伝える情報が含まれている|webブラウザーとかの種類とかいろいろな情報を伝える|webサーバーにデータを送るために使われる。空の場合もある|
|HTTPレスポンス(サーバー→クライアント)|webブラウザーにサーバー内での処理の結果を伝える。ステータスコード|webサーバー情報とかを伝える|HTMLや画像などのデータを格納する。|

---
###HTTPステータスコード

・異常値のみのピックアップ(3xx~5xx)
[HTTPステータスコード](http://www5.plala.or.jp/vaio0630/mail/st_code.htm)

---
気が向いたら更新します
GCSでデータを一般公開する方法が変わった

GCPコンソール上で、GCSに格納しているデータを一般公開する方法が変わったようです。

GCSの「データの一般公開」に関する[公式ドキュメント](https://cloud.google.com/storage/docs/access-control/making-data-public)をみると、英語版では最新になっていますが、日本語版は未更新のようです。
※2020/7/29時点

# これまでの方法
GCSのブラウザの「権限を編集」し、「ユーザー」エンティティの名前を「allUsers」にし、アクセス権限を「読み取り」にすることでデータを一般公開できた。

**GCSのブラウザでGCSのブラウザの「権限を編集」をクリック**
<img width="1408" alt="object_setting_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337794/ee3863ac-7754-2049-4688-b6e5ab9e24cc.png">

**「ユーザー」エンティティの名前を「allUsers」にし、アクセス権限を「読み取り」にする**
<img width="514" alt="object_setting_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337794/1508464e-f203-1989-0153-fc518611944f.png">

# これからの方法
GCSのブラウザの「権限を編集」し、エンティティを「Public」にするだけでデータを一般公開できる。

![スクリーンショット 2020-07-29 10.27.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337794/ead74a0d-0aa8-5688-a08e-c1c197c52150.png)
vue.js truncate

以下を参考にしたが、引数を取得できなくて
うまく動かない。

https://qiita.com/7kaji/items/a280c6b5353efa0a7c35

ということで最新版。

```app.js

Vue.filter('truncate', (value, length) => {
    if(value){
        var length = length ? parseInt(length, 10) : 20;
        if (value.length <= length) {
            return value;
        }
        return value.substring(0, length) + '...';
    }
});

```

```hoge.vue

<p>{{v.make_body_text | truncate(180) }}</p>


```

これで 180文字に省略されて出力される。
[jQuery] Ajax

Here it is.

```javascript

<script>

  $('#elementid').click(function(){
 
    $.ajax({
        url:"api-url",
        type:"POST",
        dataType:"json",
        data: {a:1, b:2}
    })
    .done((data,status,jqXHR) => {
      console.log(data);

      $("#elementid").text(data["rootobj"]["childobj"]);
    })
    .fail((data) => {
      console.log(data.responseText); 
    })
    .always((data) => {
      console.log(data);
    });
  });
</script>
```
[Go]文字コードのUTF-8変換を行う - charset decode

# 実現したい機能

`Shift-JIS` `EUC-JP` `ISO-2022-JP`等の文字コードであるstringをGo内部で扱えるよう `UTF-8` にデコードする。

# 実装

文字コードが既に分かっている場合の変換は以下の手順で実現できる。

* 入力stringのcharsetに応じたdecoderを取得
* decoderを用いてstringをUTF-8にdecode

```Go
package main

import (
	"errors"
	"fmt"
	"golang.org/x/net/html/charset"
	"golang.org/x/text/transform"
)

// Converts the specified charset to UTF-8.
func Decode(src []byte, charSet string) (string, error) {
	e, _ := charset.Lookup(charSet)
	if e == nil {
		return string(src), errors.New(fmt.Sprintf("invalid charset [%s]", charSet))
	}
	decodeStr, _, err := transform.Bytes(
		e.NewDecoder(),
		src,
	)
	if err != nil {
		return string(src), err
	}
	return string(decodeStr), nil
}
```

# 使い方

```Go
func TestDecode(t *testing.T) {
	t.Run("SJIS -> UTF-8", func(t *testing.T) {
		src := <SJIS byte slice>
		// encodingの指定は"sjis"や"Shift_JIS"でも可
		decoded, err := Decode(src, "shift_jis")
		fmt.Println(decoded)
	})
}
```

# その他

今回のソースコードは以下に置いておきます。
https://github.com/tomtwinkle/go-encoding-decoder
Windows Server2016への.NET 3.5のインストール

#古いプログラムの起動時に.NET 3.5のインストールを求められ、失敗。
[リンク](https://awsbloglink.wordpress.com/2017/01/17/windows-server-2016-net-3-5%E3%82%A8%E3%83%A9%E3%83%BC%E5%AF%BE%E5%87%A6%E6%96%B9%E6%B3%95/)
[リンク](https://awsbloglink.wordpress.com/2018/10/24/windows-server-2019-net-framework-3-5%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%AB%E5%A4%B1%E6%95%97%E3%81%97%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE%E7%AD%96/)
ということで、ググると上述のリンクなどいろいろと事例が出てきた。

いろいろと調べて以下の方法を試したが、どれも失敗した。
　・インストールメディア→ｘ (持ってない)
　・~\WinSxSフォルダのパスを明示指定してインストール→ｘ(.NET 3.5インストーラーがなかった)
　・Windows Update経由でインストール→ｘ　(仮想環境のネットワークをローカルにしている)

振り返ればcabファイルないんだから失敗して当然よね、、、

#どうやら.NET 3.5のインストーラーが必要らしい
とはいえ正規パスがどれもダメだったので、どこかに落ちてないかネットを徘徊
　　↓
あった　[リンク](https://qwerty.work/blog/2019/09/windows10-netfx35-offline-install.php#toc0)　の”必要なcabファイル（NetFx3.zip）”という箇所からダウンロードできました。

どなたかわかりませんが、深謝。

#インストール
　上述のzipを解凍して
　”microsoft-windows-netfx3～.cab”を~\WinSxSフォルダ、もしくは任意のパスにコピー
　　↓
　サーバーマネージャー
　　->　役割と機能の追加
　　　　->　”webサーバー|アプリケーション開発|.NET機能拡張3.5”を選択
　　　　　　->　~\WinSxSフォルダにcabファイルを置いていなければ任意のパスを選択
　　↓
　インストール
　　↓
　成功！


#まとめ
　・Windows server 2012以降では.NET 3.5は手動でインストールが必要
　・インストールに失敗した場合には [リンク](https://docs.microsoft.com/en-us/archive/blogs/askcorejp/windows-8-windows-server-2012-net-framework-3-5) の手順でインストールすればよい
　・なんらかの理由があって正式な手順ではインストールできない場合は
　　[リンク先](https://qwerty.work/blog/2019/09/windows10-netfx35-offline-install.php#toc0)　の賢者のファイルを使わせてもらう
WordPress iPad/iPhone/Androidでの改行問題

# iPad/iPhoneで改行ができない！
知人に提供しているWordPressのページに、iPadで改行ができないから何とかしてほしいとの依頼が入りました。iPad/iPhoneでは、Shift+Enterができないことが原因です。Androidも同様の問題があるようです。

# 典型的な対策
「がんばれ」で済ませたかったのですが、どうも本当に困っているようなので調べてみました。
調べてみると、苦労されている方が多いようですが、iPadにキーボードをつけるという解決策がほとんど。キーボードをつけてはどうかと提案しましたが、移動中にWordPressを更新したいので、キーボードは無理！ということになりました。

# WordPressのfunctions.phpで対応
仕方がないのでさらに調べてみると、WordPressのfunctions.phpで、改行を変更できることを見つけました。

[[WordPress]スマホアプリで改行と段落をどうするのかを色々と模索](https://blog.g-fellows.com/web/wordpress/9328/)

```
/*
 * Enter for iPad
 * src https://blog.g-fellows.com/web/wordpress/9328/                                            
 */
function TinyMceInitOptions4BrOnly( $initArray )
{
    $initArray = array_merge( $initArray,  array('force_br_newlines' =>  true) );
    $initArray = array_merge( $initArray,  array('forced_root_block' => '') );
    $initArray = array_merge( $initArray,  array('force_p_newlines' => false) );
    return $initArray;
}
add_filter('teeny_mce_before_init', 'TinyMceInitOptions4BrOnly');
add_filter('tiny_mce_before_init', 'TinyMceInitOptions4BrOnly');
```

# むすび
修正を加えた結果、思ったように編集ができるようになったようです。
内容がわかって対応できたわけではない点が残念ですが、結果よしということになりました。
気になっている記事【開発編】

Salesforce関係で見つけた気になる記事。時間があればじっくり内容を確かめたい

1.Apexでzipファイルを扱う。
https://github.com/pdalcol/Zippex

2.Google ドライブをApexで扱う
質問している内容ですがGoogleドライブとの接続の方法は有益そうです。
https://trailblazers.salesforce.com/answers?id=9064S000000CoMqQAK

3.カスタムメタデータを数式で使っている
こんな使い方ができるんだ
https://trailblazers.salesforce.com/answers?id=9064S000000Cq6bQAC
連載：「DevOpsどうやってやろう」を理論に沿って考察＆トライしてみる（第1回：DevOpsってなんや）

# 概要
「WEB業界の2025年問題」への自分なりの解決策を見出すためのインプットの備忘です。
* 参考元「The DevOps ハンドブック 理論・原則・実践のすべて」：https://amzn.to/2OWmvps
* 第0回「きっかけ」：https://qiita.com/WdknWdkn/items/4449b7a2c66e12411d2c

# インプット内容

## 「開発（development）」と「運用（operation）」
* 「スピーディな改善」を「継続的」に行うため、「開発（development）」と「運用（operation）」が効果的に改善を図っていく組織、フロー、体制、商品、を総称して「DevOps」という。

* 元々は、IT以前の「モノづくり」の生産管理のためにブラッシュアップされていっていた生産効率向上の改善の型をITに応用した（「リーン生産方式」とか「トヨタ式」とか）

* 製品が要望を受けてから実現されるまでの「流れ」を「バリューストリーム」という。

## 改善のための3つの指標
* リードタイム：クライアントの要望発見からその実現するまでの期間
* プロセスタイム：リードタイムの中でも、特に実際に作業着手してから実現するまでの期間
* %C/A：完全正確率、バリューストリーム内において、各プロセスの品質を表す。「下流のプロセス」にそのままの状態で使えたかどうか、を割合として示す「手戻りの指標」。

## 改善のための3つの原則
* 原則１：ワークフローの高速化
* 原則２：素早くコンスタントなフィードバック
* 原則３：トライ＆エラーに基づいて学習していく組織文化

# 感想
* 今日は言葉の定義でしたね。改善のための指標１～２は、計測がめんどくさいという課題から解決していきたいところ。まずはチケット管理の中での自動化方法から7日なあと思いました。
* %C/Aは、そもそもプロセスを分解できてないと土台に立たないので準備が色々必要かなあ。
* 「やるべきことが増えて焦る」という心境。

# 参考図書

「The DevOps ハンドブック 理論・原則・実践のすべて」
https://amzn.to/2OWmvps