OmniAICreator/Qiita-1.07M huggingface dataset:
macOS Safariを12にしたらはてなブックマーク機能拡張がなくなった際の解決法

macOSでSafariが12にバージョンアップしました。喜びいさんでアップデート後、どんな機能が追加されたのかとわくわくしながら起動すると、こんなダイアログが…。

![Screenshot_ 2018-09-22 17.45.11.png](https://qiita-image-store.s3.amazonaws.com/0/61833/ead18e6c-bf2d-d9ca-8f75-f82482659ae1.png)

人によって違うと思いますが、私の場合は10個くらい機能拡張がやられた気がします。使っていないものもあったので大半は良いのですが、はてなブックマーク機能拡張が使えなくなったのが痛いです。ということで解決法。

## はてなブックマーク機能拡張をダウンロード

はてなのサイトから機能拡張をダウンロードします。

[Safariでも快適ブックマーク！はてなブックマークSafari拡張登場！](http://b.hatena.ne.jp/guide/safari_extension)

## 機能拡張を解凍

ターミナルを開いて、`~/Downloads` に移動します。

```
$ cd ~/Downloads
```

ダウンロードした機能拡張を解凍します。

```
$ xar -xvf hatenabookmark.safariextz
```

機能拡張はドキュメントなどのフォルダに移動しておいた方が良いはずです（未検証）。ダウンロードから消してしまうと動かなくなるかも。

## Safariで開発者メニューを追加

Safariの環境設定を開いて、その中の詳細アイコンで **メニューバーに“開発”メニューを表示** を有効にします。

<img width="931" alt="Screenshot_ 2018-09-22 17.46.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/61833/9a00b4e2-d8e5-383b-8a08-b29ef16a9b2f.png">

## 機能拡張ビルダーを開く

メニューバーに追加された開発メニューの中にある **機能拡張ビルダーを表示** を選択します。

![Screenshot_ 2018-09-22 17.46.12.png](https://qiita-image-store.s3.amazonaws.com/0/61833/2e1b61c9-e362-3185-ca98-26b58a7b3b24.png)


## 機能拡張を追加する

機能拡張ビルダーを開くと、使用しますかと確認されるので続けるを選択します。

![Screenshot_ 2018-09-22 17.46.21.png](https://qiita-image-store.s3.amazonaws.com/0/61833/4b767fa2-9449-5262-ae69-97530c2b69b1.png)

右下にある + アイコンをクリックして、 **機能拡張を追加** を選択します。

![Screenshot_ 2018-09-22 17.46.27.png](https://qiita-image-store.s3.amazonaws.com/0/61833/3c1776d5-5251-ccdd-2e3b-b5e1bc0c003e.png)

そこで先ほど解凍した **hatenabookmark.safariextension** というフォルダを選択します。

そうすると、下の画像のように読み込まれた状態になります。

![Screenshot_ 2018-09-22 17.46.50.png](https://qiita-image-store.s3.amazonaws.com/0/61833/d030e3d4-398d-2bf5-6320-df96b4872a31.png)

## 機能拡張を読み込む

後は右上にある実行ボタンを押します。パスワードが聞かれるので入力してください。

![Screenshot_ 2018-09-22 17.46.54.png](https://qiita-image-store.s3.amazonaws.com/0/61833/da26c6e6-6356-f28d-5cd1-ce0bac0c8cfe.png)

ボタンのところが実行ではなく、中止と再読込になります。これで有効になった状態です。

![Screenshot_ 2018-09-22 17.46.59.png](https://qiita-image-store.s3.amazonaws.com/0/61833/791dddea-bbc0-2c1f-54d0-87361ce6a12b.png)

## 普段通り使う！

後は普段通り、はてなブックマークが使えるはずです。

<img width="456" alt="Screenshot_ 2018-09-22 17.47.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/61833/0b1c2f8a-1b98-c1c2-d2bb-0390503be04a.png">

----

同じ手順でブロックされてしまった機能拡張を追加することもできるでしょう（個人的にはコンテクストメニューでタイトル、URLをコピーできるものを追加しました）。後ははてながApp Storeに登録してくれるのを待ちましょう。
Dockerを使用したRails開発②(GitHubとDockerHubで管理)

# やること
[前回の記事](https://qiita.com/Nishi53454367/items/aee4cf0c346bc115be99)で開発環境構築が完了したので、作成したものをリポジトリ管理しようと思います。

今回やることは以下の通り
- GitHubへの登録
- DockerHubへの登録とGitHub連動

# GitHubへの登録
1. [GitHub公式サイト](https://github.com)でリモートリポジトリの新規作成
2. ローカルリポジトリへコミット
 1. リポジトリ管理したい階層までcdして`git init`でカレントディレクトリを丸ごとGitリポジトリに変換
 2. `git add .`でカレントディレクトリを丸ごとインデックスに追加
 3. `git commit -m 'first commit'`でカレントディレクトリを丸ごとローカルリポジトリへコミット(-mオプションで後に続くコメントでコミット)
 4. `git log`でコミットされているかログを確認
3. リモートリポジトリへプッシュ
 1. `git remote add origin https://github.com/ユーザー名/リモートディレクトリ.git`でリモートリポジトリの情報登録
 2. `git push origin master` 実行後に聞かれるユーザー名、パスワードを入力してmasterへプッシュ完了！・・・と思いきや、failed to push some refs to〜というエラーが出た。どうやらリモートリポジトリ作成時にREADMEファイルが作成されており、ローカルと同期が取れていなかったことが原因のよう。
[こちらの記事](https://qiita.com/takanatsu/items/fc89de9bd11148da1438)
を参考になんとかコミット完了。
4. 開発用ブランチの作成と切り替え

　　masterブランチまで作成できたので、開発用のブランチを作成して同じようにリモートリポジトリにプッシュまで行いたいと思います。今回は、developというブランチを作成しようと思います。

- `git branch develop`でブランチ作成
- `git checkout develop`でブランチ切り替え
- `git branch`でdevelopに*が付いてればOK
- `git add .`でインデックス追加
- `git commit -m '任意のコメント'`でローカルリポジトリへコミット
- `git push origin develop`でリモートリポジトリへプッシュ

# DockerHubへの登録とGitHub連動
1. [DockerHub公式サイト](https://hub.docker.com)でCreateAutomatedBuildを選択してGitHubのアカウントを同期
2. 再度、CreateAutomatedBuildを選択してGitHubのリポジトリを選択してDockerHubのリポジトリを作成
3. BuildSettingタブでDockerfileのロケーションを設定して自動ビルド開始。BuildDetailsタブでビルドの状態を確認できます。時間かかるみたい。。
4. `docker search 検索キーワード`で自分作ったdocker-imageがヒットすればイメージの登録完了
5. これでGitHubに登録しているDockerfileがpushされると自動的にビルドが行われ、イメージが作成されます！

今日はここまで！
次から本格的に開発進めていこうと思います！
RFID/NFCに関してのトライ&エラーの記録

SuicaやスマホなどのNFCを認識して、スキャンした時間帯を記録する仕組みをRaspberry Piで作ろうと思ったのですが、とりあえず今は行き詰まっていて、そんな行き詰まりの記録です。
こんなのがQiitaでの初投稿とは、なかなか幸先の悪い事でございます。

# 迷走の記録

とりあえずRaspberry PiだったらUSB接続のカードリーダー買えばいいんじゃね？
　↓
RC-S380を買ってくる
　↓
調べてみるとPythonのライブラリ？としてnfcpyがある
サンプルプログラムでそこそこ動く事は確認した
　↓
常に読み込みを走らせ続けるのは気持ち悪い。
それに記録の種類を分けたいのもあるし、2つのボタンのどちらかを押したら読み込み開始としよう
　↓
あれ、Raspberry Piって入力割り込みないの？
じゃあGPIOの検知を無限ループで走らせる？そんなのCPU使用率が高くなって消費電力が高くなりそう
　↓
あと、俺Pythonまったく分からないし、文法見たけど今から覚えるのキツイ。
じゃあ、Arduinoで読み込み全般処理をやって、通信内容をファイルに溜め込んでいく形か？
でもUSBは扱えないから、マイコンでカードリーダーを取り扱う方法ってないものか。

**ここで本来正解だったはずのルートから外れてしまう。**

石丸電気で適当に安いリーダーを見繕って購入してきた
http://wiki.seeedstudio.com/Grove-125KHz_RFID_Reader/
　↓
Arduinoとブレッドボード上で接続して、サンプルコードをコンパイルして転送。
標準ライブラリだけで動くのはありがてえ。でもタグをかざしても反応しない
　↓
**そもそもRFIDの周波数規格が125kHzでは、NFC規格に合わないと判明**
（見落としたのか店になかったのか、125kHzのものしかないと思っていた）
必要なのは13.56MHzのリーダーだと判明した
　↓
通販で吟味して、AmazonでサインスマートのRFID-RC522を購入
（ここで参考にしたサイトに「FeliCaには対応していません」と丁寧に書いてあったにも関わらず、**てやんでえ、俺ぁタグの識別だけやりてえんだから、それくらいRFID自体の規格でいけんだろ！**という謎の論理で聞き入れず）
　↓
追加ライブラリを取り込んで、サンプルコードをコンパイルして転送。
付属のタグをかざしたら何か出てきた！このUIDってのが識別子か。
　↓
手元にあったタグを片っ端からかざしてみたところ…
Bluetoothイヤホンは反応あり。
スマートフォンとスマートウォッチはUIDが16進数8桁と短い上に、かざすたびに値が変わる。
Suicaと自転車駐輪場の利用者証は反応なし。
こりゃあ実用できない。一体どうしたもんか。
　↓
調べたところISO/IEC 14443という規格があり、FeliCa等はこれに対応している模様。
これだとUIDでの識別ができず、毎回ランダムの値を送って来る。
　↓
結論として、FeliCaに対応したカードリーダーでなければ**個体識別すらできない**


はー、なるほどなー…。
こんな、ネットで探して正しく解釈すればすぐわかる情報に行きつくために、貴重なお金と時間を使ってしまいました。しかし今はネットがあるから良しとして、先人はこういうところで非常に苦労したんではないかな…と、一応は恵まれた時代に生まれた事に感謝しつつ。

# 実用的にどうすればいいのか（※模索中のプラン）

今回買ってしまったマイコン通信向けのリーダーは何かしらに使うとして、
ここからは「実用的にRaspberry PiでNFCの読み込みをするにはどうしたらいいか」。
実は大体のプランが出来上がっています。出来上がっているので、ようやく筆をとった次第です。

- 常にGPIOを監視するための処理を設ける
    - 先日、別件で特定のファイルが作成されるのを監視し続ける処理を作り、Cent OS上で走らせたところ、思った以上にCPU使用率に影響はなかった。
    - 同じ要領でGPIOを監視する仕組みを設ける。どの端子か、立ち上がり検知か立ち下がり検知か、チャタに何秒くらい（何ループくらい？）掛けるか、検知したらどういうコマンドを実行するか、が設定可能なら良いか。
    - PHPで書けるといいんだけど、SHかなあ。
- nfcpyを使って読み込み処理を作成する
    - 観念してPythonを覚えなければならない。PHPで書きたい…。

次の投稿ではこれが成功したという内容であることを祈ります。
at coder beginner 027

B
N 個の島が横一列に並んでいる。 1≦i≦N−1 について、左から i 番目の島と i+1 番目の島は隣り合っている。
はじめ、左から i (1≦i≦N) 番目の島には ai 人の住人が住んでいる。 高橋君はすべての島に同じ人数の住人が住むようにしたいと考えている。
高橋君は隣り合う 2 つの島の間に橋を架けることができる。 また、直接的または間接的に橋で結ばれた複数の島の間で、住人を自由に移動させることができる。
すべての島に同じ人数の住人が住むようにするために、架ける必要のある橋の本数の最小値を求めよ。

```
#include<iostream>
using namespace std;
int main() {
	int N;
	int a[110];
	cin >> N;
	int num = 0;
	for (int i = 0; i < N; ++i) {
		cin >> a[i];
		num += a[i];
	}
	if (num == 0)
		cout << 0 << endl;
	if (num%N != 0)
		cout << -1 << endl;
	int man = num / N;
	int bridge = 0;
	int num2 = 0;
	for (int i = 0; i < N-1; ++i) {
		num2 += a[i];
		if (num2 != man * (i + 1))
			bridge++;
	}
	cout << bridge << endl;
	return 0;
}
```
これだと大体通るけど何個かはねられた。実行速度の問題かな？？うーん

```
#include<iostream>
using namespace std;
int main() {
	int N;
	int a[110];
	cin >> N;
	int num = 0;
	for (int i = 0; i < N; ++i) {
		cin >> a[i];
		num += a[i];
	}
	if (num%N != 0)
		cout << -1 << endl;
	else {
		int x = 0;
		int bridge = 0;
		for (int i = 0; i < N; ++i) {
			x += (a[i] - num / N);
			if (x)
				bridge++;
		}
		cout << bridge << endl;
	}
	return 0;
}
```
これで通った。単純にちゃんとifとelseが使いこなせてなかっただけっぽいな。
VSCodeでCSVをステキに見やすくする「Rainbow CSV」を紹介するよ

# はじめに
普段のようにトゥイッターしていたらタイムラインにステキ拡張が流れてきたので、布教のためにバーっと紹介記事を書いてみる次第。

[Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154302/ef9c09fd-b7e4-7e6b-957b-ac5c02e869d2.png)

# Rainbow CSVって何？
 - VSCodeでCSVを扱いやすくするためのステキ拡張
 - 便利でステキな機能をいくつも持っている
 - とにかくヤバイ（語彙）


# Rainbow CSVの何がヤバイの？
## ①CSVが読みやすくてヤバイ
ちょうどいいCSVが無かったので、適当に[ポケモンのCSVデータ](http://rikapoke.hatenablog.jp/entry/pokemon_datasheet_gne7)を生々しく開いてみた。
CSVの見た目ってこんなのだよね。日本語項目はともかく、数値が連続している箇所は「あれ、この"49"ってどの項目に対応してるんだっけ…？」みたいな混乱が起きて発狂しがち…。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154302/0af0dc40-8f1a-8c19-3cd5-f1682ab8bb7e.png)

しかし、このファイルをRainbow CSVに通すと…なんということでしょう！
ヘッダー項目とデータ項目にカラフルな色が付き、項目の種類が一発でわかるようになっているではありませんか！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154302/c38f0945-4912-ea79-b381-6916a206bd9f.png)

しかも項目にカーソルを合わせると列番号とヘッダー項目まで表示してくれる！ヤバイ！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154302/8a4eef6d-92ca-bbe5-5eb1-918a8f8700d6.png)


## ②SQLライクにクエリを投げられるのでヤバイ
コマンドパレットを開いて「RBQL」と打ち込んでみましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154302/599847a8-888f-f0c7-1548-8d4361e1454e.png)

表形式でCSVデータが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154302/20e103ef-ea9b-210f-a095-b1cc4762bce0.png)

下の「Input SQL」に適当なクエリを書き込んで「Run」ボタンを押すと…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154302/ea293ada-fac2-ed14-4ce6-911d7d8f6b7a.png)

データを絞り込んだCSVが生成された！便利すぎてヤバイ！<del>(なんかエラー出ちゃうけど…)</del>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/154302/c8c622ca-fa39-f94b-d27a-c8c9f6d8908c.png)

# みんなも使おう「Rainbow CSV」！
ちなみに[Atom](https://atom.io/packages/rainbow-csv)や[Vim](https://github.com/mechatroner/rainbow_csv)向けのプラグインも用意されてるよ！
Vulkan のチュートリアルをはじめるまでに調べたこと

# これは何？
Vulkan について勉強したいと思ったけど何もわからなかった。チュートリアルを始める前に、最低限の事前調査をしておこうと思った。

# 開発環境について調べる
まずどういう環境が必要なのか調べた。自分は macOS 上で開発したいので、それ用の情報を確認した。最低限、以下のものが重要ということがわかった。

## LunarG Vulkan SDK
Vulkan アプリケーションをビルド、実行、デバッグするためのライブラリ＆ツールをまとめたもの。Vulkan SDK のバージョン番号と Vulkan API のバージョンは対応している (例： SDK が v1.1.70.0 の場合、Vulkan API は  1.1.70)。インストール手順など、その他詳細は[公式ドキュメント](https://vulkan.lunarg.com/doc/sdk/latest/mac/getting_started.html)を読むべし。LunarG 社と Valve 社が開発。Windows、Linux、macOS に対応。Valve 社がスポンサードするコミュニティ [LunarXchange](https://vulkan.lunarg.com/home/welcome) の公式サイトからダウンロード可能。なお、この SDK は GitHub 上で公開されている各種コンポーネントを集めたもの。KhronosGroup や LunarG の GitHub リポジトリを確認するとよい。

## MoltenVK ライブラリ
macOS 版 LunarG Vulkan SDK に同梱されているライブラリ。念の為、[公式ドキュメントに記された概要](https://github.com/KhronosGroup/MoltenVK/blob/master/Docs/MoltenVK_Runtime_UserGuide.md#about_this)を読むべし。旧称 "MetalVK"。Vulkan API の macOS/iOS 版実装。根っこの部分では Metal を使って動作する。MoltenVK は Vulkan 用シェーダ言語 SPIR-V を Metal 用シェーダ言語 MSL へ実行時変換する。なお、MoltenVK は ICD (Installable Client Driver) に相当するとのこと。ICD とは Vulkan 互換のディスプレイドライバのことを指す。動作には iOS 9 以上、macOS 10.11 "El Capitan" 以上が必要。

# SDK を使う前の準備をする

LunarG Vulkan SDK をダウンロードしたら $HOME などに配置する。SDK 内のツール等を便利につかうため、環境変数にいろいろとパスを通しておいたほうがよい。そこで以下のようなシェルスクリプトを用意する。

```
# "vulkansdk" の部分を自分の環境に合わせて書き換える
export VULKAN_SDK=/vulkansdk/macOS
export PATH=$VULKAN_SDK/bin:$PATH
export DYLD_LIBRARY_PATH=$VULKAN_SDK/lib:$DYLD_LIBRARY_PATH
export VK_ICD_FILENAMES=$VULKAN_SDK/etc/vulkan/icd.d/MoltenVK_icd.json
```

これを実行することで環境変数が更新される。正しく設定されているかを確認するために vulkaninfo コマンドを実行してみる。

```
% vulkaninfo
==========
VULKANINFO
==========

Vulkan Instance Version: 1.1.82
(以下省略)
```

上記のようなバージョン表示が出力されれば成功。一連の設定を .bash_profile などに追加しておいても良い。

## VULKAN_SDK 環境変数

CMake で `find_package(vulkan)` を使いたいなら下記のように環境変数を設定しておく。

```
export VULKAN_SDK=/vulkansdk/macOS
```

# 基礎用語を確認する
チュートリアルを始める前に気になった用語があったので意味を調べた。

## ローダー
[マニュアルの図](https://vulkan.lunarg.com/doc/sdk/1.1.82.1/mac/loader_and_layer_interface.html)にあるように、Vulkan アプリケーションは「ローダー」を間に挟んで ICD と繋がっている。また、ローダーは「レイヤー」とも繋がっている。ローダーを介してアプリケーションからICDまでの間に複数の「レイヤー」を挿入することができる。また、複数の ICD をまとめて取り扱うこともできる。ローダーはシステム上で使用可能な ICD を検出する。そうして得られた ICD のリストを基に、アプリケーションが利用可能な物理デバイスの一覧を返す。

## レイヤー
Vulkan システムを拡張するためのオプショナルなコンポーネントが「レイヤー」にあたる。レイヤーは、アプリケーション〜ハードウェア間に存在する Vulkan 関数に割り込んだり、Vulkan 関数を評価したり、修正したりする。例えば Vulkan の機能を検証(エラーチェック)するためのレイヤーや、Vulkan API の追跡・デバッグを行うレイヤーなどがある。レイヤーはライブラリとして実装される。`VK_LAYER_LUNARG_standard_validation` というメタレイヤー(複数のレイヤーの集合を定義したもの。標準的なレイヤーをこれ１つでまとめて追加できる)を使っておけばよさそう。

## インスタンス関連オブジェクト
Vulkan のシステムレベルの情報や機能を提供するオブジェクト。`VkInstance` や `VkPhysicalDevice` が関係。

## デバイス関連オブジェクト
システム上の物理デバイスと機能を関連付けるための識別オブジェクト。`VkDevice`、`VkQueue`、`VkCommandBuffer` が関係。

# チュートリアルを始める
ひとまずここまで調べた情報を初期装備として、[公式チュートリアル](https://vulkan.lunarg.com/doc/sdk/1.1.82.1/mac/tutorial/html/index.html)をやっていく。
Unityで学ぶMVPパターン ~ UniRxを使って体力Barを作成する ~

[目次](https://qiita.com/nebusokuhibari/items/f403b40bea0ad790176c)　―　[次の記事](https://qiita.com/nebusokuhibari/items/f2c3403859422f5c0e20)

UniRxの基本的な使い方とMVPアーキテクチャパターンについて説明します。

## アセットのインポート

以下のアセットを使います。

[UniRx - Reactive Extensions for Unity](https://assetstore.unity.com/packages/tools/integration/unirx-reactive-extensions-for-unity-17276)

## シーンの作成

大雑把な説明ですが、こんな感じでシーンを作成します。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/291470/c73da8ab-5cd0-9d77-54e7-d047440c906c.png)

Githubに準備済みのプロジェクトを上げておきます。
[00-UniRx-HealthBar-Base](https://github.com/NakashimaToshiki/Adaptive-Code-Unity/tree/master/01-UniRx-HealthBar-Simple)

## コンポーネントの作成

コンポーネントをModel、View、Presenterで３つ作成して、
MVPパターンでコードを作成します。

コードは体力値を表示する例です。

### Model

Modelはビジネスロジックを記述する部分です。
UniRxのIntReactivePropertyでプロパティに変更があった際にイベントを実行できるようにします。

コードのプロパティはプレイヤーの体力値のみです。

```C#:StatusModel.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using UniRx;

public class StatusModel : MonoBehaviour
{
    public int healthMax = 100;
    public IntReactiveProperty healthRP = new IntReactiveProperty();
    public int Health
    {
        get { return healthRP.Value; }
        set { healthRP.Value = value; }
    }
}
```

### View

MVPのViewはModelもPresenterも知らないので、
これらを宣言しないようにしてください。

コードは体力Barの赤い部分を変更する処理で、これはイベントに登録するメソッドになります。

```C#:ParameterBarView.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ParameterBarView : MonoBehaviour
{

    public RectTransform valueRect;

    public void SetRate(int max, int value)
    {
        valueRect.localScale = new Vector3((float)value / max, 1, 1);
    }
}
```
### Presenter

PresenterはModelとViewを知っています。
ModelとViewをつなぐ役割をします。

コードはModelのイベントにViewの処理を登録しています。

```C#:StatusPresenter.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using UniRx;

public class StatusPresenter : MonoBehaviour
{

    public StatusModel model;

    public ParameterBarView healthView;

    void Awake()
    {
        model.healthRP.Subscribe(value => { healthView.SetRate(model.healthMax, value); });
    }
}
```
## コンポーネントの追加

以下の画像のように作成したコンポーネントをゲームオブジェクトに追加します。

あとは、コンポーネントの依存状態をドラッグ＆ドロップで設定して完成。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291470/257e8973-3ff5-52cd-7805-9e9518688713.png)

## 完成

inspector上で値を変えると体力バーの長さが変わります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291470/76c6dc08-8e8d-24d1-567b-258c7ec5efe4.png)

Githubに完成例を上げておきます。

[01-UniRx-HealthBar-Simple](https://github.com/NakashimaToshiki/Adaptive-Code-Unity/tree/master/01-UniRx-HealthBar-Simple)

## まとめ

大した処理でもないのに、
ファイル数が増えて、余計に読みづらい感じがしますが、
規模が大きくなった際に、楽に拡張できます。

次の記事で拡張例について説明したいと思います。

## 参考文献

- [Web出身のUnityエンジニアによる大規模ゲームの基盤設計](https://developers.cyberagent.co.jp/blog/archives/4262/)
- [Webアプリケーション開発者から見た、MVCとMVP、そしてMVVMの違い](https://qiita.com/shinkuFencer/items/f2651073fb71416b6cd7)
Unityでデザインパターンを使って適応性の高いコードを書く考察

自身の勉強も兼ねて、Unityを使ったデザインパターンに関する記事を作成していきます。

## 目次

- [MVPパターン ~ UniRxを使って体力Barを作成する ~](https://qiita.com/nebusokuhibari/items/5e0c36c3b0df78110d32)
- [MVPパターン(2) ~ Viewコンポーネントを複数にする ~](https://qiita.com/nebusokuhibari/items/f2c3403859422f5c0e20)
- [Decoratorパターン ~三人称視点のカメラを作る~](https://qiita.com/nebusokuhibari/items/356def5695aca4a2b8c5)
- [Compositeパターン ~ Viewコンポーネントを複数にする(追記) ~] (https://qiita.com/nebusokuhibari/items/b749188ddd649af6f9ac)
- [Visitorパターン ~アイテムを拾うorドアを開けるor会話する~](https://qiita.com/nebusokuhibari/items/a3526fb82e590af4f514)

## 技術書

デザインパターンの書籍はたくさんありますが、言語をC#に絞ると「[Adaptive Code](https://www.amazon.co.jp/dp/B07DJ2BL4Y/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)」という書籍が有名かなと思います。


## 使用するフレームワーク

以下のフレームワークを使ってサンプルを作成します。

- [UniRx](https://assetstore.unity.com/packages/tools/integration/unirx-reactive-extensions-for-unity-17276)

## ソースコード

実際に動くコードがあったほうが、絶対理解しやすいと思うので、GitHubで公開しています。

[リンクはこちら](https://github.com/NakashimaToshiki/Adaptive-Code-Unity)

自分が飽きるまでQiitaで記事作成を行いますので、誰かのお役に立てればと思います。
グリッドレイアウト、flexを使うか、gridを使うか

## はじめに

先日、グリッドで12分割する意味ェ...ってなって1行を8分割する[8-Grid](https://dafu.cf/8-Grid/)というflexベースの軽量(v0.4.1のall.min.cssはgzip後333B)CSSを書いたが、gridはあまり理解していないので勉強も兼ねて書いてみた。

## flexとgridの違い

**そもそもの書き方**

### flex
```CSS:flex-sample
.grid{
  display: flex;
}
.column1{
  width: 50%;
}
.column2{
  width: 50%;
}
```
これがこうなる
![flex-sample.png](https://qiita-image-store.s3.amazonaws.com/0/248584/3db8ec56-b676-6d77-f6ea-3b79e41631f9.png)

### Grid
```CSS:grid-sample
.grid{
  display: grid;
  grid-template-columns: repeat(2 1fr);
}
.column1{
  grid-column: 1;
}
.column2{
  grid-column: 2;
}
```
これがこうなる
![gridsample.png](https://qiita-image-store.s3.amazonaws.com/0/248584/d6c84677-c709-3ae6-0ee3-ab2e436380eb.png)

codepenは見やすいように高さと背景色いじったけど要するに同じ。

## グリッドシステムの構築を考える

### ブラウザの互換性で比べてみる


#### 比較条件

部分的なサポートは対応していないものと見なし、プレフィックスが必要な場合は()内に記入。

| 要素名|互換性()内はprefixなし|Chrome|Firefox|Edge|Safari|
|:----:|:----------:|:-----:|:-:|:-:|:-:|
| flex|95.71(94.82)%|29(21)~|28~|12~|9(7)~|
| grid|87.25(84.16)%|57~|52~|16~|10.1~|

ソース

- flex:https://caniuse.com/#feat=flexbox
- grid:https://caniuse.com/#feat=css-grid

これを見ると、flex>gridの互換性になっています。

その差はプレフィックス無しでは約10%にもなる。

### 書きやすさで比べてみる

#### 比較条件

以下のようなグリッドシステムをCSSで作ってみる

- 1行は12等分出来る
- クラス名は`.r`(行),`.col-`(カラム)とする
- スマホを考慮する(ブレークポイントは768px)
- スマホ用のクラスは作らない(PC用のカラムを幅100%にするだけ)
- 比較はminify後のバイト数で行う

#### ソース
```CSS:flex
/*flex*/
.r{
	display: flex;
}
.col-1{
	width: 8.33%;
}
.col-2{
	width: 16.66%;
}
.col-3{
	width: 25%;
}
.col-4{
	width: 33.33%;
}
.col-5{
	width: 41.66%;
}
.col-6{
	width: 50%;
}
.col-7{
	width: 58.33%;
}
.col-8{
	width: 66.66%;
}
.col-9{
	width: 75%;
}
.col-10{
	width: 83.33%;
}
.col-11{
	width: 91.66%;
}
.col-12{
	width: 100%;
}
@media screen and (max-width: 768px){
	[class*="col-"]{
		width: 100%;
	}
}
```

```CSS:grid
/*grid*/
.r{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}
.col-1{
	grid-column: span 1;
}
.col-2{
	grid-column: span 2;
}
.col-3{
	grid-column: span 3;
}
.col-4{
	grid-column: span 4;
}
.col-5{
	grid-column: span 5;
}
.col-6{
	grid-column: span 6;
}
.col-7{
	grid-column: span 7;
}
.col-8{
	grid-column: span 8;
}
.col-9{
	grid-column: span 9;
}
.col-10{
	grid-column: span 10;
}
.col-11{
	grid-column: span 11;
}
.col-12{
	grid-column: span 12;
}
@media screen and (max-width: 768px){
	[class*="col-"]{
		grid-column: span 12;
	}
}
```

#### minify後サイズ

- flex: 309B
- grid: 442B

## 結果

- 横に分けるだけなら同じもの書いてもflexの方がgridよりも小さく書ける
- 今回は使わなかったけど高さも絡むならgridの方が使いやすい(flexより自由度が高い)
- 可読性はgridの方がいい気がする(spanの数字で大体わかる)
- 結局一緒なら横に分けるだけならflex、縦も意識するならgrid使ったらいいんじゃないですかね(小並感)
[2018.9.21からスタート]  Salesforceの資格を移行する手順 (WebassessorからTrailheadへ)

# 概要

Salesforceの資格がSpring ’18 より順次、資格の更新が Webassessor から Trailhead のリリースモジュールに移行され、更新料が無償になります。

もう一度、重要なこと **無料**になります。

# 手順

## １．メール確認

まずはWebassessorに登録しているメールを見ます。
2018.9.21にSalesforceから以下のようなメールが届いているはずです。

![s1.png](https://qiita-image-store.s3.amazonaws.com/0/230829/a7b1044f-004b-032a-a273-174b718461e5.png)

## ２．Trailhead のアカウント作成

あとはメールに書いてある手順通り、まずはTrailhead のアカウントを作成します。

![s2.png](https://qiita-image-store.s3.amazonaws.com/0/230829/1c03fae4-fcff-e4d8-c51c-4154bc90f538.png)

## ３．WebassessorとTrailheadを認証コードで連携

Trailhead のアカウント作成後、メールに記載されている認証コードをTrailheadの指定ページに貼り付けリンクさせる。

![S3.png](https://qiita-image-store.s3.amazonaws.com/0/230829/1671fbbd-043e-30ea-4866-b78bc5289df2.png)

その後、以下のようなメールが届く。

![S4.png](https://qiita-image-store.s3.amazonaws.com/0/230829/2a60ea23-7465-a4d8-02bc-0042a5e18ddf.png)

# Trailheadでの更新試験の受験方法

## １．Trailhead（ https://trailhead.salesforce.com/ja/home ） にアクセス

## ２．【資格の更新】で検索

![S5.png](https://qiita-image-store.s3.amazonaws.com/0/230829/cf8426bc-82dd-985c-2e86-59dc1cf3c59b.png)

## ３．受講する資格を選択して問題を解く

無事満点を取れればプロファイルが更新される

![S6.png](https://qiita-image-store.s3.amazonaws.com/0/230829/79ec0a8d-d913-56dd-8088-e653f804e622.png)
iOS12の実機でwillEnterForegroundのタイミングで通信すると失敗する

> Error Domain=NSPOSIXErrorDomain Code=53 "Software caused connection abort"

というエラーが発生します。
iOS11の時には発生していなかったと思うのですが、手元にiOS11の実機端末が無いためちゃんと確認できていません。(なのでタイトルの"iOS12の"は余計かも...?)
「必ず失敗する」というわけではないですが、「頻繁に失敗する」ようです。
**シミュレータでは発生せず、実機のみ発生**しました。

# 再現手順
以下のコードで、バックグラウンドに行ったあと数秒待ってアプリ画面に戻ると再現します。

```Swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(connection),
                                               name: UIApplication.willEnterForegroundNotification,
                                               object: nil)
    }
    
    deinit {
        NotificationCenter.default.removeObserver(self)
    }
    
    @objc func connection() {
        let url = URL(string: "https://qiita.com/ichimots")!
        URLSession.shared.dataTask(with: url) { _, response, error in
            if let _ = response {
                print("---success---")
            }
            if let error = error {
                print("---fail---")
                print(error) // Error Domain=NSPOSIXErrorDomain Code=53 "Software caused connection abort" UserInfo={_kCFStreamErrorCodeKey=53, _kCFStreamErrorDomainKey=1}
            }
        }.resume()
    }
}
```
# 対応方法

`willEnterForegroundNotification`
を
`didBecomeActiveNotification`
に置き換えてあげることで、発生しなくなりました。


# 発生原因
詳しく調べきれていません。
アプリがアクティブ状態になる直前に通信処理を発行していたことが原因だと考えてはいますが、コレという確証が掴めておらず...
詳細わかる方がいらっしゃるようでしたら、コメントお待ちしております。

## 参考
[アプリケーションの実行状態](https://developer.apple.com/jp/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html#//apple_ref/doc/uid/TP40007072-CH2-SW3)
BitBucketを使った個人開発用のGitリポジトリの作り方

# はじめに	
BitBucket(無料)を使って個人開発用のGitリポジトリを作り方を記載する。

# 対象読者
BitBucketを使ってGitリポジトリを作りたい人

# 前提条
- BitBucketのアカウントを持っていること
- GitがローカルPCにインストールされていること

# 手順
## BitBucketにリポジトリを作る
[BitBucket](https://bitbucket.org/product)にアクセスして、ログインする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178845/e0d85301-9944-7218-5dc4-2d7d9634eedd.png)

ログイン後の画面の左上にある「＋」ボタンを押す。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178845/4ec61397-2fc3-d094-af33-22498d254302.png)

メニューが表示されるので、メニューの中から「リポジトリ」を選択する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178845/11b7eb17-526a-c90c-2135-712d5a51ae40.png)

「新規リポジトリの作成」画面が表示されるので、リポジトリ名に任意のリポジトリ名を入力する。
ここでは「Homeapp」とした。
プログラミング言語が決まっていれば言語も入力する。ここでは「Ruby」とした。
一通り入力したら、「リポジトリの作成」ボタンを押す。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178845/0f866fc9-0ef2-66c7-e0b6-00d7d83833c8.png)

以下の画面が表示されれば、リポジトリの出来上がり。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178845/6fd92d8f-e950-5f15-9e83-f26f711819b8.png)

## ローカルPCにリポジトリをクローンする
最後に表示されていた画面からクローンするためのコマンドをコピーする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/178845/4787cb13-0722-69a1-0fcb-a2796923717c.png)

ローカルPCでターミナルを開き、リポジトリをクローンしたいフォルダに移動したうえでコピーしたコマンドを実行する

```
$ git clone https://XXXXXXXXXXXXXXXXXXXXXXXXXXX
```


おわり
Tkinterで作成したウインドウにOpenCV-Pythonの画像を表示

OpenCV で取り扱う画像は cv2.imshow() で表示させるのが最も簡単ですが、ボタンなどの GUI 部品を一緒に表示させることはできません。
GUI 部品を一緒に表示させるには Qt や Tinker のウィンドウを使う必要があります。
ここでは Tkinter でウィンドウを作成し、その中の Canvas に OpenCV の画像を表示させる方法を紹介します。

環境
- Python 3.7.0
- opencv-python 3.4.3.18
- Pillow 5.2.0

※ ソースコードと同じ場所に lenna.jpg が置かれているものとします。

```Python
import tkinter
import cv2
from PIL import Image, ImageTk

root = tkinter.Tk()
root.title("Show Image from OpenCV in Tkinter canvas")

image_bgr = cv2.imread("lenna.jpg")
image_rgb = cv2.cvtColor(image_bgr, cv2.COLOR_BGR2RGB) # imreadはBGRなのでRGBに変換
image_pil = Image.fromarray(image_rgb) # RGBからPILフォーマットへ変換
image_tk  = ImageTk.PhotoImage(image_pil) # ImageTkフォーマットへ変換

canvas = tkinter.Canvas(root, width=image_bgr.shape[0], height=image_bgr.shape[1]) # Canvas作成
canvas.pack()
canvas.create_image(0, 0, image=image_tk, anchor='nw') # ImageTk 画像配置

root.mainloop()
```

結果
![tkinter-opencv.PNG](https://qiita-image-store.s3.amazonaws.com/0/19238/54e95ef0-ca57-65c4-51f5-73c3d4d28f8b.png)
racecarに本気ではまった

reverseメソッドではまりました。３０分くらい本気で悩んだ。

1.racecarの文字数を調べましょう

```ruby

"racecar".length
```

かんたんかんたん

2.racecarを逆から呼んだらどうなるか、reverseメソッドを使って調べましょう。

かんたんかんたん。そうだ、car変数に入れてやってみよう。

```ruby
car = "racecar"
car.reverse
```

結果 racecar
なぜだ、変わらない。。。
戻そう

```ruby
"racecar".reverse
```

結果 racecar
なぜだ、、、、

エクリプス「 reverse!　もあるよ」
そうかそうか

```ruby

"racecar".reverse!
```

結果　racecar

なぜだ、、、


racecar逆から呼んでも
racecarでした。
Julia 入門①

## はじめに

最近になって、Juliaという言語を知り、pythonより実行速度が早く、機械学習を始めとする科学計算が得意ということで、せっかく機械学習勉強し始めたし、Julia使ってみようかというのがこのメモの始まりです。

基本は自分が勉強した際の内容をざっくばらんにまとめているだけですが、ほんの僅かでも誰かの役に立てば幸いです。

juliaの関連サイトは下記の通りです。

[公式サイト](https://julialang.org/)

[A place to discuss all things Julia.](https://discourse.julialang.org/)


最近(2018年8月)にメジャーバージョンアップがあり、1.0.0がリリースされました。
なんで、このメモではJuliaのバージョンは1.0.0を使用しています。


```
$ julia --version
julia version 1.0.0
```


## 基本コマンド
1.起動

```
julia
```

2.終了

```
exit()

```
3.helpモード

```
?
```
juliaモードの状態で？だけタイプすると

```
help?>
search: ⊻ ⊋ ⊊ ⊉ ⊈ ⊇ ⊆ ≥ ≤ ≢ ≡ ≠ ≉ ≈ ∪ ∩ ∛ √ ∘ ∌ ∋ ∉ ∈ ℯ π ÷ ~ | ^ \ > < : / - +

  Welcome to Julia 1.0.0. The full manual is available at

  https://docs.julialang.org/

  as well as many great tutorials and learning resources:

  https://julialang.org/learning/

  For help on a specific function or macro, type ? followed by its name, e.g.
  ?cos, or ?@time, and press enter. Type ; to enter shell mode, ] to enter
  package mode.

```
と表示され、ドキュメントの場所を教えてくれる。
また、文法とかわからなくなった際に、forとかってタイプすると

```
help?> for
search: for foreach foldr floor mapfoldr factorial EOFError OverflowError

  for

  for loops repeatedly evaluate the body of the loop by iterating over a
  sequence of values.

  Examples
  ≡≡≡≡≡≡≡≡≡≡

  julia> for i in [1, 4, 0]
             println(i)
         end
  1
  4
  0
  
```
サンプルまで教えてくれる。

4.パッケージのインストール

```
using Pkg
Pkg.add(お好きなパッケージ)
```

5.インストール済みのパッケージの一覧を表示する

```
julia> using Pkg

julia> Pkg.installed()
Dict{String,Union{Nothing, VersionNumber}} with 9 entries:
  "Juno"        => v"0.5.3"
  "GR"          => v"0.34.1"
  "Genie"       => v"0.1.0"
  "IJulia"      => v"1.12.0"
  "Plots"       => v"0.20.2"
  "Flax"        => v"0.0.0"
  "Atom"        => v"0.7.6"
  "SearchLight" => v"0.1.0"
  "Gadfly"      => v"0.8.0"

```
6.パッケージの状態を確認

```
julia> Pkg.status()
```

7.パッケージを最新にする

```
julia> Pkg.update()

```

## Jupyter をインストールしてみる
>参考
[JupyterでJuliaを動かして回帰分析をやってみる。](https://qiita.com/kenmatsu4/items/b77ecec75418cbaa2212)

###インストール

インストールにちょっと時間かかります。

```
julia> using Pkg

julia> Pkg.add("IJulia")

```

###確認
```
julia> Pkg.installed()
Dict{String,Union{Nothing, VersionNumber}} with 9 entries:
  "Juno"        => v"0.5.3"
  "GR"          => v"0.34.1"
  "Genie"       => v"0.1.0"
  "IJulia"      => v"1.12.0"
  "Plots"       => v"0.20.2"
  "Flax"        => v"0.0.0"
  "Atom"        => v"0.7.6"
  "SearchLight" => v"0.1.0"
  "Gadfly"      => v"0.8.0"

```
たしかにIjuliaが入ってます。

###起動

```
julia> using IJulia

julia> IJulia.notebook()
```
で、自動的にブラウザが立ち上がり、Jupyter NoteBookの画面が立ち上がるはずです。
画質を落とさずにpdfを切り取る方法

# 背景

論文の図をパワポで作成するのだが, それをepsに変換して論文で使うように言われた. epsに変換するのがめんどくさそうなのでどうにかpdfとして論文で使えないかと思って, mac標準アプリのプレビューで頑張った.

# 方法

1. まず, パワポをpdfとして保存する.
2. 次に, プレビューでそれを開く.
3. マークアップツールを開く


![スクリーンショット 2018-09-22 16.02.53.png](https://qiita-image-store.s3.amazonaws.com/0/253063/2ce8fc85-94ff-f496-8e16-3d9a07d503db.png)

4. 選択ツールで切り取りたい部分を選択する

![スクリーンショット 2018-09-22 16.04.41.png](https://qiita-image-store.s3.amazonaws.com/0/253063/5298a1c9-a214-87cb-8c37-3465aff749ca.png)

5. 切り取りボタンで切り取る

![スクリーンショット 2018-09-22 16.05.57.png](https://qiita-image-store.s3.amazonaws.com/0/253063/596c0791-dd4a-e108-36df-66880d9a99ec.png)

6. プリントをメニューから切り取ったページを選択してpdfとして保存を選択

![スクリーンショット 2018-09-22 16.08.05.png](https://qiita-image-store.s3.amazonaws.com/0/253063/a8ae254e-ef81-05fc-1254-13d341cab13d.png)


# 感想

ゆーてめんどくさい
Win10 + Ubuntu デュアルブート

# 要約

デュアルブートに関する情報はあちこちに転がっているが、bitlocker関係で結構ひっかかったので、改めてまとめなおしてみる。

grubを使って普通にデュアルブートしていたが、Win10の更新をかけたらbitlockerに毎回回復キーを求められてしまう状況になってしまったので、Win10のブートローダーを使うことにした。

bitlockerを使わないという選択肢もあるが、ここでは使う前提。

1. Win10でbitlockerのCドライブ暗号化を解除
2. Ubuntuをインストール
3. Win10でbcdboot c:\windows
4. Win10でbitlockerのCドライブ暗号化復活

## Win10でbitlockerのCドライブ暗号化を解除

もしもCドライブがbitlockerに暗号化されていると、Ubuntuをインストールしてgrubでブートローダーを書き換えた後、次回のWin10起動の時にbitlockerに回復キーを要求されてしまう。

回復キーをバックアップしておいて入力する手もあるが、48文字もあって大変なので、いっそ一時的に解除しておいたほうが良いと思う。

## Ubuntuをインストール

インストール方法は、[［UEFI暗号化編］Ubuntu 16.04 LTS と Windows10 とのデュアルブート環境の構築 ](https://www.abten.net/2017/02/925/)に詳しく載ってます。その記事ではブートローダーのインストール先はMBRでないことになってますが、私はMBRに入れちゃった。。。それがいけなかったのかなー。

## Win10でbcdboot c:\windows

Powershellを管理者権限で起動して、`bcdboot.exe c:\windows`を実行。
ブートローダーをWin10のものに戻します。

## Win10でbitlockerのCドライブ暗号化復活

暗号化したら念の為回復キーを保存しておくのがよいでしょう。

Ubuntuを起動したいときは、F2などでUEFIに入って強制的にUbuntuをブートさせるか、
起動時のbitlockerパス入力画面でESCして、リカバリーモードからUbuntuを起動します。

ちょっと面倒なので、bcdeditでubuntuのエントリを入れるって手もあるようですが、ubuntuを使う頻度が低いのでやってません。

---

UEFIでは、bcdeditでエントリ追加してもだめなようです。→https://ubuntuforums.org/showthread.php?t=2338779
同じテーブルへのアソシエーション【CakePHP】

割とはまったのでメモ
# 同じテーブルへのアソシエーション
前提：コメントへのレスコメントができる機能を想定する。
　　　簡易的な例のため、コメントとレスコメントは__1対1__の関係にあると仮定。
### CakePHPにおけるアソシエーションの記載
１対1の関係は`hasOne`メソッドによって設定する。
このメソッドの__第一引数__が__SQLにおけるテーブルのエイリアス(別名)__になる。

```php
class CommentsTable extends Table
{
    public function initialize(array $config)
    {
        $this->hasOne('ResponseComment', [// ResponseCommentがSQL中のCommentsテーブルの別名になる。
                'className' => 'Comments' // 実際に扱うテーブル(テーブルクラス)を指定する
            ])
            ->setProperty('responseComment')// $comment->responseComment　のような記述でレスポンスコメントを取得できるようにする
            ->setJoinType('INNER'); // ここでは内部結合を指定する。
    }
}

```

コメントと紐付いたレスをまとめて取得する。

```php
$this->Comments
  ->find()// SQLにおけるSELECT文の発行
  ->where(['Comments.id' => $id])// WHERE句の追加　←ここがポイント
  ->contain(['ResponseComment']);// 紐付いたレスも取得する。
```

上記は以下のようなSQLに変換される。(`:ct0`にプログラム中の`$id`が代入される)

```sql
SELECT
  Comments.id
FROM comments Comments
INNER JOIN comments ResponseComment ON
(
   Comments.id=ResponseComment.id
)
WHERE
(
  Comments.id = :c0 -- プログラム中のwhere()メソッドが別名付きにしてくれる
)
```

### ポイント
プログラム中の`where()`がポイントで、単に`id`と書くと
○ `ResponseComment`のidなのか
○ `Comments`のidなのか
分からない。そのため、`Comments.id`を渡してあげる。

※単に`id`と記述するとSQL実行時に`where clause is ambiguous`エラーが出力される。
React 360で作ったウェブページを今流行りのNetlifyを使ってサクッとデプロイをする

<img width="1354" alt="Image 41.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/9f21776c-1455-1be4-bd0d-5172c7942112.png">


#### 先程QiitaのReact 360を使用して、動かすところまで書いた記事を上げたのでそのついでにデプロイまでをする方法も書こうと思います。
> ### ReactでVR空間が作れてiPhoneでグルグル動かせるらしいので作ってみる【React 360】
> ### https://qiita.com/yushimatenjin/items/870c2b8c965489884571

## デプロイしたいGitファイルのあるサービスを選択します
<img width="1268" alt="Image 43.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/0588e3a6-e1bd-b754-4e43-03deb6aa53ea.png">


## ビルドのセッティングをします。
React 360はデフォルトの設定では動かないためここで一つ設定をします。

Build command
`yarn build`
Publish directory
`build`


<img width="827" alt="Image 51.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/23282ebb-6cc4-499e-18e7-80538bf030f2.png">

## しばらく待ちます。
<img width="1280" alt="Image 45.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/dc8083e8-a6df-f666-b467-fa68ac88a0f6.png">

## デプロイに成功
<img width="1255" alt="Image 50.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/9d9651d3-9105-ae9a-befb-3ff553a5e73b.png">


## URLにアクセスをして動いていれば成功です
<img width="1255" alt="Image 50.png" src="https://qiita-image-store.s3.amazonaws.com/0/257048/2ec73446-9392-5746-686b-503941b0ddec.png">

> 今回作成した物はこちらになります。
> https://reverent-ritchie-aaea5b.netlify.com

## 感想
サクッとデプロイができるのでかなり使い勝手が良いサービスですね。
さっき書いた記事もあるのでもしよろしければこちらも御覧ください。
> ### ReactでVR空間が作れてiPhoneでグルグル動かせるらしいので作ってみる【React 360】
> ### https://qiita.com/yushimatenjin/items/870c2b8c965489884571

## 書いた人
普段はReact、React Nativeを触っています。
Twitter https://twitter.com/mxcn3
GitHub https://github.com/yushimatenjin
at coder beginner 026

B
高橋君は、丸が大好きです。今日も、原点を中心とした大きさの違う円を N 個書きました。
その円の集合に対し、外側から赤白交互に色を塗ったとき、赤く塗られる部分の面積を出力しなさい

```
#include<iostream>
#include<algorithm>
#include<iomanip>
using namespace std;
static const double pi = 3.141592653589793;
int main() {
	int N;
	int R[1010];
	cin >> N;
	for (int i = 0; i < N; ++i) {
		cin >> R[i];
	}
	sort(R, R + N,greater<int>());
	double count = 0;
	for (int i = 0; i < N; i+=1) {
		if (i % 2 == 0)
			count += R[i] * R[i];
		else
			count -= R[i] * R[i];
	}
	cout <<fixed<<setprecision(7)<<count*pi << endl;
	return 0;
}
```
全然通らねーーとか思ってたら小数点以下の扱いがなってなかったっぽい。

<iomanip>をインクルードしてcout<<fixedで小数部の桁数をより正確に指定できる。<<setprecision(N)で、小数点以下N桁まで出力する。
(2)<<3.141;//"3.14"

C

```
#include <iostream>
#include<vector>
#include<algorithm>
using namespace std;
using ll = long long;
const int INF = 1e9;
int main() {
	int N;
	cin >> N;
	vector<int>flag[21];//部下の社員番号を保有する
	for (int i = 2; i <= N; ++i) {
		int b;
		cin >> b;
		flag[b-1].push_back(i-1);
	}
	vector<int>cost(N);//社員の給料
	for (int i = N-1; i >= 0; --i) {
		if (flag[i].size() == 0) {
			cost[i] = 1;
			continue;
		}
		else{
			int max_cost = 0;
			int min_cost = INF;
			for (int j = 0; j < flag[i].size(); ++j) {
				max_cost = max(max_cost, cost[flag[i][j]]);
				min_cost = min(min_cost, cost[flag[i][j]]);
			}
			cost.at(i) = max_cost + min_cost + 1;
		}
	}
	cout << cost[0] << endl;
	return 0;
}
```
Arduinoで純粋仮想関数と抽象クラス

###概要
Arduinoで、OPPの純粋仮想関数と抽象クラスをお試しで使ってみた。
***
###動作
コメントを外すと１秒置きにトグルで点灯
***
###わかったこと
ポートの初期化用の仮想関数用意して、led.ino側ハードに依存するポートの初期化をしようかな。
***
```c++:led.ino
//純粋仮想関数と抽象クラス

#include "Arduino.h"
#include "app.h"

class MyApp : public App{ // Appを継承して派生クラスMyApp
  public:
  MyApp(int ms):App(ms){}
//  void tick();          // コメントにするとapp.cppのtick()が使われる
  void tack();            // led.inoで以下で定義したtack()が使われる
};

#if 0
void MyApp::tick(){ // Appクラスのtick()はユーザーカスタマイズ項目
  digitalWrite(4, HIGH);  
  digitalWrite(5, LOW);  
}
#endif

void MyApp::tack(){ // Appクラスのtack()はユーザーカスタマイズ項目
  digitalWrite(4, LOW);  
  digitalWrite(5, HIGH);  
}

//------------------------------------------------------------------
// Arduino固有の関数 setup() :初期設定
//------------------------------------------------------------------
void setup() {
  pinMode(4, OUTPUT);  // ピンモードを指定
  pinMode(5, OUTPUT);  // ピンモードを指定

  Serial.begin(115200);
  Serial.println("");
  Serial.println("純粋仮想関数と抽象クラス");
}

//---------------------------------------------------------------------
// Arduino main loop
//---------------------------------------------------------------------
void loop() {
  MyApp the_app(1000);// 1000msタイマー
  the_app.run();
}
```

```c++:app.h
#ifndef __app_h
#define __app_h
// ↑クラス、変数、インライン関数などの二重定義エラーの防止、コンパイル時間の短縮

// クラスの定義
class App {
  int interval_;
  public:
    App(int sec) : interval_(sec) {}
    void run();
    virtual void tick();  // 純粋仮想関数
    virtual void tack();  // 純粋仮想関数
};
#endif // __app_h
```

```c++:app.cpp
#include "app.h"
#include "Arduino.h"

//extern "C" void delay(unsigned int sec);

void App::run(){
  static int toggle = 1;
  for(;;){
    delay(interval_);
    if (toggle)
      tick();
    else
      tack();
    toggle = 1 - toggle;
  }
}

void App::tick(){}
void App::tack(){}
```
Aidemy3回目　メモ　「9/22」

Aidemy | 10秒で始めるAIプログラミング学習サービスAidemy［アイデミー」
https://aidemy.net/

本日3回目メモ。

#Aidemy3回目メモ

##リストのインデックス
自動で**インデックス(index)** が割り振られる。
インデックスの 先頭は「0」 で、その後1、2、3…と順番に続く。

```py
TestList = [1, 2, 3, 4]
print(TestList [1])  #インデックスが1の「2」が出力される
```

リストインデックスはマイナス値を指定する事で末尾からいくつめ、という指定もできる。

```py
TestList = [1, 2, 3, 4]
print(TestList [-1])  #インデックスが末尾の「4」が出力される
```

##スライス
リストから一部の要素を切り出す事をスライス、という。

```py
TestList = [1, 2, 3, 4]
```

スライスの仕方

|書き方|説明|
|:--|:--|
|TestList[1:3]|インデックス1～2の要素|
|TestList[1:]|インデックス1～末尾の要素|
|TestList[:3]|インデックス先頭～2の要素|

注意：
・インデックスの先頭は0である
・始点に指定されたインデックスの要素についてはスライスに含まれる
・終点で指定したインデックスの1つ前の要素までがスライスに含まれる

```py
print(TestList[1:3])
#「2」「3」が出力される。
print(TestList[1:3])
#「2」「3」「4」が出力される。
print(TestList[:3])
#「1」「2」が出力される。
```

##リストの更新、追加

基本は以下「**リスト[インデックス] = 値**」で更新できる。

```py
TestList = ["a", "b", "c", "d", "e"]
TestList[0] = "A" #先頭の要素の値を上書き
print(TestList)   # ["A", "b", "c", "d", "e"]が出力される
```

スライスで指定した範囲の値をまとめて上書きすることも可能

```py
TestList = ["a", "b", "c", "d", "e"]
TestList[1:3] = ["B", "C"] #インデックス１と2にそれぞれ値を代入
print(TestList)            # ["a", "B", "C", "d", "e"]が出力される
```

リストに要素を追加する事も可能。

```py
TestList　= ["a", "b", "c", "d", "e"]
TestList.append("f") # ひとつだけ追加する場合はappendを使う
print(TestList)      # ["a", "b", "c", "d", "e", "f"]が出力される
```
注意：
appendは複数要素を追加する事は出来ない。
複数要素を追加する場合は、+=でリストに連結する。

```py
TestList = ["a", "b", "c", "d", "e"]
TestList += ["f","g"] # 複数追加する場合は+を使う
print(TestList)       # ["a", "b", "c", "d", "e", "f", "g"]が出力される
```

##リストの要素の削除
リストから要素を削除するには「del」を使用し、 del リスト[インデックス] と記述する。

```py
TestList = ["a", "b", "c", "d", "e"]
del TestList[3:] #インデックス3以降の要素を削除
print(TestList)  # ["a","b", "c"]が出力される
```

削除の範囲をスライスで指定する事も可能。

```py
TestList = ["a", "b", "c", "d", "e"]
del TestList[1:3] #インデックス1～2までの要素を削除
print(TestList)   # ["a","d","e"]が出力される
```

##リストの注意点
リストの値をそのまま他の変数に代入し、代入した変数に別の値を上書きした場合、
**もともとの変数の値にもその変更が適応される**。
これ大事ですねえ。
知らないと絶対バグらせてた。

```py
TestList = ["a", "b", "c"]
TestList_copy = TestList   # TestList_copyにTestListの値を代入する
TestList_copy[0] = "A" # TestList_copyの先頭の値を上書きする
print(TestList_copy)   # ["A", "b", "c"]と出力される
print(TestList)        # TestListの値も["A", "b", "c"]に変更される
```

対処は格納の仕方があり。

```py
TestList_copy = TestList[:]
```
または

```py
TestList_copy = list(TestList)
```
のいずれかで代入すると、元のリストは更新されない。

```py
TestList = ["a", "b", "c"]
TestList_copy = alphabet[:]
TestList_copy[0] = "A"
print(TestList_copy)  # ["A", "b", "c"]と出力される
print(TestList_copy)  # 変更が適用されず、["a", "b", "c"]と出力される
```
swiperのイベントを取得する

var mySwiper = new Swiper ('.swiper-container', {
  ...
  // イベント
  on: {
    init: function(){
      // 任意の処理を実行
    },
    slideChange: function(){
      // 任意の処理を実行
    },
    slideChangeTransitionStart: function(){
      // 任意の処理を実行
    },
    slideChangeTransitionEnd: function(){
      // 任意の処理を実行
    },
    imagesReady: function(){
      // 任意の処理を実行
    }
  }
});

Swiperイベントリスナー
https://digipress.digi-state.com/tech/introducing-swiper-js/#Swiper
MySQL5.7からMySQL8.0にアップデートする時の変更点

【MySQL5.7からMySQL8.0にアップデートする時の変更点】
・Macローカル環境のMySQLのアップデート
==環境情報==
OS MacSierra
PHP7.2
Apache2.4
MySQL5.7

==アップデート時に出現するエラー==
The server requested authentication method unknown to the client

==大きな変更点は以下の2点==
①認証プラグインのセキュリティーレベルの変更
8.0のデフォルト設定がcaching_sha2_password
5.7の時はmysql_native_password

以下が変更のためのコマンド
ALTER USER 'user'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

mysqlのセッティングファイルであるmy.cnfに以下を追記
default-authentication-plugin = mysql_native_password

　　
②パスワードのバリデーションレベルの変更
8.0のデフォルト設定がMEDIUM
5.7の時はLOW

以下のコマンドを実行
set global validate_password.policy=LOW;

以下のコマンドで内容を見れる
show variables like 'validate_password%';

変更前
+--------------------------------------+--------+
| Variable_name                        | Value  |
+--------------------------------------+--------+
| validate_password.check_user_name    | ON     |
| validate_password.dictionary_file    |        |
| validate_password.length             | 8      |
| validate_password.mixed_case_count   | 1      |
| validate_password.number_count       | 1      |
| validate_password.policy             | MEDIUM |
| validate_password.special_char_count | 1      |
+--------------------------------------+--------+

変更後
+--------------------------------------+--------+
| Variable_name                        | Value  |
+--------------------------------------+--------+
| validate_password.check_user_name    | ON     |
| validate_password.dictionary_file    |        |
| validate_password.length             | 8      |
| validate_password.mixed_case_count   | 1      |
| validate_password.number_count       | 1      |
| validate_password.policy             | LOW　  |
| validate_password.special_char_count | 1      |
+--------------------------------------+--------+

③mysqlメソッドが使用できなくなりmysqliが推奨されるようになった

次の記事で書きます。

お読み頂きありがとうございます。

＊情報が間違えている場合はご指摘頂けると嬉しいです。
swiperで要素をクリックで真ん中に寄せる

slideToClickedSlide: true　を入れる。

    const _swiper_category = () => {
      const categorySwiper = new Swiper ('.effect_btn_container', {
        loop: true,
        slidesPerView: 4.57142857142857, //640 /140
        spaceBetween: 0,
        centeredSlides : true,
        slideToClickedSlide: true,　//　<----　これ
      });
    };
ReduxでAPIの通信の状態を共通で扱うTips(feat. typescript-fsa)

APIコールが発生する処理を行った時にローディング中かどうかを示す `loading` なり `fetching` なりのフラグを用意すること、結構あると思います。これを様々なActionごとに逐一準備するのだるいのでまとめて用意する方法と、それをtypescript-fsa使うと意識すること一つ減るよという小ネタです。

考え方はこちらのブログのアイデア完全にお借りしていて、typescript-fsa前提だとAction Typeが必ず特定のフォーマットになるので幸せになったという話。
https://medium.com/stashaway-engineering/react-redux-tips-better-way-to-handle-loading-flags-in-your-reducers-afda42a804c6

typescript-fsaの非同期アクション
-----

typescript-fsaでは非同期なAction用に便利ActionCreatorCreatorを用意してくれており、それがactionCreator.asyncです。

```js
export const fetchSomethingActions = actionCreator.async<
  { fuga: string }, // parameter type
  { hoge: string }, // success type
  { code: number } // error type
>('FETCH_SOMETHING');
```

こうすると下記のような関数を実行できて、特定のフォーマットのAction Typeを持ったActionを発行してくれる。

```js
// リクエスト実行時に呼び出す
// Action Typeは FETCH_SOMETHING_STARTED になる
dispatch(fetchSomethingActions.started({ params: { fuga: 'hoge' } }));

// リクエスト成功時に呼び出す
// Action Typeは FETCH_SOMETHING_DONE になる
dispatch(fetchSomethingActions.done({ params: { fuga: 'hoge' }, result: { hoge: 'fuga' } }));

// リクエスト失敗時に呼び出す
// Action Typeは FETCH_SOMETHING_FAILED になる
dispatch(fetchSomethingActions.failed({ params: { fuga: 'hoge' }, error: { code: 1 } }));
```

詳しくはREADMEで。
https://github.com/aikoven/typescript-fsa

APIの通信の状態専用のreducerを用意する
-----

こんな感じのreducerを用意します。

```js
export const loadingReducer = (state = {}, action: { type: string }) => {
  const { type } = action;
  const matches = /(.*)_(STARTED|DONE|FAILED)/.exec(type);
  
  if (!matches) {
    return state;
  }

  const [, requestName, requestState] = matches;
  return {
    ...state,
    [requestName]: requestState === 'STARTED'
  };
};
```

正規表現で `STARTED|DONE|FAILED` いずれかが後ろに付いているかを判定しています。もしついている場合、`STARTED` の場合はまさにリクエストが走った時なのでtrueにします。成功か失敗した時はfalseにします。

あとはmapStateのとこでリクエスト名をキーに取ってくるだけ。

当たり前なんですがAction Typeのフォーマットを整えるのはtypescript-fsaの特権ではなく、普通に規約で縛ればいい話なんですが、typescript-fsaのようなActionCreatorCreatorがある前提なら意識しなくても守れるのが結構気分良かったです。
javascriptの日本語入力ハンドリングについてのメモ

## 日本語入力中であることを知る
日本語入力中はkeypressイベントが発火しないので、keypressイベントが発火していなかったときのkeyupイベントを日本語入力中とみなすことができる。
(keyupイベントはkeypressイベントのあとに実行される)

## 日本語入力の確定タイミングで処理する
PCのキーボードなどでは日本語変換をenterキーで確定するため、enterキーを拾って処理することができるが、iOSなどの仮想キーボードでは確定タイミングでkeyイベントが発火しない。
そのため [compositionend](https://developer.mozilla.org/ja/docs/Web/API/CompositionEvent) イベントを使うのが良さそう。







- https://garafu.blogspot.com/2015/09/javascript-ime-enter-event.html
Djangoチュートリアルでの学び

#　開発環境
- Python 2.7.6
- Django 1.9
- cloud9
- Djangoチュートリアル: [Django 1.9.dev20150211005506 documentation](https://andrewstestingfiles.readthedocs.io/en/latest/intro/tutorial02.html)

# 学び
サーバー実行には`$IP:$PORT`をつける。
`$ python manage.py runserver $IP:$PORT`

templatesはプロジェクトの直下に置く
![temp1.png](https://qiita-image-store.s3.amazonaws.com/0/171266/9c37d262-8991-e59c-b01c-deb708823f8c.png)

Djangoのソースファイル置き場を知りたい
以下のコマンドをbashに打てばOK。

```python
$ python -c "
import sys
sys.path = sys.path[1:]
import django
print(django.__path__)"
```
ちなみに置き場は `['/usr/local/lib/python2.7/dist-packages/django']`。
Djangoのテンプレートを上書きするからコードそこから取ってきて、と言われても`/usr/~`へのアクセス方法がわからないので、GitHubの[Djangoソースコード](https://github.com/django/django/blob/master/django/contrib/admin/templates/admin/base_site.html)から取ってくる。
なぜメモリカードやSSDのデータはなぜ書けなくなったり消えるか

自分もTLCのSSDを2つ持っていて片方手放す際に調べていたら
片方のTLCはデータが消えると書かれておりびっくりしたことがあります。
なぜ消えるのかという話がdb tech showcaseにあったので推測を交えレポートします。

常識となっているSLC/MLC/TLCの比較については省略します。

# なぜ書き換え回数というのがあるか
NANDは0と1を電子の移動で決めている
移動する際にフローティングゲートを通るが
何度も移動すると徐々にフローティングゲートが消耗していく

書き換え回数を減らすには
ウェアレベリングという技術を使う
消耗したフローティングゲートのセルを別のセルに置き換える

# ではコンシューマではなぜデータが消えるのか
4つの要因がある

- コントローラーが未熟
- オーバープロビジョニングが少ない
- 通電しないで放置
- 高温下に置く

## コントローラーが未熟
それなりに昔のコントローラーではフローティングゲートの損耗を考慮してないことがある
消耗による書き込み禁止や最悪データが読み取れなくなる

## オーバープロビジョニングが少ない
オーバープロビジョニングがそもそも少ないと消耗してもウェアレベリングができず
書き込み禁止や最悪データが読み取れなくなる
業務用ではないメモリカードやSSDの256Gを例に話す。
いかにメモリカードが危険かわかるだろう。
### 256Gのメモリカード
NANDは256GiBで提供されるが容量は256GBである
256*1024*1024*1024/256/1000/1000/1000で
7.4％の確保
### 250GのSSD
NANDは256GiBで提供されるが容量は250GBである
256*1024*1024*1024/250/1000/1000/1000で
10%の確保
### 240GのSSD
NANDは256GiBで提供されるが容量は250GBである
256*1024*1024*1024/240/1000/1000/1000で
14.5%の確保

## 通電しないで放置
その昔DELLはSSDを半年放置するとデータが消えるリスクがあると資料で出していたようである
通電しないことにはウェアレベリングをコントローラーが行えない
電子は何もしなくても移動するため最悪データが読み取れなくなる
業務用であればこの放置しても問題ない期間がきちんと書かれている
一般用であるなら通電しててもスキャンディスクを3ヶ月くらいの間隔でした方がいい

## 高温下に置く
電子は高温なほど活発で動く
NVMeのような高温なコントローラー、CPU/VGAの発熱からは遠ざけ
高温にはならないようにするべきである

# まとめ1
コントローラーは新しいほど色々考慮されているので古いものは使わない(具体的には2014年より前の業務用を作ってないメーカー)
たまにメモリカードやNANDを通電する、スキャンディスクも行うとベスト
40℃を超える環境に置かれるなら冷却を考慮する

# まとめ2
ウェアレベリングは寿命に直結する
なるべくウェアレベリングの割合が高い物を選ぼう
フォーマットの容量を自分で指定できる物は最大容量でフォーマットしなければ
予備領域はウェアレベリングとして使われるケースもあるようだ
15～25％程度あれば問題はそうそう起きないであろう。
create-react-appで独自の環境変数を読み込む


# creare-react-app
facebookが提供しているCLIツール。Reactは、開発環境を作るのがそれなりに大変ですが、このCLIツールを使うと雛形、テスト、devサーバ、ビルド、ESLintまで全部用意してくれます。

# script毎の変数
``create-react-app``でプロジェクトを作成するとpackage.jsonには、予めスクリプトが書かれています

```json:package.json
  "scripts": {
    "start": "react-scripts-ts start ",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom --watchAll",
    "eject": "react-scripts-ts eject"
  },
```

この中で、``start``、``build``、``test``は実行時に、``process.env.NODE_ENV``に自動で値をセットしてくれます。

| script | process.env.NODE_ENV |
|:--|:--|
|  build |  production |
|  test | test  |
| start  |  development |

BABEL_ENVにも同様の値がセットされます。

# 独自の変数

creare-react-appで作ったプロジェクトはprocess.env.REACT_APP_から始まる変数を読み込みができるようになっています。便利ですね。
変数の読み込み方法も簡単です。
プロジェクト直下に``.env``ファイルを書くだけです。

```:.env
# development
REACT_APP_DEV_API_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
REACT_APP_DEV_API_URL="http://localhost:8080"

# test
REACT_APP_TEST_API_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
REACT_APP_TEST_API_URL="http://localhost:8080"

# production
REACT_APP_PROD_API_KEY=""
REACT_APP_PROD_API_URL=""
```

内容はこんな感じで記述します。

js側でこれを読み込むのも簡単です。環境変数に入っているので、ただ呼び出すだけで完了です。

```js:config.js
const Config = () => {
  if (process.env.NODE_ENV === 'test') {
    // test
    return {
      restful: {
        apiKey: process.env.REACT_APP_TEST_API_KEY,
        apiURL: process.env.REACT_APP_TEST_API_URL
      }
    }
  } else if (process.env.NODE_ENV === 'production') {
    // production
    return {
      restful: {
        apiKey: process.env.REACT_APP_PROD_API_KEY,
        apiURL: process.env.REACT_APP_PROD_API_URL
      }
    }
  }
  // development
  return {
    restful: {
      apiKey: process.env.REACT_APP_DEV_API_KEY,
      apiURL: process.env.REACT_APP_DEV_API_URL
    }
  }
}
export const restfulApiConfig = Config().restful
```

これを``yarn start``したときに見てみるとこんな感じになります

```js
var Config = function () {
    if (false) {
        // test
        return {
            restful: {
                apiKey: process.env.REACT_APP_TEST_API_KEY,
                apiURL: process.env.REACT_APP_TEST_API_URL
            }
        };
    }
    else if (false) {
        // production
        return {
            restful: {
                apiKey: process.env.REACT_APP_PROD_API_KEY,
                apiURL: process.env.REACT_APP_PROD_API_URL
            }
        };
    }
    // development
    return {
        restful: {
            apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
            apiURL: "http://localhost:8080"
        }
    };
};
var restfulApiConfig = Config().restful;
```