OmniAICreator/Qiita-1.07M huggingface dataset:
GCPのCloud Text-to-Speech APIを利用する簡単な方法（cURLを利用）

## はじめに

GCP(Google Cloud Platform)には、Cloud Text-to-Speechというテキストから音声に変換するサービスがあります。
今回は、cURLを利用し、とりあえず難しいことを考えずにサクッと使ってみます。

## 事前準備
Cloud Text-to-Speech APIドキュメントの「クイックスタート: コマンドラインの使用」の『始める前に』を参考に環境の準備を進めます。
https://cloud.google.com/text-to-speech/docs/quickstart-protocol

Cloud SDKは下記よりダウンロード可能です。
https://cloud.google.com/sdk/docs/

## コマンド
次のコマンドを実行します。

```
curl \
-H "Authorization: Bearer $(gcloud auth application-default print-access-token)" \
-H "Content-Type: application/json; charset=utf-8" \
--data "`cat <入力ファイル名> | sed 's/"/@@@/g' | sed "s/@@@/'/g"`" \
"https://texttospeech.googleapis.com/v1/text:synthesize" | \
jq -r '.audioContent' | \
base64 --decode  > <出力ファイル名>.mp3
```
### 入力ファイル

次のような内容のJSONファイルを指定します。（絶対パスまたは相対パス）
囲み文字はダブルクォート、シングルクォートどちらでもOK（コマンド側で差異を吸収）

※文字列にシングルクォートやダブルクォートが存在する場合の考慮はしていないので、そのような文章を処理する（sedで加工する）必要がある場合は、適宜調整が必要となります。sedで加工するのが面倒な場合は、予めテキストエディタ等でダブルクォートをシングルクォートに置換しておきます。

```
{
   'input':{
      'text':'Android is a mobile operating system developed by Google,
         based on the Linux kernel and designed primarily for
         touchscreen mobile devices such as smartphones and tablets.'
   },
   'voice':{
      'languageCode':'en-gb',
      'name':'en-GB-Standard-A',
      'ssmlGender':'FEMALE'
   },
   'audioConfig':{
      'audioEncoding':'MP3'
   }
}
```

なお、下記URLの「試してみましょう」で文章と条件を設定し、「Show JSON」をクリックすると、上記フォーマットと同様のJSONテキストを取得することができます。非常に便利です。

Cloud Text-to-Speech
https://cloud.google.com/text-to-speech/?hl=ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64876/892e719f-aba1-8d63-18e9-ea849a9a5c09.png)

以下の出力結果を、ファイルとして保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64876/2ddd75ad-49de-420e-9a22-c1aa2e7728d8.png)


### 出力ファイル

任意のファイル名を指定します。拡張子はmp3とします。


## 参考情報

Cloud Text-to-Speech API ドキュメント
https://cloud.google.com/text-to-speech/docs/?hl=ja
Flutter + Firebaseでモバイルアプリを作った時にColorの保存で困った話

# はじめに
1ヶ月ほど前に、Flutterに手を出しました。
YouTubeに上がっているチュートリアルをやって、それからオリジナルのアプリを作り始めたんですが躓きまくり。
アプリを作るにあたって、ほとんど触ったことなかったFirebaseのサービスもいろいろ使ってみました。

- Firebase Authentication
- Cloud Firestore
- Cloud Storage for Firebase
- Firebase Cloud Messaging
- Cloud Functions for Firebase

いやぁ便利ですね。僕が作ってるぐらいのアプリならFirebaseで全部できちゃうじゃん。
ところが問題が起きました。

# 問題
「Colorが保存できない...」

Cloud Firestoreが対応しているデータ型は

- string
- number
- boolean
- map
- array
- null
- timestamp
- geopoint
- reference

の9つ。
mapもarrayもこの9つの型しか保存できません。

よわよわな僕は困りました。

「どうやって保存しよう...」

「Stringで保存するしかないかぁ」

# 結局どうしたか
Stringで保存することにしました。

いろいろ調べてみて、「Colorのhex値だけ取り出してそれをStringで保存、取ってきたhex値を使ってColorに戻す」っていう方法がなんかいい感じだったんですが、僕の場合、保存したいのはMaterialColor(なんか名前がついてる色)だったので、ちょっと違うことをしてみました。

### コード
```dart
// Colorの値をStringに変換
String stringifyColor(Color pickedColor) {
  String stringifiedColor;

  switch (pickedColor) {
    case Colors.pink:
      stringifiedColor = 'pink';
      break;
    case Colors.red:
      stringifiedColor = 'red';
      break;
    case Colors.deepOrange:
      stringifiedColor = 'deepOrange';
      break;
    case Colors.orange:
      stringifiedColor = 'orange';
      break;
    // ...省略
  }

  return stringifiedColor;
}


// Stringで保存されたMaterialColorの名前をもとにColorの値を返す
Color stringifiedColorToColor(String stringifiedColor) {
  Color reconvertedColor;

  switch (stringifiedColor) {
    case 'pink':
      reconvertedColor = Colors.pink;
      break;
    case 'red':
      reconvertedColor = Colors.red;
      break;
    case 'deepOrange':
      reconvertedColor = Colors.deepOrange;
      break;
    case 'orange':
      reconvertedColor = Colors.orange;
      break;
    // ...省略
  }
  
  return reconvertedColor;
}

```

そうです。すみません。色の名前をStringで保存して、データを取ってくる時にそれをアプリ側でColorに戻してるだけです。おかげでコードが長ったらしくなりました。

アプリの中でユーザーに色を[color picker](https://pub.dev/packages/flutter_material_color_picker)(MaterialColorのみ)で選択させてそれを保存するという形をとっているので、"cyan"とか"amber"という風にデータベースにも保存されているとわかりやすいかなと思ってこれでいきました。"stringify"とはちょっと違うような気もしますが、「文字列にする」ということで多めに見てください。

もっと上手いことできたんじゃないかなとは思いますが、今回はこのように対処しました。

# 参考
- [How to convert Flutter color to string and back to a color](https://stackoverflow.com/questions/49835146/how-to-convert-flutter-color-to-string-and-back-to-a-color)
- [Flutter/Dart: Convert HEX color string to Color?](https://stackoverflow.com/questions/50381968/flutter-dart-convert-hex-color-string-to-color)
CloudFormationでCodePipelineの手動承認のアクショングループを作成する方法

# 目的
調べてもわからなかったため、サポートに問い合わせを実施。
備忘録として記録する。

# 結論
下記のように指定する。
ステージ名とアクショングループは任意に名称を指定する。

```yaml
        - Name: 【ステージ名】
          Actions:
            - Name: 【アクショングループ名】
              ActionTypeId:
                Category: Approval
                Owner: AWS
                Provider: Manual
                Version: 1
```

# わからなかった理由
下記の日本語のサポートページを見ても何を指定すればよいのかわからなかった。
「以下のいずれかの値」ってなに？？？
https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-properties-codepipeline-pipeline-stages-actions-actiontypeid.html

![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478113/8b04dc5c-8165-bd37-6356-881cf4f84a65.jpeg)

# 補足

## サポートページ
下記のサポートページを見るべきでした。
※CloudFormationではなく、CodePipelineのページ
https://docs.aws.amazon.com/ja_jp/codepipeline/latest/APIReference/API_ActionTypeId.html

## ActionTypeId プロパティ内で指定する値
AWS CLIの下記コマンドで各アクションの定義が取得できる

```
$ aws codepipeline list-action-types --action-owner-filter AWS
```

# 最後に
CloudFormationのサポートページを見てわからないときは、各サービスのサポートページを見るようにします。
Apache Flexのデータバインディングの使い方

# はじめに
Apache Flexのデータバインディングの使い方を簡単にまとめます。

# 文字列のデータバインディング
![tmp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102121/3657f9d2-9b88-5f48-4cf4-587c56b75829.png)

```mxml:mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var message:String = "Hello World";
		]]>
	</fx:Script>
	<s:Label left="10" top="15" text="{message}" />
	<s:TextInput left="10" top="40" text="@{message}" />
</s:WindowedApplication>
```
バインディングしたいデータに```[Bindable]```をつけておきます。（今回は、message）

画面側で、```text="{message}"```のように{}で囲んで指定することで、データバインディングができます。
messageの値が変わった場合、リアルタイムに画面の表示に反映されます。

バインディングを双方向にしたい場合は、```text="@{message}"```のように@{}で囲んで指定することで、双方向のデータバインディングができます。
双方向にすることで、messageの値の変更をリアルタイムに反映するだけでなく、TextInput等のUIコンポーネントを利用することでmessageの値をリアルタイムに更新することが可能となります。

# 数値のデータバインディング
![tmp2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102121/13155ee5-d26a-8589-0f1b-5373269cc666.png)

```mxml:mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:Script>
		<![CDATA[
			[Bindable]
			private var count:int = 5;
		]]>
	</fx:Script>
	<s:Label left="10" top="15" text="{count}" />
	<s:NumericStepper left="10" top="40" value="@{count}" />
</s:WindowedApplication>
```
数値についても同様です。

# プロパティのデータバインディング
![tmp3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102121/9f8b2e91-fc58-5558-b38c-7641c2349904.png)

```mxml:mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   fontFamily="Meiryo">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;

			[Bindable]
			private var ac:ArrayCollection = new ArrayCollection([
				{c1: 100, c2: "aaa"},
				{c1: 200, c2: "bbb"},
				{c1: 300, c2: "ccc"}
			]);
		]]>
	</fx:Script>
	<s:Label left="10" top="15" text="データは{ac.length}件です" />
	<s:DataGrid left="10" top="40" right="10" bottom="10" dataProvider="{ac}" >
		<s:columns>
			<s:ArrayList>
				<s:GridColumn headerText="列１" dataField="c1" />
				<s:GridColumn headerText="列２" dataField="c2" />
			</s:ArrayList>
		</s:columns>
	</s:DataGrid>
</s:WindowedApplication>
```
```text="データは{ac.length}件です"```のように指定することで、プロパティのデータバインディングができます。
ArrayCollectionのlengthの値が変わった場合、リアルタイムに画面に反映されます。
個人的にはよく使います。
Kubernetes 1.16: SIG-Apps の変更内容

# はじめに

ここでは、Kubernetes 1.16 の CHANGELOG から SIG-Appsの取り組みについてまとめています。

- https://github.com/kubernetes/kubernetes/blob/master/CHANGELOG-1.16.md

:pencil: がついた文章は、CHANGELOGの公式内容ではなく筆者の補足です。

その他の変更点については[Kubernetes 1.16: 変更点まとめ](https://qiita.com/uesyn/items/0246346d8958318fa1d4)から参照できます。


# SIG Apps

## 注目機能 (Notable Features)


### CLI Improvements

- kube-controller-managerに`--endpoint-updates-batch-period`フラグが追加されました、このフラグはPodのの変更によって発生するEndpointの更新の回数を減らすために使うものです。([#80509](https://github.com/kubernetes/kubernetes/pull/80509), [@mborsz](https://github.com/mborsz))

### Misc

- Endpoint Slice Contollerを追加しました。これはデフォルトでは無効に設定されています。([#81048](https://github.com/kubernetes/kubernetes/pull/81048), [@robscott](https://github.com/robscott))
  - :memo: Endpoints APIはEndpointの数が増えた際にパフォーマンスに問題が発生するため、それを解決するために作られている新しいAPIがこれです。
- NamespaceリソースにStatus Conditionsを追加しました。 ([#73405](https://github.com/kubernetes/kubernetes/pull/73405), [@wozniakjan](https://github.com/wozniakjan))
  - :memo: Namespaceリソースに`.status.conditions`が追加され、Namespaceを削除した際に、finalizerにより、そのNamespace内のオブジェクトが削除される進捗が記録されるようになりました。

## その他の注目機能 (Other notable changes)

### Apps

- DaemonSetの条件にマッチしないPodが削除されない問題を修正しました。 ([#78974](https://github.com/kubernetes/kubernetes/pull/78974), [@DaiHao](https://github.com/DaiHao))
  - :memo: Nodeのラベルを変更することで、DaemonSetにより一度スケジュールされたPodを削除しようとする際にタイミングによって発生するバグのようです。
- Failed状態のPodが存在するとDaemonSetのローリングアップデートがハングしてしまう問題を修正しました。 ([#78170](https://github.com/kubernetes/kubernetes/pull/78170), [@DaiHao](https://github.com/DaiHao))

## 所感

EndpointSliceは次世代のEndpointリソースということで、今後の展開に注目です。
また、DaemonSet周りは[1.15の時も素朴な操作でエラーとなるケースの修正が結構あった](https://qiita.com/inajob/items/3e56cf9ea5990048863d#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E6%B3%A8%E7%9B%AE%E6%A9%9F%E8%83%BD-other-notable-changes)ので、引き続きバグ情報に注意が必要と感じました。
nginx unitをmacで使う。【python(flask)編】

ちょっとCERNが作成しているindicoというCMS?を立ち上げる機会があったのでメモ
macだといろいろと手こずったので。

# インストール
https://pypi.org/project/indico/
から、`pip2 install indico`でインストール
調べてみるとこのindico、flaskが使われている。
（python2系で動くので、pip2　ここは環境によりかなり違うと思う）

あとは公式を参照しながら、`brew`でpostgresなどインスト&設定を済ます。
https://docs.getindico.io/en/stable/installation/production/centos/apache/
(Apacheで動かさないので、Apacheの設定はひとまず不要）

# uWSGIでまずは動かす
iniファイルは以下の通り。socketもvirtualenvもまずは使わない。

``` uwsgi.ini
[uwsgi]
processes = 4
enable-threads = true
http=0.0.0.0:8089

master = true
auto-procname = true
procname-prefix-spaced = indico
disable-logging = true

plugin = python
single-interpreter = true

touch-reload = /path/to/indico/web/indico.wsgi
wsgi-file = /path/to/indico/web/indico.wsgi

vacuum = true
buffer-size = 20480
memory-report = true
max-requests = 2500
harakiri = 900
harakiri-verbose = true
reload-on-rss = 2048
evil-reload-on-rss = 8192
```

上記で、`uwsgi --http=0.0.0.0:8088 --wsgi-file=web/indico.wsgi` で起動を確認。
（ほんとはceleryも起動してないといけないが、まずは確認だけ。）

無事に起動が確認できたら、nginx-unitの設定をすすめる。

# nginx-unit インストール
https://unit.nginx.org/installation/#configuring-python
公式を参照しながら、`./configure python`を`make`する前に入れる。
問題なければpythonのsoができる。

# nginx-unitで起動
nginx-unitでWebアプリを起動するときはJSONをPUTするのだが、今回のindicoの場合は

``` indico.json
{
  "listeners": {
    "*:3009": {
      "application": "indico"
    }
  },

  "applications": {
    "indico": {
      "type": "python",
      "user": "user",
      "group": "staff",
      "module": "start",
      "environment": {
        "PYTHONPATH": "/usr/local/lib/python2.7/site-packages(pip2でインストールされるパス)"
      },
      "path": "/path/to/indico/web"
    }
  }
}
```

ここでハマったのが２点ほど
1. JSON内の`module`部分にはファイル名を指定できない。
2. indicoがインストールされているパスを読み込んでくれず、indicoが起動できない。

### 1. moduleの指定
最初はwsgiの設定ファイルが`web/`配下に`indico.wsgi`というファイル名であるが、これをそのまま`module`に入れて設定を上げるとエラーになる。
なので、`indico.wsgi`を`start.py`とかにリネーム
(ここで`indico.py`というファイル名にしてしまい、さらにハマる。モジュールの名前とファイル名が同じになると競合してライブラリがロードできなくなる。)
これで、`module`の部分に`start`とかで起動できるようになる。

### 2. pip2のパスを追加
pip2のフォルダ確認。

```
$ pip2 -V
pip 19.2.3 from /usr/local/lib/python2.7/site-packages/pip (python 2.7)
```

上記フォルダを`PYTHONPATH`に追加してやる。（JSON参照）
これでJSONをPUTしてもエラーが出なくなった。

## 思ったこと
普段python使わないので、いろんなところで躓いた。
nginx-unitの情報もまだまだ少ないので、トライ・アンド・エラーばかりとなって結構時間がかかった。
ただ、nginx-unitで複数言語、複数アプリの起動ができるので今後は楽になるかも。
Laravel プロジェクトのMySQLからテーブル定義書を出力する

既存のLaravelプロジェクトのデータベースからテーブル定義書をエクセル形式で出力するPackageを作成し、packagist に登録して公開しました。

packagist
[https://packagist.org/packages/shibuyakosuke/table-definition-spreadsheet](https://packagist.org/packages/shibuyakosuke/table-definition-spreadsheet)

Github
[https://github.com/ShibuyaKosuke/laravel-table-definition-spreadsheet](https://github.com/ShibuyaKosuke/laravel-table-definition-spreadsheet)

## インストール

インストールは `composer` でインストールします。

```bash
$ composer require shibuyakosuke/table-definition-spreadsheet --dev
```

インストールしたらすぐに、コマンドを使って、出力できます。
実際に、テーブルは migration によって作成済みでなければなりませんので、前もって migration を実行しておいてください。

```bash
$ php artisan db:definition
```

上記のコマンドで

`storage/app/table-definition.xlsx` が作成されます。
VSCodeでNuxtプロジェクトの自動フォーマットをシンプルに実現する

## 状況
- Visual Studio CodeでNuxtプロジェクトの自動フォーマットが行えるようにしたい（なるべくシンプルに）
- デフォルトのFormatterはVSCodeの拡張機能のPrettierを使っている
- しかし、Prettier拡張機能ではVueファイルをフォーマットできない

## 解決策
- VueファイルフォーマットはESLintで行う
- それ以外のファイルはVSCodeのPrettier（拡張機能）を使う

## やり方
まず、Nuxtのプロジェクト作成時にESLintとPrettierを有効にしておきます。

そうすると、下記のパッケージがデフォルトでインストールされている状態となります。（すでに作成済みのプロジェクトで対応したい場合は下記のパッケージを追加してください。

```package.json
"devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }
```

自動生成される`.eslintrc.js`の中身は下記のようになっています。

```.eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
  plugins: [
    'prettier'
  ],
  // add your custom rules here
  rules: {
  }
}
```

`.vscode`ディレクトリの中の`settings.json`に下記のコードを追加します。

```settings.json
{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "[vue]": {
    "editor.formatOnSave": false
  }
}
```

ここでは、Vueファイルだけeslintを使ってフォーマットしていて、それ以外のファイルはVSCodeの拡張機能であるPrettierを使ってフォーマットしています。

ESLintによるバリデーションをきっちり行いたければ、validateの対象をVueファイルだけでなくてJavaScriptファイルも対象にした方がいいかもしれませんね。

最後に、こちらも自動生成される`.prettierrc`は下記の通り。

```prettierrc
{
  "semi": false,
  "arrowParens": "always",
  "singleQuote": true
}
```


## 終わりに
ESLintやPrettierを完全に理解している訳ではないので、もしかするともっとスマートな方法があるかもしれません。


とはいえ、これでVueファイル含めてそれぞれのファイル形式で自動フォーマットができるようになるので、目的は達成できます。

ご指摘あればコメント等でいただけると幸いです！
WITH句を使用してテーブルを作成せずにSQLの動作を確認する

## 状況
・SQL(SELECT文)の動作検証したい。
・SELECT文の動きを実際に見せて後輩や部下にSQLを教えたい。
・けど、実際にテーブルを作成してデータもインサートするのはするのはめんどくさい。。。

みたいな状況ってないでしょうか。私は結構よくあります。
こんな時、WITH句を使用すると便利です。

## そもそもWITH句って何？
WITH句を知らない、あるいは知っているけどほとんど使用したことがない、という人向けに簡単に解説。
一言でいうと、SELECT文の結果に名前を付けることでSQL文の記述を簡単にすることができる構文。

```sql:構文
with <名前> as (select文)
```


```sql:例
with tableC as (
    select * 
    from tableA A
    inner join tableB B
    on A.colA = B.colA
)
select colA, sum(bolB)
from tableC
group by colA
```
使い方はこんな感じ。
tableAとtableBをjoinした結果にtableCという名前を付けることで、
WITH句に続くSQLで、tableCを実際のテーブルっぽく扱うことができる。

## WITH句でテーブルを作らずにSELECT文の動作を検証
いよいよ本題。
通常SELECT文の動作を検証しようと思うと、create tableを使ってテーブルを作成し、inesrtで必要なデータを入れる必要がある。
しかし、SELECT文の動きを検証したいだけの時にわざわざテーブル作るのは面倒。
削除し忘れて後で上司に怒られたりするのも嫌。
そこでWITH句を使い、中のSELECT文でunionを使用することで、疑似的なテーブルを作成する。
それを本物のテーブルっぽく扱うことで、SELECT文の動作検証ができる。

```sql
with users as (
    select 1 user_id, '佐藤' user_name, 20 age, '男' sex
    union
    select 2, '鈴木', 24, '女'
    union
    select 3, '田中', 22, '女'
    union
    select 4, '山本', 31, '男'
    union
    select 5, '高橋', 28, '男'
)
select sex, max(age) max_age
from users
group by sex;
```

結果

|sex|max_age|
|:--:|:--:|
|男|31|
|女|24|

こんな感じで、実際にはusersというテーブルは作成していなくても、
あたかもそういうテーブルが存在するような感じでselect文の動作を確認することができる。

## 補足
・上の例はPostgreSQLで検証してます。
・Oracleの場合、ダミーレコードを作成する場合は `from dual` が必要。
・unionのところはunion allでも可。件数多いときはunion allの方がいいかも。
・あくまでSELECT文の結果を確認するためのテクニック。
速度とか実行計画は一切あてにならないので、
速度まで含めて検証したい場合はきちんとテーブルとインデックスを作りましょう。
chromedriver-binary(Python)をChromeのバージョンに合わせてインストールする＠Windows

## TL;DR

Pythonの「chromedriver-binary」をインストールする際には、インストールされている「Google Chrome」のバージョンと同期を取る必要がある。標準的手順は、こんな感じ？

1. Google Chromeを起動する
2. URL欄に[chrome://settings/help]を入力し、表示されたバージョンを控える
3. [chromedriver-binaryのページ](https://sites.google.com/a/chromium.org/chromedriver/)で、適合しそうなバージョンを探す
4. `pip install chromedriver-binary==77.0.3865.40`

なんかこう、スマートじゃないので、１行でなんとかしたい！

### 参考にしました

[ChromeとPythonのchromedriver-binaryのバージョンを合わせたい。 - Qiita](https://qiita.com/akiko-pusu/items/86faca0cb9c877896c04)

### 動作環境

+ Windows 10
+ PowerShell 6.2.2

## PowerShell版

```powershell
pip install chromedriver-binary<=$(ls "C:\Program Files (x86)\Google\Chrome\Application" | %{$_.name} | findstr "^[0-9].*")
```

## コマンドプロンプト版

```
for /f "tokens=1" %V in ('dir /B /O-N "C:\Program Files (x86)\Google\Chrome\Application" ^|findstr "^[0-9].*" ') do pip install chromedriver-binary^<^=%V
```

## 感想

スマートにしようとしたのに、より泥臭い！！より良い解があれば、ぜひ。。。
2019-09-24 PDF (v1.7) > 固定文字長さに対する文字列の中央寄せ (精度はそれほど良くはない)

```txt:動作環境
Acrobat Reader DC version 2019.012.20040
Windows 10 v1904
```

### 概要

- PDFでフォントの中央寄せをしたい
- **PDFの資料を読んだりフォーラムの記載を見たりしたが、PDFでフォントを中央寄せする方法が見当たらない**
- 自分で座標計算する

### 座標計算

1. 各種フォントサイズで印刷 (左一致)
2. 定規で幅を測定
    - 測定者の技能による精度の制約はある
3. 最小二乗法を使って誤差を減らした式を導出
4. 式と用紙幅、MediaBox座標定義から中央寄せのための座標計算を行う

### 結果

Excelで作った計算シート。

<font color=Red>(間違い: 下記の画像の「y=2.7595*C」は「y=2.7595*B」が正しい)</font>
![2019-09-24_14h17_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/86b2fdcf-b52b-a255-ee49-299d7fbe8c09.png)

それを元にしたPDF(v1.7)での中央寄せ実装例。

![fontCenter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/9060194c-1ce6-2966-3b64-f98909632d06.png)

多少ずれてはいるが、今回必要としている仕様では大丈夫だろう。

### TODO 

- [ ] 文字長さが変わった時の対応
HP-UXへのSSH接続が遅い時に試すこと

#HP-UXサーバへのSSH接続が30秒くらいかかってイライラしていたのを解決した方法

##前提
該当HP-UXサーバへはネットワーク的につながっている。
SSH接続すると30秒くらいかかってやっと入れる。
DNSサーバへは接続できている。
PAMの設定とか変更しても変化なし。
ssh -vvv IPアドレスの結果が
debug2: channel 0: open confirm rwindow 0 rmax 32768
で30秒くらい止まる。

##解決方法
`/var/adm/wtmps`
を初期化する。
`cp -p /var/adm/wtmps /var/adm/wtmps.yyyymmdd`
とかしてから
`:>/var/adm/wtmps`
(権限がないとか言われる場合はchmodで対応)
で0バイトにする。

##結果
SSH接続で30秒くらいログインにかかっていたのが、2秒になりました!

##理由
/var/adm/wtmpsはログイン、ログアウト情報を保存している。
SSH接続時には、そのファイルを見ている。
CollaboratoryのTensorflow2.0で簡単にTensorboardを利用

Google CollaboratoryのTensorflow2.0はTensorboardが簡単に使える。メモ。

###1. 準備
```PYTHON
#tf-nightly-2.0-previewのインストール
%pip install tf-nightly-2.0-preview

import tensorflow as tf
from tensorflow.keras.layers import Input, Dense, Flatten, Dropout
from tensorflow.keras import Model
import datetime, os
print(tf.version)

#テスト用のFashion MNISTデータセットロード
fashion_mnist = tf.keras.datasets.fashion_mnist
(xTrain, yTrain),(xTest, yTest)=fashion_mnist.load_data()
#正規化
xTrain,xTest = xTrain/255.0,xTest/255.0
```

###2. Tensorboardの呼び出し
```
#Tensorboardの呼び出し
%load_ext tensorboard
#モニタリング用にTensorboardを表示
%tensorboard --logdir logs
```
最初は何もない
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377965/f38535a2-dce0-f188-d957-c8a3885840f9.png)


###3. 簡単なモデルの作成
```
def create_model():
  inputs = Input((xTrain.shape[1],xTrain.shape[2]))
  x = Flatten()(inputs)
  x = Dense(256, activation="relu")(x)
  x = Dense(256, activation="relu")(x)
  x = Dropout(0.2)(x)
  x = Dense(512, activation="relu")(x)
  predictions = Dense(10, activation='softmax')(x)
  model = Model(inputs=inputs, outputs=predictions)
  model.summary()
  return model

model = create_model()
model.compile(optimizer="adam",loss='sparse_categorical_crossentropy',metrics=['accuracy'])
```
###4. コールバックにTensorboardを使用する定義

```python
#ログディレクトリの命名
logdir = os.path.join("logs", datetime.datetime.now().strftime("%Y%m%d-%H%M%S"))

#tensorbordコールバックの定義。histogram_freqは書き込み頻度。
#少ないほど細かくなるが、重くなるので注意
tensorboard_callback = tf.keras.callbacks.TensorBoard(logdir, histogram_freq=1)
```
#5. トレーニングの実行
コールバックにTensorboardを入れて、トレーニングを実施。

```
#トレーニングによるモデルの最適化
model.fit(x=xTrain, y=yTrain, epochs=30,validation_data=(xTest, yTest),callbacks=[tensorboard_callback])
```

これだけで先ほど呼び出したTensorboardでリアルタイムにモニタリング可能。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377965/eabdc028-d044-7603-1308-0ee1c3e421d9.png)

- リアルタイムで更新されない場合は、'Write a regex to filter runs' のチェックボックスを一旦外して入れ直すと表示される。


先にTensorboardを呼び出してリアルタイムモニタリングを行うと、HistogramやDistributionなど、一部の項目が消えるバグがあるのが残念。
終了後のTensorboard呼び出しなら問題なし。

###参考
https://www.tensorflow.org/tensorboard/r2/tensorboard_in_notebooks
[heroku] bundler 2.0+ をつかえるようにbuildpackをカスタムしていてpushが弾かれた話

### 前提

Bundler gemが2.0にアップデートされたときに、アプリケーションもそのバージョンにアップしたけれど、herokuが内部で使用しているBundlerのバージョンが1.xxだったので、[Bundler 2 系を使ったアプリを Heroku にデプロイする \(You must use Bundler 2 or greater with this lockfile\. \(Bundler::LockfileError\)\) \- Qiita](https://qiita.com/wktk/items/1453157e958108ff0939)のように、buildpackをカスタムして`heroku push`して運用していました。

（…何ヶ月か後）

### 問題： push heroku がリジェクトされる

そのことをすっかり忘れ、久しぶりに`push heroku`すると、 **bundlerがみつからない**エラーがでました。

```shell
remote:  !
remote:  !     Could not detect rake tasks
remote:  !     ensure you can run `$ bundle exec rake -P` against your app
remote:  !     and using the production group of your Gemfile.
remote:  !     Activating bundler (2.0.2) failed:
remote:  !     Could not find 'bundler' (2.0.2) required by your /tmp/build_2d0783040187f94af65f0eef9a2422a9/Gemfile.lock.
remote:  !     To update to the latest version installed on your system, run `bundle update --bundler`.
remote:  !     To install the missing version, run `gem install bundler:2.0.2`
remote:  !     Checked in 'GEM_PATH=/tmp/build_2d0783040187f94af65f0eef9a2422a9/vendor/bundle/ruby/2.6.0', execute `gem env` for more information
remote:  !
remote:  !     To install the version of bundler this project requires, run `gem install bundler -v '2.0.2'`
remote:  !
```
そうだbuildpackをカスタムしたぞ。と気づいて現在の状態を確認します。
bundlerの公式が提供していたbuildpackをつかうようになっていました。

```shell
$ heroku buildpacks
=== your-apps Buildpack URL
https://github.com/bundler/heroku-buildpack-bundler2.git
```

### 解決：buildpacks:set でデフォルトの状態にもどす

[Bundler Version \| Heroku Dev Center](https://devcenter.heroku.com/articles/bundler-version#app-not-using-the-currently-supported-bundler-version)を参考に、buildpacksを元の状態にもどします。

```shell
$ heroku buildpacks:set heroku/ruby
Buildpack set. Next release on your-apps will use heroku/ruby.
Run git push heroku master to create a new release using this buildpack.

$ heroku buildpacks
=== your-apps Buildpack URL
heroku/ruby
```

このあと、`push heroku`が正常に動作しました。
django-extensionsについて

こんにちは！
今回はインターン先のカリキュラムで**django-extensions**について学ぶ機会があったので、**django-extensions**についてアウトプットしていこうと思います。

##django-extensionsとは
**django-extensions**はDjangoの機能を拡張してくれるライブラリです。
導入するにはまず`pipコマンド`でインストールしましょう。
**runserver_plus**を使用するためには**Werkzeug**というライブラリも必要になるのでこちらもインストールしておきましょう。

```
pip install django-extensions Werkzeug
```
そして、`setting.py`のINSTALLED_APPに**django_extensions**を追加すれば完了です。

```diff
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
+   'django_extensions',
]
```

##具体的な機能について
###runserver_plus
`runserver_plus`という機能を使用することでブラウザに表示されるエラー画面上でデバッグができるようになります。
とても便利ですね。

###show_urls
`show_urls`という機能でurlの一覧を見ることができます。

###create_template_tags
`create_template_tags`では指定したアプリケーション内にテンプレートタグのディレクトリを作成することができます。

##まとめ
今回はdjango-extensionsについてアウトプットしてみました。
django-extensionsは使いこなせればとても便利な機能が拡張されるのぜひ入れてみましょう。
もっと詳しく知りたい方は参考資料を載せておくのぜひご覧ください。
最後まで読んでいただきありがとうございます。

##参考資料
[Django のおすすめライブラリ](https://qiita.com/odoku/items/90ebec6657c736c90f93)
[django-extensionsとdjango-debug-toolbarの導入](https://qiita.com/komiya_5467/items/3f97f5e23e2fe09eb6a4)
[djnago-extensionsのドキュメント](https://django-extensions.readthedocs.io/en/latest/index.html)
レスポンシブjQueryリサイズでPCとSPで画像切り替え メモ

var border = 768;
以下で画像の"_pc","_sp"部分を入れ替えます。

```html:changeImg.html


<!DOCTYPE html>
<html>
  <head>
    <title>Hello world!</title>
    <style type="text/css">
    	.toggleImg{
    		width: 300px;
    		height: auto;
    	}
    </style>
  </head>

  <body>

<img class="toggleImg" src="img_pc.png">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script type="text/javascript">

$(window).on('load resize', function(){

  
  var width = $(window).width();

  var border = 768;

  if( width <  border){
    $(".toggleImg").each(function(){
      $(this).attr("src", $(this).attr("src").replace("_pc","_sp"));
    })
  } else {
  	$(".toggleImg").each(function(){
      $(this).attr("src", $(this).attr("src").replace("_sp","_pc"));
    })
  }

});





$(window).on('load resize', function(){

  var width = $(window).width();
  var border = 768;

  if( width <  border){

    $(".toggleImg li span").each(function(e){
      var bg = $(this).css('background-image');
      bg = bg.replace("_pc","_sp");
      $(this).css('background-image',bg);
    })
  } else {
    $(".toggleImg li span").each(function(e){
      var bg = $(this).css('background-image');
      bg = bg.replace("_sp","_pc");
      $(this).css('background-image',bg);
    })
  }

});


</script>

  </body>
</html>









```
読みやすいコード

##良いコードとは何か？
①命名規則がしっかりしている
②コードのレイアウト
③コメントがある
だと考えています！
変わったら変更します。

##そもそもなんでいいコードが必要なの？
コードを書くのは大規模なプロジェクトになればなるほど、一人ではなく、チームで行うことが多くなるかと思います。僕は、最初はフリーではなく企業内でのエンジニアを目指しているのでこの点すごく気にしています。
みんな、生まれも育ちも違うので、もちろん英語力等も違うと思いますので変数の名前を自分のつけたいようにつけていては、チームメンバーが後から読んだ時になんやこれ！？となることを防げるのがいいコードなのかな。。。？という感じです。
俺は一匹狼なんだなんていう人も、後からエラーが出た時に無茶苦茶にその時の気分で変数をつけていると後からなんだこれ？となることも想定されるのでいいコード（統一感のもった）をかけるスキルは必要なのではないでしょうか？

##①命名規則
変数やメソッドの名前はプログラムの挙動に影響しないため、好きなように命名することができます。変数であれば、どのようなデータを格納するのか、メソッドであれば、どのような処理をするのかを明確に伝えられるような命名をしたいです。
-明確で具体的な単語を選ぶ（getではなくget_pageとか）
-汎用的な名前は避ける（合計値を一時的に保持したいならtmpではなくsumとか）
-名前に情報を含める（その変数は何をしているのかを明確に記載する）
-誤解されない名前を使う（read_bookではなくalredy_read_bookとか）
-他の開発者の期待に応える（変なところでnilを使わないとか）

##②コードのレイアウト
-整列化
-一貫性
-ブロック化
###整列化
イコールの位置などを揃えることで可読性を向上させる
###一貫性
ブロック等で段差の均等化
###ブロック化
的に空行を入れることで上と下では異なる処理をしていることを明確に示す。

##③コメント
その処理は何をしているのかといことを後から見てわかるようにコメントを入れることで、可読性をあげる。
また、メッセージを残すことも。。。
```
TODO: 他のファイルに同じ記述があるので共通化する
FIXME: メソッドが非推奨になったため使わないように変更する
```

##最後に
今後更新していきブラッシュアップしていきますのでお手やわからにコメントしていただけると幸いです。
cssでレスポンシブ　メディアクエリ

#レスポンシブとは#
>「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることを指します。

[引用元](https://www.crosswish.com/faq/592/)

#メディアクエリを使う#

```css

@media (min-width: 800px) {

}
```

`@media`の後ろの()に条件を入れることで指定した画面サイズの時にデザインが変わるようにできる。

上の例では画面サイズが800px以上になったときの処理がかけるようになっている。
netkeiba.comの馬柱をtsvにするchrome拡張を作りました

netkeiba.com のデータをTSV出力するChrome拡張を作りました。
https://github.com/currysita/netkeiba_feature_assist_extension

netkeiba.comのデータをExcelに貼り付けたかったのですが、うまくできないので勉強ついでにやってみました。
あんまり予想には役立たなかったです。
一応、中央競馬も地方競馬も動くのを確認しています。

## 使い方
1. git cloneしてディレクトリごとChrome拡張にしちゃえば使えます。
2. netkeiba.com にログインして、F12を押して開発ツールを開いてください。
3. 馬柱のページを開けば出力してくれます。
有料会員じゃないとタイム指数が取れないので、多分正常に動かないです。 

## 特徴
### 標準化
タイム指数、オッズなど主な素養を標準化してあります。標準化の方法としては最低値を1、最大値を2としています。
-1から1という基本的な標準化をしようとも思ったのですが、素養に重みをもたせた時にマイナスに加速する馬？？とかできちゃうので却下しました。
0から1というのも、データに重みをもたせた時に0だと差が大きくなりすぎるので却下しました。
### タイム
試しに秒速を出してみました。ぶっちゃけ全然当たる確率に貢献しないです。やっぱりコースの特徴とかと比べないと意味がないですね。
### 上がり3ハロン
前走のみ取得しています。これも、今のレースに近いものを使わないといけないのでしょうね。
### 馬体重増減
馬体重の増減に関しては、過去10年程度のJRAのレース結果から、馬齢と増減で絞り込んで勝率を大まかに割り出して定数化しました。2歳の馬だけ独立した値になっていますが、2歳の馬は他の年齢の馬と一緒に走る事が無いためです。
## 今後の課題
- 騎手の情報を取っていません。取るのが大変そうなので今は諦めてます。
- コース毎の差を考慮した値を出力したいですが、過去のレースのデータが必要なので、ちょっと無理かもしれません。
プロトコルをざっくりと説明してみた

はい、どうも
今回は前回の続きで
ネットワークの基礎でも重要なプロトコルについて勉強していきます！
では早速いってみよう！

前回記事：https://qiita.com/sinkuro06/items/67f6f4d264d4dfcea09f

#プロトコルとは？
簡単にいうと双方での通信の際の決まりごとを決める事を<b>プロトコル</b>といいます。

前回、LANとWANの違いについてお話ししましたよね。
例えばなんですが、
LANを構築したい！となった場合ですが、どのように構築すればいいでしょうか？
誰でも思いつくのは、パソコンとパソコン、パソコンとプリンターなどを
繋げて、はいおしまい。って感じだと思います。
ただ、これだと繋いだだけでまだ使う事ができません。
なぜなら、<b>通信を行う際の決まり事が何もない状態</b>だからです。

そこで決まり事を決めましょうってことで<b>プロトコル</b>が必要なわけです！

そして、同じルール（プロトコル）だとインターネットを使ってデバイス同士で接続ができるようになるのだ！
<b>※プロトコル＝決まり事、ルールと読み替えてもいいくらいなので覚えちゃおう！</b>

そこで一般的に使用されているプロトコルが<b>TCP/IP</b>だ！
ただTCP/IPについて詳しくは別記事で説明しますね！
今回はそれが一般的なんだーって覚えておこう！

##プロトコルの階層化について

コンピューター同士が通信するにはプロトコルが必要っていうのは
もうわかりましたよね？
ではプロトコルで実際にどんな決まり事があるのかを見ていきましょう！

いきなりですが、日常生活では
何事にも順序がありますよね？
例えば、
１：朝起きる
２：歯磨きをする
３：寝癖をなおす
４：朝ご飯を食べる
５：服を着替える
６：髪の毛セットする（女性ならメイクする）
７：家を出る

こんな順番があると思うのですが、このように
プロトコルにも順序があります。

それがこちらです。

<table border="1">
<tbody><tr class="bg1"><td>第７層</td><td>アプリケーション層</td><td>Application Layer</td></tr>
<tr class="bg2"><td>第６層</td><td>プレゼンテーション層</td><td>Presentation Layer</td></tr>
<tr class="bg3"><td>第５層</td><td>セション層</td><td>Session Layer</td></tr>
<tr class="bg4"><td>第４層</td><td>トランスポート層</td><td>Transport Layer</td></tr>
<tr class="bg5"><td>第３層</td><td>ネットワーク層</td><td>Network Layer</td></tr>
<tr class="bg6"><td>第２層</td><td>データリンク層</td><td>Data-Link Layer</td></tr>
<tr class="bg7"><td>第１層</td><td>物理層</td><td>Physical Layer</td></tr>
</tbody></table>


この階層化のモデルのことを<b>OSI参照モデル</b>と呼びます。
重要なので覚えましょう！
（これ覚える時、僕は頭文字をとって、
アプセトネデブと呪文のように覚えました笑）

OSI（Open System Interconnection）参照モデルとはISO（国際標準化機構）が
決めた異なるベンダ感で相互通信するための
「ネットワーク・モデル」と言われる統一規格のこと。
簡単にいうと階層ごとに役割があって、分担して作業を行っていると考えれば
大丈夫です！！

では次回はその役割を各階層ごとにみていきましょう!

今日はここまで！
検索力について

##検索力
エンジニアになるためには、検索力が必要。
ここでいう検索力とは、
①正確な情報を得る力
②求めているものを正確に探し出せるワード選びの力

##検索力の以前に（19/10/5加筆）
検索能力というのは、なんとなくやってみた感想なのですが、全く同じエラーというのは存在しなくて、ググってもいまいちマッチングしたものは出てこないというのが現実です。
そこで必要なのは、英語に恐れおののかずにしっかり向き合って複数のサイトの方法を熟読した上で、自分に最適と思える解決方法を試しては改善してということなのではないかと思っています！

##①正確な情報を得る力
信頼できるサイトを考える
- Qiita https://qiita.com/
- StackOverFlow https://ja.stackoverflow.com/
等のエンジニア専門のサイトをまずはあてにしてみる。

ただし、個人のサイトでも非常に著名な人物のものの場合もあるので注意することも必要です。
使えたりするかも？？？？

##②求めているものを正確に得る力
Googleの検索エンジンを使い倒す！！！！！！
-日ずけ指定をしてみよう
-マイナス検索をしてみよう
を実施してみるといいかもしれません！

##最後に
これから駆け出しの勉強中のため、勉強していく中でこんな検索の仕方がいいなというのがあったら追記していきますのでよろしくお願いします！
Serverlessをglobalインストールせずにgolangのプロジェクトを作る

# はじめに
公式にはserverlessをグローバルインストールしろって書いてるけど、それが嫌なのです。nodeの依存関係は全部package.jsonで管理したいのです。
っていう僕向けの備忘録です。
yarnは分かりません。ごめんなさい。
宗教上の理由でgo-mod を使ってます。go-depは分かりません。ごめんなさい。

好みの問題もあるので、「あ、こんな人もいるんだな」程度に読んでいただければと。



# どうやったの？

とりあえずnpmのプロジェクトを作成

```
npm init
```


serverlessをローカルインストール

```
npm i -D serverless
```


プロジェクト作成

```
npx sls create  --template aws-go-mod --path myService
```

作成されたファイルたちの階層をあげる(階層が深くなることが気にならない人はそのままでもok)

```
mv myService/* ./
```

### ビルド

`Makefile`がそのまま使えます。

```
make
```

### ローカル実行

```
npx sls invoke local --function hello
npx sls invoke local --function world
```


package.json使えるので、script書いとくと便利。

```package.json
{
  "name": "hogehoge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "sls invoke local --function hello",
    "hello": "sls invoke local --function hello",
    "world": "sls invoke local --function world",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "serverless": "^1.52.2"
  }
}

```

実行

```
npm start
npm run hello
npm run world
```

終わり。

# 感想

nodenvでnodeのバージョン管理してるので、ディレクトリごとに管理できるのだいぶ幸せになれた気がします。
git リポジトリーを作成する

# 手順
### １、git gui でリモートリポジトリーを作成
https://github.com/new
上記のurlで作成画面に入れる。ログインしていない場合ゴルインへリダイレクトされる。

### 2、初期設定
<img width="796" alt="スクリーンショット 2019-09-24 12.58.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324484/5fd5ea69-22ba-eada-4ed3-6b57f827f0c2.png">
プロジェクトの名前、ディスクリプション、公開(public)あるいは非公開(private)、README作成するか否か、.gitignore追加するか否か選択できる。
これらは全部作成後に変更可能
設定が完了したら、create repogitoryをクリック。

### ３、ローカルリポジトリーと連動する
<img width="1125" alt="スクリーンショット 2019-09-24 13.02.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324484/17e4eaa4-55c2-badd-1865-985d236b2e07.png">
create repogitoryをクリックすれば上記の画面が出る。
指示通りにローカルリポジトリーと連動させる。

```bash
mkdir myproject #ローカルで空のリポジトリーを作成
echo "# myproject" >> README.md #なんでもいいのでとりあえずファイルを作成
git init #gitプロジェクト開始
git add README.md #作成したリードミーをgitの管理下にaddする
git commit -m "first commit" #commitメッセージ付きでコミット
git remote add origin https://github.com/glenn9259/myproject.git #さっき作成したリモートリポジトリーをローカルリポジトリと連動し、[origin]という名前で設定して置く
git push -u origin master #ローカルリポジトリーをリモートにプッシュする
```
coverageについて

こんにちは！
今回はカリキュラムで**coverage**について学ぶ機会があったのでアウトプットしたいと思います。


##coverageって何？
**coverage**とは簡単に言えば`テストにおいて全体のどれだけの確認が終わったかを表す範囲のこと`らしいです。
参考資料にわかりやすいサイトを載せておくのでぜひ見てください。

##使い方の流れ
coverage.pyはインストールしないと使用できないので、とりあえずインストールしましょう！
以下のpipコマンドでインストールできます。

```
$ pip install coverage
```

そして実際に使用してみましょう。
以下のコマンドでテストを実行できます。

```
coverage run --source='.' manage.py test myapp 
```
そして以下のコマンドを実行することでレポートを見ることができます。

```
coverage report
```
下記のものがレポートになります。

```
Name                           Stmts   Miss  Cover
--------------------------------------------------
manage.py                          9      2    78%
myapp/__init__.py                  0      0   100%
myapp/admin.py                     1      0   100%
myapp/apps.py                      3      3     0%
myapp/migrations/__init__.py       0      0   100%
myapp/models.py                    1      0   100%
myapp/tests.py                     1      0   100%
myapp/views.py                     1      1     0%
mysite/__init__.py                 0      0   100%
mysite/settings.py                18      0   100%
mysite/urls.py                     3      0   100%
mysite/wsgi.py                     4      4     0%
--------------------------------------------------
TOTAL                             41     10    76%
```

##参考資料
[[Django] 自動テストについてのまとめ](https://qiita.com/okoppe8/items/eb7c3be5b9f6be244549)
[Python unittestでcoverageを使ってカバレッジを取得する方法](https://dev2prod.site/python/python-unittest-coverage/)
[カバレッジ (coverage)の用語説明](https://wa3.i-3-i.info/word15884.html)
２つ以上の配列を結合する方法いろいろ

## forEachメソッドを使う

```javascript
var foods = ['banana', 'apple', 'orange'];
var sports = ['soccer', 'baseball', 'run'];


var array1 = Array.from(foods);
sports.forEach(function(value, index){
  array1.push(value);
});

console.log(array1);
```


## concatメソッドを使う

[Array.prototype.concat() - JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

```javascript
var foods = ['banana', 'apple', 'orange'];
var sports = ['soccer', 'baseball', 'run'];

var array2 = foods.concat(sports);

console.log(array2);
```


## スプレッド構文を使う
[スプレッド構文 - JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

```javascript
var foods = ['banana', 'apple', 'orange'];
var sports = ['soccer', 'baseball', 'run'];

var array3 = [...foods,...sports];

console.log(array3);
```

結果は同じ

```
> Array ["banana", "apple", "orange", "soccer", "baseball", "run"]
```

単純に配列を結合したいだけであれば
concatメソッドかスプレッド構文でいいと思う。
.NET Core 3.0 のトピック箇条書き

# .NET Core 3.0 のトピック箇条書き

[Announcing .NET Core 3.0](https://devblogs.microsoft.com/dotnet/announcing-net-core-3-0/) を斜め読みして、.NET Core 3.0 の **自分が** 興味のある点を箇条書きした. まあ、ほとんど既出ではある.

* 性能がものすごく上がった (Tiered Compilation 他)
* C# 8 になった
* .NET Standard 2.1 が出た
* Windows Desktop アプリ(Windows Forms, WPF) を作れるようになった
* exe になった(今までは dotnet コマンドで実行する dll)
* 11月に出る .NET Core 3.1 が LTS です(3.0 は LTS ではない)
* EXCEL の自動操作ができるような COM interop
* C# 8 の新機能
  * async stream
  * range/index
  * nullable reference types
  * interface のメンバのデフォルト実装
  * using 宣言(自動 dispose な using を使うと、インデントする必要があったのが無くなった)
  * switch 式
* 高性能な JSON API: Utf8JsonReader, Utf8JsonWriter, JsonDocument, JSON Serializer
* 新しい SqlClient (.NET Core / .NET Framework 共通)
* .NET Core バージョン API
* SSE2/SSE 等が使える Intrinsics
* 暗号の追加 (AES-GCM とか AES-CCM とか)
* ランタイムを含んだ単体 EXE ファイルの生成が可能に

去年末以来何の音沙汰もなかった .NET Standard 2.1 がしれっとでてきたことは驚いた. ~~Rfc2898DeriveBytes にちゃんとハッシュ関数を指定するコンストラクタが生えただろうか. 生えてなかったら呪詛.~~ さすがに生えていた。

LTS になる .NET Core 3.1 までの2ヶ月間はどういう開発をするのだろうか. ロードマップもマイルストーン(GitHub Issues の)もない状況でさっぱり分からない. バグ修正だけなんですかねえ.

追記: 
C++/CLI 対応は 3.1: [The Future of C++/CLI and .NET Core 3](https://devblogs.microsoft.com/cppblog/the-future-of-cpp-cli-and-dotnet-core-3/)
【Swift】連続した文字列から一部の文字列を取得(先頭・末尾・中間)

連続した文字列から一部を抽出したかった.
`index`は`0`からカウントされることに注意

# 文字列の先頭から指定する文字数まで取得 -> prefix()
```prefix.swift
// 先頭から４文字取得する
let str: String = "123456789"
let prefixStr: String = str.prefix(4)

print(prefixStr) // -> "1234"
```
# 文字列の末尾を取得 -> suffix()
```suffix.swift
// 末尾から3文字取得する
let str: String = "123456789"
let suffixStr: String = str.suffix(3)

print(prefixStr) // -> "789"
```
# 文字列の中間から取得する
Indexで考える為、文字列の先頭が`0`になることに注意

```middle.swift
// 先頭から3文字目から4文字取得する
let str: String = "123456789"
let middleStr: String = str[str.index(str.startIndex, offsetBy: 2)...str.index(str.startIndex, offsetBy: 5)]

print(prefixStr) // -> "3456"
```
# paiza楽しい
未経験ながら業務で使うのかと言われれば？？だが、モチベーションという意味では楽しく続けられて非常に良い.
気づくと平気で数時間経ってるから気をつけないと.
現職でこんな風に時間を忘れるという感覚がないからとても新鮮.
[メモ]horovodのエラー(error: Read -1, expected)

horovodを使ったところ、以下のようなエラーが出た。

```
<stderr>:[5f8011301d17:06193] Read -1, expected 144384, errno = 1
```

[公式](https://github.com/horovod/horovod/issues/503)によると、dockerで実行した時に出るエラーなので問題ないとのこと。
ほんまかいな。
Mojave　pythonでhello world

#brewでpython3をインストール
1. macでpythonをインストールするため以下のコマンドを入力した。

```
$ brew install python3
```
次のエラーが出た。

```
Error: Xcode alone is not sufficient on Mojave.
Install the Command Line Tools:
  xcode-select --install
```



**どうやらXcodeのバージョンがMojavaに対応できてないらしい**

2.　Xcodeをアップデートする
App Store -> アップデート -> Xcode
このアップデートはなかなか時間がかかる。

3.　エラーに出てきたコマンドを入力してみる。

```
$ xcode-select --install
xcode-select: note: install requested for command line developer tools
```

**developer toolsが必要らしい。**
インストールしてみる。
->インストールしますか？と聞かれるのでそのまま素直にインストール。

4.　brewをアップデートする

```
$ brew update
Updated 1 tap (homebrew/core).
==> Updated Formulae
```
**無事にbrewをアップデートできた**

5.　もう一回pythonをインストールするコマンドを入力。

```
Error: Permission denied @ dir_s_mkdir - /usr/local/Frameworks
```
**またエラーが出た**

/usr/local/Frameworkがないらしいのでディレクトリを作る。


```
$ sudo mkdir /usr/local/Frameworks
```

ディレクトリを作ったら次のコマンド

```
$ brew link pythonError: Could not symlink bin/2to3
Target /usr/local/bin/2to3
already exists. You may want to remove it:
```

**またエラー**
なんか上書きしないといけないっぽい

```
brew link --overwrite python
Linking /usr/local/Cellar/python/3.7.4_1... 20 symlinks created
```
バージョンを確認

```
$ python3 --version
Python 3.7.3
```

**これでようやくうまくいった。**

#hello worldしてみる

1. hello.pyというファイルを作成

```hello.py
print ("hello world")
```
実行する。

```
$ python3 hello.py
hello world
```
**成功しました。**
Cloud Functions【Cloud SQL 使用編】

## 概要
Cloud FunctionsでCloud SQLを利用する際に手間取ったので手順をメモ

[Google Cloud Platform](https://console.cloud.google.com)

[CloudFunctions for Firebase](https://firebase.google.com/docs/functions/?hl=ja)

[Connecting to Cloud SQL
(公式ドキュメント/英語)](https://cloud.google.com/functions/docs/sql?hl=ja)


## Cloud SQL設定
### 以下の順でインスタンスを作成

1, Google Cloud Platform > ナビゲーションメニュー > SQL
![2019-09-24 11.24のイメージ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272185/d1d12965-64ea-0d57-31a8-df59394afa43.jpeg)
---------------------------
2, インスタンスの作成　> データベースを選択(MySQL or PostgreSQL) > インスタンスID/rootパスワード/リージョン/データベースのバージョンなどを設定
※DBパスワードは再発行できないそうなので、忘れないようにメモする！！！
![2019-09-24 11.30のイメージ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272185/94c91b68-f13a-aa15-b8fd-60e71a54d325.jpeg)
---------------------------
3, テーブルを作成する
※Cloud ShellやSQLクライアントツールを使って作成できる。今回は省略

---------------------------

## Functionsの設定
### MySQL使用例(公式のデモを参照)
```functions/index.js
const mysql = require('mysql');

const connectionName =
'<インスタンス接続名>';
const dbUser = '<任意のDBユーザー>';
const dbPassword = '<任意のDBユーザーのパスワード>';
const dbName = '<DB名>';

const mysqlConfig = {
  connectionLimit: 1,
  user: dbUser,
  password: dbPassword,
  database: dbName,
};

if (process.env.NODE_ENV === 'production') {
  mysqlConfig.socketPath = `/cloudsql/${connectionName}`;
}

let mysqlPool;

exports.mysqlDemo = (req, res) => {
    if (!mysqlPool) {
    mysqlPool = mysql.createPool(mysqlConfig);
  }

  mysqlPool.query('SELECT NOW() AS now', (err, results) => {
    if (err) {
      console.error(err);
      res.status(500).send(err);
    } else {
      res.send(JSON.stringify(results));
    }
  });
}
```

とりあえずこれで動く。
ORMを使用する際に設定が足りない場合は`mysqlConfig`を以下のように設定
例：

```js
const config = {
  host: `/cloudsql/${connectionName}`,
  dialect: 'mysql',
  username: dbUser,
  password: dbPassword,
  database: dbName,
  dialectOptions: {
    socketPath: `/cloudsql/${connectionName}`
  },
};
```
python 勉強 pivot

perlでpivotを行っていたが、
なんやかんやの理由でperlを実施できない状況になった。

現在の環境でできるのがpythonだったので、
ちょっとpythonの勉強をしてみようと思う。

※稼働環境は「visual studio」
※会社管理PCがwin10だからubuntuとかいれて実行したいけどPC環境を管理されてて導入説明がめんどい。。。

#１．きっかけ
今回データ解析しようと思ったのが、傾向がわからない業界に来てしまったため。
しかも、会社のデータをどう管理しているかも不明だったのでちょっと勉強がてら傾向観察のために集計しようと思ったのがきっかけ。

perlではこうだった、が頭にあるため、pythonでできるかよくわからん。。。


#２．csvの読み込み
いままでperlで行っていたのでここからよくわからなかった。。。

csv.readerで読み込むのはいいけど、、、
（perlでは読み込んでハッシュにため込んで集計ってやってた。。。）

#３．pandas
今回pivotだけだったので、↓で終わらしてしまった。。。

<pre>
import numpy as np
import pandas as pd

df = pd.read_csv(r'インプットファイル', index_col=0).drop(['日時','企業名','支払','返金'], axis=1)

data = pd.pivot_table(df, index='種別',  columns='区分',  values='金額', aggfunc=[len,min, max,sum])

data2 = data.fillna(0)

data2.to_csv(r'アウトプットファイル')
</pre>


pandasは便利ですね。
pivot_tableでaggfuncにて細かく見たい内容が決められるらしい。
ただ、ちょっとそのままだと集計に使用しづらいので「Nan」を「fillna(0)」で返還を実施。

#これからしたいこと
- 小数点を整数にしたい。
- 総計みたいなものが欲しい。
	- perlだと種別をキーにテーブルにいれてテーブル内を計算みたいにできてたかな？
	- pandasでなく辞書を利用すればいいのかしら？


まだまだ知識不足。
Rails6 のちょい足しな新機能を試す83（excluding, including編）

# はじめに

Rails 6 に追加された新機能を試す第83段。 今回は、 `excluding, including` 編です。
Rails 6 には、 `Array#including` , `Array#excluding` , `Enumerable#including` , `Enumerable#excluding` が追加されました。

Ruby 2.6.4, Rails 6.0.0 で確認しました。

```shell
$ rails --version
Rails 6.0.0
```

今回は、name (名前) と age (年齢) 属性をもつUserモデルを作り、 including や excluding を使ったスクリプトを作って試したいと思います。

# プロジェクトを作る

```shell
rails new rails_sandbox
cd rails_sandbox
```

# User モデルを作る

name の属性をもつ User モデルを作ります。

```shell
bin/rails g model User name age:integer
```

# seed データを作る

users  と books の2つの seed データを作ります。

```ruby:db/seeds.rb
User.create(
  [
    { name: 'Andy', age: 20 },
    { name: 'Bob', age: 19 },
    { name: 'Cindy', age: 18 },
    { name: 'Dave', age: 21 },
    { name: 'Ellen', age: 22 }
  ]
)
```

Andy, Dave, Ellen が成人 (adult) で、 Bob と Cindy が未成年 (juvenile) です。

# User に scope を追加する

User モデルに scope を2つ追加します。

```ruby:app/models/user.rb
class User < ApplicationRecord
  scope :adult, -> { where(age: [20..]) }
  scope :juvenile, -> { where('age < 20') }
end
```

# スクリプトを作成する

excluding と including を使った簡単なスクリプトを作ります。

```ruby:scripts/try.rb
juveniles = User.juvenile
adults = User.adult

users1 = User.all.excluding(juveniles)
p users1.map(&:name) # => ["Andy", "Dave", "Ellen"]

users2 = juveniles.including(adults)
p users2.map(&:name) # => ["Bob", "Cindy", "Andy", "Dave", "Ellen"]

# without is same as excluding
users3 = User.all.without(juveniles)
p users3.map(&:name) # => ["Andy", "Dave", "Ellen"]
```

# rails runner を使って実行する

rails runner を使って実行すると結果は以下のようになります。

```shell
$ bin/rails runner scripts/try.rb
Running via Spring preloader in process 2019
["Andy", "Dave", "Ellen"]
["Bob", "Cindy", "Andy", "Dave", "Ellen"]
["Andy", "Dave", "Ellen"]
```

# 試したソース

試したソースは以下にあります。
https://github.com/suketa/rails_sandbox/tree/try083_excluding

# 参考情報

* [What is new in Rails 6.0](https://bogdanvlviv.com/posts/ruby/rails/what-is-new-in-rails-6_0.html)
* [Added Array#including, Array#excluding, Enumerable#including, Enumerable#excluding](https://github.com/rails/rails/commit/bfaa3091c3c32b5980a614ef0f7b39cbf83f6db3)
Nuxt の初期設定や使ってる便利プラグイン一覧

# なんで Nuxt.js
Webのフロントエンド開発で一番キライだったものが開発環境構築です。
Pug、Scss、CoffeeScript、TypeScript、を使いたいがために、gulpやwebpackを駆使して自分のために何時間もかけて開発環境を構築してました。
それに加えて環境の保守もあるわけです、バージョンどんどん上がっていくわけです。
そして案件が途中からチーム開発になったり、誰かに引き継ぐとき・・・
オレオレ環境になっているのですごく申し訳ない。

ちがう、こんなことがしたいんじゃない。
コードを書いてプレビューしたいだけなのに、別のことに多くの時間が割かれていく・・・。
バニラJSや HTML/CSS そのまま書けよ言われたら終わりですが。

## ライブラリ入れる必要ないんじゃない？
Vue.js や React でもいいんじゃない？
と思われるかもしまれんが、私が思う Nuxt.js の一番の利点が静的HTMLファイルを生成できることだと思っています。

静的HTMLファイルになると何がいいかといわれると、私は一番に

**ページ毎に meta ogp 設定できる(サーバーサイドレンダリング使わずに）**

だと答えます。
これ結構クライアントからの要望多かったりするのですごく助かります。
サーバーサイドレンダリング使ったら SPA でも確かにできるのですが、そこまでのコストをかけて個別に設定するのって面倒ですよね。
ディレクトリ毎にHTMLあったら解決するんですよ。めっちゃ便利！

# Nuxt.js ではじめにやってる設定
個々から本題の私がNuxt入れたらやっていることと、プラグイン一覧です。
Nuxtの導入は公式ドキュメントに従って create-nuxt-app で入れています。

## まだまだ必須なIE11対応
**必要なNPMパッケージをインストール・・・しなくてOK**
すごくうれしい！
package.jsonにbrowserslistを記載

```package.json
{
"browserslist": [
  "last 2 version",
  "android >= 4.4",
  "IE 11"
]
}
```
nuxt.config.jsにpostCSSの設定をする

```nuxt.config.js
export default {
  build: {
    postcss: {
      plugins: {
        'postcss-preset-env': {
          autoprefixer: {grid: true} 
        }
      }
    }
  }
}
```

## だいたい入れてるプラグイン
**・画像圧縮してくれる**
nuxt-imagemin

**・変数、ミックスイン、関数を共有**
@nuxtjs/style-resources

**・サイトマップ自動で作成**
@nuxtjs/sitemap

**・Googleタグマネージャー使うとき**
@nuxtjs/google-tag-manager

**・Googleアナリティクス使うとき**
@nuxtjs/google-analytics

**・GoogleMapをカスタムするとき**
nuxt-google-maps-module

**・UA判断してくれる**
nuxt-user-agent

**・画面幅を元にした切り替えに便利**
nuxt-mq

### 便利系
**・スライダー**
vue-awesome-swiper

**・アニメーション**
animejs

**・PWA作成してくれる**
@nuxtjs/pwa
React HooksでContainerってどうやって作るの？

ReactでReduxデータの操作をするとき、componentファイルに描画コードとデータ操作コードを書いても良いのですが、**Reduxと描画のテストを別々にできない**、という欠点もあるので、**描画はComponentファイルに書いてReduxのデータ関連はContainerファイルに書く**、ということをします。下記がContainerファイルの例です。

```ts:HogeContainer.ts
import { connect, ConnectedComponentClass } from 'react-redux'
import { Dispatch, AnyAction } from 'redux'

const mapStateToProps: (state: RooteState) => HogeContainerStateObj = (state: RooteState) => {
  return {
    hogeState: state.hogeState
  }
}

const mapDispatchToProps = ( dispatch: Dispatch<AnyAction> ) => {
  return {
    activateHogeApi: (): void => {
      dispatch(postHogeApi())
    }
  }
}

const HogeContainer = connect( mapStateToProps, mapDispatchToProps )(HogeComponent)

export default HogeContainer
```

これは何をやっているかといいますと、**HogeComponent側で必要となるReduxのStateとActionをPropsとして、HogeComponent**に渡しているのです。渡し方としては、`mapStateToProps` にStateを、 `mapDispatchToProps` にActionをそれぞれ持ち、それらを `connect` を使用して、HogeComponentに渡しています。HogeComponentでconsole.logでPropsを見ると、`hogeState` と `activateHogeApi`が渡ってきていると思います。

Containerはこのように**connectしてComponentにReduxのデータを渡しています**。これをHooksで書き換えると以下のようになります。

```tsx:HogeContainer.tsx
import React, { useCallback } from 'react'
import { useSelector, useDispatch } from 'react-redux'

const mapStateToProps = () => {
  const hogeState = useSelector<RooteState, HogeState>(
    (state: RooteState) => state.hogeState
  )
  return { hogeState }
}

const mapDispatchToProps = () => {
  const dispatch = useDispatch()
  const activateHogeApi = useCallback((): void => {
    dispatch(postHogeApi())
  }, [dispatch])
  return { activateHogeApi }
}

const HogeContainer = (props): JSX.Element => {
  const _props = { ...mapStateToProps(), ...mapDispatchToProps(), ...props }
  return <HogeComponent {..._props} />
}

export default HogeContainer
```

やろうとしていることはHogeComponentにReduxの必要なデータを渡すということなのでそこは変わりませんが、書き方は少し違います。React Hooksには `useState` `useReducer` といったHooksAPIがあり、頭に `use` がつく特徴を持っています。

そして今回でいうと、 `useSelector` と `useDispatch`、 `useCallback` を使用しています。詳細はググってもらえるとわかるのですが、本当に簡単にいうと、`useSelector` はStateをみる、 `useDispatch` はdispatch使う、 `useCallback` はメソッド呼び出す、です。

結局、それぞれの変数にStateとActionをreturnしているだけです。そしてここで違ってくるのが、HogeContainerをJSX扱いする、ということです。どういうことかというと、 `connect` を使用していた部分を、普通にHogeComponentにデータを渡して、そのHogeComponentをHogeContainerというJSXで使用するだけ、です。

正直ここに書いてことを読むだけではHooksにわざわざ書き換える意味がないのでは？と思うかもしれません。しかし使用してみると、データの更新やファイルの扱いやすさ、というものが見えてくるので、新しく作るComponentにはReact Hooksを使用してみてください。
Xcode11, iOS13でビルドしたらRealmのエラーが出た


##Xcode11にアップデートしたらRealmエラーが発生

エラー内容抜粋
'Primary key property 'id' does not exist on object 'Site''

##pod 'RealmSwift', '~> 3.18.0'をしよう

Realm3.12.0だったので最新の3.18.0にしたら解決！

下記に解決策がありました。
https://stackoverflow.com/questions/48810421/rlmexception-primary-key-property-serial-does-not-exist-on-object-book-mig

>必ずしも移行に関するものではありませんが、iOS 13およびXcode 11にはこの問題を引き起こす可能性のある問題があります。デフォルトString値が設定されたレルムクラスのすべての文字列プロパティは、何らかの形で無視されます。これを修正するには、最新バージョン（現在は3.18.0）に更新するか、Xcode：Product-> Clean Build Folderを使用します。

>ココアポッドを使用している場合、これを行います：

>プロジェクトのPodfileを開き、RealmSwift行(あればRealm行も)を次のように置き換えます。

>```pod 'RealmSwift', '~> 3.18.0'```
次に、プロジェクトのフォルダーでターミナルを開き、以下を実行します。

>```pod repo update```
```pod install```
お役に立てば幸いです。