OmniAICreator/Qiita-1.07M huggingface dataset:
ゆめみのiOSエンジニア研修を公開します！

私たち株式会社ゆめみでは、2020年から新卒者向けiOS研修カリキュラムを作成し運用してきました。
この研修をOSSで公開いたします！

https://github.com/yumemi-inc/ios-training

## 研修の内容

この研修には[1〜14](https://github.com/yumemi-inc/ios-training#研修の進め方)の課題が用意されており、
順番にクリアしながら天気予報アプリを開発していきます。

研修期間は個人のレベルによって異なりますが目安としては1ヶ月ほどと定めています。

## 研修に必要なもの
- インターネット環境
課題を参照するためにインターネット環境が必要です

- 開発環境 (Mac, Xcode)
実際にiOSアプリを開発していくので、Xcodeなどの環境は一通り必要になります

- 1名以上のメンター
課題を進行していくうえで、レビュー・フィードバックやフォローを行うメンターが不可欠です
複数名でローテーションし負荷分散するのも良いと思います
- Gitのホスティングサービス
実務に近い形でプルリクエストベースで進行することを想定しています
GitHubなどのホスティングサービスがあった方が良いでしょう

## 研修の進め方

詳しくは[README](https://github.com/yumemi-inc/ios-training#研修の進め方)に記載があります。


1. 課題を1つ実践
1. プルリクエストを作成し、メンターにレビューを依頼
1. レビューでApprovalされたらマージ

... と実務に近い形で進行して頂きます。

**この研修はレビュー、フィードバックを重視しています。**

良いソフトウェアを作れるようになるためには、フィードバックを受けることは大切です。
また、レビューアへの配慮 (コミット粒度・親切なPRの作成) は実務では重要な要素です。

メンターの方は事前に課題の内容に全て目を通して頂くことをお勧め致します。
コードレビューでの指摘事項が、後の課題の内容と重複してしまう可能性があるためです。
ただし、研修者が自主的に後の課題の技術要素を取り入れた場合は、そのまま進行してOK。当該の課題はスキップして良いことにしています。

## この研修の特徴

<!--
#### 研修そのもののメンテナンスコストを最小化する
研修資料は基本的にリファレンスへのリンクを貼ることをメインとし、あまり解説を書かないようにしています。
資料を作り込みすぎるとメンテナンスコストが大きくなるためです。
-->

#### APIはランダムにエラーが起こる意地悪仕様
趣味のプログラミングでは真剣にエラーハンドリングについて検討する機会は少ないのではないかと考えています。
研修中に利用する天気予報APIはランダムにエラーが発生するようになっており、エラーハンドリングを実装する課題が組み込まれています。

#### コンフリクトが起こりやすい進行
課題は1つ1つコードレビューを必須としていますが、レビュー待ちの時間は勿体ないのでブランチを切ってどんどん先に進んで良いことにしています。
必然的にGitのブランチ運用へ慣れていき、コンフリクトにも直面します。
より実務に近い形でGitに触れるよう設計しています。

#### ツールやライブラリの使い方にフォーカスしない
ツールやライブラリにはトレンドがあります。
そこにフォーカスしてしまうことで研修のメンテナンスコストが大きくなる懸念があります。
研修を通してトレンドな技術を身につけるよりも、普遍的なスキルを身につけることを重視しています。
一方で、研修者が自主的に導入することに制限は設けていません。

#### 研修者が要件を決める余白がある
研修を通して天気予報アプリを開発していきますが、一部の仕様は研修者が詳細を決めるようになっています。
研修課題というとコードの問題を解決することに寄ってしまいがちですが、あえて仕様面の解決も経験できるようにしてあります。


## 最後に
#### 新卒者研修の実践に困っている現場で役立てて欲しい

研修カリキュラムを設計するのは骨の折れる作業です。
一方で、いきなりの実務へ参画では現場でメンタリングする先輩エンジニアの負荷が上がってしまうこともあるかと思います。
この研修は実務に近い形で、段階をおって進行していきます。
スムーズに現場に入れるような要素を多く含んでいます。
研修中もメンターは必要ではありますが、いきなりの実務参画よりもメンターの負荷は小さく、コントロールし易いものと考えています。

また、現場ではビジネス的な都合により、新卒者受け入れが難しいタイミングなどもあるかと思います。 (リリースタイミング・難易度など)
現場都合と切り離した研修を用意しておくことで、受け入れ可能な時期が大きく広がる効果もあると考えています。

様々なところでこの研修を活用していただけると嬉しい限りです。

<!--
#### コントリビュートをお待ちしています

この研修はソフトウェアと同じで完成がありません。
現在も研修が終わるたびに、改善のPRが飛んでいます。
ゆめみの外からの声による品質の向上にも期待があります。
みなさまからのコントリビュートをお待ちしています。
-->
## ゆめみiOS研修Q&A

Q. 予定より早く研修が終わってしまいました。追加課題はありますか？
A. ゆめみでは、研修者が興味のある題材をアプリに取り入れてもらうようにしています。
- テストを自動化するためにCIに挑戦してみる
- アーキテクチャを導入してみる
...etc

Q. この研修を私の会社でも使いたいのですが、問題ないでしょうか？
A. はい、問題ありません。
BigQueryに保存されているJSONから値を取り出す[超個人的メモ]

BigQueryにJSONを保存したり、保存したJSONを読みこむクエリがある。毎回忘れてしまうのでメモ。

例えばBigQueryで、

もし、fooテーブルの中のbarカラムが以下のようなjsonだった場合

```
bar
{“baz”:  true}
{“foobar”: true}
{“bad”: true}
```

JSONを読み込むためのクエリ
SELECT JSON_QUERY(bar, '$.displayed') AS json_text_string FROM `foo` LIMIT 1000

```
true
null
true
```

のように、jsonの中のbarを取り出す事が出来た。

詳しくは公式ドキュメントを参照
https://cloud.google.com/bigquery/docs/reference/standard-sql/json_functions?hl=ja#json_extract
Macbook Proにディスプレイを２枚つないで60Hzを出す

60Hz出るように環境を整えてたのに、30Hzしか出てないことに気づいてしまったので備忘録
Macbookは公式ページで「できる」ことになっていてもできないトラブルがたまにあるようです。
参考：https://infornography.blue/mac/4k60hz-output-mac/

## 最終環境
### ディスプレイ
メインモニター：VG280Kbmiipx（acer） 28インチ 4K 60Hzまで対応
https://acerjapan.com/monitor/nitro/vg0/VG280Kbmiipx

サブモニター：P2419HC（Dell） 23.8インチ FHD おそらく60HZまで対応
https://japancatalog.dell.com/pd/p2419hc.html

PC：MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)

![スクリーンショット 2021-03-31 14.22.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105959/6bf89bb5-8c98-a4e9-bf48-d3b9cc70aebd.png)

### ケーブル
メインモニター用:CAC-CDP20BK
Macbook Proで4K 60Hzを出したいならHDMIケーブルではなくDPケーブルが良いとの情報があったのでThunderbolt→DPにしました。
https://www.elecom.co.jp/products/CAC-CDP20BK.html

サブモニター用：不明
Thunderbolt→Thunderboltのケーブルです。

これで２枚とも60Hzが出ました。

## 今までの環境
メインモニター：VG280Kbmiipx（acer） 28インチ 4K 60Hzまで対応
PC兼モニター：MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)

この２枚使いだとメインモニターが60Hzまで出せるところが30Hzまで下がってしまいました。
ちなみにメインモニターはスケーリングせず4Kのままで使用しています。

## サブモニターのP2419HC（Dell）がすごく優秀
パワーデリバリー対応なので、接続用にThunderboltを刺すだけで充電もしてくれるので、モニタのために刺すケーブルは２本で済んでいます。
ちなみに左側をモニター用にしています。
※Macbookの機種によっては左側しか60Hzが出ないなどの仕様があるみたいです

縦置きもできるので縦で使用しています。
自動認識はしないようなので自身で設定が必要になります。

## どれくらいの負荷に耐えられるか
室温20度で使用。
Macbookのメモリは16GBですが、ChromeでYoutubeを流しながらSlack・Photoshop・Illustratorを操作していても全然ファンはうるさくなりません。

以前の環境でプレミアを使用したことがありましたが30Hzでも動画は厳しかったので、今の２枚使いでの動画編集はおそらく厳しいと思います。

## スピーカーが別に必要かもしれない
メインモニターは音がかなり悪いのでMacbookのスピーカーから音を流していましたが、今回クラムシェルとして使うことにしたのでBluetoothスピーカーを導入しました。

## まとめ
モニター２枚使い＋60Hzは最高。
欲を言えばサブモニターはWQHDがよかったけど、WQHDにするとまたメインモニターが30Hzに落ちそうなのでちょっと怖い。
真偽値とif文

# if文
if文では条件式がTrueのときには処理が実行され、Falseのときには処理は実行されません。
<pre> 例：  num = 7
      if num == 7:
          print('Good')
</pre>
num == 7という条件式がTrueであれば処理が実行されるため、「Good」が表示されます。
もし、num = 6であれば条件式がFalseとなるので処理が実行されません。

>※ここで注意しなければいけないのは、条件式の記述のあとには「: (コロン)」が必要です。
>また処理を記述するときは、
>インデント(行の先頭に空白を入れて、行の開始位置を横にズラすこと)を忘れないようにする。

***
##### if文に「else」を組み合わせることで
「もし〇〇ならば□□を行う、そうでなければ△△を行う」という条件分岐を行うことができます。
if文の条件式がFalseの時、elseの処理が実行されます。
<pre> 例：  num = 6
      if num == 7:
          print('Good')
      else:
          print('Bad')
</pre>
num == 7という条件式がFalseなので、elseの処理が実行されるので「Bad」が表示されます。
***
#### elifを組み合わせることで
「もし〇〇ならば□□を行う、△△ならば▲▲を行う、そうでなければ☓☓を行う」という処理を行うことができます。
if文で条件が成り立たなかった場合を複数定義したい場合に「elif」を用います。
elifはいくつも書くことはできるが、上から順に条件が成り立つか判断されるので、
記述の順番には注意が必要です。
<pre> 例：  num = 6
       if num == 7:
           print('Very Good')
       elif num == 6:
           print('Good')
       else:
           print('Bad')
</pre>
num == 7という条件式がFalseなので、次にelifの条件式が判断されます。
num == 6という条件式はTrueなので、処理が実行され「Good」が表示されます。

ここで、条件式で用いられる比較演算子について簡単に説明します。

# 比較演算子
##### 等しいのかを調べる
` ==　左辺と右辺が等しい時、True
!= 左辺と右辺が等しくない時、True`

##### 大小を比べる
` > 左辺の方が大きい時、True`
`< 右辺の方が大きい時、True`
`>= 左辺が右辺以上の時、True`
`<= 右辺が左辺以上の時、True`
があります。
オブジェクトの配列をflattenする


```js
//こういう配列を
var array = [{"hello":"aaa"},{"world":"bbb"},{"test":"ccc"},{"hoge":"ddd"}];

//こうしたい
console.log(flattened);
-> {hello: "aaa", world: "bbb", test: "ccc", hoge: "ddd"} 
```

reduceを使って簡易的に行うことができる。
(ただしこれだと、入れ子には対応できない)

```js
const flattened = array.reduce((acc, val) =>{ 
	Object.keys(val).forEach(key => acc[key] = val[key]);
	return acc; 
}, {});
```

配列に同名のキーがある場合は上書きされるので注意

```js
//同名のキーがある場合
var array = [{"hello":"aaa"},{"world":"bbb"},{"test":"ccc"},{"hoge":"ddd"}, {"world":123}];

//worldが上書きされてしまっている
console.log(flattened);
-> {hello: "aaa", world: 123, test: "ccc", hoge: "ddd"} 
```
Xcodeをバージョンアップしたらプラットフォームが「My Mac」に変わってしまった

## 発生した問題
既存のCordovaプロジェクトを更新したのでiPadにデプロイしようとしたら、iPadのOSが14.4.2と新しいためXcodeをバージョンアップしないとデプロイ出来ないと表示されました。
ところが、Xcodeを12.4にバージョンアップしたところ、ビルド先のプラットフォームが「My Mac」と表示され、接続してあるiPadがデバイス表示されないだけでなく、iPhone／iPadのシミュレータも一切表示されなくなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80431/fbd47ff0-54c3-e75a-4f26-fd2acb8b1310.png)

## 解決に至った手順
Build Settings画面の「Supported Platforms」が「Mac」に変わっていたので「iOS」に変更することで今まで通りビルド出来るようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80431/a93f1607-2cd3-918f-4412-19ac69bdc286.png)

Xcodeのバージョンアップに際しアプリ側は何も設定を変えていないのに、問題が発生したので参考になればと思い共有します。
windowsでiverilog その98

#概要　

windowsでiverilogやってみた。
ws2812のテストベンチ書いてみた。

#参考にしたページ

https://github.com/dhrosa/ws2812-verilog

#写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/e3af4d9f-3a7e-7441-0ae8-fd13ff082ef1.jpeg)


#テストベンチ

```
module test;
	wire [2:0] address;
	wire DO;
	reg clk;
	reg reset;
	reg [7:0] red;
	reg [7:0] green;
	reg [7:0] blue;
	ws2811 #(.NUM_LEDS(7), .SYSTEM_CLOCK(50000000)) u(.clk(clk), .reset(reset), .address(address), .red_in(red), .green_in(green), .blue_in(blue), .DO(DO));
	initial
	begin
		$dumpfile("test.vcd");
		$dumpvars(0, test);
		clk = 0;
		reset = 1;
		red = 8'hFF;
		green = 8'hAA;
		blue = 8'h00;
		#5
			reset = 0;
		#40000
			$finish();
	end
	always
		#1
			clk = ~clk;
endmodule

```

以上。
GitHub private public 変更方法 

GitHubで公開しようと思ったコードがprivateで公開（public）できていなかったので、
その時の手順をまとめてみました。
####メニューの「Settings」をクリック
![IMG_5757.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773411/4c9adfce-f383-1d22-95f8-e95a94b95a7c.jpeg)
####出てきたページの一番下までスクロールします。
<font color="Red">Change visibillity</font>をクリック
![スクロールしてココクリック.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773411/a4481fb4-d3ce-5eba-f199-a315eeca1337.jpeg)
・Make pubulic(公開)
・Make priate（非公開）を自分のしたい方を選択
####選択後、枠の部分にnameと同じ文字を入力
![上の名前を入力.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773411/c3768fe4-203c-7512-abbe-2e6000eb0376.jpeg)
####nameを入力すると「I understand,change repository visiblity」の部分が赤くなります。クリック。
![ココをクリック完了.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/773411/3de7eca5-9d19-8746-170b-fbb877125283.jpeg)
以上でprivate（非公開）public（公開）が変更できます。
Reactで作った画面がIEで表示されないとお悩みの方

<h3>IE11対応しろと言われたがなぜかReactで表示されない方へ</h3>

<p>これで悩んでいる方は緊急性の高い状態でお悩みな気がするのでさっさと書きます。:mask:</p>
<p>npm install react-app-polyfillでpolyfillを追加</p>
<p>index.jsの先頭にimport 'react-app-polyfill/ie11'及びimport 'react-app-polyfill/stable'の２つを追加</p>
<p>おそらくここで止まってあれできないとなっている方が多いと思います(特に最近の方)。:cold_sweat:</p>
<p>このあとが重要なのですが、package.json 内にある"react-scripts": "のバージョンが"3.2.0"以上の方はこれだけでは表示されません</p>
<p>そのpackage.jsonの中の下にある"browserslist"の中にieを追加する必要があります。</p>
<p>画像をとりあえず貼っておくので、"browserslist"をこの通りにしていただければ大丈夫です。</p>
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662158/ec3e5b25-107d-be29-19c8-727b46edfc5c.png)

<p>以上。なんとかなったことを祈ります:smile:</p>
mac homebrew設定

#macでipaファイル等をスペース等で中身を見る方法

**①homebrewインストール**
<参考サイト>
https://qiita.com/zaburo/items/29fe23c1ceb6056109fd

M1 macの場合うまくインストールできない問題があるらしい・・・
https://qiita.com/___xxx_/items/17655df4e80ebadd8fc3

M1,M2 macは以下のコマンドでパスを通す
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ユーザー名/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

**②provisionQLを入れる**
$brew install provisionql --cask

<参考にしたサイト>
https://dev.classmethod.jp/articles/ios-provisioningprofile/
※brewが最新版なので、ターミナルに書く内容が変わります！

**最後に**
みんな色々教えてくれてありがとう！！！
（サイトに助けられてばっかり〜）
Java PDFをPDF/A-1A, 2A, 3A, 1B, 2B及び3Bで保存

<p><strong>PDFにはいろいろな家族があります。例えば、PDF/1Aは、PDFの各種オブジェクトの中で、必須とする機能、使用を制限する機能、使用を禁止する機能などを決めています。今回は Spire.PDF for Javaを使ってPDFをPDF/A-1A, 2A, 3A, 1B, 2B及び3Bで保存する方法を紹介します。コードはとても簡単ですから、一緒にみましょう！</strong></p>
<h4><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/pdf-for-java.html">Free Spire.PDF for Java</a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210331/20210331103946.png" alt="f:id:lendoris:20210331103946p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong>2.IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire.PDF.jarを参照に追加してください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210331/20210331104004.png" alt="f:id:lendoris:20210331104004p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
```JAVA
import com.spire.pdf.conversion.PdfStandardsConverter;

public class ConvertPdfToPdfA {
    public static void main(String[] args) {

        //ファイルのパスを指定します。
        String inputFile = "C:/Users/Administrator/Desktop/sample.pdf";

        //エクスポートされるファイルの保存場所を指定します。
        String outputFolder = "C:/Users/Administrator/Desktop/Output/";

        //PdfStandardsConverter objectを作成します。
        PdfStandardsConverter converter = new PdfStandardsConverter(inputFile);

        //PdfA1Aで保存
        converter.toPdfA1A(outputFolder + "ToPdfA1A.pdf");

        //PdfA1Bで保存
        converter.toPdfA1B(outputFolder + "ToPdfA1B.pdf");

        //PdfA2Aで保存
        converter.toPdfA2A(outputFolder + "ToPdfA2A.pdf");

        //PdfA2Bで保存
        converter.toPdfA2B(outputFolder + "ToPdfA2B.pdf");

        //PdfA3Aで保存
        converter.toPdfA3A(outputFolder + "ToPdfA3A.pdf");

        //PdfA3Bで保存
        converter.toPdfA3B(outputFolder + "ToPdfA3B.pdf");
    }
}
```
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210331/20210331105309.png" alt="f:id:lendoris:20210331105309p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong> </strong></p>
初めてのPython学習④

#関数
###▼関数とは
処理をまとめたプログラムの塊

Pythonは予め用意された関数を使うことも、自ら関数を作ることも出来る
関数を組み合わせてプログラムを効率的に作る

**関数の定義**

```py
def 関数名():
    実行する処理
```

**▼引数**
関数を呼び出す際に関数に渡すことの出来る値

**▼仮引数**
引数を受け取るための変数

def 関数名(仮引数):
    実行する処理

**▼関数に引数を渡す**
関数名(引数)


（例）コード

```py
def animal(name):
    print('My favorite animal is' + name)

animal('dog')
```

出力結果
``My favorite animal is dog``

**▼流れ**
①animal('dog')の引数'dog'が仮引数nameに代入
②関数animal(name):の中の処理が実行
③'My favorite animal is dog'が出力

**▼注意**
**スコープ**
変数には使える範囲が決まっている（＝スコープ）。
仮引数や関数の中で定義した変数のスコープは関数の中だけで使える
※上記コードなら``name``は``def animal(name):``の中だけで使える


**引数を渡すとき**
仮引数を,で区切って定義
▼コード

```py
def animal(name, voice):
    print(name + 'の泣き声は' + voice)

animal('dog','ワンワン')
```

出力結果
``dogの泣き声はワンワン``

**▼注意**
引数は仮引数と同じ順番で渡す
　仮引数→``name,voice``
　引数　→'``dog','ワンワン'``

**▼引数の初期値設定**
引数が省略されたときに、変わりの値として初期値を使う
▼コード

```py
def animal(name, voice='わかりません'):
    print(name + 'の泣き声は' + voice)

animal('dog','ワンワン')
animal('rabbit')
```

出力結果
```dogの泣き声はワンワン　　　　・・・引数に設定した値
rabbitの泣き声はわかりません・・・初期値の「わかりません」が代入```

**▼戻り値**
``return 戻り値``
・戻り地を呼び出し元に返す
・関数内の処理を終了させる

**▼モジュール**
・Pythonのコードがかかれたファイル
コードが長くなったときにファイルを小分けにしてimportを用いて読み込む
``Pythonにはすでにモジュールが用意されている（＝ライブラリ）``

```
import ファイル名（拡張子×）
ファイルの読み込み

モジュール名.関数名()
ファイルの中の関数の実行
```
Outlookカレンダーの予定を追加するURLリンク

# 実現したいこと
実現したいことはURLリンクを設置し、クリックするとOutlookカレンダーの予定追加画面に遷移し、初期値をセットすることです。

例えば、下記のURLリンクをクリックすると、添付画像のように初期値がセットされます。

[URLリンク](https://outlook.live.com/owa/?path=/calendar/action/compose&subject=会議&body=アイディア出しの会議)

![スクリーンショット 2021-03-31 10.53.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/63b9f9d1-852d-e9b1-a73a-0b201ae4ffd4.png)

GoogleカレンダーのURLリンクは[こちらの記事](https://qiita.com/yuuta_s/items/738732565e2cfd11fb23)

## 実現方法

URLリンクに任意でパラメータに初期値の値をセットします。

例1）URLリンクをクリックすると初期値に予定の「タイトル」「説明」がセットされます。

[https://outlook.live.com/owa/?path=/calendar/action/compose&subject=会議&body=アイディア出しの会議](https://outlook.live.com/owa/?path=/calendar/action/compose&subject=会議&body=アイディア出しの会議)

パラメータのsubjectが「タイトル」、bodyが「説明」です。

### パラメータ

|  パラメータ  | 説明 |
| ---- | ---- |
| subject  | タイトル   |
| body | 説明 |
| location  | 場所 |
| startdt | 開始日時<br>フォーマット：YYYYMMDDTHHmmSSZ   | 
| enddt  | 終了日時<br>フォーマット：YYYYMMDDTHHmmSSZ   | 
| to  | 出席者のメールアドレス |
| allday | 終日<br>値は「true」or「false」|
| uid | 一意の識別子 |

bodyでは、改行を入れることができます。`\n`はOutlookの仕様で効かないので`<br>`を使用します。
bodyはスペースや日本語がデコードされなかったりと挙動が不安定です。bodyに色々値をセットするのはおすすめしません。もし、bodyに色々値をセットしたいなら、Zoomのように[ics](https://qiita.com/TomOse/items/31b5fb4782f06d19af79)を利用することをおすすめします。icsファイルダウンロードの記事は[こちら](https://qiita.com/yuuta_s/items/acd36ca8133402bd268e)

![スクリーンショット 2021-03-31 11.08.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/956262fc-720d-f34c-4435-499625aa76e0.png)


## 参考

- [Googleカレンダーの予定を追加するURLリンク](https://qiita.com/yuuta_s/items/738732565e2cfd11fb23)
- [How to Send Google and Outlook Calendar Invite Links in Email Templates](https://douglascayers.com/2019/06/22/how-to-send-google-and-outlook-calendar-invite-links-in-email-templates/)
【GeoGebra】3種類のスクリプト記述について



## はじめに
JavaScriptでGeoGebraを操作することについての日本語記事が少ないので書きます。
![スクリーンショット 2021-03-31 10.20.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/bb24382c-a55c-877b-5e90-cb7fb33e5c84.jpeg)
GeoGebraのこの場所の使い方についてです。
## この記事の対象となる人

- GeoGebraについて踏み込んで学習したい人
- GeoGebraのツールなどは扱えるが、ボタンによる操作方法がわからない人
- JavaScriptを使って何か作ってみたい人(2次元,3次元ゲームで使う動きなんかも勉強できるのではと思っている)



## クリックして
対象となるオブジェクトがクリックされた時に実行されます。(ボタンだけではなく、点や直線なども)
![スクリーンショット 2021-03-31 10.29.36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/fd484e15-997a-bf71-c0c2-09b63dc62715.jpeg)
`テスト`ボタンが押された時に`(0,0)`を配置することができます。
もしGeoGebra ScriptではなくJavaScriptで書きたい場合は

```js
ggbApplet.evalCommand('(0,0)');
```

になります。
## 最新情報
変数であれば値が変更された時オブジェクトであれば動かされた時に、実行されます。
![スクリーンショット 2021-03-31 10.41.25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/de9ab231-05ea-ee59-ca6d-4dda89664241.jpeg)

画像はAの最新情報に`(0,0)`を書いたため、少しAを動かしただけで点(0,0)が大量発生している様子。


## グローバルJavaScript

アプリ全体で使うことのできるJavaScript関数。こちらを使うときは**一度アプリを保存し、再度開く**必要があります。
![スクリーンショット 2021-03-31 11.00.40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/9de1c149-b211-277f-9b9d-ed9f55cd17dc.jpeg)
![スクリーンショット 2021-03-31 11.01.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/063088b4-56a5-2f54-feb8-92007a03d0be.jpeg)

グローバルJavaScriptにおはようというアラートを表示させる関数`ohayo()`を記述し、点Aがクリックされた時に`ohayo()`を実行させています。
![スクリーンショット 2021-03-31 11.02.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/7ca63d02-ae44-a30d-1c6c-36b15fa2f10e.jpeg)

実行結果はこんな感じ。なお、GeoGebraには`console.log()`によって標準出力させたものを確認することはできないので、`alert()`によってテストなどを行う必要があります。


繰り返しになりますが、グローバルJavaScriptを使う際には一度プロジェクトを保存し、再度開く必要があります。
`(ReferenceError) :  ohayo is not defined`
と出た場合はここを見直してください。
AWS認定ソリューションアーキテクト-アソシエイト(SAA-C02) 受験録

## はじめに
2021/3/27(土)に、AWS認定ソリューションアーキテクト-アソシエイト(SAA-C02)を受験し
無事合格してきたので、他の方の参考になればと思い記事を書きました。

試験の概要と所感、利用した教材をさっくり記載させて頂きました。

## 試験概要
| 受験料 | 15,000(税別) |
|:--|:--|
| 試験時間 | 130分 |
| 問題数 | 65問 |
| スコア範囲 | 100-1,000点 |
| 最低合格スコア | 720点 |

## 申し込みについて
ピアソンVUEを利用

※予約について
会場によっては、数日先の日程が割と空いてたりする (土日は1月前くらいの予約が良さそう)
期限が近くなるとドタキャンする人が増えてくるので、
予約画面に張り付けば、案外直近の土日でも受験が可能だったりする。

## 勉強時間
30時間程度

## 利用した教材
###黒本

* [リンク](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5-AWS%E8%AA%8D%E5%AE%9A-%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88-%E2%80%93-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88%E6%95%99%E7%A7%91%E6%9B%B8/dp/4295005495/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=1616952770&sr=1-1)

* メリット 
  * 基本的なAWSサービス概要が記載
  * 教本の問題は易しめ
  * 模擬試験1回分同封
  
* デメリット
  * サービスの詳細部分について問題が出題された際に、漏れる可能性あり
  * 各サービスのケーススタディーに関わる問題に対応しきれていない感触あり

* 問題集の総評
とても分かりやすくまとまっているものの、この1冊だけで合格するのは難しいと感じました。
手にとる一冊目としては良書かなと思います。

### TopExam の問題集
* [リンク](https://pass4test.topexam.jp/AWS-Solutions-Associate-JP_shiken.html)
* メリット
  * 約550問の豊富な問題数
  * 試験の問題的中率が素晴らしい
 
* デメリット
  * 誤植や誤字・脱字が多く、日本語が難解
  * 回答の説明がほぼない、また、回答の説明と回答番号が一致していないことがある
  * ~~誤った~~ 怪しい回答が多数見受けられる (必要に応じて自身で調べる必要あり)
  
* 問題集の総評
良くも悪くも癖の強い教材に手を出してしまったと感じました。
おそらく、550問まるまる暗記すれば落ちることはないと思いますが、
問題が読みづらく、必要に応じ回答を自身で調べる必要があります。 
(問題数が多いだけに、日本語読解と回答調査の時間が苦行・・・)

↑の問題集のおかげで合格出来たので、決して悪い教材ではないのですが、
お金と時間に余裕があるかたで確実に受かりたい人向けの問題集といった感じです。

## テスト時の所感
およそ70分ほどで問題を全て埋められ、残りの時間を問題の見直しに充てることが出来ました。
気になっていた誤植もそれほど多くなく、
英語切り替えボタンがあったことからスムーズに進めることが出来ました。

問題のレベル感としては、以下のように感じました。

* サービスの概要把握程度の知識で解ける問題  (黒本で対応可) 
* サービス間連携を伴うユースケースを問う問題 (専用の問題集 or Black Belt による学習要)

取らせる問題は取らせるけれども、
対策しておかないと、7割以上は取らせないよという印象です・・・
(記憶や知識が曖昧な状態で、勢いによる受験はあまりお勧めできないなと思いました)


## 終わりに
3月に入って本腰をいれて勉強に入った感じでしたので、
もう少し時間にゆとりをもって勉強すべきであったと少し反省しているところです。

次は、SysOpsアドミニストレータ かデベロッパーの試験を受験してみようかなと
考えていますので、良いご報告が出来るように頑張りたいと思います。
Visual Studio のオフライン インストール

## Build Tools

* [vs2013](https://www.microsoft.com/en-us/download/details.aspx?id=40760)
* [vs2015](https://www.microsoft.com/ja-JP/download/details.aspx?id=48159)
* [vs2017](https://aka.ms/vs/15/release/vs_buildtools.exe)
* [vs2019](https://aka.ms/vs/16/release/vs_buildtools.exe)

### Offline Install

* 2017と2019が対応。
    * (2013と2015は以下に対応していない。※すでに含まれている)

```go
vs_buildtools.exe
 --layout offline ^
 --lang ja-JP ^
 --add Microsoft.Net.Component.4.5.TargetingPack ^
 --add Microsoft.Net.Component.4.5.2.TargetingPack 
```

`--noweb`オプションを付けてセットアップ。


## Visual Studio Community

### vs 2019

```go:download
vs_Community.exe ^
 --layout vs2019 ^
 --lang ja-JP ^
 includeRecommended ^
 ^
 --add Microsoft.VisualStudio.Workload.ManagedDesktop ^
 --add Microsoft.VisualStudio.Component.Git ^
 ^
 --add Microsoft.Net.Component.4.5.TargetingPack ^
 --add Microsoft.Net.Component.4.5.2.TargetingPack
```

オフラインでインストールするには以下。

```go:setup.bat
vs_Community.exe ^
 --noweb ^
 ^
 --add Microsoft.VisualStudio.Workload.ManagedDesktop ^
 --add Microsoft.VisualStudio.Component.Git ^
 ^
 --add Microsoft.Net.Component.4.5.TargetingPack ^
 --add Microsoft.Net.Component.4.5.2.TargetingPack
```

* vs2019の場合、`全部ダウンロードしてからインストールする` を選択。

![err1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/b7be3209-c7b4-bd31-983a-b07f24f18b80.png)


### vs 2017

```go:download
vs_Community.exe ^
 --layout vs2017 ^
 --lang ja-JP ^
 includeRecommended ^
 ^
 --add Microsoft.VisualStudio.Workload.ManagedDesktop ^
 --add Microsoft.VisualStudio.Component.Git ^
 ^
 --add Microsoft.Net.Component.4.5.TargetingPack ^
 --add Microsoft.Net.Component.4.5.2.TargetingPack
```

オフラインでインストールするには以下。

```go:setup.bat
vs_Community.exe ^
 --noweb ^
 ^
 --add Microsoft.VisualStudio.Workload.ManagedDesktop ^
 --add Microsoft.VisualStudio.Component.Git ^
 ^
 --add Microsoft.Net.Component.4.5.TargetingPack ^
 --add Microsoft.Net.Component.4.5.2.TargetingPack
```


* vs2017の場合、`ダウンロードしながらインストール`を選択。
Googleカレンダーの予定を追加するURLリンク

# 実現したいこと
URLリンクを設置し、クリックするとGoogleカレンダーの予定追加画面に遷移し、初期値をセットすることです。

例えば、下記のURLリンクをクリックすると、添付画像のように初期値がセットされます。

[URLリンク](https://www.google.com/calendar/render?action=TEMPLATE&text=会議&dates=20210501T120000/20210501T140000&location=東京都千代田区霞ヶ関1-1-1&trp=true&details=アイディア出しの会議&trp=undefined&trp=true&sprop=&add=hoge@gmail.com)

![スクリーンショット 2021-03-31 10.27.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/0db42147-97db-accb-133b-396a213ace7e.png)

OutlookカレンダーのURLリンクは[こちらの記事](https://qiita.com/yuuta_s/items/6b52a12f39e0f52143d4)

## 実現方法

URLリンクに任意でパラメータに初期値の値をセットします。

例1）URLリンクをクリックすると初期値に予定の「件名」「詳細」がセットされます。

[https://www.google.com/calendar/render?action=TEMPLATE&text=会議&details=アイディア出しの会議](https://www.google.com/calendar/render?action=TEMPLATE&text=会議&details=アイディア出しの会議)

パラメータのtextが「件名」、detailsが「詳細」です。

例2）URLリンクをクリックすると初期値に予定の「件名」「詳細」「開始時間」「終了日時」「ゲストのメールアドレス」がセットされます。

[https://www.google.com/calendar/render?action=TEMPLATE&text=会議&dates=20200501T120000/20200501T140000&details=アイディア出しの会議&add=hoge@gmail.com](https://www.google.com/calendar/render?action=TEMPLATE&text=会議&dates=20200501T120000/20200501T140000&details=アイディア出しの会議&add=hoge@gmail.com)

|  パラメータ  | 説明 |
| ---- | ---- |
| text  | 件名   |
| details | 詳細 |
| dates | 日時 <br>例） dates=20090621T063000Z/20090621T080000Z<br>フォーマット：YYYYMMDDTHHmmSSZ/YYYYMMDDTHHmmSSZ  | 
| location  | 場所   | 
| add  | ゲストのメールアドレス |
| ctz | タイムゾーン |
| uid | 一意の識別子 |

## 参考

- [Googleカレンダーに追加するURLリンクを自動生成してくれるツール](https://webasterisk.sakura.ne.jp/wp/googlecalendar_eventbuttonsgenerator/)
- [How to Send Google and Outlook Calendar Invite Links in Email Templates](https://douglascayers.com/2019/06/22/how-to-send-google-and-outlook-calendar-invite-links-in-email-templates/)
WSL2インストール後の初期設定で忘れがちなことメモ

しょっちゅう設定方法を忘れて、前の端末の設定を確認することが多いので。


## zshの設定

### zshのオートコレクトを無効にする。
（うざいので）

```sh:.zshrc
#以下を追加
unsetopt correct
```

## windowsTerminalの設定

### コンフィグでログイン時のスタートディレクトリをUbuntuのホームディレクトリに変える。
(そのままだとwindowのユーザーディレクトリから始まるので毎回cdする羽目になりがち)

```js:settings.json
           {
                "guid": ＜guid＞,
                "hidden": false,
                "name": "Ubuntu",
追加->          "startingDirectory":"//wsl/Ubuntu/home/<ユーザー名>",
                "source": "Windows.Terminal.Wsl"
            },
```


## preztoの設定

### キーバインドをviに

```sh:.zpreztorc

#zstyle ':prezto:module:editor' key-bindings 'emacs'
zstyle ':prezto:module:editor' key-bindings 'vi'
```

### 標準エディタをvimに

```sh:.zprofile
#export EDITOR='nano'
#export VISUAL='nano'
export EDITOR='vim'
export VISUAL='vim'
```
電車のLED方向幕を作ろう

電車のLED方向幕を作ってみたいなと思っていたところLEDモジュールがAliexpress等可能な事。
STM32やESP32、RaspberryPiで動かす事例がネットにあることからこれらを参考に製作してみました。
#使用するLEDパネル
今回使用したMatrixLEDは縦32横64のLEDを配置するHUB75という規格のP4といわれるパネルになります。
（寸法128㎜x256㎜）
AliexpressやShigezone等で類似のパネルが入手可能です。
なお、背面の固定穴はいくつかの種類があるので現物確認をしてください。
#STM32 Nucleoでコントロール
STM32F401でLEDパネルを動かすライブラリや資料がいくつかあり今回はled-appsさんや千ラシさんを参考に実験を行いました。
![ファイル_000 (1).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c32828ff-6358-df31-0639-447b8892e344.jpeg)
なお、led-appsさんと千ラシさんでは違うピン配列になっています。
___led-apps.com___
___https://www.led-apps.com/___
___千ラシさん
https://twitter.com/nicochirashi/status/681822551694118913___
#基板の製作
千ラシさんは過去に販売されていた基板が入手できずled-apps.comについては基板が存在しない為、実験を基にオリジナル基板を製作しました。
![DSC_0723 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b43ba0f0-a847-d47e-7f65-b6276112a53c.jpeg)
##回路図
led-appsさんと千ラシさんのピンに対応できるよう2つの出力端子とTFカードスロット及びスイッチを用意しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c5ba65be-cc89-4841-a876-63f35762a4f2.png)
#紙でケースを試作
いつも通り、紙で試作します。
横幅が700mmもある為、1枚の紙では収まりきらず、厚紙でも難しいです。
さらにLEDパネルがインジェクションの関係で裾広がりの形状となっており非常に確認しづらいです。
![ファイル_001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/d2bc2ff0-7bfa-7ce2-e672-668d4d3d4e70.jpeg)
#板金でケース製作
今回も、板金のケースを [協和工業株式会社](https://www.bankin.co.jp/)で製作してもらいました。
ステンレスでトップとボトムを、LEDの外周にフレームを鉄で製作し、塗装は業者に依頼しました。
![LED-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/be1f1260-fcef-3e49-dd01-27083b941e56.jpeg)
___レーザーで材料をカット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9e426de8-d69f-14e6-573a-b6625359b8c8.png)
ベンダーで曲げ加工___
![DSC_0051.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/571a5236-ac46-e85d-ba5b-be448b960d6f.jpeg)
#部品完成
トップカバー
![DSC_0149 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/78554ad2-35e4-d5e1-005d-da817ba47f7c.jpeg)
LEDフレーム
![DSC_0150 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3848c031-ac70-d6aa-7f0b-663e1758b4cc.jpeg)
ボトムケース
![DSC_0145 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b8a342d5-2089-c5e6-7c79-ae6082b45cea.jpeg)
#組立
ボトムケースに基板とMatrixLED、スイッチ類を取り付けます。
![DSC_0122 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/156c415d-4caa-7e33-ca37-159aaaf03688.jpeg)
LEDフレームを取り付けます。
![DSC_0124 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/8d12276c-09f2-946b-a22a-b7222356fd28.jpeg)
[はざいや](https://www.hazaiya.co.jp/)で購入した透明アクリル板とタキゲンのハンドルを取り付けます。
![DSC_0111 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/01434ec1-46e2-1f04-af57-05749b726549.jpeg)
#完成
![DSC_0115 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e8d63b3d-28a0-fa39-4ad1-d368d10af623.jpeg)
#動作風景
千ラシさんのファームウェアで動作確認
![DSC_0116 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/571483d7-7d98-d3f2-ec05-579bed6fd8d9.jpeg)
製作中にタモリ倶楽部に出られていた千ラシさんを知れた事で完成する事が出来ました。
ありがとうございました。
##製作動画
https://www.youtube.com/watch?v=W39f4WwVkCY
【初心者向け】Uncaught RangeError: Maximum call stack size exceeded というエラーの意味を一言で説明します【JavaScript】

# ここだけ読めば おｋ
> `Uncaught RangeError: Maximum call stack size exceeded`

これは
「処理が無限ループしてますよ」
っていう意味です。

# 例
### たとえば、関数の中で同じ関数を呼び出すようなコード

```JavaScript
function roop(){
  roop(); // 「roop()を実行すると、roop()を実行する」という処理なので無限に終わらない。
}
```
※ if文などで、きちんとroop()を呼び出さない状況も用意してあげればセーフです。
※ そのように上手にループを活用してる関数は **再帰関数** と呼ばれています。



### たとえば、whileやforのループで、終了する条件に永久に合致しないコード

```JavaScript
// i の値が null になることはないので、無限に終わらない。
for (let i = 0; i === null; i++) {
  //処理
}
// while 条件式がずっとtrue判定なので、無限に終わらない。
while( true ){
  //処理
}
```

# この記事を書いたあらすじ
メンティーから「表題のエラーが出たからググってみたけど、解説がむずかしすぎてよくわからない」という質問を受けました。
そんな難しい話じゃないのにな〜って思いながら試しにググってみたら、
たしかに、再帰関数がどうとかコールスタックがどうとか、
そこまでの説明求めてないっていうノリの記事がSEOで上位だったので、
Qiitaの力をかりて、このシンプルな説明が勉強中のエンジニアの卵のひとたちに真っ先に届けばいいなーと思いました。
Laravel GraphQL Lighthouse で Laravel Enum を自動型登録する

## 前提

- https://github.com/BenSampo/laravel-enum
- https://github.com/nuwave/lighthouse
- https://lighthouse-php.com

上記のライブラリはインストール済み

## 環境

- PHP 8.0.2
- Laravel 8.34.0
- nuwave/lighthouse 5.3.0
- bensampo/laravel-enum 3.3.0

[PHP8.1から言語標準機能としてenumがサポート](https://dev.to/nwby/enums-in-php8-1-2eie)されるので、今後ライブラリが不要になるかもしれません。
それまではまだしばらくは使われそうなので残します。

## LighthouseのEnum型

- https://lighthouse-php.com/5.3/the-basics/types.html#enum

公式ドキュメントに書いてある通り、Lighthouseは `BenSampo/laravel-enum` ライブラリに対応してます。

```php:app/Providers/GraphQLServiceProvider.php
class GraphQLServiceProvider extends ServiceProvider
{
    public function boot(TypeRegistry $typeRegistry): void
    {
        // 型の数だけ追加する必要がある
        $typeRegistry->register(
             new LaravelEnumType(UserStatus::class)
        );
    }
}
```

型登録を手動で行うとコンフリクトしまくっちゃうので、自動的に型登録されるようにします。

## Enum定義

普通にEnumクラスを定義します。例として`UserStatus`型を作ります。

```shell-session
$ php artisan make:enum UserStatus
```

```php:app/Enums/UserStatus.php
<?php declare(strict_types=1);

namespace App\Enums;

use BenSampo\Enum\Contracts\LocalizedEnum;
use BenSampo\Enum\Enum;

/**
 * @method INIT()
 * @method ACTIVE()
 * @method LEAVE()
 */
final class UserStatus extends Enum implements LocalizedEnum
{
    const INIT = 'init';
    const ACTIVE = 'active';
    const LEAVE = 'leave';
}
```

`LocalizedEnum` を実装しているので、`resources/lang/ja/enums.php` で翻訳対応してます。

```php:resources/lang/ja/enums.php
<?php declare(strict_types=1);

use App\Enums\UserStatus;

return [
    UserStatus::class => [
        UserStatus::INIT => '仮登録',
        UserStatus::ACTIVE => '有効',
        UserStatus::LEAVE => '退会',
    ],
];
```

## GraphQLServiceProvider

```
$ php artisan make:provider GraphQLServiceProvider
```

中身を下記のように書き換えます。

```php:app/Providers/GraphQLServiceProvider.php
<?php declare(strict_types=1);

namespace App\Providers;

use Illuminate\Support\Facades\File;
use Illuminate\Support\ServiceProvider;
use Nuwave\Lighthouse\Exceptions\DefinitionException;
use Nuwave\Lighthouse\Schema\TypeRegistry;
use Nuwave\Lighthouse\Schema\Types\LaravelEnumType;

final class GraphQLServiceProvider extends ServiceProvider
{
    /**
     * @param TypeRegistry $typeRegistry
     * @throws DefinitionException
     */
    public function boot(TypeRegistry $typeRegistry): void
    {
        foreach ($this->getEnumClasses() as $enumClass) {
            $typeRegistry->register(new LaravelEnumType($enumClass));
        }
    }

    /**
     * @return array
     */
    private function getEnumClasses(): array
    {
        $classes = [];

        foreach (File::files(app_path('Enums')) as $file) {
            if ($file->getExtension() === 'php') {
                $classes[] = 'App\\Enums\\' . $file->getBasename('.php');
            }
        }

        return $classes;
    }
}
```

作製した `GraphQLServiceProvider` を登録します。

```php:config/app.php
return [
    'providers' => [
        App\Providers\GraphQLServiceProvider::class,
    ],
];
```

これでEnumクラスの型登録が自動で行われます。
セキュリティのあれこれ

コンピュータの成り立ちとか、基礎とか理解できればこれから先どんなことをやるにしても理解が早いのではないかと思い勉強を始めました。
[キタミ式イラストIT塾 基本情報技術者](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E4%BB%A4%E5%92%8C03%E5%B9%B4-%E3%81%8D%E3%81%9F%E3%81%BF%E3%82%8A%E3%82%85%E3%81%86%E3%81%98/dp/4297117819)で勉強させていただいております。

まとめます！

## 何故セキュリティが必要か

そもそも何故必要か。
ネットワークが世界中につながっていることで遠く離れた人とも簡単に繋がれますよね。
なんか当たり前なんですけどすごいですよね。
どこでもドアみたいなものですもんね。

でも世界中の人と繋がる道があることで悪意のある人もその道から侵入してしまい様々な悪さをします。
なりすましをしてデータを盗み見たり、改ざんしたり。
それを詐欺に使われたり個人情報を名簿として売られて営業に使われたり。
悪い人がいなければいんですけどね、悪い人がいるからこそそれを防ぐために技術が発展したりしてて複雑ですね。

前職のドコモショップではスマホに知らず知らずにアプリが入っていてデータを取られていたりなんてわりと日常茶飯事でしたね。
ITリテラシーが比較的低い方ばかりだったのもありますけど。
一番怖いなって思ったのは画面の操作をできなくして「元に戻して欲しければお金を振り込め」っていう警告文が出るランサムウェアですかね。
実際に見たんですけど、その人別に変なアプリ入れたとか変なサイトにアクセスしたとかじゃなかったので、いつどんなウィルスが入るか分からないなって思いました。

私は心配性&スーパーネガティブなのでセキュリティソフトを入れて安心しています。
お客様で無料のセキュリティソフトを名乗ったウィルスアプリ入れて広告で埋め尽くされて操作できないスマホを持ってきた人もいるので信頼できるソフトを使いましょう。

Qiita見る人にこんな情報は当たり前過ぎましたね。


## ユーザー認証とアクセス管理

ユーザー認証の種類は以下のような方法があります。

| 名前            | 方法                                                       |
|:--------------:|:-----------------------------------------------------------|
| ID・PW認証       | IDとPWの組み合わせで個人を識別する。一番ポピュラーだが漏れると意味がない。 |
| 生体認証         | 指紋や虹彩などの身体的特徴を使って識別する。覚える必要がなく管理が楽。    |
| ワンタイムパスワード | 一度限り有効の使い捨てのパスワードを発行し識別する。漏れても安心。         |
| コールバック       | 一旦回線を切り、サーバ側から再発信することでアクセス権を確認する。         |


## アクセス権

ファイルやディレクトリに対して、読み取りや修正や削除などの権利をユーザーごとに指定することです。
例えば、ある人は読み取りも書き換えもできるけど、ある人は読み取りしかできないみたいに。

よく使うのはLinuxコマンドで`ls -l`と入力すると出てくる`drwxr-xr-x`こういうのですよね。
アクセス権というものが無いとよく分からない人が大事なデータを消してしまったり、悪意のある人が書き換えしてしまったりが起こるわけですね。


## ファイアウォール

防火扉ですね。言葉の通り。
そのネットワークとLANとの間に置き、不正なアクセスを防ぐ役割をしています。
種類として以下のようなものがあります。

#### パケットフィルタリング

ルールに当てはまらないパケットは通さないというものです。
そのルールとはIPアドレスやポート番号などです。
例えばポート80番は許可するけどポート110番は許可しないとかって決めるんですね。

#### アプリケーションゲートウェイ

LANと外のインターネットなどに置いて、外部とのやりとりを代行して行ってくれるというものです。
中のLANからはこのアプリケーションゲートウェイしか見えないし、外からもここしか見えないので中のLANが不正にアクセスされることを防ぎます。

#### ペネトレーションテスト

実際にファイアーウォールに攻撃をしてみて脆弱性のテストをすることです。
定期的に行うことが望ましいと考えられています。


## 暗号化技術

SSH認証などで使う`鍵認証`について。
私は`公開鍵と秘密鍵が必要でそれは外部に漏らしてはいけない`くらいの認識しかなく、仕組みとかはよく分かっていませんでした。
そもそも大事な鍵なのに`公開鍵`っていう名前もよく分からないし、`秘密鍵`っていうか鍵は全部秘密であるべきじゃないの？という気持ちでした。


#### 公開鍵と秘密鍵はセットで意味をなす
`公開鍵で暗号化をし、秘密鍵で複合化(暗号を解くこと)をします。`

例えば、AさんがBさんにデータを送るとします。
AさんはBさんの公開鍵を使って暗号化し、Bさんは自分の秘密鍵を使って複合化する。
Bさんは自分の公開鍵をAさんに教える必要があるので公開鍵と呼ぶんですね。
つまり暗号化は誰でもできるけど、複合化はBさんしかできないので`途中で誰かに盗み見られたりしない`ということです。

逆もまた然りで、秘密鍵を使って暗号化したらペアの公開鍵でしか複合化できないという仕組みを使って`改ざんを防ぐ`こともできます。
例えばAさんは自分の秘密鍵で暗号化してBさんにデータを送ったとします。
それをBさんはAさんの公開鍵で複合化します。
Aさん以外は暗号化することができない&Bさんが初めて複合化したので、つまりBさんにデータが渡るまで誰もデータを変更したりしていないという証明になります。


仕組みが分かるとエラー解決なんかにも役立ちますね。
私はAWSのEC2で鍵認証ではまったことがありますが、その時にこの仕組みを知っていればもっと早く解決できたかもと思います。
IT業界について

```

基本的にこれは自分の場合の話です。

SESは駄目だと言われますが、完全なる悪ではないです。

自社開発も微妙・・・そういうわけでもありません。

どっちも同じことは言えますが、一年目についてはやりたいことをできるってあんまり期待しないほうがいいかと思われます。あと給料も。

※こればかりは文句を言わないようにお願いします。

そもそも社会人一年目とか、経験が浅いとそもそもいきなり核となる場所をやらせてもらえるかといえばそんなことはほぼないです。

SESの会社って大体1年〜3.5年位が長くいれてそんな感覚なのかなといえそうです。

居心地良ければ辞めなくてもいいと思います。

エンジニアは結局フリーランスになると得をするのか？そうでもないと思います。

ネックは確定申告とかそういうところかなと思います。これは別に慣れていれば関係ないかも。

派遣エンジニアはやや中途半端に見えるけど、実質そんなに悪くないと思います。

正直なところ、現代において・・・雇用形態とIT業界内での大きな貴賤はあまり感じません。

これはIT業界が若干特異に見えてしまうのもあるかもしれません。

フリーランスって良くも悪くも、何を選択しやすいです。
かといって派遣もそうなんですが・・・正社員の場合、何をやるのか稀に逸脱してしまう。

というのがあるので、僕の場合敢えて非正規雇用を選んでいるといったところでしょう。

この業界、ある程度勉強しないとなかなかに大変ですけどね。

```
海外留学にまつわる5つの誤解

毎年10万人以上の大学生が海外に留学していますが、身の回りには様々な話や都市伝説、誤解が流れているはずです。その中には事実も含まれているかもしれませんが、ここでは留学に関するいくつかの誤解を紹介します。

誤解その1：海外留学はお金がかかる。
現実です。ほとんどの場合、海外留学の方が安いのが普通です。例えば、あなたが通っている学校の1学期の授業料を5,000ドル、部屋代と食事代をそれぞれ4,000ドルとします。さらに、税金、書籍、洗濯機などの追加料金がかかります。この学期では、1万ドルをはるかに超えていますね。私たちがスペインで提供しているサービスは、航空券代と経費を除いて、1学期あたり1万ドル以下です。

誤解その2：私の財政支援では留学できません。
真実: ほとんどの場合、連邦政府の支援を留学に利用することができ、特定の国では州の支援を利用することもできます。海外留学の際に国からの支援を上げることはよくあることで、それらの奨学金を移すことはできません。

誤解その3：ホストファミリーはみんな貧乏で、家賃のためにやっているのではないか。
真実：外資系企業が最終的に望むことは、残念な学生を獲得することです。学生が喜んで、どれだけ楽しかったかを仲間に伝えてくれることが目的です。貧困家庭や治安の悪い地域に学生を入れても、誰も仲間に提案してくれません。この1年で、私たちの活動に賛同してくれる大学の数が2倍になったことからも、学生たちが私たちの家族選びに満足していることは明らかです。

誤解その4：学業に追われて、自分のいる国を見る時間がなくなる。
真実：平均的な海外の学生は、長いリストの国で撮った400枚以上の写真を持っているので、これはヒステリックに面白いです。学生は飛行機に乗りますし、私たちも学生を旅行に連れて行き、自分が住んでいる国のことを感じてもらいます。

誤解その5：海外に行ったら、期限内に卒業できないかもしれない。
真実：すでに選択科目や一般教養を修了している場合は、海外旅行の前か後に修了しなければなりません。しかし、先を見越してあらゆる選択肢を残しておけば問題ないでしょう。半学期や2学期は家を離れていますが、留学する学生の明確な多数派はすでに4年制大学に在籍しています。

海外留学は、大学生であれば誰もが経験できる一生に一度の経験です。あなたは、仲間の否定的な経験や読んだ噂を理由に、それを拒否するまで留学アドバイザーと話し合うでしょう。留学が与えてくれるすべてのものを見た後に、海外への最初の便に飛び乗ることができることを約束します。


今日から英語の勉強を始めて、すぐに夢の国に行きましょう。


無料体験


https://iprofevolution.com/send-a-message/
DOM上のすべてのid属性を取得する

*※filterメソッド使わなくてもcssセレクターで可能とのこと。詳しくはコメント欄を参照。*

id属性以外でも可。

```js
//id属性が指定されているエレメントを取得して配列化する
var elm = Array.prototype.slice.call(document.querySelectorAll("*"))
  .filter(d => d.id);

//id名を取得する
var idList = elm.map(d => d.id);
```

正規表現を使って取得するエレメントを選択する。
例えばid名が"btn_"から始まるエレメントすべてを取得する

```js
var elm = Array.prototype.slice.call(document.querySelectorAll("*"))
  .filter(d=> /^btn_/.test(d.id));

```
【Python】while文がbreakされず条件を満たすまで実行されたのかをwhile-elseで判定する方法（備忘録）

自分用メモ

while文がbreakで途中で抜けたのか、breakされず条件を満たす間すべて実行されたのか判定する方法。
他の言語のクセでbool型で途中で抜けたのかを判定しがちだったけどこれは便利。
for文で出来たのでwhile文で試してみたら出来た。

**for-else**

https://qiita.com/shinkai_/items/fd2aa7ad83795a70ca8e


# while-else
```python
counter = 0
while(counter < 5):
    print("while中だよ")    
    counter += 1
    if counter == 10:
        break
else:
    print('最後までループしたよ')
print('while文が終了したよ')
```
```
while中だよ
while中だよ
while中だよ
while中だよ
while中だよ
最後までループしたよ
while文が終了したよ
```

# bool型での判定
よく書きがちだった方法

```python
counter = 0
isBreak = False
while(counter < 5):
    print("while中だよ")    
    counter += 1
    if counter == 10:
        isBreak = True
        break
if not isBreak:
    print('最後までループしたよ')
print('while文が終了したよ')
```


以上
【GeoGebra】jsによって値を変更する

## 値を変更するコマンドSetValue
GeoGebraでは、値を変更する方法としてスライダーを用いる方法の他に`SetValue(変数名,値)`コマンドを用いる方法があります。使い方としては、ツールバーからボタンを配置し、スクリプトに記述します。

```js
SetValue(α,1)
```

![スクリーンショット 2021-03-31 9.57.14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/0a5bd3a1-9232-9f1e-e86f-1719e0e7a2b2.jpeg)
余談ですがGeoGebraでαはoption+Aで打てます。

## GeoGebra ScriptではなくJavaScriptで記述する場合
複雑なアプリを作成するとなると、jsで記述しなければならないこともしばしば。そんな時は`ggbApplet.evalCommand()`内に処理を入れます。

```js
ggbApplet.evalCommand('SetValue(α,1)');
```
![スクリーンショット 2021-03-31 10.02.09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/c4b99116-4bff-5f24-1c9d-7d31a8c6f51b.jpeg)

これでjsからGeoGebraの変数の値を変更することができました。
PHP Eloquentライブラリを勉強しています

PHP Eloquentライブラリの勉強を始めました。
今回はmydbというデータベースのjobsテーブルに接続する方法です。


DB接続

```PHP
require_once './vendor/autoload.php';
    
$db = new Illuminate\Database\Capsule\Manager;
    
$db->addConnection
	([
        
		'driver' => 'mysql',

        	'host' => 'localhost',
	
        'database' => 'mydb',

        	'username' => 'root',

        	'pasword' => ''
        
	]);
    
	$db->setAsGlobal();

    　　$db->bootEloquent();

class Jobs extends Illuminate\Database\Eloquent\Model {
    }

    $results = Jobs::all();
```

SQL文なしに全レコードを表示できます。
AWS初心者日記


#AWSクラウドプラクティショナーをとりたいなと思って、勉強のメモをしていきます。
##AWSとはクラウドコンピューティングをつかったサービスのこと。
>クラウドコンピューティングとは、インターネットを介してサーバー・ストレージ・データベース・ソフトウェアといったコンピューターを使った様々なサービスを利用することを指します。クラウドコンピューティングでは、手元に1台のPCとインターネットに接続できる環境さえあれば、サーバーや大容量のストレージ、高速なデータベースなどを必要な分だけ利用できるわけです。

>>[【初心者向け】AWSとは? わかりやすく解説](https://www.skyarch.net/proactive/cloud/aws/aboutaws_01.html)

つまり一台のPCだけで大容量のサーバ、データといった色んなサービスを使えること。

##クラウドのメリット
1　固定の償却コストが変動コストに
従来はサーバーとかサーバーセンターに投資しなきゃいけなかったけど
クラウドはリソースを使った分だけのお金でいいよねってこと

2　スケールによる大きなコストメリット
自社環　境よりも低い変動コストを実現できる（なんで？）
→みんなつかってるから、”規模の経済”を活かして従量課金制の料金も低くできる

3　キャパ予測が不要に
必要なリソースの増減ができるから、最大値を定めなくてよい
スケールアップ、ダウンが簡単

4　速度と迅速性の向上
新しいITリソースを簡単に利用できる
結果検証や開発にかかるコスト、時間のカットができるから、組織の俊敏性があがる

5　データセンターの運用保守投資が不要
インフラじゃなくてビジネスを差別化するプロジェクトに集中できる
サーバー機器の運用が不要なので、使ってる人が業務に専念できる

6　わずか数分で世界中にデプロイ
すぐ世界中に公開できちゃう

##種類
>_Infrastructure as a Service (IaaS)_ イアース
>>Infrastructure as a Service (IaaS と略されることもある) はクラウド IT の基本要素から成るもので、通常はネットワーキング機能（サーバー）、コンピュータ (仮想または専用ハードウェア)、データストレージ領域へのアクセスを提供するものです。Infrastructure as a Service では、IT リソースに最高度の柔軟性と管理統制がもたらされると同時に、現在の多くの IT 部門や開発者にとってなじみ深い既存の IT リソースに最も類似するシステムを利用できる

インフラどうぞってこと


>_Platform as a Service (PaaS)_　パース
>>Platforms as a Service を使用すると、基盤となるインフラストラクチャ (通常はハードウェアやオペレーティングシステム) を組織内で管理する必要性がなくなり、アプリケーションのデプロイと管理に集中できるようになります。リソースの調達、容量計画、ソフトウェアメンテナンス、パッチの適用、またはアプリケーションの実行に関連するその他のわずらわしい作業について心配する必要がなくなるため、業務をより効率的に進めることができます。

OSどうぞってこと

>_SaaS (Software as a Service)_　サース
>>Software as a Service では、サービスプロバイダーが実行および管理している完成した製品を利用できます。ほとんどの場合、エンドユーザーアプリケーションを指して Software as a Service という言葉が用いられます。SaaS を使用すると、サービスのメンテナンスや基盤となるインフラストラクチャの管理をどのように行うかを考える必要がなくなり、特定のソフトウェアを使用する方法を考えるだけでよくなります。SaaS アプリケーションの一般的な例の 1 つに、ウェブベースの E メールがあります。このようなサービスでは、メール製品への追加機能を管理することなくメールを送受信することが可能で、メールプログラムを実行しているサーバーやオペレーティングシステムのメンテナンスを行う必要もありません。

サービス、アプリケーションどうぞってこと

##クラウドネイティブってなんぞ
>「クラウドネイティブ技術は、パブリッククラウド、プライベートクラウド、ハイブリッドクラウドなどの環境において、スケーラブルなアプリケーションを構築および実行するための能力を組織にもたらします。 代表例として、コンテナ、サービスメッシュ、マイクロサービス、イミュータブルインフラストラクチャ、および宣言型 API があり、回復性、管理力、および可観測性のある疎結合システムが実現します。 また、これらを自動化することで、インパクトのある変更を簡単に行うことができます。」
>>??

クラウドの利点を徹底的に活用するシステムのことらしい

##クラウド活用の場面
広告、金融、ゲーム、医療、製造業、メディア、通信、旅行etc…




##今日はここまで
引用元：[クラウド (クラウドサービス) とは？](https://aws.amazon.com/jp/cloud/)
【C#】ログを出力したい

世の中にごまんとあるが、備忘録として残したっていいじゃない。
log4net.configはプロジェクト直下に配置想定。

##設定
```CS:AssemblyInfo.cs
[assembly: log4net.Config.XmlConfigurator(Watch = true, ConfigFile = "log4net.config")]
```

```xml:log4net.config
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
	<log4net>
		<appender name="RollingLogFileAppender" type="log4net.Appender.RollingFileAppender">
			<File value=".\log\sample" />
			<appendToFile value="true" />
			<rollingStyle value="composite" />
			<staticLogFileName value="false" />
			<datePattern value='"."yyyy-MM-dd".log"' />
			<MaxSizeRollBackups value="20" />
			<MaximumFileSize value="1MB" />
			<layout type="log4net.Layout.PatternLayout">
				<conversionPattern value="%d [%M][%P{addr}][%P{user}] %p : %message%n" />
			</layout>
		</appender>
		<root>
			<level value="ALL" />
			<appender-ref ref="RollingLogFileAppender" />
		</root>
	</log4net>
</configuration>
```

```CS:CS
public class HomeController : Controller
{
    private static readonly log4net.ILog _logger = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);

    public ActionResult Index()
    {
        log4net.GlobalContext.Properties["addr"] = "addr"; // クライアントのIPを設定する
        log4net.GlobalContext.Properties["user"] = "user"; // クライアントのユーザーIDを設定する
        _logger.Info("メッセージ");
        
        return View();
    }
}
```

##結果
```log:sample.2021-03-29.log
2021-03-29 16:56:54,354 [Index][addr][user] INFO : メッセージ
```
rubyのAPI問題

## 初めに
初学者です。rubyの練習問題を自分なりに解説して定着することが目的です。もし間違いなどありましたらご指摘お願いします。

### 問題
名前を入力する機能を作成しましょう。
名前以外にピリオド(.)や空白があるとエラーを表示させます。
include?メソッドを使用して下さい。

出力例：
登録したい名前を入力してください(例)YamadaTaro

YamadaTaro → 登録が完了しました
Yamada.Taro→!エラー!記号は登録できません
Yamada Taro → !エラー!空白は登録できません

ではまず用語の解説から行います。
### include?メソッド
include?メソッドとは指定した要素が配列や文字列に含まれているかを判定するメソッドのこと。指定した文字列が要素に含まれていればtrue、なければfalseを返します。
書き方としては

```
オブジェクト名.include?("検索する文字列")
```
また配列の中身を検索することもできます。
注意としては？がつかないだけで全く別のメソッドになるので必ず？を忘れないようにしてください。さらに詳しいことは公式を参照してください。
[公式](https://docs.ruby-lang.org/ja/latest/class/Array.html#I_INCLUDE--3F)
### 解答
ではまず名前を入力してもらう記述から書いていきます。ここの説明は割愛します。

```
puts "登録したい名前を入力してください"
str = gets
check_name(str)
```
では名前を入力してもらう記述がかけたので問題文の条件にあったメソッドを作っていきます。入力した内容をメソッドに引数として渡します。

```
def check_name(str) 
end
puts "登録したい名前を入力してください(例)YamadaTaro"
str = gets
check_name(str) 
```
そして渡した引数にピリオドや空白がないか検索してあればエラー文を表示させます。検索には先ほど説明したinclude?メソッドを使用します。
さらに今回は出力した内容に対して３つの分岐があります。条件分岐はif文を使用します。３つの分岐があるのでif→elsif→else と分岐させていきます。

```
def check_name(str) 
  if str.include?(".")
    puts "!エラー!記号は登録できません"
  elsif str.include?(" ")
    puts "!エラー!空白は登録できません"
  else
    puts "登録が完了しました"
  end
end
puts "登録したい名前を入力してください(例)YamadaTaro"
str = gets
check_name(str) 
```
ピリオドは"."
空白は" "と表しています。以上です。
インフラの基礎の基礎の基礎

##インターネットに作成したサイトを公開するときに必要なもの
- **IPアドレス、ドメイン**
- **Webサーバー**

上記の2つが必要ですが、名前は聞いたことはある方も多いと思います。
再確認ということで、簡単に詳細を書いていきます。

##IPアドレスってなに？
「**IPアドレス**（Internet Protocol address）」は、インターネット接続中のコンピュータを識別する番号のことで、簡単に言うと、インターネット上の住所です。
インターネットってデータの送受信が頻繁に行われていますが、その通信の送り先がIPアドレスです。

ネットショッピングがいい例だと思います。
物を買っても相手が自分の住所を知らないと届かないですよね。
それと一緒です。

####自分のIPアドレスを確認してみましょう

```html:ターミナル
$ curl -s ifconfig.me
```

そうすると「220.247.x.xxx」のように、「.」で区切られた数字が表示されたと思います。
この番号が、いまインターネット接続中のPCに割り当てられているIPアドレスです。

##ドメインってなに？
「**ドメイン**（domain）」は、**IPアドレスを人間がわかりやすい名前に変換したものです。**
**例「220.247.x.xxx」→ 「hoges.com」**
「xxxxx.com」や「xxxxx.co.jp」のような表示を見たことがあると思います。これがドメインです。

####ドメインを変換するシステム
**ドメインはあくまでも人間がわかりやすい名前にしたもの**なので、**コンピュータ同士の接続にはIPアドレスが必要**です。
ドメイン名をIPアドレスに変換する仕組みを、「**DNS**（Domain Name System）」といいます。

##Webサーバーってなに？
「**サーバー**（server）」は、サービスを提供するコンピュータのことです。
このうち、Webサイトの表示に使われるサーバーが、「Webサーバー」です。

ん？よくわかりませんね、、

サーバと聞くと難しいですが、要は会社が用意したパソコンくらいに思っておけばいいと思います。
インターネット越しにそのパソコンのデスクトップなり、フォルダの中なりを閲覧できるようにしているだけなんです。

サーバーは複雑なことが多いので今回は多くは書きません。
~~私もまだまだわからないことが多いので、、~~

##終わりに
今回は簡単な概要だけまとめてみました。
私も初学者ということで、間違っている表現があると思いますが、ご指摘いただけると幸いです。
PowerVS IBM i 日記(34): 大阪 DC(OSA21) でも PowerVS の提供を開始

# 大阪 DC(OSA21) でも PowerVS の提供を開始

PowerVS が大阪 DC(OSA21) でも利用可能になりました。
これで、東京 DC(TOK04) と合わせて、日本国内で 2 DC 体制を構築することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184930/a93bc858-7ad7-19b0-0167-c1c7b82ce589.png)

## IBM i 7.1 も利用可能

「[PowerVS で IBM i 7.1 が利用可能。まずはダラス12から](https://qiita.com/6onoda/items/60a3b5c9a33ed7359dd9)」で、お知らせしたように、一部の DC の PowerVS で IBM i 7.1 が利用可能になってきています。
本日(2021年3月31日)現在、東京 DC(TOK04) では、利用できないのですが、新しい大阪 DC(OSA21) では、IBM i 7.1 も利用可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184930/c55a56c8-330e-5f3c-6b1e-75c8f7c394a8.png)

レイテンシーの少ない日本国内で IBM i 7.1 を利用したい場合には、うれしいですね。

---
当日記のIndexは[こちら](https://qiita.com/6onoda/items/f146c78c0c1bbe905a42)です。

---
許可の無い転載を禁じます。
この記事は筆者の個人的な責任で無保証で提供しています。
当記事に関してIBMやビジネスパートナーに問い合わせることは、固くお断りします。
[Rails]デプロイした時にカスタムフォントが反映されない不具合

始めて3ヶ月の初学者で、初投稿になります。
アウトプットを兼ねて投稿します。
どうぞお手柔らかにお願い致します!
間違いなどありましたらご指摘いただけるとありがたいです。

#はじめに
PF作成するにあたり、開発環境ではフォントが反映されるが本番環境では反映されなかった時のことを備忘録として書きたいと思います。

#1.カスタムフォント
カスタムフォントの素材をダウンロードしたらapp/assets/fonts以下にダウンロードしたカスタムフォントを保存します。
次にscssファイルを作成し、以下の記述を追加します。

```ruby:font.scss
@font-face{
 font-family: 'フォントの名前';
 src: asset_url('abcdefg.otf') format("truetype");
 font-weight: normal;
 font-style: normal;
}
```
###注意
ファイル名は、/assets/を含めないこと！
また、.otfの拡張子は適宜変更してください。
自分の場合はこれが一つの原因でプリコンパイルするときに先にapp/assetsを読み込んでしまっていました。
なのでデベロッパーツールで反映されてない本番環境を検証してみるとnot foundと出るはずです。
そのため、/assets/を含めずにファイル名のみの記述です。

#2. 本番環境への適応
30行目でfalseをtrueにします。

```ruby:config/environments/production.rb
config.assets.compile = true
```

#3.拡張子を許可してあげる
デフォルトのままだとjs,cssしか読み込まないので14行目でコメントアウトを外して他の拡張子を許可してあげる。
（自分の場合は.otfでした）
ちなみに11〜13行目のコメントアウトは説明文とのこと。

```ruby:initializers/assets.rb
Rails.application.config.assets.precompile += %w(*.otf)
```

この方法で本番環境に反映されていることを確認できました！

#参考記事
以下、参考にさせていただきました。
https://qiita.com/iwkmsy9618/items/98a01373f68887055f21
Web.configの値をCSHTMLで使用したい

Web.configでの設定値をフロント側で使用できるの知らなかったです。（便利）

```config:Web.config
<configuration>
  <appSettings>
	<add key="config" value="TEST"/>
  </appSettings>
</configuration>
```

```CS:CSHTML
@System.Configuration.ConfigurationManager.AppSettings["config"]
```
初学者のプログラミング　Docker導入

##Docker導入奮闘記
およそ三日かけてDockerの導入に成功！嬉しかったので記事に残そうと思う。特にエラーの対処について残していく
##エラーその１　タイプミス
```terminal
エラー文
Invalid value for --database option. Supported for preconfiguration are: mysql, oracle, postgresql, sqlite3, frontbase, ibm_db, sqlserver, jdbcmysql, jdbcsqlite3, jdbcpostgresql, jdbc.
```

シンプルにタイプミス！docker.compose.ymlの記述に誤りがあった

```ruby
default: &default
  adapter: postgressql #<='s'が多い
  encoding: unicode
  host: db
  username: postgres
  password: password
  pool: 5
```
素直に公式ドキュメントから引用すべき！
公式ドキュメント：https://docs.docker.com/compose/rails/#define-the-project

##エラーその２　database.ymlのpassword設定ミス
```terminal
エラー文
db_1   | Error: Database is uninitialized and superuser password is not specified.
db_1   |        You must specify POSTGRES_PASSWORD to a non-empty value for the
db_1   |        superuser. For example, "-e POSTGRES_PASSWORD=password" on "docker run".
```
ここから`docker-compose logs`でエラーログを見始める。(もっと早く確認すれば良かった)
ログからパスワード設定に誤りがあると仮定し、公式ドキュメントを確認したら解説があった。

###公式ドキュメントより引用
最後に、docker-compose.yml魔法が起こる場所です。このファイルには、アプリを構成するサービス（データベースとWebアプリ）、それぞれのDockerイメージを取得する方法（データベースは事前に作成されたPostgreSQLイメージで実行され、Webアプリは現在のディレクトリから構築されます）、そして、それらをリンクしてWebアプリのポートを公開するために必要な構成。

```ruby
version: "3.9"
services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    # ここのパスワード設定にミスがあった　公式ドキュメントで解決 #
    environment:  
      POSTGRES_PASSWORD: password
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
```
docker-compose.ymlを訂正して解決できた。

##エラーその３ postgresqlのバージョンエラー
デフォルトで設定されるバージョンでエラーが出た。Gemfileを訂正し解決。

##エラーその４ 失敗したDBデータが残っていたために出るエラー
全てを削除する、筆者曰く「滅びの言葉」を実行し、初めからやり直すことで導入を完了した。

```terminal
$ docker-compose down --rmi all --volumes --remove-orphans
```
参考：《滅びの呪文》Docker Composeで作ったコンテナ、イメージ、ボリューム、ネットワークを一括完全消去する便利コマンド
https://qiita.com/suin/items/19d65e191b96a0079417
大変お世話になりました！ありがとうございました！

##まとめ
dockerについてudemyで勉強しながら導入した。しかし、実際に手元で操作すると実行結果に多くの差が出現した。その際にブログも大いに参考になったが、特に公式ドキュメントを参考にすべきだと、改めて痛感した。また、ログを確認することの重要性を再確認できた。まずはログを確認して、どこを対処しなければいけないかを明確にして作業を進めていくべき。

##参考
* docker公式ドキュメント
https://docs.docker.com/compose/rails/#define-the-project
* 
《滅びの呪文》Docker Composeで作ったコンテナ、イメージ、ボリューム、ネットワークを一括完全消去する便利コマンド
https://qiita.com/suin/items/19d65e191b96a0079417
* PostgreSQL（Docker）にRails（Docker）が接続できなくなったから調べてみた。（could not translate host name "db" to address: Name or service not known）https://qiita.com/at-946/items/2fb75cec5355fad4050d
* 



## さいごに
プログラミングの初学者です。その日に学んだことを学習の一環としてアウトプットしています。より深く学習していきたいと考えておりますので、内容に誤りがございまいたらご指摘等いただけますと幸いです。

参考図書：パーフェクト Ruby on Rails【増補改訂版】すがわらまさのり/前島真一/橋立友宏/後藤優一/五十嵐邦明