OmniAICreator/Qiita-1.07M huggingface dataset:
Dockerで環境を汚さずに始めるNuxt.js

## 最小構成

### ディレクトリ構成

```:ディレクトリ構成
.
├── docker-compose.yml
├── package.json
└── pages
    └── index.vue
```

```yml:docker-compose.yml
version: '3'
services:
  app:
    image: node:onbuild
    command: npm run dev
    volumes:
      - .:/usr/src/app
    environment:
      - NUXT_HOST=0.0.0.0
    ports:
      - "3000:3000"

```


```json:package.json
{
  "name": "app",
  "scripts": {
    "dev": "nuxt"
  },
  "dependencies": {
    "nuxt": "^2.3.4"
  }
}
```

```vue:pages/index.vue
<template>
  <h1>Hello world!</h1>
</template>
```

## Install手順

### 1. 最小構成に従ってファイルを配置
### 2. docker-compose run app npm install
これを実行した時点でディレクトリ構成が以下のようになります

```:npm-install後のディレクトリ構成
.
├── docker-compose.yml
├── node_modules
│   ├── 略
├── package-lock.json
├── package.json
└── pages
    └── index.vue
```

### 3. docker-compose up
### 4. http://localhost:3000 にアクセス
### 5. おわり

## 以下蛇足

これは開発環境用のDockerコンテナです。本番用であれば、node_modulesなどもイメージに含めたほうがいいですね。なぜ、わざわざ本番環境用途区別してまでnode_modulesをイメージに含めなかったのかというと

- コンテナ内にnode_modulesがあると、ホストOS上から触れないから
    - ホストOSからnode_modulesが見えないと、vscodeのtypescript補完が動かないなど、いろいろとエディタがうるさいから
- Dockerfileを書く必要ができてしまうから

というデメリットがあるからです。

### docker-compose.yml

#### volumesの/usr/src/appについて

[node:onbuildのDockerfile](https://github.com/nodejs/docker-node/blob/e9d9c1ce0f4e87b11d7b0ecff529b715038782ae/8/onbuild/Dockerfile#L4)を見ると、ありがたいことにWORK_DIRとして作成してくれているので利用します。これのおかげで、Dockerfileを書かずにすみました。


#### environmentのNUXT_HOST=0.0.0.0について

[ホストとポート番号 - Nuxt.js](https://ja.nuxtjs.org/faq/host-port/)より。デフォルトがlocalhost(おそらく127.0.0.1)になっているので、そのままだとホストOSから見えません。

### package.json

#### scriptのdevについて
[Nuxt.jsのインストールガイド](https://ja.nuxtjs.org/guide/installation#%E3%82%B9%E3%82%AF%E3%83%A9%E3%83%83%E3%83%81%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B)より

#### dependenciesのnuxtのバージョン
記事を書いた時点でのlatest。更新すること
GoでGoogleComputeEngineインスタンスの外部IPを取得

タイトルの通りのことをやりたい機会があったのですが
情報を探してまとめるのに手間取ったのでメモしておきます。

## やり方
### ComputeEngineの外部IP取得
```golang
import (
	"context"
	"fmt"

	// この２つの外部パッケージが必要
	"golang.org/x/oauth2/google"
	"google.golang.org/api/compute/v1"
)

func getExternalIP() (externalIP string, err error) {
	ctx := context.Background()
	// デフォルトの認証情報(gcloud auth aplication-default loginとか、GAEとかの認証)でClient生成
	client, err := google.DefaultClient(ctx, compute.ComputeScope)
	if err != nil {
		return "", err
	}
	computeService, err := compute.New(client)
	if err != nil {
		return "", fmt.Errorf("error opening connection, err: %s", err)
	}
	service := compute.NewInstancesService(computeService)

	// instanceを取得。projectIDとinstanceのzoneとinstance名が必要。
	ins, err := service.Get(ProjectID, Zone, InstanceName).Do()
	if err != nil {
		return "", fmt.Errorf("error getting instance, err: %s", err)
	}

	if len(ins.NetworkInterfaces) == 0 {
		return "", fmt.Errorf("error, network interface is not attached :%s", ins.Name)
	}

	nwIf := ins.NetworkInterfaces[0]
	if len(nwIf.AccessConfigs) == 0 {
		return "", fmt.Errorf("error, nothing access configs on network interface, instance:%s, nwif: %s", ins.Name, nwIf.Name)
	}

	exIP := nwIf.AccessConfigs[0].NatIP
	return exIP, nil
}
```
【Unity】Assetsの「Import Package」に「Effects」(StandardAssets)がない場合の対処法

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Unity 2018.2.15f1
⭐️Mac book

<font color="Magenta">
Assetsの「Import Package」に「Effects」(StandardAssets)がない場合の対処法
</font>
<img width="719" alt="スクリーンショット 2019-01-05 19.10.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/7ed1d533-8d3f-0f84-4541-49e5a7593184.png">


1.Assetsストアから「StandardAssets」を探す
<img width="1030" alt="スクリーンショット 2019-01-05 19.11.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/36274e81-ec97-352e-8ae3-2a3b078fb25b.png">


2.インポートする
<img width="395" alt="スクリーンショット 2019-01-05 19.17.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/ccc2f99f-e714-b15d-bb80-79d3355b9101.png">



3.プロジェクトのAssetsにEffectsが入る。
<img width="373" alt="スクリーンショット 2019-01-05 19.19.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/37d5151e-93bb-350d-ed06-97135b3624b8.png">
CSSの忘れやすいposition

よく忘れるのでメモ

## 画面全体に広げたい時
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">画面全部に広げたい時<br>position: fixed<br>top: 0;<br>right: 0;<br>bottom: 0;<br>left: 0;</p>&mdash; うす(｢･ω･)｢_/ (@usu_blog) <a href="https://twitter.com/usu_blog/status/1081493899049201664?ref_src=twsrc%5Etfw">January 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 画像の上に文字などを重ねたりしたい時
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">よく忘れるCSS<br><br>親にposition: relative(相対)<br>子にposition: absolute(絶対)<br>で重ねる</p>&mdash; うす(｢･ω･)｢_/ (@usu_blog) <a href="https://twitter.com/usu_blog/status/1081492677424631808?ref_src=twsrc%5Etfw">January 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Vuetifyを使って手始めにヘッダーを作ってみる

# 概要

現在作っているVue.jsアプリの見た目を整えるためにVuetifyを使ってみます。
まずはページのヘッダーを作ることを目標にします。
VueCLI3.0から作成したアプリケーションが既に存在するという前提で進めます。

||version|
|---|---|
|MacOS|Mojave 10.14.2|
|vue|2.5.17|

# インストール

アプリケーションのルートディレクトリでコマンドを実行。

```shell
cd vue-app
vue add vuetify

? Choose a preset: (Use arrow keys)
> Default (recommended)
```

これだけでいい感じにインストールしてくれます。

# 注意

既存のアプリにインストールする場合の注意点です。

## App.vueの上書き

App.vueがVuetifyのデフォルトページに上書きされてしまいます。
App.vueの変更は取り消しておきましょう。

```shell
git checkout src/App.vue
```

## レイアウト崩れ

自分のアプリでは、既存のレイアウトに崩れが生じました。

### インストール前

<img width=800" alt="スクリーンショット 2019-01-05 13.33.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/190770/533f0945-6415-9398-7b31-965df76c8fdb.png">

### インストール後

<img width="800" alt="スクリーンショット 2019-01-05 13.33.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/190770/cd59bbed-7738-4baa-3d8b-3227fdffce96.png">

調整面倒くさい。最初からVuetify入れとけやって話ですね。
それとも回避可能なんでしょうか？

# 変更点

App.vueを除くと変更点は以下になると思います。

```diff:src/plugins/vuetify.js
+ import Vue from 'vue'
+ import Vuetify from 'vuetify/lib'
+ import 'vuetify/src/stylus/app.styl'
+
+ Vue.use(Vuetify, {
+   iconfont: 'md',
+ })
```

```diff:src/main.js
import Vue from 'vue'
+ import './plugins/vuetify'
import App from './App.vue'
import store from './store'
```

```diff:public/index.html
  <head>
    ...
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  </head>
```

あとは`package.json`とlockファイルが更新されているはずです。

## ヘッダーの作成

`toolbar`を使います。

```vue:Header.vue
<template lang="pug">
  v-toolbar
    v-toolbar-title.headline
      span.font-weight-light ここがタイトル
</template>
```

## レイアウトの調整

表示させてみるとどうでしょう。

<img width="800" alt="スクリーンショット 2019-01-05 14.09.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/190770/74d35ae2-5489-42ac-4211-cf52ce21d82a.png">

なんか画面上部に謎の余白が。

App.vueのデフォルトのスタイルシートが原因でした。

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

これで余白が消えて、きれいにヘッダーを表示することができました。

# おわりに

今回は導入ということでヘッダーだけ作りましたが、
Vuetifyにはたくさんのコンポーネントが用意されているようなのでいろいろ試してみようと思います。

https://vuetifyjs.com/ja/components/api-explorer
Qiitaの画像をアップロードすると![Bad Request]()と出る

qiitaの記事に画像をアップロードすると

```
![Bad Request]()
```
と出てきます。

調べてみると初回投稿には月間2Mの制限があり、超えると``![Payload Too Large]()``が出てくるようです。
一度投稿すると上限が月間100Mになるそう。


試してみましたが``![Bad Request]()``は解決しませんでした。しかし1時間ほど時間を空けてみると解決しました。
この現象が起こるのは連続して画像を上げたりしたり、Qiitaを起動してすぐの状態だったのでしばらく待てば解決するものと思われます。
PDFBOX 読み取りサンプル

```
import java.io.FileInputStream;
import org.apache.pdfbox.pdmodel.PDDocument;
import org.apache.pdfbox.text.PDFTextStripper;
import org.apache.pdfbox.tools.ExtractText;

public class PDFsample {
	
	static String pdfFile  = "C:\\Temp\\sample-1.pdf";
	static String textFile = "C:\\Temp\\sample.txt";
	
	public static void main(String[] args) {
		//PDFをテキストファイルに書き出す
		test1();
		
		//PDFを単語区切りでコンソールに出力する
		test2();
	}
	
	/**
	 * PDFをテキストファイルに出力します
	 */
	public static void test1(){
		try
		{
			//PDFをテキストファイルに出力
			ExtractText.main(new String[]{pdfFile, textFile});
		}
		catch( Exception e )
		{
			e.printStackTrace();
		}
	}
	
	/**
	 * PDFを単語区切り（タブ）でコンソールに出力する
	 */
	public static void test2(){
		try{
		
			PDDocument document = PDDocument.load(new FileInputStream(pdfFile)  );
			PDFTextStripper s = new PDFTextStripper();
		
			//単語区切り文字をタブにセットする
			s.setWordSeparator("\t");
			
			//PDFテキストを読み取る
			String content = s.getText(document);
	
			//読み取り結果をコンソール出力する
			System.out.println( content );
		
		} catch(Exception e){
			e.printStackTrace();
		}
	}
}
```
LinuxネットワークTip: MACアドレスを取得する

Linuxにおいて、物理NICのMACアドレスを取得する方法です。

スクリプトに組み込んで自動化したい場合など、```ip addr``` の出力からテキスト処理して…とか、考えたくありません。:dizzy_face:

どうしたものかと色々調べていたら、Webで良さげな一行野郎 one liner がありました。それを更に一工夫したのがこちらです。

```
find /sys/devices \! -path "*/virtual/*" -path "*/net/*" -name address -execdir cat {} +
```

実行スピードが若干気になりますが、そこまで本気で速度を求められるような事も無いでしょう。まあ、その時はその時です。

（2019/08/31 追加ここから）
MACアドレスではなくてNICそのものの名称を取得する場合は下記の通りです。

```
find /sys/devices \! -path "*/virtual/*" -path "*/net" -exec ls {} \;
```
（2019/08/31 追加ここまで）

ともあれ、これでスクリプト化が簡単になります。やったね :thumbsup_tone2:
nuxt.js × GAE × nuxt-sass-resources-loader で500 Internal Server Error

年末年始を使ってnuxt.jsのSSR（サーバーサイドレンダリング）に触ってみようと思い、ここ数日、作ったアプリをGoogle App Engineで動かしていました。

[Google App Engine Node.js スタンダード環境のドキュメント  |  Node.js 用 App Engine スタンダード環境に関するドキュメント  |  Google Cloud](
https://cloud.google.com/appengine/docs/standard/nodejs/?hl=ja)

悪戦苦闘しつつ何とかデプロイには漕ぎ着けたものの、500 internal server errorが表示されてしまいました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/321625/560ca50b-85ad-1736-17bd-3a8d531a1e35.png)

このエラーの確認と対処の方法が、単純な割には調べてもなかなか見つからなかったので書いておきます。

# エラー内容の確認　

まず最初にヘルプや公式ドキュメントを見て試したのが、Google Cloud Platformのダッシュボード内に表示されている「Error Reporting」の確認。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/321625/d6851499-7982-113c-b98c-0f9cdb49a652.png)

しかしここには500 Internal Server Errorに関する情報はありませんでした。（表示されているのは試しに「nuxt start」の中身を書き換えた時に出た無関係なエラーです）

内部エラーを突きとめるには、Google App Engineページの「[ログビューア](https://cloud.google.com/logging/docs/view/overview?hl=ja)」。

[アプリケーション ログの書き込み  |  Node.js 用 App Engine スタンダード環境に関するドキュメント  |  Google Cloud](https://cloud.google.com/appengine/docs/standard/nodejs/writing-application-logs?hl=ja)

にもちゃんと書いてあるので単に自分が見落としていただけなのですが、このページがお馴染みのConsoleのログになっているようで、私の場合は

![image.png](https://qiita-image-store.s3.amazonaws.com/0/321625/6ef85886-9b74-2461-290b-bbaa9c865d8d.png)

nuxt-sass-resources-loaderに原因があるらしいことがわかりました。



# 何が問題だったのか

とはいえ原因がわかっただけでどう解決すれば良いのかわかりません。run devでlocalhostでの開発中はエラーにはなっておらず、

「500 error nuxt-sass-resources-loader」などで検索してみるも何が悪いのかさっぱりわからず。

何か手掛かりはないかと[npmjsの公式ページ](https://www.npmjs.com/package/nuxt-sass-resources-loader#install)を見てみると、

> Note that installing as a dev dependency --save-dev or -D will not work correctly.

という気になる一文を発見。

まさかと思いつつpackage.jsonを確認すると、

```json:package.json
  "dependencies": {
    "@nuxtjs/axios": "^5.0.0",
    "@nuxtjs/pwa": "^2.6.0",
    "cross-env": "^5.2.0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "node-sass": "^4.11.0",
    "nodemon": "^1.11.0",
    "sass-loader": "^7.1.0",
    "nuxt-sass-resources-loader": "^2.0.5"
  }
```

しっかり`--save-dev`で読み込んでいました。

ということで、

```console
npm rm nuxt-sass-resources-loader --save-dev
npm i nuxt-sass-resources-loader
```

これであっさり解決しました。

英語だからと適当に読み飛ばしたり日本語の解説記事だけ読んでコピペでコマンド打ったりすると痛い目見るという教訓を得ました。

ただ、それなりに参考になりそうなサイトや記事であっても、`npm i nuxt-sass-resources-loader --save-dev`と書いてあることが結構あったのでお気をつけください。（`npm run generate`する分には問題なく動くので、気にしない方は別に良いのかもしれませんが）

ちなみにデプロイまでの道のりでハマった点は多すぎるので気が向いたら書いていきます。
[python]jupyternotebookからpostgresqlサーバーへ接続してdataframeとして取り込む方法

#はじめに
jupyternotebookからpostgresサーバーへ接続して、データフレームとして読み込む方法を記載していきます

#前提
以前[こちら](https://qiita.com/hiroyuki_mrp/items/0dcbad67896f0a53b6d2)の記事を投稿したのですが、こちらの`サーバーが起動`されている状態であることを前提に進めていきます。

#導入
まずはpythonからpostgresqlサーバーに接続するためのドライバーをインストールします。今回はpsycopg２を利用します。

```terminal
$ pip3 install psycopg2-binary
```

#dbの確認

今回接続するdbを確認します。

```
$ psql -l
                               List of databases
   Name    | Owner  | Encoding |   Collate   |    Ctype    | Access privileges 
-----------+--------+----------+-------------+-------------+-------------------
 postgres  |  hoge  | UTF8     | ja_JP.UTF-8 | ja_JP.UTF-8 | 
 template0 |  hoge  | UTF8     | ja_JP.UTF-8 | ja_JP.UTF-8 | =c/hoge        +
           |        |          |             |             | hoge=CTc/hoge
 template1 |  hoge  | UTF8     | ja_JP.UTF-8 | ja_JP.UTF-8 | =c/hoge        +
           |        |          |             |             | hoge=CTc/hoge
(3 rows)
```

#接続

言わずもがなの起動

```
$ jupyter notebook
```
もしくは

```
$ ipython notebook
```

起動されたら新しいpythonファイルを開いて接続を行います。

```python
import psycopg2

connection = psycopg2.connectconnection = psycopg2.connect(host="localhost", database="postgres", user="hoge",password="password")
```

#読み込み

今回はデータフレームとして読み込みを行います。

```python
sql_query = "select * from access_log"#SQL文

import pandas as pd

df = pd.read_sql(sql_query, connection)
connection
```

#結果

今回は[こちら](http://www.loveruby.net/stdsql/)のサイトのサンプルデータを利用しています。

<img width="922" alt="スクリーンショット 2019-01-05 18.49.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/241505/7a591cfa-89f3-4de5-4012-8f5539692fe6.png">

#終わり
とても簡単に接続ができました。

#参考サイト
[psycopg2でPyhtonからPostgreSQLに接続する](https://yohei-a.hatenablog.jp/entry/20180503/1525361806)
[PostgreSQL/データベース一覧を調べる方法](https://db.just4fun.biz/?PostgreSQL/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E4%B8%80%E8%A6%A7%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8B%E6%96%B9%E6%B3%95)
[PostgreSQLをPythonからpsycopg2を使っていじる](http://tdoc.info/blog/2012/12/05/psycopg2.html)
[PythonからPostgreSQLに接続する方法](https://www.ashisuto.co.jp/db_blog/article/20160308_postgresql_with_python.html)
【Rails】rails newの -Tオプション

メモ用。

railsで新しいアプリケーションを作成するときのコマンドといえば`rails new `であるが、
以下のように`-T`オプションを加えると **Test::Unit** 用のファイルが生成されないようになる。

```
$ rails new sample_app -T
```

テストでRSpecを使用する場合は-Tを加えた方がいいかもしれない。
unsafeコンテキスト以外でIntPtrからSpan<T>またはReadOnlySpanに変換する方法は無い。(2019/1現在)

`Span<T>` または `ReadOnlySpan<T>` に変換したければ、
今まで通り`unsafe`コンテキストで`new Span<byte>(p.ToPointer(),length)`みたいにしてください。

## 調べたこと
- `Span<T>` または `ReadOnlySpan<T>` のコンストラクタに、`void*`を受け取るオーバーロードはあれど`IntPtr`を受け取るが見当たらない。
- `System.Memory` アセンブリや `System.Runtime.CompilerServices.Unsafe`アセンブリを眺めてもそれらしいのが無い。
- [MSDNマガジンの表](https://msdn.microsoft.com/ja-jp/magazine/mt814808.aspx)でも、当該のケースは記載されていない。
- [corefxのIssue](https://github.com/dotnet/corefx/issues/18946) を見ると、
> I do not think we need this API.
でRejectされている。
【AdobeXD】プラグイン開発4 プラグインファイルを分ける



チュートリアルをやる際

プラグインを一から作るのは面倒だったのでコメントアウトしていました。

![スクリーンショット 2019-01-05 18.29.24.png](https://qiita-image-store.s3.amazonaws.com/0/113504/56a4154c-565f-1abc-ff27-3d3bdb91734b.png "スクリーンショット 2019-01-05 18.29.24.png")


ですが、コメントアウトが増えるとしんどいので、ファイルとして分割する方法を調べました。

![スクリーンショット 2019-01-05 18.32.28.png](https://qiita-image-store.s3.amazonaws.com/0/113504/3a6bdfc8-e43c-70e8-6407-0455f29f0d05.png "スクリーンショット 2019-01-05 18.32.28.png")

dialog.jsというファイルを作りました。

```dialog.js


// ダイアログを生成する
const showDialogY = (text) => {
    // create the dialog
    let dialog = document.createElement("dialog");

    // main container
    let container = document.createElement("div");
    container.style.minWidth = 400;
    container.style.padding = 40;

    // add content
    let title = document.createElement("h3");
    title.style.padding = 20;
    title.textContent = text;
    container.appendChild(title);

    // close button
    let closeButton = document.createElement("button");
    closeButton.textContent = "Yes";
    container.appendChild(closeButton);
    closeButton.onclick = (e) => {
        dialog.close();
    }

    document.body.appendChild(dialog);
    dialog.appendChild(container);
    dialog.showModal()
}

const showDialogTest = () => {
    showDialogY("Test");
}

module.exports = { // ..(1)
    showDialogY,
    showDialogTest
}
```

(1) module.exportsに公開する関数を登録

呼び出し側のmain.jsは以下のように記述

```main.js
const { showDialogTest } = require("./dialog.js"); // ..(1)

module.exports = {
    commands: {
        "exportRendition": showDialogTest
    }
};

```

(1) ファイルのパスで取得する。

これできれい！

![スクリーンショット 2019-01-05 18.47.56.png](https://qiita-image-store.s3.amazonaws.com/0/113504/c691148d-6a43-b2ac-69fa-be8f4d457297.png "スクリーンショット 2019-01-05 18.47.56.png")
GoでSlackにPostする

SlackにGo言語でMessageをPostするコードを書いたので備忘録です。
Slackにエラーログを送ったり、アラート通知やリソース情報通知などに活用する。

- 開発環境
    - Mac
    - go1.11.2
    - Slack: WebHookURLが必要
- SlackにPostするときにAPI仕様を確認する ( Attachment structure )
    - https://api.slack.com/docs/message-attachments
- GoでSlackにPostするために、以下のパッケージを利用した
  - https://github.com/ashwanthkumar/slack-go-webhook

```SlackPost.go
package main

import (
	"github.com/ashwanthkumar/slack-go-webhook"
	"os"
)

const (
	WEBHOOKURL = "https://hooks.slack.com/services/XXXX"
	CHANNEL    = "dev"
	USERNAME   = "GoBot"
)

func main() {
	PostSlack("HelloWorld!!")
}

func PostSlack(msg string) {
	field1 := slack.Field{Title: "Message", Value: msg}
	field2 := slack.Field{Title: "AnythingKey", Value: "AnythingValue"}

	attachment := slack.Attachment{}
	attachment.AddField(field1).AddField(field2)
	color := "good"
	attachment.Color = &color
	payload := slack.Payload{
		Username:    USERNAME,
		Channel:     CHANNEL,
		Attachments: []slack.Attachment{attachment},
	}
	err := slack.Send(WEBHOOKURL, "", payload)
	if err != nil {
		os.Exit(1)
	}
}
```

# Slackへの通知結果

![GoSlackPost.png](https://qiita-image-store.s3.amazonaws.com/0/63395/e37997d9-2448-2000-3e8a-d0dd66eaafca.png)


# まとめ
Go言語を使って、SlackにPostするコードを作成しました。
AWSのAMIを使ってRStudioを構築する方法(2018.12)

R Studio Server(WebUIでR言語が利用できる分析環境)を、
AWS(Amazon Web Service)のAMI(Amazon Machine Image)を利用してサクッと構築する。

# HTTP版

以下のサイトでRSutido用のAMIが提供されています。

- http://www.louisaslett.com/RStudio_AMI/
 - Asia Pacific, Tokyo ami-06a92d022f66c8d3f
 - ![rstudio_ami.png](https://qiita-image-store.s3.amazonaws.com/0/36022/f77c045d-124d-e7b5-e706-7643cdccbee0.png)

インスタンスを作成して、セキュリティグループの設定を行いましょう。
詳細な手順は省略します。

以下のURLでログインできればOKです。

- http://〜インスタンスのIPv4〜/
- Username: rstudio
- Password: 〜インスタンスID〜

![rstudio_demo_graphics.png](https://qiita-image-store.s3.amazonaws.com/0/36022/8fa1cc6f-aa8f-16e6-a3a6-a6201c016681.png)

# HTTPS化

イマドキ[HTTPS](https://ja.wikipedia.org/wiki/HTTPS)化は常識。Chromeからも警告されます。
![http_security_alert.png](https://qiita-image-store.s3.amazonaws.com/0/36022/7a80fb2c-ea86-c770-ca89-ed40d48ec202.png)

以下のようなネットワーク構成にします。

```
ブラウザ
| HTTPS(443)
ELB (ここに証明書を置く)
| HTTP(80)
Nginx
| TCP(8787)
R Studio
```

デフォルトの設定だとHTTPS経由でアクセスした際にlocalhost:8787にリダイレクトされてしまうので、Nginxの設定を書き換える。
Nginx再起動時の認証は「2.rstudio」を選択、パスワードはインスタンスID。

```
$ ssh ubuntu@54.95.161.241 -i ~/.ssh/id_rsa_rstudio.pem

$ sudo vi /etc/nginx/RStudioAMI/rstudio.conf

# 変更点は以下の通り。この記事のポイントはここね
@@ -1,9 +1,11 @@
 location / {
   proxy_pass http://localhost:8787;
-  proxy_redirect http://localhost:8787/ $scheme://$host/;
+  proxy_redirect http://localhost/ https://$host/;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection $connection_upgrade;
+  proxy_set_header Host $host;
+  proxy_set_header X-Forwarded-Proto https;
   proxy_read_timeout 20d;
   access_log /var/log/nginx/rstudio-access.log;
   error_log  /var/log/nginx/rstudio-error.log;

$ service nginx restart
==== AUTHENTICATING FOR org.freedesktop.systemd1.manage-units ===
Authentication is required to restart 'nginx.service'.
Multiple identities can be used for authentication:
 1.  Ubuntu (ubuntu)
 2.  rstudio
Choose identity to authenticate as (1-2): 2
Password: 
==== AUTHENTICATION COMPLETE ===
```

ELBを構築する。プロトコルはHTTPS(443)。
証明書、ターゲットグループ、セキュリティグループは適当に。

ブラウザからhttps経由でアクセスできるようになっている事を確認して、
httpは遮断しておきましょう。

以上です。
nodebrewによるNode.jsのインストールからセットアップまで

お疲れ様です。Node.js環境構築の項です。

#ゴール
Node.jsを使えるようにする。

#前提
- Mac OS Mojave 10.14.2
- Homebrewを使える
    - 解説資料 : [Homebrewのインストールから操作まで](https://qiita.com/krtsatoqiita/items/ba567acacb93a7a02dd9)
- Bashスクリプトを用いてPATHを通せる
    - 解説資料 : [rbenvによるRubyのインストールからHello, World!まで](https://qiita.com/krtsatoqiita/items/3d77501434f623092893)

#やること
1. nodebrewとは
2. Node.jsとは
3. nodebrewインストール
4. nodebrewセットアップ
5. Node.jsインストール
6. Node.jsセットアップ
7. npmを知る

##1. nodebrewとは
- Node.jsのバージョン管理ツール
- 複数のバージョンを使い分けるために必要


##2. Node.jsとは
![Node.js.png](https://qiita-image-store.s3.amazonaws.com/0/288484/e075c268-3829-6c11-a953-7525e4d0ba10.png)

- 主にサーバーサイドで使われるJavaScript
    - 解説資料 : [Node.jsって何ですか？](https://qiita.com/mochiya98/items/d9e21f77cb15755741c1)
    - 解説資料 : [Node.js を5分で大雑把に理解する](https://qiita.com/hshimo/items/1ecb7ed1b567aacbe559)
- 非同期処理を行う
- イベント発生により駆動する
- シングルスレッドで動作する


##3. nodebrewインストール
```terminal:terminal
$ brew install nodebrew
```


##4. nodebrewセットアップ
`$ nodebrew help` に記載がないオプションコマンド。

```terminal:terminal
$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
```

PATHを通す。

```terminal:terminal
$ echo '# nodebrew' >> ~/.bash_profile
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source .bash_profile
```

##5. Node.jsインストール
- stable：安定版
- latest：最新版

```terminal:terminal
$ nodebrew install stable
```


##6. Node.jsセットアップ
- Node.jsを有効にする。
- インストールしたバージョンを確認する。

```terminal:terminal
$ nodebrew use stable

$ nodebrew list
v10.15.0
current: v10.15.0
```

##7. npmを知る
7-1. npmとは
7-2. npmセットアップ
7-3. npmパッケージ管理における今後の注意点

###7-1. npmとは
- Node Package Managerの略
- パッケージ管理によってチーム内でJavaScript環境を共有する


###7-2. npmセットアップ
Node.jsと共にインストールされている。
npmの存在を確認しておけば十分。

```terminal:terminal
$ npm -v
6.4.1

$ which npm
/Users/ツーザ名/.nodebrew/current/bin/npm
```

###7-3. npmパッケージ管理における今後の注意点
JavaScriptモジュール等は原則的にローカルインストール

- 解説資料 : [npmのグローバルインストールとローカルインストール](https://shigu493.com/npmのグローバルインストールとローカルインスト/)
- 解説資料 : [npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう](https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d)

お疲れ様でした。
この項・完
MackerelにPython3とboto3を使いmackerel-agentでカスタムメトリクスをPostしてグラフ化する

# やりたいこと
- mackerel-agentを利用して、Mackerelのダッシュボードに独自 ( カスタム )メトリクスを投稿してグラフ描画する。
  - awsアカウントのEC2インスタンスの起動中・停止中の台数をグラフ化してみる。

- 環境
  - AWS: Ubuntu16.04
    - IAMロールを付与
    - mackerel-agent
    - Python3
    - boto3 

- Mackerel公式サイトのカスタムメトリクスを投稿する場合について
  - https://mackerel.io/ja/docs/entry/advanced/custom-metrics



# 作成したコード ( Python3 )
- GitHub
  - https://github.com/yhidetoshi/Mackerel-CustomMetrics-Python/tree/master/InstanceNums

- ubuntuサーバに以下のパスに配置


```/usr/local/yhidetoshi/get_instance_num.py
#!/usr/local/bin/python3

import boto3
import os
import time

ec2 = boto3.client('ec2', region_name='ap-northeast-1')

def get_ec2_running_nums():
    ec2_response_running = ec2.describe_instances(Filters=[{'Name': 'instance-state-name', 'Values': ['running']}])
    ec2_instances_running = len(ec2_response_running['Reservations'])
    return ec2_instances_running

def get_ec2_stopped_nums():
    ec2_response_stopped = ec2.describe_instances(Filters=[{'Name': 'instance-state-name', 'Values': ['stopped']}])
    ec2_instances_stopped = len(ec2_response_stopped['Reservations'])
    return ec2_instances_stopped

def mkr_prepare():
    if (os.environ.get('MACKEREL_AGENT_PLUGIN_META') == '1'):
        metrics = [
			{
                        	'name':'running',
                        	'label':'running'
         	        },
			{
                        	'name':'stopped',
                        	'label':'stopped'
         	        }
	]
        meta['graphs']['instance.num'] = {
 				    	    'label': 'instances',
					    'unit': 'integer',
				  	    'metrics': metrics
        }
        print(json.dumps(meta))
        sys.exit(0)

if __name__ == '__main__':
    mkr_prepare()
    print('\t'.join(['instance.num.running', str(get_ec2_running_nums()), str(time.time())]))
    print('\t'.join(['instance.num.stopped', str(get_ec2_stopped_nums()), str(time.time())]))
```

# mackerel-agentの設定



```/etc/mackerel-agent/mackerel-agent.conf
apikey = "XXXXXXXXXXX"
include = "/etc/mackerel-agent/*"
```

- `/etc/mackerel-agent/get_instance_num`

```
[plugin.metrics.ec2num]
command = 'python3 /usr/local/yhidetoshi/get_instance_num.py'
```

# 結果
- 起動中のインスタンス数が1, 停止中のインスタンス数が0というグラフを作成することができた。 

<img width="558" alt="mackerel-custommetrics-instance.png" src="https://qiita-image-store.s3.amazonaws.com/0/63395/f2366d85-7cff-b155-a107-09afcb9ecd77.png">


# まとめ
pythonで書いたスクリプトを使いmackerel-agent経由で、Mackerelのダッシュボードに独自のメトリクスを投稿して描画することができた。これで可視化・監視したいデータをMackerelに投稿することができる。
MackerelのプラグインをGoで書いて、カスタムメトリクスをグラフ化することにも取り組みたいと思います。

# 関連
- GoでAWSのBilling情報をグラフ化するmackerel-pluginを作った
   - https://qiita.com/yhidetoshi/items/4eb17bb2806cf4f4b90d
小型Wi-FiモジュールESP8266と傾斜スイッチを使ってポストへの投函を検知する電池駆動センサを作ってみた

*本記事は、[2018年4月に別の場所へ書いた記事](https://cyclic-lab.blogspot.com/2018/04/lanesp-wroom-02.html)の転載です*

# 概要
個人でも安く容易に入手可能でありつつArduinoコードで動かせてしまう小型Wi-Fiモジュール「[ESP8266(ESP-WROOM-02)](https://www.switch-science.com/catalog/2346/)」。恥ずかしながらつい先日教えてもらって初めてその存在を知ったので、使い方の勉強がてら動くものを作ってみました。

今回作ったのは、家のポストにモノが投函されたことを傾斜スイッチを使って検知してIFTTT経由でLINE通知してくれる電池駆動のセンサ。仕上がりはこんな感じ。
![外観](https://qiita-image-store.s3.amazonaws.com/0/336603/68f723b8-1066-0259-81d5-6971f28a4fbd.jpeg)
我が家のポストは外にあって電源が取れない場所にあるので、ESP8266の「deep sleep」機能(超低消費電力でのスリープ動作)を使って、乾電池での長期間駆動を目指します。

# 実装
似たようなことをやっている[INTERNET Watchの記事](https://internet.watch.impress.co.jp/docs/column/electronic_iot/1045767.html)などを参考に、以下の方針で作りました。

- 普段はESP8266をdeep sleepモードで寝かせとく
- ポストにモノが投函されたことをESP8266のリセットピンにつないだ傾斜スイッチで検知、deep sleepから起こす
- 起きたら、自宅の無線LAN APにつないでIFTTTにWEBHOOK、通信終わったらすぐまたdeep sleepモードへ

傾斜スイッチは[「型想い」](https://www.amazon.co.jp/dp/B002WME79E)と両面テープを使ってポストのフタの内側へ、センサ本体と電池ケースは[3Mの面ファスナー](https://www.amazon.co.jp/dp/B004HNIB5M)を使ってポストの内側へ、それぞれ固定しました。
![型想い](https://qiita-image-store.s3.amazonaws.com/0/336603/37250135-4f11-1080-1c6f-2b2b024ea5d9.jpeg)
![ポスト内への設置](https://qiita-image-store.s3.amazonaws.com/0/336603/cea5936f-ee64-549b-9719-80eae5ffc282.jpeg)

# 回路図とコード
回路図は以下のとおり。
![回路図](https://qiita-image-store.s3.amazonaws.com/0/336603/d368860f-0193-e4cc-8e79-7fc5b753cff9.png)
ESP8266上で動くコード(Arduinoのコード)は以下に置いておきます。
[nikotan/esp8266_PostMonitor.ino - GitHubGist](https://gist.github.com/nikotan/2e191efecd65220f9bffe96fdb3b308e)

# 所感
これだけ小さなWi-Fi機器をArduinoのコードで動かせるってすばらしい。手軽にネットワーク機能を活用したデバイスを試作できて楽しいです。今回作ったものは今のところちゃんと動いていますが、どれくらい長期間駆動できるかはまだ不明。しばらく様子を見てみます。

- *その後しばらく様子を見てみた結果、投函が1日数回の利用状況で、単三エネループ4本を使って半年くらい動きました。*

# 参考
今回のハードとソフトを作るにあたっては、以下の記事などを参考にしました。

- [【電子工作×IoT】 第1回：SDカードが郵便を通知！　無線LAN機能付きのSDカード「FlashAir」を使ってドアポストセンサーを作ってみた＜前編＞ - INTERNET Watch](https://internet.watch.impress.co.jp/docs/column/electronic_iot/1045767.html)
- [ESP-WROOM-02 の配線 - Qiita](https://qiita.com/hotchpotch/items/8a6fe6b8b0026ac6218e)
- [ESP8266の真骨頂Deep-Sleepモードの使い方 - Qiita](https://qiita.com/azusa9/items/65a5c3772c41631b5ca1)
- [乾電池で連続340日間動作するESP8266搭載ワイヤレスセンサ - ボクにもわかる電子工作 - Yahoo!ブログ](https://blogs.yahoo.co.jp/bokunimowakaru/55911948.html)
- [ESP-WROOM-02でアナログ入力 (TOUT/A0) [抵抗分圧回路]](https://www.petitmonte.com/robot/esp_wroom_02_analogread.html)
- [ESP8266のTOUTピンの電圧をちゃんと測定する方法: コンピュータと足湯と園芸のブログ](http://ashiyu.cocolog-nifty.com/blog/2015/07/esp82.html)
- [ESP32 Wifi経由でIFTTTへ接続しLINEへ通知 – thousand](https://thousandiy.wordpress.com/2017/10/17/esp32_ifttt_line/)
MendixのDBの中身を直接見てみる

MendixではデータをDomainModelという論理モデルっぽいかたちで定義していきますが、当然それは物理モデルとしてRDBのテーブルに展開されるわけです。
じゃあそのDBの中身を見るにはどうすればいいかと言うと、常にJDBCで単純につなげられるわけでは無くて、ケース別にそれぞれやり方があります。

別にそんなことしなくてもMendixでアプリは作れるんですが、例えば期待する検索結果が取れないときにデータが悪いのか作り方がまずいのかデバッグしたりのために、見方は知っておきたいのです。

# ローカル実行しているアプリの場合

まずローカルで実行するときのDBの種類（PostgreとかOracleとかetc...）を確認します。
プロジェクトの「Settings」　→　「Configurations」タブでActiveにチェックがついている行のDatabase typeです。
アプリを新規作成したあと何も変えていなければ、デフォルトでBuilt-in databaseになっているはず。
![db-1-1.png](https://qiita-image-store.s3.amazonaws.com/0/187387/034a5a7b-d6e0-4160-d7dd-a573d028058a.png)

## Built-in databaseの場合

Built-in databaseとは何かというと、Mendix Desktop Modelerに同梱されている、**HSQLDB**です。
この場合、Modelerからビューアーを起動することができます。

Run Locallyしている状態で、「Console」ビュー　→　「Advanced」　→　「Start built-in database viewer」を選択。
![db-1-2.png](https://qiita-image-store.s3.amazonaws.com/0/187387/bc0cee9e-cf7a-cfae-0814-c13abab52e4a.png)

HSQL Database Managerが起動するので、ここで普通にSQLを実行することができます。
![db-1-3.png](https://qiita-image-store.s3.amazonaws.com/0/187387/17d0423d-562f-41cf-549d-2e0528c82ae3.png)


## Built-in databaseじゃない場合

任意のDB（PostgreなりOracleなりetc...）を立ててアプリがそこを使うように設定した、ということですので、お好きなツールで接続するようにしましょう。
Modeler同梱のビューアーは使えません。

# Mendix Cloud上のアプリの場合

Mendix Cloud上のDBに外部から直接JDBC接続することはできません。
じゃあどうするかというと、Mendix CloudにバックアップされているDBダンプをいったんダウンロードして、任意の環境にリストアしたものを見ることになります。
Mendix CloudのDBはPostgreSQLのため、あらかじめPostgreSQLの環境を用意しておきます。

Modeler右上の吹き出しマークをクリックして、Project Dashboardにアクセス。
![db-1-4.png](https://qiita-image-store.s3.amazonaws.com/0/187387/a8814073-dac8-b72a-afa1-45cf1e39955e.png)

Project Dashboardの左メニューから「Backups」をクリック　→　取得済みのバックアップ一覧から任意の行を選んで、ダンプファイルをダウンロード　→　用意してあるPostgreSQL環境にリストアして中身を見ます。
![db-1-5.png](https://qiita-image-store.s3.amazonaws.com/0/187387/d0ca9fb2-44a9-9567-02b6-57fbf8d1eab0.png)

ところで上記のスクショは、SandBoxつまり無償環境のアプリのバックアップ一覧となります。
SandBox上のアプリは日次サイクルでデータバックアップが取られます。つまり、まさに今この時のデータをダウンロードして見てみたい、ということは出来ず、次のバックアップまで待つ必要があるのです。

有償環境の場合は、日次バックアップに加え、即時でバックアップを取得することができます。（上記の画面に「Create Backupボタン」がある）

# この記事のつづき
- [MendixのDBの中身を見てみると分かること](https://qiita.com/baaaaa/items/81804339aa06a0f17745)
Controller内でのHelperメソッドの呼び出しについて

RailsのHelper内で定義したメソッドは、デフォルトでView内で使用することはできるが、
Controller内では使用することが出来ないようになっている。

これをController内でも使用できるようにするには、application_controller.rbで
Helperをincludeしてやれば良い。

```ruby:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  include HogeHelper # この行を追加
end
```
上記の場合であると、controller内でHogeHelperのメソッドを使用することができるようになる。

参考：[Ruby on Railsチュートリアル 8章 8.2 ログイン](https://railstutorial.jp/chapters/basic_login?version=5.1#cha-basic_login)
【Unity】なめらかにCharacter Controller移動（Mac Bookのキーボードを使う）

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Unity 2018.2.15f1
⭐️Mac book

完成イメージ
![ezgif.com-crop.gif](https://qiita-image-store.s3.amazonaws.com/0/93155/15e60c95-0f78-ac68-2c3d-7d27b8907e6b.gif)

<font color="Magenta">
なめらかに移動。
Character Controllerでキャラクター移動（矢印キー）とJump（Spaceキー押下）をする
（Mac bookのキーボードを使う）
</font>

<img width="524" alt="スクリーンショット 2019-01-06 11.42.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/dc78415b-caf7-cb06-a2d0-cbc2c3e309e3.png">


1.キャラクターに、Character Controllerを設定する
「Component」-「Physics」-「Character Controller」を選択する

<img width="763" alt="スクリーンショット 2019-01-05 16.35.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/68c30872-cfea-b993-a3b1-8a8f2d6e6802.png">

2.コライダーを設定する。移動スクリプトをコンポーネント追加する。
<img width="1282" alt="スクリーンショット 2019-01-05 16.56.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/c0cf075f-02e1-86a6-d4d3-23df4639343c.png">

```c#:RedHairScript
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RedHairScript : MonoBehaviour {

    CharacterController controller;
    Animator animator;
    Vector3 moveDirection = Vector3.zero;
    [SerializeField] float speedJump = 8f;
    [SerializeField] float gravity = 20f;
    [SerializeField] float speed  = 6.0f;
    [SerializeField] float smooth = 10f;

    // Use this for initialization
    void Start()
    {
        controller = GetComponent<CharacterController>();
        animator = GetComponent<Animator>();
    }

    void Update()
    {
        // Horizontal 横方向移動に指定されたキー
        // Vertical 前後方向移動に指定されたキー
        // キーボードが押される
        Vector3 target = new Vector3(Input.GetAxis("Horizontal"), 0, Input.GetAxis("Vertical"));
        if (target.magnitude > 0.1)
        {
            //体の向きを滑らかに変更する
            Quaternion rotation = Quaternion.LookRotation(target);
            transform.rotation = Quaternion.Lerp(transform.rotation, rotation, Time.deltaTime * smooth);
            //前方へ移動
            transform.Translate(Vector3.forward * Time.deltaTime * speed);
        }
        gameObject.transform.position += target * Time.deltaTime;

        // Space キーでJump
        if (Input.GetButton("Jump"))
        {
            moveDirection.y = speedJump;
            animator.SetTrigger("Jump");
        }
        // 重力分の力を毎フレーム追加(重力の加算)
        moveDirection.y -= gravity * Time.deltaTime;
        // 移動実行
        Vector3 globalDirection = transform.TransformDirection(moveDirection);
        controller.Move(globalDirection * Time.deltaTime);
    }

}

```
コンテナの外からartisanコマンドすると「Could not open input file: artisan」

コンテナの外からartisanコマンドを打とうとすると「Could not open input file: artisan」というエラーが出る。

```
% docker-compose exec web php artisan --version
Could not open input file: artisan
```

コマンドを叩いてるディレクトリが違うということらしい。

[LaravelでCould not open input file: artisanって言われたら](https://qiita.com/saku_tto_chan/items/724f00d6495deaceabaf)

```
# Dockerfile
WORKDIR /var/www/html/laravel
```

DockerfileでWORKDIRをlaravelのルートディレクトリに指定してあげるとコンテナの外からコマンドが打てるようになる。

```
% docker-compose exec web php artisan --version
Laravel Framework 5.7.19
```
MacintoshでC#

Macintosh にVisual Studio Codeを導入した。
C#のプログラムをコンパイルしようと思っている。
Visual Studioを立ち上げた。
まだ導入が不十分なのかもしれない。
C#を作るためのメニューが見当たらない。
資料を整理しはじめた。

C# および Visual Studio Code の使用を開始する
https://docs.microsoft.com/ja-jp/dotnet/core/tutorials/with-visual-studio-code


【Visual Studio for Mac】C#を使ってMac上で動くアプリをつくる。【環境構築／開発】
https://www.milkmemo.com/entry/visual_studio_for_mac


使う言語はC#のみ！ Macアプリケーションはもちろん、Webアプリやスマホアプリも開発可能な「Visual Studio for Mac」登場
https://codezine.jp/article/detail/9956

Visual Studio for Mac(C#) でアプリを書いて、RaspberryPiからAWS IoTへ接続してみた（.NET Core編）
https://dev.classmethod.jp/cloud/visual-studio-for-mac-csharp-aws-iot-2/

Visual Studio for Mac(C#)でAWS IoTへ接続してみた。
https://dev.classmethod.jp/cloud/visual-studio-for-mac-csharp-aws-iot/

作業記録はこれから。ディスクがいっぱいになり、Mac book Proでの作業を断念。


#参考文献(reference)
MacでC#のコードをコンパイルして実行する
https://qiita.com/matsuda_sinsuke/items/76068f4c396887459803

MacでC#のHello, World!を出力するまで
https://qiita.com/koichirokamoto/items/a6e6026f0a2afa634b85

macでC#のWebサーバ開発(準備編)
https://qiita.com/makotok7/items/2fe979b4f5479de32fb8
PythonでBode線図と系の時間応答を求める

制御工学の問題で以下のように出題されたため，sympyによって数値計算させたので備忘録として記録します．（課題内容と数値を変更しています）

問1)
以下の伝達関数のBode線図をかけ．
$$G(s) = \frac{10}{s(s+4)(3s+1)}   $$

```py
from sympy import *​

def main():​
    x = Symbol("x")         # symbolとして使う変数の宣言
    y = Symbol("y")
    f = x* (x+4) *(3*x+1)         # 関数f(x)の定義
    f1 = expand(f)          # 関数f(x)を展開
    f2 = factor(f1)         # 関数f(x)を因数分解
    print("f = "+str(f))    # 計算結果の表示
    print("f1 = "+str(f1))
    print("f2 = "+str(f2))
​
if __name__ == '__main__':
    main()
```

f = x*(x + 4)*(3*x + 1)
f1 = 3*x**3 + 13*x**2 + 4*x
f2 = x*(x + 4)*(3*x + 1)
が出力されます．（ただの展開なので頭で計算しても問題ありません．）これより以下のパラメータに係数を入れていきます．

```py
from control.matlab import *
from matplotlib import pyplot as plt
    
# 伝達関数のパラメータ
num = [ 10]     # 分子の係数
den = [3, 13, 4,0]     # 分母の係数
sys = tf(num, den)  # 伝達関数モデルの作成
bode(sys)           # ボード線図のプロット
plt.show()
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/282960/8ca47c16-3b6b-1144-f68f-9ed940b8c458.png)
ボード線図が出力されました．

問2)
以下の系を制御する場合のシステムの時間応答を求めよ．

```math
\frac{dx(t)}{dt} = \begin{pmatrix} 
0 & 1 \\
-4 & -5\\
\end{pmatrix}x(t) + \begin{pmatrix} 0 \\ 1 \\ 
\end{pmatrix}u(t) \\
x(0) = \begin{pmatrix} 1 \\ 0 \\ \end{pmatrix}, u(t) = Heaviside(t)
```

```py
from control.matlab import *
from matplotlib import pyplot as plt
import sympy as sym
import numpy as np

def main():
    var("a:z")
    var("A:Z")
 var("X0")
    A = [[0,1], [-4,-5]]
    B = [[0], [1]]
    X0 = [[1],[0]]
    A = sym.Matrix(A)  
    X = (sym.eye(2)*s - A).inv()    
    Y = inverse_laplace_transform(X,s,t) #exp(At)  
    X0 = sym.Matrix(X0)#これはx0
   #print(Y *X0 )#第一項

    #積分の項を計算していく    
    var("tau")#積分のためのtau
    Z = inverse_laplace_transform(X,s,t-tau)#再度計算
    B = sym.Matrix(B)#b
    W = integrate(Z * B ,(tau,0,t))#積分　eAt * b * u(t)
    #print(W)
    Answer = Y * X0 + W
 
    print(sym.simplify(Answer[0,0]))
    print(sym.simplify(Answer[1,0]))

if __name__ == "__main__":
    main()
```
Heaviside(t)/4 + exp(-t)*Heaviside(t) - exp(-4*t)*Heaviside(t)/4
-exp(-t)*Heaviside(t) + exp(-4*t)*Heaviside(t)
と出力されました．これより，$$ x(t)= [x_1(t),x_2(t)]$$とした場合，
$$x_1(t) = \frac{1}{4} + exp(-t) - \frac{exp(-4t)}{4}$$

$$x_2(t) = -exp(-t) + exp(-4t)$$
これが解答となりますが，この関数を念のためプロットします．

```py
import sympy as sym
var("t")
sym.plotting.plot((1/4 + exp(-t) - exp(-4*t)/4,(t,0,10)))
sym.plotting.plot(-exp(-t) + exp(-4*t),(t,0,10))
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/282960/eb2112c7-2e13-8fdd-fc4a-581af4fe87e9.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/282960/f5e9ec55-5c96-060c-7989-83601f83802a.png)

参考になった記事
https://algorithm.joho.info/seigyoriron/python-control-simulation/
https://qiita.com/nnn_anoken/items/ada16e29ef8282498bb7
＋sympyでの数値計算に関する諸々の記事
Header Search Paths（ヘッダ検索パス）について

# 概要
Header Search Paths（ヘッダ検索パス）周りの設定について調べてみました。

 - ヘッダのインクルード形式の違い
 - Header Search Paths
 - User Header Search Paths
   - non-recursiveとrecursive
   - パスの指定方法
 - Always Search User Paths(Deprecated) 
 - Use Header Maps 
 - System Header Search Paths
 - 実験
   - プロジェクトファイルからヘッダファイルへの参照がある場合
   - プロジェクトファイルからヘッダファイルへの参照がない場合
     - .mファイルと同じディレクトリに.hファイルが存在する場合
     - .mファイルと同じディレクトリに.hファイルが存在しない場合

## ヘッダのインクルード形式の違い

ヘッダ形式
- `#include <header.h>`（システムヘッダやフレームワークのヘッダを指定する場合）
- `#include "header.h"`（開発者が作成したヘッダを指定する場合）

## Header Search Paths
環境変数名: HEADER_SEARCH_PATHS

`#include <header.h>`形式で指定されているヘッダファイルを検索するために検索対象となるパスのリストです。

### non-recursiveとrecursive
Search Pathsの設定では、パスごとにnon-recursiveかrecursiveを設定できます。recursiveが設定されている場合、指定したパスのサブディレクトリも検索対象となります。

### パスの指定方法

パスはスペースで区切って列挙するため、パスにスペースが含まれる場合はクオーテーション（`""`）で囲む必要があります。

## User Header Search Paths
環境変数名: USER_HEADER_SEARCH_PATHS

`#include "header.h"`形式で指定されているヘッダファイルを検索するために検索対象となるパスのリストです。User Header Search Pathsをコンパイラサポートしていない場合、Header Search Pathsの先頭に追加されます。後述するAlways Search User Pathsの設定によってHeader Search PathsとUser Header Search Pathsを使い分けます。Always Search User Pathsが有効になっている場合は`#include <header.h>`形式のヘッダファイルも対象となります。

CocoaPodsをプロジェクトで導入している場合、User Header Search Pathsに自動で以下のようにパスが設定されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/113553/2439187b-3008-b6b9-7426-4da2dc0559df.png)

## Always Search User Paths(Deprecated) 
環境変数名: ALWAYS_SEARCH_USER_PATHS

Xcode 8.3以降で非推奨となり、New Build Systemではサポートされません。プロジェクトでこの設定を有効にしている場合は以下の警告がでます。

> warning: Traditional headermap style is no longer supported; please migrate to using separate headermaps and set 'ALWAYS_SEARCH_USER_PATHS' to NO.

Xcode10ではデフォルトでNoが設定されています。この設定が有効になっている場合、**Header Search PathsよりもUser Header Search Pathsを優先**してヘッダファイルを検索します。User Header Search Pathsはビルドコマンドでは`-iquote`フラグで指定され、`#include`文でヘッダが指定されている場合にのみUser Header Search Pathsを検索します。

## Use Header Maps 
環境変数名: USE_HEADERMAP

Header Mapを有効にする設定です（デフォルトでYes）。この設定が有効になっている場合、Header Search Pathsの設定を考慮せず、ヘッダファイル名からマッピングを行います。これにより、Header Search Pathsの設定を行わずにヘッダをインクルードできます。

## System Header Search Paths
環境変数名: SYSTEM_HEADER_SEARCH_PATHS

システムヘッダファイルを検索するために検索対象となるパスのリストです。優先度が高い順に列挙します。Header Search Pathsに似ていますが、こちらに記述した場合、システムヘッダで見つかるほとんどの警告が表示されないようになります。System Header Search Pathsをコンパイラがサポートしていない場合、Header Search Pathsの先頭に追加されます。

# 実験

## プロジェクトファイルからヘッダファイルへの参照がある場合

ヘッダファイルに対し、プロジェクトファイルからの参照がある場合
（Xcode上でファイル名が赤くなっていない場合）

**結果**
Search Pathsの設定に関わらず、へッダが正しく検索される

## プロジェクトファイルからヘッダファイルへの参照がない場合

ヘッダファイルに対し、プロジェクトファイルからの参照がない場合
（Xcode上でファイル名が赤くなっている場合）

**結果**
.mファイルと同じディレクトリに.hファイルが存在する場合
Search Pathsの設定に関わらず、へッダが正しく検索される

.mファイルと同じディレクトリに.hファイルが存在しない場合
Search Pathsの設定にパスを正しく設定しないと、へッダが正しく検索されない
bundle installで躓いた話

# railsでbundle installするとエラーが出た

※今回は特殊ケースだったので多くの人に該当するものであるかはわかりません。
今後の人のためのメモです。

#### エラー

```
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.

Fetching gem metadata from https://rubygems.org/./Users/user_name/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/bundler-2.0.1/lib/bundler/compact_index_client/updater.rb:111: [BUG] Segmentation fault at 0x00000000000000

// 色々出た

[NOTE]
You may have encountered a bug in the Ruby interpreter or extension libraries.
Bug reports are welcome.
For details: http://www.ruby-lang.org/bugreport.html
```

## 怪しいところ

- gemfile.lock
- gemfile`tzinfo-data`

## 解決

[参考 GitHub](https://github.com/bundler/bundler/issues/6516)

1. gemfile.lockを削除する
2. gemの`tzinfo-data`のオプションを削除

こいつを

```
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
```

こうする

```
gem 'tzinfo-data'
```

### その後`bundle install`

もしできなかったら`bundle update`を実施する。
PHP: イミュータブルなオブジェクトの実装方法

本稿ではPHPでイミュータブルなオブジェクトを実装する方法を紹介する。

なお、本稿で実装したサンプルコードは[GitHubで公開している](https://github.com/suin/php-playground/tree/master/HowToImplementImmutableObject)ので必要であれば参考にしてほしい。

まずはミュータブル(変更可能)なオブジェクトの実装を見てみよう。

```php:Product.php
final class Product
{
    /**
     * @var int
     */
    private $price;

    public function __construct(int $price)
    {
        $this->price = $price;
    }

    public function getPrice(): int
    {
        return $this->price;
    }

    public function setPrice(int $price): void
    {
        $this->price = $price;
    }
}
```

このミュータブルな`Product`クラスでは、`setPrice`メソッドを呼ぶと`$price`プロパティの状態が変更される。

```php
$product = new Product(100);
echo $product->getPrice(); //=> 100

$product->setPrice(300);
echo $product->getPrice(); //=> 300
```

この`setPrice`メソッドのように、呼び出すことでオブジェクトの状態を変更するメソッドのことを「**破壊的なメソッド**」という。イミュータブル(変更不可)なオブジェクトには、破壊的なメソッドが存在しないという特徴がある。

それでは、ミュータブルな`Product`クラスをイミュータブルなクラスに作り変えてみよう。

```php
final class Product
{
    // ...

    public function setPrice(int $price): self
    {
        return new self($price);
    }
}
```

破壊的なメソッド`setPrice`は`$price`プロパティに値を代入するものだったが、イミュータブルな`Product`クラスのメソッドでは、その代りに新しい`$price`を持った`Product`クラスを生成して返す実装になる。完成形のコードは次のようになる:

```php:Product.php
final class Product
{
    /**
     * @var int
     */
    private $price;

    public function __construct(int $price)
    {
        $this->price = $price;
    }

    public function getPrice(): int
    {
        return $this->price;
    }

    public function setPrice(int $price): self
    {
        return new self($price);
    }
}
```

イミュータブルな`Product`クラスでは、`setPrice`を実行してももとのインスタンスの状態が変わることがない:

```php
$product1 = new Product(100);
echo $product1->getPrice(); //=> 100

$product2 = $product1->setPrice(300);
echo $product1->getPrice(); //=> 100
echo $product2->getPrice(); //=> 300
```

**続き**: [PHP: 属性が多いイミュータブルなオブジェクトの実装方法](https://qiita.com/suin/items/6c8a841643269059378a)
Shaderでスペクトログラムを使う

#音声ファイルをスペクトログラムに変換

まずは音声ファイルからスペクトログラムを生成するために[SoX - Sound eXchange](https://sourceforge.net/projects/sox/)というソフトを用意します。
SoXはコマンドラインで使用するソフトなのでコマンドプロンプトを立ち上げ、実行ファイルがある場所まで移動します。
そこで以下のようなコマンドを実行します。
`sox.exe "音声ファイルのパス.wav" -n remix 2  rate 20k spectrogram -y 64 -x 8192 -a -r -m`
<img src="https://i.imgur.com/vIX7jDg.png" width=80%>
このパラメータについてざっくり解説すると

- チャンネル結合
- 聴覚外周波数カット
- 出力画像スケールをH 64px  W 8192px
- グラフ線非表示
- その他表示非表示
- モノクロ化

他にもパラメーターがありますがそれについてはドキュメントを参照してください。
[SoX - Sound eXchange | Documentation](http://sox.sourceforge.net/sox.html)

するとカレントディレクトリに`spectrogram.png`という画像ファイルが生成されます。
<img src="https://i.imgur.com/NZ7fNBP.png" width=50%>
※細すぎて拡大しないと見えません。

#スペクトログラムUnityで読み込む

 Inspectorで以下のように設定します。
<img src="https://i.imgur.com/S2bFOuf.png" width=50%>

後はShaderで煮るなり焼くなりお好きに
<img src="https://i.imgur.com/DDgL36P.png" width=50%>
SDLアプリコンテスト 四日目、五日目

概要

SDLアプリコンテスト、見つけたので挑戦してみる。
sdl_coreをビルドしてみた。

#手順

- ubuntu minimalCDを焼く。14.04LST
- sdl_coreをgit cloneする。
- sudo aptitude install build-essential libavahi-client-dev libsqlite3-dev libssl-dev libudev-dev libgtest-dev libbluetooth3 libbluetooth-dev bluez-tools libpulse-dev libusb-1.0 libnss3
- cmake
- make
- make install

#エラーが出たので対処した。

- libusb-1.0が見つからない。
　sudo aptitude install libusb-1.0-0-dev
- メモリが足りん。
　swapを増設した。
- ./start.shでエラー
　LD_LIBRARY_PATH=/usr/local/lib ./smartDeviceLinkCoreで起動。

#動作確認

android無いので、今度。

#windows7のADT入れ替え

adt-bandle-windows-x86-20140321を壊したので入れ替え。
api-17,api-7,api-5を動かしたい。
adt-bandle-windows-x86-20140702を導入。


以上。
postgresqlの設定

#はじめに

railsでアプリを作っている中でdbをpostgresqlにしたのですがいろいろ苦戦したので

忘備録としてつまずいたところをまとめる。

#再起動

```
systemctl restart postgresql-10
/etc/init.d/postgresql restart
/etc/rc.d/init.d/postgresql restart
```

のどれかで行ける

自分のばあいcentosはsystemctl restart postgresql-10,ubuntuの場合/etc/init.d/postgresql restart

#postgresql.confの設定

postgresqlの設定について

とても参考になったのがこのサイト

PostgreSQL 認証に失敗しないための Ident、MD5、Trust 比較
https://server.etutsplus.com/how-to-configure-postgresql-to-use-ident-md5-trust-authentication/

ここで勉強してから設定したほうがよさそう

とりあえず動けばよい場合は

postgresql..confの

```

listen_addresses = '*'

port = 5432

```

というのがコメントアウトされているので#を消す。

#pg_hba.confの設定

良くないがpg_hba.confの中身を

```
host all all 0.0.0.0/0 md5
```

としたら接続はできるようになる。

この場合 0.0.0.0/0 はどのipアドレスからもアクセスできるようになってしまうのでちゃんと指定したほうが良い。



ちなみにファイルの場所がわからない場合は

```
find / -name pg_hba.conf
```

とすれば検索できる。

#user作成

userを作成してそのあとdbの作成も行う。

userの作成の仕方は

```
psql -U postgres
もしくは
su - postgres
```

通した後

```
psql
```

と入力

表示が

```
postgres=#
```

となっていたらOK

そのあと

```
 CREATE ROLE role_name WITH LOGIN PASSWORD CREATEDB 'password'
```


みたいな感じで作る

withの後はオプションでいろいろ選択できるので自分で検索してあったものを書いてください。


userを作成したらdbを作成します。

```
create database db_name owner owner_name;
```

とすれば作れます。


#railsで設定を行う


railsでpostgresqlを使う場合は

database.ymlを編集します。


```ruby 
default: &default
  adapter: postgresql
  username: username
  password: password
  host: localhost

development:
  <<: *default
  database: db_name
```

みたいな感じで設定します。

ちなみにhostに関してはipアドレスを指定しても良いです。
Express + Webpack の開発環境で auto reload する

SPAアプリのための、REST APIを提供するサーバを構築するに当たってExpressを初めて触りました。`ビルド -> nodeサーバの再起動`を手動で行うのが面倒なので、自動化できないか考えてみました。

**要件**
- typescriptを使用するためにexpressとwebpackを併用する。
- APIなので、HMRは不要。

# やりたいこと ( 整理 )

1. Webpackでtsをビルドする
2. nodeサーバーを起動（再起動)し、express製APIをホストする
3. ソースコード編集時に 1. 2. を自動で行う

# 解決方法

webpackの`--watch`オプションと、nodemonを併用することにしました。ソースコードを編集すると、webpackが自動的にリビルドを開始します。終了後、nodemonがdistフォルダに出力されたjsバンドルの変更を検知して、nodeサーバが再起動されます。

## やり方

1. webpack.config.jsを修正して、ビルド後のjsバンドルの出力先を`dist/server.js`にする

2. nodemonを導入する
`npm install --dev-save nodemon`
nodemonはjsファイルの変更を検知して、自動でnodeサーバーを再起動してくれます。

3. npm scriptを編集する

```json:package.json
"scripts": {
    "start": "webpack --config webpack.config.js --watch & nodemon ./dist/server.js",
  },
```

以上

あとは`npm start`を実行すればOKです。

このやり方がいいのかはわかりませんが、一応auto reloadが実現できました。

ts-nodeを使用したtypescriptのauto reloadはこちらの方法も参考になります。
https://qiita.com/ckoshien/items/1a8b15fe5cc3bfc15199

ブラウザの自動更新とかもやりたければ、こちらが参考になります。
[reload](https://www.npmjs.com/package/reload)
【Unity】Character Controllerでキャラクター移動とJumpをする（Mac bookのキーボードを使う）

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Unity 2018.2.15f1
⭐️Mac book

<font color="Magenta">
Character Controllerでキャラクター移動（矢印キー）とJump（Spaceキー押下）をする
（Mac bookのキーボードを使う）


完成イメージ
![RedHair.gif](https://qiita-image-store.s3.amazonaws.com/0/93155/99141442-de7a-e6b4-d81c-e82f30ccf0de.gif)

<img width="525" alt="スクリーンショット 2019-01-05 17.03.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/4f9c2f89-2324-7bb0-38b8-6e846b9c7c57.png">


1.キャラクターに、Character Controllerを設定する
「Component」-「Physics」-「Character Controller」を選択する
<img width="763" alt="スクリーンショット 2019-01-05 16.35.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/d5dfbe12-e530-370d-813d-dc95553c38af.png">

2.コライダーを設定する。移動スクリプトをコンポーネント追加する。
<img width="1282" alt="スクリーンショット 2019-01-05 16.56.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/f6d7a2cb-0c6f-4b6a-7948-9d21167702f9.png">


```c#:RedHairScript.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class RedHairScript : MonoBehaviour {
    CharacterController characterController;

    public float speed = 6.0f;
    public float jumpSpeed = 8.0f;
    public float gravity = 20.0f;

    private Vector3 moveDirection = Vector3.zero;

    void Start () {
        characterController = GetComponent<CharacterController>();
    }

	void Update () {
        if (characterController.isGrounded)
        {
            moveDirection = new Vector3(Input.GetAxis("Horizontal"), 0.0f, Input.GetAxis("Vertical"));
            moveDirection *= speed;

            if (Input.GetKey(KeyCode.Space))
            {
                moveDirection.y = jumpSpeed;
            }
          
        }
        moveDirection.y -= gravity * Time.deltaTime;
        characterController.Move(moveDirection * Time.deltaTime);
    }
}
```