OmniAICreator/Qiita-1.07M huggingface dataset:
Tailwind初心者あるある

みなさんこんにちは、お久しぶりの @yuuki-h です！
今回はたまたま昔の自分のコードを眺めるきっかけがあり、
「うわ、Tailwind使い慣れてないやん、、、」と思った３つの初心者あるあるを
恥ずかしながら、掲載します！


## TL;DR

1. 公式ドキュメント読むべし
1. Tailwindの実装にはCSSの知識が必要不可欠
1. Arbitrary valuesじゃなくて、公式の基本的なスタイル or `tailwind.config`を活用

## 1. なぜか公式ドキュメントを見ない

初めてTailwindを使うと、なぜか公式ドキュメントを見ずにググったりGPTに聞いたりしてしまうことってありますよね。
ただ、それって **「公式が有能なことを知らないだけ」** だと思うんです。
（その上、Tailwindのドキュメントは英語で書かれているのでスルーしやすい気もします）

しかし、Tailwindのドキュメントは英語がほぼ読めなくても
ぱっと見で伝わるので、これを機にDocsを読んでいただきたいです！

例えば、CSSの`border-style`であれば、こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/e3a65471-985c-417b-c356-f0d6b13ece7f.png)

ぱっと見、CSSのプロパティと一致するクラス名がわかるので
これを適用するだけです！
「英語のドキュメント、、、」と思うと読みたくなくなりますが
**純粋にCSSが書いてあるだけ**と思えば、読める気がしてきませんか？

## 2. どのクラスを使えばいいかわからない

Tailwindを使う際、どのクラスを使えば良いか分からないことって結構ありますが、これはCSSのプロパティに慣れていない人や、TailwindとCSSのプロパティ名が若干異なることが原因です。

### そもそもCSSのプロパティわからない

CSSのプロパティに不慣れな人がTailwindを使うと、どのクラスを選べば良いか戸惑うことがあります。これは悲しいことにCSSの知識不足、、、なので、検索してどんなプロパティが該当するのか見るのが正解です。

検索キーワード例：「CSS 要素　中央寄せ」など
CSSの記事はたくさんあるので、体系的に勉強するよりも時間を優先すべき場合は
上記のキーワードのような形で **「CSS 対象　やりたいこと」** と検索すれば大抵のことは解決します！（ChatGPTでもOKです）

### TailwindとCSSのプロパティ名が若干違う

これは、TailwindがCSSのプロパティ名をショートカットしたクラスを提供していることが原因です。しかし、これもTailwind公式でなんとかなります。

例えば、CSSの`media`ってTailwindではどう実装するか知りたい場合、
公式ドキュメントの検索バーで以下のように入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/29bbeea9-2fc8-a5ac-f4d5-ba7d890fa5fa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/2674d397-b6fb-5de4-666e-8e40f82eb508.png)
すると、いかにも関連がありそうなページが表示されます。
この中で確認すれば、おおよそ当たります！

## 3. Arbitrary values使いがち

個人的に、自分のコードではこれが一番多かった気がします。
TailwindではArbitrary values（任意の値）を使ってスタイリングすることができますが、使いすぎると可読性が損なわれることがあります。

ただ、**Tailwindに元々用意されてるなら、使わない方がわかりやすい**です。

Tailwindは基本的なスタイルが予め用意されていて、Arbitrary valuesを使う前に、公式のスタイルを利用することで、Tailwindに慣れている人やデザイナーの方などとのコミュニケーションがスムーズになりますし、実装も共通化されるので可読性も上がります。

 自分のコードでよく見受けられたのは以下の感じでした。
 例：`w-[100%]`→`w-full` , `m-[0]` →`m-0` , `py-[8px]` →`py-2`
これもドキュメントを見ればよくわかります！

### Tailwindは4 point grid systemの思想

Tailwindは4 point grid systemを採用しています。このシステムを理解し、適切に利用することで、一貫性のあるデザインを構築できます。また、この思想は見栄えなどをよくする効果があります。
具体的には、以下の記事を読むとわかりやすいと思います！

https://medium.com/@aratidube12lns/4-point-grid-system-for-more-consistent-interface-design-efea81dea3f3

### 頻繁に使うカラー、フォント、大きさなどはconfigに追加すべき

プロジェクトで頻繁に使用するカラーやフォント、サイズなどは、Tailwindのconfigファイルに追加しておくと、一貫性を保ちやすくなります。Arbitrary valuesよりもconfigの活用を検討してみましょう！

## 終わりに
以上がTailwind初心者あるあるでした！
このポイントを実践するだけでTailwind初心者は脱することができるのではないかと思います！
お疲れ様でした〜

## 参考文献

https://tailwindcss.com/docs/installation

https://medium.com/@aratidube12lns/4-point-grid-system-for-more-consistent-interface-design-efea81dea3f3
JSONからHTMLに変換するツールを作ってみた

https://github.com/KajizukaTaichi/Json-Html/

## はじめに
HTMLでのデータ表現は分かりやすいですが時に冗長であり、特に複雑なデータ構造を表現する際には保守性が低くなりがちです。
そこで、JSONのシンプルで見やすいデータ形式を利用して、HTMLの生成を行いたいと考えてこのツールを作りました。

## プログラムの概要
以下は、Pythonを使用してJSONファイルをHTMLに変換するコマンドラインツールです。このツールでは、`argparse`を使ってコマンドライン引数を処理し、JSONデータを再帰的にHTMLに変換します。

```python
import os
import json
import argparse as ap
import webbrowser as wb

# コマンドライン引数の設定
parser = ap.ArgumentParser(description='jsonデータからHTMLを作成するツール')
parser.add_argument('input_file', help='入力するjsonファイル')
parser.add_argument('-o', '--open', action='store_true', help='作成したHTMLをブラウザで開きます')
args = parser.parse_args()

def dict_html(struct: dict, indent: int) -> str:
    '''
    辞書データをHTMLテキストに変換します。    
    '''

    html_text = ""
    for (tag, value) in struct.items():    
        html_text += '\t'*indent + f"<{tag}>\n"
        if isinstance(value, dict):
            # 再帰的に呼び出す
            html_text += dict_html(value, indent+1)
        else:
            html_text += '\t'*indent + f"\t{value}\n"
        html_text += '\t'*indent + f"</{tag.split(' ')[0]}>\n"
    return html_text


def change_extension(file_path: str, new_extension: str):
    '''
    ファイルの拡張子を変更します
    '''
    base_path, _ = os.path.splitext(file_path)
    new_file_path = base_path + new_extension    
    return new_file_path

def main():
    path: str = args.input_file

    # ファイルの存在確認
    if not os.path.exists(path):
        print("指定されたファイルは存在しません。")
        return
    
    # ファイルがJSON形式かどうか確認
    try:
        with open(path, mode="r", encoding="utf-8") as file:
            struct: dict = json.load(file)
    except json.JSONDecodeError as e:
        print("JSON形式のファイルではありません。")
        return
    
    html = dict_html(struct, 0)

    new_path = change_extension(path, ".html")
    with open(new_path, mode="w", encoding="utf-8") as html_file:
        html_file.write(html)

    is_open = args.open
    if is_open:
        wb.open(new_path)


if __name__ == "__main__":
    main()
```
## 実行
WebページをJSON(19行)ファイルで保存します

```json
{
    "html": {
        "head": {
            "title": "Json-Html"
        },
        "body": {
            "h1": "Json-Html",
            "div": {
                "p": "JSONからHTMLに変換するツールを作ってみた",
                "a href=https://www.github.com/KajizukaTaichi/Json-Html": {
                    "button": "Githubリポジトリ"
                }
            },
            "footer": {
                "p": "&copy; 2023 梶塚太智"
            }
        }
    }
}
```
環境に拠りますが、このJSONファイルを以下のコマンドでHTML変換します
```bash
> python main.py index.json
```
するとHTMLファイルが作成されます。以下が変換後のHTML(27行)です。
```html
<html>
	<head>
		<title>
			Json-Html
		</title>
	</head>
	<body>
		<h1>
			Json-Html
		</h1>
		<div>
			<p>
				JSONからHTMLに変換するツールを作ってみた
			</p>
			<a href="https://www.github.com/KajizukaTaichi/Json-Html">
				<button>
					Githubリポジトリ
				</button>
			</a>
		</div>
		<footer>
			<p>
				&copy; 2023 梶塚太智
			</p>
		</footer>
	</body>
</html>
```
## まとめ
JSON形式のデータをHTMLに変換することで、よりシンプルで可読性の高いデータ表現が可能です。このツールを作成することで、冗長なHTMLコーディングの手間を省けます。

改善点などのアイデアがあれば、是非Githubにてコントリビューションして頂けると幸いです。
CSSでの色の指定方法

#### CSSで文字の色や背景の色などを指定する方法は３通りあります。

### 1. カラーコードで指定
一般的な方法で**6桁の英数字**で指定します。
`#`から始まり、**0~9の数字**と**a~fのアルファベット**を組み合わせて表現します（16文字を使った16進数です）。

6桁のうち
・左2つは赤（Red）
・中央2つは緑（Green）
・右2つは青（Blue）
になります。

「0」に近いほど色は暗くなり、「f」に近いほど色は明るくなります。
例
```
#000000 → 黒
#ffffff → 白
```

同じ数字が連続する場合、3桁に省略できます。
```
#ffffff → #fff
```

### 2. RGB値で指定
RGB（赤・緑・青）の数値を組み合わせて指定する方法です。

記述方法は
`rgb(赤の数値・緑の数値・青の数値)`です。
**数値は0~255**まであり、「0」が一番暗く、数値が上がるほど明るくなります。
```
rgb(0,0,0) → 黒
rgb(255,255,255) → 白
```

透明度を表す**Alpha値**も指定できます。
記述方法は
`rgba(赤の数値・緑の数値・青の数値・透明度)`です。
**透明度は0~1**で、「0」が透明、「1」不透明になります。
```
rgba(255,255,255,.5) → 白の半透明
```

### 3. 色の名前で指定
赤なら「red」のように**決められた名前**を使って指定する方法です。
どんな色か言葉から連想できるメリットはありますが、指定できる色が限られているため、細かい調整はできません。

https://www.colordic.org/

---
-補足-
カラーコードやRGBの値を調べたい時は、**カラーピッカー**を使うと簡単に調べられます。
「カラーピッカー」を使って好みの色を探してみてください。
ジョングクの兄のインスタについて

韓国でも大人気のグループ世界的なアーティスト。
その名はBTS。
BTSの中でも人気のジョングクさんは幼少期のころバドミントン選手になることを夢見ていましたがひょんな因果からBTSとしてデビュー数r事になります。
当初は手厳しい指摘を受けながらもトップスターへと駆け上る彼の今後に注目です。
https://monamona2525.com/archives/2332
LlamaIndexで独自データを読み込んでAzureのChatGPTを強化してみた

## LlamaIndexとは？
独自のデータを読み込ませたChatGPTを利用したい場合の一つの選択肢として、LlamaIndexを利用しました。
様々なデータソースからデータを読み込みChatGPTとつなげます。
https://www.llamaindex.ai/

## 独自データの準備とLlamaIndexの導入
独自データをどう作るか？
ホームページからデータを取得？Json形式のデータを読み込む？Excelで取り込む？
これらはLlamaIndexで可能です。
独自データは追加・更新していくことが多いと思いますので、その運用に適したものを選択するとよいです。

## データの読み込みとChatGPTへの統合
今回利用するライブラリのバージョンは以下の通りです。
```
langchain==0.0.349
langchain-community==0.0.1
langchain-core==0.0.13
llama-hub==0.0.45
llama-index==0.8.62
openai==0.28.1
```
頻繁にバージョンアップしており、バージョンを指定していないと動作しなくなることがありました。

#### Json形式で読み込む例
```
from llama_hub.file.json import JSONReader

loader = JSONReader()
documents = loader.load_data(Path('data.json'))
```

バージョンの影響がライブラリの読み込みでありました。
公式サイトに書いてある手順ではライブラリが見つからずエラーとなり、上記のコードで動かすことができました。
https://llamahub.ai/l/file-json?from=all

## ChatGPTの強化と結果の評価
読み込むデータ形式によって回答に差が出るか？
これは差が出ました。

LlamaIndexは内部で配列のような形でデータを持ち、それらの中から類似度が高いコンテキスト情報を元にプロンプトを作成してChatGPTに問い合わせています。
例えばQ&Aが複数記載されたテキストファイルをまるごと取り込むのと、それぞれ分割して取り込むのでは、後者のほうが正しい情報を返してくれることが多かったです。Q&Aだからというのもあるかもしれません。

それを踏まえて、かつデータ更新をエンジニア以外に依頼する場合に、Excelで取り込むことが現時点ではベストでした。
ただし、llamahubに用意されているReaderを利用すると、セル内の改行が消えてしまうため、PandasでExcelを読み込んだ後、StringIterableReaderで一行ずつ読み込むようにしています。
```
df = pd.read_excel('./data/hr_qa.xlsx', sheet_name="data")
data = [f"{d['prompt']} \n {d['completion']}" for _, d in df.iterrows()]
documents = StringIterableReader().load_data(texts=data)
```
2行目で取り込む文章を加工しており、そこは工夫の余地があると考えています。

## まとめ
OpenAIからはChatGPTsが使えるようになったり、AzureでもAzure AI SearchとAzure OpenAIで独自のデータを利用したChatGPTを簡単に構築することができるようになってきました。
そのため、この方式を使うメリットは薄れてきていると思いますが、学習という観点からはやる価値があると思います。
上記の2つのサービスも同じような処理がされているはずですので、どのように固有のデータを使っているのか、実際にプログラムを書いて動かすと理解しやすかったです。
【業務効率化】バッチファイルを使って始業ルーティンをボタン1つで実行する

# 目次
* 背景
* 目的
* 結論
* 内容
* 所感
* Appendix

# 背景
pythonを知らない人が実行できるために、バッチファイルを使用しました ([過去の私の投稿を参照](https://qiita.com/r-shiomoto/items/ea8be09ffc21ea10a867))。このバッチファイルを上手く利用すれば、始業時に行うルーティン (chrome立ち上げて、zoom立ち上げて、outlook立ち上げてなど)をボタン1つで実行できるのではないかと考えつきました。

# 目的
バッチファイルを使って始業ルーティンをボタン1つで実行すること

# 結論
人によってルーティンは異なると思いますが、私の場合は以下のバッチファイルを用意しました。詳細は後述を参考にしてほしいのですが、設定することでタスクバーからバッチファイルを実行できるようにしています。
もしかすると、**Appendix**の方法で事足りる人もいるかも知れません...

```batch startup.bat
@echo off

rem encoding
chcp 65001

rem open browsers
start chrome.exe
start msedge.exe

rem open outlook
call outlook.exe
python create_mail.py

rem open man-hours excel
start "" "C:\xxx\作業用フォルダ\工数入力.xlsx"

rem remove it if you don't need
pause
```

# 内容
バッチファイルの作成の流れとコツを説明していきます。

## バッチファイルを作成する
特にツールは必要なく、メモ帳からtxtファイルを作成し、ファイル名を「startup.bat」にするだけです。名前はstartupでなくても構いません。

## ブラウザで指定のページを開く
Google chromeやMicroSoft Edgeなどのブラウザを開いた際に、指定のページを開きたい場合は、chromeの設定 (chrome://settings/onStartup)やedgeの設定 (edge://settings/startHomeNTP)にURLを登録すると良いです。
バッチファイルでは、`start chrome.exe URL`という記述で指定のページを開くことはできますが、ブラウザの設定内に登録した方がページの追加や削除がしやすいと思います。これによって、バッチファイルには`start chrome.exe`と`start msedge.exe`を書くだけでOKになります。

## 指定のアプリを開く
outlookを開きたい場合は、`call outlook.exe`と記述すればOKです。
先程のブラウザは`start`を、outlookは`call`を使い分けています。`start`は実行したコマンドの完了を待たずに次の実行に移り、`call`は完了を待ちます。outlookの場合は、outlookが立ち上がってから次のpythonによるメール作成プログラムを実行したいため、`call`を使用しています。
他のアプリを開きたい場合は、基本的に`start C:\xxx\yyy\Zoom.exe`のように、`start`とexeファイルまでのパスを記載すればOKです。

## エクセルを開く
エクセルを開くには、`start "" "C:\xxx\作業用フォルダ\工数入力.xlsx"`と記述します。start の第1引数はウィンドウのタイトルであり、第2引数に開きたいエクセルのパスを記述します。
多くの場合、ファイルパスやファイル名に日本語が含まれていると思います。その場合、文字化けして上手く起動しない可能性があります。これを防止するために、バッチファイルの冒頭に`chcp 65001`と記述しています。これによって文字コードがutf-8になります。shift-jisなら`chcp 932`です。上手く起動しないときは、色々と試してみてください。

## pauseコマンド
バッチファイルの最後にある`pause`は、コマンドプロンプトが閉じてしまうことを防いでいます。意図した通りの動きをするか確認できるまでは`pause`を残しておいて、バッチファイルが完成したら最終的に削除します。

## バッチファイルをタスクバーにピン留めする
バッチファイルを実行するには、バッチファイルをダブルクリックするのですが、タスクバーから実行できれば便利ですよね。方法は以下のとおりです。

1. バッチファイルを右クリックして、ショートカットを作成する
1. ショートカットを右クリックして、プロパティをクリックする
1. リンク先の頭に「cmd.exe /c 」を追記する (半角スペースに注意！)
1. お好みでアイコンの変更をする (.icoファイルが使用可能)
1. ショートカットを右クリックして、「タスクバーにピン留めする」をクリックする

アイコン選びは[このサイト](https://icon-icons.com/ja/)がおすすめです。

これでタスクバーからボタン1つで始業ルーティンを実行できるようになりました！是非、効率化してより生産性の高い仕事を一緒に頑張りましょう！

# 所感
正直、**Appendix**の方法で事足りるのですが、諸事情によりバッチファイルによる実行を勉強したので整理してみました。タスクバーから実行できるところに何か無限の可能性を感じています。こんな使い方があるよとか、このルーティンを追加した方がいいじゃねなどの感想があればコメントしてくれると嬉しいです。

この記事が誰かの役に立つことを願っております。
最後まで読んでいただき、ありがとうございました。:v:

# Appendix
ここまで書いておいてなんですが、ブラウザやアプリの立ち上げぐらいなら、「スタートアップ」に設定する方が簡単です。手順は以下のとおりです。

1. 「windowsボタン + R」で「ファイル名を指定して実行」を立ち上げる
1. 「名前」に「shell:startup」を入力して「OK」を押す
1. スタートアップフォルダが立ち上がるので、ブラウザやアプリのショートカットをコピペする。

これだけでPCを立ち上げたときにブラウザやアプリが自動で立ち上がります。私の場合、仮想環境内でこの方法を使用できなかったのでバッチファイルを利用しました。
NetBSD/starをsysupgrade

earmv4の10のsysupgradeのpkgが無いのでpkgsrcでビルドしようとしたのですが、うまく出来ませんでした。

よくよく考えてみるとビルドできないのでpkgが無いのかもしれません。

あきらめていつものようにINSTALLなカーネルをu-bootでtftpして起動してsysinstしてUSBメディアからsetsをsd0に展開しました。

カーネルはflashに焼いてるのですが、最初何故かCRCエラーになってconfをちょっと変えてビルドしたら、大丈夫になりました。starでは時々あるような気がします。

https://dmesgd.nycbug.org/index.cgi?do=view&id=7421

sysinstでもupgrade出来るようなので、今度試して見ます。

後日追記：

comcerto 2000の10.0_RC2をRC3にsysinstでアップグレードしてみました。なにかマージの時に怒られたようなきがするのですが、とりあえず大きな問題はないようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/7d064269-a78d-ccd2-5667-beb0e757e26c.png)
Google シートから REST API を駆動する

## はじめに

この記事は、
　[Drive a REST API from a Google Sheet
](https://www.youtube.com/watch?v=AdXOu_LEupA)という動画を参考に、『実際にやってみた』という記事になります。


## この記事で実施する事。
- APIライブラリを有効化。
- `Cloud Run Service` をデプロイする。
- ブラウザからリクエストを実行する。


## REST APIについて噛み砕いて理解しておく。
<details><summary>REST API について噛み砕いた説明を以下にまとめます。</summary>
<p>

（Chat GPT）
REST（Representational State Transfer）APIは、
ウェブアプリケーションやサービス間で
データのやり取りを行うための一連の規則や原則のこと。

このアーキテクチャスタイルは、インターネット上でのリソース
（データやオブジェクト）の管理を
簡単かつ効率的に行うために設計されている。
>REST APIとは、インターネット上で情報やデータを
やり取りするための「ルールのセット」のこと。
>
>ウェブサイトやアプリが、サーバー  
（データを保管している大きなコンピューター）から
情報を取得したり、情報を送ったりするときにこのルールを使用する。

（Chat GPT）
RESTの主要な原則
クライアント-サーバー構造:
システムをクライアントとサーバーに分離して、
それぞれが独立して開発・拡張できるようにする。
>「クライアント」と「サーバー」を分ける考え方のこと。
クライアントはユーザーが使っているアプリやウェブサイトのこと。
>
>サーバーはデータを保管している場所。
この分離によって、それぞれが別々に改良や拡張ができる。

（Chat GPT）
ステートレス性:
各リクエストは独立しており、
過去のリクエストの情報を保持しない。
>それぞれのデータ交換（リクエスト）は、
他のリクエストとは独立しているという考え方である。
>
>つまり、サーバーは過去に何をしたかを覚えていないので、
毎回必要な情報を新たに送る必要がある。

（Chat GPT）
キャッシュ可能性:
リソースはキャッシュされ、パフォーマンスを向上させることができる。
>サーバーから送られたデータを一時的に保存（キャッシュ）して、
同じデータを再度要求する時には速く提供できるようにする仕組みのこと。

（Chat GPT）
一様インターフェース:
シンプルで統一されたインターフェースを
通じてリソースにアクセスできる。
>どのデータにアクセスするにしても、使う方法
（インターフェース）は同じというルールのこと。
これにより、開発を容易に進めることができる。

（Chat GPT）
レイヤードシステム:
複数のレイヤー（層）を介してクライアントと
サーバーが通信することができます。
>クライアントとサーバーの間には複数の「層」があると考えることで、
セキュリティの強化や負荷分散などが可能となる。

（Chat GPT）
HTTPプロトコルの使用:
REST APIはHTTPリクエスト
（GET、POST、PUT、DELETEなど）を
使用してリソースを操作できる。
>REST APIは、ウェブページを見る時に使うのと
同じ方法（HTTP）でデータをやり取りする。
>
>HTTPには「GET」、「POST」、「PUT」、「DELETE」といった
いくつかの基本的な操作があり、それぞれが特定の動作をする。
>
>「GET」はデータを取得する時に使う。
>
>「POST」は新しいデータを追加する時に使う。
>
>「PUT」は既存のデータを更新するときに使う。
>
>「DELETE」はデータを削除するときに使う。

</p>
</details> 

## APIライブラリを有効化。
APIライブラリから `Google Sheets API` を有効化
![api_google_sheets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952807/0e9b98dd-a29e-85a2-3415-b2eab174ffd6.png)


## Cloud Run Service をデプロイする。
[search-data-from-spreadsheets](https://github.com/tomo8332/gcp-sample/tree/main/cloud-run-rest-api/json/search-data-from-spreadsheets) を、git clone してください。

```
git clone https://github.com/tomo8332/gcp-sample.git
```

git cloneの実行が完了したら、cdコマンドを使って、対象のディレクトリ階層へ移動。

```
cd gcp-sample/cloud-run-rest-api/json/search-data-from-spreadsheets
```

[README.md](https://github.com/tomo8332/gcp-sample/blob/main/cloud-run-rest-api/json/search-data-from-spreadsheets/README.md) を読んで、Cloud Run サービスのデプロイを行なってください。


## ブラウザからリクエストを実行する。
ブラウザもしくはPostmanからリクエストを実行。
IDを条件に、スプレッドシートに記載されている内容が
レスポンスとして戻ってくれば成功です。

![api_google_sheets_slipslap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952807/3dc62f39-42e2-8d6a-6de9-cbca21958910.png)

![api_google_sheets_rest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952807/13989101-1a0f-665c-d0b5-9320d01c4366.png)


## 終わりに
今回の記事は、動画を視聴しまして、
実際に『手を動かしてみた』という内容でまとめました。

REST APIを使うことで、クライアントとサーバーの
データのやり取りが容易に行えるようになるそうです。

`REST API` に試しに触れてみたいと
考えていましたら、参考にしていただけると幸いです。

あとで『じっくり読みたい』、『繰り返し読みたい』と
思ってくれましたら、『`ストック`』へ登録、
この記事が読まれている方にとって、
参考になる記事となりましたら、『`いいね`』を
付けていただけますと、励みになりますので、
よろしくお願いします。
mruby/cを16bitPICでやってみた

16bitPICでmruby/cをやってみました。ターゲットは、PIC24にしました。
公式対応してますし、やり方は、ITOCさんのwebsiteに「mruby/cのPIC24へのポーティング手順公開について」ってのが有りますので、さほど悩むことないのではないかと。

### ツールのインストール

ポーティング手順を見ながらと・・・microchip社のリンクが全滅ですね。
microchip社のwebsite内で調べて「MPLAB X IDE ｖ6.15」「XC16 V2.10」のインストーラをダウンロードしインストールします。

### ポーティング手順から変わった所

mruby/cのソースをダウンロードして展開します。今回は、「hal_pic24」が有りますのでフォルダリネームや削除は不要ですね。
プロジェクトプロパティは、XC16 の所をちょっと弄ります。あとは、手順通りです。
| 設定場所1 | 設定場所2 | 設定項目 | 内容 |
| :-: | :-: | :-: | :-: |
| XC16 | Most Useful Option | C include dirs | src |
| XC16 | Most Useful Option | Define common macros | MRBC_NO_TIMER, MRBC_USE_HAL_PIC24 |
| XC16 | Most Useful Option | Code model | Large |

main.cは、mcc周りの使い方が若干変わった程度でしょう。

```c:main.c
#include "mcc_generated_files/system.h"
#include "mcc_generated_files/mcc.h"
#include "mrubyc.h"

extern const uint8_t sample1[];
#define MEMORY_SIZE (1024*20)
static uint8_t memory_pool[MEMORY_SIZE];

//================================================================
/*! オンボードSW 現在状態の読み込み
*/
static void c_sw1_read(mrb_vm *vm, mrb_value *v, int argc) {
  int sw1 = I_S4_GetValue();
  SET_INT_RETURN(sw1);
}
//================================================================
/*! オンボードLED ON/OFF
*/
static void c_led1_write(mrb_vm *vm, mrb_value *v, int argc) {
  int set_value = GET_INT_ARG(1);
  if (set_value == 0)
    O_LED3_SetLow();
  else
    O_LED3_SetHigh();
}

/*
                         Main application
 */
int main(void)
{
    // initialize the device
    SYSTEM_Initialize();

    mrbc_init(memory_pool, MEMORY_SIZE);
    
    mrbc_define_method(0, mrbc_class_object, "sw1_read", c_sw1_read);
    mrbc_define_method(0, mrbc_class_object, "led1_write", c_led1_write);

    mrbc_create_task(sample1, 0);
    mrbc_run();

    return 1;
}

//================================================================
/*! HAL
*/
int hal_write(int fd, const void *buf, int nbytes) {
    return 0;
}
int hal_flush(int fd) {
    return 0;
}

```

hal_pic24/hal.h は変更なしです。

vm_config.h は、MRBC_REQUIRE_32BIT_ALIGNMENT へ変更
```c:vm_config.h
/* Word alignment
   If 32bit and/or 64bit alignment is required, enable the following line.
*/
#define MRBC_REQUIRE_32BIT_ALIGNMENT
//#define MRBC_REQUIRE_64BIT_ALIGNMENT
```

alloc.c 大幅に変わってます。
98行目のコメントを取り、「MRBC_MIN_MEMORY_BLOCK_SIZE」を有効にしておきます。

```c:alloc.c
#if !defined(MRBC_MIN_MEMORY_BLOCK_SIZE)
#define MRBC_MIN_MEMORY_BLOCK_SIZE sizeof(FREE_BLOCK)
  #define MRBC_MIN_MEMORY_BLOCK_SIZE (1 << MRBC_ALLOC_IGNORE_LSBS)
#endif
```

### 実行結果

sample1.rb をmrbcでコンパイルした sample1.cを入れ、コンパイルと書き込みを実行すれば、PIC24でのＬチカの出来上がりです。
mrbcは、mruby3.2対応の物を準備してください。はまりました。

### メモリ 消費量について

ポーティング手順の時測った以来なので、やってみました。

| | mruby/c 手順書の時 PIC24 16bit | mruby/c3.2 PIC24 16bit |
|:-:|:-:|:-:|
| RAM消費量(byte) | 5,304 | 2660 |
| 手順書の時を1とした比 | 1 | 0.50 |

約半分の消費量となっています。6割までは届きませんでしたが、上手に使えばかなり小さいメモリのPICでも実用になるのではないでしょうか。
[個人的]Macを便利にするアプリたち[効率化]

この記事は海洋大技術系サークル Advent Calendar 2023の15日目です。

# はじめに
Windowsを子供のころから使っていて、Windows歴15年くらいあるのですが、大学生になってMacを購入し、iOSアプリの開発をしています。最初はWindowsとの機能の違いに苦しんだのですが、便利アプリ・ツールをいれることで、かなり使いやすくなったので、紹介します。

# Karabiner-Elements
このアプリは個人的に一番重要です。用途としては2つあって、US-JISのキーボードの切り替えと、USキーボードのスペース両端のコマンドキーで変換できるようにするところです。Macは外付けキーボードの選択肢が少なく、あったとしてもUS配列っていうことが多いので、USに慣れるようにしました。（しかし当時半導体不足でUS配列のMacBook Proが買えなかった😂）案外USキーボードの両端の⌘で変換できるようにすることを知らないiOSエンジニアの方とか遭遇したことあるので、オススメしておきました。私はバグなど一切感じず、快適に使えています。

https://karabiner-elements.pqrs.org/

# Rectangle
こちらはウインドウの移動を効率化するアプリです。Windowsだと標準でショートカットキーが割り当てられていますが、Macではないので、このアプリに出会うまで不便でした。似たようなアプリが色々ありますが、Rectangleが一番合いました。4Kモニターで半分半分にするときなど、利用しております。ディスプレイ間の移動も可能です。

https://rectangleapp.com/

# SCROLL REVERSER
こちらはマウスとトラックパッドのスクロール方向を逆にするアプリです。XcodeでStoryboardを触るときなどに、トラックパッドを利用するのですが、標準の設定だとしっかりこなくて、このアプリを導入することで、逆にでき、快適になりました。

https://pilotmoon.com/scrollreverser/

# MiddleClick
こちらはトラックパッドでの三本指タップでマウスのホイールクリックを可能にするアプリです。Windowsだと標準で使えた気がしたのですが、Macだとできなかったので入れました。Chromeの検索でページ開くときにホイールでクリック動作ができると便利です。
https://github.com/artginzburg/MiddleClick-Sonoma

# Clipy
こちらはコピー履歴を保存して、後から使うことができるアプリです。正直あまりしっくり来てないです。Windowsの標準機能の方が、画像も保存できるので好きです。何か代替ツールあったら教えてください。

https://clipy.softonic.jp/mac

# おわりに
これらのツールを入れて快適なMacライフを過ごしましょう！
トラベリングについて

# はじめに
　こんにちは！
　今回はバスケットボールの曖昧といわれている「トラベリング」というルールについて解説していきたいと思います。
<img width="200" alt="basketball_dunk.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635161/6ecb20b4-1586-d04e-4587-129a9b994da3.png">


# トラベリングとは？
　トラベリングという言葉は体育の授業などで1回は聞いたことはあるのではないでしょうか？まずはトラベリングについて説明します。
簡単に言うとボールを持って3歩以上歩いてはいけないというルールです。また他にも、ボール持っているときに軸足がずれたり、浮いたりしてもトラベリングになります。


# なぜ曖昧と言われるのか？
　アメリカに「NBA」というバスケットボールの大舞台（プロリーグ）があります。そのNBAでは、頻繁にトラベリングがスルーされています。審判が笛を吹かず、ブーイングが起こることもあります。審判によって笛を吹く場面が変わってくる場合もあります。


# なぜトラベリングがスルーされるのか？
　NBAには暗黙のルールというものが存在します。暗黙のルールとは、ゴールから遠いところで軸足がずれてしまったり、一人で速攻するときに3歩で踏み切ってレイアップに行く場面などがあります。そのような場面で試合に影響を及ぼさず、試合がシラケてしまわないように審判が空気を読んで笛を吹かないことです。


# 実際にあった事例
　ジェームズ・ハーデンという選手が明らかに4歩でシュートしたのにも関わらず、審判は見逃しました。しかし、カリーという選手が同じプレイをすると、審判に笛を吹かれてしまいました。同じプレイなのに、審判によって判断が違うと知らない人が見ても、「なんで？」と感じてしまいそうです。また、このチームには負けてほしくないから、多少のファールやトラベリングは笛を吹かないという審判も実際にいたそうです。自分の応援しているチームが大事な場面に誤審で負けてしまったら、と考えるとファンからすると最悪ですね。
 <img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635161/d83296aa-b498-d45b-9da4-9c1e5b3964ee.jpeg">



# まとめ
　正直トラベリングのルールはどうしても曖昧になってしまうと感じました。実際に誤審の事例があることからもそう思いました。ルール上絶対に3歩以上歩いてはいけないという意見も、試合に影響しない場面なら空気がシラケてしまわないように笛を吹かないという意見もどちらも間違ってはいないと思います。年を重ねてトラベリングのルールが少し改正されたり、誤審が少なくなってほしいですね。

 　　　　　　　最後まで読んでいただきありがとうございました！
自衛官からエンジニアへ Elixirから始める Web開発 裏コラム vol.2

この記事は「Elixir Advent Calendar 2023」裏コラム記事です
東京にいるけどfukuokaexのYOSUKEです。

普段は 合同会社TheWaggle で教材開発・システム開発・研修講師などマルチに活動してます。

このシリーズでは、体育会系のりでちょっとずつ学ぶシリーズの裏側で、ちょっとマニアックなネタを本シリーズのような優しいコラムではない形式で綴っていこうかと思います。

それでは、いくぞ！

## C4爆弾ってとても美味しそうな匂いがするんです。

C4爆弾って、粘土質で形をぐにゃぐにゃっとできるので隙間に埋め込んだり、とっても便利な爆弾です。でもってとてもいい匂いがするんですね。

ですが、間違っても食べちゃダメです。実は毒性も強く、自衛官が教官に煽られてぺろっと舐めて、病院に運ばれた、ちょっとお茶目な事件が起きてるくらい危ないです。

さて、そんな便利で危険なC4爆弾ですが、威力はとても強力です。
そこで、分量を間違えると巻き添えを喰らうので正しく威力を把握する必要がありますね。

そんな関数をElixirで作ってみましょう。

威力は爆弾の量でどれくらいの爆発エネルギーが発生するかを考えます。

* 爆薬の量（グラム単位）：C4の量が多いほど、爆発の威力も大きくなり
* 爆発のエネルギー発生率：C4のエネルギー発生率は、おおよそ1.18MJ/kg

威力（ジュール）=C4の量（kg）×エネルギー発生率（MJ/kg）×10の6乗　という計算式で作成してみましょう。

```elixir
defmodule TNT do
    # エネルギー発生率を定数として定義
    @energy_generation_rate 1.18  # MJ/kg
    
    def calculate_explosive_energy(kg) do
        # 爆発エネルギーを計算 (MJをジュールに変換)
        kg * @energy_generation_rate * 1_000_000
    end
end
```

こんな感じでしょうか。

爆薬も使うと便利なものですが、それをどのように使うかも人間が決められること。
人に向けて使わない世の中がくればいいですね。
Twigで日付を計算する方法

## 概要
LaravelやPHPでTwigテンプレートを使用した際に、テンプレート内で日付の計算（加算、減算）をする方法

## 使用方法

 - `date_modify`フィルターを使用する
 - `day`は日付型の値が代入されている変数
 - `day`を基準日として加減算を行う
```.twig
{#日加算#}
{{ day|date_modify("+1 day")|date("m/d/Y") }}

{#日減算#}
{{ day|date_modify("-1 day")|date("m/d/Y") }}

{#月加算#}
{{ day|date_modify("+1 month")|date("m/d/Y") }}

{#月減算#}
{{ day|date_modify("-1 month")|date("m/d/Y") }}

{#年加算#}
{{ day|date_modify("+1 year")|date("m/d/Y") }}

{#年減算#}
{{ day|date_modify("-1 year")|date("m/d/Y") }}

```
### 応用
#### 文字列結合で日や月を加減算するパターン

```.twig
{#numには整数が代入されている#}
{{day|date_modify("+" ~ num ~ "day")|date("Y.m.d"))}}
```

## 参照
https://ec-cube.nakweb.com/eccube3/3491
「取り出し」アルゴリズムのフィッシャー–イェーツシャッフル

# 「取り出し」アルゴリズム

> 「j と i が等しくない場合」の処理は、初期化されていない配列の要素に対するアクセスが許容されているプログラミング言語であれば省略することができ、比較してよりコストのかからないアルゴリズムを実行できる。 
> [フィッシャー–イェーツのシャッフル - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A3%E3%83%BC%E2%80%93%E3%82%A4%E3%82%A7%E3%83%BC%E3%83%84%E3%81%AE%E3%82%B7%E3%83%A3%E3%83%83%E3%83%95%E3%83%AB)

「おお、これ、JavaScriptのことじゃん」と思って書いてみました。

```js
const shuffle = (src) =>
  src.reduce((a, x, i) => {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], x];
    return a;
  }, [])
```

一応確認。

```js
const matrix = Array.from(Array(10), () => Array(10).fill(0))
for (let i = 0; i < 1000000; i++)
    shuffle([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]).forEach((x, i) => matrix[x][i]++);
// [[99562,100257,99884,100396,99908,100376,99586,99682,100205,100144],[99610,100240,99775,99913,99432,100482,100190,99801,100584,99973],[100107,100071,100084,99905,99911,99882,99926,100067,99604,100443],[100167,99691,100548,99453,99885,99892,100281,100024,99986,100073],[100223,100000,99731,99779,100406,99809,100129,100343,99464,100116],[99581,100106,99855,100381,100445,100304,100190,99662,99682,99794],[100042,99876,99803,99887,99862,99885,100185,100470,99714,100276],[100084,99288,100128,100382,100383,99995,99665,99742,100602,99731],[100020,100308,100263,100076,99644,99693,99683,100310,100366,99637],[100604,100163,99929,99828,100124,99682,100165,99899,99793,99813]]
```

大丈夫そう。

---

# イテレータからのシャッフル

> 「取り出し」版のもう一つの利点は、元配列のデータから完全に独立したランダムな要素が取得できるのであれば、元配列の総要素数 n が未知の場合でも使用できる点である。
> [フィッシャー–イェーツのシャッフル - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%83%E3%82%B7%E3%83%A3%E3%83%BC%E2%80%93%E3%82%A4%E3%82%A7%E3%83%BC%E3%83%84%E3%81%AE%E3%82%B7%E3%83%A3%E3%83%83%E3%83%95%E3%83%AB)

なるほど。

```js
const g = function* () {
    let i = 0;
    while (Math.random() < 0.9) yield i++;
}

const shuffle = (src) => {
    let a = [];
    for (let x of src) {
        const i = a.length;
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], x];
    }
    return a;
}

shuffle(g())；
```

Iterator.prototype.reduce() があれば Array と同じコードで動くんですが……
[Iterator.prototype.reduce() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/reduce)
調査系タスクで意識するべきこと5選

**この記事は[クラウドワークスAdvent Calendar 2023](https://qiita.com/advent-calendar/2023/crowdworks) シリーズ1の23日目の記事です。**

## はじめに
こんにちは。[crowdworks.jp](https://crowdworks.jp/)のエンジニアの @komaitaira です。

現在はcrowdworks.jpにおいて、仕事を獲得できるワーカーを増やすことに注力するチームでエンジニアとして働いています。
私が普段開発をしているcrowdworks.jpは10年以上の歴史を持つとても大きなプロダクトです。
crowdworks.jpに限らずですが、10年も経つと全体のコード量もかなりのものとなり、その機能や仕様を全て把握している人はほとんどいないでしょう。そのような状況でも新たな施策を実施し、ユーザーへ継続的に価値を届けるためには、草の根を分けて探すようにコードを読み、現状の実装や仕様を理解するための調査が必要になってきます。
本記事ではそんな調査タスクをする中で感じた意識するべきこと（実際にやって感じた反省点や、やってよかったこと）を紹介したいと思います。

## ゴールを明確にする
まず調査を進めるにあたり、ゴールが抽象的であるとなかなか調査を進めるのが難しいと感じました。
現在私のチームでは、Elasticsearch（全文検索エンジン）をRailsで便利に使うためのgemである**elasticsearch-rails**を、代替となるgemである**Searchkick**に移行するプロジェクトを進めています。
このプロジェクトの最終的なゴールは「gemが置き換わった上で、置き換え前と同じ挙動でサービスが動作すること」です。
しかし、このゴールを達成するための前段階としてやるべきことは複数あり単純ではありません。elasticsearch-railsやSearchkickは何をしているのかを理解すること、それがプロダクトのどこで使用されているのかの洗い出し、置き換えた時の影響範囲についての調査等々、、挙げたらキリがありません。
そのため、最終的なゴールを達成するために必要なことをタスクとして洗い出し（リスト化）、それら一つ一つのタスクに対して何が分かっている状態でそのタスクを完了と言えるか、というタスクに対するゴールを明確に決めることがとても大事です。

## なるべく小さなことから進める
また、調査タスクも大きなものから小さなものまで様々ありますが、なるべく小さなものから進めるのがベターであると感じました。理由としては、gem移行という大きなプロジェクトを達成するにあたり、大きなタスクを長い時間かけて消化するよりも、小さな調査タスクをコツコツ消化した方が、プロジェクトを着実に前進させることができますし、成功体験を少しずつ積み重ねることでモチベーションの維持にもつながると思ったためです。
一方で、タスクの依存関係等で特定の順番で調査したい場合もあったりなど一概には言えないかと思うので、その場合は適宜やりやすい方法で進めるのが良いかと思います。

## あまり深追いしすぎない
コードの詳細な部分まで追っていく必要がある場面と無い場面があると思いますが、大きなプロジェクトにおいては上記で設定したタスクごとのゴールを達成できた時点で、そのタスクは一旦完了させ、そのコードが何をしているのかという概要が分かっていれば、詳細まではその時点では深追いする必要はないと思っています。理由としては、その時点で理解できても時間が経って後から忘れてしまっていたりして再度コードリーディングすることになりがちだからです。後から調べられるように軽いメモは残しておくといいと思いました。
また、時間を設けたりすることも有効だと思います。制限がないといくらでもやってしまいますし、こういった調査系タスクは芋づる式に調査対象が出てきてしまうので、あえて区切りをつけるのも大事だと感じました。

## 定期的に共有の場を設ける
普段のデイリースクラム以外の時間で、開発陣で定期的に共有の場を設けるようにしていました。これはその調査がゴールの達成に向かっているかどうか、達成に必要な情報を調査できているかを客観的な目で見てもらうためにも必要です。調査の方向が間違っていた場合は早めに軌道修正できますし、進捗がなかった場合はなぜ進められていないのか、調査で詰まっている箇所がある等、相談をすることもできるので、日時を決めて実施するのが良いと思います。

## 調査していることは透明性が高い状態を保つ
具体的な調査内容は開発陣しか分からないとしてもチームで進めているプロジェクトなので、開発陣だけでなく、誰がどんな調査を行なっているのか等の活動状況がチーム全体、第三者がわかるような状態にするべきです。
調査タスクを細かく分けて、毎日のデイリースクラムでもいいので、調査の中でも具体的に何をやっているのか共有することが大事です。
また、定期的に調査ログの整理（ドキュメント化）もできると、後任も困ることが少なくなるはずです。

## おわりに
いかがでしたでしょうか。
調査系タスクに正解はないと思いますが、参考になると幸いです。

最後にクラウドワークスでは様々な仲間を募集しております。
ご興味のある方は以下のリンクからご応募ください！

https://crowdworks.co.jp/careers/
【GitHub CLI】1分でMacでGitHubとのSSH接続を速攻で構築する

## GitHub CLI

いいか、時代は変わった…。もう我々はGitHubを利用するために面倒な`ssh-keygen`をしなくていいんだ。この方法を使えば速攻でGitHubとの接続を構築できる。カップラーメンよりも早く、GitHubへと海を渡ろう！！

## お断り

Windowsの人ごめん。ぼくMac。

## 環境

コマンドラインツールはインストールされている前提で行きます。もしインストールしていない人も、これらのコマンドを叩いていけばどこかで「コマンドラインツールをインストールしろ」っていうウィンドウが出てくるのでそれに従えばいいです。

長いので折りたたみます。

<details><summary>詳細</summary>

```
OS: macOS 14.1.2 23B92 arm64
Host: Mac14,2
Kernel: 23.1.0
Uptime: 6 hours, 35 mins
Packages: 35 (brew)
Shell: zsh 5.9
Resolution: 1710x1112
DE: Aqua
WM: Quartz Compositor
WM Theme: Blue (Light)
Terminal: iTerm2
Terminal Font: UDEVGothic35NFLG-Regular 16
CPU: Apple M2
GPU: Apple M2
Memory: 3775MiB / 24576MiB
```

</details>

## Homebrewを入れる

入っている人が大半だと思いますがハマる人はハマるので一応書いておきます。

``` zsh:
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

## GitHub CLIのインストール

これを叩くだけですぐ終わります。

```
% brew install gh
```

## 認証

GitHubへのSSH接続を構築していきます。`ssh-keygen`はしません！！！

``` zsh:
% gh auth login
```

コマンドと実行結果の対応です。

``` zsh:
% gh auth login
? What account do you want to log into? GitHub.com
? What is your preferred protocol for Git operations on this host? SSH
? Generate a new SSH key to add to your GitHub account? Yes
? Enter a passphrase for your new SSH key (Optional)
? Title for your SSH key: GitHub CLI
? How would you like to authenticate GitHub CLI? Login with a web browser
```

上から順に

- そのままreturn (Enter)
- SSHを選択→return
- そのままreturn
- そのままreturn
- そのままreturn
- そのままreturn

と答えます。

次に

```
! First copy your one-time code: XXXX-XXXX
Press Enter to open github.com in your browser...
```

と出てくるので、この`XXXX-XXXX`をコピーしてreturnを押します。するとブラウザが立ち上がるので、ここに先ほどのコードをそのままペーストします。

![スクリーンショット 2023-12-15 17.05.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628782/682d1533-4e6f-281c-0b59-e93332887f4f.png)

そしてContinue→Authorize GitHubを押すだけで接続完了です！！！

```
✓ Logged in as shirokuma89dev
```

のようにターミナルには表示されているはずです。

## 接続の確認

```
% ssh -T git@github.com
```

と叩いて

```
Hi shirokuma89dev! You've successfully authenticated, but GitHub does not provide shell access.
```

と帰ってきたら成功です。

## 終わりに

昔Windowsを使っていたので、その頃はgitをインストールして、ssh接続をして…とずいぶん手間がかかっていましたが、もうこんなに楽になったのですね。感動しました。
自衛官からエンジニアへ Elixirから始める Web開発 Part15

この記事は「Elixir Advent Calendar 2023」15日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

普段は 合同会社TheWaggle で教材開発・システム開発・研修講師などマルチに活動してます。

このシリーズでは、文系ですらない、体育会系でも始められるプログラミング学習　というテーマで元自衛官だった僕が
自衛官からエンジニアになってもらいたいという気持ちを込めて、普段は大人しいですが、このコラムシリーズでは、あえて、体育会系のノリで、貴様ら理屈で覚えるなら体で覚えろ！というノリで書いてみたいと思います。

なので、初学者向けですが、理論は後回し、まずは動かして体感しろってノリの第15回目です。

それでは、いくぞ！

## 関数の定義とC-4爆弾

よーし、貴様ら！前回までは関数を使うことを中心にやってきたな、そしてちょっとした仕事をするやり方も教えた。さらには、仕事を連携する方法も教えた。

今日は、とうとう、ちょっとした仕事ではなく、大掛かりな仕事を作る方法を教えてやろう！

何？ 今まで作ってきた関数のような、ちょっとした関数とは何が違うのか？だと！

貴様、例えば、敵地潜入の際に鋼鉄の扉を開ける必要があった時、c-4爆弾を利用して、隙間に埋め込み信管をつけて、c4の量を計算して爆発が及ばない場所で爆破するという芸当がちょっとした関数でできると思うのか？

答えは否！　きちんとした制御と工程を理解しなければ危険だろう！

そして、そのような任務を個人のスキルに任せていいのか？マニュアル化して誰もが利用できるように整備する必要があるだろう。それと同じだ！

よーし、では、c-4爆弾を誰でも作れるようにマニュアル化(関数）する方法を今からやるぞ！　いいな、この訓練の失敗は死と隣り合わせだ、絶対に忘れてはならない！わかったな！

* はい

まず、c-4爆弾など爆弾を扱うためのまとめる場所を作ろう。爆薬庫のようなものだ。そして、その爆薬庫の名前をつける必要がある。この名前をつけることを`モジュールを定義するという`今回は爆弾を扱うので`TNT`という名前にする。ちなみにモジュールは必ず大文字の半角英字で書き始めるルールがある。

では、モジュールの定義を書いてみよう。

```elixir
defmodule TNT do


end
```

```defmodule```で始まり、```TNT```とモジュールの名前をつける。そして、`do`から`end`の範囲にこのモジュールで扱う仕事を作っていく。

次に、モジュールの中に今度はc4爆弾を作成する仕事をさせてみよう。c4爆弾の構成物質は大体、以下の構成だ。

```elixir
{"RDX", "45.5g"}
{"ポリイソブチレン", "10.5g"}
{"モーターオイル", "0.8g"}
{"セバシン酸ジオクチル", "2.65g"}
{"ガソリン", "25ml"}
```

これらの素材が正しく、かつ正しい分量だった時にc4爆弾を生成する関数を作成していく。
これらの関数をどのように作っていくか、実は様々だ。どのように作るかは貴様らのアイデア次第で如何様にもなる！

ただ、いきなり高度なアイデアを披露しても貴様らはついて来れないだろう！
そこで、まずはチープなアイデアから入り、徐々に高度なアイデアにしていく。

まずは、関数の名前を決めよう。爆弾を扱うのだからわかりやすい名前にする必要がある。

今回は```create_c4```という名前にしよう。 

```elixir
def create_c4() do

end
```

関数を作るには、```def```というものを先につけ、次に ```create_c4``` という関数の名前をつける。関数の名前は小文字始まりで作るところがモジュールとは違う所だ、次に`()`は`引数`を入れる入れ物として準備する。そして、`do`から`end`の範囲にこの関数で扱う仕事を作っていく。

モジュールと合わせるとこんな感じになる。

```elixir
defmodule TNT do
    def create_c4() do
    
    end
end
```
よし、それでは、入り口を作って、材料を受け取り、```{"RDX", "45.5g"}```、そのまま返す

```elixir
defmodule TNT do
    def create_c4(rdx) do
        rdx
    end
end
```
それでは作った関数を実際に使って見せてやろう。

![スクリーンショット 2023-12-15 8.22.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/51a36f5e-440b-fba3-7d80-2d9ba0ef1e80.png)

よし、これでまずは土台ができた。これを仕上げて行くとしよう！

しかし、この先を始めると長くなるので、貴様らに眠くなりながらの爆弾作りは危険すぎる！

ということで、今日はここまで、それでは次回 Part16でまた会おう！
[Ruby] 実行されない if 文でも変数は定義される


# 気づいたこと

最近こんなコードを書いていました

```rb
if false
    x = "hello"
end

puts x || "test"
```

出力は以下のようになります

> test

if のなかの条件式は常に false になるので中身コメントアウトするかーと思ってコメントアウトするとエラーになりました

```rb
if false
    #x = "hello"
end

puts x || "test"
```

> Main.rb:7:in `<main>': undefined local variable or method `x' for main:Object (NameError)

# 原因
どうやら Ruby は完全なインタプリタ言語ではなく実行前にコードをコンパイルしているみたいです

https://magazine.rubyist.net/articles/0053/0053-YarvManiacs.html

実行前にコンパイラが走っているので実行されない if 文の中身も事前に評価されて変数が定義された状態になっているみたいです

# 解決方法
なので `puts x || "test"` を動かすには以下のいずれかの対処が必要です

### 1. `defined?`メソッドを使う

変数が定義済みかどうかを確認する `defined?`メソッドで判定します

```rb
if false
    #x = "hello"
end

puts defined?(x) || "test"
```

### 2. そもそもそんな変数を使わない
そもそも定義されていない変数ならコードの中から完全に `x` を消してしまいましょう（多分これが正解）

```rb
if false
    #x = "hello"
end

puts "test"
```

# 蛇足
ちなみに PHP だと実行されない if 文の中身は未定義の変数として扱われるみたいでした

```php
if false {
    $x = "hello";
}

echo $x
```

> PHP Parse error:  syntax error, unexpected identifier "false", expecting "(" in /workspace/Main.php on line 4


こちらの方が直感的ですよね
留学先の大学で参加したゲーム開発サークルの話

# 導入
本投稿は交換留学で行った大学で参加したゲーム開発サークルで経験した話などを中心に書こうと思います。
「留学に行こうと思ってる！」とか「チーム開発をしてみたい！」など考えていれば参考になる部分もあると思うので読んでいただければ幸いです。

# はじめに

開発の話をする前に先に留学した大学のサークルについて話そうと思います。
自分はカナダのバンクーバーにあるUniversity of British Columbia（ブリティッシュコロンビア大学）という大学に交換留学生として一年在籍していて、そこでUBC Game Devというサークルに所属していました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600193/f097b6d2-0274-2e66-ffb4-6c7e881a8d8d.png)
（ブリティッシュコロンビア大学の写真）

<br>
バンクーバーのゲーム開発会社やスタジオがスポンサーしてくれるほど大きめのサークルで、普段はUnityやBlenderなどゲーム開発についてセミナーがあったり業界の人の講演があったり、あとはサークルのメンバーとワークショップなんかもあったりします。

https://www.ubcgamedev.com/

# チーム開発について

活動としてはそれとは別に並行して立候補者を募って十人前後でチームを組んで、その中で1年間ゲームを開発する感じになります。チームの構成としてはプログラムを書くメンバーや、3Dのモデリングをするメンバー、またストーリーを考えるシナリオライターなど結構細分化されていた印象でした。
自分はプログラミングを担当したのですが、役職分けなどはチームの判断に一任されていたのでそこら辺は割とフレキシブルでした。

また、どのチームも基本的にはUnityを使って開発をしてはいましたが、そこも別にチームで決められるため、使おうと思えばUnreal EngineやGame Makerも使えます。
（最も、自分たちのサークルでは審査員として例年Unity社から一人来るのでUnity以外のエンジンを使用していたら印象が悪かったような気もします）


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600193/2cb66b8c-d69e-2ffa-6398-c00d9c298662.png)

(実際開発したゲームの様子)


# 個人的に感じたこと

かなりフレキシブルに動けたので、それこそGitを使ったり、普段自分だと触らない3DモデリングやUIを少し担当できたりとゲーム開発を学ぶ上でいい助走になったなと今考えると割と感じています。
特に、海外なので英語でコミュニケーションをとりながらゲーム開発をしたことがなかったのでゲーム開発をするときの英語での言い方や表現を学べたのは個人的にはすごく良い経験でした。
ただ、一方で大学の学業と並行しながらゲーム開発を進めないといけないこともあって、途中で学生がチームから抜けてしまうことがあったのが比較的課題感としては感じました。自分は留学の主軸がこのサークルに入るためだったため、最後まで参加させていただいていましたが、特に留学生ならそういった並行して開発を進めることはもしかしたら難しいこともあるかもしれません。



# 最後に

ここまで読んでくださりありがとうございました。
海外の大学は基本的どこも割と規模が大きいこともあり、ゲーム開発のサークルがある大学が日本と比べると比較的多い印象です。もしUnityやゲーム開発に興味はあるものの重い腰が上がらずゲームをなかなか作る機会がなくて悩んでる方がいたら、是非海外でそういったサークルに参加してみると良いと思います。

もし聞きたいことや疑問点などあればなんでも答えるので気軽にFacebookやTwitterからご連絡ください。
https://www.facebook.com/aoichi.shisho/
https://twitter.com/aoichitrash
Web 開発再入門 #7 ― Windows サービス化プログラムインストール

# Web 開発再入門 #7 ― Windows サービス化プログラムインストール

fmockup

## はじめに

ビルドして作成した “fmockup-0.0.1.jar” を Windows サービス化するためのプログラムをインストールします。
Windows サービスとは、Windows の OS のバッグラウンドで実行するプログラムです。

OS：Operating System
　
## フォルダー・ファイル構成

D:\\
└ Systems\\
&nbsp;&nbsp;&nbsp;&nbsp;└ fmockup\\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├ jdk-nn.nn.n\\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├ lib\\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├ log\\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├ sql\\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└ WinSW.NET-nnn\\ ← ココ
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└ WinSW.NET461.exe ← コレ

## Windows サービス化プログラムのダウンロードおよびインストール

1. フォルダーを作成する。
フォルダー “D:\Systems”、“D:\Systems\fmockup”、“D:\Systems\fmockup\WinSW.NET-461” を作成する。

2. プログラムをダウンロードする。
https://github.com/winsw/winsw/releases/tag/v2.11.0
“WinSW.NET461.exe” をダウンロードする。

3. プログラムをインストールする。
“WinSW.NET461.exe” を “D:\Systems\fmockup\WinSW.NET-461” 配下に置く。
Web 開発再入門 #6 ― JDK インストール

# Web 開発再入門 #6 ― JDK インストール

fmockup

## はじめに

Java プログラムを開発したり実行したりするための JDK をインストールします。
実は、Java プログラムを実行するだけなら、JRE をインストールすべきかもしれません（合計ファイル数が削減でき、すなわちディスク容量が削減できる）。

JDK：Java Development Kit
JRE：Java Runtime Environment

## フォルダー構成

D:\\
└ Systems\\
&nbsp;&nbsp;&nbsp;&nbsp;└ fmockup\\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├ jdk-nn.nn.n\\ ← ココ
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├ lib\\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├ log\\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├ sql\\
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└ WinSW.NET-nnn\\

## JDK のダウンロードおよびインストール

1. フォルダーを作成する。
エクスプローラーで、フォルダー “D:\Systems”、“D:\Systems\fmockup” を作成する。

2. JDK をダウンロードする。
https://jdk.java.net/archive
17.0.2 (build 17.0.2+8) の 64-bit zip (sha256) 178M の “zip” を選択する。
“openjdk-17.0.2_windows-x64_bin.zip” がダウンロードされる。

3. JDK を解凍し、JDK を置く。
“openjdk-17.0.2_windows-x64_bin.zip” をダブルクリックし、“jdk-17.0.2” を  “D:\Systems\fmockup” 配下に置く。

4. 環境変数 JAVA_HOME は設定しない。
コマンド・プロンプトで JDK を使用しないため。
後述の “Web 開発再入門#20 ― ビルド” で Windows サービス化において、サービスを設定するファイルに JDK のパスを直に指定する。

## その他

**Java のバージョン**

https://gihyo.jp/article/2022/07/java2022-0701

**Java バージョン毎の機能**

https://qiita.com/nowokay
【ECCUBE4系】デモサイトの紹介

### 概要
EC-CUBEのデモサイトを紹介いたします。
この情報は2023年12月時点のものであり、今後、変更がある可能性があるため、ご注意ください。

### デモサイトへのアクセス

EC-CUBEのデモサイトは、以下のURLから確認できます。
[https://www.ec-cube.net/product/demo.php](https://www.ec-cube.net/product/demo.php)

サイトはフロント画面と管理画面に分かれいるようです。
デモサイトであるため、一部機能が制限されているようですが、どのように制限されているかみていきたいと思います。

### 制限されている機能

#### 1. フロント画面

フロント画面は誰もが確認できるようですが、以下の点に留意が必要でした。

・制限されている機能（URL）：

| URL | 制限されている機能 |
----|----|
| /admin/* | 管理画面全般 |

フロント画面だけ確認できるようで、`/admin/`へのアクセスが制限されていました。

・ メール機能
メールの送信が制限されており、新規会員登録後のメール認証ができないため、フロント画面へのログインができませんでした。
ただし、ゲスト購入は可能でした！（注文完了のメールは届きませんでしたが笑）

#### 2. 管理画面

管理画面へのアクセスは事前に申請が必要であり、こちらにも一部の機能に制限がかかっていました。

・制限されている機能（URL）：

| URL | 制限されている機能 |
----|----|
| /admin/content/file_manager | コンテンツ管理　- ファイル管理 |
| /admin/setting/system/member | システム設定 - メンバー管理 |
| /admin/setting/system/security | システム設定 - セキュリティ管理 |
| /admin/setting/system/masterdata | システム設定 - マスタデータ管理 |
| /admin/store/plugin/api/search | オーナーズストア - プラグインを探す |
| /admin/store/plugin | オーナーズストア　- プラグイン管理 |
| /admin/store/template/install | オーナーズストア　- テンプレート　- アップロード |
| /admin/store/plugin/authentication_setting| オーナーズストア　- 認証キー設定 |

### まとめ
デモサイトはバージョン4.2.3で稼働しており、最新の機能も確認することができました。
4.2.3の最新機能については、[こちらのQiita記事](https://qiita.com/ssaita/items/af6dbaf1898c4c56e6e8)を参考にしてください。

また、繰り返しとなりますが、制限されている機能について、ざっとまとめたのでご確認ください！
1. フロント画面:
・誰もが確認可能。
・管理画面へのアクセスが制限されている。
・メール送信が不可。

2. 管理画面：
・事前に申請が必要。
・特定の機能に制限があり、一例として挙げたURLにアクセス不可。
・メール送信が不可。

### 最後に
EC-CUBEのデモサイトを通じて、ECサイトの基本的な機能や操作感を体験することができました。
制限された機能でも、流れやデザインについては確認でき、ECサイト構築の参考になりそうです！
また、疑問や質問が生じた場合は、公式サポートにお問い合わせしてみるのもいいかなと思いました。
【C言語】pタイル法によるPGM画像の2値化

# はじめに

C言語の学習として，グレースケール画像に対して2値化処理を行う課題が出た.
もしかしたら，同じ課題に直面する人がいるかもしれないため共有したい．

# pタイル法とは
pタイル法とは, 「対象の面積が全体の面積のp%となるように閾(しきい)値を設定する」2値化方法である.

つまり，対象を真っ白として，画像を真っ白と真っ黒で構成したいならば, 

$ \\{ 真っ白の面積 \\} : \\{ 真っ黒の面積 \\} = p : (100-p)$

となるような閾値を設定し，2値化処理をおこなう．

# 【コード】C言語でpタイル法を実現する
以下は，自分なりに作成した最終版である．

:::note warn
pTileMethod.cでは，pがパーセントではなく，割合になっています．
p=0.8ならば，80%となります．
:::


```c: pTileMethod.c
    /*
    
    .
    . 画像を読み込む処理
    .
    
    */

    
    //画像の画素は，int型2次元配列image[ySize][xSize]で参照できるものとする．
    
    double p;
    printf("p:");
    scanf("%lf", &p);

    int allData = ySize * xSize;

    int targetedArea = allData * p;

    //0~255の各値が出た回数をカウント
    int countColor[256];
    for (int i = 0; i < 256; i++)
    {
        countColor[i] = 0;
    }
    for (int y = 0; y < ySize; y++)
    {
        for (int x = 0; x < xSize; x++)
        {
            countColor[image[y][x]]++;
        }
    }

    //降順に, 出た回数の総和をとる
    int tmp = 0;
    int border;
    for (int i = 255; i >= 0; i--)
    {
        tmp += countColor[i];

        //総和が全体画素数のp割以上になったら，そこをしきい値とする．
        if (tmp >= targetedArea)
        {
            border = i;
            break;
        }
    }

    //しきい値以上かそうでないかで2値化する．
    for (int y = 0; y < ySize; ++y)
    {
        for (int x = 0; x < xSize; ++x)
        {
            if (image[y][x] <= border)
            {
                image[y][x] = 0;
            }
            else
            {
                image[y][x] = 255;
            }
        }
    }

    /*
    
    .
    . 画像を出力する処理
    .

    */
```

# 関連
画像の平滑化にも取り組みました.

https://qiita.com/Shi-haMoon/items/204df5fea5b305939b19
Linux で適当な大きさのファイル作成・ファイルの比較

# 背景
大きなサイズのファイルを分割して送信するファイル送信プログラムを書き，ファイル分割が正確に行われているかを確認するために適当なファイルを作成することにした．
ファイル送信プログラム自体は、分割されたファイル (ブロック) を送信し，受信側では全てのブロックを受信するとブロックを合成して分割前のファイルを作成できる仕組みである．

# ファイル作成
ファイル作成コマンドは mkfile，touch，dd などあるがそれらでは中身にランダムな文字列が含まれないため，ブロックの順番が正しいかを確認することはできないと考えた．そこでランダムな文字列を含むファイルを作成する手段はないかと調べた．

## 乱数を含んだファイルの作成
/dev/urandom という Unix系オペレーティングシステム (OS) における擬似デバイスの一種を発見した．それは乱数生成器として機能するというなんとも便利なものだ．そこでこれを使用してファイルを生成した．生成してくれた乱数をファイルにするために head コマンドを使用した．

```
head -c {文字数} /dev/urandom > {filename}
```

これで任意のサイズのファイルを作成できた．

# ファイル比較
比較には diff，cmp などがある．diff は行ごとに，cmp は byte ごとに比較を実行してくれるらしい．これらのコマンドを活用して比較できることがわかった。
2023年Elixirアドカレ／LT／海外のマイクロサービス関連リンク集

この記事は、[Elixir Advent Calendar 2023 シリーズ11](https://qiita.com/advent-calendar/2023/elixir) の14日目です

---

[piacere](https://twitter.com/piacere_ex) です、ご覧いただいてありがとございます :bow:

[Elixir Advent Calendar](https://qiita.com/advent-calendar/2023/elixir)と、イベントでLTされたテーマ、あと海外コラム／動画のうち、「マイクロサービス」に関連するものを並べます

2023年分をメインにまとめていますが、はじめての方向けに、末尾にはリンク集や過去分も含めています（余力があれば、その中から2023年分に追って展開します）

あと、このコラムが、面白かったり、役に立ったら、![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/907a8695-4d83-1b5c-8052-d0ce52de5f66.png) をお願いします :bow:

# Elixir Advent Calendarから

https://qiita.com/piacerex/items/e298a8c0f131f2368ce1

https://qiita.com/piacerex/items/f89bc66299196946e803

# LT（Lightning Talk）から

https://www.youtube.com/watch?v=qkjq4F29t2c&t=31s/

https://www.youtube.com/watch?v=Olr9Kzpqacc

https://www.youtube.com/watch?v=2RCP9_tpX10

https://www.youtube.com/watch?v=I1-1zHiuNwI

https://www.youtube.com/watch?v=1M-7TTMId5g

https://www.youtube.com/watch?v=N1nbuGoa1ss

https://fukuokaex.connpass.com/event/288716/

# 海外イベント／動画／コラムから

https://speakerdeck.com/danirukun/connecting-ruby-and-elixir-microservices

https://www.youtube.com/watch?v=uY_SgwM2NRI

https://www.youtube.com/watch?v=2pgMNMqpCp0

https://dev.to/pierrelegall/about-elixir-and-the-microservices-architecture-37gi

https://lakret.net/blog/2023-05-08-elixir-vs-microservices

https://medium.com/@rrmartins/building-a-simple-api-microservice-with-elixir-advantages-disadvantages-3098ac3273f6

# その他（過去含む）

https://qiita.com/search?sort=created&q=%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9

https://qiita.com/piacerex/items/b99baebf284243fb6d6b

https://blog.appsignal.com/2022/05/10/a-guide-to-event-driven-architecture-in-elixir.html

https://medium.com/inside-heetch/our-experience-writing-elixir-microservices-53c2a37d06c2

https://www.youtube.com/watch?app=desktop&v=jhZwQ1LTdUI

https://codesync.global/media/microservices-with-elixir-rodrigo-nonose-cbsf19/

# p.s.このコラムが、面白かったり、役に立ったら…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/907a8695-4d83-1b5c-8052-d0ce52de5f66.png) にて、どうぞ応援よろしくお願いします :bow:
【Trailhead】キャリアモードの設定

いつものようにTrailheadで学習を進めていると、気になるものがあったので備忘録として残しておきます。

## キャリアモードとは
Trailheadの情報に加えて、職歴・学歴やプロジェクトの経験等の職務経歴書のようなものを[
Trailblazer Career Marketplace](https://trailhead.salesforce.com/ja/careers)で公開できるようになる機能です。
以前は「Hire Me」として求人募集をかけることができましたが、この機能をより詳細にしたものになります。

## キャリアモードの設定
キャリアモードを設定していない場合は、Trailheadのプロファイルページを訪れると下記のような状態になっています。

![Trailhead_CareerMode_設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3285411/2c5a4f87-1348-558e-aa8c-e549173ef7b2.png)

こちらの設定を押下すると、キャリアモードの設定画面へ進みます。
順序に沿って設定を進めていくと、キャリアモードを有効化することができます。
キャリアモードを有効化すると、下記のようなTrailheadのプロファイルとは別の画面が出来上がります。

![Trailhead_CareerMode_画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3285411/844a98b9-84e8-8348-5bdc-186911593f5e.png)

## キャリアモードで出来ること
キャリアモードではTrailheadのプロファイルページで参照できる情報に加えて、下記のような情報が公開できます。

- Salesforceの経験年数や資格・スーパーバッジのサマリー
- キャリアパスやモチベーションといった自由記述の自己紹介
- 自己紹介の動画（Youtube動画）
- 職歴や学歴
- 経験したプロジェクト

## キャリアモードの使い道
転職の職務経歴書として使ったり、フリーランスの案件募集の資料として使ったりできそうです。
CrowdStrikeとZscalerを併用してみた

## 免責事項
本記事のコンテンツや情報において、可能な限り正確な情報を掲載するよう努めておりますが、 誤情報が入り込んだり、情報が古くなったりすることもあり、必ずしもその内容の正確性および完全性を保証するものではございません。そのため、本記事をエビデンスとしたゼットスケーラー及びクラウドストライクへの問い合わせなどはご対応致しかねることをご理解頂けると幸いです。掲載内容はあくまで個人の意見であり、ゼットスケーラー及びクラウドストライクの立場、戦略、意見を代表するものではありません。当該情報に基づいて被ったいかなる損害について、一切責任を負うものではございませんのであらかじめご了承ください。

## はじめに
はじめましてigaiga2です。

CrowdStrikeとZscalerはテックパートナーとなっており、様々な連携機能があります。例えば、Zscalerのサンドボックスで検知した情報をCrowdStrikeへ取り込み、迅速にインシデント対応を行ったり、CrowdStrikeのCrowdStrike Falcon(エージェント)によって算出されたスコアを元にZscalerのZscaler Client Connector(エージェント)でアクセスポリシーを制御したりすることができます。

https://help.zscaler.com/ja/zia/integrating-crowdstrike

今回、Zscalerさんと共に基本的なエージェント併用において、隔離機能の動作やバイパス設定の必要有無について検証を行ってみましたので、その結果を共有したいと思います。

## 今回の環境
今回の検証の目的は主に以下の3点となります。
少々細かいですが、実際にお客様に利用いただく際注意が必要な点だろうということで、Zscalerさんと一緒に環境を整えた上で検証を行いました。
- Zscaler Client Connectorが導入されている状態でCrowdStrike Falcon上のログで、通信先の可視化が可能か、プロセスから見た宛先が正しく可視化できるか？
- CrowdStrike FalconによるNW隔離・解除が問題なく動作するか？
- CrowdStrike FalconによるNW隔離を実施した際に、リモートレスポンス機能(Real Time Response:RTR)が利用できるか？

準備した検証環境及び、検証内容は以下の通りです。（少し前なのでバージョンが古い点はご容赦ください。。）

### 検証環境
- エージェントバージョン
   - Zscaler Client Connector バージョン：4.1.0.98
   - CrowdStrike Falconバージョン：6.54.16808.0
- Zscaler側の設定
   - CrowdStrike宛先のBypass設定及び通信許可設定なし
   - CrowdStrike宛先のSSL復号なし(Zscaler Recommended Exemptions ruleは有効化した状態)
- CrowdStrike側の設定
   - Containment Policyでの設定なし（隔離時も通信を許可する宛先設定はしてない状態）

### 検証内容
- ZTunnel2.0おける下記状況チェック
  - 通信ログ：CrowdStrike Falconのロギングで、各プロセスの実通信先が記録されるか
  - 隔離テスト：CrowdStrike Falconの隔離/隔離解除が動作するか
  - 隔離テスト：CrowdStrike Falcon隔離時にReal Time Response機能が動作するか

- 検証パターン
  - Tunnel2.0+ FAILOPEN: Direct
  - Tunnel2.0+ FAILOPEN: Disable
  - Tunnel2.0+ FAILOPEN: Disable + T2 Failure behavior: Block all traffic

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654252/393c4716-1ab2-d87d-22cb-2c5f7f34dea8.png)

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654252/a94eaa26-12f1-dc28-f5d1-85869a7dd7ac.png)

![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654252/d41622a1-2382-6088-06a6-802569ab762b.png)



## 結果
結果としては以下の通りです。
ZCC Tunnel2.0＋CrowdStrike Falconの組み合わせにおいて全て問題なく動作しました。
| ZCC設定 | Falconでの<br>NW可視化 |Falconでの<br>NW隔離/解除 |Falconでの<br>隔離時のRTR |
|:-----------|:------------|:------------|:------------|
| ZTunnel2.0<br>設定なし| OK        | OK         |OK|
| ZTunnel2.0<br>+FAIL OPEN:<br>Disable access| OK      | OK       |OK|
| ZTunnel2.0<br>+T2 Failure behavior:<br>Block all traffic| OK        | OK         |OK|




## まとめ
今回ZscalerとCrowdStrikeエージェントの併用を検証しました。

ZscalerのSSL inspection設定においてはZscaler Recommended Exemptions ruleを利用することで自動バイパスされます。隔離利用において特別な設定は必要なく、隔離及び隔離解除、隔離時のRTRが可能でした。
rqtの設定を保存して再利用する [ROS2]

# 概要

一度設定したrqt画面の設定を保存して2回目以降に同じ設定を起動する方法

# 手順

rqt_plotを例にする

## 設定ファイルのExport

ros2 run rqt_plotで起動すると設定の保存機能が使えないのでrqt本体を起動する

```rqt
rqt
```

Plugins->Visualization->Plotでrqt_plotを起動して、トピックや線の色を設定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/79589e57-ba07-7225-8321-ad91fec973e7.png)

上のPerspectivesから`Export...` を選択、適当な名前で適当な場所に.perspectiveファイルを保存する。
今回は camera_imu_plot.perspective で保存。


## 設定ファイルのImport

perspective-fileオプションを使用して先ほど保存したperspectiveファイルを起動

```bash
rqt --perspective-file camera_imu_plot.perspective 
```



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/d814802f-218b-731f-1faa-19e1befdaf04.png)


# おわりに

rqt_plotの場合、Figure optionsで設定した線の色の設定は保存されていなかった。
ROS のrqtも手順は同じ。



# 参考

https://docs.ros.org/en/iron/Concepts/Intermediate/About-RQt.html
Unityのinspectorでcurve入力

Unityでゲームコントローラのアナログ値に変化を加えたいメモ

### AnimationCurveの利用

エディター機能の利用

```C#
using UnityEditor;

public AnimationCurve animationCurve;
```

#### 配列で保持

いろいろ種類を持ちたいので配列で保持

```C#
[NonReorderable] public AnimationCurve[] animationCurve;
[SerializeField, Range(0, 10)] int animationCurveIndex = 0;
```

こんな感じで複数を保持

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/6d23028c-f297-048c-b75c-ff8d5ecb3cca.png)

#### 取り出し方

Indexを入力できるようにしてcurveの値を取得

```C#
public float GetValue(float val)
{
  return animationCurve[animationCurveIndex].Evaluate(Math.Abs(val));
}
```

### 参考URL

https://docs.unity3d.com/ja/Packages/com.unity.timeline@1.5/manual/insp_clp_aud.html#blend-curves

https://light11.hatenadiary.com/entry/2021/08/11/194500