初めての さなボタン(2) 環境構築 on Windows 10 Pro

# 「初めての」さなボタン(2) 環境構築 on Windows 10 Pro

この記事は "[名取さな Advent Calendar 2018](https://adventar.org/calendars/2907)" のエントリー記事です．
言い回しがせんせえ方向けになっていますので，ご了承ください．

経緯としては，さなボタン(2)はWindows 10 Proでの開発環境構築の前例がなく，
また当該wikiには前提ソフトウェアのインストール方法が書かれていないため，
[FORNO](https://github.com/forno)が写真付き手順を公開する運びとなった．
Gitの導入方法はちょっと記事が長くなるから別の記事を読んでくださいm(_ _)m

ま，つよつよな者が教えるのは義務だからなー．くぅ～！
下の者のせんせえは一緒にがんばろー！

- さなボタン(2) にContributeしたい
- ~~名取さなにフォローされたい！~~
- 名取さなのことだいすこだって世界に主張したい

## 対象
Dockerが動作するOSのせんせえがた
- Windows 10 Pro
- Mac OS
- 大抵のLinux OS

Gitを導入済みのせんせえがた
- 導入がまだのせんせえは https://git-scm.com/ でインストールしてきてくれよな！

### 対象外のせんせえについて
残念ながらWindows 10 Homeの人は，[wiki](https://github.com/sanabutton/sanabutton.github.io/wiki/%E3%81%95%E3%81%AA%E3%83%9C%E3%82%BF%E3%83%B3(2)%E3%81%AE%E6%A7%8B%E6%88%90)を参考にしたり，[主要開発者の発言](https://twitter.com/ndxbn/status/1060574185376768000)等を参考に頑張ってインストールすることになるけど，がんばればできるぞい

## さなボタン(2)ドキュメント
さなボタン(2)の[Wiki](https://github.com/sanabutton/sanabutton.github.io/wiki/%E3%81%95%E3%81%AA%E3%83%9C%E3%82%BF%E3%83%B3(2)%E3%81%AE%E6%A7%8B%E6%88%90)と[README](https://github.com/sanabutton/sanabutton.github.io#wwwnatorisanalove)が唯一の情報源となっておる．頑張って読み取ろう

## 操作概要
Dockerを導入し，さなボタン(2)を立ち上げる．ブラウザで自分が立ち上げたさなボタン(2)を閲覧するゾ～

## 必要なソフトのインストール
### Docker CE

1. [Docker CE](https://store.docker.com/editions/community/docker-ce-desktop-windows)の配布ページにいこう

![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/4e53b4ff-f9dd-4acc-adad-9e2fe5c24f3a.png)
2. Please Login to Downloadをクリックしてアカウントを作成し，ログインしよう
3. Get Dockerをクリックしよう

![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/ffa9333d-4508-245b-0cbd-62b5f681ba0d.png)
4. ダウンロードが始まるので終わったら実行．インストールするを押して，OK, Agree, Installなどと書かれているボタンを選択しよう

![スクリーンショット (7).png](https://qiita-image-store.s3.amazonaws.com/0/164828/342ba821-5f9e-0492-c8e1-e8a4e943a072.png)
5. 最後にCloseしてインストール．続いて有効にするために再起動しよう

![スクリーンショット (9).png](https://qiita-image-store.s3.amazonaws.com/0/164828/edd3442f-f401-1e57-ea3d-3851e2b74208.png)
6. これ以降，何かDockerに聞かれたら適当にYesと答えよう **すべてを終えるまでに2回ほど再起動します**

![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/2c870641-0f70-c4dd-a789-73f0569e2e61.png)


以上で †導入完了† 

## sanabutton.github.io (さなボタン(2))の準備

1. まずはGitが動く端末を起動しよう

よくわからないせんせえは `Git bash`ってソフトウェアがはいっているはずなので，たちあげてね
![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/00c965c7-fe6c-2738-78cc-60af51fb6c59.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/e98ccdef-7373-dda9-799a-bc6956288aad.png)

2. さなボタン(2)をダウンロードしよう

```bash
git clone https://github.com/sanabutton/sanabutton.github.io.git
```

入力したらエンターキーをターンッ！しような
![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/d6997ab5-2d51-0b72-da49-cef9a4492b9e.png)

## さなボタン(2) 起動！

1. Windows Power Shellを起動しよう

![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/1ed167e3-f208-03e0-0287-0a1174f5f4d4.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/4efd7102-6a59-b7c0-2c95-53976dbe89e0.png)

2. さなボタン(2)のディレクトリ(フォルダ)に移動しよう

```bash
cd sanabutton.github.io.git
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/5bc8c367-b121-9cf2-91b4-2422d9596692.png)
3. さなボタン(2)を起動しよう

```bash
docker-compose up
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/f5bd1a65-9fc4-3760-f38d-1158082e3d70.png)

わかりづらいですが，`done`と出てきたら†起動完了†

![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/951ee070-e53f-a2e8-b302-0df49cb59352.png)
4. 自分のさなボタン(2)へアクセスしてみよう

node: `Microsoft Edge` **以外** のブラウザを使用してくれよな．IEでもいいけど．Edgeはだめだぞっ

ブラウザを立ち上げたら，URLのところに `localhost:4000` と入力して，エンターをターンッしような

![image.png](https://qiita-image-store.s3.amazonaws.com/0/164828/937d8c96-37dc-670b-f1e4-7f03d022b626.png)

このようにさなボタン(2)が表示されれば無事にローカル環境にさなボタン(2)を†構築完了†

お疲れさな～！

### 補遺

- localhostは自分自身のパソコンを指すURLです．ここでさなボタン(2)が表示できていればOK
- HTMLファイルや，YAMLファイルを書き換えることで画面をカスタマイズできます(開発)
- 開発結果をさなボタン(2)管理者に送るにはGitとGithubの知識が必要です

暇ができたら開発についても解説するな～

## まとめ

Windows 10 Proでさなボタン(2)を動かすには，

`docker`をインストールして，ソースコードを入手して，`docker-compose up`を実行する

これだけだぞ～！