OmniAICreator/Qiita-1.07M huggingface dataset:
仕事で開発する上で知っておくと役立つアクセシビリティの考え

[Ateam Brides Inc. Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ateam-brides)の21日目はデザイナーの綿貫（@xrxoxcxox）がお送りします！

## この記事の概要

「アクセシビリティが大事」と聞く機会は多いのではないでしょうか。
その一方で、アクセシビリティとは一体何なのか？どうして重要なのか？をしっかり聞く機会は少ないかもしれません。

そんなアクセシビリティについて、仕事で開発するにあたり役立つであろうポイントを記事にしてみました。

:::note warn
私自身は、仮に仕事に役立たなくてもアクセシビリティは大事にすべきだと思っています。
しかしまずは「役立つ」側面を知ってもらえた方が興味を持ってくれる人が多いだろうと判断してこういったタイトル・構成にしました。
商業的な側面だけでアクセシビリティを捉えているわけではないことをご理解いただけますと幸いです。
:::

## アクセシブルとは

- access + able
    - つまり、アクセスができるという意味
- 一般的に想像されるような「どこかの場所へのアクセス」だけでなく、情報を入手できるとか物が使えるとか、そういう広い意味で使われる

### Tim Berners-Leeの言葉

> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

- 拙訳
    - Webの力はその普遍性にある。障害の有無に関係なく、誰もがアクセスできることがその本質である。
- Tim Berners-Lee＝World Wide Webを作った人
    - Webは生まれながらにしてアクセシブルであることが1つの存在意義である、と捉えられる

## “アクセシブル”の捉え方

- よく生まれがちな誤解として「アクセシビリティ向上＝障害のある人向けの対応」の認識がある
- どちらかと言えば「アクセシビリティ≒ユニバーサルデザイン」と捉えた方が良い
- 特定の属性の人専用のものを作ると当然それが使えない人も出てくる
    - 以下の例では`車椅子用昇降機`
        - 車椅子に乗っている人には便利
        - しかしそれ以外の人は使うことができない
    - しかしエレベーターであれば怪我があってもなくても車椅子でも関係なく使える
    - 最初から「いつでも誰でも使えるようにしよう」と考えてエレベーターを作るのが「アクセシビリティを考えた事業開発」と言える

| 人の属性と、使用可能かどうか | 階段 | 車椅子用昇降機 | エレベーター |
| --- | --- | --- | --- |
| 足に怪我などがない人 | ○ | × | ○ |
| 車椅子に乗っている人 | × | ○ | ○ |
| 怪我をして松葉杖をついている人 | × | × | ○ |

## アクセシビリティを向上するとどういうメリットがあるか

- 機会損失が少なくなる
    - キーボードや特殊なデバイスで操作している人もちゃんとサイトが使える
    - たまたま今怪我をしていたり病気にかかっている人も問題なく使える
    - 会社・事業として力を入れたくなる1番の理由はこれ？
- 知覚される価値が上がる
    - 昨今の企業は多様性や持続可能性を大事にし始めている
    - そういった企業は「良い取り組みをしている」と認識される
        - 本来は打算的に捉えるものではないが……
    - 人が平等にアクセスできる機会を提供するための取り組みなので、アクセシビリティ向上も「社会的な良い取り組み」であるはず
- 開発がやりやすくなる
    - アクセシビリティを意識したコードは何が書いてあるか分かりやすい
        - 「JavaScriptよりもTypeScriptの方が一目で型が分かって開発がしやすい」のと似たイメージ
        - HTMLだけでは現代のアプリケーションにおける様々な役割や状態に対応しきれない
        - 適切なAttributeやWAI-ARIAはそれを補完してくれる
ReactQuery × Suspense の組み合わせが便利すぎて感動した話

この記事は、[2021年 Reactアドベントカレンダー](https://qiita.com/advent-calendar/2021/react) 24日目の記事です。
メリークリスマス。

## はじめに
データをよしなにキャッシュしてくれる[ReactQuery](https://react-query.tanstack.com/) と [React.Suspense](https://ja.reactjs.org/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html#best-practices-for-suspense)を組み合わせて使ってみたらあまりに便利で、自分の中でデータキャッシュの革命が起きたのでそのことを書く。

## ReactQueryとは
今更感があるのでここでは書かない。

## React.Suspenseとは
今更感があるのでここでは書かない。

## ReactQuery導入以前
WebAPI経由で取得したデータをキャッシュしたい場合にはCustomHooksの中でRecoilを使って自前で頑張っていたが、データをリフレッシュするタイミングでローディング状態に入りデータが無くなりSuspenseにfallbackされてしまいUX的に厳しいものがあったりでなかなかつらい思いをしていた。

## 感動した点
ほぼ QueryClient / Query のオプション依存ではあるが、

* [Suspenseのオプション](https://react-query.tanstack.com/guides/suspense)
これをtrueにしておくと、最初のデータの取得が完了するまではSuspenseにフォールバックしてくれるので、適当な粒度でSuspenseを差し込んでおけばデータがnullかどうかを気にせずほぼ同期的に扱える。便利。

* [keepPreviousDataのオプション](https://react-query.tanstack.com/guides/paginated-queries#better-paginated-queries-with-keeppreviousdata)
これをtrueにしておくと、裏でデータをロードしつつロードが完了するまではSuspenseにフォールバックすること無く最後に返した値をそのまま返してくれる。データのロードが完了したタイミングで新しいデータに差し替わり、自動で再描画してくれる。
これによって、画面がちらつくことなくスムーズに新しいデータを表示することができる。便利。  
QueryClient単位ではなくQuery単位でこのオプションを有効/無効にすることも可能なので、基本的に有効にしておいて古いデータが表示されると困るような画面で使う場合のみ無効にする、という使い方もできる。便利。

* APIクライアントの実装はそのまま使い回せる
ReactQuery がやっていることはデータのキャッシュだけなので、それまで使っていたAPIクライアントの実装はそのまま使い回すことができる。
導入以前から `UI → CustomHooks → Repository → API Client` という構成にしていたので、Repository にReactQueryを差し込むことでAPIClientの実装は完全にそのまま使えた。
CustomHooksも、データがnullかどうか気にしている部分を削除したくらいで、インターフェース的には大きな変更無しで使うことができた。数が多いので大変だったが。

## 改めて考えてみると
RecoilによるデータのキャッシュをCustomHooksのレイヤーでやっていたのがそもそもの誤りで、Repositoryのレイヤーでやっていたら意外とそこまで辛くなかったのかもしれない。
ReactQueryが提供してくれている柔軟なキャッシュキーや、裏でデータをフェッチする機構を作るのは大変だったと思うが。

## 終わりに
ReactHooksによる再描画の仕組みの強力さを改めて知る意味でも良い体験だった。
逆に、それがまともに使われていない古いコードベースのプロジェクトを触るのが最近つらい。

ReactQueryを業務で使い始めたのが3日前、感動したのが2日前、この記事を書こうと思い立ったのが昨日、書いているのが今日、ということで、コードは何もない上にだいぶ書き殴りになってしまったが気にしない。
とりあえず、当面の間は非同期的に取得するnullになり得るデータのキャッシュはReactQueryで、それ以外の、nullかどうかを気にせずに済むデータ (UIのstateとか) はRecoilでキャッシュ、がよさそう。
【React】Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Modal)`, but its value is `null`.の対処法

<h2>症状</h2>
MaterialUIのModalを使用したとき、以下の警告が表示されました。
翻訳すると、「警告：失敗したプロップタイプ：プロップ「open」は「ForwardRef（Modal）」で必須としてマークされていますが、その値は「null」です。」でした。
「openが必須だが、openにnullが入っている」から警告されているようです。

```terminal:warn
Warning: Failed prop type: The prop `open` is marked as required in `ForwardRef(Modal)`, but its value is `null`.
```

<h2>解決策</h2>
なぜか、useStateのopenの初期値をnullにしていたため、発生していました。
MaterialUIそのままだと、falseなのになぜそのまま使わなかった。。。

以下はMaterialUIのBasic modalから引用。

```react:Modal.js
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

export default function BasicModal() {
  //ここをなぜかnullで設定していた
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Text in a modal
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </div>
  );
}

```

<h2>参考</h2>

https://next--material-ui.netlify.app/ja/components/modal/
【初心者向け】爆速で質問・回答を回すTips7選


N高 3年の中代晴士です。普段はUnityでゲーム作ってます。
この記事は [N・S高等学校 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/n-s-highschool-1) 24日目の記事です。

N高でアドカレを書けるのは今年で最後になりました。
ということでN高のプログラミング界発展のため、**爆速で質問・回答を回すTips7選**を残して、この学校を去りたいと思います！
自分が質問をするときのチェックリストみたいな感覚で見てもらえると嬉しいです。


## 1. 冒頭で何についての質問なのかを述べる
これ、本当に重要です。
**質問の冒頭で〜についての質問です。** と必ず述べましょう。
これを書くことで、回答者は自分に答えられそうな質問かを簡単に判別することができます。

「プログラミング」という主語だけでは大きすぎるので、具体的に何の言語なのか、どんなことをしているのかが書いてあると良いです！

例:
「html, cssでのサイト制作に関する質問です。」
「jsに関する質問です。」
「Unityでのシューティングゲーム制作に関する質問です。」

## 2. 抽象的な言葉をやめる
質問者の中でしたい事が意外と相手に伝わっていないと言う事がよくあります。
したい事が伝わっていない質問にみられる言葉としては、

「うまくいきません」
「なぜかできません」
「思い通りにいきません」

これでは回答者には何が出来ていないのかが伝わっておらず、回答を出すことが出来ません。

**「具体例+それをどうしたいのか」**のフォーマットを質問の中に入れましょう。

例:
「モンスターAが消えません。どうしたら消えるのでしょうか？」
「ゲームが起動しません。起動できない原因はなんでしょうか？」
「〜行目でエラーが出て動きません。エラーを消すにはどうしたらいいですか？」

## 3. エラーが起きていればエラー文をすべて貼る

エラーが出ていると言うことは、コンピュータが原因を教えてくれていると言うことなので、解決の際には大きなヒントになります。エラーが起きていれば、**エラー文は必ず貼りましょう**。

## 4. コードを張る際はコードブロックを用いる
コードを貼る際にスクショで貼っている人を見かけますが、コードをスクショで貼ってはいけません。
回答者も質問でもらったコードを自分の環境で動かす場合があるので、スクショの状態ではコピー＆ペーストができず非常に不便になってしまいます。**コードは必ずコードブロックで貼るようにしましょう**。


### やってはいけない例
左: コピペできない
右: 非常に見づらい

<p>
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/d9330199-d920-54b2-9dc8-dd8b88a578d6.png">

<img width="306" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/77ca0429-918b-a931-e8f3-0e135e50f29c.png">
</p>






### めっちゃありがたい例
文字を選択してここをクリック
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/37885ced-88de-3f26-ea70-11357849a1f2.png">

見やすい！コピペできる！
<img width="450" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/2464c0c4-c061-ccc7-99bf-85918f05e503.png">
</p>

### さらにめっちゃありがたい例
**/(スラッシュキー) → テキストスニペットを作成**
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/2de5117f-54b6-48fa-bfac-efb4ad7b3ee6.png">

色と行番号がついた！
<img width="450" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/1b61bf58-9f3b-0328-7eef-233d65b98f25.png">




## 5. 試したことがあれば書く
あなたが試した内容によっては原因をかなり絞る事ができるので、**試した事があれば書きましょう**。

## 6. 質問内容に用いている参考リンクを張る
コードを貼る際に何らかのサイトを参考にしたコードを見かける事があります。
もしかしたら、そのサイトに解決策のヒントがあるかもしれないので、**貼ったコードが書いてあるサイトは必ず貼ってください**。

## 7. 回答していただいた相手に感謝と報告をする
これ本当に重要です！！！！！！

回答者は、日々の努力で学び培ってきた内容を**無償**で質問者に提供しています。
先生であってもTAさんであっても生徒さんであっても、**必ず感謝の言葉を送ってください**！！
（特に生徒はお金も貰ってないのでボランティアで回答してます）

あと解決した際や、諦める結果になっても報告をしていただけるとありがたいです。
自分だけかもしれませんが、自分が回答した内容があっているか、質問は解決したか気になってしまいます。一言でいいのでおねがいします！

## まとめ
1. 冒頭で何についての質問なのかを述べる
1. 抽象的な言葉をやめる
1. エラーが起きていればエラー文をすべて貼る
1. コードを張る際はコードブロックを用いる
1. 試したことがあれば書く
1. 質問内容に用いている参考リンクを張る
1. 回答していただいた相手に感謝と報告をする

## あとがき

初めのうちは質問をしていると、ggrks、自分で考えろみたいなことを言われるかもしれません。
ですが、**質問自体は悪いことではありません。**自分で考えるだけでは必ず限界があるので、何日も悩んでしまうようであれば、人に頼ると言うこともプログラミング学習の上では非常に重要です。
きちんと今の自分でできることをやった上で、この記事にある方法で積極的に質問してみてください！

↓自分が今参加してるプロジェクトです！フォローしていただけると喜びます！
https://twitter.com/PlayChaosground
GraphQL Tools気になるやつ


この記事は[GraphQL Advent Calendar 2021](https://qiita.com/advent-calendar/2021/graphql)の23日目の記事です。

---


最近、GraphQL Toolsというサイトを知りました。

https://www.graphql-tools.com/

The GuildというOSS開発者の団体が管理しているGraphQL系のOSSツール群らしい。

ここが管理するものをざっと眺めてみて気になったものを、備忘録程度にピックアップしておきます。

## graphql-inspector
https://github.com/kamilkisiela/graphql-inspector

> Validate schema, get schema change notifications, validate operations, find breaking changes, look for similar types, schema coverage

- schemaを分析して色々できるやつ
- リリース時に前のバージョンと比べてbreaking changeがないか確認するとかで使えそう
- 大規模開発とか公開しているAPIのリリースノート作成など、使い所はたくさんありそう

- GithubActionも公開されている
https://github.com/marketplace/actions/graphql-inspector

## @graphql-tools/mock

https://www.graphql-tools.com/docs/mocking

- モックライブラリ
- テストの時や、resolverが完成していないけどフロントの開発をしたい時などに使えそう

## graphql-code-generator

https://www.graphql-code-generator.com/

- 色んなファイルに書かれたschemaを一つに統合したり、schemaファイルから様々なコードファイル(typescriptの型定義ファイルとか)を生成できる
- 様々なpluginが用意されているので、生成したいコードに合わせたpluginを使う

https://www.graphql-code-generator.com/plugins

(graphql-code-generatorは有名なので、色んな所で使われてそう)

## graphql-eslint

https://github.com/dotansimha/graphql-eslint

- GraphQLのshemaとoperationにlintを効かせるためのESlintプラグイン
- カスタムルールなどで拡張するのが簡単らしい
> Easily extendable - supports custom rules based on GraphQL's AST and ESLint API

## GraphQL Scalars

https://www.graphql-scalars.dev/

- GraphQLがデフォルトで提供するScalar type以外で汎用的に使えそうなScalar typeを提供するライブラリ
- `NotEmptyString`,`BigInt`,`PositiveFloat`や、`Email`,`PostalCode`などがある
- かゆいところに手が届くものが提供されていて、結構使い勝手よさそう

## おわりに

色々と便利なツールが開発されていました。
モックやlint系のツールは他の場所でも開発がされていそうだけど、
必要になったときはGraphQL Toolsも候補にいれていいかもしれないです。
HyperionのデバッグメニューアイテムをJetpack Composeで作る

ComposeViewを使えばJetpack ComposeでViewがかけるのでHyperionのデバッグメニューのアイテムをJetpack Composeで書くことができる。
Android Viewだとデバッグ用にlayoutを用意する必要があったりして利便性が悪かったが、Jetpack Composeでかけるとコードだけなのでスッキリ書くことができた。
Columnで作ったけども、BoxでもRowでも別に問題はなさそうなきはするのでこれで好きなレイアウトのデバッグメニューが作り放題！

``` kotlin
@AutoService(Plugin::class)
class DebugMenuPlugin : Plugin() {
    class PluginModuleImpl : PluginModule() {
        override fun createPluginView(layoutInflater: LayoutInflater, parent: ViewGroup): View =
            ComposeView(parent.context).apply {
                setContent {
                    Column(
                        modifier = Modifier
                            .height(131.dp) // 既存アイテムに合わせたサイズにする
                            .fillMaxWidth()
                            .clickable(
                                interactionSource = remember { MutableInteractionSource() },
                                indication = rememberRipple(bounded = true),
                                onClick = {
                                    // ここで実際のデバッグ処理を書く
                                    Toast.makeText(parent.context, "デバッグメニュー", Toast.LENGTH_LONG).show()
                                },
                            )
                            .padding(16.dp),
                        verticalArrangement = Arrangement.Center,
                    ) {
                        // ここにレイアウトを書く
                        Text("デバッグメニュー")
                    }
                }
            }
    }

    override fun createPluginModule() = PluginModuleImpl()
}
```
Qiitaで気軽に記事を投稿できるようになるためのTips

[Qiita株式会社 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/qiita)（2）の22日目の担当は、CX向上グループの@xrxoxcxoxです！

https://qiita.com/advent-calendar/2021/qiita

## この記事の概要

意気込んで記事を書こうとしても「何を書いたら良いんだろう……」と悩んでしまう方をよく見ます。
分かります。記事のネタってぽいぽい浮かぶものじゃないですよね。

そんな悩みを解放すべく、できるだけ気軽に記事を投稿する（＝アウトプットを増やす）ためのTipsを書いてみました。

## 流れ

1. 前提：なにかしらのものを作る
1. どこかで苦労するので、スクリーンショットを撮る or エラー内容をコピーしておく
    1. Qiitaの下書きを開いて、簡単な説明とともにスクショやエラーメッセージを添付しておく
1. 頑張って開発して、上手く動いたらそれもスクリーンショットする
1. 一連の流れをまとめる

### 前提：なにかしらのものを作る

さすがに無から有を生み出すことはできませんから、何かを作っている前提です。
もちろん、だいそれたものでなくてもOK。

GASやVBAを用いた、ちょっとした業務効率化ツールでも、趣味で作っているプロダクトでも、業務で書いているコードでも、何かがあれば大丈夫です。

### どこかで苦労するので、スクリーンショットを撮る or エラー内容をコピーしておく

ものをつくっているのに、初めから全てが上手くいくわけがありません。
大なり小なり苦労がやってきます。

しかし大変な場面に遭遇したときこそむしろチャンス。

コンソールに流れるエラーや崩れた画面、それらをスクリーンショットに収めるかエラー文をコピーして保存しておきましょう。

私はデスクトップに「次のQiita記事用」とか適当な名前をつけたフォルダを作成し、雑多に保存しています。
どんなときに発生した画面 or エラー文なのかもセットで記録しておくと更にGOOD。

後から再現しようと思っても何故かおきないとか、一度上手くいったのにもう一度エラーを撮影するためだけにコミットを遡るとか、面倒なのでなかなかやれません。
リアルタイムで記録しておくのが手間が少なくておすすめです。

#### Qiitaの下書きを開いて、簡単な説明とともにスクショやエラーメッセージを添付しておく

画像やテキストファイルとして保存しておくと後から訳が分からなくなりそう……という場合は、この段階でQiitaの下書きに保存するのも良いと思います。

時系列で画像やエラー文を載せて、およその見出しをつければ振り返りもしやすいのではないでしょうか。

ちなみにこの段階で文章にこだわる必要は全くありません。
ただ、説明を多少丁寧に書いておくと後から肉付けするだけで良くなります。

### 頑張って開発して、上手く動いたらそれもスクリーンショットする

エラー内容が変わったとか、上手く動いたとか、そういう変化があればスクリーンショットを撮って適宜保存しておきます。

また、参考にしたURLなどもこの時点でメモしておくと良いでしょう。

### 一連の流れをまとめる

完成してから振り返れば当初どこが間違っていたのかも明らかになっているはず。

最初はどんなミスをしていて、どんな検索をしたらどんな資料を見つけて、どのように動くようになったのか……をまとめていきます。

この書き方のメリットは、自然と実際の開発内容に基づくことです。
あなた自身の振り返りとしても、似たような技術スタックで開発している人にとっても、どちらにとっても役立つ記事になりやすいでしょう。

## まとめ

- 記事を書こう！とすると難しい
- 備忘録をつけておいて、後から文章の体裁だけ直す方が楽
- かつ、実際の作業に基づいた記事が書けて良い感じ
Amazon Linux 2022（プレビュー版）が発表されました

Amazon Linux 2022のプレビュー版が発表されましたので紹介したいと思います。

## Amazon Linux 2022について

Amazon Linux 2022は、2021年11月にAWSより発表されたAmazonの新しい汎用 Linux for AWS です。
AL2022以降は新しいAmazon Linuxのメジャーバージョンが 2 年ごとに利用可能になり、各バージョンは5年間サポートされるとのことです。また、四半期ごとのマイナーリリースも含まれるようです。さらに今回のAL2022ではAmazon Linuxパッケージリポジトリを特定のバージョンにロックする機能があるようです。

以下公式

> Today, we are announcing the public preview of Amazon Linux 2022 (AL2022), Amazon's new general purpose Linux for AWS that is designed to provide a secure, stable, and high-performance execution environment to develop and run your cloud applications. Starting with AL2022, a new Amazon Linux major version will be available every two years and each version will be supported for five years. Customers will also be able to take advantage of quarterly updates via minor releases and use the latest software for their applications. Finally, AL2022 provides the ability to lock to a specific version of the Amazon Linux package repository giving customers control over how and when they absorb updates.

https://aws.amazon.com/about-aws/whats-new/2021/11/preview-amazon-linux-2022/?nc1=h_ls


## Amazon Linux2022の注目すべき機能

■予測可能な2年間のメジャーリリースサイクルと長期サポート
AL2022以降、Amazon Linuxの新しいメジャーバージョンは2年ごとにリリースされ、5年間の長期サポートが付属します。

■頻繁で柔軟な更新
標準サポートフェーズ（2年間）中に、四半期ごとにマイナーバージョンの更新を受け取り、セキュリティ更新、バグ修正、および新機能をお客様に提供します。

■セキュリティ体制の改善
AL2022には、顧客が一般的な業界ガイドラインを簡単に実装できるようにする事前構成済みのセキュリティポリシーが含まれています。

■リポジトリのロック
Amazon Linux 2022を使用すると、顧客は更新を選択する方法とタイミングを制御でき、AmazonLinuxリポジトリの特定のバージョンだけでなくメジャーバージョンとマイナーバージョンもロックできます。

■カーネルライブパッチ
Amazon Linux 2022には、カーネルライブパッチ機能が含まれています。これにより、再起動やダウンタイムなしで、Linuxカーネルの重大で重要なセキュリティの脆弱性にパッチを適用できます。[プレビューでは利用できません]

など


## AmazonLinux2022の起動

AWSマネジメントコンソール上からインスタンス起動の画面に行き、コミュニティAMIのところで「al2022」と検索すると出てきました。こちらから起動が可能のようです。
![2021-12-23_22h46_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2400843/c05615de-aea6-0b8c-1664-3e2095dcb150.png)

## AmazonLinux2との違い、注意点

・デフォルトでSELinuxが有効になっている。
・amazon-linux-extrasが使用できなくなっている。
・SSMエージェントがインストールされてない。（いずれ導入されるかと思われます。）
などなど

## まとめ

以上簡単ではありますが、Amazon Linux 2022の紹介でした。
プレビュー版ですのでSSMエージェント等含め今後追加、改善される部分もあるかと思います。
今後、また新たな情報があれば紹介したいと思います。
（ちなみに現行のAmazonLinux2のサポートは2023年6月末までのようです。）
「PHP Warning: PHP Startup: Unable to load dynamic library 'curl' 」の対処方法

#はじめに
Windowsサーバーで　laravelを動かすときに、apacheのログファイル(`C:\Apache24\logs配下`)に警告が出たため、その対処法をまとめます。


#環境
- windows server 2022
- apache:2.4.51
- php:8.1.0
- composer: 2.1.14
- laravel 8.7

#エラー内容

```log:\Apache24\logs\error.log
PHP Warning:  PHP Startup: Unable to load dynamic library 'curl' (tried: c:\\php8\\ext\\curl (\xe6\x8c\x87\xe5\xae\x9a\xe3\x81\x95\xe3\x82\x8c\xe3\x81\x9f\xe3\x83\xa2\xe3\x82\xb8\xe3\x83\xa5\xe3\x83\xbc\xe3\x83\xab\xe3\x81\x8c\xe8\xa6\x8b\xe3\x81\xa4\xe3\x81\x8b\xe3\x82\x8a\xe3\x81\xbe\xe3\x81\x9b\xe3\x82\x93\xe3\x80\x82), c:\\php8\\ext\\php_curl.dll(\xe6\x8c\x87\xe5\xae\x9a\xe3\x81\x95\xe3\x82\x8c\xe3\x81\x9f\xe3\x83\xa2\xe3\x82\xb8\xe3\x83\xa5\xe3\x83\xbc\xe3\x83\xab\xe3\x81\x8c\xe8\xa6\x8b\xe3\x81\xa4\xe3\x81\x8b\xe3\x82\x8a\xe3\x81\xbe\xe3\x81\x9b\xe3\x82\x93\xe3\x80\x82)) in Unknown on line 0
```

ダイナミックライブラリの`curl`を読み込めませんと出ていますね。
エラー内容の`c:\\php8\\ext\\curl `と`c:\\php8\\ext\\php_curl.dll`が読み込まれていないということで、PATHが異なる可能性があります。

#対処法
まず、php.iniを修正します。

```ini:php.ini
;extension=php_curl.dll

↓

extension=php_curl.dll
```

<br>

次に、`php_curl.dll`と`libssh2.dll`を移動させます。

##php_curl.dllを移動
`C:\php8\ext`配下の`php_curl.dll`を `Windows\system32`配下に移動


##libssh2.dllを移動
`C:\php8`配下の`libssh2.dll`を`　Windows\system32`
に移動

場合によっては、上記に加えて、

`libssh2.dll`を`　C:\Apache24\bin`に**コピー**するとよい場合もあります。

#dllファイルとは
ちなみに`dll`とは、Windowsのプログラムファイルの種類の一つで、プログラムを動かすときに合体させる、プログラムの部品ファイルのことです。
`dll`単体は、それ自体は単体で実行することはできず、実行可能ファイル（`exeファイル`など）が起動する際に自動的に連結されてメモリ上に展開されます。

https://wa3.i-3-i.info/word11024.html
ブレイクダウンに爆発力を加える音を作る

世間で流れているメタルコヤやデスコヤのブレイクダウンのあの爆発力が欲しくなって作った。
DAWさえありゃ誰でも簡単に作れることに気付いて〇〇コヤ系の音楽って金も技術もいらないからいいなあって思った。

#必要なもの
■DAWソフト
　→なんでもいいです。紳士淑女なら全員持ってるはずだけど無料で使えるやつは以下リンクより。
　　・Cakewalk BandLab(https://www.bandlab.com/?lang=ja)
　　・REAPER(https://www.reaper.fm/)

■ガラスが割れる音
■銃声
　→上記2つの音はロイヤリティフリーの効果音サイトから適当に落とせばいいです。
　　リアリティ追及してモノホンを録音するもよし。コスパゴミだからおすすめはしない。
　　オススメの効果音サイトは以下リンクより。
　　・https://sonniss.com/gameaudiogdc

#つくりかた
1,DAWを開いて新規プロジェクトを作成する。
　たぶん一番大変な工程ですね。がんばるんば。

2,「ガラスが割れる音」と「銃声」をそれぞれ別のトラックでインポートする。

3,波形を見て音の頭を揃えて適当に音量調節。
　クオンタイズ値を1/128とかにするとまあまあきっちり合わせられるよ。

4,マスタートラックにリミッターをかける。
　割れるくらい爆音にしていいです。ほら、世のコヤ系って音割れしてるの多いでしょ？

5,マスタートラックのボリュームを下げる。
　オケに混ぜる前提だから下げといたほうが楽だよっていう経験談。

6,書き出して完成。
　オケに混ぜたときにイコライザー調節はすればいいです。
　プロジェクトを保存するかはお好きにどうぞ。まあこんなん秒で作れるから保存する価値はないね。

#実用例
https://www.youtube.com/watch?v=6cq_SmnK8VQ

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

https://youtu.be/5dqgq_xJZyo

#しまった
有用な記事を書いてしまった。
C#でも名前付きキャプチャを使う Named Group

# 背景

すっかり忘れてて、C# で使おうとしたら、意外に参照方法に手間取ったための備忘録

# 概要

基本はこの記事へどうぞ。

https://qiita.com/jnchito/items/cceb669cb06fc044f411

# 実際の使用例
LinqPad での利用例
# Match

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/007165be-38cc-ada2-d3ca-be8f15ffa551.png)

```c#:Match
	displayName.Dump("<<< displayName >>>");
	var pattern = @"(?<FamilyName>\w+)\.(?<GivenName>\w+)@(?<DomainName>.+)";
	var Match = Regex.Match(displayName, pattern);
	
	if (Match.Success){
		Match.Groups["FamilyName"].Value.Dump("FamilyName");
		Match.Groups["GivenName"].Value.Dump("GivenName");
		Match.Groups["DomainName"].Value.Dump("DomainName");
	}
```

# Matches
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/a07e9087-b966-bbb0-af89-bcf2cf324367.png)

```C#:Matches
	var source = "<code>// hage hage </code>\n<code>public string hagehage {get; set;}</code>";
	var pattern = @"<(?<CodeTag>code)>(?<Source>.*)</\k<CodeTag>>";
	var Matches = Regex.Matches(source, pattern);

	foreach (Match match in Matches){
		match.Value.Dump("<<< Value >>>");
		if (match.Success){
			match.Groups["CodeTag"].Value.Dump("CodeTag");
			match.Groups["Source"].Value.Dump("Source");
		}
		else
		{
			"Not Found!".Dump();
		}
	}
```

# keyword

how to use named group of regular expression
[小ネタ] 個人的にVSCodeに入れておいたほうが良いextension

これは「[「はじめに」の Advent Calendar 2021](https://adventar.org/calendars/7037)」23日目の記事です。

## VSCodeとは

Microsoftが開発している、ソフトウェア開発用エディタです。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

オンラインエディタもあります。

https://vscode.dev/

## extension

VSCodeの魅力は、なんといってもextensionという拡張機能を自由に追加でインストールすことでカスタマイズ出来ることではないでしょうか。
自分でextensionを作成し、マーケットプレイス公開することも出来ます。

## 個人的にインストールしているextension(プログラム言語系以外)

※細かい設定方法は記載しません。
※言語系のextensionは記載しません。

### Background

https://marketplace.visualstudio.com/items?itemName=shalldie.background

エディタの背景画像を自由に変更できます。好きなキャラクターや画像を表示しておくことで心安らかに開発できます。

### GitHub Pull Requests and Issues

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

GitHubに行かなくても、PullRequestの一覧やレビュアーとしてアサインされたPullRequestが見れます。
差分を見たり、チェックアウトしたり、PullRequestの内容を編集したり出来ます。

### Git Graph

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

SorceTreeや`git log --graph` のようにGitのブランチやコミット履歴をグラフ表示できます。

### GitLens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

変更履歴がインタラクティブに把握可能。 
履歴を1つずつ追う機能や、コード中にインラインで表示したり、ポップアップで表示したりBlameできたり、Gitのコミット履歴に関する便利機能の集合体。最初は戸惑うけどなれると便利。

### IntelliJ IDEA KeyBindings

https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings

IntelliJのキーバインドセットに変更してくれます。VSCodeの使い勝手がIntelliJっぽくなります。
~~IntelliJを使えばよいのに~~

### Markdown Preview Github Styling

https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles

Githubっぽくマークダウンのプレビューを表示してくれます。

### Marp for VSCode

https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

marp使うので。

### Path Autocomplete

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

ファイルやパスを補完してくれます。
importとかリソースファイルを読み込みを書くときに便利

### Icon Theme

個人的にIcon系のテーマはデフォルトではなく、なにかいれたほうが良いと思います。

一覧は↓から

https://marketplace.visualstudio.com/search?term=tag%3Aicon-theme&target=VSCode&category=All%20categories&sortBy=Relevance

### file-icons

https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons

自分はこれを利用しています。
colorelessテーマがあるので、アイコンの形だけモダンなものに変わります。

### Material Icon theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

むっちゃカラフルになるので、目が痛くなる人もいるかも知れない。

###### *Code Spell Checker*

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

必須。LL言語では必須。特にRubyでは必須。(大事なことなので3回言いました)
何が起きたかって、想像通りのことがおきましたよ。Typoって怖いよね・・・

参考: 

https://zenn.dev/junki555/articles/7bc79cd35191bd
ライフサイクルについて書いてみる【React】

##ライフサイクルとは
ライフサイクルとは、Reactのコンポーネントが生まれてから成長し、最終的に死ぬまでの一連の過程のことを表す。ライフサイクルは以下の3種類が存在する。

###Mounting
コンポーネントが画面に描画されるまでの期間。
アプリケーションの表示を作っていくタイミングで、コンポーネントがレンダリングされる。

###Updating
コンポーネントが変更される期間。
コンポーネントの中で状態が変化したタイミング。

###Unmounting
コンポーネントが破棄される期間。
別ページに移動やコンポーネントがいらなくなったタイミング。

![スクリーンショット 2021-12-22 21.40.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1155100/1479a910-3fd6-8ffb-1248-21caf26aa2f2.png)

###useEffectとは
レンダリングによって引き起こされるフック。
Reactではコンポーネントの変化が起こると、return文の中身が再描画される仕組みになっている。
再描画されたタイミングで、何か実行したい処理がある場合に、useEffectを使うことになる。

例

``` Count.tsx
import { useState, useEffect } from 'react';

export const Counter = () => {
  const [count, setCount] = useState(0);

  const countUp = () => {
    setCount((prevState) => prevState + 1);
  };

  const countDown = () => {
    setCount((prevState) => prevState - 1);
  };

  useEffect(() => {
    console.log('count: ', count);
  });

  return (
    <div>
      <p>カウント数</p>
      <button onClick={countUp}>+</button>
      <button onClick={countDown}>-</button>
    </div>
  );
};

```

####リロードしたタイミング（マウント後の処理）

初回のレンダリングが終わった後に、useEffectが実行される。(レンダリング後の処理)

![スクリーンショット 2021-12-23 22.56.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1155100/ac2161cc-2674-a2cb-0680-745e9431ee94.png)



####更新後の処理
\+ or - ボタンを押すと、stateが変更され、レンダリング後にuseEffectの中身が実行される。

![スクリーンショット 2021-12-23 22.58.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1155100/bd2fe6dd-6a05-2c2b-2d57-db3d3f084374.png)



####第二引数によって、実行タイミングを制御できる

```Count.tsx
// 毎回実行
useEffect (() => {
    console.log('count: ', count);
})

// 初回レンダリングのみ実行
useEffect(() => {
    console.log('count: ', count);
}, [])

// triggerが変更されるたびに実行
useEffect(() => {
    console.log('count: ', count);
}, [trigger])

// trigger1かtrigger2が変更されるたびに実行
useEffect(() => {
    console.log('count: ', count);
}, [trigger1, trigger2])

```

簡単ではありますが、以上！
【React】 `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.の対処法

<h2>症状</h2>
ReactでMaterialUIのAPPbarを使用したときに以下の警告が表示されました。

翻訳すると、「`input`の` value`propはnullであってはなりません。空の文字列を使用してコンポーネントをクリアするか、制御されていないコンポーネントの場合は「未定義」を使用することを検討してください。」でした。
わかりやすい。。。

```terminal:warn
 `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
```

以下ソースです。(元ソースは色々入れてしまったので、MaterialUIのApp Bar with a primary search fieldから一部抜粋で)
searchfieldで関係ありそうなところのみ

```react:App.js
export default function PrimarySearchAppBar() {
  const SessionUserState = useContext(SessionState);
  const SessionUserDispatch = useContext(SessionDispatch);
  const [searchValue, setSearchValue] = useState(SessionUserState.searchWord);

  return (
    <div className={classes.search}>
      <div className={classes.searchIcon}
        <SearchIcon />
      </div>
      <InputBase
        placeholder="Search foods…"
        value={searchValue}
        onKeyPress={(event) =>
          onKeyPressSerchWord(event)
        }
        onChange={(event) => {
          setSearchValue(event.target.value)
        }
        }
        classes={{
          root: classes.inputRoot,
          input: classes.inputInput,
        }}
        inputProps={{ 'aria-label': 'search' }}
      />
    </div>
  )
}
```

<h2>解決策</h2>
このwarnではinputにnullが入ってしまう瞬間があったため、発生したようです。
今回の例だと、Reducerから値を受け取るまでにinputにnullが入る瞬間があったため、nullの時は空文字が入るように修正して解決しました。

```react:App.js
export default function PrimarySearchAppBar() {
  const SessionUserState = useContext(SessionState);
  const SessionUserDispatch = useContext(SessionDispatch);
  const [searchValue, setSearchValue] = useState(SessionUserState.searchWord === null ? "" : SessionUserState.searchWord);

  return (
    <div className={classes.search}>
      <div className={classes.searchIcon}
        <SearchIcon />
      </div>
      <InputBase
        placeholder="Search foods…"
        value={searchValue}
        onKeyPress={(event) =>
          onKeyPressSerchWord(event)
        }
        onChange={(event) => {
          setSearchValue(event.target.value)
        }
        }
        classes={{
          root: classes.inputRoot,
          input: classes.inputInput,
        }}
        inputProps={{ 'aria-label': 'search' }}
      />
    </div>
  )
}
```

<h2>参考</h2>

https://qiita.com/kenbu/items/57fcc2332ab602d80804

https://mui.com/components/app-bar/#app-bar-with-a-primary-search-field
Windows で Linux + python な環境を整える

# この記事の内容

windows 10 で wsl が無い状態から、wsl入れて anyenv, pyenv, python をインストールしたのでメモします。
後々、python 以外もインストールしたいので、anyenv を入れてます。



■ 自分の環境
Windows10 OS ビルド 19042.1415

# wsl のインストール

Power shell(管理者権限)で↓を実行後、Windows 再起動する。

```sh:powershell
wsl --install
```

https://docs.microsoft.com/ja-jp/windows/wsl/setup/environment


# wsl のセットアップ

再起動すると wsl が起動する(はず)ので、ユーザー名とパスワードを入力する。
ユーザー名とパスワードは wsl内専用で、sudo するときに使う。

パッケージのアップグレードをしておくとよさそう。

```sh:wsl
sudo apt update && sudo apt upgrade
```

あと、Microsoft Store から windows terminal 入れると、見た目がかっこよくなって、複数タブが使える。
デフォルトだとベルが鳴るが、設定>既定値>詳細設定 の ベル通知スタイル でOFFにできる。

https://docs.microsoft.com/ja-jp/windows/wsl/install

# anyenv のインストール

公式の「Manual git checkout」の手順でいけた。

https://github.com/anyenv/anyenv

# pyenv のインストール

```shell:wsl
anyenv install pyenv
```

# python のインストール

2021年12月23日時点で最新の 3.10.1 をインストールする。

```sh:wsl
pyenv install 3.10.1 
```

を実行すると、ひとまずエラーで終わる。

GCC やら openssl やら色々足りないようなので、↓でインストールする。

```sh:wsl
sudo apt install build-essential libssl-dev libbz2-dev libsqlite3-dev libreadline-dev
```

補足：libbz2-dev, libsqlite3-dev, libreadline-dev はエラーメッセージ出るものの、無くてもインストール自体は完了した。

# 感想

wsl はホントに簡単に入れられた。こんなにすぐ、Linuxな環境にできるなら、もっと早くやればよかった。
起動も早いし、特に動作が遅い感じも無い。VS Code とか explorer も wsl から起動できるし、今のところ、不満なし。
HTTP基礎③

# HTTPSの利点

HTTPSは`HTTP over SSL/TLS`の略。
HTTPSがWebサイトの安全性を守るための仕組みについてまとめます。

### 1. データを暗号化して送る
WebブラウザからWebサーバーへ暗号化したデータを送ります。万が一データを盗聴されても内容が分かりません。

### 2. 改ざんされたデータを検知する
送信するデータから一意的な短いデータ（＝ハッシュ値）を算出し、データと一緒にWebサーバーへ送信します。続いて送信する前のデータから算出されたハッシュ値と送信した後のハッシュ値を比較します。
もし送信する過程でデータが改ざんされていると、データを送信する前後でハッシュ値がそれぞれ異なるので、二つのハッシュ値を比較することでデータ改ざんを検知することができます。
またあるデータからハッシュ値を算出することを`メッセージダイジェスト`と呼びます。

### 3. Webサイトのなりすまし防止
本物そっくりのWebサイトを使ってユーザーから個人情報やお金を騙し取るケースがあります。
そういったWebサイトのなりすましを防止するために、Webブラウザは、Webサイトへ接続する時にWebサーバーから提供される`SSLサーバー証明書`を検証します。ユーザーはSSLサーバー証明書からWebサイトを運営する会社を確認することができます。


# 参考
[イラスト図解式 この一冊で全部わかるWeb技術の基本](https://www.amazon.co.jp/%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E5%9B%B3%E8%A7%A3%E5%BC%8F-%E3%81%93%E3%81%AE%E4%B8%80%E5%86%8A%E3%81%A7%E5%85%A8%E9%83%A8%E3%82%8F%E3%81%8B%E3%82%8BWeb%E6%8A%80%E8%A1%93%E3%81%AE%E5%9F%BA%E6%9C%AC-%E5%B0%8F%E6%9E%97-%E6%81%AD%E5%B9%B3/dp/4797388811)
動的計画法での配列使い回しのイメージ

## はじめに
- 以下の記事を読んで、動的計画法での配列使い回しのイメージが腹落ちしていなかったので具体例で考えた
    - [LIS でも大活躍！ DP の配列使いまわしテクニックを特集](https://qiita.com/drken/items/68b8503ad4ffb469624c)

## 0-1ナップサック問題での配列使い回し
- ナップサック問題でdp配列を使い回すことを考える
- 各商品を高々1個までしか入れられないとき、更新後の値を読まないように工夫する必要がある
    - weightの逆順に読むか
    - 2個の配列を使いまわすか
- イメージ  
![Screenshot at 2021-12-23 22-05-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438181/70316ee2-ab78-8e1b-96a9-f97fd35f71ab.png)

## 0-N ナップサック問題での配列使い回し
- 各商品を2個以上入れられるとき、更新後の値を読む必要がある
- イメージ  
![Screenshot at 2021-12-23 22-34-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438181/9438bd76-8b70-75e1-8513-08dba7870df6.png)
ひよっこエンジニアが今作りたいもの

都内の自称自社開発会社でWebエンジニアとして働いています。
業務の開発時間が限られている(保守運用が7割)ので、開発時間が短くなぜエンジニアになったんだろうとふと思いました。そこで、改めて考えてみると「作りたいものを作るためにエンジニアになった」と思うのでここに2022年度に開発したいものをざっくりと書いていきます。

## 前提
・お金をかけずに(Herokuとか)モノづくりをする。
・まずは手を動かして、3つくらい作ったら同期エンジニアを誘って拡張したり、開発スピードをあげたい。
・学びたいものベースでもいいし、好きなもの(競馬とか株とか)でもいい。
・小さくイテレーションを回す。1週間単位でデプロイする。


## アイディア集
### 絶対に勝てる競馬レース探し当てアプリ
#### 概要
オッズの歪みを利用して絶対に勝てるレースを探し出すシステムを作る。

#### 結果
実際に下記を参考に開発したが、地方競馬で1ヶ月に1度くらいしか絶対に勝てるレースが存在しなかったので、実用的ではないと判断した。

実際に作ったもの↓↓
https://keibaapp.herokuapp.com/

参考
>https://qiita.com/naonao_py/items/019b15876e3ef02d92f
https://www.umameshi.com/info/0011.html

### React NativeでNews App開発
#### 概要
Udemyを受講して成果物を作る。
https://bizmatesjp.udemy.com/course/react-native-first-step/learn/lecture/18327308#reviews


### 株アプリ~ある特定の条件を満たしたら通知してくれるBot~
#### 概要
Twitterで話題になっているティッカーシンボルなどの変化率上昇ランキングとか。地域ごとの話題になっているティッカーシンボル自動通知Botとか。
S&P500 などのインデックスに採用されている銘柄の中で言及されるのが一番少ないティッカーシンボル自動通知Botとか。
理由は、誰もみていない銘柄の方がノーリスクだから。誰よりも早く乗ることが大事。
(株は、焼け野原になった後が一番安全なので)


### GraphQLを使った開発
#### 概要
シンプルに勉強したい。


### 仮想通貨ニュースまとめサイト
#### 概要
仮想通貨のニュースまとめサイトってあるのかな？？まだまだ勝機はありそう。


### 自作FW作成
#### 概要
FWについて勉強したいなと思ったことがきっかけ。なんか内部のことあまり知らないけど(どの順番に読み込まれて、どう実行されているのか等)、いい感じで動いてるなぁと感謝しています。

### Alexaとラズパイの連携して生活に密着したアプリの開発
#### 概要
ラズパイの経験のためにAlexaと連携させて、家に遊びに来る人をあっと言わせたいというモチベーション。

### ⑦家族と今日のご飯何作って欲しい？を共有するアプリの開発
#### 概要
2021年2月から同棲を開始するので、「今日何作る〜？何食べたい〜？」というコストを減らすため。
何なら、気に入った料理をリクエスト、お気に入り保存して定期的に作って欲しいというモチベーションのために開発したい。

#### 付属アイディアや機能
- 母の味よ、永遠に(仮)
- 気に入った料理のレシピをリクエスト


### プログラミング言語をハイブランドに例えてみた。
#### 概要
プログラミング初学者のために数あるプログラミング言語を位置づけしてみるアプリ。
いろんな言語があって、歴史や特徴が覚えきれないので、ハイブランドのような誰もが知るモノに例えてみることで、記憶に定着させようというモチベーション。
Windows11にWSL2+Python+GPU環境を構築

# 前提条件

|  | 詳細 |
|---|---|
|OS|Windows 11 Home|
|CPU|AMD Ryzen 7 4800HS with Radeon Graphics 2.90 GHz|
|GPU|NVIDIA GeForce RTX 2060|

# 手順

## CUDA on WSL インストール

[CUDA on Windows Subsystem for Linux (WSL)](https://developer.nvidia.com/cuda/wsl)からWSL用のCUDAドライバーをダウンロード

![image-20211127234900696.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222701/d051c88b-fdf3-e77b-1313-a88e77ecc7f9.png)

インストーラーを起動し、ドライバーのみインストールを実施。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222701/82e2c2a4-a698-3bd3-f369-638669d8008b.png)

## WSL2セットアップ

Windows Terminalを管理者権限で起動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222701/063e078e-6ea8-cb52-b611-da65020d5462.png)


下記のコマンドを実行し、ubuntu 20.04をインストール

```bash
wsl --install -d Ubuntu-20.04
```

ユーザー名とパスワードを設定

```bash
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: （Ubuntu側で使用するユーザー名を入力して[Enter]）
New password:（パスワードを入力して[Enter]。※表示されません）
Retype new password:（同じパスワードを再入力し[Enter]。※表示されません）
```

aptのアップデート

```bash
sudo apt update && sudo apt -y upgrade
```

   

## CUDAインストール

下記のコマンドを順に実行し、CUDAをインストールする。
※ 本環境はPytorch 1.10用にCUDA 11.3をセットアップする。

```bash
wget https://developer.download.nvidia.com/compute/cuda/repos/wsl-ubuntu/x86_64/cuda-wsl-ubuntu.pin
sudo mv cuda-wsl-ubuntu.pin /etc/apt/preferences.d/cuda-repository-pin-600
wget https://developer.download.nvidia.com/compute/cuda/11.3.0/local_installers/cuda-repo-wsl-ubuntu-11-3-local_11.3.0-1_amd64.deb
sudo dpkg -i cuda-repo-wsl-ubuntu-11-3-local_11.3.0-1_amd64.deb
sudo apt-key add /var/cuda-repo-wsl-ubuntu-11-3-local/7fa2af80.pub
sudo apt update && sudo apt -y upgrade
sudo apt install -y cuda
```

環境変数を設定

```bash
cat << 'EOS' >> ~/.profile

#Added by install-cuda-on-wsl.sh
#Ref: https://astherier.com/blog/2021/07/windows11-cuda-on-wsl2-setup/
export PATH=/usr/local/cuda-11.3/bin${PATH:+:${PATH}}
#Added: end

EOS
```



## Git セットアップ

最新版をインストール

```bash
sudo apt install git
```

ユーザ名とメールアドレスを設定

```bash
git config --global user.name "your name"
git config --global user.email "your email"
```

SSHを設定

```bash
ssh-keygen -t rsa
chmod 600 ~/.ssh/id_rsa
```

## pythonセットアップ

下記のコマンドを実行し、Python3がインストール済みであることを確認

```bash
python3 --version
```

   

下記のコマンドを実行し、pipとpipenvをインストール

```bash
sudo apt install python3-pip
pip install pipenv
```

   

## 動作確認

下記のコマンドで動作確認用の環境を作成

```bash
cd ~
mkdir project && cd project
mkdir pytorch_sample && cd pytorch_sample
   
#Pytorchサンプルプログラム ダウンロード
git clone https://github.com/pytorch/examples.git
 
#実行環境作成
pipenv --python 3
pipenv shell
   
#pytorchインストール
pip3 install torch==1.10.0+cu113 torchvision==0.11.1+cu113 torchaudio==0.10.0+cu113 -f https://download.pytorch.org/whl/cu113/torch_stable.html
   
# 実行
cd examples/mnist
python3 main.py --epochs 2
   
# GPUが使えるかどうかのみ確認
python
import torch
torch.cuda.is_available()
```
Google Data PortalでGoogleマップを使い、「都道府県別転入・転出者数」の傾向を「バブル」で視覚化

##住民基本台帳人口移動報告を利用

「Google Data Portal」でGoogleマップを使えるようになっていました。
[「住民基本台帳人口移動報告 2021年（令和３年）10月結果」](https://www.stat.go.jp/data/idou/sokuhou/tsuki/index.html)（総務省統計局）のデータを使い、「都道府県別転入・転出者数」の数値を県別にマッピングしてみました。

**※この記事を編集中に「11月結果」が発表されたので最後にそのグラフも併載しました。**

使ったExcelデータは以下のような体裁です。
このままでは使えないので、どう加工したかも記載します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/da2114fe-4e68-0ccb-040f-9edbd635d788.png)

まず、今回はGoogleスプレッドシートでにコピー&ペーストします。
「Google Data Portal」に取り込みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e697e9c6-ab11-8d72-ba2b-d5bb0f80c29f.png)

この際、「先頭行をヘッダーとして使用する」のチェックを外します。
チェックした状態だと、「表2・・・」という文字列だけがヘッダーとして認識されます。
外すことで、最初のキャプチャの通りA列からK列までのデータとして取り込めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/41e6be24-8cdc-a1b7-61eb-0778360c14dd.png)

##データを整形

レポート作成画面に移り、「表」を選び、AからK列を配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/7eb2c61e-9568-8a45-edbb-9b7fd9780550.png)

元のExcelを見るとわかりますが、集計値以外の行は「null」になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/a5edac78-13fc-4ce8-7ccc-9e88ba96943b.png)

「フィルタを追加」で「null」を外し、視覚化できるデータに加工します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/47e565e4-bf8d-f975-991d-91830096ce19.png)

「null」を除外するフィルタを作成し適用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/02e5d005-963e-3731-c2d9-643002c1a1fb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/e8560f00-4b06-9b67-5904-32f891cd8cd8.png)

##バブルマップ（2021年10月結果）

「Googleマップ」を使う「バブルマップ」を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/2bd14d5e-bce5-22f5-bbcd-8f3c9ab1f542.png)

E列の「転入者数前年同月比増減」をマップに割り当てます。
「位置」に都道府県情報が入っているA列を使います。
バブルの大きさと色をは転入者数前年同月比増減のI列の数字で変わるようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/6cb35bb2-0757-fb73-7f62-8e3f4916bf27.png)

前年前月比減の場合、マイナスになりますが、それは表示されません。
転入者が増えた都道府県にだけ「バブル」が表示されるのでですが、この方が増えたエリアが視覚的に把握しやすくなるので、都合よいのでこのまま進めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/0c8d2b27-8489-e56c-851d-f3dd99acd5f6.png)

次にI列の「転出者数前年同月比増減」をマップに割り当てます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/ae73b6c3-bf75-1d62-5c9c-e0f062bb6e60.png)

2つのバブルマップを並べると、転入者増は西側に目立ち、転出者像については北側のエリアにも存在する、という概観が見て取れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/49f1f400-b0cf-0c7d-b8af-e6eda3940eb9.png)

##バブルマップ（2021年11月結果）

冒頭に記載した通り、最新の結果（11月）のバブルマップも作成しました。
11月はこれまでの反動か、プラスが一気に増えている感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143963/20692470-196c-a5e0-82c4-b9de57a30ef7.png)

**了**
[Servicenow]UIポリシー（Script）

#Scriptを用いてのUIポリシーの定義
基礎的なことですが、Scriptを用いてのUIポリシーの定義について書きたいと思います。

Scriptを使わないUIポリシーではセクションを非表示にすることはできません。
Scriptを組めば、セクションの表示／非表示にすることが可能となるなど制御できることが増えます。
セクションとは赤枠のことです。
![セクション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/7d6bc92e-b01b-8567-02ff-81015d4c8af3.png)

##環境
- インスタンスVersion：Rome

##実装
インシデント画面にUIポリシーを定義していきましょう。
インシデント画面からUIポリシーを開きます。
![UIポリシー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/57db8a31-183e-0a4f-172d-df3860debeef.png)

[新規]ボタンを押して、新たなUIポリシーを定義します。
テーブル名を選択し、適用時期セクションで適用したい条件を入力します。
![UIポリシー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/b16d9691-163a-74eb-944a-1829a9553760.png)

一旦保存します。
スクリプトセクションに切り替え、スクリプトの実行にチェックを入れます。
すると、Script入力するフィールドが表示されます。
![UIポリシー3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/5e76cbaf-9a8e-7d19-5eb3-f7a85e76c2b3.png)

以下のような感じでScriptを入力します。
（適用条件セクションの条件を満たした場合に、）
例で書いたのは、[work]セクションを非表示にするというScriptです。
（workセクションは自前で追加したセクションです）
![UIポリシー4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/f9d0574b-fca4-29d0-910d-080b9c5331ce.png)

##検証
インシデント画面を開きます。
UIポリシーで設定した適用時期を満たしていないため[作業]セクションが表示されています。
![UIポリシー5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/969678c0-c906-370b-8cd9-a0ba07e17205.png)

設定した適用条件を満たすようにフォームの情報をいじります。
（私は、「ステータスが"処理中"になったとき」を設定しました）
すると、[作業]セクションが非表示になったのがわかります。
![UIポリシー6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636124/cd2ddb1c-e2fe-3dfc-803d-a2f7ef786129.png)

こんな感じのUIポリシーが定義できました。
ただこれでは実際の運用を考えた時には不十分です。
ステータスが"処理中"から違うステータスになったとき[作業]セクションが表示されるでしょうか？
察しが良い人はどうすれば表示できるかわかると思います。お試しください。
世の中どのくらいGAされているのか可視化するChromeExtension

GA発火を楽しく検証するためのChrome extensionを作成してみました。

## Extension概要
任意のサイトでGoogleAnalyticsに「pageview」または「event」が送信された通信を補足して可視化します。
[可視化イメージ](https://maryco.github.io/gaaa/)

※GoogleAnalyticsへの通信をブロックはしていません。

## 実装仕様
- TypeScriptで実装
- 悪名高い(？) Manifest v3を使用
- パフォーマンスは未考慮
- 動きはJSのanimateとcssとSVGアニメーションを組み合わせ
- ソースコード：https://github.com/maryco/gaaa

## インストール方法
1. アーカイブファイルを[ダウンロード](https://github.com/maryco/gaaa/blob/main/releases/gaaa-0.1.0.zip)する

2. Chromeで「その他のツール」＞「拡張機能」を選択して拡張機能の管理画面を開く
3. 右上の「デベロッパーモード」をONにする
4. 「パッケージ化されていない拡張機能を読み込む」をクリックし、ダウンロードして解凍したディレクトリを選択する
5. 以上で任意のサイトを表示してこの拡張機能を有効化するとGAが(概ね)補足されます。(GAを使用しているサイト例：https://about.google/)
※常に有効化したい場合は拡張機能の「詳細」で「サイトへのアクセス」に「すべてのサイト」を選択してください。
【メモ】プログラマだけでも多少はマシなテストを始めよう

# 背景
- テストエンジニアがいない中、中途半端な知識でテストしているのが辛い。
- テスト設計書もないので、本当にケースが適切か精査が出来ない。

# きっかけ
- プログラマなんだから中身は全て知っている。そんな中、完全なブラックテストをする必要なくない？と思う様になった
    - 必要性があるのは理解しているけど、効率的かつ効果的なケースを作るのは困難
        - 結局ケースが増える
    - それならプログラムの品質を高める方に力を入れたい

# 考え方
- テストの知識がないのだからとりあえずやってカイゼンしていく
- ケースの過不足は気にしなくていいから根拠を示す(ちゃんと設計する)
- ペアワイズ法は必要最低限にする
    - 必要な箇所はわかっているし、自力の精査が難しいものは極力使わない

# やる事

## ドキュメント作成
- テスト方針
- テスト設計
- テスト項目

### テスト方針
- 用語の整理
    - 単体テストとは？
    - 結合テストとは？
    - 外部/内部の違いは？
- 環境ごと(ローカル/DEV/STG/PRD)の制約を明確化
    - 可能な限り商用に近い環境で実施する
- テスト観点の整理
    - 単体テスト
        - 対象レイヤを確定
        - レイヤ跨ぎ以外のスタブ/モックの利用は極力させない
    - 画面テスト
        - コンポーネント種別ごとに必要な観点を明記
    - APIとバッチは後で考える

### テスト設計/項目
- 機能/デバイス/権限 でファイルを分ける
- 設計と項目は1つのファイルで管理する
    - 紐付けはしておきたい

## E2Eテスト
- 全てはやらない
- 必要最低限 +α(重要機能は重めにやる)

## 自動化
- CIツールで `git push` のたびに実行させる

## やらない事リスト
- テスト計画
    - まだ早い
- エビデンス
    - 最後はマルチチェックしてみんなの責任にしよう

# 悩みごと
- 単体テストの設計の作り方と管理方法
【React】Failed prop type: Material-UI: You are providing an onClick event listener to a child of a button elementの対処法

<h2>症状</h2>
MaterialUIのAppBarを使用している際に、以下のエラーが発生しました。
翻訳すると、「失敗したプロップタイプ：Material-UI：ボタン要素の子にonClickイベントリスナーを提供しています。
Firefoxがイベントをトリガーすることはありません。
onClickリスナーを親ボタン要素に移動する必要があります。」でした

```terminal:error
Warning: Failed prop type: Material-UI: You are providing an onClick event listener to a child of a button element.
Firefox will never trigger the event.
You should move the onClick listener to the parent button element.
```

以下、ソースです。

```react:DenseAppBar
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function DenseAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar variant="dense">
          <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" component="div">
            Photos
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
}
```


<h2>解決策</h2>
IconButtonにonClickをねじ込み解決しました。
下記ではconsole.logを入れています。

```react:DenseAppBar
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function DenseAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar variant="dense">
          <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} onClick{console.log("OPEN")}>
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" component="div">
            Photos
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
}
```

<h2>参考</h2>

https://ja.reactjs.org/docs/strict-mode.html

https://mui.com/components/app-bar/
MetaAvatarsSDKトラブルシューティング

# Unity2021にインポートしようとするとdll重複エラーが発生する
公式に対応しているバージョンは2020で、2021で利用しようとすると下記のようなエラーが発生します。
> Multiple precompiled assemblies with the same name Newtonsoft.Json.dll included or the current platform. Only one assembly with the same name is allowed per platform. (Assets/Oculus/Avatar2/Scripts/AvatarEditorDeeplink/Newtonsoft.Json.dll)


> Multiple precompiled assemblies with the same name Newtonsoft.Json.dll included or the current platform. Only one assembly with the same name is allowed per platform. (C:/Users/zachd/Desktop/Projects/VR/Liars_Dice/Library/PackageCache/com.unity.nuget.newtonsoft-json@2.0.0/Runtime/Newtonsoft.Json.dll)

### エラー解消方法
MetaAvatarのUnityパッケージのインポート時にAvatarEditorDeeplinkディレクトリのnewtonsoft.Json.dllのチェックを外すとエラーが発生しなくなります。

![screenshot.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/10689167-c5ab-c4ac-fc66-0f1d83be1a42.png)
開発が進んでいるプロダクトに単体テストを導入するはじめの一歩

この記事は、 [ソフトウェアテストの小ネタ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/software-testing-koneta) の23日目の記事です。

# はじめに
極端に速度を重視したり、開発リソースが不足していたりするなど、さまざまな背景から単体テストコードを導入せずに開発を進めているプロダクトは意外と世にあると思います。

フレームワークを適切に使用しているならまだしも、そうではない場合や、すでに大規模で複雑化したプロダクトの場合は、品質に関して課題意識を持っていてもどこから手をつけて良いか分からないものです。

この記事では、開発が進んでいるプロダクトにどのように単体テストを導入するのが良いか、我々の実践をもとに書いていきます。

# この記事で書かないこと
単体テストそのものについての説明は書きません。例えば以下が該当します。

- 単体テストとは
- 単体テストの目的
- 単体テストのメリット

# 結論
単体テストはただ導入すれば良いのではなく、大きく以下2点を意識して導入ことが重要だと私は考えています。

- 戦略を立てる
- 啓蒙する

それぞれ以下で詳しく書いていきます。

# 戦略を立てる
とりあえず導入する、いきなり完璧な状態を目指すのではなく、戦略をもって段階的に導入していくのが良いです。

### テスト対象のモジュールを決める
いきなり全てのモジュールに対して単体テストを書くのは途方もない作業になります。
なので、最優先で単体テストを導入するモジュールを決め、それ以外は優先順位を下げるといった対応が良いでしょう。

最初はMVVMにおけるModelなど、ドメインに単体テスト対象を絞るのをおすすめします。
ドメインにおける単体テストは品質のモニタリングだけでなく、ドメインのあるべき姿を表現するドキュメントとしての役割を果たすという効果も出ます。
かける工数に対して効果が大きいと考えられます。

### リファクタリングを検討する
単体テストのないプロダクトは、単体テストしづらい設計になっている場合が多いです。
そのため、テストしやすいコードへのリファクタリングも同時に検討した方が良いでしょう。

具体的には、テスト対象としたモジュールに対し以下を実践しました。

- DI(Dependency Injection, 依存性注入)を用いた疎結合化
- 単一責務になるようにモジュールを分割
- グローバルに状態を持つのではなく引数で渡す形にする

また、書籍 [レガシーコード改善ガイド](https://www.shoeisha.co.jp/book/detail/9784798116839) が参考になります。
それに関連して以下の記事も参考にすると良いでしょう。
https://twop.agile.esm.co.jp/mastering-seam-for-unit-testing-574bebaadfcf

# 啓蒙する

### 書いて基準を作る
習うより慣れろ、ということで、まず書いてみてプルリクエストをベースに議論するのは効果がありました。
議論の中で、今のプロダクトにおける落とし所のようなものを決めていきます。

既存機能への影響が少ない新機能の開発をする機会があれば、単体テストを導入する絶好のチャンスです。

### 社内勉強会を開く
社内勉強会を開いて啓蒙するのも効果があります。

我々のチームでは、以下のような勉強会を開いています。

- 技術書の輪読会
   - 目的: チーム内で設計思想の統一をはかる。
   - 実績: [現場で役立つシステム設計の原則](https://gihyo.jp/book/2017/978-4-7741-9087-7) は読了
- プロダクトコードを用いた設計の共有会
   - 目的: 上記で基準として書いたコードを広める。単体テストをどのような思想のもと導入したか共有する。

# おわりに
私が開発に関わっているプロダクトは、とにかく少人数でガリガリコードを書いていくというフェーズが年単位でありました。
ただ、その中で明らかに追加や修正に時間がかかってきていることを実感しました。

みんなが共通の問題意識を持ち協力することで、少しずつですが継続的な改善ができていると感じています。
いろいろ書きましたが、何より重要なのはプロダクトがより良い状態になるには何をすれば良いか考え続けることだと思います。
モーション作成のためのノンリニアアニメーションエディタ

Blenderにはノンリニアアニメーションという複数のアクションを重ねたり
つなぎあわせたりする機能があります。

今回はモーションを作成して　FBXで外部に出力する時に使える機能を中心にとりあげたいと思います
## 用語説明
まず　ノンリニアアニメーションのエディタの各部の名称を説明しておきます
ドープシートと並べてキャプチャしてあります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/b9d15c4c-ba68-f379-c8d0-31cb6140d3d3.png)
画面で　階層になっているのを**トラック**で
トラックの中に並んでる短冊状のものが　**ストリップ**でストリップの中にアクションが入っています
ストリップは　アクションの名前とは別の名前をつけて管理することができます

トラックの上の濃いオレンジ背景の部分は**保留アクション**で
ドープシートでストリップにしていないアクションを編集している時に表示されます
保留アクションの部分にある「アクションをストリップ化」ボタンを押すと　編集中のアクションをストリップにすることができます
保留アクションをストリップ化すると　ドープシートからキーフレームの表示が消えます
## トラック上の操作
ストリップのある部分でTabキーを押すと**ストリップアクションの調整**で
ストリップに利用されているアクションのキーフレームがドープシートに表示されて編集できるようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/d4906420-2a9f-f88c-f233-ade704a2bb8c.png)
トラック名の左の星マークをオンにすると　そのNLAの中でそのトラックのみが有効になって
トラック名の右のチェックボックスをオフにするとトラックが無効（ミュート）にされます

ストリップ選択した状態で　ビューメニューの「プレビュー範囲を自動設定」を実行すると
ストリップのある範囲がプレビュー範囲になります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/e06fb3b2-6644-7e50-226c-f3b34d7a512d.png)
ストリップを繰り返し確認するのに便利です

トラック上で複数のストリップを選択して　追加メニューの「メタストリップを追加」を実行すると
複数のトラックをひとまとまりに扱う状態になります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/e861f98b-1873-ef8e-5856-98adfd8dd833.png)
順番を編集する時に使う他、後に説明するFBX出力で複数のアクションを一つのアクションとして出力できます


## ストリップの設定
NLAエディタのサイドバーのストリップの項目では　ストリップの設定を変更することができます

先の操作で操作中のアクションからストリップを作成した時にはキーフレームのある範囲が全てストリップになりましたが
アクションクリップの「長さを同期」のチェックボックスを外すと　アクションから　開始フレーム　終了で指定した範囲を利用するように設定できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/2ba16e8d-ef53-8dcc-d06c-8ab753624106.png)
開始終了の数字は　中にあるアクションのでのフレームなので　ストリップで時間を移動していると値が違ってくるので注意が必要です
また「再生スケール」で全体の長さを変更することで　動きの速度を変更したり
「リピート」のでストリップを繰り返しするようにも設定できます

アクティブストリップの時間のアニメーションのチェックをオンにすると
アクションの中のどのフレームを使用するか　キーフレームで指定することもできるようになって
スケール等で設定するよりも細かい速度調整ができます


## FBX出力設定
複数あるアクションのうち特定のものだけFBX出力したい場合NLAエディッタに配置する方法があります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/7b5110a8-806a-8322-7795-5d6a46bab9cb.png)
キャプチャの「全てのアクション」チェックを外した状態だと有効なNLAトラックに配置されたアクションが出力され
「NLAエディッタ」のチェックも外すと　全てのストリップが合成されたアクションが出力されます

上のキャプチャで出力したFBXを空の.blendファイルに読み込んだ時のアクション一覧はこうなります
NlaTrack.003のトラックはミュートされているので　トラック上にあるストリップは出力されていません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/61ef6291-2a40-b4d2-9599-eb79f094c166.png)
個々のストリップが　オブジェクト名|ストリップ名と並んだアクション名で出力されています
Unity等でもこういった名称で読み込まれるようです
メタストリップはひとまとまりのアクションと扱われています。

全アクションのチェックが入っていると　NLAストリップも含めた全てのアクションが出力されるので
それと比較すると　かなりすっきりしたデータになるかと思います