OmniAICreator/Qiita-1.07M huggingface dataset:
コンシューマガイドライン資料に出てくる「IARC」とは？

# 概要
ここ１、２年の間でコンシューマの資料や技術情報等で目にする事が増えた**【IARC】**という言葉…
初見では良く意味が分からず「？」となったので、その意味や背景について色々と調べてみました。
主にコンシューマのテスト等に関わる方々の参考になれば幸いです。


# そもそも「IARC」とは何か
IARCは "INTERNATIONAL AGE RATING COALITION" の頭文字をとった名称で、日本語でいうと "国際年齢評価連合" のこと。ゲームやアプリの年齢レーティングを審査するための国際組織です。
コンシューマのテスト作業で目にするようになったのが最近だった為、ごく新しい組織なのかと思いきや、公式ページを見ると『2013年に設立』と記載されています。
（意外にも8年も前に既に存在していた…）

さらに公式ページを読み進めていくと
　・北米のESRBや欧州のPEGIなど各国/地域のレーティング団体が加盟して成り立っている
　・開発者が質問に答える事で年齢レーティングが取得される（いわゆるセルフレーティング方式）
　・このレーティング審査結果に応じて各加盟団体それぞれのレーティングに分類される
といった仕組みで運用されている旨が分かります。
しかもその審査費は"無料"（ちなみに日本のCEROレーティング審査は現状"有料"です）

IARCで審査を受ければ、各加盟団体の国/地域においてはレーティングを個別取得する必要性がないという事であり、1回の審査、しかも無料の審査で世界中で配信できるという非常に素晴らしい仕組みに思えます。

https://www.globalratings.com/

# 注意点／問題点
このIARC、各国のレーティング取得を一本化できるという点で非常に利便性が高いものとなりますが、実は万能ではありません。
以下の通り注意すべき事項が幾つかあります。

- **対象となるのは「デジタルコンテンツ」のみ**
IARCはデジタルコンテンツのみを審査対象にしている為、ダウンロード配信タイトルでないと利用はできません。パッケージ販売を行うタイトルでは、結局のところ国/地域毎の審査機関によるレーティング取得が必須となります。
大手ソフトメーカーが販売する有名タイトルなどはパッケージ版とDL版を両方併売する場合が多く有りますが、こういった売り方の場合、恩恵はあまり得られません。

- **リリース後のレーティング変更**
IARCは前述の通りセルフレーティング方式を採用しており、迅速なレーティング取得を実現していますが、これは「審査団体による事前の厳密な製品レビューを通っていない」という事でもあります。
場合によってはリリース後の市場の反応等を受けてレーティングが修正される可能性があり、
　『レーティング変更によりプレイ出来なくなる年齢のユーザーが出てくる』
　『レーティング変更の結果、ストア配信が停止される』
といった "ユーザー不利益" や "余計な対応コスト" 等が発生し得る、という事です。

こういった注意点/問題点を十分に理解した上で利用する必要があります。


# 日本における対応状況
日本国内で販売されるタイトルに関わる事が多い立場としては、やはり「日本でどういう対応状況なのか」が気になるところ。今現在の実状はどうなのでしょうか。

日本のレーティング審査機関といえば言わずと知れた「CERO」ですが、本記事作成時点(2021年12月)ではCEROはIARCに加盟していません。
つまり "IARCレーティングを基にCEROレーティングを分類" といった事は現状は出来ません。

しかし、これとは別でハードメーカー側がIARCに加盟しており、日本でもその利用範囲は広まってきています。
現にニンテンドーeショップにおいてCEROではなくIARCレーティングが表記されたソフトも販売されている状況で、これについては任天堂公式サイトでもユーザー向けの説明ページが用意されています。

https://www.nintendo.co.jp/support/rating/index.html

ただ、調べた限りでは「日本国内のみのタイトルがIARCレーティング表記で配信されている」というパターンは確認出来ず、あくまで「IARC加盟団体の各国で配信されるゲームを日本でも配信する際に、CEROを取得せずにIARCを流用出来る場合がある」といった程度である模様です。

各プラットフォームのポリシーによって適用可能な条件/範囲は変わるものと思われますが、
少なくとも日本のニンテンドーeショップ及びPlayStation™Storeにおいては、まだまだCEROレーティングでの配信が大多数、というのが本記事作成時点での実状です。


# さいごに
- 海外ソフトメーカーからすれば、わざわざCEROを取得せずにIARCで日本向けに配信できる事はかなりのメリットであり、IARCの利用範囲が広まることで海外ゲームの日本向けリリースの敷居が低くなっている点は大きな利点と言えそうです

- もし今後CEROがIARCに加盟する様な事があれば、日本国内のみで配信されるタイトルに関してもレーティング取得手続きが非常に高速化＆簡便化されることが期待できると思われます

- CEROでは一つ一つを人の目で見て高い精度で審査されており、日本ゲーム市場においてはこの審査手法によって定められたレーティングが定着している現状があります。IARCが広まるにつれ、CEROとは異なる基準で審査されたゲームの表現について問題視する声が出てくる可能性も大いにあり、これは今後の動向を注視していきたいところです
ウェブサイト作成用備忘録・２０号：動画素材の取り扱いについて

今まではwebサイトの作成を通して基本的なプログラミングの学習を行ってきましたが、現在は更にAdobeツール各種も使用するようになりつつあり、一つの演出を実装するのに複数の方法を選択する事が出来るようになってきたと思います。

今回は動画素材の取り扱いを中心にwebサイトへの実装方法のアイデアを書き留めておこうと思います。

####・まずは著作権フリーの動画素材を探してくる
自分は下記のサイトを利用する事が多いです。（自前で動画を撮影したりAdobeツール等で動画自体を自作しようとすると、流石に学習が脱線してしまうので…）

https://pixabay.com/ja/videos/

その他にも下記の記事で様々なフリー動画素材を扱うサイトが紹介されていたのでコチラもオススメです。

https://qiita.com/kaedeee/items/753959a99caf41cb8719

####・動画素材をwebサイトの背景として使用

例えば下記のサイトの様にページ背面全体に動画背景を実装して動きのあるサイトが作りたい時

https://co.hellolife.jp/

フリー素材の中には最初からループ再生が可能なように編集してある動画もありますが、「今回作りたいサイトの雰囲気に合っている動画に限ってループ再生に対応していない…！」みたいな事が良くありました。

**動画をループ再生に対応させるには、動画の始点と終点を一致させる必要があります。**
主な方法は

* 動画の始点と終点にフェードイン・フェードアウトを追加し、動画の切れ目に暗転を加える事で始点と終点を一致させる
* 動画Aと動画Bの2種類の素材を用意し、「動画A→動画B→動画A」の順番にクロスフェードを追加し、始点と終点が一致する箇所でトリミングする（動きの少ない抽象的な動画なら動画Aだけのクロスフェードでも違和感のないループが成立します）
* 動画素材が再生し終わったタイミングでコピーした動画素材を逆再生させて元動画と繋ぎ、始点と終点を一致させる
* 動画内で始点と終点が一致している箇所がある場合、ループ可能な部分だけを元の動画素材からトリミングする

これらを実現するには予め動画編集ソフトで動画素材をループ再生に対応させてから使用するか、未加工の動画をwebサイト上でループ再生に対応させることになりますが、それぞれメリットデメリットが存在していると考えています。

#####対処法１：動画編集で何とかする

**メリット**

* ソースコードがシンプルにまとまる

**デメリット**

* 動画編集ソフトが必要
* 後々の変更や修正に弱くなる

#####対処法２：コーディングで何とかする

**メリット**

* 後々の変更や修正に強い
* javascriptによる動的処理との組み合わせが可能
* 動画編集ソフトが不要

**デメリット**

* 実装・デバッグに時間が掛かる
* ソースコードが複雑になる為、様々な環境から閲覧した際に不具合が起きやすくなる

動画編集ソフトで予めループ再生に対応させておくことで、HTMLでvideoタグを読み込み、動画背景としてCSSを調整するだけで実装が可能になります。
その代わり、予め「動画A→動画B→動画A」とクロスフェードさせて作成した動画素材が、後々「動画A→動画B→動画C→動画A」等に構成を変更しなければならない場合には１から作り直しになってしまう事もあります。

逆に、全てをコーディングで賄う場合、一度ループ化の仕組みを構築してしまえば上記の様な変更にも柔軟に対応できる反面、ソースコードが複雑になるほど様々な環境からwebサイトを閲覧した場合には不具合が起きやすくなる他、HTML上で複数の動画を読み込まなればならない為、動画のサイズによってはページの読み込みが重くなってしまうと思われます。

個人的には動画を取り扱う際はなるべく事前に編集ソフトで必要な工程を済ませておき、コーディングはなるべくシンプルにまとめておく方がトータルでは楽に実装が出来ると考えています。動画編集ソフトに編集ファイルのバックアップを残しておけば、最低限の修正で対応可能なのも大きいですね。

####・今後やってみたい表現リスト

#####動画サムネイルのホバーエフェクト

javascriptのonmouseoverイベントパンドラでマウスオーバーと[HTMLMediaElement.playbackRate](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/playbackRate)を組み合わせて、videoタグへのホバー操作に反応して動画をスロー再生したり、ホバーした時だけ動画が再生されるボタン

#####動画サムネイルクリック時のページ遷移アクション

他のページにリンクしている動画サムネイル型のボタンをクリックした際に、ページが動画にズームして動画に飛び込んでいく様なアクション

等々…まだまだやってみたい事は色々あるので、引き続き幅広く学習を続けていきたいと考えています。

自分用の備忘録ではありますが、誰かの参考になれば幸いです。
プログラミング初心者がプログラミングを嫌いにならないために…。

皆さん、こんにちは。
先端メディアサイエンス学科の Iida です。

この記事では、私がプログラミングを学び始めたときから今に至るまで、どのようにしてプログラミングをするモチベーションを保ってきたのかについて書こうと思います。(本当はゼミで開発していたゲームについて書こうと思ったのですが、時間が足りなさそうなのでテーマを変えました…。)

また本記事はほとんど初心者向け、Processingユーザ向けの話題となっています。

人生初のプログラミング
---
私は今、学部2年生でプログラミングに初めて触れたのは大学1年生の5月頃でした。

最初に触れたプログラミング言語はProcessingというもので、初学者向けの言語です。


まず大学の授業で資料が配られ、最初はその資料に書かれたソースコードを模写し続けるところから始まりました。

最初は、コードを打つことによって画面上に様々なものが映って、自分自身はそれを楽しんでいたと思います。

しかし、内容が複雑になり、for文やら配列やら難しい要素がどんどん授業で扱われるようになり、授業で出題される問題も次第に時間内に解けなくなっていきました。

恐らく、当時の私はプログラミングに対して少なからず苦手意識を持っていました。

さらに授業が進むと、毎週のプログラミングの授業が憂鬱になり、プログラミングへの苦手意識は深刻になるばかりでした。

プログラミングの楽しさに気づいた夏休み
---
結局春学期はプログラミングへの苦手意識を払拭できないまま終わってしまいました。

さらには、夏休みを迎えてもプログラミングの課題からは逃れられることができませんでした。

夏休みに出された課題はずばり、
**プログラミングで人を楽しませる作品を作ってください**
というものでした。

つまり、テーマは自由で、とにかく人を楽しませるような作品を作れと言うお題です。

当時の私は思いました。
###　　＼(^o^)／ｵﾜﾀ

そもそもテーマが自由な時点で何を作ればいいか分からず、だいぶ思い悩みました。

現実逃避をして数週間が過ぎ、さすがにそろそろ作品制作に取り掛からないと単位が危うくなってくると思ったので、アイデアを探すために、Google先生で「Processing 初心者 作品」などと検索しました。

ヒットしたのは、「本当にProcessingで作ったのか！？」と驚いてしまうような作品ばかり…。
>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696942/5709e61b-f7fb-6cae-f6ca-fb66853886de.png)
https://dsdiary.blog/processing-python-hajimemasite/691/ より

すると、Processingでゲームを作る方法について書かれている、初心者向けの参考書を見つけました。


少し見てみると、本の中身には横スクロールアクションゲームやRPGゲームのプレイ画面が！

ゲーム好きの私にとって、それはとてもテンションの上がる内容でした。

そこで私は腹をくくって、その本を購入することにしました。
※実際に購入した本は[こちら](https://www.amazon.co.jp/dp/4798046345/ref=cm_sw_r_tw_dp_8XPHKMZFWH65TXAMAE5J)

そして本が家に届いてからは、その本に書かれている内容の模写と理解を徹底しました。

しかし、授業と違って自分の好きなゲームに直結する内容なので、全く苦ではありませんでした。

そこからはひたすら参考書の説明どおりにソースコードを打ち込み、徐々に自分のパソコンの画面でゲームが出来上がっていくのが身に染みて分かりました。

###オレはいまゲームを作っている！！

当時の自分はすっかりProcessingでゲームを作ることに没頭していました。

当時を転機に、私の中のプログラミングへの印象は暗いものから明るく楽しいものへ変化していきました。

好きなものを実現するためにプログラミングを学ぶ
---
夏休みの半分ほどはProcessingでゲームを作るのに時間を割いていました。

というのも、それは私がゲームにもともと興味があったからです。

そこで私は考えました。

**「好きなものを実現するためにプログラミングを学ぶこと」がプログラミングを嫌いにならないための秘訣なのではないか…？**

この記事を見て下さっている皆さんにもきっと好きなものや実現したいものがあると思います。

例えば私のようにゲームだったり、はたまたウェブサイトだったり、便利なアプリだったり…。

プログラミングが嫌いになりそうになったときは、自分が実現したいものをイメージしてみるといいと思います。

でも、きっとこう思うでしょう。

###「そんなこと言われたって作り方分からんし！」

安心してください、私もでした。

だから私は外部の情報を頼りました。

ウェブの記事でも本の内容でも構いません、とりあえずソースコードをマネしてみることをおすすめします。

自分が実現したいことに直結しなくても大丈夫です。

こうすることでまず知識量が格段に増えると思います。

そして知識量が増えると、きっと「あれはあの知識を使えば実装できるかも…？」と思える機会が増えてきます。

知識量が増えて、実装のノウハウが増えていくと、自分が実現したいものが手の届く存在になっていきます。

または、マネしたソースコードに羽をはやしてオリジナルの要素を加えることもいいかもしれません。


色々と語ってしまいましたが、ここで私が伝えたかったことをまとめると、

* 好きなものを実現するためにプログラミングを学ぶ
* そのためには外部の情報も頼る
* ソースコードをマネして知識を取り入れる

という感じになります。

終わりに
---
ここまで長々とお付き合いいただきありがとうございました。

私は大学1年生の夏休みに自分が好きなゲームを、プログラミングで実現することによってプログラミングに楽しさを見出しました。

プログラミングを使って、自分で何かを実現することは想像以上に可能性を含んでいます。

例えば、ひとつのゲームを作るにしてもジャンルや使う音楽、キャラクターの見た目、演出はすべて自分次第です。

私は、そんなプログラミングの奥深さと楽しさに気が付いて、今日までFMSで何とか生き残ってきました。

そして今ではUnityというゲームを作ることに特化したツールを使ってゲーム作りにトライしています。

さらには未だに、私はUnityのウェブサイトや参考書のコードをマネしていて、まさに知識量を増やしている真っ最中です。

長くなってしまったので、そろそろ終わりたいと思います。

ここでの話が皆様の役に立てば幸いです。

ありがとうございました。
RedhatOS設計 Kdump

https://www.rootlinks.net/2019/03/13/centos-7%E3%81%A7%E3%82%AF%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%83%80%E3%83%B3%E3%83%97kdump%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B/

インストールしたRHELは自動でkdump有効設定になっていました。

そのまま以下のコマンドを実行したら

```
echo 1 > /proc/sys/kernel/sysrq
echo c > /proc/sysrq-trigger
```


デフォルト設定の/var/crashにdumpファイルが吐かれていました。
バウムクーヘン型PDCAについて考えてみた。

## もくじ
1. ご挨拶とこの記事の経緯
2. バウムクーヘンの作り方
3. バウムクーヘンとPDCAサイクル
4. バウムクーヘンの崩壊とプロジェクトの崩壊
5. チョコレートコーティングを考えよう
6. 結びの挨拶

##1. ご挨拶とこの記事の経緯
初めまして。バウムちゃんといいます。
AIQVE ONE株式会社で品質管理のお仕事をしており、
テストケースの作成・実行、Unityでのゲーム作成、APIテスト、自動化テスト等色々な業務をさせていただきました。

バウムクーヘンが好きで休日に日本各地のバウムクーヘン巡りをしたりもしています。
ある日バウムクーヘンを焼かせていただく機会があり実際にバウム焼きを体験したのですが、
そこでバウムクーヘン型PDCAというものを思いつき自分なりに考え方を纏めましたので、
この場をお借りして記事にしたいと思います。

![publicdomainq-0005371eii.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2287131/4045fdba-32b4-e56d-92a1-8b8fe37c0021.jpeg)

##2. バウムクーヘンの作り方
本題に入る前に前提知識としてバウムクーヘンがどのようにして作られているのかご理解いただく必要があるため簡単に説明いたします。
バウムクーヘンは太めの長い棒に卵・小麦粉・砂糖・バターを混ぜた生地を薄く張り付け棒ごと焼きます。
軽く火が通ったら焼いた生地の上に生の生地を張り付けまた焼きます。
この「焼いた表面に新しい生地を付けて焼く」工程を繰り返し年輪と呼ばれる輪を作っていきます。
ある程度大きくなったら棒を抜いて出来上がります。
カットしたときに作った輪が多いと木の年輪のように見えることからバウム（木の）クーヘン（ケーキ）と呼ばれています。
![baum.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2287131/b513fb04-bbd7-f637-49bf-32c54dedb701.png)

##2. バウムクーヘンとPDCAサイクル
PDCAサイクルをご存知でしょうか。
PDCAとは「PLAN（計画）」「DO（実行）」「CHECK(評価)」「ACT（改善）」を繰り返し行いプロジェクトを進行していく方法です。

![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2287131/5df21d17-a238-ba7f-86b1-518cdfc3dc5c.png)
「繰り返し行う」ですのでACT（改善）の後は次のPLAN（計画）に移行します。
ここでこの図の流れ（時計回りにぐるっと一周すること）を時間の流れとし、
輪の太さを作業量や人員としてみます。
![PDCA.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2287131/f0667b13-968b-228d-43cd-a42c9011f393.png)

ではこの図を分かりやすくバウムクーヘンで見てみましょう。

![PDCA6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2287131/d83aa13a-dc1e-0766-2c7d-ac9e06603bd7.png)

![PDCA7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2287131/8b3e7002-e90d-caba-4067-92996a97b96a.png)

このように一度PDCAを実行したらその周りを囲うような形の図で表します。
一見、私がバウムクーヘンが好きだからと無理矢理こじつけたように感じる方もいらっしゃるかもしれませんがちゃんとこの図にする意味があります。
円の周りをぐるっと囲うことになるので輪の大きさは文字通り一回り大きくなります。
実際にプロジェクトを進行していくとプロジェクトの規模が次第に大きくなっていき、
PLAN、DO、CHECK、ACTそれぞれにかかるタスク量や時間が増える事は多くあると考えております。

##4. バウムクーヘンの崩壊とプロジェクトの崩壊
バウムクーヘン作る作業というのは序盤はあまり難しくありません。
しかし完成に近付くにつれ作る難易度が上がってきます。
その大きな理由として「バランスの崩壊」があります。
作っている最中に焼きムラや生焼けを作ってしまうと、作ってしまった段階では問題がなくてもバウムクーヘンの重量が重くなればなるほど崩壊するリスクにつながります。
また、そのリスクは回転を止める事でさらに高まります。

![Baumkuchen.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2287131/5e029547-a774-7591-a1b8-3a3fe96cf52c.png)

ここで先ほど紹介しましたバウムクーヘン型PDCAで考えてみます。
PDCAサイクルは細かく計画、実行、評価、改善を繰り返す作業ですが、
PDCAサイクルでも崩壊するリスクは考えられます。
タスクを細分化しPDCAサイクルを行っている場合、細分化された計画の視点では問題がなくともプロジェクト全体で見た際に実は方向性が違っていて無意味なスクリプトだったり・・・
ということもあるかもしれません。
些細なきっかけだったことがのちに大きな問題に発展するリスクもあります。
その結果プロジェクト自体が崩壊する、というようなことは絶対に起きてはなりません。
![理想と崩壊例.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2287131/6a884a65-e0fb-c069-3459-0e1b718f0bcd.png)

##5. チョコレートコーティングを考えよう
本来バウムクーヘンを作る際に先にコーティングから作るようなことはまずしません。
しかしプロジェクトの場合はコーティングする事、つまり全体の計画を固める必要があります。
先ほど説明したプロジェクトの崩壊を防ぐには細分化したサイクル内でも常にプロジェクト全体の計画を意識して行うことが必要です。
特にPDCAサイクルのPLAN（計画）の段階でこれから行う内容がプロジェクト全体にとってどのような影響を及ぼすのか理解をして行う事でプロジェクトの崩壊を抑える事ができます。

![チョコレートコーティング.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2287131/8d60cd18-d2b9-b2b2-66dc-8ec5d0dc9d9f.png)

##6. 結びの挨拶
以上でバウムクーヘン型PDCAについての記事を終わります。
この考え方はゲームテスト、プロジェクト進行にとどまらず様々な業務に応用可能と考えております。
少しでもこの記事を読んでくださった方のお役に立てましたら幸いです。
NullPointerExceptionのメッセージの改善について

エンジニアとしてシステムの開発や保守を経験してきました。その中で障害が発生した場合は迅速な対応が求められるのはエンジニアの方々にとっては当たり前のことだと思います。

私自身も多くの障害対応を経験してきましたが、対応は容易でも調査に時間がかかるのはやはりNullPointerExceptionではないかと思っています。

##NullPointerExcepitonとは？
恐らくこのエラーに遭遇した人はいないと思われるほど有名なエラーですが、以下のリンクを参照してください。

https://docs.oracle.com/javase/jp/8/docs/api/java/lang/NullPointerException.html


簡単なソースですがこんな感じですね。


```:sample.java

	public static void main(String[] args) {
		String data = getSubstring(null);

		System.out.println(data);

	}

	static String getSubstring(String str) {

		String data = str.substring(3);

		return data;
	}
```

問題なのは言うまでもなく、

　String data = str.substring(3);

strがnullなのに、文字列抽出しようものならばエラーになりますよね。

JDK11の環境で実施すると以下のエラーが出力されます。

```
	Exception in thread "main" java.lang.NullPointerException
		at nullSample.sample.getSubstring(sample.java:14)
		at nullSample.sample.main(sample.java:6)
```

このような簡単なロジックであれば行数を見て原因を調査することも容易ですが、それなりの規模のシステムであったり途中参画したシステムでこの事象が発生すると、ログの調査から原因特定、事象再現など大変です。
特に大変と感じているのが原因特定で、「どこで」「なにが」「どういう条件で」を調べて対応するには時間も労力も使います。

そのために、各処理の前にnullチェックを行うというのは必要な処理であり、プログラム教育やOJTで最初に習うことの一つだと思います。
対策を講じるのは簡単でも、実際にエラーが発生すると調査が大変なのがこのエラーの厄介なところでしょう。

##NullPointerExceptionのメッセージ改善
ここからがようやく本題ですが、JDK14のバージョンからNullPointerExceptionが改善されていました。（恥ずかしながら最近知りました。）

https://openjdk.java.net/jeps/358

簡単に言うと、原因特定に必要な「どこで」「なにが」がわかりやすくなったというものです。
早速JDK14以降のバージョン（ここではJDK17を使用）で上記のロジックを実行してみました。

```
	Exception in thread "main" java.lang.NullPointerException: Cannot invoke "String.substring(int)" because "str" is null
		at nullSample.sample.getSubstring(sample.java:14)
		at nullSample.sample.main(sample.java:6)
```

エラーが発生した場所と理由がメッセージとして出力されていますね。

##まとめ
長期間の開発や保守を行っていると、対象の開発や保守の環境の知識は深くなりますが日々改善されているJavaやその他のプログラミング言語に対して、エンジニアとしてもっとアンテナを広げていかなければなと思う今日この頃でした。
日本語手書き文字認識Web版を公開

インフォコム(株)のAdvent Calender 1日目を担当するmbotsuです。
以前はこんなのを開発してました。

- [RICOH THETA x IoT デベロッパーズコンテスト](https://lab.infocom.co.jp/theta/egg/)
- [AppsJapan2017に「バーチャルテレポート」を出展](https://lab.infocom.co.jp/apps-japan/virtual-teleport-05/)

たまにしか投稿しませんがTwitter ([@mb_otsu](https://twitter.com/mb_otsu))も宜しくお願いします。

今回は、今年のQ1に試したけれど、直ぐに使える精度ではないので没になったネタを投下します。
没ネタも整理するのが大事ですね！

## 光学式文字認識(OCR)と手書き文字認識(HTR)

日本語は単語の区切りが解り辛くまだまだOCRでも難しい分野とは思いますが、

- 光学式文字認識は解決されたタスク
- 手書きテキスト認識は依然として困難なタスク

と言われています。

## 手書きテキスト認識

オンライン手書きの場合、ストロークと書き順から軽量でかつ少ないデータで精度良く推論ができます。
深層学習以前からあるSVM(Support Vector Machine)で少ないデータでも良い結果が出るとされています。
最近ではオフライン手書きでも大量のデータを深層学習することで幾らか精度を出すことが可能となってきました。

さて、オンライン手書き文字と言えば、懐かしのSVMを使った[zinna](http://taku910.github.io/zinnia/index-ja.html)があります。
zinnnaはトレーニングデータを自分で収集しないと精度はあげれませんので試された方は苦労したようです。

最近では、iOS13で登場したPencilKitがiPadOS14のスクリブルで手書き文字認識に対応しました。
この段階では英語と中国語（簡体字、繁体字)に対応しています。
更に今年の9月にリリースしたiPadOS15では遂に日本語にも対応しました。
トレーニングデータはどのようにして集めたのかノウハウ欲しいものですね。

## オフライン手書き文字

オンライン手書き文字はトレーニングデータさえあれば十分使いものになりますが、オフライン手書き文字はまだまだ難しい課題です。
オフライン手書き文字が使えると、例えば手書きの書類の文章や金額のデジタル化が容易になったり、ノートにまとめた情報をデジタル化したりと、まだまだオフライン認識ができないと対応が難しい場面はあります。
ただし、どんどん利用シーンは削られていく過疎るタスクですので新規に研究する人は限定的と言えそうです。
おそらく試している方はガチ勢だけだと思いますのでライトな私の記事はぬるい目で見守っていただければと思います。

## ようやく本題

長々と前振りしましたが、今回は図の右下のオフライン手書きを試しましたのでレポートです。
![main.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35973/d19f2d46-b73e-9b1f-5087-f50d8db19c0b.png)

オフラインの日本語手書き文字は、ETLでトレーニングしたプロジェクトと、Intelが東京農工大学中川研究室の文字データベースでトレーニングしたプロジェクトがあります。
今回はIntelがOpenVINOで動かしたプロジェクトをWebで動作させました。

- [ETL文字データベース](http://etlcdb.db.aist.go.jp/?lang=ja)
  - [ブログ](https://towardsdatascience.com/creating-a-japanese-handwriting-recognizer-70be12732889) 
  - [GitHub](https://github.com/Nippon2019/Handwritten-Japanese-Recognition)
- 東京農工大学中川研究室のオンライン文字データベース [Kondate](http://web.tuat.ac.jp/~nakagawa/database/jp/kondate_about.html)、[Nakayoshi](http://web.tuat.ac.jp/~nakagawa/database/jp/about_nakayosi.html)
  - [handwritten-japanese-recognition-0001](https://docs.openvino.ai/2021.1/omz_models_intel_handwritten_japanese_recognition_0001_description_handwritten_japanese_recognition_0001.html)

### 動作デモとコード

https://twitter.com/mb_otsu/status/1386845687317372932?s=21

こちらで公開してますので興味のある方はお試しください。

- [GitHub](https://github.com/infocom-tpo/handwritten-japanese)
- [動作デモ](https://infocom-tpo.github.io/handwritten-japanese/)

### OpenVINOモデルの変換について

IntelのプロジェクトをPINTOさんがコンバートしたものをWebで動かしました。
Webで動かすにあたり、tfjs変換に少し問題がありましでのでIssueに修正内容を投稿しています。

- [PINTOさんモデル](https://github.com/PINTO0309/PINTO_model_zoo/tree/main/055_Handwritten_Japanese_Recognition)
- [修正内容](https://github.com/PINTO0309/PINTO_model_zoo/issues/95)

なお、Intelのトレーニングデータは有償データを使った為か、トレーニングコードもブラックボックスなようです。
AppleもiPadOS15のスクリブルは同じデータでトレーニングしたのでしょうか？興味はあります。

## まとめ

日本語手書き文字認識のオフライン手書き文字(Intel)を試したのでまとめました。

- 光学式文字認識(OCR)は解決されたタスク
- 手書きテキスト認識(HTR)は依然として困難なタスク
  - オンライン手書き文字はデータさえあればかなり精度良く使える
     - AppleがiPadOS15で日本語対応
  - オフライン手書き文字はまだまだ困難なタスク
- 今回はオフライン手書き文字を評価
  - 結果として認識精度は微妙なことが解った。そして没ネタへ。
Googleマップに統計データを投影してみた

### Googleマップに統計データを投影してみた

技研商事インターナショナルでWEBアプリ開発を担当しています

今回はプログラミングやAPIを利用せずとも、GISとはどういったものなのか、その一端に触れる方法をご紹介します。

GISというのはGeographic Information Systemの略で、地理情報システムの略となります。

WEBアプリ等の地図上に位置や地理に関する情報を可視化する目的でよく使われるものの１つにGoogleマップがあります。



今回はインターネット上で公開されているオープンデータをダウンロードし、それをGoogleマップ上に重ねて投影するということをやってみたいと思います。

### データをダウンロードする

今回利用するデータとして、総務省が公開している政府統計の境界データを利用します。

境界データとは統計値と結合されているGISデータのことです。

まずは総務省の[e-stat](https://www.e-stat.go.jp/gis)から2015年国勢調査の境界データをダウンロードします。

1. [境界データダウンロード]を選択し、[小地域] > [国勢調査] > [2015年] > [小地域(JGD2000)] > [世界測地系緯度経度・Shapefile]と進みます。

2. [13.東京都]を選択し、今回は[13118 荒川区]のShapeファイルをダウンロードします。

### データを編集する

次はGoogleマップで読み込みやすいようにダウンロードしたデータを編集します。

今回はオープンソースソフトウェアの[QGIS](https://www.qgis.org/ja/site/)を利用しました。[バージョン：3.18.3-Zürich]

QGISは空間情報の編集をはじめ、高度な機能を持ったGISソフトです。

ダウンロード・インストール方法については詳しく載せてあるサイトがたくさんあるので、そちらをご参照ください。



1. ダウンロードした境界データの「h27ka13118.shp」をQGIS上にドラッグします。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277398/33737abf-b583-101b-c322-4f31574fada6.png)

2. メニューの[レイヤ]タブから「編集モード切替」を選択します。

3. メニューの[レイヤ]タブから[属性テーブルを開く]を選択します。

4. 「KEY_CODE」「MOJI」「SETAI」「X_CODE」「Y_CODE」の5つだけを残して他の属性を削除します。
   KEY_CODE：キー
   MOJI：市区町村名
   SETAI：世帯数
   X_CODE：経度
   Y_CODE：緯度

5. メニューの[レイヤ]タブから[名前を付けて保存]を選択し、任意の名前をつけて保存します。この時に形式は[KML]を選択して保存してください。
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277398/a00bff2c-8b60-d1cb-9f9c-560d64165ffc.png)

### Googleマップに投影する

これから用意したデータをGoogleマップに投影します。

1. まずはGoogleマップを開いてメニューからマイプレイスを選択します。
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277398/ebacc2c2-ab20-4a11-e1f5-a77091571e01.png)
1. タブ上にあるマイマップを選択し、下にある「地図を作成」をクリックします。
2. レイヤのインポートをクリックし、編集したKMLファイルをインポートします。
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277398/b05f88f5-02d7-ab81-2f39-7b888706ad78.png)
画像にあるように地図上にダウンロードしたデータが投影されたことが確認できたと思います。次に世帯数ごとに色分けして町名などをラベルとして表示します

1. レイヤ名の右にある縦三点リーダーを選択し、[データビューを開く]を選択します。

2. MOJIの右にある▽ボタンをクリックし、[タイトル列に設定]を選択。

3. SETAIの右にある▽ボタンをクリックし、[コピー]を選択、任意の名前をつけて[タイプ]は[数字]を選択します。

   インポートしたカラムは文字としてみなされてしまうため、あらためて数字タイプのカラムを用意することで、

   グラデーションを利用したマップ表示を行います。

4. [個別スタイル]を選択し、[データ列別のスタイル]に、3で作成したラベルを選択。

5. [範囲]にチェックをいれ、他のパラメーターはお好みで選んで大丈夫です。[ラベルを設定]のところには3で作成したラベルを選択します。
![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277398/f520e19f-375a-4130-ef94-5ebda7560e5c.png)
グラデーションを変更したり、余分なポリゴンは削除したりといったことも可能です。

![画像9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277398/cd4762a5-d658-8530-5d09-66e2b054f617.png)


これでいつでもGoogleアカウントから「世帯数がグラデーション表示されているGoogleマップ」を開くことができました。

GISアプリにはこういったことがもっと簡単にできたり、多角的な分析機能を備えたものもあり、

それらの使い方のサポートも充実しているものが市場にあふれています。

これらの活躍を礎にGISという言葉がより浸透していくことを楽しみにしています。
AfterEffects 親とリンク

#■親とリンク
親のアイテムの動きに子供がマネしてついてくるイメージ。
簡単に言うと親のキーフレームのみで子供が同じ動きをする。

▼個別にシェイプレイヤーを用意したとする。
![スクリーンショット 2021-11-30 14.14.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/daaed60d-173c-08dd-56d9-af6a6d255e92.png)

▼丸だけ位置にキーフレームを打ち右に動かす。
単純なこう言う動き。
![丸親とリンク前.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/f7377728-93ba-3f46-a4e5-5bb4e76d85b9.gif)


▼丸を親とする。四角を子供。親とリンクの設定。
四角の親とリンクの設定を丸に変更。
![スクリーンショット 2021-11-30 14.17.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/21430c33-e41b-9567-9cc7-1cb099b1c277.png)

丸(親)と同じ動きになる。
![丸親とリンク後.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/94314c1c-b1b8-f803-49a3-cee0619dced2.gif)
RedhatOS設計 GRUB

設計要素はまだ記載しませんが

GRUBは、BIOSかUEFIどちらを使用しているのか確認することから始めます。

調べ方
https://websetnet.net/ja/how-to-check-if-your-computer-uses-uefi-or-bios/#:~:text=Linux%E3%81%A7UEFI%E3%81%BE%E3%81%9F%E3%81%AFBIOS,%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%81%8C%E8%A6%8B%E3%81%A4%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82

いかにefiというディレクトリが存在すればUEFI。なければBIOS
ls /sys/firmware/

grubの修正方法

①
vi /etc/default/grub

②BIOSの場合
grub2-mkconfig -o /boot/grub2/grub.cfg

UEFIの場合
grub2-mkconfig -o /boot/efi/EFI/redhat/grub.cfg

③
OSの再起動

https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/7/html-single/kernel_administration_guide/index#sec-Verifying_the_Initial_RAM_File_System_Image
Unityにまつわる入社前後の変化

# 初めに
こんにちは！
「[CYBIRDエンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/cybird)」6日目担当を担当します、[＠cy_ssss](https://qiita.com/cy_ssss)です。
5日目は[@kappysan](https://qiita.com/kappysan)さんの「[【新卒研修】Device Farmerの導入](https://qiita.com/kappysan/private/83406c969b7aa20c0d5f)」でした。
私も新卒なので、研修当時のことを思い出して少し懐かしかったです。
研修が終わってから、まだ二ヶ月ちょっとしか経っていないんですけどね！

# 簡単な自己紹介と本日の内容
私はゲーム系専門学校卒、新卒一年目のエンジニアです。
学生時代から現在の仕事でもUnityを主に使用しており、せっかくなので入社前後の使い方や意識の違いなどに焦点を当てた記事を書いていこうと思います。
初歩的な内容が多くなるかとは思いますが、基本って大事だよね！という精神でよろしくお願いします。

# Unity
### プロジェクトの共有
・入社前
学生時代ゲーム制作のほとんどをチーム開発で行なっていたのですが、困るのがプロジェクトの共有。
当時は恐ろしいことに「Gitとか便利なものあるらしいけど、よう分からん」と、変更箇所を覚えておいて手動でメインのプロジェクトに変更をかけていました。
スクリプトの変更をコピペするにも自分の作業箇所を忘れていたりするとかなり悲惨ですし、シーンやプレハブに加えた変更なんてなおのこと……今考えると死ぬほど面倒です。
・入社後
初めましてGitHub（及びSourceTree）！
一つのリポジトリでデザインなど他の職種の人とも作業の共有が簡単、スクリプトへの変更にプルリク経由でコメントをもらえる、**なんて便利なのか！**
とはいえ扱いに慣れていなくて、ブランチの切り方とかコミットのまとめ方とかでたびたび戸惑う日々を送っています。
**早くお友達になりたい。**

### シーンの扱い
・入社前
一場面一シーンが基本、タイトル・ゲーム本編・リザルトなどで分けて行ったり来たりしていました。
規模が小さいのでそれで問題なかった、とも言います。

・入社後
常に存在するシーンに汎用的なものが置かれていて、その上でそれぞれのシーンを読んでいる、複数のシーンを同時に存在させられることにまず驚きました。
スマホアプリには共通UIなどがありますし考えてみると納得なのですが、そんなこと出来たのか！と最初は驚くばかり。
三年使ったくらいでは知らない使い方がいくらでもあるものですね。

### スクリプトやオブジェクトの取得
・入社前
Hierarchyにあるものはpublic変数にしてInspectorからアタッチ！
自分についてるコンポーネントはGetComponent<>( )！
探せないものはGameObject.Find( )！

・入社後
**これダメなんですね…！**
検索系の関数は重いため非推奨とのことで、以前は規模が小さいから問題なかっただけだと思われます……
publicだと外部からのアクセスが容易なため[SerializeField]を活用するように、Zenject(依存性注入)というものも初めて知りまだまだ勉強中です。
ZenjectはGithubに公開されているオープンソースのフレームワークだそうです。
https://github.com/modesttree/Zenject
また、元々Zenjectを管理していた方がAssetStoreに公開している、Extenjectというプラグインもあります。
https://assetstore.unity.com/packages/tools/utilities/extenject-dependency-injection-ioc-157735
こちらの方が最新のUnityへの対応もされているそうなので、ご参考までに。
力押しで検索していた過去は反省しようと思いました。

### 逆にそんなに変わらなかったこと
コーディング規約、というのはチームで開発する上で重要なものですが、命名規則やインデント・コメントの入れ方など、おおよその内容は学生時代に習ってきた書き方と相違ありませんでした。
「goto句の使用禁止」もありましたが、初めて知る言葉なので少し検索……好きな所に跳べるというと、音楽記号におけるこれ↓のようなものでしょうか。
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294439/f09da85e-c848-4de3-70b9-5bf820ac01e6.png)
説明も読んでみましたが確かにコードを追うのが大変になりそうで、使用禁止というのも頷けます。

今まで習ってきた書き方とほとんど変わらないというのは、やりやすくて有り難かったです。
**とはいえ、うっかりコメントを書き忘れたりはするんですけどね……**

# 研修時の話
Unityにまつわる話だと、入社後の技術研修内でUnityを使ったゲームの制作やUnity1weekへの参加も行いました。
個人制作経験がほとんどなかった上に最短1週間という開発期間の短さは、Unityの経験があっても難しいものでした。
そんな時助けられたのがこちら↓

![screenshot2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294439/9b447b1a-be36-84da-0987-b37a4eb87cc5.png)
![screenshot1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294439/114031b9-8abd-89b7-e375-201e140dc95d.png)
研修内で作成した要件定義書の「機能リスト」と「アセットリスト」です。
あらかじめ用意いただいたテンプレートを自分なりに編集したものになります。
最低限欲しいものを最初にリスト化したのですが、書いている中で実現したいゲームの輪郭が見えてきて作業を順序立てしやすかったのが一つ。
その上チェックを付けていくことで作業ペースが把握でき、また素材の準備を忘れずにすごく作業しやすかったので、今後も活用していきたいと思いました。

やることを小分けにリストアップすると作業しやすいことが分かり、普段の業務にも生きています。

# 最後に
箸休め的な記事でしたがいかがでしたでしょうか？
「[CYBIRDエンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/cybird)」
明日は[@kenta_kitagawa](https://qiita.com/kenta_kitagawa)さんの「【Laravel】queueとsupervisorについて」です！
お楽しみに♪
git stash apply / popを間違えたブランチにしてコンフリクトして立ち往生した時

`git stash apply`を誤って、意図していないブランチに実行してしまい、コンフリクトが起きて、「コンフリクト解消しないと先には行かせねぇ...」と迫られ、二進も三進も行かなくなってしまいました。

ググれば秒だろうと思ってやってみたいくつかの対策が、意外にも空振りに終わってちょいと困ってたので、最後にうまくいった方法をメモ。

```
git reset --hard
```

いつものあの平和な日々が帰ってきた。

一応ドキュメントはこれっぽいです↓

https://git-scm.com/docs/git-reset


（追記）
優しい弊社の先輩が本記事を見て声をかけてくれました。

`git stash apply`ならstashに変更履歴が残っているので本当に実行したかったブランチでやり直せば事なきを得ますが、`git stash pop`の場合変更履歴はstashから無くなってしまうので、まずいかもとのこと。
この場合は一回コンフリクトをマージしてコミットしてしまう方がいいそうです。そうすれば履歴は残るので、後で`git reflog`でgitログを追えば取り返しがつくと。自分はやってないので保証はできませんが！
iOSのアップデートをブロックするには

#iOSのOTAアップデートをブロックする方法

##①サーバーの通信をブロックする
以下のドメインをルーターなどのブラックリストに登録して通信出来ないようにしてください。
[Appleのサイト](https://support.apple.com/ja-jp/HT210060)に記載されているドメインです。

```
appldnld.apple.com
gg.apple.com
mesu.apple.com
updates-http.cdn-apple.com
updates.cdn-apple.com
xp.apple.com
```

###•メリット
①通信をブロックする事で強制的に解決することができる。

###•デメリット
①Appleの一部のサービス(iCloud等)で不具合が起こる可能性がある。


>##② TVOSのプロファイルを使用する(現在は不可)
>これが一番簡単で確実な方法です。
以下のサイトからプロファイルをダウンロードしてください。

>[Download Beta Profiles](https://betaprofiles.com/tvos/)

>###•メリット
>①操作が比較的少ない。
>②iCloudが使えない等の不具合が発生しない。

>###•デメリット
>①プロファイルの期限が切れると自動で削除されてしまう。
>②配布されるのが不定期でいつになるのかが分からない。
Value Objectを使用する場合の、演算子の拡張について

おはこんにちは！
エキサイトホールディングス新卒の奥田です！
本日は「Value Objectを使用する場合の、演算子の拡張について」について記事を執筆していきます。（Value Objectの利点等は今回の記事には含みません🙇‍♂️）

## Value Objectの定義方法
KotlinではValue Objectを実現するために「value class」が用意されています。
用途としてはIntをより扱いやすくするため、新規にAge型として定義したい場合が該当します。
構文が下記のようになります。

```kotlin:Age.kt
    @JvmInline
    value class Age(val value: Int)
```

これで新規にValue Objectを作成することができました。

## Value Objectを使用した演算子の拡張
　演算子を使用する際の問題点として、既存の演算子が新規に定義したValue Objectに対応していない点が挙げられます。

```kotlin:Primitives.kt
    /** Adds the other value to this value. */
    public operator fun plus(other: Byte): Int
    /** Adds the other value to this value. */
    public operator fun plus(other: Short): Int
    /** Adds the other value to this value. */
    public operator fun plus(other: Int): Int
    /** Adds the other value to this value. */
    public operator fun plus(other: Long): Long
    /** Adds the other value to this value. */
    public operator fun plus(other: Float): Float
    /** Adds the other value to this value. */
    public operator fun plus(other: Double): Double
```

既存の定義には今回定義したValue Objectが定義されていないのが確認できます。

解決方法としてはValue Objectからvalue（今回はInt型）を取り出し扱います。
この実装では演算子を使用するたびにValue Objectから値を取り出してあげる必要があります。

```kotlin:CountPlus.kt
class Sample() {

    @JvmInline
    value class Count(val value: Int)

    private fun CountPlus(count: Count) {
        count.value + 1
    }
}
```

もう一つは演算子を拡張することで、Value Objectでの使用を実現する方法です。
演算子をよく使用する場合は拡張することで、コードの記述量を減らし、可読性も向上できるため下記のように実装するのをお勧めしたいです。

```kotlin:CountPlus.kt
class Sample() {

    @JvmInline
    value class Count(val value: Int) {

        operator fun plus(other: Int) = Count(value + other)
    }

    private fun CountPlus(count: Count) {
        count + 1
    }
}
```

## まとめ
Value Objectを使用することでプリミティブ型を使用することができます。
しかし、新規に作成するため演算子を使用するタイミングで値を取り出し、使用する必要があります。
今回のようにValue Objectが演算に使われることが明確な場合は、演算子を定義してあげることで、Value Objectから値を取り出すことはなく便利に実装を進めることができます。
稚拙な文章でしたが最後まで読んでいただきありがとうございます✨
[CSS] clip-pathとsvgで作る表っぽい読み込み中プレースホルダ

# これはなに？

表の読み込み中を示すアニメーションをCSS（とSVG）で作りました。


# デモ

https://codepen.io/sengokyu/full/JjrjMLm

# 作ったもの

HTMLとしてはこれだけです。背景をグラデーションにして、アニメさせています。

```html
<div class="loading-placeholder"></div>
```

CSSのclip-pathで、表のセルっぽく背景色が見えるようにしています。

```css
clip-path: url(#loading-placeholder-mask);
```

作りたい表の分だけ、SVGが大きくなります。まあこれは仕方ない。

```html
<svg width="0" height="0">
  <defs>
    <clipPath id="loading-placeholder-mask">
     (snip)
    </clipPath>
  </defs>
</svg>
```
さくらエディタ使用改善方法メモ

## 概要
さくらエディタと秀丸エディタを使用した人が、両方のいいところをさくらエディタにまとめて設定する方法。
※既に設定済みからメモのため、デフォルト設定も含む
※本設定はネットの他の記事に大いに助けられて記載しています

さくらエディタバージョン：v2.2.0.1

## 改良ポイント
#### [設定]-[共通設定]-[全般]
☑同時に複数の編集用ウィンドウを閉じるとき確認

#### [設定]-[共通設定]-[ウィンドウ]
基本設定
☑ツールバー表示：上部ツールバー表示
☑アイコン付きメニュー：上部アイコンメニュー表示
☑ステータスバー表示：下部ステータスバー表示

分割ウィンドウ
□垂直スクロールの同期をとる：チェックを外す。左右で画面分割の際、それぞれでスクロールできるようにするため

#### [設定]-[共通設定]-[ツールバー]
- [クリップボード系] - [このファイルのパス名をコピー]：現在開いているファイルのパスをクリップボードにコピーできる

#### [設定]-[共通設定]-[タブバー]
☑タブバーを表示する：テキストファイルをタブ表示できる
動作モード
☑ウィンドウをまとめてグループ化する
☑外部から起動するときは新しいウィンドウで開く：コードを開いている最中に資料メモを開く場合などでグループを分けたいときは便利
タブの外観
☑等幅：ファイル名でタブの長さが変わるのを避けたい場合
☑多段
表示位置-上

#### [設定]-[共通設定]-[ファイル]
ファイルの排他制御
排他制御-上書きを禁止する：サーバ上のテキストファイルで、自分が開いているときに他の人が上書きできないようにする
☑上書き禁止検出時は編集禁止にする：編集を開始する前に禁止にしておく。後からのマージでよい場合は外す。

#### [設定]-[共通設定]-[ファイル名表示]
□長いパスの省略表示：チェックを外す。コードの階層が深いと、パスの省略が困るため

#### [設定]-[共通設定]-[バックアップ]
□保存時にバックアップを作成する：チェックを外す。いらないバックアップができるため

#### [検索]-[アウトライン解析]
▼-右ドッキング：秀丸のアウトラインの表示に近くなる
☑ドッキング配置を同期
・ドッキング配置を共通継承

#### [設定]-[タイプ別設定]-[スクリーン]
※C言語用設定のため、拡張子が「.c」のようなファイルを開いて設定をする
※ルールファイルは先に作成しておく。作成については「ルールファイル作成」項を参照
（表示確認）設定の名前-C/C++
（表示確認）ファイル拡張子-c,cpp,cxx,...（デフォルトのため省略）
アウトライン解析方法
●ルールファイル-（ルールファイル作成先ファイルパス）

インデント
☑自動インデント

#### [設定]-[タイプ別設定]-[カラー]
※好みによる。ダークモード配色だと以下が例
　なお、背景色についてはどれか一つを「黒」にした後、「背景色統一(>)」で統一可
☑テキスト　文字色：白　背景色：黒
☑ルーラー　文字色：白　背景色：黒
☑カーソル　文字色：ピンク
☑行番号　文字色：白　背景色：黒
☑行番号（変更行）　文字色：黄　背景色：黒
☑TAB記号　文字色：灰　背景色：黒
☑改行記号　文字色：青　背景色：黒
☑EOF記号　文字色：水色　背景色：黒
☑半角数値　文字色：赤　背景色：黒
☑選択範囲　文字色：青　背景色：灰
☑コメント　文字色：緑　背景色：黒
☑ダブルクォーテーション文字列　文字色：マゼンダ　背景色：黒

※配色設定が完了したら、必ず「エクスポート」で適当な場所に保存しておく。C言語コード以外にもカラーを統一したい場合は、対象のテキストファイルを開いた状態でカラー設定を開き、「インポート」であらかじめ保存しておいた設定を取り込む
※背景色の黒は、どこかのダークモードの背景が「#23282F（赤：35、緑：40、青：47）」らしいと聞いて設定してみたところ、驚異的な見やすさを発揮した

## ルールファイル作成
C言語用のアウトライン解析ルールファイルを作成する。
既存の解析で問題なければ作成不要。今回は、秀丸のアウトラインに外観を似せたかったために作成した。
#### (1)ルールファイル作成
空のテキストファイルを適当な場所に保存する。
今回は以下のように作成する。
保存先：C:\Program Files (x86)\sakura\keyword\cpp.rule

#### (2)ルール作成
以下のように作成した。
なお、以下は設定してみた個人的解釈を含む
※カテゴリ名は任意
※レベルの指定がない場合、インデントレベルは新規カテゴリ名ごとに順位付けされる
※インデントレベルはLv=○で指定できるが、対象のファイルを解析した際、最初に合致したカテゴリは指定がどうあれ必ずLv=1扱いとなる

```cpp.rure
// 正規表現有効
;Mode=Regex

// 記載ルール
// 正規表現 /// カテゴリ名,インデントレベル
// 宣言を抜いた関数処理のみをヒットさせるために、以下のルールとする
^(!?.*\;)void.*\(.*\) /// toplevel,Lv=1
// オリジナルマクロ宣言で型名が決まっている場合は、voidをマクロ宣言名に置き換えて、行を追加する
^(!?.*\;)static\svoid\s.*\(.*\) ///toplevel=1
^(!?.*\;)static\sdouble\s.*\(.*\) ///toplevel=1
^(!?.*\;)static.*\(.*\) ///toplevel=1
```

#### (3)ルール反映
ルールを作成、保存後、アウトラインで「更新」ボタンを押す
（Windowsマーク）
※今回のルール反映にかかわらず、一度ファイルを開いてアウトライン解析が終わった後にテキストファイルの修正などで、行数が変わった場合は、再度「更新」ボタンを押さないと、追従しない。

## Ctag使用設定
#### (1)ダウンロードしたCtag.exeを置く
sakura.exeと同じ場所にCtag.exeを置く。ここでは以下。
保存先：C:\Program Files (x86)\sakura\ctag.exe

#### (2)タグファイルの作成
[検索]-[タグファイルの作成]でタグファイルを作成する。なお、[タグファイルの作成]ボタンを押すために開くファイルはなんでもよい。（さくらエディタが起動していたらよい。開いたファイル自体に影響はないため）

#### (3)完了後、タグジャンプができる
対象の関数名や変数名などの間にカーソルを置き、F12ボタンを押すと定義元にジャンプできるようになる。呼び出し先に戻る場合は、Shift+F12で戻る。
メニューから選択する場合は、[検索]-[タグジャンプ]/[タグジャンプバック]。
nuxt generate + S3 + CloudFront でログインチェック・リダイレクトをする

![Nuxtjs-v2.15.7](https://img.shields.io/badge/Nuxtjs-v2.15.7-brightgreen) ![Amplify-v4.3.2](https://img.shields.io/badge/Amplify-v4.3.2-brightgreen)

# はじめに
ログイン時はログイン画面を開いたらトップにリダイレクト、ログインしていないのにトップ画面を開いたらログインにリダイレクトといった対応を入れることはよくあると思います。
私も同じように対応するにあたり、ログインチェックしてリダイレクトをするような記事は多々あるのですが自分たちの環境にあったものを探すのに苦労しました。
今回は表題のような構成のSSG環境におけるログインチェック・リダイレクトをしたい時に採用した方法についてまとめました。
また、ログイン管理の仕組みは`aws-amplify`の`Amplify Auth`を例としております。

# 最初に結論
Pluginとして共通メソッドのようなものを実装し、各画面読み込み時に呼び出すようにしました。

```plugins/redirectLoginByAuthState.ts
declare module '@nuxt/types' {
  interface Context {
    $redirectLoginByAuthState(): Promise<void>
  }
}

const myPlugin: Plugin = (context) => {
  context.$redirectLoginByAuthState = () => {
    const { Auth } = withSSRContext({ req: context.req })

    return new Promise(async (resolve, reject) => {
      try {
        await Auth.currentAuthenticatedUser()
        resolve()
      } catch (error) {
        context.redirect('/login')
        // rejectするとfetchやasyncDataで呼び出している時に死んでしまうので失敗時もresolve
        resolve()
      }
    })
  }
}

export default myPlugin
```

# 実装パターン

## Middleware

```middleware/authenticate.ts
export default function (context) {
  if (!isLogin) { // ※トークン有無等でログインチェック
    context.redirect('/login')
  }
}
```
今回の構成では、S3にデプロイして確認するとF5更新(SSRリロード)した時に呼び出されなかったため無しとしました。

## Plugins + NavigationGuard
Pluginを作成して、Vueの[NavigationGuard](https://router.vuejs.org/ja/guide/advanced/navigation-guards.html)で処理する方法です。

```plugins/AuthRouting.ts
import { Plugin } from '@nuxt/types'
import { withSSRContext } from 'aws-amplify'

const RouterAuthPlugin: Plugin = (context, inject) => {
  const { Auth } = withSSRContext({ req: context.req })

  context.app.router?.beforeEach(async (to, from, next) => {
    // isRequiresAuthはnuxt.config.jsでRouteごとに付与しておく想定
    if (to.matched.some((record) => record.meta.isRequiresAuth)) {
      try {
        await Auth.currentAuthenticatedUser()
        return next()
      } catch (error) {
        return next({
          path: '/login',
        })
      }
    }

    next()
  })
}

export default RouterAuthPlugin
```
NavigationGuardという専用のものがあるので使いたかったですが、route.metaに付与するのが悪いのか、`nuxt generate`すると生成時にHTMLの中身が別の画面とすり替わる現象が発生してしまいました。

## Pluginsでメソッドを作成して各画面で呼び出し
結論となった方法です。
一番愚直な実装になってしまいましたが、今回は消去法でこの方法を採用しました。

# おわりに
上手くいかず消去法で選択する形になってしまいましたが、結論の形も悪いことばかりではなくシンプルで分かりやすいかなとも思っております。
こんな方法もあるよとか、ここが悪いせいで上手くいかなかったのでは等あればコメントいただけると幸いです。

# 宣伝
株式会社start-up studioでは、コーポーレートガバナンス領域のDX推進を目指しております。
その第一弾として、複雑・膨大・専門的という三重苦を抱える決算開示業務のプロセスを劇的に効率化する「Uniforce -決算開示業務ナビゲーション- 」をリリースしました。
ご興味のある方はお問い合わせください！
https://startup-studio.co.jp/news/e4spzygrs/
Amplify APIのfunctionディレクティブでLambdaを呼び出す

![Amplify-v4.3.2](https://img.shields.io/badge/Amplify-v4.3.2-brightgreen)

# はじめに
例えば認証付きでAWS上で関数を実行したい時に、Amplify APIのfunctionディレクティブがとても便利でした。
今回はフロントエンドから特定のLambdaを呼び出す流れについてまとめさせていただきたいと思います。
https://docs.amplify.aws/cli/graphql-transformer/function/

# 実装
## API導入
```
amplify add api
```
`amplify add api`で追加します。
設定の詳細は省きますが、今回はfunctionディレクティブを利用するのでGraphQLにしてください。

## schema.graphql
`amplify/backend/api/gqllambda/schema.graphql`が生成されているので、こちらのファイルを編集して定義していきます。

```graphql:schema.graphql
type Query {
  signup(
    email: String!
    password: String!
  ): String
    @function(name: "signup-${env}")
}

```
今回はLambda上のsignup-${env}関数を呼び出すようなイメージとなります。
email/passwordのように引数を渡すことも出来ますし、`${env}`を付与することで環境に応じてLambda関数を呼び分けることも出来ます。
また、他にも便利なディレクティブが多々あり、例えば`@aws_cognito_user_pools`を付与することでユーザープール認証済みでないと呼び出せないようにしたりも出来ます。
https://docs.amplify.aws/cli/graphql-transformer/directives/

## Push
```
amplify push
```
`amplify push`で設定した内容をPushします。

## 呼び出し
フロントからの呼び出しです。
Push時に設定したファイルに`schema.graphql`の内容が実装されているのでそれを利用します。

```JavaScript
import { API, graphqlOperation } from 'aws-amplify'
import { signup } from '../graphql/queries'

await API.graphql(graphqlOperation(signup, { email: '', password: '' }))
```
TypeScriptで型を明確にしたい場合は、Push時に生成されたAPI定義ファイルをimportすることで対応出来ます。

# おわりに
個人的に初めてサーバーレスでフロントエンドアプリケーションの開発をしたのですが、今回のように「なんかLambda用意してフロントから呼び出したいなー」というユースケースはままありました。
誰かの役に立てば幸いです。
何か改善や問題等あればコメントいただけると嬉しいです！

# 宣伝
株式会社start-up studioでは、コーポーレートガバナンス領域のDX推進を目指しております。
その第一弾として、複雑・膨大・専門的という三重苦を抱える決算開示業務のプロセスを劇的に効率化する「Uniforce -決算開示業務ナビゲーション- 」をリリースしました。
ご興味のある方はお問い合わせください！
https://startup-studio.co.jp/news/e4spzygrs/
社内用QAポータルサイトを製作した話

[ミクシィグループ QAエンジニア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/mixi_qa) 2日目の記事になります。

# 概要
ミクシィには100名強のQAエンジニアが所属しています。　※協力会社からの常駐メンバーも含む
ゲーム事業やスポーツ事業、ライフスタイル事業などそれぞれが様々なプロジェクト・部署に所属しているため、
自分の所属部署以外のQAエンジニアのことを知らない人が多くいました。

そこで、社内情報横展開の活性化の一環として、社内用QAポータルサイトを製作することにしました。

:::note info
実際に製作したのが社内用QAポータルサイトだったため、
便宜上QAの話が中心になりますが、QA以外の職種でも応用できるかと思います。
:::

# 要件整理
QAポータルサイトに載せたい情報を有志でディスカッションしてまとめました。

- QAエンジニアのみ載っている組織図（マネージャー・チームリーダー・班リーダー）
- チームごとの出社状況が分かるリスト
- 各チームの紹介
- テストケーステンプレートリスト
- 社内QAエンジニアが執筆した記事まとめ（DocBase）
- Slackオープンチャンネルリスト

以下はやりたかったものの今回はオミットしたものです。

- 各種事例集リンク（不具合事例・リジェクト事例・ツール活用事例）
- QAグループ所有全端末リスト
- 社内勉強会などのまとめ
- 社内転職情報
- 他部署からのQA依頼窓口（一元管理化）

# 実装
QAエンジニアの中から自分を含む3名が実装に携わりました。

### 役割
自分：サイト製作全体のディレクション・スケジュール管理・掲載情報の収集（組織図・出社状況リスト・チーム紹介）
Aさん：掲載情報の収集全般
Bさん：サイトデザイン・実装

### 実際の流れ
3人でキックオフMTGを開き、スケジュールと役割を決め、着手します。
私はサイト全体のワイヤーフレームを引き、2人に共有したうえで
製作スケジュールを調整しつつ、掲載情報の収集のため様々な方にヒアリングを行っていきました。

最終的に私とAさんが集めた情報をBさんに展開しつつ、細かいデザインなどをすり合わせして完成に至りました。

ポータルサイトはGoogleサイトで実装しています。
GoogleサイトはHTMLやCSSなどの知識が無くても実装が行えるため、おすすめです！

製作期間は4か月程度です。
（それぞれ業務対応が立て込んで作業を中断した時期もあるため、実際はもっと少ない時間で実装しています）

# メリット・デメリット

### メリット
- QAに関する情報を集約できる場を提供できた
- 各チーム担当者（窓口）の見える可
- 各チームに紐ついている班の見える可
- メンバーごとの出社状況（社内・在宅）が分かるようになった
- テストケーステンプレ置き場から他チームのテストケーステンプレートを有効活用できる（工数削減）
- Googleサイトを利用しているため、誰でも簡単に更新できる

### デメリット
- 更新に伴う管理コストがかかる
    - 一部運営や更新をアシスタントスタッフに依頼していますが、全コンテンツの更新まで手が回っていないのが現状です

# まとめ
まだ課題点はありますが、メリットが大きい施策だと思っています。
組織が大きくなればなるほど、身近で働いている人以外のことは分かりにくくなりますし、
リモートワークが当たり前になった昨今、その傾向はより強くなったように実感しています。

情報の横展開に悩んでいる組織の方は、是非社内ポータルサイトを導入してみてはいかがでしょうか？
AfterEffects トラックマット

#■トラックマット
指定した形部分だけに反映する方法。

下記のように平面と画像を準備したとする。
平面には真ん中でマスクを用意。
![スクリーンショット 2021-11-30 13.31.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/e3401546-4cbf-cc1d-4b57-640262f6fec7.png)
![スクリーンショット 2021-11-30 13.31.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/24e40aa7-d181-0993-a45e-b5da97319242.png)

▼トラックマットを使えばこのマスク上に画像を表示できる。
アルファマットで表示したい平面を選んだとする。

![スクリーンショット 2021-11-30 13.34.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/3e57c92f-6466-6299-ba8f-cbd61440f011.png)

![スクリーンショット 2021-11-30 13.35.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/0d5cadc4-0034-af34-fdaf-1c042bf14591.png)

▼アルファ反転マットを選べばマスク以外の部分に画像を表示できる。
![スクリーンショット 2021-11-30 13.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/fd70b784-e813-edb3-bc4b-4e7663713174.png)

![スクリーンショット 2021-11-30 13.36.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/24486550-155d-acf2-392e-3f3ff0408c44.png)
查看SF中某个object所关联的所有子对象

Schema.DescribeSObjectResult R = User.SObjectType.getDescribe();
List<Schema.ChildRelationship> C = R.getChildRelationships(); 
for(Schema.ChildRelationship rel:C){
    if(rel.getRelationshipName()!=null){
         System.debug('Child Name   ->'+rel.getChildSObject());    
    System.debug('Rel Name    ->'+rel.getRelationshipName()); 
    }
          
    
}
pg_ctl: could not start server Examine the log output.

##エラー文
```
FATAL:  database files are incompatible with server
2021-11-30 13:13:39.927 JST [3826] DETAIL:  
The data directory was initialized by PostgreSQL version 13, which is not compatible with this version 14.1.
 stopped waiting
```

突然でてきた以上のエラーによりPostgresにアクセスできなくなりました。
同様の事象が発生した方のために記事にして書き残します。

##日本語訳

```
FATAL: データベースファイルはサーバーと互換性がありません。
2021-11-30 13:13:39.927 jst [3826] detail: 
 データ・ディレクトリはPostgreSQLバージョン13で初期化されており、
このバージョン14.1とは互換性がありません。
```
どうやら、僕のPostgres(クライアント側のデータディレクトリ？)が14.1にアップデートされていて、サーバー側は13verが設定されているので互換性がないよと言っているようですね。

##解決策
```
brew postgresql-upgrade-database
```
以上によりアップデートを計りました。
無事この問題については解決…が、新たな問題が発生しました。

##問題2
```
pg_ctl: another server might be running; trying to start server anyway
waiting for server to start....2021-11-30 13:21:16.287 JST [5108] FATAL:  
lock file "postmaster.pid" already exists
2021-11-30 13:21:16.287 JST [5108] HINT:  
Is another postmaster (PID 5086) running in data directory "/usr/local/var/postgres"?
 stopped waiting
```

すでにPostgresは動いていてpsqlにて無事接続されました。
こちらの警告文が流れた方は一度

```
pg_ctl status
```
で状態を確認してみると良いかもしれませんね！


##WHAT'S POSTGRES 14
https://www.postgresql.org/about/press/presskit14/ja/
公式にリンクがありました！リンク先で確認する方が早いかと！
OpenFOAM-v2012 のインストール方法(Ubuntu20.04)

OpenFOAM-v2012 を Ubuntu20.04 にインストールする際の手順と設定方法のメモ
####参考資料
- [OpenFOAM®  Installation From Source](https://www.openfoam.com/download/install-source.php)
- [OpenFOAM® Quick Build Guide](https://develop.openfoam.com/Development/openfoam/blob/develop/doc/Build.md)
- [OpenFOAM® ThirdParty Build](https://develop.openfoam.com/Development/ThirdParty-common/blob/develop/BUILD.md)

## 1. System Requirements

```
$ sudo -E apt update
$ sudo -E apt install build-essential autoconf autotools-dev cmake gawk gnuplot
$ sudo -E apt install flex libfl-dev libreadline-dev zlib1g-dev openmpi-bin libopenmpi-dev mpi-default-bin mpi-default-dev
$ sudo -E apt install libgmp-dev libmpfr-dev libmpc-dev
```

SCOTCH と CGAL をシステムにインストール

```
$ sudo -E apt install libscotch-dev libptscotch-dev libfftw3-dev libboost-system-dev libboost-thread-dev libcgal-dev
```

## 2. OpenFOAM のインストール
homeにOpenFOAM用ディレクトリを作成しておく。

```
$ mkdir ~/OpenFOAM
```

OpenFOAM-v2012.tgz と ThirdParty-v2012.tgz を ダウンロードして解凍。

```
$ tar -xzf OpenFOAM-v2012.tgz
$ tar -xzf ThirdParty-v2012.tgz
```

OpenFOAMの実行環境設定ファイルを反映させておく

```
$ source ~/OpenFOAM/OpenFOAM-v2012/etc/bashrc
```

コンパイルの実行

```
$ foamSystemCheck	        # システムの準備状況のテスト
$ foam		                # メインのOpenFOAMディレクトリに移動（失敗したら環境構成がうまくいっていない）
$ ./Allwmake -j -s -q -l	# OpenFOAMのコンパイル
```

**新しいシェルを起動して**ビルドの検証を行う。

```
$ source ~/OpenFOAM/OpenFOAM-v2012/etc/bashrc
$ foamInstallationTest
```

ユーザrunディレクトリを作り，チュートリアルをコピーして実行

```
$ mkdir -p $FOAM_RUN
$ run
$ cp -r $FOAM_TUTORIALS/incompressible/simpleFoam/pitzDaily ./
$ cd pitzDaily
$ blockMesh
$ simpleFoam
```

## 3. ParaView のインストール
依存関係のあるパッケージを先にインストール

```
$ sudo -E apt install cmake qttools5-dev qttools5-dev-tools libqt5opengl5-dev libqt5x11extras5-dev libxt-dev
```

ThirdPartyディレクトリで作業のため移動

```
$ cd ~/OpenFOAM/ThirdParty-v2012
```

CMakeの実行ファイルの場所を確認

```
$ which cmake
```

makeParaViewスクリプトの1行目を修正

```makeParaView
- #!/bin/sh
+ #!/bin/bash
```

makeParaViewスクリプトの修正後，ParaViewのビルド

```
$ ./makeParaView -cmake /usr/bin/cmake # 先ほど確認したcmakeの場所
$ wmRefresh
```

## 4. 環境設定ファイルを .bashrc に登録

インストール完了後、~/.bashrc に以下の1行を追加

```~/.bashrc
source ~/OpenFOAM/OpenFOAM-v2012/etc/bashrc
```
【コスト削減】検証環境をSlackから停止できるようにした話【QA止める君】

# 記事の内容
CAMPFIRE社内で使用している検証環境(社内では、QA環境と呼ばれている)をSlackから停止して、コスト削減した話

# 自己紹介
こんにちは、CAMPFIRE SREの榊原です。
本日はCAMPFIREアドベントカレンダーの一つとして、QA止める君(SREチームの方が命名してくれました笑)についてお話したいと思います。

# CAMPFIREの検証環境について
検証環境って大切ですよね。
新しい機能をリリースする際に、ローカルだけではなく、ちゃんと本番と同じ構成のインフラ上で動作させて、挙動を確認したり。
企業によっていろいろな検証環境があると思います。
例えば、

- 小規模なスタートアップでしたら、プロダクション環境とステージング環境のみがあって、ステージングで動作確認をする
- 中規模な企業でしたら、ステージング・プロダクションとは別に、検証環境用のインフラがあり、そこにリリースして、検証が終了したら、他のエンジニアに譲る(一つの検証環境をみんなで使い回す)

などなど。

## CAMPFIREの検証環境(QA環境)
CAMPFIREでは、githubのブランチに `qa` というプレフィックスをつけてpushすると、自動で検証環境が一つ出来上がるようになっています。
そのため、アプリケーションエンジニアは、自分が作りたいだけ検証環境を作成することができます。
この環境は、非常にエンジニアフレンドリーで、QA環境の取り合いが起こることがないのですが、1点問題があります。

### コスト問題

それは、コストが肥大化すること。
CAMPFIREのインフラ構成は、ECS(EC2)で動いているため、検証環境の数だけEC2が増えていきます。
定期的に検証環境を削除するバッチが走っているのですが、データを保持し続けたい検証環境も存在するため、高頻度で削除バッチを回すことができず、ちょっとした修正の検証環境も1週間ほど残り続け、コストが肥大化する問題がありました。

# QA止める君
そこで、QA止める君(SREチームの方が命名してくれました笑)を作成しました。

## QA止める君の概要
QA止める君は

- slackのアクションにて、現在のQA環境一覧を取得する
- 停止したいQA環境を選択
- 停止ボタンを押す

だけで、作成したQA環境を停止することができます。

## コスト削減できたのか？
はい！
CAMPFIREでは、DatadogとAWSを連携して、毎月のコストを確認しています。そこで、QA環境のみのEC2のコスト推移を確認しているのですが、QA止める君の導入以降、QA環境のコストが削減できました。

## QA止めるくんの技術構成
- slack
- API Gateway
- Lambda

にて作成しています。
slackからAPI Gatewayのエンドポイントを叩き、API Gatewayと連携したLambdaが停止の処理を行っています。

# まとめ
コスト削減は大事！
SREチームは基本的にユーザーが直接使う機能をリリースしないため、サービスの売上への貢献度が曖昧になりがちです。
しかし、コスト削減は確実に会社の利益に直結するかつ、SREの腕の見せどころでもあるため、これからもコスト削減に取り組んでいきたいと思います！

# We are hiring
CAMPFIREでは、一緒にCAMPFIREの信頼性を担保してくれるSREエンジニアを募集しています。
少しでも、興味がある方は、是非、応募してください！
SQLModel×FastAPIのチュートリアルのメモ③　SQLModelを使ったFastAPIのレスポンスモデル

今回はこのセクションの和訳です。

https://sqlmodel.tiangolo.com/tutorial/fastapi/response-model/

機械翻訳をガッツリ使って、一部意訳しているので間違いがあるかもしれません。



## SQLModelを使ったFastAPIのレスポンスモデル
それでは、FastAPIのresponse_modelをSQLModelで使用する方法をご紹介します。

### インタラクティブなAPIドキュメント¶。
これまで使用してきたコードでは、APIドキュメントはクライアントが送信しなければならないデータを知っています。

### インタラクティブな API ドキュメント UI

Swagger UIは、標準のOpenAPIを使用してすべてのデータスキーマ（データ形状）を持つAPIを定義した大きなJSONコンテンツを読み込み、それを美しいUIで表示します。

FastAPIは、Swagger UIがそれを読むためのOpenAPIを自動的に生成します。

そして、APIが扱うデータのスキーマを知るためにPydanticモデル（ここではSQLModelモデル）とタイプアノテーションを使用して、あなたが書いたコードに基づいて生成されます。

### レスポンスデータ¶について
しかし、これまでのところ、APIドキュメントのUIは、アプリが送り返すレスポンスのスキーマを知りません。

コード200の「Successful Response」の可能性があることはわかりますが、レスポンスデータがどのようになっているのかはわかりません。

### レスポンスデータのスキーマがないAPIドキュメントのUI

今、私たちはFastAPIに受信したいデータを伝えるだけで、送り返したいデータはまだ伝えていません。

今、それをやってみましょう。🤓

### response_modelの使用
response_modelを使って、送り返したいデータのスキーマをFastAPIに伝えることができます。

例えば、同じHero SQLModelクラスを渡すことができます（Pydanticモデルでもあるため）。


```py

# Code above omitted 👆 
@app.post("/heroes/", response_model=Hero) 
def create_hero(hero: Hero): 
	with Session(engine) as session: 
		session.add(hero) 
		session.commit() 
		session.refresh(hero) 
		return hero 
		
		
# Code below omitted 👇

```

### response_model¶のヒーローのリスト
Pydanticのフィールドと同じように、他のタイプアノテーションを使用することもできます。例えば、Herosのリストを渡すことができます。

まず、typingからListをインポートし、List[Hero]でresponse_modelを宣言します。

```py
from typing import List, Optional 

# Code here omitted 👈 
@app.get("/heroes/", response_model=List[Hero])
def create_hero(hero: Hero): 
	with Session(engine) as session: 
		session.add(hero) 
		session.commit() 
		session.refresh(hero) 
		return hero 
		
		
# Code below omitted 👇
```



### FastAPIとレスポンスモデル¶について
FastAPIは、このresponse_modelを使って、レスポンスのデータ検証とフィルタリングを行います。つまり、これは我々のアプリケーションとクライアントの間の契約のように機能します。
これについては、FastAPIのドキュメントであるresponse_modelを参照してください。

### 新しいAPIドキュメントのUI
ここでdocs UIに戻ると、受信するレスポンスのスキーマが表示されていることがわかります。

#### レスポンスデータのスキーマがないAPI Docs UI
クライアントは期待すべきデータを知ることができます。

#### 自動クライアント¶。
response_modelを使うことの最も目に見える利点は、API docs UIに表示されることです。

しかし、FastAPIがこのモデルを使用して応答データの自動データ検証とフィルタリングを行うなど、他の利点もあります。
さらに、スキーマは標準を使用して定義されているため、これを利用できるツールがたくさんあります。例えば、クライアントジェネレータは、多くの言語でAPIと対話するために必要なコードを自動的に作成することができます。

>#### infomation
標準について興味がある場合、FastAPIは内部的にJSON Schemaを使用するOpenAPIを生成します。
これについては、FastAPIドキュメント - ファーストステップですべて読むことができます。

### Recap
response_modelを使用して、送り返したいデータのスキーマをFastAPIに伝え、素晴らしいデータAPIを手に入れましょう。😎
Debian 11 (Bullseye) で新たにレポジトリ入りしたユーティリティたち

久々の投稿。今回は、Debian 11（リリースからすでにそれなりに経過しましたが）で新たにStable版レポジトリに入ったユーティリティを2つほど紹介してみます。

# micro (エディタ)
まずはmicroというエディタの紹介です。名前を見てピンと来た方もいるかもしれませんが、おなじみnanoエディタを意識したネーミングとなっています。

### インストールと実行
インストールは`sudo apt install micro`で。

実行ファイルの名前もシンプルにmicro（/usr/bin/micro）となっているので、端末エミュレータから`micro`で起動できます。

### 使い方
最低限、**Ctrl+q**でのエディタ終了、**Ctrl+s**でのファイル保存を覚えれば使えます。**Alt+g**でキーバインド一覧の表示、**Ctrl+g**でヘルプの表示も可能です。

### コメント
このエディタの特徴というか良さは、やはりそのシンプルさでしょう。パッケージの依存関係も*libc6*だけという少なさです。ちなみに、Debian Buster(10)でもbackportレポジトリから導入できるようです。

# bpytop (リソースモニタ)
次にbpytopというリソースモニタを紹介。こちらも明らかにおなじみの`top`コマンドを意識しています。pythonで書かれたtopという感じです。

### インストールと実行
インストールは`sudo apt install bpytop`で。pythonで書かれてるので、当然*python3*パッケージなどに依存しています。

実行は、端末エミュレータで`bpytop`です。

### 使い方
起動すると、やや懐かしいゲームのようなロード画面が現れたあと、豪華な(?)top画面のようなリソースモニタが表示されます。プログラム終了は**Ctrl-c**または**q**です。

また**Esc**でメニューが表示されますので、ここからヘルプを確認したり、オプションを操作したりすることも可能です。

# まとめ
以上、本記事ではmicroというエディタと、bpytopというリソースモニタを紹介しました。新たなプログラムが続々と生まれ、それに触れることができるのはOSSやLinuxの大きな魅力だと考えています。今後も折を見て紹介記事を書ければと考えます。
SQLModel×FastAPIのチュートリアルメモ①　

# はじめに
FastAPIの作者がSQLmodelというSQLAlchemyをベースとしたORマッパーを作成したらしい。
FastAPIを用いる際にはスキーマの作成が省略でき、より簡素にコーディングできるとのこと。
この界隈は全くの初心者ですが、気になるのでチュートリアルをみてみました。
FastAPIのチュートリアルは非常に丁寧で、一部和訳され、言及しているところも多い印象です。しかしSQLmodelの記事はまだ少ないようです。ですのでFastAPIとの連携の部分を和訳してみました。
以下、下記からの引用です。

https://sqlmodel.tiangolo.com/tutorial/fastapi/

機械翻訳をガッツリ使って、一部意訳しているので間違いがあるかもしれません。


# FastAPIとPydantic - Intro[¶](https://sqlmodel.tiangolo.com/tutorial/fastapi/#fastapi-and-pydantic-intro "Permanent link")

SQLModelが最も輝くユースケースの一つであり、それが作られた主な理由は、**FastAPI**と組み合わせることでした。✨

[FastAPI](https://fastapi.tiangolo.com/)は、SQLModelの同じ[作者](https://twitter.com/tiangolo)によって作成された、Web APIを構築するためのPython Webフレームワークです。FastAPIも**Pydantic**の上に構築されています。

この章では、これまで見てきたようなSQLデータベースのテーブルを表すSQLModelの**tableモデル**と、データのみを表す**dataモデル**（実際には裏ではPydanticモデルになっている）を組み合わせる方法を見ていきます。

SQLModelの**table**モデルと純粋な**data**モデルを組み合わせることができるのは、それだけでも便利ですが、すべての例をより具体的にするために、**FastAPI**を使ってみましょう。

最終的には、データベース内のデータを操作するための**シンプル**だが**完全**な**Web API**を手に入れることができるでしょう。🎉

## Learning FastAPI[¶](https://sqlmodel.tiangolo.com/tutorial/fastapi/#learning-fastapi "Permanent link")

FastAPI を使用したことがない場合は、続行する前に少し勉強してみるのが良いでしょう。

[FastAPI メインページ](https://fastapi.tiangolo.com/)の例を読んで試すだけで十分で、**10 分**もかからないはずです。