OmniAICreator/Qiita-1.07M huggingface dataset:
CentOS6でLet's Encryptのワイルドカード証明書を取得

#前提
* CentOS6
* Apache
* www.example.com
* 証明書の取得まで

#Certbotのインストール

```
# yum install epel-release
# wget https://dl.eff.org/certbot-auto
# mv certbot-auto /usr/local/bin/certbot-auto
# chmod 0755 /usr/local/bin/certbot-auto
```
Apahceの設定を変えずに証明書の取得だけ実行するコマンドを実行する
初回は SCL repository やら python やらが必要なので指示通りインストールする

```
# /usr/local/bin/certbot-auto certonly --apache
```

```
Complete!
Creating virtual environment...
Installing Python packages...
Installation succeeded.
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator apache, Installer apache
Enter email address (used for urgent renewal and security notices)
 (Enter 'c' to cancel):
```
一度キャンセルする

#ワイルドカード証明書の取得
-d はSANs のDNS Name
-m は連絡先メールアドレス

```
# /usr/local/bin/certbot-auto certonly --manual
 --server https://acme-v02.api.letsencrypt.org/directory
 --preferred-challenges dns
 --agree-tos
 --manual-public-ip-logging-ok
 -d *.example.com -d example.com
 -m hoge@example.com
```
チャレンジが表示されるので自身のDNSにTXTレコードを登録する

* エントリ: _acme-challenge.example.com
* タイプ: TXT
* 値: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

```
Please deploy a DNS TXT record under the name
_acme-challenge.example.com with the following value:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Before continuing, verify the record is deployed.
Press Enter to Continue
```
登録した後、DNSレコードが反映されるまで(10分程度)待ってからEnterを実行する
成功すると以下が表示される

```
IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/example.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/example.com/privkey.pem
```
Let's Encrypt に寄付する
canvasの設定方法

### canvasの設定方法
ブラウザに自作のゲームを表示する場合に、HTML5から使用できるようになったcanvas要素を使用することでスクリーンに表示することができるようになりました。

設定方法を記載します。

```
<body>
  <canvas id="canvas" width="700" height="700"></canvas>
</body>
```

まず、body要素内にcanvas要素を記述します。id属性は後でjavascriptでcanvas要素を取得するために設定します。
widthでブラウザに表示するcanvasの画面の横幅を指定します。
heightでブラウザに表示するcanvasの画面の縦幅を指定します。

```
  <script>
    var ctx;
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
  </script>

```

次にhead要素内にscript要素を記述します。変数canvasに先ほどbody内のcanvas要素に指定したid属性を取得するための記述をします。
変数ctxには上記の記述をすることでブラウザのcanvasの画面に描画する準備が完了します。「getContext( )」メソッドはcanvasに描画するためのインスタンスを取得するという機能があります。引数の「2d」は２Dの描画をするという意味があります。今現在２D以外の3
Dにも対応したのかは不明です。
LambdaをALBのターゲットに指定した際のメモ

## ターゲット登録手順
1. Lambda Function作成
1. Lambda Function宛のTarget Group作成
1. ALBのリスナールールで転送先にTarget Groupを指定

### MultiValueHeaderの使用
- Target Group で設定。 後からでも変更可。
    - Attributes -> Multi value headers
    - デフォルトは Disabled

## リクエスト・レスポンス

- API Gateway だとメソッドリクエスト・メソッドレスポンスで色々設定できるが、ALBにそんなものはない
- ので Lambda でよしなにやる

### リクエスト

- Lambda Function の event から取得
    - MultiValueHeaderの設定によって構造が変わる

```Json:MultivalueHeader&#x3a;Disabled
{
  "requestContext": {
    "elb": {
      "targetGroupArn": "***"
    }
  }, 
  "httpMethod": "GET", 
  "path": "/", 
  "queryStringParameters": {
    "redirect_uri": "***", 
   }, 
  "headers": {
    ~
    "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36 Edg/85.0.564.63", 
    "x-amzn-trace-id": "Root=***", 
    ~
  }, 
  "body": "", 
  "isBase64Encoded": false
}
```

```Json:MultiValueHeader&#x3a;Enabled
{
  "requestContext": {
    "elb": {
      "targetGroupArn": "***"
    }
  },
  "httpMethod": "GET",
  "path": "/",
  "multiValueQueryStringParameters": {
    "redirect_uri": [
      "***"
    ]
  },
  "multiValueHeaders": {
    ~
    "user-agent": [
      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36 Edg/85.0.564.63"
    ],
    "x-amzn-trace-id": [
      "Root=***"
    ],
  },
  "body": "",
  "isBase64Encoded": false
}
```

なおGetパラメータは  **queryStringParameters** ないし **multiValueQueryStringParameters** で取得できるが、
Postパラメータは **body** にBase64エンコードされた状態で渡されるので適当にデコードする

```python
# Postパラメータをデコードして整形
tmp = parse_qs(base64.b64decode(event.get('body')).decode())
for key in tmp:
    post_params[key] = tmp[key][0]

# こんな感じになる
post_params = {
   'param1': 'value1',
   'param2': 'value2',
}
```

### レスポンス

- httpレスポンス内容をreturnしてやる 
    - MultiValueHeaderによって若干変わる
    - 必須項目
        - StatusCode
        - isBase64Encoded (リダイレクトの場合はいらない)
        - headers

```python:sample&#x3a;MultiValueHeader&#x3a;Disableの場合
response = {
    'statusCode': 200,
    'statusDescription': '200 OK.',
    'isBase64Encoded': False,
    'headers': {
        'Content-Type': 'application/json; charset=utf-8'
    }
    'body': json,
}
```

```python:sample&#x3a;MultiValueHeader&#x3a;Enableの場合
response = {
    'statusCode': 200,
    'statusDescription': '200 OK.',
    'isBase64Encoded': False,
    'multiValueHeaders': {
        'Content-Type': ['text/html'],
        'Set-Cookie': [
            'cookie-1=value; Expires=3600',
            'cookie-2=value;',
        ]
    },
    'body': html,
}
```

```python:sample&#x3a;リダイレクト
response = {
    'statusCode': 302,
    'headers': {
        'Location': redirect_url
    }
}
```

なんか、そんな感じ。
【Bitrise】備忘録。IOSビルド成功までに行き詰まった事。

##壁

今まで個人でIPhoneアプリを開発するにあたって、
アプリ作成からストアへの公開まで全て手動で行っていたが、
本格的にアプリ開発の事業をメインに活動していくにあたり、
そろそろテストやら、自動デプロイやらを学ばなければならないと思い、
調べて出てきたのが「Bitrise」というものだった。

今もあんまりよくわかっとらんが、
とりあえず、Githubとつなげておけば、
コミットした際に自動でビルドしてくれるものらしい。

Slackや他のテストツールなどとも統合できるようで使い勝手が
いいとのこと。（間違ってたらスンマソン。

という事で、
とりあえず、いろいろと資料を見るよりも手を動かすのが得意な私は、
まずいじってみた。

まずは、Githubと連携し、
設定を行う。

```rb:
Also please check the xcdistributionlogs
The logs directory is stored in $BITRISE_DEPLOY_DIR, and its full path
is available in the $BITRISE_IDEDISTRIBUTION_LOGS_PATH environment variable
Export failed, error: exit status 70
|                                                                              |
+---+---------------------------------------------------------------+----------+
| x | 'xcode-archive@2 (exit code: 1) '                               | 3.6 min  |
+---+---------------------------------------------------------------+----------+
| Issue tracker: https://github.com/bitrise-steplib/steps-xcode-archive/issues |
| Source: https://github.com/bitrise-steplib/steps-xcode-archive               |
+---+---------------------------------------------------------------+----------+
```

当然ダメ。

アーカイブができていないという事で、
証明書関係のファイルが悪いと思い、
何度か証明書を作り直して入れ替えても、ダメ。

それならばと、Workflowの方で、
"iOS Auto Provision with Apple ID"
という、証明書を自動で作ってくれそうな
処理を挿入してみた。が、ダメ。

そんなこんなを繰り返すことを20回。

30記事くらいを漁ったところで、
"Stack"タブでXcodeのバージョンが指定できることが判明。
そして、確認してみると、
ローカル環境はXcode12.0.1なのに対し、
設定されていたのが、Xcode11.x.xというなんと致命的なミス！！

という事で、
自分のローカル環境と同じXcodeのバージョンを選択し、
なんとか事なきを得てビルドが完了しました。。。

##まとめ
よく確認して、ドキュメントを読みなさい。（戒め
【LaTeX】description環境(見出し付き箇条書き)で見出しと文の境界を揃える

＊beamerの場合はもっと楽な方法があります([beamerの場合](https://qiita.com/rockwell/items/884503d765695757d4c1))．

# 要点
$\mathrm\LaTeX$文書で見出し付き箇条書きを使うとき，  

```
\usepackage{enumitem}
...
\begin{description}[labelwidth=(一番長い見出しの文字数)em]
 \item[長い見出し] 文
 \item[短] 文
 ...
 \item[一番長い見出し] 文
\end{description}
```
のように，enumitemパッケージを読み込んだ上でdescription環境のオプション引数labelwidthに長さを渡す．こうすると見出し部分の幅がその長さに固定されて，下図のように見出しの右端(文の左端)が揃って見やすくなる．
![description2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/20621b3c-04c1-104d-e13c-318e3f2b1f33.png)

# 環境
筆者はoverleaf上で，compilerに"LaTeX"を使っている([この記事](https://qiita.com/fujino-fpu/items/d92d185da730e25743cb)とほぼ同じように設定している)．

# 困りごと
$\mathrm\LaTeX$の箇条書き環境としてはitemize(記号付き)，enumerate(番号付き)，description(見出し付き)がある．ただ，実際にdescription環境を使って見出し付き箇条書きを作ると，見出しと文の境が揃わないので少しモヤモヤする．
![description1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/6950f272-8cf2-9ced-2537-3e7bd414fa6f.png)
とにかく左端を合わせてくれるっぽい．beamerとは少し挙動が違う．
というわけで，見出しの右端を揃えたい！というのが困りごと．

# 失敗した方法
調べてみると，description環境では見出しの左端が揃い，itemize環境では見出しの右端が揃うとのこと([参照先](http://wkouw.web.fc2.com/WATAPEDIA_tex/Word_kajogaki/kajogaki.html))．なるほど，itemize環境も記号を自分で設定できるので，実質見出し付き箇条書き的に使えそうである．例えば次のような感じになる．
![itemize1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/86ac49ed-d50c-d265-4f03-3111d1fba8da.png)
解決！と思ってやってみたが，うまくいかない．
![itemize2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/0e446f87-f4b6-c001-ebea-b5d39fda6fa7.png)
上下の本文と見比べると，右端は揃っているが，左側が本文領域からはみ出ている．画像ではわかりやすいように余白を調整しているが，実際には紙面から出て見切れたり，2段組みの場合は左の段の文と重なったりしてしまう．
これも想像だが，記号(いまは見出し)部分の幅が固定されているのかもしれない．この幅を\setlengthなどで変更すればどうにかなるかもしれないが，調べるのも面倒だし，(さほど$\mathrm\LaTeX$に慣れていないから)むやみに設定をいじるのはなんとなく怖く，やりたくない．itemize環境を使う作戦は失敗．

# 解決策
[このページ](https://en.wikibooks.org/wiki/LaTeX/List_Structures)に答えが載っていた("Customizing lists"の部分)．enuitemパッケージを読み込むと，description環境にオプション引数として"labelwidth"を渡せるようになる．これを渡せば，見出し部分の幅が渡した長さに固定されるらしい．

```
\usepackage{enumitem}
...
\begin{description}[labelwidth=8rem]
 \item[見出し] 説明の文
 \item[とても長い見出し] 説明の文
 \item[短] 説明の文
\end{description}
```

とすると，
![description2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/20621b3c-04c1-104d-e13c-318e3f2b1f33.png)
このように，本文領域からはみ出すことなく，見出しの右端を揃えてくれる！
beamerの場合は一番長い見出しをそのままオプションに入れられたが，この方法では長さを渡さないといけない．cm単位とかだと調整がややこしそうである．根拠はないが，

```
\begin{description}[labelwidth=(一番長い見出しの文字数)em]
```

のように長さを決めるのが楽そうだと思う．ちなみに，"em"はいま有効な書体における文字"M"の幅を表すらしい([参考](http://www.oceanwave.jp/index.php?LaTeX%A4%CB%A4%AA%A4%B1%A4%EB%C4%B9%A4%B5%A4%CE%C3%B1%B0%CC))．筆者は見たことがないが，"zw"でもいいのかもしれない．

# 注意
初めに書いた通り，beamerのときはもっと楽で，単純にオプションとして[一番長い見出し]を渡すだけで見出しの右端が揃う(詳細は[別の記事](https://qiita.com/rockwell/items/884503d765695757d4c1))．

# 参考
下のページの"Customizing lists"の部分を参照した．
https://en.wikibooks.org/wiki/LaTeX/List_Structures
glanceに登録したイメージのH/Wバスの変更

Openstackで使用している仮想化基盤はLinux KVMを使用しており、H/Wバスタイプはvirtioを標準で使用しています。
virtioはCentOS 6以降であれば標準ドライバ持ってますが、CentOS 5とかは持ってないため、バスタイプを scsiとか ideとかにしてやる必要があります。
windowsも標準ドライバでは持ってないので、こちらはvirtioドライバをインストールしてあげる必要があります。

VMのバスタイプなのでnovaかと思いきやglanceです。
登録イメージで使用するバスタイプを変更します。

## 手順
openstackコマンドが使える状態にしておきます。

対象イメージのメタ情報にバスタイプを追加します。

~~~
(keystone)# openstack image set --property hw_disk_bus=scsi --property hw_cdrom_bus=ide --property hw_vif_model=e1000 <イメージUUID>
~~~

使用できるバスタイプは

|hw_disk_bus|hw_cdrom_bus|hw_vif_model|
| ---- | ---- | ---- |
|ide|ide|e1000|
|scsi|scsi|ne2k_pci|
|virtio|virtio|pcnet|
|||rtl8139|
|||virtio|

となっているようです。

hw_cdrom_busは使い方がイマイチ分かっていないのか、エラーVMになるときがありました。
Python【forを使用した繰り返し文】

Pythonの基礎知識②です。
自分の勉強メモです。
過度な期待はしないでください。

過去投稿記事
-
[Python基礎](https://qiita.com/k-yasuhiro/items/c31b6370023e67e00aa9)
[Python基礎③](https://qiita.com/k-yasuhiro/items/7e83552c58f854bd715f)
[Python基礎④](https://qiita.com/k-yasuhiro/items/3bd280ee0eea8d59d36b)
[Python基礎⑤](https://qiita.com/k-yasuhiro/items/0eff0469eb3a5e95980e)
<br>
<br>


リスト
-
　-複数のデータをまとめて管理する事
　例：['orange', 'banana', 'apple']

　-文字列と数値の混合で作ることも可
　例：['banana', 'apple', 100, 200]

　-リストを変数に代入
　例：fruits = ['orange', 'banana', 'apple']

　-リストの要素には、前から順に`「0, 1, 2,・・・」`と数字が割り振られる

　-リスト（fruits）のインデックス番号0の要素を出力する時
　`print(fruits[0])`

　-リストの要素を更新
　`リスト[インデックス番号] = 値`
　例：fruits[0] = 'grape'
　　　fruits = ['grape', 'banana', 'apple']に変更される

　-リストに要素を追加
　`リスト.append(値)`
　例：fruits.append('grape')
　　　fruits = ['grape', 'banana', 'apple', 'grape']と追加される

　-リストの要素を全て取得
　`for 変数名(自分で作成) in リスト名:`と書く事でリストの要素を全て取得
　　for文　→　繰り返し処理をする

```py:例
fruits = ['orange', 'banana', 'apple']
for fruit in fruits: #行末にコロンは必須
    print('私の好きな果物は、'+ fruit + 'です。')
#インデントを揃える（半角スペース４つ分）
```

```text:出力結果
私の好きな果物は、orangeです。
私の好きな果物は、bananaです。
私の好きな果物は、appleです。
```
<br>
辞書
-
　-リストと同じように複数のデータをまとめて管理するのに用いる
　　辞書は{キー1: 値1, キー2: 値2, …}のように作成、　辞書は`{}`で囲みます。
　例：fruits = {'orange':'orange', 'banana':'yellow', 'apple':'red'}

　-辞書の値を取り出し

```py:例
fruits = {'orange':'orange', 'banana':'yellow', 'apple':'red'}
print('bananaの色は、'+ fruits['banana']+ 'です。')
# →　bananaの色は、yellowです。
```

　-辞書の要素の更新
　fruits['banana'] = black
　`辞書名[キー名] = 値`と書くことで要素の更新になる

```py:結果
fruits = {'orange':'orange', 'banana':'yellow', 'apple':'red'}
fruits['banana'] = black
print(fruits)
# →　{'orange':'orange', 'banana':'black', 'apple':'red'}
```

　-辞書に要素の追加
　fruits['melon'] = green
　`辞書名[新しいキー名] = 値`と書くことで辞書に新しい要素を追加

```py:結果
fruits = {'orange':'orange', 'banana':'yellow', 'apple':'red'}
fruits['melon'] = green
print(fruits)
# →　{'orange':'orange', 'banana':'yellow', 'apple':'red', 'melon:green'}
```

　-辞書の要素を全て取得
　`for 変数名 in 辞書:`

```py:例
fruits = {'orange':'orange', 'banana':'yellow', 'apple':'red'}
for fruit_key in fruits: #行末にコロンは必須
    print(fruit_key+ 'の色は、'+ fruits[fruit_key] + 'です。')
#インデントを揃える（半角スペース４つ分）
```

```py:出力結果
orangeの色は、orangeです。
bananaの色は、yellowです。
appleの色は、redです。
```
<br>

while文
-
　-`while 条件式:`のように書きます。
　条件式の結果がTrueの間、while文内の処理を繰り返す

```py:例
x = 1
while x <= 10: #行末にコロンは必須
    print(x)
    x+=1
#インデントを揃える（半角スペース４つ分）
```
<br>

break
-
　-breakを用いると繰り返し処理を終了させる

```py:例
numbers = [765, 921, 777, 256]
for number in numbers: #行末にコロンは必須
    print(number)
    if number == 777: #行末にコロンは必須
    break
#インデントを揃える（半角スペース４つ分）
```
<br>

continue
-
　-continueはその周の処理だけをスキップさせる

```py:例.3で割り切れる数字をスキップさせる
numbers = [765, 921, 777, 256]
for number in numbers: #行末にコロンは必須
    if  number % 3 == 0:
        continue
    print(number)
#インデントを揃える（半角スペース４つ分）
```
<br>
MaixAmigo で FFT

# MaixAmigo

MaixAmigoのCPU K210はハードウェアFFTがあります。サウンドICはES8374で、アナログマイクからADCに入力します。

# デモ

Sipeed社の [GitHub MaixPy_script](https://github.com/sipeed/MaixPy_scripts) にあるデモ demo_fft_spectrum.py をES8374を使用するようにしてみました。

```python
from es8374 import ES8374
from machine import I2C
from Maix import GPIO, I2S, FFT
import image, lcd, math

from fpioa_manager import fm

sample_rate = 38640
sample_points = 1024
fft_points = 512
hist_x_num = 50


lcd.init(freq=20000000)

fm.register(13, fm.fpioa.I2S0_MCLK, force=True)
fm.register(21, fm.fpioa.I2S0_SCLK, force=True)
fm.register(18, fm.fpioa.I2S0_WS, force=True)
fm.register(35, fm.fpioa.I2S0_IN_D0, force=True)
fm.register(34, fm.fpioa.I2S0_OUT_D2, force=True)

i2c = I2C(I2C.I2C3, freq=600*1000, sda=27, scl=24)  # amigo
dev = ES8374(i2c)
dev.setVoiceVolume(0)
dev.start(0x03)
rx = I2S(I2S.DEVICE_0, pll2=262144000, mclk=31)
rx.channel_config(rx.CHANNEL_0, rx.RECEIVER, align_mode = I2S.STANDARD_MODE)
rx.set_sample_rate(sample_rate)
img = image.Image()
if hist_x_num > 320:
    hist_x_num = 320
hist_width = int(320 / hist_x_num)#changeable
x_shift = 0
while True:
    audio = rx.record(sample_points)
    fft_res = FFT.run(audio.to_bytes(),fft_points)
    fft_amp = FFT.amplitude(fft_res)
    img = img.clear()
    x_shift = 0
    for i in range(hist_x_num):
        if fft_amp[i] > 240:
            hist_height = 240
        else:
            hist_height = fft_amp[i]
        img = img.draw_rectangle((x_shift,240-hist_height,hist_width,hist_height),[255,255,255],2,True)
        x_shift = x_shift + hist_width
    lcd.display(img)
    fft_amp.clear()

```
Leet文字列への変換プログラム

【概要】
----------------------------------------
<b>1.結論</b>

<b>2.Leet文字とは何か</b>

<b>3.どのようにコーディングするか</b>

<b>4.開発環境</b>



1.結論
----------------------------------------
<b>gsub!</b>メソッドを使う

<br>
2.Leet文字とは何か
----------------------------------------
主に、インターネットで使用されるアルファベットの表記法のことをいいます。例えば、"HELLO"であれば"H3LL5"となります。アルファベットに似た数字や文字を当てはめる形になります。下記に具体例の表を載せておきますが、もちろんA~Zまであり、その表現方法はいくつもあります。

| 文字 | 数字 | 
| ---- | ---- | 
| A    | 4    | 
| B    | 13   |
| C    | [    | 
| D    | )    |
| E    | 3    |
.
.
.

| 文字 | 数字 | 
| ---- | ---- | 
| Z    | 2    | 

参考にしたURL:
<a href="https://ja.wikipedia.org/wiki/Leet#leet_%E7%AC%A6%E5%8F%B7%E8%A1%A8">Wikipedia:Leet符号表</a>
<br>

3.どのようにコーディングするか
----------------------------------------

```ruby
変数 = gets.chomp
変数.gsub!(/変換前の文字列/,'変換後の文字列')
puts 変数

#ex)
#leet_str = gets.chomp
#leet_str.gsub!(/Z/,'2')
#puts leet_str
#"Z"と入力すると"2"に変換される
```
他の方法もありますが、自分はgsub!を使用しました。

参考にしたURL:
<a herf="https://www.sejuku.net/blog/14685">【Ruby入門】文字列の置換方法まとめ（gsub sub regex）</a>
<br>

4.開発環境
----------------------------------------
Mac catalina 10.15.4
Vscode
Ruby 2.6.5
Rails 6.0.3.3
<br>
今日から携わるJava案件（調べたサイト一覧）

Java案件に携わっているときに調べたこと一覧

#「java 書き順 coltroller」

##入社1年目のプログラミング初心者がSpringを学ぶための手引き
https://www.slideshare.net/KouheiToki/1spring
・Springとは？
・学習のステップ
 -Javaの基本
 -Web周り
 -SQL、その他DB周り
 -JUnit
 -Springの基本
・さらなるステップ

# 「spring rest mapper」 + api

##0からREST APIについて調べてみた
https://qiita.com/masato44gm/items/dffb8281536ad321fb08

## Spring BootでWeb APIを作ろう
codezine（要登録）：Spring Bootで作るマイクロサービス 第4回
https://codezine.jp/article/detail/11546
○制作物
簡単な住所録管理アプリケーション
![11546_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/e288f979-02c8-4e24-e234-4b78ec41790e.png)


##Spring Boot で簡単RESTful APIを作成する
@L_A_P_119611 
Spring Boot を使用して簡単にRESTful APIを作成
○制作物
GPSロガー（ログデータはAndroid端末のSQLite3を使用して保存）
＜詳細＞
Spring Bootを使ってRESTfulインタフェースを作成し、AndroidからはHTTPを使用してバックアップデータをPOST
![スクリーンショット 2020-10-16 13.21.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254652/ee82729c-d7e3-1dec-9b38-eadc52a75455.png)


#検索「mysql spring rest mapper」

## 02. SpringBootからMySQL(MyBatis)へ接続するAPIを作ってみた

https://qiita.com/supreme0110/items/504781e5087f4c4e771b

GETリクエストを送ったらDBの全データをリストで取得してくるAPIを作成できるようになります。

・キーワード
SpringInitializer、IntelliJ、Postman 
SpringBoot、MySQL、MyBatis、Web、Lombok、SpringInitializer
API、Controller、Mapper、Entity、xml


# 制作

## Java + MySQLで簡易掲示板を作る
https://qiita.com/parapore/items/28ca111a5a3c0cbdcf0a
・ID、名前、コメント、タイムスタンプを掲示板に表示する。
・名前かコメントが未入力だとエラーメッセージがポップアップする。

## SpringBoot+Vue.js+ElementUI+Firebaseでマスタ管理アプリ入門
https://qiita.com/shunp/items/abea7fa01e7a664c85da
・SpringBootでCRUD操作可能なREST APIを開発（20分）
・Vue.js＋ElementUIでモダンなSPA開発（20分）
・Firebaseで認証機能の作成（10分）

# SQL

```sql:取得
SELECT * 
FROM テーブル名
```

```sql:追加
INSERT INTO テーブル名
   VALUES ('1', 'ミナト', '冷やし中華はじめました', '2020/09/01' ,'2020/09/01')
```

```sql:更新
UPDATE テーブル名
   SET カラム名 = 値, カラム名 = 値 
 WHERE id = 1
```

```sql:削除
DELETE FROM テーブル名
    WHERE 条件
```

SQL練習問題 – 一覧まとめ
https://tech.pjin.jp/blog/2016/12/05/sql%E7%B7%B4%E7%BF%92%E5%95%8F%E9%A1%8C-%E4%B8%80%E8%A6%A7%E3%81%BE%E3%81%A8%E3%82%81/

【これだけ覚えてたらOK！】SQL構文まとめ
https://qiita.com/tatsuya4150/items/69c2c9d318e5b93e6ccd

SQLのコマンド一覧を覚える方法とは？わかりやすい順で徹底解説！
https://www.sejuku.net/blog/104594

SQLをはじめよう - 初心者でもわかる、構文とデータ取得の基本
https://employment.en-japan.com/engineerhub/entry/2019/11/05/103000


##「ブックマーク テーブル設計」（お気に入り、クリップ）
いいね機能のDB設計
https://d4192.hatenablog.com/entry/2019/04/16/191242

##「java resttemplate」
REST通信には、げきつよRestTemplateを使うべし
https://qiita.com/salvage0707/items/0ed226c97f86bf008522
AWSでエラーの原因が分からない場合は設定値を見直してみよう

# はじめに
自分が設定したCodeBuildのプロジェクトでエラーが起き、原因究明に時間をかけたあげくただの設定値ミスだったことが結構あったので記事にしました。

# 起きたこと
CodeBuildのプロジェクト内でコマンドがコケました。

```
echo ${DOCKER_PASSWORD} | docker login -u ${DOCKER_USERNAME} --password-stdin
```

エラーメッセージとして「Cannnot perform an interactive login from a non TTY device」が出力されていたため、「dockerのログインがうまくできていないのかな」と思いこのエラーメッセージを中心に調べましたが特に解決策がなく、途方に暮れていました。

ロール、環境変数等は既に動いている他のプロジェクトと同様に設定したつもりであり、ビルドの詳細を確認しても特に他のプロジェクトと設定が異なっている風には見えませんでした。

1時間ぐらい格闘した後、「環境変数を設定し直してみよう」という話になり、テキストボックスに予め入力されていた既存の設定値に対してマウスをドラッグし範囲選択したところ、、、、


![スクリーンショット (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266614/02463941-e96e-8b3f-44a7-9763e328e5ed.png)


「DOCKER_USERNAME 」と文字列の後ろにスペースが混ざってしまっていました。。。

スペースを消すとすぐに動いてくれました。

# なぜ起きたのか
他のプロジェクトと同じ値を設定するので「同じ値だしタイポ怖いからコピペでええやろ」と考え入力値をコピペしていました。
その際に混じってしまったと思われます。

# なぜ気づけなかったのか
画面に表示されている値の確認はしていて、「DOCKER_PASSWORD」などの値にタイポはないか？という視点でチェックはしていました。
ですが後ろにスペースがあるかどうかはぱっと見ではわからず、また値を範囲選択しても後ろのスペースまでは表示されていなかったので気づけませんでした。

![スクリーンショット (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266614/c62be892-b650-abea-f516-cebf7b4ce6cd.png)


# 対策
- 他に影響がないことを確認してとりあえず動かしてみる

CodeBuildであれば適当な場所（ECRとか）にイメージをプッシュするのが大体の目的だと思うのでとりあえず動作確認をしましょう。
一番確実な確認方法だと思います。

- 入力値のダブルチェック

本番で運用しているサービスに係わるところであれば、他の人に確認してもらいましょう。
（ただし、上記のような場合だと気づけないかもしれません。。）

- 既に他に設定したものがあり、JSONなどで設定値を出力できるのであれば自分の設定値とdiffを取ってみる

他と同様の値（System Managerに設定した値とか）を使うのであれば有効だと思います。

# 終わりに
しょうもないようなミスほど、問題解決に時間がかかりますよね。。
エラーメッセージだけではどうも解決しなさそうな場合は参考にしていただけると状況が好転するかもしれません。
もしかして「pipenv.exceptions.ResolutionFailure」で困ってる？

# pipenvのエラー
存在しないパッケージを`pipenv install`すると、Pipfileに書き込まれて、以降pipenv ~ するときにエラーが出る。

```
# よくでるエラー
pipenv.exceptions.ResolutionFailure
```

## 解決策
`Pipfile`に書かれた存在しないパッケージ名を手動で消す。

## よく起こる原因
個人的にはタイピングのミスなどで起こる事が多い。

#### 例
1. `pipenv install pandsa`←タイピングミスしている。
2. 「ああ、間違ってた」と、正しいパッケージ名で`pipenv install pandas`実行。
3. `pipenv.exceptions.ResolutionFailure`エラー発生。

## その他
もっと良い方法があれば教えていただけると幸いです。
[Swift]配列から要素を削除する方法まとめ

何回も検索をかけてしまうのでまとめておく。


## 最初の要素削除
```
var strArray = ["A","B","C","D","E"]

strArray.removeFirst()  //["B", "C", "D", "E"]
```

## 最後の要素削除
```
var strArray = ["A","B","C","D","E"]

strArray.removeLast()  //["A", "B", "C", "D"]
```
## 全ての要素削除
```
var strArray = ["A","B","C","D","E"]

strArray.removeAll()  //[]
```

## 指定した要素を削除
``` 
var strArray = ["A","B","C","D","E"]

strArray.removeAll(where: {$0 == "C"}) // ["A", "B", "D", "E"]
```

## インデックスを指定して要素削除
```
var strArray = ["A","B","C","D","E"]

strArray.remove(at: 2) //["A", "C", "D", "E"]
```

## インデックスが不明な要素を削除　(これまでのが使えない時)
"C"を削除したい場合、"C"以外をfilterで指定する。

```
var strArray = ["A","B","C","D","E"]

strArray = strArray.filter { $0 != "C" } // ["A", "B", "D", "E"]

```
【LaTeX】beamerでdescription環境(見出し付き箇条書き)の見出しと文の境界を揃える

＊この記事はbeamerの場合の方法です．文書の場合は[こちら](https://qiita.com/rockwell/items/e8ffeaeeea7b6505e5f8)．

# 要点
$\mathrm\LaTeX$で見出し付き箇条書きにするとき，  

```
\begin{description}[一番長い見出し]
 \item[長い見出し] 文
 \item[短] 文
 ...
 \item[一番長い見出し] 文
\end{description}
```
のように，description環境のオプションに一番長い見出しを渡すと，下図のように見出しの右端(文の左端)が揃って見やすくなる．
![description2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/9f65ff81-d60a-7bc5-59e3-c78f50c25bb2.png)

# 環境
筆者はoverleaf上で，compilerに"LaTeX"を使っている([この記事](https://qiita.com/fujino-fpu/items/d92d185da730e25743cb)とほぼ同じように設定している)．ここに書いてある方法はbeamerでのみ有効なので注意．

# 困りごと
$\mathrm\LaTeX$の箇条書き環境としてはitemize(記号付き)，enumerate(番号付き)，description(見出し付き)がある．ただ，実際にdescription環境を使って見出し付き箇条書きを作ると，見出しと文の境が揃わないので少しモヤモヤする．
![description1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/45dd697a-2683-8eed-255d-d4bd8cda39cb.png)
どういう挙動なのかはよくわかっていないが、体感的には一定の長さに収まるものだけ見出しの右端を揃えてくれるのだと思われる．文書の場合と違う．
というわけで，見出しの右端を揃えたい！というのが困りごと．

# 失敗した方法
調べてみると，description環境では見出しの左端が揃い，itemize環境では見出しの右端が揃うとのこと([参考](http://wkouw.web.fc2.com/WATAPEDIA_tex/Word_kajogaki/kajogaki.html))．なるほど，itemize環境も記号を自分で設定できるので，実質見出し付き箇条書き的に使えそうである．例えば次のような感じになる．
![itemize1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/0728de9c-6882-78d5-96a5-14bb02cd87ce.png)
解決！と思ってやってみたが，うまくいかない．
![itemize2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/1258c405-c097-7210-325c-944932face6c.png)
右端を揃えてくれるのはよいのだが，左がはみ出してしまう．これも想像だが，記号(いまは見出し)部分の幅が固定されているのかもしれない．この幅を\setlengthなどで変更すればどうにかなるかもしれないが，調べるのも面倒だし，(さほど$\mathrm\LaTeX$慣れしていないから)むやみに設定をいじるのはなんとなく怖く，やりたくない．itemize環境を使う作戦は失敗した．

# 解決策
どうしたものかと思ってさらに調べると，[StackExchange](https://tex.stackexchange.com/questions/248940/itemize-dislocated-to-the-left)に答えが載っていた．description環境にオプションとして文字列を渡すと，見出し部分の幅が渡した文字列の長さに固定されるらしい．

```
\begin{description}[とても長い見出し]
 \item[見出し] 説明の文
 \item[とても長い見出し] 説明の文
 \item[短] 説明の文
\end{description}
```

とすると，
![description2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794792/9f65ff81-d60a-7bc5-59e3-c78f50c25bb2.png)
このように，見出しの右端を揃えてくれた．解決！

# 注意
初めに書いた通り，この方法はbeamerのときにしか使えない．文書の場合はenumitemパッケージを使い，オプションに[labelwidth=長さ]を渡すとだいたい同じことができる(詳細は[別の記事](https://qiita.com/rockwell/items/e8ffeaeeea7b6505e5f8))．

# 参考
文中でも引用しましたが，この回答の通りの方法です：
https://tex.stackexchange.com/questions/248940/itemize-dislocated-to-the-left
【Azure】サービスタグ


サービスタグに含まれるIPは、ここで確認できる。
「Azure IP Ranges and Service Tags – Public Cloud」
https://www.microsoft.com/en-us/download/details.aspx?id=56519


サービスタグ提供開始（GA）は2018年1月から。
もし、2018年以前に構築された環境があれば、サービスタグが適用されているか確認したほうがよい。
https://azure.microsoft.com/ja-jp/updates/service-tags-nsgs-ga/?ranMID=24542&ranEAID=TnL5HPStwNw&ranSiteID=TnL5HPStwNw-EjsOYlI03vNF_h4ggikcBA&epi=TnL5HPStwNw-EjsOYlI03vNF_h4ggikcBA&irgwc=1&OCID=AID2000142_aff_7593_1243925&tduid=%28ir__qwtozwa19ckftnrwkk0sohzxz22xszcqspflqkgs00%29%287593%29%281243925%29%28TnL5HPStwNw-EjsOYlI03vNF_h4ggikcBA%29%28%29&irclickid=_qwtozwa19ckftnrwkk0sohzxz22xszcqspflqkgs00
ndjson > Mac > ndjsonの作成



# ndjsonとは？

[ndjson](http://ndjson.org/)は、一度に1つのレコードを処理できる構造化データを保存またはストリーミングするための便利な形式です。
改行区切りJSONとも呼ばれます。

BigQueryやElasticsearchへのデータ格納時にはndjsonが使用されます。


[Bulk API | Elasticsearch Reference [7.9] | Elastic](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-bulk.html)
[Cloud Storage からの JSON データの読み込み  |  BigQuery  |  Google Cloud](https://cloud.google.com/bigquery/docs/loading-data-cloud-storage-json?hl=ja)


# 使用ライブラリ

今回は、ndjsonを処理、作成、json相互変換を行うために、[jq](https://stedolan.github.io/jq/)ライブラリを使用します。

- [jq is a lightweight and flexible command-line JSON processor.](https://stedolan.github.io/jq/)



## jqのインストール

Homebrewでインストールします。

```
brew install jq
```


# 変換

## json -> ndjsonへ変換

以下に沿って進みます
[jq Manual (development version)](https://stedolan.github.io/jq/manual/#Basicfilters)



### ndjsonに変換

jsonをそのままndjsonに変換するには、`.[]`を使います。

input

```:test.json
[
  { "name": "JSON", "good": true },
  { "name": "XML", "good": false }
]
```

#### ndjsonに変換

`cat test.json | jq -c '.[]' > test.ndjson`


result

```:test.ndjson
{"name":"JSON", "good":true}
{"name":"XML", "good":false}
```



### 配列操作

jsonの一部をndjsonに変換するには、`.[数字]`を使います。

input

```:test.json
[
  { "name": "JSON", "good": true },
  { "name": "XML", "good": false }
]
```


#### 0番目をndjsonに変換

`cat test.json | jq -c '.[0]' > test.ndjson`

result

```:test.ndjson
{"name":"JSON","good":true}
```


#### 1番目をndjsonに変換

`cat test.json | jq -c '.[1]' > test.ndjson`

result

```:test.ndjson
{"name":"XML","good":false}
```

#### 2番目をndjsonに変換

`cat test.json | jq -c '.[2]' > test.ndjson`

result

```:test.ndjson
null
```


### JSONの部分操作


jsonの一部を抜き出しndjsonに変換してみます。


input

```:test.json
{
  "typeA": [
    { "name": "JSON1", "good": true },
    { "name": "XML1", "good": false }
  ],
  "typeB": [
    { "name": "JSON2", "good": true },
    { "name": "XML2", "good": false }
  ]
}
```

### ndjsonに変換

#### typeAをndjsonに変換

```
cat test.json | jq -c '.typeA|.[0:]|.[]' > test.ndjson
```


result

```:test.ndjson
{"name":"JSON1","good":true}
{"name":"XML1","good":false}
```

#### typeBの先頭1つをndjsonに変換
```
cat test.json | jq -c '.typeB|.[0:1]|.[]' > test.ndjson
```

result

```:test.ndjson
{"name":"JSON1","good":true}
```






# JQの動作確認

以下で動作確認が行えます。

https://jqplay.org/jq?q=.%5B0%5D&j=%5B%7B%22name%22%3A%22JSON%22%2C%20%22good%22%3Atrue%7D%2C%20%7B%22name%22%3A%22XML%22%2C%20%22good%22%3Afalse%7D%5D



# 参考
 

[Newline delimited JSON is awesome | by Jaga Santagostino | Medium](https://medium.com/@kandros/newline-delimited-json-is-awesome-8f6259ed4b4b)


[JSON parsing error: How to Load JSON into BigQuery Successfully using NDJSON | by Alina Zhang | Data Driven Investor | Medium](https://medium.com/datadriveninvestor/json-parsing-error-how-to-load-json-into-bigquery-successfully-using-ndjson-2b7d94616bcb)
 
 
[ndjson](http://ndjson.org/)
スニッファーでBLEパケットを確認する方法

# 記事の概要
Texas Instruments社の[SmartRF プロトコル Packet Sniffer](http://www.tij.co.jp/tool/jp/packet-sniffer)は、[CC2540 USB 評価モジュール・キット](http://www.tij.co.jp/tool/jp/CC2540EMK-USB)を使用して、BLEなどの無線通信のパケットを解析します。

以下の図のように、飛び交うパケットをリアルタイムに取得できるので、とても便利です。

![BLEパケット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150620/1bb86eeb-3da8-5e5e-66bb-d7398fb8a74a.png)


私は[CC2540 USB 評価モジュール・キット](http://www.tij.co.jp/tool/jp/CC2540EMK-USB)にスニッファー用ではないファームウェアを書き込んでいたので、ファームウェア更新が必要でした。
その作業に難儀したので、ここに更新方法の作業メモを残します。　

# 用意するもの

- ソフトウェア
    - [SmartRF プロトコル Packet Sniffer](http://www.tij.co.jp/tool/jp/packet-sniffer)
        - v1を使用します
    - [SmartRF Studio](http://www.tij.co.jp/tool/jp/SMARTRFTM-STUDIO)
    - [SmartRF フラッシュ・プログラマ](http://www.tij.co.jp/tool/jp/FLASH-PROGRAMMER)
        - v1を使用します
- デバイス
    -  [CC2540 USB 評価モジュール・キット](http://www.tij.co.jp/tool/jp/CC2540EMK-USB)
    -  [CC-DEBUGGER](http://www.tij.co.jp/tool/jp/CC-DEBUGGER)
        
# CC-DEBUGGERのファームウェア更新
CC-DEBUGGERをPCに接続し、SmartRF Studioを起動してください。
"List of Connection Devices"に表示される"CC Debugger..."をクリックすれば、ファームウェア更新が開始されます。

![ファームウェア更新1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150620/11afe11a-da8c-618f-a8a1-03448afefb28.png)


もしくは、書き込むファイルを直接指定することもできます。
SmartRF フラッシュ・プログラマを起動し、"Program Evalution Board"を選択し、"EB Application(USB)"で"CC Debugger"が選択されていることを確認します。

そしてFlash imageに以下のファイルを選択します。

\Program Files (x86)\Texas Instruments\SmartRF Tools\Firmware\CC Debugger\cebal_fw_srf05dbg.hex

"Perform actions"をクリックすればファームウェアが更新されます。

![ファームウェア更新2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150620/c325c56d-8491-dfe7-1e44-e9a7f9cf7edf.png)

# CC2540 USB 評価モジュール・キットのファームウェア更新
[CC2540 USB 評価モジュール・キット](http://www.tij.co.jp/tool/jp/CC2540EMK-USB)をCC-DEBUGGERに接続し、PCに挿入して電源を供給します。

SmartRF フラッシュ・プログラマを起動し、"Program Evalution Board"を選択し、"EB Application(USB)"で"CC Debugger"が選択されていることを確認します。

そしてFlash imageに以下のファイルを選択します。

\Program Files (x86)\Texas Instruments\SmartRF Tools\Packet Sniffer\bin\general\firmware\sniffer_fw_cc2540_usb.hex

"Perform actions"をクリックすればファームウェアが更新されます。

![ファームウェア更新3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150620/f53a22de-6faa-9363-270f-4a1d50315307.png)

# 動作確認
Packet Snifferを起動して、Bluetoothを選択してstartをクリックします。

![ファームウェア更新4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150620/6eb4f867-41e1-83ea-22ad-34e540bb90a9.png)

CC2540 USB 評価モジュール・キットをPCに挿入すると、デバイスCC2540 USB Dongleが認識されます。
クリックで選択して、矢印アイコンをクリックするとスキャンが開始されます。
![ファームウェア更新5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150620/529ef1ec-dff5-a84f-2d00-88a89d53f2aa.png)

近くのBLE機器のアドバタイジングパケットをスキャンし、以下のようにパケットが画面に表示されるはずです。
![ファームウェア更新6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150620/3294f494-68cd-e298-ec23-329961430cd1.png)

観測対象のBLEモジュールがBLE接続すれば、NotifyやWriteにおけるパケットの確認もできます。
Flutter1.22.1 iOS14.0.1 実機実効エラーが実機再起動で解消した 「Your Xcode version may be too old for your iOS version.」


iPhone11 Pro Max 256GB
iOS14にして、Android Studio4.1にしたら実機ビルドが通らなくなる

Android Studio 4.1は、一度起動したがプラグインやら日本語やら入れてたら起動しなくなる。
Libraryのデータも消したけど駄目だから仕方なく4.01に戻す。

表示されたキーワードで、検索するも起動せず実機の再起動でなぜか治りました。
タイトル以外のエラー内容が原因なのかもしれませんが詳細不明

結局、実機の再起動で解消しました。

# エラー内容

```
Launching lib/main.dart on iPhone 11 Pro Max 256GB Space Gray in debug mode...
Automatically signing iOS for device deployment using specified development team in Xcode project: 55XW39K6SQ
Running Xcode build...
Xcode build done.                                           135.5s
Installing and launching...
═══════════════════════════════════════════════════════════════════════════════════
Error launching app. Try launching from within Xcode via:
    open ios/Runner.xcworkspace

Your Xcode version may be too old for your iOS version.
═══════════════════════════════════════════════════════════════════════════════════
2020-10-16 09:18:09.918 ios-deploy[57698:1126648] [ !! ] Error 0xe8000022: The service is invalid. AMDeviceSecureStartService(device, serviceName, NULL, &dbgServiceConnection)
Could not run build/ios/iphoneos/Runner.app on 00008030-00164D202628802E.
Try launching Xcode and selecting "Product > Run" to fix the problem:
  open ios/Runner.xcworkspace

Error launching application on iPhone 11 Pro Max 256GB Space Gray.

```


参考に環境を載せておきます。

# 環境

## OS

macOS Catalina
10.15.7（19H2）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685319/3cb8560b-e038-876f-dd41-7847a808582c.png)

※ 古いMac Miniですが、メモリを16GBにしておいたことと、HDDが使い物にならなくなってきたので外部接続のSSDから起動してますが、それなりに使えてます。

## Android Studio

```
Android Studio 4.0.1
Build #AI-193.6911.18.40.6626763, built on June 25, 2020
Runtime version: 1.8.0_242-release-1644-b3-6222593 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
macOS 10.15.7
GC: ParNew, ConcurrentMarkSweep
Memory: 1246M
Cores: 4
Registry: ide.new.welcome.screen.force=true
Non-Bundled Plugins: Dart, io.flutter
```


## Flutter Doctor

```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.1, on Mac OS X 10.15.7 19H2, locale ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.50.1)
[✓] Connected device (4 available)
    ! Device emulator-5562 is offline.

• No issues found!

```

ビルド周りが不安定なのが困りものですね。
自分のバグならまだしも、それ以外だと動かなくなると原因探すのに時間がかかる上になぜ治るのかよくわからない。
iOS SimulatorだけでやってるとAndroidで全然動かなくなってたりするので両方確認しつつ作業する必要がある。
iOSアプリ開発：タイマーアプリ（まとめ）

![スクリーンショット 2020-10-28 1.22.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/570497/1624b1c7-f4f0-168d-eb2f-efa00d1f83d8.png)

##内容
タイマーアプリを作成するためのポイントを複数記事に分けて掲載していきます。タイマーだけで寂しいので、円形のプログレスバーやアラーム音の選択、アラーム/バイブレーションのオン・オフなども入れていきます。


##タイマーアプリの主な機能
- タイマーの時間を設定する
- タイマーをカウントダウンさせる
- スタート/ストップボタン、リセットボタンで操作する
- タイマーが終了したらアラーム/バイブレーションを発動する
- 設定画面でアラーム音やプログレスバーの表示をオン/オフできる
- 設定画面からアラーム音を選択できる
- プログレスバーで残り時間を視覚的に表示する
- 視覚的に楽しいアニメーションが表示できる


##環境

- OS: macOS 10.15.7 (Catalina)
- エディタ： Xcode 12.1
- 言語: Swift
- 主な使用ライブラリ: SwiftUI


##手順

以下のリンクからそれぞれの詳細な手順を記載した記事が確認できます。

1. [iOSアプリ開発：タイマーアプリ（1.タイマーの時間設定）](https://qiita.com/masanaosako/items/e379618fde48fbfc46b3)
2. [iOSアプリ開発：タイマーアプリ（2.タイマーの表示）](https://qiita.com/masanaosako/items/155db83037ea23efa418)
3. [iOSアプリ開発：タイマーアプリ（3.スタート/ストップボタン、リセットボタン）](https://qiita.com/masanaosako/items/bb0056fc368bfd84e792)
4. [iOSアプリ開発：タイマーアプリ（4.カウントダウンの実装）](https://qiita.com/masanaosako/items/e254cfbdfa6d8b0c6748)
5. [iOSアプリ開発：タイマーアプリ（5.アラーム、バイブレーションの実装）](https://qiita.com/masanaosako/items/e6fca1cb8fb011238c34)
6. [iOSアプリ開発：タイマーアプリ（6.設定画面の作成）](https://qiita.com/masanaosako/items/0ee752e772f15a218aaa)
7. [iOSアプリ開発：タイマーアプリ（7.アラーム音選択の実装）](https://qiita.com/masanaosako/items/2c045cdc37c6c81c8163)
8. [iOSアプリ開発：タイマーアプリ（8.プログレスバーの実装）](https://qiita.com/masanaosako/items/29967194c7d6916321ea)
9. [iOSアプリ開発：タイマーアプリ（9.プログレスバーの色をカスタマイズする）](https://qiita.com/masanaosako/items/41306ea702a3d614ab62)
10. [iOSアプリ開発：タイマーアプリ（10.アニメーションを作成する）](https://qiita.com/masanaosako/items/e860c516cce5561921f8)


##Gitリポジトリ
以下のGitリポジトリのURLからサンプルコードをご覧いただけます。
https://github.com/msnsk/Qiita_Timer.git
RubyでC拡張ありのgemをインストールする際に、make -j4  みたいに複数のCPUのコアを使って早く終わらせたい

マルチスレッド、もしくはマルチコアを活用してRubyのネイティブ拡張をインストールしたら早くて便利だと思います。

[ruby-jp.slack.com](https://ruby-jp.github.io/)にて

![RubyでC拡張を使っているgemをインストールする際に、make -j4  みたいに複数のCPUのコアを使って早く終わらせたい時はどんなオプションをつければいいですか？](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/5dd9fe71-470a-21ab-24ad-5946d75f6f3f.png)

![環境変数で設定した記憶があるけど忘れてしまった](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/0377ec91-40ff-c6b2-147b-754014e75ddb.png)

![export GNUMAKEFLAGS=-j4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/729dde9c-e915-ed1d-339a-6cc015f86b43.png)

というわけで、正解は

```
export GNUMAKEFLAGS=-j4
```

です。お手持ちのコンピュータのコア数に合わせて

```
GNUMAKEFLAGS=-j8 gem update
```

等してみてください。C拡張をゴリゴリ使っているgemの場合アップデートが高速に終了するかも知れません。

この記事は以上です。
VBAからChromeを操作できるように環境設定をする

## Selenium Basicのインストール

1. まずは、SeleniumBasicのサイトにアクセス
以下のURLをクリック。
http://florentbr.github.io/SeleniumBasic/

2. 『Download』の『Release page』をクリック
クリックすると、Selenium BasicのGithubに飛びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673916/f934d3f1-fd63-92dc-0ff1-b99ee4e6f8c1.png)


3. SeleniumBasicのインストーラをダウンロード
（バージョンは執筆時点のもの）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673916/1293dd48-4b96-4940-a8f0-c614cdb651f1.png)


4. インストーラを実行
ダウンロードができたら、インストーラを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673916/22065158-d5c5-147f-8db8-c4aa8ddd5b24.png)
ここは特に何も考えずに、ひたすら『Next』→『Install』→『Finish』で、インストールは完了です。


## SeleniumBasicを最新のChromeに対応させる

SeleniumBasicに元から入っているドライバーだと、最新のChromeに対応していないようなので、最新版のドライバーをダウンロードしてそれを適応させます。

1. 以下のURLにアクセス
https://sites.google.com/a/chromium.org/chromedriver/


2. 『All versions available in Downloads』の
1行目の『ChromeDriver〇〇.〇～』をクリック
（ここでのバージョンは執筆時点のもの）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673916/4f887d6d-4569-01d8-e0a2-00bc0fa75dbd.png)

3. ドライバーをダウンロード
ここは自身の環境に合わせて選択してください。
今回はWindows 10なので、win32.zipをダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673916/7ebac1db-8faf-e169-0328-81276e12343d.png)

4. ダウンロードしたドライバーをSeleniumBasicに入っているものに上書きする
ダウンロードした最新のchromedriver.exeを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673916/e3e7280a-320f-c929-1a5c-6d6b54f399ef.png)
SeleniumBasicの中のchromedriver.exeに上書きします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673916/a4820b7a-7443-1c44-63b4-c5b1a7d813e2.png)

SeleniumBasicの場所はアドレスバーで以下をコピペするとすぐ見つかります。
%LOCALAPPDATA%\SeleniumBasic


## VBEにて参照設定

1. VBEを開き、『ツール』→『参照設定』を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673916/e3114d94-2f95-1a46-2093-116a7a0e8509.png)

2. Selenium Type Libraryにチェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673916/d32c829b-403b-c687-cdef-a208ad67abe4.png)

チェックを入れたら、『OK』をクリック

以上で、VBAからchromeを操作する環境が整いました！！！
お疲れ様でした。
Javascriptのメソッド（初心者向け）

#この記事の対象者

JavaScirptのメソッドが全然わからない方


#JavaScriptのメソッドとは
こういうのです。

```test.html
<body>
    <script>
        arrayA = ["リンゴ","ゴリラ","ラッコ"]
        arrayA.shift()
    </script>
</body>
```

2行目の事です。ドットの後に何やら書いてあるところがメソッドです。

```
arrayA.shift()
```

#解説　
この右辺の**arrayA.shift()**が何をしているかというと

１．配列arrayAに対して.shift()で配列の一つ目の要素を削除　（"リンゴ"が削除）
　　　["リンゴ","ゴリラ","ラッコ"]　=>  ["ゴリラ","ラッコ"]


以上です。

つまり**<font color="Red">「.」を挟んだ左側の物(arrayA)に対して右側の処理(shift())を行う」**のです。

いいですか？左側の物に対して右側の処理を行うです。これだけです。
あなたは基本的にこの右側の処理についてググることになります。

##ちなみに
皆さんが最初に通るであろう　console.log('hello world')　 も　<font color="Red">左側の物(console)に対して右側の処理(log('hello world'))を行う」</font>をしているということなんですね。



#おわりに
今回学んだ<font color="Red">左側の物に対して右側の処理を行う</font>という考え方でできないんだけど？という記述に今後出会うだろうと思います。その時は初級者ではないはずなのでもっと難しそうな解説が読めるはずです。触りはこれくらいでよいと思います。
Associate Android Developer スタディガイド翻訳①

### Associate Android Developer certificate
Google公式のAndroid開発者認定試験があるの、ご存知ですか。
[Google Developers Certification : Associate Android Developer](https://developers.google.com/certification/associate-android-developer)

あんまり普及してないのか、受験した方のブログなんかも少ないですね。

自分は太古の時代にAndroidアプリ開発をしていて、最近また何かやってみようとAndroid Studioをインストールしたものの何がなんだかわからず、とりあえず初心者として基本から勉強しようかと。
試験を受けるかはさておき、Androidの基礎を理解するのによさそうと思ってスタディガイドを読み始めたところです。
ただ漫然と読んでると目が滑るので、ノート取り代わりに翻訳してみることにしました。

※そもそも試験が英語のみでオンライン面接もあるそうなので、英語が全くダメだと取得は難しいと思われます

今回の翻訳はこちら
[Study Guide : Android Core](https://developers.google.com/certification/associate-android-developer/study-guide/android-core)

### Android Core
AndroidはLinuxベースで主にモバイル端末向けにデザインされたOSです。Anroidアプリはマルチタスクで、Java、Kotlin、またはC++で書くことができます。
AAD(訳注：アソシエイトAndroid開発者) 認定試験の準備のため、Android開発者は以下の必要があります：
    - Androidシステムの構造を理解している
    - Androidアプリの基礎的な構成について説明できる
    - Androidアプリのビルド、実行方法を知っている
    - `Toast`や`Snackbar`を用いたポップアップで簡単なメッセージを表示できる
    - `Notifications`を使用してアプリUIの外側でメッセージを表示することができる
    - アプリのローカライズ方法を理解している 
    - `JobScheduler`を使用してバックグラウンド実行タスクをスケジュールできる

### Resources
訳注：文中で触れられたリソースについてリンクが並んでます。リンク先ページは↑のURLリンクから本家で参照してください

> [Android Developers -> Toasts](https://developer.android.com/guide/topics/ui/notifiers/toasts)（※日本語）

　　Android Developers : トーストの概要

> [Android Developers -> Snackbar](https://developer.android.com/reference/android/support/design/widget/Snackbar)（※英語）
 
　　Android Developers : Snackbar
 
> [Android Developers -> Localize your app](https://developer.android.com/guide/topics/resources/localization)（※日本語）

　　アプリをローカライズする

> [Android Developers -> Application fundamentals](https://developer.android.com/guide/components/fundamentals)（※日本語）

　　アプリの基礎

> [Android Developers -> Create a notification](https://developer.android.com/training/notify-user/build-notification)（※日本語）

　　通知を作成する

> [Android Developers -> AndroidX overview](https://developer.android.com/jetpack/androidx)（※日本語）

　　AndroidXの概要

> [Android Developers -> Getting started with Jetpack](https://developer.android.com/jetpack/docs/getting-started)（※日本語）

　　Android Jetpackを使ってみる

> [Android Developers -> Android KTX (Kotlin)](https://developer.android.com/kotlin/ktx)（※日本語）

　　AndroidKTX（Android Jetpackの一部）

> [Codelabs -> Notifications](https://codelabs.developers.google.com/codelabs/android-training-notifications/index.html#0)（※英語）

> [Codelabs -> JobScheduler](https://codelabs.developers.google.com/codelabs/android-training-job-scheduler/index.html#0)（※英語）

> [Codelabs -> WorkManager (Java)](https://codelabs.developers.google.com/codelabs/android-workmanager/index.html#0)（※英語・実際はKotlinになっている）

> [Codelabs -> WorkManager (Kotlin)](https://codelabs.developers.google.com/codelabs/android-workmanager-kt/index.html#0)（※英語）

***
今回はここまで。
Resourcesはもう少し色々読んでから追記します。
docker-compose upでコンテナが立ち上がらずエラーが出たときの話

前日まで使えていたのに、ある日いきなりdockerが立ち上がらなくなった。（PCアップデートしたせい？？）

最初にでたのはこんな感じのエラー

```
 Could not find ancestry-3.1.0 in any of the sources
 Run `bundle install` to install missing gems.
```
上記のgemはgemfile.lockに載っているし、エラーが出るのはおかしいと思いつつも`docker-compose run web bundle install`してみたけど案の定同じエラーで動かない。

検索してみるとこんな記事があった。
https://teratail.com/questions/291124
試しに`docker-compose build --no-cache`をやってみると次は以下のエラーが

```
db uses an image, skipping
Building web
Traceback (most recent call last):
  File "site-packages\docker\utils\build.py", line 96, in create_archive
OSError: [Errno 22] Invalid argument: '\\ディレクトリ名\\￥アプリ名\\node_modules\\.bin\\acorn'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "docker-compose", line 3, in <module>
  File "compose\cli\main.py", line 67, in main
  File "compose\cli\main.py", line 126, in perform_command
  File "compose\cli\main.py", line 302, in build
  File "compose\project.py", line 468, in build
  File "compose\project.py", line 450, in build_service
  File "compose\service.py", line 1125, in build
  File "site-packages\docker\api\build.py", line 160, in build
  File "site-packages\docker\utils\build.py", line 31, in tar
  File "site-packages\docker\utils\build.py", line 100, in create_archive
OSError: Can not read file in context: \\?\ディレクトリ名\アプリ名\node_modules\.bin\acorn
[24060] Failed to execute script docker-compose
```

上記のエラーで調べてみると、この記事にたどり着いた。
https://crieit.net/posts/docker-compose-build-Can-not-read-file
記載されている通り、.dockerignoreを作成しnode_modulesと記載すればdocker-compose buildが動くように！


エラーで検索した際にdockerのバージョンの問題という記事も見つけたのですが、自分のバージョンと違うようだったので謎が深まりました...無事解決してよかったです。
https://github.com/docker/compose/issues/5888

今回エラーが起きたバージョン

```
docker-compose version 1.27.4, build 40524192
Docker version Version:  19.03.13
```
PyCryptodome AES暗号化と復号処理

## 環境
Python3.7
pycryptodome 3.9.8

## ソースコード

```python3
# -*- coding: utf-8 -*-
from Crypto.Cipher import AES

key = b"1234567890123456" 
data = b"hogehoge" # 暗号化する文字

# 暗号化処理
cipher = AES.new(key, AES.MODE_EAX)
ciphertext, tag = cipher.encrypt_and_digest(data)

print(ciphertext)
print(tag)
print(cipher.nonce)

# 復号処理
cipher_dec = AES.new(key, AES.MODE_EAX, cipher.nonce)
dec_data = cipher_dec.decrypt_and_verify(ciphertext, tag)

print(dec_data)
```

## 結果
```
b'7\xecO,\xa4J\\:'
b'\x8eQ\x95\x0eL\xe2\xa2\xbb\x9e\xf9!\xb7\x83\xbd\xefk'
b'\x16\xe3\xf7`\x0e\x05L/\xf7\xe0\x1a\x067\xa4V\xfa'
b'hogehoge'
```

## 参考

https://pycryptodome.readthedocs.io/en/latest/src/examples.html
PHP クラス名::classはどういう処理？？

# 目的

- 実務のコードで`クラス名::class`という処理を見つけてパッと意味がわからなかったので備忘録としてまとめる。

# すみません

- 備忘録としてのメモ的要素が大きいため多少見ずらい記事になるかもしれません。すみません。

# `クラス名::class`とは

- 公式ドキュメントによると名前を解決しているらしい。
    - [公式ドキュメントリンク](https://www.php.net/manual/ja/language.oop5.basic.php#language.oop5.basic.class.class)
- 簡単に言うとクラスの場所を出力してくれるキーワードである。
- 例えば下記のようにPHPのコードが書かれていたとする。

    ```php
    <?php

    use App\Models\Test;

    class Foo
    {
        echo Test::class;
    } 
    ```
- 上記を実行した際に下記が出力される。

    ```terminal
    App\Models\Test
    ```
- 若干違うがターミナルでファイル名を指定してコマンド`$ pwd`を実行したときと似ていると感じた。（ファイルを指定してコマンド`$ pwd`を実行すると指定されたファイルのフルパスが出力される。）
- `クラス名::class`はuse宣言で保持しているクラス名情報を返してくれるものである。
かんばんとZenHub

![Simple-kanban-board-.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/2be6faff-0fbf-71c3-5095-2afe3c4b1061.jpeg)

---

## かんばん

- 何をするか
- 何をしているか
- 何が終わったか
- チームで共有

---

## ZenHub

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/b3f504e4-be15-c7cd-dc48-392233b8f702.png)

---

- NewIssue（振り分け前）
- IceBox（やらない）
- Backlog（次にやる）
- InProgress（進行中）
- Review（レビュー中）
- Done（完了）
- Clonse（クローズ）

---

## Backlog

- 次にやる
- 左上から優先順位が高い
- 行うIssueをアサイン

---

## Review

- Issueが終わったらReview
- PRとIssueを紐付けすると見えやすい
- PRのマージでIssueをクローズ

---

NewIssue
  -> Backlog
  -> InProgress
  -> Review
  -> Close

---

# 不明点は随時フォローさせてください

---

## デイリースクラム

- 昨日やったこと
- 今日やること
- こまっていること
rw-r--r--などのファイルモードの文字列を、0644などの8進数に変換するシェルスクリプトのロジック例

備忘



AnsibleやChefなどによる構成やそのテスト時に、rw-r--r--などのファイルモードの文字列を0644などの8進数に変換する必要があった。


# スクリプトロジックサンプル

```bash

MODE="rw-r--r--"

echo "0$(
  echo "ibase=2; obase=8; $( 
    echo "${MODE}" | sed -e 's/..\(.\)..\(.\)..\(.\)/\1\2\3/' -e 's/[-x]/0/g' -e 's/[^0]/1/g'
  )$(
    echo "${MODE}" | sed -e 's/[a-z]/1/g' -e 's/[^1]/0/g'
  )" | bc
)"
```

↓
0644

MODE="rwsr-xr-T"
↓
05754


# sed -e 's/..\\(.\\)..\\(.\\)..\\(.\\)/\1\2\3/' 
sStTなどの拡張部分処理の初段
3,6,9文字目を取り出す
rwsr-xr-T ならば sxT

# sed -e 's/[-x]/0/g' -e 's/[^0]/1/g'
-やxは0に、それ以外は1に変換
sxT ならば 101

# sed -e 's/[a-z]/1/g' -e 's/[^1]/0/g'
本来のrwx部分の処理
小文字アルファベットは1に、それ以外は0に変換
rwsr-xr-T ならば 111101100


# echo "ibase=2; obase=8; $( ... )$( ... )" | bc
一つ目の...を実行したstdout文字列と二つ目の...を実行したstdout文字列をつなげて2進数として読み込み8進数で出力
なお、$( ... )は、stdout行末の改行コードなどを取り除く

# echo "0$( ... )"
...を実行したstdout文字列の先頭に8進数であることを示す0を追加して出力



## 参考1: Linuxの場合、statコマンドでファイルのパーミッションを直接確認可能

```
$ stat -c %a /etc/hosts
644
```

https://www.softel.co.jp/blogs/tech/archives/5313



## 参考2: AIXの場合、以下のソリューションが提供されている

https://www.ibm.com/support/pages/ibm-aix-how-show-numerical-permissions

上を参考にスクリプトを書くと以下の様な感じか。

```:/usr/bin/stat
#!/usr/bin/ksh
printf "$(
  echo "ibase=2; obase=8; $(
    /usr/bin/ls -l $@ | /usr/bin/awk '{
      a=substr($1,4,1)substr($1,7,1)substr($1,10,1); gsub("[-x]",0,a); gsub("[^0]",1,a);
      b=substr($1,2,9); gsub("[a-z]",1,b); gsub("[^1]",0,b); 
      print a b;
    }' 
  )" | bc
)    "
/usr/bin/ls -l $@
```
rails コマンドが使えなくなった時の対処法

rubyのバージョンを上げたところ、rails s　しようとしたら、コマンドが使えなくなった。

``$ rails --version rbenv: rails: command not found
The `rails' command exists in these Ruby versions:
  2.6.5 ``

##結論 gem 'rails'　をインストールしよう
1.`gem update --system`
2.`gem install bundler`
3.`gem install rails`

ターミナルで rails -vを打ち込み、Rails 5.2.3が表示されたらOKです。
npm install / yarn add でパッケージをインストールする

### 前提

参考：[npmとyarnのコマンド早見表](https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8 "npmとyarnのコマンド早見表")

*npmやyarnを使ってパッケージをインストールしたら、どこに保存されているの？*
**`グローバル環境にインストール` か `ローカル環境にインストール` に保存される**

#### グローバル環境とは
システム共通ディレクトリ、nodeのグローバル環境のこと
システム全体で利用するツール・コマンド類をインストールする場合に利用する

#### ローカル環境とは
自身で作ったアプリケーション（プロジェクト）の中の環境のこと
追加されたパッケージは、アプリケーション（プロジェクト）の中の`package.json`の中に「どのパッケージをインストールするか」を記述する
アプリケーション単位で利用するパッケージをインストールする場合に利用する

***

### グローバル環境へインストール
nodeのグローバル環境へパッケージをインストールされる
**`-g` オプションはグローバル環境**のこと
**installは `i` で省略**できる
#### npm
```
npm install -g パッケージ名

// 以下でもOK

npm i -g パッケージ名
```

#### yarn
```
yarn global add パッケージ名 
```
***

### ローカル環境へインストール
ローカル環境へインストールには `--save` をつける
インストールされると、`package.json` ファイル内の `dependencies` に追記される
#### npm
```
npm install --save パッケージ名
```

#### yarn
```
yarn add パッケージ名
```
***

### ローカル環境へ、開発パッケージをインストール
インストールする際に `--save-dev` をつける
インストールされると、`package.json` ファイル内の `devDependencies` に追記される
**`--save-dev` は `-D` で省略**できる
#### npm
```
npm install --save-dev パッケージ名

// 以下でもOK

npm i -D パッケージ名
```

#### yarn
```
yarn add --dev パッケージ名
```
***

### Tips
*github や gitlab でチーム開発をしているとき、新しいパッケージが導入されたけど、まだ自分のローカル環境で設定されていないとき*
**【結論】自分のローカルリポジトリにgit pullしたら、`package.json` ファイル内に記載されている設定をインストールする**
```
$ git pull origin master

// npmで開発している場合
$ npm install

// yarnで開発している場合
$ yarn install
```