OmniAICreator/Qiita-1.07M huggingface dataset:
Oracle ExadataでUPDATE、もしくはDELETEしたい場合の高速化手法

Oracle Exadataで一部のデータをUPDATE、もしくはDELETEしたい場合、少量のデータであれば問題ないのですが、大量データだと性能に影響がありSQLが全然戻ってこないことがあります。
パーティショニングされているテーブルであれば、下記のEXCHANGEを使った方法によりそれらを高速化することが可能です。

例えば、下記のようなパーティショニングされているテーブルがあり、そのパーティション内の一部データをDELETEしたい場合を想定。

![スクリーンショット 2020-10-05 18.05.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397664/582d7bb7-bb8f-195b-4aa7-f1ccceec73bc.png)


####まずは対象パーティションの件数確認
```
SELECT COUNT(1) FROM SAMPLE_SCHEMA.HOGE_TABLE PARTITION(P_201902);

+-----------+
| COUNT(1)  |
+-----------+
|        5  |
+-----------+
```

####CTASで交換用の一時テーブル作成。この時、DELETEしたいデータを一時テーブルに入れないようにSELECT。
```
CREATE TABLE SAMPLE_SCHEMA.TMP_TABLE 
AS 
SELECT * 
FROM SAMPLE_SCHEMA.HOGE_TABLE PARTITION(P_201902)
WHERE ID != "0003"
;
```

![スクリーンショット 2020-10-05 18.32.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397664/44df6114-0aed-858a-ce84-8eb2ad90cb4d.png)


####一時テーブルの件数確認
```
SELECT COUNT(1) FROM SAMPLE_SCHEMA.TMP_TABLE; 

+-----------+
| COUNT(1)  |
+-----------+
|        4  |
+-----------+
```

####EXCHANGEでパーティション交換
```
ALTER TABLE SAMPLE_SCHEMA.HOGE_TABLE EXCHANGE PARTITION P_201902
WITH TABLE SAMPLE_SCHEMA.TMP_TABLE; 
```

![スクリーンショット 2020-10-05 18.32.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397664/03957762-6630-e6fd-9111-b676d03b3023.png)


####対象パーティションの件数確認し、交換されたことを確認する。
```
SELECT COUNT(1) FROM SAMPLE_SCHEMA.HOGE_TABLE PARTITION(P_201902);

+-----------+
| COUNT(1)  |
+-----------+
|        4  |
+-----------+
```
package-lock.jsonファイルとは？

#package-lock.jsonファイルとは？

node.jsやvue.jsでプロジェクトを作成したときに作成されるpackage-lock.jsonとは、

このプロジェクトに**インストールされているすべてのパッケージのバージョンやセッティングが記載されたファイル**。

2万行ぐらいあるとてつもなく膨大なファイル。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/6d05dfaf-f0b3-3320-c3f4-f82266f26a8b.png)


`node_modules`フォルダには実際のファイルが入っており、その概要をまとめたもの。

モジュールをインストールするごとに**自動で更新**される。


##用途
他の人がモジュールをインストールする場合に、package-lock.jsonファイルを使うことで環境を統一することができる。


ただし、新たにインストールすると上書きされるため、githubに更新版がアップされていない場合は過去のバージョンに戻ることになってしまう。



##package.jsonファイルとの違い。

| 概要 | package | package-lock |
|:-:|:-:|:-:|
| 編集  | OK  | NG  |
| 内容  | プロジェクトの概要  | モジュール一覧  |
perl: warning: Setting locale failed

# はじめに

Raspberry piで```apt update```した際など、下記の警告が発生した際の解決方法です。

```console
perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
	LANGUAGE = (unset),
	LC_ALL = (unset),
	LC_CTYPE = "UTF-8",
	LANG = "en_GB.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to a fallback locale ("en_GB.UTF-8").
locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_ALL to default locale: No such file or directory
/usr/bin/locale: Cannot set LC_CTYPE to default locale: No such file or directory
/usr/bin/locale: Cannot set LC_ALL to default locale: No such file or directory
```

# 手順

下記コマンドを実行。

```console
$ sudo raspi-config
# 5. localisation Options

$ sudo vi /etc/default/locale
#  File generated by update-locale
LANG=en_GB.UTF-8
LANGUAGE=en_GB.UTF-8
LC_ALL=en_GB.UTF-8
```
CentOS7の特定カーネルでVMが起動できない

仮想基盤はXen Server

## 事象
VMを停止・起動すると起動中の処理時に停止してしまう。
再起動（shutdown -r now）の場合は起動する。
カーネル関連の処理時に原因がある？

## 確認
起動時に使用するカーネルを切り替えてサーバ停止・起動を実施したところ、
2018/3/19時点で最新のカーネルの場合のみ起動中に停止してしまう。

NGなカーネル（最新）：kernel-3.10.0-693.21.1.el7.x86_64
OKなカーネル（最新の1つ手前）：kernel-3.10.0-693.17.1.el7.x86_64

## やりたいこと
OKなカーネルをインストール後、NGなカーネルを消しておく。
カーネルに関連するパッケージも古いバージョンで上書きしておく。

## やったこと
カーネルバージョンの確認

```
# rpm -qa | grep kernel
# uname -a
```

削除するカーネル と 削除カーネルに対応するレスキューファイル を確認
（ファイル名は /boot 配下を確認）

```
# sha1sum /boot/vmlinuz-0-rescue-08564da404bc43dabf31941d25b25cb1 /boot/vmlinuz-3.10.0-693.21.1.el7.x86_64
ce98558979b4397fa8b7b59bcbd69ecd4cf38c19  /boot/vmlinuz-0-rescue-08564da404bc43dabf31941d25b25cb1
ce98558979b4397fa8b7b59bcbd69ecd4cf38c19  /boot/vmlinuz-3.10.0-693.21.1.el7.x86_64

　→ハッシュ値が一緒なので、このレスキューファイルを後で消す
```

OKなカーネルをインストール

```
# rpm -ivh --force http://mirror.centos.org/centos/7/updates/x86_64/Packages/kernel-3.10.0-693.17.1.el7.x86_64.rpm
```

カーネル関連のパッケージをインストール（削除→インストール）

```
# rpm --oldpackage -Uvh http://mirror.centos.org/centos/7/updates/x86_64/Packages/kernel-headers-3.10.0-693.17.1.el7.x86_64.rpm
# rpm --oldpackage -Uvh http://mirror.centos.org/centos/7/updates/x86_64/Packages/kernel-tools-3.10.0-693.17.1.el7.x86_64.rpm http://mirror.centos.org/centos/7/updates/x86_64/Packages/kernel-tools-libs-3.10.0-693.17.1.el7.x86_64.rpm

※kernel-tools-libs と kernel-tools を別々にインストールしようと
　すると、依存関係のエラーが出たのでダメ。
　--------------------------------------------------------------
　エラー: 依存性の欠如:
        kernel-tools-libs = 3.10.0-693.17.1.el7 は kernel-tools-3.10.0-693.17.1.el7.x86_64 に必要とされています
　--------------------------------------------------------------

NGなカーネルを消す

# rpm -e kernel-3.10.0-693.21.1.el7.x86_64

確認

# rpm -qa | grep kernel
```

NGなカーネル用のレスキューファイルを削除
（タイムスタンプで判断 / わからなかったら放置で良いかも）
・vmlinuz-0-rescue-xxx → 最初の方に確認したもの
・initramfs-0-rescue-xxx → 上記ファイルとタイムスタンプが同じもの

```
# cd /boot
# rm vmlinuz-0-rescue-f444db9ee4694d4da94a6801fda39bff initramfs-0-rescue-f444db9ee4694d4da94a6801fda39bff.img
```

grubコンフィグファイルを再作成

```
# grub2-mkconfig -o /boot/grub2/grub.cfg
```

サーバ停止・起動してみる

```
# shutdown -h now（→それから起動）
```
```
# rpm -qa | grep kernel
kernel-3.10.0-229.11.1.el7.x86_64
kernel-headers-3.10.0-693.17.1.el7.x86_64
kernel-3.10.0-693.17.1.el7.x86_64
kernel-tools-libs-3.10.0-693.17.1.el7.x86_64
kernel-3.10.0-229.4.2.el7.x86_64
kernel-3.10.0-327.18.2.el7.x86_64
kernel-3.10.0-514.6.1.el7.x86_64
kernel-tools-3.10.0-693.17.1.el7.x86_64
```
【Xcode】ビルドは成功するが、実機にインストールできない問題

（個人的なメモとして、最低限の記載です）

# 起こったこと

ビルドはうまくいったのに、「A valid provisioning profile for this executable was not found」と言われた時。


> Unable to install "app_name"
Domain: com.apple.dt.MobileDeviceErrorDomain
Code: -402620395

> A valid provisioning profile for this executable was not found.

# 解決策

「Automatically manage signing」の中でチェックが外れてたものがあったので、チェックを入れてあげると問題なく実行できた。
Dr.Sum 新機能「TableEditor」の概要・使いどころについて

#1.はじめに
2020/06/01 にリリースされた Dr.Sum Ver. 5.5 で、新機能「TableEditor」が追加されました！

Excel上からデータベースの値を更新できるようになりました。
データベースは、Dr.Sumでも他のOracleやSQLServerでも大丈夫なのです！
但し、Dr.Sum以外のDBを使用する場合は、MotionBoardとの併用が必要になります。

#2.Dr.Sumとは
[Dr.Sum](https://www.wingarc.com/product/dr_sum/) とは、ウイングアーク１ｓｔ株式会社が提供する、企業内の基幹データベースの情報を高速に集計できる BI ツールです。
![2020-10-05_16h38_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656849/374b2756-b4dd-8bbb-73a8-0974a4d1fae0.png)
※キャプチャはウイングアーク1st社のホームページより抜粋
https://www.wingarc.com/product/dr_sum/
Dr.Sum では次のようなことができます。

* 企業内のデータを高速に集計できます
 * 企業内の大容量のデータをインポートして、高速に集計できます。インメモリにも対応しているので、さらに高速な集計も可能です。
* 操作性の高いユーザーインターフェイスが課題発見をサポートします
 * Microsoft Excel や Web ブラウザーを利用して、手軽なレポート出力、課題発見に向けた情報分析ができます。

#3.使い方
Excelのアドインとして「TableEditor」というメニューが追加されるので、
ここから操作を行えます。
データを編集するときに、Excelのソートやフィルターが使えるのですごくデータのメンテナンスがし易いです！
![2020-10-05_17h43_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656849/5dfa92a9-df5e-5ad7-09bd-57ca5a3ffd0d.png)

#4.活用シーン
* マスターデータのメンテナンス
 * カレンダーマスタや担当マスタ等、上位のシステムから連携されずに現場で管理しているマスタがあるかと思います。この場合、TableEditorを使用することで、簡単に現場ユーザーがマスターデータのメンテナンスが出来るようになりますね！
* 日報データの登録
 * 担当者の人が報告するような日報等のデータの登録もTableEditorで行うことで、スグにデータベースへ取り込んでテーブルにデータを蓄積できますね。データとして蓄積することで、他のデータを組み合わせてすぐに分析に使い始めることができると思います！





実際の使い方については、これから記事に挙げていくので乞うご期待！！
執筆できたら、こちらに記事のリンクを随時upしていこうと思います。
【個人開発】お笑いガシャ制作 | Ruby on Rails + Mechanize (スクレイピング )

・自分自身用の勉強とポートフォリオ作成のためでメモしておきます。

#1:タイトルとURL
お笑いガシャ
![スクリーンショット 2020-10-05 18.03.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128165/c53944a2-407b-f656-47b7-f42c07568e47.png)


![スクリーンショット 2020-10-02 17.54.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128165/670c955f-eb7d-8422-5cc3-a902259561da.png)



（とりあえずheroku）
https://fathomless-refuge-51046.herokuapp.com/

#2:機能とアイデア

・目の前にあるもの（テキスト名詞）＋スクレイピング でランダムにキーワードに適したボケてのページを表示する。

・あまり評価が低いものを表示しても面白くないのでキーワード中のトップ３をランダムで表示する仕様とした。

・スクレイピングはXpathで取得している。

#3:使用技術
Rails6/ruby/heroku/css/jquery/スクレイピング 

#手順
・　Rails アプリを作る
・　Mechanizeをインストール
・　任意のキーワードを元にBoketeをスクレイピング し、画像とボケを取得して表示

#4:制作期間
１日くらい

#5:難しかったこと・はまったところ
・　Xpathを使ってスクレイピングすること
・　ライブラリを使ったので意外と簡単にできた。

#6:工夫したところと今後
・検索するだけではおもしろくないので、自分の環境とプラスできるように表現を工夫した。
・複数ページや、大量データのスクレイピングとその解析にも挑戦したい。
・使ってて面白いがそれはBoketeさんが面白いだけである。強いて言うなら意表を突かれるので電車では検索できない。
package.jsonファイルの中身を見てみる

#package.jsonファイルの中身を見てみる

Vueでプロジェクトを作成したときに生成されるpackage.jsonファイルの中身を見てみる。


##package.jsonファイルとは？
プロジェクトの設定が書かれているファイル。configファイルのようなもの。

本番環境と開発環境でインストールするパッケージのリストや、プロジェクト名とそのバージョンが記載されている。

このファイルのパッケージのバージョンを書き換えることで、インストールするバージョンを指定できる。

```js:
{
  "name": "vue",  //プロジェクトの名前
  "version": "0.1.0", //プロジェクトのバージョン
  "private": true, //プロジェクトを公開しない
  "scripts": {  //コマンドのエイリアス
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": { //本番環境の依存パッケージ
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": { //開発環境の依存パッケージ
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {  //eslintのconfig
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [ //対応するブラウザを決める
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
```


<br>
##browserslistについて
このプロジェクトでカバーするブラウザを指定する。
ブラウザのバージョンを直接指定するのではなく、シェア率や、遡るバージョン数を指定する便利な方法。


```
  "browserslist": [ //対応するブラウザを決める
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
```

・`> 1%`
世界の使用状況１％以上。

・`last 2 versions`
各ブラウザの最後の２バージョン

・`not dead`
２年以内にアップデートがあるブラウザ


###対応しているツール

Autoprefixer
Babel
postcss-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
obsolete-webpack-plugin

＞https://github.com/browserslist/browserslist



###書き方はいろいろ

| 記述 | 内容 |
|:-:|:--|
| > 0.5%  | 世界中のシェア0.5%以上  |
| cover99.5%  | 最もシェア率が高いブラウザ  |
| last 2 Chrome versions | Chromeの直近２つのバージョン  |
| sice 2015  | 2015年以降のブラウザ  |
| since 2015-03-10  | 2015年３月１０日以降のブラウザ  |




vue createのマニュアル選択でconfigを別ファイルに記述にすると、package.jsonではなく他のファイルに出力される。


<br>
・**dependenciesとdevDependenciesの違い**
・**バージョンの指定方法について**

上記、については[こちら](https://qiita.com/yuta-38/items/7d723cf36c85d505b4fb)を参照。
Macのbrew環境を作り直した際のメモ(macOS Catalina バージョン10.15.7)

#環境
macOS Catalina バージョン10.15.7

#参考
Mac に Docker をインストールする最も？簡単な方法
https://qiita.com/normalsalt/items/9c10b2e046a5c103f626

#手順メモ

かなり曖昧なのですがメモがてら残します

Docker環境を確認しようとしたら以下のようなメッセージがでた

```
cannot load such file -- active_support/core_ext/object/blank (LoadError)
```

以下の記事を参考にbrew自体を再インストールしようとした

[Homebrew] cannot load such fileなどのエラーの対処法
https://qiita.com/shge/items/709771f137e32a7b61fc

が、次は以下のようなエラーになった

```
xcode-select: error: invalid developer directory '/Library/Developer/CommandLineTools'
```

以下を参考に
HomebrewをMacに初めてインストール。エラー発生。そして解決できました。
https://qiita.com/tenpis/items/d3d7baf886691c61bbd2

アップルのデベロッパーツールからcommand lineをインストールしてみようとしましたが、ここに書かれている
`command line tools (macOS 10.14) for Xcode`は存在しなかったため
`Command Line Tools for Xcode 12.2 beta 2`をDLしました。
このインストーラmacOS Catalina バージョン(確か)10.15.5以降でないと対応していなかったのでOSのバージョンをあげる必要が出てくるかもしれません。(別のインストーラなら対応してるかも？)

インストールが完了したら、LaunchpadにDockerが追加されていました。
![スクリーンショット 2020-10-05 17.28.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72559/b8ffd1fb-3566-ba24-4249-05ff96750f46.png)

最初に起動した際は

```
Docker Desktop needs privileged access to install its networking components and links to the Docker apps. You will be asked for your password.
```

とアクセス権を求められたのでパスワードを入力しました。

そのあとはこのアプリは使ってないので詳しいことは知りません。

インストール後の確認としてコマンドラインから

```
docker -v
Docker version 19.03.13, build 4484c46d9d

docker-compose -v
docker-compose version 1.27.4, build 40524192
```
と確認し終了。
厚生労働省の発生状況のオープンデータをデータクレンジング

[厚生労働省　国内の発生状況など](https://www.mhlw.go.jp/stf/covid-19/kokunainohasseijoukyou.html)
[オープンデータ](https://www.mhlw.go.jp/stf/covid-19/open-data.html)

csvに\n改行文字が入っていたり、前日比が同一セルに入っているのでデータクレンジング

```python
import re
import pandas as pd

df = pd.read_csv("https://www.mhlw.go.jp/content/current_situation.csv", index_col=0)

df.index = df.index.str.replace(r"※\d", "").str.replace(",", "").str.replace(r"\\n", "")
df.columns = df.columns.str.replace(r"※\d", "").str.replace(r"\\n", "").str.strip()

df = df.applymap(lambda s: re.sub(r"※\d", "", s))

dfs = []

for name, col in df.iteritems():

    df_tmp = col.str.split(r"\\n", expand=True).rename(columns={0: "累計", 1: "前日比"})
    df_tmp.columns = pd.MultiIndex.from_product([[name], df_tmp.columns])

    dfs.append(df_tmp)

df = pd.concat(dfs, axis=1).fillna(0)

df = df.applymap(lambda s: str(s).replace(",", "").strip().strip("()")).astype(int)

df.to_csv("current_situation.csv", encoding="utf_8_sig")
```

# 累計のみ
```python
df.loc[:, (slice(None), "累計")].droplevel(level=1, axis=1)
```
Python Webスクレイピング 実践入門

[Python Webスクレイピング 実践入門](https://qiita.com/Azunyan1111/items/9b3d16428d2bcc7c9406)
を参考にPython3で書き直しました

# 準備
## Pythonのバージョン確認
```shell-session
$ python3 -V
Python 3.8.6
```
# 日経平均株価取得
## パッケージのインストール
```shell-session
$ pip3 install beautifulsoup4
```
## スクレイピング
```python
from urllib.request import urlopen
from bs4 import BeautifulSoup

url = "http://www.nikkei.com/markets/kabu/"

html = urlopen(url).read()
soup = BeautifulSoup(html, "html.parser")

nikkei_heikin = soup.find("span", class_="mkc-stock_prices").string
print(nikkei_heikin)
```

## パッケージのインストール
```shell
$ pip3 install beautifulsoup4
$ pip3 install apscheduler
$ pip3 install requests
```

```python
import csv
import datetime

import requests
from apscheduler.schedulers.blocking import BlockingScheduler
from bs4 import BeautifulSoup

sched = BlockingScheduler()

# １時間ごとに実行する
# @sched.scheduled_job('interval', hours=1)


# 毎時0分に実行する
@sched.scheduled_job("cron", minute=0, hour="*/1")
def scheduled_job():

    # 日本経済新聞の日経平均株価ページにアクセスし、HTMLを取得する
    r = requests.get("http://www.nikkei.com/markets/kabu/")
    r.raise_for_status()

    # BeautifulSoupを使い日経平均株価を取得する
    soup = BeautifulSoup(r.text, "html.parser")
    nikkei_heikin = soup.select_one(
        "#CONTENTS_MARROW > div.mk-top_stock_average.cmn-clearfix > div.cmn-clearfix > div.mkc-guidepost > div.mkc-prices > span.mkc-stock_prices"
    ).get_text(strip=True)

    # 今の時間を文字列に変換する
    now = datetime.datetime.now().strftime("%Y/%m/%d %H:%M:%S")

    print(f"{now} {nikkei_heikin}"

    # CSVに日時と日経平均株価の値を追記する
    with open("nikkei_heikin.csv", "a") as fw:
        writer = csv.writer(fw, dialect="excel", lineterminator="\n")
        writer.writerow([now, nikkei_heikin])


sched.start()
```
(Javascript) オブジェクト指向 と オブジェクト&配列 の違い

#はじめに
今回は、Javascriptの"超基本" 
<strong>オブジェクト・配列</strong> の違いについて記録します。
##オブジェクト指向
オブジェクト指向 とはプログラムで扱う対象を、<strong>オブジェクト(もの)</strong>として考えるものです。
また、その<strong>オブジェクトを中心</strong>として組み立てていく手法になります。
この手法は、java などにも取り入れらています。↓詳細

java C# Ruby → <a href="https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%99%E3%83%BC%E3%82%B9" terget="blank">クラスベース</a>のオブジェクト指向言語
javascript → <a href="https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%99%E3%83%BC%E3%82%B9" target="blank">プロトタイプベース</a>のオブジェクト指向言語

となります。

##オブジェクトとは何ぞや？
オブジェクトとは、<strong>名前をキーにアクセスできる配列(連想配列)</strong>であり、<strong>入れ物の集合</strong>です。
配列 と類似して、頭がモヤモヤしてしまいますが、概念的に異なるので注意してください。

また 入れ物のの集合 といっても 集合する物は <strong>特定の役割・機能</strong> を持っているのが特徴的です。
このことから、オブジェクトは <strong>様々な機能を持つ"高機能な入れ物"</strong>と考えても良いと思います。
###特定の構成と役割とは？
####構成
<strong>プロパティ</strong> と <strong>メソッド</strong> の2つのことです。

####役割
><strong>プロパティ</strong>
オブジェクト(もの)の <strong>状態・特性</strong> を持ちます。
例えば、 <strong>フォームの名前</strong> ・ <strong>フォームに含まれるテキストボックスなど "要素"</strong> <strong>フォームの送信先</strong> です。

><strong>メソッド</strong>
オブジェクト(もの)を<strong>操作する</strong>ことです。
例えば、<strong>フォームの情報をサーバーへ送信すること</strong> や <strong>フォームの内容をクリア</storng> にすることに該当します。

##配列 と オブジェクト の違いとまとめ
以上のことから 配列 と オブジェクト の違いが分かったと思います。
まとめに、異なる点をまとめます。

><strong>配列 (連想配列) ‥ 複数要素の集合体 (配列data)</strong>
[A0001:大友宗麟] [B0002:島津義久] [C0003:龍造寺隆信] [D0004:少弐冬尚] [E0005:伊東義祐]

そして

><strong>オブジェクト</strong>
[name:龍造寺隆信][sex:男][birth:02/25][address:佐賀県]

※余談ですが、アニメや漫画で 龍造寺隆信 がやたら出ますね。 (失礼しました!)

まとめると↓

```
配列→ 個々の要素が主体
オブジェクト→ モノが主体
```

#あとがき
以上が、オブジェクト指向 と オブジェクト&配列 の違いでした。
いかがでしたか？
役に立っていれば嬉しいです。
では!

#Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。

<a href="https://twitter.com/0819_tateishi" target="blank">Twitter</a>
<a href="https://ayu-portfolio.herokuapp.com/" target="blank">Portfolio</a>
<a href="https://github.com/ayu0819" target="blank">Github</a>
<a href="https://note.com/ayu0819" target="blank">Note</a>
LaravelでVue.jsを使うときの備忘録

Laravel内でVue.jsを使うときにつまづいたところを、備忘録として雑多に書いていく。

### bootstrap-vueを使う方法
以下の記事を参照
[Qiita - laravelでbootstrap-vueを使う
](https://qiita.com/kotarosz1/items/64dc24f5f37b849d203f)
vueやbootstrapがすでに導入されているなら、`npm i bootstrap-vue`でオッケー。

### JSを読ませる場所
headタグ内か、bodyタグ内の最下部か。

JSを使うときに、HTMLをよりも先にJSを読ませると、ページの表示が遅くなってしまう。

それを防ぐのに、bodyタグ内の最下部に書く方法がおすすめされていた。

Laravel7を使っているときに、もともと付いていたBladeファイルは、headタグ内に書かれていて、なんでだろうと調べたら、scriptタグに**defer**がついている。どうやらこれをつけることで、HTMLの描画がおこなわれたあとにJSが実行されるとのこと。

```php:index.blade.php
<html>
<head>
    <script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
</body>
</html>
```

~~### blade内のタグ内でLaravel（php）表記したいとき~~

~~**{!! !!}**を使う。~~

### bladeテンプレート内でのVueコンポーネントの使い方例

```html:index.blade.php
<progress-bar
    v-bind:value="@json(Auth::user()->getCountMaster($skills->first()->rank))"
    max="{{$skills->count()}}"
    >
    </progress-bar>

```

valueはvueで動的に値を変更したいので、v-bindディレクティブをつけている。v-bindディレクティブ内はphp構文ではだめで、json形式が必要。なので、@json（Laravel構文（php））で渡している。を
一方、maxはvueで値を動かさないので、v-bindディレクティブはつけないで渡す。{{}}で変数を展開して渡している。


### 親子関係
テンプレートを使って、bladeに読み込ませるときの親子関係は以下の通り。

親は、app.jsを読み込ませたbladeファイル。
子は、テンプレートの単一コンポーネントファイル。

### 親子間のデータ受け渡し
・親 -> 子へは、propsを使用する。
・子 -> 親へは、$emitを使用して、親のコンポーネントを発火させて、データを渡す。
・子1 -> 親 -> 子2は、[Qiita - Vue.js　親・子　コンポーネント間　データ　受け渡し](https://qiita.com/Takmonkey/items/a5bb8ebd10dd250516ac)の記事を参考にする。イベント名はケバブケースが良いみたい。
線形回帰（load_boston）

今回は線形回帰の実装（コード）をまとめていきます。

##■ 線形回帰の手順

次の6つのSTEPで進めます。

1. モジュールの用意
2. データの準備
3. モデルの作成
4. 予測値の算出
5. 残差プロット
6. モデルの評価

##1. モジュールの用意
最初に、必要なモジュールをインポートしておきます。

```python
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt

# データセットを読み込むモジュール
from sklearn.datasets import load_boston

# 訓練データとテストデータを分割するモジュール
from sklearn.model_selection import train_test_split

# 線形回帰（最小二乗法）を行うモジュール
from sklearn.linear_model import LinearRegression

# 平均二乗誤差（MSE）で評価するモジュール
from sklearn.metrics import mean_squared_error

# 決定係数（r2_score）で評価するモジュール
from sklearn.metrics import r2_score
```
<br>
##2. データの準備
データの取得をした後、処理しやすいように分割を行います。

```python
# Bostonデータセットの読み込み
boston = load_boston()

# 目的変数と説明変数に分ける
X, y = boston.data, boston.target

# 訓練データとテストデータに分割する
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size = 0.3)
```
<br>
##3. モデルの作成
最初に線形回帰の実行関数（インスタンス）を作成し、訓練データに当てはめます。
そうすると、最小二乗法によりモデル式（回帰式）の各重みを求めることができます。

```python

# 線形回帰のインスタンスを作成
lr = LinearRegression()

# 最小二乗法により、各重みを求める
lr.fit(X_train, y_train)

# 切片を出力
print(lr.intercept_)

# 回帰係数（傾き）を出力
print(lr.coef_)
```

＜出力結果＞

```python

lr.intercept_: 22.38235838998073

lr.coef_: [-1.30942592e-01  3.93397530e-02  3.34152241e-02  2.69312969e+00
 -1.77337676e+01  3.95093181e+00 -1.16396424e-03 -1.51204896e+00
  3.36066399e-01 -1.37052283e-02 -9.54346277e-01  8.23484120e-03
 -5.17616471e-01]
```

lr.intercept_：切片（重み $w_0$）
lr.coef_：回帰係数・傾き（重み $w_1$ ~ $w_{13}$）

よって、下記のモデル式（回帰式）における具体的な数値が求まりました。

$ y = w_0 + w_1x_1+w_2x_2+ \cdots + w_{12}x_{12} + w_{13}x_{13}$
<br>
##4. 予測値の算出
先ほど作成したモデル式にテストデータ（X_test）を入れて、予測値（y_pred）を出します。

```python

y_pred = lr.predict(X_test)
y_pred
```

＜出力結果＞

```python

y_pred: [34.21868721 14.30330361 18.5687412  19.17046762 22.60218908 31.75197222
 13.56424899 19.9953213  36.91942317 ..... 25.08561495, 13.68910956]
```
<br>
##5. 残差プロット
モデルの評価をする前に、残差のプロットを見ておきます。
残差：予測値と正解値の差（y_pred - y_test）

```python
# 描画オブジェクトとサブプロットの作成
fig, ax = plt.subplots()

# 残差のプロット
ax.scatter(y_pred, y_pred - y_test, marker = 'o')

# y = 0 の赤い直線をプロット
ax.hlines(y = 0, xmin = -10, xmax = 50, linewidth = 2, color = 'red')
 
# 軸ラベルを設定する
ax.set_xlabel('y_pred')
ax.set_ylabel('y_pred - y_test')

# グラフのタイトルを追加
ax.set_title('Residual Plot')

plt.show()
```
＜出力結果＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725082/f61811f3-03ea-0297-2d15-266ae60aafaa.png)
赤い線（y_pred - y_test = 0）の上と下で、バランス良くデータが散らばっているので
予測値の出力に大きな偏りはないことが確認できます。
<br>
##6. モデルの評価
線形回帰では、下記2つの指標で評価を行います。

・平均二乗誤差（MSE）
・決定係数（r2_score）

```python

# 平均二乗誤差（MSE）
print(mean_squared_error(y_test, y_pred))

# 決定係数
print(r2_score(y_test, y_pred))
```

＜出力結果＞

```python

MSE: 19.858434053618794
r2_score: 0.7579111486552739
```
以上より、2つの指標で評価することができました。
<br>
##■ 最後に
線形回帰では上記1～6の手順をもとに、モデルの作成・評価を行っていきます。

今回は初学者の方向けに、実装（コード）のみまとめさせていただきましたが
今後タイミングを見て、理論（数式）についても記事を作成していければと思います。

ご精読いただき、ありがとうございました。

参考文献：[Pythonによるあたらしいデータ分析の教科書](https://www.shoeisha.co.jp/book/detail/9784798158341)
　　　　（Python 3 エンジニア認定データ分析試験　主教材）
jqでJSONオブジェクト配列をCSV形式にする

入力

```
[
  {
    "col1": "v1a",
    "col2": "v1b"
  },
  {
    "col1": "v2a",
    "col2": "v2b"
  }
]
```

処理

```
jq -r '.[]|[.col1,.col2]|@csv' hoge.json
```

出力

```
"v1a","v1b"
"v2a","v2b"
"v3a","v3b"
```
ReactでMasonry(タイルを敷き詰めたようなデザイン)を実装する

[react-masonry-css](https://github.com/paulcollett/react-masonry-css)を使ってこういうデザインを実装します。(このデザインはCSSだけだと結構しんどいです。)
![FireShot Capture 034 - React Masonry Css Example - paulcollett.github.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/51d91610-e7f6-d1c5-466c-cb2f98fe0e88.png)

```zsh
$ yarb add react-masonry-css # or npm install -D react-masonry-css
```
```jsx:JSX
import React from "react"
import Masonry from "react-masonry-css"

export default () => {
  const events = [
    {
      "title": "React勉強会",
      "text": "Reactの勉強をします"
    },
    {
      "title": "JavaScript勉強会",
      "text": "JavaScriptの勉強をします"
    },
    {
      "title": "Ruby勉強会",
      "text": "Rubyの勉強をします"
    },
    {
      "title": "Rails勉強会",
      "text": "Railsの勉強をします"
    },
    {
      "title": "TypeScript勉強会",
      "text": "TypeScriptの勉強をします"
    }
  ]
  // 1行に表示するカラム数
  const breakpointColumnsObj = {
    default: 4,
    1350: 3,
    1048: 2,
    576: 1,
  }
  return (
    <div>
      <h1>勉強会一覧</h1>
      <Masonry
        breakpointCols={breakpointColumnsObj}
        className="my-masonry-grid"
        columnClassName="my-masonry-grid_column"
      >
        {events.map(e => (
          <div className='event-card'>
            <h3>{e.title}</h3>
            <p>{e.text}</p>
          </div>
      ))}
      </Masonry>
    </div>
  )
}
```
```css:CSS
.my-masonry-grid {
  display: flex;
  margin-left: -30px; /* 項目間の余白のサイズ */
  width: auto;
}
.my-masonry-grid_column {
  padding-left: 30px; /* 項目間の余白のサイズ */
  background-clip: padding-box;
}

.my-masonry-grid_column > .event-card {
  background: grey;
  margin-bottom: 30px;
}
```

## 注意点
この例では1行に4カラムをデフォルトのカラム数に設定しています。
576px以下の時は1カラムしか表示しないように設定していますが、ページ表示後の一瞬だけ4カラム表示されてしまいます。
これを防ぐために、絶対にきちんと表示したいスマホ専用のDOMを新たに作成し、PCで表示する時には`display: none`で非表示にすることになりました。
2020年度版初心者でも5分でわかる Amazon EC2について 


#はじめに
この記事では、AWSの代表的なサービス「Amazon EC2」について、以下をテーマに簡単な言葉でまとめていきます。

1. EC2とは何か
2. EC2のメリット
3. EC2に関する用語
4. 利用料金について

#EC2とは
AWS上で仮想サーバを構築・利用できるサービス。
「Amazon Elastic Compute Cloud」の略称。
#EC2のメリット

- 従量課金制で低コスト
- 最適なサーバーの作成がボタン１つで可能
- スペックの変更が柔軟に行える
- 簡単に冗長化を行える
- 別サービスと組み合わせやすい

#EC2に関する用語

###インスタンス
**AWS上の仮想サーバーのこと。**
必要に応じて複数のインスタンスを立ち上げることで、柔軟なインフラ構築ができる。

###AMI (Amazon Machine Image)
**OSやソフトウェアの構成を記録したテンプレート。**
AMIを使うことで同じ設定のサーバーをいくつも作成できる。
Amazon Linux、CentOS、Red Hat Enterprise Linuxなど。

###キーペア
**SSH接続において、ログインする際の認証に使用する公開鍵と秘密鍵のペア。**
SSHとは、サーバーにインストールしたソフトウェアを操作するときに使用するしくみ。

###EBS (Elastic Block Store)
**EC2インスタンスと組み合わせて使うストレージボリューム。**
ストレージとは、かんたんにいえばデータを記録する場所のこと。

###セキュリティグループ
**仮想的なファイアウォール機能。**
EC2インスタンスへのアクセスを許可し、トラフィック（ネットワークを流れる情報）を制御する。

###Elastic IPアドレス
**静的な（固定の）グローバルIPアドレス。**
EC2のインスタンスは、停止して起動しなおすとグローバルIPアドレスが変わってしまう→サーバーにアクセスできなくなる。
Elastic IPアドレスをインスタンスに結び付けることで、IPアドレスを固定することができる。

###ELB(Elastic Load Balancing)
**サーバーに集中するアクセスを、複数のサーバーやネットワークに振り分ける機能。**

###スナップショット
**ある時点でのサーバーのディスク状態を保存する機能。**
ソフトウェアやOSの更新時に、何かあったときにすぐ戻せるようにバックアップとしてとることが多い。

###Auto Scaling
**インスタンスの増減を自動で行う機能。**
アクセスが少ないときは減らしてコストを削減。
多いときは増やしてアクセスに対応。

#EC2の利用料金の考え方

AWSの料金は月に使った分だけ支払う「従量課金制」です。

**①インスタンス使用料（稼働している時間×単価）＋②EBSの料金（容量×単価）＋③通信料金＋④その他のオプション**

**また、AWSにはアカウントを新規作成後12か月間有効な「無料利用枠」というものがあります。**
使用できるリソースには制限がありますが、1か月に750時間無料でインスタンスを利用することが可能です。

無料利用枠で使用できるリソース
・インスタンスタイプは t2.micro
・OSは Amazon Linux 1,2、Windows Server、Red Hat Enterprise Linux、SUSE Linux、Ubuntu Server

無料利用枠について詳しく知りたい方はこちら。
https://dev.classmethod.jp/articles/overall-summary-about-aws-free-tier/

#おわりに
現在AWSの勉強を始めたばかりですが、今回は代表的なサービスであるAmazon EC2についてまとめました。今後学習を進めていく中で、他のサービスについても調査してまとめていきたいです。

#参考書籍

- https://www.amazon.co.jp/図解即戦力-Amazon-Web-Servicesのしくみと技術がこれ1冊でしっかりわかる教科書-小笠原/dp/4297108895
PyInstallerでexeファイル化したものがAVASTやAVGでトロイの木馬ウイルスと誤認される問題の一時的な解決法

##PythonをPyInstallerでexe化したときにウイルス認識される問題

Pythonを簡単にexe化する時に便利なPyInstallerですが、これでexe化したものがいくつかのウイルスソフトでトロイの木馬と認識されるようになっているようだ。

##ウイルス認識された手順（使用しない）
###環境
Windows10　64ビット
Python3.8

下記手順でexe化したものは結構ウイルス判定が多くでてしまった。

1)コマンドプロンプトでpipインストール
```pip install pyinstaller
```

2)コマンドプロンプトでexe化
```pyinstaller ファイル名 -–onefile -–noconsole
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666820/2a479355-2342-0a41-04ef-a7e6b8f887f3.png)

##解決方法
###1)コマンドプロンプトでGitクローンを行う
```git clone https://github.com/pyinstaller/pyinstaller
```
▼Gitを入れてない人は下記リンクを参考に入れておく
https://git-scm.com/book/ja/v2/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B-Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

###2)コマンドプロンプトでPyInstaller下のboot loaderに移動
```cd pyinstaller
```
```cd bootloader
```

###3)コマンドプロンプトで下記を入力
```python ./waf distclean all
```
Linux系の場合はPythonの所をPython3とする。
ここでエラーが出るがクリーンすることが目的なのでエラーを無視します。

###4)コマンドプロンプトで下記を入力し、ブートローダーを構築する
```python setup.py install
```

###5)pyinstallerの導入確認
コマンドプロンプトで下記を入力してpyinstallerのコマンドを確認
```pyinstaller
```

###6)コマンドプロンプトでexe化
pythonコードを作成したフォルダへcdコマンドで移動し下記を入力
```pyinstaller ファイル名 -–onefile -–noconsole
```

##改善結果
目的のAVASTやAVG等の誤認は改善でき、他のソフトでのウイルス検知もかなり減ったがまだウイルス検出がでる。
色々調べたがPyInstallerがウイルス作成に高頻度で使用されているから仕方ないという海外の記事しか見つからなかった。
一時的な解決方法ではあるが備忘録として記載しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666820/bbd8e81e-219d-fe9b-7731-1020007c64fa.png)

##参考

 [how to recompile the bootloader of Pyinstaller
](https://stackoverflow.com/questions/53584395/how-to-recompile-the-bootloader-of-pyinstaller"how to recompile the bootloader of Pyinstaller")
無料のOpenShift on IBM CloudでWatson画像認識アプリを試す。

　先日ご紹介した無料のIBM Cloud上のOpenShift環境ですが。具体的に動くアプリがあった方がいいかと思い一つ紹介します。
なお"無料でOpenShift (on IBM Cloud) を使ってみる"はこちらです。
https://qiita.com/osonoi/items/a5d3a5fe78455c842f42

今回は上で紹介している２つのページの下の方のSkill's networkの方でやってみます。
Skills Network Labs. https://labs.cognitiveclass.ai/tools/theiaopenshift/lab/tree?md_instructions_url=https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/deploy-ai-microservices-on-kubernetes/tutorial-instructions.md

今日紹介するアプリは下の様にご自分のパソコンにある画像をアップするとそれが何かを判断（画像認識してくれます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/a4ba97c8-4368-1e8e-16e0-cf1481b29bb8.png)


構成としてはソースコードがGitHubaにあってそれをOpenShiftのS2Iを使ってデプロイしていく感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/5bd853bb-0d89-59bc-8db9-0e72a2824bbf.png)

やり方はこちらのページにご紹介していますが簡単に補足します。
https://github.com/osonoi/watson-vr-node-e

やることは以下の３つです。
- Watson VRのサービスをIBM Cloudでオーダー（無料のライトアカウントでも大丈夫です）
- 上記Skill's networkでOpenShiftの準備（１で使うIBM Cloud アカウントが必要になります）
- OpenShift上にアプリをデプロイ　（コマンドラインを使います）

　もちろん全部無料でできるので是非やってみてください。

# Watson VRのサービスをIBM Cloudでオーダー（無料のライトアカウントでも大丈夫です）
 ここでは簡単にいうとサービスを作ってAPI Key をどこかに控えておくだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/d9b9abdb-4761-4479-4658-904149b97217.png)

# 上記Skill's networkでOpenShiftの準備（１で使うIBM Cloud アカウントが必要になります）
 上記のSkill's networkにログインしてOpenShiftにコマンドコンソールから操作できる様にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/72a6d187-cbd7-8147-d08c-c787d88e6a1f.png)

# OpenShift上にアプリをデプロイ　（コマンドラインを使います）
上記のコンソールにコマンドを入れていくだけです。最初のコマンドの<APIkey>に１番最初でコピーしたAPIKeyをコードの最後に付け加えてください。それ以外はコピペでOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/da2106b7-6980-913c-500c-d4c1d3aa1bdb.png)
入力するコマンド

```
oc new-app https://github.com/osonoi/watson-vr-node-e.git -e CLASSIFIER_ID=food -e WATSON_VISION_COMBINED_APIKEY=<APIKEY>
```


* <APIKEY>を上でコピーしたご自分のAPI keyに置き換えて下さい。

```
oc logs -f bc/watson-vr-node-e
```

デプロイステータスが出力されます。（時間がかかります）

```
oc expose dc watson-vr-node-e --port=3000 --type=LoadBalancer --name=watson-vr-node-ingress
oc expose service watson-vr-node-ingress
oc get route/watson-vr-node-ingress
```

最後の出力にアプリのURLが表示されています。
例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/9306766e-f288-1a8a-2a7f-761c86ad1815.png)
Watson........cloudまでがURLです。

以下の様にブラウザーの別タブURLを開くとでアプリが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59741/e2492609-5675-73db-f8e4-b764335f9904.png)

是非お試しください。
NoSQLデータベースを比較 MongoDB vs. Cassandra,DynamoDB,CouchDB

NoSQLデータベースとして人気のMongoDBとその競合を比較したブログを紹介します。各比較ブログに遷移するには、タイトルをクリックください。

#[Cassandra vs MongoDB: 知っておくべきポイント](https://www.xplenty.com/jp/blog/cassandra-vs-mongodb-ja/)
どちらのデータベースにも注目度の高い顧客がいます。Netflix、Instagram、Huluなどの巨大企業は、データ・ストレージのニーズを満たすためにCassandraを利用しています。同様に、Google、Adobe、Paypalなどの巨大企業もMongoDBを使用しています。しかし、2つのデータベースは、データの保存方法やデータの複製などの機能が異なります。ここでは、CassandraとMongoDBの主な違いについてご紹介します。

#[DynamoDB vs MongoDB: 5 つの重要な違い](https://www.xplenty.com/jp/blog/dynamodb-vs-mongodb-differences-ja)
MongoDB vs DynamoDB: どちらを選べば良いでしょうか？PoCを開始する少数チームの場合でも、高スループットと高負荷に立ち向かうしっかりしたチームでも、この記事はあなたの意思決定プロセスの指針となります。詳細に入る前に、これらのテクノロジーがどのようにして登場したのかについての簡単な歴史のレッスンが必要です。 この記事は、どちらを選択すべきか悩んでいる方にとってのガイドとしてご利用いただけます。

#[CouchDB vs. MongoDB: 徹底比較](https://www.xplenty.com/jp/blog/couchdb-vs-mongodb-ja/)
NoSQLデータベースはビッグデータの世界を揺るがし、従来のリレーショナルデータベースに代わる魅力的な選択肢を提示しています。NoSQLデータベースを使用しようとお考えなら、CouchDBとMongoDBはあなたにとって一番の選択肢である可能性が高いでしょう。しかし、CouchDBとMongoDB、どちらが優れているのでしょうか？
このブログでは、MongoDB vs.CouchDBの詳細な比較を紹介します。あなたの会社にとってどちらが合っているかを判断するのにお役立てください。
初めてのAWS Lambda〜自作関数を動かす

# 前回の記事
[初めてのAWS Lambda〜Hello World](https://qiita.com/johnny1204/items/ef37459d96d74b0e62df)

# 今回の目標
Lambdaで自作関数を作成して、Slackに通知を送る

# 前準備
Slack通知を行いたいワークスペースにIncoming Webhookを追加し、Webhook URLを取得する
![slack_webhook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236230/a6808192-8800-1ba3-a43e-ca3cd6b6bb20.png)

# 関数の作成
## AWSコンソール
今回は関数を自作するので、「一から作成」を選択し、関数名を入力。
言語はお好きなものを選択。今回はNode.jsにしてみた

![lambda.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236230/0a788c58-da7b-c2e6-a9c9-1efbf70b3e03.png)

## SlackのWebhookへリクエストする関数

``` js
const https = require('https');

exports.handler = (event, context) => {
  const options = {
    host: "hooks.slack.com",
    path: "{Incoming Webhookで取得したWebhook URL}",
    method: "POST",
    headers: {
      "Content-Type": "application/json; charset=utf-8"
    }
  };
  
  const request = https.request(options, resp => {
    if (resp.statusCode === 200) {
      context.succeed(); 
    }
  }).on('error', e => {
    console.log(e.message);
    context.fail(e.message);
  });
  
  // { "message": "ほげほげ" }のようなjsonを想定
  request.write(JSON.stringify({ text : event.message }));
  request.end();
};

```

## テストの実行
これは前回と同じ。今回は`{ "message": "ほげほげ" }`のようなjsonを想定しているのでテスト用のjsonを作成しテスト

- テスト用json  

``` json
{
  "message": "AWS Lambdaからの通知"
}
```

## 結果
コンソール上でテスト実行が成功
![result_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236230/2827f2ee-c206-1fcb-8cbe-805651790910.png)


Slackに通知がきていることも確認
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236230/2c0b2ed7-3636-1fa2-4f4b-fe0fed9d0987.png)

# まとめ
今回はLambdaで自作関数を作成して実行するところまでを試してみました。関数を設計図を使用するか自分で作るかの違いだけで主にやることは変わりませんね。
実際は何かイベントをトリガーにLambda関数を実行させるのだと思うので、次の機会にやってみようかと思います。![result_success.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236230/4f025d97-1784-cdbf-fddf-85c012d71410.png)
LinuxでPBR(Policy Base Routing)

CiscoやYAMAHAのルーターならフィルタなどを利用してポリシーベースルーティングできると思います。
同じようにLinuxでもやりたいと思います。

ポリシーベースルーティングとは、通常のルーティングと違い、ホスト内で完結させるルーティング手法。
特定の動作の時に特定のルートテーブルを使う。といった感じです。(説明難しい。。。)
例えば・・・

* マルチホーム環境で特定のポートにアクセスする場合は、ゲートウェイを変えたい。
* マルチホーム環境で、入ってきたI/Fのアクセスは応答する時も同じI/Fで出したい。
などなど。。。

キモはマルチホーム環境である事。

## 例題)特定のポートにアクセスする場合にゲートウェイを変えたい
どんなシチュエーションが考えられるか？
・通常はA回線を使っているが、httpアクセスの時はB回線を使いたい。

今回の環境は
・ホストに外線が3本刺さっており(192.168.0.2,192.168.1.2,192.168.2.2)、その先にゲートウェイ(192.168.0.1,192.168.1.1,192.168.2.1)がそれぞれあるとする。
・ホストから12.34.56.78のhttpアクセスはゲートウェイAから。12.34.56.78のhttpsアクセスはゲートウェイBから。12.34.56.78のsshアクセスはゲートウェイCから。それぞれアクセスするようにしたい。

![図面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223667/02565f13-a2e5-3bfc-bf7f-d7d6049d1615.png)

こんな事を叶えるために必要なLinuxの機能は
  * iproute2
  * iptables
になります。

iptablesで特定のポートに向かうパケットに印を付け(iptables)、印の付いているパケットは指定のルーティングテーブルを使う(iproute2)。

### 1.iptablesに印を付ける
パケットに印を付けるにはiptablesのmangleテーブルを使用する。

~~~
# iptables -t mangle -A OUTPUT -p tcp --dport 80 -j MARK --set-mark 1　←tcp80に向かって出ていくパケットに「1」をマークする
# iptables -t mangle -A OUTPUT -p tcp --dport 443 -j MARK --set-mark 2　←tcp443に向かって出ていくパケットに「2」をマークする
# iptables -t mangle -A OUTPUT -p tcp --dport 22 -j MARK --set-mark 3　←tcp22に向かって出ていくパケットに「3」をマークする
~~~

### 2.iproute2にルールを追加する
印を付けたパケットに対するルールを指定する。

~~~
# ip rule add fwmark 1 table 10　←「1」をマークされているパケットは「table10」を参照する
# ip rule add fwmark 2 table 20　←「2」をマークされているパケットは「table20」を参照する
# ip rule add fwmark 3 table 30　←「3」をマークされているパケットは「table30」を参照する
~~~

更にゲートウェイ宛のインターフェースが複数あるため、戻りパケットにも指定を入れておく。

~~~
# ip rule add from 192.168.0.2 table 10　←「192.168.0.2」に入ってきたパケットは「table10」を参照する
# ip rule add from 192.168.1.2 table 20　←「192.168.1.2」に入ってきたパケットは「table20」を参照する
# ip rule add from 192.168.2.2 table 30　←「192.168.2.2」に入ってきたパケットは「table30」を参照する
~~~

### 3.iproute2にルートを追加する
参照させるルートtableを作成する。

~~~
# ip route add default dev eth1 via 192.168.0.1 table 10　←「table10」のデフォルトゲートウェイはeth1の先の192.168.0.1とする
# ip route add default dev eth2 via 192.168.1.1 table 20　←「table20」のデフォルトゲートウェイはeth2の先の192.168.1.1とする
# ip route add default dev eth3 via 192.168.2.1 table 30　←「table30」のデフォルトゲートウェイはeth3の先の192.168.2.1とする
~~~

それぞれのtableにローカルリンクを追記しておく方が良いので、適宜対応しましょう。
ローカルリンクの書き方は

~~~
# ip route show table main
~~~
を参照し、default意外を適用すると良いぞ！

ワンライナーだとこんな感じ

~~~
# ip route show table main | grep -Ev ^default | while read ROUTE ; do ip route add table "table名" $ROUTE; done
~~~

以上で設定は終わり。実際に検証してみよう。
問題なければ `/etc/rc.local`か何か起動スクリプトに追加するといいかもしれない。
ZABBIXでISC DHCPの状態を監視する

ZABBIXでISC DHCPサーバーでのIPアドレスの割り当て状態を監視しようと思ったら何故かPerlなどで書かれたそこそこに規模の大きなスクリプトを使うような例しか見つけられなかったのでWAKを使って自分で実装してみました。

`/usr/local/bin/dhcpd_status`に保存したシェルスクリプトではISC DHCPのリリース記録(dhcpd.leases)をawkで解析して使用中(active)、解放済み(free)、未割り当て(noassign)、割り当て可能(available)、プールに割り当てられた数(quota)のそれぞれを表示します。

```shwll:/usr/local/bin/dhcpd_status
#!/bin/sh
pattern=`echo -n "${1}"|sed -e 's/\./\\\\\\\\./g'`
active=`awk -v pattern="$pattern" '/^lease / { if ( $2 ~ pattern ) { curlease = $2; } else { curlease = "" } } /^  binding state / { if ( curlease != "" ) { lstates[curlease] = $3; } } END { for (curl in lstates) { tstates[lstates[curl]]++; } print tstates["active;"]; }' /var/lib/dhcpd/dhcpd.leases`
free=`awk -v pattern="$pattern" '/^lease / { if ( $2 ~ pattern ) { curlease = $2; } else { curlease = "" } } /^  binding state / { if ( curlease != "" ) { lstates[curlease] = $3; } } END { for (curl in lstates) { tstates[lstates[curl]]++; } print tstates["free;"]; }' /var/lib/dhcpd/dhcpd.leases`
pattern=`echo -n "^[\\t ]*range[\\t ]*${1}"|sed -e 's/\./\\\\\\\\./g'`
quota=`awk -F'[\t; ]*' -v pattern="$pattern" 'BEGIN { ttl = 0; } $0 ~ pattern { split($3, ip_from, "."); split($4, ip_to, "."); ttl += ip_to[4] - ip_from[4]; } END { print ttl; }' /etc/dhcp/dhcpd.conf`
noassign=$(($quota-$active-$free))
echo active: $active
echo free: $free
echo noassign: $noassign
available=$(($free+$noassign))
echo available: $available
echo quota: $quota
```

パラメーターを付けずに実行すると全てのサブネットの合計で計算

```coosole:
# /usr/local/bin/dhcpd_status
active: 55
free: 313
noassign: 328
available: 641
quota: 696
```

パラメータにサブネット部分のネットワークアドレス(ピリオドを含む)を与えると指定されたサブネットの値を計算

```console:
[root@zeus ~]# /usr/local/bin/dhcpd_status 192.168.1.
active: 41
free: 128
noassign: 0
available: 128
quota: 169
```

`/etc/suders`では先ほどのシェルスクリプトをroot権限で実行できるように設定しています。

```config:/etc/suders
zabbix    ALL=(ALL)       NOPASSWD: /usr/local/bin/dhcpd_status
Defaults!/usr/local/bin/dhcpd_status !requiretty
```

`/etc/zabbix/zabbix_agentd.conf`ではzabbix_serverからの要求に応じて先ほど用意したシェルスクリプトを呼び出します。

```config:/etc/zabbix/zabbix_agentd.conf
UserParameter=isc.dhcpd[*],sudo /usr/local/bin/dhcpd_status $1 | grep $2 | cut -d' ' -f 2
```

zabbix-agentdのテストコマンドで値が取得できることを確認する

```console:
# zabbix_agentd -t isc.dhcpd[192.168.1.,active]
isc.dhcpd[192.168.1.,active]                  [t|72]
```

同様にzabbix-getでも確認してみる

```console:
# zabbix_get -s 127.0.0.1 -k isc.dhcpd[192.168.1.,active]
isc.dhcpd[192.168.1.,active]                  [t|72]
```

※zabbix-getだとスクリプトなどが実際にzabbix-agentdを動作させているアカウントの権限で実行されるのでsuderの設定のミスなどを発見できる

あとはZABBIXサーバーでISC DHCPサーバーを稼働させているホストの監視アイテムにDHCP関連のアイテムを追加すれば目的の値を取得できる
アイテムのキーは`isc.dhcpd`パラメーターは`[サブネットのIP,取得したい項目]`となっている
![スクリーンショット 2020-10-06 8.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148717/a8e78474-9c9b-724f-40ef-58c364a4f1be.png)
VSCode を使ってCloudFormationテンプレートに設定ミスがないかチェックする方法

最近、AWS上にテスト環境を作るのにあたってCloudFormationテンプレートで環境を作成することが増えてきました。テスト環境を自分だけで作るのは、まあまあリスクは抑えられるのですが、テンプレートをもっと広い範囲で使いたいときに、安全装置としての解決策の紹介です。

## 設定ミスってなんだろ？

「設定ミス」は、自分では意図しない設定、ってことですが、その設定で構築している環境に致命的なリスクがあることがあります。そもそも、そうならないように、テンプレートを使って環境を作成するわけですが、テンプレート自体に致命的なリスクが内包されている場合には、それがコピーされて増幅してしまう恐れがあります。なので、テンプレート自体に設定ミスがないかの確認は重要事項となります。で、そもそも、設定ミスとは、例えばS3の場合....

・作成時に誤って公開状態にしてしまった
・暗号化せすに公開してしまった
・アクセスログを有効にしていない

などなど。
このような意図しない項目がセットされてしまうことを事前に防ぐことを目的としています。特にコピペしてテンプレートを作る場合など、事前に内包されるリスクを確認したい、などというときに重宝すると思います。

## Conformity を設定する

[Conformity](https://www.cloudconformity.com/) の[CloudFormiation Template scanner](https://www.cloudconformity.com/help/template-scanner.html) を外部APIから使うことで確認することが可能です。使えるまでの手順はざっくり以下になります。
・ユーザー登録：まずは[14日のトライアル](https://www.cloudconformity.com/identity/sign-up.html)で試用可能
・AWSアカウントの紐づけ
・API Keyを作成：
1. 右上のユーザ名をクリックします
2. 左メニューから"API Keys"を選択
3. "New API Key"を選択すると、新しいAPI Keyを振り出すことができます。
　　ここで作成したKeyをメモ帳か何かにコピーして保存しておいてください。（保存を忘れたらまた新しいキーを作成する必要があります）

![api_keys.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231182/b72ba43a-26b4-9af1-d771-9aa7539a4fe2.png)

## VSCode のAdd-onを追加する

できれば、コードに手を加えてその場で確認したいもの。VSCodeの

1. VSCode を開きExtensions を選択します。
2. "Cloud Conformity Template Scanner Extension" を選択します。
3. Install をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231182/21ac3103-8b43-b207-b929-f6385a99c110.png)

インストールができたら、Conformityの設定を行います。


1. Extentions から"Cloud Conformity Template Scanner Extension" を選択します。
2. 設定アイコンをクリックします
3. "Extension Setting"を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231182/cdeded65-b894-1a4a-a9cd-4ab50c2154b6.png)

APIkeyの"Edit in settings.jason"を選択すると、設定のためのJasonファイルが開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231182/157dbc67-f81f-66ca-be3e-9f7bacfb0a0b.png)

ここで、Conformity で作成したAPI Keyを貼り付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231182/7b627e58-56d8-15d7-c2db-d49312c6a43e.png)

これで設定は完了です。

## CloudFormationテンプレートをチェックしてみる

サンプルとして、AWSから公開されているものなどで試すといいと思います。
https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/quickref-s3.html

チェックしたいテンプレートのコードを開いた状態で


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231182/1f505bc4-67cd-f820-6fd5-8246a2b9af84.png)


1. 上メニューの"View"- "Command Palette..."を開きます
2. "Cloud Conformity Scan Current Open Template"を選択して実行します。
3. 少し経つと実行結果が表示されます。
4. 実行結果が以下のように表示されれば成功です。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231182/4307f971-78a1-1cf7-2f7e-df9970979dda.png)

Summary では、リスクの重要度ごとに表示されており、Detections を見ると実際に何がリスクとして検知されたかを確認することが可能です。
特に確認項目が多い場合には、重要度の高いものから確認して、リスクを軽減していくのがよいと思います。
なお、S3以外の対応サービスリソースは以下になります。

https://github.com/cloudconformity/documentation-api/blob/master/TemplateScanner.md
昇圧時電流シミュレーション

dutyは逐次計算で

```python

# coding: utf-8

# In[278]:


get_ipython().magic('matplotlib inline')
import matplotlib.pyplot as plt


# In[279]:


import numpy as np
import math


# In[280]:


points = 360
ac_freq = 50 #Hz
ac_t = 1/ac_freq / 2 #半波： →/2
ac_volt_real = 220 #V
ac_volt_max = ac_volt_real * math.pow(2,0.5)
reactor_H = 40 #mH
dc_volt = 320
target_dc_volt = 320
career = 40 * math.pow(10,-6)
t_delt = ac_t / points
ep_dead_time_count = 3
dead_time = career * ep_dead_time_count


# In[281]:


def calc_time(i_point):
    return ac_t / points * i_point 

def calc_acv_sin(i_time):
    rad = (i_time / ac_t) * math.pi * 1 # 半波：*2→*1
    acv_sin = ac_volt_max * math.sin(rad)
    return acv_sin

def calc_duty(t, target_dc_volt, dc_volt, acv, aca_sum):
    duty = 0.4
    return duty


# In[282]:


#10ms, 40us, duty:100%, 0.01%刻み
print("分解能：",10*1000 / 40 * (100/0.1))


# In[283]:


#250000点で
#ACVの正弦波つくる
#40usごとの、40%ON60%OFF, 30%ON70%OFF, ...., を、pointsで、なんとか
#というか逐次電流からduty計算だからmapでは無理か……


# In[284]:


points_list = list(range(0,points))
time_list = list(map(calc_time, points_list))
acv_sin_list = list(map(calc_acv_sin, time_list))


# In[285]:


plt.plot(time_list, acv_sin_list)


# In[286]:


career_count = 0
aca_sum = 0.0
duty = 0
duty_on_count = 0
duty_off_count = 0
duty_on_time = 0
duty_off_time = 0
for t in time_list:
    ac_volt = calc_acv_sin(t)
    if t < dead_time: #dutyは0だけどACVとかACAは計算いりそうだから、ifのネストとか変更必要
        duty = 0
    if t >= 0.001 and ac_volt < 30: #1ms, dutyは0だけどACVとかACAは計算いりそうだから、ifのネストとか変更必要
        duty = 0
        
    if t >= (career * career_count): #40usごとにcareer_countとduty更新する感じ。初回にduty計算するためこれを上に持ってきた
        career_count += 1
        duty = calc_duty(t, target_dc_volt, dc_volt, ac_volt, aca_sum)
        duty_on_count = 0
        duty_off_count = 0
    else:
        if t < ((career * (career_count-1)) + (duty * career)): #duty出力中なら
            duty_off_time = t_delt * duty_off_count
            duty_on_count += 1
        else:
            duty_on_time = t_delt * duty_on_count
            duty_off_count += 1
    
        


# In[ ]:





```
create-nuxt-appでTypeScriptを言語に指定すると『Cannot find module './index.vue?vue&type=script&lang=ts』というエラーが発生する

`npx create-nuxt-app`コマンドを利用してNuxtアプリケーションを作成する際、`Programming language`を`TypeScript`に選択すると初回起動で`Cannot find module './index.vue?vue&type=script&lang=ts&'`というエラーが発生しました。


```
 ERROR  Failed to compile with 1 errors                                                                      friendly-errors 15:55:56

This relative module was not found:                                                                          friendly-errors 15:55:56
                                                                                                             friendly-errors 15:55:56
* ./index.vue?vue&type=script&lang=ts& in ./pages/index.vue                                                  friendly-errors 15:55:56

✖ Client
  Compiled with some errors in 7.32s

✖ Server
  Compiled with some errors in 7.30s
```


![スクリーンショット 2020-10-05 15.56.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140792/e34b09c5-4f9e-797e-f263-1982856cb001.png)


原因はNuxtアプリケーションを作成する`create-nuxt-app`のバージョンが古かったせいでした。
以下の手順でアップグレードすることで問題解決できました。

```
# 現在のバージョンを確認する
$ create-nuxt-app -v

create-nuxt-app/3.2.0 darwin-x64 node-v14.5.0

# アップグレードを実行
$ yarn global upgrade create-nuxt-app

# アップグレードできていることを確認
$ create-nuxt-app -v

create-nuxt-app/3.3.0 darwin-x64 node-v14.5.0
```

`create-nuxt-app`のアップグレード前と後の`package.json`を比較してみると、アップグレード前（`3.2.0`）のときはバージョン1系の`@nuxt/typescript-runtime`がインストールされていました。
一方、アップグレード後（`3.3.0`）では2系の`@nuxt/typescript-runtime`がインストールされていました。

根本的な原因は古いバージョンの`@nuxt/typescript-runtime`を利用していたからのようでした。
ですので、`yarn add @nuxt/typescript-runtime`で`@nuxt/typescript-runtime`のバージョンをアップグレードしてあげれば今回の事象は解決できます。
エンジニアに筋トレがおすすめな理由

# はじめに
エンジニアの方で、筋トレをやっている人が意外と多いなと感じます。
なんでだろうと思いつつ、自分も筋トレを初めて１カ月半ほどたったので感じたこと、調べたことをシェアしたいと思います。

# エンジニアの方に筋トレがおすすめである理由
エンジニアに限った話ではないですが、仕事をしていて様々なストレス・悩みが生じるかと思います。エンジニアで言うと

- 長時間のデスクワークによる肩こり、眼精疲労
- 数々のエラーや納期前等で生じるストレス
- 運動不足
- 自信がなくなってくる

などなど日ごろから様々な悩み・ストレスがあると思います。
これらの悩みは、**「筋トレ」**によって解決できます！

# 筋トレがもたらす効果
## 肩こりや眼精疲労の改善
肩こりの直接的な原因は**「筋肉疲労」**と**「血行不良」**である。
これらが起こる原因と改善策は以下のとおりである。

**〇長時間のデスクワーク**
エンジニアは長時間同じ姿勢で作業していることが多い。よって首や肩の負担が増えてしまう。
→解決策　**筋トレ**

会社で仕事を行っている人だとなかなか難しいかもしれませんが、仕事の合間に筋トレを行うことで血流の流れを良くすることができ、肩こりを改善できる！

また、米国ジョージア工科大学の研究によると**「20分間の筋トレで記憶力が10%向上する」**ということも明らかになっている
参考記事：[Lift weights,improve your memory](http://www.news.gatech.edu/2014/09/30/lift-weights-improve-your-memory)

そのため、作業の合間のちょっとした時間に運動することで肩こりを改善しなおかつ記憶力も向上できる。最高。

**〇運動不足**
運動不足により、筋肉が衰え肩の負担が大きくなる。また、筋肉の緊張状態が続いて血流が悪くなる。リモートワークが増え、運動不足で悩んでいる人も多いと思う。
→解決策　**筋トレ**

筋トレを行うことで、筋肉がつき肩の負担が減る。血流もよくなる。解決！

**〇眼精疲労**
長時間PC作業を行うことで、眼精疲労が起こる。それにより肩こりが起こる場合がある。
→解決策　**筋トレ**

隙間時間に筋トレすることで、目が休まるだろう！

**〇ストレス**
肩こりはストレスとも関係している。過剰なストレスにより、自律神経が乱れて筋肉の緊張や血行不良が生じて肩こりが生じやすくなる。
→解決策　**筋トレ**

後で詳しく説明しますが、**筋トレ（運動）にはストレスを感じた時に分泌される「コルチゾール」を減らすことができる！**

## ストレスや精神の不調が改善される
先ほど軽く触れたように筋トレ（運動）をすることでストレスを軽減できる。

心身がストレスを受けると、コルチゾールというストレスホルモンの分泌が急激に増加する。
コルチゾールの分泌は、ストレスから身を守ろうとして起こる現象。瞬間的な量の増加は問題ないが、長期的な量の増加は脳の海馬が委縮してしまい、うつ病になったりしてしまう。

コルチゾールの分泌バランスを整えるには、適度な運動が大事。日常的に運動をしている人はしていない人に比べて、ストレスに直面した時のコルチゾール分泌が少なくなる。
これは日常的に運動で適度なストレスをかけることで、分泌コントロールに慣れるためである。

また、筋トレ（運動）することで、**脳内伝達物質である「セロトニン」の分泌量が増える！**
セロトニンが不足すると、脳の機能の低下がみられたり、心のバランスを保つことが難しくなる。よってストレス障害やうつ、睡眠障害の原因になりうる。

まとめると、**日常的に筋トレをしているとストレスに強くなり情緒も安定する**

参考：[ストレスホルモン「コルチゾール」と副腎の関係](https://www.konishi-clinic.com/medical_information/archives/149)
参考：[一日20分の筋トレで記憶力がアップ](https://dm-net.co.jp/calendar/2014/022511.php)
参考：[テーマ「セロトニン」](http://www.japanclinic.co.jp/counseling/detail.php?id=61)

## 自信がつく
筋トレを続けていくと、体が徐々に変化していき自信がついてきます（体験談）
筋トレをするようになって、自信がついてきた！前向きになった！という意見はよく聞きます。

## 食生活が改善される
筋トレをするようになると、日ごろの食事にも気を遣うようになります。
カップラーメンばかり食べていても筋肉はつかないからです。結果として、栄養バランスの良い食事をとるようになり健康になっていきます！最高。

## 話のネタ・筋トレ仲間が増える
今までかかわることのなかったような人とも筋トレを通じて仲良くなれることも？

# まとめ
今回は、筋トレがおすすめな理由についてまとめてみました。
調べれば調べるほど、筋トレのすごさを実感しました。

実際に筋トレをやってみて、確かに気持ち的にもすっきりして自信も前よりつきました。
数値や見た目に変化が現れることがいいのかもしれません。

「自分はあまりストレスに強くないかも」「自信をつけたい」「肩こりがひどい」という方は是非、筋トレを始めてみてはいかがでしょうか？

まずはちょっとした自重トレーニングからでもいいですし、ダンベルを買ってダンベルトレーニングをしてみてもいいかもしれません。

以上！
Laravel でいろんなCSSフレームワークに対応する FormBuilder を作りました。

これまでは、こちらのライブラリを使っていたのですが、Bootstrap4 には対応していない上に、ご本人はその気ではないらしいので。
最初はこのライブラリ[dwightwatson/bootstrap-form](https://github.com/dwightwatson/bootstrap-form) を拡張しようかと思ったのですが、どうもうまいこといかない。動くには動くけど、Bootstrap5がリリースされようとしている状況では、今後の拡張も難しそうなので、一から書き直すことにしました。

そこで作ったのがこのライブラリです。
[ShibuyaKosuke/laravel-form-extend](https://github.com/ShibuyaKosuke/laravel-form-extend)

シンタックスは上記の[dwightwatson/bootstrap-form](https://github.com/dwightwatson/bootstrap-form) に準じて、クラス名だけ変更すれば、そのまま使えるようにした。

対応しているCSSフレームワークは

- Bootstrap 4
- Bootstrap 3
- Bulma

に対応しています。

詳しい使い方は、[Github](https://github.com/ShibuyaKosuke/laravel-form-extend) で。