OmniAICreator/Qiita-1.07M huggingface dataset:
【iOS】未経験者からのiOSアプリ開発

# はじめに
はじめまして。
フリーランスエンジニアとして稼働しているなすびといいます。
プログラム未経験者に向けたiOSアプリ開発手順についてまとめています。

本投稿は各記事のアジェンダです。

基本的に以下のブログで投稿した記事をそのまま公開しています。
http://naoyalog.com/

#アジェンダ
随時投稿していきます。
※リンクされていないものは投稿予定の記事です
##iOSアプリ開発
###入門編
- [環境構築編](https://qiita.com/euJcIKfcqwnzDui/items/0bbde21f63825cb0cd88)
- [レイアウト編１](https://qiita.com/euJcIKfcqwnzDui/items/ba37adae94e07c89d404)
- [レイアウト編２](https://qiita.com/euJcIKfcqwnzDui/items/31f6b11afb317275f684)
- [SwiftとUIの接続編１](https://qiita.com/euJcIKfcqwnzDui/items/f794ee8b996e6d650027)
- [SwiftとUIの接続編２](https://qiita.com/euJcIKfcqwnzDui/items/93f010b989a4d333f0b9)
- [SwiftとUIの接続編３](https://qiita.com/euJcIKfcqwnzDui/items/ac50ed99673e10f15b71)
- [画面遷移編１](https://qiita.com/euJcIKfcqwnzDui/items/679b1cd30694519f4916)
- [画面遷移編２](https://qiita.com/euJcIKfcqwnzDui/items/6d37aaf00c0bc7ce26ca)
- [画面遷移編３](https://qiita.com/euJcIKfcqwnzDui/items/c0c0ccbd8d301b96d8b7)
- [ライフサイクル編](https://qiita.com/euJcIKfcqwnzDui/items/d50dc4ec1ccc798fc03e)

###初級編
- UIKit ~UITableView~ 編
- UIKit ~UICollectionView~ 編
- UIKit ~UIAlertController~ 編
- UIKit ~UIScrollView~ 編
- API通信

##Swiftプログラミング
###入門編
- [変数・型](https://qiita.com/euJcIKfcqwnzDui/items/5d4c674a975c90a3db3f)
- [構造体・クラス](https://qiita.com/euJcIKfcqwnzDui/items/f6e41f6b8f068c620ac6)
- [値型・参照型](https://qiita.com/euJcIKfcqwnzDui/items/58c8bc5ced324a64abb7)
- [メソッド・関数](https://qiita.com/euJcIKfcqwnzDui/items/89f51e72650e2068dc9d)
- [演算子](https://qiita.com/euJcIKfcqwnzDui/items/f9a8f52429d15cb0c1a2)
- [if文・switch文](https://qiita.com/euJcIKfcqwnzDui/items/21117d9192317c2fa37b)
- [for文・while文](https://qiita.com/euJcIKfcqwnzDui/items/5ef4708ddb9d1f5b02d2)
- [オプショナル型](https://qiita.com/euJcIKfcqwnzDui/items/b9c3e5c057bab7b6aee9)
- [列挙型](https://qiita.com/euJcIKfcqwnzDui/items/b58670fd07848dcee560)

###初級編
- [オブジェクト指向](https://qiita.com/euJcIKfcqwnzDui/items/3a442bdee2996654dd97)
- [継承](https://qiita.com/euJcIKfcqwnzDui/items/c62a8dfc75872e17d637)
- [アクセス修飾子](https://qiita.com/euJcIKfcqwnzDui/items/72f8c23496aac9774099)
- [プロトコル](https://qiita.com/euJcIKfcqwnzDui/items/b7ad792b3b0a70bae124)
- [デリゲート](https://qiita.com/euJcIKfcqwnzDui/items/88480297fe8190955098)
- クロージャー
- ジェネリクス
- 循環参照

###プログラミング練習問題
こちらの練習問題はPlaygroundを使って練習した方が楽だと思います。

- [Playgroundの使い方](https://qiita.com/euJcIKfcqwnzDui/items/856ad99040c35d977df5)

####練習問題
- [繰り返し１](https://qiita.com/euJcIKfcqwnzDui/items/f87eea73729284757711)
- [繰り返し２](https://qiita.com/euJcIKfcqwnzDui/items/118a64e22569c375e993)
- [フィボナッチ数列](https://qiita.com/euJcIKfcqwnzDui/items/962b6ec22817697e3ace)
- [ソート](https://qiita.com/euJcIKfcqwnzDui/items/17bf10b7872c17cd4ba9)
- [九九表示](https://qiita.com/euJcIKfcqwnzDui/items/f75144f8d9c2011630ab)
- [再帰処理](https://qiita.com/euJcIKfcqwnzDui/items/2f570e5b547dbc5b9535)
- [ハノイの塔](https://qiita.com/euJcIKfcqwnzDui/items/6561816b6bb5665bbcf6)
- [クイックソート](https://qiita.com/euJcIKfcqwnzDui/items/2fed0d13be3707bd8211)

#最後に
プログラムを全く触ったことがないという人に向け、なるべく細かく説明していますがわかりにくい部分があればご指摘いただけると幸いです。
AtCoder Beginners SelectionでRuby学習【Coins】短いコードで解答する

## はじめに
Ruby学習の一環として「競技プログラミング（競プロ）」に挑戦します。
そのための学習の中で学んだことをアウトプットしていきます。
今回は「AtCoder Beginners Selection」の五問目（Coins）より。
https://atcoder.jp/contests/abs

## 問題
500円がA枚、100円がB枚、50円がC枚持っています。
これらの硬貨の中から何枚かを選び、合計金額をX円にする方法は何通りあるか。
同じ種類の硬貨同士は区別出来ません。

制約
0 ≤ A,B,C ≤ 50
A + B + C ≥ 1
50 ≤ X ≤ 20,000
A,B,Cは整数である。
Xは50の倍数である。

入力は以下の形で与えられる。

```ruby
A
B
C
X

# 例
2
2
2
100
```


```ruby
出力例
# 上記例の場合
=> 2
```
条件を満たす選び方は以下の2通り。
500円を0枚、100円を1枚、50円を0枚
500円を０枚、100円を０枚、50円を2枚


## 解答
まずは僕が最初に書いたコードです。

```ruby
a = gets.to_i
b = gets.to_i
c = gets.to_i
x = gets.to_i

count = 0

a_array = []
b_array = []
c_array = []

for i in 0..a do
    a_array.push(500 * i)
end

for i in 0..b do
    b_array.push(100 * i)
end 

for i in 0..c do
    c_array.push(50 * i)
end

all_array = a_array.product(b_array, c_array)

all_array.each do |one_array|
    if one_array.inject(:+) == x
        count += 1
    end
end

print count
```

① 硬貨の種類ごとに、0枚からn枚まで、選べる枚数に応じた金額を持つ配列を生成する（for~do~end）。
※100円を3枚持っているなら、[0,2,4,6]の配列が生成されるように。
② 生成された3つの配列から1つずつの要素を取り出し、新たに配列を生成。これを全パターン用意（productメソッド）
③ ②で用意した配列1つ１つに対して、その要素の合計がX（を50で割ったもの）と等しくなるパターンの数を記録する (count)。

上記のような流れで解答しました。
この解答をする中で学んだメソッドを以下にまとめていきます。

### for文

```ruby
for 変数 in オブジェクト do
  実行する処理
end
```
オブジェクトに繰り返す範囲を指定します。
解答では、0から持っている硬貨の枚数まで、0枚、1枚、2枚と順に取り出し、変数に入れるイメージです。
その上でブロック内に指定する処理を繰り返す、といった具合です。
解答では、直前に生成した配列に、枚数に応じた金額を順に入れていっています。

### pushメソッド

```ruby
配列オブジェクト.push(要素, …)
```
pushメソッドは、配列の末尾に指定した要素を追加します。

### productメソッド

```ruby
#例
[1,2].product([3,4],[5,6])
=> [[1,3,5],[1,3,6],[1,4,5],[1,4,6],[2,3,5],[2,3,6],[2,4,5],[2,4,6]]
```
複数の配列が持つ全要素の組み合わせを配列にして返します。

### eachメソッド

```ruby
配列オブジェクト.each do |変数|
  実行する処理
end
```
配列から要素をひとつずつ取り出し、変数に代入した上で、
要素の数だけ指定した処理を実行します。

### injectメソッド
配列に対して、要素の合計を算出して返します。
今回はシンボル（:+）を用いた記法を使っています。

```ruby
#例
array = [1, 2, 3]
result = array.inject(:+)
print result
=> 6
```
改めて調べていて知りましたが、sumメソッドを使うともっと簡単に書けるようです。

```ruby
#例
array = [1, 2, 3]
result = array.sum
print result
=> 6
```
## 短いコードで解答する
ここからは今回の解答を短くしていきます。

### 縦に並んだ複数の整数入力を受け取る

```ruby
A, B, C, x = 4.times.map{gets.to_i}
```
#### timesメソッド
指定の回数処理を繰り返す場合に使います。

```ruby
#例
3.times { puts "Hello, World!" } 
=>Hello, World!
=>Hello, World!
=>Hello, World!
```

### 配列を生成せず、入力された整数を直接判定に使う
解答では配列を生成して、全てのパターンの金額を追加する、ということを行っていましたが、
これによって解答がえらく長いことになってしまっていました。
入力した整数をそのままeach文を使って判定に使用することでコードの長さを抑えられました。

```ruby
(0..A).each{|a|
  (0..B).each{|b|
    (0..C).each{|c|
      x == (500*a + 100*b + 50*c) ? count +=1 : count += 0
    }
  }
}
```

### 完成

```ruby
A, B, C, x = 4.times.map{gets.to_i}
count = 0
(0..A).each{|a|
  (0..B).each{|b|
    (0..C).each{|c|
      x == (500*a + 100*b + 50*c) ? count +=1 : count += 0
    }
  }
}
print count
```
空白を入れて32行あったコードが9行になりました。


## 最後に
以上、AtCoder Beginners SelectionでRuby学習【Coins】から学んだメソッド・記法をご紹介しました。
今回のように短いコードで解答する練習は常にやっていきたいです。
他の方の解答を見てみると1行で解答をされている方もいました。
そこまでいくには道のりは長いですが、その分やりがいもありますね！

もし間違いなどございましたら、ご指摘いただけると嬉しいです。
【Swift】各情報をアプリ内に保存＆取り出す方法

ユーザー情報など、他の画面で同じ情報を出力したい時に使用します。
用途：SNS、日記など

ユーザー名を例にコードを記載します。

##①保存する箇所・キー値を指定して、保存する。
```
//ユーザー名をアプリ内に保存する
UserDefaults.standard.set(プロパティ名.プロパティの中の変える場所, forKey: "キーの名前”)
```

###※画像の場合、加えてバイナリデータというデータ型に変換が必要
```
//プロフィール画像をアプリ内に保存する
let data = 保存したいプロパティ名.image?.jpegData(compressionQuality: 0.1)

UserDefaults.standard.set(data, forKey: "キーの名前")
```

##②取り出したい画面（コントローラー）で、受け取りたい箇所に合わせて、プロパティを設定する。
例、プロフィール画像（Data型→UIImage型）、ユーザー名（String型）
→画像表示するためには、Data型からUIImage型に変更が必要なため

```
var passedProfileImageData = Data()
var passedProfileImage = UIImage()
var passedUserName = String()
```

##③userDefaultからキー値・何型で受け取るかを指定して、取り出す。
```
//userDefaultsから取り出す時は以下のように記述する
        if UserDefaults.standard.object(forKey: "キーの名前") != nil {
            userName = UserDefaults.standard.object(forKey: “キーの名前") as! String
```
##④画像の場合、Data型からUIImage型に変更する
```
//Data型からUIImage型に変更する
        passedProfileImage = UIImage(data: passedProfileImageData)!
```

初心者視点で、機能だけに絞って一連の流れを記述しています。
訂正等あればぜひご指摘ください。
ポートスキャンしただけで落ちるCentOS6サーバ

Nessusで遊んでいて、「まったくパッチのあたっていないCentOS6.0」を診断してみたら、カーネルパニックで落ちてしまった。こういうことは、たまに（まれに）あって、流石にインターネットからだと滅多にないけど、ローカルから診断するとポートスキャンだけでもサーバーがダウンすることがある。久しぶりに見かけたし、手元の環境では初めてだったので、追いかけることにした。

デーモンが落ちるのではなくカーネルがいきなり落ちることから、NFSかなと思って切り分けたらビンゴだった。NFS単体の脆弱性ではなく（という言い方は変か、とにかくNFS関連のモジュール）、カーネルの脆弱性（どれだろう）のようだ。NFSサーバーではなく、クライアントとしてNFSマウントしているだけで落ちる。

netstat でNFSが開いてるポートを探して

```
$ sudo netstat -anp
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address               Foreign Address             State       PID/Program name
tcp        0      0 0.0.0.0:10022               0.0.0.0:*                   LISTEN      1159/sshd
tcp        0      0 0.0.0.0:49862               0.0.0.0:*                   LISTEN      1086/rpc.statd
tcp        0      0 0.0.0.0:111                 0.0.0.0:*                   LISTEN      1060/rpcbind
tcp        0      0 0.0.0.0:41523               0.0.0.0:*                   LISTEN      -
tcp        0      0 127.0.0.1:8888              0.0.0.0:*                   LISTEN      1306/0
tcp        0      0 127.0.0.1:25                0.0.0.0:*                   LISTEN      1235/master
tcp        0      0 0.0.0.0:220                 0.0.0.0:*                   LISTEN      1159/sshd
```

上記の場合だと、PIDが - になっている41523ポートにnmapをかけてやる

```
nmap -A -p 41523 192.168.0.24
```

この手順で100%クラッシュする。

Kernelのパッチをあてるとクラッシュしなくなるので筋は通っているのだけど、一つ疑問なのは、「いくらなんでも弱すぎないか」ということで、CentOS6+NFSなんて極めてありふれた環境で、ポートスキャンかけただけで落ちるのでは、すぐに問題になったと思うのだけれど、どうなんでしょうか。

---
追記

- YouTube動画制作した: [まったくパッチのあたっていないCentOS6を脆弱性診断したら驚きの結果に](https://www.youtube.com/watch?v=PRoA5mjxfPU)
- 再検証したところ、CentOS6.0の64ビット版では再現せず、32ビット版では再現することがわかった
Raspberry Pi OS(raspbian)のインストール手順

## はじめに
Raspberry Piを購入してから、OSのセットアップするまでの手順について記載します。たまにやると、どうするんだったっけ？となるので、備忘録です。これが唯一の手順ではありません。

## 実施環境　2020.5.17時点の記録
- Windows10
- Raspberry Pi4 4GB 
- MicroSDカード　32GB　+　書き込み機器

## 手順
1. [Raspbian](https://www.raspberrypi.org/downloads/raspbian/) ここからOSのイメージを入手します。
2. Raspbian Buster with desktop and recommended softwareを選択し、「Download ZIP」をクリックします。サイズは 2530 MB
3. ダウンロードしたものを解凍する。サイズは　7G越え
4. [balenaEtcher-Portable](https://www.balena.io/etcher/)でSDへの書き込みアプリを入手し、実行する。
5. 書き込み機器にSDカードをセットすると認識されます。
6. 3.で解凍したイメージを選択し、STARTをクリックすると、SDへの書き込みが始まります。10分ぐらいかかります。
7. 書き込みが完了すれば、Raspberry Piに差し込み起動する。
8. 起動後は、こちら[Raspberry Pi 4へOSをインストールする(Raspbian編)](https://pcmanabu.com/raspberry-pi4-install/)のサイトを参考にすれば、必要最低限の設定ができます。

## あとがき
二台のラズパイを使って遊んでます。一台は定時になると、写真を撮ってメールに添付送信、ゴミ捨て日のお知らせ、天気予報、電車の遅延などをしゃべらせてます。もう一台は実験用として、最近はGit、Dockerを学習中。
なので、たまにクリア環境を作りたくて、この手順を実施しています。
民間企業の情シスが本当に欲しいZabbix

#民間企業の情シス
フリーランスのSE(インフラSE)を生業にして約15年。
ベンダー系企業に常駐することが多かったが，2年前より初の民間の情シスへ常駐している。
民間企業の情シスは守備範囲が広い。サーバ構築など手を動かす仕事はベンダーに任せるが，クライアントPCの不具合，サーバの不具合，ネットワーク機器の不具合，しいてはOffice製品の問い合わせまで対応をする。
そんな守備範囲の広い民間企業の情シスで一番負荷が高く，緊急かつ重要な仕事が障害対応である。
ユーザからすればサーバは動いて当たり前，ネットワークはつながって当たり前の感覚でいるので，障害が起こった時は電話と非難の嵐である。
その上，ダウンタイムが影響人数と時間当たりのコストから損害金額として算出され，ただでさえお金を生まない部署なのに損害を出したことでどんどん立場が弱くなっていく。
民間企業の情シスはこんな立場の所が多いのではないだろうか，と思う。
#常駐開始後まもなく
常駐した翌日に社内ネットワーク全停止という大規模障害が発生した。
その時の対応を見て，障害が発生した場合，どのように障害を検知し，連絡し，対応しているかを聞いてみたが，システム障害，ネットワーク障害を検知するための監視システムが入っておらず，情シスが障害を検知するタイミングは「ユーザからの連絡のみ」という状況だった。
![スライド2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637535/6db34505-03a8-cabc-a277-0cd71a3eb5d9.png)
#監視システム「Zabbix」の導入
せめてサーバとネットワーク機器を監視しておいて，障害が発生したことを検知できる体制を作ることが必要だと思い，監視システムの導入を手掛けることにした。今までもベンダーから監視システムの提案はあったがそれなりの費用がかかる上，その他の仕事に追われて後回しとなっているのだとも聞いた。
そうなれば導入費用のかかるものはNGとなる。必然的にオープンソースであるZabbixを選定して導入を進めた。
まずはubuntu16.04+Zabbix3.0の組み合わせでVMに構築した。
私にとってZabbixはこの時がデビューだった。
まずは，疎通できなくなることが一番の障害なので，どのサーバ，どのネットワーク機器が通信できなくなったのかを検知するためにping監視と障害メールの送信を設定した。
#Zabbixを育てる
Zabbixの導入は障害対応スピードの向上に大きく貢献した。
連絡が入って初めて知ることはほぼなくなり，逆にユーザが気付かないレベルで検知するのでこちらから「障害が起きているようなので調べてください」と拠点の担当者にアウトバンドできるようになった。
また，Zabbixのマップにネットワーク構成図を表示して，障害が発生した機器がすぐ分かるようにしたり，メールでは気づかない時もあったので，障害発生時にはパトランプを連動させるようにした。
しかし，ネットワーク構成図のマップをダッシュボードに表示しておいてもどこにある機器なのかが分からないと不便だな，と思うようになった。
そんな中，Zabbixも触りなれてきたので，最初から構築しなおした。
ついでにZabbixのバージョンアップも行い，ubuntu18.04+Zabbix4.0で構築した。
拠点のネットワーク調査(実際の配線レベル)も同時に行っていたので，拠点の平面図に機器配置と配線を描いた調査図をZabbixに使えたら誰が見ても，どこで障害が発生しているか一目で分かるのではないかと思い，Zabbixへ反映した。
![スライド3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637535/69a325e1-58ff-547a-fc53-540f1088221e.png)
![スライド4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637535/b49f1e98-75e6-6b53-8ab7-99530dc75132.png)
![スライド5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637535/a8d08f36-660a-6fd8-5ddc-7341cf7e122c.png)

#民間企業に必要なZabbix
監視システムの必要性は契約先にも十分理解してもらえた。
本運用開始後半年ぐらいだが，今ではなくてはならないものになり，社員の方にZabbix公式トレーニングプログラムを受けてもらうまでになった。
民間企業の情シスは運用方である。
今回とても勉強になったのは，システム屋が構築するシステムと運用方が欲しているシステムには開きがあり，そこがうまく融合していないシステムは廃れ，融合したシステムはとても役に立つということだった。
言葉にすると当たり前のことかもしれないが，この違いをうまく融合できていないシステムは多いと思う。「運用でカバー」という言葉を聞くことが多いが，この言葉は融合していないから出る逃げの言葉だと良くわかった。
ベンダー系企業の情シスや社外へ情シス部門を出している企業，成熟した情シスを持っている企業であれば，ホスト名やIPアドレスで機器の位置，情報，役割などが頭に浮かぶレベルだったりする。
そういう企業では私が作った運用方のZabbixは必要ないと思う。
情シスが何でも屋になることの多い中小の民間企業では運用方Zabbixの必要性が分かってもらえると思う。
#最後に
最後まで読んで頂きありがとうございました。
Zabbixを触ったのはこの導入が初めてで難しいことは何もやっていません。
今はSWのステータスをブラウザで表示したり，Office365の応答時間を表示させたりとZabbixを育成中です。
お困りのことや知りたいことがありましたらお気軽にご連絡ください。
また，
https://www.lancers.jp/skill_pkg/items/727
で簡単なコンサルも受け付けています。
導入相談～導入，フォローも可能です。

ありがとうございました。
http://www.office-hayashi.biz/
Defcon DFIR CTF 2018 HR Server - Entry Number 2

#問題

https://defcon2018.ctfd.io/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/dc02a8a9-8be0-09be-f4e3-5f53370f2e1c.png)


HRサーバー-エントリー番号
2

次のファイルのMFTエントリ番号は何ですか？ \ xampp \ mysql \ bin \ mysql.exe

[形式は整数です]

#解いてみた

さっきの問題の逆をやればよさそうです。

nameをmysql.exeで絞り込みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/d9fa1b11-cc8f-1da0-6f70-bfa64e5701ed.png)

2つありました。フォルダが書かれておらず、問題のファイルがどっちかは判定できません。
CTFなので上から順に答えるのも手ですが、どうせならフォルダも確認してみます。

pidが自分の親フォルダの番号を示すはずなので、とりあえず上のほうの115262でidを検索してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/aa6e3355-f999-a043-0b13-89d6898e42bd.png)

binでした。
ちょっとめんどいけどさらにpidを使ってidを検索してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/9bf19fad-a467-d4e2-3769-f99b0d10a2a4.png)

mysqlでした。
さらに上を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/9e937815-8129-5ac3-310b-2ed932b10f4e.png)

xamppでしたので上が答えのようです。

#ちなみに

念のため、下のほうもやってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/71ceebaa-2a1e-58d4-6e9c-8e744325498a.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/39c6c088-74d6-6d19-06b9-2851a5ff6c7b.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/faff1673-d372-fa07-bb48-a5d6df2132e3.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/552d73c3-423b-bda6-7d14-626879ad9151.png)

んーここで異なるフォルダ名が出てきました。
ちなみに続きをやってみます。

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/1ce87415-c2df-480e-02d7-23ef4f3d21ab.png)

↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/7ecbf985-45c4-d433-1f36-2ca9dcb783f8.png)
webpackでビルドしたscriptに、HTMLから値を渡すアレ

LaravelやRailsみたいな環境で、バックエンドからフロントエンドに値を渡したいときのアレです。i18n対応とか。
方法忘れて2時間くらい溶けたのでメモ。


## 今回の用途
LaravelのViewから `@lang('hoge.fuga')` ヘルパ関数で、i18n済みメッセージ文字列を渡したい

> 今回は省略しますが、セキュリティ対策は各環境でお願いします。

### Laravel View

コツってほどでもないですが `mix()` は一番最後。

```dokoka.blade.php
... 中略

<script>
  var __SYS_GLOBALS_ = {
    HOGE_FUGA_MESSAGE: "@lang('hoge.fuga')"
  };
</script>

... 中略
/
<script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>
```

### Typescript側

モジュールとして、どこか新規ファイルに下記のように書いておけば良いです。
**ただしインポートするとエラーになります。**インポートはしない。不思議ですよね。

```__SYS_GLOBALS__.ts
export {};
declare global {
  const __SYS_GLOBALS__: any;
}
```

> インポートするとTS内で再定義されてしまうのでしょうか、その場合確かに(TS内には)実体はないのでエラーになりそう。
> 
> ```
> TS2304: Cannot find name '__SYS_GLOBALS__'.
> ```

あとはお好みで定数を使います。

```nanika.ts
alert(__SYS_GLOBALS__.LOADING_NOW_MESSAGE);
```

### まとめ
こんな設計はいけません。わかってはいるのですが、そういうときもあるのです。[終]
MacOSを10.13から10.15にアップデートし、Xcode10.3をXcode11.4にAppStoreでアップデートしたらfileが見れなくなった

Xcodeで開発している方、わかったら教えてください。
MacOSを10.15にアップデートしたことでXcode10.3が動かなくなりました。そこでXcode10.3との共存環境を作成することなく、いきなりAppStoreでXcodeを11.4にアップデートしました。それでもfine名 could not be openedのメッセージが出て、Xcode10.3で動いていたプログラムが開ません。
MacOS 10.15.4 CatalinaでXcode10.3で動いていたプログラムを動かす方法（Xcodeを11.4にしてもちろんいいのですが）を教えてください。

Apple Developer Forumに質問して解決しました！

MacOS Catalinaにmigrationする過程で起きる、the "locked" folder permission issuesに関連した事象と思われます。古いproject folderがゴミ箱から見つかり、それを戻したらXcode11.4で無事稼働しました。
Javaのwhile文とfor文

###while文
while文は一定の処理を自動で繰り返し処理をしたいときに使います。
例えば、1~100までの数字をコンソールに出力したい場合、System.out.println()を100回書くのはコードが冗長になってしまいます。そこで、while文を使います。
繰り返し処理の流れとしては
①変数の初期化
②条件式
③繰り返す処理
④変数の更新
そこからまた
②条件式
③繰り返す処理
④変数の更新
と、繰り返します。

```Main.java
while (条件) {
  繰り返す処理;
}
```
上記のwhile文を使えば繰り返し処理を実行できます。
【例】

```Main.java
int x = 3;
  while (x <= 3) {
  System.out.println(x + "位");
  x++;
}
```
上記はx = 3で変数xを定義しています。x++;はxに1を追加していきます。
変数に1を足していきますので、そうすると4回目の繰り返しでwhileの条件がfalseになり、繰り返し処理が終了します。

【例】

```Main.java
int x =5;
  while (x > 0) {
  System.out.println(x);
  x--;
}
```
上記はが0より大きい場合に繰り返し処理をします。
###for文
while文と一緒でfor文も繰り返し処理の1つです。
繰り返し処理の流れとしてはwhile文と一緒で
①変数の初期化
②条件式
③繰り返す処理
④変数の更新
そこからまた
②条件式
③繰り返す処理
④変数の更新
と、繰り返します。
for文

```Main.java
for (変数の初期化;条件式;変数の更新) {
  System.out.println(繰り返す処理); 
}
```
【例】

```Main.java
for (int x = 1;x <= 10;x++) {
  System.out.println(x); 
}
```
上記ように記述すると10回処理を繰り返します。
使うのであればfor文の方が使いやすいですね。
###continue
繰り返し処理を終了するにはbreakを使いますが、continueはその周の処理だけをスキップして、次の周を実行します。
【例】

```Main.java
for (int x = 1;x <= 10;x++) {
  if(x%5==0) {
  continue;
  }
  System.out.println(x); 
}
```
上記のように記述すると、5の倍数の周のループを終了し、次のループを実行します。
gravatarでサイトに自身のアバター写真を表示させる(RAILS)

#イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634461/7c341be5-052c-40ab-d22a-c356310cb69b.png)

#1.Gravatar登録、写真アップロード
https://en.gravatar.com/

#2.コード
```application_helper.rb
module ApplicationHelper
  def avatar_url(user)
    gravatar_id = Digest::MD5::hexdigest(user.email).downcase
    "https://www.gravatar.com/avatar/#{gravatar_id}.jpg?d=identicals&=150"
  end
end
```
説明：user objectよりuser emailをinput parameterとして取得。Digest::MD5::hexdigestよりuser emailをmd5スタンダードに変換して(参考：https://qiita.com/tdrk/items/2272f19cf0229df69554)、変数gravatar_idに代入。
そして次のリンクに返す。

#3.自分の登録EメールのMD５をチェック
まずhttps://www.md5hashgenerator.com/
で自分のメールアドレスを入力してMD５ハッシュを生成する
次にhttp://gravatar.com/avatar/生成したハッシュ.jpg
をURLに打つとGRAVATARで登録した画像が表示されるはず。
これが実は＃２のコードの流れと似ています。

#4.HTMLにimage_tagを追加
```例.html.erb
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
                  role="button" aria-haspopup="true" aria-expanded="false">
                  <%= image_tag avatar_url(current_user), class: "image-circle avatar_small" %>&nbsp
                  <%= current_user.fullname %> <span class="caret"></span></a>
```
class: "image-circle avatar small" %>&nbspの部分でアバターを丸めて、scss設定したavatarのサイズを適用して、間にスペースをおきます。

#5.補足
avatar_urlはヘルパーであるためアプリ内においてどこでも使用できる。
WSL(ubuntu)にrustをインストールする（デバッグまで）

###windows10 のwsl（ubuntu）にrustをインストールする
- 下記のコマンドでターミナルに実行する  
`curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh`

- `>1`でデフォルトにインストールする
![rust_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/67904c0a-9da8-8f14-e10f-85c251b2642d.png)

- インストール後`source $HOME/.cargo/env`で環境変数の変更を反映する
- `cargo --version`で反映結果を確認する
`cargo 1.43.0 (2cbe9048e 2020-05-03)`が出れば問題ないです。

- サンプルソース作成
`mkdir $HOME/projects`でソースファイルを作成する
`cargo new hello_cargo`で「hello_cargo」というプロジェクトを作成する
`cargo run`でコンパイルして実行する
`error: linker ``cc`` not found`は発生すると、gccをインストール必要です。
`sudo apt install build-essential`でインストールする
`sudo apt-get update --fix-missing`一部取得できないpackageがあれば、このコマンドを実行する

- debugするため、vscodeに「Rust」と「CodeLLDB」をインストールする
![vscode_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/0482066c-793b-87f6-9124-372bf77f0649.png)

- wsl(ubuntu)にもLLDBをインストールする
`sudo apt install lldb`でインストールする。`lldb --version`でインストール結果を確認する

- launch.jsonファイル作成
![launch01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/392ca9c8-0e4d-cb62-3e86-8582750c2548.png)
![lldb_select.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/a6a58fba-4d08-dd00-5cdd-64ffb95e2037.png)
![launch02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/b2733b72-b5bc-2c3e-7dbc-f5b01aece302.png)
`"program": "${workspaceFolder}/hello_cargo/target/debug/hello_cargo",`のようにcargo buildで作ったバイナリobjのパスを指定するとデバッグ可能になる
![linux_debug.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/6828aae1-5b79-4d80-bb1f-918aaf20f197.png)
Defcon DFIR CTF 2018 HR Server - Entry Name 2

#問題

https://defcon2018.ctfd.io/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/354774c7-42ee-bb24-ab19-025b08a16f29.png)

HRサーバー-エントリ名
2

MFTエントリ168043を表すファイル名は何ですか？

#解いてみた

MFTの解析をする問題です。

とりあえずイメージを読み込みます。
FTK Imager使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/b5d0121b-37b7-520a-6e59-358751e2bc48.png)

Windowsマシンですね。
Cドライブ直下にある$MFTをエクスポートします。

fteを使います。
http://www.kazamiya.net/fte

読み込んだらエクスポートして、Excelで見ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/6a26e3de-2259-8599-9822-1c25ddeadabc.png)

この中のidが168043になってるのが答えでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/71279dd6-9665-2b26-9c91-edca936f5e18.png)
grafana-kiosk でログイン、全画面表示を自動化

## 概要
https://github.com/grafana/grafana-kiosk
名前の通り、自動でログイン、全画面表示してくれる激神ツール

Readmeが超絶親切であるため、ここに書くことは何もない。

### 動機
以前書いた以下の記事
[SwitchBot Meter を InfluxDBに貯めてGrafanaでグラフ化した](https://qiita.com/YukisanMoe/items/f3c25abf71fafbdd086a)

なぜか毎朝ログイン画面に戻されており、毎回ログインしなおして全画面にするのが面倒極まりなかった。

## Win 32bit
使わなくなったWin10タブレット miix2 8
残念ながらOSが32bitなのであった。
そして grafana-kiosk には releaseバイナリに32bit版が無いという悲しみ。

仕方ないので自分でビルドしようと思った。

## 環境構築
面倒なのでWSLでUbuntuを入れた。参考になりそうな記事はこちら。
https://qiita.com/Aruneko/items/c79810b0b015bebf30bb

Ubuntuが入ったら、2個だけ追加でインストール。

```bash
apt install golang-go
apt install make
```

### makefileを修正
以下の行を足す

``` makefile
grafana-kiosk: dev
	# 中略
	GO111MODULE=on GOOS=windows GOARCH=386 go build -o bin/grafana-kiosk.windows.386.exe -a -tags netgo -ldflags '-w' pkg/cmd/grafana-kiosk/main.go
```

### ビルド

```bash
make
```

うまくいくと`bin`フォルダに`grafana-kiosk.windows.386.exe`が！！！

## 完成
(ﾟдﾟ)ｳﾏｰ
【JavaScript】分割代入

オブジェクトのプロパティを変数に代入することができる。


``` main.js
let menu = {
    title: 'スパゲッティポリタン',
    cook: 'メインシェフ',
    price: 1500,
    resources: {
        pasta: '生パスタ',
        main: 'ベーコン'
    }
};
console.log(menu.title);
console.log(menu.cook);
console.log(menu.resources.pasta);
console.log(menu.resources.main);

let { title, cook, resources: { pasta, main, topping } } = menu;

console.log(title);
console.log(cook);
console.log(pasta);
console.log(main);
console.log(topping);
```
```
スパゲッティポリタン
メインシェフ
生パスタ
ベーコン

スパゲッティポリタン
メインシェフ
生パスタ
ベーコン
undefined
```
別の変数名に割り当てることも可能

```main.js
let { title: name, cook: partner, resources: { pasta: kind, main, topping } } = menu;


console.log(name);
console.log(partner);
console.log(kind);
console.log(main);
console.log(topping);

スパゲッティポリタン
メインシェフ
生パスタ
ベーコン
undefined
```
最低限知っておきたいBootstrapの使い方

# はじめに

ここでは、Bootstrapの基本的な利用方法について解説します。


# スターターテンプレート

Bootstrapには、色々なデザインが用意されていますが、その大元となる「スターターテンプレート」があります。


# よく使うデザイン

## Jumbotron

ウェブページのヘッダーのテンプレートとして使いやすいデザインです。
https://getbootstrap.jp/docs/4.4/components/jumbotron/


## Alerts

処理完了やエラーメッセージの表示に使えます。
`alert-`のclass属性は、色の指定にも使えるので便利です。

https://getbootstrap.jp/docs/4.4/components/alerts/



## Buttons

他のページへのリンクやフォームの送信ボタンなどに使えます。
こちらも`btn-success`などのクラス属性は、色を変える時に使えます。

https://getbootstrap.jp/docs/4.4/components/buttons/


## Cards

ブログの記事一覧で個々の記事を表示したりするのに使えます。

https://getbootstrap.jp/docs/4.4/components/card/


## Forms

新規登録や記事投稿などのフォームに使えます。

https://getbootstrap.jp/docs/4.4/components/forms/


## Navbar

ヘッダー部分のメニューバーなどとして使えます。

https://getbootstrap.jp/docs/4.4/components/navbar/


## Pagination

記事一覧ページなどのページネーションに使えます。

https://getbootstrap.jp/docs/4.4/components/pagination/


# チートシート

[Bootstrapのチートシート](https://hackerthemes.com/bootstrap-cheatsheet/)のページには、様々なデザインと、対応するコードがまとめられています。
【学習メモ】Railsローカル環境構築〜サーバー接続編〜

＜条件＞
Ruby:2.6.5
Rails:6.0.3

※これまでやっていたテキストは、
Ruby：2.5.1
Rails:5.2.0
で古く、バージョンUPの処理をしてからRailsサーバーに接続しようとした。

＜エラー内容＞
で、Railsサーバーに接続しようとしたところ、
下記のようなエラーが出た。

```
Webpacker configuration file not found /***/config/webpacker.yml. 

Please run rails webpacker:install Error: No such file or directory @ rb_sysopen -

/***/config/webpacker.yml (RuntimeError)
```

「run rails webpacker:install

＜原因＞

```
Webpacker configuration file not found /***/config/webpacker.yml. 
```
訳：Webpacker設定ファイルが見つかりません、configにはね。

```
Please run rails webpacker:install Error: No such file or directory @ rb_sysopen -
```
訳：webpackerインストールさせてみ。ファイルやディレクトリにないもんで。

```
/***/config/webpacker.yml (RuntimeError)
```
訳：config中の実行エラーですよ。


＜解決策＞

```
$ rails webpacker:install
Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
```

yarnがインストールされてないと言われているので、インストールします。

```
$ brew install yarn
```
yarnもインストールできたので、再度webpackerをインストール。

```
$ rails webpacker:install
     create  config/webpacker.yml
Copying webpack core config
      create  config/webpack
      create  config/webpack/development.js
(省略）
├─ webpack-dev-middleware@3.7.2
├─ webpack-dev-server@3.11.0
└─ ws@6.2.1
✨  Done in 20.05s.
Webpacker successfully installed 🎉 🍰
```

```
$ bin/rails s
=> Booting Puma
=> Rails 6.0.3 application starting in development 
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.3 (ruby 2.6.5-p114), codename: 
（省略）
Use Ctrl-C to stop
```

でサーバーに接続できました！
「ネットワークはなぜ繋がるのか」をザックリまとめた。

ブラウザにURLを入力してからホームページが表示されるまでの流れを超ザックリと並べました。

## HTTPリクエスト・メッセージを作成する
URLの入力等の動作が行われたら、まずはブラウザがHTTPリクエスト・メッセージを作成する。
次は、それをOSに依頼してアクセス先のWebサーバーに向けて送信してもらう。

が、、OSに送信を依頼するときは、ドメイン名ではなくIPアドレスでメッセージを届ける相手を指定しなければいけない。

## WebサーバーのIPアドレスをDNSサーバーに問い合わせる
DNSリゾルバ（Socketライブラリに入っているプログラム）を呼び出すと、リゾルバがDNSサーバーに問い合わせのメッセージを送ってくれる。
応答が返ってくると、リゾルバはその中からIPアドレスを取り出して、ブラウザから指定されたメモリー領域の中に書き込む。

→ブラウザは上で受け取ったIPアドレスをメモリー領域から取り出して、HTTPのリクエスト・メッセージと一緒にOSに渡す。

*DNSサーバーへリゾルバがメッセージを送信する時も、DNSサーバーのIPアドレスが必要。
ただこれはTCP/IP設定項目のひとつとしてコンピューターに予め設定されている。後から変更することも可能。

目的のDNSサーバーに辿り着くまでの流れ
例えばwww.ken.engineer.com
1. 最寄りのDNSサーバー
2. ルート・ドメイン
3. com
4. engineer
5. ken

## プロトコル・スタックにメッセージ送信を依頼する

OS内部のプロトコル・スタックにメッセージ送信動作を依頼するときは、Socketライブラリのプログラム部品を決められた順番で呼び出す。

データの送受信動作は次の４つのフェーズに分かれている
1. ソケットを作る（Socketライブラリのsocketというプログラム部品を呼び出す→ディスプリタが返ってくる。）
2. サーバー側のソケットにパイプを繋ぐ（connectとうプログラム部品を呼び出す、IPアドレス、ポート番号、ディスプリタの情報を使って接続する）
3. データを送受信する（writeを呼び出す、ディスプリタとHTTPのリクエストメッセージなどの送信データを指定する。その後readを呼び出して、受信料する。）
4. パイプを外してソケットを抹消する(closeを呼び出す)


*ディスプリタとはソケットを識別するもの(例えばブラウザでウィンドウを二つ同時に開く場合など、１台のコンピューターの中に複数のソケットが存在することがあるので)
*ポート番号は接続相手側からソケットを識別するために使う

## ハブとスイッチ、ルーター

1. コンピューターから出てきた信号は、ケーブルを伝わってリピーター・ハブの中を流れる

2. スイッチング・ハブのパケット中継動作。
スイッチング・ハブは信号を流すのではなく、パケットの信号を受信してデジタル・データの姿に戻し、再び信号に直して送信するという動作によってパケットを運ぶ。

3. ルーターのパケット中継動作
スイッチング・ハブはイーサネットの仕組みに基づいて作られた機器であるが、ルーターはIPの考え方に基づいて作られている。

4. ルーターの付加機能
ルーターには、プライベート・アドレスをグローバル・アドレスに書き換えるアドレス変換機能や、危険なパケットを遮断するパケット・フィルタリング機能を利用するのが通例。

*家庭のルーターは、リピーター・ハブやスイッチング・ハブを内臓していることが多い。

## アクセス回線を通ってインターネットの内部へ
1. ADSL技術を用いたアクセス回線の構造と動作
2. 光ファイバを用いたアクセス回線（FTTH）
3. アクセス回線で用いるPPPとトンネリング
4. プロバイダの内部
5. プロバイダを跨って流れるパケット

## サーバー側

1. アクセス先となるサーバーの所在地には大きく３パターンある。
 - ルーターで直結する。（社内LAN）
 - ファイアウォールで分離する。（社内LANと公開サーバー用LANで分離する）
 - 接続事業者のデータ・センターに設置する。

2. ファイアーウォールとは？
 - 関所の役割を果たすもの。特定のサーバー上で動くアプリケーションにアクセスするパケットだけを通し、それ以外のパケットを遮断する役割を持っている。宛先IPアドレス、送信元IPアドレス、ポート番号、TCPコントロール・ビット(接続方向)等で制限をかける。

3. 複数サーバーにリクエストを振り分けてサーバーの負荷を分散する
 - DNSサーバーに同じ名前でWebサーバーを複数登録する。この方法をラウンドロビンという。
 - 負荷分散装置（ロードバランサー）を使う。
 
4. キャッシュ・サーバーを利用してサーバーの負荷分散を行う。
 - プロキシという仕組みを使って、データをキャッシュするサーバーのこと。
 - プロキシとはWebサーバーとクライアントの間に入って、Webサーバーへのアクセス動作を仲介する役割を持つもの。

## サーバーにリクエストが到着
1. サーバーの受信動作
 - プロトコル・スタックが受信したメッセージを、Socketライブラリを通じてWebサーバー・アプリケーションに渡す。

2. Webサーバー・ソフトがリクエスト・メッセージの意味を解釈して要求に答える。

3.ブラウザがレスポンス・メッセージを受け取り画面に表示
Xcodeプロジェクト作成時にMain.storyboardから脱却する方法

# 環境
Xcode: Version 11.3.1 (11C505)
Swift: 5
iOS: 13.2

# 手順
1. アプリ本体とTestのinfo.plistからMain storyboard file base nameの項目を排除する
2. Main.storyboardを削除する
3. SceneDelegateに追記する

```swift/SceneDelegate.swift

 func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
         guard let scene = (scene as? UIWindowScene) else { return }
 
         window = {
             let window = UIWindow(windowScene: scene)
             window.rootViewController = ViewController()
             window.makeKeyAndVisible()
             return window
         }()
     }
```

以上
pythonでシステム環境変数を読み込む－その２

# 概要
[pythonでシステム環境変数を読み込む－その１](https://qiita.com/UT_EE/items/e9ddf0073659fb183eac)を応用して、システム環境変数を取得するpythonプログラムを作成する。

# 構成

* EnvironWrapper.py･･･システム環境変数をカプセル化したpythonクラス

```EnvironWrapper.py
import os

class EnvironWrapper:
    """ 
    class:EnvironWrapper

    概要:環境変数から読み込んだ起動パラメータを保持するクラス
    """

    # 環境変数
    defaultenv_context = {
        "SECRET_KEY" : 'naishokey', # SECRET_KEY
        "DEBUG_FLG" : 'true', # DEBUG_FLG
        "ALLOWED_HOSTS" : None,   # ALLOWED_HOSTS
    }
    # 環境変数
    getenv_context = {}
    def __init__(self):
        """
        コンストラクタ
        os.environから環境変数を読み取る
        """
        for key, value in self.defaultenv_context.items():
            param = os.getenv(key, default=value)
            if key == "DEBUG_FLG" :
                param = False if param.lower().startswith('false') else True
            self.getenv_context[key] = param

    def GetParams(self, key : str) -> object:
        """
        GetParams:環境変数取得処理

        Arguments:
            key {str} -- 環境変数キー

        Returns:
            object -- 環境変数値
        """
        return self.getenv_context[key]

if __name__ == "__main__":
    env = EnvironWrapper()

    for key, value in env.getenv_context.items():
        print(f"key:{key}, value:{value}")
```
システム環境変数にはwindowsの%USERNAME%の様な永続化されたデータも含まれており、必要なシステム環境変数だけに限定したい。
`defaultenv_context`で利用するシステム環境変数とそのデフォルト値を定義し、必要なシステム環境変数をgetenv_contextに辞書型で保持する。
`os.environ`がそもそも辞書型なので、environのラッパークラスと命名している。

---
* EnvironWrapperRun.bat･･･Windows起動用

```EnvironWrapperRun.bat
@ECHO OFF

ECHO ＜投入値＞
REM 設定ファイルの読み込み
FOR /F "usebackq delims== tokens=1,2" %%i IN ("setting.ini") do (
    SET %%i=%%j
    SET %%i
)

ECHO:
ECHO ＜取得値＞
python EnvironWrapper.py
```

---
* EnvironWrapperRun.sh･･･Linux起動用

```EnvironWrapperRun.sh
#!/bin/bash

# 設定ファイルの読み込み
echo ＜投入値＞
while read line
do
export $line
echo $line
done < setting.ini

echo ＜取得値＞
python3 EnvironWrapper.py
```


---
* setting.ini･･･システム環境変数を定義した設定ファイル

```setting.ini
SECRET_KEY=1234567890qwertyuiopasdfghjklzxcvbnm
DEBUG_FLG=True
ALLOWED_HOSTS=127.0.0.1
```

今回設定するシステム環境変数はOSに依存しないよう、setting.iniにまとめている。
システム環境変数の使用方法がOSに異なるため、起動用ファイルを分けている。
起動用ファイル内でsetting.iniを１行ずつ読み込んでシステム環境変数にセットしてからpythonプログラムを実行する。

* windowsでは`SET 変数名=変数値`、`%変数値%`で参照可能
* Linuxでは`export 変数名=変数値`、`$変数値`で参照可能、

# 次の課題

setting.iniの内容でわかる通り、Djangoのsetting.pyで使用する設定値を定義している。
setting.pyの設定値を開発状況(develop-staging-release)に合わせて、起動時にDIできるような仕組みを検討する。
Defcon DFIR CTF 2018 HR Server - Acquisition Software Version 2

#問題

https://defcon2018.ctfd.io/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/66642333-b589-277a-adf1-54cd12fb3de0.png)


HRサーバー-取得ソフトウェアバージョン
2

HRサーバーのイメージ化に使用されたソフトウェアのバージョンは？ [フォーマット：n.n]

#解いてみた

1問目とほぼ同じような問題です。
1問目と同じところにソフト名とバージョン名が続けて書かれていたのでそれを答えれば正解でした。
Defcon DFIR CTF 2018 HR Server - Acquisition Software 2

#問題

https://defcon2018.ctfd.io/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/d26a5494-b560-11c8-6918-a424d137d091.png)


HRサーバー-取得ソフトウェア
2

HRサーバーのイメージ化に使用されたソフトウェアはどれですか？

#解いてみた

久しぶりにDFIRやります。

とりあえず問題のデータがどこにあるのかわからないという。。。
もしかしてそこから問題は始まっている？
HUNTER×HUNTERみたいだな。

Daily Blog #451: Defcon DFIR CTF 2018 Open to the Public
https://www.hecfblog.com/2018/08/daily-blog-451-defcon-dfir-ctf-2018.html

ここにイメージがおいてありました。
まさか別サイトにあるとは思ってもみませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/bfd1ff67-601d-b8cf-f901-52dc68768dcf.png)


ひとまず1つ目のイメージをダウンロードしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/8403a0ed-1e84-fb37-24fc-6bd84dfde8ae.png)

9.15GB！！！耐えられるか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/ae53524a-7a8e-344b-ba05-b3654bdedf43.png)


耐えられました。
そして解凍したファイルを見るとHRServerと書かれているのでHRServer関連の問題に使用するイメージのようです。

----

さて、ここからやっと問題に取り組めます。

イメージ化に使用したソフトを答える問題。
イメージと一緒に保存されているtxtファイルに記録されていそうなので見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/30a7b13e-92e5-4b77-b6e3-09081f8d0bfa.png)

2行目にいきなり書かれてました。
pfSense自身からの通信制限方法について

#はじめに
pfSense自身からのパケットフィルタリング方法

#内容
pfSenseに対しての通信であれば、通常通りインターフェイスにACLを書くことで制限できるが、
pfSenseからの通信を制限したい場合、インターフェイスにACLを設定しても制限がかからない

たとえばpfSenseにProxyサーバ機能を追加し、ホワイトリスト（もしくはブラックリスト）等を
firewallのACL機能で実現したいと思ってWAN側インターフェイスにACL設定しても機能しない

#解決方法
firewall　→　Rule →　Floating
上記に対してポリシーを設定する事でアクセス制限を実施する事が可能

#さいごに
pfSenseでは様々なソフトウェアが利用可能であり、squidとpfBlockerを組み合わせる事で国別フィルタ機能を
もったproxyサーバが簡単に構築できたり、ClanAVを追加することでウイルスチェックも可能となったりする
初心者向けGitコマンド一覧

# 前提
Gitとは何かを知っている人向けです。
**Gitとは？**を学びたい方は下記のリンクを読んでから、こちらの記事を見てもらえれば幸いです。
https://qiita.com/tama0571046/items/29560a33f23a0ba63e1e

普段コマンドでGitを使うことが少ないのでおさらいも兼ねて、Gitで使う**実践的なコマンド**を記述していきたいと思います。

Gitを操作する便利なソフトが沢山ありますが、コマンドを覚えておくことでより深くGitを学ぶことができるかと思います！


# 初期設定
基本的には1回だけ行うコマンド

```
git config --global user.name "USERNAME"
git config --global user.email git@sample.com
```
GitHubへプッシュするときのユーザー設定
この設定をすることによって全てのプロジェクトを上記のユーザーとしてプッシュすることができる

```
git init
```
ローカルリポジトリを作成する
Gitで管理を始める場合は必ずこのコマンドを行う必要がある


```
git remote add origin https://github.com/[user name]/[repository name].git
```
ローカルリポジトリとリモートリポジトリを紐付ける
**GitHub**や**bitbucket**で作成したリポジトリにプッシュするための前準備


# 変更内容の登録
ソースの変更点をGitで教える方法

```
git add .
git add [ファイル名]
```
ローカルから**ステージングエリア**(控室)へ変更内容を移動する
[ . ]とした場合は全変更内容が適応される

```
git rm
```
削除したファイルを**ステージングエリア**に移動する


```
git rm --cached [ファイル名]
```
gitの管理からは外したいが、ローカルにはファイルを残したいときに使用する
後述する**[.gitignore]**を使用しないと、再びGitで管理されるので注意


```
git commit -v
```
ステージングエリアからローカルリポジトリに変更内容を反映する
[-v]とすることで、commit内容の詳細をvimなどで確認することができる

```
git push origin master
```
ローカルリポジトリからリモートリポジトリに変更内容を反映させる
[origin master]はGitHubでの定型句のようなものなので、とりあえずそのまま覚えておけば良い
気になる人は調べてね！


# 変更内容の確認
修正した内容の確認

```
git log --oneline
git log -p [ファイル名]
```
commitの履歴を見ることができる
[--oneline]をつけないと情報量が多すぎて確認しにくい
1ファイルの細かい履歴を見たい場合は[ファイル名]を付けよう

```
git status
```
現在のファイルの変更状況を確認できる
赤文字：ステージングエリアに移動**前**
緑文字：ステージングエリアに移動**後**

```
git diff
git diff HEAD
```
commitする前にファイルの変更差分(ローカルとステージングエリアの差分)を確認することができる
「HEAD」とつけることでステージングエリアと最新のcommitとの差分が確認できる


# その他
```
git reset .
git reset [ファイル名]
```
git addしたファイルをステージングエリアからローカルに戻す

```
git checkout .
git checkout [ファイル名]
```
ステージングエリアに移動する前のファイルの変更点を、最後にcommitした内容に戻すことができる

```
.gitignore
```
コマンドではなくGit管理されているプロジェクトに[.gitignore]というファイルを追加する
vimやテキストエディターで開いて、管理したくないファイル(フォルダ)のパスを記入すると対象のファイル(フォルダ)がGitの管理から外れる

1. 自動生成されるファイル
2. パスワードが記載されているファイル

これらのファイルには積極的に使用していこう
python GUIでファイルダイアログを開く (tkinter.filedialog)

tkinterでファイルダイアログを使う手順のメモです


## フォルダを選択する

tkinter.filedialog.askdirectoryを使えばフォルダを選択するダイアログを開いてくれます。initialdirで初期ディレクトリを指定します。

```python:python
import tkinter.filedialog
iDir = os.path.abspath(os.path.dirname(__file__))
folder_name = tkinter.filedialog.askdirectory(initialdir=iDir)
```

## ファイルを選択する

tkinter.filedialog.askopenfilenameでファイルダイアログを開けます。filetypesで候補ファイルのパターンを指定し、initialdirで最初に開くディレクトリを指定します。複数ファイルを選択する場合はtkinter.filedialog.askopenfilenamesです。

```python:python
import tkinter.filedialog
fTyp = [("", "*")]
iDir = os.path.abspath(os.path.dirname(__file__))
file_name = tkinter.filedialog.askopenfilename(filetypes=fTyp, initialdir=iDir)
```
ファイルの拡張子を指定できます。
見出し、パターンの順で与えます。

```python:python
fTyp = [("データファイル", "*.csv;*.xlsx;*.xls")]
```
ファイル名の部分一致で選択する事もできます。

```python:python
fTyp = [("logファイル", "log*")]
```





## 使用例

実際使うときはこんな感じで使うと良いと思います。

```python:python
import os
import tkinter as tk
import tkinter.filedialog

class TkinterClass:
    def __init__(self):
        root = tk.Tk()
        root.geometry("500x350")

        button = tk.Button(root, text='ファイルダイアログを開く', font=('', 20),
                           width=24, height=1, bg='#999999', activebackground="#aaaaaa")
        button.bind('<ButtonPress>', self.file_dialog)
        button.pack(pady=40)

        self.file_name = tk.StringVar()
        self.file_name.set('未選択です')
        label = tk.Label(textvariable=self.file_name, font=('', 12))
        label.pack(pady=0)

        button = tk.Button(root, text='フォルダダイアログを開く', font=('', 20),
                           width=24, height=1, bg='#999999', activebackground="#aaaaaa")
        button.bind('<ButtonPress>', self.folder_dialog)
        button.pack(pady=40)

        self.folder_name = tk.StringVar()
        self.folder_name.set('未選択です')
        label = tk.Label(textvariable=self.folder_name, font=('', 12))
        label.pack(pady=10)

        root.mainloop()

    def file_dialog(self, event):
        fTyp = [("", "*")]
        iDir = os.path.abspath(os.path.dirname(__file__))
        file_name = tk.filedialog.askopenfilename(filetypes=fTyp, initialdir=iDir)
        if len(file_name) == 0:
            self.file_name.set('選択をキャンセルしました')
        else:
            self.file_name.set(file_name)

    def folder_dialog(self, event):
        iDir = os.path.abspath(os.path.dirname(__file__))
        folder_name = tk.filedialog.askdirectory(initialdir=iDir)
        if len(folder_name) == 0:
            self.folder_name.set('選択をキャンセルしました')
        else:
            self.folder_name.set(folder_name)


if __name__ == '__main__':
    TkinterClass()
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/a2a565e1-9f6c-e5d6-8aef-65d0c678a0c4.png" width=70%>
レッツトライ


## 余談

```python:上手くいくimport
import tkinter as tk
import tkinter.filedialog
tk.filedialog.askdirectory(initialdir=iDir)
```

```python:上手くいかないimport
import tkinter as tk
tk.filedialog.askdirectory(initialdir=iDir)
```
何故！？
MTGカード評価投稿サイトの開発〜5週間でDjangoアプリリリース〜

# はじめに
先日、「5週間でwebサービスリリース人集まれ！LTまでする人限定」という勉強会企画に参加し、約5週間の間Webアプリ開発・リリース作業を行った後、LTで成果物を発表しました。
本記事では作成したWebアプリの機能の紹介や開発経緯、企画に参加して感じたことについて記します。

勉強会企画のURL（connpass）：
[5週間でwebサービスリリース人集まれ！LTまでする人限定(オンライン開催に変更！)](https://shinjukuasakatu.connpass.com/event/171677/)
[5週間でwebサービスリリース人集まれ !! LT発表会](https://shinjukuasakatu.connpass.com/event/175340/)

# 作成したWebアプリの概要

今回作成したのはトレーディングカードゲーム「Magic：The Gathering(MTG)」のカード評価コメントを投稿するサイトです。

作成したWebアプリのURL：
[MTGカード評価投稿サイト](https://mtgassessment.work)

<img width="1057" alt="スクリーンショット 2020-05-17 14.41.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409123/8d5af332-eae2-a486-973e-0507099fee88.png">

構想自体は前々からあり、「DMvault」というデュエル・マスターズ関連のサイトを見たことがきっかけで、その中にある「カード評価集」という機能がMTGにもあったらいいなという思いで制作に挑戦しました。

主な機能として、メールアドレスとパスワードを登録してのサインアップ・ログイン機能と、ログイン者によるコメント投稿、自分のコメントの編集・削除を実装しています。
未ログイン者はコメント閲覧のみが可能であり、コメント投稿・編集・削除はできません。
サインアップ・ログイン機能について、入力されたメールアドレスに認証メールを送信しメール経由で登録完了させる機能や、メールアドレスにパスワード再発行メールを送る機能もあります。

# Webアプリ開発の経緯
モダンな技術に触れるためにDjangoの学習を行っている最中にこの企画を知り、習うより慣れろでオリジナルのWebアプリをWeb上にリリースしたいと思って参加させていただきました。
期間中はDiscordの音声通話で週に1度のもくもく会および成果物発表を行い、完成後にDiscordでLT発表を行いました。
開発にあたっては以下の書籍を参考にしており、根本的には書籍中で作成するサンプルアプリを元に改造したものとなっています。

参考書籍：
[動かして学ぶ！Python Django開発入門](https://www.amazon.co.jp/gp/product/B07YY5RDPC/ref=ppx_yo_dt_b_d_asin_title_o07?ie=UTF8&psc=1)

# 主な使用技術
•Django
Pythonで動作するWebアプリフレームワークです。
モダンな言語といえばPythonだろうという漠然としたイメージで選んだため、他とは深く比較検討していません。
参考書籍の受け売りですが、会員制のWebアプリを作るなら、認証メール送信などの機能が元々備わっているDjangoの方が向いているようです。

•Bootstrap
Twitter社が開発したCSSフレームワークです。
無料テンプレートを適用しただけですが、手軽にスマホ・タブレット表示対応可能なことに驚きました。

•PostgreSQL
オープンソース系のリレーショナルデータベースです。
Djangoでデフォルトで使われているSQLite3ではデータが巨大になった場合に問題があるためこちらを使用します。

•AWS
Amazonが提供するクラウドサービスで、今回はリリース先仮想サーバとしてEC2インスタンス、メール配信サービスとしてAmazon Simple Email Serviceを使用しています。

# 企画に参加して良かったこと
- 約5週間以内に完成させるという期限と、1週間に1回進捗発表というペース管理を設けることで、モチベーションを維持できました。
- 書籍をなぞるだけでは理解できていなかった点について、オリジナルの画面や機能を盛り込む過程で気づいたり理解したりすることができました。
 - 例えば、データベースの定義を自動的に作成・管理するマイグレーションの概念について理解できておらず、オリジナルのテーブルを用意する際に苦労しましたが、結果的には思い通りに実現することができました。
- 何より、初めてオリジナルのWebアプリを公開することができました。

# 今後の課題
- 画面から画面への値の受け渡しが一部うまくいかず、場合によっては前画面からURLに値を渡してなんとかしている箇所もあるため改善する必要があります。
- 戻るボタンが無いなど画面遷移が不親切であり、コメント投稿後にかなり前の画面に戻る（そうしないとエラーを吐く）という問題もあります。
- あったほうがいいけど実装できていない機能が山積みとなっています
 - カードセット一覧、カード一覧のデータを公式APIから取得（現在は一つ一つ手作業でDBに登録しています）
 - カードやコメントの検索フォーム
 - コメント投稿数が多いカードをランキング表示

期限が決まっていたことや、Djangoに関してまだ初心者であるため粗削りな点が多いです。

# 最後に
DjangoやAWSについてほぼ素人であることから開発にあたって不安もありましたが、今回の企画を通して様々な知識や貴重な経験を身に付けることができました。
本記事内の記述に誤り等ございましたらご連絡をお願いいたします。
Challenging Common Assumptions in the Unsupervised Learning of Disentangled Representations

https://arxiv.org/pdf/1811.12359.pdf

#### 概要
- disentanglement - データは少数の説明ファクタから生成されていると仮定し、そのファクタを教師なしで復元すること。
- この論文の主張は、モデルとデータの双方にinductive biasがないと、disentanglementは原理的に不可能である、ということ。
 - inductive bias(帰納バイアス)とはモデルに内在する、データに対する暗黙の仮定
- 12000のモデルを7つのデータセットに対してテスト

#### 不可能性の議論

x に対してdisentangle するz = r(x) が定義できたと仮定する。
ここでentangleする z^ = f(z)を考えると、z^ = (f・r)(x)もentangleする。
ところが、教師なし手法では、xしか見えないので、zとz^を区別することができない。


#### 実験の結果
- 5.1 サンプル後の表現での相関と、サンプル前の平均値の相関。正則化項を入れると前者は小さくなっていく(disentangleされる)が後者はそうでもない。

- 5.2 disentangleの様々尺度は、互いに一致するか？Modularityを除いて基本的に強い相関がある。

- 5.3 ランダムシードの影響は非常に大きい。

- 5.4 disentangleできることがわかっている合成データセットで得たハイパーパラメータを他のデータセットに転用する方法はうまく行かない。

- 5.5 disentangleすると下流タスクでサンプル複雑性(学習に必要なデータサンプル数)が低くなるという仮定があったがどうも嘘だったらしい。
- 100サンプルでの精度を10000サンプルでの精度で割ったものを効率スコアとして使用。
ToDo、行動、メールの管理

１．活動タイムラインに表示される活動はどれですか?
２．[ToDo] ホームページで実行できるアクションはどれですか?
３．自分のカレンダーで表示できる他のカレンダーはどれですか?
４．Lightning Experience でメールを作成および送信するための 2 つのオプションはどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/4a5e5072-663f-0dbe-6553-4f61340ef399.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/2f22623e-83a9-bbec-3272-0490745885ba.png)
Reactで星のレーティングを実装する

# はじめに
Reactを使っていて星のレーティングを実装する機会があったので備忘録として記します。
ちなみに今回はパッケージを一切使っていないため、パッケージを使ってもっとお洒落なレーティングを作りたいと思った方はググって見てください。

- npmパッケージ

 - [react-star-ratings - npm](https://www.npmjs.com/package/react-star-ratings)
 - [react-star-rating-component - npm](https://www.npmjs.com/package/react-star-rating-component)
 
# 完成形
![ezgif.com-optimize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600371/abe0cf06-56ab-ff91-9ca3-4febbf22a3e2.gif)
※これよりもお洒落なレーティングを実装したい方はパッケージなどのコンポーネントをググってみてください。

# 作り方
作り方はざっくり言うとこんな感じです。

1. Stateで光らせる星の数を管理する
1. 星それぞれをboolean（trueかfalse）でどれを光らせるかを決定する
1. stateを参照しながらbooleanが入った配列を作る(星の数がMaxで5つなら作る配列の要素は5つ）
2. 「3」で作った配列をループさせてJSX要素（今回は星）をはき出す。その時、配列のindex番号をはき出した要素に振り分ける
3. onClickメソッドでハンドラー(関数)を当てて引数で振り分けたindex番号を受け取る
4. ハンドラー(関数)でstateを更新

コードで見ていきましょう

```react

import React, { useState } from 'react';

export const StarRating: React.FC<> = () => { 
  const [ratingState, setRatingState] = useState<number>(0);
  const stars: boolean[] = [];
  for (let i = 0; i > 5; i++) {
    if( i < ratingState ) {
      stars.push(true);
    } else {
      stars.push(false);
    }
  }
  const HandleStarShine = (rating) => {
    setRatingState( rating + 1 );  // index番号は0~4だから星の数に合わせて1~5にする
  };
  return (
    {stars.map((val: boolean, index: number) => {
      return (
        <button onClick={() => HandleStarShine(index)} >
          {val ? <img src="光る星マーク" /> : <img src="光ってない星マーク"/>
        </button>
　　　　);
    })}
  );
};
```
こんな感じです。
コードにあるようにstateは押されたボタン（星）が持っているindex番号の値に更新されます。

# まとめ
さて、この記事の星のレーティングはいくつでしたか？
また、ご指摘などもありましたらコメントの方をよろしくお願いします。
最近Reactを勉強しはじめたので、ハンドラーに引数を渡すのが個人的に難しかったのですが、今思えばReactの[チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)の三目並べゲームで引数を渡すのはすでにやってましたね（笑）勉強あるのみです（笑）
Win10のPCに英語配列キーボードを接続するときに設定したこと

## 背景
在宅勤務でモニター接続し作業をしていると、どうしてもノートPCのキーボードだと首が疲れる。
モニターを見ながらタイピングするときに、体の向きと顔の向きが逆になるからと思われる。
なので、外付けキーボードを準備することにした。
外付けキーボードがあれば、キーボードをそれぞれのモニターの正面に移動できるから。

## 準備したキーボード
私用PCの外付けキーボードを利用しており、英語配列のものを使っている（プログラミングには効率的という噂を信じてｗ）。
そのため、在宅勤務用も英語配列キーボードにすることに。（在宅勤務ではあまりプログラミングしないけど。）

ということで、下記の条件でキーボードを選定し、購入した。
- マウスを近くに置きたいからテンキーなしのタイプ（机が広くないし）
- ノートPCのキーボードに慣れてしまったので、押し込みが浅いタイプ

## 達成したいこと
- ノートPC付属のキーボードは日本語配列キーボードのまま使いたい
- 英語配列の外付けキーボードは英語配列キーボードとして利用したい
- 管理者権限を有していないことを前提として上記の設定をしたい

## 達成できたこと
下記の対応を行うことで、英語配列の外付けキーボードを利用できるようにはなった。

- 設定画面の「時刻と言語」の言語設定で、English（USA）を追加する
- Win+スペースで、日本語入力と英語入力とを切り替えて、キーボードをスイッチする

## 諦めたこと
- 達成したいことの１，２を結局あきらめた
    - レジストリに設定を追加することで対応できるとわかったが、管理者権限を有していないためか、追加できなかったから
- 英語配列キーボードでの日本語入力をあきらめた
    - 言語を切り替えることで、キーボード配列を切り替えるので。。。

## 最後に。。。
どなたか、レジストリを変更せずに実現する方法を教えて下さい。。。
Google Apps ScriptのコードをGitHubで管理する方法

# 必要なもの

- Google Chrome
- Google Apps Script GitHub アシスタント
- GitHub

# 導入手順

## 「Google Apps Script GitHub アシスタント」を取得する
###[Google Chrome 拡張](https://chrome.google.com/webstore/detail/google-apps-script-github/lfjcgcmkmjjlieihflfhjopckgpelofo)にアクセスしてインストールしておく。
![スクリーンショット 2020-05-17 14.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/1a8ea73e-2c34-dc1f-6037-375a6e1c43e5.png)

## GitHubでアクセストークンを作成・取得する

### GitHubにアクセスし、「Settings」を選択する
![mac-screenshot 2021-06-08 9.01.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/d4db6902-7dfa-c45d-9cf0-807fa3d1d374.png)

### 「Developer settings」を選択する
![mac-screenshot 2021-06-08 9.02.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/66d41a58-1419-4cd8-6f16-cc125c0591a5.png)

### 「Personal access tokens」を選択し、新しいトークンを作成するために、「Generate new token」ボタンを押す
![スクリーンショット 2020-05-17 14.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/e4b5f7d4-a275-4b28-6e82-b66ceb67de7c.png)

### 各種設定を済ませて、「Generate token」ボタンを押す
- 「Note」に作成したトークンがわかる名前を入力する
- 「Select scopes」に「Google Apps Script GitHub アシスタント」で必要な項目を選択する
  - repo
  - gist

![スクリーンショット 2020-05-17 14.24.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/aca5585a-113b-4226-11d1-968deee2674a.png)

### 作成されたトークンをコピーする
![スクリーンショット 2020-05-17 14.28.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/023d0a19-b1cf-d74d-2223-0de56ecbe77c.png)

## Google Chromeの拡張機能の設定をする

### Google Chromeにある 「Google Apps Script GitHub アシスタント」のボタンを押し、「オプション」を選択する
![スクリーンショット 2020-05-17 14.12.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/d27c4976-d59f-8f26-a2ab-b9313c0f94c4.png)

### 表示されたウインドウに「GitHubのユーザ名」「GitHubのパスワード」「作成したトークン」を入力し、「GITHUB LOGIN」ボタンを押す
![スクリーンショット 2020-05-17 14.14.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/55809691-0d05-68b1-c9f6-e0a85dd4ed8b.png)

### 成功すると以下のような画面が表示される
![スクリーンショット 2020-05-17 14.30.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/bda3b524-6c5b-56b9-57b8-bb04e4bba594.png)


# 使い方

![スクリーンショット 2020-05-17 14.55.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287741/a8258a09-8c71-fd41-fe7c-e1f147813b79.png)

## IDEが拡張され、以下のことができるようになります。
- リポジトリ
    - 新規作成
    - 既存のリポジトリ選択
- ブランチ
    - 新規作成
    - 既存のブランチ選択
- プル
- プッシュ




# 参考文献

[GASのコードをGithub管理するChrome拡張が便利](https://qiita.com/nkjzm/items/d384896d01ac3ff6f91c)