OmniAICreator/Qiita-1.07M huggingface dataset:
wingetで一括アップデート、バージョン固定


```
winget upgrade --all --silent
```
wingetで上記のコマンドを打つと、Linuxのapt upgradeのように、全てのアップデート可能なソフトをアップデートできる。
ただ、管理者権限のPowershellで実行しないと、各ソフトの管理者権限ポップアップが出て煩わしいことになる。


特定のソフトはバージョン固定したい場合はどうするのか。
スクリプトでごにょごよするしかないかと思っていたら、いつの間にか、
```
winget pin add <package>
```
というコマンドが追加されていた。

```
winget pin add Mozilla.Firefox
```
などとすると、upgrade --allの対象外になる。
もし、アップデートしたくなったら、個別でパッケージ名を指定すれば、通常通りアップデートできる。
```
winget upgrade Mozilla.Firefox
```
pinしたソフトの一覧は
```
winget pin list
```
とやれば、表示される。
Internet Explorer EOL - Chrome Enterpriseユーザーにとっての意味

![My-project-12.png.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486144/b8be997c-4983-7ec0-6c97-eb11e198d689.jpeg)

2022年6月、Microsoftは長寿ブラウザであるInternet Explorerのメインストリームサポートを終了する意向であり、Windows 11上のIE11デスクトップアプリケーションは無効になる。

しかし、一部のアプリケーション、特にJavaアプレットに基づくアプリケーションは、Internet Explorerでのみ確実に動作し、Chrome Enterpriseユーザーは、[Googleのレガシーブラウザサポー（LBS）](https://support.google.com/chrome/a/answer/9270076?hl=en)を介してこのコンテンツにアクセスします。

IEの無効化は、これらのアプリケーションへのアクセスを維持する必要がある企業のワークフローに大きな変化をもたらします。これらの企業では、6月からMicrosoftのEdgeとEnterprise Mode Site List（EMSL）が必要になります。![1Chrome-LBS-Infographic-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486144/d7c5df33-dfa6-7f95-7ed6-3fe0c0543030.png)
ブラウザベースのソリューションであるCheerpJは、Internet Explorerだけでなく、Microsoft EdgeやEMSLも必要としません。

**CheerpJ**
CheerpJは、ミッションクリティカルなJavaアプリケーションとアプレットへのアクセスを、Internet Explorerのサポート終了後も最新化し、維持するためのエンタープライズグレードのソリューションです。

CheerpJ Applet Runnerは、JavaプラグインやインストールなしでJavaアプレットを実行するためのChromeとEdge用のブラウザ拡張機能です。これにより、Chrome、Edge、Firefox、Safari、またはその他の最新ブラウザでJavaアプレットにアクセスすることができ、最新のITアーキテクチャで内部またはサードパーティのJavaアプレットインターフェースを使用し続けることができます。

CheerpJ Applet Runnerは、エンタープライズ設定で使用することができ、Microsoftベースのエンタープライズ・アーキテクチャ上のEdgeやChrome上でGlobal Policy Objectsを介して展開することができます。

4.5 ⭐ – 80,000+ Users 👤

素晴らしいカスタマーサポートを備えた素晴らしい拡張機能です！私たちは、民間航空機からの自動天気予報を表示する大規模で広範なアプレットを持っています。 CheerpJバージョンは高速です...本当に満足しています。
– Bill Moniger, NOAA

Cut-the-knotは、Javaを使ってアニメーション化された数学アニメの宝庫です。やっとウェブサイト全体を再び楽しむことができるようになりました。開発者の方々、本当にありがとうございました🙂。
– Mathologer Mathematics

https://leaningtech.com/legacy-modernisation-jp/

引用元：https://leaningtech.com/internet-explorer-eol-what-it-means-for-chrome-enterprise-users/
Fusion360上の電子デザイン機能を試してみる

# 背景
* 2026年6月7日に、EAGLEがなくなるとのお知らせがあった
* 正確にはFusion360にEAGLEの機能が統合され、Fusion 360 for electronicsという名前になる
* Fusion360にはすでにEAGLEの機能が統合されている

https://www.autodesk.co.jp/support/technical/article/caas/sfdcarticles/sfdcarticles/JPN/Autodesk-EAGLE-Announcement-Next-steps-and-FAQ.html

# 電子デザイン機能の特徴
* EAGLEとの互換性あり
    * EAGLEの拡張子である、sch・brd・lbrファイルを作成・編集可能
    * ERC / DRCも可能
* 基板外形やパーツの3Dモデルが作成可能
    * ライブラリの3Dモデルも、基板自体の3Dモデルも、Fusion360上で作れるので統合が楽
 * Fusion Electronicsのライブラリが最初から使用可能
    * PowerSupply等、基本的な要素は入っている
    * 3Dモデルも内蔵
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/3759ff0f-c65b-4b22-6ca2-3d0e8e42367e.png)

# 使い方
## 電子デザイン
* ファイル→新規電子デザインで、回路図とPCBと3Dモデルを統合するファイル（EAGLEでいうプロジェクト）を作成
* 作成した電子デザイン回路図・PCBを作成
    * 既存の回路図とPCBを読み込むこともできる
    * 回路図がEAGLEでいうschematic、PCBがboardにあたる
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/012f0aa5-8164-d2bb-5d93-3438aa56e1e2.png)
## 基板外形の設計
* PCB上でも書けるほか、Fusion360上のデザインのスケッチと連携することも可能
### Fusion360上のデザインのスケッチと連携
1. 新規デザイン（not電子デザイン）でスケッチを書き、PCBを作成を選択
    * 「関連付けのあるPCBを作成」を選択すると、作成元のスケッチの変更が反映される3D PCBが作成される
    * 「独立したPCBを作成」を選択すると、作成元のスケッチをコピーした3DPCBが作成され、作成元のスケッチの変更は反映されない
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/dc596327-75f6-1c8d-8e6c-35da4e54ac52.png)

2. すでに電子デザインがある場合は、2D PCBにリンク。なければ、電子デザインを作成した際に、PCBドキュメントへの参照を行う
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/1e6e05b4-40be-690c-f6e5-773d8b6c00fa.png)
3. 3D PCBを変更したときは、2D PCBにプッシュすると、電子デザインに変更が入る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/31c68736-ee3d-8cc9-3b29-a9989105b21c.png)
4. 逆に電子デザイン側で何か変更をした場合は、3D PCBにプッシュすると、3Dモデルに反映される    
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/86f34a7b-309f-efe9-333f-9b43f6064eba.png)




## ライブラリ
* ライブラリの作成・編集は新規電子ライブラリから作成
* コンポーネント（EAGLEでいうDevice）、記号（EAGLEでいうSymbol）、フットプリント（EAGLEと同様）、パッケージ（EAGLEにはなし）の4種類を作成できる
* パッケージはEAGLEにない機能であるが、Fusion360上で3Dモデルを作成して連携できる機能である
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/dbd1a1c0-f7cb-ab59-8127-56495ff57de9.png)





# EAGLEとの違い
* EAGLEだと左にあるメニューバーが上へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/d851c96d-9bff-36fb-3a0b-739b439a555d.png)
* 色味がちょっと柔らかくなった
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3324101/67eb8d66-b3e6-c847-b67f-b2606227bc72.png)

# 所感
* EAGLEと同じ操作感で使え、すぐ基板発注までいけた
* 一個一個のアイコンが大きくなっている・よく使う機能が整理されていて使いやすい印象があった
* EAGLE単体を起動するよりはちょっと重いかも
plunkerでobject viewer

# 概要
plunkerでobject viewerやってみた。

# 参考にしたページ

https://codepen.io/WartClaes/pen/QGGPJL


# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/ee7fdf37-7adf-8da9-b909-963ef4879e70.png)


# 成果物

https://embed.plnkr.co/plunk/5bEsD4d3WfwLhgwX

# サンプルコード

```
function jsonViewer(json, collapsible = false) {
  var TEMPLATES = {
    item: '<div class="json__item"><div class="json__key">%KEY%</div><div class="json__value json__value--%TYPE%">%VALUE%</div></div>',
    itemCollapsible: '<label class="json__item json__item--collapsible"><input type="checkbox" class="json__toggle"/><div class="json__key">%KEY%</div><div class="json__value json__value--type-%TYPE%">%VALUE%</div>%CHILDREN%</label>',
    itemCollapsibleOpen: '<label class="json__item json__item--collapsible"><input type="checkbox" checked class="json__toggle"/><div class="json__key">%KEY%</div><div class="json__value json__value--type-%TYPE%">%VALUE%</div>%CHILDREN%</label>'
  };
  function createItem(key, value, type) {
    var element = TEMPLATES.item.replace('%KEY%', key);
    if (type == 'string')  
    {
      element = element.replace('%VALUE%', '"' + value + '"');
		}
    else 
    {
      element = element.replace('%VALUE%', value);
    }
    element = element.replace('%TYPE%', type);
    return element;
  }
  function createCollapsibleItem(key, value, type, children) {
    var tpl = 'itemCollapsible';
    if (collapsible) 
    {
      tpl = 'itemCollapsibleOpen';
    }        
    var element = TEMPLATES[tpl].replace('%KEY%', key);
    element = element.replace('%VALUE%', type);
    element = element.replace('%TYPE%', type);
    element = element.replace('%CHILDREN%', children);
    return element;
  }
  function handleChildren(key, value, type) {
    var html = '';
    for (var item in value) 
    { 
      var _key = item,
          _val = value[item];
      html += handleItem(_key, _val);
    }
    return createCollapsibleItem(key, value, type, html);
  }
  function handleItem(key, value) {
    var type = typeof value;
    if (typeof value === 'object') 
    {        
      return handleChildren(key, value, type);
    }
    return createItem(key, value, type);
  }
  function parseObject(obj) {
    _result = '<div class="json">';
    for (var item in obj) 
    { 
      var key = item,
          value = obj[item];
      _result += handleItem(key, value);
    }
    _result += '</div>';
    return _result;
  }
  return parseObject(json);
};

```

以上。
git commitしたけど、git pushしていないファイルを抽出するコマンド

# コマンド

```sh
git diff @{u}.. --name-only
```

# 背景

husky使って、`pre-push`(push前） に、pushしたくないファイルがあったら、pushを阻止するようなアクションをしたかった時に探したコマンド
tar xzvf が覚えられないので tar --extract --gzip --verbose --file= を使う

表題の通りです

tgz展開で検索すると `tar xzvf` ばかり出てくるのでこの記事を書きました
個人的には `x` より `--extract` のほうが分かりやすくて好きだし、 `--file=` で繋がってるのも分かりやすくて好きです

長すぎる？でも大丈夫
`tar xf`
`tar --extract --file=`
`tar --get --file=`
でも展開できます
どれか1つ覚えるだけでも良いと思います

# tar.gz展開
```shell
# tgz展開で検索すると必ず出る大人気コマンド！
tar xzvf file.tar.gz

# 上と同じ
tar --extract --gzip --verbose --file=file.tar.gz

# gzip,verboseを省略しても展開できる
tar --extract --file=file.tar.gz
```

`x` `--extract` `--get` はアーカイブから展開するという意味

`z` `--gzip` `--gunzip` `--ungzip` でgzipという圧縮形式を指定しているが、省略してもファイルから自動で判別して展開してくれる模様(パイプでない限り)

`v` `--verbose` で展開状況を表示するが、不要なら省略できる

`f` `--file=` でファイルを指定する

# tar.gz圧縮
```shell
# tgz圧縮で検索すると必ず出る大人気コマンド！
tar czvf file.tar.gz directory

# 上と同じ
tar --create --gzip --verbose --file=file.tar.gz directory

# verboseを省略しても圧縮できる
tar --create --gzip --file=file.tar.gz directory
```

`c` `--create` はアーカイブを作るという意味

`z` `--gzip` `--gunzip` `--ungzip` でgzipという圧縮形式を指定する
これを省略してしまうとファイルの中身はtar.gzではなくtarになってしまうしファイルサイズが小さくならない
(面白いことに `--gunzip` `--ungzip` が圧縮にも使える)

`v` `--verbose` で圧縮状況を表示するが、不要なら省略できる

`f` `--file=` でファイルを指定する
Những trường đại học uy tín nhất tại Úc

Dự định du học tại Úc, không ít sinh viên quốc tế đang ấp ủ ước mơ của mình, mong muốn được học tập tại các trường thuộc Go8 (Group of Eight Australia) – một liên minh gồm 8 trường đại học hàng đầu về chất lượng giáo dục tại Úc. Dưới đây, Visa Đồng nai sẽ giới thiệu chi tiết các trường đại học danh tiếng hàng đầu tại Úc, để bạn có cái nhìn tổng quan về các cơ hội du học tại đất nước này.
https://visadongnai.com.vn/nhung-truong-dai-hoc-uy-tin-nhat-tai-uc/
NeosVR コンパイラ その9

# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
phoenixのapiサーバを使ったコンパイラ書いてみた。

# 俺コード

- このコードはlogixのTノードとDisplayノードを生成する。

```

use Ore test0
new LogiX.T
new LogiX.Display
add LogiX.T
add LogiX.Display  

```

# 写真

![2023-09-27 10.07.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/db0d7d13-751d-a3b8-c752-ebbb6e2f6654.jpeg)

# 成果物

- コンパイラは、こちら。

https://embed.plnkr.co/plunk/1XTEfvcjxG7qkiV9


# 実行確認の手順。

- 上のページで生成されたjsonを、メモ帳で「test0.json」で保存する。

- NeosVRを起動して、セッションに入る。

- ファイルブラウザを開いて、「test0.json」をダブルクリックする。

- 画像の様に表示されれば、成功です。

以上。
Github Pagesのおかげで救われた話


AWSの使用料で完全にあきらめていたWebサイト「FlameValue」
Github Pagesのおかげで一度完全につぶれたWebサイトを復活させることができました！

https://minegishirei.github.io/flamevalue_site/code/vue-notus/dist/index.html?name=Scala

このサイトは**プログラミング言語、フレームワークの価値を「実際に掲載されている求人情報を元にスコアリング」し、「今市場価値が最も高いプログラミング言語、フレームワークは何か？」** という問いに答えるべく構築された、**「フレームワーク、プログラミング言語スコアリングサイト」**　。

だったのですが...
AWSの使用量が圧迫してきたので3か月前にAWSアカウントごと削除し、完全に埋没してしまいました。

ところが今回、Github Pagesを使用することにより、**完全につぶれてしまったWebサイトを復活させることが出来ました！**


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/6f2abd21-40ea-0621-b3c2-06ec688ab5fa.png)



# 以前の構成の問題点：お金がかかる

以前はサーバーにAWSを使用してましたが... 月3000~5000円かかってました。

> 構成：AWS + Django

うまい具合にマネタイズできるかな～と思っていたのですが、収益はほぼ0...。
AWSの積み重なる出費に心が折れて完全にサービス終了となってました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/b09667a2-ac78-7468-2cad-732b09295747.png)

以前投稿した記事

https://qiita.com/minegishirei_v2/items/dd91d39bad157a927ffb

# 今回の構成のメリット：無料！

**Github Pagesは完全に無料です。**
（サーバーではないのでデータベース、バックエンドは自力で用意しなければなりませんが...）



> 構成：Github Pages + Vue


Vue.jsはSPAフレームワークでStaticなウェブサービスとして動作します。
前作ではEC2上にサービスとしてDjangoを使用してましたがGithub Pagesを利用するためには静的サイトとしてビルドできる必要があります。
そのため、Github Pagesの選択肢としては以下の3つが当てはまると思います。

- React
- Vue.js
- 生のhtml css javascript

今回は初心者にも簡単なVue.jsを活用しました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678228/311013da-fd9d-1655-8356-9f96c21b123c.png)



# 最後に

AWSの利用料に心が折れたらGithub Pagesを利用しましょう！

最後までご視聴ありがとうございました！
画像に文字を入れる

## 入力画像
![pic_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/b50e3cbf-888f-5240-bdf7-0bad89a2629d.jpeg)

## 出力画像
![fuji_x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/18d98aaf-2461-9d3a-3bcb-1db07ec4c76a.jpeg)

 ## 変換スクリプト

```bash
OMMAND="convert -pointsize 300 -gravity south -font Times-Roman -annotate 0"
#
$COMMAND "Mt. Fuji"  pic_1.jpg fuji_x.jpg
```

## 確認したバージョン

```text
$ convert --version
Version: ImageMagick 6.9.11-60 Q16 x86_64 2021-01-25 https://imagemagick.org
Copyright: (C) 1999-2021 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC Modules OpenMP(4.5) 
Delegates (built-in): bzlib djvu fftw fontconfig freetype heic jbig jng jp2 jpeg lcms lqr ltdl lzma openexr pangocairo png tiff webp wmf x xml zlib
```
AWS認定 デベロッパーアソシエイト 受験記録

# まずは結果

無事合格。
感覚としては少しギリギリかと思ったが、80%ほどの正答率だったようだ。(合格ラインは720/1000)

# なぜチャレンジしたのか
業務の中でAWSを使っているので、自己研鑽のために。
また、他のアソシエイトレベルの認定資格であるソリューションアーキテクト、SysOpsアドミニストレーターについては取得済みであるため、残りのデベロッパーにも挑戦したいという気持ちからである。
https://pages.awscloud.com/jp-traincert-certification-challenge-associate-2023-terms-and-conditions.html

# 受験前のAWSスキル
業務でAWSを利用している。期間としては1年半くらい。
ただし主に担当しているのがインフラの構築と運用であり、AWS環境での開発というのはほとんど経験がない。
また、前述したとおり同じくアソシエイトレベルのAWS資格はすでに取得済みである。

# 勉強方法について

参考書を読む → ひたすら問題集を解く。
[ポケットスタディ AWS認定 デベロッパーアソシエイト (アソシエイト試験ポケットスタディ)](https://www.amazon.co.jp/%E3%83%9D%E3%82%B1%E3%83%83%E3%83%88%E3%82%B9%E3%82%BF%E3%83%87%E3%82%A3-AWS%E8%AA%8D%E5%AE%9A-%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88%E8%A9%A6%E9%A8%93%E3%83%9D%E3%82%B1%E3%83%83%E3%83%88%E3%82%B9%E3%82%BF%E3%83%87%E3%82%A3-%E5%B1%B1%E4%B8%8B%E5%85%89%E6%B4%8B/dp/4798063401/ref=asc_df_4798063401/?tag=jpgo-22&linkCode=df0&hvadid=451992632781&hvpos=&hvnetw=g&hvrand=18279873619447062112&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009343&hvtargid=pla-1135002337581&psc=1&th=1&psc=1)

問題集については他の人も言っているようなWEBで公開されているものを利用した。個人的には参考書を読むよりも問題集をひたすら説くのが効果があると感じる。
[TechStock](https://cloud-license.com/)

きちんと勉強した期間は2週間くらい。ただ、以前SysOpsの資格勉強をしてからそれほど時間がたっているわけでもないので、それも含めると60時間くらいの勉強時間になる。



# 所感
普段の業務ではAWSインフラの構築と運用を主に担当しているため、デベロッパーの内容はあまり馴染みのないものであった。デベロッパーが一番難易度が低いという噂も聞いていたが、個人的には受験終了時の感覚は一番不安があった。(合格かどうか怪しい感じだった)
これでアソシエイトレベルの資格は全て取得した。AWS認定の資格にはもう１レベル上のプロフェッショナルレベルの資格があるため、より力をつけてそちらにも挑戦したい。
。
Devcontainerを使ったHaskell環境構築

# はじめに

VSCodeのDevcontainer機能を使うとHaskellの環境構築がとても簡単だったため紹介します。
HLS(Haskellの言語サーバ)が自動で用意されるため、自動補完などのコーディング支援機能が使える状態になります。

# 前提

以下のソフトウェアを使用します。

- Visual Studio Code(VSCode)
- Docker

# 準備

Devcontainerで使用するDockerファイルを準備します。

1. 好きな場所にプロジェクト用のフォルダを作成し、VSCodeで開きます。
   この記事では「haskell-learn」という名前にしてみました。
2. VSCodeの拡張機能「Dev Containers」をインストールします。
   https://github.com/microsoft/vscode-dev-containers/tree/main/containers/haskell
3. ウィンドウ左下の緑色のアイコンをクリックします。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331003/855ecf79-3119-6218-b450-d084f1caa6d4.png)
4. 「開発コンテナー構成ファイルを追加...」をクリックします。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331003/35143fbb-4d0c-44c1-27ec-6ea33f8d52c6.png)
5. 「Haskell」で検索し、「Haskell コミュニティ」を選択します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331003/c1453233-6082-71ab-6544-b2a2e691f678.png)
6. いくつか選択画面が表示されるため、すべて「OK」を選択してください。
7. 最後まで選択するとプロジェクトフォルダ直下に「.devcontainerフォルダ」が作られます。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331003/5495878d-b17a-08ad-26c8-404cde2fb62d.png)

# Devcontainerの起動

Devcontainerを起動します。

1. ウィンドウ左下の緑色のアイコンをクリックします。
2. 「コンテナーで再度開く」を選択します。 選択するとコンテナが起動します。
   初回の場合、コンテナのビルドを行うため時間がかかります。
3. コンテナの起動が成功すると、プロジェクトフォルダがコンテナに接続された状態になります。
   これでHaskellプログラムをビルド・実行できるようになりました。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331003/659704ad-3c54-2948-3e48-221b9c9f6aa6.png)

# Hello Worldをやってみる

Hello Worldをやってみます。

1. VSCodeで開いているプロジェクトフォルダの直下に以下のファイルを作成します。

   ```haskell:hello.hs
   main = putStrLn "Hello World"
   ```
2. ターミナルで以下のコマンドを実行します。

   ```bash
   runghc hello.hs
   ```
3. ターミナルに`Hello World`と表示されれば成功です。

# Devcontainerの終了

Devcontainerを終了し、ホストOSでフォルダを開いた状態に戻します。

1. 起動時と同様にウィンドウ左下の緑色のアイコンをクリックします。
2. 「フォルダーをローカルで再度開く」を選択します。

# 参考サイト

- Devcontainer(Remote Container) いいぞという話 <span dir="">\~</span>開発環境を整える<span dir="">\~</span>
  https://qiita.com/yoshii0110/items/c480e98cfe981e36dd56
- 今回利用したHaskell用DevcontainerのGitHub
  https://github.com/microsoft/vscode-dev-containers/tree/main/containers/haskell
- Haskellの実行　まずはHello World
  https://qiita.com/Nipper1357/items/4b4b9d60d8067fcf238c
【Docker】JupyterNotebook TensorFlowでNVIDEA GPUを使う

# はじめに
　機械学習周りは得に利用ライブラリのバージョンが大切になってくると考えている。
　実環境にPythonやその他利用ライブラリをインストールしても良いが、既存のライブラリ等とバージョンが干渉する恐れがあり、仮想環境を用いるのが望ましい。
pyenv等の仮想環境を用いても良いが、今回はDockerを用いた仮想コンテナで環境構築を行う。

# 開発環境
|環境|詳細|
|----|----|
|OS|ArchLinux|
|Docker|24.0.5|
|DockerCompose|2.20.3|

　本記事ではArchLinuxを用いて解説を進める。パッケージの取得方法などは利用するOSに依存する為異なるが、大まかな流れは同じとなる。
　また、Dockerは既にインストール済みであることを前提とし、取得方法は省略する。

# 環境構築
## nvidia container toolsのインストール
　はじめに、Gitからnvidea container toolsのインストールを行う。[AUR](https://aur.archlinux.org/packages/libnvidia-container-tools)に載っているGit Clone URLからコードを取得しインストールする。

```bash:shell
$ git clone https://aur.archlinux.org/libnvidia-container.git
$ cd libnvidia-container
$ makepkg -si
```
　なお、インストール中に依存パッケージの取得に失敗した場合はpackmanをアップデートする必要がある。
```bash:shell
$ sudo pacman -Syu
```
　ubuntuなどArchLinux以外のOSを利用している場合、NVIDEA公式にインストール方法が載っているため参照。

https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html

 また、GPUを利用する場合ドライバが必要になる。`nvidia-smi`コマンドでレスポンスがあればインストールされている。

https://wiki.archlinux.jp/index.php/NVIDIA

## JupyterNotebookの立ち上げ
 Dockerコンテナを用いてJupyterNotebookを立ち上げる。[TensorFlow公式](https://www.tensorflow.org/install/docker?hl=ja)を参考にDockerfileとdocker-compose.ymlファイルを作成する。

```Dockerfile:Dockerfile
FROM tensorflow/tensorflow:latest-gpu-jupyter

RUN apt update && apt -y install tzdata
ENV TZ=Asia/Tokyo

RUN pip3 install $PACKAGE   # 必要なパッケージがある場合はインストール

CMD ["jupyter", "notebook", "--ip=0.0.0.0","--port=8888", "--no-browser", "--allow-root", "--NotebookApp.token="]
```

```yml:docker-compose.yml
version: "3.6"

services:
  main:
    build: .
    volumes:
      - .:/main
    working_dir: /main
    ports:
      - 8888:8888
    # ここからGPUの設定
    deploy:
      resources:
        reservations:
          devices:
            - driver: nvidia
              count: 1
              capabilities: [gpu]
```

これでDockerを立ち上げるとJupyterNotebook起動する。[localhost:8888](http://localhost:8888)にアクセスすることでJupyterNotebookにアクセスできる。
```bash:shell
$ docker-compose up
```

## GPUの確認
最後に、コンテナ内でGPUを認識しているか確認する。
```bash:shell
$ docker-compose exec main bash
```
上記コマンドでコンテナ内に入り、ドライバーがインストールされているか確認したコマンドで認識しているか確認する。
```bash:shell (コンテナ内)
root$ nvidia-smi
```

# おわりに
　以上でDockerを用いたJupyterNotebook上のTensorFlowでNVIDEA GPUを利用する環境構築が完了となる。では、良い深層学習ライフを。
【JSTQB ALTM】シラバスまとめ（第3章）

<iframe src="https://www.slideshare.net/slideshow/embed_code/key/GtnxbGo8fmqdBC?hostedIn=slideshare&page=upload" width="476" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

:::note warn
筆者（私）独自の解釈・理解をまとめた資料のため、誤りがある可能性があることにご留意ください
:::
元に戻したい時

今のブランチを色々触る前に戻したい時、
インテリj右上のくるんとした灰色の矢印（時計マークの横）![スクリーンショット 2023-09-27 18.08.41（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112450/c6f774a4-5146-c913-8df3-79484f736ce6.png)
を押して、元に戻したいディレクトリやクラスをチェックすると、元に戻せる！！
モバイルアプリのアクセシビリティ対応（スクリーンリーダー、VoiceOver）

# はじめに
以前に[プロジェクトで行ったVoiceOver対応(読み方の変更)](https://qiita.com/repepe2en/items/42c8dc1e679a31c96c24)を投稿しましたが、今回はアプリ全体で行った対応について、目標にしているところとその対応方法をまとめて備忘録としてまとめます。

自分の参加しているプロジェクトでは[Apache Cordova](https://cordova.apache.org/)というモバイルアプリ開発向けのフレームワークをベースに開発を行っています。
技術的には3割ほどネイティブの実装で他はwebの技術を利用しています。
なので、iOS,Androidとタグにありますが、この記事ではHTML,TypeScriptでの対応方法です。

# 方針

[Web Content Accessibility Guidelines (WCAG) 2.0](https://waic.jp/translations/WCAG20/Overview.html)に準拠したアプリの実現。
[WAI-ARIA](https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics)を用いたSR対応を基本としている。

# 実装例一覧

|No|やりたいこと|方法|実装例|備考/参考|
|--|--|--|--|--|
|1|指定した読ませ方をしたい<br>（画面には表示させずに支援技術に対してのみラベルを設定した）|aria-label="読ませたい文言"|``` <ion-icon name="icon-external" aria-label="外部遷移"></ion-icon>```||
|2|読ませない|aria-hidden="true"|■固定値<br>```<ion-icon name="icon-arrow-right" aria-hidden="true"></ion-icon>```<br>■動的に切り替える <br>①<br>```<ion-icon name="icon-sample" [attr.aria-hidden]="sampleFlag"></ion-icon>```<br>②<br>```<ion-icon name="icon-sample" [attr.aria-hidden]="sampleFlag ? true : false"></ion-icon>```||
|3|フォーカスをしたい|tabindex="0"|■固定値<br>```<p tabindex="0">サンプルテキスト</p>```<br>■動的に切り替える <br>```<p  [attr.tabindex]="sampleFlag ? '0' : '-1'">サンプルテキスト</p>```||
|4|フォーカスをしたくない|tabindex="-1"|■固定値<br>```<p tabindex="-1">サンプルテキスト</p>```<br>■動的に切り替える<br>```<p [attr.tabindex]="sampleFlag ? '0' : '-1'">サンプルテキスト</p>```||
|5|画像を読ませたい|alt="読ませたい文言"|```<img src="sample.png" alt="'サンプル画像'" />```||
|6|テキストをひとまとまりで読ませたい|・各OS用に対応をする<br>【iOS】role="text"<br>【Android】tabindex="0"<br>　キーボード操作時に影響が出るため、キーボード操作時はtabindex="-1"にする|sample.html```<p role="text" tabindex="0">1行目のサンプルテキスト。<br>2行目のサンプルテキスト</p>```<br>sample.ts<br>if(キーボード操作時){<br>element.setAttribute('tabindex', '-1');<br>} else{<br>element.setAttribute('tabindex', '0');<br>}||
|7|変更をアナウンスしたい|role="status"<br>aria-live="assertive"|sample.html<br>```<p role="status" aria-live="assertive" [innerHTML]="sampleText"></p>```<br>sample.ts<br>if(ボタン押下時){<br>this.sampleText = 'ボタンを押下したよ'<br>} else{<br>　this.sampleText = ''<br>}||
|8|スクリーンリーダー使用時のみ読ませる|sr-onlyクラスを作成|[プロジェクトで行ったVoiceOver対応(読み方の変更)](https://qiita.com/repepe2en/items/42c8dc1e679a31c96c24)を参照||

# 実装時の考慮点

・要素に正しくフォーカスが当たるか。
　cssのプロパティの影響で当たらない場合があるため。
・要素を読み上げられるか。
・スワイプ操作で次/前の要素に移動できるか。
・通常使用時と同様に、アクションする要素がダブルタップでアクションする。
　目的の要素にフォーカスが当たっているように見えて、アクションしない子要素などに当たっている場合があるため。
・アクセシビリティ用属性はタグ内の末尾につける
　※形式統一のため
Next.jsのSSG,SSRとは

# そもそもなぜNext.jsは必要か
***Reactだとページ数が少ない小規模開発には向いていますが、ページ数が多い大規模開発では
Next.jsが向いています***。読み込み速度もnext.jsを使った方が速いです。
ですが、ReactはSPA化ができてRailsやLaravelで作ったアプリに入れることができるメリットが
あるので、Reactがダメって訳ではないです。

詳しい説明はこの後します。

# プリレンダリング(Pre-rendering)
SSG、SSRの前に基礎知識である```Pre-rendering```についてです。

```Pre-rendering```とは***事前にHTMLを生成し、レンダリング***することです。
***Reactでは、レンダリングはユーザーのページアクセス時に行われるのでどうしても処理速度が遅くなってしまいます***。

しかし、***Pre-renderingをすると事前に生成しているHTMLファイルを出力するので、表示速度が速くなります。***
![スクリーンショット 2023-09-27 17.30.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/edde9cc4-a299-ded8-81de-f6a9802dd7e8.png)

> 引用　https://midorigame-jo.com/ssg-ssr/

***Next.jsはデフォルトで全ページに対してPre-rendering***をするみたいです。

# SSGとは
```SSG(Static Site Generator)```は```「静的生成」```のことです。

アプリが完成して***デプロイしよーという時に、ビルド(デプロイできるように組み合わせる)***します。
```SSGはビルドの時にHTMLを1度だけ生成します```。
そしてユーザーから***各リクエストに対して再利用でき、生成されたHTMLをユーザーに返せます。***

公式では基本的には、SSGを使用することを推奨しているみたいです。

![スクリーンショット 2023-09-27 17.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/3897eb46-178b-0da8-699a-89f42d237d44.png)

> 引用　https://midorigame-jo.com/ssg-ssr/


# SSRとは
```SSR(Server Side Rendering（サーバーサイドレンダリング）)のこと```です。
***SSRはクライアントからのリクエストの度にHTMLを生成***します。
リクエストの度にHTMLを生成するので、SSGに比べるとパフォーマンスが悪いです。

![スクリーンショット 2023-09-27 17.49.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/5a5f3775-04e0-f9b1-7e28-3a0f26f6b87d.png)

> 引用　https://midorigame-jo.com/ssg-ssr/

# SSG,SSRの使い分け

|SSG|SSR|
|--|--|
|ブログ、ドキュメント、Qiitaなど|ユーザーの更新画面|
|ECサイトなどの商品ページ|SNSのタイムライン|

⚫︎SSGは情報などを更新せず1回情報を取得できればOKです。
つまり***ビルド後に変更する必要がないページに使われます。***

⚫︎SSRはユーザーの情報などを更新したります。
つまり***ユーザーのリクエストによって表示内容が変わるページで使われます***。


# 資料

https://qiita.com/manabito76/items/fe91eefe11a74dcf5126

https://www.udemy.com/course/nextjs-microblog-for-beginner/

https://midorigame-jo.com/ssg-ssr/
Composeでカスタムのなんちゃってクロスフェードを作る

## 経緯

現在アプリでいろんなViewをComposeに置き換え中です。

その中で、アニメーションで子要素の表示が切り替わる`CrossFadeView`という内製のカスタムViewGroupがありました。そしてComposeにはもともと[Crossfade](https://developer.android.com/jetpack/compose/animation?hl=ja#crossfade)が備わっています。

ただ、内製の`CrossFadeView`は実際はクロスフェードせず、前のViewが完全にフェードアウトしてから次のViewがフェードインするという、**"嘘CrossFade"** だったのです……なんとまあ……。[^fact]

[^fact]: 実はこのCustomViewGroupは自分が作っている。
[^fade]: [fade through](https://m2.material.io/design/motion/the-motion-system.html#fade-through) というらしい

|クロスフェード|嘘クロスフェード[^fade]|
|:---:|:---:|
|![スクリーンショット 2023-09-27 16.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/721314/62a6aea4-8e35-ffc3-1e35-f51fed578e95.png)|![スクリーンショット 2023-09-27 16.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/721314/4f296e3f-5b4c-f539-9eeb-7b07dd662619.png)|

そうなると、正解の動きをするComposeのCrossfadeは使えませんね（トホホ）

## カスタムのAnimetionで作ろう編

実現したいのは **表示→fadeout→fadein→表示→fadeout→fadein…** という風に時間経過で表示が切り替わっていくアニメーションです。

今回のような要件を満たすカスタムのAnimationを作るにあたり、大きく分けて[Animatable](https://developer.android.com/jetpack/compose/animation?hl=ja#animatable)
と、[AnimatedContent](https://developer.android.com/jetpack/compose/animation?hl=ja#animatable)を使う方法の２通りを比較しました。

特にAnimatedContentはやりたいことがそのまま簡単に実現できそうでしたが、少々怖い注意書きが…。

![スクリーンショット 2023-09-27 16.32.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/721314/2b8e5ebd-4b44-526f-36cd-da4e6188602b.png)

ので、Animatableを使って実装することにしました。

早速ですがこんな感じ。

```kotlin
@Composable
fun MyCrossFadeIndexed(
    size: Int,
    content: @Composable (Int) -> Unit,
) {
    var index by remember { mutableStateOf(0) }
    val alpha = remember { Animatable(1f) }

    LaunchedEffect(key1 = alpha) {
        while (true) {
            delay(4000)
            alpha.animateTo(targetValue = 0f,animationSpec = tween(durationMillis = 300))
            index = (index + 1) % size
            alpha.animateTo(targetValue = 1f,animationSpec = tween(durationMillis = 300))
        }
    }

    Box(modifier = Modifier.alpha(alpha.value)) {
        content(index)
    }
}
```

こちらがアニメーションの本体です。

```kotlin:アニメーション部分
    var index by remember { mutableStateOf(0) }
    val alpha = remember { Animatable(1f) }

    LaunchedEffect(key1 = alpha) {
        while (true) {
            delay(4000)
            alpha.animateTo(targetValue = 0f,animationSpec = tween(durationMillis = 300))
            index = (index + 1) % size
            alpha.animateTo(targetValue = 1f,animationSpec = tween(durationMillis = 300))
        }
    }
```

AnimatableのalphaをBoxのModifier.alphaに入れて、
4秒表示したら0.3秒かけてfadeout、完全に消えたタイミングで表示するViewを切り替えて次のViewをまた0.3秒かけてfadeinさせるという方法になります。
（contentはindexを受け取って、何を表示させるかを選択する想定です）

## 余談

このあとコードレビューで「Composableの可変長引数(vararg)を引数に取ればいいんじゃない？」とのご指摘が……かっこよすぎる。
Web Share API で、canvasに描画した画像と、指定したハッシュタグをTwitterの投稿にコピーペーストする

## 使用想定シーン
画像合成して特定のハッシュタグでつぶやくキャンペーンの時に、サーバーや端末に合成画像を保存する事なく、コピーペースト操作でハッシュタグと画像をツイートしてもらう。
ユーザーに対して操作手順の説明は必要。

### html
```
<div class="preview">
  <canvas id="js-previewCanvas" class="preview__canvas"></canvas>
  <img id="js-previewImage" class="preview__image" src="" />
  <p class="preview__clipboard">
    <button id="js-clipboardButton" class="preview__clipboardButton">クリップボードにコピー</button>
  </p>
</div>
```

### script
```
const previewCanvas = document.getElementById('js-previewCanvas');
const previewImage = document.getElementById('js-previewImage');

const base64 = previewCanvas.toDataURL('image/jpeg', 1.0);
previewImage.src = base64;

const createJpegFile4Base64 = (base64, name) => {
  // base64のデコード
  const bin = atob(base64.replace(/^.*,/, ''));
  // バイナリデータ化
  const buffer = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i += 1) {
    buffer[i] = bin.charCodeAt(i);
  }
  // ファイルオブジェクト生成
  return new File([buffer.buffer], name, {type: 'image/jpeg'});
};

document.getElementById('js-clipboardButton').addEventListener('click', async () => {
  const file = await createJpegFile4Base64(previewImage.src, 'share-image.jpg');
  const shareData = {
    files: [file],
    title: 'share',
    text: '#ハッシュタグa #ハッシュタグb',
  }
  try {
    await window.navigator.share(shareData);
  } catch (err) {
    console.log(`Error: ${err}`);
  }
});
```

## ユーザーの操作手順
- Canvasに合成画像を描画する。(この記事ではスキップ)
- `クリップボードにコピー` ボタンをクリック。
- ブラウザのダイアログから `コピー` をクリック。
- Twitterの投稿画面でペースト。 `#ハッシュタグa #ハッシュタグb` と、生成された画像をペーストできる
WindowsSubsystem for Androidにアプリをインストールする方法

## WSAのインストール
https://www.microsoft.com/store/productid/9NJHK44TTKSX?ocid=pdpshare

これをストアからインストールします。
このアプリはWSA本体のインストールのためだけに存在しているといっても過言ではない。

インストールについては基本的に[次へ]を押すだけで大丈夫です。

## adbで接続できるようにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557115/756a4d6a-4bd4-3dd9-8d65-6811a7e2196d.png)
アプリ一覧にAndroid™用… が追加されていますのでそれを起動。
おそらく初回はAmazonアプリストアが立ち上がる。
そっ閉じしてもう一度起動しよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557115/62688e8f-7ce3-0c7f-02fd-acf47a57b014.png)
次は上のようなウィンドウが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557115/6945ba62-2266-9803-b0fe-2efce1fc9560.png)
詳細設定を開き開発者モードをオンにする。
これでadbできるようになった。
## adbする
adbのインストールは済んでいるものとして話を進める。
ターミナルを起動し次のコマンドを実行。
```
adb connect 127.0.0.1:58526
```
おそらく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557115/53b171e8-cb4a-9213-0971-996a801df5f1.png)
こんなダイアログが出るので、「このコンピューターから…」にチェックを入れ許可、もう一度コマンドを実行する。
`adb devices` を実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557115/e43878a6-4fb4-5a53-27cd-d162a6d117db.png)
ちゃんと接続されている。
## アプリのインストール
adbでアプリをインストールするにはapk形式のファイルが必要です。
今回は適当にビルドしたYouTubeRevancedを入れます。
コマンドはいたって簡単。
```
adb install <apkfile>
```
です。
```
Performing Streamed Install
Success
```
というログが出ればインストールは成功。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557115/268ccf5a-8df1-fc1d-48e8-70924cddede7.png)
ここにも出る。やったね。
## 以上
以上です。メモ的な感じでここに残しておきます。
OpsRamp カスタムインテグレーションでレスポンスをパースする方法

本記事では、OpsRampのカスタムインテグレーションでレスポンスをparseする方法について説明します。

# 概要
OpsRampのカスタムインテグレーションでは、アウトバウンドインテグレーションでリクエストしたシステムからのレスポンスがJSONまたはXMLであればパースすることができます。
これを使用することにより、レスポンスの値をインシデントのカスタムフィールドに格納したり、ワークフローの変数として使用することが可能です。

# 設定方法
アウトバウンドインテグレーションの設定画面下部で設定することが可能です。
Setup > Integration and Apps > Custom > Outbound (OpsRamp to custom) > Integration Events

レスポンスは、$\<key\>の様に指定します。
例えば、レスポンスが下記のような場合、$fooと指定します。
``` JSON:json_response
{
    'foo':'bar'
}
```

- インシデント
インシデントの場合、カスタムフィールドを選択し、そのカスタムフィールドに格納したいレスポンスを指定します。
![incident.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344939/67737081-a7f7-c3a0-d319-7c3015fc7510.png)


- ワークフロー
ワークフローの場合、任意の変数名を指定し、その変数に格納したいレスポンスを指定します。
ワークフロー側でその変数を使用することが可能です。
![workflow.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344939/22511036-03fc-b699-c5a5-9560ea1aa3ac.png)

# 使用例
[OpsRamp カスタムフィールドを使用したChatシステムのスレッドへのインシデント通知](https://qiita.com/vistanet-kh/items/bf6b4b4230ce988327d1)


---------------------------------------
[<img width = 250 height = 200 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344939/111de30a-4d33-aa33-5c7d-83d9015093e6.png">](https://www.vistanet.jp/knowledge-base/)
カスタムフックを 2重処理して React に怒られた話【Minified React error #321】

## はじめに
React制のサイトを修正して本番環境にホスティングし、動作検証していると下記のエラーが表示されました。
ややこしいことに、開発環境では何も警告など表示されず**本番環境でのみ出てきたのです**。
もし筆者と似たような方がいればエラー文章の検索でヒットして手助けできれば幸いです。

> Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

デバックするにあたって日本語の情報はいくつかあったのですが自身の現象には該当せず解決に少し苦労しました。

::: note info
デバック時に目を通した日本語の記事を貼っておきますので必要に応じてチェックしてみてください！
- [WPのブロックエディタでUncaught Error: Minified React error #321のエラー:メモ](https://webutubutu.com/webdesign/10254)
- [Minified React error～エラーの解決方法と詳細情報を見る方法](https://cpoint-lab.co.jp/article/202102/18772/)
:::

## エラーの原因
（おそらく）自身で用意したカスタムフックの2重処理が原因でした。すみませんでした。

## ページ移動後のブラウザバック時に発生していた
当該エラー（#321）は、具体的にはページ遷移のクリックイベントを行った後のブラウザバック時に発生していました。ルーティングには`React Router`を使っており、サブページからTOPページへ移動する際に`Link`をクリックするとページ移動でき、ブラウザバックも問題なく行えるなど期待する挙動はしてくれるものの当該エラーが表示される、といった次第です。

## 試行錯誤して時間を浪費

エラー文を読むと詳しい情報が記載されたページへのリンクを促されているのでそちらで情報を確認。
> （...中略）先ほど発生したエラーの全文は次のとおりです：無効なフック呼び出しです。フックは、関数コンポーネントの内部でのみ呼び出すことができます。これは、以下のいずれかの理由で発生する可能性があります： 1. Reactとレンダラー（React DOMなど）のバージョンが不一致である可能性がある 2. フックのルールを破っている可能性がある 3. 同じアプリにReactのコピーが複数ある可能性がある この問題のデバッグと修正方法のヒントについては、https://reactjs.org/link/invalid-hook-call を参照してください。

「詮索範囲が広くてなかなか絞り込めそうにないなぁ」と思いながら、とりあえずトリガーとなっている`Link`まわりの検証を進めました。

この時は自分の`React Router`の設定ミスだろうと思っており、
「コード修正 → ビルド → テストサーバーへアップ」という流れで検証を進めていました。
なんとも非効率です（泣）。

しかし、原因は`React Router`の設定ミスでも何でもなく**自身の作ったカスタムフック**。
哀れな筆者は時間を浪費していきました……。

## 自身の過ちに気づく
今回話している React制のサイトでは、`Context`を使用して各ページ用のStateを管理していました。

::: note info
各ページ用のStateを作っている理由は`title`や`meta`など`head`関連の情報をState別（ページ別）に用意して書き換えるようにしているためです。
:::

TOPページ用のState変数を更新する関数をカスタムフック（以下：`ChangeTopPageState`）として用意し、サブページからTOPページへ移動するリンク（`Link`）のクリックイベントにそのカスタムフックを使用していました。
しかし、TOPページ（のコンポーネント）の`useEffect`内でも **TOPページ用のState変数の更新関数（セッター関数）** を実行していました。

この筆者の愚かな行為によって、
- 「クリックイベントでのカスタムフック（`ChangeTopPageState`）で**TOPページ用のState変数を更新**」 →
- 「ページ遷移後のTOPページ（のレンダリング後に）同様の**処理**を実行」 →
- 「ブラウザバック時にState更新関連の不具合発生？」

という状況になっていたのです。

ようやく、`Link`のクリックイベントに指定していた`ChangeTopPageState`（＝**自身の過ち**）に気付いた筆者はクリックイベントをすべて削除。テストサーバーでエラーが表示されないことを確認し、本番環境へホスティングして同様の確認が取れました！無事解決！

解決はしたものの……「あれ？でもTOPページの`useEffect`に依存配列を記述していないし、これだけなら『State変数が単に2回変更されるだけ』なんじゃないの？」とか「ブラウザバック時にState更新関連の不具合が出ているってこと？」と思ったりもしています。
はっきりした原因を言及できず申し訳ないのですが、おそらく先述したエラー文の「2番目に該当」したのでは？と思っています。
> 2.フックのルールを破っている可能性がある

または、上記「筆者の愚かな行為」で説明した以下フロー
- （TOPページ用のState変数を更新するカスタムフック）`ChangeTopPageState`実行 → 
- TOPページ（のコンポーネント）の`useEffect`内でも同様の処理

というこれらの過程が`React`のライフサイクルに支障をきたしたのかもしれません。

## まとめ
当たり前なことを言うかもですが、
React のように機能別に切り分けて組み立てていくコンポーネントベースのものは

- **どこで何を使っているか（しているか）**
- **ソレ（State や Hook etc...）はそこで使用するのが適切なのか**
- **（Reactでは）再レンダリングへの考慮**

といった意識・注意、コード（コンポーネント）管理が大事だなと実感しました。

ここまでお読みいただきありがとうございました。
本記事が誰かのお役に立てれば嬉しいです。
【Workato】環境間での便利なレシピデプロイ方法

# はじめに
こんにちは。
今回は「Workato」のレシピデプロイ方法についてご紹介します。

その前に「Workato」とはどのようなサービスなのか簡単にご説明します。

**Workatoとは？**
オンプレミス環境、クラウド環境、IoTにおけるセンサーや測定器のアプリケーションを含めた1000種類以上のアプリケーションを接続させ、条件分岐やエラー処理、アクションを定義することでビジネスプロセスの自動化と統合を実現するクラウド型のプラットフォームです。
またセキュリティの安全性や自動化されたバージョン管理なども細かく見ることができ、IT初心者でも比較的使いやすいサービスです。
![tmb_workato03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528794/58bca045-47c3-90ff-41a8-3094e5d27b5d.png)
[Workato公式](https://docs.workato.com/ja/getting-started/what-is-workato.html)


# レシピデプロイ方法について
本題に移りますがWorkatoにはレシピをデプロイする方法が３つあります。

①Recipe Lifecycle Managementにてデプロイしたいレシピをパッケージ化し、そのパッケージを他環境へエクスポートする方法（手動）
②APIを利用しRecipe Lifecycle Managementにて設定したレシピを
指定したコマンドで実行しダウンロード、エクスポートする方法（自動化）
③Environments機能を利用したレシピデプロイ方法（手動）

# ご紹介するレシピデプロイ方法
今回ご紹介するのは③の方法です。
Environments機能はアドオン機能(オプション)ですが
開発 (DEV)、テスト (TEST)、本番 (PROD) のような環境を分けて運用したい場合はとても便利な機能ですのでオススメです。

早速③のレシピデプロイ方法を以下手順でご紹介します。
・Workatoにログインしデプロイ元環境のプロジェクト階層に移動します。
・そこでDeploymentsタブを選択します。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528794/36f439ec-9f7c-fd5a-3103-497b531f7f79.png)
・タブを開いたらDeploy projectを選択します。
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528794/7f3592c5-a824-280c-95f5-4181f427d20b.png)
・詳細画面が出てくるのでデプロイ先のプロジェクトを選択し自由にメモを残します。
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528794/75fef8fa-0bf8-8272-325a-f75d49976b55.png)
・プロジェクト先に既に同じ内容のレシピがある場合は、この警告が表示されますが下部のCustomize deploymentを選択すれば問題ないです。
![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528794/30ba3824-b43b-dccd-ce23-b29bbb392881.png)
・すると実際にデプロイ元環境で作成したレシピなどが階層で表示されますので別環境へデプロイしたいレシピを選択し次へ。
![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528794/a73f647a-384d-d1f2-3084-b4dba85f9d66.png)
・しかしここで以下のようなオレンジ色の警告が発生する場合があります。
これはこのレシピと依存関係のあるレシピや接続設定もデプロイしたほうがいいよという親切な警告です。
デプロイする時は依存関係のあるレシピも同時にデプロイしましょう。
![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528794/46a7dcf9-36ab-c025-aefc-a8c433738889.png)
・警告がなくNextを選択すると最終確認画面に移ります。
ここで新規に追加されるレシピや更新されるレシピが表示されます。
![画像8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3528794/d329ca88-2870-4a70-f08d-aa710b579f8d.png)
・問題なければDeployをクリックし完了です。

別環境にデプロイされているか確認したい場合はデプロイしたレシピのバージョンを比較することで確認できます。

以上でEnvironments機能を使用したレシピデプロイは終了です。


# まとめ
WorkatoのEnvironments機能を利用したデプロイ方法について
簡単にキャプチャを使ってご紹介させて頂きました。
ご紹介した方法は視覚的にわかりやすくIT初心者でも容易にデプロイができると思いますのでEnvironments機能が利用できる方は試してみてください。
少しでも誰かの助けになれば幸いです。
またご指摘等ございましたらぜひお願いいたします。


# ご案内
株式会社ジールでは、初期費用が不要で運用・保守の手間もかからず、ノーコード・ローコードですぐに手元データを分析可能なオールインワン型データ活用プラットフォーム「ZEUSCloud」を提供しております。
ご興味がある方は是非下記のリンクをご覧ください：
https://www.zdh.co.jp/products-services/cloud-data/zeuscloud/
関西春ロボコン_足回り

# 足回り設計コンセプト
設計時はコンセプトを明確にしたほうが良いと思い、今回は設計時にコンセプトを設定しました。
コンセプトをチームで明確にしておけば、どこに進むべきなのかは見えやすいのかな？と勝手に思ってます。（まあ、ちゃんと話しとけよって話ですけど）

コンセプトは
__軽量化__
__高速化__
__自律化__
の3つになります。

# 軽量化
まずは軽量化です。ロボコンでは重量制限があり、それをクリアしないと試合には出れません。なので、軽量化は大事です。（それ以外にも関わってくることあるんですけどね）

まずはアクチュエーターの重量からです。
![image0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725749/3c7e6ec8-3a96-1a1c-5374-72d9d48a1c1c.jpeg)
ロボコンでよく見るギヤードモーター775です。
これ一つで約600gです。
足回りなのでパワフルなモーターが好ましいです。
なのでモーターは変えない（余裕があれば、ロボマスモーターなどに変えてみても良いと思う。今回は見送ったが...）

モーターを変えないならギヤヘッドはどうか？
__1/49ギヤヘッド_239g__(僕が所属したての頃チームにはこれしかなかった）
__⇓__
__1/17ギヤヘッド_191g__
に変更した。
__239g-191g=48gの軽量化__
ギヤヘッドは基本的に減速比が小さいと構成されている歯車の数などが減るため軽量化につながる。
今回は四輪オムニを想定しているので,__48g×4=192g__
__約200gの軽量化！__

__※デメリット：トルクの低下__
減速比の低下はトルクの減少に繋がります。
基本的にロボットが動けばいいです。

# 高速化
次に高速化です。
ロボコンでは競技によりますが、足回りのスピードが競技の勝敗を分ける場合があります。
例えば、スタート地点からワークを掴むところまでどれくらいの移動時間に収めるかなど
チームでしっかり相談しましょう。
今回、自動化は無理と判断したので速度にこだわりはないですが、将来のことも考え高速化に取り組みます。
1/49→1/17にギヤヘッドが変わったので,スピードは __およそ3倍__ です.
CIFSで急に Invalid Argument (22)でマウントできなくなったトラブル

## Env
- Ubuntu 22.04.1
- Linux 6.2.0-33-generic 

## 結論
- マウントオプションに`nodfs`のオプションつけたら解決した

## なんで？
- わからない
    - そもそも，なんでInvalid Argument(22)を吐いてたのかもよくわからない
    - デバッグログを読んでも，Argumentがおかしい雰囲気ではない
        - parseエラーとか出てない…

## （参考にならない）経緯
- 20.04から22.04に2023/5月ごろにアップグレードしていた
    - apt upgrade ももれなく実行していた
- 2023/9月 諸事情でサーバを停止，再起動後つながらない
- 別のUbuntuマシンでは問題なく接続できている
- アプデが原因っぽい
- 諸事情その2もあり，まっさらにして再構築した
- が，再構築後も結局接続できない
- なんやかんやあって
- 治った ← イマココ

## Reference
[ubuntu 22.04で旧いnasにmount cifsできない](https://forums.ubuntulinux.jp/viewtopic.php?id=21688)
E資格合格体験記（2023#2）

JDLAが主催しているE資格(2023#2)に受験し合格したのでその体験記を記載する。
私は今回のE資格受験ではAVILENの主にE資格講座を活用した。
https://avilen.co.jp/course/e-certificate/

# 内容
- [自己紹介](#1-自己紹介)
- [学習の動機](#2-学習の動機)
- [受験までの流れ](#3-受験までの流れ)
- [学習方法](#4-学習方法)
- [試験本番](#5-試験本番)
- [感想](#6-感想)

# 1. 自己紹介
大学院修士２年生
研究内容：画像系の深層学習

# 2. 学習の動機

AVILENにインターンで参加した際にE資格受験の募集をしていたのがきっかけ。
これまで決定木や画像系に特化した勉強はしたことがあるが、機械学習全体の勉強をしたことがなかったため受験を決意した。

# 3. 受験までの流れ
E資格2023#2(8/25,26,27)の試験を受験するためには7/31までにAVILENの終了試験を合格する必要があった。
７月中旬ごろにAVILEN内でE資格受験の募集をしていたので、スケジュール的にはかなり厳しかったが受験を決意。
その後8/26日の試験に向けて対策を開始。
具体的な学習期間は7/19~8/26までの約１か月間であった。

# 4. 学習方法
## 使用した教材
- AVILEN講座
    - 全人類がわかる機械学習講座
    - 全人類がわかるE資格講座
- 徹底攻略ディープラーニングE資格エンジニア問題集


## 学習内容
主に２つの部分に分かれていた
- シラバスに沿った試験の対策（約30日）
- 合格体験記をもとにした分野ごとの詳細な対策（約一週間）


## シラバスに沿った試験の対策（約30日）
学習期間が約１か月とかなり厳しいスケジュールであったので、効率重視の学習を行った。
具体的には以下の２点を重視した。
- JDLAのホームページで配布されているシラバス
- 問題集や合格体験記からの過去問の傾向

単元ごとの学習としては
1. AVILENの講座と資料で学習（時間をかけ過ぎない）
2. 該当箇所の問題を解く（問題の傾向をつかむ）
3. 要点をつかんでもう一度AVILENの講座と資料で学習
を行った。

初めての学習では何がどのように問われるかがわからないので、暗記などに時間をかけないようにし、問題集を解くことで問題の傾向をつかむようにした。これを踏まえてもう一度講座を復習することで問題の傾向に合わせた学習をすることができた。

この際、AVILENの講座で扱っていてもシラバスの範囲にないものは学習しなかった（特に問題集の方は古いシラバスに対応しているので範囲外のものが多かった印象）。

徹底攻略ディープラーニングE資格エンジニア問題集だけでなくAVILEN講座に含まれている問題集も傾向が新しくかなり役に立った。
ここまでの試験対策を行えば、本番でミスなしで７割はとれると考えていた。

## 合格体験記をもとにした分野ごとの詳細な対策（約一週間）
シラバスの範囲を一通り網羅したところでもう一度過去の受験者の合格体験記を見ると、最近シラバスに追加されば範囲（私の場合はAttention系など）が深く問われていたとあったので、その範囲をYoutubeやネットの記事などで学習した。
ここからはほぼ自分の興味で勉強を行っていた。振り返ってみると興味で深くまで学習した部分がかなり本番で役に立った。

# 5. 試験本番

## 本番の対策

この章では本番で意識したことを記述する。

試験は120分で105問出題された。１問に１分程度である。

基本的に１度考えて解答した問題は見直さないようにした。

問題を

- 10秒以内に正解できる問題
- 時間がかかるor計算問題

の２種類に分けて考えた。

10秒以内に正解できる問題は確実にケアレスミスをなくし見直しの必要がないようにした。

注意点としては

- 正しいものなのか、誤っているものなのかという点

である。

この問題でどれだけミスなく時間のアドバンテージが取れるかが重要である。

体感として本番では４割くらいはこの問題であった。

時間がかかるor計算問題はすべて「後で見直す」にチェックを入れて、２週目に確実に正解できるように解いた。２週目でもわからないものはすぐにとばした。

ここまでで9割解答していて、２０分程度余っていた。

残りの時間は知識がなくわからない問題の中で勘で埋めていった。

## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565970/0b15504c-5cbb-d5be-1e07-94c668c6b152.png)


# 6. 感想

短期間での学習ということもあり、「7割を確実に取れるようにする＋興味で深層学習」という勉強を行ったので結果も大体この通りになったのだろうと感じた。

（応用数学に関しては情報量に関する問題が多く難易度は低かった）

## 反省点

今回の取り組みでは短期間で７割ということを目標としていたため意図的に対策しなかったことは多いが、更なる得点率を狙うには各分野に対する深い知識が必要であると感じた。

わからないと感じた問題の多くは、対策として概要しか扱わなかった分野であった。例えば、「蒸留」に対して私はあるモデルの出力を参考に層が少ないモデルを作るとしか認識していなかったが、本番では具体的にどのように蒸留を行うのかなどが問われたりした。

実際に私はAttention系を興味で深く学んだため、その分野の得点率が高くなった。

全ての分野で深く学ぶのは現実的に難しいので自分の興味のある分野だけでも深く学ぶのが有効であるかもしれない。
Docker と Kubernetesの簡単な違い

DevOps, フルスタックエンジニアになりたい人は理解していた方がいい内容

*DockerとKubernetesの違い：*

### ***docker***　
コンテナー
外部アクセスできない
アプリケーションをコンテナへ分離する役割をするよ。

### ***Kubernetes***　
クレーン、ブレインのようなもの
Kubernetes上にdockerを置くことで外部アクセス出来るようになる。


補足
AWSでは、Kubernetes を Amazon ECS に置き換えて、AWS クラウドで Docker コンテナを実行できます。

おすすめ参照
https://www.youtube.com/watch?v=3c_sN3BaSwU&ab_channel=CSCareerKaizen%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9CloudDevOps%E3%82%B9%E3%82%AF%E3%83%BC%E3%83%AB%E5%AD%A6%E9%95%B7
macOS Sonoma 14.xでsudo実行時にTouch IDで認証する機能を有効化する手順

## 動作確認環境

* macOS Sonoma 14.0
* M2 MacBook Air

## sudoでTouch IDを有効化する手順

macOS Sonomaにおいて、sudo実行時にTouch IDが使えるようにするには、 `/etc/pam.d/sudo_local` ファイルを作成します。 `sudo_local.template` が用意されているので、それを元に作成すると簡単です。

```sh
sudo cp /etc/pam.d/sudo_local.template /etc/pam.d/sudo_local

# お好みのエディタで /etc/pam.d/sudo_local を編集
sudo vim /etc/pam.d/sudo_local
```

```diff:/etc/pam.d/sudo_local
- #auth       sufficient     pam_tid.so
+ auth       sufficient     pam_tid.so
```

またはsedとteeを使うとワンライナーでいけます。

```sh
sed -e 's/^#auth/auth/' /etc/pam.d/sudo_local.template | sudo tee /etc/pam.d/sudo_local
```

これだけ！

## 動作確認

別のターミナルセッションを起動し、sudoコマンドを試してみます。

```sh
sudo ls
```

![ターミナルでsudo lsを実行](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24450/6bdafb28-407c-21dc-a799-bb8febe1001a.png)

するとTouch IDが求められます。

![Touch IDが表示されたところ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24450/c2223abd-62e4-c97b-9bbe-b8692aa8e4a3.png)

Touch IDで認証するとコマンドが実行されることが確認できれば設定完了です！

## 解説

Sonoma以前の、macOSでもsudo実行時のTouch IDを有効化することはできました。

**参考**
- [MacのTerminalでsudo実行時にタッチIDを使用する方法 | DevelopersIO](https://dev.classmethod.jp/articles/mac-terminal-sudo-touch-id/)
- [macOSのsudo認証をTouch IDで行う方法 - panda's tech note](https://ja.tech.jar.jp/misc/mac-touchid.html)

しかし、以前の方法では `/etc/pam.d/sudo` ファイルを編集しており、一度Touch ID有効化を行なってもmacOSをシステムアップデートすると `/etc/pam.d/sudo` が元に戻ってしまい、Touch ID有効化設定が消えてしまっていました。
そのため、システムアップデート後に毎回再設定を行う必要がありました。

それがSonomaで `/etc/pam.d/sudo` に `/etc/pam.d/sudo_local` を読み込む設定が追加されました。

```sh
$ cat /etc/pam.d/sudo
# sudo: auth account password session
auth       include        sudo_local
auth       sufficient     pam_smartcard.so
auth       required       pam_opendirectory.so
account    required       pam_permit.so
password   required       pam_deny.so
session    required       pam_permit.so
```

`/etc/pam.d/sudo_local` はシステムアップデート時に更新されない（と謳っている）ため、このファイルにTouch ID有効化設定を記述することでsudo実行時のTouch ID設定を有効化のままにしておくことができるようになったということです。とてもありがたい！

ちなみに、macOS Sonoma以前のmacOSでsudo実行時にTouch IDを有効化するにはこれまで通り `/etc/pam.d/sudo` ファイルを編集する必要がありますのでご注意ください。

## 参考

https://x.com/notakaos/status/1706750197097959552?s=20
ContactForm7で作成したお問い合わせフォームにCSSを適用する方法

# はじめに
WordPressでは利用するテーマごとにCSSやphpが用意されており、そこに直接変更を加えた場合テーマのアップデートを行うと変更した部分も消えてしまうそうです。

この理由から、テーマのCSSを直接書き換えるのはあまりお勧めではありません。
WordPressには追加CSSという機能があるので、そちらを使ってCSSを追加するとテーマのアップデートを行っても追加部分はそのままになります。

この記事では、実際に追加CSSの利用方法を解説します。

# Contact Form 7とは
https://ja.wordpress.org/plugins/contact-form-7/

Contact Form 7は、お問い合わせフォームなどのフォームの作成や管理を簡単に行うことができる、WordPressの拡張プラグインです。

非常に多く利用されており、Contact Form 7のための拡張プラグイン(Flamingoなど)も充実しています。

# 目標
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2472147/b24bf652-6287-c7bb-f7eb-d12bba5beaf5.png)
上記のように必須の質問に、「＊必須」の目印をつけるのを目標にします。(CSSを利用)

色を変えるだけなら、`<font color="red">*必須</font>`のように、CF7内に直接書き込んでも反映されますが手間や管理の面などを考えてもCSSを利用した方が良いと思います。

# 追加CSSの設定方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2472147/f1ec722a-a38c-48c5-4a2c-ddf7f9ca4004.png)
WordPressのサイドバーから外観->カスタマイズをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2472147/3ca929ad-80bc-0624-4bd1-5c7a39fdced8.png)
サイドバーから追加CSSをクリックします。

<記述例>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2472147/abe3107b-96df-a012-96d3-8f7f79e0f9ca.png)

追加CSSに必要なCSSを記入します。
今回は、`required`クラスを付けた部分を赤くしたいので、`span.required {color: #ff0000;}`のように記入します。

先程の`<font color="red">*必須</font>`と書いた部分を、`<span class="required">*必須</span>`と書き換えることができます。

# まとめ
このように書くことで、後でデザインの変更などが必要になったときは、追加CSS部分を変更することで一括で変更することが可能になります。

colorを0000ffにした例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2472147/8e7eb6e8-3762-ecdb-3b54-af6e9cea49b9.png)
Japan AWS Jr. Champion活動記録 Vol.4

## はじめに
8月は、Jr.Champions有志による自主勉強会とJr.Champions LTが開催されました。今回はその2つについて書いていきます。これからも活動に関して、定期的にアウトプットしていきます！

↓ 前回の記事はこちら ↓

https://qiita.com/am_i-12/items/e68a0d92afaa5e123c16

## Japan AWS Jr. Champion Partner Programとは
> [「Japan AWS Jr. Champion Partner Program」](https://aws.amazon.com/jp/blogs/psa/2023-aws-jr-champions/)とは、AWS Partner Network (APN) 参加企業に所属し、現在社会人歴 1 ～ 3 年目で AWS を積極的に学び、アクションを起こし、周囲に影響を与えている APN 若手エンジニアを選出しコミュニティを形成する、日本独自の表彰プログラムです。本プログラムでは、AWS に関して実践してきた技術的な挑戦や、コミュニティのリードなど自ら起点となって周囲に影響を与えているか、アウトプットを通じて周囲へ貢献しているか、という観点が評価の対象になります。2023 Japan AWS Jr. Champions に選出された方は、一定の技術力があり、社内の AWS コミュニティをリードでき、今後は Japan AWS Top Engineers そして Japan AWS Ambassadors になることが期待される皆様です。

2023年は[82名が選出](https://aws.amazon.com/jp/blogs/psa/2023-japan-aws-jr-champions/)されており、これから1年間Japan AWS Jr. Championsとして活動していきます。

AWS Summit Tokyoの表彰時に撮影した集合写真
![img_7571_720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851817/b6c165ed-6033-741d-c32c-2338b9be42fe.jpeg)

## 自主勉強会
当日参加できなかったので、録画を拝見しました。
内容は、DR対策についてでした。

:::note info
**DR**とは
ディザスタリカバリの略
地震や津波などの災害によってシステムの継続利用が不可能になった際の復旧および修復、あるいはそのためのシステムなどを指す言葉。（[参考](https://www.ntt.com/bizon/glossary/e-d/disaster-recovery.html)）
:::

#### 感想
ディザスタリカバリのパターンや、リスク評価やビジネス影響分析の結果に応じて復旧方法を選ぶなどの事柄について、非常にわかりやすく説明されていて、DR対策とは何かを理解することができました。この発表を聞いて、自社製品のDR対策についても調べて、学びを広げることができました。今はまだ、災害時の復旧方法の選択に携わった経験はないのですが、今後携わることがあるかもしれないので、この知見を忘れずに、引き続き意識していきたいと思います。

## Jr.Champions LT

#### プレゼンの前のアナウンス
Project LeadのYukkiさんからアナウンスメントがありました。
- Jr.Champions自主勉強会、Top Engineer参観回が第2回開催決定！
- JAWS-UG strageにてJr.Championsが発表！素晴らしい！
- 9月に加えて、10月のJr.Championsのイベントもオフライン開催決定！

#### LT
前回のイベントにて、AWSについての早押しクイズが行われ、戦いを制した7名によってプレゼンが行われました。発表された内容は以下です。

- AWS×OSS
- AWSへのサイバー攻撃を防ぐ
- アプリ担当が語るAWS上の結合テスト自動化
- 社内AWS教育～ハンズオンによる海外メンバー育成～
- AWS Transit Gatewayの紹介
- インフラSEがAWSでアプリ開発をしてみた
- Amazon Forecast触ってみた
- AWS実費を管理するアプリを作った話
- NTT九州のご紹介


### 感想
毎度毎度、Jr.Championsの皆さんのプレゼンを聞くたびに、発表内容のバラエティーの豊かさに驚かされます。

特に社内AWS教育で海外のメンバーを育成するという内容の発表は、自社でAWSのコミュニティ活動に携わっている身として、興味深く聞かせていただきました。自分の会社では、教育にAWS Skill Builderを活用していますが、発表された方は、自分たちでハンズオンコンテンツを作成していました。自分たちでハンズオンコンテンツを作ることで、自社が使うAWSサービスに絞って教育できるので良いなと思いました。

また、自分たちでアプリを作っている方も何人かいらっしゃって、印象に残りました。自分はSREという仕事柄、アプリ開発経験が少なく、また、自分がチームを主導する形での開発経験も少ないので、聞いていて興味深かったです。



以上です。ありがとうございました。
「値渡し」「参照渡し」とは

> ・値渡し : メソッドの引数に、新たに値のコピーを作って渡す方法のこと。
  プリミティブ型 intとか

 
>・参照渡し : メソッドの引数に、変数そのものの参照を渡す方法のこと。
　ポインタ型とか　中の値でなく、メモリの番地（アドレス）を渡す
 関数で内で渡した値を変えると呼び元の値も変わる

https://qiita.com/atsutama/items/df7b8ff4ea2b4061d1ab
スッキリわかるJava入門 実践編 第３版 まとめ - part5 -非標準ライブラリの活用

# はじめに
こんにちは　◤●ㅅ●◥ﾉ

今回はライブラリについて学びました！

## 第５章　非標準ライブラリの活用
### 1.ライブラリとは
他人が利用することを想定した複数のクラスファイルの集まりのこと

ライブラリのようなひとまとまりの形で利用できるコンパイル済みのコード
→バイナリモジュールと呼び、ソースコードと対比して使われる

JAR...複数のファイルを１つにまとめる形式

### 2.クラスパス
クラスパス...Javaがクラスファイルをハードディスクから効率よく検索するために使うヒント

クラスパスの指定方法
1.環境変数CLASSPATHに宣言する
2.javacやjavaコマンド実行時に-cpオプションをつける
3.何も指定しないと、現在のフォルダ(.)を指定したとみなされる

### 3.Commons-lang
Commons-langとは
Javaのライブラリは多くの個人や団体が公開している
Commons-langはApacheソフトウェア財団が作っているライブラリの１つ

### 4.ログ出力ライブラリ
ログ...プログラムの実行中にファイルに書き出させる動作記録のこと
プログラムの動作状況や障害原因を調査するための情報源

代表的なログ出力ライブラリ
・java.util.logging
・Log4j
・Log4j2
・Logback

### 5.オープンソースとライセンス
ソースコードが公開され、自由に頒布できるソフトウェア
→オープンソースソフトウェア

Javaは多くのオープンソースのライブラリやソフトウェアが公開されている
多くは個人や有志によって開発や保守が行われている

オープンソースの対義語として商用製品やプロプライエタリがある

商用製品やオープンソースであってもソフトウェアには利用するにあたって守る規約が存在する
→ライセンス

ライセンス違反をしないために...
:star: ライセンスの判断のルール
違反になるかの判断は自分で判断せず、リーダー、上司、法務部に判断してもらう

ライセンスの種類
・パブリックドメイン
ソフトウェアの著作権が放棄され、世界中の誰でも自由に利用可能な状態
・BSD系ライセンス
著作権表示などをきちんと行いさえすれば、基本的に自由に利用できるライセンス
・GPL系ライセンス
利用者に比較的に強い要求を含むライセンス
特徴的なものは次の２点
1.このライセンスを採用したソフトウェアを含む製品を発売、公表する場合、そのソースコードも公開しなければならない
2.このライセンスを採用したソフトウェアを含む製品を改造したり、一部に利用して別製品を作った場合、その製品もまたGPLにしなければならない

GPLの根底にはコピーレフトという考え方が存在する
→「世界中の誰もが、ソフトウェアや園は生物を自由に利用、改変、再配布できるようにする」
　→多くの人が自由にソースコードを入手でき、改良や公表を行うことで活発にイノベーションが進む

誰もが利用、改変、再配布できる自由を持つソフトウェア
→フリーソフトウェア

## まとめ
他人が利用することを想定した複数のクラスファイルの集まりのことをライブラリという
ライブラリを利用するには、JARファイルをクラスパスに含める必要がある
オープンソース製品はソースコードが公開されており、自由に再頒布できる
ライセンス違反を行うと重大なペナルティを科せられることがある
ライセンスとして問題のない利用かどうかは安易に自分だけで判断しない

今回もありがとうございました！
ではまた〜　◤●ㅅ●◥ﾉ"