OmniAICreator/Qiita-1.07M huggingface dataset:
すごいぞTapTargetView

# TapTargetViewって何？
こんな感じにAndroidアプリの機能やボタン説明をおしゃれに紹介できるライブラリです。(配布元より転載)
![video.gif](https://qiita-image-store.s3.amazonaws.com/0/292799/f56f541a-b9bc-4acf-bcde-b3ec3acdeb86.gif)

これによって、何の機能が、どのボタンを押せば利用出来るか、ユーザーが直感的に理解できます。

## 以下のGitHubリポジトリで配布中
https://github.com/KeepSafe/TapTargetView

# 導入方法
app配下の`build.gradle`に以下の定義を追加するだけです。簡単。

```groovy:build.gradle
   repositories { 
        jcenter()
   }
   
   dependencies {
         implementation 'com.getkeepsafe.taptargetview:taptargetview:1.12.0'
   }
```

# 使い方
私が作成した[SUBWAYシミュレーター](https://play.google.com/store/apps/details?id=com.hammer.app.subwaysimulator)(サブウェイのサンドウィッチレシピを作って保存するアプリ)でも、初回起動時にこのTapTargetViewを使ったチュートリアルを実装してます。
今回はそのコードを見てみましょう。(言語はKotlinです)

```kotlin:MainActivity.kt
//シーケンスに実行したい場合はTapTargetSequenceを使用
val sequence = TapTargetSequence(this) //Activityの指定(今いるActivityならthis)
        .targets(
                TapTarget.forView(findViewById<View>(R.id.create), "まずはこちらのボタンを押してレシピを作成しましょう！") //Target対象のView(第一引数)とタイトルテキスト(第二引数)を入力
                        //以下オプション
                        .outerCircleColor(R.color.colorPrimary) //外円の色
                        .titleTextColor(android.R.color.white) //タイトルテキストの色
                        .drawShadow(true) //影の有無
                        .outerCircleAlpha(0.97f) //外円の透過度
                        .cancelable(false) //外円の外を押したらキャンセルできるかどうかの指定
                        .tintTarget(false) //Target Viewに色をつけるかどうかの指定
                        .id(1), //シーケンスID(順序性の指定)
                TapTarget.forToolbarOverflow(toolbar, "操作方法を忘れた場合はこちらをクリック！", "もう一度チュートリアルを見ることができます。") //第三引数は説明テキスト
                        .outerCircleColor(R.color.colorAccent)
                        .titleTextColor(android.R.color.white)
                        .descriptionTextColor(android.R.color.white) //説明テキストの色指定
                        .descriptionTextAlpha(1.0f) //説明テキストの透過度指定
                        .drawShadow(true)
                        .outerCircleAlpha(0.97f)
                        .cancelable(true)
                        .id(2)
         )
sequence.start() //実行
```

上記以外のオプションもあり、[配布元](https://github.com/KeepSafe/TapTargetView)で確認できます。

## 実行すると…
こんな感じ↓
![subway.gif](https://qiita-image-store.s3.amazonaws.com/0/292799/169d47f5-4a7f-c9f7-afd2-7cfce4cc9c66.gif)




# 終わりに
手軽にスタイリッシュ感が出るので、興味のある方は試してみてください。
RでkableのMarkdown出力をConfluence Wiki記法に変換する

## はじめに
Rで分析・集計したdata.frameをknitr::kableでmarkdownに出力して、Confluence WikiにがんがんMarkdownテーブル貼りたい！…にもかかわらず、Markdownテーブルはなぜかマークアップ挿入でも出力されないorz

[Using markdown tables](https://community.atlassian.com/t5/Confluence-questions/Using-markdown-tables/qaq-p/578215
2018/03/30) のAtlassianのコミュニティでも同じ問題は上がっていますが、他のタスクもあって取りかかれていない様子（2019/1/22時点）。また、[MySQLでDUMPしたテーブル定義をConfluence Wiki記法やMarkdown記法にするワンライナー](https://qiita.com/kurab/items/9b36dd2f7eb635454bac)でも同様に、sed等で出力結果を整形することを行っています。

今回は、Rではおなじみのknitr::kableを使って、無理やりにでもConfluence Wiki記法の表に変換することを行います

## やってみる

準備として、mtcarsのデータを適当に用意する

```R
> dt <- mtcars[1:5, 1:6]
> dt
                   mpg cyl disp  hp drat    wt
Mazda RX4         21.0   6  160 110 3.90 2.620
Mazda RX4 Wag     21.0   6  160 110 3.90 2.875
Datsun 710        22.8   4  108  93 3.85 2.320
Hornet 4 Drive    21.4   6  258 110 3.08 3.215
Hornet Sportabout 18.7   8  360 175 3.15 3.440
```

これを`knitr::kable`で出力すると、

```R
> knitr::kable(dt)
|                  |  mpg| cyl| disp|  hp| drat|    wt|
|:-----------------|----:|---:|----:|---:|----:|-----:|
|Mazda RX4         | 21.0|   6|  160| 110| 3.90| 2.620|
|Mazda RX4 Wag     | 21.0|   6|  160| 110| 3.90| 2.875|
|Datsun 710        | 22.8|   4|  108|  93| 3.85| 2.320|
|Hornet 4 Drive    | 21.4|   6|  258| 110| 3.08| 3.215|
|Hornet Sportabout | 18.7|   8|  360| 175| 3.15| 3.440|
```

`knitr::kable`の型やattributesをみてみる

```R
> kb <- knitr::kable(dt)
> str(kb)
 'knitr_kable' chr [1:7] "|                  |  mpg| cyl| disp|  hp| drat|    wt|" ...
 - attr(*, "format")= chr "markdown"
> attributes(kb)
$format
[1] "markdown"

$class
[1] "knitr_kable"
```

これで事前調査は完了。続いて、変換する関数をつくる

```R
tableToConfluence <- function(kb){
  kb[1] <- gsub("\\|","||", kb[1])
  kb <- kb[c(-2)]
  attr(kb, "format") <- "markdown"
  attr(kb, "class") <- "knitr_kable"
  return(kb)
}
```

この関数をはさむと、シンプルなConfluence Wiki記法に変換されます

```R
> tableToConfluence(knitr::kable(dt))
||                  ||  mpg|| cyl|| disp||  hp|| drat||    wt||
|Mazda RX4         | 21.0|   6|  160| 110| 3.90| 2.620|
|Mazda RX4 Wag     | 21.0|   6|  160| 110| 3.90| 2.875|
|Datsun 710        | 22.8|   4|  108|  93| 3.85| 2.320|
|Hornet 4 Drive    | 21.4|   6|  258| 110| 3.08| 3.215|
|Hornet Sportabout | 18.7|   8|  360| 175| 3.15| 3.440|
```


何をやってるかというと、gsubで先頭の見出し行を整形、2行目を削除、あとは`attr`でattribute情報をあとから追加してるだけです。

Confluenceのマークアップ挿入から、ペーストして無事にできました！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69266/f928b8e2-cca1-9d9d-50fa-baa651df719b.png)

## おわりに

Markdown Tableをペーストできる公式機能が待ち遠しいですね
GoogleCTF #beginners/misc-letter


![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/52721f39-8e9e-64db-c571-ffa70cd2013a.png)

左から順に解いていくスタイルのようです。
まずは一番左の問題から。

#問題

https://capturetheflag.withgoogle.com/#beginners/misc-letter

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/0752e2c6-0136-93c6-70bc-50c7ed0a01a2.png)

すみません。英語が苦手すぎるのでGoogle翻訳してます。。。
ただこの問題を読む必要があるのか？という疑問が。

#解いてみた


添付ファイルをダウンロードするとZIPファイルがありまして、それを解凍するとPDFファイルがありました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/16d78f5f-9a67-5e55-eb04-7a780d908bd7.png)

中身を見てみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/782a286c-109a-57b5-99cf-d88f5460bb97.png)

黒塗り部分を明らかにする問題のようです。
Ctrl+AしてCtrl+CしてどっかにCtrl+Vしてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/c2fc6c0f-545e-413c-830f-aeaaf572a0a3.png)

できてしまった。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/7dfaf856-9d18-c86d-c543-9ec9abc8f773.png)

「やったぜ」的な画面はなく、クリアしたところの色が少し変わるだけのようです。
というか、これは一気に解かないと毎回最初に戻ってしまうということに気づいた。
とりあえずflagをメモしておいて、少しずつ解きます。。。
JUCEで作ったアプリでタッチ操作のスクロールを有効にする

JUCEで作ったアプリは、iOS用（Androidもたぶん。知らんけど）のアプリはListBoxなんかがタッチというかフリック操作でスクロールできるけど、Mac/Windows/Linux用にビルドしたものではそれが有効になっていない。ViewPort::setScrollOnDragEnabled()を使うとこれを有効にできる。例えば、ListBox* listBoxがあるとしたら下記のようにすればいい。

```
listBox->getViewport()->setScrollOnDragEnabled(true);
```

これをしないと、作ったアプリをMicrosoft Surfaceのようなタブレットデバイスで操作した時に非常に使いにくいものになってしまう。ただし、タッチでListBoxのアイテムがクリックされる時の挙動がちょっと変わる（ListBoxModel::listBoxItemClicked()がクリック時にすぐに呼ばれなくなる）ので注意。

TableListBoxは挙動が違っていて、上記を行っても行わなくても、タップした瞬間行が選択され、フリックもできる仕様になっているっぽい。タップした瞬間に選択されてしまうのはiOS/Android用アプリとしてはめちゃくちゃ使いづらいが無効にする方法がわからない。
yieldについて

#yieldって感覚的によく分からない
と思いながら、そろりそろりと勉強していますが、railsチュートリアルを回っていると出てきたので、そもそもどういう仕組みなのか調べてみました。
そして備忘録もかねて、こちらに残します。

##ことばのいみ
yield=「産む」「もたらす」っていう意味らしい（今更）
（https://ejje.weblio.jp/content/yield）

##仕組み
「メソッド定義の中のyieldは、メソッド呼び出しの際に与えられたブロックを実行します」
（たのしいRuby 第４版より）

```
## ブロック付きメソッドの定義、
## その働きは与えられたブロック(手続き)に引数1, 2を渡して実行すること
def foo
  yield(1,2)
end
```
(rubyリファレンスマニュアルより）

何となくわかるような分からないような・・・
ただ、yieldは渡された引数を実行するものである、っていう理解で良さそう
[Python]Base64でエンコードされた画像データをデコードする。

# 目的
Base64でエンコードされた画像データをデコードします。

## 投稿理由
Base64で画像をエンコードするプログラムは探せばよくありますが、
デコードして得た画像を保存するプログラムは探した限り見つからなかった為投稿しました。

# 使用言語
Python3.7.0

# Base64で画像をエンコードする
##エンコードする画像
![image001.jpg](https://qiita-image-store.s3.amazonaws.com/0/328735/41714635-1af6-c48e-6a9e-82b78e170789.jpeg)

##エンコードするためのプログラム
``` python
import base64

#Base64でエンコードする画像のパス
target_file=r"original.jpg"
#エンコードした画像の保存先パス
encode_file=r"encode.txt"

with open(target_file, 'rb') as f:
    data = f.read()
#Base64で画像をエンコード
encode=base64.b64encode(data)
with open(encode_file,"wb") as f:
    f.write(encode)
```

# Base64でデコードして画像を保存する。

## デコードする文字列(さっきの画像をエンコードした文字列)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/328735/30e23ad5-cbf4-8638-582b-da2b444fbf42.png)

## デコードするためのプログラム
``` python
import cv2
import base64
import numpy as np
import io

#Base64でエンコードされたファイルのパス
target_file=r"encode.txt"
#デコードされた画像の保存先パス
image_file=r"decode.jpg"

with open(target_file, 'rb') as f:
    img_base64 = f.read()

#バイナリデータ <- base64でエンコードされたデータ  
img_binary = base64.b64decode(img_base64)
jpg=np.frombuffer(img_binary,dtype=np.uint8)

#raw image <- jpg
img = cv2.imdecode(jpg, cv2.IMREAD_COLOR)
#画像を保存する場合
cv2.imwrite(image_file,img)

#表示確認
cv2.imshow('window title', img)
cv2.waitKey(0)
cv2.destroyAllWindows()
```
## デコードして得られた画像
![image.png](https://qiita-image-store.s3.amazonaws.com/0/328735/0c1c5934-b389-6f0d-8b43-063889060dec.png)
正しく画像がデコードされました！
MacでDocker上でWordPress動かしたい

MacでDocker上でWordPress動かしたい

Docker使ったら、ローカル環境上でWordPressの開発ができるじゃん！！！
と思って、Dockerを導入してみた。

その過程をつらつら書いていく。


そもそもDockerとは？？
Dockerなんで使うの？？　などといった疑問のある方は、

説明に関しては、こちらをお読みください。めちゃめちゃわかりやすいです。
この記事を書いてくださった方、ありがとうございます。
https://qiita.com/kotaro-dr/items/b1024c7d200a75b992fc#_reference-fe4e26271a18ef5d1b25

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

では早速初めていきます。

まずは、こちらのアプリをインストール
Docker Desktop (Mac)　
この際に　Docker　Hubにユーザー登録する必要がありますので、ご注意ください。

インストールできたら、
docker.app を実行しましょう。

画面上のメニューバーにクジラのマークが記載され、それを押したら
Docker Desktop is running  と表示されていたら、Dockerが動いている状態です。

次に
ターミナル上で　Dockerを動かしていく。

あとは簡単、それぞれ２つのコマンドを実行

まずは　mysqlをひっぱてきて実行
docker run --name test-mysql -e MYSQL_ROOT_PASSWORD=test-pw -d mysql:5.7.21
※mysqlのversionは5.7.21で指定すること　　なぜなら最新の8系列で実行するとローカルホストにアクセスできません。


次にWordPressをひっぱてきて実行
docker run --name test-wordpress --link test-mysql:mysql -d -p 8080:80 wordpress


あとは
localhost:8080　
をURL入力の欄に記入したら、ローカルホスト上でWordPressを動かすことができます！！！！！！！！


ちなみに動きが重くなります。
どうやらmacの方では、マウントするのに負荷がかかり過ぎてしまうみたい。
windows版ではそんなに重くならないのに。。。。


と思ったら、
mac　再起動かけたら治りました。サクサク動いてます！！
ksnctf 35 Simple Auth II 20pt

#問題

https://ksnctf.sweetduet.info/problem/35

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/d20fd9fa-208a-9b06-1a70-38fa8e1ff241.png)

#解いてみた

phpへのリンクをクリックするとログイン画面が出てきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/09d7f807-4d12-ae6f-6b18-d2e6cefe5fc3.png)

ここを突破してねということでしょう。

sourceはその名の通りソースコードです。
ログイン画面のソースコードです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/96b5014c-e591-717b-def3-a4f2d6cef6f5.png)

入力したIDとpasswordをSQLに使用しているのでSQLインジェクションだろう、と。
プリペアドステートメント使ってるし、無理っぽいけどほかに思いつかないからやってみよう。

```
' or 1 = 1 --
```

みたいなのを何個かやってみたけど、何も反応なし。
変な記号とかも入れてみました。
SQLインジェクションができるなら、変な記号を入れたときにエラー文言とかが出てくるはず。
なんですが、出てきませんでした。

他を探すしかないようなので、ソースを見ているとあることに気づきます。
DBファイルは絶対パスか相対パスで指定できたはずですが、これはファイル名しか書かれてないので相対パスということになります。
URLをauth.phpをdatabase.dbに変更したらファイルがダウンロードできるのではないか。
ということです。
そしてできました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/9b550db5-319b-0720-5c0e-03fff807ae8a.png)

DB Browser for SQLiteを使ってDBの中身を見てみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/fbc6ee6e-02df-cef0-e142-6e5b3fc317e6.png)

ありましたー。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/cdd6f2ed-37c6-305f-1fd6-00b6c50507aa.png)

20点問題にしては難しい気がした。
【jQuery + Onsen UI】 ボタンにクリックイベントをバインドするときの注意点

jQuery + Onsen UI を使ってWeb UIを作成していて少しハマったこと。PC動作確認時にクリックしたときには問題なかったボタンが、スマホでタップしたときには動作しなかった。
元々以下のようにクリックイベントで定義されていた部分を

```javascript
$(document).on('click', 'button', function(){console.log('test')});
```

以下のようにタップイベントで定義したら動作した。

```javascript
$(document).on('tap', 'button', function(){console.log('test')});
```

jQueryだけなら、clickイベントでもスマホで動作したはずだけど、Onsen UIと組み合わせたときの特性っぽい。ひとまず、おかしいと思ったら試してみても良いかも。
容量不足で HTTP500 を返す mastodon インスタンスを救おう (v2.6.5編)

# これは何？
ConoHa の mastodon イメージを元に立ち上げた mastodon インスタンスをかれこれ1年以上管理・運営してる。本業がサーバ管理者でもないしネットワークとかにも詳しくないので、問題がおきるたびにググって対処し続けてる。今回、自分のインスタンスで何度目かの HTTP 500 エラーが出た。ディスクがいっぱいになったのが原因だったので、その対処方法を記録しておく。

# 環境情報

```
> cat /etc/os-release
NAME="Ubuntu"
VERSION="16.04.4 LTS (Xenial Xerus)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 16.04.4 LTS"
VERSION_ID="16.04"
HOME_URL="http://www.ubuntu.com/"
SUPPORT_URL="http://help.ubuntu.com/"
BUG_REPORT_URL="http://bugs.launchpad.net/ubuntu/"
VERSION_CODENAME=xenial
UBUNTU_CODENAME=xenial
```

Docker は使ってない。

# 初動
HTTP ステータス 500 の問題が再発。自分の契約プランと運用状況ではストレージがすぐいっぱいになる。ひとまずこういうときは `df -h` コマンドを打ってみる。案の定、ディスクの空き容量が全然なかった。となれば mastodon のキャッシュデータを削除するべし。

# キャッシュを消したい
この時点で mastodon v2.6.5 まで上げていたので、v2.5.0以前のキャッシュ削除コマンド `rake mastodon:media:remove_remote` が使えない。代わりに下記のコマンドを使う。

```
> RAILS_ENV=production bundle exec bin/tootctl media remove
```

どうも v2.5.0 以降、このあたりのコマンドが tootctl というやつに置き換わったらしい。
https://github.com/tootsuite/mastodon/issues/9192

しかし実行してみたら下記のエラーが出た。

```
MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled. Please check Redis logs for details about the error.
```

前も見た。ディスクがいっぱいだから起きた Redis の問題だった気がする。キャッシュを削除したら治るはずだが。


# Redis を黙らせる

ひとまず下記のコマンドを実行する。

```
> redis-cli
> > config set stop-writes-on-bgsave-error no
```

これは何をやっているのか？、Redis はデフォルトで「前回のDB書き込みに失敗したら以降の書き込みも全部エラーにする」という設定らしい。問題に気づきやすくするためだとか。
https://tech.guitarrapc.com/entry/2013/08/02/210858

この対処については下記の記事を参考にした。
https://exiz.org/2013010714284

# 今度こそキャッシュを消す

改めて下記コマンドを実行する。

```
> RAILS_ENV=production bundle exec bin/tootctl media remove
```

成功した。`df -h` コマンドでディスク使用率を見るとかなりの空き容量ができた。
とりあえずキャッシュを消すことはできたので、Redis の設定を下記のようにして元に戻す。

# Redis の設定を元に戻す

```
> redis-cli
> > config set stop-writes-on-bgsave-error yes
```

# mastodon サービス各種を再起動

下記コマンドで再起動する。

```
sudo systemctl restart mastodon-sidekiq
sudo systemctl restart mastodon-streaming
sudo systemctl restart mastodon-web
```

Chrome からアクセスしたら無事に正常な閲覧ができた。これにて HTTP500 エラー解消。よかった。

# 今後の課題
そもそも問題が起きてから対処してるのがダサい。定期実行の仕組みとか用意したい。どうしたらいいかよくわからんので、詳しい人はアドバイスください。
TJBot Zero用にWeb UIを作った話

## まず、TJBot Zeroとは…
![fig1.jpg](https://qiita-image-store.s3.amazonaws.com/0/154110/80c3da01-db07-552e-16b6-de5d471ba100.jpeg)

`RaspberryPi Zero WH`を基盤として作る、段ボール(というか厚紙)のロボットです。
作り方やレシピについては、様々な方によって紹介されていますが、設計書も公開されており電子工作初心者でも作りやすい内容となっています。
(一番の難所は部品の調達かもしれません…)
また、`BMXUG TJBot Fan Workshop`により、[ハンズオン](https://bmxug.connpass.com/event/115619/)も運営されています。
(大盛況なので抽選になっていますが…)

### (関連サイト)
* [IBM公式のTJBot Zero紹介サイト](https://www.ibm.com/developerworks/jp/code/open/projects/tjbot/)
* [自作AIロボットTJBot Zeroで遊んでみる](https://qiita.com/zuhito/items/cd9d8cfefab1fbacaf69)
* [TJBotZeroをつくりました（１．パーツお買い物リスト編）](https://qiita.com/Mitsu-Murakita/items/68a8d3ec8083a21840fb)

## そんなロボットに一工夫を…
休日を使って作成して子供達(幼児)に見せたところ大好評で、おしゃべりするおもちゃとして大いに楽しんでくれました。名前は「ななこ」ちゃんと言うらしいです:relaxed:
が、公開されている[TJBot Zero用のレシピ](https://public.dhe.ibm.com/software/dw/jp/2018/tjbot-zero/json.html)は`NODE-RED`のコーディング用GUIから操作するものばかりなので、LEDの点灯や会話のアクションを行う時には大人の手助けが必要です。
それならば、Web GUIを作ってリモコン的な役割を持たせたら面白いかなーと思い、サクッと作ってみました。

## 作り方
[node-red-dashboad](https://flows.nodered.org/node/node-red-dashboard)を使いました。
まずは、RaspberryPiに、インストールしていきます。私の場合は下記のコマンドでインストールできました。

```
sudo npm --unsafe-perm -g install node-red-dashboard
```

インストールが出来たら、あとは必要なパーツをダッシュボードとして埋め込んでいきます。
この時に、各機能についてはREST API化して出来るだけ再利用が出来る様に工夫をしています。

### ダッシュボードの画面イメージ
![dashboad-ui.PNG](https://qiita-image-store.s3.amazonaws.com/0/154110/24049a61-f02e-ec1c-1f26-e88cf064542d.png)

### ダッシュボードのフロー
![dashboad-flow.PNG](https://qiita-image-store.s3.amazonaws.com/0/154110/7799b791-a56a-0515-f7c4-388593df56e4.png)

### LEDを点灯させるフロー
![led-on.PNG](https://qiita-image-store.s3.amazonaws.com/0/154110/17fdbead-3af4-c9d1-7592-6dd8c8d603c5.png)

### LEDを消灯するフロー
![led-off.PNG](https://qiita-image-store.s3.amazonaws.com/0/154110/2c00b9c9-8ded-6cb4-d1a5-c4be8ac46216.png)

### Watson AssistantとTextToSpeechを使ってお話をするフロー
※リクエストパラメータとして、Speechを受け取り、それをWatson Assistantへ連携しています。その返答を音声化します。
![speak.PNG](https://qiita-image-store.s3.amazonaws.com/0/154110/3dcd552d-af49-afe5-c4a6-46ab24d2c689.png)

## 最後に
この方法だとHTMLを作る必要すらなくこの様なGUIを作る事が出来るので、挑戦してみてはいかがでしょうか～。
※ちなみにもっとすごい例は[こちら](https://github.com/ibmtjbot/tjbot/blob/master/featured/README.md)
断捨離敢行史

Vimを使うにあたり、様々なテキストエディタ勢から「カスタマイズにハマると永遠にカスタマイズをするので良くない」という警告を受けていたのですが…見事にその無間地獄に嵌っています。正確にはカスタマイズして、太ったvimrcを見て、カスタマイズを外すという物理的には何も得られないという…正確には頭のカスタマイズが進むので精神的な充足はあるのですが、何にしろあまり良いとは言えない関わり合い方をしているわけです。というわけでバッドノウハウとしてなぜカスタマイズしようとして、なぜカスタマイズしないという選択に至ったか、のお話です。

## `vimrc`を開くキーマップは必要か？

これに関しては多くのVimmerが「必要だ」という見解だったので当たり前のように仕込んでいました。仕込んだ先は`<Leader>vv`、ここから`<Leader>v`をプレフィックスに`gvimrc`用、vim-plug用、プラグインやリマップ用…と増えて行きました。更にnetrwのブックマークまで包括的に管理出来るものを求めた末に、現在は間接的なリマップを残すのみで総て削除しています。

今はどうなっているか、と言うと`<Leader>v`に`:e v`がアサインされており、それと`v`で始まる短縮入力を使って移動を実現しています。この方法の予想外の利点として、挿入モード中にも`<C-r>=`から短縮入力経由でパスが入力できるので…まぁ、そういう方法があると気がついただけで良かったのでしょう。

ちなみにその過程でnetrwのブックマークへの直アクセスは不要ということになりました、というよりnetrwのブックマークを使うより短縮入力にパスを入れたほうが使い勝手が良かった…といううちにnetrwのブックマーク自体を使わなくなりました。

## ウィンドウ操作のあれこれ
 
上の項目とも被るお話ですが、`:Explore`コマンドが行っている現ウィンドウの変更をチェックしてウィンドウ分割するのは賢くていいなぁと思ったんですが…結論としてはこれは自分でコントロールすべきなんだろうなと思いました。そのために`<C-w>`のキーマップがあるわけで、これを覚えるのが一番スマートな方法なんだとおもいます。

その過程で、何故Vimは新しいウィンドウを開くと上か左に出るのかが分かりました。今の操作で出来るウィンドウを見た目の上位に表示する様になっているので、これに合わせて`'splitbelow'`、`'splitright'`あたりの設定も消えました。

## 整形用の空行追加

行追加、といえばまぁ`o`使えばいのですが、整形のためだけとなるとカーソルが動くのが気になるので…これも色々試したのですが結論として外しました。`m'`をちゃんと活用すべきなのかもしれません。もしくはそういう形でキーマップを入れるか、Vim自体がテキストオブジェクトによって文書、もしくはスクリプトを管理しているのだから既に規定されているテキストオブジェクトをしっかり意識しながら作業をすることが大事なんだと思います。要はテキストの追加と整形を一緒に考えないように整形をあとに回すか、常に整形されたものを想定し続けることでそう言った操作が必要ないようにすべきなんだと思います。

## コマンドの結果をウィンドウに表示するスクリプト

これはワンライナーで書けたので単純に必要なかったです。ワンライナーで書けるなら短縮入力に仕込めばいいだけでした。

`:new +setlocal bt=nofile|put=` で代替できました。コマンドが必要なら`execute('')`を追加しておけば事足ります。
デスクトップに常時表示される時計アプリをElectronで作ってみたら驚くほど簡単だった話

# こういうものをつくってみた話です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/11522/45134b8b-3d68-902b-2378-1ad00f2801ea.png)

最近新しい技術に触れていないなーと思って。ツールづくりをする機会が増えてきそうだったので、Electron を触ってみまして。ただチュートリアルをやるのも退屈なので、なにか作ってみたいなーと。その軌跡です。おっさんずラブを見ながらこれを書いています。
普段は C++ 組み込み系おじさんでして、Webっぽいあれこれは素人です（予防線）

# セットアップとハローワールド

いくつか記事を見た感じでは下のページがわかりやすかった。
[最新版で学ぶElectron入門 \- HTML5でPCアプリを開発する利点と手順 \- ICS MEDIA](https://ics.media/entry/7298)

npm で Electron をインストールして、
`npm i -D electron`
> ここでグローバルインストールする派と、グローバル環境汚すな派がいるけど、まあお試しなのでどっちでもいい。自分の体験として困ったことが起きてから考えようかなーというマインド

ページの説明どおりに index.js, index.html やらを書いて、

`npx electron ./src`

でアプリが立ち上がったらハローワールド完了。
npx っていうのはローカルインストールした electron の方を賢く参照してくれる魔法らしい。へー。

# 見た目を整える

テンションを上げるために、まず見た目をそれらしくするところから入ることにしましょう。
ウィンドウを透過したりタイトルバーを消したりしたいですね。

```javascript:index.js
  mainWindow = new BrowserWindow({
    x: 80,
    y: 0,
    width: 400,
    height: 200,
    transparent: true,
    frame: false,
    resizable: false,
    hasShadow: false,
    alwaysOnTop: true,
  });
```

ついでにアプリにクリックとかを奪われないようにしときましょう。

```javascript:index.js
  mainWindow.setIgnoreMouseEvents(true);
```

あとはコンテンツ側も適当に整えます。

```html:index.html
<html>
<head>
  <meta charset="UTF-8">
  <title>desclock</title>
</head>
<body>
  <style type="text/css">
    body{
      margin: 0;
      padding: 0;
      color: rgb(250, 250, 250);
      font-size: 7em;
      font-family: "メイリオ";
    }
  </style>
  00:00
</body>
</html>
```

ここまででだいたいそれっぽい見た目になります。なりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/11522/7e7e8e5d-0f36-ce28-de9f-90513dbc0e89.png)

はい。

# 時計にする

時計を作るところは、まあどう書いたって似たようなもんだろうと思ったので下のページを見てフムフムして拝借した。
[おてがる！JavaScriptでシンプルなデジタル時計をつくってみよう\(Webフォント使用/サイズ自動調整\) \- Qiita](https://qiita.com/ukk0/items/07d69c83be1112f10c29)

```javascript:index.html
  <div id="clo"></div>
  <script type="text/javascript">
    const clock = () => {
      const now = new Date();
      let h = now.getHours();
      let m = now.getMinutes();
      if(h<10) { h = "0" + h; }
      if(m<10) { m = "0" + m; }
      document.getElementById("clo").innerHTML = h + ":" + m;
    };
    setInterval(clock, 10000);
  </script>
```

# できあがりー

![image.png](https://qiita-image-store.s3.amazonaws.com/0/11522/45134b8b-3d68-902b-2378-1ad00f2801ea.png)

https://github.com/masayashi/DesClock
github においておきました。
よかったですね。

# 後記

つくったあとでN番煎じだったことに気づきました。
まあほら、NHKっぽい表記がしたかったし、そのへんで差別化できているということでご勘弁。

- [Electronでデスクトップウィジェットを作るまで \- Qiita](https://qiita.com/SallyAcolyte/items/94ed26ab62b8b32b1b2c)
    - この記事はとてもよくまとまっていてオススメです。タスクトレイへの格納とか、自分のアプリも対応していこうと思います。
- [Electronで簡単なデスクトップ時計アプリを作った:目次 \- Qiita](https://qiita.com/yama-da_/items/37591c1e1f34aa22e235#_reference-10e2e0b475547639a0ef)
    - とても丁寧にまとめられています。早く作りたい方にとっては冗長かもしれませんが、初心者はこちらを参考にするとよいでしょう。
matplotlibでx軸目盛りに画像を挿入する方法

# この記事は

matplotlibで作成したグラフの目盛りに以下のように画像を挿入する方法をメモ．
やり方の一つが[このページ](https://stackoverflow.com/questions/8733558/how-can-i-make-the-xtick-labels-of-a-plot-be-simple-drawings-using-matplotlib)で議論されていたのでやってみました．

![image.png](https://qiita-image-store.s3.amazonaws.com/0/259451/96b0d29e-7948-e8d3-654d-9e7b93193973.png)


# 実行環境

- mac OS Mojave
- Python 3.5.5
- matplotlib 2.2.2


# 目盛りに画像を挿入するには
どうやらBboxImageでバウンディングボックスを作って，そこに画像を当てはめるらしい．


```python
import numpy as np
import os
from matplotlib.image import BboxImage, imread
from matplotlib.transforms import Bbox

# ここの4変数をいじって位置と画像サイズを調節
TICKYPOS = -0.07
Xlower = -0.4
Xupper = Xlower + 0.7
h = 0.07

np.random.seed(seed=999)
data = np.random.random_sample(5)

fig = plt.figure(figsize=(16, 9))
ax = fig.add_subplot(111)
ax.bar(np.arange(len(data)), data)

# x軸ラベルを削除
ax.get_xaxis().set_ticklabels([])

for i in range(5):
    lowerCorner = ax.transData.transform((Xlower + i,TICKYPOS - h))
    upperCorner = ax.transData.transform((Xupper + i,TICKYPOS + h))

    bbox_image = BboxImage(Bbox([[lowerCorner[0], lowerCorner[1]], [upperCorner[0], upperCorner[1]]]), 
                                                   norm = None, 
                                                   origin=None, 
                                                   clip_on=False)
    bbox_image.set_data(imread(os.path.join("./img", "{0:03d}".format(i) + ".png")))
    ax.add_artist(bbox_image)
    
plt.savefig("./img/example.png")
plt.show()
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/259451/96b0d29e-7948-e8d3-654d-9e7b93193973.png)
この方法はデータ数が変化したり，データの数値のスケールが変わるとズレてしまう．
そのときは変数 TICKYPOS, Xlower, Xupper, hをいじって調節しなければならない．．．
もっとやりやすい方法があったら教えていただきたいです．
【#PowerApps】いつの間にか追加されていたラベルコントロールの Role プロパティについて

# 概要
PowerAppsのラベルコントロールの Role プロパティについて軽く調査してみました。

# 結論
今のところ特に意味はない。

# 結局何なのか
PowerAppsアプリはweb上で見るとき当然作ったアプリは HTML 形式になっていますが、そのタグ構造が変化します。
変化内容は以下の通りです。

| 式     |      タグ |  
|:-----------------|------------------:|
| Default             |              div|  
| Heading1           |            h1 |  
| Heading2         |              h2 |  
| Heading3         |                h3 | 
| Heading4         |             h4 | 


# まとめ
普通に PowerApps でアプリを作っている分にはHTMLタグは気にしない部分ですので、今のところ特に気にしなくてもいいと思います。（今後CSSとかが書けるようになったら何かしらの影響が出てくるかもしれませんが）
【Rails】form_forのselectにclassとoption両方を定義したい

##　やりたいこと
form_forのf.selectでclassとoption(:include_blankや:promptなど)を定義したい。

## 参考にした記事
- railsでf.selectにclassを設定する(https://qiita.com/nakanoyoshiki/items/e87a6238f8febbeb208a)

> ソースコードを調べて見ると、option(:include_blankや:prompt)は第3引数に設定し、html_options(classやstyle)は第4引数に設定するようでした。

## 実際のコード

```rb
= f.select :l_category_id, Item.l_category_ids.keys, {prompt: "---"}, {class: "select-default" }
```

## 解説
- :l_category_idが第一引数
- Item.l_category_ids.keysが第二引数
- {prompt: "---"}  が第三引数
- {class: "select-default"}が第三引数

　promptとclassを{}で囲む必要があった。
APP DOJO #33参加メモ

Firebase summit

松館 大輝さん (@d_date )

19:35-20:05 Firebase概要とFirebase Summit2018のポイント
20:05-20:15 Q&A　セッション
20:15-20:30 Cloud Functions for Firebase

FOLIO
Google Playベスト・オブ2018
アプリ隠れた名作部門大賞！！

Mikeの動画。

#appdojojp
Crashlytics ←入れたい

* Build better apps 
* Improve app quality
* Grow your business

150万のアプリで作られてる

* Summitのアップデート内容を中心に
* そのサービスの基礎から
* ユースケースまでをお話します。

# ML Kit
テキスト認識
顔認識
バーコード認識
画像のラベリング

on device, on cloud/cloud vision api

使える機能に佐賀ある
料金かかるかどうか
on cloudのほうが制度いい

テキスト認識（OCR）　○（Latin文字のみ）　◎
顔認識　○
バーコード ○
画像ラベリング　○ ◎
ランドマーク検出　- ○
カスタムモデル - ○

# Cloud Firestore
* NoSQL Database
* Serverless
* データのリアルタイム同期
* オフラインでも使える
* 無限にスケールする
* セキュリティルール
* etc・・・

説明はなかなか大変なので、サンプルやドキュメント見てね！
ネットにも記事がある。

New Region(Europe / Asia）　COMINGS SOON！！

# Local Emulator
* セキュリティルールのUnit Test
* テストレポートの作成

詳しくはし・・・

# Cloud Functions
https://firebase.google.com/products/functions/?hl=ja
* Cloud Firestore
* Firebase Realtime Database 
* Cloud Storage
* Firebase authentication
* Firebase Crashlytics
* Firebase Remote config
* etc...

https://github.com/firebase/functions-samples
↑いろんなサンプルがある

Remote configを使ってFCMでサイレントプッシュを送って、アプリ側でUIの更新をする

Cloud Builds - Google製のCIサービス
安全にDeployする

# Google Analytics for Firebase
https://firebase.google.com/products/analytics/?hl=ja
2019年にサポート終了。
Googleアナリティクス開発者サービスSDKの終了
従量課金から無料になる
BigQueryでのエキスポート時は従量課金制になる

データ収集モデル|Event Base｜ScreenView/ Page View base|
料金|無料|従量課金|
データ数|無制限|あり
SLA　☓　｜　○
統合　iOS/Androidのみ　iOS/Android+Web
スクリーンの送信　○　｜　◎
イベントの送信　○　｜　○
などなど

* Audience Exclusions
* Membership Duration
* Dynamic Analytics 

Firebase demo project

# Google BigQuery
* Google Analytics
* Firebase Crashlytic
* Firebase Predictions
    * Google Analytics for firebaseのデータをもとに
    * 離脱しそうなユーザーなど、データ予測ができる
    * 離脱しそうなユーザー（Chun）に対してのみプッシュを送るとかできる
    * ゆーざーごとの予測データをExportできる
        * どの国のユーザーが一番離脱しやすいか？
        * どのチャンネルで一番課金されそうか
* Firebase Cloud Messaging
    * Android/iOSメッセージ送信
    * 端末グループに送信
    * トピックに送信
    * アプリごとのメッセージ送信数（bigQueryすると）
    * コンソールから送信されたメッセージ数
    * 特定のメッセージのレイテンシ（待ち時間）
* Firebase A/B Testing

# 困ったときは
* ドキュメントを読む
* https://www.youtube.com/user/Firebase

これが一番いい！らしい

* https://firebase.asia/
    * FJUBー日本Firebaseユーザーグループ
    * 月イチでMeetupしてる

# 参加者が利用しているFirebaseのツールアンケート
![image.png](https://qiita-image-store.s3.amazonaws.com/0/151973/ce7464ce-ead5-cbf2-66ef-d28e70f49fc4.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/151973/6b703fe7-5d8f-eaa5-254b-c6f349c88c16.png)

# Mikeの動画
Cloud Functions GitHub

Cloud build
yamlで以下を順番に定義
1. clone
2. fetch
3. install cloud-builders
4. deploy

メモなので、一旦この状態で投稿しておきます！
jsで画面を切り替えを操作する

##やりたいこと
下記画面のようなボタンをクリックすることで画面を切り替える。

<img width="217" alt="スクリーンショット 2019-01-22 20.05.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/347151/c2072f31-d4f5-ad2c-a44c-886b160da114.png">

##記述内容
以下のようにファイルを準備します。
なお、htmlファイルはhamlを用いて記述しています。

```haml:index.html.haml
  .header
    %ul.switch__button
      %li.select{href: '.hot__notes'}
        %p 人気
      %li{href: '.new__notes'}
        %p 新着
  .home
    .hot__notes.tab
      = render partial: "hot_note", collection: @hot_notes
    .new__notes.tab
      = render partial: "new_note", collection: @new_notes
```

```scss:note_view.scss
 .select {
   background-color: #e6e6e6;
 }

 .new__notes {
   display: none;
 }
  
```

```js:switch-button.js
$(document).on("turbolinks:load", function(){
  $('.switch__button li').click(function() {
    $(".tab").hide();
    $($(this).attr("href")).show();
    $('.select').removeClass('select');
    $(this).addClass('select');
    return false;
  });
});
  
```

これによってliタグがクリックされると一度切り替わる画面（この場合クラス名tab)が一度hideされ、`$(this).attr("href")`で取り出したliタグの属性をクラス名に設定することでshowさせることができます。
DBがなかったら？DBのない世界をふと考えてみる。

# あらすじ

以前、YouTubeの動画で「メールのない世界があって、そこで社内の人間にメールを一斉送信しようとして、たくさんの忍者が暗躍して社内の人間全員に手紙を手渡しする」という動画がやってました。
それがすごく印象に残っていて、ふと「じゃあDBがなかったら？どんな世界になるか？」をふと考えてみることにしました。

# SNS編

DBがないとどうなるか。。
例えばSNSの場合で想像してみました。

## 利用するたびに毎回会員登録しないといけない

SNSを利用するには会員登録が必須ですが、登録した情報が保存されないので、
利用するたびに毎回会員登録しないといけなくなります。

## 他の人の投稿内容が見えない

他の人が投稿した内容もすべてDBで管理され、シェアされますが、
DBがないためシェア自体もされません。

## そもそもSNSでなくなる

上記で挙げた2点から、そもそもSNSとして成り立たないことがわかります。

# 図書管理システムの開発者編

自分がもし図書館の蔵書管理システムの開発者だったらどうなるか、開発者の立場になって想像してみました。

## 新しく本が追加されたり、削除されたとき、すべての端末で更新＆同期作業が必要

DBがないので、本の情報は定数としてテキストファイルなどに管理しておきます。
ところが、そのファイルは各端末ごとにそれぞれ独立して管理されているので、新しく本が追加されたり、削除されたときには、すべての端末で更新＆同期作業を行わないといけません。
そして、大きな図書館にもなれば、それが毎日のように発生します。
そのため、作業には多くの人を導入し、時間をかけてやらないといけないため、非常に憂鬱です。。

# みなさんも想像してみましょう！

他にもDBがないことでどうなるか、みなさんも想像してみてはいかがでしょうか？
DBのありがたみがわかるはずです。
WEBサイト構築

#挫折
前回、チュートリアルを片っ端からやっていこうと思いましたが、量が多すぎたので挫折しました。

#今回から実際にシステムを構築していきながら、各サービスの使い方を習得してしていこうと思います。

![DynamoDB を使用して、Node.js アプリケーションを Elastic Beanstalk にデプロイする](https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/nodejs-dynamodb-tutorial.html)
を実施していきます。

前提条件
UnxUtils をインストールするには
初めて環境変数を設定しました。
ユーザー環境変数のPathを編集し、新規で下記のパスを追加しました。
C:\Program Files (x86)\UnxUtils\usr\local\wbin
Ubuntu 16.04 x64 に .NET Core SDK 2.2 をインストールする

#目的
Ubuntu 16.04 x64 に .NET Core SDK 2.2 をインストールしてみる
18.04, 20.04 はこちら
[Ubuntu 18.04 に .NET Core SDK 3.1 をインストールする](https://qiita.com/tabizou/items/f47983d1d327e6c5d5e1)
[Ubuntu 20.04 に .NET Core SDK 3.1 をインストールする](https://qiita.com/tabizou/items/d9af326ede9d35d03c68)
##MSのkeyとproduct repositoryを登録する
適当な dir で
$ wget -q https://packages.microsoft.com/config/ubuntu/16.04/packages-microsoft-prod.deb
$ sudo dpkg -i packages-microsoft-prod.deb
$ ls /etc/apt/\*/\*  (以下が追加される)
 /etc/apt/sources.list.d/microsoft-prod.list
 /etc/apt/trusted.gpg.d/microsoft-prod.gpg
##dotnet-sdkをインストールする
$ sudo apt-get install apt-transport-https
$ sudo apt-get update
$ sudo apt-get install dotnet-sdk-2.2
##インストール後の確認
#
```
$ dotnet --info
.NET Core SDK (global.json を反映):
 Version:   2.2.103
 Commit:    8edbc2570a

ランタイム環境:
 OS Name:     ubuntu
 OS Version:  16.04
 OS Platform: Linux
 RID:         ubuntu.16.04-x64
 Base Path:   /usr/share/dotnet/sdk/2.2.103/

Host (useful for support):
  Version: 2.2.1
  Commit:  878dd11e62

.NET Core SDKs installed:
  2.2.103 [/usr/share/dotnet/sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.2.1 [/usr/share/dotnet/shared/Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.2.1 [/usr/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.2.1 [/usr/share/dotnet/shared/Microsoft.NETCore.App]

To install additional .NET Core runtimes or SDKs:
  https://aka.ms/dotnet-download
```
##サンプルを試してみる
$ sudo apt install nuget
$ mkdir /path/to/samp001
$ cd samp001
$ dotnet new mvc -au None
$ dotnet publish -c Release -r ubuntu.16.04-x64 samp001.csproj
$ dotnet ./bin/Release/netcoreapp2.2/ubuntu.16.04-x64/publish/samp001.dll
～
Now listening on: http://localhost:5000
Now listening on: https://localhost:5001
Application started. Press Ctrl+C to shut down.

ブラウザで https://localhost:5001 にアクセスして動作を確認する
##参考にしたサイトはこちら
[Install .NET Core SDK on Linux Ubuntu 16.04 x64](https://dotnet.microsoft.com/download/linux-package-manager/ubuntu16-04/sdk-current)
[Nginx 搭載の Linux で ASP.NET Core をホストする](https://qiita.com/yniji/items/48ede6a3f920ba26ff59)
[.NET Core で dll ではなく、exe を作りたい](http://vbegg.webcrow.jp/Linux/HowToBuildForExe/HowToBuildForExe.html)
[Get started with ASP.NET Core](https://docs.microsoft.com/ja-jp/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-2.1&tabs=aspnetcore2x)
[dotnet publish](https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-publish?tabs=netcore2x)
repoのインストール　repo install

## 目的

・linux環境にrepoをインストールする

## この記事のターゲット

・linuxマシンにrepoを入れたい人
・職場で冷たい上司に「repo入れといて」だけ言われた人

## 実施方法

ターミナルを開いて下記コマンドを実行するだけでいい

```shell:repo.sh
$ cd
$ mkdir ~/bin
$ PATH=~/bin:$PATH 
$ curl https://storage.googleapis.com/git-repo-downloads/repo > ~/bin/repo
$ chmod a+x ~/bin/repo
```
今回内容が少なめなのでまとめは無し
UNDOとREDOを初心者向けに解説

UNDOとREDOってなんだよ！と思っている初学者向けに書き記します。

#概要
UNDOログとは、実行した処理を取り消し、処理前に戻る（ロールバック）の用途に使う。

REDOログとは、実行した処理を記録しておき、障害発生時に障害発生前まで処理をやり直す（ロールフォワード）用途に使う。

#何が違うの？
UNDOはある時点までの状態を「丸っとバックアップ」しています。つまり容量がでかいです。頻繁にバックアップを取っているとパフォーマンスの悪化につながります。
しかしREDOはコマンド処理の文のみを記録しているので容量は食いません。

二つを組み合わせると、パフォーマンスの悪化を抑えつつパフォーマンス障害発生直前までの状態を復旧させることができます。


例えば、毎日0:00にバックアップを取っています。
20:00に障害が起きた場合、もしUNDOしかなければ0:00-19:59の間の更新は消えてしまいますよね？
だからといって頻繁に丸ごとバックアップを取るなんて効率が悪すぎると思いませんか？
そこで役に立つのがREDOです。
0:00からの更新処理の、使用したコマンドのみを記録していたとしましょう。
20:00に障害が発生したとしても、0:00までのUNDO+REDOログに記録していたコマンドを実行しなおせば
19:59までの内容を低コストで復元できますよね。なんて賢い仕組みなんでしょうか！


#あのJ〇J〇のスタンドに例えると
キラーク〇ーン　第3の爆弾　パイツァダ〇トとか、マ〇ダムとかが結構似てると思いませんか？

UNDOは障害が発生したら障害発生前に戻せるんですよ、もはやパイツァダ〇トですよねこんなの。
そしてREDOで同じ運命を繰り返すことができるんですよ。とはいえ、障害という運命の直前でやめてほしいんですけどね。

マ〇ダムも結構似てますね、時間も度される前のこと覚えてますし、同じ動作を再現することもできるでしょう。


以上でこの記事は終わりですが、こんな感じで知ってることと結びつけるのもおすすめですよ。
漫画とかで見る強い能力って現実では思わぬところで使わてるんだなぁっていう感じで！

読んでいただきありがとうございました。
rails でページを作成する


LPで今までは中身のコーディングだけだったものの、自分で初めてページを生成することになり少しrailsについて勉強。


## railsでページを表示するために
* view
* Controller
* アクション
* routing

上記4つの作成が必要。

## まず最初に
terminalで下記コマンドを実行

```
rails generate controller コントローラ名
```
色々ファイルが生成される。

##viewの作成
ブラウザからリクエストが飛んできてルーティング→コントローラーが受ける。
その後どのviewを表示させるのかコントローラが決め、表示させる。
viewはviewsフォルダに置かれている。html,erbが多い。
app/viewsの中に格納されている。
ファイル名は**(アクション名).html.erb」**とする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/279361/9557a830-4c7a-8da3-31cf-2dbdad22daf0.png)

ファイル内にテストで書いてみる

```index.html.erb
<div>
 hello world!
</div>
```

##Controllerの作成

Controllerファイルはapp/controllersの中に格納されている。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/279361/566537e1-ee4f-07c4-2d8b-260e7281225f.png)

##アクションの作成
Railsアプリケーションではコントローラはクラスとして定義されたが、
アクションはコントローラクラスの中のメソッドとして定義される。

```hello_controlloer.rb
class HelloController < ApplicationController
  def index
  end
end
```


##routingの設定
ルーティングはURLのリクエストが飛んだ際にどのコントローラのどのアクションを行うかを決める箇所。
config/routes.rbが対応箇所になる。

例

```routes.rb
Rails.application.routes.draw do
 get '/hello' to: 'hello#index'
end
# get URL => "コントローラ名#アクション名"
```

これで
`http://localhost:3000/hello`
![image.png](https://qiita-image-store.s3.amazonaws.com/0/279361/d497a869-170d-6997-cd3b-5cca23317353.png)

で開くとページの確認ができる！
AWSの基本的なサービス 

AWS初心者向けのAWSサービスの概要説明です。

これを読んでもAWSを利用できるようにはなりませんが、だいたいどういうことができるのかをイメージできるかと思います。

| サービス名 | 概要 |
| ---------- | ---- |
|EC2|正式名称：Elastic Compute Cloud<br>料金：スペック×起動時間 + HDD(SSD)利用量 + OSライセンス料　[詳細](https://aws.amazon.com/jp/ec2/pricing/on-demand/)<br><br>仮想マシンを提供してくれるサービス。好きなOSを入れて好きなことができる。|
|S3|正式名称：Simple Storage Service<br>料金：保存データ量 + get、put、post、deleteの回数　[詳細](https://aws.amazon.com/jp/s3/pricing/)<br><br>httpをインターフェースとするストレージサービス。<br>ファイルを置いておけるだけでなく、http/httpsでの公開もできる便利サービス。<br>静的ファイルだけならWEBサーバーいらず。|
|ECS|正式名称：Elastic Container Service<br>料金：EC2の料金またはFargateの料金のみ。<br><br>Dockerコンテナーを提供してくれるサービス。<br>起動場所として、自分で作成したEC2上かFargateを選択できる。|
|Fargate|料金：[詳細](https://aws.amazon.com/jp/fargate/pricing/)<br><br>ECSを起動するための共用基盤。結構高い。|
|Lambda|料金：実行回数 + 実行時間　[詳細](https://aws.amazon.com/jp/lambda/pricing/)<br><br>サーバーレスといわれるもので、プログラムを実行してくれるサービス。<br>Javascript(node)、python、Java、Rubyなど色々な言語で利用できる。|
|RDS|正式名称：Relational Database Service<br>料金：EC2の料金 + ライセンス料（Oracle、SQLServer、Aurora）<br><br>RDBを提供してくれるサービスで、Oracle、MySQL、PostgreSQLなどの<br>有名なRDBはほぼ利用できる。<br>自前で構築するのにくらべ、以下のようなメリットがある。<br>・OSチューニング不要（最適化されているかはわからない）<br>・ RDBのチューニングがほぼ不要（最適化されているかはわからない）<br>・冗長構成が簡単にくめる<br>・バックアップが簡単に行える<br>・冗長構成を組んだ場合、自動でフェールオーバーを行ってくれる|
|DynamoDB|料金：EC2の料金のみ<br><br>分散データベースサービス。<br>スケールアウトすることでデータが増えても高速に処理が行える。<br>基本的にKVSは運用が大変だが、DynamoDBは運用いらず。|
|ElastiCache|料金：EC2の料金のみ<br><br>オンメモリのデータストアサービス。memcacheとRedisが選択できる。<br>自前で構築するのに比べ、以下のようなメリットがある。<br><br>・OSのチューニング不要（最適化されているかはわからない）<br>・アプリケーションのチューニングが不要（最適化されているかはわからない）<br>・クラスターを簡単に組める<br>・バックアップが簡単に行える<br>・レプリカが存在する場合、自動でフェールオーバーを行ってくれる|
JavaScript入門2~オブジェクト･イベント~

##オブジェクトとは##
###まずはざっくりと###
ざっくり言うと,性質と機能を持っている物で,複数のデータを一つにまとめるために使うデータです.
その性質をプロパティ,機能をメソッドといい下の表のようになります.

|名前|説明|
|:--|:--|
|プロパティ|オブジェクトの状態を表す|
|メソッド|オブジェクトができる機能,関数|

JavaScriptで扱うオブジェクトにはdocumentオブジェクトやwindowオブジェクトがあります.
~~他の言語で言うクラスみたいな解釈なんだけどあってるのかな？~~

このオブジェクトを使って文字を置き換えたり,アラートをだしたりなんやかんやします.

###オブジェクトの初期化###
オブジェクトの初期化をするときはnew演算子を使います.
このnew演算子でオブジェクトを初期化することで元となるオブジェクトのコピーを生成でき,晴れてオブジェクトが使用できるようになります.やったね.
それっぽく言うと,オブジェクトのインスタンスを生成するってやつですかね.
まぁだいたい下の感じで生成します.

```
var お名前 = new オブジェクト名();
```

こうしてオブジェクトを生成することでそのオブジェクトのプロパティ(性質)を参照したり,メソッド(機能)を使用できます.下のような感じで

```
お名前.プロパティ名
お名前.メソッド名(引数);
```

###初期化の可否###

オブジェクトには初期化するものとしないものがあります.
区別は下の通りです.


|初期化する|複数のオブジェクトを作れる|
|:--|:--|
|初期化しない|複数のオブジェクトをつくれない|

ちなみに,windowオブジェクトはブラウザウィンドを指しており,documentオブジェクトは表示しているhtmlそのものを指し,どれも1つしかので初期化はいりません.

##イベント##
リンクやボタンをクリックしたり,ページの読み込みが完了したときなどに発生するのがイベントです.
このイベントが発生したタイミングで処理をすることで自分がやりたいことができます.
イベントが発生したときに処理をするためには**イベント属性にファンクションを代入し,そこに処理を書きます.**だいたい次のような感じです.

```
オブジェクト.イベント属性 = function(){
ここに処理を書く
};
```

どんなイベント属性があるかは[こちら](https://www.tagindex.com/html_tag/basic/event.html)を参考にしてください.
tensorboardを実行すると [コマンドが見つかりません] となる

### 環境
- OS: Ubuntu16.04  
- Python3: python3.5.2  
- TensorFlow: 1.12.0  
- **anacondaは使用していない**  
- apt-getコマンドでpip3をインストール
- その後pip3コマンドでTensorFlowをインストールしていた気がする(うろ覚え)  

### トラブル
```
$ tensorboard --logdir ./なんとか
```
を実行したところ、「コマンドが見つかりません」と怒られた

### 解決方法  
 再インストールで直った。  

``` 
$ sudo pip3 uninstall tensorflow
```
問いかけに -y でアンインストールした後、

```
$ sudo pip3 install tensorflow
```   

実は最初に一回これをやった際、protobufの互換性がない、みたいな警告が出たのでこれではダメだなと思った。
しかし、エラーメッセージを確認するために同じことをもう一度やったら、二回目はなんの警告もなくインストールに成功した。
正直良くわからないが私の場合はこれで解決しました。
create-react-appがnpm / yarn の".cache"配下のファイルがないなどでエラーとなる場合の対処法

久しぶりにReact触る必要があって、`create-react-app`しようとしたら、何か失敗しました。

```console
error An unexpected error occurred: "ENOENT: no such file or directory, 
lstat '/home/username/.cache/yarn/v1/npm-external-editor-3.0.3-
5866db29a97826dbe4bf3afd24070ead9ea43a27/main/errors/CreateFileError.js'".
```

こんな感じのエラーが出てきました。

キャッシュの問題で、キャッシュを削除すれば直ります。

```console
npm cache clean
// yarnの場合は
yarn cache clean
```

あまりドキュメントもなかったので（エラー文読めば察せるからだろうけど）、一応残しておきます。誰かの参考になれば。
Kotlin Fest 2018に参加しました

下書きのまま眠っていたので、一旦公開しておきます。。

# [Kotlin Fest 2018](https://kotlin.connpass.com/event/91666/)
`国内初 1day Kotlinカンファレンス 「Kotlinを愛でる」`です。
各セッションの資料などなどまとめていきます。

## タイムテーブル
10:00 開場
11:00 開始/オープニングセッション
12:00-13:30 ランチ休憩
13:30-19:00 セッション/LT大会
19:00 懇親会

## ホールA
### 13:30-14:15
「Kotlin で改善する Android アプリの品質」： @yanzm さん
https://speakerdeck.com/yanzm/kotlinfest

### 14:30-15:15
「Kotlinアプリのリファクタリングポイント」 @oxsoft さん
https://www.slideshare.net/RecruitLifestyle/refactoring-point-of-kotlin-application

### 15:30-16:15
「Kotlin linter」： @kgmyshin さん
資料

### 16:45-17:30
「Kotlinで愛でるMicroservices」： @stormcat24 さん
資料

### 17:45-18:30
「How to Kontribute (v4 JP)」： @shiraji さん

## ホールB
### 13:30-14:15
「Kotlinもう一歩」：[森洋之](https://twitter.com/moridroid)さん
https://speakerdeck.com/kobitokaba/kotlinmou-bu

### 14:30-15:15
「How to Test Server-side Kotlin」： @suusan2go さん・ @maeharin さん
https://speakerdeck.com/maeharin/how-to-test-server-side-kotlin-number-kotlinfest

### 15:30-16:15
「start from Convert to Kotlin」 @mochico さん
https://speakerdeck.com/mochico/start-from-convert-to-kotlin

### 16:45-17:30
「Kotlin コルーチンを理解しよう」 @sys1yagi さん
https://speakerdeck.com/sys1yagi/kotlin-korutinwo-li-jie-siyou

### 17:45-18:30
公募によるLT大会
parcelだけでAWS Lambda向けのTypeScriptをビルドする

AWS Lambda FunctionでTypeScriptを使いたい場合、通常Serverless frameworkやapexを使うのが一般的だろう。
しかし、ちょこっと使いたいだけの場合に重苦しい。

もしかしたらParcelだけでいけるのでは？と思ったらいけたのでメモ


# 手順

まずはTypeScriptインストール

```
yarn add -D typescript
```

parcelも入れる。zip化するとアップロードも楽になるのでpluginも入れる

```
yarn add -D parcel parcel-plugin-zip
```

そしてfunction本体。今回は`handler.ts`という名前にしておく

```typescript
export const handler = async (): Promise<any> => {
  console.log('Hello World!');
  return {};
}
```

これだけでもうビルドはできる。下記のようなコマンドだ

```
$ yarn parcel build handler.ts --target=node --global=handler -o index.js --bundle-node-modules --no-source-maps
```

それぞれ引数は下記のようなことをしている

* `--target=node` で対象をnodeに
* `--bundle-node-modules`でnode_modulesからの読み込み物を追加
* sourcemapは不要なので`--no-source-map`
* `-o index.js`で出漁対象をindex.jsにへこう
* `--global=handler` でhandlerに外からアクセスできる形でビルド（ちゃんと検証してないけどもしかしたら不要かも？）


これを`package.json`に仕掛ければおしまい

```json
"scripts": {
  "build": "yarn parcel build handler.ts --target=node --global=handler -o index.js --bundle-node-modules --no-source-maps",
  "deploy:aws": "aws lambda update-function-code --function-name my-special-function --zip-file fileb://./dist.zip --region=ap-northeast-1",
  "deploy": "yarn build; yarn deploy:aws",
}
```

上記では`aws`コマンドを使ってコードをアップロードするところまでやっている（ここについては今回説明は割愛する）

あとは`yarn deploy`でビルドまでできる

# 参考

* https://scotch.io/@nwayve/how-to-build-a-lambda-function-in-typescript
* https://github.com/parcel-bundler/parcel/issues/192#issuecomment-366032738
WSLのVimでヤンクしたテキストをクリップボードにコピーする(イベント駆動)

WSLのVimを本格的に利用するようになったら、Windowsのクリップボードとのやり取りがちょっと面倒だったので頑張ってみる。

# クリップボードへのコピー
Vim 8.0.1394以降ではTextYankPostイベントでレジスタの変更が検知できるのでこれを利用してヤンクしたテキストをクリップボードにコピーするようにしてみる。
ディストリビューションによってはVimのバージョンによって使えないのが玉に瑕かも。

クリップボードへのコピーはclip.exeか[win32yank](https://github.com/equalsraf/win32yank)を利用する。

```vim:.vimrc
augroup Yank
  autocmd!
  autocmd TextYankPost * :call system('win32yank.exe -i', @")
augroup END
```

# クリップボードからの貼り付け
現状クリップボードからの貼り付けは `Shift + Insert` で行なって、Vimのレジスタと明示的に使い分けているが透過的に行いたい場合は `p` を再定義するといい？
【OSS貢献】初心者向けのGitHub Issueに貼られるラベルまとめ

OSS活動を始めようと思ったものの、あまりの敷居の高さに挫折したことはありませんか？
そんなときは、初心者向けのIssueから手をつけてみるといいかもしません。

以下の表は、初心者向けのIssueに貼られるラベルをまとめたものです。

| ラベル名       |       意味 | 
|:-----------------|:------------------|
| [good first issue](https://github.com/search?q=label%3A%22good+first+issue%22)             |              最初のコントリビューター向けに良いIssue | 
| [first-timers-only](https://github.com/search?q=label%3Afirst-timers-only)           |            初めての方限定 |
| [beginner](https://github.com/search?q=label%3Abeginner)             |    初心者 | 
| [easy](https://github.com/search?q=label%3Aeasy)              |  簡単 | 
|[difficulty:easy](https://github.com/search?q=label%3Adifficulty%3Aeasy)|難易度：簡単|

*ラベル名をクリックするとGitHubでの検索結果に飛びます*

GitHubでこれらのラベル名が貼られたIssueを検索して、自分にフィットするものを見つけてみましょう。

GitHubでのIssueの検索方法は、以下の記事が詳しいです。
[OSS 貢献における GitHub の Issue 探しについて手始めに調べてみた](https://qiita.com/gotchane/items/69c332b2e67b9e20c378)

# 参考文献
Software Design 2018年10月号(技術評論社)
[OSS 貢献における GitHub の Issue 探しについて手始めに調べてみた](https://qiita.com/gotchane/items/69c332b2e67b9e20c378)
[新米プログラマが「オープンソースプロジェクト」で貢献できること。参加しちゃっていいんです！](https://www.seleqt.net/programming/open-source-project-for-junior-prgrammers/)
[Github Help Wanted](http://github-help-wanted.com)
Qiitaの画像アップロード制限について

初投稿だと2MBの制限がある
との記事を見かけたが
本アカウントは過去に何本か記事を投稿しているにもかかわらず、画像のアップロードができない
(Bad Requestとなる）

この初投稿が月内の初投稿という条件があるかもしれないので
とりあえず本記事を投稿して確認してみる、
JavaScript入門~軽い導入編~

##JavaScriptって何##
簡単に言うと,ブラウザやHTMLページを操作するプログラミング言語.

##Sctiptって何?##
Wikipediaによると
>**スクリプト言語**（スクリプトげんご、英語: scripting language）とは、アプリケーションソフトウェアを作成するための簡易的なプログラミング言語の一種を指す。
>**スクリプト**（英語で「台本・脚本」の意味）とは、その簡易的な言語記述方法を指してそう呼ばれるようになった。 

だそうです.へぇ～

##html,css,JavaScriptの役割をざっくりと##
| 言語       |  役割 |   
|:----------|:-----------------|
| html      |ページのコンテンツを記述する       | 
| css       |デザインをする   | 
| JavaScript|機能を付け加える,ブラウザを操作する|   

##どこに書くのか##

###1.htmlに直接###

htmlのbodyタグのあたりに書きます.
記述するときは**script**タグで挟みます

```
<body>
・・・
<script>
ここに書く
</script>
</body>
```

###2.JavaScriptファイルを読み込むかたち###

htmlに別のところで書いたJavaScriptファイルを読み込ませます.
scriptタグに**src**属性を追加します.
外部JavaScriptファイルの拡張子は[.js]です.

```
<body>
・・・
<script　src="読み込むファイルのパス"></script>
</body>
```

##JavaScriptの大文字・小文字##
JavaScriptは大文字・小文字を区別します.

##命名規則##
[こちらのサイトを参考にしましょう.(特に僕に対して)](http://snowdream.github.io/javascript-style-guide/javascript-style-guide/jp/naming-conventions.html)
【解決済み】Win10でローカルユーザーアカウント追加出来ない……

申し訳ございません。
本投稿はメモです。

google先生に問い合わせた所

Windows 10 でローカルのユーザー アカウントまたは管理者アカウントを作成する
`https://support.microsoft.com/ja-jp/help/4026923/windows-10-create-a-local-user-or-administrator-account`
```
[スタート]  ボタンを選択し、[設定]  > [アカウント]  > [家族とその他のユーザー] > [その他のユーザーをこの PC に追加] の順に選択します (Windows 10 のエディションによっては、[家族とその他のユーザー] ではなく [他のユーザー] が表示される場合があります)。
ページの下部で、[このユーザーのサインイン情報がありません] を選択し、次のページの下部で [Microsoft アカウントを持たないユーザーを追加する] を選択します。
ユーザー名、パスワード、パスワードのヒントを入力し、[次へ] を選択します。注: Windows 10 Version 1803 以降を使っている場合は、ヒントの代わりにセキュリティの質問をローカル アカウントに追加することで、パスワードを忘れたときにリセットできるようになります。Windows 10 のバージョンを確認します。
```
とあるのですが
[家族とその他のユーザー] > [その他のユーザーをこの PC に追加] の順に選択します (Windows 10 のエディションによっては、[家族とその他のユーザー] ではなく [他のユーザー] が表示される場合があります)。

がありません……

どうやって追加するのか伺ってよろしいでしょうか？

コントロールパネル＞ユーザーアカウント＞ユーザーアカウント＞PC設定でアカウントを変更

と思いましたが
←のメニューに他のユーザーってありましたっ

解決ぽ
マルチリージョン展開のAPIをRoute 53をカスタムドメインでGeo Routingしてアクセスしてみる

##はじめに

マルチリージョン展開のAPI GatewayのAPIをカスタムドメインでGeoRoutingしてアクセスしてみたメモです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/7230743c-aeab-bdaa-39cf-a792cc44ba88.png)


##やってみる
複数リージョンでAPI GatewayでAPIを作成する。今回は、TokyoとOhioで作成した。
「/」にGetメソッドを作成し、Lambda Proxyを登録する。
Lambdaは、リージョンを返すだけのシンプルなもの。

```python
import json

def lambda_handler(event, context):
    # TODO implement
    return {
        'statusCode': 200,
        'body': json.dumps('Hello from Tokyo or Ohio!')
    }
```

###ACMででPublic証明書を発行　※TokyoとOhioで実施する

Request Certificateをクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/806dc88f-ad54-3611-373e-8dd1e8c1bd2e.png)

Request a public certificateをクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/c3d84ec3-aaf4-bfaf-d391-7e67566bc574.png)

domeinを指定する。例：api.example.com

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/f1900942-ae6b-f9e2-9ee0-de5dc0cd80c2.png)

DNS Validationをクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/761e8b58-7194-c1d3-8444-ca01164dd933.png)

Review実施する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/13428db7-8f25-89da-8b7c-6324544ebd17.png)

ValidationでCreate record in Route 53をクリックしてContinueをクリック。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/8d9aaa15-972f-f869-10d5-c21a8d2119b5.png)

しばらく待ってIssuedになるまで待つ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/d8a3166e-67b8-6ce3-353c-15405a363fb1.png)

### API Gatewayでカスタムドメインを設定　※TokyoとOhioで実施する

Create Custom Domain Nameをクリックする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/6c32ad31-2b62-f8c9-d0a9-430e113781fd.png)

Domain Nameを入力 例：api.example.com
HTTPを選択
先程作成したACM証明書を選択
Regionalを選択
※Target Domain Nameをメモしておく。後ほど使用する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/9e259256-1b93-cd82-400e-7872238f4391.png)

Editをクリックする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/78bb7d3c-413e-c185-3005-918dd0a3df00.png)

Add mappingをクリックする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/700d1782-81ed-f844-f588-573b8523a901.png)

APIとステージを選択してSaveをクリックする。
Pathはオプション。カスタムドメイン/PathといったURLでアクセスできるようになる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/3360a19e-730b-879a-1440-2e1dac86d14c.png)

###Route53の設定　※TokyoとOhioの２レコード追加する

ドメインにAliasレコードを追加する。Alias Targetに先程のTarget Domain Nameを選択する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/665a2ce0-659c-a488-993d-ae5d28048f6d.png)


Route PolicyでGeolocationを選択して、Locationを選択しSet IDを入力する。Set IDは任意の文字列でOK。

###確認

東京で確認

![image.png](https://qiita-image-store.s3.amazonaws.com/0/78184/775f1711-fd18-ced5-b6a6-bdb2ebb488d0.png)


オハイオのEC2から確認

```
$ curl https://***.****.com/
"Hello from Ohio!"
```

##お約束
投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。
docker-composeでlaravel duskを動かす

### 前提
* composer を使って laravel/dusk をインストール済み。
* ServiceProvider に Dusk を登録済み。
* php artisan dusk:install を実行済み

こちらを参考にhttps://qiita.com/amymd/items/0a5f2705e29972d0d22e

コンテナにgoogle chromeをインストールしないと以下のようなエラーが出てしまう。

```
Facebook\WebDriver\Exception\UnknownServerException: unknown error: cannot find Chrome binary
```

### seleniumコンテナを使うと簡単

```yml:docker-compose.yml
version: '2'
services:
  web:
    //省略

  db:
    //省略

  selenium:
    image: selenium/standalone-chrome
    ports:
      - 4444:4444
```

baseUrlをhttp://【webサーバーのサービス名】に変更
ここでは【web】です

```yml:docker-compose.yml
version: '2'
services:
  web: // ←　これ
```

### seleniumを使用するので以下のように変更

```php:tests\DuskTestCase.php

// baseUrlを上書きする
// これを設定しないとchromeが「Site can't be reached」となり何をやってもエラーになってしまう。
protected function baseUrl()
{
     return 'http://web';
}


public static function prepare()
{
    //　コメントアウト static::startChromeDriver();
}

//省略

protected function driver()
{
     return RemoteWebDriver::create(
        'http://selenium:4444/wd/hub', DesiredCapabilities::chrome()
      );
}
```

### これで成功しました

```
php artisan exec web bash php artisan dusk
```
バイナリファイルをCSV形式に変換する

とっても荒削りの状態ですね。。。

入力ファイル名はコマンドラインから、出力は標準出力へ。

```c:bin2csv.c
#include <stdio.h>
#include <stdint.h>

#define		FIELD_COUNT		(12)
#define		LINE_MAXIMUM	(1000000)

static void bin2csv32(FILE *fin, int max_field, int max_line)
{
	int line = 0;
	int i = max_field;
	for (;;) {
		uint32_t data;
		size_t len = fread(&data, 1, sizeof(data), fin);
		if (sizeof(data) == len) {
			fprintf(stdout, "%d", data);
			if (--i) {
				fprintf(stdout, ",");
			}
			else {
				i = max_field;
				fprintf(stdout, "\n");
				if (++line >= max_line) {
					// LINE OVER
					break;
				}
			}
		}
		else {
			// EOF
			break;
		}
	}
}

int main(int argc, char* argv[])
{
	FILE *fin;
	if (argc != 2) {
		fprintf(stderr, "Usage : %s inputFileName\n", argv[0]);
		return 255;
	}
	if (NULL != (fin = fopen((const char *)argv[1], "rb"))) {
		bin2csv32(fin, FIELD_COUNT, LINE_MAXIMUM);
		fclose(fin);
	}
	else {
		fprintf(stderr, "File not found. (%s)\n", argv[1]);
	}

	return 0;
}

```