OmniAICreator/Qiita-1.07M huggingface dataset:
Dronecode Devマニュアル抜粋&翻訳-PX4 Architectural Overview

DroneのオープンソースであるDronecodeについて理解するために本家のマニュアルを抜粋&翻訳しています。

今回は[PX4 Architectural Overview](https://dev.px4.io/master/en/concept/architecture.html)ページの翻訳&抜粋です。


# アーキテクチャ概要
- PX4は主にフライトコントロールシステムとミドルウェアの2つのレイヤーからなる。
- PX4はエアフレーム(機体)によらずコードベースは同じ
- リアクティブな作りになっている
    - コンポーネント志向
    - 非同期なメッセージやり取りでの通信
    - 様々なワークロードに対応している

# アーキテクチャの全体像

<img src="https://dev.px4.io/master/assets/diagrams/PX4_Architecture.svg" width=60% alt=diagram>

大きく分類して
- Storage
- External Connectivity
- Drivers
- Flight Control
- Message Bus
という構成に分かれている

それぞれのモジュールは**uORB**というpublish-subscribeのMessage Busを介して通信します。

## Flight Stack(フライトコントロールシステム)
<img src="https://dev.px4.io/master/assets/diagrams/PX4_High-Level_Flight-Stack.svg" width=60% alt=diagram>
- estimator：複数のセンサーからの入力を受け取り、統合し、現在の機体状態を推定します。
- controller(Position Controller/Attidude&Rate Controller)：推定された機体状態と、指定の状態とを合わせることを目的とし、機体を目的位置に動かすための姿勢と推力を出力します。
- mixer：「右に移動」といった指示を個々のモーターの動作に変換するモジュールです。機体の構成（モーターの配置、重心、回転慣性）に応じた値を算出します。

## Middleware
ミドルウェア層は主に組み込みセンサーなどのデバイスドライバーや、コンパニオンコンピュータ・GCS(Ground control system)、メッセージバスのuORBなどからなります。
また、机上シミュレーションのためのモジュールも含まれています。

## Update Rates
IMUドライバーのサンプリングレートは1kHzで、250Hzに統合して発信する。他の、navigatorなどのモジュールはもっと低いサンプリングレート、という感じになっている。
メッセージの送信間隔は `uorb top` コマンドで調べられます。

## Runtime Environment
PX4はPOSIX-APIを持つOS(Linux, macOS, NuttX, QuRT)上で動作し、各モジュールはメモリ空間を共有して動作します。

モジュールの起動方法には2種類あります。
### Tasks
個別のスタックとプロセス上で動作させる方式

### Work queue tasks
キューイングされたタスクとして順番に実行される方式
- すべてのタスクは相互に割り込むことができないため、協調して動作する必要があります
- 複数のタスクをキューで実行でき、また、複数のキューが存在する場合があります。
- タスクは、実行される時間を指定するか、uORBトピック更新コールバックを介してスケジュール実行されます。

なお、　`uorb top` コマンドではWork queue上で実行されているタスクは見えない(work queueプロセス自体が見える)。work queue上で実行されている中身を見たい場合は `work_queue status` コマンドを使います。


## Background Tasks
上記Taskの中から`px4_task_spawn_cmd()` を実行することで、バックグラウンドのタスクを実行できる

## OS-Specific Information
### NuttX
NuttXはPX4用OSとして最適な(primaryの良い訳が思いつかない。。)OSです。
モジュールはタスクとして実行される。

### Linux/macOS
LinuxまたはmacOS上で動作する場合、PX4は単一のプロセスで実行され、モジュールは個別のスレッドで実行されます。（NuttXのようにタスクとスレッドに違いはありません）

# Controller Diagrams
(固定翼や、VTOL(垂直離着陸機)の解説もありますが、省略)

## Multicopter Position Controller
(表記には、[**PX4 notation**](https://dev.px4.io/master/en/contribute/notation.html)という表記法を使っています)

<img src="https://dev.px4.io/master/assets/diagrams/px4_mc_position_controller_diagram.png">

- 推定は、EKF2(Extended Kalman Filter)を用いて行う


指定位置と推定位置の差(Δr)を元もとにP(Proportional：比例制御)を行い、速度指定値算出を行う。
その指定速度と、推定速度の差(Δv)を算出し、PID制御で、F(thrust：突き上げ？)の指定値を算出する。
- F(thrust)指定値から射影計算しZ方向への指定値を算出する。
- F(thrust)指定値とattitude(姿勢)の指定値を統合して計算し、新たなattitude(姿勢)の指定値を算出する
という流れ。
スプレッドシートのクエリ関数でハマってる最中

# はじめに
スプレッドシートのQUERY関数はDBの問い合わせほぼそのままに使えるのでとても便利な関数です。
このQUERY関数でハマっている真っ最中で投稿します。

# ハマった内容
SELECT句でBYを指定できない

# エラー内容
BYがうんぬんかんぬん

# なんとなくわかったこと
お察しのよいかたはわかったかもしれないですが、
「BY」が「order by」の「by」として認識されている模様。
調べているがなかなか回避策が出てこない
⇒出てこないのは、自分が何か間違っているのかな・・・

# 今の結論
BY列を使うのはやめましょう。
CircleCI で Severless Framework のデプロイを IAM ロールを使ってクロスアカウントでやる

CircleCI で ServerlessFramework のデプロイを行うときに環境変数で設定した AWS クレデンシャルから別のアカウントにデプロイしたいパターンがあったのでメモ。

別のアカウントのクレデンシャルを [CircleCI のコンテキスト](https://circleci.com/docs/ja/2.0/contexts/)使って環境変数に登録してしまえばいいじゃないかとも考えましたが、何個もクレデンシャル登録したくないなーということでスイッチロールでできないかやってみました。

## 先に結論
### 試した環境
aws-cli 自体のインストール、 serverless framework は公式 orbs を使っています。

- CircleCI 2.1
- Orbs
    - circleci/serverless-framework@1.0.1
    - circleci/aws-cli@1.0.0

### config.yml

aws cli のクレデンシャルに直接スイッチ先の情報を書き込んでいます

```yaml:config.yml一部抜粋
  "setup credential":
    steps:
      - aws-cli/setup:
          aws-access-key-id: AWS_ACCESS_KEY
          aws-region:AWS_REGION
          aws-secret-access-key: AWS_SECRET_KEY
          profile-name: jump
      - run:
          name: setup credential
          command: |
            echo "[hogehoge]" >> ~/.aws/credentials
            echo "region = {リージョン名}" >> ~/.aws/credentials
            echo "role_arn = {IAM ロール ARN}" >> ~/.aws/credentials
            echo "source_profile = jump" >> ~/.aws/credentials
      - serverless/setup
      - run:
          name: deploy
          command: sls deploy
```

## 試してダメだったこと
### aws cli の configure set を使う

config.yml の中でジャンプ先のクレデンシャルを作るのに configure set を使ってみましたが、 API キー を空だったり適当な値を入れると `sls deploy` がエラーになってしまいます。
かと言って、 API キーを登録しないでとりあえずリージョンなど登録してもクレデンシャルが作られず `~/.aws/config` の方に書き込まれてしまって、 `sls deploy` 実行時に「クレデンシャルがないよ！」と怒られてしまいました。

```yaml:NG例
      - run:
          name: setup credential
          command: |
            aws configure set region {リージョン名} --profile hogehoge
            aws configure set role_arn {IAM ロール ARN} --profile hogehoge
            aws configure set source_profile jump --profile hogehoge
            # 空の API キーは NG でした
            aws configure set aws_access_key_id "" --profile hogehoge
            aws configure set aws_secret_access_key "" --profile hogehoge
```

### サードパーティーの orbs を使う
公式 aws-cli はスイッチロールは対応してませんが、サードパーティーな orbs でこの辺の拡張してたりしないだろうか・・・ということで探してみました。

発見！
https://circleci.com/orbs/registry/orb/appfolio/awscli 

それらしいパラメーターもあって良さそう
<img width="906" alt="orbs パラメータ一部抜粋" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149365/9b7dba6a-22ee-74a7-2077-76ee45c74bab.png">

・・・ただ、 orbs のソースを見てみると
<img width="593" alt="orbs ソース一部抜粋" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149365/382d6f5c-0b01-cc3b-14c6-4f624c2056e1.png">

なぜか `source_profile` に自分自身を設定しているのでスイッチロールできなさそう・・・。


## 参考
[Serverless Frameworkで、IAMロールを利用しクロスアカウントにデプロイする](https://dev.classmethod.jp/articles/serverless-framework-cross-account/)
CSSで長文を省力する際に学んだ方法

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#複数行の文章を省略
複数行テキストの末尾を…（3点リーダー）で省略したい。

以下のコードを使用したら簡単に実現できたが
デメリットとしてなどがある
- IEで未対応
- モバイル対応のみならば使える（Android版のFirefoxユーザーもいるが…）
- 使う場合はフォールバックも設定しておくのが望ましい

```css
p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```

IEにも対応できる様にする為にbefore, after要素を使用したコードが以下の形です！

```css

.p {
  position: relative;
  max-height: 10em; /* 自分の指定の高さ */
  overflow: hidden;
  padding-right: 1rem; 
}
.p::before {
  position: absolute;
  content: "...";
  bottom: 0;
  right: 0;
}
.p::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: white;
}
```


#参考記事
・[CSSで長い文章を省略して省略記号を表示させる方法](https://www.nxworld.net/tips/css-text-truncate.html/)
・[複数行テキストの末尾省略をCSSのみで実現する](https://qiita.com/ezawa800/items/534e36f819e9ad2712af/)
・[Multi-Line Truncation with Pure CSS](https://css-tricks.com/multi-line-truncation-with-pure-css//)
Wordpressで「&」が含まれる記事タイトルをURLエンコードするときに気を付けること

![eyecatch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489275/9e49d04f-4c2d-650a-eeeb-32752c2056fc.png)

Wordpressのカスタマイズで記事のタイトルをURLエンコードしようとしたところ、タイトルに「&」が含まれる記事がうまくエンコードされない事案に悩まされました。
紆余曲折の末、HTMLエンコードされた文字列をURLエンコードしようとしていたのが良くなかったということが分かりました:cold_sweat:

# HTMLエンコードとURLエンコード

フロント側ではHTMLエンコードとURLエンコードをよく使うかと思います。
ここで、両者の違いを再確認してみましょう:book:

## HTMLエンコード

HTMLで特殊文字をブラウザで出力する場合に使われるエンコードです。
`&●●;`のような出力結果になります。

## URLエンコード

URLのパラメータなどに2バイト文字や特殊記号が含まれる場合に使われるエンコードです。
`%●●`のような出力結果になります。

# 「Love&Peace」というタイトルの記事でget_the_title();を呼び出すと…

get_the_title();は管理画面で入力した記事のタイトルがそのまま返ってくるという認識だったので、当然`Love&Peace`が出力される思っていまいた。
しかし、実際はHTMLエンコードされるので`Love&#38;Peace`が正解です。

つまり、`Love&Peace`をURLエンコードした結果が欲しかったのに、`Love&#38;Peace`をURLエンコードしようとしていたのが原因でした。

#たどり着いた解決策はこれ！

```php
echo urlencode(html_entity_decode(get_the_title()));
```

今回エンコードしたいのは`Love&#38;Peace`ではなく`Love&Peace`なので、URLエンコードする前に`&#38;`を`&`にする必要がありました。

このコードでやっていることは以下のようなことです。

1.html_entity_decodeを使ってHTMLエンコードされた文字列を一旦デコードする(`&#38;`⇒`&`)
2.urlencodeを使って1.をURLエンコードをする(`&`⇒`%26`)
IBM Cloud Functions からPythonで Slack にメッセージをPostする


###手順：
1. Slack で対象チャネルに Incoming Webhook 設定
2. IBM Cloud functions でアクション作成

---

### 1. Slack で対象チャネルに Incoming Webhook 設定


Slack のマニュアルを確認して URLを取得します。
* アプリの追加はワークスペースの管理者の承認が必要

・[Slack での Incoming Webhook の利用]
(https://slack.com/intl/ja-jp/help/articles/115005265063-Slack-%E3%81%A7%E3%81%AE-Incoming-Webhook-%E3%81%AE%E5%88%A9%E7%94%A8)
・[Sending messages using Incoming Webhooks]
(https://api.slack.com/messaging/webhooks)

=>  ”https://hooks.slack.com/services/xxxxxxxxx/xxxxxxx/0KX1TxxxxxwP1xxxxx61axxxxx”
　　のようなURLを取得します。


---
## 2. IBM Cloud functions でアクション作成

IBM Cloud コンソールにログイン -> Functions に移動
https://cloud.ibm.com/login


・[アクションの作成]
(https://cloud.ibm.com/docs/openwhisk?topic=openwhisk-actions#actions_create_ui)
 コンソールからのアクションの作成を行います。

**IBM Cloud Functionサービスがすでに作成されている前提です。
![スクリーンショット 2020-06-09 9.08.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/98833d97-78d9-92ce-0bd2-3227b2d1e763.png)

-> create
![スクリーンショット 2020-06-09 9.10.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/869f36a0-4cfa-4075-182c-87a1e336ff14.png)
-> Actionを選択

![スクリーンショット 2020-06-09 9.10.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/bb5f01c9-b821-d182-0b27-7dd2f518245f.png)

-> アクション名、パッケージを指定し、ランタイムは Python を選択します。


Codeを入力します。
サンプルのcode

```Python
import requests
import json

def main(dict):

 body={'username':'Alert','icon_emoji':':star:','text':'IBM Cloud Functions Test'}

 url = "https://hooks.slack.com/services/xxxxxxxxx/xxxxxxx/0KX1TxxxxxwP1xxxxx61axxxxx" #<- Slackで取得したURL
 response = requests.post(url,data=json.dumps(body))
 return {"message" : "IBM Cloud Functions test post to slack"}

```
body 部分に usename、icom_emoji、text(メッセージ) を入力します。

他のオプションはマニュアルが参考になります。
・chat.postMessage
(https://api.slack.com/methods/chat.postMessage)


![スクリーンショット 2020-06-09 9.12.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/7033e5c1-cb77-6c64-68de-0d87bca4de40.png)
-> コード右上のSave を押します。

![スクリーンショット 2020-06-09 9.27.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/88dd1f6c-495f-16ff-bf6b-7d877cdfd546.png)

-> SaveボタンがInvokeに変わります。Invoke を実施します。
   (URL は対象の内容に置き換えてます)

![スクリーンショット 2020-06-09 9.21.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/59c44631-3336-883b-316e-6ceb0d25037a.png)

-> コードの右列に実行結果が出力されます。


---

結果、Slackチャネルには次のように通知されます。
![スクリーンショット 2020-06-08 19.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/798332ea-54fa-383f-d519-b73a80d56a0c.png)


サンプルでは、星マークを使用しましたが、変更可能です。
Emoji Cheat Sheet に一般的な一覧があります。（参考：[Emoji Cheat Sheet] (https://www.webfx.com/tools/emoji-cheat-sheet/) ）


以上です。

----
参考：
・[IBM Cloud Functions](https://cloud.ibm.com/docs/openwhisk?locale=ja)
【Adobe XD】ツイッター、名刺などに使えるアイコン作成【似顔絵】

#【Adobe XD】ツイッター、名刺などに使えるアイコン作成【似顔絵】

##アイコン、名刺、BLOGなどの吹き出しアイコンに使えそうなのでXDで似顔絵を作成していきます。

###✅アイコンのサイズを８の倍数800＊800で設定

- 今回はデザインサイズ推奨８の倍数で設定

参照サイト：
https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/

###✅イラストの書き方を学ぶ

参照サイト：
https://design-trekker.jp/design/illustrator/illustrator-illusttips/

###✅自分の写真をXDへ挿入40％に透明化します

- 眉毛を写真にそって、輪郭を写真にそってペンツール、楕円ツールで書く

###✅あとはイラスト風に上記の書き方を学んだサイトに真似て書いていく

###✅リッチに仕上げるため影を追加します。作った似顔絵をグループ化してオフホワイトにグラデェーションで光の入り具合があるように表現

- 自分の顔写真が対称にならなかったので対称になるように作っていく
- だいぶ好青年っぽくなった

![my-icon シンプル 影付き.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610880/aef9bdd2-50bb-fa68-8150-30a59beb3c97.png)
SASOS(Single Address Space OperatingSystem)とは

DroneCodeを見ていると、
**Single Address Space**という言葉がちょくちょく出てきてなんのことか気になったので調べてみた。

ただ、ぐぐってみると論文っぽいものなどが多く、奥が深い話のようなので、ちゃんと調べるのは~~諦め~~将来にゆずりました。本当に触りだけの話です。



## SASOS
Single Address Space自体の解説はあまり見つからず、
Single Address Space OperatingSystem(SASOS)というOSの方式については少し解説があったので、
このSASOSの解説を参考にすることにしました。


## 概要
https://wiki.c2.com/?SingleAddressSpaceOperatingSystem
によると、
>In a Single Address Space OperatingSystem (SASOS) all processes run within a single global virtual address space
とある。

すべてのプロセスが単一のグローバル仮想アドレス空間内で実行されるようなOSらしい。


http://www.cse.unsw.edu.au/~cs9242/02/lectures/12-mungi/node3.html
によると
>・Unique addresses for all data items
>　・threads always agree about the address of data
>・Sharing by reference
>　・simply pass pointer
>・no marshalling or conversion of data formats required
> 　・on-disk format same as in-memory format

とにかくシンプルにメモリ空間を共有する方式なのかな。



## 対比：Multiple Address Space
SASOSがなにかを知るために、対比としてMultiple Address SpaceのOS(MASOS)を知るとわかりやすい気がしたので探してみた。

http://www.cse.unsw.edu.au/~cs9242/02/lectures/12-mungi/node2.html
ここの説明がわかりやすかった。
>Each address space has own virtual → physical mapping.
プロセス上の仮想メモリは、実際のメモリアドレスに適宜マッピングされる方式

### メリット
- メモリ空間を最大限有効活用できる
- プロセス間が独立して干渉しない

### デメリット
- メモリ空間上のバラバラにあるので、プロセス間でのメモリ共有が困難
Nuxtをherokuにデプロイするコマンドメモ

# Nuxtをherokuにデプロイするコマンドメモ

Heroku Gitを利用するパターンです。
ほぼドキュメントの写し。メモ。

## 手順

herokuのCLIインストール

```bash
npm install -g heroku
heroku login
ブラウザ立ち上がるのでログイン
```

リモートリポジトリを作成したappのリモートリポジトリに

```bash
cd /path/to/yourProject
heroku git:remote -a subscription-switcher-demo
```

Nuxtプロジェクトデプロイ用の設定

```bash
# devDependenciesをインストールする設定
heroku config:set NPM_CONFIG_PRODUCTION=false

# 0.0.0.0のListen
heroku config:set HOST=0.0.0.0

# productionモードに設定
heroku config:set NODE_ENV=production
```

`Propcfile`の作成

```bash
vi Procfile

以下の一行を追加
web: nuxt start
```

Heroku Gitにプッシュ　勝手にデプロイされる

```bash
git add .
git commit -am "comment here"
git push heroku master
```

## おまけ　master以外のブランチをデプロイしたいとき

```bash
git push heroku [branch_to_deploy]:master
```

## 参考
- [Heroku へデプロイするには？ - NuxtJS](https://ja.nuxtjs.org/faq/heroku-deployment/)
- HerokuのappのDeploy画面
【Rails】rails_adminでコピペ新規作成する方法【rails_admin_clone】

#概要
rails_adminを使ってデータ登録するにも、毎回ゼロから打ち込むのめんどくさかったです。
コピペ＆新規作成＆登録したい！

そこで見つけた「rails_admin_clone」のgemですが、日本語解説が見当たらなかったので一応投稿しておきます。


#導入方法

公式Git
https://github.com/dalpo/rails_admin_clone

ぶっちゃけ全部これ見てやれば良いですね……。
Gemfileでの順番が大事だよ！というのだけ注意すれば良さそう。
（順番なんかが影響する事あるんか……）

メソッドの記述場所だけ分かりにくかったのですが、app/model/でそれぞれのモデルに書けば良かったです。

##Gemfile

```text:Gemfile
gem 'rails_admin_clone'
gem 'rails_admin'
```

順番注意！
書いたらbundle install


##共通設定
cloneのaction追加、これは必須。

```ruby:config/initializers/rails_admin.rb

RailsAdmin.config do |config|
  config.actions do
    dashboard
    index
    new
    export
    history_index
    bulk_delete
    show
    clone   # Add the clone action
    edit
    delete
    history_show
    show_in_app
  end
end

```

##カスタマイズ
書く場所は2つ。
config/initializers/rails_admin.rb
app/model/item.rb（それぞれのmodel）

何もしなかった場合、そのままコピーされるっぽい？
全然それでもいい場合もあると思うので全部設定する必要は無さそうです。
ただ画像使う場合とかは設定しておかないと同じ画像を間違えて登録しちゃいそうなので必須かと。


```ruby:config/initializers/rails_admin.rb

# ~~~~~~~~~ 中略 ~~~~~~~~~~

  # カスタマイズ（最下部に書いてます
  config.model 'Item' do
    clone_config do
      custom_method :clone_method_item
    end
  end

end
```

```ruby:app/model/item.rb
class Item < ApplicationRecord
  belongs_to :title
  belongs_to :sub_title, optional: true
  belongs_to :rare, optional: true
  mount_uploader :image, ImageUploader

  def clone_method_item
    self.dup.tap do |item|
       item.title      = self.title
       item.sub_title  = self.sub_title
       item.pos        = self.pos.next  # .nextで次の数値入れてくれるので便利～
       item.image      = "" # この設定しておかないと同じ画像が登録されちゃうっぽい
       item.name       = :draft # 公式を真似したけど意味あるんですかねこれ。初期値が入る？
    end
  end

end
```

以上です！
サーバ再起動忘れずに！

#まとめ
意外と簡単に出来ましたね。
メソッドの定義場所が公式ドキュメントだと分からなかったですけど、それぞれのmodelに書けばいいだけでした。

v0.0.6という感じだったりGitでのスターが少なくて心配でしたが、まぁ使えますし……。

同じようなデータ登録は相当快適に出来ると思います。
慣れた人はrails_admin自体を使ってないという可能性もありますが……ｗ
Railsコミュニティ入ってないので分からないです😂

参考になれば幸いです。

終わり
Reactのchildrenにpropsを追加する方法

## TL;DR

React.cloneElementを使ってchildrenを複製することで任意のpropsを追加できます。

```tsx
const newChildren = React.cloneElement(children, additionalProps)
// React.cloneElementの第一引数にchildren, 第二引数に追加したいpropsを渡す
```

## React.cloneElementとは

`React.cloneElement()`はElementを複製するメソッドです。
引数に以下のような3つの値を受け取ります。

```tsx
React.cloneElement(element, props, [...children])
// element: ReactのElement
// props: 複製するElementにわたすprops, elementがもともと持っていたpropsとマージされる
// children: 複製するElementにわたすchildren
```

## childrenにpropsを追加する

`React.cloneElement()`を使ってchildrenを複製しましょう。
このとき`React.cloneElement()`の第二引数に追加したいpropsを渡すことで、childrenにpropsを追加することができます。

```tsx
const Example = ({children}) => {
  const additionalProps = {hoge: 'hoge', ...}

  const newChildren = React.cloneElement(children, additionalProps)

  return (
    <div>{newChildren}</div>
  )
}
```

一点注意すべきこととして、React.cloneElementの第一引数にはElementしか取れないことがあります。
childrenはElement以外にstringやElementの配列の場合もあります。
そのため上記のExampleのchildrenにElement以外の値を渡した場合、エラーになります。

TypeScriptを使っている場合は以下のようにchildrenに型をつけるとよいでしょう。

```tsx
interface Props {
  children: React.ReactElement;
}

const Example: React.FC<Props> = ({children}) => ( ... )
```

## 利用例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74937/69f0e1d0-09aa-515a-cf20-1e85e427dc30.png)

上記のようなchildrenに2つのElementをを受け取って、2カラムで表示するレイアウトコンポーネントを考えます。

childrenに2つのElementを受け取って、それぞれに対してstyleをpropsから渡せばよいです。

```tsx
interface Props {
  children: [React.ReactElement, React.ReactElement];
}

const TwoColumnLayout: React.FC<Props> = ({ children }) => {
  const left = React.cloneElement(children[0], {
    style: { ...children[0].props.style, flex: "1", marginRight: "10px" }
  });
  const right = React.cloneElement(children[1], {
    style: { ...children[1].props.style, flex: "1" }
  });

  return (
    <div style={{ display: "flex" }}>
      {left}
      {right}
    </div>
  );
};

const App: React.FC = () => (
  <TwoColumnLayout>
    <div style={{ background: "blue" }}>left</div>
    <div style={{ background: "red" }}>right</div>
  </TwoColumnLayout>
);
```

### React.cloneElementを使わないやり方

React.cloneElementを使わずに実現しようとすると以下のようになります。

```tsx
interface Props {
  children: [React.ReactElement, React.ReactElement];
}

const TwoColumnLayout: React.FC<Props> = ({ children }) => {
  return (
    <div style={{ display: "flex" }}>
      <div style={{ flex: "1", marginRight: "10px" }}>{children[0]}</div>
      <div style={{ flex: "1" }}>{children[1]}</div>
    </div>
  );
};
```

React.cloneElementを使った場合と比較すると、こちらのほうがコードとしては簡潔です。

しかし`flex:1`を与えるためにchildrenをラップするdivタグが必要になります。
余計なdivタグが増えてしまうことを許容できるのであれば、このやり方でもよいと思います。

私は余分なdivタグが増えるのは好きではないので、React.cloneElementを使ったやり方でいつも書いています。
WebSpeechAPIで複数選択肢を試して見た

# はじめに
最近はもうOSの音声認識とかいろいろあるので、必要性が薄くなっているがChromeに付属するWebSpeechAPIで音声入力を作れないかテスト。
OS付属のものは基本的にカスタマイズができないので、将来カスタマイズをすることが目標となるが、現状どの程度のパフォーマンスなのかを調査。
漢字やカタカナに対応する日本語を変換するだけなら問題なさそう。ただし、数字にはかなり弱く、ブレが生じたり漢数字になったりする。
数字に関しては、チューニングでなんとかなるパターン数でない場合も大いにあると思うので、変換候補を増やして見つけにいく、あるいは、なんらかのライブラリでの変換が必要になりそうだ。

### 選択肢
まずは、ベンダーに頼まなきゃいけないレベルの従量課金じゃないSpeechToTextソリューションは(ア○○○スとか)は排除。個人や中小ベンチャーでやることが前提なので。すると有力なのは3つ（2つ）
(2020年2月くらい)

|ソリューション名|ストリーミング日本語対応|日本語対応|開発規模|カスタマイズ|
| ---- | ---- | ---- | ---- | ---- |
|Google SpeechToText|○|○|中〜大規模<br>（場合によっては要Storage連携）|○|
|AWS Transcribe|X|○|大規模<br>(要S3連携)|○|
|Watson|?|○|大規模|○|
|Web Speech API|○|○|小規模|△|

簡単に始めたかったので、Web Speech APIから試すことに。
他のサービスの利用用途はどちらかというと入力よりも、リアルタイム音声や録音したものの文字起こしなので、このような大規模になりがちなのでしょう

# やったこと
```javascript
<body>
  <input id='text'>
  <button id='start'>start</button>
  <button id='stop'>stop</button>
</body>

<script>
   SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
    const recognition = new SpeechRecognition();
    recognition.maxAlternatives=1;
    recognition.lang = 'ja-JP';
    input_form = document.getElementById('text');
    start_button = document.getElementById('start');
    stop_button = document.getElementById('stop');

    start_button.addEventListener('click', function() {

        recognition.onresult = (event) => {
            console.log(event.results);
            input_form.value = event.results[0][0].transcript;
        }
    
        recognition.start();
    })

    stop_button.addEventListener('click', function() {
        recognition.stop();

    })
</script>
```
もうどこでも手に入る系のコードで実験。

##　試した結果
アイウエオやソニー、ちょっとマイナーな企業名などは結構はいる

## 難しいと感じた文字列たち

|発音|期待|結果|
|----|----|----|
|いちまん|10000|1万|
|じゅう|10|純 渋|
|ひとり|1人|一人|

数字系は難しいようで、どちらかというと漢数字に直しがちなようです。
Grammerを入れることができるInterfaceも用意されていますが、これだけで全て算用数字に置き換えててくれるかというとわからない。
他のライブラリで変換処理だったりが必要そう。

##　複数のパターンマッチも表示できるためそれで出す
```
recognition.maxAlternatives
```
で候補を増やすことができるので10にして実験
### 上記の「いちまん」でテスト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547014/3a2af9ae-3902-be27-a600-7e47deabe689.png)
欲しいものは4番目に手に入りそう。正規表現マッピングで数字しかないものを拾ってくればなんとかできそうだが、確実ではない。
### 上記の「じゅう」でもテスト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547014/9d354aa0-3951-cc6a-adb5-5d56fc1f46fc.png)
**なんということだ。結果が変わったぞ。**　環境や話者の期限や体調などにより差は生じるよう。でもこの場合でも、数字だけのものはなんとか取れそう。

# 結論
一般的な入力事項などであればWebSpeechAPIでも辞書登録なしでも、事足りそう。しかし、入力項目にバリデーションがかかったものの場合、例えば算用数字のみなど、「いくつか選択肢を出してそこから選ぶ。」や「他のライブラリと連携して変換する」といった処理が必要になりそう。

# 参考
https://qiita.com/hmmrjn/items/4b77a86030ed0071f548
Spring boot(Kotlin)でlocalstack(s3)を利用する(aws sdk 2対応)

# ローカル開発用にlocalstack(s3)を準備する。


docker-composeの準備

```yaml
  localstack:
    image: "localstack/localstack"
    ports:
      - 4572:4572
    environment:
      - SERVICES=s3
      - AWS_ACCESS_KEY_ID=dummy
      - AWS_SECRET_ACCESS_KEY=dummy
      - AWS_DEFAULT_REGION=ap-northeast-1
    volumes:
      - ./aws:/docker-entrypoint-initaws.d
```

コンテナ立ち上げ時にバケット作成する用のスクリプト。
aws/buckets.shという名前でファイルを作成し、今回は起動時に2つのバケットを作成。

```sh
#!/bin/bash

set -x
awslocal s3 mb s3://user_images
set +x

set -x
awslocal s3 mb s3://assets
set +x

```

localstack専用の設定クラスapplication.yamlなどで環境を別けながら利用する。
環境毎に別クラスで用意するのがよい。
http://endok.hatenablog.com/entry/2016/06/12/181900

```kotlin
@Configuration
@Profile("local")
class LocalAmazonS3Configuration {
    @Bean
    fun localstackS3(): AmazonS3 {
        return AmazonS3ClientBuilder.standard()
            .enablePathStyleAccess()
            .withEndpointConfiguration(
                AwsClientBuilder.EndpointConfiguration(
                    "http://localhost:4572",
                    Regions.AP_NORTHEAST_1.name
                )
            )
            .build()
    }
}
```
(参考)
https://www.codota.com/code/java/methods/com.amazonaws.services.s3.AmazonS3ClientBuilder/standard
【Day82】積み上げ日記

##学習内容
■prps経由でデータを渡す
■FlatListで一覧表示する
■Hook

##学習ポイント　
■オブジェクトスプレッド演算子
（コードを綺麗に描くために用いる）
propsを直接展開する。
■mapメソッド
■Hooks
ブロックデバイスを暗号化する(cryptsetup)

# dm-crypt(カーネルの暗号化機能)を利用する
dm-cryptを利用するツールとしてcryptsetupとcryptmountがある。
今回はcryptsetupを利用してブロックデバイスを暗号化する。
## LUKS(Linux Unified Key Setup)を利用する
LUKSはLinuxの暗号化ファイルシステムの標準規格

```bash
# ブロックデバイスを暗号化する
cryptsetup luksFormat /dev/sdb1

WARNING!
========
This will overwrite data on /dev/sdb1 irrevocably.

Are you sure? (Type uppercase yes): YES
Enter passphrase for /dev/sdb1: パスワードを作成
Verify passphrase: パスワードを再入力
# パスワードが設定されたか確認
cryptsetup luksDump /dev/sdb1
# 作成されている
Key Slot 0: ENABLED
# 作成済みの暗号化パーティションを名前をつけて開く
cryptsetup luksOpen /dev/sdb1 lukstest
Enter passphrase for /dev/sdb1: 指定したパスワード
# ファイルシステムの作成
mkfs -t xfs /dev/mapper/lukstest
meta-data=/dev/mapper/lukstest   isize=512    agcount=4, agsize=196480 blks
         =                       sectsz=512   attr=2, projid32bit=1
         =                       crc=1        finobt=0, sparse=0
data     =                       bsize=4096   blocks=785920, imaxpct=25
         =                       sunit=0      swidth=0 blks
naming   =version 2              bsize=4096   ascii-ci=0 ftype=1
log      =internal log           bsize=4096   blocks=2560, version=2
         =                       sectsz=512   sunit=0 blks, lazy-count=1
realtime =none                   extsz=4096   blocks=0, rtextents=0
# マウントする
mount /dev/mapper/lukstest /home/
# 確認
df
Filesystem              1K-blocks    Used Available Use% Mounted on
devtmpfs                   495744       0    495744   0% /dev
tmpfs                      507380       0    507380   0% /dev/shm
tmpfs                      507380    6852    500528   2% /run
tmpfs                      507380       0    507380   0% /sys/fs/cgroup
/dev/mapper/centos-root   6486016 1504808   4981208  24% /
/dev/sda1                 1038336  196308    842028  19% /boot
tmpfs                      101480       0    101480   0% /run/user/0
/dev/mapper/lukstest      3133440   32992   3100448   2% /home
# 起動時にマウントするようにパスワードファイルを作成する
dd bs=512 count=4 if=/dev/urandom of=/etc/lukstestkey
4+0 records in
4+0 records out
2048 bytes (2.0 kB) copied, 0.000366841 s, 5.6 MB/s
# 暗号化したパーティションにパスワードを追加
cryptsetup luksAddKey /dev/sdb1 /etc/lukstestkey
Enter any existing passphrase: 作成時に指定したパスワード
```
### 起動時にマウントするように設定ファイルに追記する
```conf:/etc/crypttab
lukstest  /dev/sdb1  /etc/lukstestkey  luks,timeout=180
```
```conf:/etc/fstab
/dev/mapper/lukstest /home	xfs	defaults	0 0
```
国家公務員行政職からAIエンジニアに転職するまで①週目　2020.6.6~

※エンジニアに転職するまでの学習経過を備忘メモとして書いていきます。
　プログラミングに関係ない読書の記録もあるのでご了承ください。

6.6（土）
昨日MacBook Proが届いたので、早速コメダ珈琲で朝活。
Udemyの【ゼロから始めるデータ分析】ビジネスケースで学ぶPytjonデータ分析入門（以下ゼロから）を開始。
理論をすっ飛ばした説明だが、とにかく早くデータ分析を体験してもらおうという趣旨。
本で理論だけ理解しようとして既に挫折した自分に適していると思うのでどんどん進めたい。

6.7（日）
コメダで朝活。夜はスタバ。７月に予定している引っ越しの準備等で日中は頭がいっぱい。
引き続きゼロからをやっているが、講座のコンセプトである必要最小限の説明をタイピングに必死な自分が聞き逃しているのか、それとも聞き流しているからなのかわからないが、自分が今書いているコードはなんのために書いているのかわからなくなる。全体の流れを理解しておかないとただの作業になってしまうので注意したい。

6.8（月）
朝スタべでゼロからを引き続き。１時間しかできないが、その瞬間瞬間で理解することを心がけた。
夜MacBook Pro用のアクセサリーがいくつか届いた。
画面の保護フィルムはサイズが合わないので返金を依頼した。
moshiのキーボードカバーは置いておくだけのタイプだが、ずれることもなく良い。

6.9（火）
7:20~8:40　スタバ：ゼロから　チャプター106〜107
クロスバリデーション後の表示結果にtrainが出てこなくて詰む・・・
18:30~21:30 家:ゼロから チャプター107〜121 【１周目終了】
午前の詰みを解決➡️ライブラリの仕様変更によるもので引数を追加することで解決。別記事参照。

6.10（水）
7:20~8:40 スタバ：ゼロから２周目　チャプター12~46
説明変数と目的変数、単回帰モデルの意味がやっと理解できた（これまで深く考えてなかったな・・・）

6.11（木）
7:30~8:30 家で読書（働く大人の教養課程）
少し寝坊したのと、上司から借りた（読んでみろと突然言われた）のでなるべく早く読むため読書。
そこらへんのハウツー本と違い奥が深い。
仕事終わりにスタバに行きたかったが、席が空いてなかったので帰って順当にだらけた。

6.12（金）
7:10~8:30 スタバで読書（働く大人の教養課程）
なんとか読み終わった。気になったところをまとめるので来週返すと伝えたところ更なるおすすめ本を紹介されたので、帰りに本屋ですぐ購入してきた→うらおもて人生録
できれば土日に読んで月曜に読みましたと報告したい。この本が転職や今後の人生に影響を与えてくれるような本になるかもしれない。最短距離で効率的にプログラミングだけやっていればいいというのは、自分は違うと思う。ドンドン試してみればいい。まずやってみる！
ion-item-slidingでタップした際にスライドを閉じる

#はじめに
[【Ionic + Firebaseでアプリ開発】お気に入り登録機能を実装する](https://qiita.com/se_fy/items/1a3a9ee38f6b54c469d1)の補足記事です。
[ion-item-sliding](https://ionicframework.com/jp/docs/api/item-sliding)でアイテムのスライドを実装すると、以下のようにion-item-optionをタップした際にスライドが開いたままになっていました。
![ionitemsliding.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410068/00a4fd31-757d-9c4f-39bb-6c9aba2237f5.gif)

#解決策
`#slidingItem`と`slidingItem.close()`を追加。

```/app/home/home.page.html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      記事一覧
    </ion-title>
    <ion-button (click)="presentFavorite()" slot="end">
      <ion-icon name="star-outline"></ion-icon>
    </ion-button>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-card *ngFor="let trick of groundtricks" class="activated">
    <ion-item-sliding #slidingItem>
      <ion-item (click)="openPage(trick.url)" class="activated">
        <ion-card-header>
          <ion-img src = "{{trick.image}}" class="image"></ion-img>
        </ion-card-header>
        <ion-card-content>
          <p><font size="2">レベル：{{ trick.level }}</font></p><br>
          <p><font size="3" color="#000000">{{ trick.name }}</font></p>
        </ion-card-content>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option (click)="favorite(trick); slidingItem.close()"><ion-icon size="large" name="star-outline"></ion-icon></ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-card>
</ion-content>
```

様々な方法を試しましたが、htmlのみ修正してタップした際にスライドが閉じるようにできました。
![ionitemsliding2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410068/a8f3e5df-d460-3efe-79b9-23ff2e6dd673.gif)

#参考
https://stackoverflow.com/questions/48011634/ionic-3-close-ion-item-sliding
ZIPファイルを解凍したらファイル名が文字化け

メールで受け取ったZIPファイルを解答したら
日本語のファイル名が文字化けしてしまう時
特に先方がWindows
自分がLinuxの時とか。

文字コード指定して解答
```
unzip -O cp932 foo.zip
```
エンジニア未経験から取り組んだAWS認定SAA合格までの振り返り


2020,4月入社の我々はコロナ渦の中、AWS資格であるSAAの取得に向けスケジュールを組み取り組みました。

合格までの道筋を振り返り記録しておこうと思います。

こちらの記事に今回、SAA取得計画の詳細は書いております。

[【コロナウイルスの影響でリモート勤務が長引く為、AWS資格(SAA)取得計画】](https://qiita.com/kawaguchi_yuki/items/ebf933d7814d2c407a67)

##取得した資格
SAA(C01)1ヶ月：score一回目700点(不合格)scare二回目804点(合格)

*学習2週間で1度受験,その2週間後再び受験

##私の経歴
2020.4~    未経験エンジニア
2020.4~5/1 Linux研修
2020.5~    SAA取得の為、本格的学習スタート

##取り組んだ内容

期間:約一ヶ月

・ハンズオン
・書籍
・問題集

以上、3点で学習しました。

他の人の学習記録を見てみるとBlackBeltで学習されている方もいらっしゃいますが私は今回は使用していません。

なお、事前にプログラミングスクールで、AWSについては環境構築で触ってはいます。ただ、SAAの出題範囲全てではありません。

###ハンズオン

ハンズオン教材はこちらです⇩
[UdemyこれだけでOK!ソリューションアソシエイトアーキテクト試験突破講座](https://www.amazon.co.jp/%E6%9C%80%E7%9F%AD%E7%AA%81%E7%A0%B4-AWS%E8%AA%8D%E5%AE%9A%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88-%E5%90%88%E6%A0%BC%E6%95%99%E6%9C%AC-%E6%9D%91%E4%B8%BB/dp/4297103826/ref=pd_lpo_14_t_1/357-8712988-9746536?_encoding=UTF8&pd_rd_i=4297103826&pd_rd_r=db7756eb-3289-4565-881e-a19fd08abfb6&pd_rd_w=rgZrq&pd_rd_wg=Gdp3K&pf_rd_p=4b55d259-ebf0-4306-905a-7762d1b93740&pf_rd_r=MHNYJQNJVKAW127JPYHM&psc=1&refRID=MHNYJQNJVKAW127JPYHM)

書籍と合わせてハンズオンを利用するのは実際のイメージができるのでオススメです！
ただ、こちらのハンズオンは時間が結構かかってくると思いますので、時間が限られている方は、ある程度取捨選択しながらやることをオススメします。

###書籍

書籍は2冊利用しました。こちらになります⇩
[徹底攻略AWS認定ソリューションアーキテクトアソシエイト教科](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5-AWS%E8%AA%8D%E5%AE%9A-%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88-%E2%80%93-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88%E6%95%99%E7%A7%91%E6%9B%B8/dp/4295005495)
[最短突破AWS認定ソリューションアーキテクトアソシエイト合格教本](https://www.amazon.co.jp/%E6%9C%80%E7%9F%AD%E7%AA%81%E7%A0%B4-AWS%E8%AA%8D%E5%AE%9A%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88-%E5%90%88%E6%A0%BC%E6%95%99%E6%9C%AC-%E6%9D%91%E4%B8%BB/dp/4297103826/ref=pd_lpo_14_t_1/357-8712988-9746536?_encoding=UTF8&pd_rd_i=4297103826&pd_rd_r=db7756eb-3289-4565-881e-a19fd08abfb6&pd_rd_w=rgZrq&pd_rd_wg=Gdp3K&pf_rd_p=4b55d259-ebf0-4306-905a-7762d1b93740&pf_rd_r=MHNYJQNJVKAW127JPYHM&psc=1&refRID=MHNYJQNJVKAW127JPYHM)

定番の黒本というやつですね。正直、この一冊でも十分だったかと思います。後者の【最短突破AWS認定ソリューションアーキテクトアソシエイト合格教本】は優しめの内容でしたので、全くの未経験の方の入り口にはオススメです！

ハンズオン×書籍の掛け合わせで、理解を深めながらやっていきました。オススメです。

###問題集
koiwaclub SAA#1-120　
[【SAA-C02版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-knan/learn/quiz/4709805#notes)
徹底攻略AWS認定ソリューションアーキテクトアソシエイト教科 模擬問題×2回
最短突破AWS認定ソリューションアーキテクトアソシエイト合格教本 模擬問題×2回


Udemyの模擬試験問題集（6回分390問）は、かなり難易度高めの問題集になります。ここまでやっておけば、自信に繋がるかもしれませんが時間もかなり要するので、一発合格に向けて取り組む方向けな気がします。
[JavaScript]オブジェクトや配列の要素/プロパティ値を変数に分解する（分割代入）

# 複数の要素をもつオブジェクトや配列を１つずつ変数に代入する

こういうコードが読めなかった。

```javascript

const[num1] = client.exe();
```
調べて見ると、分割代入って構文らしい。ES6から取り入れられた分割代入。
従来より配列/オブジェクトを分解して、要素やプロパティ値を取り出しやすくなったようだ。

ってことで、調べてみた。

##配列の要素を変数に分割代入する構文
###[配列]分割代入
```javascript

//ES6以前の分割代入
var data = [20,49,59,37,62];
var x0 = data[0];
var x0 = data[1];
var x0 = data[2];
var x0 = data[3];
var x0 = data[4];

//ES6の分割代入
let numbers = [40, 50, 20, 70,];
let[a1, a2, a3, a7] = numbers;

console.log(a3); //結果:20
console.log(a4); //結果：ReferenceError a4 is not defiend.
console.log(a7); //結果:70
```
配列numbersの40,50,20,７０がそれぞれa1,a2,a3,a7に分割代入された。
変数の並び順は配列のプロパティの並び順と同じになるため、
未定義であるa4はリファレンスエラーとなるし、a7には配列numbersの４番目のプロパティである70が代入されていることがわかる。

####！note
・配列とオブジェクトの大きなちがいって、順番が割り振られているかどうかだよね！
・ES6以前のコードも２０２０年現在まだ見かけるらしいから、読めるようになった方がいいよね！

###[配列]要素をまとめて配列として切り出す。
```javascript

let numbers =[40, 50, 60, 18, 95, 34];
let[a1, a2, a3, ...other] = numbers;

console.log(other); //結果:[18, 95,34]
```
演算子`...`を使用することで、分割されなかったプロパティ値をまとめて`配列`として切り出せる。

###変数の入れ替え
```javascript

let a = 10;
let b = 60;
[a,b] = [b,a];
console.log(a,b); //結果:60,10
```
###要素の切り捨て
```javascript
let num = [75,34,16,345,923,590,65,21,98];

let[num1,num2,num3, , , , ...rest] = num;
//345,923,590は切り捨て
console.log(num3); //結果:16
console.log(rest); // 結果[65,21,98]
```

##あのコードはいったい何だったのか

```javascript

const[num1] = client.exe();
```
これまでの書いてきたことを踏まえると、このコードがよめる。

右辺は何かしらの配列を生み出す処理になっていて、
左辺でその１番目の値だけをnum1に代入した。

それだけのことだ。
ついでなので、オブジェクトの分割についても調べた。

##オブジェクトのプロパティ値を変数に分解する構文
###[オブジェクト]分割代入
```javascript

let banana = {color:'黄色', price:100, from:'インドネシア'};
let{from, color, memo='なし'} = banana

console.log(from); //結果：インドネシア
console.log(memo); //結果:なし
```  
オブジェクトの場合は名前でプロパティを個々の変数に分解する。
なので、変数の並び順はプロパティの定義順と違っていてもいい。
また、分解しないプロパティ（上記ではprice）があってもいい。
さらに、目的のプロパティがない場合に「変数名 = デフォルト値」としてデフォルト値を指定しておくこともできる（上記、memo:なし）

###入れ子となったオブジェクトを分解する
```javascript

let car = {name:'プリウス', price:1,000,000,
           other:{color:'silver', tire:'studless'}};

let{name, other, other:{ tire }} = car;

console.log(name); //結果:プリウス
console.log(other); //結果:{color:'silver', tire:'studless'}
console.log(tire); //結果:studless
```
otherとして定義するとオブジェクトotherの内容が格納される。
other:{tire}とすると、オブジェクトotherのプロパティtireの値であるstudlessが格納される。

###変数の別名を指定する。
```javascript
//別名を指定する
let seminor = {title:'アフターコロナ', data:'2020.6.10', price:5000};
let { title:name, data:day} = seminor

console.log(name) //結果：アフターコロナ
console.log(day) //結果：2020.6.10
```

###宣言のない代入
```javascript
//宣言のない代入
let journey = {data:2020/3/3, price:'priceless'};

let location, price;
({location='千葉', price} = journey);
console.log(location); //結果：千葉
console.log(price) //結果:undefined
```
分割代入するときに前後を()で囲わないといけない。
{}のみだとブロックだとみなされ、文だとみなされないため。

###参照
[JavaScript本格入門~モダンスタイルによる基礎から応用まで](https://amzn.to/2Y85Nrm)
[分割代入 -JavaScript|MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
[《JavaScript》ES6の分割代入のはじめかた。](https://qiita.com/uto-usui/items/a9d17447fe81c17c41fa)
[JavaScriptの代入において時々現れる、括弧で囲まれた変数名は何なのか](https://sbfl.net/blog/2019/08/26/javascript-bracketed-variables/)
[技術メモ]Rubyの長所、短所について

オブジェクト指向を採用しており、保守、運用に秀でており、インタプリタ方式なのでデバッグも容易です。また、動的型付け言語かつシンプルな構文が多いので記述量少なくあらゆる実装を行うことができます。
一方、処理速度は他の言語に比べ遅いので、大規模アプリや処理速度が重要なサービスには向いていないといえます。
[技術メモ]トランザクションの特性であるACIDについて



##A
「原子性」を表す「Atomicity」でトランザクションが終わった時に、
そこに含まれていた更新処理が全て実行されるか、全て実行されない状態で終わることを保証する性質です。

##C
「一貫性」の「Consistency」でトランザクションに含まれる処理はそれぞれの制約を満たすという性質です。

##I
「独立性」のIsolationであるトランザクションが実行中の場合、もう一方のその他のトランザクションの影響を受けないという性質です。
##D
「永続性」のDurabilityでトランザクションが完了した後、そのデータ状態が保存され失われることは無いという性質です。
[Rails]謎のデータが追加されている

Railsチュートリアルを終え、掲示板機能を追加してみようとしています。
やりたかったことは、2つの異なるモデルのコレクションをcreated_atでソートしてまとめて表示したいということですが、よくわからない現象のメモです。
とりあえず解決したのですが、どこか間違っていたら教えて下さい。

<font color="red">追記: turbolinksを無効にしたらまともになりました。</font>
謎のデータは追加されていなさそうですし、ブラウザバックがおかしいのも、フォームに「Content can't be blank」と表示されることもなくなりました。


コードが長いのでまずは飛ばしてください。

```ruby
  def show
    @bbs_thread = BbsThread.find(params[:id])
    @user = current_user
    if @user
      @bbs_post = @user.user_posts.build(bbs_thread: @bbs_thread)
    else
      # @bbs_post = AnonymousPost.new # (1)
      @bbs_post = @bbs_thread.anonymous_posts.build # (2)
      password_for_delete =  cookies.permanent.signed[:password_for_delete]
      unless password_for_delete
        password_for_delete = AnonymousPost.new_token
        cookies.permanent.signed[:password_for_delete] = password_for_delete
      end
      @bbs_post.password = password_for_delete
    end
    puts "----- #{@bbs_thread.anonymous_posts.to_a.count} -----"
    puts "===== #{@bbs_thread.anonymous_posts.count} ====="
    @all_posts = @bbs_thread.user_posts +  @bbs_thread.anonymous_posts
    # @all_posts.sort! do |f,s|
    #   if !f || !f.created_at
    #     1
    #   elsif !s || !s.created_at
    #     -1
    #   else
    #     f.created_at <=> s.created_at
    #   end
    # end
    @all_posts.sort! do |f,s|
      f.created_at <=> s.created_at
    end
    @all_posts = @all_posts.paginate(page: params[:page])
  end
```

`(1)`と`(2)`の部分なのですが、`@bbs_post`というのはパーシャルでのフォーム用の変数です。
Railsチュートリアルでも、終盤のマイクロポストでは紐付けが便利?なためか`(2)`の書き方をしていると思います。

しかし、なぜか`(2)`の書き方だと`puts`で表示しているカウントが変わってしまいます。
`(1)`の書き方で2と2であれば、`(2)`の書き方だと3と2になってしまいます。
追加されたものを見てみるとcreated_atなどがnilのものです。

```
#<AnonymousPost id: nil, name: nil, content: nil, password_digest: "$2a$10$roGsmjhYWRCah/3im5..1.W0e2g0dgZULkZY3oQHvLo...", bbs_thread_id: 40, post_number: nil, created_at: nil, updated_at: nil>
```

`to_a`だけでなく、`+`を利用した場合でも追加されてしまい、`sort!`は例外で落ちます。

何が起きているのが自分にはわからないのですが、とりあえず`(1)`の書き方で解決しました。
なにか根本的に理解できていないのかもしれません。

`(2)`でもコメントアウトした`sort!`を用いれば、強引に動きはするのですが、フォームには「Content can't be blank」と表示されてしまいます。
初心者によるプログラミング学習ログ 339日目

#100日チャレンジの339目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
339日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>339日目　2h<br>・ポートフォリオ作成<br>・PC版作成と背景配置<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1270085319002484736?ref_src=twsrc%5Etfw">June 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
vimをちょっと便利にするクライアントサーバー機能

# 概要

vimのterminalでシェルを開いたとき、その中でさらにvimを開いてしまって困ることはありませんか？

![ng.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106549/e6b4b22b-caff-c8d5-a229-0c1614397724.gif)

これはterminalのbashの中でさらにvimを開いている状態ですので、
レジスタもバッファも別のものになります

![setumei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106549/514a2ee1-9ee4-38a4-80db-eb05675bef35.png)

pstreeで表示するとこんな感じ

```
 `-vim memo.md
     `-bash
         `-vim hoge.md
```

vimのクライアントサーバー機能を使うと一つのvimにまとめることが出来ます
(gvimを使った事がある人は「既存のvimで開く」みたいなメニューがあると思うのでイメージしやすいかと思います)

![ok.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106549/efb28e7c-9747-b05c-fe69-4b172b778bd4.gif)

terminal内で開いたvimが既存のvimタブで表示されています

# 設定

この機能はXサーバーの機能を使いますので, vim-gtkをインストールします
(今回はUbuntu20.04でやってみました)

    sudo apt install vim-gtk 

Xサーバーが既に走っているなら問題ないですが、無い場合はxvfb等でxserverだけ上げます

    sudo apt install xvfb
    sudo bash -c "curl -L https://git.io/JfDyE > /etc/systemd/system/xvfb.service"

    # User, Groupを適宜変更
    sudo vi /etc/systemd/system/xvfb.service

    sudo systemctl enable xvfb
    sudo systemctl start xvfb

bashrc に 以下のようなaliasを追加します

    alias vim="DISPLAY=:1 vim --servername vim1 --remote-tab-silent"

この設定を入れると、tmux等で開いた新しいシェル内で起動したvimもまとめる事ができます

以下のコマンドで, VIM1というサーバーが見えると思います

    # aliasを解除するために、バックスペースを付けてvimを実行しています
    \vim --serverlist

その他詳しいことはvimのヘルプを参照ください

    :h client-server

# その他

vim内のシェルに限定すれば、terminal apiを使っても出来ると思います
開いたターミナル側から、親のvimに対して命令が出せる機能です
ファイルを開くときに、カレントディレクトリの情報が伝わらないので、フルパスで指定しないといけないかもしれませんが手軽に出来るかと思います
詳しくはヘルプを参照してください

    :h terminal-api

vim から開いたコンソールには `$VIM_SERVERNAME`, `$VIM_TERMINAL` という変数が設定されます
tmuxから開かれたシェルは既存のvimにまとめたくない場合などは、こちらの変数を見て分岐するといいかもしれません
以下のような設定で親のvimで開くことができます

    alias vim="DISPLAY=:1 vim --servername $VIM_SERVERNAME --remote-tab"
'デ' == 'デ' がFalse！　実は2つ目の「デ」が2文字だった。（python）

表題通りです。表題の``'デ' == 'デ'``をコピペしてpythonで実行すると``False``になります。

不可解でしたが、調べて見ると実は2文字目の``デ``が``テ``と``濁点``で構成されていました。

```python
a = 'デ' 
b = 'デ'

text = f'''

2つのデはどの様に表示される？
1つ目 : {a}
2つ目 : {b}

2つのデは同じ？ : {a==b}

それぞれの文字列の長さはいくつ？
a : {len(a)}文字
b : {len(b)}文字

b の1文字目、2文字目は何？
b[0] : {b[0]}
b[1] : {b[1]}

ちなみに、バイト列にするとどうなる？
a : {a.encode()}
b : {b.encode()}

「2つ目の デ が実は2文字だったんですね！」
'''

print(text)
```

<img width="239" alt="スクリーンショット 2020-06-09 午前2.59.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178570/0cb6869d-253b-f49b-684b-35c0fcb356d7.png">
【android studio(version4.0)】project作成まで

##androidstudioダウンロード

以下から最新版のandroid studioをダウンロードしましょう。
https://developer.android.com/studio?hl=ja


##newファイルの作成
start a new Android studio projectをクリックしたら新規ファイルが作成されます。
<img width="471" alt="スクリーンショット 2020-06-09 1.43.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633073/065c7750-8837-bc3f-ca79-eb05b20e5821.png">

ビュー画面のテンプレートを選択します。特にこだわりが無ければEmpty Activityでいいと思います。


<img width="897" alt="スクリーンショット 2020-06-09 1.47.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633073/32312587-db42-4119-12bd-519687cd8dce.png">

・nameにアプリケーション名を入力
・Save locationにファイルの保存先を指定
・Languageで使用したい言語を選択

Packege name,Minimum SDKはデフォルトで入力されているのでいじらなくても問題ありません。
<img width="895" alt="スクリーンショット 2020-06-09 1.47.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633073/12944bd3-21b0-5d98-eab9-aa36648eba78.png">

Tip of the dayとポップアップが出てきますが、Closeで閉じましょう。

<img width="654" alt="スクリーンショット 2020-06-09 1.48.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633073/19d09a22-64db-b2da-f5b0-e0d4bcbb1acb.png">


activity_main.xml
MainActivity.kt(拡張子は選択した言語による)
上の二つのファイルがすでにできていると思います。
そちらにコードを記載していけば、アプリケーションを作成できます。

##おまけ
横向きの三角マークからエミュレーターを起動できるのでエミュレーターで実際に画面を動かしながら、動作を確認していきましょう。
<img width="1440" alt="スクリーンショット 2020-06-09 2.09.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633073/d405f882-ea83-a7cd-9fbb-af04a54bfec4.png">
can't write unknown attribute `category_id`を解決した話

投稿機能でpost投稿する際にcan't write unknown attribute`category_id`が出現した為、記録用に投稿。

#仕様
https://qiita.com/cawaz3/items/e755a58177212f2aca6c
テーブル構成等はこちらの記事を参考。
中間テーブルを実装し投稿時にタグidを紐付けた。

#症状
投稿画面にて投稿内容記述後に投稿確認画面に遷移する設定にしているが上記のエラーが出てしまいうまく遷移されない様子。

#原因
カラム名の相違
post.controller.rbではcategory_idで記述していたのにも関わらずテーブルを確認した際にcategories_idになっていた。

```ruby:post.controller.rb
def confirm
    @post = Post.new(post_params)
    session[:category_ids] =  @post.category_ids
    return if @post.valid?
    flash.now[:alert] = '入力に不備がありました。'
    render :new
  end

  def back
    @post = Post.new(post_params)
    render :new
  end

  private

  def post_params
    params.require(:post).permit(:post_photo,
                                 :post_photo_cache,
                                 :place_name,
                                 :area,
                                 :street_address,
                                 :time,
                                 :regular_holiday,
                                 :url,
                                 :station,
                                 :shop_name,
                                 category_ids: []).merge(user_id: current_user.id )
  end
end
```

```ruby:
select * from post_category_relations;
 id | posts_id | categories_id | created_at | updated_at 
----+----------+---------------+------------+------------
(0 rows)
```
#改善方法
モデルの記述を変更しrails db:migrate:reset

```ruby:
class CreatePostCategoryRelations < ActiveRecord::Migration[5.2]
  def change
    create_table :post_category_relations do |t|
      t.references :post, foreign_key: true, null: false
      t.references :categories, foreign_key: true, null: false⇦変更前
      t.references :category, foreign_key: true, null: false⇦変更後
      t.timestamps
    end
  end
end
```
Kotlin の trailing lambda は constructor にも使える話  

# 概要
[あるソース](https://github.com/kizitonwose/CalendarView)を読んでいたら、
[公式リファレンス](https://kotlinlang.org/)で見たこと無い記法に出会ったので備忘録として残しておきます。

# 該当部分

下記で変数にインスタンスを代入する際、

`変数 = クラス名 {...}`

という[コード](https://github.com/kizitonwose/CalendarView/blob/6be23be1f721fe2e08e5f2e2e7f29ad0b519c327/sample/src/main/java/com/kizitonwose/calendarviewsample/HomeActivity.kt#L15)を見かけました。

```kotlin

val examplesAdapter =  HomeOptionsAdapter {
    val fragment = it.createView()
    ...
}
```
[Object expressions](https://kotlinlang.org/docs/tutorials/kotlin-for-py/objects-and-companion-objects.html#object-expressions) の省略記法かなと思ったのですが、

`it`があるのでlambdasのような気がしました。

# 結論

[`trailing lambda`](https://kotlinlang.org/docs/reference/lambdas.html#passing-a-lambda-to-the-last-parameter) 記法でした。

## trailing lambda とは

> [Kotlinでは、関数の最後のパラメータが関数である場合、そのパラメータは括弧の外に指定することができるという慣習があります](https://kotlinlang.org/docs/reference/lambdas.html#passing-a-lambda-to-the-last-parameter)




関数を引数に取る関数があります。

```kotlin
fun calc(action: ()->Unit): Long {
  var start = System.currentTimeMillis()
  action()
  var end = System.currentTimeMillis()
  return end - start
}
```

このように呼び出すところを、

```kotlin

val time = calc ({
  var x = 1
  for (i in 1..10_000_000) {
    x++
  }
})
```

`trailing lambda` に基づき、引数を表現するための`()`を省略して呼び出すことができます。

```kotlin

val time = calc {
  var x = 1
  for (i in 1..10_000_000) {
    x++
  }
}
```



ここまでは公式リファレンスに書いてあります。

## trailing lambda が constructor にも使える


今回のケースだと、`HomeOptionsAdapter`は、constructorに関数を取るClassです。

```kotlin

class HomeOptionsAdapter(val onClick: (ExampleItem) -> Unit) 
```

このクラスをインスタンス化する際、

```kotlin

val examplesAdapter =  HomeOptionsAdapter({
    val fragment = it.createView()
    ...
})
```

と記載するところを

```kotlin

val examplesAdapter =  HomeOptionsAdapter{
    val fragment = it.createView()
    ...
}
```
のように記載できます。

constructorも関数だと思えば、この記法が有効であることも納得できました。

`trailing lambda` が constructor でも使えることは知らなかったです。

## 省略記法を用いないと ...
it も省略記法ですので、省略記法を用いない場合は下記です。
※ it について : [関数リテラルがパラメータを1つだけ持つ場合、その宣言を（ -> と一緒に）省略してもよい](https://kotlinlang.org/docs/reference/lambdas.html#it-implicit-name-of-a-single-parameter)

```kotlin
val examplesAdapter =  HomeOptionsAdapter ({  ExampleItem ->
    val fragment = ExampleItem.createView() 
    ...
})
```

## 最後に
省略記法が複数用いられていると、よくわからなくなることがあります。
短くかければ良いというものではないなぁ、と思いました。

個人的に読みやすいコードにするために `trailing lambda` を用いずに、コンストラクタであることを明示的に書こうとしたら、
Android Studio上のLinterが走り、省略記法で記載するよう促されましたので、推奨されている書き方ではあるのかもしれません。
2020/06/08 プログラミング(フロントエンド)学習9日目 メモ

# 本日の学習範囲
### 模写コーディング
【無料練習素材】あなたはできる？模写コーディング腕試し！｜東京フリーランス｜note
https://note.com/tokyofreelance/n/n4baf7dd10306
（学習時間：6時間）
## 学習メモ
### text-decorationプロパティ
`{text-decoration: ○○;}`
テキスト傍線のつけ方・色・スタイルをまとめて指定する
テキストの装飾を消したい場合は、
`{text-decoration: none;}`
とする
### background-imageプロパティ
`{background-image: url(○○);}`
背景画像を指定する
### 今いる階層の1つ上の階層にあるファイルを記述する方法
`../ファイル名`
### background-sizeプロパティ
`{background-size: ○○;}`
背景画像のサイズを指定する
`{background-size: cover;}`
とすると、画像の縦横比を維持したまま、表示領域をすべて埋め尽くす大きさで表示される
## その他
↓は先日作成したPC画面用がこちら。
![模写コーディング1作目.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647063/ed200f61-28db-a5fa-96e9-4aecfac37d5a.png)
改めて確認したところ、ヘッダー部分のメニューにリンクが付いてなかったので、追加した。
その後、未作成だったスマホ画面用に挑戦した。
![模写コーディング1作目(レスポンシブ).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647063/7016ddef-92a9-baae-982c-b17a88221640.png)
レスポンシブの方法は、
Progate・ドットインストールともに有料会員でないと閲覧できなかったため、
全てググって作成した。
コードが長くなってしまったので、次回はもう少しコンパクトにしていきたい。