OmniAICreator/Qiita-1.07M huggingface dataset:
【Flutter】Flutter + Firebaseの導入が楽ちんになったので試してみました！！！

# はじめに
今まではiOS/Android両方作らないといけなく、地味に地味にめんどくさかったのですが、
一括で作れるようになったので、早速試してみました！！！！

# 環境
Mac Monterey 12.3
Flutter 3.0

# FireBaseからiOSでもAndroidでもなくFlutterからアプリを開始
![スクリーンショット 2022-05-26 15.32.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/b1113a08-11a8-4362-b54d-74f77bf3929b.png)

# 準備を求められるので素直に応じよう！！
![スクリーンショット 2022-05-26 15.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/a639cc8d-4bdd-cf96-6c11-5150afb486c8.png)

上から
- コンソールからfirebase loginをする。
- FlutterSDKをインストールする。
- Flutterのプロジェクトを作成する。
と聞かれているので、私の環境ではすべて実施済みのため次へ。  

# flutterfire_cliを入れてほしいと言われるので、素直に応じる！
```
dart pub global activate flutterfire_cli
```
![スクリーンショット 2022-05-26 16.06.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/91ae24d9-5f7a-5ba4-d159-c09bd4ae6d7d.png)

# プロジェクトのルートディレクトリで以下コマンドを叩く!
```
flutterfire configure --project=sampleproject-41a7f
```
「sampleproject-41a7f」は各自プロジェクトに合わせてください。

# 「bash: flutterfire: command not found」と怒られた！！！
```
mac-book:SampleProject user$ flutterfire configure --project=sampleproject-41a7f
bash: flutterfire: command not found
```

flutterfireのパスが通ってないため、エラーが発生。
```
export PATH="$PATH":"$HOME/.pub-cache/bin"
```
https://stackoverflow.com/a/71547699/15400905

その後エラーは発生しなくなり以下の様に、環境を聞かれます。
十字キーで選び、スペースで選択、エンターで確定です。
![スクリーンショット 2022-05-26 16.00.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/0537ad89-a401-c25f-feaa-e202325a903f.png)

今回はiOSとAndroidを選びました、実行したら完了し、
「lib/firebase_options.dart」というファイルが自動で作成されました。
![スクリーンショット 2022-05-26 16.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/f6f4a360-ca97-1edc-f8a3-48f392322313.png)

# Firebaseのinitializeを追加する。
```
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

// ...

await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
);
```

そういえばFirebaseCore入れてない。。。？
手順にあったっけ。。。？
Firebase_Coreを入れてないこと気が付き、firebase_coreを追加したところ、ビルドが通りました。
```
 flutter pub add firebase_core
```

# FireBaseのコンソールにてiOS/Android2つのアプリが追加されていることを確認！お疲れさまでした。
![スクリーンショット 2022-05-26 16.15.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/4ea157f9-9e7d-43f5-377e-547b05bcf740.png)

# まとめ
今までiOS/Android2度手間でしたが、
今回からは1発で作れるようになったのは。。良き！！

ご参考になれば幸いです。
楽に構成図をつくりたい

# やりたいこと
いろいろ構成図をつくる際に、Excel だったり PowerPoint だったりを使うことが多いが、箱を配置して位置を調整してなど、正直めんどくさい。また、その構成図の変更管理も大変なのでコードで管理したい。
そこで、そういったツール類を調べてみたので、ここにまとめてみる。

# 作図ツール
ざっと調べた限りだと以下が広く使われているっぽい。
* Draw.io (Diagrams.net)
* PlantUML
* Mermaid
* Diagram as Code

# Draw.io (Diagrams.net)
https://app.diagrams.net/

有名な作図ツール。ブラウザ上で作図でき操作も GUI で行え、シンプルで直感的なので、使いやすい。
作成した図は XML で定義されているので、コード管理もできる。
GitHub ではその XML の差分が図として表示される。いろんなアイコンセット (AWS, Azure, GCP など) も用意されているのも良い。Visual Studio Code にもプラグインが用意されているのも便利。
しかし、個人的には配置したオブジェクトの位置の調整だったり整形などがめんどくさい。適当に良い感じに自動で配置してくれるツールが無いかなーと思っていろいろと調べてみた。

### 参考
* [Draw.io(diagrams.net)で作成したインフラ構成図をコードで管理する、GitHubで編集差分を確認する)](https://dev.classmethod.jp/articles/create-infrastructure-diagrams-in-drawio-diactamsnet-manage-them-in-code-and-github/)

# PlantUML
https://plantuml.com/ja/

いろんな UML を作成できるツール。UML 以外の図もサポートされていてその1つにアーキテクチャ図がある。Draw.io とは異なり、コードを書くとコードから図を生成できる。GitHub 上で図を表示させるには、Chrome 拡張 ([Pegmatite など](https://chrome.google.com/webstore/search/Pegmatite)) を使って、Markdown ファイルに記述する必要があるが、図に出力してリンク貼って、というようにしなくて済むのは良い。
しかし、あくまでも UML を作成するツールで、構成図向けではないので見栄えは微妙。アイコンセットも用意はされていないので AWS などでのアーキテクチャ図を作成するのには向かない。
あと、Java が必要なので環境構築が少し面倒かもしれない。

### 参考
* [PlantUML使い方メモ](https://qiita.com/opengl-8080/items/98c510b8ca060bdd2ea3)

# Mermaid:point_up:
※後述しますが、#Mermaid と見出しに使えないそうなので絵文字をつけてます:sunglasses:
https://mermaid-js.github.io/mermaid/#/

Markdown 内で、フローチャートやシーケンス図、クラス図などを生成できる。Markdown のコードブロック内に書けばそれで作図できるのは便利。PlantUML と似ているが、拡張が不要だったり環境構築がいらなかったりというのは利点。Visual Studio Code にプラグインもある。
それ以外は PlantUML とほぼ同じ機能なので割愛。

### 参考
* [GitHub、Markdownファイルに「Mermaid」で図を挿入可能に](https://atmarkit.itmedia.co.jp/ait/articles/2204/12/news043.html)
* [Mermaid 入門してみたメモ(flowchart で力尽きた…)](https://zenn.dev/okazuki/articles/learning-mermaid)

# Diagram as Code
https://diagrams.mingrammer.com/

Python で構成図を作成できるツール (go 版もあり)。PlantUML や Mermaid と異なりアイコンセットが用意されているのが良い！ (元々、Azure 上の構成を図にしたかった) Python で書けるので文法をそのまま利用できるのも良い。
また、graphviz をラップしているようで、graphviz でできることは理論上なんでもできる (らしい)。
しかし、Web 上に情報が少ないので詳細な方法などを調べるのに時間がかかる (graphviz が分かる人はすんなり書けるんだろうか？)。

### 参考
* [構成図をコード管理できるDiagram as Code(Diagrams)を試してみた](https://qiita.com/daisukeArk/items/e864d1bb0d1fd601fe9f)
* [ゼロから始めるdiagramsでシステム構成図](https://tech.gunosy.io/entry/diagram_as_code)

# ということで
作図ツールについて調べた結果、Diagram as Code がやりたいことを実現するのに一番適切だったが、細かい設定などが分からず、結局 Draw.io に落ち着いた。やはり思ったとおりに描けるのは良い (めんどうではあるけども)。
Diagram as Code の情報がもう少し増えるか、使ってみて使い方が分かれば Diagram as Code に移行するかもしれない。

# 余談
PlantUML と Mermaid は Qiita が対応しているみたい。

https://qiita.com/Qiita/items/c07f3262d8f3b25f06c9

PlantUML

```plantuml
bob -> alice
```

Mermaid
~~※本文中に「#mermaid」という文字列があると正しく表示されないそうで、表示されていません。~~
（@kyonc5 さん ありがとうございます！）。

```mermaid
sequenceDiagram
bob-->alice : 
```

## 追記
Qiitaさんがちゃんと説明されていました。
[Markdown記法 チートシート 「mermaid」を見出しに使用できない](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#mermaid%E3%82%92%E8%A6%8B%E5%87%BA%E3%81%97%E3%81%AB%E4%BD%BF%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84)

以上です。
UbuntuでSoftEtherのインストール

SoftEtherを毎回入れるたびに調べるのが面倒なので備忘録として残します。

# PPAの追加
```shell
sudo apt-add-repository ppa:paskal-07/softethervpn
sudo apt update 
sudo apt upgrade
```

# SoftEther VPN Serverの場合
## SoftEther VPN Serverのインストール
```shell
sudo apt install -y softether-vpnserver
```

## 起動と恒久の設定
```shell
sudo systemctl start softether-vpnserver
sudo systemctl enable softether-vpnserver
```

# SoftEther VPN Clientの場合
## SoftEther VPN Clientのインストール
```shell
sudo apt install -y softether-vpnclient
```

## 起動
```shell
sudo vpnclient start
```

# 参考サイト
https://www.gadgets-today.net/?p=5792

https://zenn.dev/nemuki/articles/aa5b93e506f765
Cloud Firestoreのexportに失敗する場合

# 公式URL

[データのエクスポートをスケジュールする | Firebase Documentation](https://firebase.google.com/docs/firestore/solutions/schedule-export?hl=ja#gcp-console)

# 環境

| 言語 | Node.js 16 |
| --- | --- |
| 確認日時 | 2022/05/26 |
| 確認環境 | GCP Console |

# エラー内容

[公式のとおり](https://firebase.google.com/docs/firestore/solutions/schedule-export?hl=ja#gcp-console)にやって、このエラーが出る場合

```bash
TypeError: Cannot read properties of undefined (reading 'charCodeAt') at peg$parsetemplate
```

# 対応

ここの部分の

```javascript
exports.scheduledFirestoreExport = (event, context) => {
  const databaseName = client.databasePath(
    process.env.GCLOUD_PROJECT,
    '(default)'
  );
```

**process.env.GCLOUD_PROJECT**

これをProjectIDに変更する。例えば hoge_projectだったら

```javascript
exports.scheduledFirestoreExport = (event, context) => {
  const databaseName = client.databasePath(
    'hoge_project',
    '(default)'
  );
```

こんな感じで変更するとできる。

ドキュメントを改修してもらえるといいですね。

6時間ハマってました。

# 参考URL
https://stackoverflow.com/questions/62035940/cloud-function-fails-after-changing-runtime-to-node-js-10
【Swiper.js】初期状態を非表示にすると挙動がおかしくなるバグへの対処法

モーダル表示で、ボタンを押すとカルーセルが現れるように、初期状態を**display: none;** で実装していたところ、思うように動かなかったのでその対処法

以下のようなものを作ろうとしていました
![このようなものを作ろうとしていた](https://storage.googleapis.com/zenn-user-upload/e1207553caaa-20220526.png)

# 解決法

```JavaScript
var mySwiper = new Swiper ('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination'
  },
  observer: true,
  observeParents: true,
});
```

↓インスタンス作成時にこのコードを加えると綺麗に動くようになりました。
```JavaScript
  observer: true,
  observeParents: true,
```

参考記事
https://github.com/nolimits4web/swiper/issues/1981
はじめての Zoom Video SDK - Jumpstart 編

<h2>■ 前置き</h2>

<b>・Jumpstartを使ってVideoSDKの開発をより簡単に</b>

Jumpstartは、Web上に用意されたテンプレート型の開発支援ツールです。
必要となり得る最低限の機能の実装を編集可能な項目としてテンプレート化し、利用者はそれら各項目へ追記編集することで、VideoSDKの機能とブランディングを簡単に実装いただくことを目的としています。
テンプレートの編集が完了した時点でVideoSDKの実装に必要なソースコードをJumpstartでは自動生成しダウンロードいただくことができます。
予算が限られているプロジェクトや開発に不慣れな状況下においてJumpstartを使っていただき開発の取っ掛かりやリソースの節約に貢献できると考えられます。

<b>・Jumpstartをご利用いただくための要件</b>

Jumpstartをご利用いただく為には　VideoSDKのアカウントが必須となります。
また、以下でご紹介する手順ではNode.js/npm環境が整っていることを前提としています。
VideoSDKのアカウントについて詳しくは、<a href="" target=_blank>初めてのZoom Video SDK - 準備編</a> を参照ください。

<h2>■  Jumpstart</h2>

1.　Jumpstartへアクセスし「Build App」 をクリックしてテンプレートを進めていきます。
<a href="https://developers.zoom.us/tools/jumpstart/start" target=_blank>https://developers.zoom.us/tools/jumpstart/start</a>
![スクリーンショット 2022-05-26 13.58.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/57888a6d-7217-2b76-ffac-f62579714641.png)

2.　右側に編集後のプレビュー、左側に編集可能な項目が表示されます。
「App Name」や「Description」を編集していきます。
![スクリーンショット 2022-05-26 14.00.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/0f12aa3b-1c1a-7bf5-0eda-36d2649811dd.png)

3.　画面に沿って遷移し編集を進めます。
![スクリーンショット 2022-05-26 14.43.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/ee2ba86e-8d99-08c0-0184-16b2f0c35797.png)

4.　編集テンプレートの最後にページ右上に「Download Code」が表示されます。
これをクリックすると編集された内容でソースがダウンロードされます。
![スクリーンショット 2022-05-26 14.44.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/375083d6-db01-5f77-8784-dc25076cb6a2.png)

5.　ダウンロードしたZipファイルを解凍し、「.env」ファイルを作業フォルダの最上位(ルート)に作り自身のVideoSDKに登録されているkeyとsecretを記載して保存します。
![スクリーンショット 2022-05-26 15.29.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/03356f44-01e3-9f65-e361-df4199bcfc18.png)

6.　準備が整ったところで、node側で必要なモジュールをダウンロードして起動します。
```shell
$ npm install
...
$ npm run start
```

7.　正常に起動するとブラウザからのアクセスができます。
![００００１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/2bcd525c-c61c-6314-745f-de48a4819b67.png)
![スクリーンショット 2022-05-26 15.40.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2123842/4e08f43b-ae93-62d4-d560-867095d49cb6.png)

<h2>■ 補足事項</h2>
<a href="https://blog.zoom.us/jumpstart-by-zoom/" target=_blank>
Developers! Build Video Apps Faster with Jumpstart by Zoom</a>
これから始めるBIMI  ～メールにロゴを表示するまでの長い道のり

2022.1.26-28 開催された JANOG49 で、弊社チーフエンジニア平野善隆(@hirachan)により「これから始めるBIMI ～メールにロゴを表示するまでの長い道のり～」というタイトルで発表が行われました。その時の資料をこちらにも共有します。


## はじめに

SPF、DKIM、DMARCなどのメールセキュリティの延長線上にBIMIというものがあります。BIMIは信頼できる送信元からのメールにロゴを表示するという仕組みです。まだRFCにはなっていませんが、2021年7月にはGmailが正式リリースするなど大きな動きがありました。
本セッションではBIMIを使ってロゴを表示するための仕組みを送信側、受信側の視点を交えながら説明します。また、実際にやってみてわかった苦労した点や、それをどうやって乗り越えたのか、乗り越えられなかったかなどについても紹介します。
まだまだ始まったばかりのBIMIですが、今後どのように付き合って行けばいいのか議論できればと思います。

BIMI is an extension of email security such as SPF, DKIM, and DMARC. It is a mechanism that displays a logo on emails from trusted sources.Although it is not yet an RFC, there have been major movements such as the official release of Gmail in July 2021.
In this session, I will explain the mechanism for displaying a logo using BIMI from the perspectives of the sender and receiver. I will also introduce some of the difficulties that I have encountered and how I overcame or failed.
BIMI is still in its infancy, so I hope we can discuss how we should go out with it in the future.


## 目次

- BIMI以前のロゴ表示
- BIMIの仕様 (表示側視点)
- 自分のロゴを表示させるためのステップ (送信者視点)
- 実際にやってみて苦労した話



## これから始めるBIMI ～メールにロゴを表示するまでの長い道のり～

<script async class="speakerdeck-embed" data-id="9ee8f3c952394f10b8d3e924b8856190" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>


## 前の発表資料

JPAAWGで発表した資料も合わせてご参考ください。

- JPAAWG 2nd General Meeting: [送信ドメイン認証・暗号化 DeepDive ～ DMARCから MTA-STS, DANEまで全部PASSさせるまでの道のり](https://qiita.com/qualitia_cdev/items/9f01f4151ceafca1ef8d)
- JPAAWG 2nd General Meeting: [メールセキュリティトレイルマップ～DMARCやその先にある世界～](https://qiita.com/qualitia_cdev/items/a9d4fcc3ccf55154bf43)
- JPAAWG 1st General Meeting: [送信サイドからみたDMARC] (https://qiita.com/qualitia_cdev/items/9a45797305002c3f8458)
【Automation Anywhere】Excelの値を、Excel内の列名を使って取得できる便利な方法

# はじめに

以下のような表を Automation Anywhere の Automation360 で扱う際、「商品名」「単価」のようなExcelデータ内の列名を使ってデータを取得する方法を説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/7b4fc763-5403-06f3-40dd-252cbe83494c.png)

# やりかた

## 0.前提

前提として、今回は以下のような処理の流れ（開く→ループで全行を処理→閉じる）において、ループの中でデータを扱う場合についての説明となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/eddec448-c1c1-f18d-ebfb-5c72962c2bc5.png)

## 1.「Excelを開く」のアクションでやること

「Excelを開く」のアクションでは、画面右側のプロパティで「シートにヘッダーを含む」にチェックを入れておきます。
そうすると、データの１行目を列名として使えるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/5074295d-ed52-5ccc-2a0b-ae83b17c7331.png)

なお、この指定はExcelの基本操作・高度な操作どちらでもできます。

※ 基本操作って何？　高度な操作って何？　という方は [こちらの記事](https://qiita.com/aaiso/items/f3116b3ff1da035bb2af) をご参照ください。

## 2. データを取り出すときにやること

ループ処理の中でデータを取り出すときには、下記①②の方法があります。
（どちらのやりかたでやっても、結果は同じです）

### ① 初心者向け：入力補助を使う方法

以下の動画を参考にやってみてください。
![シートにヘッダーを含む.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/e56d59f1-95f6-9950-8e5d-91b9d040a409.gif)

### ② 慣れた人向け：変数を直接指定する方法　

入力補助を使うのが面倒な人は、`$レコード変数名{"Excelの列名"}$`の要領で、変数を直接書き込むこともできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/89812994-23c4-f03b-072c-ab0b39c92640.png)

①の方法も、結果的に上記のような形で変数を書き込むために入力補助を使っているだけです。

# よくある質問

### Q.「シートにヘッダーを含む」機能が使えるのは、ヘッダーとなる列名が１列目にあるときだけですか？

### A.そんなことはありません。

以下の方法で、任意の行を列名として使うことができます。

- Excelを開くアクションで、「シートにヘッダーを含む」を選択しておく（ヘッダーが１列目にあるときと同様） 
- ループのアクションで、列名として使いたい範囲を含む範囲をループの範囲に指定する

例えば、以下のような要領です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587845/ae678729-6bad-96d4-bbac-949c2173be07.png)

# まとめ

以下の方法を使うことで、Excelの中の列名をデータ取得時の指定に使うことができます。

- Excelの「開く」アクションで「シートにヘッダーを含む」にチェックを入れておく
- 入力補助、もしくは直接指定で `$レコード変数名{"Excelの列名"}$` を指定する

Automation360の便利な機能のひとつですので、ぜひ使ってみてください！
GASでSwitchBot API にリクエストを送り物理ボタンを制御する

# 自己紹介
開発経験もない文系プログラミング初心者です。
コードは拙いかもしれませんが、少しでも参考になれば幸いです
# 参考記事
**以下の記事を参考にさせていただきました！**
- **[switchBot APIのリファレンス](https://github.com/OpenWonderLabs/SwitchBotAPI)**

https://github.com/OpenWonderLabs/SwitchBotAPI

- **[gasのhttpリクエストのやり方公式リファレンス](https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app)**

https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app

- **[SwitchBotのアクセストークン取得方法](https://note.com/klayer123/n/nb14086840351)**

https://note.com/klayer123/n/nb14086840351

- **[SwitchBot　×　GASの参考記事](https://qiita.com/TMUS_SH/items/9197c2c78faab5fd6164)**

https://qiita.com/TMUS_SH/items/9197c2c78faab5fd6164
# どうやってやるか
- アクセストークンを取得（１０回ボタン押して隠しボタン出す。上記の記事参考）
- デバイスIDを取得（下記を参考）
- それらをもとにGASでHTTPリクエストを送る
# 全コード
**＊注意＊　アクセストークンが知られてしまうと誰でも制御可能になってしまいます**
**＊注意＊　絶対に知られないようにしましょう**
```js
function switchBot() {
   //header情報として取得したトークンを設定
var headers = {
  "Authorization" : "ここに自分の開発者トークンを貼り付ける",
  "Content-type": "application/json; charset=utf-8" //Content-typeとはリクエストbodyはjson形式ですよと言うやつ
  };
  
  var data = {
    "command": "turnOn",//turnOffにすれば消えます
    "parameter": "default",
    "commandType": "command"
  };
  //UrlFetchApp.fetch()の第二引数optionsの設定部分
  var options = {
    'method' : 'post',
    "headers" : headers,
    "payload" : JSON.stringify(data)
    //jsonオブジェクトを作る→json形式でサーバで制御→jsonオブジェクトとしてresponseを制御するため
    //       ↑  　　　　　　　　　　　　　　　　　　　↑     
    //これがJSON.stringify（）　　　　　　これがJSON.parse（）メソッド

  };


  var deviceid = "自分が取得したデバイスIDを入れる";//制御したいdeviceid
  var url1 = `https://api.switch-bot.com/v1.0/devices/${deviceid}/commands`;
  

  

  var response = UrlFetchApp.fetch(url1,options); //gas版http request パラメータあり
  var json=JSON.parse(response.getContentText());//これがJSON.parse（）メソッド
  console.log(json)//成功したか確認
}



```
# deviceIDの一覧取得方法
```js
function deviceid() {
//header情報として取得したトークンを設定
var headers = {
  "Authorization" : "自分のアクセストークンを取得してください",
  "Content-type": "application/json; charset=utf-8" //Content-typeとはリクエストbodyはjson形式ですよと言うやつ
  };


var url = "https://api.switch-bot.com/v1.0/devices";
    
var options = {
      'headers': headers
    };
var reply = UrlFetchApp.fetch(url, options);
var json=JSON.parse(reply.getContentText());

console.log(json['body']['deviceList'])//ログから取得したいdeviceIdを選んでください

}
```
# やってみた感想
初心者の僕でも一日で出来たので比較的分かりやすいと思います。文章が拙かったらすいません。
また、組み合わせ次第でなんでも、自動化出来そうだと思いました。
スマートスピーカー、スマートスイッチ、SwitchBot、IFFFT、Zapier、IOSショートカットなど組み合わせればなんでも
出来そうですね。
【Flutter】テストで、子ウィジェットを取得する方法

# こんなアプリがありました
<img width="400px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362835/7e1bf394-9e4a-6b3f-da78-fe5ace40530f.png">

ソースコードはこちら。

https://github.com/yuchan2215/FlutterTestLearn/blob/master/lib/main.dart

Flutterの初期コードを改造し、`1増えるボタン`と`2増えるボタン`があります。
```dart
Card getCard(String title, int addValue, Key key) {
  return Card(
    key: key, //Keyはここにある！
    child: Column(
      children: [
        Text(title), //引数の文字をタイトルに
        OutlinedButton(
            onPressed: () {
              _incrementCounter(addValue); //カウンターの値を引数の値分増やす
            },
            child: const Text("ボタン"),)
      ],
    ),
  );
}
```
カードはこのような実装で作られています。
## 問題点
テストを作る際に、`find.text("ボタン")`してしまうと、2つ見つかってしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362835/5563e136-89c7-0f31-86ad-ece5dbce0b89.png)
### 解決策
ここで、Keyは`OneButton`と`TwoButton`と分かれていますので、`find.byKey()`を利用して、孫要素である`Text`を探して`tester.tap()`をしてみようと思います。

# 成果物

https://github.com/yuchan2215/FlutterTestLearn/blob/master/test/widget_test.dart

上記リンクのようなソースコードになりました。
```dart
//KeyからWidgetを取得する
var oneButtonParent = find.byKey(const Key("OneButton")); 
//ボタンのテキストを取得する
var buttonText = find.text("ボタン");
//親要素から子要素を取得する
var oneButtonText = find.descendant(of: oneButtonParent, matching: buttonText);
```
一番下の`find.descendant`が子孫を取得する部分なのですが、至ってシンプルです。
```dart
find.descendant(of: 親要素が含まれるFinder, matching: 探したいものが含まれるFinder)
```
としてあげることで、親要素の子孫要素から絞り込んだFinderを生成します。

公式ドキュメントはこちら。

https://api.flutter.dev/flutter/flutter_test/CommonFinders/descendant.html

ちなみに逆バージョンで親要素を取得するものもあります。

https://api.flutter.dev/flutter/flutter_test/CommonFinders/ancestor.html
Flutter : Flavorごとに異なるSplash画面を表示する

## 入れるライブラリ
flutter_native_splash
https://pub.dev/packages/flutter_native_splash

## 参考
https://zenn.dev/susatthi/articles/20220406-061305-flutter-native-splash

## 実装手順
1. ライブラリを入れる
`flutter pub add flutter_native_splash`

2. flavorごとにyamlの設定ファイルを作成する
例にあるproductionの部分を個別のflavorを入れる
例：`flutter_native_splash-production.yaml`

3. flavorごとに設定を記載する
Android12~のスプラッシュ画像の設定に関しては参考資料を確認してください。
```yaml: flutter_native_splash-production.yaml
flutter_native_splash:
  ## 背景色
  color: "#ffffff"
  ## スプラッシュ画面の画像のパス
  image: assets/logo-production.png
  branding: assets/branding-production.png
  ## ダークモードの時の背景色
  color_dark: "#121212"
  ## ダークモードの時のスプラッシュ画像のパス
  image_dark: assets/logo-production.png
  branding_dark: assets/branding-production.png

  android_12:
    image: assets/logo-production.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-production.png
    icon_background_color_dark: "#121212"
  
  web: false
```

最後に flavorごとに下記のコマンドを叩く
`flutter pub run flutter_native_splash:create --flavor production`

### Androidは以上で設定完了です
## ここからはiOS側に関することです。
### 私が実装していて発生した事象
・`{プロジェクトDir}/ios/Runnder.xcodeproj/project.pbxproj`
のiOSのプロジェクトファイルに`}ct */;`という差分がでていた。
理由はわからないが、これが原因でXcodeでcannot open xcodeprojが発生していたため、差分を戻したら解消された

・生成されたproductionLaunchScreenに画像が表示されず、背景色もblackになっていた
→ とりあえず直接上記のファイルに個別の画像を指定し、背景色も個別で指定

## iOS側設定操作（ライブラリのReadmeに載っています）
1. 生成されているflavorごとのLauncherScreenファイル（ここではproductionLauncherScreen）が、Runner配下に存在するためこれを
`Runner/Runner/`配下に移動させる

2. 左のリストから一番上のRunnerを押下し、プロジェクトの設定画面を開き、表示される上部のタブから`Build Setting`を選択
3. 2の下にさらにタブが表示されるため、その一番左にある + ボタンを押下する。
4. Add User-Defined Settingを選択し、`LAUNCHER_SCREEN_STORYBOARD`を入力する
5. BuildSchemeごとに使うflavorごとのLauncherScreenファイルを指定する（ここではproductionLauncherScreen）
6. 最後に`Runner/Runner/Info.plist`を開き、`Launch screen interface file base name`というキーに対して
`$(LAUNCH_SCREEN_STORYBOARD)`という値を渡す

### これでiOS側の設定も完了
Zabbix 6.0の概要紹介(第一回)

# はじめに
こんにちは。サーバインフラエンジニアをやっております、Kと申します。
この度、弊社におけるZabbixのマーケティング活動強化の一環として、Zabbixの最新の動向や機能紹介を行うページを作ろうという話が持ち上がり、それならばと2022/2/15に正式リリースされましたZabbix 6.0の概要紹介を行う記事を投稿することになりました。
普段の業務の合間を縫っての投稿になりますため、全何回になるか分からず更新頻度も不定期になりますが、なるべく有益な記事をお届けできるよう頑張ります。

# Zabbix 6.0の主要な変更点紹介

Zabbix 6.0の変更点の中で個人的に注目したい箇所を紹介いたします。
特に注目したい機能に関しては、第2回以降でより深堀りしていく予定です。
すべての変更点は下記のリンク先をご覧ください。
[What's new in Zabbix 6.0.0](https://www.zabbix.com/documentation/6.0/en/manual/introduction/whatsnew600)
[Release Notes for Zabbix 6.0.0](https://www.zabbix.com/rn/rn6.0.0)

<dl>
  <dt>Zabbix ServerのHA(High Availability)クラスタ構成サポート</dt>
  <dd>6.0の主要な変更点の中で最も注目となるであろう機能です。これまでZabbixのソフトウェア自身にはHAクラスタを構成する機能は備わっていませんでしたが、6.0で正式実装されました。

クラスタを組むこと自体はこれまでのバージョンでも可能で、Pacemaker/Corosync等、別途クラスタリング用のソフトウェアを用いる手法がメジャーでした。ではZabbix単独でのクラスタリングが可能になったことでそれらの手法は不要になるかというと、従来型の手法には従来型にしかない利点があります。
ですので、既存手法が置き換わるというよりは、あくまで選択肢が増えたというイメージで捉えて頂くのが適切だと思います。そもそもHAクラスタって何？というところも含め、詳しくは別の回で触れてまいりたいと思います。
</dd>
<br>
  <dt>「サービス」監視機能の改善</dt>
  <dd>Zabbix5系までは「設定」セクション内の1項目であった「サービス」機能が大項目として独立しました。これにより、「サービス」の項目内で設定と監視が完結するようなメニュー構成になりました。サービス機能についてはこの他にも複数の変更点がありますが、長くなってしまうため今回は割愛させて頂きます。

なお、ここで言うサービスとはWindowsのサービスではなく企業活動等によってユーザーへ提供される財、つまりビジネスの一般用語としてのサービスを指します。
</dd>
<br>
  <dt>ダッシュボード上のジオロケーションマップ</dt>
  <dd>ダッシュボード画面上に地理的なマップを作成し、その上に監視対象ホストの位置と障害状況を表示することが出来ます。

以前のバージョンのZabbixでもやってやれないことはないのですが、やはり非標準という事で設定にそれ相応の工夫が必要なので、Zabbixの標準機能として実装されたのは大きいポイントです。
下図はマップのサンプルです。（マーカーは適当に打ったものですので場所を特定しても何もありません。）また、このマップはZabbixのデフォルトですが、Googleマップやユーザーが独自に作成したマップを設定、選択することも可能です。</dd>
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2634503/820377a8-10d7-804b-f26e-432f3a326c5d.png)

  <dt>Kubernetes環境の監視サポート</dt>
  <dd>Kubernetesによるコンテナ環境のモニタリングが標準機能として実装されました。KubernetesノードやPodの自動検出など、Kubernetesコンポーネントの監視が可能です。</dd>
<br>
  <dt>ベースライン監視とアノマリー検知</dt>
  <dd>静的な閾値を使わずにアラート検知を行うアプローチが可能になりました。

ユーザーの皆様が監視設定をする上での大きな悩みどころの一つはアラート検知の閾値設定ではないかと思います。例えばCPU使用率一つ取ってみても、70%以上を異常とするのか、80%なのか90%なのか、どこからを正常と異常の境界にするかは稼働させるシステムの性質や負荷によりけりですし、ベテランのエンジニアであっても大変判断が難しい部分です。
そこでベースライン監視とアノマリー検知では特定の閾値を設けず、過去の監視データを分析して算出した情報に基づいて、「いつもと大きく異なる状態」の検知を行います。
以前のバージョンのZabbixでは監視データは一つ前の周期（一週間前、一年前など）との比較しか出来なかったのですが、ベースライン監視を活用することでより長期に渡る監視データとの比較が可能になります。</dd>

# 他、注意点など
<dl>
  <dt>対応OSについて</dt>
  <dd>Zabbix 6.0のServerパッケージ(rpm)はRedhat系ではRHEL8用の物しか提供されなくなりました。RHEL7以前用のパッケージの提供予定はありません。したがって現在RHEL7以前のOS上でZabbixが稼働しており、Zabbix6.0へのリプレースを検討されているユーザーの方はOSも込みでリプレースして頂く必要があります。</dd>
  <dt>対応ミドルウェアについて</dt>
  <dd>Zabbix 6.0がサポートするDBとPHPのバージョン指定が以前のZabbixバージョンと比較してかなり厳しくなりました。

* MySQL 8.0.x
* MariaDB 10.5.x ‒ 10.6.x
* PostgreSQL 13.x
* Oracle 19c ‒ 21c
* TimescaleDB 2.0.1 ‒ 2.3
ーー
* PHP 7.2.5 - 8未満

これより古いのはもちろんNGなのですが、物によってはこれより新しいバージョンを使用するのもNGな場合があります。dnf(yum)でバージョン指定せずにパッケージをインストールするとサポート外のバージョンが入ってきてしまう場合がありますので、インストールパッケージの選択には十分ご注意いただく必要があります。</dd>
</dl>

# おわりに
第2回では検証環境にZabbix 6.0のインストールを行ってみたいと思います。
あわよくばHA構成についても検証してみたいところです。
機械学習の学習時にロスがNaNになるときにすること

まずデータを確認する。
次にネットワークの前後処理を確認する。
その後にネットワークを疑う。

# データセットにNaNが混ざっている

意外とよくやる。
対処方法はNaNが含まれるデータは弾いてしまうか、または他の値に置き換える

## 欠損値を弾く

pandasを使っているならとても簡単で`df.dropna()`を使えば欠損値を含む行を削除してくれます。
```py
df.dropna()
```
欠損値が含まれる列を削除したいときは
```py
df.dropna(axis=1)
```

また、データ成形中にうっかりnumpy配列にNaNができてしまったら弾くようにしています。
```py
def nan_checker(array):
    """
    input ndarray
    '''
    return
    配列にNaNが含まれない   -> True
    配列にNaNが含まれる     -> False
    """
    if np.any(np.isnan(array)):
        return False
    else:
        return True
```
pytorchならdataloaderに、tensorflowならTERecordにする前にこのnan_checker()を挟んどくと良いかもしれません。

## 欠損値を置き換える

データの数が限られていて一つでも失うのが惜しいときには、欠損値を他のデータに置き換えます。
よくやるのは平均値補完

```py
from sklearn.impute import SimpleImputer
import numpy as np

imputer = SimpleImputer(missing_value=np.nan, strategy='mean')
imputer = imputer.fit(df.values)
imputed_array = imputer.transform(df.values) #補完
```
# シンプルにゼロ割している
このパターンがほとんどな気がします
```py
x = x / torch.max(x) # NG
x = x / (torch.max(x) + 1e-12) # OK
x = x / (torch.max(x) + torch.finfo(torch.float32).eps) # OK
```


# sqrtにゼロが入っている
sqrtにゼロか限りなく小さい数が入力されると発散します。
```py
torch.sqrt(x) # NG
torch.sqrt(x + 1e-10) # OK
torch.sqrt(x + torch.finfo(torch.float32).eps) # OK
```

# 交差エントロピー誤差のlog()にゼロが入っている

logにゼロが入って発散してしまうとNaNになるので、predictの値にちっちゃい値（1e-12）を足す
```py
cross_entropy = -tf.reduce_mean(label * tf.log(predict + 1e-12))
```
# 結果の値が小さすぎる

sigmoid関数にちっちゃすぎる値を入れると、0として返されることがあります。
また64bitから32bitへのキャストの間に小さい値が0になってしますこともあります。

# 学習率がでかすぎる

学習率がでかいとNaNがでることがあります...が、根本的な対策にはなってないことがほとんどなのでその場しのぎ的な対処法だと思ってください。


今後もNanに出会ったら追記していきます
GCPでクレデンシャルが発行されたことを検知したい

クレデンシャル発行を検知したい場合があったので、以下のように作ってみました

全体像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80769/07de984b-e404-246e-96c3-8e60ddfbdd9c.png)


フィルター条件はこちらになります
```bash
Liggingフィルター条件
logName="projects/[PROJECT ID]/logs/cloudaudit.googleapis.com%2Factivity"
protoPayload.methodName="google.iam.admin.v1.CreateServiceAccountKey"
```

クレデンシャルを作られたログのみをpubsubにsinkします

```bash
PROJECT_ID=シンクを作るproject
gcloud config set  project ${PROJECT_ID}

gcloud logging sinks create credential-create-sink pubsub.googleapis.com/projects/${PROJECT_ID}/topics/credentials_notification --log-filter="logName=¥"projects/${PROJECT_ID}/logs/cloudaudit.googleapis.com%2Factivity¥" protoPayload.methodName=¥"google.iam.admin.v1.CreateServiceAccountKey¥"" 
SERVICE_ACCOUNT=sinkで作成されたサービスアカウント
gcloud pubsub topics add-iam-policy-binding syslog-sink-topic \
     --member serviceAccount:${SERVICE_ACCOUNT} --role roles/pubsub.publisher
```

pub/subに来た通知をslackに通知します

サンプルプログラム
```python
import base64, os, json, time
import urllib.request

channel = os.environ.get('SLACK_CHANNEL')
url = os.environ.get('WEBHOOK_URL')

def send_slack(payload):
   headers = {'Content-Type': 'application/json'}
   req = urllib.request.Request(url, data=payload, headers=headers, method='POST')
   try:
       with urllib.request.urlopen(req) as res:
           body = res.read()
   except urllib.error.HTTPError as err:
       print(err.code)
   except urllib.error.URLError as err:
       print(err.reason)

def main_handler(event, context):
   """Triggered from a message on a Cloud Pub/Sub topic.
   Args:
        event (dict): Event payload.
        context (google.cloud.functions.Context): Metadata for the event.
   """
   pubsub_message = json.loads(base64.b64decode(event['data']).decode('utf-8'))

   message = """
TimeStamp: %s
CreateUser: %s
Project: %s
ServiceAccount: %s
""" % (
   pubsub_message[u'receiveTimestamp'],
   pubsub_message[u'protoPayload'][u'authenticationInfo'][u'principalEmail'],
   pubsub_message[u'resource'][u'labels'][u'project_id'],
   pubsub_message[u'resource'][u'labels'][u'email_id']
   )

   print(message)
   payload={
   'channel': channel,
   'username': 'Credential informer',
   'attachments': [{
       'pretext': 'Credential created.',
       'color': '#00F35A',
       'text': message,
   }]
   }
  
   send_slack(json.dumps(payload).encode('utf-8'))
```
webfont (googleフォント等）を使用すべきでない理由

## フォントってやはりでかい

googleフォントでは指定した文字だけフォントを出力してくれるとか、節約する機能がありますが、やはり相当なウェブサイトの表示にストレスがかかってしまうことがあります。

それどころか、倹約家にとって、突然モバイルでWebページを表示しなければならない事態って、
（調査していないので明らかではないのですが）
何かと容量を気にするのかもしれません

## 発端は楽天モバイル 0円廃止

楽天モバイル 0円廃止したなかで、
最も移行した or する予定先が povo 2.0 が最も多くなっています

しかし、povo 2.0の速度は わずか 128kbps

:::note info
もちろんトッピングすれば高速化しますが
:::

携帯キャリア(MVNO含む）の中でも、かなり低速な部類になります。

０円なので文句は言えませんが、速度はこの程度です

![2022-05-26 14.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149448/361ee39f-1a48-849f-447e-55b30d239f22.png)

## この速度ではマークに使用するマテリアルフォントやFontAvenueが表示に相当遅延がおきます。

実際に povo トッピングなし回線で計測すると
表示開始（JavaScriptで動的フォント読み込み）から
表示完了まで
１文字を表示するためだけに20～30秒もかかってしまいます。

## ウェブサイトにアクセスするのは金持ちだけではない
インターネット動画目的で固定回線ユーザーも一定数増えたものの、今やモバイルユーザーのほうのが多い状態です。

金持ち専用のハイステータスなウェブサイトを作成するのであれば
webfontを使いまくって美しくしてよいと思いますが、
世の中、金持ちだけではないわけです。

そういうわけで、webfontの利用は極力避けたほうがよいと考えられます。

:::note info
そもそも、多種多様にさまざまなサイトからwebfontが提供されていることで、
モバイルの閲覧者はギガに悩まされます
:::

## アイコンとかを埋め込むのであれば？
少し前までは iconmon でwebfontを作ったほうがちょうどよかったようですが、
今ではCSSにSVGアイコンを埋め込むほうのが
最も合理的に転送速度を稼げ、かつギガの過大消費も抑えられるはずです。
Streamlit : Images Grid

# はじめに

下記のようなImage GridのページをStreamlitで作成したい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208980/89ce1501-eb8f-dc4b-8836-30ea2d45b114.png)


# 全体コード

```python
import streamlit as st
import os

st.title('Multiple Images')

#絶対パスを取得
PROJECT_PATH = os.path.abspath(os.path.dirname(__file__))
print(PROJECT_PATH)

#画像保存フォルダのパスを取得
image_dir = os.path.join(PROJECT_PATH,'images')
print(image_dir)

# 画像ファイルのリストを取得
fName_list = os.listdir(image_dir)

#画像ファイル数
print(len(os.listdir(image_dir)))
img_file_num = len(os.listdir(image_dir))

#multiple images　Grid表示

idx = 0

for _ in range(len(fName_list)-1):
    cols = st.columns(4)

    if idx < len(fName_list):
        cols[0].image(f'./images/{fName_list[idx]}',width=150, caption=fName_list[idx])
        print(os.path.join(image_dir, fName_list[idx]))
        idx += 1
    if idx < len(fName_list):
        cols[1].image(f'./images/{fName_list[idx]}',width=150, caption=fName_list[idx])
        idx += 1
    if idx < len(fName_list):
        cols[2].image(f'./images/{fName_list[idx]}',width=150, caption=fName_list[idx])
        idx += 1
    if idx < len(fName_list):
        cols[3].image(f'./images/{fName_list[idx]}',width=150, caption=fName_list[idx])
        idx += 1
    else:
        break

```

# 参考資料
https://discuss.streamlit.io/t/grid-of-images-with-the-same-height/10668/6
Phoenix[Elixir]を使ってNeosVR用のAPIを最短で作ってみる


## 動作環境

```
$ cat /etc/os-release | grep VERSION=
VERSION="20.04.4 LTS (Focal Fossa)"

$ elixir -v
Erlang/OTP 24 [erts-12.3.1] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit]

Elixir 1.13.0 (compiled with Erlang/OTP 24)

$ mix phx.new --version
Phoenix installer v1.6.7

```

## プロジェクトの作成
今回はDBを使わないため`--no--ecto`を指定します

```
$ mix phx.new neoex --no-ecto

* creating neoex/config/config.exs
    省略
* creating neoex/priv/static/favicon.ico

Fetch and install dependencies? [Yn] Y
* running mix deps.get
* running mix deps.compile

We are almost there! The following steps are missing:

    $ cd neoex

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server

```

## Phoenixの起動

```sh
$ cd neoex
$ phx.server
Compiling 13 files (.ex)
Generated neoex app
[info] Running NeoexWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[debug] Downloading esbuild from https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.29.tgz
[info] Access NeoexWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...
```

## ブラウザで起動確認

`http://localhost:4000`にアクセスします
![Screenshot from 2022-05-26 14-14-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/fb1e38a3-c408-1644-3485-1a52b320ed6f.png)


## APIを作ろう

`lib/neoex_web/router.ex`を編集
`/exec/`値のパス追加します

```diff_elixir
 defmodule NeoexWeb.Router do
   use NeoexWeb, :router

   #省略
   scope "/", NeoexWeb do
     pipe_through :browser

+    get "/exec/:val", PageController, :exec
     get "/", PageController, :index
   end
  
   #省略
end

```

`lib/neoex_web/views/page_view.ex`を編集
プレーンテキストを表示できるように`render`関数を追加します

```diff_elixir
 defmodule NeoexWeb.PageView do
   use NeoexWeb, :view

+  def render("exec.txt", %{val: val}) do
+    val
+  end
 end
```

`lib/neoex_web/controllers/page_controller.ex`を編集

exec関数を追加します
router.exで指定した`:exec`と同じ名前にします

```diff_elixir
 defmodule NeoexWeb.PageController do
   use NeoexWeb, :controller

   def index(conn, _params) do
     render(conn, "index.html")
   end

+  def exec(conn, params) do
+    val = """
+    あなたの名前は#{params["val"]}です
+    """
+    render(conn, "exec.txt", val: val)
+  end
 end
```

## ブラウザで動作確認
`http://localhost:4000/exec/hoge`

![Screenshot from 2022-05-26 14-01-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/d6429fce-e208-e1e1-cbbf-3b55692fefa2.png)


## NeosVR側

NeosVRで下記のLogiXを作ってPulseを押します

![Screenshot from 2022-05-26 14-05-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/29fdc977-5833-2422-3566-a41b02e860ca.png)
これで完成です


試しにhogeをabcに書き換えます
`http://localhost:4000/exec/abc`
![Screenshot from 2022-05-26 14-07-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/f832a554-7e65-51e1-d7a3-bb8682947413.png)

表示結果が変化することを確認できました
【Ubuntu20.04】リモートデスクトップで快適に全角/半角を切り替える方法

# 結論

- ホストPCのAHK（AutoHotKey）で変換キーにInsertキーを割り当てる
- サーバPCのMozc（Google日本語入力）でInsertキーに半角/全角キーと同等の機能を割り当てる

ことにより変換キーにより日本語入力と英数入力を切り替えることができるようになる。

（作成中）
【注意】プログラミングスクールの落とし穴


未経験からエンジニアへの転職を考えている方が利用するプログラミングスクール。
その落とし穴を私の経験からお伝えします。


# 結論

プログラミングの経験がないから一からしっかり教えてもらおうという方
<strong>後悔する可能性が非常に高いです。

これについてお話します。

### プログラミングスクールは高額
プログラミングスクールは短期（半年～10ヵ月）受講で60万以上します。
専門性が高い技術なので仕方ないですね。
金額に見合った高度なスキルを習得したいですね。

### 実際のカリキュラム
ここから実際に入学した際に提示されたカリキュラムをお伝えします。

＜半年コース 70万円 言語はPHPを選択＞週一回　2時間 / 質問し放題
5月 html 基礎
6月 html ＋ css で 画面作成
7月 WEBアプリ基礎 ＋ PHP基礎
8月 PHP ＋JS 学習
9月  ポートフォリオ作成
10月 ポートフォリオ作成
11月 ポートフォリオ作成

いかがでしょうか 半分以上の期間が基礎であり、htmlとCSSで二か月です。
すでに学習されている方ならわかると思いますが、html/CSSの学習で20万はかなり高額です。
他にもフレームワークのカリキュラムが無い等、不満が多くありました。

このように
<strong>1から教えてもらおうとすると書籍やwebで学べる内容に大金をつぎ込むことになります</strong>

# まとめ

プログラミングスクールはとても高額なので<strong>自分で学習できる範囲は自分で学んで</strong>から入校を検討しましょう。
非常にコスパの悪い買い物にならないようにしましょう。

## 余談

<strong>「質問したい放題！！」はあまり意味がない。</strong>
受講生が一番質問したいのは作成中プログラムの解決できないエラーです。
が、私の経験上まともに回答してもらったことがほとんどありません。
というのも、自分が作成しているモノを把握していない相手が答えられる事はほとんどないからです。

なので、おススメは自分の講義時間を質問時間に使うことです。これなら専任の講師は作成中のプログラムを理解してくれているのでスムーズにエラーを解決してくれる事が多いです。

# こちらの記事も
https://qiita.com/Ryu-Yasuda/items/5fce03e256a2c7f9a629
VBA_05_Dictionary_Collection_Variant_Sample

Keyword
---

Dictionary
Collection
Variant
Like
vbCrLf

Sample Code
---
```vb:コピー本を探す
Public Sub MySample20220526_2()

    Dim mySheet As Worksheet
    Dim myArrList As Variant
    Dim i As Long: Dim j As Long: Dim k As Long
    Dim myFileList As New Dictionary: Dim myCopyFileList As New Dictionary
    Dim myStrFileName As String: Dim myStrOutput As String
    Dim myResultList As New Collection
    Dim myFileKey As Variant: Dim myCopyFileKey As Variant
    
    Set mySheet = ThisWorkbook.ActiveSheet
    myArrList = mySheet.UsedRange
    
    For i = LBound(myArrList) + 1 To UBound(myArrList)    
        If Not myFileList.Exists(myArrList(i, 2)) Then        
            If myArrList(i, 2) Like "* - コピー*" Then            
                myStrFileName = Replace(myArrList(i, 2), " - コピー", "")                
                If myFileList.Exists(myStrFileName) Then                    
                    If Not myCopyFileList.Exists(myArrList(i, 2)) Then                    
                        myCopyFileList.Add myArrList(i, 2), myArrList(i, 4)                        
                        If myFileList.Item(myStrFileName) <> _
                            myCopyFileList.Item(myArrList(i, 2)) Then                        
                            myResultList.Add myArrList(i, 2)
                        End If
                    End If
                End If
            Else            
                myFileList.Add myArrList(i, 2), myArrList(i, 4)                
            End If
        End If
    Next i
    If myCopyFileList.Count > 1 Then        
        For Each myCopyFileKey In myCopyFileList.Keys
            myStrOutput = myStrOutput & myCopyFileKey & "：" _
                & myCopyFileList.Item(myCopyFileKey) & vbCrLf
        Next        
        myStrOutput = "コピー本は" & myCopyFileList.Count & "件あります。" _
            & vbCrLf & vbCrLf & myStrOutput        
    End If
    
    For k = 1 To myResultList.Count    
        If k = 1 Then
            myStrOutput = myStrOutput & vbCrLf & "サイズが異なるファイルリスト" & vbCrLf
        End If        
        myStrOutput = myStrOutput & vbCrLf & myResultList.Item(k)        
    Next k
    MsgBox myStrOutput
End Sub
```


Sample Data
---
![無題5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2672288/4880af25-5ad2-7c43-6b4e-8f077c5d00e5.jpeg)
【Flutter3.0】キーボードタイプをスクショ付きで改めて。

# はじめに
Flutterも3になりましたので、改めてスクショ付きで種類をまとめようと思いました。

# 環境
Flutter3.0
Xcode 13.3.1

# ドキュメント
https://api.flutter.dev/flutter/services/TextInputType-class.html


## TextInputType.text
```
TextField(
  onChanged: onChange,
  keyboardType: TextInputType.text,
),
```
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/bf1fb938-55ca-1ab2-b54b-c53c331f0e81.png">


デフォルトのキーボード。
未指定だとこちらを表示します。

## TextInputType.multiline
```
TextField(
 onChanged: onChange,
 maxLines: 3,
 keyboardType: TextInputType.multiline,
),
```
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/6f953405-0892-8323-5b94-3603b7f0e0be.png">

複数行に対応したキーボード。
エンターを押下時に改行します。

## TextInputType.phone
```
TextField(
  onChanged: onChange,
  keyboardType: TextInputType.phone
),
```
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/d1c3101b-d8cc-b49e-87d2-ce428510daf5.png">

通話用のキーボード。
「+」,「*」,「#」を表示します。

## TextInputType.datetime
```
TextField(
  onChanged: onChange,
  keyboardType: TextInputType.datetime
),
```
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/0ca8263b-b403-3447-2666-afaebaa73096.png">

時間入力用のキーボード。
iOSではデフォルトのキーボード。
Androidでは数字キー「/」と「：」と「-」を表示します。

## TextInputType.emailAddress
```
TextField(
  onChanged: onChange,
  keyboardType: TextInputType. emailAddress
),
```
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/b47385f6-0375-69c0-645f-910450ba9b02.png">

メール用のキーボード。
「@」と「.」を表示します。 

## TextInputType.url
```
TextField(
  onChanged: onChange,
  keyboardType: TextInputType.url
),
```
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/f8c32a2c-2038-3006-b538-e7346b2721c3.png">

URL入力用のキーボード。
「/」と「.」を表示します。

## TextInputType.name
```
TextField(
  onChanged: onChange,
  keyboardType: TextInputType.name
),
```
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/c2989313-c925-5ebe-ce3c-2f9f345e4fc4.png">

人の名前や住所などを入力するのに適したキーボード。
iOSではUIKeyboardType.namePhonePadを表示します。
AndroidでTYPE_TEXT_VARIATION_PERSON_NAME用に最適化されたキーボードを表示します。


## TextInputType.streetAddress
```
TextField(
  onChanged: onChange,
  keyboardType: TextInputType.streetAddress
),
```
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902401/df7b62f2-113d-71da-38d9-51e4a12b8d39.png">

住所を入力するのに適したキーボードを表示。
iOSではデフォルト。
AndroidでTYPE_TEXT_VARIATION_POSTAL_ADDRESSのキーボードを表示します。


## TextInputType.none
```
TextField(
  onChanged: onChange,
  keyboardType: TextInputType.none
),
```
キーボードを表示しないようにします。

## 終わり
ご参考に慣れば幸いです。
[ServiceNow] メール送信の有効化

## 概要

PDI環境では、初期設定でメール送信が無効化されている。
本書ではメール送信の有効化設定の手順を記載する。

## 現在のメール送受信有効化状態の確認

[System Diagnostics]→[Email Diagnostics]から、現在メールの送受信が有効化されているのかを確認することができる。

下図は無効化されている状態。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/6be7530c-76f1-71de-0e48-104000aa2611.png)

## メール送信の有効化

現在のアプリケーションスコープが「Global」であることを確認する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/348cf67f-d945-84f7-0ac3-1718f68f3ee7.png)

[System Properties]→[Email Properties]を開く。
[Email sending enabled]にチェックを入れてSave。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/b7647079-4fe0-1ac4-e4bf-76703f08b27a.png)

もう一度[Email Diagnostics]を確認すると、メール送信が有効化されていることがわかる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/358025/c4dc0d55-7b52-5dd8-823e-a9ce451b7091.png)
業務モデリング

## 業務モデリング
<b>企業などにおける業務に一連の流れは<font color = blue>業務プロセス(ビジネスプロセス)</font>といわれている。
### BPR
<b>業務プロセスを再設計し、情報技術を十分に活用して、企業の体質や構造を抜本的に変革すること。
更に、これを継続していくことは<font color = blue>BPM</font>といわれている。
## DFD
<b>業務プロセス中のデータの流れをモデル化したもの

![DFD-mark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/986c1282-d056-35f6-4c52-35a74cb932b7.png)
## UML
<b>オブジェクト指向におけるシステム開発で利用され、分析から設計・実装・テストまでを統一した表記法でモデル化したもの。
### ユースケース図
<b>システムが外部に提供する機能と、その利用者や外部システムとの関係を表現した図。
外部に提供する機能は<font color = blue>ユースケース</font>と呼ばれ、システム境界の内部に記述。
利用者である「受注担当者」や外部システムである「在庫管理システム」は<font color = blue>アクター</font>といわれている。システム境界の外部に記述。
### オブジェクト図
<b>インスタンス間の関係を表現した図。
*インスタンスとは、クラスを基に生成されたオブジェクトのこと。
### クラス図
<b>クラス間の関係を表現した図
長方形で表現。上からクラス名・属性名・操作名を記述。後ろ二つは省略可能。
### アクティビティ図
<b>ある振る舞いから次の振る舞いへの制御の流れを表現した図。フローチャートのようなもの。
### シーケンス図
<b>オブジェクト間のメッセージの流れを時系列に表した図。
### コミュニケーション図
<b>メッセージの流れをオブジェクト間の接続関係に焦点を置く。
OCIへファイルのアップロード／ダウンロード

前回、SSHキーを使ってLinuxサーバのシェルへのログインを書きましたが、せっかくなのでファイルのやり取りについても書こうと思います。

# 使うアプリ
ここではWindowsからのアップロード/ダウンロードについて説明します。
WindowsからOCIのコンピュートとファイルのやり取りをする場合は[WinSCP](https://winscp.net/eng/docs/lang:jp)というアプリを使うと便利です。

:::note warn
ISO27001（ISMS）等を取得されている会社ではファイルのやり取りをするソフトを制限されている事が多いかと思います。
ファイルを送れるというのは情報漏洩につながるリスクがある為です。
ISMSの要件に情報資産を把握する事がありますが、SS1とかのインベントリーツールでインストールされているソフトを情報システム部門が把握していると思いますので、勝手に入れると怒られるリスクがあります。
必要な場合にはインストール許可をもらってからの方が安全です。
:::

以下、WinSCPがインストールされている前提で説明します。

WinSCPを起動するとログイン情報を入力するウィンドウが出ます。
![ws1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/c70e9a96-b7da-d32c-9d90-dd37019c9092.jpeg)
以下の情報を入力し設定ボタンを押下してください。
| 設定箇所 | 値 |
|:-----------|:------------|
| 転送プロトコル      | SFTP(デフォルト)        | 
|ホスト名|サーバのIPアドレス|
|ユーザー|opc|
|パスワード|SSHキーにパスフレーズを設定していなければ空白|

設定ボタンを押下すると新しいウィンドウが表示されます。
![ws2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/46bc3b4e-74f8-fe59-b06b-707805f490ec.jpeg)
左側のペインより、「認証」を選択し、秘密鍵を選択するために右側の「…」をクリックします。

秘密鍵を選択するファイル選択ダイアログが表示されますので、キーペアの秘密鍵のあるフォルダを選択します。
WinSCPではPuTTY形式の秘密鍵が必要なため、この段階では「.ppk」の拡張子にマッチするファイルが無く、ファイル一覧には何も表示されません。
![ws3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/7bfb9c82-e892-154d-2733-69caf0855b7e.jpeg)
そこで右下のファイル形式のフィルタを選択し、「すべてのファイル」を表示するようにします。
そうすると秘密鍵が表示されますのでファイルを選択し、「開く」ボタンを押下します。
![wsc.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/34e37447-d9da-0edd-a0f5-03f8db958181.jpeg)
下記のメッセージがでるので「OK」を押下するとファイル保存ダイアログがでます。
![ws4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/c50f760e-026b-a877-59c6-a4aa46a166ef.jpeg)
「保存」ボタンを押下して保存します。
![ws5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/e54b5b19-fae4-0939-f95d-e0f6b2c46c96.jpeg)
保存が成功すると以下のメッセージがでます。
![ws6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/cf70d028-59fb-12cf-276f-516f90096cc4.jpeg)
次回以降はこの変換した秘密鍵を使って接続できます。
「OK」ボタンを押下すると秘密鍵が選択された状態になりますので「OK」ボタンを押下します。
![ws7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/30b62495-8b50-35c0-d948-cbe0c1493d63.jpeg)
最初のログインウィンドウに戻りますので「ログイン」ボタンを押下するとサーバにログインしに行きます。
![ws8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/76dd2212-3480-b63d-a161-c5db89fddaab.jpeg)
そのサーバに初めて接続する際は下図のようなメッセージが出るので「はい」を押下します。
![ws9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/66808c05-697b-f5cb-9bfa-9c082768129d.jpeg)

:::note warn
サーバに繋がらない場合、ネットワーク設定に問題がある場合があります。
特に社内ネットワークからは22番ポートへのアウトバウンドをブロックしている場合があります。
OCI側の接続ルールも確認する必要があるかも知れません。
:::

接続が完了するとユーザーのホームディレクトリが表示されます。
![wsa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/22bdefcd-5924-d646-30e9-036ea4c031b7.jpeg)
2回目以降は前回、アプリケーション終了時にいたディレクトリが表示されます。
あとはエクスプローラのようにドラッグ＆ドロップでファイルをサーバにアップロードしたり、逆にサーバからダウンロードしたりできます。
![wab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2367692/aab44ce4-9c33-76c8-36b7-3f4f25bea207.jpeg)

以上、WindowsとOCIのファイルのやり取りでした。
見積のまとめ

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[まとめN～Z](https://qiita.com/Keiji_otsubo/items/92f92bb9f668ca9688be)


# 見積の所有者の変更

**Owner ID: Can't change quote owner. Enable quotes without parent opportunities.: Owner ID**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/1c63ca3c-cecc-4085-3cd5-c5f79f140c91.png)


変更できないんですよね。
[Can't change quote owner. Enable quotes without parent opportunities error](https://developer.salesforce.com/forums/?id=9060G0000005gRZQAY)

[見積もりの​​所有者を変更することはできません。親の機会なしで見積もりを有効にする](https://developer.salesforce.com/forums/?id=9060G0000005gRZQAY)

# それから非アクティブな所有者の見積もりが検索できない

[Can we do mass update on quote owner for quote object. I am trying to pull data using SOQL](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000HDTGvSAP)


# テンプレート

+ [見積テンプレートの表のフッターを変更することはできますか?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007BId5y)

:::note
Please check this article.

Print or Hide Totals in Line Item Sections
https://help.salesforce.com/s/articleView?id=sf.cpq_hide_totals.htm&type=5
:::

# 未解決 

+ ["Can't Save Record" error when cloning a quote](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000Fxqz9)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/ec024468-2b63-cff9-2cf2-5dd6dfdfb0f2.png)
私のShader開発環境

# UnityShader
まずはUnityのShaderを書くときの環境です。

## Visual Studio Code
UnityのC#をデフォルトで書くときはVisual Studioを基本使いますが、
Shaderを書くときはVisual Studio Codeを使います。以後VSCodeと略します。

VSCodeにいくつかの拡張機能を入れてShaderを書きやすいように環境を整えます。

### Japanese Language Pack for Visual Studio Code
[ダウンロードサイト](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
VSCodeのUIが英語になっていて使いにくいので日本語にします。

### Shader languages support for VS Code
[ダウンロードサイト](https://marketplace.visualstudio.com/items?itemName=slevesque.shader)
Shader言語(`HLSL`,`GLSL`,`Cg`)のシンタックスハイライトを可能にします。

### ShaderlabVSCode(Free)
[ダウンロードサイト](https://marketplace.visualstudio.com/items?itemName=amlovey.shaderlabvscodefree)
ShaderLabの内容を予測変換できるようにしたりします。
上の`Shader languages support for VS Code`では`ShaderLab`は守備範囲に含まれてないのでこれで補います。

### indent-rainbow
[ダウンロードサイト](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
インデントに色を付けます。見やすくなるので入れてます。

## 参考にするサイトなど
### Cg言語のマニュアル
[ダウンロードサイト](https://developer.nvidia.com/cg-toolkit-download)
`ShaderLab`は`Cg`を使って書くことが多いのでマニュアルを見ます。日本語版のPDFがあるので読みやすいです。

### HLSL言語のドキュメント
[サイト](https://docs.microsoft.com/ja-jp/windows/win32/direct3dhlsl/dx-graphics-hlsl-reference)
UnityのPostProcessingのカスタムエフェクトを作る場合は`HLSL`で記述する必要があります。なのでHLSLのリファレンスも読みます。こちらは日本語で見ることも可能ですが翻訳がイマイチなので英語で読むことをオススメします。

### Unityのドキュメント
[サイト](https://docs.unity3d.com/ja/2018.4/Manual/SL-Reference.html)
`ShaderLab`のわからないことはここを見て調べます。

### ビルトインシェーダーのソースコード
[ダウンロードサイト](https://unity3d.com/get-unity/download/archive)
ビルドインシェーダーを改良したいときにはここでソースコードを手に入れます。自分の触ってるUnityのバージョンのソースコードを探してDLします。

### URPなどのソースコード
[サイト](https://github.com/Unity-Technologies/Graphics)
ソースコードが公開されているのでわからなくなったときに調べます。

# Shader芸
Shaderを使って絵を描いたりするときの環境。

## KodeLife
[公式サイト](https://hexler.net/kodelife)
Shaderで絵を描くのなら最強だと思っています。GLSLを使います。ライブコーディングとかもこのソフトを使ってる画面を映せばそれっぽくできそうです。

* マイクから音を取得して反映
* MIDIコンの入力を反映(やったことないけどたぶんできるはず)
* シンタックスハイライト、予測変換

## ShaderToy
[サイト](https://www.shadertoy.com/)
ブラウザ上でコーディング、コードを共有できます。
他人のコードが見れるので勉強にも最適です。

## NEORT
[サイト](https://neort.io/latest)
こちらもブラウザ上でコーディング、コードを共有できます。`ShaderToy`は海外のサイトですがこちらは日本語のサイトです。シェーダーの作品だけでなく、ほかの言語の映像も投稿できるのでShaderを勉強するときにシェーダー言語なのかそうではないのかのチェックが必要です。

## 参考にするサイトなど

### Graphtoy
[サイト](https://graphtoy.com/)
ブラウザ上でグラフを作れます。作ったグラフを共有することもできます。
計算式の結果が頭で考えられない時に使います。

### Inigo Quilez
[サイト](https://iquilezles.org/)
シェーダーでやりたいことの手法がわからなかったらここで調べます。

### twigl.app
[サイト](https://twigl.app/)
つぶやきGLSLをするために使うサイトです。

### The Art of Code
[YouTube](https://www.youtube.com/c/TheArtofCodeIsCool)
シェーダーで使う技法をYouTubeで話しながら解説してくれてるチャンネルです。結構わかりやすいです。