OmniAICreator/Qiita-1.07M huggingface dataset:
Ectoクエリを補間(Interpolation)した場合、補間前に設定していた別名が使えない場合の対策

Elixir ECTO学習時に、キーワードクエリを使って、Ectoクエリを補間(Interpolation)した場合、補間前に設定していた別名が使えなくて、悩んだので、その対策について記載します。

テーブル構造はこんな形です。サンプルデータを正規化して用意しました。

![スクリーンショット_20221209_000258.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954665/4785e876-08a3-25d1-4a23-03ffdf1f74ed.png)

（やりたかったこと）
以下のようにEctoクエリを補間したのに変数がバインドされていないとエラーがでます。
他のサイトの例など調べていると、実行できているように見えたのですが、ダメでした。

```Elixir
iex> import Ecto.Query
iex> alias Olympic.Repo

iex> goldmedal = from r in Olympic.Result, where: [medal: "Gold"]                 #Ecto.Query<from r0 in Olympic.Result, where: r0.medal == "Gold">

iex> Repo.all(from a in Olympic.Athlete, join: ^goldmedal, on: [athleteid: a.athleteid], where: a.sex == "M", select: {a.name, r.team, r.games, r.sport, r.event, r.medal})       
** (Ecto.Query.CompileError) unbound variable `r` in query. If you are attempting to interpolate a value, use ^var
    (ecto 3.9.2) expanding macro: Ecto.Query.select/3
    iex:20: (file)
    (ecto 3.9.2) expanding macro: Ecto.Query.from/2
    iex:20: (file)
```


（対策）
補間後に別名を設定すれば別名が設定でき、取得したいデータが取得できました。

```Elixir
iex> goldmedal = from Olympic.Result, where: [medal: "Gold"]                      #Ecto.Query<from r0 in Olympic.Result, where: r0.medal == "Gold"
iex> Repo.all(from a in Olympic.Athlete, join: r in ^goldmedal, on: [athleteid: a.athleteid], where: a.sex == "M", select: {a.name, r.team, r.games, r.sport, r.event, r.medal})

00:24:57.324 [debug] QUERY OK source="athletes" db=242.1ms queue=23.0ms idle=1053.9ms 
SELECT a0."name", r1."team", r1."games", r1."sport", r1."event", r1."medal" FROM "athletes" AS a0 INNER JOIN "results" AS r1 ON (r1."medal" = 'Gold') AND (r1."athleteid" = a0."athleteid") WHERE (a0."sex" = 'M') []
[
  {"Edgar Lindenau Aabye", "Denmark/Sweden", "1900 Summer", "Tug-Of-War",
   "Tug-Of-War Men's Tug-Of-War", "Gold"},
・・・省略
```

同じように悩んだ人がいればご参考に。


（環境）
Windows 11
psql (PostgreSQL) 15.0
postgrex 0.16.5
ecto_sql 3.9
iex 1.14.0
JavaScriptの基礎をおさえる　番外編　〜innerTextとinnerHTMLの違いとは？　DOMって何？〜

　JavaScriptの練習をするにあたってよくでてくるinnerTextとinnerHTML、それからDOM。それぞれざっくりとした理解はしているつもりだが、今回は学習の足固めとして正しく理解をしたいと思う。
## innerTextとinnerHTMLについて
inner = 内側、内部
Text = 文字情報
がinnerTextである。
　つまり、HTML要素の<開始タグ>と<終了タグ>に内包されたテキストのことである。これはHTML要素に内包されたコンテンツそのものを表しているが、**innerTextプロパティは内包されたテキスト部分のみを参照する。** **もしもコンテンツ内に別の要素が内包されていても、要素の操作はできない。**
innerHTMLプロパティの場合は、**テキストだけでなくHTML要素も認識できるプロパティなので、HTML要素を含めた値を取得したり、代入したりすることができる。**

例
```html:html
<div id = "noodle">ラーメン食べたい</div>
```
```javascript:javascript
let elem = document.querySelector("noodle");

elem.innerText  // => ラーメン食べたい
```
となる。一方、
```html:html
<div id = "noodle">ラーメン<b>すごく</b>食べたい</div>
```
の場合、
```javascript:javascript
let elem = document.querySelector("noodle");
elem.innerText   //=>　ラーメン<b>すごく</b>たべたい（<b>タグはテキストとしてみなされる）

elem.innerHTML   //=>ラーメンすごく食べたい（すごくの部分がboldになって表示される）
```

※ document.querySelector は、引数に与えたCSSセレクタに合致する画面上のHTMLタグ要素を一つ取得する。

## DOMについて
　DOMとは、Document Object Modelの略である。
　例えば何かのページを見たいと思い、クリックしたとすると、サーバーに「見せてね」というリクエストが送られる。それに対してサーバーはレスポンスとしてHTMLを返すのだが、**サーバーから返された時点ではただのテキストの状態である。**
![スクリーンショット 2022-12-09 0.07.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884270/a44d5946-0778-1750-414d-e3e27183cdd3.png)

　それを**ツリー構造**というものにして、
![スクリーンショット 2022-12-09 0.08.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884270/71fa36b9-f172-2b3d-1d40-bdc382152ee1.png)

　「あぁこのタグはここと関連しているから、ここまでがbodyですね。なのでこう表示しましょう」という風に認識するのがDOMの役割である。（違っていたらすみません。ご指摘お願いします。）
　したがって、JavaScriptで「ここの要素を取得して〜してね」という指示は、正確には**HTMLに働きかけているのではなく、DOMに働きかけている**のである。
 ちなみに右クリックして使うことができる「検証」ツールで見えている画面がDOMである。ツリー構造をしているのが一目瞭然である。DOMは書き換えることができるから、「検証」で書き換えたものはとりあえずページに反映される。ところがページをリロードすると、改めてサーバーに保存されているHTMLを読み込むため、書き換える前のページに戻る。

## 今日のまとめ
DOMはJavaScriptを理解するうえで重要な考え方であることがわかった。イベントの発火はDOMを介して行われるものであり、HTML自体が書き変わるわけではないということがわかった。


> 参考文献
[JavaDrive様より Home › JavaScript入門 › DOM入門
](https://www.javadrive.jp/javascript/dom/index1.html)
PostmanでCookieが必要なAPIを実行する手順Step.1 --Postman Interceptorの利用方法

PostmanでCookieが必要なAPIを実行する方法　Step.1
    --Postman Interceptorの利用方法（個人ノート）

１．Chromeブラウザに「Postman Interceptor」を追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/9fc33e26-e4a7-5082-5f6c-5c7e3b640b90.png)

２．インストール完了したら、拡張機能に有効にさせる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/0819c286-d6b7-14d4-c13e-ab89ae9d70ee.png)

３．画面右上のデベロッパーモードをONにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/eaa416ef-f5d6-5711-bcdb-3ad568f761c2.png)
　表示されたIDをコピーする

４．ブラウザの拡張機能一覧にpostman interceptのアイコンをクリックし、
    「Still using the Postman Chrome APP」を選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/1223be18-a98b-5cde-647b-4f23b3c2deaa.png)

５．「Capture request」をONにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/be3f289b-e893-cad7-f8d8-3a6a4780e6e6.png)

６．Postman Classicを開け、リクエストの画面にCookieのリンクボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/f0b940b3-6d23-5021-41b5-c15eb0502a55.png)


７．Sync Cookiesに入り、「Install Interceptor Bridge」を選択してインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/ac90b81d-35b3-4bc7-0d0a-ec4925a46288.png)
    インストール中の画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/5bb504c3-55b6-2ae3-9ce0-c99591cb676d.png)

８．インストール完了したら、緑の「CONNECTED」が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/641e397d-3c96-3c9f-eaaa-88d295c8ba28.png)

９．Chromeブラウザに戻り、もう一度拡張機能のPostman Interceptorをクリックし、Requests中の「Capture requests」をONにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/5399da35-5593-f0c8-ec69-e88e3465a3f1.png)

１０．リクエストの履歴が見えるようになった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/49ec72ca-1ea1-56b9-0582-6051ec2aba6b.png)

１１．CookiesのCapture cookiesをONにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/c5d9e9d3-d8b8-b0a9-a53e-30980da89646.png)

１２．HeaderにCookieを追加して、ログイン操作のリクエストができるようになった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3016669/cd1ea576-c6e9-4c5f-1ff3-c512f8cd8736.png)
IntelliJの実行構成をいじってアプリ起動前に息抜きする

## 初めに

突然ですが、ビルドしてアプリが実行されるまでって暇ですよね、、、？
その間にいろんな情報を得たい
息抜きしたい...
僕のようなエンジニアに向けて書いています。

## 起動バナー
これは普通のSpring Boot。
![スクリーンショット 2022-12-08 23.33.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408705/3a1b4b4e-96ba-46ef-b96e-2b915ee41208.png)


## 今回やるバナー
起動時に今現在の天気を出力してみる。。。(京都旅行したい。。。)
![スクリーンショット 2022-12-08 23.33.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408705/5b3d7c54-be29-2111-f3f1-7a856eb2f4c4.png)

見切れてるけど毎回違うモンスターの画像を出力したり。。。
![スクリーンショット 2022-12-08 23.35.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408705/e42e1dcb-ac73-fa00-dc0a-22ffe020ec95.png)

## 起動バナーをカスタマイズする
ディレクトリ配下を対象に後述のファイルを配置することで好きな画像や文字を表示できます。
src/main/resources
* banner.png(jpgなどもOK)　←　モンスター出すのに使った
* banner.txt　←　天気出すのに使った

## 起動バナーを生成するシェルを作成する
天気ならこんな感じでシェルを書きます。
```
curl  "http://wttr.in/kyoto?lang=ja&0" >  "./src/main/resources/banner.txt"
```
[wttr.in api](https://wttr.in/:help "wttr.in api")

モンスターなら感じでシェルを書きます。
```
curl -o "src/main/resources/banner.png" "https://app.pixelencounter.com/api/basic/svgmonsters/image/png"
```
[pixelencounter API](https://pixelencounter.com/Api "pixelencounter API")

## 実行構成をいじる
1. 実行構成を編集し上記のシェルをビルド前に実行するようにします。
![スクリーンショット 2022-12-08 23.58.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408705/faaf63b0-c818-e9fc-5084-90938cc7de18.png)
1. 起動前の+を押下します。(ない人はオプションを変更から「起動前のタスクを追加」を押下します
![スクリーンショット 2022-12-08 23.59.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408705/6e161fe0-4ac0-9d0d-a1ab-24220e2164d5.png)
1. 外部ツールの実行を押下します
![スクリーンショット 2022-12-09 0.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408705/7b2c8b29-7edd-1e5a-6717-ae94d156baf9.png)
1. 外部ツールメニューの＋ボタンを押下します
![スクリーンショット 2022-12-09 0.08.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408705/9f6a00ad-8a86-b89f-a078-e73855ab4c7c.png)
1. 名前、説明、プログラムのパスを指定してOKを押下します。
パスは画像にあるようなマクロを使うと動的に作れていいですね。
![スクリーンショット 2022-12-09 0.10.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408705/6ab20072-72bd-33d0-8c4c-3a910dabeffe.png)
1. 外部ツールメニューもOKを押下します。
1. 「2.外部ツール...」を起動前の位置をドラッグドロップで1.Makeの前に持っていってください。
![スクリーンショット 2022-12-09 0.13.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408705/52affc1d-a93a-75ce-901f-6fb82067af38.png)
準備完了です！！

## 起動してみる
^F5とかで起動しちゃってください！！　
※VSCodeのキーマップにしてる人の場合

## 最後に
他にもチャットワークやSlackの通知を知らせるとかニュースの見出しを表示する、小ネタ系のtipsの紹介など色々遊べそう。

## 御礼
本記事は下記の記事にインスパイアされて書きました。
記事を教えてくれた同僚と下記の記事を書いた人に感謝申し上げます。
[【遊び心満載】SpringBootの起動時の出力を任意の画像やアイコンに差し替える機能が面白い【謎の技術】](https://blogenist.jp/2018/10/02/6291/ "【遊び心満載】SpringBootの起動時の出力を任意の画像やアイコンに差し替える機能が面白い【謎の技術】")

以上。
VUEでAPIからJSON形式で返されたn個のメッセージをn行で画面に表示

# VUEでAPIからJSON形式で返されたn個のメッセージをn行で画面に表示
## やりたいこと
バックエンドのAPIに何かしらの処理を投げて返ってきたresponse（JSON形式）に含まれるメッセージを画面に表示したいが、何行あるかは結果ごとに異なる。
画面には返ってきたメッセージがあればすべて表示したい。
※「何行あるか」の情報もJSONに含まれるものとする。

## 実装
v-forディレクティブを使用することで配列内の複数個のメッセージを表示
```
<script lang="ts">
    //メッセージ格納用のオブジェクトを宣言
    type TypeMessageList={
        count:number,
        messages:string[],
    }
    const Messages = reactive<TypeMessageList>({
        count:0,
        messages:[],
    })

    async function throwAPI (){　　
        try {
            //メッセージ取得API
            const res = await axios.get("/getmessageapi")
            //オブジェクト初期化
            Messages.count=0;
            Messages.messages=[];
            //メッセージの行数を取得し、行数分ループすることでメッセージを配列に格納
            Messages.count=res.data.count;
            for(let i = 1;i<=Messages.count;i++){
                Messages.push(res.data.messages[i].message);
            }
        } catch (err) {
        //ここはエラー処理
    }
<script>

<template>
    //メッセージ取得ボタン
    <button v-on:click="throwAPI()" >メッセージを取得する</button>
    //v-forでループし、メッセージを表示
    <div v-for="message in Messages.messages" :key="message">
        {{ message }}
    </div>
</template>

```
【GMC-4】ルーレット

学研の4ビットマイコン GMC-4 でルーレットを作ってみた。

# 仕様

* ボタンを押している間、LEDの点灯位置がぐるぐる回る。
* ボタンを離すとLEDの点灯位置の移動が遅くなり、しばらくすると止まって抽選結果が確定する。

# プログラム

最初のループ `main_loop` でキーが押されるのを待ちながらYレジスタの値を2ずつ増やす。
ボタンが押されたら、1ビット右シフトして8を足し、8～15の乱数として扱う。
その後、`update_loop` でLEDの点灯位置を変えながらループを行う。
7個の2進LEDに加え、7セグメントLEDも点灯対象とするため、場合分けして処理する。
ボタンが押されている間は、`CAL TIMR` 命令により約0.1秒間隔で点灯位置を変える。
ボタンが離されると、間隔を約0.3秒にし、止まるまでの移動回数を減算しながら移動するようにする。
この回数には `main_loop` で生成した乱数を用いる。
移動回数を使い切ると、エンド音を鳴らして抽選結果の確定を知らせる。

以下のプログラムは、[MikeAssembler](https://mikecat.github.io/mike_assembler/) でアセンブルできる。

```
target gmc4

	; Z = ルーレット位置
	TIY 0
	CH
	; A = キーが離されたフラグ 兼 ウェイト時間
	; Y = キーが離された後の更新回数カウンタ
	TIY 0
main_loop:
	AIY 2
	KA
	JUMP main_loop
	CY
	CAL SIFT
	AIA 8
	CY
	TIA 0
update_loop:
	CAL TIMR
	CH
	; これまでの位置を消灯し、次の位置に移動する
	CIY 7
	JUMP off_binled
	CAL RSTO
	TIY 0
	JUMP on_led
off_binled:
	CAL RSTR
	AIY 1
on_led:
	; 新しい位置を点灯する
	CIY 7
	JUMP on_binled
	TIA 8
	AO
	JUMP led_done
on_binled:
	CAL SETR
led_done:
	CH
	; キー判定・更新制御
	CIA 0
	JUMP after_key_release
	KA
	JUMP key_released
	TIA 0
	JUMP update_loop
key_released:
	TIA 2
after_key_release:
	AIY -1
	JUMP update_loop
	CAL ENDS
	JUMP main_loop
```

以下は、このプログラムの機械語表現である。

```
  | 0 1 2 3  4 5 6 7  8 9 A B  C D E F
--+-----------------------------------
0 | A 0 2 A  0 B 2 0  F 0 5 3  E 6 9 8
1 | 3 8 0 E  C 2 D 7  F 2 2 E  0 A 0 F
2 | 2 6 E 2  B 1 D 7  F 3 1 8  8 1 F 3
3 | 3 E 1 2  C 0 F 4  4 0 F 4  2 8 0 F
4 | 1 3 8 2  B F F 1  3 E 7 F  0 5
```

# 実行結果

<iframe width="560" height="315" src="https://www.youtube.com/embed/krSeXQb5B6c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
SSR - Server Side Renderingのメリットとアーキテクチャについて調べてみます。

## SSRについて簡単に説明

SSRという技術用語はServer Side Renderingの省略です。SSRは、サーバー側でHTML、CSSレンダリングを行うことを特徴としてます。

ユーザーのブラウザから、特定なページURLへ遷移するたびサーバー側にリクエストを受け取り、そのままサーバー側でAPIと連携をして、APIのレスポンスデーターと組み合わせて、HTMLレンダリングが行われます。生成されたHTMLをブラウザに返すことになります。

SSRはNext.js、Nuxt.js等のフレームワークを使うことで比較的手軽に実装することができます。

## SSRのアーキテクチャ

SSRを利用しているサイトでブラウザーのリクエストがどのように実行されているかは、下記の図で理解できます。

![SSR diagram.drawio (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542663/47802fde-5799-67ea-d625-c680dfc07281.png)


1. ブラウザーがURLページのリクエストを送信。
2. サーバー側はAPI連携でデーターを取得。
3. サーバーがデーターを所得してから、希望なデーターを含むレンダリングHTMLを生成。
4. ブラウザーに非インタラクティブなHTMLファイルにをす。
5. ブラウザに届きた非インタラクティブなページが表示される
6. ブラウザーがHTMLに置いてるJavaScriptファイルをロードする
7. ブラウザがフレームワークを実行ページがインタラクティブになる

8と９の処理はJavascriptの処理でSPA（Single Page Application）と同じです。例えば、ボタンを押すときなどに、ブラウザー側Javascript処理が行われて、データ取得と再レンダリングを回すことになっています。

## SSRのメリット

### SEO対策

Google 検索エンジンはページの読み込み速度により、優先的に検索順位を与えるようになってます。
読み込み速度が早くなるとユーザーのセッション時間やサイトの直帰率なども改善されます。

SSRが導入されるサイトに対して、Google クローラーがページリクエストすると、レンダリング済みHTMLがすぐに返されることで、ページ全体にインデックスされることになります。

### ユーザーエクスペリエンスが向上

サーバー側でレンダリングされたアーキテクチャのお陰で、CSR(Clinet Side Renderingの省略)より、SSRを利用するサイトはページの読み込みが速くなり、ユーザーエクスペリエンスが向上するはずです。

さらに、SSR はユーザーのネットワーク環境・デバイスのスペックに依存されないため、安定的な配信を提供できます。（レンダリング処理をサーバー側で行う）

### ページキャッシュが最適化
SSR を行うことで、サーバーサイドでレンダリングされた結果（HTML/JS）をキャッシュさせる事ができます。

Cloud Front などの CDN を利用することで、オリジンサーバの代わりにコンテンツを配信することができ、表示速度などのパフォーマンスを向上できます。

ただ、キャッシュを利用する場合はどのタイミングでキャッシュを削除するかなどのキャッシュ戦略について検討が必要です。

## 参考した記事
- https://zenn.dev/rinda_1994/articles/e6d8e3150b312d#ssr
- https://www.ragate.co.jp/blog/articles/10524#h2-3-h3-0
- https://www.topsinfosolutions.com/blog/server-side-rendering-boost-performance-user-experience/
ロードバランサーで使用する規則（負荷分散規則、インバウンド規則、アウトバウンド規則）

●ロードバランサーで使用する規則
■負荷分散規則
必要に応じてセッション永続化を構成することもできる。
Cookieを使用するようなWebアプリでは、クライアント側でもつCookie情報とWebサーバー側で保持するデータの両方が必要になるため、アクセスのたびに振り分け先が変わるのは望ましくない。

■インバウンドNAT規則
ナットワークアドレス変換（NAT)を使用して、ロードバランサーで受信したトラフィックを特定の仮想マシンにルーティングするための規則。
１：１のポート変換を行う規則であり、特定の外部ポートを隠蔽するのに使用できる。

■アウトバウンド規則
Standard SKUのパブリックロードバランサーが選択されている場合のみ構成可能なアウトバウンド接続のための規則。必須ではない。
・IPマスカレード
・送信トラフィックの許可リストの単純化
・デプロイするパブリックIPソース数の削減

上のようなシナリオを実現したい場合に、アウトバウンド規則が役立つ。
PlantUML のレイアウト辛い

ほんの少しの小ネタ、備忘録として。

https://medium.com/veltra-engineering/how-difficult-it-is-to-adjust-the-layout-using-plantuml-997884410db5

こちらで PlantUMLのなにこれレイアウト を打倒されてますが "left to right direction" を使った時点で返り討ちに遭ったと感じます。
なにせ left to right をかますとレイアウト指示の方向感覚を崩されてしまいます。

それでいろいろ考えたのですが単純な答えにたどり着きました。

```
@startuml
    rectangle {
        class b
        class d
    }
    a -ri-> b
    c -ri-> d
    a -[hidden]- c   <<追加
    b -[hidden]- d
    d -ri-> e
@enduml
```

```plantuml
@startuml
    rectangle {
        class b
        class d
    }
    a -ri-> b
    c -ri-> d
    a -[hidden]- c
    b -[hidden]- d
    d -ri-> e
@enduml
```

こうです。
なぜ b - d 間を縦繋ぎしたのに、a - c 間を縦繋ぎしなかったのでしょうね。

これは結果的に解決できるケースでスッキリしましたが、PlantUML の自動レイアウトは本当に変なふうになるので困ります。
どういうロジックで作るとそうなるんだ！？と叫びたくなることが頻発します。
特に状態遷移図ですね。その矢印、直線でいいから！曲げなくていいって！
自動レイアウトに任せておけばそれなりにはしてくれるんじゃないの？
右だって言ってんだろうが！右向きになれよ！

こういう問題と戦う時間が、実際の作業の大半を占めるというのが情けない。
それでも UML 描画ソフトみたいなのと Word とかの組み合わせで作るより、Markdown Preview Enhanced で打ち込んだほうが早い気がします。

それにレイアウト問題で悩むことで、逆に設計が洗練することもあります。
そもそもレイアウトがおかしくなるのは設計の複雑度が一定を超えたときなんでしょうね。
なので複雑度を下げることでレイアウトが正常化する、なんてことに。

設計する段階でそれなら良いのですが、既成品の説明を表現するにはそれじゃ困ります。
もしかしてこういう思考って Excel 方眼紙を好む日本人的感覚だったり？
Laravelでassets関数を使用した部分のcss・jsが読み込まれない

## 経緯

デプロイした際にcssが効いていなかった。開発者ツールで見てみるとassets関数を使用した部分で/public/以下を表示せずに、/css/app.cssみたいな感じで出力されていることがわかった。

## 開発環境

Laravel 8.8.3
サーバー：Xserver

## 解決策

.envに以下を追加する。

```php
// example.comの部分は自身のサイトのものに書き換える。
ASSET_URL=http://example.com/public
```

その後以下コマンドでキャッシュクリアしておく

```php
php artisan route:clear
php artisan cache:clear
php artisan config:clear
php artisan view:clear
npm run dev
php artisan key:generate
```

参考元
https://readouble.com/laravel/8.x/ja/helpers.html#method-asset
Elasticsearch-sudachi のローマ字読み仮名フィルタ

## 読み仮名フィルタ

[Elasticsearch](https://www.elastic.co/elasticsearch/) の [Sudachi](https://github.com/WorksApplications/Sudachi) プラグインである Elasticsearch-sudachi には読み仮名を取得するための `sudachi_readingform` フィルタがあります。

https://github.com/WorksApplications/elasticsearch-sudachi

```JSON:PUT sudachi_sample
{
  "settings": {
    "index": {
      "analysis": {
        "filter": {
          "romaji_readingform": {
            "type": "sudachi_readingform",
            "use_romaji": true
          },
          "katakana_readingform": {
            "type": "sudachi_readingform",
            "use_romaji": false
          }
        },
        "tokenizer": {
          "sudachi_tokenizer": {
            "type": "sudachi_tokenizer"
          }
        },
        "analyzer": {
          "romaji_analyzer": {
            "tokenizer": "sudachi_tokenizer",
            "filter": [ "romaji_readingform" ]
          },
          "katakana_analyzer": {
            "tokenizer": "sudachi_tokenizer",
            "filter": [ "katakana_readingform" ]
          }
        }
      }
    }
  }
}
```

このような設定で、以下のようにクエリを投げると読み仮名をえることができます。

```JSON:POST sudachi_sample
{
  "analyzer": "katakana_analyzer",
  "text": "寿司"
}
```

結果はこうなります。

```JSON
{
  "tokens" : [
    {
      "token" : "スシ",
      "start_offset" : 0,
      "end_offset" : 2,
      "type" : "word",
      "position" : 0
    }
  ]
}
```

読みのローマ字表記をえることもできます。

```JSON:POST sample_sudachi
{
  "analyzer": "romaji_analyzer",
  "text": "寿司"
}
```

```
{
  "tokens" : [
    {
      "token" : "susi",
      "start_offset" : 0,
      "end_offset" : 2,
      "type" : "word",
      "position" : 0
    }
  ]
}
```

## kuromoji とのローマ字形式のちがい

このローマ字の読み仮名をえる機能はもともと kuromoji にあり、それにならったものです。しかし kuromoji と Elasticsearch-sudachi ではローマ字の表記規則がことなります。kuromoji はヘボン式 (の一種)、Elasticsearch-sudachi は MS-IME 風のローマ字入力の形式になっています。

| 入力 | kuromoji |Es-sudachi|
|:-----|:---------|:---------|
| 寿司     | sushi  | susi   |
| 京都     | kyōto  | kyouto |
| コーヒー | kohi   | ho-hi- |
| 勘案     | kan'an | kannan |
| っ       | N/A    | ltu    |

ローマ字の形式として一般的なのはヘボン式や訓令式、日本式ですが、Elasticsearch-sudachi ではあえて、kuromoji とはことなる MS-IME 風のインプットメソッドでつかわれるローマ字規則を採用しています。

Elasticsearch においてなんのために読み仮名のローマ字表記をつかうかとかんがえたときに、いちばん利用価値があるのはインクリメンタルサーチではないかとおもいます。検索のキー入力時にヘボン式やその他の一般的なローマ字が入力されることはありません。そこでインプットメソッドの形式、なかでもいちばんよく利用されている MS-IME 系の表記規則を採用しているのです。

## まとめ

Elasticsearch-sudachi では `sudachi_readingfrom` フィルタをつかってローマ字読み仮名をえることができます。ローマ字の形式はインクリメンタルサーチで利用されることを想定して MS-IME 風のインプットメソッドでつかわれるものになっています。

ではよい Sudachi life を。
基本情報技術者試験にあと一歩届かなかった話

# はじめに
初投稿です。今年の秋に行われた基本情報技術者試験にあと一歩及ばず
不合格となってしまったので戒めに投稿いたします。
来年から受ける方の参考に少しでもなれば幸いです。

# 勉強時間について
私の日の勉強時間は1日2.5時間を3か月間行い180時間ほど行っていました。
(時間が少ないのは2か月目に少しサボってしまった為)
スケージュールとしては以下の時間ルーティンとして組んでいました。
・通勤の行き帰り:60分
・昼休み　　　　:30分
・夜の空き時間に:60分
勉強の配分としては午前問題を1時間、午後問題を1.5時間です。

# 勉強方法について
午前問題の勉強方法ですが、過去問道場を解きまくっておりました。
5年分を3往復して、点数としては過去問題を75～80点とれるレベルとなっておりました。

午後試験の勉強方法は、以下過去問本を解いていました。
> [令和04-05年 基本情報技術者 試験によくでる問題集【午後】](https://www.amazon.co.jp/%E4%BB%A4%E5%92%8C04-05%E5%B9%B4-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E8%A9%A6%E9%A8%93%E3%81%AB%E3%82%88%E3%81%8F%E3%81%A7%E3%82%8B%E5%95%8F%E9%A1%8C%E9%9B%86%E3%80%90%E5%8D%88%E5%BE%8C%E3%80%91-%E6%83%85%E5%A0%B1%E5%87%A6%E7%90%86%E6%8A%80%E8%A1%93%E8%80%85%E8%A9%A6%E9%A8%93-%E3%82%A4%E3%82%A8%E3%83%AD%E3%83%BC%E3%83%86%E3%83%BC%E3%83%AB%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF/dp/4297123770/ref=asc_df_4297123770/?tag=jpgo-22&linkCode=df0&hvadid=553790046648&hvpos=&hvnetw=g&hvrand=11182760509021349751&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009307&hvtargid=pla-1466153661036&psc=1&th=1&psc=1)

個人的にはアルゴリズムが始め全く取れない状態であったため、
アルゴリズムを1日一回は解くよう心掛けておりました。
他の問題についてはセキュリティ,データベース,ネットワーク,Javaを
ローテーションで解くように心掛けておりました。



# 受験結果
今回の私の受験結果ですが以下のような結果となりました。
午前試験：70点
午後試験：57点
結論から言いますと午後問題の対策が甘く落ちてしまいました。
受験後に受けた午後問題のスコアレポートを表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984948/59282cec-836b-de96-7277-d10a3680d7df.png)

スコアレポートを見て解る通り、セキュリティ問題で大きく失点し
次にデータベースとソフトウエア開発(JAVA)で失点しまいました。

# 落ちた原因
* **セキュリティについて**
出題された問題への理解度が足りていなかったことが主な原因と考えています。
午前問題で過去問道場に注力した弊害として、問題から単語を答えることは出来ても単語から意味を答えらない状態でした。午後問題も過去問で問わこと以外の知識については理解度が足りていませんでした。以上の理由から自身が過去問で解いていない箇所が出ると全く解けず、今回の惨状を招いてしまいました。データベースも同じ理由です。

* **ソフトウエア開発(JAVA)について**
此方は圧倒的に問題を解いた数が少なかったことが主な原因と考えています。
JAVAの問題は参考書に乗っていなかった為、過去問道場の問題を近年から6問ほど
高得点になるまで繰り返し勉強していましたが、解いた問題のレパートリーが少ないために
今回のように毛色が違う問題にあたったときに突っかかる事態に陥ってしまいました。




# 来年に向けてどうするか
来年からは出題方法が以下のように大きく変わります。

 [来年度の出題形式参考URL](https://www.jitec.ipa.go.jp/1_00topic/topic_20220425.html)

**出題形式**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984948/1c3b9898-0485-544b-f204-64d882834196.png)

**出題範囲**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984948/1fe3c0ef-1968-d6b4-b14d-2383f9b0208e.png)

**対策**
午前問題は試験時間が短縮し、出題範囲が少なくなる代わりに各配点が大きくなるため
前年度よりも1つ1つの問題をミスせず解けるかが肝となってくると思います。
よって、変わらず過去問道場を行うと共に参考書を浅く広く読み込み不明な単語について
理解を深める作業が必要になってくると考えています。

午後問題は問題がセキュリティ、擬似言語(アルゴリズム)のみとなる他、
試験時間が短縮するのに、問題数が多くなることで1問当たりの回答時間が5分と短くなります。
よって、セキュリティについては知らない用語が無いよう参考書を網羅的に読み込んでいく他、過去午後問題を数重視で多くこなしていき、擬似言語については前年度と違い短文の問題となっているため、paizaやatcoderで論理的思考方法について経験を積みながら、各小問題にどのようなアルゴリズムの種類が使用されているかすぐに把握できるようにアルゴリズムの知識について深めていくことが大事になると考えています。

[午後問題のサンプル問題](https://www.jitec.ipa.go.jp/1_13download/fe_kamoku_b_sample.pdf)
今日のElixirSchoolメモ2「コレクション」

Elixir Schoolの学習メモです。

https://elixirschool.com/ja/lessons/basics/collections

## リスト

リストは事実上連結データ構造。

リストの長さを取得するのは線形時間(O(n))の処理になるので（要素数が多いほど時間がかかる）ので、先頭へ追加するほうが高速

```elixir
# リスト先頭への追加(高速)
iex> ["π" | list]
["π", 3.14, :pie, "Apple"]
# リスト末尾への追加(低速)
list ++ ["Cherry"]
iex> [3.14, :pie, "Apple", "Cherry"]
```

## ++/2演算子

++/2演算子はリストの連結に用いられます。

名前付き関数は、名前とパラメータの数（アリティ、arity）の2つで成ります。
アリティはElixir、Erlangのコードを説明するときの中核となるものです。大事！

リストの減算には strict comparison（===）が使われます。

```elixir
iex> [2] -- [2.0]
[2]
iex> [2.0] -- [2.0]
[]
```

## リストの頭部、尾部（ヘッド、テイル）

リストを扱う際には、よくリストのヘッドとテイルを利用する。
ヘッドはそのリストの最初の要素で、テイルは残りの要素。

Elixirではこれらを扱うために`hd`と`tl`という関数がある。

```elixir
iex(29)> hd [3.14, :pie, "Apple"]
3.14
iex(30)> tl [3.14, :pie, "Apple"]
[:pie, "Apple"]
```

パターンマッチングやcons演算子（`|`）を使うこともできる。

```elixir
iex(32)> [head | tail] = [3.14, :pie, "Apple"]
[3.14, :pie, "Apple"]
iex(33)> head
3.14
iex(34)> tail
[:pie, "Apple"]
```

## タプル

タプルは順序を持ったコレクション。他のすべてのElixirの構造体と同じく、一度作られたタプルは変更できない。

```elixir
{1, 2} {:ok, 42, "next"} {:error, :enoent}
```

## キーワードリスト

キーワードリストはマップとともに連想コレクション。

```elixir
[foo: "bar", hello: "world"]
```

Elixirは2つの要素を持つタプルのリストに変換する。

```elixir
[{foo: "bar"}, {hello: "world"}]
```

キーワードリストの特徴
* キーはアトム
* キーは順序付けされている
* キーの一意性は保証されない

キーワードリストは関数にオプションを渡すためによく用いられる。

## マップ

マップはキーと値のペアのコレクション。

```elixir
%{ key => value, key => value }
```

アトムがキーの場合はショートカットが使える。
```elixir
%{ red: 0xff0000, green: 0x00ff00 }
```

マップのキーが重複している場合、前の値が置き換えられる。
```elixir
iex> %{:foo => "bar", :foo => "hello world"}
%{foo: "hello world"}
```

アトムのキーにアクセスするための構文。
```elixir
iex(20)> map = %{foo: "bar", hello: "world"}
%{foo: "bar", hello: "world"}
iex(21)> map.hello
"world"
```

マップの存在するキーを更新する。
存在しないキーは`KeyError`が発生。

```elixir
iex(23)> map = %{foo: "bar", hello: "world"}
%{foo: "bar", hello: "world"}
iex(24)> %{map | foo: "baz"}
%{foo: "baz", hello: "world"}

iex(25)> %{map | wry: "baz"}
** (KeyError) key :wry not found in: %{foo: "bar", hello: "world"}
    (stdlib 4.0) :maps.update(:wry, "baz", %{foo: "bar", hello: "world"})
    (stdlib 4.0) erl_eval.erl:309: anonymous fn/2 in :erl_eval.expr/6
    (stdlib 4.0) lists.erl:1350: :lists.foldl/3
```

新しいキーを作成するには`Map.put/3`を使う。

```elixir
iex(26)> Map.put(map, :wry, "baz")
%{foo: "bar", hello: "world", wry: "baz"}
```
Pythonでデバッグのライブラリ

以下の2つを使用する。
・import pdb
・pdb.set_trace()

import pdbは、ライブラリの使用宣言で、
止めたい処理のところに、pdb.set_trace()と記載する。

それで、実行するとpdb.set_trace()の前の行数までで、処理が止まり
p 変数名を実行すると、知りたい変数の値を確認できる。
生IP恐怖症

# 生IP恐怖症とは
その文字の通りVPNやProxyなどを使わずにインターネットを利用する事に恐怖や不安を覚える症状です。
ただ、私がそう呼んでいるだけです。
出典はとある掲示板なのですが...

# 何が怖いのか
ウェブの世界はどこもトラッキングだらけです。
勿論、IPアドレスという指標は重要なものではありませんが、それでも住んでいる地域として記録される可能性があります。
私はネットとリアルは別けたいと考えているので、これはあまりよろしい事ではありません。
また、世の中にはURLを踏ませてIPアドレスを記録するサービスが存在します。
IPアドレスでは住所が分からないというのは皆さんも知っている事かと思いますが、それでも国、県、更には市区町村レベルまでの特定が可能になる場合があります。
ここから普段の発言やアップロードしていた写真(もちろん私はそのような事はしていません)などを組み合わせれば、住所の特定がとても容易いものになってしまいます。
また、何らかのサービスを利用していた時のIPアドレスが流出などした場合も同様に、インターネット特有の匿名性が損なわれてしまいます。
良くも悪くも、それが原因でインターネット上での他名義が見つかってなんやかんやといった話は十分あり得ます。
もしかしたら、インターネットと現実を別のものと捉える事自体が既に古い考えとなっているのかもしれませんが、私はそれでも生IP恐怖症の患者なのです。


# あとがき

Q. この記事の名前でGoogle検索すると普通にダメなのが出るのダメじゃないですか？
A. そうですね。
ただ、そういうコミュニティにこそ技術的な知識が豊富にあるので、積極的に見ていくべきだとも思います。
勿論思想は別です。
技術だけを見れば、そこには良も害もありません。たぶん。
問題は技術を利用する人間にあります。
C# 11 で初期化子を使った完全コンストラクターパターンを書いてみるんだ

どうも、完全コンストラクターパターン大好きマンです。でも、コンストラクターをいちいち書くのは面倒くさい。
インテリコードさんがある程度自動で書いてくれるものの、パラメーター追加時に XML コメントの追加を忘れたり・・・できることならデフォルトコンストラクターで済ませたいです。

初期化子の中で代入すればいいじゃないか、となりますが、初期化し忘れが怖い。
そこを解決してくれる機能が C# 11 で追加されました！


C# 11 で追加された [required キーワード](https://learn.microsoft.com/ja-jp/dotnet/csharp/programming-guide/classes-and-structs/properties#required-properties) と C# 9 ですでに追加されている [init キーワード](https://learn.microsoft.com/ja-jp/dotnet/csharp/language-reference/keywords/init) を使って、長ったらしいコンストラクターを書かずに完全コンストラクターパターンを実現してみましょう！

# ①今までの書き方
```cs
internal sealed class UserOld
{
    internal string Name { get; }

    internal string Email { get; }

    internal int Age { get; }

    public UserOld(string name, string email, int age)
    {
        Name = name;
        Email = email;
        Age = age;
    }
}
```
1. プロパティは `get` のみ定義
1. コンストラクターですべてのプロパティを初期化

このようにシンプルなクラスだったら気にならないけど、プロパティが増えたり名前が複雑になってくると面倒ですよね。
このクラスを使ってみると・・・
```cs
UserOld old1 = new("ひげげ", "higege@higege.com", 45);
UserOld old2 = new("ひげげ", "higege@higege.com"); // CS7036 エラー
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107938/8532641b-24b2-d494-d021-1bee1c62426b.png)
初期化し忘れを排除できます。

# ②required を使って書いてみる
```cs
internal sealed class User
{
    internal required string Name { get; init; }

    internal required string Email { get; init; }

    internal required int Age { get; init; }

    public User()
    {
    }
}
```
1. すべてのプロパティに `required` キーワードをつける
1. すべてのプロパティに `get` `init` を定義する
1. デフォルトコンストラクターでOK（書かなくても問題ない）

見慣れない `required` がありますが、すっきりしています。
このクラスを使ってみると・・・
```cs
User user1 = new()
{
    Name = "ひげげ",
    Email = "higege@higege.com",
    Age = 45,
};

User user2 = new()
{
    Name = "ひげげ",
    Email = "higege@higege.com",
}; // CS9035 エラー
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1107938/a3a8a237-4833-32c0-f587-f9d4440413a2.png)
同様に、初期化し忘れを排除できました。

# 比べてみる

## クラスの実装
行数少なくキーワードで属性の説明がされている②が若干わかりやすいか。かといって①がわかりにくいかと言ったらNO。

## 使用箇所
比較のため①も改行して並べてみます。
```cs
UserOld old1 = new(
    "ひげげ",
    "higege@higege.com",
    45);

User user1 = new()
{
    Name = "ひげげ",
    Email = "higege@higege.com",
    Age = 45,
};
```

いや、やはり使用箇所は断然①でしょう。クラス実装時の面倒よりも、使用箇所の面倒の方がイヤ。

# その他の課題
プロパティのルールはどう実装するんだ？①だったらコンストラクターないで順番にチェック、②は `init` を実装か。
そうするとクラスの実装のシンプルさが損なわれてしまう・・・うーん。

# まとめ
使用箇所の実装量・可読性から、これからも長ったらしいコンストラクターを書いていこうと思います。(ﾁｬﾝﾁｬﾝ
Power Automateの開発保守に便利と思ったメモ・コメント機能


# はじめに
システム開発を経験した立場で、最近知ってよかったと思うPower Automateの機能をご紹介します。

# 明日の自分はもはや他人
Power Automateで便利なクラウドフローを作ってみて、最初はうまく動いていてご機嫌だったのにある日突然うまく動作しない・・・いざフローを開いてみてもこのステップがどういう意味を持っていたかすっかり忘れている・・・あると思います。
気合を入れて壮大なフローを作ってみて途中で行き詰まって放置、結局後から見てもどこで行き詰まったかすらわからず結局ゴミフローがたまっていく・・・あると思います。

システム開発では設計書を作ったり課題管理をしたりとドキュメントで色々管理しています。でも、個人で開発している場合はそこまでやらない・・・ということがほとんどだと思います。それでも、作成や後々のメンテナンスで苦労しないよう、Power Automateで用意されている機能でうまく管理しましょうね、というお話です。

# トリガーやアクションの名前は分かりやすく変えよう
Power Automateのトリガーやアクションの名前は一般的な動作を示しているだけなので、そのアクションでどういうことをさせたいのか、というのが見えてきません。
「変数の作成」ならどういう変数を作成したいのか、条件分岐なら何を条件にどういうことをさせたいのか簡潔にわかりやすく設定したほうがよいと思います。後で見てどういう内容のトリガー・アクションか分かるような名前にしておきましょう。
アクション名の右側にある「・・・」をクリックすると出てくるメニューに「名前の変更」がありますので、これをクリックするとアクションの名前を変えることができます。

![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517315/6e9a4096-5936-822b-39a6-ea2ec1142caf.png)


# 書ききれないものはメモに書いておこう
アクションの名前をわかりやすくと書きましたが、アクションの名前に書ききれないということは多々あります。
また、将来の自分へ残しておきたいメッセージがあると思います。例えば「ここの変数を変えれば将来つかいまわしができそう」なんてこととか。
そういう時は、同じくアクション名の右側にある「・・・」をクリックすると出てくる「メモを追加する」でメモを追加しましょう。数えてみたら249文字入れられたので、それなりのメッセージが残せると思います。

![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517315/1f94e0d2-5893-dd7b-f37f-d52844546bf7.png)


# コメントで課題管理しよう
フローを作っている最中に行き詰まったとき・・・将来の自分にその課題を託したいということがあると思います。
そういう時は、同じく「・・・」から「新しいコメント」を入れておきましょう。右側にコメントを入れる欄が出てきますので、チャットのようにコメントを残すことができます（TeamsでEnter送信に慣れていましたがここはCtrl+Enterで送信なのですね…）

![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517315/2866543f-9679-012d-6122-9d8fe2460c67.png)

# おわりに
アクションの右にある「・・・」にいろんなメニューがあることを最近知ったばかりなので、今回記事にしてみました。お手軽に作れるツールのように見えて、今回紹介したようなちゃんと開発や保守をするのに役立つような機能も用意されてるところはいいなと思いました。同じような初学者の方の役に立てたら幸いです。
UnityでGitHub Actions(1) -Unityのライセンス認証

# はじめに
GitHub Actionsを使って、Unityのビルド及びGitHub Pagesへのデプロイ、Discordへのビルド成功・失敗通知を行います。
Slackに通知する事例はよく見かけますが、GitHub Actionsを使えばDiscordへもこのように比較的簡単に通知が行えるので、Discord上で開発のやり取りをしている場合は便利だと思います。
![スクリーンショット 2022-12-08 23.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/c10e332c-e631-aa79-7d02-aa6813af2613.png)
今回はalfファイルの発行からライセンス情報の登録までを扱います。

# 1. alfファイルの発行
ライセンス認証を行うため、alfファイルを発行します。
これをリポジトリ直下の`.github/workflows`ディレクトリに配置します。
以降のワークフローを定義したファイルも同様のディレクトリに置くものとします。
```YAML:activation.yml
name: Acquire activation file
on:
  workflow_dispatch: {}
jobs:
  activation:
    name: Request manual activation file
    runs-on: ubuntu-latest
    steps:
      # GameCI の Activation を利用して alf ファイルを発行する
      - name: Request manual activation file
        id: getManualLicenseFile
        uses: game-ci/unity-request-activation-file@v2
        with:
          # Unity プロジェクトのバージョン
          unityVersion: 2021.3.12f1
      # Upload artifact (Unity_v20XX.X.XXXX.alf)
      - name: Expose as artifact
        uses: actions/upload-artifact@v2
        with:
          name: ${{ steps.getManualLicenseFile.outputs.filePath }}
          path: ${{ steps.getManualLicenseFile.outputs.filePath }}
```
Unityバージョンは`2021.3.12f1`になっていますが、プロジェクトで使用しているバージョンに合わせて適宜書き換えて下さい。
このファイルがデフォルトブランチ(`main`や`master`など)に追加された後、`Actions/Acquire activation file`画面からRun workflowからデフォルトブランチを選択して実行すると、完了後アーティファクトに`Unity_vバージョン.alf`ファイルが生成されます。
![スクリーンショット 2022-12-07 215946.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/aa8cf71c-8191-136e-b178-2517640f5c50.png)

![スクリーンショット 2022-12-07 215644.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/ef734766-6e87-57a6-66b5-e0f3e818f7a5.png)

アーティファクトからalfファイルをダウンロードします。

# 2. ライセンス認証

https://license.unity3d.com/manual

上記のライセンス認証サイトにアクセスして、ライセンス認証を行います。

まず先程ダウンロードしたalfファイルをサイトにアップロードします。
![スクリーンショット 2022-12-07 220357.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/e24ccf47-0dde-0375-7067-26d10f34f855.png)
プランを選びます。
![スクリーンショット 2022-12-07 220815.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/dfc9557c-36ec-6de7-1fad-aa564c85d351.png)
ライセンス認証が完了したので、`Unity_vバージョン.ulf`ファイルをダウンロードします。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/c81a57f7-695a-dc1a-5c1b-8221d81cc15a.png)

# 3. リポジトリにライセンス情報を登録
リポジトリの`Actions secrets`に、名前を`UNITY_LICENSE`として、`Secret`にはulfファイルの中身をコピーアンドペーストしたものを追加します。

![スクリーンショット 2022-12-08 23.55.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/c352b652-4f4d-29fb-eae6-2765745d21b5.png)

# 参考

https://zenn.dev/nikaera/articles/unity-gameci-github-actions

# 次回

https://qiita.com/tanikura/items/b2334656bc1d1910e995
プログラミング学習を学ぶ前に知っておきたいこと~デザインforノンデザイナー編~

## 初めに
この記事は**プログラミング学習を学ぶ前に知っておきたいこと**と題したシリーズの一つです。
このシリーズは各テーマごとに連日投稿予定です。

## このシリーズ記事の対象者
- プログラミングに興味を持って、学習を検討している方
- 学習したいけど、何から手をつけたらいいのかわからない方

[前回の記事](https://qiita.com/MPrg2011/items/484ceb87c25518a68ba5)の続きです。

https://qiita.com/MPrg2011/items/484ceb87c25518a68ba5

::: note warn
※この記事はWebアプリケーションの開発の勉強をしたい方向けの情報になります。筆者が未経験のスマホアプリケーションやゲームについての記述はございませんのであらかじめご了承下さい。
:::

Webサイトの配色やフォント、なんとなくダサいけど勉強する時間はない…
そんな方に最低限の情報をお届けします。

## 配色編

### 色は３色
①ベースカラー
②メインカラー
③アクセントカラー
**①:②:③ = 70% : 25% : 5%**
上記の配色だと失敗が少なく、見やすい画面が作りやすいです。

配色まとめ

https://photoshopvip.net/72189



## フォント編

### 案件で有料のフォントを使うときは要注意

https://twitter.com/wurst_design/status/1592041759487725573?s=20&t=l7EJr6BkTUUdN84NHcSS4w

### 回避方法：商用フリーのフォントを使用する

おすすめ日本語フォント

1. いろはマル
2. やさしさ手書きゴシック
3. コーポレートシリーズ
4. はれのそら明朝
5. ゆずポップ
6. IPAゴシック
7. 源柔ゴシック
8. ラノベPOP
9. ほのかアンティーク丸
10. Rounded Mplus 1c

### OSで表示できないフォントがある

| 明朝体 | Noto Serif JP / Sawarabi Mincho |
| --- | --- |
| ヒラギノ | Windowsには入っていない |
| 游ゴシック | font-weight:500(ForWIndows) |


## 画像から使用されているフォントを解析

**画像/URL**

What Font Is

https://www.whatfontis.com/

**PNG/JPG**

MyFonts

https://www.myfonts.com/

**画像/URL/OpenType機能**

Fontspring Matcherator

https://www.fontspring.com/matcherator


### カテゴリ別おすすめフォント

**価格表示**
Din 1451 Alt

**Web開発**
Noto san JP

**バナー制作**
Rounded Mplus 1c

---
### 最後に
短い記事でしたが最後まで見ていただきありがとうございました。

明日はQiitaでアウトプットする際に参考にする媒体について投稿予定です。


参照元サイト

[配色のルール | はじめてのデザイン　〜デザインの基本・考え方](https://chot.design/concept-of-design/02d49c79f19a/)

[Webサイトでの游ゴシック設定の注意点](https://www.itra.co.jp/webmedia/gothic_font.html)
ラズパイの初期設定ですべきこと(途中)

- アップデートの確認・更新
```
sudo apt update && sudo apt full-upgrade -y
```
を実行、`sudo reboot`でリブート

- vimの再インストール
```
sudo apt-get --purge remove vim-common vim-tiny
sudo apt-get install vim
```
- プライベートIPアドレスの固定
スライドバーを動かすタイプのImage Comparison

## はじめに
↓のようにスライドバーを動かして画像を比較したい。
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577794/e77dd516-45d3-4a6c-2a64-d276cb9b19e0.gif)

[Knightlab の JuxtaposeJS](https://juxtapose.knightlab.com/)を使用して、Streamlit アプリのスライダーで画像を比較するためのシンプルな Streamlit コンポーネントを作成します。

以下のサイトを参考にしました。ありがとうございます。

https://github.com/fcakyon/streamlit-image-comparison

## 環境
+ windows10 home
+ python 3.10

## リポジトリのClone
ソースコードは以下になります。

https://github.com/youichi-io/image-comparison

```
git clone https://github.com/youichi-io/image-comparison.git
cd image-comparison
```

## コードの実行
必要なモジュールをインストールしてアプリを立ち上げます。

```
python3 -m venv venv
.\venv\Scripts\activate
pip install -r requirements.txt

streamlit run comparison.py
```

![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577794/96b6d0c5-5ae6-94d6-74a1-6890a922b4fd.jpeg)

左のサイドバーにて対象となる画像2枚をアップロードします。画像をドラッグ&ドロップしてもいいですし、パスを指定することもできます。
サンプルとしてサイゼリヤの間違い探しの画像を使用しています。samples フォルダに画像をあらかじめ用意しています。

https://www.saizeriya.co.jp/entertainment/

アップロードが終わったら右下の Update Render ボタンを押してください。スライドバーを動かして画像の比較が可能になります。

## おわりに
どこかのサイトで見たような画像比較の仕組み(たしかAI-OCRだったと思う)。シンプルなデザインで手軽にお試しできました。
[CI/CD][入門]CircleCIを始める前に知っておきたいこと

# CircleCI とは

:::note info
この記事は[KDDI Group Developer Community Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kgdc)の8日目の記事です
:::

## はじめに

この記事はCircleCIで使われる用語がわからない人向けの記事です。
実は書いている私自身も知らない部分が多くて結構困惑しています。
ドキュメントや技術書をベースに記載しています。

## そもそもCI/CDとは

> 継続的インテグレーションと継続的デリバリー

というのはいろんなところで説明されていますが
簡単にいえばソフトウェアの作成と納品のプロセスを継続的に回す概念と考えるとわかると思います。

書いたコードをレビューしてマージして実行するといった`リポジトリがあることが前提`にあるように思われますが
人力でやっていた頃は`コードを書いてテストして指定の場所にソフトウェアを移動してデプロイする`ということがあったと思います。やっていることは今と昔でほとんど変わらなかったりすると思います。

※そんな経験をしたことがあります

2022年12月現在ではリポジトリベースで開発することがほぼ当たり前となっており、ソフトウェアを管理する為にソフトウェアの変更点を管理することに重点を置いています。

このようにしてソフトウェア開発のやり方が変わったことにより、今では変更点を適用することがすなわちソフトウェアのデプロイとなっています。
本番環境に変更点を適用する=本番環境に変更点を運ぶ と考えるとデリバリーという言葉の意味がわかりますね。

ちなみに昨今ではソフトウェアのデリバリーを支える全過程をソフトウェアサプライチェーンというそうです。
現実にある運送業とあまり変わらないですね。

今回はそんなCI/CDを備えた製品、CircleCIで使われる用語について説明したいと思います。

## CircleCIの基本

### 簡単に説明

CircleCIは設定ファイルのyamlを書いてジョブを書きます。
ジョブはステップという単位でのまとまりであり、ステップをグループ化したものがジョブです。

ジョブを実行するには実行環境が必要であり、ジョブの実行環境はExecutorで定義します。
ジョブには実行順序があり、実行順序はワークフローによって定義されます。

同一ワークフロー内のジョブ同士でデータを共有する場合はデータの永続化が必要です。
データの永続化にはワークスペース/キャッシュ/アーティファクトがあります。

...oO(やばい、何もわからん。。。)

はい。ということで順番に見ていきましょう。

### 設定ファイル

ここでいう設定ファイルというのはCircleCIのビルド設定のことを言います。
そう、CircleCIくんは内部であーだこーだ言いながらビルドしているんですね。

ていうか、ビルドってなんですか。何をビルドしているんすか？？

### ビルド

何をビルドしているかいうとアプリケーションです。これはアプリケーションを構築するときのビルドと同じ意味です。
アプリケーションが出てきたので開発でアプリケーションを管理するといえば

そう、プロジェクトですよね。

### プロジェクト

CircleCIにおけるプロジェクトは`コードをホスティングしているリポジトリ`と言えば、すっきりすると思います。
そう、雑に言えばプロジェクト=リポジトリみたいな感じです。

### ステップ

プロジェクトにある設定ファイルをビルドしているということがここまで何となーくわかったかなと思います。
では設定ファイルとやらには何が書かれているのでしょうか。

CircleCIの設定ファイルはdockerfileに近いものがあります。
dockerfileをビルドすると何かしらがエンジン上で実行されますよね。

そう、CircleCIも何かしら実行しているのです。この実行の最小単位をステップ(Steps)と呼びます。細かく言えば、ステップには細かい種類があるのですがここでは割愛します。

### ジョブ

実際に手でコマンドを実行する時もそうですが、コマンドはまとめて実行することが多いと思います。
一塊にしてから実行して効率化とかBashなどでもやるとは思います。

そう、CircleCIではステップをグループ化しておくことができるのです。グループ化されたステップのことをジョブと言います。厳密には1つ以上のステップがグループ化されたものをジョブと言います。

### Executor

ここまでで実行する内容を定義することができますが、実行環境がないと何もできませんよね。
実行環境はExecutorで定義します。

Executorには主に実行環境の元になる仮想マシンの名前を指定します。
こうすることで、マルチプラットフォームに対応できるってことですね。

### ワークフロー

ここまでで実行する内容と実行環境を作ることができましたね。

「ん？　ジョブの実行順番はどうするんだ？？」って思ったあなた！
そこでワークフローの登場です。

ワークフローはジョブの実行順序を定めたルール表みたいなものです。

ワークフロー=作業手順書
ジョブ=作業内容

みたいな感じですね。

### データを永続化すると得なことって何？？

ここらへんまで読めるともう実際に手を動かした方が良いのですが
ビルドの内容が長い時に途中で止まったりするとイラッとしませんか？？

インフラの技術にキャッシュという概念があるとおり、CircleCIにも似たような概念があります。それがデータの永続化です。

データの永続化にはワークスペース/キャッシュ/アーティファクトがあります。
それぞれの特徴をここで語ると長くなりそうなので別の機会にまとめたいと思いますが、とりあえず
CircleCIにはビルドを高速化する手法としてデータの永続化があります。

## まとめ

ドキュメントや書籍、公式ブログを拝見する限りでは便利そうに見えるものの
SNSを見るといろんな辛みを述べている人が！！

いくつか集めてみてどういうことなのか具体的に検証してみたいですね。まぁここから先は個人的な興味になりますので需要があったら試してみます。

## 参考

[パイプラインの概要](https://circleci.com/docs/ja/pipelines/)
[データの永続化](https://circleci.com/docs/ja/persist-data/)

## おわり
Ledger CLIで家計簿をつけたい！実践1 給与の天引き項目

前編↓

https://qiita.com/kikeg/items/6bd69611d6e6a8665c19

# 給与の天引き項目を書くか書かないか?

皆さんは給与所得者ですか?私はそうです。給与所得の場合基本的には源泉徴収されて、額面の給与から所得税、特別徴収住民税、健康保険、年金、雇用保険が引き落とされてくると思います。これをLedgerで管理したいかどうかという話です。

もしみなさんが確定申告することはない！というなら実のところ手取り収入を収入として書いて、天引き項目は考えないのが一番早いと思います。考えても数字変わるわけではないですからね。ただ、世の中には確定申告したい、しなければいけない人もいます。私もそうですが、もし確定申告する必要があるなら天引き項目もしっかり書いて、税申告の際にも役立てるのがいいかと思います。

# 書き方

では早速書き方です。と言っても、そんなに目新しいことはありません。まず、給与は給与で別のことなので新しいファイルを仕立てます。`salary/2022.ledger`に書いていきましょう。自分の給与を晒したくないので[給与明細とは? Freee](https://www.freee.co.jp/kb/kb-payroll/understanding-payslips/)を参考にさせていただきます。

```ledger:root.ledger
include salary/2022.ledger
```

```ledger:salary/2022.ledger
2022/11/25 給与
    Income:Salary:Base                      -300,000 JPY
    Income:Salary:Overtime                   -10,000 JPY
    Income:Work:Commute                      -10,000 JPY
    ; Assets:Receivable:Workにする手もある
    Expenses:Tax:Social Security               2,891 JPY
    ; 健康保険
    Expenses:Tax:Wellfare                      8,562 JPY
    ; 厚生年金
    Expenses:Tax:Social Security               1,500 JPY
    ; 雇用保険
    Expenses:Tax:Income                       17,000 JPY
    ; 所得税
    Expenses:Tax:Local                        10,000 JPY
    ; 住民税
    Assets:Wire:Salary                       280,047 JPY
    ; 手取り
```

* シンプルに給与明細の額面欄と天引き欄を書いて最後に手取り金額を書きます。
    * 確定申告のときにはどうせ年末調整が出るのでそこまで神経質になる必要はないと思いますが、計算ミスを防ぐために一行ずつ給与明細と対応するほうが楽です
* 通勤手当は日本では一般に給与ではなく経費として非課税なので、`Income`ではなくて経費精算扱いで扱ってもいいと思います（後述）
* 手取りは以前見た振り込みと同じ理屈で`Assets:Wire:Salary`と資産として扱っています。

一つの取引に何個も仕訳が並ぶので仰々しいですが、それ以外は普通の取引同様に扱えていることが分かります。明日は経費精算をモヤッとしないで記録する方法を紹介します。
WPF MouseMove で画面外に出てもマウスの動きを取得したい

# はじめに
学校の専科でWPFの授業があります。
DirectX11をWPFで制御できるようにするツールを制作しているのですが、

3Dのカメラ操作がしずらい！

というのも、マウスが画面から出ると動かせなくなります。
これをなんとか対処したいと考え約2時間で解決したので備忘録として記事にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402118/05dcb0f5-59f9-6d63-4c27-54f9692fa8f8.png)


# 問題点
マウスの動きが``` MouseMove のイベントがある部分の UI ```上に限定されてしまっている。

# 解決法
- MouseMove の最中はマウスをキャプチャする
- MouseUp でキャプチャから開放する

キャプチャ？　開放？　何言ってんの？　はい。
## マウスのキャプチャとは

> マウスの位置によらず、
コントロールが全てのマウス入力コマンドを受け取るようにマウスを捕捉すること

だそうです。↓のサイトから引用しました。
[https://atmarkit.itmedia.co.jp/ait/articles/1103/01/news124.html](https://atmarkit.itmedia.co.jp/ait/articles/1103/01/news124.html)

# 解決していく
## MouseMove を使用している場所に <br>MouseUp イベントを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402118/8d4fbedc-1ec1-667b-034d-70ccd190600b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402118/c9ebd298-3839-0f46-ae45-871e5ed6f3e0.png)

## MouseMove

```c#
	UIElement el = (UIElement)sender;
	
	// Point mousePosition = e.GetPosition(host); ↓に置き換える
	Point mousePosition = e.MouseDevice.GetPosition(el);

    // ~~~ マウスの処理 ~~~

    el.CaptureMouse();
```
## MouseUp 
```C#
	UIElement el = (UIElement)sender;
    el.ReleaseMouseCapture();
```
## 懸念点
- ドラッグアンドドロップの挙動になんか在るっぽいっていう記事をどこかでみた
    - けど、自分のドラッグアンドドロップには影響なかった。
はじめてウェブを知る君が、頭がハテナにならないために

# はじめに
この記事は[C3 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/c3) 10日目の記事です。

こんにちは、エイです！

今回は、私が最初の壁だと感じた、知らない単語しかないという問題に対策するべく、ウェブの世界で使われている言葉の大枠をお伝えします！

# 大枠の言葉の種類を知る！

初めて携わる分野だと、知らない言葉が多いですよね。
私は、どんどん聞いていくうえで、話している言葉が以下の種類に分けられると気付きました。
この大枠があることを念頭に、単語を聞きていきましょう！

## 固有名詞
- [言語](#言語)
- [ライブラリ](#ライブラリ)
- [エディタ](#エディタ)
- [拡張機能](#拡張機能)
- [構文(特有のもの)](#構文(特有のもの))

## 普通名詞
- [社会的な用語](#社会的な用語)
- [構文(共通しているもの)](#構文(共通しているもの))



# 説明や具体的な例を挙げる

ここから、軽い説明と具体例を示していきます！


## 言語
　言語は、パソコンくんに「処理や表示をこうしてほしい！」
　と伝えるためにあります。

　Web開発ではこの3つが有名です！


　**HTML(Hyper Text Markup Language)**
　　→Webページの文字の部分を構成する。
　**CSS**
　　→Webページの文字の色や背景、配置などに使う。
　**JavaScript**　→Webページのユーザが入力する部分などの処理を構成する。
　(Javaという言語があるのですが、実はJavaScriptとは全くの別物！)
<br>

## ライブラリ
　ライブラリは、汎用性の高い機能が集まったプログラムです！

　言語をもっと使いやすくしたものがライブラリであり、
　そのライブラリにも　更なるライブラリが！！　なんてことも。

|言語|ライブラリ|ライブラリのライブラリ|
|---|---|---|
|JavaScript|React.js　Next.js<br>Vue.js　Three.js　など|
|CSS|TailwindCSS　など|StyledComponent　MUI　など<br>(どちらもReactのライブラリで<br>CSSが書ける)
<br>

## エディタ
　テキストエディタと言い、プログラムを編集しやすい機能が備わっています！
　一番有名なものは**VSCode**(Visual Studio Code)です！
<br>
  
## 拡張機能
　拡張機能はエディタを使いやすくしてくれる機能です！

　VSCordであれば、
　**ESlint**(イーエスリント)
　　一定のルールに沿ってプログラムを書いていないと指摘してくれる
　**Prettier**(プリティア)
　　自動でプログラムを整えてくれる
　**zenkaku**(ぜんかく)
　　　プログラムの中に書くとエラーを起こしてしまう全角スペースに
　　　気づかせてくれる
　などがあります！
　<br>

## 構文(特有のもの)
　構文は、言語やライブラリによって、様々な特有のものがあります！
　**言語**
　　HTMLには、**\<h1>\</h1>** ・ **\<div>\</div>** など
　　CSSには、**margin**・**background**など
　**ライブラリ**
　　Reactには、**useState**・**useEffect**などのuseHooks
　などです！

　言語・ライブラリにもそれぞれ出来ること出来ないことがあるのです…！
 

## 社会的な用語
　**HTTPステータスコード**
　　サーバーにリクエスト(提案)した際の、
　　成功・エラーなどの反応についてのコード(403, 404などが有名)
　**SEO対策**(Search Engine Optimization)
　　検索して目立ちやすいところに表示させようとすること

<br>


## 構文(共通しているもの)
　絶妙に形を変えることもあるが、以下の構文はだいたいどの言語でも同じ。

　「**if**」
　　　条件を指定するときに使う
　「=」(**代入演算子**の１つ)
　　　プログラムを書くとき「=(イコール)」が１つだけだと、
　　　右辺から左辺に代入するというルールがある。
　「+」(**算術演算子**の１つ)
　　　四則演算などの計算を使う際に使う
<br>

# おわりに
以上のような種類でだいたい単語が分けられます！
だいたいこういうものがあるんだなあ～と分かっていただけたらOKです！
今回は例として代表的なものしか挙げてないので、もし**知らない単語**が出てきたときには**すぐに調べて**どんどん知っていきましょう！

これで言葉を聞きわける一歩になれたとしたら嬉しく思います！
**読んでいただきありがとうございました！**

明日はKizukuさんの「GoでTensorflow＋OpenCV！Pythonに支配されるな」です！
プロジェクトチーム内で機能仕様書について模索した話

# 前提
* 内部だけで見ることを目的とした機能仕様書を模索した結果です。クライアントへの納品義務などがある場合はあまり参考にならないかも...
* 今回あくまで私が今のチームに適した形として結論を出した機能仕様書に関しての記事になります。1意見として流し見してもらえればなと思います。
* プロジェクトチームメンバーが少ない&ほぼ若年層のチーム向けの仕様書との向き合い方を考えた記事です。

# 結論
「過程はいいから結論の形をくれ！！」って思う人もいるかなと思うので
先に結論から！
* 完璧な仕様書を求めすぎると逆に誰も書いてくれない
* 仕様書の情報のみでコードの流れ8割理解できるものであれば合格点にする
* 機能仕様書を書くということは開発を楽にすることってことを認識してもらう

以上を踏まえて↓のフォーマットが今のチームにとってベストな仕様書の形だなとなりました！
参考になるかわからないけどテンプレート置いておきます。


```
# シーケンス図
(ここにmermaid.jsでかいたシーケンス図が入る)

# リクエストパラメーター
param名 | 型 | table名 | column名 | 備考
------ | ------ | ------ | ------ | ------
xxxxxx | xxxxxx | xxxxxx | xxxxxx | xxxxxx

# レスポンスパラメーター
param名 | 型 | table名 | column名 | 備考
------ | ------ | ------ | ------ | ------
xxxxxx | xxxxxx | xxxxxx | xxxxxx | xxxxxx

# バリデーション項目
(バリデーションチェック項目とNGの場合のメッセージなどを書く)

# 備考
(何か特記事項や特別な業務ロジックについての解説があれば書く)
```

# 過程
今年5月に今の会社に転職しまして、現在のプロジェクトに入りました。
当時メンバーが

```
PM: 1名
SE: 私
PG: 2名
```

って感じでした。
アサイン時に色々案件説明をPMの方にしていただく中でこういう会話がありました。<br />
PM: 「何か質問ありますか?」
私: 「設計書などのドキュメントってどこで見れますか?」
PM: 「....ないです。」<br />

.......なるほど????
ここから私とドキュメントとの戦いが始まりました。

とりあえず、ないままで進み続けるのはデメリットの方が多いし、
何よりメンバーが増えるたびに不便すぎるなと思い、
まずは、機能仕様書を書き進めることにしました。

当時のフォーマットはざっくりこんな感じ

```
# シーケンス図
(ここにmermaid.jsでかいたシーケンス図が入る)

# 機能詳細
(シーケンス図の内容+シーケンス図で書ききれなかった詳細な条件)

# リクエストパラメーター
param名 | 型 | table名 | column名 | 備考
------ | ------ | ------ | ------ | ------
xxxxxx | xxxxxx | xxxxxx | xxxxxx | xxxxxx

# レスポンスパラメーター
param名 | 型 | table名 | column名 | 備考
------ | ------ | ------ | ------ | ------
xxxxxx | xxxxxx | xxxxxx | xxxxxx | xxxxxx

# バリデーション項目
(バリデーションチェック項目とNGの場合のメッセージなどを書く)

# 備考
(何か特記事項や特別な業務ロジックについての解説があれば書く)
```

上記をPM・メンバーに共有してそのまま書き進めることになったのですが...

1. 仕様書作成+開発で作業時間が増える
2. 課題消化数が減ってくる
3. 改修課題が溜まり始める
4. 1つ1つの課題リリース期限が短くなる
5. 開発するのでいっぱいいっぱいになってくる
6. 仕様書書かなきゃいけないけど余裕がなくなって、作成途中で放置され始める
7. 作成されなくなる

😭😭😭😭😭😭<br />

当時私の中で「機能仕様書は絶対書くもの」って感じだったので
正直なんで書いてくれないんだろうって本気で悩みました....
なんなら誰も書いてくれないなら一人で書いてってやるって意地にもなってました。
なんとかやってはいたものの、全部の機能仕様書をメンテしながら他のドキュメントも作成し、自分の課題を消化しないといけない。<br />
割と地獄でした。<br />

ちょっとこれはこのまま進むと私だけしんどいし、「機能仕様書を書く」ってことが定着しない気がする。
なんで書かなくなるのかなあってめちゃくちゃ考えて、思い当たることがありました。<br />

それは
「機能仕様書を書くことに時間がかかることが開発者の負担になっている」
「機能仕様書を書くことに対するメリットが感じられてない」
ってことでした。<br />

私の中で「機能仕様書は書くべきもの」って前提があったので
「負担」に感じたり、「メリットデメリット」を求める対象じゃなかったんです。

そこで、どうやったら「負担」に感じることなく、
「メリット」を実感してもらえるか考えました。

最初に、「負担をなくす」ことから対策を打ってみました。
実は割とすぐ結論が出て、
「今の機能仕様書が負担 = 量が減れば負担少なくなる」
って単純に思ったんです。
なので、試しに一番レビューする上で指摘が多かった「機能詳細」を無くしてみました。

次に、「メリットを感じる」ことについて対策を打とうと思いました。
真っ先に思い浮かんだのが、機能仕様書を書くことを教えてくれた先輩の言葉でした。
「機能仕様書は開発するための説明書。説明書がないと何を作るのも大変でしょ？」
こ・れ・だ！
そこである課題でPGメンバーに
改善した機能仕様書を書いてもらってからそれを見ながら、開発を進めてもらいました。
メンバーからは「機能仕様書書いてから実装するの楽ですね！」
ってありがたい言葉をいただきました。<br />

メリットを感じてもらってからは、
積極的に機能仕様書(なんなら他のドキュメントも!)書いてくれるし、事前に機能仕様書で仕様が掴み切れるから
単純に品質が上がるさらなるメリットまでついてきました。

そうして今では
「ドキュメントを書いてから開発する」が
プロジェクト内で定着することに成功しました！！！！<br />

やったああああああああ！！！！

# まとめ
今回初めてこういう記事を書いてみたんですけど、
全体的にだいぶ長くなっちゃっいました....反省....。
結論については上の「結論」に書いた通りで、
何事も「潔癖」になりすぎるとだめなんだなーって身をもって体験しました。
今回は「機能仕様書」のことしか触れませんでしたが、
他にも色々ドキュメント整備を進めててこの辺もいつか記事にできたらいいなーって思ってます。<br />

最後になりますがこの記事を読んでくださった方々
本当にありがとうございます。<br />

この記事が誰かの役に立ったらいいなー!
LINEのフレックスメッセージをGASで送る

LINE APIできれいな見た目で送れるフレックスメッセージ

それを簡単に作ることができるFLEX MESSAGE SIMULATOR

https://developers.line.biz/flex-simulator/

そこで作っていくと、JSONを書き出してくれる！！

。。。でも送り方がわからない、、、という現象に当初おちいってしまいました。。。

そのまま貼り付けてしまったのが原因なのですが、
ヘッダーに何をどのようにつけたらいいの？？
ということで
簡単ですが、FLEX MESSAGE SIMULATORで作ったものを
GASで送って仕組みがわかるものを作成しました！

https://docs.google.com/spreadsheets/d/1tsTpIHAkAgcKiEO-AeYKbl9sQ04FKvkE52QNZ1DbfhE/edit?usp=sharing

## 使い方

セルC2に送りたい人のユーザーID
(自分に送る場合は、LINE Developerで取得した自身のユーザーIDを貼り付け)

セルC5にLINE Developerで取得したチャネルアクセストークン（長期）

セルC10にFLEX MESSAGE SIMULATORで作成したjsonをそのまま貼り付け


その後、送信ボタンを押すと、Flexメッセージが送ることができます！

下記がGASに記載されている内容です。


```Javascript:コード.gs
var SS = SpreadsheetApp.getActiveSpreadsheet(); //SpreadsheetのURL
var sheet = SS.getSheetByName("シート1"); //Spreadsheetのシート名（タブ名）
var CHANNEL_ACCESS_TOKEN = sheet.getRange(5,3).getValue()

function flexmsg() {

var userID = sheet.getRange(2,3).getValue()
var json = sheet.getRange(10,3).getValue()
var flexmsgjson = JSON.parse(json)

  reply_text ={
     "to": userID,
     "messages": [ {
      "type": "flex",
      "altText": "This is a Flex Message",
      "contents": flexmsgjson
}

]
     }


     var options = {
     "method": "post",
     "headers": {
       "Content-Type": "application/json",
       "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
       },
     "payload": JSON.stringify(reply_text)
     };
  result = UrlFetchApp.fetch("https://api.line.me/v2/bot/message/push", options); 

console.log(result.getContentText())

}
```

FLEX MESSAGE SIMULATORで作ったけどうまく送れなかった、、、
という方は是非、こちらでお試しして、GASで送っている内容を見てみてください！！
プログラミング学習を学ぶ前に知っておきたいこと~スケジュール編~

## 初めに
この記事は**プログラミング学習を学ぶ前に知っておきたいこと**と題したシリーズの一つです。
このシリーズは各テーマごとに連日投稿予定です。

## このシリーズ記事の対象者
- プログラミングに興味を持って、学習を検討している方
- 学習したいけど、何から手をつけたらいいのかわからない方

[前回の記事](https://qiita.com/MPrg2011/items/34d4cf42ef030cdc856e)の続きです。

https://qiita.com/MPrg2011/items/34d4cf42ef030cdc856e

## 勉強時間を確保する

### まずは現状のスケジュールを洗い出す

::: note
エクセルやスプレッドシート、手書きなど何でも良いです。
:::

①24時間を縦書きにしたもの **2つ用意(平日・休日)** し、動かせない予定から埋めていきます。
(睡眠・仕事の稼働時間、移動時間など)
②次に食事や入浴などの時間を決めていきます。あとから調整する可能性ので大まかで構いません。
③空いている時間に勉強時間を指定していきます。
④最後に微調整していきます。
土日だと一日勉強できる！と予定を詰めがちですが、正直なところ2時間以上ぶっ続けで作業するのは脳にも体にも良くないので、30分に1回は数分でもいいので休憩するようにしましょう。

### 自分の場合はこうなりました
※休日かつなにも予定がないバージョンです。
![ts.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/9fc366cd-6281-67ac-6b91-c7aaf11275a3.png)

文字の色を変えたり、絵文字やアイコンを活用して見やすく仕上げても良いでしょう。

### 最後に
短い記事でしたが最後まで見ていただきありがとうございました。

明日はノンデザイナーでも知っておくと良いデザインの話について投稿予定です。

参照元動画