OmniAICreator/Qiita-1.07M huggingface dataset:
Gatsby.jsとContentfulで型を自動生成した話

:::note info
こちら、まだ個人の備忘録レベルの記事となります
ですが、同じところで詰まった方向けに先行メモしておきます
Gatsby.jsってそんなに使っている人いないって？そうですよね。。なんか記事少ないので、誰か投稿してください！
:::


## LGTM
- Gatsby.jsとContentfulで型を自動生成する方法のベース
    - [Sean C DavisさんのYoutubeがわかりやすいかと思います](https://www.youtube.com/watch?v=TuRpE2sE-P0)
- 上記動画の通りにすると"Type does not satisfy the constraint 'EntrySkeletonType'."と怒られる場合
    - package.jsonの"cf-generate-types"に-Xをつけて--outすればOK
    - 例）"cf-generate-types": "cf-content-types-generator contentful/export.json -X --out types/contentful"


## 大して詳細ではないかもしれない詳細
1.npm install -D contentful-cli 
    - これから使うcf-content-types-generatorのコマンドが使えるようになるcontentfulのCLI
2.npm install -D cf-content-types-generator
    - 型を自動生成してくれるメイン役
3.package.jsonに以下を追記
 ```json:package.json
      "scripts": {
         "cf-export": "contentful space export --config contentful/export-config.json --management-token マネジメントトークンを入れてね --space-id スペースIDをいれてね",
         "cf-generate-types": "cf-content-types-generator contentful/export.json -X --out types/contentful"
```
:::note warn
動画では-Xが付いていないのですが、[issue](https://github.com/contentful-userland/cf-content-types-generator/issues/262)の通りエラーがあがるので、[issue](https://github.com/contentful-userland/cf-content-types-generator/issues/262)に書いてある対応をしています。
:::
4.ディレクトリのトップに"contentful"という名前のディレクトリを作成し、export-config.jsonを作成する
    - 中身は以下のとおり
```json:export-config.json
{
  "exportDir": "contentful",
  "contentFile": "export.json",
  "downloadAssets": true
}
```
5.npm run cf-export
- Contentful内容がすべてエキスポートされます。
- エキスポート場所は、contentful内のexport.jsonです
- 画像がある場合はimages.ctfassets.net内に入ります

6.npm run cf-generate-types
- ディレクトリトップにtypesフォルダが作成され、すべてのcontent typeに対して型を生成してくれます
- あとは好きに使ってね！
    



## 関連資料
- [cf-content-types-generatorのgitHub](https://github.com/contentful-userland/cf-content-types-generator)：自分でもびっくりですが、実はこのライブラリに関する記事でした。なんとサブ役のようにしか触れられていない・・・！
if文はなぜ 変数not=false でtrueを表すことがあるか

# if文はなぜ 変数not=false でtrueを表すことがあるか

trueが10進数で言う1を表すか、-1を表すかはプログラミング言語によって異なるから。

例えばVB.NETではTrueは32bit版ならFFFFFFFF(16進数)となって-1を表すけど、PHPだとTrueは1になる。(バージョンによるかもしれないが)

VB.NETでTrueがFFFFFFFF(16)となっているのは、CPUの処理サイズが32bit単位なら1にしようが-1にしようが確保メモリ領域のサイズは32bitで一緒だからって先輩から聞いたんですが、本当ですか？

# あとがき
情報処理技術者試験で2進数の話を学んだときは「今時の実務で使うときはこないでしょ」って思ってましたが、使いました。必要です。
モダンアクティビティを使ってみた(Excel編Part11～Excel→PDFへ変換して保存したい～)

## はじめに
①本記事は、2023年7月開催の「UiPathブログ 発信チャレンジサマー」の17日目のブログです。
ブログの詳細、参加方法については以下のブログを参照ください。

https://note.com/shumpei_w/n/nd082bdf28853

②このブログ情報は、2023/7時点の情報です。
③UiPathはCommunity Edition、Versionは2023.6.1を使用しています。

## ExcelファイルのデータをPDFにして保存するには？
「ExcelファイルをPDFとして保存」アクティビティは、対象のExcelファイルをPDFへ変換し保存してくれるアクティビティです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/9ba022e8-f715-e33f-a5c7-7d2e2f0e3b50.png)

プロパティは以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/45bcab6c-16f9-4c9c-7291-f2d420ae3b35.png)
【入力】
ブック：PDFにしたい対象のExcelを指定します。(最初どう値を入れるのか戸惑いましたが、"Excel"で入力したら特に問題ないみたいです...)
保存品質：PDFの品質を選択できるようです。StandardかMinimumが選べますが、デフォルトは"StandardQuality"です。今回は特にデフォルトのままでよいと思います。
※公式ドキュメントでは、以下のように記載しています。
<b>「StandardQuality (オンライン パブリッシュおよび印刷用に最適化) か MinimumQuality (オンライン パブリッシュ用に最適化) のいずれかを選択します。既定のオプションは StandardQuality です。」</b>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/12870f17-43fb-4c4e-6440-a4d2310b6660.png)
開始ページ・最終ページ：ページ指定がある場合は指定します(今回は指定しません)
※最終ページの番号を指定しない場合は、最後のページまでファイルが保存されます。
【ファイル】
保存先PDFパス：PDFで保存するときのファイル名を指定します。
※今回の例ではxamlファイルと同じ場所へ配置していますが、「保存先PDFパス」で指定のパスをフルパスで書いてあげる(またはパスの入った変数/引数を設定)と、指定のパスへ入ってくれるようになります。
【オプション】
既存ファイルの置換：チェックを付けると、PDFファイルは古いものから新しいものへ置換されます。チェックを外すと置換されません(エラーになってしまうので注意しましょう)　。

## やってみよう
試しに入力して作った「出身地_2.xlsx」というファイルがあります。
このシートに記載の表をPDFにしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/8cd13185-34e1-cf64-5867-96d53f32b5a9.png)
アクティビティを配置すると以下のような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/e3d847af-9174-7c07-e864-851ad9cb6531.png)

実行してみると...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/0baceef8-e3f0-ec1e-8e5c-8e86eb22d698.png)
PDF、できていますね！
PDFファイルの中身を見てみると...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/70387d8c-2e04-615d-040d-e5b936849692.png)
まあ、データが少ないのもあってこれだけ？って感じですがExcel→PDFにすることはできたのでよかったです。

## ちなみに...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/06f5c2e0-167f-5903-3cbc-a1595fe65c46.png)
プロパティにあるオプションの「既存のファイルを置換」ですが、先ほどPDFができた状態でチェックを<b>外す(チェックしない)</b>状態で実行するとどうなるか見てみましょう。
結果は...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/68cc7708-b17a-0862-9077-21310a8f9f7e.png)
今回の場合、TryCatch等は入っていないのでエラーになりその場で停止します。
なので、置換...というか上書きしてもよいのであれば「既存のファイルを置換」にチェックを入れておきましょう。


## まとめ
Excel→PDFへの変換は使いこなせると役立つかもしれません。
あと、既存ファイルの置換をするかについては(個人的には)チェックを付けたい派なのですが、置換でもいいのか、そうでないのかは実装時に決めておきましょう。
最後までお読みいただきありがとうございました。

## 参考URL

https://docs.uipath.com/ja/activities/other/latest/productivity/save-as-pdf-x
【Notion×TickTick】タスク管理方法

## 初めに

この記事は、タスク管理がうまくいかずに、リソース配分やスイッチコストに悩んでいる方に向けて書いています。

特に新人エンジニアの方々がタスク管理の重要性を理解し、日々の業務をより効率的に進められるように、この記事を通して私のタスク管理方法を共有したいと思います。

:::note info
あくまで、個人の見解をまとめたものです。
自分好みにアレンジして、より良いタスク管理行なってください。
:::


## タスク管理のメリット

タスク管理を行うことで得られるメリットは以下の通りです。

- **優先順位の明確化**：タスク管理をすることで、何にどの程度の時間を割くべきか、どのタスクを先に手をつけるべきかを明確にします。
- **作業効率の向上**：タスクを整理し、一つ一つ明確にすることで仕事の進行状況を視覚化でき、作業効率を向上させます。
- **ストレス軽減**：自分の仕事の全体像が把握できると、作業に取り組む際「何すれば良いんだっけ？」と言う時間が減り、ストレスを軽減できます。
- **リソース配分可視化**：自分の仕事の全体像を把握しておくと、「他の仕事を振られた際」に、優先順位を元にいつまでに何ができるのかを素早く回答することができコミュニケーションコストが減らせるとともに新しい仕事も受けやすくなります。

## タスクの分解とそのメリット

大きなタスクを小さなタスクに分解することで、以下のメリットがあります。

- **作業の見通しを立てやすい**：大きなタスクは見通しが立てにくいですが、小さなタスクに分解することで一つ一つの作業の見通しを立てやすくなります。
- **進捗管理が容易**：小さなタスクに分解することで、進捗の確認が容易になり、作業のモチベーションを保ちやすくなります。
- **割り込みに強くなる**：タスクを細かくわけると、分けたタスクのそれぞれに完了のタイミングを発生させることができます。
一般に割り込みによるコンテキストスイッチはコストが大きくなりがちです。割り込みの前はどんな業務をしていて、どこまで進んでいたのか確認が必要になります。
この際にタスクが細分化されていると、すでにどこまで終わっていて、どこから再開すればいいか一目瞭然になります。


## タスク管理方法：NotionとTickTickの組み合わせ

私が実際に利用しているタスク管理ツールは、「Notion」と「TickTick」です。私のタスク管理の流れは以下の通りです。

https://inouek.jp/workstyle/ticktick2022/

https://www.sbbit.jp/article/cont1/100775

1. **Notionでの中長期的な計画の管理**：大きなプロジェクトや目標を設定し、それを具体的なタスクに分解します。それらの情報をNotionにまとめ、全体の進捗管理を行います。
2. **TickTickでの短期タスクの実行**：Notionで作成した中長期的な計画に基づき、具体的な一日or 数字単位でのタスクをTickTickに入力し、タスクの実行を行います。

※TickTickは課金することでGoogleカレンダーなどのカレンダーツールからカレンダーを同期することができます。これも便利なので慣れてくれば導入してほしいです。

## Notionでの中長期的な計画の管理

### 1. 開発プロジェクトごとで管理

![スクリーンショット 2023-07-17 16.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2712488/983b4b9a-761e-54b9-5877-ce72df9a29ce.png)

### 2. プロジェクトごとで「ゴールの設定」＆「タスク」＆「スケジュール」を設定　
※今回は紹介ということで「タスク」&「スケジュール」は端折っています。


![スクリーンショット 2023-07-17 16.59.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2712488/6ea3beb5-445e-4d4f-0349-61cc2c30c0c7.png)


### 3. 上記２でタスクの中により具体的な作業を管理
![スクリーンショット 2023-07-17 17.01.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2712488/d0ef9e9d-d0b4-e98e-7f9d-104cb7596ada.png)

notionではこの粒度までを管理しています。

## TickTickでの短期タスクの管理
notionで管理しているタスクを「その日、具体的に何を行うか」を管理するのがTickTickです。
私の場合は、毎朝TickTickでタスクを更新・追記することが多いです。
この作業がその日を制すため、きちんと時間を設けて整理を行っています。

![スクリーンショット 2023-07-17 17.04.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2712488/c8023463-1862-8c1d-704b-d997089e9fce.png)

プロジェクトごとでリストを作成し、「taskA」というタスクの中により具体の実行タスクを書いていきます。
この部分はより細かく、一目で何をするかわかるくらいの細かい粒度で記載します。(スイッチコストを掛けないため)

日付も忘れずに設定しておくことでいつまでのタスクなのかを可視化できます
![スクリーンショット 2023-07-17 17.19.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2712488/81950d78-05ef-b7f9-f830-898949d0530c.png)


このように、**中長期的な計画**と**短期的な実行**を別々のツールで管理することで、全体の見通しと日々の作業効率を両立することができます。

このタスク管理方法を導入し、まだ日が浅いため
より良い方法を模索し、随時更新していきたいと思います。

## 終わりに

タスク管理は業務を効率的に進めるために必要不可欠なスキルです。是非、自分自身にとって最適なタスク管理方法を見つけ、日々の業務に生かしていってください！！！！
windows10のgoogle chrome 114でseleniumを使う準備

# 目的

今日は3連休最終日！
土日何もしなかったので、何かしたいと思いました...

webサイトのテストを自動化するとき、pythonのseleniumが使われるようなので、
それについて今日は実行できるように準備までします。

# 今回やること

今回の目標は以下の4つ。
* pythonのインストール
* VScodeのインストール
* seleniumのインストール
* テストコードの実行


# 環境
* windows 10
* Python 3.11.4 
* google chrome 114.0.5735.199


# いざ出陣

### sleniumとは
Webアプリケーションをテストするためのフレームワーク

いろいろできると思って触ってみたかったが、調べて多く出てきた手順ではできなかったので主にそれの備忘録。

### pythonのインストール

以下のサイトからインストーラーをダウンロードして実行します。
今回はpython 3.11.4のインストーラーをダウンロードしました。

https://www.python.org/downloads/

### VScodeのインストール

以下のサイトからインストーラーをダウンロードして実行します。

https://code.visualstudio.com/download

日本語化とpythonの拡張機能をインストールしますが、いっぱい文献あるのでそれを見ればOK！


### seleniumのインストール

VScodeを開き、ctrl+@を押してターミナルを表示し、以下のコマンドを実行して`selenium`と`chromedriver-binary`をインストールします。
`chromedriver-binary`の114の部分は、google chromeのメジャーバージョンです。
google chromeの設定を開き、「Chrome について」というタブから分かります。

```terminal:ターミナル
pip install selenium
# 114の部分は、google chromeのメジャーバージョン
pip install chromedriver-binary==114.*
```


### テストコードの実行

seleniumのインストールができていて使えるかを確認します。
以下のコードをコピペし、googleの検索ページが表示されて3秒後に消えたらOKです！

```python:test.py
# 使うライブラリのインポート
import time
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import chromedriver_binary

# パスを設定しているのでOptionの引数はなくてよい
options = Options()

# 開くページを設定
driver = webdriver.Chrome(options=options)
driver.get('https://www.google.com')

# 待機
time.sleep(3)

# 終了
driver.quit()
```


# 余談

chromedriverをダウンロードする手順が書いてあるサイトが多くて、それだとできませんでした...
なぜかわからないけど解決したのでOK！
【Multiple Select】の multipleWidth をautoにする方法

jQueryのプラグインであるMultiple Selectの選択肢の幅をautoにする方法を書きます。
ただソースを書き換えるので、もしかするとあまり良くないのかもしれません。
使用したmultiple-selectはv1.6.0です。

単刀直入にいうと、multiple-selectのリポジトリでissueしてくれた方が、書いていた方法を使います。
https://github.com/wenzhixin/multiple-select/issues/576

書いてある通りですが、僕の場合はCDN先のソースをローカルに取ってきて、下のように書き換えて、
```javascript:multiple_select.js
- this.$drop.find('.multiple').css('width', "".concat(this.options.multipleWidth, "px"));
+ this.$drop.find('.multiple').css('width', this.options.multipleWidth);
```

使用する際に、下のオプションを設定してあげると、要素の幅に合わせることができます。
```javascript:sample.js
multipleWidth: "auto"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251667/b0de7910-1837-3e0b-50b2-d83d15b5b224.png)


また、あわせてstylerオプションで最大の幅を設定してあげると、よりきれいになると思います。
```javascript:sample.js
styler: function(row) {
    return 'max-width: 150px'
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2251667/af78d076-320b-56a2-b61a-81ed95f55cf9.png)


issueしてくれた方も書いてますが、幅が静的にpxで固定されているようですね。ただ、もしかすると何か理由があって固定しているのかもしれません。

こうしたプラグインを公開してくれたり、issueを残してくれるのはすごくありがたいですね。
組織でGPTのプロンプト活用するのにお役立ちなツール書いたで！！

# い・しゅー

こんな課題が神々の大地からウォーターフォールしてきてないかな？

- プロンプトのDBを作ってノウハウを蓄積したい
- かつ、誰でも登録出来て誰でも検索させたい
- かつ、出力結果を実際の出力に近い形で分かりやすく参照したい
- かつ、どのくらいの利用があったか可視化出来る仕組みがほしい
- かつ、**分かりやすく使いやすいインタフェースから操作させたい！**

#### いやー無理っす！！！

となるところだけど、僕らが普段使いのslackをラップすれば出来そうな予感がしたので作ってみた
slackだとみんな使ってるから操作を覚える学習コストも少ないし、**スマホとかからも出来て良いよね！！**

# こ・れ

<a href="https://github.com/yasutakatou/prompt-bot"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/yasutakatou/prompt-bot.png" width="460px"></a>

# おもな動作

- **静的・または、曖昧(ngram)検索で登録した分を検索します!**
    - 一個、または、ベスト3みたいな検索結果を返せます
- **記録するワードを指定するとプロンプトと出力結果を登録できます!**
    - 出力結果はテキスト、または、画像が指定できます
- **プロンプトにSlackのリアクションが付いているものを一定期間で集計して可視化できます!**
    - 誰が何のリアクションをしたかをCSV形式で指定したチャンネルにレポートしてくれます

# 使い方は？

## セットアップ的な 

詳しくはGitんとこに書いてあるけど、Slackのボットを作って使いたいチャンネルに登録するだけ。
リアクション報告用のチャンネルが欲しければ、その分のチャンネルも作ってください

## プロンプトの登録

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/8cc4ef59-78e3-3703-d9a7-73201706d4d9.png)

こんなかんじで**登録用の呪文**と**出力結果用の呪文**を入れて発言するとボットが自動的に拾ってくれます
(登録用の呪文と出力結果用の呪文はオプションで変えられます)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/48c07d95-f9c8-6020-14b3-b8dedb89ce7b.png)

出力結果がグラフだったり文字じゃない場合は画像をそのまま添付します

## プロンプトの検索

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/6be5c64e-3f43-166f-d401-d0b8614502c1.png)

こんなかんじで**静的文字列、と、曖昧検索用の呪文**と**調べたい単語をスペース区切り**で発言すると
ボットが拾ってくれて検索結果を返してくれます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/0688760e-dd86-f4e1-d5a2-88270df419b3.png)

出力結果を画像で登録した場合は、出力結果の部分は画像になります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/66792cb3-9d0c-45ea-5843-6cb7b79bcd75.png)

## 利用状況の集計

各プロンプトの右には**ID**が付いています。**プロンプトにリアクションした場合はID単位で集計**されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/ba5e282c-63b6-a9c3-6c51-59d5c9e3e5d6.png)

どのプロンプトに沢山反応が付いているかを集計することで、組織でもっともすぐれたプロンプトを登録した人を表彰したり、**ゲーミフィケーション的にAI活用を進められるでしょう！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/51bfe93f-9093-b854-48b1-06eeb9729e37.png)

# あとがき

画像登録のコードがめっちゃ力業なんだけど、SlackのレスポンスってなんちゃってJSONになっているので
うまいとこパース出来ないのよね。。もっとうまく書きたいけど。
というわけで、みんなが使ってるSlackに一段ラップするツールでプロンプト利活用を促進しようぜ！の巻でした。

~~え？登録したプロンプトを消したい場合？？そりゃコンフィグを直接編集だわｗｗｗ~~
Python 仮想環境（venv）作成・削除

## 概要

Python 仮想環境（venv）の作成と削除方法を記載する。

## 前提

- Python がインストール済みとする。

## 動作確認済み OS、 Python バージョン

- Windows 10
- Python 3.8/3.9/3.10/3.11

## 作成

- Python コマンド

```Python
python -m venv 仮想環境名
```

- py コマンド
  
  Python 3.8 の場合。
  

```Python
py -3.8 -m venv 仮想環境名
```

## 起動

```
venv/Scripts/activate
```

## 終了

deactivate だけでも可能である。

```
venv/Scripts/deactivate
```

## Python ライブラリのインストール

```python
pip install numpy
```

## Python ライブラリのアンインストール

```python
pip uninstall numpy -y
```

## インストール済みライブラリの一覧出力

仮想環境内において、次のコマンドを実行する。
今回は、テキストファイル「requirements.txt」に出力している。

```Python
pip freeze > requirements.txt
```

## インストール済みライブラリの一覧からインストール

仮想環境内において、次のコマンドを実行する。
今回は、テキストファイル「requirements.txt」からインストールしている。

```Python
pip install -r requirements.txt
```

## 初期化

仮想環境を終了し、次のコマンドを実行する。

- Python コマンド

```
python -m venv --clear 仮想環境名
```

- py コマンド
  
  Python 3.8 の場合。
  

```Python
py -3.8 -m venv --clear 仮想環境名
```

## 削除

仮想環境のフォルダを削除すればよい。

## Documentation

https://docs.python.org/ja/3/library/venv.html
ABC310 - A - Order Something Else 自己解法

# 問題

https://atcoder.jp/contests/abc310/tasks/abc310_a

# 考察
ドリンク飲むために必要な最少額はいくらですかという問題です。ドリンクを含めた注文方法を全て洗い出し、それぞれの金額を求めてみましょう。
- ドリンクを単品で注文：$P$円
- 料理1とドリンクを注文：$D_1 + Q$円
- 料理2とドリンクを注文：$D_2 + Q$円
- 料理3とドリンクを注文：$D_3 + Q$円
- 料理4とドリンクを注文：$D_4 + Q$円
…
- 料理Nとドリンクを注文：$D_N + Q$円

この中で最小となる注文の金額を出力すればいいです。実装方法としては、最初にドリンクを単品でしたときの$P$円を暫定での最少金額とします。そして順番に金額を比較して、より金額が少ない注文があれば暫定の最少金額を更新してきましょう。C++の場合、金額の比較は`min`関数、料理1～Nまで順番に金額を調べるときは`for`を使うと実装が容易になります。

# 提出コード(コンテスト後)

https://atcoder.jp/contests/abc310/submissions/43694597

ご不明点などがあれば教えていただけると幸いです。
【GitHub Actions】Git管理外のファイルを扱った時のエラー

## はじめに
最近GitHub Actionsの学習を始めました。
GitHub Actions×S3で静的ウェブサイトのホスティングを実装中、少し詰まったので記事にしました。ホスティング方法の詳しい解説は行いません。

## 環境
MacBook Pro intel
macOS Monterey バージョン12.6



## GitHub Actions×S3で静的ウェブサイトのホスティング
ひとまずデプロイだけ挑戦してみたかったので、GitHub Actions上ではテストもビルドも行いません。ローカルでビルドした成果物をデプロイします。

```yaml
name: frontend

on:
  push:
    branches:
      - main

defaults:
  run:
    working-directory: frontend

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        uses: actions/checkout@v3

      - name: デプロイ
        run: aws s3 cp dist s3://hogehoge-123 --recursive
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.FRONTEND_AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.FRONTEND_AWS_SECRET_ACCESS_KEY }}
          AWS_DEFAULT_REGION: ap-northeast-1
```

## エラー
「distディレクトリはありません」と出力されました。
手動でのデプロイは確認済みなのになぜ...working-directoryをfrontend/distに変更してみたり、AWSのクレデンシャルをaws-actions/configure-aws-credentialsで設定してもだめでした。なぜ...

![スクリーンショット 2023-07-17 18.29.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485354/c272fae6-a2a5-3607-3ea4-1ba94d3e5ef6.png)


```bash
# ローカルのfrontend配下
$ tree -L 1
.
├── Dockerfile
├── README.md
├── dist
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vite.config.js
```

## 本当にdistディレクトリが無かった
最初のエラーの通り本当にdistディレクトリがありませんでした！まずは最初に(ちゃんと)エラーを読みましょう！

```yml
name: frontend

on:
  push:
    branches:
      - main

defaults:
  run:
    working-directory: frontend

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        uses: actions/checkout@v3

      - name: ディレクトリの確認
        run: pwd && ls

```
![スクリーンショット 2023-07-17 18.52.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2485354/ba3fc90c-033c-500a-8fc3-c45caa37fc14.png)

## 原因と解決
原因はdistディレクトリをGit管理外に設定していたからです。管理下に設定すると最初のコードで無事デプロイできました。
当たり前ですがactions/checkoutではGit管理外のファイルを取得することはできません。distディレクトリが管理外であることを忘れていました。

## distは基本Gitで管理しない、でもどうやってデプロイする？
ビルド"成果物"です。成果物を差分管理する必要性は低いですし、デフォルトでも管理しない設計になっています。
今回のGitHub Actionsのコードはデプロイしか行っていません。基本GitHub Actions上でビルドを行いGitHub Actions上に生成された成果物をデプロイすることになります。

https://dev.classmethod.jp/articles/deploy-web-site-with-github-actions/


## あとがき
エラー内容は本当でした！(当たり前)
最初からビルドとセットでデプロイしていたら出会えなかったエラーです。私みたいに「GitHub Actions難しそうだし、とりあえずS3のデプロイだけやってみるか！」と思う方は参考になると思います。

余談ですが記事を書く為にエラーの再現中、distをGit管理外に戻せない事象が発生しました。下記の記事を参考に解決しました。

https://qiita.com/fuwamaki/items/3ed021163e50beab7154
Event Busを作ってみよう TODO編

# 最終的なイメージ
* event_loop.pyが常に動いている。ここに変更は永遠に加えない
* 開発者はアプリの新規追加・編集・更新が自由に行える。event_loop.pyは変更を自動的に読み込む。
* アプリ間のやり取りはevent_loop.pyを通して行われる
* 各アプリはevent_busから呼び出されるもののあれば、手動で呼び出されるものもある
* 各アプリは非同期的に実行される

# TODO
* ~~apps/内に新しく.pyファイルが追加されたときにPythonは認識するかチェック~~
    * 認識するようにevent_loop.pyを更新。import_moduleを利用して、動的にapps内の関数をimportするようにした。
    * これに伴って、新しいappsが追加されたら、registered_eventを更新するようにした
* apps/内のスクリプトが更新された後、それが認識されるのかチェック
* サブプロセス？的な何かに各アプリの処理を投げる
* 割り込み処理の実現
    * イメージはCtrl+Cの強制終了の読み取り。これもevent_loop.py上のイベントとして扱いたい。
* event registerの動的更新の実装
    * これ本当に必要か？
    * 必要なケースの具体例挙げ


# ディレクトリ構造

```
event_bus/
|
|- event_loop.py
|- call_apps.py
|- <some other config>
|
|- apps/
    |- dummy_trigger.py
    |- print_event.py
    |- <other apps coming soon>
|
|- new_event_dir/
    |- 2023_05_14_10_21_19_704567_526212028_dummy_trigger.txt (サンプル)
    |- <other apps event coming soon>
|
|- old_event_dir/
    |- 2023_05_13_17_46_05_903853_210209713_dummy_trigger.txt (サンプル)
    |- 2023_05_13_17_46_06_616911_073043986_dummy_trigger.txt (サンプル)
    |- <other apps event coming soon>
|
|- registered_event/
    |- 2023_05_13_18_19_37_203768_158712787.csv (サンプル)
    |- 2023_05_13_18_22_37_302726_415965892.csv (サンプル)
    |- ...
|
|- src/
    |- get_random_int.py
    |- get_absolute_path.py
    |- <other common modules>
|
```
[Unity] Meta Quest 2でビルドすると画面が真っ暗

# はじめに
こんにちは、ユーゴです。
今回は、Unityを使ってMeta Quest 2向けにアプリをビルドした時に発生した問題を紹介します。

# 環境
・Unity 2022.3.4f1

関連パッケージ
|パッケージ名|バージョン|
|:--|:--|
|OpenXR Plugin|1.8.1|
|XR Hands|1.2.1|
|XR Interaction Toolkit|2.4.0|
|XR Plugin Management|4.4.0|

# 原因
XR Plugin Management 4.4.0がバグっぽい？

# 対策
XR Plugin Management 4.3.3に直したら、画面が真っ暗じゃなくなった

直し方は、プロジェクトフォルダから「Packages > manifest.json」を開き、
```
"com.unity.xr.management": "4.4.0",
```
の行を
```
"com.unity.xr.management": "4.3.3",
```
に直す。

# まとめ
いかがだったでしょうか。
私は今回のバグで丸2日溶かしました😇
同じバグで悩んでいる方の手助けになれば幸いです。

UnityやVR系のテーマから、GASやSlackアプリの解説なども行なっております。
気に入っていただけましたら、いいね・フォロー等よろしくお願いします！
Google Colaboratory Stable Diffusion WebUI インストールメモ

## Google Colaboratory Stable Diffusion WebUI インストールメモ

検索してもインストールできないことが多いので、2023/07中旬の時点で整理。

### ライブラリのアップデート

```python
!pip uninstall torch torchvision -y
!pip install torch torchvision
!pip uninstall xformers
!echo y | pip install xformers==0.0.16
```

### ランタイムの再起動
上記インストールが終わった段階で メニュー内の「ランタイム」 → 「ランタイムを再起動」
そのあとで　「ランタイム」 → 「ランタイムのタイプを変更」 を選択後、「ハードウェア アクセラレータ」 のドロップダウンメニューから 「GPU」 を選択。

### AI画像生成用のライブラリのインストール

```python
%pip install torch==1.13.1+cu117 torchvision==0.14.1+cu117 
torchtext==0.14.1 torchaudio==0.13.1 torchdata==0.5.1 
--extra-index-url https://download.pytorch.org/whl/cu117
```


### Stable Diffusion WebUI のインストールと起動

```python
!git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui
%cd /content/stable-diffusion-webui

!wget https://civitai.com/api/download/models/11745 -O /content/stable-diffusion-webui/models/Stable-diffusion/Chilloutmix-Ni-pruned-fp32-fix.safetensors

!python launch.py --share --xformers --enable-insecure-extension-access
```

起動に成功するとこんなログが出る。

```python
Use --skip-version-check commandline argument to disable this check.
=================================================================================
Calculating sha256 for /content/stable-diffusion-webui/models/Stable-diffusion/Chilloutmix-Ni-pruned-fp32-fix.safetensors: preload_extensions_git_metadata for 7 extensions took 0.00s
Running on local URL:  http://127.0.0.1:7860
Running on public URL: https://cd7f518c5243751f45.gradio.live
```

public URL にアクセスして動作確認

![スクリーンショット 2023-07-17 19.32.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266239/4dee4a3b-1772-3826-098f-2c161583ab9b.png)
【3dsMax】JJTools2013の導入方法

(3dsMax2021(英語)を使用しています)(参考　https://www.youtube.com/watch?v=SByWSDy74kA)

ステップ1　「インストールする」

https://drive.google.com/file/d/10YiBcjbwBWC4YVy9K1W3OPXyMTGfrNek/view

<br>
<br>
<br>
<br>
<br>
<br>

ステップ2　「実際に導入する」

「Windows(C)」↓「Program Files」↓「Autodesk」↓「3dsMax20〇〇」を開き

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843707/9f524631-d3da-cb2e-6867-d06f137fc2ba.png)




先程インストール(3dsMax2013)、したファイルを開きます。

注意！「3dsMax20〇〇へコピー」にD＆Dする

<br>
<br>
<br>
<br>
<br>
<br>

ステップ3　「実際に使う」

3dsMaxを起動、Customize→HotekeyEditorを開く



「Clever」と検索しましょうJJTools2013とでたら(多分)成功です！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843707/4bc8cf44-ce86-a797-dd9f-55b89c247e43.png)


機能に関する説明は以下の記事がおすすめです

フォローよろしくお願いします、マジでhttps://twitter.com/MapleSyrup77

技術ブログもやってますhttps://qiita.com/MapleSyrup77
【Xcode】Invalid App Store Icon. The App Store Icon in the asset catalog in 'XXXXXX.app' can't be transparent nor contain an alpha channelでアップロードできない

# はじめに
アイコンが原因でAppStoreConnectにアップロードできない現象にハマりました。

# エラー
```
Invalid App Store Icon. The App Store Icon in the asset catalog in 'XXXXXX.app' can't be transparent nor contain an alpha channel.
```

![スクリーンショット 2023-07-17 19.04.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1ba11093-d71a-7303-bedf-4663a4467a59.png)

# 原因
透過画像を使っている or アルファチャンネルが含まれている

このどちらからしいです
透過画像ではないのでアルファチャンネルが含まれている可能性が高いです。

# 確認方法
① アイコンを右クリックします
② 「情報を見る」を選択します
![スクリーンショット 2023-07-17 19.06.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/6ff5d22b-dfb0-1107-a037-f723ce4e7a15.png)

③ 「詳細情報」の中に「アルファチャンネル」項目がありました
![スクリーンショット 2023-07-17 19.07.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/120f6670-b487-32e1-2aa6-ca57193cb115.png)

「はい」になっているのでこれが問題だと思われます。

# 修正方法
① アイコンを右クリックして「プレビュー」で開きます
![スクリーンショット 2023-07-17 19.11.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/03e28769-863d-58c4-5421-8dc394c5dead.png)

② 「ファイル」を選択して、「書き出す...」を押します。
![スクリーンショット 2023-07-17 19.12.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/f90b695d-e770-bbe5-416c-bf324ba384be.png)

③ 「アルファ」のチェックを外して、「保存」を押します。
![スクリーンショット 2023-07-17 19.14.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/16d1c190-8c48-7afb-99fe-712a8f2abf50.png)

# おわり
これはめっちゃ分かりづらいですね
トラップだ、、、
【Git】Push済みのブランチ名を変更する方法

既にローカルでブランチを作成している状態で、Pushした後にブランチ名を変更したい場合にリモートとローカルのブランチ名を変更する方法の解説になります。

この場合、一旦、リモートのブランチを削除します。

```bash
git push origin :[削除するリモートブランチ名]
```

次に以下に示すコマンドを実行していき、Pushするところまで実施すれば、
リモートのブランチ名も変更することができます。

```bash
git branch -m [新しいブランチ名]
git branch --unset-upstream 
git push --set-upstream origin [新しいブランチ名]
```

恐らく他にもリモートブランチを削除しなくても直接リモートとローカルのブランチを一気に変更する方法もあるかと思いますが、
今回は削除する方式を取りました。
GPIOでLEDを点滅させる

## GPIOの配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509123/9e9c721b-140e-00bc-043f-651a4f247fc5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509123/39eb9fd1-3661-eff8-a7fa-9d90ebeab896.png)
参照元公式ページ
https://www.raspberrypi.com/documentation/computers/raspberry-pi.html#gpio-and-the-40-pin-header

## プログラム
GPIO17でLEDを点滅させるプログラム
``` python:sample1.py
from gpiozero import LED
from time import sleep

led = LED(17)

while True:
    led.on()
    sleep(1)
    led.off()
    sleep(1)
```

## 回路設計
下記の条件から抵抗値を求めます。
・LEDに10mA流したい
・LEDは2.0Vの電圧降下がある
・GPIOがONの時、3.3Vになる
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509123/c0d595b7-316f-103b-e10b-505b8c1a43d5.jpeg)

手持ちに130Ωがなく、100Ωの抵抗で作成しました。
・GPIO17（11番ピン）
・GND（6番ピン）
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3509123/6f6014c9-a0b6-581d-0853-41e132989131.jpeg)


## 実行
```
python sample1.py
```
LEDが1秒おきにピカピカしました!
[TypeScript] 配列から要素の型を取り出す

# やりたいこと
このような配列から
```ts
const samples = [
    {
        name: 'shiraishi',
        age: 30
    },
    {
        name: 'shiraishi'
    }
]
```

このような型を作りたい。
```ts
type User = {
    name: string
    age?: number
}
```

# 解決方法
下記のように配列の要素の型を取り出す型ユーティリティ関数を定義します。

```ts
type Unwrap<Ary extends any[]> = Ary extends (infer R)[] ? R : never
```

この関数を適用した結果が以下です。
```ts
type User = Unwrap<typeof samples>

const test1: User = {
    name: 'name',
    age: 12
}

// エラー
const test2: User = {
    name: 'name',
    age: 'age' // Type 'string' is not assignable to type 'number'.(2322)
}

const test3: User = {
    name: 'name',
}

const test4: User = {
    name: 'name',
    age: undefined
}
```

# 背景
API 側のアプリケーションから自動生成される**レスポンスのサンプルの json** からフロントエンドの型を自動生成しようとしたのが始まりです。
しかし、一つのサンプルだけでは optional かどうかが分からなかったため、下記のような複数のサンプルを含んだ json を作成し、そこから型ユーティリティ関数を用いて型を作る方法を考えました。

```json
[
    {
        "name": "shiraishi",
        "age": 30
    },
    {
        "name": "shiraishi"
    }
]
```

# 関連
この問題を解決する方法として、特定パターンの key をオプショナルにする方法も考えました。

https://qiita.com/punkshiraishi/items/0770b7185849df778d44
連想配列の追加方法(PHP編)

**paiza**の森の課題プログラムを作成しました。
***問題***はこちら



>n 人の人に関して、それぞれの人の名前と財産が与えられます。その後に人名 S が与えられるので （S は最初に与えられた名前のうちのいずれか） 、 S の財産を表す整数を出力してください。

挑戦しました

```PHP
<?php
    // 作成 2023/7/17
    // データ数を入力
    $num1 = trim(fgets(STDIN));
    // 連想配列の定義
    $array1 = [];
    for($i=0;$i<$num1;$i++){
        //配列のキーと値を入力
        $data = trim(fgets(STDIN));
        //スペース区切りで配列に分割
        $w_array = explode(' ',$data);
        $key = $w_array[0];
        $value = $w_array[1];
        //連想配列に追加
        $array1 = array_merge($array1,array($key=>$value));
    }
    $res1 = trim(fgets(STDIN));
    //表示したい要素を出力する
    print($array1[$res1]);
    
?>
```

```PHP
  array_merge($array1,array($key=>$value))  
```
のように***array_merge関数を使います。***
Boolean型カラムをpresence: trueで設定したらfalseで保存出来なかった

# 前提条件

Userテーブルにnullを許容しないBoolean型のhoge_flagというカラムがあるとする。

```ruby
create_table :users do |t|
  t.boolean :hoge_flag, default: true, null: false
end
```

migration後にuser.rbにvalidatesを追加

``` ruby
validates :hoge_flag, presence: true
```

# データ保存時にエラーが出る・・・

上記を踏まえて、hoge_flagをfalseにしてみた！

```
user = User.first
user.hoge_flag = false
user.save!
```

結果
```
Translation missing: ja.activerecord.errors.messages.record_invalid (ActiveRecord::RecordInvalid)
```

あらら・・・

もう少し確認してみると

```
user.valid?
=> false
```

もちろん、バリデーションに引っかかってる:frowning2:
エラー内容は

```
user.errors.messages
=> {:hoge_flag=>["を入力してください"]}
```

ん？？？？？
値はちゃんとfalseを入れてるけど？？

```
user.hoge_flag
=> false
```

入ってるよね:sweat_smile:

# 調べてみた
Railsガイドで改めてpresenceをみてみる。

[Railsガイド/presence](https://railsguides.jp/active_record_validations.html#presence)

> このヘルパーは、指定された属性が空（empty）でないことを確認します。値がnilや空文字でない、つまり空でもなければホワイトスペースでもないことを確認するために、内部でblank?メソッドを使っています。

ほうほう。ここで重要なのは、

>内部でblank?メソッドを使っています。

だな:speak_no_evil:


ちなみに```blank?```の挙動は[ドキュメント](https://api.rubyonrails.org/classes/Object.html#method-i-blank-3F)を見てみると

> An object is blank if it's false, empty, or a whitespace string. For example, nil, '', ' ', [], {}, and false are all blank.

```ruby
!address || address.empty?
```

とあるので、

```ruby
false.blank?
=> true
```

となっていて、内部的にtrueが返ってバリデーションに引っかかってたというオチでした・・・


```ruby
presence: true
```

この記述はずっと使ってきていたはずなのに、深読みせず**空かどうかみるやつね**みたいな感覚で使ってた怠惰な自分を反省します:sob:![059.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474880/a27a8c20-6871-2a19-17b8-92c4f94baddc.jpeg)

# 解決法
じゃあ今回のパターンの場合にどう書けばいいかというと、

```ruby
validates :boolean_field_name, inclusion: [true, false]
```
もしくは
```ruby
validates :boolean_field_name, exclusion: [nil]
```

と書くと、falseでもバリデーションに引っかからずに値が保存出来ます！


# まとめ
Railsは魔法が多い。

と常々思っていますが、いつも何気なく使っているメソッド等の挙動や内部処理をドキュメント等で確認することの大事さを今回改めて感じました。
[TypeScript] 特定の文字列を含む key をオプショナルにする

# やりたいこと
このような Object から
```ts
const user = {
    name: 'shiraishi',
    age_o: 30
}
```

このような型を作りたい。
```ts
type User = {
    name: string
    age?: number
}
```

# 解決方法
`*_o` というパターンのキー名から `_o` を取り除き、オプショナルに変更する型ユーティリティ関数 `TransformedType` を定義します

```ts
type TransformedType<T> = {
  [K in keyof T as K extends `${infer O}_o` ? O : never]?: T[K]
} & {
  [K in keyof T as K extends `${string}_o` ? never : K]: T[K]   
};
```

この関数を適用した結果が以下です。
```ts
type User = TransformedType<typeof user>

const test1: User = {
    name: 'name',
    age: 12
}

const test2: User = {
    name: 'name',
    age: 'age' // Type 'string' is not assignable to type 'number'.(2322)
}

const test3: User = {
    name: 'name',
}

const test4: User = {
    name: 'name',
    age: undefined
}
```

# NG パターン
最初はより短く下記のように書いていました。

```ts
type TransformedType<T> = {
  [K in keyof T as K extends `${infer O}_o` ? O : K]: K extends `${string}_o` ? T[K] | undefined : T[K]
};
```

この書き方だと、`age` が無い場合にエラーになってしまいます。

```ts
// エラー
const test3: User = {
    name: 'name',
}

// OK
const test4: User = {
    name: 'name',
    age: undefined
}
```

# 背景
API 側のアプリケーションから自動生成される**レスポンスのサンプルの json** からフロントエンドの型を自動生成しようとしたのが始まりです。
この json では optional かどうかが分からなかったため、キー名に optional かどうかが分かる情報を含めることにし、型ユーティリティ関数で型を作る方法を考えました。

# 参考
https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

# 関連
この問題を解決する方法として、複数のレスポンスを含めた json 配列から型を生成する方法も考えました。
Gormの使い方について

こんにちは。

GORMはデベロッパーフレンドリーを目指した、Go言語のORMライブラリです。
goを使ってGORMを使ってデータベース操作する必要があると思います。

# インストール

```
go get -u gorm.io/gorm
go get -u gorm.io/driver/sqlite
```

# データベーススキーマの作成

スキーマの作成の仕方についてみていきます。

## マイグレーション（Migrate）

Migrateは、接続先のスキーマを参照して、テーブルやカラムがなければ自動的に作ってくれるコマンドです。

![Screenshot 2023-07-17 at 6.23.52 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/92c8f5e7-efc6-d3ce-71f2-258ceb9380ad.png)

```
db.AutoMigrate(&User{})

db.AutoMigrate(&User{}, &Product{}, &Order{})

// Add table suffix when creating tables
db.Set("gorm:table_options", "ENGINE=InnoDB").AutoMigrate(&User{})

```

## 関連の貼り方

```
type CreditCard struct {
	gorm.Model
	Number string
	UserID uint
}

type User struct {
	gorm.Model
	Name        string
	CreditCards []CreditCard
}
```

Migrateコマンドは、一度に複数テーブル作成することもできるし、複数回呼び出すこともできるし。複数呼び出す場合、そのテーブル間で関連がある場合でも関連が作成されないので注意したい。以下に具体例を示します。

```
	db.AutoMigrate(&CreditCard{})
	db.AutoMigrate(&User{})
```

これだと関連が作られる

```
	db.AutoMigrate(&CreditCard{}, &User{})
```

# データの登録方法

## データの登録

以下のような形でMapを直接指定して登録することが可能です。

```
db.Model(&Product{}).Create(map[string]interface{}{
	"Code": "jinzhu", "Price": 18,
})
```

存在しない項目が指定された場合は以下のようなエラーが出力されて登録できないです。

> 2023/07/11 18:02:12 main.go:70 Error 1054: Unknown column 'Codec' in 'field list’

# データの検索方法

最後に登録したデータの検索の仕方を見ていきます。

## データの取得

データの取得は、処理実行の戻り値に返ってくるのではなく、まず変数を作って処理を実行するとそのアドレスにDBからの値が設定されるという仕組みです。

```
db.Where(&User{Name: "jinzhu", Age: 0}).Find(&users)
// SELECT * FROM users WHERE name = "jinzhu";
```

## mapで検索

```
db.Where(map[string]interface{}{"Name": "jinzhu", "Age": 0}).Find(&users)
// SELECT * FROM users WHERE name = "jinzhu" AND age = 0;
```

こんな感じで変数に一旦入れて登録もできる

```
user := User{
  Name:            "pointpoint",
  BillingAddress:  Address{Address1: "Billing Address - Address 1"},
  ShippingAddress: Address{Address1: "Shipping Address - Address 1"},
  Emails:          []Email{
    {Email: "pointpoint@example.com"},
    {Email: "pointpoint1@example.com"},
  },
  Languages:       []Language{
    {Name: "JP"},
    {Name: "EN"},
  },
}

db.Create(&user)

```

## RawSqlで取得

複雑なデータを取ってくる場合だと、どうしてもやっぱりスケール直接つなげて取得をするしかないケースもある。そういった時にどうやって取得をするかと言う0をいかに上げる。

```
type Result struct {
	ID   int
	Name string
	Age  int
}
// raw SQLで検索
var results []Result
db.Raw("SELECT id, name, age FROM users WHERE age > ?", 20).Scan(&results)
for index, result := range results {
   	fmt.Println("テスト", index, result.ID, result.Name)
}

```

以下の様に、mapを使って変数を渡すこともできる

```
db.Raw("SELECT * FROM users WHERE (name = @name AND age > @age)",
		map[string]interface{}{"name": "test", "age": 11}).Find(&results)
```

## データの削除

Gormでは削除はSoftDeleteが基本となっている様で、以下の様に削除するとdeletedAtに削除した時刻が入ります。
削除フラグだと、データを消して再度同じデータを登録しようとしたときにキー重複エラーを起こしてしまいがちだけど、この方法ならそれも避けられると思います。

```
lang1 := Language{
	Code: "FN",
	Name: "フランス"}
DB.Create(&lang1)
fmt.Println("Language削除します")
DB.Delete(&lang1)

```

Gorm使ったデータの登録変更削除のやり方を見てきました。

参考情報：
https://gorm.io/ja_JP/docs/

以上です。
ありがとうございます。
Jetson AGX Orin でROS 2 Humbleを動かす

# 環境

| Component  | Version      |
|------------|--------------|
| Jetson         | Jetson AGX Orin 32GB 開発者キット |
| Jetpack  | 5.1.1 |
| L4T         | R35.3.1|

執筆時時点で最新

# Docker imageの作成

jetson-containersを使用

https://github.com/dusty-nv/jetson-containers




```bash
git clone https://github.com/dusty-nv/jetson-containers
cd jetson-containers
```

ROS2 Humbleのimage のビルド

```bash
./scripts/docker_build_ros.sh --distro humble --package desktop
```

(2023/7/17時点で./ros2_build.shで失敗する https://github.com/dusty-nv/jetson-containers/issues/260)


またはdokcer HubからImageをpullする

```bash
docker pull dustynv/ros:humble-desktop-l4t-r35.3.1
```

```bash
jetson@ubuntu:~$ sudo docker images
REPOSITORY                   TAG                          IMAGE ID       CREATED          SIZE
dustynv/ros                  humble-desktop-l4t-r35.3.1   9b298d9c584d   2 months ago     12.8GB
nvcr.io/nvidia/l4t-jetpack   r35.3.1                      ff2dd43d5687   3 months ago     9.77GB
```

# Dokcer コンテナの起動


```bash
 ./scripts/docker_run.sh -c dustynv/ros:humble-desktop-l4t-r35.3.1
```


rviz2などが動くか確認
```bash
rviz2
```

![Screenshot from 2023-07-17 18-27-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/33dd265c-fa98-a836-10dd-bbd908bc4b40.png)
2023年7月現在のSAP Connector for Microsoft .NETのバージョンについて確認してみる

https://qiita.com/SAITO_Keita/items/59b52010c6ff908b5557

以前、`Windows PowerShell`から`SAP Connector for Microsoft .NET`を利用してSAPを操作する記事を書きました。

記事では、`SAP Connector for Microsoft .NET 3.0`を利用しており、サポート期限は`For the .NET 4.0 variant support will be offered until December 31, 2022.`と記載されていました。

2023年にもなり、`SAP Connector for Microsoft .NET 3.1`も出てきたので、改めて`SAP Connector for Microsoft .NET`の状況を確認してみます。

## ドキュメント

[856863 - SAP NCo Release and Support Strategy](https://me.sap.com/notes/856863/E)

[3152653 - SAP NCo 3.1 release and support strategy](https://me.sap.com/notes/3152653/E)

## サポート期限を確認してみる

※あくまで2023年7月現在の筆者まとめとなるため、正確な所はご自身で該当ノートを確認のほどよろしくお願い致します。

[856863 - SAP NCo Release and Support Strategy](https://me.sap.com/notes/856863/E)
に`Nco`のサポート方針が記載されているのでこちらを確認した所、新たに、`NCo` 3.1については　[3152653 - SAP NCo 3.1 release and support strategy](https://me.sap.com/notes/3152653/E)　なるノートがでており、今までのバージョンとは別のノートで方針が出ていました。

またこちらのページにもサポート期限について記載がありました、[SAP Connector for Microsoft .NET Support](https://support.sap.com/en/product/connectors/msnet.html?anchorId=section_698553638)が、基本はノート確認しましょう。

#### NCo バージョン 1.0 について

現在サポート終了済み（2004年12月31日）

#### NCo バージョン 2.0 について

現在サポート終了済み

>Note that support and maintenance for SAP .NET Connector 2.0 (runtime parts) ended on March 31, 2013.
Note that support and maintenance for the SAP .NET Connector 2.0 Proxy Wizard for Visual Studio .NET (Visual Studio 2003) expired on December 31, 2009, due to the fact that the Microsoft Visual Studio .NET/2003 is no longer supported.

#### NCo バージョン 3.0 については

.Net Framework 2.0ランタイム版は2018年7月31日にサポート終了済み

.Net Framework 4.0ランタイム版は2023年10月31日にサポート終了。

#### NCo バージョン 3.1 については

後続バージョンが出てから1年　もしくは　2028年12月31日　のいずれか早い方までサポートされるようです。

## 総評

今回、NCoのバージョン3.1が出たことにより、今まで少しずつ伸びてきたサポート期限が一気に伸びた印象を受けます。

`Windows`で`.Net Framework`から`SAP`を操作したい場合は、まだまだ`NCo`は健在といった感はありますが。

[Microsoft .NET Framework](https://learn.microsoft.com/en-us/lifecycle/products/microsoft-net-framework)

`.Net Framework 4.x`のEOLも合わせて、どこまで`NCo`は`.Net Framework`で行くのかこれからも時を理確認したいと思います。
PagerDuty 設定ガイド (検知編3) - Service Integrationの設定

この記事では、Service Integrationの設定方法を説明します。
![EO_ServiceIntegration.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2777160/577c484b-2569-2765-9fbe-fbe118e7775e.png)

[Global Integration](https://qiita.com/ymotomu/items/1edf89eb77a03f8b64e3)と異なり、Service Integrationはサービスに直接紐付けられたIntegration Key(とEmail Address)を発行します。そのため、Routing Rulesを設定する必要はありません。

その代わり、サービス毎に異なるIntegration Keyを利用して送信するよう、監視ツール側を設定する必要があります。

また、Service Integrationに対してEmailで送られたアラートは、Service Orchestration Ruleは適用されません。[Email Filter](https://support.pagerduty.com/main/lang-ja/docs/email-management-filters-and-rules)を利用して制御する必要があります。
## Service Integrationの作成
(1) Services > Service Directory を開き、Integrationを作成するサービスをクリック

(2) Integrationsタブを開き、「+ Add an Integration」をクリック
![Add_an_Integration.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2777160/fd9d1c42-8093-f6cf-5d35-0cce13ec69e8.png)
(3) Integrationを追加する監視ツールを選択し、「Add」をクリック
![Add_Integrations.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2777160/991fa1bd-9dc0-ff08-c2ac-aecd5ca3a110.png)
(4) 作成されたIntegration KeyとIntegration URLは、監視ツール側の設定で必要になります。メモ帳などに保存してください。
![ServiceIntegrationKey.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2777160/0463987b-589e-c21a-bc01-4b0cec1af8da.png)

## PagerDuty設定ガイド 目次
**[検知編](https://qiita.com/ymotomu/items/f9e8de2dfa94394df54c)** | [トリアージ編](https://qiita.com/ymotomu/items/1a40022feabae53e85c9) | [動員編](https://qiita.com/ymotomu/items/e6d13e5284a62e3a1100) | 解決編 | 学習編
1. [PagerDutyにアラートを送る方法](https://qiita.com/ymotomu/items/f9e8de2dfa94394df54c)
1. [Global Integrationの設定](https://qiita.com/ymotomu/items/1edf89eb77a03f8b64e3)
1. Service Integrationの設定 << イマココ
1. [監視ツールの設定](https://qiita.com/ymotomu/items/425a1432cfbc7b8bc085)
## 参考リソース
* [Services and Integrations](https://support.pagerduty.com/main/lang-ja/docs/services-and-integrations#add-integrations-to-an-existing-service)
* [PagerDuty Integration Library](https://www.pagerduty.com/integrations/) - PagerDutyと連携できるツール・連携方法のドキュメント
* [システム障害を未然に防ぐ「インシデント管理・対応」とは](https://www.pagerduty.co.jp/blog/what-is-incident-response)
* [PagerDuty - 14日間 無料トライアル](https://www.pagerduty.co.jp/lp/free-trial/)
【MySQL】データベース基礎知識［DSC + SELECT編］

### 初学者向け兼個人向けのデータベース知識まとめです
+ MySQLの文法などの簡易的まとめ
+ 自分用のメモ
# SQLでの周知事項
+ SQLにおけるコマンド文は大文字・小文字の区別を行わない
+ 一文の終わりには；（セミコロン）を記述

# DESCRIBEコマンド
+ 表構造の確認
```sql:
DESC 表名;
DESCRIBE　表名;
```


# SELEC文
#### 基本文
```sql:
  SELECT <列リスト> FROM [表名];
```
#### 重複文を排除する
```sql:
  SELECT DISTINCT <列名> FROM [表名];
```
#### 行制限 WHERE句
```sql:
  SELECT <列名> FROM [表名] WHERE <列名 演算子 値>;
```
WHERE句における論理演算子を複数使用する際は
　NOT→AND→ORの順で評価される
　()を使用することで優先付が可能
#### 行ソート ORDER BY句
```sql:
  SELECT <列名> FROM [表名] WHERE 検索条件 ORDER BY 条件　ASC/DESC;
```
#### グループ化での抽出・条件検索
```sql
  SELECT <列名> FROM [表名] (WHERE) GROUP BY グループ列;
  SELECT <列名> FROM [表名] GROUP BY グループ HAVING 条件式;

  /*クラス毎のテストの平均点数*/
  SELECT class_no, AVG(test) from grades GROUP BY class_no;
``` 
#### 副問い合わせ
WHERE・HAVING・FROM にて別に埋め込まれるSELECT文
```sql:
SELECT 列名 FROM 表名 WHERE 列名 比較演算子 (SELECT ~ FROM ~);
```

>+ 比較演算子で等しくないは「<>」「！＝」
>+ ＝ で繋ぐのは返り値が１つの時のみ
>+ 複数行副問い合わせで使用する演算子「ANY」「ALL」「IN」

## 結合によるSELECT
#### 内部結合
2つ以上の表を共通の値に従って結合を行う。
列名が異なっていてもデータ型が同一であれば結合可能
```sql:
/*１つ目の記述法*/
SELECT 列名 FROM 表１ JOIN 表２ ON 表１.列名 = 表２.列名;
/*２つ目の記述法*/
SELECT 列名 FROM 表１, 表２ ON 表１.列名 = 表２.列名;
/*なお二つ目に関しては可読性が低下するため一部推奨ではない*/

/*表member1,classからclubとteacherを引き出す（別名使用例）*/
SELECT m.club, c.teacher  
 FROM member1 m JOIN class c ON m.name = c.name;

/*ON句以外の結合方法*/
① SELECT 列名 FROM 表１ NATURAL JOIN 表２;
② SELECT 列名 FROM 表１ JOIN 表２ USING(共通列名);
```
NATURAL JOIN句は結合する表の同じ列名を自動結合する
USING句は同じ列名のうち指定された列により結合を行う

#### 外部結合
内部結合とは異なり結合条件に一致しない行の表示も可能となる。
>例）片方の列にはNULL値が含まれているが、他方の表の列にはNULL値が含まれていない

表記法：内部結合の「JOIN」に基準表に向けてLEFT・RIGHTを付ける

#### クロス結合
対象表の全ての組み合わせが表示できる。
（表１の行数×表２の行数）分の結果件数を得ることができる
```sql:
 SELECT 列名　FROM 表１ CROSS JOIN 表２;
```

#### 集合演算
2つ以上の問い合わせ結果から１つの結果を生成
+ UNION
複数の問い合わせ結果から重複するものを除いた結果を生成（Distinct利用時と同じ）
+ UNION ALL
複数の問い合わせ結果から重複するものも含めた結果を生成
```sql:
SELECT 列名A FROM 表１ UNION (ALL) SELECT 列名A FROM 表２ ;
```
Laravel コマンド一覧（備忘録）

## 初めに
Laravelで使用する便利コマンドをすぐ使えるように一覧にしました。
随時更新していきます。

## コマンド一覧

__作成系__
```terminal:
// Controller作成
php artisan make:controller TestController

// モデル作成
php artisan make:model Test
```

__デバッグ系__
```terminal:
php artisan tinker
```

__キャッシュクリア系__
```terminal:
php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear
```

## 最後に
最後まで閲覧いただきありがとうございました。
ご意見、ご指摘ありましたら、コメントお願いいたします。
AIツールのディレクトリウェブサイトを作成しました. 皆様のご意見をお聞かせください

この数ヶ月間、ボーイフレンドと私はPopWebToolsという新しいプロジェクトに取り組んできた。これは、SaaSのオーナーやユーザーがワークフローを自動化し、時間を節約し、成果を向上させるのに役立つAIツールのメガディレクトリです。

セールスやマーケティングから、カスタマーサポートや製品開発まで、あらゆるツールが含まれています。リードの生成、パーソナライズされたコンテンツの作成、顧客満足度の向上など、どのようなツールをお探しでも、[PopWebTools](http://www.popwebtools.com) できっと見つかるはずです。

我々はまだ初期段階ですが、PopWebToolsをSaaSコミュニティと共有できることに興奮しています。皆様のご意見、ご感想をお待ちしております。私たちが見落としている素晴らしいAIツールをご存知でしたら、ぜひ教えてください。

AIを統合したSaaSツールも探しています。PopWebToolsに適していると思われるツールがありましたら、是非ディレクトリに投稿してください。

ご協力ありがとうございました！

P.S. PopWebToolsについてもっと知りたい方は、ウェブサイトをチェックするか、Twitterでフォローしてください。
[TypeScript]TypeAliasとinterfaceType - TypeAlias

```typescript
let x: number = 10;
```
xという変数のタイプはnumberタイプということを意味します。数字だけが入ることができるように制限するようになる機能といえます。

しかし、ここからさらに進んで、このnumberとは数字という意味だけで、その他の意味は全くありません。 xに10という数字の値が座標のことなのか、それとも他の意味が含まれているのかが分かりません、 
もし座標という意味をここに入れたいのなら、
```typescript
let xPosition: number = 10;
```
とも言えるが、このnumberというタイプそのものに意味を付与したいとき、タイプ別称を使用することができます。
```typescript
export type YesOrNo = 'Y' | 'N';
// YseOrNo : タイプ別称(alias)
// 'Y' | 'N' : YesOrNoタイプは定義した値のみ入る(literal type)

export type DayOfWeek = 'Mon'|'Tue'|'Wed'|'Thu'|'Fri'|'Sat'|'Sun'|;
// DayOfWeek : タイプ別称(alias)
// 'Mon'|'Tue'|'Wed'|'Thu'|'Fri'|'Sat'|'Sun'|; : DayOfWeek タイプは定義した値のみ入ることができる(literal type)

export type Name = string;
// Name : タイプ別称(alias)
// string : Nameというタイプはstringのみ可能

export type FooFunction = () => string; 
// FooFunctionタイプは、因子もなく戻り値がstringな関数


// 使用例
const active: YesOrNo = 'Y'
const today: DayOfWeek = 'Sun'
const foo: FooFunction = function() {
  return: 'return FooFunction';
}
```
Railsで'application.css'以外のCSSファイルを作成する手順

## はじめに
#### 実装したこと
レスポンシブ対応のために新しいCSSファイルを作成と適用する手順を記事にします。

#### 動作環境
Ruby 3.1.2
Rails 6.1.7.3

## 手順
１\. まず app/assets/stylesheetsディレクトリ内に、'responsive.css'という名前の新しいCSSファイルを作成します。(ファイル名はなんでも問題ないです)

２\. responsive.cssファイルを開き、メディアクエリなどのレスポンシブデザインに必要なスタイルルールを記述します。例えば、以下のようなコードを追加します。
~~~ responsive.css
/* 例: スマートフォンサイズの場合に適用されるスタイル */
@media screen and (max-width: 520px) {
  /* スタイルの定義 */
}

/* 例: タブレットサイズの場合に適用されるスタイル */
@media screen and (min-width: 521px) and (max-width: 960px) {
  /* スタイルの定義 */
}

/* 例: デスクトップサイズの場合に適用されるスタイル */
@media screen and (min-width: 961px) {
  /* スタイルの定義 */
}
~~~

上記の例では、スマートフォン、タブレット、デスクトップサイズのそれぞれに対して異なるスタイルを適用するためのメディアクエリが含まれています。

3\. app/assets/stylesheets/application.cssファイルを開きます。
application.cssファイル内で、新しいresponsive.cssファイルをインポートするためのディレクティブを追加します。以下のように記述します。

~~~application.css
/*
 *= require responsive
 */
~~~

これにより、responsive.cssファイルがapplication.cssに結合され、アプリケーション全体で使用されるCSSファイルとなります。
>**それぞれのメディアクエリ用CSSの読み込み優先順位を確認しよう**
>CSSの優先順位も注意が必要です。それぞれのメディアクエリ用のCSSが通常のCSSより下に記載されているか確認しましょう。今回は上記コードを'application.css'の最下部へ記載することとします。


４\.'application.html.erb'ファイルで、responsive.cssファイルが適用されるように指定します。
通常、headセクション内のstylesheet_link_tagヘルパーを使用してCSSファイルを読み込みます。今回は'application.html.erb'ファイルのheadセクション内に以下のように記述します。
~~~application.html.erb
<%= stylesheet_link_tag 'application', 'responsive', media: 'all', 'data-turbolinks-track': 'reload' %>
~~~
以上の手順に従うと、Railsアプリケーションでresponsive.cssファイルを使用することができます。

## 終わりに
忘れないようにアウトプットして記事にしております。
誤りなどがあれば、コメントいただけますと幸いです。閲覧いただきありがとうございます。

## 参考にさせていただいた記事
https://www.beginnerweb.net/responsivetr.html#CSS-3
【WordPress】管理画面でアップロードしようとしたらエラーを表示

:hatching_chick::sweat_drops:WordPressの管理画面でテーマファイルをインストールしようとしたら、次のエラーを表示した！

**Warning: POST Content-Length of 15409102 bytes exceeds the limit of 8388608 bytes in Unknown on line x**    

<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473595/b46fcdb6-6f2b-b5cc-4261-e81d6f4a5647.png" alt="エラー画面">

 - 次の対応時に発生

https://qiita.com/834_andon/items/65d34ea635980ab18257


# エラー概要

### 容量制限を超えたファイルをアップロードしようとしたため発生

 - php.iniで設定している、アップロードファイルの容量制限を超えたためエラーが発生した
   ※ php.ini：PHPで書いたプログラムの実行に関する設定ファイル
　

 - サーバへファイルをアップロードする際に関わるディレクティブ
   + memory_limit：PHPスクリプトがサーバ内で確保できるメモリ容量
   ※ デフォルト値："128M"(128MB)
   + upload_max_filesize：アップロードできるファイルの最大サイズ
   ※ デフォルト値："2M"(2MB)
   + post_max_size：POST送信を許可するデータの最大サイズ
   ※ デフォルト値："8M"(8MB)
   ※ post_max_sizeの値は、
   　 upload_max_filesizeよりも大きく、memory_limitよりも小さく設定する必要がある
　
 - 今回アップロードしようとしたテーマファイルのサイズ：15409102 bytes(約15MB)
   →upload_max_filesize、post_max_sizeの設定値をオーバーしたのでアップロードできなかった

# 対応内容

### php.iniのディレクティブ値を変更する

① php.iniをエディタで開く
　※設定ファイル：/opt/homebrew/etc/php/8.2/php.ini
　
② 次のように記述を修正して保存する

<dd>
<pre>[修正前]
post_max_size = 8M
upload_max_filesize = 2M
　
[修正後]
post_max_size = 128M
upload_max_filesize = 128M
</pre>
</dd>

③ Apacheを再起動する

<dd>
<pre>brew services restart httpd
</pre>
</dd>

**↓↓**
アップロード画面をリダイレクトして、ファイルをアップロードしたら成功した！
【WordPress】テーマを設定してみた！

:hatching_chick:WordPressでテーマを設定してみよう!!
 
# 「テーマ」って何？

### 「テーマ」とは

 - WordPressを使用したWebサイトに設定できる、デザインやレイアウトのテンプレート
 - WordPressの管理画面内でクリックするだけでテーマを設定できる
 - 無償で使用できるものもあれば、有償で使用できるものもある
 - 公式テーマ・国産テーマ・海外製テーマがある

|テーマの種類|内容|
|:---|:---|
|公式テーマ|一定の品質やガイドラインを満たしているとWordPressコミュニティメンバーによって認定を受けたテーマ|
|国産テーマ|国内の企業や個人が作成したテーマ|
|海外製テーマ|日本国外の企業や個人が作成したテーマ|

 - ダウンロードしたテーマファイル内のプログラムを修正して、カスタマイズすることもできる
　
# テーマを使ってみよう！

### 1. 使いたいテーマを探す

 - 次の方法でテーマを探す
   * [WordPress公式サイト内のテーマ検索ページ](https://ja.wordpress.org/themes/)
   もしくは管理画面内のテーマ設定画面探す 
   →一定の品質基準を満たしていると認定されている公式テーマを探すことができる
   * 「WordPress テーマ」などのキーワードで検索エンジンで探す
   →おすすめのテーマを集約したサイト記事などで国産テーマや海外製テーマも探すことができる

<details>
<summary>※ 管理画面内で公式テーマを探す方法はコチラ</summary>
① 管理画面内のサイドメニュー「外観」>「テーマ」の順に押下して、テーマの設定画面を表示
<p></p>

②「新規追加」ボタンか「新しいテーマを追加」を押下
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473595/4147b56c-37a5-b8c1-9b62-3987a24528f9.jpeg" alt="WordPress管理画面内　テーマ設定画面">

③ 「テーマを追加」画面で公式テーマ検索できる
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473595/f2e7ef50-33dc-fd55-f892-00ae302064ac.png" alt="WordPress管理画面内　テーマ設定画面">
</details>


 - テーマを探す時のポイント
   * 公式テーマや国産テーマを使うのがベター、海外製テーマは避けた方が良き
     * 海外製テーマだと、日本語でのドキュメントが少なかったりする
       →当該テーマを使ってトラブルが発生した時にすぐ対処できないリスクが高い
     * 日本語でテキストを表示する際に、変な改行やスペースが入る可能性がある
   * アップデートの頻度が少ないかったり、前回のアップデートが古いテーマは避ける
     * アップデートしたWordPressコアと適合できなくて不具合が生じるリスクが高まる
     * 私がテーマを探す時の基準は、「前回のアップデートが１年以内に行われているか」
   * ドキュメントやサイト記事が少ないテーマは避ける
     * 海外製テーマを避ける理由と同じく、不具合が生じた時の対処が遅れる
   * レスポンシブに対応していないテーマは避ける
     * レスポンシブ：Webサイトを表示する画面サイズによって、サイトのレイアウトやデザインが変わるように対応すること
     * レスポンシブに対応してないと、表示する端末や画面サイズによってコンテンツが見づらくなったり、使い勝手が悪くなる


### 2. テーマをインストールしてサイトに適用しよう

 - テーマによってインストール方法が複数ある

#### WordPressの公式テーマを管理画面でインストールする場合

① 管理画面内のサイドメニュー「外観」>「テーマ」の順に押下して、テーマの設定画面を表示
　
② 「新規追加」ボタンか「新しいテーマを追加」を押下して、「テーマを追加」画面を表示
　
③ 「テーマを追加」画面で使いたいテーマを検索
 　
④ 一覧画面に表示しているテーマの画像にカーソルを載せた時、もしくはテーマの詳細画面内で
　「インストール」ボタン表示するので押下
　
⑤ インストールできたら次のように表示が変わるので、「有効化」ボタンを押下
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473595/ef19ed0f-e385-cc64-86a6-57907126988d.png" alt="WordPress管理画面内　テーマインストール完了時">
　
#### その他テーマを.zipファイルでインストールする場合

① テーマファイル(.zip)をダウンロードする
　※ダウンロードした.zipファイルは、
　　アップロード時に.zip形式しか選択できないため、展開しないでおく
　
② 管理画面内のサイドメニュー「外観」>「テーマ」の順に押下して、テーマの設定画面を表示
　
③ 「新規追加」ボタンか「新しいテーマを追加」を押下して、「テーマを追加」画面を表示
　
④ 見出し「テーマを追加」の右側に表示している「テーマのアップロード」ボタンを押下して、テーマのアップロードエリアを表示する
　
⑤ ①でダウンロードしたテーマファイルを選択して、「今すぐインストール」ボタンを押下
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473595/51098443-e109-0528-fd70-3925e4be64b9.jpeg" alt="テーマ　アップロード画面">

　※インストールエラー発生したので、php.iniを修正して対応
　　エラー内容：**Warning: POST Content-Length of * bytes exceeds the limit of 8388608 bytes in Unknown on line x** 

　　対応記事↓

https://qiita.com/834_andon/items/1031c61e8d6813845b67

　
⑥ インストール状況を表示するので、「テーマのインストールが完了しました。」と表示したら、「有効化」を押下
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473595/aec2c974-7794-5cef-0c48-97f90ad26b77.png" alt="テーマ　インストール状況確認画面">
　

**↓↓**

有効化したテーマが適用された:fist_tone2: