OmniAICreator/Qiita-1.07M huggingface dataset:
競プロ参戦記 #35 Decayed Bridges | ABC 120


AtCoder のプログラミングコンテスト ABC 120 に参加しました。3週連続の ABC-only 回です。

## 競プロ参戦記

この連載記事では、着手した問題の考察を自分なりに書いていきます。

- 問題文はリンク先を参照してください。
- 筆者の回答は Rust (1.15.1) で書いています。
- 前回: [競プロ参戦記 #34 Lazy Faith | ABC 119 - Qiita](https://qiita.com/vain0x/items/9a8a881f5170dc8eaa62)

## AtCoder Beginner Contest 120

問題一覧: https://atcoder.jp/contests/abc120/tasks

## A - Favorite Sound

問題概要: A 円支払うと1回、音を聞ける。いま B 円持っていて、最大 C 回まで、可能なかぎり音を聞く。音を聞く回数を求めよ。

考察:

B 円をすべて使うと (B / A) 回音を聞くことができます (端数切り捨て)。この値と C の小さいほうが答えです。

筆者の回答 (AC): https://atcoder.jp/contests/abc120/submissions/4448209

## B - K-th Common Divisor

問題概要: 正の整数 A と B を両方とも割り切る正の整数のうち、K 番目に大きいものを求めよ。

考察:

数学的に見える問題ですが、A, B ≤ 100 なので全探索できます。

A, B を両方とも割り切る数、つまり公約数は A, B 以下です。なので調べる範囲は 1 以上 max(A, B) 以下 (最大100個) で十分です。

1 以上 max(A, B) 以下の整数 d を大きい順に列挙し、「d が A と B を両方割り切るか」を判定し、K 番目に true になった d を答えとすればよいです。

筆者の回答 (AC): https://atcoder.jp/contests/abc120/submissions/4447938

## C - Unification

問題概要: 0, 1 からなる長さ N の文字列 S が与えられる。S の部分文字列で "01" または "10" となっているものを1つ選んで取り除く、という操作を可能なかぎり繰り返す。取り除かれる文字数を求めよ。

考察:

0 の個数を A、1 の個数を B として、A ≥ B と仮定します。(A < B の場合も同様。)

取り除く操作を1回行うごとに A, B は 1 ずつ減っていきます。そのため、取り除ける文字数は、最大で (2 * B) です。これはあくまで答えの候補の最大値であって、実際に答えになるかは分かりません。実際、どういう操作をしても「1 が余ってしまう」ような文字列を与えられたら、(2 * B) より小さくなります。

例を触っていると、「1 が余る」ということはないことが分かります。A ≥ B かつ B > 0 (文字列中に 1 が含まれる) なら、どこかに取り除ける部分 (1 と 0 が隣接している部分) があります。それを取り除くと、取り除いた後の文字列も A ≥ B という条件を維持しています。これを繰り返せばすべての 1 を取り除けます。

結局、答えは (2 * min(A, B)) です。

筆者の回答 (AC): https://atcoder.jp/contests/abc120/submissions/4445544

## D - Decayed Bridges

問題概要: N 個の点と M 本の辺からなる連結グラフがある。連結していない点のペアの個数を不便さと呼ぶ。すべての m (1 ≤ m ≤ M) につき、1 番目から m 番目までの辺を削除したグラフを考え、そのグラフの不便さを求めよ。

考察: 

以前、AtCoder の問題を解いていたとき、辺を削除したときに連結成分が増えるかどうかを高速に判定できれば解けそう、でもやり方が分からない、と思って解けなかったことがあります。

そのときの正解は、辺を1つずつ削除していくのではありませんでした。いったんすべての辺を削除してから、一定の性質を持つ点の間に辺を追加していく、という流れになっていました。新しく追加する辺が連結成分を減らすかどうかは簡単に判定できます。

この問題も同様で、「辺を削除したら不便さがどのくらい増えるか」を考える方法は思いつきませんが、「辺を追加したら不便さがどのくらい減るか」は分かります。

新しい辺が同じ連結成分の点同士をつなぐなら、不便さは減りません。異なる連結成分 A, B の点を繋ぐなら、A の点と B の点のペアはすべて、連結でなかった状態から連結な状態に変化します。したがって点のペアの個数 (|A| * |B|) だけ不便さが減ります。

まとめるとこういう手順です。はじめにすべての辺を削除します。この時点での不便さは (N * (N - 1) / 2) です。そこに最後の辺を追加して、不便さがどのくらい減るかを上述の手順で計算します。これをすべての辺について逆順に繰り返して、得られた不便さのリストを逆順に出力すればOKです。

残る課題は「新しい辺を追加するとき、辺の両側の点が同じ連結成分に含まれているか」を高速に判定する手段です。これはユニオンファインドというデータ構造を使えばできます。

参考: [Union find(素集合データ構造)](https://www.slideshare.net/chokudai/union-find-49066733)

筆者の回答 (AC): https://atcoder.jp/contests/abc120/submissions/4451763
Goでファイルとディレクトリのパーミッション、日時などを取得する

こんにちわ

現在、ファイルやディレクトリを簡単に操作できるTUIを作っていて、
ファイルやディレクトリの情報を取得して表示する必要があり、調べたら意外と面倒だったので、
忘れないうちに備忘録として残ります。

とりあえず今、画面はこんな感じです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/66178/911e3597-74d2-4fd1-91ca-edd89783ebca.png)

# ディレクトリ内のファイル・ディレクトリを取得
Goでは[`filepath.WalkFunc`](https://golang.org/pkg/path/filepath/#WalkFunc)でディレクトリ内のファイル・ディレクトリを再帰的に取得してくれますが、
今回はカレントディレクトリの情報を取得できればいいので、[`ioutil.ReadDir`](https://golang.org/pkg/io/ioutil/#ReadDir)を使用します。

`ReadDir`を使用すると、`[]os.FileInfo`構造体を取得できます。

```go
type FileInfo interface {
        Name() string       // ファイル名
        Size() int64        // ファイルサイズ
        Mode() FileMode     // パーミッション
        ModTime() time.Time // 更新日
        IsDir() bool        // ディレクトリの場合はtrue
        Sys() interface{}   // syscall.Stat_tに型アサーションすると更に詳細情報を取得可能
}
```

とこんな感じでデータを取得できます。

# パーミッション
`FileInfo.Mode().String()`でおなじみのフォーマットに変換してくれます。

# OwnerとGroup
ファイルの所有者と所有者が所属しているグループを取得したい場合は、
`FilInfo.Sys()`を`sysacll.Stat_t`に型アサーションする必要があります。

```go
if stat, ok := file.Sys().(*syscall.Stat_t); ok {
	// syscall.Stat_t.UidがユーザIDになります
	uid := strconv.Itoa(int(stat.Uid))
	// os/userパッケージのLookupIdにUidを渡すとユーザ名を取得できます
	u, err := user.LookupId(uid)
	if err != nil {
		owner = uid
	} else {
		owner = u.Username
	}

	// syscall.Stat_t.GidがグループIDになります
	gid := strconv.Itoa(int(stat.Gid))
	// os/userパッケージのLookupGroupIdにGidを渡すとグループ名を取得できます
	g, err := user.LookupGroupId(gid)
	if err != nil {
		group = gid
	} else {
		group = g.Name
	}
}
```

# 日時
作成日や更新日などを取得したい場合、OSごとに取得方法が異なります。
`syscall.Stat_t`に更新日などのフィールドがありますが、OSごとにフィールドが異なります。
Macの場合はこうなっています。
Linuxの場合、`Birthtimespec`に相当するフィールドはない様です。

```go
type Stat_t struct {
	// 日時の部分だけ抽出
	Atimespec     Timespec
	Mtimespec     Timespec
	Ctimespec     Timespec
	Birthtimespec Timespec
}
```

自前で実装は結構大変なので、ここは先人の知恵を借ります。
[こちらのライブラリ](https://github.com/djherbis/times)を使用すると、差分吸収してくれます。
OSによっては取得できないデータもあるのでご注意を。

# まとめ
ファイル情報を取得するだけなのに何かと面倒ですね。
`ls`コマンド凄すぎない？と思いました。
あと、先人の知恵はすごいので、どんどん使っていきましょう。
vue-dev-serverを試してみる

# `vue-dev-server`とは

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Cooked up a POC for serving Vue single-file components over native ES modules imports: <a href="https://t.co/jghZaYoFMe">https://t.co/jghZaYoFMe</a></p>&mdash; Evan You (@youyuxi) <a href="https://twitter.com/youyuxi/status/1102091010493083648?ref_src=twsrc%5Etfw">2019年3月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

> Imagine you can import Vue single-file components natively in your browser... without a build step.

ビルドすることなく、ブラウザから直接 Vue の Single File Component を インポートすることができる模様

# 早速使ってみる

使い方は Github の README に書かれているので、そのとおりに進めてみる

[vuejs/vue-dev-server](https://github.com/vuejs/vue-dev-server)

## インストール

今回はサクッと試したいのでグローバルインストール

```bash
$ npm i -g @vue/dev-server
```

## `index.html` と `.vue` ファイルを準備する

適当な作業ディレクトリを作る

```bash
$ mkdir vue-dev-server-sample
$ cd vue-dev-server-sample
```

`index.html` を作成する

```html:vue-dev-server-sample/index.html
<!DOCTYPE html>
<html>
  <head>
    <title>vue-dev-server-sample</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
    // CDN から直接 Vue をインポートする
    import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
    import App from './App.vue'
    
    new Vue({
      render: h => h(App)
    }).$mount('#app')
    </script>
  </body>
</html>
```

続いて、おなじみの Single File Componentを準備する

```vuejs:vue-dev-server-sample/App.vue
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello from Vue SFC without any build !!'
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
  color: #42b983;
}
</style>
```

## サーバーを起動する

```bash
$ npx vue-dev-server
server running at http://localhost:3000
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241738/6e957aea-fb21-3eb4-74cb-72355db10660.png)

# まとめ

- ビルド無し、ブラウザのみでお手軽に Vue の SFC を試せる
- まだ概念実証(`Proof of Concept`)の段階なので、あくまでお試し感覚でどうぞ
- どのように動いているか興味のある人は [Githubリポジトリ](https://github.com/vuejs/vue-dev-server) へ
PrometheusでJmxモニターを動かす

PrometheusのJmx_exporterを使った監視設定したのでメモ

- [Prometheus](https://prometheus.io/)
- [prometheus/jmx_exporter](https://github.com/prometheus/jmx_exporter)

<!--more-->

### Prometheusのインストール
公式サイトから本体をのtar.gzをダウンロードし、解凍します。  
 [Prometheus/download](https://prometheus.io/download/)

### jmx_exporterのビルド 
Prometheusの本体はtarを解凍して終わりなので、次にjmx_exporterの準備をします。gitからクローンをして、mvnでビルドします。 mvnが入っていない合は別途インストールが必要。

```
$ git clone https://github.com/prometheus/jmx_exporter.git
$ cd jmx_exporter
$ mvn package
```

### jmx_exporterの設定
設定ファイル、[httpserver_sample_config.yml](https://github.com/prometheus/jmx_exporter/blob/master/example_configs/httpserver_sample_config.yml)を編集する。Hostport部分をjmxが動いているサーバ、ポートに変更する。


```
---
hostPort: yourserver:jmxport
username: 
password: 

rules:
- pattern: ".*"
```

### jmx_exporterの起動
[run_sample_httpserver.sh](https://github.com/prometheus/jmx_exporter/blob/master/run_sample_httpserver.sh)ここを参考に起動用スクリプトを作る。もし、jmx_exporterの起動しているポートを変えたいのならここのコマンドの5555部分を変更する。

起動してブラウザ経由で5555ポートにアクセスしてそれっぽいレスポンスが取れていればOK。

### prometeusの設定
prometheusのコンフィグに、追加したjmx_exporterの情報を追記する。
jmx_exporterを今回はローカルホストの5555ポートで起動したので、static_configのtargetにlocalhost,5555を追記します。

```
# A scrape configuration containing exactly one endpoint to scrape:
# Here it's Prometheus itself.
scrape_configs:
  # The job name is added as a label `job=<job_name>` to any timeseries scraped from this config.
  - job_name: 'prometheus'

    # metrics_path defaults to '/metrics'
    # scheme defaults to 'http'.

    static_configs:
    - targets: ['localhost:9090']
    - targets: ['localhost:5555']
```



### prometheusを起動する。
解凍したディレクトリに起動コマンドがあるので、設定ファイルを指定して起動する。

```
./prometheus --config.file="prometheus.yml"
```

<a data-flickr-embed="true"  href="https://www.flickr.com/photos/kyagyao/46543476534/in/album-72157676327477732/" title="スクリーンショット 2019-03-03 22.17.42"><img src="https://farm8.staticflickr.com/7924/46543476534_77b937af2e.jpg" width="500" height="312" alt="スクリーンショット 2019-03-03 22.17.42"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
  
こんなのが見えればOK。 簡単簡単。
あとはまぁ、本番環境用に色々やるんだけど、それは別のお話。

Solrを結構使うんですが、その細かい指標を自動で拾ってくれて、グラフにできるのがめちゃくちゃ便利でよい。現状はzabbixを使ってるんだけど、グラフをいじったりするときに、プレミアム会員の退会フローかよ！と思うことが....  
もう少し調べてzabbixを入れ替えるぐらいまでいけたらいいなー。
Arch LinuxにAndroid Studioをインストールした時のメモ

## 普通にインストールするのは嫌...
管理者権限が好きじゃないので、ホームディレクトリで完結させることを目指します（android-studio本体を除く）。

雑メモですが、誰かの役に立つと嬉しい。Arch以外のディストリビューションでも共通の内容だと思う（未検証）。

## 手順
1. .xinitrcに以下の内容が書かれていることを確認（なければ書いて再ログイン）

    ```bash:.xinitrc
    export _JAVA_AWT_WM_NONREPARENTING=1
    export ANDROID_HOME=$HOME/AndroidTools
    export ANDROID_SDK_ROOT=$ANDROID_HOME/sdk
    ```

1. 以下のコマンドを実行
    
    ```bash:
    $ mkdir -p $ANDROID_HOME/sdk
    $ yay -S android-studio
    $ android-studio
    ```

1. Android Studioが起動したら（[うまく起動しない場合の参考ページ](https://qiita.com/matoruru/items/506e27ee60f7053a39a8)）、右下のConfigure->Settings->System Settings->Android SDKを開き、Android SDK Locationを/home/username/AndroidTools/sdkにする
1. 適当にSDKをインストールする
1. あとは普通に使う

AVDの保存先も勝手にホームディレクトリ($ANDROID_HOME/sdk/emulator)になります。

## TODO
- 音が出ない
Ubuntu18.04で内蔵HDDをマウント

# 概要

fstabコマンドを使って既存HDD(パーティション作成済)をマウントする方法を述べる。

# デフォルト設定確認

```bash
$ cat /etc/fstab 
# /etc/fstab: static file system information.
#
# Use 'blkid' to print the universally unique identifier for a
# device; this may be used with UUID= as a more robust way to name devices
# that works even if disks are added and removed. See fstab(5).
#
# <file system> <mount point>   <type>  <options>       <dump>  <pass>
/dev/mapper/ubuntu--vg-root /               ext4    errors=remount-ro 0       1
/dev/mapper/ubuntu--vg-swap_1 none            swap    sw              0       0
```

# UUID確認

```bash
$ blkid 
/dev/sda1: UUID="nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn" TYPE="LVM2_member" PARTUUID="nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn"
/dev/sdb1: UUID="nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn" TYPE="ext4" PARTUUID="nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn"
/dev/sdc1: UUID="nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn" TYPE="ext4" PARTUUID="nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn"
/dev/mapper/ubuntu--vg-root: UUID="nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn" TYPE="ext4"
```

# 既存HDD設定追加

```bash
UUID=nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn /mnt/home ext4 errors=remount-ro 0 2
UUID=nnnnnnnn-nnnn-nnnn-nnnn-nnnnnnnnnnnn /mnt/backup ext4 defaults 0 2
```

# 参考文献

https://qiita.com/suisuina/items/7b55a640fdd6b299aa46
routes.rb の読み方は「ルーツ」じゃない！！

routes.rbは「ルーツ」ではなく、
**「ラウツ」**
と読むそうです。

routesの正しい英語の発音はもちろん「ルーツ」で合っているのですが、Railsエンジニア界隈では「ラウツ」と読みます。

その理由は、**「ルーツ」だとrootと発音が似ていてややこしいから**だそうです。

認識の齟齬を減らすために、
**rootは「ルーツ」**と読み、
**routesは「ラウツ」**と読むんですね。

僕もこれからはroutesを**「ラウツ」**と読むような人生を歩んでいこうと思います。
ブラウザ上できるSQL学習サイトまとめ（初学者向け）

## このドキュメントについて
**what**
SQLをブラウザ上で無料（一部有料だけど少額、課金する価値はあると思う）で学習できるサイトをまとめました。

**who**
- データ分析やデータアナリティクスに興味がある。
- SQLを勉強したいけど、web開発がしたい訳ではない。
- 周りのすごい人はデータサイエンスとか機械学習とかいってるけど難しそう。
- セールス、マーケティングの分野が主軸だけどデータ（数字）に興味はある。
- データ・ドリブンしたい。
- アプリやWEBのプロダクトにおけるユーザーの行動調査をしたい。
- 広告の最適化をしたい。

## 1. [Progate: SQLレッスン](https://prog-8.com/languages/sql?register=true)
- SQLⅠ 2h 
- SQLⅡ 1h
- SQLⅢ 2h
- SQL道場 2h

会話があり，わかりやすい。SQLⅡの途中から無料でできなくなる（他のコースも含めて月額980）ので注意。しかし，わかりやすかったのでゼロから始める人には良い教材だと思った。最後の演習問題も実践的だった。

## 2. [paiza ラーニング: DB/SQL](https://paiza.jp/works/sql/primer/beginner-sql2)
- SQL入門編2:SQLを仕事に使おう

動画→演習型
SQL入門編1はweb開発者よりの基礎だと思ったので省略。はじめに動画を見ずに，演習に当たってみて，わからなかったら動画に戻るというスタイルでも活用できる。

## 3. [SQLBolt](https://sqlbolt.com/lesson/select_queries_introduction)
英語。ひたすら練習問題，難易度がどんどん上がっていく。全18レッスン。
[日本語訳をつけてくれている人のQiita](https://qiita.com/koshian2/items/c7a241caaa756663581b)

## 4. [SQLZoo](https://sqlzoo.net/wiki/SQL_Tutorial)
難易度別に色々。具体的な演習課題もある。

## 5. [codecademy Learn SQL](https://www.codecademy.com/)
**登録して7日間だけ無料**
[Lenarn SQL](https://www.codecademy.com/learn/learn-sql) 7h (基礎)
- 四則演算， テーブル結合のレッスンが良い

**以下は実用的で最後の力試しに最適だと思う**
[SQL: Table Transformation ](https://www.codecademy.com/learn/sql-table-transformation) 1h 
[SQL: Analyzing Business Metrics](https://www.codecademy.com/learn/sql-analyzing-business-metrics) 1h


## データ分析のスペシャリストになりたい
私もなりたいです。でも、上記のサイトを全て行った後に、さらなるステップアップはどうすれば良いのかと聞かれると、おそらく、データを保持している組織のローカルかつユニークな特徴に対して適応し、柔軟に対応する能力の方が求められている気がします。データサイエンティストや機械学習エンジニアと違って専門性が深いというより、広いイメージを私は持っています。ポケモンみたいで楽しそうですね。
Vue.jsでtypescript-eslint + Prettierを導入する

先日、TypeScriptチームがTSLintからESLintに切り替えていくという発表がありました。
[TypeScript on ESLint の未来](https://qiita.com/mysticatea/items/aaf677928e965abe093d)

そこで、従来のTSLint + Prettierではなく、typescript-eslint + PrettierをVue.jsプロジェクトに導入する方法を調べたので、まとめます。

基本的には下記の記事の通りなのですが、Vue.js用にeslint-plugin-vueを入れるのと、.eslintrc.jsにPrettierの設定も書いていきます。
[Using ESLint and Prettier in a TypeScript Project](https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb)

## パッケージのインストール

必要なパッケージをインストールします。npmの場合は`npm install --save-dev`に置き換えてください。

### ESLint関連

```bash
yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue
```

### Prettier関連

```bash
yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier
```

## ESLintの設定

.eslintrc.jsを作成して以下を記述します。ESLintの設定ファイルはjsonでも書けますが、jsだとコメントが書けて便利なのでjsファイルにします。

```javascript:.eslintrc.js
module.exports = {
  // parserに'vue-eslint-parser'を指定し、'@typescript-eslint/parser'はparserOptionsに指定する
  parser:  'vue-eslint-parser',
  parserOptions: {
    'parser': '@typescript-eslint/parser',
  },
  extends:  [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  rules: {
    'prettier/prettier': [
      'error',
      {
        'singleQuote': true,
        'semi': false
      }
    ]
  }
}
```

extendsにpluginのルールセットを指定し、rulesでルールを上書きしていきます。prettier用のルールは`'prettier/prettier'`に書いていきます。ここでは、シングルクォート、セミコロンなしに設定しています。

重要なのは、コメントにもありますがparserに'vue-eslint-parser'を指定し、'@typescript-eslint/parser'はparserOptionsに指定する点です。Vue.jsとは関係のないtypescript-eslintの記事では、@typescript-eslint/parserをそのままparserに指定するように書かれているのですが、これだとeslint-plugin-vueを組み合わせたときにうまく動きません。ここで最初ハマったのですが、公式ドキュメントにちゃんと書いてありました。

>If you want to use custom parsers such as babel-eslint or typescript-eslint-parser, you have to use parserOptions.parser option instead of parser option. Because this plugin requires vue-eslint-parser to parse .vue files, so this plugin doesn't work if you overwrote parser option.

[User Guide | eslint-plugin-vue](https://eslint.vuejs.org/user-guide/)

公式ドキュメント読むのって大事ですね。。(自戒)

## VSCodeの設定

あとは、VSCodeでのファイル保存時にESLintとPrettierが動くようにユーザ設定を編集します。
(ESLintの拡張機能を入れていることを前提とします。入れてない方はインストールしてください。)

1. メニューのCode→基本設定→設定を開く
1. settings.jsonを編集する(設定がjsonで開かれていない場合は右上の`{}`みたいなアイコンをクリックする)

```json:settings.json
{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}
```

以上の設定で、tsファイルやvueファイル保存時にも動作するようになります。
Windows10からVMware上のubuntu18.04にSSHで接続する

仕事で必要になり、いろいろ調べたので記載する
公開鍵認証方式を用いて、ssh接続時にパスワードを入力しない方法

#前提
1.VMwareでネットワークアダプタをホストオンリーに設定済み
2.WindowsにTera Termをインストール済み

#Windowsの操作
1.Tera Termを起動し、[設定 > SSH鍵生成]をクリックする
2.鍵の種類をRSAにして「生成」をクリックする
3.鍵のパスフレーズには何も入力せずに「公開鍵の保存」、「秘密鍵の保存」をクリックし、任意の場所に保存する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/207883/8528e082-c08a-80d1-2859-130d9c036083.png)
4.公開鍵（id_rsa.pub）をubuntuにコピーする
5.下方のubuntuの操作を行う
6.Tera Termの新しい接続を下図の設定で作成する。ホストにはubuntuのIPを入力する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/207883/5a81fa23-075f-223c-60a3-fd253f1c8c18.png)
7.6が成功するとSSH認証画面が表示される。ubuntuのユーザー名と秘密鍵パスを入力し、OKをクリックする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/207883/a80e0639-e07f-da39-11cb-1d23400f501d.png)
8.接続に成功すると下記のような画面が表示される
![タイトルなし.png](https://qiita-image-store.s3.amazonaws.com/0/207883/5e69607d-c5ef-026e-4bf0-f71227a97d0d.png)

#ubuntuの操作
1.opensshをインストールする
`$sudo apt-get install openssh-server`
2.IPを調べる
`$ifconfig`
3.公開鍵をubuntu![uploading-0]()
に登録する
`$mkdir .ssh`
`$cat id_rsa.pub >> .ssh/authorized_keys`
4.パーミッションを変更する
`$chmod 600 .ssh/authorized_keys`
Yay! You're on Rails! は Heroku では表示されないという話

Rails を触ったことのある人ならおなじみの、
Yay! You're on Rails!
ですが、これは Heroku デプロイしても表示されません。

Yay! は表示されずに、
The page you were looking for doesn't exist.
が表示されます。

では、なぜ Yay! が表示されずに The page doesn't exist が表示されるのでしょうか？

Yay! の画面はそもそも開発者向けのページです。
Yay! では Rails や Ruby のバージョン情報が書かれていますが、これはユーザには関係のない話ですよね。

バージョンが気になるのは開発者だけです。

だから、そもそも Yay! の画面をユーザに見せる必要がないんですね。

このような理由から Rails では本番環境では Yay! を表示しないことになっています。

以前 Rails new の直後に Heroku デプロイしてエラーページが出てなんかやらかしたのかと思って焦ったことがありましたが、このような理由があったんですね。

P. S.
タイトルでは Heroku と書きましたが、より正確にいうと本番環境ですね。
GoでcsvアップロードするAPIを作ってcURLで動作確認する

```sample.go
package main

import (
	"encoding/csv"
	"fmt"
	"io"
	"net/http"
	"strings"

	"github.com/gorilla/mux"
)

type Entry struct {
	Initial string
	Fruit   string
}

func main() {
	r := mux.NewRouter()
	r.HandleFunc("/upload", uploadFile).Methods("POST")
	http.ListenAndServe(":8000", r)
}

func uploadFile(w http.ResponseWriter, r *http.Request) {
	// multipart/form-dataを読み込むためにFormFileを利用
	// 引数 "file" は任意の名前
	// 返り値の型は multipart.File, *multipart.FileHeader, error
	file, _, err := r.FormFile("file")

	if err != nil {
		http.Error(w, err.Error(), http.StatusBadRequest)
	}
	defer file.Close()

	reader := csv.NewReader(file)
	for {
		line, err := reader.Read()
		if err == io.EOF {
			break
		} else if err != nil {
			http.Error(w, err.Error(), http.StatusBadRequest)
		}
		output := strings.Join(line[:], " for ") + "\n"
		fmt.Fprintf(w, output)
	}
}
```

サーバを立ち上げる

```.sh
$ go run sample.go
```

別ターミナルで動作確認

```.sh
$ touch sample.csv
$ echo 'A,Apple' > sample.csv
$ echo 'B,Banana' >> sample.csv

# cURL の option F でファイルアップロードができる
$ curl -X POST -F "file=@sample.csv" localhost:8000/upload
A for Apple
B for Banana
```
npm install の --save-dev って何？

`npm install --save-dev` の `--save-dev` ってなんだ？と思って調べたのでメモ。

# --save-dev が気になったきっかけ
Vue.jsのアプリを簡単にS3にアップロードする方法として以下のサイトを参考にしました。（とても簡単で便利）

[gulp で S3 へファイルアップロード](https://hacknote.jp/archives/43241/)

こちらのサイトの手順に従い、
`npm install --save-dev` を実行して gulp をインストールし、
`gulp publish` を実行したところ、、、

`-bash: gulp: command not found`

あれ、動かない。

# --save-devってなに？
`--save-dev` はローカルインストールするためのコマンドです。
正確に言うと `npm install -g`がグローバルインストールのコマンドで、
`-g`を付けないとローカルインストールになります。

# ローカルインストールしたパッケージをどう実行するの？
ローカルインストールの場合は、
カレントディレクトリに`node_modules`ディレクトリが作られ、そこにパッケージがインストールされます。
そのため、インストールした後は、node_modules/.binディレクトリの配下にあるパッケージを実行する必要があります。
`./node_modules/.bin/gulp publish`

# どういうときに--save-dev をした方がいいの？
あまりnpmを使うことがなかったこともあり、
マニュアルのコピペでグローバルインストールしかしてなかったのですが、
以下の記事を読んでみると、なるべくローカルインストールした方が良さそうですね。

[[Node.js] npm installするときはどのパッケージもローカルインストールで十分](https://arui.tech/why-locally-install-is-much-better-than-globally-in-npm/)

もう少し補足すると、
`--save-dev` すると、自動で `package.json`の `devDependencies` に追記されます。
そして `dependencies` には追記されません。

`git clone`でクローンしてきて、必要なパッケージをインストールするときに
`npm install --production`とすると、`devDependencies`はインストールされないようです。
逆に `dependencies` に入っているとインストールされてしまうので、
githubにソースを公開するときは使い分けできていると親切そうですね。
BeagleBoneGreenでGPSを受信する02

前回
[BeagleBoneGreenでGPSを受信する01](https://qiita.com/pata128/items/375693340453621eb59a)

#UART1をデフォルトで有効にする。
前回```config-pin```でGPIO端子の設定を変更してUARTの入出力をできるようにしましたが、これでは起動後毎回入力が必要になりますので、起動時からUART1が有効になるようにします。
→別の設定方法：[BeagleBoneGreenのGPIO端子の設定](https://qiita.com/pata128/items/308e027dc8fb187fe479)
→デバイスツリーを自分で書く方法：[BeagleBoneGreenのDeviceTree](https://qiita.com/pata128/items/1b78a86f1d0ea4fef9f6)

/boot/uEnv.txtを編集します。

```
$ sudo nano /boot/uEnv.txt
```

```###Overide	capes	with	eeprom```の下に以下を追記します。

```
uboot_overlay_addr4=/lib/firmware/BB-UART1-00A0.dtbo
```

また、```enable_uboot_cape_universal=1```の下に以下を追記します。

```
cape_enable=bone_capemgr.enable_partno=BB-UART1
```

上書き保存[```Ctrl-O```]して再起動後します。

```
$ sudo shutdown -r now
```
再起動後、UART1の受信ができているか確認します。

```
$ cat /dev/ttyS1
```

#gpsdをインストールする
gpsdとgasdクライアントをインストールします。
参考元
https://www.yslabannex.net/?p=1163

```
$ sudo apt-get update
$ sudo apt-get install gpsd gpsd-clients
```
サービスの停止
```service * stop```で現在起動しているサービスを停止します。
```systemctl disable *```でシステム起動時のサービス起動を無効にします。

```
$ sudo service gpsd stop
$ sudo systemctl disable gpsd.socket
```

スタートアップスクリプト/etc/default/gpsdの変更

```shell:gpsd
# Default settings for the gpsd init script and the hotplug wrapper.

# Start the gpsd daemon automatically at boot time
START_DAEMON="true"

# Use USB hotplugging to add new USB devices automatically to the daemon
USBAUTO="false"

# Devices gpsd should collect to at boot time.
# They need to be read/writeable, either by user gpsd or the group dialout.
DEVICES="/dev/ttyS1"

# Other options you want to pass to gpsd
GPSD_OPTIONS="-n"

GPSD_SOCKET="/var/run/gpsd.sock"
```
サービスの起動
```service * start```でサービスを起動します。
```systemctl enable *```でシステム起動時のサービス起動を有効にします。これで次回から電源を入れたときにgpsdが動きます。

```
$ sudo service gpsd start
$ sudo systemctl enable gpsd.socket
```
受信確認

```
$ cgps
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/366164/8f462267-7b8f-df29-b3b0-2e7a9e0732c4.png)

続き
[BeagleBoneGreenでGPSを受信する03](https://qiita.com/pata128/items/b3cf8ff2ea1a81b7011c)
Swift開発メモ


##効率化
[ `cmd`+/ ]で一文をコメントアウトできる

##基本
定数　let
変数　var


##エラー集

```
Signing for "　" requires a development team.
```

https://teratail.com/questions/51057

```
Failed to create provisioning profile.
There are no devices registered in your account on the developer website. Plug in and select a device to have Xcode register it.
```

Developer websiteに登録してない人は登録するところから

```
Use of unresolved identifier '---'
```
CoreDataを使用する際はCoreDataファイルを作成し

##参照URL
・UITableViewの使い方
https://www.sejuku.net/blog/36626

・基本的なToDO
https://qiita.com/TD3P/items/8f474358d1dd789557f3

・タスク別のToDo
https://qiita.com/snowman_mh/items/0d27f4abf7b14c72107f

・DataPiker（Textfieldを利用した）
https://www.egao-inc.co.jp/programming/swift_uidatepicker/

・Swiftのライブラリーまとめ
https://qiita.com/BlueEventHorizon/items/080f1e24a6c3d76a0df8

・Table Viewの基礎（Main StroyBoardを使ってないからわかりやすい）
http://programming-beginner-memo.com/?p=15

・CoreDataを使ったデータの保存
https://turedureengineer.hatenablog.com/entry/2018/12/08/144818

・RxSwiftの導入
https://qiita.com/hananaonao/items/1ac70d5b48e5c21955d6

・RxSwiftの簡単な実装
https://qiita.com/orimomo/items/3120aff12a06f0ab14e2

・UserDefaultsを全て削除する
https://uruly.xyz/nsuserdefaults%E3%81%AE%E5%86%85%E5%AE%B9%E3%82%92%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6%E5%89%8A%E9%99%A4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%90swift%E3%80%91/
Or
v-modelにフィルタをかける

`v-model`以外は[フィルター](https://jp.vuejs.org/v2/guide/filters.html)を使えば困らなかったけど`v-model`の場合に困った。

v1では[Two-way-フィルタ](https://v1-jp.vuejs.org/guide/custom-filter.html#Two-way-%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF)があったがv2では無い。

[Two-Way フィルタ 置き換え](https://jp.vuejs.org/v2/guide/migration.html#Two-Way-%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF-%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88)

> https://jsfiddle.net/chrisvfritz/1oqjojjx/?utm_source=website&utm_medium=embed&utm_campaign=1oqjojjx

## 入力欄に価格を入れてカンマ表示を行う例

[computedのsetとget](https://jp.vuejs.org/v2/guide/computed.html#%E7%AE%97%E5%87%BA-Setter-%E9%96%A2%E6%95%B0)でもできましたが整形後のdataに変更がない場合はキャッシュが使用され調整しないとうまくいかなかったです。

```html

Vue.component('currency-input', {
    template: '\
        <input\
            type="text"\
            name="name"\
            v-bind:name="name"\
            ref="input"\
            v-bind:value="value"\
            v-on:input="updateValue($event.target.value)"\
            v-on:focus="selectAll"\
            v-on:blur="formatValue"\
        >\
    ',
    props: {
        name: {
            type: String,
            default: ''
        },
        value: {
            type: String,
            default: ''
        }
    },
    mounted: function () {
        this.formatValue()
    },
    methods: {
        updateValue: function (value) {
            let formatValue = parseInt(value.replace( /[^0-9\-]/g, ''), 10);
            if (isNaN(formatValue)) {
              formatValue = 0;
            }
            formatValue = 
formatValue.toString().replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
            this.$refs.input.value = formatValue;
            this.$emit('input', formatValue);
        },
        formatValue: function () {
            let formatValue = parseInt(this.value.replace( /[^0-9\-]/g, ''), 10);
            if (isNaN(formatValue)) {
              formatValue = 0;
            }
            this.$refs.input.value = formatValue.toString().replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
        },
        selectAll: function (event) {
            // Workaround for Safari bug
            setTimeout(function () {
                event.target.select();
            }, 0)
        }
    }
});

new Vue({
    el: '#price',
    data: {
      price1 : '0',
      price2 : '0',
    }
});


<div id="price">
<currency-input name="test[0]" v-model="price1"></currency-input>
<currency-input name="test[1]" v-model="price2"></currency-input>
</div>
```

## 追記

```
:value="A | フィルタ"
@input="Aをフィルタ前の値に戻すmethod"
```

の方が簡単にできそうな気がした。
laravelでリンクがhttpsにならない

`APP_URL`で判断してくれると思っていましたが違いました。

`asset`（絶対パスではない場合）や`route`は`UrlGenerator`の`formatScheme`を使用してリンクのスキーマを作り出しています。

```php:laravel\framework\src\Illuminate\Routing\UrlGenerator.php

public function formatScheme($secure)
{
    if (! is_null($secure)) {
        return $secure ? 'https://' : 'http://';
    }

    if (is_null($this->cachedSchema)) {
        $this->cachedSchema = $this->forceScheme ?: $this->request->getScheme().'://';
    }

    return $this->cachedSchema;
}
```

```php:laravel\framework\src\Illuminate\Routing\UrlGenerator.php
public function forceScheme($schema)
{
    $this->cachedSchema = null;

    $this->forceScheme = $schema.'://';
}
```

```php:laravel\framework\src\Illuminate\Routing\UrlGenerator.php
public function getScheme()
{
    return $this->isSecure() ? 'https' : 'http';
}
```

`$this->forceScheme`を`forceScheme`メソッドで設定してしまえば強制的に書き換えることは可能
`$this->forceScheme`が設定されていない場合は`getScheme(isSecure)`で判定する。
下記のような場合は`isSecure`で判定できません。

[信用するプロキシの設定5.5](https://readouble.com/laravel/5.5/ja/requests.html#configuring-trusted-proxies)
[信用するプロキシの設定5.6](https://readouble.com/laravel/5.6/ja/requests.html#configuring-trusted-proxies)

> TLS／SSL証明を行うロードバランサの裏でアプリケーションが実行されている場合、アプリケーションが時々HTTPSリンクを生成しないことに、気づくでしょう。典型的な理由は、トラフィックがロードバランサにより８０番ポートへフォワーディングされるため、セキュアなリンクを生成すべきだと判断できないからです。


# 対応手順

プロキシの問題ではないか確認して、それの問題であればプロキシの設定を追加し、
それでも解決できない場合はforceSchemeメソッドでhttpsを設定してしまう。

```php
if (env('APP_ENV') === 'production')
{
    URL::forceScheme('https');
}
```
Nuxtにaxios-mock-adapterをプラグインとして導入してMockを簡単に使えるようにする 

## はじめに
NuxtとNuxtで利用するaxiosですがMock利用時にはaxios-mock-adapterを使うといいよとよく書いてある。
その割にはちゃんと開発で使えるようなフレームワークへの導入方法が書いてなかったので書いてみた

## 環境
* nuxt 2.0.0
* axio-mock-adapter 1.16

## READMEに載っている使い方(axios-mock-adapterの普通の使い方)
MockAdapterの引数としてaxiosオブジェクトを指定して初期化して利用する

```javascript
var axios = require('axios');
var MockAdapter = require('axios-mock-adapter');

// This sets the mock adapter on the default instance
var mock = new MockAdapter(axios);

// Mock any GET request to /users
// arguments for reply are (status, data, headers)
mock.onGet('/users').reply(200, {
  users: [
    { id: 1, name: 'John Smith' }
  ]
});

axios.get('/users')
  .then(function(response) {
    console.log(response.data);
  });
```

## NuxtでMockを利用する場合に考慮すべきこと
* NuxtではNuxtに組み込まれたaxiosプラグイン（$axios API)を利用する。そのため上記方法でMockを利用する場合、nuxt.configで設定するaxiosのエコシステムを利用できない

## 実践した方法　axios-mock-adapterをNuxtのpluginとして登録する
#### プラグインファイルの作成
MockAdapterの引数にはResponseのdelay(ms)を設定

```javascript:src/plugins/mock.js
import MockAdapter from 'axios-mock-adapter';
import ItemsDummy from '@/stub/mocks/items/search';

export default ({ $axios }) => {
  const mock = new MockAdapter($axios, { delayResponse: 500 });
  mock.onGet('/items/search').reply(200, ItemsDummy);
};
```

#### レスポンス用オブジェクトの作成

```javascript
const ItemsDummy = {
  data: [
    {
      id: 1,
      title: 'AAAAA',
      description: 'aaaaa',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
    {
      id: 2,
      title: 'BBBBB',
      description: 'bbbbb',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
    {
      id: 3,
      title: 'CCCCC',
      description: 'ccccc',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
    {
      id: 4,
      title: 'DDDDD',
      description: 'ddddd',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
    {
      id: 5,
      title: 'EEEEE',
      description: 'eeeee',
      url: 'http://localhost:5000/dummy/img/items/dummy-1.png',
    },
  ],
};
export default ItemsDummy;

```

#### Mockプラグインの登録

```javascript:nuxt.config.js
  
  // pluginsにmock.jsを登録
  plugins: ['@/plugins/i18n.js', '@/plugins/mock.js'],
```

---
これで順次mockファイルにダミーリクエスト用オブジェクトをインポートしていけば簡単にMockができる
利用する場合はこんな感じでaxiosを呼び出して利用できる

```javascript
export const actions = {
  async fetchItemsAction(context, params) {
    const payload = { list: '' };
    const { data } = await this.$axios.$get('/items/search', params);
    context.commit('fetchItems', data);
  },
};
```
Chromeの「全てのタブを閉じる」をキーボードで行う方法

Chromeの「全てのタブを閉じる」と、「右側のタブを閉じる」はとても便利ですよね。
しかし残念ながらこれらにショートカットキーは用意されていません。

## Chromeの「全てのタブを閉じる」をキーボードで行う方法
そこで便利なのが、このショートカットキーを追加してくれるChrome拡張です。
[Keyboard Shortcuts to Close Other/Right Tabs](https://chrome.google.com/webstore/detail/keyboard-shortcuts-to-clo/dkoadhojigekhckndaehenfbhcgfeepl)

この拡張を追加すると、(Macの場合)
`option + shift + O` で全てのタブを(Other Tabs)
`option + shift + R` で右側のタブを(Right Tabs)消すことが出来ます。
便利ですので、ぜひご活用下さい。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
Emacsのフリンジビットマップ(fringe-bitmap)を追加する

# 概要

Flycheckで表示されるフリンジビットマップ(アイコンみたいなもの)が見づらかったので、変更してみた。

# 変更前

下記は、変更前の表示。!と?の表示が見づらい。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201153/c1e126b8-24b4-1c3c-39ba-1b3f329562b5.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201153/2450e18f-e349-d122-6984-667ddcadd123.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201153/f39dafd6-4e53-1551-a33b-f23e44149ae9.png)


# 変更後

下記は、変更後の表示。×と◆にしてみた。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201153/df6a3606-c280-7447-34d6-b071d81c9573.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201153/017482c3-5a8f-eb63-50d3-4115a0f21614.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201153/4d86716c-b754-43ab-3797-9d569f71007b.png)

# 設定方法

設定方法は下記の通り。

```
(when (fboundp 'define-fringe-bitmap)
  (define-fringe-bitmap 'my-flycheck-fringe-indicator
    (vector #b00000000
            #b00000000
            #b00000000
            #b00000000
            #b00000000
            #b00001000
            #b00011100
            #b00111110
            #b01111111
            #b00111110
            #b00011100
            #b00001000
            #b00000000
            #b00000000
            #b00000000
            #b00000000
            #b00000000))

  (define-fringe-bitmap 'my-flycheck-fringe-indicator2
    (vector #b00000000
            #b00000000
            #b00000000
            #b00000000
            #b01000001
            #b01100011
            #b00110110
            #b00011100
            #b00011100
            #b00011100
            #b00110110
            #b01100011
            #b01000001
            #b00000000
            #b00000000
            #b00000000
            #b00000000))
)
```

まさにビットマップで、0と1の2bitで記述する。0と1の文字の全体を眺めるとなんとなく◆と×が画像として見える。

# 詳細

上記の設定を含む、Flycheckの設定方法はこちら↓

https://document.wurlyhub.com/html/EmacsFlycheck.html

# 補足

お試しで [note の方に公開した記事](https://note.mu/wurly/n/n1ac347f8e7ca) なのだがやはりあちらは畑違いの感もあり、こちらに転載した。
Docker imageをbuildしてAWS ECRにpushする

[自分のブログ](https://yuya-tequila.hatenablog.com/entry/2019/03/03/211211)の転載記事です。

最近ECSを勉強中です。
自作アプリをデプロイしたいのですが、とりあえずECRにDocker imageをpushする必要があるようなので、push方法について調べてみました。

### AWS ECRにリポジトリの作成

ECRコンソールから、imageをpushするリポジトリを作成します。
<img width="1173" alt="スクリーンショット 2019-03-03 12.38.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/222253/baf6cc83-8abe-252d-092b-316897c70b50.png">
作成すると、以下のようにリポジトリ一覧に表示されます。
ここで表示されているURIは、のちほどpushコマンドを実行する際に使用します。
<img width="1170" alt="スクリーンショット 2019-03-03 12.48.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/222253/e2877e1e-e446-a097-535f-ab02cf584614.png">

#### Docker CLIの認証

imageのpushにはDocker CLIを使用します。
そのために、認証トークンを取得し、レジストリに対して Docker クライアントを認証します。

```
aws ecr get-login --no-include-email --region ap-northeast-1
```

上記のコマンドを実行すると、以下のようなレスポンスが返ってきます。

```
docker login -u AWS -p password https://aws_account_id.dkr.ecr.ap-northeast-1.amazonaws.com
```

このレスポンスが、AWS ECRに対してDocker CLIを認証するためのコマンドです。
なのでそのまま実行しましょう。

#### pushしたいDocker imageの作成

ECRにpushしたいDocker imageを、以下のコマンドで作成します。
コマンドはベースとなるDockerfileのあるディレクトリで実行します。

```
docker build -t my_app_name
```

その後、pushするためにタグをつけます。

```
docker tag my_app_name:latest <YOUR ECR URI>/my_app_name:latest
```

#### ECRへのpush

以下のコマンドを実行することで、作成したリポジトリにimageをpushできます。

```
docker push <YOUR ECR URI>/my_app_name:latest
```

リポジトリの中を見てみると、pushされていることが確認できます。
<img width="1173" alt="スクリーンショット 2019-03-03 14.33.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/222253/e2ed7eff-51f8-7e8c-8b06-e4cc66f7feef.png">
これでDocker imageのpushは完了です。
CentOS7でTensorFlowをビルド

# 要約
自分の使用環境に合わせて TensorFlow をビルドして動作させることができた

# 環境
下記の環境で TensorFlow を導入しようとした。

 - Pentium 3805U 搭載の小型PC (Pentium 3805U PC 参照)
 - CentOS 7.6 64bit
 - Python 3.4
 - Jupyter
 - JupyterHub

# 不具合の現象

pip3 で tensorflow をインストールしたが、自動で取得された tensorflow ではうまく動作せず。

Jupyter Notebook上に下記のようなダイアログが出てPython3カーネルが再起動してしまう。

```
Kernel Restarting
The kernel appears to have died. It will restart automatically.
```

JupyterHub の標準出力には下記のメッセージが出ていた。

```
2019-03-02 21:36:03.586565: F tensorflow/core/platform/cpu_feature_guard.cc:37] The TensorFlow library was compiled to use AVX instructions, but these aren't available on your machine.
[I 2019-03-02 21:36:05.925 wurly restarter:103] KernelRestarter: restarting kernel (1/5)
WARNING:root:kernel 336e07a6-5964-424e-b6d6-41773f678549 restarted
```

AVXに対応したパッケージなので動作できないようだ。

# 対処

Bazel をインストールし、TensorFlowを環境に合わせてビルドすることで、TensorFlowが使えるようになった。

# 詳細

詳細は下記の通り。せっかくなのでビルドしたものも置いておく。

https://document.wurlyhub.com/html/CentOS7_TensorFlowBuild.html

# 所感

あくまでTensorFlowの環境構築が目的で作業をしていたのだが、その中で Bazel という新しいビルドツールを知ることができたことに非常に価値があった。

# 参考

下記をありがたく参考にさせていただきましたｍ＿ｍ

 - [拡張命令セットでTensorFlowをコンパイルする方法 - Qiita](https://qiita.com/yijyun-wang/items/12a76667482551eadabc)
 - [TensorFlow をソースからコンパイル 20180917版 - Qiita](https://qiita.com/Guwashi/items/d26f06ed45f9d740ffa2)
 - [TensorflowをCentOS7にオフライン環境でインストールする - Qiita](https://qiita.com/hiro_nishi/items/bea29f2345b1f21d015f)
#kichijojipm 吉祥寺.pm #17 参加レポート

本記事は、2019/03/01(金)に吉祥寺の武蔵野公会堂で実施された
Perlコミュニティである吉祥寺.pmのイベント参加レポートです。

レポートと言いつつ、客観的な情報や下記URLに既にまとまっています。
というわけで、この記事は所感となります。自分の現在の立ち位置は
サーバサイドプログラマであり、開発品質の向上にも強い興味がある
のでその観点から書こうと思います。

# [イベントの公式情報や登壇スライドはこちらを参照ください](https://kichijojipm.connpass.com/event/118082/presentation/)

# 本記事の内容
## 全体的な感想
- とても面白いイベント。次は懇親会も参加したい。
- Tech系に限定されない幅広い発表内容で飽きない。
- 自分も「何かしたいな」という情熱を得ることができた。

## 特に良かったと感じた点
- Perlに限定せず、技術について真剣に楽しんでいる。
- 他のTech系イベントと比較して雰囲気がオープン。
- 有意義な化学反応。新しい知見の獲得。

上記３点を強く感じた。以下、それぞれ詳細に書いていこうと思う。

### Perlに限定せず、技術について真剣に楽しんでいる。
　Perlのコミュニティのイベントだけど、**Perl以外の話がとても多い**。
そしてとても面白い。Bitcoinの内部実装について解説があったり、
UMLをコマンドラインから描画したり、UI/UXについて紙芝居（！？）
形式でのアナログ発表があったりと、**実に多種多様で飽きない**。

JSライブラリの使い方について現状の問題点を踏まえて提案をしたり、
インターネットスピードテストサイトの内部実装を調べるためにAPIを
ハックしたりと、どれも内容が濃くて面白い。技術が好きなんだなぁと
感じる。

もちろん主催者さんの努力もあるだろうけど、こういう自由さはちょっと
他のイベントでは見たことが無い。カオスになりすぎず、いい感じの奔放
さがある。単純に面白いし、**お得感**も感じる。国立西洋美術館で先日
知ったピュリズムのような印象を受けた。

### 他のTech系イベントと比較して雰囲気がオープン。
これは、イベントのテーマである**報恩謝徳**(受けた恩や恵みに感謝し、報
いること)が影響しているのかも知れない。「いままで自分が先輩やほか
のPerlハッカーの人達が築いてきたものを、きちんと次代に受け継いでいく」
と明言する人が多かった。

特に、ブログではなく、きちんと商業書籍として後世に残るかたちで知見を残
そうという[そーだい](https://soudai.hatenablog.com/)さんの発表は感動した。ブログではいつか情報が消えてし
まう。そうなっても本なら後に残る。

[i47_rozary](https://speakerdeck.com/rozary/bao-en-xie-de-zi-fen-mochu-zhang-1on1shi-memasu)さんの「出張 1 on 1」というのも非常に興味がある。技術的に自分が
ヘッポコすぎるので良い情報交換にはならないかもしれないが、まさに今チーム
の人間関係で問題を抱えているところなので、コンテキストの違う第三者の目線
というか、ものの考え方というか、それら全ては非常に参考になると思う。

というのも、自分が個人で自社サービスを作っていたとき、技術的に誰にも相談
できずに随分辛い思いをした経験があるからだ。これは本当に経験した人ならわ
かる。**自分の視野を広げるために人は組織で仕事をするのだ**と、そのとき自分は
学んだ。

**さっきからずっと感情論に走っていてウザったいが、自分は本当に感動屋なので
エモい話は大歓迎だ**。

### 有意義な化学反応。新しい知見の獲得。
　UI/UXについての発表を聴いて思ったことだが、自分と違う領域で働いている人
の考え方はなかなか知ることができないので聞けて良かった。たとえばこのイベント
はTech系のイベントだが、前回行った英語のパブリックスピーキングについての
イベントは全然毛色が違ったりする。自分には、その違いが新鮮で面白かった。

ふだんプログラミングをしていると、いくら「ユーザ目線で」考えようとも、しょせ
ん的外れになりがちだ。作り手の都合でものを考えてしまう。だから要らない機能を
設計してしまう。単純なシステムデザインに出来ない。UIデザインでもなんでも、
「何のためにやるんですか？」という自身の疑問が疑問で終わってしまう。そんな中
で自分と違う領域の人がする話はとても新鮮だった。

## 今後に向けて
　知らないこと、新しいことを知るのは面白い。自分も他人に価値を提供できるように
なりたい。そう思う。といって、自分に出来そうなことで興味が続きそうな貢献とい
ったら英語の翻訳くらいではないだろうか？

でも何かしら見つけて、面白いことを提供できたら嬉しい。
【メモ】Vue.js + Element UIのtableでrow-click Table Eventsでクリックされたrowのデータを取得する方法

[Element UI](https://element.eleme.io/#/en-US)のTableで `row-click` が行われた時に登録されていたハンドラ側でrowの値を受け取る方法のメモ。

# 方法
普通に `row-click`イベントに登録した `method` の引数としてクリックしたrowの値を受け取ることができる。


## 実装

```vue

<template>
  <el-table
    :data="tableData"
　　@row-click="handleClick">
    <el-table-column
      prop="name"
      label="Name">
    </el-table-column>
    <el-table-column
      prop="age"
      label="Age">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          name: '太郎',
          age: 25
        }, {
          name: '二郎',
          age: 26,
        }]
      }
    },
    methods: {
      handleClick(val) {
        console.log(`val = ${JSON.stringify(val)}`)
      }
    }
  };
</script>
```

## 結果

```js

val = {"name":"太郎","age":25}
```

# 参考にさせていただいたサイト
[Component | Element](https://element.eleme.io/#/en-US/component/table)
Taskwarriorでコンソールからタスク管理する

[taskwarrior](https://taskwarrior.org/)というコマンドラインのタスク管理ツールが便利だったので知見を共有します。

## モチベーション

タスク管理ツールとして

- trello
- asana
- github projects

これらを個人で使っていましたが、運用のモチベーションが続きませんでした。

そこでブラウザや専用アプリを開くという作業が壁になっていたのではないかと思い立ち、コンソール主体のタスク管理ツールを試すことにしました。

## 使い方

基本的に`task <filter> <command> <modification>`で操作します。
[コマンド](https://taskwarrior.org/docs/commands)やら[シンタックス](https://taskwarrior.org/docs/syntax.html)やらは[公式ドキュメント](https://taskwarrior.org/docs/)に載っていますが、自分のユースケースから使い方を紹介します。

### ユースケース

下記三つのプロジェクトにタスクを分けるとします。

| カテゴリ | 識別子 |
| --- | --- |
| 仕事 | work |
| プライベート | private |
| その他 | other |

そして、以下のフローでタスクを消化していきます。

1. カテゴリにタスクを追加
2. タスクに優先度を付与することで
3. やるべきタスクを優先度順に実行して消化

### ハンズオン

まずはタスクを追加します

```add-task.sh
task project:work add "tune monitoring tools"
task project:private add "read a tech blog"
task project:private add "write a article"
task project:other add "select todo-list"
task project:other add "try taskwarrior"
```

`task`コマンドで現状のタスクを確認できます。

```
kent-no-Macbook-Pro:/Users/kent$ task
[task next]

ID Age  Project Description           Urg
 1 2min work    tune monitoring tools    1
 2 2min private read a tech blog           1
 3 2min private write a article          1
 4 2min other   select todo-list         1
 5 1min other   try taskwarrior          1

5 tasks
```

`<filter>`を使ってタスクを絞り込んで表示できます

```
kent-no-Macbook-Pro:/Users/kent$ task project:private
[task next ( project:private )]

ID Age  Project Description     Urg
 2 6min private read a tech blog     1
 3 5min private write a article    1

2 tasks
```

タスクの優先度を上げてみます
タスクの優先度や期限は`task <filter> modify <modification>`で変更できます
タスクの優先度を設定してみましょう

```
task 3 modify priority:H
```

すると、タスクの優先度が変更されます

```
kent-no-Macbook-Pro:/Users/kent$ task project:private
[task next ( project:private )]

ID Age   P Project Description     Urg
 3 12min H private write a article    7
 2 12min   private read a tech blog     1
```

タスクの期限を設定するのは下記です

```
task 3 modify  due:2017-01-31
```

タスクを実行中にステータス変更しましょう。
先ほどの優先度を上げたタスクを実行中に変更します

```
kent-no-Macbook-Pro:/Users/kent$ task 3 start
Starting task 3 'write a article'.
Started 1 task.
```

実行中のタスクは`task <filter> active`で確認できます

```
kent-no-Macbook-Pro:/Users/kent$ task active

ID Started    Active Age   P Project Description
 3 2019-03-03 10s    27min H private write a article

1 task
```

タスクのステータスを完了にするには、`task <filter> done`を実行します。

```
kent-no-Macbook-Pro:/Users/kent$ task 3 done
Completed task 3 'write a article'.
Completed 1 task.
The project 'private' has changed.  Project 'private' is 50% complete (1 of 2 tasks remaining).
```

実行完了のタスクは`task <filter> completed`で確認します。

```
kent-no-Macbook-Pro:/Users/kent$ task project:private completed

ID UUID     Created    Completed  Age   P Project Description
 - cd2399c3 2019-03-03 2019-03-03 32min H private write a article

1 task
```

## まとめ

今まで色々なtodo管理ツールを使って結局続かなかった自分ですが、コンソールで気軽に管理するtaskwarriorであれば末長くタスクを管理できそうです。

続かなかったらまた別途別のツールを考えることにします。
Firefox66に一度更新した後のトラブル(storage.local)

# 概要

Firefox ver.66ではアドオン(WebExtensions)の `storage.local` がIndexedDBで保存されるようになった。
Firefoxを一度ver.66に更新し65か64に戻す時と、更にその後66に上げる時にトラブルが発生した。この原因はIndexedDBへの移行(66で起動すると行われる)と移行済みフラグであるようなので、IndexedDBへの移行をリセットして再度発生させることにした。そのためにやったことが書いてある。

## 環境

Windows10

## 参照した

[2019-02-16 Firefox Extensions to use different storage type in Firefox 66 - gHacks Tech News](https://www.ghacks.net/2019/02/16/firefox-extensions-to-use-different-storage-type-in-firefox-66/)
答えもヒントも特にない。単にニュースソース

[2019-02-15 Extensions in Firefox 66 | Mozilla Add-ons Blog](https://blog.mozilla.org/addons/2019/02/15/extensions-in-firefox-66/)
これも単にニュースソース

[1406181 - Use indexedDB as the backend for storage.local](https://bugzilla.mozilla.org/show_bug.cgi?id=1406181) と、ここで変更されているファイル。

あとは実際にプロファイルの中身を調べて判断した。


# 経緯

普段のプロファイルではFirefox Developer Edition(以下Dev版)を使っている。Nightlyも専用のプロファイルで使っている。

* 普段のプロファイルでNightly(66?)を起動した(2018年のこと)。
* Dev版を起動したら、アドオンのデータ読み込みがおかしい。全然読めていない。
* `storage.json` がリネームされていた(当時は `storage.js.migrated` ではなかった気がする)。
* `storage.json` に戻すと問題解消した。
* 2019年。Dev版をver.66に更新すると一部のアドオンでデータ読み込みがおかしい。

  * `storage.local` がおそらく古い。
  * `storage.local` とは別にIndexedDBを使っていて、DB(Dexieで `version(1).stores()` している)によっては読めない。
  * IndexedDBに移行されない。`storage.json` がそのまま残る。

* Dev版をver.65に戻すと、アドオンの問題はなくなった。普段のプロファイルでNightly(67)を起動すると、問題発生する。


# 対処

## IndexedDB移行をリセットする

一度(半端に)移行してしまっているので、それをリセットする。

プロファイルのバックアップをした後、
`$your_profile/browser-extension-data/{アドオンID}/storage.js` の存在と内容を確認しておき、それ以外のファイルがあればこの場から消す。これを `{アドオンID}` ごとに行った(以下同様)。

`$your_Profiles/storage/default/moz-extension+++{内部ID}^userContextId=xxxxx/` を消した。`^userContextId=xxxxx` が付かない方は多分 `storage.json` の移行先ではなく、アドオンが使っているIndexedDBなので何もしない。
`https+++ウェブサイト/` についてはtwitter.comだけ `^userContextId=xxxxx` があり、消した。

Dev版を起動し、`about:config` で `extensions.webextensions.ExtensionStorageIDB.migrated.{アドオンID}` を `false` に変更した。

### 確認する

Dev版(ver.65)を起動すると、問題なく動作しているようだった。


## 移行してもらう

当該のプロファイルでNightly(ver.67)を起動して変化を確認した。

* `storage.json.migrated` へとリネームされた。
* `extensions.webextensions.ExtensionStorageIDB.migrated.{アドオンID}` が `true` になった。
* `moz-extension+++{内部ID}^userContextId=xxxxx/` が作成された。

これらは起動後すぐ実行されるわけではないらしく、実行されていないアドオンを動作させると変化が起きた。

### 確認する

Dev版(ver.65)を起動すると、予想通りアドオンがデータを読めなくなっている。

## Dev版のバージョンを上げる

Dev版(ver.66になった)を起動すると、最初に確認した `storage.json` の状態で問題なく動作している。Dexie経由のIndexedDBも問題ない。
embulk 同梱の jruby のバージョンを調べる

embulk のバージョンは 0.9.15 で確認

# embulk -R--version → ダメ

```shell-session
$ embulk -R--version
```

embulk のヘルプが表示されてしまってダメ ... !

Issued [#1114](https://github.com/embulk/embulk/issues/1114) → サポートしないそうです。

# embulk irb で JRUBY_VERSION をみる

```
$ embulk irb
irb(main):002:0> JRUBY_VERSION
=> "9.1.15.0"
```

ちなみに embulk irb は embulk --help で出てこない隠しコマンドで、今後もあることは保証できないとのこと。

# bundle.gradle を見る

github リポジトリの対象 tag から bundle.gradle を漁ればバージョンわかる

https://github.com/embulk/embulk/blob/v0.9.15/build.gradle#L49
デジタルイノベーションのいまが感じられるデジタルイノベーション2019

日経BP社の主催する大型ITイベント「デジタルイノベーション2019」が2月19日から20日までの二日間にわたりザ・プリンスパークタワー東京で開催されました。Cloud/Security/ブロックチェーン/IoT/AIまでITの主要分野をカバーする展示会で今年の来場者数は15万人を超えました。展示会のほかにセミナーでは日本を代表する企業からさまざまな事例の紹介がされ、日経XTECHほかのオンラインメディアで紹介されたセミナーのレポートの中からピックアップして紹介します。

※下記サイトからの転載。ビッグデータ・AIなどに関するトピックを毎週取り上げています。
[TechCrowd: https://www.techcrowd.jp/related/](https://www.techcrowd.jp/related/)


#[デジタル化が生活に恩恵をもたらす、平井IT担当大臣](https://tech.nikkeibp.co.jp/atcl/nxt/event/18/00046/022100025/)

デジタルイノベーション2019のキーノートで講演を行った平井IT担当大臣の講演レポートです。「ITがもたらす日本、日本企業のデジタルイノベーション」と題して、政府のデジタル化に対する取り組みなどについての講演をレポートしています。

平井大臣は以前から、IT関連政策に取り組んできた政治家として知られ、議員時代には、サイバーセキュリティ基本法制定にも中心的に関わった経験をもつ方。講演では、デジタル化の促進のため、行政手続きを原則オンライン化するデジタル手続法案の早期成立の意義を強調。

また、社会全体のデジタル化を促進するための政府の取り組みとして、シェアリングエコノミーの推進、自動運転の社会実装、農業や港湾物流、健康医療分野のデータプラットフォームの構築などについて言及したとのこと。

デジタル化の推進には認証、本人確認基盤が重要になるとのことで、平井大臣は、マイナンバーに加え、マイナンバーカードの普及の意義をも強調したようです。


#[SOMPOが目指す「保険がいらない世界」、デジタル変革で実現へ](https://tech.nikkeibp.co.jp/atcl/nxt/event/18/00046/021900003/)

SOMPOホールディングスの楢﨑 浩一グループCDO・常務執行役員が行ったキーノートでの講演レポートです。保険がいらない世界をデジタル変革で実現したいという内容となります。

シェアリングエコノミーやスマートホーム、ウエアラブルデバイスの普及は、保険業界に破壊的なイノベーションを起こしているとのこと。例えばUberやLyftの登場で、自動車の保有率は低下している。今後、自動車保険の顧客は、個人ドライバーから事業者（メーカー）にシフトし、その契約内容も変化する。

そのような変化の中で、今後SOMPOホールディングスが提供するサービスは「安心・安全・健康のテーマパーク」とのこと。これまでの保険は、事故や病気になってから必要になるもの。これでは保険に対する顧客満足度は向上しない。現状を変革するためには、事故を起こさせない、病気にならないようなサービスを提供することが重要だと考えているようです。

デジタル戦略の推進体制強化としての取り組みが、「既存ビジネスのデジタルシフト支援」と「新規事業の創出」。例えば、AI技術を使ったOCR（光学的文字認識）処理で紙の保険証券を自動的に解析し、リアルタイムで保険見積もりを顧客に提示するサービスを提供している。ダイエット支援アプリを提供する米Noomと協業し、AIによる健康コーチングのサービスなども開発しているとのことです。


#[「デジタルネーティブ世代が今後の安全対策の主役」、金融ISACの鎌田氏](https://tech.nikkeibp.co.jp/atcl/nxt/event/18/00046/021900005/)

金融機関向けのセキュリティー対策に従事する金融ISACの鎌田敬介専務理事／CTOがキーノートに登壇。これまでの経験を踏まえ、これからの時代を担う人材に必要なIT・セキュリティースキルとセンスなどについて語りました。

近年、IT業界にはAIやRPA（ロボティック・プロセス・オートメーション）、IoT、ブロックチェーンなど、次々に新しいキーワードや概念が出てきていて、学びのサイクルを短縮する必要性が高まっているとのこと。

学びのサイクルが早い現代感覚の人にはどんな特徴があるのか。鎌田氏が挙げた人材像は以下の通り
・「ゴールまでの道筋が見えていなくても、まずは試してみる」
・「インターネットなどを活用し、自分以外の力に頼って実現することに慣れている」
・「突破力が高い、あるいは別の道を模索する力にたけている」
・「世の中の変化にアジャストするサイクルが早い」

このような世の中の変化の中で、数値化されない状況で先に進む決断のできる経営層が、今後の組織には必要となることを鎌田氏は強調。また、学習サイクルのスピードが上がっているなかで「ITが中核を担う存在になっている」と語りました。


#[「RPAのノウハウを共有して世界と戦う」、三井住友FGの山本氏](https://tech.nikkeibp.co.jp/atcl/nxt/event/18/00046/022000021/)

三井住友フィナンシャルグループ 総務部上席推進役 兼 企画部業務改革室上席推進役の山本 慶氏は「SMBCグループにおけるRPA活用の取組について」という題にて、仕事の質を高めるPRA（ロボティック・プロセス・オートメーション）を活用して生産性の向上を図る取り組みなどを紹介しました。

SMBCグループでは、2016年ごろからRPA導入を進めることになったとのこと。当時はRPAの大規模な導入事例がなかったため、導入後の保守や管理、セキュリティー、ガバナンスコントロールのノウハウを迅速に確立する必要があり、アクセンチュアや米IBM、SMBCグループが利用するRPAベンダーの米ユーアイパス（UiPath）などが集結し、チームとなって問題解決を進めたようです。

この二年間の成果としては、2018年上期実績で約800人分の業務を自動化。さらに、2019年度末までに1500人分の自動化が見込まれているとのこと。今後の展望としてはRPAを活用し、24時間365日安定的に稼働できるプラットフォームの構築を推進するとともにロボットによるロボットの監視や統合管理体制の高度化などの実現を目指すようです。