OmniAICreator/Qiita-1.07M huggingface dataset:
【Win10ver】OAK-D  YOLOv4-tiny 設定方法

#Depth AI ライブラリをインストール
depthAI GENAPI2は2021年2月末に公開さています。

##WindowsPowerShellを管理者モードで起動

PowerShellを開いて

```
Start-Process powershell.exe -Verb runas
```

を実行すると管理者モードが開きます。
#DepthAIPythonライブラリをインストール
PowerShellでを実行

```
python3 -m pip install --extra-index-url https://artifacts.luxonis.com/artifactory/luxonis-python-snapshot-local/ depthai==2.1.0.0.dev+e5a09bf1a442d4be0cc2c8f4bb06b47e1c661ead
```

##Chocolateyパッケージマネージャーをインストール


```
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
```

#PythonとPyCharmをインストールする
```
choco install cmake git python pycharm-community -y
```

#PyPIからdepthaiパッケージインストール

```
python3 -m pip install depthai
```
#テストインストール
```
git clone https://github.com/luxonis/depthai-python.git
cd depthai-python
```

#Pycharmを起動
pycharmの初期設定に関してはDrone-bizさんの記事が分かりやすいので、参考ください。

https://dronebiz.net/tech/oak/win10


仮想環境（または必要に応じてシステム全体）を使用してpycharmのターミナルで、以下を実行

```
cd examples
python3 install_requirements.py
```
テストコード　01_rgb_preview.pyを起動

```
python3 01_rgb_preview.py
```

これで動作すれば、設定はOK

次に↓で（tiny-yolo-v4_openvino_2021.2_6shave.blobファイル）をダウンロード
https://artifacts.luxonis.com/artifactory/luxonis-depthai-data-local/network/tiny-yolo-v4_openvino_2021.2_6shave.blob


pycharmで22_2_tiny_yolo_v4_device_side_decoding.pyを開く

```
#28行目
nn.setBlobPath("C:/models/mobilenet-ssd_openvino_2021.2_6shave.blob")
#ここに先にダウンロードしたファイルのpathを入力
```

pycharmターミナルで

```
python 22_2_tiny_yolo_v4_device_side_decoding.py
```
を実行で起動できるかと思います。
![S__23576582.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040271/d94c739a-5c21-9075-97ce-47a290efff83.jpeg)



参考：https://dronebiz.net/tech/oak/win10
https://docs.luxonis.com/projects/api/en/latest/
JavaScriptの基本文法②

#デイトラWeb制作コース中級編DAY2の学び

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習28日目⏩<br><br>Web制作コース中級編DAY２💻<br><br>学習時間:1時間9分⏳<br><br>学習内容:JavaScriptの基本文法②✏<br><br>学び📚<br>・配置<br>・オブジェクト<br>・繰り返し<br><br>正直４割くらいしか理解できていませんが、先に進みます！🔥<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/LiT3Bolj3C">pic.twitter.com/LiT3Bolj3C</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1379639326095577091?ref_src=twsrc%5Etfw">April 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#　【学び】

1　

【配列】

①　＜複数のデータを管理する＞

例　scores = [89,56,78] 
・カッコ内の数字は要素と呼ばれる
・各要素は、indexで左から０，１，２...と数字が割り当てられてる


```maiin.js
const scores = [87, 78, 37]

↓

console.log(scores)
Arrray (3)[ 87,78,37 ]

↓

console.log(scores[0])
87
console.log(scores[2])
37
```

②　＜カッコ内のデータを書き換える＞

　scores[元要素] = 変更要素

```maiin.js
scores[1] = 0

↓

console.log(scores)
Array (3)[ 87,0,37 ]
```

③　＜カッコ内のデータを追加する＞

scores.push(追加要素)

```maiin.js

scores.push(90)

↓

console.log(scores)
Array (4)[ 87,0,37,90 ]
```

④　＜いくつの要素が入っているか確認する＞

 scores.length

⑤　＜要素の一番最後を削除する＞
　scores.pop()


⑥　＜要素の一番最初を削除する＞
 scores.shift()


2

【オブジェクト】

①　＜キー（プロパティ）で複数の値を管理する＞

３

【メソッド】

①　＜オブジェクトの中に定義されている、プロパティで管理したファンクションのこと＞
PowerShell 「引数 '+' を受け入れる位置指定パラメーターが見つかりません。」

IISの設定をPowerShellで変更しようとした際にこのエラー。
「Set-WebConfigurationProperty : 引数 '+' を受け入れる位置指定パラメーターが見つかりません。」

```powershell
#NG
Set-WebConfigurationProperty -PSPath "IIS:\" + "hoge"
#OK
Set-WebConfigurationProperty -PSPath ("IIS:\" + "hoge")
```

'+'系のエラーが出たら、カッコでくくれば解決する可能性が高いです。
【iOS】FirebaseからPush通知を受信する

#始めに
本ドキュメントは次の1点を目標とします。

- Firebaseから送信したPush通知をiOSデバイスで受信する

執筆時の開発環境は次の通りです。

- Xcode 12.4
- Swift 5

Xcodeプロジェクトとそれに対応するFirebaseプロジェクトが作成済みであり、[iOS側のFirebase初期導入手順](https://firebase.google.com/docs/ios/setup?hl=ja)は実装済みである事が前提です。
また次のライブラリが必要です。

- FirebaseMessaging

https://github.com/firebase/firebase-ios-sdk/blob/master/SwiftPackageManager.md

#実装
#APNs認証キーの作成
[AppleDeveloper](https://developer.apple.com)にサインインし、Certificates,Identifiers & Profilesを表示します。
Keysを選択し、＋ボタンをクリックします。
![Keys追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4077/f260e46f-7e45-7722-07d8-460b08c99562.png)
Key Nameに好みの名称を入力し、Apple Push Notifications service(APNs)にチェックを入れ、Continueをクリックします。
![Register a New Key.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4077/a23dd877-314a-ca51-9583-bffb7d86c787.png)
Firebase設定時に必要となるKey IDをメモしておきます。
Downloadをクリックし、p8ファイルをダウンロードします。
**重要
ダウンロードは１度しか行えません。p8ファイルを紛失すると新しくKeyを作り直すことになりますので、大切に保管してください。**

次にAppleDeveloperのMembershipを表示し、Team IDをメモしておきます。この情報もFirebase設定時に必要です。

ここまでの手順で次のファイルと情報が手に入りました。

- APNs認証ファイル(.p8)
- Key ID
- Team ID

##Firebaseの設定
「プロジェクトの概要」右にある歯車アイコンをクリックします。
表示されたメニュー中の「プロジェクトを設定」を選択します。
![プロジェクト設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4077/21e6bf0b-8a46-2fe6-060b-a24c81039681.png)
Cloud Messagingタブを選択し、「iOSアプリの構成」セクションからAPNs認証キーのアップロードを行います。
iOSアプリの構成が表示されない場合、まずFirebaseプロジェクトにiOSアプリを追加してください。
![APNs認証キーのアップロード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4077/bb5b09b6-8d93-9128-4605-9d853e9f9c3d.png)
AppleDeveloperで入手したp8ファイルと2つのIDを入力し、アップロードを実行します。

##iOSアプリの実装
###Capabilities設定
XcodeのSetting & Capabilities画面を表示し、「+Capability」をクリックします。
表示された一覧の中からPush Notificationsを追加します。
![Capabilities設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4077/f42c23be-f56d-8ba4-5a4d-cdb335cfa194.png)

###通知認証リクエスト処理
AppDelegateに次の処理を追加します。

```AppDelegate.swift
import Firebase

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FirebaseApp.configure()
        
        let authOptions: UNAuthorizationOptions = [.alert, .badge, .sound]
        UNUserNotificationCenter.current().requestAuthorization(options: authOptions) { (success, error) in
            if let error = error {
                debugPrint(error.localizedDescription)
            }
            debugPrint("通知登録\(success ? "成功" : "失敗")")
            
            DispatchQueue.main.async {
              UIApplication.shared.registerForRemoteNotifications()
            }
        }
        
        return true
    }
}
```

#動作確認
アプリを起動し、通知認証を許可します。
その後アプリを終了あるいはバックグラウンドにしておきます。

Firebaseコンソールを開き、Cloud Messagingを選択します。
「Send your first message」をクリックし、通知の作成画面を表示します。
次の項目を入力し、「確認」をクリックします。

| 項目 | 値 |
|:-:|:-:|
| 通知のタイトル | 好きなタイトル |
| 通知テキスト | 好きな文 |
| ターゲット | 「ユーザーセグメント」 > 「アプリ」 > 送信先のアプリを選択 |
| スケジュール | 現在 |
| コンバージョンイベント | 編集なし |
| 通知音 | 有効 |

メッセージの再確認で「公開」をクリックするとPush通知が送信されます。
暫く待つとデバイスで受信することを確認できます。
laravel CRUDのeditもcreateもできない

post method を使いデータの新規登録、編集を試したがこのエラー

Not Found
The requested URL was not found on this server.

半日かけてこのエラーと格闘　もううんざり
しかし　エラーをちゃんと読んでみたら
そもそもURLがないですよ→
ではURLを確認。
どうやらform のactionが全然違うURL
（教本だとawsサービスだったから表記の仕方が違うみたい？？）
action="\bodies"
から
 action="/bodystat/public/bodies"
に直して
エラー解決！！！！！！！！！！
う、うれしい。。。
Bitnami Redmine4.2.0＋Virtualbox

Bitnami Redmine 4.2.0がリリースされていたのでインストールしてみます。

# Bitnami RedmineのVMイメージダウンロード

おなじみ、BitnamiのサイトからVMイメージをダウンロードします。

https://bitnami.com/stack/redmine/installer

今回は仮想マシンが欲しいので、仮想マシンをクリックします。
※マウスで矢印足してるので見た目悪くてすみません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/72e61eee-06de-e505-961c-36cc2a87cb47.png)

あとは画面下のダウンロードボタンを押すだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/692d7817-9c45-3f36-f474-568969a10e35.png)

サイズは約852MBでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/66fdac28-ba49-d072-428e-2b93f8becd82.png)

# Virtualboxにインポート

ovaをダブルクリックして、インポートします。
OSはDebian Linux 64bit
CPUは2
メモリは4096MB
に変更しています。

# 初期設定

まずは起動。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/ee23ad39-9cf4-4335-0a76-3baa2794d8df.png)

パスワードの設定が終わったら、次はSSHの起動設定をします。
ターミナルソフト(Teraterm等)で接続したほうがキーボードが使いやすいからです。(きっと英字キーボードを変換する方法もあるんでしょうけど)

なお、以後の操作では画面をいったりきたりするので、適宜右AltキーでVirtualBoxの画面から抜けてください。

## SSH設定変更

まずは`/etc/ssh` に`sshd_not_to_be_run`があってsshdの起動を抑止しているので、これを`rm`で削除します。
なお、ユーザがbitnamiのままだとPermission deniedになって消せないので、ちゃんと`sudo`をつけましょう。
ちなみに英語キーボードで`_`を入れるには、`-`のキーをshiftを押しながら押すとできます。

```shell:
cd /etc/ssh
pwd
ls -l 
sudo rm sshd_not_to_be_run
ls -l
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/598343cd-6811-e1fb-6094-db5cbc19ba04.png)
sudoしてないとエラーになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/8943188a-c4c2-1043-475e-d6efa8a0f335.png)

続いて、sshをパスワードでログインできるようにします。
証明書でやったほうがリスクは低いですが諸事情でパスワードを使う必要があるのでやむなし。

```
sudo vi sshd_config
```
でsshd_configを開いて、`PasswordAuthentication yes`のコメントアウトを外します。`:`を入力するには、Shitを押しながら`;`を押すと入力できます。
以下の画像はviで`:set nu`した状態のものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/1c541c97-9340-7aed-2510-6e59bd4ac1b2.png)

## ssh起動

sshサーバをデフォルトで起動するようにします。

```
sudo systemctl enable ssh
sudo systemctl start ssh
sudo systemctl status ssh
```

画面イメージはこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/50499f98-8cf3-d556-8e84-d2aa3e0c30f0.png)

# ポートフォワーディング設定

sshが起動できたところで、VMへ通信できるようにVirtualBoxの設定をします。

ネットワークアダプターを`NAT`にして、`ポートフォワーディングルール`を以下のように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/087218ee-51f2-6cef-dee4-ee5d5dfbdb30.png)

| 名前 | プロトコル | ホストIP | ホストポート | ゲストIP | ゲストポート|
|:--:|:--:| :--:|:--:|:--:|:--:|
|SSH|TCP|127.0.0.1|10022||22|
|Apache|TCP|127.0.0.1|10080||80|
|PHPmyAdmin|TCP|127.0.0.1|8080||8888|

この変更は即座に反映されるので、OKを押します。

## 接続してみよう

Teratermで`localhost:10022`に接続します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/e2ab2528-2723-96d7-3097-af4313e1d9ba.png)

途中でパスワードとか聞かれて、指定したものを入力すると無事にログインできました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318568/854e376a-3f33-3efe-0adf-3de3c10beb1d.png)

ログインが確認出来たら、次回からはターミナルソフトでログインできるので、一回シャットダウンして、ヘッドレス起動に切り替えましょう。

今回はここまで。
【kintone】kintone UI Component v1 のチェックボックス

今回は、kintone UI Component v1 でチェックボックスを設置してみます。

# アプリの準備

比較のため、標準機能のチェックボックスと、kintone UI Component v1のチェックボックス設置用のスペースを準備します。

| フィールド種類| フィールドコード |備考 |
|:-:|:-:|:-:|
|チェックボックス   | チェックボックス  | りんご / みかん / ぶどう  |
| スペース  | spCheckbox  |   |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/482551de-e774-4ac7-a5de-ad3b54143bd4.png)

# kintone UI Component v1の準備

コチラの**CDNを利用する**を参考に、`JavaScript / CSS でカスタマイズ`の設定をします。

https://kintone-ui-component.netlify.app/docs/getting-started/quick-start

# JavaScript

新規レコード追加画面、編集画面表示イベントで動くようにします。

```js
kintone.events.on(
["app.record.create.show", "app.record.edit.show"],
(event) => {
  //コードを書くところ

});
```

## チェックボックスの設置(kintone UI Component v1)

```js
// チェックボックス設置用スペース
const spCheckbox = kintone.app.record.getSpaceElement("spCheckbox");

// チェックボックス本体を作る
const checkbox = new Kuc.Checkbox({
  label: "チェックボックス（kintone UI Component v1）",
  items: [
    {label: "りんご", value: "りんご"},
    {label: "みかん", value: "みかん"},
    {label: "ぶどう", value: "ぶどう"},
  ],
  itemLayout: "horizontal", //横向き
  visible: true,
  disabled: false,
  borderVisible: true,
});

// スペースフィールドにチェックボックス設置
spCheckbox.appendChild(checkbox);
```


## チェックボックス選択イベント（kintone UI Component v1）

addEventListenerのchangeが使えます。
標準機能のチェックボックスでは取得できない、「変更前の値」を取得することができます。
※event.detail.oldValue：変更前の値
※event.detail.value：変更後の値

```js
checkbox.addEventListener("change", (event) => {
  console.log("変更前：", event.detail.oldValue);
  console.log("変更後：", event.detail.value);
});
```

## チェックボックス選択イベント（標準機能）
標準機能のチェックボックス選択（値変更）時に何かしたい時は、changeイベントを使います。
標準機能のチェックボックス単体では変更前の値を取得することができません。

```js
kintone.events.on(
  [
    "app.record.create.change.チェックボックス",
    "app.record.edit.change.チェックボックス",
  ],
  (event) => {
    // チェックボックス値変更イベント
    console.log(event);
  }
);
```

# チェックボックス設置完了

チェックボックスを選択するとコンソールに選択した値が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/b77672bf-853a-f933-3764-08509cea6e03.png)

最終的なコードはコチラ

https://gist.github.com/juridon/36ed589a7040536c99bd93369350613f


# まとめ

kintone UI Component v1 ではチェックボックスの変更前の値を取得することができます。
他のComponent（ドロップダウン、テキストボックス、複数行テキストボックス、複数選択、ラジオボタン）でも変更後の値が取得できるようです。便利ですね。
OpenCV OAK-D  YOLOV4   ｍobilenetSSD 比較

#mobilenetSSD　+　OAK-D　+　win10 CPU ver



![S__23576584.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040271/be0221b6-448a-559d-ac7c-d1a080711371.jpeg)

#YOLOV4 tiny　+　OAK-D　+　win10 CPU ver

![S__23576582.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040271/2e276982-be48-b3a5-5f49-fec7f66ad506.jpeg)

犬猫画像では　mobilenetSSD の方が精度よく判断していました。

mobilenetSSD であれば　fps38
tiny YOLOV4 であれば　fps30

程でした、その他、モニターやマウス、ボトルなどの判定は
YOLOの方が比較的良かったです。

設定方法編集中です。
SQL　ビュー、サブクエリ

こちらの記事では、私が学んだSQLについて記載しております。
自身の忘れないためのメモとしております。
間違っている部分もあるかもしれませんので、ご了承ください。


#ビューとテーブルの違い
#####・テーブル・・・実際のデータを保存
#####・ビュー・・・ビューの中にselect文が保存され、ビュー自体はデータを持たない！！！
メリット・・・データを保存しないので、記憶装置の容量を節約できる。select文の使い回しが可能。

デメリット・・・パフォーマンス低下を招く場合がある。

```
create view prefecture_user_counts(prefecture_user_countsname,count)
as
select
	p.name name,
    count(*) count
from
	users u
inner join
	prefectures p
	on u.prefecture_id = p.id
group by u.prefecture_id
;

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
***ビューでの出力***
select
	name,
    count
from
	prefecture_user_counts;
```

#ビューの制限事項
・order byは使用できない！
・更新系　insert,delete.updateに制約がある！
・いくつかの条件を満たす場合のみ、ビューに対する更新が可能！
　ーselectにdistinctが含まれていない
　ーfromに含まれているテーブルは１つだけ
　ーgroup byを使用していない
　ーhavingを使用していない
*ビューとテーブルの更新は連動して行われるため、集約されたビューは更新不可。

#ビューの削除


```
・記述方法
drop view ビュー名
```

#サブクエリ
####ある問合せの結果に基づいて、異なる問合せを行う仕組み。複雑な問合せが可能になる。

```
***not in　演算子***
select 
	id,
    last_name,
    email
from 
	users u
where id not in(     ←サブクエリ
select
	user_id
from
	orders
where
	order_time >= '2017-12-01 00:00:00'
    and order_time < '2018-01-01 00:00:00'
);

---------------------------------------------------------------------
***in　演算子***
select
	id,
    last_name,
    email
from 
	users
where id in (　　　←サブクエリ
select
	user_id
from
	orders
where 
	order_time >= '2017-12-01 00:00:00'
    and order_time < '2018-01-01 00:00:00'
);
```

#スカラ・サブクエリ
必ず１行１列だけの戻り値を返す、サブクエリのこと
スカラとは、単一のと言う意味。絶対にサブクエリが複数行を返さないようにする

```

select
*
from
	products
where 
	price > (
    select
		avg(price)
	from 
		products
        )
order by price desc, id;
;
    
```

#条件式　caseを使用
```
記述
case
 when 条件式1 then 値１　　　条件式１がTrueなら値１
 [when 条件式２ then 値２]　　条件式２がTrueなら値２
 [eles 値３]　　　　　　　　　どれも当てはまらない値３
end

[]部分は省略可能。最後のendは省略不可。

select
	u.id user_id,
    u.last_name,
    count(*) num,
    case
		when count(*) >= 5 then 'A'
        when count(*) >= 2 then 'B'
        else 'C'
    end as user_rank
from
	users u
inner join
	orders o
on u.id = o.user_id
group by u.id
order by user_rank
;
```

#取得値nullの場合は、0で置き換える
```
select
	p.id,
    p.name,
    case
    when sum(od.product_qty) is null then 0
    else sum(od.product_qty)
    end as num
from
	products p
left outer join
	order_details od
	on p.id = od.product_id
group by p.id;
```


#補足
####date_format　
```
・記述方法
date_format（カラム,'%Y%m'）　年月でデータを取得する！

select
	date_format(order_time, '%Y%m') 年月,
    round(avg(amount), 0) 平均客単価
from
	orders
group by 
	date_format(order_time, '%Y%m')
;
```

##データ利用方法
###データをCSVファイルに書き出す
export recordset to an external fileというボタンから作成可能です！
フロッピーのアイコンが目標になります！

###CSVファイルに書き出した後に、「Excel」にCSVファイルを取り込むことが可能になります。
-ExcelにCSVファイルを入れる方法！
Excelを開き、ファイルをクリックします。インポートをクリックし、アップロードから作成したCSVファイルを選択することでExcelにデータを入れることができます。
ログアウト状態のユーザーが購入画面に遷移できないようにするには。

class OrdersController < ApplicationController

  before_action :authenticate_user!
 
コントローラーに上記を記述。ログアウト状態のユーザーが直接URL入力しても遷移できないようになります。（ユーザー登録してない人が購入できないようにするため。）
Google ColaboratoryでTensorFlow1.14, Keras2.2.4を動かすときの注意点

2021/4/7現在、Google Colaboratoryには最初からTensorFlow 2系がインストールされている。

これはTensorFlowがGPUとCPU版で分かれていたのが統合した新しいバージョンであり、TensorFlow 1.14を動作させるにはアンインストールする必要がある。

```
!pip uninstall -y tensorflow
!pip install tensorflow-gpu==1.14.0
!pip install tensorflow==1.14
!pip install keras==2.2.4
```
artisocでタピオカ店売上シミュレーション

#はじめに
大学の授業の方でartisocを用いてシミュレーションする機会があったので備忘録として残そうと思います。
特に需要はないと思われますが、こんなツールでこんなシミュレーションができるのだなぁと感じていただければ幸いです。

artisocを使ったことある方はモデルの一例として読んでいただけると嬉しい限りです。


#artisocとは
>artisocは、人間同士の相互作用をコンピュータ上で再現することでダイナミックに変化する社会現象を分析する社会シミュレータです。

https://www.kke.co.jp/solution/theme/artisoc.html

と、あるように「構造計画研究所」が作成したマルチエージェント・シミュレーションプラットフォームです。
こちらのツールを使うことで災害時の避難経路シミュレートや、新型コロナウィルスの感染拡大シミュレート等が可能になっています。



#実際のシミュレーション
今回、自分が作成したのは「タピオカ店売上シミュレーション」です。
![総合課題MAS.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/915480/48d1ae35-f58c-70d5-a574-59fa6d61b44f.gif)
#####左グラフが顧客の状態とその遷移、右上が累計売上個数、右下が単位時間あたりの売上個数グラフとなっています。


コードは複雑かつ多いのでこちらのGithubから見る、あるいは保存するとよいです。
HPからインストールするか、artisoc cloudからmodelを読み込むと実行可能だと思います。

https://github.com/tabatabata1008/suurikougaku_model_enshuu/blob/main/%E7%B7%8F%E5%90%88%E8%AA%B2%E9%A1%8CMAS.model

https://artisoccloud.kke.co.jp/




#modelの解説

#####ここではどのような操作をしているのか述べていきます。実行だけしたい方は読み飛ばしてもらって構いません。
<br>
1. エージェントcustはyellow(通りすがりの人),red(店外にいる人),blue(店内にいる人),green(購入した人)の4状態。  
2. エージェントcustの初期人数をcustumor initial としてコントロールパネルで変化させられるようにした。また initial rate として開店時の yellow,redの人を作った。   
3. time変数を用いて期間の場合分けをする。timeは毎ステップで増え0〜39をピークタイム前、40〜69をピークタイム、70~100をピークタイム後とする。100ステップで営業終了とする。   
4. 通りすがるyellowの人は一定の確率で増え、消えていく。   
5. yellow⇒redは呼び込み能力の変数advertisementによって確率的に変化する。   
6. red⇒blueは厨房能力の変数kitchenによって確率的に変化する。   
7. blue⇒greenは一定の確率で変化する。   
8. custの視野１に自分を除いてレジ能力変数cash*0.1以上の人が存在するとblueだった人はredに戻り3人以上存在するとyellowはさらに消える。   
9. greenになった客はreputationを1つ出して新たな状態whiteという複製を作り、変数afterbuyを +1する。afterbuyはstepごとに+1される。   
10. red の状態の客の周りに reputation が 10個以上 存在するとredはさらにblueとなる。   
11. 3〜6は2の期間によって確率が異なる。ピークタイム後は yellow,red,blue の状態の人は 著しく減る。   
12. afterbuy=2 となる状態 whiteの人はステップの 最後に消える。   
13. Universe にて yellow,red,blue の人をカウントし グラフ化する。   
14. Universe にて green の人をカウントすることで タピオカの総売り上げ個数をグラフ化する。Whiteの人をカウントすることで毎ステップでの売り上げ個数をグラフ化する。なお10stepで1時間のため、1stepでは6分である。   
15. 各能力(advertisement,cash,kitchen)もコントロールパネルで入力可能とした。  
 
＊注釈＊ 
・新たにwhiteの状態を作ったのは毎ステップの売り上げを作るためである。greenから複製させ、次のステップで消去させることで可能とした。
・購入の想定ルートとしては道を通りすがった人が店外へと意識を向け、店内へと入り、検討したうえで購入に踏み切るといったものである。なお8,9のreputation は購入客の無意識な宣伝と考えた。タピオカを飲み歩いている人の容器を見ること・買った人からの評判やSNSでの評価が宣伝に繋がり、外でまよっている人が中に入る状況の再現をした。
・7は混み具合に よって店外で迷っていた人が踵を返すことや通りすがりの人が店を意識しても混雑しているためその場を離れることを再現した。 


#終わりに
本来はシミュレーションの前に線形計画問題を解くpythonライブラリの```pulp```を用いて最適人員配置をもとめてからartisocに手を出したのですが、今回の本筋ではないため定式化やpythonプログラムコードは割愛させていただきます。

講義の方の結論としては
```タピオカ専門店の従業員人数・仕事量を加味した最適な役割配置を求めることは1日の売り上げの最大化につながることが判明した。さらなる利益を求めるには客の時間帯変動（ピークタイム）に応じてシフトを変化することが必要である。```
という感覚値の通りの主張となりました。

Qiitaにてartisocの記事を調査したところほとんどなかったためこうして書いてみました。
<br>
正直使いづらい印象を覚えたため必要に迫られない限り使うことはないと思います・・・。
Power Automate で SharePoint サイトコレクションのストレージ使用率を取得する

# はじめに

Power Automate を使えば SharePoint でファイル移動等の基本的なアクションができますが、Power Automate に用意されているアクションではできないこともあります。
そういう時は「SharePoint に HTTP 要求を送信します」というアクションを使える場合があります。
ここでは「SharePoint に HTTP 要求を送信します」を使って SharePoint サイトコレクションのストレージ使用率を取得してみたいと思います。

# SharePoint に HTTP 要求を送信します

以下のように設定すると SharePoint サイトコレクションのストレージ使用率を取得できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/1884f54b-7556-b201-f319-72a582fa71ec.png)

`サイトのアドレス` にはストレージ使用率を確認したいサイトコレクションを指定します。
`URI` には `_api/site/usage` と入力します。
ヘッダーは下表のとおりです。

|  キー  |  値  |
| ---- | ---- |
|  Accept  |  application/json;odata=verbose  |
|  Content-Type  |  application/json;odata=verbose  |
|  X-RequestDigest  |  $(\"#__REQUESTDIGEST\").val()  |

# JSON の解析

「SharePoint に HTTP 要求を送信します」の実行結果は JSON になります。
「組み込み」の「データ解析」の「JSON の解析」で値を取得できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/d20c6228-d75f-6da0-7485-c6da1f6db3d3.png)

ストレージ使用率は `StoragePercentageUsed` です。
`スキーマ` には下記を貼り付けます。

```JSON
{
    "type": "object",
    "properties": {
        "d": {
            "type": "object",
            "properties": {
                "Usage": {
                    "type": "object",
                    "properties": {
                        "__metadata": {
                            "type": "object",
                            "properties": {
                                "type": {
                                    "type": "string"
                                }
                            }
                        },
                        "Bandwidth": {
                            "type": "string"
                        },
                        "DiscussionStorage": {
                            "type": "string"
                        },
                        "Hits": {
                            "type": "string"
                        },
                        "Storage": {
                            "type": "string"
                        },
                        "StoragePercentageUsed": {
                            "type": "number"
                        },
                        "Visits": {
                            "type": "string"
                        }
                    }
                }
            }
        }
    }
}
```

Slack メッセージについてはこちらも参考にしてください。

https://qiita.com/numsh/items/c9baa2632485a3d1b4d5


以上
Nuxtにscss設定を追加してレスポンシブ対応させる

# はじめに
30代未経験からエンジニアを目指して勉強中のYNと申します。
いままで避け続けてきたCSSを必要に迫られて勉強中です。。
今回は、NuxtにSCSSを設定するときに必要だったことをメモします。


# assetsディレクトリの設定
[公式ドキュメント](https://ja.nuxtjs.org/docs/2.x/directory-structure/assets/)

```
yarn add -D sass sass-loader@10 fibers
```
```nuxt.config.js
export default {
  css: [
    // SCSS file in the project
    '~/assets/scss/main.scss'
  ]
}
```

# styleResourcesの設定（Share variables, mixins, functions across all style files）
[公式ドキュメント(非推奨なので今回は使わず)](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-build/#styleresources)
[推奨設定](https://github.com/nuxt-community/style-resources-module/)

```
yarn add -D @nuxtjs/style-resources
```


```nuxt.config.js
export default {
  styleResources: {
    scss: ['~/assets/scss/*.scss'],
  },
}
```

# stylelintの設定
[こちらを参考にさせていただきました](https://qiita.com/hibikikudo/items/0db248a78f6eb895bdde)

```stylelint.config.js
module.exports = {
  rules: {
    'at-rule-no-unknown': [
      true,
      { ignoreAtRules: ['include', 'mixin', 'each'] },
    ],
  },
}
```

# コンポーネント共通のscssの記述

```assets/scss/variables.scss
$breakpoint-tablet: 955px;
$breakpoint-mobile: 665px;
```

```assets/scss/main.scss
@import './variables';

// 画面幅955以下になるとこの設定が適用される
@mixin tablet{
  @media only screen and (max-width: ($breakpoint-tablet)) {
    @content;
  }
}

// 画面幅665以下になるとこの設定が適用される
@mixin mobile {
  @media only screen and (max-width: ($breakpoint-mobile)) {
    @content;
  }
}
```

# コンポーネントのscssの記述
```component.vue
<template>
  <div class="hello">
  </div>
</template>

<script>
</script>

<style lang="scss" scoped>
.hello {
  background-color: white;

  @include tablet {
    background-color: pink;
  }
  @include mobile {
    background-color: yellow;
  }
}
</style>
```

これで、background-colorは、下記のようになります。

* ブラウザ（画面幅1500）：白
* iPad（画面幅768）：ピンク
* iPhoneX（画面幅375）：黄色
Re:Zero2Wから始めるHomeAssistant生活 その①

<h1>初めに</h1>
ほぼ自分の備忘録用デス。

書き方の作法とかよくわからないので、おかしかったら教えてください。
プログラムなんてほぼわからん人が書いてるので、間違ってたり動かなくても笑って許して♪
そして、HomeAssistantの推奨構成満たしてないので、動かなくてもそんなものです。
私の環境では現時点では特に問題なく？動いております。
IFTTTとGoogleの連携が残念になったのでシステム全作り直しをしました。
時間ないので若干やっつけ気味の更新デス。
ラズパイが手に入らんという現実は見ないこととします。

取り敢えず、用意するものは
RaspberryPI Zero2W
SDカード16G (推奨は32G以上)
USB電源 (推奨は3A以上)
有線Lanアダプタ(当然有線lanが内臓の機種は不要で設定完了後はWifiでも可。推奨は有線。)
LANケーブル

Zero2Wから始めると書いてますが、インストール時のマシン指定を変えれば他のラズパイでも大丈夫です。たぶん。
<h1>1.ラズパイ用OSの準備</h1>
Raspberry Pi OSのホームページからImagerをインストールします。
ラズパイ3またはラズパイ4を使う場合は64bitのOSを使用できるようです。

https://www.raspberrypi.com/software/

Imagerの書き込み設定を行い、Legacy(Bullseye)の"Raspberry Pi OS Lite (32-bit)"をSDカードにインストールします。
Zero2Wでやろうとするとメモリが少ないからか64bitはうまく入らない感じです？
たぶん3とか4なら64bitもいける・・・はず。

素直にHomeassistantOSを入れてもよかったのですが、ラズパイのカメラの認識がうまくいかなかったため、
ラズパイOS+Supervisedで入れてます。

<h1>２.ホームアシスタントのインストール</h1>

OSをインストールしたSDカードをラズパイにセットし、有線LANアダプタでLAN接続してください。
電源を入れ、TeratermなどのターミナルからRaspberryPiにSSHで接続し、下記内容を1行ごとに実行していきます。
インストール前準備の"sudo apt-get ･････"のところについては一塊全てコピペしてください。
この方法でインストールするのは「Home Assistant Supervised」になります。
HomeAssistantの全ての機能に加えてラズパイOS側でもいろいろしたい人用の欲張りモードです。

```:OS関係
sudo apt update && sudo apt upgrade -y
```
```:インストール前準備
sudo apt-get install \
apparmor \
jq \
wget \
curl \
udisks2 \
libglib2.0-bin \
network-manager \
dbus \
systemd-journal-remote -y

curl -fsSL get.docker.com | sh
```
HomeaAssistantはDockerのCGroup V1というので動いているようです。
そのため、下記の2個のファイルの末尾にそれぞれ記述を行います。
たぶんgrubの方はファイルがないので作成する形になるかと思われます。
この部分はもしかすると不要かもしれませんが。

```:CGroup V1
sudo nano /etc/default/grub
    systemd.unified_cgroup_hierarchy=false

sudo nano /boot/cmdline.txt
    systemd.unified_cgroup_hierarchy=false
    apparmor=1 security=apparmor
```
さすがにZero2Wのメモリが512MBで少なすぎて動作不安定になりがちです。
気が付くとフリーズしていることがあったため、スワップファイルを拡張して対処します。
たぶん初期値が100なので512に変更してください。
メモリが1G以上ある機種ならたぶん不要です。
```:SWAP
sudo nano /etc/dphys-swapfile
    CONF_SWAPSIZE=512
```
ここでいったん"sudo reboot -h"で再起動してください。

あとはHomeAssistant本体をインストールしていきます。
```:homeassistant
wget https://github.com/home-assistant/os-agent/releases/download/1.5.1/os-agent_1.5.1_linux_armv7.deb

sudo dpkg -i  os-agent_1.5.1_linux_armv7.deb

wget https://github.com/home-assistant/supervised-installer/releases/download/1.3.1/homeassistant-supervised.deb

sudo dpkg -i homeassistant-supervised.deb
```

64bitのOSを使う場合はos-agentを"os-agent_1.5.1_linux_aarch64.deb"に変更してください。

最新バージョンでも行けるのかもしれませんが、とりあえず1.5.1のバージョンで動作確認できてます。

https://github.com/home-assistant/os-agent/releases/latest

homeassistantは最新版を入れようとするとうまくいかなかったため、1.3.1にしています。
取り敢えず、上記のコマンドを順番にコピペしていけばいけるはずです。たぶん。

https://github.com/home-assistant/supervised-installer/

ここまで入力すると使用するラズパイ等の型式選択が出てくるので、zero2Wの場合は"raspberrypi3"を選んでください。
bit数はインストールしたOSに合わせてください。
その後20分ぐらい放置してください。

もしここまでやって機種選択画面が出ない場合は、"sudo apt --fix-broken install"を入力すると始まるかもしれません。

ラズパイの接続されているIPアドレスを確認して、ブラウザに

```
http://IPアドレス:8123
```
と入力するとHomeAssistantが起動しているはずです。たぶん。

https://qiita.com/yatsuhashi8284/items/9510e1c2acfde333ca64

20241119に更新。
js処理にかかってる時間を計測する

こんな便利なのあるんだってメモ。

##いいか、performanceメソッドを使うんだ
###こんな感じ

```javascript
performance.mark('mark-stark'); // 計測開始位置にマークをつける
setTimeout(() => {
  performance.mark('mark-end'); // 計測終了位置にマークをつける
  performance.measure('mark-diff', 'mark-stark', 'mark-end'); // 差分算出
  console.log(performance.getEntriesByType('mark')); // 各マークの情報一覧
  console.log(performance.getEntriesByType('measure')); // 各差分の情報一覧
}, 5000);
```

出力結果
![スクリーンショット 2021-04-07 11.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67190/19d1d8b2-ee3b-7451-fe3f-5fc86a49473b.png)
２つめのconsole.logの`duration`をみたら、かかった時間は5004msだよって分かりますね。

###簡単な使い方
上のサンプルでなんとなく理解してもらえると思うけど一応。

1. 計測したい箇所の開始と終わりに`performance.mark`でマークをつける。
1. `performance.measure`で差分算出

#### 1. 計測したい箇所の開始と終わりに`performance.mark`でマークをつける。
引数の文字列は、そのマークの名前なのでなんでもいいです。
わかりやすい名前をつけてあげましょう。

#### 2. `performance.measure`で差分算出
こちらも引数の文字列は差分情報の名前です。
わかりやすい名前をつけてあげましょう。

##以上
簡単でしたね。
これ使って速度改善頑張ろうな :wink:
【備忘録】ROS2のワークスペースの作成方法


# 想定事項
* ROS2がインストール済みであること
* ROS2のインストールは前回記事を参考にすること

前回記事：https://qiita.com/syamada61590289/private/e32b8be4c5db3cb8fec4）

# ワークスペースの作成
ワークスペース名ros2-dashingを想定，必要に応じて変更すること．


```
//ワークスペースの作成
mkdir -p ~/ros2-dashing/src && cd ros2-dashing
rosdep install --from-paths src --ignore-src -r -y
colcon build
echo "source ~/ros2-dashing/install/setup.bash" >> ~/.bashrc
```

以上，ワークスペースの作成が完了である．
firebase functionをローカル環境でテストする。

# はじめに
firebase functionをローカル環境でテストする方法を説明します。

# 環境/前提
![<LABEL>-<MESSAGE>](https://img.shields.io/badge/node-14.15.0-<COLOR>)![<LABEL>-<MESSAGE>](https://img.shields.io/badge/npm-6.14.8-<COLOR>)

Node.jsで既にfunctionが作成されていること。
functionがonCall()で作成されていること。

# 手順
## Firebase CLI をインストールする
```
npm install -g firebase-tools
```

## ローカル環境のfunctionを利用するように設定する。

コード上のfunctionを利用している箇所に、下記の設定を追記します。

```xx.ts
  //追記箇所
  firebase.functions().useFunctionsEmulator("http://localhost:[port番号]");

  //function利用箇所
  const function = firebase.functions().httpsCallable('[function名]');
  function();
```

## エミュレータを実行する

```
firebase emulators:start
```

以上の手順で、firebase functionをローカル環境でテストすることができます。

# 参考
https://firebase.google.com/docs/functions/local-emulator?hl=ja
Google Earth EngineからPythonを使ってプロダクトをまとめてダウンロード

##概要
　Google Earth Engine (以下GEE）には大量の衛星画像やプロダクトが蓄積されていますが、GEE Code Editor上ではJava Scriptを言語として用いなければいけません。これらの衛星画像をGeoTiffで大量にダウンロードできれば、後はPythonで読み込んで処理を行う事が出来ます。こちらの[記事](https://qiita.com/takubb/items/518e860a1d7c336d8f3d)でもループを使ったダウンロード法について紹介されていますが、本記事ではループを使わず、ImageCollectionをそのまま用いるダウンロード法についてご紹介したいと思います。

*ローカルの容量が不足しているなど、GEE上で処理を行う事が望ましい場合もあります。
*学校契約などでGoogle driveの容量が無限の場合は、Google Colabとの組み合わせで容量を気にせずPythonで解析が行えます。

##データ
　今回ダウンロードしたのは、世界の降水推定量のデータセットである[PERSSIAN-CDR](https://chrsdata.eng.uci.edu/)です。


##コード
　以下のコードは、Google Colab上で実行を行ってください。[Colabについて](https://www.codexa.net/how-to-use-google-colaboratory/)

```python:GeeDownload.py
#必要なライブラリのインストール
!pip install earthengine-api
!pip install unidecode
!pip install geetools

#GEEをPython上で使う為の準備
import ee

#このコードを実行すると、Googleアカウントの認証が要求されます。
#表示されるリンクを踏むとアカウントの認証画面に飛びます。
#使用したいGoogleアカウントを選んだら、表示された文字列をコード中に表示されるボックスへコピペしてください。
ee.Authenticate()

ee.Initialize()　

#利用するバンドの選択
band=['precipitation']
#関心領域の設定
ROI =ee.Geometry.Polygon([98,58,117.995,58,117.995,50.004,98,50.004])

#バッチダウンロードのためのライブラリのインポート
from geetools import batch
#ImageCollectionの対象領域・対象期間による絞り込み
PrecipitationData=ee.ImageCollection("NOAA/PERSIANN-CDR").filterDate('2001-07-01', '2001-09-01').filterBounds(ROI);
#ダウンロードの実行
tasks=batch.Export.imagecollection.toDrive(
    collection=PrecipitationData.select(band),　#ダウンロードするバンドの指定
    folder='precipitation_data_2001', #保存先のフォルダの指定
    scale= 500, #解像度の指定(m)
    region= ROI) #対象領域の設定
```

ダウンロードしたデータは、Google Earth EngineにログインしたGoogleアカウントに付随するGoogle driveに保存されます。Google Earth Engine Code editorにてtaskを開くと、画像例の様に実行状況について確認を行うことも可能です。
![progress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1059565/3e301677-a07f-e793-6854-248480ad57f5.png)


　ダウンロードが完了した結果の例です。
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1059565/a1f6ff59-ec20-10f4-4a04-ce82a778c305.png)
コンポーネント設計思想「AtomicDesign」とは

# はじめに
昨今Reactなどのコンポーネントベースで作成するライブラリが普及し、コンポーネント思考での開発が一般化してきました。

本稿では、コンポーネント設計思想の一種である「AtomicDesign」の概要について説明します。
コンポーネント設計時の構成や粒度などの悩みの一助になれば幸いです。

# この記事で得られること
AtomicDesignの概要を理解できる。

# コンポーネントベースで開発を行うメリット
そもそもコンポーネントベースで開発をすると何がうれしいのでしょうか。
代表的なものとして、下記があげられます。

- 機能を再利用でき、コード量を減らせる。
- 拡張性が高く、既存機能への影響を抑えられる。
- メンテナンスしやすく、仕様変更による手戻り作業を最小化できる。
- コンポーネント単位でテストできる。
- 解決する問題が小さくなる。
- 複数人の並行実装が可能になる。
- 統一された使い勝手を提供できる。
- 新規開発メンバーを最短で戦力化できる。
- アプリを横断して、コンポーネントを再利用できる。

# コンポーネント設計の基本
## コンポーネントの理想的な状態
先に述べた「コンポーネントベースで開発を行うメリット」を享受するためには、コンポーネントが下記のような状態である必要があります。

### カプセル化されていること
ある機能をコンポーネント化した際、インタフェースの使い方のみを意識すればよく、コンポーネント内部の実装を意識せずに使うことができます。

### 置き換え可能であること
まったく実装が異なるコンポーネントでも、置き換え対象のコンポーネントと同じインタフェースであれば、システムの動作を損なうことなく置き換えることができます。

### 再利用可能であること
コンポーネントが担っている責任に対して過不足なく機能を提供していれば、多くのコンポーネントで追加実装なく機能を実装できます。

## コンポーネント設計の原則
コンポーネントを設計する際に、下記の原則を踏まえることで、コンポーネントを理想的な状態に保つことができます。

### 単一責任の原則
**コンポーネントが担う責任は、1つに絞った方がよい。**
　→複数の責任を担っていると、変更による影響がわかりにくくなり不具合を生む要因になります。
　→1つの責任にだけ集中することで、変更による影響を予測しやすくなり、再利用性も高くなります。

### 関心の分離
**コンポーネントの機能を目的別に分離した方がよい。**
　→アプリに変更が発生した場合でも、特定の1部分のみを修正すれば済みます。

#AtomicDesignとは
小さいUIコンポーネントを組み合わせて、より大きなコンポーネントを作っていくためのデザインフレームワークのことです。

特徴として、下記が挙げられます。

- アプリケーションのUIをこれ以上分割できない機能にまで分割する。
- より大きなUIが必要な場合は、それより小さいコンポーネントを組み合わせて作成する。
- コンポーネント粒度は下記の5要素に分類され、PAGES→ATOMSにかけて依存する。
- 状態を持つのはPAGESのみ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/b5847b22-00eb-afcb-3423-883fda42bbf9.png)

各要素について説明します。
## Atoms
ボタンといった最小の要素を表します。

例として、下記が挙げられます。

- プラットフォームのデフォルトUI(ボタン・テキストインプット)
- プラットフォームのデファクト・スタンダードなUI(バルーン・カード)
- レイアウト・パターン(グリッド)
- セマンティックなデザイン要素(コンテンツ画像・アイコン・本文)


## Molecules
Atomsを組み合わせ、一機能を構成する要素を表します。

ユーザの動機に対して作成されることが多いです。

例として、下記が挙げられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/1ea799eb-a8c9-27c9-5134-33eb0444aae3.png)



## Organisms
独立して成立するコンテンツ(コンポーネント内で完結する)をあらまします。
AtomsやMoleculesを組み合わせて作成され、独立して存在することができます。(ヘッダー等)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/c36c0476-d539-b877-2baf-2b0d8964f42b.png)

【Moleculesとの見分け方】
Organisms→独立して存在できるスタンドアローンなコンポーネント
Molecules→他のコンポーネントの機能を助けるコンポーネント


## Templates
ページのひな形を表します。
具体的なデータ(状態)を保持せず、Organisms層などを組み合わせて作成されます。
Templatesが依存するコンポーネントが、適切に連携して動作することを確認するために用いられます。


## Pages
Templatesにデータを流し込んだものを表します。
レイアウトデザインを実コンテンツから分離することができます。
これにより、実コンテンツに依存せず、レイアウトテストを実施できます。



# 最後に
本稿ではデザイン(UI)に寄せて説明をしましたが、ロジック面でのコンポーネント設計についても思想は同じです。

また、AtomicDesignはあくまで抽象的な設計思想であり、実際の開発する環境(メンバー習熟度・チーム風土)によりカスタマイズされることが多いらしいです。
具体的には、MOLECULESとORGANISMSを廃止し、COMPONENTという単位でまとめる。などなど。

いい感じのカスタマイズがあれば教えていただきたいです！

#参考
書籍「Atomic Design」 技術評論社　五藤佑典
https://qiita.com/seya/items/8814e905693f00cdade2
firebase-adminのfunctionで「FirebaseApp name [DEFAULT] already exists!」エラーが出る

# 事象
FirebaseのFunctionでfirestoreを操作するために、下記のような実装をしていました。

``` index.js
exports.updateService = functions.https.onCall(async(data, context) => {
  const functions = require("firebase-functions");
  const admin = require("firebase-admin");
  admin.initializeApp();
  const db = admin.firestore();

  const res = await db.collection("[document]").doc(data.userUid).set(data.serviceInfo);
  return res;
});
```

と、下記エラーが出力されてしまいます。
(初回実行は正常に動作するが、初回以降はエラーが発生)

```
Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)
```

# 原因

functionが実行されるたびに、下記のinitializeApp()が実行されてしまうために発生していました。

```
 admin.initializeApp();
```


# 対策

initializeに係る部分をfunctionの外部に移動し、修正しました。


``` index.js
  const functions = require("firebase-functions");
  const admin = require("firebase-admin");
  admin.initializeApp();
  const db = admin.firestore();

exports.updateService = functions.https.onCall(async(data, context) => {
  const res = await db.collection("[document]").doc(data.userUid).set(data.serviceInfo);
  return res;
});
```
Deltaエンジンのご紹介

[Delta Engine Introduction and Overview of How it Works \-\- The Databricks Blog](https://databricks.com/blog/2020/06/24/introducing-delta-engine.html)の翻訳です。2020/6/24時点の記事です。

本日、我々は、Databricksランタイム7.0の一機能として搭載されているSpark3.0のクエリオプティマイザ、キャッシュ機構に対する最適化機能を持ち、Apache Sparkと100%の互換性があり、最新のCPUアーキテクチャを活用するベクトル化クエリエンジンであるDeltaエンジンを発表しました。これらの機能により、[Delta Lake](https://databricks.com/product/delta-lake-on-databricks)が導入されたデータレイクに対するクエリ性能を大幅に改善することができ、お客様においては[レイクハウス](https://databricks.com/blog/2020/01/30/what-is-a-data-lakehouse.html)アーキテクチャの導入がより容易となります。

# 実行性能のスケーリング

ここ数年のハードウェアにおける大きなトレンドは、CPUのクロックスピードは頭打ちになっているというものです。この理由に関してはこの記事のスコープ外ですが、ここで考えなくてはいけないのは、今存在している計算資源を活用してどのようにより良い性能を達成するのかということです。最もインパクトのある方法の一つとして、並行に処理するデータの量を増やすということが挙げられます。しかし、並列化の恩恵を得るためにはデータ処理エンジンにも並列化に即した設計が求められます。

さらに、ビジネスニーズの増加に合わせて、データチームはデータをモデリングするための時間短縮が求められています。スピードが求められるビジネスにおいて、貧弱なモデルを作ってしまうことは、さらに貧弱な予測パフォーマンスにつながってしまいます。多くの場合、これは望まれる状態ではありません。多くの企業はスピードとパフォーマンス両方を最大化する方法を見つけたいと考えています。

# ハイパフォーマンスクエリ実行エンジンであるDeltaエンジン

DeltaエンジンはDelta Lakeに対するSQL問い合わせ、データフレームの操作を以下の3つのコンポーネントを活用することで高速化します：改善されたクエリオプティマイザ、クラウドオブジェクトストレージと実行レイヤの間に配置されるキャッシュレイヤ、そしてC++で記述されたネイティブのベクトル化実行エンジンです。
![](https://databricks.com/wp-content/uploads/2020/06/delta-engine-og-1024x538.png)

改善されたクエリオプティマイザに関しては、既にSpark3.0において機能拡張がなされており(コストベースのオプティマイザ、適合クエリ実行、動的ラインタイムフィルター)、より先進的な統計情報を活用することで、スタースキーマのワークロードにおいては最大18倍の性能を実現しています。

Deltaエンジンのキャッシュレイヤは、自動的にどの入力データをキャッシュするのかを自動的に選択し、NVMe SSDでの格納速度を改善できるように、よりCPUでの処理に適したフォーマットに変換します。これによりほぼあらゆるワークロードにおいて最大5倍の性能改善を実現しています。

しかし、Deltaエンジンにおける最大のイノベーションは、今データチームが直面している課題を解決するために開発した、我々がPhotonと呼ぶネイティブの実行エンジンです(エンジンの中にエンジンがあることは承知しています…)。これは、最新のクラウドハードウェアにおいて性能を最大できるようにDetabricksが完全に新たに開発した実行エンジンです。オープンなSpark APIとの互換性を維持しながらも全てのワークロードにおいて性能を改善することができました。

近い将来、別のブログ記事においてPhotonの内部をご紹介し、どのようにPhotonが動作するのか、どの程度の性能を出すのかをご説明します。

# Deltaエンジンを利用するには

これら3つのコンポーネントを統合することで、Databricksで記述されるコードの改善が、データレイクにおける分析ワークロードでより高いパフォーマンスにつながっていくのか、より容易に理解できるようになると考えています。改善されたクエリオプティマイザ、キャッシュによる改善の恩恵をすぐに享受することが可能です。Photonに関しては、年末までには多くのお客様が利用可能になる予定です。

> **訳者コメント**
2021/4/7時点でPhotonはPublic Preview(Experimental)であり、Databricks担当者に連絡いただくことで利用可能です。

お客様にDeltaエンジンをご提供できることは大変な喜びです。時間・コスト削減には当然価値がありますが、レイクハウスパターンにおけるDeltaエンジンの担う役割は、統合と簡素化を推進するために、どのようにデータチームがデータアーキテクチャを設計するのかをサポートするというものです。

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
編集中のUITableViewCell外をタップしたらキーボードを閉じる


# 要件
UITableViewCell内にUITextFieldやUITextViewがあり、入力箇所とは別の部分をタップしたらキーボードを閉じたい。　　

## extension
- 表示されているCellの中からファーストレスポンダを探すメソッドを生やす

```
extension UITableView {
    func findFirstResponder() -> UIView? {
        visibleCells.compactMap { cell in
            cell.contentView.subviews.first { $0.isFirstResponder }
        }.first
    }
}
```

## UIViewController

```
class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    // ※1 タップジェスチャーを用意
    private lazy var tapGesture = {
        UITapGestureRecognizer(target: self, action: #selector(tappedGesture(gestureRecognizer:)))
    }() 
 	
    override func viewDidLoad() {
        super.viewDidLoad()
        observeNotifications()
   }
	
    // ※2 tapしたときの処理
    @objc
    func tappedGesture(gestureRecognizer: UITapGestureRecognizer) {
        // ファーストレスポンダを探し、resignする
        tableView.findFirstResponder()?.resignFirstResponder()
    }
 
    // キーボードの表示通知を監視
    func observeNotifications() {
        // ※3　キーボードが表示されたら Viewにジェスチャーを追加
        NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .current) { [weak self] _ in
            guard let self = self else { return }
            // tap gesture追加
            self.view.addGestureRecognizer(self.tapGesture)
        }
        // ※4　キーボードが閉じたらジェスチャーを解除
        NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .current) { [weak self] _ in
            guard let self = self else { return }
            // tap gesture解除
            self.view.removeGestureRecognizer(self.tapGesture)
        }
    }    
}
```

## drag もしくは scrollで閉じる

もしタップではなくドラッグもしくはスクロールしたときに閉じたい場合は、UITableViewの設定だけで可能。

```
tableView.keyboardDismissMode = .onDrag // or .interactive
```
土下座絵文字 ( `:bow:` ) はYesなのかNoなのか曖昧だからやめてほしい

# 土下座絵文字 🙇‍♂️ について
あなたは、 🙇‍♂️ を見たときにどう思いますか？

* 「おじぎをしているな」
* 「謝っているな」

などの印象を持つのではないでしょうか。
で、そこになんともいえない「雑さ」を感じませんか？

# 曖昧にしてはいけない所で曖昧な表現を使うのは技術者失格だと思います

たとえば

> Q: 4/20に○○の件をやろうと思うのですが、参加されますか？

という問いに対して

> 🙇‍♂️

というレスポンス。

# どっちやねん

大概にせえや。
~~技術者ならYes/Noを即答しろやボケが~~ といつも思っています。
わたしは「わかりました」の意には 🙋‍♂️ ( man-raising-hand ) を使っています。
挙手は間違いなくYes / Sureの意味だからです。
土下座は使いません。

# まとめ

土下座絵文字、使うのやめましょう。
nuxtのdayjs-moduleで日本のタイムゾーン表示にする

## GMTのタイムゾーンで表示されてしまう
nuxtで日付を扱うライブラリとしてdayjs-moduleを選択した
そのまま出力する分にはよいが、`format('YYYY.MM.DD')`で出力するとグリニッジ標準時なので、想定外の時刻になる

```
$dayjs('2021-03-01T19:00:00.000Z')
```

【出力結果】
Mon, 01 Mar 2021 19:00:00 GMT

```
$dayjs('2021-03-01T19:00:00.000Z').format('YYYY/MM/DD H:mm:ss')
```

【出力結果】
2021/03/02 04:00:00


Day.jsは自動で自国のタイムゾーンになるって書いてあったのですが、dayjs-moduleはだめなんでしょうか…
` <html lang="ja">`にしてみたが、結果は変わらず

```
 head: {
    htmlAttrs: {
      lang: 'ja'
    }
 }
```



## nuxt.configの設定を追加する
readmeにある通り、dayjsの設定で`defaultTimeZone: 'Asia/Tokyo',`を設定する
https://github.com/nuxt-community/dayjs-module#1-register-dayjs-module-to-your-nuxt-application

が、結果は変わらず

## tzを使うように明示する
Day.jsでのtimezoneの設定方法を参考に、tz()をつると日本時間になった
https://day.js.org/docs/en/plugin/timezone

```
$dayjs.tz('2021-03-01T19:00:00.000Z')
```

【出力結果】
Mon, 01 Mar 2021 10:00:00 GMT

GMTなので-9時間されてる

```
$dayjs.tz('2021-03-01T19:00:00.000Z').format('YYYY/MM/DD H:mm:ss')
```

【出力結果】
2021/03/01 19:00:00

ちゃんと出た
python 環境構築

######環境
mac
************

```
#homebrew インストール
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

#brewがインストールできたか、確認する。
brew -v
```
```
#python3インストール
brew install python3

#python3がインストールされたらか確認する。
python3 --version
python 3.x.x

#しかし、macのデフォルトのpythonを呼び出す。(2系)
python --version
python 2.x.x

```
インタープリタを作る その14

#概要

インタープリタを作ってみた。
javascriptで俺言語インタープリター書いてみた。
eval使ってみた。

#投入したソース


```
10 a=0
20 a=a+1
30 c=(a>100)*255
40 b=a%15
50 c=(b==0)*120
60 b=a%5
70 c=(b==0)*140
80 b=a%3
90 c=(b==0)*160
100 d=a
110 c=20
120 d="fizzbuzz "
130 c=20
140 d="buzz "
150 c=20
160 d="fizz "
170 c=20
c=1
```

#結果


```
10 a=0
>20 a=a+1
>30 c=(a>100)*255
>40 b=a%15
>50 c=(b==0)*120
>60 b=a%5
>70 c=(b==0)*140
>80 b=a%3
>90 c=(b==0)*160
>100 d=a
>110 c=20
>120 d="fizzbuzz "
>130 c=20
>140 d="buzz "
>150 c=20
>160 d="fizz "
>170 c=20
>c=1
1 2 fizz 4 buzz fizz 7 8 fizz buzz 11 fizz 13 14 fizzbuzz 16 17 fizz 19 buzz fizz 22 23 fizz buzz 26 fizz 28 29 fizzbuzz 31 32 fizz 34 buzz fizz 37 38 fizz buzz 41 fizz 43 44 fizzbuzz 46 47 fizz 49 buzz fizz 52 53 fizz buzz 56 fizz 58 59 fizzbuzz 61 62 fizz 64 buzz fizz 67 68 fizz buzz 71 fizz 73 74 fizzbuzz 76 77 fizz 79 buzz fizz 82 83 fizz buzz 86 fizz 88 89 fizzbuzz 91 92 fizz 94 buzz fizz 97 98 fizz buzz >  
```

#成果物

https://embed.plnkr.co/plunk/GX208Lq7adbfmwVR


以上。
Sliderクラスのプロパティを初心者用にまとめた（たまに画像あり）

よく使用するであろうSliderクラスを簡単にまとめました。
どんなことができるのかを確認しつつ、アウトプットしたかったのが経緯です。
画像系と、メソッド系は順次追加していく予定です。
個人のメモレベルですが、参考になれば幸いです。

しかし、Swiftのドキュメントは読みやすいですね！勉強中の身としては非常に助かる。。

参考：[UISlider | Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uislider)

## スライダークラスの宣言

```swift
var slider : UISlider()
```
<br>
## スライダー値へのアクセス

### スライダーの現在の値と変更

```swift
slider.value   //初期値は０
```

### 現在の値の設定

```swift
setValue(Float, animated: bool)

例:
slider.setValue(0.5, animated: true) //アニメーション付きでつまみが真ん中に来る
slider.setValue(0.5, animated: false)//即座につまみが真ん中にくる
```
<br>
## スライダーの上限加減の設定

```swift
var minimumValue: Float  //初期値は０
var maximumValue: Float //初期値は１
```

変更することも可能
初期値を0.3にしておくことで、音量を消すことができなくなる。など

```swift
slider.minimumValue = 0.3
```
<br>
## スライダーの外観を変更する

### スライダーの最小値と最大値を表す画像を設定する

```swift
var minimumValueImage: UIImage?
var maximamValueImage: UIImage?
```

### スライダーのトラック画像に色をつける

```swift
var minimumTrackTintColor: UIColor?
var maximumTrackTintColor: UIColor?
```

画像の青部分やグレー部分の色を変更することができます。
![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/87d27da6-31b9-475a-ab4f-f7e3c5c72faf/Untitled.png](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F87d27da6-31b9-475a-ab4f-f7e3c5c72faf%2FUntitled.png?table=block&id=83adaf13-1fe0-46e9-8d8d-e1af6ab19d21&width=4800&userId=bbb9c644-b9d1-4013-9a20-6864ada7830a&cache=v2)

```swift
例：
slider.minimumtrackTintColor = UIColor.red
slider.maximumtrackTintColor = UIColor.black
```

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/081d4ce0-c45b-49fd-a644-07940c3babf9/Untitled.png](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F081d4ce0-c45b-49fd-a644-07940c3babf9%2FUntitled.png?table=block&id=697b8cfa-132a-4497-9582-cf791117a547&width=4800&userId=bbb9c644-b9d1-4013-9a20-6864ada7830a&cache=v2)

### スライダーのつまみ部分に色をつける

```swift
var thumbTintColor: UICoror?
```

```swift
例：
slider.thumbTintColor = UIColor.black
```

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/96f6ea05-7c61-44a7-91fb-66442b5227a6/Untitled.png](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F96f6ea05-7c61-44a7-91fb-66442b5227a6%2FUntitled.png?table=block&id=8a2f85df-1d1d-4da5-b646-10d05e3932f5&width=4800&userId=bbb9c644-b9d1-4013-9a20-6864ada7830a&cache=v2)

### スライダーのレンタリングに使用されているつまみの画像

```swift
var currentThumbImage: UIImage
```
<br>
## まとめ

思ったより、物足りないものになってしまいました。
画像系やメソッド系をサボったことと、説明が簡易すぎました・・

実際にアプリ作成の際に、使いながら使い方や説明を追加して行けたらいいなぁ
Amazon VPC パケットの詳細について教えて！

本記事では以下の素朴な疑問を抱えたあなたにスッキリ感を与えることでしょう！

・Amazon VPC が「ブロードキャスト」や「マルチキャスト」をサポートしていないのはどうして？
・Amazon VPC でパケットスニッフィングが機能しない！？

Amazon VPC とは？
---
Amazon VPC はザックリわけると２つから成り立ってます。
①様々なサポートコンポーネント
　　Amazon DNSサーバー
　　インスタンスメタデータ
　　DHCPサーバー　　等々
②物理サーバー
　　EC2を起動するサーバー
※①・②は独自のIPアドレスを持ってます。

流れとしては、
（ユーザー）EC2をVPCで起動
　↓
（AWS）インスタンスが実行される物理サーバーを選択/決定
　↓
（AWS）AZ・インスタンスタイプ・インスタンステナンシー・プレースメントグループ　等々を決定
　↓
（ユーザー）EC2が起動した！
となります。

※インスタンステナンシーには３種類あります
・Default
・Dedicated Instance:このホスト上には同一AWSアカウントにて起動したEC2のみが起動する
・Dedicated Host(s):このホスト上には同一AWSアカウントにて起動したEC2かつ１つのEC2インスタンスのみ


VPCの機能
--
VPCのコア機能として、「テナントの分離」というのがあります。
テナントの分離には「マッピングサービス」を利用します。
このマッピングサービスがはじめの疑問を解決するためのカギとなってます！

基盤AWSインフラストラクチャから、VPC（すべてのリソース・VPCIPアドレス。リソースが実行される基盤となる物理サーバーのIPアドレスに関する情報）といったトポロジ情報の決定的なソースをもとに仮想化します。

パケットの流れ
--
ここまでで、VPCが物理サーバーから成り立っていることが朧気ながら理解してきたのではないでしょうか。
具体的なEC2からの流れを見てみましょう。
（EC2　Guest OS A）アドレス解決プロトコル　ARPリクエストとしてブロードキャスト
　↓
（サーバーのハイパーバイザー）　マッチングサービスにクエリを実行
　↓
（マッチングサービス）EC2 Guest OS BがVPCに存在するかを識別　※
　↓
　ある場合には、MACアドレスを取得
　↓
　インスタンスBのMACアドレスを含むARP応答をインスタンスAに返す
　↓
（EC2 Guest OS A）IPパケットの送信準備完了！

※（マッチングサービス）インスタンスBがVPCに存在するかを識別　※
ここについてもう少し詳細に見てみましょう。
サーバーのハイパーバイザーからのリクエストにてVPC IDとEC2 Guest OS BのIPアドレスをもとにマッチングサービス開始
　↓
インスタンスBの実行される物理サーバーのIPv4アドレス・MACアドレスを学習
　↓
インスタンスBのMACアドレスを含むARP応答をインスタンスAに返す



EC2 Guest OS Aのパケット送信準備まで完了しました。
MACアドレスだけではなく、物理サーバーのIPアドレスを取得している点に注目ですね。
いよいよEC2 Guest OS Aがパケット送信します。
具体的なパケットの送信内容を見てみましょう

特定のVPCを識別するVPCヘッダーにカプセル化される
　↓
インスタンスAの物理サーバーの送信元IPアドレス
と
インスタンスBの物理サーバーの宛先IPアドレスにカプセル化
　↓
AWSネットワークへGO

ここでのパケットの中身は以下の感じですね。

（EC2 Guest OS A）
　[宛先EC2 Guest OS B MACアドレス][送信元EC2 Guest OS A MACアドレス][送信元EC2 Guest OS A　IPアドレス][送信先EC2 Guest OS B IPアドレス][データ]
　↓
（サーバーのハイパーバイザー）
[送信元物理サーバーIPアドレス][宛先物理サーバーIPアドレス][VPCのID][EC2 Guest OS Aが送信したパケット]

※サーバーのハイパーバイザーではEC2 Guest OS Aが送信したパケットをひとまとめ[EC2 Guest OS Aが送信したパケット]と表記しています。

以上でパケットの流れとなります。

結論
--
初めの疑問に戻ります。
・Amazon VPC が「ブロードキャスト」や「マルチキャスト」をサポートしていないのはどうして？
・Amazon VPC でパケットスニッフィングが機能しない！？
➡　EC2の物理サーバー同士がマッピングサービスを通じて通信を行うため、上記の機能がサポートされない。
　といったところとなります。

参考
--
参考になる資料をぜひ読んでみてください。
AWS Certified Advanced Networking Official Study Guide (Sybex)
AWSネットワークの論理的な側面 ～ AWSのバックボーンネットワークに関するDeepな話（2）
Power Automate で 凝った Slack メッセージを投稿する

# はじめに

Power Automate から Slack にフォーマットされたメッセージを送信できます。
フォーマットの公式リファレンスはこちらです。
[Formatting text for app surfaces](https://api.slack.com/reference/surfaces/formatting)
全部読むと多いのですが、よく使いそうなものだけピックアップしてご紹介します。

# Power Automate

Power Automate の画面はこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/a951c01c-638d-763a-aeaf-48956476732f.png)

メッセージにはこのように書きます。

```
*太字タイトル*

最新のニュースをチェックしてください。
<https://news.google.com/|Google ニュース>

```コードブロックには
複数行書けます。```

> 引用はこのように
> 書きます。

絵文字もOKです。
:thumbsup:

よろしくお願いします。
```

# Slack

Slack に投稿されたメッセージはこのようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113765/f7d5bb69-aa06-71fe-8e23-46fc65a1406e.png)


以上
アナログ回路 その26

# 概要
circuit-simulatorをplunkerでホスティングした。
アナログ回路をシュミレーションで、説明してみる。
fetを使ってみた。

# 回路

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/bec514b9-f9ee-e3ba-6c8c-5b2a6387eb3a.jpeg)


# 結果

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/e7ab1428-3d14-d176-901b-77e89388ab33.jpeg)

# 成果物

https://embed.plnkr.co/plunk/s04DjsHoyTBA1jPR


以上。
実行時エラー'1004' プログラミングによる　Visual Basic プロジェクトのアクセスは信頼性に欠けます のexcel2016での解決方法

は
実行時エラー 1004 信頼性に欠けます　office2016
でググってTOPに出てきた
[「プログラミングによる Visual Basic プロジェクトへのアクセスは信頼性に欠けます」と表示される場合の対処法[エクセルVBA] : バヤシタ ](https://bayashita.com/p/entry/show/279)
に記載のように
```
「ファイル」
→「オプション」
→「セキュリティ センター」
→「セキュリティ センターの設定」（ボタン）
→「マクロの設定」
→「VBA プロジェクト オブジェクト モデルへのアクセスを信頼する」のチェックボックスをオンにする。
```
で解決しましたっ＼(^o^)／

事務方から問い合わせがあった時のためにメモるっ
Rubyのデータ型変換

Rubyのデータ型変換の方法を記述します

String型からInteger型に変換するとき

```ruby
a="2.5".to_i
```

Integer型からString型に変換するとき

```ruby
b=2.5.to_s
```

Integer型からfloat型に変換するとき

```ruby
c=4.to_f
```

参考にしてください。