OmniAICreator/Qiita-1.07M huggingface dataset:
elasticsearch+kibana、Fluentdから使用用途でインストールしてみた

##はじめに
Fluentdをインストールしてみたときに、elasticsearch、kibanaもインストール
https://qiita.com/ijimakenta/items/1794cfe193d1a4755258

##環境
- CentOS7

##インストール
###openjdkインストール

```
yum install -y java-1.8.0-openjdk
```

###elasticsearch, kibanaインストール
参考
https://www.elastic.co/guide/en/elasticsearch/reference/current/rpm.html


```
# 公開鍵インポート
rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch

# レポジトリ登録
cat <<'EOT' > /etc/yum.repos.d/elasticsearch.repo
[elasticsearch-6.x]
name=Elasticsearch repository for 6.x packages
baseurl=https://artifacts.elastic.co/packages/6.x/yum
gpgcheck=1
gpgkey=https://artifacts.elastic.co/GPG-KEY-elasticsearch
enabled=1
autorefresh=1
type=rpm-md
EOT

# インストール
yum install elasticsearch kibana

# 自動起動
systemctl enable elasticsearch kibana
```

##設定
とりあえず、0.0.0.0でLISTEN

```
diff elasticsearch.yml elasticsearch.yml_org  | grep "^<"
< network.host: 0.0.0.0
```

###kibanaログ設定
デフォルトだと/var/log/messagesに出力されてしまうので、きれいにする

```
cat <<'EOT' > /etc/rsyslog.d/kibana.conf
:programname, isequal, "kibana" -/var/log/kibana.log
& stop
EOT
systemctl restart rsyslog &&\
sed -i '1i\/var\/log\/kibana.log' /etc/logrotate.d/syslog
```

##インデックス削除スクリプト
インデクスが肥大化していくみたいなので、自動削除スクリプトを以下サイト参考に作成
http://y-ken.hatenablog.com/entry/elasticsearch-delete-index-with-one-liners

```
#!/bin/bash

index_rotate_day=3
index[0]=$(date +apache.access-%Y.%m.%d --date "$index_rotate_day days ago")
index[1]=$(date +apache.error-%Y.%m.%d --date "$index_rotate_day days ago")
index[2]=$(date +postfix.maillog-%Y.%m.%d --date "$index_rotate_day days ago")

logdir=/usr/local/bin/del_elasticsearch_index/log
logfile=del_elasticsearch_index-$(date "+%Y%m%d").log
log_rotate_day=+31

{
find ${logdir} -name 'del_elasticsearch_index*' -mtime "$log_rotate_day" -exec rm -vf {} \;

for ((i=0; i < ${#index[@]}; i++))
do
  curl -XDELETE -w'\n' http://localhost:9200/"${index[$i]}"
done

} 2>&1 | awk '{print strftime("%Y-%m-%d %H:%M:%S "),$0 } { fflush() } ' | tee -a "$logdir/$logfile"
```
JSXはHTMLと記法がちょいと違う

jsxはhtmlとおんなじ記法ができるけど、ちょっとだけ違うよってとこを勉強したのでおさらい

○最上位の要素
　　jsxでは、最上位に複数の要素を並列で配置できない。

例）```html:abc.rb
   
ReactDOM.render(
  <h1>Hello, world!</h1>
  <h2>texttext</h2>,
  document.getElementById('app')
);
  ```

とすることはできない。
この場合、最上位にdivなどの要素を配置し、要素の内側に並列で配置

```html:abc.rb

ReactDOM.render(
  <div>
    <h1>Hello, world!</h1>
    <h2>texttext</h2>
  </div>,
  document.getElementById('app')
);```

○空要素
　空要素の末尾には/が必要

○class属性
　HTMLのclass属性はそのまま使えない
　className属性として記述しよう

○value属性
　　ラジオボタン、チェックボックスでcheckedを付与すると、チェックが変更できなくなってしまう。
　　値を変更したい時はcheckedの代わりにdefaultCheckedという属性を使う。
PHPビルトインサーバの起動と配列について

備忘録です



```:phpビルトインサーバの起動
php -S 192.168.33.10:8000
```

```php:hairetu.php

<?php

$table =array();
$table =[ 
 ['student_id'=>1001, 'name'=>'yamada'   ,'sex'=>'m'],
 ['student_id'=>1002, 'name'=>'sato'     ,'sex'=>'f'],
 ['student_id'=>1003, 'name'=>'suzuki'   ,'sex'=>'m'],
 ['student_id'=>1004, 'name'=>'katou'    ,'sex'=>'f'],
 ['student_id'=>1005, 'name'=>'shimura'  ,'sex'=>'m'],
 ['student_id'=>1006, 'name'=>'ikariya'  ,'sex'=>'m'],
];
?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="0" align=left>
    <tr> <th colspan =3>tbl_m_student</th></tr> 
    <tr>
        <th>student_id</th>
        <th>name</th>
        <th>sex</th>
    </tr>
    
    <?php foreach($table as $row): ?>
    <tr>

        <?php foreach($row as $cel):?>
        <td>
        <?php print $cel;  ?>
        </td>
        <?php endforeach; ?>
        
    </tr>
    <?php endforeach; ?>
</table>

</body>
</html>
?>
```
```php:hairetu2.php

<?php
$array =array();
$array[] = array('student_id'=>1001, 'name'=>'yamada'   ,'sex'=>'m');
$array[] = array('student_id'=>1002, 'name'=>'sato'     ,'sex'=>'f');
$array[] = array('student_id'=>1003, 'name'=>'suzuki'   ,'sex'=>'m');
$array[] = array('student_id'=>1004, 'name'=>'katou'    ,'sex'=>'f');
$array[] = array('student_id'=>1005, 'name'=>'shimura'  ,'sex'=>'m');
$array[] = array('student_id'=>1006, 'name'=>'ikariya'  ,'sex'=>'m');

$count = count($array);
echo $count ."<br />";

for ($i=0; $i < $count ; $i++) { 
    print "student_id".$array[$i]["student_id"]."は". 
    $array[$i]["name"]."(".$array[$i]["sex"].")<br />"; 
}

foreach ($array as $a) { 
    echo $a['student_id']."<br />"; 
    echo $a['name']."<br />"; 
}
?>
```
SWI-Prolog の http クライアントの使い方 (Get)

```text:http_get.pl
/* ------------------------------------------------------------------- */
/*
	http_get.pl

						Feb/28/2020
*/
/* ------------------------------------------------------------------- */
:- use_module(library(http/http_open)).

:- initialization main.
main() :-
	format('*** 開始 ***\n'),
	Url_in = 'https://httpbin.org/get',
	http_open(Url_in, In, []),
	copy_stream_data(In,user_output),
	close(In),
	format('*** 終了 ***\n'),
	halt.
/* ------------------------------------------------------------------- */
```

実行結果

```text
$ swipl -f ./http_get.pl
*** 開始 ***
{
  "args": {}, 
  "headers": {
    "Host": "httpbin.org", 
    "User-Agent": "SWI-Prolog", 
    "X-Amzn-Trace-Id": "Root=1-5e58b488-4687f8c67b3200f25fe2155c"
  }, 
  "origin": "153.233.38.78", 
  "url": "https://httpbin.org/get"
}
*** 終了 ***
```

## 確認したバージョン

```text
$ swipl --version
SWI-Prolog version 9.0.4 for x86_64-linux
```
Cognos のレポートを改善するためのヒントをさりげなく教えてくれる機能

#レポート改善のヒント機能
最近、へえ～知らんかったと思った機能を紹介します。

以前投稿した、マスター詳細の機能を使ったレポートで、クエリーの結果をキャッシュにのせる事が大事と記載していましたが、この記事の「マスター詳細のチューニング②」を行った際に、これをきっちりキャッシュにのせて利用するための設定を、例にとって紹介します。
**Cognos Analytics でのマスター詳細を使用したレポートのチューニング**
https://qiita.com/shinyama/items/e45ee948139bbf675122

こんな風にマスター詳細の実装をしているレポートです。
![001.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/7b458bd3-9e11-a39a-7a8b-23f3d8b417d2.jpeg)

レポートを実行すると、正常に実行され結果も表示されるので、特に致命的な問題を抱えているレポートではありません。
![002.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/7f0d522a-870e-8e98-6913-aff8562e6e1f.jpeg)

良く使う、この「レポート」の画面で「今すぐ検証」をやると、この通り「このレポート仕様は有効です。」と、レポート構造にエラーが無いかチェックしてくれるのは皆様ご存知だと思います。
![003.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/21138d6c-b60a-4ac8-b968-689f94dcf993.jpeg)

この「今すぐ検証」の機能ですが、オプションを検証というプロパティから、こんな風に「重要な変換」に変更すると、そこはかとなくレポート改善のヒントをくれたりします。
![004.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/b4c9c298-df6c-0bd1-d341-23e12332c5db.jpeg)

早速オプションを変更し、「今すぐ検証」してみると、こんな表示になりました。
![005.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/091d3c84-0150-be45-c3b4-9fe9fd7904c0.jpeg)

「そこはかとなく」と言っているのはこういう所で、全部Informationのレベルなので、何が対応すべき項目なのかわかりません。
そこはもう、中身を読んで考えるしかないのですが、例えばこの上から二番目のメッセージです。
![006.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/e87cc1e7-2f97-0d0b-7f34-50dbe2dac4eb.jpeg)

この様に、マスター詳細に関わっているクエリーのプロパティで、「自動グループ化および集計」が「いいえ」になっていては、マスター詳細でキャッシュにのせる機能は使えないよ、と実は言われています。
![007.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/625293d8-c9da-1673-0b3f-9c3daa4f1025.jpeg)

「自動グループ化および集計」を「はい」にして、再度検証すると、先ほどのメッセージは消えたので、他に問題が無いか探します。
![008.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/69d17c3d-16eb-4e9e-6e34-153cbb3d94be.jpeg)

お次はこれですね、マスター詳細の最適化のためには、射影されている必要がある、と言っています。
![009.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/e9bf8c01-bb4c-de0a-a260-7b7104b78658.jpeg)

何の事でしょう。リストの入れ子を見てみると、子のリストは「製品ライン」「数量」で、クエリーの中には「年」を持っていますが、ここには「年」が配置されていないのが「射影されていない」という事なのか。
![010.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/e9480061-b82b-6dd2-dd19-9a7cb44f5802.jpeg)

という訳で「年」を子のリストにも置いて。
![011.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/31aad6b3-dab0-ce9e-57cf-e76bedc08244.jpeg)

「年」の列ごと「ボックスのタイプ」を「なし」に設定して、非表示にします。
![012.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/5643451e-5cb5-e8d6-0d50-90225954ffc2.jpeg)

見た目は同じになりました。
![013.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/c994e424-98e0-5e34-2996-eb29455a25fa.jpeg)

これで再度「今すぐ検証」すると、ばっちりです、問題のメッセージがなくなりました。
![014.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/0a05217e-4a35-9eeb-8fc9-1ebff7d2774b.jpeg)

これで漸く、マスター詳細の最適化の機能がしっかり使えるようになったようです。
もちろんマスター詳細以外にも、思わぬヒントをくれる時がありますので、いつもの見慣れたレポートでも、暇な時に「重要な変換」で検証してみましょう。
PHP/Laravelで画像がアップロードできない不具合

PHP/Laravelで画像がアップロードできない不具合の対処について以下に示す。

#TL;DR
php.iniの`upload_max_filesize`の上限サイズを変更する。

# 実装環境

- PHP 7.2.6
- Laravel 5.5.40
- CentOS 7

## 動作環境

- iPhone8
- iOS11.4


# 発生した問題

以下のような実装で画像ファイルのアップロードを行う際に画像ファイルがアップロードできない不具合が発生していた。

```html
<form role="form" method="POST" action="{{ url('/image_converter') }}">
    <input type="file" accept="image/*" name="image">
    <input type="submit" value="送信する">
</form>
```

```php5
<?php

public function imageConverter($request) 
{
    $request = request->all();
    if (!empty($request['image']) {
        $imagick = new \Imagick();
        $imagick->readImage(realpath($request['image']));
        $imagick->autoOrient();
        $imagick->setImageFormat('jpg');
        $path = publicpath('/images/test.jpg');
        $imagick->writeImage($path);
    }
}
```


## 実行結果

以下のようなエラーが発生した

```
"message": "The path is a directory: /app/public",
"exception": "ImagickException",
```

更にアップロードされた画像ファイルの情報を確認すると、以下のような情報が確認できた


```
originalName: image.jpg
mimeType: application/octet-stream
size: 0
error 1
path: ""
basename: ""
pathname: ""
exception: ""
realpath: "/app/public"
```

## 原因

- php.iniのupload_max_filesizeが2Mになっていた(デフォルト設定)

    PC環境だと画像のサイズが2Mを超えないため、あまり関係はないが、スマホ(iPhone)だと撮った写真のサイズが2M以上超えることが多々あるため、デフォルトの設定では上記の情報のようにファイルが`application/octet-stream`になってしまう。

## 解決方法

php.iniのファイルの`upload_max_filesize`を変更する

```php.ini
; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
; ここのfilesizeを2M以上に変更する
upload_max_filesize = 2M
```
php.iniを変更したため、以下のコマンドを実行する

apacheの再起動

```
$ service httpd restart
```

php-fpmの再起動

```
$ service php-fpm restart
```
CarthageでライブラリをビルドしたらModule compiled with Swift 4.1.2 cannot be imported by the Swift 4.2 compilerというエラーが出た。

#この記事について
Xcode10とXcode9.4.1を使い分けつつ、Carthageを使ってライブラリをビルドしていたら以下のようなエラーが出た。その時の対処法のメモ。

```
Module compiled with Swift 4.1.2 cannot be imported by the Swift 4.2 compiler....
```

##原因
TargetのBuild SettingsでSwift Language Versionを確認すると4.2となっているので、プロジェクト自体はSwift4.2でコンパイルされている模様。しかし、Command Line Toolsを確認すると、Xcode9.4.1となっており、Swift4.1.2でBuildされていた。
すなわち、**ターミナルからライブラリをCarthageでBuildしたときに、Swift 4.1.2のモジュールでBuildしてしまっていた**のが原因だった。

##解決法
1. Xcode > Preference > Locationsを開きCommand Line Toolsから、Xcode10を選択。
<img width="802" alt="スクリーンショット 2018-10-15 20.31.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/241550/6039e224-bad2-4892-fc03-e2133779f227.png">

2. この状態で、ターミナル上で以下をもう一度実行

```bash
$ carthage update --platform iOS
```

3.再びプロジェクトをビルドしたら無事に成功した。


##まとめ
複数のSwiftのバージョンが切り替わりうる環境で開発しているときは、**プロジェクトBuild用のSwiftのバージョン**と**Command Line ToolsのSwiftのバージョン**が違う状態でライブラリをインポートしないように気をつける。
Docker入門　Automated-buildを設定する

##コンテナのシェル接続
Automated-buildとは関係無いが、とりあえずメモメモ

###attach

```
$ docker attach <コンテナ名orId>
```
コンテナでシェルを実行している時のみに有効

###exec

```
$ docker exec -it  <コンテナ名orId> /bin/bash
``` 
`/bin/bash`ここはフレキシブルに別のシェルでも大丈夫


###そんでattachとexecの違いは何なん?
- attachの場合
抜けるときは、`cont+P cont+Q`で抜けないと、Forgroundで実行したい場合もコンテナが終了してしまう。

```
##attachで接続し、exitで抜ける
$ docker　attach connect-test
root@c4ed66515939:/# 
root@c4ed66515939:/# exit
exit

##Exitedでコンテナが終了状態に
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                           PORTS               NAMES
c4ed66515939        ubuntu              "/bin/bash"         2 minutes ago       Exited (0) 6 seconds ago                             connect-test
```

- Execの場合
`exit`でOK!!

```
##execで接続し、exitで抜ける
$ docker exec -it connect-test /bin/bash
root@c4ed66515939:/#
root@c4ed66515939:/# exit
exit 

##コンテナが起動中であることを確認
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS                           PORTS               NAMES
c4ed66515939        ubuntu              "/bin/bash"         3 minutes ago       Up 13 seconds                                        connect-test
```

##コンテナからイメージ作成
こちらもまたAutomated-buildとは関係ない

```
docker commit コンテナ名　イメージ：タグ
```
コンテナの状態をイメージとして保存することができる
この場合、コンテナ内で行われた処理は記録として残らないため通常は`Dockerfile`の方を編集すべき


```
$ docker commit connect-test hoge:latest
sha256:ca6fec94d20b81f576c196934b680da5036dd41b04524ba55d0f788dd83122fd

$ docker images
REPOSITORY                      TAG                 IMAGE ID            CREATED             SIZE
hoge                            latest              ca6fec94d20b        16 seconds ago      84.1MB
```


##Automated-buildを設定する
いよいよAutomated-buildを設定していきます。

[Docker Hub](https://hub.docker.com) へ移動しHeaderの入っている`Create`から`Create Automated Build`を選択

<img width="1440" alt="スクリーンショット 2018-10-15 17.53.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/253092/14ca54dc-7c8b-6321-9d47-70d66d87fa01.png">

何を使うかをもとめられるが今回はGithubを使用するので、Githubを選択する
そして、利用対象のリポジトリを選択して、情報を書き込んでいく。

<img width="1437" alt="スクリーンショット 2018-10-15 18.01.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/253092/6850c9b2-4589-88da-ab31-2a047d3be546.png">


そして、Createを押して設定を完了させる
<img width="1440" alt="スクリーンショット 2018-10-15 20.21.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/253092/6ec20e60-e18e-bbf1-8c2a-58f418c37f64.png">


設定完了です。
これで、Pushするごとに、ビルドしてくれるようになります。

ビルド状況は`Build Details`で確認できます！！

<img width="1438" alt="スクリーンショット 2018-10-15 20.25.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/253092/75850668-2bba-2762-ab53-90aef62ab09d.png">


###まとめ
意外と簡単にAutomated-ｂuildの設定ができちゃいました。
これをどのように使っていくかがむずかしいいんでしょうけど！！
Touch Barに再生中のAmazon Musicの曲名を表示

[お前らのTouch Barはダサい](https://qiita.com/2357gi/items/8235093de77aa3e5fecc)という記事に感化されて[BetterTouchTool (BTT)](https://folivora.ai/)を導入しました。
上の記事ではSpotifyの再生中の曲名を表示していましたが、私はブラウザ版Amazon Music派なのでその曲名を表示させるようにしたいと思います。

#やりたいこと
- Web版Amazon Musicで再生中の曲名を表示するウィジェットを配置
- Amazon Musicを開いていないときにウィジェットをタップするとAmazon Musicを新しいタブで開く

#やってみた
BTTの設定を開いてTouch Barから[+Widget/Gesture]をクリックします。
![Monosnap 2018-10-15 19-45-58.png](https://qiita-image-store.s3.amazonaws.com/0/149212/a166af9d-8894-bea2-9c80-9af20d865105.png)

[Run Apple　Script....]をクリック
<img width="1039" alt="Monosnap 2018-10-15 19-46-56.png" src="https://qiita-image-store.s3.amazonaws.com/0/149212/a1f1ec11-15eb-2598-1377-b6e7e46e3231.png">

適当な名前を[Name]に入力してスクリプトの入力エリアに以下のスクリプトを入力して[Save]をクリックします。[Appearance&Setting]で適当なアイコンもセットしておきます。
![Monosnap 2018-10-15 19-48-54.png](https://qiita-image-store.s3.amazonaws.com/0/149212/3b970366-cae2-3b85-cfa4-4e473abd1fee.png)




```getTitle.applescript
if application "Google Chrome" is running then
	tell application "Google Chrome"
		repeat with w in windows
			set i to 1
			repeat with t in tabs of w
				if URL of t starts with "https://music.amazon.co.jp" then
					set song_title to execute t javascript "document.getElementById('dragonflyTransport').getElementsByClassName('trackTitle')[0].getElementsByTagName('a')[0].getAttribute('title');"
					return song_title
				end if
				set i to i + 1
			end repeat
		end repeat
		return "-"
	end tell
end if
```
これで再生中の曲名が表示されます。
続いてAmazon Musicを開いていない時にウィジェットをタップすると新しいタブでAmazon Musicを開く処理を追加します。


追加したウィジェットの[Predefined Action]から[Run Apple Script(async...]をクリックします。
<img width="1057" alt="Monosnap 2018-10-15 19-49-18.png" src="https://qiita-image-store.s3.amazonaws.com/0/149212/6dd0b76b-8cc5-368a-ba5a-674d415d7abc.png">

スクリプトの入力エリアが表示されるので以下のスクリプトを入力して[Save]をクリックします。
![Monosnap 2018-10-15 19-51-41.png](https://qiita-image-store.s3.amazonaws.com/0/149212/1cc05512-bb18-aebc-768e-503285d11fa3.png)

```launchAM.applescript
tell application "Google Chrome"
	repeat with w in windows
		set i to 1
		repeat with t in tabs of w
			if URL of t starts with "https://music.amazon.co.jp" then
				return
			end if
			set i to i + 1
		end repeat
	end repeat
        do shell script "open -a Google\\ Chrome https://music.amazon.co.jp/home"
	return
end tell
```

#完成!
![ezgif.com-crop.gif](https://qiita-image-store.s3.amazonaws.com/0/149212/75906309-71dc-957c-73b7-7f55ca7ce8f2.gif)
LiquidFunをjavascriptで動かしてみた

LiquidFunはもともとC++で開発されているらしいのですが、
Googleのgithubにjavascript用に変換されたものがあるので、
ダウンロードするだけです。

https://github.com/google/liquidfun
の Clone or download からダウンロードするのではなく（うまく動かない）、
https://github.com/google/liquidfun/releases/
からダウンロードする。

フォルダパスは以下の通り
liquidfun-1.1.0/liquidfun/Box2D/lfjs/index.html

動くサンプル
http://www.uneri.tokyo/javascript/20181015_liquidfun01/index.html

※
http://google.github.io/liquidfun/testbed/index.html
と同じものだと思われます。

参考：
LiquidFunでJavaScript流体シミュレーション.
https://qiita.com/Quramy/items/578efec667267acf6871
API Blueprint の書き方メモ

```apiblueprint
## API名 [/endpoint_name]

### 注文（order）の order を取得 [GET /order/{owner_id}/{?ids,type,period}]
注文（order）を取得

+ Parameters

    + owner_id: 1 (number) - ownerId
    + ids:`1,2,3` (string, require) - IDをカンマ区切りで
    + type:`recently` (string, require) - type 選択
    + period:`2018` (string, optional) - 必須じゃないやつ

+ Request

    + Headers
        Authorization: Bearer {token}

+ Response 200 (application/json)

    + Attributes
        + count:1 (number, require) - 全体のカウント
        + pageNo:1 (number, require) - 現在のページ番号
        + items (array[object], require) - 注文アイテム

    + Body
        {
          "items": [
            {
              "id": 10,
              "name": "order10",
            },
            {
              "id": 15,
              "name": "order15",
            }
          ],
          "count": 3,
          "pageNo": 1
        }

```
データ移行で役立つLinuxコマンドの使い方

## まとめ
- DBからデータをdumpした際に使える
- 手順はtarで圧縮&書庫化をしてみて、まだサイズが大きかったらsplitで分割


## tarコマンドによる圧縮&書庫データ化
DBからdumpしたデータが大きい時によく使う。
圧縮はサイズを小さくし、書庫化は複数ファイルを1つのファイルにまとめることができる。
書庫化&圧縮したファイル名は拡張子を「.tar.gz」にすると分かりやすい。 

### 圧縮

```
tar zcvf {書庫化&圧縮したファイル名} {対象ファイル名}
```

### 解凍

```
tar zxvf {書庫化&圧縮したファイル名}
```

## splitコマンドによる分割
tarでもまだサイズが大きい場合はsplitコマンドで分割する。


### 分割

```
split -b {分割サイズ}MB {分割対象ファイル}. 
```

分割対象ファイルの文末に「.」をつけることで、分割されたファイル名が以下のように連続する。

```
{分割されたファイル名}.aa
{分割されたファイル名}.ab
{分割されたファイル名}.ac
...
```

### 結合
splitは結合には使わず、代わりにcatのリダイレクトを利用する。
なお、分割した順番で結合しないと元どおりにはならないので注意。

```
cat {分割されたファイル名}.a* > {結合後ファイル名}
```
［Swift］円弧の描き方

Swift で円弧を描きたい時、UIBezierPath を使います。

<img width="433" alt="スクリーンショット 2018-10-15 20.17.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/118372/ad23f640-3ce1-4ca3-b84e-7ba1bf8a5c0f.png">




##1. UIViewクラスを作る


```swift:PathDraw.swift

import UIKit

class PathDraw: UIView {
    override func draw(_ rect: CGRect) {
        // 円弧
        let arc = UIBezierPath(arcCenter: CGPoint(x: 150, y: 150), // 円弧の中心
                               radius: 90, // 半径
                               startAngle: CGFloat(Double.pi) * 2 * 10.0 / 360.0, // 開始角度
                               endAngle: CGFloat(Double.pi) * 2 * 350.0 / 360.0, // 終了角度
                               clockwise: true) // trueだと時計回り, falseだと反時計回り
        // 色の指定
        let color = UIColor.white
        color.setStroke()
        // 線幅の指定
        arc.lineWidth = 10
        // パスの角を丸くする
        arc.lineCapStyle = .round
        // 描画する
        arc.stroke()
    }
}
```

###startAngle と endAngle の求め方
3時の方向が0度になる。
直径×円周率×描画したい角度/360度で求めることができる。
サンプルコードでは、10°のからスタートして、350°まで描画している。


##2. ViewController から、1.で作成したPathDrawを呼び出す
```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {

    // 背景のviewをstoryBoardで生成。
    @IBOutlet weak var arcBackgroundView: UIView!
    
    // PathDraw のインスタンスを生成する。
    var pathDrawView = PathDraw()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 描画したいサイズを指定します。
        pathDrawView = PathDraw(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
        // 背景を透明にする。デフォルトは黒色。
        pathDrawView.isOpaque = false
        
        // arcBackgroundView に追加
        arcBackgroundView.addSubview(pathDrawView)
    }
}
```


### (参考)
- [Apple 公式リファレンス UIBezierPath](https://developer.apple.com/documentation/uikit/uibezierpath)

- [[Swift] UIBezierPathを使って円弧を描画する](http://tokyo.supersoftware.co.jp/technology/7985)


- [[iPhone] iOSアプリで図形を描画するにはUIBezierPathを使う](https://i-app-tec.com/ios/uibezierpath.html)


- [【Swift】120°は何ラジアン？（角度から弧度を計算する）](https://qiita.com/chino_tweet/items/e0d574a05d1ab96ff732)
PowerApps GameDev#2 指定したレコード数のデータセットを作成し、古いデータから消していく方法

# 本日のゴール
こんなことができるようにする

![scoreanime.gif](https://qiita-image-store.s3.amazonaws.com/0/269159/e9c883f2-86d2-abcb-83ee-5b309402a95c.gif)

# 何のために使うの？
予め次の処理パターンを生成しておくとか、ゲームに必要なフラグ管理テーブルみたいな感じで作ることができます。

# 早速作成開始！

## 一時的なデータセットの作り方
Collect関数を使います！
先ほどのアニメーションのデータセットだと以下のように書きます。

```
Collect(Data,{param:RoundDown((Rand()*255),0)});
```

## 古いデータを消すにはどうすればいいのか
Count関数とRemove関数、そしてFirst関数を使用します。

- Countはそのデータソースに何件のデータが入っているかを返します。
- Removeは指定したデータソースの指定した行を削除します。
- Firstは指定したデータソースの最初の行を返します。

というわけで、10行のデータを格納し、古いデータは順次消す場合は
以下のコマンドになります。

```
If(Count(Data) > 10,Remove(Data,First(Data)),"")
```
Railsを起動でUnicornのpidが原因で起きたエラーの対処法

### ①Rails 起動でエラーになった
AWSでWebアプリケーションを公開した時にハマったエラーについて、備忘録として記します。

railsを
unicorn_rails -c config/unicorn.rb -E production
で起動させてもすぐにコマンドが終了してしまい、起動しませんでした。

###②エラーの内容を探る

less log/unicorn.stderr.log
でエラーの内容を見てたところ、

`pid=': Already running on PID:30364 (or pid=/var/
www/xxxxxx/tmp/pids/unicorn.pid is stale) (ArgumentError)

この辺でエラーになっているようです。

###③プロセスの確認

grepを使って特定のプロセス（ここでは、unicorn）を確認します

ps aux | grep unicorn
でプロセスを出して、

ec2-user xxxxx

ここのxxxxの番号のどれかのプロセスが不要に残ってしまっていて、悪影響が出ていたようです。

###④プロセスの削除
kill -9 xxxx
で、削除ができ、
unicorn_rails -c config/unicorn.rb -E production
もできるようになりました！！！
logrotate(copytruncate)した後のファイルをfindする場合の注意点

#何があったか
ログのローテートを行ったあと、ログの転送を行うファイルを絞り込むために`find`コマンドに`-mtime`オプションを付けて使用していた。
そして、とある事情によって、`logrotate`のオプションから`copytruncate`を取り除いたことによってファイルを想定通りに絞り込めなくなったという現象が発生した。

#どう解決したか
`-mtime`ではなく`-ctime`を使う（`-mmin`も同様で、`-cmin`に置き換える）

#なぜ？
`coprytruncate`によって作られるファイルは**最終内容更新日時がログローテート実行時の日時**になる。
反対に上記のオプションがない場合は、ソースとなるファイルの最終内容更新日時が引き継がれる。

ログローテートの実行ログにも`renaming /tmp/log/httpd/access_log to /tmp/log/httpd/access_log.1`と出力されるように、リネームが行われているからだった。

# 参考URL
https://linuxjm.osdn.jp/html/GNU_findutils/man1/find.1.html
※用語は上記ページに合わせました

# 備考
ちなみに`copytruncate`の有無にかかわらず、**最終ステータス変更日時はログローテート実行時の日時**になるので、`-ctime`や`-cmin`を使ったほうが安全な気がする。
新規React-nativeプロジェクトのビルドが失敗した時の対処法

## 概要
XCode 10で`react-native init`で作成したプロジェクトで`react-native run-ios`を実行した際、色々と詰まったので、その対処法メモ

## 実行環境
- XCode 10.0
- React Native 55.4

## はじめに
###XCodeを最低一度起動しておく
XCodeをダウンロードした直後、またはアップデートした直後である場合、XCode起動時に必要な処理が行われるので、一度実行しておく

## 出てきたエラーとその対処法
### ":CFBundleIdentifier", Does Not Exist
最初に`react-native run-ios`を起動した時、下記エラーが表示された

```
Installing build/Build/Products/Debug-iphonesimulator/react-native-test.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=22):
Failed to install the requested application
The bundle identifier of the application could not be determined.
Ensure that the application's Info.plist contains a value for CFBundleIdentifier.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/react-native-ble-test.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
```

このエラーが出た場合、プロジェクトをXCodeで開いてBuild Locationを設定する必要がある

#### 対処法
- `ios`ディレクトリに入っている`<プロジェクト名>.xcodeproj`をXCodeで開く
- `Menu > File > Project Settings... `を選択
- `Advanced...` を選択
- `Custom`にチェックをして、すぐ横のドロップダウンから`Relative to workspace` を選択
- `Done`を選択

__*追記:__ 上記手順後、XCodeを再起動すれば改善されたというコメントを頂きました

### fatal error: 'config.h' file not found
再度ビルドを試みた際、`config.h`が見つからないと表示された

```
#include "config.h"           // to figure out pthreads support
         ^~~~~~~~~~
```

####対処法
このエラーが出た場合、`react-native`ディレクトリの中の`glog`の`configure`を起動すれば`config.h`が生成される

\* `configure`を起動するのは`glog`フォルダの中である必要がある
\** glogの位置はReact-Nativeのバージョン、または実行環境によって異なる場合がある。
\*** __追記:__ `glog`が見つからない場合、`node_modules/react-native/scripts/`内にある`./ios-install-third-party.sh`を起動すると`third-party`フォルダが作成され、その中に`glog`フォルダが作成される

```sh
$ cd node_modules/react-native/third-party/glog-0.3.4/
$ ./configure
$ cd ../../../..
```

この手順の後、再度ビルドを試みる


### error: Build input file cannot be found: 'libfishhook.a'


このエラーが出た場合、`libfishhook.a`ファイルを再生成する必要がある。

- `ios`ディレクトリに入っている`<プロジェクト名>.xcodeproj`をXCodeで開く
- XCodeにて、`Libraries`ディレクトリにある`RCTWebSocket.xcodeproj`を選択する
- 上部メニューにある`Build Phases`を開く
- `Link Binary with Libraries`を選択
- `libfishhook.a`が表示されている場合、選択して、下部に表示されてる`-`を押して削除する
- 下部に表示されてる`+`を選択して`libfishhook.a`を選択して`Add`

場所がわからない場合、[この画像](https://github.com/facebook/react-native/issues/19569#issuecomment-394869470)を参照

## 参考
- [React Nativeでinit直後の`Print: Entry, ":CFBundleIdentifier", Does Not Exist`を直した](https://qiita.com/gki/items/ad5bb0af398bfea438ff)
- [Xcode 10 libfishhook.a cannot be found](https://github.com/facebook/react-native/issues/19569#issuecomment-394869470)
高みを目指すエンジニアなら知っておきたい○○性リスト

知ってるライブラリの数や理解を深めるのもいいですが、性質をいくつ理解しているかもエンジニア知識の醍醐味だったりします。

以下をずらっと見て ( プログラミング、設計、データベース、ネットワーク、運用、品質、セキュリティ)どれに当たるかピンと来るかチェックしてみると良いかもしれないです。
一番好きな性質は、冪等性(べきとうせい)です。

#リスト
順でたらめ。

- 冪等性
- 可読性
- 拡張性
- 集約性
- 分散性
- 参照透過性
- 整合性
- 原子性
- 一貫性
- ネットワーク分断への耐性
- 独立性
- 永続性
- 機能性
- 信頼性
- 使用性
- 効率性
- 保守性
- 移植性
- 障害抑制性
- 運用性
- 可用性
- 互換性
- 多態性(ポリモーフィズム)
- 総称性(ジェネリック性)
- 堅牢性
- 一意性
- 再帰性
- 成熟性
- 耐障害性
- 回復性
- ネットワーク外部性
- 機密性
- 完全性
- 再現性
- 生産性
- 追跡可能性
- 真正性
- 過失許容性
- 正当性
- 秘匿性
- 安全性
- 原像計算困難性/一方向性
- 衝突困難性
- 脆弱性
- メッセージ完全性
- 否認不可能性
- 解釈性


#参考
ロスト

お気に入りは見つかりましたか？
気が向いたら英名、説明、カテゴリ分け、追記・編集・修正します。追加編集歓迎します。
Python3系でpip install PILが使えない

#pip install PILが使えなかったので備忘録です。
python2系だとpip install PILが使えるようなのですが、python3系だと使えないみたいです。

なのでpip install pillowを使って入れましょう

参考url
https://librabuch.jp/blog/2013/05/python_pillow_pil/
yumでインストールしたApacheのsystemd設定内容

## 環境
- CentOS7

## 内容
```
[Unit]
Description=The Apache HTTP Server
After=network.target remote-fs.target nss-lookup.target
Documentation=man:httpd(8)
Documentation=man:apachectl(8)

[Service]
Type=notify
EnvironmentFile=/etc/sysconfig/httpd
ExecStart=/usr/sbin/httpd $OPTIONS -DFOREGROUND
ExecReload=/usr/sbin/httpd $OPTIONS -k graceful
ExecStop=/bin/kill -WINCH ${MAINPID}
# We want systemd to give httpd some time to finish gracefully, but still want
# it to kill httpd after TimeoutStopSec if something went wrong during the
# graceful stop. Normally, Systemd sends SIGTERM signal right after the
# ExecStop, which would kill httpd. We are sending useless SIGCONT here to give
# httpd time to finish.
KillSignal=SIGCONT
PrivateTmp=true

[Install]
WantedBy=multi-user.target
```

ExecStop=/bin/kill -WINCH ${MAINPID}
となっています。

stopがデフォルトだと「-WINCH」でgraceful-stopになっています。
用途に応じて「-TERM」などに変更すればよいです。

https://httpd.apache.org/docs/2.4/ja/stopping.html
htmlでフォーム作成と作成したフォームから値を受け取る

こんばんは！

本日２回目の投稿です。

今回もPHPに関しての投稿です。

htmlでフォームを作りました

![2018-10-15 (4).png](https://qiita-image-store.s3.amazonaws.com/0/200171/0a6300ad-eb7a-943b-20b4-3800d145bf86.png)

こんな感じに作成しました。

フォームの解説をしていきます。

まず、このフォームでは整数型（integer）の数字を入力し

送信したときに、相手方に数字がPOSTされます。

PHPで使っているスーパーグローバル変数は、POSTです。

GETは使っていません。

GETに関しても記事を後程書きたいと思います。

さて、サーバーサイドのPHP側ではどのようになっているかを見ていきましょう。

![2018-10-15 (5).png](https://qiita-image-store.s3.amazonaws.com/0/200171/44b5f7bd-f3ad-e123-90ec-c9aad8fe1de2.png)

本来のfor文の書き方とは変えて特殊な形にしました。

これだとdo~while文でもいいかもしれないのでは

というお声も出てきそうな気がしますがfor文が使い勝手が良かったので

変則的な使い方をしました。

※本来はこのような形では使いません。

作ったフォームと受け取ったデータがどのようになっているかのキャプチャを見ていきましょう。

![2018-10-15 (6).png](https://qiita-image-store.s3.amazonaws.com/0/200171/cafab152-07e3-fe59-b9da-ca61c621a201.png)

こんな感じですね。
左上にちょこんとフォームがあるだけです。

ほかの実装は何も行っていません。

ここで値を受け取った画面がどうなっているかのキャプチャになります。
![2018-10-15 (8).png](https://qiita-image-store.s3.amazonaws.com/0/200171/67a8a361-4c88-99d9-e99a-84e8429976cd.png)

任意の数字を入れたら、その数字から２９までが出るような

形になっています。

文字（String）型とかは入れても何も起きませんので

整数型のみでしか動かないような形にしております。

またクッキーやセッションも使っていないので

クッキーやセッションを使ったらどうなるか

っていうのも今後、書く予定です。
[Haskell] 爆速でモナドを理解する

何番煎じか分かりませんが、爆速でモナドを説明します。比喩は使いません。
モナドのコンセプトはこの記事の半分ほどで説明し終わるので、残りはオマケです。

＊Maybe, State, List, IO など、具体的なモナドの使い方は一切説明していません。
この記事で説明しているのは「モナドとは何か」だけです。
モナドを使いこなせるようになるためには、他の記事をあたって**様々なモナドの使い方をひとつずつ覚えていく**ほかありません。

# 関数の結合
モナドの説明に入る前に、まず関数結合の演算子を定義しましょう

```hs:ghci
GHCi> import Data.Function(flip)
GHCi> let (>.>) = flip (.)

GHCi> :t (>.>) = flip (.)
(>.>) :: (a -> b) -> (b -> c) -> (a -> c)

GHCi> let showSqrt = sqrt >.> show

GHCi> showSqrt 2
"1.4142135623730951"
```

この演算子は、(.)演算子の引数の順番を逆にしただけです。

さて、この演算子について以下の3つの式が常に成り立ちます（**重要**）

1. `id >.> f` ≡ `f` （idの左単位性）
2. `f >.> id` ≡ `f` （idの右単位性）
3. `(f >.> g) >.> h` ≡ `f >.> (g >.> h)` （結合則）

# 型コンストラクタ付きの関数の結合
世の中には**戻り値が型コンストラクタに包まれていても普通の関数と同じように結合できる**場合があります。

そのような関数の結合演算子は既に定義されていて、Control.Monad にある `(>=>)` という演算子です。

|   | 普通の関数結合                    | 型コンストラクタ付き関数結合 |
|:-:|:-------------------------------:|:----------------------:|
|演算子| >.> | >=> |
|型 | (a -> b) -> (b -> c) -> (a -> c)|(a -> **m** b) -> (b -> **m** c) -> (a -> **m** c)|

m が型コンストラクタです。

このような関数結合演算子にも**普通の関数結合で見られたような3つの式が成り立っている**ことが期待されます。

つまり、idに対応するような型コンストラクタ付きの関数 `id' :: a -> m a` が存在して

1. `id' >=> f` ≡ `f` （id'の左単位性）
2. `f >=> id'` ≡ `f` （id'の右単位性）
3. `(f >=> g) >=> h` ≡ `f >=> (g >=> h)` （結合則）

が成り立っていてほしいということです。

この式が成り立つような m, (>=>), id' の実装をまとめて**モナド**と呼びます。
ただし、id'は実際には `return` という名前になっています。

returnという名前を使って上の式を書き直すと以下のようになります。

1. `return >=> f` ≡ `f` （returnの左単位性）
2. `f >=> return` ≡ `f` （returnの右単位性）
3. `(f >=> g) >=> h` ≡ `f >=> (g >=> h)` （結合則）

これら3つの条件は、まとめて**モナド則**と呼ばれています。

#まとめ：　モナドとは
戻り値が型コンストラクタ付きであっても普通の関数と同じように

- 単位性のある関数が定義でき、
- 結合則が成り立つ

ような型コンストラクタです。

拍子抜けするほど簡単ですが、これだけです。
なにも省略したり誤魔化したりしていないつもりです。

# おまけ：　(>>=) ってなんだよ。
以上でモナドの説明は終わりですが、
**「(<font color="Blue">>=></font>) なんて演算子は知らない。自分が知りたいのは (<font color="Red">>>=</font>) だ。」**
と思う人も居るでしょう。

| | <font color="Blue">>=></font> | <font color="Red">>>=</font> |
|:-:|:-------------------------------:|:----------------------:|
|型 |(a -> **m** b) -> (b -> **m** c) -> (a -> **m** c)| **m** a -> (a -> **m** b) -> **m** b |

実はこの2つの演算子は、片方が決まればもう片方は自動的に実装を決定できます。

つまり、どちらを使っても同じことができるのですが、Haskellでは (<font color="Blue">>=></font>) より (<font color="Red">>>=</font>) のほうが広く使われています。

その理由を考えるために、以下にこの2つの演算子のそれぞれのメリットをまとめました。

## (<font color="Red">>>=</font>)のメリット
Haskellで広く(<font color="Red">>>=</font>)が使われているのは、**コーディングをするうえで便利だから**という理由です。

Maybeモナドなどの簡単なモナドを **return と (<font color="Red">>>=</font>) で実装する**場合と、 **return と (<font color="Blue">>=></font>)** で実装する場合について、自分で試してみるといいでしょう。
(<font color="Blue">>=></font>)はきっと実装が回りくどくなってしまうかと思います。

また、do 構文との相性も (<font color="Red">>>=</font>) のほうが優れています。

## (<font color="Blue">>=></font>)のメリット
(<font color="Blue">>=></font>)のメリットは、上で示したように **モナドのコンセプトが理解しやすい** という点にあります。
モナド則も(<font color="Blue">>=></font>)を使って書くとスッキリしていて、何が言いたいのか一目瞭然です。

一方、(<font color="Red">>>=</font>)を使って書かれたモナド則は、初学者の心をへし折るのに十分なほどにクソ醜いです。
以下に(<font color="Red">>>=</font>)を使って書かれたモナド則を示します。

1. `return x >>= f` ≡ `f x` （returnの左単位性）
2. `m >>= return` ≡ `m`　　（returnの右単位性）
3. `(m >>= f) >>= g` ≡ `m >>= (\x -> f x >>= g)` （結合則）

ブッサイクな式ですね（暴言）
linear-gradientで指定したグラデをホバーでフワッと切り替える

タイトルの通りなんですが、`linear-gradient`でグラデをかけたボタンを、`transition`でフワッと切り替えたかったんですが、結構ハマってしまったので、備忘を込めてメモです。


## まずは答えから

``` HTML
<p><a href="#" class="btn">ボターン</a></p>
```
``` CSS
.btn { 
  background-image: linear-gradient(to left, rgba(213, 0, 0, 1), rgba(239, 71, 9, 1));
  position: relative;
  z-index: 0;
  transition: .3s;
}
.btn:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(184, 0, 0, 1);
  opacity: 0;
  transition: .3s;
}
.btn:hover:after {
  opacity: 1;
}
```

実際に動作しているのはこちらです。
https://codepen.io/anon/pen/wYPvOr#anon-login

ポイントは`.btn`に指定した `z-index: 0;`と、`.btn:after`に指定した `z-index: -1;`、 `opacity: 0;` です。

## 何をしているの？
ボタンにグラデを指定して、`:after`要素でホバー後の単色を指定しています。


`.btn`自体に `linear-gradient` でグラデをかけています。
この時、`position: relative;`を指定し、`z-index: 0;`を指定しています。
この`z-index: 0;`の値は別になんでもいいのですが、指定していることが重要です。

さらに`.btn:after` にホバー後の背景色を指定し、`z-index: -1;`を指定します。これでaタグのテキストと背景の間に`:after`要素が設置されます。
この時、`.btn`要素自体に`z-index`が指定されていないと、順序が狂ってうまく動かないので注意です。

次に、ホバー後の背景色を指定した`:after`要素を指定し、`z-index: -1;`と`opacity: 0;`を指定しておきます。

あとは、ホバー時に`:after`要素の`opacity`を1にしてやれば完成です。

## まとめ
そもそも`background-image`を`transition`の対象に含めることはできないそうです。
https://teratail.com/questions/21917

色々なサイトで紹介されていた方法を試してみたのですが、どうにもうまくいかなくて今回の方法をとりました。

この方法であれば、グラデ→単色、単色→グラデの両パターンいけるので、使い勝手がいいのかなと思います。

同じことでハマってる人がいればぜひ〜。
.icloudという拡張子ができてしまう問題の対処法

iCloud Driveでファイルを同期していると、`.icloud`というファイルができることがある。これはファイルの実体がローカルになくクラウド上にあることを示すものである。このファイルが作られないようにするには、環境設定の「iCloud」→「iCloud Drive」の「オプション」を開き、「Macストレージを最適化」のチェックを外す。

<img width="547" alt="スクリーンショット_2018_10_15_18_45.png" src="https://qiita-image-store.s3.amazonaws.com/0/889/cb542d6c-14bf-6b96-a7cf-e3d1d1089d61.png">
Amazon CloudWatch（標準メトリクス）- Amazon EC2

**■Amazon CloudWatchとは？**
リソース監視のためにあらかじめAWSで用意されている測定基準(メトリクス)をもとに、インスタンスをモニタリングしてそのデータに基づくアラートアクションを構成できるサービスです。
あらかじめ、CloudWatchで設定をおこなっておけば何か監視項目で変動が起こった際、所定の通知先にアラートメールを通知することもできます。

本ハンズオンは基本設定のみです。
カスタムメトリクスについては、別途 [Amazon CloudWatch（カスタムメトリクス）- Amazon EC2](https://qiita.com/leomaro7/items/c1b56b3798873e412410) をご覧ください。
*※カスタムメトリクスとは？*
CloudWatchの基本設定だけだと監視することができないけど、この部分については監視したい！という項目のメトリクスを独自に作成し監視をおこなうことも可能です。

---
###1.EC2でのAmazon CloudWatchの画面を見てみよう###
EC2サービスに入った画面下部の「Monitoring」タブをクリックしていただくと、表示されます。
![スクリーンショット 2018-10-09 23.13.35.png](https://qiita-image-store.s3.amazonaws.com/0/280929/7b9fbe04-a024-c06f-733b-a1e64b3839bb.png)


###2.アラートメールを設定してみよう###

「アラームの作成」をクリックします。
![スクリーンショット 2018-10-09 23.20.28.png](https://qiita-image-store.s3.amazonaws.com/0/280929/16666e79-f9d4-64db-f0ec-93708b7696a4.png)

「トピックを作成」をクリックします。
![スクリーンショット 2018-10-09 23.20.28.png](https://qiita-image-store.s3.amazonaws.com/0/280929/6a90c656-5aab-2a76-4287-3bfb4a533722.png)

以下のように入力し、「アラームの作成」をクリックし、設定は以上になります。
・通知の送信先：適当な名前
・受信者：通知先メールアドレス
・次の時：監視する項目を適当に選んでください。
・アクションを実行：アラームがトリガされた場合の処理を決めることができます。
![スクリーンショット 2018-10-09 23.27.02.png](https://qiita-image-store.s3.amazonaws.com/0/280929/7821a9ec-8ea0-2e40-c3d7-40e99a9bcfda.png)


###4.CloudWatchのその他の機能###

- ダッシュボード
- CloudWatchLogs
Docker ToolBoxでWebサーバをたててみる

# はじめに
 仮想環境を準備する際に、いろいろ調べたらコンテナタイプが楽とあったので、
今回はDockerを使ってみようとなった


# Dockerのインストール
 1. 今回はDocker Toolbox on Windowsをダウンロード（ https://docs.docker.com/toolbox/toolbox_install_windows/ ）

 2. インストーラーを起動 
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/300075/68dd547e-8930-a61f-d8d2-f0d7d5f97b14.png)
 
　・ Full installationでインストール
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/300075/c548f998-a2b9-5583-2962-5109d009a49d.png)
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/300075/e2e1631f-3d23-425c-c0e1-c367526916fa.png)
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/300075/89e64a0c-b2b8-57ae-1a1f-f9c43659a5ba.png)
  インストール完了

# DockerにCentOS環境整備
 ・インストールしたDocker Quickstart Terminalを起動
 ・ DockerにCentOS7のイメージをダウンロード
    
   ```shell:
   $ docker pull centos:7
   ```

 ・ apacheインストール済みのCentOSのカスタムイメージの作成

```file:Dockerfile
   FROM centos:7
   RUN yum -y update && yum clean all
   RUN yum -y install httpd && yum clean all
   EXPOSE 80
   ENTRYPOINT ["/usr/sbin/httpd"]
   CMD ["-D", "FOREGROUND"]
```

・作成したDockerfileを読み込む

```shell:
 # centos7というイメージを作成
 # . はDockerfileのあるディレクトリ
 $ docker build -t centos7 .
```

・作成したイメージを実行

```shell:
 $ docker run --name cent-web -d -p 8080:80 centos7
``` 

・DockerのIPアドレスに接続
![image.png](https://qiita-image-store.s3.amazonaws.com/0/300075/0c4de591-c23a-4eb3-a12f-c7456fa5eab5.png)

・Apachの起動を確認！

#まとめ
 想像以上に簡単に構築することができたので，今後開発等でうまく使っていきたい。
今後は，これに慣れつつDockerとの違いを認識していく
TypeScriptのnpmモジュールをリリースしてみよう(2018/03/15時点)

# npmとは
https://www.npmjs.com/

Node Package Managerの略称
Node.jsのパッケージ（Package ）を管理する（Manager）ツールのこと。
パッケージとは予め用意されたnode.js製のライブラリのことを指す。
Node.jsとはイベント化された入出力を扱うUnix系プラットホーム上のサーバサイドJavaScript環境をさす(V8 JavaScriptエンジンで動作する)。

#TypeScriptとは
そもそもJavaScriptはwebブラウザ上で動的なウェブサイトの構築に扱われた。
TypeScriptはJavaScriptに静的型付けとクラスベースのオブジェクト指向を加えたMicroSoft社発のスクリプト言語。
既存のJavaScriptのコードはTypeScriptとしても実行可能。
TypeScript自体はコンパイラでJavaScriptに変換される。型推論や文脈的型付けなど、JavaScriptよりもある程度制約がある。
https://ja.wikipedia.org/wiki/TypeScript

#チュートリアル
Node.jsをインストール
gitに関する設定がなされていることが前提

インストール

```
$ git clone git://github.com/creationix/nvm.git ~/.nvm
```

~/.bashrc or ~/.bash_profileのどちらかに下記を追加

```
if [[ -s ~/.nvm/nvm.sh ]] ; then
    source ~/.nvm/nvm.sh ;
fi
```

インストール可能なバージョンを表示
```
$ nvm ls-remote
```

インストール

```
$ nvm install　v6.11.2
```

インストールされているバージョンの一覧表示

```
$ nvm ls
```

バージョンの切り替え

```
$ nvm use v6.11.2
```

コマンドの確認

```
$ node -v
```

Node.jsでHello world
適当に下記のようなJavaScriptファイルを作る

```
console.log('Hello World!');
```

実行
```
$ node test.js
Hello World!
```
# npmに登録
下記サイトに登録
https://npmjs.org/signup

username, password, email_addressはメモしておく

下記コマンド実行し、username, password, email_addressを記録しておく
```
$ npm adduser
```
モジュールを実装
適当なディレクトリを作成し、npm initを実行
```
$ cd my-module/
$ npm init -y
```

package.jsonの中身を編集

```
{
  "name": "{package名}",
  "version": "1.0.0",
  "description": "Test project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "{自分の名前}",
  "license": "ISC"
}

```

index.jsの中身を編集

```
function Hello() {
    return 'Hello ';
}

exports.Hello = Hello;
```

最終的にファイル構成はこうなるはず

.
├── index.js
└── package.json


# リリース＆確認
下記コマンドでリリースされるはず
```
$ npm publish
```
自分のプロフィールにpublishされたモジュールが掲載されている

https://www.npmjs.com/

# TypeScriptでnpmモジュールを作りたい

https://github.com/hisato-kawaji/typescirpt-npm-test

```
typescript  を入れてtscコマンドを実行
npm install typescript -D
npm install typescript -g -D
npm install typings -g -D
tsc --init
```

# 参考文献
- https://qiita.com/akakuro43/items/600e7e4695588ab2958d
- https://qiita.com/fnobi/items/f6b1574fb9f4518ed520
- https://docs.npmjs.com/getting-started/creating-node-modules
- https://codeburst.io/https-chidume-nnamdi-com-npm-module-in-typescript-12b3b22f0724
- https://postd.cc/i-was-wrong-about-typescript-here-is-why/
【Rails】ActiveStorage で一番コンパクトな画像添付の実装手順まとめ

[Active Storage](https://railsguides.jp/active_storage_overview.html) を始めるにあたって、一番コンパクトな実装、

- Productモデルに対して画像を１つ添付できる
- 画像をローカルで保存する

のステップをまとめまています。

# 大まかな手順

1. ActiveStorageをインストールする
2. `storage.yml` の作成
3. 環境設定
4. モデルにファイルを添付
5. コントローラ（create,updateはデフォルトでOK）
6. ビューに表示


# ActiveStorageをインストールする

```console:テーブルを作成
$ rails active_storage:install
$ rails db:migrate
```

- `active_storage_blobs` と `active_storage_attachments` という名前の2つのテーブルがつくられます。

# `storage.yml` の作成

```yaml:config/storage.yml
local:
  service: Disk
  root: <%= Rails.root.join("storage") %>
```

# 環境設定

```ruby:config/environments/development.rb
config.active_storage.service = :local
```

# モデルにファイルを添付

```ruby:app/models/product.rb
# 単数の場合
class Product < ApplicationRecord
  has_one_attached :image
end
```

# コントローラ

- `#create`, `#update` アクションはデフォルトでOK

```ruby:app/controllers/products_controller.rb
def destroy
  # アタッチされていれば削除
  @product.image.purge if @product.image.attached?
  @product.destroy
  respond_to do |format|
    format.html { redirect_to products_url, notice: 'Product was successfully destroyed.' }
    format.json { head :no_content }
  end
end

private

def product_params
  params.require(:product).permit(:name, :price, :image, :description)
end
```

# ビューに表示

```haml:app/views/products/show.html.haml
%p
  - if @product.image.attached?
    =image_tag url_for(@product.image), style: "width: 20rem;"
  - else
    画像がありません
```
非エンジニアがWindows Subsystem for LinuxでHello Worldを表示させるまで 

所属する会社で、DockerとKubernetesの勉強会があります。

私はエンジニアではないので、
業務でDockerとかK8sを使うことはほとんどないけど、
会社サービスのお話をするときに、
Dockerがなぜ革新的なのかとか、
どんなときに役立つ技術なのかっていうのを知っておかなきゃいけないってことで、
ちょこちょこと業務外のお時間に勉強会に参加させてもらうことにしました。


※AWSの勉強会などもあります。
　AWSの勉強会のようにカラフルな画面（WEBサービスの画面）を見ながらやるのは心がウキウキするし、そこまで事前知識がいらないのだけど（自分が勉強しているレベルだとまだ）、黒い画面みながら勉強するのは嫌い。。

※っていうか、何も基礎知識がないので、
エンジニアの人たちが当たり前に発する言葉が分からない。

みんなが話すことを理解するため、
お勉強。。

ということで、いろいろ間違っていることもあると思うのですが、
備忘録として以下記載。



##ステップ１：スクリプトが何かわからない

会社から指定された教材を読むと、
**スクリプトを用意して、これをアプリケーションとします。**
みたいなことがさらっと書かれているのですけど、
え、スクリプトって基本的に何で作るの？？？？状態。

（こちらは、超絶簡単なHTML5とPHPくらいしかしらない）

`#!/bin/sh
echo "Hello, World!"`

って書かれているので、
とりあえず、`#!/bin/sh`を検索。

どうやらシェルスクリプトっていうものらしい。


とりあえずドッカーの操作だったり、ドッカーに入れるアプリケーションを作るのに、
シェルってものをちょっとは理解しないと、
黒い画面を使うのには苦労しそうということで、
今回は、シェルについてお勉強。

##ステップ２：シェルが何かわからない

ふむふむ、このシェルっていうものは、
OSの偉い人とお話する言語ってことね。

あー、ownCloudの操作するときに、
ぜんぜんよくわからず、ls とか、cdとか、cpとか使ってたけど、これのことなのかな？？

Linuxコマンドはシェルスクリプトってことだね！
（よくわかんないけど、とりあえず自分なり解釈で先に進む。）

なんかいろいろ黒い画面の呼び名はあるけど(コンソールとかターミナルとか）、
この黒い画面でお話するよう。

とりあえずシェルを動かしてみたいってことで。
Windowsのローカルでシェルを動かす方法を探し始める。


しかし、このとき、そもそもシェルにはいろんな種類があること知らなかった。。。


##ステップ３：シェルってWindowsでは動かないの？

Windowsの黒い画面といえば、コマンドプロンプト！
ということで、コマンドプロンプトを表示して、
冒頭に書いた、
シェルスクリプトを実行させようとするも。。。。

あ。。
なんか画面が違う。。。

よくLinuxの黒い画面でみる、
＄とか#がいない。。。。。

yahoo知恵袋とかみると、
そりゃbashがねーから、当たり前だよ！みたいなコメントが。
（あ、そうなんですね）

やっと、シェルの中にもいろんな種類があって、コマンドが使えるものと使えないものとかがあるのだという理解。

方言みたいなものかね。
シェル標準語＋シェル方言みたいな。（違うかもしれない）

ということで、
Windowの中でも、Linuxを動かすbashっていうシェル方言を動かす方法がないか検索。



##ステップ4：Windows Subsystem for Linuxにやっとたどり着く！

どうやらWindows環境でもLinuxが使えように少し前になったよう。

以下のQiita参考にさせていただきました
https://qiita.com/Aruneko/items/c79810b0b015bebf30bb

エクスプローラのパスが表示される場所（名前が分からない。。）で
`bash`って入力しても操作できました。

![bash.png](https://qiita-image-store.s3.amazonaws.com/0/223994/694cb768-7cd8-835b-e929-446691cf6c95.png)
↑こんな感じ。


##ステップ5：シェルを実行してみよう

とりあえず、一番最初の、
hello worldって表示させるスクリプトを
bashで作るって宣言して
.sh拡張子で保存するスクリプトのやつ。。。

こちらを作成。
`#!/bin/sh
echo "Hello, World!"
`

で、windowsのローカルに保存。。。

。。。。。




で。。。？？

。。。
( ﾟДﾟ)



。。。




実行方法わからず。。。。


WindowsとWSL間のファイルのやりとり不明。。。。
（ああああ、普通に考えればわかったはずだけど、ここまで気づかず）


作ったは良いけどWSLへファイルの転送方法不明。。。
ローカルのWSLに接続するクライアントソフトみたいなものってあるのかな？



で、結局よくわかんないから、WSL上で作っちゃえーということで

touch　と　viコマンドで新規ファイルをWSL上に作成。
これだけで、なんとなく達成感w


（こっちのほうが楽ー。結局、もともとの疑問は解決できず
この辺をきちんと理解していればOKだったのかも？？
https://qiita.com/chez_sugi/items/fd2e5c39010daa858406 )



とりあえずDockerに入れるためのスクリプト（アプリケーションみなす）が完成し、実行までできました。
（つっても、Hello Worldが表示されるだけ）

やれやれ。
Dockerとは全然関係ないし、
WSLで実行しなくても良かったかもしれないけど、
非エンジニアはこんな感じで都度都度勉強しないと皆においつけません。

　
　
PHPとかでも、
同じようなことできるのに、
なーんで、シェルでもできるのだ。。。

アプリケーションを動かすのか、
バッチとか、制御とか、OSへの操作ってところで、
それぞれの意味合いが出てくるんだと思うけど、
もっとできることとできないことをバシバシと分けて、簡単にまとめてくれたらー。。と思うのでした。



気が向いたら、
Dockerイメージを作成するまでに、
えーとえーと、と思ったことをまとめるかもしれません。
Sens'it V3のデータをAWS IoTからDynamoDBV2に書き込む

AWS IoTのルールエンジンで"DynamoDBテーブルにメッセージを挿入する"場合は、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/c94373b6-9cf7-97f7-a241-b6cffd54aee2.png)
[こちら"Sigfox CallbackとAWS IoT連携"](https://qiita.com/ghibi/items/a1c49a180b885e712841)を見てください。
ここでは、元となるペイロード（JSON）が下記のような構成になっているが、

```sensit.json
{
  "device":"B42XXX",
  "time":"1539592634",
  "data":"fe0da56c",
  "battery_level":31,
  "mode":1,
  "button_alert":"true",
  "temperature":421,
  "humidity":108
}
```
各値を計算してからデータベース（DynamoDB）に挿入したい場合です。
例えば、battery_levelは
```バッテリー電圧 = (battery x 0.05) + 2.7```
のような場合です。
この場合は、**"データベーステーブル(DynamoDBv2)の複数列にメッセージを分割する"**をアクションとして選択することとなります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/a701d690-3e58-04b3-c543-61ac2f27cc6b.png)

#DynamoDBv2に挿入する方法
[こちら"Sigfox CallbackとAWS IoT連携"](https://qiita.com/ghibi/items/a1c49a180b885e712841)で、まずは一連の流れを作っていただいて結構です。それを下記の通り修正していきます。
AWS IoTのACTルールを作成します。ルール名は適当につけてもらえれば結構です。ルールクエリステートメントで下図のようなクエリを作ります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/c4926237-df0b-df91-36c6-e03f7025d58b.png)

```
SELECT 
 (battery_level * 0.05) + 2.7 AS battery_voltage, * 
FROM 'sigfox'
```
ここでは、'sigfox'トピックからとってきたJSONから"(battery_level * 0.05) + 2.7"した値を"battery_voltage"カラムに、その他すべて(*)をDynamoDBに挿入します。ということを意味します。
アクションは、**"データベーステーブル(DynamoDBv2)の複数列にメッセージを分割する"**を選択し、挿入先のテーブル名、ロールを設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/3973a8a4-70d6-0b1c-99ba-4f31ae10aba6.png)

#ルールのテスト
AWS IoTのテストメニューから"sigfox"トピックにサブスクライブし、Sigfox Callbackで転送されるJSONサンプルを下図のように記載し、[トピックに発行]ボタンを押します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/3a793bda-207e-b247-cd91-edb1661dcc1f.png)

すると、DynamoDBのテーブルを見ると下図のように"battery_voltage"というカラムが追加されていることを確認できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/c236c83e-f729-b4cb-b391-d96beb2003ff.png)

あとは、Sens'it v3がデータを送るたびにDynamoDBが更新されていきます。

[Sigfox Japan KCCS](https://qiita.com/organizations/sigfox)
【Flaskチュートリアル】罠を回避してPythonでミニブログ「flaskr」を作る。

#なんのために共有するのか？
ども！デザインエンジニアのMasaです。
<img src="https://storage.googleapis.com/edd-homepage/IntroductionEdD/img/masa.png" width=30%>

言語やライブラリ、フレームワークの学習をしているときに
「よし…チュートリアル通りやったからこれで動くはずだ…(ドキドキ)」
「うわ、エラー吐き出しやがったよ…」
という経験をして枕を涙で濡らす人があとをたちません。

**そういう人をなくそう。**

ということで
「2018-10-12」時点で動いた状態ものを日本語で共有しておくことで
Flask学習者がつまづかないようにしておきたく思います。

#今回のチュートリアルでつくるもの
今回はFlaskチュートリアル(バージョン1系)のこんな感じのブログを作成する。
![スクリーンショット 2018-10-10 16.25.09.png](https://qiita-image-store.s3.amazonaws.com/0/253032/69506905-e3b1-162c-d041-49f55dc774f7.png)

今回、注目するべき実装は
◆ログイン・ログアウト・アカウント登録機能
◆ブログ投稿・ブログの編集・ブログの削除機能
（つまりDBへの新規登録、DBの編集、DBからの削除も含んだ内容ということ）

※注意点　　flaskのチュートリアルは1系と0系があるので注意。
#環境
Python 3.7.0
Flask 1.0.2
↑ Flaskのバージョンが0系でないことに注意

#ディレクトリ構成
```
flask-tutorial
 └ flaskr
    ├ __init__.py
    ├ auth.py
    ├ blog.py
    ├ db.py
    ├ schema.sql
    │
    ├ static
    │   └ style.css
    │
    └ templates
         ├ base.html
         ├ auth
         │   ├ login.html
         │   └ register.html
         │
         └ blog
            ├ create.html
            ├ index.html
            └ update.html

```

#実際のコード
githubからdownloadしてくださいー。
https://github.com/Pocket-ma-kun/flask-tutorial/tree/master/flaskr

#アプリを動かすときは？

まずは、flaskがインストールされているか確認しましょう。
(pipコマンドとpip3コマンドがあるけど、pythonの2系と3系の違いです。)

```
pip3 list
```

ここにFlaskの1系が入っていればOK。

もしFlaskが入っていない場合、
下記のインストールコマンドを打ち込めばFlaskがインストールされる。

```
pip3 install Flask
```


ターミナルを起動し、
flask-tutorialディレクトリにて4つのコマンドを入力するとアプリが起動する。

```terminal:コマンド1
flask init-db
```
これによって

```
Initialized the database.
```
とデータベースが初期化されたことがわかる。

```terminal:コマンド2
export FLASK_APP=flaskr
```

```terminal:コマンド3
export FLASK_ENV=development
```

```terminal:コマンド4
flask run
```

というコマンドをうつとだいたいこんな結果が返ってくるはず

```terminal:terminal
* Serving Flask app "flaskr" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
```

次に実行結果に記載されているURLの

```
http://127.0.0.1:5000/
```
をブラウザのURLに入力すると次のような画面が見られる。
![スクリーンショット 2018-10-15 18.10.25.png](https://qiita-image-store.s3.amazonaws.com/0/253032/b61ef1a1-19ca-3962-5e92-048d87bd345a.png)
実際に動くアプリケーションを実行できたので、あとは
自分の学習したい部分に分解して学習していけばOK！

#最後に
Flaskチュートリアルはいかがだったでしょうか？？
自分ももう少し学習したい部分に分解して学習していくので、
解説リクエストなどあればコメントに記載していただけますと幸いです！

**「知りたかったことが知れた！」**とか**「新しいことが知れた！」**
と思ったら左の**いいねボタンをポチッと**お願いします！
ではではドロン！！
<img src="https://storage.googleapis.com/edd-homepage/IntroductionEdD/img/masa.png" width=30%>
処女作：エロ診断メーカー(共同製作：Kei)
https://ero-shindan.herokuapp.com/


#参考文献
Flask Tutorial
http://flask.pocoo.org/docs/1.0/tutorial/

Flask Tutorial source code
https://github.com/pallets/flask/tree/1.0.2/examples/tutorial

Flaskのチュートリアルをやってみる①　〜環境設定からデータベースまで
まさかコマンドラインでdbの初期化をするとは思っていなかった汗
http://o-tomox.hatenablog.com/entry/2013/11/29/183027#f1
AllReports メンバー (Access)

https://msdn.microsoft.com/ja-jp/library/office/ff822787.aspx
AllReports コレクションには、CurrentProject または CodeProject オブジェクトの各レポートに対する AccessObject が含まれます。
#プロパティ
##Application
Application プロパティでは、Microsoft Access のアクティブな Application オブジェクトとその関連プロパティにアクセスできます。値の取得のみ可能です。Application オブジェクト型の値を使用します。

##Count
Count プロパティを使用して、指定されたコレクションの中の項目数を示します。値の取得のみ可能です。長整数型 (Long) の値を使用します。

##Item
Item プロパティは、コレクションの特定のメンバーを、その位置またはインデックスで示します。値の取得のみ可能です。AccessObject オブジェクト型の値を使用します。

##Parent
指定したオブジェクトの親オブジェクトを取得します。値の取得のみ可能です。
Google SpreadSheetで表データ（Matrix）を分解して、リストデータ（row）にする変換する関数を追加する


GASに以下の関数を定義して、

```
function matrix_to_rows(dataArray) {
  var resultsArray = [];
  for(var i=1;i<dataArray.length;i++){
    for(var j=1;j<dataArray[0].length;j++){
      if(dataArray[i][0] != ""){
      resultsArray.push([dataArray[i][0],dataArray[0][j], dataArray[i][j]]);
      }
    }
  }
  return resultsArray;
}
```

```
=matrix_to_rows(範囲)
```

とすれば、表データをqueryなどで扱いやすいリストデータに変換できます