OmniAICreator/Qiita-1.07M huggingface dataset:
.dockerignoreでは**（任意階層にマッチするワイルドカード）が使える

[日本語のリファレンス](http://docs.docker.jp/engine/reference/builder.html#dockerignore)には書いていないけど、[英語版](https://docs.docker.com/engine/reference/builder/#/dockerignore-file)にはちゃんと書いてあった。

>Beyond Go’s filepath.Match rules, Docker also supports a special wildcard string ** that matches any number of directories (including zero).

他の書き方も含めてまとめると下記のようになる。

```conf
# トップディレクトリ、および全ての子孫ディレクトリにあるnode_modulesを除外
**/node_modules

# トップディレクトリ直下のnode_modulesだけ除外
node_modules

# トップディレクトリの子ディレクトリのnode_modulesだけ除外
*/node_modules

# トップディレクトリの孫ディレクトリのnode_modulesだけ除外
*/*/node_modules
```
【メモ】javascriptでおしゃれなボタンとチェックボックスを連動させる

#仕様
- ブロックが増減できる入力インターフェイスがnested_form＆simple_formで実装されている。
- 曜日のタブというかボタンをクリックするとclassが付与され、それに対応したチェックボックスにチェックが入る
- class付与されたタブというかボタンをクリックするとclassが初期化され、それに対応したチェックボックスのチェックが外れる
- ロード時、チェックボックスにチェックが入っているものに対応するタブというかボタンにclassが付与される

#素のHTML
```haml
.daysTab
  .daysTab__label
    営業日を選んでください
    = f.link_to_remove data: { confirm: '営業時間を削除しますか？' } do
      削除
  .daysTab__buttons
    %ul{onclick: "clickToCheck(event)"}
      %li 月
      %li 火
      %li 水
      %li 木
      %li 金
      %li 土
      %li 日
      %li 祝日
      %li 祝日前
  .daysTab__checkboxes
    = f.input :monday
    = f.input :tuesday
    = f.input :wednesday
    = f.input :thursday
    = f.input :friday
    = f.input :saturday
    = f.input :sunday
    = f.input :holiday
    = f.input :before_holiday
```
この一式が任意で追加削除できる。

- daysTab__checkboxesは最終的にdisplay:noneで非表示になる。
- daysTab__buttonsの部分を好きなようにスタイリングすることでおしゃれなIFが出来上がるｗ

#で、出来上がったJSが以下。

```javascript
function clickToCheck(e) {
  var selfParentNode = e.target.parentNode;
  var selfchildrenNodes = selfParentNode.querySelectorAll("li");
  var selfIndex = Array.prototype.indexOf.call(selfchildrenNodes, e.target);
  var targetParentNode = e.target.parentNode.parentNode.nextElementSibling;
  var targetChildrenNodes = targetParentNode.querySelectorAll('input[type=checkbox]');
  (function clickToChangeClass(className){
    var classlist = e.target.classList;
    if(classlist.contains(className)){
      classlist.remove(className);
    }else{
      classlist.add(className);
    }
  }('active'));
  (function checking(){
    var targetCheckbox = targetChildrenNodes[selfIndex];
    targetCheckbox.checked = !targetCheckbox.checked;
  }());
};
function checkStatus(className){
  document.addEventListener('DOMContentLoaded', function(){
    if(document.getElementById('shopHoursFields') != null){
      var fields = document.querySelectorAll('.fields');
      fields.forEach(function(e){
        var checkboxes = e.children[0].children[2].querySelectorAll('input[type=checkbox]');
        var buttons = e.children[0].children[1].querySelectorAll('li');
        checkboxes.forEach(function(e, index){
          if(e.checked == true){
            buttons[index].classList.add(className);
          }
        });
      });
    }
  }, false);
};
checkStatus('active');
```
shopHoursFieldsはnested_formで増減するfieldsの親要素

とりあえず動く状態にするしか考えてないので、おそろしく長いし雑ｗ
ブラッシュアップに時間を割けるほど余裕がないので一旦終了。
なんか不具合でたらその都度修正・更新します。
Golandで go mod使う時の注意

普段からGolandで開発してるんだけどプロジェクトでgo.modを使おうとして、コードは問題ないはずなのにimportをうまく認識してくれずに困ったのでメモ。

解決方法は単純でメニューのPreferencesから Go Modulesを有効にするだけ。
![スクリーンショット 2019-04-05 11.48.33.png](https://qiita-image-store.s3.amazonaws.com/0/35536/0dc31ab9-cd53-386e-a0e9-4aa6851e9812.png)

go modは便利そうだけど、まだ情報が少なくて妙なところでハマりがち。
Vue.jsで「TypeError: undefined is not an object (evaluating 'l.$set')」エラー

Vue.jsで以下のchange~~メソッドを呼び出したところ・・・

```Javascript:App.Vue
data: () => {
    return {
        connect: {
          'connectStatus': '切断中',
        }
    }
},
methods: {
    changeConnectStatus: (status) => {
      this.$set(this.connect, 'connectStatus', status);
    },
}
```

コンソールに以下のエラーが出た。

```
TypeError: undefined is not an object (evaluating 'l.$set')
```


##()=>ではなくfunctionにしよう

以下のようにすることで解決した。

```Javascript:App.Vue
changeConnectStatus: function(status) {
   this.$set(this.connect, 'connectStatus', status);
},
```

---
Docker multi stage build で Container ID xxxxxx cannot be mapped to a host ID が出るときの対策

かなりハマったので、メモ

[参考：Copying non-root owned files between stages fails when running with userns remapping](https://github.com/moby/moby/issues/34645)

# 条件
* docker version: 18.09.3
* Dockerの設定でユーザネームスペースのリマッピング（"userns-remap": "default"）を設定している
* Docker multi stage build を利用して、build間でファイルコピーを行う

# 例
例えば、次のようなDockerfileを考える

```bash:Dockerfile
FROM debian:stretch-slim as build
RUN touch x && chown 1000:1000 x

FROM debian:stretch-slim
COPY --from=build x ./
```

実行する

```bash

$ docker build ./
Sending build context to Docker daemon  3.072kB
Step 1/4 : FROM debian:stretch-slim as build
 ---> c08899734c03
Step 2/4 : RUN touch x && chown 1000:1000 x
 ---> Using cache
 ---> a2a3dcbc80a8
Step 3/4 : FROM debian:stretch-slim
 ---> c08899734c03
Step 4/4 : COPY --from=build x ./
failed to copy files: failed to copy file: Container ID 232072 cannot be mapped to a host ID
```

# 解法
コピー元のファイル、またはフォルダの権限をroot:rootに一時的に設定しておく。

```:Dockerfile
FROM debian:stretch-slim as build
RUN touch x && chown 1000:1000 x

RUN chown -R root:root x

FROM debian:stretch-slim
COPY --from=build x ./
```

```bash
$ docker build ./
Sending build context to Docker daemon  3.072kB
Step 1/5 : FROM debian:stretch-slim as build
 ---> c08899734c03
Step 2/5 : RUN touch x && chown 1000:1000 x
 ---> Using cache
 ---> a2a3dcbc80a8
Step 3/5 : RUN chown -R root:root x
 ---> Running in c018204a080d
Removing intermediate container c018204a080d
 ---> 64253585d0c5
Step 4/5 : FROM debian:stretch-slim
 ---> c08899734c03
Step 5/5 : COPY --from=build x ./
 ---> Using cache
 ---> 42d641d12386
Successfully built 42d641d12386
```
DockerでのTLSV1エラー

今回躓いたので、メモ書きとして残しています。

仕事で使っていたDockerが動かなくなってしまった(変なものを消したようで、再起動等しても駄目だった…)ので、再度インストールし直すことに。

念の為、VirtualBoxも入れ直してDockerをインストール。
仕事用の環境を作ろうとして、
`docker-compose up`
したら
`[SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version`
でエラーになりました。

Google先生に聞いたところ
GitHubのTLSv1廃止されて使えなくなったらしい。

バージョンを変えれば動くという
`export COMPOSE_TLS_VERSION=TLSv1_2`

上記のコマンド実行して再度
`docker-compose up`
したら見事、環境構築成功しました。
Samba (Windows) 対応の設定

# 初期設定
```bash:コマンド
# samba インストール
yum install samba samba-devel  samba-client

# 設定変更
cd /etc/samba/
cp -p smb.conf smb.conf.$(date -I)
# vi smb.conf

# ユーザー作成
useradd  ftpuser
passwd   ftpuser
pdbedit -a -u ftpuser

# 起動設定
systemctl enable smb nmb
systemctl start  smb nmb
systemctl status smb nmb


```

# 設定ファイル
```conf:samba.conf
[global]
	# セキュリティ
	workgroup          = SAMBA
	security           = user
	passdb backend     = tdbsam
	hosts allow        = 192.168.56.0/24
	unix password sync = Yes
	passwd program     = /usr/bin/passwd %u
 	ntlm auth          = yes
	# ログ設定
	log level       = 1
	log file        = /var/log/samba/smb.log.%m
	max log size    = 5000
	# パーミッション設定
	browseable      = No
	read only       = No
	# ファイルマスク
	create mask     = 0664
	directory mask  = 0775
	# ゲストの利用
	guest ok        = no
	guest account   = ftpuser
	map to guest    = bad user
	# プリンタサーバー
	load printers   = no
	# 文字コード設定
	dos charset     = CP932
	unix charset    = UTF-8

[homes]
	# 基本設定
	comment         = Home Directories
	# パーミッション設定
	inherit acls    = Yes
	writable        = Yes

[www]
	# 基本設定
	comment         = HTTPD Document Root
	path            = /var/www
	# パーミッション設定
	writable        = Yes
	browseable      = Yes
	# ゲストの利用
	guest ok        = yes
```
Firefoxタブ移動切り替え設定方法【2019.04】

<img width="605" alt=" 2019-04-05 11.26.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/122142/d14c8cb6-b7df-7859-ecff-235108764dd3.png">
# 背景 - background -

### 変更前 - default - 
- Ctrl + Tab でプレビュー表示される
- 最近のタブへ移動され、隣に移動しない
- 移動が直感的でないため遅い

### 要望 - needs -
- Ctrl + Tab で 右隣タブへ移動したい
- プレビューはいらない

# 環境 - env - 
- macOS Sierra 10.12.6
- Firefox Quantum ver 66.0.2 (64bit)
![ 2019-04-05 11.10.36.png](https://qiita-image-store.s3.amazonaws.com/0/122142/157d8c52-864f-3619-30c6-c7c69862e374.png)

# 設定方法 - how to setting -
1. url に about:config を入力/Enter
1. search : browser.ctrlTab で検索
1. browser.ctrlTab.recentlyUsedOrder をダブルクリックし true → false へ変更

![ 2019-04-05 11.10.17.png](https://qiita-image-store.s3.amazonaws.com/0/122142/03e32626-6323-d5dd-b13a-edb6bfa23197.png)
![ 2019-04-05 11.09.59.png](https://qiita-image-store.s3.amazonaws.com/0/122142/be2dfa2b-7307-b1a8-7f8c-da246821999c.png)

Done
WordpressログインURLとサイトURLを違うものにする

もうみんな知ってると思うけど、いつも手順とか忘れてしまうので・・・

# ログインURLとサイトURLの確認
だいたいこうなってると思うのです。

WordPressアドレス（URL）`http://www.sample.com/wp/`
サイトアドレス（URL）`http://www.sample.com/wp/`

# サイトアドレスだけ変更
こうなりますよね。

WordPressアドレス（URL）`http://www.sample.com/wp/`
サイトアドレス（URL）`http://www.sample.com/`

wpのみ取りました。

# index.phpの編集
（ここからいつも忘れる・・・）
今回だと以下のフォルダ内に`index.php`があるので、ダウンロードしてきます。

`http://www.sample.com/wp/`

で、以下のような記載があるので

`require( dirname( __FILE__ ) . '/wp-blog-header.php' );`

wpを入れましょ

`require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );`

# index.phpのアップロード
ダウンロードしてきた場所ではなくて、サイトアドレスに入力したアドレスの場所にアップロード

`http://www.sample.com/`

今回だと、この直下に。
アップローーーード。

# 基本はこれで・・・
これでちゃんとログインURLとサイトアドレスURLが別になってるはず。

ログイン画面へは
`http://www.sample.com/wp/wp-admin`

トップページの表示は
`http://www.sample.com/`

これでいける。

# .htaccessのこと
wordpressの管理画面でURLを変更したら、トップページのフォルダ直下に.htaccessが作成されます。
それが作成されない場合は以下のとおりに自分で準備しましょう。

```.htacces
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress
```
以下の部分が変わってます。
`RewriteBase /`
`RewriteRule . /index.php [L]`

これで大丈夫（なはず・・・）
クラスタ構成のDBへ接続ためのJDBC URL

spring-bootでクラスタ構成のDBに接続するためのJDBC URLです。

## Oracle RAC

```java
String DB_URL= "jdbc:oracle:thin:@(DESCRIPTION=(ADDRESS_LIST=" +
                     "(LOAD_BALANCE=OFF)(FAILOVER=ON)" +
                     "(ADDRESS=(PROTOCOL=TCP)(HOST=host1)(PORT=port1))" +
                     "(ADDRESS=(PROTOCOL=TCP)(HOST=host2)(PORT=port2)))" +
                     "(CONNECT_DATA=(SERVICE_NAME=service_name)))"
```
上記LOAD_BALANCE=ON、FAILOVER=ONの設定を組み合わせることによって「負荷分散」と「接続フェイルオーバー」の2つの機能が有効になる。


`application.properties`指定の場合、以下のように記載する。

```properties
spring.datasource.url=jdbc:oracle:thin:@(DESCRIPTION=(ADDRESS_LIST=(LOAD_BALANCE=OFF)(FAILOVER=ON)(ADDRESS=(PROTOCOL=TCP)(HOST=host1)(PORT=1521))(ADDRESS=(PROTOCOL=TCP)(HOST=host2)(PORT=1521)))(CONNECT_DATA=(SERVICE_NAME=testDB)))
spring.datasource.username=user
spring.datasource.password=password
```

## AWS Aurora DBクラスタ
MariaDB JDBC ドライバーの自動フェイルオーバー機能を使用し、フェイルオーバーの状況下でマスターとレプリカを高速に切り替えられる。

JDBC URLを指定する場合、Aurora DBのクラスタエンドポイントを直接指定するか、マスターとレプリカのエンドポイントを両方指定するかの２つ方法があります。

### クラスタエンドポイント指定
```java
String DB_URL = "jdbc:mariadb:aurora//auroradbcluster.auroradbtest.com::3306/testDB";
```

`application.properties`指定の場合、以下のように記載する。

```properties
spring.datasource.url=jdbc:mariadb:aurora//auroradbcluster.auroradbtest.com::3306/testDB
spring.datasource.username=user
spring.datasource.password=password
```



### マスターとレプリカのエンドポイントを両方指定
```java
String DB_URL = "jdbc:mariadb:aurora//rds.auroradbtest.com:3306,rds-ro.auroradbtest.com:3306/testDB";
```

`application.properties`指定の場合、以下のように記載する。

```properties
spring.datasource.url=jdbc:mariadb:aurora//rds.auroradbtest.com:3306,rds-ro.auroradbtest.com:3306/testDB
spring.datasource.username=user
spring.datasource.password=password
```
Railsでlocalhost:3000にアクセスできないはこれをコピペで完結

#localhost:3000サーバーは立ち上がったがいくら更新してもアクセスできない




結論、下のでアクセスできた

```
bundle exec rails s -b 0.0.0.0
```


調べてみるとRails5になり、開発サーバがWebrickからPumaに変わったためそれまでの`rails s`では読み込めなくなったらしい
パスワード付きのExcelを開くバッチファイル

# 概要
パスワードが設定されたExcelを開くたびにパスワードを手入力するのが面倒だったので、指定したパスワードで開いてくれるバッチを用意した。

# 実行環境
- Windows10
- Office2013

# 参考URL
- [パスワード保護されたExcelファイルをコマンドラインから開くには](https://oshiete.goo.ne.jp/qa/2991655.html)
- [Open メソッド (Excel) | Microsoft Docs](https://docs.microsoft.com/ja-jp/office/vba/api/excel.workbooks.open)

# コード
以下のコードをコピーして、開きたいExcelのファイルパス（絶対パス）とパスワードを書き換えて`OpenPassExcel.bat`とかの名前で保存する。
（参考URLがVBSなのにJScriptで書いているのは完全に私の好みです・・・）

```bat:OpenPassExcel.bat
@if (0)==(0) echo off

cd %~dp0

rem ファイルパスとパスワード
set xlsx="開きたいExcelファイルの絶対パス"
set pass="開きたいExcelファイルのパスワード"

rem ファイルが見つからなければ終了
if not exist %xlsx% (
  echo ファイルどこ行った・・・
  timeout 10
  exit /b
)

rem 自分自身をJScriptとして実行
cscript //nologo //E:JScript "%~f0" %xlsx% %pass%

exit /b
@end


// main処理呼び出し
main();


// main処理
function main() {
  var args = WScript.Arguments;
  
  if (args.length == 0) {
    print("引数がありません");
    WScript.Quit(-1);
  }
  
  // Excelファイルパス
  var xlsx = args(0);
  // Excelファイルのパスワード
  var password = args(1);
  
  print(xlsx + "を開きます");
  
  // パスワード付きのExcelを開く
  OpenExcelFile(xlsx, password);
};


// コンソール表示用
//   str: 表示する文字列
function print(str) {
  WScript.Echo(str);
};


// パスワード付きのExcelを開く
function OpenExcelFile(xlsx, password) {
  var excel = WScript.CreateObject("Excel.Application");
  var book = excel.Workbooks.Open(xlsx, null, false, null, password);
  excel.Visible = true;
};
```

# その他
ダブルクリックでサクッと実行したかったのでshebang記法でバッチファイルにJScriptを埋め込んで１ファイルにしている。
呼び出し用のバッチ(.bat)と実処理用のスクリプト(.jsとか.vbs)に分けたり、Excelとパスワードを外部定義にしてもいい。
スクリプトにファイルパスを直書きする場合は`\`を`\\`にエスケープする必要があるので注意。
docker-composeで環境ごとの共通ファイルを作る

# はじめに
本番環境、ローカル環境、CI環境など、環境によって異なるコンテナを使用したいケースがある。
そこで、環境ごとにdocker-composeファイルを作るケースが多いと思うが、それぞれの環境で同じコンテナがある場合は、重複した記述の分冗長になってしまう。

そんな時は共通ファイルを作ろう！！

# 各ファイル構成とコマンド
共通ファイルを作り、各環境のdocker-composeファイルでは、共通のコンテナを、コンテナごとに`extends`で拡張します。
## 共通ファイル
```docker-compose.common.yaml
services:
  version: '3.3'
  db:
    image: mysql:5.7
    container_name: db
    ports:
      - '3306:3306'
    environment:
      MYSQL_DATABASE: 'mydb'
      MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'

  web:
    build:
      context: ./
      dockerfile: ./php/Dockerfile
    ports:
      - '8000:80'
    container_name: web
```

## 例1: ローカル環境
```docker-compose.local.yaml
services: 
db:
  # 規定ファイルのものをそのまま使う
  extends:
    file: docker-compose.common.yaml
    service: db # 規定ファイル内の対象のサービス

web:
  # 規定ファイルのものを拡張して使う
  extends:
    file: docker-compose.common.yaml
    service: web
  environment:  # ここを拡張
    ENV: 'local'
```

### 起動コマンド
```
$ docker-compose -f docker-compose.local.yaml up
```

## 例2: CI環境
```docker-compose.ci.yaml
services: 
db:
  extends:
    file: docker-compose.common.yaml
    service: db

web:
  extends:
    file: docker-compose.common.yaml
    service: web
  environment:
    ENV: 'ci'
```

### 起動コマンド
```
$ docker-compose -f docker-compose.ci.yaml up
```

# 最後に
共通の設定を追加したい時には、共通ファイルに書くだけでどの環境にも反映されるなど、冗長化を防ぐ構成ができました！
複数環境でdocker-composeを使う方は参考にしてみてください。

## 参考ページ
http://docs.docker.jp/compose/extends.html#id17
Kubernetes 1.14: SIG Network の変更内容

# はじめに

この記事では Kubernetes 1.14 における SIG Network の活動に基づく変更点を紹介します。変更点は以下のドキュメントから収集しています。

- [CHANGELOG](https://github.com/kubernetes/kubernetes/blob/master/CHANGELOG-1.14.md)
- [Release Notes Draft](https://github.com/kubernetes/sig-release/blob/1cce523df6c861f0cb44bd4f132637defe5ae8dd/releases/release-1.14/release-notes-draft.md)

## 主要な変更点

- Windows ノード対応が Stable になったことに伴い、Azure-CNI や OVN-Kubernetes、Flannel によるネットワークに対応しました
  - :memo: k8s 1.14 では Windows ノード対応が Stable に昇格したため、それに伴う対応になります

## 既知の問題

- クラスター DNS である CoreDNS が kube-apiserver に接続中に、kube-apiserver がシャットダウンすると CoreDNS がクラッシュする問題があります。これは CoreDNS 1.3.1 で発生し CoreDNS 1.4.0 で修正されています
  - :memo: CoreDNS 1.4.0 は3月3日に[リリース](https://coredns.io/2019/03/03/coredns-1.4.0-release/)されました

## 廃止予定

- Ingress リソースは API `networking.k8s.io/v1beta1` で提供されるようになりました。従来の API `extensions/v1beta1` における Ingress リソースは廃止予定となり、v1.18 で削除されます。既存の保存済みデータは新しい API で提供されます ([#74057](https://github.com/kubernetes/kubernetes/pull/74057))
- API `extensions/v1beta1` における NetworkPolicy リソースの提供は v1.16 で廃止されます。API `networking.k8s.io/v1` での利用に移行してください。既存の保存済みデータは新しい API で提供されます

## 機能変更

- ネットワーク関連のメトリクス名に含まれる `latency/latencies` は `duration` に置き換えられました ([#74418](https://github.com/kubernetes/kubernetes/pull/74418))
  - :memo: 名前が変更されたメトリクスに対して Prometheus のルールなどを設定している場合は設定の変更が必要です
- 新しいテスト `[sig-network] DNS should provide /etc/hosts entries for the cluster [LinuxOnly] [Conformance]` で `/etc/hosts` に設定されたエントリー (Pod の FQDN とホスト名) を検証するようにしました ([#72729](https://github.com/kubernetes/kubernetes/pull/72729))
- Feature gate の1つである CustomPodDNS  が GA に昇格し、有効化されました。この Feature gate は v1.16 で削除されます ([#72832](https://github.com/kubernetes/kubernetes/pull/72832))
  - :memo: CustomPodDNS の有効化により Pod 単位での DNS の設定が可能になりました
- メトリクスガイドラインを満たすために Proxy メトリクスの名前を変更しました ([#72334](https://github.com/kubernetes/kubernetes/pull/72334))
  - :memo: kube-proxy のメトリクスの一部の名前が変更されたため、Prometheus のルールなどを設定している場合は設定の変更が必要です

## API の変更

- dockershim ランタイムを使用している時に Node で大量の I/O が発生していると、予期せず NotReady 状態になってしまう問題を修正しました ([#74389](https://github.com/kubernetes/kubernetes/pull/74389))
- vSphere Volume に zone ラベルが自動で付与されるようになりました。この zone ラベルは PV で確認できます ([#72687](https://github.com/kubernetes/kubernetes/pull/72687))
- kube-proxy が Windows でのオーバーレイネットワークと DSR に対応し、`network-name`、`source-vip`、`enable-dsr` フラグが追加されました ([#70896](https://github.com/kubernetes/kubernetes/pull/70896))
- Nodelocal DNS Cache において、否認したレスポンスの cache TTL 最小値を5秒に変更しました ([#74093](https://github.com/kubernetes/kubernetes/pull/74093))

## SIG からのメモ

- kubeadm: RequiredIPVSKernelModulesAvailable の警告メッセージを改善しました ([#74033](https://github.com/kubernetes/kubernetes/pull/74033))
brewでバージョンを指定してFormulaを入れる


## 目的
brewでマイナーバージョンを指定してFormulaを入れたかった。
今回はImageMagick 6.9.9 を指定したかった。
なお `brew install imagemagick@6` だと 6.9.10 がインストールされる。

## 方法
### ImageMagick 6.9.9 のコミットIDを取得する

```
# homebrewがgit cloneしてくる先に移動
$ cd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula
# homebrewでは高速化のために最新コミットしかダウンロードしてきてないので、リポジトリの全コミットを落としてくる
$ git fetch --unshallow
# これでimagemagick@6のコミットログが表示されるので、6.9.9のコミットIDをメモする
$ git log imagemagick@6
# 9308e2a7e4d73f84e7ab394a9b02c50bbb064a4a
```

### GitHubで確認する
コミットIDを下記URLに入れて、ソースコードを確認する。

[https://github.com/Homebrew/homebrew-core/blob/9308e2a7e4d73f84e7ab394a9b02c50bbb064a4a/Formula/imagemagick@6.rb](https://github.com/Homebrew/homebrew-core/blob/9308e2a7e4d73f84e7ab394a9b02c50bbb064a4a/Formula/imagemagick@6.rb)

### rawのURLを指定する
rawのURLにコミットIDを入れる。

[https://raw.githubusercontent.com/Homebrew/homebrew-core/9308e2a7e4d73f84e7ab394a9b02c50bbb064a4a/Formula/imagemagick@6.rb](https://raw.githubusercontent.com/Homebrew/homebrew-core/9308e2a7e4d73f84e7ab394a9b02c50bbb064a4a/Formula/imagemagick@6.rb)

### インストールする
```
$ brew install　https://raw.githubusercontent.com/Homebrew/homebrew-core/9308e2a7e4d73f84e7ab394a9b02c50bbb064a4a/Formula/imagemagick@6.rb
```

## 参考
[brewでマイナーバージョンを指定してFormulaを入れる方法](https://qiita.com/onokatio/items/51f5f623d8c24d78f6c7)
[JavaScript]ajax通信の重複を回避する方法

#ajax通信の重複を回避するには

ajax()によって非同期通信をする時、イベントが発生するたびに同じ値を取得する方法を説明していきます。
まず下記のコードを見てください

```ajax.js
$('html要素').on('keyup', function(){
		var input = $(this).val();

		$.ajax({
	        type: 'GET',
		url: url,
		data: { keyword: input },
		dataType: 'json'
		})
        .done(function(data) {
          //処理
        })
        .fail(function() {
        //処理
        });

                
```
このようにキーが押されるたびにajax通信によって処理が行われるコードがあります。
ただしこの場合押されるたびに通信してしますので取得するデータが同じデータの場合重複して取得することになります。

それを防ぐのが**jqxhr**オブジェクトです。
これはajax通信をする前にjqxhrオブジェクトを判定しオブジェクトが存在する場合はajax通信を実行しません。
これによりデータの取得の重複を伏せづことができます。

```ajax.js
var jqxhr; //追記部分
$('html要素').on('keyup', function(){
		var input = $(this).val(); 
		if (jqxhr){        //追記部分
			return;
		}

		jqxhr = $.ajax({  //追記部分
	        type: 'GET',
		    url: url,
		    data: { keyword: input },
		    dataType: 'json'
		})
        .done(function(data) {
          //処理
        })
        .fail(function() {
        //処理
        });

                
```

このように記述することによりキーを押した時jqxhrオブジェクトの判定が行われ、オブジェクトがあれば実行しません。
オブジェクトが返ってくるまではajax通信を行いますので１回だけ通信するわけではないのでご注意を。
2019-02-06 新人応援 > 自分の背景知識にあった資料を参照しよう > 誰か他の人が薦めるものでなく

作ったまま放置していた記事。
公開。

### 新人の皆さま

色々な人が色々なことを言います。

- 公式サイト何故見ないの?
    - 実情: 実は見ているが、読みにくい場合が。。。
    - 実情: 今読んでもさっぱり。代わりにブログの方が分かりやすい
        - ある程度、勉強してから読むと良い場合も
- この本は素晴らしい、何故読まないの?
    - 実情: 今の自分の知識と合わない
    - 実情: その分野にはたいして興味はない
- この言語やっておけば大丈夫
    - 実情: その人と自分はやっていることが違うので大丈夫でもない


### 大切なこと

> 人生で最も大切な出会いは自分自身と出会うことなのだと
>
>イブ・サンローラン

ドキュメンタリー映画(監督: ピエール・トレットン)より

### 自分に合ったものを見つけよう

様々な背景を持つ様々な人たち
同じ背景、同じ成長過程、同じ成長速度の人はいない

人のアドバイスは「考える糧」としておくのは大切。
それに盲信するのではなく、良いとこどり、しよう。


> おやじは、僕が理解できないようなところまで、無理に教えようとしたことは一度もないんだ。僕の準備ができていなければ、知識にならないからね。

from
アップルを創った怪物 (Computer Geek to Cult Icon) by スティーブ・ウォズニアック 2011-06-29
WebPack4 css-loader の画像相対パスで小２時間ハマった

## ハマったよ。。background-imageの画像パス

Webpack４でsassをMiniCssExtractPluginを使用してコンパイルしていたら
いきなりのエラー。

> Module not found: Error: Can't resolve '../images/bg_slide_sp01.jpg' in '/Users/amn-user/AMN/Alpha/app/src/scss'

なんでじゃ？？

とハマったこと小２時間。

備忘として残すことにした。

## 原因は？

sass-loaderのエラーなの？
なんなの？？
とGoogle先生に尋ねた。

困った時の`Qiita`と並ぶ`stack overflow`に答えがいた！

回答は以下に。

[WebPack + SASS : How to generate relative image path?](https://stackoverflow.com/a/46226300)

[css-loader](https://github.com/webpack-contrib/css-loader#options)の[option](https://github.com/webpack-contrib/css-loader#url)だった。

optionの`url`がデフォルトでは`true`になっているから絶対パスでないとエラーが出てしまう。
相対パスをしようしたかったら`url: false`にしなくちゃならなかった！！

```
{
   loader: 'css-loader',
      options: {
        url: false,
        sourceMap: true,
        importLoaders: 2
      }
}
```

これで、解決。
Vue CLI の簡単な使い方

サーバー上で Vue CLI を使う簡単な方法です。

次が既にインストールされているとします。

```text
$ vue --version
@vue/cli 4.5.15
$ yarn --version
1.22.5
```

1) プロジェクトの作成

```bash
vue create proj01
```

>Enter を入れていきます。

2) フォルダーを移動して、サーバーの起動

```bash
cd proj01
yarn serve
```

3) ブラウザーで、http://localhost:8080/ にアクセス
![vue_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/017952d5-802a-f38a-34ec-8ed924a813c3.png)


4) src/App.vue を改造

```vue:src/App.vue
<template>
  <div>
    こんにちは。<p />
    <blockquote>
    Nov/4/2021<p />
    </blockquote>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```

5) ブラウザーで、http://localhost:8080/ にアクセス
![vue_bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/843be3d5-47dd-3a7b-6438-66aa2e8e89c7.png)

6) src/App.vue をもっと改造してみます。

```vue:src/App.vue
<template>
<div>
  <p class="message">メッセージ: {{ msg }}
</p>
<blockquote>
Apr/5/2019<p />
</blockquote>
</div>
</template>

<style>
.message { color: blue; }
</style>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: '皆さん、こんにちは！'
    }
  }
}
</script>
```

7) ブラウザーで、http://localhost:8080/ にアクセス
![vue_cc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/62bc9aa5-c0a0-e71f-ecb2-ac917357d65d.png)


8) 更に改造して、テキストを入れれるようにします。
参考ページ
[Vue.js を vue-cli を使ってシンプルにはじめてみる](https://qiita.com/567000/items/dde495d6a8ad1c25fa43)

```vue:src/App.vue
<template>
  <div>
    <p v-if="msg.length > 0">
      {{msg}}
    </p>
    <p v-else>
      no text
    </p>
<input type="text" v-model="msg">
<button @click="clear()">clear</button>
  </div>
</template>

<script>

export default {
  data () {
    return {
      msg: 'Hello World! Nov/4/2021'
    }
  },
  methods: {
    clear () {
      this.msg = ''
    }
  }
}
</script>
```

![vue_dd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/fee1ecf0-7118-5abc-3aef-3ce8082c5572.png)

「これはテストです。」とキーイン

![vue_ee.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0e83d204-c332-d954-dd1e-8ce11ad8292e.png)
[openFrameworks] ofxJsonUtils(ofJson)+Xcode10.2でハマった時に

ハマりました.

## 結論

俺は悪くない.

## 解決策

これ結局 nlohmann jsonと最近のC++の噛み合わせの問題なのでoF0.10.0/1の `ofJson` でも起きます.

### oF0.9.xの人

最新のofxJsonUtilsのmaster使って.

### oF0.10.x〜の人

oF本体のjson.hpp を [nlohmann/json 3.6.1](https://github.com/nlohmann/json/releases/tag/v3.6.1) に置き換えましょう.

apothecaryレポでは既に先週くらいにbakercp先生が [openframeworks/apothecary/pull#130](https://github.com/openframeworks/apothecary/pull/130) を出してマージされてたのでoF0.10.2 からは気にしなくて良くなると良いですね.

以下トラブルシュートの様子

## 問題点

Apple LLVM clangのバージョンが上がったせいか

```cpp
ofJson json;
std::string str;
str = json["hoge"];
```

とするとコンパイルが通らない.
（`std::string_view` が怪しそうだけど結局原因ははっきり分かってない.）

### ハマった点

```cpp
ofJson json;
std::string str = json["hoge"];
```

だと問題が起きないせいで自分のofxJsonUtilsが悪いと思ってしまった.

[nlohmann/json/issues#1362](https://github.com/nlohmann/json/issues/1362) は読んだんだから気付いていれば睡眠時間削らずに済んだのに...

### 反省点

issueはちゃんと読みましょう.
後輩にリーダブルコードを読ませてわかったこと

**※こちらの記事はリーダブルコードを読んだ感想ではありません**

最近、新人さんに教育をする場面が多くなり、彼らのコードを見てコードの書き方、お作法的なことが足りてないなと感じました。（読みにくい・・・(*^_^*)

そこでリーダブルコードを読んでもらおうと思いました。
本は自宅にあるのでそれを持ってこようかとも思いましたが、上司に相談したところ会社のお金で買っていいという話になりました。
２冊買いました。


**サンキュー！上司！経費だぜ！**




ちなみにリーダブルコードはプログラミングの『可読性』について書かれた本で言語にかかわらず参考になると思います。
技術書の中でもトップレベルに売れている本です。
母校の大学図書館にもありました！
今回の機会に私も読み直しましたが、いい本だと改めて思いました。
読んでない方はぜひ読んでください。（布教活動するオタクの図）
![otaku.png](https://qiita-image-store.s3.amazonaws.com/0/137987/9b3a4b51-6aa9-a37a-7921-c89e4efbcc6f.png)

#後輩たちの感想
何人かの後輩たちに読んでもらって感想を聞きました。
対象は１～２年目の社員です。

###感想
・悪い例といい例が載っていてわかりやすかった
・悪い例の書き方をしていたので今後は直していきたい
・使用言語の経験がないのでわからない部分があった
・最後の方（テストコードの話）は書いたことがないのでイメージが掴めなかった

また上司から他におすすめの本があったら買っていいよと言われていたので、２年目の社員を中心に他にどんな本があったらいいかと聞いてみました。
会社にある本は入門系か辞書的なものしかなく、このようなテクニックについて記載された本はなかったためです。

###要望
問題集のようなものがほしいという意見が多かったです。
上記にある通り、弊社に入門書はあります。
ただ入門書を一通り読んだあと何を書けばいいかわからないというようです。

#話を聞いて感じたギャップ
![cat2_1_idea.png](https://qiita-image-store.s3.amazonaws.com/0/137987/70b4223e-bb5b-c7cd-03ad-fe8ec2ae51dc.png)

##１つ目
感想の下２つにあるやったことが無いのでわからなかった系の感想
これは良くないなと思いました。

特に今回は読みやすさを題材にした本だったので処理の内容はともかく目的などは解説されていたと思います。
また目的まで理解できなかったのであればそれについて調べたり考えたりする必要はあるのかなと思います。

**わからないことをわからないままにしない
実体験がなくても意味や目的を想像する**
ということができていないように感じました

##２つ目
要望にある問題集がほしいという意見
これは多かったのですが良くないと思いました

~~例えば『１～１０までの合計を出力しろ』という問題があり、ステップなど考えればほぼほぼ１つの正解のようなものは出来上がるかもしれません~~

~~ただそれに意味はあるのでしょうか？~~
~~その問題集にあった処理を業務でそのまま組み込むことはあるのでしょうか？~~
~~そもそも問題集的な本を見かけませんがそれはなぜでしょう？~~

~~paizaなどプログラミングの問題を出してくれるサイトは知っていますが、あれは力試しであって練習問題ではないと思っています~~

###20190406訂正
頂いたコメントから上記内容を訂正します
>例えば『１～１０までの合計を出力しろ』という問題があり

これらの問題を解くこと意味がないとは思いません
むしろエンジニアにとっては写経といって他人の書いたコードを写す（コピペはしない）でもそれなりに意味があります
さらにそのコードを上位者の人にレビューしてもらう環境があるのであればなお良いです
コードレビューはする側、される側にとてもいい効果を生むと思います

paizaやAtCoderなどで力試しをするのもいいと思います
ただこのようなマイクロ課題をたくさん解いてもある一定以上はコーディング力は上がらないと思います

スライムを10000体倒してもレベルが上がらなくなってしまう現象と同じです（違うかもしれない）
スライムを倒して効率よくレベルが上げられる時期は上記のような課題をこなせば良いと思います
でもその時期ってとても短いんですよね・・・

真面目にお勉強を頑張れば数ヶ月もせずそのレベルは脱してしまうと思いますし、弊社の後輩さんたちは1年近くの経験を積んでいるのでそこは超えていてほしいという思いが文章に出てしまったかもしれません


###じゃあプログラム練習はどうすればよいか？という話
これをいうと後輩たちには嫌な顔をされるのですが、なにか作ってみるのが一番いいと思います。
何を作ればいいかどうすればいいのかわからないと言われます。

言語を習得しようと思うたびに掲示板や電卓などを作っていました。
プログラミングスキルを向上させようという目的なのであれば設計は使い回しでいいと思っています。
なので毎回同じ設計、画面のHTMLとか同じでいいのあればそのまま使っていました

仮想サーバ用意して画面書いてDB作って・・・
自分がやりたいのはサーバーで処理してる言語の勉強なのになかなかたどり着かない・・・
と最初は思いますが経験になっていると思います。

ただモノを作るのに目的がないとモチベーションが続かないというのはわかります。
私は当時githubなどの存在を知らなかったので↑で作ったコードは当時使っていたPCとともに消えてなくなりました（笑）
転職のときのポートフォリオとして使えないと思うのでいいです！
今のようなIT系の仕事をしていたわけでもないので見てもらうような相手もいませんでした

みなさんはgithubに公開して世界中の人に見てもらってもいいし、会社の先輩に確認して貰えばいいのではないかと思います
私は見てって言われたら喜んでみます！

#まとめ
リーダブルコードに限らず技術書は常に書いてあるとおりすればいいというものではないと思います
そのため書いてある内容だけでなく目的やそれにかかるコストを考えていかないといけないと思います

技術書はプロジェクトで発生した問題の答えが載っている本ではないので、常にこの知識はどういう場面で役立つのか考えながら読んで貰えればいいなと思いました

![happy_schoolboy.png](https://qiita-image-store.s3.amazonaws.com/0/137987/e856c970-22f7-c304-71cf-b33baa0b8ae1.png)
arduino microで頭部装着するHIDデバイス（マウス）を作ったので備忘録

#Arduino Microで頭部装着するHIDデバイス（マウス）を作ったので備忘録

###なんでそんなもん作ったか
とある事情で頭部装着ポインティングデバイスを作ってます．これまた諸事情あって，加速度センサから割り出した頭部傾きを使ってカーソルを動かしています．

###Arduino Microについて
サクッと使えて便利なArduinoですが，その中でもArduino Micro, Arduino Leonardo等(ATmega32U4搭載）のものはHIDデバイスとしてそのまま使えちゃう便利な機能がついています．
なので，自作キーボードや自作マウスが作れたりしちゃいます．

###今回使ったセンサ・マイコン
MPU-6050 (6軸ジャイロ加速度センサ）
Arduino Micro
を今回は使用しています．

つなぎ方は（センサ）-（マイコン）間で
(VCC)-(3.3V)
(GND)-(GND)
(SCL)-(SCL)
(SDA)-(SDA)
でつなぐだけです．どうやら僕が使ったMPU-6050にはレギュレータなるものが入っているらしく，直接5V出力につないでも問題ない模様．


###どうすればHIDデバイスとして使える？
![スクリーンショット (53).png](https://qiita-image-store.s3.amazonaws.com/0/302982/82bce737-5844-2980-c2b9-041d277f6991.png)

↑のスクショにあるライブラリをArduino IDEにイントールする．その後，基本的には以下のコードでArduinoがHIDマウスになります．

```C:mouse.c
#include <Mouse.h>

int xval; //x軸方向の相対移動量
int yval; //y軸方向の相対移動量
const int wheelVal = 0; //スクロールホイールの移動量

void setup(){
    Mouse.begin();
}

void loop(){
    //xval = hoge1 センサから上がってきた何らかの値を代入
    //yval = hoge2 センサから上がってきた何らかの値を代入
    Mouse.move(xval, yval, wheelVal);
}

```

他にもクリックなども実装できます．詳しくは[Arduino公式reference](https://www.arduino.cc/reference/en/language/functions/usb/mouse/)を参照されたし．

###最終的なコード

```C:HIDmouse.c
#include <Mouse.h>
#include <Wire.h>

int16_t axRaw, ayRaw, azRaw, gxRaw, gyRaw, gzRaw;
const float kx=0.2; //gain for x
const float ky=0.2; //gain for y
int move_x; //relative distance to move along X-axis
int move_y; //relative distance to move along Y-axis
float acc_x, acc_y, acc_z
float acc_angX, acc_angY;

void setup(){
    Wire.begin();

    Wire.beginTransmission(0x68);
    Wire.write(0x6B);
    Wire.write(0X00);
    Wire.endTransmission();

    Wire.beginTransmission(0x68);
    Wire.write(0x1C);
    Wire.write(0x10);
    Wire.endTransmission();

    Wire.beginTransmission(0x68);
    Wire.write(0x1B);
    Wire.write(0x08);
    Wire.endTransmission();

    Wire.beginTransmission(0x68);
    Wire.write(0x1A);
    Wire.write(0x05);
    Wire.endTransmission();

    Mouse.begin();
}

void loop(){
    Wire.beginTransmission(0x68);
    Wire.write(0x3B);
    Wire.endTransmission();
    Wire.requestFrom(0x68, 14);
    while (Wire.available() < 14);
    axRaw = Wire.read() << 8 | Wire.read();
    ayRaw = Wire.read() << 8 | Wire.read();
    azRaw = Wire.read() << 8 | Wire.read();

    acc_x = axRaw / 16384.0;
    acc_y = ayRaw / 16384.0;
    acc_z = azRaw / 16384.0;

    acc_angX = atan2(acc_y, -acc_x) * 360 / 2.0 / PI;
    acc_angY = atan2(acc_z, -acc_x) * 360 / 2.0 / PI;
    //ここはセンサを縦置きにしているので引数の順序が変わってます．
    //以下センサを水平において使う場合
    //acc_angX = atan2(acc_x, acc_z) * 360 / 2.0 / PI;
    //acc_angY = atan2(acc_y, acc_z) * 360 / 2.0 / PI;

    move_x = (int) (kx*acc_angX);
    move_y = (int) (ky*acc_angY);
    
    Mouse.move(move_x, move_y, wheelVal);
//move()にはint型にキャストした座標を渡します
}
```

これでセンサから上がってきた値から角度を割り出し，それをカーソル速度に反映できます．

###補足（というか教えてえらい人）
１．ジャイロセンサから上がってきた角速度を積分してz軸回転（ヨー軸回転）を出したいんですが無理なんですかね．カルマンフィルタのライブラリ等もあるっぽいですが，ヨー軸回転は出せなさそうだったので．．．

２．arduino leonardo互換ボードだと超小型のものもあるので，後々小型化していく予定．
アーキテクチャってなんだろう

つい最近、何かの集まりかなにかで、「このシステムのアーキテクチャがどうのこうの、、、」みたいな話を聞きました。なんだか違和感を感じたのと、そういえば自分も昔いろいろ言われたことがあったなと思い出したので、コンセプチュアルになってしまいますが記事を書いてみます。

## 違和感は何だったか

システムアーキテクチャをシステム設計みたいな言葉と同義で使われていた気がしたのです。

アーキテクチャは設計（デザイン）では無いはずです。

アーキテクチャは、何ができて（得意で）、何ができないか（不得意か）、ということを表し、そういう特性を持つものはこういう考え方で作られるべきである、という指針を与えるものです（ITシステム以外の、例えば建築の分野でも全く同じ解釈ができるかわからないのですが）。

つまり、アーキテクチャが示す指針に基づいてシステムを設計する、ということになります。指針と設計がバラバラだとイケてないシステムが出来上がります。

ちょっと古い例になりますが、マイクロサービスアーキテクチャで行こうと決めたのに、機能の粒度や分割方法（つまり設計）がまずくて地獄が待っていた、とかでしょうか。こういう例の場合、そもそもアーキテクチャの選択を間違ったのか、その後の設計がまずかったのか、なんとも言えません。なんでもできる万能のアーキテクチャというのは普通はありえなくて、あるアーキテクチャを選択すると、何かができない、または不得意になります。テクノロジーの進化で不得意度合いが軽減されることはありますが、できない/不得意なことをちゃんと認識することが、まずはじめに大事なことだと思います。

## まとめ

改めて言われるまでもない、と怒られるかもしれませんね。。また、これがわかったら何か良いことがあるかと言われると、悪いことは無いはずだ、という程度のものかもしれません。それと、ここに書くことが絶対の答えでもないとは思っています。

ただ、システムの作りを階層的に俯瞰するときに、最上位にくるものがきっとアーキテクチャになるので、理解は深まりそうな気がします。
Rspec beforeブロックの使い方


• before(:each) 
describe または context ブロック内の 各テストの前に実行される。
before(:example), before も同じ意味になる。もしブロック内に4つのテストがあれば、before のコードも4回実行される。

テストごとに実行され、他のテストの状況を受けづらいので基本はこれを使う。

• before(:all) 
describe または context ブロック内の 全テストの前に一回だけ実行される。before(:context) も同じ意味になる。before のコードは一回だけ実行され、それから4つのテストが実行される。

• before(:suite) はテストスイート全体の全ファイルを実行する前に実行される。
フォーム作ってたらArray to string conversion (0)って言われた

#配列から文字列に変換できないよ
直訳しただけだけど、そのまま意味

##原因
配列と文字列、両方の値を持っている

|  変数 | 値 |
| --- | --- |
|  a | 1000 |
|  b | 2000 |
|  c | 3000 |
|  d |    0 => "1000" |
|  e |    0 => "2000" |


##解決
abcのように、deも文字列なら受け取れたが、
配列の場合は、1:nの関係になり、
1:1のデータベースでは受け取れないので
中間テーブルを作る。

中間テーブルの記事書いた↓
https://qiita.com/kusano00/items/001bdc353136935bf4f4
CSSでカンバンのようなタイトルを作成する

# 実現したいこと
<img width="414" src="https://qiita-image-store.s3.amazonaws.com/0/127338/e41e674a-fa15-e720-10df-33f7ff64e3c6.jpeg">

- 上図のようなかわいいタイトルを作成したい。
- 文字数に応じて幅が伸縮するようにしたい。
- 画像を使いたくない。

# 実装方法

```html
<h2 class="headline">見出し</h2>
```

```css
/* 1.カンバンの板 */
.headline {
  background-color: #ec685b;
  border-radius: 6px;
  box-shadow: 0 -2px 0 #f0a39b;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  margin: 0 0 2em;
  padding: 0.5em 1em;
  position: relative;
}
/* 2.カンバンの棒 */
.headline::before,
.headline::after {
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  content: '';
  display: block;
  left: 10%;
  position: absolute;
  width: 80%;
}
.headline::before {
  top: -5px;
  height: 4px;
}
.headline::after {
  bottom: -12px;
  height: 12px;
}
```

1. カンバンの板にあたる部分を作成
2. before, afterで棒にあたる部分を作成

簡単なので、ぜひやってみてください。
svnsyncで失敗したら1リビジョンだけsvndumpで取り込んでみる

諸般の事情でRubyのSubversionリポジトリを手元にミラーする必要があり、やってみたら普通に失敗したのでそこからの回復手順をメモ。

# Ruby のリポジトリ

Rubyのリポジトリは https://svn.ruby-lang.org/ で提供されており、Subversionリポジトリになっている。GitHub側にもリポジトリは有る https://github.com/ruby/ruby が、こちらは素直な `git-svn` ミラーとなっていて、小規模なパッチ向けとしている:

- https://bugs.ruby-lang.org/projects/ruby/wiki/HowToContribute

> Pull request to https://github.com/ruby/ruby is acceptable for tiny fixes. But pull requests which need discussions will be ignored unless you create a redmine ticket.

# `svnsync` コマンド

Gitと異なり、SubversionはDVCSではないため、リポジトリの完全なミラーを作るための直接的な方法は用意されていない。代わりに、 `svnsync` コマンドで各リビジョンの属性と内容をコピーすることができる。

`svnsync` の使い方自体は他に記事がある https://qiita.com/tomy103rider/items/6add817418ced7219231 ので省略。

# 大きなコミットの取り込みに失敗する

何故か `svnsync` は大きなコミットの取り込みに失敗することがある。これは特にRubyのSubversionリポジトリに限ったことではなく、ある程度の規模のリポジトリではそれなりに発生する気がする。... **VCSとしてそれはどうなんだ** という気もするが。。

失敗した場合は `E175002` のエラーコードを表示して失敗する。エラーメッセージは異なるかもしれない。

```
svnsync: E175002: REPORT request on '/repos/ruby/!svn/rev/58595' failed
```

# 失敗からの回復

この失敗から回復するには、手動で同じコミットを再現してやる必要がある。最近のSubversionには、リモートのリポジトリをダンプできる `svnrdump` コマンドが有り、これで問題の有るリビジョンをダンプした上で `svnadmin` で取り込むという手順となる。

Rubyのリポジトリの場合、ここで回復しても別のリビジョンで失敗した(後述)。その度にこの操作をリビジョンを替えて繰り返している。

## 手動投入するリビジョンを `svnrdump` で取得する

↑のエラーメッセージを見ると、失敗したリビジョンは `58595` であることがわかる。というわけで、 `svnrdump` コマンドを使ってこのリビジョンをファイルにダンプする。( `r` に注意: ローカルのリポジトリをダンプする `svndump` コマンドも存在する。)

```
$ svnrdump dump -r58595 --incremental http://svn.ruby-lang.org/repos/ruby > dump
```

この直前のリビジョンまでは `svnsync` で取り込めているため、 `--incremental` オプションを使える。

## ダンプを `svnadmin` でロードする

`svnrdump` によって生成されたダンプは `svnadmin` でミラー先にロードできる。

```
$ svnadmin load /cygdrive/f/svnmirrors/ruby < dump
...
     * パスを編集しています : trunk/spec/rubyspec/shared/time/strftime_for_time.rb ... 完了しました。
     * パスを編集しています : trunk/spec/rubyspec/spec_helper.rb ... 完了しました。

------- リビジョン 58595 をコミットしました >>>
```

## `svnsync` 用のrevpropを手修正する

`svnsync` ではミラー先のSubversionリポジトリでのリビジョン `0` のrevpropを使用してsyncの状況を管理している。このため、手動でリビジョンを取り込んだ場合は手でこれらのrevpropを手修正する。

修正が必要なrevpropは、 `svn:sync-last-merged-rev` と `svn:sync-currently-copying` の2つとなる。

- `svn:sync-last-merged-rev` の修正 → Dumpのリビジョンである `58595` にセットする

```
$ svn propset --revprop -r0 svn:sync-last-merged-rev 58595 file:///cygdrive/f/svnmirrors/ruby
属性 'svn:sync-last-merged-rev' がリポジトリのリビジョン 0 に設定されました
```

- `svn:sync-currently-copying` の削除

```
$ svn propdel --revprop -r0 svn:sync-currently-copying file:///cygdrive/f/svnmirrors/ruby
属性 'svn:sync-currently-copying' をリポジトリのリビジョン 0 から削除しました
```

# 失敗するリビジョンの傾向

手元でRubyのリポジトリをコピーしてきたときは、 `58595` `59979` `62526` の各リビジョンが失敗した。このリビジョンを見てみると:

- https://svn.ruby-lang.org/cgi-bin/viewvc.cgi?view=revision&revision=58595
- https://svn.ruby-lang.org/cgi-bin/viewvc.cgi?view=revision&revision=59979
- https://svn.ruby-lang.org/cgi-bin/viewvc.cgi?view=revision&revision=62656

全てが `ruby/spec` の取り込みであることがわかる。これらのコミットはいずれも3000以上の変更を含んでおり、svnsync側の秘孔を突く何かが有るのかもしれない。
4/5 jsコードレシピ集 学習 classList.add textContent innerHTML 

要素にクラスを追加
要素.classList.add(追加したいクラス)

要素のテキストを取得
要素.textContent

要素のテキストをXXXXXで書き換え
要素.textContent = "XXXXX"

要素のHTMLをYYYYYで書き換え
innerHTML = "YYYYY"

textContentはテキストのみ取得するが、innerHTMLはHTMLを取得出来るので、cssの操作も可能。

```js:js
// weather要素を取得
const weatherElement = document.getElementById('weather');

// クリックしたらイベント発火
weatherElement.addEventListener('click', () =>
{
  // weather要素にnew-classというクラスを追加
  weatherElement.classList.add('new-class');
  
  // weather要素のテキストを書き換える
  weatherElement.textContent = "気温は<strong>66℃</strong>になる予定です"

  // アラートでweather要素のテキストを表示
  alert(weatherElement.textContent);
  // #出力結果 = 気温は<strong>66℃</strong>になる予定です

  // weather要素のHTMLを書き換え、テキストを太字にするstrongタグを追加する
  weatherElement.innerHTML = "気温は<strong>66℃</strong>になる予定です";
// #出力結果(太字、背景が黄緑) = 気温は66℃になる予定です
});
```

```html:html
<p id="weather>今日は猛暑です<p>
```

```css:css
.new-class {
  background-color: greenyellow;
}
```
pythonでAtCoder -ABC007-

# 対象
- AtCoder初心者（緑よりもランクが下の人）
- pythonがそれなりにかける人
- 数学やプログラミングに対する深い理解を持っていない人
    - Ex) DP, 深さ優先探索, メモ化再帰の実装ができない

# 動機
AtCoderは全ての問題に対して解説スライドが存在するが
解説をみて何となく理論を理解しても独力で実装ができない場合が多かった。

他の提出を見ても親切に解説コメントがついている回答はあまり存在せず、理解を実装に落とすことに苦労したため、簡単にでも解説がある回答はないものかと思い立ったことが動機である。

同様の苦労をしている人のためにも、稚拙なコードではあるが何らかの参考になればと思い
私の回答とそれに対する簡単なコメントを付与したコードをアップロードする。

# 実行環境
- python3

# A
```python:A.py
print(int(input())-1)
```
# B
```python:B.py
from string import ascii_lowercase
alphabet = ascii_lowercase
A = input()
if len(A) == 1:
    i = alphabet.index(A)
    print(-1 if i == 0 else alphabet[i-1])
else:
    print(A[:-1])
```
アルファベットを出す標準ライブラリがあるので使ってみました。

# C
```python:C.py
from queue import Queue
R, C = map(int, input().split(' '))
Sy, Sx = map(int, input().split(' '))
Gy, Gx = map(int, input().split(' '))
L = [[s for s in input()] for _ in range(R)]

move = [(0, -1), (0, 1), (1, 0), (-1, 0)]
q = Queue()
ans = 0

q.put([(Sy, Sx)])
L[Sy-1][Sx-1] = '#'

while not q.empty():
    pos = q.get()
    valid_pos = []
    for p in pos:
        for m in move:
            y, x = p[0]+m[0], p[1]+m[1]
            if y == Gy and x == Gx:
                ans += 1
                print(ans)
                exit()
            if L[y-1][x-1] == '.':
                L[y-1][x-1] = '#'
                valid_pos.append((y, x))
    if len(valid_pos) != 0:
        q.put(valid_pos)
    ans += 1
print(ans-1)
```
解説の通り、Queueを使って幅優先探索を実装しました。
もう少し効率よく書けそうな気はします。

# D
```python:D.py
def except_4_9(length):
    # 桁DPのテーブルを作る
    t = [[0] * 2 for _ in range(len(length)+1)]
    t[0][1] = 1
    for i in range(len(length)):
        for j in range(len(t[0])):
            n = int(length[i])
            # 制限を受けない桁
            if j == 0:
                t[i+1][j] += t[i][j] * 8
            # 制限を受ける桁
            else:
                for k in range(n+1):
                    if k in [4, 9]:
                        continue
                    # n==kの場合次の桁も制限を受ける
                    if n == k:
                        t[i+1][1] += t[i][j]
                    # n!=kの場合次の桁は制限を受けない
                    else:
                        t[i+1][0] += t[i][j]
    return sum(t[len(length)])

N, M = map(int, input().split(' '))
print(1 + M-except_4_9(str(M)) - (N-except_4_9(str(N-1))))

```
桁DPと呼ばれる解法を使っています。


## 終わりに
ABC→特に何も見ずに回答
D→解説、他の回答から実装

以上です。
PagerViewで左右どちらにフリックしたか判定する方法

        /** Touch前の座標*/
        private boolean mIsPagerViewTouchDown = false;

        pager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                float touchX = event.getX();

                switch(event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        mPreviousTouchPointX = touchX;
                        break;
                    case MotionEvent.ACTION_UP:
                        float dx = touchX - mPreviousTouchPointX;

                        // TouchDown時のタッチ座標とTouchUp時の座標を比較しどちらにフリックしたか判定
                        if ((Math.abs(dx) > 1)) {
                            if (dx > 0) {
                                Log.d(MainActivity.class.getSimpleName(), "右へフリック"+dx);
                            } else {
                                Log.d(MainActivity.class.getSimpleName(), "左へフリック"+dx);
                            }
                        }
                        break;
                    default:
                        break;
                }

                mPreviousTouchPointX = touchX;
                return false;
            }
        });
seabornのヒートマップで軸ラベルが省略される

seabornで大きいヒートマップを出力すると自動で軸を省略してくれる。

数値ならいいけど軸が文字列だったりすると困る。

[seaborn 0.9.0 documentation](https://seaborn.pydata.org/generated/seaborn.heatmap.html)に設定が載ってたので、
今後また躓いた時のために軸を省略しない方法を簡単に書き残す。

## 何も考えずに出力した場合
seabornを用いて以下のようなコードで30×30のランダム行列をヒートマップ化してみる。

```Python
import matplotlib.pyplot as plt
import seaborn as sns
import pandas as pd
import numpy as np

N = 30 #正方行列サイズ
X = np.random.rand(N,N) #ランダムな行列の生成

hoge = [str(i+1) for i in range(N)] #適当なラベル

df = pd.DataFrame(X,index = hoge,columns = hoge) #データフレーム化

sns.heatmap(df) #ヒートマップ作成
plt.show()  #表示
```

このような ~~マイクラのブロック~~ ヒートマップが作成される。
<img src="https://qiita-image-store.s3.amazonaws.com/0/392425/0d88d0a6-5048-f24c-8c83-576a222468ab.png" alt="ヒートマップ例省略ver.png" width=70%>
1,3,5...と軸が省略される。
普段は困らないけど軸が文字列だったりすると困る時がある。

## 軸を省略しないで出力する
以下のようにキーワード引数を設定する。

```Python
sns.heatmap(df,
            xticklabels = 1,    #x軸
            yticklabels = 1     #y軸
            ) #ヒートマップ作成
```

するとこうなる。
<img src="https://qiita-image-store.s3.amazonaws.com/0/392425/a13438f8-b7b7-4d23-b31d-6643f47160b9.png" alt="ヒートマップ例非省略ver.png" width=70%>

無事軸ラベルが省略されずに幸せになれる。

以上。
Pythonの配列のZip化

names = ['Jenny', 'Alexus', 'Sam', 'Grace'] 

dogs_names = ['Elphonse', 'Dr. Doggy DDS', 'Carter', 'Ralph'] 

names_and_dogs_names = zip(names, dogs_names) 

print(list(names_and_dogs_names)) 

 

↑inputはzipだが、printするときはlistで行う
PyCharmを使って"Hello World!"を表示させるまで

# PyCharmを初めて使ってみる(プロジェクトの作成からGitHubへの投稿まで) #
Pythonの勉強を始めたので、ついでにPython用の開発環境であるPyCharを使用してみました。
すみません、GitHubへの投稿はPyCharmの機能は使用せずコマンドラインで実行してます。
PyCharmのGit機能は今度使ってみたいと思っています。
なに分初心者なので、間違い等がございましたらご指摘いただけると幸いです。よろしくお願いします。

## 環境について ##
OSはmacOS(10.14.3)です。また、pythonはpyenvをつかって仮想環境にpython3.7.2をインストールしています。

# 実際に使ってみる #

## プロジェクトの作成 ##
PyCharmを起動するとWelcomページが開くので、"Create New Project"を選択します。
<img width="400" alt="create_project.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/227731/cea34a53-9871-a4f1-732c-9c85f3ff5afb.jpeg">

## プロジェクト名の指定とインタプリタの選択 ##
続いて、Pythonのインタプリタを選択します。
システムにインストールされているインタプリタを直接しようするか、プロジェクト毎に作成した仮想環境のインタプリタを使用するかを選択します。今回はpythonの仮想環境で3.7.2を使用することにします。

<img width="400" alt="interpreter.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/227731/27e97cee-c610-989c-87a1-4a2c4ff8ed77.jpeg">


[公式ヘルプ](https://pleiades.io/help/pycharm/creating-virtual-environment.html)を読んだ僕の理解だと、仮想環境を作成すると、プロジェクト毎に異なるバージョンのインタープリタを使用する事ができるだけでなく、プロジェクト毎にPythonのパッケージをインストールして完全に他からは独立したPython環境を構築できるということですかね。これについては今度確認してみます。

仮想環境で作成すると、図の様にプロジェクトの下に**venv**というディレクトリが作成されて、その中にプロジェクト用のPython環境が構築されているのがわかります。

プロジェクトで新しいパッケージが必要になってインストールすると、このディレクトリに保存されることになるのですかね。これについては今度確認してみます。


<img width="200" alt="venv.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/227731/a68d41a4-607d-0c66-64b0-8b7379637574.jpeg">


## Pythonファイルの作成 ##
プロジェクトの部分で右クリックして図のようにPythonファイルを新たに作成します。

<img width="400" alt="newfile.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/227731/d9dda6f5-7478-5fc1-a6b1-89d5343a3f51.jpeg">


## Pythonの実行 ##
コードを記述したら、ソースコードの画面で右クリックして"Run"を選択します。

<img width="400" alt="runpython.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/227731/949b33b3-dc99-3921-d836-43a734dbf685.jpeg">

特に問題なければ下のウィンドに"Hello World"と表示されます。
<img width="400" alt="result.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/227731/0f5cb70c-6ed5-ebe8-f982-26da700e7a91.jpeg">

## GitHubに投稿 ##
これについては[GitHub](https://github.com/kuboshu/helloworld)に記述したので、こちらを参照してください。

## PyCharmを使用した感想 ##
結論から言うとかなり便利です。普段Emacsを使用しているのですが、Emacsに似たキーバインドもプラグインとしてインストールできるようですし、Emacs自身も呼び出せるのでありがたいですね。またPyCharm上でMarkdownの編集やターミナルの呼び出し、Gitなど普段使用しているものが集約されている感じでした。まだ知らない機能が色々ありそうなので今後も遊んで行きたいと思います。ちなみに僕は*Markdown Navigator*というプラグインをインストールして使ってます。
これらが無料で使用できるなんて感謝しかないですね。

[Markdow : PyCharm公式ヘルプ](https://pleiades.io/help/pycharm/markdown.html)
[Terminal : PyCharm公式ヘルプ](https://pleiades.io/help/pycharm/working-with-system-console.html)
[IntelliJ IDEAおすすめプラグイン-Qita crossroad0201さん](https://qiita.com/crossroad0201/items/bf5528cc57cadab67638)
## 参考 ##
[jetbrains.com](https://www.jetbrains.com/help/pycharm/quick-start-guide.html)
Herokuに画像を投稿する方法

【前提】
・localでの画像投稿の設定はできてる
・画像投稿は gem carrierwave を使用しての投稿

#AWS S3を使う
Railsでの開発をしていてHerokuにアップしたところ、git上に入っている画像は表示されていた（背景画像とかロゴ画像とか）がサービス利用の中で画像を投稿したときの表示ができていなかったので調べたところAWS S3というサービスを使うらしい。
AWSは今まで使ったことがなかったが意外と簡単に設定ができた。


##アカウント登録
[こちらから](https://aws.amazon.com/jp/register-flow/)登録できます。
以下の記事をよんでAWSってこわ、、、っていうイメージがあったので私を含む初学者の方の取り扱いには気をつけてください、、、(私もこうなりかけた)
登録から1年間は利用無料らしいです。
 [初心者がAWSでミスって不正利用されて$6,000請求、泣きそうになったお話。 - Qiita](https://qiita.com/mochizukikotaro/items/a0e98ff0063a77e7b694)


##やることリスト
アカウント登録後に作るものとしては
**AWS関連**
　- IAMグループ、ユーザー登録（ここでCSVファイルダウンロード←Macで普通に開けなくてもエディタで開けます）
　- S3バケットの作成
**Rails関連**
　- gemインストール（"fog-aws"）
　- config/initializers/carrierwave.rb作成&設定記述
　- uploadersフォルダのファイルに画像の格納場所記述

AWS関連の設定はこちらの記事を読み進めて行けば確実にできます！
[【Rails】S3へ『CarrierWave+fog』を使って画像アップロードする方法](http://vdeep.net/rubyonrails-carrierwave-s3)
[【Rails5】AWS S3+CarrierWave+Fog::AWSを利用して画像アップロード機能を作成する](https://ty-engineer.com/ruby-on-rails/s3-carrierwave-fog-imageupload/)

##Railsでの設定
gemインストール

```Gemfile.
gem 'fog-aws' 
```
```
$ bundle install
```
作成＆設定記述（keyはべた書き禁止！！！！！）

```config/initializers/carrierwave.rb
require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

if Rails.env.production?
  CarrierWave.configure do |config|
    config.fog_provider = 'fog/aws'
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: 'IAM登録で取得したアクセスキー',
      aws_secret_access_key: 'IAM登録で取得したシークレットアクセスキー',
      region: 'ap-northeast-1'  # S3バケット作成時に指定したリージョン。左記は東京を指す
    }
    config.fog_directory  = 's3-rails-image-uploader' # 作成したS3バケット名
  end
  # 日本語ファイル名の設定
  CarrierWave::SanitizedFile.sanitize_regexp = /[^[:word:]\.\-\+]/ 
end
```

```uploaders/image_uploader.rb
  #fogに画像格納
  if Rails.env.production?
    storage :fog
  else
    storage :file
  end

```


簡単！！！😍