OmniAICreator/Qiita-1.07M huggingface dataset:
初めてのwebpack - 最小構成編

## webpackとは
モジュールバンドラというツールです。
node.jsで動作するため、事前にインストールを済ませておいてください。

### モジュールバンドラとは何か
bundleという単語が「束ねる」という意味という点からも想像できるかと思いますが、JavaScriptを一つにまとめあげるツールです。

#### どんなことができるか
普段は公式サイトからダウンロードして、HTMLファイルで別途読み込んでいたjQueryなどのライブラリをJS上で読み込みつつ、最終的には一つのスクリプトファイルにまとめることができます。
また、CSSではよくある「このブラウザに対応させるためには、プレフィックスを付けないと・・・」的な変換も自動で実施できるようになります。

## webpackのインストール
JavaScriptのパッケージマネージャであるnpmにてインストールします。
まずは初期設定ですね。

```sh
npm init 
```

そして、webpackのインストールです。

```sh
npm i -D webpack
```

インストールが完了したあとは、初期設定を行います。

```sh

npx webpack
```

すると以下のようなメッセージ出力されます。

```sh
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): 
```

webpackの動作に必要な`webpack-cli`をインストールするとのこと。
`yes`を入力してインストールします。

インストール完了後、`ERROR in Entry module not found`というようなエラーが表示されるかと思いますが、現時点では気にしなくて大丈夫です。（後ほど設定します。）

## webpackの設定
webpackの設定ファイルは、`webpack.config.js`にて行います。
まずはこちらを新規作成します。

```sh

touch webpack.config.js
```
（※私の場合ですが、コマンドで作成しています。）

そして、設定には、`module.exportsメソッド`を使用します。

```js:webpack.config.js

module.exports = {
}
```

まずは最小構成として、対象となるJSファイルの設定し、その他は初期設定で実施してみます。
実施前に、前提となるディレクトリ構成を記載します。
（最低限これがあれば大丈夫という程度なので、環境によりその他のディレクトリやファイルが存在していても問題ありません。）

```sh
.
├── node_modules
├── package-lock.json
└── src
    └── js
        └── index.js
```

上記のディレクトリ構成を元に、まずは対象となるファイルのパスを記載します。
`entryプロパティ`にパスを指定します。

```js:webpack.config.js

module.exports = {
  entry: './src/js/index.js'
}
```

これで試しに実行してみます。

```sh
npx webpack
```

すると`distフォルダ`が生成され、そこに出力結果としてのファイルが生成されています。
(※distだけ抜粋します。）

```sh
.
└── dist
    └── main.js
```

このように`distフォルダ`に、`main.js`というファイル名で生成されました。

最小構成での実施なので、webpackの利点がほぼ伝わらないかと思いますが、この後行うBabelと組み合わせることで、その利便性はグッと増します。

## 実行方法についての補足
実行時、`npx webpack`のような実行方法をとっていましたが、そのほかに`モードオプション`を指定する必要があります。
また、そのモードも二種類、`productionモード`と`developmentモード`が存在します。

### developmentモードでの実行

```sh
npx webpack --mode development
```

となります。
その際、`-w`というオプションを追加するとgulpでもあるようなwatch機能が使用できます。
ファイルの変更を監視して、自動で実行してくれる便利なやつですね。

### productionモードでの実行

```sh
npx webpack --mode production
```

となります。


### 面倒だからpackage.jsonに追記
いちいちこの長いのを書いて実行するのは面倒なので、短縮させるため、package.jsonに追記します。

```js:package.json
/* 省略 */
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prod": "webpack --mode production",
    "dev": "webpack --mode development -w"
  },
/* 省略 */

```

このように、package.jsonのscriptsに追記したコマンドは、`npm run XXX`で実行できます。
つまり、productionモードにてwebpackを実行したい場合は、`npm run prod`とするだけでよくなるのです。


次は、Babelを使用してみようと思います。


## 追記 : 出力先の指定
出力先を指定のディレクトリにしたい、ファイル名にしたい場合などは、下記のように`output`を追加し、`output.filename`にファイル名を`output.path`にパスを記載すると指定先に出力できます。

```js:webpack.config.js
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: '指定のファイル名',
    path: '指定先の絶対パス'
  }
}
```
スペースの連続入力を弾く入力フォームの作り方

# 作りたいもの
以下のようなエラーチェックを行う入力フォーム

OKな例
・山田太郎
・山田 太郎（間に半角スペース1個）
・山田　太郎（間に全角スペース1個）
・山田　　太郎（間に全角スペース2個）
・山田　アンデルセン　太郎（間に全角スペース1個ずつ）

エラーを吐きたい例
・「 」←半角スペース1個のみ
・「　」←全角スペース1個のみ
・「  」←半角スペース2個連続
・「　　」←全角スペース2個連続

名前の間に入るスペースは通すけど、スペースだけの入力は許容しない、といった感じ。

# 使ったもの
Javascript, 正規表現

# 実装
```javascript
let str = '山田　太郎';
let pattern = /^\u3000*$/g;// 1文字以上の全角スペース

if(str.match(pattern) != null){
  // OK
} else {
  // NG：スペースのみの入力
}
```

| 正規表現      |       意味 |
|:----------------:|:-----------------:|
| /^\u3000*$/g             |              1文字以上の全角スペース |
| *           |            直前の文字の0文字以上の繰返し |
| ^           |            文字列の先頭 |
| $             |              文字列の末尾 |
| /^正規表現$/               |                 任意の正規表現に完全一致する文字列|
| /正規表現/g           |            全ての文字についてマッチするかどうかを検査 |
半角スペースの場合は`/^\x20+$/g`で同じことができる。

`\u3000`ではなく「　」で全角スペースを直書きしても良いが、Lintエラーに引っかかることがあるのでこっちのほうがよい。

# 参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

https://qiita.com/masayuki14/items/51884596fcb442006cfb
ブラウザの戻るボタンを依存ライブラリ無しで戻れなくする方法

社内向けアプリケーションなんかを作っている時に戻るボタンで画面遷移すると予期しない動きをするので、戻るボタンを押しても戻れないようにしたい場合があります。

そんな時はhtmlの先頭に以下のコードを追加することで戻るボタンを無効化することができます。
このコードはモダンブラウザであれば依存ライブラリ（JQueryなど）なしでも動きます。

このコードでは実際に戻るボタンを無効化するわけではなく、ページを表示するたびに遷移先がnullの履歴を追加する処理を入れることで、戻るボタンの無効化を実現しています。

onpopstateは戻るボタンで画面遷移した時に発火するイベントで、pushStateはブラウザに遷移先を追加するメソッドとなります。

イベントハンドラの外にあるpushStateは、最初に画面をロードした時に実行され、イベントハンドラの中にあるpushStateは戻るボタンを押した時に実行されるため、どちらのコードも必要です。

#### 戻るボタンが押されたらアラートを出力する
```javascript
//画面初期表示時に遷移先nullの履歴を追加する
history.pushState(null, null, null);

//ブラウザの戻る／すすむボタンで発火するイベント
window.onpopstate = function (event) {
        //戻るボタンを押して戻った時に再度nullの履歴を追加する。
        //※この処理はalertの前に書いておく必要あり。alertの後ろだと戻るボタンを連打したときに戻れてしまう。
	history.pushState(null, null, null);
	alert("ブラウザの戻るボタンは禁止されています。");
};
```

サンプルコードはこちらで実際に動かしてみることができます。
https://stackblitz.com/edit/js-n5zty9?embed=1&file=index.js

######注意点
戻るボタンがクリックされた際にalertやconfirmで処理を止めたりする場合は、必ずalertの前にpushStateを記述する必要があります。
alertの次においてしまうと、戻るボタン連打した時に前の画面に戻れてしまう様になるので要注意です。


#### 戻るボタンが押されたら確認ダイアログを表示する。
こんな風に確認画面を出して、OKが押されたらトップページに遷移することもできます。

```javascript
history.pushState(null, null, null);

//ブラウザの戻る／すすむボタンで発火するイベント
window.onpopstate = function (event) {
         //連続で戻るボタンがクリックされたときにも戻れない様に、履歴にnullを追加する。 
         history.pushState(null, null, null)
	 var r = confirm("このページでのブラウザの戻るボタンは禁止されています。トップページに移動しますか？");
	 if (r == true) {
	 	//コンテキストルートに戻る
	 	var context = window.location.pathname.substring(0, window.location.pathname.indexOf("/", 2));
	 	window.location.replace(context);
	 } else {
	 		
	 }
};
```

このコードは、PCのfirefoxとchromeでテストしました。他のブラウザや環境での動作は不明です。
anacronによるlogrotate等を1日の最後(23:59)に最小限の設定変更で実行させる

#anacronによるlogrotate等を1日の最後(23:59)に最小限の設定変更で実行させる

##概要
anacronは一般的には下記のような使われ方をする。

- ○時台のどこかで実行
- 実行できなかった場合は○時台まで1時間に一度リトライ

しかしlogrotateなどをanacron実行する場合、決まった時間かつ、もっと言えば一日の最後に実行してくれるのが望ましい。
一例として毎日23:59に実行する設定方法を紹介。

```bash:/etc/anacrontab
# /etc/anacrontab: configuration file for anacron

# See anacron(8) and anacrontab(5) for details.

SHELL=/bin/sh
PATH=/sbin:/bin:/usr/sbin:/usr/bin
MAILTO=root
# the maximal random delay added to the base delay of the jobs
#RANDOM_DELAY=45
RANDOM_DELAY=0
# the jobs will be started during the following hours only
#START_HOURS_RANGE=3-22
START_HOURS_RANGE=23-24

#period in days   delay in minutes   job-identifier   command
#1      5       cron.daily              nice run-parts /etc/cron.daily
1       58      cron.daily              nice run-parts /etc/cron.daily
7       25      cron.weekly             nice run-parts /etc/cron.weekly
@monthly 45     cron.monthly            nice run-parts /etc/cron.monthly
```

```bash:/etc/cron.d/0hourly
# Run the hourly jobs
SHELL=/bin/bash
PATH=/sbin:/bin:/usr/sbin:/usr/bin
MAILTO=root
01 * * * * root run-parts /etc/cron.hourly
```
##設定値の解説
####RANDOM_DELAY
最大で設定値の分数が実行をランダムで遅延させるが、今回は同じ時間に実行させたいため、0を設定。

####START_HOURS_RANGE
23時に実行する。（24を設定する理由は後述。）

####delay in minutes
※/etc/cron.d/0hourlyにて、毎時のcron起動がx時1分に設定されていると仮定する。
RANDOM_DELAYに加え、delay in minutesで設定した分数が、実行を固定で遅延させる。
上述のとおり、x時1分にanacronのjobが起動する設定となっているため、今回は+58して59分の実行としたい。
したがって、「period in days」が1に設定された日時実行設定のdelay in minutesを58に設定する。

##補足
START_HOURS_RANGEは単一値の指定ができず、かつ日付を跨ぐ場合でも必ずstart < endの関係である必要がある。
以下の値指定では実行がされないので注意

```bash:
START_HOURS_RANGE=23-0
START_HOURS_RANGE=23-23
START_HOURS_RANGE=23
```
Swift の Equatable プロトコルを基礎から

# この記事は何？
[前回](https://qiita.com/chino_tweet/items/486744701cf64eb6fc83)は `CustomStringConvertible` プロトコルについて調べました。
今回は `Equatable` プロトコルです。
これは、オブジェクトが比較できることを保証するようです。

> Swiftを基礎から学ぶには
自著、工学社より発売中の「[まるごと分かるSwiftプログラミング](https://amzn.asia/d/7YPWJwl)」をお勧めします。変数、関数、フロー制御構文、データ構造はもちろん、構造体からクロージャ、エクステンション、プロトコル、クロージャまでを基礎からわかりやすく解説しています。

## 実行環境
Xcode10.2.1
Swift5.x

# ハンズオン
Playground でコードを実行して確認しました。

## こんなカスタム型があったとして
フルーツを表現する構造体 `Fruit` です。
`name` と `emoji` プロパティがあります。

```Swift:フルーツを表現する構造体
struct Fruit {
    var name:  String
    var emoji: String
}

let apple  = Fruit(name: "Apple",  emoji: "🍎")
let banana = Fruit(name: "Banana", emoji: "🍌")
```

`apple` オブジェクトと `Banana` オブジェクトは違うフルーツです。
同じかどうかを比べてみましょう。

```Swift:リンゴとバナナを比較する
apple == banana    // 比較した結果は...
```

`false` が返ってきそうなものですが...
<img width="738" alt="スクリーンショット 2019-05-27 22.28.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70476/62735dda-f1b6-1333-a41c-f5acb3fa6c79.png">
エラーメッセージが表示されました。
_Binary operator '==' cannot be applied to two 'Fruit' operands_ だそうです。
「２つの`Fruit` 型の項には2項演算子 `==` が適用できません」的なことを言っています。

## プロトコルに準拠する
オブジェクト同士が __同じかどうか__ を比較できることを保証するには、`Equatable` プロトコルに準拠させます。

```Swift:比較可能になったFruit型
struct Fruit: Equatable {
    var name:  String
    var emoji: String
}
```

すると、エラーが消えます。

```Swift:Fruit型オブジェクトの比較
apple == banana    // false
```

予想通りの結果が得られました。
どうやら、型を `Equatable` プロトコルに準拠させると __すべてのメンバープロパティが同じかどうか__ を自動的に比較してくれているようです。

### 比較の条件を制御する
こんなフルーツがあったとします。

```Swift:2種のオレンジ
let vOrange = Fruit(name: "Valencia Orange",  emoji: "🍊")
let mOrange = Fruit(name: "Mandarine Orange", emoji: "🍊")

vOrange == mOrange    // false
```

同じかどうか比較すると、`false` になります。
でも、これらのオレンジは品種こそ違いますが、__同じフルーツとして扱いたい__ 気がします。

- `name` プロパティは無視して...
- `emoji` プロパティだけを比較

することができれば良さそうです。

## == 演算子を実装する
`==` 演算子は、比較するときに使いますね。
静的メソッドとして実装することで、`==` 演算子の挙動を型独自にカスタムできます。
`emoji` プロパティ同士だけを比較した結果を返すようにしましょう。

```Swift:
struct Fruit: Equatable {
    var name: String
    var emoji: String
    
    // 自身と同じ型を2つ受け取る静的メソッド
    static func == (lhs: Fruit, rhs: Fruit) -> Bool{
        return lhs.emoji == rhs.emoji
    }
}
```

ちなみに、`==` メソッドの引数名 `lhs` と `rhs` はそれぞれ _left-hand side_ と _right-hand side_ の略称です。
引数名はなんでも構わないようですが、標準ライブラリなどの様式に倣いました。

もう一度、２つのオレンジを比較してみると...

```Swift:オレンジの比較PART2
vOrange == mOrange    // true
```

結果が変化しました。
品種が違えど、オレンジ同士なので `true` を返しています。

# POP
数年前のWWDC（World Wide Developers Conference） で、_Protocol-oriented Programming_ というコンセプトが提唱されたことがありました。
どうやら、Swiftプログラミングではプロトコルを理解しておくことが重要なようです。
あと、__ジェネリクス__ですか。
少しずつ、基礎から勉強していきたいと思います。
Railsで基本情報技術者試験の過去問題サイトを作る（４：親子関係、参照編）

# はじめに
ゆる〜く学ぶ。みんなのWeb勉強コミュニティー。　「にゅ〜ぶる会」を運用中です。
https://newburu.github.io/

そこで、何か教育用のコンテンツが欲しいなぁ〜と思い立ち、今回の企画をスタートしました！

Railsで基本情報技術者試験の過去問題サイトを作ります！

# 最終目標
- 問題・回答の登録は、Scaffoldで簡易でOK
- APIを用意して、ランダムに問題を抽出する機能を追加する
- TwitterBOT、LINEBOT、SlackBOTが出来たら良いな

# 履歴
１：構築編
　　https://qiita.com/newburu/items/ed59f47ac645b19620f6
２：日本語化(i18n)編
　　https://qiita.com/newburu/items/4f12fdb61bf6cd601545
３：親子関係、登録編
　　https://qiita.com/newburu/items/f2a20289be5ec1fc1b77
４：親子関係、参照編
　　本ページ
５：API編
　　https://qiita.com/newburu/items/89f9f847a2648bdd006c
６：SlackBOT編
　　https://qiita.com/newburu/items/aeeb9acb453da786bd59
７：Herokuデプロイ〜自動化編
　　https://qiita.com/newburu/items/0a8bb02e1e8c8fe737c7

# 今回やる事
- 登録した親子関係の情報を参照系の画面に表示します

※レイアウトをやろうと思いましたが、こちらの方が優先なので、予定を変更させて頂きました。

# 登録した親子関係の情報を参照系の画面に表示します

## 1. まずは、現状を確認しましょう。
登録画面
<img width="251" alt="登録画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118481/af395aaa-d015-8c69-393d-191155fe57eb.png">

問題一覧画面
<img width="407" alt="問題一覧画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118481/38c5d847-464e-b852-981f-4e6d4d115002.png">

問題参照画面
<img width="146" alt="問題参照画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118481/84272563-2bf9-4306-fccd-d49d9df69e22.png">

## 2. 問題参照画面のViewを直します。
今回やる事は、ここ。
<img width="146" alt="問題参照画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118481/84272563-2bf9-4306-fccd-d49d9df69e22.png">

問題参照画面に、回答一覧を追加するよ！

### 元ソース
```slim:app/views/questions/show.html.slim
p#notice = notice

p
  strong = "#{Question.human_attribute_name(:category1)}:"
  = @question.category1
p
  strong = "#{Question.human_attribute_name(:category2)}:"
  = @question.category2
p
  strong = "#{Question.human_attribute_name(:category3)}:"
  = @question.category3
p
  strong = "#{Question.human_attribute_name(:msg)}:"
  = @question.msg

// ここに回答一覧を足していきます。

=> link_to t('btn.edit'), edit_question_path(@question)
'|
=< link_to t('btn.back'), questions_path
```

### 修正後ソース
```slim:app/views/questions/show.html.slim
p#notice = notice

p
  strong = "#{Question.human_attribute_name(:category1)}:"
  = @question.category1
p
  strong = "#{Question.human_attribute_name(:category2)}:"
  = @question.category2
p
  strong = "#{Question.human_attribute_name(:category3)}:"
  = @question.category3
p
  strong = "#{Question.human_attribute_name(:msg)}:"
  = @question.msg

// ここに回答一覧を足します。
p
  strong = "#{Question.human_attribute_name(:answers)}:"
  // 問題の子供として、has_manyしているanswersでループ(each)します。そして、その値(回答モデル)はanswerに渡します。
  - @question.answers.each do |answer|
    p
      strong = "#{Answer.human_attribute_name(:msg)}:"
      = answer.msg
    p
      strong = "#{Answer.human_attribute_name(:correct)}:"
      = answer.correct

=> link_to t('btn.edit'), edit_question_path(@question)
'|
=< link_to t('btn.back'), questions_path

```

### 完成した画面
追加されましたね！
<img width="178" alt="問題参照画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118481/6d72f7e5-f60d-dcbb-2853-1fee89961fe1.png">

# 今回はここまで
ありがとうございました！
画面周りは、まだまだ綺麗にする要素はいっぱいあるけど、
次回は、API化していこうかな。
Mac版Chromeの検索サジェストを削除する

## はじめに
普段、良く使うサイトはアドレスバーにURLを入力して検索サジェストからページに移動していますが、よく使うサイトと似た文字列を検索したりすると検索履歴に残り、サジェストに出てきてしまいます。サジェスト履歴を削除し、自分のアクセスしたいサイトがトップに来るように調整したいと思います。


## 内容
以下のショートカットで削除する事ができます。

`shft + fn + delete`
WSLとVS Code+Rust+RLSの設定

実践Rustを読んでいてもWindows10(RustをインストールしているのはWSL Ubuntuのみ)の場合にうまくRLSがインストールできなかったので，調べたら次のようにやったらとりあえず動きました．

- WSLの方でコンポーネントをインストール

```bash
$ rustup component add rls rust-analysis rust-src
```

- VS Codeのsetting.jsonに次を加筆

```json
{
    "rust-client.useWSL": true,
    "rust-client.revealOutputChannelOn": "info",
    "rust-client.rustupPath": "~/.cargo/bin/rustup"
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7181/9f2f6012-0288-397e-5d31-b925ab41ebce.png)


この状態でRLSが可動すれば変数の型やドキュメントが読めますが，VS CodeのCtrl+Shift+bから**cargo build**や**cargo check**を動かすとwslがうまくコマンドを実行できず**command not found**が返ってきたので，タスクを次のように修正しました．これはcargo buildのケースです．タスクを修正するには，コマンドパレットからcargo buildを出したときの右側にある歯車を選択すると編集できました（他の方法があるかも）．

JSONに書いてあるとおり，wsl.exeを通じてcargoのコマンドを実行するようにしました．

```json
{
    "tasks": [
        {
            "type": "shell",
            "label": "cargo build",
            "command": "wsl.exe",
            "args": [
                "~/.cargo/bin/cargo",
                "build"
            ],
            "problemMatcher": [
                "$rustc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}
```

----

# 追記(2019/6/2)

- VS Codeで編集していると**出力**のところにエラーがしばらく出ていた
  - 参考: https://github.com/rust-lang/rls/issues/1397
- とりあえず**rustup component add rustfmt**を実行したらエラーが出なくなった気がしたけど，関係はなかった
- 調査中…
Firebase Cloud Functions の環境変数をローカルエミュレート時にも使えるようにする

API KeyなどをFirebase Cloud Functionsの環境変数に設定したい場合は、以下のようなコマンドで行うことができます。

# 環境変数の設定とアクセス方法
```bash
$ firebase functions:config:set someservice.key="THE API KEY" someservice.id="THE CLIENT ID"
```

[Firebase公式ドキュメント - 環境の構成](https://firebase.google.com/docs/functions/config-env?hl=ja)

このとき、注意点としては、キーの名前には大文字が使えないのと、２つ以上のキーをドットでつないでやる必要があります。
例えば、`foo.bar`のようにキーの名前をする必要があります。

設定したあとに、

```bash
$ firebase deploy --only functions
```
でデプロイしてやれば、晴れてCloud Functionsのコード上から環境変数にアクセスすることができるようになります。

```Javascript
const id = functions.config().someservice.id  // => "THE CLIENT ID"
```

# ローカルエミュレートでアクセスしようとするとエラーになる
一方、開発中はいちいちデプロイせずに、

```bash
$ firebase serve --only functions
```

として、ローカルエミュレートを起動して、開発を行っている人は多いかと思います。
この状態で、先程設定した環境変数にアクセスしようとすると、

```bash
Cannot read property 'id' of undefined`
```

となってエラーとなってしまいます。

# ローカルエミュレート時には環境変数を別途吐き出す必要がある
解決方法としては、`functions`ディレクトリで、

```bash
$ firebase functions:config:get > .runtimeconfig.json
```

として、`.runtimeconfig.json`ファイルを用意してやる必要があります。
こうしてやるとローカルでの開発時にも問題なく環境変数を取り込んでアクセスすることができるようになります。
もちろん、このJSONファイルの中身は機密情報が入っていることもあるかと思いますから、間違ってGitHubで公開してしまわないようにするケアが必要になります。
注意しましょう。

（参考）
[Firebase公式ドキュメント - ローカルでの関数の実行](https://firebase.google.com/docs/functions/local-emulator#serve_http_functions_from_the_command_line)
ブランチによってGCBのステップ分けてみた

## やりたいこと
・masterブランチ：lintチェック&GCBのデプロイ
・それ以外のブランチ：lintチェックまでで、デプロイはしない
という風に分岐させたい。

CircleCIだと`config.yml`の中でif-else使って処理を分岐させることができるみたいなのですが、GCBではそれができません。

## 解決方法
GCBのビルドトリガーの設定では、
・ブランチ名を正規表現で指定する
・ビルドに使用する設定ファイルをcloudbuild.yaml以外に指定する
ことができます。

というわけで、以下のようにmasterブランチへのpushの時には`cloudbuild_deploy.yaml`を指定しておき、
<img width="903" alt="スクリーンショット_2019-05-27_22_41_44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295335/799645f2-7275-e359-d9ed-c2689303357e.png">

それ以外のブランチへのpushの時には`cloudbuild.yaml`を指定するトリガーを別で作成しておけば、ブランチごとにビルドステップを分けることができます。
おぼえがきdrill12

```java:ZodiacServlet4.java
/*【drill12あとやること】
 * ①html。サーブレット共にファイル、パッケージを作成
 * ②year5.html完成させる drill10のHTMLから持ってくる
 * ③xmlにサーブレットのリンクを追記
 *
 */

package drill12;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ZodiacServlet4 extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO 自動生成されたメソッド・スタブ

		String birthYear= req.getParameter("birthYear");
		String msg=null;

		if(birthYear.isEmpty()){
			msg="エラーが発生しました";
			output(resp,msg);
			return;
		}


	}

	public void output(HttpServletResponse resp, String outMsg)throws ServletException, IOException{

		//コンテンツタイプ（日本語表示）の指定
		resp.setContentType("text/html; charset=UTF-8");

		// コメント入力画面出力
		PrintWriter out = resp.getWriter();
		out.println("<html>");
		out.println("<head><title>RedirectServlet</title></head>");
		out.println("<body>");
		out.println(outMsg+"<br>");
		out.println("<a href='/web-drill/htmldrill12/year5.html'>入力画面に戻る</a><br>");//サーブレット教科書p.97.l.37
		out.println("</body>");
		out.println("</html>");
		out.close();
	}

}

```

```html:year5.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>postcode</title>
</head>
<body>
<form method="post" action="/web-drill/ZodiacServlet4">


//②year5.html完成させる drill10のHTMLから持ってくる

</form>
</body>
</html>
```
プログラミング初心者必見！APIとは何？

「APIを活用したら、開発効率が上がる」
このようなことを聞いたことがありませんか。
しかし、APIってそもそも何なのでしょうか。
APIを知らない方は多いのではないでしょうか。
そこで、今回がAPIとは、APIが作られる理由を紹介します。
ただし、プログラミング初心者であるため、内容に誤りがあるかもしれません。
誤りがあれば、どんどん指摘してください。

##APIとは？
ソフトウェアの一部分をオープンにして、他のソフトウェアと機能を共有できるようにしたものです。
これは、web上に公開することで、外部から誰でも利用可能になります。
また、このとき、機能の使い方や使うに当たっての注意事項をまとめて公開します。

##APIが作られる理由
* サービス開発を効率化できるから
すでにAPIに作りたい機能が公開されていれば、その機能を持ったプログラムを作る必要がありません。
そのため、開発時間を大幅にカットすることができます。
また、時間だけでなく、開発コストも大幅に削減できる点も魅力ですね。

* 新サービスを生まれやすくするため
APIとして機能を公開することで、同じ機能をもつサービスの開発がしやすくなります。
また、今までその機能を実装することに掛かっていた時間も他の機能の開発の時間に充てれるようになります。
その結果として、多くの新サービスが生まれ、便利な世の中になっていくと考えられています。
RaspberryPiでディスプレイを自動的にスリープにする

RaspberryPi(というかRaspbian)は使用していない時にデフォルトではディスプレイの画面を黒くするだけでディスプレイをスリープにしません。
別件でRaspberryPiのドキュメントを見ていたところ偶然自動的にディスプレイをスリープにする方法を見つけたので紹介します。
（この機能一体いつからあった？）

# TL; DR
(共通)
/boot/config.txtに下記を追記


```:/boot/config.txt
hdmi_blanking=1
```

(GUI版のみ)

```sh
sudo apt install xscreensaver
#インストール後左上のメニューからスクリーンセーバーの設定を行う。
```

(CUI版のみ)
/boot/cmdline.txtの文の最後に`consoleblank=ディスプレイを消灯するまでの秒数`を追加

```:/boot/cmdline.txt(例)
dwc_otg.lpm_enable=0 console=serial0,115200 console=tty1 root=/dev/mmcblk0p7 rootfstype=ext4 elevator=deadline fsck.repair=yes rootwait consoleblank=300
dwc_otg.lpm_enable=0 console=serial0,115200 console=tty1 root=PARTUUID=34e8ad56-02 rootfstype=ext4 elevator=deadline fsck.repair=yes rootwait consoleblank=30
```

# hdmi_blankingを有効にする
RaspberyPiの公式の資料に以下のようなことが書いてあります。
> hdmi_blanking

> The hdmi_blanking command allows you to choose whether the HDMI output should be switched off when DPMS is triggered. This is to mimic the behaviour of other computers. After a specific amount of time, the display will become blank and go into low-power/standby mode due to receiving no signal.

> NOTE: This feature may cause issues when using applications which don't use the framebuffer, such as omxplayer.

簡単に行ってしまえばこのオプションを設定するとディスプレイを消灯することができるということです。

ただし、注意書きにあるように、一部のアプリケーションでは問題が発生することがあります。

このオプションを1にして/boot/config.txtに追記し、設定すると有効化されます。

```:/boot/config.txt
hdmi_blanking=1
```

# (GUI版のみ)スクリーンセーバーを有効化する
上記の設定を行っただけではコンピュータを使用していないかどうかのチェックをしてくれません。そこでスクリーンセーバーの仕組みを利用して使用していない時にディスプレイを消灯する命令を送るように設定します。
スクリーンセーバーの機能を提供する`xscreensaver `をインストールします。

```sh
sudo apt install xscreensaver
```

その後アプリケーションのメニューにある設定の中のスクリーンセーバーの設定を開き、ディスプレイがスリープになるまでの時間を設定します。

# (CUI版のみ)
CUI版ではcodline.txtの設定を変更します。
１行目にズラーと書かれているコマンドの最後に`consoleblank=300`を追記します。300の部分を画面が消灯するまでの秒数に変更してください。
変更すると下記のようになると思います。

```:/boot/cmdline.txt(例)
dwc_otg.lpm_enable=0 console=serial0,115200 console=tty1 root=/dev/mmcblk0p7 rootfstype=ext4 elevator=deadline fsck.repair=yes rootwait consoleblank=300
```

# あとがき
数年前にも同じように悩んだ結果無理やり画面を消灯するという方法で乗り切っていました。この方法ならWindowsやMacと同じようにできますね。
もし間違いなどがあればご指摘いただければ幸いです。
(余裕があればGUI版の方にスクショを貼るかもしれません)

# Reference
https://www.raspberrypi.org/documentation/configuration/config-txt/video.md

http://ventures.tpedersen.net/projects/puttingraspberrypimonitortosleepdpms
サーバーにユーザーを登録する方法

##サーバーにユーザーを登録
まずはsshでサーバーに入ります(省略)。

```terminal:ターミナル
[ユーザー名@pub2 ~]$  sudo useradd -G ocw,wheel [新しいユーザー名]
あなたはシステム管理者から通常の講習を受けたはずです。
これは通常、以下の3点に要約されます:

    #1) 他人のプライバシーを尊重すること。
    #2) タイプする前に考えること。
    #3) 大いなる力には大いなる責任が伴うこと
[sudo] ユーザー名 のパスワード:
[ユーザー名@pub2 ~]$ sudo passwd [新しいユーザー名]
ユーザー [新しいユーザー名] のパスワードを変更。
新しいパスワード:
passwd: すべての認証トークンが正しく更新できました。
```
次に`/home/[新しいユーザー名]/.ssh/authorized_keys`にsshの公開鍵をおきます

```terminal:ターミナル
[ユーザー名@pub2 ~]$ sudo mkdir /home/[新しいユーザー名]/.ssh
[ユーザー名@pub2 ~]$ sudo cat > /home/[新しいユーザー名]/.ssh/authorized_keys
-bash: /home/[新しいユーザー名]/.ssh/authorized_keys: 許可がありません
[ユーザー名@pub2 ~]$ sudo su  #権限がないのでスーパーユーザーへ
[root@pub2 ユーザー名]#  sudo cat > /home/[新しいユーザー名]/.ssh/authorized_keys
  #catでそのまま書き込みます.
以下、公開鍵。
ssh-rsa ............................................
[root@pub2 ユーザー名]# cd /home/[新しいユーザー名]/
[root@pub2 [新しいユーザー名]]# ls -la
合計 20
drwx------.  3 [新しいユーザー名] [新しいユーザー名]   83  5月 27 18:45 .
drwxr-xr-x. 15 root      root      4096  5月 27 18:39 ..
-rw-r--r--.  1 [新しいユーザー名] [新しいユーザー名]   18 10月 31  2018 .bash_logout
-rw-r--r--.  1 [新しいユーザー名] [新しいユーザー名]  193 10月 31  2018 .bash_profile
-rw-r--r--.  1 [新しいユーザー名] [新しいユーザー名]  231 10月 31  2018 .bashrc
-rw-r--r--.  1 [新しいユーザー名] [新しいユーザー名]  334 10月 30  2018 .emacs
drwxr-xr-x.  2 root      root        28  5月 27 18:48 .ssh

[root@pub2 [新しいユーザー名]]# sudo chown [新しいユーザー名]. -R /home/[新しいユーザー名]/.ssh  

[root@pub2 [新しいユーザー名]]# ls -la
合計 20
drwx------.  3 [新しいユーザー名] [新しいユーザー名]   83  5月 27 18:45 .
drwxr-xr-x. 15 root      root      4096  5月 27 18:39 ..
-rw-r--r--.  1 [新しいユーザー名] [新しいユーザー名]   18 10月 31  2018 .bash_logout
-rw-r--r--.  1 [新しいユーザー名] [新しいユーザー名]  193 10月 31  2018 .bash_profile
-rw-r--r--.  1 [新しいユーザー名] [新しいユーザー名]  231 10月 31  2018 .bashrc
-rw-r--r--.  1 [新しいユーザー名] [新しいユーザー名]  334 10月 30  2018 .emacs
drwxr-xr-x.  2 [新しいユーザー名]  [新しいユーザー名]  28  5月 27 18:48 .ssh 
#権限が変わってますね。 
```

##登録したユーザーに権限(諸々)をあげる
```terminal:ターミナル
[root@pub2 [新しいユーザー名]]#  sudo chmod 0700 /home/[新しいユーザー名]/.ssh/
[root@pub2 [新しいユーザー名]]#  sudo chmod 0600 /home/[新しいユーザー名]/.ssh/authorized_keys 
[root@pub2 [新しいユーザー名]]# ls -la .ssh
合計 4
drwx------. 2 [新しいユーザー名] [新しいユーザー名]  28  5月 27 18:48 .
drwx------. 3 [新しいユーザー名] [新しいユーザー名]  83  5月 27 18:45 ..
-rw-------. 1 [新しいユーザー名] [新しいユーザー名] 729  5月 27 18:48 authorized_keys
```
一番左にある、rはread,wはwriteとそれぞれのできることで、どのユーザーがなんの権利があるかをみることができます。
QtCreator(4.8.0)でROSパッケージをCMakeする

# シェルから起動する方法
ワークスペースのセットアップスクリプト(setup.sh)をシェルで実行し、そのシェルからQtCreatorを起動することでmakeできる。
bashrcなどでsetup.shを実行するようにしておき、コマンドでQtCreatorを起動すると簡単。

# デスクトップアイコンから起動する方法
下記リンクを参照のこと。

# 参照
https://answers.ros.org/question/187618/make-generated-messages-visible-for-an-ide/
http://wiki.ros.org/IDEs#QtCreator
Railsのindexページで、一つのフォームでcreateもupdateもする

## 

はじめまして。
私はRuby on Railsを使ったシステム開発に携わらせていただいています。


今回、私は先輩から課題のようなものを出されました。
その課題というのは、

- id、group_no,group_nameというカラムを持ったtestsテーブルを作成しろ（group_noにはインデックス付与し、一意になるように。）
- TestモデルのCRUD操作を実装しろ
- ただし、CRUD操作はindexページだけで行えるようにしろ。また、新規投稿のためのフォームと、情報更新のためのフォームは一つとする。

というものでした。
要はrailsの標準機能で作成されるうな、index,new,editなどのページに遷移することなく、indexページで情報の一覧表示、作成、更新、削除を行えるようにしろということでした。

１番目のテーブル周りの課題はグーグルで調べながら実装したので、何とか無事に終えることができました。

しかし２番目と３番目の課題、特に一つのフォームでcreateもupdateもするという実装をしたことがなかったので、何とか調べながら実装しました。

取った方法は以下のとおりです。

## view


```ruby:index.rb
#デザイン部分は全く考慮していません

<%= form_for @test, url: test_index_path do |f| %>
   #group_noカラムのフィールド
   <%= f.label :group_no,'管理番号' %>
   <%= f.text_field :group_no %>
   #group_nameのフィールド
   <%= f.label :group_name,'所属グループ名称' %>
   <%= f.text_field :group_name %>
   #createもしくはupdateを行う
   <%= f.submit "保存"  %>
<% end %>

```

## コントローラー

```ruby:tests_cotoroller.rb

def create
#group_noは一意の番号。既にその番号が使われているのであれば、データの更新。そうで無ければ、データの作成。(test_paramsはストロングパラメーター)
    @test = Test.find_or_initialize_by(group_no: test_params[:group_no])
    #新しいレコードの場合createのアクションを行う。
    if @test.new_record?
      @test = Test.new(test_params)
      @test.save!
    #そうでなければ、送られてきたパラメーターの値に更新
    else
      @test.update(test_params)
    end
  end
```

とすることで、同一のフォームで、createもupdateも行えるようになりました。
私としては、
業務システムなんかでよく使うマスタメンテ画面などは、一つのページで新規作成、編集、削除、一覧表示などが求められるので、そのような場面で利用するイメージです。
最近知ったMessaging APIの複数メッセージ送信機能

# はじめに
多分ほとんどの人がこのタイトルを見て「当たり前じゃん」と思われると予想しますが、公式ドキュメントをちゃんと読まない私は今日初めて複数メッセージの送信機能を知りました。

# やり方
特に説明するまでも無いです。[LINE bot SDKの公式ドキュメント](https://github.com/line/line-bot-sdk-nodejs/blob/master/docs/api-reference/client.md)（ここではnode.js）の一部を抜粋します。

```javascript:line-bot-sdk-nodejs/docs/api-reference/client.md
// Message
pushMessage(to: string, messages: Message | Message[]): Promise<any>
replyMessage(replyToken: string, messages: Message | Message[]): Promise<any>
multicast(to: string[], messages: Message | Message[]): Promise<any>
getMessageContent(messageId: string): Promise<Readable>
```

上記のメソッドは`line-bot-sdk-nodejs`のClientクラスに属しているものたちです。ユーザにメッセージを送信する場合は`replyMessage()`を使います。`replyToken`はユーザから受け取ったWebhookオブジェクトの中に含まれているのでそれを指定します。構造に関しては[ここ](https://developers.line.biz/ja/reference/messaging-api/#webhook-event-objects)を参照してください。
次に`message`を引数として渡します。ここで型が`Message | Message[]`と指定されていて、単体の値か配列かどちらでも受け取れるようになっています。ちなみにMessageはテキスト以外にもスタンプや画像なども指定できますが、それぞれ決まった構造のオブジェクトを組み立てる必要があります。[ここ](https://developers.line.biz/ja/reference/messaging-api/#message-event)を参考にしてください。以下はテキストのメッセージの構造の例です。

```js
{
  type: 'text',
  text: 'ここにテキストが入る'
}
```

要は2回に分けてメッセージを送信したいときは、以下のような感じでreplyMessageを渡せばいいわけです。

```js
replyMessage(event.replyToken, [{type: "text", text: "第一のメッセージ"}, {type: "text", text: '第二のメッセージ'}])
```

# さいごに
こんな初歩的なことに衝撃を受けて記事にする自分が恥ずかしい。。。
Laravel Mix の webpack.mix.js を Storybook でも利用する

# はじめに

[Atomic Design ～堅牢で使いやすいUIを効率良く設計する](https://www.amazon.co.jp/dp/B07CJ5TLK2) 、この本があまりに素晴らしくて、写経をしたいので、その準備として Storybook を利用できるようにしました。

Storybook を導入したのですが、Laravel Mix で設定した CSS Modules が適用されていませんでした。

Storybook へ Laravel Mix の webpack.mix.js を取り込む方法がわかったので、記録に残します。

# Storybook の webpack.config.js を用意

デフォルトで Storybook から読み込まれる .storybook の下に webpack.config.js を作成します。

ディレクトリ構成は以下のようになります。

```sh
.storybook/
    addons.js
    config.js
    webpack.config.js
``` 

webpack.config.js は以下の内容です。
laravel-mix の webpack.config.js を require しているのがポイントです。

```js
const path = require('path');
// your app's webpack.config.js
const custom = require('../node_modules/laravel-mix/setup/webpack.config.js');

module.exports = async ({ config, mode }) => {
  return { ...config, module: { ...config.module, rules: custom.module.rules } };
};
```

これで完了です。
これで、 webpack.mix.js の設定内容が Storybook にも反映されているはずです！！


# さいごに

ドキュメントを読めばなんとかなるもんだ！

これで [Atomic Design ～堅牢で使いやすいUIを効率良く設計する](https://www.amazon.co.jp/dp/B07CJ5TLK2) の写経ができるぞ。


# 参考

- https://storybook.js.org/docs/configurations/custom-webpack-config/#using-your-existing-config
絶対パスと相対パスどっちがいいの？

戒めも

# 絶対パスと相対パスどっちがいいの

絶対パス

# なんで絶対パスがいいの？

 - 相対パスにすると、開いた場所からの相対パスになるので、ファイルがうまく読み込めない時がある
 - 相対パスにすると、../../の記述が増えてしまい、煩雑

# 絶対パスの書き方

[PHP: dirname - Manual](https://www.php.net/manual/ja/function.dirname.php)
↑を使う。

また、一定のパスまで省略させるには、php.iniのinclude_pathの設定をいじる。
スネーク？キャメル？なんちゃらケースのまとめ

株式会社オズビジョンのユッコ (@terra_yucco) です。
外部の API なども使いながらプログラミングをしていると、同じ単語でも色々な表現方法に行き当たります。

例えば私の所属している会社オズビジョンの提供サービスの一つ、[ハピタスコミック](https://comic.hapitas.jp/)。
サービスとしての正式表記はきちんとありますが、以下のような様々な表記が可能です。

- HapitasComic
- hapitasComic
- HAPITAS_COMIC
- hapitas_comic
- hapitas-comic

このどの表記も見かけるケースがあるので、それぞれなんと呼ぶのかを調べてみました。

# ケース一覧
## 前提

プログラミング言語では空白を命令の区切りとして扱うものが多いため、英語では `hapitas comic` などと空白で表現できる言葉を、空白に変わる何かで接続して表現する必要がある。
区切り方法は大きく分けて以下の 3 パターン。

- 大文字小文字の違い
- アンダースコア `_`
- ハイフン `-`

ここに大文字小文字のバリエーションなどでいくつかのケースが生まれます。

## アッパーキャメルケース / Upper camel case

`HapitasComic`

- PHP
    - クラス名は Upper camel case (PSR-1)
- 別名
    - パスカルケース / Pascal case (Pascal で使われていた)

## ロウワーキャメルケース / Lower camel case

`hapitasComic`

- PHP
    - メソッド名は Lower camel case (PSR-1)
- 別名
    - 単に camel case の場合 Lower camel case であることが多い

## アッパースネークケース / Upper snake case

`HAPITAS_COMIC`

- PHP
    - クラス定数は Upper snake case (PSR-1)
- 別名
    - コンスタントケース / Constant case (定数に使うことが多いからか？)
        - 参照: [変数名の命名規則/＊＊ケースの使い分け](https://qiita.com/am_nimitz3/items/7b01af53751dba5d8fb1)

## ロウワースネークケース / Lower snake case

`hapitas_comic`

- PHP
    - 組み込み関数はこれ `preg_match` `str_replace` etc.
    - PSR にはこれを使わなければいけない規定はないが、一部 FW (FuelPHP など) では規約にしているケースあり
- 別名
    - 単に snake case の場合 Lower snake case であることが多い

## ケバブケース / Kebab case

`hapitas-comic`

- PHP
    - `-` は減算を表現する演算子のため使用できない
    - CSS 界隈でよく見かける
- 別名
    - チェインケース / Chain case (鎖のように見える)

## アッパーケバブケースってないの？

ここまでは普段よく見かける組み合わせでしたが、ケバブケースの大文字版ってないんだろうかとふと気になって調べてみたところ。
[Kotlin 用の extension](https://fleshgrinder.github.io/kotlin-case-format/com.fleshgrinder.extensions.kotlin/kotlin.-string/to-upper-dash-case.html) ですが `UPPER-DASH-CASE` のような文字列は以下の呼び方をするようです。

- Upper dash case
- Upper hyphen case
- Upper kebab case

また [jagaapple](https://github.com/jagaapple/string_foundation.rb) を見ると、以下のような呼び名もあります。

- Train case

なので、厳密にいえば Kebab case `hapitas-comic` は Lower kebab case なのかもしれません。

## 気になる点

jagaapple では Upper snake case が `HAPITAS_COMIC` ではなく `Hapitas_Comic` と定義されています。
Upper camel case に業務で出会ったら、どちらを意図しているのかきちんと確認したほうが幸せになれそう。

## Conclusion

業務中によく見かけて気になっていたケースについてまとめました。

区切り文字|大文字|ケース名
:--|:--|:--
大文字小文字|単語区切り|Upper camel<br>(Pascal Case)
大文字小文字|単語区切り<br>ただし最初は小文字|Lower camel<br>(Camel case)
アンダースコア|無し|Snake case
アンダースコア|有り|Upper snake case<br>(Constant case)
ハイフン|無し|Kebab case<br>(Dash case)
ハイフン|有り|Upper kebab case

PHP では使用しない (できない) ものもありますが、適切に使い分けてより可読性高く規約に沿ったコードを書けるようになればと思います！
SECCON Beginners CTF 2019 Writesup

SECCON　Beginners　CTF2019に参加したのでWritesupを記載します
スコアサーバー
https://score.beginners.seccon.jp/challenges

# [warmup] Welcome
![ctf1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156890/c60c2677-48e9-4a86-8484-27fecd3546b4.png)
問題文に記載がある通り、https://webchat.freenode.net/?channels=seccon-beginners-ctfにアクセスするとフラグがある。

![ctf2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156890/f10fa3f8-2db9-cefc-60a3-8d339fb70f4e.png)

FLAG:ctf4b{welcome_to_seccon_beginners_ctf}

# containers
ファイルをダウンロードし、fileコマンドで判定すると、dataと表示される。
バイナリエディタ等で確認するとPNGファイルが連結されたファイルだとわかる。
（赤枠部分がPNGファイルのマジックナンバーである）
![ctf3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156890/19c04cef-e211-ad15-878c-7f2e28b850a7.png)

そのため、ファイルが埋め込まれていると判断し、ファイル抽出するコマンドforemostで抽出すると以下のPNGファイルを得ることができるので、フラグがある。
![ctf4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156890/4ead1660-9813-c0a5-a660-49220453c91f.png)

FLAG:ctf4b{e52df60c058746a66e4ac4f3fdb6fc81}


# [warmup] Seccompare
ファイルがダウンロードされるので、fileコマンドで確認するとELFと表示される。
単に実行すると、使い方が表示される。

\# ./seccompare
usage: ./seccompare flag
誤ったフラグを引数に渡すと、以下の表示がされる。
\./seccompare 888
wrong

該当ファイルをIDAで解析するとs1が引数で渡した文字列、S2がプログラム内で定義しているフラグの文字列を比較した結果、合っている場合にはCorrect、間違っている場合には、wrongを表示する。
![ctf5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156890/b15d1f0b-e9ae-68f9-b3b8-a629b8ad90b8.png)

S2の文字列部分をASCIIコードに当てはめてるとフラグが得られる。
FLAG:ctf4b{5tr1ngs_1s_n0t_en0ugh}

以下は、途中まで行ったものと最終的に回答が得られなかった
# [warmup]Ramen

ラーメン屋のWebサイトが表示される。真ん中のSeachで店員が検索できるようだ。
一部の文字でも検索できるため、LIKE句を用いたSQLを発行しているようだ。
;を入力すると、エラーが出力されるため、SQLInjectionを行うことを試みる。
SQLInjectionを調査するツールsqlmapで確認するとテーブル内にflagという名前のテーブルがあることを確認できた。ただ、columnが取得できなかったため、回答が行えず。
おそらく、UNION　SELECT～で結合して出力する回答だと思われる。

# [warmup] So Tired
回答すると長い文が出力される。一番最後が==のため、base64でエンコードされているものと判断し、デコードしたものを保存すると、zlib　compressed dataと表示される。
解凍処理を行ったが、うまく解凍されなかったため、回答できず。

# Dump
ファイルをダウンロードして、fileコマンドで確認すると、tcpdumpファイルと表示される。
解析すると、以下のURLが発行されていることがわかる。
/webshell.php?cmd=ls%20%2Dl%20%2Fhome%2Fctf4b%2Fflag
/webshell.php?cmd=hexdump%20%2De%20%2716%2F1%20%22%2502%2E3o%20%22%20%22%5Cn%22%27%20%2Fhome%2Fctf4b%2Fflag


デコード後、以下の文字列になることになる。
/webshell.php?cmd=ls -l /home/ctf4b/flag
/webshell.php?cmd=hexdump -e '16/1 "%02.3o " "\n"' /home/ctf4b/flag

Webサーバに対して、lsコマンドを発行後、その後、hexdumpで16バイトずつ　0詰め3文字表示　改行を行うこととなっている。
そのため、hexdumpの出力をバイナリに戻したのち、フラグが得られると思われるが、その部分の実装を行かった。

#感想
久しぶりに行ったが、やはり最後までやり遂げる力が必要だと思われる。
特にhexdumpの逆部分はpython等で実装できると思われるので後程試してみたい。
GCB・GCE使ってNuxt.jsプロジェクトを起動・オートスケールしてくれるようにしてみた

## やりたいこと全体図
GitHubにpushされたら自動でGCBでビルド開始
→インスタンステンプレートを新規作成
→インスタンスグループのインスタンステンプレートを更新
→インスタンスグループが新しいインスタンステンプレートをもとに新しいインスタンスを作成して、いい感じにオートスケールしてくれる&nuxt起動してくれる

## 下準備
1. GCRに適当なDockerイメージをpushしておく
2. 1でpushしたDockerイメージをコンテナイメージ欄に指定してGCEでインスタンステンプレートを作成
3. 2で作ったインスタンステンプレートを使ってインスタンスグループを作成

## DockerfileにCMDを記載
```Dockerfile
CMD ["/bin/sh", "-c", "npm install && npm run build && nohup npm run start"]
```
インスタンステンプレートでContainer-Optimized OS イメージにしておけば、GCEでインスタンスが起動した時にdockerコンテナを起動してくれるので、こう書いておけばインスタンスが起動した時にnuxtも起動してくれる

## cloudbuild.yaml作成
```cloudbuild.yaml
steps:
- name: 'gcr.io/cloud-builders/docker'
  id: 'Step 1/4: Run Build Docker Image'
  args: ['build', '-t', 'gcr.io/$PROJECT_ID/my-image:$BUILD_ID', '.']

- name: 'gcr.io/cloud-builders/docker'
  id: 'Step 2/4: Run Push to GCR'
  args: ['push', 'gcr.io/$PROJECT_ID/my-image:$BUILD_ID']

- name: 'gcr.io/cloud-builders/gcloud'
  id: 'Step 3/4: Create Instance Template'
  args: ['compute', 'instance-templates', 'create-with-container', '[インスタンステンプレート名]', '--container-image', 'gcr.io/$PROJECT_ID/my-image:$BUILD_ID']

- name: 'gcr.io/cloud-builders/gcloud'
  id: 'Step 4/4: Update Instance Group'
  args: ['beta', 'compute', 'instance-groups', 'managed', 'rolling-action', 'start-update', '[インスタンスグループ名]', '--version', '[インスタンステンプレート名]']
```



## 参考ページ
https://cloud.google.com/sdk/gcloud/reference/compute/instance-templates/create
https://cloud.google.com/sdk/gcloud/reference/beta/compute/instance-groups/managed/rolling-action/
https://cloudplatform-jp.googleblog.com/2017/09/meet-Compute-Engines-new-managed-instance-group-updater.html

## おわりに
GCPの情報が少なかったので作業したことをまとめてみました。
もっといい方法等あれば教えてください！
Mavenでwarのファイル名を設定したものに固定にする

Maven2を使っているときに、デフォルトのpom.xmlだと出力されるwarのファイル名にファイルにバージョンが自動的に付与されてしまう。

 > ex) sampleapp-0.0.0.war

Tomcatのwebappsにひょいってデプロイしたいときにこんなファイル名だとめんどくさいので、
そんな時は pom.xml内に以下の設定を追加するとファイル名が固定になる。


```pom.xml
<build>
    （略）
     <finalName>sampleapp</finalName>
     <!--↑この行追加 -->
</build>
```
git grep -e HOGE --and -v HOGETION ってしたい

HOGEを検索かけたいんだけど、HOGETIONは明らかに違う単語だから除外したいって時ありますよね

# できなかったこと

`git grep -e HOGE --and -v HOGETION`

--andは-eと一緒じゃないと使えないらしい

# 解決方法

`git grep -e HOGE --and --not -e HOGETION`

---

ちょっと詰まった
Desktop : OpenCV Decolor

<H5>Goal</H5>
Test OpenCV decolor.

```
import org.opencv.core.Core;
import org.opencv.core.Mat;
import org.opencv.imgcodecs.Imgcodecs;
import org.opencv.photo.Photo;

import javax.swing.*;
import java.awt.*;

public class OpenCV_Decolor {
    static {System.loadLibrary(Core.NATIVE_LIBRARY_NAME);}
    private JFrame frmjavaSwing;
    double alpha =5;
    double beta =50;

    /**
     *  Launch the application.
     */

    public static void main(String[] args){
        System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
        Mat im = Imgcodecs.imread("D:\\projects\\Java\\OpenCV_Samples\\resource\\imgs\\lena.jpg");
        Mat color_boost=new Mat();
        Mat grayscale=new Mat();
        Photo.decolor(im, grayscale, color_boost);
        Imgcodecs.imwrite("D:\\projects\\Java\\OpenCV_Samples\\resource\\imgs\\lena_boost.jpg", color_boost);
        Imgcodecs.imwrite("D:\\projects\\Java\\OpenCV_Samples\\resource\\imgs\\lena_boost_gray.jpg", grayscale);
    }
}
```
<h5>Result</h5>
![lena_boost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276243/d897c3a6-a4ce-59ce-4a33-f7a83f607ef3.jpeg)

![lena_boost_gray.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276243/d8a1ac6b-db32-e9de-f2e9-245475650169.jpeg)
EV3RTOSをバージョンアップする

# EV3RTOSのバージョンをあげたい
　今年からアドバンストクラスで参加することになり、期待も変わったのですが、中身のバージョンを見てみると6.2でした……（最新バージョンで7.2）。
　古い（確信）。
　
　というわけでバージョンアップをしました。
　とても簡単なのに、迷走したのでメモ書き程度にまとめることにします。

# 開発環境
　Macで開発しています。

# 手順
 - 入れたいバージョンのEV3RTOSをダウンロード & 解凍
 - microSDカード内に入っている`ev3rt`と、`uimage`をダウンロードしたものの中に入っている`ev3rt`と`uimage`

　とっても簡単！

# 入れたいバージョンのEV3RTOSをダウンロードする
　以下のサイトから欲しいバージョンのEV3RTOSをダウンロードします。

[TOPPERS Download](https://dev.toppers.jp/trac_user/ev3pf/wiki/Download#%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89)

　解凍して中身を確認してみます。
　`sdcard`ディレクトリの中に`uImage`と`ev3rt`があるのが確認できます。

# ファイルの置き換え
　バージョンアップしたいEV3RTOSとPCを接続して、先ほど入手した`uImage`と`ev3rt`と置き換えます。

　ロボットを起動してみて、バージョンが更新されていれば成功です！

![IMG_2922.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219573/223bffed-555b-feb3-f204-ffd6697467d1.jpeg)

（※今回はバージョン７にしました）

### 以下どうでもいいけど気づいたこと
`uImage`をいれなかった時は読み込みができなかったので、EV3を起動した時に最初に読み込まれるのは`uImage`みたいです。
【サルが書く】Hyperをアイコンで可愛くしよう

# Hyperを可愛くしよう

わきゃ

ターミナルって無骨で見づらいってことあるよね。

`ls`でディレクトリやファイルが表示されて、パット見でどれがどのファイルがわかりにくいってときに便利なものを紹介します。

[LSDeluxe](https://github.com/Peltoche/lsd)

これを導入するとこのようになります。

<img width="627" alt="スクリーンショット 2019-05-27 21.12.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177293/0aa8bbf5-4ed3-4634-7c1c-548b669bc30d.png">


## LSDeluxeとは
`ls`をした際に、見やすく色をつけたり、アイコンを付けてくれます。
LSDeluxeは[colorls](https://github.com/athityakumar/colorls)に大きな影響を受けているそうです。
colorlsはRuby製ですが、LSDeluxeはRustで作られているため、動作が早いそうです。
[ベンチマーク](https://github.com/Peltoche/lsd#benchmark)

# 実際に導入してみる

### LSDeluxeをインストール

macの場合はhomebrewを使用し、インストールができます。
homebrewをインストールしていない人は[こちら](https://brew.sh/index_ja)

```bash
brew install lsd
```
本体がインストールされました。

### aliasの設定

表示するコマンドとしては`lsd`なので、`ls`で`lsd` が呼ばれるようにaliasを設定すると便利です。

```sh:.bashrcとか.zshrc
alias ls='lsd'
```

このままだとアイコンが表示されないことある。
<img width="856" alt="スクリーンショット 2019-05-27 19.29.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177293/41f8e9b4-6fd0-0552-11e8-98bcaba4cbe6.png">

### アイコンを表示するためにFontを入れる

brew caskでfontをインストールする

```sh
brew tap homebrew/cask-fonts
brew cask install font-hack-nerd-font
```

### hyperのフォント設定
フォントを入れてもまだアイコンは表示されないかと思います。
preferencesから設定を開き

```javascript
fontFamily: 'Hack Nerd Font'
```

と設定します。
そしてHyperを再起動すれば表示されるはずです!

## おまけ: vscodeでこれを適用する

settingsで `Font Family terminal` を調べて、 `Hack Nerd Font` にすれば動きます。
【CSS】select要素をcssで装飾

## こんなときに
* selectボックスを以下のようなシンプルな見た目にしたい。
![スクリーンショット 2019-05-27 21.43.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235781/b94fb75c-cb60-a17e-63e0-f67a7e05020f.png)

* ブラウザのデフォルトCSSを打ち消したい。
* 「▼」のために画像やWebフォントを導入するのはダルい。


## コード
### Pug
```pug
.wrap
  form(action="", method="post")
    .selectWrap
      select.select(name="select")
        option(value="1") item1
        option(value="2") item2
        option(value="3") item3
        option(value="4") item4
```

### SCSS
```scss
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  background-color: #ddd;
}

.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;

  font-size: 30px;
  width: 104px;
}

.selectWrap {
  position: relative;
  &:after {
    content: '▼';
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666;
    pointer-events: none;
  }
}
```


## 解説
### ポイント
* 疑似要素を使用。テキストの「▼」を使う。
* **selectに擬似要素はつかない。**外側に疑似要素用のdiv（`.selectWrap`）を用意する。
* 疑似要素部分はデフォルトではクリックに反応しない、`pointer-events: none;`を適用すべし。

### 既存スタイルの打ち消し
```scss
.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;

	//略
}
```

### 疑似要素をつける
```scss
.selectWrap {
  position: relative;
  &:after {
    content: '▼';
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666;
    pointer-events: none;
  }
}
```

疑似要素は、select外側のdivに指定。
位置を`absolute`でselect要素の範囲内、真横に持ってくる。

`pointer-events: none;` をつけると、▼を押して反応する。

## 実装サンプル
https://codepen.io/dorara_css/pen/yWEPEa

## 参考
[フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する | Will Style Inc.｜神戸にあるウェブ制作会社](https://www.willstyle.co.jp/blog/303/)
[<SELECT>－HTMLタグリファレンス](http://www.htmq.com/html/select.shtml)
[フォーム要素のスタイルをリセットする | cly7796.net](http://cly7796.net/wp/css/reset-the-style-of-form-elements/)
[Vue.js] 別ウィンドウで開くリンクの作成


## やりたいこと

別ウィンドウで開くリンクをつくりたかった

## 方法

### メインのコンポーネント

```html
<script>
import { ROUTER } from '@/libs/constant-router'
export default {
  name: 'Register',
  methods: {
    toTerms() {
      let routeData = this.$router.resolve({name: ROUTER.TERMS_NAME, query: {data: "someData"}});
      window.open(routeData.href, '_blank');　//←★ここ
    },
}
</script>
```

###　設定ファイル群

#### constant-router.js

プロジェクトルート直下に「libs」と名付けたディレクトリを切って、その中に格納

```javascript
export const ROUTER = {
  TERMS_PATH: '/terms',
  TERMS_NAME: 'terms',
}

```

#### router.js

```javascript
import Terms from '@/views/Terms.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: ROUTER.TERMS_PATH,
      name: ROUTER.TERMS_NAME,
      component: Terms,
    },
  ],
})

router.toTerms = () => {
  router.push({ name: ROUTER.TERMS_NAME })
}


export default router

```
# Ionic Framework + Firebaseで1日ぐらいでWebアプリを作ってみた感想

## Why
- ある新規プロジェクトでプロトタイプを開発することになったから (あるある)
- エンジニアが足りないので、iOS/Androidに分けてnativeで書くのに無理がある...:ゲロゲロ:
- Ionicは聞いたことあるので使ってみたかった (要はミーハー)

## Resources

### 日本語
- この一冊がバイブル的存在
[Ionicで作る モバイルアプリ制作入門] (https://www.amazon.co.jp/dp/4863542364/)

- Ionic Japanの[Slack] (https://ionic-jp.herokuapp.com) に入ると#code_questionチャネルで質問できる

### 英語
日本語よりはリソースが多いかもしれないが絶対数としては多くない印象。公式サイトは微妙だったので他を探すしかなかった
- [公式tutorial] (https://ionicframework.com/docs/developer-resources/guides/first-app-v4/intro) は存在しているが説明があまり親切ではない
- FirebaseのDBも使いたかったので、結局[このページ] (https://devdactic.com/ionic-4-firebase-angularfire-2/) を参考に作った
- 問題があったらGoogle先生に聞くスタンス。StackOverflowや[Ionic Forum] (https://forum.ionicframework.com) 

## Pros
- [UI components] (https://ionicframework.com/docs/components) があるとはとても嬉しい。iconsなどのおかげで綺麗なプロトタイプをぱっとそれっぽく作れる(大事)
- js (TypeScript) で書ける

## Cons
- native機能を使うならcompileがめんどくさい 
- Angular以外も(v4から)サポートしているとはいえ、resourcesが圧倒的に少ない

## まとめ
- native機能使わないなら、Ionic+Firebaseはプロトタイプ作りには向いてるかも！
AWS上のWindowsServerに対して、ローカルmacからansibleを実行 #1

AWS上のWindowsServerに対して、ローカルmacからansibleを実行したい、と思った。

# 環境
* ローカル(mac)
    * python -> 3.6.4
    * ansible -> 2.7.10

* リモート(Windows Server 2019)

# ローカルの準備
とりあえず、pipでansibleとpywinrmをインストール。

```
pip install ansible
pip install pywinrm
```

あと、接続するためのhostsファイルを用意する。私は、ansibleディレクトリを作り、
その下にhostsファイルを作りました。

```conf:hosts
[windows]
AWSのパブリックDNS名

[windows:vars]
ansible_user=管理者ユーザ
ansible_password=管理者ユーザのパスワード
ansible_port=5986
ansible_connection=winrm
ansible_winrm_server_cert_validation=ignore
```

# リモートの準備
ansibleで、Windowsの環境を設定するスクリプトが提供されているので、ダウンロード。

```
Invoke-WebRequest -Uri https://raw.githubusercontent.com/ansible/ansible/devel/examples/scripts/ConfigureRemotingForAnsible.ps1 -OutFile ConfigureRemotingForAnsible.ps1
```

で、ダウンロードしたスクリプトを実行する。私のネットワークはパブリックだったので、以下を実行した。

```
powershell -ExecutionPolicy RemoteSigned .\ConfigureRemotingForAnsible.ps1 -SkipNetworkProfileCheck
```

# AWSの準備
セキュリティグループで、インバウンドルールとして、ポート5986を許可しよう。

# 動作確認

```
ansible windows -i ansible/hosts -m win_ping -vvvv
```

`ANSのパブリックDNS名 | SUCCESS => {
    "changed": false,
    "ping": "pong"
}`

的な感じでリターンがあるとOK。
GeoPandasがうまく実行できないときの対処法

GeoPandasのインストールが環境によって、うまくいかないという報告をよく受けるため、基本的なインストールで気をつけることを共有します。

# インストール環境

virtualenvなどを用いて、まっさらな環境がおすすめ。別のパッケージで古いバージョンのパスを通していると2次災害が起きることがよくあるため。

# インストール手順

GeoPandas=0.5.0（2019年5月時点で最新）の場合には、Githubの本家から直接インストールすることをおすすめします。PyPIに登録されているversionはoveralayの関数の修正が反映されていないようですが、[github上では修正後版がmasterブランチにマージされているよう](https://github.com/geopandas/geopandas/pull/429)です。

```
pip install pandas fiona shapely pyproj rtree descartes
pip install git+git://github.com/geopandas/geopandas.git
```

# 手っ取り早く使いたいときは...

GoogleDriveにパスを通すことが億劫でさえなければ、GoogleColaboratryを使うと簡単です。参考までに[コード](https://colab.research.google.com/drive/1CAJxe7g0o38t8VbDtKUxyCZOubutipKd#scrollTo=ARYT-oZ-_0af) を共有します。

GeoPandasは使い勝手が不安定であることがもったいないです。Pandasとの互換性があり、とても便利ですので、普及を応援したいです。
API Blueprintのススメ

## はじめに
最近WebAPIを触る機会があって懐かしくなったので、以前とある案件でかじったAPI Blueprintでも布教してみます。

## [API Blueprint][apib]
APIの仕様をMarkdown拡張記法で記述できる言語です。
慣れるまでは正直書きづらいですが、元がMarkdownなので[Swagger][swagger]に比べるとまだ書きやすい方だと思います。

今度記事にしますが、先日[Frisby.js][frisby]というWebAPIのテスティングフレームワークを触るためにJWT認証を使った簡単なWebAPIを作ったので、サンプルとしてAPI Blueprintで仕様書を書いてみました。

```apiblueprint:sample_api.apib
FORMAT: 1A
HOST: http://localhost/api

# Sample API
Frisbyを触ってみるために最低限の機能だけで作ったWebAPI

## ユーザ登録 [POST /users]
新規ユーザを登録する

+ Request (application/json)
    + Attributes
        + name: `oskamathis` (string, required) - ユーザ名
        + email: `oskamathis@gmail.com` (string, required) - メールアドレス
        + password: `1xU35jQy` (string, required) - パスワード

+ Response 200 (application/json)
    + Attributes
        + result: `true` (boolean) - 登録結果
        + name: `oskamathis` (string) - ユーザ名
        + email: `oskamathis@gmail.com` (string) - メールアドレス
        + message: `User creation succeeded.` (string) - 登録メッセージ


## トークン発行 [POST /login]
JWT認証用のトークンを発行する

+ Request (application/json)
    + Attributes
        + email: `oskamathis@gmail.com` (string, required)
        + password: `1xU35jQy` (string, required)

+ Response 200 (application/json)
    + Attributes
        + access_token: `{token}` (string)
        + token_type: `bearer` (string)
        + expire_in: `60` (number) - トークンの有効期限

+ Response 401 (application/json)
    + Body
        ```
        {
            "error": "Unauthorized"
        }
        ```


## ユーザ情報取得 [GET /user]
自分自身のアカウント情報を取得する

+ Request
    + Headers
        ```
        Authorization: Bearer {token}
        ```

+ Response 200 (application/json)
    + Body
        ```
        {
            "id": 1,
            "name": "oskamathis",
            "email": "oskamathis@gmail.com",
            "email_verified_at": null,
            "created_at": "2019-05-23 12:19:26",
            "updated_at": "2019-05-23 12:19:26"
        }
        ```
```

Markdownに慣れている方なら何となく読めるかと思います。
ただ、これだとドキュメントとしてはあまり読みやすいものではないので、Aglioというツールを使います。

## [Aglio][aglio]
API Blurprint(`*.apib`)ファイルを見やすいHTMLに整形してくれるツールです。
Node.jsのパッケージなのでnpmでインストールします。

```bash
npm install -g aglio
```

あとは下記コマンドでHTMLファイルを生成してくれます。


```bash
aglio -i sample_api.apib -o sample_api.html
```

生成結果はこちら↓

![aglio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120125/80bafc02-5059-4fd3-3159-c99f2efe5b28.png)

かなり見やすくなりましたね。
Swaggerよりも学習コストが低く、手軽にAPI仕様書をテキストベースで作成できるのでオススメです。

イチイチ生成するのが面倒な場合は下記のコマンドを実行すればリアルタイム編集も可能です。

```bash
aglio -i sample_api.apib -s
```

## まとめ
他にもAPI Blueprintからモックサーバを自動で立てるツールもあったりするので、そのうち紹介したいと思います。


[apib]:https://apiblueprint.org/
[swagger]:https://swagger.io/
[frisby]:https://docs.frisbyjs.com/
[aglio]:https://github.com/danielgtaylor/aglio
[apibv]:https://marketplace.visualstudio.com/items?itemName=develiteio.api-blueprint-viewer
1秒でわかる並行処理と並列処理

<img width="414" alt="9F21245A-91E7-4F0E-9A1B-941951BF9F06.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391153/3fcffc14-0a21-b991-ac59-aa3e43742ef7.jpeg">
これが並列処理
<img width="414" alt="CECE0880-AECC-476A-800F-A937F1DA3A88.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391153/9146cacf-109b-8a02-7458-3f7910886fcb.jpeg">
これが並行処理


作者のgithubはこちら
https://github.com/Homarechan
convnet.jsで自動運転　その３

# 概要

convnet.jsで自動運転、やってみた。
plunkerで、動かしてみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/f12076d3-01a0-b20a-72ac-65b99f53f1a1.png)


# 成果物

https://embed.plnkr.co/HFHpgsmceXadFFS90gfu/


以上。