OmniAICreator/Qiita-1.07M huggingface dataset:
Vim Adventures攻略法 レベル2

## レベル2のポイント
[Vim Adventures](https://vim-adventures.com/)のレベル2は`w`、`e`、`b`モーションを入手して、前後の文字列の先頭や末尾に一気に移動できるようになることが目標です。すると、文字列の中にある岩のような障害物を越えられるようになります。また、レベル3に進むために開ける必要のある扉の鍵もあわせて入手します。

|キー|効果|
|:-:|---|
| w | カーソル位置より後にあるword(*)の先頭文字にカーソルを移動する |
| e | word(*)の末尾文字にカーソルを移動する |
| b | カーソル位置より前にあるword(*)の先頭にカーソルを移動する |
(*) wordとは文字・数字・下線(_)を1つの連続した文字列と見なし、下線以外の記号類は連続していても別の文字列として扱います。大文字の`W`、`E`、`B`が扱うWORDは空白で区切られる文字列であれば記号類も含めて連続した文字列を1つものと見なします。

下記の囲みを見ると違いが分かりやすいかと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/7246a706-1988-7bb8-8d78-dc6dd0793643.png)

## レベル2開始時点で使えるようになっているキー
下記キーボードはマップの好きな場所で`:keyboard`と入力すると表示されます。レベル1でキーが増えていないので、まだ`h`、`j`、`k`、`l`、`:`しか使えません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/65f3a251-b287-b50e-7555-77de2a7c6cef.png)

## レベル2の攻略手順
まずは`w`モーションを入手します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/c8e64704-29d7-20e0-defc-dd1476ac1627.png)

続いて6行目の`from`の任意の位置で`w`モーションを使うと、続く`the`の先頭である`t`のセルに移動するので、`e`も-ションと鍵を入手します。そして鍵のセルで`w`モーションを使って岩で囲われたエリアから出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/a65b8a31-8c32-07b8-13cf-5090f915844e.png)

一番下の行に移動して`w`や`e`モーションを使って岩を避けながら行末へ移動していくと`b`モーションを入手できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/2ca3a582-fe1a-96b5-5215-f1d0a08992fd.png)

続いて `.`のセルで`b`モーションを使用して`)`まで移動し、2つめの鍵を入手。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/31b0bde1-dd0a-ed73-324b-3229384d6abd.png)

そして一番上の行の`R`のセルまで移動して、`b`モーションを使用して文字列`Tota`の先頭`T`に移動し、そこで`e`モーションを使用して3つめの鍵を入手し、更に`w`か`e`モーションを使用して岩を飛び越えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/9eab64ac-3247-7d64-2f41-dcc0ef3cb8cd.png)

最後は`:)  `の行で`e`モーションを使用して`.`のセルに移動し、入手済みの3つの鍵を使って扉を開けて青い髪のキャラのセルに到着すればレベル２クリアです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/a6341afe-716e-e870-5be8-bf03ea8c842b.png)

[目次へ](https://qiita.com/mailstop/items/284f2a1300369b693f45)
[レベル1へ](https://qiita.com/mailstop/items/7201b7a71b6205577f1f)
[レベル3へ](https://qiita.com/mailstop/items/9741bb28c16c8719c95d)
Vim Adventures攻略法 レベル1


## レベル1のポイント
[Vim Adventures](https://vim-adventures.com/)のレベル1では`hjkl`キーによるカーソル移動を学習するのが目的です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/66518bec-fbf2-b5a0-a247-382386b09a8b.png)

## レベル1で利用可能なキー
下記キーボードはマップの好きな場所で`:keyboard`と入力すると表示されます。この時点では`h`、`j`、`k`、`l`と`:`しか使えません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/4656b432-c07d-c09f-8b05-894ae8efabbf.png)

## レベル1の攻略手順
マップ上のキャラはヒントを教えてくれます。宝箱にたどり着くには障害物の岩を越えなくてはならず、それには`B`コマンド、宝箱をゲットしたあとにマップに戻るには`E`コマンドが必要ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/71680d78-0dea-b31e-6346-3efa54b43372.png)

マップ上で`:keyboard`と入力すると現在使用可能なキーが表示されます。まだ`B`コマンドや`E`コマンドがないので、宝箱はまだ無理ですね。あとで取りに戻ってくることになるのでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/0765dd5d-d2a1-2fbb-0726-66fb8972d38c.png)


レベル1の最後にはvim特有のカーソル移動を学習します。

普通に進んでいこうとすると階段を超えられません。ピンクの髪のキャラがヒントとして教えてくれるのですが、vimではある行の行末から次の行に`j`や`k`キーで上下移動すると、元の行よりも短い行の場合はその行末に、元の行よりも長い行の場合は元の行末と同じ位置に移動します。

なので、最初の階段は①の位置から`j`キーを連打していくと濃い色のセルをたどって階段をクリアします。次の階段も②の位置から`k`キーを連打していくと濃い緑のセルをたどって階段に、最後の階段も同じように③の位置から`k`キーを押していくと、階段に引っかからずに先へ進めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/8bea51a1-cab0-5a83-ec26-4308f9496907.png)

画面右端のキャラのいるセルにたどり着くとレベル1はクリアで、レベル2のマップが展開されます。

[目次へ](https://qiita.com/mailstop/items/284f2a1300369b693f45)
[レベル2へ](https://qiita.com/mailstop/items/427e249feb8c51d4dff2)
Vim Adventures攻略法

[VIM Adventures](https://vim-adventures.com/)という昔のドラクエ風のマップを様々な`vim`のキー操作で移動するゲームの攻略法をメモに残します。`vimtutor`よりも楽しく`vim`のキー操作が学習できそうですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/f3400082-61bd-3fd3-b376-ec67b118e003.png)

レベル3までは無料で、そこから先は有料です。レベル13まであり、$25で6ヶ月間遊べるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/4868e1ea-c608-df61-5bdb-16b3a0eb26e1.png)

## 各レベルの攻略法へのリンク
[レベル1](https://qiita.com/mailstop/items/7201b7a71b6205577f1f)
[レベル2](https://qiita.com/mailstop/items/427e249feb8c51d4dff2)
[レベル3](https://qiita.com/mailstop/items/9741bb28c16c8719c95d)
[レベル4](https://qiita.com/mailstop/items/45ba38707f1baf164c6f)
[レベル5](https://qiita.com/mailstop/items/56444c01ea619affbd38)
[レベル6](https://qiita.com/mailstop/items/1cb4e1557f4a63277a65)
[レベル7](https://qiita.com/mailstop/items/e42d4ac759f4cd3f793d)
[レベル8](https://qiita.com/mailstop/items/b0a41995ac684c9166a3)
[レベル9 (未投稿)]()
[レベル10 (未投稿)]()
[レベル11 (未投稿)]()
[レベル12 (未投稿)]()
[レベル13 (未投稿)]()
M1 Macbook airでHomebrew3.0.0がインストールできないときに確認するべきこと

xcode-select --installをしても、
「ネットワークの問題が起きたため、ソフトウェアをダウンロードできません。」と表示された。
Stack over flowでもいろいろ調べたが解決不能。
英語では「Can't download the software because of a network problem」である。
英語の上位記事は１０以上読んだがすべて古いものでM1に特化したものは殆どなかったし、あったとしても解決できなかった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631703/7240124e-f065-0fc9-879d-7975e4e2bea6.png)
このような画像が出てきているはずである。

5時間ほど検索を続け、たどり着いた記事がこれ
https://tomippe.jp/kb/1099/#kb-list

一見関係ないように見えるが少なくとも自分はこの問題が解決した結果xcode-select --installに成功した。
やったことは
１　「日付と時刻を自動的に設定」にチェックをつける
２　「時間帯」の設定で位置情報を有効にする

（そもそも自分でもなぜこの問題が原因になっていると気づけたのかは不明。おそらく３時間悩まされたら感が鋭くなるのだろう笑）

（この記事でいうと１つ目にあたる）
[Mac App Store：接続できない、アップデートできないなどのトラブル対処法 - りんごが好きなのでぃす](https://ringosuki.hateblo.jp/entry/2016/05/17/Mac_App_Store%EF%BC%9A%E6%8E%A5%E7%B6%9A%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%80%81%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%AA%E3%81%A9%E3%81%AE)
Apple Silicon M1: Deep Learning開発環境

## Introduction

私の2021-03-26時点の環境。

- Mac
    - macOS Big Sur 11.2.3 / MacBook Air (M1 2020)
    - Xcode 12.4
    - [MacPorts](https://www.macports.org/)
    - Python: [Miniforge](https://github.com/conda-forge/miniforge)
    - [PyTorch v1.8.0](https://qiita.com/kose3/items/420d9e92f37b8633e55b)をビルドする
    - [OpenVINO 2021.3, OpenCV v4.5.2-openvino](https://qiita.com/kose3/items/2863791559cad7a3932f)をビルドする
    - [GNU Emacs 28.0.50](https://qiita.com/kose3/items/d8c2b4c34063ed4fcc43)をビルドする


- Raspberry Pi4
    - Ubuntu 20.10 aarch64
    - [OpenVINO 2021.3, OpenCV v4.5.2-openvino](https://qiita.com/kose3/items/5b390ef2e6d75fdac9e1)をビルドする
    - [OpenVINO ARM plugin](https://qiita.com/kose3/items/9752f9e61d6944bcd42b)をビルドする。
    - [Raspberry Pi4の開発をApple Silicon (M1) MacBookでやろう。（aarch64編）](https://qiita.com/kose3/items/af9edc9c40c9ae8fc5c3) ・・・ セルフコンパイルでもできるけど遅いから時間かかるよ。

## Note
PyTorch で Apple Silicon の Neural Engine を使えるようになって欲しい。

## Reference
- えーぃもうメンドウだ! ってなわけで。 [build-OpenVINO](https://github.com/kose/build-OpenVINO/tree/2021.3) 。。。（2021.4のリリース時には全体スクリプト書くかもね）
UDLDやLACPで疑似障害を発生させる方法

# はじめに
ネットワーク系のインフラをやられている方はよく使われていると思いますが、`UDLD`や`LACP`のダウン検知をテストで確認する方法を知らない人が私の周りでは多かったので、書き留めておきます。

# UDLD、LACPの止め方
`UDLD`（単方向リンク検出）や`LACP`（リンクアグリゲーションコントロールプロトコル）はリンク状態を**Layer2レベルのヘルスチェック**でやり取りするため、これを止めてあげます。

# やり方
`UDLD`や`LACP`を動作させている機器のどちらかでL2フィルタを設定することでヘルスチェックを止めます。

```shell:MACアドレスフィルタの設定（Cisco）
configure terminal
mac access-list extended [ACL名]
deny any any
```

```shell:フィルタの適用
interface GigabitEthernetX/X
mac access-group [ACL名] in
```

# おわりに
試験などで疑似的に障害を発生させる際に便利です。
terraformerを使ってEC2の状態を出力

# はじめに
terraformerを使用すれば、tfファイルを自動生成出来るらしいので、事前に作成したEC2をterraformerを使ってtfファイルを作成してみます。

# terraformerのバージョン

今回は下記のバージョンで試します。

| バージョン |
| --- |
| v0.8.6 |

# 事前準備

## terraform init
import実行前に、任意のディレクトリにプロバイダ(今回だとAWS)の指定をしたファイル記載し、`terraform init`を実施しておきます。

リージョンは東京を指定しています。

``` provider.tf
provider "aws" {
  region = "ap-northeast-1"
}
```

terraform initを実施して、`Terraform has been successfully initialized!`が出力されればOKです。

## EC2の作成
EC2を手動で作成しておきます。今回はこの手動作成したEC2を対象にtfファイルを出力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321507/f11af3e4-bd6d-7062-5ddd-3b5b65b45c0d.png)

# terraformerでtfファイルを出力
いよいよteraformerコマンドを使用してtfファイルを出力します。
`--filter`オプションで今回手動作成したEC2のインスタンスIDを指定します。

```
# terraformer import aws --regions=ap-northeast-1 --resources=ec2_instance --filter=aws_instance=i-0c66432a3385efebd
2021/03/15 09:44:39 aws importing region ap-northeast-1
2021/03/15 09:44:39 aws importing... ec2_instance
2021/03/15 09:44:44 Refreshing state... aws_instance.tfer--i-002D-0c66432a3385efebd_
2021/03/15 09:44:45 aws Connecting....
2021/03/15 09:44:45 aws save ec2_instance
2021/03/15 09:44:45 aws save tfstate for ec2_instance
```

成功すれば`generated`ディレクトリが作成されます。中身はこうなってます。

```
generated
   └── aws
       └── ec2_instance
           └── ap-northeast-1
               ├── instance.tf
               ├── outputs.tf
               ├── provider.tf
               └── terraform.tfstate
```

現在の状態が記載されてる`terraform.tfstate`の他に`instance.tf`などのファイルも作成されます。この`instance.tf`と`provider.tf`ファイルを別のところに持っていってapplyすれば同じ構成のものを作成することも出来ます。

# 終わりに
instance.tfファイルには最低限必要なステータス以外にも様々な情報が記載されています。管理する必要のない情報が大量にあると管理がしづらくなるので、不要なステータスは削除して使いましょう。
M1に移行したらiTermが使えなくなった

m1のmacminiに移行したら，iTermが使えなくなった．

そこで，色々調べて解決できたのでメモとして

前提として，
今回の内容は使っているシェルなどによるエラーかもしれないので，全ての人に当てはまるわけでないです．

また，私の使っているシェルはzshです．zsh以外の人は同じ方法でエラーが解消するかわかりません．

#エラー内容
移行後，iTermを開いたら，ポップアップが表示され，雑に答えたところ，すぐにiTermが閉じてしまうようになってしまった．

そこで，標準のアプリであるターミナルからの復旧を試みるが，プロセスを完了しましたと表示され，コマンドを入力できない．

#やったこと
https://bacchi.me/mac/terminal-troubleshoot/
（この処理は実際にはしなくても良いかもしれないが載せておく）
この記事を参考に/bin/shで起動し，

```
mv .bash_profile .bash_profile_`/bin/date +%F`
```
を実行する．（この処理は実際にはしなくても良いかもしれない）
ここで，dateと+%Fの間に半角スペースがあるので注意

そして，

```
brew install zsh
```
をする．

上記のサイトではこれで上手くいっていたが，さらなるエラーが生じた．

#さらなるエラー
エラー内容

```
/usr/local/Homebrew/Library/Homebrew/brew.sh: line 670: /usr/local/Homebrew/Library/Homebrew/vendor/portable-ruby/current/bin/ruby: Bad CPU type in executable
/usr/local/Homebrew/Library/Homebrew/brew.sh: line 670: /usr/local/Homebrew/Library/Homebrew/vendor/portable-ruby/current/bin/ruby: Undefined error: 0
Error: 'git' must be installed and in your PATH!
/usr/local/Homebrew/Library/Homebrew/brew.sh: line 670: /usr/local/Homebrew/Library/Homebrew/vendor/portable-ruby/current/bin/ruby: Bad CPU type in executable
/usr/local/Homebrew/Library/Homebrew/brew.sh: line 670: /usr/local/Homebrew/Library/Homebrew/vendor/portable-ruby/current/bin/ruby: Undefined error: 0
```

#したこと
https://himariweb.com/program/homebrew-install-git/
このサイトを参考にCommandLineTools(CLT)を入れ直す．

```
sudo rm -rf /Library/Developer/CommandLineTools
xcode-select --install
sudo xcode-select -r
brew install git
```
これらのコマンドでCLTを入れ直し，gitを再度インストールする．

その後は，エラーなどが出るが，

```
Error: git 2.23.0_1 is already installed
To upgrade to 2.30.2, run:
  brew upgrade git
```
とかのバージョン関係のエラーなので指示に従っていく．

以上のことをして，

```
brew install zsh
```
または

```
brew reinstall zsh
```

により，zshをインストールできるようになった．

そして，iTermを開いたらこれまで通りちゃんと動くようになってくれていた．
【kintone】グラフAPIを試してみた（GET）

2021年2月のアップデートで、グラフAPIが追加されました。

https://developer.cybozu.io/hc/ja/articles/360000313406

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c848f9a9-3cfa-d00d-c44e-46bb4aad7f40.png)

GETとPUTの2種類あるようです。
今回はConsole上でGETを試してみたいと思います。

# アプリの準備
アプリストアの案件管理アプリを追加しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/68b06c8c-b6a7-2337-efaa-b72cfa08b82a.png)

# Console上でAPIを叩いてみる
Windows、Chromeを使っている場合はF12キーを押すとデベロッパーツールが表示されます。
Consoleタブを開き、下記のコードを貼り付けてEnterします。

```js
const body = {
  'app': kintone.app.getId()
};

const graphSetting = await kintone.api(kintone.api.url('/k/v1/app/reports', true), 'GET', body);
graphSetting;
```

するとこんな感じにグラフの設定が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/f6d2ba8a-9b4c-edd3-92be-5f84cd343916.png)


`graphSetting.reports`がグラフの設定となり、

`graphSetting.reports.グラフ名`にそれぞれのグラフの設定が入っているようです。

Console上で

```js
graphSetting.reports.確度別案件比率
```

と入力するとConsoleにはこんな感じに「確度別案件比率グラフ」の設定が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e40a5a64-8f52-1125-ea4b-daa4dfc19cec.png)

# もし同じ名前のグラフがあったら？

ここで疑問が生まれました。
同じ名前のグラフがあったら、`graphSetting.reports.確度別案件比率`のような感じには1つのグラフ設定を取得できないのでは？と。（同じ名前のグラフをつけるようなことは実際ないとは思いますが）

そこで、「確度別案件比率」というグラフをもう一つ追加してみました。
そしてグラフの情報を取得するAPIを叩いてみると・・・。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/92adbf35-9adf-9b14-9995-9b208cbf5006.png)

なるほど、エラー！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/55877ccf-5a0c-4fe7-a32b-3ed1c50a6a35.png)

グラフ名は重複しないように付けないといけませんね。

# まとめ
今回はConsole上でグラフの設定を取得してみました。
次回以降、グラフの設定を取得～からの、更新できるようなアプリを作ってみたいと思います～。
ポイントカードの集計方法

Javaのプログラム初心者向けにポイントカードの集計のプログラミング課題を作りました。

課題の内容を画像で貼ります。

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1055346/4e9670e6-ce62-cd00-f73c-738ef10a4e46.jpeg)

![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1055346/a84a7cce-ef49-0da7-945e-28dc11dd5d99.jpeg)


是非Javaで作ってみてください。今回は例外処理の実装は必要ありません。
R でのパッケージに関するコマンドまとめ

# はじめに
自身の備忘録のために R のパッケージに関するコマンドをまとめた。（忘れればggると出てくるが…。）

# パッケージの追加、使用、削除
下記コマンドの`<packagename>`を必要に応じて書き換えればよい。

```R:
# パッケージの追加
install.packages("<packagename>")

# パッケージの使用
library(<packagename>)

# パッケージの削除
remove.packages("<packagename>")
```

install と remove には""が必要なことに注意する。

# パッケージの確認


```R
# 自身のPCにインストール済みのパッケージ一覧の取得。
library()

# 現在読み込まれてるパッケージ一覧の取得
serach()

# パッケージのバージョン確認
packageVersion("<packagename>")
```

# おわりに
とりあえず使ったコマンドをつらつらと書いていった。必要があれば追記していきたいと思う。
pi picoでmicropython その4

# 概要

picoでmicropythonやってみた。
zundokoやってみた。

# サンプルコード

```
def zundoko():
   import random
   str = ''
   while True:
      sel = random.choice(['zun ', 'doko '])
      str += sel
      if 'zun zun zun zun doko ' in str:
         break
   print(str + ' kiyoshi!')
```
# 実行結果

```
>>> zundoko()
doko zun doko zun zun zun zun zun doko  kiyoshi!
```

以上。
HTMLによる動画のダウンロード禁止について

# 最初に
WEBサーバで動画を配信したいが、ダウンロードはさせたくないという要件
を満たすには。

HTML5のvideoタグによる制御とapacheの設定で実現できたので共有。

調べれば個別に検索に引っ掛りますが、まとまったのがなかったので




### HTMLによる制御

videoタグに下記オプションを追加する。

```
oncontextmenu="return false;　※右クリックからのダウンロードを禁止
controlsList="nodownload"　※ダウンロードオプションを非表示
```

例

```
 <video src="video/test.mp4" oncontextmenu="return false;" controls controlsList="nodownload" preload="auto" width="100%" height="100%"></video>
```

### apacheの設定
直接アクセスを禁止させたいフォルダのパスを記述
これでHTMLによる制御と、直接アクセスによるダウンロードを阻止する。

```
<directory [アクセス禁止フォルダパス]>　※/var/www/html/videoなど
 Require all denied
</Directory>
```
実務でよく使うVueのv-bind:classの使い方4つ

v-bind:classはVueで使えるv-bindディレクティブの一つです。
[公式](https://jp.vuejs.org/v2/guide/class-and-style.html)で紹介されてるものより、個人的には使い勝手がいいなと思う方法など、自分がよく使う4パターンを紹介します。

##1.真偽値に対して複数クラス
例:アクティブの時はテキストを青くして背景をグレーにしたい

```vuejs:sample.vue
<div :class="{'text-blue bg-grey': isActive}"></div>
```

##2.複数の真偽値
例:アクティブの時はテキストを青くして、選ばれている時は背景をグレーにしたい

```vuejs:sample.vue
<div :class="{ 'text-blue' : isActive , 'bg-grey' : isSelected }"></div>
```

##3.式(演算子)を使う
比較演算子や論理演算子を使って真偽値をかえします。

```vuejs:sample.vue
<div :class="{'text-blue':  apple == sale }"></div>
<div :class="{'text-blue': apple > 3}"></div>
<div :class="{'text-blue': apple && banana}"></div>
<div :class="{'text-blue': apple || banana}"></div>
```

##4.三項演算子(条件分岐)
例:アクティブの時はテキストを青くしてそうじゃなかったらテキストを黒くしたい

```vuejs:sample.vue
<div :class="{isActive?'text-blue':'text-black'}"></div>
```
Databricks Power BIコネクタのリリース(GA)

[General Availability \(GA\) of Power BI Connector for Databricks \- The Databricks Blog](https://databricks.com/blog/2021/02/26/announcing-general-availability-ga-of-the-power-bi-connector-for-databricks.html)の翻訳です。

Power BIサービスとPower BI Desktop 2.85.681.0に対応した、[Microsoft Power BI connector for Databricks](https://azure.microsoft.com/en-us/updates/power-bi-connector-for-azure-databricks-is-now-generally-available/)が正式提供(GA)できることに、我々は大変興奮しています。[パブリックプレビュー](https://databricks.com/blog/2020/10/30/announcing-azure-databricks-power-bi-connector-public-preview.html)を通じて、既に我々は多くのお客様が導入したのを知り、全てのお客様に本機能を提供することにしました。最近公開したSQL Analyticsサービスと共に提供されるネイティブのDatabricks Power BIコネクターは、Databricksの利用者がDelta Lakeに直接アクセスしてBIを実施できるファーストクラスの経験を提供します。SQL Analyticsを用いることで、データウェアハウスの性能に加え、従来のデータウェアハウスと比較して4倍のコストパフォーマンスを持つデータレイクの経済性を兼ね備えたマルチクラウドのレイクハウスアーキテクチャを操作することが可能となります。
![](https://databricks.com/wp-content/uploads/2021/02/power-bi-connector-hires.png)

Databricks Power BIコネクタは以下の機能を通じて、シームレスな接続性を提供します：

**Azure Active Directory(Azure AD)及びシングルサインオンのサポート：**Azure Databricksに対してAzure ADの認証情報を用いた接続が可能となります。管理者は認証のために[パーソナルアクセストークン(PAT)](https://docs.microsoft.com/en-us/azure/databricks/dev-tools/api/latest/authentication)を発行する必要はありません。

**シンプルな接続設定：**Databricksコネクタは、最初からPower BIに統合されています。数クリックでDatabricksへの接続設定が完了します。データソースとしてDatabricksを選択し、Databricks特有の接続情報及び認証情報を入力するだけです。すぐにクエリを発行することができます！

**DirectQueryを介したAzure Data Lake Storageへのセキュアかつダイレクトなアクセス：**Power BI DirectQueryを用いることで、Databricksのデータに直接アクセスでき、ユーザーは大規模なデータセットを検索したり可視化することができます。DirectQueryの結果は常に最新であり、Delta Lakeのデータセキュリティ保護機能が適用されます。

**Databricks ODBCを通じた高速な結果取得：**Databricks ODBCドライバーはクエリの遅延を削減し、結果転送速度及びメタデータ取得性能が改善されています。

# Power BIコネクタを利用してみてください

強化されたDatabricks Power BIコネクタは、DatabricksとMicrosoftの継続的なコラボレーションの結果です。[Quickstart Lab](https://dbricks.co/QuickstartLabs)に参加してDatabricksのハンズオンを経験し、Power BIコネクタを通じてDatabrikcsに接続してみてください。
plotlyで画像を保存

# はじめに

plotly を使うと、様々なグラフを描くことができる。今回は plotly にて描画したグラフや表を画像として保存する方法を説明する。実行環境は以下の通り。
- Windows10 Pro
- Anaconda 4.9.2

コマンドライン上で行うものはすべて Anaconda Prompt で実行している。[Plotlyでレポート・論文に使えるグラフを描こう](https://kamino.hatenablog.com/entry/plotly_for_report)を参考にした。
（2021/3/15追記）plotly の現在のバージョンでは orca ではなく Kaleido が推奨されているとコメントでいただいたので、そちらを記事後半に追記。

# 必要なライブラリのインストール

必要に応じて Anaconda にて仮想環境を構築し、以下ライブラリをインストールする。（ python, plotly に関しては省略。）

```
$ conda install pustil
$ conda install -c plotly plotly-orca
```

[psutil](https://github.com/giampaolo/psutil) の説明は以下の通り。（Google翻訳）

> psutil（プロセスおよびシステムユーティリティ）は、 Pythonで実行中のプロセスとシステム使用率（CPU、メモリ、ディスク、ネットワーク、センサー）に関する情報を取得するためのクロスプラットフォームライブラリです。これは、主のために有用であるシステム監視、プロファイリングおよびプロセスのリソース制限や実行中のプロセスの管理を。これは、ps、top、iotop、lsof、netstat、ifconfig、freeなどの従来のUNIXコマンドラインツールによって提供される多くの機能を実装します。psutilは現在、次のプラットフォームをサポートしています。
- Linux
- Windows
- macOS
- FreeBSD, OpenBSD, NetBSD
- Sun Solaris
- AIX

[orca](https://github.com/plotly/orca) の説明は以下の通り。（Google翻訳）

> Orcaは、コマンドラインからplotly.jsグラフ、ダッシュアプ​​リ、ダッシュボードなどのPlotlyの画像とレポートを生成するElectronアプリです。さらに、OrcaはPlotlyのImageServerのバックボーンです。Orcaは、オープンソースのReport CreatorAppの頭字語でもあります。

実際に扱ったライブラリのバージョンは以下。
python == 3.9.2
plotly == 4.14.3
plotly-orca == 1.3.1
psutil == 5.8.0

# 画像を保存

[Figure Factory Tables in Python](https://plotly.com/python/figure-factory-table/) のデータを元に表を作成し、png 形式で保存する。

```python:table.py
import plotly.figure_factory as ff

data_matrix = [['Country', 'Year', 'Population'],
               ['United States', 2000, 282200000],
               ['Canada', 2000, 27790000],
               ['United States', 2005, 295500000],
               ['Canada', 2005, 32310000],
               ['United States', 2010, 309000000],
               ['Canada', 2010, 34000000]]

fig = ff.create_table(data_matrix)
fig.show()
```

ff.create_table を使うと、簡単にきれいな表を作成することができる。編集などは別記事で後日書く。上記で作成した fig を保存する際は以下コードを実行する。

```python:png.py
fig.write_image('table.png')
```

上記コードにて、カレントディレクトリ直下に図が保存される。保存するディレクトリを変えたい場合は `fig.write_image('figure/table.png')` のように、パスまで指定すればよい。

# （2021/3/15追記）Kaleido のインストール

orca ではなく、Kaleido での画像保存を試してみた。[Static Image Export in Python](https://plotly.com/python/static-image-export/) によると、plotly 4.9 以降は kaleido が推奨されている。今回は plotly 4.14.3 を用いているので、orca ではなく Kaleido を使用してみる。以下コマンドでインストール。

```
$ conda install -c conda-forge python-kaleido
```

使い方は基本的には orca と同じで `fig.write_image('table.png')` で実行できる。デフォルトフォーマットや画像サイズなどの設定は以下のように設定できる。

```setting.py
import plotly.io as pio

pio.kaleido.scope.default_format = "jpeg"  # デフォルトは "png"
pio.kaleido.scope.default_width  = 1400    # デフォルトは 700
pio.kaleido.scope.default_height = 1000    # デフォルトは 500
```

詳細は [Static Image Export in Python](https://plotly.com/python/static-image-export/)、[GitHub plotly/Kaleido](https://github.com/plotly/Kaleido) を参照すること。
pi picoでmicropython その3

#概要

picoでmicropythonやってみた。
fizzbuzzやってみた。

#サンプルコード

```
def fizzbuzz():
   i = 1
   while i < 101:
      if i % 15 == 0:
         print("FizzBuzz", end=" ")
      elif i % 3 == 0:
         print("Fizz", end=" ")
      elif i % 5 == 0:
         print("Buzz", end=" ")
      else:
         print(i, end=" ")
      i += 1
   print()
```

以上。
pi picoでmicropython その2

#概要

picoでmicropythonやってみた。
九九やってみた。

#サンプルコード

```
def kuku():
   i = 1
   while i < 10:
      j = 1
      while j < 10:
         print(i * j, end=" ")
         j = j + 1
      print()
      i = i + 1

```

#実行結果

```
>>>
>>>
paste mode; Ctrl-C to cancel, Ctrl-D to finish
=== def kuku():
===    i = 1
===    while i < 10:
===       j = 1
===       while j < 10:
===          print(i * j, end=" ")
===          j = j + 1
===       print()
===       i = i + 1
===
>>> kuku()
1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36
5 10 15 20 25 30 35 40 45
6 12 18 24 30 36 42 48 54
7 14 21 28 35 42 49 56 63
8 16 24 32 40 48 56 64 72
9 18 27 36 45 54 63 72 81
>>> 
```

以上。
JWT を Go で処理するためのパッケージ

Go 言語で JWT (JSON Web Tokens) を処理したい。
以前に書いたコードを見直す機会があって調べたら状況が変化していたので記録に残しておきます。

特に記載がない限り 2021 年 3 月 14 日時点の情報になります。

## 調査対象

- https://github.com/dgrijalva/jwt-go
- https://github.com/square/go-jose
- https://github.com/lestrrat-go/jwx

このうち実際に使ったことがあるのは dgrijalva/jwt-go と square/go-jose です。

## dgrijalva/jwt-go

https://github.com/dgrijalva/jwt-go

最終リリース: [v3.2.0](https://github.com/dgrijalva/jwt-go/releases/tag/v3.2.0) (2018 年 3 月 9 日)

dgrijalva/jwt-go (fork を含む) を使用しているリポジトリの例

- https://github.com/auth0/go-jwt-middleware
- https://github.com/etcd-io/etcd
- https://github.com/go-kit/kit
- https://github.com/ory/hydra

Go で JWT を処理する場合の定番だと思います。
古くからあるパッケージで [GCP 向けの拡張](https://github.com/someone1/gcp-jwt-go) も公開されているので重宝していました。

ただし、2020 年 1 月 7 日を最後にリポジトリは更新されてません。
fork したうえで脆弱性 (CVE-2020-26160) [^1] を修正したリポジトリも公開されておりこちらに切り替えているケースもあるようです。 [^2] [^3]

https://github.com/form3tech-oss/jwt-go

dgrijalva/jwt-go を使用している場合は form3tech-oss/jwt-go に移行したほうがよさそうです。
I/F は変わっていないので import を書き換えるか go.mod の replace を指定すれば移行できるはずです。

(2021 年 9 月 5 日追記) dgrijalva/jwt-go および form3tech-oss/jwt-go のリポジトリはアーカイブ化されました。
両者ともコミュニティによってメンテナンスされている新しいリポジトリである golang-jwt/jwt を案内しています。
golang-jwt/jwt にはセキュリティ修正のほか Ed25519 サポートや go.mod サポートが追加されていますが go.mod で Go 1.15 以上を要求しているため環境によっては使用できないかもしれません。

https://github.com/golang-jwt/jwt

## square/go-jose

https://github.com/square/go-jose

最終リリース: [v2.5.1](https://github.com/square/go-jose/releases/tag/v2.5.1) (2020 年 5 月 1 日)

square/go-jose を使用しているリポジトリの例

- https://github.com/coreos/go-oidc
- https://github.com/docker/hub-tool
- https://github.com/HashiCorp/vault
- https://github.com/kubernetes/kubernetes
- https://github.com/ory/hydra

Ed25519 や JWK (JSON Web Key) を利用したくて見つけました。

ただし、現時点では master からコードがすべて削除されています。 [^4] [^5]
v3 を開発するためにリポジトリを https://github.com/go-jose/go-jose に移行したようですがこちらも更新されていないようです。

※ master は v3 を開発していたブランチですので v2 を利用している場合は影響を受けません。

## lestrrat-go/jwx

https://github.com/lestrrat-go/jwx

最終リリース: [v1.1.5](https://github.com/lestrrat-go/jwx/releases/tag/v1.1.5) (2021 年 3 月 12 日)

dgrijalva/jwt-go や square/go-jose の Issue コメントで紹介されていました。
機能も豊富で継続的にメンテナンスされているようですが Ed25519 サポートは実験的という扱いになります。
go.mod で Go 1.15 以上を要求しているため環境によっては使用できないかもしれません。

## まとめにならないまとめ

メンテナンスされなくなったことに (自分が) 全く気が付いていなかったことに驚きました。
依存パッケージ更新は Dependabot の力を借りたりしているのですがそもそも更新されていないので気が付くこともなく。

問題なく動いているように見えてもたまに既存処理を見直すことは重要かもしれません。

[^1]: https://github.com/dgrijalva/jwt-go/issues/428
[^2]: https://github.com/auth0/go-jwt-middleware/pull/69
[^3]: https://github.com/etcd-io/etcd/pull/12580
[^4]: https://github.com/square/go-jose/pull/334
[^5]: https://github.com/square/go-jose/issues/342
M1 MacでLIFFとReactを使う際の環境構築

# 初めに
2021年3月の現在、[Open Hack U 2020 Online Vol.4](https://hacku.connpass.com/event/201528/)に挑戦しています。
チームの制作物で、[LIFF (LINE Front-end Framework)](https://developers.line.biz/ja/docs/liff/overview/)を使ったものを作成することにしました。
M1 Macbook AirでLIFFを使うのは、初めてです。
そこで、環境構築などで詰まったところを書いておき、再度M１ MacでLIFFを使うときにつまらないようにするための備忘録です。


# 本記事の目的
本記事は、ハッカソンなどで、M1 Macbookを使う人のために書きました。
色々なアプリを作る時の候補として、LIFFを使ったアプリ開発に挑戦してみては、いかがでしょうか？

# 詰まったところ
参考記事1を進めていたところ、`yarn`がうまく使えないことがわかりました。
そのため、現時点でのM1チップのMacでは、`yarn`を使うのをやめましょう。

# 最終的なコード
[最終的に作成したアプリ](https://github.com/YUMA-NAGAO/StudyReact/tree/main/LIFF_React/liff-sample)は、こちらです。
メッセージを送信し、GoogleをChrome（デフォルトに設定してあるアプリ）で開き、友達に
メッセージを送ることができるようにしています。

# 進める中でインストールしたアプリ
https://dashboard.ngrok.com/get-started/setup
[デプロイ先](https://vercel.com/new)

# 作成したアプリ
+![IMG_2395.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559163/5a944a90-f109-63ff-d332-bae8df990b84.gif)


# 参考記事
1. [React + TypeScriptを使ってLIFFを作る](https://dev.to/yutagoto/react-typescript-liff-1kpk)
1. [【M1 Mac】React開発環境の構築](https://omathin.com/2021/01/31/react-getstart/)
1. [nodebrewの「Warning: Failed to create the file」への対処](
https://sysrigar.com/2019/12/11/nodebrewの「warning-failed-to-create-the-file」への対処/)
1. [npmとyarnのコマンド早見表](https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8)
2. [MacにngrokをインストールしてローカルWebサーバを外から接続できるようにする](https://qiita.com/taketakekaho/items/b52a7ff840ad970a7a06)
Apple Silicon M1: conda-forgeのPyTorch (osx-arm64)は遅いぞ。ビルドしようぜ！

Update: 2021-12-13 macOS monterey, pytorch0.10.0, torchvision0.11.1

## Very slowly
なんでこんなに差がでるんだろ？？

- https://github.com/pytorch/examples/tree/master/mnist_hogwild

```
time python main.py --num-processes 2 --epoch 2
（あまりにも遅いのでepoch 2で計測）
```

|             | user | system | cpu | total |
| --- | --:| --: | --: | --: |
| build       |    42.40s|    7.50s| 258%| 19.270 |
| conda-forge |53396.66s| 1993.15s| 929%| 1:39:20.09 |



これは使い物にならないレベル。自分でビルドしようぜ！！

## Environment

- macOS Monterey 12.0.1 (Apple Silicon M1 Pro MacBook Pro)
- [Miniforge3](https://github.com/conda-forge/miniforge)

```
conda install numpy matplotlib cython pandas scipy scikit-learn
```


## PyTorch v0.10.0

```
conda install typing-extensions pyyaml

git clone https://github.com/pytorch/pytorch
cd pytorch
git checkout v1.10.0
git submodule update --init --recursive --depth 1

python setup.py bdist_wheel
pip install bdist/torch-1.10.0a0+git36449ea-cp39-cp39-macosx_12_0_arm64.whl
```

## torchvison v0.11.1

```
git clone https://github.com/pytorch/vision.git
cd torchvion
git checkout v0.11.1

python setup.py bdist_wheel
pip install dist/torchvision-0.11.0a0+fa347eb-cp39-cp39-macosx_11_0_arm64.whl
```
## Note

ということでIntelと比較。M1速いぜ！

```
time python main.py --num-processes 4 --epoch 20
```

|           | user | system | cpu | total |
| --- | --: | --: | --: | --: |
| MacBook Air 2020 / Apple Silicon M1 | 465.06s | 79.23s | 494% | 1:50.05 |
| Mac mini 2019 / Intel Core i5 | 1071.34s | 184.12s | 560% |3:44.01 |
PHPのPDOでMySQLに接続する

#環境
・macOS BigSur (11.2.2)
・PHP (7.4.12)
・MAMP (6.3)
・MySQL (5.7.32)

#前提条件
・MAMPのphpMyAdminでデータベース・テーブルを作成してあること
・データベースに接続するためのユーザーを作成してあること

#PDOとは
PHPからMySQLに接続するために必要なオブジェクトのこと
※PDOクラスのインスタンスを生成することにより、データベースサーバーとの接続が確率される

#DB接続手順
```
//事前準備
$dsn = 'mysql:host=localhost;dbname=データベース名;charset=utf8';
$user = 'ユーザー名';
$pass = 'パスワード';
```

変数に対象の「データベース情報」「DB接続するユーザー情報」を設定

```
//DB接続
$dbh = new PDO($dsn,$user,$pass);
```
設定した変数を引数に入れて、PDOのオブジェクト生成

#データを取得する
指定した列名のデータを全て取り出す例

※上記で生成したPDOオブジェクトを使用する

```
//SELECT文
$select_sql = 'SELECT * FROM テーブル名';
$stmt = $dbh->query($select_sql);
foreach($stmt as $value){
  echo $value['カラム名'];
}
```

#データを登録する
入力フォームなどで入力された値を、プリペアドステートメントを使用してDBに登録する例

※プリペアドステートメントとは、SQL文を最初に用意しておいて、その後はクエリ内のパラメータの値だけを変更してクエリを実行できる機能のこと

```
//INSERT文
$insert_sql = 'INSERT INTO テーブル名(カラム名) VALUES(:name)';
$stmt = $dbh->prepare($insert_sql);
$params = array(':name'=>$_POST['フォームに入力された値']);
$stmt->execute($params);
```

カラム名にデータ登録したいカラム名を指定する
VALUESを「:name」として抽象化し、後に$_POSTで値を設定する（※nameの部分は任意の文字で良い）
prepareメソッドでSQL文を実行する準備をする
executeメソッドでプリペアドステーメントを実行する

※正式な値が入るまで一時的に場所を確保しておくために入れておく値のことをプレースホルダという
（今回だと「:name」の部分がプレースホルダ）
※プレースホルダに値を割り当てることをバインドという

#データを削除する
指定された番号のIDを持つDBの値を削除する例

```
//DELETE文
$delete_sql = 'DELETE FROM テーブル名 WHERE idが入ってるカラム名 = :id';
$stmt = $dbh->prepare($delete_sql);
$params = array('id'=>$_POST['指定された番号']);
$stmt->execute($params);
```

上記と同様、プリペアドステーメントを使用

#データを変更する
指定された番号のIDを持つデータを対象に、指定されたカラム名の値を更新する例

```
//UPDATE文
$update_sql = 'UPDATE テーブル名 SET 更新するデータのカラム名 = :name WHERE 更新対象とするidが入ってるカラム名 = :id';
$stmt = $dbh->prepare($update_sql);
$params = array('name'=>$_POST['更新するデータ'],'id'=>$_POST['指定された番号']);
$stmt->execute($params);
```

上記と同様、プリペアドステーメントを使用

#try~catchを使ったエラーハンドリング（例外処理）
DB接続の成功/失敗を出力する例

```
try{
  $dsn = 'mysql:host=localhost;dbname=データベース名;charset=utf8';
　$user = 'ユーザー名';
  $pass = 'パスワード';
  $dbh = new PDO($dsn,$user,$pass);
  echo 'DB接続成功'
}catch(PDOException $e) {
  echo 'DB接続エラー';
}
```

（例外処理についての補足）
プログラム実行中に発生したエラーのことを例外という
例外が発生すると、プログラムが異常終了する
システム的に異常終了はさせたくないから、例外を検知して、例外が発生した場合に行う処理を用意する
この一連の処理のことを例外処理という
結果、エラーは発生しているが、プログラム自体は正常に動作したという状況を作ることができる
DBの接続が失敗したとき、プログラムが異常終了する
システム的に異常終了はさせたくないから、 DBの接続処理に対してエラーハンドリングする必要がある
pi picoでmicropython

#概要

picoでmicropythonやってみた。
ターミナル自作してみた。

#環境

windows10 64bit
micropython v1.14

#自作したターミナル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/80ed109a-f665-bf30-bb2e-c563d86618a2.png)

#コードのコピペ、実行。

ctrl+e して　ctrl+v して　ctrl+d　する。

#実行中のプログラムの中断

ターミナル起動時に ctrl+c　してる。

#サンプルコード

マルチタスク。

```
import time
import _thread
def task(n, delay):
   led = machine.Pin(25, machine.Pin.OUT)
   for i in range(n):
      led.high()
      time.sleep(delay)
      led.low()
      time.sleep(delay)
   print('done')

_thread.start_new_thread(task, (10, 0.5))


```


以上。
JavaScript: いつものAlertを簡単に、少しだけおしゃれにするSweet Alert、そしてSweetAlert2

## Sweet Alert

流行っているらしいのでやってみた。
[10 Trending projects on GitHub for web developers - 12th March 2021](https://iainfreestone.hashnode.dev/10-trending-projects-on-github-for-web-developers-12th-march-2021)


### GitHub

https://github.com/t4t5/sweetalert


https://sweetalert.js.org/


その後、Sweetalert2 を見つけたので、追記。// 2021/04/05

https://sweetalert2.github.io/



### お試し
<p class="codepen" data-height="500" data-theme-id="light" data-default-tab="html,result" data-user="e99h2121" data-slug-hash="VwmgBYm" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="SweetAlert">
  <span>See the Pen <a href="https://codepen.io/e99h2121/pen/VwmgBYm">
  SweetAlert</a> by YAMADA Nobuko (<a href="https://codepen.io/e99h2121">@e99h2121</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



<p class="codepen" data-height="700" data-theme-id="light" data-default-tab="js,result" data-user="e99h2121" data-slug-hash="bGgRLjR" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="SweetAlert2">
  <span>See the Pen <a href="https://codepen.io/e99h2121/pen/bGgRLjR">
  SweetAlert2</a> by YAMADA Nobuko (<a href="https://codepen.io/e99h2121">@e99h2121</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

```html
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<button type=“button” onclick="basicSample()">やさしいアラート</button>

<button type=“button” onclick="amazingSample()">すばらしいアラート</button>
```
```js
function basicSample(){
  swal("きをつけてね。");
}

function amazingSample() {
  swal({
    title: "すばらしい！！",
    text: "You clicked the button!",
    icon: "success",
　});
}
```

自分用に使いたいときが来たらと思うメモ。
React 入門 (#1) ～DOM操作とReactライブラリ導入～

#この記事では、Reactの基礎について学んでいきます。
![2021-03-14_12h56_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/40651315-1af6-d269-2bbc-5288c5d5adec.png)


**ソースコード**と**ブラウザ表示**を中心に進めていきます。
ソースコードには、そのコードが何を表しているのかを**話し口調（下の赤枠）**で書いているので
そこに注目して読むとより理解が深まると思います。

例）
![2021-03-14_13h23_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/850f155f-8b95-f386-1230-8a45282c2671.png)


楽しんで学習をすすめていきましょう。



#１，JavaScriptを記述してDOMの操作を行ってみます。
基本的なHTMLのソースコードです。
![code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/8930bd23-ff4e-bf1f-55de-9d43e3c069ed.png)

index.htmlにリンクしているindex.js(JavaScript)です。
![code2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/96de1826-b3e1-cd18-8d57-7d50be300412.png)

#２，実際に上のソースコードの動きを確認してみましょう。
![2021-03-14_12h37_47.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/f6d09049-c758-0d3c-9fe7-ee65f5f9c51a.gif)

とてもシンプルな動きですね。
これが、JavaScript によるDOM操作になります。

#３，Reactライブラリの導入
書き換えた**index.html**のソースコード
![code4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/8ba606e2-d8ef-991e-7df3-576122be5a71.png)


https://ja.reactjs.org/docs/add-react-to-a-website.html

上のサイトから、追記したソースコードをコピーしてください。
もしくは、こちらをコピーしてください。

```javascript:index.html
  //追記 ReactライブラリとReactDOMライブラリ
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
```

Reactを使うには、
**Reactライブラリ**と**ReactDOMライブラリ**を使います。
これで、準備完了です。

**index.js**ファイルに移動して次のコードを記述します。
![code5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/f78f2fed-80aa-eb5a-17bb-ef0f8f2d96c6.png)

#４，ブラウザ表示
index.htmlにはdivタグしかないですが、ちゃんと表示されていますね。
![2021-03-14_13h43_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/f106f9c8-aafd-6f93-495e-10e6aec3f76d.png)

#次回は、
今回は、Reactの機能の部分を簡単に紹介しました。
次回は、Reactを学ぶうえで大事な**Babel**と**JSX**に触れたいと思います。
[リンク](https://qiita.com/iwasaki-hub/items/41e8c6ef5bcaafb10d85)
UbuntuからのWindowsアプリの起動方法の設定周り[未完]

# はじめに
Ubuntuデビューしてwineを初めて知りました。
便利ですねwine

[こちら](https://qiita.com/yakitatata/items/12a6e1fba33cdaa814d9)の記事を書いている時に、サクラエディタの起動方法周りをぐにょぐにょしていたら、ボリュームが大きくなったのでこの記事に至りました。

そもそもwineってなんやねん。という人や
wineの入れ方教えてや
ってかたは先にこちらの記事をご覧ください。

https://qiita.com/yakitatata/items/12a6e1fba33cdaa814d9

この記事ではあくまで起動方法の設定だけにスコープを当てています。
Wine、サクラエディタは入っている前提です。

Ubuntu触って2日目なので至らない点もある思いますがご容赦ください。

## ランチャーの整理
Ubuntuのランチャーのアイコンはここにあります。
~/.local/share/applications/
wineではそこからさらにwineと深くなっているようです。

```shell:ランチャーの整理
cd ~/.local/share/applications/wine/Programs/sakura
# この2個のアイコンいらない
rm 設定フォルダ.desktop
rm 'サクラエディタ をアンインストールする.desktop'
# 日本語だるい
mv サクラエディタ.desktop sakura_editor.desktop
sed -i s/Name=サクラエディタ/Name=sakura_editor/g sakura_editor.desktop
```
GNomeをリフレッシュします。
Alt + F2 して 「r」を入れて実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238561/42dd6b62-786c-f971-e067-c6e9df3de60e.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238561/77f67b9a-add2-ffdf-2cc3-f5e330ae294f.png)
アクティビティからアンインストーラーが消え、
今まで「サクラ」と日本語で打つ必要がありましたが「sakura」で出るようになりました。


余談ですが.desktopの中を見ると
実行にはWindowsのスタートメニューのリンクを呼んでいるようです。なんで本体呼ばないのかな？

## ファイルの関連付け
GUIでファイルをダブルクリック時のプログラムを変えます。
でも「別のアプリケーションで開く」で出てこないんですよね。

そこで[こちら](https://www.javaer101.com/ja/article/78230107.html)の記事を参考に
mimeopen -d fileとやらでやってみます。
デフォルトの起動方法を変更できて、カスタムでコマンドが書けるとのこと。

wine notepad　でメモ帳が起動するので
wine sakura とかで起動できたらいけるかなと浅はかな考えです。

wine [プログラム名]はどうやらwindowsのパス(※)が通っている物が呼出されるようです。
wine cmd として
windowsコンソール上でnotepad とするのと同義だと思います。

※wine hogeとかするとsystem32にexeが無いと怒られますが、
notepadをsystem32から消しても起動する事を確かめました。
(notepadは他の場所にもある)


### wine sakura で起動させる

wine cmdしてwindowsのプロンプトに入りパスを見てみます

```dosbatch:windowsコンソール
echo %PATH%
C:\windows\system32;C:\windows;C:\windows\system32\wbem;C:\windows\system32\WindowsPowershell\v1.0
```

sakuraがあるところにパスを通します。
setコマンドは一時的な話なので使えないからレジストリエディタを起動します。

```shell:レジストリエディタの起動
wine regedit
```
windowsのコンソールに入ってる状態ならregeditだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238561/98bfaa19-ba1c-ed5e-b271-638f26080ddd.png)

HKEY_LOCAL_MACHINE \SYSTEM\CurrentControlSet \Control \Session Manager \Environment
のPATHの末尾に以下を追加します。
;C:\Program Files (x86)\sakura;

wine cmdして再度パスを見てみます。

```dosbatch:windowsコンソール
echo %PATH%
C:\windows\system32;C:\windows;C:\windows\system32\wbem;C:\windows\system32\WindowsPowershell\v1.0;C
:\Program Files (x86)\sakura;
```
windowsのコンソールから sakura でサクラエディタが起動できるようになりました。

wine sakuraしてみます。

無事起動します。

### mimeopen -d file してみる

```shell:mimeopen
~$ mimeopen -d hoge.txt 
Please choose a default application for files of type text/plain

	1) Vim  (vim)
	2) A Wine application  (wine-extension-txt)
	3) GVim  (gvim)
	4) Text Editor  (org.gnome.gedit)
	5) GitKraken  (gitkraken_gitkraken)
	6) Share with Skype  (skype_skypeforlinux-share)
	7) Other...

use application #7
use command: wine sakura
Opening "hoge.txt" with wine  (text/plain)
```
無事サクラが立ち上がりました。


さて、これでGUIからダブルクリックでsakuraで開くかというと・・
開きませんでしたｗ
「別のアプリケーションで開く」の項目にも出てきません。

どうやらmimeopen -d はCUIでの話みたいです。
まあCUIから開けるようになったのは単純に嬉しい。



中途半端ですが一旦断念します。
「別のアプリケーションで開く」にwineのアプリを入れたい。それだけの話。教えて偉い人＞＜
VS Code の Rest Client で HTTP リクエストがやりやすい

## 便利プラグイン: Rest Client 

[VC Code プラグイン - Rest Client に関しては、こちら](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) で確認できます。

どう便利かは、下のコードで確認できますが、こちらの記事でもまとめられています。

https://www.superbusinessman.biz/vscode-plugin-http-request/

このプラグインを知ってから、だいぶ確認作業がはかどるようになりました。

## コード

JSON CRUD といえば、下記のことを確認する必要があります。

| Endpoint | Method | Description |
|---|---|---|
| /product | GET | 一覧を取得する |
| /product | POST |  データを追加 |
| /product/<:int> | GET | 該当するデータを __取得__ |
| /product/<:int> | PUT | 該当するデータを __更新__ |
| /product/<:int> | DELETE | 該当するデータを __削除__ |

以下で、このテーブルの HTTP リクエストを確認できます。

```
@hostname = localhost
@port = 5000
@host = {{hostname}}:{{port}}
@path = product


GET http://{{host}}/{{path}}/

###

POST http://{{host}}/{{path}}/
Content-Type: application/json

{
    "name": "2",
    "description": "123",
    "price": 123.2,
    "qty": 11
}

###

GET http://{{host}}/{{path}}/1

###

PUT http://{{host}}/{{path}}/1
Content-Type: application/json

{
    "name": "12345",
    "price": 110
}

### 

DELETE http://{{host}}/{{path}}/1
```
SpringBoot2とPostgreSQLで講座受講管理アプリを作った。

##概要
SpringBoot2とPostgreSQLを使って「講座受講管理アプリ」を作りました。
会社の研修の管理や研修の申し込みをする用途を想定しています。
業務要件は[「平成30年度秋期システムアーキテクト試験午後Ⅰ」](https://www.jitec.ipa.go.jp/1_04hanni_sukiru/mondai_kaitou_2018h30.html#30aki)を参考にして、機能の実装や画面デザインは[「Spring Boot 2 入門: 基礎から実演まで Kindle」](https://www.amazon.co.jp/Spring-Boot-2-%E5%85%A5%E9%96%80-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AE%9F%E6%BC%94%E3%81%BE%E3%81%A7-ebook/dp/B0893LQ5KY)を参考にしました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/793436/45e401d9-3505-03f5-920c-7ba80dd61126.png" width=70%>

###Github
https://github.com/AtsushiKudo/lesson-manager

###アプリのurl
http://54.156.83.213:8080/
社員コード「12121212」
パスワード「12121212」
一般ユーザーでログインしてください。
管理者ユーザーに比べ、一般ユーザーは機能の制限がされています。
管理者ユーザーの機能は後の章[「実行イメージ」](https://qiita.com/AtsushiKudo/items/4c48e1d60b634a4799ca#%E5%AE%9F%E8%A1%8C%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8)を確認してください。

##環境
・eclipse
・Java8
・PostgreSQL12
・Maven
・SpringBoot2.4.3

##設計要点

###要求
顧客の会社では社員の研修制度を設けている。
社員の研修の受講状況を把握するために、「受講管理システム」を導入する。
社員は研修の受講の登録をして、受講履歴を見られるようにする。

###ユースケース図
![要件定義 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/793436/38233b38-6559-2c80-076a-33de8acc3ebe.jpeg)

###ER図

![er (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/793436/281397e0-1ed2-2fbb-92fa-af36ffeeb330.jpeg)

##実装機能一覧
・認証機能、認可機能
・入力バリデーション機能
・JavaScript(JQuery)による動的フォーム
・ページネーション機能


##実行イメージ
管理者の機能を貼ります。

###講座マスタ登録
講座名属性に文字列をセットして、データベースにレコードを登録します。
![スクリーンショット 2021-03-15 5.18.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/793436/97d098c6-d35c-6418-f63d-27aa6c8af2f7.png)
###開催講座登録
講座マスタの中から、日付を指定して実際に開催する研修を登録します。
講座マスタIDと開催回で一意制を保証しています。
![スクリーンショット 2021-03-15 5.19.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/793436/068313d6-acb8-d752-4ad2-8804fc9f4534.png)
任意の数の日付を入力するために、JavaScript(JQuery)を使ってフォームを増減させられます。
これにより、実際の研修と日付の一対多の関係を実現しています。
![スクリーンショット 2021-03-15 5.22.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/793436/7257ecf2-3209-33a6-1c8d-06e431876c13.png)

###参加者一覧表示
![スクリーンショット 2021-03-15 5.23.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/793436/318c75d0-b689-9b2c-42f3-eb0bc44c46b7.png)
![スクリーンショット 2021-03-15 5.25.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/793436/52497620-62b3-16d5-5477-86dc7824a880.png)



##課題
###機能
・メール送信機能
###インフラ
・https化
Kotlinで実装したGitHubAppのサンプル

https://github.com/KamikazeZirou/github-app-sample-kotlin

- quick-start
  - GitHubAppの公式サンプルをKotlinで実装したもの。
  - Issueが作られたとき、所定のラベルを付与する。
- authorize-users
  - GitHub Appからユーザの代わりにIssueを投稿する。
(CentOS7)yumコマンドのメモ書き

### CeotOS7でyum updateした時のマイナーバージョンアップ

自分のローカル環境のCentOS7（Vagrant）をyum updateしたのですが、マイナーバージョンのアップデートもされるのですね。その時のメモです。

##### yum update実行前

```
$ cat /etc/redhat-release 
CentOS Linux release 7.1.1503 (Core) 
```

##### yum update実行後

```
$ cat /etc/redhat-release 
CentOS Linux release 7.9.2009 (Core)
```

本番環境でyum updateする時は気をつけないといけないですね。
最低でも、バックアップをとってから実行しないとダメですね、当たり前ですが。

### yumコマンドの過去の実行履歴を確認したい時

yum historyでできる

```
$ sudo yum history
〜
```
Githubサブアカウントを操作する時に混乱するのやめたい

### まえふり
どうも八流エンジニアです。
最近githubのサブアカウントでpushすることがあったんですが、
死ぬほど詰まったので、備忘録がわりにQiitaを汚すことにします。

## Githubサブアカウントの設定
### 参考資料：Githubサブアカウントの作成
https://dackdive.hateblo.jp/entry/2015/10/12/210547

参考URLにもありますが手順は以下です。

1. GitHubアカウント作成
1. 鍵作る（ssh-keygen）
1. `~/.ssh/config`を編集
1. ターミナルの対象リポジトリ配下で操作
    1. `git init` + `git add * `+ `git commit -m "" `
    1. `git clone` + `git remote add ` 
        1. GitHubのリポジトリのクローンから`https`のurlをコピー（sshよりhttpsの方が楽） 
    1. `git config user.name` + `git config user.email`
    1. `git push origin master`
    1. `git config --global credential.helper osxkeychain` 
        1. macのキーチェーンに保存してパスワードの催促をなくすらしい。やり得！


### 参考資料:リポジトリの公開範囲の修正
https://qiita.com/HyunwookPark/items/1d24972dd71612eb81c9

### あとがき
実はこれ以外にも色々な記事見て、試して、奔走したんですが、
結局この２つの記事だけでよかったです。

開発でもそうですけど、世の中情報が多すぎて、
欲しい回答にマッチせず、調査に時間かかりますよね。

結局は時間かけてtry/errorして自分メモが一番
インターネット不便ですわ:japanese_goblin:

クローンを`ssh`ではなく`https`でやる理由ですが、
メインとサブのアカウントが共に`ssh`の場合、pushがうまくいかないというのがあるらしく、
色々と設定頑張ればそれも解決できるらいいのですが、
そんなことで頑張りたくないので`https`でやりました。

コスト小さく成果をあげるの大事ですよね:sunglasses:
以上！！！
Laravelの学習をしてウェブアプリを作ったのでやったことまとめ

##制作アプリについて

##アプリ概要
インスタ風の`文字投稿専用SNS`
![スクリーンショット 2021-03-15 2.52.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1009317/2f462fa8-587b-ea47-5994-c39af78e07a9.png)


会員登録、ログイン、プロフィール編集
投稿時画像加工、投稿・編集・削除

<b>現在の不具合状況について</b>
・アップロード画像が2MBを超えるものの投稿ができない
・投稿した画像が横向きに反転してしまう


##作った経緯と目的
####・転職時に必要なため
####・自分自身のあったらいいなをアプリ化

1つ目。自分自身何かエンジニアとしての能力証明ができる術を持っていなかったので、転職時のポートフォリオとしてのスキル証明用になればと思い制作
2つ目。自分が必要としていることは誰かもまた必要としているのかなと思い「自分自身の`あったらいいな`」というものを実現させた。
具体的には、
<b>「○○って字を綺麗に書きたいけど検索しても自分の気に入る字体がみつからない」
「参考になる字体を検索して探したい」</b>
という課題の解消させた。
イメージとしては、お手本の字をただ真似て書くのではなく、自分の書きたい文字について探してからお手本にして書く。
プログラミング学習するときに、課題で出されたものを作るのではなく、自分の作りたいものを調べながら作るという感じです。


##開発期間
Laravel の基礎学習期間二週間とアプリ開発に二週間ほど

##ER図
カテゴリー機能はまだ追加していないので今の所お飾りです。
![スクリーンショット 2021-03-11 8.16.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1009317/bdc0bdb2-0297-810c-6465-d7680387557b.png)


##開発環境
・言語：PHP7, Bootstrap, HTML, CSS(Sass)
・フレームワーク：Laravel8
・DB：SQLite→postgreSQL
・環境：ローカル環境(MacOS), VSCode
・インフラ：AWS S3, heroku

##主な機能
・CRUD
・会員登録、ログイン、ログアウト
・画像アップロード
・DBリレーション
・検索機能
・マイページ
・ペジネーション
・画像加工
・バリデーション


##追加できたらいいもの
・2枚以上の画像投稿
・タグ機能
・お気に入り
・JavaScriptでのデザイン、操作
勉強中であり多言語の知識が必要で時間がかかりそうなため一時保留
画像加工は強制的にしているので何かしらの形で修正したい

##感想
簡単に手書きで欲しい機能、デザイン、DB設計などを考えてから始めたものの
途中途中であれもいいかもこれもいいかもなんてことを思いよく脱線したので、一番初めにしっかりと考えてからやれたらもっと早く作り終えたと思う。
でもその中で何が必要で何があったら便利で何がいらない機能なのかなどひとつひとつ客観的に物事を考えて自分自身で試行錯誤するところは楽しかったし面白かったです。
エンジニアの挫折率が高い所以の一つに、エラーや不具合があると思うけど、この模索している時がなんだかんだ一番面白く、丸1日動かなかったエラーが解消されたときはとても気持ちが良かったです。
GitHubにコードあげ忘れることが多かったのでもう少し意識してできたら良かった。


##その他メモ
フロントエンド側のデザインUI/IXに関しては最低限に収めてバックグラウンドの方に重きを置いていたので、フロントエンド側にももう少し手を加えて改善したい。
GitHubの使い方、DB操作、他言語、インフラなど知って行くたびに自分の知らないことが多いのでこれからも少しずつ学習していきたい。
Rsyncのログの日本語が\#123のような形式になる

QnapのNAS(TS-410)にSSHでアクセスを行いrsyncコマンドを実行したところログの日本語の部分が\\#123のような形式となった
以下のオプションをつけることで解決できる

_–8-bit-output_

ロケールが正しく判別されていないのだと思われる。
TS-410のサポートが切れDebianを入れてしまったので検証ができない・・・
二重ハッシュ

ハッシュから特定の値を取得する場合は、その値に対応するキーを指定します。以下の書き方で取得ができる。

```
ハッシュ[取得したい値のキー]
```
また、二重ハッシュから特定の値を取得する場合は、取得したい値のキーまで連続して指定すると取得できる。

```
ハッシュ[取得したい値のキー][取得したい値のキー]
```
AWSのEBSスナップショットの説明に「from」記述がなくなった件について

## 何が起こった？
全くの偶然で、AWSのEBSスナップショットに関する一つの仕様変更に気づきました。

EC2インスタンスからAMIを作成する際に、AMIにアタッチされるスナップショットも同時に生成されます。そして下記スクリーンショットが示しているように、当該スナップショットの説明については、今まで `from vol-xxxxxxxx` の文言が記載されていたところ、いつの間にかこの文言が消えてしまいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779499/1963e6aa-edda-c985-c3ee-11a39581e70a.png)

ちなみに、2021/3/15現在、私が持っている2つのAWSアカウントにて検証したところ、両方ともこの事象が発生していることを確認できました。

## 何がいけないの？
一見どうでもいい仕様変更になりますが、場合によって結構大きな問題を引き起こす可能性があります。

実は、私が管理しているAWSアカウントで、下記の記事を参考し、AMIを登録解除するときに、そのAMIにアタッチしているスナップショットも自動的に削除する機構を用意しております。
[AMI登録解除時の、スナップショット自動削除を設定してみた](https://bcblog.sios.jp/ak_auto_delete_snapshot_and_ami/)

この機構におけるLambda関数の一部として、以下のコードが実装されています。

```python:sample.py
# 削除対象のスナップショットを取得
response = client.describe_snapshots(
        Filters=[
            { 'Name': 'description',
              'Values': [ 'Created by CreateImage(*) for ' + image_id + ' from *',
               ]
            }
         ]
    )
```

つまり、 ` from *` がdescriptionの値として含まれていることがフィルター条件になっていますが、今回の仕様変更によって、 **本来抽出できるはずのスナップショットが抽出できなくなります** 。その結果、気づいていない間に不要なスナップショットがどんどん溜まってしまって、無駄な料金が発生してしまいます。

## じゃあどうすれば良いの？
フィルター条件を下記のように修正し、 `from` の記述を除外します。

```python:sample.py
'Created by CreateImage(*) for ' + imageID + '*'
```

## 最後に
こちらのAWSアカウントにおけるスナップショットの蓄積状況から見ると、この事象はおおよそ2021年2月中旬頃から発生した模様です。

正直この事象はAWS側が意図した仕様変更なのか単純な不具合なのか分からず、ググっても関連する記事が全く見つかりませんでした。

ただ、ものすごく軽微な変更であっても、今回みたいに余剰コストの発生に直結する可能性もあるので、似たような方法でスナップショットの抽出を行っている方は、今一度動作確認をしてみましょう。
KMMサンプル作ってみた

## （前提）以前の記事へのアンサー的なものです。
https://qiita.com/tomotakasg/items/15e845ceb90ed71efc1f

こんな記事を書いて
「転職したいなら土日でサンプルアプリ作れや！！！」
と言ったものの、自分自身で何もやらないのはどうなの？と思い、
土日を使って今からサンプルアプリ作ります（現在時刻2021/03/13(土曜） 26:00）  

土曜日ってさー、いきなりやる気出ないよね？俺は出ない
・・・やっていきます

## 目的みたいな何か

### what's KMM
デバイスのアプリ開発界隈で話題の
 > Kotlin Multiplatform Mobile

の略です。
iOS、Android開発で共通ロジック持てる。素敵。

### なんでそんなことするの？
* KMMに興味があった
    * Flutter個人でやってていいところと悪いところはかなり見えた
        * Dartがクソ
        * providerがわかりづらい
            * アーキテクチャとしてはわかるんだけど、なんか書きづらい
        * レイアウトがandroid,iOS一緒になってしまう
            * シンプルなアプリや、デザインの方向性をデザイナーに一任してるなら別
    * KMMは最近流行りのマルチモジュールだし現場はともかく自分でマルチモジュールやってみたい気もしていた
    * アルファ版だけどKotlinだって0.9から触ってたし適当に英文読めばいいんでしょ？（ざる見積もり）
* （転職先に）魅せる材料にしたい
    * 転職用githubに何もない状態なのが辛い
    * 以前qiitaで転職促す記事書いたため
* 職場のみんなにドヤれる可能性
    * 今の職場は関心はあれど誰も触っていない
    * 自社に関してはそもそもAndroidエンジニアがいない:blush:
    * １分でいいからイキりたい
* エンジニアは流行り物好きです
    * 波に乗れ


### 今回得ようとしているもの
* androidマルチモジュールの雰囲気
* KMMのダメなところ
* KMMの注意点

KMMの良いところを得ようとしないのは、
調べれば利点がわかるためです。

本当はKMMやりながら、
更にモジュール分割進められるかとか考えたかったけど時間の兼ね合いでやめました。


## やってみた結果

https://github.com/tomotakasg/kmmSample

android側でしか動作確認してません。


### KMMのダメなところ
アルファ版ですし、半日くらいしかやってないですが思うことを書きます。

* firebaseなどの設定がうまくいかないらしい
    * googleさんとjetbrainさんの連携を信じる？でもflutterやってるしな・・・
* androidで使用しているライブラリがなんでも使えるわけではなさそう
    * とりあえず、通信は`ktor`diは`kodein`あたりになりそう
* androidモジュールからsharedのモジュールにアクセスする際、参照できないから開発しづらい
    * 昨今の開発に慣れている身としては、IDEからのサポートないのが辛い
* androidStudioが完全にサポートできていない
    * IDE上はエラーになっているが、普通に実行できたりする。
    * importが自動でされない :cry: 
        * 外部ライブラリが多いから本当にしんどい
    * ktorとか使ったことない通信ライブラリをIDEサポートなしで始めるのはキツイ
* `actual`と`expect`がわかりづらい
    * sharedの中でもOSごとの差分が出そうな時とかに、使って欲しいのかな？
    

#### エラー出るけど実行できるよ
![スクリーンショット 2021-03-15 1.51.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1133878/6fb38444-3e66-621f-da18-753eafaaf136.png)


### まとめ
土日使ってサンプルアプリ作って、得たいものはある程度得られました。
サンプル作る前からKMMのメリットは感じていたものの、
思ったより便利じゃない・・・そもそも気持ちよく開発できない。
と八流エンジニアの私は思うので正式サポート待ちでいい気がします。
ただ、新しくアプリ作るのにKMMを選択するより、既存アプリの運用で、
一部をKMMにしていく、みたいのはアリかもしれません。


次はアジャイル系の話したいです。~~（たぶんしない）~~　→ [リンク集用意した](https://qiita.com/tomotakasg/items/d2647f515a8cd1e08136)
実は裏で、もう1つサンプルアプリ作ったせいで時間かかった説はある。

サンプル作っていると、やってみたいこと増えてきて期限に間に合わない可能性が出てきます。
今回は、サンプルアプリを分割することで、この記事を書き週末を終えられました。
自分のコミットメント力として、これ見て貰えばいいんじゃないですかねー？:sunglasses:
あー、土日終わったー、悲しい:innocent:

転職のお誘い来ないバグはいつ修正されるでしょうか？待ってますよ？？？？
寝ます（2021/03/14（日曜）27:00)

### 参考資料
↓とりあえず基礎を読む

https://blog.jetbrains.com/ja/kotlin/2020/09/kotlin-multiplatform-mobile-goes-alpha-ja/


↓真っ暗闇の中前進するのに使える
 
https://tech.dely.jp/entry/2020/12/11/000000

↓少し細かいところ


https://engineering.mercari.com/blog/entry/2018-12-18-114010/

↓sharedのアーキテクチャはこれでいいと思う

https://www.wantedly.com/companies/wantedly/post_articles/300999