OmniAICreator/Qiita-1.07M huggingface dataset:
新規アプリケーション作成～ホストの設定まで

# １．はじめに
Ruby on Railsにてポートフォリオ2作目着手します。
1作目よりは理解度が深まっているはずなので、制作しながら手順を記録に残しておきます。

# ２．前提条件
#### 開発環境
Ruby：ruby 3.1.2
Rails：Rails 6.1.6.1
OS：Windows11 Home

#### やりたいこと
新規アプリケーション作成。

# ３．手順
#### ①新規アプリケーション作成
まずはアプリケーションを作成するためのコマンド(下記)を入力する。
```
$ rails new アプリケーション名
```
:::note info
アプリケーション名は、大文字始まりでも小文字始まりでも多分問題ないです。
:::
:::note info
アプリケーションを削除したい場合(スペルミスした時とか)は、` rm -rf アプリケーション名`とすると削除できます。
rmはremoveの略で、ファイルやフォルダを削除するコマンド。
-rf はremove recursively forceの略で、コマンドオプションの1つで「フォルダ内のすべてのファイルとフォルダを削除する」という意味。
:::

#### ②対象のディレクトリへ移動　
```
ec2-user:~/environment (main) $ cd アプリケーション名
```
↓ すると、、
```
ec2-user:~/environment/アプリケーション名 (main) $ 
```
※上記のように、パスの表記にアプリケーション名が入ります！（これで対象のディレクトリに移動した状態となります。）

#### ③サーバーを起動　
```
ec2-user:~/environment/アプリケーション名 (main) $ rails s
```
↓ 下記のように英文が表示される
```
ec2-user:~/environment/Food_log (main) $ rails s
=> Booting Puma
=> Rails 6.1.7 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.5 (ruby 3.1.2-p20) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 12080
* Listening on http://127.0.0.1:8080
* Listening on http://[::1]:8080
Use Ctrl-C to stop
```
※ここで上記の英文ではなく、とんでもない量の英文が出ていたらエラーが出ているので、原因を探る必要があります。

#### ④ブラウザで確認　
クラウド9のPreview（赤枠）をクリックして、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/4600c174-75db-29bf-c28c-8e57815c7df5.png)
↓Preview Running Applicacion(赤枠)をクリックして、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/08ddb53c-74b7-6b65-9e88-c0422b2e3416.png)
↓ブラウザで開くためのボタン（赤枠）をクリックすると、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/116ff29a-4a59-66f9-2275-9a7a21f3d163.png)
↓ ブラウザで確認できる！（今の時点ではエラー出てますが。。笑）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/22f440cb-d041-bb10-9a66-dcc05239132e.png)

#### ⑤エラー解除するためのホストの設定
（ここの具体的な説明は割愛しますが、興味があれば調べてください。）
config(設定)フォルダの中のenvironments(環境)フォルダの中のdevelopment.rb（開発環境）に下記の記述をする！
```development.rb
(省略)
:
:
  config.hosts.clear
end
```

#### ⑥サーバーを一度切り、もう一度立ち上げて確認する
まずはサーバーを切ります。
「ctrl ＋ c」を押す。
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/bc428d97-0d23-ee10-8fff-eda53c7a7396.png)
そして、もう一度サーバーを立ち上げるために「③サーバーを起動」の手順を元に入力してください。（「rails s」とターミナルに入力したらOKです！そしてブラウザで確認！）
↓下記の画面が出たらOKです！サーバー起動できてます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/32c515b0-5033-6919-4b92-a0a76002173b.png)



# ４．最後に
今日はここまでとしておきます！次はGitHubにpushする手順を書いていきます！
最後まで読んでくださり、ありがとうございました！
Wixにmikan.jsを無理やり突っ込んでみた

wix.com で作ったサイトを、スマホでも美しくしたい。

ということで、日本語文章の折り返し位置を気にするとき、
普通のHTMLならinline-blockを使うなどしてある程度うまくコントロールできますが、
Wixではそういうことができないのですね。不便！

ということで、 mikan.js を使ってみます。

https://qiita.com/trkbt10/items/9f8121ca084c80665e59

Wixはscriptの読み込みができないので、開発モードでmikan.jsのコードを直接入れて動かしてみました。


### エディタを開く

1. Wixで開発モードを有効にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398513/1d46200a-02b0-c277-c98a-c8cab350ec36.png)

1. 左側のページ一覧の中から masterPage.js を選択する（全ページで動かすため）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398513/b69b0cfd-7858-c1b3-78ad-a0b043dbab74.png)

1. するとエディタにこんなコードが表示されました。

```masterPage.js
// このファイルのコードはサイトの各ページで読み込まれます

$w.onReady(function () {
	// Write your code here
});
```

### mikan.jsを突っ込む

まず`$w.onReady()`の前に `Mikan` を定義します。

```masterPage.js
// このファイルのコードはサイトの各ページで読み込まれます

/*! mikan.js v1.0.13 | MIT License | https://github.com/trkbt10/mikan.js/blob/master/LICENSE */
const Mikan = (function (root, factory) {
  return factory(); // ←← 最初の無名関数はこれを返すだけにして、戻り値をMikanに代入する
})(this, function () {

  var joshi = /(でなければ|について|かしら|くらい|けれど|なのか|ばかり|ながら|ことよ|こそ|こと|さえ|しか|した|たり|だけ|だに|だの|つつ|ても|てよ|でも|とも|から|など|なり|ので|のに|ほど|まで|もの|やら|より|って|で|と|な|に|ね|の|も|は|ば|へ|や|わ|を|か|が|さ|し|ぞ|て)/g;
  var numbers = /([0-9０-９零一二三四五六七八九十]+)/;
  /* 中略 */

  Mikan.split = SimpleAnalyze;
  return Mikan;
});
// mikan.js ここまで

$w.onReady(function () {
	// Write your code here
});
```

次に、`$w.onReady()`でMikanを呼び出します。

```masterPage.js
    ...
});
// mikan.js ここまで

$w.onReady(function () {
	const elements = $w('Text'); // 全Text要素を取得する
	if (Array.isArray(elements)) {
		elements.forEach(function(el){
            // Repeaterの中のTextはそっとしておく
			let ignore = false;
			for (let parent = el.parent; parent; parent = parent.parent) {
				if (parent.type === '$w.Repeater') {
					ignore = true;
				}
			}

            // innerHTML中のテキスト部分を' 'で分割し、それぞれにMikanをかけて、再び結合する
			if (!ignore) {
                const re = /(^|>)([^<]*)($|<([^>]*))/g;
				el.html = [...el.html.matchAll(re)]
					.map(n => n[1] + (n[2].length > 0 ? n[2].split(' ').map(s => s.match(/^(|\\n)$/) ? s : Mikan(s)).join(' ') : '') + n[3]).join('');
			}
		});
	}
});
```


### 補足

Mikanの対象にする要素を簡単に指定する方法がちょっと分からなかったので全Text要素を対象にしましたが、
Repeaterの中のTextはぶっ壊れたので処理対象外にしました。
他もこういうのあるかも。
コマンドラインで7zipを使ってアーカイブを作るバッチファイル

# タイムスタンプのファイル名で7zipファイルを作る
毎度毎度忘れて、現場に行くたびに新しく作るので忘備録として書いておきます。:sweat_smile:
ワンクリックでタイムスタンプファイル名の7zip書庫を作成するバッチです。TARGETに対象のフォルダを指定します。7zipはインストールしてあること。
```backup.bat
@echo off

set ZIP7HOME="C:\Program Files\7-Zip"
set ZIP7EXE=7z.exe
set ZIP7OPT=a

set YYYY=%DATE:~0,4%
set MM=%DATE:~5,2%
set DD=%DATE:~8,2%
set HH=%TIME:~0,2%
set MI=%TIME:~3,2%
set SS=%TIME:~6,2%

set TARGET=Target

set ARCVFILE=%YYYY%%MM%%DD%%HH%%MI%%SS%%TARGET%.7z
call %ZIP7HOME%\%ZIP7EXE% %ZIP7OPT% %ARCVFILE% .\%TARGET%

@echo on
```
FastAPIでファイルダウンロードさせる時のContent-Dispositionヘッダーの公開方法

# FastAPIでファイルダウンロードさせる時の Content-Disposition ヘッダーの公開方法

ファイルダウンロードを実装する際に、レスポンスのヘッダー情報から filename を取得する必要があるのだが、FastAPIの場合は、デフォルトでは Content-Disposition ヘッダーを返却しません。

### デフォルトで公開される CORS セーフリストレスポンスヘッダーは 7 つだけ

#### CORS セーフリストレスポンスヘッダー

| レスポンスヘッダー | 
|:-----------|
| Cache-Control |
| Content-Language |
| Content-Length |
| Content-Type |
| Expires |
| Last-Modified |
| Pragma |

## FastAPIで、　Access-Control-Expose-Headers に Content-Disposition ヘッダーの公開を許可する

FastAPI アプリケーションでは CORSMiddleware を使用して、CORSに関する設定ができます。

Access-Control-Expose-Headers レスポンスヘッダーで、レスポンスの一部としてどのヘッダーを公開するかを、その名前を列挙する必要があります。

CORSMiddlewareで、Access-Control-Expose-Headersを設定するには、

expose_headers に、公開したいレスポンスヘッダーを列挙します。デフォルトは [] です。

```
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
    expose_headers=["Content-Disposition"] # ここ！
)
```

## FileResponse　をレスポンスする

```
from fastapi import FastAPI
from fastapi.responses import FileResponse

file_name　= "見積書20221206124057.xlsx"
file_path = "/tmp/見積書20221206124057.xlsx"
app = FastAPI()


@app.get("/")
async def main():
    return FileResponse(
        path = file_path,
        filename = file_name
　　　　　　　　)
```

## レスポンスヘッダーとして、公開される

![スクリーンショット 2022-12-07 13.40.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44351/d502268d-781f-bb55-1f2d-d8ff2bfe5042.png)

## axiosとfile-saverで、ダウンロードして保存させる例

```
import axios from 'axios';
import saveAs from 'file-saver';

function authHeaders(token, config = {}) {
    config.headers = {
        Authorization: `Bearer ${token}`,
    };
    return config;
}

function getFileName(contentDisposition) {
    let fileName = contentDisposition.substring(contentDisposition.indexOf("''") + 2,
        contentDisposition.length
    );
    //デコードするとスペースが"+"になるのでスペースへ置換します
    fileName = decodeURI(fileName).replace(/\+/g, " ");

    return fileName;
}

const instance = axios.create({
    baseURL: process.env.VUE_APP_API_URL,
});

/**
 * 見積エクセルダウンロード
 * @param {*} token
 * @param {*} id
 * @returns response
 */
var id = 1;

instance.get(`/downloads/quotation/excel/${id}`, authHeaders(token, {
            responseType: 'blob'
        })).then(response => {
            const blob = new Blob([response.data], {
                type: response.data.type
            });

            //レスポンスヘッダからファイル名を取得します
            const contentDisposition = response.headers["Content-Disposition"];
            const fileName = getFileName(contentDisposition)

            //ダウンロードします
            saveAs(blob, fileName);
        });

```
React / TypeScript の設計前に、改めて命名規則について把握する

## はじめに
プログラミングにおける命名規則の大切さについては[リーダブルコード](https://www.oreilly.co.jp/books/9784873115658/)等でも触れられており、改めて説明する必要はないでしょう。

私は今 React / TypeScript を使ったアプリケーション開発に関わっていますが、設計前に改めて各社の命名規則を読み返しました。当たり前な内容もあるかと思いますが、自分の目に止まった箇所をまとめておきます。


人によって気になる箇所は違うと思うので、原文の一読をおすすめします。React / TypeScript を使わない場合でも有用な内容も含まれると思います。

## 情報ソース
- [Microsoft TypeScript Coding Guidelines](https://github.com/microsoft/TypeScript/wiki/Coding-guidelines)
- [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html)
- [TypeScript Deep Dive StyleGuide](https://basarat.gitbook.io/typescript/styleguide)
[日本語版](https://typescript-jp.gitbook.io/deep-dive/styleguide)
- [Airbnb React/JSX Style Guide](https://airbnb.io/javascript/react/)
[日本語版](https://github.com/mitsuruog/javascript-style-guide/tree/master/react)
- [Naming cheatsheet](https://github.com/kettanaito/naming-cheatsheet)

## 命名規則
### 識別子
- UpperCamelCase（PascalCase）
    - React コンポーネントとそのファイル名
    - type 文の型名
- camelCase
    - 変数
    - 関数名
    - `.ts`のファイル名
- CONSTANT_CASE
    - 定数（[Google TypeScript Style Guid 参照](https://google.github.io/styleguide/tsguide.html#identifiers-constants)）

### React コンポーネントについてのルール
Airbnb React/JSX Style Guide からの抜粋です。

- ひとつのファイルにひとつのコンポーネントにする（Basic Rules）
    - 複数のステートレスや単純なコンポーネントはひとつのファイルにまとめることを許容する
- React コンポーネントにはパスカル記法を利用し、それらのインスタンスにはキャメル記法を利用する（Naming）
- ファイル名をコンポーネント名として使用する（Naming）
```javascript
// bad
import Footer from './Footer/Footer';

// bad
import Footer from './Footer/index';

// good
import Footer from './Footer';
```
- デフォルトエクスポートでもコンポーネントに名前をつける（Declaration）

### 関数・変数に関する指針
Naming cheatsheet からの抜粋です。

- 短く、直感的で、説明的。（S-I-D）
- 単語の収縮は避ける（Avoid contractions）
- A/HC/LC Pattern![スクリーンショット 2022-12-07 13.33.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298406/a26af089-6cc3-a74f-551a-5b9ee14ad03f.png)
    - 注釈の訳
        >注：文脈の順序は変数の意味に影響します。例えば、shouldUpdateComponentはコンポーネントを更新しようとしていることを意味し、一方shouldComponentUpdateはそのコンポーネントがそれ自体で更新され、あなたはそれがいつ更新されるべきかを制御していることを示します。 言い換えれば、高い文脈は変数の意味を強調するのです。
- Actions では関数の動詞部分の選択について参考になります。
    - get, set, reset, remove, delete, compose, handle
    - remove と add、delete と create が対の動詞。
    - handle って以前はどういうときに使っていいかよくわからなかったです。
- Prefixes は変数の意味を強調するので、関数名にはほとんど使われない。
- 単数形と複数形は使い分ける。

## 最後に
設定にもよりますが、Prettier や ESLint とバッティングする箇所もあるので、そういった箇所は飛ばしてまとめましたが、普段意識できてないかもという方は一読はしておくとよいと思います。当たり前にできていてほしい部分です。

また、こうしたルールはチームやプロジェクトによって意思や一貫性が保たれていればよいと思うので、フレームワーク等で決まっている文法以外は守らなくてはいけないというものではありません。

しかし、どうしようかと迷っているときにはひとつの指針になると思います。
CDIされたBeanについて、@PostConstructor, @PreDestroyの呼ばれるタイミングを確認

CDIのBeanについて@PostConstructor, @PreDestroyの呼ばれる順番を
確認する。
コンソールに吐き出したログを確認。

```Bb.java
@Named
@RequestScoped
//@SessionScoped
public class Bb implements Serializable{
    private String text;
    static {
        System.out.println(" bb static initializerがコールされた");
    }
    {
        System.out.println("bb initializerがコールされた");
    }
    
    public Bb() {
        System.out.println("bb constructがコールされた");
    }
    @PostConstruct
    public void pconstruc1() {
        System.out.println("bb postconstructがコールされた");        
    }
    @PreDestroy
    public void pdestroy1() {
        System.out.println("bb predestroyがコールされた");        
    }
    @Override
    protected void finalize() throws Throwable{
        System.out.println("bb finalizeがコールされた");        
        super.finalize();
    }
```

実行結果
```
  bb initializerがコールされた|#]
  bb constructがコールされた|#]
  bb postconstructがコールされた|#]
  bb predestroyがコールされた|#]
```
入社半年のデザイナーが感じた「グロービスは意外と〇〇だった」3つのこと

## はじめに
この記事は [GLOBIS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/globis) の9日目の記事です。
こんにちは。グロービスで「ナノ単科」のUI/UXデザイナーをしています、竹ノ内です。
2022年6月にグロービスへジョインし、半年ほど働いてきました。グロービスは社会人教育の分野で「No.1」のイメージはあったものの、デジタルプロダクトの開発に対してあまり印象がありませんでした。
しかし、面接で人と話したり、入社後にグロービスを知れば知るほど、**「意外と〇〇だな」** と魅力を感じるようになり、せっかくなので自分が入社前や入社後に感じたことについて書こうと思います。

## ナノ単科とは？
ナノ単科は、グロービス経営大学院が2021年10月から提供している教育プログラムです。動画学習はもちろん、AIを使った学習コンテンツや大学院講師によるライブ授業、受講生同士で学習理解を深めるグループワークなどを通じて、6週間で仕事に活かせる基礎スキルを身につけることができます。

https://mba.globis.ac.jp/nano-mba/

## 1. グロービスは意外とデザインに力を入れている
入社する前は、グロービスのプロダクトをあまり触ったことがなかったこともありますが、デザインや体験設計に力を入れているイメージが正直そこまでありませんでした。
しかし、実際に入社して他のデザイナーや開発メンバーと話すうちに、デザインや体験設計を非常にこだわっていることを知りました。

考えてみれば当たり前ですが、グロービスは[「グロービス経営大学院」](https://mba.globis.ac.jp/)のノウハウがあるので、マーケティングやクリティカルシンキングなどを教えているので、社内でもその分野に精通している人が非常に多く、グロービスの文化・考え方としてそれが深く浸透しています。

https://mba.globis.ac.jp/

なので、プロダクト開発においても、しっかりとしたマーケティングやフレームワークを用いながら、議論や意思決定、デザインの検討が行われます。
また、全社的にも「グロービスのデザインはこうあるべき」という価値観や指針がしっかりと明記されており、**「エクスペリエンスを良くするデザインを尊ぶ文化を醸成し、デザインは非常に重要である」** という根本思想があります。

デザイナーとしては、見た目の綺麗さのみに拘るのではなく、しっかりとビジネスをグロースさせるためにデザインを活用していくような、上流から戦略的なデザインができると感じています。

## 2. グロービスは意外とおもしろい人が多い
グロービスは元々経営大学院の運営をしており、入社前もその印象がかなり強かったです。
なので、入社する前はグロービスの雰囲気といえば、いわゆる学校法人っぽいような真面目でビシッとスーツを着て、みんな同じような思想を持った画一的な雰囲気だと思っていました。

（入る前のイメージ↓）
![thumbnail_kaisya_desk2_yakusyoku_man.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953437/e2d34043-ee84-b287-8f8b-6572544cebe8.jpeg)
しかし、実際にグロービスのプロダクト開発に関わる人は、バックグラウンドや思想がいい意味でバラバラで面白い人が非常に多いです。
また、正社員は中途採用のみであり（新卒採用は行っていません）、チームによっては業務委託メンバーも多いので、色々な経験、社歴、価値観を持った人たちがいます。
フルリモート・フルフレックスの自由な環境で、みんな和気藹々と働いています。

ちゃんとすることろはちゃんとしつつも、緩めるところは緩める。ベンチャーと大企業のいいとこ取りのような雰囲気があります。

（入った後のイメージ↓ 国際色も豊かです。）
![group_young_world.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953437/fbd03648-b05f-14e3-c562-fe545b5f109e.png)
デザイナーとしては、**デザインを検討する際や検証・改善を回していく中で、様々な知見を持つ方々からレビューを気軽にもらうことができるので、** 多くの気づきや示唆を得ることができます。

## 3. グロービスは意外と新しいプロダクトを仕込んでいる
グロービスのデジタルサービスといえば幾つ思い浮かびますか？
1番認知度が高いのは、やはり[「GLOBIS 学び放題」](https://hodai.globis.co.jp/)ではないでしょうか。

https://hodai.globis.co.jp/

一方で、経営大学院以外に何かやってるの？ ひとつも思い浮かばない。 という方も少なくないかもしれません。

実は「GLOBIS 学び放題」には英語版の[「GLOBIS Unlimited」](https://globisunlimited.com/)というものも存在します。また、企業の学習管理システムであるSaaS型LMS[「GLOPLA LMS」](https://glopla.globis.co.jp/)があり、冒頭でも説明しましたが、グロービス経営大学院の内容を、よりライトに学べる[「ナノ単科」](https://mba.globis.ac.jp/nano-mba/)が存在します。
![Group 1 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953437/04f99947-a623-2bf5-fabb-b5d89d8cb6ee.png)
グロービスは教育や学習の領域で、toB,toC両軸でサービスを展開しており、2~3年に1つ新しいプロダクトが生まれていることになります。

デザイナーとしても、希望すれば配置転換も流動的に実施されるため、様々なフェーズのプロダクト開発に携わることができます。各プロダクトに1-2名のデザイナーが配置され、**ユーザーインタビューから分析まで、やりたいことを自由にできるので、自分の強みを生かしつつも新しいことにも挑戦できる環境があります。**

## まとめ
僕自身、前職からグロービスへの転職が初めての転職だったので、会社によってこんなにも見える景色が違ってくるのかと新鮮な気持ちがありました。
今回は特にデザイナーとして働く中で親和性があった印象について紹介しましたが、いかがだったでしょうか？
手前味噌ですが、グロービスはデザイナーにとって働きやすく、かつ挑戦しやすい環境があると感じています。
一方で、グロービスの良い面がまだまだ世間的に認知されていないと思っているので、まずは少しでもグロービスのことを知っていただけると嬉しいです。

そしてデザイナー・エンジニアも絶賛募集中です！
もしよければこちら↓の募集ページもご覧ください！

https://recruiting-tech-globis.wraptas.site/
Workato：JSON Parser by Workatoを利用して、データピルに展開されていないキーやリストの値を取得する


# はじめに

前回は、以下の記事でformula（関数）を利用した特定のキーの値を取得する方法について説明しました。

https://qiita.com/tabimoba/items/d5f24ed21918aca84187

formulaでも特定のキーの値は取得可能ですが、実行されたコネクタの出力結果を見て目的の値がセットされているキーを探し当てなければならない、リストが処理できないといった欠点があります。また、出力結果が複雑である場合、formulaでの対応は非常に面倒なものとなります。formulaが複雑になれば、デバッグしづらい、バグが発生しやすい、実装内容によっては秘伝のタレ状態になる恐れがある（実装した本人しか正しい仕様を把握できない状態になる恐れがある）等、保守性の面で様々なデメリットが生じます。

formulaを利用する以外にも方法はありますが、その中の１つとしてJSON Parser by Workatoコネクタを利用する方法があります。JSON Parser by Workatoを利用することで、スキーマの再定義を行うことができます。これにより、データピルから目的の値を取得できるようになります。また、元の結果ではデータピルとして展開されていなかったリストも、この方法を用いることでリストが展開され、データピルから選択してループ処理等で利用することが可能になります。

今回は、JSON Parser by Workatoを利用した、データピルに展開されていないキーやリストの値の取得方法について説明します。

# 手順

## １．出力結果の確認とコピー
レシピを一度実行し、Jobの実行結果より目的のコネクタのOutputを確認します。その後、「Copy JSON」をクリックし、出力内容をJSONテキストとしてコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64876/5f199ce8-6671-d8a5-b190-f01d00a435fa.png)

## ２．JSON Parser by Workatoコネクタの追加
レシピ編集画面を表示し、JSON Parser by Workatoコネクタを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64876/1c1cc28f-7805-c5e2-1724-b511cf8bf7d6.png)

## ３．JSON Parser by Workatoの設定
「Sample document」には、手順１でコピーしたJSONテキストを貼付します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64876/5751e2c9-1ce2-8bc5-30cb-9c010f82872b.png)
「Document」には、JSON化したコネクタの出力結果をセットします。JSONテキストとしてセットする必要があるため、 `.to_json` メソッドを利用してコネクタのOutputをJSONテキストに変換します。

# 結果
JSON Parser by Workatoコネクタの「Sample document」に入力された値をもとにスキーマが自動的に生成され（再定義され）、再定義されたスキーマより必要なキーをセットして、各コネクタでその値を利用することが可能となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64876/ee1cd9ad-f295-bfcc-9c44-9913dd0b90f3.png)


Slackコネクタのトリガを例にすると、JSON Parser by Workatoを利用してスキーマを再定義することで、これまでのキーの値に加え、赤枠で示したキーの値も、データピルを利用して取得できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64876/a485ad69-4049-7a5b-8bd3-8a9f6c435ef7.png)

また、オリジナルではデータピルに展開されていなかった `Blocks` というリストは、以下のようにループ処理で利用することが可能になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64876/d115f408-c677-c2e0-fb2f-e26768a4b71f.png)
M5ATOMをUIFlowでMQTTクライアント

MQTTブローカーをNode-REDで構築
------------------------------------

今回は古いノートPCにLinux（Ubuntu）をインストールしNode-REDサーバーを構築します
MQTTブローカーはnode-red-contrib-aedesを利用します
https://flows.nodered.org/node/node-red-contrib-aedes

このようにM5ATOMからのセンサーデータを受ける準備を行います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228252/3208b5ca-a039-9fe8-a01d-1290437c5ae7.png)


M5ATOM（LITE）をUIFlowでMQTTクライアント
----------------------------------------------
M5ATOMに環境センサーENVを接続し
MQTTクライアント（Publish）を設定します
「高度なブロック」→「MQTT」→「Publish」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228252/9feaa053-d104-6b5c-3053-3ebfcb38c13c.png)
これでENVユニットの「温度」「湿度」「気圧」がMQTTブローカーに送信（Publish）されます

ダッシュボードでの表示
-----------------------------------------------------
Node-REDのダッシュボードではこのようにセンサーの値が表示できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228252/29739f7a-3342-de0b-7a6d-aadb793a9611.png)

センサーを追加したり、M5CAMERAやM5STICKも追加
-------------------------------------------
M5ATOMには４つのセンサーを接続し６種類のデータ
ENVユニット（温度、湿度、気圧）はtopic1へPublish
デジタル防水温度、、アナログ明るさ、アナログ土壌水分はtopic2へPublish

M5STICKC（PLUS）では内蔵ジャイロセンサーから
XZY軸の加速度をtopic3へPublish

M5CAMERAはNode-redダッシュボードの更新時に再表示させるとともに
FTPサーバーへ定期的に画像転送しています

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228252/71327e97-a18d-60d6-97a1-044eea8d33f6.png)

Node-REDでCSVデータ保存
-------------------------------------
必要に応じて各topicのデータをCSV保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228252/2fe85a03-3b52-bdeb-01ef-5b6d6d2b6d72.png)
wコマンドで表示されるユーザ名の文字数を増やす方法

wコマンドは標準ではユーザ名表示が8文字までの制限があります。

testuser123456789(17文字)とtestuserda1234567890123456789012(32文字)がいた場合
```
# grep "testuser" /etc/passwd
testuser123456789:x:2002:2002::/home/testuser123456789:/bin/bash
testuserda1234567890123456789012:x:2003:2003::/home/testuserda1234567890123456789012:/bin/bash
```

testuser123456789、testuserda1234567890123456789012の2ユーザがログインしている場合、
デフォルトではいずれも「testuser」と表示されてしまいます。

```
# w
 11:30:45 up 6 days,  3:45,  4 users,  load average: 0.42, 0.17, 0.11
USER     TTY      FROM             LOGIN@   IDLE   JCPU   PCPU WHAT
root     tty1     -                09:45    1:42m  0.45s  0.45s -bash
root     pts/0    192.168.246.34   11:30    2.00s  0.05s  0.00s w
testuser pts/1    192.168.246.34   09:48    1:42m  0.05s  0.05s -bash
testuser pts/2    192.168.246.34   10:17    1:12m  0.05s  0.05s -bash
```

## 文字数を増やすには
``man w`` を実行すると下記の環境変数の説明がされています。
``PROCPS_USERLEN``で表示されるユーザ名の文字数を変更できるようになっています。

```
ENVIRONMENT
       PROCPS_USERLEN
              Override the default width of the username column.  Defaults to 8.
```

## 適応してみる

wコマンドを実行するユーザの.bash_profileに「export PROCPS_USERLEN=32」を追加してみました。

```
# .bash_profile

# Get the aliases and functions
if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi

# User specific environment and startup programs

PATH=$PATH:$HOME/bin

export PATH
export PROCPS_USERLEN=32　<---- 追加
```

## 適応後
sourceコマンドで適応後、wコマンドを実施すると両方のユーザ名がすべて表示されるようになりました。
32文字のユーザ名も表示されるようになっています。
```
# vi .bash_profile 
# source .bash_profile  
# w
 11:44:32 up 6 days,  3:59,  4 users,  load average: 0.08, 0.12, 0.10
USER                             TTY      FROM             LOGIN@   IDLE   JCPU   PCPU WHAT
root                             tty1     -                09:45    1:55m  0.45s  0.45s -bash
root                             pts/0    192.168.246.34   11:30    0.00s  0.15s  0.00s w
testuser123456789                pts/1    192.168.246.34   09:48   48.00s  0.06s  0.06s -bash
testuserda1234567890123456789012 pts/2    192.168.246.34   10:17    1:26m  0.05s  0.05s -bash
```

## 注意点
ｗコマンドの古いバージョンでは、PROCPS_USERLEN環境変数自体存在しないバージョンやPROCPS_USERLENが最大16文字までのバージョンもあるようです。
ただし、CentOS7.9(wコマンドのバージョン3.3.10)でも``PROCPS_USERLEN=32``の設定で32文字まで表示されたので、最近のLinuxのバージョンであれば、問題なく利用できそうです。
スクラムを導入したので、メンバーに「良かった点・改善点」を聞いてみた

## はじめに
私は[株式会社アドベンチャー](http://jp.adventurekk.com/)にて、[skyticket](https://skyticket.jp/)を開発しています。
最近、私が所属するチームにスクラムを導入しました。導入してから2ヶ月経ったので、メンバーに「良かった点・改善点」を聞きました。スクラムとは何か、どのように導入しのたかという詳細については、本記事の対象外とします。メンバーの感想が、これからスクラムを導入しようと考えている方の参考になれば幸いです。

## 背景

私が所属するチームでは、一応アジャイル開発が採用されていました。一応と付けたのは、すでに確立された手法のスクラムやXP等を採用せず、なんとなく独自の手法でやっていたからです。独自のアジャイル開発をしていたため、多くの課題がありました。
メンバーから以下のような意見が上がっていました。
- ビジネスサイド
    - いつまでに何ができるのかが見えない
    - 誰が何をしているのかわからない
- エンジニア
    - 要求が決まっていないのに、見積もりを求められる
    - タスクの状態を定義していないので、ゾンビタスクが多数存在する
    - タスクの優先順位が不明確
    - 1つのプロジェクトのメンバーの数が多すぎる

組織やチームが違えど、プロジェクト管理でぶつかる課題は似ています。先人たちは、それらの課題を解決するために、スクラムやXPという手法を作り上げています。
独自のやり方ではなく、先人の知恵を借りるべく、スクラムを導入することになりました。

## スクラムの導入

既存チームから独立したチームを作り出し、その独立したチームにスクラムを導入しました。既存チームは20名以上のメンバーが在籍しており、1チームに複数のプロジェクトがぶら下がっています。エンジニアはプロジェクトをまたがって開発していました。そのため、既存チームから切り離し、エンジニアは集中して開発することにしました。スクラムを導入する上で、「どのツールを使うのか」、「見積もりをどうするのか」といったことに目が行きがちですが、チームを分割することがスクラムを成功させるのに最も重要だと思います。
具体的なスクラムの手法は、ヌーラボさんが実施している「[Backlogを上手に使ってらくらくスプリント開発](https://nulab.com/ja/blog/nulab/sprint-development-using-backlog/)」を踏襲しました。種別や状態は少しアレンジしています。
![スクリーンショット 2022-12-07 11.52.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/824e0cdf-f18b-dcc0-1b13-251075da2dd3.png)


## 良かった点
メンバーにスクラムを導入して良かった点を聞きました。
- 各メンバーがやるべきことが明確なので自立して動くようになった
- 誰に何を聞けば良いか明確で、短時間で解決まで進められた
- 要求がわかりやすくなり、実現すべき作業を立てやすくなった
- コミュニケーションが円滑になった
- 動くソフトウェアでデモを実施するので認識の齟齬が発生しにくくなった
- デモがあることで具体的な目標があり、開発速度が上がった
- 優先順位がわかりやすくなった
- 完全に分離されたチームになったので、やりたいことを邪魔されずに実行できるようになった
- 目的が同じメンバーが集められたのでチームメンバーが流動的ではなくなった
- リズムが生まれた
- スプリントの目標が決まっているので、やるべきことに集中しやすくなった
- タスクが細かく切られるので、要件チェックを細かくできるようになった
- 会議体が整理されたため、無駄なミーティングがなくなり、集中して作業できるようになった

## 改善点
こちらはスクラムの改善点というより、私たちチームの改善点が多々あります。
- 自分たちだけでは解決できない問題があった（インフラ等）
- PBIが細分化されすぎていて逆に進めづらい場合もあった
- PBIを横断したタスクの対応がまだ曖昧
- 長期的なスケジュールが見えない
- ストーリーポイントがいまだに理解できていない、基準がわからない
- 効果計測やKPI進捗の確認がまだ会議体の中でできてない
- PBIに落とす前に、3秒見積ぐらいのライトな相談ができると、安心して要件に落としやすい
- チームが鎖国化していないか心配
- Backlogがスクラムに特化したツールではないので、少ししんどい時がある
- 口頭での確認も少なくない
- 口頭で確認したことをドキュメント化できていない
- 実際にリリースのスピードが早まったかどうかは今のところ不明（ただ、それ以外のメリットが大きいので、中長期的にはこれで良かったと思う）

## 個人的な感想

スクラムを導入して非常に良かったと思います。特に良かったのは、同じ目的を持った小さなチームに分割したことで、マルチタスクや割り込みタスクが減り、やることが明確になったことです。スクラムにおいて、「選択と集中」は重要なキーワードです。また、定期的なイベントがあることでコミュニケーションが円滑になり、認識の齟齬が減りました。
スクラムオーナーから「長期のスケジュールが見えない」という意見が、最初に解決すべき課題だと考えています。1スプリントで消化できる[ストーリーポイント](https://www.atlassian.com/ja/agile/project-management/estimation#:~:text=%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AA%E3%83%BC%20%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AF%E3%80%81%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%20%E3%83%90%E3%83%83%E3%82%AF,%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AA%E3%83%BC%20%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%82%92%E5%89%B2%E3%82%8A%E5%BD%93%E3%81%A6%E3%81%BE%E3%81%99%E3%80%82)が少しずつ安定してきたため、それらを元に、長期的なスケジュールを立てていこうと考えています。
これらの情報が、これからスクラムを導入しようと考えている方の参考になれば幸いです。
メイキング of JSConf JP 2022 LT（アップダウンの軌跡）

# はじめに

この記事は、先日11/26(土)に開催されたオンラインカンファレンス [JSConf JP 2022](https://jsconf.jp/2022/) でLT登壇した際の紆余曲折です。
情報量は無くて、ただの日記のようなものです。

- [セッション情報](https://jsconf.jp/2022/talk/small-tips-to-use-bun-with-websocket-server-and-webassembly-modules)
- [発表資料](https://speakerdeck.com/mganeko/small-tips-to-use-bun-with-websocket-server-and-webassembly-modules)

# モチベーション曲線

応募を考え始めてから、当日発表が終わるままでのモチベーション曲線を描いてみました。
振り返ってみると浮き沈みが大きい2か月でした。

![motibate_graph2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19403/71922cb6-5b0f-cc15-0dbd-3b0767b19bff.png)



# 時系列と気持ちの変遷

10点満点で気持ちの変遷を残してみました。

## LT応募まで

- (1) 応募検討中 ... 3点
    - コロナ禍になってからイベントでの発表はしていなかったのですが、そろそろ何かのイベントで発表したいと考えていた
    - 東京Node学園祭の頃から何度もお邪魔しているJSConf.jpは、自分にとって思い入れのある（かつ、心理的ハードルが低い）イベントなので、今年こそ何か応募してみたい
- (2) bunを知った時 ... 5点
    - [Node学園 40限目](https://nodejs.connpass.com/event/258870/)で会長（古川さん）の話を聞いて面白そうと興味を持った
    - 何かネタになるかわからないが、bunを触ってみようと考えた
        - 最初は、FFI絡みで何か発表できないか？ と考えていた
- (3) WebSocketがすんなり動かなかった時 ... 6点
    - Node.jsでもWebSocketやSocket.IOをよく使っていたこともあり、bunでもWebSocketサーバーを立ててみようと考えた
    - 最初に作ったエコーサーバー/クライアントがなぜか動かなかった
    - 困惑すると同時に、「これはネタになるのでは？」とちょっとワクワクしてきた
- (4) WebSocketが何とか動くようになった時 ... 7点
    - bun付属のベンチマークコードと比較しながら、動かない原因を特定
    - 回避策を捻り出して、なんとか動くようになった
- (5) LTに応募した時 ... 8点
    - 「これでLTのネタになる！」と喜び勇んでLTに応募
    - 流行りに乗った感が大きいが、それもありと考えた

久しぶりのイベントでの発表に向けて、けっこう前向きな状態でした。

## LT採択まで

- (6) 見つけたTips(回避策)が、ごく限定されたケースでのに有効とわかった時 ... 3/10
    - 回避策は Bunサーバー - Bunクライアントの組み合わせだけで必要なことが判明
    - Node.jsとの組み合わせや、より一般的なブラウザとの組み合わせでは不要と判明
    - つまり、ほとんど役に立たないTipsだと気がついた
    - がっかりしたが、まあ採択はされないだろうと思い、気にしないことにした
- (7) LTに採択された時 ... -3点
    - やばい、やばい
    - なんで応募しちゃったのかなー。メチャクチャ後悔

余計な事しなければよかったと、めちゃくちゃ後悔して落ち込んでいました。

## 資料作成中

- (8) 発表内容悩み中 ... 1点
    - せっかく採用されたので、Bun関連で何か話を組み立てようと開き直る
    - BunでWebSocketを使っている例は少なそうなので、その周辺で調べてみよう
    - あとは内容の薄さをカーバするために、英語＆日本語の両方で話せば、2倍時間が使えそう
- (9) 雑学集と割り切った時 ... 4点
    - サンプルコードやベンチマークテストのコードを読み、ネタを集める
    - 実装コード(Zig)はあまり分からないけど、ラッパーやPolyfillのtsコードなら読めそう
- (10) 雑学が集まった時 ... 6点
    - いくつか細かい雑学的な内容が集まったので、なんとかなるかも
- (11) 資料作成中 ... 4点
    - 気を取り直して発表資料を作ってみるが、英語＆日本語はめんどくさい
    - 意外と話す時間も足りなくなりそうだし、日本語だけにしちゃおうかと迷う
- (12) 資料ができた時 ... 7点
    - なんとか完成
    - 英語7割、日本語3割ぐらいの配分で話せばちょうど良さそう
    - これで乗り切れるかも

当たって砕けろの精神で、なんとかこぎつけました。

## イベント当日

- (13) 当日 ... 5点
    - 落ち着かない
    - 盛大にやらかしても、LTなのでヨシ、と開き直ろう（と自分に言い聞かせる）
- (14) 発表後 ... 10点
    - 終わったー!

ごく一部の人には興味をもってもらえたようです。終わったのでヨシ！


# 終わりに

アップダウンが激しかったけど、終わってみれば楽しいイベントでした。主催者の皆さんと、参加者の皆さん、どうもありがとうございました！ （スポンサーの皆さんもありがとうございます）

- 参考： [JSConf JP 2022 公開資料・Twitterリンクまとめ](https://zenn.dev/yumemi_inc/articles/2022-11-27-jsconf-jp-2022)
ローコードにオラの仕事を奪われる・・・

初めてOutsystemsというローコード開発基盤に触れてみた所、結構な衝撃を受けたので記事を書いてみました。

簡単なチュートリアルをやってから大してマニュアルも読まずに直感で操作しただけなのですが、なんかよく分かんないけどWebアプリが動きました。作業時間的には使い始めてから動かすまで半日ほどです。

その途中で驚かされた挙動を３つ紹介します。

# CRUD機能を自動生成してくれる
試しに以下の図のようなデータを定義をしてみました。簡易な在庫管理を意識していますが内容はどうでもいいです。ちなみにこの図もOutsystemsのアプリで表示しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661248/370ebd08-2606-ef6c-5ad9-f3e850bab0ad.png)

以下の様にエンティティのアイコンをドラッグ＆ドロップするだけで一覧表示画面や編集画面を作ってくれました。（生成に数十秒かかるので途中省略してます）
![crud.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661248/b393aa0d-a891-e785-b98f-cec24b2d16f5.gif)

ブラウザで見るとこんな感じ。
- 一覧表示画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661248/ed46f9cf-2331-ffda-f0a6-fc808b93cbf5.png)
- 編集画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661248/c32133fa-770f-cb2b-3a89-ad4aa3dcb773.png)

# 自然言語からSQLを生成してくれる
英語ですが自然な言葉で取得したいデータを説明すると勝手にSQL文的なものを生成してくれます。
![sql.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661248/232aa974-da0a-05f5-2efe-a2cba541df73.gif)

# 属性タイプを推測してくれる
エンティティの属性名を入力すると、名前から勝手に型を推測してくれます。さらにリレーションまで張ってくれてました。
![entity.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661248/7b2bed51-2c8c-4a28-c69e-fbf7bbaeb731.gif)

# 最後に
WebアプリだけでなくPWAやiOS・Androidアプリなんかも作れるらしいです。いつか本当にプログラマの仕事はなくなっちゃうかもと思わされました。
LaTeX Workshop の設定を見直してみた

VSCode で LaTeX を書いている人は, 書き始める前に `settings.json` をどこかからコピペしてきたことと思います. 私もかつてそうでしたが, 最近 LaTeX エンジンを変えたタイミングで設定を見直したので, そのときのメモを書いておきます.

# 参考文献

* [GitHub の Wiki](https://github.com/James-Yu/LaTeX-Workshop/wiki)

# そもそもの話

これから TeX を書き始める人に向けて, 最初に少しだけ補足説明をします.

* TeX とは, **数式を含む文書をきれいに書くためのソフト, またはそこで使われるプログラミング言語** だと思ってもらえれば基本的にはいいと思います. 
* LaTeX とは, **TeX を楽に書くためのマクロ**[^macro]です. 「 TeX で書く」と言った場合は, 十中八九実際には LaTeX で書いています. まあ, TeX と LaTeX の違いなんて気にしなくてもいいです.
* VSCode とは, **プログラミング言語を書くためのテキストエディタ** です. 便利な拡張機能がそろっているのでプログラミングをする多くの人が使っています.
* LaTeX Workshop とは, **LaTeX のための VSCode 拡張機能** です. この記事では, この拡張機能の設定について解説します.
* `settings.json` とは, **VSCode の設定のうちでデフォルトから変更した項目を記したファイル** です. このファイルを修正することで, LaTeX Workshop のみならず, 設定を変更できます. ただし修正する際は, json ファイルの形式[^json]に従って書く必要があります. 開くには, `Ctrl + Shift + P` でコマンドパレットを開いて `Open User Settings (JSON)` と入力します.

[^macro]: マクロとは, とても長いコマンドを短いコマンドで置き換えたものです. なので TeX と LaTeX では違う言語のように見えます.
[^json]: 全体を一つの `{}` で囲んで, 項目どうしを `,` で区切る.

# 見直した結果

修正後の私の `settings.json` の LaTeX Workshop に関する部分を以下に記します.

```json:settings.json
{
    "latex-workshop.latex.autoBuild.run": "onSave",
    "latex-workshop.latex.recipes": [
        {
            "name": "ptex2pdf",
            "tools": [
                "ptex2pdf"
            ]
        }
    ],
    "latex-workshop.latex.tools": [
        {
            "name": "ptex2pdf",
            "command": "ptex2pdf",
            "args": [
                "-l",
                "-u",
                "-halt-on-error",
                "%DOC%"
            ]
        }
    ]
}
```

## `latex.autoBuild.run` について

自動ビルドするタイミングを `never` , `onSave` , `onFileChange` から選んで設定します.

| デフォルト | 見直し後 |
|:-:|:-:|
| `onFileChange` | `onSave` |

ここは `onFileChange` , `onSave` のどちらでも, 保存するタイミングで自動でビルドされます. `onSave` にしておくことで, ビルドせずに保存することができるようになります.[^save]

[^save]: キーボードショートカットの `latex-workshop.saveWithoutBuilding` という項目にショートカットキーを設定することで可能になります.

## `latex.autoClean.run` について

補助ファイルを自動削除するタイミングを `never` , `onFailed` , `onBuilt` から選んで設定します. デフォルトで `never` になっています.

※ `settings.json` 中の記述を削除しました（2023/05/03 変更）.

## `latex.clean.fileTypes` について

自動削除する補助ファイルの拡張子を指定します.

| デフォルト | 見直し後 |
|:-:|:-:|
| （たくさん） | （なし） |

編集中に作成される主な補助ファイルは次の通りです. それぞれ以下の理由から自動削除の対象にはしませんでした.

* `.aux` ファイル : 削除すると必要なビルド回数が増える.
* `.out` ファイル : 削除するとなぜかエディタの側でエラーが出ることがある.
* `.toc` ファイル : 削除すると目次を出力できなくなる.
* `.dvi` ファイル : ビルドに `ptex2pdf` を使えばそもそも残らない.
* `.log` ファイル : エラー時に参照したい.

※ `settings.json` 中の記述を削除しました（2023/05/03 変更）.

## `latex.recipes` について

ビルドに使用する 1 つまたは複数のツール（[後述](#latextools-について)）を実行する順にひとまとまりにして名前を付けます（ツールをまとめたものを「レシピ」といいます）. レシピが複数ある場合は通常, 最初に記されたレシピが実行されます.

| デフォルト | 見直し後 |
|:-:|:-:|
| （たくさん） | `ptex2pdf` 1 回のレシピのみ |

## `latex.tools` について

実際に実行されるコマンドに名前を付けます. 名前を付けたものは「ツール」としてレシピを構成します.

`"command"`には使用するソフトを指定し, `"args"` には引数を指定します.

| デフォルト | 見直し後 |
|:-:|:-:|
| （たくさん） | `ptex2pdf` のみ |
GitHub ActionsでAWS IAMロール認証を名前付きプロファイルとして利用する

awscli等で名前付きプロファイル名で認証したいと思い、GitHub Actionsでどうやるか試行錯誤して、以下の方法で実現できたので書いておきます。



```yml
env:
  AWS_ACCOUNT_ID: 123456789012
  AWS_REGION: ap-northeast-1
  AWS_IAM_ROLE: your-github-actions-role
  AWS_PROFILE_NAME: profile_name

jobs:
  dummy:
    name: dummy
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      # Refs: https://github.com/aws-actions/configure-aws-credentials
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@master
        with:
          role-to-assume: arn:aws:iam::${{ env.AWS_ACCOUNT_ID }}:role/${{ env.AWS_IAM_ROLE }}
          role-session-name: GitHubActions-${{ github.run_id }}
          aws-region: ${{ env.AWS_REGION }}

      - name: Set named credentials
        run: |
          aws configure set aws_access_key_id ${AWS_ACCESS_KEY_ID} --profile ${{ env.AWS_PROFILE_NAME }}
          aws configure set aws_secret_access_key ${AWS_SECRET_ACCESS_KEY} --profile ${{ env.AWS_PROFILE_NAME }}
          aws configure set aws_session_token ${AWS_SESSION_TOKEN} --profile ${{ env.AWS_PROFILE_NAME }}

      # AWS認証がどのIAM権限で行われているかチェック用 （名前付きプロファイルを指定している）
      - name: Call get-caller-identity to check AWS IAM
        run: |
          aws sts get-caller-identity --profile ${{ env.AWS_PROFILE_NAME }}
```
PL-900：Dataverseにおける環境

この投稿はMicrosoft PL-900の受験に向けた勉強資料をMS Learnページを参考にして作っています。
一発合格に向けて頑張りましょう！

[Dataverseにおける環境][MS-Learn]

[MS-Learn]: https://learn.microsoft.com/ja-jp/training/modules/introduction-common-data-service/5-environments

# Dataverseにおける環境
* Microsoft Power Platformで組織のビジネス データ、アプリ、フローを保管、管理、共有するために使用される
* 各環境で使っている1つのMicrosoft Dataverseデータベースをプロビジョニングできる
* AzureADテナントの下に作成され、テナント内のユーザーのみアクセスできる
* 環境内に作成されたMicrosoft Dataverseデータベースおよびすべての項目（接続、ゲートウェイ、Power Automate を使用しているフローなど）は該当環境の場所（例：アメリカなど）のデータセンター内に配置される

<img src="https://learn.microsoft.com/en-us/training/modules/introduction-common-data-service/media/environment.png">

出典：[Dataverseにおける環境][MS-Learn]

[MS-Learn]: https://learn.microsoft.com/ja-jp/training/modules/introduction-common-data-service/5-environments

* 開発用・テスト用・運用用など、複数の環境を作成および設定することでソリューションの開発とデータストレージを管理ができる。また、地理的な場所に基づいて環境をセットアップすることもできる。 
例）ヨーロッパ用と別の場所であるアジアに環境設定することができる
　　各環境にはMicrosoft Dataverseのインスタンスが０つまたは1つのみになる
コーンポタージュ缶の粒を残さずに飲み干す方法

## はじめに

いきなりですが、エンジニアはデスクワークなので
飲み物を飲みながら作業することが多いですよね。
僕もコーディングしながら や 打ち合わせをしながらコーヒーをよく飲んでます。

そして寒い季節なので、あたたかい飲み物が飲みたくなりますよね、、、

その代表格として、有名な`「コーンスープ缶」`

![IMG_8488.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987057/244612e6-127f-6428-5618-dd5e72783a66.jpeg)

コーンスープを飲むといつもコーンの粒だけが残ってしまって
勿体無いなぁと感じてしまうんです。

そこで今日は粒をのこさずに飲み干せる方法を共有します。

## 飲み干し方

### 結論

飲み口の少し下あたりをあらかじめ凹ませることで綺麗に飲み干すことができます。
![IMG_8491.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987057/e34db566-6187-5110-9a3d-7f2e774cf506.jpeg)
[React] importを絶対パスで記述

Reactでコンポーネントをimportする際に、
離れた階層のコンポーネントを相対パスで読み込む場合、
```
import {testComponent} from "...../Components/testComponent";
```
などど記述しなくてはいけなくなり可読性がかなり落ちます。
絶対パスでの設定方法は、プロジェクトのルートの
jsの場合＝jsconfig.json 
tsの場合＝tsconfig.jsonを作成して以下を記述します。
```
{
    "compilerOptions": {
        "paths": {
            "@/*": ["resources/js/*"]
        },
    },
}
```
を記述することで、
resources/js/直下のディレクトリを、@で指定できるので、
```
import {testComponent} from "@/Components/testComponent";
```
と記述することができます。
それなりにpython書いてきたけど改めて入門から学んでみたら知らなかったことがたくさんあったのでシェア


先日、
https://www.udemy.com/course/python-beginner/
こちらのudemyの教材を買って、本命は入門以降のセクションだったんですけどせっかくだしということで入門から見てっているのですがかなり勉強になったことがあったのでまとめておきます。



## printについて

`print('Hi', 'chat')` みたいにかくとスペース区切りで文字が出力される。

`print('Hi', 'chat', sep=":")` みたいにかくと:区切りで文字が出力される

## 数値について

17/3 みたいな割り切れない計算のときに、整数部分だけだしたいときは、

`17 // 3` とかくと、整数だけ出力される。

## f-string

```jsx
x, y, z = 1, 2, 3
print(f'a is {x}, {y}, {z}')
print(f'a is {z}, {y}, {x}')
```

みたいなことができる（python3.6以降）

## タプル（tuple)について

今までタプル作るときは、

`t = (1, 2, 3)` と書いていたが、

`t = 1, 2, 3`　でもいいらしい。

## タプルとリストの違い（使い分けについて）

性質として、リストはinsertやpopなどの変更するためのメソッドがあるのに対して、タプルはそういった変更するためのメソッドがない。

そのため、**変数の値をあとから変える場合はリスト、変えることがない場合はタプル**を使うようにすると読みやすくなる。

## タプル（のアンパック）を使った変数の入れ替え

```jsx
a = 100
b = 200
a, b = b, a
```

で可能。（tmpみたいなのいちいち用意しなくて済む）

## 集合

これはこういうものがある事自体知らなかった。

```jsx
a = {1, 2 ,3 ,4}
```

という形でかくと集合（set型）として定義される。

```jsx
a = {1, 2 ,3 ,4}
b = {1, 3, 5}
a - b
とうつと、
{2, 4}
が返ってくる。
```

どっちにも存在する値を取り出したいときは、 `&` を使う。（ `a & b` ）

どっちか片方にでも存在すると値のときは、 `|` を使う。(`a | b`)

どっちかに一個しか存在しない値のときは、 `^` を使う（ `a ^ b`）

　※↑の例だと、2,4,5が返ってくる。

## 集合の使い方

配列に値を入れてって、最後にユニークな値として取り出したい（変換したい）ときとかに使える。

```jsx
a = ['apple', 'banana', 'apple', 'banana']
b = set(a)
```

みたいな。

## 辞書内包表記

リスト内包表記は、

```jsx
t = (1, 2, 3, 4)
l = [i for i in t]
print(l)
```

というふうにできる。

辞書内包表記はというと、

```jsx
w = ['mon', 'tue', 'wed']
f = ['coffee', 'milk', 'beer']

d = {x: y for x, y in zip(w, f)}
```

という感じでかける。

## 組み込み関数

print とか map, zip とかがいわゆる組み込み関数になる（importせずとも使える関数）

これらは `builtin` というパッケージの中に含まれててこの、 `buildin`　がデフォルトでimportされているという仕組み。

その中にsortedっていう関数がある。

例えば、

```jsx
ranking = {
    'A': 100,
    'B': 85,
    'C': 95
}
```

という辞書があってこれをvalueの値でソートしたい場合。

```jsx
ranking = {
    'A': 100,
    'B': 85,
    'C': 95
}

print(sorted(ranking, key=ranking.get, reverse=True))
```

こう書くと降順で並び替えてくれる。ポイントは、 `key=ranking.get`

以上です。
まとめるならもうちょいきれいにまとめなさいって怒られそうですが、もともとnotionに書いてたものをそのまま貼っつけただけなので許してください。mm
Reactの状態管理ライブラリを考える

こちらの記事は金属加工プラットフォームを開発・運用する[Catallaxy](https://catallaxy.me/)の[Catallaxy Advent Calendar 2022](https://qiita.com/advent-calendar/2022/catallaxy)の12/2の記事となります。

# 前提

既存システムではReactのContextを使用しているのですが、使い方があまりよくわかっていなかったので他のライブラリでの置き換えも含めて検討しようと思って調査をしました。

用途としては
- ログイン状態などのグローバルな状態管理
- コンポーネント間の狭い範囲での状態管理

の２つで、どちらもデータとしては小さいものです。
使用するデータをシステムでグローバルに管理するような用途は考えていません。
基本的にはコンポーネント間のデータの受け渡しはPropsを経由するので使用頻度はそれほど多くありません。

# まずReactのContextについて

既存のコードを読む限り、ReactのContextで一見大丈夫な様に見えました。
なのでReactのContextについて用法・用量の注意点が無いか調べていた所、この記事に行き当たりました。

[正しく使う ReactContext - zenn](https://zenn.dev/yuta_ura/articles/react-context-api)

すると、アンチパターンの１に思いっきり該当していました。
自分が実装したわけでは無いのですがこういう風に実装したい気持ちはめっちゃわかるので、コーディングルールやPRでのチェックで回避しないといけない→それはちょっとなぁとなりました。

# 他のライブラリを調べる

というわけで他のライブラリがどうなっているかを調べました。
色々な記事を参考にしましたが、ざっくりな分類としては下記のスライドで把握できました。

[Reactのトレンドよくわからん P.26 - Speaker Deck](https://speakerdeck.com/oukayuka/reactnotorentoyokuwakaran?slide=26)

- Fluxアーキテクチャ
    - Redux
    - Zustand
- Atomアーキテクチャ
    - Recoil
    - Jotai
- クエリキャッシュ
    - TanStack Query
    - SWR

また、比較記事として次の記事を参考にしました。

[Reactの状態管理で悩む全ての人へ【2022年】 - ramble](https://ramble.impl.co.jp/2211/)

## Flux

### Redux

[React Redux](https://react-redux.js.org/)

Reduxについては以前別のシステムで使っていたのでなんとなくの印象なのですが、設計・実装が複雑になりがちなので今回の目的には重たいかなと思いました。

### Zustand

[Zustand](https://zustand-demo.pmnd.rs/)

Zustandについて紹介記事を読んでみましたが、Reduxとは違ってシンプルに書けそうな印象でした。
[React状態管理ライブラリ Zustandを使ってみた - DevelopersIO](https://dev.classmethod.jp/articles/zustand/)

shallow、overwrite辺りの挙動がポイントになりそうですね。

## Atom

### Recoil

[Recoil](https://recoiljs.org/)

Atomのアーキテクチャについては、状態管理する単位が小さくまとめやすいなぁという感想でした。
なので当初はRecoilでよさそうかなぁと思ってました。
懸念材料としては、Atomのキーを管理するコストがかかりそうだなぁというのがありました。

### Jotai

[Jotai](https://jotai.org/)

JotaiはRecoilの懸念材料が無くなったので特に問題がなさそうでした。
複雑な使い方をすると機能が足りないとかという問題が出てくるかもしれませんが、現状の要求にマッチしていると思いました。

## 結論

現状の要求を考えると、最も懸念点が少ないのでJotaiを使ってみようと思います。

Jotaiに限らず状態管理ライブラリを使った場合に問題が出るのは設計部分だと思うので、それはまた別記事にまとめたいと思います。
【Unity】toio SDKのURP対応

## 本記事について
toioのドキュメントではテンプレートとして3D(URPじゃない)を使うと示されている
https://github.com/morikatron/toio-sdk-for-unity/blob/main/docs/download_sdk.md

基本的にはその通りにやればいいと思うが、既存のURPのプロジェクトに追加するということもあると思う。
URPで使おうとするとShaderがバグってピンクになるのでその対処方法を示す。

## 環境

mac os 12.5 silicon
toio SDK for Unity v1.5.1
Unity 2021.3.7f1

## やり方
基本的にはツールにおまかせ。

ProjectビューをMaterialで絞り込む

![スクリーンショット_2022-12-04_21_48_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/62d50720-1a39-f540-b645-f258c28d7434.png)

ピンクのマテリアルを全て選択する

![スクリーンショット 2022-12-04 21.48.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/1395c1c9-cf55-d179-2b70-5ca58ab26dff.png)

Edit > Rendering > Materials > Convert Selected Built-in Materials to URP

![スクリーンショット 2022-12-07 11.47.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/2715512c-3d69-2840-0e8f-69d71cff1dba.png)

これでほとんどのMaterialはURP対応される。

ただし、CubeはLegacyなBuiltinのMaterialを使用しているためピンクのまま。

そこで、新しくMaterialを作って手動でアタッチ。
![スクリーンショット_2022-12-07_11_50_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/8bf83862-fe03-2e0e-c464-3d9995f9961b.png)

私は適当に黄色くした。
![スクリーンショット 2022-12-07 11.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/1f0d6f78-4803-0a2e-f9df-650df950d17a.png)
#1 LuaLaTeX ドキュメントクラス

　これは，和文`LuaLaTeX`での利用を想定したLaTeXのPreambleに関する記事です．</p>
# コンパイル
　`file.tex`に対して，`LuaLaTeX`でコンパイルするには，
```Bash
$ lualatex file.tex
```
でPDFが生成される．
# documentclass
```TeX
\documentclass[option]{class}
```
## `class`部
- `{jlreq}`
  - 横書き`article`相当の文書クラスとなる．
  - エンジンは自動判別．
  - 詳しくは[こちら](https://www.tug.org/texlive//Contents/live/texmf-dist/doc/latex/jlreq/jlreq-ja.html)
---
- `{ltjsreport}`
  - **報告書クラス**
  - `\usepackage{luatexja}`読み込みは不要
  - 詳しくは[こちら](https://texwiki.texjp.org/?クラスファイル一覧)．
- `{jsarticle}`
  - **報告書クラス**
  - `\usepackage{luatexja}`読み込みが必要．
  - 詳しくは[こちら](https://ja.osdn.net/projects/luatex-ja/wiki/LuaTeX-jaの使い方)
---
- `{ltjsarticle}`
  - **論文クラス**
  - `\usepackage{luatexja}`読み込みは不要．
  - 詳しくは[こちら](https://texwiki.texjp.org/?クラスファイル一覧)．

- `{jreport}`
  - **論文クラス**
  - 詳しくは[こちら](https://ja.osdn.net/projects/luatex-ja/wiki/LuaTeX-jaの使い方)
  - `\usepackage{luatexja}`読み込みが必要．

## `option`部
- 文字サイズ
  - 10pt, 11pt, 12pt ... など．（10ptがデフォルト）
- 用紙サイズ
  - `jlreq`, `jsarticle`, `jreport`クラス
    - `a4paper`, `b4paper`など．
  - `ltjsreport`, `ltjsarticle`クラス
    - `a4`, `b4`など．
- 段組
  - 1段組：`onecolumn`（デフォルト）
  - 2段組：`twocolumn`
- 用紙向き
  - 縦：無記述（デフォルト）
  - 横：`landscape`
- ページ校正
    - `oneside`（デフォルト）
    - `twoside`
ユーザー認証しないLaravel Sanctum

そんなケースあまり無いと思いますが、SanctumでトークンベースのAPI作りたいけど、ユーザーのログインは必要ないときのメモです。


# 準備
## 導入
まずは以下に則って導入します。


https://readouble.com/laravel/8.x/ja/sanctum.html


# 実装
## モデル作成
まずは、Sanctumを導入したときに追加されるテーブルのモデルを作ります。

```php:PersonalAccessToken.php
use Laravel\Sanctum\PersonalAccessToken as SanctumPersonalAccessToken;

class PersonalAccessToken extends SanctumPersonalAccessToken
{
    use HasApiTokens;
    /** 省略 **/
}
```
通常HasApiTokensはUserモデル等でuseしますが、今回はユーザー認証が必要ないので、自分自身に紐づくようにPersonalAccessTokenでuseします。

## 認証処理
ユーザー認証しないとはいえ認証の処理は必要なので記載します。
```php:PersonalAccessToken.php
/**
 * アクセストークンの有効性を独自チェックする
 *
 * @param mixed $accessToken
 * @param bool $isValid
 * @return bool
 */
public static function isValidAccessToken($accessToken, bool $isValid): bool
{
    // 適当な認証判定
    return true;
}
```

## カスタム
上記で実装した内容をSanctumで使用するようにAppServiceProviderで指示します。

```php:AppServiceProvider.php
// Sanctumカスタム
Sanctum::usePersonalAccessTokenModel(PersonalAccessToken::class);
Sanctum::authenticateAccessTokensUsing([PersonalAccessToken::class, 'isValidAccessToken']);
```

## 発行
準備完了です。任意のタイミングでPersonalAccessTokenを生成し保存します。
```php
$personalAccessToken = new PersonalAccessToken();
$personalAccessToken->tokenable_type = PersonalAccessToken::class;
$personalAccessToken->tokenable_id = '1';
$personalAccessToken->name = 'API TOKEN';
$personalAccessToken->token = hash('sha256', $plainTextToken = Str::random(40));
$personalAccessToken->abilities = ['*'];
$personalAccessToken->save();

$personalAccessToken->tokenable_id = (string)$personalAccessToken->id;
$personalAccessToken->save();

return new NewAccessToken($personalAccessToken, $personalAccessToken->getKey() . '|' . $plainTextToken); 
```
このときtokenable_typeとtokenable_idに自分自身を指定するようにします。
Tokenの生成と返却はSanctumの実装を参考にしてください。

# アクセス
生成されたトークン（returnされた文字列）をつかってリクエストします。

# おわり
以上です。
お疲れさまでした。誰かの役に立てれば幸いです。
windowsパソコンで Google 日本語入力を使用する（英語キーボードの設定も有り）

# はじめに

普段は Mac を使用しているのですが、持ち運び用パソコンとして windows を購入しました。Mac では「Google 日本語入力」を使用しており、できるだけ同じシステムを使用したいと考え windows パソコンにも導入しようとしました。
この記事では導入方法を説明してます。
また私は英語キーボードを使っているのでその時の設定方法もオプションで説明してます。

# 前提
* 「Google 日本語入力」は既にインストール済みであることを想定します。

# 設定
1. IME(Input Method Editor) の整理
    1. 設定 -> 時刻と言語 -> 入力 -> 言語と地域
    1. 言語ペインの日本語ボタンの右にある「…」から「言語のオプション」をクリック![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355559/678da5ef-547f-3944-184b-3a88cec49531.png)

    1. キーボードペインのインストールされているキーボードから「Google 日本語入力」を追加する（インストール時に追加している場合は既に見えている）
    1. 「Microsoft IME」の右にある「…」から「削除」をクリック（どちらも使用したい場合には削除しなくても良いが、IME の切り替えも増えるのであまりメリットもなさそう）
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355559/2d88575b-963c-50cb-3bf5-0f220e4602df.png)

1. （オプション）英語キーボードを使用する際の設定
    1. 右下のタスクバーの文字（「あ」もしくは「A」）を右クリックして、プロパティを選択
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355559/ce1c69d4-5153-fe1a-8bbf-0b0799d0f787.png)
    1. キーの設定ペインの「キー設定の選択」項目の編集ボタンをクリック
    1. 入力キー列が「Henkan/Muhenkan」である全ての項目を好みの変換に変更

以上で快適な変換ライフを送ることができるはずです！
ファイル名に制御文字が入ったファイルをS3にアップロードされて起きたエラー

## 起きたこと

S3に保存されている画像一覧を表示するページを開こうとした際に、下記のエラーが発生しました。
```
xmlParseCharRef: invalid xmlChar value 16
```

## 原因
直前にS3にアップロードされた画像名に制御文字が入力されていました。
↓こんな感じです。
[![Image from Gyazo](https://i.gyazo.com/dfe524641e5c79e70edbac4e0548238a.png)](https://gyazo.com/dfe524641e5c79e70edbac4e0548238a)

検証ツールで見るとこんな感じ。
`tokushu`の前後に明らかに変な文字が入ってる笑
[![Image from Gyazo](https://i.gyazo.com/4e007ad4c8f6c446c7acd9f9a1e1b75f.png)](https://gyazo.com/4e007ad4c8f6c446c7acd9f9a1e1b75f)

アップロード前のローカルで見るとこんな感じ。
ローカルだと全く変じゃないのに、S3にアップロードしてみると判明しました。
ローカルはトリミングされてるのかな？
[![Image from Gyazo](https://i.gyazo.com/00b4901fb9f08cf2e82d195526c09f51.png)](https://gyazo.com/00b4901fb9f08cf2e82d195526c09f51)

## 対処
まず、S3コンソールから該当ファイルを直接削除しようとしましたが削除できませんでした。
おそらくS3コンソール側も制御文字を認識しておらずに削除できなかったのかな？

オブジェクトの名前変更はできたので、S3コンソール上で制御文字を削除した名前に変更して対処しました。
[![Image from Gyazo](https://i.gyazo.com/d0ac227debc4738e0f32feaeda05b7d9.png)](https://gyazo.com/d0ac227debc4738e0f32feaeda05b7d9)

恒久対応としては、S3アップロード時に制御文字をトリミングしてあげるといった下記記事のようなことが必要になりそうです。(そこまでやってないけど)
https://codenote.net/tool/4521.html

### 参考になりました🤗
https://qiita.com/nishidataishi/items/fdb632f5aed620bd339e
【Livewire v3】今度Alpine.jsがlivewireという鞘に収まるらしい

## 概要

現状(livewire2.x)は、Alpine.jsと依存関係はありません。
連携させるには別途Alpine.jsを読み込み、``@entangle``ディレクティブや``$wire``APIなどを使用する必要があります

https://readouble.com/livewire/2.x/ja/alpine-js.html


## livewireインストールすだけでAlpine.jsがついてくる

今まではLivewire スクリプト、スタイル、Alpine.jsを読み込んでいましたが、記述が不要になります
```diff_html
<!DOCTYPE html>
<html lang="en">
<head>
-    <script src="//unpkg.com/alpinejs" defer></script> 
-    @livewireStyles
-    @livewireScripts
</head>
<body>
    ...
</body>
</html>
```

## livewireの記述でAlpine.jsのトランジションを使用できる

wire:transition

> Alpineには以前からトランジションがありましたが、Livewire v3では、wire:transitionというx-transitionのラッパーが追加されます。Wire:transitionをLivewireで表示・非表示される要素に追加すると、とても美しいトランジションが得られます。wire:transition は x-transition を利用しているので、.opacity や .duration などのモディファイアもすべてサポートされます。

## その他
- エディターでファイルを保存するだけで画面のリロードが不要になる
- wire:modelの挙動が変わる

| リクエストタイミング                 | 2.x                  | 3.x                 | 
| ------------------------------------ | -------------------- | ------------------- | 
| 要素の「入力」イベントを検知して同期 | ``wire:model``       | ``wire:model.live`` | 
| submitやlivewireイベント時に同期     | ``wire:model.defer`` | ``wire:model``      | 

- 親子関係にあるコンポーネント内のプロパティの同期等が簡単に
- wire:navigateでSPAっぽく実装が可能に

https://laravel-news.com/livewire-v3-features
Amazon Linux2のsecurityアップデートに追加された"/bin/scalar"について

運用しているサーバで自動的にSecurityアップデート(`yum -y --security update`)を適用しています｡
さらにAIDEで定期的にファイル改ざん検知を行っています｡

本日のSecurityアップデートで`/bin/scalar`なるものが追加されていて｢なんだこりゃ?｣と~~慌てた~~思ったので調べてみました｡

```bash
-rwxr-xr-x 1 root root 2245096 11月 19 04:39 /bin/scalar
```

manを実行したGitのツールだと表示されます｡確かに`version`を実行してみると`git`のバージョンが表示されます｡

```bash
$ man scalar
NAME
       scalar - A tool for managing large Git repositories
```

```bash
$ scalar version
git version 2.38.1
```

で､調べてみたら､ScalarはMicrosoftが開発した大規模Gitリポジトリ管理用のツールで､2.38でGit本体に統合されたとのことでした｡
部分クローンいいですね｡

[microsoft/scalar](https://github.com/microsoft/scalar)

## 翻訳/Scalarとは？
Scalar は、Git を大規模な Git リポジトリに拡張するためのツールです。これは、次のような先進的なGitの機能を有効にすることで実現します。

- パーシャル・クローン：すべてのGitオブジェクトをすぐにダウンロードしないことで、動作するリポジトリを取得する時間を短縮します。
- バックグラウンド・プリフェッチ：1時間ごとに全てのリモートからGitオブジェクト・データをダウンロードし、フォアグラウンドのgitフェッチ・コールの時間を短縮します。
- Sparse-checkout：作業ディレクトリのサイズを制限します。
- ファイル・システム・モニター：最近更新されたファイルを追跡し、Gitがワークツリー全体をスキャンする必要をなくします。
- コミット・グラフ：コミット・ウォークと到達可能性計算を高速化し、git log などのコマンドを高速化します。
- Multi-pack-index：多数のパックファイルからオブジェクトを高速に検索することができます。
- インクリメンタルリパック。マルチパックインデックスを使うことで、同時に実行するコマンドを中断させることなく、パックされたGitデータをより少ないパックファイルにリパックします。

Gitの新しいバージョンがリリースされると、Scalarが自動的に設定する機能のリストが更新されます。これにより、リポジトリを可能な限り効率的に維持するための労力が軽減されます。
www.DeepL.com/Translator （無料版）で翻訳しました。


[The Story of Scalar | The GitHub Blog](https://github.blog/2022-10-13-the-story-of-scalar/)

> When you install Git v2.38, you’ll find a new executable tool available called scalar. At its core, Scalar enables the latest and greatest Git features for working with large repositories. By simply switching from git clone to scalar clone, you will have all of Git’s most impactful performance features, such as partial clone, sparse-checkout, background maintenance, and advanced config options neatly configured for your repository. Have you already cloned your repository? Run scalar register in it to get the same features.


> Git v2.38 をインストールすると、scalar という新しい実行可能ツールが利用できるようになります。Scalar は、大規模なリポジトリを扱うための最新かつ最高の Git 機能を実現します。git clone から scalar clone に切り替えるだけで、部分クローン、スパースチェックアウト、バックグラウンド保守、高度な設定オプションといった Git の最もインパクトのあるパフォーマンス機能のすべてが、あなたのリポジトリ用にきちんと設定されることになるのです。すでにリポジトリのクローンを作成しましたか？その中で scalar register を実行すると、同じ機能を得ることができます。
safariだと画像や文字サイズが小さくなる

# なぜか、safari(twitterブラウザ)のcssが崩れる

1 アドレスバーの「ぁあ」というところをタップ
2 すると 100% と書いたのが出てくるので、これをタップして変更
（崩れている場合は50%とかになってると思う）

これでcssが整う

![Snapshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/af997e61-7f82-af50-c298-d243417d0894.jpeg)

ハマりましたわ。