OmniAICreator/Qiita-1.07M huggingface dataset:
fullPage.js を使ってみた話

案件で [fullPage.js](https://alvarotrigo.com/fullPage/) を使用したので少し備忘録的に書いておく。

# fullPage.jsを使用してみて
1. `$(windo).scroll(~~` は反応しない
- `$.fn.fullpage.reBuild();`について
- オプションの `normalScrollElements` 
- ページ内スクロール時のスライドショーについて

## 1. `$(windo).scroll(~~` は反応しない
fullPage.jsは `translate3d` を使用して全画面ページの遷移をしているからそもそもスクロールしてない。
一応代替として「mousewheel event を bind しなよ」っていうのがあるっぽい。

## 2. `$.fn.fullpage.reBuild();`について
>Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.

>新しいウィンドウサイズまたはその内容に合わせてDOM構造を更新します。 特にscrollOverflow：trueを使用する場合は、AJAX呼び出しやサイトのDOM構造の外部変更と組み合わせて使用するのに適しています。

[公式ドキュメント](https://github.com/alvarotrigo/fullPage.js/#fullpagejs)引用（google翻訳）

って事らしいけど自分の実装環境では、reizeした後にreBuildしてもコンテンツがスクロールしなくなるっていう現象が多発したので、一旦現在のcurrentを変数に保存しておいて、destroyしてから再度実行するようにしてる。
※そもそもreBuildは要素の再構成のみ（？）って気もするので破棄して再実行の方が良さそう

## 3. オプションの `normalScrollElements`
>normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.

>normalScrollElements：（デフォルトはnull）いくつかの要素をスクロールするときに自動スクロールを避けたい場合は、これを使用する必要があります。 （マップ、スクロールdivなどに便利です。）これらの要素にはjQueryセレクターを含む文字列が必要です。 （例：normalScrollElements： '＃element1、.element2'）。 このオプションは、セクション/スライド要素自体には適用しないでください。

[公式ドキュメント](https://github.com/alvarotrigo/fullPage.js/#fullpagejs)引用（google翻訳）

自動スクロールしたくない要素を指定してね。って感じなんだけど、これ他のライブラリ（lightbox系）で追加される要素だったりを指定したりして、その要素が消えてもスクロールしなくなったままっていう現象が多発。
これが一番困った。

これについては「Callbacks」の「onLeave」部分に特定条件時は「return false」するようにした方が楽かもしんない。

```js
$('#fullpage').fullpage({
	~~~~~,
	onLeave: function(index, nextIndex, direction){
		if (特定条件) {
			// return false してスクロールさせない。
			return false;
		}
	}
});
```

## 4. ページ内スクロール時がある場合のスライドショーについて

ページ内スクロールがある時にスライドショーの横スワイプが効かなくなる現象が発生。
これについても、ある特定条件下じゃないと発生しないっぽい。

- scrollOverflow が true
- scrollOverflowOptions を設定している
- ページ内スクロールが発生している
- スワイプの機能があるスライショーを使用している（自環境ではslick）

上記の条件時にスワイプしてもスライドショーが無反応になった。
「iScroll.js」の方をまだそこまで調べてないけど、ページ内スクロールさせなければ問題ない。

とりあえず、今の所このくらい。
Linux ファイルの文字コード確認・変換

文字コード、改行コード変換する際、
毎回忘れてしまうので備忘録としてまとめてみました

# 【文字コード確認方法】
`nkf --guess　ファイル名`
`file -i　ファイル名`

# 【文字コード変換】
### １．vi/vimの場合
`:set fileencoding=文字コード`
`:set fenc=文字コード`

### ２．コマンドの場合 iconv/nkf 
* **iconv**
    * フォーマット：`iconv -f ファイルの文字コード -t 変換させる文字コード 対象ファイル`
    * サンプル： `iconv -f SHIFT_JIS -t UTF-8 shift_jis.csv > utf-8.csv`

* **nkf**
    * フォーマット： `nkf 変換させる文字コード shift_jis.csv`
    * サンプル： `nkf -w shift_jis.csv > utf-8.csv`
        * -w(utf-8), -s(shift_jis), --overwrite(上書きoption)


# 【ログをutf-8で閲覧】
`tail -f sample.log | nkf -u -w`

# 【一括置換】
* **拡張子がtxtのすべてのファイルをUTF-8に一括変換する**
* `find . -name '*.txt' -type f -print0 | xargs -0 nkf -u --overwrite -w`
* ※作業前にはバックアップを。。！
お名前.comでドメインを取得し、AWSのEC2インスタンスにSSL証明書を導入する方法

#目的
AWSのEC2のインスタンスでウェブアプリ を個人開発していたのですが、SSLを取得しようと思った時に詰まったので要点だけまとめました。

#注意点
DNSのネームサーバの変更に最大72時間かかりますので、2番までは早めにやった方が良いかと思います。
うまく言っていない場合、ロードバランサが機能しているかの確認方法として、
1. パブリックDNSベタ打ちで閲覧可能かどうか
2. ロードバランサのヘルスチェックができているかどうかを確認
3. 2の結果が
・ できている場合
Route53でAレコードの確認をしてみてください。これが間違っていると上手くいきません。
・できていない場合
ヘルスチェックのpingのuriを確認してください。デフォルトでは/index.htmlになっています。このuriが存在しなければ他のuriで設定してください。
4. これでも上手くいかなければロードバランサを削除して作り直すといいと思います。

#環境
・お名前.comにてドメイン取得済
・EC2インスタンス使用
・Amazon Certificate Manager(ACM)使用
・EC2のロードバランサ使用
・Route53使用
・サーバにNginxを使用


#流れ
####1. Route53でHosted Zoneの作成
####2. お名前.comでネームサーバの変更
####3. Amazon Certificate Managerで証明書取得（DNS）
####4. 証明書のCNAMEレコードをRoute53に追加
####5. 証明書が取得できたらロードバランサでEC2インスタンスと紐付け
####6. Route53にロードバランサを追加
####7. Nginxでhttp→httpsのリダイレクト

#作業
##1. Route53でHosted Zoneの作成
AWSのRoute53にて、お名前.comで取得したドメイン名でHosted Zoneを作成します。
ここで取得したネームサーバの情報を3で使用します。

##2. お名前.comでネームサーバの変更
お名前.com naviにて、ネームサーバを変更します。
左側のタブのネームサーバ を変更から、対象のドメインを選択肢、1で取得したネームサーバのアドレスを4つ入力します。
反映まで最大72時間かかります。

##3. Amazon Certificate Managerで証明書取得（DNSで認証）
お名前.comで取得したドメインの証明書をACMで取得します。
認証方法はメールとDNSの二種類がありますが、WHOIS代行を利用しているためDNSを利用します。
ここで表示されるDNS情報を4で使用します。


##4. 証明書のCNAMEレコードをRoute53に追加
ACMで表示されたCNAMEの情報をRoute53に追加します。

##5. 証明書が取得できたらロードバランサでEC2インスタンスと紐付け
4を完了してから数分〜15分程度で証明書の発行が完了するかと思います。
EC2の左側のタブの下の方にあるロードバランサを使用します。
注意点としては、ヘルスチェックのデフォルトのPingターゲットが/index.htmlになっているかと思いますが、ルートディレクトリが/の場合は変更しましょう。
##6. Route53にロードバランサを追加
最後にRoute53のAレコードにロードバランサを追加します。
Aレコードのエイリアスをyesにして先ほど作成したロードバランサ を選択します。
##7. Nginxでhttp→httpsのリダイレクト
http://ドメイン名
にアクセスしたときに
https://ドメイン名
にリダイレクトされるようにNginxの設定を書き換えます。（https://aws.amazon.com/jp/premiumsupport/knowledge-center/redirect-http-https-elb/ を参考）
参考リンクではhttpの識別が

```
if ($http_x_forwarded_proto = 'http')
```
となっていますが、

```
if ($http_x_forwarded_proto = http)
```
にしたら動きました。
環境によって違うのか、Amazonが誤った表記をしているのかはわかりませんがもしうまくいかなかったらためしてみてください。
また、

```
if ($http_x_forwarded_proto != https)
```
を試してみましたが、この場合だとELBの使用上、無限リダイレクトになってしまいましたので気をつけてください。

```
$ sudo vim /etc/nginx/nginx.conf
```
example.comの部分にはお名前.comで取得したドメイン名を入れてください。
httpでアクセスされたらhttpsにリダイレクトする部分を追加してください。


```:/etc/nginx/nginx.conf
server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  example.com;
        root         /usr/share/nginx/html;
・・・中略・・・
        if ($http_x_forwarded_proto = http) {
           return 301 https://$server_name$request_uri;
         }
    }
```
```
$ sudo nginx -s stop
```

```
$ sudo service nginx start
```
textareaを改行に応じて自動で高さが変わるようにする方法

入力イベント時に、テキストエリア内の文字の行高さ×改行文字数でheightを変えてやることで実装できます。
高さの最大限を指定したい場合は単純にmaxHeightを指定すればOKです。

## サンプルコード
```html
<textarea id="textarea" placeholder="改行で高さが変わる"></textarea>
```

```css
#textarea {
  width: 200px;
  max-height: 200px;
  padding: 8px;
  line-height: 20px;
}
```

```js
$(function() {
  var $textarea = $('#textarea');
  var lineHeight = parseInt($textarea.css('lineHeight'));
  $textarea.on('input', function(e) {
    var lines = ($(this).val() + '\n').match(/\n/g).length;
    $(this).height(lineHeight * lines);
  });
});
```

### 動作デモ（jsfiddle)
こちらからご覧ください
https://jsfiddle.net/maiko_ampersand/8asbLrn9/
Prometheusへmuninから移行を検討③　〜アラート〜

prometheusでやりたかったことの１つとしてアラート通知制御があります。
今回はalertmanagerを使ってアラート通知の制御設定をしていきます。
# alertmanagerの準備
以下からalertmanagerをダウンロードしてきます。
[prometheus公式](https://prometheus.io/download/)

ダウンロードしたものを展開して/homeの下に配置しました。
<img width="426" alt="スクリーンショット 2018-05-01 13.11.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/3e12dc5b-c4d8-b1b4-a401-d9e5638887a0.png">

「./alertmanager --config.file=simple.yml」で実行できるんですが、
設定を変更する必要があるのでsimple.ymlをベースにalert.ymlを用意しました。
※cp simple.yml alert.ymlという感じで用意した。

## 通知方法
今回はメールにしたのでglobalでは以下のように設定しました。
<img width="460" alt="スクリーンショット 2018-05-01 13.18.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/d4a99bde-b126-3b94-4e77-950b39d6b15c.png">

## 実際の通知設定
routeディレクティブで設定した内容で通知されるようです。
<img width="478" alt="スクリーンショット 2018-05-01 13.21.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/5e19dc88-7818-74d5-1e2d-b76222d264f6.png">

## アラートのまとめ
warnとcriticalが同時になった場合、criticalだけを通知するようなことが可能なようです。
<img width="376" alt="スクリーンショット 2018-05-01 13.23.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/c49843cd-aa64-ab6d-6182-003ab41f3a86.png">

## 通知に関する設定
今回はメールなので以下のような設定にしました。
<img width="257" alt="スクリーンショット 2018-05-01 13.24.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/f3ae2076-7d10-1990-27a4-c2ac141adb43.png">

ここまでやったら「./alertmanager --config.file=alert.yml」で実行します。

# prometheus側の設定
alertmanagerはprometheusから通知されるアラートの扱いを管理するもののようで、
通知自体はprometheus側で行う必要があります。

## 準備
alertのルールを用意していきます。
「/home/promethues」配下に移動してから作業

1. 格納場所を用意
    2. mkdir alert_rules
3. system.ymlをalert_rules配下に設置

中身はシンプルにInstanceDownだけにした。
<img width="562" alt="スクリーンショット 2018-05-01 13.37.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/6a7c09b6-0d9b-d67f-246d-944b24c2a3ec.png">

次にprometheus.ymlのalertingとrule_filesを変更
<img width="678" alt="スクリーンショット 2018-05-01 13.39.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/9c9fbee3-e034-1aef-df90-0140a7bf762c.png">

これで準備ができた。

# アラート通知
prometheusを起動して、node_exporterを停止するとアラートメールが通知されるはずです。
ちなみにalertmanagerも「グローバルIP:9093」にブラウザでアクセスすると以下のような確認ができます。
<img width="546" alt="スクリーンショット 2018-05-02 17.29.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/0f7c1f6b-4899-bbfb-538b-69c7bf576cc7.png">

ここでは確認してないですがrepeatで指定した1h（１時間ごと）に再通知されると思います。
# まとめ
ここまでで、簡単ではありますが、以下を行って来たので
一通りは完了かなと思ってます。
- [prometheusの設定](https://qiita.com/kohei-okamura/items/2924bf0feaa129c679f0)
- [grafanaの設定](https://qiita.com/kohei-okamura/items/21883846a8f82a79c91a)
- このアラートの設定

あとは監視対象を増やしたりアラートメールの種類を増やしていければなと思います。
さくらVPSのSSH接続に失敗すると再度SSH接続できなくなる問題の対処

さくらVPSのSSH設定でヘマこいて、こんなメッセージが出て繋げられなくなった^ ^;

```
ssh: connect to host ●.●.●.● port 22: Connection refused
```

さてさてどうしたものか・・・・

## 解決策

さくらVPSのコンソール画面から以下のコマンドを実行してポートを一度解放！

初期設定だと、一度接続に失敗すると、ポートが閉塞される設定になっているようだ。

```
iptables -A INPUT -p tcp -m tcp --dport 22 -j ACCEPT
```

設定を反映させるために一度iptableの再起動。

```
service iptables restart
```

これでもう一度SSH接続を試みると、接続できました^ ^
openRTB2.5におけるVideoの推奨要素

openRTB2.5において推奨されてるVideo（インストリーム動画）の要素についてのまとめ。※推奨の他にも要素たくさんあるので、詳細は[仕様書](https://www.iab.com/wp-content/uploads/2016/03/OpenRTB-API-Specification-Version-2-5-FINAL.pdf)ご確認をば。

| 要素 | 型 | 説明 | 
|:-----------|------------:|:------------:|
| mimes | string array;（必須）|MIMEタイプに対応 （e.g., “video/x-ms-wmv”,“video/mp4”)|
|  minduration | integer;  | 動画広告の最小再生時間（秒）  |
|maxduration  | integer; | 動画広告の最大再生時間（秒）  |
|protocols |  integer array;  | サポートされているビデオプロトコルの配列 |
| w |  integer;  | デバイス非依存ピクセル（DIPS）でのビデオプレーヤーの幅 |
|h   | integer;  | デバイス独立ピクセル（DIPS）でのビデオプレーヤーの高さ。  |
|startdelay   |  integer; | プレロール、ミッドロール、またはロールの開始遅延を秒単位で示す  |
Prometheusへmuninから移行を検討②　〜Grafanaの設定〜

[Prometheusへmuninから移行を検討①](https://qiita.com/kohei-okamura/items/2924bf0feaa129c679f0)ではprometheusとnode_exporterの設定まで行ないました。
ここではgrafanaを使ってグラフを見やすくしていこうと思います。

# grafanaの準備
### grafanaのインストール
どうやらyum（centosなので）でインストール出来るみたいで助かりました。
[Grafana公式](http://docs.grafana.org/installation/rpm/)

ここに記載の通りで問題ないです。
「Install Stable」のコマンドを実行しました。

あとは自動起動の設定と実際の起動を行ないます。

1. 「systemctl enable grafana-server」を実行
    2. 念の為、効いているかどうか確認「systemctl list-unit-files --type=service|fgrep grafa」
3. 「systemctl start grafana-server」を実行

これで起動まで完了したので「netstat -lntp」等で待受ているポートを確認する
<img width="731" alt="スクリーンショット 2018-05-01 12.03.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/307949f4-570c-b9e6-3e0a-dddf725fce6f.png">

この状態であればブラウザで「グローバルIP：3000」でアクセスが可能になります。

### ブラウザで確認
「グローバルIP:3000」にアクセスするとログイン画面が表示されるので、ログインします。
　（デフォルトがadmin/adminだった気がします）

ログイン後の画面がこんな感じだと思います。
<img width="744" alt="スクリーンショット 2018-05-01 12.41.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/a0b86b65-473c-4aef-f4e5-9d88c795cdb8.png">

「Add data source」をクリックしてprometheusと関連付けていきます。
<img width="573" alt="スクリーンショット 2018-05-01 12.43.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/241f8ebd-e559-ceeb-ddcf-d361a732e126.png">

多分、これで良いと思います。
次に「New dashboard」から自身でグラフを作っていくのも良いですが、
１つ１つ作るのは大変そうなので公開されているDashboardを適用します。

### ダッシュボードのテンプレート適用
以下からDashboardのテンプレートをダウンロードします。
[Grafana Labs](https://grafana.com/dashboards)
検索フィルタがあるので活用します。
<img width="207" alt="スクリーンショット 2018-05-01 12.49.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/cc4049cb-b4d0-4eb3-f4fd-90c348997f88.png">

「Node Exporter Full」というのがあったのでこれにしました。
<img width="423" alt="スクリーンショット 2018-05-01 12.50.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/8596f3d2-d79e-1f02-0da3-7010fe3150cf.png">
「download json」というのがあるのでクリックしてダウンロードします。

次にgrafanaのブラウザ画面からダウンロードしたJsonをImportします。
<img width="210" alt="スクリーンショット 2018-05-01 12.55.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/60c5eae2-9091-a8fd-7b86-5311e12edfc4.png">

import画面でjsonをアップロードします。
Nameは「Node Exporter Full」と自動で入ったのであとはデータソースを指定して「Import」ボタンを押します。
そうすると以下の様な画面が出てきました。

<img width="764" alt="スクリーンショット 2018-05-01 12.58.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/21851d7e-5028-407a-dec4-30553ec7f685.png">
※一部抜粋です。実際には大量の項目が出ています。

# まとめ
grafanaで綺麗なグラフが出来ました。
有志があげてくれているダッシュのテンプレートはたくさんあり、
いろいろ試して見やすいものを検討するのも良いかもと思いました。
[google calendar api]PHPでカスタマイズ・カレンダー

google calendar api を使って、オリジナルのカレンダーを作りました。

忘れてしまわないように、メモしておきます。

# 作業内容

google api consoleでプロジェクト作成

APIキーを作成。

サンプルとして、APIキーの利用制限は無しにします。

composerでgoogleのapiセット？をインストール。

`composer require google/apiclient:^2.0`

参考: https://github.com/google/google-api-php-client

googleカレンダーを作成。

https://calendar.google.com/calendar/r/week

「＋」ボタンを押して「新しいカレンダー」をクリック。

設定と共有から、「アクセス権限」の欄のチェックボックス「一般公開して誰でも利用できるようにする」にチェック。

「カレンダーの統合」にあるカレンダーIDをメモ。


```

  const APPLICATION_NAME = 'プロジェクトの名前をコピペ';
  const DEVELOPER_KEY = 'APIキーをコピペ';
  const CALENDAR_ID = 'メモしたカレンダーIDをコピペ';
  public $service;

  /*
   * constructor
   */
  public function __construct() {
    date_default_timezone_set('Asia/Tokyo');
    require_once '/path/to/your-project/vendor/autoload.php';
    $client = new Google_Client();
    $client->setApplicationName(self::APPLICATION_NAME);
    $client->setDeveloperKey(self::DEVELOPER_KEY);
    $this->service = new Google_Service_Calendar($client);
  }

  /*
   * カレンダーのイベントを取得
   */
  public function getCalEvents() {
    $now = date('c');
    $opt_params = [
      'maxResults' => 300,
      'orderBy' => 'startTime',
      'singleEvents' => TRUE,
      'timeZone' => 'Asia/Tokyo',
      'timeMin' => $now ,
      'timeMax' => date('Y-m-d' ,strtotime("+6 day" ,strtotime(substr($now, 0, 10)))) . 'T23:59:59+09:00',// サンプルとして1週間分取得
    ];

    $results = $this->service->events->listEvents(self::CALENDAR_ID, $opt_params)->items;
    $rtn = '';
    foreach ($results as $value) {
        $rtn.= '欲しいデータhtml';
    }
    return $rtn;
  }

```

おしまい
JavaScriptでオブジェクト(Object)リテラルのキーに色々指定できる

ES2015以降から柔軟にObjectを作成できるようになったみたい

[オブジェクト初期化子 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)


```javascript
const aa = () => 'AA'
const ii = 'II'

const o = {
  a: 'A',           // 通常のやつ
  [aa()]: 'ああ',   // メソッド呼び出しの返り値をキーにする
  [ii]: 'いい',     // 変数の値をキーにする
  ['UU']: 'うう',   // 文字列のリテラルをそのままキーにする
}

console.log(o)

> Object {
>   a: "A",
>   AA: "ああ",
>   II: "いい",
>   UU: "うう"
> }
```

こんな感じで色々キーにできるみたいです。
PostgreSQL+phpPgAdminをMacにいれるメモ

php 7.0
PostgreSQL 10.3
phpPgAdmin(開発が止まってるので良さげな[リポジトリ](https://github.com/flexjoly/phppgadmin))

# やること
- PHPとApacheをいれる(MAMPが楽)
- PostgreSQLをいれる
- phpPgAdminをいれる


# PHPとApacheをいれる
ここからMAMPをダウンロードして、インストール(簡単)
https://www.mamp.info/en/

[http://localhost](http://localhost)　にアクセスして、何か表示されてたらOK

# PostgreSQLをいれる

```bash
brew install postgresql
initdb /usr/local/var/postgres -E utf8　#エンコードの設定
pg_ctl -D /usr/local/var/postgres -l /usr/local/var/log/postgres start
```
これでpsql　hogehogeで色々出来るはず。

# phpPgAdminをいれる
2018/5/2の情報。
phpPgAdminがpostgreSQLの最新バージョンに追いついていないので、
以下のフォーク先のリポジトリから落としてくる。
https://github.com/flexjoly/phppgadmin

zipファイルを展開し、
apacheのドキュメントルートに配置する。
後は設定ファイルを適当に書き換えて、
保存しなおせばOK。
phpPgAdmin/conf/config.inc.php-dist
↓
phpPgAdmin/conf/config.inc.php

基本的には特に設定の必要もなく、
[localhost/phppgadmin](http://localhost/phppgadmin)　にアクセスするとそれっぽい画面が開くはず。

ローカルにpostgreSQLをインストールしている場合はこれで終わり。
（セキュリティ的にまずいと思うので、ユーザー設定とか必要かも）
リモートのpostgreSQLにアクセスしようする場合は、
conf/config.inc.phpのホストの設定($conf['servers'][0]['host'])を書き換えればOK。


#　参考
https://qiita.com/_daisuke/items/13996621cf51f835494b
seed値で固定化する乱数。

### アルゴリズムはxorshift。研究用途等、端末を問わず、再現付き乱数を発生したい場合に必要。
```js
;(function(root){
 function entry(seed){
  let x = 90215247,y = 75933011,z = 19246193,w = seed||39706195,re=16856449
  ,a=(d)=>{return (d===0)?re:d }  //a is work function. if all value 0, dont work, so the escape.
  ,f=()=>{
    let t= a(x^(x << 11)); x =a(y); y=a(z); z=a(w);
    return w = (w^(w >>> 19)) ^ (t ^ (t >>> 8)); 
  }
  ,f2=(min,max)=>{return min + (Math.abs(f()) % (max + 1 - min))}
  ;
  return function(min,max){return (!isNaN(min)&&!isNaN(max))?f2(min,max):f()}
 }
 root.rseed=entry;
})(this);///*usage:*/ let seed=100,r=rseed(seed); Array.from({length:100}).map(d=>r(0,555)).map(d=>{console.log(d)})
```
### usage
```js
/*usage:*/ let seed=100,r=rseed(seed); Array.from({length:100}).map(d=>r(0,555)).map(d=>{console.log(d)})

```
### 精度チェック
```js
let seed=7,r=rseed(seed); 
let ret=Array.from({length:1000000}).map(d=>r(0,100)).filter(d=>d===0);//per check
console.log(ret.length/1000000 *100,'%')
```
Prometheusへmuninから移行を検討①

muninは素晴らしいツールですが、飽きてきたので別の監視ツールである「prometheus」を検討してみます。
※awsで簡単に確認しているので移行の目処をつけるための検討と割り切ってください。

# 環境
動かす環境はcentosで監視対象はcentosやdebian等
# Prometheusの準備
### Prometheusのダウンロード
以下から"Operating system"をlinuxに指定してtar.gzをダウンロード。
[prometheus公式](https://prometheus.io/download/)

<img width="726" alt="スクリーンショット 2018-04-26 12.20.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/24111a26-abac-f6b7-24bc-ad3cb6c38acc.png">

次に、アーカイブを解凍して実行させたい場所に設置。
<img width="414" alt="スクリーンショット 2018-05-01 11.12.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/902da3a0-eed7-7fb7-92f6-4f0f18635cce.png">
※/home配下に設置しました。

### Prometheusの設置
実際に実行してブラウザでアクセスしてみます。
1. /home/prometheus配下に移動
2. 「./prometheus --config.file=prometheus.yml」を実行
3. netstat -lntpでポート9090で上がっていることを確認

awsのインスタンスのセキュリティグループの設定において、
9090を許可するようにします。
その状態でインスタンスの「グローバルIP:9090」にブラウザでアクセスすると以下のような画面が表示されました。

<img width="649" alt="スクリーンショット 2018-05-01 11.34.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/d1beeb27-1aa8-fc6b-8cd8-7ceea424e103.png">

# 値を取得する

node_exporterを用いてCPUやメモリの値を取得してグラフを表示します。

### node_exporterのダウンロード
本体同様以下からダウンロードします。
[prometheus公式](https://prometheus.io/download/)

<img width="558" alt="スクリーンショット 2018-05-01 11.37.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/e463ba75-7bf6-d341-76c7-9c0de7360126.png">
　※rc版ではないものを使いました。（この時点だと0.15.2でした）

### node_exporterの設置
prometheusと同様に/homeに設置してみました。
<img width="419" alt="スクリーンショット 2018-05-01 11.39.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/4758dfb7-9c5a-5b3d-f464-ab5e29f64a98.png">

node_exporterはそのまま実行（node_exporterディレクトリ配下で「./node_exporter」）します。
<img width="1033" alt="スクリーンショット 2018-05-01 11.41.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/9ba39006-68a7-af38-8674-6841140d55e8.png">

こんな感じで実行され、9100でListeningされます。

# prometheus側の設定
node_exporterで取得する値を集めます。
prometheus.ymlのscrape_config配下に監視対象を追加します。
<img width="709" alt="スクリーンショット 2018-05-01 11.43.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/ff1148f8-84e3-0ee1-cad7-a8aee059abff.png">
※下3行が追加した箇所になります

プロメテウスを再度起動し直し、ブラウザもリロードします。
プロメテウスにアクセスし、「Execute」ボタンの横のプルダウンにnode〜が付与された項目が追加されているはずです。
<img width="713" alt="スクリーンショット 2018-05-01 11.46.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/247087/f5d2a484-226c-1583-2965-1951711a734c.png">
※選択しているものはロードアベレージになります。

あとは確認したい項目を選択して「Excute」ボタンを押せば完了です。

- Consoleタブでは取得方法（クエリ）が表示される
- Graphタブではグラフが表示される

# 最後
まずはプロメテウスで値が取れるところまで出来ました。
次はgrafanaを使ってグラフ描画を楽にしていこうと思います。
VSCode のワークスペースのフォルダの順番を変更する

~~VSCode の「ファイルを開く(Ctrl + O)」でワークスペースファイル(*.code-workspace)を開く。
※この時、コマンドラインから `code [-n] hoge.code-workspace` やワークスペースファイルをドラッグアンドドロップで開こうとすると、ワークスペースが開かれてしまう。別のエディタを使うのも手。~~
ワークスペースを開いた状態で [Ctrl + ,] を押して設定を開く。
右ペインの「ユーザー設定」の隣に「ワークスペースの設定」とあるのでそれをクリック。
 
そうすると中身はJSON形式で

```json
{
	"folders": [
		{
			"path": "path1\\to1\\hoge"
		},
		{
			"path": "path2\\to2\\bar"
		},
		{
			"path": "path3\\to3\\foo"
		},
		{
			"path": "path4\\to4\\hogehoge"
		}
	]
}
```

という感じになっている。
※場合によっては "folders" 以外がある場合もある。
この順番を変えれば良い。
1番最後にカンマがあっても問題ないので、上の例で言うところの `"path": "path4\\to4\\hogehoge"` を含む閉じかっこの後ろにカンマをつけて、{}含む3行を選択して、Alt + ↑/↓ で移動させるのが楽。

```json
{
	"folders": [
		{
			"path": "path1\\to1\\hoge"
		},
		{
			"path": "path4\\to4\\hogehoge"
		},
		{
			"path": "path3\\to3\\foo"
		},
		{
			"path": "path2\\to2\\bar"
		},
	]
}
```

編集して保存すると、即座にエクスプローラーペインのワークスペース内フォルダの順番が更新される。
GLSLの関数の引数で指定するout修飾子とinout修飾子の違いについて

GLSLの関数で参照渡しをするときに、以下のように引数に`out`や`inout`といった修飾子を指定すると思います。


```glsl
void func(out output) {
   ...
}
```

`out`と`inout`の違いを今までわかっていなかったのですが、以下のページに書いてあったので備忘録としてまとめておきます。
https://www.khronos.org/opengl/wiki/Core_Language_(GLSL)

まず`inout`ですが、こちら`in`修飾子と同じように関数の呼び出し時に実引数の値を引数にコピーします。例えば、以下のようなフラグメントシェーダーの場合、`color`は最終的に`(1.0, 1.0, 0.0)`となり、黄色でレンダリングされます。

```glsl:fragment_shader

void testInout(inout color) {
  color += vec3(0.0, 1.0, 0.0);
}

vod main() {
  vec3 color = vec3(1.0, 0.0, 0.0);
  testInout(color);
  gl_FragColor = vec4(color, 1.0);
}

```

一方で`out`では関数の呼び出し時に値のコピーをおこないません。そのため値は未定義（値がなにか不明）の状態になります。以下のようなフラグメントシェーダーでは最終的な`color`の値は予測できなくなります。実際に実行してみるとノイズのようなものが出力されることを確認できました。
http://glslsandbox.com/e#46725.0

```glsl:fragment_shader

void testOut(out color) {
  color += vec3(0.0, 1.0, 0.0);
}

vod main() {
  vec3 color = vec3(1.0, 0.0, 0.0);
  testOut(color);
  gl_FragColor = vec4(color, 1.0);
}

```
JavaScript でゲームを作りたい

# ゲームを作りたい

JavaScript も書けるようになってきた気がするので、いっちょゲームでも作ってみるかー

# ライブラリの選定

ゲームエンジンと呼ばれるライブラリがたくさんあるので、ゲーム作るなら、どれかを選ばなければいけない。

- [Github のリスト 17個](https://github.com/collections/javascript-game-engines)

特にスターが多いやつ

```
phaser 21345, 2D, HTML5, Canvas and WebGL
pixi.js 18614, 2D, HTML5, WebGL
Babylon.js 6555, 3D, WebGL
whs.js 4775, 3D, based on Three.js
PhysicsJS 3161,
```



- [Top 15: Best open source javascript game engines](https://ourcodeworld.com/articles/read/308/top-15-best-open-source-javascript-game-engines)

上記の中でTop5

```
'melonJS',
'pixi.js',
'engine',
'Babylon.js',
'phaser',
```


- [20 JavaScript Engines for Building Games on the Web 2017](https://colorlib.com/wp/javascript-engines-for-building-games/)

上記三つ全てに含まれているエンジン

```
[ 'pixi.js',
  'phaser',
  'melonJS',
  'kiwi.js',
  'Crafty',
  'stage.js',
  'engine',
  'qiciengine' ]
```

いきなり 3D は難しそうだし、2D の有名どころの phaser, pixi.js あたりをあたってみようかな。特に以下の Phaser の紹介文(さっきの二つ目のリンク）がぐっときた。

>Phaser.js will probably be your first option to start with the Games Development as it's very easy to use, they provide a lot of examples and doesn't require a lot of codebase to create your first game.

phaser と Pixi.js は仲が良いらしい

>Phaser uses and contributes towards the excellent Pixi.js library for rendering

# Phaser について調べる

## バージョンが二つある？

Ver.3 系列と、コミュニティ版(CE版、Ver2ベース) とがあるらしい。両方とも　MIT なオープンソース。主要開発陣が photonstorm というところらしいのだが、開発リソースを Ver3 につぎ込むので、 Ver2 系列のメンテをコミュニティに寄せたらしい。

>Phaser v2 was built and maintained by Photon Storm and turned over to the community (as Phaser CE) in November 2016. Phaser v3 is in active development.

要は最新版を使うのであれば、 Ver 3+ のある、[photonstorm/phaser](https://github.com/photonstorm/phaser) を使えばよいということ。

## Hello world

[photonstorm/phaser](https://github.com/photonstorm/phaser) のREADME に最初のアプリの作り方が書いてある。50行くらいのHTMLが[公式のgist](https://gist.github.com/photonstorm/46cb8fb4b19fc7717dcad514cdcec064) にある。

## 開発環境

- 専用IDEとかいらないっぽい
- TypeScript の定義ファイルがある。


## Qiita

https://qiita.com/tags/phaser 

投稿は頻繁とはいいがたい
Core Dataについて調べたメモ

[Core Data Programming Guide: What Is Core Data?](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreData/index.html) このあたりを読んで、CoreDataを構成する要素・使い方を雑にまとめてみました。

## 構成要素

### .xcdatamodeld
テーブルを定義する。

### NSManagedObjectのサブクラス
データベースのテーブル単位にクラスを定義する。

`NSManagedObjectContext` を経由して、取得・保存などを行う。

生成・取得方法にはいくつかある。

- `NSEntityDescription.insertNewObject`や`NSEntityDescription.entity` にて生成。
- `NSFetchRequest` にて取得。

### DataController
自分で実装する。
`NSPersistentContainer` を生成・管理する。

`AppDelegate` の `didFinishLaunchingWithOptions` の中で生成、そのインスタンス変数となる。
`AppDelegate` 以外の各クラスからは、 `AppDelegate` 経由で取得する。

### NSPersistentContainer
iOS 10系から導入。
`NSManagedObjectModel`, `NSPersistentStoreCoordinator`, `NSManagedObjectContext` のあたりを上手く生成・管理してくれる。

`NSPersistentContainer.viewContext` により、 `NSManagedObjectContext` を取得できる。

### NSManagedObjectContext
"NSManagedObjectのサブクラス"を管理するクラス。
イメージとしては、ここから"NSManagedObjectのサブクラス"を払い出してもらい、利用・修正し、ここに返すことで保存してもらう。

`NSPersistentContainer` から取得できる。

### NSFetchRequest
対象のentity、条件などを指定して、DB内を検索する。
インスタンス化し、必要な情報を設定、`NSManagedObjectContext` に渡すことで、検索を実行できる。

## 備考

### iOS10より前のDataController.init

`NSPersistentContainer` の生成を行わず、下記を行う。

- `Bundle.main.url` を取得する。
- `NSManagedObjectModel` を生成する。
- `NSPersistentStoreCoordinator` を生成する。
- `NSManagedObjectContext` を生成する。
- `NSPersistentStoreCoordinator.addPersistentStore` を実行、引数のclosureを実行する。
Visual studio codeでターミナルに背景入れたい時

# プログラミングする時って、背景ある方がモチベ上がるので
既に紹介している記事があると思いますが、備忘録代わりに残す。

## プラグインを使います
<h2><b>background</b></h2>
https://github.com/shalldie/vscode-background

この作業はインストールが終わるまでは管理者実行してください。

VSCodeの拡張機能ボタンをクリック
検索窓で```background```で検索するとこんな画面になります。
私は既にインストール済みだったので```インストール済み```と表示されています。
![スクリーンショット_2018-04-26_16-40-55.png](https://qiita-image-store.s3.amazonaws.com/0/174910/6c143018-e65f-3b6e-ba90-5cb3d16a6573.png)

こんな説明画面が出ます。
![スクリーンショット_2018-04-26_16-40-37.png](https://qiita-image-store.s3.amazonaws.com/0/174910/b93462e5-ed7e-bfe0-0d20-4ef9ff6a3786.png)

## インストールできたら、
左上にあるメニューから、
```ファイル→基本設定→設定```の順にクリック
![スクリーンショット_2018-04-26_16-50-14.png](https://qiita-image-store.s3.amazonaws.com/0/174910/88c642d6-b1e1-de9a-9a8f-54c5d14eef0f.png)

この画面になったら、右枠の```{}```の中に設定を書いていきます。

設定例を以下に書きます。
```
{
   "background.enabled": true,  #trueにするとbackgroundを使うことが出来ます。
   "background.useDefault": false,　#falseにしないと個別に画像を指定することが出来ません。
   "background.customImages": [
       "file:///C:/***/***.jpg or png
   ]
}
```

私は、以下の設定にしています。
```
{
    "editor.fontFamily": "ゆたぽん（コーディング）",
    "editor.fontSize": 19,
    "background.enabled": true,
    "background.useDefault": false,
    "background.customImages": [
       "file:///C:/IMG_0885.JPG",
       "file:///C:/IMG_0890.JPG",
       "file:///C:/IMG_0886.JPG"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "opacity": 0.1
    },
    "window.zoomLevel": 0
}
```

背景を変えると気分も変わるのでぜひ試してみてください
暗号通貨の作成は出来ますか？

私は暗号通貨を作成して事業の資金調達をしたいと考えています。
暗号通貨を作成できるプログラマー、SEの方を探しています。
できればERC２０準拠のトークンを作りたいのです。
ICOををせずに一部を無料で配布してから
上場を目指そうと思っています。
上場できれば価値が付くので売却すればお金になります。
利益は折半で考えています。
一緒に出来る方は居りませんか？
探しています。
visual studio2012 C#　基礎学習

#今日習ったこと
今回は配列を使った勉強をしました。

#開発環境
OS:Microsoft windows10(64bit)　
IDE:Microsoft Visual Studio 2012

#基本操作
1.配列の宣言
2.配列の値の作成
3.配列のリテラルの書き方

#本日授業で教わった配列について
本日授業を受けて配列について学ぶためまずこのようなものを打ち込みました
初めに5教科の試験の点数をまとめた配列を用意し合計よ平均点を図ってみました。
こちらのプログラムを入力します。
static void Main(string[] args){}
このプログラムの中にある{}の中に次のプログラムを入力します。

```cs:Program.cs
  class Program
  {
      static void Main(string[] args)
      {
            int[] data = { 98, 76, 59, 87, 65 };
            int total = 0;
            for (int i= 0; i < 5;i++)
            {
                total += data[i];
            }
            Console.WriteLine("合計" + total);
            Console.WriteLine("平均" + (total / 5));
            Console.ReadKey();
      }
  }
```

**入力結果がこちらになります。**

![2.png](https://qiita-image-store.s3.amazonaws.com/0/249273/46884ff5-25c0-2e3a-fa9d-daa5d98aae32.png)
####入力に間違いが無ければ実行して見ましょう。

実行結果がこちらになります。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/249273/d13c231c-be23-e12c-ba4f-8a1358fcb747.png)
こちらの数字が表示されれば試験の点数の合計と平均が表示されます。

##次にLengthを使って改良してみました。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/249273/d18ad575-715a-7309-2ac5-4489eb491cce.png)

###実行結果はこちら。![4.png](https://qiita-image-store.s3.amazonaws.com/0/249273/14912ccf-08ac-d236-fb3a-9f2d3bfedca7.png)

##最後にforeachを使ってやります。![5.png](https://qiita-image-store.s3.amazonaws.com/0/249273/d2cc91e5-8501-1018-8330-09dccdce7d1c.png)
####結果は先ほどと変わりません。

#最後に
配列には**ソースコードなどをきれいにできて便利**ですが、今日の授業で**デメリット**も知りました。例えば同じタイプの値しか入れられない、要素を増やしたり減らしたりできないです。ですが使いこなせたら便利なので使っていき学びたいなと思っています。
Mac,PhpStorm,Laravelショートカット備忘録

#Mac

###Search Everywhere
<kbd>Ctl + Space</kbd>

###かな削除
環境設定 > キーボード > 入力ソースのカタナカのチェックを外す。

###かな変換
<kbd>Opt + X</kbd>
たまに忘れる。

###Mission Controlの切り替え削除
PhpStormのタブ切り替えを<kbd>Ctr + 矢印</kbd>で行うため。
Mission Controlの切り替えは3本指で行なっています。
![mac01.png](https://qiita-image-store.s3.amazonaws.com/0/237046/f200d5a8-e239-d73c-9270-0009dee22e38.png)

##Terminal

###PHPビルトインサーバのプロセス削除
`ps aux | grep serve`
`kill 9999`

###

#PhpStorm

##ショートカット系

###Search Everywhere
<kbd>Shift</kbd> *2

###新規ファイル作成
<kbd>Cmd + N</kbd>

###行頭
<kbd>Cmd + ←</kbd>

###行の削除（Delete line） 
<kbd>Cmd + delete</kbd>
<kbd>Ctl + Shift + K</kbd> ← 追加

###同じ単語の選択（Add Selection for Next Occurrence） 
~~<kbd>Ctl + G</kbd>~~ ← 削除
<kbd>Cmd + d</kbd> ← 変更

###単語の選択
<kbd>alt + ↑</kbd>

###Refactor This
<kbd>Ctl + T</kbd>

###PhpDoc定義、変数初期化
<kbd>Alt + Enter</kbd>
![php.png](https://qiita-image-store.s3.amazonaws.com/0/237046/78497550-fee5-5cee-8150-ce5760ff84f9.png)

###四則演算展開
<kbd>???</kbd>
ないみたいですね。残念。

##Git操作
###コミット
<kbd>Cmd + K</kbd>

###プッシュ
<kbd>Cmd + Shift + K</kbd>

##Add
新規ファイルはaddしないとコミット時の選択肢に出てこない。
https://www.jetbrains.com/help/phpstorm/file-status-highlights.html

###リモートブランチをローカルにcheckoutする
~~コマンドラインからの方が早いかも。~~
![スクリーンショット 2018-05-10 1.11.59.png](https://qiita-image-store.s3.amazonaws.com/0/237046/231b0d19-7cc5-0c5d-fbd2-08c9fdbf6b1d.png)

###ブランチの状態
![スクリーンショット 2018-05-10 1.14.37.png](https://qiita-image-store.s3.amazonaws.com/0/237046/5d71e2f6-9994-f2af-cfe8-44618fef04d2.png)
黄：現在のブランチ
緑：ローカル
紫：リモート

##スニペット
Preferences > Editor > Live Templates > PHP
```
fore -> foreach
prif -> private function
pubf -> public function
_c   -> public function __construct ← 追加
```
【Laravel on PHP】NEMの公開鍵をアドレス化する。

公開鍵を作るために
以下のURLを参考にやってみました。
https://tadajam.katari.be/DybkrUq3?_ab=2

サーバーの方で、APIを叩き、json_decodeまで終わらせました。そして、viewで編集しようと試みました。

```

<?php
    $hash = hash(“sha256”, $result[“data”][$i][“transaction”][“signer”]);
    $hash = hash(“ripemd160”, $hash);
    $hash = “0x68".$hash;
    $hash_5 = hash(“sha256”, $hash);
    $hash_6 = mb_strcut($hash_5, 0, 4);
    $hash = $hash.$hash_6;
    $hash = $this->app->bind(‘Base32\Base32’)
    echo $hash->base32_encode();
        ?>

```
Pythonで世界地図-3(日本地図・cartopy版)

Pythonで世界地図
https://qiita.com/ty21ky/items/c7a93b83cbbfa8a82a17

Pythonで世界地図-2
https://qiita.com/ty21ky/items/c9e29a5361e35ca7c4f2

の続き

#####日本地図に県境を入れる
basemapやcartopyで地図上でplot
http://www.mwsoft.jp/programming/numpy/plot_map.html

上記のサイトに日本地図に県境を表示する方法が書かれています。詳しくは上記のサイトを参照してください。

インストール

```sh:
$ git clone https://github.com/OSGeo/proj.4.git
$ cd proj.4
$ git checkout -b 4.9.0 tags/4.9.0
$ ./configure
$ make
$ sudo make install

$ sudo apt-get install libgeos-dev

$ git clone https://github.com/SciTools/cartopy.git
$ cd cartopy
$ git tag

$ git checkout -b v0.14.2 tags/v0.14.2
```

ここまでは順調に進んだが、次の
$ sudo pip install .
でエラー。メッセージを翻訳するとsudoに-Hを入れろと書いてあるので入れるとOKだった。

```sh:
$ sudo -H pip install .
$ python -c "import cartopy"
```

ここで、またエラー。
libproj.so.0がないらしい。
$ ls -l /usr/local/lib/libp*
-rw-r--r-- 1 root root 3737918  5月  2 14:21 /usr/local/lib/libproj.a
-rwxr-xr-x 1 root root     953  5月  2 14:21 /usr/local/lib/libproj.la*
lrwxrwxrwx 1 root root      16  5月  2 14:21 /usr/local/lib/libproj.so -> libproj.so.0.8.0*
lrwxrwxrwx 1 root root      16  5月  2 14:21 /usr/local/lib/libproj.so.0 -> libproj.so.0.8.0*
-rwxr-xr-x 1 root root 1775816  5月  2 14:21 /usr/local/lib/libproj.so.0.8.0*
ここにシンボリックリンクがあるが？

ネットで検索すると、海外のサイトにバグらしいと書いてあった。
Debianでは、なおっているがUbuntuはまだらしい。
ネットに書いてることをいろいろやっても駄目。
しかし、

```sh:
$ export LD_LIBRARY_PATH=/lib:/usr/lib:/usr/local/lib
```

これで、import出来るようになりました。

上記のサイトを参考に
国土数値情報　ダウンロードサービス
http://nlftp.mlit.go.jp/ksj/
から、データをダウンロード

２. 政策区域　ー＞　行政区域　ー＞　ダウンロードするデータの選択

でデータをダウンロードしました。
ダウンロードする時間帯が悪いのか、それほどファイルサイズが大きくないのに物凄く時間がかかる。（数十分）マイクロソフト以外でこれほど時間がかかったのは初めてだ。

上記のサイトのサンプルプログラムを実行

```python:test.py
#!/usr/bin/python
# coding: UTF-8

import cartopy.crs as ccrs
import cartopy.io.shapereader as shpreader
import matplotlib.pyplot as plt

# 落としてきた行政区域のshpファイルを指定
fname = '/home/ty/python/map/japan/N03-170101_GML/N03-17_170101.shp'
shapes = list(shpreader.Reader(fname).geometries())

# 東京あたりを描画
ax = plt.axes(projection=ccrs.PlateCarree())
ax.add_geometries(shapes, ccrs.PlateCarree(), edgecolor='black', facecolor='gray', alpha=0.3)
ax.set_extent([139, 141, 35, 36], ccrs.PlateCarree())
plt.show()
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/238800/7912f60b-fa5e-ce94-4ce2-51dfd1d6996e.png)

最初は気が付かなかったが、このプログラムはBasemapとは、全然関係なかったぁぁ・・・

![image.png](https://qiita-image-store.s3.amazonaws.com/0/238800/164f8f80-8686-6d03-6499-bdff4582cfa8.png)

しかし、さすが国交省が作った地図なので、Basemapの"f"よりもさらに精度は良いですね。

県境だけにするか、県境の色を変更したいがshpファイルを読むことが出来ないので、現在調査中。
C#の基本文法 - 配列

授業でした内容を自分のメモとして書き残します。

---

C#の基本文法 - 配列

---

#配列とは？
〇 多くの値をひとまとめに扱える変数
⇒ 大量のデータを処理するような時に使う

##1. 基本操作
〇 「宣言」「作成」「リテラル」「値の取得・変更」について

```c#:基本操作
//宣言
タイプ[] 変数;

//作成
変数 = new タイプ [ 整数 ];

//リテラル
{ 値1, 値2, ……};

//値の取得・変更
変数 = 配列[ 番号 ];
配列[ 番号 ] = 値;
```

■ 番号（インデックス）
⇒ 10個の保管場所を作った場合、用意されるインデックス番号は「**0～9**」である
**※ 「1～10」ではない！**

##2. 配列のプログラムの例

```c#:ex
static void Main(string[] args)
{
    int[] data = { 98, 76, 59, 87, 65};
    int total = 0;

    for ( int i = 0; i < 5; i++ )
    {
        total += data[i];
    }
    Console.WriteLine("合計" + total);
    Console.WriteLine("平均" + (total / 5));

    Console.ReadKey();
}
```
**実行結果**
![1.png](https://qiita-image-store.s3.amazonaws.com/0/249699/c2361b72-5e2e-7322-955b-8b479847f1bc.png)

■ マジックナンバー
⇒ プログラムのソースコード中に書かれた具体的な数値
「 for ( int i = 0; i < 5; i++ ) 」
の中の「5」のような数字を指す

・当初は定義した数値の意図を把握しているが、後にソースコードを見返した（メンテナンス）時など意図を忘れた時に見ると、なぜかわからないがプログラムは動いている、魔法の数字だ、と言われる

■ Length
前述した「5」のような数字が後に「10」などに変わることがあれば、プログラム中のそのすべてを修正する必要がある

⇒ 要素数を調べる

```c#:Length.ex
static void Main(string[] args)
{
    int[] data = { 98, 76, 59, 87, 65, 48, 83, 59, 37, 82, 61};
    int total = 0;

    for ( int i = 0; i < data.Length; i++ )
    {
        total += data[i];
    }
    Console.WriteLine("合計" + total);
    Console.WriteLine("平均" + (total / data.Length));

    Console.ReadKey();
}
```
**実行結果**
![2.png](https://qiita-image-store.s3.amazonaws.com/0/249699/d1976f88-ef94-265b-1896-aff18c3d1ec2.png)

##3. foreach
〇 すべての要素を変数に取り出して処理を実行し終えたら、自動的に構文を抜ける

```c#:ex
foreach( タイプ 変数 in 配列 )
{
        ……繰り返す処理……
}
```

```c#:foreach.ex
static void Main(string[] args)
{
    int[] data = { 98, 76, 59, 87, 65, 48, 83, 59, 37, 82, 61};
    int total = 0;

    foreach ( int i in data )
    {
        total += i;
    }
    Console.WriteLine("合計" + total);
    Console.WriteLine("平均" + (total / data.Length));

    Console.ReadKey();
}
```

配列dataから順に値が取り出され、変数iに収められていく

##4. 配列の問題点
〇 大きな問題点は次の二つ

1. 同じタイプの値しか入れられない
 - 配列とは、同じタイプの値を整理するというものであり、他のタイプのものは入れられない

2. 要素の増減ができない
 - 要素数は最初の作成時に決まるもので、後での増減は不可である

---

最後までお読みいただきありがとうございました。
VBScript -- ものすごく簡単に、Windows API を呼び出す

#※唯一、一番の考慮点は、下記の「JJCCJ」のみで、それ以外は非常にカンタンです。
下記の「JJCCJ」の意味は、それぞれの引数の型を指定するそうですが、詳しくは公式ヘルプ(エクセル側)をご覧くださいませ。

※エクセルの無い環境では動作しません。ご注意ください。

```vb:Kantan.vbs
Dim excel
Set excel = CreateObject("Excel.Application")
Dim strMacro
strMacro = "CALL('user32', 'MessageBoxA', 'JJCCJ', 0, 'Msg画面が描画・完了しましたら、OKを押してください。', 'Windows API in VBS', 0)"
strMacro = Replace(strMacro, "'", """")
excel.ExecuteExcel4Macro(strMacro)
```

※動作確認環境 : Win7 Pro
Mastodonのbundle installでnative extensionのBuildErrorが発生した

MacにMastodonの開発環境を構築する際にエラーが発生した。
いくつかのgemがC言語のライブラリに依存しているので、自分でインストールしなければならないようだ。

#環境
Mac OS 10.13
Ruby 2.5.1
Mastodon 2.3.3

#状況
bundle installで下記のエラーが発生。

```
$ bundle install
Fetching gem metadata from https://rubygems.org/...........
Fetching https://github.com/ykzts/devise-two-factor.git
Fetching rake 12.3.1
Installing rake 12.3.1
Installing capistrano-yarn 2.0.2
Fetching xpath 3.0.0
Installing xpath 3.0.0
Fetching capybara 2.18.0
Installing capybara 2.18.0
Fetching charlock_holmes 0.7.6
Installing charlock_holmes 0.7.6 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

current directory:
/Users/user/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/charlock_holmes-0.7.6/ext/charlock_holmes
/Users/user/.rbenv/versions/2.5.1/bin/ruby -r ./siteconf20180420-1825-ayz6nd.rb extconf.rb
checking for -licui18n... no
checking for -licui18n... no


***************************************************************************************
*********** icu required (brew install icu4c or apt-get install libicu-dev) ***********
***************************************************************************************
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
	--with-opt-dir
	--without-opt-dir
	--with-opt-include
	--without-opt-include=${opt-dir}/include
	--with-opt-lib
	--without-opt-lib=${opt-dir}/lib
	--with-make-prog
	--without-make-prog
	--srcdir=.
	--curdir
	--ruby=/Users/user/.rbenv/versions/2.5.1/bin/$(RUBY_BASE_NAME)
	--with-icu-dir
	--without-icu-dir
	--with-icu-include
	--without-icu-include=${icu-dir}/include
	--with-icu-lib
	--without-icu-lib=${icu-dir}/lib
	--with-icui18nlib
	--without-icui18nlib
	--with-icui18nlib
	--without-icui18nlib

To see why this extension failed to compile, please check the mkmf.log which can be found here:

/Users/user/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/extensions/x86_64-darwin-17/2.5.0-static/charlock_holmes-0.7.6/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in
/Users/user/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/charlock_holmes-0.7.6 for
inspection.
Results logged to
/Users/user/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/extensions/x86_64-darwin-17/2.5.0-static/charlock_holmes-0.7.6/gem_make.out

An error occurred while installing charlock_holmes (0.7.6), and Bundler cannot
continue.
Make sure that `gem install charlock_holmes -v '0.7.6'` succeeds before bundling.

In Gemfile:
  charlock_holmes

```

#解決
homebrewでicu4cをインストールする必要がある。

```
$ brew install icu4c
```

私の環境ではさらにcld3とidn-rubyのインストールに失敗したので、下記の通りにインストールした。

```
$ brew install protobuf
$ brew install libidn
```

これでbundle installに成功するようになった。
C#での初歩的なプログラミング

####今回は[前回](https://qiita.com/masahiko11210/items/3fc862cae4380799c540)の設定でC#で初歩的なプログラミングをしていく。
なお、今回はusingの部分は省略する。
####文字を表示させる
まずC#で文字"Hello"を表示させる。
ソースコードはこちら↓
```namespace ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            string a = "Hello";
            Console.WriteLine(a);```

            Console.ReadKey();
        }
    }
}

実行結果はこんな風↓

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/249333/84442d0b-063c-0a61-f7fa-4f09895bede9.png)


簡単に一行ずつ説明
```string a = "Hello";```
これは文字列aという変数にHelloという文字列を代入するという意味で、文字列は""で囲む。
処理の最後には；をつける。
```Console.WriteLine(a);```
これはaという変数を表示させるというもの。
C言語でいうprintf()と同じ意味合いのものだ。
```Console.ReadKey();```
これは```Console.ReadKey();```がある時点までの結果をコンソールウィンドウに表示させるためのものだ。
これがなければこのプログラムは処理が終わった瞬間結果を見ることなく閉じてしまう。
動体視力に自信があるならこれはいらないかもしれないが凡人の僕には必須のものだ。
言っている意味がよくわからなければ一度上のコードを打った後```Console.ReadKey();```を消してみてほしい。
多分わかるはず。
とにかく結果をすぐに閉じないようにするために```Console.ReadKey();```は必要なのだ。

####四則演算

```namespace ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            int a = 10;
            int b = 20;
            int c = 30;
            int answer = a * b - c;
            Console.WriteLine(answer);```

            Console.ReadKey();
        }
    }
}

これは10x20-30の結果をanswerに代入するというプログラムだ。
プログラムになっても四則計算の優先順位であるかけると割るは優先的に計算され、+と-はそのあとに計算される。
もし+や-を先に計算したければ（）をつければそちらから計算してくれる。
よく使うオプション付き Subversion コマンド (入門者向け)

## -m [--message]

```
svn commit -m[--message] <メッセージ>
```

コミットと同時にコミットメッセージを送れる。いつも使う。
関係無いけど、コミット前には `svn status` と `svn diff` をして、コミットされる内容が自分の意図通りかちゃんと確認しましょう。

## -l [--limit] / -v [--verbose]

```
svn log -l[--limit] <数字> -v[--verbose]
```

`-l` オプションで指定した個数分だけ直近のログが表示される。
`-v` オプションを付けると変更のあったファイルが表示される。
具体的には `svn log -l 5 -v` などとして使う。

## -r [--revision]

```
svn log -r[--revision] ARG1:ARG2
```

`-r` オプションはあらゆる svn コマンドで使用できて、ARG1 < ARG2 で使うことが多いが、
`svn log` の場合、ARG1 < ARG2 で使うと `-r` オプションを使わなかった時と上下が反転してしまう。
`ARG` には日付などいくつか指定できる種類が有るが、私が主に使うのはリビジョン番号と 'HEAD' 。
具体的には `svn log -r HEAD:500` などとして使う。(ただしHEADは501以降と仮定)
もちろん `-v` オプションなどと併用可。

```
svn diff -r[--revision] ARG1:ARG2
```

`svn log` 同様。
ARG1 が旧、ARG2 が新として扱われるので、入れ替えると + と - が入れ替わる。

```
svn merge -r ARG1:ARG2 <ソースブランチ> <ターゲットブランチ>
```

マージするときはターゲットブランチに移動して `svn merge <ソースブランチ>` するのが楽。
リビジョンを指定しなかった場合、ARG1 はそのブランチが作られたリビジョン、ARG2 は HEAD で指定したのと同等。
基本的に指定しなくて良いと思うが、ARG1 はそのブランチが作られたリビジョン、ARG2 にそのブランチが最終更新されたリビジョンを指定しておくと、作業したリビジョン番号を振り返りやすくて良くない？むしろマージされたリビジョン番号を mergeinfo に残しておきたい？一理ある。

ARG1 > ARG2 のリビジョン番号の指定をすると逆マージ( `git revert` に相当？)という過去のリビジョンに戻す操作をできる。
例えば `svn merge -r 1000:995 .` とするとカレントディレクトリに加えられた 996, 997, 998, 999, 1000 のコミットの変更箇所を元に戻せる。内部的にどのような処理になっているのかは知らないが、リバースパッチのようなもの、 `svn diff -r 1000:995 > パッチファイル` でパッチを作って `svn patch パッチファイル` をやっているようなものじゃないかと思ってるので、あまり過信しすぎるのも怖い…かも？

## -c [--change]

```
svn diff -c[--change] <リビジョン番号>
svn log -c[--change] <リビジョン番号>
svn merge -c[--change] <リビジョン番号>
```

`-r` オプションだとリビジョン番号を範囲で指定するが、 `-c` はリビジョン番号を一つだけ指定する。
`svn log -c 1000` は `svn log -r 1000:1000` と同等。
`svn diff -c 1000` は `svn diff -r 999:1000` と同等。
`svn merge -c 1000` は `svn merge -r 999:1000` と同等。
特に `diff` はこのコミットの変更だけ見たいという状況はよくあると思う。そういうときに使う。
また、負の数も指定できる。
`svn diff -c -1000` は `svn diff -r 1000:999` と同等。
`svn merge -c -1000` は `svn merge -r 1000:999` と同等。
そのため、 `diff` は正の値を指定した時と +- が逆に、 `merge` は負の値を指定した場合逆マージになる。
個人的には(会社のルールに従ってください)逆マージを行いたいときは `-r` オプションを使わず、 `-c` オプションを使うことを勧めたい。
コミットするときにワンステップごとに変更したので戻すときもワンステップごとに。一つづつ戻したほうが、何を戻したのがわかりやすいと思う。リビジョンが増えることは大した問題じゃ無いと思う。
Glide v4 の通信ライブラリをOkHttpに置き換えてデバッグログを表示する

## 問題
* 大きいサイズの画像表示が遅いので原因を調べたい。
* Android Profilerで通信部分を確認できるが、通信ライブラリのログで詳細を確認したい。
* Glideの通信ログを出力できないか調べました。

## 解決案
* 通信ライブラリをOkHttpに置き換えてログを出力するように設定。

## 環境
* Android Studio 3.1
* Glide 4.7.1
* OkHttp 3.9.1

## Glideとは
* Androidの画像ライブラリ。サーバ上の画像をアプリに表示することができる
* キャッシュも自動的に保存・管理してくれるので便利
* [公式サイト](http://bumptech.github.io/glide/)

## GlideとOkHttpをインストール
```java:app/build.gradle

def glideVersion = "4.7.1"
implementation "com.github.bumptech.glide:glide:$glideVersion"
annotationProcessor "com.github.bumptech.glide:compiler:$glideVersion"
implementation "com.github.bumptech.glide:okhttp3-integration:$glideVersion"

def okhttpVersion = "3.9.1"
implementation "com.squareup.okhttp3:okhttp:$okhttpVersion"
implementation "com.squareup.okhttp3:logging-interceptor:$okhttpVersion"

```

## Custom Moduleの実装
```java:MyAppGlideModule
@GlideModule
public class MyAppGlideModule extends AppGlideModule {
    @Override
    public void registerComponents(Context context, Glide glide, Registry registry) {
        OkHttpClient.Builder builder = new OkHttpClient.Builder();
        if (BuildConfig.DEBUG) {
            HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor();
            interceptor.setLevel(HttpLoggingInterceptor.Level.BODY);
            builder.addInterceptor(interceptor);
        }
        OkHttpClient client = builder.build();
        registry.replace(GlideUrl.class, InputStream.class, new OkHttpUrlLoader.Factory(client));
    }
}
```

## Glideでの画像読み込み
```java:HogeActivity
GlideApp.with(this).load(imgUrl).into(imageView);
```

## 動作確認
* LogcatにOkHttpのタグで画像URLやサーバとのやりとりが出力されていることが確認できると思います。
* (一度読み込むとキャッシュして通信が発生しないので注意してください）


## 終わりに
* Glideは細かい設定が他にもあるので少しずつ使いこなしていきたいと思います。

## 参考記事
* https://bumptech.github.io/glide/doc/configuration.html#applications
CakePHPで時刻のズレを修正するためにCakePHPやMySQLファイルをいくらいじっても改善されない場合の対処法

## ハマったこと

CakePHPで開発を進めていく中で記事の投稿日時が正しく表示されなかったので、
下記の記事などを参考にconfig/appやconfig/bootstrapをいじりましたが時刻のズレは改善されませんでした。

参考記事：[CakePHP3のタイムゾーンを協定世界時UTCから日本標準時間JSTにずれを変更する方法](https://blog.s-giken.net/346.html)

## 環境
+ CentOS
+ Vagrant
+ CakePHP3.6
+ MySQL

## 原因

<b>OS内部の時刻設定が正しく設定されていなかったこと</b>が原因でした。

試しに下記のコマンドを打ち込んでみると確かに時刻が大幅にずれていました。

```unix
$ date
```

根本となる時刻がずれていたのでいくらCakePHPやMySQLの設定をいじってみても意味がなかったのですね。

## 解決策

CentOSの時刻を正しく設定することで解決しました。

CentOS内の時刻を手動で合わせることで対応することも可能なのですが、この方法だと時間が経過するとまた時刻がずれてきてしまいます。

そこでNTPの日本標準時刻とCentOS内の時刻を常に同期させることで対応しました。

※「NTP」とは「Network Time Protocol」の略で、ネットワークを介してコンピュータ内部の時刻（システムクロック）を正しく同期させるための仕組みのことです。
参考記事：[NTPとは？ NTPの仕組み含めておおまかに解説](https://eng-entrance.com/what-is-ntp)

以下にNTPとの同期設定の方法を記述します。（下記設定は全てroot権限での設定となります。）

### 1.NTPをインストールする
```unix
$ yum install ntp
```

### 2.時刻を合わせる
```unix
$ ntpdate ntp.nict.jp
```
こちらの`ntp.nict.jp`は日本標準時刻に直結しています。

### 3.ntp.confの編集
`/etc/ntp.conf`を以下の通りに変更します。

`変更前`

```unix
server 0.centos.pool.ntp.org iburst
server 1.centos.pool.ntp.org iburst
server 2.centos.pool.ntp.org iburst
server 3.centos.pool.ntp.org iburst
```

`変更後`

```unix
server -4 ntp.nict.jp
server -4 ntp1.jst.mfeed.ad.jp
server -4 ntp2.jst.mfeed.ad.jp
server -4 ntp3.jst.mfeed.ad.jp
```

### 4.ntpdの起動
```unix
$ service ntpd start
```
NTPのデーモンを起動します。
※デーモンとはUNIX系OSの常駐プログラムのことです。

```unix
$ chkconfig ntpd on
```
次回サーバー起動時より自動でNTPデーモンを起動するように設定します。

### 5.日時の確認

```unix
$ date
```

日時が現在時刻となっていればOKです。
私はこの段階で現在時刻が正常に表示されました。
gtags/global インストール メモ

ctagsを入れる

```
sudo apt install exuberant-ctags -y
```

pygmentsを入れる

```
python -m pip install pygments
```

globalを入れる

```
sudo apt install global -y
```

globalのバージョンを確認する

```
global --version
```

```:出力
global - GNU GLOBAL 5.7.1
```

5以下なら6をビルドする
[ここ](http://www.gnu.org/software/global/download.html)から最新のglobalを落とす

```
wget http://tamacom.com/global/global-6.6.2.tar.gz #現在
```

展開

```
tar zxvf global-6.6.2.tar.gz
```

ビルド

```
cd global-6.6.2/
./configure --prefix=/usr/local # 失敗するので実行せず次へ進んでください
```

```:出力
...
configure: error: curses library is required but not found.
If you are not going to use gtags-cscope, please try ./configure --disable-gtagscscope
```

cursesを入れる

```
sudo apt install libncurses5-dev -y
```

再ビルド

```
./configure --prefix=/usr/local
```

成功したので続ける

```
make
make install # 失敗するので実行せず次へ進んでください
```

```:出力
...
/bin/mkdir: cannot create directory ‘/usr/local/bin/share’: Permission denied
...
```

sudo必要らしい

```
sudo make install
```

成功したっぽいので確認

```
which gtags
```

```:出力
/usr/local/bin/gtags
```

```
gtags --version
```

```:出力
gtags (GNU GLOBAL) 6.6.2
Copyright (c) 1996-2017 Tama Communications Corporation
License GPLv3+: GNU GPL version 3 or later <http://www.gnu.org/licenses/gpl.html>
This is free software; you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
```

```
global --version
```

まだ古いバージョンなら一度削除し、`global/global`を`/usr/local/bin/global`にコピーする。

gtagsにpygmentsを呼び出す設定をする
設定ファイルであるglobal.confがビルドしたディレクトリにある
それを`~/.globalrc`にコピーする

```
cp -a gtags.conf ~/.globalrc
```

編集する

```
vim ~/.globalrc
```

defaultでビルトインパーサでパースできる言語のコードはビルトインパーサでパースし、そうでなかった言語のコードはpygmentsでパースするように設定する

```:編集前
default:\
    :tc=native:
```

```:編集後
default:\
    :tc=native:tc=pygments:
```

ビルトインパーサの設定を変更し、.hファイルをcではなくcppとしてパースするようにする（ 参考: https://qiita.com/ochachalton/items/aa245cdcec0078823462 )

```:編集前
gtags:\
    :tc=common:\
    :tc=builtin-parser:
builtin-parser:\
    :langmap=c\:.c.h,yacc\:.y,asm\:.s.S,java\:.java,cpp\:.c++.cc.hh.cpp.cxx.hxx.hpp.C.H,php\:.php.php3.phtml:
```

```:編集後
gtags:\
    :tc=common:\
    :tc=builtin-parser:
builtin-parser:\
    :langmap=c\:.c,yacc\:.y,asm\:.s.S,java\:.java,cpp\:.c++.cc.hh.cpp.cxx.hxx.hpp.C.H.h,php\:.php.php3.phtml:
```

vimプラグインを入れる
hook_addのところは適宜

```
[[plugins]]
repo = 'lighttiger2505/gtags.vim'
hook_add = '''
    " Options
    let g:Gtags_Auto_Map = 0
    let g:Gtags_OpenQuickfixWindow = 1
    " Keymap
    nnoremap <C-j> :GtagsCursor<CR>
    nnoremap <C-r> :<C-u>exe("Gtags -r ".expand('<cword>'))<CR>
'''
```