OmniAICreator/Qiita-1.07M huggingface dataset:
Google データポータル から、Kaggle のデータセットにアクセスする方法

Google データポータルから Kaggle Community Connector を使用して、Kaggle のデータセットに直接接続してデータを可視化することができるようになったので、試してみました。
（日本では Google データスタジオが Google データポータルという新しい名前に変わりました。）

+ [Kaggle](https://www.kaggle.com) にログイン
+ [https://www.kaggle.com/{username}/account](https://www.kaggle.com/{username}/account) から、Create API Token をクリックし、Token を作成し、 json ファイルをダウンロード
+ [Google データポータル](https://datastudio.google.com/data?search=kagg
)にアクセス
+ データソースで、右下にある + ボタンをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/42406/6aa2b44c-d522-b991-2009-480d2b0f6d5e.png)
+ Kaggle を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/42406/80611a05-48bc-3b14-aadc-e7fc04ff42ba.png)
+ データポータルで利用したい dataset にアクセス
+ 「データポータルでは、このコミュニティ コネクタを使用するために承認が必要です。」に承認をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/42406/c44c2429-357b-56df-6be9-fa7e3a648a13.png)
+ ユーザー名とトークンを入力
![image.png](https://qiita-image-store.s3.amazonaws.com/0/42406/9ea90dc9-0efc-de7f-0e5c-c3014b40332e.png)
+ 先ほどダウンロードした json ファイルの username と key を入力
+ Owner slug 、dataset slug と Filename を入力し接続（例： 下記のデータセットであれば、Owner slug: sureshbhusare, dataset slug: titanic-dataset-from-kaggle, Filename: train.csv）  
`https://www.kaggle.com/sureshbhusare/titanic-dataset-from-kaggle#train.csv`
![image.png](https://qiita-image-store.s3.amazonaws.com/0/42406/951b4be1-4cca-1e9c-e5c9-401847ba4397.png)
Raspberry PiにVNCで接続して操作する

# 概要
Raspberry Piにモニタとかキーボードを繋げていると場所を取るので、PCからVNCで接続してRaspberry PiのGUIを操作したい。

# 前提
VNCのビュアー側はWindows機とする。
（たぶんMacでもVNC Viewerを使えば繋げ方は同じだと思う）

# 必要なハードウェア
* PC (Windows)
* Raspberry Pi
* LANケーブル (ストレートケーブルでよい)

# 必要なソフトウェア
* [VNC Viewer (Windowsにインストールする)] (https://www.realvnc.com/en/connect/download/viewer/)

# VNC Viewerのインストールと接続までの手順

## VNC Viewerのインストール
ダウンロードしたexeファイルをウィザードに従ってインストールすればよい。
（特別設定すべきところは無い）

## Raspberry Piへの接続手順

### Raspberry Pi側の設定
Raspberry PiのOS(Raspbian)にはあらかじめVNCサーバの機能が組み込まれているので、VNCの機能を有効化することでVNCサーバの機能を利用できる。

設定 > Raspberry Piの設定 > インターフェイス > VNCを[有効]にする。
![WS000154.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329353/0057b37c-1788-2763-2ffa-48482e1f5bea.jpeg)

### クライアント(Windows)側の設定
RealVNCのVNC Viewerを起動し、"Enter a VNC Server address or serach"の欄にRaspberry PiのIPアドレス(有線LANのIPアドレス)を入力してEnter。
![WS000030.JPG](https://qiita-image-store.s3.amazonaws.com/0/329353/64283298-e12e-d57f-6e48-5bf873889059.jpeg)

Raspberry Piのユーザ名とパスワードを求められるので入力。
![WS000031.JPG](https://qiita-image-store.s3.amazonaws.com/0/329353/7e69e105-72ea-12b9-d49b-088b7d4e3aff.jpeg)

VNCによる接続が成功すればRaspbianのデスクトップが表示される。
![WS000032.JPG](https://qiita-image-store.s3.amazonaws.com/0/329353/1234d7a7-165e-57bd-e53b-ee6f9d54d68c.jpeg)

## VNC接続時の画面解像度変更
VNCでRaspberry Piに接続すると随分画面解像度が低い状態になっていると思うので、「Raspberry Piの設定」画面で解像度を変更することでVNC接続時も高解像度で作業ができる。
![WS000033.JPG](https://qiita-image-store.s3.amazonaws.com/0/329353/3144a60f-7b8a-50f9-544b-33d88f190cd4.jpeg)
Apollo GraphQL Client (Android)を動かしてみた際のメモ


# 概要

開発でGraphQLに触る機会があったので、Android用のGraphQLクライアントのApolloを
[GitHub GraphQL API v4 を Android で遊んでみる](https://qiita.com/ssoejima/items/0ae0cb97aabfcac11c6a)
を読ませていただきながら試してみた。

(環境)
Kotlin 1.3.10
rxjava 2.2.4
rxandroid 2.1.0
rxkotlin 2.3.0

# サンプル
行った手順は上記[Qiita記事](https://qiita.com/ssoejima/items/0ae0cb97aabfcac11c6a)で詳しく解説してくださっているので割愛。
上記Qiita記事の手順に従い、GithubのGraphQL APIを叩いてみた。


build.gradle(app)へ追記 (apollo-android 1.0.xが出ているがalphaがついているので0.5.0を使う)

```gradle

    apply plugin: 'com.apollographql.android'
~
    implementation 'com.apollographql.apollo:apollo-runtime:0.5.0'
    implementation "com.apollographql.apollo:apollo-rx2-support:0.5.0"
```

build.gradle(project)へ追記

```gradle
    dependencies {
        ~
        classpath 'com.apollographql.apollo:apollo-gradle-plugin:0.5.0'
    }
```

利用箇所(Kotlin)

```kotlin

        val okHttpClient = OkHttpClient.Builder()
            .authenticator { _, response ->
                response.request().newBuilder()
                    .addHeader("Authorization", "Bearer <Access Token>")
                    .build()
            }.build()

        val apolloClient = ApolloClient.builder()
            .okHttpClient(okHttpClient)
            .serverUrl("https://api.github.com/graphql")
            .build()


        Rx2Apollo.from(apolloClient.query(ViewerQuery()))
            .subscribeBy(
                onNext = {
                    it.data()?.let { data ->
                        Log.d("### TYPE_NAME", data.viewer().__typename())
                    }
                },
                onError = {
                    // Do something
                },
                onComplete = {
                    // Do something
                }
            ).addTo(disposable)

```

Rx2Apolloを利用することで、RxJavaを利用しているプロジェクトにスムーズに導入できる。
HTTP通信クライアントにはOKHttpを利用しているので、認証情報の付与などはOKHttpの利用方法のまま可能。

# ハマったポイント

## レスポンスのparseに失敗する

Apolloでは、schema.jsonファイルおよび.graphqlファイルを所定の配置に設置しビルドすると、GraphQLへのリクエストとレスポンスをオブジェクトにマッピングするためのクラスが生成される。
生成されたクラスをそのまま利用していれば問題ないが、ResponseのParseが失敗する場合、一部マッピングがうまくいっていないことがある。

その場合、エラーログを確認し、マッピングをbuild.gradleで指定してあげる必要があった。
今回必要になった記述は下記。

```gradle

apollo {
    customTypeMapping['URI'] = "String"
}
```
※上記は既存クラスとGraphQL上の型名が一致した場合に起こり得る模様

# 余談
apollo-android v1.0.0-alpha が出てから時間が経過しているが、なかなかalphaが取れないので、しばらくは0.5.0を使っているのが良さそう。
触り始めたばかりなのでもう少しインプットする。
Angular MaterialでカスタムのIconを使う

公式ドキュメントに書いてありますが、忘れそうだったので。

```ts:app.component.ts
import { Component } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private domSanitizer: DomSanitizer,
    private iconRegistry: MatIconRegistry,
  ) {
    this.iconRegistry.addSvgIcon(
      'cut', // ここで名前を指定
      this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/cut.svg') //必ずサニタイザーを利用して取得する。
    );
  }
}
```

```html:なんかのhtml
<mat-icon svgIcon="cut"></mat-icon>
```

これだけだと、ちょっとsvgが大きくて、他のAngular Material Iconとサイズ感が違うので、僕はこんな感じでcssを当ててます。これは使うSVGによると思いますので、あくまでメモ程度まで。

```scss:どこかのscss
mat-icon[svgIcon] {
    svg {
        width: 1.2em;
        margin: auto;
    }
}
```
Freeing space on AWS EC2

##Environment 
>AWS instance EC2: t2.micro
OS: Linux Ubuntu 16.04.2 LTS


Noticing my server was excessively slow I logged in through ssh in the terminal.

After trying to execute a simple `cd` command I got the following error message:

```bash:
No space left on device
```

I run the following command in order to display the biggest folders:

```bash:
puts 'du -a / | sort -n -r | head -n 20'
```
Result:

```bash:
4631892 /usr
3376452 /usr/src
1306868 /lib
1216332 /lib/modules
896280  /var
661540  /boot
548124  /var/lib
434396  /usr/bin
384996  /usr/lib
247080  /var/lib/mysql
230360  /usr/share
208144  /var/www
208140  /var/www/html
183928  /var/www/html/wp-content
150876  /var/lib/apt
150820  /var/lib/apt/lists
143004  /usr/local
129688  /usr/lib/x86_64-linux-gnu
126616  /var/lib/dpkg
```

After checking the /usr/src folder I noticed the following files were taking a huge place:

```bash:
linux-headers-4.4.023    
linux-headers-4.4.023-generic    
linux-headers-4.4.026    
linux-headers-4.4.026-generic
linux-headers-4.4.029    
linux-headers-4.4.029-generic
linux-headers-4.4.031    
linux-headers-4.4.031-generic    
linux-headers-4.4.032    
linux-headers-4.4.032-generic    
linux-headers-4.4.033    
linux-headers-4.4.033-generic    
linux-headers-4.4.034    
linux-headers-4.4.034-generic    
linux-headers-4.4.035    
linux-headers-4.4.035-generic    
linux-headers-4.4.036    
linux-headers-4.4.036-generic     
linux-headers-4.4.037     
linux-headers-4.4.037-generic
```

Those files being old linux headers files I decided to purge them with 

```bash:
sudo apt-get autoremove
```

Allowed me to free about 30 Mb of memory. It seems very little but on t2.micro it has a significant impact.
【PhpStorm】PhpStormでコメントアウトの位置を設定する【PHP】

# 注
PhpStorm導入直後でPhpStorm初心者です

# やりたいこと
PhpStormで Command + / でコメントアウトができるが、初期設定だと最左位置に // が入るためこれをもとのソースの位置にしたい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/198489/cf0b4f44-389a-79bf-e990-627686822f64.png)

# 環境
端末 MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
OS macOS Mojave 10.14.2
PhpStorm 2018.3.2

# 調べる
「phpstorm comment out position」でググって[記事(stackoverflow)](https://stackoverflow.com/questions/19417962/how-to-set-the-style-of-line-comment-in-phpstorm)を発見。

# 設定方法
Preferences -> Code Style -> PHP を選択
SchemaをProjectに変更して（Defaultだと変更しても保存されなかった）
"Code Generation" タブで "Line comment at first colum" のチェックを外す
// のあとにスペースがほしかったので
"Add a space at comment start" にチェックを入れる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/198489/dd911ca1-f5a3-fff9-0690-0dd293df8179.png)
Augurのマーケット内訳(2018-12-25)と注目のマーケット

予測市場のプラットフォームである[Augur(オーガー)](https://www.augur.net/)の、2018-12-25現在のマーケットの内訳です。
カテゴリ名を元に分類し、そのカテゴリに含まれるマーケット数を合計しました。


# マーケットの内訳(mainnet)

メインネット上には現在702個のマーケットがあります。

PRE_REPORTING(売買受付中)のマーケットの内訳は、
暗号通貨関連(crypt currency)：280(-2)
スポーツ(sports)：101(-13)
政治(politics)：104(+0)
経済(finance)：70(+0)
その他(other)：147
でした。

- スポーツ関連のマーケットが減りました。

![20181225-augur-market-count.png](https://qiita-image-store.s3.amazonaws.com/0/142577/8810aa94-8585-376d-5540-1f7a7ea8ba93.png)


# 注目のマーケット

前回の記事で紹介した、大きなマーケット[Which party will control the House after 2018 U.S. Midterm Election?](https://ipfs.augur.casino/ipfs/QmYaHYKE3ozoJrXCksETCEnAoyUmXY4o3qarE9oZmXfMbc/?augur_node=wss%3a%2f%2faugur-node.augur.casino&ethereum_node_ws=wss%3a%2f%2fgethnode.com%2fws#/market?id=0xbbbc0a8baa03535e0a680ee2f057162aaaafd570) は、レポーターが事実と異なるレポートをしたので、争議状態(dispute)になっています。
Augurでは、結果に異議がある場合には1週間以内にREPを預託して異議を唱える(争議状態にする)ことができます。

次のウインドウ終了日時は、日本時間で2018年12月27日 午前9時です。
この日時までにさらなる異議が出なければ、結果が確定します。




# AugurのUIについて

Augur開発チームは現在UI(Augurアプリ＋WEBブラウザからアクセスできる画面)の改善に取り組んでいます。
私は現在のUIには大きな欠点があると考えています。

- 結果がレポートされた際に、どの結果が報告されたのか分からない

	- [Reporters.chat](https://reporters.chat/markets/0xbbbc0a8baa03535e0a680ee2f057162aaaafd570)のような外部サイトからしか、レポート中の結果を知ることができません。
	- 争議状態(dispute)になると、左メニューの「REPORTING」ー「DISPUTE」から、どの結果が正しいとして異議を唱えられているかをREPの数量で知ることができます

	- 左メニューの「REPORTING」ー「REPORTING」では、自分がレポート可能なマーケットしか表示されません。


これからもウォッチを続けたいと思います。



# 関連リンク

- [Augur Weekly Report — December 19th](https://medium.com/@AugurProject/augur-weekly-report-december-19th-3f0ae188a9c4)

- [Which party will control the House after 2018 U.S. Midterm Election?](https://ipfs.augur.casino/ipfs/QmYaHYKE3ozoJrXCksETCEnAoyUmXY4o3qarE9oZmXfMbc/?augur_node=wss%3a%2f%2faugur-node.augur.casino&ethereum_node_ws=wss%3a%2f%2fgethnode.com%2fws#/market?id=0xbbbc0a8baa03535e0a680ee2f057162aaaafd570)

- [Reporters.chat](https://reporters.chat/markets/0xbbbc0a8baa03535e0a680ee2f057162aaaafd570)

- [Augurで最近起こっていること](https://medium.com/@lotuskabu/augur%E3%81%A7%E6%9C%80%E8%BF%91%E8%B5%B7%E3%81%93%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%93%E3%81%A8-90de40b5334f)

- [Crystal Ball Be](http://www.crystalball.be/stats/)
mysqliとは？mysqlとの違いは？ PHP を @kentyama さんの記事に学びたい Rubyist

# Thanks to

[mysqlからmysqliへの書き換え方法 - Qiita](https://qiita.com/kentyama/items/f7759807445c3863ccaa)
 
>山田 健太郎
>@kentyama
>山田健太郎と申します。PHP&MySQLによるウェブアプリケーション開発やSwiftや>Objective-CによるiOSアプリ開発をしています。また、危険物取扱者などの資格取得の為の講習会の運営事業等を行っています。
>http://www.shoubo-shiken.jp/

# mysqliとは

>mysqlの機能拡張版である。
>mysqli = mysql + improved

vi に対しての vim の位置づけみたいなやつっぽい。

# PHPのバージョン対応？

## >PHP7系以降のバージョンでは、mysql関数が使用出来ない為

バージョン問題の様子。


## >mysqliクラスまたはPDOクラスの関数等で書き換える必要がある。

mysqliというクラスがあるらしい。


# オブジェクト指向で書く

mysqli関数でオブジェクトを作っておいて、それを引き回すっぽい。

## mysqli関数（オブジェクト指向型）

```php
//データベースの接続と選択
$mysqli = new mysqli($host, $username, $password, $dbname);
if ($mysqli->connect_error) {
    error_log($mysqli->connect_error);
    exit;
}
```

---

ちなみに当方Rubyist

[ruby yumainaura - Google Search](https://www.google.com/search?q=ruby+yumainaura&oq=ruby+yumainaura&aqs=chrome..69i57j0j69i60l3j0.2008j0j7&sourceid=chrome&ie=UTF-8)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Ubiquity RoboticsのUbuntu & ROS Image for Raspberry PIのWifi設定 

[ROS公式](http://wiki.ros.org/ROSberryPi/Installing%20ROS%20Kinetic%20on%20the%20Raspberry%20Pi)からもリンクされてる[Ubiquity Robotics社](https://ubiquityrobotics.com/)の[RaspberryPi3向けROS構築済みイメージ](https://downloads.ubiquityrobotics.com/)
のWifiの初期設定をサクッとすませる方法。



1. イメージを焼いて起動すると、ラズパイがAPモードになっているので適当な端末からログインする。
    - WIFISSID:ubiquityrobotXXXX 
    - WIFI PW:robotseverywhere
    - `ssh ubuntu@10.42.0.1`
    - PW:ubuntu 
2. 本来つなぎたいWifiのSSIDとPWを用意して以下のコマンドを打つ

    ```
   sudo pifi add {WIFI_SSID} {PASSWORD}
   sudo reboot
    ```

   [PiFi](https://github.com/rohbotics/pifi)という便利なライブラリが入っているので簡単に他のWifiにつなげる。



以上。
イメージ配布サイトに1までは書いてあるが2まで書いておいて欲しい・・・。
ゆとりエンジニアの為の.vimrc

#ゆとりエンジニアの為の.vimrc
##モチベーション
- そろそろvimのチューニングが済んできたこと。
- 最近非推奨のNeoBundleからDeinへの移行をして、きっとこれからvimを始めるであろう人が使っててもまあ大丈夫なんじゃないかと思ったこと。

上記の理由からここらで一旦、昔の自分のように**vimデビューしたけど使いづらい**と感じている**IDE世代のゆとりエンジニア**に向けて自分の.vimrcを公開しようと思いました。

###注意
中身が間違ってたりする可能性もあるので、各自チューニングして使ってください。
普段js周りをよく書いているのでその周りは大抵大丈夫かと思います。

##そもそもなぜvimを使う必要があるのか

###CLIツールの使用
CLIツールを使用する際に、わざわざコンソール(別ウインドウ)を使用する必要がない。
・・・これだけなら別にVSCode等でもいい。

###インフラの管理
最近のバックエンドをしていて思うのは、想像以上にインフラの知識が必要だということ。

- クラウドのインスタンスにssh
- Dockerファイルの中身をいじる

などなど、コンソール上で動くエディタを使用する場面はかなりあるように思う。

###まとめると？
コンソール内で使えて、その中で完結できるエディタを普段使いしていると何かと便利。

##本題
###環境設定
READMEにも書いてあるのですが一応。
依存ソフトウェアはpeco, ctags, translate-shell(, xsel)です。

ubuntu

```
sudo apt-get install -y peco ctags translate-shell xsel
```

mac

```
brew install peco ctags translate-shell
```

上記を行なった後、[shoichi1023/dotfiles/dein](https://github.com/shoichi1023/dotfiles/tree/master/dein)の.vimrcをホームディレクトリ直下(```~/```)にコピー、
同じくplugin.tomlを```~/.vim/rc/```にコピー

###使用プラグインと機能
基本は@ysm001さんの[IDEっぽいvim環境を構築する.vimrcを書いた](https://qiita.com/ysm001/items/8ae97cfdaae3f5fe79f4)の拡張なので同じ部分は割愛して、拡張部分だけ紹介します。

###[ErichDonGubler/vim-sublime-monokai](https://github.com/ErichDonGubler/vim-sublime-monokai)
カラーテーマです。これはもう好みですね。僕はsublimeが好きなのでこれ。
ここで探してください　：　[Vim Colors](https://vimcolors.com/)

###[cespare/vim-toml](https://github.com/cespare/vim-toml)
deinにするにあたってtomlファイルのシンタックスハイライト

###[jistr/vim-nerdtree-tabs](https://github.com/jistr/vim-nerdtree-tabs)
ファイルツリーをvimのタブで共有にする
詳しくはここ　：　[Vimでタブ使ってる人におすすめのやつ](https://qiita.com/yaginuuu/items/d0a8d045035ab251c96c)

###[ruanyl/vim-fixmyjs](https://github.com/ruanyl/vim-fixmyjs)
jsのコードをフォーマットしてくれる。保存してから実行しないといけないので注意。

###[editorconfig/editorconfig-vim](https://github.com/editorconfig/editorconfig-vim)
エディターに関わらず、.editorconfigに記述されたルールを元にフォーマットをチェックしてくれる。

###[tomtom/tcomment_vim](https://github.com/tomtom/tcomment_vim)
IDEによくあるコメント切り替え機能

###[t9md/vim-textmanip](https://github.com/t9md/vim-textmanip)
VSCodeとかでよく使ってた範囲選択して上下左右に移動できるやつ(vscodeだと確かaltとかでできたはず)
説明が難しいのでリンク飛んでもらった方が早い。

###[soimort/translate-shell](https://github.com/soimort/translate-shell)
これだけvimのプラグインではないけど、日本語で書いた文字を英語に変換してくれる(ソースはgoogle翻訳)
[ターミナルやvimからgoogle翻訳を使う](https://qiita.com/koji-kojiro/items/225e6f4c75249723e1c0)　とか　[Google翻訳が賢くなったのでコミットコメントを書くときに英語に翻訳しやすくするVim設定をした](https://qiita.com/momo-lab/items/7d35acc8ed835471ad4c)　を見てみると便利さがわかるかも？

###使い方と便利コマンド
使い方は大体READMEに乗ってます：[shoichi1023/dotfiles/README.md](https://github.com/shoichi1023/dotfiles/blob/master/README.md)
```<C-a>```みたいな書き方はCtrl + aってことです。

使ってて便利なコマンドとかはvimの使い方的なところになるので、[ここ](https://qiita.com/shoichi1023/items/7f185202a18e54b45eea#%E3%81%9D%E3%81%AEvim%E3%81%AE%E7%86%9F%E7%B7%B4%E5%BA%A6%E3%81%8C%E8%B6%B3%E3%82%8A%E3%81%AA%E3%81%84)見て、わからないところをggってください・・・・。

###おすすめポイント
自分で使ってて本当に便利だと思う機能は

 - 英語翻訳
 - 範囲選択移動
 - コメント切り替え
 - 素のvimのタブ分割
 - 素のvimのgrep
 - ```<C-d>, <C-u>```の半ページ移動
 - surroundでの””等の操作

ですかね。

皆さんも良いvimmerライフを！
あとvimやるならtmuxもおすすめしておきます。
sinatra導入まで

## 前提
- rubyインストール済み
- bundlerインストール済み

##インストールまで

sinatraはgemで提供されているので、Gemfileに記述
Sinatra::ContribはSinatraの拡張機能を使うためのGem。
今回はsinatra/reloaderを使うためにインストールする。
sinatra/reloaderは書きかえたコードをスムーズに反映させるための拡張機能

```:Gemfile
# Gemfile
source 'https://rubygems.org'

gem 'sinatra'
gem 'sinatra-contrib'

```

installする

```
bundle install
```


コードを書く

```ruby:hello.rb
require 'sinatra'
require 'sinatra/reloader'

get '/' do
    'hello world'
end
```

実行

```
$ bundle exec ruby .\hello.rb

WARNING: If you plan to load any of ActiveSupport's core extensions to Hash, be
sure to do so *before* loading Sinatra::Application or Sinatra::Base. If not,
you may disregard this warning.
[2018-12-12 10:32:38] INFO  WEBrick 1.4.2
[2018-12-12 10:32:38] INFO  ruby 2.5.3 (2018-10-18) [x64-mingw32]
== Sinatra (v2.0.4) has taken the stage on 4567 for development with backup from WEBrick
[2018-12-12 10:32:38] INFO  WEBrick::HTTPServer#start: pid=24744 port=4567
```

localhost:4567でアクセスするとhello Worldが表示される

※【注意】
sinatraは普通に起動するとdevelopment環境用であり、その場合だとlocalhostでしかアクセスできない
Dockerで起動した場合などは外部からアクセスできない、、、といった状態になる

そういった場合は本番環境用で起動するか

```
bundle exec ruby .\hello.rb -e production
```

またはlocalhost以外も許可するように指定する (0.0.0.0は全アドレスからという指定）

```
bundle exec ruby .\hello.rb -o 0.0.0.0
```
「couldn't find jquery」の解決方法

下記の通りにjqueryをインストールしたら済むと信じ込んでいましたが、謎の「couldn't find file 'jquery'」というエラーが出てきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/305759/cb072d75-8795-2507-8bf0-dc8df0220be2.png)
で終わったら、下記のエラー：
![image.png](https://qiita-image-store.s3.amazonaws.com/0/305759/307ab317-02b5-7108-ec15-dc948d57c1e9.png)

原因が分からないですけど一応npmインストールで解決できました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/305759/1341a681-2828-13d2-e78e-2af6f6d23669.png)

https://github.com/rails/jquery-ujs
Laravel Mix2をLaravel Mix4へアップグレードする

# はじめに
Laravel Mix 4が正式にリリースされたっぽいのでアップグレードしました。

# 前提
既存の資源を使ったまま上げる。
つまり、dart-sassとかいうのがデフォルトで使えるようになったらしいけど、
そういうデフォルトなものを変えると、システムのコードルール的な部分が変わってしまうので、
そういうのは既存のまま動かすようにします。

公式通りにやればOKだけど、やったよ！の証跡を残すために書いときます。
https://laravel-mix.com/docs/4.0/upgrade

# バージョン
一応以下の組み合わせで作成済のモノがしっかりと動くことを確認しました。

* Laravel 5.7
* Vue 2.5
* vee-validate 2.1.4
* vue-i18 8.5
* vuex 3.0
* bulma 0.7.2
* buefy 0.7.1

# Laravel Mix 4になると何が嬉しいのか
* Webpack4が使える
* vue-loader 15が使える
* Babel 7が使える

つまり、jsのテストがやりやすくなる。
というか、今までwebpack3でのセットアップの仕方が判らなくて投げだしてた

# アップグレード方法
## Vueコンポーネントの読込み方法変更

* アップグレード前

```js
Vue.component(
    'example-component', 
    require('./components/ExampleComponent.vue')
);
```

* アップグレード後

```js
Vue.component(
    'example-component', 
    require('./components/ExampleComponent.vue').default
);
```

## node-sassを使うようにする
dart-sassがデフォルトで使われるようになっているので、
node-sassに切り替える必要があります。

> npm install -s node-sass sass-loader

* アップグレード前

```js
mix.sass('resources/sass/app.sass', 'public/css');
```

* アップグレード後

```js
mix.sass('resources/sass/app.sass', 'public/css', {
    implementation: require('node-sass')
});
```

# おわりに
とりあえず、自分の手元の環境でアップグレードが済んだので、アップグレード報告しました。
前提が異なればやり方も変わるとは思いますが、
Laravelの環境でも簡単にwebpack4が使えるようになったのはとても有難いです。

とりあえず速攻でjsのテストコードを書ける環境を作ろうと思います。
何故プログラマ、エンジニアにツール改善・開発環境改善・TIPS習得が絶対に必要なのか‥



# ‥というメンタルモデルをイメージで描いて

# 今後のエンジニアライフで常に研鑽を欠かさないようにしていきたい記念碑的な記事。

# [第七の習慣「刃を研ぐ」 | 7つの習慣](https://www.recruit-ms.co.jp/service/seven-habits/column/0000000024.html) 

昔読んだ、超ベストロングセラー本

```
～書籍『７つの習慣』432ページより～
森の中で木を倒そうと、一生懸命ノコギリをひいているきこりに出会ったとしよう。
「何をしているんですか」とあなたは訊く。
すると「見れば分かるだろう」と、無愛想な返事が返ってくる。「この木を倒そうとしているんだ」
「すごく疲れているようですが．．．。いつからやっているんですか」あなたは大声で尋ねる。
「かれこれもう五時間だ。くたくださ。大変な作業だよ」
「それじゃ、少し休んで、ついでにそのノコギリの刃を研いだらどうですか。そうすれば仕事がもっと早く片付くと思いますけど」あなたはアドバイスをする。
「刃を研いでいる暇なんてないさ。切るだけで精一杯だ」と強く言い返す。
```


# エンジニアにとってツール類がうまく使えない、思ったことがすぐにできないというのは、どういうことか？

それはすなわち、体の麻痺、手足が自由に動かせないのと同じ、人間でいえば。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/812247e4-e992-05cb-116b-fd2313840a2c.png)


# まずは体を動かせるようにする必要がある

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/07e927f1-f0c1-c7a2-85b2-96420ae3e053.png)

# それから歩いたり走ったりする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/31b47a8c-5d72-5f68-c29c-f00ba3a515dd.png)

# 手足のストレッチ、管理、マネージメントは常に続けていく必要がある

いったんやって終わりじゃない。
命が続く限りは。
ライフワーク。

# 具体例

- Google日本語入力の切替設定を半角強制に
- Slackの時刻表示をAM/PMから24時間表記に、またはその逆
- iTerm2で新しいタブを開いた時に、カレントと同じディレクトリを開くように

# 環境改善なくして命なし

そのぐらいの気持ちでないと、手足が動かないままに生涯を終えるエンジニア。
手足が動く気持ち良さを僕らは完全に忘れたままでいる、まだまだ不完全すぎるUI・UX・デバイスの世界で。








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
え～、そんなWindowsでLinux動かす方法があるんだったら、もっと早く教えてよ。

# はじめに

　WSL(Windows Subsystem for Linux)を使って、簡単にLinuxを動かす方法をなるべく丁寧に解説します。

## WSLを有効化する

1. 左下の検索欄に「Windowsの機能」と入力します。
2. 「Windowsの機能の有効化または無効化」を選択します。
3. 「Windows Subsystem for Linux」にチェックします
4. PCを再起動します

## Storeでlinuxをダウンロードする

1. 左下の検索欄に「ストア」と入力します。
2. 「Microsoft Store」を選択します。
3. 検索欄に「Linux」と入力します。
4. 「Ubuntu」又は好きなディストリビューションを選択します。
5. インストールを押します。

## linuxを起動させる

1. 左下のスタートメニューから「Ubuntu」を選択します。
2. Ubuntuが立ち上がり「Installing, this may take a few minutes...」と表示されます。
3. 時間かかかるので、アプリを右クリックして「タスクバーにピン留めする」をすると良いでしょう。
4. だいたい10分くらいで、無事に立ち上がります。
5. 初期ユーザとパスワードを聞かれるので、入力します。

## まとめ

どうでしたか？案外かんたんにLinuxが立ち上げられたでしょう。

自分の[技術ブログ](https://blog-c.cloudlance-motio.work/)ではフリーランス界隈の情報や最新のIT情報の発信していますので、よろしくお願いします。

ではステキなLinuxタイムをーー！
Packer で Error 403: Required 'compute.zones.get' permission for... と出たとき・・・

# Packer で Error 403: Required 'compute.zones.get' permission for... と出たとき・・・

クリスマスプレゼントが `Error 403` だったとかは嫌なんですけど、出たものはしょうがないです。

## エラー内容

```
> ./packer build gcp.json
googlecompute output will be in this color.

==> googlecompute: Checking image does not exist...
==> googlecompute: Creating temporary SSH key for instance...
==> googlecompute: Using image: ubuntu-1804-bionic-v20181222
==> googlecompute: Creating instance...
    googlecompute: Loading zone: asia-northeast1-b
==> googlecompute: Error creating instance: googleapi: Error 403: Required 'compute.zones.get' permission for 'projects/<project name>/zones/asia-northeast1-b', forbidden
Build 'googlecompute' errored: Error creating instance: googleapi: Error 403: Required 'compute.zones.get' permission for 'projects/<project name>/zones/asia-northeast1-b', forbidden

==> Some builds didn't complete successfully and had errors:
--> googlecompute: Error creating instance: googleapi: Error 403: Required 'compute.zones.get' permission for 'projects/<project name>/zones/asia-northeast1-b', forbidden

==> Builds finished but no artifacts were created.
```

## 権限？

GCP の コンソール画面で使ってるサービスにはちゃんと権限ついてるのは確認しています。
何せ、権限で `オーナー` つけてもダメなんですから・・・
ただ、色々とぐぐってみると、結局権限ぽい話に終着するんですよね。

## 結局南極・・・

大冒険も何もなく、gcloud コマンドでサービスアカウントから権限を一回剥奪して、付け直しただけで解決しました。

1. gcloud で現状の権限を取得

```
> gcloud projects get-iam-policy <project name> --format json > iam.json
```

2. iam.json の当該サービスアカウントの行を削除（同じ権限がある場合、`,` に注意）
3. 編集後の iam.json を使って一度権限を反映

```
> gcloud projects set-iam-policy <project name> iam.json
```

4. もう一度現状の権限を取得

```
> gcloud projects get-iam-policy <project name> --format json > iam.json
```

5. 付与したい権限の場所に使いたいサービスアカウントを入れて保存します
6. 編集後の iam.json を使って再度権限を反映します

```
> gcloud projects set-iam-policy <project name> iam.json
```

うちの環境ではこれで大丈夫になりました。

## 終わりに

プロジェクト ID がいくつか紐づいてるアカウントで発生したので、何かそのあたりに原因があるんでしょうかね。
プロジェクトが１つしかないアカウントでは何も問題発生しなかったので。
権限周りは、AWS よりも GCP の方が若干くせがあるような気がします。
とりあえず、GUI でダメなときは、CLI 試してみようと思いました。

そういえば、このエラー、Terraformでも出ることあるらしいです。。。
Mac Googleで日本語入力で英語切替が面倒くさい？  英数キーを二度押しする方法もあるよ。



![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/226abec1-5008-0920-dd5a-38b94f0c2bc7.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/5e77c518-9a97-133a-0ee1-24d40432f433.png)

以上。

---

[yumainaura キーボード - Google Search](https://www.google.com/search?q=yumainaura+%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89&oq=yumainaura+%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89&aqs=chrome..69i57.3966j0j7&sourceid=chrome&ie=UTF-8)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
【FileMaker】Tipsは基本の積み重ね

2018年最後の[FileMaker Advent Calendar](https://qiita.com/advent-calendar/2018/filemaker)記事です。
Advent Calendarの小窓を開けてくれた記事がとても素晴らしく、濃い内容ばかりで毎日読むのが楽しかったです。
最後にエントリーし、題材が思い浮かばない。。。
最後を飾るすごい題材が思い浮かばない。。。

ので、今回は日頃感じているFileMakerの基本について記事にまとめました。

# 基本知識（＝土台）
なるべく敷居を低くTipsを紹介している私のQiita記事ですが、「やりたいこと」を実現するためにはやはり基本知識（＝土台）が必要になります。
Tipsは土台あっての応用です。

「こんなことできるのか！やってみよう！」

とサンプルを見つつ、また、記事を見つつやってみたけれどできない。。。
何かが違う。
なぜ動かない！？

悶々と時間だけが過ぎていきます。

# 土台が必要な理由
これはFileMakerに限らず、コミュニケーションをしようと思ったら共通の言語を介しますよね？

もちろんうまく話せない言語であってもなんとかボディランゲージも交えて会話を成り立たせようと頑張りますよね？
3割しか話せない言語だけれど、上手に話せる人と会話することで少しずつ知識が増えていきますよね？
そして、いつの間にかジョークを交わせたりディスカッションできたりします。


私もFileMakerの世界に切り替え、飛び込んだ時には３割も知識がなく、たくさん失敗してきました。（今も。。。）
元々培ってきた知識が邪魔することもありました。
遠回りしているFileMakerですが、逆に以前の知識のおかげでFileMakerのJSONなどの新機能を「ああ、なるほどね」と実装にあまり苦労をしないこともありました。
これも、土台があったからだと、昔苦労してきた自分に感謝しているところです。

# 土台はやはり大元の情報から
では、FileMakerでの土台ってなんでしょうか？
FBAに所属されている方々は教育プログラムとして何をやってきているのでしょうか？
私はFBAではないのでよくわかりませんが、個人的には以下を基本情報としてお勧めします。

・FileMakerサイトの[ラーンニングセンター](https://www.filemaker.com/jp/learning/)は情報が集約されています。マニュアル類が豊富です。
・[FileMaker Community](https://community.filemaker.com/community/ja)では、わからないことを参加されている方が丁寧に教えてくれます。

ただ、FileMaker Communityでは、[アンケート集約](https://community.filemaker.com/community/ja/news/blog/2018/12/12/filemaker-community-アンケート結果)から「新人にあまり優しくない？」とも評されている部分もあるようです。
でも、このアンケート集約を元に、これからのもっと敷居の低いFileMaker Communityになることを期待します！

基本のマニュアルと言っても、マニュアルを漫然と読むのはとても眠くなることです。
なので、基本としてちょうどいいのは、FileMaker公式トレーニング教材である

[FileMaker Master Book
](https://content.filemaker.com/masterbook-reg_web-jp)
です。

このマスターブックを先に読みながら章ごとにあるサンプルを実装をしてみるのもよし。
書店で「はじめての、、、」などのFileMakerブックをわからない状態で実装して、「これってなんだろう？」と思った時にマスターブックで基本を押さえていくのもいいと思います。

そして、ググった時に出会ったFileMaker記事、動画、敷居が高いと思いつつ飛び込んだイベントでの人との出会い、全てはFileMakerという共通言語で会話できる楽しさを向上させるためにも、大事ですね。

基本の積み重ねをしていきましょう！（私含む）
いつの間にか応用ができる力が付いてきます。

# 宣伝
FileMakerのことを中心に記事を書いている[私のQiita](https://qiita.com/tyuma)。
実は[動画](https://www.youtube.com/channel/UC98aghnO5siL91xf6_24R5Q)でもFileMaker記事（？）を公開しています。
サンプルは[github](https://github.com/atsukosekiguchi/FileMakerSample)でご覧ください。

FileMakerの皆さんに対して貢献度の低い私ですが、自分のアウトプットとして上記のようなことをしています。
ぜひ、みなさんもインプットしつつFileMaker記事などでアウトプットしてネットをFileMaker記事で埋めてくださいね。

では、良いお年を！
Local by Flywheel で laravel のローカル環境を作ったメモ

### 使用状況 -v

* Mojave 10.14.2
* Composer 1.8.0
* PHP 7.1.19
* Local by Flywheel 3.0.2

***
Local by Flywheelで遊んでたら、laravelも行けるんじゃねぇ？
って思ったので試してみた。
***
### ローカル環境構築
Local by Flywheelで、適当にローカルのwordpressを構築

1. 「`+`」ボタンをクリック
2. 適当にサイトに名前(今回は```laravel```)を付ける
3. 希望の環境を選択
4. WPのユーザー名とパスワードを入力（あとで削除するので適当に...）
5. 「`ADD SITE`」をクリック。

SSLもついでに追加
1. 設定のタブから、「`SSL`」をクリック
2. 「`TRUST`」をクリック
3. macのパスワード入力

### laravelインストール
macにlaravelインストーラーをダウンロード

```
composer global require laravel/installer
```
laravelのパスを通すため、```.bashrc```に書き込み

```
export PATH="$PATH:$HOME/.composer/vendor/bin"
```

パスを通す

```
source ~/.bashrc
```

制作したローカルのwordpressを削除。
```Local Sites/laravel/app```
にあるwordpressのappフォルダを丸ごと削除。
(publicフォルダとsqlフォルダがある)


先ほど制作したLocal Sitesのフォルダに移動
サイトディレクトリ

```
cd Local\ Sites/laravel
```
削除したappフォルダのlaravelをインストール

```
laravel new app
```
(publicフォルダが丁度良い感じにピッタリ♫)


### ローカル環境を再起動
Local by Flywheelアプリの右上にある「`STOP SITE ■`」を押して、
また「`START SITE ▶︎`」で起動。

「`VIEW SITE`」を押して https://laravel.local/ に飛ぶとlaravelのウェルカムページが表示


### データベースの編集
インストールしたlaravelの.envファイルを開いて
Local by Flywheelの「`DATABASE`」にあるmysqlの情報に書き換える。

```
DB_CONNECTION=mysql
DB_HOST=192.168.00.000
DB_PORT=4000
DB_DATABASE=local
DB_USERNAME=root
DB_PASSWORD=root
```
Local by Flywheelの「`DATABASE`」の「`ADMINER`」を押して
ブラウザからwordpressを入れた時の```WP_```のテーブルを削除。

laravelのmysqlを通す為に
 
 ```
 php artisan migrate
 ```
 のコマンドを打つと
 ```Migration table created successfully.```
 と言われて、ローカル環境完成。
 


***
### memo
反省点
データベースにつないだだけで、まだ何も試してない....
ゆっくり試して行く予定....


参考にさせて頂いたサイト：ありがとうございます。
[Using Local by Flywheel for Local Laravel Development](https://n8finch.com/using-local-by-flywheel-for-local-laravel-development/)
[laravel Installation](https://laravel.com/docs/5.7/installation)
***
pydot + Graphviz で相関行列を可視化するサンプル

相関行列 (のような対称行列) を pydot + Graphviz で可視化する機会があったので、そのときにやったことのメモ。

## サンプルデータ
今回は scikit-learn に付属している「ボストン市の住宅価格」データセットを利用する。

``` python
from sklearn.datasets import load_boston
import pandas as pd

boston = load_boston()
df = pd.DataFrame(boston.data, columns=boston.feature_names)
df.head()
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/16369/c7359cdf-9f37-8253-328f-13f679d98b92.png)

## 相関行列を求める
Pandas DataFrame は `corr` メソッドで相関行列を求められる。

``` python
df.corr()
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/16369/988704b9-f37d-83a9-4f97-61c316af4c4f.png)

## ヒートマップを描画する
グラフを描画する前に、相関行列を可視化する際によくやるヒートマップを描画してみる。

``` python
import seaborn as sns

sns.heatmap(df.corr(), center=0)
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/16369/a9085251-1c13-bf85-f528-a3be123fab3c.png)

これでもいいが、すこしわかりづらい気がする。

## グラフを描画する
pydot + Graphviz を使ってグラフを描画してみる。

``` python
import itertools
import pydot

def create_graph(df, threshold=0.5):
    """相関係数行列をグラフに変換する関数"""
    assert set(df.index) == set(df.columns)
    
    # グラフを作成
    graph = pydot.Dot(graph_type='graph')  # graph = 無向グラフ

    # ノードを追加
    for col in df.columns:
        node = pydot.Node(f'"{col}"', label=col)
        graph.add_node(node)

    # エッジを追加
    for a, b in itertools.combinations(df.columns, 2):
        val = df.loc[a, b]
        # 相関係数の絶対値が threshold 未満の場合はエッジを追加しない
        if abs(val) < threshold:
            continue
        edge = pydot.Edge(graph.get_node(f'"{a}"')[0], graph.get_node(f'"{b}"')[0])
        edge.set_label(f'{val:.2f}')
        edge.set_penwidth(4 * (abs(val) - threshold) / (1 - threshold))  # 太さをいい感じにする
        h, s, v = 0.0 if val > 0 else 2 / 3, abs(val), 1.0  # 色を設定する
        edge.set_color(' '.join([str(a) for a in (h, s, v)]))
        graph.add_edge(edge)

    return graph
```

相関行列は対称行列で、かつ対角成分を可視化する必要がないので、 `itertools.combinations(df.columns, 2)` でループを回している。

ノードを扱う際にカラム名をダブルクオートで囲んでいる理由については [こちら](https://qiita.com/hoto17296/items/c851fee5a459586aaf20) を参照。

``` python
from IPython.display import Image

graph = create_graph(df.corr())
display(Image(graph.create(format='png')))
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/16369/51bfe795-f53a-8b5b-0ee4-4d8a01de2b24.png)

正の相関が赤、負の相関が青、相関の強さはエッジの太さと色の濃さで表現するようにした。

場合によってはこのような可視化の手法もわかりやすいのではないかと思う。
.gitignore_globalを自動生成！便利！しかし落とし穴が..

# 無視してほしいファイルを登録するgitignore
これを生成せずにはgitは始められ..!!る、けど不便ですよね。

## .gitignore_globalを自動生成する便利なサービス
<img width="1071" alt="スクリーンショット 2018-12-25 15.56.03.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/224562/107eb687-847e-68e9-a95e-b10220044bf0.jpeg">

gitignore.io
https://www.gitignore.io/

これが非常に便利なサービスです。このinput要素に"MacOS"や"WordPress"など思い当たる語をぽこぽこ入力すればあっという間にgitignoreファイルを生成してくれます。ほんとうに便利。これを使えば、`.gitignore_global`を10秒で作れちゃいます。

## 落とし穴
しかし、問題が発生しました。githubに新しいファイルやディレクトリを追加しようとしても、ターミナルに`README.md`しか表示されないのです。`git add`したいindex.htmlやstyle.cssが`git status`しても全く出てこないので焦りました。

そのときは原因不明すぎて、`git check-ignore -v htdocs/index.html`なんてコマンドを試してみました。すると、

```
/Users/ユーザー名/.gitignore_global:127(行番号):*.html	htdocs/index.html
```
と、ignoreしている箇所を教えてくれました。まさかの生成した`.gitignore_global`。しかもよく見ると問題箇所は


```
### Web ###
*.asp
*.cer
*.csr
*.css
*.htm
*.html
*.js
*.jsp
*.php
*.rss
*.xhtml
```

**"web"!??** 何の気なしに"web"を追加したのですが、webサイトを構成するファイル全体が`.gitignore_global`にまるっと追加されてしまっていました。おそロシア。


というわけで、該当箇所を削除して問題は解決しました。gitignore.ioをご利用の方、ぜひお気をつけください。むしろ気をつけずにサクサクコピペしてしまうのは私くらいかと思いますが..
アプリ開発の基礎


株式会社デジタルクエスト エンジニア Advent Calendar 2018 7日目担当のTakeuchiです。

みなさんAndroidアプリ開発楽しいですか？醍醐味って何だと思いますか？

今回は<font color="DeepPink">**これからAndroid開発を行う人のためにまず最初にやっておいた方がいいこと**</font>を書いてみます。

##はじめに

iOSとAndroidともに開発したことがある人なら分かってもらえると思いますが、iOSの方が標準UIパーツがそもそも高機能ですよね。
対してAndroidはかゆいところに手がとどかないUIパーツが多い。

ことあるごとにカスタマイズしないと実装できないのがAndroidだとアプリエンジニアには思れていることが多いです。

その一番の理由は、はいコレ↓



##iOSっぽいデザインの実装

Androidの開発をしているとiOSっぽいデザイン指示がくることが本当に多い。

iOSとAndroidは<font color="DeepPink">**別物**</font>！！

それぞれにあった最適なUIがあるんだから当然違うものが用意されるべきですが、実際はiOSだけデザインしてAndroidもこれと同じUIで！ってパターンも多くないかと思います。

そうなると、iOSだと簡単なのにAndroidはなんでこんなに大変なんだ・・・なんて思いをするのは<font color="BlueViolet">*日常自販機！*</font>


これを面倒だと思う人はAndroid開発はやめた方がいいと思います。。



<font color="DeepPink">**何使って実装しよう？**</font>と思考錯誤するのは実はAndroid開発の醍醐味の一つなんです。


##醍醐味を楽しむために


まずAndroid開発のスペシャリストをみていてよく思うこと。それは<font color="DeepPink">**知識量**</font>。

開発が早い人。コードが綺麗な人は得てして知識がおおいです。


例えば、一番カンタンな例で「連絡帳」つくるとして・・。


iOSだとTableViewでいいですね。
iOSのTableViewって優秀ですよね。
なによりセクションヘッダの機能がデフォルトで付いている。Cellのキャッシュも簡単。

対してAndroidだとなんでしょう？

ListViewとかRecyclerViewという人が多いんじゃないでしょうか？

ただ、ListViewだと連絡帳には付き物のセクションヘッダがないですね。。



###じゃあどうする？

この課程が一番開発をしていて楽しいですよね。何を使って実装するか。

ここで設計したとおりに綺麗に実装できると本当に気持ちいいです。

連絡帳の例ですが、駆け出しアプリエンジニアだったとき私は<font color="DeepPink">ListView</font>でつくっちゃいました。

で、その後ほかのエンジニアのソースをみたらその人は<font color="DeepPink">ExpandableListView</font>を使っていました。

これ昔からあるんですが、意外と知名度低いですよね・・。（人気ない？？笑）

ExpandableListViewは一言でいうと折りたたみ式ListViewなんですが、折りたためなくするとセクションのように使うことができたり、グループ毎にセルのパターンも複数用意してキャッシュできるのでセルのレイアウトパターンが増えたときにも対応しやすい、また、iOSのtableviewと使い方が似ているのでiOS開発がメインの人でもわかりやすくていいですね。

勿論答えは賛否両論あるでしょうし、実際作るものによってはExpandableListViewじゃないほうがいいこともあると思います。

###とはいえ！

ExpandableListViewを知っているか？頭に浮かぶかどうか！

がAndroid開発においてはもっとも重要だと思います。

結局力技を駆使すればなんだって実装できちゃうのが良くも悪くもAndroidなんですよね・・。

ただ、だからこそ、<font color="DeepPink">**知識によってコードが美しくなる**</font>んだと思います。

今でこそ、知識量は増えてきましたが選択肢が少なかった時は後日「あ！これつかってりゃ同じことできたじゃん！」ってなることが本当に多かったです。

##おわりに

<font color="BlueViolet">*「ないんだったら自分で作ればいいのよ！」*</font>

こんな事言ってるアニメがありました。そう、作るのが楽しいんです！

でもAndroid開発においては<font color="Fuchsia">「本当にないのか？」</font>にかける時間が本当に大事だと思います。

そしてそれは開発がはじまってから探すのでは遅いことが多いです。

なのでこれからAndroid開発をはじめるひとにおすすめしたいことはまず

#Googleが提供している標準UIにどんなものがあるか？

これを把握しておくことだと思います。

実際に使ってみるのが一番理想ですが、そこまでしなくても、こんなものもあるんだってレベルでいいので一通り目を通すことがAndroid開発を今後おこなっていく上で重要な事になると思います。

みなさま、よきAndroidライフを。
Laravelの.envでArrayを使う方法

# Laravelの.envでArrayを使う方法

参考
https://laracasts.com/discuss/channels/general-discussion/return-array-from-env#reply-320641

検証環境
Laravel 5.5 LTS

```.env:.env
VARIABLE_NAME=name1,name2,name3
```



```php:config/app.php
'MY_ENV_ARRAY' => array_map('trim', explode(',', env('VARIABLE_NAME')))
```
Bitnami Redmine 3.4と4.0のDB変更点

[Bitnami版のRedmine](https://bitnami.com/stack/redmine)も4.0.0にバージョンアップされたのを機に、データベース（MySQL）にどのような変更が加わったのか調べてみました。
Windows版のバージョン3.4.6-3と4.0.0-0をインストールし、mysqldumpの出力結果で比較しております。

## 概要

* 追加されたテーブルは`ar_internal_metadata`のみ。
 - Rails5のアプリケーションに自動的に追加されるテーブル、らしい。
* 追加されたフィールドは`auth_sources`テーブルの`verify_peer`フィールドのみ。
 - 暗号化関連に使われる項目？　よくわからない。
* 名称変更のあったフィールドは`comments`テーブルの`comments`フィールドのみ。
 - `content`に変わりました。
* 多数の日付型フィールドで型が`datetime`から`timestamp`に変更されている
 - 正しいデータが入力されていれば問題なく移行できる、はず。

## 変更点詳細

### `ar_internal_metadata`テーブルの追加

* Rails5のアプリケーションに自動的に追加されるテーブル、らしい。

### `attachments`テーブルの変更点

* `created_on`フィールドの型が`datetime`から`timestamp`に
 
### `auth_sources`テーブルの変更点

* `verify_peer`フィールドの追加
 
### `comments`テーブルの変更点

* `comments`フィールドが`content`に名称変更
 
### `documents`テーブルの変更点

* `created_on`フィールドの型が`datetime`から`timestamp`に

### `issues`テーブルの変更点

* `created_on`フィールドの型が`datetime`から`timestamp`に
* `updated_on`フィールドの型が`datetime`から`timestamp`に

### `members`テーブルの変更点

* `created_on`フィールドの型が`datetime`から`timestamp`に

### `projects`テーブルの変更点

* `created_on`フィールドの型が`datetime`から`timestamp`に
* `updated_on`フィールドの型が`datetime`から`timestamp`に

### `repositories`テーブルの変更点

* `created_on`フィールドの型が`datetime`から`timestamp`に

### `schema_migrations`テーブルの変更点

* 「UNIQUE KEY `unique_schema_migrations` (`version`)」が「PRIMARY KEY (`version`)」に変更
 - 意味合いとしては同じ（ですよね？　違う？）

### `settings`テーブルの変更点

* `created_on`フィールドの型が`datetime`から`timestamp`に

### `tokens`テーブルの変更点

* `updated_on`フィールドの型が`datetime`から`timestamp`に

### `users`テーブルの変更点

* `created_on`フィールドの型が`datetime`から`timestamp`に
* `updated_on`フィールドの型が`datetime`から`timestamp`に

### `versions`テーブルの変更点

* `created_on`フィールドの型が`datetime`から`timestamp`に
* `updated_on`フィールドの型が`datetime`から`timestamp`に
Android WebViewでCookieを使う方法

#Android WebViewでCookieを使う方法
本記事ではAndroid開発におけるWebViewでCookieを使用する方法を掲載します。
##CookieManager取得
CookieManagerを取得します。

```
CookieManager cookieManager = CookieManager.getInstance();
```

##CookieManager有効化
CookiManagerを有効化します。

```
cookieManager.setAcceptCookie(true);
```

##Cookie設定
CookiManager#setCookieでCookieを設定します。

```
cookieManager.setCookie(url,cookie);
```

##Cookieを削除しておく
前のインスタンスでのCookieが残っている可能性があるので、削除しておきます。

```
cookieManager.removeAllCookie();
```

##API21以上の場合
API21以上の場合はデフォルトのCookie以外が無効にされますので、これを有効にします。

```
cookieManager.setAcceptThirdPartyCookies(webview, true);
```

以上でcookieの設定が完了になります。
全体のコードとしては下記になります。

```MyWebView.java

public class MyWebView extends AppCompatActivity {

    private final static String TAG = MyWebView.class.getSimpleName();

    private Resources res;
    private WebView mWebView;
    private String url;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_web_view);

        initWebViewSetting();
    }

    private void initWebViewSetting(){
        mWebView = (WebView)findViewById(R.id.webView);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setLoadWithOverviewMode(true);
        mWebView.getSettings().setUseWideViewPort(true);
        mWebView.setInitialScale(1);
        mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        mWebView.getSettings().setSaveFormData(false);

        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.setAcceptCookie(true);
        cookieManager.removeAllCookie();
        cookieManager.setCookie(url,cookie);
        cookieManager.setAcceptThirdPartyCookies(mWebView, true);

        mWebView.loadUrl(url);
    }

}
```

以上です。
pydot  (Graphviz) でノード名が勝手にダブルクオートで囲まれる問題

pydot + Graphviz を使っていて発生した問題と対処方法について。

## 環境
- Python 3.7.1
- Graphviz 2.40.1
- pydot 1.4.1

## 発生した問題
``` python
graph = pydot.Dot()

node_name = '123abc'
node = pydot.Node(node_name)
graph.add_node(node)
```

このように定義したグラフに対して、ノード名からノードを取得しようとすると

``` python
graph.get_node(node_name)[0]  # IndexError: list index out of range
```

このようにうまくいかない。

`get_node()` が空配列 `[]` を返してくるらしく、意図した通りにノードが取得できていない。

## 原因
調べると、ノード名の文字列がなんらかの条件を満たしていると、勝手にダブルクオートで囲まれるということがわかった。

``` python
print(pydot.Node('abc123').get_name())    # abc123   ← わかる
print(pydot.Node('123abc').get_name())    # "123abc" ← なぜダブルクオートで囲んだ
print(pydot.Node('"abc123"').get_name())  # "abc123" ← わかる
print(pydot.Node('"123abc"').get_name())  # "123abc" ← ダブルクオートは二重にはならないらしい
```

なぜ・・・？

これが pydot 特有の挙動なのか Graphviz の挙動なのかはわからない。
詳しい人がいたら教えて欲しい。

## 対応策
ノード名はすべてダブルクオートで囲むことにした。

``` python
graph = pydot.Dot()

node_name = '123abc'
node = pydot.Node(f'"{node_name}"', label=node_name)
graph.add_node(node)
```

``` python
graph.get_node(f'"{node_name}"')[0]  # <pydot.Node at 0x7fb381a8fda0>
```

なんかダサいが、ひとまずこれで動いた。
Amazon Linux 2でEPELを有効にする

Amazon Linux 2では `amazon-linux-extras` コマンドで EPEL を有効化できる。

```sh
sudo amazon-linux-extras enable epel
sudo yum clean metadata
sudo yum install epel-release
```

↓

いつのまにか1発で有効化できるようになってた。
`enable`はなくなったらしい。

```
sudo amazon-linux-extras install epel
```
クリスマスにAdvent Calendarにプレゼントされた記事を調べる

会社の勉強会で今日が担当だったんですが、どうせなので25日にQiita Advent Calendarに現れたサンタさんでも抽出したり、これまでの投稿数の遷移でも調べたりしようと思いました。

ただ時間があまりに取れなくて、とりあえず投稿された記事を抽出するコードを書いて勉強会したので、ついでにこちらに載せます。

### スクレイピング

* https://gist.github.com/Blufe/ff76dd1c1c01f9e5f0b1bf4665e59626
    * スクレイピングには [goquery](https://godoc.org/github.com/PuerkitoBio/goquery) 使いました
    * jQuery のように辿れるので慣れてれば使いやすいかなと


### 結果 (2018/12/25 14:04:40 時点)

個々の記事へのリンクが本当はログ出力されてますが、流石に載せるのは憚れるので最終結果のみ載せます。

668 件の Advent Calendar があって、 281 件のプレゼントが届いてるみたいですね。

```
...
2018/12/25 14:04:40 281 / 668 (42.07%)
```

### P.S.

これを投稿する頃にはプレゼントが一件は増えているであろう。
Ramdaで再帰呼び出しができない

備忘録

**参考**
[javascript - Pointfree recursion in JS with ramda - Stack Overflow](https://stackoverflow.com/questions/40985044/pointfree-recursion-in-js-with-ramda)

Ramdaを使っているときに再起呼び出しができなくて困った．

上の記事の例を借用します．

## こんなとき

```javascript
const removeNulls = R.when(R.is(Object),
                           R.pipe(R.reject(R.isNil),
                                  R.map(removeNulls)));
```

このように書くと，

```
ReferenceError: can't access lexical declaration `removeNulls' before initialization
```


## 解決策

アロー関数を使えとのこと

```javascript
const removeNulls = R.when(R.is(Object),
                           R.pipe(R.reject(R.isNil),
                                  R.map(a => removeNulls(a))));
```

---

~~自分も，なぜエラーが出るのか，なぜアロー関数を使えば解決するのかがわかっていません．~~

> ~~どなたか教えていただけると嬉しいです．~~
rbenv で ruby 2.6 のバージョンを一覧するコマンド例

```rb
$ rbenv install --list | grep 2\.6\.
  2.6.0-dev
  2.6.0-preview1
  2.6.0-preview2
  2.6.0-preview3
```








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
エンジニアのための法律勉強会 #14『民法改正と開発業務委託契約』

# エンジニアのための法律勉強会 2018/11/14

* 場所: [コワーキングスペース茅場町 Co-Edo®](https://www.coworking.tokyo.jp/)
* doorkeeper: [エンジニアのための法律勉強会 #14『民法改正と開発業務委託契約](https://coedo-dev.doorkeeper.jp/events/81966)
* 講師: [弁護士 野島梨恵さん](https://www.amazon.co.jp/%E7%A7%81%E3%81%AE%E6%84%9B%E3%81%99%E3%81%B9%E3%81%8D%E4%BE%9D%E9%A0%BC%E8%80%85%E3%81%9F%E3%81%A1-10%E3%81%AE%E3%82%A8%E3%83%94%E3%82%BD%E3%83%BC%E3%83%89-%E9%87%8E%E5%B3%B6%E6%A2%A8%E6%81%B5/dp/490449735X)
* 当日資料: [エンジニアに必要な法律知識と民法改正（弁護士 野島梨恵）](https://drive.google.com/file/d/1DT4y7AsTO1xX4YbzSvVTqhOqcUrQs_cr/view)

## 民法はここで読めます

* [民法 新旧対照表 12](http://nomenclator.la.coocan.jp/ip/jsup/rev/min/r012.htm)
* [ＲＯＮの六法全書 on LINE](https://www.ron.gr.jp/law/law/minpo_sa.htm#2-9-ukeoi)

## 参考
* ここにもあります: [エンジニアのための法律勉強会 #14『民法改正と開発業務委託契約』参加メモ](https://gist.github.com/koyhoge/1911946b93358692f8852b1fc9c46798)

## メモ

* 業務委託契約は民法にはない。請負的である、または委任である。

### 第二章契約第九節請負

第 632 条あたりの話題

* 請負とは仕事の完成である。120 年前の明治時代なので橋だとか建物が想定されていると思われる。
* 瑕疵は持っているべく機能を持っていないこと。
* 委任、物を完成されるわけではなく作業をやってほしい。信頼関係に基づくのでいつでも解約できたりする。なにかを完成するわけではない。医者は信頼関係はあるが、必ず治るわけではないので準委任になる。委任は原則無償なので契約で縛る必要がある。
* 法律的ではないとを準委任という
* 口約束でも契約は契約。日本国ではそうなっている。裁判は手持ちの証拠がないとならないので契約書が必要。書面主義なので絶対有利です。録音はあいまいになっていたりするので、、ないよりはあったほうがまし程度に考えたほうがいい。
* 取締役なんだけど思ったら個人のハンコが押されていたなんて事例がある。これだと法人相手にならずあとで言っても勝てない。
* 納期がかわったらできれば書面にしておいてほうがいい。それか、議事録をとって、お互いのハンコを押す。全部に押す。すると後から挿入するとここだけおかしいと立証できる。ハンコがないと水掛け論になる。

### 第二章契約第三節売買

新 562 条

* 瑕疵 → 契約不適合責任となった、つまり何が欲しくてどういう契約を結んだのかとか見ましょうということになる。
 * 例: 人工（にんく）が減ると思ってオーダーシステムをいれたけど、実際は減らなかった（つまり稼働までは契約しているがその結果として人工が減るとまでは契約していない）。こういう案件に瑕疵を問うのは難しい。

新 563 条 買主の代金減額請求権あたりの話題

* 契約不適合でやってくれないとき、減額を要求することができる。これは新しい
* 今回から、契約不適合を知った時から一年なんだけど、納品から 5 年つまり、4 年で気づかないとならない。従来は瑕疵担保責任は納品から一年。
* 裁判官も知ろうとしないから、システムがどうのこうのであとでもめると時間がかかる。契約できちんとしておきましょう。

### 第二章第十節　委任

648 条

* 準委任契約は、委任者に対して報酬を請求することができない。請求するときは契約で。

新 648 条の 2 （の 2 ってのは後から付け加えられたことを示す）

* 請負的なものが加わる（報酬はその成果の引き渡しと同時に支払わなければならない）
* 請負的なものとして、調査、分析が入るものと思われる、ただし、物さえつくっていいということでなく、信頼関係において履行しなさいというところが請負とは違うことは変わらない。
* 請負とか委任とかで法律と違うことを書いたらそちらが優先される。
* 理解できる契約書を。弁護士が読んでわからない文章は裁判官は絶対わからない。今は弁護士.com もあるしそういうこところを利用してみてもらえればいい。

### 他に

* 民法はフランスに学生を派遣してひっぱてきたもの。ときどきドイツのも混じっている。これが 120 年使われていた。
 * ただし、第 4 編、親族については戦後に大きく変わっている。そして、今回の改正。
* システムについては判例が積みあがっていて、ただ、バグがあってちょっと使えない程度では瑕疵にはならない → [システム開発をめぐる法律問題［8］完成後の契約解除－瑕疵担保責任に基づく解除](https://tech.nikkeibp.co.jp/it/article/Watcher/20080911/314604/)
 * 東京地裁平成9年2月18日判決: 一定のバグはあるものである。
 * 新民法になっても改正前の積み重ねた判例は生きる。なぜならば、新民法がいままでの判例をもとに改正されているから。
 * 検収印があるけれども、無効となる場合がある。いい加減な検収と立証されればひっくりかえる。
* 準委任契約の場合は印紙が必要がなくなった。例えば弁護士とはいらない。
* 請負とよくわからなくなりそうなときは、この契約は委任であると書く。一つの契約書のなかで、ここまでは委任で、以降は委任であるとしてもいい。お互いの協力によって履行するということを書く。例えば弁護士の場合、依頼人が打ち合わせに来なかったら仕事が進まないが、そこを踏まえ依頼人が打ち合わせに来なかったら契約解除としてもいい。
* FC 契約の時力が強い会社が個人に対し無茶な契約を作ることはできるが、あとでひっくり返る。無茶な加減というものは、裁判官が判断するが、すでに判例が蓄積されている。
* 定型約款とは何か？→ JR の切符の裏にかいてあるやつ [	
改正民法成立、新制度の定型約款とは？](https://www.corporate-legal.jp/%E6%B3%95%E5%8B%99%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9/10937)
* 時効の概念が変わる（総則というところに書いてある）
brew + rbenv に Ruby 2.6 一瞬で入れたいコマンド例。

# 更新

```
$ brew upgrade ruby-build
```


# リリース版インストール(まだない)

```
$ rbenv install 2.6.0
```

# 開発版インストール

```
$ rbenv install 2.6.0-dev
```


# 一覧

```
bash-4.4$ rbenv install --list | grep 2\.6\.0
  2.6.0-dev
  2.6.0-preview1
  2.6.0-preview2
  2.6.0-preview3
  2.6.0-rc1
```











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
SQL -Tips集 

※本記事はSQLの入門を一通り勉強し終えた方向けとなります。


# 環境
Windows10 64bit
PostgreSQL 10.6

※環境はPostgresql/Redshiftを想定しているため、BigQuery 等では使用できないかもしれません。

# 知っていると役に立つかもしれない SQL - Tips集
<br/><br/>
##　そうは言っても基本編

#####■SQLの評価順序

・FROM  > WHERE > GROUP BY > HAVING > SELECT > ORDER BY > LIMIT

#####■countでnullも含めて数を数えたいとき(通常、countのみだとnullの数はカウントされません)

```
SELECT
COUNT(*)
FROM
(SELECT  * FROM テーブル名 )as q 
WHERE 
カラム名 is null
```


#####■SQLでは、「NOT IN」はnullがあると使えない

#####■検索時に「__(ｱﾝﾀﾞｰﾊﾞｰ)」で文字数を指定できる。(ex.「＿ ＿ご」という綴りのものを検索したい)

```
SELECT
*
FROM
テーブル名
WHERE 
item LIKE '__ご'
```

#####■「ORDER BY カラム名 DESC」で高い順に並び替え

#####■「RANK() OVER (ORDER BY カラム名 DESC)」：上から順位をつける(順位を飛ばす)

#####■「DENSE_RANK() OVER (ORDER BY カラム名 DESC)」：上から順位をつける(順位を飛ばさない)

#####■「RANK() OVER(PARTITION BY グループ分けしたいカラム名 ORDER BY カラム名)」：グループ化したものを上から順位をつける(順位を飛ばす)

#####■感覚的に知っておきたいサブクエリの使用場所

-SELECT句でサブクエリを使う時＝特定の列の集計を行ったり、集計関数を使ったり、一件だけ呼び出したいとき

-FROM句でサブクエリを使う時＝名前を付けて改めてSELECT句で使いたい場合。テーブルをどんどん絞っていくとき、もしくはカラム名を作成し、そのコード内で使用したいとき

-WHERE句でサブクエリを使う時＝検索条件を補完したい時や、他の更新可能性のあるテーブルを引っ張ってきたい時(＝他所のテーブルに合わせて都度更新したくない時)、JOINが使えないとき
<br/><br/>
##　チョイと便利なお役立ち構文編

#####■FIRST_VALUE(カラム名)OVER()：ランキング最上位を抽出

#####■LAST_VALUE(カラム名)OVER()：ランキング最下位を抽出

#####■ROWS BETWEEN `開始値 and 終了値`:　` `内の条件で、連番を振る

 -CURRENT ROW(現在の行)
 -n RECEDING(n行前)
 -n FOLLOWING(n行後)
 -UNBOUNDED PRECEDING(前の行すべて)
 -UNBOUNDED FOLLOWING(後の行すべて)

```
rows between unbounded preceding and current row

unbounded preceding = 「グループの最初の行をウィンドウの開始点とする」
current_row = 「ウィンドウの終了点を常にカレント行とする」
```


#####■動的疑似テーブル作成
  -WITH 疑似テーブル名(疑似カラム名、疑似カラム名) as (
  VALUES
  ('単語'、'単語')
  ('単語'、'単語')
  ('単語'、'単語')
  ) select * from 疑似テーブル名

#####■ROLLUP(カラム名1、カラム名2)：カラム別(カテゴリ別)での小計を抽出
<br/><br/><br/>
##　チョイと便利な分析構文編

#####■ntile(数字)：任意の間隔にグルーピング

ex.デシル分析にて：ntile(10) over(partition by カラム名 order by カラム名2 desc)･･･全体を10分割して各行に1～10の値をつける

#####■random() < 0.001 ：ランダムサンプリング。「どの行でも良いからランダムに0.1%(=1000分の1)くらいの量が欲しい」

#####■var_pop(column)=columnの母分散

#####■var_samp(column)=columnの標本分散

#####■stddev_pop(column)=columnの#####標準偏差

#####■stddev_samp(column)=columnの標本標準偏差



 

<br/><br/><br/><br/><br/><br/><br/>


Tipsというよりただの構文集になってしまった感は否めませんが、どこかでお役立て頂ければ幸いです。
<br/><br/><br/>
#### ■次回：ANALYZEコマンドの有用性について(予定)
Raspberry PiとPCをLANで直結してssh接続

# 概要
Raspberry PiとPCをLANケーブルで直結して、Raspberry PiのRasbianにsshで接続する方法を説明する。

# 前提
sshで接続する側のPCはWindows機とする。

# 必要なハードウェア
* PC (Windows)
* Raspberry Pi
* LANケーブル (ストレートケーブルでよい)

# 必要なソフトウェア
* TeraTerm

# 手順
## LANケーブルの接続
Raspberry PiのLANポートとPCのLANポートをLANケーブルで直接接続する。
（間にルーターやハブは挟まない）

## Raspberry PiのIPアドレスを調べる

LXTerminalを起動し、"ip addr show"というコマンドを実行する。
![WS000023.JPG](https://qiita-image-store.s3.amazonaws.com/0/329353/0d3208a4-c98a-653c-94e2-e4739c4821ff.jpeg)

Raspberry PiのIPアドレスが表示される。
eth0が有線LANのIPアドレスなので、PCとLANケーブルで直結する場合はeth0のIPアドレスを使用する。
![WS000024.JPG](https://qiita-image-store.s3.amazonaws.com/0/329353/688e39d1-4b85-beeb-56fc-fb5c87c3dcb8.jpeg)

## TeraTermによる接続
PC(Windows)でTeraTermを起動し、ホスト名にRaspberry PiのIPアドレス(eth0)を指定して[OK]ボタンを押下。
![WS000025.JPG](https://qiita-image-store.s3.amazonaws.com/0/329353/a08cb05d-5a6e-7dc7-3bae-9d3b433bb3f8.jpeg)

Raspberry Piのユーザ名とパスワードを入力して[OK]ボタンを押下。
（デフォルトのまま変更していない場合は、ユーザ名:pi パスワード：raspberry）
![WS000027.JPG](https://qiita-image-store.s3.amazonaws.com/0/329353/ff2d6d3f-d469-9229-9f4d-7856b2566ada.jpeg)

ログインが成功すると以下のような画面が表示される。
![WS000028.JPG](https://qiita-image-store.s3.amazonaws.com/0/329353/f3940b88-7f9d-4764-1c64-68df99a44d9c.jpeg)