OmniAICreator/Qiita-1.07M huggingface dataset:
IBM Cloud Classic Infrastructure VSI (Virtual Server Instance) の Windows Server 2016 OSパッチ適用

##### はじめに

IBM Cloud Classic Infrastructure VSI (Virtual Server Instance, 仮想サーバー・インスタンス) で Windows Server 2016で OSパッチ適用を実施した記録です。


----

##### 環境

IBM Cloud Classic Infrastructure VSI, Windows Server 2016 Standard Edition (64 bit)


----

##### 作業

(事前作業) システム・バックアップを取得


(1) サーバー マネージャー -> ローカル・サーバーに移動し更新プログラムのチェックを押す

(前回の更新はおよそ 1 年前です...)

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/9a3efc57-ebde-b674-c679-18b53b129baf.png)



(2) 更新のダウンロード

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/b6d9eb8e-2d6f-86c3-c414-ac4e4b96c393.png)

(3) 更新のインストール

ダウンロードからインストールまでは数分程度でした。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/7d42746d-1822-2b3b-3726-045774da9405.png)

開始からおよそ1時間少しでインストールが 50 % まで進みました。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/b0de3e88-fb0a-3f4f-23af-16e7369dee7c.png)

(4) 更新後の再起動要求確認、再起動実施

更新の開始から再起動要求まで1時間15分程度かかりました。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/1da68614-1662-06a7-eec3-f0b4fda0efd8.png)

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/1a995e9f-9b54-cc69-e349-fe7289867730.png)


リブート後、適用が進行中でなかなかログインできず、状況がわからず焦りました..。


(5) 再起動後、デスクトップにログイン。更新適用中

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/096c0535-f0c6-b2b4-cec0-3802e181da1c.png)

78%から約5分後に適用完了

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/fd72d02e-1a40-bf70-8bf9-2b420822d981.png)

(6)更新状態が最新となったことを確認

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/6e29a474-2bf5-1879-e21a-13fbf6122cc0.png)

再起動実施から20分程度かかったと思います。



(7) 更新の履歴を確認

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517421/a757c9e5-75ca-1e1f-d082-32dc5b11a71c.png)


(事後作業)
・パッチ適用後に稼働ソフトウェアに問題ないことを確認
・システム・バックアップを取得

----
##### おわりに


Web上の情報では結構時間がかかった方を見たのでどのくらいかかるか心配していましたが、更新作業自体は2時間内で終えられて一安心しました。


以上です。
Project PLATEAUの3D都市モデルをCesiumに表示


このサイトに書いてあること、ほぼそのままです。
ありがとうございます。
https://ufirst.jp/memo/2021/04/01/post-2864/


## PLATEAU
私は広島県に住んでるので、呉市のデータを使います。
https://www.geospatial.jp/ckan/dataset/plateau-34202-kure-shi-2020

この中から 「3D Tiles, GeoJson, MVT, Shape」 
＞　詳細　＞　ダウンロード
[![Image from Gyazo](https://i.gyazo.com/a41a29c5ebd49fa57417edbebc441024.png)](https://gyazo.com/a41a29c5ebd49fa57417edbebc441024)


ダウンロードデータを解凍すると
[![Image from Gyazo](https://i.gyazo.com/f02fd7eaf3e6ce7b9c21034eba5dac56.png)](https://gyazo.com/f02fd7eaf3e6ce7b9c21034eba5dac56)


この中から
01_building > 34202_kure-shi_2020_bldg_notexture

[![Image from Gyazo](https://i.gyazo.com/c0115fa088d4e553da215332f83116c6.png)](https://gyazo.com/c0115fa088d4e553da215332f83116c6)


この「34202_kure-shi_2020_bldg_notexture」をウェブサーバにアップします。


今回はAWS S3にアプロードしてみます。　
（すでにウェブサーバある人は次の章は飛ばしてください）

## AWS S3

AWS コンソールにアクセス
AWS S3 > バケットを作成

バケット名入力、
リージョン選択

このバケットのブロックパブリックアクセス設定
「パブリックアクセスをすべて ブロック」のチェックを外し、
「パブリックアクセスのブロックをすべてオフにすると・・・」のチェックを入れる。

[![Image from Gyazo](https://i.gyazo.com/7880ebe5882877ee797f7ba0d3e2bc08.png)](https://gyazo.com/7880ebe5882877ee797f7ba0d3e2bc08)

「パケットを作成」をクリック


バケットができる。

バケットポリシーの編集

アクセス許可　＞　バケットポリシー　を編集

ポリシーを以下のように設定する

```
{
   "Version":"2012-10-17",
   "Statement":[{
    "Sid":"PublicReadForGetBucketObjects",
         "Effect":"Allow",
      "Principal": "*",
       "Action":["s3:GetObject"],
       "Resource":["arn:aws:s3:::[バケット名]/*"
       ]
     }
   ]
 }
```

そして、ファイルをアップロード。
<br>

## Cesiumで表示

sandcastleというウェブ上でCesiumを使えるツールを利用します。

CesiumJS のサイトへ
https://cesium.com/platform/cesiumjs/

中段にある 3D Tiles をクリック
[![Image from Gyazo](https://i.gyazo.com/59e6c479175fb55953ac8badac07266c.png)](https://gyazo.com/59e6c479175fb55953ac8badac07266c)


こんなサイトへとびます。
[![Image from Gyazo](https://i.gyazo.com/a87fab8f9fdb3cfec47b609c5ef25c91.png)](https://gyazo.com/a87fab8f9fdb3cfec47b609c5ef25c91)


１０行目を変更

```
10行目を変更する
viewer.scene.primitives.add(osmBuildingsTileset);
　　↓
viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
  url:"さっきのPLATEAUのデータ保存先/tileset.json"
}));

```

AWS S3 以外ではCORS対策がいるかもしれません。

<br>

これだけで、PLATEAU の建物３Ｄデータが Cesium に反映されました。
[![Image from Gyazo](https://i.gyazo.com/6e8b1fb51b5f81f11d794cdcaf368637.jpg)](https://gyazo.com/6e8b1fb51b5f81f11d794cdcaf368637)

<br>
以上、公式の PLATEAU VIEW なら数分でできることですが、
コードを加工できるので、オリジナルの何かを作ってみようと思います。

<br>
フォームにパスワードを入力させる際、値を表示させない

Djangoを用いて家計簿アプリを作っているのですが、その中の「ログインページ」においてフォームにパスワードを入力させる際、値を「*」で隠したいと考えました。
そこで気づいたことがあったのでまとめておきます。
## 結論：typeをpasswordに設定すればよい
```html:HTML
<form method="post" action="">
  <input type="password">
</form>
```
以上のように設定すれば、よく見るパスワード入力欄になります。
QGISを簡単にWEB公開できるLIZMAPのインストール備忘録

以前からインストール備忘録は書いていたのですが，googleドライブの共有フォルダにワードで作成していたため，存在も判り難いうえ，バージョン管理が出来ていなかったので,今回GitHuBに移行しました。
興味のある方の参考になればうれしいです。  
https://github.com/yamamoto-ryuzo/Lizmap-installation-Japanese-memo
Visual Studio2022+Antlr4Templates+Antlr4BuildTasksでANTLR4を使ったC#プログラム開発

# はじめに
## 経緯
Visual StudioでANTLR4の開発の手助けをする[ANTLR Language Support](https://marketplace.visualstudio.com/items?itemName=SamHarwell.ANTLRLanguageSupport)がVisual Studio2017で対応を止めているため、代替手段を模索。
[このstackoverflowの記事](https://stackoverflow.com/questions/72037594/using-antlr-with-visual-studio-2022)で[Antlr4Templates](https://github.com/kaby76/Antlr4Templates)と[Antlr4BuildTasks](https://github.com/kaby76/Antlr4BuildTasks)を知ったため試してみた。

## 前提
Visual Studio2022インストール済

# 準備
## 環境構築
- [Antlr4Templates](https://github.com/kaby76/Antlr4Templates)インストール
`dotnet new -i Antlr4Templates`

# 1.テンプレートそのままの内容をVisualStudioでビルドできるところまで実施
src/sol1フォルダにANTLR4開発プロジェクトFooを登録。
テンプレートから作成されたg4ファイルから自動的にparser/lexerが生成される。
またビルドが通るところまで実施。
## 1.1.テンプレートからプロジェクト作成
```bat
cd src/sol1
mkdir Foo
cd Foo
dotnet new csharp-combine
```

補足: 他にC#向けのテンプレートとしてparser/lexerが分かれている`antlr4cs-split`が有る。

## 1.2.Visual Studioで開く
1. 作成されたcsprojファイルをVisual Studioで開く。
この時点でVisual Studioからビルドできる。
しかしg4ファイルからのparser/lexerのC#プログラムの自動生成はされない、
1. Visual Studioのファイル > Foo.sln の保存 を選択し、ソリューションを保存

## 1.3.Visual StudioプロジェクトにAntlr4BuildTasks導入
3. パッケージマネージャー・コンソールから導入
`Install-Package Antlr4BuildTasks`

## 1.4 終わり
ここまでで、g4ファイルから自動的にparser/lexerのC#プログラムが自動生成される。
また、ビルドも通る。

# 2. 自作のg4ファイルをVisualStudioでビルドできるようにする
src/sol1フォルダにANTLR4開発プロジェクトWooを登録。
自作のg4ファイルから自動的にparser/lexerが生成される。
またビルドが通るところまで実施。

## 2.1.テンプレートからプロジェクト作成
```bat
cd src/sol1
mkdir Woo
cd Woo
dotnet new csharp-combine
```
## 2.2.g4ファイルを置き換える
テンプレートから作成されたArithmetic.g4を削除し、自作のg4ファイルを配置。
ここでは、WooFoo.g4
```WooFoo.g4
grammar WooFoo;

woofoo : expression (SEMI expression)* EOF;
略
```

## 2.3.Program.cs編集
`static void Try(string input)`
の
```c#:Program.cs
            var lexer = new ArithmeticLexer(str);
            var parser = new ArithmeticParser(tokens);
```
を
```c#:Program.cs
            var lexer = new WooFooLexer(str);
            var parser = new WooFooParser(tokens);
```

```c#:Program.cs
            var tree = parser.file();
```
を
```c#:Program.cs
            var tree = parser.woofoo();
```

## 2.3.csproj編集
```Woo.csproj
    <Antlr4 Include="Arithmetic.g4">
```
を
```Woo.csproj
    <Antlr4 Include="WooFoo.g4">
```

## 2.4.Visual Studioで開く
1. 作成されたcsprojファイルをVisual Studioで開く。
1. Visual Studioのファイル > Foo.sln の保存 を選択し、ソリューションを保存

## 2.5.Visual StudioプロジェクトにAntlr4BuildTasks導入
3. パッケージマネージャー・コンソールから導入
`Install-Package Antlr4BuildTasks`

## 2.6 終わり
ここまでで、g4ファイルから自動的にparser/lexerのC#プログラムが自動生成される。
また、ビルドも通る。
GANのための勉強その1

初投稿です。
今日から研究のこととか機械学習のこととか発信できればなと思ってます。

最初として、研究がちょい疲れたので息抜きがてらGANの勉強をしました。

GAN:Generative Adversarial Network
ですね。
日本語だと敵対的生成ネットワークと呼ばれる、畳み込みニューラルネットワークベースの深層学習モデルです。

genrator:偽の画像を生成するやつ
discriminator:画像の正誤判定をするやつ

こいつらを喧嘩させてgeneratorの精度を上げるのが大まかなイメージです。

generatorは偽の画像を生成し、それが本物とどれくらい近いかな？っていうのをdiscriminatorが判別して、discriminatorが本物と偽物を区別できなくなった時(確率が1/2)になったときに学習終了という流れですね。

この辺は僕も理解しきれていないのですが、あくまで偽物を(本物に近しいサンプル)を生成するのがこの手法なのかな、と。
画像のデータ数が少ない時にもサンプリング手法として使えそう？というか、論文ありそうですね。笑

とりあえず今日はgoogleのチュートリアル通りにコードを組んで、研究室のGPU付き計算機で動かしました。
また、自分で書けたら載せます。

似たようなモデルとして最近openaiが出したDALLE-2というモデルもあって、こっちは拡散モデルを利用して擬似データを生成するってお話みたいです。(まだ論文ちゃんと読めてない。笑)

画像生成はAIが独自の解釈で画像を認識してるとか、そう言う話もあって面白いなーと思ってます。笑
Rustで足し算プログラム

Rustのメモ
コンソールから数字を入力して足し算を行う
以下コード
```Rust:main.src
fn main() {
    let  mut st_numx = String::new();
    let  mut st_numy = String::new();

    println!("X + Y  = ?");
    println!("Xを入力してください。");
    println!("X : ");
    std::io::stdin().read_line(&mut st_numx).unwrap();

    println!("Yを入力してください。");
    println!("Y : ");
    std::io::stdin().read_line(&mut st_numy).unwrap();

    let i_numx : i32 = st_numx.trim().parse().unwrap();
    let i_numy : i32 = st_numy.trim().parse().unwrap();
    println!("結果を表示します。");
    print!("{} + {} = {}", i_numx, i_numy, (i_numx+i_numy));
}
```

出力
```
X + Y  = ?
Xを入力してください。
X : 
10
Yを入力してください。
Y : 
5
結果を表示します。
10 + 5 = 15
```
# 気づいたこと
今回のコーディングで気づいたことをまとめる。
## 変数を定義する際のletとlet mutの違いについて
```
let x　　  -->不変の変数定義
let mut x  -->可変の変数定義
```

・ライブラリの呼び出し方
```
(プログラムの最初に) use std::ライブラリ名
または
(プログラム中に) std::ライブラリ名
```

## print!とprintln!の違い
改行の有無については分かっていたが、プログラムを実行した際の出力タイミングが異なるのを今回初めて知った。
```Rust:
//コンソールから数字を入力後に「X : 」が表示される
 println!("Xを入力してください。");
    print!("X : ");
    std::io::stdin().read_line(&mut st_numx).unwrap();

//コンソールから数字を入力する前に「X : 」が表示される
 println!("Xを入力してください。");
    println!("X : ");
    std::io::stdin().read_line(&mut st_numx).unwrap();
```

## read_line(&mut st_num).unwrap()の部分
read_line(&mut String) でコンソールから入力を得てStringに入力内容を入れる。
また()内の&mut StringはStringの参照らしい。参照もデフォルトで不変扱いらしいのでmutを追加してる。
.unwrap()はread_line(&mut stnumx)の結果を取り出す関数?らしい。正直イマイチ役割が分からない。また.unwrapなしでもコンパイルできるが、Rustから怒られる。

# 今後の予定
・今回のコーディングでよくわからなかった点を調査
・四則演算を行えるプログラムの作成
csvでダブルクオーテーション内のカンマを除去するVBS

# やりたかったこと

こういうcsvに遭遇して、うまくカンマ区切りの形に整形したかったのでメモ。

```
1000,aaa,abcdef.pdf,aaa@hogehoge.com
2000,bbb,"abcdef.pdf,ghijkl.txt",bbb@hogehoge.com
3000,ccc,"mnopqr.jpg,stuvwx.pdf","ccc@hogehoge.com,ddd@hogehoge.com"
```

3列目が添付ファイル名、4列目が宛先のようなものだと思ってもらえばいい

# 処理の概要

正規表現でダブルクオーテーションに囲まれた部分を抽出し、その部分にあるカンマを別の文字に置換することにする。
ただし`","`の部分はフィールド区切りなのでカンマだけは残しておく。

オリジナルがUTF-8 BOM付だったのでADODB.Streamを使うことにした。

```vb:
' 機能
' 一部がダブルクオーテーションされているutf-8 bom csvについて、ダブルクオーテーション内のカンマを除去

' 読み込みファイルの指定 (相対パスなのでこのスクリプトと同じフォルダに置いておくこと)
Dim input
Set input = CreateObject("ADODB.Stream")
' 1：バイナリ・2：テキスト
input.Type = 2
' 文字コード指定
input.Charset = "UTF-8"
' Stream オブジェクトを開く
input.Open
' ファイルを読み込む
input.LoadFromFile "source.csv"

' 書き出しファイルの指定 (今回は新規作成する)
Dim output
Set output = CreateObject("ADODB.Stream")
output.Type = 2
output.Charset = "UTF-8"
output.Open

Dim objRep

' "～"の文字列を取得
Set objRep = New RegExp
' カンマで囲まれた部分。バックスラッシュでエスケープできないのでChr(34)で書く
objRep.Pattern = Chr(34) & ".*" & Chr(34)
objRep.IgnoreCase = True
objRep.Global = True 


Dim lineStr
Dim tmpText_original
Dim tmpText_mod
Dim objMatch

' 読み込みファイルから1行ずつ読み込み、書き出しファイルに書き出すのを最終行まで繰り返す
Dim records
Do Until input.EOS
  ' -1：全行読み込み・-2：一行読み込み
  lineStr = input.ReadText(-2)

  ' 正規表現でマッチ箇所を探す
  Set objMatch = objRep.Execute(lineStr)

  if objMatch.Count > 0 then
    For Each m In objMatch
      ' バッファーを初期化
      newText = ""
      ' オリジナルの部分を保存
      originalText = m.Value

      ' ","の部分をいったん|にしておく
      newText = Replace(m.Value, Chr(34) & "," & Chr(34), "|")
      ' ダブルクオーテーションを消去
      newText = Replace(newText, Chr(34), "")
      ' カンマを/に置換
      newText = Replace(newText, ",", "/")
      ' 退避した|をカンマに置換
      newText = Replace(newText, "|", ",")
      ' オリジナルの部分と加工後の部分を置換
      lineStr = Replace(lineStr, originalText, newText)
    Next
  end if
  
  ' 0：文字列のみ書き込み・1：文字列 + 改行を書き込み
  output.WriteText lineStr, 1    
Loop

' 書き出しファイルの保存
' 1：指定ファイルがなければ新規作成・2：ファイルがある場合は上書き
output.SaveToFile "result.csv", 2

' Stream を閉じる
input.Close
output.Close
```

# 変換結果

こうなる

```
1000,aaa,abcdef.pdf,aaa@hogehoge.com
2000,bbb,abcdef.pdf/ghijkl.txt,bbb@hogehoge.com
3000,ccc,mnopqr.jpg/stuvwx.pdf,ccc@hogehoge.com/ddd@hogehoge.com
```
Hyper-v上のUbuntuの画面サイズ変更

Hyper-vにUbuntuを入れた時、設定画面で画面サイズの変更ができなかったので、画面サイズの変更方法をメモとして残します。

## やり方

`/etc/default/grub`にある`GRUB_CMDLINE_LINUX_DEFAULT`が下のように書かれていますが、

```:変更前
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash"
```

この行に`video=hyperv_fb:1920x1080`を追加します。（1920×1080ドットの場合）

```:変更後
GRUB_CMDLINE_LINUX_DEFAULT="quiet splash video=hyperv_fb:1920x1080"
```

その後、`grub`を下のコマンドでアップデートします。

```
sudo update-grub
```

アップデート後に、Ubuntuを再起動します。
【#5 エンジニア転職学習】Linux基礎　locate,man,man -kの補足

# はじめに
富山県に住んでいるChikaといいます。
毎日投稿を目標に、バックエンドエンジニア転職に向けた学習内容をアウトプットします。

昨日に引き続き、Linuxの基礎を進めましたので自分なりに気になったポイント等をまとめていきます。

バックエンドエンジニアになるまでの学習内容は以前投稿した以下の記事を基にしています。


https://qiita.com/Chika110/items/ef54dddd565a0193ef44

# 本日の学習内容
* Linuxファイルの探索（find, **locate**）
* **コマンドの使い方を検索する方法（**--help, **man）　←Topic!!**

# Linux基本コマンド（移動,削除,履歴）
本日はファイルの探索、コマンドの使い方を調べる方法についてのコマンド中心でした。
特にman -kコマンドは、どんなコマンドがあるかも分からない自分はお世話になりそうだなと思っていました。

### ファイルの探索
`locate [option] 検索パターン` : **事前に作成しておいたDBから**ファイルを検索（デフォルトではDBの自動更新は1回/日）
* findコマンドもあるが事前にDBを構築している分、locateの方が高速
* **作成されてからしばらく時間が経過している必要**がある点に注意

### コマンドの使い方を調べる
`man コマンド名` : 使用方法等コマンドに関する情報を表示。--helpより詳細
`man -k キーワード` ： キーワードに関するコマンドを検索
* 基本はより詳細なmanを使用する


使用している書籍はこちら↓

https://www.amazon.co.jp/%E6%96%B0%E3%81%97%E3%81%84Linux%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E4%B8%89%E5%AE%85-%E8%8B%B1%E6%98%8E-ebook/dp/B072K1NH76/ref=sr_1_1?adgrpid=113196705062&gclid=Cj0KCQjwzLCVBhD3ARIsAPKYTcR4WAb_4QVrwuBM_1mIPMFsQ6kNDJ-o4yIofVSAI7_eHpWCeva8kKwaAstgEALw_wcB&hvadid=489559881279&hvdev=c&hvlocphy=1009363&hvnetw=g&hvqmt=e&hvrand=10125867468998217428&hvtargid=kwd-1152146940662&hydadcr=21814_10996132&jp-ad-ap=0&keywords=%E6%96%B0%E3%81%97%E3%81%84+linux+%E3%81%AE+%E6%95%99%E7%A7%91%E6%9B%B8&qid=1655473534&sr=8-1




# おわりに
最後までお読みいただきありがとうございました。
明日も引き続きLinuxの基本を進めていこうと思います。
アドバイス・応援コメント等いただけますと幸いです。
github.com/gin-gonic/gin がインストールできない？

## なにが発生した？
Go言語のWebフレームワーク **Gin** が気になったので、Hello,World!的なものを作ろうとした。
その際に、
```
> go install github.com/gin-gonic/gin@latest
```
を実行したが、`go build`でパッケージが見つからないエラーが発生した。

## この時の環境
```
Microsoft Windows [Version 10.0.19044.1766]
(c) Microsoft Corporation. All rights reserved.

C:\Users\7280ayubihs>go version
go version go1.18.3 windows/amd64
```

## 解決の備忘録

`go install`の実行後に調べてみると、`$GOPATH/pkg/mod`にGinが配置されており、`go build`実行時に`$GOPATH/pkg/mod`にパスが通っていないので、エラーになったようです。

で、この`$GOPATH/pkg/mod`は Go modules が有効になっている場合に、ダウンロードされたパッケージが配置される場所らしい。Go modulesは、Go1.11バージョン以降追加されたモジュール管理機能で、`GO111MODULE`環境変数をonにすることで利用できるようになるとのこと。
なお、`GO111MODULE`環境変数の設定値は、次の値があるようです。
|値|内容|
|--|----|
|on|モジュール対応モードで動作|
|off|GOPATHモードで動作|
|auto|$GOPATH/src 以下のディレクトリに配置され go.mod ファイルを含まないパッケージは GOPATH モードで，それ以外はモジュール対応モードで動作する|

`GO111MODULE`環境変数を確認すると、未指定だったので、次のコマンドでOnにしました。
```
> go env -w GO111MODULE=on
```

Go modulesは、`go mod`コマンドで初期化して、go.mod と go.sum を生成する必要があるので、
プロジェクトのカレントディレクトリに移動して、次のコマンドを実行した。
```
> go mod init <project-name>
```
実行すると、無事、go.mod と go.sum が生成されていました。この２つのファイルはそれぞれ、次のような役割があるようです。
go.sum は .gitignoreで除外の指定をした方がよさそうですね。
|ファイル|役割|
|-|-|
|go.mod|モジュールの依存関係が記述されているファイル|
|go.sum|依存モジュールのチェックサムを管理しているファイル|

初期化が完了したので、改めて、github.com/gin-gonic/ginをインストールします。
go installではなく、go getコマンドでインストールです。
```
> go get -u github.com/gin-gonic/gin
```

この後、go buildが無事完了し、Hello,World!的なものも動きました。

## 最後に
まずは、Hello,World!的なものが動いたので、良し！
ただ、`go install`と`go get`の違いとか、知るべきことは、まだまだ多いなと痛感した。

## 謝辞
以下の記事で勉強させていただきました。ありがとうございます。
https://qiita.com/Syoitu/items/f221b52231703cebe8ff
https://zenn.dev/spiegel/articles/20210223-go-module-aware-mode
https://zenn.dev/tennashi/articles/3b87a8d924bc9c43573e
Kubernetes ワークロードリソース

# 【Kubernetes ワークロードリソース】

## Kubernetes ワークロードリソース
- 複数のPodを作成、管理するためのリソース
    - **ReplicaSet**：指定したレプリカ数のPodを常に保証する
    - **Deployment**：Pod と ReplicaSet のアップデート機能を提供
    - **DaemonSet**：Podを全てのノードで稼働
    - **StatefulSet**：ステートフルなアプリケーションを管理
    - **Job**：Podの作成と失敗時の対応を定義
    - **Cron Job**：定期的にJob をスケジュール

### ReplicaSet
- 普段使用されない!! → **Deploymentが奨励されている**
    - 数のみを保証、新しいPodのDeployまでは面倒を見てくれないため。
- 常に指定したレプリカ数のPodを保つ
- フィールド
    - replicas：稼働させたいPodの数
    - pod templates：Podを作成時のテンプレート
    - selector：対象となるPodを特定するため（Podテンプレート内のラベルは同じである必要がある）

### Deployment
- ローリングアップデートやロールバックなどのアップデート機能を提供
- 主な機能
    - ReplicaSetの更新
    - 不安定な場合の前のバージョンヘロールバック
    - スケールアップダウン

#### Deployment特有のフィールド
- **strategy**：更新戦略
    - type："Recreate" か "RollingUpdate" を指定
        - RollingUpdateの場合には
        - maxUnavailable：更新処理中に利用不可になるPodの最大数
        - maxSurge：更新処理にいくつエクストラで追加できるPodの最大数
- **revision History**：過去のバージョンとしてReplicaSetを残しておく数（デフォルトは10）
- **paused**：一時停止されているかどうか
- **progressDeadlineSeconds**：更新プログレスの最大秒数（デフォルトは600秒）

### ConfigMap
- 機密性のないデータをキーと値のペアで保存し、 Podから参照可能
- コンテナイメージと環境固有の設定を切り離す
    - 例）アプリケーションの接続先DBのHost, User, Port、confファイル
    - 使用方法）
        - コンテナの環境変数の設定
        - 読み取り専用のボリュームを作成し、 コンテナから読み込む

### Secret
- 機密情報（パスワード、トークン等）を保存・管理し、Podから参照可能
    - 例）アプリケーションの接続先DBのパスワード、Dockerレジストリへのアクセス権限
    - 使用方法）
        - ボリューム内のファイルとして、 Pod内のコンテナにマウントする
        - コンテナの環境変数の設定
        - kubeletがDockerイメージをpullする際に使用

### Service
- Podの集合を抽象化して公開
    - Podの集合に対するDNS名と負荷分散
- 各PodはIPアドレスを持っているが、 Podの作成削除のたびに、アプリケーションのIPアドレスの集合が変化するので使う側が大変になる
- ServiceがDNS名を提供し、 後ろにあるIPアドレスの管理をしてくれることで、常に同じ名前を使ってアプリケーションを参照できる

## その他
[Kubernetesとは？基本概念をわかりやすく解説！使い方やメリットもご紹介](https://blog.synnex.co.jp/cloud/kubernetes/#:~:text=Kubernetes%E3%81%A7%E3%81%AF%E3%80%81%E5%A4%A7%E9%87%8F%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A,%E3%81%95%E3%81%9B%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%99%E3%80%82)

## おわり
UdmeyのKubernetes入門 本当によかったです。
ありがとうございます。
明日からは [Kubernetes完全ガイド 第2版](https://www.amazon.co.jp/Kubernetes%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89-%E7%AC%AC2%E7%89%88-impress-top-gear%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-ebook/dp/B08FZX8PYW) を進めていきます！！

## 参考
[Kubernetes入門](https://www.udemy.com/course/kubernetes-basics-2021/)
Rubyの学習ログ

# 学習教材
udemyで[「ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」](https://www.udemy.com/course/web-application-development/)を学習。
ウェブ開発全般の基本的な知識が習得できるコースで合計24.5時間もある。
今回はその中でもRubyについて学習した。
[<img width=800 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/6e448b63-dace-5900-335b-dfbb64d52531.png
">](https://www.udemy.com/course/web-application-development/)

# 学習内容
演算子や数字・文字列の表現方法の違い、条件分岐や繰り返し処理について学んだ。
また、クラスやメソッド、Rubyのコーディングルールを学んだ。

# 学習を終えて
これまで学習してきたJavaScriptの構文と違ったコードの書き方に慣れなかった。
ただし、文末にセミコロン;が不要など、簡単にコードを書けるのでそうしたルールに慣れていきたい。
MVCを完全に理解した


# はじめに
MVCモデルについて勉強した内容をまとめてみた。

情報処理試験ではよく見かけるワードだが、誰かに説明するとなると難しい。。。

# 目次
MVCとは
メリット・デメリット
動作イメージ

# MVCとは
アプリケーションをModel、View、Controllerという３つの役割に分け、それぞれの分担を明確化させるアーキテクチャ（ソフトウェア構造）

Model→データの処理を担当
View→ユーザーが直接触れる部分。画面への表示や入力した値をcontrollerへ渡す
Controller→ModelとView間でデータの引き渡しや機能の呼び出しを行なう

# メリット・デメリット

まずはメリットから。自分が製造を通して感じたメリットは以下の２つ。

①保守性の向上
各々の役割がハッキリしてるので、エラーがあった時の原因を突き止めやすい
例：Modelの抽出結果は正しいのに、画面に表示された値が想定と異なる
→Viewに問題がある可能性が高い

②役割の独立性
Model、View、Controllerはそれぞれ独立しているので、各々を個別に開発することができる

例：顧客に画面イメージを確認してもらうために、Viewのプロトタイプを作成する
　　テーブルレイアウトがあるので、Modelの定義を先行して行なう

次にデメリット。

①役割の分割が大変
何をどこに書くのかを設計者・製造者が理解していないと、プログラムの構造が歪になってしまう。そうなると、上記のメリットを享受できなくなる。

なお私が躓いたのは、ControllerとModelの分割。Modelに書くべき処理をControllerに書いてしまい、Controllerの規模が膨れ上がってしまった。

これはFat Controllerと呼ばれるアンチパターンだと後に知った。何をどこに書くべきなのか、メンバーはしっかりと理解すべき。

# 動作イメージ
次は実際の機能を例にして、Model／View／Controllerがどのような処理をしているのかを見ていく。

検索条件を入力して「検索」ボタンをクリックすると、検索条件に紐づく結果が画面に表示される

というよくある検索画面をイメージして、以下の図を見ていただきたい。
![MVC①.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2673281/716ef663-30a7-3724-c00a-fbc4a5fd8a10.jpeg)

図解のセンスはいったん保留にするとして、手順としては以下の順番で処理が行われている。

:::note info
手順
１．ユーザーが画面で検索条件を入力し、「検索」ボタンをクリックする
２．Viewは検索条件をControllerへ引き渡す
３．ControllerはModelに定義されたメソッド操作を呼び出す
４．Modelはデータ抽出を実行
５．Modelは抽出結果をControllerへ返す
６．ControllerはViewへ結果の表示命令を出す
７．Viewは検索結果を表示する
:::

大まかな流れとしてはこの認識で問題ない。
この図を見ると、冒頭で説明した

Model→データの処理を担当
View→ユーザーが直接触れる部分。画面への表示や入力した値をcontrollerへ渡す
Controller→ModelとView間でデータの引き渡しや機能の呼び出しを行なう

の役割を理解しやすいと思う。

# 終わりに
この記事では、MVCの概要について解説した。
初めての投稿ということもあり、お見苦しい点は見受けられると思うが、今後も投稿を継続することで徐々に改善していきたい。

ご指摘等あれば、コメントください。
最後までお読みいただきありがとうございました！
【Auth0】Auth0でLINE認証+BOTリンク(友だち追加)を実現する

# はじめに
以前CognitoでLINE認証 + 友だち追加を行おうとしましたが、現在のCognitoでは非対応とサポートから返信が来ました。
ですので本件をAuth0で本件を実現しようと思います。

※LINEの友達追加は**認可URLにクエリパラメータを入れる**必要があるのですが、Cognitoでは認可URLへクエリを入れることが非対応のようでした。

https://developers.line.biz/ja/docs/line-login/link-a-bot/#displaying-the-option-to-add-your-line-official-account-as-a-friend

# 前提条件
以下の準備は完了しておいてください！
- Auth0の登録(https://auth0.com/jp)
- LINE Developerの登録(https://developers.line.biz/ja/)

# LINEアカウントの作成
まず初めに LINE Developerで
- LINE Login アカウント
- Messaging API アカウント

の2アカウントを作成します。

![スクリーンショット 2022-06-17 15.56.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/5428631e-fe83-ccfc-b3f0-1cb9a285da99.png)

２つのアカウント作成が完了したら、Login用のアカウントをクリックし`Linked OA`にMessaging APIのアカウントを選択し保存します。
(ここで「ログインのLINEアカウント」と「ログイン後に友だち追加するLINEアカウント」を紐付けます。)
また同じページ内にある、`Channel ID`と`Channel secret`は後ほど利用しますので、コピーしておいてください。

![スクリーンショット 2022-06-17 15.56.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/e9f2c771-aad6-b73f-2f54-3930ad515d23.png)

次にLogin用アカウントの「Web app有効化」と「Callback URL」の設定を行います。
Claaback URL：https://[YOUR_DOMAIN]/login/callback
(`[YOUR_DOMAIN]`　をみなさんが利用されるドメインに変更してください。)

![スクリーンショット 2022-06-17 16.08.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/320edabc-fc43-b92a-d499-9b379312c425.png)

LINE側の設定は以上です！

# Auth0にLINE認証を登録する
以下からLINE認証の機能を追加しましょう。

https://marketplace.auth0.com/integrations/line-social-connection

次に Auth0の`Management API`を利用するためのトークンを取得します。
以下のリンクに従って、アクセストークンを取得してください。(今回はテスト用トークンを利用します。)

https://auth0.com/docs/secure/tokens/access-tokens/management-api-access-tokens

アクセストークンが取得できたら、Auth0が用意してくれている「Management API クライアント」を利用しましょう。
左上の「**SET API TOKEN**」にアクセストークンをセットすることで簡単に利用することができます。
![スクリーンショット 2022-06-17 16.21.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/8b4eb01a-d582-e8a9-34c2-ecea916f40c8.png)

https://auth0.com/docs/api/management/v2

ここまで準備ができましたら後は`Management API`を実行するだけです！
今回はLINEのコネクションをアップデートするので、「id」 と 「body」に以下を追加します。
- id：LINEコネクションのID
- body：以下のJSONデータ（先程コピーした「Channel ID」と「Channel secret」を貼り付けてください。）
```json
{
  "options": {
    "client_id":"YOUR_CHANNEL_ID",
    "client_secret":"YOUR_CHANNEL_SECRET",
    "upstream_params": {
      "bot_prompt": {
        "value": "aggressive"
      }
    }
  }
}
```

![スクリーンショット 2022-06-17 16.29.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/30791897-4b07-d26d-ce01-b06d8ce9d46f.png)

上記のBodyには`upstream_params`がセットされていますが、これが**認可URLへクエリパラメータを入れる**ために必要な情報となっています。
(以下ドキュメントに記載されていました。)


https://auth0.com/docs/authenticate/identity-providers/pass-parameters-to-idps

# 実際に動かしてみる
スマホで確認したかたので、Vercelにデプロイします。

![qiiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469819/a66075dc-67ff-073f-b84c-9b0944652cab.gif)

Auth0の認証画面からLINEアプリが起動して、LINE認証 + 友達追加できることが確認できました！
【自己学習】Go言語を学ぶ(2)

公式チュートリアルから基本を学ぶ
https://go-tour-jp.appspot.com/list

# Functions

関数は、0個以上の引数を取ることができます。
この例では、 add 関数は、 int 型の２つのパラメータを取ります。
変数名の 後ろ に型名を書くことに注意してください。

概要
* 型指定が必要
* mainの引数から別のFunctionsを読み込んで返せる
* 必ずfunction内で`return`を忘れないこと

* サンプルコード
```go
package main

import "fmt"

func add(x int, y int) int {
  return x + y
}

func main() {
  fmt.Println(add(42, 13))
}
```
* 結果:55

`x int, y int`は　`x, y int`に省略できる

* サンプルコード
```go
package main

import "fmt"

func add(x, y int) int {
  return x + y
}

func main() {
  fmt.Println(add(42, 13))
}

```

## 複数の戻り値を返す
以下のswap 関数は2つの string を返します。

* サンプルコード
```go
package main

import "fmt"

func swap(x, y string) (string, string) {
  return y, x
}

func main() {
  a, b := swap("hello", "world")
  fmt.Println(a, b)
}

```

* 結果: world hello

## Goでの戻り値となる変数に名前をつける

* サンプルコード
```go
package main

import "fmt"

func split(sum int) (x, y int) {
  x = sum * 4 / 9
  y = sum - x
  return
}

func main() {
  fmt.Println(split(17))
}
```
※ xの計算: 17 * 4 /9 = 7.555
※ yの計算: 17 - 7 = 10

* 結果: 7 10
【PHP】プログラムが動く仕組み

未だにPHPがどんな仕組みで動いているのかよくわかっていない！ので確認！！

# イメージ
まずはイラストでおおまかなイメージを確認！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524160/26d17522-31f1-1903-be14-180b9c206aec.png)
引用元：

https://www.kagoya.jp/howto/it-glossary/web/javascript/

◎PHPはサーバー上で動いている
- これが超大事。
-  ~~PHP、WEBサーバー(Nginx,Apache,IISなど)がないと動けない。~~
-  WEBサーバーは必ずしも必要ではない。ブラウザを介さず、コマンドとして動作させる目的で組まれたPHPスクリプトなども存在する！
※ @px904 さんにご指摘いただき上記修正いたしました。ありがとうございます！
- HTML,CSS,JavaScriptがデスクトップとかに適当にファイル作成しても動くのは、それらが **ブラウザ上で動くプログラムだから！**

## 補足　
（2022/06/21 追記）

- JavaScriptはサーバー上でも動作する！（JavaScriptでもWebサーバを作れる！）
- サーバサイドでJavaScriptが動作するようにした実行エンジン
    - Node.js  
    - Deno（ディーノ）
        - 知らなかった…使ってみたい！！

https://qiita.com/azukiazusa/items/8238c0c68ed525377883

※ @shiracamusさんにご教授いただいたことについてまとめました。ありがとうございます！
XAMPPを用いた仮想サーバー上にLaravelを構築したい。


<h1>必要なものをインストール</h1>

<h5>・XAMPPのインストール</h5>
下記から、XAMPPをインストールする。

https://www.apachefriends.org/jp/index.html/


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708305/2e0d4f06-64a1-8935-a38e-927f9aa79b1b.png)


設定では、すべてにチェックを入れてもよい。




<h5>Composerインストール</h5>
下記からインストール。

https://getcomposer.org/download/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708305/1fb0bf6c-cabf-5626-ba35-c6c6bc90f8bd.png)

チェック不要。



<h1>環境構築</h1>
<h5>XAMPP起動</h5>
ApacheとMySQLをStart。

<h5>Command起動</h5>
下記をコマンドに記載していく。

>XAMPP下移動
```
C:\xampp
```


>Composerインストール
```
composer global require laravel/installer
```


>プロジェクト作成
```
laravel new <プロジェクト名>
```
xampp下にプロジェクト名のフォルダとモジュールが作成されていることを確認。




>Apacheのデフォルトルートディレクトリを変更

![スクリーンショット (188).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708305/f53d04ab-8b89-aa6f-b7c0-26788aa47bba.png)

httpd.confを開いて、下記パスを変更する。
```
DocumentRoot "C:\xampp\htdocs"
<Directory "C:\xampp\htdocs">
↓
DocumemtRoot "C:\xampp\<作成したプロジェクト名>\public"
<Directory "C:\xampp\<作成したプロジェクト名>\public">
```

パスを書き換えたら、apacheを再起動。

>ブラウザからlocalhostにアクセス

下記のような画面になればOK。
![スクリーンショット (187).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708305/602cd809-e4a2-352a-e4ea-e0d59c4d37b5.png)



>プロジェクト下に移動

```
cd <プロジェクト名>
```


>UIインストール

```
composer require laravel/ui
```

>Authインストール

```
php artisan ui vue --auth
```

<!-- 
>Node.jsダウンロード

下記からダウンロードする。
https://nodejs.org/ja/

![スクリーンショット (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708305/b8913b07-923d-c3ca-0a45-691c9cf82597.png)

ダウンロードが終わったら、コマンドプロンプトから下記を入力してライブラリを配置する。
```
npm i
npm run dev
```
-->

>データベース作成

XAMPPからphpMyAdminを開いて、Laravel用データベースを作成する。データベース名は任意。ここでは先に作成したプロジェクト名と同じ名前に設定します。
![スクリーンショット (197).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708305/94d83d07-2af0-d21d-89b3-d16b5da34c46.png)

>.envのパラメータ確認

C:\xampp\<プロジェクト名>\.envを開く。APP_URLを変更。おそらく5行目。

```
APP_URL = http://localhost
```

>database.phpのパラメータ確認

C:\xampp\<プロジェクト名>\config\database.phpを開く。下記を確認。

```
'mysql' => [
       'driver' => 'mysql',
       'url' => env('DATABASE_URL'),
       'host' => env('DB_HOST', '127.0.0.1'),
       'port' => env('DB_PORT', '3306'),
```

>デバッグバーの導入

プロジェクトフォルダ下から。下記をコマンドプロンプトに記入。
```
composer require barryvdh/laravel-debugbar
```


<h1>まとめ</h1>

以上で環境設定は完了。次回、テーブルやMVCの作成方法についてメモしておきます。
【高専ベンチャー社x友人 高専ハッカソン in Kisarazu】初心者なりに頑張った初めてのハッカソンの感想

# はじめに
この記事はハッカソンも初めて出場、なおかつこの記事が初投稿というLv.1にすら満たなかった私が
ただただ経験として書いているものです。
適当にメモとして残していくので、**参考になるものはないです。**

## 何を作ったのか
今回のテーマは「高専生活をハックする」でした。
そこで、先輩からもらう過去問も何年間分もあったら傾向つかめて対策できるのでは？
という発想から我々のチームは **「過去問共有サイト - Past to Future -」** を作りました。


https://github.com/tos-up/PtF

## 開発開始
とりあえず作るものが決まったはいいものの、開発経験も少ないうえに経験した言語はC言語とPythonのみ。チームメンバーの経験者にすがって教えてもいながらなんとか形にしていきました。
私が作ったのは登録formですね。
バリデーションを実装するのに手間取った記憶があります。~~(今思えば冷静になれよって話。)~~

Firestoreの概念や、Vutifyのグリッドシステムなどなど
初めてのものばかりで、新しい刺激を得ながら楽しんで開発していきました。

人間は新しい刺激が好物だそうで、少しづつ小さな成功を重ねることで
 **授業では得られないプログラミング本来の楽しさ** のようなものがたくさんありました。

## プレゼン発表
パワーポイントを気合で作りながら、振り返り。
最初想定してた機能はほとんど実装でき、個人的には満足しました。

発表がまさかの最後でビビりながら他チームの発表を聴いていると、どのチームも完成度が高い…
なんとか発表を終え、質疑応答も好印象を得られました。

## 審査結果
まさかの勝利。とても嬉しい結果でした。
チームメイトのテックリードのおかげですね。

## 今回学んだこと
やはり経験は大切ですね。
沢山の経験や知識を持ってることで、自分のできることが広がっていくんだなと感じました。
挑戦することは勇気がいることですが、日和らずに頑張っていきたいと思います…!!

## 最後に
とても楽しかったです。
新しい言語に触れること、開発をすることのどちらもとても経験になりました。
今回学んだ Vuetify の v-form についてはまた後でまとめようと思います。

参加者、審査員の皆様、ありがとうございました。

#### P.S.
今回初めての投稿のため、読みづらい点などあったと思います。
お読みいただきありがとうございました。

 **今回記事を書く参考にしました、テックリードしてくれた彼の記事はこちらです↓↓**

https://qiita.com/tos-up/items/0ab8599287e02210009d
Kubernetes

# 【Kubernetes】
クラウドインフラ上に、コンテナと Kubernetes を導入することにより、常に最適な環境設定を自動化
SLOを実現する際に、最適なリソース配置の自動化の仕組み化としてのコンテナオーケストレーション

## Kubernetes
デプロイやスケーリングを自動化したり、コンテナ化されたアプリケーションを管理したりするための、 オープンソースのシステム

- コンテナオーケストレーションとは
    - コンテナ：独立した箱を設けてアプリケーションその中で実行する仕組み
    - オーケストレーション：デプロイ、スケーリング、管理 ...etc
    - **これまでマニュアル化されていた作業を自動化!!**
    - 理想状態を維持し続けるようにしてくれる！
- コンテナオーケストレーションの機能
    - デプロイメント：どのように異なるバージョンのコンテナを入れ替えるか
    - スケジューリング：どのマシン上で動かすのか
    - オートスケーリング：コンテナ数やマシン数の増減
    - ネットワーク：コンテナ間のロードバランスやコンテナ間の通信のサービスディスカバリ
    - リソースマネジメント：使用可能なリソースを環境ごとにリミットやデフォルトを定義
    - セキュリティ: ネットワークポリシー、リソースへの権限定義

## kubectl
yamlやコマンドをAPIリクエストに変えてapi-serverにHTTPリクエストを送る

- (こちらは改めて学習します)

## Kubernetes リソース概要
### Pod
#### Kubernetes上のデプロイの最初単位
- 1つまたは複数のコンテナを持つ
- ネットワークやストレージを共有リソースとして持つ
- コンテナの実行方法に関する仕様を持つ
    - 例） entrypoint, ENV, command, healthcheck ...etc

#### Pod単位でデプロイされる
- Podが使えなくなった場合には、他のノードにデプロイされることもある
- 1つのアプリケーションを複数のPodでデプロイする
    - **特段の事情がない限り、複数のアプリケーションを1つのPodに入れない**
- 本番運用の場合、個別のPodを直接操作してはならない
    - ワークロードリソース（Deployment, StatefulSet, DaemonSet）を利用しよう

#### 共有コンテキスト
- 同一Pod内のコンテナは同じストレージへアクセスが可能
    - 例） mainのコンテナがストレージへログを書き込み、ヘルパーコンテナがそのログをログ収集基盤へ飛ばす
- 同一Pod内のコンテ案はIPアドレスとPortを含むネットワーク名前空間を共有

## Kubernetes オブジェクト
### Podの作成 = Kubernetesオブジェクトを作成
- クラスタの状態を表現する
    - どんなコンテナアプリケーンが動いているか
    - 利可能なリソースはどれだけか
    - アプリケーションの振る舞いうに関するポリシー

### Kubernetesオブジェクトのフィールド
- spec：理想状態
    - Kubernetes オブジェクトの操作には Kubernetes API（kubectlやプログラム）が使われている
    - 例） kubectl apply -f pod.yaml
- status：現実状態
    - Kubernetesにより更新

**コントロールプレーンは、 理想状態と現実状態が一致するように管理！！**

### Kubernetesオブジェクト作成
- オブジェクト作成時の必須フィールド
    - apiVersion：どのバージョンのKubernetes API
    - kind：どの種類のオブジェクトか（Pod, Deployment ...etc）
    - metadata：オブジェクトを一意に特定するための情報（name, UID, namespace）
    - spec：理想状態

### Namespace
- 同一の物理クラスター上で複数の仮想クラスターの動作をサポート
    - 仮想クラスター：実際には同じマシンの上で動いているかもしれないが、 仮想的に環境が分けられている状態
    - 参考：[公式ドキュメント](https://kubernetes.io/ja/docs/concepts/overview/working-with-objects/namespaces)
- 1つのクラスタを論理的に別けて使う
    - 特定の目的別や、チームごと、環境ごとに切り分けることが考えられる

#### Namespaceを切り分けるメリット
設定忘れやミスの防止、リソースの制限、権限管理をする。

- Namespaceごとに制限を設定可能
    - Podやコンテナのリソースの範囲設定（LimitRange）
        - Podやコンテナにメモリ、 CPUやストレージの上限､下限を設定
        - コンテナのデフォルトのメモリ、 CPUやストレージを設定
    -　Namespace全体の総リソース制限（Resource Quota）
        -　Namespace内のメモリ、 CPUの合計の上限
        -　Podなど、Objectの数の上限
    -　権限管理
        -　特定のNamespace内のリソースに限って権限を付与




## 参考
[Kubernetes入門](https://www.udemy.com/course/kubernetes-basics-2021/)
goでpluginパッケージを使う

## Go Plugin
- lambda関数を共通化できるlambda layerがPluginで作る必要があるみたいなので調べました
- lambdaでなければ、git submoduleとかのほうが使い勝手が良さそう
    - Pluginだとローカルファイルとして用意してあげないといけないから

## Plugin側

### サンプル

```golang
package main

import "fmt"

var V int

func F() { fmt.Printf("Hello, number %d\n", V) }
```

### ビルド

- `-buildmode=plugin`をつけて、`.so`でビルドする
- おそらく、カレントディレクトリでimport pluginをしていないファイルがプラグインとして認識されてビルドされる
- 

```bash
GOOS=linux go build -buildmode=plugin -o plugin.so 
```

## 呼び出し側
### サンプル
```golang
package main

import "plugin"

func main() {
	p, err := plugin.Open("plugin.so")
	if err != nil {
		panic(err)
	}
	v, err := p.Lookup("V")
	if err != nil {
		panic(err)
	}
	f, err := p.Lookup("F")
	if err != nil {
		panic(err)
	}
	*v.(*int) = 7
	f.(func())() // prints "Hello, number 7"
}
```

### 実行
```
go run main.go
```

出力

```
Hello, number 7
```



## 参考
https://pkg.go.dev/plugin
https://zenn.dev/izumin/articles/4369181aa84f7b
【高専ベンチャー社x私】またしても人の力で勝った話

# プロローグ

初めましての方は初めまして。
先日、高専ベンチャー社x私 高専ハッカソン in Kisarazuで優勝したチームAの私です。


今回も、備忘録ではないんですが、気合で作ったのでメモっておこうと思います。
**今回はマジのメモです。参考になる情報は書いてませんし、脈絡もありません。**

↓優秀なチームメイトの記事

https://qiita.com/Haruto_h13/items/a322f61da512796e488e

↓その２

https://qiita.com/hirakazu0607/items/afbfef1527908b4c9c7a

## お前、何つくった

弊チームは「過去問共有サイト」を作成しました。

https://github.com/tos-up/PtF


結構今回は盛り上がりましたね。
さて、弊チームの開発の軌跡を書いて行きましょうかね。

### コンテスト概要

参加人数16名、5チームでのセミオンラインハッカソンです。
※というのも、学校開催なのでオフラインでMTGしたりすることが多かったですね。

コンテストテーマは
**「高専生活をハックするサービスの作成」**
みたいな感じでした。(多分)

開発期間は試験期間後1週間。
私は試験轟沈し、悲しくなりながら開発していました。


## --- 顔合わせ後 ---

```:開発会議にて
Dev A「カレンダー作らん？(超簡略)」
Dev B「ええやん(超簡略)」
私「過去問、手に入れる、つらい、俺、しぬ」
私「過去問共有サイト、つくる」
```

ということで過去問共有サイト作ることになりますた。

勉強ができないのをもののせいにする。
とことん無能ですね、私。

## --- 開発会議後 ---

開発したいものざっくり決めよう会議（略して開発会議）が終わって、とりあえず作りましょうねとなった。

私以外は特に開発経験がないので、基本的に私はコードを書かず、教える方に徹することにしました。

## --- 開発開始 ---



### 人に教えるということ

今回はテックリードとして、チームメイトに指導する側に回りました。
NuxtもFirebaseも、触ったことも書いたこともない人なので、かなり時間はかかるだろうと予想していました。
が、優秀だったので書きながら吸収していきましたとさ。

#### 教えるって何ぞ

>１ 知識・学問・技能などを相手に身につけさせるよう導く。教育する。教授する。「英語を―・える」「イヌに芸を―・える」「学校では三年生を―・えている」

>２ 知っていることを相手に告げ知らせる。「道を―・える」「花の名所を―・える」

>３ ものの道理や真実を相手に悟らせて導く。戒める。教訓を与える。「父の生き方に―・えられた」「今回の事件が我々に―・えるところは多い」

Goo国語辞典にはこういうふうに書いてありました。
基本的に1の意味ですね。

ただ私も今回のハッカソンで教わったことがあります。
これはまたあとで書きますね。

当たり前ですが、知らない言語、知らない考え方って人は理解しがたいんですよね。

Firestoreのコレクションやドキュメント、フィールドの考え方。
VuetifyのGrid System。
というか書いたことないNuxtのよくわからんComponentとかいう謎。

##### Firebaseについて

まず教えた概要は以下です。
>Firebaseってもはや何
>Firestoreって何
>Firebase Storageって何

学校の授業てすこしカスったところもあるので、解説は楽でした。

Firestoreについては、コレクションとドキュメント、フィールドについて、ごっちゃになりやすいので、確認を繰り返しつつ理解を促しました。

**結局のところ、Firestoreって、何。**
**Firebase Storageって、何。**

Firestoreの構成を知ってもらうところから始まりました。
「Firestoreはコレクションから始まってうんたらぬんたら…」
こんな解説をしていて、私が眠くなってきたので、実際の実装例とともに、
「これは何を参照しているのか」、「このコードはなんなのか」ということを説明しました。

Firebase Storageだって同様です。
というか私も使ったことがなかったので、どういうコード実装したら動くんかね～って話をしました。

やはり実装例は正義。

##### Grid Systemについて

画面をGridにして、みたいな。
あまり言葉にせずに、黒板に図をかいて概要を教え、最終的にコード実装まで進めました。

※重きを置くには少し早かったので、書いてくれたコードを私がちょっと修正した感じです。

##### Componentについて

関数みたいなもん、と言った記憶はあります。

複数回使えたら楽だよね…みたいな。

C言語で使っている関数に対して、Nuxtのコンポーネントはどーなってるんだろーね？
ということを教えました。最初の開発はこの程度でじゅーぶん。(諸説あります。)

## --- 発表 ---

パワポ資料を気合でゴロゴロ作り、めちゃくちゃに書いてやりました。
なかなかカオスな資料になりましたが、見やすくする努力をしました。

何故か今回も弊チームは一番最後…これはプレッシャー…とか思いながら、他チームの成果発表を聞いていました、が、

**やばい。めちゃくちゃユニークでハイクオリティ。**

最初からめちゃくちゃハイクオリティで渾身の右ストレートをくらいました。

弊チームはなんとか無事でした。
質疑応答が終わり、最終審査のためチームルームへ戻り、満身創痍な私。

## --- 審査結果 ---

勝った。

しかし、審査員の方から御指摘いただいたことは本当にそのとおりで、アイデアの浅はかさも再確認できました…

## --- 今回勉強したこと ---

人にものを教える方法を少し学びました。

ですが、結局理解を100%にすることができず、かなりしょっぱくなってしまいましたね…

今回はみんなの経験値的に、ハッカソンよりかは勉強会にしたほうが良かったのかなあ…と思いました。

でもでもでも、みんながみんなそれぞれの工夫を凝らして、とてもユニークなアイデア揃いでした。

ちなみに、Firebase Authenticationは私が実装しました。
~~うちの学校のAzureガバガバ~~

## 結論

めちゃくちゃ楽しかったです。
今回は開発以外にも勉強にもなりました。

参加者の皆様、審査員の皆様、お疲れ様でした。
【PHP基礎⑩】絶対値の取得

［問題］　　(参照：http://www.cc.kyoto-su.ac.jp/~mmina/bp1/hundredKnocksBasic.html)
整数値を入力させ、その値を絶対値にして表示するプログラムを作成しなさい。
（できれば変数の値を絶対値に変えるようにする）


# コード
```php
$a = intval(fgets(STDIN));
echo abs($a);
```

↓「-8」と入力

# 結果
```
8
```


☆絶対値
　abs()　　　← absolute value(絶対値)に由来
【自己学習】Go言語を学ぶ(1)

新しい言語としてgo言語を学ぶまずは公式チュートリアルから理解を深める

# Go言語とは
Googleが2009年に公開したプログラミング言語。
Robert Griesemer、Rob Pike、Ken Thompsonによって設計された。

# Go言語の特徴

* オープンソース
* シンプルな構文
* コンパイルが速い
* 並列処理をサポートしている
* ガベージコレクションによるメモリ管理
* 安全性が高い
* 継承がない
* 容易なエラーハンドリング


# 公式チュートリアル

https://go-tour-jp.appspot.com/welcome/1

まずはHello Worldから

```go
package main

import "fmt"

func main() {
  fmt.Println("Hello, world")
}

```

# Packages

Goのプログラムは、パッケージ( package )で構成されます。
Go言語のソースファイルは必ず「package」文で始まる。Go言語は「パッケージ」という単位でグルーピングされる。（書き方の作法）
このプログラムでは "fmt" と "math/rand" パッケージをインポート( import )しています。

# Imports

import文は他のパッケージ内で「エクスポート」されている型やこのソースファイルで使用することを宣言する。

# func main(){~}
func文が関数の宣言でここからmain関数の記述が始まる。
（メインとなるプログラム部分）

基本的にはこの3つの構成がGo言語のソースファイルの基本となる。

* 参考プログラム
```go
package main

import (
  "fmt"
  "math/rand"
)

func main() {
  fmt.Println("My favorite number is", rand.Intn(10))
}
```

# コメントアウト

* 行コメント: 「`//`」
* 範囲コメント: 「`/* */`」

# 参考資料

https://go-tour-jp.appspot.com/list
【PHP基礎⑨】if構文-4.複数の条件分岐

［問題］　　(参照：http://www.cc.kyoto-su.ac.jp/~mmina/bp1/hundredKnocksBasic.html)
整数値を入力させ、値が正であればpositive、負であればnegative、0であればzeroと表示するプログラムを作成しなさい。


# コード
```php
$a = intval(fgets(STDIN));
if($a > 0){
    echo 'positive';
}else if($a < 0){
    echo 'negative';
}else{
    echo 'zero';
}
```

↓「0」と入力


# 結果
```
zero
```


☆複数の条件分岐（else if）
if(条件式①){
①が真のときに実行する処理;
}else if(条件式②){
①が偽で②が真のときに実行する処理;
}else{
全ての条件式が偽のときに行う処理;
}

☆最初、else{ ;}の部分をelse if($a == 0)としていたけれど、
条件式①にも②にも当てはまらないのは0しかないため、elseだけでよい。
Windows11にインストールしたDockerでYolov5を実行してみる


※Dockerの起動についてはこちらを参照
　https://qiita.com/yukkawai/items/a9b1ed9c0657a4056f7d

※コンテナの中とフォルダーを共有についてはこちらを参照
「DockerによるYOLOv5の導入をやってみる」
　https://kikaben.com/yolov5-docker-deployment/

1. Dockerコンテナの中と外でやりとりするための共有フォルダを作成する
mkdir runs 

2. 共有フォルダを指定して実行（shared memoryを指定する）
docker run -v `pwd`/runs:/usr/src/app/runs -it --shm-size=256m ultralytics/yolov5:latest　
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/efa42c8c-0c9e-de03-8f37-e92986dcf904.png)

3. コンテナ内にも共有フォルダがあることが確認できる。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/a86d497b-1fac-3429-e1fe-bcb426a31894.png)

4. テストを実行
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/9789dc1c-7447-fa30-f5de-5bf22a37c0ca.png)

5. WSLのディレクトリにアクセスする　\\wsl$\Ubuntu\home
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/61e77534-734b-8158-5db3-e0086f40f864.png)

6. テストで生成されたファイルを確認する。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/377cc597-f6ad-7479-3851-ca126e2ed7e0.png)

7. 人とバスが検出される
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/bba6dbc1-71ed-9150-ed2d-19ed9d4a1ca8.png)


8. 別の画像データでテストするために別のターミナルを起動して実行中のコンテナIDを確認する
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/2c81214e-6d40-9dde-214c-a5afb19865b1.png)

9. テスト用画像ファイルを配置する
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/4dd84f31-1844-9107-4384-a0470d8c6863.png)

10. 画像ファイルをコピーする
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/59010d4a-7639-56fa-a026-e13b35f5732f.png)

11. コピーした画像ファイルでテストする
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/c5ec2eef-4b1f-dc9f-cd7c-bded9fe7969f.png)

12. テストで生成されたファイルを確認する。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/5512eb1e-06e9-5004-4824-7be74d7eadf6.png)

13. トイレが検出される
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258265/72fd3549-c2ef-8f6f-1adc-e7c2e5b11276.png)
現地作業で気を付けたいこと

ネットワークエンジニアはデータセンターに出向いて作業をすることがあります。
それは障害対応であったり、試験であったり、切り替えであったり。

そんな時に気を付けておきたいことを実体験からいくつか紹介したいと思います。
思い出したら随時追加していきます。

道具は揃っているか？
---
現地作業をする上で、PCやケーブルを準備するのは大前提でしょう。
しかし、新しいPCを持っていく時などはこれまでのPCに入れていたソフトウェアの
インストールを忘れたりするもの。きちんとチェックしましょう。

よく忘れるのが、ケーブルのドライバーソフト。
NW機器に繋ぐ時はコンソールケーブルで繋ぎますが、このケーブルのドライバーソフトの
インストールを忘れると道具はあるのに使えないという状態になります。
無線でネットに繋ぐことが出来る環境であればリカバリも可能ですが、そうでないと悲惨です。

道具は使えるか？
---
上と似た内容ですが、事前に使えること（使い方含む）を確認しておきましょう。

昔、キャプチャ試験をする為にデータセンターに行った際に相方が持ってきたPCの
LANポートが認識しないことがありました。
その時、私の端末が使えなければ酷いお叱りを受けていたでしょう。

加えて、ちゃんとソフトウェアの使い方は把握しておきましょう。
私が現地でよく使うwiresharkを例に出せば、フィルターの掛け方くらいは最低限抑えておいて
統計情報とかまで調べておくと良いかと思います。

必要な情報は手元にあるか？
---
ラックの場所、ラックのキー番号といった現地の情報からネットワーク機器のID/パスワードまで。

冷静に考えれば当然だと思うことでも案外忘れたりするものです。事前に現地に行った時の行動を
シミュレーションして抜け漏れを出来るだけ無くしましょう。

連絡体制は決まっているか？
---
障害対応や試験の時は、現地以外と連絡を取りながら作業を行うこともあります。

しっかりと体制を決めて、連絡をすることで情報の錯綜を防ぐことになります。
結果的にそれが自分の身を守ることになります。

あとはデータセンターは電波が届きにくいこともあります。
出来れば複数のキャリアの携帯があるのが望ましいです。

まとめ
---
現地では当初想定していなかった対応をしなくてはならないことも多々あります。（主に客があれこれ言うので）
出来るだけ準備をした上で、作業に臨みましょう。
国際信州学院大学をSeleniumで、スクレイピングする【TypeScript】

国際信州大学のページタイトルとニュース一覧をスクレイピングを行います。
[国際信州大学のホームページ](https://kokushin-u.jp/)

また事前に、ChromeDriverとGoogle Chromeのインストールが完了していることを前提に行います。
## 使用技術
- TypeScript
- Node.js
- Selenium
- WSL2(Ubuntu)
## 初期化処理
- Google Chromeの設定：`init`
- スクレイピング先のURLの設定：`setUrl`

```ts
import { Builder, By, Capabilities, WebDriver } from 'selenium-webdriver';

let webDriver: WebDriver | null = null;

/**
 * 初期化処理
 */
const init = async () => {
  webDriver = await new Builder()
    // Chrome起動時のオプションの設定
    .withCapabilities(Capabilities.chrome().set('chromeOptions', {
      args: [
        '--headless',
        '--no-sandbox'
      ],
      w3c: false
    }
    ))
    .build();
};

/**
 * スクレイピング先のURLの設定
 */
const setUrl = async (url: string) => {
  if (webDriver) {
    await webDriver.get(url);
  }
}

/**
 * メイン関数
 * 
 */
const main = async () => {
  await init();
  await setUrl('https://kokushin-u.jp/');
};

main();

```
## タイトルの取得
```ts
// タイトル取得
console.log(await webDriver.getTitle());
```

## ニュース一覧の取得
`forEach`で、一覧化されたニュースを、一つずつ内容を表示します。
```ts
const news = await webDriver.findElements(By.className('post'));

news.forEach(async (element) => {
  console.log(await element.getText());
});
```
## 最終的なコード
```ts
import { Builder, By, Capabilities, WebDriver } from 'selenium-webdriver';

let webDriver: WebDriver | null = null;

/**
 * 初期化処理
 */
const init = async () => {
  webDriver = await new Builder()
    // Chrome起動時のオプションの設定
    .withCapabilities(Capabilities.chrome().set('chromeOptions', {
      args: [
        '--headless',
        '--no-sandbox'
      ],
      w3c: false
    }
    ))
    .build();
};

/**
 * スクレイピング先のURLの設定
 */
const setUrl = async (url: string) => {
  if (webDriver) {
    await webDriver.get(url);
  }
}

/**
 * メイン関数
 * 
 * @returns 
 */
const main = async () => {
  await init();
  await setUrl('https://kokushin-u.jp/');

  if (!webDriver) return;

  // タイトル取得
  console.log(await webDriver.getTitle());

  // ニュース一覧取得
  const news = await webDriver.findElements(By.className('post'));

  // ニュース内容の表示
  news.forEach(async (element) => {
    console.log(await element.getText());
  });
};

main();

```
よわよわエンジニアはsessionとcookieの違いを理解したい

sessionとcookieは何が違うんじゃい！
ログイン機能とか作るときにsessionを使うけど、cookieじゃ駄目なんですか？
正直今までよくわからずに使っていたので調べてみる。


ちょっと調べてみると以下のような違いがあるらしい。

| 1 | 2 |
|:-:|:-:|
| cookie  | Webサーバーが発行してブラウザが保持するキーと値|
| session  | Webサーバー側で保持するキーと値 |


ふむ。sessionだとWebサーバー側に情報を保存してブラウザには情報を保持しないってことかな。
それじゃあsessionでサーバー上に情報を保存させたとして、再度サーバーにリクエストを送ったときサーバー上に保存した情報が自分のものだとどうやって証明するんだろう…

## sessionはcookieありきのもの
そもそもsessionというのは**ユーザーによる一連の動作(例えばサイトにログインして買い物かごに商品を入れる・購入・ログアウトをするまで)のこと**を表すらしい。

sessionを開始するとセッションIDが発行されて、それがブラウザ上に保存される。
このセッションIDをもってサーバー上にセッションで保存した情報が自分のものだと証明することができるようだ。

そしてこの**セッションIDをブラウザに保存する一番メジャーなのがcookieを使うこと。**
cookieではなくsessionを使おう！っと思っても実はcookieも使われていたということか。

## cookieでログイン機能を作ってはいけないのか？
ログイン機能を作るときに、cookieを使うとログインIDやパスワードをサーバーにリクエストを送信するたびに送ることになる。
これはセキュリティ上よろしくないためsessionを使うべき。

しかし、sessionを使ってもcookieに保存したセッションIDがリクエストを送るたびに送信されているわけで、セッションIDが盗まれたら同じことでは？と思えてしまう。
IDやパスワードをそのまま送信するよりはマシということだろうか…



## 参考サイト
- https://www.engilaboo.com/definitely-understand-cookie-session/
- https://ips.nekotype.com/2441/
Notionの背景画像にお気に入りの画像を設定する

# 概要

Notionの背景画像に好きな画像を設定します。
↓設定するとこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127686/b73dd929-ade6-7dd6-baf8-1efa28836c70.png)


※当記事では[いらすとや](https://www.irasutoya.com/)の画像を使用して記載しています。


# 使用するもの

- Stylus(ブラウザ拡張機能)
    - 特定のサイトに対して独自のCSSを適用できる拡張機能です
    - ご使用のブラウザの物をインストールしてください

https://add0n.com/stylus.html


- Googleドライブ
    - 画像の保存先として利用します

https://www.google.com/intl/ja_jp/drive/


# 設定方法

## Googleドライブから画像URLを取得する

まず好きな画像をGoogleドライブにアップロードします。
次にアップロードした画像を共有(リンクを知っている全員に共有)状態にします。

![2022-06-19_17h57_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127686/76200d3b-b5ab-dd90-f08a-e8f271bf1811.png)


リンクをコピーすると以下のようなURLになっているので、

```
https://drive.google.com/open?id={ID}
https://drive.google.com/file/d/{ID}/view?usp=sharing
```

`{ID}`の箇所をコピーして

```
http://drive.google.com/uc?export=view&id={ID}
```

としてアクセスするとimgタグCSSの`background-image`として使用できるので、
これをStylusのCSSで設定します。


Googleドライブにアップロードした画像をURLで取得する方法は以下の記事を参照させていただきました。

https://qiita.com/codeDiver/items/0394968fa318d9309d33

## Stylusの設定

Notionのページを開いているときに、ブラウザ拡張機能のアイコンの並びにある`S`のマークのStylusをクリックすると、現在開いているURLのどのレベル(開いているページに対してなのか、そのサイト全体に対してなのか)に対してCSSを書くか選択できるので、とりあえず`notion.so`を選択します。
![2022-06-19_18h47_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127686/5d5b0014-0a49-0f05-f32e-cb19eee6fa0b.png)

選択すると別ウィンドウでCSSを記述する画面が開かれるのでそこに対してCSSを記述していきます。
![2022-06-19_18h53_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127686/3bdcecf0-8ea3-351e-b778-1d98af976868.png)


今回は以下のCSSをそのまま適用すれば表示されますが、他のサイト等で設定したい場合
F12でディベロッパーツールを開いてどの要素に対してCSSを適用したらいいか探りながら設定します。

```css
.notion-frame > div {
   /*↓{ID}の部分は書き換えてください*/
   background-image: url(http://drive.google.com/uc?export=view&id={ID})!important; 
   background-repeat: no-repeat!important;
   background-position: bottom right!important;
   background-size: 20%!important;
   background-color:rgba(255,255,255,0.7)!important;
   background-blend-mode:lighten!important;
}
```

※`background-size`や`background-color`の透過等はお好みで調整してください。

## TIPS

Stylusで`notion.so`に対する設定でなく、`次で始まるURL`で
スペースごとの設定もできるので、自分のページはこの画像、Aさんから共有されているページは別な画像...といった設定もできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127686/eb1d33fd-e9e7-dc87-a94a-686abf7d102b.png)



## 他備考等

Googleドライブにわざわざ画像を置かなくてもNotion内に画像を置いてそのURLを拾ってくればいいのでは・・・？と思ってやってみたのですが、どうやらURLの期限が24時間しか無いようなのでそれはできませんでした。
(Googleドライブでなくとも画像をURL化できるサービス等使えば何でも良いです。)

参考：

https://blog.serverworks.co.jp/notion-amazon-s3
gitのコンフリクト解消方法となぜ起こってしまうのか

## なぜ記事を書こうと思ったか
  サービスの開発中にブランチでのコンフリクトが発生した為、修正方法の備忘録として残す為。

## そもそもコンフリクトはどの状況で起こる現象？
　簡潔に言うと、同じブランチから派生した複数のブランチで同じファイルを編集した際に、コンフリクトが起きる。
　hogeファイルを所持しているmainブランチとmainブランチからチェックアウトしたAブランチ、Bブランチがあるとします。Aブランチでhogeファイルを編集し、mainブランチにmergeした際に、Bブランチでもhogeファイルを編集し、mainブランチにmergeしようとした場合に、コンフリクトが生じます。

## 対処方法(備忘録の為、簡単に書きます笑)
- 前提条件(コンフリクトを発生させる条件)

1.hogeファイルを所持するmainブランチの作成
hogeファイルの中身
```
あいさつの種類
①おはようございます。
```

2.mainブランチから派生したAブランチの作成
hogeファイルの中身
```
あいさつの種類
①おはようございます。
②こんにちは。
```

3.mainブランチから派生したBブランチの作成
hogeファイルの中身
```
あいさつの種類
①おはようございます。
②こんばんは。
```

4.Aブランチをmainブランチにmergeし、mainブランチで`git pull`を行う。

5.Bブランチをmergeしようとしてもコンフリクトを起こしている。(githubのプルリクエストで確認)
<img width="730" alt="スクリーンショット 2022-06-19 18 06 00" src="https://user-images.githubusercontent.com/75520329/174473945-2a883459-d551-4176-b024-47b3aff9cd8b.png">

- コンフリクト対処順序

1.ターミナルでBブランチにて`git merge main`を行い、Aブランチの修正内容をBブランチに更新する。
gitのターミナルでは以下の様に表示される。
```
Auto-merging hogeファイル
CONFLICT (content): Merge conflict in hogeファイル
Automatic merge failed; fix conflicts and then commit the result.
```
表示された内容は、「更新したけど、hogeファイルでコンフリクトが発生してるから修正してね。」と言う内容です。

2.Bブランチのhogeファイルの内容を確認すると、コンフリクト発生箇所が以下のように表示される。
hogeファイル
```
あいさつの種類
①おはようございます。
<<<<<<< HEAD
②こんばんは。
=======
②こんにちは。
>>>>>>> main
```
HEAD側のコードはBブランチの変更内容、main側のコードは取り込まれたmainブランチの内容を表しています。

3.Bブランチのhogeファイルを正しい内容に変更する。
hogeファイル
```
あいさつの種類
①おはようございます。
②こんにちは。
③こんばんは。
```

4.ターミナルにてBブランチで`git add [hogeファイルのパス]`、`git commit -m "コメント"`を行い、Bブランチにpushする。
`[hogeファイルのパス]`が分からない場合、`git merge main`を行った際の表示された内容にhogeファイルのパスがあります。

5.これでコンフリクトは解消されて、Bブランチをmergeできるようになります。
プルリクエストなどを確認した場合、mergeできる様になっている事が確認できます。
<img width="671" alt="スクリーンショット 2022-06-19 18 59 36" src="https://user-images.githubusercontent.com/75520329/174475678-6e5cdd61-a0a0-44d2-9e0e-d35fd083c4d1.png">

## コンフリクトを少なくするために
　基盤となるブランチ(ほぼmainブランチ)が他のブランチの変更をmergeした後に、新しいブランチを作成する事を心掛けるだけで極力コンフリクトを無くすことは可能だと思います。しかし、派生したブランチの変更をmergeせずに他のブランチを作成しないといけない状況もある為、その際はコンフリクトを解消しましょう。

## 最後に
　もっと良い対処方法や対策方法、間違っている箇所があれば、ぜひ教えていただけると嬉しいです。
　読んで頂きありがとうございました。

## 参考記事
- [Gitのコンフリクト（conflict）を解消する手順についてまとめました【Git】](https://m-kenomemo.com/git-conflict/)
Java開発未経験がJava Gold に合格できた勉強方法

# はじめに
私が**Java Gold**を合格した時の勉強時間と勉強方法をお話しします。
少しでも参考になればと思います。

# 受験時のスペック
## 1. 開発経験
+ Webアプリ開発：1年
+ **Javaの開発経験はなし**
## 2. 受験時の保有資格
+ Java Silver

# 勉強期間
**Java Silver**取得から半年ほどで取得。
途中勉強時間を取れてない期間もあったので、棍詰めれば3ヶ月ほどで合格することも可能かと思います。
# 勉強時間
だいたい100時間くらい勉強しました。
Javaの開発経験のない方は、このくらいの勉強時間は必要かと思います。

# 勉強方法
## 1. 黒本の問題を解いて解説を理解
黒本の問題を全て解けるようになるまで勉強しました。
また解説も徹底的に読み込み、処理のロジックを理解することを意識していました。
## 2. 紫本を読み込み
Java Goldの試験範囲についての知識(構文やメソッドなど)を理解するために使用しました。
紫本の問題は解いていません。

# 受験してみての感想
実務経験がない方が**Java Gold**を合格するのは難しいと言われていますが、
正直**黒本を徹底的にやりこめば合格は可能**かと思います。
実際試験では黒本の問題と似たようは内容の問題が多かったです。

**黒本の問題を徹底的にやることが合格への近道**だと思います。