OmniAICreator/Qiita-1.07M huggingface dataset:
コピペで出来るDjangoアプリケーション開発環境構築（その３）

# はじめに

https://www.udemy.com/share/103OHY3@Hp1LP8z4636rKvwf7s6WkJUqqjnfnoWk1ugFKS8PxdYwWkOnNH9OsoDQnZhF7KisUg==/

この講座を見てDjangoの勉強をしています。
今後の開発のために簡潔に開発の流れをまとめました。

その３です。
ここでは`templates`フォルダの移動の仕方を学びます。

[その１](https://qiita.com/scythercas/items/e96b70aeab4698065dfb)
[その２](https://qiita.com/scythercas/items/f960a50b3639e864aae2)

# 開発環境構築の流れ（続き）
## `templates`フォルダを移動する

### 外側の`sample_project`内に`templates`フォルダを作成する

### さらに`templates`フォルダ内にさらに`index.html`を追加する

```index.html
<h1>移動できた</h1>
```

### `settings.py`を修正する
先ほど作成した`templates`フォルダ内を参照するようにしていきます。

14行目くらい
```diff_python
from pathlib import Path
+ import os
```
↑下の記述に必要

17行目くらい
```diff_python
BASE_DIR = Path(__file__).resolve().parent.parent
+ TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
```
イメージは下のような式と同じ。

`TEMPLATE_DIR = "BASE_DIR/templates"`

`BASE_DIR`内の`templates`フォルダを**デフォルト**で認識してくれるようにしたい。
その設定に用いるパラメータ`TEMPLATE_DIR`を設定した。

そして下の変更で実際に設定する。

59行目くらい
```diff_python
TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
-       "DIRS": [],
+       "DIRS": [TEMPLATE_DIR,],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]
```

### `views.py`を修正する
```diff_python
def index(request):
-   return render(request, 'appapp/index.html')
+   return render(request, 'index.html')
```
自動で`templates`フォルダを見てくれるようになっているので、`templates/index.html`などとしない。

## 実行確認
```terminal
$ python manage.py runserver
```
urlの末尾に`sample_app`と追加して実行。「移動できた」と表示されればおｋ

## 今後のために少し変更
`templates`フォルダの直下に`index.html`ファイルを置いていたが、もう1階層下げる。

### `template_app`フォルダを作成し、その中に`index.html`を移動する

### `views.py`を修正する
```diff_python
def index(request):
-   return render(request, 'index.html')
+   return render(request, 'template_app/index.html')
```

## 実行確認
```terminal
$ python manage.py runserver
```
urlの末尾に`sample_app`と追加して実行。「移動できた」と表示されればおｋ
③Layout Editor　Cellについて

今回はlayouteditorで重要となるCellについて紹介し、
Cellの配置まで行ってみる。

layouteditorでは複数のcellを用意して、様々な図形を別々に管理できる。これにより、マスクを設計する際に1カ所に全てを作り込む必要が無く、マスクのアライメントマークや微細なパターンをそれぞれ別々に管理することができる。

それではまず、Cellを実際に作ってみよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039522/87e67b69-7c1f-ad2d-6708-a14ba97d0dab.png)
画面上のDisplayed cellを右クリックし→New Cellをクリック→
no name 1というCellが作成された。
Cellの名前を変更することもできる
ドロップボックスから変更したい名前のCellを選択→右クリック→Cell name...→名前を打ち込む

それでは次にCellの配置をやってみよう。

準備として先ほど作成したno name 1という名前のCellに位置（0.0）半径200umの円を描き、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039522/67f99570-690d-cc22-e1b9-8e19fcf82bbd.png)
no nameというCellに１辺の長さが10umの正方形を描く。
この時、それぞれの図形のlayerを分けておくと配置後に分かりやすい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039522/a4c17c8c-edcb-8f73-9dd1-353406ad6172.png)

準備が整ったのでCellの配置を行ってみる。
no name1のCellでキーボードのaを押すと次の様な画面が出る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039522/0dae5607-ab01-45a6-fe91-6a4b570f4141.png)
その中からno nameを選択→repeatのｘとｙをそれぞれ10に変更→OKを押す→マウスを適当にドラッグすると10×10の図形が配置された。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039522/3f1e23f1-1539-a52e-bf5e-198700a98132.png)

Cellの配置を用いることで、他のCellに含まれる図形を複数配置することができる。これはマスクの作成において非常に強力で、微細なパターンを別のCellで準備しておいて、本番のCellに配置することが可能となる。更に強力な点は、配置されたCellは常に元のCellを参照しているため、元のCellに変更を加えれば配置したCellすべてが変更されることである。

ここまでCellについて紹介してきたが、注意すべき点がある。それは、Cellではbooleanを用いることができないということだ。そこで配置したCellに対してBooleanを用いる際にはCell Flatをかましてやる必要がある。Cell上で右クリックをすると、Cell Flatが表示される。これをクリックするとCellrefallay>Cellref>図形というように変換されていく。図形まで変換できればBooleanを用いることができるというわけだ。

今回はここまで！そろそろlayouteditorのマクロについて勉強を始めてみようかと思っております。

それではまた～
第9回 Try English LT! for engineers 発表資料まとめ

# Try English LT! for engineersとは？

エンジニア向けの英語のみのLTイベントを行なっています！
発表テーマはエンジニア向けの内容であれば自由です。
英語でLTをやるとなると、中々ハードルが高く、 参加者が海外の人ばかりだと、なおさら難しく感じると思います。
ちょっと自信はないけど、 英語のLTにチャレンジしてみたいという人にぜひ発表してもらいたいです。
英語が好きなエンジニア同士で交流できるイベント運営ができればと思っています。

第9回イベントページ
https://try-english-lt.connpass.com/event/267720/

## 発表資料
・Nobu 
What's the difference between SQL and NoSQL?
SQLとNoSQLの違いは何か?
https://docs.google.com/presentation/d/1zOwgGObDCE05RAbTYY8HTpOQohg2uRB9P66mGWGuGVo/edit?usp=sharing

・willsmile　さん
My Learning Plan on IoT
https://speakerdeck.com/willsmile/my-learning-plan-on-iot

・sugiy さん
Onboarding determines the first impression after joining the company! Team onboarding is important!
https://www.figma.com/proto/fj7FJMfpD1mcewEAwrDXge/LT?page-id=1301%3A2850&node-id=1388%3A930&viewport=370%2C112%2C0.5&scaling=contain&starting-point-node-id=1388%3A930

・かきそふと さん
Amazing Documents Converter Application ‘Docurain’
https://kakisoft.github.io/slides/amazing-documents-converter-application-docurain-en/export/index.html

・こーいち さん
Why automated tests is important 
なぜ自動テストは大切なのか
https://www.slideshare.net/secret/LCdiLihIIQafGm

・noel さん
Monitering Web Vitals in our Next.js App
https://speakerdeck.com/ingenieur_noel/monitering-web-vitals-nextjs-d611cdeb-d94f-4478-9848-f1781c99cb06

・heisy さん
Let's Try Kotlin
https://www.slideshare.net/HideyukiSASAKURA/lets-try-kotlin
IBM i ACS のMacBook Air M2 2022へインストール

久々に MacBook に **IBM i ACS** をインストールしたので、備忘録として。

- 機種：MacBook Air M2 2022
- macOS:Ventura 13.0（22A380）

## TL;DR
1.ACSのダウンロード [IBM i Access - Client Solutions ページの（Downloads for IBM i Access Client Solutions）](https://www.ibm.com/support/pages/ibm-i-access-client-solutions)
2.**IBMiAccess_v1r1.zip** 展開
3.ターミナル起動（Finderで実行しても何も起きません）
4.インストール・スクリプト実行 `~/Downloads/IBMiAccess_v1r1/Mac_Application/install_acs`
5.スタート・スクリプト実行 `~/Downloads/IBMiAccess_v1r1/Start_Programs/Mac_i386-32_x86-64/acslaunch_mac`※M系もintelと一緒っぽい

M2でも今のところ正常に動いています。
AsyncAPIをシェアする方法について調べた

# はじめに

WebSocketやMqttなどを実務で使うことが増えてきており，
Event駆動アーキテクチャのAPIインタフェースを定義するための手段を探していたところ，
[AsyncAPI](https://github.com/asyncapi) を知りました．

AsyncAPIは，検索がなかなかしづらいネーミングになっていることや，日本語の記事もまだまだ少ないです．
また，「OpenAPIのように stoplight.io でブラウザ経由で簡単に，開発メンバーへシェアする」
ような方法については，日本語では，まとまっていないように見受けられたため，今回簡単にですが記載していみました．

※ 注意：私は組み込み，モバイルアプリ，バックエンドをメインにするエンジニアです．
フロント系の技術には疎いです．より良い方法があればご指摘下さい．

# AsyncAPIとは

他の方になりますが，
[OpenAPIスキーマ互換なAsyncAPIとは？](https://qiita.com/toycode/items/01a58c466232f50db675)
で紹介されておりましたので，こちらをご確認ください．

# いい感じに読みたい
## AsyncApi/generatorで静的ページを生成する

- [asyncapi/generator](https://github.com/asyncapi/generator)

公式機能を使い，htmlファイルを生成．AWS S3などにアップロード・共有するという一番愚直なやり方です．
以下のコマンドで生成できました．

```
cd /path/to/your/workspace
npm install @asyncapi/generator
# globalに入れてもよい．

./node_modules/.bin/ag test.yaml @asyncapi/html-template \
    -o output \
    -p singleFile=true
# デフォルトだと，singleFile=falseで，cssなどが別ファイルになります．
```

また，GithubActionsで，CIを回したいときは， [github-action-for-generator](https://github.com/asyncapi/github-action-for-generator) があるようです．
（Githubを使っていても，組織のポリシーによって利用できない場合は頑張りましょう...）

## AsyncApi/stduio を使う

- [asyncapi/studio](https://github.com/asyncapi/studio)

どちらかといえば，開発向けのツールになりますが，こちらを自社等でホスティングして共有することでもできそうです．
Dockerでも動くので，やんごとなき事情により，静的ページでシェアすることができない場合や，リモートで複数人で手直ししつつの場合などに有用そうです．

[こちら](https://studio.asyncapi.com/) でサンプルを確認できます．`asyncapi/generator` で生成したものと同じ形式になります．

## bump.sh

- [Bump.sh](https://bump.sh/)

[Twitter](https://twitter.com/fmvilas/status/1613799073848475650?cxt=HHwWhIC--aLtruUsAAAA)で何気なくつぶやいてみたら，AsyncAPIのFounderの[Fran](https://twitter.com/fmvilas)から紹介されました．
Bump.shは，OpenAPIとAsyncAPI **どちらにも対応している** サービスです．(強い)
私が所属するチームでは，OpenAPIをStoplightでシェアしていることもあり，AsyncAPIだけでなく，OpenAPIも一括で管理できる非常にありがたいサービスです．
CI周りも手厚いサポートがなされており，GithubActions経由でデプロイもできます．

費用等については，時期により変わるかと思いますが，2023年1月15日現在では，Freeから利用できるようです．（Freeの場合，Privateレポジトリは一つのみという制限付き）

[こちら](https://bump.sh/kabocha/doc/sample) に私のほうでデプロイしたサンプルを公開しておきます．

なお，`asyncapi/generator` で生成されるフォーマットとは異なるようです．
例えばpublish/subscribe以下の `externalDocs` が反映されない，
`schema`の一覧が末尾に表示されないなど，公式との挙動差があるようです．

個人的には，`sample/action/{deviceId}`のような，`channel`ではなく，`summary` をサイドバーにデフォルトで表示してくれる `bump.sh` ほうが好みです．

# 最後に

紹介してくれてありがとうございます．
- https://twitter.com/fmvilas
- https://twitter.com/bump_hq
次世代シークエンサー DRY解析教本 改訂第2版_勉強の足跡その１_ngsdat2のDiseaseGenomeMain中にあるshファイルの解読

お久ぶりです！しゅるれです！

今回のタイトルにある「次世代シークエンサー DRY解析教本 改訂第2版_勉強の足跡」シリーズでは、『次世代シークエンサー DRY解析教本 改訂第2版』の実践編をWSL2上にUbuntuをインストールしてあるPCで一通り実行できるを環境を構築することを目的として、それを達成するまでに勉強した事や構築方法を掲載していきます！

今回は、実践編1「0から始める疾患ゲノム解析 ver2」のNGS解析を行うときに使ったコマンドと、その仕組みの簡易まとめを下記に記載します！

具体的には、ngsdat2のDiseaseGenomeMainの中にあるshファイルに記載されていたコマンドについて調べ、調べた先のサイトからコマンドの仕組みをコピペの形でまとめた物が記載されています！
今回は「010_download-ucsc.sh」から「020_concatinate.sh」の間で、勉強したコマンドです！

何か気になった事がありましたら、連絡いただけると嬉しいです！
よろしくお願いします！

___
[010_download-ucsc.shの中]
・shファイル
　shファイルとは、LinuxなどのUNIX系OSで用いられる
　ファイルの一つで、シェルスクリプトを記録したもの。
　シェル上でコマンドを組み合わせた簡易なプログラムを
　実行させることができる。
　$：変数の展開。${変数}のように、
　　ドルマークの次に続く括弧の中に変数を入れる。
　\(バックスラッシュ)：\は行の継続（この行と次の行をつないでから実行）

　←シェルスクリプト
　　シェルスクリプトとは、OS（オペレーティングシステム）を操作するための
　　シェル上で実行できる簡易なプログラミング言語（スクリプト言語）。
　　また、そのような言語によって書かれた、複数のOSコマンドや制御文などを
　　組み合わせた簡易なプログラム。
　　一般的にはLinuxなどUNIX系OSのシェルで実行できるものを指す。

　　←シェル
　　　シェルとは、コンピュータのOS（オペレーティングシステム）を
　　　構成するソフトウェアの一つで、利用者からの操作の受け付けや、
　　　利用者への情報の提示などを担当するもの。
　　　シェルには、「sh、bash、csh、tcsh、ksh、zsh」などさまざまな種類があり、
　　　Bシェル系とCシェル系に分けることができる。
　　　転じて、OS以外のソフトウェアについても、その操作や表示を
　　　担当する機能やソフトウェア部品などのことをシェルと呼ぶことがある。


・mkdir -p
「mkdir ディレクトリ名」でディレクトリを作成、
「rmdir ディレクトリ名」で空のディレクトリを削除できる。
　-p	--parents	必要に応じて親ディレクトリも作成する

・pushd
　pushdコマンドで移動すると履歴がスタックに残り、
　popdコマンドで簡単に戻ってくることができる。
　cdコマンドで移動すると履歴が残らず、元のフォルダーへ戻るのが面倒。
　cdを利用する場合、元のフォルダーへ戻るには、元の場所を憶えておいて、
「cd 元の場所」というコマンドを実行しなければならない。

・curl　-o
　curl コマンドは様々な通信プロトコルで
　データの送受信を行うことができるコマンド。
　よく使われる方法としては、Web サイトへ http リクエストを
　送信してコンテンツを表示する、等がある。
　また様々なオプションを指定する事でデータ取得時の条件や
　取得する情報を変える事ができる。
　-o：ローカルにダウンロード( -O --remote-name )
　　　出力ファイル名を指定( -o <file> --output <file>)

・mv
　「mv」は、ファイルやディレクトリを移動したり、
　リネームしたりするコマンド。
　「mv ファイル 移動先ディレクトリ」とすると、
　ファイルが指定したディレクトリに移動される。
　異動先にファイル名を指定した場合は、
　「ファイルからファイルへの移動＝リネーム」となる。
　この場合、既存のファイルを指定すると「上書き」となる。

・popd
　pushdコマンドで移動すると履歴がスタックに残り、
　popdコマンドで簡単に戻ってくることができる。

[020_concatinate.shの中]
・cat
　catコマンドとは、主にLinuxなどのUNIX系OSで標準的に使用される
　コマンドおよびプログラムの一つで、標準入力から流れてきたデータを
　そのまま標準出力に流し込むもの。“cat” は “concatenate” （連結させる）の略。
　複数の対象を指定すると、記述した通りの順番に連結して出力する。
　例えば、「cat foo.txt bar.txt>baz.txt」のように
　複数のファイルと出力のリダイレクト先を指定すると、
　入力ファイルを出現順に連結してリダイレクト先に指定したファイルに書き出すことができる。

・../
　「‥」：1つ上の階層のディレクトリ
　「/」：ルートディレクトリ。またはディレクトリ同士の上位・下位の関係

___

ここまで見てくださって、ありがとうございます！

実践編1「0から始める疾患ゲノム解析 ver2」についてはWSL2-Ubuntu上で実行できる環境を構築することが出来ているのですが、そのやり方を改めて文章に書き留めたり分かりやすく表現しようとすると、途端に難しくなりました...
（初めてNGS解析を行う関係で、ディレクトリ構造を予め考えることなく乱雑なまま突っ走ってしまったために、最終的な解析結果が出るあたりではグチャグチャな環境になってしまっていました...）

今回の事を通じて、事前に構造を予測しながら作業を進めることの重要性を認識できる事が出来ました！

記事に解析環境を掲載する際は、このことに気を付けながら分かりやすくなるように心がけたいと思います！

それでは、再来週に次回の記事を投稿しますので、また見てくれると嬉しいです！
【VSCode】マークダウン保存時に目次が自動修正され保存されるのを無効化する

## 結論

VSCodeの`settings.json`に下記のようにコードを追記し保存する。

```json
{
    ... // 他の設定に関するコードは省略。
    "markdown.extension.toc.updateOnSave": false,
}
```

## 解説
マークダウンファイル内の見出しへのリンクを箇条書きリストにした目次のことを**TOC**(**Table Of Contents**)という。
VSCodeの拡張機能`Markdown All in One`をインストールしていて、マークダウンファイル内にTOCを自作していると、マークダウンファイル保存時にTOCを自動修正してくれる。

自動修正後のTOCではなく、自作したTOCのまま保存したい場合はVSCodeの設定ファイル(`settings.json`)で拡張機能**Markdown All in One**のTOCの保存時の自動修正に関する設定項目(`"markdown.extension.toc.updateOnSave"`)に`false`を設定すると、自動修正されないようになる。
TCP/IPの各層ごとの処理

プロトコルスタックを構成する各レイヤーはその上下に接する層と連携して通信処理を行います。

## 送出側の処理とヘッダの追加
データを送り出す側では、
上位層から受け取ったデータを基に、何らかの通信処理を行い、その```通信処理に必要な各種の情報をデータ本体の前に付加```します。これをヘッダと呼ぶ。

### 気づき
ヘッダがついていって大きくなるのか。

```下位層に行くほどパケットの全体のサイズは大きくなります。```

## 送信側の処理とヘッダの削除
データを受け取る側では、下位層から受け取ったパケットに含まれる、```ヘッダ部分の情報を使って必要な通信処理```を行う。
```処理が終えたら使ったヘッダは除去```されるデータ部分だけが渡される。

```上位層に行くたびに、パケットのサイズは小さくなる。```

### 気づき
ヘッダがだんだん除去されるのか。

### TCP/IPによる通信の全体イメージ
送出側は各層の処理を行いヘッダをつけて、最終的に```イーサネットフレーム```を作る。
それで受信側に送る。
受信側は、各層の処理をしてヘッダを除去し、最終的にアプリケーションプログラムに渡す。

#### 気づき
イーサネットはTCP/IPにおいて最下位なのか。

## イーサネット
インターネットは世界中で幅広く利用されている```ネットワーク（ハードウェアと通信方式)の規格```
今日のコンピューターに搭載されている```有線のネットワークインタフェースはほぼ100%がイーサネット```。

### イーサネットの規格
通信速度と通信媒体が異なる複数規格があります。代表的なものは
* 100BASE-T
* 100BASE-TX
* 1000BASE-T
* 10GBASE-T

左の数字が```Mbps```,```Gbps```で表した通信速度
右端のTまたはTXは```銅のより線```を使用することを意味します

# イーサネットの転送の仕組み
イーサネットではフレームにしてそれを```電気信号や光信号に変換して通信媒体に送り出します```。

### 関連記事　イーサネットヘッダ
https://shinmeisha.co.jp/newsroom/2020/06/09/%E3%82%A4%E3%83%BC%E3%82%B5%E3%83%8D%E3%83%83%E3%83%88%E3%83%98%E3%83%83%E3%83%80%E3%81%AE%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%81%A8%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%9F%BA/

# 出典
https://www.sbcr.jp/product/4797386677/

# 感想
頑張ろう。
Socket.io学習①　簡単なチャットアプリの構築３

前回の続きを書いていく。

次にチャット機能を作成するためにクライアント側に簡単なUIを作成した。

```
<div className={styles.container}>
        <h2>チャットアプリ</h2>
        <div className={styles.chatInputButton}>
          <input type="text" placeholder="ちゃっと・・・"/>
          <button>チャット送信</button>
        </div>
      </div>
```

そして、チャット機能を作成するためにまずメッセージを送信するために入力されたメッセージを格納する変数を作成する。

今回使用したのはHooksのUseStateというものである。

```
const [message, setMessage] = useState("");
```

参考にしている動画ではここの記述部分しか見せていなかったが、これだけの記述ではuseStateというものは動作しない。

![Untitled (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2971002/0e4cd4ee-5db1-b63f-b975-dcfed539e373.png)

このようなエラーを起こしてしまう。

エラーの内容を見れば、そもそもuseState自体定義されていない。
残念ながらお手本にした動画には詳しく述べている部分はないので調べてみた。すると、直ぐに解決した。

このuseStateという機能はreactのパッケージの一部のようだ。
そのため、クライアント側の記述の最初のimportの部分に以下のような記述を加えた。

```
import React, {useState} from "react"
```

すると、きちんと動作するようになった。


次に、チャット送信のボタンにonClick関数を指定し、handleSendMessage()という関数を呼び出す。

```
<button onClick={() => handleSendMessage()}>チャット送信</button>
```
そして、コードの上部にhandleSendMessage()を定義していく。

```
const handleSendMessage = () => {
    //サーバーへ送信
    socket.emit("send_message", {message: message});
		setMessage("");
  };
```

socket.emitは前回のブログでも述べたが、クライアントとサーバーの送受信においてonが受信、emitが送信である。
第1引数のこの場合"send_message"はサーバー側の受信の記述と統一する必要があるが、今のところなんでもいい。
そして、先程定めた変数を使用している。

変数の指定の仕方の癖は気になるが今回は流した。
ソケット通信を用いてメッセージを送信している。
ちなみに、setMessage("");という記述は送信後、messageの変数の中身を空にしている。

そして、クライアントからサーバーへ送信したものを今度はサーバー側で受け取る必要がある。
サーバー側のindex.jsに書き加える。

```
//クライアントと通信
io.on("connection", (socket) => {
    console.log("クライアントと接続しました。");

    //クライアントからの受信
    socket.on("send_message", (data) => {
        console.log(data);

    //クライアントへ送信
        io.emit("received_message", data);
        
    });
```

先程も述べたが、クライアント側の送信時に定めた第1引数と同じものを第1引数とする。

この場合、通信が繋がっている場合のみ受信が行われるので通信の処理の一部に受信の記述をする。
そして、受信が行われたときだけクライアント側へ受け取ったデータを送信するので受信の際の処理の一部にクライアントへの送信を記述する。

今度は、サーバーからクライアントへデータの送信が行われたのでクライアント側でデータの受信を行う。

```
//サーバーから受信
  socket.on("received_message", (data) => {
    console.log(data);
    setList([...list, data]);
  });
```

サーバー側の送信の第1引数と統一する。そして、そのデータをチャットなので一覧として記述していく必要があるが今回はまたuseStateを用いてリストへ格納していき後にmap関数を用いて展開してく。

今回リストへ加える際、スプレッド構文というものを用いた。

軽く調べ見ると、

https://qiita.com/akisx/items/682a4283c13fe336c547

リスト内のすべての要素を参照しているのが...(スプレッド)というイメージた。
そして、[...list, data]はlistで定められているリストにdataを加えて新たなリストを作成しているという感じである。

最後に、画面上にリストに入力されたチャットの内容を表示する。

map関数を用いて

```
{list.map((chat) => (
          <div className={styles.chatArea} key={chat.message}>
            {chat.message}
          </div>
))};
```

これはkeyが重複する可能性があるので好ましくないらしいがこれできちんと表示されるようになった。

以上。ご覧いただきありがとうございます。
PHPerが学ぶGo言語② 関数・構造体

豚さんです。
今回は関数・構造体について書いていきます。

Go言語にはクラスが存在しないという事前知識はあり、
代わりに構造体というものが存在するということは
調べて何となく知っている所からスタートです。

まずは、関数の説明を書いていき構造体の説明に移っていきます。

<font color="Red">※ 注意：内容はPHPか何かの言語を書いたことがある方向けなので、
説明を割愛している箇所は多々ありますので、ご了承ください。</font>

**go version go1.19.4 darwin/amd64**

# 1. 関数
前回の記事では、とりあえずmain関数で実行していましたが
どういうことか理解していませんでした。
Go言語はmainパッケージのmain関数で実行されるんですね。
```sample.go
// Goのプログラムはmainパッケージから実行する
package main

import "fmt"

func main() {
	fmt.Println("テスト")
}
```
```
$ go run sample.go
テスト
```

では、関数を作っていきます。
func ○○ が関数です。
```sample.go
// Goのプログラムはmainパッケージから実行する
package main

import "fmt"

// sample(引数 引数の型) returnする引数
func sample(sample string) string {
	return sample + "関数を実行しました"
}

func main() {
	// sample関数呼び出し
	fmt.Println(sample("サンプル"))
}
```
```
$ go run sample.go
サンプル関数を実行しました
```

複数returnする場合は以下の様に記載します。
```sample.go
package main

// int型をstring型にキャストするためのパッケージ
import "strconv"

import "fmt"

// sample(引数 引数の型) returnする引数
func sample(sample string, num int) (string, string) {
	num_string := strconv.Itoa(num)
	return sample, num_string
}

func main() {
	// sample関数呼び出し。
	// 戻り値は2つのため、sample, num_stringとする
	sample, num_string :=  sample("サンプル", 1)
	fmt.Println(sample + "関数は" + num_string + "回実行しました")
}
```
```
$ go run sample.go
サンプル関数は1回実行しました
```

もし、第一引数がいらない場合、ブランク変数(_)を使います。
```sample.go
package main

import "strconv"
import "fmt"

func sample(sample string, num int) (string, string) {
	num_string := strconv.Itoa(num)
	return sample, num_string
}

func main() {
	// この場合、num_stringにのみ値が入る
	_, num_string :=  sample("サンプル", 1)
	fmt.Println("関数は" + num_string + "回実行しました")
}
```
```
$ go run sample.go
関数は1回実行しました
```

...を使えば可変引数を利用可能です。
```sample.go
package main

import "fmt"

// numに複数の数値が入る
func sample(num ...int) {
	fmt.Println(num)
}

func main() {
	// 複数引数を指定可能
	sample(1, 2, 3, 4, 5)
}
```
```
$ go run sample.go
[1 2 3 4 5]
```

※ 個人的にsample関数でnumをreturnしたいですが、
やり方はまだ見つかっていません。

# 2. 構造体(struct)
type ○○ struct で構造体を作成します。
```sample.go
package main

import "strconv"
import "fmt"

// メンバ変数定義
type Palculation struct {
	means string
	num int
}

// ③set.でstructのmeansとnumを呼んで値設定
// *struct名 で記載
func (set *Palculation) setPalculation(means string, num int) {
	set.means = means
	set.num = num
}

// ⑤
func (get *Palculation) getPalculation() {
	get.num += 5
	num_string := strconv.Itoa(get.num)
	fmt.Println(get.means + "の結果は" + num_string + "です")
}

func main() {
	// ①palculationにstructを入れる
	var palculation Palculation

	// ②上記の関数を呼び出す
	palculation.setPalculation("足し算", 1)
    // ④ 
	palculation.getPalculation()
}
```
```
$ go run sample.go
足し算の結果は6です
```

# 参考
ありがとうございました。

https://www.tohoho-web.com/ex/golang.html

https://qiita.com/gorilla0513/items/7e734c4e0680b5ea341d
react 

ライブラリの型定義エラーは　インストールで解決

handleAddition


参照渡し


prisma datebase

新しいタグは新規のテーブル作成する必要があるが、
既存のタグは作成する必要がない

create使用して
Promise.all


letで定義しておくことでスコープ外でも使用できる
フレームとは

# フレームとは
ネットワークインタフェースの規格の一つである```イーサネットでは、同じようにデータを小分けしたもの```。

### 呼び方の違い
* ```ハードウェアと密接な関係にあるもの```をフレーム
* ```ソフトウェアでの処理が中心となるもの```をパケット

### 気づき
パケットとフレームはほぼ同じなんだな。
そもそもパケットはどのようなものだったか。
あと　イーサネットも忘れた。

# 利用効率が良いパケット交換
通信において、```あるデータを目的の相手に向けて送り出すこと```を```交換```と言います。

## 交換の方法
### 今まで
通信回線そのものを繋ぎかえる方式を```回線交換```と呼びます。
回線そのものを相手に繋ぐため、その回線は```相手との間で占有```して使用できる。
しかし
データのやり取りを休んでいる時は、```無駄に占有している状態```となる。

### 近年は
やり取りしたいデータを、```パケットと呼ばれる小さなサイズのデータ```に小分けして、それを```共用の通信回線```に載せて運びます。
自分と相手は通信していなくても、他の人がそれを使うことができ、通信の効率を高めることができる。

## パケットの中身
データを```一定のサイズに小分け```し、その前に```ヘッダを付加```した形を取ります。

# 出典
https://www.sbcr.jp/product/4797386677/
Webサーバーをプライベートサブネットに配置して、ALBを経由してアクセスできるようにする

タイトルのような構成を作ってみたら、はまったところがあったので備忘録として残しておきます

# はじめに
Webサーバーを作成するとなった場合、普通は以下のような構成が思いつくと思います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1471959/1c8a01e5-f587-4490-269c-f030dab8f64c.png)

ただ、ALBがパブリックサブネットにありさえすれば、WebサーバーをプライベートサブネットにおいてしまってもOKです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1471959/495b15de-9522-aa41-b44e-ef5f69c4d3b4.png)


上記のような構成を作ってみたので、簡単な手順とはまりポイントを書きます

**ちなみに先に行っておくと、上記の構成には間違いがあります**
**記事に最後に記載していますが、間違いはどこでしょうか？**


# 作成手順
すべてマネジメントコンソール上で作成しています
詳細は、以下のページと同じなので概要だけ記載します

https://dev.classmethod.jp/articles/introduction-to-aws-networking-and-autoscaling-web-server/

## NW周りの設定
以下のコンポーネントを作成します
- VPC
    - パブリックサブネット×2
        - ルートテーブルは以下の2つを設定
            - 宛先：10.1.0.0/24（VPCのCIDR）、ネクストポップ：local
            - 宛先：0.0.0.0/0、ネクストポップ：インターネットゲートウェイ
    - プライベートサブネット×2
        - ルートテーブルは以下の1つのみを設定
            - 宛先：10.1.0.0/24（VPCのCIDR）、ネクストポップ：local
    - インターネットゲートウェイ

## AutoScalingグループの作成とロードバランサーの設定
手順はざっくり以下の通り

- 起動テンプレートの作成
    - AMI：Amazon Linux 2
    - ネットワーク設定
        - HTTPのインバウンドをフルオープンにしたセキュリティグループを設定
    ※効率化するために、ユーザーデータでApacheのセットアップを完了させるシェルスクリプトを設定しています
    （参考：https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/user-data.html#user-data-console ）

- AutoScalingグループとALBの作成
    - AutoScalingグループを作成する画面で、ALBも同時に作成する
        - 起動テンプレートは上記で作成したものを指定
        - ネットワークの設定では、 **プライベートサブネット** を指定
        - ロードバランシングの設定画面で、新しいロードバランサーをアタッチする
            - デフォルトで`Internal`になってしまっているので、`Internet-facing`に変更する
            - サブネットは **パブリックサブネット** を指定
            - ターゲットグループを新規作成する
        - その他の設定はお好みでOK


# 引っかかりポイント
動作確認として、ALBのURLにアクセスしてみる
- `502 Bad Gateway`の表示がされる。。。
- AutoScalingグループの画面では`Healty`なのに、ALBの画面では`Unhealty`になっていた
- 色々と見直してみたところ、Webサービスが起動していないように見える

お気づきの方もいるかもしれませんが、この構成ではインスタンスのユーザーデータに仕込んでいるApacheのインストールが完了しません
なぜなら、プライベートサブネットにあるインスタンスがインターネットに出ることができないからです

**ということで、正解は「NATゲートウェイを追加する」でした**

初歩的な凡ミスでした。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1471959/d99aa532-d01f-95c5-8a00-172aaf55ac48.png)

もしくは、**「S3向けのVPCエンドポイントを作成する」** も正解です

# 最後に
インスタンスをプライベートサブネットに置く場合、セキュリティを気にしている場合が多いと思います
ただ、あまりにも怖がっていると今回のように凡ミスをやらかすかもしれません

プライベートサブネットを使う場合であっても、「インターネットアウトバウンドが必要かどうか、必要なら確保されているかどうか」をちゃんと確認すべきですね

この記事が誰かの役に立てばうれしいです
Pardotスペシャリスト 合格体験記

### きっかけ

社内でPardotの導入プロジェクト（自分担当ではない）が動いたため。
Salesforceへの影響を懸念して取得しました。
Pardotについては、ほぼ触らずに合格した。

### スコア

以下のスコアになった。出題率の高いところ中心に勉強したので、そのあたりが高くなった形。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230829/3662ca5d-cb57-53df-2eb7-ee3b75408ad9.png)

### 勉強期間

2022.12〜2023.01の約1ヶ月

### 勉強方法

以下の問題を何周もして、80％解けるようにする
ただ、同じ問題でも回答が違うので、そこは調べる必要あり。

https://keneloper.com/salesforce-certified-pardot-specialist-exam-questions-2/

https://www.jpnshiken.com/qa/Salesforce.Pardot-Specialist-JPN.v2022-12-10.q98/%E9%9B%BB%E5%AD%90%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%AE%E7%B7%8F%E6%95%B0%E3%81%8B%E3%82%89%E3%83%8F%E3%83%BC%E3%83%89%E3%83%90%E3%82%A6%E3%83%B3%E3%82%B9%E3%81%A8%E3%82%BD%E3%83%95%E3%83%88%E3%83%90%E3%82%A6%E3%83%B3%E3%82%B9%E3%82%92%E5%B7%AE%E3%81%97%E5%BC%95%E3%81%84%E3%81%9F%E3%82%82%E3%81%AE%E3%82%92%E8%A1%A8%E3%81%99%E3%83%AA%E3%82%B9%E3%83%88%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88%E3%83%A1%E3%83%88%E3%83%AA%E3%83%83%E3%82%AF%E3%81%AF%E3%81%A9%E3%82%8C%E3%81%A7%E3%81%99%E3%81%8B

https://salesforce-certification-hack.com/317/

### 試験受けた感想

以下の問題を何周もして、80％解けるようにする
ただ、同じ問題でも回答が違うので、そこは調べる必要あり。

あと試験問題の日本語が、ちょっとおかしいなーと思ったりもした。
bashで指定パス以下のファイルのIPアドレスを任意のものに変更したい

# はじめに
タイトルの通り。
指定フォルダ（再帰あり）以下のファイルにおけるIPアドレスをコマンド引数で指定IPアドレスに変更するシェルスクリプトサンプル。
環境別で毎回ファイル内のIPを変更するのが面倒な時なんかに使ったら良いのかと。


# 確認環境(一応)
- windows10 pro
- wsl2(20.04.5 LTS (Focal Fossa))
※Linux系のOSなら大抵なんでも大丈夫かと、、
※あと改行はLFで、、

# ソース
```bash:ip_replace.sh
#!/bin/bash

# IPアドレス置換
# 
# 実行方法
#   bash ip_replace.sh 192.168.1.100 
#     or
#   bash ip_replace.sh 192.168.1.100 ./folder
# コマンド引数:
#   $1: 置き換え後IPアドレス
#   $2: 対象フォルダ（省略時はカレントフォルダ）
# output:
#   置換後ファイル

# 引数が1つの場合はカレントフォルダ以下が対象
if [ $# = 1 ]; then
    folder="."
# 引数が2つの場合は指定フォルダ以下が対象
elif [ $# = 2 ]; then
    folder=${2}
# 引数が1or2以外の場合は引数エラー
else
    echo "Args Error"
    exit
fi

# 指定フォルダに対して変更をかける(拡張子はお好みで)
find "${folder}" -regex ".*\.\(ini\|xml\|json\|yml\|conf\)$" -type f -print0 | xargs -0 sed -i -E "s/[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}/${1}/g"
```


# 実行(コメントに書いてますが)
例）IPアドレスを 192.168.1.100 に変更したい
```
./ip_replace.sh 192.168.1.100 
```
or
```
./ip_replace.sh 192.168.1.100 ./folder
```


# 参考

https://qiita.com/somat/items/b775f7e082f1559707e2

https://armadillo.atmark-techno.com/blog/15992/12700

https://it-ojisan.tokyo/sh-arg-check/

# さいごに
gitのプロジェクトとかにかけると、ファイル破壊するので拡張子指定は必須
【物体検出2023】YOLO最新版のYOLOv8を試してみる

# はじめに

物体検出でお馴染みのYOLOシリーズの最新版「YOLOv8」について、動かしながら試していきます。YOLOv8は2023年1月に公開された最新バージョンであり、速度と精度の面で限界を押し広げています。Google colabで簡単に最新の物体検出モデルを実装することができますので、ぜひ最後までご覧ください。

# YOLOv8とは

YOLOv8は2023年1月に公開された最新バージョンであり、既存のオブジェクト検出器を上回り、速度と精度の面で限界を押し広げています。物体検出だけでなく、セグメンテーションタスクや画像分類タスクでも利用することができます。

![yolo-comparison-plots.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1559455/c3170e0a-0676-0aa1-c819-2c9455350408.png)

YOLOv8のベンチマーク結果は以下となっています。

物体検出モデル
![yolov8_d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1559455/45927efb-70e5-f64b-5d2b-47efda49980a.png)

セグメンテーション
![yolov8_s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1559455/0a29d0eb-4b35-f268-c449-ba349b03e642.png)


詳細は以下のリンクよりご覧ください。

https://github.com/ultralytics/ultralytics

なお、ライセンスは「GNU General Public License v3.0」となっています。

# YOLOv8の導入

早速YOLOv8を使って動かしていきましょう。
ここからはGoogle colabを使用して実装していきます。
まずは「ランタイムのタイプを変更」→「ハードウェアアクセラレータ」をGPUに変更して、GPUが使えるようにしましょう。
GPUの設定が終わったら、Googleドライブをマウントします。
```ruby:python
from google.colab import drive
drive.mount('/content/drive')
%cd ./drive/MyDrive
```
公式よりcloneしてきます。

```ruby:python
!git clone https://github.com/ultralytics/ultralytics
%cd ultralytics
```

次に必要なライブラリをインポートします。

```ruby:python
!pip install -r requirements.txt
```

以上で準備完了です。
YOLOv8を使えるようになりました。

# サンプル画像で試してみる

ここからは推論デモを試してみましょう。まずは学習済みモデルを取得します。
冒頭紹介した通り、いくつかの学習済みモデルがあります。ここでは、最も精度が高い`「yolov8x.pt」`を使うことにします。
```ruby:python
from ultralytics import YOLO
model = YOLO("yolov8x.pt") 
```
次に推論を実施します。サンプル画像が用意されていますので、この画像を指定しましょう。引数に`「save=True」`を取ることで、画像を保存することができます。

```ruby:python
results = model("https://ultralytics.com/images/bus.jpg",save=True) 
```

実行すると`「ultralytics/runs/detect/predict」`のフォルダ内に結果が保存されます。

![bus.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1559455/8b82955d-da47-11b6-80a6-d693c8be8af2.jpeg)


高精度で検出できていることがわかります。

# 動画で推論

入力ソースは画像の他に、動画やWebカメラ、スクリーンショットにも対応しています。
ここでは動画の推論の例を紹介します。

```ruby:python
results = model('sample.mp4',save=True) 
```

結果は以下の動画のようになります。

https://youtube.com/watch?v=V9j0sIPWtrA&feature=shares

# セグメンテーション

最後にセグメンテーションモデルも試してみます。
`「task=’segment’」`とすることで、物体検出と同様に推論することができます。

```ruby:python
model = YOLO("yolov8n-seg.pt") 
results = model('bus.jpg',save=True,task='segment')
```
![bus_seg.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1559455/0fe82927-1a13-bd23-1195-b2caace4bc15.jpeg)

動画の推論結果は以下のようになります。

https://youtube.com/watch?v=DBLDPHZVfqg&feature=shares

# まとめ

最後までご覧いただきありがとうございました。
2023年1月に公開されたYOLOシリーズの最新バージョンである「YOLOv8」について、動かしながら試してみました。精度・推論速度ともに向上しており、非常に使いやすいものになっています。
ますます物体検出の活用の幅がさらに広がりそうですね。

ブログではYOLOv8による学習及び推論の方法をまとめていますので、ぜひ合わせてご覧ください。


https://tt-tsukumochi.com/object_detection
Next.jsでMissing "key" prop for element in iteratorのエラー

# Missing "key" prop for element in iteratorのエラー
```
export default function App()) {
  const blogs = [
    { id: 1, title: "タイトル1" },
    { id: 2, title: "タイトル1" }
  ];

  return (
    {blogs.map((blog) => (
      <p>{blog.title}</p>
    ))}
  );
}
```
上記コードで問題なく画面表示されますが、タイトル通りのエラーで怒られます。
keyに関する説明は、公式ドキュメントに記載がありました。

[React 公式ドキュメント](https://reactjs.org/docs/lists-and-keys.html#keys)
> キーは、どの項目が変更、追加、または削除されたかを React が識別するのに役立ちます。要素に安定したアイデンティティを与えるために、配列内の要素にキーを与える必要があります。

# 解消方法
keyにblog.idを入れるとエラーは解消されました。

一意のkeyがない場合、最終手段としてindexを入れるようにすれば良いみたいです。
```
export default function App()) {
  const blogs = [
    { id: 1, title: "タイトル1" },
    { id: 2, title: "タイトル1" }
  ];

  return (
    {blogs.map((blog) => (
      <p key={blog.id}>{blog.title}</p>
    ))}
  );
}
Ubuntu22.04のLXCにLaravelプロジェクトを作成するまで

実施日: 2023/01/15
## 何をする？
Ubuntu22.04のLXC(Linux container)にLaravelのテストプロジェクトを作成してみる。

## 手順
laravelのdocumentには、laravelを入れる前にcomposerとphpをインストールしておいてくれと書いてあるので、まず
```
apt install php
```
でphpを入れる。この時に入ったのはphp8.1。

次にcomposerを入れる。composerの入れ方はここを参考にした(下にコードがありますがコピペでは動きません。下記ページの同様のコードをコピペしてください)。
 https://getcomposer.org/download/

```
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'please check original site') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
```
続いて以下をした(これもcomposerのdocsにある)。
```
sudo mv composer.phar /usr/local/bin/composer
```


これでphpとcomposer入ったかなぁと思って、Laravelのdocumentを見ながらプロジェクトを作成しようと、以下をした。
```
composer create-project laravel/laravel example-app
```
するとエラーが出て、最初は「issue」と書かれたのが2つほど出たが、まずは
```
apt install php-xml
```
して、最初の`create-project`で出来たものを`rm -r example-app`で消してから再度プロジェクトの作成をした。

すると次は、
```
  Problem 1
    - spatie/laravel-ignition[1.0.0, ..., 1.6.4] require ext-curl * -> it is missing from your system. Install or enable PHP's curl extension.
    - Root composer.json requires spatie/laravel-ignition ^1.0 -> satisfiable by spatie/laravel-ignition[1.0.0, ..., 1.6.4].
```
というエラーが出たので、`php8.1-curl`を入れた
```
apt install php8.1-curl
```
で、example-appを削除し、プロジェクトをつくり直すと、画面には
```
 The zip extension and unzip/7z commands are both missing, skipping.
```
という黄色いエラーがいっぱい出たものの、何故かうまく行った(行っているように見えてるだけかもしれない)。

最後に
```
Do you want to remove the existing VCS (.git, .svn..) history? [Y,n]?
```
と聞かれたので、とりあえず今回はテストなので`Y`と答えた。すると
```
 INFO  Application key set successfully.  
```
と出て、良さげな雰囲気で処理が終了した。


で、自分はufwをenableにしているので8000ポートを解放する。
```
ufw allow 8000/tcp
```
その後にプロジェクトのディレクトリに移動しサーバーを起動した。
```
cd example-app
php artisan serve --host 0.0.0.0
```
すると、`http://IP address:8000`でこのページが出た。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327331/f99bd37c-0fe9-067f-af65-4c8994630970.png)

めでたし！
WSL2-UbuntuでPython3.11設定時のMissing lzma WARNINGに対応する

# 概要

WSL2 + Ubuntu20.04 + pyenvという環境で、Python 3.11.1を導入しようとしたところ下記のように　`lzma` についてWARNINGが発生しました。

試そうとしているモジュールがlzmaを使うようなので対処メモを記録します。


# インストールした際の状態
インストール時の出力メッセージです。

```sh
$ pyenv install 3.11.1
Downloading Python-3.11.1.tar.xz...
-> https://www.python.org/ftp/python/3.11.1/Python-3.11.1.tar.xz
Installing Python-3.11.1...
Traceback (most recent call last):
  File "<string>", line 1, in <module>
  File "/home/shinsaka/.pyenv/versions/3.11.1/lib/python3.11/lzma.py", line 27, in <module>
    from _lzma import *
ModuleNotFoundError: No module named '_lzma'
WARNING: The Python lzma extension was not compiled. Missing the lzma lib?
Installed Python-3.11.1 to /home/shinsaka/.pyenv/versions/3.11.1
```

WARNINGメッセージ内容を翻訳するとこんな感じでしょうか。

```
lzmaライブラリがシステム上にないのでlzmaエクステンションはコンパイルされませんでした。
（それでも） Python3.11.1はインストールしました。
```

試しにインポートしてみるとエラーとなります。
Python自体はインストールされているが、 `lzma` モジュールは含まれないので使えない状態のようです。

```sh
$ pyenv local 3.11.1
$ python
Python 3.11.1 (main, Jan 15 2023, 14:55:22) [GCC 9.4.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import lzma
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/home/shinsaka/.pyenv/versions/3.11.1/lib/python3.11/lzma.py", line 27, in <module>
    from _lzma import *
ModuleNotFoundError: No module named '_lzma'
>>>
```
    
# 対処

まずはpyenvから対象バージョンを削除します。

```sh
$ pyenv uninstall 3.11.1
pyenv: remove /home/shinsaka/.pyenv/versions/3.11.1? [y|N] y
pyenv: 3.11.1 uninstalled
```

つぎに`liblzma-dev` パッケージをインストールします。

```sh
$ sudo apt install liblzma-dev
...snip...
Setting up liblzma-dev:amd64 (5.2.4-1ubuntu1.1) ...
```

再度 Python3.11.1をインストールします。
WARNINGなしで完了します。

```sh
$ pyenv install 3.11.1
Downloading Python-3.11.1.tar.xz...
-> https://www.python.org/ftp/python/3.11.1/Python-3.11.1.tar.xz
Installing Python-3.11.1...
Installed Python-3.11.1 to /home/shinsaka/.pyenv/versions/3.11.1
```

lzmaモジュールをインポートしてみます。エラーは発生しません。

```sh
$ python
Python 3.11.1 (main, Jan 15 2023, 15:22:26) [GCC 9.4.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import lzma
>>>
```
VScodeで「10k」が表示された時の対応

<h2>前提条件</h2>
    <ul>
        <li>OS：macOS Monterey</li>
        <li>ターミナルで git をインストール済み（投稿時で version 2.31.0 ）</li>
        <li>本記事では「フォルダ」を「ディレクトリ」と呼称</li>
    </ul>
<h2>解決したい状況</h2>
    <ul>
        <li>VScodeのソース管理ボタンに表示されている「10k」を消したい</li>
        <li>Finder内で隠しディレクトリを表示したい</li>
    </ul>


<h2>考えられる原因</h2>
<p>結論：隠しディレクトリ内に .git ディレクトリが作成されている<br>
<br> .git ディレクトリは、各プロジェクトのディレクトリ配下に作成するのですが、
	誤ってユーザーディレクトリ配下に作成されてしまった結果、大量の差分ファイル（変更ファイル）が出てしまっていた為に変更ファイルの数 10k が表示されていたと思われる。

<h2>解決方法</h2>
<p>主な流れは、「.git ディレクトリの表示」→ 「削除」です。<br>二つの方法があります。</p>

<ol>
    <li>ショートカットで表示　→　削除</li>
        <p>Dock内の Finder を選択し ユーザーディレクトリ を確認。<br>
         ショートカット shift ＋ command ＋ .　で隠しフォルダを表示。<br>
        ※ 隠しディレクトリ名は、薄い黒文字で見えます。<br>
         .git ディレクトリを右クリック削除。</p>
    <hr>
    <li>コマンド入力で表示　→ 　削除</li>
        <p>ターミナルを開き、以下のコマンドを入力し、実行。<br>

    $ defaults write com.apple.finder AppleShowAllFiles TRUE
    $ killall Finder
Dock内の Finder を選択し ユーザーディレクトリ を確認。<br>※ 隠しディレクトリ名は、薄い黒文字で見えます。<br>.git ディレクトリを右クリック削除。<br>　</p>

<p>以下のコマンドで隠しディレクトリを非表示に戻せます。</p>


    $ defaults write com.apple.finder AppleShowAllFiles FALSE
    $ killall Finder

</ol>

<h2>結果</h2>
    <p>VScodeを閉じるまたは、再起動してみてください。<br>ソース管理ボタンに表示されていた「10k」が消えていると思います。</p>

<h2>おわりに</h2>
<p>VScode内のボタン選択で変更の破棄や、rmコマンドでの.gitディレクトリの削除、なぜユーザーディレクトリ内に.gitディレクトリが生成されてしまっていたのか、隠しディレクトリとは何なのか等、割愛した部分があります。</p>
<p>
最後まで読んでいただきありがとうございました。<br>
お互い頑張りましょう！<br>お疲れ様でした。</p>
Node.jsでハッシュ値を生成する

Node.js でSHA1, SHA256のハッシュ値を作成するには、[Web Cryptography APIのdigest メソッド](https://w3c.github.io/webcrypto/#subtlecrypto-interface)を使用します。

もう一つの方法は、[Node.js の Crypto モジュールのcreateHash メソッド](https://nodejs.org/api/crypto.html) を使用します。

## サンプルプログラム(Web Cryptography API版)

SHA1, SHA256アルゴリズムでハッシュ値を生成し、出力するプログラムです。

```javascript
//Web Crypto APIを使用した場合
const { subtle } = require('crypto').webcrypto;

subtle.digest('SHA-1', 'Hello World').then(function(result) {

    const hex = Buffer.from(new Uint8Array(result)).toString("hex");
    console.log('SHA1');
    console.log(hex);
});

subtle.digest('SHA-256', 'Hello World').then(function(result) {

    const hex = Buffer.from(new Uint8Array(result)).toString("hex");
    console.log('SHA256');
    console.log(hex);
});
```

## サンプルプログラム(Node.jsのCryptoライブラリ)

```javascript
//node.js の Cryptoライブラリを使用
const {
    createHash,
} = require('node:crypto');
  
const hash1 = createHash('sha1');  
hash1.update('Hello World');

console.log('SHA1');
console.log(hash1.digest('hex'));

const hash2 = createHash('sha256');
hash2.update('Hello World');

console.log('SHA256');
console.log(hash2.digest('hex'));
```
GitHubActionsのCI/CDで静的解析とUTを行う

## 目次
* [概要](#概要)
* [環境](#環境)
* [設定内容](#設定内容)
* [実行結果](#実行環境)
* [参考](#参考)

## 概要
チームで開発する際は、基本的には開発したものをレビューすると思われます。
本記事は、レビュアーの作業工数削減を目的に、
CI/CDパイプラインに静的解析とテストを組み込み、最低限のチェックを自動で行う内容について記載しております。
※テストは以降UTと略しております。

## 環境
[前回と同様](https://qiita.com/omoikane245/items/3b1e8834b15dd3964e2a)

## 設定内容
* Github Actionsの設定
PRマージ前に静的解析とUTを実行する設定例。
対象ブランチやどのタイミングでキックするかについても設定可能になります。

```pre-merge.yml
name: PR Checks
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - '*'

jobs:
  tests:
    name: Run tests
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Set up JDK 17
        uses: actions/setup-java@v1
        with:
          java-version: 17
      - name: Make gradlew executable
        run: chmod +x ./gradlew
      - name: Run detekt
        run: ./gradlew detekt
      - name: Run test
        run: ./gradlew test
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}
          DATABASE_USERNAME: ${{ secrets.DATABASE_USERNAME }}
          DATABASE_PASSWORD: ${{ secrets.DATABASE_PASSWORD }}
```

## 実行結果
以下のように、レビュー前に必要最低限のチェックを自動で行うことができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534209/1f8c0a14-f230-1eb3-877a-6b24e9076736.png)


なお、静的解析やUTでエラーとなった詳細やそもそもUT等がちゃんと行われているかどうかは、以下のように確認可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534209/ab048e42-44f3-cabf-9df0-826fdf78e078.png)

もちろんエラーを解消させると、マージできるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534209/e12dc78d-0655-16e3-8523-262aa4484f11.png)

※前回投稿した[Docker自動起動](https://qiita.com/omoikane245/items/3b1e8834b15dd3964e2a)はプルリクエストでも同様に展開可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534209/50be0aaa-eb71-e00d-373d-20cd5c228f9b.png)


## 参考
https://docs.github.com/ja/actions
https://qiita.com/vZke/items/868eb9fd5289d2a25660
Splunk: ワイルドカード・正規表現を使用した検索まとめ


###### 実施環境： Splunk Free 8.2.2

### 0. 概要

 Splunk では、ワイルドカードや正規表現を使用した検索が可能です。
今回はその方法についてまとめて紹介します。

###### 対象データ

```Splunk:Splunk
| makeresults count=10
| streamstats count AS CNT
| eval TEST = tostring(CNT * 30, "hex")
| table TEST
```

![WS000387.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/906cccb7-9564-ca10-2be3-1dc0ee56ffa5.jpeg "対象データ")

| TEST |
|:-|
| 0x1E |
| 0x3C |
| 0x5A |
| 0x78 |
| 0x96 |
| 0xB4 |
| 0xD2 |
| 0xF0 |
| 0x10E |
| 0x12C |

### 1. search コマンド - ワイルドカード使用

 search コマンドでは、ワイルドカードとして`*`が使用可能です。
`*`は「0文字以上の任意の文字列」として扱われます。

```Splunk:Splunk
| makeresults count=10
| streamstats count AS CNT
| eval TEST = tostring(CNT * 30, "hex")
| table TEST
| search TEST="0x*C"
```

![WS000388.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/279f654d-2acc-db6e-23e3-bc9967654e7c.jpeg "search_wild")

| TEST |
|:-|
| 0x3C |
| 0x12C |

### 2. where コマンド - ワイルドカード使用

 where コマンドや eval コマンドでは、 LIKE 演算子を使用することでワイルドカードが使用可能です。

ワイルドカードとしては`%`と`_`が使用可能です。
`%`は「0文字以上の任意の文字列」、`_`は「任意の1文字」として扱われます。
一般的なワイルドカードとは使用する文字が異なることに注意してください。

```Splunk:Splunk
| makeresults count=10
| streamstats count AS CNT
| eval TEST = tostring(CNT * 30, "hex")
| table TEST
| where TEST LIKE "0_1%"
```

![WS000389.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/c9c52934-9d4a-a271-ed79-a63c816ff461.jpeg "where_like_1")

| TEST |
|:-|
| 0x1E |
| 0x10E |
| 0x12C |

 LIKE は演算子の他に、関数としても存在します。
書き方が変わるだけで、使用方法はほぼ同じです。

```Splunk:Splunk
| makeresults count=10
| streamstats count AS CNT
| eval TEST = tostring(CNT * 30, "hex")
| table TEST
| where LIKE(TEST, "%x___")
```

![WS000390.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/ebf0be18-72a4-ab6b-8d9c-cdd38c4cf0ee.jpeg "where_like_2")

| TEST |
|:-|
| 0x10E |
| 0x12C |

### 3. where コマンド - 正規表現使用

 where コマンドや eval コマンドでは、 match 関数を使用することで正規表現が使用可能です。
正規表現はかなり多くの表現方法があるので、詳細は以下のサイトを参照してください。

[About Splunk regular expressions](https://docs.splunk.com/Documentation/Splunk/latest/Knowledge/AboutSplunkregularexpressions)

```Splunk:Splunk
| makeresults count=10
| streamstats count AS CNT
| eval TEST = tostring(CNT * 30, "hex")
| table TEST
| where match(TEST, "0x.*[A-C]")
```

![WS000391.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465018/f164a6fc-4b08-8bd8-41bf-4b4050ea7b02.jpeg "where_match")

| TEST |
|:-|
| 0x3C |
| 0x5A |
| 0xB4 |
| 0x12C |
Typescriptを実行するための定義ファイル（tsconfig.json）

<h2>tsconfig.jsonとは</h2>
typescriptはtrans filerなので、ブラウザーで実行させるためにはjsファイルへの変換が必要です。<br>
変換する中で色々なoptionを付与することができます。<br>
tsconfig.jsonにはTypescriptを動かすためのoptionを定義をします。<br>
どの機能(option)を無・有効にするかをtsconfig.jsonで定義できます。
沢山の機能がありますが、以下のデフォルトoptionで問題ありません。

<h2>tsconfig.jsonには何が？</h2>

```typescript
{
    "compilerOptions": {
      "strict": true,
      "lib": [
        "ES2016", 
        "dom"
      ],
      "module": "CommonJS",
      "alwaysStrict": true,
      "noImplicitAny": true,
      "noImplicitThis": true,
      "sourceMap": true, 
      "downlevelIteration": true
    } 
  }
```
・strict
typescript機能をどれぐらい厳しく適用させるかを定義。
Typescriptが提供する機能の中、一番核心的なものはTYPE拡張です。基本的にjsはtypeを記述していません。
jsは状況的にデータのtypeを判断し、自動変換が行われるゆるい体系です。
大規模のpjでjsをtsに変えようとした時に、最初から大量のデータにtypeを付けることは難しいです。
しかし、strictにfalseを付けることにより、plain jsファイルでも問題なく動作し、
最初は1/4・・・次は2/4・・・のようにバッファーを取りながら作業が可能になります。
trueにした場合は、compilerがこの部分はこのように直せと情報を教えます。

・noImplicitAny
strictの下部optionのひつと。jsのtypeは記述していないためcompilerはこれが何のtypeがわからないです。なので、tsで基本的にいずれのtypeでもいいよという意味で"any"typeを付けますが、tureをすると、anyが付けられることができなく、明確にtypeを付けなければなりません。

・sourceMap
tsファイルを実行すると、tsをjsに変換した結果を出力するターゲットdirの中には＊＊.jsと＊＊.js.mapができます。
<b>ここで、＊＊.js.mapがsourceMapのファイルです。</b>
実際に作成したコードはtsであり、browser上ではjsとして動いているので、もし問題が発生した際はcompileしたjs fileでは問題点を特定することはむずかしいかと思います。
<b>ということで、問題点が分かるために原本ファイル(ts)と変換後のファイル(js)を結びつけさせるための連携情報を持っているファイルです。</b>

<h2>sourceMap</h2>
tsconfig.jsonでsourceMapをtrueにして、tsファイルを実行した後のdist構成です。

<img width="400" alt="image1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/5e4eced3-0f8c-3f9a-f0bc-ef9cc9dc1490.png">


distのindex.html中身です。
srcにはtsをjsに変換したファイルが定義されています。
<img width="400" alt="image2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3097775/f60f7c40-6fdb-d541-3e2a-84ca302d3148.png">


＊＊.js.map中身の一部です。tsとjs間の連携情報が定義されています。
```js
{"version":3,"sources":["src/core/router.ts","src/core/view.ts","src/core/api.ts","src/config.ts","src/page/news-detail-view.ts","src/page/news-feed-view.ts","src/page/index.ts","src/store.ts","src/app.ts","../../../../../../../../usr/local/lib/node_modules/parcel-bundler/src/builtins/hmr-runtime.js"],"names":["OVERLAY_ID","OldModule","module","bundle","Module","moduleName","call","hot","data","hotData","_acceptCal
```
<br>
MUI Tyoescript


Typescriptの組み込み方
```javascript
Record<>

```

```<Partial>```
を挟むと、全て？をつけたことと同じ(オプショナル)になる



Object.keys.length
オブジェクトのキーの値が入っているかどうかの確認できる




try catch 

tryでエラーが起きたらキャッチでエラーを出す
　　

.catch((e)=>{
}

try　catch バックエンド側でのエラーをキャッチする必要あり
基本的にデータ取得時はすべて行うとベスト




MUI
snackbar アラートの代わりに良い
➁バッチ処理機能、タスクスケジュール機能（Laravel）

## 始めに
Laravelのバッチ処理機能を実装したので
備忘録として記事にしました。
２部構成となっております。
　➀：バッチ処理機能（https://qiita.com/fuku_rin/items/546494332e666482a9eb）
　➁：タスクスケジュール機能（Laravel機能）

➀から引継ぎついでいる内容となっております。
ご了承願います。

バッチ処理：特定の日時に指定した処理を実行できる処理のこと。
タスクスケジュール機能：Laravel内でバッチ起動の日時を設定することができる機能

## 環境
| 開発環境    |バージョン |
|-----------|------------|
| __Laravel__ | 8.8 |
| __PHP__     | 7.3  |
| __Server__  | Amazon Linux |

## 手順
__1, Kernel.phpの編集設定__
__2, 日時の設定__
__3, cronとの連携設定__

## Kernel.phpの編集
__/app/Console/Kernel.phpを編集していきます。__
（コマンド名等は、別の記事（➀）にて設定したものになります。）
　　→https://qiita.com/fuku_rin/items/546494332e666482a9eb
```php:Kernel.php
namespace App\Console;

use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;

class Kernel extends ConsoleKernel
{
    /**
     * The Artisan commands provided by your application.
     *
     * @var array
     */
    protected $commands = [
        \App\Console\Commands\BatchCommand::class,
    ];

    /**
     * Define the application's command schedule.
     *
     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
     * @return void
     */
    protected function schedule(Schedule $schedule)
    {
        // バッチ処理
        $schedule
            ->command('command:batch')
            ->withoutOverlapping()
            ->everyMinute(); // 一分毎に処理する
    }

    /**
     * Register the commands for the application.
     *
     * @return void
     */
    protected function commands()
    {
        $this->load(__DIR__.'/Commands');
        require base_path('routes/console.php');
    }
}
```

## 2, 日時の設定
Laravel内でバッチ処理が発動する日時を設定できます。
先ほど設定したKernel.phpファイル内で、指定することができます　__↓__
```php:Kernel.php
    $schedule
        ->command('command:batch')
        ->withoutOverlapping()
        ->everyMinute();  // 一分毎に処理する
```
スケジュールオプションに関しては、こちらをご覧ください。

https://readouble.com/laravel/8.x/ja/scheduling.html#:~:text=Laravel%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%A9%E3%81%AF,%E8%B1%8A%E3%81%8B%E3%81%AB%E5%AE%9A%E7%BE%A9%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

## 3, cronとの連携

Laravelプロジェクト配下にテキストファイル（cron.txt）を作成します。
```:cron.txt
* * * * * cd プロジェクトのパス && php artisan schedule:run >> /dev/null 2>&1
```

__cronとの連携__
```
// ファイルからcron設定の追加
$ crontab cron.txt

// cronスケジュール済み一覧確認
$ crontab -l
```

以上で、設定完了になります。

__おまけ__
cronファイル直接編集する場合
```
$ crontab -e
```
注意：cronファイルスケジュール済みデータ削除する場合
```
$ crontab -r
```

## 終わりに
最後までご覧いただきありがとうございました。
ご指摘、ご意見ありましたらコメントいただけますと幸いです。

## 参考資料
Laravel 8.x タスクスケジュール

https://readouble.com/laravel/8.x/ja/scheduling.html#:~:text=Laravel%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%A9%E3%81%AF,%E8%B1%8A%E3%81%8B%E3%81%AB%E5%AE%9A%E7%BE%A9%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

Laravelのタスクスケジューラを使う

https://qiita.com/toontoon/items/777c427345780411da8b#cron%E7%99%BB%E9%8C%B2%E3%81%A8%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%A9%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9
paiza.ioでelixir その170

# 概要
paiza.ioでelixirやってみた。
postとgetやってみた。


# 参考にしたページ

https://hackmd.io/@vMvQUY6NSieja2EPPuit5Q/r1IhUP4Yo


# サンプルコード

```


:inets.start
:ssl.start
query = "Hello World!"
{:ok, {{_, _, _}, _, body}} = :httpc.request(:post, {'https://textbox.kokoa.dev/ohisama/elixir/test', [], ['text/plain'], query}, [], [])
IO.puts(body)
{:ok, {_status, _headers, body}} = :httpc.request('https://textbox.kokoa.dev/ohisama/elixir/test')
IO.puts(body)



```

# 実行結果

```
Hello World!
Hello World!
```

# 成果物


https://paiza.io/projects/MqNKgByCEFBDW1ll8_RnhQ?language=elixir


以上。
App Store / Google Play の フィーチャー枠獲得について

# はじめに
App Store / Google Playのアプリストアには、特定のアプリをピックアップして宣伝するフィーチャー枠というものがあります。フィーチャーされればアプリの知名度は飛躍的に向上し、ダウンロード数の増加にも直結します。
広告などによる地道な宣伝も、もちろん重要ですが、アプリのリリース後やアプリを盛り上げるイベントの際はフィーチャー枠を利用して集中的にアピールすることも大切です。

この記事では、アプリの注目度を高めるフィーチャーという制度の基本と、フィーチャーされるためのポイントであるAndroid バックキーについてまとめました。

### 参考になる本
- [スタートアップ・個人で作れる スマホ向けUnity ソーシャルゲーム開発ガイド](https://amzn.to/3QKy2rc)

## App Store / Google Play の フィーチャー枠とは
App Store / Google Playなどのアプリストアには、特定のアプリをピックアップして宣伝するフィーチャー枠というものがあります。フィーチャーされればアプリの知名度は飛躍的に向上し、ダウンロード数の増加にも直結するでしょう。

広告などによる地道な宣伝も、もちろん重要ですが、アプリのリリース後はフィーチャー枠を利用して集中的にアピールすることも大切です。

アプリストアのフィーチャー枠を獲得するためには、次のような方法があります。

1. アプリストアのアルゴリズムに適したアプリを開発し、高い評価とダウンロード数を獲得する。
1. アプリストアのスタッフにアプリを推薦し、特別な注目を得る。
1. アプリストアのイベントやプロモーションに参加し、優れたパフォーマンスを発揮する。

ただし、アプリストアのフィーチャー枠は、アプリストアのスタッフの裁量によって決定されますので、保証はできません。アプリの開発者は、上記の方法を使ってアプリを改善し、アプリストアに対してアプリを推薦することで、フィーチャー枠の獲得に向けた努力をすることができます。

## フィーチャーされるための条件とは？
App Storeでフィーチャーしてもらうための条件は、過去に行われたAppleのカンファレンスを参考にして以下のようなものであると定義されています。

- **高品質が維持されている**
純粋に品質の高いアプリであることが、フィーチャーされるための第一条件です。
ストアに対して金銭的なアピールをすることはできないため、アプリの質を高めていくことが近道です。
客観的に見て高品質なアプリになっているか、その機能を維持できているかについて、今一度確認してみましょう。

- **ストア内の評価が高い**
ストア内での評価も、フィーチャーされるかどうかを決める要素です。これまでにフィーチャーされたアプリの評価は星4.3～5程度のものが多いため、高評価が一つの条件であると考えられます。
高い評価を得るためには、常日頃からアピールを欠かさず、積極的なアップデートを重ねていく必要があるでしょう。

- **適切な価格設定**
アプリの価格設定が適切であることも、フィーチャーされるための条件になります。
同ジャンルのアプリと比べてかけ離れた価格になっていないか、根拠のない価格設定をしていないかをチェックしましょう。

- **目を引くようなデザインで存在感がある**
アプリとして存在感のあるデザインであるかどうかも、フィーチャーされる際の判断材料になります。ユーザーの目を引くようなデザインで、ストアを彩るような魅力あるアプリなら、フィーチャーされる可能性が高くなります。
世界を意識したデザインも重要で、複数の言語にローカライズすることもフィーチャーのきっかけになります。海外ユーザーも取り込めるようなデザインとアプリ内環境を目指すことも、結果としてフィーチャーされることにつながるでしょう。

## Android 用ゲームにおける Back キーの標準的挙動について
Android の Back キー（Back ボタン）は、ユーザーが直近で使用した画面を順番にさかのぼって移動できるように実装するのが基本です。また、ゲームデザインとユーザー体験に留意して動作を調整することも重要です。
そのほかに重要なこととして、ゲームを開発する際、（ゲームプレイのデータなどの）ユーザーにとって貴重な情報を損失しないようにする、ということがあります。それぞれの場面でユーザー体験を考慮し、ユーザーの期待に沿うような実装を検討する必要があります。

https://developers-jp.googleblog.com/2017/07/standard-back-key-navigation-on-android.html

[ナビゲーション グラフを設計する](https://developer.android.com/guide/navigation/navigation-design-graph?hl=ja)

Backキーの対応には、以下のような方法があります。

1. アプリの各画面において、Backキーを押すと前の画面に戻るように設定する。
1. アプリを終了するためのボタンを用意し、Backキーを押すことでアプリを終了できるようにする。
1. アプリ内で確認ダイアログを表示し、Backキーを押した場合の処理を明示的に設定する。

上記のように、Backキーの対応をすることで、ユーザーがアプリを使用しやすくなり、アプリの評価が上がる可能性があります。
また、Google Play Console では、アプリのユーザーエクスペリエンスに関する指標をチェックすることができ、アプリを改善するために有用な情報を得ることができます。

## アプリ開発でフィーチャー枠を獲得するために考えること

アプリストアのフィーチャー枠を獲得するためには、以下のようなことも重要になります。

1. アプリのデザインやUI/UX: アプリのデザインやUI/UXが美しく、使いやすいアプリは、高い評価を得る可能性が高いです。
1. アプリのパフォーマンス: アプリがスムーズに動作し、クラッシュやバグが少ないアプリは、高い評価を得る可能性が高いです。
1. アプリのセキュリティ: アプリが安全で、個人情報などが適切に保護されているアプリは、高い評価を得る可能性が高いです。
1. アプリのマーケティング: アプリを広く宣伝し、ダウンロード数を上げることで、アプリの評判を良くすることができます。
1. アプリのアップデート: アプリを定期的にアップデートし、新しい機能や改善を加えることで、アプリの評判を良くすることができます。

アプリのフィーチャー枠を獲得するためには多角的なアプローチが必要です。アプリの開発者は、上記のような要素を取り入れ、アプリを改善し続けることで、アプリの評判を良くし、アプリストアのフィーチャー枠を獲得する可能性を高めることができます。

# まとめ
フィーチャー枠獲得についてざっくりとまとめました。
参考にして頂けると幸いです。
Srcフォルダ　(world.ts と、index.ts)　のメモ

#Hello World の出し方

```world.ts

export default class World {
  // クラスで使うプロパティ、World というクラスを作る
  message: string;


  constructor(message: string) {
    this.message = message
  }
  //　コンストラクタ　messageの値は何ですか？　といった、初期化のようなものを行なっている（初期化）　


  //　外部から呼び出せるメソッドを定義
  public sayHello(elem: HTMLElement | null) {
    if (elem) {
      elem.innerText = this.message
    }
  }
}
```


```index.ts
import World from './world';

const root: HTMLElement | null = document.getElementById("root")
const world = new World("Hello World!!!");
world.sayHello(root);
```