OmniAICreator/Qiita-1.07M huggingface dataset:
人間中心デザイン入門01(歴史回)

# なぜ人間中心デザインを学んでるの？

---
ユーザーにとって使いやすいものをつくって、たくさん使ってもらいたいという考えになれた頃にその視点の学問があるということを上司先輩さんが教えてくれたので勉強を始めてみた :pencil: 
<div align="center">
![image.png](https://qiita-image-store.s3.amazonaws.com/0/138681/aa4358f1-8bba-8551-03b0-74c885e3839a.png)
</dev>

---
# で、なんで必要なの？

---
焦らずちょっと深呼吸
<div align="center">
![image.png](https://qiita-image-store.s3.amazonaws.com/0/138681/e2463f32-bd14-aba3-e51a-77bcfce0c31f.png)
</dev>

---
## まずは歴史的背景を把握

---
### ユーザーと作り手の関係の歴史的変化があった
 - 作り手とユーザーとの距離は次第に遠くなり、作り手がユーザーのニーズを理解しにくくなってきた
    - 大量生産システムが導入され始めた頃に、製造業とユーザーは分断された

---
過去
<div align="center">
![image.png](https://qiita-image-store.s3.amazonaws.com/0/138681/1f951b5b-4ba3-1543-6f0d-a80d8f44d0c4.png)
</div>

---
現在
<div align="center">
![image.png](https://qiita-image-store.s3.amazonaws.com/0/138681/1764cd1b-676c-edd2-14c9-ad2078d647bc.png)
</div>

---
### 人と道具のインターフェースの歴史的変化があった
- 道具そのものがコンピュータによる認知的インタフェースを持ったものに変化してきた 
    -  今で道具で手動で作業できていたものが機械化され画面などで操作できるようになるなど
        (機械化が進んだとき、人の立場を考慮できなかったことがあり、過酷な労働を強いられていたり、人から見るとわかりにくい仕様であるために間違いが多発することがあったがそれらを見直す学問が発達したりしていた)

---
過去
<div align="center">
![image.png](https://qiita-image-store.s3.amazonaws.com/0/138681/acff4217-6f2b-2b81-3b2c-03605a015df6.png)
↓
<img width="300" alt="hiokoshi" src=https://qiita-image-store.s3.amazonaws.com/0/138681/8129037d-6d34-cab6-4fcf-75b02e9c6d71.png>
</div>

---
現在
<div align="center">
![image.png](https://qiita-image-store.s3.amazonaws.com/0/138681/68a0b027-666c-2763-a46d-9ba9c0a90004.png)
</div>

---
### 道具が社会に及ぼす影響力の変化があった
- システムが巨大化・複雑化し、ヒューマンエラーが社会に及ぼす影響は次第に大きくなってきた
    - ちょっとした使いにくさや、ユーザーの慣れへの考慮不足が大きなトラブルになったりした(4日間ゆうパックの配達が止まったり飛行機の操作を誤って機体を一回転させてしまったり)

---
## つまり人間中心デザインとは？
ユーザーの利用状況を理解し、常に使う人のことを考え、確かめつつ設計・計画を立案するものづくり共通基盤。

---
### こんな感じ
それぞれの分野が人間中心に考えられたら幸せだねってことになったっぽい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/138681/eea301cb-37b0-1024-02c4-a25a5f2822e4.png)

---
おしまい
<div align="center">
![image.png](https://qiita-image-store.s3.amazonaws.com/0/138681/65941fdd-d82f-01d9-004d-30d589116dc2.png)
</div>
FlutterでCircleAvatarをタップできるようにする

Flutterにはアバターなどを表示するときに円形にクリップしてくれるCircleAvatarという便利ウィジェットがあります。
しかしこのウィジェットはonTapイベントに対応しておらず、アバタータップしたらなにかするような挙動を実装できません。
ついでにアバタータップしたらリップルエフェクトも欲しいですよね。

Stackでウィジェットを重ねることでこれを実現することができます。
こんな感じです。

```dart
Stack(
  children: <Widget>[
    CircleAvatar(
      backgroundImage: AssetImage('assets/comp.jpg'),
      radius: 60.0,
    ),
    RawMaterialButton(
      onPressed: () {},
      child: Container(
        width: 120.0, // CircleAvatarのradiusの2倍
        height: 120.0,
      ),
      shape: new CircleBorder(),
      elevation: 0.0,
    ),
  ],
)
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/18273/d5e44679-6e02-e87c-ac9b-eeef902a51f7.gif" width="300px">
Nuxt.js を IntelliJ から利用した際に、 `@` や `~` alias を解決してくれない対処

Nuxt.js を公式サイト通りにセットアップ後にIntelliJで起動した場合、 以下のようなComponentなどで利用する `~` や `@` へ `Cmd+Click` で直接飛ぶことが出来なくて不便だった。

```js
import HelloWorld from '~/components/HelloWorld.vue'
```


# 環境

```
"nuxt": "^2.0.0",
```

# 対処方法 
`nuxt.config.js` へ以下を書き足し、 IntelliJ側の Webpack configuration を変更することで解決した。

```js:nuxt.config.js
// 追加
const path = require('path');

module.exports = {
  ...
  // 追加
  resolve: {
    extensions: ['.js', '.json', '.vue', '.ts'],
    root: path.resolve(__dirname),
    alias: {
      '@': path.resolve(__dirname),
      '~': path.resolve(__dirname),
    },
  },
}
```

Preference -> Languages & Frameworks -> webpack -> webpack configuration file

```:旧
/Users/xxxx/project/webpack.config.js
```

↓

```:新
/Users/xxxx/project/nuxt.config.js
```

Nuxtjs♡IntelliJ
MPE(MarkdownPreviewEnhanced)でmermaidのグラフが真っ黒になる問題


なぜかは分からないけどVScodeにMPEを入れてmermaidのグラフを表示させようとするとデフォルトで真っ黒になってしまって難儀したのでメモ
（日本語だと出てこないので英語で検索して[これとか](https://github.com/shd101wyy/markdown-preview-enhanced/issues/983)を参考にして解決した）

要は「MPEのmermaid配色テーマを一度変更」してあげると直るようです。手順は以下の通り

1. VSCodeの設定を開く（`Ctrl+,`）
2. 「拡張機能」→「MarkdownPreviewEnhanced」を選択
3. 下にスクロールして「Mermaid Theme」のプルダウンをクリックしてdefaultから変更（なぜか一度変更するとdefaultでもちゃんと表示してくれるようになる）

慣れてないので、拡張機能の設定がVSCodeの設定の下にぶら下がってるとは思わなくて解決までに時間がかかってしまった
GoogleAppsScriptで路線ごとに電車の遅延情報をSlackに送信


# 通学前に電車の遅延情報が知りたい
でも毎回調べるのはだるい->予め決められた時間にSlackに通知がくるBotが欲しい
->Yahoo路線情報から引っ張ってきてGASで時間を決めて送信
# 便利なところ
- 開発時に毎回エラーログを見るのが面倒->ドキュメントファイルでログが見れます
- 路線ごとの遅延情報が欲しい！->通知したい路線のURLを配列に入れればOK

```javascript:slack.train.gs
var DEV_MODE = false; //開発時はtrueにすることで下で指定したドキュメントファイルでエラーログが見れます
var LOG_FILE_ID = 'デバッグ用に事前にGoogleドキュメントファイルを作ってファイルIDを記載'; 
var RECIPIENT = 'gmailのアドレス';
var HOOK_POINT = 'SlackのIncoming URLを作成して貼り付けてください';

function SlackPost() {
  try {
    // ログをクリア
    if (DEV_MODE) getLogFile().getBody().clear();

    //日付取得とフォーマット整形
    var currentDate = new Date();
    var date = Utilities.formatDate(currentDate, "Asia/Tokyo", 'M月d日 HH時mm分');

    // 通知したい路線のURL
    var area_list = ["https://transit.yahoo.co.jp/traininfo/detail/267/0/",
      "上みたいな感じでyahoo路線図のURLを貼り付けてください"];
    var line = "";
    for (var i = 0, len = area_list.length; i < len; ++i) {
      var response = UrlFetchApp.fetch(area_list[i]);
      var myRegexp = /<div class="mainWrp">([\s\S]*)<!--\/#mdServiceStatus-->/i;
      var line_html = myRegexp.exec(response.getContentText())[1];
      var reg_route = /<h1 class="title">([\s\S]*?)<\/h1>/
      var reg_status = /\W\]<\/span>([\s\S]*?)<\/dt>/;
      var reg_content = /<p>([\s\S]*?)<span>/;
      var route = line_html.match(reg_route)[1];
      var status = line_html.match(reg_status)[1];
      if (line_html.match(reg_content)) {
        var content = line_html.match(reg_content)[1];
      } else {
        var content = "路線のURLがありません";
      };
      line += ('━─━─━─━─━─━─━─━' + "\n" + route + "\n" + status + "\n" + content + "\n");
    };

    // slackに投稿
    function postMessage(message, hookPoint) {
      var payload = {
        "text": message,
        "channelId": '#slack_study',
        "userName": 'train-info',
        "icon_emoji": ':train:'
      }
      var options = {
        "method": "POST",
        "payload": JSON.stringify(payload),
        "headers": {
          "Content-type": "application/json",
        }
      }
      var response = UrlFetchApp.fetch(hookPoint, options);

      if (response.getResponseCode() == 200) {
        return response;
      }
      return false;
    }
    postMessage("\n" + "◆○○遅延情報 " + "\n" + date + "\n" + line, HOOK_POINT);//ooには路線名や地域名を入れてください

  } catch (e) {
    Logger.log('\n' + JSON.stringify(e, null, '  '));
  } finally {
    // ログを書き込む
    if (DEV_MODE) getLogFile().getBody().appendParagraph(Logger.getLog());
  }
}
function getLogFile() {
  if (this.logFile === undefined) {
    this.logFile = DocumentApp.openById(this.LOG_FILE_ID);
  }
  return this.logFile;
}

```
# プロジェクトトリガーの設定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/215474/ac669ece-53c8-ce3d-593b-ef6e133c6f94.png)


## 参考にさせていただいたサイト
- [【GoogleAppsScript】【Slack】電車遅延情報post](https://qiita.com/Neko_h/items/937ecde84bde9c1c1710)[@howdy39](https://qiita.com/howdy39)さん
- [Google Apps Scriptのログ設計 #gasja](https://qiita.com/howdy39/items/4dc11af7b1c74c17f7f7)
[@Neko_h](https://qiita.com/Neko_h)さん

ありがとうございました。
# 次に向けて
欲しい値だけが得られるよう正規表現を工夫しましたが、もっといい方法がある場合は教えてください！
OASGraphって何?


## はじめに（おことわり）
筆者はGraphQLについては、先週[こちら](https://api-meetup.doorkeeper.jp/events/80479)に参加してようやく学習を開始したという入門者です。この記事を書く前に本来ならGraphQLを触って理解を深めてから、というのが筋とは思ってます。とはいえスピード感も重要でパラレルで理解を深めて行くのも一つの手と考えているため、OASGraphについて発表された内容を、浅い理解なりに、むしろ読みながら書きながら理解する感じで、まとめてみようと思います。誤訳・誤解・理解が浅い部分を含む可能性および、あくまで私自身の見解である点ご了承ください。間違いなどありましたらコメント頂けますと幸いです。実際に試した内容などについては別途まとめようと考えており、本記事は文章オンリーです。

## StrongLoopが発表したOASGraph
以下の内容は[StrongLoopの発表レター](https://strongloop.com/strongblog/announcing-oasgraph/)を内容に私の理解を加えて書いています。
多くのAPI系の方々が日々チェックされている（？）ProgrammbaleWebにも発表内容の[記事](https://www.programmableweb.com/news/ibmstrongloop-announces-graphql-wrapper-rest-apis-oasgraph/brief/2018/10/01)が掲載されてるようです。


StrongLoop（買収されたので実質IBM）が、2018/9/24に発表したソフトウェア・パッケージで、TypeScriptで実装されてるようです。
OpenAPI Specification(OAS)に基づいて記述したAPIをGraphQLのインターフェースに変換してくれるそうです。既存のREST（っぽい）API向けにGraphQLのラッパーを作ってくれるものなので、すでにあるREST APIの資産を活かすことができる理解です。
API管理製品であるAPI Connect、フレームワークであるLoopBackは、REST APIを前提としていますが、ここ数年で浮上しているデータセントリックなGraphQLへの対応も並行していくことで、開発者が新しく効率的なAPIデザインが使えるようにするのが目的のようです。

GraphQLが浮上してる一方で多くの企業はREST APIをベースとしているのも事実です。StrongLoop/IBMとしてはREST APIとGraphQLは共存、またREST APIがGraphQLのバックエンドとして機能していくというスタンスのようです。実際GraphQLの勉強会でも、GraphQLがREST APIを全て置き換えることは（少なくとも現時点）できないとされていたので、ケースごとに使い分け・共存して行くというのは共通認識なのかなと思います。

といった背景をもとに、OAS・SwaggerのフォーマットからGraphQLのスキーマを自動生成してくれるOASGraphを開発したようです。
REST APIのリクエストとレスポンスのモデルに対し、実際のREST APIを呼び出すための
resolverを作成し、GraphQLのレスポンスを生成するというマッピングを行うようです。
ここは実際に参考資料先にもあるGetting Startedなどを動かして理解を深めようと思います。。

この手のライブラリは他にも数年前から存在してると思いますが、認証メカニズム、GraphQLの要件を満たすためのサニタイズ・デサニタイズ機能などを提供していることが差別化要素としているようです。この辺りもまず GraphQL自体の理解を深めることでより理解できる内容なので、そちらの勉強も進めます。。

* 認証メカニズム
	* セキュアなエンドポイントをviewerにラップしてAPI keyやクレデンシャルをinputとして使うようです。

* サニタイズ
	* GraphQLと互換性のない部分を自動サニタイズするそうです。例えばREST API側で、-, ., ,, :, ;といったGraphQLでサポートされない文字がパラメータやデータ定義に入っていたら除去。
	* GraphQLのqueryからREST APIを正しく呼び出すためにデサニタイズし、レスポンスをGrapshQLに準拠した結果を返すために再サニタイズする、といったことを行うようです。

また、このOASGraphを使って、API Guruに登録されているAPIのうちOASとしてwell-formedなAPIについて、上記のような処理を試して概ね成功してるようです。あくまでOASに完全に準拠してないとうまくいかないようなので、既存のREST API資産を活かすためにOASGraphを使うという場合、まずここの定義の見直しから始まる予感もします。


## まとめ
GraphQLの学習を始めたばかりの立場では、OASGraphがどれくらい有益になるかまだ書けていない状況ですが、GraphQLの学習と並行しながらOASGraphの理解を今後も深めて行こうと思います。

## 参考資料
* https://strongloop.com/strongblog/announcing-oasgraph/
* https://v4.loopback.io/oasgraph.html
* https://github.com/strongloop/oasgraph
* https://www.npmjs.com/package/oasgraph
* https://www.programmableweb.com/news/ibmstrongloop-announces-graphql-wrapper-rest-apis-oasgraph/brief/2018/10/01
Python 三項演算子の書き方

Javaとは違った書き方だったのでメモ。

Pythonの言語仕様では `条件式` と呼ぶ

### Pythonの三項演算子

`変数` =  `真の場合の代入値` if `条件文` else `偽の場合の代入値`

```python:Python
x = 10 if a > 0 else 20
```

aが0より大きい場合はxに10が代入される。
それ以外の場合はxに20が代入される。

見慣れない記述であるが、英文法に近い書き方。
先に結論(x=10)を書いて、その条件(if a > 0)、成立しなかった場合(else 20)を副詞的に追加する。

### Javaの三項演算子

`変数` = `条件式` ? `真の場合の代入値` : `偽の場合の代入値`

```java:Java
x = (a > 0) ? 10 : 20
```

### 三項演算子をネストする

三項演算子で下記のような　`elif`　に当たる書き方もできる。

```python:Python
if a > 0:
    x = 10
elif a == 0:
    x = 20
else:
    x = 30
```

`変数` =  `真の場合の代入値` if `条件文` else `偽の場合の代入値` if `条件文` else `偽の場合の代入値`

```python:Python
x = 10 if a > 0 else 20 if a == 0 else 30
```

一行で表すと読みづらい...

**追記** @shiracamus さんのコメントを元に

> 括弧で囲って、改行を入れるといいですよ。

```python:Python
x = (10 if a > 0 else
     20 if a == 0 else
     30)
```

また、以下のような書き方もできるとのこと。
`x and y` や `x or y` のような書き方を短絡評価というらしい

> ちなみに、条件次第ですが、こんな書き方もできます。

```python:Python
>>> a = 0
>>> a > 0 and 10 or a == 0 and 20 or 30
20
```

> 0や空文字などFalseとして判定される値は、最後の値にしないと意図しない結果になります。

以下のような書き方など

```python:Python
>>> a = 0
>>> a > 0 and 10 or a == 0 and 0 or 30
30
```
Pythonのインデント

今まで使ってきた言語にはなかったルールなので、備忘録として。

* pythonは **インデント** で文をグループ化しているのが特徴
    * Java等のように **{}** を使用しない
* これは、コードの可読性も兼ねてる仕様らしい


### サンプル

```python:Python
x = 3
if x == 3:
    print("True!") # ifのブロック
    print("x is 3") # ifのブロック
```

```console:console
True!
x is 3 
```


Javaだとこう

```java:Java
int x = 3;
if (x == 3) {
    System.out.println("True!");
    System.out.println("x is 3");
}
```


#### インデントを正しく空けないと...

```python:Python
x = 0
if x == 3:
    print("True!") # ifのブロック
print("x is 3") 
```

結果が偽なのに `x is 3` が出力される

```console:console
x is 3 
```

### インデントはいくつ空けるのが適切か？

半角スペース1つだけ空けてもグループ化されるが、
有名なコーディング規約によると
[PEP8](https://www.python.org/dev/peps/pep-0008/#indentation) によると、 **半角スペース4つ** が１レベルのインデント として空けるのが良いとのこと

> Use 4 spaces per indentation level.
fishで自作関数に挑戦

ターミナルで自作で関数を作ります:fish:
（ちょっと挑戦は誇大だったかも）
![スクリーンショット 2018-10-15 11.22.38.png](https://qiita-image-store.s3.amazonaws.com/0/183059/8bd51d9e-85a7-7322-0b84-a8fd9389513e.png)


# TL;DR
- fishで自分で関数を作ってみます

# 対象読者
- fishshellを使用している人

```
$ fish -v
fish, version 2.7.1
```

# こんなかんじのを作ります
fishをインストールしていれば、デフォルトでターミナルで```fish_greeting```を実行できるはず:fish:

```
$ fish_greeting
Darwin PC-NAME 18.0.0 x86_64
11:28  up 6 days, 12:35, 4 users, load averages: 2.15 1.95 1.98
```

関数名はアンダーバーでつなぐ（スネークケース）で書いているっぽいのでそれに合わせます

今回は```git_delete_tags```と打てば、ローカルに存在するgit tagをすべて削除するコマンドを実行する関数を作ってみます

## fishの関数が格納されているフォルダに移動

fishの関数は下記のパスにファイルを格納していて、それを実行しているようです:fish:

```
$ cd $HOME/.config/fish/functions
```

- 関数を実行するファイルを作成

```
$ touch git_delete_tag.fish
```

# 実行したいコマンドを自作

あとはvscodeなりで下記のように関数の中身を書けばOKでした（あ、実際は自分でコマンドを自作してみてください）

``` $HOME/.config/fish/functions/git_delete_tags.fish
function git_delete_tags
  for gittag in (git tag)
    git tag -d $gittag
  end
end
```

このファイルを保存するとターミナルで```git_delete_tags```を実行すると、記述したスクリプトを実行する自作関数登録ができました:fish:


※※※　コダイはJAROのキャラクターです　※※※
http://www.jaro.or.jp/
Your account cannot be created at this time

# 問題
既にApple IDを一つ持っているが、もう一つ作りたい時に[こちらで](https://appleid.apple.com/account#!&page=create)入力後、emailなどの認証を済ませようとすると'Your account cannot be created at this time'とエラーが出て先に進めない。

調べてみると最近同じケースで問題に直面してる人が多いらしく、皆同じようにウェブからApple IDを作成しようとしてエラーが出ている様子。

# 対処法
iTunesにてアカウントを作成する。

MacのApp Storeでも上手くいったと答えている人もいるが筆者はiTunesで上手くいきました。


#参考サイト
https://www.reddit.com/r/apple/comments/8bizds/you_cannot_create_an_apple_id_at_this_time_try/
https://discussions.apple.com/thread/8438000
AWS Athenaで結果を強引にJSONで受け取る方法

## 追記

微妙に最新の情報を見逃していてAthenaはCTAS（CREATE TABLE AS）をサポートできるようになってたらしいです。
https://dev.classmethod.jp/cloud/aws/amazon-athena-support-ctas/

ということで以下のワークアラウンドはほぼ不要です。

## tl;dr

- Athenaの実行結果をJSONで受け取りたかった
- SQLですべてのカラムを一つのJSONにキャストすればJSONで受け取れる
- 本格的にETLするならGlueジョブを使いましょう

## はじめに

AWS AthenaはマネージドPrestoとも言えるサービスでクラスタを管理しなくても手軽にS3のデータにクエリを投げれる良いサービスです。
一方でAthenaはINSERT文に対応していなかったり、クエリの出力形式がCSVかつ無圧縮しか選択できなかったりと、なんらかETLをするには不向きなサービスです(2018/10/15時点)。本格的なETLにはGlueを使うのがいいんですが、整形されたデータをチョロチョロっとサマって他のプログラムの入力にしたいみたいケースでは手軽にAthenaで済ませたくなります。そういった際に出力をプログラムで扱いやすいJSON形式でできるとなお嬉しいです。

ということで以下のようなクエリを書いてみました。

## クエリ

こんな感じで出力結果をMAP経由でJSONにキャストすると結果を一つのJSON形式にできます。(サブクエリの中は適当なサンプルデータです。)

```sql
SELECT
  CAST( MAP(
    ARRAY[
      'name',
      'age',
      'skils',
      'account'
    ],
    ARRAY[
      CAST(name as JSON),
      CAST(age as JSON),
      CAST(skils as JSON),
      CAST(account as JSON)
    ]
  ) AS JSON) AS json_data
FROM (
  SELECT
    'kanga' as name,
    100 as age,
    ARRAY['sql','aws'] as skils,
    MAP(
      ARRAY['qiita', 'twitter'],
      ARRAY['kanga', 'kanga333']
    ) as account
);
```

こんな感じに結果が受け取れます。

```csv:json.csv
"json_data"
"{""account"":{""qiita"":""kanga"",""twitter"":""kanga333""},""age"":100,""name"":""kanga"",""skils"":[""sql"",""aws""]}"
```

厳密には出力はJSON形式では無く、１カラムのCSVの文字列の中にJSONが入ってる感じになります。

利用する際は文字列からデコードする必要があります。

直接csvをロードする場合はこんな感じです。

```python:load.py

import csv
import json

with open("json.csv") as f:
    csv_records = csv.reader(f)
    # Skip header
    next(csv_records, None)
    for csv_record in csv_records:
        json_record = json.loads(csv_record[0])
        # Output: kanga
        print(json_record['name'])
        # Output: {'qiita': 'kanga', 'twitter': 'kanga333'}
        print(json_record['account'])
```

AWS APIのget_query_resultsから利用する際も同じ感じです。

```python:get_query_results.py
import json
import boto3

athena = boto3.client('athena')
response = athena.get_query_results(
    QueryExecutionId='15299086-c4e6-425a-9b61-d360a875225d'
)
rows = response['ResultSet']['Rows']

for row in rows[1:]:
    data = row['Data'][0]['VarCharValue']
    json_record = json.loads(data)
    # Output: kanga
    print(json_record['name'])
    # Output: kanga
    print(json_record['account'])
```

## おわりに

以上、Athenaの結果をJSONで受け取る方法でした。とりあえず現状、データをサマって抽出した上で何らかプログラムの入力にする、とかそういったケースで使えなくもないかな？と思います。
一方で、この方法で出力されるファイルは無圧縮のJSONになるので、大量のレコードを出力したい場合には使わない方が良いでしょう。そういったケースでは素直にGlueを使うかEMRでクラスタを立てましょう。

Athenaが正式にJSON形式での結果出力をサポートする日を待ってます、あるいはINSERT文対応。あとは結果を圧縮して格納するオプションも出ると嬉しいなぁ。。。
EC2に立てたlaradockからRDSにphpmysqladminで接続する

前回EC2に立てたlaradockのmysqlからRDSへ移行しましたが、
ローカルで使っていたphpmyadminの設定を変更したのでメモ。

## docker-compose.ymlを書き換える
    # vi docker-compose.yml

    phpmyadmin:
      build: ./phpmyadmin
      environment:
        - PMA_ARBITRARY=1
        #- MYSQL_USER=${PMA_USER}
        #- MYSQL_PASSWORD=${PMA_PASSWORD}
        #- MYSQL_ROOT_PASSWORD=${PMA_ROOT_PASSWORD}
        - PMA_HOST=rdsエンドポイント ←　追加
      ports:
        - "${PMA_PORT}:80"
      depends_on:
        - "${PMA_DB_ENGINE}"
      networks:
        - frontend
        - backend
     
## phpmyadminを再起動

    docker-compose stop phpmyadmin
    docker-compose up -d phpmyadmin

起動を確認
![スクリーンショット 2018-10-15 11.17.00.png](https://qiita-image-store.s3.amazonaws.com/0/272635/cddbbd28-398e-a998-e92c-2604910d47fb.png)

## ログイン
 サーバにはエンドポイントを入れてログインできればOK
Backlog: 括弧を含むアドレスのMarkdownリンク記法


# Backlog: 括弧を含むアドレスのMarkdownリンク記法

## 結論

括弧 `(` , `)` をURLエンコードして置き換えるとよい.  
`(` => `%28`  
`)` => `%29`  

全角文字のURLエンコード有無は影響しないようだ.

```md:backlogリンク記法サンプル
NG [サンプル.xlsx](https://xxx.backlog.jp/downloadAttachment/1234567/%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB(20181015).xlsx)
NG [サンプル.xlsx](https://xxx.backlog.jp/downloadAttachment/1234567/サンプル(20181015).xlsx)

OK [サンプル.xlsx](https://xxx.backlog.jp/downloadAttachment/1234567/%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%2820181015%29.xlsx)
OK [サンプル.xlsx](https://xxx.backlog.jp/downloadAttachment/1234567/サンプル%2820181015%29.xlsx)
```

![SS 2018-10-15 11.04.47.png](https://qiita-image-store.s3.amazonaws.com/0/190979/9d16f0d7-d528-d0c0-26b2-83029a2e6634.png)


ちなみにQiitaやGitHubは上記4つのどの記法でもokのようであった.

## 背景など

backlogにアップロードしたファイルのリンクアドレスには, ファイル名がそのまま利用される.
ファイル名に括弧を含めると, リンクアドレスに括弧が含まれる形になる.

右クリックからリンクのアドレスをコピーすると, 全角文字はURLエンコードされるが, 括弧はURLエンコードされない状態で取得される.
そしてそれをそのままMarkdownリンク記法で記述すると, リンク中に括弧を含むためかうまく機能しないようであった.
set: Warning: $PATH entry "/usr/usename/.rbenv/bin" is not valid (No such file or directory)って出たとき

fishでconfigファイルに記述するべきものを、setコマンドでうっちゃって、ずっと消えないやつです:fish:

# TL;DR

ターミナルでずっと下記のような警告文が出ます:fish::anger:

```
set: Warning: $PATH entry "/Users/hoge/.rbenv/bin" is not valid (No such file or directory)
set: Warning: $PATH entry "/usr/local/bin/rbenv" is not valid (Not a directory)
set: Warning: $PATH entry "/Users/hoge/.nodebrew/current/bineval" is not valid (No such file or directory)
```

# 対象読者

- fish消しても、ターミナルを再起動しても、config.fishの中にある環境変数を消しても、.bashrcなどを消しても直らなかった人です:fish:

- homebrewでfishをインストールしています:fish:

# 処方箋

githubのissueでも議論されていますが
https://github.com/yarnpkg/yarn/issues/5555

```$HOME/.config/fish/fishd.××××××××××××
# This file is automatically generated by the fish.
# Do NOT edit it directly, your changes will be overwritten.
SET hogehogehoge
SET hogehogehoge
SET hogehogehoge
SET hogehogehoge
SET hogehogehoge
SET hogehogehoge
SET hogehogehoge
```

自分は2行目以降のSETをすべて削除しました（どっちみち自動生成されますが）
すると、ターミナルから警告文が削除されました:santa:

githubでは

```$HOME/.config/fish/fishd.××××××××××××
SET fish_user_paths:/Users/tony/Library/Python/3\x2e6/bin\x1e/Users/tony/\x2eyarn/bin
```
が要因だと言っていますが、自分は全部削除しました（どっちみち自動生成されるようなので）
https://github.com/yarnpkg/yarn/issues/5555#issuecomment-375944732

# 参考
https://github.com/yarnpkg/yarn/issues/5555
MSXMLを使ったアプリで、終了時にエラーになる

#XMLを読み書きするアプリをつくりたくて
クラスつくったり、MSDN読んだりしてたんだけど
あんまりドキュメントなくってこまっちゃうね。

##なんとか実装できた
いろいろ乗り越えて実装できたんだけど
アプリの終了時にアクセス違反でエラーになる

##しらべた
IXMLDOMDocumentPtrでCreateInstanceしてるんだけど、
スコープ抜けるまえにReleaseしないといけないんだね
なんか勝手にやってくれるとおもってたなぁ…

###ほか
CoUninitializeとかCoFreeUnusedLibrariesとかしらべたけど
見当違いだったみたい。あーあ
AndroidのTextInputでunderlineColorAndroidを指定するとクラッシュする問題【React Native】

React Nativeの`TextInput`には、Androidで下線部の色を指定する`underlineColorAndroid`というpropsがありますが、これを指定すると以下のようなエラーを吐いてアプリがクラッシュする場合があります（エラーが起きない時もあります。）

```
Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference
```

`FlatList`, `ScrollView`と同時に使用した際に発生するようです。

エラーが起きている箇所は　`ReactTextInputManager.java`で、`underlineColorAndroid`のpropsを渡すと、`ReactTextInputManager.setUnderlineColor`が呼ばれ、`Drawable.mutate()`のバグでクラッシュします。

根本的な解決策はなく、`underlineColorAndroid`の使用を避けるほか無いようです。

`TextInput`の下線を消す際に利用すると思うのですが、下線を消したい場合は`underlineColorAndroid`の代わりに、`android/app/src/main/res/values/styles.xml`を以下のように書き換えることで変更可能です。

```styles.xml
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
        <item name="android:windowBackground">@drawable/splash_screen</item>
        <item name="android:editTextBackground">@android:color/transparent</item>
    </style>
</resources>
```

https://github.com/facebook/react-native/issues/17530
flutterでプラグインのAndroidのサポートライブラリが競合した場合の対応

ImagePickerのバージョンを上げたところ以下のエラーを出力してビルドに失敗するようになってしまいました。

```
* What went wrong:
Execution failed for task ':app:preDebugBuild'.
> Android dependency 'com.android.support:support-v4' has different version for the compile (26.1.0) and runtime (27.1.1) classpath. You should manually set the same version via DependencyResolution
```

とりあえず依存関係覗いてみようとしたけど以下のコマンド実行しけど見れず、

```
cd android
cd ./gradlew dependencies
```

正しいコマンドは次のようなものでした。

```
cd android
./gradlew app:dependencies
```

で結果の依存関係のうち問題の有りそうなのはこの部分ぽい

```
コンパイル時
debugCompileClasspath - Resolved configuration for compilation for variant: debug
+--- com.google.firebase:firebase-core:16.0.4
|    +--- com.google.firebase:firebase-analytics:16.0.4
|    |    +--- com.google.android.gms:play-services-basement:16.0.1
|    |    |    \--- com.android.support:support-v4:26.1.0
略...
+--- project :image_picker

実行時
debugRuntimeClasspath - Resolved configuration for runtime for variant: debug
+--- com.google.firebase:firebase-core:16.0.4
|    +--- com.google.firebase:firebase-analytics:16.0.4
|    |    +--- com.google.android.gms:play-services-basement:16.0.1
|    |    |    \--- com.android.support:support-v4:26.1.0 -> 27.1.1
略...
+--- project :image_picker
|    \--- com.android.support:support-v4:27.1.1 (*)
```

コンパイル時は26.1.0が使われるけど、実行時は27.1.1が使われるよって言われたけど、確かにそんな感じぽい。
でどうしよう？

firebase-coreのコンパイルを27.1.1にするか、image_pickerの実行時を26.1.1にするかの2択っぽい。
firebase-coreに依存しているライブラリが他にもあったので、今回はimage_pickerの依存するサポートライブラリを26.1.0にすることにした。

しかし、自分のbuild.gradleでなくプラグイン内のbuild.gradleを編集しなければならず、その場はいいがライブラリの更新やCIに乗せるときにどうするか考える必要があるなぁ。

とりあえず今回はimage pickerのプラグインのbuild.gradleを次のように修正して一旦解決。

```gradle
dependencies {
    implementation('com.android.support:support-v4:26.1.0')
}
```

より良い解決方法を質問中。
https://stackoverflow.com/questions/52808690/how-can-i-resolve-conflicting-support-library-version

# 2018/10/16 追記
android/build.gradleに以下を追記すれば良いという回避方法をStackoverflowの回答でもらった。
試してみるとこれでうまく行った。 なるほど、subprojectsなる指定方法があるんですね。

```gradle
subprojects {
    project.configurations.all {
        resolutionStrategy.eachDependency { details ->
            if (details.requested.group == 'com.android.support'
                    && !details.requested.name.contains('multidex') ) {
                details.useVersion "26.1.0"
            }
        }
    }
}
```

# 2019/06/11 追記
`force` を使ってより完結に記述できることがわかった

```gradle
subprojects {
    project.configurations.all {
        configurations.all {
            resolutionStrategy.force 'com.google.errorprone:error_prone_annotations:2.3.1'
        }
    }
}
```
vscodeでphpcsによるPSR-2規約チェックを行ってみた

##事前準備
phpcsのインストール(今回はComposerを使用してインストール)
vscodeにphpcsの拡張をインストール
vscodeのユーザ設定に`"phpcs.standard": "PSR2"`を追加

注意ポイント?
ユーザー設定の際vscodeのバージョンによっては下記のように表示される
その場合、赤丸の部分をクリックしてOpen settings.jsonを開いて`"phpcs.standard": "PSR2"`を追加する
![b9225fbded97d88111f584554fa37c56.jpg](https://qiita-image-store.s3.amazonaws.com/0/302721/ec5ff0ab-eefe-2a75-e613-ccd151b0c13c.jpeg)

これで最低限使えるようになるはず
細かい導入方法は参考にしたサイトを乗せておくのでそちらで確認を
##実際に使ってみる
ちょっと前に書いた挿入ソート
![3ea1114e3b351651a1d8b50b2e9cc7e0.jpg](https://qiita-image-store.s3.amazonaws.com/0/302721/b842c0e5-72fd-32bc-a8bc-be22582c31a5.jpeg)
こんな感じに規約違反しているところが分かるように

詳しいエラーはこんな感じに
![8541751e9aeca894706f096fea0ec151.jpg](https://qiita-image-store.s3.amazonaws.com/0/302721/cd6d62f0-786d-adbc-5d2c-6f2e68325b4b.jpeg)

##まとめ
コーディング規約を守ることは大切だがそこに時間をかけすぎるのは本末転倒だと思ったので規約チェックを導入してみた
実際使ってみるとパッと見で修正ポイントが分かるので修正が容易で便利
あくまでチェックしてくれるものでありコーディング規約そのものを知っておく必要がある


##参考サイト
導入の際に参考にさせていただいたサイト 
https://aipercent.net/php/install-composer/ 
https://akamist.com/blog/archives/293
クラスとは？クラスのイメージを掴もう！

#クラス
クラスは次の要素を持つことができます。

- プロパティ：変数
- メソッド：関数

インスタンスを生成することで、これらの値をクラスの外から呼び出すことができます。
インスタンスは、
`インスタンス名　= new クラス名(引数);`
と記述すると生成できます。
また、そのプロパティやメソッドは、
`インスタンス名->プロパティorメソッド;`
と記述すると呼び出すことができます。

##クラスって何？
「クラスのイメージがいまいちわからない」
そんな方はクラスを「車」に例えて見るといいかもしれません。

クラスにとってのプロパティとは、車における部品のようなものです。
車のタイヤやエンジンが車のプロパティにあたります。
つまりクラスを構成する部品がプロパティなのです。

一方、メソッドは車の機能のようなものです。
これを車はアクセルを踏むと走り出します。
この走るという機能が車というクラスのメソッドなのです。

##継承とは？
作成したクラスは次のように記述することで他のクラスで継承することができます。
`Class 子クラス extends 親クラス(仮引数){・・・}`
親クラスを継承すると、子クラスは親クラスのプロパティやメソッドを記述しなくても、持つことができます。

分かりにくいので、この継承も「車」に例えてみましょう。
「車」と言っても、様々な種類がありますよね。
例えば、トラックは「車」としての共通の機能や部品だけでなく、乗用車にはない荷台を持っています。

クラス「車」を継承すると、新しくプロパティ「荷台」を記述するだけで、トラックというクラスを定義することができるのです。

#staticとは？
PHPではクラスの中でstatic変数や関数を、用いることがあります。この「static」とは何なのでしょう。

「static」を日本語にすると「静的な」という意味になります。静的というのは、変化しないということです。
PHPでは代入不可能な変数などを定義するときにfinalを使いましたが、それとは異なります。

普通のプロパティはインスタンス毎に違う変数として扱われます。しかし、static変数は、全てのインスタンスに対して1つの変数です。

そのため、呼び出し方法も通常とは異なります。
staticで定義されたプロパティやメソッドは
`（クラス名）::（プロパティまたはメソッド）`
で呼び出すことができます。
インスタンス毎に違う値をとるわけではないので、`::`の左側に来るのがインスタンス名でなくクラス名であることに注意しましょう。
md5と同程度の衝突耐性でもうちょっと短い文字列を得る

表題のphpコードです。
md5は0-9a-fの16記号で生成されるのを、0-9a-zA-Zの62記号を使ってもっと短くします。
全角文字とか使えばもっと短くできます。

```php
    function short_md5($string, $characters)
    {
        $characters = preg_split('//u', $characters, -1, PREG_SPLIT_NO_EMPTY);
        $base = sizeof($characters);

        $md5 = md5($string);
        $md5s = str_split($md5, 8); //巨大すぎるので8桁4パーツに分ける。これにより完全な進数変換にはならない
        krsort($md5s);

        $reminders = [];
        foreach ($md5s as $md5) {

            $hex = eval("return 0x{$md5};");

            while ($hex > $base) {
                $reminder = $hex % $base;
                $hex = ($hex - $reminder) / $base;
                $reminders[] = $reminder;
            }
            $reminders[] = $hex;
        }

        krsort($reminders);
        $ret = '';

        foreach($reminders as $r){
            $ret .= $characters[$r];
        }

        return $ret;
    }

```
使ってみます。

```php5
$str = 'abc';
echo md5($str); 
//-> 900150983cd24fb0d6963f7d28e17f72

echo short_md5($str, '0123456789abcdef'); //16進数
//-> 900150983cd24fb0d6963f7d28e17f72 （32文字 結果は一緒）

echo short_md5($str, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'); //62進数
//-> 2DvjkY173yNi3VDWUdKpPiO （23文字）

echo short_md5($str, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_'); //64進数
//-> 2g0l2oYQA-M3mBzZZEUnZO （22文字）

echo short_md5($str, '亜..（省略）..腕'); //常用漢字全部 1994進数
//-> 江段析課段拠処小踊滑食恨 （12文字）
```
## 結論

- 進数変換時に８桁で分割しちゃってるので擬似的だが、md5と同等の衝突耐性が得られてるっぽい
- bcmathを使えば、衝突耐性は完全にいっしょにできるはず
- md5の32文字を半分の16文字にするだけでも`0xf * 0xf =256`進数にする必要があり、それだけの記号が必要。同等の衝突耐性で文字数を減らすのは結構大変
【Python】機械学習入門

#機械学習とは

> 機械学習（きかいがくしゅう、英: machine learning）とは、人工知能における研究課題の一つで、人間が自然に行っている学習能力と同様の機能をコンピュータで実現しようとする技術・手法のことである。

(Wikipediaより)
https://ja.wikipedia.org/wiki/%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92

##機械学習は「教師あり学習」と「教師なし学習」に分類できる

###教師あり学習
- 教師データという既知のデータを解析して、分析、予測する

###教師なし学習
- 教師データなしに、分析、予測する

##機械学習が分析、予測可能な問題

- 回帰分析
- 分類
- クラスタリング
- 相関分析

###回帰分析
- 教師あり学習
- 過去の数値データから未来の数値データを予測する問題
	- 交通渋滞予測
	- 天気予測
	- etc

###分類
- 教師あり学習
- 与えられたデータが事前に定義された種別のどこに分類されるのか判定する問題
- 例えば、画像データを解析し、動物なのか、植物なのか、天象なのか、さらにその中の何に細分されるのか判定する。


###クラスタリング
- 教師なし学習
- 2つ以上有る与えられたデータをグルーピングする問題
- 「分類」に似ているが、「分類」は事前に定義された種別のどこに分類されるか判別するが、「クラスタリング」は「事前に定義された種別」という概念が無く、与えられたデータの中から、共通点を見つけて、グルーピングする。

###相関分析
- 教師なし学習
- 2つ以上与えられたデータの関係を分析する

#機械学習のプログラミング言語として何が有るか

- Python
	- 現在（2018年10月時点）では、Pythonが使われることが多い。
	- 理由としては、機械学習用のライブラリが他言語と比べて充実している感が有るからではないかと推測しています。
- R
	- 一昔前、Pythonのライブラリが充実するまでは、Rが機械学習の主流であった。
	- Pythonでも、Rと同じ事が出来るようになってから、Pythonにシェアを奪われるようになってきた。
- C++
	- TensorFlow、Caffe、Dlibといったライブラリを利用できる。
	- スクリプト言語と比べると実行速度が速いという長所が有る。
- Julia
	- JITコンパイラで実行されるので、Pythonと比べて実行速度が早い
	- ライブラリが少ないが、外部ライブラリ連携でR、Python等の関数を呼び出すことも出来る。
	- 今後、より大量のデータを解析する事が予測されます。実行速度が早いJuliaが主流となるかもしれません。
- その他
	- Java、GNU Octave、Scala

##Pythonライブラリ
- TensorFlow（テンソルフロー）
	- オープンソース（Apache License 2.0）
	- Googleが開発したライブラリ。
	- ドイツ・ハノーバーで開かれた「[CeBIT 2017](http://monoist.atmarkit.co.jp/mn/articles/1703/28/news043.html)」で、「から揚げ配膳ロボット」、「きゅうり仕分けロボット」、「ドローンで撮影した写真の解析」が展示された。
- scikit-learn（サイキット・ラーン）
	- オープンソース（BSD license）
	- 機械学習のほぼ全てのジャンルを抑えたライブラリツール
- Theano（テアノ）
	- 2017/9　[開発中止](https://groups.google.com/forum/#!topic/theano-users/7Poq8BZutbY)がアナウンスされた。引き続き、利用は可能だが、新規開発は無い。
	- オープンソース（BSD license）
	- 数値計算ライブラリ
	- C++/CUDAにコンパイルさせることで高速に動作する。
- Chainer（チェイナー）
	- オープンソース（MIT Licence）
	- Python2.x系および3.x系から利用可能
	- 「エッジヘビーコンピューティング」を提唱している日本のベンチャー企業（Preferred Networks）が開発したライブラリで有る。
	- 日本を中心に利用されている。
- Pytorch
	- FaceBookが主導している
	- Torch7とChainerをベースにして開発された。
	- Define by Runの特徴を持つ
- Pyevolve
	- 遺伝的アルゴリズム/ニューラルネットワーク
- Deap
	- 遺伝的アルゴリズム
- Stan
	- 確率的プログラミング
- Edward
	- 確率的プログラミング

- Matplotlib
	- グラフ描画のライブラリ
- NumPy
	- 数値計算ライブラリ
- Pandas	- 
 	- 様々な形式のデータの入出力ライブラリ
- OpenCV
 	- 画像処理ライブラリ

##番外編
- Jupyter Notebook
	- Webブラウザ上で、Python及びPythonライブラリのコードを実行し、結果を確認できる。
IBM Cloud でベアメタルサーバーの管理ポート無効化をコマンドで行う


# 参考
[toggleManagementInterface - https://softlayer.github.io/](https://softlayer.github.io/reference/services/SoftLayer_Hardware_Server/toggleManagementInterface/)


# 有効化されていることの確認
## UI

###「Device Details」の「Configuration」

![Kobito.xq60nL.png](https://qiita-image-store.s3.amazonaws.com/0/101361/1c636410-cd41-766b-e127-0f3b0b135679.png "Kobito.xq60nL.png")

###「Device Details」の「Remote Mgmt」

![Kobito.TuBJo8.png](https://qiita-image-store.s3.amazonaws.com/0/101361/9b8b0970-0121-05c8-115d-0a8b76ac9f9c.png "Kobito.TuBJo8.png")

### 「Management IP」へのアクセス

![Kobito.fHel0F.png](https://qiita-image-store.s3.amazonaws.com/0/101361/328a1019-6e73-ae2b-d779-b414bb13438e.png "Kobito.fHel0F.png")

## CLI
有効化されていることがわかります。

```
$ slcli call-api SoftLayer_Hardware_Server getIsIpmiDisabled --id=557485
False
```

# デバイス ID の確認
今回は、「557485」を使います。

```
$ slcli hw list | grep esx01
557485   esx01   161.xx.xx.xx  10.xx.xx.xx   tok02  NULL 
```

# 無効化するコマンド
「True」と返ってくれば OK です。
数分以内で適用されるので待ちましょう。

```
$ slcli call-api SoftLayer_Hardware_Server toggleManagementInterface --id=557485
True
```

#無効化されていることの確認
## UI
###「Device Details」の「Configuration」

![Kobito.Rd3sYQ.png](https://qiita-image-store.s3.amazonaws.com/0/101361/e9cd8fc1-c749-e912-fce0-2b986b67116f.png "Kobito.Rd3sYQ.png")

###「Device Details」の「Remote Mgmt」

![Kobito.upbDvh.png](https://qiita-image-store.s3.amazonaws.com/0/101361/2df555e0-a7b8-6f09-e9af-d37b097afff0.png "Kobito.upbDvh.png")

### 「Management IP」へのアクセス

![Kobito.BdQieT.png](https://qiita-image-store.s3.amazonaws.com/0/101361/91c8df74-f4d8-8819-b7f0-b94fb492d909.png "Kobito.BdQieT.png")

## CLI
無効化されていることがわかります。

```
$ slcli call-api SoftLayer_Hardware_Server getIsIpmiDisabled --id=557485
True
```

#有効化するコマンド
同様にコマンドひとつで有効化できます。

```
$ slcli call-api SoftLayer_Hardware_Server toggleManagementInterface --id=557485 enabled=true
True
```

# Audit log
今回おこなったIBM Cloud ベアメタルサーバーの管理ポート有効化・無効化について、監査ログ内で確認することができます。

![Kobito.qDjDEt.png](https://qiita-image-store.s3.amazonaws.com/0/101361/0693ae7e-1737-b4d2-208c-2038f44b7e10.png "Kobito.qDjDEt.png")

# さいごに
セキュリティ上、管理ポートを無効化したい場合は、今回の手順で実施できます。
特に IPMI 等を使用していない場合は、閉じておくとよいでしょう。
PythonのFlaskアプリをGoogle App Engineにデプロイしてみた

## 概要

APIサービスを構築するのにGoogle App Engine(GAE)を利用することにしたので、Python3のFlaskアプリを実際にデプロイしてみました。

利用したソースをGitHubにアップしていますのでよければご参考ください。
https://github.com/kai-kou/deploy-flask-to-appengine


## 前提条件

GAEが利用できるGCPプロジェクトと```gcloud``` が利用できる前提です。

## 手順

必要なファイルを用意します。

```sh
> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
> touch main.py
> touch requirements.txt
> touch app.yaml
```

### main.py

アクセスするとJSON形式で結果を返します。
日本語を含む場合、```app.config['JSON_AS_ASCII'] = False``` とするのが良いみたいです。

Flask で Restful API を作る - jsonify で日本語が文字化けする時の解決方法
http://datalove.hatenadiary.jp/entry/flask-jsonify-how-to-encode-japanese


```python:main.py
from flask import Flask, jsonify

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False

@app.route('/')
def index():
  return jsonify({
    "message": "テスト!!"
  })

if __name__ == '__main__':
  app.run()
```

### requirements.txt

FlaskとGAEで利用するgunicornがインストールされるように指定します。

```txt:requirements.txt
flask
gunicorn
```

### app.yaml

GAEにデプロイする際に必要となる設定ファイルです。
2018年8月にスタンダード環境のランタイムにPython3.7が追加されたのでそれを利用します。スケーリングの設定については下記が詳しかったです。

App Engine Scaling Config
https://qiita.com/sinmetal/items/017e7aa395ff459fca7c

```service``` を指定しない場合、```default``` にデプロイされますので、すでにGAEを利用している場合は注意してください。

```entrypoint``` に```gunicorn``` で起動するようにコマンドを記述します。

Gunicornについて調べたことメモ
http://kazsoga.com/gunicorn-memo/

```yaml:app.yaml
runtime: python37
env: standard
service: サービス名
entrypoint: gunicorn -b :$PORT main:app

automatic_scaling:
  min_idle_instances: automatic
  max_idle_instances: automatic
  min_pending_latency: automatic
  max_pending_latency: automatic
```

デプロイします。

```sh
> gcloud app deploy

Services to deploy:

descriptor:      [/任意のディレクトリ/app.yaml]
source:          [/任意のディレクトリ]
target project:  [GCPプロジェクトID]
target service:  [サービス名]
target version:  [20181009t172421]
target url:      [https://サービス名-dot-GCPプロジェクトID.appspot.com]


Do you want to continue (Y/n)?Y
(略)
Updating service [サービス名]...done.
Setting traffic split for service [サービス名]...done.
Deployed service [サービス名] to [https://サービス名-dot-GCPプロジェクトID.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s サービス名

To view your application in the web browser run:
  $ gcloud app browse -s サービス名
```

デプロイできたらアクセスしてみます。

```sh
> curl https://サービス名-dot-GCPプロジェクトID.appspot.com

{"message":"テスト！！"}
```


やったぜ。

## 参考

Flask で Restful API を作る - jsonify で日本語が文字化けする時の解決方法
http://datalove.hatenadiary.jp/entry/flask-jsonify-how-to-encode-japanese

Gunicornについて調べたことメモ
http://kazsoga.com/gunicorn-memo/

App Engine Scaling Config
https://qiita.com/sinmetal/items/017e7aa395ff459fca7c
ICleanupインターフェイス（MVVM Light Toolkit リファレンス）

# ICleanup
## 概要

```csharp
public interface ICleanup
```

- オブジェクトの破棄やガベージコレクションと関係のない（つまり、`System.IDisposable`とは別種の）、後始末のためのインターフェイスの定義。

##### 名前空間
- `GalaSoft.MvvmLight`

#### アセンブリ
- GalaSoft.MvvmLight


## メソッド
### Cleanup
<details><summary>Cleanup</summary><div>

```csharp
void Cleanup()
```

##### 概要
- 後始末を実行するメソッド。
</div></details>


## 参照
- [目次](https://qiita.com/h084/items/c5355fa734936c56ca50/)
- [ViewModelBase](https://qiita.com/h084/items/232e808e4687fede2e78)
ObservableObjectクラス（MVVM Light Toolkit リファレンス）

# ObservableObject
## 概要

```csharp
public class ObservableObject : System.ComponentModel.INotifyPropertyChanged
```

- 観測可能（observable）なプロパティをもつオブジェクト（モデル）の基底クラスに使う。

##### 名前空間
- `GalaSoft.MvvmLight`

#### アセンブリ
- GalaSoft.MvvmLight


## メソッド
### GetPropertyName
<details><summary>GetPropertyName</summary><div>

```csharp
protected static string GetPropertyName<T>(System.Linq.Expressions.Expression<System.Func<T>> propertyExpression)
```

##### 概要
- `propertyExpression`で指定するプロパティの名前を得る。

##### 戻り値
- `propertyExpression`で指定するプロパティの名前。

##### 例外
- `System.ArgumentNullException`: `propertyExpression`が`null`である。
- `System.ArgumentException`: `propertyExpression`で指定したプロパティが存在しない。
</div></details>


### RaisePropertyChanged
<details><summary>RaisePropertyChanged</summary><div>

```csharp
public virtual void RaisePropertyChanged(string propertyName = null)
public virtual void RaisePropertyChanged<T>(System.Linq.Expressions.Expression<System.Func<T>> propertyExpression)
```

##### 概要
- `propertyName`や`propertyExpression`で指定するプロパティに対して`PropertyChanged`イベントを起こす。

##### 例外
- `System.ArgumentException`: 指定した名前を持つプロパティが存在しない。
</div></details>


### Set
<details><summary>Set</summary><div>

```csharp
protected bool Set<T>(string propertyName, ref T field, T newValue)
protected bool Set<T>(System.Linq.Expressions.Expression<System.Func<T>> propertyExpression, ref T field, T newValue)
protected bool Set<T>(ref T field, T newValue, string propertyName = null)
```

##### 概要
- `field`に`newValue`を代入する。
- `field`の値が変化したら、`propertyName`や`propertyExpression`を引数にして`RaisePropertyChanged`メソッドを呼ぶ。

##### 戻り値
- `field`の値が変化したら`true`、変化しなかったら`false`を戻す。

##### 例外
- `System.ArgumentException`: 指定した名前を持つプロパティが存在しない。
</div></details>


### VerifyPropertyName
<details><summary>VerifyPropertyName</summary><div>

```csharp
public void VerifyPropertyName(string propertyName)
```

##### 概要
- `propertyName`で指定するプロパティが存在することを確認する。
- DEBUGビルド時のみ有効。

##### 例外
- `System.ArgumentException`: 指定した名前を持つプロパティが存在しない。
</div></details>


## プロパティ
### PropertyChangedHandler
<details><summary>PropertyChangedHandler</summary><div>

```csharp
protected System.ComponentModel.PropertyChangedEventHandler PropertyChangedHandler { get; }
```

##### 概要
`PropertyChanged`イベントのハンドラーを戻す。
</div></details>


## イベント
### PropertyChanged
<details><summary>PropertyChanged</strong></summary><div>

```csharp
public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged
```

##### 概要
- `System.ComponentModel.INotifyPropertyChanged`インターフェイスの実装。
- `RaisePropertyChanged`メソッドや`Set`メソッドは、このイベントを起こす。
</div></details>


## 参照
- [目次](https://qiita.com/h084/items/c5355fa734936c56ca50/)
- [ViewModelBase](https://qiita.com/h084/items/232e808e4687fede2e78)
【Bot Framework Emulator v4】Chatdown Toolを用いたダイアログの設計

#はじめに
本記事では、Bot Framework Emulator v4(投稿時にはpreview)を用いた、チャットボットにおけるダイアログの設計方法を紹介します。v4では、テキストファイルを用いて、ダイアログの設計を行うことが出来るようになりました。海外の記事でも紹介されていたりしますが、より詳しめに紹介します。

#chatdownのインストール
Node.js Command Promptからnpm installでchatdownをインストールします。

```
npm i -g chatdown@1.0.10 
```

※ここで、chatdownのバージョン指定が**1.0.10**になっていることに注意してください。これ以前のバージョンだと、その後の手順でErrorが出ます。
(参考: https://github.com/Microsoft/BotFramework-Emulator/issues/931)

#.chatファイルの準備
以下のような形式で、テキストエディタ等を用いて、作成したいダイアログのフローを作成してください。作成出来たら、**.chat**という形式で保存してください。

<a href="https://imgur.com/INvYlgP"><img src="https://i.imgur.com/INvYlgP.png" title="source: imgur.com" /></a>

#.transcriptファイルの作成
Node.js Command Promptで、以下のようなコマンドを入力することで、**.transcriptファイル**を作成することが出来ます(ファイル名は例です)。

```
chatdown ChatDesign.chat > ChatDesign.transcript
```

#実行結果
.transcriptファイルを、Bot Framework Emulator v4で開いてみてください。
(.transcriptファイルの中身は、JSON形式になっています。)

<a href="https://imgur.com/UJnm7U8"><img src="https://i.imgur.com/UJnm7U8.png" title="source: imgur.com" /></a>

#まとめ
今回紹介したChatdown Toolを使うことで、**ダイアログのフローや設計を正確に開発者に伝えることが出来る**ようになります。設計する側にとっても開発者にとっても、ありがたい機能だと思います。

(参考文献1: https://yseosoft.wordpress.com/2018/05/31/botframework_update_2018/)
(参考文献2: https://codepunk.io/chatdown-for-the-bot-framework-introduction-and-processing-multiple-files/)
MVVM Light Toolkit リファレンス【工事中】

# はじめに
[MVVM Light Toolkit](http://www.mvvmlight.net/)のクラスのリファレンスです。

まとまったリファレンスが見つからないので、自分で作ってみます。

基本的には、Visual Studioの「オブジェクト ブラウザー」に表示できる情報です。[ソース](https://github.com/lbugnion/mvvmlight "GitHub")から得ている情報もあります。

また、プラットフォームやバージョンによりクラスのメンバーが異なる場合があります。ここでは、.NET Framework 4.5用のアセンブリをオブジェクトブラウザーで表示したときの情報を採用しています。

順次、下記の目次にあるクラス名やインターフェイス名にリンクを付け、リンク先に説明を追加していきます。

# 目次
## Galasoft.MvvmLight 名前空間
- インターフェイス
 - [ICleanup](https://qiita.com/h084/items/1be8c8a323ad5f4c8491)
- クラス
 - [ObservableObject](https://qiita.com/h084/items/4fb49d902201d8526166/)
 - [ViewModelBase](https://qiita.com/h084/items/232e808e4687fede2e78)

## Galasoft.MvvmLight.Command 名前空間
- インターフェイス
 - [IEventArgsConverter](https://qiita.com/h084/items/9af2df858cfebff4fbf8)
- クラス
 - [EventToCommand](https://qiita.com/h084/items/9667077286111ab546ee)
 - [RelayCommand](https://qiita.com/h084/items/7777282333f93dff2561)
 - [RelayCommand&lt;T&gt;](https://qiita.com/h084/items/ceb520743bb04d6bef1b)

## Galasoft.MvvmLight.CommandWpf 名前空間
- クラス
 - [RelayCommand](https://qiita.com/h084/items/7777282333f93dff2561)
 - [RelayCommand&lt;T&gt;](https://qiita.com/h084/items/ceb520743bb04d6bef1b)

## Galasoft.MvvmLight.Helpers 名前空間
- インターフェイス
 - IExecuteWithObject
 - IExecuteWithObjectAndResult
- クラス
 - Empty
 - WeakAction
 - WeakAction&lt;T&gt;
 - WeakFunc&lt;TResult&gt;
 - WeakFunc&lt;T, TResult&gt;

## Galasoft.MvvmLight.Messaging 名前空間
- インターフェイス
 - [IMessenger](https://qiita.com/h084/items/e879feae2f3f1ca3363b)
- クラス
 - [Messenger](https://qiita.com/h084/items/4359bdfbd75b48755309)
 - [MessageBase](https://qiita.com/h084/items/9e8e8745b296f93442ac)
 - GenericMessage&lt;T&gt;
 - [NotificationMessage](https://qiita.com/h084/items/3599ffd8e8dcf6951bfd)
 - NotificationMessageAction
 - NotificationMessageAction&lt;TCallbackParameter&gt;
 - NotificationMessageWithCallback
 - PropertyChangedMessageBase
 - PropertyChangedMessage&lt;T&gt;

## Galasoft.MvvmLight.Views 名前空間
- インターフェイス
 - IDialogService
 - INavigationService

## Galasoft.MvvmLight.Ioc 名前空間
- インターフェイス
 - [ISimpleIoc](https://qiita.com/h084/items/d6bf43863010624f01f5)
- クラス
 - PreferredConstructorAttribute
 - [SimpleIoc](https://qiita.com/h084/items/0e3697dd65c26401891f)

## Galasoft.MvvmLight.Threading 名前空間
- クラス
 - [DispatcherHelper](https://qiita.com/h084/items/14f233eca23e873ae4d0)
正規表現チートシート

## 定型書式
PHPでは、スラッシュでパターンを囲む。

```
/パターン/
```

## 量指定子
### ルール
```
* 0または1回以上の繰り返し
+ 1回以上の繰り返し
? 0または1回の繰り返し
```

### 例
```
<対象>
(1)ああ
(2)あ
(3)い

<パターン>
/あ+/

<結果>
(1),(2)がマッチ
```


## 指定回数の繰り返し
### ルール
```
{1} 1回の繰り返し
{1,3} 1回以上3回以下の繰り返し
{1,} 1回以上の繰り返し
{,3} 3回以下の繰り返し
```

### 例
```
<対象>
(1)あ
(2)あああ
(3)ああああ

<パターン>
/あ{2,3}/

<結果>
(2)がマッチ
```

## 文字指定
### ルール
```
. 任意の文字(なんでもok)
[A-Z] 大文字アルファベットを指定
[a-z] 小文字アルファベットを指定
[0-9] 数字を指定
[あ-んア-ン] 平仮名、カタカナを指定
[^0-9] 数字以外を指定
```

### 例
```
<対象>
(1)あい
(2)あい1
(3)あい1アイ

<パターン>
/[あ-んア-ン0-9]*/

<結果>
(3)がマッチ

```

## 特殊な意味を持つ表現

### ルール
```
\w 単語構成語(記号以外)
\W 非単語構成語
\d 数字
\D 数字以外
\s 空白文字(スペースやタブ等)
\S 非空白文字
\b 単語区切り
\B 非単語区切り
\t タブ
\n 改行
\A 文頭
\z 文末
^ 行頭
$ 行末
```

### 例
```
<対象>
(1)5 あい
(2)あい 5
(3)5あい

<パターン>
/^\d{1,}\s[あ-ん]*/

<結果>
(1)がマッチ

```

## PHPの正規表現を用いる関数
### preg_match
http://php.net/manual/ja/function.preg-match.php
読み込ませた文字列にパターンとマッチするものがあるかを調べられる関数。

```php
$arrs = array("イチゴ", "いちご", "ICHIGO");
foreach($arrs as $arr) {
  $result = $preg_match('/[A-Z]*/', $arr);
  echo $result . "\n";
}

# 結果
false
false
true
```

### preg_replace
個人メモ：緯度経度＋方向距離

var lat_per_m = 360 / Math.PI / 2 / 6378150;
function latLngAddDirDis(latlon, dir, dis)
{
    // 緯線上の移動距離
    lat_dis = Math.cos(dir * Math.PI / 180) * dis;
    // 緯度の変化量
    lat_delta = lat_dis * lat_per_m;
    new_lat = latlon.Lat + lat_delta;
    // 経線上の移動距離
    lon_dis = Math.sin(dir * Math.PI / 180) * dis;
    // 1mあたりの経度
    lon_per_m = 360 / Math.PI / 2 / 6378150 / Math.cos(new_lat * Math.PI / 180);
    // 経度の変化量
    lon_delta = lon_dis * lon_per_m;
    return new Y.LatLng(new_lat, latlon.Lon + lon_delta);
}
link_to_ifにブロックを渡す

link_to_if(link_to_unless)を使う時に、link_toの時と同じようにブロックを渡そうとするとエラーになる

```erb
<%= link_to_if 条件式, url do %>
<span>エラーになるよ</span>
<% end %>
```

captureを使うといい感じにできる

```erb
<% @contents = capture do %>
  <span>うごくよ</span>
<% end %>
<% link_to_if 条件式, @contents, url %>
```
php-master-changes 2018-10-14

今日は ext/sodium について PECL libsodium-php の修正のバックポートと、処理系ソースコード内の改行文字の入れ方の修正があった！

# 2018-10-14
## jedisct1: ext/sodium: Avoid shifts wider than 32 bits on size_t values
- https://github.com/php/php-src/commit/d05745816634d82a14bb8abb9c322c8b63be098f
- [7.2~]
- ext/sodium で size_t の値を 32 ビット以上シフトするのを避けるよう修正
- 32 ビット環境の対応かな
- [PECL libsodium-php](https://github.com/jedisct1/libsodium-php) 2.0.10 からの[バックポート](https://github.com/jedisct1/libsodium-php/commit/053a9e4f86f1e3b644a4bb9357662837ab22192d)

## jedisct1: ext/sodium: Use a correct max output size for base64 decoding
- https://github.com/php/php-src/commit/15ba7df2245ac177a965346e7ec96a4ab3300839
- [7.2~]
- ext/sodium で [sodium_base642bin()](http://php.net/manual/en/function.sodium-base642bin.php) の出力バッファのサイズが誤っていて切り詰められたりする問題の修正
- PECL libsodium-php 2.0.12 からの[バックポート](https://github.com/jedisct1/libsodium-php/commit/615bf793623eb3ae0d20cf407153f2d7e2aef9b5)
- [#76291](https://bugs.php.net/bug.php?id=76291) でバグトラッカにも入ってた奴

## jedisct1: ext/sodium: Fix sodium_pad() with blocksize >= 256
- https://github.com/php/php-src/commit/bf48d0c475c0c1312fbf763d221d94e87cf480d0
- [7.2~]
- ext/sodium で [sodium_pad()](http://php.net/manual/en/function.sodium-pad.php) の処理中、blocksize が 256 以上のケースでの挙動を修正
- PECL libsodium-php 2.0.12 からの[バックポート](https://github.com/jedisct1/libsodium-php/commit/4e141bb878fe9d961a39f9940e4c2e1b9643252e)
- 古いバージョンの libsodium を使ってる場合に影響するのかな

## jedisct1: ext/sodium: sodium_pad(): do not copy any bytes if the string is empty
- https://github.com/php/php-src/commit/82a93c17943c510b0bf33904429d47fbb74d9fc2
- [7.2~]
- ext/sodium で sodium_pad() の処理中、バッファオーバーフローでクラッシュする問題の修正
- PECL libsodium-php 2.0.13 からの[バックポート](https://github.com/jedisct1/libsodium-php/commit/a628f63a43bb9ede2a6c4655c63da1f1c1c61c63)
- [#77008](https://bugs.php.net/bug.php?id=77008) でバグトラッカにも出てた奴

## jedisct1: [ci skip] Update NEWS
- https://github.com/php/php-src/commit/5d70165f632d8857f2e75975d5857fa29a68f3fc
- [7.2~]
- ↑の一連の ext/sodium の修正の NEWS への追記

## petk: Sync leading and final newlines in source code files
- https://github.com/php/php-src/commit/1ad08256f349fa513157437abc4feb245cce03fc
- [7.1~]
- ファイル末尾に改行文字のないものへ足したり、不要な改行文字を削ったりの修正

## petk: Fix failing ext/session/tests due to final newlines
- https://github.com/php/php-src/commit/afd534f1634e9a5d631afac39a9c9b09b1ba8b33
- [7.1~]
- ↑で ext/session/tests のテストがこけてた問題の修正
UnityのiOSアプリにFirebaseを導入したら「iOS framework addition failed」でビルドできない問題

#概要
UnityからFirebase Realtime Databaseを使おうとした際に、iOSビルドが通らない問題が生じたためその備忘録です。

#環境
・Unity2018.2.10f1
・Xcode10
・firebase_unity_sdk(5.3.0)
・`pod --version` -> 1.5.3

#再現方法
下記の手順でFirebaseを導入した際にiOSビルドが通らない問題が生じました。
UnityへFirebaseを導入する方法については、[公式の説明](https://firebase.google.com/docs/database/unity/start?hl=ja)を参照して下さい。

1. Unityプロジェクトを作成し、ビルドプラットフォームをiOSに変更する<br>

1. 公式に従ってFirebaseを導入する<br>今回は*FirebaseDatabase.unitypackage*のみインポート

1. ビルドすると以下のようなエラーが生じる<br>
    
    ```
    iOS framework addition failed due to a CocoaPods installation failure. This will will likely result in an non-functional Xcode project.

    After the failure, "pod repo update" was executed and succeeded. "pod install" was then attempted again, and still failed. This may be due to a broken CocoaPods installation. See: https://guides.cocoapods.org/using/troubleshooting.html for potential solutions.

    pod install output:

    Analyzing dependencies
    [!] CocoaPods could not find compatible versions for pod "GoogleUtilities/MethodSwizzler":
  In Podfile:
    Firebase/Core (= 5.6.0) was resolved to 5.6.0, which depends on
      FirebaseAnalytics (= 5.1.1) was resolved to 5.1.1, which depends on
        GoogleUtilities/MethodSwizzler (~> 5.2.0)

    Specs satisfying the `GoogleUtilities/MethodSwizzler (~> 5.2.0)` dependency were found, but they required a higher minimum deployment target.


    [33mWARNING: CocoaPods requires your terminal to be using UTF-8 encoding.
    Consider adding the following to ~/.profile:

    export LANG=en_US.UTF-8
    [0m



    pod repo update output:

    ~ 以下略 ~
    ```
ログには**Build completed with a result of 'Succeeded'**とあり、Xcodeプロジェクトも生成されていますが、そちらを開いて実行してもビルドは通りません。


#解決方法
どうやら原因はCocoaPodのバグらしく、[こちら](https://github.com/firebase/firebase-ios-sdk/issues/1845)の通りPodfileを編集して再インストールする事で無事ビルドできました。

1. 生成されたプロジェクトフォルダに移動してPodfileを開く
2. 下記のように`pod 'GoogleUtilities', '5.2.3'`を追記する

    ```:Podfile
    source 'https://github.com/CocoaPods/Specs.git'
    platform :ios, '12.0'

    target 'Unity-iPhone' do
pod 'Firebase/Auth', '5.6.0'
pod 'Firebase/Core', '5.6.0'
pod 'Firebase/Database', '5.6.0'
pod 'GoogleUtilities', '5.2.3'
end
~                 
    ```
3. `pod install`
4. 生成された`Unity-iPhone.xcworkspace`を開いてビルド

上記手順で一度インストールしてしまえば、以降はUnityの[Build And Run]からも実行できるようになります。

ちなみに「iOS framework addition failed」で調べると、*~/.profile*や*~/.bash_profile*に`export LANG=en_US.UTF-8`を追記する解決法が散見されますが、今回の問題はこの方法では解決しませんでした。