OmniAICreator/Qiita-1.07M huggingface dataset:
【祝！Railsチュートリアル完走！】完走の喜びと、挫折しないために意識していたことなど

本日3月14日、ついにRailsチュートリアル完走しました！

以前挫折したこともあったりしたので、今回完走できたのは結構嬉しいです。

この記事では完走の嬉しさを書いたり、挫折せず完走までできたポイントなど書いていこうと思います。

---

Railsチュートリアルを始めたのはちょうど2週間前。
2月28日にはこんな記事も書きました。

[Railsチュートリアルに再挑戦する
](https://qiita.com/RyuGotoo/items/aa2ff4a11b42805aa9f8)

1周目の今回は2週間かかりましたが、2周目以降はもっと早く完走できる自信があります！

## 挫折しないために意識していたことなど

以前挫折したこともあり、今回再挑戦するにあたっていくつか挫折しないための対策を講じていました。

具体的には以下のようなことをやっていました。

**1. 完璧主義にならない
2. とにかく完走を目指す
3. [Railsチュートリアル解説動画 & 質問サービスの教材](https://share-wis.com/courses/ruby-on-rails-tutorial-four-ver-five-one?utm_content=afc_zLujyQ7EWdJqCAjGtJPQ)を購入**

### 1. 完璧主義にならない

今回挫折せずに完走できた大きな理由は、**完璧主義にならなかった**ことだと思います。

例えばtestはコピペで済ませたり、演習は飛ばしたり、複雑なところはザックリした理解でどんどん進めました。

僕はよく変に完璧主義になってしまい、一行一行しっかりと理解しようとしてしまいます。

これ自体は問題ではないのですが、これでは時間がかかりまくるし、モチベーションが下がって勉強をやめてしまったりしてしまいます。

これではよくないので、ザックリとした理解でいいから、モチベーションが下がりきって勉強をやめてしまう前に完走してしまおうという魂胆です。

今回はこの作戦が上手くハマりました。

### 2. とにかく完走を目指す

1周目の今回はとにかく完走を目指しました。

極端に言ってしまうと、**理解しなくていいからとにかく完走してしまおう**と意識していました。

理解度は2周目以降で高めるとして、1周目は全体をとにかく見よう、最悪コピペでもいいから全体を見ようとしていました。

**完璧主義にならない、とにかく完走を目指す**という意識のおかげで勉強のハードルが下がり、完走できました。

### 3. [Railsチュートリアル解説動画 & 質問サービスの教材](https://share-wis.com/courses/ruby-on-rails-tutorial-four-ver-five-one?utm_content=afc_zLujyQ7EWdJqCAjGtJPQ)を購入

前回僕が挫折してしまった大きな理由は、単純に**Railsチュートリアルが難しかった**からです。

完璧主義にならないなどの意識をしたところで、Railsチュートリアルの難易度は下がりません。

難しくて理解が捗らない教材をテキストで学ぶのは少し無理があるので、動画教材に頼りました。

動画教材であればテキスト教材よりも多少受動的に学ぶことができますし、学習ペースも掴みやすいので僕は結構好きです。

また、プログラミング学習の挫折率が異様に高いのはエラー処理だと思います。

すぐにわかるエラーならいい勉強になりますが、何時間も同じエラーと格闘するのは苦痛です。

以上のような理由からエラー処理に悩んだ時も質問もできる教材を購入しました。

「お金を使ってるんだからしっかり学んでやろう」という意識できるのも良い点です。

僕のようにだらけがちな人は[動画教材](https://share-wis.com/courses/ruby-on-rails-tutorial-four-ver-five-one?utm_content=afc_zLujyQ7EWdJqCAjGtJPQ)に頼ってみるのも一つの手だと思います。

## 今後

次は軽めのオリジナルサービスをいくつか作って遊んでみようと思います。

何かを理解するときはそれを使って遊ぶのが一番良い勉強になると思っています。

軽めのオリジナルサービスを作ったり、既存のサービスを真似したり、重めのオリジナルサービス開発などしていきたいです。Railsチュートリアルもやりたいです。

---

以上、完走の喜びのまま色々と書いてみました。

これからも頑張っていきます！！！
thisのスコープ問題

ただのスコープ問題ですが、忘れたときにあたふたするのでメモ。

```javascript:index.js
var app = new Vue({
    el: "#posts",
    data: {
        posts: []
    },
    created: function() {
        axios.get("https://○○○/wp-json/wp/v2/posts/").then(function(response) {
            this.posts = response.data;
            console.log(this.posts)
        })
    }
});

// this.postsは[]のまま
```

then()の中ではthisの参照先が変わってしまうので、this.postsに値を代入してもdata内のpostsは変更されない。
then()の外で変数にthisを代入して、代入した変数をthen()の中で使用することで解決！

```javascript:index.js
var app = new Vue({
    el: "#posts",
    data: {
        posts: []
    },
    created: function() {
        var self = this;
        axios.get("https://○○○/wp-json/wp/v2/posts/").then(function(response) {
            self.posts = response.data;
            console.log(self.posts)
        })
    }
});
```

単純なミスだけど、たまに
ｱﾜ((ﾟﾟωωﾟﾟ ))ﾜﾜ!!
ってなる。
Amazon FSx for Windows ファイルサーバの Q&A

Amazon FSx for Windows ファイルサーバが[2018年11月に発表されました](https://aws.amazon.com/jp/blogs/news/new-amazon-fsx-for-windows-file-server-fast-fully-managed-and-secure/)。完全マネージド型Windowsファイルサーバであり、Windowsファイルサーバに広く採用されているSMB(Server Message Block)プロトコルを介してアクセスできます。こちらのご利用を検討するときに特に考えた方が良い点について Q&A 形式で纏めました。

#可用性・冗長性について

##### Q: FSx for Windowsファイルサーバに格納したファイルは、一つのアベイラビリティゾーン内で複製して保存されるか？

A: はい、一つのアベイラビリティゾーン内で複製して保存されます。

##### Q: FSx for Windowsファイルサーバを複数のアベイラビリティゾーンに跨って、データをレプリケートして稼働させることは可能か？

A: 2019年3月19日現在、FSx for Windowsファイルサーバの標準機能では、複数のアベイラビリティゾーンに跨って、データをレプリケートする機能は提供していません。ご自身で~~FSx for Windows ファイルシステム~~ (2019/3/20修正) DFSルートノードを担うWindows ServerのEC2インスタンスを異なるアベイラビリティゾーンに作成し、その上でご自身で、MicrosoftのDistributed File System (DFS)レプリケーションやネームスペース機能を使う形であれば、可能です。

#バックアップについて

##### Q: FSx for Windowsではバックアップを自動で取得するか？

A: はい、FSx for Windowsではバックアップを日次で自動で取得します。手動での取得も可能です。

##### Q: FSx for WindowsのバックアップはS3に保存されるのか？

A: はい、FSx for WindowsのバックアップはS3に保存されます。取得されたバックアップはFSx for WindowsのAWSマネージメントコンソール上では下図のように表示されます。取得したバックアップを選んでリストアも可能です。
![FSx-backup.PNG](https://qiita-image-store.s3.amazonaws.com/0/66106/8e0eba0c-0920-6894-9d4d-738e915453a2.png)

#Active Directory(AD)連携について

#####Q: オンプレミス環境にあるADサーバ、またはAmazon EC2(以下EC2)ベースのADサーバとFSx for Windowsファイルサーバは連携可能か？

FSx for WidnowsファイルサーバのAD連携については、現状 AWS Directory Service for Microsoft AD（以下、Microsoft AD) のみと連携が可能です。オンプレミス環境にあるADサーバ、またはEC2ベースのADサーバと連携するためにAWS Directory ServiceではAD Connectorを提供していますが、2019年3月現在ではFSx for WindowsではAD Connectorに対応していないため、AD Connectorを使った連携は現状不可です。

#####Q: Microsoft ADはオンプレミスのADサーバとレプリケーションが可能か？（こちらはFSx for Windows自体の質問ではなく、AWS Directory Serviceの質問）

A: いいえ、Microsoft ADはオンプレミスのADサーバとレプリケーションは不可です。



#ネットワーク接続について

#####Q: FSx for WindowsにAWS Direct ConnectやVPNで接続は可能か？

A: はい、FSx for Windowsが動作するVPCとのDirect Connect接続やVPN接続により、オンプレミスから接続が可能です。
Rails 6.0.0-beta3 と AdminLTE 3 の Docker開発環境を作る

以前作った[Rails5.2 + AdminLTE2のDocker開発環境](https://qiita.com/jb-vasseur/items/0f3e8569bb847bdba4fb)をRails6とAdminLTE3にアップデートしてみます。

https://gitlab.com/jvasseur/rails-adminLTE-docker/tree/rails6

## ruby/Rails/AdminLTEのバージョンアップ

Dockerイメージを`ruby:2.6-alpine3.9`に更新します。
Railsは現時点で`6.0.0.beta3`が最新です。
AdminLTEは最新版``を使います。

このステップはほぼ問題なく突破できました。

> [コミット](https://gitlab.com/jvasseur/rails-adminLTE-docker/commit/7f5448e404dd1f601bbdd90d2865749345adc64f)

参考：

* https://www.srockstyle.com/develop/3641/

## Webpackerの設定

ここからは結構ハードルが高くなります。

Rails6からWebpackerがデフォルトになるようです。選択としては以下です。

1. WebpackerでJavascript、CSS、imageすべて処理する
2. WebpackerでJavascriptを処理して、Sprocketsでimage assetsとCSSを引き続き処理する
3. Webpackerを削除して、もともと使っていたSprocketsのみで継続
4. Webpackerを削除して、Webpackに移行する[（！！）](https://github.com/shan-shan95/rails-vue-template)

4.は学習コストが高いので今度にしました。
3.は簡単でしょうけどあまり面白くなくて選択外にしました。
1.は途中で断念して2.にしました。Webpackerの学習コストもそれなりにあります。


大きいポイントとしては以下です。

* 依存ライブラリを参照する`application.js`は別のディレクトリに移動し、Webpackerで管理する。
* Webpackerの追加設定でjqueryを認識させる必要がある。

```js:config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  )

module.exports = environment
```

結果的に動きました！ただ、icheck.jsのエラーだけは解消できませんでした。。

<img width="1221" alt="Screen Shot 2019-03-14 at 15.47.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/260796/b5a37e50-18ee-bb93-56a8-962f01af1cd0.png">


<img width="1246" alt="Screen Shot 2019-03-14 at 15.47.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/260796/af745852-8bd0-efa7-c66b-e86233039cce.png">


> [コミット](https://gitlab.com/jvasseur/rails-adminLTE-docker/commit/b2f2c9e8b7f013b81c28ad9526df44ee353be481)

参考：

* https://github.com/rails/webpacker
* https://github.com/rails/webpacker/blob/master/docs/docker.md
* https://qiita.com/park-jh/items/dd279b6addf2c29202c3
* https://techracho.bpsinc.jp/hachi8833/2018_05_17/56568

## Webpackerを単独コンテナで動かす

以下手動で設定します、まだ自動化していません。

```ruby:config/environments/development.rb
config.webpacker.check_yarn_integrity = false
```

```yaml:config/webpacker.yml
development:
  dev_server:
    host: webpacker
    hmr: true
```

これでWebpackerが新しいコンテナで起動して、`webpack-dev-server`がHot Reload Modeで動きます。

```shell
# アプリやDBファイルを削除
$ rm -rf rails-app mysqldata
# 最初から作り直して動作確認する
$ docker-compose -f docker/docker-compose.create-rails.yml up --force-recreate
$ docker-compose -f docker/docker-compose.dev.yml build
$ docker-compose -f docker/docker-compose.dev.yml up
```

> [コミット](https://gitlab.com/jvasseur/rails-adminLTE-docker/commit/74045710dcd58346d5af77a3c59d445185b340f0)

参考：

* https://medium.com/soulmates-ai/running-a-rails-app-with-webpacker-and-docker-8d29153d3446
【Tips】Ubuntuへのpg gemインストール時に発生しうるエラーへの対処

# 問題：pg gem インストールの失敗
## 入力
```bash
gem install pg -v '0.18.4'
```

## 出力
```bash
ERROR:  Error installing pg:
        ERROR: Failed to build gem native extension.

    current directory: /home/【ユーザー名】/.anyenv/envs/rbenv/versions/2.4.5/lib/ruby/gems/2.4.0/gems/pg-0.18.4/ext
/home/【ユーザー名】/.anyenv/envs/rbenv/versions/2.4.5/bin/ruby -r ./siteconf20190314-768-1y18wv0.rb extconf.rb
checking for pg_config... no
No pg_config... trying anyway. If building fails, please try again with
 --with-pg-config=/path/to/pg_config
checking for libpq-fe.h... no
Can't find the 'libpq-fe.h header
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/home/【ユーザー名】/.anyenv/envs/rbenv/versions/2.4.5/bin/$(RUBY_BASE_NAME)
        --with-pg
        --without-pg
        --enable-windows-cross
        --disable-windows-cross
        --with-pg-config
        --without-pg-config
        --with-pg_config
        --without-pg_config
        --with-pg-dir
        --without-pg-dir
        --with-pg-include
        --without-pg-include=${pg-dir}/include
        --with-pg-lib
        --without-pg-lib=${pg-dir}/lib

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /home/【ユーザー名】/.anyenv/envs/rbenv/versions/2.4.5/lib/ruby/gems/2.4.0/extensions/x86_64-linux/2.4.0-static/pg-0.18.4/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /home/【ユーザー名】/.anyenv/envs/rbenv/versions/2.4.5/lib/ruby/gems/2.4.0/gems/pg-0.18.4 for inspection.
Results logged to /home/【ユーザー名】/.anyenv/envs/rbenv/versions/2.4.5/lib/ruby/gems/2.4.0/extensions/x86_64-linux/2.4.0-static/pg-0.18.4/gem_make.out
```

# 環境
- Windows Subsystem for Linux (WSL)
    * Ubuntu 18.04 LTS
- anyenv
    * rbenv 1.1.1-39-g59785f6
        + ruby 2.4.5p335 (2018-10-18 revision 65137) [x86_64-linux]

# 原因：PostgreSQLライブラリ
native extensionとして必要なPostgreSQLに関連するライブラリがインストールされていない。

# 解決方法
```bash
sudo apt install libpq-dev
gem install pg -v '0.18.4'
```

# 補足

`libpg-dev`ではなく`libpq-dev`（gではなくq）であることに注意。
どちらもPostgreSQLの略称であると思われるが、gemにおいてはpg、aptでインストールするパッケージにおいてはpqと略しているため注意が必要。前者は PostgreSQL Gem の略称の可能性もあるが。


# 参考文献
- [gem install pgしてNo pg_configとなる対処法](https://qiita.com/youcune/items/5b783f7fde45d0fd4b35)
- [パッケージ: libpq-dev (11.2-2)](https://packages.debian.org/ja/sid/libpq-dev)
- [Rails5.0.1環境でPosqgreSQL(v9.5.5)に接続する](http://d.hatena.ne.jp/namtcerid/20170112/1484245205)
Android Studio3.0以上で、Wear OS by Googleのアプリのプロジェクトを作る方法

## 対象者
Wear OS by Googleのアプリを作りたい方

## 前提条件
最新版のAndroid Studioをインストールしていること

## 手順

File > Create New Projectをクリック

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/183842/89f89908-5f7e-5618-61f6-a7d81e152206.png)

Wear OSのタブをクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183842/fb378181-5702-89a5-a307-91fc4492dfc5.png)

適切なアクティビティを選択し、Nextをクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183842/5f820974-9d27-d3f0-bab1-c3a24104f1dc.png)

適切に項目を埋める

スマートフォンのアプリと一緒に作りたい場合は、`Pair with Empty Phone app`にチェックをいれる

そして、Finishを押します

以上
git-bash for windows を快適にするためのいろいろ

git-bash 便利ですよね。ターミナル的に使うものはもう全部これでやってしまっています。

`C:\Program Files\Git` に Git がインストールされてるものとします。

### zipコマンドが使えるようにする

シェルスクリプトを使ってるとよくこけるんですよね。

[GNUWin32](https://sourceforge.net/projects/gnuwin32/files/) にいく

zip/3.0/zip-3.0-bin.zip と bzip2/1.0.5/bzip2-1.0.5-bin.zip を落としてきます。

前者から zip.exe 後者から bzip2.dll を引っこ抜いて、`C:\Program Files\Git\usr\bin` 以下に配置します。

使えるようになりました。

```
$ zip -v
Copyright (c) 1990-2008 Info-ZIP - Type 'zip "-L"' for software license.
This is Zip 3.0 (July 5th 2008), by Info-ZIP.
Currently maintained by E. Gordon.  Please send bug reports to
the authors using the web page at www.info-zip.org; see README for details.

Latest sources and executables are at ftp://ftp.info-zip.org/pub/infozip,
as of above date; see http://www.info-zip.org/ for other sites.

Compiled with mingw32 / gcc 3.4.5 (mingw-vista special r3) for
Windows 9x / Windows NT (32-bit) on Jul 13 2008.
```

### docker exec -it をするときにwinptをつけなくてよくする

` docker exec -it hogehoge /bin/bash` するだけで毎回怒られますのでめんどくさいですね。

`C:\Program Files\Git\etc\profile.d\aliases.sh `を開きます。

途中ループしているところに docker を追加します。

```diff
- for name in node ipython php php5 psql python2.7 
+ for name in node ipython php php5 psql python2.7 docker
```

もう標準でここに入ってても良い時期なんじゃないですかね？


### スラッシュで始まるテキストが勝手に、Windowsのパスとして読まれる問題

**スラッシュで始まるテキストが勝手に、Windowsのパスに変換されて補われてしまう**問題ってのがあってホントに困ります。 /bin/bash とかコマンド中に書こうものなら容赦なく `C:/Program Files/Git/usr/bin/bash.exe:` なんてのに置き換わってしまいます。たとえそれが文字列として渡したいだけでも強制的にです。

回避方法としては

* `//bin/bash` って書く
* 環境変数 MSYS_NO_PATHCONV=1 を設定する

があるようです。ぼくは // って書いてます。

### 履歴をかしこくする

Git Bash の履歴から重複したものを取り除いて記録します

```
echo "export HISTCONTROL=erasedups" > ~/.bash_profile
```

ちなみに、Git Bash なんですが履歴が上手く撮れてるときと取れてないときがあるような気がしてるんだけど気にせいかなあ。ちなみに履歴自体は `~/.bash_hisotry`  にあって直接触ることも出来ます。

----
また何か思いついたら追記していきます。
Windows7 で Docker Toolbox 使って立てた Nginx コンテナに default.conf をマウントしたい

Windows 7 で Docker コンテナにホストマシンにあるファイルをマウントしたいけどできなくて、調べた結果どういうことか理解できてマウントできたからメモ。

![qiita_20190314_1_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/365593/7c01f418-1553-d852-5a05-2b9af8d35420.png)

docker-compose.yml は↓の通り。

```yml
services:
  web:
    image: nginx:1.15.9-alpine
    volumes:
      - ./web/default.conf:/etc/nginx/conf.d/default.conf
```

コンテナ起動。

```
$ docker-compose up -d
ERROR: for docker_web_1  Cannot start service web: OCI runtime create failed: container_linux.go:344: starting container process caused "process_linux
.go:424: container init caused \"rootfs_linux.go:58: mounting \\\"/c/docker/web/default.conf\\\" to rootfs \\\"/mnt/sda1/var/lib/docker/overlay2/
4e5408b7aa6822b12405a15c1531a535e5008301ba684d80d6d3c9e9b5d75029/merged\\\" at \\\"/mnt/sda1/var/lib/docker/overlay2/4e5408b7aa6822b12405a15
c1531a535e5008301ba684d80d6d3c9e9b5d75029/merged/etc/nginx/conf.d/default.conf\\\" caused \\\"not a directory\\\"\"": unknown: Are you trying to mount
 a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type
```

ディレクトリをファイルにマウントしようとしてんじゃねーの？と怒られる。
めっちゃファイルだわ。
ちなみにこの現象、Mac では発生しない。

ググっても Docker for Windows ネタばかり。（今どき Windows 7 なんて誰も使わry）

COMPOSE_CONVERT_WINDOWS_PATHS を設定しろとか、共有フォルダにしろとか書いてあるけどよく分からん。
と思ってちゃんと調べたら解決したので備忘メモ。

そもそも Docker が動くのは VM（Virtual Box）上。
Docker がマウントしようとしてるのは VM 内にあるファイル（フォルダ）。
つまりこういうこと。

![qiita_20190314_1_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/365593/00be2a2a-4859-6552-ce33-841d8fe8454d.png)

この辺を理解している賢い人がこう言っている。
「VMにフォルダを共有しろ」

↓このページを参考に共有設定をする。
[Docker toolbox on windows マウント：Dockerコンテナの中でホストのフォルダを見たい](https://qiita.com/hnishi/items/db10505e36c95587851d)

VM に入ってマウントされていることを確認する。（共有したのは C:\docker）

```
$ docker-machine ssh default 'ls /c/docker'
```

Docker を起動してファイルがマウントされていることを確認する。

```
$ docker-compose up -d
$ docker exec -it [コンテナ名] cat /etc/nginx/conf.d/default.conf
```

おわり。
ChromeExtention公開時になっていきなり「予期しないエラー」が発生してしまう問題

# 発生したバグ
デベロッパーツールの段階では問題なく動いたのに、公開する瞬間になっていきなりエラーが出てしまう。
![キャプチ.PNG](https://qiita-image-store.s3.amazonaws.com/0/220092/afcdca4a-ca81-9e84-6025-f323b20aa832.png)
19行目の3文字目に問題があると思われるが、そこに特に問題はない

```json:manifest.json
"background": {
	"scripts": [ "background.js" ],
	// recommended
	"persistent": false
},//ここ
  "browser_action": {
```
バージョン情報：Google Chrome 73

# 解決方法
![キャプチャ1.PNG](https://qiita-image-store.s3.amazonaws.com/0/220092/157f5489-1695-a4f8-14ed-af252215532c.png)
問題箇所は17行目のコメント。上の色分けで察せると思いますがJSONではjavascriptライクなコメントは許されていません。
ですが、デベロッパーツールで開発しているとき、何故か弾いたり警告してくれません。
公開段階で初めて怒られる（しかも指摘箇所がズレてる）のでかなり戸惑います。

# 参考サイト

[stackoverflowにある同様の質問に対する解答](https://stackoverflow.com/questions/33926653/unexpected-char-error-when-uploading-chrome-extension/38286155#38286155)
mruby-yabmのdummy

あまりrubyが得意じゃなくて、ちょくちょく構文エラーとかで引っかかるので、実機に焼く前にhost側でもある程度確認できるように[mruby-yabm](https://github.com/yamori813/mruby-yabm)にdummyをつっこんでみました。

host側のビルド設定に以下を追加します。

```ruby
  cc.defines << %w(YABM_DUMMY)
  conf.gem :github => 'yamori813/mruby-yabm'
```

これで、yabmのクラスやprintなどのメソッドが利用できます。

```
% ./mruby/build/host/bin/mruby samples/hello.rb
Hello Bear Metal mruby on YABM.........
```

結構便利です。

ほぼほぼ同等なconfig作ってみました。

```ruby
MRuby::Build.new('yabm') do |conf|
  # Gets set by the VS command prompts.
  if ENV['VisualStudioVersion'] || ENV['VSINSTALLDIR']
    toolchain :visualcpp
  else
    toolchain :clang
  end
  cc.defines << %w(MRB_WITHOUT_FLOAT)
  cc.defines << %w(YABM_DUMMY)
  conf.gem :github => 'yamori813/mruby-yabm'
  conf.gem :github => 'yamori813/mruby-simplehttp'
  
  conf.gem :core => "mruby-string-ext"
  conf.gem :core => "mruby-sprintf"
  conf.gem :core => "mruby-bin-mruby"  
end
```

mruby-simplehttpのレポジトリはオリジナルのmatsumoto-rさんのものでも大丈夫ですが、クロスも含めてビルドする場合は私のレポジトリを使ってください。

FreeBSD 11とMac OS X 10.6で試しました。

ガジェットで動くmrubyはいろいろありますが、mruby on YABMの強みはOS環境と同じようにSimpleHttpでTLS通信ができることだと思います。
AWS S3でフォルダの名称を変更（Java）

# AWS S3でフォルダの名称を変更したい
そもそもAWS S3にはフォルダという概念はないので、「フォルダ」という呼称は不適なんですが。
（この場合は、「キー」と呼称するほうが適切なのかな？）

とりあえず便宜上「フォルダ」と呼びます。

# AWS S3は一度作ったフォルダの名前は変更できない
いきなり出来ねえってなんだよ、と思われるかもですが出来ません。
ManagementConsoleから変更しようとしてもダメ。

ナンデ？と思った自分は、とりあえず下を見て理解しました。
そらそうだ。Key-Value型の単なるデータストアなんだもんね…

「Amazon S3における「フォルダ」という幻想をぶち壊し、その実体を明らかにする」
https://dev.classmethod.jp/cloud/aws/amazon-s3-folders/

# 新規フォルダを作成→中身コピー→元フォルダを削除
どないせいっちゅうんじゃ、となりますが以下で実現可能できました。
Unix/Linuxにおけるリネームコマンドと同じ要領ですね。

    public void changeFolderName(String bucketName, String oldPrefix, String newPrefix){
        AmazonS3 s3 = new AmazonS3Client(new ClasspathPropertiesFileCredentialsProvider());
        ObjectListing listing = s3.listObjects(bucketName, oldPrefix);

        for (S3ObjectSummary summary: listing.getObjectSummaries()) {
          String oldKey = summary.getKey();
          String newKey = new StringBuilder().append(newPrefix).append(oldKey.substring(oldPrefix.length())).toString();
          s3.copyObject(bucketName, oldKey, bucketName, newKey);
          s3.deleteObject(bucketName, oldKey);
        }
    }
text-align: center, margin 0 auto〜左右中央寄せする二つの方法

## 対象とする読者

- 中央寄せをコピペでやっている人
- css初心者

## 初めに
中央寄せって難しくないですか？？？

```
text-align: center;
```

指定しても中央寄せにならない、、、
などで結構悩んだりしてます。

検索すると[CSSで中央寄せする9つの方法](https://saruwakakun.com/html-css/basic/centering)のように様々な方法が紹介されていたりします。

多くの方法が乗せられていると色々試せるので、本当にありがたい限りでよく使わせていただいているのですが、

**数が多すぎてどれを使えば良いのかわからない！！！**問題が発生します。

なので今回は上のサイトで使われている２つの方法を詳しく見ていってどういう風に使えば良いのかを考えて行きます。

色々やると自分も混乱するので**左右**中央寄せだけ見ていきます。


- div
- img
- button

を中央よせすることが多かったのでこれらの方法を見ていきます。

## 一つ目：text-align:center
一つ目はtext-align:centerです。

検索すると結構出てくるのではないでしょうか。

text-align: center;
の意味は`インライン要素を中央寄せすることができる`です。

そもそもとして、htmlの要素は基本的に

- インライン要素
- ブロック要素

の二つに分類されます。
上にあげた要素で考えると

div:ブロック要素
img,button:インライン要素

なので、div以外はtext-align:center;で左右中央寄せになるはずです。
実際にコードで見てみます。
html

```html
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="sample.css">
    <title>タイトル</title>
  </head>
  <body>
    <div class="parent">
      <button type="">サンプルボタン</button>
      <img src="https://reasonable-code.com/wp-content/uploads/2019/01/4e9f0cba1d7b4e2c234cb6358536e775.jpeg" alt="サンプル画像">
    </div>
  </body>
</html>
```
css

```css
.parent{
  text-align: center;
}
```

![スクリーンショット 2019-03-11 17.32.07.png](https://qiita-image-store.s3.amazonaws.com/0/231063/647bee1d-edbe-c04f-2f06-a4c8ebba509d.png)
実際の画面はこのようになります、しっかりと中央よせできていることが確認できますね。
注意点としては親要素にtext-alignを記述します。

### text-align:centerが効かない原因
ここでですが、親をインライン要素にすると中央よせできなくなります。
inline要素の親にはblock要素を指定しましょう。



## 二つ目:margin 0 auto;
一つ目でinline要素を中央よせする方法は理解しました。
では、**ブロック要素**はどうするのか、となります。

これを解決するのが**margin 0 auto;**になります。
marginは要素の**外側の余白**です。

### auto とは
marginに指定するautoは余白を自動で調整してくれるプロパティになります。
左右にautoを指定することで左右中央寄せになります。

これはおまじないで覚えてしまってもいいです。

それを踏まえて考えると、margin 0 autoの意味は

```
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
```

となります。
こちらでブロック要素の左右中央寄せは実現することができます。

### margin 0 auto;が効かない原因
基本的にブロック要素は指定がないと親要素の100%の大きさになります。

親要素と同じ大きさであれば
たとえmargin 0 autoを指定していたとしても左右中央寄せになりません。

なので指定する際はwidthプロパティで横幅を指定するようにしましょう。

## 終わりに
text-align center;
margin 0 auto;
と二つの左右中央寄せの方法を見ていきました。

混乱することが多いので手を止めて理解してから使うことをお勧めします！
もそ、プログラミングを学ぶ【Ruby on Rails】〜first_or_initialize メソッドについて〜

相変わらず理解が追いつかず、ターミナルに並ぶ表示に目を泳がせながらRuby on Railsを学習をしている もそ。
今日はWeb上のHTMLからある特定のデータを抜き出す処理、**スクレイピング**を覚えました。

個人的な気分としては、

▼ もそ は スクレイピング をおぼえた！
▼ もそ の　レベルが 1 上がった！

みたいな感じなのですが、実際は全然まだスクレイピングを使いこなせていません...
そこで今回は、スクレイピングを行った際に登場するメソッドの一つについて書いていこうと思います。

##first_or_initialize メソッドとは？

このメソッドは、レコードから情報を検索する**whereメソッド**と一緒に使います。
まずwhereで検索した条件のレコードがあれば、そのレコードのインスタンスを返します。
もしもレコードがない場合は、インスタンスを新しく作ります。

言葉で説明すると少しわかりづらいので、コードと図を交えながら説明していきます。

```
user = User.where(nickname: "MOSO").first_or_initialize
```
たとえば上記のコードでは、whereメソッドを使ってnicknameが"MOSO"というユーザーを検索しています。

この検索結果によって、下の図のように処理が変わります。
どうなるかというと、
![無題1142.jpeg](https://qiita-image-store.s3.amazonaws.com/0/372174/db92dc18-1196-6c58-f154-9ce06c529326.jpeg)

この「あるとき〜！」「ないとき〜...」の部分、関西人は某肉まんのCMのノリで読んでください。
おそらく関西人の皆さんの脳内では「551のほ〜うらいっ！」まで自動再生されるはずです。
...話がそれてしまいました。

ここで大事なのは、**whereの検索結果によって情報を取得or新規作成をする**という部分。
この処理を行わないと、スクレイピングをしたときに同じ情報（上記の例だとユーザー"MOSO”の情報ですね）がどんどん増えていってしまいます。
逆にこの処理をしてしまえば情報は重複せず、かつ**新しい情報だったときは自動的にデータを追加してくれる**というとても便利なメソッドです。


--
エラーを出して原因がわからん！と夫ポチにいうと、「はよワイに追いついて〜」とGitHubのレポジトリを送ってきやがりました...悔しい...。
果たしてポチに追いつける日は来るのか？もその学習は続く。
Rubyのハッシュをキー・配列のペアとして使いたい場合の簡易な記法について

# 動機

忘れてた記法を思い出したので自分用メモ。

# 注意書き

知っている人は普通に知っています。

# 本編

## やりたいこと

ハッシュのキーと配列を対応させたいのでやってみます。

```ruby
hash = {}
hash[:key] << 'value'
```

上のコードを実行すると、

```ruby
# NoMethodError: undefined method `<<' for nil:NilClass
```

で怒られてしまいます。
それを避けるため、

```ruby

hash = {}
hash[:key] = []
hash[:key] << 'value'
```

とすれば動作はしますが、読みづらいし、何よりキーが複数あるとキーごとに配列を初期化する必要があります。これはやる気をなくしますね。

## 解決策

```ruby
hash = Hash.new {|h, k| h[k] = []}
hash[:key] << 'value'
hash
# => {
#    :key => [
#        [0] :value
#    ]
#}
```

（上記の出力は`awesome_print`というgemを使った場合のものです）

Rubyの`Hash.new`はブロック引数を取ることができ、その中で未知のキーが来たときの初期化の方法を指定できます。ここでは空の配列を入れるようにしています。

# 結論

Ruby便利。
Firefox Sendを独自サーバーに導入

#Firefox Send
「Firefox Send」は、2017年に実験的に提供され、2019年3月に正式版となったファイル共有サービスです。Githubでソースコードが公開されており、独自に構築することができます。
ファイル共有時に、ダウンロード回数やダウンロード可能な日数、パスワードをかけることができ、アップロードしたファイルは暗号化され、ダウンロード回数またはダウンロード日数を過ぎたものはアクセス不可になるなど、某ファイル共有サービスよりも安全に使用することができると思われます。
![firefox_send.png](https://qiita-image-store.s3.amazonaws.com/0/41414/8e8b7a90-6edc-7a53-66e8-c7c799ed7569.png)

## 利用可能なWebブラウザ
Firefoxの他に、Google Chrome、Microsoft Edgeで動作確認できました。Internet Explorerは非常に古いWebブラウザのため対応していませんでした。

#Firefox Sendを独自サーバーに入れる
とはいえ、Firefox Sendは[https://send.firefox.com/](https://send.firefox.com/)で公開されていますが、そちらを使われると組織のITシステムを管理するものとしては不安です。そこで独自にサーバーを用意し、Firefox Sendを立ててしまいましょう。
[https://send.firefox.com/](https://send.firefox.com/)にはアクセス制限をかけ、代わりに独自サーバーの方のFirefox Sendを使ってもらえば良いわけです。

##用意したサーバー
特に制限はありませんのでお好みのIaaSで仮想サーバーを用意します。私は、IBM Cloud IaaSに、メモリ1GBの仮想サーバーを用意し、作業しました。

##作業用ユーザーの作成
rootアカウントで発行されたと仮定します。
先ず、user1 という作業用ユーザーを作成します。

```
# apt-get update -y
# apt-get upgrade -y
# adduser user1
# gpasswd -a user1 sudo
```
## Node.jsのインストール
続けて、Node.jsをインストールします。
一度SSH接続を閉じ、作業用ユーザーでサーバーにSSH接続します。Node.jsをインストール後、サーバーを再起動します。

```
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ sudo reboot
```
## Fail2ban/git のインストール
作業用ユーザーでサーバーにSSH接続します。
SSHへの簡単なセキュリティ対策として総当たり攻撃を防ぐ「fail2ban」と、Firefox Sendのソースをダウンロードするために「git」をインストールします。

```
$ sudo apt-get install git
$ sudo apt-get install fail2ban
$ sudo systemctl start fail2ban
$ sudo systemctl enable fail2ban
```
## Firfox Sendのインストールと起動。
続けてGithubから、Firefox Sendのソースコードを取得し、インストール。起動します。

```
$ git clone https://github.com/mozilla/send.git
$ cd send/
$ npm install
$ nohup npm start > out.log 2> err.log &
```
nohup npm start で起動しています。
この時点で、DNSへの紐づけを行っていなければ、「http://サーバーの公開IP:8080」にアクセスすることで、Firefox Sendを使用することができます。

#Firefox Sendを使う
##送信者：アップロード
独自サーバーに構築したFirefox Sendにファイルをアップロードしてみましょう。
Firefox Sendにアクセスし、ファイルをアップロードします。
「有効期間」や「有効なダウンロード回数」、「パスワード」をかけることができます。
![firefox_send_share_1.png](https://qiita-image-store.s3.amazonaws.com/0/41414/f8fe76a1-e478-322d-f389-6e6855922cbd.png)

##送信者：共有URL
「アップロード」を実行すると、共有URLが発行されました。この共有URLをファイルを共有したい人にメールなどで伝えます。パスワードをかけてある場合は、別途伝えましょう。
![firefox_send_share_2.png](https://qiita-image-store.s3.amazonaws.com/0/41414/b9a6a026-68be-9f1c-cbf9-d4c303828fba.png)

##受信者：ダウンロード
共有URLを受け取った人は、パスワードがかかっている場合はパスワードの入力を求められます。
![firefox_send_share_3.png](https://qiita-image-store.s3.amazonaws.com/0/41414/bc2b17e4-4f19-0670-fdb8-0a723a8f5c50.png)

ファイルをダウンロードします。
![firefox_send_share_4.png](https://qiita-image-store.s3.amazonaws.com/0/41414/4bc31b3d-4c69-f443-3df1-ae5978637082.png)

## 共有URLの無効化
ファイルアップロード時に送信側で、「有効期間」や「有効なダウンロード回数」を設定した場合、「有効期間」と「有効なダウンロード回数」のどちらかを満たすと共有URLが無効になり、ダウンロードできなくなります。
![firefox_send_share_5.png](https://qiita-image-store.s3.amazonaws.com/0/41414/02bda9bd-7295-e49b-937c-1302f1fac9d9.png)

# Firefox Sendの設定
Githubから複製したダウンロードしたFirefox Sendのソースコードのうち、server/config.js が設定ファイルに該当するようです。[ドキュメント](https://github.com/mozilla/send)を読み、設定を変えてAmazon S3連携などを試してみましょう。
iOSアプリのURLを知る方法

この記事では `アプリ公開前` と `アプリ公開後` それぞれについて、iOSアプリのURLを確認する方法をまとめています。
類似の記事はいろいろあるんですが、古い情報や余計な情報が含まれているものが多いので、URLの調べ方だけにフォーカスしてまとめ直しました。

# アプリ公開前

- アプリに割り当てられた`Apple ID`を調べて以下のURLに当て込む  
  `https://itunes.apple.com/jp/app/id[アプリのApple ID]?mt=8`
    - e.g. 「iPhoneを探す」 の場合  
      https://itunes.apple.com/jp/app/id376101648?mt=8
    - アプリのApple IDの調べ方
        - App Store Connect (旧iTunes Connect) の`App情報` -> `一般情報` -> `Apple ID`  
        <img width="500" alt=" 2019-03-14 15.34.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/112663/c6622d84-2d09-6292-d17e-cb188b1ae705.png">
    - `mt=8`はiOSアプリであることを示すパラム
        - macOSアプリの場合は`mt=12`
    - `mt`以外のパラムとして`l`や`ls`などがありますがこの記事では触れません  
      興味がある方は  
      https://geniuslink.com/blog/parameter-cheat-sheet-for-itunes-and-app-store-links/
    - `アプリ名`や`デベロッパ名`を使うリンクもありますがこの記事では触れません  
      興味がある方は  
      https://developer.apple.com/library/archive/qa/qa1633/_index.html

# アプリ公開済み

ストアアプリの検索に特化したLink Makerは使えなくなり以下に置き換わったようです。
[マーケティングツールとリソース - Appleサービス](https://toolbox.marketingtools.apple.com/ja-jp?sf=jp)
アプリの検索結果は結構下の方にスクロールする必要があります。

- ~~Link Maker https://linkmaker.itunes.apple.com/ja-jp  
  でURLを知りたいアプリを探してタップ~~  
  <img width="200" alt=" 2019-03-14 16.27.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/112663/3a501146-9f4b-1d05-77ce-38c1cb0186db.png"> →タップ→ <img width="200" alt=" 2019-03-14 16.29.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/112663/5c8c0586-7509-4ae4-e213-c11a5fb9cf0d.png">
Djangoの使い方～環境構築編～

##はじめに
この記事ではwindows10にインストールしたPython3を使っています。
～下記を参考にさせていただきました～
[Pythonの仮想環境を構築できるvirtualenvを使ってみる](https://qiita.com/H-A-L/items/5d5a2ef73be8d140bdf3)
[DjangoGirlsチュートリアル](https://tutorial.djangogirls.org/ja/)
## Pythonをダウンロードする
ここから自分のOSに合ったPythonをDLします。
https://www.python.org/downloads/


個人的にはPython本体だけでなく、様々なライブラリが入っているので
Anacondaがオススメです。
https://www.anaconda.com/distribution/

## コードエディタをダウンロードする
AnacondaをDLしていればSpyderというコードエディタが入っています。


オススメのコードエディタ
・VSCode
https://code.visualstudio.com/

・Atom
https://atom.io/

・Gedit
https://wiki.gnome.org/Apps/Gedit#Download

・Sublime Text
https://www.sublimetext.com/3


ちなみに私はVSCodeを使っています。

## 仮想環境を作る
仮想環境を作ることで安心して色々試せるようになります。
ここからはコマンドプロンプトを使っていきます。


ホームディレクトリ(C:\Users\Name)に新しいディレクトリdjangogirlsを作成します。

```ruby:command-line
$ mkdir djangogirls
$ cd djangogirls
```


myvenvという仮想環境（virtual environment）を作成します。

```ruby:command-line
$ python3 -m venv myvenv
```

これでdjangogirlsディレクトリにmyvenvという仮想環境ができました。


次に仮想環境を実行します。

```ruby:comand-line
C:\Users\Name\djangogirls > myvenv\Scripts\activate
```


これで仮想環境の設定ができました。
## Djangoのインストール
**AnacondaをダウンロードしていればDjangoもデフォルトで入っていますので、
この章は飛ばしてください。**

```ruby:command-line
$ conda list
```
で現在入っているライブラリをみることができます。


Djangoインストール前に最新バージョンのpipをインストールします。

```ruby:command-line
(myvenv) ~$ python3 -m pip install --upgrade pip
```

## Requirementsファイルによってパッケージをインストールする
Requirementsファイルはpip installでインストールするためのパッケージリストが記載されているファイルです。
コードエディタを使用して、djangogirls/直下に requirements.txt ファイルを作ります。
djangogirls
└───requirements.txt
djangogirls/requirements.txt ファイル中に以下のテキストを追加します

```djangogirls/requirements.txt
Django~=2.0.6
```


Djangoをインストール

```ruby:command-line
(myvenv) ~$ pip install -r requirements.txt
Collecting Django~=2.0.6 (from -r requirements.txt (line 1))
  Downloading Django-2.0.6-py3-none-any.whl (7.1MB)
Installing collected packages: Django
Successfully installed Django-2.0.6
```

## Gitのインストール
**既にインストール済みの方は飛ばしてください。**
「PATH環境を調整する(Adjusting your PATH environment)」というステップでは、「WindowsコマンドプロンプトからGitとオプションのUnixツールを使用する(Use Git and optional Unix tools from the Windows Command Prompt)」（一番下の選択肢）を選択します。 それ以外はデフォルトの設定値で構いません。
インストール終了後はコマンドプロンプトを再起動します。
https://git-scm.com/


## GitHubのアカウント作成
**既に作成済みの方は飛ばしてください。**
アカウントを作成します。
https://github.com/

## PythonAnywhereのアカウント作成
ここではデプロイするためにPythonAninwhereを使います。
https://www.pythonanywhere.com


##おわりに
以上で環境設定編は終了です。次からは実際にDjangoを使っていきます！
次回→[Djangoの使い方～ウェブサイト作成編～](https://qiita.com/aMMhEXi1gdZR9oq/items/0417768da7dd6e7ccfa3)
MySQL CASE文でNULLの分岐はコツがいる

# はじめに
CASE文でNULLの分岐は単純にはできません。
ほんとだよ！

例としてusersというテーブルがあって、
その中に名前(name)と体重(weight)のフィールドがあるとします。


|id|name|weight|
|:--|:--|:--|
|1|Aさん|50|
|2|Bさん|60|
|3|Cさん|70|
|4|Dさん|80|
|5|Eさん|NULL|

# やりたいこと
こんなことする機会があるかどうかはおいといて！
**体重を測っている人の名前の後ろに(計測済)、測っていない人の名前の後ろに(未計測)とつけたい**
つまりこうしたい。

|id|name|weight|
|:--|:--|:--|
|1|Aさん(計測済)|50|
|2|Bさん(計測済)|60|
|3|Cさん(計測済)|70|
|4|Dさん(計測済)|80|
|5|Eさん(未計測)|NULL|

# やりがちなこと
何も知らずにSQLを書いたらこうなると思います。（俺はこう書いた）


```sql
UPDATE users
SET name = 
   CONCAT(name,
          CASE weight WHEN NULL THEN "(未計測)" ELSE "(計測済)" END
         );
```

しかしこれだと結果が

|id|name|weight|
|:--|:--|:--|
|1|Aさん(計測済)|50|
|2|Bさん(計測済)|60|
|3|Cさん(計測済)|70|
|4|Dさん(計測済)|80|
|5|Eさん(計測済)|NULL|

となってしまいます。

``CASE xxx WHEN NULL``でNULLの分岐はできないんですねえ...

# 解決方法
こうするとNULLで分岐ができます。

```sql
UPDATE users
SET name = 
   CONCAT(name,
          CASE weight IS NULL WHEN 1 THEN "(未計測)" ELSE "(計測済)" END
         );
```

これはほんの一例なので他にも方法はあります。

# 終わりに

ということでCASE文でNULLの分岐はコツがいるという話でした。

ブログで見たい方はこちら
[MySQL CASE文でNULLの分岐はコツがいる](http://nabesys.com/article/2019/03/14665/)
VMware Workstation Palyer/Ubuntu 18.04 でウィンドウのサイズ変更ができないとき

下記リンクにしたがって、以下のコマンドでとりあえず直る。深入りはしていない。

```sh
sudo systemctl restart open-vm-tools.service
```

Ubuntu 18.10 guest automatic screen resize not working · Issue #303 · vmware/open-vm-tools https://github.com/vmware/open-vm-tools/issues/303
【UiPath】交通費検索ロボットをブラッシュアップしてみる（その１）

[【UiPath】交通費検索ロボットを作ってみる](https://qiita.com/irohamaru/items/1a71000c650089ccd41d)
をベースに以下のような機能拡張をしてみたいと思います。

- 検索オプション（料金が安い順、など）を外部ファイルから設定できるようにする
- エラーハンドリング全般
- 全国に複数存在する駅名を記入した場合の動作（例）赤坂、大手町など
- 精算書に記入された金額と検索結果の金額に差分があった場合の動作
- 路線検索結果をキャプチャ保存


1つずつ説明します。

##検索オプション（料金が安い順、など）を外部ファイルから設定できるようにする
「設定マスタ」という外部ファイルを持たせることにより、ロボットの修正をせずとも設定を変えられるようにします。
今回は、交通費精算書の各項目の列位置、列番号、検索オプションなどを設定マスタに持たせます。

##エラーハンドリング全般
前回同様、[Yahoo!路線検索](https://transit.yahoo.co.jp/)を使って交通費精算ロボットを実装していきます。

路線検索で起こりえるエラーをなるべく吸収したいので、今回はそのあたりを細かく実装します。
例えば、**From：１２３４５６７ To：東京**で検索すると**「１２３４５６７」に該当する出発地はありませんでした。**とエラーメッセージが表示されます。

ただ、このエラーが出たからといって後続の路線検索を中断してロボットを止めてしまうよりは、交通費精算書に記述された路線全部を一通り検索してあげたほうが使い勝手が良さそうです。

このように、エラーが生じた場合の後続処理は、ユーザーの使い勝手を考慮したうえでベストと思われる処理を実装します。


##全国に複数存在する駅名を記入した場合の動作
交通費精算ロボットを作るうえで厄介なところです。

例えば、「赤坂」という駅名は東京だけでなく福岡にもあり、一意に駅を特定できません。
そのため、Yahoo!路線検索では検索ボタン押下後に駅名選択プルダウンが表示され、ユーザーに選択してもらう仕様となっています。

今回はその選択プルダウンを交通費精算書に貼り付け、ユーザーに一度差し戻すようにします。
一意に駅を選択してもらった後、再度ロボットを実行してもらう流れです。

##精算書に記入された金額と検索結果の金額に差分があった場合の動作
すでに交通費が記入されていた場合は、その金額が正しいか（差分がないか）チェックを行います。
例えば**From：新宿 To：東京**の場合、最も安い金額の経路の場合は194円ですが、記入されている金額が300円となっていた場合、差分金額を記入するようにします。

##路線検索結果をキャプチャ保存
ロボットがどんな路線検索結果をもとに料金を割り出したか後で分かるように、路線検索結果のキャプチャを保存するようにします。

##完成イメージ動画
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【UiPath】交通費検索ロボットをブラッシュアップしてみる（Qiita用） <a href="https://t.co/k9QPrvWOC3">pic.twitter.com/k9QPrvWOC3</a></p>&mdash; いろはまる (@irohamaruRabbit) <a href="https://twitter.com/irohamaruRabbit/status/1106095394084151296?ref_src=twsrc%5Etfw">2019年3月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##前提条件
デスクトップ直下に以下構成のフォルダ群を用意します。
（例）**デスクトップ\交通費精算ロボット**直下のフォルダ群↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/186221/c6480b10-073f-c6bd-ee3d-5b2fa7a1cd9a.png)

- 01_テンプレート
交通費精算書のテンプレートファイルを配置

- 02_マスタ
ロボットが参照するパラメータが記載された「設定マスタ」を配置

- 03_交通費精算書
ロボットが処理する交通費精算書を配置するフォルダ

- 04_交通費検索結果
ロボットの処理結果（路線検索結果の画面キャプチャなど）を配置するフォルダ


##交通費精算書イメージ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/186221/33b5a215-9aac-9d9a-f01c-01de04188e19.png)

##設定マスタイメージ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/186221/3f1b6003-4216-d37e-c495-bbf20aca4072.png)


次回から実装に入ります。
Vuetify+VeeValidateでラジオボタンにvalidationをかけるとき

備忘録。

```JavaScript
<v-radio-group
  v-model="catType"
  v-validate="'required'"
  :error-messages="errors.collect('catType')"
  name="catType">
  <p class="body-1">ねこの種類</p>
  <v-radio
    label="アメショ"
    value="as" />
  <v-radio
    label="ロシアンブルー"
    value="rb" />
</v-radio-group>
```

v-validate、error-messagesはボタンを囲っている「v-radio-group」に対して設定する。

※error-messages
　Vuetifyの場合、ここにエラー内容を入れると入力欄に紐づく形で表示される。
LPIC用語 単語 読み方 作成中

LPICの勉強しようと始めてみたはいいものの、英語の(頭文字だけとって繋げたやつとか)読み方がわからないのでいちいち止まる(漢字が読めない子供のような)のがストレスなので、超初心者の私の言葉で単語、用語をメモ



■SCSI スカジー  USBみたいなやつ

■sysfs シス エフエス  ドライバとデバイスの関係をわかりやすくする仮想ファイルシステム

■udev ユーデブ 　デバイスをファイルとして管理する技術。カーネルがデバイスを検知して/sys以下を更新する  →  これを感知して/etc/udev/rules.dの.rulesのファイルの情報に基づいて/udev以下にデバイスファイルを作成する

■IRQ アイアールキュー　Interrupt ReQuest　インターラプトリクエスト  割り込み要求　周辺機器や内部装置からCPUへの割り込み要求

■I/Oポート アイオーポート input/outputの略　CPUと周辺機器が通信を行うための窓口となる端子や回路のこと 

■D-Bus（Desktop Bus　プログラム同士が情報を伝達するプロセス間通信機構のひとつ

■UEFI（Unified Extensible Firmware Interface）統一された拡張ファームウェアインターフェース　IntelがBIOSを置き換えるために考案したEFIの統一仕様です。GUIでの操作をサポートしていたり、ファームウェアが使用可能なメモリ量の上限が緩和されているなど、BIOSよりも高機能化しています。

■BIOS（Basic I/O System）バイオス

■GPT（GUID Partition Table

■PCI(Peripheral Components Interconnect)周辺機器相互接続

■PCIデバイスとはPCIバスに接続されたデバイスのことです。PCIデバイスにはネットワークカード(NIC:Network Interface Card)やSCSIカードなどがあります。

■VMware ヴイエムウェア


■DMA　ディーエムエー　Direct Memory Access　CPUあまり使わず周辺機器同士でデータをやり取りできる技術の名前

■DMAコントローラ　CPUから指示を受けデータの処理をする、マザーボードなどに取り付けられるICチップ 

■DMAチャンネル　DMAコントローラと各装置のデータ通信経路のこと。



■コマンドついて

. カレントディレクトリ 今いるディレクトリ

..  親ディレクトリ  一つ上のディレクトリ

~  ホームディレクトリ　 読みはチルダ

/  ルートディレクトリ  最上位ディレクトリ

proc  プロック  Process プロセスの略　ハードウェアとシステムリソースなどの情報を扱うための擬似的なファイルシステム。ハードディスク上にファイルは存在せず、システムが起動する際にメモリ上に作成される


etc  エトセ  etc.エトセトラの意味？
react nativeのImageのresizeModeについてメモ (初心者向け)

react nativeで画像の横幅、縦幅を決定するには、heightとwidthを指定すれば良いが、
画像の縦横比率を変えるにはresizeModeプロパティを指定する必要がある。

以下のように使う。

```jsx

<Image
  style={{width: 100, height: 50}}
  resizeMode='contain'
  source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
```

resizeModeで指定できる文字
1.cover 指定したheightとwidthのうち、大きい数値に合わせ画像が大きくなります。　画像の縦横比は崩れません。
2.stretch 指定したheightとwidthに合わせて画像が大きくなります。画像の縦横比は崩れます。
3. contain 指定したheightとwidthのうち、小さい数値に合わせて画像をリサイズします。　画像の縦横比は崩れません

以下はぼ使わない。
center 使い道はない。
repeat：　一枚の画像を、一画面に何個も表示する。使い道はない。
うちの検証サーバー構築用のメモ

##ドライバー
####チップセットドライバー
https://downloadcenter.intel.com/ja/download/28182/-INF-?product=53

####FC HBAドライバー
http://driverdownloads.qlogic.com/QLogicDriverDownloads_UI/ShowEula.aspx?resourceid=32781&docid=96206&ProductCategory=39&Product=1261&Os=211

####25Gb NICドライバー
http://driverdownloads.qlogic.com/QLogicDriverDownloads_UI/ShowEula.aspx?resourceid=32816&docid=96466&ProductCategory=322&OsCategory=1&Os=211&OsCategoryName=Windows&ProductCategoryName=Converged%20Network%20Adapters&OSName=Windows%20Server%202016%20(x64)

####オンボードNIC
http://azby.fmworld.net/app/customer/driversearch/ia/drviadownload?driverNumber=F1026519

####VGAドライバー
http://azby.fmworld.net/app/customer/driversearch/ia/drviadownload?driverNumber=F1026156

####PRIMERGY iRMC HTI デバイス ドライバ
http://azby.fmworld.net/app/customer/driversearch/ia/drviadownload?driverNumber=F1026134

##ベンダーダウンロードページ
http://www.fujitsu.com/jp/products/computing/servers/primergy/downloads/
Raspberry Pi3へのUbuntu18.04 serverの導入

Raspberry Pi3にUbuntu18.04 LTS Serverの導入。
OSのダウンロード、書き込み、ネットワークの設定、ユーザ名とホスト名の変更について書いてます。

## 必要なもの
- Raspberry Pi 3 Model B+
- micro SD(8GB以上あったほうがいい)
- Raspberry Pi電源用のmicro USB
- HDML端子　& ディスプレイ
- LANケーブル
- PC


## OSイメージのダウンロード
[Ubuntu WikiのRaspberry Piのサイト](https://wiki.ubuntu.com/ARM/RaspberryPi#Official_images)から対象のOSイメージ(ubuntu-18.04.2-preinstalled-server-armhf+raspi3.img.xz)をダウンロードする。

## SDカードへOSイメージを書き込む
micro SDカードをpcに接続する。
OSイメージを書き込む前にアンマウントする必要がある。

### Ubuntuの場合
SDカードの名前を確認

```
$ ls -l /dev/mmcblk0*
```

アンマウントが必要かを確認

```
$ df -h
```

/dev/mmcblk~が表示されたら以下のようにアンマウントする

```
$ sudo umount /dev/mmcblk0p1
```

ダウンロードしたファイルを解凍し、SDカードに書き込む

```
$ xzcat ubuntu-18.04.2-preinstalled-server-armhf+raspi3.img.xz | sudo dd bs=1MB of=/dev/mmcblk0
```

### Macの場合
SDカードの名前を確認

```
$ diskutil list
```
アンマウント

```
$ diskutil umount /Volumes/<micro_sd>/
```

ダウンロードしたファイルを解凍し、SDカードに書き込む

```
$ xzcat ubuntu-18.04.2-preinstalled-server-armhf+raspi3.img.xz | sudo dd bs=1m of=/dev/<micro_sd>
```

## raspberry piを起動
SDカードをRaspberry Piに挿して、HDMIケーブル、LANケーブルも接続して、電源を入れRaspberry Piを起動する。
このとき、HDMIケーブルを先に挿しておかないと画面がつかないので注意が必要。

初期IDとパスワードはどちらもubuntuなので、それを入力する。
新しいパスワードを設定しろと言われるので、設定する。
（簡単すぎるとerrorが出る→後で変更可能）

## ネットワーク設定
Ubuntu16.04と違い/etc/network/interfacesが設定ファイルではなくなり、Netplanで行う。
設定ファイルは/etc/netplan/50-cloud-init.yaml(01-netcfg.yamlの場合もある)であるのでこれを編集する。

以下に有線と無線をを固定IPアドレスの割り当てにする場合の例を示す。

```
$ sudo vim /etc/netplan/50-cloud-init.yaml
```

```yaml
network
    version: 2
    renderer: NetworkManager
    ethernets:
        eth0:
            dhcp4: false
            dhcp6: false
            addresses: [192.168.0.100/24]
            gateway4: 192.168.0.1
            nameservers:
                addresses: [192.168.0.1]
    wifis:
        wlan0:
            dhcp4: false
            dhcp6: false
            addresses: [192.168.0.100/24]
            gateway4: 192.168.0.1
            nameservers:
                addresses: [192.168.0.1]
            access-points:
                sample-wifi-SSID:
                    password: sample-password
```

```
$ sudo apt-get install network-manager
```
設定ファイルを適用する。(rebootしても良い)

```
$ sudo netplan apply
```


## 補足(hostname, usernameの変更)
### hostnameの変更
現在のhostnameを確認

```
$ hostname
```
hostnameを\<new_host_name>に変更

```
$ hostnamectl set-hostname <new_host_name>
```

### usernameの変更
tmpユーザを作成する。(最後に削除するので名前はなんでもいい)
オプションの-Mでホームディレクトリを作らない様にする。

```
$ sudo useradd -M tmp
```
sudoグループにtmpユーザを追加する。

```
$ sudo gpasswd -a tmp sudo 
```
 tmpのパスワード設定してから一旦ログアウトしtmpユーザとしてログインし直す。

```
$ sudo passwd tmp
$ exit
```

ubuntuから\<new_username>にユーザ名を変更する。

```
$ sudo usermod -l <new_username> ubuntu
```

ホームディレクトリをubuntuから\<new_username>に変更する。

```
$ sudo usermod -d /home/<new_username> -m <new_username>
```

ubuntuグループを\<new_username>グループに変更してログアウトする。


```
$ sudo groupmod -n <new_username> ubuntu
$ exit
```

\<new_username>でログインしてtmpユーザを削除する。

```
$ sudo userdel tmp //tmpユーザを削除
```

## 参考資料
「Raspberry Piで学ぶROSロボット入門」　上田隆一 著
NGS解析についてまとめてみよう

# NGS解析についてまとめてみよう

## TL;DR
バイオインフォマティクスっぽいことも書こうかなと。
次世代シーケンサーの解析って言ってもピンとこない人が多いような気がするので、知識の整理も兼ねてその辺から軽く書いていこうと思います。生物わかんない人にわかるように頑張ろうと思います...（多分無理説ありますが）これQiitaで書く内容なんですかね？ブログ作るのめんどくさいからいいか...

## 全ての基本、PCR法
PCR法は、極微量しかとれないDNAをin vitroで爆発的に増やす手法です。数がないと話にならないので、分子生物学という分野ではたぶん最頻出の手法だと思います。

この手法は
1. DNAを熱することで一本鎖にする。
2. DNAポリメラーゼ（新しいDNAを伸長させる酵素）をプライマー（DNAの一部にくっつく配列）結合部位にリクルートしてきます。
3. DNAポリメラーゼによってDNAを伸長させます。
4. 1~3を繰り返すことで$$2^n$$個の同一のDNAを得ます。
![](https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PCR.svg/500px-PCR.svg.png)

ということで$$O(2^n)$$のオーダーでDNAを増やすことできます。すごい！

## そもそも次世代シーケンサーとは？
もともとDNAの配列決定にはサンガー法という方法がとられてきました。サンガー法は以下の画像のように、DNAをPCR法によって増幅する際に取り込むとDNAの伸長反応が停止するジデオキシヌクレオチドを同時に取り込ませることでランダムにDNAの伸長反応を停止させ、長さの違うDNAを合成します。電気泳動などの手法によってDNAの長さごとに分離し、その長さによってDNA配列を決定する手法です。下の図の場合は`ACGACGTTCGTCA`という配列が決定されます。現在では技術の進歩によって１日くらいあれば500 bp(base pair)程度のリードを200サンプル近く読むことができます（経験談なので最新機器使えばもっといけるかもしれない）。
![](https://www.cosmobio.co.jp/support/technology/image/APB_NGS_Sanger_Sequencing_Illustration.png)

この方法も十分に画期的であったのですが、近年では次世代シーケンサーと呼ばれる数百万から数十億もの膨大なシーケンシング反応を同時並行して実行できる技術が普及してきました。ここでは、次世代シーケンサーで主に使われているブリッジPCR法とSequencing-by-synthesisという手法に絞って説明しようと思います。ちなみにぼくのIDはilluminaとは関係ないです。

### ブリッジPCR
まず、増やしたいDNAの両端にアダプター（プライマーの進化版みたいなやつ）をつけます。このアダプターをフローセル（DNA置く場所）に固定します（①〜②）。このとき太い方の青いアダプターと細い方の青いアダプター同士が結合できるようになっていて、その部分で結合し橋渡し構造（ブリッジ）をとります（③）。アダプターを起点としてPCRを行うことで、DNAを増幅します（④）。この状態で、熱変性させると、アダプター同士の結合が切れることで量が元の倍になります（⑤）。この方法で局所的に（フローセルの一部のみで）DNAを多量合成することができます（⑨）。この手法によって一回の解析で40 Gb~200 Gb程度の配列が得られます。

![](http://infobio.co.jp/wp-content/uploads/bridge-pcr.gif)

### Sequencing-by-synthesis
さて、材料が揃ったので塩基配列を決定します。ブリッジPCRで増やした部分に3'位（DNAが伸長する方向）をブロックした蛍光dNTPを取り込ませ、一塩基（一配列）だけ伸長させます。取り込ませた蛍光dNTPを光らせてその塩基がなんなのか確認します。確認した後、蛍光物質と3'位をブロックした物質を取り除きます。このサイクルを繰り返すことで配列全てを決定することができます。
![](http://infobio.co.jp/wp-content/uploads/seqence-method.gif)

### 実際にNGS解析をしてみる
力尽きました。次に書きます。

## 結論
Qiitaで書くことじゃないしブログを作ろうと思いましたまる


## 参考文献
1. [次世代シーケンシング（NGS）とは](https://www.cosmobio.co.jp/support/technology/a/next-generation-sequencing-introduction-apb.asp)
2. [次世代シーケンシングの原理](http://infobio.co.jp/?portfolio=%E6%AC%A1%E4%B8%96%E4%BB%A3dna%E3%82%B7%E3%83%BC%E3%82%B1%E3%83%B3%E3%82%B7%E3%83%B3%E3%82%B0%E3%81%AE%E5%8E%9F%E7%90%86)
ruby で 画像ファイルをcurl POSTする

ruby で画像ファイルを curl POST する際のテンプレートの一つとしてメモ。


```curl_post.rb
require 'net/https'                                                                                                                        
require 'uri'
require 'open-uri'

file = open('path/to/image.jpg').read
url = URI.parse('https://url.co.jp')
data = [ 
 ['file', file, filename: file_name]
]   
 
http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE

req = Net::HTTP::Post.new(url.path)
req.set_form(data, "multipart/form-data")

http.request(req)
```

ポイントは `set_form_data` ではなく `set_form` を用いること。
画像ファイルという特性上`multipart/form-data`が扱え、Rubyの標準ライブラリである`net/http`を用いてPOSTできるようになる。

参考：[Ruby で net/http を使ってファイルなどを multipart で POST する](http://masamitsu-murase.blogspot.com/2017/01/ruby-nethttp-multipart-post.html)
【iOS】UIViewControllerをautolayoutを使わずにコードでレイアウトするベストプラクティス

# 前書き
複雑なレイアウトはカスタムビューの中でやって、UIViewControllerではそれぞれのカスタムビューを配置していくだけ、ということがよくあります。
この時、UIVireControllerにおけるレイアウトは配列させるだけですので、わざわざxibやオートレイアウトを使わずにシンプルにコードでレイアウトしたいことがあると思います。
その際のプラクティスを書き残しておきます。

# 手順

## １、カスタムビューの生成

```swift
lazy var tableView : UITableView = self.createTableView()

private func createTableView() -> UITableView {
   let view = UITableView()
   view.delegate = self
   return view
}
```

カスタムビュー（今回は例のためtableView)をプロパティとしてlazyで宣言します。
lazyにすることで、tableViewが最初に呼ばれた時にcreateTableView()が発火するようになります。
createTableView()にて、カスタムビューのインスタンスを生成し初期化や設定を行いましょう。
注意するのは、ここではまだ位置や大きさのレイアウトをしないということです。
実体の生成にまつわる処理をここに書きます。背景色など、変化することのないプロパティはここに書いても構いません。

## ２、カスタムビューをviewDidLoadで貼り付け

```swift
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(tableView)
    }
```

UIViewControllerにtableViewをviewDidLoad内で貼り付けます。
これによりViewControllerが起動した時に一度だけ呼ばれることになります。
基本的にカスタムビューはここで初めて呼ばれるため、１で記述したcreateTableView()はここで実行される形になります。
注意点はここでも位置や大きさのレイアウトをしないということです。

## ３、viewDidLayoutSubviewsでレイアウト

```swift
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        self.layoutTableView()
    }

    private func layoutTableView()  {
        tableView.frame = CGRect(x : 0 , y : 0 , width : self.view.frame.width , height : self.view.frame.height )
    }
```
カスタムビューの位置、大きさのレイアウトはここで初めて行います。
複数のカスタムビューがあるときは、layoutXXXView()という関数を複数作ってそれを並列させる形になります。

# 何が嬉しいのか
基本的にレイアウトは以上の構成でやっていくのが拡張性が高く、柔軟性も高いです。
というのもこの書き方だといくつか嬉しい点があり、

* カスタムビューごとに処理が分かれて見通しが良くなります。
* 生成時に一回やればいい処理と、再描画が走るたびに行いたい処理に分けることができる。
* viewDidLayoutSubviewsはsubviewに変化があったり画面の向きが変わったりする時に必ず呼ばれるため、レイアウトが担保されます
* viewDidLoadではまだビューが表示されておらず、width等のプロパティに正しくアクセスできないことがありますが、viewDidLayoutSubviewsであればviewが表示された時にも呼ばれるのでそれが担保されます。
* layout系の処理が全てviewDidLayoutSubviewsに集約される構成になる（じゃないとビューを動かしても全てviewDidLayoutSubviewsで初期化されてしまうから）

などがあります。ビューの数が増えてくると、コードで全てレイアウトされていると見通しが悪くなるということもあるかもしれません。個人的には３〜４つくらいのカスタムビューで構成されているのが理想です。それ以上増えそうなのであれば、それは別でカスタムビューに切り出す要件のように思います。

以上です。ありがとうございました。
ElixirでElixirインタプリタを作成していく(第0回 目次)

#ElixirでElixirインタプリタを作成していく
##第0回 目次

|> [第1回 文字列からモジュールと関数を導き出す](https://qiita.com/Sepi110902/items/37bd14721b552a9eb80c)
|> [第2回 基本的な引数の分割](https://qiita.com/Sepi110902/items/63a302ecf52afbf5737a) 
|> [第3回 文字列のリストを値として変換していく](https://qiita.com/Sepi110902/items/12a39a44309b318bb025)
jQuery UI の datepicker、キー入力と併用

#[jQuery UI](https://jqueryui.com/) の datepickerで、キー入力による入力可能にする
## ステップ１、Hidden項目を追加する

```html
<!-- 日付テキスト項目 -->
<input type="text" id="datepickerDisplay" />
<!-- Hidden項目　-->
<input type="hidden" id="datepickerDisplayHidden" />
```
## ステップ２、onSelectを以下のように改修。

```javascript
/**********************************************************************************
 * datePicker設定
 **********************************************************************************/
$('#datepickerDisplay').datepicker({
    // 日付選択イベント
    onSelect: function(date) {
        var momentDate = moment($('#datepickerDisplay').val());
        // 入力した日付が有効ではない場合
        if (!momentDate.isValid()) {
            return;
        }
        var datepickerVal = momentDate.format("YYYY/MM/DD");
        var datepickerValBK = $('#datepickerDisplayHidden').val();
        // Hidden項目で保持した日付と一致しない場合
        if (new Date(datepickerVal).getTime() != new Date(datepickerValBK).getTime()) {
            date = datepickerVal;
            $('#datepickerDisplay').val(datepickerVal);
        }
        // HIDDEN項目に日付を保持
        $('#datepickerDisplayHidden').val(date);
    }
});
```
PlayFab ドキュメントがリニューアルされました！

原文は[こちら](https://blog.playfab.com/blog/new-documentation-portals)

PlayFabがMicrosoftに買収され1年経過し、
そのドキュメント最新版がMicrosoft公式サイト内に展開されるようになりましたよ
という話
(といってもまだプレビューらしい)

https://docs.microsoft.com/ja-jp/gaming/playfab/
![PlayFabNewSite_01.png](https://qiita-image-store.s3.amazonaws.com/0/313446/9aaebd38-54b5-3a2e-886e-2c25d02ad65c.png)


### Microsoft公式内に統合されて何が変わるの？
・ドキュメント更新ポリシーがMSのドキュメントに準拠
　サイト下部から確認可能
![PlayFabNewSite_02.png](https://qiita-image-store.s3.amazonaws.com/0/313446/a629bf36-16d5-78e7-95a8-d1465ddc2b17.png)

・近いうちにローカライズされる
管理ポータルで使えるものと同じ言語(日本語・中国語・韓国語・スペイン語・ドイツ語)にローカライズされる
これはかなり大きい・・・！

・ドキュメントがGitHubでバージョン管理されるようになる
修正や要望などがGItHubのプルリクで行えるようになる
先ほどの図にある「以前のバージョンのドキュメント」がそれにあたる


※現在は古いドキュメントが見えますが、近いうちに新サイト側へリダイレクトされるようになるとのこと



というか、[Microsoft Gamingサイト](https://docs.microsoft.com/ja-jp/gaming/)が公開されている！

![PlayFabNewSite_03.png](https://qiita-image-store.s3.amazonaws.com/0/313446/55a56eef-fe83-e78f-1d6a-65738f38ac8a.png)