OmniAICreator/Qiita-1.07M huggingface dataset:
EC2でコンテナ使ってdjangoを使ったwebサイトを作ってみる

## やったこと
AWSのサービスをまだ全然理解できてない(特にコンテナ周り)のでまずはEC2にインスタンス立ててその中にdjangoで作ったwebサーバーを入れたコンテナを立ててアクセスする。という流れをやってみました。djangoを使ったwebページはすでに作成していることを前提に話を進めていきます。

## 開発環境
- python3.6.5
- django 2.0.6
- docker 18.03.1-ce

## インスタンスを立てる
AWSコンソールからインスタンスを作成します。今回は`Amazon Linux 2`の`t2.micro`を使用しました。
また、今回はdjangoのアプリのリポジトリをあらかじめcode commitに作成したのでインスタンスにcode commitの権限を付与したロールを設定します。djangoを使って8000ポートからアクセスするようにするのでセキュリティグループのルールに`8000 tcp 0.0.0.0/0`を設定します。

## 必要なものをインスタンスにインストールする

```sh
$ yum update
$ yum install -y docker
$ yum install git
```

先ほども書いたように今回はdjangoで作成したwebページをcode commitにあげているのでgitもインストールします。

```sh
$ git config --global credential.helper '!aws --region ap-northeast-1 codecommit credential-helper $@'
$ git config --global credential.UseHttpPath true
```
codecommitからクローンできるように設定をします。この設定に関しては[この記事](https://dev.classmethod.jp/cloud/aws/using-codecommit-git-repository-by-iam-role/)を参考にさせていただきました。

## イメージの作成
開発環境が整ったらイメージの作成をします。
今回はcode commitからコードを取ってきているのでdjangoの使い方等は割愛します。
今回Dockerfileは以下のようになっています。

```docker
FROM ubuntu:17.10

RUN mkdir -p /root/firm/ \
  && mkdir -p /root/firm/django_app \
  && mkdir -p /root/.aws

COPY vis_ml /root/firm/django_app/
COPY aws /root/.aws/

RUN apt update \
  && apt install apt-utils -y \
  && apt install python3 -y \
  && apt install python3-pip -y \
  && pip3 install -r /root/firm/django_app/requests.txt \
  && pip3 install awscli

EXPOSE 8000

CMD ["python3", "/root/firm/django_app/manage.py", "runserver", "0.0.0.0:8000"]
```

以下を実行してイメージの作成を行います

```sh
$ docker build -t django_app .
```

無事にイメージを作ることができました。

```sh
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
django_app          latest              234567890123        About an hour ago   1.58GB
ubuntu              17.10               123456789012        3 weeks ago         100MB
```

## コンテナの起動

以下のコマンドを実行してコンテナを起動します。今回は8000番ポートをdjangoのwebページに使用しているので8000を開けるようにします。

```sh
$ docker run -p 8000:8000 -d django_app:latest 
```

これでできた！と思って `http://パブリックDNS:8000` にアクセスすると

```
DisallowedHost at Invalid HTTP_HOST header: ‘hoge:8000’. You may need to add ‘hoge’ to ALLOWED_HOSTS.
```

と怒られてしまいました。
調べてみると、djangoのフォルダにある `setting.py`の中にある`ALLOWED_HOSTS = []`の部分にインスタンスのパブリックIPとDNSを入力してあげたら良さそう。
これを設定してイメージを作り直し、コンテナを起動して再度`http://パブリックDNS:8000` にアクセスすると`Hello, world. You're at the polls index.`と無事に応答がありました！

## 最後に
意外と簡単にインスタンスにコンテナを立ててwebサーバーにする。という部分はできました。まだ全然勉強できてないけどECSとかfargateとか使ったらもっと楽にできるのかなぁと…その辺はもっと勉強します。
仕事の基本ツールMarkdownで簡単にできることと、できないこと

文書を書くのにMarkdownが便利なので、プログラミングにあまり馴染みのない職場でもみんなで使ってチームの生産性を上げましょう。簡単にできることとできないことがあるので、うまく使う方法を考えました。

参考：[仕事の基本ツールにMarkdownを浸透させる](https://qiita.com/84zume/items/2f95022dd23084a17528)

## 簡単にできること

[typora](http://typora.io/)をインストールすれば、他は何もインストールしなくても大体のことができそうです。

- 入力支援
    - プレビュー画面で入力
    - アウトラインの作成と出力
    - 画像の貼り付け
        - クリップボード
        - ドラッグ&ドロップ
    - 表の作成
    - 数式の作成
- HTMLの出力
- PDFの出力

Markdown作成>HTML出力>共有サーバへアップロード>アップロード先をメール配信　の手順をたどれば、共有も簡単です。

## 簡単にはできないこと

追加でコマンドラインツールをインストールすれば、できることもあります。
しかし、あまりプログラミングに馴染みのない職場では難しいことだと思っておくと良さそうです。もしやるとしても、ある程度Markdownに慣れてからにするといいでしょう。

- 文書校正
    - textlint & Atom
- 複数ページをまとめて出力
    - GitBook
    - Sphinx & Pandoc
- 図表番号を自動挿入
    - Pandoc & Pandoc-crossref
        - [まだ Word で消耗してるの？ 大学のレポートを Markdown で書こう](https://qiita.com/Kumassy/items/5b6ae6b99df08fb434d9)
- パワポやExcelを使って作ったグラフや図形を印刷品質で貼り付け
    - `.wmf`で保存して、Inkscapeで`.svg`に変換

複数ファイルに分割した文書をまとめる場合、zipで我慢します。GitBook使うと特に設定しなくても見栄え良くでき上がるのですが、pdf出力は少しクセがあるので、HTML出力に限定して使うのが良さそうです。

図表番号はがんばれば自動で入れられますが、まだチームメンバーみんなで使えるほど簡単にはできなさそうです。

Excelで作ったグラフを印刷品質のベクタ画像で貼り付けて提出するよう求められているとき、推敲や文章校正段階では`.png`にしておきましょう。現状、office製品からすぐに`.svg`を出力できないためです。

## うまく使う方法

まずは、typoraを使って簡単にできることのみに割り切って使うと、みんなで使えて良さそうです。
これだけでも、議事録や報告書、説明資料の作成と共有に大いに役に立ちます。

ある程度Markdownに慣れてきてメリットを実感できてきたら、少しがんばって文書校正の環境を導入してみましょう。分かりやすい文書を書けるようになることで、より生産性が上がるでしょう。

`.docx`や`.pptx`のフォーマット指定で文書の提出を求められているとき、文書作成の始めからそのフォーマットで作成したいところですが、Markdownを使って書き上げてみましょう。推敲と校正作業がずっと楽に、速くできるようになります。

一通りMarkdownで文書が作成できたら、基本はHTMLを出力して共有します。必要に応じて提出フォーマットの`.docx`や`.pptx`に整形するといいでしょう。そのフォーマットにするため、もし手動でコピー&ペーストしたとしても、ずっと早く文書を提出できるようになります。
AWS Lambda の Node.js で axios と cheerio で HTML解析(スクレイピング)

あるテストサーバーから OneTimeToken を取得しようとしたら、レスポンスが HTML しかなかったので、AWS Lambda の Node.js で [axios](https://github.com/axios/axios) と [cheerio](https://github.com/cheeriojs/cheerio) で、HTML解析(スクレイピング)して JSON をレスポンスさせるようにした話。

*Node.js ソースコード*

```javascript:app.js
const axios = require('axios');
const cheerio = require('cheerio');
const url = '{TARGET_PAGE}';

exports.lambda_handler = (event, context, callback) => {
    axios(url)
        .then(({ data }) => {
            const content = getContent(data);
            callback(null, {
                statusCode: 200,
                body: JSON.stringify({ content: content })
            });
        })
        .catch(callback);

};

function getContent(html) {
    const $ = cheerio.load(html);
    const content = $('{TARGET_SELECTOR}').text();
    console.log('Content: ', content);
    return content;
}
```

**ね、簡単でしょ？**

---

##### 開発手順

1. [AWS SAM CLI](https://github.com/awslabs/aws-sam-cli) でプロジェクト作成

    ```
    $ sam init --runtime nodejs8.10 --name onetimetoken
    ```
    ```bash:ディレクトリ構成
    onetimetoken
    ├── hello_world                 <-- Source code for a lambda function
    │   ├── app.js                  <-- Lambda function code
    │   ├── package.json            <-- NodeJS dependencies
    └── template.yaml               <-- SAM template
    ```
2. axios と cheerio をインストール

    ```
    $ cd onetimetoke/hello_world
    $ npm install --save axios
    $ npm install --save cheerio
    $ cd ..
    ```
3. app.js を上記のコードに書き換える
4. ローカルでサーバーを起動
  
    ```bash
    $ sam local start-api

    2018-07-02 14:14:25 Mounting HelloWorldFunction at http://127.0.0.1:3000/hello [GET]
    2018-07-02 14:14:25 You can now browse to the above endpoints to invoke your functions. You do not need to restart/reload SAM CLI while working on your functions changes will be reflected instantly/automatically. You only need to restart SAM CLI if you update your AWS SAM template
    2018-07-02 14:14:25  * Running on http://127.0.0.1:3000/ (Press CTRL+C to quit)
    ```
5. ブラウザ等で http://127.0.0.1:3000/hello を GET で開くとスクレイピング結果の JSON が取得できます。
6. AWS へデプロイ
    1. AWS S3 BUCKET作成

        ```bash
        aws s3 mb s3://BUCKET_NAME
        ```
    2. パッケージ (AWS S3 へコードをアップロード)

        ```bash
        sam package \
            --template-file template.yaml \
            --output-template-file packaged.yaml \
            --s3-bucket REPLACE_THIS_WITH_YOUR_S3_BUCKET_NAME
        ```
    3. デプロイ (AWS Lambdaへデプロイ)

        ```bash
        sam deploy \
            --template-file packaged.yaml \
            --stack-name onetimetoken \
            --capabilities CAPABILITY_IAM
        ```

---

※当初ヘッドレスブラウザで実装してましたが、AWS Lambda では実行できなかったので、HTMLパーサを使うようにしました。

##### 参照
- [AWS SAM CLI](https://github.com/awslabs/aws-sam-cli) 
- [Node\.jsでウェブスクレイピングする色々な方法 \- Qiita]
(https://qiita.com/ledsun/items/0965a60f9bdff04f2fa0)
JavaScript学習記録7　2018年6月30日分

一冊終わったので新しいものに手を出す……前に、だ。何かしらアウトプットしなきゃいけない気がしてきた。そこで、最初の方で目標で掲げたような気がする掲示板をなんとかして作ってみる。まずは何も参考にせずに勝手にやるぞ！
・作るものを洗い出し
　まずは要件定義ってやつをするものだといろんな人が言っていた気がする。のでおとなしく考えてみる。
何を作りたいかというと、「掲示板」……ざっくりしているなあ！
　　・　「タイトル（ページ名）」　
　　・「掲示板」　→入力する場所、送信ボタン、チャット表示エリア
最低限だとするとこれでいいかな？とりあえず組んでみるべ！
![完成予想図.png](https://qiita-image-store.s3.amazonaws.com/0/265808/c35b02d7-aa11-3e52-21cb-12dca2bc6bed.png)
こんな感じの配置になる……でいいな。デザインはほら、積み重ねていくものだからさ。

・タイトル
　つまり「けいじばんだよ！！！！！」と表示するだけ。<BODY>内にちょろっと書いてしまう。フォントサイズは大きめで。おしまい！

・入力フォーム
　ここからが本番。まずはフォームの場所を指定しなきゃだからFRAMESETから作ろうと思う。
　→フレームセット廃止って嫌になるほど出てくるので、HTML5対応を見てみる。と、iframeとやらを使えばいいらしい。srcで他のhtmlファイルを呼び出して埋め込めてその範囲をwidthとかで指定できると。これでええやんか。じゃあ埋め込むものはっていうと

```js
function chat(){
   var say = chatenter.textbox.value;
ーーーーーーーーーー（略）ーーーーーーーーーーーーーーーーーーーーーー
 <INPUT type="text" name="textbox">
 <INPUT type="button" value="送信！" onClick="chat()">
</form>
```
これで入力欄はできたはず？　フォームに入力された文字を変数sayに保管って感じで。送信ボタンもついでにこれでいいな。

・チャット表示エリア
　ぱっと思いついたのが入力フォームで作った変数を配列にして上から表示って方法だ。やってみると……ダメだな。チャット風の順に表示していく命令が思いつかない。やっぱりもう一冊くらいの勉強が必要かな。



参考

<https://techacademy.jp/magazine/5839>
:placeholder-shown 疑似クラス

#:placeholder-shown 疑似クラス

テキストボックス、テキストエリアのように、プレイスホルダーを設定することができる要素です。プレイスホルダーのテキストは HTMLでplaceholder属性で設定可能ですが、HTML上だけでなくCSSの:placeholder-shown擬似クラスを使ってスタイルを充てることが可能です。

https://codepen.io/anon/pen/pKarrd

```
:placeholder-shown {
  opacity: 1;
  color: #ff0000;
  background: #f0f0f0;
  font-weight: bold;
  border: 2px solid red;
}
```

:placeholder-shownはインプット要素全体に対してcssが適用されます。
:を二つ重ねた::placeholder擬似要素は、プレイスホルダーテキストのみにcssが適用されます。

https://codepen.io/anon/pen/pKarrd

```
input::placeholder {
  color: #fff;
  background: #f00;
  font-weight: bold;
}
```

:not()と組み合わせることで、フォーカス時に下記のような挙動も可能になります。

https://codepen.io/anon/pen/GGQvWJ
macOS High SierraでTmuxinatorが動かない

# 対応
入れ直しましょう。

```bash
sudo gem install tmuxinator -n /usr/local/bin
```

# 出力されるエラー

```bash
-bash: /usr/local/bin/tmuxinator: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory
```

# 備考
- 素直に`sudo gem install`ができない理由
    - https://qiita.com/usagisystem/items/71cf3b064fe00cf1608e
PostgreSQL で最低限設定しておくべきログ関連パラメータ＋α

PostgreSQL のログ設定について、基本的に以下を参照すれば良いです。

データベースサポート最前線の現場から（8）：
【PostgreSQL】最低限設定しておくべきログ関連パラメータ3選 (1/3)
http://www.atmarkit.co.jp/ait/articles/1702/16/news015.html

### postgresql.conf の設定

postgresql.conf に以下を設定します。

```
logging_collector=on
log_line_prefix='[%t]%u %d %p[%l]'
log_min_duration_statement=5000
```

それプラスアルファで以下の設定もあると大変便利です。

```
log_directory = '/var/log/postgresql'
log_filename = 'postgresql.log'
log_file_mode = 0640
log_truncate_on_rotation = off
```

### ログディレクトリの準備

Linux ディストリビューションによってログの場所がまちまちで、場合によっては postgres ユーザーにスイッチしないと参照できない場所にあったりします。

ログファイルは一律 /var/log/app_name 配下にまとめて adm グループなら参照できるとかにしておいたほうが管理がラクです。

あらかじめ以下のようにディレクトリも用意しておきます。

```
sudo mkdir -p /var/log/postgresql
sudo chown -R postgres:adm /var/log/postgresql
sudo chmod 750 /var/log/postgresql
```

### ログローテーションの設定

最後にログローテーションの設定をする。

これも PostgreSQL 側は同じファイルに出力するようにしておいて OS の logrotate で制御するほうが他と一緒に管理しやすいのでオススメです。

ファイル /etc/logrotate.d/postgresql を作成し以下のとおり設定します。

```
/var/log/postgresql/*.log {
  daily
  compress
  delaycompress
  notifempty
  copytruncate
  missingok
  create 0640 postgres adm
  rotate 30
}
```

以上です。
(Part 1. Install package.json) Startup JavaScript Project with Webpack4, Vue2, Vue-Router, Vuex, Axios, ESLint, Babel, AirBnb

# 1. Init your project.
```
$ yarn init

question name (Demo_Project): 
question version (1.0.0): 
question description: This is a Demo Project
question entry point (index.js): 
question repository url (https://xxxx/Demo_Project.git): 
question author (Johnny Chu <chuhsun@gmail.com>): 
question license (MIT): 
question private: true
```

# 2. Install Webpack4
```
$ yarn add -D webpack webpack-cli \
              webpack-dev-server \
              webpack-merge
```

# 3. Install Vue in Webpack4
```
$ yarn add vue \
           vue-router \
           vuex \
           vue-template-compiler

$ yarn add -D vue-loader \
              vue-style-loader
```

# 4. Install Axios in Webpack4
```
$ yarn add axios
```

# 5. Install CSS in Webpack4
```
$ yarn add -D css-loader \
              url-loader \
              file-loader
```

# 6. Install Babel in Webpack4
```
$ yarn add babel-polyfill

$ yarn add -D babel-eslint \
              babel-loader \
              babel-core \
              babel-preset-env \
              babel-plugin-transform-object-rest-spread \
              babel-plugin-transform-class-properties
```

# 7. Install Eslint in Webpack4
```
$ yarn add -D eslint \
              eslint-loader \
              eslint-config-airbnb-base \  <--- We use AirBnb coding style.
              eslint-plugin-import \
              eslint-plugin-vue \
              eslint-import-resolver-webpack
```

# 8. Install Stylelint in Webpack4
```
$ yarn add -D stylelint \
              stylelint-config-standard
```

# 9. Install Optimize Libraries in Webpack4

[extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) is not support webpack4. So we use [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).

```
$ yarn add -D optimize-css-assets-webpack-plugin \
              clean-webpack-plugin \
              html-webpack-plugin \
              mini-css-extract-plugin
```

[Part 6. Config index.html](https://qiita.com/shaching/items/3d7fcc34204af9aaaa29)

[Part 5. Config .stylelintrc.json](https://qiita.com/shaching/items/5f21f396f08c45ff598c)

[Part 4. Config .eslintrc.json](https://qiita.com/shaching/items/288926001dbbbc905953)

[Part 3. Config .babelrc](https://qiita.com/shaching/items/8eac974989f32379a5fe)

[Part 2. Config Webpack4](https://qiita.com/shaching/items/a72565bd0836a83df79c)

[Part 1. Install package.json](https://qiita.com/shaching/items/522f4c9f01662a592bb8)

[Github : Vue2-Starter-Kit](https://github.com/shaching/Vue2-Starter-Kit)
Rails MySQL 絵文字が含まれる文字列を保存する場合の設定

# はじめに
昨今スマホユーザーは絵文字をメチャクチャ使います。
単純にデフォルト設定のまま開発を進めていると
``Mysql2::Error: Incorrect string value``
と言われてしまうのです。

# 設定
とにかく重要なのは``utf8mb4``です。
どうも[公式](https://dev.mysql.com/doc/refman/5.6/ja/charset-unicode-utf8mb4.html)によると、

> utf8 という名前の文字セットは、文字あたり最大 3 バイトを使用し、BMP 文字だけを含みます。utf8mb4 文字セットは、文字ごとに最大 4 バイトを使用し、補助文字をサポートします。

ということでデータで絵文字を表現するには4バイト必要になってくるのだと勝手に解釈しています。（調べてないので確かではない）

## database.yml
以下を追記します。

```rb:database.yml
charset: utf8mb4
encoding: utf8mb4
```

## table.schema
うちではRidgepoleを使っているのでそちらの設定です。
[Rails マイグレーションの廃止とRidgepoleの導入・利用方法](https://qiita.com/ayies128/items/c84db2ea41210eae0577)
マイグレーションを使っている人はそちらの環境に当てはめてください。

```rb:table.schema
# -*- mode: ruby -*-
# vi: set ft=ruby :
create_table "tables", force: :cascade, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4" do |t|
  t.string "name"
  t.text "message"
  t.datetime "created_at", default: -> { "CURRENT_TIMESTAMP" }, null: false
  t.timestamp "updated_at", default: -> { "CURRENT_TIMESTAMP" }, null: false
end
```
# 終わりに
知っていればなんともないことですよねー


ブログで見たい方はこちら
[Rails MySQL 絵文字が含まれる文字列を保存する場合の設定](http://nabesys.com/article/2018/07/02573/)
WordPress Auto-PosterプラグインのOAuthリダイレクトURL

Social Networks Auto-Poster プラグインでRe-Authorize Your Facebook Accountをクリックすると
![Facebook NativeAPI.png](https://qiita-image-store.s3.amazonaws.com/0/38162/9d8081f5-9781-dd0f-8471-19b84d5f1c39.png)
以下のエラーが出るようになりました。
![OAuthエラー.PNG](https://qiita-image-store.s3.amazonaws.com/0/38162/f7916f51-d8b4-2b7f-ada4-11cc1f560efd.png)
リダイレクトURLの制限モードがデフォルトで「はい」になったのが原因のようです。
![クライアントOAuth設定.PNG](https://qiita-image-store.s3.amazonaws.com/0/38162/90f4a302-500f-968b-ea53-83d4c758bd16.png)
リダイレクトURLの制限モードが「はい」の場合、「有効なOAuthリダイレクトURI」に以下のURLを追記する必要があります。

https://サイトURL/wp-admin/admin.php?page=nxssnap

![クライアントOAuth設定2.PNG](https://qiita-image-store.s3.amazonaws.com/0/38162/25010d79-41a7-8439-20f2-554aa3c3a249.png)
zabbix 3.0.19のインストールでThe frontend does not match Zabbix database.と怒られた

#ZABBIXをインストール途中で下記のエラーが発生した。
![image_8764.jpg](https://qiita-image-store.s3.amazonaws.com/0/109799/007a8100-40c4-9e57-1ec3-cd7853130c39.jpeg)

#解決方法
データベースの「zabbix」を一度削除して再度create.sqlを実行した。

### ZABBIXデータベースを削除

```bash:bash
mysql -uroot -p -e 'drop database zabbix;'
```
※普通にmysqlにログインしてDROPしてもよい
※まだ作っていない人は削除できないので、作成へ

### ZABBIXデータベースを作成
```bash:mysql
create database zabbix character set utf8;
```

### create.sqlの場所を確認
```bash:bash
find / | grep "\.sql$" | grep zabbix
```

出てきたのがこちら

```bash:bash
/usr/share/doc/zabbix-server-mysql-3.0.19/create.sql
```
※バージョンによっては、create/schememみたいなフォルダにいることもあるらしい。

### データベースを流し込む
```bash:bash
mysql -u zabbix -p zabbix < /usr/share/doc/zabbix-server-mysql-3.0.19/create.sql
```
※パスワードを求められるので、入力してください。
※サーバーのスペックにもよりますが、ちょっと時間がかかります。
※WEBサーバー・DBサーバーどちらもスワップ領域を作っておいたほうがよさそう。特にEC2使ってる人でDBサーバーはRDS使ってる人以外で、EC2内で両サーバーを構築している人。

## 原因
テーブルの構造がおかしかったらしい。。。
下記の状態で入れようとしたが、途中でフリーズしてしまい…でもデータベース見たら、Zabbixのデータベースとテーブルができてたからそのまま進めてしまったのがダメだと。
途中までしかSQLが実行してなかったのかな…？

```bash:bash
cd /usr/share/doc/zabbix-server-mysql-3.0.19/
gunzip create.sql.gz
cat create.sql | mysql -uzabbix -p zabbix
```

## 感想
とりあえず進んだのでOKとする。
Javaでファイルをバイト配列に変換する方法

OracleのBLOB型に、PDFファイルやらCSVファイルを格納するために作ったメソッド。
今まで、バイト配列を扱うことがほぼなかったので今後も忘れないように、書き残しておこうと思います。

# 動作環境

- java Java SE 8u152

# 作ったメソッド

```java
    public byte[] convertFile(File file) {
        try (FileInputStream inputStream = new FileInputStream(file);) {
            ByteArrayOutputStream bout = new ByteArrayOutputStream();
            byte[] buffer = new byte[1024];
            while(true) {
                int len = inputStream.read(buffer);
                if(len < 0) {
                    break;
                }
                bout.write(buffer, 0, len);
            }
            return bout.toByteArray();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
```

# 作ったメソッド修正版
コメントにて教えていただいた点に基づいて、修正したメソッドをいくつか書きます。

### メソッド①
whileによる無限ループがイケてない点と、ByteArrayoutputStreamのcloseし忘れを修正したバージョン。
後述するメソッドのほうがシンプルなので、Java 7以上ならばメソッド②以降を採用すべし。

```java
    public byte[] convertFile(File file) {
        File file = new File(dir + name);
        try (FileInputStream inputStream = new FileInputStream(file);
            ByteArrayOutputStream bout = new ByteArrayOutputStream();) {
           byte[] buffer = new byte[1024];
           int len = 0;
           while((len = inputStream.read(buffer)) != -1) {
               bout.write(buffer, 0, len);
           }
           return bout.toByteArray();
       } catch (Exception e) {
           e.printStackTrace();
       }
        return null;
    }
```

### メソッド②
apache.commons.compress.utils.IOUtils.toByteArrayを使用する方法。
ライブラリを追加できる環境ならOK。

```java
    public byte[] convertFile(File file) throws IOException {
        FileInputStream inputStream = new FileInputStream(file);
        return IOUtils.toByteArray(inputStream);
    }
```

### メソッド③
java.nio.file.Files.readAllBytes()を使用する方法。
Java 7以上じゃないと使用できないの注意。

```java
public byte[] convertFile(File file) throws IOException {
    return Files.readAllBytes(file.toPath());
}
```

### メソッド④
java.io.InputStream.transferTo()を使用する方法。
Java 9以上じゃないと使用できないので注意。

```java
    public byte[] convertFile(File file) throws IOException {
        FileInputStream inputStream = new FileInputStream(file);
        return inputStream.transferTo(outputStream);
    }
```

# 雑感
- 今回はJava 8なので、java.nio.file.Files.readAllBytes()を使用するのが一番行数が少なくてシンプルかも。
- OutputStream, InputStreamを使用する方法に突っ走ってしまったのが失敗。もっと調査してから実装すれば良かった…
MeCab NEologd辞書をWindows Subsystem for LinuxでビルドしてWindowsで使うための手順

# Windows Subsystem for Linuxのインストール
まず、[Windows Subsystem for Linux をインストール](https://qiita.com/yoshikingt/items/ab86411e6031459db805)します。

# Ubuntuの実行
スタートメニューのUbuntuを右クリックして管理者としてUbuntuを実行します。
![ubuntu.png](https://qiita-image-store.s3.amazonaws.com/0/48207/73c939b8-b022-148f-312f-f25a6c110ac1.png)

# ユーザーの登録
Ubuntuでのユーザー名とパスワードを入力します。

```
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: xxx
Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.
```
# ビルドに必要なものをインストール

```
$ sudo apt update
$ sudo apt install -y make mecab libmecab-dev
```

# NEologdのビルド&コピー
`Program Files (x86)`にコピーするために、右クリックメニューなどから**Ubuntuを「管理者として実行」**している必要があります。

```
$ git clone --depth 1 https://github.com/neologd/mecab-ipadic-neologd.git /tmp/mecab-ipadic-neologd
$ bash /tmp/mecab-ipadic-neologd/bin/install-mecab-ipadic-neologd -n -y
$ cp -R `mecab-config --dicdir`/mecab-ipadic-neologd "/mnt/c/Program Files (x86)/MeCab/dic"
$ rm -rf /tmp/mecab-ipadic-neologd
```

もしも[野良ビルドの64bit版MeCab](https://github.com/ikegami-yukino/mecab/releases)をご利用の方は、3行目のコマンドのコピー先を下記の通りにしてください。

```
$ cp -R `mecab-config --dicdir`/mecab-ipadic-neologd "/mnt/c/Program Files/MeCab/dic"
```
Makefile > $$$$ > プロセスIDが追加される

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04.4 LTS desktop amd64
TensorFlow v1.7.0
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
ADDA v.1.3b6
gnustep-gui-runtime v0.24.0-3.1
PyMieScatt v1.7.0
```

### 参考

2014年2月17日の自分のメモ (はてなダイアリー)。

この時期に読んでいたのは
- Managing Project with GNU Make, 3rd ed.

### 情報
(訂正 2018/07/02)


~~以下のMakefileを作成し、make workとすると work.2579などのようにランダムの4桁の数字が追加される。~~

以下のMakefileを作成し、make workとすると work.2579などのようにプロセスIDが追加される。

```
work : hello.c
    echo $@.$$$$
```

@uasi さんの[コメント](https://qiita.com/7of9/items/65cca05ca0afccb8dc1c/#comment-d3d00098ca1f443420f9)にて教えていただきました。
情報感謝です。


### 関連
(追記 2018/07/02)

- [Makefile and use of $$](https://stackoverflow.com/questions/19589957/makefile-and-use-of) @ stackoverflow
Gitでcloneしてブランチ切ってみた


gitでブランチ切って見たのでメモ
##1.git cloneする
既に作成されたプロジェクトに対して、git cloneしてローカルに取り込む

今回はtestというユーザーで、testprojectというプロジェトを作成して、動作検証。

```git clone https://github.com/ユーザー名/プロジェクト名.git``` ←これを使う

```ターミナル
git clone https://github.com/test/testproject.git
```

次にcloneしたプロジェクトにディレクトリ移動

##2.参照先を追加

```git remote add 自分のユーザー名 https://github.com/ユーザー名/プロジェクト名``` 
↑これで参照先追加

```ターミナル
git remote add testuser https://github.com/test/testproject
```
下記コマンドで参照出来ているか確認

```
git remote -v

origin	https://github.com/test/testproject.git (fetch)
origin	https://github.com/test/testproject.git (push)
test	https://github.com/test/testproject (fetch)
test	https://github.com/test/testproject (push)
```

こんな感じに表示されていればOK


##3.データの取得

git fetchしてリモートのブランチの情報を取ってくる

```
#git fetch ユーザー名
git fetcg testuser
```

##4.ブランチ作成
```
git branch testuser
```

###ブランチの確認

```
#ブランチ確認
 git branch
 
#リモートブランチ確認
 git branch -r
 
#他の人が切ったリモートブランチ全て確認
 git branch -a 
```

##5.ブランチを切り替える
masterにいるので作成したブランチに移動します

```
#testuserに移動
git checkout testuser
 
  master
* testuser
```

こんな感じに切り替わってればOK

##6.コミットする

```ターミナル
git add 

git commit -m "hogehoge"
```

##7.ブランチにpushしていく

```
git push origin testuser

remote: Permission to user1/testproject.git denied to user2.
fatal: unable to access 'https://github.com/user1/testproject/': The requested URL returned error: 403
```

pushするがエラーが発生。。。
元々のユーザーでpushしようとして、ブランチを切った先のユーザーで認識できていない？？

git cloneでhttps:github.com/test/testproject.gitしていたが、githubのユーザー名@を追加して再度実行

```
 git clone https://user1@github.com/user1/testproject.git
```
これでpushするとブランチで実行可能になった


##追加

ブランチ作ってチェックアウトしてくれる

```
git checkout -b ブランチ名
```
phpbrew + xdebug環境でのphpstormデバッグの設定

# 前提
- ローカルPCにphpが入っていること
- ローカルPCにxdeugが入っていること

確認方法
```php -v ```とか```php -m |grep xdebug```とか
PHPStoem側でxdebugが読み込まれていることを確認してください。

画像1
![image.png](https://qiita-image-store.s3.amazonaws.com/0/71858/fd488217-d5fd-1d10-dda2-793d1637fd8c.png)




# 1.  PHPSrorm側で実行するserverの環境を登録します。

language & frameworks -> PHP -> Servers から設定します。

serversのところを選択すると、下のような設定画面が表示されるはずです。
設定項目は以下のように設定してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/71858/180be6ab-bd5d-67da-530e-095111fe5a9f.png)



# 2.  xdebug.iniを編集する

1.```xdebug.so``` の場所を探す。
探し方:  ```find /Users -name 'xdebug.so' ```

2.出てきたパスをxdebug.iniに設定する
画像１に出てるパスをクリックするとPHPstormからも直接修正できます。

私はこんな感じにしました。
phpstormのデフォルトポートは9000です。

 ```:xdebug.ini
zend_extension="/Users/hoge/.phpbrew/php/php-7.0.14/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=127.0.0.1 
xdebug.remote_port=9000
xdebug.remote_log=/tmp/xdebug.log
```
# 3.PHPStormでのDebug時に、毎回1行目で止まるのを解除する
下記から解除できます。
`Run > Break at first line in PHP scripts`のチェックをOFF

# 4.php.iniを再読み込みする

# 5.デバッグをONにして、読み込まれるソースにブレイクポイントをつける

# 6 ブレイクポイントで止まれば正常に設定されています。


###参考
[PhpStormでXdebugを使えるようにしよう！ - Qiita](https://qiita.com/taniai-lvgs/items/8e9eba112d2d0ed2530f)
[PHPStormでのDebug時に、毎回1行目で止まるのを解除する - Qiita](https://qiita.com/nekoganekoronda/items/d04312a3b2bf3f9b9a7e)
nvidia-driverをubuntu18.04にインストールする

# 手順
1. nvidia公式からドライバダウンロード
2. 画面端子をグラフィックボード側へつなぎ直す
3. nouveau無効化
4. ランレベルを3にしてCUIへ
5. ドライバインストール
6. BIOSにてセキュアブートを無効化

# 環境
- CPU:Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
- GPU:GeForce 1080 Ti
- OS:ubuntu18.04
- カーネル:4.15.0-23-generic

# 経緯
## とりあえずaptでやってみる
研究室で新しくパソコンを買ってもらったのでubuntu18.04にnvidiaのドライバをインストールしようと思ったら見事にハマったのでメモ。
はじめに[このサイト](https://linuxconfig.org/how-to-install-the-nvidia-drivers-on-ubuntu-18-04-bionic-beaver-linux)を参考にaptからインストールを試みるも、以下のように途中でインストールが止まってしまう。

```terminal
Building for 4.15.0-23-generic
Building for architecture x86_64
Building initial module for 4.15.0-23-generic
```
なんとなくカーネルに問題があるように見えるが、ググったところEscキー連打のあとパスワードを何回か打ち込むとインストールできるらしい(参考:[https://github.com/teejee2008/ukuu/issues/81](https://github.com/teejee2008/ukuu/issues/81))。あまりにも胡散臭いが、実際にやってみたところインストール自体は無事成功した。が、nvidia-smiが通らない。どうやらドライバが認識されていないらしい。ppaを追加しても変わらず。
## 公式からダウンロード
というわけでaptを頼らず、[nvidia公式](http://www.nvidia.co.jp/Download/index.aspx?lang=jp)からドライバをダウンロードすることにした。ドライバのバージョンはNVIDIA-Linux-x86_64-390.67.runだった。
まず先程入れたドライバをapt purge、dpkg --purgeですべてアンインストールした。
次にubuntuにデフォルトで動いているnouveauというドライバを無効化した。以下のようにblacklistファイルを作ると無効化できるらしい(参考:[https://linuxconfig.org/how-to-disable-nouveau-nvidia-driver-on-ubuntu-18-04-bionic-beaver-linux](https://linuxconfig.org/how-to-disable-nouveau-nvidia-driver-on-ubuntu-18-04-bionic-beaver-linux))。

```terminal
$ sudo bash -c "echo blacklist nouveau > /etc/modprobe.d/blacklist-nvidia-nouveau.conf"
$ sudo bash -c "echo options nouveau modeset=0 >> /etc/modprobe.d/blacklist-nvidia-nouveau.conf"
$ sudo update-initramfs -u
$ sudo reboot
```
確認は以下のコマンドでできる。

```terminal
$ lsmod | grep -i nouveau  
```
何も表示されなければnouveauが無効化されいている。が、自分は普通に表示されてしまった。試行錯誤したところディスプレイの端子をグラフィックボード側に挿し直したところ無効化できた。意味がわからない。
次にランレベルを3にした。

```terminal
$ sudo telinit 3
```
Ctrl+Alt+F1でCUIモードに移行。先程ドライバをダウンロードしたフォルダに移動しインストールする。

```terminal
$ sudo bash NVIDIA-Linux-x86_64-390.67.run
```
このあと良くわからない選択肢が多数出てくる。どうやらUEFIのセキュアブートは署名なしのドライバを拒否するらしく、そのための署名を自分で作るか自動で作ってもらうか選べるらしい(参考:[https://qiita.com/arc279/items/99f08b549c95881007b9](https://qiita.com/arc279/items/99f08b549c95881007b9))。適当に選んだところログインループになったりログイン画面にたどり着かなくなったりした。BIOSの画面でセキュアブートをオフにしたところ、普通に起動した。nvidia-smiも通ったのでこれで良しとする。

ちなみにログインループで困ったときに,Ctrl+Alt+F2(なぜかF1キーだと反応しない)でCUIに移行したあと

```terminal
$ sudo ubuntu-drivers autoinstall
```
とすると、なぜかnouveauが起動して入れるようになる。
# 結論
はじめからセキュアブートを切ってaptしとけば普通に動いたのでは・・・？

# 追記
その後アップデートしたらまたログイン画面にたどり着けなくなったので

```terminal
apt ubuntu-drivers autoinstall
```
としたら普通に動きました。やっぱりセキュアブートがだめっぽい。
Pleiades 4.8でTomcat8.5の環境を構築する

## はじめに

Eclipse 4.8(Photon)のリリースにあわせて、Pleiadesもリリースされました。

Tomcat8.0系がEOLを迎えた為、Tomcat8が8.0系から8.5系に変更されています。
ただPleiades 4.7(Oxygen)など旧バージョンからworkspaceを引き継いだ場合、
現状ではTomcat8.0に8.5の設定を組み込んだ状態になってしまう為、
エラーになってしまいます。
(新規にworkspaceを作成する場合は問題ありません)
![20180702.JPG](https://qiita-image-store.s3.amazonaws.com/0/120530/e7f606cf-17aa-cc71-4a66-401996ceec12.jpeg)


Tomcat v8.5の環境を構築する為の手順を記載します。

### 手順
* Pleiadesを起動
* メニュー -> "ウィンドウ" -> "設定"
* 設定メニュー -> "サーバー" -> "ランタイム環境" を選択

* "追加"を選択し新規サーバー・ランタイムの画面が表示されたら
"Apache" -> "Apache Tomcat v8.5" を選択し、"次へ"

* Tomcatサーバーの設定
> 名前: Apache Tomcat v8.5
> Tomcatインストール・ディレクトリ: `Pleiadesのインストールフォルダ`\tomcat\8
> JRE: jre8
* 設定が完了したら、"完了"を選択

以上で設定は終了です。

これでサーバー新規作成時にTomcat v8.5サーバーを選択した時に
サーバー・ランタイム環境に8.5の設定が表示されるようになります。
AlibabaCloudのオブジェクトストレージってどんなの？

# はじめに
今回は、AlibabaCloudでの
オブジェクトストレージに触れます。

[Object Storage Service (OSS) - Alibaba Cloud の拡張性に優れた安全なクラウドストレージ | Alibaba Cloud](https://jp.alibabacloud.com/product/oss#overview)

AWSのS3と同じですね。
もうすでに何年と出回っている技術なので
飛び抜けた機能というのはなかなか見受けられません。
可用性なども、同じぐらいあれば全然問題ないといった印象ですネ。

# イメージ処理
今回、この記事で紹介をしたい点は、イメージ処理です。

[イメージ処理 - イメージ処理（IMG）ガイド| Alibaba Cloud ドキュメントセンター](https://jp.alibabacloud.com/help/doc-detail/44686.htm?spm=a21mg.p38356.b99.400.71953a4bCbqyw7)

・画像をあげた後にサムネイル化
・画像のファイルを変換したい

使われる機能が、オブジェクトストレージと一緒になっているというのは大変便利になっております。

それ、サーバレスで出来るでしょと思う方がいらっしゃるかもしれませんが、
いろいろと設計も必要で時間がかかるものになります

特にデザイナーなどにわかりやすいかなと思っていてとても気に入ってます。

# 実際にイメージ処理をみてみます

## 基本の手順はコチラ

[Alibaba Cloud OSS を利用する前に - クイックスタート| Alibaba Cloud ドキュメントセンター](https://jp.alibabacloud.com/help/doc-detail/31883.htm)

## バケット作成

![20120531.png](https://qiita-image-store.s3.amazonaws.com/0/241104/06c2bf84-8acd-eb2e-be8c-8af6ccc560af.png)

![101bdf38.png](https://qiita-image-store.s3.amazonaws.com/0/241104/c16503c9-afeb-514f-beab-b62533810d89.png)

## バケットにイメージスタイルの追加

![e38901e1.png](https://qiita-image-store.s3.amazonaws.com/0/241104/fb85b623-5bc3-51e0-e281-83802c03484b.png)

![80b4e437.png](https://qiita-image-store.s3.amazonaws.com/0/241104/9f78e098-37ee-2081-03ee-ee8152b231aa.png)

## ファイルをアップロード

![ce9269ec.png](https://qiita-image-store.s3.amazonaws.com/0/241104/5c8310a2-57eb-0eaf-e800-6cbac5de9bc1.png)

![996c09e2.png](https://qiita-image-store.s3.amazonaws.com/0/241104/d48b4058-d0cb-86d3-92af-abb1c12668c3.png)

ドラッグ＆ドロップでアップロードしますと

## プレビューで確認

![26870f8c.png](https://qiita-image-store.s3.amazonaws.com/0/241104/1a69bcc5-c6e5-5420-26f9-b2d539651490.png)

## スタイルの適応

![0b962e52.png](https://qiita-image-store.s3.amazonaws.com/0/241104/ebbe243a-2d04-b1ff-cc2b-f95f504554c9.png)

URLに（権限関係のため、モザイクかけてます:bow:）
**?x-oss-process=style/to100&**
と与えるだけでスタイルが適応されるようですね。

# まとめ
周りのクラウドサービスと大きい差はないのですが
イメージ処理はとても便利ですね。

沢山ファイルを持っていて変換しなければならない場合とか
アップロードしてダウンロードするだけでしょうから
試してみるのもいいのではないでしょうか。
VirtualBoxでマウスクリックができなくなる

# 症状

VirtualBoxで起動していたArch Linuxにて、突然マウスクリックが効かなくなりました。

マウスポインタは表示されていて、普通に動かせます。

クリックは効いたり効かなくなったり、ドラッグだけできなくなったり、フリーズしたりもしました。


# 原因

VirtualBox 5.12.12で、ゲストOSのカーネルがlinux 4.17のときに発生する不具合のようです。

[#17827 (With linux 4.17 and VirtualBox 5.2.12, vboxguest must be blacklisted.) – Oracle VM Virtual](https://www.virtualbox.org/ticket/17827?cversion=0&cnum_hist=4)

ぼくの場合Arch Linuxを使っているんですけど、Linuxカーネルをアップデートしたタイミングで問題が発生したと思われます。


# 解決方法

先ほどのリンクに載っているんですけど、vboxguestをカーネルモジュールのブラックリストに追加すると解決できるみたいです。

あくまで不具合の修正が来るまでの一時的な処置なので、あとで戻す必要がありますけどね。

Arch Linuxだと`/etc/modprobe.d/`以下に`.conf`ファイルを作成して、そこに書いていけばいいみたいです。

[カーネルモジュール - ArchWiki](https://wiki.archlinux.jp/index.php/%E3%82%AB%E3%83%BC%E3%83%8D%E3%83%AB%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB#.E3.83.96.E3.83.A9.E3.83.83.E3.82.AF.E3.83.AA.E3.82.B9.E3.83.88)

```/etc/modprobe.d/modprobe.conf
blacklist vboxguest
```

他のディストロでのやり方は各自調べてみてください。

UbuntuはArch Linuxと同じだと思いますけど、もしかしたらファイル名を`/etc/modprobe.d/blacklist.conf`にしないと動かないかもしれません。

確認はできてませんけど。
【質問】VisualStudioコード（vsコード）のインデント整形の方法について

当方mac High Sierra 10.13.2　にて
virtual studioコードを愛用しており、
基本的には、html css php js辺りのコーディングに使っています。

vsコードにはデフォルト（もしくはBeautyという拡張機能かも）で「コードフォーマット整形」機能が付いているようですが、これだとソースの入れ子構造にまで影響されるため、使用せずにいます。

【要望】
コード整形ではなく、「インデントだけ整形」をしたい

ご存知の方、どうかご教示のほど、お願いします。
Raspberry PIでHDMI接続したテレビの電源をON/OFFしたりする

Google Homeとかに話しかけてテレビのモニタつけて必要な情報を出したりするの憧れますよね？
というわけで、Docker経由でラズパイでHDMI接続したテレビの電源をON/OFFしてみたときのメモ。

そもそもどうやる？
---------------

Docker云々以前にそもそもどうやってやるのかですが、HDMIのCECって規格を使えばできるみたい。ChromeCastとかAppleTVも裏側はこれ使ってるみたいです。

cec-client を入れてやればラズパイからも簡単に操作できます。詳しくは下記記事が参考になったので参照

- [Raspberry PiとテレビをHDMI接続してテレビのON/OFFを確認する](https://qiita.com/mascii/items/132c064c30e321dea911)
- [Raspberry Pi のcec 制御とHDMIのオンオフ](http://takuya-1st.hatenablog.jp/entry/2015/11/10/110558)

CECが使えるDocker環境の構築
--------------------

さて、実機で動かす時はraspbian入れてればcec-utilsを入れるだけで動作するのですが、Docker上ではライブラリ不足で怒られます。
そのため、下記のように`libraspberrypi-bin`も入れてやる必要があります。

```Dockerfile
FROM raspbian/stretch

MAINTAINER koduki

RUN set -x ¥¥
&& apt-get update -y ¥¥
&& apt-get install -y libraspberrypi-bin cec-utils
```

色々回り道したけど、普通にこれが楽でした。

権限を付与してDockerを起動
---------------------

続いてDokcerの起動ですが普通に起動してcec-clientを実行しても下記のようなエラーが出ます。

```bash
root@88dadb99d05e:/app# echo "on 0" | cec-client -s
* failed to open vchiq instance
```

これは文字通りvchiqへの権限がないからです。vchiqってカメラモジュールじゃなかったけ？　とそこはかとない疑問はあるのですがなんか共有してるんでしょう。HDMIだからビデオ機能の一部なのかな？

さておき

```bash
docker run -it --device=/dev/vchiq koduki/rpi-base /bin/bash
```

or

```bash
docker run -it --privileged koduki/rpi-base /bin/bash
```

で問題なく動作します。`privileged`付けるよりは`device=/dev/vchiq`のが正当ですかね。

テレビを操作してみる
----------------

では、準備するが整ったところで具体的な操作です。

### 電源ON

```bash
$ echo "on 0" | cec-client -s
```

### 電源OFF

```bash
$ echo "standby 0" | cec-client -s
```

### HDMIに入力切替

```bash
$ echo 'as 0' | cec-client -s 
```

### 信号のチェックと送信

下記でリモコンとかで捜査した時にどんな信号が流れるかを確認できます。

```bash
cec-client -m -d 8 -b -r
```

信号を直接送るのはこちら。入力切替はこの手順で紹介してることが多いですね。

```bash
echo "tx 4F:82:10:00" | cec-client -s
```

私も最初は下記のコマンドでやってたんですが色々ガチャガチャやってるうちに何故か同じコマンドで受け付けなくなったので上記の`as`を使っています。

まとめ
--------

とりあえずDocker経由でcec使ってテレビのオンオフができるようになりました。
これで、Google Homeとラズパイを連携させてやれば色々できそうですね！

それでは、Happy Hacking!
【python】水素様原子のpx軌道の存在確率密度plot


# 概要
どんな教科書にもだいたい載ってる水素様原子の電子のpx軌道の存在確率密度をプロットしてみました。
![E261C117-CF12-4FDC-A6A6-5D5B1089B259.png](https://qiita-image-store.s3.amazonaws.com/0/257157/6b4b2858-4f2e-dfe3-737a-fb66dc274829.png)


非相対論的なSchrödinger方程式の特殊解の一つに基づいて、具体的には、Wikipediaの[水素原子におけるシュレーディンガー方程式の解](https://ja.m.wikipedia.org/wiki/水素原子におけるシュレーディンガー方程式の解)に基づいて $ \psi {111} $ のplotです。
実際はこんな軌道を電子がこんな確率密度分布をしているわけではないのですが

# 方法
まずxz平面に格子点をとります。
格子点(x,z)に依存した値(存在確率密度 $ | \psi  {111} | ^ 2 $  )に応じて、色をつけて、散布図としてプロットしました。

[水素原子におけるシュレーディンガー方程式の解](https://ja.m.wikipedia.org/wiki/水素原子におけるシュレーディンガー方程式の解)は極座標で記述されているため、直交座標でとった格子点を一回極座標に移してから存在確率密度 $ | \psi  {111} | ^ 2 $ をとっています。

# コード

```python:scatter.py
import matplotlib
matplotlib.use(‘Agg’)
import matplotlib.pyplot as plt
import numpy as np

x,y,z = np.mgrid[-10:10:200j,-0:0:1j,-10:10:200j]

r = (x ** 2 + y ** 2 + z ** 2 ) ** 0.5
t = np.arccos(z / ((x ** 2 + y ** 2 + z **2 ) ** 0.5
))
p = np.arccos(x / (x**2)**0.5)

den_r = r * np.exp(-r)
den_t = np.sin(t)
den_p = np.cos(p)

density =( den_r * den_t * den_p )** 2   * r ** 2 * np.sin(t)

plt.axis(‘equal’)
plt.scatter(x,z, s=3, c=density, alpha=.5)

plt.savefig(“scatter.png”)
```
Laravel バリデーションのマルチバイト対応


alpha, alpha_num ,alpha_dash を使ってもマルチバイト（日本語）が通ってしまう仕様上の問題が起こる

1. 正規表現を使用する
2. カスタムバリデーションで対応する

# 正規表現を使用する

多用しないのであれば都度正規表現 regex を使って対応する
パターンを定数化しておくなど適宜リファクタリングする

```
//英字
$pattern_alpha = '/^[a-zA-Z]+$/';
//英数字
$pattern_alpha_num = '/^[a-zA-Z\d]+$/';
//英数字、アンダースコア、ダッシュ
$pattern_alpha_dash = '/^[\w\-]+$/';
```

```
例
return [
	'name' => 'required|regex:' . $pattern_alpha . '',
];
```

正規表現についてはこちらを参照

> 正規表現の基本 - Qiita
> https://qiita.com/sea_ship/items/7c8811b5cf37d700adc4

# カスタムバリデーションで対応する

適宜
proxy環境でも行ける Ruby最新版インストール

## Rbenvのインストール
まず先にRubyのバージョンを管理するrbenvというツールと
Rubyの最新バージョンのリポジトリ？(ruby-build)をダウンロードします。
### ダウンロードと環境の設定
`$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv`
`$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build`

次に環境の設定を一番下に追記
`$ vi ~/.bashrc`
Macなら
`$ vi ~/.bash_profile`
zshの方は
`$ vi ~/.zsh_aliases`

```shell:~/.zsh_aliases
# rbenv
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
```

### ちゃんと動くか確認
```
$ rbenv --version
rbenv 1.1.1-37-g1c772d5
```
## Rubyをインストールする
それでは、インストールしていきます。

### インストール可能な最新バージョンを見る
```
$ rbenv install -l
...
2.5.0
2.5.1
2.6.0-dev
2.6.0-preview1
2.6.0-preview2
...
```
この時安定の最新バージョンは、2.5.1でした。

### インストールする
```
$ rbenv install 2.5.1
```

インストールでproxyの方はエラーが出たかもしれない。
## proxyの設定
まずgitとcurlとwgetのプロキシ設定を行う

### git
```
$ git config --global http.proxy http://[proxy.example.com]:8080
$ git config --global https.proxy http://[proxy.example.com]:8080
```

### curl
```
$ vim ~/.curlrc
```

```
proxy-user="[id]:[pass]"
proxy="http://[proxy.example.com]:8080"
```

### wget
```
$ sudo vim /etc/wgetrc
```

一番最後の行に足す

```
# proxy
https_proxy = http://[id]:[pass]@[proxy.example.com]:8080/
http_proxy = http://[id]:[pass]@[proxy.example.com]:8080/
ftp_proxy = http://[id]:[pass]@[proxy.example.com]:8080/
```

```
$ rbenv install 2.5.1
Downloading ruby-2.5.1.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.1.tar.bz2
error: failed to download ruby-2.5.1.tar.bz2
```

### proxyエラーの結論
色々探した結果「ruby-build」のデフォルト設定に問題がある
修正します。

```
vim ~/.rbenv/plugins/ruby-build/bin/ruby-build
```

```
http_head_curl() {
  curl -qsILf ${CURL_OPTS} "$1" >&4 2>&1
}

http_get_curl() {
  curl -q -o "${2:--}" -sSLf ${CURL_OPTS} "$1"
}
```
この設定のオプション-qを消します。
↓

```
http_head_curl() {
  curl -sILf ${CURL_OPTS} "$1" >&4 2>&1
}

http_get_curl() {
  curl -o "${2:--}" -sSLf ${CURL_OPTS} "$1"
}
```

### もう一度実行
一応更新

```
$ rbenv rehash
```

### インストール
```
$ rbenv install 2.5.1
```
待ち時間は、少し長め
エラーが出なければ待っておけばいい。

## 最後の設定

### インストールされているか確認
```
$ rbenv versions
2.5.1
```

### 常時使用するバージョンを設定する
```
$ rbenv global 2.5.1
$ rbenv versions
* 2.5.1 (set by /home/master/.rbenv/version)
```
globalで設定したバージョンに「*」が出ていれば完了
### 確認する
```
$ ruby --version
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
```
ある日突然XCUITestが動かなくなったら(fastlane, snapshot, swift, xcode)

# エラー内容

```
_finishWithError:Error Domain=IDETestOperationsObserverErrorDomain Code=5 "Launch session expired before checking in." UserInfo={NSLocalizedDescription=Launch session expired before checking in.}
```

```
Showing Recent Messages Test target encountered an error (Early unexpected exit, operation never finished bootstrapping - no restart will be attempted)
```

だいたいこんな↑みたいなエラーが出ました。

# 解決方法

```ruby
 target 'PJName' do
   pod 'SDWebImage'
 
   target 'PJNameUITests' do
     inherit! :search_paths
     # Pods for testing
   end
 end
```

↓

```ruby
 target 'PJName' do
   pod 'SDWebImage'
 end

 target 'PJNameUITests' do
   inherit! :search_paths
   # Pods for testing
 end
```

targetを入れ子にしないで外に出せばいいみたいだね。
そしたらなんかうまくいったよ！
micro:bit / mbed / SPIデバイス(ADコンバーターMCP3008)を外づけする / それに意味のないとき

# 概要  
microbitにSPIデバイス(MCP3008)を外づけしてみる。[前回](https://qiita.com/cyq04000/items/619bd4a01ab0cc7d42c0)はMicroPythonでプログラムを組んだが今度はmbedを利用する。mbed SPIクラスを利用する。

# ソースコード  
```cpp
#include "MicroBit.h"
SPI            spi(MOSI, MISO, SCK);
MicroBitSerial serial(USBTX, USBRX);

// Use P16 as !CS pin.
MicroBitPin CS(MICROBIT_ID_IO_P16,
               MICROBIT_PIN_P16,
               PIN_CAPABILITY_DIGITAL);

class MCP3008{
    public:
        MCP3008(void);
        
        void     init(void);
        uint16_t read(char CH);
    //private:
};

MCP3008::MCP3008(void){
}
void MCP3008::init(void){
    CS.setDigitalValue(1);
    //spi.format(8, 0); // How many bits in one byte, and SPI mode0(0,0).
    //spi.frequency(1000000);
}
uint16_t MCP3008::read(char CH){
    char mosi[] = {1, 0b10000000 | CH<<4, 0};
    char miso[3];

    CS.setDigitalValue(0);
    for(int i=0; i<3; i++){
        miso[i] = spi.write(mosi[i]);
    }    
    CS.setDigitalValue(1);
    return  (miso[1]<<8 | miso[2]) & 1023;
}

int main(void){
    MCP3008 mcp; // Instantiate the MCP3008 class.
    mcp.init();  // Initialize the instance.
    
    while(1){
        uint16_t ADdata = mcp.read(0); // From which channel to read AD data.
        float    volt   = (float)ADdata * 3.23/1024.0; // 3.23 is the voltage measured at VREF pin.
    
        serial.printf("AD %d, %.2f(v)\n", ADdata, volt);
        wait(1.0);
    }

    release_fiber();
    return 0;
}
```
# 実行結果1  
![image.png](https://qiita-image-store.s3.amazonaws.com/0/193936/121960e5-43e9-67ce-4232-c7a0a59b882e.png)  
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/193936/9e230f44-3271-d162-fb0b-2d84185ac5de.png)  

# 実行結果2: serial.print()もwait()も入れずに実行したとき  
サンプルレートは約18kspsであった。  
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/193936/2cf15e76-5fc1-54de-2c22-a2ca3b7b2942.png)

# 参考
Harry Fiarhead, _micro:bit IoT in C_, I/O Press, pp.131-146  

# 関連  
[はてなブログ / ADコンバーターMCP3008 / SPI](http://ti-nspire.hatenablog.com/archive/category/AD%E3%82%B3%E3%83%B3%E3%83%90%E3%83%BC%E3%82%BF%E3%83%BCMCP3008%20%2F%20SPI)
自分用Vue.jsのVNodeのメモ

# 初めに
ただの自分用メモです

## VueのVNodeの実装
https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js

## hyperscript関数
Vueインスタンス内では、```this.$createElement```関数が使える。これは、preactのh関数と同様の仕事をしてくれる。
戻り値としてVNodeを返してくれる。

## 考察1
element uiのライブラリコード読んで実装していた際に、render関数の第一引数にcreateElement関数(h関数)が渡ってくるけど、```this.$createElement```ってなんだろう？って思って、plugin拡張かなと思ったけど、どこからかのバージョンから追加されていた。どのバージョンからは知らないけど[ソースはここ。](https://github.com/vuejs/vue/blob/956756b1be7084daf8b6afb92ac0da7c24cde2a5/src/core/instance/render.js)
一応```Vue.prototype.$createElement```ではアクセスできなくて、instance生成時(create時)にマウントされてるっぽい。
実験したjsfiddle
https://jsfiddle.net/kahirokunn/z7xb1948/2/

### 実験1
まず、createElement関数は第一引数に　文字列としてタグ名 又は VueComponent クラスを要求する。インスタンスじゃないよ!
[createElementの実装ソース](https://github.com/vuejs/vue/blob/dev/src/core/vdom/create-element.js)

Vueコンポーネントコンストラクタの実験: https://jsfiddle.net/kahirokunn/xer1wup8/5/
タグ名での実験: https://jsfiddle.net/kahirokunn/5yu2f0zg/1/

## 考察2
render関数では戻り値としてVNodeを返さなければならない。

## 考察3
vuejs + jsxで同じ様な事を実験してみた。
jsxはもしや、preactではh関数、vuejsではcreateElement関数の糖衣構文なのでは？(template然り)と思い、実際にconsole.logしてみた。なぜかe.hasOwnPropertyがないよってエラーはでるが、まぁ今は無視しよう。

codesandboxでの実験。
https://codesandbox.io/s/n3yjp23mpp

結果、考察はあっていた。

## $mountのライフサイクルのコード
https://github.com/vuejs/vue/blob/dev/src/core/instance/lifecycle.js

## web runtimeでの$mountの実装コード
https://github.com/vuejs/vue/blob/cfd73c2386623341fdbb3ac636c4baf84ea89c2c/src/platforms/web/entry-runtime-with-compiler.js

## $mountの引数に渡せるElement
MDN: https://developer.mozilla.org/ja/docs/Web/API/Element

## Proxyコンポーネント
Vueのコンポーネントをリアクティブに他の所へ飛ばす



## まとめ
h関数案外使ってみると使いやすいし、jsxもいいなーって。やっぱコンポーネントをjqueryみたいに特定の所に挿入したいとかって要望が出てくると（主にplugin側の仕事）、template構文だけじゃあ足りなくなってくるのかなーって。
もうちょっと内部アルゴリズムから、実践への適用の経験が増えたら、まとめてちゃんと記事書こうかな。

## 参考資料
* 仮想DOMの内部の動き https://postd.cc/the-inner-workings-of-virtual-dom
* VNodeについて。 http://mithril-ja.js.org/vnodes.html
* Vue.jsの仮想DOMと差分レンダリングの仕組み1 http://blog.engineer.adways.net/entry/2018/01/19/200000
* Vue.jsの仮想DOMと差分レンダリングの仕組2 http://blog.engineer.adways.net/entry/2018/02/02/183000
ELB配下に置いたredashサーバーのHTTPS化

redashというよりnginxの設定の話です

## 構成

- https://redash.io/help/open-source/setup に載っているAMIを使ってセットアップしたRedash (Ubuntu 16.04)
- Elastic Load Balancer経由でバックエンドの80番ポートに接続、ELB側は443のみ許可
- ACMで取得したSSL証明書をELBにインストール

## 起きていた問題

- `https://redash.example.com`に接続しようとすると、`http://redash.example.com?next=http://redash.example.com/login` にリダイレクトされてしまった

## やったこと

- `/etc/nginx/site-available/redash` を変更

```
upstream rd_servers {
  server 127.0.0.1:5000;
}

server {

  server_tokens off;

  listen 80 default;
  server_name redash.example.com;
  if ($http_x_forwarded_proto = 'http') {
     return 301 https://$server_name$request_uri;
  }

  access_log /var/log/nginx/rd.access.log;

  gzip on;
  gzip_types *;
  gzip_proxied any;

  location / {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
    proxy_pass       http://rd_servers;
  }
}
```

- redashを再起動

```
$ sudo nginx -s reload
```

### 主にやったこと

- http://でアクセスしたらhttps://にリダイレクトするようにする


```
  server_name redash.example.com;
  if ($http_x_forwarded_proto = 'http') {
     return 301 https://$server_name$request_uri;
  }
```

- `proxy_set_header` の値を変更
    - $schemeのままだと常に`http`が入ってしまっているので、$http_x_forwarded_protoを使うことでELBから転送された元のプロトコル(`https`)をセットするようにする。

```
- proxy_set_header X-Forwarded-Proto $scheme;
+ proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
```
関数適用演算子 ($演算子)


# 関数適用演算子 ($演算子) とは

関数 f と引数 x をとり、関数 f に対して 引数 x を適用する中置き演算子。
関数と引数の糊として利用できる。

```console:$の定義
($) :: (a->b) -> a -> b
f $ x = f x
```

```console:$の利用例
> map (*2) $ [1,2,3,4]
[2,4,6,8]
```

# $演算子の特徴

* 右結合
* 優先度は関数合成(.)より低い


# $演算子の利用

## ()の取り外し
$演算子は右結合であるから先に関数に渡す引数を評価させられる。

Haskellのスペースは、左結合になるため、右側を先に評価するためには、()で囲む必要がある。

```スペースは左結合.hs
sum (map sqrt [1...130])
```

↓ $演算子を使えば、()を取り外せる。

```$演算子は右結合
sum $ map sqrt [1...130]
```


## 関数合成と関数適用演算子による書き換え

()が多用されている式を関数合成と$演算子でスッキリさせることが出来る。


```複雑な式.hs
replicate 2 (product (map (*3) (zipWith max [1,2] [4, 5])))
```

上式を以下の形に変換する

```console:変換する形
1引き関数 . 1引き関数 . 1引き関数 $ 一番内側の式(引数)
```
> NOTE: 関数合成は、1引き関数同士でしか合成できない

1. ()内の一番内側を引数として $ の右側に持ってくる
2. 適用される1引き関数を順番に左側からおいていき、「.」で結合する
 
複雑な式を関数結合と$演算子による変換結果

```関数結合と$演算子による変換.hs
replicate 2 . product . map (*3) $ zipWith max [1,2] [3,4]
```

> NOTE: 関数合成(.)のほうが優先度が高いことに注意
> 1 先に関数合成
> 2 $オペランドの右式が評価
> 3 合成した関数に右側の評価式が適用される
~/.ssh 用の .gitignore

# ~/.ssh

お行儀悪いですが

```~/.ssh/config
Include conf.d/*/config
```

な感じで、以下(例)のような感じです

```bash
$ tree -a -I '.git'
.
├── .gitignore
├── conf.d
│   ├── bitbucket.org
│   │   ├── foo.bitbucket.org
│   │   ├── foo.bitbucket.org.pub
│   │   └── config
│   ├── github.com
│   │   └── config
│   └── gitlab.com
│       └── config
├── config
├── id_rsa.pub
└── baz.somewhere.pub
```

# .gitignore

調子に乗って `.gitignore` を書いてみました。

.gitignore 周りの仕様が変わるかもしれないし、そもそもあまりお薦めはしません。


```/path/to/やっぱやめた/.gitignore
*

*.swp
*.tmp
*.pem
*.lock
known_hosts
!config
!.gitignore
!*.pub

!conf.d
!conf.d/*
conf.d/*/*
!conf.d/*/.gitignore
!conf.d/*/config
!conf.d/*/*.pub
```

`!`の良い練習になると思ってやっみたけど一応こんな感じかなと。

ただ、途中でリスクでかすぎると思って結局止めたんですけどね。
一部冗長なのはやはり怖いからです :sweat: 


# ご参考まで

- [SSH config file for OpenSSH client \| SSH\.COM](https://www.ssh.com/ssh/config/)
- [Git \- gitignore Documentation](https://git-scm.com/docs/gitignore)
flowtype の Maybe と Optional を理解する


# オブジェクトのプロパティでの例

まずはどちらも使わない例


```js
type Book = {
	name: string,
}

type Standard = {
	book: Book,
}

const a0: Standard = { book: { name: 'js' } }
const b0: Standard = { book: null } // Error !!
const c0: Standard = { book: undefined } // Error !!
const d0: Standard = {} // Error !!

console.log(a0.book.name) // ok
```

## Optional property

```js
type Optional = {
	book?: Book,
}

const a1: Optional = { book: { name: 'js' } }
const b1: Optional = { book: null } // Error !!
const c1: Optional = { book: undefined }
const d1: Optional = {}

console.log(a1.book.name) // Error !!

if (a1.book) {
	console.log(a1.book.name)
}
```

**null は許容しません**。


## Maybe property

```js
type Maybe = {
	book: ?Book,
}
const a2: Maybe = { book: { name: 'js' } }
const b2: Maybe = { book: null }
const c2: Maybe = { book: undefined }
const d2: Maybe = {} // Error !!

console.log(a2.book.name) // Error !!

if (a2.book) {
	console.log(a2.book.name)
}

```

**空を許容しますがプロパティは必要です。**


## Maybe and Optional property
```js
type MaybeOptional = {
	book?: ?Book,
}
const a3: MaybeOptional = { value: { name: 'js' } }
const b3: MaybeOptional = { value: null }
const c3: MaybeOptional = { value: undefined }
const d3: MaybeOptional = {}

console.log(a3.book.name) // Error !!
a3.book

if (a3.book) {
	console.log(a3.book.name)
}
```

紛らわしいので使わないかもしれません。


# 関数の引数での例

まずはどちらも使わない例

```js
function assertStandard(book: Book) {
	book.name // ok
}

assertStandard({ name: 'js' })
assertStandard(null) // Error !!
assertStandard(undefined) // Error !!
assertStandard({}) // Error !!
assertStandard() // Error !!
```

## Optional Argument

```js
function assertOptional(book?: Book) {
	book.name // Error!
	if (book) {
		book.name
	}
}

assertOptional({ name: 'js' })
assertOptional(null) // Error!!
assertOptional(undefined)
assertOptional()
```

**nullを許容しません。**

## Maybe Argument

```js
function assertMaybe(book: ?Book) {
	book.name // Error !!
	if (book) {
		book.name
	}
}

assertMaybe({ name: 'js' })
assertMaybe(null)
assertMaybe(undefined)
assertMaybe()
```

**引数がないけど許されます。**

## Optional and Maybe Argument

```js
function assertMaybeOptional(book?: ?Book) {
	book.name // Error !!
	if (book) {
		book.name
	}
}

assertMaybeOptional({ name: 'js' })
assertMaybeOptional(null)
assertMaybeOptional(undefined)
assertMaybeOptional()
```

### 参考
* [Function Types \| Flow](https://flow.org/en/docs/types/functions/)
* [Maybe Types \| Flow](https://flow.org/en/docs/types/maybe/)
* [Flowtype: Understanding optionals and null – Wietse Venema](https://wietse.loves.engineering/flowtype-understanding-optionals-and-null-2fa7b98210ce)
* [flowtypeのUtility Typeについて その1 \- Qiita](https://qiita.com/kinzal/items/e1898c89af5618e18334)