OmniAICreator/Qiita-1.07M huggingface dataset:
Chrome拡張 contents_scriptでローカルのフォント、画像を使う

Chrome拡張を作っているときに、ローカルのフォントデータをCSS読み込みしようとしたところでハマったのでメモ

私の中での理解であり内容に間違いがあるかもしれません。
間違いを見つけられた場合、やさしいコメント or 編集リクエストをいただけるとうれしいです。

# TL;DR

`chrome-extension://__MSG_@@extension_id__` を使えばいいよ！

```css
@font-face {
  font-family: "SampleFont";
  src: url("chrome-extension://__MSG_@@extension_id__/css/font/sample.ttf");
}

body {
  background-image: url('chrome-extension://__MSG_@@extension_id__/sample.png');
}
```

# なにが問題だったのか？

`contents_script`のcssでローカルに配置したリソース（フォントや画像）を読み込むにはフルパスで指定する必要があります。（これ気づくのに30分くらいかかった）
そして、フルパスには拡張機能のIDが含まれます。

IDはChromeに読み込むか、アプリ登録する事で発行されますが、開発版と公開版でIDは変わってしまいます。
- 開発版：　`chrome://extensions/` で拡張機能を読み込む
- 公開版：  [デベロッパーダッシュボード](https://chrome.google.com/webstore/developer/dashboard) （[新UI版](https://chrome.google.com/webstore/devconsole/)）に登録 

なので、発行されたIDを直接コードに埋め込むのは現実的ではありません。

# 解決方法

コードは[TL;DR](#tldr)を見てください。

JavaScriptにおける`chrome.extension.getURL()`にあたるものがcssでも使えれば解決するのはわかっていましたが、書き方がわからずに時間がとられてしまいました:sob:


Webをひたすら漁った結果、stackoverflowに記事を発見して無事解決することができました。
https://stackoverflow.com/questions/4535816/how-to-use-font-face-on-a-chrome-extension-in-a-content-script

リファレンスにもちゃんと書いてあったようです。上記の記事中に書いてあって気づきました。。
https://developer.chrome.com/extensions/i18n#overview-predefined

# 補足(manifest.json)

content_scriptが動いているWebサイトから 拡張機能内のリソースにアクセスするために、manifestファイルへの記述も必要です。
v3からは公開するサイトなどの明記も必要になりました。

https://developer.chrome.com/docs/extensions/mv3/manifest/web_accessible_resources/

```
"content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
...
    }
```

スクリプトが動くサイトがの指定が上記だった場合、v2, v3それぞれこんな感じです。

for Manifest v2

```
  "web_accessible_resources": [
    "css/font/*"
  ],
```


for Manifest v3

```
  "web_accessible_resources": [
    {
      "resources": [
        "css/font/*"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ],
```

# あとがき

検索ワードが思い浮かばず手当たり次第に調べたので、解決までにかなり時間がかかってしまいました。
私のような人が一人でも減れば幸いです。
Rails バリデーションで presence と format の両方を指定時にsimple_formでエラーメッセージを適切に表示する

## 概要
`simple_form`の`Bootstrap`版を使用している際、
エラーメッセージが該当入力欄のすぐ下に出てくるのは非常にユーザーがわかりやすくてい良い。

`presence` と `format` の両方を指定すると、
空欄の時に両方のエラーメッセージが表示され非常に見栄えが良くない。

`format` だけ指定すれば、未入力の場合もエラーが出るが、
適切なエラーメッセージにはならない。

そもそもそんな細かいところ気にしなくても良いかもしれないですが、
私と同じ神経質なあなた!

にはこの記事がお役に立てるかと思います。

## 方法
この方法は、`devise`のソースコードを参考にやってみたらうまく行ったというものですので、
方法としては問題ないかと思います。

仮に未入力禁止で全角文字しか入力をさせたくない`first_name`という入力欄をつくるとします。
その場合、一行で書いてしまうなら以下のようになるかと思います。

```
validates :first_name, presence: true, format: { with: /\A[ぁ-んァ-ン一-龥]+\z/i }
```

しかしこれだと未入力の時に、エラーメッセージが2つ表示されて非常に美しくない。

![Screen Shot 2018-09-06 at 17.57.14.png](https://qiita-image-store.s3.amazonaws.com/0/106866/0f5f1c78-9166-9636-2ad7-42de856c6959.png)

しかし、`devise`デフォルトのemail入力欄は、未入力の場合は入力されていないと表示され、
入力されて形式が間違っている場合は、形式が違うとエラーメッセージがきちんと出し分けられています。

そこで、`devise/validatable.rb`に記述されている`email`へのバリデーションを参考に調整してみた結果が以下です。

```
validates_presence_of :first_name
validates_format_of :first_name, with: /\A[ぁ-んァ-ン一-龥]+\z/i, allow_blank: true
```

これならエラーメッセージの出し分けが望み通りに行われています。

![Screen Shot 2018-09-06 at 17.59.43.png](https://qiita-image-store.s3.amazonaws.com/0/106866/5451216d-cbd7-a87a-60b7-2a41e03248b2.png)
![Screen Shot 2018-09-06 at 17.59.23.png](https://qiita-image-store.s3.amazonaws.com/0/106866/841c0cf9-c692-1623-c514-0303a69b172e.png)


## さいごに
もっと良い方法がございましたらぜひご教授お願いいたします。
sudoなしでpyenvでpythonビルド

#　環境
Ubuntu16.04

# pyenv
[pyenv]はいろいろなpythonのバージョンを切り分けられる便利なツール．公式にサポートされているvenvがライブラリの切り分けツールとしてはスタンダートなのだろうが，なんだかんだ言って任意のバージョンをとってこれたり，pyenv localなどが使えるのは結構便利で使っている．
pipenvもpythonの自動インストールにはpyenvを利用している．
しかしpyenvはpythonをビルドするので，ちゃんとビルドに必要なツールがそろっている必要がある．ここでsudoがないと公式チュートリアルに従えない．
具体的には

```
sudo apt-get install -y make build-essential libssl-dev zlib1g-dev libbz2-dev \
libreadline-dev libsqlite3-dev wget curl llvm libncurses5-dev libncursesw5-dev \
xz-utils tk-dev libffi-dev liblzma-dev
```

が[推奨](https://github.com/pyenv/pyenv/wiki/Common-build-problems)されているが，sudoがないとpyenvが自動的に見つけてくれるデフォルトの位置にライブラリを配置できない．

自分の場合

```
WARNING: The Python bz2 extension was not compiled. Missing the bzip2 lib?
WARNING: The Python readline extension was not compiled. Missing the GNU readline lib?
WARNING: The Python sqlite3 extension was not compiled. Missing the SQLite3 lib?
```
なるエラーが出てきてしまい．最初は無視していたが，jupyter notebookを使うときに，[sqlite3関連のエラー](https://qiita.com/chatrate/items/bc37e3b7b303e834dd1e)が出てきて困ってしまった．

# 解決策
https://github.com/pyenv/pyenv/issues/333
を参考に，ライブラリを書き込み権限がある場所において，パスを通してセットアップするようにした．
まずライブラリを以下のような手順で書き込み権限のあるところでビルドする．

```
apt-get source {package_name}
cd {package_folder}
./configure --prefix={インストール用のパス}
make
make install
```
自分は`libbz2-dev libreadline-dev libsqlite3-dev`の三つを入れたら大丈夫だった．
configureがない場合もあるので，その場合はMakefileのprefixを直接いじる．bzipはmakefileしかなかった．

以上のようにして必要なライブラリを好きな場所でビルドすれば以下のような手順でpythonをpyenvでビルドできるようになる．

```
PYTHON_CONFIGURE_OPTS="LDFLAGS=-L{インストール用のパス}/lib CFLAGS=-L{インストール用のパス}/include CPPF
LAGS=-L{インストール用のパス}/include" pyenv install 3.5.6
```

PYTHON_CONFIGURE_OPTSを適宜設定することで，コンパイラーに渡すオプションを変えることができるようだ．このようにしてやると，自前の環境にビルドしたライブラリもpyenvが見つけることができるようになるのだろう．

以上のような手順を踏むことで，sqlite3などが使えるpythonが使えるようになった．
Web Storage

##Web Storageとは
- JSで扱うデータを手軽に永続化させるためのインターフェース
- Key-Value型のシンプルなストレージ
- 通常のJSオブジェクトと同様の操作で読み書きが可能
- （Cookieと比べ）大容量のデータを保存可能。しかしインデックス作成やトランザクション処理は不可。

<br>
また注意点として

- 大凡の目安で、保存可能の上限は５M
- オリジンごとに共有のストレージが用意されるため注意。サービスが異なってもオリジンが同じであれば意味はない。



##sessionStorageとlocalStorage
* WebStorageの実態はグローバルオブジェクトに定義されたsessionStorageとlocalStorageという２つのオブジェクトである。
* これらは通常のオブジェクトと同じように、ページ遷移してもプロパティは保存される。


####sessionStorageとlocalStorageの違い


|                  | localStorage                                                 | sessionStorage                                               |
| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 共有される場合   | ブラウザやPCの再起動でも生存し続ける。 | 通常のページ遷移や、リロード、iframeの子ページ、クラッシュからの復元など。 |
| 共有されない場合 | 明示的に削除した場合                                         | 新規ウィンドウや、新規タブ。ウィンドウを閉じて新しく開き直した場合のみ。 |




##基本操作

* データの読み書き (**setItem,getItem**)
* データの削除 (**removeItem**)
* データの列挙 (**key,length**)
* storageイベントについて

####データの読み書き
```js:js
//読み書き
localStorage.setItem('key', 'foo');
let data = localStorage.getItem('key');

//JSと同様のアクセスが可能
localStorage.key = 'foo';
let data = localStorage.key;

//オブジェクトの読み書き
const obj = {x:1, y:2};

//オブジェクトをJSON文字列に変換して保存する
localStorage.key = JSON.stringify(obj);

//保存されたJSON文字列をオブジェクトに復元
const obj2 = JSON.parse(localStorage.key);
```

####データの削除
```js:js
//読み書き
localStorage.removeItem('key');

delete localStorage.key;
```

####データの列挙
```js:js
//保存されたデータを列挙
for (let i = 0; i < localStorage.length ; i++) {
  let key = localStorage.key(i);
  let value = localStorage[key];
  
  console.log(key, value);
}
```

####storageオブジェクトの利用
```js:js
window.addEventListener('storage', function(e) {
  if(event.key === 'userid') {
    const msg = 'こんにちは' + event.newValue; //更新後の値を取得するプロパティ
    document.getElementById('msg').textContent = msg;
  }
}, false);
```

##ネームスペースの管理
* ローカルストレージのでデータは明示的に削除しない限りリセットされないため、ローカル変数の感覚でセットしすぎると管理が困難になる。そのためネームスペースを利用しする。

```js:js
let SERVICE_NAME = 'SERVICE_NAME';
let storage = null;

window.onload = function() {
  try {
    storage = JSON.parse(localStorage[SERVICE_NAME] || {});
  }catch ( e ) {
    storage = {};
  }
};

//画面を閉じるときにstorageを保存
window.onbeforeunload = function() {
  localStorage[SERVICE_NAME] = JSON.stringify(storage);
}
```


##Cookieの利用

これまでブラウザにデータを保存する方法はCookieを利用していた。
しかし、Cookieには以下の問題点がある

* 容量制限が4KBと少ない
* サーバーへリクエストするたびにCookieが一緒に送られる
* セッション情報などの重要な情報が格納されている事が多い


###Cookieの利用法
* データのセット
* データの削除
* データの取得
* 有効期限を設定


```js:js
//セット
document.cookie = 'hello';

//削除
document.cookie = 'hello; max-age=0';

//取得
const data = document.cookie.split(';');
data.forEach(function(value) {
  console.log(value);
}) 

//有効期限
document.cookie = 'hello; max-age=180'; //3分

//GMTで有効期限を設定
const count = new Date();
document.cookie = 'hello; expires=' + (Date.now() + 3600000).toUTCString;
```
Bibtexで"[Online]. Available: "的な文が出ないようにしたい

bibtexを人におすすめしている割にはいろいろと問題を抱えている身です。

目下，電気学会やその他の学会のスタイルファイルの整備のため

- **日本語と英語の文献を矛盾なく制御できる手法**

を渇望しています。今回のは別件で，**調整版bstファイルを作成**したというお話。

# [Online] Available的なのが出るBSTスタイル
あんまり吟味していないですがよく使うbstファイルとして

- IEEEtran
- ieice2

bstファイルはTexを入れたフォルダのshareのどこかに入っているみたいですがネットで探した方が見つけやすいです。
以下のIEEEtranのbstファイルの中にあります。
http://www.math.md/files/download/csjm/2016/IEEEtran.bst



# bstファイルを編集
IEEEtranのbstを適当な名前で保存します。

開くと，L85-87にて（85-87行目の意味）

```
% #0 turns off the display of urls
% #1 enables
FUNCTION {default.is.use.url} { #1 }
```
という記述があるのでこれをL87の部分を#0に変更してしまいます。


# 別解：Biblatexを用いたスタイル編集
Biblatexを使えるなら簡単にこのような制御が実現可能なようです。

https://tex.stackexchange.com/questions/263355/omitting-unwanted-bibtex-information-from-bibliography

# 余談：urlをはみ出させない
urlを書くとはみ出すことがありますが，usepackageで[hyphen]を引数にするとこのはみ出しを結構キチンと補正してくれるみたいです。
http://myfuturesightforpast.blogspot.com/2013/12/breakable-url-with-long-hyphenation-word.html
【MATLAB】通信の勉強をする前の練習問題【問題編③SNRと雑音の生成】

#【第3章】SNRと雑音の生成
第1章、第2章で正規分布に従う乱数の生成と変調信号の生成ができるようになりました。通信のシミュレーションが実行できるようになるまであと少しです。
##(1) SNR[dB]を真値に変換する
通常、信号検出性能を評価する際には横軸に「SNR(Signal-to-Noise ratio)[dB]」など信号が雑音に対してどの程度大きいかを取り、縦軸に「BER(Bit Error Rate)」などを全体のうち何bitが結局誤ってしまったかを取ることが多いです。シミュレーションのために雑音を生成するときには、送信電力を大きくしたり小さくしたりするのではなく、送信電力を1と固定して、雑音の大きさをSNR[dB]によって変えます。そのために、まずはSNR[dB]を真値に変換する必要があります。
まずは、SNR[dB]=12[dB]を真値に直しましょう。
###ヒント
${\rm SNR}[{\rm dB}]=10\log_{10}\frac{1}{N_0} = 10\log_{10}(SNR[真値])$
これを変形しましょう。

##(2) SNR[真値]を元に生成するべき雑音の分散を求める
上の式をじっくり見ればわかるはずです。

##(3) 実数雑音を表す行列を生成する
2行$N$列の、雑音を表す実数の行列を生成しましょう。
第1章の知識と、本章問題(2)の結果を合わせて考えましょう。ちなみに、今回生成したいのはAWGN(加法性白色ガウス雑音)なので平均値は0です。
###ヒント
正規分布を生成するために必要なものは「標準偏差」でした。一方、問題(2)で求めているものは「分散」であることに注意してください。

##(4) 生成した実数雑音の分散を計算する
本章問題(3)で生成した実数雑音の分散を計算することにより、$N$が十分に大きいときその計算結果が$N_0$とほぼ一致することを確かめましょう。これも第1章の知識でできるはずです。

##(5) 複素雑音を表す行列を生成する
問題(4)では実数雑音を生成してもらいましたが、基本的には通信では複素信号を扱うことが多いので複素雑音が乗ると考えます。2行$N$列の、雑音を表す複素数の行列を生成しましょう。
###ヒント
・雑音は、実数方向と虚数方向で同じ分散のものがかかります。

##(6) 生成した複素雑音の分散を計算する
本章問題(5)で生成した複素雑音の分散を計算することにより、$N$が十分に大きいときその計算結果が$N_0$とほぼ一致することを確かめましょう。
###ヒント
・実数方向と複素方向の両方に標準偏差$\sqrt{N_0}$の雑音が乗ると、実は雑音が大きすぎになってしまうことに注意してください。

#解答
```matlab

% おまじない
clear all

% 送信ビット数
N = 10^6;

%問(1) SNR[dB]をSNR[真値]に変換する
SNRdB = 8;
SNR = 10^(SNRdB/10);

%問(2) 生成するべき雑音の分散を求める
No = 1/SNR;

%問(3) 実数雑音の行列を生成する
noise = sqrt(No) * randn(2,N);

%問(4) 雑音分散を計算する
disp(noise(1,:)*noise(1,:)'/N)

%問(5) 複素雑音の行列を生成する
noise_comp = sqrt(No/2) * randn(2,N) + 1j*sqrt(No/2) * randn(2,N);

%問(6) 雑音分散を計算する
disp(noise_comp(1,:)*noise_comp(1,:)'/N)
```
ENOSPC ってなんやねん!!

## 今日のエラー
`yarn`でsnapshotを更新しようとしたら、`ENOSPC`と表示された。
なんやねんこれ

## 解決法
https://github.com/facebook/create-react-app/issues/4301
を見てみると、解説があった。

ENOSPCは、ディスクに十分な容量がないことを示すらしい。
丁寧に解決法の乗っているissueのリンクもあるから、そこをみれば全部解決。

https://github.com/facebook/create-react-app/issues/4227
から実行するコマンドはコレ。

```
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
```

これで無事にできた!!
良かったよかった。

まぁ、ディスク容量はあるに限るし、
定期的にやっておいたほうが良さそう。
Qiitaのこの記事もオススメ
https://qiita.com/oshou/items/2630f9f1c1131beb748e

## コマンド解説
少々お待ちを
IISのサイト作成とWebDeployのアクセス許可の自動化

IISは設定をGUIでポチポチ設定できるのは難易度低くて利点ですが、同じ設定を繰り返し行う需要が出てくると面倒臭いです。こんな誰がやっても同じ作業で徒労感は辛いし無用にミスが生まれるし…。

そこでIISの設定を操作できるappcmdを利用し、PowerShellで一発で設定できるようにしましょう。
今回はサイト作成とWebDeployのアクセス許可を一括で行います。

手動での設定は[こちらの記事](https://qiita.com/sugasaki/items/914eb0f2fa4e9337614e)がわかりやすいです。この記事にある「Web 配置による発行の有効化」がアクセス許可の設定で、許可対象のサイトの作成とこれを自動で行うのがこの記事の主旨です。

# 前提条件
実際に試した環境はIISのバージョンは8。WebDeployはv3.5。
上記の記事と同じくwebdeployという名前の専用ユーザをIIS マネージャー ユーザーから作成しており、これを使用してWebDeployを行います。

# 基本戦略
* IISサイトの作成
    * アプリケーションプールを作成
    * サイトを作成
* webdeployユーザのアクセス許可
    * IISサイトのユーザ許可
    * サイトの物理パスへのフルコントロール付与

# コード
```powershell
# 設定
$sites = @(
    ("site1", "C:\site\site1"),
    ("site2", "C:\site\site2"),
    ("site3", "C:\site\site3")
)
$username = "webdeploy"
foreach($site in $sites) {
    $sitename = "$($site[0]).example.jp"
    $bind = "http://$($site[0]).example.jp:80"
    $dir = $site[1]

    # 物理パスのフォルダ作成
    New-Item $dir -itemType Directory -Force

    # サイト作成
    & "C:\Windows\System32\inetsrv\appcmd.exe" add apppool /name:"$sitename"
    & "C:\Windows\System32\inetsrv\appcmd.exe" add site /name:"$sitename" /bindings:"$bind" /physicalPath:"$dir"
    & "C:\Windows\System32\inetsrv\appcmd.exe" set app "$sitename/" /applicationPool:"$sitename"
    
    # IISサイトのユーザ許可
    [System.Reflection.Assembly]::LoadWithPartialName("Microsoft.Web.Management")
    [Microsoft.Web.Management.Server.ManagementAuthorization]::Grant($username, $sitename, $FALSE)
    
    # 物理パスのフォルダのアクセス許可
    $Acl = Get-Acl $dir
    $Ar = New-Object System.Security.AccessControl.FileSystemAccessRule @("LOCAL SERVICE", "FullControl", "ContainerInherit, ObjectInherit", "None", "Allow")
    $Acl.AddAccessRule($Ar)
    Set-ACL $dir -AclObject $Acl
}
```

# 細かい点
* add siteだけだとアプリケーションプールがデフォルトになる
  * 一応「サイトの追加」と動作を揃えるためにアプリケーションプールを別作成
* 「Web 配置による発行の有効化」は以下の二つをやっているのでそれを再現
  * IISサイトのwebdeployユーザのアクセス許可
  * 物理パスのフォルダのアクセス許可（フルコントロール）
* 物理パスは/（スラッシュ）で区切るとアクセスできない

# 参考
https://heavymetaldev.com/iis-web-deploy-permissions
こちらのコードをコピーして動かなかったのでそこを書き直してます。
複数VersionのElasticsearchを運営している時にlocal のkibana で適切に切り替える

# 目的

+ Elasticsearch のバージョンが以下の３つ存在する
    + 5.6.5
    + 6.2.3
    + 6.2.4
+ kibana はlocal PCから接続する

# やり方

```
$ brew install kibana@5.6
$ brew install kibana@6.2

```

# 使い方

```bash
$ brew switch kibana 5.6
$ brew switch kibana 6.2.3
$ brew switch kibana 6.2.4

```
【PHP】header関数でリダイレクト先URLに変数を使う方法

PHPのheader関数、リダイレクト先を変数にするときの書き方をよく忘れるのでメモ。

```php:location.php
// 変数にリダイレクト先URLを格納する（パラメータ付きURLにリダイレクトさせる想定）
$id = "abc";
$url = "http://hogehoge.com/?id=" . $id;

// これでhttp://hogehoge.com/?id=abcにリダイレクトされる。
header("Location:" . $url );

// exit()は忘れないように！
exit();
```
AWS Batch を CloudWatch Schedule Event で起動する方法

## CloudWatch Rule

```
aws events describe-rule --name hoge-batch-trigger
{
    "State": "ENABLED", 
    "ScheduleExpression": "cron(0 0 * * ? *)", 
    "Name": "hoge-batch-trigger", 
    "Arn": "arn:aws:events:X:Y:rule/hoge-batch-trigger"
}
```

## CloudWatch Event Target

```
aws events list-targets-by-rule --rule hoge-batch-trigger
{
    "Targets": [
        {
            "RoleArn": "arn:aws:iam::X:role/ROLE", 
            "BatchParameters": {
                "JobName": "JOBNAME", 
                "JobDefinition": "arn:aws:batch:X:Y:job-definition/JOBDEFINITION"
            }, 
            "Id": "IdX", 
            "Arn": "arn:aws:batch:X:Y:job-queue/hoge-batch-trigger", 
            "InputTransformer": {
                "InputTemplate": "{\n    \"Parameters\":{\n        \"hoge\": \"HOGE\",\n        \"fuge\": \"FUGE\",\n        \"time\": <time>,\n        \"region\": <region>\n    }\n}", 
                "InputPathsMap": {
                    "region": "$.region", 
                    "time": "$.time"
                }
            }
        }
    ]
}
```

### ポイント

InputPathsMap に ```$.time``` と書くと、InputTransformer で ```<time>``` として受け取れる。

## Schedule Event Example

```
{
  "account": "123456789012",
  "region": "ap-northeast-1",
  "detail": {},
  "detail-type": "Scheduled Event",
  "source": "aws.events",
  "time": "1970-01-01T00:00:00Z",
  "id": "cdc73f9d-aea9-11e3-9d5a-835b769c0d9c",
  "resources": [
    "arn:aws:events:ap-northeast-1:123456789012:rule/my-schedule"
  ]
}
```
【MATLAB】通信の勉強をする前の練習問題【問題編②変調】

更新履歴：2018/09/06:問題 作成

#【第2章】変調
ビットは必ず変調が施されてから通信路に乗って受信機側へ到達することになります。今回は代表的な変調方式であるBPSK変調とQPSK変調を行う練習をしましょう。第1章に引き続き、できるだけfor文は使わないように気を付けましょう。

##問題(1) BPSK変調
2行$N$列の[0,1]から構成されるビット列を「0」→「-1」，「1」→[1]としてBPSK変調することにより、[-1,1]から構成される2行$N$列のシンボル列を生成しましょう。
###ヒント
```matlab
A(A == 0) = -1;
```
これで「Aという行列のうち、0という要素をすべて-1に置き換える」という操作ができます。
。
##問題(2) QPSK変調
2行$N$列の[0,1]から構成されるビット列を「00」→「$e^{j\frac{\pi}{4}}$」，「01」→「$e^{j\frac{3\pi}{4}}$」，「11」→「$e^{j\frac{5\pi}{4}}$」，「10」→「$e^{j\frac{7\pi}{4}}$」としてQPSK変調することにより、[$e^{j\frac{\pi}{4}}$,$e^{j\frac{3\pi}{4}}$,$e^{j\frac{5\pi}{4}}$,$e^{j\frac{7\pi}{4}}$]から構成される2行$N/2$列のシンボル列を生成しましょう。
###ヒント
・まずはBPSK変調をしてみましょう。

```matlab
B = A(:,1:2:end) + 1j*A(:,2:2:end);
```
・BPSK変調したのち、上ような構文を使うとスマートにできるかもしれません。
#解答
```matlab
% おまじない
clear all

% 送信ビット数
N = 10^6;

% ビット列の生成
TX_bit = randi([0,1],2,N);

%問(1) BPSK変調
TX_BPSK = zeros(size(TX_bit));
TX_BPSK(TX_bit == 0) = -1;
TX_BPSK(TX_bit == 1) = 1;

%問(2) QPSK変調
TX_QPSK = (TX_BPSK(:,1:2:end) + 1j*TX_BPSK(:,2:2:end))/sqrt(2);
```
WSL/Ubuntu 18.04 における文字化け解消

#現象
WSLで動くUbuntu18.04で，日本語が文字化けする
#環境
Windows10 Pro
##解決法WSL上のUbuntu18.04の.bashrcに以下を書き込む
```".bashrc"
case $TERM in
    linux) LANG=C ;;
    *)     LANG=ja_JP.UTF-8;;
esac
```
Envoy externals and ideas @builderscon2018の資料と関連リンクと補足

builderscon 2018で"Envoy externals and ideas" というタイトルで登壇します(した)。
発表資料内でのリンクや、ちょっとした補足をまとめました。

# 発表資料
https://speakerdeck.com/seikoudoku2000/envoy-externals-and-ideas-builderscon-2018

# 関連リンク
- Envoy (Envoy proxy)、Istio とは？ (page 3)
https://qiita.com/seikoudoku2000/items/9d54f910d6f05cbd556d

- 迷ったら健全な方 (page 11)
https://www.publickey1.jp/blog/13/devopsdevops_day_tokyo_2013_2.html
生でプレゼンを見て凄く感動して、この記事も何度も読み返した覚えがあります。"いい感じ"というのを発表資料の1つのキーワードにしていましたが、実はここで書かれている"健全"という言葉でも置き換えられそう、、な位に影響を受けている。モヤっとした概念を、具体例とユーモアを交えながらとても上手く言語化されているのでオススメです。

- Cloud Trends by Adrian Cockraft (page 14)
動画: https://www.youtube.com/watch?v=EDZBYbEwhm8
資料: https://files.gotocon.com/uploads/slides/conference_5/185/original/GOTO%20Copenhagen%20Cloud%20Trends%20PDF.pdf
Netflixのシステムの移り変わり、また始まりつつある、serverless / function as a serviceへの流れを見事に解説してくれています。システム開発の歴史の教科書的に使えそう。

- Building Microservices (page 32)
https://www.amazon.co.jp/exec/obidos/ASIN/B00T3N7XB4/

- Production-Ready Microservices (page 32)
https://www.amazon.co.jp/dp/1491965975

- Building Fault Tolerant Microservices
動画: https://www.youtube.com/watch?v=pKO33eMwXRs
資料: https://www.jfokus.se/jfokus16/preso/Building-Fault-Tolerant-Microservices.pdf
Microservices、色んな概念が出てきて混乱しますが、１つ１つ順番に具体例を交えて説明してくれて分かりやすかったです。↓で日本語でもまとめました。

- "Building Fault Tolerant Microservices" というプレゼンがとても良かった話
https://qiita.com/seikoudoku2000/items/01450d9c413a0c487b8f

- "アイデアというのは複数の問題を一気に解決するものである" (page 48)
https://www.1101.com/iwata/2007-08-31.html

- service mesh data plane vs control plane (page 55)
https://blog.envoyproxy.io/service-mesh-data-plane-vs-control-plane-2774e720f7fc
service meshのことをあれこれググりながら、data plane, control planeってよく分からんな〜ってなってたら、見事にまとまっていました。↓で日本語に訳しています。

- service mesh data plane vs control planeの日本語訳 (page 55)
https://qiita.com/seikoudoku2000/items/d4c6b41337f03df0e005

- ChatWorkの新メッセージングシステムを支える技術 (page 73)
https://speakerdeck.com/j5ik2o/chatworkfalsexin-metusezingusisutemuwozhi-eruji-shu

- ChatWorkにおけるKubernetes on AWS (page 73)
https://speakerdeck.com/cwsakamoto/kubernetes-on-aws-at-chatwork
ChatWorkにおけるkubernetes運用の話がまとまった資料。kubernetes on AWS、あまり事例がない気がするので、検討されている際には一読をオススメ。

# 補足 / 感想など
終わったら書きます。多分。

_2018/9/10 追記_
感想は以下のブログに書きました。
http://seikoudoku2000.hatenablog.com/entry/builderscon2018
_2018/9/10 追記ここまで_
ESLint v5.5.0

前 [v5.4.0] | 次 [v5.6.0]

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">ESLint v5.5.0 has been released: <a href="https://t.co/S5KpNpHEtH">https://t.co/S5KpNpHEtH</a></p>&mdash; ESLint (@geteslint) <a href="https://twitter.com/geteslint/status/1035725463749054464?ref_src=twsrc%5Etfw">2018年9月1日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ESLint 5.5.0 がリリースされました。
エラーメッセージの改善等が行われました。機能追加はありません。

質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。

> 🏢 [日本語 Issue 管理リポジトリ](https://github.com/eslint/eslint-jp)
> 👫 [日本語サポート チャット](https://gitter.im/eslint/eslint-jp)
> 🏢 [本家リポジトリ](https://github.com/eslint/eslint)
> 👫 [本家サポート チャット](https://gitter.im/eslint/eslint)

<!--
# 🚀 本体への機能追加

特になし。

# 💡 新しいルール

特になし。

# 🔧 オプションが追加されたルール

特になし。

# ✒️ `eslint --fix` をサポートしたルール

特になし。

# ⚠️ 非推奨になったルール

特になし。
-->

[v5.4.0]: http://qiita.com/mysticatea/items/39364e1a26cb16103427
[v5.6.0]: http://qiita.com/mysticatea/items/e77f799fd7f456058429
[#9999]: https://github.com/eslint/eslint/issues/9999
[xxxx]: http://eslint.org/docs/rules/xxxx

<!-- 
![JSCS Icon](http://jscs.info/favicon.ico) JSCS 互換ルールです。
-->
【Ruby, Rails初心者向け】ハッシュ、配列を5分で理解しよう！

配列、ハッシュ、シンボルについて、
たまに書き方忘れたり、よくわからなくなることはありませんか？
簡単に復習しましょう！
　


あなたは、とあるRuby初学者で、小学校の先生です。
　

生徒たちのテストの点数を一覧にしてまとめやすくしたいなぁって
思ったとします。さて、どうしますか？　

　

```ruby:
score = [80, 76, 50, 40, 20]
```
<br>
とりあえず、配列にして、点数をまとめてみました。

しかし、これでは誰がどの点数をとったのか、さっぱりわかりませんよね。

そこで出てきたのが、ハッシュです！
<br>

```ruby:
scores = {"tanaka" => 80, "satou" => 76, "itou" => 50, "katou" => 40, "suzuki" => 20}
```
　

これなら、誰が何点かわかりますね！　
この {} を`ハッシュ`と言います。 
また、"tanaka"を【キー】、80を【値】と言います。
　

さらに上のハッシュは以下のように変形できます。
<br>

```ruby:
scores = {:tanaka => 80, :satou=> 76, :itou => 50, :katou => 40, :suzuki => 20}
```
<br>
"tanaka"　が :tanakaに変わりました。
この書き方を、`シンボル`って言います。


さらにさらに、この書き方は、もっと簡単になります。
<br>

```ruby:
scores = {tanaka: 80, satou: 76, itou: 50, katou: 40, suzuki: 20}
```
<br>
めちゃくちゃ簡単になりましたね！
ただし、取り出すときには要注意！
　

```ruby:
puts scores[tanaka]   #← × エラー！
puts scores[:tanaka]   #← ◯
```
 

<br>
<b>tanaka はシンボルだから、下のように書かなければいけません！　</b>
<br>

これで、だいぶまとめやすくなり、安心ですね。
では、１組の生徒と２組の生徒の点数を、分けて集計したい！っていう時は
どうしたら良いでしょうか？
<br>


```ruby:
scores = [
          {tanaka: 80, satou: 76, itou: 50, katou: 40, suzuki: 20},
          {iida: 67, ogawa: 89, kojima: 60, nagashima: 70, matsuda: 40}
         ]
```
<br>
ハッシュと配列の合わせ技を使えばOKですね。
こうすれば、１組(tanaka ~ suzuki)、2組(iida ~ matsuda)で、まとめられますね。値を取り出してみましょう。シンボルに注意ですよ！　
　



```ruby:
puts scores[0][tanaka]    ←　エラー！
puts scores[0][:tanaka]   ←  tanakaは、シンボル！
```
<br>
このように、`puts 配列[インデックス番号][キー] `
という書き方で、取り出すことができます。
　

では、楽しいプログラミングライフを〜
Pywin32 事始め

### インストール
```bash
$ python -m pip -V
pip 10.0.1 from C:\Users\[username]\AppData\Local\Programs\Python\Python37\lib\site-packages\pip (python 3.7)

$ python -m pip freeze

$ python -m pip list
Package    Version
---------- -------
pip        10.0.1
setuptools 39.0.1

$ pip install pywin32
Collecting pywin32
  Downloading https://files.pythonhosted.org/packages/f4/fb/ba9e519d90b63090005bcdee900d318d895d475c627dc1bc0f77b27abad0/pywin32-223-cp37-cp37m-win_amd64.whl (8.9MB)
    100% |████████████████████████████████| 8.9MB 4.5MB/s
Installing collected packages: pywin32
Successfully installed pywin32-223

$ pip list
Package    Version
---------- -------
pip        10.0.1
pywin32    223
setuptools 39.0.1

```
#### 参考

### 操作
サンプルコードを実行
<http://catech6ler.hatenadiary.jp/entry/2016/03/22/101932>

### 操作：ブラウザ(selenium)
```bash

$ pip install selenium
Collecting selenium
  Downloading https://files.pythonhosted.org/packages/b8/53/9cafbb616d20c7624ff31bcabd82e5cc9823206267664e68aa8acdde4629/selenium-3.14.0-py2.py3-none-any.whl (898kB)
    100% |████████████████████████████████| 901kB 6.8MB/s
Collecting urllib3 (from selenium)
  Downloading https://files.pythonhosted.org/packages/bd/c9/6fdd990019071a4a32a5e7cb78a1d92c53851ef4f56f62a3486e6a7d8ffb/urllib3-1.23-py2.py3-none-any.whl (133kB)
    100% |████████████████████████████████| 143kB 9.3MB/s
Installing collected packages: urllib3, selenium
Successfully installed selenium-3.14.0 urllib3-1.23
```

chromedriver.exeを以下のフォルダに格納

```
C:\Users\masaaki\AppData\Local\Programs\Python\Python37
```

プログラム

```python

$ vi test.py
# -*- coding: utf-8 -*-
# seleniumのwebdriverをインポート
from selenium import webdriver
# chromeを開く
chro = webdriver.Chrome()
# urlを指定する
chro.get("https://yahoo.co.jp/")
# chrome閉じる
chro.quit()

$ python ./test.py
```

#### 参考
<https://toolmania.info/post-9657/>
<https://sites.google.com/a/chromium.org/chromedriver/downloads>

### 操作：ブラウザ(webbrowser)
プログラム

```python

$ vi test.py
# -*- coding: utf-8 -*-

import webbrowser
webbrowser.open('https://tonari-it.com/')

$ python ./test.py
```
アニメーションGIFの作り方

アニメーションGIFを作りたいと思ったのでツールを探したらImageMagick という画像処理用ソフトウエアライブラリがありましたのでこれを利用してみます。

## インストール
http://www.imagemagick.org/script/download.php#windows

より必要なバイナリをダウンロードします。

2018.9.6時点での最新版は
mageMagick-7.0.8-11-Q16-x64-dll.exe
です。

## 実行コマンド
Windows版をインストールし、ImageMagickにパスを通している場合、アニメーション化したい画像(maxgogo_0.jpg～maxgogo_11.jpg)を保存しているディレクトリで以下のコマンドを実行します。

~~~
magick -delay 15 -loop 0 maxgogo_*.jpg maxgogo_movie.gif
~~~
ぐぐるとconvert というコマンドの記載を多数みつけましたが magick というコマンドに変更されたようです。
パラメータの意味は以下の通り。

-delay ： 画像の切り替わり時間（1/100秒単位）
-loop ： ループ回数（0は無限）
maxgogo_*.jpg ： アニメーション化する画像ファイル名は共通部分と変化する部分にわけて、変化する部分に * を入力する。
maxgogo_movie.gif ： 出力するアニメーションGIFファイル名。

## 入力画像
![maxlist.jpg](https://qiita-image-store.s3.amazonaws.com/0/255677/d414c470-aeba-bd81-a4a1-9fd15c0e5550.jpeg)



## 実行結果
このように、アニメーションGIFが作成できます。

![maxgogo_movie.gif](https://qiita-image-store.s3.amazonaws.com/0/255677/d0fea5ae-ff5d-f5ba-80e9-818692c43138.gif)

まーくん目が回る～:stuck_out_tongue_closed_eyes:
Mamp Proにpcntlをインストール設定方法

普段Mamp Proを使っているのだが、Laravel Horizonを使おうとした時にpcntlが入って無かったので、設定を行ったときのメモ。

1. 先ずは、pcntlのファイルが必要なので以下よりPHPのパッケージをダウンロードします。  
   http://www.php.net/releases/
2. ダウンロードしたら、展開してpcntlのextensionフォルダーへ移動します。  
```
tar -xzvf php-7.2.1.tar.gz  
```  
`
cd php-7.2.1/ext/pcntl  
`
3. pcntlフォルダー内から、使用しているPHPバージョンのphpizeのコマンドを流しますと、必要なファイルがコピーされます。  
`php -v` phpのバージョンを確認  
`/Applications/MAMP/bin/php/php7.2.1/bin/phpize`    
4. configureのコマンドを流して、最後に実行します。  
`./configure --prefix=/Applications/MAMP/bin/php/php7.2.1/bin/php`   
`make && make install`  
5. 最後にphp.iniファイルにextension=pcntl.soを入れて、mampを再起度して完了です。
`vi /Applications/MAMP/bin/php/php7.2.1/conf/php.ini`  

6. `php -m` を叩いてpcntlが入っていればOKです。
P言語レーザーポインター店 robots.txt/Sitemap.html設定方法

robots.txt設定方法：

User-agent:*

Disallow: /ファイル名/
Disallow: /ファイル名/

Sitemap: https://www.ドメイン名.com/sitemap.xml


Sitemap.html設定方法:
Google にウェブサイトを表示する ：
https://www.ledpointa.com/sitemap.html
KotlinでDataBindingを使う時の設定

kotlinを使用したプロジェクトを新規に作成する時によく忘れるのでメモです。

メモ時の開発環境
MacBook Pro 2017
macOS High Sierra 10.13.6
Android Studio 3.1.3

appディレクトリ直下のbuild.gradleに以下の2つを追加します。

```
apply plugin: 'kotlin-kapt' ←この1行をよく忘れる
```
Kotlinを使用しなければ上記は必要ありません。

```
dataBinding {
    enabled = true
}
```
Flutter環境構築 3日目 Androidエミュレータの設定

[こちら](https://www.gaprot.jp/pickup/flutter-01)を参考にFlutterを使ったAndroidアプリ開発の環境構築を進めてます。

普段はUnityを使って開発しており、UnityだとAndroidStudioを直接触ることがほとんどないため、エミュレータの設定もされておらず、詰まりました。

色々調べて見ると標準のエミュレータだと遅いので、```Intel x86 Atom System Image```をインストールして高速化させた方がいいようです。
[IntelliJ IDEAにAndroid App 開発環境を作成](https://qiita.com/sasayabaku/items/fc30fa131b23c2e30acb)

![スクリーンショット 2018-09-06 16.17.40.png](https://qiita-image-store.s3.amazonaws.com/0/237014/9c6074b2-80cc-8586-b654-61dd360656b5.png)

AndoroidStudioのSDK Managerを起動
SDK Platformsタブを選択
Show Package Detailsのトグルにチェック
必要なSDKバージョンのものをインストールします。
・Intel x86 Atom System Image
<img width="729" alt="スクリーンショット 2018-09-06 15.23.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/237014/213c9a52-4716-ea42-eb63-2c9e5288d5dc.png">
※画像では間違って```Google Play Intel x86 Atom System Image```を選択してしまい、後でやり直しました。間違えないように！

SDK ToolsでEmulator Acceleratorも最新版にしました。
・Intel x86 Emulator Accelerator (HAXM installer)
<img width="726" alt="スクリーンショット 2018-09-06 15.23.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/237014/4352759d-91c2-b7fb-9ee1-1058c18d2d04.png">

AndroidStudioを再起動

Virtual Deviceの設定を行うため、仮で新規プロジェクトを作成し、Virtual Device Managerを立ち上げます。スマホにバグマークが付いてるボタンです。
<img width="732" alt="スクリーンショット 2018-09-06 16.11.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/237014/8aae624f-a7c1-c0d1-42e4-27af1b4d2047.png">

左下にある```Create Virtual Device```ボタンを選択
<img width="1201" alt="スクリーンショット 2018-09-06 16.11.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/237014/ef8fddd3-66e0-0441-f225-281ba0561d7d.png">

この後は画面サイズとOSバージョンを選択してドーンとやればできます。

作成後、AndroidStudioを終了し（不要かも）、実際にFlutterアプリ開発を行うIntelliJ IDEAも再起動（不要かも）します。

プロジェクトを開き直して、右上にあるエミュレータを選択します。
<img width="850" alt="スクリーンショット 2018-09-06 16.30.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/237014/66e784b3-3718-df62-b7a2-918d2a725a5e.png">

できました。
<img width="989" alt="スクリーンショット 2018-09-06 16.31.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/237014/0bb6bc52-e04a-d435-6bc9-a335ae3ac411.png">
ラズパイ to VNCviewer

ラズパイ to VNCviewer

ラズパイゼロの画面をVNCviewerで閲覧したいのですが、自宅のwifiだとうまくいくのですが、ポケットwifiだとうまく接続できません。
調べたところによると、ポート開放が影響するようなのですが、具体的にどのような設定をすればよいかわかりません、、

ポケットwifiの設定で
LAN IPアドレス
LAN ポート
WAN IP アドレス
WANポート
プロトコル
ステータス

を設定する場所があります。こちら、どのように設定したらよろしいでしょうか？
ubuntuでのファイルサーバーのユーザー・パスワード設定

#初めに
このブログには授業で習ったことや自分で勉強したことをまとめて記事にしています
今回はファイルサーバーのユーザー・パスワードの設定をしてみました

#開発環境
・UbuntuMATE
・windows 10 64bit
※UbuntuMATEはVitualBoxで動かしています

#guest系には気をつけろ

![download.png](https://qiita-image-store.s3.amazonaws.com/0/249281/04de203f-9bcb-0b9e-6fe3-3e30b7a534d1.png)
このguest ~を
yesにしているとパスワードが問われません
まあ簡単に言うと誰でもはいれる状態です。
なのでguest okとguest onlyをnoにします

#OSのアカウントを作ってからsambaのアカウントを作ろう
useraddでまずOSのユーザーを登録をしないとsambaのアカウントは作れません
なので先にOSのアカウントを作成していきます

```
~$ sudo useradd ユーザー名 -p パスワード
```

これでとりあえずは準備は完了しましたので、sambaアカウントを作成していきます

```
~$ sudo pdbedit -a ユーザー名
new password:
retype new password:

```

new passwordでパスワードを入力します
そしてもう一度確認のためパスワードを入力します
![ii.png](https://qiita-image-store.s3.amazonaws.com/0/249281/ccd90589-c705-d262-88e0-1e77be6b5248.png)
そしてこの画面と同じような表示が出たら成功です。(ユーザー名等は隠しています)

これでとりあえず使えるようになりました。
権限の付与等はまた別の記事でまとめます。

#最後に
最後までお読みいただきありがとうございました！
SNSトピックへのhttpsエンドポイント登録

# 大まかな手順
|![image](https://qiita-image-store.s3.amazonaws.com/0/166473/b334649c-3a3c-6693-3b0d-4972a7da1978.png)|
|:-:|

↓

|![image](https://qiita-image-store.s3.amazonaws.com/0/166473/bb57d11c-9790-d5a0-6302-4be1dbae7e1d.png)|
|:-:|

↓

|![image](https://qiita-image-store.s3.amazonaws.com/0/166473/5a5e791c-fcf7-4e56-4eca-697eae49b4cc.png)|
|:-:|

↓

|![image](https://qiita-image-store.s3.amazonaws.com/0/166473/7e43979b-8dbb-1135-3733-cdd3dc2f5e70.png)|
|:-:|

↓

|![image](https://qiita-image-store.s3.amazonaws.com/0/166473/8b949d3c-facd-45e5-6418-d09fd608dfb9.png)|
|:-:|

↓

|![image](https://qiita-image-store.s3.amazonaws.com/0/166473/93937b05-d892-dd44-fb37-a2a950cdf42d.png)|
|:-:|


# サブスクリプション確認用コード
```php:endpoint.php
$body = file_get_contents('php://input');
$body = json_decode($body, true);	//JSONなのでデコード
$body = print_r($body, true);		//この中身をメール送信したりすればOK
```
BokehでFitzhug-Nagumo方程式をリアルタイムプロット

#BokehでFitzhug-Nagumo方程式をリアルタイムプロット
以下の二つの記事の合わせ技です
FitzHugh-Nagumo方程式をオイラー法で数値計算する
https://qiita.com/mozi/items/8c09d27bc373d65dfd33
bekeh+pythonでリアルタイムプロット
https://qiita.com/mozi/items/ec7e9e1181f1778a95a5

![bokeh_plot (2).png](https://qiita-image-store.s3.amazonaws.com/0/214036/e731c821-253d-de95-0a22-1865038793b7.png)


#コード全文
```python
# myplot.py
from bokeh.plotting import figure, curdoc
from bokeh.driving import linear
import numpy as np
import random
from numpy.random import rand

p = figure(plot_width=400, plot_height=400)
p.x_range.follow="end"
p.x_range.follow_interval = 40
p.x_range.range_padding=0

r1 = p.line([], [], color="firebrick", line_width=2)
r2 = p.line([], [], color="navy", line_width=2)

ds1 = r1.data_source
ds2 = r2.data_source

#initial condition
dt=0.01
a=0.2
b=0.5
c=1.0

@linear()
def update(step):
    X=0
    Y=0
    #即席なのでforで回してしまいました、、、
    for i in range(step):
        X += (c*(X-X**3-Y))*dt
        Y += (X-b*Y+a)*dt
    ds1.data['x'].append(X)
    ds1.data['y'].append(Y)
    ds2.data['x'].append(X)
    ds2.data['y'].append(Y)
    ds1.trigger('data', ds1.data, ds1.data)
    ds2.trigger('data', ds2.data, ds2.data)

curdoc().add_root(p)

# Add a periodic callback to be run every 500 milliseconds
curdoc().add_periodic_callback(update, 1)
```

# 課題
ここの部分

```python:
    X=0
    Y=0
    #即席なのでforで回してしまいました、、、
    for i in range(step):
        X += (c*(X-X**3-Y))*dt
        Y += (X-b*Y+a)*dt
```
callbackを利用してリアルタイムプロットしているので、後半は非常に計算量が大きくなってしまいます
forループではなく計算結果を格納した配列の値をプロットしていくほうがいいですね
basemapを使って自分用地図作成

## basemapインストール
https://matplotlib.org/basemap/
Anacondaを使っていれば下記。

```python
conda install -c anaconda basemap
```

これで、何かお試しでプログラム動かすと、

```
AttributeError: 'AxesSubplot' object has no attribute 'get_axis_bgcolor'
```
というエラーが出る可能性がある。このエラーが出た場合には、
/Users/anaconda3/lib/python3.6/site-packages/mpl_toolkits/basemap/__init__.py
の中のget_axis_bgcolorをget_fcに自分で直さないといけない。


## 地図作成
今回は、例として100名山および自分が踏破した山をプロットすることにする。

### インプットデータ
こういう感じのcsvファイル（100meizan.csv）を用意する。memoを1とすることで踏破、未踏破を分ける。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/114067/18830572-3acb-cd32-4c49-cf27441f7a93.png)


### プログラム

```py
from mpl_toolkits.basemap import Basemap
from mpl_toolkits.axes_grid1.inset_locator import zoomed_inset_axes
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd

# csvファイルの読み込み
df=pd.read_csv('100meizan.csv')

fig = plt.figure(figsize=(10,10))
ax = fig.add_subplot(111)
m = Basemap(projection='cyl',
            resolution='h',
            llcrnrlon=125,
            llcrnrlat=29,
            urcrnrlon=147,
            urcrnrlat=46)

m.drawcoastlines(color='lightgray')
m.drawcountries(color='lightgray')
m.drawmeridians(np.arange(125., 147., 2.), labels=[1, 0, 0, 1],
                dashes=[1, 1], linewidth=0.25, color='0.5')
m.drawparallels(np.arange(29, 46, 2), labels=[1, 0, 0, 1],
                dashes=[1, 1], linewidth=0.25, color='0.5')
m.fillcontinents(color='black')

for i in range(100):
    x,y=m(df.Lon[i],df.Lat[i])
    if df.memo[i]==0:
    #未踏破
        m.plot(x,y,'c^',markersize=df.Hight[i]/200.,mec='white',alpha=0.5)
    else:
    #踏破
        m.plot(x,y,'r^',markersize=df.Hight[i]/200.,mec='white',alpha=0.5)
        
# 長野あたりがごちゃごちゃしているので、拡大して別窓に表示
axins = zoomed_inset_axes(ax, 2.5, loc=2)
axins.set_xlim(137, 140)
axins.set_ylim(34,38)

plt.xticks(visible=False)
plt.yticks(visible=False)

map2 = Basemap(projection='cyl',resolution='h',llcrnrlon=137,llcrnrlat=34,urcrnrlon=140,urcrnrlat=38, ax=axins)
map2.drawcoastlines(color='lightgray')
map2.drawcountries()
for i in range(100):
    x,y=map2(df.Lon[i],df.Lat[i])
    if df.memo[i]==0:
        map2.plot(x,y,'y^',markersize=df.Hight[i]/200.,mec='white',alpha=0.5)
    else:
        map2.plot(x,y,'r^',markersize=df.Hight[i]/200.,mec='white',alpha=0.5)

plt.show()
```

### 結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/114067/0bdf604b-a1c1-0b29-4028-4bcae0840b67.png)
【MATLAB】通信の勉強をする前の練習問題【問題編①乱数の生成】

更新履歴：2018/9/6　問題(1),(2),(3),(4)作成

#【1章】乱数の生成
通信のシミュレーションで発生させる乱数のほとんどは「{0,1}の一様分布」か「平均0の正規分布」です。今回はそれらの乱数を生成することに焦点をあてて練習していきましょう。
ただし、<font color = "Deeppink">1章ではfor文を使うことは禁止とします。</font>MATLABはfor文で入れれば入れるほど実行速度は遅くなってしまいます。いまのうちからできるだけfor文を使わないように工夫する練習をしましょう。できる限り行列計算で済ませるのがスマートといえます。

##(1)正規分布に従う乱数の生成する
平均$\mu$、標準偏差$\sigma$にの正規分布に従う乱数を生成しましょう。ライセンスを使えば「normrnd($\mu,\sigma$,size)」という形式で一瞬でできるのですが、今回はrandn()という標準正規分布(=平均0、標準偏差1の正規分布)に従う乱数を生成する関数を使ってみましょう。
###ヒント
${\rm X}$が標準正規分布に従う乱数であるとすると、${a{\rm X} + b}$は平均$b$、標準偏差$a$の正規分布に従う乱数となります。
https://jp.mathworks.com/help/matlab/ref/randn.html?


##(2)生成した乱数のヒストグラムを表示する
問題(1)の方法で$N$個の乱数を生成し、そのヒストグラムを表示してたしかに乱数たちが正規分布に従っていることを確認しましょう。乱数の数を増やすと正確にその分布に近づくこと(大数の法則)も併せて確認しましょう。
###ヒント
https://jp.mathworks.com/help/matlab/ref/histogram.html


##(3)生成した乱数たちの分散を計算する
問題(1)で生成した乱数はうまくいっていれば分散$\sigma^2$になっているはずですが、それが果たして正しいかを「生成した乱数から」計算してみましょう。すなわち、問題(1)で生成した乱数の真の分散は未知であるとして、それを乱数列から逆に求めてみましょう。

##ヒント
${\rm V} = {\rm E}[{\rm X}^2] - ({\rm E}[{\rm X}])^2$



##(4)ビット列の生成
次はビット列を生成してみましょう。
ビットたちは、相互情報量を最大にするために0と1が1/2の確率で出るように、ランダムに発生するはずです。randi([a,b])関数を使えばa以上b以下の整数をランダムに生成することができます。これを使って2行$N$列のビット列を生成してみましょう。

#解答
```matlab
%おまじない
clear all

%問(1) 正規分布の生成
N = 10^5;
sigma = 2;
mu = 3;

value = randn(1,N);
value = sigma * value + mu;

%問(2) 生成した乱数のヒストグラム
histogram(value,100)

%問(3) 生成した乱数の分散
disp(value(1,:)*value(1,:)'/N - sum(value(1,:)/N)^2)

%問(4) ビット列の生成
TX_bit = randi([0,1],2,N);
```
これさえあればとりあえず開発できるであろうgitコマンドたち

# gitが何なのかはわかってる人向け
「sourcetreeとかは使ってるけどコマンドとかマジ無理」な人が
gitコマンドデビューするのによさげなコマンドたちです

# クローンする
```sh
$ git clone {HTTPS or SSH}
```

# ブランチ関連
### ブランチを作る
```sh
$ git branch new_branch
```

### ブランチの一覧を表示
```sh
$ git branch
```

### ブランチを切り替える
```sh
$ git checkout new_branch
```

# 差分を見る
### 変更したファイルの差分を見る
```sh
$ git diff
```

### 変更したファイルの一覧を見る
```sh
$ git diff --name-only
```

### ブランチ間の変更したファイル一覧
今いるブランチとmasterの差分

```sh
$ git diff --name-only master
```

new_branchとmasterの差分

```sh
$ git diff --name-only new_branch master
```

# 変更を反映する
### 変更したファイルをステージにあげる
一括で全部

```sh
$ git add .
```

任意のファイルのみ

```sh
$ git add index.php index_1.php
```

### ステージに上げたファイルをコミットする
```sh
$ git commit -m "commit message"
```

### コミットをプッシュする
```sh
$ git push
```

# コミットを取り消す
### ソフトリセット
```sh
$ git reset --soft head^
```

### ハードリセット
```sh
$ git reset --hard head^
```

たくさんリセットする場合は
headの後ろの`^`の数を増やすとその個数の分だけリセットしてくれる
5個リセットするなら

```sh
$ git reset --soft head^^^^^
```

# その他ちょっと便利なやる
ブランチを切り替えようとしてファイルの変更の重複などでエラーになった際によく使う

### 一旦差分を逃す
```sh
$ git stash
```

### 逃した差分を戻す
```sh
$ git pop
```
[Swift]iOS端末がHaptic Feedbackに対応しているかをチェックする

UIFeebackGeneratorは実行してもサポートしてない端末だと何も反応しないだけなので、特に端末のサポートを確認する必要はない。
だが、作ったアプリで設定画面からHaptic Feedbackをオン/オフできるようにした際に、混乱を避けるために非対応端末ではHaptic Feedbackの設定項目を非表示にしたかった。
Haptic Feedbackの対応状況なんて簡単に取得できると思ったのに、できなかったのでその方法をいくつかここに書く。

# プライベート変数を使う

UIDeviceにはAppleが一般の開発者が利用できるようにしてないだけで、Haptic Feedbackに対応しているかを格納している変数が存在します。

```swift
UIDevice.current.value(forKey: "_feedbackSupportLevel") as? Int ?? 0
```

で取得できます。
Haptic Feedbackをサポートしていない端末だと0
iPhone6/6+の第1世代Taptic Engineに対応している端末だと1
iPhone7/7+以降の第2世代Taptic Engineに対応している端末だと2
という感じで整数の値が返ってきます。

## 問題点
これは便利なのですが、プライベート変数を利用しているのでこれを使ったアプリをAppStoreで公開しようとするとリジェクトされる可能性があります。
自分が使うだけのアプリならいいですけど、公開しているアプリでの使用は避けた方がいいと思います。

## 参考
- [How to check if Haptic Engine (UIFeedbackGenerator) is supported - Stack Overflow](https://stackoverflow.com/questions/41444274/how-to-check-if-haptic-engine-uifeedbackgenerator-is-supported)

# 端末のモデル名から判別する

Taptic Engineを搭載している端末は現状そこまで多くはありません。モデル名から判別することは可能でしょう。

```swift
func supportHapticFeedback() -> Bool {
    // モデル名取得
    var systemInfo = utsname()
    uname(&systemInfo)
    
    let mirror = Mirror(reflecting: systemInfo.machine)
    var identifier = ""
    
    for child in mirror.children {
        if let value = child.value as? Int8, value != 0 {
             identifier += String(UnicodeScalar(UInt8(value)))
        }
    }
    // モデル名取得（ここまで）
    
    // iPhone以外は非対応
    if !identifier.hasPrefix("iPhone") {
        return false
    }
    
    // モデル名の数字の部分だけ取り出す
    let n = identifier.compactMap({ Int("\($0)") }).reduce(0, { $0 * 10 + $1 })
    
    // iPhone8,1(6s)以降で、iPhone8,3 or 8,4(SE)でなければtrue
    let list: Set<Int> = [83, 84]
    return n > 80 && !list.contains(n)
}
```

## 問題点

新しい端末に対応できないので、新型のiPhoneが出るとこのコードでは判別できなくなる可能性があります。
また、今後Taptic Engine未搭載の新型iPhoneが出た場合、条件分岐がどんどん複雑になって管理しきれなくなる可能性もあります。

## 参考
- [【Swift2】iOSの端末モデル名を取得する](https://qiita.com/koyopro/items/38dcbf8a8b4407e0a1e7)
- [iOS Devices | Enterprise iOS](http://www.enterpriseios.com/wiki/iOS_Devices)


# あとがき

ちなみに、3D Touch対応機器にはTaptic Engineが搭載されているので、3D Touchの対応状況で確認するというのも考えたのですが、3D Touchは設定のアクセシビリティでオン/オフできるので判断には向かないと思い除外しました。

Haptic Feedback対応をチェックする機会は少ないと思いますが、ご参考までに
SSHポート転送まとめ


##はじめに
いつも分からなくなるのでSSHポート転送について整理しておくことに。

##SSHポート転送とは
直接アクセスできないサーバー（DB等）に踏み台サーバー経由でアクセスする。
インターネットアクセスできないサーバーからPC経由でインターネットにアクセスする。
こんなことを可能にする技術でローカル転送とリモート転送がある。

##ローカル転送
###PC→ServerA→ServerB
ServerA：踏み台、PCからアクセス可能
ServerB：PCから直接アクセスできないけどServerAからアクセスできる

###コマンド
```
ssh <ServerA> -L <PCのポート>:<ServerB>:<ServerBのポート>
```
※PC（ローカル）のポートを転送するのでローカル転送と覚えました。

##リモート転送
###ServerA→PC→ServerB
ServerA：PCからアクセスできるがServerBへ直接アクセスできない。例えばイントラネットのサーバー。
ServerB：PCからアクセスできるサーバー。例えばyumリポジトリ等。

```
ssh <ServerA> -R <ServerAのポート>:<ServerB>:<ServerBのポート>
```
※サーバー（リモート）のポートを転送するのでリモート転送と覚えました。
※ローカルかリモートかは、Listenするポートがローカルにあるのかリモートにあるのかってことかな。
「ソースコードで体感するネットワークの仕組みの開発環境をDockerで構築する

[ソースコードで体感するネットワークの仕組み](http://gihyo.jp/book/2018/978-4-7741-9744-9)の開発環境を[Docker](https://www.docker.com/)を使って構築します。著者はVirtual Machine上CentOS7.0を使い開発していますが、個人的にVirtualBoxに苦手意識を持っているためDockerを用いて開発環境を構築しました。対象としている読者は以下のとおりです。

* Dockerに少しなれている
    * イメージ、コンテイナーなどの用語がわかる
    * 以下のコマンドが何をしているかがわかる
    * docker pull
    * docker run
    * docker ps
    * docker start
    * docker attach
* ソースコードで体感するネットワークの仕組みを勉強したいがVirtualBoxを使いたくない

**私自身、Dockerの勉強中です。もし用語や表現が間違えていたらコメントで指摘したいただければ幸いです。**

## 開発環境構築
**開発環境イメージをプル**
CentOS 7.0のイメージからコンテイナーを立ち上げ開発環境を整えるを考えていたのですが、デフォルトでは`gcc`や`make`が入ってないため、それらが入ったイメージを使います。

自分の勉強のために自分でDockerイメージを[作ってみました](https://hub.docker.com/r/koheiarai/taikan-tcp/)。`docker pull koheiarai/taikan-tcp`でプルできます。変更履歴は最後に乗せてあります。

**コンテイナーを立ち上げる**
プルしたイメージをもとに次のコマンドでコンテイナーを立ち上げます。`docker run -it --net host -v [プログラムへのディレクトリパス]:/mnt --name taikan-tcp koheiarai/taikan-tcp /bin/bash`

[プログラムへのディレクトリパス]は本のソースコードが入っているディレクトリへのパスに置き換えてください。上のコマンドを実行すれば、コンテイナー内部のbashへと切り替わります。`cd /mnt`をすれば本のソースコードが表示され、`make`と実行すればCentOS 7.0上でビルド・テストができます。

**コンテイナーを終了する**
コンテイナーを終了し、もとのターミナルに戻るには`exit`とコマンドを実行すればできます。

**終了したコンテイナーへまたアタッチする**
`docker start taikan-tcp`でコンテイナーを立ち上げ、`docker attach taikan-tcp`でコンテイナー内部の実行環境にアタッチします。ここで使われている`taikan-tcp`はイメージの名前ではなく、「コンテイナーを立ち上げる」のセクションで指定された`--name`オプションを指しています。違う値を渡した場合、その値にならないといけないため、お気をつけください。

## makeがうまくいかないとき
`make`が走るようになってもうまく通らない可能性があります。私は以下の2点でつまづきました。

#### その1
`Makefile:7: *** missing separator. Stop.`
`Makefile`の7行目でタブではなく、スペースを使ってるとこのエラーが起きます。

**解決策**
スペースではなく、タブに切り替えます。

#### その2
`make: *** No rule to make target 'cc', needed by 'MyEth'. Stop`
`Makefile`の最後の行が一行で行おうとすると、このエラーが発生します。

**解決策**
もとのコード通り改行して、タブを挿入しましょう。

## taikan-tcpイメージの変更履歴

09/19/2018: [63cbe97](https://github.com/1kohei1/docker/commit/63cbe97d2ffe8ca260ad0ada85717aee00347965) centos7をベースイメージとして使うと最新版の7.5になるため、7.0.1406に変更した。その際、必要なライブラリも増えたため、Dockerfileも編集した。
09/25/2018 [2e0e516](https://github.com/1kohei1/docker/commit/2e0e51664ab3bf60ba23be1160ef1fb112cdcee1) [30b9492](https://github.com/1kohei1/docker/commit/30b9492b5991d0c2821bcf34d6d1ca90d0abbecb) 自分用に`.vimrc`や`.gitconfig`を加えた。また、vimで自動で閉じ記号をいれてくれる[auto-pairs](https://github.com/jiangmiao/auto-pairs)もいれた。
Flutter環境構築 2日目 error:The IDE failed to install some plugins.

[こちら](https://www.gaprot.jp/pickup/flutter-01)を参考に環境構築を進めていきます。

エディタはIntelliJ IDEAを使うことにしました。
理由は日本語で検索するとIntelliJ IDEAを使ってるのがよく出てきたから。

Flutterのプラグインを入れてIntelliJ IDEAを再起動した所で、エラーが出ました。

```
The IDE failed to install some plugins.
Most probably, this happened because of a change in a serialization format.
Please try again, and if the problem persists, please report it to http://jb.gg/ide/critical-startup-errors
The cause: Source file missing: /Users/azuma/Library/Caches/IdeaIC2018.2/plugins/flutter-intellij.zip
```

エラーメッセージを検索するとこちらの記事を発見。
https://github.com/wso2/siddhi-plugin-idea/issues/4

質問者は```macOS High Sierra v10.13.1```で、自分は```macOS High Sierra v10.13.6```でした。ここらへんに原因があるのかもしれません。

回答を見ると```Siddhi```プラグインを先にインストールする必要があるようです。
![スクリーンショット 2018-09-06 15.00.00.png](https://qiita-image-store.s3.amazonaws.com/0/237014/46543950-a5bf-a7d3-f955-20df119d337e.png)

①Siddhiプラグインをインストール
②IntelliJ IDEAを再起動
③Flutterプラグイン（＋Dartプラグイン）をインストール
④IntelliJ IDEAを再起動

これで行けました。
ActiveRecordのfind_zone!の話

タイムスタンプの関係で

```.rb
Time.zone_default =  Time.find_zone! 'Tokyo'
ActiveRecord::Base.default_timezone = :local
```

を使ったのですがなぜか失敗

「エラーにはTimeクラスにfind_zone!メソッドがない」とかなんとか

とてもつらい......

小一時間ググると海外フォーラムに同様の事例を発見

どうやらActiveSupportのメソッドらしい

さっそく投稿者に倣いActiveSupportを宣言

```.rb
require "active_record"
require "pp"
require "active_support/all"

Time.zone_default =  Time.find_zone! 'Tokyo'
ActiveRecord::Base.default_timezone = :local
```

しっかり動いたので個人的には満足

でもActiveSupportのドキュメントが少なすぎてよくわからない様子

謎は深まるばかり
サーバ起動時に任意のスクリプトを実行する(dockerコンテナを起動する)

# 結論
`/etc/rc.local` に起動したいスクリプトを実行するように記述すれば任意のスクリプトを実行することができます。

```sh:/etc/rc.local
#!/bin/sh
#
# This script will be executed *after* all the other init scripts.
# You can put your own initialization stuff in here if you don't
# want to do the full Sys V style init stuff.

touch /var/lock/subsys/local
# 任意のコマンドを追加
sh /home/developer/sh/startup.sh
```

※この際に CentOS 7 などのsystemd系を使用しているOSであれば `/etc/rc.local` に実行権限が必要なようです。


# 背景
開発環境のコスト削減のため使用していないであろう深夜帯の時間は開発環境のサーバを stop するようになった。
その際に必要なサービスの自動起動の設定はしていたが、docker を使って開発しているため docker コンテナのほうの自動起動の設定はしていなかった。また docker の自動起動設定のオプションはあえて使用していない。理由としては、複数サービスを開発している際に現在開発していないものについては自動で起動する必要がないためである。また、docker コンテナは基本的に単体で使っておらず、docker-compose を使っているものとする。

# 準備
docker-compose のコマンドを直接実行するのは面倒なので、Makefile を書いている。具体的には `docker-compose.yml` がある階層と同じ階層に下記のようなファイルを設置している。

```:Makefile
.PHONY: up down

up:
	docker-compose up -d --build

down:
	docker-compose down
```

これを手動で直接実行する場合は

```
$ make up
-> docker-compose up -d --build が実行され docker コンテナが立ち上がる
$ make down
-> docker-compose down が実行され docker コンテナが停止する
```

自動起動設定に追加するためのスクリプトを用意する

```sh:/home/developer/sh/startup.sh
#!/bin/bash

PARENT_DIR=$(cd $(dirname $0);cd ..;pwd)
src=/home/developer/src

echo "$(date +"%Y/%m/%d %H:%M:%S") run startup.sh" >> ${PARENT_DIR}/run.log

# 起動しておきたいものだけ登録する (並列実行)
make -C ${src}/service1 up 1> /dev/null 2>> ${PARENT_DIR}/error.log &
make -C ${src}/service2 up 1> /dev/null 2>> ${PARENT_DIR}/error.log &
make -C ${src}/service3 up 1> /dev/null 2>> ${PARENT_DIR}/error.log &

# 並列実行を待ち合わせる
wait
echo "$(date +"%Y/%m/%d %H:%M:%S") complete startup.sh" >> ${PARENT_DIR}/run.log
```
これを任意の場所に設置しておく。これを手動で実行すればもちろん docker コンテナが立ち上がることを確認しておくとよい。

# 自動起動設定
linux には自動起動用の設定ファイルとして `/etc/rc.local` があり、ここに任意のコマンドを書き込んでおくことで起動時に実行させることが可能である。

```sh:/etc/rc.local
#!/bin/sh
#
# This script will be executed *after* all the other init scripts.
# You can put your own initialization stuff in here if you don't
# want to do the full Sys V style init stuff.

touch /var/lock/subsys/local
# 先ほど設置したスクリプトを実行
sh /home/developer/sh/startup.sh
```

ちなみに CentOS 7 からは init.d 系から systemd 系に変わったため動かないという記事があるようですが、実行権限を付与して書いておけばちゃんと動くようです。

```:/usr/lib/systemd/system/rc-local.service
#  This file is part of systemd.
#
#  systemd is free software; you can redistribute it and/or modify it
#  under the terms of the GNU Lesser General Public License as published by
#  the Free Software Foundation; either version 2.1 of the License, or
#  (at your option) any later version.

# This unit gets pulled automatically into multi-user.target by
# systemd-rc-local-generator if /etc/rc.d/rc.local is executable.
[Unit]
Description=/etc/rc.d/rc.local Compatibility
ConditionFileIsExecutable=/etc/rc.d/rc.local
After=network.target

[Service]
Type=forking
ExecStart=/etc/rc.d/rc.local start
TimeoutSec=0
RemainAfterExit=yes
```

ちゃんと systemd 側で起動時用の設定が書かれており、`/etc/rc.d/rc.local` においておけば使えるよ、正し実行可能でないといけないよという旨が書かれていました。

# 感想
自動起動の設定等調べたことがなかったので最悪crontabで何とかしようと思っていたのですが、調べてみると以外と手軽に使えて便利そうですね。