OmniAICreator/Qiita-1.07M huggingface dataset:
go  で file を touch する

# この記事について

go 言語でアプリケーションを書いていて、ファイルを touch したくなった。
でも、 `os` には `touch` がない。

どうしたものかとツイートしたら

https://twitter.com/cielavenir/status/1172472063837102084

という応答を頂いたので、書いてみた。


# ソースコード

```go
package gotouch

import (
	"runtime"
	"syscall"
	"time"
)

// Touch は、 macOS などに含まれる touch コマンドを模倣する
func Touch(path string) error {
	now := time.Now().UnixNano()
	const nano = 1000 * 1000 * 1000
	t := syscall.Timespec{Sec: now / nano, Nsec: now % nano}
	ut := []syscall.Timespec{t, t}
	err := syscall.UtimesNano(path, ut)
	if err == nil {
		return nil
	}
	isNoEnt := func(e error) bool {
		if e == syscall.ENOENT {
			return true
		}
		switch runtime.GOOS {
		case "windows":
			// Windows では syscall.ERROR_PATH_NOT_FOUND を返すことがある。
			// しかし、非 Windows 環境では syscall.ERROR_PATH_NOT_FOUND は定義されない。
			// ifdef も使えない。別ファイルにするのはめんどくさい。
			// 仕方ないので自分で定義する。
			const ERROR_PATH_NOT_FOUND = 3 // 「don't use ALL_CAPS in Go names」と言われるが、 syscall に合わせる。
			if errno, ok := e.(syscall.Errno); ok && errno == ERROR_PATH_NOT_FOUND {
				return true
			}
			return false
		case "darwin":
			return false
		case "linux":
			// たぶん OK だけど、テストしてない。
			return false
		default:
			panic("you should write something here")
		}
	}
	if !isNoEnt(err) {
		return err
	}
	fd, err := syscall.Open(path, syscall.O_CREAT|syscall.O_RDWR, 0644)
	if err != nil {
		return err
	}
	defer syscall.Close(fd)
	return nil
}
```

# かるく説明

日本語で touch の説明をすると

* ファイルがあれば、そのファイルのタイムスタンプを更新する
* なければ、ファイルを作る

という感じになると思う。
しかし、上記の日本語のとおりに実装すると、《ファイルがある》と思ってから《タイムスタンプを更新する》という操作の間に誰かがファイルを削除する可能性があり、よろしくない。

そこで実際は

* タイムスタンプの更新を試みる
* 「ファイルがない」という理由で更新に失敗した場合、 `O_TRUNC` を**指定せず**にファイルを作る

という実装になる。

`O_TRUNC` **なし**で作ることによって《「ファイルがない」という理由で更新に失敗》のあと、《ファイルを作る》という操作の前に誰かがファイルを作った場合でも不幸になることがない。

なお。
上記のソースコードは手元の macOS と Windows で動作確認した。
Linux では動かしてないけど大丈夫じゃないかと思っている。

macOS, Windows, Linux 以外だと死ぬ。
Python（Flask） + Heroku + LINE Messaging API でオウム返しのチャットBOTを作ってみた

# はじめに
今回はPythonを使ってLINEのチャットボットを作ってみました。
WEBアプリのフレームワークとしてFlaskを使用しました。
Djangoってのが有名らしいのですが、簡単なものはFlaskのがいいらしいので、これを使ってみました。
けっこうハマって少しくじけかけたので、備忘録に残します。

# 環境準備
```
$ pip install flask
$ pip install line-bot-sdk
```
※FlaskとLINE BOT SDKをインストールする


# LINEアプリの作成
## LINE Developersにてチャネルを作成する
https://developers.line.biz/ja/
Messaging APIチャネルを作成する
※こちらは割愛します

## LINEのWebhookの設定
Webhook送信を「利用する」に変更する

Webhook URLに以下を入れる

```
https://{アプリ名}.herokuapp.com/callback
```
※まだコードをデプロイしてないので接続確認で失敗するけど、問題ない

自動応答メッセージを「利用しない」に変更する

# Messaging APIでのアプリ実装
## サンプルコードのDL
```
$ git clone https://github.com/line/line-bot-sdk-python
```

## 必要なファイルを準備
### app.py
サンプルコードから
「line-bot-sdk-python -> sample -> flask-echo -> app_with_handler.py」
をコピーしてきて、名前を変更する

### requirements.txt
```requirements.txt
$ pip freeze > requirements.txt
```
使用するライブラリを記載する

### runtime.txt
```runtime.txt
python-3.7.1
```
※使用しているpythonと同じバージョンで良い
※バージョンの確認方法は $ python -V

### Procfile
```Procfile
web: python app.py
```
プログラムと実行方法を記載する

## app.pyを一部書き換える
```app.py
・・・ 省略 ・・・

if __name__ == "__main__":
    arg_parser = ArgumentParser(
        usage='Usage: python ' + __file__ + ' [--port <port>] [--help]'
    )
    arg_parser.add_argument('-p', '--port', default=8000, help='port')
    arg_parser.add_argument('-d', '--debug', default=False, help='debug')
    options = arg_parser.parse_args()

    app.run(debug=options.debug, port=options.port)
```

↓

```app.py
・・・ 省略 ・・・

if __name__ == "__main__":
    port = int(os.getenv("PORT", 8000))
    app.run(host="0.0.0.0", port=port)
```


# herokuの設定
## herokuのCLIをインストール
```
$ brew tap heroku/brew && brew install heroku
```
※herokuコマンドが使えるようになる

## プロジェクトを作成
```
$ heroku create アプリ名
```

## プロジェクトの利用開始
```
$ heroku addons:create fixie:tricycle --app アプリ名
```

## 各種トークンをHerokuの環境変数に登録
```
$ heroku config:set LINE_CHANNEL_SECRET="Channel Secretの欄の文字列" --app アプリ名
$ heroku config:set LINE_CHANNEL_ACCESS_TOKEN="アクセストークンの欄の文字列" --app アプリ名
```

## 環境変数の設定確認
```
$ heroku config
```
「LINE_CHANNEL_SECRET」と「LINE_CHANNEL_ACCESS_TOKEN」が正しく設定されていればOK

## 実装したコードのデプロイ
```
$ git init
$ git remote add heroku https://git.heroku.com/アプリ名.git
$ git add -A
$ git commit -m "first commit"
$ git push heroku master
```

# 所感
herokuの利用に際して、--app アプリ名がなかったことで少しハマりました。
エラー見ると、書いてるのでちゃんと読みましょうねって話ですね笑

あと、LINE側のWebhookの接続の確認でエラーになるんですけど、なんか動くっていうちょっと怪しげな状況です。
herokuのログは以下のコマンドで確認できます。

```
$ heroku logs --tail --app アプリ名
```

しかし、herokuクソ便利ですね。
さくらのレンタルサーバーで最初頑張ろうとしてたんですけど、SSLの設定は必要だし、pyenvを入れるのにちょっとコツが必要だったり、色々めんどくさかったです。

なので、モック作るぐらいのノリだったら断然herokuですね。
これからもっと積極的に使っていこうと思いました。
標準入力の値を計算に使いたい

##はじめに
間違っている部分や改善点などありましたらコメントよろしくお願いします。
paizaの問題をやっていて標準入力の値を全部取得して色々計算しなきゃいけなかったんですが、うまくいかなかくて解決までに時間を要したので備忘録＆同じ状況の人の手助けとして投稿します。

同じ状況の人がいますように。むしろいてくれ。

##paizaで計算に使いたいならこれを使え！
標準入力で受け取った値で計算をしたい場合は数値にして受け取る必要がありますよね
以下数値で受け取る書き方
##標準入力が一行に一つの場合！

```ruby
標準入力
12
```

```ruby
line = gets.to_i
p line
```

```ruby
出力
12
```
とこのように数値として取得できました。

##標準入力が一行に複数の場合！

```ruby
標準入力
3 4
```

```ruby
line = gets.split(' ').map(&:to_i)
p line
```

```ruby
出力
[3,4]
```
.map(&:to_i)をつけることで数値として受け取ることができました。

##複数行に一つずつの場合！

```ruby
標準入力
1
2
3
```

```ruby
line = readlines.map(&:to_i)
p line
```

```ruby
出力
[1,2,3]
```
です。

##複数行に複数の場合！

```ruby
標準入力
3
23 42
54 65
```

```ruby
1)lines = readlines(chomp: true).map{|line| line.split(' ').map(&:to_i)}.flatten

2)lines = readlines(chomp: true).join(" ").split.map(&:to_i)

3)lines = readlines.join.split.map(&:to_i)
```
上記の三つどれでも

 ```ruby
出力
[3,23,42,54,65]
```
になります。

##最後に

paizaなどでは初級は標準入力が一行だけのことも多いですが
中級とかになってきて複数行の複数っていうケースが多くなって値を受け取るだけで考えちゃったりしてたので同じ人いたら参考にしてください。

文字列で受け取る場合は他にいっぱい記事が出ていたので割愛で。
あと自分はテラテイルで解決できたので一生懸命考えて調べてダメだったらテラテイルで質問するのがいいと思います！ww
役に立ったらいいね！してください！
react css  material-ui


# react css 基本

- styleプロパティ

```javascript

const style = {
  color: 'red',
  fontSize: '20px';
}

<li style={style}
```


# import export

- import の時に {変数名}がいる

```javascript:todo.js

import {button} from './styles'

<button style={button}
```

```javascript:styles.js

export const button ={
  backGroundColor: 'blue',
  padding: '10px',
}

```

# ライブラリ  

- bootstrap
- material ui

## material-ui 

-install

```javascript
npm install --save material-ui@1.0.0-beta.30
```

## 実践

- importする
- Rebootは調整役らしい（reset css的かな）

```javascript:setting
import Reboot from 'material-ui/Button'


<Reboot/>
<Button raised color="primary">hello</Button>
```

- navbar

```javascript:ナビゲーションバー

import AppBar from 'material-ui/AppBar'
import Toolbar from 'material-ui/Toolbar'
import Typography from 'material-ui/Typography'


<AppBar position="static">
       <Toolbar>
         <Typography type="title" color="inherit">
           todo
         </Typography>
        
       </Toolbar>
      </AppBar>

```

- Input


```javascript:input
import Input from 'material-ui/Input'

<Input/>
```



- List


```javascript:list
import List, {ListItem, ListItemText} from 'material-ui/List'


 <List>
   <ListItem>
     <ListItemText primary={"ここが表示"}/>
   </ListItem>
 </List>

```

# 使いそうなやつ

- card
- form
- input

# ここで調べれば出てくる

https://material-ui.com/


※記事

https://programmagick.com/blog?slug=material_ui_v0
kotlin 遅延評価lazy、lateinitの使用方法

# 遅延評価とは
遅延評価とは、評価を遅延して行うこと。値が必要な時に、値の評価をする。
### lazy
https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/delegated-properties.html#%E9%81%85%E5%BB%B6-lazy

- 一度だけ値の初期化を行う
- 値はキャッシュされ、二回目以降は最初の値を常に返す
- readonly

```kotlin

val p: String by lazy {
    // 文字列を評価
}
```
### lateinit
https://kotlinlang.org/docs/reference/properties.html#late-initialized-properties-and-variables

- lateinitはプリミティブ型に使えない
- varのみ使用可能
- nullable不可


```kotlin
public class MyTest {
    lateinit var subject: TestSubject

    @SetUp fun setup() {
        subject = TestSubject()
    }

    @Test fun test() {
        subject.method()  // dereference directly
    }
}
```
### Delegates.notNull
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.properties/-delegates/not-null.html

- プリミティブ型に使用可能

```kotlin
var max: Int by Delegates.notNull()

// println(max) // will fail with IllegalStateException

max = 10
println(max) // 10
```



# 遅延評価の場合と遅延評価しない場合の処理の違い
### 遅延評価をしない場合

```kotlin

fun count(): Int {
    var i = 0
    (1..5).forEach {
        println(it)
        i = i.plus(it)
    }
    return i
}

fun main(args: Array<String>) {
    //遅延評価をしない
    val x: Int = count() //count()の処理が実行される
    if(false) println(x)
}
```
実行結果
count()の処理が実行されている

```
1
2
3
4
5
```

### 遅延評価の場合

```kotlin

fun count(): Int {
    var i = 0
    (1..5).forEach {
        println(it)
        i = i.plus(it)
    }
    return i
}

fun main(args: Array<String>) {
    /* 遅延評価
    count()の処理が実行されない */
    val x: Int by lazy {
        count()
    }
    //trueの場合のみcount()の処理が実行される
    if(false) println(x)
}
```
実行結果
count()の処理が実行されていない

```
```

一度実行すると結果を保持します。 それ以降は記憶された結果が返されます。
2回目の実行はcount()を実行しない

```kotlin
fun count(): Int {
    var i = 0
    (1..5).forEach {
        println(it)
        i = i.plus(it)
    }
    return i
}

fun main(args: Array<String>) {
    val x: Int by lazy {
        count()
    }
    println(x)
    println(x)
}
```
実行結果

```
1
2
3
4
5
15
15
```
WordPressでソフト404が出た

※この記事は2017年8月27日に投稿したブログ記事を移転してきたものです。

---

Googleなどのウェブマスターツールに登録しておくと、サイトを監視していなくても各種クローラーが監視役をしてくれて便利です。
今回は、そのウェブマスターツールに「ソフト404」で怒られたので原因究明と対処をしました。

# ソフト404とは

Googleの定義によると、ページが存在しない（本来ステータスコード404を返すべきな）のに200OKなどが返ってきてしまうことを言うそうです。

200が返ってきているので、通常のインデックス処理などを行ってしまうbotなどもあります。
一方で閲覧者には白紙ページとなっているため、SEOにもユーザーにも良くない状況です。

# 私のサイトの症状

WordPressで運営しているサイトで、2ページほどエラーが出ていました。
これ以外にもサイトが妙に重くなる症状を併発していたため、原因究明と対応に時間がかかってしまいました。

結果的にソフト404問題だった部分だけを書き出すと、

- 当該ページにアクセスするとステータスコード200または500が返る
- Apacheのアクセスログに残らない場合もある（これはサイトがめちゃくちゃ重かったせいかも）
- ページの読み込みがめちゃくちゃ遅い（結果的に白紙が返る）
- 当該記事の内容は無事。<strong>管理画面やAMPページでは問題なく見れる</strong>（これが混乱の元）

という症状でした。

# 原因究明

疑った順番に書きます。結論だけ知りたい方は次節へ。

## 1. サイトが重いからじゃない？

別問題の一部だと思っていた頃です。
でも、サイトも24時間ずっと重いわけじゃないので、スイスイ動いている時は別ページは普通に見れる。むしろソフト404が出ているページにアクセスすると重くなるような…。

## 2. MySQLの不具合

素直に考えれば、当該記事のみ本文などが破損していると考えられます。
そこで管理画面からチェック。…普通に見れるし何なら記事の更新作業もできる…。

AMPプラグインによるAMPページも閲覧可能。<br />
念の為データベースも見てみましたが、特に破損は見当たらず。

## 3. ApacheやPHPの不具合

実は、サイトが重くなったりソフト404が出る前に、色々やっていたのでした。

- Yandexへの登録（クローラーが頻繁に来るようになった）
- システム全体のアップデート＆高速化（Apacheのチューニングを含む）
- WordPressのプラグインアップデート

しかし、上2つは症状が出た時期と1週間以上ずれています。
エラーは1日に何度も起こっているので、1週間以上一度もエラー無しで運用出来た後に、突然重くなったりエラーが出たりというのは、これらが原因とは考えにくいです。

プラグインアップデートのみ、サイトが重くなった日と同日でしたが、こちらはプラグインを停止しても重いまま…これも原因ではないようです。
いずれにせよ、一部の記事にのみ影響を及ぼしそうなプラグインではなかったため、除外。

残るはURL構造や純粋なPHPの構文エラーが考えられます。特に、たまたまURLの似ている記事だったので、かなり疑いました。
ところが、よく考えたら他にも同じような、はっきり言って今回見れなくなったページよりももっと似ているURLの記事もあります。リダイレクトなども設定しておらず、実際されている様子もない。
試しにスラッグ変更などもやってみましたが、駄目だったのでこれではない。

PHP構文に至っては、このところテンプレートなどを弄っていなかったのでエラーが起こる要素が見当たらない…。
そもそも、最初のPHP処理が行われる前に表示されるべきHTML部分も表示されないため、何かもっと別の問題な気がしました。

ちなみに、 **デバッグモードは使えませんでした。** そもそも重くて読み込めない。

# 最終的な原因

改めてデータベースをよく見直していたところ、post_statusに見慣れない `inherit` という文字が入っていました。
これはattachment、つまりメディアファイルの公開範囲を、紐付けられている投稿（親投稿）に合わせる、というものです。

今回の **ソフト404の原因は、このinherit属性が通常の投稿に入っていたから** でした。
これをpublishedにし、ブラウザやサーバーのキャッシュを削除してアクセスし直すと無事表示されるようになりました。

何故一部の記事にのみこの属性が入ってしまったのかはわかりません。
当該記事はカスタム投稿タイプでしたが、記事に親子関係は付けていませんでした。

管理画面からだと普通に「公開」状態に見えてしまうので、一部の記事のみソフト404になったり表示が重い、という方はデータベースの中身をチェックしてみてください。
[jQuery]トグル式検索フォームを.focus()で初期フォーカスさせよう[ユーザビリティ][備忘録]

完全にタイトル通りですが、
サイト内検索フォームでトグル式にしている場合
（虫メガネマークをクリック　→　inputエリアが現れる）
inputエリアが現れたら、自動でフォーカスさせ、
そのまま検索ワードを入力できるようになります。

<h4>jsファイル</h4>
<pre>
jQuery(function(){
    jQuery("#search_button").click(function () {
        jQuery("#search_form").slideToggle();
        jQuery("#search_form input").focus();
    });
    });
</pre>
Nginx の stable 版と mainline 版はどちらをインストールするべきか

[公式ドキュメント](https://docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/#stable_vs_mainline)にはこうある。

> * Mainline – Includes the latest features and bug fixes and is always up to date. It is reliable, but it may include some experimental modules, and it may also have some number of new bugs.
> * Stable – Doesn’t include all of the latest features, but has critical bug fixes that are always backported to the mainline version. We recommend the stable version for production servers.

要するに、

* mainline は最新版で、実験的なモジュールを含む場合があり、バグがあるかもしれない。
* stable には重要なバグフィックスが適用される。実稼働サーバーには stable 版が推奨される。

ということで、stable 版をインストールしたほうがいい。mainline 版のインストールは自己責任で。
【rails】本番環境でもエラー文を表示させる


本番環境において、
デフォルトの設定のままだと、
エラーが出ても以下のようにお決まりの文言が表示されるだけですので、
何が原因で表示されないのかが判断できません。

<img width="1440" alt="本番環境エラー前_修正.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442023/43322589-ebc5-ff61-7a89-beecdfab4491.png">

-------------------------------

そこで、普段開発環境で見ているお馴染みのエラー画面にする方法があります。
以下のように設定します。

```/config/environments/production.rb
config.consider_all_requests_local       = true #デフォルトはfalseになっている
```



デプロイしなおすと以下のようにお馴染みのエラー画面が表示されました。
これで原因解明ができるようになりました。

![本番環境エラー文後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442023/f47853e3-1413-96d6-0ce0-5c862bb0bafb.png)
工数見積りをするときに注意したい３つ＋１つのこと

# はじめに
この記事は「[工数見積もりをするときに迷ったらどうすべきか](https://qiita.com/mtanabe/items/38f3f3a2f03a0efd76d0)」の前に注意したいことをまとめた感じです。
例によって、自社の先輩方に聞いてみた結果なので、文末は「らしい」とか「だと思う」が頻発してます:bow:

# １）お客さんは見積もりに何を求めているのかを明確にすること。
例えば、お客さん側の思惑には以下のような例が考えられます。

- 予算を取りたいから、希望する機能をすべて実装するのに必要な工数を知りたい。
- リリース希望日があるので、全体を見たうえで優先度の高い機能だけを実装するための判断をする材料がほしい。
- リリース希望日までにどのくらいの機能を盛り込めるかを知りたい。

予算を取りたいのなら、「足りないより余る方がマシ」で多少多めの数字やブレの大きい数字出してもよかったりしますが、リリース予定日を知りたいとしたらあまりブレ幅が大きいのはちょっと困ってしまう:disappointed_relieved:

相手がどんな目的で見積もってほしがってるのかを見極めないと、「正しい情報を盛り込んだ見積もり」を出すのは難しいようです。

# ２）見積もりの範囲を明確にすること。
「n月末に終了します」ってのは、何が終了するのか。
実装？テスト？テストも単体なのか結合なのか。
この認識が開発側とお客さんサイドで認識がずれてると、大変なことになります :sweat_drops: 
「開発と単体テストまでがn月末に終わります。その後の結合試験は別途工数が必要になります」とか、見積もりの範囲を説明しましょう。

# ３）その場で返事しないこと。
お客さんとの会話の中で「どのくらいでできそう？」って聞かれると、つい「そうですね、n人月くらいとか？」って言っちゃいがちなんですが、これはやめた方がいいそうです:cold_sweat:
「こっちの言い値＝完成予定であり利用可能開始日でもある」ような受け止められ方をされる恐れもあるので、必ずいったん持ち帰りましょう。

１回数字を口に出すと、なぜか本見積もりを出しても「こないだn人月って言ったじゃん～・・・」って、ずーっと引っ張られることが高い気がします。ってか私は（現在進行形で）引っ張られてます:sweat:

## ＋１）とはいえ、押し切られて返事しちゃった場合は、裏でエライ人に相談すること。
「お客さんの手前、あんなこと言っちゃったんですがどうしましょう :disappointed_relieved:」って先輩や上司に報告・相談しましょう。
報告・相談さえすれば、先輩も上司も味方です、きっと。

# おわりに
見積もりって難しい！
ある時は正解の方法でも、ある時は失敗してしまうこともあると思ってます。
けど、正解した方法を１つずつため込んでいけば、ちょっとずついい見積もりが作れるようになっていくかなーと思ってます。
Thymeleaf でタイムゾーンを指定して現在日時を取得する

## Expression Utility Objects #calendars

Expression Utility Objects (式ユーティリティオブジェクト) の #calendars を使う。

[Tutorial: Using Thymeleaf \(ja\) - 19 Appendix B：式ユーティリティーオブジェクト - カレンダー](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC)

```
/*
 * 現在日時のカレンダーオブジェクト（java.util.Calendar）を作成します
 */
${#calendars.createNow()}

${#calendars.createNowForTimeZone()}
```

## サンプルコード

テンプレートHTMLを用意。

```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>

<!-- #calendars.createNow() -->
<p th:text="${#calendars.format(#calendars.createNow(), 'yyyy年MM月dd日 HH時mm分ss秒')}"></p>

<!-- #calendars.createNowForTimeZone('UTC') -->
<p th:text="${#calendars.format(#calendars.createNowForTimeZone('UTC'), 'yyyy年MM月dd日 HH時mm分ss秒')}"></p>

<!-- #calendars.createNowForTimeZone('Asia/Tokyo') -->
<p th:text="${#calendars.format(#calendars.createNowForTimeZone('Asia/Tokyo'), 'yyyy年MM月dd日 HH時mm分ss秒')}"></p>

<!-- #calendars.createNowForTimeZone('GMT+0900') -->
<p th:text="${#calendars.format(#calendars.createNowForTimeZone('GMT+0900'), 'yyyy年MM月dd日 HH時mm分ss秒')}"></p>

</body>
</html>
```

## タイムゾーンおよびロケールが日本・日本語の環境で実行

- #calendars.createNow()、'Asia/Tokyo'、'GMT+0900' は日本標準時で出力される
- 'UTC' は協定世界時で出力される (日本より9時間前になる)

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>

<!-- #calendars.createNow() -->
<p>2019年09月14日 09時01分23秒</p>

<!-- #calendars.createNowForTimeZone('UTC') -->
<p>2019年09月14日 00時01分23秒</p>

<!-- #calendars.createNowForTimeZone('Asia/Tokyo') -->
<p>2019年09月14日 09時00分23秒</p>

<!-- #calendars.createNowForTimeZone('GMT+0900') -->
<p>2019年09月14日 09時00分23秒</p>

</body>
</html>
```

## 今回の環境

- OpenJDK 11.0.2
- Thymeleaf 3.0.11

## 参考資料

- [Tutorial: Using Thymeleaf \(ja\) - 19 Appendix B：式ユーティリティーオブジェクト - カレンダー](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC)
- [java \- Spring \+ Thymeleaf: time in user's timezone \- Stack Overflow](https://stackoverflow.com/questions/22743346/spring-thymeleaf-time-in-users-timezone)
EC2のLaravel環境にGitを入れて開発を開始する　AWS/Laravel6.0連載(4)

# はじめに

前回に続き、EC2のLaravel環境にGitを入れてみましょう。

前回記事はこちら
[EC2のLaravel環境にMySQLを入れる　AWS/Laravel6.0連載(3)](https://qiita.com/rf_p/items/c9bb19a0b263e4b2c8fe)

# Amazon LinuxにGitを入れる

Gitはバージョン管理ツールです。
変更履歴ごと保存できて、変更点が競合してもよしなに統合してくれます。
そのおかげで前のバージョンに戻したり、複数人でファイル編集した時に全員の変更点を簡単に結合してくれます。

```bash
$ sudo yum install git
$ git --version
```

成功したらバージョンが表示されます。
これでgitコマンドが使えるようになります。

```bash
git version 2.17.2
```

# GitHubにリポジトリを作る

https://github.com/
RepositoriesのNewから新しいリポジトリを作る。名前は好きなものを。
Readmeはとりあえず作らなくてOKです。

Publicだとインターネット上で公開されるので、セキュリティ上問題のあるファイルや情報は出さないようにしましょう。
心配な場合はPrivateを選びましょう。

# sshキーを作る

```bash
$ ssh-keygen -t rsa
```

全部EnterキーでOKです。

完了すると~/.ssh/下に、id_rsaとid_rsa.pubという2ファイルができています。
id_rsa.pubが公開鍵で、GitHubに登録するファイルになります。

```bash
$ cat ~/.ssh/id_rsa.pub
```

表示されたテキストをコピーし、GitHubの右上アイコンからSettings→SSH & GPG keys→New SSH Keyで登録します。
これで自分の管理するGitHubリポジトリにpush, pullができるようになったはずです。

# Git初期化

```bash
$ cd /var/www/blog/
$ git init
```

これでGitコマンドが使えるようになります。

```bash
$ git status
```

Gitリポジトリにpushしていないファイル一覧が出ます。

```
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	.editorconfig
	.env.example
	.gitattributes
	.gitignore
	.styleci.yml
	app/
	artisan
	bootstrap/
	composer.json
	composer.lock
	config/
	database/
	package.json
	phpunit.xml
	public/
	resources/
	routes/
	server.php
	storage/
	tests/
	webpack.mix.js
	yarn.lock
```

```bash
$ git add -A
```

本来開発中はgit diffで変更点を見て、余計なファイルや変更点が混じっていないか確認した上でpushしますが、初回はadd -Aで全ファイルpushしちゃいましょう。

```bash
$ git commit -v
```

最上部にinitと書いて保存します。

```bash
$ git remote add origin git@github.com:【ユーザー名】/【リポジトリ名】.git
```

ユーザー名とリポジトリ名は、あなたのユーザー名とリポジトリ名を入れてください。
【】は不要です。

```
$ git push -u origin master
```

これでGitHubにファイルが上がります。

# エラーが起きたら

```bash
To github.com:xxx/xxx.git
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'git@github.com:xxx/xxx.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```

こんな感じのエラーが出たら、

```bash
$ git merge --allow-unrelated-histories origin/master
```

これで解決するかもしれません。

参考：[初めてGitHubリポジトリにpushしたらrejectedエラーになったときの対応メモ](https://qiita.com/takanatsu/items/fc89de9bd11148da1438)

# gitの設定をする

Git操作する時にgit stとかのエイリアスがあると開発スピードが上がります。
初期設定をしておくところを今回のゴールとします。

```bash
$ git config --global user.name "hoge"
$ git config --global user.email hoge@example.com
$ git config --global color.ui auto
```

hoge部分にはあなたの名前を、emailにはあなたのメールアドレスを入れます。
GitHubリポジトリがpublic公開の場合、ここの情報が公開されるのでお気をつけください。
3行目はgitコマンドの色を有効にしています。

エイリアスはコピペの方が早いので以下で。

```bash
$ vi ~/.gitconfig
```

以下内容を追記します。

```
[alias]
  st = status
  co = checkout
  br = branch
  ci = commit
```

これでgit statusが実行されます。

```
$ git st
```

co, br, ciあたりもエイリアスが効いているので使ってみてください。

本日は以上です。
ラズパイ2 無線LANの設定

# はじめに
今はもう、ラズパイ2を使っている人は少ないと思います。
しかし私の手元には2台もあり、これを使って、また電子工作をやろうかなーと思い、無線LANの設定をはじめました。
ところが意外と手こずってしまったので、設定を残しておきます。

# 前提
・ラズパイ2を使用。
・USBにWIFIモジュールをつけて通信する。
・アクセスポイントのSSIDはステルス設定になっている。

# 無線LANの設定
弄るファイルは以下二つ。
・/etc/network/interfaces
・/etc/wpa_supplicant/wpa_supplicant.conf


```/etc/network/interfaces.
# interfaces(5) file used by ifup(8) and ifdown(8)

# Please note that this file is written to be used with dhcpcd
# For static IP, consult /etc/dhcpcd.conf and 'man dhcpcd.conf'

# Include files from /etc/network/interfaces.d:
#source-directory /etc/network/interfaces.d ★消す！！！
auto wlan0
allow-hotplug wlan0
iface wlan0 inet manual
wireless-essid ＳＳＩＤを記述
wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
```

```/etc/wpa_supplicant/wpa_supplicant.conf

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
        ssid="SSIDを記述" ★ダブルクォートで囲むこと
        psk="パスワード"  ★ダブルクォートで囲むこと
}

```
短いですが、以上です。
AWS勉強会

#VOYAGE GROUP様主催のAWS勉強会に参加させていただきました！

##1. VPCとサブネットを切る
- ネットワークを作成するステップ
- VPCを/16で切り、サブネットを/24で4つ切る
- 2つのアベイラビリティゾーンに分配

##2. サブネット内にEC2インスタンスを立てる
- 作成したサブネット内にインスタンスを立てる。

##3. ECS内のMySQLを同一アベイラビリティのプライベートサブネット内のAuroraに移動
- 仕様変更によりプライベートサブネット内にAuroraを作成できなかったので省略...

##4. S3でデータを共有
- 複数インスタンス内から同じデータを読むため、S3を立てる。

##5. インスタンスのAMIを取って、もう一つのサブネット内にAMIを利用したインスタンスを立てる
- 設定済みのインスタンスのAMIを取ることによって同一のインスタンスを作成することができる。

##6. ロードバランスの設定
- EC2へアクセスがあった際に負荷を調整するロードバランサーを設置する
- EC2に適用したセキュリティグループのHTTPルールをロードバランサー用のセキュリティグループからのみにする
- Wordpressのoption_valueの変更も忘れずに

#実質本題
- サブネットの/16とか/24とかって何？
    - サブネットマスク！
    - /16なら65000個くらい、/24なら250個くらいのipが使える

- アベイラビリティゾーンなんでa,bじゃなくてc,d使うの？
    - c,dの方が新しいアベイラビリティゾーンだから

- httpのレスポンス
    - エラーコードは用途によって使い分けます。
   
- サーバにアクセスが大量にかかった時の対策は？
    - スケーリング
    - 分散
    - etc...
   
- Wordpress状態はどう保持されてるのか(ログイン情報等)

# 今後は... 
- APIでスクリプトを叩き作成できるようにする→設定ファイルをスクリプトに食わせて作成できるようにする等ができるといいですね

# 感想
いつもはAlibabaを使っているのでコンソール画面がなれませんでしたが、構成等は変わらないのでサクッと作成できました
コンソール問題もコード管理で解決できれば問題ない…と思っています
#エラー解消  MySQL起動できない


MySQLを起動しようとすると以下のようなエラーになった｡

```index:エラーメッセージ

ERROR! The server quit without updating PID file (/usr/local/var/mysql/[Macの名前].local.pid).
```


パソコンを再起動したら､
MySQLが起動できました｡
PIDが再度割当される､のかも？


色々調べましたが､再起動するだけで解決しました｡
とりあえず分からないときは再起動してみましょうー｡













[PIDとは]
(https://wa3.i-3-i.info/word11040.html)

[試してみた記事①]
(https://rooter.jp/infra-ops/mysql-pid-host/)
[試してみた記事②]
(http://shikouno.hatenablog.com/entry/2017/06/22/210000)
標準出力関数をユーザに委譲する

#標準出力をユーザ関数に委譲したい
ライブラリ内のエラーメッセージや、開発中のデバッグ文字列を標準出力に流したい場合があります。生の**printf** 関数で出力してもリリース時に適切な対処（ライブラリならドキュメントに記載する。デバッグ文字列ならコードをすべて除去する。）をしていれば大抵は大きな問題とはなりません。しかし、開発環境に左右されやすい標準出力の動作は、そのサービスを享受するユーザにできるだけ委譲したほうが無難といえるでしょう。

##1. ReportFunctionを定義する
###std::printf
```cpp
int printf( const char* format, ... );
```
この関数をハンドリングするために、次のような型を用意しておきます。

```cpp
using ReportFunction = int (*)( const char*, ... );
```

##2. メッセージフォーマットをブリッジする
```cpp

ReportFunction rf = nullptr; // ex. rf = printf;

template<typename ...Args>
int report( Args ...args )
{
    return ( rf != nullptr ) ? rf( args... ) : 0;
}
```
可変長引数テンプレートを使うと、簡単にメッセージフォーマットを受け渡すことができます。

#使い方
**ReportFunction rf** に、ユーザの任意の標準出力関数をもらいます。メッセージを構築する側（ライブラリやデバッグコード）は**report** 関数を、**std::printf** を使うときの感覚で利用します。

ここで紹介したものは標準出力を委譲するための部品です。使いやすくクラス化するのも良いと思います。
[Js]document.getElementById()

# document.getElementById()

## document.getElementById()とは？

該当するidの要素にアクセスすることができる関数である。
（해당하는id의 요소에 접근할수 있는 함수）

例えば<~id = lucky>という要素がある。document.ElementById("lucky")という文書があったとして<~id = lucky>のところにアクセスができる。
（예를 들어서<~id = lucky>라고 하는 부분이 있을때 document.ElementById("lucky")라고 입력하면 <~id = lucky>에 접근할 수 있다. ）

## getElementById()の使い方。
element = document.getElementById(id);
(id)はアクセス、操作したい要素のidを入力
((id)는 접근,조작하고자 하는 요소의id을 입력)

## 実際にコードを書いてみた。（写真あり）

![スクリーンショット 2019-09-14 18.07.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219806/7f41d1dd-d566-392d-94ea-fbdb09ef3c84.png)

![スクリーンショット 2019-09-14 18.10.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219806/cfa7b891-f9e0-a5d9-ecbe-7f1e5b56f8dc.png)

![スクリーンショット 2019-09-14 18.10.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219806/36dc7f94-1a87-1883-8006-9d1f175bcc33.png)


本日はここまで。よくやった。毎日アップするよ〜
(오늘은 여기까지.잘했다.매일매일 업로드 할꺼야~)
Flutterアプリ開発に役立ちそうなコード/ライブラリ/ノウハウ一覧

Flutterでアプリを実装し始めると、「どう書くのがベストなのか？」や「どう配置するのがベターなのか？」と悩み始めた。
そういう時はGitHubで公開されているコードやアプリを参考にしたくなる。

そこで、Flutterアプリ開発に便利そうなコード/ライブラリ/ノウハウを集めてみた。

## Flutter公式 : Write your first Flutter app, part 1

https://flutter.dev/docs/get-started/codelab

どのサイトを見てもまずFlutter入門としてここが紹介されいる。
Flutterのプロジェクト作成、シンプルなアプリ作成を丁寧に教えてくれる。

## Flutter公式 : Cookbook 

ここもFlutter入門としてどこでも紹介されている
アプリの作成中に一般的な問題を解決する方法を示すレシピ集

https://flutter.dev/docs/cookbook

## Flutter公式GitHubのサンプル

Flutterスキルの向上に役立つサンプルアプリ、デモ、サンプルが紹介されている。
公式のFlutterチームが厳選したリストらしい
20個くらいのアプリが紹介されている（GitHubリンク付き）

https://github.com/flutter/samples/blob/master/INDEX.md

## Flutter Community
Flutter Communityなるものがあり、アプリの公開リストとMedium記事が紹介されている。

### List of open-source Flutter apps | It's All Widgets! 
Flutterで構築されたアプリのGitHubリスト
https://itsallwidgets.com/?open_source=true

### Flutter Community – Medium
良質な記事がたくさんありそう
https://medium.com/flutter-community

## Solido/awesome-flutter
awesomeシリーズのFlutter版
記事、動画、プラグイン、フレームワーク、オープンソースアプリ、なんでもござれ

https://github.com/Solido/awesome-flutter#articles

## Flutter Awesome
Flutterのアプリ、ライブラリ、UIテンプレートが紹介されている
細かくカテゴライズされており、ジャンルや部品毎に検索も可能
https://flutterawesome.com/

## Flutter Arsenal
Flutterのライブラリやツールがカテゴライズされて紹介されている。
https://flutterarsenal.com/
VSCodeのemmetがtabでコード展開しない

## 事象
[VSCode](https://code.visualstudio.com/)を使ってHTML+CSSコーディングをしていたら、ある日突然[emmet](https://emmet.io)の略語を打ち込んで`tab`キーをターン！と押してもHTML要素やCSSプロパティ展開をしてくれず、その代わりにサジェストワードばかり表示されるという謎の事象が発生。どうもアプデの際に設定が変わってしまった模様。
まさに何もしてないのに壊れました状態。ダブルクリックすればいけるときもあるけど…とにかく仕事が捗らない。困った。

## 対応
`Code` => `基本設定` => `キーボード ショートカット` とクリックし、キーボード ショートカットを開きます。
<img width="610" alt="スクリーンショット 2019-09-14 17.32.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119598/8766a92d-f06a-a645-4548-3397d8d9f43f.png">
すると、ショートカットキー / キーバインド一覧が表示されます。そうしたら…

1. 検索窓に`tab`と打ち込んで、`tab`が割り当てられている機能を探します。
2. `tab`がemmetだけに割り当てられていることを確認します。
3. もし`insertNextSuggestion`や`acceptSelectedSuggestion`などの項目にも`tab`が割り当てられているようなら、これを`Shift`+`tab`や`command`+`tab`に手動で置き換えてやります。
<img width="1137" alt="Item-0_と_Item-0_と_Item-0_と_Item-0_と_Item-0_と_AppleBluetoothExtra_と_AppleVPNExtra_と_AirPortExtra_と_DisplaysExtra_と_AppleVolumeExtra_と_BatteryExtra_と_AppleTextInputExtra_と_AppleClockExtra_と_Item-0-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119598/12bae277-5e29-d14a-6652-0ee0c8afa6de.png">

これでOK！
また再びemmetで快適にコーディングできるようになりました〜。誰かの助けになれば幸いです。
【Ruby】Googleスプレッドシートを読み書き

## 前提

このドキュメントは以下を前提として進めます。

- Google Drive APIを有効にしていること
- Google Sheets APIを有効にしていること
- Google OAuth2クライアントIDを取得していること
- Google OAuth2クライアントシークレットを取得していること
- Google OAuth2リフレッシュトークンを取得していること

## 準備

`google_drive`gemをインストールします。
以下のコマンドを実行するか、`Gemfile`に追記します。

```bash
gem install google_drive
```

or  

```ruby
gem 'google_drive'
```

## 今回検証するスプレッドシート

![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349145/4883c405-eec6-6791-8561-fd22793c4ae8.png)


## サンプルコード

```ruby
# frozen_string_literal: true

require 'google_drive'

client_id     = 'xxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com'
client_secret = 'xxxxxxx-xxxxxxxxxxxxxxxx'
refresh_token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

# 認証情報を生成する
credentials = Google::Auth::UserRefreshCredentials.new(client_id: client_id,
                                                       client_secret: client_secret,
                                                       refresh_token: refresh_token)

# セッションを生成する
session = GoogleDrive::Session.from_credentials(credentials)

# スプレッドシートIDを元にスプレッドシートを取得
spreadsheet_id = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
spreadsheet    = session.spreadsheet_by_key(spreadsheet_id)
p spreadsheet
# => #<GoogleDrive::Spreadsheet id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" title="スプレッドシートのタイトル">

# 全てのワークシートを配列で取得
worksheets = spreadsheet.worksheets
pp worksheets
# => [#<GoogleDrive::Worksheet spreadsheet_id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", gid="xxxxxxxxxx", title="シート1">,
#     #<GoogleDrive::Worksheet spreadsheet_id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", gid="xxxxxxxxxx", title="シート2">,
#     #<GoogleDrive::Worksheet spreadsheet_id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", gid="xxxxxxxxxx", title="シート3">,
#     #<GoogleDrive::Worksheet spreadsheet_id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", gid="xxxxxxxxxx", title="シート4">,
#     #<GoogleDrive::Worksheet spreadsheet_id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", gid="xxxxxxxxxx", title="シート5">]

# ワークシートをシート名を元に取得
worksheet_title = 'シート1'
worksheet = spreadsheet.worksheet_by_title(worksheet_title)
p worksheet
# => #<GoogleDrive::Worksheet spreadsheet_id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", gid="xxxxxxxxxx", title="シート1">

# 全ての行を取得
# ２次元配列で取得される
# 空のセルは空文字が入る
rows = worksheet.rows
pp rows
# => [["A1セル", "B1セル", "C1セル", "D1セル"],
#     ["A2セル", "B2セル", "C2セル", "D2セル"],
#     ["A3セル", "B3セル", "C3セル", ""]]

# セルから値を取得
p worksheet[1, 1]
# => "A1セル"

# セルに値を入力
# NOTE: worksheet.saveを実行しない限り、変更は保存されない
worksheet[1, 1] = 'hogehoge'
p worksheet[1, 1]
# => "hogehoge"

# 変更を保存
worksheet.save
```

## 上記スクリプト実行後

A1セルの値が書き換えられているのが確認できる。
![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349145/df21599b-d2f0-1add-a60a-949fe65be45c.png)


## 参考

- [gimite/google-drive-ruby](https://github.com/gimite/google-drive-ruby)
Swift5 コード上でUIButton,UILabel を設定するときのあれこれ

備忘録程度に載せておきます

*SwiftUI ではなく，UIKit を使用しています*

#UILabel編
UILabelを設定するときは下のようなものを設定できます

```swift:ViewController.swift
    let label = UILabel()
    override func viewDidLoad() {
        label.text = "Hello" 
        // 表示される文字を指定
        label.textColor = .black 
        // 文字色の指定
        label.backgroundColor = .white 
        // 背景色の指定
        label.frame = CGRect(x: 10, y: 10, width: 100, height: 100) 
        //場所と大きさの指定
        label.cornerRadius = 10 
        // 角丸の指定
        label.alpha = 0
        // 透明度の指定
        label.font = UIFont.boldSystemFont(ofSize: 70.0) 
        //フォントサイズの指定
        label.adjustsFontSizeToFitWidth = true 
        // フォントサイズを自動調整するか
        self.view.addSubview(button) 
        // ビューに追加する
    }

```

#UIButton編
UIButtonを設定するときは下のようなものを設定できます

```swift:ViewController.swift
    let button = UIButton()
    override func viewDidLoad() {
        button.text = "Hello" 
        // 表示される文字を指定
        button.setTitleColor(.white, for: .normal) 
        // 文字色の指定(.highlited にするとボタンを押したときの色を指定できる)
        button.backgroundColor = .white 
        // 背景色の指定
        button.frame = CGRect(x: 10, y: 10, width: 100, height: 100) 
        //場所と大きさの指定
        button.layer.cornerRadius = 10 
        // 角丸の指定
        button.alpha = 0 
        // 透明度の指定
        button.titleLabel?.font = UIFont.systemFont(ofSize: 30)
        //フォントサイズの指定
        button.titleLabel?.adjustsFontSizeToFitWidth = true
        // フォントサイズを自動調整するか
        self.view.addSubview(button) // ビューに追加する

        button.addTarget(self, action: #selector(self.event(_:)), for: UIControl.Event.touchUpInside) 
        // ボタンにアクションを追加する
    }
    func event(_ sender: UIButton){
    }

```

問題点、指摘などございましたらコメントお願いします
GoogleAppsScript[gas]+slackで電車の遅延情報を受け取る

####はじめに
GoogleAppsScriptを使い始めてまだ日が浅いですが、超絶便利だったので投稿します。

####目的
自動でslackに通勤で使う電車の運行状況の通知を受け取る

####準備

- slackにIncoming Webhooksを追加　参考:https://qiita.com/hey_you/items/e8b2d8bf16400fe5afd3
- 鉄道情報のjson(今回使うAPI): https://rti-giken.jp/fhc/api/train_tetsudo/
- Googleスプレッドシート->ツール->スクリプトエディタでコードを書く準備

####実装
コーディングStart!

``` javascript
// その日の7:30にトリガーを設定
function setTrigger() {
  var triggerDay = new Date();
  triggerDay.setHours(7);
  triggerDay.setMinutes(30);
  ScriptApp.newTrigger("slackPost").timeBased().at(triggerDay).create();
}

//その日のトリガーを削除する
function deleteTrigger() {
  var triggers = ScriptApp.getProjectTriggers();
  for(var i=0; i < triggers.length; i++) {
    if (triggers[i].getHandlerFunction() == "main") {
      ScriptApp.deleteTrigger(triggers[i]);
    }
  }
}

function slackPost() {
  try {
  deleteTrigger();
  var url = "https://tetsudo.rti-giken.jp/free/delay.json";
  var toSlackUrl = "Incomng WebhooksでコピーしたURL";
  var currentDate = new Date();
  var date = Utilities.formatDate( currentDate, 'Asia/Tokyo', 'MM/dd HH:mm');

  var response = UrlFetchApp.fetch(url);
  var trainData = JSON.parse(response.getContentText());
  var message = "\n" + "◆関東遅延情報 " + date + "\n" +"━─━─━─━─━─━─━─━"+ "\n" +"*◯平常運転です*" + "\n"+"━─━─━─━─━─━─━─━";
    for each(var obj in trainData) {
      if (obj.name == "通勤で使う電車名(鉄道情報のjsonで確認してください)") {
        message = "\n" + "◆関東遅延情報 " + date + "\n" +"━─━─━─━─━─━─━─━"+ "\n" + "*△"+ obj.company  + "*:*" +obj.name +"*"+ "\n"+"━─━─━─━─━─━─━─━";
      }
    }
    postMessage(message, toSlackUrl);
}catch(e){
  Logger.log("実行エラー" + e);
  postMessage("◆Script実行エラーです。");
}
}

function postMessage(message, hookPoint){
  try {
    var payload = {
      "text": message,
    }
    var options = {
      "method": "POST",
      "payload": JSON.stringify(payload),
      "headers": {
        "Content-type": "application/json",
      }
    }
    var response = UrlFetchApp.fetch(hookPoint, options);
    
    if (response.getResponseCode() == 200) {
      return response;
    }
    return false;
  }catch(e){
    Logger.log("実行エラー" + e)
    postMessage("◆Script実行エラーです。");
  }
```

####トリガーについて
私の場合、7:30に通知が欲しいので、それより前の時間帯(午前6時〜7時)でsetTriggerを実行して、slackPost()を実行する設定にしています
![スクリーンショット 2019-09-14 17.08.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442028/184c281c-30ed-079e-5042-82e36a984a7b.png)
![スクリーンショット 2019-09-14 17.08.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442028/67c57ad2-de24-fd15-038f-7374d0295929.png)

####実際の画面
![スクリーンショット 2019-09-15 12.47.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442028/d7e744ee-5ef8-1f88-85fc-c76f0701ce9b.png)
[メモ] rubyについて

## メソッドについて

### 代入関数とは
サンプル

```
class Hoge
　def current_user=(user)
　　@current_user = user
　end
end

hoge = Hoge.new
hoge.current_user = 'HogeHoge'
```

### 普通のメソッド

```
class Hoge
  def current_user(user)
    @current_user = user
  end
end

hoge = Hoge.new
hoge.current_user('HogeHoge')

```

## mapの使い方
配列でもいける

```
Array.map{|obj|
 #  計算式..etc
}
```

hashでもいける

```
Hash.map{|obj|
 #  計算式..etc
}
```

省略した書き方でもいける

```
Hash.map(&:メソッド名)
```
Noribenが「Error creating CSV」で動作しない問題の解決方法

マルウェア動的解析に便利なPythonプログラムのNoribenについて、仮想環境上でエラって動かなかったので、直し方について記録します。
「そもそもNoribenとは何？」という方は[本家参照のこと。](https://github.com/Rurik/Noriben)


#環境
・Windows10 home edition（Ver1903）
・Python 2.7
※FlareVMで構築

#事象「7: Error creating CSV」
↓Ctrl+Cで停止後に下記のエラーが出力されて、動作が停止してしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/c62e6af6-f8fe-b0a7-c477-17a802d5d1b0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/1c07814d-b291-2777-395a-b213cda2b6a6.png)

↓Processmonitorのファイルは作成できているんだけど、差分ファイルが作成できない状況のよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/b3972b55-9c9d-e5aa-a6a8-7b2881efa4e2.png)

#解決方法
まったく同様の事象がissueとして上がっていました。
FlareVMで構築していると起こる可能性が高そうです。
https://github.com/Rurik/Noriben/issues/14
ただ、載っている方法を試してみても私は解決しなかったです、、、
ほかにも、Procmon.exeをNoriben-masterの配下に置いておくなどの解決策もあったようですが、試した結果変わらずでした；；

何度か動作させていると↓のようなエラーも出力されることがありました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/52187db5-829f-741e-b12f-f915427ff52f.png)

既定のアプリの設定ができていないのかも？と思い、txt、csv、pmlに紐づく既定のアプリを設定しなおしました。
txtとcsvはサクラエディタに変更しました。
[参考：Windows 10 の既定のプログラムを変更する](https://support.microsoft.com/ja-jp/help/4028161/windows-10-change-default-programs)

この結果なのかどうかわかりませんが、正常動作するようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/ee25d7ac-09b7-97c8-2881-d93ff5542ec9.png)


#おまけ：Noribenの切り分けのコツ。
Noribenは成功した状態だと下記のように４つのファイルが生成されます。
これらのファイルはコマンドプロンプトの実行パスに保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102081/883f9266-7ade-83b8-cf43-5d0604b8cd75.png)

ファイルの有無によって切り分けが可能かもしれません。
1）pmlがない場合
→そもそもProcessmonitorが動作していない
2）csv
→差分の生成に問題がありそう
3/4）txt、timeline.csv
→時間がかかっているか、実行失敗しているかも


ご参考までに！
【Java】初期化、追加、取得

# 配列
データ型 [] 配列名 = データ型 [要素数];

```java:Array.java
String[] aaa = new String[100];
aaa[0] = "文章";
String bbb = aaa[0];
```

# リスト
List<データ型> オブジェクト名 = new ArrayList<>();

```java:List.java
List<String> aaa = new ArrayList<>();
aaa.add("AA");
aaa.get(0);
```

# マップ
Map<キーの型, 値の型> オブジェクト名 = new HashMap<>();

```java:Map.java
Map<Integer, String> aaa = new HashMap<>();
aaa.put(1, "文章");
aaa.get(1);
```

# 後記
解説はいらない、
初期化の方法をど忘れしたので、テキトーでいいからとりあえず動かしたいんだ……。
というときのために、迷わないように簡単なものだけ挙げています。
データ分析の学習にエンジニアへ薦めている本をまとめてみる

# はじめに

仕事の都合上、データ分析未経験なエンジニアに集計や基本的なデータ分析手法を使えるように、色々教えてきました。
業務の中で教えながら進められるように工夫はしつつも覚えることが多い領域なので、ある程度は自分で勉強してもらわないといません。
その際に、おすすめしている本を紹介します。

前提として、Pythonに限らず「プログラミングを一定水準以上書ける」「大学レベルの数学が分かる」「ITパスポート程度のIT知識をもつ」ことを前提としています。

# 書籍の紹介

実務でやっていくためには、おおまかに以下の3要素を抑えていく必要があると考えています。

- Python
    - Pythonの使い方について 
- データ分析
    - データ分析で何をやればいいか、どのような手順で進めていけばいいか 
- 機械学習
    - 機械学習でできること、どのような特徴があるか

実務上それぞれは関係性があり、独立して学習を進めていくよりも、関連性をもって学習していく方が覚えやすく、また一般の書籍もそのような内容が多いという印象を受けます。
ここでは、書籍の紹介として、それぞれの内容で扱っている要素のレベル感を独断で評価していきます。

ちなみに、★1つが初心者レベル、★3つが業務上で使うのにおおよそ問題ないと思われるレベル、★5つが理解できれば基本困らないレベルです。

何かご意見等ありましたら是非ご指摘お願いします。

## [スラスラわかるPython](https://www.shoeisha.co.jp/book/detail/9784798151090)

Pythonの未経験者向け。
データ分析や機械学習の要素はないが、基本的な構文を抑えている。
- Python
    - ★☆☆☆☆ 
- データ分析
    - ☆☆☆☆☆
- 機械学習
    - ☆☆☆☆☆

## [pythonチュートリアル](https://www.oreilly.co.jp/books/9784873117539/)

Pythonがある程度わかる or プログラミング経験に自信がある人向け。資格試験の参考書にもなっている。
この内容を完全に理解できれば実務上ほとんど困らない程度に網羅しているという印象。

- Python
    - ★★★☆☆ 
- データ分析
    - ☆☆☆☆☆
- 機械学習
    - ☆☆☆☆☆

## [エクセルのデータ分析がみるみるわかる本](https://www.shuwasystem.co.jp/book/9784798042350.html)

分析のエッセンスを掴む用としておすすめ。
目的に始まり、方法の扱い方、結果の味方と示唆出しまで、実例を通して理解できる。
エクセルでやるところはどうでもいいが、試しやすいので敷居は低い。

- Python
    - ☆☆☆☆☆ 
- データ分析
    - ★★★☆☆
- 機械学習
    - ★★☆☆☆

## [機械学習図鑑](https://www.shoeisha.co.jp/book/detail/9784798155654)

Pythonのコードとその結果と解説が丁寧に用意されており、実践を通して分かり易く機械学習手法を理解できる。
機械学習の実践について、「どのような手順で進めていくか」「どのような手法があるか、何ができるのか」が分かり易い。

- PYthon
    - ★☆☆☆☆  
- データ分析
    - ★★☆☆☆ 
- 機械学習
    - ★★☆☆☆ 


## [Pythonではじめる機械学習 ―scikit-learnで学ぶ特徴量エンジニアリングと機械学習の基礎](https://www.oreilly.co.jp/books/9784873117980/)

とにかく扱っている範囲が広い。内容は基本的である汎用的であるため、この本の内容を網羅的に理解できれば、ここで扱っていない手法の理解がはかどると判断し、おすすめしている。

- PYthon
    - ★★★☆☆  
- データ分析
    - ★★☆☆☆ 
- 機械学習
    - ★★★★☆
システムまぎちゃんへの道～ラズパイにMeCabを入れてみよう～

ラズパイにも MeCab は入ります。それも意外とあっさりと。
MeCab は形態素解析器と呼ばれる、文章を入力とし、形態素とその情報を出力とするアプリケーションです。

ということで、MeCab を入れてみましょう。

MeCab は[ここ](https://drive.google.com/uc?export=download&id=0B4y35FiV1wh7cENtOXlicTFaRUE)
MeCab に必要な辞書はいくつかありますが、IPA 辞書がメジャーみたいなので、[これ](https://drive.google.com/uc?export=download&id=0B4y35FiV1wh7MWVlSDBCSXZMTXM)
をダウンロードします。

気をつけなければいけないのは、CentOS にて標準で使っている文字コードは　UTF-8 なので、
これにあわせた構成にしなければならないことです。

とは言うものの、設定は超簡単です。

```
$ tar xzvf mecab-0.996.tar.gz
$ tar xzvf mecab-ipadic-2.7.0-20070801.tar.gz
$ cd mecab-0.996
$ ./configure --with-charset=utf8
$ make 
# make install

$ cd
$ cd mecab-ipadic-2.7.0-20070801
$ ./configure --with-charset=utf8
$ make 
# make install 
```

これでインストールは終了です。簡単ですね。でもここまでくるのには時間がかかります。
単純にラズパイが非力だからです。

でもって、これから入れるアプリケーションが /usr/local/lib を見に行く必要があるので以下を設定します。 

```
# vi /etc/ld.so.conf.d/mecab.conf
```

```bash:/etc/ld.so.conf.d/mecab.conf
/usr/local/lib
```

```
# ldconfig
```

では応用編として、R が MeCab を使えるようにします。まずは R のインストールから。

```
# yum install -y R-*
```

そして R を起動して　RMeCab をインストールします。

```
$ R
install.packages("RMeCab", repos = "http://rmecab.jp/R", type = "source")
q()
```

これも時間がかかったと思います。それはひとえにラズパイが非力だからです。

ここで本線に戻り、Python で MeCab が使えるようにします。
これに関しては瞬殺です。

```
# yum install python-pip34 python34-devel
# yum install swig3 swig3-*
# pip3.4 install --upgrade pip
# pip3.4 install mecab-python3
```

これで、MPI と同じように使いたかった MeCab 関連物がインストールできました。
AWS Cloud9 で Nuxt.js を使う

## 1. Environmentを作成

いつも通り、AWS Cloud9上で`Create environment`をクリックして作成する

## 2. node.jsをインストール

AWS Cloud9では、既にインストールされている。
`node --version`で確認。

## 3. Vue CLIをインストール

`npm install -g @vue/cli`
`npm install -g @vue/cli-service-global`

## 4. Nuxt.jsをインストール

`npm install --save nuxt`

## 5. プロジェクトを作成

`npx create-nuxt-app <project_name>`

## 6. プロジェクトを実行

`cd <project_name>`
`npm run dev`

あとは、AWS Cloud9上で「Preview」をクリックすれば表示される。
『データマネジメント』ってなに？？

![a6debd316f0b85c96453eb8536241964_m.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491578/295577e6-1e53-c27e-44e4-df46d9ca3f34.jpeg)
#はじめに
データマネジメントとは、**データを価値ある資産と捉え、その資産が組織で正しく利活用されるように、ルールや体制を作って統制を実施すること。**

企業の情報システムの人や、データ・AI・BIなどに関わる仕事をしている人、またITの動向を気にしている経営者の間では浸透しつつある言葉であり、これから「データ」が重要となる時代、非常に大事なキーワードであり、避けては通れない考えとなります。

しかし、インターネットで調べてみてもわかりやすく解説・説明されている記事は非常に少なく、なかなか世間に理解されず受け入れられていないのが実情です。そこで、料理の例を交えながらもう少し分かりやすく、「データマネジメント」についてお話ししてみたいと思います。


#そもそも『データ』ってなに？
データは、

- 例えば、テキストデータ、画像データ、音声データ、企業活動で生み出される電子データ、位置情報、などがある
- 情報の元となる、客観的事実の測定値や入力値
- 経営資源（ヒト・モノ・カネ・情報）の情報の1つであり、唯一勝手に増えていく資産である
- それ単体では意味がなく、目的が達成されるものでも、行動が促されるものでもない

ここ数年、「データ」を材料として新しいビジネスや経営活動を変革していく「デジタルトランスフォーメーション（以下、DX）」という言葉が生まれ、データ主導型で経営課題を解決したり、新しいビジネス手法を導く「データサイエンティスト」という人を指す言葉が流行するようになりました。

しかし、データがあればそれで良いのでしょうか？

#データマネジメントを料理に例えてみる
>あなたはレストランの店長。アルバイトを数人雇って事業を始めました。

>最初はおしゃれな食器とボリュームのある食事が評判となり大盛況。バイトも仕事に慣れてきて、各自が裁量を持ってレストランを回すことができるようになりました。しかし、次第にネットで味が叩かれるようになり、さらには食材の保管や偽装問題が発覚、その後もあまりに粗末なレストラン運営であったことがわかり、わずか1ヶ月で閉店となりました。

なぜでしょうか。下記の問題が考えられます。

- 消費期限切れの食材を使用していた、そもそも食材の管理や破棄のルールがなかった、あっても共有されてなかった
- バイトの調理教育が定期的にされておらず野放し状態
- バイトによって「中火」や「少々」、「鍋いっぱい」などの表現に異なる理解をしていた
- ボリュームとスピード重視だったので、食材に微塵切りにしたダンボールを入れてごまかした
- 見ため重視に走り、顧客もそれに一瞬騙されたため

こんな粗末な状態では美味しい料理が作れるどころか、閉店したのも頷けます。

レストランの例なので、大げさに感じるかもしれませんが、「食材」を企業での「データ」に置き換えてみましょう。

- 登録データが修正されず古いままだった、そもそもデータの管理や更新・破棄のルールがない
- データの入力や利用については各自の裁量や経験則となっており、野放し状態
- 作業者やシステムによって言葉の定義がバラバラで統一されていない
- とりあえず報告資料を作成するために、作業者が悪気はないが意図的にデータを修正する
- 見た目の報告に騙され、データ材料の確認や裏付けがされず、正しい経営判断がされていない

いかがでしょうか、意外と思い当たる節が出てくると思います。
こんな粗末な状態では正しいデータ利活用ができるどころか、普段の業務ですら怪しいです。


対策として、
**レストランで食材の重要性、保管方法、調理方法などのルールを定め、きちんと教育して守らせる活動や体制があれば、上記の例で閉店に追い込まれることは無かったかもしれません。**

データも同じです。

**企業や組織でデータの重要性、保管方法、使用方法などのルールを定め、きちんと教育や統制をする活動や体制があれば、データの利活用は経営の正確かつ迅速な判断や新たなビジネス創造へと繋がります。**

#つまりデータマネジメントとは

**データを価値ある資産と捉え、その資産が組織で正しく利活用されるように、ルールや体制を作って統制を実施すること。**


これって日本の製造業が扱う「モノ」という資産にも適用して考えられます。モノの生涯（材料調達から受入、保管、管理、加工、生産、破棄）に至るまで細かくルールがあり、そのための体制やルールを作り、教育や統制を実行されてきました。5S（整理、整頓、清掃、清潔、躾）はその代表例ですね。

高品質なモノづくりと同じく、高品質なデータ利活用のためにもデータのマネジメントが大切です。

#最後に
データマネジメントとは何か、ご理解頂けましたでしょうか？？

「とにかくDXを推進するためにデータを使っていこう、、、」
「データサイエンティストを雇ってにデータを集めて分析させよう、、、」
「とりあえずBIツールを入れて、データを素早く加工して、サクッと報告資料作っちゃおう、、、」
という単純な話にはならないはずです。


これからも定期的に、「データマネジメント」をテーマに、自分自身のアウトプットや情報発信を目的として投稿していきます。

まずは初投稿でした！

(記事内容は個人の見解であり、会社とは関係ありません)
【Railsチュートリアル】Herokuにpushする時、Failed to install gems via Bundler.のエラーが表示される

##事象
RailsチュートリアルでHerokuへpushすると、Failed to install gems via Bundler.というエラーが表示され、push出来ない。

![スクリーンショット 2019-09-14 15.26.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474060/19d5b8e2-84b5-9864-c2d6-0f5505c826b5.png)
![スクリーンショット 2019-09-14 15.23.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474060/d9b761b1-cf34-debd-1b2b-c02b8f02ca56.png)

##原因 
pushする前にbundle installを実行していなかったため。

##対応
bundle installを実行後、必要なGemがインストールされpush出来る。
![スクリーンショット 2019-09-14 15.57.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474060/bf793bf1-9d43-2b8d-e90f-7f2feaf652ee.png)

![スクリーンショット 2019-09-14 15.59.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474060/297595ad-7272-e51d-5d05-870bb2853a26.png)

**なぜbundle installが必要か**
bundle installはそのアプリに必要なGemをインストールするため。
bundle installは以下の役割をする。

- Gemfileに書かれたGemをインストールする。
- インストールしたGemに加え、依存関係にあるGemとGemごとのバージョンをGemfile.lockに記載する。

**なぜGemfile.lockが必要なのか**
複数人で開発する際に、インストールするGemとバージョンを揃えるため。

- Gemfile...そのアプリに必要なGemが記載されたファイル
- Gemfile.lock...Gemfileに記載されたGemに加え、依存関係にあるGemとバージョンが記載されたファイル

Gemは他のGemと結びついていることが多いため、依存関係にあるGemもインストールする必要がある。
bundle installを実行すると依存関係にあるGemを自動でインストールしてくれる。

インストールしたGemとそのバージョンをGemfile.lockに記載することで、他の開発者はbundle installするとGemfile.lockに記載された指定されたバージョンのGemをインストールできる。

##参考記事
- [Heroku へ初デプロイで引っかかった bundle install](https://qiita.com/JFCheval/items/91ba766b63878ff80d23)
- [bundle install と bundle updateの違いについて](https://qiita.com/lasershow/items/1a048d03ddaaba98171e)
AWS認定 SysOps アドミニストレーター アソシエイトの勉強

# 概要
2019年9月にAWS SOA を受験し、合格したのでその時学習した内容を簡単にまとめ

試験範囲はこちら
https://aws.amazon.com/jp/certification/certified-sysops-admin-associate/

試験時間：130分
問題数：65問


# 学習準備
###学習期間
3,4週間
ソリューションアーキテクトより出題範囲が広い気がします。

###学習教材
- [whizlabs](https://www.whizlabs.com)
- [koiwaclub](https://aws.koiwaclub.com)

どちらもWeb教材ですが、SysOpsの出題範囲はwhizlabsのほうが最近のサービスをカバーしていて、
テストに近い感じで65問の正答率や分野別の正答率などもあり、得意・不得意分野の把握がしやすいです。
またコストパフォーマンスも良い。
koiwaclubは通勤などスマホから学習するには良いかもしれません。

# 学習内容
## 重点サービスとキーワード
### VPC
- Nat gateway
- Internet gateway
- ルートテーブル
- VPC Endpoint
  - ゲートウェイエンドポイント
  - インターフェス(PrivateLink)エンドポイント
- VPN接続
- VPC Peering


### ELB

##### Clasic Load Balancer
- 基本的にALB、NLBに移行したほうがコスト、パフォーマンスともに良い。

##### Application Load Balancer
- パスベースのルーティング

##### Network Load Balancer
- 揮発性のワークロードを処理し、毎秒数百万のリクエストに対応できる能力。
- 静的IPアドレスのサポート。
- IPアドレスによるターゲットの登録をサポート。
- 1つのEC2インスタンス上での複数のアプリケーションへのルーティングリクエストのサポート。
複数のポートを使用して、各インスタンスまたはIPアドレスを同じターゲットグループに登録可能。

### S3
- MFA Delete
- ライフサイクル
- アクセスコントロール
  - リソースポリシー
  - ACL
  - IAMポリシー
- ストレージクラス
 - S3標準
 - S３標準 IA(低頻度アクセス)
 - S3 1ゾーン(低頻度アクセス)
 - Glacier 

### EBS
- HDD
  - Cold HDD …　アクセス頻度が低い大容量データ用
  - スループット最適化HDD　…　低コストで安定した高速スループット、ビッグデータ、データウェアハウス用
- SSD
  - 汎用SSD　…　ほとんどのワークロードに推奨。開発・テスト環境用
  - プロビジョンド IOPS SSD　…　大規模なデータベース

### AWS Organizations
- SCP(サービスコントロールポリシー)

### AWS Config
- リソースが作成。変更、削除されると設定変更が通知される。
- 監査利用のCloudtrailとの使いわけ

### CloudTrail
- apiアクティビティの記録
- S3にログの記録
- Cloudwatch logsに出力して異常の検出

### System Manager
- パッチマネージャー
- パラメータストア
- セッションマネージャー
- リソースグループ

### Autoscaling
- LaunchTemplates
- AutoScalingGroup
- AutoScalingPolicy
- LifecycleHook
- Notifications

### EC2
- プレイスメントグループ
  - クラスタープレイスメントグループ 
  - パーティションプレイスメントグループ
  - スプレッドプレイスメントグループ
- バースト可能パフォーマンスインスタンス

### Route53
- ルーティングポリシー
  - シンプルルーティングポリシー
  - フェイルオーバールーティングポリシー
  - 位置情報ルーティングポリシー
  - 地理的近接性ルーティングポリシー
  - レイテンシールーティングポリシー
  - 加重ルーティングポリシー


## 出題されるとしても1,2問のレベル

#### ECS
#### サービスディスカバリ
#### Service Catalog

#受験の感想
仕事で担当している業務範囲にもよりますが、SAAよりSOAのほうが難しいと感じました。
理由としてはConfig、SystemManager、Organiztionsなど、
監査やシステムコントロールの向けの比較的新しいサービスが出題され、利用する機会が殆どなく、
AWSアカウント数含めて大規模なユースケースなどで少し触れてみるというのがし辛い。
どちらかという要件やユースケースを整理するのが大事と思いました。
VPCまわりは自分なりに整理できたので良かったかなと。
AWSでサーバー構築①

# AWSでサーバー構築①

「サーバーってよく分からないけど、自分で立ち上げられたらかっこいいんじゃないか」
そんなモチベでAWSをさわり始めました。

今回はサーバーの知識があまりない人でも、とりあえず「サーバー構築ってこんな感じか〜」っていうのが体験できることを目的としています。

## 前提
**サーバーは、「ネットワーク」と呼ばれる空間の中で動く**

ということで、AWSで「サーバーそのもの」と「サーバーを動かすネットワーク」の２つを作っていきます。

<img width="439" alt="server_system.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491970/fde41da3-c13e-0ea1-c8ce-e1d6b5452d4f.png">

## 1. サーバーを動かす「ネットワーク」の構築
### まずはVPC(=ネットワーク)を作成

1. [ここ](https://aws.amazon.com/jp/console/)からアカウントを作ってログイン
 (※私は英語版のサイトを使ってます)
2. 検索窓から「VPC」と検索
3. 左のメニューバーに[Your VPCs] →　メイン画面の[VPCs] <details><summary>参考画像</summary><img width="1440" alt="VPC_location.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491970/bd8ae1ab-c424-2aa2-5531-2f6311459e08.png">
</details>
4. 画面左上の[Create VPC]から以下２つのを設定　<details><summary>参考画像</summary><img width="1440" alt="create_VPC.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491970/19536164-0236-54ab-9323-b94fcc12bb7b.png">
</details> 

　　・ Name Tag(ネームタグ)：　VPC(ネットワークのこと)の名前。「VPCサンプル」とか適当に。
　　・ IPv4 CIDR block：　VCPの場所の名前。いったん「10.0.0.0/16」と書いておけばOK 



ちなみに、↑の「10.0.0.0/16」とかいうのは「IPアドレス」と呼ばれるモノの住所(今回なら作成したVIPの住所)のことです。
例えば、PCが「『10.0.0.0/16』って場所にあるネットワークの中にいるあのサーバーに接続して」っていう命令を出すときに使われます。

### 「サブネット」に分ける
VPCは「ネットワークという空間」です。

ネットワークには「パブリック」なものと、「プライベート」なものがあります。
パブリックなネットワークには、外からのどんな人とでもデータのやりとりができます。
逆に、プライベートなネットワークはそれができません。

VPCを１軒の家だとすると、その中に「リビング」と「自分の部屋」を作っていくイメージです。

#### パブリックサブネットの作成
1. 左のメニューバーに「Subnets」というのがあるので、それをクリック
2. 設定するのは以下３つ
　　

　　・ Name Tag(ネームタグ)：　サブネットの名前。「パブリックサブネット」とか適当に。
　　・ VPC: さっき作成したVPCを選択
　　・ IPv4 CIDR block(CIDR ブロック)：　サブネットの場所の名前。いったん「10.0.1.0/24」と書いておけばOK

この後作成するプライベートな方のサブネットの場所は「10.0.２.0/24」にするつもりなので、
１階にリビング、2階に自室を作る感じです。

(随時更新 2019/09/14)


## 参考文献
『さわって学ぶクラウドインフラ　Amazon Web Service 基礎からのネットワーク＆サーバー構築』　
　著者：　大澤文孝(他)　
　出版社：　日経BP社
　出版日：　2019/02/26
plunkerでvue その12

#概要

plunkerでvueやってみた。
cart実験してみた。

#成果物

vue使った

https://embed.plnkr.co/BTCGOOTcMPL8w1q4o46C/
https://embed.plnkr.co/LUK24pIk2wairkHFfF7U/
https://embed.plnkr.co/Ojzbu33Ql83LNRbnv3tU/

vueじゃない

https://embed.plnkr.co/ilXZ4xOLJbyvUYOcAf74/
https://embed.plnkr.co/5ddowpYoP9CgbBZh9Izt/
https://embed.plnkr.co/lmYBOLZUyioFViSzyfJ9/

以上。