OmniAICreator/Qiita-1.07M huggingface dataset:
WSL2にupgradeしてついでにDockerをいれる

[前回のインストール時の2020/7/4時点](https://qiita.com/celeron1ghz/items/7cfeed2bf3fd1e0b34f8)だと、デフォルトでインストール
されるのがWSL1だったが、WSL2が正式リリースになっていたのでWSL2を入れる。


## まずはWindows Update
現時点でWindows Updateに来ていないので手動で入れる

https://www.microsoft.com/ja-jp/software-download/windows10

割と時間が掛かるので気長に待つ。
ついでにWSL2のカーネルも入れておく

https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-kernel

## 仮想化のセットアップ

ここはPowerShellで行う。
PowerShellを **管理者権限で実行** して下記コマンドを実行

```
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform
```

## WSL2へupgrade

ここもPowerShellで行う。
まずは現状確認。

```
PS C:\WINDOWS\system32> wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-20.04    Stopped         1
```

で、デフォルトをWSL2に変えておく。

```
wsl --set-default-version 2
```

既にインストール済みのWSL1のやつがあったらconvertする。

```
wsl --set-version ubuntu-20.04 2
```

確認。OK!

```
  NAME            STATE           VERSION
* Ubuntu-20.04    Stopped         2
```

## Dockerをインストール

ここからはUbuntuで実行。
PGP鍵を入れる。

```
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```

aptのrepositoryを追加。

```
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
```

インストール。GRUBの設定画面が出るけれど何も選択せずにOKを押す。

```
sudo apt install -y docker-ce docker-compose
```

sudoなしでもできるようにグループを追加したうえでdocker daemon起動。

```
sudo usermod -aG docker $USER
sudo service docker start
```

docker runで動作チェック

```
$ docker run hello-world

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/
```

ヨシ！

WSL2にしたらコマンドのレスポンスが早くなった気がするし、aptのファイルダウンロード時に200kとかしか出なかったのが3Mくらいは出るようになったのでWSL2化の恩恵はだいぶありそう。（そもそも無線が遅いのは何とかする）

前回のようにdockerをWindowsの管理者権限で実行する必要もなくよいです。


## 参考
https://qiita.com/TsuyoshiUshio@github/items/947301bd9317610572fc
https://qiita.com/toyotoyo_/items/895c07fb50708b013eba
CentOS7 VirtualBox Guest Additonsのインストール

#初めに
VirtualBoxで**GuestAdditions**とやらを有効にすると、仮想マシンのウィンドウ内外でマウスカーソルがシームレスに行き来きできる（デフォルトでは右Ctrlキー押下しないと外に出れない）ようになったり、ウィンドウサイズを変えると自動で解像度も変わってくれるようになります。
本記事ではその**GuestAdditions**の（CentOS7の場合の）インストール方法を解説しようと思います。

- 環境
    - VirtualBox6.1
    - ホストOS（VirtualBoxを実行してるやつ）: Windows10
    - ゲストOS（VirtualBox上で動いてるやつ）: CentOS7(GUI環境)

#Outline
||手順|
|:--:|:--|
|0|[準備](#0準備)|
|1|[LinuxのKernelを更新する](#1linuxのkernelを更新する)|
|2|[必要なパッケージのインストール](#2必要なパッケージのインストール)|
|3|[Guest Additions CDイメージの挿入](#3guest-additions-cdイメージの挿入)|

##0.準備
- CentOSのネットワークの設定
    - VirtualBoxのネットワークアダプタを「ブリッジ接続」にする。
    - IPv4、DNSの設定とか。

[CentOS7のネットワーク設定](https://qiita.com/taro0219/items/8d3be39c5cb882d1ba5d)

##1.LinuxのKernelを更新する
CentOSが立ち上がったらTerminalを立ち上げて、まずスイッチユーザー`su -`して、パスを入力。rootユーザーになります。
そして、`yum update kernel`でKernelを更新。
この時コマンドの実行に失敗した場合、ネットワーク接続ができないのが原因かもなので、もししてなければ設定しましょう。
途中「Is this ok」と何回か聞かれるので、無心で「y」してEnterしましょう。
「Complete!」と表示されればOKです。
ここで再起動が必要なので、`reboot`しましょう。
再起動したら、↓こんな感じに一番上に新しく選択できるKernelが増えているので、それを選択します。
![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664625/ce8eb40e-47dc-1a13-c2c7-0c3e63351c59.jpeg)


##2.必要なパッケージのインストール
またrootユーザーでログインします。
パッケージ類をインストールします。

```
# yum -y install bzip2 elfutils-libelf-devel gcc kernel-devel kernel-headers make perl tar
```
「Complete!」と表示されれば成功です。他にもパッケージを要求されたら、表示に従えば大丈夫（だと思います。。。）

##3.Guest Additions CDイメージの挿入
VirtualBox上部の、「デバイス」→「Guest Additions CD イメージの挿入」とします。
![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664625/e15e5a6c-7444-6172-2d0e-98dbb39d2860.jpeg)
これで完了です！
rubyのバージョンが切り替わらない時の最終確認

#今回の目標
rbenvでインストールしたrubyのバージョンを正しく反映させる。

##想定する読者層
- rbenvでインストール済み
- インストール済みのrubyを確認済み
-  パスが通っている
-  ~/.zshrcに rbenv initが記述してある

ここまでの作業は良記事がたくさんあるため割愛します。

#それでもバージョンが切り替わらない方、以下の手順はもうお済みでしょうか？

```
$rbenv versions
system
* 2.6.3 (set by /Users/.../.ruby-version)
2.6.4
```
この.ruby-version って何者？

>引用(rbenvで切り替わらないとき)
  >>rbenv local で設定したバージョンは今いるディレクトリの .ruby-version ファイルに記録され、そのディレクトリにいる限り rbenv global で設定したバージョンよりも優先されます。

以上よりrubyのバージョンが切り替わらなかったのは、ruby-versionに記録されたバージョンが優先されていたためでした。
ここまで来ればゴールはすぐそこです。

#いよいよrubyのバージョンを切り替える

```
$rm .ruby-version
$rbenv global(local)  インストールしたrubyのバージョン
$rbenv rehash
$ruby -v(ここでバージョンが切り替わっていれば良い)
```

お疲れさまでした。


###参考
[rbenvで切り替わらないとき] (https://qiita.com/daddygongon/items/e529e585f8b37e894499)
[Ruby rbenv global 2.3.0 でバージョンが切り替わらない](https://www.d-wood.com/blog/2016/02/02_7781.html)
codecov.io でカバレッジ計測とバッジ取得する手順

## 注意

今は codeclimate.com の方がカバレッジと同時にメンテナンス性も解析できます。
[Engineering Metrics to Improve Continuous Delivery Practices | Velocity](https://codeclimate.com/)

念のため、codecov.io の手順をここに残しておきます。
[The Leading Code Coverage Solution | Codecov](https://codecov.io/)

## 手順

### 1. GitHub のリポジトリーに GitHub Actions の設定を行います

ここでは Python プロジェクトで Pipenv を使っている場合を例に説明します。
`.github/workflows/analyze.yml` を新規作成し、次のコードをコピーします。

```yaml
on:
  push:
    branches:
      - master
jobs:
  analyze:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-python@v2
        with:
          python-version: '3.8'
      - run: python -m pip install pipenv
      - run: python -m pipenv sync --dev
      - run: python -m pipenv run coverage_xml
      - uses: codecov/codecov-action@v1
        with:
          token: ${{ secrets.CODECOV_TOKEN }}
          file: ./coverage.xml
          fail_ci_if_error: true
```

上記の YAML では、次の GitHub Actions を使って codecov.io に Coverage の XML (`./coverage.xml`) をアップロードしています
[Codecov · Actions · GitHub Marketplace](https://github.com/marketplace/actions/codecov)
上記の GitHub Actions を実行する前に、なんらかの方法で Coverage を XML で出力しておく必要があります
(各言語で方法が変わってきます)

### 2. codecov.io と GitHub のリポジトリーを関連付けます

2-1.
codecov.io にログインし、`Add new repository` ボタンをクリック
[The Leading Code Coverage Solution | Codecov](https://codecov.io/)

2-2.
対象のリポジトリーをクリック

2-3.
Repository Upload Token が表示されるので、クリップボードにコピーします。

2-4.
GitHub のリポジトリーに移動し、
`Settings` -> `Secrets` -> `Add new secret` をクリック

2-5.
フォームに次のように入力して `Add secret` ボタンをクリック

`Name`: “CODECOV_TOKEN”
`Value`: 手順 2-3. でコピーした文字列をペースト
M5StickCでスマートメーターの電力を読み取る（BP35C0-J11-T01編）

# 概要
[M5StickCで家庭用スマートメーターをハックする！](https://kitto-yakudatsu.com/archives/7206) をBP35C0-J11-T01でやってみました。

# BP35C0-J11-T01について
BP35C0-J11-T01というのはローム社のBルート/Enhanced HAN対応無線モジュールBP35C0-J11を2.54mmピッチの基板に差せるようにしたものです。（シリーズ内のBP35C1-J11-T01はBP35A1と同じコネクタ？）
インターネット上の記事でよく使われるBP35A1と比較したBP35C0-J11の特徴は以下の通りです。

- Wi-SUN Enhanced HAN通信に対応
- **コマンド送受信がJ11-UART規格のバイナリ**（BP35A1はSKSTACK-IP用SKコマンド、テキストベース）

コマンド体系が変わることで大部分書き換える必要があったので公開してみました。

# 用意したもの
 
- BP35C0-J11-T01
- 外付けアンテナ
- M5StickC
- ブレッドボード

BP35C0-J11はアンテナ外付けが必要ですが、特定小電力無線なのでBP35C0-J11との組み合わせで技適対応が確認されたものを使用する必要があります。（[対応製品のリストはここに掲載されています](https://micro.rohm.com/jp/download_support/wi-sun/)）


# 結線
M5StickCとBP35C0-J11-T01を以下のように結線します。なおブレッドボードに直接差そうとするとCN3が邪魔なのでCN3のピンヘッダを外すか、ピンソケットで下駄をはかせる必要があります。

|M5StickC|BP35C0-J11-T01|
|:-:|:-:|
|GND|CN1-1 or 9(GND)|
|3V3|CN1-4 or 5(VCC)|
|G36|CN2-5(TXD)|
|G26|CN2-7(RESET)|
|G0 |CN2-4(RXD)|

![ブレッドボードでの実装例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494347/6ff7f267-245e-72d8-46b6-b94a57b445b2.jpeg) ![M5StickCとBP35C0-J11-T01を載せるとこんな感じ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494347/430f4204-b144-2387-b41f-3ae9d5732b13.jpeg)

# プログラム

[ソースはgithubに置いています。](https://github.com/regreh/m5stickc_bp35c0-j11)

[元のプログラム](https://github.com/rin-ofumi/m5stickc_wisun_hat)の手順のうちtest_WiSUN_Ambient.pyの代わりにtest_WiSUN_Ambient_J11.pyをアップロードします。
ESPNOW関連のコードは互換性があるのでモニター子機は元のプログラムのものがそのまま使えます。


## 考慮すべき点

- 応答が可変長バイナリなのでreadlineが使えない
- コマンド送信時にチェックサムを付与する必要がある
- readで読み取った内容に応答1文が完全に含まれているとは限らない、逆に2文以上の応答を受信しているかもしれない
- 数日動かしているとPANA再認証の通信に失敗し、スマートメーターと通信できなくなることがある → 自動再起動で対処
ディレクトリのファイル名を取得する(glob)

#1 この記事は何？

あるフォルダにあるファイルのうち指定した単語を含む(例:.htm)ファイル名を取得する方法を説明します。


#2 コードの書き方

filepathに指定したディレクトリにあるファイルのうち、ファイル名に「.htm」を含むものを取り出すコードです。

```python:test.py
import glob

filepath = 'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc/'

files = glob.glob(filepath+'*.htm') #htmファイルの取得
files = sorted(files) #ファイルを並び替えているだけ
print(files)
```


★★　実行結果　★★　

```console:
['C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0000000_header_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0101010_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0102010_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0103010_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0104010_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105000_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105010_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105020_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105025_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105040_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105050_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105100_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105110_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105310_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105320_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105330_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105400_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0105410_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0106010_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0107010_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm', 
'C:/Users/fdfpy/work/yuho/stuck/XBRL/PublicDoc\\0201010_honbun_jpcrp030000-asr-001_E02995-000_2019-08-20_01_2019-11-08_ixbrl.htm']
```
【HTML/CSS】右に謎の余白ができる原因を解明したら、Bootstrap4が悪さしてました。。。

#はじめに
webページを作成しているとまれに起こる事件！
<img width="452" alt="スクリーンショット 2020-07-18 19.48.05.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/0124211b-a645-e825-8e87-d354663577fb.jpeg">

そう！**ページ全体で右に謎の余白ができる！！**

#試した事
[こちらの回答](https://teratail.com/questions/55255)にある通り、`overflow:hidden;`を試すと確かに右の謎の余白は無くなった！
が、では原因は何？？

<img width="543" alt="スクリーンショット 2020-07-18 19.48.47.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/5479d0f5-d7a7-bfd7-1407-e5047baf18fb.jpeg">

同じミスをしていた人のために、この記事を残すとする！:slight_smile:

#原因は２つ！
##containerのpaddingを0に上書きしていたから
画面の左右の余白を無くしたいけど、グリッドシステムは使いたい！
そう思って**`.container`の左右のpaddingを0にするために上書きした事が原因でした。。。**

```css
.container {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
}
```

##rowのネガティブマージンのせいで、containerの幅を超えてしまってた。。
<img width="261" alt="スクリーンショット 2020-07-18 20.55.48.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/ac5cfda5-859f-0cb4-e8d0-e90c031ed555.jpeg">

Bootstrap4の`row`では以下のようなcssが効いている。

```css
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
```

**ここにある左右のネガティブマージンのせいで、`row`の幅が`container`の幅を超えてしまっていたようだ。。**

<img width="503" alt="スクリーンショット 2020-07-18 21.03.22.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/5b8884d1-23dc-479a-c36f-f45d32aaf1d4.jpeg">

<img width="506" alt="スクリーンショット 2020-07-18 21.03.30.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/243eebbe-bbad-33e9-81a8-0b383fd4ca89.jpeg">
Node.jsでコマンドラインツールを作る時にオプション引数をいい感じに扱いたい

## 結論

[command-line-args](https://github.com/75lb/command-line-args) と [command-line-usage](https://github.com/75lb/command-line-usage) を使うといい感じになる

## オプション引数の説明を表示する

```js:src/index.js
const commandLineUsage = require("command-line-usage");
const usage = commandLineUsage([
  { header: "command line tool", content: "description" },
  {
    header: "Options",
    optionList: [
      { name: "str", description: "description of str" },
      { name: "multi", description: "ex: --multi foo --multi bar" },
      { name: "int", description: "default: 123" },
      { name: "bool", alias: "b", type: Boolean, description: "ex: -b" },
    ],
  },
]);
console.log(usage);
```

```sh:出力
$ node src/index.js

command line tool

  description

Options

  --str string     description of str
  --multi string   ex: --multi foo --multi bar
  --int string     default: 123
  -b, --bool       ex: -b
```

## オプション引数の値を取得する

```js:src/index.js
const commandLineArgs = require("command-line-args");
const args = commandLineArgs([
  { name: "str", type: String },
  { name: "multi", multiple: true, type: String },
  { name: "bool", alias: "b", type: Boolean },
  { name: "int", type: Number, defaultValue: 123 },
  { name: "def", defaultOption: true },
]);
console.log(args);
```

```sh:出力
$ node src/index.js --str hoge --multi foo --multi bar -b foobar

{
  int: 123,
  str: 'hoge',
  multi: [ 'foo', 'bar' ],
  bool: true,
  def: 'foobar'
}
```
簡単レシート印刷 receiptline で罫線を引いてみた

日本発のオープンソース receiptline でレシート印刷に少しずつトライしています。
まだレシートプリンターがないので、[前回](https://qiita.com/dopperi46/items/71925eb0a3126966ee5f)利用した開発ツールを引き続き使います。
今回はテーブルの境界と罫線です。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/92959935-21b7-8b4f-dc54-63000681e4e6.png)

# 列の間隔

前回の例です。右揃えの `380` と左揃えの `先` の間をよく見てください。
文字がくっつかずに 1 文字分空いていますね。

```text:ReceiptLine
|冷奴       | 380|先 |
|竜田揚げ   | 480|   |
|もつ煮込み | 580|   |
```

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/6890fc4b-c351-d8c9-8037-30bb61e16e51.png)

列と列の間には 1 文字分のスペースがあるのです。
このスペースを変更して、2 文字分にしてみましょう。

```text:ReceiptLine
{border:2}
|冷奴       | 380|先 |
|竜田揚げ   | 480|   |
|もつ煮込み | 580|   |
```

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/40c3ac76-b059-62e2-7344-fa724326a115.png)

これは border プロパティというもので、この行以降の列の境界を設定しています。
名前は `border` または `b`、値は文字数 (桁数) で `0`, `1`, `2` です。

# 罫線を引く

商品明細にヘッダーと水平線を追加して、表を作ってみます。
シンプルな表ができました。

```text:ReceiptLine
|   商品名   |金額|
-------------------
|冷奴        | 380|
|竜田揚げ    | 480|
|もつ煮込み  | 580|
```

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/461ed659-b50f-6425-abd9-fb798837b3e1.png)

border プロパティを追加して、値を `line` にしてみましょう。
罫線付きの表ができました。

```text:ReceiptLine
{border:line}
|   商品名   |金額|
-------------------
|冷奴        | 380|
|竜田揚げ    | 480|
|もつ煮込み  | 580|
```

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/522528ec-f762-9fc7-604f-54837891bade.png)

外周線と縦罫線が追加され、水平線がそのまま横罫線に変わりました。
縦罫線で 1 文字分の幅を消費するので、`|` がそのまま罫線になるイメージですね。

# テーブル設定おさらい

テーブルに関係するプロパティを組み合わせてみます。
text, width, align, border プロパティの短縮名を使います。
`t` で折り返しなし、`w` で幅を固定、`a` で右寄せ, `b` で罫線ありです。

```text:ReceiptLine
{t:nowrap; w:16,8; a:right; b:line}
|商品名|金額|
-
|冷奴竜田揚げもつ煮込みトリプルセット | 1,280|
```

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669512/5bc12f56-d53f-a2d6-ed03-1577c33610ba.png)

次回は、ロゴ画像を作ってみようと思います。
Macのセットアップをシェルスクリプトで自動化したのでメモ

# はじめに

夏の暑さのせいか、1年半使っていた MacbookProの腹が急に**膨張**してしまいました。
よくよく調べると、テーブルに載せると「ガタガタ」と揺れ、指が下に1本入り、蓋がちゃんと閉まらない。

これはヤバい。。。**（爆発するのか...！？）**
新Macを購入を即決断。

新しいMacを買うと、毎回つきまとう**セットアップ作業**。
下手すると数日かかったり。
**「なるべく効率化したい」**と、手順をドキュメント化をしていた所、**「はて。これ自動化できるんじゃね？」**と不意に思い調査。
なんと、**シェルスクリプト**でドンピシャな自動セットアップしている人がたくさんいるじゃないですか！！
便利すぎる。

ということで何番煎じだかわかりませんが、（未来の自分用に）手順をメモしてみます。



# やること

1つのシェルスクリプトで以下をすべて自動的に行う

- デスクトップアプリを自動インストール
- AppStoreに登録されたアプリを自動インストール
- 開発環境の自動構築


# 手順

## Homebrew

[Homebrew](https://brew.sh/index_ja)をインストール。


## Cask

**Homebrew**をインストールすると、自動で **Cask** もインストールされる。
Caskは大量のデスクトップアプリがインストール可能なパッケージマネージャー。

## .bashrc 

**.bashrc**にアプリのインストール先を定義。


```.bashrc
export HOMEBREW_CASK_OPTS="--appdir=/Applications"
```

`.bashrc` はMacのbashではデフォルトでロードされないので、以下を `~/.bash_profile` に書く。

※ macOS Catalinaから 標準のシェルが zsh になったそうです。そのため `~/.bash_profile` の代わりに `~/.zprofile` に書きます。


```.bash_profile
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
```

## シェルスクリプトを作成

適当なファイル `setup.sh` を作る。


### デスクトップアプリを自動インストール


以下のようにコマンドを、必要なアプリ分すべて連ねていきます。

```setup.sh

brew install --cask google-japanese-ime
brew install --cask google-chrome
brew install --cask iterm2
brew install --cask docker
brew install --cask alfred
brew install --cask visual-studio-code

    ... 必要なアプリすべて

```

~~`$ brew cask install ＜アプリ名＞` の アプリ名に該当する部分は、`$ brew search <キーワード>` で検索できますが、[公式サイトの検索](https://formulae.brew.sh/cask/)がわかりやすいです。~~

~~※ ちなみに以前は `$ brew cask search <キーワード>` だったが廃止されたそうです。~~

`$ brew install --cask ＜アプリ名＞` にコマンドが変更されたようです。
 

### AppStoreに登録されたアプリを自動インストール

`$ brew install mas` で **mas-cli** をインストール。

現在使っている古い方のMacで以下を実行し、アプリリストを取得しておきます。

```
$ mas list

539883307 LINE (5.24.1)
406056744 Evernote (7.14)
409183694 Keynote (10.1)
497799835 Xcode (11.3.1)

    ... インストールされている全アプリの一覧がでる
```

これを使って、以下のようにコマンドを作ると良い感じ↓。


```setup.sh

brew install mas # masのインストールも自動化
mas install 539883307 # LINE
mas install 406056744 # Evernote
mas install 409183694 # Keynote
mas install 497799835 # Xcode

  ...
```

### 開発環境の自動構築

私の場合は nvm や rbenv を使うので、これらのインストールなんかも自動化してみます。


```setup.sh

# nvm 
git clone git://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh
nvm install <バージョン>

# rbenv
brew install rbenv
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
brew install rbenv ruby-build
rbenv install <バージョン>
rbenv rehash

  ... 他に必要なものがあれば追記

```

ざっくりこんな感じでしょうか。
環境に限らず、やりたいことがあれば何でも書いちゃうと良さそうです。


## 実行

作った `setup.sh` に実行権限を付与します。

```
$ chmod +x setup.sh
```

これで準備ができました。
シェルスクリプトを実行します。

```
$ ./setup.sh
```

もしくは `setup.command` にリネームして、ダブルクリックで実行でも良いかもしれません。

リストを作るのは最初は手間ですが、年1くらいでメンテしていけば長く使えそう。
（なぜ今までやっていなかったのか。。。　orz



# 参考

参考にさせていただきました。ありがとうございます。

- https://qiita.com/takustaqu/items/a328baf15862faa086ee
- https://qiita.com/mtake6212/items/720a051b51470fa294fd
- https://blog.lexues.co.jp/25290
- https://qiita.com/segur/items/373e6a78d1518e49e1eb
expoでapiコールできない時

localでやると、うまくいく

<img width="390" alt="スクリーンショット 2020-07-18 20.19.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135794/ec1197c0-b06a-e9a0-e8b6-5beccf61de8b.png">

ちなみにデバイスできない。

なんでやねん
LPWA(Sigfox)で二酸化炭素濃度を測ってみた（続）

>※IoT Agency Platfromは2020年12月31日をもってサービス終了予定となります。
※[GitHubリポジトリ](https://github.com/IoT-Makers/sigfox-platform.git)は引き続きご利用いただけます。

前回の[「LPWA(Sigfox)で二酸化炭素濃度を測ってみた」](https://qiita.com/ghibi/items/d2368d0a139c49885c41)では、ArduinoとSigfox Shield、MH-Z19を使って10分間隔で二酸化炭素(CO2)濃度を計測し、IoT Agency Platformでグラフ化するところまでやりました。
![IMG_5086.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/2d62ed3f-5fb8-2112-b366-9ee98fd95025.jpeg)
今回は、実際にオフィスに設置し、1週間放置してみました。

#結果
7月7日火曜日（七夕の日ですね）の出社タイミングに設置しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/0d9558db-77b0-d4ad-5ffc-8d0cc92cef27.png)
1週間の傾向としては、始業時間前の7時～8時から二酸化炭素濃度が上がり始め、昼を過ぎて**14時～16時あたりがピーク**になっています。時差出勤している人もいるので、17時ごろから下がり始め、翌日7時位まで下がり続け、また上がりだすことの繰り返しでした。
土日は、やはり会社に来る人がほとんどいない（はず）ので、低い値を維持しています。
オフィスワーク中においても**600～750ppm**であり、厚生労働省が提示している「良好な換気状態の基準として二酸化炭素濃度（CO2濃度）1,000ppm以下」は守られています。
開閉式の窓ではないため、機械換気が機能しているのかと思います。

2週目もログ取りを続けていたのですが、2週目は、ピークが600ppm程度になっています。（貼り付けたグラフは月曜日のものしかありませんが、その後も同じような傾向でした）
この要因ですが、もしかしたら、この1週目、東京都内のコロナウィルス新規感染者が増えていき、7月9日（木）には200名を超えたことも受け、会社から、改めて在宅ワークを推奨するよう案内がでました。結果、出勤率も下がることになり、それによる影響なのかもしれません。

CO2濃度とウィルス飛沫には直接的な関係性は認められていませんが、換気状態の一つの目安として、CO2濃度の経過を観察することにより、コロナ感染予防の一助になるかと思います。
今回計測したオフィスはオープンスペースでしたが、三密状態になりかねない会議室などにCO2センサを配置しておくのも良いかもしれません。
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/d6ad10bc-75ba-8124-14d4-f144657c6473.png)](https://twitter.com/ghibi)
【Windows10版】Virtualbox × VagrantでRloginでSSH接続してみた。

##【開発環境】
Windows 10 HOME
VirtualBox 6.0
Vagrant 2.2.9
Rlogin(X64) Version 2.25.3 (2020/06/22)

##【はじめに】
TeraTerm以外にSSH接続出来るツールを探していたら、
<a href="http://nanno.dip.jp/softlib/man/rlogin/" target="_blank" >Rlogin</a>というものがあるらしいので使ってみた。

##【前提条件】
VagrantとVirtualBox をインストールして、
vagrant up で仮想環境を起動している状態。

##【Rloginで仮想マシンにアクセス】

PowerShellにて
SSHで仮想環境に接続するための設定を行います。

```PowerShell:PowerShell
PS C:\path_to_dir\any_name> vagrant ssh-config
```
上記のコマンドを打つと下記の情報が表示されます。

```PowerShell:PowerShell
Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile C:/path_to_dir/any_name/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL
```

##【Rloginでログイン】

![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/b3439893-49d6-d16d-7642-b2dcf36e48c7.jpeg)

Rlogin起動　→　新規登録ボタン押下で赤字の部分を入力して行きます。　

**` SSH認証鍵 `**には、vagrant ssh-configで出力した情報の
**` IdentityFile `**のパスを入れます。

```PowerShell:PowerShell
  IdentityFile C:/path_to_dir/any_name/.vagrant/machines/default/virtualbox/private_key
```

OKボタンを押して接続してみると、、

![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/06cd23a5-ef0b-356e-16c3-b560875660c5.jpeg)

接続完了しました。

##【参考】

・普通にTeratermを使う時はこちら。
<a href="https://qiita.com/FKSM/items/789f8d8c71f0e9dc420a" target="_blank" >vagrant起動後にTeratermでSSHアクセスしたい場合</a>

・vagrant ssh-configの情報の詳細については下記をどうぞ。
<a href="https://qiita.com/0084ken/items/2e4e9ae44ec5e01328f1" target="_blank" >.ssh/configファイルでSSH接続を管理する</a>
初心者によるプログラミング学習ログ 374日目

#100日チャレンジの374日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
374日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>昨日の作業・やったこと⇩<br><br>●寝る直前の筋トレ5分、kindle読書 10分<br>●ブログ1記事作成<br>●プログラミング学習374日目 2h<br>・架空lp作成(<a href="https://twitter.com/ririru_123?ref_src=twsrc%5Etfw">@ririru_123</a> )<br>・Udemyフロントエンド講座<br><br>あんまり捗らない日でした<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a><a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a></p>&mdash; ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) <a href="https://twitter.com/ppmp65/status/1284220176439730177?ref_src=twsrc%5Etfw">July 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
IPアドレスとかドメインとかサーバーとか

<h1>きっかけ</h1>
プログラミングを勉強している中で何気なく目にしていたものの、詳しく理解していなかったので気になった物を調べてみました。
<h2>IPアドレス</h2>
*220.247.x.xxx*　といった数字の羅列
これらはインターネット接続中のコンピュータを識別する番号のことで、いわばコンピューターの住所や電話番号のようなものです。
電話番号が２つあっては困りますよね。
それと同じでIPアドレスも世界に一つです。
<h4>自分のpcのIPアドレス</h4>
気にした事はあまりないかもしれませんがお使いのpcにもIPアドレスが割り当てられています。

```ruby:
curl -s ifconfig.me
```
ターミナルから確認することができます。

##ドメイン
*https://www.google.com/*
こちらはよく見ることがありますよね。
これはIPアドレスをわかりやすい名前にしたものです。

###ドメインを変換するシステム
ドメインはあくまでも人間がわかりやすい名前にしたものなので、コンピュータ同士の接続にはIPアドレスが必要です。
ドメイン名をIPアドレスに変換する仕組みを、「DNS（Domain Name System）」といいます。

##Webサイト(google)が表示される流れ
1. pcからgoogle.comのIPアドレスをDNSにリクエスト
2. DNSは216.58.197.227 (google.comのIPアドレス)をpcにレスポンス
3. pcはサーバーにIPアドレスをリクエスト
4. サーバーはgoogleの情報をレスポンス
TDD勉強#4(July 16th, 2020)

#新しい知識
###toStringメソッド

```java
public String toString()
//オブジェクトの文字列表現を返します
```

###Expression
指定されたオブジェクトの指定された値を使って，「新しい」Expressionメソッドを作成，呼び出す．

###インターフェース
定数とメソッドのみが定義可能．

```java
interface AAA {
    int A1 = 1;
    int A2 = 2;

    void BBB();
}
```
クラスにインターフェースを実装するには`implements`を使用．

```java
class abc implements AAA{
}
```

###instanceof演算子
あるオブジェクトの型を動的に判定．あるオブジェクトが，
・あるクラスのインスタンスなのか
・あるクラスの子クラスのインスタンスなのか
特定のインターフェースを実装したインスタンスなのか
単体で動作するLaravelライクなルーティングライブラリ(ルーター)を自作しました

# LaralikeRouter

単体で動作する[Laravel](http://laravel.jp/)ライクなルーティングライブラリを自作しました。

フレームワークを使う程では無い極小規模な開発で使用することを想定してます。
無料のレンタルサーバー等でpublicフォルダとコード置き場を分けれない様な環境でも、特に設定することなくすぐに使い始められます。

composerを使って導入できます。PHPのバージョンは7.1以上が必要です。

GitHub:  [kamiya-kei/LaralikeRouter](https://github.com/kamiya-kei/LaralikeRouter)
Packagist: [laralike/laralike-router](https://packagist.org/packages/laralike/laralike-router)

# 導入方法

## 方法1：composerを利用する方法

```powershell
composer require laralike/laralike-router
```

`.htaccess`等を利用し、全てのアクセスを`index.php`に飛ばす様にしておく。

```.htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
```

あとは特に設定の必要もなく、すぐにルーティングを書き始められます。

```index.php
<?php

require_once __DIR__ . '/vendor/autoload.php';

use \laralike\LaralikeRouter as Route;
Route::get('/', function () { return 'hello lala'; });
```

## 方法2：自分でファイルをDLして設置する方法

特に他のライブラリに依存してないので、以下2ファイルをDLして設置すれば使えます。

+ [LaralikeRouter.php](https://raw.githubusercontent.com/kamiya-kei/LaralikeRouter/master/src/LaralikeRouter.php)
+ [LaralikeRoute.php](https://raw.githubusercontent.com/kamiya-kei/LaralikeRouter/master/src/LaralikeRoute.php)

方法1と同じく、`.htaccess`等を利用し、全てのアクセスを`index.php`に飛ばす様にしておく。
あとは以下の様に読み込んで使えます。

```index.php
<?php

require_once __DIR__.'/LaralikeRouter.php';
require_once __DIR__.'/LaralikeRoute.php';

use laralike\LaralikeRouter as Route;
Route::get('/', function () { return 'no composer!'; });

```


# 使い方

ほとんど[Laravelのルーティング](https://readouble.com/laravel/7.x/ja/routing.html)と同じ使い方です。
ただし名前付きルート・サブドメインルーティング・モデル結合ルート等一部機能は使えません。
サンプル: [LaralikeRouter/tests/index.php](https://github.com/kamiya-kei/LaralikeRouter/blob/master/tests/index.php)
詳細な使い方：[LaralikeRouter/README.md](https://github.com/kamiya-kei/LaralikeRouter/blob/master/README.md)

# 最後に

FTPでpublicフォルダ内にしかアクセスできない・SSH接続不可・PHPのバージョンも7.1と微妙に古いといった環境でサイトを作っていて、ルーティングをどうしようか悩んだ結果、
composer用ライブラリの作り方・PHPUnitの使い方等の勉強も兼ねて作ろうとなり、自作しました。
同じ様な状況の方がいれば、よければお使いください。

最後までお読みいただきありがとうございました。
IFTTTを使ってワンタップNowPlaying ツイート

# 目次
1. [主にこんな要素](#主にこんな要素)
2. [フロー全体図](#フロー全体図)
3. [用語](#用語)
4. [IFTTT側の準備](#IFTTTの準備)
  1. THIS: `Receive a web request`
  2. THAT: `Post a tweet with image`
5. [ショートカットを組み立てる](#ショートカットを組み立てる)
6. [実際に動作させてみた](#実際に動作させてみた)


## 主にこんな要素
- `[ツイート]`アクション時にダイアログを出さない
- `[現在の曲]`から曲のリンクを取得する

## 大まかな構造

| Shortcut | IFTTT |
|:--:|:--:|
|[現在の曲]を取得||
|iTAFでtrackIdを取得||
|アートワークURLを取得||
|ツイートの本文を作る||
|IFTTTのWebhookにアートワークURLと本文をPOSTする|POSTリクエストを受け取る|
|ホーム画面に戻る(終わり)|本文を`Tweet text`,アートワークURLを`Image URL`に突っ込んで実行する|
||画像付きでツイートされる|

## 用語
- **[iTAF](https://routinehub.co/shortcut/5927)** ... iTunesメディア([現在の曲]など)を渡すと、iTunesSearchAPIを使って指定の曲を探し、JSON形式で曲の詳細な情報を返します。曲が見つからない場合、何も返しません。ここでは曲のIDとリンクを取得するために使います。
- **小技(仮)** ... 変数をタップして色々指定することで型変換をしたり、付与されているパラメータとして扱ったりできます。ここでは辞書のキーを指定して値を取り出す際に使います。~~このテクニックの名前が分からないので(仮)~~
- [**SpringBoard**](https://routinehub.co/shortcut/2900) ... 海外の方作。実行するとホーム画面に戻ります。

## IFTTT側の準備
![7A1E52E2-E211-43C7-B2E9-63DBE0219476.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561438/631f2a1d-83ef-4f96-a691-e22901eff555.jpeg)

- THIS: [Webhooks];Receive a webhook
   - Event Name…`tweet_with_image`
- THAT: [Twitter];Tweet with image
   - `value1`…ツイートの本文
   - `value2`…画像URL

になるようにフローを組みます。

## ショートカットを組み立てる
### フロー全体図
<details><summary>タップで表示</summary>
![6E92ABB4-94E9-4684-A93D-B9162766B64F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561438/72579b76-1120-9eb2-570e-c5b98f1ee798.jpeg)
</detail>
`IFT_url`はIFTTTで作ったWebhookURLです。

## 実際に動作させてみた
![34658636-C8A6-440A-AC38-80DF32BA783F.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561438/fafa387b-ba08-d132-08d7-7a0f20c41fc3.gif)
[ツイートしたやつ](https://twitter.com/k_melodyline/status/1284426493523894274)
URLを含むテキストをIFTTTに投げると`ift.tt`の短縮URLになるっぽい。

[ショートカットのリンク](https://www.icloud.com/shortcuts/f466cf89835c43378964c636a3f53ebf)
vue.js 動的にタイトルを変更

動的にタイトルを変更。
ブラウザで見ても反映されない場合があるが、
chromeのコンソールで見れば反映されているので安心


```app.js

var routes = [
    { path: '/hoge/', component: () => import('./components/Hoge.vue') , meta: {title: '美味しいよ'} },
];


const app = new Vue({

    data () {
        return {
            title: 'へるぴーはママの味',
        };
    },

    methods: {

        //ページのタイトルを生成
        //へるぴーはママの味 | 美味しいよ ができあがる
        pageTitle(to){

            if(to.query.metaTitle){
                var setTitle = to.meta.title + ' | ' + this.title;
                document.title = setTitle;
            } else {
                // タイトルを設定
                if(to.meta.title){
                    var setTitle = to.meta.title + ' | ' + this.title;
                    document.title = setTitle;
                } else {
                    document.title = this.title;
                }
            }
        },

    },

    watch: {

        //移動する度に動作させる
        '$route'(to, from) {
            this.pageTitle(to);
        },

    },
});


```

axiosで動的に変更したい

```hoge.vue


axios.post('/article/view/').then(e => {

    this.res = e.data.res;
    document.title = this.res.name + " | " + this.$root.title;//ユーザーネーム さんのプロフィール | へるぴーはママの味
}

```
vue.js twitter シェアボタン

vue.jsで拡散ツイートさせたい。

#追記

ポップアップ式だと、スマホのブラウザでブロックされたりする。
そうなると印象がよく無いので、普通に渡すがベストか。

```hoge.vue

<a :href=sns.twitter target="_blank">ツイートする</a>

//略

data () {
    return {
        //sns拡散
        sns:{
            twitter:'https://twitter.com/intent/tweet?url=https://yahoo.co.jp&text=ヤフーのサイト&hashtags=孫正義,ヤフー',
        },
    
    };
},



```

以上、これだけでもとりあえずツイートできる。


safariのオリジナルツイートボタンを使ってもこの方法ならタイトルも変わっているが、仕様上ハッシュタグは変更できないみたい

参考
https://www.sky-limit-future.com/entry/vue_snsshare_btn


```app.js

const app = new Vue({

    data () {
        return {
            //sns拡散
            sns:{
               twitter:'',
               url:'',
               title:'',
               hashtags:'ラーメン,そば',
            },

        };
    },

    created() {
        this.snsUrl();
    },

    methods: {

        snsUrl(){
            //axios で動的にタイトルを変更する場合があるので若干遅らせる
            setTimeout(function () {
                // 現在のurlをエンコード
                this.sns.url = encodeURIComponent(location.href);
                this.sns.title = encodeURIComponent(document.title);
                this.sns.twitter= 'https://twitter.com/intent/tweet?url=' + this.sns.url + '&text=' + this.sns.title + '&hashtags=' + this.sns.hashtags;
            }.bind(this), 300);
        },

    },

    watch: {
        //ページ移動するたびに
        '$route'(to, from) {
            this.snsUrl();
        },
    }
});

```


```vue.blade.php

<a :href=sns.twitter target="_blank">ツイートする</a>


```

# 小窓で開きたい

```

        toSns(sns){

            const option = 'status=1,width=818,height=400,top=100,left=100'
            window.open(this.sns.twitter, 'twitter', option)

        },

```
良書『入門 Python3』、説明に失敗しているところN選（N=3）。

#概要
以下の書籍は、良書だと思う。
Pythonの勉強で最初に読んだ本です。
この本が、良書だったので、Pythonに馴染めて（いまに至る）気がする。感謝。

　**「入門 Python3」オライリー・ジャパン（2017年2月3日 初版第6刷発行)**

ここでは、
ちょっと、説明に失敗していると思うところがあるので、それを記載する。

* 失敗1 (空文字の説明）
* 失敗2 (\_\_main\_\_ の説明）
* 失敗3 (ダックタイピングの説明）

結構忘れたが、気づいたときに、この記事に追加したいと思う。

※別途、新しい版があるなら、それも、覗いてみたいと思う。

#失敗1 (空文字の説明）

## 抜粋引用
以下、該当書籍引用

>　なぜ、空文字列が必要なのだろうか。ほかの文字列から新しい文字列を組み立てたいときには、まず白紙のノートが必要なのだ。
>
>
\>>> bottles = 99
\>>> base = ''
\>>> base += 'current inventory: ' #在庫
\>>> base += str(bottles)
\>>> base
'current inventory: 99'
>
>

## 説明失敗の内容

上記の例の場合、**空文字がなくてもいいと思う。**
以下↓。

```
>>> bottles = 99
>>> base = 'current inventory: ' #在庫
>>> base += str(bottles)
>>> base
'current inventory: 99'
```

## 説明の改善案

説明したいことは、わからないではないが。。。
（改善案は、省略します。）



#失敗2 (\_\_main\_\_ の説明）

## 抜粋引用
以下、該当書籍引用

>　・・・メインプログラムには、\_\_main\_\_という特別な名前が与えられている。・・・


## 説明失敗の内容

上記が最もよく利用される

```
if __name__ == "__main__":
```

という使い方の説明がない。
（確か、なかった。索引にないだけかもしれないが、、、その場合は、索引が失敗。）

## 説明の改善案

どこかに説明を入れる。


#失敗3 (ダックタイピングの説明）

## 抜粋引用
以下、該当書籍引用

>　・・・Pythonはそこからさらに少し進んで、who()、says()メソッドを持ちさえすればどのようなオブジェクトであっても（つまり、継承などを利用しなくても）、共通のインターフェースを持つオブジェクトとして扱うことができる。・・・

　
> ・・・実行してみよう。そのうちひとつ(brook)は、ほかのものとは全く無関係である。


## 説明失敗の内容

以下の点で失敗している。

* 例としているコードが長い。（長すぎる）。
* 「継承などを利用しなくても」とか、「無関係」をもっと強調すべき。


## 説明の改善案

もっと、短いコードで説明する。


#まとめ
単に、良書により馴染むために、（いいがかり？みたいな）記事を書いてみました。
また、何か、見つけたら追記します、これまでに気づいている範囲でも、確か、何個かあった気がします。
【考え方】図形の中に点があるか。内外判定。

図形の中に点があるかどうかの判断のやり方。
#前提条件
以下のように図形の中にあるかどうか判断したい点__<font color="Red">P(x,y)</font>__を図形の中にあるものとした時の図形を考える。
![triangle.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676731/b5a0f970-4702-ec8f-379d-a20b7c5957f2.jpeg)

__O(0,0)__は__原点__を表している。また、__A(2,2)、B(3,1)、C(3,3)__は図形の__頂点__を表している。__<font color="Red">P(x,y)</font>__は__任意の点__である。


#図形の内外判定→外積を使う
__P(x,y)__が__三角形ABC__の中にあるかどうかを外積を使って考える。
以下の図のような図を考える。
![triangle2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676731/dbaec09d-3c6e-cac1-aede-e1b0f0c731a7.jpeg)

この図は$\vec{BP}$と$\vec{BA}$の外積を表している。

これを以下の図のように__外積の矢印が同じ向き__になるように三角形PBC、三角形PCAでも同様にして外積を計算する。
![triangle3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676731/d921c3e0-0dad-80fe-e086-c82876a2af67.jpeg)

上図は$\vec{BP}$と$\vec{BA}$の外積、$\vec{BC}$と$\vec{BP}$の外積、$\vec{CA}$と$\vec{CP}$の外積を表している。
#計算結果
以上のように計算した__<font color="Red">外積がすべて同じ向き(符号)</font>__なら、図形の中にあるかどうか判断したい点__P(x,y)__は図形の中にある。

もしそうでない場合は点__P(x,y)__は図形の外側にある。

#点が図形の外側の時
もし計算した外積が__同じ向き(符号)でない__ときは、図形は以下のようになっている。
![triangle4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676731/14629b54-0a4b-32f9-76b0-bb4e48fd5f9f.jpeg)


これは、$\vec{BP}$と$\vec{BA}$の外積だけ、$\vec{BC}$と$\vec{BP}$の外積、$\vec{CA}$と$\vec{CP}$の外積とは__違う向き(符号)__を表している。

このように点が図形の外側にあると外積の向き(符号)がすべて揃わない。
D言語をブラウザで実行できるサイト

# はじめに
D言語をインターネット環境で簡単に使いたい。
そんな時のために、`Web`ブラウザでコードを書いて実行できるオンラインサイトを紹介します。

**D言語を試してみたい！！** という方へ。
まずは、オンライン環境を使ってみては、いかがでしょうか。

# D言語をオンライン環境で使う際の注意点

D言語のコンパイラは、年に数回のペースでバージョンアップが行われています。
バージョンが古いと言語仕様が変わっていて、思った通りにコンパイルできない可能性もあります。
サイトに、コンパイラのバージョンの記載がない場合は、以下のコードを実行することで確認できます。

```d:ver.d
import std.stdio;

void main(){
  writeln(__VENDOR__);
  writeln(__VERSION__);
}
```

# オンラインサイトの紹介

D言語コンパイラのバージョンが比較的新しいサイトを紹介します。

# run.dlang.io
https://run.dlang.io/

実行結果により、バージョン2.105であることがわかります。
![rundlangio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675901/71679ca9-a8b2-31c1-76d4-a3ccaab13fae.png)

# Jdoodle
https://www.jdoodle.com/execute-d-online/

こちらもバージョン2.105です。
![JDoodle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675901/12d859b8-b64d-2183-c2e8-457bd4973b18.png)

# tutorials point
https://www.tutorialspoint.com/compile_d_online.php

![tutorialspoint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675901/dbcb1def-7e35-d303-1ec4-5b926431a638.png)

# paiza.io
https://paiza.io/ja/projects/new

LLVMをベースとした、ldcコンパイラが利用可能です。
![piaza.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675901/c27f7b9f-34a4-a168-1fff-b1b608293ad9.png)

# Wandbox
https://wandbox.org/

複数のコンパイラ(dmd、ldc)とバージョンを選択可能です。
![wandbox.org.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675901/a03f6039-4a9c-47f5-ccae-43aa67d2f03f.png)

# Tio
https://tio.run/#d

![tio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675901/a29cbeff-4191-1812-ed1a-a0cc2a05eee5.png)

# 参考情報
D言語の開発環境を自分のPCに構築したい方は、以下を参照してください。

https://zenn.dev/outlandkarasu/articles/341f4d3fc9add9

D言語以外のオンライン開発環境が必要な方は、以下にも情報があります。

https://qiita.com/tttamaki/items/2b009aa957cfa4895d50

# 更新履歴
* 2020.7.18 初回投稿
* 2021.7.24 バージョンアップ状況確認
* 2022.7.31 バージョンアップ状況確認
* 2023.12.10 バージョンアップ状況確認
AppVeyor まとめ

## AppVeyor とは

AppVeyor は GitHub などのアカウントと連携して使う CI・CD のマネージドな IaaS・SaaS です。
[Continuous Integration and Deployment service for Windows, Linux and macOS | AppVeyor](https://www.appveyor.com/)

近いサービスとして、次のようなものがあります:

- CircleCI
- GitHub Actions
- Travis CI

参考: [What are some alternatives to Appveyor? - StackShare](https://stackshare.io/appveyor/alternatives)

公開リポジトリーの場合は無料で利用できます。
[Pricing | AppVeyor](https://www.appveyor.com/pricing/)

## AppVeyor を使うべき場面

AppVeyor を使う場面はかなり限られます。
例として、次のような場面があります:

- Vagrant の Box イメージをビルドしたい場合

### Vagrant の Box イメージをビルドしたい場合

AppVeyor の Build environment では VirtualBox が使えます。
[Software pre-installed on Linux build VMs | AppVeyor](https://www.appveyor.com/docs/linux-images-software/)

VirtualBox は仮想マシンにはインストールできないため、
たとえば Vagrant の Box イメージをビルドしたいとき、
GitHub Actions の GitHub-hosted runners や AWS の EC2 インスタンスなどを使うことはできません。

## AppVeyor を利用する場面を限定する理由

### 基本的に、ジョブを並列実行できない

Appveyor は基本的にジョブを並列で実行することができず、
Premium Plan でも並列実行ジョブは 2 つまでです
すぐにビルドでキューが詰まり、生産性に影響が出ます。

### Windows を使える CI・CD サービスが増えた

かつて Appveyor は Build environment に Windows が使えるということで利用されましたが、
今は GitHub Actions でも Windows を使うことができ、最大 20 ジョブまで同時実行できます。

参考: [AppVeyor を捨てて Azure Pipelines に全て移行した話 - しばやん雑記](https://blog.shibayan.jp/entry/20190728/1564300561)

## GitHub と組み合わせた AppVeyor の使い方

### 1. GitHub アカウントで Sign in します

[Sign up - AppVeyor](https://ci.appveyor.com/signup)

### 2. 新しいプロジェクトを作成し、リポジトリーと関連付けます

2-1.
AppVeyor のダッシュボードを開きます。
[Projects - AppVeyor](https://ci.appveyor.com/projects)

2-2.
`[+] NEW PROJECT` をクリック

2-3.
画面右の Cloud で GitHub が選択されていることを確認して、
[Authorize as GitHub App] の [Install AppVayor App] をクリック

対象リポジトリーとして `All repositories` が選択されていますが、
`Only select repositories` の方がセキュアです。
`Select repositories` で必要なリポジトリーを選択して `Install` ボタンをクリックします。

2-4.
GitHub のパスワードを入力します。

2-5.
「Select repository for your new project」と表示されるので、
リポジトリーにカーソルをあわせると `[+] ADD` と表示されるので、クリックします。

### 3. プロジェクトに `appveyor.yml` を追加します

詳しい書き方は次のリファレンスを確認します:
[appveyor.yml Reference | AppVeyor](https://www.appveyor.com/docs/appveyor-yml/)

GitHub で利用例を見てみるのも良いかもしれません。
たとえば、`on_success` の使われ方は次の検索結果で確認できます:
[Search · filename:appveyor.yml on_success](https://github.com/search?q=filename%3Aappveyor.yml+on_success&type=Code)

## 並行実行できない欠点を補うための設定

テスト対象を master ブランチと master ブランチへの PR だけに限定します。
並行実行できないので、ジョブの実行を少しでも減らすためです。

`appveyor.yml`:

```
branches:
  only:
    - master
```

参考: [Branches and Tags | AppVeyor](https://www.appveyor.com/docs/branches/#white--and-blacklisting)
動画編集　フォトショップを使ってテロップを入れる場合に文字化けする

フォトショップを使ってテロップを入れる場合に文字化けする

マックを使っていることで、文字の形式が異なってしまう

#解決法
まずはCSVファイルをテキストエディタで開く
そしてそれを.csvで保存する。
その時日本語（Shift JIS）で保存する。
こうすることで形式が変わったので、変数のデータセットで正しく読み込める。
ubuntu-18.04.4でUCKが動かななっかので動くようにしてみた。


注：そこそこエラー出るけどとりあえずISOファイルはできた。





```terminal
sudo apt install -y syslinux-utils
# hybridISO作るなら
```

```terminal
$ diff /usr/lib/uck/remaster-live-cd.sh ~/tmp/backup/remaster-live-cd.sh 
359c359
< 		cp -f /etc/resolv.conf "$REMASTER_DIR/etc/resolv.conf" ||
---
> 		cp -d /etc/resolv.conf "$REMASTER_DIR/etc/resolv.conf" ||
368c368
< 	cp -f /etc/fstab "$REMASTER_DIR/etc/fstab" ||
---
> 	cp -d /etc/fstab "$REMASTER_DIR/etc/fstab" ||
370c370
< 	cp -f /etc/mtab "$REMASTER_DIR/etc/mtab" ||
---
> 	cp -d /etc/mtab "$REMASTER_DIR/etc/mtab" ||
```





```terminal
$ diff /usr/lib/uck/customization-profiles/localized_cd/customize_iso ~/tmp/backup/customization-profiles/localized_cd/customize_iso 
84,85c84,86
< 	GFXBOOT_THEME_UBUNTU_SOURCE_PACKAGE=http://archive.ubuntu.com/ubuntu/ubuntu/ubuntu/pool/main/g/gfxboot-theme-ubuntu/$(zgrep gz "$APT_SOURCES_TMP_DIR"/Sources.gz | grep gfxboot-theme-ubuntu | sed -n 1p | awk '{ print $3 }')
< 	wget $GFXBOOT_THEME_UBUNTU_SOURCE_PACKAGE ||
---
> 	GFXBOOT_THEME_UBUNTU_FNAME=`zgrep tar "$APT_SOURCES_TMP_DIR"/Sources.gz | grep gfxboot-theme-ubuntu | sed -n 1p | awk '{ print $3 }'`
> 	GFXBOOT_THEME_UBUNTU_SOURCE_PACKAGE=http://archive.ubuntu.com/ubuntu/ubuntu/ubuntu/pool/main/g/gfxboot-theme-ubuntu/"$GFXBOOT_THEME_UBUNTU_FNAME"
> 	wget -c $GFXBOOT_THEME_UBUNTU_SOURCE_PACKAGE -O "$APT_SOURCES_TMP_DIR"/"$GFXBOOT_THEME_UBUNTU_FNAME" ||
87c88
< 	tar xfz *.tar.gz ||
---
> 	tar Jxvf "$APT_SOURCES_TMP_DIR"/"$GFXBOOT_THEME_UBUNTU_FNAME" -C "$APT_SOURCES_TMP_DIR" ||
92c93,94
< cd gfxboot-theme-ubuntu
---
> GFXBOOT_THEME_FOLDER=`ls  -l "$APT_SOURCES_TMP_DIR" | grep ^d | awk '{ print $9 }'`
> cd "$APT_SOURCES_TMP_DIR"/"$GFXBOOT_THEME_FOLDER" 
```



```terminal
$ diff /usr/lib/uck/customization-profiles/localized_cd/customize ~/tmp/backup/customization-profiles/localized_cd/customize
136a137
> echo "Starting manual customization...."
138,142d138
< 	while true ; do
< 		CHOICE_CONSOLE="Run console application"
< 		CHOICE_EXIT="Continue building"
< 		CHOICE=`dialog_menu "Please choose customization action" "$CHOICE_CONSOLE" "$CHOICE_EXIT"`
< 		RESULT=$?
144,148c140
< 		if [ -z $CHOICE ] ; then
< 			failure "Script cancelled by user"
< 		fi
< 		#workaround for KDE bug (https://bugs.kde.org/show_bug.cgi?id=139025)
< 		CHOICE=`echo "$CHOICE" | grep -v -i kwrited | tail -n1`
---
> 	run_console
150c142,144
< 		echo "CHOICE='$CHOICE'"
---
> 	echo "Run console application"
> 	echo "Please run chroot at remaster-root on theother terminal"
> 	read -p "Press [Enter] key to resume."
152,157d145
< 		if [ "$CHOICE" = "$CHOICE_EXIT" ] ; then
< 			break
< 		elif [ "$CHOICE" = "$CHOICE_CONSOLE" ] ; then
< 			run_console
< 		fi
< 	done
```
手抜き工事：ui表示させたりターミナル開こうとするとエラーが出るので
Vue.jsのOptions APIのdataに型定義したい

追記 2020/08/04
こちらもご参考までに
[VueのOptionsAPI導入して「Property 'hoge' does not exist on type 'CombinedVueInstance<Vue…」みたいなエラーが出る](https://qiita.com/HorikawaTokiya/items/ad73dd7efead856062a1)

## まえがき

Vue.jsのOptions APIを使って手軽にTypeScriptを導入してみた。

はて？

`extend`と書いてTSは導入したはいいものの
`data`にはどうやって型を当てて上げればいいのだろうか？

## 結論

dataの無名関数の戻り値の型に`interface`や`type`で書いた型を指定する。

```vuejs
<script lang="ts">
import Vue from 'vue'

interface Form {
  inputForm: {
    id: string|null,
    name: string|null,
  };
  hogeArr: string[];
}

export default Vue.extend({
  data: (): Form => {
    return {
      inputForm: {
        id: null,
        name: null,
      },
      hogeArr: []
    }
  }
})
</script>
```

## あとがき

Options API入れたはいいものの変なエラーが出て使いづらい！
-> 早くもComposition APIへ乗り換えか？

Vuex周りの型がモヤモヤ…
-> Vuexやめるか？ React.js乗り換えか？？

ということでもっといいやり方有れば教えて下さい。
RaspberryPi4にBetaflight Configuratorをインストールする

#RaspberryPi4にBetaflight-Configuratorをインストールする

## そもそもなんでインストールできない
Betaflight-Configuratorは、さまざまなOSでサポートされていますが、Arm64はサポートされていません。node.js+nwjsで構成されていますが、nwjsがarm64をサポートしないためです。
それでも既得な方がバイナリをアップしてくれています。
##nw.jsのarm64バイナリ
https://github.com/LeonardLaszlo/nw.js-armv7-binaries

##インストールのおおまかな流れ
1. betaflight-configuratorのソースファイルをダウンロードしてコンパイル
2. ダウンロードしたnwjsのバイナリを出来たdistフォルダにコピー
3. distフォルダの"nw"を実行（必要に応じてデスクトップショートカットを作成）

###ラズパイにbfを導入する有名な動画
https://www.youtube.com/watch?v=dDTcTppLfqk
以前はこの動画の通りで動いてましたが、今は動きません。
フォルダ内のnw を実行するとエラーがでます。

```bash
$./nw
./nw error while loading shared libraries: libgconf-2.so.4 : cannot open shared object file: No such file or directory
```
※デスクトップのショートカットから実行するとエラーがでないので注意

###対策 
ググったらそのものずばりのサイトがありました。
<a href="https://support.circleci.com/hc/ja/articles/360004086734-%E5%85%B1%E6%9C%89%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E3%83%AD%E3%83%BC%E3%83%89%E4%B8%AD%E3%81%AB%E7%99%BA%E7%94%9F%E3%81%99%E3%82%8B-libgconf-2-so-4-cannot-open-shared-object-file-No-such-file-or-directory-%E3%82%A8%E3%83%A9%E3%83%BC">参考にしたリンク<a>

<i>このエラーはほとんどの場合、Google Chrome のパッケージに最近変更が加えられ、依存関係として libgconf-2-4 をプルしなくなったことが原因です。</i>
とのことで、書いてある通りにライブラリをインストールすることで解決します。

```bash
sudo apt-get install libgconf-2-4
```
javascript の不思議な比較、または比較演算子

javascript  の Syntax で不思議なところをまとめ直してみました。文末に参照元のサイト列挙しています。
参照元の情報をもとに、手元で動かしながらいくつか検証を追加しています。

また、今回ついでの deno でも同様の挙動か確認しました。 deno でも同じ挙動であることが確認できています。JavaScript エンジンに、 Node.js と同じ V8 を採用をしているので当然といえば当然のことなんですが‥


### 改行位置が違うと別ものとして判定される
```javascript

function foo(){
  return
  {
    foo: 'bar'
  }
}

function bar(){
  return
  {
    foo: 'bar'
  }
}

typeof foo() === typeof bar()

// true
```


```javascript

function foo(){
  return
  {
    foo: 'bar'
  }
}

function bar(){
  return {
    foo: 'bar'
  }
}

typeof foo() === typeof bar()

// false
```

なぜなら、return のあと改行があるので undefined が返されるから。
こんな感じで()を入れてあげると同様になります。

```javascript
function foo(){
  return (
  	{
    	foo: 'bar'
  	}
  )
}

function bar(){
  return {
    foo: 'bar'
  }
}

typeof foo() === typeof bar()
```

### 配列は参照

```javascript
1 == 1; //true
'foo' == 'foo'; //true
[1,2,3] == [1,2,3]; //false
```

ちなみに === でも同様です。


```javascript
1 === 1; //true
'foo' === 'foo'; //true
[1,2,3] === [1,2,3]; //false
```
理由は配列は参照なので。javasciript においてArray は Object。 Objectは 参照によって複製されます。

```javascript
let array1 = [1];
let array2 = array1;
array1.push(2)

array1 // [1, 2]
array2 // [1. 2]
```

なので

```javascript
let array1 = [1, 2, 3]
let array2 = array1

array1 === array2 // true
```

だけど

```javascript
let array1 = [1, 2, 3]
let array2 = [1, 2, 3]

array1 === array2 // false
```

は false ということです。

```javascript
const array1String = JSON.stringify(array1)
const array1String = JSON.stringify(array2)

array1String === array2String // true
```

無理に比較するのであればこういう感じですね。

余談ですが、javascript ではオブジェクト型でないデータ構造のことをプリミティブデータ型と呼び、
 6 種類のプリミティブデータ型があります。文字列、数値、BigInt、真偽値、undefined、そしてシンボルです。

### == と === の違い 1

これは true。

```javascript
new Array(3) == ",,"; //true
```

なぜなら

```javascript
new Array(3).toString(); //",,"
```

なので、こちらは === で区別できます。

```javascript
new Array(3) === ",,"; //false
```

###  == と === の違い 2

```javascript

[] == ![]; // -> true
[] === ![]; // -> false
```

これは、[] を ＝＝で比較するときに数字の0に置き換えられるからです。

```javascript
false == 0; // -> true
false === 0; // -> false
```

も成立するので…

```javascript
true == []; // -> false
true == ![]; // -> false

false == []; // -> true
false == ![]; // -> true
```

こんな事になったりします。

###  == と === の違い 3

```javascript
!!"false" == !!"true"; // -> true
!!"false" === !!"true"; // -> true
```

```javascript
!!false == !!true; // -> false
!!false === !!true; // -> false
```
これは両方文字列が変換されるためです。引っ掛け問題みたいですが。

```javascript
!'true' // false
!'false' // false
```

ということです。


### オブジェクトの比較

```javascript
const o1 = {};
const o2 = {};

o1 == o2 //false
o1 === o2 //false
```

ここまでは、オブジェクトデータ型の比較でやりましたが、比較演算子では全て true になります。

```javascript
o1 >= o2 //true
o1 <= o2 //true
o1 != o2 //true
o1 !== o2 //true
```


ref. https://blog.mgechev.com/2013/02/22/javascript-the-weird-parts/
ref. https://github.com/denysdovhan/wtfjs
PHPのCarbonインスタンスとsetAttributeを用いて日付の表示を自由自在にあやつる

##はじめに
DBに登録されている日付を表示ように月と日にち分けたいなとか思うことはありませんか。
今回はPHPのCarbonインスタンスとsetAttributeを用いて日にちを分けたいと思います。

##Carbonインスタンスとは
CarbonはPHPネイティブのDateTimeクラスを拡張していて、便利なメソッドを提供しています。
参考：https://github.com/briannesbitt/Carbon

now()で今の日時を取得できます。使い方の参考例は以下です。

```php:
//2018-07-18 09:40:25（今のGMTグリニッジ標準時UTC+0000の時間）
$now = Carbon::now();
//2018-07-18 18:40:25 （今の日本標準時 UTC+0900の時間）
$now = Carbon::now('Asia/Tokyo'); 
```

##setAttributeメソッドとは
setAttributeメソッドはスコープでデータを設定する為のメソッドです。
参考：https://www.php.net/manual/ja/pdo.setattribute.php

setAttributeメソッドでkeyとvalueを指定してcollectionなどに値を追加できます。

##日付の分解をしてみる
例えば、`"founding_date" => "2020-04-01"`とDBに登録されている値を`2020、04、01に分解したい時`をやってみます。

```php:
use Carbon\Carbon;

$founding_date = new Carbon($company->founding_date);
$founding_date_year->setAttribute('founding_date_year', $founding_date->year);
$founding_date_month->setAttribute('founding_date_month', $founding_date->month);
$founding_date_day->setAttribute('founding_date_year', $founding_date->day);
```
上記のように定義すると、companyモデルの値に`founding_date_year`、`founding_date_month`、`founding_date_day`が追加されます。

##おわりに
ビュー側の表示用に値を変更する時はバックエンド側（controller〜model層）でまとめておくとコードの可読性が上がると思います。
値の加工になるのでservice層に実装すると良いかもしれませんね。