OmniAICreator/Qiita-1.07M huggingface dataset:
Microsoft RDPでWindows機につなげる時の日本語キーボード問題

# はじめに

MacからWindowsにリモート接続(GUI)するときに、MicrosoftのRDP(Remote Desktop)を使っているのですが、Mac側が日本語レイアウトなのに、Windows側でUSレイアウトとして認識されてしまいます。

このRDPが日本語レイアウトであることをWindows側に伝えてくれない問題については、
https://qiita.com/hidecha/items/33624f6ae57d41f3cd86
に非常に詳しく書いてあります。これ自体は、Microsoftが対応してくれないとどうしようもないようです。

また、私も以前バックスラッシュキーについて
https://qiita.com/KNaito/items/174404ea42470d00c063
で記事を書いたのですが、この時使っていたKarabinerというソフトは、現OSであるHigh Sierraには対応していないので、利用出来なくなってしまいました。

そこで妥協策として、Karabinerの後継ソフトであるKarabiner-Elementsを使って無理矢理キーコードを変換して使ってみたところ、まあまあ使える感じでしたので、紹介します。


# Karabiner Elements

Karabiner Elementsは、Macでキーレイアウトをソフトウェア的に切り替えられるアプリケーションです。

https://qiita.com/kamoc/items/93550dd7f5bbae15e70f

にも紹介されています。最新版はhttps://pqrs.org/osx/karabiner/ からダウンロードしてインストールできます。

このKarabiner Elementsは、専用のjsonファイルを用意することで、特定のアプリが立ち上がっている時だけキーボードのレイアウトを変更することが可能です。(Complex Modifications機能) 

そこで、この機能を使って、Mac (日本語レイアウト)から、WindowsにRDP接続したとき用の設定ファイルを作ってみました。

それが
https://github.com/knight9999/RDPCustomKeyboard
です。(直接ダウンロードしたい場合は、
https://raw.githubusercontent.com/knight9999/RDPCustomKeyboard/master/rdp-custom-keyboard.json
からダウンロード出来ます。)

## 使い方

上記から取得したjsonファイル `rdp-custom-keyboard.json`を、
~/.config/karabiner/assets/complex_modifications
の下においてください。

次に、Karabiner-Elementsを立ち上げて、+Add Ruleボタンをクリックすると

<img width="997" alt="スクリーンショット 2018-04-14 20.16.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/105847/e82e0d53-65f6-ef4a-88a2-063576a636e1.png">

このような画面が出るので、JIS to US with backslashボタンのところのEnableボタンを押して有効化してください。すると、Mictosoft Remote Desktopが立ち上がった時に、キーボードの変換がなされて、日本語レイアウトのキーで入力したものが、対応するUSレイアウトのキーになってくれます。

例えば、デフォルトではSHIFT+2で `@` が入力されてしまうのが、ただしく `"` が入力されるようになります。

# ファイルの解説

`rdp-custom-keyboard.json` の中を見ると、次のようなコードがたくさんあります。

```
        {
          "type": "basic",
          "from": {
            "key_code": "2",
            "modifiers": {
              "optional": [
              ],
              "mandatory": [
                "shift"
              ]
            }
          },
          "to": [
            {
              "key_code": "quote",
              "modifiers": [ "shift" ]
            }
          ],
          "conditions": [
            {
              "type": "frontmost_application_if",
              "bundle_identifiers": [
                "^com\\.microsoft\\.rdc\\.mac$"
              ]
            }
          ]
},
```
これは、shiftを押しながら2キーを押した時、それを `"` として認識させる設定になります。

`conditions` で条件として、アプリIDが com.microsoft.rdc.mac のときだけ有効になるようにしています。(キー一つ一つに設定しなくてはいけないので、面倒でしたが、、、。また、他のアプリに適用したい場合は、アプリID を、Karabiner EventViewerを使って調べて、`conditions` の設定を変更します）

# 苦労した点

キーのマッピングをしたい場合、Karabiner EventViewerを使って地道にしらべていけばよいのですが、やや分かりにくかったものをまとめます。

JISの¥キー => `internatioal3`
JISの]キー => macのキーでは `backslash` ですが、macに接続した外部キーボードでは `non_us_pound` でした。
Windows側の(USキーボード扱いの) ~キー => `non_us_backslash`


# 補足

気づいたキーは全部対応させたと思ったのですが、よく考えたら日本語変換キーのマッピングしてなかった、、。日本語使うことがなかったので、、、。時間があれば、こちらも対応させたいと思います。

そのほか、キーのマッピングが違ってるところなどありましたら、コメントをいただければと思います。
Google G suite を使ったらMacのストレージがいっぱいになった話


Google G suite（File Stream）はMacのシステム容量を喰います。


解消するには、

1. タスクバーのドライブのファイルストリームのアイコンをクリック
2. サインアウトし、再度アイコンをクリックし、[終了]をクリック

以上でCacheがクリアされてストレージが空きます。
僕は250ギガくらい空きました。

ちなみにCacheフォルダの位置は以下
〜/Library/Application Support/Google/DriveFS


参考：[DriveFS seems to save a lot of data locally in the content_cache, how to reduce the amount that is locally stored?](https://productforums.google.com/forum/#!topic/apps/GSioJZxw9hQ)
仕事で思いついたLINQ小ネタ集

# 仕事で思いついたLINQ小ネタ集

## チェックエラーのメッセージをDictionaryから取り出す

Dictionary(Of String, Boolean)とした、msgResult(errorMsg, result) の、
result = False のメッセージを取り出したいとき、

```VB:GetFalseMessage
Private Function GetFalseMessage(ByRef msgResult As Dictionary(Of String, Boolean)) As IEnumerable(Of String)
	Return msgResult.Where(Function(d) Not d.Value).Select(Function(d) d.Key)
End Function

```

### 説明

- シンプルに。```Dictionary.Value```がBooleanであることを利用
- SQLなら```SELECT result From msgResult WHERE value = False```のイメージ


## Pythonでいうall(list)がやりたい

```VB:IsAllTrue
Public Function IsAllTrue(ByRef boolList As List(Of Boolean)) As Boolean
    Return boolList.All(Function(bl As Boolean) bl)
End Function

```

### 説明

- LINQにもAllがあるので利用。ただし、Pythonと違ってラムダ式が必要
- VB.Netでのラムダ式の書き方があまり好きではないです……
	- Listの中身がBooleanなので、型の確認は不要なんですが、書き換えたときの副作用が怖いので


## 番外編: LINQの条件の先出しをする

Tは任意の型・クラスに置き換えてください  

```VB:GetWhereCondition
Dim itemWhere As Func(Of T, Boolean) = (xを利用した条件)
Dim itemExist As New Predicate(T)(Function(x As T) (xを利用した条件))

```

### 説明

- フラグごとに処理を使い分けるものの、LINQでは共通の条件を複数個所に利用するときに有効
- 特に、LINQの条件が複雑だったり、長くなってしまった場合に切り分けると良いです
- Existsに使う時の引数の型が違うことに気づけず詰みかけました
- この考え方は、例えば文字列の```Regex.Match(value).Success```の条件の設定にも利用
お気楽docker + php開発環境（macOS）

新しいフレームワークが出たとかちょっと試したい時ってよくあります。
そんな時はローカルにdockerコンテナ立ち上げてすぐ試してすぐ消します。

## dockerコンテナ起動

### 環境整備

まずは~/work/testみたいなディレクトリを掘って実行

```
mkdir -p ~/work/test
cd ~/work/test
```

### 適当なPHPファイルを置いておく

```
echo "<?php phpinfo(); ?>" > ~/work/test/index.php
```

## phpサーバ立ち上げ

```
docker run -d -p 8080:80 --name test-php-server -v "$PWD":/var/www/html php:7.2.4-apache-stretch
```

http://127.0.0.1:8080/
にアクセスするとphpinfo()実行結果を確認できます。

## 環境削除

ちょっとしたテストが終わったらコンテナとイメージを削除

```
docker rm -f test-php-server
docker rmi php:7.2.4-apache-stretch
```
OpenPose環境構築の備忘録

OSはUbuntu16.04です。
OpenPoseの環境構築で個人的にハマったところを備忘録代わりにまとめてみます。

## 既存のCUDAのアンインストール

OpenPoseの要求するCUDAのバージョンと異なるバージョンのCUDAが入ってるとうまく動かないことがあるのでアンインストールする。

CUDAがインストールされているか確認。

```
$ nvcc --version
```

以下の表示だとCUDAはインストールされてない。

```
プログラム 'nvcc' はまだインストールされていません。 次のように入力することでインストールできます:
sudo apt install nvidia-cuda-toolkit
```

もし既にCUDAが入っている場合は、以下のコマンドでアンインストール用のスクリプトを実行。
（バージョンは適宜読み替え）

```
$ sudo /usr/local/cuda-9.1/bin/uninstall_cuda_9.1.pl
```

[参考](https://devtalk.nvidia.com/default/topic/903867)

## PythonとNumpyのインストール

必要らしいので事前にインストール。

### Python

Pythonのインストールは以下を参考にしました。
https://qiita.com/1000ch/items/93841f76ea52551b6a97

### Numpy

以下を実行

```
$ sudo apt-get install python-numpy
```

## インストール

あとは[公式](https://github.com/CMU-Perceptual-Computing-Lab/openpose/blob/master/doc/installation.md)に従って進める
スマホアプリでよく見る、ページ上部のメニュー


![Kobito.XBbgr7.png](https://qiita-image-store.s3.amazonaws.com/0/82372/14960629-f3fc-df93-ac30-5dd5cc77b0ba.png "Kobito.XBbgr7.png")

* twitterをはじめ多くのアプリに採用されているメニューです。
* 複雑なことをやるとAndroid等で不具合が出やすいので、フリック切り替えなどは諦めています。

## デモ
<a href="https://output.jsbin.com/qabubic" target="_blank">jsbin</a>

## html
```head
<!-- とりあえずさくっと動かして欲しいのでCDNでJQを読んでます -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><!-- bootstrapは無くても動きます -->
```

```html
  <div class="tab-menu-container">
    <nav class="tab-menu-header">
      <div class="select">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </nav><!-- .tab-menu-header -->
    <div class="tab-body">
      <div class="tab-container">
        いちばんのてきすといちばんのてきすといちばんのてきすといちばんのてきすといちばんのてきすといちばんのてきすと
      </div><!-- .tab-container -->
      <div class="tab-container tab-hide">
        にばんのテキストにばんのテキストにばんのテキストにばんのテキストにばんのテキストにばんのテキストにばんのテキスト
      </div><!-- .tab-container -->
      <div class="tab-container tab-hide">
        さんばんのテキストさんばんのテキストさんばんのテキストさんばんのテキストさんばんのテキストさんばんのテキスト
      </div><!-- .tab-container -->
      <div class="tab-container tab-hide">
        よんばんのテキストよんばんのテキストよんばんのテキストよんばんのテキストよんばんのテキストよんばんのテキストよんばんのテキスト
      </div><!-- .tab-container -->
    </div><!-- .tab-body -->
  </div><!-- .tab-menu-container -->

```


## css
```css

.tab-menu-header {
  display: -webkit-box;
  display: box;
  border-bottom: 1px solid #ccc;
}

.tab-menu-header>div {
  background: #fff;
  -webkit-box-flex: 1;
  box-flex: 1;
  width: 100%;
  text-align: center;
  padding: 0.5em 0 0.7em;
  position: relative;
  cursor: pointer;
  display:block;
  color:#ccc;
  font-weight:bold;
}

.tab-menu-header>div.select {
  background: #fff;
  color:#222;
}
.tab-menu-header>div:after {
  content:"";
  display: block;
  height: 0px;
  background: #f00;
  width: 100%;
  position: absolute;
  bottom: -1px;
}
.tab-menu-header>div.select:after {
  height: 3px;
  -webkit-transition-property:background-color,width,height;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0s;
}

.tab-body {
  background: #eee;
  padding: 15px;
}
.tab-body>div {
  background: #fff;
  padding: 15px;
}

.tab-hide {
  display: none;
}

```

## js
```js
$(function() {
	//クリックしたときのファンクションをまとめて指定
	$('.tab-menu-header > div').click(function() {

		//.index()を使いクリックされたタブが何番目かを調べ、
		//indexという変数に代入します。
		var index = $('.tab-menu-header > div').index(this);

		//コンテンツを一度すべて非表示にし、
		$('.tab-body > div').css('display','none');

		//クリックされたタブと同じ順番のコンテンツを表示します。
		$('.tab-body > div').eq(index).css('display','block');

		//一度タブについているクラスselectを消し、
		$('.tab-menu-header > div').removeClass('select');

		//クリックされたタブのみにクラスselectをつけます。
		$(this).addClass('select')
	});
});
```
Nexus 9の爆音フリーズ問題がバッテリ抜き差しで直った


## 爆音フリーズ問題とは

Nexus 9はGoogleが出していた9インチタブレットです。なかなかよいタブレットなのですが、一部個体は購入後1〜2年たつと動作が重くなり、バッテリ残量が減ると大音量のビープ音を鳴らしながらフリーズするようになる問題があります (報告[例1][1]/[例2][2]/[例3][3])。僕の持っている個体もバッテリが70%まで減ると下写真のように画面がグリッチして固まり、爆音を鳴らすようになってしまいました。

![nexus9-glitch-screen-400.jpg](https://qiita-image-store.s3.amazonaws.com/0/180497/00b29ec3-fed3-bc8f-2a6f-7dbbc8310ac1.jpeg "nexus9-glitch-screen-400.jpg")


バッテリの問題ぽいし、輸入して交換するかーと検索していたところ、[XDAのスレ][xda]で「バッテリを抜き差ししたら直った」という書き込みを見つけました。交換でなく抜き差しです。スレの続きには直ったという報告が複数。それでさっそく試したら、本当に直ったんです!!

- ハード: Nexus 9 WiFiモデル 16GB (OP82100)
- OS: LineageOS 14.1
- ブートローダアンロック済

## やりかた

[iFixitのバッテリ交換手順][ifixit]とほぼ同じです。特殊な工具は必要ありません。フタとバッテリ端子のカバーをあけるためにヘラ的なものがあるとよいです。僕はペーパーナイフを使いました。

![nexus9-cover1-400.jpg](https://qiita-image-store.s3.amazonaws.com/0/180497/7d1b0d00-46fa-39ed-b45a-dbb4801766f4.jpeg "nexus9-cover1-400.jpg")

内側にたくさんツメがあって開けにくいですが、ヘラで数カ所隙間を作ったら思い切ってこじ開けます。フタは柔らかいので、外すというより引きはがす感じです。WiFiモデルではバッテリがフタにのりづけされていて少し厄介でした。

![nexus9-cover2-400.jpg](https://qiita-image-store.s3.amazonaws.com/0/180497/7ec83ad4-892b-71df-e64b-cc50a309541d.jpeg "nexus9-cover2-400.jpg")

フタをとったら、タブレット上端側にあるバッテリの端子カバーを外します。この銀色のカバー、飛びやすいので気をつけてください。

![nexus9-battery-plug1-400.jpg](https://qiita-image-store.s3.amazonaws.com/0/180497/85f506d9-feb0-bd3d-8ea4-600e5ac171b4.jpeg "nexus9-battery-plug1-400.jpg")

あとは白い端子ブロックを外して、また戻し、銀色のカバーを取り付けます。この端子対はプラグとソケットでなく裸の端子を乗せるだけのものでした。下の写真では勘違いしてバッテリごと外してますが、端子だけの着脱は可能です。

![nexus9-battery-plug2-400.jpg](https://qiita-image-store.s3.amazonaws.com/0/180497/763ddd23-7c5b-2b5b-137a-c66b281b0708.jpeg "nexus9-battery-plug2-400.jpg")


あとはフタを戻して終わりです。バッテリを最後まで使いきれる。。。(一部の) Nexus 9ユーザにとっては感動的なことですよ!

![nexus9-1percent-400.jpg](https://qiita-image-store.s3.amazonaws.com/0/180497/a62bbfd2-ac48-0eb1-a9b9-f61422b2005e.jpeg "nexus9-1percent-400.jpg")


## おわりに

Nexus 9の爆音フリーズがバッテリを脱着するだけで起こらなくなりました。いまのところ5日間正常動作してます。

何が原因でどうして直ったのかは分かりません。バッテリの接続が端子置くだけだった点は怪しい気がします。タブレットを使っているうちに端子がズレて接触抵抗が増加、さらにバッテリの経年劣化も加わることで電圧が過剰に低下し、回路が誤動作していたのかもしれません。

ともかく、バッテリ脱着です。Nexus 9はサポート終了してますが、LineageOSを入れればまだまだ使えるいい子です。爆音フリーズ問題に悩まされているひとは試してみてください!

[1]: https://productforums.google.com/forum/#!msg/nexus/MP7ODWyR62Y/BUXc4XWwPAAJ
[2]: https://www.reddit.com/r/Nexus9/comments/56qrpz/why_is_this_happening_and_how_do_i_fix_it/
[3]: https://www.reddit.com/r/Nexus9/comments/3rzh1l/sudden_crash_with_very_loud_noise_what_happened/
[xda]: https://forum.xda-developers.com/nexus-9/help/nexus-9-crashing-white-screen-speakers-t3379513
[ifixit]: https://jp.ifixit.com/Guide/Nexus+9+Battery+Replacement/36560
Spreadsheet GAS 入門 

SpreadsheetのGAS入門として以下のものを作成いたしました。
実行は、図形のボタンから行うのがお勧めです。
[Spreadsheet GAS 入門 「マクロを図形に割り当てる」](https://qiita.com/yusk24/items/d1b5a403c90e73d8f01c)
ログの表示は、Macなら[Cmd] + [Enter]です
## 流れ
1. Spreadsheetのデータを取得
2. 実行速度をログに残す
3. データをメッセージボックスで表示
4. 表示したデータが合っているかどうかログに残す


## ソースコード

```javascript:sample.gs

function myFunction() {
  // 処理する時間を測り始める
  var time = time_start();
  // 今開いているシートを取得
  var sheet = SpreadsheetApp.getActiveSheet();
  // シート全体のデータを取得
  var data = sheet.getDataRange().getValue();
  
  // [A1(1,1)]から[B2(2,2)]のデータを取得
  var range_data = sheet.getRange(1,1,2,2).getValues();
  // 処理時間をログに残す
  time_end(time);
  // メッセージボックスにデータを表示させる
  msg(range_data);
  
}

// データの表示
function msg (data) {
  var test = Browser.msgBox("表示したいデータは\\n["+data+"]\\n合っていますか？", Browser.Buttons.YES_NO);
  // メッセージボックスのyes or noに応じたデータをログに残す。
  if(test) {
    if (test === 'yes') Logger.log('表示したデータは、合っていた。');
    else Logger.log('表示したデータは、間違っていた。');
    // エラーが起きた時の処理
  } else {
    Logger.log('error');
  }
}

// 時間を測り始める
function time_start() {
  return new Date();
}

// 時間の測定結果をログに残す
function time_end(time) {
  var end = new Date();
  var span_sec = (end - time)/1000;
  Logger.log("処理時間は " + span_sec + " 秒でした" );
}
```
Spreadsheet GAS 入門 「マクロを図形に割り当てる」

## 流れ

1.  図形の作成
2.  マクロを割り当てる

## 1. 図形を作成する
[挿入]->[図形描画]
<img width="499" alt="スクリーンショット 2018-04-14 19.11.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/205341/cd954d24-7679-d554-afd1-b04a8949a64b.png">
編集して[保存して閉じる]
<img width="718" alt="スクリーンショット 2018-04-14 19.12.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/205341/e9999a4c-594a-a47f-1e7f-1e0d4be5fd5f.png">
図形を確認
<img width="383" alt="スクリーンショット 2018-04-14 19.14.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/205341/0a3f8b52-175e-5c51-5a41-9785a0d08a62.png">

## 2. マクロを割り当てる
割り当てる関数(ファンクション)名を確認
[ツール]->[スクリプトエディタ]
<img width="634" alt="スクリーンショット 2018-04-14 19.21.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/205341/1e6ccab7-3f9b-557d-d8c0-5201b709dfd9.png">

function 「ここの部分」()
今回の場合[myFunction]が関数名です。
<img width="588" alt="スクリーンショット 2018-04-14 19.20.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/205341/182841d3-3728-971b-4aa1-38fdd9cf939a.png">

追加した図形にマクロを割り当てる
図形をクリックした後、図形のの右側の「...」をクリック
[スクリプトを割り当て]を選択
<img width="426" alt="スクリーンショット 2018-04-14 19.14.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/205341/cf7058cf-fb31-a708-653e-2ba291da1d2a.png">

今回の場合[myFunction]と書く
<img width="435" alt="スクリーンショット 2018-04-14 19.31.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/205341/269d6906-c990-bd8a-86ab-891bc1ea3686.png">

これでボタンを押すことで[myFunction()]が動き出します。
docker開発環境を整える（macOS）

macで開発するならdocker for macを入れます。

## [Homebrew](https://brew.sh/)

### brewコマンドインストール

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

```

### [Homebrew-Cask](https://caskroom.github.io/)インストール

```
brew tap caskroom/cask
```

## docker

### dockerインストール

```
brew cask install docker
```

### docker実行

```
open /Applications/Docker.app
```

## test

ちゃんと動くかnginxサーバをdockerhubからコンテナ起動

```
docker run --name local-nginx-server -d -p 8080:80 nginx
```

http://127.0.0.1:8080/
でアクセスして「Welcome to nginx!」って出たらひとまず環境整備完了。
nginxサーバのbashを実行したかったら

```
docker exec -it local-nginx-server bash
```

これでログインしたようにbashを使えます。

```
exit
```

でbashが終わって実質ログアウトです。
立ち上げたコンテナとイメージを消したかったら

```
docker rm -f local-nginx-server
docker rmi nginx
```
ServiceNowでTableを作成する

# 概要
ServiceNowで売上テーブルを作成する。日付、取引先、単価、数量、金額を項目として追加する。金額はBusiness Ruleで登録時に自動算出するため、Function Fieldの設定は行わない。

## 環境
ServiceNow:KINGSTONE

## Table追加
Studioの「Create Application File」で「Data Model」「Table」を選択し、Createをクリック。
Labelに「Sales」を入力して、一旦「Submit」をクリックして保存する。
Nameは自動生成される。スクリプトからこんテーブルを扱う場合はこのNameの値を使用することになる。
また、Tableを保存すると自動的に複数のColumnが自動生成される。
これらは、テーブルの共通項目として使用する。下記の種類がある。

|名称 |説明 |
|--- |--- |
|Created |作成日 |
|Created by |作成ユーザー |
|Updated|更新日 |
|Updated by|更新ユーザー |
|Udates |更新回数 |
|Sys ID| システムID|

## Column追加

ここから、業務で使用するColumnを追加する。
Columnを追加するには、「Tables Columns」のNewをクリックする。
![AddColumn.png](https://qiita-image-store.s3.amazonaws.com/0/197947/c878a231-89d9-aff2-0c28-086b758d4207.png)



今回は下記のColumnの追加を行う。

|Label |Name（自動生成)|Type |
|--- |--- |--- |
|Saledate | saledate| Date|
|CustomerName| customername| String(Full UTF-8)|
|UnitPrice| unitprice|Currency|
|Quantity| quantity|Integer|
|Price| price| Currency|



![SalesColumns.png](https://qiita-image-store.s3.amazonaws.com/0/197947/57d524b8-c2b4-2942-e38f-ecd53f2d6454.png)

入力が完了したら「Update」でテーブルを保存する。

## テーブルのレコードを表示する。

Table設定画面の中段位置位に、「Related Links」にいくつかのメニューが表示されている。この中から「Show List」をクリックする。


![TableRelatedLinks.png](https://qiita-image-store.s3.amazonaws.com/0/197947/23657df3-8afe-6baf-ded1-bae2bc4bb3a2.png)

Show Listをクリックすると、テーブルのレコード一覧画面が表示される。
![tablerecords.png](https://qiita-image-store.s3.amazonaws.com/0/197947/77cbdb53-6a77-8dd6-a78c-2df40013f098.png)

デフォルトの状態では共通項目のCreatedやCreated byは表示されていないが、ギアアイコンをクリックすることにより表示する列の選択が可能だ。

![selectcolumn.png](https://qiita-image-store.s3.amazonaws.com/0/197947/124fbffa-5aa6-9a64-016e-5eb1b882d83a.png)


CreatedとCreated byを追加してみた。

![addedcolumn.png](https://qiita-image-store.s3.amazonaws.com/0/197947/4615a991-0f6c-42fa-201e-1703c1a9210d.png)

## レコードを追加する。

レコードを追加するには、レコードの一覧画面のNewをクリックして入力する。

![salesnew.png](https://qiita-image-store.s3.amazonaws.com/0/197947/c0e2ad17-c3f3-edda-f9c9-9af29668112c.png)

Submitにより登録後、フォームの左上の戻るボタンで戻る。

![recordsaved.png](https://qiita-image-store.s3.amazonaws.com/0/197947/d4ca1142-22bc-0895-21e5-2630db2d35ca.png)

フォームに共通項目のCreatedなどは無かったが自動的に設定されていることが分かる。

以上でTableの作成は完了だ。
Djangoをpyenv+pyenv-virtualenv環境で動かすまで()

# Djangoを動かそう

時間がない人向けの記事です。
以下のコマンドを実行していけばいける。

以下のものはあらかじめインストールしておこう。

- pyenv
- pyenv-virtualenv

入っていない人は以下の記事でpythonを入れておこう。

[Ubuntuで主要言語達の最新Ver.をインストールする方法まとめ](https://qiita.com/terappy/items/a020ef793646c9fb83b0)

# コマンド

```sh:terminal
# python3.6.5をインストール
$ pyenv install 3.6.5

# 仮想環境を作る
$ pyenv virtualenv 3.6.5 hoge-env

# お好きな場所にプロジェクトファイルを作る
$ mkdir hoge-proj
# プロジェクトファイルに移動
$ cd hoge-proj

# プロジェクトの環境を先ほど作った仮想環境に設定
$ pyenv local hoge-env

# Djangoをインストール
$ pip install django

# Djangoでプロジェクトを作る

# 現在の作業ディレクトリにDjangoをインストールする
$ django-admin startproject hogesite .
# hoge-proj
# ├── manage.py
# └── hogesite
#     ├── __init__.py
#     ├── settings.py
#     ├── urls.py
#     └── wsgi.py

# -----------------------------------

# hogesiteディレクトリを作成し、そこにDjangoをインストールする場合
$ django-admin startproject hogesite
# hoge-proj
# └── hogesite
#     ├── manage.py
#     └── hogesite
#         ├── __init__.py
#         ├── settings.py
#         ├── urls.py
#         └── wsgi.py

$ cd hogesite

# -----------------------------------

# プログラムを起動
$ python manage.py runserver
```

# 起動確認

アプリ起動後以下のURLにアクセスする。
[localhost:8000](http://localhost:8000/)

![django-startapp.png](https://qiita-image-store.s3.amazonaws.com/0/225010/b9019db3-0347-0be7-e653-3d505ad7ea62.png)

この画面が表示されたらOK
git rebase --interactive で誰がauthorになるか問題

[wataash/git-test-squash](https://github.com/wataash/git-test-squash) の和訳です。

結論：Squashed commitsの最初のコミットのauthorになる。

[この](https://github.com/wataash/git-test-squash/commits/master) ように、コミットA・B・C・Dがあったとします。これらをコミットAにsquashすると、コミットAのauthorである Alan Adleman がsquashされたコミットのauthorになります。

`git rebase -i HEAD~4` [注1]:

```
pick 10d7eee commit A
pick 88e7a36 commit B
pick 5d54325 commit C
pick 6e374dc commit D
```

B・C・DをAにsquashしてやります：

```
pick 10d7eee commit A
fixup 88e7a36 commit B
fixup 5d54325 commit C
fixup 6e374dc commit D
```

結果は [こう](https://github.com/wataash/git-test-squash/commits/squash-into-a) なります。`git show squash-into-a`:

```
commit 8e61e787fed78bdab3abd47527f3c65d363f1ff0 (origin/squash-into-a, squash-into-a)
Author: Alan Adleman <alan@example.com>
Date:   Sat Apr 14 12:34:47 2018 +0900

    commit A
```

ここでは `squash` の代わりに `fixup` としましたが、結果に変わりありません。

ではDのauthorである Donald Dijkstra をauthorにしたい場合どうすれば良いでしょう？答えは簡単で、Dを最初のコミットにして、B・C・Dをsuquashするだけです：

```
pick 6e374dc commit D
fixup 10d7eee commit A
fixup 88e7a36 commit B
fixup 5d54325 commit C
```

結果は [こう](https://github.com/wataash/git-test-squash/commits/squash-into-d) なります。`git show squash-into-d`:

```
commit 6116c585cfba2a9599b5dc0a11aaf27d24bae7fe (origin/squash-into-d, squash-into-d)
Author: Donald Dijkstra <donald@example.com>
Date:   Sat Apr 14 12:55:11 2018 +0900

    commit D
```

並び替えの際にcommit Dが他のコミットとコンフリクトする場合は、並び替えせずにcommit Aにsquashした後、`git commit --author='Donald Dijkstra <donald@example.com>' --amend --no-edit` でauthorを書き換えれば良いでしょう。Authorのtypoが怖ければ `git commit --author=$(git log '--format=%an <%ae>' -1 6e374dc) --amend --no-edit` で。

注1： `~4` は「4つ親のコミット」を表します。[コミットログ](https://github.com/wataash/git-test-squash/commits/master) を見れば分かるように、commit Dの4つ親は init、[79e9533](https://github.com/wataash/git-test-squash/commit/79e9533f7bd27720e9f6ec9f58ec7569d933cc82) です。`HEAD~~~~` としても良いです。詳しくは [git-rev-parse(1)](https://git-scm.com/docs/git-rev-parse) を見て下さい。

## See also
- @pshiko - [他人のコミットをgit merge --squashするべきでないのではという話
](https://qiita.com/pshiko/items/1e9acd114b7e85884866)
- @wataash - [GitHubの3種類のマージを理解する
](https://qiita.com/wataash/items/ab7828a1bc452b665f94)
elementUIでダイアログのマスクがダイアログより上に来る

# 結論
el-dialog要素に:modal-append-to-body="false"属性を付与する

# 何が起こっているのか

elementUIのmodalでは通常body要素内にマスク用の要素を追加しています。
そのため階層が違うコンポーネント内でmodalを呼び出すとスタックコンテキストの影響によりmodalがマスクの後ろに行ってしまいます。
modal-append-to-bodyをfalseにすることでダイアログ要素の親要素にmodalを追加します

> 参考
> https://qiita.com/hoto17296/items/42e62989193504d512c7
> https://github.com/ElemeFE/element/issues/3770
sedでファイル内の行削除と対象行を事前確認

sedコマンドでファイルの内容を機械的に編集できます。
ただ、指定内容が間違っている恐れもあるため、ファイルの編集が想定通りに行われるかきちんと確認しないと危険です。

## 事前確認(Dry run)
```
sed -e "/消したい内容/d" ファイル名 | diff ファイル名 -
```
削除対象となった行をdiff形式で取得できます。
`sed -i` オプションをつけない限り、ファイルは直接編集されないので大丈夫です。(後述)
### 参照
* sed 行削除について
	* [sedコマンドの備忘録 - Qiita](https://qiita.com/takech9203/items/b96eff5773ce9d9cc9b3#%E8%A1%8C%E3%81%AE%E5%89%8A%E9%99%A4)
* diff 引数の `-` について
	* [git, cd, su, cat, diff, vim...-(ハイフン)でできること@コマンドライン - Qiita](https://qiita.com/ryosukes/items/b9a3b2913f72e1127e58#diff)
		* 標準出力を比較対象とする場合、 `-` が必要なようです。  
		(パイプで渡してるから不要だと思い少し悩んだ)


## 書き換え実行
```
sed -e "/消したい内容/d" ファイル名 -i
```
事前確認コマンドの `|` 以降を削除して `-i` に置き換えたのみ。

### 参照
* `sed -i` オプションについて
	* [sedでファイルを上書き保存](http://www.dab.hi-ho.ne.jp/sasa/biboroku/unix/sed-i.html)
	* `-i` オプションを指定することで、対象ファイルが上書きされる
	* つけない場合、標準出力への出力のみとなる(それで事前確認を実現できてる)

## あとがき
`sed -i` を `sed -i.bak` にすることで、`.bak` 拡張子をつけたバックアップを取得できます。
`diff　バックアップ 現ファイル`, `less 現ファイル`  で最終確認する手順とすることでより安全に作業出来るので、やっていきましょう。(自戒)
liboauthについて初心者なりに語る！！

#はじめに
今回、この記事を書かせて頂いたのは「C言語でTwitterできたらなぁ」と思って調べていたら**liboauth**なる言葉が出たので調べると以下のようにしか出てこず悪戯に疑問を増されるという。
まぁよくある事故があったので、ならば私がひとつのページにするっとまるっとお見通しという感じに書き纏めようと思ったからです。
>C実装。 libOauthはOAuth標準に従ってURLをエンコードし、HTTPリクエストのデータに署名する機能を提供します。

＊[liboauth参考ページ](https://ja.osdn.net/projects/sfnet_liboauth/)

＊注意事項
- 本記事はlibOauthの説明を行っている上記サイトの説明を初心者にも理解可能になるように翻訳したものです。
- ふざけてなどいません(絶対に)
- 執筆者は初心者なので間違っていたら教えてください。

#liboauthとは

**サーバー**と**クライアント**のやり取りである**HTTPリクエスト**を**C言語**を用いて行う際に必要な**OAuth**と呼ばれるシステムの実装を行うためのもの

#サーバーとは
**ネット**等に接続が可能な多大な容量を持つ装置のようなもの
遠方からネットを介して接続可能な巨大**ポケットWi-Fi**みたいなもの

##ネットとは
検索したり、動画見たりできるもの
基本はPCやタブレット、携帯(以下端末)などを用いて他社が運営する有料サービスを利用して接続が可能

##ポケットWi-Fiとは
上記のネットに接続する際に端末からの通信を衛生等へ直接に行うのでは無く、経過地点を設けることにより円滑なネット利用が行えるようにサポートするための物
設定が比較的に簡単なので通信対象端末を気軽に増やせる。

#クライアントとは
サーバーに接続する人
サーバー目線でのお客さんであるネット利用者

#HTTPリクエストとは

**サーバーとクライアントが行う通信手段**
＊[HTTP参考ページ様](https://qiita.com/Sekky0905/items/dff3d0da059d6f5bfabf)
**メッセージヘッダ**と**メッセージボディ**からなる。
送信の際には**URLエンコーディング**と呼ばれるものが必要。

##メッセージヘッダとは

HTTPリクエストの構造要素の一つ
**リクエストヘッダ**と**リクエストライン**からなる。

###リクエストヘッダとは
メッセージヘッダの二行目以降に書かれるリクエストの情報や属性が記された部分

###リクエストラインとは
メッセージヘッダの一行目に書かれる部分
- リクエストメソッド
- リクエストURL
- HTTPバージョン
以上の要素で構成される。

####リクエストメソッドとは
当HTTP通信のリクエスト手段(主に**GET**か**POST**かを問われる)

#####GETとPOSTとは
当HTTP通信での通信目的などによって使い分けるメソッド
######GET
サーバーからのデータ取得に用いる
######POST
サーバーへのデータ登録に用いる

####リクエストURLとは
当HTTP通信が目的としている情報や動作情報は含まれているサーバー内の対象のリソース

####HTTPバージョンとは
当HTTPのバージョン宣言

##メッセージボディとは
POSTなどでデータを送信する際に当該データを記載する箇所
記載データの記述法は用途によって異なるため本記事では割愛させて頂きます。
＊GETではメッセージボディは記載しません(恐らくは使用目的が要因)

##URLコーディングとは
HTTPリクエストで日本語等を送信する際に16進数を用いて表現する手法
パーセントコーディングともいう

#C言語とは
プログラミング言語の一つ
コンパイラ言語と呼ばれる物の一つで実行までにコンパイルと呼ばれる機械が判読可能な文体へとテキスト内容を翻訳する手順を要する。
他のプログラミング言語における基礎を含んでいる。

#OAuthとは
ユーザーがサービス利用のために一時的に情報をクライアントに渡す際に、その事項に対してのユーザー承認が必要になる。その承認を行うのはクライアント側なので利用時に認可サーバー等にユーザー認証を求めてもらうために実装が必要となる。





・・・以上でliboauthについての説明文の説明を終わります！！

起立！
気をつけ！！
礼ッ！！！
ありがとうございました！！！！
img blur wallpaper

### backgroundを使わない
```html
<div>yyy</div>
<img class="wallpaper" src="https://i.imgur.com/Ye7Rs6O.jpg"></img>
<div>xyz</div>
```
```css
img.wallpaper{
 position:fixed;
 object-fit:cover;
 object-position:center;
 width:110vw;height:110vh;
 filter: blur(15px);
 overflow:hidden;
 top:-15px;
 left:-15px;
 transform:scale(1.2);
 z-index:-100;
}
```
Elasticsearchに複数のアドレスをバインドする

# 目的

Elasticsearchがサービスを待ち受けるIPアドレスはelasticsearch.ymlのnetwork.hostというパラメータで指定しますが、デフォルトではlocalhostつまり127.0.0.1にバインドされています。外からアクセスするために任意のインターフェースのアドレスに変更できますが、そうすると今度はlocalhostでのアクセスが出来なくなります。複数のアドレスをバインドする方法が公式ガイドに書かれていなかったので、対応方法をメモします。

> https://www.elastic.co/guide/en/elasticsearch/reference/current/modules-network.html#network-interface-values

# 手順

IFのアドレス全部＋localhostでよいなら、これだけでいいです。簡単ですね。

```elasticsearch.yml
network.host: _local_,_site_
```

以上です。
GitHubの3種類のマージを理解する

[wataash/git-test-github-merge](https://github.com/wataash/git-test-github-merge) の和訳です。

GitHubではプルリクエストをマージする際、3種類のマージの仕方を選べます。

- Create a merge commit
- Squash merge
- Rebase and merge

<img src="https://user-images.githubusercontent.com/4846670/38764468-9a1e5196-3fea-11e8-8c5e-1ee0d43e59cf.png" width=50%>

この記事では、[`tig`](https://github.com/jonas/tig) コマンドでコミットグラフを見ながら、これらのマージの動作を直感的に説明したいと思います。


## プルリクエストとマージ先
![image](https://user-images.githubusercontent.com/4846670/38764610-68c90a52-3fed-11e8-9421-4cc8052cecb5.png)

こんな感じ。`pull-request` を `master` にマージします。`tig master pull-request` で描画しました。


## Create a merge commit
![image](https://user-images.githubusercontent.com/4846670/38764792-7f5d4eba-3ff0-11e8-96b4-a508c9ccbf7d.png)

皆さんご存知。

## Squash and merge
![image](https://user-images.githubusercontent.com/4846670/38764797-9ddcc122-3ff0-11e8-983e-b742a16a8c47.png)

1つのコミットにsquashされる。ここで、commit authorがマージした人 (wataash) になることに注意して下さい。
`git show --pretty=full squash-and-merge`:

```
commit decb2967fed0c8bf776055abdeeb70db5c4680e3 (origin/squash-and-merge, squash-and-merge)
Author: Wataru Ashihara <wataash@users.noreply.github.com>
Commit: GitHub <noreply@github.com>

    Try "Squash and merge" (#2)
    
    * commit C
    
    * commit D

diff --git a/c.txt b/c.txt
new file mode 100644
index 0000000..e69de29
diff --git a/d.txt b/d.txt
new file mode 100644
index 0000000..e69de29
```

元のauthorの "Donald Dijkstra \<donald@example.com\>", "Charles Codd \<charles@example.com\>" がマージした人の "Wataru Ashihara \<wataash@users.noreply.github.com>\" になってしまいました。コミッターは "GitHub <noreply@github.com>" になります。git的にはこの2人のcontributionsが無くなったように見え、["Insights"](https://github.com/wataash/git-test-github-merge/graphs/contributors) にも表示されなくなるのでオススメしません。[Squashする場合は `git rebase --interactive` を使いましょう。](https://qiita.com/wataash/items/f5425df7cb9d205d604b#_reference-b7c89a6c5f7867f8cf06)

## Rebase and merge
![image](https://user-images.githubusercontent.com/4846670/38764866-076337d8-3ff2-11e8-9787-3f631142f922.png)

`master` の先につきます。Authorの書き換えはありませんが、Committerは `GitHub Name <account@users.noreply.github.com>` になります。`git log --pretty=full -2 rebase-and-merge`:

```
commit 24c02be4250587e26ded87f84ba157414593f35f (origin/rebase-and-merge, rebase-and-merge)
Author: Donald Dijkstra <donald@example.com>
Commit: Wataru Ashihara <wataash@users.noreply.github.com>

    commit D

commit 6fa84589a2af5f3234d647a097046f4e7847c420
Author: Charles Codd <charles@example.com>
Commit: Wataru Ashihara <wataash@users.noreply.github.com>

    commit C
```
Apache Sparkでlog集計と集計結果のDB Insertを実施してみた

Sparkというものを最近になって触る機会があったのでちょっとお試しして見た。
大規模データをいろいろ編集できるらしいがその威力はいかに。。
最下部リンクにてlog集計をされているかたがサンプルあげてくれていたので、すこし編集させて頂き
Mysqlへデータを書き込みされるように作って見ました。

[github]
(https://github.com/hisahisa/apache-spark-csv-sample)

Sparkのバージョンが低かったので、最低限のバージョンまでアップした。

```scala:build.sbt

name := "spark_csv_sample"

version := "1.0.0"

scalaVersion := "2.11.2"

libraryDependencies ++= Seq(
  "org.apache.hadoop" % "hadoop-hdfs" % "2.6.0",
  "org.apache.spark" % "spark-core_2.11" % "1.6.0",
  "org.apache.spark" %% "spark-sql" % "2.2.0",
  "mysql" % "mysql-connector-java" % "5.1.46",
  "org.mortbay.jetty" % "jetty" % "6.1.26"
)
```

MysqlへのDB Insert

```scala:SparkCSVSample.scala

  private def writeDB(countData: RDD[Option[String]]): Unit = {

    // 環境変数使いたいけど一旦はこれで。。
    val url = "jdbc:mysql://localhost:3306/nano_planner_dev"
    val username = "root"
    val password = ""

    // パーティション単位で　Insert 〜 Closeされるのが正しいとどっかのブログに書いてったので、これでいいかなあ。
    countData.foreachPartition(iter => {
      using(getDbConnection(url,username,password)) { implicit conn =>
        iter.foreach {
          case Some(s) =>
            s.split(",") match {
              case  Array(lodDate, url, cnt) =>
                //洗い替えできるようにREPLACEを使いました
                val del = conn.prepareStatement ("REPLACE INTO logs (log_date, url, count) VALUES (?,?,?) ")
                del.setTimestamp(1,new Timestamp(new SimpleDateFormat("yyyy-MM-dd").parse(lodDate).getTime()))
                del.setString(2, url)
                del.setInt(3, cnt.toInt)
                del.executeUpdate
              case _ => //なんかエラーログが出るようにしたほうがいいだろうなあ
            }
          case None => //なんかエラーログが出るようにしたほうがいいだろうなあ
        }
      }
    })
  }

  def getDbConnection(url: String, username: String, password: String): Connection = {
    Class.forName("com.mysql.jdbc.Driver").newInstance()
    java.sql.DriverManager.getConnection(url,username,password)
  }

  // auto close されるようにローンパターンを適用
  def using[X <: {def close()}, A](resource : X)(f : X => A): A =
    try { f(resource)
    } finally { resource.close()}
```

```scala:ddl

CREATE TABLE `logs` (
  `log_date` datetime NOT NULL,
  `url` varchar(255) NOT NULL,
  `count` bigint(20) NOT NULL,
  PRIMARY KEY (`log_date`,`url`)
);
```


参考サイト：すみません。以下のサイトのプログラムをベースにさせてもらってます。Sparkのこと全然わかんなかったので大変たすかりました。
[Apache Spark を使ってアクセスログを解析して、その結果をCSVファイルに出力してみた。](https://qiita.com/uriborn/items/501aba49dc806996e74f)
GCP SpeechAPI入門 （備忘録）

GCP SpeechAPIを試した際の備忘を残す。
# 概要
最速でSpeechAPIを学ぶ動作確認する手順は以下の通り。
- Google Cloud初期インストール
- Cloud SDK設定
- Speech API設定

# Google Cloud初期インストール
とりあえずインストール。無料で可能。
現在では３００ドル分利用可能。上限超えても勝手に支払われないのはMSと違って良心的。
https://console.cloud.google.com

# CloudSDK設定
クラウド上のGCPへアクセス可能なSDKをローカルにインストール。
https://cloud.google.com/sdk/docs/quickstarts?hl=ja

上記に加えて以下の手順を実施。
①サービスアカウントキーファイルを作成する。
※XXX@developer.gserviceaccount.comはコンソールの「IAPの管理」から確認可能。
> gcloud iam service-accounts keys create \
>     ~/key.json \
>     --iam-account *XXXX@developer.gserviceaccount.com*

以下が出力されkey.jsonが保存される。
>created key [71f4a5fca826ac2b5783645d75b938315c32fc66] of type [json] as [/Users/akira/key.json] for [732321917940-compute@developer.gserviceaccount.com]

②①で出力したJsonファイルを指定して環境変数GOOGLE_APPLICATION_CREDENTIALSを設定する。
> export GOOGLE_APPLICATION_CREDENTIALS=/Users/akira/key.json

# Speech API設定
以下クイックスタート実施。
https://cloud.google.com/speech/docs/getting-started?hl=ja

確認できるはず。以上。
drupal 8 memo

本気のメモ

## HTMLテンプレート
* ベーステンプレート:html.html.twig
* 位置:core/modules/system/templates/html.html.twig
* APIドキュメント:https://api.drupal.org/api/drupal/core!modules!system!templates!html.html.twig/8

## ページテンプレート 
* ベーステンプレート:page--[front|internal|path].html.twig
* 位置:core/modules/system/templates/page.html.twig
* APIドキュメント:https://api.drupal.org/api/drupal/core!modules!system!templates!page.html.twig/8

## リージョンテンプレート
可能なリージョン名はテーマ.info.ymlファイルによって決まる
* ベーステンプレート:region--[region].html.twig
* 位置:core/modules/system/templates/region.html.twig
* APIドキュメント:https://api.drupal.org/api/drupal/core!modules!system!templates!region.html.twig/8

## ブロックテンプレート
moduleはモジュールの名前で管理画面上で言うシステム内部名称、deltaはモジュールによってブロックに割り当てられた内部ID

* ベーステンプレート:block--[module|-delta].html.twig
* 位置:core/modules/block/templates/block.html.twig
* APIドキュメント:https://api.drupal.org/api/drupal/core!modules!block!templates!block.html.twig/8

## ノードテンプレート
* ベーステンプレート:node--[type|nodeid]--[viewmode].html.twig
* 位置:core/modules/node/templates/block.html.twig
* APIドキュメント:https://api.drupal.org/api/drupal/core!modules!node!templates!node.html.twig/8

## タクソノミータームテンプレート
* ベーステンプレート:taxonomy-term--[vocablary-machine-name|tid].html.twig
* 位置:core/modules/taxonomy/templates/taxonomy-term.html.twig
* APIドキュメント:https://api.drupal.org/api/drupal/core!themes!stable!templates!content!taxonomy-term.html.twig/8

## フィールドテンプレート
* ベーステンプレート:field--[type|name[--content-type][content-type]].html.twig
* 位置:core/modules/system/templates/field.html.twig
* APIドキュメント:https://api.drupal.org/api/drupal/core!themes!stable!templates!field!field.html.twig/8
codemirror lint gutter iconの変更

### iconのサイズ及びカラーはhttps://icongr.am が便利。
```
https://icongr.am/clarity/error-standard.svg?size=16&color=ff0088
```
### default lint.cssの後に入れ、上書き。
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/addon/lint/lint.css">

<style>
/*lint setting*/
.CodeMirror-lint-tooltip {
  background-color: white;
  border: unset;
  border-radius: unset;
  color: #000;
}
.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
  background-image:url('https://icongr.am/clarity/error-standard.svg?size=16&color=ff0088');
}

.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
  /*unknown-status*/
  background-image:url('https://icongr.am/clarity/info-standard.svg?size=16&color=555555');  
}

.CodeMirror-lint-marker-multiple {
/*
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: right bottom;
  width: 100%; height: 100%;
*/
}
</style>
```
AWS CloudWatchカスタムメトリクスで死活監視を行う

#何がしたいか
・タスク実行の後処理に毎回実行させる事でタスクの監視が可能
・サーバは動いているが、バッチ処理が動いていないトラブルの回避

# やる事
1.AWSCliで定期的にAWSCloudWatchカスタムメトリクスを作成する。
2.１のメトリクスをCloudWatchで監視する。メトリクスが期待通り作成されていなかったらアラームメールを送信する。

# 手順

##1.EC2のIAMにポリシー追加
メトリクスを作成する(=監視する)EC2からCloudWatchへメトリクスを作成する事を許可する。

```json:policy.json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1495084468000",
            "Effect": "Allow",
            "Action": [
                "cloudwatch:PutMetricData"
            ],
            "Resource": [
                "*"
            ]
        }
    ]
}
```

##2.監視するEC2で以下のコマンドを定期的に実行させる

```
aws cloudwatch put-metric-data
--region ap-northeast-1 \
--metric-name kmstg_jobap_rundeck_healthy \
--namespace kmstg \
--value 0 --unit Count
```
CloudWatchメトリクスが定期的に作成される事で、
処理が動いている事がわかる。

##3.作成したメトリクスに対し、Cloudwatchアラートを設定
閾値: <=0 が１回
追加設定の欠陥データの処理方法を「不正」に設定
で一定時間メトリクスが作成されないとアラーム状態に変更されます。
あとはメール設定など行い完了

# 参考
https://gist.github.com/inokappa/2a220eb50793094e1c0a
GitリポジトリのURL毎に自動でコミット時のGithubアカウントを切り替える

正確に書くと、originのドメイン毎に`user.email`と`user.name`を切り替える、です。

僕の職場では、コードを社内に構築したGitHub Enterprise環境にpushしてて、こっちは社用のメールアドレスで登録しています。
一方で、個人的な開発をすることがある場合はGitHubを使うのですが、こっちは個人用のGmailアドレスです。

で、git configに個人用emailをグローバル設定してたりすると、うっかりGitHub Enterpriseのリポジトリにそっちでcommitしちゃったりしてしまうことがあるんですよね。
リポジトリ毎に `git config --local user.email hoge@fuga.com` とちゃんと設定すればいいんですが、大抵忘れてて後でrebase祭りになる……:innocent:

という具合でいろいろ面倒だったので、`pre-commit`で勝手に書き換えてくれるようにしてみました

### こうなった
githubから適当にリポジトリをpullしてきてcommitする

```terminal
$ git config --get user.email  # 元は会社アカウント(ここでの表示はダミーデータ)
ry023-yyyyyy@ry023-company.com
$ git config --get user.name
global_dummy

$ git commit --allow-empty -m dummy-commit # commitしようとするとrejectされ、設定が上書きされる
changed user.name to ry023
changed user.email to ry023-xxxxxxx@gmail.com
try again!

$ git config --get user.name # 設定が変わっていることを確認
ry023
$ git config --get user.email
ry023-xxxxxxx@gmail.com

$ git commit --allow-empty -m dummy-commit # もう一度やると、正しいアカウントでcommitされる
[master cd57d5b] dummy-commit
$ git show HEAD
commit cd57d5bd3bf8eb461d4532e9133a232a92aeab0b
Author: ry023 <ry023-xxxxxxx@gmail.com>
Date:   Sat Apr 14 16:29:35 2018 +0900

    dummy-commit
```


### 設定やら
gitのv2.9から、[`core.hooksPath`](https://git-scm.com/docs/githooks/2.9.0)というconfigからhookのpathを変更できるようになったらしいです。
以下のようにすると`~/.git/hooks`が全リポジトリの共通のhook置き場になります

```
$ mkdir -p ~/.git/hooks
$ git config --global core.hooksPath ~/.git/hooks/
```

`~/.git/hooks/pre-commit` というファイルを作って次のような感じのshell scriptを配置してやると終わりです！
頭の部分はよしなに変更してやってください
(実行権限が必要なので `chwon +x ~/.git/hooks/pre-commit`することも忘れずに)

```shell

#!/bin/sh

#### アカウント設定。ここに書くか、bash_profileやらzsh_profileやらに書いておく ####
GITHUB_DOMAIN="github.com"
GITHUB_NAME="ry023"
GITHUB_EMAIL="ry023-xxxxxxx@gmail.com"

GHE_DOMAIN="your-company-github.com"
GHE_NAME="ry023"
GHE_EMAIL="ry023-yyyyyy@ry023-company.com"
###################################################################

raw_url="$(git remote get-url origin)"
if echo "$raw_url" | grep https; then
  # for https
  remote_domain=$(echo $raw_url | sed -e 's/https:\/\///' | awk -F'/' '{print $1}')
else
  # for ssh
  remote_domain=$(echo $raw_url | sed -e 's/^.*@\(.*\)/\1/' | awk -F'/' '{print $1}' | awk -F':' '{print $1}')
fi

case "$remote_domain" in
  "$GITHUB_DOMAIN" )
    NAME=$GITHUB_NAME
    EMAIL=$GITHUB_EMAIL
    ;;
  "$GHE_DOMAIN" )
    NAME=$GHE_NAME
    EMAIL=$GHE_EMAIL
    ;;
  * )
    echo "unknown remote domain $remote_domain"
    exit 0
    ;;
esac

FAIL=false

if [ "$(git config --local --get user.name)" != $NAME ]; then
  git config --local user.name $NAME
  echo "changed user.name to $NAME"
  FAIL=true
fi

if [ "$(git config --local --get user.email)" != $EMAIL ]; then
  git config --local user.email $EMAIL
  echo "changed user.email to $EMAIL"
  FAIL=true
fi

if $FAIL;then
  echo "try again!"
  exit 1
fi
```

余談: 本当はアカウントの変更からcommit完了までpre-commit内で一括してやりたかったのですが、どうやらpre-commitでアカウント変更してもそのコミット自体は前のアカウントのままになるようです。もっといいやり方あるのかな？
WebJarsのすすめ

# WebJarsとは何か？
- JavaScript や CSS などのフロントサイドのライブラリの依存関係を、javaのライブラリと同様に、Maven(Gradle)で管理できるようになった仕組み。

# WebJarsの使い方

- mavenの設定

```xml:pom.xml
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.5</version>
</dependency>

```

- htmlでの設定

```html:html
<script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js" ></script>

```
zsh & preztoのインストール （macOS）

Macの新規環境を作る時にいつもハマるのでまとめ
preztoはzshの環境構築フレームワークです。

# [Homebrew](https://brew.sh/)インストール

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

とりあえずbrewコマンドを使えるようにHomebrewをインストール。

## zsh

### zshインストール

```
brew install zsh zsh-completions
```

### zsh起動

```
zsh
```

## [prezto](https://github.com/sorin-ionescu/prezto)

 preztoソースコードをclone

```
git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"
```

### preztoインストール

```
setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done
```

### 初期起動シェルをzshに

```
chsh -s /usr/local/bin/zsh
```

Command + N でターミナルを再起動して、新しいシェルが出たらインストール成功です。

### テーマ変更

初期テーマだと物足りないのでpowerlineって人気のテーマに変更

```
vi ~/.zpreztorc
```

zstyle ':prezto:module:prompt' theme 'sorin'
↓
zstyle ':prezto:module:prompt' theme 'powerline'

### フォント追加

[標準フォントではないフォント](https://github.com/powerline/fonts)を使っているので文字化けしないようフォントをインストール

```
# clone
git clone https://github.com/powerline/fonts.git --depth=1
# install
cd fonts
./install.sh
# clean-up a bit
cd ..
rm -rf fonts
```

終わったらターミナルの設定変更でPowerlineって接尾詞がついたフォントを選んでターミナルを立ち上げ直したら終わり。
【iOSアプリ】プロモコードでのテストをスムーズにする

#はじめに
かなり前ですが、iOSアプリのリリース前テストの際にプロモコード を使って
テストしていた時に[使わせていただいたスクリプト](https://github.com/nkmrh/icccig)がとても便利だったので (記事書くのが今更感満載で、もうみなさんも知っているとは思いますが笑) 紹介させていただきますm

※今更感がある代わりと言っては何ですが、
できる限り、**初めての方でもこれを読めば必ずゴールにたどり着ける**ように
詳細に書かせていただきます:bow:

#ゴール
**プロモコード のめんどくさい手入力 卒業！！**

iTunesConnectから発行したプロモコードを、
AppStoreの"コードを使う"にある**「カメラで読み取る」**で
認識できる画像に変換できること:muscle:

#環境
**MacOS X** 10.13.3 ( ※ちなみに、macのバージョンは、ターミナルで`sw_vers`と打つとすぐ確認できます)
**Xcode** 9.2
**homebrew** 1.6.0
**ImageMagick** 7.0.7-28
※当然、[iTunesConnect](https://itunesconnect.apple.com/)のアカウントを持っていてプロモコードを発行できる状態であることも必要  



* **homebrew**をまだインストールしてない場合  
macOS 用パッケージマネージャーである[homebrew](https://brew.sh/index_ja)に関しては、  
`/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`  
をターミナルで実行しインストールしてください。

※バージョンを確かめたい場合は、
`brew --version`



* **ImageMagick**をまだインストールしてない場合  
上記のhomebrewをもうインストールして入れば、こちらも簡単にインストールできます。
ターミナルで`brew install imagemagick`
すればOK!

※バージョンを確かめたい場合は、
`convert -version`


#本題
まず、[iTunesConnect](https://itunesconnect.apple.com/)でプロモコード （プロモーションコード）を発行します。

iTunesConnectを開いてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/134919/920aa947-fe6f-957b-0a8e-6fb52deffba4.png" width=50%>  

機能タブの所に行くと、左側の項目に「プロモーションコード」という項目があると思うので、
そちらを選択してください。

すると、そこの画面で発行数を入力するところがあるので、必要な個数を入れてください。
今回は、試しに10個発行します。  
<img src="https://qiita-image-store.s3.amazonaws.com/0/134919/e7bba562-bfc3-81ed-efac-912068093047.png" width=50%>

実際に発行したい数を入力すると、画面右上の「コードを生成」がアクティブになったと思います。

このボタンを押下し、発行します。
`promocodes.txt`というテキストファイルをダウンロードできるので、これを自分のPCに落としてください。（このファイルをあとで使うことになります）

次に、
[ココ](https://github.com/nkmrh/icccig)から、自分のPCのデスクトップなどにzipをダウンロードしてください。

ダウンロードできてzip解凍したら、そこには **icccig-master**というフォルダがあると思います。


そこに、先ほどダウンロードした`promocodes.txt`を入れてください。
入れると、中身は下記のような構成になると思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/4b8d361d-0f8e-117e-e80b-4beb456939ee.png)



ここまできたら、ターミナルを開いて、まず**icccig-master**フォルダの場所まで移動します。
今回はデスクトップに**icccig-master**フォルダを落としてきたので、

```
cd Desktop
cd icccig-master
```
と打って、そのフォルダまで移動してください。
(ダウンロードフォルダに入れた場合は、最初のコマンドは`cd Desktop`ではなく`cd Downloads`です)

（また、`cd icccig-master`の後に、`ls`と打てば、
README.md / icccig.sh / promocodes.txt（先ほど自分で入れたもの） / font / sample.jpg　があるのが確認できると思います）

移動できたら、早速プロモコードの画像化を行っていきます:muscle::muscle::muscle:


`./icccig.sh promocodes.txt` と打って、叩いてみてください！

すると、先ほどの**icccig-master**フォルダに、
**promocodes**というフォルダができていると思います。

これを開くと、中に先ほど発行したプロモコードが全て画像化されて格納されています！
これらの画像が、AppStoreの"コードを使う"にある「カメラで読み取る」で読みこめるんです:v:

これで、
コードをわざわざ手入力することなく、簡単にインストールできるようになりました！:tada::tada:

1人でいくつもテストする場合や、複数人にテストしてもらう時などに、
これを今後利用すれば、面倒な手入力が削減でき、効率もアップすると思います！

とてもオススメなので、自分が活用させていただいたように
皆さんも是非ご活用ください！！:blush:


#参考
http://techlife.cookpad.com/entry/2017/04/11/104616
VSS, RSS, PSS, USS についての説明

# メモリ調査
Androidアプリにおける性能測定の一環として、メモリ調査をすることがある。CPUの使用率だとパーセンテージでよくわかるんだけど、メモリ調査は指標が特殊なこともあって、ちょっととっつきにくい。

## 参考
まずは公式サイトを参照してみる。
[debugging-memory | Android Developer](https://developer.android.com/tools/debugging/debugging-memory.html)

日本語だとatmarkITが詳しい
[Android 4.4のメモリ使用状況を把握する3つのツールの使い方|atmark IT](http://www.atmarkit.co.jp/ait/articles/1403/06/news032.html)

ルートをとってやると、procrankなんかを使うこともある
[Android Memory Usage|elinux.org](http://elinux.org/Android_Memory_Usage)

## どれを使えばいいんだ..
一般的な調査だとMAT（Eclipseに付属のもの）なんかを使ってみたり、adbで見てみたりすると思う。でも、これがメモリ消費量だ！みたいなものが出てこない。だいたいのものがpssを出力してくれるんだけど、pssって一体何なんだってのがよくわからないまま進めるのは危険な気がしてくる。

# VSS RSS PSS USS の説明
そこで出たのがこの記事

[is-this-explanation-about-vss-rss-pss-uss-accurately | StackOverFlow](http://stackoverflow.com/questions/22372960/is-this-explanation-about-vss-rss-pss-uss-accurately)

PSSが何なのか、を知るためには結局他のRSSやUSSなどの算出方法を知っておく必要がある。件の記事では、それを非常にうまく説明してくれていた。

以下に訳をおいておく。

---

Androidのprocrankと呼ばれるツールがある。これはLinuxのプロセスのメモリ使用量を多いものから順に出力してくれる。メモリ使用量はVSS, RSS, PSS, USSの値をプロセス毎ごとに出力する。

ここでは簡単のために、Byteではなく、「ページ」という単位を使うことにする。LowレベルのLinuxのシステムでは4096Byteを単位とするページがよく用いられる。

VSS（psコマンドではVSZと表現される）はプロセスがアクセスできるアドレスの総和である。このサイズはプロセスがまだ使用していない領域もふくむ。例えばmallocされて割り当てられたものの、まだ書き込まれていないようなメモリだ。したがって、VSSはプロセスの実メモリの使用量としては、あまり使われることはない。

RSSはプロセスが実際に使用しているRAMの総メモリ量である。RSSは誤解を招くことがある。RSSはプロセスが使用しているものと、共有ライブラリが使用しているものを合計し算出するからだ。共有ライブラリは、それを使用するプロセス数とは関係なく、一度しか読み込まれないのにもかかわらず、だ。RSSはある単一のプロセスのメモリ使用量としては正しい表現とはいえないだろう。

PSSは共有ライブラリを適切なサイズに分割し算出する点がRSSと異なっている。例えば、3つのプロセスがある30ページのメモリをもつ共有ライブラリを用いている場合、各プロセスのPSSには、10ページの使用量として計算される。PSSはとても扱いやすい数値だ。システム中の全てのプロセスのPSSを足しあわせた場合、それは実際のシステム中のメモリ使用量に相当するからだ。あるプロセスをキルした場合、各PSSに当分して計算されている共有ライブラリは、依然としてライブラリを用いている他の残っているプロセスの等分に分配される。この場合、PSSはわずかに誤解をまねく。プロセスをキルした場合にシステムに戻るメモリ量としてはPSSは正しい指標ではなくなってしまうからだ。

USSはプロセスに完全に一意であるようなプライベートなメモリ使用量である。USSは動作中のプロセスが使っている真のコストを表しているため、かなり使いやすい数値である。プロセスがキルされた場合、USSで表されたメモリ量はシステムに還元される。そのため、USSはプロセスのメモリリークを疑った場合に最初に見る値としては最も使いやすい。

# 参考
本記事は僕の旧ブログからの転載です。
ブログ閉鎖に伴い、こちらに色々記事を移していく予定です。
ArduinoとRaspberryPiをUSBケーブルで接続してNode-REDで値を読み込む

##概要
RaspberryPiとArduinoをUSBケーブルで接続し、Arduinoから出力される値をNode-REDで確認するだけで、完全に自分用の備忘録です。

##前提条件

- Arduino UNO
- Raspberry Pi 2 Model B
- （Arduino IDE をインストールした）端末

##参考サイト

- [Raspberry PiとArduinoでシリアル通信](https://qiita.com/k_kinukawa/items/6eefb56c5c76863f7697)
- [Raspverry Pi にNode-RED をインストールする](https://qiita.com/HeRo/items/432e4d28055571f1acfb)
- [Node-RED入門](https://qiita.com/egplnt/items/222a3ae289472bb759b1)

##Arduinoの設定
Arduino と Arduino IDE をインストールした端末をUSBで接続して、Arduino IDEを起動し、以下のスケッチを書き込みます。

```:
int i ;
void setup() {
     Serial.begin(9600) ;
     i = 0 ;
}
void loop() {
     i++ ;
     Serial.println(i) ;
     delay(1000) ;
}
```

シリアルモニタを起動すると、1秒ごとに数値が出力されます。

```:シリアルモニタ
1
2
3
4
```

##Arduino と RaspberryPi の接続
次に Arduino と Raspberry Pi をUSBで接続します。以下、Raspberry Pi で操作します。

```Bash:
$ sudo apt-get update
$ sudo apt-get upgrade

$ sudo apt-get install cu # Arduinoと通信するためのcuコマンドをインストール

$ lsusb
Bus 001 Device 006: ID 2341:0043 Arduino SA Uno R3 (CDC ACM) # Arduinoが認識されていることを確認
$ dmesg
・・・
[  501.638776] cdc_acm 1-1.5:1.0: ttyACM0: USB ACM device # Arduinoが認識されていることを確認
・・・
```
準備ができたら接続。

```Bash:
$ cu -l /dev/ttyACM0 -s 9600
Connected.
1
2
3
4
~
[raspberrypi].
Disconnected.
```

シリアルモニタ同様に、1秒ごとに数値が出力されれば成功！！
~（チルダ）.（ピリオド）で終了。反応が悪かったらUSBを抜く（力技）。


##Node-REDのインストール
次にNode-REDをインストールします。
Node.jsがインストールされていることが前提です。

```Bash:Node.jsをインストールしていない場合
$ sudo apt-get update
$ sudo apt-get install -y nodejs npm
$ sudo npm cache clean
$ sudo npm install npm n -g
$ sudo n stable
```

```Bash:Node-REDのインストールと自動起動
$ sudo apt-get install nodered
$ update-nodejs-and-nodered

$ sudo systemctl enable nodered.service
$ sudo systemctl start nodered.service
$ sudo systemctl status nodered.service
```

##Node-REDで値を読み込む
端末から、http://(Raspberry PiのIPアドレス):1880へ接続すると、Node-REDのエディタが開くので、以下の操作を実施します。

- 入力から[serial]をフロー1にドラッグアンドドロップ。
+ [serial]をダブルクリックしてポートを/dev/ttyACM0、ポートレートを9600に設定して、[更新]、[完了]。
+ 出力から[debug]をフロー1にドラッグアンドドロップ。
+ [/dev/ttyACM0]と[msg.payload]を線で結ぶ。
+ デバッグタブに切り替えて、[デプロイ]。

![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/247920/cc5feb9f-065a-3427-98a4-427bafb45515.jpeg)


デバッグタブに、1秒ごとに数値が出力されれば成功です。

##まとめ
これだけでは何の役にも立ちません。ド素人のお勉強でした。

![DSCN5668.JPG](https://qiita-image-store.s3.amazonaws.com/0/247920/0191ef4c-54bc-a049-322f-605b8659474a.jpeg)