OmniAICreator/Qiita-1.07M huggingface dataset:
AutoPrefixerメモ

これでいけませんか？

```terminal:ターミナル
npm install postcss-cli autoprefixer -D
```

```json:package.json
"browserslist": [
    "last 2 versions",
    "> 1% in JP",
    "ie >= 11", 
    "Android >= 4",
    "ios_saf >= 8"
]
```

```json:package.json（※Scripts部分に）
"scripts": {
    "postcss": "postcss css/style.css --use autoprefixer --dir css/ --watch"
}
```

```scss:_reset.scss
/* autoprefixer grid: autoplace */
```

```terminal:ターミナル
npm run postcss
```

Sassを編集するとDartJSが走ってcssが更新される
↓
cssが更新させるとAutoPrefixerが走る

流れ的にはこんな感じです。
現状IEのGridには対応できないみたいです。エラーはおそらくそれです。

現状Glupに移行が濃厚な気もします。
Cloud Workflows で リトライ処理やエラーハンドリングする

表題の通り。 `try - retry - except` の構文 や `predicate` の使い方がみそ。

# 実装

- retry3回. 3回retryしても失敗したら例外投げる
- エラーコードが400以上の場合のみ再実行の対象とする

```yaml
main:
    steps:
    - get_unix_timestamp:
        try:
            call: sys.now
            result: unix_timestamp
        retry:
            predicate: ${custom_predicate}
            max_retries: 3
            backoff:
                initial_delay: 2
                max_delay: 60
                multiplier: 2
        except:
            as: e
            steps:
                - unhandled_exception:
                    raise: ${e}

custom_predicate:
    params: [e]
    steps:
      - what_to_repeat:
          switch:
          - condition: ${e.code > 400}
            return: True
      - otherwise:
          return: False

```

# 参照

https://cloud.google.com/workflows/docs/reference/syntax/retrying?hl=ja#custom-retry

https://cloud.google.com/workflows/docs/samples/workflows-error-catch?hl=ja
VisualForceで画面遷移の実装方法

### 画面遷移：「最近使った取引先」に遷移する場合の方法：

```
            // 戻り先は『最近使った取引先』ページ
            //String url = '/' + Account.SObjectType.getDescribe().getKeyPrefix() + '/o';
            //Pagereference tabPage = new Pagereference(url);
            //return tabPage;

```
Webとネットワーク技術　その１

Webは世界中に存在するコンピュータがお互いに情報をやり取りすることで実現します。
この仕組みを支えているのがネットワーク技術です。

# Webを実現するコンピュータネットワーク
Webの誕生によって世界中に散らばる情報を簡単に手に入れることができるようになりました。
これを支えているのは```コンピュータネットワーク```です。
お互いに接続して情報をやり取りする仕組み。

# クライアントとサーバによってネットワークは成立する
### サーバー（役割）
ネットワーク上で情報やサービスを提供するコンピュータ
Webサイトを提供しているWebサーバーがこの役割を果たす。

### クライアント（役割）
サーバーから提供された情報やサービスを利用するコンピュータ
Webサイトを表示するWebブラウザがこの役割を果たす。

# インターネットとは
### インターネットプロバイダーを使いインターネットに接続する
Webサイトを閲覧する場合、インターネットプロバイダーが提供するサービスを利用しなければならない。
### インターネットの形
自宅、会社、学校などの小さい範囲のネットワークがお互いを接続しあいそれが世界中に広がっている。
非常に大きい。

# インターネットプロバイダーの上下関係
下位のプロバイダーは小さい繋がり.
上位のプロバイダーを経由することで大きい繋がりをもたらす.

# インターネットの標準プログラム
### プロトコル
ネットワークに接続された機器同士が共通のルールや手順のこと。
### TCP/IP(Transmission Control Protocol/Internet Protocol)
サービスを実現するためのプロトコルの集まり。
### HTTPもTCP/IPの一種
```HTTP```WebブラウザとWebサーバーの間でデータのやり取りをする時に使用する。
```FTP```コンピューター間でファイルをやり取りをするときに使用する。
```SMTP```電子メールを送信するときに使用する。
```POP```ユーザーがメールサーバーから自分のメールを取り出すときに使用する。

# TCP/IP
役割ごとに４つの階層（レイヤー ）が存在する
```アプリケーション層（レイヤー４）```
```トランスポート層（レイヤー３）```
```インターネット層(レイヤー２）```
```ネットワークインターフェース層(レイヤー１）```
が存在する。

両者はお互いのTCP/IPの４つの層を通って通信をしている。
### アプリケーション層
メールソフトやWebブラウザなどのアプリケーションごとのやり取りを規定しています。
サーバーやクライアントに```転送しやすいデータ形式```に変換したり、```人に理解しやすいよう```に変換したりする役割を持つ。
データ転送処理はアプリケーション層より下位の層が担当する

### 下位のレイヤー トランスポート層
データ転送処理は分割して行われる。
以下この層のプロトコル
### TCP（Transmission Control Protocol)
・分割されたデータの順序や欠落をチェックしている。
・メールなどのデータ損失が起きると困るようなアプリケーションで利用されている。
### UDP(User Datagram Protocol)
・分割されたデータの順序や欠落を保証していません。
・信頼性が低い
・通信手続きが簡略化されているため効率よく通信する。

出典　Web技術の基本（SB Creative)
【apache】特定のURLアクセスを拒否する方法

# はじめに
Apacheにて、特定のURLアクセスを拒否する方法についてメモ。
誰かの役に立てば幸いです。

# 設定方法
httpd.confに下記内容を記載するだけ
```apache:httpd.conf
・・・
LoadModule info_module modules/mod_info.so
・・・
<IfModule mod_info.c>
    <Location "/【拒否するURL】">
        SetHandler server-info
        Order deny,allow
        Deny from all
    </Location>
</IfModule>
・・・
```
インフラエンジニアはブルーオーシャンなのか

インフラエンジニア5年ほどやってます。
最近SNSとかで話題になっていたので、終止符を打ってやるくらいの気持ちで書きます。
結論からいうと、**インフラエンジニアはブルーオーシャンではないです。**

## インフラエンジニアとは
アプリケーションというものはネットワーク、サーバー、ストレージ（ディスク）
などの基盤（インフラ）の上で成立します。
このインフラを構築したり、運用する人のことをインフラエンジニアといいます。

インフラエンジニアといってもいろいろな種類があります。

**・サーバエンジニア**
**・ネットワークエンジニア**
**・DBエンジニア（アプリより）**

更にその中でクラウドかオンプレにわかれて、
また更に以下のようなカテゴリにわけられます。

**・設計/構築**
**・1次保守**
**・2次保守（SRE）**

## なぜこういう議論が巻き起こったのか
近年AWS等のおかげで認知度があがったからかなと思いました。
元々インフラエンジニアというものの一般的な知名度は低かった印象です。
といっても既存のインフラエンジニア自体がクラウドに流れるだけなので、
インフラエンジニア自体がブルーオーシャンになったわけではないです。
**クラウドになったからといってインフラ自体の絶対数はかわりません。**

ただし、シーンが移りかわっているという意味で、
そこに付け入るスキは大いにあるかと思います。

また、コーディングをしない（厳密にいうと全くしないということはない）
という観点で言えば、たしかに入口はプログラマーより広いかもしれません。
といってもスタートは１次運用エンジニアというパターンが多く、
そこから次のステップにいくために大きな壁があったりします。

１次運用は定型的な作業が多く、プログラマーでいうと
テスターとかそういう立ち位置に近いのかなと思います。

## インフラエンジニアになるためには
日の目を浴びるにはやはりアウトプットが必要です。
インフラ系は資格がいろいろあるので、まずはそこを狙うのをおすすめします。

その上で必要になるとのは、プログラマーと同じくポートフォリオなるものです。
インフラの場合、実際にこんな環境を構築したよとかそういうやつです。
いまはクラウドが主流なので、自前で簡単にできるのはアドバンテージですね。

インフラエンジニアもアプリエンジニアと同じく、
勉強しなければ第一線で戦うエンジニアになるのは難しいです。

## さいごに
結局必要とされるのはインフラエンジニアもプラグラマーも**ハイスキル+行動力/思考力**がある人です。
こんな人はなかなか市場にでてこないから、これぞまさに然るべきブルーオーシャンですね。

前述しましたが、クラウドの発展のおかげでインフラエンジニアは、仕事の幅がとても広がりました。
アプリ側だった仕事が、インフラの守備範囲からもできるようになってきているのです。

インフラからアプリに行く人もいますが、アプリからインフラに来る人もいます。
それだけインフラエンジニア側にも魅力があります。
【PlayCanvas】非同期(async/await)でシーン移動をする

> 2023年 現在ではシーンの移動方法に変更がありましたのでこちらのマニュアルを御覧ください

### マニュアル
https://developer.playcanvas.com/en/user-manual/packs/loading-scenes/

### 1.57.0 変更点（GitHub - プルリクエスト）
https://github.com/playcanvas/engine/pull/4626

#### 旧記事
------------

PlayCanvasでは`loadSceneHierarchy`関数で新しいシーンを読み込む事ができます。

またシーン移動についてはこちらのチュートリアルが存在しております。
https://developer.playcanvas.com/en/tutorials/changing-scenes/

### PlayCanvasのプラグインとして定義して利用する
`loadSceneHierarchy`を利用する`changeSceneAsync`を定義
`await changeSceneAsync(シーン名)`の形で読み込みを行っていただくことで利用できます
`pc`以下に配置をして様々なスクリプトから呼び出す場合はプラグインのような形で追加する事もできます。
```javascript
//load-scene-plugin.js
pc.extend(pc, function () {
    const loadSceneAsync = async (sceneName) => {
        const scene = pc.app.scenes.find(sceneName);
        return new Promise((resolve, reject) => {
            pc.app.scenes.loadSceneHierarchy(scene.url, (err, parent) => {
                if (!err) {
                    resolve(parent);
                } else {
                    reject();
                }
            });
        });
    };

    const changeSceneAsync = async (sceneName) => {
        pc.app.scene.root.destroy();
        const root = await loadSceneAsync(sceneName);
        pc.app.scene.root = root;
    };

    return {
        loadSceneAsync,
        changeSceneAsync
    };
}());
```

#### 使い方（ボタンに設定）
`pc.changeSceneAsync("シーン名")`として利用できます。
```javascript
// scene-change.js
class SceneChange extends pc.ScriptType {

    initialize() {
        this.entity.element.on(pc.EVENT_MOUSEDOWN, this.changeScene, this);
    }

    async changeScene() {
       await pc.changeSceneAsync("Scene2");
    }
};

pc.registerScript(SceneChange);

```
Lpic102を受けに試験会場へ

101はオンラインで受けて、102は立川のテストセンターに行って受けてきた。

実際に会場でLpic受けて気づいたこと、流れや会場の様子について話す。

<br><br>

ちなみに結果は余裕合格。

102の問題や難易度は101とあまり変わらず、安定のスピマス予想問題が当たりすぎ。

問題・難易度に関してはこの記事👇をチェック。101のみならず102でも参考になる。

https://qiita.com/Hashibirokou/items/a787d2fcfd2305dd6e6c

# 集合時間は15分前がちょうどいい

オンラインでLpicを受ける（On VUE）場合だと、30分前からチェックインする必要がある。

本人確認とかテスト環境の確認とか。

https://qiita.com/Hashibirokou/items/e29ffd0a33d0f642d769

でも試験会場で受ける場合はそこまで早く行く必要ない。15分前で大丈夫。

実際俺も13:00開始のテストで30分前に着いたんだけどこの有様👇
![tescenter (1).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/061ff738-4389-ffd4-0f5e-31e77734c914.jpeg)

だから試験会場で受ける場合はオンラインと違ってそこまで早く行く必要はない。

でも会場で本人確認とかあるから15分前には着いておく。

# 試験の流れをざっと解説

今日受験予定の名簿に名前があるかチェックされる
↓
本人確認証（運転免許、パスポート）を見せると紙が渡されるから、そこに名前や試験団体名を書く
↓
写真撮影 &本人の手書き確認
↓
ロッカーに本人確認証以外全部しまう
↓
準備できたらPCのある別室に行きそこで試験開始

Pearson VUE公式の解説動画👇

<br>

<iframe width="100%" height="400" src="https://www.youtube.com/embed/ivMkmX8jIqA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 問題の”文字入力の遅さ”について

オンラインでLpic受けた時文字入力の遅さが問題だった。

一文字打つのに5秒、一文字消すのに5秒かかる。

試験会場で受けたらその問題は一切なかった。

スムーズにキー入力が可能。

# テストセンターのPCは良い

画面がめちゃくちゃデカくてすげー見やすかった。

キーボードも打ちやすかったなぁ〜。

立川テストセンターの物がたまたま良かったのか？

いや、Lpicとかこの類のテストを実施しているテストセンターならしっかりした良いめのPCを用意してるはず。

# Lpic level1(102)の記述問題の量について

「なんか102は101に比べて記述解答の問題が多いらしい」って見たから今回は会場に行って受けたけど、別にそこまで多くない。

記述解答形式の問題は101と同じくらいの量だった。

オンライン受験で味わった文字入力の遅さから、それをビビって会場に足運んだんだけど別にそこまで記述形式が多いわけじゃないからオンラインでもよかったな。

# スコアレポートがすぐ出る

オンラインで受けた時は、合否結果及びスコアレポートが出るのがなぜか数時間後だった。

今回会場で受けた時は「本当に終了しますか？」のボタンで「はい」を押せばすぐに結果が出た。

そのあと試験監督をベルで呼んで終了の旨を伝えた。

外へ出るとすぐにスコアレポートも渡されそのまま帰宅。

# まとめ

試験会場でLpicを受験して気づいた、会場で受けることのメリットは次の通り

- 画面が大きくて見やすい
- 文字入力がスムーズ
- 結果とスコアレポートがすぐに出る
同じサーバー内の複数サイトにBasic認証をかけた

# 動作環境
AlmaLinux 8.5
php 7.4.27

# サーバー構造
サイトA
/var/www/html/example_a.com
サイトB
/var/www/html/example_b.com

この2つのサイトに、別のID、パスワードを持つBasic認証をかける

# DocumentRootより上層にパスワードファイル用ディレクトリを作成

```
mkdir /var/www/htmml/keybox
```
# サイトAの管理画面にBasic認証をかける

# .htaccess作成
DocumentRoot直下に作成

```:vim&nbsp;/var/www/html/example_a.com/.htaccess
# 管理画面へのBasic認証
#
AuthType Basic
AuthName "Please enter username and password"
AuthUserFile /var/www/html/keybox/examplea.htpasswd
AuthGroupFile /dev/null
require valid-user
SetEnvIf Request_URI "^/[管理画面パス]" admin_path  # ^/adminは, 管理画面URLに応じて変更してください
<RequireAll>
    Require all granted
    Require not env admin_path
</RequireAll>

```

# 暗号化パスワード作成

`https://www.luft.co.jp/cgi/htpasswd.php`

# .htpasswd作成

```:vim&nbsp;/var/www/html/keybox/examplea.htpasswd
[ユーザーネーム]:[暗号化パスワード]
```
# フロントで確認

`https://example_a.com/[管理画面パス]`

# サイトBのトップページにBasic認証をかける

# .htaccess作成
DocumentRoot直下に作成

```:vim&nbsp;/var/www/html/example_b.com/.htaccess
# 管理画面へのBasic認証
#
AuthType Basic
AuthName "Please enter username and password"
AuthUserFile /var/www/html/keybox/exampleb.htpasswd
AuthGroupFile /dev/null
require valid-user
SetEnvIf Request_URI "^/" admin_path  # ^/adminは, トップページURLに応じて変更してください
<RequireAll>
    Require all granted
    Require not env admin_path
</RequireAll>

```

# 暗号化パスワード作成

`https://www.luft.co.jp/cgi/htpasswd.php`

# .htpasswd作成

```:vim&nbsp;/var/www/html/keybox/exampleb.htpasswd
[ユーザーネーム]:[暗号化パスワード]
```
# フロントで確認

`https://example_b.com/`

***
# 参考記事
https://qiita.com/chihiro-adachi/items/64707ca3250eee3f43c8
https://qiita.com/yuwaita/items/e406c645ae8d0cc3c3fa#:~:text=%E3%82%A2%E3%83%83%E3%83%97%E3%81%99%E3%82%8B%E5%A0%B4%E6%89%80-,.,%E4%B8%8A%E3%81%AB%E8%A8%AD%E7%BD%AE%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%80%82
Perlで数字を漢数字に変換するプログラム

入力テキストファイルの数字を漢数字に変換するプログラムを作りました。

文字コードに気を付けて環境に合わせて適時適応してください。

Lingua::JA::Numbersモジュールが必要です。

以下、Perlのコードです。

```perl
#!/usr/bin/perl

use utf8;
use strict;
use warnings;
use Encode;
use Lingua::JA::Numbers;

binmode STDIN, ':encoding(cp932)';
binmode STDOUT, ':encoding(cp932)';
binmode STDERR, ':encoding(cp932)';

# 読み込みモードでオープン
my $file = 'input.txt';
open my $fh, '<', $file
  or die qq/Can't open file "$file" : $!/;

# 書き込みモードでオープン
my $file_output = 'output.txt';
open my $fh_output, '>', $file_output
  or die qq/Can't open file "$file_output" : $!/;

my $line;
my $str;

while ($str = <$fh>) {
  $line .= $str;
}

my $enc = 'utf8';

# 数字は半角にそろえておく
$line =~ y/１２３４５６７８９０/1234567890/;
# 桁区切りのコンマを取っておく
$line =~ s/(?<=\d),(?=(\d\d\d)+(?!\d))//g;

$line =~ s/(\d+)/Encode::encode($enc,(num2ja($1, {style => 'kanji'})))/eg;

print Encode::decode('utf8',$line);

print $fh_output $line;

close $fh;

close $fh_output or die qw/Can't close file "$file": $!/;
```

入力テキストファイルはこちら。

```:input.txt
【ワシントン13日共同】米政府と連邦準備制度理事会（ＦＲＢ）は13日夕、サブプライム住宅ローン問題の影響で業績が悪化している政府系住宅金融2社、連邦住宅抵当金庫（ファニーメイ）と連邦住宅貸付抵当公社（フレディマック）に対する緊急支援声明を発表した。両社の経営問題が世界の金融市場の重大関心事となっているため、危機回避へ日曜日の異例の支援表明になった。

　ＦＲＢ声明によると、両社の短期的な資金繰りを支援するため、必要に応じてニューヨーク連邦準備銀行を通じて公定歩合で融資する。

　米メディアによると、フレディマックは資金調達のために3,000,000,000ドル（約320,000,000,000円）の債券発行を14日に控えており、経営不安説が高まる中で支障なく資金が集められるかが焦点になっている。

　両社の経営問題が前週末の米欧株価の下落を呼び、週明けの東京市場への波及が懸念されていたため、市場の沈静化を目的に異例の対応になったとみられる。

　米紙ウォールストリート・ジャーナル（電子版）によると、両社が保有・保証している住宅ローン関連の証券化商品は約5,200,000,000,000ドルと、米国の同証券化商品の半分近くを占める。

　一方、英紙サンデー・タイムズは13日付で、市場における両社の信用を回復させるため、米政府が最大で15,000,000,000ドルの資本注入を検討している、と伝えた。

　両社は、政府の住宅政策を担う重要な機関だが民間上場企業。報道内容が実現すれば、米政府が相当数の株式を保有することになる。

七面鳥
二面性
九死に一生スペシャル
52,000ペソ
七転八倒
9章3節
山田一二三
```

出力されるテキストはこちら。

```:output.txt
【ワシントン十三日共同】米政府と連邦準備制度理事会（ＦＲＢ）は十三日夕、サブプライム住宅ローン問題の影響で業績が悪化している政府系住宅金融二社、連邦住宅抵当金庫（ファニーメイ）と連邦住宅貸付抵当公社（フレディマック）に対する緊急支援声明を発表した。両社の経営問題が世界の金融市場の重大関心事となっているため、危機回避へ日曜日の異例の支援表明になった。

　ＦＲＢ声明によると、両社の短期的な資金繰りを支援するため、必要に応じてニューヨーク連邦準備銀行を通じて公定歩合で融資する。

　米メディアによると、フレディマックは資金調達のために三十億ドル（約三千二百億円）の債券発行を十四日に控えており、経営不安説が高まる中で支障なく資金が集められるかが焦点になっている。

　両社の経営問題が前週末の米欧株価の下落を呼び、週明けの東京市場への波及が懸念されていたため、市場の沈静化を目的に異例の対応になったとみられる。

　米紙ウォールストリート・ジャーナル（電子版）によると、両社が保有・保証している住宅ローン関連の証券化商品は約五兆二千億ドルと、米国の同証券化商品の半分近くを占める。

　一方、英紙サンデー・タイムズは十三日付で、市場における両社の信用を回復させるため、米政府が最大で百五十億ドルの資本注入を検討している、と伝えた。

　両社は、政府の住宅政策を担う重要な機関だが民間上場企業。報道内容が実現すれば、米政府が相当数の株式を保有することになる。

七面鳥
二面性
九死に一生スペシャル
五万二千ペソ
七転八倒
九章三節
山田一二三
```
クラウドごとのRed Hat Enterprise Linux使用料金比較

先日書いた記事で、AzureでRHELのVMインスタンスに追加料金が無いことが気にかかり、その他クラウドベンダーでの使用料金を比較してみようと思った。そのメモ。
(5/12 追記) AzureでRHELにOS料金が上乗せ表示されないのは記事作成時点の料金計算ツールのバグ。修正された。

# 比較対象のクラウド
Red Hatがクラウド経由でライセンス供与しているクラウドプロバイダーは2022年5月時点で5つ。内、Alibabaだけは対応していないのかCalcuratorにRHELが出てこないので、比較対象はAWS、GCP、Azure、IBM Cloudの4つ。Oracle Cloud無いのが意外。

Red Hat certified cloud and service providers
https://catalog.redhat.com/cloud

# 表
最初にまとめると、やはり、Azure以外はRHEL OS利用が有償であり月43.8ドル掛かる。
ええ、Azure何か罠があるの？企業努力？
(5/12 追記) 上記の通りバグ。Azureでも有償である。

| クラウドベンダ | 比較VMのサイズ | Ubuntu等選択時のVM価格 | RHEL8選択時のVM価格 | 価格差 |
|:-|-|-|-|-:|
| AWS | m5.large | 94.12 USD | 137.92 USD | 43.8 USD |
| GCP | n2-standard-2 | USD 90.95 | USD 134.75 | USD 43.8 |
| Azure | D2as v4 | $90.57 | $134.37 | $43.8 |
| IBM Cloud | bx2-2x8 | $88.62 | $132.42 | $43.8 |

VMの条件は、東京、vCPU 2個、メモリ 8GBの非バーストマシン、On-demand/従量課金で揃えてみた。
別にハードウェア部分の価格比較が目的ではない。3年予約とかすればガツガツ下がる。

以下は、ベンダそれぞれの料金計算の詳細。

# AWS
AWS Pricing Calculator
https://calculator.aws/#/

## Linux(Ubuntu相当)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/305efa2f-2e66-301e-d3a4-57ddf1efc6e5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/385df54d-e3bc-87a4-dce5-07e94df69fb9.png)

## RHEL
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/3cfaa20c-85b3-3e22-7ee5-1e99ca9fe129.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/b2941dba-f232-b9eb-f6c9-c42c06f1b70d.png)


# GCP
Google Cloud Pricing Calculator
https://cloud.google.com/products/calculator?hl=ja

## Ubuntu
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/917453dd-78c9-cecb-7951-f2562b458236.png)

## RHEL
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/9d24f63f-79c2-e388-c095-461a1b30ccfb.png)


# Azure
料金計算ツール
https://azure.microsoft.com/ja-jp/pricing/calculator/

## Ubuntu
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/7138f880-f919-3d03-6ce8-38819b742f90.png)

## RHEL
(5/12修正)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/80352cd2-7559-c026-32b2-60b19a485101.png)


# IBM Cloud
IBM Cloud cost estimator
https://www.ibm.com/cloud/cloud-calculator

## Ubuntu
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/0b3e6953-90e3-501b-8fe3-97ab91d6b3d7.png)

## RHEL
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146381/3fc10cfa-911a-d49b-abdb-8af2f202cc43.png)
自作Webサーバーの作成(ふつうのLinuxプログラミング)

ふつうのLinuxプログラミングという本に自作Webサーバーの記載があったので動作確認。

まず一つ目のWebサーバープログラムは簡易的でコマンドラインでファイルのテキストを返すというもの。

C言語のソースファイルを表示してみた。

コマンドラインの実行結果はこちら。

![20220506170207.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615735/dfe4dc14-2ed2-ffc7-b70b-4017331b85fe.png)

これは簡易的なWebサーバー。

二つ目のWebサーバープログラムはブラウザで表示可能。

こちらも同じファイルで表示してみる。

![20220506170329.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615735/38abeb49-2b74-1c42-11ec-bd4fbf0e353f.png)

文字列がブラウザに表示された。

プログラムを少し改良してHTMLを表示してみる。

HTMLファイルの中身はこちら。

![20220506170430.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615735/e6adc4ed-f8ff-ab86-bf86-c89bdae7caec.jpeg)

ブラウザでの実行結果はこちら。

![20220506170523.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615735/f92c0e83-2921-b310-1b32-6f6e13c35b91.jpeg)

さらに自作のLightsOutという数学パズルで遊ぶHTML + JavaScriptプログラムのファイルにアクセスしてみる。

その時の記事はこちらです。
https://qiita.com/Kai_orange4/items/bf5c953ba2e1fe126b59

![20220506170613.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615735/509a7684-cdc8-ff2a-9180-a8a05734e66d.jpeg)

HTML + JavaScriptの動作確認が出来た。

# まとめ

C言語による自作簡易Webサーバープログラムはブラウザによるアクセスも可能。

またコードを変えれば、テキストファイルだけではなくてHTMLファイルも読み取り可能。

その際、JavaScriptも実行可能である。

PHPやPerlなどのサーバーサイドプログラムを動かすには、何か工夫が必要と思われる。
PerlとCGIについて

PerlとCGIの基礎についてやっていきます。

PC内のローカル環境にサーバーを構築して、ドキュメントルートに以下のコードのファイルを作成してください。
今回はローカル環境のサーバーはXAMPPを使います。

文字コードはUTF-8で保存してください。

```perl
#!/xampp/perl/bin/perl

print "Content-Type: text/html; charset=utf-8\n\n";
print "\n";
print "<html>\n";
print "<head>\n";
print "<title>テスト</title>\n";
print "</head>\n";
print "<body>\n";
print "これはCGIのテストです。\n";
print "</body>\n";
print "</html>\n";
```

1行目はサーバーの環境によって変わります。
今回はXAMPPなのでこのようになります。
Perlが実行出来るパスを指定します。

```perl
#!/xampp/perl/bin/perl
```

今回はドキュメントルートのtest_perl3というフォルダにtest1.cgiというファイルを作成しました。

ファイルの拡張子は.cgiにしてください。

実行結果

![20220506153803.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2615735/b89fe912-d2e1-e820-4d30-2e55fec96ef6.jpeg)
[Webを支える技術] 第2部 URI　個人的重要部分まとめ

# URIの仕様
## URIの構文
http://blog.example.jp/entries/

のようなURIがあるとする。
この場合、
http　はURIスキーム。主にプロトコルで表現するのが一般的。
blog.example.jp　はホスト名。
/etnries/1　はパス。
という構成内容になっている。この他にもポート番号やクエリパラメーターなどの情報を加えることもできる。

# URIと文字
URIではASCII文字しか使用できない。そのため、日本語などを入れたい場合にはエンコードが必要になる。
例えば　%E3%81%82　の文字が日本語の　あ　の表現になる。

## URIの設計
まず結論として、変わらないURIがクールURI、いいURIである
そのために、
- プログラミング言語に依存した拡張子やパスを含めない
- メソッド名やセッションIDを含めない
- URIはリソースを表現する名詞にする(そのリソースをどうするのかというのはリソースにアクセスする側が決めるので、どうするのかという動詞をURIに含めない)

等の工夫が必要である。

## URIを変更したいとき
とはいえ、どうしてもURIを変更しなければいけないときがある。そのようなときは、なるべくリダイレクトで対応するようにする。

## URIの設計テクニック
基本的にはURIに拡張子をつけるのは悪だとしてきた。けれども、 .ja .en　のように言語を分ける意味で拡張子をつけたURIの設計が良い場合などがある。
jschardetを使って、ファイルの文字コードを判断する

## 環境
node.js v16.14
Ubuntu 20.4

## はじめに
Node.jsでテキストファイルを読み込む場合、読み込み元ファイルの文字コードが、UTF-8以外のとき、全角日本語が文字化けすることになります。テキストファイルを読み込んだ後、ファイルの文字コードを判断できないだろうかと思って、調べていたところ、**jschardet**というライブラリを見つけたため、試してみることにした。

## 解説
用意したテキストファイルは以下の４種類です。４種類のファイルの読み込みは、関数の引数で判断させています。

- UTF-8
- UTF-16
- UTF-16BE
- S-JIS

ファイルの文字コードが、UTF-8以外であった場合、エラーと判断してコンソールログを表示します。

**jschardet.detect**に読み込んだファイルの内容を文字列で渡すと、**encoding**と**confidence**の２つのキーを持つ連想配列を返します。**encodeing**はライブラリが判断した文字列がセットされ、**confidence**にはライブラリーが判断した文字コードの正確さ加減がセットされます。**confidence**が**1**を返せば、結果は100%正しいと判断できますが、**1**以下を返せば、精度はどこまで信用できるか・・・という話になります。

## ライブラリのインストール

jschardetは、npmでインストールします。
```command
$npm install jschardet
```

## コード

```node.js
function check_file(flg) {

    var fs = require('fs'), fd;
    var jschardet = require('jschardet');

    var filnm = ["sample_utf8", "sample_utf16", "sample_utf16be", "sample_sjis"];
    var file = __dirname + "/端末ID/" + filnm[flg] + ".txt";

    var text = fs.readFileSync(file);

    // 文字コードがUTF-8(ascii)以外であればエラーにする
    if (jschardet.detect(text).encoding != "ascii") {

        let msg1;
        msg1 = "ファイルの文字コードがUTF8でないため開くことができません。" + "\n";
        msg1 += "ファイルの文字コードは、" + jschardet.detect(text).encoding + "です。";
        console.log(msg1);

        let msg2;
        msg2 = jschardet.detect(text);
        console.log(msg2);
        return;
    }

    console.log("OK! ファイルは、" + jschardet.detect(text).encoding + "です。");
}
```
[Webを支える技術] 第1部 WEB概論　個人的重要部分まとめ

# Webとはなにか

## Webの用途
リモコンやハードウェアの限定されたボタンで操作を行うよりも、pcのキーボードで操作した方が楽な場合にはWEBが用いられることがある。また、HTMLが編集ソフトなどによって記述しやすく、多様な環境でブラウザが利用できることも、WEBが用いられている理由である。
プログラム用APIとしてのWEBの用途もあり、言い換えるならば、プログラム用のインターフェース。

## Webを支える技術
Webを支える最も基本的な技術はHTTP、URI(Uniform Resource Identifier)、HTMLである。HTTPはメソッドが8つしかないないなど、Webはとてもシンプルな技術で作られている。
※URLはURIの一種。

WEBはハイパーメディア。テキストや画像、音声、映像などをリンクして結びつけたもの。線形的ではなく非線形的にユーザーが選択して情報を得られることが特徴。

WEBは大規模分散システム。プロトコルがシンプルであるが故に、大規模分システムとして普及した。

# Webの歴史

webがなぜこのようなアーキテクチャになっているのか。

## Web以前のインターネット。
初期のインターネットにWebはなかった。

## Web以前のハイパーメディア
- Memex
- Xanabu
- HyperCard

等のハイパーメディアの構想、システムがあった。そしてこれまでに最も普及したハイパーメディアこそがWeb

## Web以前の分散システム
RPCという分散システムがあった。現在でもNFS(Network File System)として使われている。ただし、接続する機械の数が決まっている環境に適した技術である。Webはインターネットを用いたハイパーメディアであるため、不特定多数の相手にした大規模分散システムとしてなりたっている。

## Webの標準化
とてつもない速度でWebが普及していく中、Webの標準化が求められた。W3Cという機関でHTML、XML、CSS、HTTP、URIなどの技術の標準化、RESTというWebアーキテクチャの提案などがあった。
RESTと異なるアーキテクチャとしてSOAPなどのアーキテクチャの提案などがあった。しかし、マッシュアップという様々なWeb APIを組み合わせて1つのアプリケーションを作る手法がWeb2.0では重要だったため、シンプルな実装であるRESTに軍配が上がり、RESTが普及していった。

# REST
## アーキテクチャスタイルとしてのREST
RESTはインターネットのアーキテクチャスタイル。現実的にはWebに用いられるのがほとんどなので、Web = RESTといっても差し支えはない。

## リソース
RESTではリソースにURIでアクセスする。

## RESTの構成
1. クライアント・サーバー
1. ステートレス
1. キャッシュ
1. 統一インターフェース
1. 階層化システム
1. コードオンデマンド

の組み合わせでRESTは成り立っている。必要に応じて、例えばコードオンデマンドはなくすが、他の要素はRESTに則って作っている場合でも、RESTを実装していると言える。
RESTを忠実に実装している状態をRESTfulといい、この状態のものが多ければ多いほどWebは全体的によくなる。
また、リソースをリンクで接続して1つのアプリケーションを構成するという考え方はRESTの基幹をなす構想で、接続性とも呼ばれている。
Lpic(OnVUE)をオンラインで受けてみた感想とアドバイス

Lpic(OnVUE)を受けました（オンラインのLpic）。

この記事ではその感想、注意点、アドバイスなどを話したいと思います。

これからlpic受ける方で、オンラインにしようかどうか迷ってる方はぜひ参考にしてみてください。

# 正直な感想

はっきり言ってひどい。

何がひどいかというと、文字の入力がスムーズにいかない。

オンラインチャットや記述形式の回答などで文字を入力する際、一文字を打ち込んで認識するのに5秒、一文字消すのに5秒かかる。

試験中にチャットを開くと試験監督が反応して「どうかしましたか？」と返してくるが、「やっぱり大丈夫です」って言いたくて文字を入力しようとしてもすぐに返信できない。

試験監督も心配して連絡？をかけてくる（コール音みたいのが鳴る）けど、どこからどうやってそのコールに出ればいいのか分からず、ただただ音に焦る（これは事前に確認しておかなかった自分が悪いな）。

スマホに着信きてるのかな？でもスマホは手の届かないとこに置けって言われてるし、触った瞬間たぶんアウトだろうし。

どうにかこうにか文字を打ち込んで返事ができた。

チャットに入力する時もなぜか全角↔半角の変換キー押してるのにうまく反応せず。

けっきょく日本人の自分が英語でチャットして、外国人の試験監督が日本語でチャットするっていう謎の状況に😓。

今回の場合記述式の回答といってもコマンド名一単語とか、比較的短い入力だったから1~2分しか（”も”だろ！！）かからなかったけど、ガチの記述式の問題だったら積みですわ。

やってらんないと思う。


選択形式の問題の回答や、「次へ」・「戻る」の動きはスムーズにいったから自分のネット環境が悪いわけじゃないと思う。

ちなみに試験を始める前に確認事項があって、それに同意したなら「同意しますを選択してください」っていうのがあったんだけど、それも反応がめっちゃ遅くて大変だった。

何しろそれを”５分以内で回答しないと即試験終了”だったから。

まさかLpicの問題一問も解かずに終了とか、まじでその可能性あったから焦った。

# オンラインでの試験監督は外国人？英語なの？

- 試験監督は外国人
- 言語は日本語

だった。

確か時間帯によって日本人か否かが決まってた気がするが、自分は午前に受けてこうだった。

チャットは問題ない日本語なんだけど、実際に電話してみたらけっこう辿々たどたどしい感じだったから、たぶん事前に用意されたテンプレか翻訳機使ってる。

多少英語できる人なら英語の方がスムーズにいくかもしれない。上で説明したように日本語の入力にも難ありだし。

言語に関しては申し込みの際に設定できる。

実は受験当日のご案内では”この試験の監督は英語のみで行われます”ってあったから英語喋る覚悟で挑んだんだけど当日は日本語喋ってくれた。

英語話すとはいえそこまで難しいこと話さないから言語の心配はしなくて大丈夫。

むしろ英語の方が色々とスムーズにいくんじゃ？

# 受ける前のアドバイス

## 手元に用意しておくもの

- 運転免許証やパスポート等の本人確認書類
- スマホ

試験を始める30分前からチェックインができる。

そこで自分の電話番号を指定するとスマホにメッセージとURLが送られてきて、そのURLを押すと向こうが用意したアプリが開く。

それで本人確認証の撮影、及びデスク周り（部屋全体）の写真を撮るように言われる。

だから上記の２つを手元に置いておく。

これらの工程が終わるとスマホを手の届かないとこに置くよう指示される。

## 身の周りのものは綺麗さっぱりどかす

とりあえず受験するパソコンの周りのものを全てどかす。

始まる前にやっておかないと無駄に時間かかって焦る。

びっくりしたのが**電気スタンドをどかしてくれ**と言われたこと。

「無理なら布で覆って隠して」と言われたから、メッチャ埃被ってるとこに被せるのすごい抵抗あったけどしょうがないから被せた。

before:
![before-2048x1152.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/3bfaf03e-1d8b-e65b-de67-f1468e6507e5.jpeg)

after:
![after-2048x1152.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/1f70087a-e45d-827f-1d04-2b733464a1b7.jpeg)

あとカメラで部屋の中360°映すように言われる。

だからあらかじめデスク周りのものは綺麗さっぱりどかしておくべき。

## 誰かに話しかけられてもダメ – かなり厳重なルール

「話しかけてこないでね！！」って家の人に言っておこう。

誰かに話しかけらたら試験終了。

あと口を手で覆い隠すのもダメ。

あくびはカメラの前で試験監督に見せつけるスタイルで🥱（←これダメ）。

チャットや連絡に反応しないのもアウト。

だったけど自分は上で説明したようにどこからコールに出ればいいのかわからんし、まともに字が入力できないからこのルールには違反してた思う。

実際、何回かコール無視したし。

だからこれは脅し程度で、オンラインだからそれくらい厳重ということ。

そこまで神経質にならなくても平気。

# 最後に

会場に足を運ぼう

これが今一番言いたいこと。

上で長々と書いたけど、とりあえずこれが伝えたいこと。

でも自分みたいに直接行くのがかったるい人は、上で話したことを覚悟した上でオンラインで受験しよう。
透明なpng画像で背景画像を切り抜く方法　photoshop2022

素材サイトなどでpng形式の画像を持ってきて、その形で風景の画像などを切り抜く方法。

切り抜きたい形がベクトルデータなどならば、方法が色々書いてあったが、pngのときはどうすればいいか迷ったのでメモ

![22599022.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197731/72b642f2-5d95-09dc-423f-e92b21719fd9.png)

この画像の形で、
![23690743_l.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197731/b6ea7ac0-3768-947d-3e06-2ec77d6bba27.jpeg)

この画像を切り抜きたいとする。


フォトショップでは

![スクリーンショット 2022-05-10 16.26.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197731/5e6f179a-f885-e78c-bd66-af077ca6a03e.png)

形のpngファイル→切り抜きたい画像ファイルの順番にレイヤーを重ねて

切り抜きたい画像(上のレイヤーの方)で右クリック
![スクリーンショット 2022-05-10 16.27.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197731/d2304f21-5aea-a45d-16ca-5bf9a4479b0d.png)
クリッピングマスクを作成

を選択すると、求める画像ができた。
続 JSON をクラスにバインドする (C#)

# 続 JSON をクラスにバインドする (C#)

\# 以下の記事が書かれた時の版数は .NET Core 3.1 (3.1.24) となります.

過去に `DataContractJsonSerializer` で書いた [JSON をクラスにバインドする (C#)](https://qiita.com/c-yan/items/9a6a5c1f59526c1a1ff2) を `System.Text.Json` で焼き直し.

JSON を C# のクラスにバインドする. まずバインド先のクラスを作る. 都合により Azure AD のレスポンス.

```csharp
using System.Text.Json;
using System.Text.Json.Serialization;

namespace ConsoleApp1
{
    public sealed class AzureADResponse
    {
        [JsonPropertyName("token_type")]
        public string TokenType { get; set; }

        [JsonPropertyName("scope")]
        public string Scope { get; set; }

        [JsonPropertyName("expires_in")]
        public int ExpiresIn { get; set; }

        [JsonPropertyName("ext_expires_in")]
        public int ExtExpiresIn { get; set; }

        [JsonPropertyName("access_token")]
        public string AccessToken { get; set; }

        [JsonPropertyName("refresh_token")]
        public string RefreshToken { get; set; }

        [JsonPropertyName("id_token")]
        public string IdToken { get; set; }
    }
}
```

後は Azure AD のレスポンスの文字列が変数 s に入っているとすれば、以下でバインドできる.

```csharp
JsonSerializer.Deserialize<AzureADResponse>(s);
```
【合格体験記】【GCP】実務未経験・１ヶ月半でGoogle Cloud Professional Data Engineer認定資格合格

## 筆者について
文系出身で、新卒から1年半ぐらいデータサイエンティストとして働いたが、データエンジニアの仕事も興味を持っているため、Google Cloud Professional Data Engineer認定資格の勉強を始めました。
この前にGCPのAssociate Cloud Engineerは何もわからない状態で受験したが、普通に落ちました。GCPに対しての知識は「こういうサービスがあるんだ」だけのレベルです。

## 資格について
公式サイト：https://cloud.google.com/certification/data-engineer?hl=ja
出題範囲：https://cloud.google.com/certification/guides/data-engineer?hl=ja
試験申し込み：https://www.webassessor.com/googlecloudjp

## 教材について
- テキスト
    - Google Cloudではじめる実践データエンジニアリング入門
    - Official Google Cloud Certified Professional Data Engineer Study Guide

１、一番読みやすいのは「Google Cloudではじめる実践データエンジニアリング入門」でした。まずは全面的サービスを把握したいお方はこちらおすすめです。
２、公式ガイドブックの「Official Google Cloud Certified Professional Data Engineer Study Guide」は英語のため読み難いでした。その代わりに
公式ドキュメント：https://cloud.google.com/docs?hl=ja
の方が良いかもしれないです。しかしボリュームが大きくて、補足のため利用しました。

- コース
    - Coursera：Google Cloud 認定の準備: クラウドデータエンジニア プロフェッショナル認定証 日本版
    https://ja.coursera.org/professional-certificates/gcp-data-engineering-jp
    - Qwiklabs：Preparing for the Google Cloud Professional Data Engineer Exam 日本語版
    https://www.qwiklabs.com/course_templates/112?catalog_rank=%7B%22rank%22%3A1%2C%22num_filters%22%3A0%2C%22has_search%22%3Atrue%7D&search_id=16676828

３、Courseraのコースが一週間無料キャンペーンがあって、無理やり全て見ましたが、ちょっとキツイだと思います。
４、Qwiklabsは実践的なコースなので、実際にGCPサービスを触りたい方はこちらです。


- その他読み物
    - スケーラブルデータサイエンス データエンジニアのための実践Google Cloud Platform
    - 実践的データ基盤への処方箋〜

５、実際にサービスを利用して、データを操作したのは「スケーラブルデータサイエンス データエンジニアのための実践Google Cloud Platform」ですが、自分が最後まで読み切れなかった。
６、データエンジニアがわからない、役割を理解したいため、合格後の読み物「実践的データ基盤への処方箋〜」です。

## 受験準備
- 公式模擬試験
https://cloud.google.com/certification/data-engineer?hl=ja#:~:text=3.%20%E6%A8%A1%E6%93%AC%E8%A9%A6%E9%A8%93-,%E6%A8%A1%E6%93%AC%E8%A9%A6%E9%A8%93%E3%82%92%E5%8F%97%E3%81%91%E3%81%A6,-%E3%80%81Data%20Engineer%20%E8%A9%A6%E9%A8%93

公式サイドの下にあるリンクで受けることです。何回繰り返しでも同じ問題なので、理解を深めるために利用しました。試験準備としては足りないと思います。

- Examtopic
https://www.examtopics.com/

英語サイドなので読み難いですが、試験と全く同じ問題が出るので、２回ぐらいやりました。

## まとめ
資格だけでは足りないで、実務経験がやはり大事ですね。
自分の学習スケジュールは：１ヶ月でテキストを１回＋Coursera、半ヶ月Qwiklabsやったとき関わるドキュメントを読んで、受験一週間前模擬試験をできる限りやりました。
スタティックルートを設定する

Windows,LinuxのOSでスタティックルートを設定する

・Windows
```
route print -4
```
で、現在のルーティングテーブル（ipv4）が見れます
```
C:\>route add <network> mask <subnetmask> <next-hop> [-p]
```
```
-p
```
は、永続的に設定を保持するオプションです

・Linux

https://atmarkit.itmedia.co.jp/ait/articles/1710/13/news013.html

を参照。

```
route add 宛先IPアドレス gw ゲートウェイのIPアドレス インタフェース
```

CentOS7以降は、nmcliコマンドでもできるようです

http://hp.vector.co.jp/authors/VA022911/tec/centos/routeadd.htm#




わかんないことだらけでおちこむこともあるけど、どうにかやっています。
しば犬なりに、やっています。
Lpic level1はスピマスだけで余裕だった

Lpic level1(101)を合格しました（750点/800点）。
![score_101.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/1411b900-4779-dbf4-293f-3620a90705cf.jpeg)

実際に受けてわかったのが、**スピードマスター問題集だけで十分合格できる**。

今回はスピマスだけで合格は余裕、そしてスピマスの問題的中率がエグいことをお伝えします。

# とにかく問題的中率が半端ない。

まじでほとんど同じなんじゃないか？！っていうくらい、スピマスにあった問題と同じような問題がけっこう出る。

一問10秒かからないペースでバンバン解いて、けっきょく60問解き終わった時点で1時間は残ってた。

ある程度自信ついたら受けた方がいい。

自分も「たぶん受かるだろっ」くらいの感じで謎に自信あったから受けたら余裕だった。

一週間先延ばしにして無駄に時間かけなくてよかった。

# 少なくとも3周はすべし – スピマスの具体的な使い方

スピードマスター問題集にある問題は**宝**だと思って解きまくる。

101（または102）の部分を3周もすれば十分。

特に、模擬試験の部分はゼッタイに3周しておいた方がいい。

合わせて小豆本の模擬試験も3周しとく。やっぱり模擬試験と言っているだけあって良問が揃ってる。それを身につけておかないともったいない。

繰り返すけど、スピマスの問題そっくりな問題が本番でも出る。

Lpic受かりたいなら演習はスピマスだけで、最低3周はすべし。

# Ping-tはまじで不要

自分は一切Ping-tをやらずに750点取れた。

見たこともないからPing-tがどんな問題を出してるのか知らんけど、とりあえずスピマスの問題を解いて、解説及びそこに書いてある周辺知識を理解しておけば合格は余裕。

確かに、「スピマスは解説が難しい」みたいなこと聞くし、実際に解説の内容が濃い。

でも上で言ったように3周すれば理解できる。

スピマスの解説を理解して、かつ問題もほぼ完璧に解けるようになれば本番へGo！

それ以上勉強するのは時間がもったいない。102もまだ残ってるし。

# （おまけ）試験受けてる時の俺の感情

試験やってる時は「合格できるか？」じゃなくて「満点とれるか？」っていう感情だった。

まじで余裕すぎて即行でTwitterに満点のスコアレポート載っけてやろうかと思った。

:::note warn
オンラインでLpic受けるとすぐにスコアレポートがでない可能性がある。自分の場合、試験が終わってから数時間経ってやっと表示された。オンラインでLpic受けようと思ってる人はそれで焦らないように。
:::

感覚的には満点とった気分だったから、結果の750点には正直50点も落としてびっくりしてる。
Ports are not available: listen tcp 0.0.0.0:3306が出てdocker compose upに失敗した際の対処法


## エラー内容

`docker compose up`を実行すると、以下のエラーがでました。

```
ERROR: for db  Cannot start service db: Ports are not available: listen tcp 0.0.0.0:3306: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.
```

エラー文を見る限り、3306ポートが使えないというエラーのようです。

ちなみに、docker-compose.ymlは以下です。

```docker-compose.yml
services:
  db:
	(中略)
    ports:
      - 3306:3306
```

## 試したこと

以下文言で検索

```
Ports are not available: listen tcp 0.0.0.0:3306
```

以下の記事にたどり着き、原因が判明しました。
https://stackoverflow.com/questions/64307077/docker-compose-only-one-usage-of-each-socket-address-protocol-network-address


## 原因

> Port 3306 is already in use.

ポートがすでに使用されているため使えないということらしい。

## 解決策

ポート番号を3306以外にすれば良さそう

```docker-compose.yml
services:
  db:
	(中略)
    ports:
      - 3366:3306 ★ 3306とは別のポートを指定してあげる
```

## 結果

再度`docker compose up`を実行すると、エラーが出なくなりました。

## 参考
- https://stackoverflow.com/questions/64307077/docker-compose-only-one-usage-of-each-socket-address-protocol-network-address
[備忘録]PUGをいじっててハマったところ

<h1>[備忘録]PUGをいじっててハマったところ</h1>
<p>最近,HTMLタグを書くのが億劫になってきたのでPUGを使い始めました。</p>
<p>pugを使っているときにハマったところがあったのでここにまとめていきます。</p>

>環境  gulp
>- CLI version: 2.3.0
>- Local version: 4.0.2

<h2>PUGの変数名に"-"(ハイフン)を使ってはいけない</h2>
<p>HTMLを生で書いていたとき,記法を一切意識せずに変数名は"_"(アンダーバー)や"-"(ハイフン)をごちゃ混ぜで使っていました。その流れでPUGも使っていたのですが..

```:PUG

- 
  var box-A = "hello"
  var box_B = "world"

#div-1
  p #{box-A}
  p #{box_B}

```

<p>結果コンパイルエラーが出ました。

```
Message:
    Error parsing body of the with expression
```
<p>原因は変数名に"-"(ハイフン)を使っていた事だったのですが,意外に時間をもっていかれました。<br>検索していても似たような状況がないため変数名にハイフンを使うのは私ぐらいしかいないのだなぁと痛感,即スネーク記法に統一しました。

<h2>imgタグとインデント</h2>
<p>PUGはHTMLのタグの代わりにインデントを使って要素を記述をします。
これによってついつい私がやってしまうミスが以下のコードです。</p>



```:PUG

- 
    var box_A= "a"
    var box_B= "b"
    var box_C= "c"


#div_1
  .div_1
    p #{box_A}
      .div_2
        p #{box_B}
          .div_3
            img(src="#")
              .div_4 
                p #{box_C}
```

<p>このコードをコンパイルすると,当然エラーになります。<p>

```
img is a self closing element: <img/> but contains nested content.

```
<p>改行+インデントで子要素の指定が出るのですが,imgなどのように閉じタグのいらない要素にもついついやってしまうことが未だにあります。<br>
これは単に私がPUGに慣れていないが故のミスですね。
Next.jsの備忘録

## 前書き


### Object.values(hoge)

```

const numbers=[1,2,3]

console.log(Object.values(numbers))


///実行結果
[1,2,3]


```

### Array.prototype.some()
オブジェクトの中身をいじるのに使うもの。everyと違って、何個かに適用されるのみ。

``` 
//書き方

const numbers=[1,2,3]

 const textCheck = () => {
    if (Object.values(numbers).some((number) => (return(number*2))))
  }

```

### Array.prototype.every()
オブジェクトの中身をいじるのに使うもの。someと違って、全てに適用される。

``` 
//書き方

const numbers=[1,2,3]

 const textCheck = () => {
    if (Object.values(numbers).every((number) => (return(number*2))))
  }

```

## if文、三項演算子、switch文
```
const hogehoge =(numbers)=>{

const numbers=[1,2,3]

return(
<div>

//三項演算子
 <p>
  {numbers.[1] === 1 ? first:'others'}
 </p>
 <p>
  {numbers.[0] === 1 ? first　: numbers.[1] === 2 ? second : numbers.[2] === 3 : third}
 </p>

//if文とswitch文
 <p>
  {(()=>{
    if(numbers === 1){
     return('first')
    }else{
   return('others')}
  }}
  {(()=>{
    switch(numbers){
     case '1':
       return('first')
     case '2':
       return('second')
     case '3':
       return('third')
      }
   })()}
 </p>
</div>

)}
```


追記中...
不正なURLの作成

EvilURL：

https://github.com/UndeadSec/EvilURL

なんだかそのままだとpythonに関するエラーが出てしまう（少なくとも自分の環境では）。

なのでシェバンをpython3のそれに書き換える

```
#!/usr/bin/env python3
```

パッケージのインストールにもpipではなくpip3を使う

```
pip3 install python-nmap python-whois
```

今回は**instagram.com**を不正なurlに変換してみる。

まず`-g`で生成。`-c`を指定することにより、作成した不正なドメインが現時点でconnection downであることを確かめる。
![scsh1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/7bd8eb72-8afa-fe79-fb88-3dc342005bb6.jpeg)

さらに-`a`を指定して、作成された不正なドメインが利用可能か？をチェック
![scsh2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/fc684374-def7-7ff3-c273-6663e334d26c.jpeg)

試しに一番上に表示されてる、 ‘a’ を置き換えたやつを[namecheap](https://www.namecheap.com/)で検索してみると確かにavailable👇（左は正規のinstagram.com）。
![namecheap1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/4c7e35aa-d8af-304c-a61e-87c6c989f235.jpeg)

見た目が全く同じだが、確かに異なることが次のように`-f`オプションで確認できる。

まずcheck.txtを次の内容で作成する
![checktxt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/07ef2f93-23fd-261d-18d6-44a95593e85d.png)

上がevilurlで生成された不正なやつで下が正規のもの。

次のように`-f`オプションでこのファイルを指定して実行する：
![scsh3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/e52c9dda-2327-5934-beac-2de2d357c53e.jpeg)

check.txtにおいて、不正な方を正規のものより上に書いたから、先にそれが不正であることがdetectされた（つまり正規のものをcheck.txtの上に書いて、不正なものを下に書けば「Evil URL NOT detected: instagram.com」の結果が先に表示される）。

この不正なurlを検索しようとすると次のように表示される：

![scsh4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659122/6b982f50-53ff-7392-b930-342f0c5ef9a7.png)

つまりアタッカー側はhttp\://xn--instgrm-5fgc.com/で待ち構えておけばよい。
人に興味がなかったけど面接してみた

「面接やってみます？」とお声をかけていただき、不安と緊張が混じりながらも挑戦したお話しをしたいと思います。
​
正直なところ、私自身は人に対してそこまで興味がありませんでした。
​
求人対応を手伝っていた為、応募者とのメッセージのやりとりはしていましたが、履歴書に目を通しても書いてある通りなんだなあ、とそれ以上何も思うことがありません。
​
それどころか、おそらく他の企業に応募している内容と変わらないだろうし 「**この会社じゃなくても入社できたら良い**」くらいに思っていそうだなあ、などマイナスなことを考えるほうが多かったです。
​
## なぜ面接官に挑戦したのか？
理由はシンプルで、**やらない後悔より<font color="red">やる後悔</font>をしたい**からです。
​
まずはベテランの方に同席する形で面接を実施しました。メインで進めることはなく、基本的には話をじっと聞いています。
​
質問があればしても大丈夫ですが最初は全然しませんでした。
​
何度か同席での面接を実施しているうちに、それまで懸命に覚えようと聞いていた状態から「**次はこの説明をして、質疑応答だな**」とわかるようになってきました。
​
流れをつかむと気持ちに余裕ができ「**応募者はこんなこと書いていたし、話していたけど、実際どうなんだろう？**」と
思うようになってきました。
​
最終的に「応募してきた相手を知ってみたい」という気持ちから質問できるようになっていました。
​
同席してくれたベテランの方から、「質問の内容、良いですね！」を言っていただきました。
これが私にとってはすごく嬉しく、面接に対してポジティブになれる出来事でした。
​
面接の流れそのものはテンプレートがあれば、ある程度誰でもできると思っています。でもテンプレートにはない項目が私には不安要素だったのです。
​
当初「人に興味もないし、うまくできるのか」と思ってしまった理由はそれだったんだなとわかり、色々考えていた面接でしたが実際はシンプルなのかも、と思いました。
​
## 応募者と話すときに大事にしたいこと
​
相手がどんな人なのか、本来の姿を知ることです。
相手を応募者としてみるのではなく**一人の人間**としてみるように心がけています。
​
履歴書の内容から読み解く情報や、実際に会って話してみた印象などの情報はもちろん必要ですが、**この方と一緒に働きたいと思えたかどうか**を重視していきたいです。
​
人に興味がなかったのに矛盾しているなと思いますね。
でも面接したことがない、人に興味がない方でも、
繰り返し面接をやってみることでこんな風に考え方が変わるかもしれません。
【C言語】構造体の宣言と型変換

### 構造体の宣言

基本形は以下のようになる。

```c
struct Hoge {
    int a; 
    int b;
    int c;
};
```

このとき宣言した構造体の変数宣言は以下のようになる

```c
struct Hoge hoge;
```

### 構造体の型変換
いちいち`struct`を付けるのは面倒なので、Javaのオブジェクト宣言のように、型は`Hoge`と書くだけで宣言できるようにしたい。先述した構造体を型変換するならば、以下の様に記述すれば、

```c
typedef struct Hoge Hoge 
```

以下のように変数を宣言できる。

```c
Hoge hoge;
```

### 構造体の宣言と型変換を同時に行う
以下のように宣言すれば良い

```c
typedef struct {
    int a; 
    int b;
    int c;
} Hoge;
```

もちろんこのとき、変数宣言は以下のようになる

```c
Hoge hoge;
```
【java】javaにおける2次元の連想配列を作成 

他に2次元の連想配列のやり方を知っている人がいたらご教授ください

# コード

```java
import java.util.HashMap;
import java.util.Map;
class Main {
	public static void main(String[] args) {
        Map<Integer, Map<String,Object>> map = new HashMap<Integer, Map<String,Object>>();
        map.put(1, new HashMap<String,Object>());
        map.get(1).put("名前","田中");
        map.get(1).put("国語", 33);
        map.get(1).put("数学", 10);
        map.put(2, new HashMap<String,Object>());
        map.get(2).put("名前","高橋");
        map.get(2).put("国語", 63);
        map.get(2).put("数学", 62);
		System.out.println(map);
	}
}
```
# 結果
```
{1={名前=田中, 国語=33, 数学=10}, 2={名前=高橋, 国語=63, 数学=62}}

```


# コード

```java
import java.util.*;

public class Main {
    public static void main(String[] args) {
        Map2d<Integer, String, Object> map = new Map2d<>();
        map.put(1, "名前", "田中");
        map.put(1, "国語", 33);
        map.put(1, "数学", 10);
        map.put(2, "名前","高橋");
        map.put(2, "国語", 63);
        map.put(2, "数学", 62);
        System.out.println(map);
        System.out.println(map.get(1, "数学"));
        System.out.println(map.get(1, "理科"));
        System.out.println(map.get(3, "国語"));
    }
    
    
    static class Map2d<K1, K2, V> {
        Map<K1, Map<K2,V>> map = new HashMap<>();
    
        public void put(K1 k1, K2 k2, V v) {
            map.computeIfAbsent(k1, k -> new HashMap<>()).put(k2, v);
        }
    
        public V get(K1 k1, K2 k2) {
            return Optional.ofNullable(map.get(k1))
                .map(s -> s.get(k2))
                .orElse(null);
        }
    
        @Override
        public String toString() {
            return map.toString();
        }
    }
}

```
# 結果
```
{1={名前=田中, 国語=33, 数学=10}, 2={名前=高橋, 国語=63, 数学=62}}
10
null
null

```
指数バックオフ

google.api_core.retry を使って指数バックオフを行う方法

正直なところ、これで良いのかちょっとわからない。

# ロジックでやりたい場合

```python
from google.api_core.exceptions import TooManyRequests
from google.api_core import retry

_BACKOFF_DURATION = 200

@retry.Retry(predicate=retry.if_exception_type(AssertionError), deadline=_BACKOFF_DURATION)
def example_function():
		[なんか処理]
    if [指数バックオフでリトライしたい判定]:
        print('失敗')
        raise AssertionError('失敗')
```

# GoogleCloudStorageでやりたい場合

GoogleCloudStorageにアップロードする場合、頻繁にするとTooManyRequestsが発生してしまうので、その場合は指数バックオフでリトライする

※このサンプルプログラムだと頻繁にアップロードにならないけど…

```python
from google.cloud import storage
from google.cloud.storage.retry import DEFAULT_RETRY

_BACKOFF_DURATION = 200

def create_blob(bucket_name, file_name):
	client = storage.Client()
	bucket = _client.bucket(bucket_name)
    upload_blob = bucket.blob(file_name)
		return upload_blob

def upload_from_filename(upload_blob, file_name):
    # Customize retry with a deadline of 200 seconds (default=120 seconds).
    modified_retry = DEFAULT_RETRY.with_deadline(_BACKOFF_DURATION)
    upload_blob.upload_from_filename(file_name, retry=modified_retry)

if __name__ == '__main__':
    args = sys.argv
    if 3 <= len(args):
        if args[1].isascii:
            bucket_name = args[1]
            file_name = args[2]
        else:
            print('Argument is not bucket name')
            exit()
    upload_blob = create_blob(bucket_name, file_name)
	upload_from_filename(upload_blob, file_name)
```

# 参考

[google-api-core](https://googleapis.dev/python/google-api-core/latest/retry.html)
[google-cloud-storage](https://googleapis.dev/python/storage/latest/blobs.html#google.cloud.storage.blob.Blob.upload_from_file)
[再試行方法 | Cloud Storage | Google Cloud](https://cloud.google.com/storage/docs/retry-strategy?hl=ja#client-libraries)
Seleniumで起動中のChromeを直接操作する方法

# はじめに

[Selenium](https://www.selenium.dev/)で自動テストを修正/実装していると、該当の処理にたどり着くまで時間がかかる場合があります。
そんなとき、今手元で開いているブラウザの画面から直接動作確認できれば作業効率が少しあがりますよね。
今回は、Seleniumで開いているChromeブラウザを直接操作する方法を記載します。

# 前提条件

|項目|内容|
|:--|:--|
|プログラミング言語|Java|
|OS|Mac・Windows|

|使用ライブラリ|バージョン|
|:--|:--|
|Selenium|4.1.4|
|WebDriverManager|5.1.1|

# 手順

## ブラウザの起動（Mac）

ユーザプロファイル保存用のフォルダを作成。

```
$ mkdir ~/Documents/chromedata
```
 
portと作成したフォルダを指定し、Chromeを起動。今回はport=9222を指定。

```
$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -remote-debugging-port=9222 --user-data-dir=~/Documents/chromedata
```

## ブラウザの起動（Windows）

ユーザプロファイル保存用のフォルダを作成。

```
> mkdir C:\chromedata
```

portと作成したフォルダを指定し、Chromeを起動。今回はport=9222を指定。

```
> "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -remote-debugging-port=9222 --user-data-dir=C:\chromedata
```

## 実行

使用ライブラリ（gradleを使用）

```gradle
dependencies {
    implementation 'org.seleniumhq.selenium:selenium-java:4.1.4'
    implementation 'io.github.bonigarcia:webdrivermanager:5.1.1'
}
```

実際に以下のソースコードを実行すると、事前に起動していたChromeに対して直接操作することができました！

```java

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class Sample {

  public static void main(String[] args){

    //ChromeDriverの起動設定
    WebDriverManager.chromedriver().setup();
    ChromeOptions options = new ChromeOptions();
    options.setExperimentalOption("debuggerAddress","localhost:9222"); //port番号を指定
    WebDriver driver = new ChromeDriver(options);

    //操作
    //事前に起動したChromeでURLを開いておくと、URLを開く操作を記述しなくても次の操作が可能
    //driver.get("https://www.humancrest.co.jp");
    driver.findElement(By.xpath("//*[@alt=\"リグレッションテスト自動化サービスLynx\"]")).click();

  }

}

```

# 最後に

いかがでしたでしょうか。
Seleniumでテストを書いている方の作業が少しでも簡単になれば幸いです。

# 参考

* [SeleniumのChromeDriverで起動済みのブラウザを操作する](https://qiita.com/yk109/items/6cab9564d1844d272a8c)
【入門】セグメントルーティング概要

## セグメントルーティング（SR）をアウトプットするきっかけ
  　こんにちは。某キャリアでネットワークエンジニアをやっているだいまるです。今回、様々なサイトでアウトプットを行ない、自分自身の知識・スキル向上を行いたいため、投稿させていただきます。今後、セグメントルーティングの１つである「**SRv6**」についてアウトプットしていきたいと思います。

## セグメントルーティングとは
　最近、モバイルやデータセンタ関連で流行りのセグメントルーティングですが、実際どういった技術なのか詳しく知っている人は少ないと思います。そもそも、セグメントとは、英語の意味を調べると「**区切り**」や「**区分**」などのような**１つの集合体**を示すような用語が引っかかります。
　この意味からも想像ができるように、セグメントルーティングとは、「**送信元から宛先まで１つの集合体として区別し、ルーティングを実施する**」といった技術になります。詳細には、**ルーティングの途中にあるノードや終点ノードでの動作を視点で指定し、パケットを送信することが可能となる技術**のことを指します。
　
　下記の図のように**設計者・開発者が意図した経路や遅延が少ない経路でパケットを送信することが可能となる技術**が「**セグメントルーティング**」となります。

![Screen Shot 2022-05-10 at 14.32.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/5febeaa5-c087-acb5-c173-f7a7036ba349.png)

## セグメントルーティングの背景・利点
　　このセグメントルーティングが導入される背景としては、従来のネットワークでは、OSPFやIS-ISのコスト・メトリック（距離みたいなもの）に影響され、最短経路でパケットを送信しておりました。
　しかし、5Gが普及し始めている昨今、遠隔手術や自動運転など通信の遅延が許されないようなサービスや特定の経路を通る必要が出てくるサービスが生まれることが予想されております。そのような背景から今後説明予定のSRv6などのセグメントルーティングが必要となります。

![Screen Shot 2022-05-10 at 14.40.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658685/81fbf2da-4725-a7af-67e3-db8a0a35c7b5.png)

## セグメントルーティングが利用されているネットワーク
　簡単に説明してきましたが、実際利用されているのはモバイルネットワーク（Softbankや楽天、KDDI等）を始め、データセンタネットワーク（LINE等々）で利用されている技術となります。
[Python] DynamoDBをLambdaから使ってみる

# はじめに

Boto3の公式ドキュメントを参考にしてLambdaからPythonを使ってDynamoDBを読み書きしてみます。

https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/dynamodb.html

https://boto3.amazonaws.com/v1/documentation/api/latest/guide/dynamodb.html

## DynamoDBでテーブルの作成

テーブル名とパーティションキーだけ指定して作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/5777a24b-542f-2bac-8ac7-f0f5a7231963.png)

## Lambdaで権限設定

実行ロールをクリックして編集します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/f6e0eb17-e4ad-5fbd-5f40-b17312c50e9a.png)

今回は割当てているロールにAmazonDynamoDBFullAccessのポリシーを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/ab61a381-08db-0370-b2f7-30b2fe7e836a.png)

## Lambdaから項目（レコード）追加

LambdaにBoto3ライブラリを使った以下のコードを記述します。

```python
import boto3

dynamodb = boto3.resource('dynamodb')

def lambda_handler(event, context):

    table = dynamodb.Table('dns-a')

    table.put_item(
    	Item={
    		"fqdn": "dns.google.com",
    		"ipaddresses": ["8.8.8.8", "8.8.4.4"],
    		"timestamp": "2022/05/10 09:00:00"
    	}
    )

    return
```

保存・Deploy後にテスト実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/bf764c83-bdaf-fa19-8ffd-00b36e423ab0.png)

うまく動作するとテーブルにアイテムが追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83224/b4a2f803-b914-e6f9-8a24-abb10bea8415.png)

なお同一パーティションキー（今回はfqdn）が存在する場合は、エラーとならず更新処理が行われます。

以上。
居ないはずの人のspoolが更新されている話（5/12改題）→解決したかも？（7/22)

メールが無限に転送しようと頑張ってるエラーの対応中に見つかった。（まだ解決してない）
一旦保留したいのでspoolについてメモ。

# 事件発覚

1, メールの転送設定を確認しようとした（多すぎて別の方法を模索した

2, とにかく居ない人のアカウントを消せばいいんじゃないかとspoolを確認した
コマンドは
```
ls -alht /var/spool/mail
```
とした。これで/var/spool/mail以下のディレクトリをMbyte, Gbyte表示で（ls -h）、更新日時順（ls -t）に、隠しファイルも含めて（ls -a）、詳細を表示（ls -l）できる。

3, 既に無いアカウントに今日の日付でspoolが更新された跡がある（？？？）


# 今後の方針
・明日まで様子見する。それで日時が更新されてるか確認する
・とりあえず削除済みのアカウントについて/var/spool/mail以下のディレクトリを消す。
・なんだ


# 5／12追記
### 日時更新されてんねえ
仕方ないのでspoolとかの仕組みから勉強しないとダメそう。
次回（未定）に続く

# 7/22追記
パーミッションがなかった説。
復活したspoolディレクトリ内のファイルを見てみると、グループのパーミッションが---だった。
加えて所有者のグループがmail以外になってた。
とりあえずrw-と所有グループをmailに直した上で削除。
月曜まで様子見。
開発時のgit関連でやることまとめ


## はじめに
開発時にgit関連でやることを良く忘れるので、以下に整理しておきます。

## 開発前
リポジトリをクローンする
```bash
git clone リポジトリURL
```

フォルダを移動する
```bash
cd リポジトリ名のパス
```

developブランチに変更する
```bash
git switch develop
```

リモートリポジトリ名のリネームする
```bash
git remote rename origin fork-master
```

リポジトリをフォークし、リモートリポジトリ名originとして紐づける
```bash
git remote add origin フォークしたリポジトリURL
```

フォークしたリポジトリにメンバーを追加する
(レビューしてもらう際に他メンバーがリポジトリを閲覧できるようにするため)

リモートリポジトリの状態を確認する
```bash
> git remote -v
fork-master リポジトリURL (fetch)
fork-master リポジトリURL (push)
origin  フォークしたリポジトリURL (fetch)
origin  フォークしたリポジトリURL (push)
```

ブランチを作成して作業開始する
```bash
git switch -c 新ブランチ名
```

## 開発後

変更ファイルをステージングする

```bash
git add .
```

コミットし、コミットメッセージを入力する
```bash
git commit
```

差分を念のため確認する

```
git diff 新ブランチ名 develop
```

pushする
```
git push origin 新ブランチ名
```