OmniAICreator/Qiita-1.07M huggingface dataset:
【GCP】GCEでインスタンスを起動

AWSでEC2を立てたことは何度もあるので、その辺との違いを意識しながら起動しました。

特に作成時に難しいと感じるところはなかったです。

VM起動　＞　インスタンス作成　＞　上から順に設定

ファイアウォールの設定はHTTPを許可するようにしておけば、接続は問題ない。
SSHもできる。

【疑問点・気づき】
・VMを作成するところのインポートはどんな機能？
・料金が横に出てくる。3100円くらいだった。
・ブートディスクを色々選べた
・AWSよりもシンプルでわかりやすい。
・一つのカギを登録しておけば、複数のインスタンスにログインできるところは便利かも

【エラー】
The zone 'projects/our-lamp-272013/zones/asia-northeast1-b' does not have enough resources available to fulfill the request. Try a different zone, or try again later.
インスタンス作成後、上記のエラーがでた。

東京リージョンの「asia-northeast1-a、asia-northeast1-b、asia-northeast1-c」が比較的不安定だそう。

noticeから再試行を押せるようにはなっていたので、5分後に数回ためしてみたがエラーは改善されず。
何度やってもエラーになるので別リージョンで作りなおしたほうが早いです。
このエラーが出ると、作成したインスタンス一覧にも表示されなかったです。

試しに6時間くらい放置して再試行したら作成できました。
タイミングの問題ですね。

【参考サイト】
https://www.topgate.co.jp/gcp03-google-compute-engine-launch-instance

https://saba.omnioo.com/note/5042/cgp-vm%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%8C%E4%BD%9C%E6%88%90%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84/
これを知っておくと多少は困らない！？プログラミングをしてみたい！と思ってる初心者くんは読んでみよう！

これはプログラミングを全くやっていない人向けの記事です。
自分もまだ不慣れのところがあって説得力がないと思うですが、書きたいと思ったので書くことにしました。
所々誤字があるかもしれませんが、どうか暖かい目で見てください。

# プログラミングをやる前に
まずプログラミングに必要な知識は「自分で調べる」「プログラミング言語の大体の機能を把握」「英語を少しだけ読める」です。
よく自分が見かける例では、調べずにすぐ人に聞く人が多いです(自分もそうだった)、なので多少は調べるっていう知識を身につけといた方が「ちゃんと調べてる?」とか言われなくなります。
**プログラミング言語はいっぱいあるので自分に合った言語を選びましょう。**
(自分のおすすめはpythonとJavaScript(nodejs)です)

## 1.調べる方法
googleなどで「言語名 分からないところ」で調べれば候補がいっぱい出てきたりします、Stack Overflowやこのサイトとかでのってたりします。

## 2.人に聞く方法
1でもわからなかった場合、stack overflowなどで聞いてみるのも良いでしょう、
ですが聞きすぎるのは良くないです。

# gitで公開する際の注意
よくやらかしてる人が多かったりするので書いておきます。
(自分も2回ぐらいやらかしてたことがある)

公開する時はDiscordBOTのトークンやその他APIのシークレットトークンを公開しないようにしましょう。
~~公開したら悪いおじさんたちにAPIを犯されちゃうゾ☆~~
(本当にgithubに公開する時は.gitignoreにトークンのファイル(.envとか)に書こうね)
あとは.gitignoreは絶対に必要になります。

```:.gitignore
tokenfile
/node_modules/*
```

みたいな感じでgithubなどに公開したくないファイルなどを書いといた方がいいです。

# ドキュメントはちゃんと見よう
ほんと、ほんとにドキュメントは読んだ方がいいよ！
discord.jsだったらdiscord.jsのドキュメントとかdiscord.pyだったらdiscord.pyのドキュメントとか！！！！
多少の知識が身についてたら大体どういう風にできるかっていうの把握できるから！
後は英語だったりするので頑張って翻訳しながらでもその関数とかの説明を見てみよう(コードも一緒に翻訳されるかもしれないけど)

# 終わり
なんか他に書くことあるかなぁって思ったけど自分もまだ初心者(プログラミングはじめて3年目)だからあんまり書けることないですが、少しでも理解して欲しかったので書きました
色々おかしいところがありますが、最後まで読んでくれてありがとうございました。
MS-Windows で MySQL Workbench が起動しない

Windows 10 に MySQL Workbench をインストールしたけど、起動しない。

似た構成のもう一台の Windows 10 にインストールしようとしたら、以下のダイアログが出た。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/3b494457-84cf-0129-f02e-4aa98487f2a7.png)

OK を押して Download Prerequisites を押してみたが

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/940ee57e-5308-5038-1719-adf0c34aa111.png)

ダウンロードサイトに戻ってしまう。さて・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/534b859a-77f4-ed07-37c3-0a0680eb02e7.png)

「i」を押したら

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/5e5a86bc-8776-ad32-da9e-a22854bf6394.png)

下のほうに  Visual C++ Redistributable for Visual Studio 2019 (for Japanese) へのリンクがありました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/1fb769b4-b6d1-2661-91ed-2fa341aa29ae.png)

ダウンロードしてインストール、改めてインストーラを実行したら無事起動するようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/e138dcba-3aa0-ed3f-2d78-d1a54f5d90a1.png)


もう一台の、インストールできたけれども MySQL Workbench が起動しないPCも、同様に VC_redist.x64.exe をインストールすれば起動するようになりました。


・・・というようにせっかくインストールしたのですが最近のMariaDBには接続できないのですね。
今は HediSQL を代わりに使っています。
artisanコマンドもっと便利なものを使っておくべきだった話

#今までの自分
今までコントローラーを作成する際は

```
$ php artisan make:controller HogeController
```

それに加えて、モデルも必要だな...と思い

```
$ php artisan make:model Hoge
```

モデルがあるってことはマイグレーションも必要だ

```
$ php artisan make:migration hoges_create_table
```

ダミーデータも必要だからシーダも必要だから作る

```
$ php artisan make:seeder HogesSeeder
```
今までこんな感じで個別で必要になった際に、毎回コマンドを実行していました
もうお気づきの方もおられるかもしれませんがとても効率悪いですね。

#これからの自分
すると先生から、このコマンドで一発で全部できる
これを使う方が良いと教えていただいたのです
それがこれ

```
$ php artisan make:model Hoge --all
```
なんとこれだけなんですよね
聞いたことはあったものの、いつも自分の使い慣れていたコマンドを使って使ったことがなかったこのコマンド
めちゃくちゃ便利でした。。

このコマンドで、コントローラー、モデル、マイグレーション、シーダと
必要な物全て作ってくれます

とても素敵ですね

今までの自分何してたんだと言う気持ちと
便利すぎて感動する気持ちになりました

これからは間違いなくこれを使っていくことになると思います

弱々エンジニアの気付きと新たな発見でした
WSL2でX Serverを利用するための設定(DISPLAYの環境変数を自動設定する)

WSL2においてX Serverを利用する際の設定は、WSL1と微妙に異なります。

下記の記事に詳細がありますが、
[WSL2におけるVcXsrvの設定](https://qiita.com/ryoi084/items/0dff11134592d0bb895c)
[WSL上のディスプレイの設定](https://qiita.com/ryoi084/items/0dff11134592d0bb895c#wsl%E4%B8%8A%E3%81%AE%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4%E3%81%AE%E8%A8%AD%E5%AE%9A)の工程で、WSL2側のipアドレスを指定する必要があります。
この記事ではipconfigで確認して設定していますが、記事にもある通り再起動のたびにipアドレスが変わるという問題があります。
以下のようなコマンドでWSL2側からipアドレスを取得して、DISPLAYの環境変数に突っ込むことができます。これを設定ファイル(zshrcとか)に書いておけば、起動時に自動的に設定することが可能になります。

```bash
export DISPLAY=`grep -oP "(?<=nameserver ).+" /etc/resolv.conf`:0.0
```

# 2021.03.05 追記
X410(有償のX server)のページにも同内容の記載がありました。
https://x410.dev/cookbook/wsl/using-x410-with-wsl2/

# 2021.07.13 追記

```bash
export DISPLAY=`hostname`.mshome.net:0.0
```
でいけるようです。詳細は以下の記事を参考に。
参考: https://qiita.com/taichi-ishitani/items/b627e31a97fef24c6ee4

ついでですが、WSLgを使う場合は、そもそも設定ファイルにはDISPLAYの設定を何も書かないか、以下のようにしましょう。

```bash
export DISPLAY=:0
```

参考: https://zenn.dev/suisuiso/articles/eb6796f68324cd
Dockerで構築したKibana7.6.1で自作のOSMを使用する

環境
\- Debian10.3
\- docker-compose 1.25.4
\- Docker 19.03.7
\- Elasticsearch 7.6.1
\- Kibana7.6.1

[Kibana7.6.1の構築](https://qiita.com/t-baba-11/items/27e71bf289163fd8980e)
[OpenStreetMapの構築](https://qiita.com/t-baba-11/items/35861a981f8b7b22d79f)

docker-composeを使用して起動するために下記のようにファイルを作成します。

```yml:docker-compose.yml

version: "3.3"

services:
  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:7.6.1
    environment:
      - discovery.type=single-node
      - cluster.name=docker-cluster
      - bootstrap.memory_lock=true
      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
    ulimits:
      memlock:
        soft: -1
        hard: -1
    ports:
      - 9200:9200
    volumes:
      - es-data:/usr/share/elasticsearch/data
  kibana:
    image: docker.elastic.co/kibana/kibana:7.6.1
    volumes:
      - ./kibana.yml:/usr/share/kibana/config/kibana.yml
    ports:
      - 5601:5601

volumes:
  es-data:
    driver: local
```

./kibana.ymlを編集し、OSMの設定を記述します。
Kibana7.6.1からデフォルトでは、ヴィジュアライゼーションに座標マップがなくなっているので、xpack.maps.showMapVisualizationTypesをtrueに設定します。
他にもKibanaの設定が必要な場合はこちらに記載しておきます。

```yml:kibana.yml
map.tilemap.url: "http://<OSMサーバーアドレス>/tile/{z}/{x}/{y}.png"
xpack.maps.showMapVisualizationTypes: true

```

コマンドを実行して起動します。
```
$ docker-compose up
```

ヴィジュアライゼーションで座標マップを開くと独自作成したOSMが反映されています。

![kibana_map.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189046/d30603a1-8f36-4a3b-54b5-1a72db8eaec5.png)
PhpStormのターミナルをストレスなく使うたった一つの方法

PhpStormなどのJetBrains製IDEのターミナルで、Escキーを押してもエディターにフォーカスが切り替わらないようにする方法の紹介です。

# キーマップ変更

※以下、日本語化かつWindows環境。

1. 設定　→　キーマップ　→　プラグイン　→　ターミナル　を表示
2. フォーカスをエディターに切り替えるを右クリック
3. Escの除去

# 終わり
過激なタイトルでスカスカな内容
インシデント初期対応に使えるCDIR Collecterについて

サイバーディフェンス研究所が開発しているインシデント初期対応でつかえる情報収集ツールです。
本記事ではツールの説明にとどまり、それぞれのログの見方などについては別途記事を書きたいと思います。

#CIDRツールとは
インシデントの初期対応で使える情報収集に有用なツールです。

下記のような情報が得られます。
**実行すると得られる情報**
- メモリ
- MFT
- Change Journal
- イベントログ
- プリフェッチ
- レジストリ

**↑の情報をもとにわかること例**
- 現状不審な動作が継続しているかどうか 　→メモリ情報などから調査
- 今回検知されたファイルの侵入時期 　→MFTから
- 検体の実行可否と実行時刻 　　→プリフェッチから
などなど。。。

#使い方
ダウンロードしたフォルダ内のexeを実行するだけ。
具体的な手順は下記の外部サイトを参照のこと。
>初動対応用データ保全ツール「CDIR Collector」解説
>https://www.atmarkit.co.jp/ait/series/3945/

**※実行場所について**
端末上で直接実行する、ファイルサーバからリモート実行する、Webサーバから一斉取得するなどのバリエーションがあるようです。
Github上のReadme参照のこと。

#入手元
下記Githubよりダウンロード可能
将来的にはLinuxも対象としたいようですが現状はWindows版のみ。
https://github.com/CyberDefenseInstitute/CDIR


#注意点
win10だとCDIRからメモリダンプしようとするとブルースクリーンになってしまう可能性がある。
事前に要検証　or　メモリダンプは除いて実行すること。

→2020/9/15追記
Windows10のメモリダンプ時にブルースクリーンになってしまう問題について解決方法を下記の記事で紹介。
https://qiita.com/harapeco_nya/items/ea813a05a345d064ac97

以上。
S3でhttps化したソーリーページをホスティングする。※ パス、クエリストリング無視


## 前フリ

S3で静的ページをホスティングする例はたくさんネットにあるのですが、パスやクエリストリングを無視してどんなURLでも同一のページを出す例がなかったので私の備忘録的に残します。
S3だけでは、用途にあったカスタムドメイン、かつhttpsのサイトを用意できないので、CloudFront,ACMを合わせて利用します。


## リンク切れを含まない静的ページHTMLを用意する

用途にあったHTMLを用意してください。
大事な点ですが、リンク切れのリンクや画像は絶対含めないこと。それが存在すると、そのコンテンツに対し403レスポンスが発生し、簡単に無限リダイレクトループに陥ります。
蛇足ですが、S3では指定されたコンテンツがない場合、**404 Not Found** ではなく **403 Access Denied** が発生しますね。豆知識です。
んで、リンク切れとか、そんなことしねーよ、と思うかもしれませんが、忘れやすいのがfavion。明示的に空指定するか、適当な画像を指定します。
私は適当な画像の方を用意しました。

名前は``index.html``にするのが一番迷いないかと思います。


## S3でホスティングする

これはあちこちに例があるのでそれらを参考にしてください。
例えばAWS公式はこちら。

> Amazon S3 での静的ウェブサイトのホスティング
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteHosting.html

httpでやるならバケット名に制限がかかりますが、https必須にするためにCloudFrontをかませるのでなんでもかまいません。
あとやってはいけないのが、S3の機能によるリダイレクト。
これでもパス、クエリストリング無視でどんなURLでも単一ページにリダイレクトできますが、CloudFrontのカスタムエラーページで実現するので不要です。そして、S3のリダイレクトは、もちろんリダイレクトなので **302 Redirect** が発生します。これが発生すると問題が複雑になります。(そし
て私は混乱した)

設定が完了したら、まずはS3が用意する素のURL(?)でアクセスして、ちゃんとページが表示されること。そしてレスポンスに200以外が存在しないことを確認します。

## ACMで証明書を用意する

CloudFrontで使用する証明書を用意します。DNSにRoute53を使用しているならば、Amazonで認証するやつがもっとも簡単でしょう。
証明書はDVですが、それで問題になるケースはほぼないと思われます。

> ACM の Amazon が発行する証明書のマネージド型更新
https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/managed-renewal.html

## CloudFrontを設定する

S3をoriginとするCloudFrontのディストリビューションを設定します。

公式よりもわかりやすい(自分調べ)と評判のDevelopers.IOの記事を参考にしてみてください。

> CloudFrontを使用してS3静的ウェブサイトを提供する手順
CloudFrontディストリビューション作成の項
https://dev.classmethod.jp/articles/cloudfront-s3-web/#toc-cloudfront

で、大事なのはカスタムエラーページで、403に対し、 /index.htmlを返すよう設定することです。
エラー扱いにはしたくないので返すレスポンスコードは200。
ここがポイントです。
S3は存在しないパスに対し403を返すので、これでどんなパスでアクセスされても用意したindex.htmlがレスポンスされることになります。

では、良いソーリーページライフを。
#Ruby でカンマ区切りの文字列をメソッドの複数引数として渡す例

```rb
# 複数の引数を受け取るメソッド
def foo(a, b)
  p a
  p b
end

# カンマ区切りの文字列を split で配列にする
"x,y".split(",")
# => ["x", "y"]

# 配列をアスタリスク * で 引数として渡す
foo(*"x,y".split(","))
# "x"
# "y"

```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3047








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
チーム開発

チーム開発で違うリポジトリで作業してしまった、その修正で使った記事
違うgitのURLにプロダクトをpushしたい参考記事
https://ja.stackoverflow.com/questions/42216/%E9%81%95%E3%81%86git%E3%81%AEurl%E3%81%AB%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E3%82%92push%E3%81%97%E3%81%9F%E3%81%84

一二週間ぶりに
rails g controller name　
rails g model name
rails db:migrate
rails routes
の作業、たったの一二週間なのに忘れて、すぐにやり方が出てこない！！焦る！
クレジットカード登録、変更画面作業中（フロントエンド）
まだどの作業もスムーズにできない、一つ一つ確認、復習しながら進めるため遅い！
チームに迷惑かけないようにしたいが、ものすごく足ひっぱってる。
githubでのコードレビュー時によく見かける略語

# github開発でよく見かける略語一覧
Qiitaの`イイネ`が`LGTM`になったので
普段の開発で見かけて意味を調べたことのあるワードを解説。
現場によって意味は違うのかもしれないのでそのまんま鵜呑みにしないでちゃんと確認してね。

## LGTM:「Looks Good To Me」
「パッと見では良さげ」くらいの意味でapprovedとセットで出すコメント。
レビュアーも完璧じゃないので「LGTM出たんでリリース出来るやろ！ヨシ！」と思ってはいけない。
ちゃんと自分でも他に影響がないかチェックしてね。
略語知らないとよくLTGMとかLGBTとか誤爆する。

## WIP:「Work In Progress」
作業中という意味。
プルリクは作ったけどまだ作業中だからマジマジ見ないでって時はプルリクのタイトルに`[WIP]hogehoge`って付ける。
一瞬だけ有効化されたプルリクのDraft機能が正式化すればわざわざWIPって付ける必要もなくなるかも。

##FYI:「For Your Information」
参考までにって参考サイトのリンク張ったり、実装例のコードを張り付ける時に使われる。
レビュアーは実装例で示したコードの実装意図をちゃんと伝える必要がある。
レビュイーは実装例をそのまま利用してもよいし、そのままだとダメっぽければコメント残して別の実装方法を取るのもよい。

##IMO:「In My Opinion」
「個人の意見だけど……」って前置きするときに使う。
でもまあよっぽど賛否の分かれる実装じゃない限りはFYIってしちゃうことの方が多い。

##IMHO:「In My Humble Opinion」
IMOの更にへりくだった言い方。
PJでは使わない。OSS開発で日本人がたまに使ってるのを見かける。

##nits:「nitpick」
絶対直さなくちゃいけないわけじゃないけど気になる細かい指摘を行う時に使う。
approved押しつつLGTMとセットで出すことが多い。（LGTM with nitsなど）
直すかどうかはプルリク出した人に任せられる。（けど基本は直した方が良いとは思う）

##typo: 「typographical error」
タイプミス、スペルミスしてるぞって時に付けるコメント。
例えエディタにスペルチェックツール入れていたとしても人間なので誰しも間違えることはある。
書いてる人は気付きにくいが第三者が客観的に見たときに見つけやすいので指摘されるのはしゃーない。
CodeIgniterのget_instance()についてまとめた

## はじめに
今回新たに参画したプロジェクトでCodeIgniterが使われていたので勉強がてらまとめてみました。
フレームワークの中身を読んでいると`get_instance()`にたどり着いたので今回はそれを題材にして記事にいたしました。

## get_instance()
コントローラのメソッド内でインスタンス化されるクラスは全てCodeigniterのネイティブリソースにアクセスできます。
`get_instance()`関数を利用することによってシンプルに書くことが可能になります。

- 返り値
    - コントローラのインスタンスへの参照
- 返り値の型
    - CI_Controller
- 関数の役割
    - メインのCodeIgniterオブジェクトを返す

通常、Codeigniterの利用可能なメソッドを呼び出すには`$this`を使う必要があります。

```php
$this->load->helper('url');
$this->load->library('session');
$this->config->library('base_url');
```

しかし`$this`はそのコントローラ内、モデル内、 ビュー内にのみ機能するようになります。

独自のカスタムクラスからCodeigniterのクラスを使用したい場合は以下のようにします。
まず、変数にCodeigniterのオブジェクトを割り当てましょう。

```php
$CI =& get_instance();
```

オブジェクトを変数に割り当てたのなら、`$this`の代わりにその変数を使用します。

```php
$CI =& get_instance();

$CI->load->helper('url');
$CI->load->library('session');
$CI->config->item('base_url');
```

もし別のクラス内で`get_instance()`を使うならプロパティに割り振ると良いですよ〜。

```php
class Igniter {
    
    protected $CI;

    // コンストラクタでなくてもOKですが、
    // クラスが呼ばれた段階で実行されるのて楽なのでおすすめです。
    public function __construct()
    {
        // Codeigniterのスーパーオブジェクトを割り当てます。
        $this->CI =& get_instance();
    }

    public function foo()
    {
        $this->CI->load->helper('url');
        redirect();
    }

    public function bar()
    {
        $this->CI->config->item('base_url');
    }
}
```

プロパティに振らない場合は、

```php
class Igniter {
    
    public function foo()
    {
        $CI =& get_instance(); // １回目の呼び出し
        $CI->load->helper('url');
        redirect();
    }

    public function bar()
    {
        $CI =& get_instance(); // ２回目の呼び出し
        $CI->config->item('base_url');
    }
}
```

メソッドが増えるごとに呼び出さなければならないのでプロパティに振ることをお勧めです。
IBM Cloud Load Balancer(ICLB)/VPC ALB: source IPベースのsession stickinessの挙動

(2021/01/28。 VPC ALBでも同じ挙動だったので追記しておきました。またICLBはあまり使われていないため、検証内容をVPC ALBベースでの挙動に更新し、追加の検証をしました）

#1. はじめに

ICLB/VPC ALBのsource IPベースのsession stickinessについて挙動を確認したので、ここで実験結果をまとめておく。

- session persistence tableのようなものは使っていない。よって、リクエストが増えるとsession persistence tableのメモリ量が増加してLBが不安定になるなどの心配はいらない。
- source IP -> backend serverとなるようなhashmapを利用して割り振っているだけ。
- **backend serverの数が変わるとhashmapは変更されるので、backend serverの増減前後で、同じsource IPからの割り振りが異なるbackend serverに割り振られるようになる可能性がある。**
- backend serverの増減に影響を受けずに同じサーバーに割り振り続けるためには、Cookieベースのsession stickinessを利用する必要がある（ただし、VPC ALBではCookieベースのsession stickinessはまだサポートされていない）。

#2. 検証

## Step1: backend serverの数が2でsession stickinessを利用していない場合

設定内容

- backend serverの数は2
- 割り振り方式はRound Robin
- session persistenceは利用していない

```shell-session:ラウンドロビンになっている
# while true; do curl xxxxxxx.lb.appdomain.cloud:8080; sleep 1; done
server2
server1
server2
server1
server2
server1
server2
server1
server2
server1
```

## Step2: 次に、source IPベースのsession stickinessを有効化。


```shell-session:同一IPからは同一のサーバーに割り振られるようになった。
# while true; do curl xxxxxxx.lb.appdomain.cloud:8080; sleep 1; done
server1
server1
server1
server1
server1
server1
server1
server1
server1
server1
```


## Step3: 次に、backend serverの数を2->3に変更


```shell-session:hashmapが変更されたため、Step2と同じsourceIPを使っているにも関わらずStep2とは異なるサーバーに割り振られはじめた
# while true; do curl xxxxxxx.lb.appdomain.cloud:8080; sleep 1; done
server3
server3
server3
server3
server3
server3
server3
server3
server3
server3
```

## Step4: 次に、割り振り先のbackend server（この場合はserver3)を停止

```shell-session:障害のあるサーバーには割り振れないので別サーバーに割り振られる
# while true; do curl xxxxxxx.lb.appdomain.cloud:8080; sleep 1; done
server1
server1
server1
server1
server1
server1
server1
server1
server1
server1
```

## Step5: 次に障害のあるbackend server（この場合はserver3)を復活させた場合


```shell-session:hasmapが再度変更され、別サーバーに割り振られる
# while true; do curl xxxxxxx.lb.appdomain.cloud:8080; sleep 1; done
server3
server3
server3
server3
server3
server3
server3
server3
server3
server3
```


## Step6: 次にアクセスしていないbackend server（この場合はserver2)を停止した場合

```shell-session:再度hasmapが再度変更され、別サーバーに割り振られる
# while true; do curl xxxx.lb.appdomain.cloud:8080; sleep 1; done
server1
server1
server1
server1
server1
server1
server1
server1
server1
server1
```
Google Cloud Platform (GCP)サービスの正式名称・略称・読み方まとめ#12(管理ツール)

Google Cloud Platform (GCP)のサービスで正式名称や略称はともかく、読み方がわからずに困ることがよくあるのでまとめてみました。


クラウド コンピューティング サービス  |  Google Cloud
https://cloud.google.com/?hl=ja


## まとめルール

まとめルールについては下記を参考ください。

Google Cloud Platform (GCP)サービスの正式名称・略称・読み方まとめ#1(AI と機械学習/AI ビルディング ブロック) - Qiita
https://qiita.com/kai_kou/items/fa930eef23470c2f8f0b


## Amazon Web Services (AWS)のまとめはこちら！

Amazon Web Services (AWS)サービスの正式名称・略称・読み方チートシート - Qiita
https://qiita.com/kai_kou/items/cb29d261c8acc49fd22a

Amazon Web Services (AWS)サービスの正式名称・略称・読み方まとめ #1 (コンピューティング) - Qiita
https://qiita.com/kai_kou/items/a6795dbab7e707b0d1a6


## 概要について

サービス一覧ベージの概要を引用しています。

プロダクトとサービス  |  Google Cloud
https://cloud.google.com/products?hl=ja#product-launch-stages


間違いや、こんな呼び方あるよーなどありましたらコメントお願いします！


## Management Tools - 管理ツール

### Private Catalog (beta)

社内ソリューションを管理し、見つけやすくします。

- 正式名称: Private Catalog
- https://cloud.google.com/private-catalog
- 読み方: プライベート カタログ
- 略称: なし
- 俗称: なし


### Cloud Deployment Manager

シンプルなテンプレートを使ってクラウド リソースを管理します。

- 正式名称: Cloud Deployment Manager
- https://cloud.google.com/deployment-manager
- 読み方: クラウド デプロイメント マネージャ
- 略称: なし
- 俗称: なし


### Cloud Console

GCP の総合管理コンソール。

- 正式名称: Cloud Console
- https://cloud.google.com/cloud-console
- 読み方: クラウド コンソール
- 略称: なし
- 俗称: なし


### Cloud Shell

任意のブラウザから使用できるコマンドライン管理ツール。

- 正式名称: Cloud Shell
- https://cloud.google.com/shell
- 読み方: クラウド シェル
- 略称: なし
- 俗称: なし


### Cloud Console Mobile App

モバイル デバイスから GCP サービスを管理します。

- 正式名称: Cloud Console Mobile App
- https://cloud.google.com/console-app
- 読み方: クラウド コンソール モバイル アップ
- 略称: なし
- 俗称: なし


### Cost management

費用をモニタリング、管理、改善するためのツール。

- 正式名称: Cost management
- https://cloud.google.com/cost-management
- 読み方: コスト マネジメント
- 略称: なし
- 俗称: なし


### CLOUD APIS

全 GCP サービスで使えるプログラマティック インターフェース。

- 正式名称: CLOUD APIS
- https://cloud.google.com/apis
- 読み方: クラウド エーピーアイ
- 略称: なし
- 俗称: なし


### Anthos Service Mesh (beta)

複雑なマイクロサービス アーキテクチャ向けのフルマネージド サービス メッシュ。

- 正式名称: Anthos Service Mesh
- https://cloud.google.com/anthos/service-mesh
- 読み方: アンソス サービス メッシュ
- 略称: なし
- 俗称: ASM
    - 参考: [「Google Cloud Anthos Day」参加レポート 〜 Kubernetesを使った開発事例を学ぶ\(後編\) \| EC\-CUBE CORPORATE BLOG](https://www.wantedly.com/companies/ec-cube/post_articles/209118?auto_login_flag=true#_=_)
    - 参考: [サービスメッシュとGoogle Cloudサービスメッシュの紹介 \- Qiita](https://qiita.com/nagasada/items/02381dc6042fc869a22b)
Vulkanリンク集(ときどき更新)

もしリンク切れやリンク間違いがあればコメント欄にてお知らせください。
ときどき更新しています。
#Vulkanについて

>**wikipedia** 
Vulkanの概要を確認することができます。
https://ja.wikipedia.org/wiki/Vulkan_(API)

---

>**Vulkan API Reference Pages** 
vulkan apiリファレンス。
言語　英語
https://vulkan.lunarg.com/doc/view/latest/windows/apispec.html

---

>**Vulkan  A Specification** 
仕様
言語　英語
https://www.khronos.org/registry/vulkan/specs/1.2-extensions/html/index.html#preamble

#Vulkanチュートリアル、入門

>**Vulkan Tutorial** 
三角形の表示から始まるチュートリアル。
質問もできる。
言語　英語、フランス語
https://vulkan-tutorial.com/

---

>**Vulkan Tutorial** 
キューブを描くチュートリアル。
言語　英語
https://vulkan.lunarg.com/doc/sdk/1.2.131.2/windows/tutorial/html/index.html

---

>**3DグラフィクスAPI Vulkanを出来るだけやさしく解説する本(PDF版)** 
図が豊富で理解しやすい。
言語　日本語
有料
https://booth.pm/ja/items/1562222

---

>**Vulkan Programming Vol.1** 
入門書。
vol2、vol3もある。
言語　日本語
有料
https://booth.pm/ja/items/1286100

---

>**Vulkan-Tutorial-Java** 
Vulkan TutorialのJava版。
言語　英語
https://github.com/Naitsirc98/Vulkan-Tutorial-Java

---

>**vulkan-tutorial-rs** 
Rust版。
言語　英語
https://github.com/bwasty/vulkan-tutorial-rs

---

>**Vulkan Tutorial - 101** 
OpenGLやDirectXなどの経験者向け。
言語　英語
http://jhenriques.net/development.html#tutorial_016

---

>**API without Secrets: Introduction to Vulkan** 
言語　英語
https://software.intel.com/en-us/articles/api-without-secrets-introduction-to-vulkan-part-1

#その他　補助
>**V-EZ** 
Vulkanを簡易化したもの
https://gpuopen.com/v-ez-brings-easy-mode-vulkan/

---

>**Dear ImGui** 
Vulkan対応　GUIフレームワーク
https://gpuopen.com/v-ez-brings-easy-mode-vulkan/
ImGuiを統合する参考になる文献
https://frguthmann.github.io/posts/vulkan_imgui/

---

>**Vulkan Memory Allocator** 
メモリの割り当てを助けてくれる
https://github.com/GPUOpen-LibrariesAndSDKs/VulkanMemoryAllocator
点と直線の距離

## 2直線の垂直条件を利用して求める
**直線 $ax+by+c=0$ と直線上にない点 $P(x_0,y_0)$ との距離を求める。**
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384860/8cbf700c-079b-1188-5676-b27490d7c8c8.png">
$P$ から直線に垂直に下ろした線を $PH$ とする。
$a\neq0,b\neq0$ とし、直線と点 $P$ との交点 $H$ の座標を $(x_1,y_1)$ とすると、
直線 $PH$ の傾きは $\dfrac{y_1-y_0}{x_1-x_0}$、距離は $\sqrt{(x_1-x_0)^2+(y_1-y_0)^2}$ となる。
一方、直線 $ax+by+c=0$ の傾きは、 $-\dfrac{a}{b}$ で、（[直線の方程式](https://qiita.com/tydesign/items/4d3909a826363d8fc29f) 参照）
直線と $PH$ は垂直なので、その積は、
$$\dfrac{y_1-y_0}{x_1-x_0}\cdot  -\dfrac{a}{b}=-1$$ 
となる。（[平行な直線と垂直な直線](https://qiita.com/tydesign/items/c102b1582c2689e4f090) 参照）
この式を変形すると、
$$\dfrac{a(y_1-y_0)}{b(x_1-x_0)}=1\  \dashrightarrow \ b(x_1-x_0)=a(y_1-y_0)\ \dashrightarrow \ \dfrac{b(x_1-x_0)}{ab}=\dfrac{a(y_1-y_0)}{ab}$$
となり、
$$\dfrac{x_1-x_0}{a}=\dfrac{y_1-y_0}{b}$$
となる。この値を $k$ とおくと、
$$\dfrac{x_1-x_0}{a}=k \ , \ \dfrac{y_1-y_0}{b}=k$$
$$x_1-x_0=ak \ , \ y_1-y_0=bk \ \cdots \ ①$$
となる。
この式を、$PH$ の距離の式の両辺を二乗した $PH^2=(x_1-x_0)^2+(y_1-y_0)^2$ に代入すると、
$$PH^2=(ak)^2+(bk)^2=a^2k^2+b^2k^2=(a^2+b^2)k^2 \ \cdots \ ②$$
①の式を変形すると、
$$x_1=x_0+ak \ , \ y_1=y_0+bk \ \cdots \ ③$$
点 $H(x_1,y_1)$ は直線 $ax+by+c=0$ 上の点なので、
$$ax_1+by_1+c=0$$
が成り立つ。
この式に③の値を代入すると、
$$a(x_0+ak)+b(y_0+bk)+c=0$$
この式を $k$ について解くと、
$ax_0+a^2k+by_0+b^2k+c=0\  \dashrightarrow \ k(a^2+b^2)=-(ax_0+by_0+c)$
$$k=-\dfrac{ax_0+by_0+c}{a^2+b^2}$$
となる。
この $k$ の式を②に代入すると、
$$PH^2=(a^2+b^2)k^2=(a^2+b^2)\cdot \left(-\dfrac{ax_0+by_0+c}{a^2+b^2}\right)^2$$
$$=\dfrac{(a^2+b^2)\cdot (ax_0+by_0+c)^2}{(a^2+b^2)^2}=\dfrac{(ax_0+by_0+c)^2}{a^2+b^2}$$
ゆえに、
$$PH=\dfrac{\mid ax_0+by_0+c\mid}{\sqrt{a^2+b^2}} \ \cdots \ ④$$
これが直線 $ax+by+c=0$ と直線上にない点 $(x_0,y_0)$ との距離の公式です。

この公式は $a=0$ または $b=0$ のときも成り立つ。
$a=0$ のとき、直線 $ax+by+c=0$ は $by+c=0$ となり、
$$y=-\frac{c}{b}$$
となる。これは $x$軸に平行な直線を表す。
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384860/9160eef0-1f93-02bd-ac39-0364eea69570.png">
このとき、点$P(x_0,y_0)$ とこの直線との距離は、
$$\left|\ y_0-\left(-\frac{c}{b}\right)\right|$$
この式は、④の式で $a=0$ にした場合、
$$PH=\dfrac{\mid by_0+c\mid}{b}$$
と同じ式となり、$a=0$ の場合も成り立つといえる。

$b=0$ のとき、直線 $ax+by+c=0$ は $ax+c=0$ となり、
$$x=-\frac{c}{a}$$
となる。これは $y$軸に平行な直線を表す。
<img width="350" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384860/e6aa21f2-6b48-a547-4d8c-83a2e4c491d9.png">
このとき、点$P(x_0,y_0)$ とこの直線との距離は、
$$\left|\ x_0-\left(-\frac{c}{a}\right)\right|$$
この式は、④の式で $b=0$ にした場合、
$$PH=\dfrac{\mid ax_0+c\mid}{a}$$
と同じ式となり、$b=0$ の場合も成り立つといえる。

また、原点 $(0,0)$ と直線 $ax+by+c=0$との距離は、
$$PH=\dfrac{\mid c\mid}{\sqrt{a^2+b^2}}$$
です。
よく使うjs関連まとめ

closest →親要素を取得することができるmethod

find →子要素

siblings→兄弟要素

​

$(".toggle-multiselect").click(function(){

​

var selectVal;

​

$(this).siblings("select").each(function (idx, el) {

selectVal = el;

return false;

});

​

​

// 押したtoggle buttonのイメージを変える

if($(this).hasClass("toggle-multiselect")){

// 複数選択→単一：minusの形のボタンに変更

$(this).removeClass("toggle-multiselect");

$(this).addClass("toggle-oneselect");

}else{

// 単一→複数:plusの形のボタンに変更

$(this).removeClass("toggle-oneselect");

$(this).addClass("toggle-multiselect");

​

​

}

​

​

// セレクトボックスをマルチセレクトができるように設定

var selectId = selectVal.id;

var selectStatus = $('#'+selectId).attr('multiple');

​

console.log(selectStatus);

​

// 選択できる項目が一つから複数になる

if(!selectStatus){

$('#'+selectId).prop("multiple","true");

}else{

// 選択できる項目が複数から一つになる

$('#'+selectId).removeProp("multiple");

​

}

​

});

​

​

​

css

.toggle-multiselect {

display: inline-block;

width: 15px;

background-image: url(plus.png);

margin-bottom: 2px;

position: fixed;

cursor: pointer;

}

​

.toggle-oneselect {

display: inline-block;

width: 15px;

background-image: url(minus.png);

margin-bottom: 2px;

position: fixed;

cursor: pointer;

}
CodeDeploy エージェントのインストールの起動

#CodeDeployエージェントのインストール
sudo yum update
sudo yum install ruby
sudo yum install wget
cd /home/ec2-user
wget https://bucket-name.s3.region-identifier.amazonaws.com/latest/install
chmod +x ./install
sudo ./install auto

bucket-nameとregion-identifierは設定する。

#CodeDeployエージェントの起動

sudo service codedeploy-agent start

サービスが実行されているかどうか確認するには、次のコマンドを実行します。

sudo service codedeploy-agent status

参考：
https://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/codedeploy-agent-operations-install-linux.html
IBM Cloudを使ってみて少し思ったこと

### なぜIBM Cloudにしたのか

課題として提出するし、どうせなら個人でチャットボットに音声認識と発話をつけたい！という考えから Amazon web Servces,IBM Cloud, Azureの中からどれにするか悩んでいましたが、無料の範囲がやりたいこととかなりあっていたのでIBM Cloudにしました。（この時、もっとどれだけ日本で活発なのか調べるべきでした）

### 使ってみて思ったこと

他を使っていないので使いやすいかは比べられませんが、初心者の自分には"使う"という点では使いやすく感じました。

しかし、クラウドサービスが故、にかかわってきますが、1年前や運が悪いと2か月前の記事とは仕様が異なっていることはまあよくある話だぜ！と身をもって実感しました。
よく使っている方からすると当たり前だ、クラウドサービスだぞ！と思われるかもしれませんが、初心者が気になるし触ってみるか～ぐらいの気持ちでやるとこう感じました。

そもそもなぜ1年も前の記事を見ていたかというと、自分がやろうとしていたころに関連している記事が直近では少なかった。に限ります。
もっと探せよ！と言い出すときりがないですがそこはお許しください。（今書いてる時よりも少し前に触っていたので今もまた状況は変わっているかもしれません）

一番重要なIDがどこにもないぞ！となったときは血眼になって探しましたが日本語の記事では見つからず、英語版のQ&Aに手を伸ばすと1か月前に同じ質問をしていた方に巡り合え無事解決した時には、日本ではあまり使われていないのかな？と、思うようになりました。
実際、英語ではかなりのQ&Aと記事が出てくるので（当たり前ですが）

そこから、Qiitaで検索をかけると圧倒的にAWSの関連記事が多く日本語で理解し、触るならAWSかもしれないという結論に至りました。

ただ、英語を読む勉強になりますし、自ら考えて機能を見つけたり置き換わっているものを探し出すという点では楽しかったのでお勧めです。（根気は必要）

発話、音声認識を搭載しようと思っていたらCURLなぜIBM Cloudにしたのか

個人でチャットボットに音声認識と発話をつけたい！という考えから Amazon web Servces,IBM Cloud, Azureの中からどれにするか悩んでいましたが、無料の範囲がやりたいこととかなりあっていたのでIBM Cloudにしました。（この時、もっとどれだけ日本で活発なのか調べるべきでした）

### 使ってみて思ったこと

他を使っていないので使いやすいかは比べられませんが、初心者の自分には"使う"という点では使いやすく感じました。

しかし、クラウドサービスが故、にかかわってきますが、1年前や運が悪いと2か月前の記事とは仕様が異なっていることはまあよくある話だぜ！と身をもって実感しました。
よく使っている方からすると当たり前だ、クラウドサービスだぞ！と思われるかもしれませんが、初心者が気になるし触ってみるか～ぐらいの気持ちでやるとこう感じました。

そもそもなぜ1年も前の記事を見ていたかというと、自分がやろうとしていたころに関連している記事が直近では少なかった。に限ります。
もっと探せよ！と言い出すときりがないですがそこはお許しください。（今書いてる時よりも少し前に触っていたので今もまた状況は変わっているかもしれません）

一番重要なIDがどこにもないぞ！となったときは血眼になって探しましたが日本語の記事では見つからず、英語版のQ&Aに手を伸ばすと1か月前に同じ質問をしていた方に巡り合え無事解決した時には、日本ではあまり使われていないのかな？と、思うようになりました。
実際、英語ではかなりのQ&Aと記事が出てくるので（当たり前ですが）

そこから、Qiitaで検索をかけると圧倒的にAWSの関連記事が多く日本語で理解し、触るならAWSかもしれないという結論に至りました。

ただ、英語を読む勉強になりますし、自ら考えて機能を見つけたり置き換わっているものを探し出すという点では楽しかったのでお勧めです。（根気は必要）

発話、音声認識を搭載しようと思っていたらCURLを使うならwin10proにしてね！と言われあきらめてしまったのでこうやって苦労するのかもしれません（他の方法もあったのですが、発話と音声認識がうまくつなげられるのか不安だったため）

期日もなく、自分の趣味でこれからやっていこうと考えているのでAWSも使てみようかと考えています。


駄文で見にくいかと思いますが、これにて失礼します。
Laravelのライブラリ「laravel-dompdf」を使ってビューの表示をPDFとして表示しよう

# 目的

- ライブラリを使用して現在のビューとして表示しているコードをそのままPDFで表示する方法をまとめる

# 実施環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.3) |
| ハードウェア | MacBook  Air (11-inch ,2012) |
| プロセッサ | 1.7 GHz デュアルコアIntel Core i5 |
| メモリ | 8 GB 1600 MHz DDR3 |
| グラフィックス | Intel HD Graphics 4000 1536 MB |

- ソフトウェア環境

| 項目 | 情報 |
| --- | --- |
| PHP バージョン | 7.4.3 |
| Laravel バージョン | 7.0.8 |

- ライブラリ環境

| 項目 | 情報 | 備考 |
| --- | --- | --- |
| laravel-dompdf | v0.8.6 | アプリ名ディレクトリに移動後コマンド`composer show -i | grep "laravel-dompdf"`を実行して確認 |

# 実施条件

- 下記の記事に沿って環境構築を行っていること。
    - [Mac Laravelでライブラリ「laravel-dompdf」をインストールする](https://qiita.com/miriwo/items/4e67f2b1645d9dd55336)
- ローカル開発環境でブラウザから確認可能なLaravelアプリがあること。

# 実施方法概要

1. コントローラの確認
1. アクションの記載変更
1. 確認

# 実施方法詳細

1. コントローラの確認
    1. PDFとして表示したいビューファイルが呼び出されているコントローラファイルを表示する。

        ```php
        <?php

        namespace App\Http\Controllers;

        use Illuminate\Http\Request;
        ・
        ・
        ・
        ```
    1. `use Illuminate\Http\Request;`の下に下記の内容を記載する。

        ```php
        use PDF;
        ```
    1. コントローラファイルの設定部分が下記の様になっていることを確認する。

        ```php
        <?php

        namespace App\Http\Controllers;

        use Illuminate\Http\Request;

        use PDF;
        ・
        ・
        ・
        ```
1. アクションの記載変更
    1. 先に確認したコントローラファイルのビューを表示しているアクションを確認する。

        ```php
        return view('ビューファイルディレクトリ名.ビューファイル名');
        ```
    1. 先に確認した`return`部分を下記の様に記載する。

        ```php
        $pdf = PDF::loadView('ビューファイルディレクトリ名.ビューファイル名');
        #変数などの引数を伴ってビューを呼んでいる場合
        $pdf = PDF::loadView('ビューファイルディレクトリ名.ビューファイル名', compact('変数や配列などの引数'));
        return $pdf->stream();
        ```
1. 確認
    1. 下記コマンドを実行してローカルサーバを起動する。

        ```terminal
        $ cd アプリ名ディレクトリ
        $ php artisan serve
        ```
    1. 修正したアクションとリンクするURLにアクセスする。
    1. PDFで表示されればOKである。(日本語は文字化け表示されるが、現在の設定だと正常である。)
環境ごとに違う接続先をどうするか

##テスト環境と本番環境
実際のシステム開発を行っていると「テスト環境」と「本番環境」でデータベースやWeb APIの接続先が異なることは良くあります。
もちろん、テスト環境や本番環境だけに限らずローカル開発環境の場合もあるでしょうし、同じテスト環境で同じアプリケーションでも（何かの都合で）接続先を変えることがあったりします。
そのような場合、どうやって接続先を設定するのがいいのでしょうか。
以下、Javaを想定して記述しますが多くの言語に当てはまる内容だと思います。


##接続先を変える様々な方法
###方法１　ソースべた書き都度ビルド
ソースコード中にベタで接続先を記述し、環境ごとにソースを修正、ビルドを行う方法です。
論外です。

###方法２　設定ファイルに設定都度ビルド
ソースコードに直接記述するのでなく、プロパティファイルのような設定ファイルに接続先を記述し、環境ごとにその設定ファイルを修正しビルドを行う方法です。
本質的に方法１と何ら変わらないのでやはり論外としたいのですが、この方法を選択しようとする人が結構いることも事実です。

###方法３　設定モジュール外の設定ファイルに配置
プロパティファイルに記述という点では方法２と同じなのですが、ビルド対象のリソースには含めずアプリからアクセスできるどこかに置いておくというものです。
接続先によってビルドしなおさなくても良いという点では方法１、２よりも良さそうですが、設定ファイルのアクセス先（ファイルのパスなど）に依存した実装になるというのと、AWS Lambdaのようなサーバレスには適用しにくいという問題もあります。

###方法４　設定環境ごとの設定ファイルを作成
例えばファイル名の末尾に `test` や `prod` などをつけて起動引数などで環境指定してどのファイルを適用するか切り替えるというものです。
都度ビルドはいらないのですが、接続先の数だけファイルを用意したり環境名を意識したファイル名にしたりと割と煩わしいです。
Seasar2が `env.txt` を使ってこの方法をサポートしていたので、この方法を適用しているプロジェクトは多いのではないでしょうか。

###方向５　環境変数で設定
接続先自体を環境変数として設定し、アプリケーションでは環境変数から取得するように実装します。
Springが `@Value("${env.name}")` のような感じでサポートしているのでこの方法も利用している人が多いかもしれません。

##ベストプラクティスは？
ここで **この方法が一番！** って言い切れればいいのですが、私もまだ模索中です。
色んな知見をコメントでいただけると嬉しいです。
今までは方法４が多かったのですが、最近は方法５を適用するようにしています。
理由の一つは **環境ごとに変わる値をモジュール内に持ちたくない** というものです。環境ごとに値が変わるのならそれはアプリケーションのリソースとして管理するのではなく環境そのもので管理したいということです。
それと最近よく利用するAWSのLambdaやECSなどと相性がいいというのもあります。
LamddaやECSタスクの定義に環境変数を設定できるので、環境ごとのLambdaやECSタスクを定義すればいいというのも手軽でわかりやすいです。
上にも書きましたがSpringで簡単に環境変数の値を変数に設定できるのも便利です。
スレッドの生成数などのようにアプリケーションの動作に影響を及ぼすものはプロパティファイルでもいいような気がしますが、アプリケーションの振る舞いを一切変えない（そして環境ごとに値が変わる）接続先のような情報は環境変数に設定するのがいいのではないでしょうか。

以上、環境ごとに違う接続先の設定方法についてでした。
composer install できない

# composerがインストールできないときの解決した方法

## 解決法
https://getcomposer.org/doc/articles/troubleshooting.md#degraded-mode
↑
ここに飛ぶ

手順に沿って解決

## MacOSの場合
IPv6の設定が正しくされていないらしい、、、

1.　ネットワーク機器の名前を確認(たぶんWi-Fi）
networksetup -listallnetworkservices

2.　一旦、IPv6を無効にする(Wi-Fiの場合）
networksetup -setv6off Wi-Fi

3.　再度IPv6を設定する
networksetup -setv6automatic Wi-Fi

4.　composer installを実施
wsl2でよく使う、windowsとlinux間のファイル移動やコマンド実行。



# windowsのエクスプローラからwsl2で起動中のOSのディレクトリへアクセスする。


エクスプローラを立ち上げアドレス欄に\\\\wsl$と入力すると、**起動中の**ディストリビューションのファイルシステムがフォルダとして見えて、アクセスできる。

**利用ケース：**wsl内のファイルを直接windowsのアプリで開きたい場合など。
以下は、CentOS8を2VM、Kali Linuxを1VM、Ubuntu-18.04を1VM起動しているときにエクスプローラーで開いた時のスクリーンショット

![wsl_access_from_win.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11770/25437de6-3100-bd2a-9699-07dcc79fd8ab.png)
![wsl_access_from_win2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11770/0ea1c7e9-2b9f-e2ce-34ce-742d43cf3740.png)

# windowsからwsl2のコマンドを実行する。
コマンドプロンプトかpowershellからwslコマンドに-eオプションで実行する。

以下、コマンドプロンプトからwslコマンドを実行、-dオプションでCentOS8ディストリビューションを選択し、/etc/os-releaseを標準出力した場合。

    C:\Users\uchi>wsl -d CentOS8 -e cat /etc/os-release
    NAME="CentOS Linux"
    VERSION="8 (Core)"
    ID="centos"
    ID_LIKE="rhel fedora"
    VERSION_ID="8"
    PLATFORM_ID="platform:el8"
    PRETTY_NAME="CentOS Linux 8 (Core)"
    ANSI_COLOR="0;31"
    CPE_NAME="cpe:/o:centos:centos:8"
    HOME_URL="https://www.centos.org/"
    BUG_REPORT_URL="https://bugs.centos.org/"
    
    CENTOS_MANTISBT_PROJECT="CentOS-8"
    CENTOS_MANTISBT_PROJECT_VERSION="8"
    REDHAT_SUPPORT_PRODUCT="centos"
    REDHAT_SUPPORT_PRODUCT_VERSION="8"

# wslがインストールされているディレクトリへアクセスする。

microsoft storeからインストールしたりwslコマンドでインストールしたwsl用のファイル類は、
%userprofile%\AppData\Local\Packages
という隠しフォルダにインストールされます。
エクスプローラのアドレス欄に入力してアクセス可能です。

![wslfolder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11770/3bc4f8e7-f5be-5ac7-3a95-9042a0f0b5fa.png)

![wslfolder2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11770/fec78f2d-6502-5718-68a2-cdcf011b0b96.png)

# linuxからwindowsのフォルダにアクセスする
今度はwslで起動したlinuxからのコマンドになります。
linuxから見た場合、windowsのシステムドライブは/mnt/の下にマウントされて見えます。

     uchi@CP747755-01:~$ ls -l /mnt
     合計 0
     drwxrwxrwx 1 uchi uch  512  3月 23 09:05 c
     drwxrwxrwt 2 root root  40  3月 25 05:48 wsl

windowsとlinux相互にディレクトリが参照されているので、OS間のファイルの移動やコピーも簡単にできますね。

# linux上で今いるディレクトリをwindowsエクスプローラーで起動する。
wslのlinuxからはwindowsのコマンドを実行できますので、linuxからexplorerを起動することで、
windowsのフォルダで今いるディレクトリを表示することも可能です。

     uchi@CP747755-01:/home$ explorer.exe .

![explorer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11770/9f96cfb0-fec6-7144-1fc8-3a900a65a693.png)

#同様にlinux上から好きなwindowsコマンドを実行できる。
通常のlinuxと同様に、環境変数PATHが通っていればそのままコマンドを実行できるし、
通ってなければフルパス指定でそのコマンドを実行できる。
例：linux上から

     /mnt/c/Windows/System32/mspaint.exe

でpaintが起動.


#まとめ
| やりたいこと|windows から linux|linux から windows|
|:-----------------|:------------------|:------------------|
| フォルダを参照したい |エクスプローラに\\\\wsl$を入力|explorer.exe .|
| コマンドを実行したい|wsl -e 'linux上のコマンド'|対象exeをフルパスで実行|

これらを組合わせれば、cronからlinuxコマンドの実行に加えてwindowsアプリの実行を組合わせたり、
windowsのタスクスケジューラーからlinuxのコマンドを実行したりと、linux,windows両方の
アプリケーション実行を組合わせられるので、可能性が無限大に広がります。

![wsl_cmd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11770/e926f67e-a8d0-628d-9a2d-578388fdf332.png)
PURE system simulatorをOctaveで動かす方法

#目的
[PURE system simulator](https://sites.google.com/view/puresimulator)[^1]$^{,}$[^2]$^{,}$[^3]は、タンパク質合成反応に関わる241分子種が示す濃度変化を、実験結果と整合性がある形で観測できるシミュレーターである。そんな素晴らしい[PURE system simulator](https://sites.google.com/view/puresimulator)であるが、現在のところ、Matlab(有料)でしか動かない仕様である。Matlabのライセンスは高い。ちょっとシミュレーションに興味があるが、Matlabを買う程ではないなという人はたくさんいる(はず)。そんな人たちのために、MatlabではなくフリーソフトウェアのOctaveで[PURE system simulator](https://sites.google.com/view/puresimulator)を動かす方法をここに載せておきます。[^4]

#Octaveでのシミュレーション結果
Matsuura et al., (2017), *PNAS*のFig. 2b[^2]と同じ結果が得られました。
![untitled.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564846/2d1dab40-8cb7-49f6-4783-5d8ac3a1ed0b.gif)

#やり方
1. [Octave](https://www.gnu.org/software/octave/)をインストール
2. [PURE system simulator](https://sites.google.com/view/puresimulator)に置かれているサンプルプログラム`Simulate_fMGG_synthesis.zip`を落としてきて適当なディレクトリに入れる。
3. `fMGG_synthesis_Sample.m`中の下記の行を変更
4. (Option)`fMGG_synthesis_Sample.m`中のグラフィックパラメータを変更。サンプルプログラムはプロットのデフォルト表示範囲が論文のFig. 2bと同じになっていない。論文と同じグラフを描きたい場合は、`axis([10^(-4) 10^3 10^(-10) 10^5]);`を`axis([10^(-4) 10^3 10^(-6) 10^4]);`に変更する必要がある。
5. 関数ファイル`fMGG_synthesis.m`中の下記の行を変更

###`fMGG_synthesis_Sample.m`内の変更部位
####27,28行目 変更前
```{matlab}
27: non_negative = 1:length(initial_values);
28: ode_opt = odeset('NonNegative', non_negative,'RelTol', 1e-3, 'AbsTol',1e-9);
```

####27,28行目 変更後

```{matlab}
lsode_options('relative tolerance', 1e-3);
lsode_options('absolute tolerance',1e-9);
lsode_options('integration method', 'stiff');
```


####33行目 変更前
```{matlab}
33: [t x] = ode15s(model_h, t,initial_values(:,1), ode_opt); 
```
####33行目 変更後
```{matlab}
x = lsode(model_h, initial_values(:,3), t);
```
###`fMGG_synthesis.m`内の変更部位
####2674,2675行目 変更前
```{matlab}
2674: time = varargin{1};
2675: state = varargin{2};
```

####2674,2675行目 変更後
```{matlab}
time = varargin{2};
state = varargin{1};
```

#解説
Matlabではstiffな常微分方程式のソルバーとして`ode15s`が使われるが、Octaveでは`lsode`が使われる。やっていることは変わらないのだが、引数の渡し方や処理の仕方が少し違うのでMatlabからOctaveへ移植する際にはその変更が必要となる。まず、`ode15s`では、optionを引数として渡すことができるのだが(28行目)、`lsode`ではそれができないので、`lsode_options`を使って事前に宣言することとなる。さらに、`ode15s` では(function, t, x0)とする引数の順番が、`lsode` では(function, x0, t)となる。また、返される値は、`x`の時間変化を示す配列のみである。2674,2675行目の`varargin` は、`fMGG_synthesis`に渡した引数を個別に呼び出す関数である。`varargin{1}`となっていれば、関数`fMGG_synthesis`に渡した1番目の引数という意味である。その引数の順番が、`ode15s`と`lsode`では、異なるためにここの順番を入れ替える必要があると考えられえる

[^1]: [Reaction dynamics analysis of a reconstituted Escherichia coli protein translation system by computational modeling. Matsuura, T. et al., (2017), *PNAS*](https://www.pnas.org/content/114/8/E1336)

[^2]: [タンパク質合成反応を解析する大規模全成分計算機シミュレーターを開発ーリソウ](http://resou.osaka-u.ac.jp/ja/research/2017/20170207_1)

[^3]: [PURE system simulator](https://sites.google.com/view/puresimulator)

[^4]: 残念ながら、Matlabだと数秒で終わるシミュレーションがOctaveだとどうしても時間がかかります。大体20分ぐらい。仕様の問題なのか自分の変更方法が悪いのか誰か分かったら教えて欲しいです。
Kivy-iOS メモ 

#Kivyとは？
python3 でiOSアプリやandroidアプリなどのUIを記述可能なライブラリ


#Kivy導入時に参考にした情報をまとめておく。
###導入
- https://qiita.com/sobassy/items/b06e76cf23046a78ba05
- https://github.com/kivy/kivy-ios
- https://qiita.com/tea63/items/c318ac7a1c09a78acab0

###pathの繋げ方(エラー出た人だけ)
-https://qiita.com/yoshinbo/items/8eb71d8015291ac6a3bc
初心者によるプログラミング学習ログ 272日目

#100日チャレンジの272日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
272日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>272日目　1.5h<br>・XDデザインカンプからのwebサイト模写<br>・git<br>・お問い合わせフォーム作成<br>・CSSはSASS<br>・CSS設計はFLOU<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1242543160544251904?ref_src=twsrc%5Etfw">March 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
N予備校の教材でAjaxでCORSを試してみる

# やりたいこと

N予備校のAjaxのページに「同一生成ポリシーを満たさない場合CORSにひかかって通信できません」と書かれているが、そのあたりの回避策について特に紹介されていなかったので`Access-Control-Allow-Origin`を試してみる。

## 前提知識

* CORS https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
* N予備校 https://www.nnn.ed.nico/courses/497/chapters/6891
    * この教材をそのまま使います（非会員は見れません）

## 環境

* Vagrant ubuntu（Node.jsにて上記のリンクのサーバが稼働している）
* 手元のマシン（Mac）


## 実験

* 手元のマシンのブラウザから、Vagrant上のNode.jsに対してAjax通信を行い失敗することを確認する
* CORSを回避するためにサーバー側にヘッダーを挿入する

### 修正前

* LoadAvgが表示されない
* コンソールログをみると以下のエラーが発生している

```text
Access to XMLHttpRequest at 'http://localhost:8000/server-status' 
from origin 'http://localhost' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

### コード修正

```js:server-status.js

'use strict';
const express = require('express');
const router = express.Router();
const os = require('os');

router.get('/', (req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost')　 👈追加
  res.json({ loadavg: os.loadavg() });
});

module.exports = router;
```

`Access-Control-Allow-Origin`を追加することで特定のOriginからの通信を許容する

### 修正後

* LoadAvgが表示された

```text

Access-Control-Allow-Origin: http://localhost 👈　追加されている
Connection: keep-alive
Content-Length: 19
Content-Type: application/json; charset=utf-8
Date: Tue, 24 Mar 2020 19:25:17 GMT
ETag: W/"13-78iQH47CLcJ0F+4s06WtpVC9PNc"
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Content-Type-Options: nosniff
X-DNS-Prefetch-Control: off
X-Download-Options: noopen
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
```
gitとgithub

# はじめに
## Gitとは
### Gitはバージョン管理システム
バージョン管理すると何が嬉しいのか
- どのファイルの誰がいつ何のために変化したかを残せる

###Gitの仕組み
変更履歴を順々に記録する。記録する際にメッセージをつける。

###流れ
- pull
 - 共有レポジトリを共有 
- レポジトリ
 - 変更履歴を記録する場所
- commit
 - 個人レポジトリに変更履歴を記録
- push
 - 共有レポジトリに登録

## GitHubとは
Gitリポジトリのホスティングサービス

### 特徴
- プルリクエストによるコラボレーション
- 他チームのソフトウェアを見れる

# Gitの初期設定
## 登録
' - git config --global user.name "name" '
' - git config --global user.email mailadress.com '
## ローカルレポジトリ作成
- リポジトリとはファイルやディレクトリの状態、変更履歴を記録する場所
' git init '
.gitディレクトリが作成される

## 流れ
 1. ファイルの変更をステージングエリアへ追加する git add
 2. ローカルリポジトリにコミットする git commit
 3. リモートリポジトリにプッシュする git push
 
ブラウザ側でレポジトリを作っておく。
' git remote add origin /// '

## 変更をコミット
1. ステージエリアへ追加 git add .ですべて入れることができる
2. コミットして変更を記録する。変更にメッセージをつけて記録できる。
- 1行目：変更内容のようやく
- 2行目：空行
- 3行目：変更の理由

- git statusで状態を見れる。緑色になっているとaddされている。最新のgit commitしたものからの変化を見ることができる。
- git logで過去のログを見れる　--oneline 一行で表示する -p ファイルの差分を表示

## 色々な変更をコミットできる
git rmで削除したものをコミットできる
git diff   add commitする前に確認する。ステージとcommitとの差をみたいときは--HEADをつける

## プッシュする
- 送信
- git push origin master　登録したgithubに送られる
- git push origin feature 

## Gitの管理から外す
.gitignoreファイルを指定することで、ファイルをGitの管理から外すことができる
自動生成されるファイルやパスワードが記載されているファイル
.gitignoreファイルの書き方
- ファイルを指定、ルートを指定
- コミットしてしまった場合 git rmを使う
- git rm --cachedファイルを無くせる gitignore必須
Flutterで RenderFlex children have non-zero flex but incoming height constraints are unbounded. のエラー



## 発生した問題

Flutterで以下のエラーが出て、進行不能になりました。

```
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
```

どうもここのColumnの箇所でエラーが出ているようです。(本当はもっとネストが深いです！笑)

```dart:main.dart
SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Expanded(
        child: Text('テキストです。')
      ),
    ],
  ),
);
```

## 環境

- macOS Catalina 10.15.1
- Android Studio 3.6.1
- Flutter 1.12.13


## 結論

`Column` 直下の `Expanded` を外して、子Widgetのサイズを見直すことで解決しました。


## 原因

スクロールができることで、Widgetの高さに制限がなったColumnが子WidgetのExpandedが高さを埋めるのに合わせて、無限に大きくなってしまったことでした。

本来ならば、親Widgetの最大まで埋めてくれるのがExpandedですが、columnに高さの上限値がないとこのようなエラーが起きてしまいます。

```dart:main.dart
SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Expanded(
        child: Text('テキストです。')
      ),
    ],
  ),
);
```

## 参考記事

Flutter RenderFlex children have non-zero flex but incoming height constraints are unbounded
https://stackoverflow.com/questions/59291894/renderflex-children-have-non-zero-flex-but-incoming-height-constraints-are-unbou

Column class(そもそもドキュメントでも注意されていました…)
https://api.flutter.dev/flutter/widgets/Column-class.html
Springのapplication.propertiesでシステム環境変数を扱う

# はじめに
Spring(Boot)でアプリを作成する際にシステム環境変数から値を取得したい場合がある。
メモ書きも兼ねて取得方法を紹介する。

# どんな時にシステム環境変数を使うか

例えばDBに接続したい場合、`application.properties`には以下のような設定をする必要がある。

```application.properties
### DB接続設定値 ###
spring.datasource.url=<データベースのURL>
spring.datasource.username=<ユーザー名>
spring.datasource.password=<パスワード>
```

こういった場合、各設定値をシステム環境変数から取得するようにしておけば、以下のようなメリットが考えられる。

①__環境ごとに設定ファイルを作成する必要が無くなる。__
環境変数を前もって設定しておくか、実行時に設定するようにすれば、同じ設定ファイルを他の環境でも利用することが出来る。
各環境ごとの設定ファイル(例えば、`application-devXX.properties`)を複数作成し、管理するのは手間になるのでそれを省略できる。

また、環境ごとに読み込むファイルを設定する処理をソースコードに書かなくてよくなる。（SpringBootではデフォルトで`application.properties`が読み込まれるので）

②__セキュリティの向上につながる。__
`application.properties`内にユーザー名やパスパスワードといった秘密にしたい情報をベタ書きした状態で、リモートリポジトリに上げてしまったりするとセキュリティの問題にもなりかねない。

環境変数にしておけば、値は直接書かれないので安心してリモートリポジトリにpushできる。


# `application.properties`内でシステム環境変数を利用する方法

以下のようなフォーマットで設定する。

```application.properties
spring.datasource.url=${SPRING_DATASOURCE_URL}
spring.datasource.username=${SPRING_DATASOURCE_USERNAME}
spring.datasource.password=${SPRING_DATASOURCE_PASSWORD}
```

例えば、`spring.datasource.username=${SPRING_DATASOURCE_USERNAME}`について説明すると、

①まずシステム環境変数に`SPRING_DATASOURCE_USERNAME=HogeHoge`のような変数を追加しておく。
環境変数名は設定ファイルの対象の値の`「.」`を`「_」`に置換したうえで全部大文字にしたものにする。

`spring.datasource.username` ⇒ `spring_datasource_username` ⇒ `SPRING_DATASOURCE_USERNAME`

②`application.properties`内では、`${SPRING_DATASOURCE_USERNAME}`のようにシステム環境変数名を`${}`で囲った値にしておく。


これでシステム環境変数を`application.properties`から利用することができるようになる。

# 注意点
eclipseやstsを使って開発をしている場合、システム環境変数を追加した後で、eclipse(sts)上でSpringBootアプリを起動したり、JUnitを実行しようとする際には一度再起動をした方がよい。
システム環境変数が読み取れずにエラーになる場合がある。

おそらく、eclipse(sts)起動時にシステム環境変数を読み込みそれを利用しているため、起動中に環境変数を追加しても反映されないからだと思われるが詳しくは不明。

# 結果
設定ファイルからシステム環境変数が利用できる！！！！！（ワザップ）
Retrofit2で共通処理を行う

AndroidアプリでAPIを叩きたい時、定番のライブラリと言えばRetrofitです。
このRetrofitを使って、APIからのレスポンスによって同じ様な処理を行う場合、毎回同じコードを書くのは面倒ですよね！
同じ様な処理は共通化しちゃいましょう！

# 通常のAPI呼び出し

例えば、エラー時に下記のようなToastを表示する仕組みがあったとします。
様々な箇所でAPIを呼び出す度、全てに同じ様な処理を書くのは効率が悪いです。
ここを上手く解決しましょう！

```kotlin
Api.getUser().enqueue(object: Callback<Response?> {
  override fun onResponse(call: Call<Response?>, response: Response<Response?>) {
    if(!response.isSuccessful) {
      // エラー時の処理
      Toast.makeText(context, "error!", Toast.LENGTH_SHORT).show()
    }
  }

  override fun onFailure(call: Call<Response?>, t: Throwable) {
  }
})
```

# Callbackのオーバーライド

`Callback` クラスを継承したクラスを作成し、 `onResponse` と `onFailure` をオーバーライドすることで、共通の処理を追加することができます。

```kotlin
open class CustomCallback<T>(private val context: Context): Callback<T> {
  override fun onResponse(call: Call<T>, response: Response<T>) {
    if(!response.isSuccessful) {
      // エラー時の共通処理
      Toast.makeText(context, "error!", Toast.LENGTH_SHORT).show()
    }
  }

  override fun onFailure(call: Call<T>, t: Throwable) {
  }
}
```

この様なクラスを作る事により、すべてのAPI呼び出し処理に共通処理を追加可能です。
下記のように使用します。
Toastの処理は書いていませんが、 `super.onResponse(call, response)` で元の処理を呼び出しているので、Toastが表示されます。
もちろん、 `onFailure` の箇所にも自由に追加可能です。

```kotlin
Api.getUser().enqueue(object: CustomCallback<Response?>(this) {
  override fun onResponse(call: Call<Response?>, response: Response<Response?>) {
    super.onResponse(call, response)
  }

  override fun onFailure(call: Call<Response?>, t: Throwable) {
    super.onFailure(call, t)
  }
})
```

簡単に共通処理を追加できるので、おすすめです！
【Python】Atomで競技プログラミング用の環境構築(input()使えます！)【Mac】

Atomで競プロに必須のPythonの標準入力
`input()`
が使用できる環境構築の情報がググってもあんまりなかった...
ので記事にしてみます！
たぶん全作業30分かかりません！超簡単！
ちなみにMacです。Windowでもできるかは不明！

#python3のインストール
[公式サイト](https://www.python.org/downloads/)からダウンロード
#Atomのインストール、初期設定
以下の記事が参考になりました！
[atom・pythonで競技プログラミングのテスト環境構築](https://qiita.com/crukky/items/73c1322f5929b1ca5834#%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99)
#その他やる事
ホームディレクトリ(同階層にはダウンロードとかデスクトップとかあるよ)
に「python」というフォルダを作ってそのフォルダ内に

- input.txt
- test.py

の2ファイルを作る。
これで準備完了。

イメージはこんな感じ↓
<img width="815" alt="スクリーンショット 2020-04-24 8.47.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183481/cdfd88f7-b82f-f18d-1cd5-132e255d9fa6.png">

**(2020/05/05 追記)**
現在のテンプレは、上の画像のテンプレと異なり、
`input()`ではなく、`sys.stdin.readline().rstrip()`を使っています。(タイトル詐欺w)
※`sys.stdin.readline().rstrip()`の方が断然早いことが実感できたため。
↓
現在のテンプレを記事にしました！
[【Python】競プロテンプレ【AtCoder】](https://qiita.com/rudorufu1981/items/c6bc5e4d72cfe1cb7f14)
よかったら、使ってください〜

#ターミナルの操作
以下の5個くらいコマンド・操作を知ってればいける。
　`clear` ターミナルをクリアする
　`pwd` 現在のフォルダの場所を確認できる
　`cd python` ホームディレクトリに作った「python」フォルダに移動
　`python3 test.py < input.txt` python3で実行
　`キーボードの上矢印ボタン`これまで入力したコマンドみれます
一度環境構築してしまえば
あとは、`キーボードの上矢印ボタン`で`python3 test.py < input.txt`を選んでEnterを押すだけで実行できます！


#Atomの操作
**(2020/05/06 追記)**
便利なショートカット一覧〜

- 行全体の削除(切り取り)
    - `command+x`
- 行全体のコメントアウト(複数行も可能)
    - `command+/`
- 変数名を一括で変えたい時
    - `command+ctrl+g`
- ターミナルの表示非表示
    - `ctrl+(Backtick)`(俺のキーボードだと`shift+@`)

#おまけ
ちなみにターミナルのコンピューター名・ユーザー名を非表示にしたい場合はこちらが参考になりました！
[Macのターミナルで最初のコンピューター名・ユーザー名を消す](
https://tech.qookie.jp/posts/terminal-turn-off-prompt/)

なにかあればコメントください！

おわり！
一般的な対処法をしてもz-indexが効かない（ように見える）

正確に言うと効いてるんだけど効いてないように見えるという話。
# z-indexが効かないときの一般的な対処法
 -  z-index以外の要因で重ね合わせコンテクストの変更が行われている
 -  親要素のz-indexに影響を受けている
 -  positionがstatic

概ねこのあたりだと思うのですが、私は上記いずれを試してもz-indexの効果が確認されず、重ね合わせた時にz-indexの低い要素が高い要素の上に位置していました（るように見えました。）

# 原因
`background-color`の初期値は`transparent`なのですが、この値は実は透過色で要素が重なり合った時に下位の要素が視認できてしまいます。
私はデフォルトの背景色は白色だと思っていたので微妙にハマってしまいました。