OmniAICreator/Qiita-1.07M huggingface dataset:
Google UXデザイン：Googleフォトのワイヤーフレーム

# はじめに

わたしが[Google UX Design Crtificateで得られた素晴らしい体験][google]を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

[google]: https://qiita.com/mapami/items/7a0d0a3d4661c50f8bec

https://www.coursera.org/professional-certificates/google-ux-design

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/1ed400d1-bbdf-302d-70be-3175620c3912.png" width="800">

# Googleフォトのワイヤーフレーム

Googleフォトのワイヤーフレームを一緒に描いてみましょう。

#### ステップ1

携帯電話のフレームを表す大きな長方形を描きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/2a4b048c-634e-7e8b-1da2-536823259c14.png" width="700">

#### ステップ2

上部にアプリの幅全体に渡るトップバーを描きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/84d04abc-a547-4292-9b72-a6c8899ad861.png" width="700">

#### ステップ3

トップバーの下に長方形を3つ並べて描きます。それぞれの矩形は、フレームの約3分の1を占め、その中に画像を示すxがあるはずです。各矩形の間には少しスペースを空けてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/c0634426-fdc6-375b-aa2b-6c059f7bfc21.png" width="700">

#### ステップ4

フレーム下部の全長にわたって、下部ナビゲーションバーを描きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/f871aed2-d044-fd9a-c9ff-44845b6c367a.png" width="700">


#### ステップ5

下のアプリバーの上に、3つの正方形を2列に並べて描きます。この部分には、6つの同じ正方形があるはずです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/b65becfc-7778-59c8-0765-5879b3b556ba.png" width="700">

#### ステップ6

すべてのアイコンを表現するために、いくつかの丸と四角を追加します。上のバーには、左端に小さな四角形、右端に丸を描きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/38c00373-a7c7-9156-3846-0251f545aa31.png" width="700">

#### ステップ7

下のナビゲーションバーに、小さな四角形を3つ、左、中央、右にそれぞれ1つずつ追加します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/0190ebac-493b-f5e8-f345-ca7afb2ce2af.png" width="700">

#### ステップ8

最後に、テキストを表示するための直線をいくつか追加します。まず、上のナビゲーションバーの真ん中に直線を追加します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/6459c048-42d5-3aa6-6450-595a2f5cde42.png" width="700">

#### ステップ9

次に、3つの長方形と6つの長方形の間に、フレームの左からフレームの中央に向かう直線を追加します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/5f1bfc1e-5390-708c-e867-cf86059f381b.png" width="700">

#### ステップ10

最後に、下部のナビゲーションバーの小さな四角の下に、それぞれ小さな線を追加します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/30c1455e-561d-76c5-ac6c-4f98772e2f2d.png" width="700">
Ruby unlessとは

PHPerがRuby on Railsを学んでいく中の備忘録

## unlessとは
unless文は、条件が「偽」の場合にその後の処理を実行するもの。

## unlessの文法
```unless.rb
unless 条件式 [then]
  #条件式が偽の時に実行する処理
end
```

## unlessでelseは使える?
unlessでもelseを使うことができる
```unless_example.rb
unless 条件式 [then]
  #条件式が偽の時に実行する処理
else
  #条件式が真の時に実行する処理
end
```

## 注意
可読性における観点から、ifで事足りる場合には、unlessでelseが使われることはほぼない。

## 返り値
条件式の評価結果が偽である場合は評価結果を返し、条件式が真である場合は式が、nilを返す

## 後置unless(unless修飾子)
３項演算子のように一行で記述することが可能
```unless.rb
式 unless 式
```
後置unlessは、右辺の条件が成立しない場合に、左辺の指揮を評価し、その評価結果を返す

```unless_example.rb
sports = "バレーボール"
puts 'バレーボールではないです' unless sports = 'バレーボール'
```
1行に記述するコードが長くなる場合は、可読性が下がるので、後置unlessは使うべきではない
コロナ禍を超えてモバイルＰＣに見えた変化

# コロナ禍緊急事態宣言でテレワークに入るときには想定できなかったこと。
 * 2019年4月、大量にモバイルPCをセットアップして、社員に渡しました。
 * 当時の私はエンジニアとしてモバイルPCが発熱する熱量に懸念を持ち、クーリングを上げる必要があると感じていました。
 * 個人の対策としては、PCスタンドをAmazonで1500円ほどの物を調達しました。
 * 社内のエンジニアでそのあたりに明るいマネージャーエンジニアがやはりスタンドを用い、そのチームでは浸透しました。

# 3年経って顕在化した変化
 * 短期的には発生しない熱の影響は、やはり長期的にはあったようで、メモリエラー等で、起動しなくなるPCが散見されるようになりました。
 * メーカー営業の見解は、設計上は問題ないだろうがという前置きの元、ファン付きのスタンドを装備したり、スタンドを付けているということを実際に話として聞きました。
 * 非エンジニアのユーザーからすると、情シスから提供されなければ、何故スタンドが要るのかという認識なく、ある日PCが立ち上がらなくなり、テレワークから急遽出社という事態が散見されているのが現状と思います。
 * 今年になって、通勤時の風景として、他社の風景として、会社にテンパって電話しながら出社している方を何人か見ました。
 * 私は、現象が起こるたびに啓蒙はしています。100均製品すら、自腹は切らないというスタッフと危機意識を持つスタッフは2分されますね。(生産性やリスクヘッジは個人の改善ポイントとも私は思います)
 * 私が良く例えで使うのは、それはイチローが結果を出すための大切にしなければいけないバットなのか、草野球のオジサンが趣味で楽しむバットなのかという例えを出します。プロであるという意識の視点の問題ではあるりますが。
 * あと、SSDを搭載しているPCであれば電源管理で、高速シャットダウンの機能は解除しておくべきだろうと考えており、実際最近のキッティングではそうしています。

# 今年になって見かけたPC
 * 当時は無かった、クーリングの穴やスリットが増えました。これはやはり、メーカーとしてのフィードバックだろうと感じます。
 * すべてを見ているわけでは無いので、明確に言えることではないですが、core系以上のマシンは、高出力と電力のバランスから、DELLではアダプタも45Wよりも65Wが主流になっている印象です。

# 実際のスリット
 こんな感じ。結構大きい排気口が出来てます。
![DSC_1267.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2950971/e395b7fd-b73d-b56a-717e-07559d908886.jpeg)

# 個人的感覚として
 DELLのPCの場合は発熱部がヒンジ側に寄せてあるので、それを考慮したとしても十分空気の流れを
 出すには20~30mmはヒンジ側を持ち上げた方が良いのかなという印象です。
エンジニアの転職について　仕事はお金じゃないという人にこそ見て欲しい

# わたしの自己紹介
1社目：テストをする人　350万円
2社目：SE　430万円
3社目：AWSに関わる人　600万円

:::note info
3社目で大きく**年収**が上がりました。その件について触れていきます。
:::
趣味：節約（風呂なし4万5000円、半額弁当生活）
資格：AWS SAA、TOEIC 700点オーバー

# 仕事はお金じゃないという人にこそ
## 入社する会社である程度生涯年収は決まります。


<img width="600" src="https://cdn-ak.f.st-hatena.com/images/fotolife/d/dannu/20201004/20201004185736.png">

[転職サイト引用](https://www.jobdirect.jp/entry/2020/10/04/185814 "転職サイト")

:::note info
22歳（一般）800万円　キーエンス
55歳（管理職）年収694万円　55歳大卒男性平均
:::

## お金が必要なタイミングはこれからたくさんあります。

<img width="600" src="https://s3-ap-northeast-1.amazonaws.com/s3-ten-navi.com-wpimg/hacks/wordpress/wp-content/uploads/2021/08/story_money_know-_twenties_01.png">

[転職サイト引用](https://ten-navi.com/hacks/article-664-53481 "転職hacks")


## 結婚のステージに行く前に
まずは彼女選び
彼女に結婚相手として意識される年収は**500万円以上**が人気みたいです。

<img width="600" src="https://prtimes.jp/i/14183/20/resize/d14183-20-139560-1.jpg">

[PRTIMES引用](https://prtimes.jp/main/html/rd/p/000000020.000014183.html "転職hacks")

:::note info
わたし同様世の中の女性も**働きたくない**
:::

## 除外される男たち

<img width="600" src="https://imgc.eximg.jp/i=%252F%252Fs.eximg.jp%252Fexnews%252Ffeed%252FMynaviWoman%252Fff%252FMynaviWoman_mynavi_woman_8124847%252FMynaviWoman_mynavi_woman_8124847_3.jpg,small=900,quality=80,type=webp">

<img width="600" src="https://s.eximg.jp/exnews/feed/MynaviWoman/ff/MynaviWoman_mynavi_woman_8124847/MynaviWoman_mynavi_woman_8124847_4.jpg">

[ローリエプレス引用](https://laurier.excite.co.jp/i/MynaviWoman_mynavi_woman_8124847 "ローリエプレス")

:::note info
年収**600万円以下**はそもそも検索に引っかからない
:::

## わたしの努力
年収600万円に到達するために**約半年で500時間**ほど勉強しました。

AWS　solution architect associate
2ヶ月 2時間/1日

TOEIC 700点オーバー
4ヶ月 2-3時間/1日

:::note info
勉強嫌いのわたしも**年収アップ**のためなら頑張れた。
:::
Firebase Consoleで本番環境と区別をつける超簡単な方法

こんにちは。[virapture株式会社](https://virapture.com)でCEOしながら[ラグナロク株式会社](https://ragna-rock.com)でもCKOとして働いている[@mogmet](https://twitter.com/mogmet)です。
![mogmet.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/217310f1-1bfe-d4be-1277-31b6c2e9c6ad.jpeg)
最近えほんを読むことが多くなりました。でもあっという間に読みきっちゃうので長い絵本がほしいです。

本日はFirebaseのコンソールで本番環境と見分けをつける方法がいつの間にかできていたので紹介します。

## 設定方法の紹介

プロジェクトの設定を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/a96fcea9-7088-b517-b67f-b75bffa6ea31.png)

プロジェクト設定の環境の種類を編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/3393b29a-879b-abb1-8ccb-148057bd1df4.png)

本番環境に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/fa3c2c99-b863-e59a-8611-ceca4dd83fc2.png)

プロジェクト名に「Prod」とつくようになります！！！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/cda971f9-da51-de22-94ba-302f0c1a3b2a.png)

## まとめ

プロジェクト設定からスーパー簡単に本番環境と区別をつける設定をすることができるようになりました。
これをすることで本番で誤って作業してしまうといったことを防げることができます。

最後に、[ワンナイト人狼オンライン](https://online.1nite-jinro.com/link/blog)というゲームを作ってます！よかったら遊んでね！

https://online.1nite-jinro.com/link/blog

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)、問い合わせ対応が簡単にできる[CSmart](https://csmart.jp/lp)、フリーランスのコミュニティの[NextFreelance](https://next-freelance.net/)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

https://csmart.jp/lp

https://next-freelance.net/

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

https://virapture.com/

ラグナロクでもエンジニアやデザイナーのメンバーを募集しています！！楽しくぶち上げたい人はぜひお話ししましょう！！

https://ragna-rock.com
トータル10時間で息子の寝返りアラートAIを作成してみた

息子が寝返りをできるようになりました👶

うつ伏せ寝の危険があるので、寝返りをするとアラートを出してくれるようなAIを構築してみました。
AmazonSagemakerとAmazonRekognitionを使うとサクッと作ることができたので記載しておきます。

# システム構成図
![スクリーンショット 2022-11-09 6.19.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926542/e55ec395-b33c-380d-a799-72828cf5ae4c.png)

1. ネットワークカメラで息子の様子を撮影
1. FFmpegで画像に保存
1. 画像をAWS CLIでS3にアップロード
1. Amazon Rekognitionの推論APIをリクエスト
1. 推論結果を元に寝返りをしていたらパソコンからアラートを出す（音を鳴らす）
1. 2-5を繰り返す

# ネットワークカメラ
ネットワークカメラには、今回はTP-LinkのTapoを利用しました。
RTSPプロトコルに対応しているので、撮った映像から画像に変換してPC内に保存することができます。

https://www.tp-link.com/jp/smart-home/tapo/

# 撮影した内容を画像に保存
画像の保存にはffmpegを利用しました。
RTSP経由で撮影した画像をサクッと画像として保存してくれます。

# 学習過程
まずは推論モデルを生成するために学習データを用意する必要があります。
ネットワークカメラとFFmpegを利用して収集した写真をAmazon Sagemaker Grand Truthを利用して、写真ごとに寝返りをしているかしていないかのフラグ付けします。

これについてはAWSのNyantechハンズオンシリーズが参考になります。

https://aws.amazon.com/jp/builders-flash/202003/sagemaker-groundtruth-cat/?awsf.filter-name=*all

その後、Amazon Rekognition Custom Labelsを使って教師あり学習をさせます。
こちらもNyantechハンズオンを参考にしました。

20枚程度の画像で精度は82%程度、ちょっと精度は低いです。

# 推論過程
生成したモデルはAWS CLI経由またはPythonコードベースで利用できます。
今回はPythonコードベースで呼び出す形にし、推論結果を元に寝返りを検知したら音を鳴らす（MacだったのでSay（）を利用して音声でお知らせ）形にしました。

# 結果
寝返りを検知するとうまくお知らせしてくれる仕組みができました。
ここまで大体10時間程度で開発できました。

ただし以下の課題があります。
* 精度が低いので誤検知が多い
* 推論Modelを起動するまで時間がかかる（約５分程度かかります)
* 画像を撮ってから推論が完了するまで10秒程度かかるのでタイムラグが発生します
* AmazonRekognitionは推論モデル稼働時間で費用が発生するので結構お金がかかる

SageMakerで頑張って学習モデルを作って、そのモデルをパソコン上で動かすようにすればこれらの課題は解決できそうです。
MLOpsも考えるとこんなイメージでしょうか。

![スクリーンショット 2022-11-09 6.44.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1926542/60b59d16-e833-77e0-edcc-4abf3b44e7d7.png)


# その後
結局その後息子は敏感な背中スイッチを発動させてベビーベッドでは寝てくれなくなってしまいました😢
今は妻が息子に添い寝しながら布団で寝ているので今回のMLは不要になってしまいました。

子どもの成長は速いですね〜。
Asanaのサイドバーを一時的に広げる

## やりたいこと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/b683401f-794b-11a2-5085-90ae68ac0ccc.png)

←→の部分を広げる。

プロジェクトが乱立して、どうしてもデフォルトのサイズだと文字が切れてしまって、一発で狙いのプロジェクトにたどり着けない時に。
また、並び替えする時とか、大変ですよね。

## 方法

```js
document.querySelector('.AsanaMain-sidebar').style.width = '600px'
```

ディベロッパーツールを起動して上記のコマンドをコンソールで実行するだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/4ff7aca2-14c1-c63d-01dd-1f1750b122ed.png)

*広がったあと*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/f825e547-cc66-9382-3c71-289f0595984f.png)
minikubeのインストールと動作確認メモ


基本的にDocker Desktopのkubernetes機能を利用してきたが、minikubeもメモ。

>マルチnodeとかも試せるので。

## インストール

Macなのでbrewで。

```bash
brew install minikube
brew install kubernetes-cli
```

>Docker Desktopで一度kubernetesを有効にしてるとcliのインストール時にコンフリクトするみたい。既存を削除しました。

## 動作確認（minikube自体）


### バージョン

```bash
minikube version version

minikube version: v1.28.0
```

### start

とりあえずstartしてみる。

>startしてないと、profileとか何もないので、何も確認できない。

```bash
minikube start
```

profile listを確認。

```bash
minikube profile list
```

>dockerが入っているとVMドライバはdockerになるみたい。以前はVirtual Boxがデフォルトで遅くてストレスでしたがよかったです。
>hyperkitを使う方法もあるようです。

状態を確認。

```bash
minikube status
```

### stop

```bash
minikube stop
```

deleteでminikubeで作成したクラスター（profile）を削除できるみたい。

```bash
minikube delete
```

>minikube startで再びクラスタは作れます。

### dashboardの起動

Docker Desktopでは初期設定がうざかったdashboardもコマンド１つで起動できるようです。

```bash
minikube dashboard
```

## 動作確認（kubernetes的）

### nginxを動かしてみる

とりあえずマニフェストファイルは用意せず、コマンドでnginxを起動させてみます。

```bash
kubectl create deployment hello-nginx --image=nginx
```

exposeで公開。このときserviceが生成されます。

```bash
kubectl expose deployment  hello-nginx --type=NodePort --port=80
```

minikubeでは以下のコマンドで自動でport-forward設定してくれるみたいです。

```bash
minikube service hello-nginx
```

nginxの画面が見えましたか？見れればOK

### 片付け

後片付け。

```bash
kubectl delete deployment hello-nginx
kubectl delete service hello-nginx
minikube image rm docker.io/library/nginx:latest
```

実際の利用は[こちら](https://qiita.com/zaburo/private/1beb52139b00f94265e4)をどうぞ（個人的な内容ですが）。

## 参考

* https://info.drobe.co.jp/blog/engineering/minikube-driver
* https://miyazi888.hatenablog.com/entry/2022/05/22/194940
* https://amateur-engineer-blog.com/kubectl-create-manifest/
Microsoft Teams上で動くチャットボットの紹介

# Microsoft Teams上で動くチャットボットについて

製品の概要については以下のページからご確認ください。
https://www.mahty-solutions.com/holabot
https://prtimes.jp/main/html/rd/p/000000001.000103237.html


今回はMicrosoft Teamsの開発に当たり、技術的な側面からまとめてみました。

## チャットボットの機能について

製品の概要については添付したURLにも記載がありますが、大きく分けると
①Q＆A機能
②M365と連携した機能
になります。
今回は技術的な側面から紹介をさせて頂くため、
以下の流れで順番に紹介をしていきます。

・各機能で共通して使用している技術的
・Q＆A機能
・M365と連携した機能


## 各機能で共通して使用している技術について
チャットボットの本体はAzure Bot Serviceを使用し、チャットボットの動作自体はBot Framework（C#）で実装をしています。
イメージは下の図のような感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031387/7f46d5da-aa40-9341-a47c-09452cb9af23.png)

ユーザーから送信されたチャットの情報はAzure Bot Serviceを介してBot Frameworkの処理へと送られます。
Bot Frameworkでは、ユーザーから送信されたメッセージによって処理を切り分けるように実装をします。
（※Azure bot serviceでBot Frameworkが稼働しているサーバーのURLをエンドポイントとして設定する必要がありますが、
今回は割愛します。）

ユーザーへメッセージを返答する際にはアダプティブカードを採用しています。
https://learn.microsoft.com/ja-jp/power-automate/overview-adaptive-cards
アダプティブカードには、メッセージ内にボタンを設置することができるため、ユーザーの操作の負担を減らすことができます。

アダプティブカードの使用例です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031387/4e074957-c978-a3b7-67c3-693be9c1ce99.png)
ユーザーがボタンを押下すると、メッセージを送信したのと同じようにAzure Bot Service → Bot Frameworkへと処理が送られます。
例えば、「青」のボタンを押下すると「青」など設定しておいた値がAzure Bot Serviceへ送信されます。
アダプティブカードについては別記事でまとめました。
https://qiita.com/rei_441/items/7fa8da44ebe4fbeeba07

## Q＆A機能について
Q＆A機能では、ユーザーからのメッセージに対して、回答を返す機能になっています。
試用している技術はDialogflowです。
https://cloud.google.com/dialogflow

dialogflowにこの質問が来たら、これを返すといった情報を事前に登録しておきます。
質問の内容が曖昧でも、トレーニングフレーズをいくつか設定することで対応できます。
例えば、「経費申請」というワードだった場合。
「経費」
「経費申請」
「申請」
などと設定しておくとこのような質問が来た時に「経費申請」という質問の回答を返答できる
ようになっています。

質問と回答の登録はCSVファイルを取り込み登録ができます。

Q＆A機能の処理の流れは以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031387/205da39f-b4a5-5533-0dfe-5bac5f4d77c0.png)



## M365と連携している機能について

M365と連携している機能では、
①Outlookのカレンダーの予定を取得しチャット形式で返答
②Outlookのカレンダーに予定を登録する。
③メンバーを招待して会議を作成する
④会議に招待するメンバー全員の空き時間を提案し、会議の登録まで行う。

この4つの機能を備えています。
それぞれ、まずユーザーがどの機能を使用したいのかを
Bot Frameworkで識別し、ユーザーからのインプットをパラメーターとして自作のAPIを呼び出します。
APIはPHPで実装をしています。

APIではMicrosoft Graph APIを使用し、M365の情報を取得、書き込みを行っています。
処理の流れはこのようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031387/753e94c7-068d-12b5-0fd3-7f8e6140a214.png)

ユーザーは使用したい機能を選択すると、それぞれ専用のポップアップ画面が立ち上がります。
このポップアップ画面では、日付や時間、会議に招待するメンバーを入力するフォームが備わっています。
基本的にはOutlookで会議や予定を作成する画面と同じような感じになっています。

※画面はお見せできないのであくまでイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1031387/66a8dc10-da78-5635-36f7-650a575059b2.png)

あとは入力された値をパラメーターとしてAPIの中でGraphAPIを実行し、戻り値をBot Frameworkへ返す。
Bot Frameworkで戻り値を整形しユーザーへメッセージを送信することが一連の流れになります。


使用しているGraphAPIの例は以下となります。
・Outlookのカレンダーから予定を取得する
・Outlookのカレンダーに予定を登録する
・Outlookのカレンダーに会議を登録する
・テナント内にある会議室の一覧を取得する
・テナント内の全ユーザーの情報を取得する
・ユーザーの空き時間一覧を取得する

ちなみにGraphAPIは以下のサイトでM365のアカウントがあり、GraphAPIを実行できる
権限があれば試しに使用することができます。
https://developer.microsoft.com/ja-jp/graph/graph-explorer

これらのGraphAPIを呼び出す処理をPHPで実装してBot Frameworkから呼び出すようにしています。


以上がこのチャットボットで使用している開発目線での技術になります。
DUALSHOCK4をWindows10にBluetooth接続する時の基礎知識

# 概要

この記事ではDUALSHOCK4とWindows10のPCとの **Bluetoothペアリング** 、それと **DUALSHOCK4側の電源ON・OFF** のやり方について書いています。

あたいの場合、DUALSHOCK4とPCは **1対1** で使っています。
なので下記のような使い方のノウハウは **ここには書いてないです** 。

* 1台のDUALSHOCK4をPS4とPCで共有（使いまわす）。
* 1台のDUALSHOCK4を複数のPCで共有（使いまわす）。

# 一番最初のBluetooth接続

Windowsマーク ⇒ 設定 。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/2ce9bd6e-3d67-056d-25e3-b6b99ba7f391.png)

デバイス 。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/924b2b76-cc60-dcc4-c212-741fe9b155ee.png)

Bluetoothとその他のデバイス ⇒ Bluetoothとその他のデバイスを追加する 。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/46d1cd40-e7d7-2e4c-87ca-3b531842583b.png)

Bluetooth 。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/071f46d1-0961-e36c-c5fe-b68972d80d91.png)

DUALSHOCK4のSHAREとPSマークを同時押し。
2～5秒ほどすると、DUALSHOCK 4のランプが ピピッ！ピピッ！ って感じの間隔で **点滅** 。

下記のように ```Wireless Controller``` が出てきたら選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/cb107a9f-038d-e034-0e93-1ae952469e83.png)

接続完了すると下記。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/20cf7d27-c106-f1d1-c349-e948e65cc7c7.png)

何か特別なソフトを入れたり、特殊な設定は不要。

# DUALSHOCK4の電源だけOFFしたい時

DUALSHOCK4のランプが消えるまでPSマーク押しっぱなし。
（だいたい10秒くらい）

2022年11月ごろは下記で電源OFFできていましたが、いつ頃か不明ですができなくなりました。
~~PSマーク + △ 押すだけ。~~
~~（どちらのボタンも長押し不要）~~
~~DUALSHOCK4のランプが消える。~~

# DUALSHOCK4の電源をONしたい時

PSマークを1回短く押すだけ。
（長押し不要）

DUALSHOCK4のランプが ピコ…ピコ… って感じの間隔で **点滅** する。（接続中の合図）
そんでPC側と接続できたらランプが **点灯** に変わる。（接続完了の合図）

# 蛇足

USBケーブル抜き差しするの面倒だから充電スタンド欲しい。

そんでもって、下記のようなことできたらいいね。（希望）

* 充電スタンドから取ったらDUALSHOCK4の電源ON。 
* 充電スタンドに置いたらDUALSHOCK4の電源OFF。

# 参考サイトさん

https://www.usachannel-steam.com/ps4-controller/

# バージョン

DUALSHOCK 4 CUH-ZCT2J
Windows 10 Home 21H1 19043.2130
何も有用なことは書いてない記事

# 特に何もなし

気まぐれで自分の学習記録用に登録してみたが…
この記事だけで終わる予感

# 適当なコト
やっと念願の開発の現場に参画できてとてもうれしい反面、
ついていけるかわからなくて不安のおなか一杯。
少しでも消化できるように、自分のスキルアップのために、
語彙力向上のためにアウトプットとしてやっていきたい（気持ち）

今はとりあえず、railsについて学習していく（気持ちだけ）
CSS Modules の composes: xxx from global; って知ってる？

## はじめに

ドワンゴでニコニコ生放送のWebフロントエンジニアをやっています @misuken です。

今回は、意外と知られてないかもしれないCSS Modulesの機能 `composes: xxx from global;` について紹介します。

## `from global` とは

公式ドキュメントの[Composing from global class names]に書いてある通り、以下のように書いたセレクタをコンポーネントに適用すると、ハッシュなしのクラス名をHTMLへ反映することができます。

```css:foo.module.css
.foo {
  composes: a b c from global;
}
```
```css:Foo.tsx
import classNames from "./foo.module.css";

export const Foo = () => <div className={classNames.foo}></div>;
```
```html
<div class="foo a b c"></div>
```

## `from global` の使いみち

CSS Modulesを使うと、全てのクラスにハッシュが付いてくれるので便利な半面、ハッシュなしのクラスを使えたほうが良い場合もあります。(`:global`的な使い方ではなく)

- グローバルなクラスセレクタと連携したい場合
- ハッシュ付きクラス名とハッシュなしクラス名を[子結合子]や[子孫結合子]を組み合わせる場合
- ファイル間を横断して作用させたい場合

特にスタイルに依存した理由でハッシュなしクラス名を使用したい場合、js側で追加するよりも、CSS側で指定できたほうが、責務を適切に閉じられます。

当然影響範囲が広がればリスクも生じるので、適切な管理のもとに使用しましょう。

## `from global` は知られているのか？

最初に「意外と知られてないかもしれない」と書いたには理由があります。

個人的に`composes`でハッシュなしクラス名を指定したい場面は、2016年頃にCSS Modulesを使い始めた頃から存在し、色々な書き方を試してみたものの実現することができず諦めていたからです。

その後も何度も`composes`でハッシュなしクラス名が指定できたら便利なんだけどなぁ。。。と思ったことがありました。

そんな中、公式ドキュメントを眺めていたところ、なんか見慣れない記述が記載されていました。
公式ドキュメントはやっぱりちゃんと読むべきだなぁ、と思ったのですが。。。

たしか2016年の段階で記述方法に関してはしっかり見た気がするので、改めてリポジトリを見てみました。

すると、2017年10月になにやら更新された様子が見て取れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41058/7b0a4036-3c31-a6f3-fd9a-878553bbc157.png)

このissue経由でドキュメントに追加されたようです。
https://github.com/css-modules/css-modules/issues/267#issuecomment-339756464

どおりで気付かなかったわけですね。
2017年10月以降にCSS Modulesを使い始めた人のほうが認知度が高いかもしれません。

## `from global` はいつから使えたのか？

ここで新たに一つ疑問が生まれます。
ドキュメントに追加されたのは2017年10月。
しかし、[css-loader]などに含まれる実装側はいつから使えるようになったのか？

それがわかる情報が以下のissueに書いてあります。
https://github.com/css-modules/css-modules/issues/49#issuecomment-149479041

どうやら、2015年の段階ですでに使える状態だったようです。
issueのやり取りの中で、何度もドキュメントに追加する流れがあったことが見て取れますが、なぜか記載されることはなく、知る人ぞ知る隠し機能として存在していたと思われます。

2016年に知りたかった。。。

## Next.jsのCSS Modules

CSS ModulesをビルトインサポートしているNext.jsでも問題なく`from global`はサポートされていました。

## まとめ

使う場面はそれほど多くないかもしれませんが、使いたくなったときに知ってると知らないでは大きく手間が変わってくる`from global`は、少し特殊な歴史を辿ってきたことがわかりました。

ニコニコ生放送では、これが使えることで実装を大きく改善できた部分があり、非常に重宝しています。

`composes`でハッシュなしセレクタを使いたいなぁと思ったことのある方は、ぜひ試してみてはいかがでしょうか。

[Composing from global class names]: https://github.com/css-modules/css-modules#composing-from-global-class-names
[子結合子]: https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator
[子孫結合子]: https://developer.mozilla.org/ja/docs/Web/CSS/Descendant_combinator
[css-loader]: https://github.com/webpack-contrib/css-loader
Watson Studio上のSPSS Modeler FlowからWatson Queryに接続する

# はじめに
データ仮想化サービスであるWatson Qeuryに、SPSS Modeler Flowから接続して操作する方法を説明する。

# 手順概要
1. Watson Queryの認証情報を取得する
1. Watson Studioのプロジェクトから、Watson Queryの接続情報を登録する
1. SPSS Modeler Flowの画面から、Watson Queryの資産を入力として指定する

# 手順詳細
1. Watson Queryの認証情報を取得する
[こちらのリンク](https://qiita.com/hk8111/items/6437c3be2113de881d8d#%E6%89%8B%E9%A0%86%E8%A9%B3%E7%B4%B0)の"Watson Queryの認証情報を取得する"を参考に、認証情報を取得する。
    - APIKEY : 資格情報ファイル.apikey
    - DB名 : 資格情報ファイル.connection.legacy.database
    - ホスト名 : 資格情報ファイル.connection.legacy.hosts[0].hostname
    - ポート : 資格情報ファイル.connection.legacy.hosts[0].port
    リンク先の情報に加えて、以下の情報も取得する
    - インスタンスID : 認証情報.instance_administration_api.instance_id
1. Watson Studioのプロジェクトから、Watson Queryの接続情報を登録する
    1. 資産タブの新規資産をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/b76041ca-f3fd-fbf3-dc9e-9911f52a73a1.png)
    1. 接続をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/b575d09e-01cf-17d5-a92c-cd5403466885.png)
    1. Watson Queryをクリックし、選択をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/cb75c8b7-924a-7a77-ba64-f2d547708603.png)
    1. 以下の項目に情報を入力する
        - 接続の概要
            - 名前 : 任意の名前
        - 接続の詳細
            - データベース名 : 認証情報よりDB名
            - ホスト名または IP アドレス : 認証情報よりホスト名
            - ポート : 認証情報よりポート
            - インスタンスID : 認証情報よりインスタンスID
        - 資格情報
            - 認証情報 : プルダウンで"APIKEY"を選択
            - API鍵 : 認証情報よりAPIKEY
        - 証明書
            - ポートはSSL対応 : チェックを入れる
    1. 接続のテストをクリックして、作成をクリックする
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/ec5632cc-3004-b928-4247-3016ca6da042.png)
    1. 作成をクリックする
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/4225f2e3-3ce1-6b75-8c06-840a37b7b331.png)
    1. すべての資産に接続が作成されていることを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/3a83005a-734e-0dd5-01de-2926a0ead769.png)


3. SPSS Modeler Flowの画面から、Watson Queryの資産を入力として指定する
    1. SPSS Modeler Flowを開く
    1. インポート → データ資産ノードを配置
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/02d2aef3-28d2-fe58-8151-cc2132113836.png)
    1. 任意の仮想表を選択して、条件抽出をクリックする
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/f603671b-db1c-11c6-272d-3bd3556153cd.png)
    1. データ資産ノードで仮想表を入力とできることを確認する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/c3b44cbd-bf49-99db-4a5f-c20e8923d62a.png)
JavaScriptで空白行なのにUncaught SyntaxError: Unexpected tokenに悩まされた

「空白行 Uncaught SyntaxError: Unexpected token」で検索してもヒットしなくて困ったので備忘録

結論を言えばゼロ幅スペースってやつが悪さしていた


1. [事象](#事象)
1. [解決までの経緯](#解決までの経緯)
1. [ゼロ幅スペースとは](#ゼロ幅スペースとは)
1. [VSCodeがえらい](#vscodeがえらい)
1. [振り返り](#振り返り)

## 事象
```javascript
​console.log(1); //1行目
​
console.log(2); //3行目
VM1353:2 Uncaught SyntaxError: Invalid or unexpected token //2行目でエラー
```
1. 書いたjsコードが一切動作した形跡がない
1. コンソールを見ると`Uncaught SyntaxError`が出ている
1. 該当行に飛ぶと空白行(その前後も空白行)

という感じだった
↑の1-3行目をブラウザのコンソールに貼りつけて実行すると同じ結果になるはず

## 解決までの経緯
1. 全角スペースでも混じったのかと思いEclipse(諸事情でJavaのIDE使用)を確認したが見つからず
1. 無意味なインデントが悪いのかと思い、インデントに色付けする拡張のあるVSCodeで開く
1. 空白行周辺のハイライト部分でカーソルをキーで動かしていたところ、カーソルがとまる部分があった
1. マウスオーバーしてみると、「文字`U+200b`は非表示です」との文言が出る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1768084/961501f1-bd26-4590-cd40-94623bc40b27.png)
1. 調べてゼロ幅スペースというものであることが分かり、削除して解決

## ゼロ幅スペースとは

区切りを示すための幅の無い空白文字
なのでドラッグで選択しても見つけられなかった

https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9

たぶん今回の原因はteams

https://qiita.com/pm00/items/f1590b4826d3c0856d47

ちなみに全角スペースはjsのソースに混じっていても問題ない空白文字の一種とのこと
(ゼロ幅スペースは空白文字ではない)

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

## VSCodeがえらい

今回拡張機能目当てでVSCodeで開いたことが解決に寄与したが、
標準機能「Unicodeの多義性文字の強調表示」が仕事してくれていたらしい

https://www.chihayafuru.jp/tech/index.php/archives/4942

## 振り返り
解決までに上記以外に色々遠回りしたが、エラーメッセージをもっと真摯に受け止めていれば、変な記号が混入していると決め打ちできたので反省
普段のエラーと違いその行に至るまでのjsコードも一切動いていないのもヒントだった

まとめ：VSCode使おう
AMCLの実装について（ビームモデル）

AMCLについての概要はここが日本語でわかりやすい
https://robo-marc.github.io/navigation_documents/amcl.html#parameter

ここを読んだうえで、AMCLのパラメータを調整しようとしたが、パラメータが具体的にどういう挙動をするのかがわからない。
そこでソースコードを読んで各パラメータの意味を深追いしようと思いました。


# AMCLの実装（ビームモデル）

https://github.com/ros-planning/navigation/blob/noetic-devel/amcl/src/amcl/sensors/amcl_laser.cpp

ビームモデルはL144-L213に記述があります。

大雑把に以下の３ステップをレーザー点ごとに繰り返して、スコアを計算します。
1.レーザーの距離と、最近傍障害物との距離の差を計算する (実装上はz)
2.尤度（実装上はpz）を計算する。
3.尤度の３乗をスコアとして、サンプルのスコアに加算します。

以下がコメントアウトされていることから、尤度pzの積を最終スコアとして、確率として扱ってもうまくいかなかったのではないかと推測されます。
```
//    p *= pz;
```
結局サンプリングの分散を決めるスコアですし、確率的に扱っているというよりは、ヒューリスティックにサンプリングを行っているように見えます。

# AMCLが確率モデルだというのは幻想

自分の勝手な勘違いでしたが、勉強になりました。

統計的な単語について、語句や意味の誤りがあったら申し訳ありません。指摘いただけたら助かります。

以上

# こっから雑多な感想です。

# AMCLのパラメータ調整について

ヒューリスティックなパラメータだったらどうしようもない。
タートルボットより大きなロボットだからこのパラメータを大きくしようとか、そういう調整ができなくはないが運ゲー。
ググってみたけど、調査能力が足りず？初心者向けチューニングは見つからなかった。

# AMCLの確率計算について

確率分布を使ってますが、事後確率を求めたりしているわけではなく、スコア計算の関数に、確率分布を利用しているように見えます。

事後確率をきちんと求めるようとすると、
ビームモデルに従って作った独自の分布（各レーザ点ごとに違う分分布）について積分したりしないといけないので、自分には計算できる気がしませんでした。
The server quit without updating PID fileが無限ループ


# はじめに
mysqlで久しぶりに作業をしようとしたらタイトルのエラーが全く消えず3時間ぐらい格闘しました。
その際の解決策を備忘録としてこちらに記載したいと思います。

## 開発環境
・MacOS Ventura 13.0
・mysql  Ver 8.0.31 for macos12.6 on x86_64 (Homebrew)

## やったこと
結論から先に言うと、PCの再起動で直りました。
これから先は実際に私が行った対応を記載していきたいと思います。
PCの再起動がダメだった時の参考にしてみてください。


https://qiita.com/jonakp/items/477a18d4a94c01a31583
https://qiita.com/_natsu_no_yuki_/items/ae4c94187093e4ab3cdc
上記記事等を参考に「.pid」のファイルを作成してみたり、権限周りを色々いじってみましたが無限ループ。。
mysqlを再インストールしてもダメ。
色々記事を漁りまさかそれはないよなあと思いながら、homebrewを見てみると、バグだらけ！！
なのでまずは下記を実施し、homebrewに問題がないことを確認してみてください。

```java:
 $ brew doctor
   Your system is ready to brew.
```
「Your system is ready to brew.」が出たら問題ないです。
私の場合は、100以上のいらないファイルを削除してくださいと記載されていたので
一個ずつ健気に消していきました。
```java:
 $ rm -rf 記載されているpath
```
そして
```java:
 $ mysql.server start
```

それでもエラーが。結果PCを再起動したら直りました。。。
初心者だったため、PCの再起動で直らないだろうと思っていました、、
まだまだ勉強が足りないようです。


## 記事読むの面倒な方向け

・まずはPCを再起動してみてください

　それでもダメなら

・homebrewに問題がないことを確認
```java:
 $ brew doctor
```

・バグがあったら解決（私の場合はいらないファイルを全て削除）

・一応アップデート
```java:
 $ brew update
```

これで私は解決したので、ぜひ試してみてください。


おしまい
MySQLの忘備録。rootのパスワードを設定する。

rootでログインをする場合
```
mysql -uroot
mysql> 
```

ユーザ一覧を表示
```
SELECT User, Host FROM mysql.user;
+------------------+-----------+
| User             | Host      |
+------------------+-----------+
| mysql.infoschema | localhost |
| mysql.session    | localhost |
| mysql.sys        | localhost |
| root             | localhost |
| yusuke           | localhost |
+------------------+-----------+
```

パスワードを変更する
```
set password for root@localhost='設定するパスワード';
```
エラーが出なければ変更完了。
KotlinでZXingを用いてQRコードリーダーを作る方法

## はじめに
Android端末でQRコードリーダーを作る際には、[ZXing](https://github.com/journeyapps/zxing-android-embedded)というライブラリを使うことが多いみたいです。

しかしこのZXingのドキュメントは全てJavaで書かれており、Kotlinで実装したものがなかったため、備忘録としてKotlinでの実装を残しておきます。

## 実装
まずライブラリを追加します。
```Groovy:SettingGradle
repositories {
    mavenCentral()
}
```
```Groovy:build.gradle
dependencies {
    implementation 'com.journeyapps:zxing-android-embedded:4.3.0'
}
```
次に権限周りの設定を行います。
```Groovy:AndroidManifest.xml
<application
        android:hardwareAccelerated="true"...
           
         <activity ...>

         // ここでライブラリのAndroidManifestを更新する
         <activity
            // ここでカメラ起動時に横画面になる設定を上書き
            android:screenOrientation="fullSensor"
            tools:replace="screenOrientation"
            android:name="com.journeyapps.barcodescanner.CaptureActivity">
        </activity>
```
:::note warn
注意
2つ目のactivityタグは新しく新規作成するようにしましょう。
ここでactivityタグを書くことで、カメラ起動時に横画面になるという初期設定を上書きできます。
:::

最後にActivity内でQRコードリーダーを起動します。
ベタガキしてるので各自で整えてください🙏
```kotlin:MainActivity
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // ScanContractの結果を受け取る
        val barcodeLauncher = registerForActivityResult(
            ScanContract()
        ) { result ->
            if (result.contents == null) {
                // ここでQRコードを読み取れなかった場合の処理を書く
                Toast.makeText(this, "Cancelled", Toast.LENGTH_LONG)
                    .show()
            } else {
                // ここでQRコードを読み取れた場合の処理を書く
                // ここではトーストに結果を表示するだけ
                Toast.makeText(this, "Scanned: " + result.contents, Toast.LENGTH_LONG)
                    .show()
            }
        }

        // QRコードリーダーの立ち上げ
        fun onButtonClick() {
            // 縦画面に固定
            val options = ScanOptions().setOrientationLocked(false)
            barcodeLauncher.launch(options)
        }

        super.onCreate(savedInstanceState)
        setContent {
            QRCodeReaderTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    // ボタンタップで起動
                    TextButton(onClick = { onButtonClick() }) {
                        Text(text = "QRCodeReaderを起動する")
                    }
                }
            }
        }
    }
}
```

## できたもの
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ZXing使ってKotlinでQRコードリーダーでけた <a href="https://t.co/XA9Z40NCUF">pic.twitter.com/XA9Z40NCUF</a></p>&mdash; たかっしー（開発垢） (@takashiho_2) <a href="https://twitter.com/takashiho_2/status/1589980733871099906?ref_src=twsrc%5Etfw">November 8, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## ドキュメント一覧
https://github.com/journeyapps/zxing-android-embedded
https://developer.android.com/studio/build/manifest-merge
https://developer.android.com/training/basics/intents/result?hl=ja


最後まで読んでいただきありがとうございました。
よければtwitterのフォローよろしくお願いします。
Webブラウザ＆OS毎の割り当て可能なメモリサイズ

# はじめに
WebGLアプリ開発するにあたり、ブラウザに割り当て可能なヒープメモリ（RAM）サイズは重要な要素となります。
UnityフォーラムにてUnity社の方が計測用アプリを作成されていましたので、そちらを利用して複数のデバイス＆ブラウザで測定してみました。

### 2025/02/04 追記
iOS18.2にてメモリの上限が撤廃されたため、iOSの最新版を利用することでクラッシュしなくなったようです。
再測定したところ、過去計測時と比べて大幅に割当できるメモリが増加しており上限に達してもクラッシュしませんでした。

| OS | デバイス条件 |ブラウザ| 測定結果 |
|:-:|:-:|:-:|-:|
|iOS18.3 |iPhone16Pro |Safari | 4GB |
|iOS18.3 |iPhoneSE3 |Safari | 4GB |
|iOS18.3 |iPhoneSE2 |Safari | 4GB※ | 

※端末のRAMは3GBのハズだがなぜか4GB割り当てることができた。仮想メモリを使っている？


■Unityフォーラムの関連スレッド
https://discussions.unity.com/t/webgl-memory-increment-issue-and-crash-on-ios/894771/31

# 計測ツール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/8b20b29a-234e-0ffb-6021-54eee2812643.png)

#### ■ツールの使い方
`Allocate More` のボタンをメモリ表示に変化がなくなるまで複数回押す

#### ■ツールURL
http://clb.confined.space/dump/mem_growth.html

#### ■元スレッド
https://forum.unity.com/threads/android-chromium-unable-to-grow-allocated-memory-above-256mb-confirmed.1014475/#post-6574876

# 測定結果
| OS | デバイス条件 |ブラウザ| 測定結果 |
|:-:|:-:|:-:|-:|
|Windows11 |RAM32GB    |Chrome   | 4000 MB  |
|Windows11 |RAM32GB    |Edge   | 4000 MB  |
|Windows11 |RAM32GB    |FireFox   | 4,000 MB  |
|macOS13.0 |M1 8GB    |Safari   | 4,000 MB  |
|macOS13.0 |M1 8GB    |Chrome   | 4,000 MB  |
|macOS13.0 |M1 8GB    |FireFox   | 4,000 MB  |
|iOS16.1 |iPhone13ProMax |Safari    | 501・757・989 MB※1  |
|iOS16.1 |iPhone13ProMax |Chrome    | 501・757・989 MB※1  |
|iOS16.1 |iPhone13ProMax |WebView   | 757 MB※1  |
|iOS16.1 |iPhoneSE3 |Safari    | 501・794 MB※1  |
|iOS16.1 |iPhoneSE3 |Chrome    | 501・794 MB※1  |
|Android13.4 |Pixel6a |Chrome   | 989 MB  |
|Android13.4 |Pixel6a |FireFox   | 4,000 MB  |
|Android13.4 |Pixel6a |WebView   | 989 MB  |
|カスタムAndroid|MetaQuest2 |Meta Quest Browser|4,000MB|
|カスタムAndroid|MetaQuest2 |Firefox Reality|16MB※2|

※1 毎回結果が変わる、途中で再起動またはブラウザがクラッシュする。上限に達している旨の表示が出ない
※2 測定ツールが機能していない？

## 上記の方法で割り当てたメモリはどのような扱いになるのか？
コミットサイズとして計上されるようです。
確認方法はWindowsのタスクマネージャ→詳細→一番上の行に対して右クリック→列の表示からメモリ表示を有効にすると確認することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/2fbe29e2-e63c-9bd2-291d-c20939d52cd4.png)

### ワーキングサイズとは？
未使用のメモリ含め、対象のプロセスで確保しているメモリ
この領域の未使用メモリはガベージコレクションによって軽量化することが可能です。
### ワーキングサイズとは？
実際に利用しているメモリ
### 参考
https://jpdsi.github.io/blog/internet-explorer-microsoft-edge/HighMemoryUsage/


# まとめ
* Windows11・macOS・MetaQuest2
    * 約4GBで安定
* iOS
    * 全体的に不安定（実際WebGLアプリ中も一定以上のメモリを使用すると不安定になる）
    * 4GBRAMモデル以上の場合、本体のメモリ容量に関わらず上限は同じ
* Android
    * 安定しており、Firefoxターゲットに絞ればリッチなコンテンツを作ることができそうだが標準ブラウザではないのが残念

# 関連記事

https://nodachisoft.com/common/jp/article/jp000005/

https://blog.pokechoi.com/archives/1096

https://www.techscore.com/blog/2017/12/24/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%81%AE%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E6%94%B9%E5%96%84%E3%81%A8%E3%83%A1%E3%83%A2%E3%83%AA%E3%83%AA/
初めてLTに参加した話

# 概要
初めて自分の所属組織以外でLT（Lightning Talk）に参加してきたのでそちらの感想や自分なりの改善点をまとめたいと思います。

# どのようにものに参加してきたのか
ソフトウェアの非営利ユーザーコミュニティが主催するイベントでイベント全体の時間も長く大規模なものでした。
Youtubeでライブ配信を行い、対談や講演、自分も登壇したソフトウェアユーザによるLTなどが行われました。

自分はオンライン参加で発表者用のZoomURLから参加し、発表時は自分のPC画面を共有し発表を行いました。

# 良かった点
・イベントはDoorkeeperで告知、参加者募集されて非常にシステマチックに準備がされていました。
・申し込みでその後メールでのやり取りをしていましたが、早い段階でslackでのやり取りになり準備期間中は密にコミュニケーションを取ることが出来ました。
・主催者の方も普段は別の仕事をされているはずですが、問い合わせなどにも迅速に返信を頂きイベント主催者側として信頼感がありました。
・本番の前週にリハーサルが行われ、実際の発表時の流れやイメージを持った状態で本場に臨めました。

# 資料作成について
・方向性が主催者の意図したものになっているか、規定違反となる内容や表現がないかを確認してもらうため、文字ベースで内容を作成し担当者に確認をしてもらいました。
・細かいデザインはベースとするものがなかったので、リハーサル時に他のメンバーがどのようなデザインで作成しているのかを確認させていただき文字からスライドに落とし込みました。
・一人で読み上げを行い規定時間内で終わる内容になるよう注意しました。

# 発表について
・事前にZoomにログインし出番を待つのですが、youtubeライブでは実際よりも遅れて放送されるためzoomがわの発表のみに集中して行いました。
・音声で指示を受けることが出来ないので、zoomのチャットで次に何をすべきかの指示が出されていました。
・リモートでの参加であったため、実際にどのような画面で放送されているかわからないため、発表中は不安が結構ありました。
・事前に計測していた時間よりも時間がかかってしまったため焦りました。

# 全体の所感
すべてのコンテンツを見たわけではないのですが、、番組構成もしっかりしていて見ごたえのある内容でした。
そもそもあれだけ長時間のライブ配信を無事に終わらせるだけでも参加している人たちの技術力の高さがうかがえるイベントだと思いました。

また後からアーカイブをみて思ったのですが、自分の話すスピードが早くて驚きました。
次回同様のイベントに参加するさいは特に注意すべきという学びになりました。

体験として面白く貴重な体験であったためとても楽しい経験となりました。
パワポに埋められた文字を探せ CTF pptx


## 問題
Aさんが以下のような google slide を作成しました
変な図形が入っているため、「ctf_」以降の文字を確認できないようになっています
※Aさんはこの四角い図形を移動できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/2704e4f9-7f0f-396d-3d41-9e0364145b15.png)

それをBさんに対して**閲覧権限**のみ許可します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/932b93a7-f8a7-1cdc-cef4-a080f585918b.png)

そのため、Bさんは以下のように「閲覧のみ」の状態で google slide を確認することができますが、もちろん編集ができません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/491d3620-4207-714f-e2b7-b0ca0492b4e4.png)

ここで問題です。
Bさんはどのようにして「ctf_」以降の文字列を知ることができるでしょうか？

<br/>
<br/>
<br/>
<br/>
-------------------------- 以下解凍 --------------------------
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>


## 解答
pptxでダウンロードして解凍しましょう

1. まず以下の部分で`.pptx`でダウンロード。ファイル名は`text.pptx`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/cafe121d-692d-13de-cf3d-887c359a45fc.png)

2. ダウンロードしたファイルを解凍する
```bash
$ ls
test.pptx

$ unzip test.pptx

$ ls
[Content_Types].xml _rels               ppt                 test.pptx
```

3. 解凍されたファイル内を捜索
↓以下の記事によると、
https://qiita.com/pokari_dz/items/0f14a21e3ca3df025d21
```bash
$ grep [検索したい文字列] -rl [検索対象フォルダのパス]
```
のようにしてファイル内の文字列も検索できるため、今回は以下のように検索
```bash
$ ls
[Content_Types].xml _rels               ppt                 test.pptx

$ grep ctf_ -rl .
./ppt/slides/slide1.xml
```

4. `./ppt/slides/slide1.xml`(３でヒットしたファイル)内を確認
```bash
$ vim ./ppt/slides/slide1.xml
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/62fe793a-ca20-60d6-94f5-d1927fa0613c.png)

正解は `ctf_hogehoge_test` でした
正解の単語がつまらなすぎて、今更ながらもっと良い単語はなかったのかと後悔しています


## 参考
https://qiita.com/pokari_dz/items/0f14a21e3ca3df025d21
いつかのCTF
Dockerについて

# はじめに
毎週1本様々な技術に関する記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)
# Dockerとは
Dockerとは、`Docker社が開発しているコンテナ型の仮想環境を作成・配布・実行するためのプラットフォーム`です。

# Dockerでできること
- 容易かつ正確な環境構築
従来の仮想化技術ではミドルウェアやアプリケーションを手動でインストールする必要がありました。Dockerでは、Dockerイメージとよばれる __イメージファイルを展開するだけで環境を構築__ することができます。また管渠構築に必要な手順も少ないため、ヒューマンエラーによる環境構築ミスも防ぐことができます。
- ハードウェア費用の削減
コンテナのサイズは小さく、__1つの物理サーバーに多数のコンテナ__ を稼働させることができます。これにより物理サーバーの購入費用や運用費用を抑えることができます。
- 開発環境と本番環境を同一化できる
ミドルウェアのインストールや各種環境設定をコード化できます。これにより、__開発環境で作成した環境をコード化し、同じ環境で本番環境__ を作ることができます。

# Dockerの構成要素
ここでは、Dockerにとって重要な4つの構成要素を紹介します。

- Dockerイメージ
Dockerイメージは、__動作環境テンプレート__ のようなものです。下記のDockerfileをビルドすることでDockerイメージを生成することができます。
- Dockerfile
Dockerfileは、__Dockerイメージを作成するためのテキストファイル__ のことで、コンテナの環境設定をこのDockerfileに記述します。
- コンテナ
仮想マシンでは、ホストOSとは別のOSを動かしますが、Dockerのコンテナは、__PCにインストールされたOS上で直接起動__ します。またコンテナで作られたプロセスは、通常のプロセスと違い、そのプロセスの一部をグループ化して隔離された空間上で動かすことができます。
- DockerHub
プログラムソースを共有するためのサービスとしてGit Hubがありますが、そのDocker版だと思って問題ありません。

# 終わりに
Dockerは開発をする上で非常に便利なツールです。私の職場でもDockerを使用しており、開発環境の構築に非常に便利ですので、Dockerについて基礎的な知識を身につけておくことは非常に有用だと思います。
最後までお付き合いくださりありがとうございました。
VPSの設定に関するメモ

# VPSの設定に関するメモ
サーバー設定で詰まったところをメモがてら。
使用OS：ubuntu 20.04.5 LTS
## OSの更新確認とアプデ
~~~:更新を確認
sudo apt update
~~~
~~~:更新をインストール
sudo apt upgrade
~~~
## 日本語言語パック導入
~~~:
sudo apt -y install language-pack-ja-base language-pack-ja ibus-mozc
~~~
~~~:
sudo update-locale LANG=ja_JP.UTF-8 LANGUAGE=ja_JP:ja
~~~
## (必要に応じて)タイムゾーン変更
~~~:
sudo dpkg-reconfigure tzdata
~~~
## Apache導入
~~~:インストール
sudo apt install apache2
~~~
~~~:サーバー再起動時にapache自動実行
sudo systemctl enable apache2
~~~
## ファイアウォール設定
~~~:インストール
sudo apt install firewalld
~~~
PythonからWatson Queryへ接続する

# はじめに
データ仮想化サービスであるWatson Qeuryに、Pythonから接続して操作する方法を説明する。
ライブラリとして、[ibm-db](https://pypi.org/project/ibm-db/#description)を利用する。

# 背景
Watson QueryはDb2/LUWと同様の認証・ライブラリを利用する一方で、Watson QueryはAPI認証でありユーザーID/パスワードを利用した認証は指定できない。
API認証によるibm-dbの設定手順について説明した記事が見当たらなかったため、当記事を作成した。

# 手順概要
1. Watson Queryの認証情報を取得する
1. 認証情報をサンプルプログラムに転記する
1. サンプルプログラムを実行する

# 手順詳細
1. Watson Queryの認証情報を取得する
    1. Watson Queryサービスにアクセスする
    1. サービス資格情報 →  新規資格情報をクリック![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/8096bd01-d649-a575-895d-964941978c81.png)
    1. 任意の名前を付けて追加をクリック ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162686/da6aa9b6-8d8f-8906-73de-baa82e2c9dc8.png)
    1. 作成された資格情報の中で、以下の値をメモする
        1. APIKEY : 資格情報ファイル.apikey
        1. DB名 : 資格情報ファイル.connection.legacy.database
        1. ホスト名 : 資格情報ファイル.connection.legacy.hosts[0].hostname
        1. ポート : 資格情報ファイル.connection.legacy.hosts[0].port
1. 認証情報をサンプルプログラムに転記する
```python:wq_query.py
import ibm_db, ibm_db_dbi as dbi
import pandas as pd

def wq_sql(sql_query_wq):
    conn_str_wq = 'DATABASE={};HOSTNAME={};PORT={};PROTOCOL=TCPIP;Security=SSL;Authentication=GSSplugin;APIKEY={};' \
        .format(
            <DB名>,
            <ホスト名>,
            <ポート名>,
            <APIKEY>
        )

    conn_handler_wq = ibm_db.connect(conn_str_wq, '', '')
    trial_connection_wq = dbi.Connection(conn_handler_wq)

    df_prep=pd.read_sql_query(sql_query_wq, con=trial_connection_wq)
    print(df_prep.head())


query = <SQLクエリ>
#query = "select * from syscat.tables;"
wq_sql(query)
```
3 . サンプルプログラムを実行する
```python: 結果
  TABSCHEMA               TABNAME     OWNER  ... EXTENDED_ROW_SIZE PCTEXTENDEDROWS REMARKS
0  SYSIBM          SYSLIBRARYAUTH  SYSIBM    ...                 N            -1.0    None
1  SYSIBM          SYSEVENTTABLES  SYSIBM    ...                 N            -1.0    None
2  SYSIBM    SYSROUTINEPROPERTIES  SYSIBM    ...                 N            -1.0    None
3  SYSIBM             SYSCOMMENTS  SYSIBM    ...                 N            -1.0    None
4  SYSIBM         SYSSEQUENCEAUTH  SYSIBM    ...                 N            -1.0    None

[5 rows x 85 columns]
```
GameplayEffectメモ

# GamePlayEffectを継承したBPを作成してパラメータを設定する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/2456e61d-02d1-db23-5120-c80828d55a03.png)



Attribute　：なんのパラメータを変更するか
ModifierOp ：どう変更するか
Modifier Magnitude：どのぐらい変化するか

# 使用方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249684/290e6c55-3eec-3482-379d-9a37774b46af.png)

AbilitySystemComponentのMake Outgoing SpecでGPEを設定しApplyGameplayEffectSpecToSelfで適応
Field Service Mobile フローの作り方

# Field Service Mobile用のフロー

融通がきかない！？Field Service Mobileもこれで解決！？
Field Service Mobileにフローを追加する方法を簡単にまとめてみました。

## フローを作成（Field Service Mobile フロー）
何はともあれ、フローを『Field Service Mobile フロー』として作成します。

![FSL_MobileFlow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956449/c395c54a-0dd7-a98f-4b1d-1c98daa58c95.png)

何やら、よく見ると通常の画面フロー、Field Service Mobile フローでは、
ツールボックス、画面要素のコンポーネントの数（できる事）が違う（少ない）ようですね。

![フローの違い.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956449/25eaf09a-733f-1b6f-3acc-c20b0007f9af.png)


## Field Service Mobile Settingsにアプリケーションを拡張

Field Service Mobileで利用するために、
追加したい「Field Service Mobile Settings」に作成したフローを登録します。

設定 - 機能設定 - サービス - Field Service - Field Service Mobile - Field Service Mobile Settings
から、追加したい設定の"詳細を表示"を実行しましょう。

![FSL_Setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956449/28cccbcc-0464-456f-d786-fb113b74fd39.png)


詳細表示の画面下部の『アプリケーション拡張』欄の[新規]ボタンを押します。

![FieldServiceMobileSetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956449/b347c2d3-25a9-3e07-3e20-05ae23ab0f85.png)

| 項目 | 値 |
|:----:|:-----|
|表示ラベル|（Field Service Mobile上での表示ラベル）|
|種別|フロー|
|名前|（よしなに入れて大丈夫））|
|起動値|（該当のField Service Mobile フローのAPI名称）|
|指定オブジェクト種別|（フロー起動元のオブジェクトを指定）<br>作業指示なら WorkOrder<br>サービス予定なら ServiceAppointment|


**これで完了です！**

こんな感じですね。
![IMG_6147.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2956449/1e65af3a-f916-ac64-ac7e-0bd7dd3f7bd4.png)


:::note warn
直ぐに確認したい場合は、詳細設定から「キャッシュされたメタデータをクリア」からのアプリ再起動を忘れずに
:::
【Dependabot】特定のバージョンを無視する方法

## 設定方法

`.github/dependabot.yml`に以下のように記述することで特定のバージョンを無視できます。  

```yml:.github/dependabot.yml
version: 2
updates:
  - package-ecosystem: 'docker'
    directory: '/'
    schedule:
      interval: 'daily'
    ignore:
      - dependency-name: 'node'
        versions: ['~>19.0']
```
Databricks ( Spark ) にて Windows 機種依存文字 を保持しているソースを読み込む場合にはエンコーディングを `ms932` とするのがよさそうという話


## 概要
Databricks ( Spark ) にて Windows 機種依存文字 を保持しているソースを読み込む場合には、エンコーディングを `shift_jis` ではなく、 `ms932` にするのがよさそうと教えていただいた内容を共有します。

機種依存文字 とは、CP932 という Shift_JIS を独自に拡張した文字コードなどで定義されている文字であり、Macなどの他の機種では適切に表示ができない文字のことです。 Windows の 機種依存文字としては次のような文字があるようです。

> ① ② ③ ④ ⑤ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ  ㍉ ㌔ ㌢ ㍍ ㌘ ㌧

Windows 機種依存文字が含まれるファイルを参照する場合には、`shift_jis`で読みこむと文字化けしていしまうため、`ms932` で読むことで適切に読むことができそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/c0dd2dbc-647a-1356-14b2-4eea49b6199c.png)

## 検証結果

### 1. Windows 機種依存文字を含むテキストファイルを生成

Windows 機種依存文字が含まれている可能性あり。

```python
data = [
    {
        '_c0': '① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯  ⑰ ⑱ ⑲ ⑳ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ・ ㍉ ㌔ ㌢ ㍍ ㌘ ㌧ ㌃ ㌶ ㍑ ㍗ ㌍ ㌦ ㌣ ㌫ ㍊ ㌻ ㎜ ㎝ ㎞ ㎎ ㎏ ㏄ ㎡ ㍻ 〝 〟 № ㏍ ℡ ㊤ ㊥ ㊦ ㊧ ㊨ ㈱ ㈲ ㈹ ㍾ ㍽ ㍼  ≒ ≡ ∫ ∮ ∑ √ ⊥ ∠  ⊿ ∵ ∩ ∪ 亜 唖 娃 阿 哀 愛 挨 姶 逢 葵 茜 穐 悪 握 渥 旭 葦 ￢ ￤ ＇ ＂ ㈱ № ℡ ∵ 纊 褜 鍈 銈 蓜 俉 炻 昱 棈 鋹 曻 彅 丨 仡 仼 伀 伃 伹 佖 侒 侊 侚 侔 俍 偀 倢 俿 倞 偆 偰 偂 傔 僴 僘 兊 兤 冝 冾 凬 刕 劜 劦 勀 勛 匀 匇 匤'
    },
    {
        '_c0': '卲 厓 厲 叝 﨎 咜 咊 咩 哿 喆 坙 坥 垬 埈 埇 﨏 塚 增 墲 夋 奓 奛 奝 奣 妤 妺 孖 寀 甯 寘 寬 尞 岦 岺 峵 崧 嵓 﨑 嵂 嵭 嶸 嶹 巐 弡 弴 彧 德 忞 恝 悅 悊 惞 惕 愠 惲 愑 愷 愰 憘 戓 抦 揵 摠 撝 擎 敎 昀 昕 昻 昉 昮 昞 昤 晥 晗 晙 晴 晳 暙 暠 暲 暿 曺 朎 朗 杦 枻 桒 柀 栁 桄 棏 﨓 楨 﨔 榘 槢 樰 橫 橆 橳 橾 櫢 櫤 毖 氿 汜 沆 汯 泚 洄 涇'
    },
    {
        '_c0': '浯 涖 涬 淏 淸 淲 淼 渹 湜 渧 渼 溿 澈 澵 濵 瀅 瀇 瀨 炅 炫 焏 焄 煜 煆 煇 凞 燁 燾 犱 犾 猤 猪 獷 玽 珉 珖 珣 珒 琇 珵 琦 琪 琩 琮 瑢 璉 璟 甁 畯 皂 皜 皞 皛 皦 益 睆 劯 砡 硎 硤 硺 礰 礼 神 祥 禔 福 禛 竑 竧 靖 竫 箞 精 絈 絜 綷 綠 緖 繒 罇 羡 羽 茁 荢 荿 菇 菶 葈 蒴 蕓 蕙 蕫 﨟 薰 蘒 﨡 蠇 裵 訒 訷 詹 誧 誾 諟 諸 諶 譓 譿 賰 賴' 
    },
    {
        '_c0': '贒 赶 﨣 軏 﨤 逸 遧 郞 都 鄕 鄧 釚 釗 釞 釭 釮 釤 釥 鈆 鈐 鈊 鈺 鉀 鈼 鉎 鉙 鉑 鈹 鉧 銧 鉷 鉸 鋧 鋗 鋙 鋐 﨧 鋕 鋠 鋓 錥 錡 鋻 﨨 錞 鋿 錝 錂 鍰 鍗 鎤 鏆 鏞 鏸 鐱 鑅 鑈 閒 隆 﨩 隝 隯 霳 霻 靃 靍 靏 靑 靕 顗 顥 飯 飼 餧 館 馞 驎 髙 髜 魵 魲 鮏 鮱 鮻 鰀 鵰 鵫 鶴 鸙 黑'  
    },
]
 
df = spark.createDataFrame(data)
df.display()
 
path_2 = "dbfs:/test/shift.txt"
df.write.format('csv').mode('overwrite').option('encoding', 'ms932').save(path_2)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/4103e568-851c-2824-e65b-227997e4bd4d.png)


### 2. エンコードを`shift_jis` で読み込む

```pythoh
df_2 = spark.read.format('csv').option('encoding', 'shift_jis').load(path_2)
 
df_2.display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/0636d0c7-dba4-8afe-a5cb-9a50a0c56420.png)

### 3. エンコードを`ms932` で読み込む

```python
df_3 = spark.read.format('csv').option('encoding', 'ms932').load(path_2)
 
df_3.display()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/9680b598-5db8-099f-8f70-1145cbcac2de.png)


### 4. 作成したリソースを削除

```python
dbutils.fs.rm(path_2, True)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/5737a84c-0dfa-8e52-8016-f1f3dea315bd.png)
AtCoderでレートが2000を超えました。

 ## AtCoderで黄色になりました
 ### はじめに
タイトルにもある通りAtCoderでレートが2000に到達したでのでそれまでにやったアルゴリズムとかいろいろ文章にしました。
![IMG_1889.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883763/2534ec1b-16c1-c287-e738-f766ccd84500.jpeg)

 ### 黄色になるまでにやったこと
- セグ木/遅延セグ木
- dp
- dijkstra
- UnionFind
- 累積和/繰り返し二乗法などの初歩的なもの

### セグ木/遅延セグ木について
セグメント木はソラで書けます（多分）が、遅延評価付きのセグメント木はソラで書けません。ライブラリを使っています。下にあるような記事を読むといいと思います。

https://algo-logic.info/segment-tree/

https://rsk0315.hatenablog.com/entry/2020/07/05/184929

https://tsutaj.hatenablog.com/entry/2017/03/30/224339

 ### dpについて
ABC-C/Dくらいでdpは頻出なのでその辺を速く書けると嬉しくなれるかもしれません。最近は添え字をミスらないようにコメントアウトでメモしています。
例
```cpp
\\dp[i][j]:i番目まで見て総和がjの通り数
for(int i=0;i<n;i++){
  for(int j=0;j<=m-a[i];j++){
    dp[i+1][j+a[i]]+=dp[i][j];
  }
}
```

 ### dijkstraについて
私はBFSやDFSをまともに書けないのでdijkstraライブラリを貼ってごまかしています。C++なのでlogがついてもセーフ！をしています（良くない）。
この辺の記事を読むと良いかもしれません。

https://algo-logic.info/dijkstra/

http://www.deqnotes.net/acmicpc/dijkstra/

 ### UnionFindについて
自分のライブラリを持っているんですがACLでいいと思います。あとはABC-D/Eくらいで連結成分の個数みたいなのが答えに関係してくる時は使う可能性が高いと思ってます。グリッド上のBFSで到達可能か判定するみたいなやつも最短経路を求める必要がなければUnionFindでサボれます（参考:ABC276-Eなど）。

 ### その他いろいろ
A問題B問題みたいなのをいかにはやく書くかみたいなのは大事だと思っていて、タイピング速度が遅いのでなるべく簡潔に書けそうな実装を選ぶようにしています（XORとかはA問題で割と有用）。

 ### さいごに
ARCで青落ちしないようにがんばります。少しでも同じような競技プログラマーの参考になれば幸いです。
vimでバイナリ編集 画像に文字列を埋め込む


### ファイルの開き方
```bash
$ vim -b sample.txt
```

### 16進数への変換
```bash
:%!xxd
```

### 変換したファイルをもとに戻す
```bash
:%!xxd -r
```

## 実践
以下の画像ファイル（スクショでOK）を用意します
ファイル名は`icon.png`
![icon-original.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/786d0772-38ea-f849-a4bc-24f2a87a9071.png)

```bash
$ vim -b icon.png
```
開くとよくわからない文字列↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/77f4ac9b-8450-8034-418c-cc97a1ddc699.png)

```bash
:%!xxd
```
実行するとバイナリ（16進数）が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/1aa22eac-c171-7a8b-b6ff-6f5e0319e72e.png)

一番下の行を以下のように変更してあげる
変更前 | 変更後
--- | ---
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/21810039-139f-d9e4-7d70-bc97704bc432.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/8bd7ec9c-d2aa-3f90-1144-2109872d69f7.png)

```bash
:%!xxd -r
```
で元の形式に戻してあげる

ここで、再度バイナリにすると
```bash
:%!xxd
```
以下のように「OSAOSA」という文字列が表示されるようになっている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/1cdfe80b-7ec5-562d-fdde-24b603751929.png)

これで、見た目は変わらないけど、「OSAOSA」という文字列の入った画像が完成
![icon-original.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562718/e72c6098-e055-7b4d-6032-7218a58ef1d3.png)


### 補足

ちゃんと`strings`コマンドで「OSAOSA」を確認できる！
```
$ strings icon.png

IHDR
FiCCPICC Profile
aa``
FF^L^L
eXIfMM
ASCII
Screenshot
pHYs
iTXtXML:com.adobe.xmp
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 6.0.0">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""
            xmlns:exif="http://ns.adobe.com/exif/1.0/">
         <exif:PixelYDimension>168</exif:PixelYDimension>
         <exif:PixelXDimension>444</exif:PixelXDimension>
         <exif:UserComment>Screenshot</exif:UserComment>
      </rdf:Description>
   </rdf:RDF>
</x:xmpmeta>
iDOT
^LUIDATx
S!6
(RZ5?
'v]t,
+@x12
...
OSAOSA
```


### 参考
https://kaworu.jpn.org/vim/vim%E3%81%A7%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E6%89%B1%E3%81%86