OmniAICreator/Qiita-1.07M huggingface dataset:
[PHP][Laravel]SQSにキューデータを送る

#はじめに
取り急ぎ、期待した挙動の確認が取れたコードだけでも共有しておきます。
書き留めレベルですが、参考にしてもらえると嬉しいです。

#事前に
composerでSDKをインストール

```terminal:
$ composer require aws/aws-sdk-php
```

#今回のコード
```php5:
<?php
require 'vendor/autoload.php'; //autoload.php参照
use Aws\Sqs\SqsClient;
use Aws\Exception\AwsException;
define('QUEUE_URL', 'https://sqs.ap-northeast-1.amazonaws.com/0000000/XXXXXXX');　//ここにURL

try{
    $config = [
        'credentials' => [ //アクセスキーとシークレットキーは一つの配列にまとめる必要がある。
            'key' => 'XXXXXXXXXXXXXX', //ここにアクセスキー
            'secret' => 'XXXXXXXXXXXXXX', //ここにシークレットキー
        ],
        'region' => 'ap-northeast-1', //ここにリージョン    
        'version' => 'latest',
    ];
    //SqsClientオブジェクトを作成　ここに送りたいものを入れる
    $client = SqsClient::factory($config);
    $params = [
        'DelaySeconds' => 0,
        'MessageAttributes' => [
            'Title' => [
                'DataType' => 'String',
                'StringValue' => 'Amazon SQS Test',
            ],
        ],
        'MessageBody' => 'This is Amazon SQS Test',
        'QueueUrl' => QUEUE_URL, //上で定数にしたURLね
    ];
    $result = $client->sendMessage($params);

    var_dump($result); //結果確認用

} catch(AwsException $e){ //いつものエラー処理
    var_dump($e->getMessage());
}
```

アクセスキーとシークレットキー（認証情報やcredential情報とも呼ばれている）の取得方法は[こちら](https://aws.amazon.com/jp/developers/access-keys/)をご参照ください。
エントリーシートで文字数確認用のボタンをいちいち押させるな

### 目的
文字数制限があるのに、文字数をリアルタイム表示してくれないエントリーシートのなんと多きことよ。
`textarea, input[type='text']`の近くに文字数を表示させたろ！！（むしろ最初から表示してくれよ）
アドオンかブックマークレットのどちらか・・・。今回はブックマークレットにしよう。

### ブックマークレット
```javascript
javascript:(function(b){if(window.jQuery&&2<=window.jQuery().jquery[0])b(jQuery);else{var a=document.createElement("script");a.src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){b(jQuery.noConflict(!0))};var c=document.body;c.appendChild(a);c.removeChild(a)}})(function(b){["textarea","input[type='text']"].forEach(function(a){b(a).each(function(a,d){var c=document.createElement("span");d.insertAdjacentElement("beforebegin",c);d.insertAdjacentElement("beforebegin",document.createElement("br"));var e=function(){c.textContent=d.textLength};e();b(d).bind("input propertychange",e)})})});
```

### 元コード
```javascript
((func) => {
  if(window.jQuery && (window.jQuery().jquery[0] >= 2)) {
    func(jQuery);
  } else {
    let scr = document.createElement("script");
    scr.src = "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js";
    scr.onload = () => {
      func(jQuery.noConflict(true));
    };
    let bd = document.body;
    bd.appendChild(scr);
    bd.removeChild(scr);
  }
})(($) => {
  ["textarea", "input[type='text']"].forEach((selector) => {
    $(selector).each((i, t) => {
      let span = document.createElement("span");
      t.insertAdjacentElement("beforebegin", span);
      t.insertAdjacentElement("beforebegin", document.createElement("br"));
      let f = () => { span.textContent = t.textLength; };
      f();
      $(t).bind("input propertychange", f);
    });
  })
});
```

### 概説
- 前半部分：引数として渡される関数を実行するjQueryの設定
    - jQueryが存在する && ページのjQueryのバージョンが2以上 ？
        - `true` → 存在するjQueryで関数を実行
        - `false` → `v3.2.1`を読み込み関数を実行 && 読み込んだjQueryを削除
- 後半部分：リアルタイム文字数表示の実装
    - `"textarea", "input[type='text']"`に該当する要素に対して
        - 要素の前に`<span>`（と`<br>`）を生成
        - 入力箇所の変化をバインドして、`<span>`の文字を置換

### 参考
- [Bookmarkletを作ろう(準備編） - Qiita](https://qiita.com/kanaxx/items/63debe502aacd73c3cb8)
- [ブックマークレット(Bookmarklet)のススメ、例えばjQueryを読み込んでみる – yamachan – Medium](https://medium.com/@yamachan360/%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88-bookmarklet-%E3%81%AE%E3%82%B9%E3%82%B9%E3%83%A1-%E4%BE%8B%E3%81%88%E3%81%B0jquery%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93%E3%81%A7%E3%81%BF%E3%82%8B-88290af43de0) 
- [javascript - check if jquery has been loaded, then load it if false - Stack Overflow](https://stackoverflow.com/questions/1828237/check-if-jquery-has-been-loaded-then-load-it-if-false)
「ガウス過程と機械学習」のノートと誤植訂正(1章)

持橋・大羽さんの「ガウス過程と機械学習」について，気になったところをメモします。また誤植もいくつか見つけたので，それも指摘しようと思います。
以下では本書とは異なり，行列はボールド体にしません。また単位行列は$1$で表記することにします。

#1.1単回帰
単回帰の正規方程式ですが，期待値を導入すると表記がすっきりして見通しがよいです。

```math
\begin{eqnarray}
a+b \langle x \rangle &=& \langle y \rangle \\
 a \langle x \rangle + b \langle x^2 \rangle &=& \langle xy \rangle
\end{eqnarray}
```

#1.2重回帰
ベクトルでの微分ということにこだわるとうまくイメージがしずらいかもしれません。$ \dfrac{\partial E}{\partial \boldsymbol{w}} $とは，$\boldsymbol{w}$の各成分で微分したものをベクトルとして並べたものです。たとえば$\dfrac{\partial}{\partial \boldsymbol{w}} \boldsymbol{w}^{T} \boldsymbol{x} = \boldsymbol{x}$は以下のように導くこともできます。

```math
\dfrac{\partial}{\partial w_i} \sum_d w_d x_d = \sum_d \delta_{d,i} x_d = x_i
```
途中式にある$\delta$はデルタ記号です。このように添え字を陽に書いておけば間違えにくいです。

#1.3線形回帰モデル
非線形な関数に拡張するのに線形回帰モデルという名前はどういうことかと困惑しましたが，非線形な基底関数$\phi_h ( \boldsymbol{x})$の線形結合によって表現するということだそうです。きわめてどうでもいい誤植ですが，式(1.62)の$\boldsymbol{X}$は$\boldsymbol{\Phi}$の間違いですね。式(1.60)では正しい表記になっているのに…

#1.4リッジ回帰
二乗誤差$E$に対して$\alpha |\boldsymbol{w}|^2$という，重みの大きさに対するペナルティーを課すことで計算がうまくいくようにします。あとで触れますが，このリッジ回帰というテクニック(?)が重みの事前分布と自然につながっているということは面白いです。
少し気になったのは$\boldsymbol{w} = (X^{T}X+\alpha)^{-1}X^{T} \boldsymbol{y}$において，$X^{T}X+\alpha$の逆行列が常に存在するかということです。線形代数力が足りないのですぐには分かりません…すこし頑張れば証明できそうな気もしますが，面倒なのでやめておきます。
AWS＋CentOS7＋PHP7.1+oci8-2.1.8 でRDSオラクルに接続

#環境
AWS EC2インスタンス
Centos7.6.1810
PHP7.1.26
Apache2.4.6
oci2.1.8

--接続先--
RDS Oracle 12.1.0.2.v5

#前提
接続先のRDSと同じVPC内にEC2インスタンスをたてる（※私がハマったポイントです..）

それでは順にご紹介させていただきます！


#1: Instant Clientをダウンロード

・下記公式サイトにアクセス
https://www.oracle.com/technetwork/topics/linuxx86-64soft-092277.html

・下記２つのファイルをダウンロードして、/tmpに保存。
oracle-instantclient12.2-basic-12.2.0.1.0-1.x86_64.rpm
oracle-instantclient12.2-devel-12.2.0.1.0-1.x86_64.rpm

#2: 準備

```
# yum install libaio
※これがないと怒られた......

# cd /tmp
※先ほどInstant Client保存した場所に移動

# rpm -ivh oracle-instantclient12.2-basic-12.2.0.1.0-1.x86_64.rpm
# rpm -ivh oracle-instantclient12.2-devel-12.2.0.1.0-1.x86_64.rpm 
```

・tnsnames.oraファイルを作成する

```
# mkdir -p /usr/lib/oracle/12.2/client64/network/admin
# vi /usr/lib/oracle/12.2/client64/network/admin/tnsnames.ora

※下記を追加して保存
[DBName] =
  (DESCRIPTION =
    (ADDRESS_LIST =
      (ADDRESS = (PROTOCOL = TCP)(HOST = [エンドポイント])(PORT = 1521))
    )
    (CONNECT_DATA =
      (SERVICE_NAME = orcl)
    )
  )

```

・パスを通す

```
#vi /etc/profile

※下記を追加して保存
export ORACLE_HOME=/usr/lib/oracle/12.2/client64/lib
export NLS_LANG=Japanese_Japan.AL32UTF8
export LD_LIBRARY_PATH=$ORACLE_HOME:$LD_LIBRARY_PATH
export PATH=$ORACLE_HOME:$PATH

# source /etc/profile 
※強制反映

```

・DTraceサポートを有効にする

```
# yum -y install systemtap-sdt-devel
# export PHP_DTRACE=yes
# pecl channel-update pecl.php.net
※これがないとこの後怒られる
# yum -y install gcc
※またまたこれもないとこの後怒られてしまう
```

#3:OCI8のインストール

```
# pecl install oci8-2.1.8　※バージョン指定

途中プロントが出てきますので下記入力
instantclient,/usr/lib/oracle/12.2/client64/lib

```

・php.iniに設定

```
# vi /etc/php.ini
extension=oci8.so ※追加

# systemctl restart httpd.service　※Apache再起動
# php -m | grep oci　※モジュールが読み込まれているか確認
oci8

# php --rf oci_connect　※「oci_connect」関数が存在するかチェック。
Function [ <internal:oci8> function oci_connect ] {

  - Parameters [5] {
    Parameter #0 [ <required> $username ]
    Parameter #1 [ <required> $password ]
    Parameter #2 [ <optional> $connection_string ]
    Parameter #3 [ <optional> $character_set ]
    Parameter #4 [ <optional> $session_mode ]
  }
}

```

・ここまでで接続可能になっているはず！
phpinfo.phpにもoci８が表示されています。

#4:PHPを使って接続確認



```oci8_test.php

$conn = oci_connect('[ユーザー名]','[パスワード]','[エンドポイント]/orcl','AL32UTF8');

if (!$conn) {
    $e = oci_error();
    trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR);
}else{
    echo "接続完了！";
}

```

画面に「接続完了！」とでたら成功です！！！！
私が一番ハマったのは、前述したようにRDSのVPCと別のVPCにインスタンスを作ってしまった事です....。

参考URL
https://mike-neko.github.io/blog/oracle-cent/
RxJSでポーリングする方法

ポーリング処理をするサービスのソースコード

```app.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Subject, Observable, interval } from 'rxjs';
import { flatMap, takeWhile } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AppService {
  subject = new Subject<any>();

  data$ = this.subject.asObservable();

  constructor(
    private http: HttpClient
  ) {
    this.polling().subscribe(data => {
      this.subject.next(data);
    });
  }

  polling(): Observable<any> {
    return interval(1000).pipe(
      flatMap(() => this.http.get('http://localhost:3000/data')),
      takeWhile(() => true),
    );
  }
}
```

あとは、`data$`をsubscribeするだけ。
[OSX Mojave] Vagrantで脳死でUbuntu環境を用意するための備忘録


## 事前にVirtual Boxをインストール

[Download VirtualBox](https://www.virtualbox.org/wiki/Downloads)よりVirtualBoxの`dmg`ファイルをダウンロードし、インストール。

正常にインストールできなかった場合、Macの `詳細設定`->`セキュリティとプライバシー`を確認しブロックしてないかをチェック。

## Vagrantのインストール

[Download Vagrant](https://www.vagrantup.com/downloads.html)よりmacOSを選択

## Ubuntu boxを立ち上げるまでの手順

Vagrantでは**box**と呼ばれる形式でOSイメージが管理されている。

下記コマンドでマシンにUbuntuイメージを追加(例ではUbuntu14.04)

```bash
$ vagrant box add ubuntu/trusty64
```

## Ubuntuの作業ディレクトリ作成

```bash
$ mkdir ~/ubuntu
```

## Vagrant環境の初期化
`vagrant init`で先ほど作成した`~/ubuntu`ディレクトリがVagrant環境になるように初期化する。この操作によって`Vagrantfile`が作成される。

```
$ cd ~/ubuntu
$ vagrant init ubuntu/trusty64
```

## Ubuntu boxの起動&ログイン
```
$ vagrant up
$ vagrant ssh
Welcome to Ubuntu 14.04.6 LTS (GNU/Linux 3.13.0-165-generic x86_64)

 * Documentation:  https://help.ubuntu.com/

...

New release '16.04.6 LTS' available.
Run 'do-release-upgrade' to upgrade to it.


vagrant@vagrant-ubuntu-trusty-64:~$
```

## Vagrant環境の初期化

Vagrant環境のあるディレクトリで下記コマンドを実行して初期化を行う。

```bash
vagrant destroy
```
《Rails》コントローラ作成時に不要なファイルを作成しない方法

# オプションを設定
rails g controller hoge
の後ろに下記のオプションをつける

|オプション|生成されないファイル|
|:--|:--|
|--no-assets|app/assets/stylesheets以下のcssファイル <br> app/assets/javascripts 以下のjsファイル|
|--no-helper|app/helper以下のHelperファイル|
|--no-test-framework|spec/controllers以下のSpecファイル|
|--skip-routes|config/routes.rbのroutesの追記|
|--skip-template-engine|app/views 以下のViewファイル|

◾️参照
https://qiita.com/k_kibi/items/09f717f5a83d41b5f30a

# config/application.rbに追記
~~~ruby
require_relative 'boot'

require 'rails/all'

Bundler.require(*Rails.groups)

module hogehoge
  class Application < Rails::Application
    config.generators do |g|
      g.stylesheets false
      g.javascripts false
      g.helper false
      g.test_framework false
    end
  end
end
~~~
Windows版PHP＋PDOでSQLServerにアクセスしてみる

#目的
Windows 10 Pro x64 ＋ httpd-2.4.27-Win64-VC15 に 
php-7.3.3-Win32-VC15-x64 + php_pdo_sqlsrv_73_ts_x64 をインストールして
SQL Serverにアクセスしてみる 
##ダウンロード
[PHP 7.3 (7.3.3)](https://windows.php.net/download#php-7.3)より
php-7.3.3-Win32-VC15-x64.zipをDLして、適当なフォルダに解凍して配置する。
※自分の場合は C:\Dev\Lang\php7 とリネームして配置
##SQL Server 用のドライバのインストール
[Microsoft SQL Server 用 Drivers for PHP をダウンロードする](https://docs.microsoft.com/ja-jp/sql/connect/php/download-drivers-php-sql-server?view=sql-server-2017)
より Microsoft SQL Server 用 Drivers 5.6 for PHP をDLする
適当なフォルダで SQLSRV56.EXE を実行する
php_sqlsrv_73_ts_x64.dll、php_pdo_sqlsrv_73_ts_x64.dllを C:\Dev\Lang\php7\ext 以下にコピーする
##httpd.confの修正
C:\Apache24\conf\httpd.conf の最後に以下を追加する
<pre>
LoadModule php7_module C:\Dev\Lang\php7\php7apache2_4.dll
AddHandler application/x-httpd-php .php
AddHandler application/x-httpd-php-source .phps
PHPIniDir  "C:/Dev/Lang/php7"
</pre>
##php.iniの修正
short_open_tag = On　;これは好みかなぁ・・
zend.multibyte = On
zend.script_encoding = UTF-8
extension_dir = "ext"
cgi.force_redirect = 0
cgi.fix_pathinfo = 1
fastcgi.impersonate = 1
fastcgi.logging = 0
extension=php_mbstring.dll
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = pass
mbstring.http_output = pass
mbstring.encoding_translation = Off
mbstring.detect_order = UTF-8,SJIS,EUC-JP,JIS,ASCII
mbstring.substitute_character = none
mbstring.func_overload = 0
mbstring.strict_detection = Off
extension=php_pdo_sqlsrv_73_ts_x64
extension=php_sqlsrv_73_ts_x64
##動作の確認
apache を再起動する
C:\Apache24\htdocs　以下に以下を配置
\> cat info.php

```php
<?php phpinfo(); ?>
```
http://localhost:8080/info.php　にアクセスすると phpinfo が表示される
sqlsrv、pdo_sqlsrvが認識されていることを確認する
##サンプルコード
```php
<?php
	$dsn = 'sqlsrv:server=localhost;database=demo';
	$user = 'demo';
	$password = 'demo';

    $dbh = new PDO($dsn, $user, $password);
    
    $sql = "select * from ZIPCODE";
    foreach ($dbh->query($sql) as $row) {
        print($row['POSTAL'] . ' ' . $row['POADDRKANJI']);

    }
	$dbh = null;
?>
```
##参考にしたのは以下のサイト
[ローカルでPHP×Apache連携（Windows環境）](https://qiita.com/banrui/items/69df81652f1d19a618af)
[PHPからSQL Serverへの正しい接続方法](https://codezine.jp/article/detail/5736)
C# はどのようにPDFページを回転するか

日常の仕事の中でたまにPDF文書のページの方向が逆さになる場合がありますが、このように読むのは大変ですから、この記事は、C#を使用するためにどのように使用するかを紹介しと[Free Spire.PDF](https://www.e-iceblue.com/Introduce/free-pdf-component.html)をして、回転PDFページの機能を実現します。

```
using Spire.Pdf;
namespace RotatePDFPage
{
    class Program
    {
        static void Main(string[] args)
        {
             //PDFドキュメントをロードする
            PdfDocument pdf = new PdfDocument();
              pdf.LoadFromFile("Sample.pdf");

              //ドキュメントの第1ページを取得
              PdfPageBase page = pdf.Pages[0];

              //ページの現在の回転角度を取得，そして、現在の角度の上でページを回転させる
              int rotation = (int)page.Rotation;
              rotation += (int)PdfPageRotateAngle.RotateAngle270;
              page.Rotation = (PdfPageRotateAngle)rotation;

              //ファイルを保存する
              pdf.SaveToFile("Output.pdf");   
         }
    }
}
```

回転前:
![PDF.png](https://qiita-image-store.s3.amazonaws.com/0/278784/0c5ed70c-8721-b36c-3358-c25cc845d50b.png)


回転後：
![Rotate PDF.png](https://qiita-image-store.s3.amazonaws.com/0/278784/e4812541-c2cb-ad97-b628-f9a765391c17.png)
$thisの役割

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

#$thisとの遭遇
はじめ**$this**と遭遇した時は、意味がわからなく、必要性を感じませんでした。
下のコードの必要性はあるのかと疑問に思いました。

 ```PHP
public function __construct($menuName, $userName, $body) {
    $this->menuName = $menuName;
    $this->userName = $userName;
    $this->body = $body;
  }
```

#＄thisの必要性

＄thisとは、擬似変数と言われていますが、ピンときません。
＄thisについて、調べてみると、クラス内のメンバ変数にアクセスするためには＄thisを使用することがわかった。
コンストラクタや何かしらのfunctionを用いる時に、そのままでは、使えず、$thisを用いてひっぱてくる必要がある。
下のコードのように広くみるとわかる。

```PHP
class Review {
  private $menuName;
  private $userName;
  private $body;

  public function __construct($menuName, $userName, $body) {
    $this->menuName = $menuName;
    $this->userName = $userName;
    $this->body = $body;
  }
}
```

#まとめ
PHPを勉強し始めて思ったことがあります。
「わからないことが増えてきたが、少し遠目から見てみると、解決することもあるのだな」と。
US配列MacBook ProのBootcamp Windows10でCommandキーを半角/全角キーにマップした話

## 概要
私はmacが特別好きというわけではありませんが、USキー配列のmacbook proが研究室から貸与されたため使用しています。必要に迫られてBootcampでwindows10をインストールしたのですが、JIS配列のwindowsにはある「全角/半角」に相当するキーがなくて困りました。そこで頑張ってCommandキー（windowsでは「ウィンドウズキーとして動作」）に該当機能を割り当てて所望の動作が得られたので作業手順を書きます。なるべく余計なソフトの導入はしたくないのでwindowsの標準機能（IMEの設定+軽いレジストリいじり）だけで実現できる方法を採用しました。

## やったこと

### `caps lock`に`control`を割り当て
本題からはそれますが、よくやられてるこれもやっておきました。不便なので。キーの交換ではなくて`caps lock`を消しました。やり方はレジストリにキーボードのスキャンコードのマップを記述する方法で、http://www.shin-tan.com/swapKey で詳しく解説されています。

###`command`に日本語・英数切り替え機能を割り当て
Bootcampのwindowsでは`alt`+`` ` ``で日本語・英数の切り替えができますが、キーを二つ押さなければいけない上にその二つの同時押しは極めてやりづらいので使用機会の皆無なcommandキーだけで日本語・英数の切り替えができるようにしました。Macではcommand+spaceで日本語・英数の切り替えをするのでこの割り当てが指の動作的にも近くていいかなと思いました。
以下の二段階の手続きを経ます。

1. `F2`に日本語・英数切り替え機能を割り当て
2. `command`に`F2`を割り当て

### `F2`に日本語・英数切り替え機能を割り当て
[MSのQ&A](https://answers.microsoft.com/ja-jp/windows/forum/all/macbook-pro-%E3%81%AE-us/9ea5d799-e66f-4485-b220-2f679ae8c393)を参考にIMEの設定を変更することで`F2`キーに対して日本語・英数切り替え動作を割り当てることができます。`F2`以外にも`ctrl`+`space`などにも割り当て可能で実際そのように設定している人もいるようですが、私はVim等で`ctrl`+`space`を使うので`F2`へ割り当てました。
<img width="362" alt="無題.png" src="https://qiita-image-store.s3.amazonaws.com/0/345927/5c6521e3-afba-acd4-bace-ce0fe6052782.png">

### `command`に`F2`を割り当て
`ctrl`を`caps lock`に割り当てるのと同じ方法でできます。`caps lock`->`ctrl`と共存させる場合は二つのキーマッピングを同じレジストリキー（`HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout`）に記述する必要があります。具体的にやったことは以下のコードが書かれた.regファイルを実行して再起動するだけです。

```:caps2ctrl_command2f2.reg
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout]
"Scancode Map"=hex:00,00,00,00,00,00,00,00,03,00,00,00,1d,00,3a,00,3c,00,5b,e0,00,00,00,00
```

これで`caps lock`->`ctrl`と`command`(左側)->`F2`のマッピングができます。
ちなみに各キーのスキャンコードはhttp://softwaretechnique.jp/OS_Development/Tips/scan_code_set1.html で確認できます。**今回割り当てた`command`キーはスペースキーの左側のやつです。**

## 追記
使っているうちにスペースキーの左側の`command`を`ctrl`に割り当てることでMacとの動作の互換性を高めたくなりました（command+Vでコピーとかがしたい）。そこで日本語・英数切り替えはスペースキーの右側の`command`で行うことにしました。その場合の.regファイルは以下のようになります。IMEの設定でF2に日本語・英数切り替えを割り当てるところは変わりません。

```:caps2ctrl_right-command2f2.reg
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout]
"Scancode Map"=hex:00,00,00,00,00,00,00,00,04,00,00,00,1d,00,3a,00,3c,00,5c,e0,1d,00,5b,e0,00,00,00,00
```

- `caps lock`->`ctrl`
- `command`(スペースの左)->`ctrl`
- `command`(スペースの右)->`F2`

のマッピングが設定されます（再起動で反映）。
【Tips】FileMagic用gemインストール時に発生しうるエラーへの対処

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

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

    current directory: /home/【ユーザー名】/.anyenv/envs/rbenv/versions/2.4.5/lib/ruby/gems/2.4.0/gems/ruby-filemagic-0.7.2/ext/filemagic
/home/【ユーザー名】/.anyenv/envs/rbenv/versions/2.4.5/bin/ruby -r ./siteconf20190315-389-smjtdo.rb extconf.rb
checking for -lgnurx... no
checking for magic_open() in -lmagic... no
*** ERROR: missing required library to compile this module
*** 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-magic-dir
        --without-magic-dir
        --with-magic-include
        --without-magic-include=${magic-dir}/include
        --with-magic-lib
        --without-magic-lib=${magic-dir}/lib
        --with-gnurx-dir
        --without-gnurx-dir
        --with-gnurx-include
        --without-gnurx-include=${gnurx-dir}/include
        --with-gnurx-lib
        --without-gnurx-lib=${gnurx-dir}/lib
        --with-gnurxlib
        --without-gnurxlib
        --with-magiclib
        --without-magiclib

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/ruby-filemagic-0.7.2/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/ruby-filemagic-0.7.2 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/ruby-filemagic-0.7.2/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]

## Ubuntu（Debian系）以外の環境の場合
補足に記述。

# 原因：FileMagicライブラリ
native extension用のFileMagicライブラリが未インストール。

# 解決方法
```bash
sudo apt install libmagic-dev
gem install ruby-filemagic -v '0.7.2'
```

# 補足
CentOS等Fedora系、Gentoo Linux、OS X（Mac）については以下の通り。
Debian系における`sudo apt install libmagic-dev`コマンドを下記のものにそれぞれ置き換える。

## Fedora系
```sh
sudo yum install file-devel
```

## Gentoo
```sh
sudo emerge sys-libs
sudo emerge libmagic
```

## OS X
```sh
brew install libmagic
```

# 参考文献
- [blackwinter/ruby-filemagic](https://github.com/blackwinter/ruby-filemagic)
未経験者がHTML&CSSでレスポンシブサイトを作ってみた

#概要
まっさらな状態からレスポンシブサイト作りに挑戦してみた。
やったことを全部書き留めておきます。

#1. HTML & CSS の学習
[Progate](https://prog-8.com/) に有料登録。
ひとまず、HTML & CSS の初級編と中級編を一気にやってしまう。（所要時間：３時間）

###学んだこと
- HTMLの基本構造
- head内の書き方
- ブロック要素とインライン要素
- marginとpadding
- inputの使い方
- cssのセレクタ
- opacity, rgba
- display
- hover, active
- 相対位置と絶対位置
- Font Awesomeでアイコンをもってくる
- 中央揃えのやり方

#2. 復習としてサイトを作る

##2.1 サイトの設計図を書く
ざっくりとどういう配置にするのかをノートに書いておく。

今回は架空のアーティストのサイトをつくってみました。

###盛り込んだ要素
- ヘッダーを固定表示
- ヘッダーのメニューにリンクを貼る
- hoverで色が変わるようにする
- 画像
- twitterなどのアイコン
- 送信ボタン

##2.2 IDEとしてVisual Studio Codeをインストール
https://code.visualstudio.com/
評判が良さそうなので選択。

##2.3 コーディング
他のコピペなど用いずに、０から入力。（所要時間　４時間くらい）
Google Chromeで逐一更新しながら確認。

実際のコードはGitHubにあげました。
https://github.com/shintaro-hirose/test_1

###苦労したこと・対応
- クラス名に意外と悩む　→　class="news-infomation" みたく、親要素名にハイフンでつなげる
- floatした要素が親要素からはみ出る　→　HTML上級編で解決！
- aのhoverが要素全体に効かない →　displayでブロック化する
- 中央揃えについて、margin:0 auto; と text-align:center;　の違いを理解する
- 最初にpaddingとmarginを0にすれば考えやすい

###残った課題
- レスポンシブ化されていない
- メニュータブのボタンを押下しても何も起きない（ページ内で自動スクロールしてほしい）

##3. 小休憩（Youtube動画）
疲れてきたので、以下の動画を1.5倍速視聴。
[Build An HTML5 Website With A Responsive Layout](https://www.youtube.com/watch?v=Wm6CUkswsNw)

一回しか使わないところはclassのかわりにidを使ったり、レスポンシブの方法がだいたい掴めたり、役に立ちました。

##4. HTML & CSS 上級編でレスポンシブデザインを学習
おなじみProgateにて。（所要時間：１時間）

###学んだこと
- タブレットとスマホの横幅に対応させることが目的
- メディアクエリ
- ブレイクポイントをつくる
- box-sizing:border-box; で幅がborderまで含んだ値になる
- veiwport
- ヘッダーのメニューアイコンの作り方

##5. さきほどのサイトをレスポンシブ化

こちら↓
https://shintaro-hirose.github.io/test_1/

###具体的には
- viewportの設定
- ブレイクポイントを1000px, 670pxに設定
- 1000px以下では
    - メニュータブの横幅ひろげ、文字間をつめる
- 670px以下では
    - ヘッダーロゴを左詰め
    - ヘッダーメニューを非表示、アイコンを表示
    - ニュースの見出しと情報を縦ならびに
    - アルバム情報の横幅を50%から100%に
    - 登録ボタンの横幅を100%に
    - twitterなどのアイコンの文字間をつめる
 
###苦労したこと・対応
- widthとheightの絶対値が設定されているところの変更 → はじめからpxではなく%を使う
- list 全体を中央配置にして、それぞれのliを均等に配置するのに手間取る

###課題
- hoverやaction、translateをもっと使いたい
- ボタン押下でのページ内スクロールができるようになりたい

#6. 感想
Progateで学習して理解した部分も、実際に0からコードを書こうとすると難しいことがわかった。
htmlとcssを愚直に書いていったため結構な時間がかかった。
フレームワークを使えばより簡単に書けるそうなので、早く学びたい。
sqlite3 の gem で Gem::LoadError が出てしまう

railsチュートリアルを完走し、早速オリジナルアプリ開発を始めたのですが、いきなり知らないエラーに直面しました。

---

`rails generate`をすると、以下のようなエラーが出てしまいました。

`Specified 'sqlite3' for database adapter, but the gem is not loaded. Add gem 'sqlite3' to your Gemfile (and ensure its version is at the minimum required by ActiveRecord). (Gem::LoadError)`

つまり
- gemがロードされてない
- ActiveRecordで使えるバージョンなのか確認して
ということっぽい。

## 解決法

結局、Gemfileのsqlite3のところを、
`gem "sqlite3", "~> 1.3.6"`
にすると直りました。
（元々は `gem "sqlite3"`のようにバージョン指定していませんでした）

最新のsqlite3のgemがAcriveRecordをサポートしていないためこのようなエラーが起きていたようです。

参考にしたページ
[sqlite3_adapter has conflict with new version of sqlite3 gem #35153](https://github.com/rails/rails/issues/35153)
重たいGITプロジェクトに役に立つ手順

# 1. 重たいプロジェクトの浅いcloneをする

Gitのプロジェクトは大きくなりすぎる、cloneするのが大変になります。普通の手順だとclone不可能になる場合もあります。
その時、すべてではなく、一部だけをcloneすることができます。

### depthオプションを使って、cloneする

```
git clone https://git/repository/path --depth=1
```

`--depth=1`を使うと、一番最後のコミットだけをcloneします。
デフォルトで1つのブランチだけがcloneされます。（上のコマンドの場合`master`ブランチになります。）

### clone後、すべてをfetchする

cloneが終わったら、他のブランチと昔のコミットも見たいので、浅いcloneを深いcloneに変更します。

```
git remote set-branches origin '*'
git fetch --unshallow
```

# 2. 昔の履歴をローカルに反映しない

昔の履歴で、Gitのプロジェクトは重たくなることはよくあります。
プロジェクトによって、昔の履歴を見れなくていいことがあります。
その時、日付を指定し、見たい時までの履歴だけを反映することができます。

### 存在するローカルリポジトリの日付を指定する

```
git fetch --shallow-since=2019-01-01
```

### 不要なデータのcleanをする

```
git gc --prune=all
```
Ruby on Rails_学習4

#### 投稿目的
- 個人的な学習のために投稿しています。
- 暖かい目で閲覧していただけると幸いです。

## ハッシュとシンボル

### ハッシュ
- ハッシュは配列と似ていますがキーを整数以外でで扱うことができます。
- ハッシュリテラルは{}(波括弧)でキーとデータを => でペアにして記述します。
- ハッシュの波括弧とブロックの波括弧とは別物です。
- ハッシュと配列の違いはハッシュはキーが文字列指定できる、並び順無視する点が配列との違いです。
- キーとデータを複数記述する場合はカンマで区切ります。

```ruby 
# ハッシュ名
apparel = {
    # キー名     データ
    'color' => 'Bule', # キーが'color' / データは'Bule'
    'size' => 'M' # キーが'size' / データは'M'
}

# 下記のように追加することも可能
apparel['gender'] = 'Men' # キーが'gender' / データは'Men'
```

### シンボル(Rubyではよく使われる)
- シンボルとはRubyやある一部の言語でしか扱われていない特殊なデータ形式です。
- シンボルは文字列と考えて問題ありません、 「''」 / 「""」(クォート)が:(コロン)に変更されているだけです。
- ただし、すべての文字を利用することはできません。
- 先頭はアルファベット、2文字目以降は_(アンダースコア)かアルファベット、整数です。

```ruby
# 適用される(クォート)
'name'.split('')

# 適用されない(シンボル)
:name.split('')
```

- ハッシュでシンボルを記述する場合は2種類の記法が存在します。

```ruby
# 記法1
apparel = {
    # キー名     データ
    :color => 'Bule', # キーが:color / データは'Bule'
    :size => 'M' # キーが:size / データは'M'
}

# 下記のように追加
apparel[:gender] = 'Men' 

# 記法2
apparel = {
    # キー名     データ
    color: 'Bule',
    size: 'M' 
}

# キー名を指定する際はコロンは頭に持ってきます
apparel[:color]
```

- 値にはほぼ何でも利用することができます。

```ruby
hash = {
    # ハッシュをネストすることも可能
    apparel: {
        color: 'Red',
        size: 75
    }
}
```

## Railsのコード理解
- 上記の内容を踏まえて下記のコードを理解していきます。

```ruby
stylesheet_link_tag 'application', media: 'all',
                                   'data-turbolinks-track': 'reload'
```
- stylesheet_link_tagはRailsでスタイルシートを追加するための特別なメソッドです。
- Rubyではメソッドでの()を省略することができます。
- media: はハッシュのようですが、実はハッシュがメソッド呼び出しの最後の引数である場合は、波カッコを省略できます。次の2つの行は等価です。

- 実際は下記のようになります。

```ruby
stylesheet_link_tag( 'application', {media: 'all',
                                   'data-turbolinks-track': 'reload'} )
```

- なのでstylesheet_link_tagメソッドは引数が2つ存在します。
- 第一引数の文字列はスタイルシートへのパスを示しています。
- 第二引数はハッシュには2つの要素があり、最初の [media: 'all'] はメディアタイプを示し、次は ['data-turbolinks-track': 'reload'] 要素はRails 4.0で追加されたturbolinksという機能をオンにしています。
- この結果、<%= %> で囲まれているコードを実行した結果がerbのテンプレートに挿入されるようになります。

## クラス
- クラスとはデータと処理をひとまとめにした設計図のようなものです。

### クラス継承
- Stringクラスをsuperclassメソッドを利用して継承階層見ていきます。

```ruby
irb(main)> s = 'class'
=> "class"
irb(main)> s.class
=> String 
irb(main)> s.class.superclass
=> Object # stringクラスのスーパークラス(親)
irb(main)> s.class.superclass.superclass
=> BasicObject # Objectクラスのスーパークラス(親)
```

### クラス作成
- wordクラスを定義して、回文だったらtrueを返すpalindromeメソッドを定義。
- クラス内のメソッドを利用するにはnewメソッドを利用します。

```ruby
class Word 
    def palindrome(string)
        string === string.reverse
    end
end

w = Word.new  # Wordオブジェクトを作成

w.palindrome('トマト')
# 結果: true

w.palindrome('りんご')
# 結果: false
```

- 下記のように継承を利用することでStringクラスのメソッドなども利用することができます。

```ruby
class Word < String
    def palindrome
        self === self.reverse # selfは文字列自身を指す
    end
end

w = Word.new('トマト') #引数に文字列を記述することでselfの部分が指定した文字列に変更されます。

w.palindrome
# 結果: true

w.length
# 結果: 3
```
UITabBarControllerをStoryboardで設定する時にTabBarItemが表示されない

# 概要
UITabBarControllerをStoryboardで各Storyboard Referenceに繋いだ際にTabBarIconが表示されない
いつも忘れて少し時間とられるので備忘録としてメモ

# UITabBarControllerの設定
### StoryboardとReferenceを繋ぐ
Storyboard上でStoryboard Referenceに`Ctrl+ドラッグ`でsegueをつなぎ、Relationship SegueのviewControllersを選択します。すると以下の状態になります。

※この時遷移先のStoryboardはinitialViewControllerを設定しておいてください。
<img width="1204" alt="スクリーンショット 2019-03-15 17.24.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/104317/00db9db8-1f46-24e1-9505-563b971c793c.png">

### Itemを設定する
次にReferenceのTabBarItemを設定します。
以下のように遷移先のReferenceのTabBarItemのInspectorの中でSystemItem（カスタムでも良い）を設定します。
<img width="1163" alt="スクリーンショット 2019-03-15 17.28.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/104317/f0ce5eb4-bd7c-ae64-c72f-852fb0961b3a.png">

**はい！これで完璧っぽい！ビルド&実行！**
**<font color="Red">>>>>>表示されない<<<<<</font>**

はい、ということでここからが本題！
今のItem設定はむしろ一切必要ありません。笑
(Storyboard上でTabBarControllerのItemの表示をちゃんと確認したい場合は設定してください)

ポイントは**<font color="Red">遷移先のReferenceでなくViewControllerにTabBarItemを追加する</font>**ということです！
ここで設定したものが表示されます。


<img width="902" alt="スクリーンショット 2019-03-15 17.44.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/104317/f4c52054-41f0-f288-c407-5a49aaea5829.png">
<img width="1164" alt="スクリーンショット 2019-03-15 17.45.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/104317/960bc67f-b4bc-47b7-159e-076f38229141.png">

# 終わりに
ということでめでたく表示されました！
いつも忘れてしまうのでメモ的に書かせていただきました。

TabBarでの処理はVCの生成とitemの設定などがほとんどなのでできる限りコードを減らして楽に暮らしていきたいマン。
Anaconda via proxy server on windows 10

# TL;DR
* プロキシ環境下でのアナコンダとpipの設定
* Windows10向け（厳密にはwin7以降が対象）
* Anaconda3系で確認した

# .condarc

配置先は C:\Users\ユーザ名\

## コマンドプロンプトでの.condarc作成方法
```
copy nul .condarc
```

## PowerShellでの.condarc作成方法
```
New-Item -ItemType file .condarc
```

## .condarcの内容

```
proxy_servers:
    http: http://proxy.server/
    https: http://proxy.server/
```

## 確認方法

Anaconda Promptで

```
conda config --show proxy_servers
```

# pip.ini
## 配置先
次のフォルダを作成する
C:\ProgramData\pip

## pip.iniの内容

```pip.ini
[global]
proxy = proxy.server
trusted-host = pypi.python.org
               pypi.org
               files.pythonhosted.org

[install]

``` 

## 確認方法

Anaconda Promptで

```
pip config list
```

# 参考
[On Windows 7 and later the file is hidden, but writeable at C:\ProgramData\pip\pip.ini](https://pip.pypa.io/en/stable/user_guide/#configuration)
[pip install fails with “connection error: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:598)”](https://stackoverflow.com/questions/25981703/pip-install-fails-with-connection-error-ssl-certificate-verify-failed-certi)
[pip設定ファイルの書き方](https://gist.github.com/bryanveloso/328409)
[WindowsでLinux/UNIXのtouchコマンド相当(0Byteのファイル作成)の処理](https://orebibou.com/2016/01/windows%E3%81%A7linuxunix%E3%81%AEtouch%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E7%9B%B8%E5%BD%930byte%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E4%BD%9C%E6%88%90%E3%81%AE%E5%87%A6%E7%90%86/)
ローカル環境でRekognitionを使い，認識結果を反映

## はじめに
ローカル環境下でAWS Rekognitionを使用することを目的とし，対象とする画像もローカルに保存しているものを使用する．

Rekognitionで得られた認識結果を，画像にプロットすることで， **学べた感** を出す．

## 前提条件
・AWS CLI(Command Line Interface)が使えること
macOSへの導入設定をこちらに示しておきます
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-macos.html

・Pythonが使える環境が整っていること  &  以下のコマンドでライブラリを追加しました

``` pip install --upgrade boto3 ```
``` pip install pillow ```
``` pip install matplotlib ```
``` (pip install PyQt5) ``` ← 実行しなくても動作する人は要らないはず

先に示しましたが，[３．プログラムを動かす](#プログラムを動かす) まで読んでから実行してください

## 使用環境
MacBook Pro
　 -- macOS Mojave version 10.14.3
　 -- 2.7 GHz Intel Core i7
　 -- 16 GB 2133 MHz LPDDR3
AWS
　 -- CLI
　 -- Rekognition

##手順
1. [AWS CLIの設定](#AWS CLIの設定)
2. [コードを書く](#コードを書く)
3. [プログラムを動かす](#プログラムを動かす)


## 1. AWS CLIの設定
https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-configure.html
こちらの**クイック設定**で設定しました

## 2. コードを書く

```python:local_rekognition.py
#!/usr/bin/env python
#-*- coding: utf-8 -*-

from boto3 import client
from matplotlib import pyplot as plt
from PIL import Image
import random

def local_image_rekognition():
    # "samnple.jpg"は適宜変えてください
    local_image = "sample.jpg"

    img = Image.open(local_image)
    img_width = img.size[0]
    img_height = img.size[1]

    rekognition = client("rekognition", region_name='ap-northeast-1')

    response = rekognition.detect_labels(
        Image={
            'Bytes': open(local_image, "rb").read()
        },
        MaxLabels=128
    )

    colors = {}
    for label in response['Labels']:
        label_name = label['Name']
        if label_name not in colors:
            colors[label_name] = (random.random(), random.random(), random.random())
        for instance in label['Instances']:
            bb = instance['BoundingBox']

            rect = plt.Rectangle(
                (bb['Left'] * img_width,bb['Top'] * img_height),
                bb['Width'] * img_width,bb['Height'] * img_height,
                fill=False,
                edgecolor=colors[label_name])
            plt.gca().add_patch(rect)
    plt.imshow(img)
    plt.show()

if __name__ == "__main__":
    """
    """
    local_image_rekognition()
```

細かいことを気にせずに書いてます．
適宜，関数を別けたり追加したりしてください．

## 3. プログラムを動かす
実行コマンド(macのterminal上で実行)
`` python local_rekogniton.py ``
実行する際に私が詰まったところと，その解決策を示します．

コード内 **response** の内容を，読み込んだ画像にプロットするため
``  pip install matplotlib `` 
でライブラリをインストールしたが，実行エラーとなった．

<解決策>
`` pip install PyQt5 ``
`` rm ~/.matplotlib/matplotlibrc ``
`` echo "backend : Qt4Agg" >> ~/.matplotlib/matplotlibrc ``

色々な解決策がネット上で提示されているが，私ができたのはこの解決策でした．

実行結果はこのようになります．
<img width="1038" alt="Screen Shot 2019-03-15 at 17.45.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/358821/1ee77c06-fe5f-a843-51d8-d00ef6cea247.png">
AWS Rekognitionのサイトで使用されている画像を使用しました．
同じ結果が得られていると思います！


##　参考サイト（圧倒的感謝）
https://qiita.com/ponsuke/items/15322e1adb0f3a41fe94
https://dev.classmethod.jp/machine-learning/amazon-rekognition-update-location/
https://qiita.com/masatomix/items/03419c7ea10262da18f3
ESP32の開発環境を準備する

# ESP32の開発環境を準備
https://docs.espressif.com/projects/esp-idf/en/latest/get-started/
このドキュメントに沿って準備するだけだけど、さくっといかなかったのでメモ。

# 1.ツールチェーンを設定する
pipをインストール

```
sudo easy_install pip
```
ファイルをダウンロード

```
mkdir -p ~/esp
cd ~/esp
tar -xzf ~/Downloads/xtensa-esp32-elf-osx-1.22.0-80-g6c4433a-5.2.0.tar.gz
```

PATHの設定

```
cd
vi .bash_profile
```
以下を追記。一番下だとうまくいかなかったけど、書く場所を変えてみたら成功した

```
export PATH=$HOME/esp/xtensa-esp32-elf/bin:$PATH
```
# 2. ESP-IDFを入手
```
cd ~/esp
git clone --recursive https://github.com/espressif/esp-idf.git
```
# 3.環境変数を設定
1.と同じように、以下を```.bash_profile```に追記

```
export IDF_PATH=~/esp/esp-idf
```
# 4.必要なPythonパッケージをインストール
```
python -m pip install --user -r $IDF_PATH/requirements.txt
```
# 5.プロジェクトを始める
```
cd ~/esp
cp -r $IDF_PATH/examples/get-started/hello_world .
```
# 6.デバイスを接続
ドライバをインストール
https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers

```
ls /dev/tty.* 
```
一覧に```tty.SLAB_USBtoUART```が見えていることを確認

# 7.設定
```
cd ~/esp/hello_world
make menuconfig
```
<img width=70% alt="スクリーンショット 2019-03-15 17.25.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/333838/2185f671-b4c2-2269-5033-79bcc56225d3.png" >
`Serial flasher config`→`Default serial port`→`/dev/tty.SLAB_USBtoUART`を入力

# 8.ビルドとフラッシュ
```
make flash
```
# 9.モニター
`make monitor`で実行されているか確認

```
Hello world!
This is ESP32 chip with 2 CPU cores, WiFi/BT/BLE, silicon revision 1, 4MB external flash
Restarting in 10 seconds...
Restarting in 9 seconds...
Restarting in 8 seconds...
Restarting in 7 seconds...
Restarting in 6 seconds...
Restarting in 5 seconds...
Restarting in 4 seconds...
Restarting in 3 seconds...
Restarting in 2 seconds...
Restarting in 1 seconds...
Restarting in 0 seconds...
Restarting now.
```
`Ctrl+]`で確認を終了

開発環境の準備完了です＼(^o^)／
AWSのタグで指定する簡易的なAnsible Dynamic Inventory

# 動機
AWSのEC2インスタンスにAnsibleを流すとき、Tagの設計を真面目にやっていないがあるタグに基づいてAnsibleのhostsを設定したい場合があります。

正しく設計できている場合は、Ansibleが提供している[ec2.py](https://github.com/ansible/ansible/blob/devel/contrib/inventory/ec2.py)を使うと良いでしょう。

しかし、一部サーバのIPアドレスが取得できればいい場合は簡易的に実装したくなります。

# 方法
`ansible.cfg`で`inventory = inventory`と指定し、inventoryディレクトリに実行可能ファイルを置くことで、プログラムによる[Dynamic Inventory](https://docs.ansible.com/ansible/latest/user_guide/intro_dynamic_inventory.html)を利用可能です。

このプログラムは何でもいいのでawscliを使ったシェルスクリプトで簡易的にAWSのタグから取得したサーバのPrivate IP一覧を渡すことができます。

出力は定められたJSONフォーマットなので、echoで無理やり整形します。

```bash
#!/bin/bash

echo '{"webserver": {"hosts":'
aws ec2 describe-instances \
--filters "Name=tag:Name,Values=webserver*" \
--query "Reservations[*].Instances[*].PrivateIpAddress | [0]" \
--output json
echo '}}'
```

```shell

$ ./inventory/webserver
{"webserver": {"hosts":
[
    "172.31.26.164",
    "172.31.16.156",
    "172.31.19.1",
    "172.31.23.191"
]
}}
```

見た目は悪いですが、処理するのはAnsibleです。最低限実装できたことを喜びましょう。

# AWSコマンドの解説

```shell
# aws ec2 describe-instances \
--filters "Name=tag:Name,Values=webserver*" \
--query "Reservations[*].Instances[*].PrivateIpAddress | [0]" \
--output json
```

このコマンドにより、`tag:Name`でNameタグ、`Values`で`webserver*`とワイルドカードを指定できます。
これは、`webserver1,webserver2,webserver3,webserver4`のようなサーバを想定しています。適宜設定しましょう。

結果はPrivateIPさえわかればいいので`--query`で絞ります。`jq`コマンドでも可です。
もそ、プログラミングを学ぶ【Ruby on Rails】〜form_forメソッドとネストの関係〜

どんどん内容が難しくなり、
「もうイヤだ！わかんない！！」
と叫びながら全力で床に転がって駄々をこねたい衝動に駆られながら、なんとか耐えている もそ。

『これが終わったら一旦休み...』と自分に言い聞かせつつ、今日はform_forメソッドとネストについて書いていきます。

##form_forとは

form_forはへルパーメソッドのひとつで、**特定のモデルを編集/追加するためのフォームを生成**します。
モデルの新規インスタンスに値を追加して保存するので、**投稿フォーム**などに利用します。
たとえばフォームに入力された値は、投稿ボタンを押した瞬間にReviewクラスの新規インスタンスにそれぞれの属性の値としてセットされ、そのままreviewsテーブルに保存されます。
映画のレビューサイトのようなものを例にして図解してみましょう。

![無題1144.jpeg](https://qiita-image-store.s3.amazonaws.com/0/372174/274e821f-5b58-a86f-5cea-0edb5211d29e.jpeg)

投稿ボタンを押した瞬間に、インスタンスを処理してくれる便利機能といったイメージです。


##ネストとは？
ネストは、**ある記述の中に入れ子で別の構造を記述すること。**
doとendで挟んで記述します。

先ほどform_forは投稿フォームなどで使う、と言いました。
仮に映画のレビューサイトだったとすると、たとえばレビューを書くときに
「いま書かれているレビューは、どの作品のレビューになるのか？」という**データの紐づけが必要**ですよね。
この場合、レビューの対象になる作品がないと、レビューは迷子になってしまいます。

たとえば
eiganoreviewsite/product219/review
このようなURLだった場合、作品名"product219"が親、/右側の"review"は子の関係になります。
form_forタグでネスト構造にするときは、この親子関係を指示することで、レビューが迷子にならないようにします。
イメージ的にはこんな感じ。

![無題1145.jpeg](https://qiita-image-store.s3.amazonaws.com/0/372174/621352d4-06fc-4e2e-2359-96c0c9dd2a4a.jpeg)


ネスト１つにつき**親と子でそれぞれインスタンスが一つずつ、合計２つある**という考え方になります。
なのでネストが２つの場合は今回の図が親-子-孫の三者になり、インスタンス変数は３つあるというわけです。


わかりにくく混乱しやすいネストとform_forメソッドの関係、これで少しは分かりやすくなったでしょうか。
自分のつくったサイトではなく、見本のサイトをみて「情報が更新されない？！」とアホなことをして先輩を困惑させたもそ、果たしてRailsを使いこなせる日は来るのか...続く。
NumberPicker(ドラムロール)に任意の文字列を入れる方法と、値の取得

numberPickerで調べると、数字を１刻みで並べたドラムロールは沢山出てくるのですが、任意の文字列を入れたものが出てこなかったので。
また、選択されたドラムロールの値の取得についても微妙に癖があったのでそれについて。

ここでは
①ドラムロールの作成
②OKボタンを押したらその時に選択されていた値を取得

この二点を

①ドラムロールの作成

```java:hoge.java
// ドラムロールに表示したい値を含んだ配列を作る
String[] pref = ["東京", "千葉", "神奈川", "埼玉"];

// numberPickerをインスタンス化する 
NumberPicker picker = fuga.findViewById(R.id.number_picker);

// 配列のインデックスの最小、最大を指定する
picker.setMinValue(0);
picker.setMaxValue(5);

// numberPickerに配列をセットする
picker.setDisplayedValues(pref);
```

インデックスのところは要注意です。
名前に惑わされて「値を入れるのかな？でもStringにMinもMaxもなくね」と最初ちょっと困惑しました。
setMinIdxとかそんな名前にした方がいいのではと思いました。

ちなみにxmlの方はNumberPickerで囲めば作れます

```xml:fuga.xml
    <NumberPicker
        android:id="@+id/number_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
```


ここまでが、ドラムロールの作成です。


次は、
②選択されたドラムロールの値の取得
です。
NumberPickerにはgetValue()なるメソッドがあったので、これを試しました。

```java:hoge.java
// ドラムロールに表示したい値を含んだ配列を作る
final String[] pref = ["東京", "千葉", "神奈川", "埼玉"];

// numberPickerをインスタンス化する 
final NumberPicker picker = fuga.findViewById(R.id.number_picker);

// 配列のインデックスの最小、最大を指定する
picker.setMinValue(0);
picker.setMaxValue(5);

// numberPickerに配列をセットする
picker.setDisplayedValues(pref);

// OKボタンを押したら値を取得できるリスナーです)
fuga.findViewById(R.id.ok_button).setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        // getValueで取れるのはindexです。valueではありません。
        int idx = picker.getValue();
        String selectedPref = pref[idx];

        dismiss();
            }
        });
```

このように、またまた要注意なのが、getValueで取れるのがindexという点ですね。
getIdxとかに(ry
selectedPrefに欲しかった値が入っています。
prefとpickerにはさりげなくfinalを付け加えてます。


iOSだとドラムロールの実装はかなり大変だったのですが、今回はアンドロイドが楽ですね。
Ruby2.6.xとRails4.2.xで発生するRSpecのアラートについて

 ~ まえがき ~
既存システムのRubyバージョンが間もなくサポート切れとなる(2019/3中旬時点)
`Ruby2.3`系統で動いているので、`2.6`にバージョンを上げて挙動確認したときの話です。


## Rubyを2.6.2、Railsを4.2.11.1にあげてRSpecを走らせてみた

するとすべてのテストで`Failure/Error`が発生。
ログを確認すると次のエラーが発生していた。

```
ThreadError:
  already initialized
# ./spec/contorollers/hogehogehoge_spec.rb:line_no:in `block (4 lebels) in <top (required)>`
```

すべて同じエラーでコケているのでとりあえずエラーコードをググる。
すると一つのIssueに引っかかった。

[Tests cause ThreadError: already initialized with Ruby 2.6.0](https://github.com/rails/rails/issues/34790)

このIssueのログも全く同じものだったので
コメントの内容をチェック。

どうもモンキーパッチを修正すればエラーは発生しなくなるっぽい
[can be fixed by this monkeypatch](https://github.com/rails/rails/issues/34790#issuecomment-450502805)

とりあえず[このコードを参照](https://github.com/tricknotes/view_source_map/commit/dd22203420fbf473a954a96e0cac207d5c27014b)して`spec/support/patch.rb`のファイルを作成してテストを再度回してみる。

####それでも別のエラーが発生した。
`ThreadError`はなくなったが同じ件数で今度は`RuntimeEroor`が発生

これのエラー対処もあるかと思って、さっきのIssueを確認するも
対処法な載っておらず、とりあえず`Rails4.2`系を使わずに
さっさと`Rails5.x`にアップグレードしてくださいねということらしい。

###結論
`Ruby2.6`系と`Rails4.2`系は相性が良くないらしいので、
`Rails4.2.x`系をまだ使いたいという場合は`Ruby2.5.x`系を使わないといけない。

逆に`Ruby2.6.x`系を使いたい！という場合は`Rails5.x`系にあげないといけないので
そのあたりは注意するべきだろう。
【解決策】deviseのログアウト機能でのエラー

Railsアプリでdeviseを使用し、ログアウトをしようとすると以下のエラーが出た。

```
No route matches [GET] "/users/sign_out"
```
###原因・解決策
routesが合っていないのが原因なので、書き換えないといけない。
以下のコードを追加する。このコードは既存のログアウトルーティングに上書きされる。

```routes.rb
  devise_scope :user do
    get '/users/sign_out' => 'devise/sessions#destroy'
  end
```


ちなみにviewは以下のままで大丈夫。

```
<%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
```
WebpackでAudioWorkletを使用するときにつまずいたこと気づいたこと

AudioWorkletについては、こちらの記事（[Enter Audio Worklet](https://developers.google.com/web/updates/2017/12/audio-worklet)）などを読んでください。

簡単にお試しする場合は以下のリポジトリがあります。
https://github.com/rinsyan0518/audioworklet-sandbox

Webpackを使用して、AudioWorkletを試すための環境を作成したときに気になったことのまとめです。

# webpack-dev-serverの設定

[複数のconfigをexportする場合](https://github.com/rinsyan0518/audioworklet-sandbox/blob/master/webpack.config.js#L54)にdevServerプロパティは配列の先頭の方のみ使用されるため、browserとprocessorの両方に設定しても片方のみしか使われなかったです。

# Global Objectがwindowではない

AudioWorkletのGlobal Objectは`AudioWorkletGlobalScope`となるようで、`output.globalObject`を変更する必要があります。
そのままにすると `window`を見にいくため、変数が定義されていないことのエラーが出ます。

# `devServer.inline`は`false`にする

trueにした場合、`http://localhost:3000/processor.js`にアクセスしたときにHMRのモジュールが入るため、windowオブジェクトが存在しないエラーが発生します。

おそらくhotとhotOnlyをfalseにすれば動くかもしれないです。（sockjsをロードしたときにwindowが入ってくるかもです。。。）
https://github.com/webpack/webpack-dev-server/blob/master/lib/utils/addEntries.js#L7

# Polyfillについて

GoogleChroneLabsに[audioworklet-polyfill](https://github.com/GoogleChromeLabs/audioworklet-polyfill)があります。
中の処理としては、ScriptProcessorNodeを使用して、AudioWorkletと同じような動作をさせているようです。
こちらを使用する上で気をつけることとして、polyfillの中で、ScriptProcessorNodeを生成するときの引数numberOfInputChannelsが2で固定されていますので、チャンネル数が3以上のものを扱う場合は使用できなさそうです。
Djangoの使い方～ウェブサイト作成編～

##はじめに
[Djangoの使い方～環境構築編～](https://qiita.com/aMMhEXi1gdZR9oq/items/6398b9ed04454c11578c)の続きです。

この章ではウェブサイトを作ってウェブサーバー上で起動します。
##プロジェクトを作成しよう！


最初はDjangoの新規プロジェクトを作成します。

```ruby:コマンドライン
(myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite .
```

次のようなファイル構造が作成されます。
djangogirls
├───manage.py
├───mysite
│        settings.py
│        urls.py
│        wsgi.py
│       \__init__.py
└───requirements.txt


##設定変更
コードエディタでmysite/settings.pyを開きます。
[Wikipediaのタイムゾーンのリスト](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)へ行き、Asia/Tokyoのタイムゾーン (TZ) をコピーして
下記のようにTIME_ZONEの値を変更します。

```mysite/settings.py
TIME_ZONE = 'Asia/Tokyo'
```

次は言語を日本語に変更します。

```mysite/settings.py
LANGUAGE_CODE = 'ja'
```

静的ファイルのパスを追加します。
STATIC_URLの下に STATIC_ROOTを追加します。

```mysite/settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
```

 PythonAnywhere のホストネームへ変更します。

```mysite/settings.py
ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com']
```


##データベースをセットアップする
ここではsqlite3というDjangoがデフォルトで使うデータベースを使用します。
既にファイルの中に次のように書かれています。

```mysite/settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}
```

ブログのデータベースを作成するには、python manage.py migrateを実行します。
うまく行けば次のようになります。

```ruby:command-line
(myvenv) ~/djangogirls$ python manage.py migrate
Operations to perform:
  Apply all migrations: auth, admin, contenttypes, sessions
Running migrations:
  Rendering model states... DONE
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying sessions.0001_initial... OK
```

##ウェブサーバを起動する

次を実行してウェブサーバを起動します。

```ruby:command-line
(myvenv) ~/djangogirls$ python manage.py runserver
```

Windows上で、UnicodeDecodeErrorで失敗した場合は、代わりに次のコマンドを使用します。

```ruby:command-line
(myvenv) ~/djangogirls$ python manage.py runserver 0:8000
```

ブラウザを開き次のアドレスを入力しウェブサーバが起動しているか確認します。

```ruby:ブラウザ
http://127.0.0.1:8000/
```
この画面が出れば成功です。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/376013/917c1144-26eb-f056-e5f7-ffd4225f3021.png)

Webサーバーが稼働している間は追加のコマンドラインは表示されません。
ctl+Cでコマンドラインを入力できるようになります。

##おわりに
次回はオブジェクトを作ります！
次回→[Djangoの使い方～オブジェクト作成編～](https://qiita.com/aMMhEXi1gdZR9oq/items/2471ee5b06d8c53c6a53)
Time, Dateオブジェクト

```

#Timeオブジェクト

#現在時刻
puts Time.now

#タイムゾーン
puts Time.now.zone

#指定のTimeオブジェクトを生成する
datetime = Time.new(2019, 3, 15, 16, 30)
puts datetime

#フォーマットを定義できる
puts datetime.strftime('%Y年 %m月 %d日 %H: %Mmin')

# >>2019年 03月 15日 16: 30min

#Dateオブジェクト

#Dateライブラリを読み込まないと使えない
require 'date'

#今日の日付 todayメソッド
puts Date.today

#任意の日付でDateオブジェクトを作成
date = Date.new(2019, 3, 15)
puts date

#フォーマットを自分で定義
puts date.strftime('%Y年 %m月 %d日')
 
```
Qiita Dark Theme - もう眩しくないよ

2019-10-23 追記
Google Chrome 78 から導入された実験的機能の **Force Dark Mode** がいい感じなので、今後この記事で提供している CSS は更新しません。



## Qiita Dark Theme

Qiita にダークテーマを適用するための CSS を書きました。

サイトに好みのスタイルを適用するためのブラウザ拡張機能 (Stylus がオススメ) で利用できます。

- [Stylus - Chrome ウェブストア](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja)
- [Stylus – 🦊 Firefox (ja) 向け拡張機能を入手](https://addons.mozilla.org/ja/firefox/addon/styl-us/)



## 導入方法

- [qiita.user.css](https://peaceiris.github.io/contents/userstyle/qiita.user.css)

Stylus を導入済みであれば上のリンクをクリックすることでインストール画面が表示されるはずです。更新が楽なのでこのリンクを用いてインストールすることをオススメします。

- [contents/qiita.user.css - peaceiris/contents](https://github.com/peaceiris/contents/blob/master/docs/userstyle/qiita.user.css)

GitHub で管理しているので改善案などありましたら Issue や Pull Request でお知らせください。



## こんな感じになります

### 記事ページ

![post.jpg](https://qiita-image-store.s3.amazonaws.com/0/285675/1c3b5f7a-5ccd-4c6f-c87f-592f3ecb3d7c.jpeg)

### ユーザープロフィール

![user.jpg](https://qiita-image-store.s3.amazonaws.com/0/285675/e9447b54-7724-f057-41ae-652695b00757.jpeg)

### 編集画面

![editor.jpg](https://qiita-image-store.s3.amazonaws.com/0/285675/bab733b2-7db2-bf49-3934-e5167503f4eb.jpeg)
DynamodbでExport to .csvしたcsvファイルをjsonに変換するbash oneliner

TARGET_FILE変数にcsvファイルを指定するだけでOKです。
ご査収ください。

```bash
# NEED: npmが使用できる環境
TARGET_FILE=target_file.csv; npx csvtojson $TARGET_FILE | sed -E 's/ \((N|S|BOOL|B|M|SS|NS|BS)\)//g' > "${TARGET_FILE//.csv/.json}"
```
ローカルでmasterでのcommitを禁止する

## やる理由

- masterでcommitしてpushしようとするとGithubのmasterブランチの保護のおかげでエラーになる
- そのあとにtopic branchを作成してmasterブランチではresetするのはめんどい
- そもそもmasterにcommitできないようにしたい

## やりかた

```shell
$cd path/to/project
$vim .git/hooks/pre-commit
```

`printf "\e[31m%s\n\e[m" "[Error]"` で `[Error]` を赤文字で出力できる。

```shell:.git/hooks/pre-commit
#!/bin/sh

# if the branch is master, then fail.

branch="$(git symbolic-ref HEAD 2>/dev/null)" || \
       "$(git describe --contains --all HEAD)"

if [ "${branch##refs/heads/}" = "master" ]; then
    printf "\e[31m%s\n\e[m" "[Error]"
    echo "can't commit on master branch."
    echo "please commit on topic branch."
    exit 1
fi
```

## masterにcommitしてみる

```shell
$git commit -m "masterにcommitしてみる"
can't commit on master branch.
please commit on topic branch.
```

***成功***
フォーダブル（Foldable）スマホまとめ

これから増えてくると思われるフォーダブルスマホ（折り畳みスマホ）についてまとめます
fold（折りたたむ）=> foldable　（Wear => Wearableと同じ）

Android Qの仕様でも言及されているので情報が入り次第更新します

## デバイス

### 世界初？

中国メーカー「Royole Technology」の「FlexPai」というスマホ
聞いたことのないメーカーなので起爆剤にはならないですが一応世界初（？）らしいです

https://sumaho-otaku.com/flexpai-618

### Sumsung

Galaxy Fold

### HUAWEI

HUAWEI Mate X

https://japanese.engadget.com/2019/02/28/2-galaxy-fold-huawei-mate-x-mwc19/

## 開発目線

onResumeやonStopが変わるらしいです