OmniAICreator/Qiita-1.07M huggingface dataset:
日本の地震の波形データをゲットする手順（備忘録

# 0. はじめに
防災科学技術研究所が公開している地震の波形データ（加速度とか速度とか）をゲットして分析してみたい、と思ってやってみたら思いの外手間どった。
僕とビギナーのために手順を残しておきます。

# 1. データの入手
## 1-1. ユーザ登録
- 防災科学技術研究所のホームページへ行く
https://www.hinet.bosai.go.jp/?LANG=ja

- ユーザ登録する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/77719aa0-62f1-cd10-be6c-145388ddba0f.png)

- 2,3営業日で承認メールが届く（登録メールアドレス宛）
 
## 1-2. 波形選択、ダウンロード
- 連続波形データダウンロードへ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/b582f0ff-5935-b5f8-323d-c21556a1deaa.png)

切り出し観測点設定で、観測点を指定可能
データの種類やら期間やらを指定して検索
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/25862bdb-79cf-3567-0c35-85a5b5bcd402.png)

１分間が１データになってます。ダウンロード。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/5878ebcd-b4df-393e-b19e-219cc0693ef3.png)

# 2. データ変換
## 2-1. 変換ツールの入手
WIN32関連ツールのページへ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/3096de0e-e702-fc0f-5397-6e6747c18a27.png)

いろいろやろうと思うと上部のツールをダウンロードしてコンパイルが必要
この記事では下部のコマンドプロンプト版の使い方について記載する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/b5036c13-4c56-f3d1-87f5-035a1334f459.png)

dewin_32を使って変換をやっていきます（後述）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/be9acbdb-e5c7-f0d8-5076-028460ae0e25.png)


## 2-2. WIN32形式 to テキスト形式
ダウンロードした圧縮ファイルを展開
CHファイル（チャネル情報）、CNTファイル（情報の本体、WIN32形式）
データ本体はWIN32形式という独自形式になっているのでこれを普通にメモ帳とかで見れる形にします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/e001306a-ca7d-5846-a924-04a194383732.png)

チャネル選択
CHファイルを開いてどのデータを変換するか、チャネルを調べましょう
今回の例ではチャネル2903を変換してみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/f9a587db-cc73-9d5b-0c90-0d510ff7f45b.png)
（補足）チャンネルファイルの情報の読み方は下記参照
https://www.hinet.bosai.go.jp/faq/?LANG=ja#Q08

コマンドプロンプトを開く（サーチボックスでcmd）
dirやcdを駆使してdewin_32があるフォルダへ移動
下記コマンドを実行
dewin_32 -c [チャネル名] [入力ファイル] > [出力ファイル]
例；dewin_32 -c 2903 2022031100000101VM.cnt > Output.txt

成功すると整数が並んだテキストファイルがゲットできます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/8a7b100b-4273-4608-d9fd-74eb484decfc.png)

## 2-3. A/D値 to 物理量
最後にゲットした整数値を物理値（速度や加速度）へ変換します

変換に必要な数式は下記参照
https://www.hinet.bosai.go.jp/faq/?LANG=ja#Q08

チャネルファイルから必要な値を探してきて、
それを使ってゲットした整数値を変換しましょう

最終的に得られる物理量が何かはチャネルファイルをみたら分かります
今回の例ではm/sなので速度
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2395590/29d770b9-e6e5-3983-5b43-1b061b55b372.png)

# 3. 結び
今回は単純にテキストへの変換のみについて記載しましたが、これが分かっていれば他の機能はすんなりと使えるのではないかと思います。

終わってみればなんて単純な作業と思うのですが、ここまでたどり着くのに１日使ってしまいました。誰かの時間の節約になれば幸いです。

3.11から11年の節目に。
黙祷とともに。
サイバーボランティアって知ってる？？

# はじめに

初めまして、sky・secureでサイバーボランティア活動をしている高橋です！
sky・secureは神奈川を中心に活動している防犯ボランティア団体です。
最近個人TwitterにDMで活動内容を知りたい！というお話を頂くのでQiitaで少しお話をさせて頂きますね！

# サイバーボランティアとは？
サイバーボランティアは中学生～大学生の学生さんや社会人など幅広い年齢の人が活動としています。
みなさんが小学生や中学生の頃に信号で旗を持ちながら誘導してくれたり、夜に街頭の少ない暗い道をパトロールしてくれていた方がいませんでしたか？
そのような活動をしている方たちは「地域防犯ボランティア」の方たちです。
その「地域防犯ボランティア」をSNSなどのサイバー空間で行うのが「サイバーボランティア」です。

# サイバーボランティアの活動内容
#### SNSサイバーパトロール
主にTwitterでの活動を行っています。
サイバーパトロールの対象は「援助交際」「薬物売買」などです。
このような対象のツイートをどのように探すと見つけれらえるのか、どのようにして自分を守りながらサイバーサイバーパトロールを行うのか不安になる方もいるかもしれませんがサイバーパトロールを行うためのシステムを利用したり「インターネットホットラインセンター（IHC）」を利用してパトロールを行ったりしています。


#### サイバー授業の実施
サイバー授業は主に小学校・中学校・高校へ行きSNSの使い方やインターネットを利用するときに注意することなどを行います。
大学生が母校の高校へサイバー授業をしに行ったり、地元のショッピングモールでクイズ形式のサイバー授業を行ったりしています。
最近はコロナの影響もありほとんどがリモートでの活動になっています。

#### イベントへの参加
sky・secureは神奈川県警のサイバー犯罪対策課と協力をしてサイバーパトロールやサイバー授業の活動を行います。
神奈川県警が主催するイベントにも参加し、チラシを配布して注意喚起を行ったりサイバー授業を行ったりします。
神奈川には他にもサイバーボランティア活動をしている団体がいるので交流を行う大切な場でもあります。


# 最後に
sky・secureではTwitter・Facebookもやっています！
不定期ですがちょっとずつ投稿しているのでよかったら覗いてみてください！
何かイベントに参加した際はQiitaにその内容を投稿しようと思っていますので宜しくお願いします♪
機械学習オートメーションプラットフォームに不可欠な7つの自動化機能

MLプロジェクトに自動化を導入することで、データサイエンティストやデータエンジニアは、より多くのプロジェクトを本番環境にデプロイし、本番環境デプロイ後のプロジェクトのメンテナンスにかかる時間を短縮することができます。MLプロジェクトの自動化について語るとき、[AutoML](https://blog.dataiku.com/automl-and-the-rise-of-the-citizen-data-scientist)は最もよく取り上げられる機能ですが、AutoMLの典型的な範囲外のタスクも自動化することができ、データサイエンティストの反復作業を何人日も節約することができます。[本番稼働中](https://www.dataiku.com/stories/models/)のモデルの管理についても、懸念のレベルを削減することは言うまでもありません。機械学習の自動化プラットフォームやソリューションを探す際には、以下のような特徴を覚えておくとよいでしょう。

[→ さらに詳しく、MLOpsの7つの神話を見てみる](https://content.dataiku.com/7-myths-mlops-product)

## 機械学習（ML）の運用
**1. AutoML（機械学習の自動化）：** AutoMLは、[特徴量エンジニアリング](https://blog.dataiku.com/what-is-feature-engineering)と特徴量生成、モデル構築、モデルのトレーニングなど、主要な機能を自動化することで、時間を節約することができます。その結果、機能的なデータパイプラインとモデルトレーニングプロセス、およびモデルの精度の基準値を提供する実用的なモデルアーティファクトを得ることができます。

**2. 自動デプロイメント：** 本番環境での実験と、本番環境へのデプロイメントの間には、明確な区別が必要です。しかし、実験段階から本番に移行させるためには、プロジェクトをバンドルし、トリガーやスケジュールによって自動的に本番にデプロイさせる簡単な方法が必要です。

## 本番環境でのモニタリング
**3. データ整合性チェックの自動化：** 定期的にモデルを手動でチェックする、あるいは問題が継続的に発生した後にアラートを受け取るときにチェックを実施するのではなく、カスタマイズ可能なパラメータによる自動生成されるレポートを見て、本番でのデータの問題をより迅速に対応することができます。

**4. プログラム可能なシナリオベースのトリガーとモデル再トレーニングの自動化：** 数秒ごとに行っている作業や、データセット変更時などに行う作業、あるいは、独自のトリガー用にカスタマイズしたPythonスクリプトを自動化します。例えば、[データドリフトのある閾値が検出](https://blog.dataiku.com/what-is-feature-engineering)されたときにトリガーを作成し、モデルの自動再トレーニングを開始させることができます。新しいモデルの準備ができたら、以前のバージョンと比較し、本番環境にデプロイすることができ、また、これらのシナリオが実行された後、レポートが自動的に生成されるので、必要に応じて自動化の確認と検証を行うことができます。

## 自動化を可能にするその他の機能
**5. スクリプトのショートカット：** よく使われるスクリプトのリポジトリを作成し、あなた（および組織内の他のデータサイエンティスト）が数回のクリックで自動的にスクリプトを適用できるようにし、毎回再コーディングするよりも効率的に新しいデータを管理できるようにします。

**6. APIを使ったジョブ監視：** JenkinsやJFrogのようなCI/CDツールからプログラム的に、プラットフォーム外のジョブを任意な方法で監視できる機能が必要です。APIは、ジョブのリストとそのステータスを取得するメソッドを提供し、必要な場所で簡単に監視できるようにします。

**7. 再帰的なデータセットの反映：** 下流のデータに変更が加えられた場合、フロー上流へ手動で適用するのではなく、データセットを再帰的に構築し、フローの上流へ自動的にリビルドできるようにする必要があります。

Dataikuは、これらの機能をすべて備えており、ML構想の運用とスケーリングをより実現しやすくしています。データサイエンティストの作業を容易にするDataikuの他の機能については、[こちら](https://discover.dataiku.com/data-scientists/)の製品概要を参照してください。

<br>
<br>

<font color="LightSeaGreen">**コーダー向けのDataikuデモ**</font>
データサイエンティスト、エンジニア、アーキテクト、 その他、データの操作や変換、モデリングを行うためにビジュアルツールではなくコードで作業することを好む方々向けのDataikuのデモを[こちら](https://pages.dataiku.com/dataiku-demos-jp)に公開しています。

<br>
<br>
<br>

原文：[*7 Critical Automations for a Machine Learning Automation Platform*](https://blog.dataiku.com/7-automations-for-a-machine-learning-automation-platform)
テキストエディタVSCodeの設定をする

# 前提
- プログラミング初学者が、HTMLとCSSの学習をするにあたって行った環境構築の手順の覚書です。
- 使用しているpcはMacBook Air(2020)
- macOS Monterey(ver.12.2.1)です。
 
# 実際にすること
- テキストエディタ(VSCode)のインストール
- テキストエディタの拡張機能の導入
- テキストエディタを日本語化
- HTML/CSSの自動補完機能を追加

# そもそもテキストエディタとは？
- プログラミング学習を始めるにあたって、当たり前のようにテキストエディタをインストールするよう指示されますが、これはそもそも何なのか？本当に必要なのか？と言うところです。

- テキストエディタとは、文章を作成・編集するためのソフトウェアを指します。
開発を行なって行く際にこちらを使用してコードを記述して行くものです。
種類も様々で文書を作成するのに適したもの、メモをとるのに適したもの、今回インストールするVSCodeのようにコードを書くのに適したものなどがあります。
他にも少し調べてみただけで、Atom、Vim、Sublime、Text3、秀丸エディタ、サクラエディタなどたくさんの種類がありました。

# いざインストール
- テキストエディタについてなんとなく分かったようなわからないような…ですが、インストールしないことには何も始まらなさそうなのでとりあえずインストールしてみます。
- ダウンロードページを開いてダウンロードボタンをクリック。
https://code.visualstudio.com/
- インストールできたらDockに追加しておきましょう。

# 使用言語を設定する
- 標準の言語設定は当然のごとく英語ですので、日本語に設定しなおします。
- スクリーンショットは既に日本語化してあるものです、分かりづらくてすみません。
　　　　　　　　　↓以下手順↓
- 起動したウィンドウ画面左側の、アイコンメニュー内にある四角が四つ集まっているアイコンをクリック
![スクリーンショット 2022-03-11 10.01.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2587253/b56ab52b-135c-9f36-5c4e-ae4b136b7687.png)


- 左上の「Search Extensions in Marketplace」に「Japanese Language Pack for Visual Studio Code」と入力
![スクリーンショット 2022-03-11 10.02.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2587253/97bde081-a06c-9859-24d5-4bb5f8bc1e37.png)

- Japanese Language Pack for Visual Studio Codeを選択し、install（またはインストール）をクリックする(画像では既にインストール済みの為アンインストールになっています。)
![スクリーンショット 2022-03-11 10.02.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2587253/aab3208f-e070-b18c-05de-1210d4f1e5ac.png)

- 再起動したら、完了！

# HTML/CSSの自動補完機能を追加する
- 先ほど同様検索欄に「HTML Snippets」と入力
- インストール
![スクリーンショット 2022-03-11 10.17.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2587253/8ac372c6-a94f-6a44-9de3-848ef8d65d19.png)
- 画像のように「アンインストール」と表示されていれば完了！

# 終了
お疲れ様でした。
pcをアップデートしたら設定が全て吹き飛んで泣きそうになったので、今後のための備忘録として記録してみました。
instanceType の変更 

# instanceType の変更

備忘録

## STEP01: instanceType の確認

```
date; aws ec2 describe-instance-attribute --instance-id $(aws ec2 describe-tags --query 'Tags[?ResourceType == `instance` && Key == `Name` && Value == `DockerBuildMachine`].ResourceId' --output text) --attribute instanceType
```

## STEP02: InstanceState の確認

```
date; aws ec2 describe-instances --instance-id $(aws ec2 describe-tags --query 'Tags[?ResourceType == `instance` && Key == `Name` && Value == `DockerBuildMachine`].ResourceId' --output text) --query 'Reservations[].Instances[].{InstanceState:State.Name}'
```

## STEP03: instance 停止

```
date; aws ec2 stop-instances --instance-id $(aws ec2 describe-tags --query 'Tags[?ResourceType == `instance` && Key == `Name` && Value == `DockerBuildMachine`].ResourceId' --output text)
```

## STEP04: AMI作成

```
date; aws ec2 create-image --instance-id $(aws ec2 describe-tags --query 'Tags[?ResourceType == `instance` && Key == `Name` && Value == `DockerBuildMachine`].ResourceId' --output text) --name DockerBuildMachine-20220311
```

## STEP05: AMIにタグ埋め込み

```
date; aws ec2 create-tags --resources $(aws ec2 describe-images --owners self --filters "Name=name,Values=DockerBuildMachine-20220311" --query 'Images[*].{ID:ImageId}' --output text) --tags Key=Name,Value="DockerBuildMachine-20220311"
```

## STEP06: instanceType の変更

```
date; aws ec2 modify-instance-attribute --instance-id $(aws ec2 describe-tags --query 'Tags[?ResourceType == `instance` && Key == `Name` && Value == `DockerBuildMachine`].ResourceId' --output text) --attribute instanceType --value t2.micro
```

## STEP07: instanceType の確認

```
date; aws ec2 describe-instance-attribute --instance-id $(aws ec2 describe-tags --query 'Tags[?ResourceType == `instance` && Key == `Name` && Value == `DockerBuildMachine`].ResourceId' --output text) --attribute instanceType
```

## STEP08: instance 開始

```
date; aws ec2 start-instances --instance-id $(aws ec2 describe-tags --query 'Tags[?ResourceType == `instance` && Key == `Name` && Value == `DockerBuildMachine`].ResourceId' --output text)
```
Fargate タスクのエフェメラルストレージの最大サイズを変更する

# はじめに
本記事では、AWS CLI を使用して、Fargate タスクのエフェメラルストレージの最大サイズをデフォルトの20GBから変更する方法を記載しています。
（2022/03/11 時点では、管理コンソールによる変更はサポートされていない。）

[AWS Fargate 上の Amazon ECS でタスクのエフェメラルストレージのサイズが設定可能に](https://aws.amazon.com/jp/about-aws/whats-new/2021/04/amazon-ecs-aws-fargate-configure-size-ephemeral-storage-tasks/)
>AWS Copilot CLI、CloudFormation、AWS SDK、および AWS CLI を使用して、AWS Fargate が利用可能なすべてのリージョンで AWS Fargate プラットフォームバージョン 1.4.0 以降で実行される Amazon ECS タスクのエフェメラルストレージのサイズを設定できます。

# 変更手順

動作確認済みのAWS CLIのバージョン
```
$ aws --version
aws-cli/1.19.92 Python/3.7.4 Darwin/19.6.0 botocore/1.20.92
```

下記コマンドで、タスク定義をJSONファイル(task.json)に出力します。
```
$ aws ecs describe-task-definition --task-definition [タスク定義名] | jq '.taskDefinition' | jq -M 'del(.taskDefinitionArn) | del(.revision) | del(.status) | del(.requiresAttributes) | del(.compatibilities)' > task.json
```

出力したJSON(task.json)に、下記項目を追加します。
（registeredAt　と registeredBy の項目がある場合は、削除する。）
```
  "ephemeralStorage": {
    "sizeInGiB": 200
  }
```

例）
```json
{
  "containerDefinitions": [
    {
      "name": "XXXXXXXXXXXXXXXXXXXXXXX",
      "image": "1234567890.dkr.ecr.ap-northeast-1.amazonaws.com/XXXXXXXXXXXXXXX:latest",
      "cpu": 0,
      "portMappings": [],
      "essential": true,
      "environment": [],
      "mountPoints": [],
      "volumesFrom": [],
      "logConfiguration": {
        "logDriver": "awslogs",
        "options": {
          "awslogs-group": "XXXXXXXXXXXXXXXXXXXXXXXXX",
          "awslogs-region": "XXXXXXXXXXXXXXXX",
          "awslogs-stream-prefix": "XXXXXX"
        }
      }
    }
  ],
  "family": "XXXXXXXXXXXXXXXXXXXXX",
  "taskRoleArn": "arn:aws:iam::1234567890:role/XXXXXXXXXXXXXXXXX",
  "executionRoleArn": "arn:aws:iam::1234567890:role/XXXXXXXXXXXXXXX",
  "networkMode": "awsvpc",
  "volumes": [],
  "placementConstraints": [],
  "requiresCompatibilities": [
    "FARGATE"
  ],
  "cpu": "256",
  "memory": "512",
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
  "ephemeralStorage": {
    "sizeInGiB": 200
  }
}
```

下記コマンドで、編集したJSONを登録します。
```
$ aws ecs register-task-definition --family [タスク定義名] --cli-input-json file://task.json
```

画面上では、ECSの管理コンソールの新しいUIからだと確認できます。
![ecs_admin_console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283246/7aed09a3-1691-450b-7902-c29059709b69.png)

# 参考
[Unable to register task definition with ephemeralStorage parameter in ECS Fargate](https://stackoverflow.com/questions/68833000/unable-to-register-task-definition-with-ephemeralstorage-parameter-in-ecs-fargat)

[タスクでのデータボリュームの使用](https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/userguide/using_data_volumes.html)

[タスク定義パラメータ](https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/task_definition_parameters.html)
久々にfirebaseで開発に取り組んだら環境整備ではまった

## 概要
firebaseで作っていた個人プロジェクトを1年ぶりくらいに再開したところデプロイで多段に失敗したのでその備忘録です。

環境としてはWindows 10のWSL1上のUbuntuで開発しています。
以前の開発時にはfirebase cliのセットアップ等も終え、deployも問題なくできていたのですが、
久しぶりに開発をしようとしたら準備運動だけで2時間ほどかかってしまいました。

## エラー1
deployしようとすると、Authentication errorが発生しました。
まあ、1年ぶりだからexpireするよなぁ… と思ってfirebase login --reauthを実行すると…

```
$ firebase login --reauth
...
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=…(略

Waiting for authentication...

Error: An unexpected error has occurred.
```
おや？
ログを確認してみます。

```less firebase-debug.log
[info] Visit this URL on this device to log in:
[info] https://accounts.google.com/o/oauth2/auth?client_id=...
[info]
[info] Waiting for authentication...
[debug] [2022-03-10T10:57:20.037Z] Error: spawn cmd.exe ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:268:19)
    at onErrorNT (internal/child_process.js:470:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
[error]
[error] Error: An unexpected error has occurred.
```
cmd.exeが開けないと言っています。

wsl内なのにcmd.exe？
と思ってググったところ、認証のためにWindows側のブラウザを開く必要があり、cmd.exeを呼び出しているようです。
そして、cmd.exeが存在する/mnt/c/Windows/System32にパスが通っていないので呼び出せず、エラーになっていました。
(以前はパス通ってなかったっけ？気のせい？)

というわけで.bash_profileを編集してSystem32にパスを通してあげると再認証できました。

```.bash_profile
source ~/.bashrc
export PATH=$PATH:/mnt/c/Windows/System32
```

## エラー2
認証も通ったのでついでにnodeのバージョンが古いと言われていたのでバージョンを上げました。
メージャーバージョンは10から16に…
(ちなみに、このタイミングでnvmからnに乗り換えました。というか、nvmを使っていたことを忘れてnをインストールしました…)
すると今度はdeployでビルドエラーが…

```shell
$ firebase deploy --only functions
...
Build failed: Build error details not available.Please check the logs at
https://console.cloud.google.com/...
...
Error: Functions did not deploy properly.
```

詳細はCLoudBuildのlogを確認しろということなので確認してみると

```
ERROR: error fetching storage source: generic::unknown: retry budget exhausted (3 attempts):
fetching gcs source: unpacking source from gcs: source fetch container exited with non-zero status: 2
```
ググってみると似たような現象はいくつかありますが戻り値が2の現象は見当たらず
(どなたか戻り値 2の意味を教えてください)

nodeのバージョンがアレかなと思ったので、Cloud functionsの12にそろえてみることに

```shell
$ sudo n 12.22.10
   installed : v12.22.10 (with npm 6.14.16)
$ node -v
v12.22.10
$ firabase deploy --only functions
...
i  functions: updating Node.js 12 function sample_func(us-central1)...
✔  functions[sample_func(us-central1)]: Successful update operation.

✔  Deploy complete!

```

成功しました。
無意識にlatestにしてはいけませんということですね。

## まとめ

久しぶりに触れるといろいろと忘れていてだめですね。
Git初心者用備忘録

#概要
----------------
独学で学習しているgitの使い方の備忘録です。
誰かに見てもらうためではなく、ガチの備忘録ですので見づらい可能性は大いにありますがご容赦ください。

#git init
--------------------
gitの初期化を行い、gitを使用可能な状態にする
###例
```
git init
```

#git add ファイル名
---------
共有するファイルを選択する
###例
```
git add test.html
```

#git commit -m "コメット"
---------------------
コメットメッセージを追加する
###例
```
git commit -m "title color had changed"
```

#git remote add リモートリポジトリ名　リモートリポジトリURL
---------------
リモートリポジトリを作成する
リモートリポジトリ名はoriginにすることが多い
###例
```
git remote add origin https://...
```

#git push リモートリポジトリ名　master
------------------------------------
リモートリポジトリにファイルを追加する
この操作をプッシュと呼ぶ
###例
```
git push origin master
```

#git pull リモートリポジトリ名　master
----------------------------
リモートリポジトリからファイルを追加する
この操作をプルと呼ぶ
###例
```
git pull origin master
```

#git status
-----------------------------
どのファイルがaddされたのかを確認することができる
緑色で表示されているファイルは既にaddされている
赤色で表示されているファイルは加筆されたがまだaddされていない
###例
```
git status
```

#git log
--------------------
自分や他人のコメットを確認することができる
表示内容が多い時には上下キーで表示範囲の変更Qボタンで終了
###例
```
git log
```

#git log -p
------------------------
自分や他人の変更内容を表示する
表示内容が多い時には上下キーで表示範囲の変更Qボタンで終了
###例
```
git log -p
```
MacOSで使用できるWebカメラを調べる

# ビルトインのFaceTimeカメラだけではなく、接続されている他のカメラの選択肢を調べる方法です。

引用元：

https://stackoverflow.com/questions/62884019/how-can-i-determine-if-a-webcam-is-being-used-in-macos-using-swift

```swift
let discoverySession = AVCaptureDevice.DiscoverySession(deviceTypes: [.builtInWideAngleCamera, .externalUnknown], mediaType: .video, position: .unspecified)
let captureSession = AVCaptureSession()
        
for device in discoverySession.devices {
    print(device.localizedName)
            
    let videoInput = try! AVCaptureDeviceInput(device: device)
    let available: String = captureSession.canAddInput(videoInput) ? "true": "false"
            
    print("\tConnected: \(device.isConnected)")
    print("\tSuspended: \(device.isSuspended)")
    print("\tAvailable: \(available)")
    print("\tIs In Use: \(device.isInUseByAnotherApplication)")
    print()
}
```

>FaceTime HD Camera (Built-in)
	Connected: true
	Suspended: false
	Available: true
	Is In Use: false
>
>C922 Pro Stream Webcam #4
    Connected: true
    Suspended: false
    Available: true
    Is In Use: false

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[GitHub](https://github.com/john-rocky)
CircleCIでECSでタスクを実行する際の注意点

## 概要
今回は`CircleCI`を用いてECSのタスクを実行する際に少し手間取ったのでその原因と解決法を載せておきます。

## 前提
`Rails`を使用して`db:migrate`を実行するため、
`CircleCI`を用いてデプロイ時にECS(Fargate)上で`db:migrate`用のタスクを起動します。

## 手間取った要因
タスクを実行する際に最初にデプロイしたときのタスク定義が使用されてしまって、
ローカル上でデータベースに変更を加えた内容がデプロイ時に反映されないという現象が起こった。

## 原因
この解決法は簡単で、`CircleCI`の設定ファイルにタスク定義を更新するジョブを記載していなかったことが原因でした。
なので下記のように訂正しました。
(修正前)

```config.yml
workflows:
  version: 2
  build-test-deploy:
    jobs:

      # 省略(他の設定は省略しています)

      - aws-ecs/run-task:
          name: db-migrate
          cluster: ${CLUSTER_NAME}
          task-definition: locals-db-migrate
          security-group-ids: ${SECURITY_GROUP_ID}
          subnet-ids: ${SUBNET_ID_1A}, ${SUBNET_ID_1C}
          filters:
            branches:
              only:
                - main
```
(修正後)

```config.yml
workflows:
  version: 2
  build-test-deploy:
    jobs:

      # 省略(他の設定は省略しています)

      # 追加 #
      - aws-ecs/update-task-definition:
          name: update-db-migrate-task
          family: ${MIGRATE_FAMILY}
          container-image-name-updates: "container=${BACK_CONTAINER_NAME},tag=${CIRCLE_SHA1}"
          filters:
            branches:
              only:
                - main
       # 追加 #

      - aws-ecs/run-task:
          name: db-migrate
          cluster: ${CLUSTER_NAME}
          task-definition: ${MIGRATE_TASK}
          security-group-ids: ${SECURITY_GROUP_ID}
          subnet-ids: ${SUBNET_ID_1A}, ${SUBNET_ID_1C}
          requires:
            - update-db-migrate-task
          filters:
            branches:
              only:
                - main
```

## まとめ
ちょっと考えれば、タスクを更新しなきゃだめだよなって気づける初歩的なミスでした。
AWSの基礎的な知識をもう少し固めないといけないと感じました。
React: useCallback [アウトプット全くしてこなかったのでアウトプットする011]

useCallback理由を持って使ったことがなく、前職では「これ使っておけばパフォーマンス上がるんでしょ?使っとこ!」みたいなノリで使っていましたが、ちょっとまずいのでちゃんと理解します（念の為、第二引数の依存配列云々が変化されたときに云々は知って使っていました）。

> メモ化されたコールバックを返します。
インラインのコールバックとそれが依存している値の配列を渡してください。useCallback はそのコールバックをメモ化したものを返し、その関数は依存配列の要素のいずれかが変化した場合にのみ変化します。これは、不必要なレンダーを避けるために（例えば shouldComponentUpdate などを使って）参照の同一性を見るよう最適化されたコンポーネントにコールバックを渡す場合に便利です。
出典: https://ja.reactjs.org/docs/hooks-reference.html#usecallback

メモ化とは

https://qiita.com/ryokkkke/items/a5177b45c4a61c593d2b

> useCallbackを使用しない場合、renderが走るたびに関数が生成されるわけだが、そうなるとPureComponent（もしくはReact.memoなコンポーネント）に渡る関数の参照が毎回変わるため、意図としては再レンダリングしないはずの場所で再レンダリングが走ってしまう。

なるほど....

Reactが再レンダリングされるタイミングは以下です。
- stateが更新された時
- propsが更新された時
- 親コンポーネントが再レンダリングされた時

ここで`useCallback`を使用していないとレンダリングされるごとに関数が生成されます。

それを防ぐのがuseCallbackなのですね。。。。

https://tyotto-good.com/blog/usecallback

こちらの記事がかなりわかりやすいのでコードを紹介します。
このコードはuseStateで`outputLog`関数を依存配列に入れて、この値が変わったらouputLogが実行される
ボタンをクリックしたcountが更新される。つまり再レンダリングされる。

```tsx
import React, { useEffect, useState } from "react";

export default function App() {
  const [message, setMessage] = useState("");
  const [count, setCount] = useState(0);
  // レンダリングごとに別の関数になる
  const outputLog = (value: string) => {
    console.log(value);
  };
  // 別の関数になるので、レンダリングごとにログが出力されてしまう
  useEffect(() => {
    outputLog(message);
  }, [outputLog]);

  return (
    <>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={() => setCount(count + 1)}>click me</button>
    </>
  );
}

```


![codesandbox-react-callback.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660329/51eb7ca8-ef4c-4599-3634-7f2aa948369c.gif)

上の動画を見てもらうとわかるのですが、ボタンを押して`レンダリングを走らせるたび`にuseEffectで監視している`outputLogという関数が生成されて`、それを検知して処理が走っています。

これをどうにかしてくれるのがuseCallbackです。
outputLogをuseCallbackでメモ化して再度同じ行動をしてみます。

```tsx
import React, { useEffect, useState } from "react";

export default function App() {
  const [message, setMessage] = useState("");
  const [count, setCount] = useState(0);
  // 関数をメモ化
  const outputLog = useCallback(
    (value: string) => {
      console.log(value);
    },
    [message]
  );
  // 関数をメモ化しているので処理が走らない
  useEffect(() => {
    outputLog(message);
  }, [outputLog]);

  return (
    <>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={() => setCount(count + 1)}>click me</button>
    </>
  );
}

```

こうするとどうなるか

![codesandbox-react-callback2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660329/edff0059-97fb-63ea-9207-00feaefd1718.gif)

メッセージを変更しない限り、ボタンを押して`再レンダリングをしても関数が生成されず`、useEffect内の処理が走らないことが確認できました。

これからはちゃんと理解して使っていきます。


### 参考

https://ja.reactjs.org/docs/hooks-reference.html#usecallback

https://qiita.com/seira/items/8a170cc950241a8fdb23

https://tyotto-good.com/blog/usecallback

強くなりたい!!!!!!!!!!!!!
ddu.vim一発導入

# ddu.vim導入

[ddu.vim](https://github.com/Shougo/ddu.vim)を一発で導入するためのスニペットを書いた。
各種解説を読みたい場合は、[新世代の UI 作成プラグイン ddu.vim](https://zenn.dev/shougo/articles/ddu-vim-beta)を読めば良い。
自分なりに、[噛み砕いた記事](https://looxu.blogspot.com/2022/03/dduvim-introduction.html)も参考にしてもらえると嬉しい。

# スニペット

    "vim-plug
    call plug#begin()
    
    Plug 'Shougo/ddu.vim'
    Plug 'vim-denops/denops.vim'
    Plug 'Shougo/ddu-ui-ff'
    Plug 'Shougo/ddu-source-file'
    Plug 'Shougo/ddu-source-register'
    Plug 'kuuote/ddu-source-mr'
    Plug 'lambdalisue/mr.vim'
    Plug 'shun/ddu-source-buffer'
    Plug 'Shougo/ddu-filter-matcher_substring'
    Plug 'Shougo/ddu-commands.vim'
    
    call plug#end()
    
    "ddu settings.
    
    call ddu#custom#patch_global({
        \   'ui': 'ff',
        \   'sources': [{'name':'file','params':{}},{'name':'mr'},{'name':'register'},{'name':'buffer'}],
        \   'sourceOptions': {
        \     '_': {
        \       'matchers': ['matcher_substring'],
        \     },
        \   },
        \   'kindOptions': {
        \     'file': {
        \       'defaultAction': 'open',
        \     },
        \   },
        \ })
    
    "ddu-key-setting
    autocmd FileType ddu-ff call s:ddu_my_settings()
    function! s:ddu_my_settings() abort
      nnoremap <buffer><silent> <CR>
            \ <Cmd>call ddu#ui#ff#do_action('itemAction')<CR>
      nnoremap <buffer><silent> <Space>
            \ <Cmd>call ddu#ui#ff#do_action('toggleSelectItem')<CR>
      nnoremap <buffer><silent> i
            \ <Cmd>call ddu#ui#ff#do_action('openFilterWindow')<CR>
      nnoremap <buffer><silent> q
            \ <Cmd>call ddu#ui#ff#do_action('quit')<CR>
    endfunction
    
    autocmd FileType ddu-ff-filter call s:ddu_filter_my_settings()
    function! s:ddu_filter_my_settings() abort
      nnoremap <buffer> <CR>
      \ <Cmd>call ddu#ui#ff#do_action('itemAction')<CR>
      nnoremap <buffer><silent> q
      \ <Cmd>call ddu#ui#ff#do_action('quit')<CR>
      inoremap <buffer> <CR>
      \ <Cmd>call ddu#ui#ff#do_action('itemAction')<CR>
      inoremap <buffer> <C-j>
      \ <Cmd>call ddu#ui#ff#execute("call cursor(line('.')+1,0)")<CR>
      inoremap <buffer> <C-k>
      \ <Cmd>call ddu#ui#ff#execute("call cursor(line('.')-1,0)")<CR>
    endfunction
    
    "ddu keymapping.
    nnoremap <SID>[ug] <Nop>
    nmap ,u <SID>[ug]
    
    nnoremap <silent> <SID>[ug]m :<C-u>Ddu mr<CR>
    nnoremap <silent> <SID>[ug]b :<C-u>Ddu buffer<CR>
    nnoremap <silent> <SID>[ug]r :<C-u>Ddu register<CR>
    nnoremap <silent> <SID>[ug]n :<C-u>Ddu file -source-param-new -volatile<CR>
    nnoremap <silent> <SID>[ug]f :<C-u>Ddu file<CR>

# 使い方

normalモードで、

- ,umで履歴表示
- ,ubでバッファ表示
- ,urでレジスタ表示
- ,unで新規ファイル作成
- ,ufでファイル選択

となっている。
iキーを押すと、ファジーファインドモードになり、そこから対象を絞り込んで行くことが出来る。
Ctrl+j/Ctrl+kで対象を上下移動でき、Enterでデフォルトのアクションを実行する（ファイルを開く等）。
STM32L010を使い1から4096を文字列に変換 例intの1234を文字列の「1234」(Keil)

x Mbed2
x 軽量高速化

目的
シリアルのテスト
10進数変換のテスト


![o_con260.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6f5c86c7-b1f5-18ee-1a8c-c1d58c408765.jpeg)



ArduinoUNOを使い1から4096を文字列に変換 例intの1234を文字列の「1234」



https://qiita.com/caa45040/items/1837fd01959df902c8de










```c++



//B0_4096_1

#include "mbed.h"

RawSerial pc(PA_2, PA_3); //010

//10の割り算 0から1028までは、正しい。主に0から999
#define DVI10(n) ((n*205)>>11)

int main() {

    int x;
    int x_bk;
    char data[15];

    pc.printf("START\r\n");

    while(1){

        x=1234;

        data[4] = 0;

        if     ( x >= 4000 ) { x = x - 4000;   data[0] = '4';    }
        else if( x >= 3000 ) { x = x - 3000;   data[0] = '3';    }
        else if( x >= 2000 ) { x = x - 2000;   data[0] = '2';    }
        else if( x >= 1000 ) { x = x - 1000;   data[0] = '1';    }
        else                 {                 data[0] = '0';    }

        x_bk = x;

        x     =  DVI10(x);                       // 12 <- 123 / 10
        data[3] = '0' +  (  x_bk - (x*10)  );    // 3  <- 120 - 123
        x_bk  =  x;

        x     =  DVI10(x);                       // 1  <- 12 / 10
        data[2] = '0' +   ( x_bk - (x*10) );     // 2  <- 12 - 10

        data[1] = '0' + x;

        pc.printf(data);
        pc.printf("\r\n");
        wait_ms(1000);

    }//while

}//main




```
【PowerPointVBA】選択中shpの中身を同名shpに展開する


今作ってるxl→pp転記マクロの実行後に手直ししたいときに作ったやつ。

テキストボックスを選択中に実行すると、全スライドを巡回して同名のシェイプ名の中身にコピペしまくる。

転記のアンカーに使ってたシェイプ名をpp単体でもアンカーとして使いまわすだけなので楽。

``` vb
' ==========================================
' ここから　pp選択中shpの中身を同名shpに展開する
' ==========================================
Sub pp選択中shpの中身を同名shpに展開する()
  Dim myShp名 As String, myStr As String
  myShp名 = Get選択中Shp名
  myStr = Get選択中Shpのテキスト
  
  Dim sld As PowerPoint.Slide
  Dim shp As PowerPoint.Shape
  
  For Each sld In ActivePresentation.Slides
    For Each shp In sld.Shapes
      If shp.Name = myShp名 Then
        shp.TextFrame.TextRange.Text = myStr
        Exit For
      End If
    Next
  Next

End Sub

Function Get選択中Shp名() As String
  With ActiveWindow.Selection
    If .Type >= ppSelectionShapes Then
      Get選択中Shp名 = .ShapeRange.Name
    End If
  End With
End Function

Function Get選択中Shpのテキスト() As String
  With ActiveWindow.Selection
    If .Type >= ppSelectionShapes Then
      Get選択中Shpのテキスト = .ShapeRange.TextFrame.TextRange.Text
    End If
  End With
End Function

' ==========================================
' ここまで　pp選択中shpの中身を同名shpに展開する
' ==========================================

```
React App で環境変数を追加する方法

# 環境変数を設定する方法
環境変数をセットすると、プロジェクトの JSファイル内でローカル宣言されている変数のように扱うことができます。``React App`` では、デフォルトで ``NODE_ENV`` と ``REACT_APP_`` で始めるその他の環境変数が定義されています。

環境変数を使用する目的としては、アプリのソースコードにシークレット ( API キーや接続文字列等 ) を保存しないようにするためです。

開発用の環境変数を追加するためには、プロジェクトルートに ``.env`` ファイルを作成します。
環境変数を新規追加する場合は、``REACT_APP_`` から始まる変数名にする必要があります。

```.env
REACT_APP_NOT_SECRET_CODE=abcdef
```

※ ``.env`` ファイルを追加時に、``.gitignore`` で ``.env`` ファイルを除外する必要があります。

ソースコードから環境変数を利用するためには、以下のように記述します。

```sample.tsx
return (
  <form>
    <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
  </form>
)
```

※ なお、環境変数を反映するためには、アプリケーションを再起動する必要があります。

# 参考サイト

- [Adding Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables/)
【Psych::SyntaxError】vagrant upしたらエラーが出た時の解決方法【Windows10 Vagrant Homestead】

### vagrant upしたらエラーが出た

```gitbash:gitbash
vagrant up
```
## 前提
・Windows10
・Vagrant 2.2.19

## vagrant upするとエラー
```gitbash:gitbash
vagrant up

C:/HashiCorp/Vagrant/embedded/mingw64/lib/ruby/2.7.0/psych.rb:456:in `parse': (<unknown>): did not find expected key while parsing a block mapping at line 13 column 5 (Psych::SyntaxError)
        from C:/HashiCorp/Vagrant/embedded/mingw64/lib/ruby/2.7.0/psych.rb:456:in `parse_stream'
        from C:/HashiCorp/Vagrant/embedded/mingw64/lib/ruby/2.7.0/psych.rb:390:in `parse'
        from C:/HashiCorp/Vagrant/embedded/mingw64/lib/ruby/2.7.0/psych.rb:277:in `load'
        from C:/TheCode/homesteadTest/Homestead/Vagrantfile:29:in `block in <top (required)>'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/config/v2/loader.rb:37:in `load'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/config/loader.rb:126:in `block (2 levels) in load'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/config/loader.rb:119:in `each'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/config/loader.rb:119:in `block in load'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/config/loader.rb:116:in `each'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/config/loader.rb:116:in `load'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/vagrantfile.rb:29:in `initialize'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/environment.rb:793:in `new'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/environment.rb:793:in `vagrantfile'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/environment.rb:974:in `process_configured_plugins'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/lib/vagrant/environment.rb:178:in `initialize'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/bin/vagrant:194:in `new'
        from C:/HashiCorp/Vagrant/embedded/gems/2.2.19/gems/vagrant-2.2.19/bin/vagrant:194:in `<main>'

```
# 解決方法
### なんか色々とエラーが出ているが、原因は他のところにある。
### Homestead.yamlを編集した時にうっかり、インデントがズレてしまったのが原因。
↓ foldersの方のmap:にスペース2つ分のインデントズレがあるので、sites:と揃える。
```Homestead.yaml
folders:
  - map: C:\Hoge\Homestead\Laravel
      to: /home/vagrant/code

sites:
    - map: homestead.test
      to: /home/vagrant/code/Laravel/public
```

## vagrant upしてみる

```gitbash:gitbash
vagrant up

Bringing machine 'homestead' up with 'virtualbox' provider...以下略
```

私の環境ではうまくいきました。
URL管理ツール作成とその記録 Part3

# フロントエンド
今日やったこと
Aboutの作成
リンクの下線、訪問済マークの削除
フッターの固定

# バック
# URLモデルの作成
GORM
> 規約
GORMの方針は「設定より規約」です。デフォルトでは、GORMは主キーとしてのID、テーブル名を表すための複数形かつスネークケースな構造体名、 スネークケースなカラム名、作成と更新の時間をトラッキングするためのCreatedAt、UpdatedAtフィールドを利用します。
GORMで採用されている規約に従うと、設定やコードを記述する手間が大幅に減少します。

> フィールドに指定可能なタグ
タグはモデル宣言時に任意で使用できます。GORMは以下のタグをサポートしています。（タグは大文字小文字を区別しませんが、 camelCase が推奨されます）

URLのレポジトリ、モデル、コントローラの作成完了。

####今後やりたいこと
コントローラをリクエストの受け取りとレスポンスを返すだけにしたい。
gin.Contextのラッパー(OOORequest)を作りたい。
Serializerの作成
ResponseBuilderを作りたい。
RequestParserの作成。
UseCase(Service)の作成


# テスト作成　勉強記録
goのプロジェクトの作成手順
mkdir Project
cd Project
go mod init github.com/Organization/Project
touch main.go

もしmain.goと同じディレクトリにソースを置いている場合には
go run *.go
で動く

サブモジュールにパッケージが対応している必要がある。

centos にインストール
wget https://golang.org/dl/go1.17.2.linux-amd64.tar.gz
tar -C /usr/local -xzf go1.17.2.linux-amd64.tar.gz
Golang-文字数を数える方法,4バイト以上の絵文字もある

## 背景

こちらの記事 [UTF-8 のテーブル(MySQL5.6)に竈門禰󠄀豆子が格納できない問題を調べてみた](https://qiita.com/ykami/items/d45ec72f8a5ea8b3288d)がきっかけで、
`Golang`における絵文字の文字数を確認する方法を調査して見ました。

ちなみに、`Golang` のソースコードや文字列リテラルは `UTF-8` が採用されています。
`UTF-8` は、英数字は 8bit で表現して、それ以外は 16,24,32bit で可変的に表現しています。
例えば、ひらがなカタカナ漢字の様な日本語は 2 byte のものが多いのですが、上記の記事にでもあった一部の異体字([wikipedia](https://ja.wikipedia.org/wiki/異体字セレクタ))は 4 byte だったりします。

あと、😺 とかの絵文字も 4byte のものが多いのですが、
🧑‍🤝‍🧑 や 👨‍👩‍👧‍👦 といった絵文字は複数の絵文字を組み合わせた絵文字で、 4byte 以上になったりします。

## 確認用コード

Go version: go1.17.8

```golang
package main

import (
	"fmt"
	"runtime"
	"unicode/utf8"

	"github.com/rivo/uniseg"
)

func main() {
	fmt.Printf("Go version: %s\n", runtime.Version())
	emoji := "😺"

	// 文字数
	println(1 == utf8.RuneCountInString(emoji))

	// バイト数
	println(4 == len(emoji))

	// バイト数(😺 ) = 4bytes
	println(4 == utf8.RuneLen('😺')) // RuneLen は，文字のエンコードに必要なバイト数を返します。
	println(1 == utf8.RuneLen('a'))

	emoji2 := "🧑‍🤝‍🧑"
	println(5 == utf8.RuneCountInString(emoji2)) // 文字数(🧑‍🤝‍🧑 ) = 5 . (4bytesを超えた文字はutf8.RuneLen関数を使用できない)
	println(18 == len(emoji2))                   // バイト数(🧑‍🤝‍🧑 ) = 18bytes

	// uniseg という Go 言語用パッケージがあって，これを使うと UTF-8 文字列を「文字」単位に切り出してくれる。
	gr := uniseg.NewGraphemes(emoji2)
	for gr.Next() {
		rs := gr.Runes()
		fmt.Printf("%v : %U\n", string(rs), rs)
	}
	// Output: 🧑‍🤝‍🧑 : [U+1F9D1 U+200D U+1F91D U+200D U+1F9D1]

	// おまけ：string以外に []byte と []rune の文字数とバイト数も求め方も
	buf := []byte("😺")
	runes := []rune("😺")

	println(1 == utf8.RuneCount(buf))
	println(1 == len(runes))

	println(4 == len(buf))
	println(4 == len(string(runes)))
}
```

[Golang Playground Demo](https://go.dev/play/p/CT_Yp4QXg7W)

## 元記事
[Golang-文字数を数える方法,4バイト以上の絵文字もある](https://aifan.jp/2022/03/10/golang-文字数を数える方法-4バイト以上の絵文字もある/)
Azure Function App に環境変数を設定する方法

# Function App に環境変数をセットする方法
Azure Functions から Azure Cosmos DB へ接続する際、**接続文字列** を使用します。
Azure Functions Core Tools を用いて、ローカル環境で関数を実行する場合は　``local.settings.json`` を用いて、環境変数をセットすることができます。

```local.settings.json
{
  "Values": {
    "CosmosDbConnectionString": <--- Azure Cosmos DB 接続文字列 --->
  }
}
```

Azure Cosmos DB コネクターは、以下コードで環境変数にセットされた ``CosmosDbConnectionString`` を参照します。

```Azure-Cosmos-DB-Connector.ts
import { connect, model } from "mongoose";

let db = null;

export const init = async () => {
  if(!db) {
    db = await connect(process.env["CosmosDbConnectionString"]);
  }
}
```

この関数を Function App へデプロイした場合、Function App に環境変数 ``CosmosDbConnectionString`` を別途設定する必要があります。

# Function App に環境変数をセットする方法 ( Azure Portal 編 )

- 環境変数をセットしたい、Function App リソースページを開きます。
- **サイドメニュー > 設定 > 構成** ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/744d2bcd-3727-c5a5-d3ce-c7dc82a82796.png" width="400">

- **アプリケーション設定 > [+ 新しいアプリケーション設定]** を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/69f5ba91-2b4b-36dd-cc70-f4882309048a.png" width="800">

- 名前 (環境変数名)、値を入力し、OK ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/0678cc5c-94b4-fb31-b504-795d1e809ceb.png" width="800">

- 新しい環境変数をセットすることができました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/c4ccd022-5d02-79ab-6bb0-1ea4278b39cd.png" width="800">


# Function App に環境変数をセットする方法 ( VSCode 編)

- VSCode サイドメニューから **Azure** タブを選択します。
- **FUNCTIONS > 対象のサブスクリプション > 対象の Function App** を展開します。
- Function App 配下の **Application Settings** にマウスカーソルを合わせ、右クリックします。
- **Add New Settings** ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/336ca12c-7f9b-280c-0db9-662dd9dc83b9.png" width="400">

- 新しく作成する環境変数名を入力して、Enter を押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/17195561-319b-c461-bb87-70fe82e70e33.png" width="600">

- 接続文字列を入力して、Enter を押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/3f42d802-e3cc-f565-402b-45fc7d7661a3.png" width="600">

- Application Settings に新しい環境変数を追加することができました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/5cbddad7-5ede-9703-97c7-d88012a2041f.png" width="400">



※ VSCode 経由で関数をデプロイするためには、VSCode 拡張 : Azure Functions が必要になります。


# 終わりに
という訳で、Function App に環境変数を設置する方法を紹介させていただきました。
初めて Azure Functions を触られる方のお役に立てれば幸いです。
最後までお読みいただき、ありがとうございました。
【PHP/継承】クラス内のpublic変数宣言はコンストラクタより先に行われているのだった

PHPのライブラリの継承ラッパーを作っていて認識違いでハマったのでメモ。

# 状況
例えばこんなライブラリがあり。
基本的にはライブラリ内のコードには手を出したくないので、ここには調整は入れませんが、
デフォルトで $hensuu　という変数が存在（ここでは宣言のみ）しています。


```php:Library.php
 class Library_sample {

  var $hensuu;

  public function test(){
   //なんやかんや
  }

}
```

で、それを継承するラッパークラスを作りました。

```php:Hoge.php

class Hoge extends Library_sample{
	public $hensuu = true;
    public $hensuu2 = true;

	public function __construct()
	{
		parent::__construct();

	}

```


このラッパークラス「Hoge」で変数、$hensuuにtrueをセットしています。
ついでに$hensuu2も作り、こちらにもtrueをセットしています。

で、このラッパークラスのインスタンスを作り、そのインスタンスからhensuuを表示しようとすると、、、なぜかfalseとなっておりました。
でも、同じ場所でtrueを入れているhensuu2の方はtrueが出力されています。。

```php:index.php

$hoge = new Hoge;
echo $hoge->hensuu;  // false
echo $hoge->hensuu2; // true

```

※各ファイルのincludeなどは省略しております。


## これは一体。。？！
あれ？コンストラクタってインスタンス作る時に最初に実行されるから、ほんで継承してるから
「Hoge.php」のparent::__construct(); のところでまずは変数宣言→
その後に
hensuu = true;
hensuu2 = true;が行われたのでは。。。？としばらくはてながっていました。



## 結論：単純に順序逆だった
「Hoge.php」の中のpublic変数として先に宣言された後に、コンストラクタが実行されてたみたいです。
hennsuu1はtrueになり、コンストラクタの中で親クラスで改めて宣言されたことでただの変数=falseになった。
hennsuu2はtrueになり、コンストラクタの中で親クラスで、、、は特に宣言されていないのでそのまま変数=trueだった。
ということです。

ここ、勘違いしていました。

## では
どうすべきかというと、子供のHoge.php側の「コンストラクタの中でtrueにするべき」でした。
という学びでした。
この辺の順序、思い込みをしていたのでどこでこの挙動になっているんだ？と少しコードを細かくおったりしてました。。w
seleniumとwebdriver_managerを使ったChromeの自動操作の方法まとめ

# この記事が役立つかもしれない状況
- スクレイピングのためにwebブラウザを自動で開きたい
- webページのクリック、テキスト入力、フォーム送信を自動化したい
# 使用するライブラリ
selenium (ver 4.1.2)
webdriver_manager　(の、ChromeDriverManagerモジュール)
# 作業環境
MacBook Air (m１チップ)
os: Monterey ver.12.2.1
python 3.9.7
# 構文
#### インポート
- seleniumの中のwebdriverモジュールとwebdriver_managerの中のChromeDriverManagerをインポートする
- seleniumのver4以降ではserviceを使うように推奨される。（下のコードの２行目）
- webdriverはブラウザを操作する機能があり、webdriver_managerは操作するブラウザのバージョンに適したwebdriverをその都度ダウンロードする機能がある。
- webdrivr_managerにはChrome以外のブラウザを操作する用のモジュールもある
```python
from selenium import webdriver
from selenium.webdriver.chrome import service
from webdriver_manager.chrome import ChromeDriverManager
```
#### ブラウザ立ち上げ
- executable_pathとserviceはそれぞれキーワード引数なので（用語の使い方あってますか？）別の文字列にすることはできない
- ChromeDriverManager().install()はインストールしてきたwebdriverのパスを返す。これをexecutable_pathに格納してserviceモジュールに渡し、返り値をchrome_serviceに代入してwebdriver.Chromeに渡す
```python
chrome_service = service.Service(executable_path=ChromeDriverManager().install())
browser=webdriver.Chrome(service=chrome_service)
```
- 以下の例ではこのbrowserに対してさまざまな操作を行う

#### ページ読み込み
- 下の例ではqiitaのトップページに飛ぶ
```python
browser.get("https://qiita.com/")
```

#### ページ内の要素(ボタンなど)をXpathで取得する
- あらかじめseleniumのByモジュールをインポートしておく
```python
from selenium.webdriver.common.by import By
```
- 下の例ではelementにページ内の要素を代入している
```python
element = browser.find_element(By.XPATH,"要素のフルXPATHをコピーしてきてここに貼り付ける")
```
#### クリック
- ボタンなどの要素をelementに代入しておいてクリックする
```python
element.click()
```
:::note warn
実行時のコマンドがpythonなのかpython3なのかは、seleniumをどちらにインストールしているかによって変わることに注意。
※自分はここで3日間くらい詰まったので
:::


# その他知っておくと便利な関数
#### 文字列の入力
- 下の例ではelementに代入した検索ボックスに、”hogehoge”と入力している
```python
element = browser.find_element(By.XPATH,"検索ボックスのフルXPATHをコピーしてきてここに貼り付ける")
element.send_keys("hogehoge")
```
#### 一時停止
自分の環境ではseleniumでブラウザ操作を行うと操作終了した瞬間に自動でブラウザが落ちてしまうので、動きが目で見てわかりにくいという問題がありました。そこで、終了する前に5秒間のポーズを設けることで操作が完了する様子を視覚的に確認していました。
```python
from time import sleep
```
```python
sleep(5)
```

# 参考
udemyのこちらのコースを参考にしています。実践例も交えて詳しく解説されていてわかりやすいのでおすすめです
https://www.udemy.com/course/python-kaizen/

↓ @yagaodekawasuさんによるこちらの記事を参考にさせていただきました

https://qiita.com/yagaodekawasu/items/5813a8cb4c3d73386e7a
CircleCIのconfig.ymlの設定ファイルが有効化確認するコマンド

## 概要
`CircleCI`を稼働させたときにconfig.ymlの設定ファイルに何か間違いがあるとエラーが起こる。
稼働する前にファイル自体が正しいかどうか確認するコマンドを調べたのでメモとして残しておきます。

## コマンド
下記コマンドを実行するだけです。

```
circleci config validate
```
ファイルが有効なら下記のメッセージが出力されます。

```
Config file at .circleci/config.yml is valid.
```

## まとめ
稼働させる前にファイルの間違いを確認できるこで`CircleCI`のリソースを無駄にしなくて済みます。
pythonでlineに通知をする

プログラムでlineに通知するプログラムをこのサイトを参考に作りました。
https://se.yuttar-ixm.com/line-notify/#:~:text=python%E3%81%8B%E3%82%89LINE%E9%80%9A%E7%9F%A5%E3%82%92%E8%A1%8C%E3%81%86%E3%81%AB%E3%81%AF%E3%80%81LINE%E3%81%8C%E6%8F%90%E4%BE%9B%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%20LINE%20Notify%20%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%20%E6%A9%9F%E8%83%BD%E3%81%AF%20%E6%8C%87%E5%AE%9A%E3%81%AE%E3%83%88%E3%83%BC%E3%82%AF%E3%83%AB%E3%83%BC%E3%83%A0%E3%81%ABLINE%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E6%B5%81%E3%81%99%E3%81%A0%E3%81%91%20%E3%81%AE%E3%82%82%E3%81%AE%E3%81%A7%E3%80%81%20%E9%9D%9E%E5%B8%B8%E3%81%AB%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%8B%E3%81%A4%E7%B0%A1%E5%8D%98%E3%81%AB%E5%88%A9%E7%94%A8%E3%81%8C%E5%8F%AF%E8%83%BD,Notify%E3%81%AFGitHub%2CIFTTT%2CMackerel%E3%81%AA%E3%81%A9%E3%81%AEWeb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%8B%E3%82%89%E3%81%AE%E9%80%9A%E7%9F%A5%E3%82%92%E3%80%81LINE%E3%81%A7%E5%8F%97%E4%BF%A1%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E5%87%BA%E6%9D%A5%E3%82%8B%E4%BE%BF%E5%88%A9%E3%81%AA%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A7%E3%81%99%E3%80%82%20%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%8B%E3%82%89LINE%E3%81%AB%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E6%8A%95%E3%81%92%E3%82%8C%E3%82%8B%E3%82%93%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F%20%E3%81%9D%E3%81%86%E3%81%A0%E3%82%88%E3%80%82%20%E3%81%97%E3%81%8B%E3%82%82%20%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%81%ABHTTPS%E3%81%A7%E9%80%9A%E4%BF%A1%E3%81%A7%E3%81%8D%E3%82%8B%E7%92%B0%E5%A2%83%E3%81%A7%E3%81%82%E3%82%8C%E3%81%B0%E4%BD%BF%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%20%E3%81%8B%E3%82%89F%2FW%E3%81%AB%E7%A9%B4%E9%96%8B%E3%81%91%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AA%E3%81%8F%E7%B0%A1%E5%8D%98%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%93%E3%81%A0%E3%80%82%20%E7%B4%A0%E6%97%A9%E3%81%8F%E8%A4%87%E6%95%B0%E4%BA%BA%E3%81%AB%E9%80%9A%E7%9F%A5%E3%82%92%E9%80%81%E3%82%8C%E3%80%81%E5%A4%96%E5%87%BA%E5%85%88%E3%81%A7%E3%82%82%E7%B0%A1%E5%8D%98%E3%81%AB%E9%80%9A%E7%9F%A5%E3%82%92%E5%8F%97%E3%81%91%E5%8F%96%E3%82%8C%E3%82%8B%20%E3%81%A8%E3%81%84%E3%81%86%E3%81%AE%E3%81%AF%E9%9D%9E%E5%B8%B8%E3%81%AB%E4%BE%BF%E5%88%A9%E3%81%A0%E3%82%88%E3%80%82

スクレイピング->抜き出した記事をlineで通知->pythonwhereかEC2を使用しサーバーで実行する.

selenium,gmailの送信、chromedriverのパス通しが出来なかった
AngularでFont Awesomeを利用する

Angularで使うためのライブラリが公式で公開されている。
ドキュメント: [Angular | Font Awesone](https://fontawesome.com/v5/docs/web/use-with/angular)
GitHub: [angular-fontawesome](https://github.com/FortAwesome/angular-fontawesome)

## インストール方法
`ng add`コマンドでインストールが出来る。(npmでの方法はGitHub参照)   
2022/03/10時点の最新版である0.10.1をインストールする。  
インストール時にどの種類のフォントをインストールかを選択する。ここではFreeのSolid, Regular, Brandsの3つを選択する。
```bash
ng add @fortawesome/angular-fontawesome@0.10.1

The package @fortawesome/angular-fontawesome@0.10.1 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Choose Font Awesome icon packages you would like to use: (Press <space> to select, <a> t
o toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Free Solid Icons
❯◉ Free Regular Icons
 ◉ Free Brands Icons
 ◯ Pro Solid Icons    [ Requires: https://fontawesome.com/pro ]
 ◯ Pro Regular Icons  [ Requires: https://fontawesome.com/pro ]
 ◯ Pro Light Icons    [ Requires: https://fontawesome.com/pro ]

? Choose Font Awesome icon packages you would like to use: Free Solid Icons, Free Regular 
Icons, Free Brands Icons
UPDATE package.json (1516 bytes)
UPDATE src/app/app.module.ts (557 bytes)
✔ Packages installed successfully.
```

この時点で、app.module.tsにFontAwesomeModuleが自動的に追加される。
package.jsonには以下が追加される。Font Awesomeは5.15.4がインストールされた。
```json
    "@fortawesome/angular-fontawesome": "^0.10.1",
    "@fortawesome/fontawesome-svg-core": "~1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
```

## 使用方法

component側であらかじめ表示するアイコンを定義する必要があり、ちょっと面倒です。
すべて、表示はSVG形式で行われます。

### Regularの表示
coffeeを表示します。

tsファイル
```bash
import { faCoffee } from '@fortawesome/free-regular-svg-icons';

icon = faCoffee;
```
 
Htmlファイル
```bash
<fa-icon [icon]="icon"></fa-icon>
```

表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48495/7890dc83-5d5d-46cf-acff-2d002212ebf8.png)

### Solidの表示

使い方は、regularと同じです。
importが'@fortawesome/free-solid-svg-icons'になります。

### Brandの表示

FacebookやTwitterのアイコンなどブランドのアイコンが表示出来ます。
使い方は同じで、importが'@fortawesome/free-brands-svg-icons'になります。


## 所感

Angularでも対応しているのは素直に嬉しい。
ただ、htmlだけで済まないのがちょっと残念です。
あと、Free版では、使えるアイコンの種類が限られていて、サイトでアイコンを探しても使えないことが多いのが残念です。
javascript与jQuery

# javascript関数の出し方
```javascript:方法の1つ
var x = function(){
    console.log("私は関数です");
}
x();
```
```javascript:方法の2つ
function show(){
   console.log("私は関数です");
}
show();
```
# jQuery関数の出し方
$（）をjQueryのnewオブジェクト（newのjQueryオブジェクト）として理解する
$（）はjsオブジェクトをjQueryオブジェクトに変換することもできます
### idに基づいて指定されたタグオブジェクト（jQueryオブジェクト）を検索します
```js:javascript
document.getElementById(div);
```
```js:jQuery
$("#div")
```
# ネットワーク監視：コールバック関数（callback）
ページ内のすべてのタグが実行されたら、戻ってこの関数内のコードを実行します
通常の状況では、jsコードはhtmlコードの後に​​記述する必要があります
```js:javascript
window.onload = function(){
}
```
```js:jQuery
$(function(){
}
//es4e以降の書き方
$(() => {
}
```
プルリクレゴを始めてみた

私の所属する部署では各自機能を実装したらプルリクエスト（プルリク）を出してソースコードレビューをしています。その中でいくつか問題点を感じたので、「プルリクレゴ」を始めてみました。ひと月ほど経って一つの作品が完成したので、少しまとめておきます。

## みんなで作り上げた「アウディ スポーツ・クワトロS1」
先ずはみんなで作り上げた作品をご覧ください。
![3547BDC3-A216-44EA-8CCB-7C11431B3661.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107938/229e4683-1669-b21d-74cd-e0dd93c0d9ee.jpeg)


## 最近感じている問題点
- プルリクがなかなか終わらない
- プルリクがブランチマージのための儀式になりかけている
- 部署内の別チーム間の繋がりが薄れてきている
- 若干仕事場が重く感じる（真面目側にに振れている）

## プルリクレゴとは
- 書籍「SCRUM BOOT CAMP THE BOOK」のコラムに出てきた「リリースレゴ」を参考にした
- プルリクを完了するたびに1手順ずつレゴを組み立てていく
- 部署内のチームに関係なく、ひとつのレゴを作り上げる
- 今回購入したのは実売価格2000円くらいの車のレゴ
    - 手順は60ほど
    - 1日2,3個のプルリクが完了されて1ヶ月以内に完成すると予想

## 期待する効果
ちょっと希望が強すぎる気がしますが、以下のような効果を期待しています。

- チームビルディング
    - レゴをきっかけにした会話の増加
    - 開発しているソフトウェアは違えど、One team であることのの再確認
- ソースコードレビューのスピードアップ
    - 組み立てに多く参加するため細かく沢山のプルリクを出すようになる
        - オブジェクト指向や DDD を学んで、設計品質の向上も副産物として期待
    - 早く完成を見たいのでプルリクのチェックをすぐするようになる
- 仕事場の雰囲気改善
    - 楽しく開発できる環境
    - レゴが飾ってあるくだけたオフィス

## 感想
- 今のところ楽しく実施できている
- 手順によって楽しい・つまらないがある
- 他の部署の視線が気になる
- プルリクを出さないマネージャーをどう参加させるかが課題

子供の頃レゴが好きだったこともあってか、私はとても楽しんでいます。日々締切に追われて殺伐としていくのはナンセンスだと思っているので、ちょっとした息抜きにでもなれば良いと思います。

レゴに限らず、プロダクトと同時にチームで何かを作っていくの、アリだと思います。