OmniAICreator/Qiita-1.07M huggingface dataset:
RundeckをMySQLと紐づける

##前提
OS：RHEL７
Rundeck
Mysql：8.0.23

##Rundeckをインストールして起動させる
[Rundeckのデータベース設定](https://obenkyolab.com/?p=79)を基本参照しながら進める。

##MySQLと紐づける
上記の手順はCentOS用なんですよね、うまく行かなくて詰みました。。。
こういう時こそログを見て確認

エラー文

```
Caused by: java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
	at java.net.URLClassLoader.findClass(URLClassLoader.java:382) ~[?:1.8.0_282]
	at java.lang.ClassLoader.loadClass(ClassLoader.java:418) ~[?:1.8.0_282]
	at org.springframework.boot.loader.LaunchedURLClassLoader.loadClass(LaunchedURLClassLoader.java:93) ~[rundeckpro-enterprise-3.3.9-20210201.war:?]
	at java.lang.ClassLoader.loadClass(ClassLoader.java:351) ~[?:1.8.0_282]
	at java.lang.Class.forName0(Native Method) ~[?:1.8.0_282]
	at java.lang.Class.forName(Class.java:348) ~[?:1.8.0_282]
	at org.apache.tomcat.jdbc.pool.ClassLoaderUtil.loadClass(ClassLoaderUtil.java:38) ~[tomcat-jdbc-9.0.39.jar!/:?]
	at org.apache.tomcat.jdbc.pool.PooledConnection.connectUsingDriver(PooledConnection.java:281) ~[tomcat-jdbc-9.0.39.jar!/:?]
	... 172 more
```

ってことで、jdbcドライバがないよと言われました。
今回はRHELだったので、それ専用のMySQLのjdbcドライバを入れました。

```
# wget https://repo1.maven.org/maven2/mysql/mysql-connector-java/8.0.23/mysql-connector-java-8.0.23.jar
```

上記をインストールした上で、再起動をすると解決しました。
公式にもjdbcドライバを入れろって言ってるけど、古いんじゃ。。。

以上、バックログでした。

##参考サイト
Rndeck公式サイト
https://docs.rundeck.com/docs/administration/configuration/database/
【備忘録】Mac m1 チップ搭載機にてdocker runが失敗する

# 何で困っていたか
開発環境で利用していた `Dockerfile` を Mac m1 を搭載した筐体にて動かしたところ、以下のエラーメッセージが出て困った。

```Dockerfile
FROM mysql:8.0.2
```

```エラーメッセージ
failed to solve with frontend dockerfile.v0: failed to create LLB definition: no match for platform in manifest sha256:8b7b328a7ff6de46ef96bcf83af048cb00a1c86282bfca0cb119c84568b4caf6: not found
```

## 起動時に何が起こったか
M1チップはARMのプロセッサを利用しており、従来のDockerイメージで利用する各種モジュールの前提であるamd64系のメモリ管理手法では、`docker run`で起動した際に読み込まれるパッケージの管理がうまく動作しないことがある。
具体的には以下のようなエラーが発生する場合がある。

```
cc1plus: error: unknown value 'armv8-a-march=armv8-a' for -march
cc1plus: note: valid arguments are: armv8-a armv8.1-a armv8.2-a armv8.3-a
```

参考サイトにも記載があるが、上記エラーは`docker pull`時にARM64プラットフォーム向けのイメージを優先して取得することにより発生する。
> docker pull 時に、指定したDockerイメージに、ARM64プラットフォーム向けにビルドされたものがあればそれを、なければx86_64プラットフォームのものが選択されてpullされます。

## 対応方法
明示的に利用するプロセッサを指定することで、Macの`Rosetta2`でエミュレートして起動する。

### コマンドラインからの起動方法
`docker run`を行う際に、`--platform=linux/amd64`のオプションを付与して起動を行う。

* 例：MySQLのコンテナを立てる
    * `docker run --platform=linux/amd64 mysql:8.0.20`
    * 以下でも動作します
        * `docker run --platform=linux/x86_64 mysql:8.0.20`

### Dockerfileからの起動方法
`FROM`句で起動イメージを指定する際にオプションを付与する。

* 例：MySQLのコンテナを立てる
    * `FROM --platform=linux/amd64 mysql:8.0.20`

## 参考サイト
* [M1 Mac で Docker イメージをビルドしようとすると no match for platform in manifest が出る](https://qiita.com/ktnyt/items/cefcb424a75f536f8422)
* [Apple M1 上の Docker は、x86_64向けのイメージも動く](https://zenn.dev/chimerast/articles/efae877853e837)
* [「x86-64」「x64」「AMD64」これらは何が違うのか？](https://onoredekaiketsu.com/x86-64-x64-amd64-what-is-the-difference-between-these/)
READMEに画像を貼り付ける方法

#はじめに

現在、オリジナルアプリのREADMEを記述しています。

そこでマークダウンを使って記述をしていたのですが、画像を使って説明したいなと思い、調べた事を備忘録として残しておこうと思いました。

#何も調べずに試した事

* 画像をドラッグして貼り付け
　

掴んでコードエディターに貼り付けようとしたら、別画面になり,READMEには貼り付けできませんでした。


* コピーして貼り付け


URLにしないと貼り付けできないと考えたため、コピーして貼り付けようとしました。

~~.png

ただの文字で終了。。。

#結論

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/ea460a74-cf52-65f1-bce3-b442a8827f8a.png)

このような形でまず一旦issueに貼り付けて、このURLをコピーしてREADMEに貼り付けました。

コピーできたらissueは消して下さい。

![スクリーンショット 2021-05-26 12.38.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/92b8d99a-a8ae-6f19-8ce2-ec9d57c3d92a.png)

![スクリーンショット 2021-05-26 12.37.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/535e4f70-8513-6880-aa67-554b0924c2b2.png)

貼り付ける事が出来たのですが大きすぎました。

サイズを修正するためのは下記のの記述をしました。

```
<img src="写真URL" width="サイズ">

今回の場合
<img src="https://user-images.githubusercontent.com/82023221/119598728-72d83380-be1e-11eb-8d94-e1e05372a40a.png" width="100">

```

![スクリーンショット 2021-05-26 12.43.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/777221a1-7ed5-3f40-6776-b77f5b74b890.png)

上手くサイズ調整ができました。
[PHP]自作で郵便番号チェック関数を作成

#はじめに
自作の関数を作成して、簡単な郵便番号をチェックする関数について作っていきます。
（本来であれば正規表現を使いますが、あえて今回使いません）

#実装内容

実装内容としては以下のようなことを実装します。

 - 全角を半角に
 - ハイフン削除
 - 数字かどうか
 - 7文字かどうか



#実装

実装方針としては、まず引数に対して、「-」の削除を行います。また、全角数字は半角数字に変換します。
そのあと、それが数字であるかの判別を行います。このとき、数字出ない場合はfalseを返します。
もし数字であれば、その後引数の桁数が7文字かどうかの判別を行い、7桁であればtrueを返すといった感じです。


```sample.php

<?php

$postalCode='123-4356';

function checkPostalCode($str){


 $replaced = str_replace('-','',$str);
 $replaced = mb_convert_kana($replaced, "n");
 if(!is_numeric($replaced)){
    return false;
 }
 $length = strlen($replaced);
 if($length===7){
   return true;
 }else{
   return false;
 }
}

echo checkPostalCode($postalCode)
?>
```

#おわりに

簡単なプログラムでも新しい言語の場合は苦労します、、、、
こうしてアウトプットを重ねて、日々前進していければと思います。
github forkして開発

## 自分のアカウントにログインしてfork
他人のリポジトリを自分のギットハブ上（remote）のリポジトリにコピー

## 自分のローカルにコピー
git clone でコピー
.gitファイルはcloneしたフォルダに備わっているためどこのフォルダでcloneしても問題ないがおすすめはこんな感じ
github.com/ユーザー名/`ここにclone`

## ソース修正・コミット前にやること
### 自分とローカルリポジトリの状態をチェック
```
$ git config -l
-------
user.email=
user.name=
```
ここに自分のデータが入っていないと共同開発者（同僚や友達）との間でこのコミット誰だ〜とわからなくなってしまうので要注意

### 作業ブランチを作成
ブランチは開発の規模や社内ルールでそこそこ変わる。
なので最初は「トピックブランチ（ないしフィーチャーブランチ）の命名規則はありますか？」
と聞いてみるのがおすすめ。
基本的にはこんなかんじでブランチを着ればOK
`「【ユーザー名】/【ソース修正理由】」`

```
$ git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/master

$ git checkout -b dainabe/add_readme origin/master
Branch 'dainabe/add_readme' set up to track remote branch 'master' 
from 'origin'.
Switched to a new branch 'dainabe/add_readme'

$ git branch
* dainabe/add_readme
  master
```
今回はmasterからローカルにブランチを切っているが`dev'ブランチからのほうが多いかも！！

## ソース修正〜GitHub反映
### ローカル環境でソース修正
まずは自分のローカルにあるデータが問題ないか確認

```
$ git status
On branch dainabe/add_readme
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean
```
`nothing to commit, working tree clean`
が確認できたら早速修正。
ここからはいつもの流れ

```
git add 
git commit
git push -u　origin リモートに作成するブランチ名
```
グローバル変数はできるだけ使用しないようにしよう

「 リーダブルコード」を読んでいてこれまで意識いなかったグローバル変数についての記述があったので備忘録として残しておきます。

```javascript
//ダメな例
submitted = false // グローバル変数

var submit_form = function (form_name) {
 if (submitted) {
    return; // 
}
...

submitted = true

```
```javascript
// 良い例
var submit_form = function ((form_name) {

 var submitted = false // ローカル変数にして、以下の関数からしかアクセスされないようにする

 if (submitted) {
    return; // 
 };
 
}());
// 最終行の()は外側の上関数がすぐに実行されて内側の関数を返している。 
// この技法は、内側の感性だけがアクセスできる「プライベート」スコープを作る効果があり、
// 読み手は「submitted変数はいつ使われるの?」と気になったり、
// 同じ名前のグローバル変数と衝突しないかと不安になったりすることがないらしい。
```
日本ディープラーニング協会の「AI for Everyone」講座をまとめてみる-概要編

#はじめに
前回の更新から随分と時間が空きました。
スピーカーは作らないことになりました。

その後も色々と学習は続けていますが、電子回路や素子の基礎などを中心に勉強していたので、
今更Qiitaに書くほどのことでもないかと思っていました。(単に飽きた)
今回からは、AI初学者向けの無料オンライン講座の学習記録と個人的なまとめを掲載していきます。
自分用にはOnenoteでまとめているので、Qiitaに書くことで多少なりAI初学者に共有できたらと思います。

なお、無料講座なので私のまとめで興味を持ったらぜひ本家の講座を受講してみてください。
たまにプレイヤーで字幕が表示されない回があったりしますが、再生速度も変えられるので基本的には使い勝手も悪くはないです。

あと、有料で修了証の取得とそのためのテストの受講(どちらもオンライン)が出来ます。
私は一通り受講してみてから取得を検討しても良いかなと思ったのでまだ申し込んでいません。
ちなみにテストは毎週1回ずつで各10問、ちゃんと講座を受けていれば答えられる内容となっています。
(課金していないと回答提出は出来ませんがテスト内容は見られました)

#AI For Everyoneとは
今月(2021年5月)から公開された、一般社団法人日本ディープラーニング協会(JDLA)の初学者向けAI講座です。

・DL for DX｜日本ディープラーニング協会
https://www.jdla.org/promotion/
・AI For Everyone （すべての人のためのAIリテラシー講座） | Coursera
https://www.coursera.org/learn/ai-for-everyone-ja

以下JDLAウェブサイトより抜粋。
>すべてのビジネスパーソンに向けて提供を開始した、AI・ディープラーニングについて、まず「知る」ための無料(※)エントリー講座です。
>
世界最大級のオンライン講座プラットフォームであるCoursera(コーセラ)上で、既に全世界60万人以上の受講者を誇る人気のコース「AI for Everyone」(オリジナルは英語版)に、JDLA制作、松尾 豊講師の日本向けコンテンツを加えた特別版になっています。
>
(※)受講は無料です。ただし、配信プラットフォームであるCoursera発行の受講修了証取得コースをご希望される場合は、 別途Courseraへのお支払い(49ドル)が発生いたします。

日本向けコンテンツは最初の数本のみで、基本的に中身は英語版の動画に字幕が付いてスライドが和訳されたものに差し替えられているのみです。
(これだけでも随分見やすいですが)
日本向けコンテンツではDXの視点でAIについて語られていますが、本編は普遍的なAIの活用方法やアルゴリズム、企業でのAIプロジェクトの進め方などの解説がメインになっています。

内容的には文系理系問わず基礎教養として十分受講する価値のある講座だと思います。
AIに馴染みのない人は徐々に難易度が上がっていくように感じるので、流し見するだけでは理解は難しいかもしれません。
字幕の内容がテキストで見られるので、そういうものも活用しながら少しずつ理解を深めていくと良いと思います。

一つの動画は大半が10分以内、長いものでも20分は超えないぐらいなので、毎日少しずつ見ていくと良いですね。
一週間のトータル再生時間は1時間～1時間半ぐらいなので、一週間ごとで見ると結構ボリュームあります。
全5週のうち、私はいま3週目を受講中ですが、進めたい人はどんどん先に進めますし、見たいところだけ見ることも出来るようです。
当然ですが、内容的には順番通りに見ていった方が理解しやすいと思います。

私のまとめ記事では、週単位で内容をまとめて投稿していく予定です。
次回は1週目のまとめ記事を投稿します。

[記事一覧、連載の購読はこちらから。](https://hide.ac/magazines/WDkd1XSxU)
使用 goofys 挂载 wasabi 为文件系统

## 前言

因为 wasabi 是“芥末”的英译，很亲和。

其次 wasabi 这个对象存储非常廉价，6/t 的月租价格，in/out 流量完全免费，适合大流量应用。

wasabi 专注于对象存储，管理界面简单，非常亲和新手。

我们使用 goofys 来挂载对象存储为文件系统，goofys 兼容大部分 s3 协议的对象存储，包括 wasabi , scaleway 这类大厂。

server 我先择使用 scaleway，因为其在欧洲享有很高的声誉，还有一个重要的原因是 wasabi 的欧洲存储中心在荷兰的阿姆斯特丹，scaleway 也有阿姆斯特丹的机房。两者强强联手可以达到低延迟的体验。

这次我们选用 ubuntu 20.04 LTS

## 安装及配置 goofys

升级系统

```
apt update
apt upgrade -y
```

安装 fuse # 因为 goofys 依赖 fuse 进行挂载

```
apt install fuse -y
```

安装 goofys # 直接下载编译好的 goofys 开箱即用

```
wget https://github.com/kahing/goofys/releases/latest/download/goofys
chmod +x goofys
mv goofys /usr/bin/goofys
```

配置 Access Keys

```
mkdir /root/.aws
echo -e "[default]\naws_access_key_id = access-key\naws_secret_access_key = secret-key" > /root/.aws/credentials
```

其中 access-key 和 secret-key 替换成你自己的 key

登录 wasabi ，新建 Bucket

记录 bucket 和 region 

新建挂载点

```
mkdir /wasabi
```

回到命令行，设置开机自动挂载

```
echo 'goofys#bucket-name  /wasabi fuse _netdev,allow_other,--endpoint=https://s3.eu-central-1.wasabisys.com/,--file-mode=0777,--dir-mode=0777,--uid=0,--gid=0 0 0' >> /etc/fstab
```

其中 bucket-name 替换为你自己的 bucket

eu-central-1 替换成你自己的 region

重新挂载设置

```
mount -a 
```

查看磁盘

```
df -h
```
google colaboratoryで.pyを4行で認識する方法

下記サイトでpythonの勉強をしている時にgoogle colaboratoryで.pyを読み込むのが非常に難しかったので備忘録として残しておきます。

https://news.mynavi.jp/itsearch/article/devsoft/4695

所定の位置にあるmatch.pyを読み込むコードです。

```python
from google.colab import drive
drive.mount('/content/drive')
import os
os.chdir('/content/drive/MyDrive/MyModule/')
import match
```

解説します。

```python
from google.colab import drive
drive.mount('/content/drive')
```

最初にdrive.mountでgoogle Driveを認識させます。
初回のみ認証があります。
認証パスをコピーして貼り付けるタイプです。
正常に認識されれば左側のプルダウンメニューにファイル一覧が表示されます。

```python
import os
os.chdir('/content/drive/MyDrive/MyModule/')
```

その後にchdirで使用する.pyが入っているフォルダを指定します。
('/content/drive/MyDrive/MyModule/')は変更項目です。
先ほど認識したファイル一覧から右クリックでパスをコピーすると間違いがないです。
上記のコード4行を記載すればimportでファイル内の.pyを指定出来ます。

```python
import match
```

match.pyが読み込めました。

#フォルダは認識しても.pyが認識されない。
google colaboratoryでは.ipynbが作成されます。
名前を直接.pyに変えると認識しません。
[ファイル]→[ダウンロード]→[.pyをダウンロード]で落としてから入れなおしましょう。

ググり力が低くてこの4行へたどり着くまでに数時間かかりました。
同じ現象にハマっている人が非常に多かったので記載しておきます。
[AWS_24]Auto Scaling groupの作成

##環境
**Amazon Web Service**

* EC2(Amazon Linux 2 , t2.micro , 汎用SSD 8GB)
* RDS(MySQL , db.t2.micro)

**ローカルPC**

* MacBook Pro(2.9 GHz デュアルコアIntel Core i5 , 8 GB 2133 MHz LPDDR3)
* macOS 11.3.1（20E241）



##概要
`Auto Scaling group`と`CloudWatch`を利用して、以下を実現させたい。

* CPU使用率が70%以上: EC2インスタンスを1台ずつスケールアウトする。最大で4台構成。
* CPU使用率が30%以下: EC2インスタンスを1台ずつスケールインする。最小で2台構成。

本記事ではそのうち、`Auto Scaling group`の作成を実施する。

###構成図
![構成図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758644/ba32fb49-2f9d-a7ed-1ad5-cfe1c39594d2.png)



##Auto Scaling groupの作成
1. 既存のEC2インスタンスを停止する。
<br>今回はAutoScalingによってEC2インスタンスのスケールアウト/インすることが目的なので、既存のEC2インスタンスを停止する。
1. `Auto Scaling グループ　＞　Auto Scaling グループの作成`をクリックする。
1. 以下項目を入力していく。
    * ステップ1
<br>Auto Scaling グループ名: `Test-AutoScaling1`
<br>起動テンプレート: `LaunchTemplate1`(以前作成した起動テンプレート)
    * ステップ2
<br>インスタンスの購入オプション: `起動テンプレートに準拠する`
<br>VPC: `MyVPC`
<br>サブネット: `PublicSubnet1`,`PublicSubnet2`
    * ステップ3
<br>ロードバランシング: `既存のロードバランサーにアタッチ`
<br>既存のロードバランサーにアタッチ: `ロードバランサーのターゲットグループから選択`
<br>既存のロードバランサーターゲットグループ: `TG-1`(以前作成したターゲットグループ)
<br>ヘルスチェックのタイプ: `EC2`,`ELB`
    * ステップ4
<br>希望する容量: `2`
<br>最小キャパシティ: `2`
<br>最大キャパシティ: `4`
<br>スケーリングポリシー: `なし`(後でCloudWatch側で紐付けを行う)
<br>インスタンスのスケールイン保護: `なし`
    * ステップ5
<br>通知設定しない。
    * ステップ6
<br>タグの作成しない。
    * 確認
<br>`Auto Scaling グループを作成`をクリックする。

##確認
* `WebServer-Auto`という名前のEC2インスタンスが2台、`実行中`であることを確認する。
* Webページが表示できることを確認する。
* 実行中の`WebServer-Auto`のうち1台だけ`インスタンスを終了`した際に、数分で新しく`WebServer-Auto`のEC2インスタンスが起動することを確認する。
    * その際に、以下のようなログが`Auto Scaling グループ　＞　Test-AutoScaling1　＞　アクティビティ`に表示されていることを確認する。
    <br>**→要は、最小のEC2を2台と設定しているのに、1台をシャットダウンしたため、AutoScalingが2台とするために新しく１台を起動してくれたということ**

ステータス|説明|原因
---|---|---
Successful|Launching a new EC2 instance: i-xxxxxxxxxxxx|At 2021-05-26T04:17:56Z an instance was started in response to a difference between desired and actual capacity, increasing the capacity from 1 to 2.|
WaitingForELBConnectionDraining|Terminating EC2 instance: i-xxxxxxxxxxxx - Waiting For ELB Connection Draining.|At 2021-05-26T04:17:35Z an instance was taken out of service in response to an EC2 health check indicating it has been terminated or stopped.|
Salesforce提案：LightningコンポーネントとVisualforce、どちらを使うべき

# LightningコンポーネントとVisualforce、どちらを使うべき？
<font color="red">**簡単に言うと、答えは「両方!」**</font>

## 理由は：
**Visualforce：** 既存の Visualforce アプリケーションを変換する必要はありませんし、Visualforce を使用したアプリケーションの作成をやめる必要もありません。
**Lightning：** モバイルデバイス上で適切に動作するように特別に最適化されています。

## 区別：
Visualforce：ページ中心 、\< <Apex:XXXX>\>Salesforceサーバ実行
Lightning：アプリケーション中心、\<<Lightning:XXXX>\>クライアント実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424429/bac90ed8-3f65-a1df-b8d1-f8238563d721.png)

|  | Visualforce | JavaScriptアプリケーション<br>コンテナVisualforce | Lightning |
|:-:|:-|:-|:-|
| **画面描く** | サーバに作成<br>htmlクライアントに戻る | サーバから空白VFPage戻る<br>クライアントにJavaScript呼び出し作成 | クライアントにJavaScript呼び出し作成 |
| **データ<br>ビジネスロジック** | Apex 標準または<br>カスタムコントローラ | リモートオブジェクトまたは <br>JavaScript Remoting、Apex コントローラ | Lightning データサービス、Apex |
| **処理流れ** | ブラウザから請求⇒<br>サーバで実行、返送⇒<br>ブラウザに請求結果表示 | ブラウザから請求（JS含む空ページ）⇒<br>ページ返送⇒<br>ブラウザがJS読み込む⇒<br>ブラウザに画面作成 | ブラウザから請求（アプリまたコンポーネント）⇒<br>サーバからアプリまたコンポーネントバンドル返送⇒<br>ブラウザがバンドル読み込む⇒<br>JSアプリが画面作成 |
| **メリット** | 検証済<br>実装し易い<br>アプリ-ページ構成し易い<br>メタデータ既に組み込んでいる | 高度にインタラクティブと<br>没入型体験がある | 高度にインタラクティブと没入型体験がある<br>ユーザインターフェース戦略と連携する<br>メタデータ基に構築、開発スビートアップ |
| **デメリット** | インタラクティブな操作制限<br>モバイルパフォーマンス | 複雑<br>メタデータが組み込んでいない<br>開発環境がない | - |

## 選択例
| 要件 | 推奨 |
|:-|:-|
| **Lightning Experienceプラットフォーム向け** | LightningコンポーネントとLightning Experience用Visualforce |
| **モバイル向けアプリケーション開発** | Lightningコンポーネント<br>（Lightningコンポーネントはモバイル向けため開発、<br>VFの方はネット接続高が遅延で制限がある） |
| **一部のロジックはクライアントに処理** | Visualforceページ（開発のベロシティと管理可能性を確保するために） |
| **高度にインタラクティブとユーザ体験要求** | Lightningコンポーネント |
| **AngularJSやReactなどJSを使用したい** | JavaScriptアプリケーションコンテナVisualforce |
| **コンポーネント組み合わせ** | Lightningコンポーネント、Lightningアプリケーションビルダー |
| **JS交互体験とサードパーティのフレームワーク利用** | JavaScriptアプリケーションコンテナVisualforce |
| **ユーザインターフェース要素追加** | Lightningコンポーネント |
| **顧客またはパートナーのコミュニティ作成** | Lightningコンポーネント |
| **一般向けの認証のないWebサイト公開** | Lightningコンポーネント |
| **ページをPDF表示** | Visualforceページ（Lightningコンポーネントまたサポートしていない） |
| **既存プロジェクトはVisualforceページ** | 引き続き Visualforce を使用する |
| **最新テクノロジ検討** | Lightningコンポーネント（LWC） |
| **まったく新しいプロジェクト開始時** | Lightningコンポーネント |
| **ビジネスプロセスに従うユーザを誘導するフローを構築する** | Lightningコンポーネント、画面フロー作成 |
[Rails6.1] form actionにdata-remote="true"を追加する方法

#form actionにdata-remote="true"が追加されない...
Rails6.1でユーザーフォローボタンなどを非同期通信で実装したい！
そんな時はform_withの中にremote: true を指定してあげれば非同期通信が簡単にできるらしい！

```erb:viewファイル
form_with(model: ..., remote: true)
```

これで実際に生成されるHTMLのform actionにdata-remote="true"が追加されて非同期通信ができるようになる！




<br>
<br>


はずが...


<br>
<br>


```HTML:実際に生成されたHTML
<form action="http://localhost:3000/" accept-charset="UTF-8" method="post">
```

あれ? data-remote="true"が追加されてないぞ？

#解決策：form_withにlocal: falseを指定する
実は、Rails6.0を使用している場合は上記の方法で非同期通信に対応できたのですが、Rails6.1ではそうはいかないようです。

Rails6.1で非同期通信に対応させるためにはremote: tureではなくlocal: falseを指定してあげるようにしましょう。

```erb:viewファイル
form_with(model: ..., local: false)
```

すると...

```HTML:実際に生成されたHTML
<form action="http://localhost:3000/" accept-charset="UTF-8" data-remote="true" method="post">
```
form actionにdata-remote="true"が追加され、非同期通信ができるようになりました！
Railsのバージョンによる細かな違いはきちんと把握しないといけませんね。
laravelで短いuuidをprimaryキーに設定する。

```:インストール
composer require pascaldevink/shortuuid
```



```:マイグレーションファイル
$table->uuid('id')->primary();
```

```php:モデル
use Illuminate\Support\Str;
use PascalDeVink\ShortUuid\ShortUuid;

public $incrementing = false;
protected $keyType = 'string';

     public function __construct(array $attributes = [])
    {
        parent::__construct($attributes);

        // newした時に自動的にuuidを設定する。
        $uuid4 = Str::uuid();
        $shortuuid = new ShortUuid();
        $su_string = $shortuuid->encode($uuid4);

        $this->attributes['id'] = $su_string;
    }
```
[Webを支える技術]Atom Pub

# Atom Pubとは
ブログなどで使われるAtomを、Webの仕様であるRESTのようにCRUDが行えるようにしたもの。

```
GET /feed HTTP/1.1
Host sample.jp
```

こういった形で、AtomをHTTPメソッドで取得できるのがAtom Pubです。
Atom Pubに対応しているシステムがかなり限られており、Hatenaブログ、Livedoorブログ、WordPressで作られたものなどで使えます。

https://help.blogpark.jp/archives/52372407.html

http://developer.hatena.ne.jp/ja/documents/blog/apis/atom

https://codex.wordpress.org/AtomPub

AtomやRSSなどはブログの仕様に合わせて作られているので、やはり一般的なシステムで使われることが少ないのかなと感じます。
node.jsアップデート

アップデートは普通に、公式ページの最新版を再度インストールすればOKだった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620109/eecfef6b-872d-6d1b-fbc2-b41906d232fd.png)

C:\Users\XXXXXXX>node -v
v14.16.1

C:\Users\XXXXXXXX>node -v
v14.17.0

コマンドプロンプトで確認したらこうなってたからOKなはず。
ちなみに、LTS（Long Term Support）版と呼ばれる長期サポート版となります。 LTS版は、30カ月のあいだ重要なバグが修正されることが保証されています。
reactでsrcタグを使って画像を表示する方法

## Reactでsrcタグを使いたいがソースのパス直書きだとうまくいかない

```
class JCEbara extends React.Component {
  render() {
    return (
      <img src="img/ebara_entry.png" />
    )
  }
}
```

## 画像をインポートして使ったらいけた
```
import ebara from './img/ebara_entry.png' 

...省略
  return (
    <img src={ebara} />
  )
```
【LeetCode】就活に向けたコーディングテスト対策 #02

#はじめに
こんばんは．
M1就活生が[LeetCode](https://leetcode.com/)から，easy問題を中心に**Python**を用いて解いていきます．

https://leetcode.com/

↓では，解いた問題のまとめを随時更新しています．
[まとめ記事](https://qiita.com/halpi/items/43761b89a1873dcc9a5c)

https://qiita.com/halpi/items/43761b89a1873dcc9a5c

#問題
今回解いたのは，難易度easyから [問題7のReverse Integer](https://leetcode.com/problems/reverse-integer/) です．
問題としては，符号付き整数xを反転させて返すというもの．なお，反転後の値が符号付き32ビット整数の範囲を超える場合は0を返します．

Example 1:

```python
Input: x = 123
Output: 321
```

Example 2:

```python
Input: x = -123
Output: -321
```

Example 3:

```python
Input: x = 120
Output: 21
```

Example 4:

```python
Input: x = 0
Output: 0
```

#書いたコード
とりあえず，思いついたままに書いてみました．

```python
class Solution:
    def reverse(self, x: int) -> int:
        while (x % 10 == 0):
            x /= 10
        if x >= 0:
            reverse_x = int(str(x)[::-1])
        if x < 0:
            reverse_x = -1 * int(str(-1*x)[::-1])
        return reverse_x
```

桁の反転のため，一度string型に変換してからスライスでリストの最後から順番に取り出します．なお，`x=120`などの場合に，桁を反転させると`Output: 21`となるように，`x`を10で割った余りが0じゃなくなるまで，`x`を10で割り続けます．また，`x`がプラスかマイナスかで反転後の値に-1を掛けます．

できたできたと思いきや，反転後の値の範囲について記述していませんでした．
以下の条件が必要になりますね．

```python
min_reverse_x = -2 ** 31
max_reverse_x = -2 ** 31 -1
if reverse_x in range(min_reverse_x, max_reverse_x):
  return 0
```

解法を見ながら条件文を記述しましたが，値が範囲内かどうかの判定には，`if`と`range`を使っても判定できるみたいですね．これはスマートでわかりやすいです．

#おわりに
LeetCodeには，Testcaseを変化させながら，評価できる機能が備わっています．予想通りの結果になることもありますが，例外処理も意識したコーディングをしていきたいですね．

今回書いたコードはGitHubにもあげておきます．

https://github.com/halpi17/LeetCodeStudy/blob/master/002/reverseInteger.py

[前回](https://qiita.com/halpi/items/60571d16f3dffb8d4ae9)　[次回](https://qiita.com/halpi/items/7e20f661cdbcd127d960)
Access VBA TIPS

#フィールド名を一括変更する

```hoge.txt
Public Sub FieldNameChange()

  Dim dbs As DAO.Database

  Set dbs = CurrentDb

  'ここでテーブル名を指定します
  With dbs.TableDefs("tblデータ1")
    '現在のフィールド名（左辺）と新しい名前（右辺）を列挙します。
    .Fields("フィールド1").Name = "ID"
    .Fields("フィールド2").Name = "社員番号"
    .Fields("フィールド3").Name = "名前"
    .Fields("フィールド4").Name = "ふりがな"
    .Fields("フィールド5").Name = "生年月日"
    .Fields.Refresh
  End With

End Sub
```


###フィールド名を一括取得する

```hoge.txt

Public Sub GetFieldNameSample()
    Dim myDB As DAO.Database
    Dim myTD As TableDef
    Dim myFild As Field
    'カレントデータベースを変数に代入する
    Set myDB = CurrentDb
    'フィールドを表示するテーブルを変数に代入する
    Set myTD = myDB.TableDefs!社員テーブル
    '［社員テーブル］のフィールドを表示する
    For Each myField In myTD.Fields
        Debug.Print myField.Name
    Next
End Sub

```

###Selectした結果をINSERTする

https://qiita.com/lto18/items/920ca775992011616690
Apache Maven をインストールしてみた

## 勉強前イメージ

javaをビルドするやつってイメージ

## 調査

### Apache Maven とは

プロジェクトのビルドやテスト、成果物の配備など全体を管理できるツールいなります。

### Apache Maven を CentOS7にインストールしてみた

- 目次
	- 1.JDKのインストール
	- 2.ダウンロード
	- 3.パスの追加
	- 4.動作確認

#### 1.JDKのインストール

- JDKのインストール

```
yum install java-1.8.0-openjdk-devel java-1.8.0-openjdk
java -version
==========
openjdk version "1.8.0_292"
OpenJDK Runtime Environment (build 1.8.0_292-b10)
OpenJDK 64-Bit Server VM (build 25.292-b10, mixed mode)
==========
```

#### 2.ダウンロード

- wgetのインストール

```
yum install wget
```

- ダウンロード

```
cd /opt
wget https://downloads.apache.org/maven/maven-3/3.8.1/binaries/apache-maven-3.8.1-bin.tar.gz
tar -xzvf apache-maven-3.8.1-bin.tar.gz
```

- 名称変更

```
mv /opt/apache-maven-3.8.1 /opt/apache-maven
```

#### 3.パスの追加

- パスの確認

```
which java
==========
/usr/bin/java
==========
```

- パスの追加

```
cat << "EOF" >> ~/.bash_profile
export JAVA_HOME=$(readlink -f /usr/bin/java | sed "s:bin/java::")
export PATH=$PATH:/opt/apache-maven/bin
EOF
```

- 適応

```
source ~/.bash_profile
```

#### 4.動作確認

- バージョン確認

```
mvn --version
==========
Apache Maven 3.8.1 (05c21c65bdfed0f71a2f2ada8b84da59348c4c5d)
Maven home: /opt/apache-maven
Java version: 1.8.0_292, vendor: Red Hat, Inc., runtime: /usr/lib/jvm/java-1.8.0-openjdk-1.8.0.292.b10-1.el7_9.x86_64/jre
Default locale: ja_JP, platform encoding: UTF-8
OS name: "linux", version: "3.10.0-1160.11.1.el7.x86_64", arch: "amd64", family: "unix"
==========
```

## 勉強後イメージ

Mavenって聞いてほぼ何もわからんかったらから一旦やってみた

## 参考

- [Apache Maven 3.5 を CentOS 7 にインストールする手順](https://weblabo.oscasierra.net/install-maven-35-centos7/)
- [How to Setup Apache Maven on CentOS 7](https://lintut.com/how-to-setup-apache-maven-on-centos-7/)
SEが kintone で詳細設計やアプリ作成時に困ることメモ

kintoneで詳細設計してる時や、実際にアプリ作成時、仕様変更でアプリ修正時に困ったなって思うことのメモです。
あと、「kintone、ここなんとかならんのか！！」というリストでもあります。
気が付いた時に追記していきます。

# 対象

* kintoneアプリ作成する人
* kintoneの標準機能を使ってなんとかしたい人
* kintoneでシステムを作成や提案をするSE


# 計算式

計算式を使うときに条件式を入れて保存するときに、結構な確率で怒られるわけですね。
それぐらい覚えとけということかも知れませんが。。。

![スクリーンショット 2020-11-18 12.04.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/40f7914d-3c71-3cf7-700d-e0aa8a8ac853.png)

ヘルプに[計算式で参照できるフィールド](https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc/autocalc_field.html)はあるのよ。でもユーザー選択なんか空かどうかなんか条件で使いたいなと。
仕方ないので、プロセス管理と組み合わせて何とかしたりして。。。

計算式の設定
https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc.html

計算式で参照できるフィールド
https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc/autocalc_field.html

計算式で参照できなくて特に残念に思うフィールド６選

* プロセス管理のステータス
* ユーザー選択
* 組織選択
* グループ選択
* レコード番号
* リンク・・・何とかなるか。。。
【備忘録】Linuxカーネル更新方法

#はじめに
Linux素人が忘れないように記録したメモです。
nvidiaドライバーを使用するため、linuxカーネルを更新する手順についてまとめています。

#Linux カーネル更新
Ubuntu 20.04のLinux カーネルを5.8から5.10へ更新する。

**現在のカーネルを確認する**

```
$ sudo uname -a
```

**更新可能なカーネルのリストを表示**
ubuntu 20.04 の場合Linux 5.8となっているので5.8以上のカーネルをsearchコマンドで検索する。

```
$ sudo apt-cache search linux-image-[カーネルver]
```

**カーネルインストール**
Linuxカーネル5.10をインストールし、再起動する。

```
$ sudo apt-get install linux-image-[カーネルVer]
```

**カーネルverの確認**
以下の方法で更新されているか確認する。
①．再起動時にAdvancedモードで起動
②．再起動後```sudo uname -a```で確認する
【備忘録】Nvidia Docker2のインストール

#はじめに
Linux素人が忘れないように記録したメモです。
Docker コンテナ内から NVIDIA の GPU にアクセスするためには NVIDIA Docker の使用が必要となるので、インストール方法について記載しました。

#Nvidia docker２のインストール
以下の手順でインストールします。

```
$ curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | sudo apt-key add -
$ distribution=$(. /etc/os-release;echo $ID$VERSION_ID)
$ curl -s -L https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list | sudo tee /etc/apt/sources.list.d/nvidia-docker.list
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install -y nvidia-docker2
$ reboot
```
※ curl でエラーが出る場合は Curl をインストールしてください。

```
$ sudo apt install curl
```

#参考
https://github.com/NVIDIA/nvidia-docker/issues/838
https://qiita.com/yasuhiroki/items/a569d3371a66e365316f
何をしているんだろう？魔法の数式

なんでそうなるのかがさっぱりわからん数式。

4つの異なる日付フィールドから次の次の日付値を入力する式
https://trailblazers.salesforce.com/answers?id=9063A000000lCULQA2

```
IF(
    AND(
        ISBLANK(Date_1__c),
        ISBLANK(Date_2__c),
        ISBLANK(Date_3__c),
        ISBLANK(Date_4__c)
    ),
    NULL,
    DATE(1900, 01, 01) + 
    MIN(
        BLANKVALUE(IF(Date_1__c < TODAY(), NULL, Date_1__c), DATE(4000, 12, 31)) - DATE(1900, 01, 01),
        BLANKVALUE(IF(Date_2__c < TODAY(), NULL, Date_2__c), DATE(4000, 12, 31)) - DATE(1900, 01, 01),
        BLANKVALUE(IF(Date_3__c < TODAY(), NULL, Date_3__c), DATE(4000, 12, 31)) - DATE(1900, 01, 01),
        BLANKVALUE(IF(Date_4__c < TODAY(), NULL, Date_4__c), DATE(4000, 12, 31)) - DATE(1900, 01, 01)
    )
)
```

なんなんだ　DATE(4000, 12, 31))は？


BLANKVALUE(
IF(Date_1__c < TODAY(), NULL, Date_1__c), DATE(4000, 12, 31)　) 
から、
- DATE(1900, 01, 01),を引いてるの？


これも良くわからん。

https://trailblazers.salesforce.com/answers?id=9064S000000DuwfQAC


#Salesforce で許容される日付および年の値の最大値
https://help.salesforce.com/articleView?id=000318735&type=1&mode=1

Salesforce では、1700 年 1 月 1 日から 4000 年 12 月 31 日までの日付を入力することができます。
datetime-localの罠

# はじめに
Railsにてポートフォリオ作成時、動作確認を行う中で、日時のフォームにdatetime-localを使用している箇所で、不都合なことが起きたため、まとめたものです。

# type=datetime-local
下記のように、日時を登録するフォームを生成するもの。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106668/1ad8332a-4415-7306-d56e-2403fc340fa8.png)
railsのform_with使用時は以下で製作可能

```erb
<%= f.datetime_field :start_time, ...
```
# 不都合①　safari
iphoneを用いて動作確認中に、予定を新規作成しようとした際、保存を押しても"有効な値を入力してください"と言われてしまう。

対応策としては、初期値を代入することで回避は可能

```erb
<%= f.datetime_field :start_time, value: Time.current.strftime("%Y-%m-%dT%H:00:00") %>
```

# 不都合②　Firefox
Firefoxではそもそも対応していない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106668/041d8264-cf38-3229-d16f-179525140aa6.png)

そのため、間の"T"を消して登録などを押されると、不正な値として送信していることになる。
Google App Engineで別プロジェクトに紐付いたfirebase admin sdkを使用する


# 結論

- 環境変数に`FIREBASE_CONFIG='{"projectId": "your-project-id"}'`を設定する。
- GAEのサービスアカウントをfirebaseに紐付いたプロジェクトのIAMに追加し、権限を与える。

別解として、firebaseに紐付いたプロジェクトでサービスアカウントキーを発行し、`initialize_app`実行時にそのキーを使うように指定する方法もあると思います。

# 環境

- Google App Engine python3.8
- firebase-admin 5.0.0

# 実装

## `FIREBASE_CONFIG`を設定

`projectId`(project_idではないことに注意)にfirebaseのprojectIdを設定する。

```sh:.env
FIREBASE_CONFIG='{"projectId": "your-project-id"}'
```

## `firebase_admin`SDKのセットアップ

同プロジェクトに紐付いたfirebaseを操作するときと変わらず、引数なしで`initialize_app`を実行する。

```python:firebase_admin_setup.py
import firebase_admin

firebase_admin.initialize_app()
```

# IAMの設定

`[GAEのプロジェクトID]@appspot.gserviceaccount.com`をfirebaseに紐付いたプロジェクトのIAMに追加し適切な権限を与える。（今回は`Firebase Admin SDK 管理者サービス エージェント`のロールを与えました。）
WidgetBundleを使う

## WidgetBundle
[WidgetBundle](https://developer.apple.com/documentation/SwiftUI/WidgetBundle)を使うと、異なる種類のWidgetを追加できます。

公式の例にもありますが、こんな感じです。

```
@main
struct GameWidgets: WidgetBundle {

    var body: some Widget {
        GameStatusWidget()
        CharacterDetailWidget()
        LeaderboardWidget()
    }

}
```

ポイントは、
- `@main`をつける
- `WidgetBundle`を継承する
- `body`の中で複数のWidgetを並べる

異なるWidgetを使うことで、異なるレイアウトのWidgetを作りやすくなりますね。

サンプルで作ったものはこちらになります。

```
@main
struct MyWidgets: WidgetBundle {
    var body: some Widget {
        FirstWidget()
        SecondWidget()
    }    
}

```

|１つ目|２つ目|
|----|----|
|![widgetbundle_first.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297014/19126719-a50d-9c2f-aafe-0218f24aa939.png)|![widgetbundle_second.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297014/e8c938b4-feb3-0495-121e-12c11f7faf96.png)|




## 参考
https://developer.apple.com/documentation/widgetkit/creating-a-widget-extension
https://developer.apple.com/documentation/SwiftUI/WidgetBundle
OKI「AE2100」 Ubuntu + OpenVINOコンテナ向け Python環境の構築方法

# 要約

この記事では、AE2100のUbuntu + OpenVINOコンテナ上に、PythonおよびPython向けOpenCVの環境を構築する方法について説明します。

# はじめに

OKIのAIエッジコンピュータ「AE2100」の標準コンテナには、ディープラーニングの推論環境であるOpenVINOがインストールされています。
OpenVINOではPythonからディープラーニングの推論を可能にするAPIが提供されています。
また、OpenVINOにはコンピュータビジョン向けライブラリであるOpenCVが付属しています。

@TWATさんは[AE2100で動く物体検出プログラムを紹介した記事](https://qiita.com/TWAT/items/0cbf6286e921f7c5664e)を投稿しており、当該記事のプログラムではPython 3からOpenVINOとOpenCVを利用しています。

ただしAE2100の標準コンテナは、初期状態ではPythonがインストールされていません。
PythonプログラムからOpenVINOを利用するには、Pythonをインストールする必要があります。
またPythonプログラムからOpenCVを利用するには、OpenCVの依存プログラムをインストールする必要があります。

そこで本記事では、AE2100のUbuntu + OpenVINOコンテナ上に、PythonおよびPython向けOpenCVの環境を構築する方法を説明します。

# Pythonとpipのインストール

AE2100のホストOSから、環境構築を行うゲストOSのコンテナ内部へ移動します。

Ubuntuコンテナ内では、ソフトウェアのインストールにaptコマンドを利用することができます。
下記のコマンドを実行しPython 3およびPythonパッケージをインストールする際に用いるpipをインストールします。

``` 
# apt update                 # パッケージリストを更新
# apt install -y python3
# apt install -y python3-pip
```

上記のインストール実行後、下記のコマンドによってPython対話モードが起動すれば、Pythonのインストールは成功です。
対話モードを終了するには`Ctrl+D`を押します。

```
# python3
Python 3.6.9 (default, Jan 26 2021, 15:33:00)
[GCC 8.4.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>>
```

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

Pythonでユーザアプリケーションを作成するにあたり、様々なパッケージをインストールして利用します。
例えば数値計算用のパッケージであるNumPyは、標準ではインストールされていないため、pipコマンドなどでインストールする必要があります。

なおPython向けOpenCVを利用するには、NumPyが必要となります。
pip3コマンドを用いてNumPyをインストールするには、下記のコマンドを実行します。

```
# pip3 install numpy
```

Python対話モードから`numpy`のインポートが成功すれば(`ModuleNotFoundError`が表示されなければ)、NumPyのインストールは成功です。

```
# python3
Python 3.6.9 (default, Jan 26 2021, 15:33:00)
[GCC 8.4.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import numpy
>>>
```

この他にもPythonプログラム実装にあたって利用したいパッケージがあれば、同様の手順でインストールしましょう。

# OpenCV依存プログラムのインストール

OpenCVの依存プログラムであるGTK、FFmpeg、GStreamerをインストールします。
GTKはGUIツールキット、FFmpegは動画の録画・変換・再生のためのソフトウェア、GStreamerはマルチメディアフレームワークです。

下記コマンドを実行し、依存プログラムをインストールします。

``` 
# apt install -y libgtk-3-0 ffmpeg libgstreamer1.0-0 gstreamer1.0-plugins-base gstreamer1.0-plugins-good gstreamer1.0-plugins-bad
```

OpenVINOの環境変数を設定します。
なおOpenVINOのバージョンによってシェルスクリプトのファイルパスが異なります。

- OpenVINO 2021以前の場合
    ```
    # source /opt/intel/openvino/bin/setupvars.sh
    ```
- OpenVINO 2022以降の場合(2022年12月追記)
    ```
    # source /opt/intel/openvino/setupvars.sh
    ```

上記によりOpenVINOに含まれるPython向けOpenCVのパス(`/opt/intel/openvino/python/python3/cv2.abi3.so`)が設定されます。

Python対話モードから`cv2`のインポートが成功すれば、Python向けOpenCVの準備は成功です。

```
# python3
Python 3.6.9 (default, Jan 26 2021, 15:33:00)
[GCC 8.4.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import cv2
>>>
```

# まとめ

今回はAE2100のUbuntu + OpenVINOコンテナ上にPythonおよびPython向けOpenCVの環境を構築しました。
PythonプログラムからOpenVINO、OpenCVを利用することができるようになりましたので、
ぜひAE2100で動くコンピュータビジョンプログラムをPythonで作成してみましょう。

なお、@TWATさんの投稿記事[「OKI AIエッジコンピューター「AE2100」で動く物体検出プログラムを作ろう (1) ―基礎編―」](https://qiita.com/TWAT/items/0cbf6286e921f7c5664e)では、Pythonによる物体検出プログラムのソースコードを記載しています。
このプログラムは今回構築した環境で動作しますので、ぜひ試してみてください。

# 関連記事

- [OKI AIエッジコンピューター「AE2100」で動く物体検出プログラムを作ろう (1) ―基礎編―](https://qiita.com/TWAT/items/0cbf6286e921f7c5664e)
Adalo 少数第一位までの表示

## Adaloで少数第1位までの統一方法

▼やりたいこと
「2.75」→「2.8」
「4」→「4.0」
と出力する。

プログラムを記述することが出来れば何も難しいことはないのですがNoCodeツールAdaloには桁数を制限したりすることができないので一工夫必要になります。

### 実装するための一工夫
1. DBには少数第一位まで保存
1. 整数部と少数部で分けて出力

### DBには少数第一位まで保存
Numberで型を定義すると自動的に少数第2位を四捨五入してDBに値を保存することができます。

### 整数部と少数部で分けて出力
#### 整数部
```
出力：INT（DBの値）
```
※INTは少数を切り捨ててくれます
▼例
INT（4.8）→4
#### 少数部
```
出力：INT(（DBの値）-INT(DBの値))*10)
```
▼例
INT(（4.8）-INT(4.8))*10)→8

ここまででDB
に保存されている4.8という値が「4」と「8」に切り分けることができたのでそれぞれ「.」で繋いであげれば出力できそうですね！！
これによって整数値はを「4」ではなく「4.0」と出力できるのでちょっとした表示崩れの対策になりそうですね！！！
MySQL8.0 でtable作成とデータ追加

初心者の自分ための忘却録

#すべてのデータベースの一覧を取得

書式　`SHOW DATABASES [LIKE 'pattern' | WHERE expr]`

```MySQL8.0CommandLineClient
show databases;
```
実行結果

```MySQL8.0CommandLineClient
+--------------------+
| Database           |
+--------------------+
| test1              |
+--------------------+
```
#使用するデータベースを選択
書式　`USE db_name`

test1 を選択

```MySQL8.0CommandLineClient
use test1;
```

#作成済のテーブル一覧を確認する
書式
`SHOW [EXTENDED] [FULL] TABLES
    [{FROM | IN} db_name]
    [LIKE 'pattern' | WHERE expr]`

カレントデータベース(作業中のデータベース)であるtest1のテーブル確認

```MySQL8.0CommandLineClient
show tables;
```
実行結果

```MySQL8.0CommandLineClient
+-----------------+
| Tables_in_test1 |
+-----------------+
| users1          |
+-----------------+
```
#テーブル作成
書式(DB選択の場合)
`CREATE TABLE [IF NOT EXISTS] tbl_name
    (col_name data_type, ...)`

選択中のDBであるtest1にテーブル"input"を作成

```MySQL8.0CommandLineClient
create table input (
id int not null auto_increment,
name char(30) not null,
text char(255),
date datetime,
primary key(id)
);
```
auto_increment：新しい行に一意の識別子を生成できる。
primary key：主キーの設定

#テーブルのカラムと設定内容確認
書式
`SHOW FULL COLUMNS FROM [TABLE_NAME];`

```MySQL8.0CommandLineClient
show full columns input
```
実行結果

```MySQL8.0CommandLineClient
+-------+-----------+--------------------+------+-----+---------+----------------+---------------------------------+---------+
| Field | Type      | Collation          | Null | Key | Default | Extra          | Privileges                      | Comment |
+-------+-----------+--------------------+------+-----+---------+----------------+---------------------------------+---------+
| id    | int       | NULL               | NO   | PRI | NULL    | auto_increment | select,insert,update,references |         |
| name  | char(30)  | utf8mb4_0900_ai_ci | NO   |     | NULL    |                | select,insert,update,references |         |
| text  | char(255) | utf8mb4_0900_ai_ci | YES  |     | NULL    |                | select,insert,update,references |         |
| date  | datetime  | NULL               | YES  |     | NULL    |                | select,insert,update,references |         |
+-------+-----------+--------------------+------+-----+---------+----------------+---------------------------------+---------+
```
#テーブルにデータを追加
書式
`INSERT [INTO] tbl_name
    [(col_name [, col_name] ...)]
    {VALUES | VALUE} (value_list) [, (value_list)] ...`

1行データを追加

```MySQL8.0CommandLineClient
 insert into input(name,text,date) values('taro','test1','2021-05-30 22:00::00');
```
複数行データを追加

```MySQL8.0CommandLineClient
insert into input(name,text,date) values
('yama','test2','2021-05-30 22:01:00'),
('taro','test3','2021-05-30 22:02:00'),
('yama','test4','2021-05-30 22:03:00');
```

#テーブルデータ取得

```MySQL8.0CommandLineClient
select * from input;
```
実行結果

```MySQL8.0CommandLineClient
+----+------+-------+---------------------+
| id | name | text  | date                |
+----+------+-------+---------------------+
|  1 | taro | test1 | 2021-05-30 22:00:00 |
|  2 | yama | test2 | 2021-05-30 22:01:00 |
|  3 | taro | test3 | 2021-05-30 22:02:00 |
|  4 | yama | test4 | 2021-05-30 22:03:00 |
+----+------+-------+---------------------+
```
WSL2 に wgrib2 と grib2json をインストール

# はじめに

気象データには grib2 というフォーマットが多く使われている。そこで気象データを扱うために wgrib2 と grib2json というツールをインストールする。実行環境は Windows 10 Pro (WSL2 Ubuntu-20.04)。
本記事ではインストールまでに留めるが、今後実際に気象データを扱う記事も書く予定。

# wgrib2 のインストール

wgrib2 とは grib2 処理ツールのことで、grib2 データの抽出や加工などを行うことができる。インストール方法は [GRIB2形式データを処理するプログラムwgrib2（入門編）](https://ods.n-kishou.co.jp/tech/blog/detail/1923)を参考にした。 

（WSL2 では標準で入っているため）gfortran と gcc はインストールされていることを前提とする。適当なディレクトリで、以下コマンドを実行。 

```
$ export FC=gfortran 
$ export CC=gcc 
$ wget ftp://ftp.cpc.ncep.noaa.gov/wd51we/wgrib2/wgrib2.tgz 
$ tar -xvzf wgrib2.tgz 
$ cd grib2/ 
$ make 
```
 
wgrib2 ディレクトリに wgrib2 コマンドが生成されていればインストール成功。以下のようにディレクトリを移動、パスを通すなどしておくと便利。 

```
$ cd ../ 
$ mv grib2 /usr/local 
$ vi ~/.bashrc 
--- 
export WGRIB2="/usr/local/grib2" 
export PATH="${WGRIB2}/wgrib2:${PATH}" 
--- 
```

# grib2json のインストール

grib2json は文字とおり grib2 形式から json 形式に変換するツールのことである。インストール方法は [leafletとleaflet-velocityで風量情報を地図に表示してみる(windows)](https://maekawa-yoshimiki-1119.hatenablog.com/entry/2020/03/03/220155#grib2json%E3%81%AE%E5%B0%8E%E5%85%A5)を参考にした。

適当なディレクトリで、以下コマンドを実行。ソースコードは [GitHub - grib2json](https://github.com/cambecc/grib2json) にあるので、そこからクローンしてきてパッケージ化している。

```
$ sudo apt update
$ sudo apt install maven
$ git clone https://github.com/cambecc/grib2json
$ cd grid2json
$ mvn package
$ cd target
$ tar -zxvf grib2json-x.x.x-SNAPSHOT.tar.gz     # 適切なバージョンを指定
```

wgrib2 と同様にディレクトリを移動、パスを通すなどしておくと便利。 

```
$ cd ../../
$ mv grib2json /usr/local
$ vi ~/.bashrc
---
export GRIB2JSON="/usr/local/grib2json/target/grib2json-x.x.x-SNAPSHOT/bin"
export PATH="${GRIB2JSON}:${PATH}"
---
```
CCNA試験学習(忘備録)〜レイヤの概念〜

#はじめに

引き続き、CCNA試験に向けての学習を続けます。

####OSI参照モデル

>７つの階層で構成される。
・第７層・・・アプリケーション層。
・第６層・・・プレゼンテーション層。
・第５層・・・セッション層。
・第４層・・・トランスポート層。通信の信頼性を実現。エンドツーエンドのデータ通信を保証。
・第３層・・・ネットワーク層。IPアドレスに基づいて経路を選択する。
・第２層・・・データリンク層。回線やネットワークで物理的に繋がれた２台の機器の間でデータの受け渡しを行う。MACアドレスを扱う。「フレーム」が出てきたらここ。
・第１層・・・物理層。ビット列のデータを電気信号へ変換。

####エンドツーエンド

>データの送信元と宛先を結ぶ通信経路全体のこと。

####FCS

>Frame Check Sequence（フレームチェックシーケンス）の略。
データリンク層で生成されるイーサネットフレームに付加されるエラー検出用フィールド。

####カプセル化

>データに**ヘッダ**という制御情報をくっつけていく作業。

####非カプセル化

>受信データを各レイヤで処理しヘッダを外していく作業。

####フレームヘッダ

>データリンク層でデータがカプセル化される時に、データの先頭に付け足される情報のこと。
フレームヘッダには、送信元MACアドレスと宛先MACアドレス情報が含まれる。

####PDU

>データ＋フレームヘッダのデータ単位をPDUという。
各レイヤで呼び方が変わり、L1では**ビット、シンボル**L2では**フレーム**。
L3では**パケット**、L4では**セグメント**という。

#参考

カプセル化　http://www5e.biglobe.ne.jp/~aji/3min/06.html
TCP https://wa3.i-3-i.info/word19.html

#さいごに

各レイヤの役割を理解しました。
ナントカアドレスがいくつもあると感じていましたが、理解できました。
オーバーライドについて

# オーバーライドについて

## オーバーライドの説明
オーバーライドとは、サブクラス内で、スーパークラスで定義しているメソッドと目的が同じであるが、
処理が異なるメソッドを定義する場合に使用します。

## オーバーライドのルール

実際にコードをみてみましょう。

```
class Parents {    //親クラス
    A method(int a){}
}

class Childs extends Parents {   //サブクラス
    A method(int a){}
}

```

オーバーライドは、**メソッド名、引数リストがまったく同じであること**、
戻り値は**スーパークラスと同じ型もしくは、その型のサブクラス型でなければいけません。**

また、アクセス修飾子は**スーパークラスと同じものか、それよりも公開範囲が広いものを使用**しなければいけません。

・アクセス修飾子
*public(広い) ⇨ protected ⇨ デフォルト ⇨ private(狭い)*

## @Override(アノテーション)について
Java言語では@Override(Overrideアノテーション)を付与することで、**「このメソッドはオーバーライドしていること」**
ということを明示することが可能です。

```
class X {
    void methodA(){}
}

class Y extend X {
    // methodA()をオーバーライドするつもりが、間違えてmethoda()として定義した場合
    void methoda(){}
}

```

上記のように、methodA()を誤ってmethoda()と定義してもコンパイルエラーにはなりません。
単純にmethoda()がYクラスで定義したメソッドとして扱われるからです。

```
class Y extend X {
    @Override
    void methoda(){}
}

```

@Overrideを使用することでオーバーライドの使用を明示的に定義します。
よってメソッド名が異なる場合、コンパイルエラーが発生します。

## まとめ
・オーバーライドは、サブクラス内でスーパークラスで定義しているメソッドと目的が同じであるが、処理が異なるメソッドを定義する場合に使用します。
・オーバーライド時の戻り値の型は、スーパークラスと同じもしくはその型のサブクラス型でなければならない。
・オーバーライド時のアクセス修飾子はスーパークラスと同じものか、それよりも公開範囲が広いものを使用しなければならない。
・@Overrideを付与すれば、メソッド名の間違いを防ぐことができる。
Qiitaでのコード記入

Qiitaでコードを記入する場合は、バッククォーテーション３つで囲む必要がある。
※バッククォーテーションとは、sift + キーボード＠　で記入できる

メリット：
``` <%= content.gsub(/\r\n|\r|\n/, "<br>") %>```等を記入したいときにバッククォーテーション無しだと```<br>```の部分で改行されてしまう。バッククォーテーションによって、このように文字として記入できる。
UIActivityViewControllerでTwitterにシェアできない件

![Xcode-12.4](https://img.shields.io/badge/Xcode-12.4-brightgreen) ![Swift-5.3](https://img.shields.io/badge/Swift-5.3-brightgreen)

## 追記
Twitter 8.67.1 だと無事シェアできるようになってそうでした:tada:

## はじめに
Twitter 8.65.2 だと下記のように `UIActivityViewController` でシェアできないようです。

![share](https://user-images.githubusercontent.com/34936885/119581218-17e21480-bdfd-11eb-9378-5a4faf8864b3.gif)

シェア候補として Twitter が表示されますがタップしても共有できないようです:rolling_eyes:

確認した端末は iOS 13.7 と iOS 14.4 です。

## 対策
対策と言っても `UIActivityViewController` は下記のように渡すだけなので Twitter アプリの更新を待つしかないでしょう:innocent:

```swift
let activity = UIActivityViewController(activityItems: ["text"],
                                        applicationActivities: nil)
present(activity, animated: true)
```

ただどうしてもアプリから Twitter にシェアしたいんだ！と言う場合は下記のように OpenURL を使うのも１つの手かもしれません。

```swift
let text = "text"
UIApplication.shared.open(URL(string: "https://twitter.com/intent/tweet?text=\(text.urlEncoded)")!)

extension String {

    // 色々例外があった気がするのでもうちょっと工夫が必要かも??
    var urlEncoded: String {
        let charset = CharacterSet.alphanumerics.union(.init(charactersIn: "/?-._~"))
        let removed = removingPercentEncoding ?? self
        return removed.addingPercentEncoding(withAllowedCharacters: charset) ?? removed
    }
}
```

## おわりに
とりあえず別案を書いてみましたがアプリの対応している間に Twitter のアップデートがある気もするのでのんびり Twitter のリリースを待てばいいんじゃないかなと思います:sleeping:
text-areaでの改行、空白の追加

改善点：
・テキストエリアに入力したテキストに改行、空白が反映されないので、反映させたい。

解決方法：
改善前コード　　```<%= micropost.content %>```

改善後コード　　```<%= simple_format(micropost.content)%>```

これで、改行、空白が追加された。
また注意しておきたいのが```<%=micropost.comtent.gsub(/\r\n|\r|\n/,"<br>") %>```では
テキストの最後に```</br>```と書かれるだけで、反映されなかった。
プログラミングコード　種類

#HTMLとは
HTMLは、ページの要素や構造をブラウザに伝えるための言語です。

#cssとは
CSS（Cascading Style Sheets：カスケーディング・スタイル・シート）は、Webページを装飾するための言語です。Webサイトのデザインの部分を担っています。

![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/cad0d2b4-8781-46e2-196e-dbf3c0ed02ea.png)

#Rubyとは
Rubyは、Webアプリケーションを作るために必要なプログラミング言語です。
「Webアプリケーション」では、Amazonや乗換案内のように、「訪問者が能動的に操作して閲覧」する。そういったシステムを作るのに向いています。自ら何かを入力して検索しデータを探しに行く。

※一方、一般的なWebサイトでは、HTMLファイルをインターネット上に公開し、閲覧してもらう。ブログのようなもの。

![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/93496cdb-a828-19a5-1124-8152ce617d38.png)

#Ruby on Railsとは
Ruby on Railsを使うと、ウェブアプリケーションを簡単に作成できるようになります。「Ruby on Rails（ルビーオンレイルズ）」は、ウェブアプリケーションを開発するためのフレームワークです。
「フレームワーク」は「ひな形」のことで、アプリケーション開発に必要な細々した機能を簡単な手順で設定できるようになっています。「フレームワーク」は「ひな形」のことで、アプリケーション開発に必要な細々した機能を簡単な手順で設定できるようになっています。

**大きく3つのメリットを持っています**
・生産性が向上する
・メンテナンスしやすい
・品質を維持できる

#JavaScriptとは
HTML／CSSで作成したWebサイトは、ブラウザ表示中に色を変えたり文字を編集したりすることはできません。コードで指定したとおりの色や文字で、つねに表示されます。

一方、InstagramやFacebookの「イイね」ボタンは、クリックをすると、「イイね」が付いたりハートアイコンが着色されるといった変化があります。
「イイね」ボタンを再びクリックすると、「イイね」が取り消され、ハートの色がなくなる変化も確認できます。

この変化の仕組みは、HTML／CSSだけでは実現できません。
ここに関わっているのが、「JavaScript」です。
JavaScriptは、プログラミング言語の1つで、HTML／CSSでは実現できない「動きの変化」を設定できます。
さきほどの「イイね」ボタンでは、ハートアイコンをクリックする動作（イベント）をきっかけに、色が変わったり文言が変わったりしましたね。
これが、プログラミング言語のJavaScriptだからこその機能です。

webサイト内でアクションを実行でき、何かを押すごとにwebページを再リロードすることなく、アクションを実行できます。

下記のグーグルマップはjavaでできた最高峰といってもいい物です。

![new-google-map.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/23d282d9-b1a6-fb87-aee2-a8d041262fc7.jpeg)

宅配やタクシーの到着予測などもjavaの変数を使用し設定しています。
様々なアクションを実行することができるようになります。


#jQueryとは
jQuery（ジェイクエリー）は、最も広く使われているJavaScriptライブラリです。
JavaScriptの難解な部分を解消させるために、誕生しました。
JavaScriptライブラリとは、JavaScriptの処理を簡単に扱えるようにしたプログラムです。

#Pythonとは
Pythonは、人工知能を搭載したソフトウェア、とりわけ機械学習を用いたソフトウェアの開発の分野で広く活用されています。コードが簡潔であるだけでなく、初めて機械学習を学ぶ人にとっても習得しやすい言語であるため、機械学習を学ぶ際には基本のプログラミング言語といえます。
・Googleの検索結果の表示
・画像検索
・SNSの顔認識
・SiriやAlexaなどの音声認識
・Uberなどの配車アプリ
・カーナビの最短距離の産出
・SNSのホーム画面の表示順序

**Pythonが注目される理由は以下の4つがあります。**
・専門分野での実績がある
・便利な機能が充実
・簡単に動作確認できる
・開発を効率化できる

実例
**YouTube**
Pythonは主にYouTube側のサーバーの処理などに用いられており、その他のGoogle関連のWebアプリケーションでも採用が進んでいます。
![316aab23ab72b101920e0627f3a38083127bcbe8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/82de95f1-6b9e-34a7-940c-c9da0095b471.jpeg)

**Instagram**
現在10億人ものユーザー数を誇る人気写真共有サイトInstagramも、Python のDjangoというフレームワークを使って構築されたWebアプリケーションです。
![unnamed.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/10f0fc43-87db-2842-d8c7-5677af5a1d9c.jpeg)

**Dropbox**
Dropboxの93万行にも及ぶ膨大なコードはすべてPython で書かれており、OSを選ばないポータビリティ性、動作の高速性、などの高い利便性を実現しています。
![dropbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1514036/20162b7d-5847-7ff7-a2df-4faf60a4e867.png)
WebSocket で LiveSplit にアクセスし情報を取得する

# はじめに
個人的な趣味で [Vue を使って配信レイアウトを作っている](https://github.com/potdig/poshi_layout)のですが、その中で LiveSplit への WebSocket 接続を行うようにしたのでメモしておきます
（公式で用意されている [LiveSplit Server](https://github.com/LiveSplit/LiveSplit.Server) コンポーネントは通常の Socket 通信用なんだよね・・・）

## LiveSplit とは
主に RTA で利用される海外製のストップウォッチツール
便利に使うために外部コンポーネントを追加することができる

https://rta-play.info/tools/stopwatch/livesplit/

# 準備
まずは WebSocket での接続を可能にするために、コンポーネントを追加する
開発途中で API が変更になる可能性があるとのこと
公式の LiveSplit Server と同等のことは現段階でだいたいできるようになっている

https://github.com/Xenira/LiveSplit-Websocket

1. 上記リポジトリの Releases ページから最新版の `LiveSplitWebsocket.zip` をダウンロードし、アーカイブの中身をすべて LiveSplit の `Components` フォルダ内に置く

1. LiveSplit 起動後、右クリックメニューから `Edit Layout...` を選び、レイアウト編集画面を開く

1. コンポーネント追加メニュー（+マーク）から `Control` -> `LiveSplit Websocket` を選択
  * リストに追加された `LiveSplit Websocket ({ポート番号})` をダブルクリックして設定画面を開くと、ポート番号を変更することができる

1. OK ボタンでレイアウト編集を確定後、右クリックメニューから `Control` -> `Start Server (WS)` を選択すると、内部で WebSocket サーバが起動する（特にメッセージとか出ないけど起動してる）

# 接続してみる
サーバを起動したので、 wscat を用いて WebSocket 接続を試してみる（ Windows 環境のため、 Node.js command prompt からの実行）

```
>wscat -c localhost:16835/livesplit
Connected (press CTRL+C to quit)
> getcurrenttime
< {"name":"getcurrenttime","data":0.0}
> getGame
< {"name":"getGame","data":{"gameName":"Puzzle Bobble (Arcade)","gameIcon":null,"categoryName":"1 Player","attempts":414,"completedAttempts":18}}
>
```

`getGame` は README に記載されていないが、スプリットの情報を取得するコマンドとして使用できる
NuxtをコンテナにしてLambdaでデプロイするのが超簡単になった2021年

以前書いた[LaravelをコンテナにしてLambdaでデプロイするのが超簡単になった2021年](https://qiita.com/umihico/items/514cf792d30bf3706ef5)のNuxtバージョンです。[Djangoバージョンはこちら](https://qiita.com/umihico/items/4534e1f84e8de5a62db5)

有名どころで[nuxt-serverless](https://github.com/tonyfromundefined/nuxt-serverless)など色々ありますが、こんな手間・デメリットがあったかと思います。

- 静的ファイル用にS3を用意、同期対応
- API GatewayのURLに付与されるステージ変数の対応
- `npx create-nuxt-app`を使ったセットアップを行えない

そんな中、[それらのデメリットを脱却できそうな記事](https://www.serverless.com/examples/aws-node-vue-nuxt-ssr/)を見つけたので、create-next-appで選択して初期セットアップを行う余地を残しつつ、コンテナ環境下で開発＆デプロイできるような[テンプレートレポジトリを作成しました。](https://github.com/umihico/nuxt-serverless-container)

以下のコマンドの実行でデプロイされます。
私の場合はURLは以下になりました。
https://bqzkag54cc.execute-api.ap-northeast-1.amazonaws.com/

```bash
git clone --depth 1 https://github.com/umihico/nuxt-serverless-container.git nuxt-serverless-container
cd $_
sh install.sh
sls deploy
```

デプロイでき、かつ資材がローカルに生成されているのが確認できるかと思います。生成された資材に手を加えて`sls deploy`を行えば、以後は反映されたデプロイが行われます。ローカルで開発するには資材生成後に`npm install`を行い、以後は`docker-compose up --build`しておけば[http://localhost:3000/](http://localhost:3000/)で確認しながら開発できます。AWS側のデプロイされたリソース一式を除去するには`sls remove`です。

次に`npx create-next-app`の対話式選択を各自で行いたいケースです。デプロイを行っていて生成された資材がある場合は`git clean -fd`コマンドあたりで除去しておきましょう。`install.sh`内の`npx create-nuxt-app --answers`フラグの引数を編集します。選択肢一覧は[こちら](https://github.com/nuxt/create-nuxt-app/blob/master/packages/create-nuxt-app/lib/prompts.js)から見ることができます。

編集後に再度`sh install.sh`を行うと選択が反映された資材が生成されているかと思います。

```bash:install.sh
cat <<EOF | docker run --rm -i --entrypoint '' -v $(pwd):/var/task amazon/aws-lambda-nodejs:14 bash -xv
mktemp -d
cd /tmp/tmp.*
npx create-nuxt-app --answers "{ \
  \"name\": \"nuxt-serverless-container-demo\", \
  \"language\": \"js\", \
  \"description\": \"nuxt-serverless-container-demo\", \
  \"author\": \"umihico\", \
  \"pm\": \"npm\", \
  \"ui\": \"none\", \
  \"server\": \"none\", \
  \"features\": \"axios\", \
  \"linter\": \"eslint\", \
  \"test\"  : \"none\", \
  \"mode\"  : \"universal\", \
  \"target\"  : \"server\", \
  \"devTools\": \"jsconfig.json\" }"
# You can configure these answers.
# Please check https://github.com/nuxt/create-nuxt-app/blob/a0da9468f0f95b4577e1dbbc7bb303396d99c1b8/packages/create-nuxt-app/lib/prompts.js
npm install esm serverless-http nuxt-start # installing extra dependencies
rm -rf node_modules # too heavy. stay in container.
rm README.md # avoid overwriting my README.md
cp -r * /var/task/
EOF
```

nuxtの性質上、1回のブラウジングで複数回lambdaが起動しているようで、そのせいなのか定かではありませんが、コールドスタートの影響が他のlambdaより顕著のような感じがします。本番運用ならProvisioned ConcurrencyかCloudfront必須ですね。

これで晴れてSSRもサーバーレスでやりやすくなりました。
うまくできない場合、気兼ねなくコメントやイシューくださいませ。

参考資料

- https://github.com/tonyfromundefined/nuxt-serverless
- https://www.serverless.com/examples/aws-node-vue-nuxt-ssr/
- https://stackoverflow.com/questions/38296667/getting-unexpected-token-export
- https://dev.classmethod.jp/articles/lambda-provisioned-concurrency-coldstart/