OmniAICreator/Qiita-1.07M huggingface dataset:
ARM開発環境構築(Eclipse+OpenOCD+ST-LINK)

###はじめに
ARM開発環境構築記事はいくつかあるが、最新版でないため現在の設定を載せる。
STM32F3Discoveryを使って試したが、cfgファイルを変えれば他のボードでも出来ると思われる。

###インストール
最新のWindows10(64bit)日本語版で楽に構築する方法のため、インストールパス変更などは環境変数で変えてください。
####1.Eclipse+プラグイン
Eclipseがないならインストールする。(2018-09)
[Eclipse 2018-09](http://mergedoc.osdn.jp)
好きなところに解凍して起動し、メニューのヘルプ→Eclipseマーケットプレースで"GNU MCU Eclipse"を検索し全部インストールする。(version 4.4.2)
####2.Node.js
Windows10にNode.jsが入ってなければインストールする。(v8.12)
Add to PATHは、デフォルトで有効なはずなので、そのまま次へボタンを押してインストールすればいい筈である。
[Node.js](https://nodejs.org/en/ "Node.js")
####3.xpm+Toolchain+Windows build tools+OpenOCD
xpmを入れないとコマンドが使えないためインストールする。
英語の説明は以下にあるため、分からなくなったら、そちらでコマンドを飛ばし読みすればよい。
[How to install GNU MCU Eclipse?](https://gnu-mcu-eclipse.github.io/install/)

コマンドプロンプトを起動して以下のコマンドを実行する。
先にxpmを入れる。

```
npm install --grobal xpm
```

その他は、xPackでインストールする。

```
xpm install --global @gnu-mcu-eclipse/arm-none-eabi-gcc
xpm install --global @gnu-mcu-eclipse/windows-build-tools
xpm install --global @gnu-mcu-eclipse/openocd
```

インストールパスは以下となっている。ユーザ名は当然、ログインしているユーザ名である。
このパスはEclipseで自動検出される。

```
C:\Users\ユーザ名\AppData\Roaming\xPacks\@gnu-mcu-eclipse
```

####4.ドライバ+ST-LINKファームウェアアップデート
ドライバとファームウェアを以下からダウンロードする。
[ドライバSTSW-LINK009](https://www.st.com/ja/development-tools/stsw-link009.html)
[STSW-LINK007](https://www.st.com/ja/development-tools/stsw-link007.html)
STSW-LINK009を適当に解凍してstlink_winusb_install.batを実行する。
ミニUSBを基板のST-LINK側のUSBポートに挿しPCに接続する。
STSW-LINK007を解凍しWindows\St-LinkUpgrade.exeを実行する。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/50302/9b4649b4-2c87-9d64-3eb2-a09cfedb2612.png)
"Device Connect"ボタンをクリックする。エラーが出たらコネクタを挿しなおしたりする。
検出に成功して"Yes >>>>"ボタンが光ったら、クリックしてアップグレードする。

##Eclipseでの開始方法
####1.プロジェクト作成
メニュー→新規作成→プロジェクトを選択しツリーのC/C++→Cプロジェクトを選ぶ。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/50302/a7aca9a1-983a-c96a-7d26-6413d4d48e2d.png)
STM32F3xx C/C++ Projectとツールチェーンを選ぶ。別のCPUが載っていれば対応するものを選ぶ。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/50302/9063787e-9882-d8b5-91aa-df6a6f23c2a0.png)
Target proccessor settingsは基本デフォルトでよい。デフォルトならLEDを光らせるようにコンテンツがBlinkyになっている。要らないならEmptyにする。
Use system callsを変えるとPOSIX関数が使えるらしい。必要なら変更する。
Trace outputは、デバッグのテキストの出力先でありSemihostingのままがよい。USBでつないでデバッグする限り、何も配線を変更せず使用可能だと思われる。
Folder_settingsはそのままでよい。
構成の選択はここではDebugのみ選ぶ。
それ以降はそのままデフォルトで作成する。

次に行く前にプロジェクトを1回ビルドしておく。

####2.デバッグの構成
デバッグのOpenOCD設定をする。
メニューの実行→デバッグの構成を選択し、GDB OpenOCD Debuggingを選んで新規作成する。既存のものがあればそれを選ぶ。
C/C++アプリケーションが空欄なので参照で実行ファイルを選ぶ。
![4.png](https://qiita-image-store.s3.amazonaws.com/0/50302/055702f5-c5bc-99d1-1f83-5150b3a6a849.png)

デバッガータブ
Config optionにコンフィグファイルを指定する。自分のボードのものを選ぶこと。
以下のパスにコンフィグファイルがある。バージョンは当然現在値。
C:\Users\ユーザ名\AppData\Roaming\xPacks\@gnu-mcu-eclipse\openocd\0.10.0-8.1\.content\scripts\board

```
-f board/stm32f3discovery.cfg
```

![5.png](https://qiita-image-store.s3.amazonaws.com/0/50302/7e4d0d18-a2c2-6fde-c335-4e8b3ecd857d.png)

####デバッグ実行
緑色の虫アイコンを押せばよい。何故か左上のボタンが反応しない場合は、プロジェクトを右クリックしてデバッグ→2ローカルC/C++アプリケーションを選べばよい。
GoogleCloudPlatformのフルマネージドのredis、Memorystoreの性能をredis-benchmarkで計測してみる

# はじめに

AWSにはあるけれども、GCPに提供されていないものとして、かつてはフルマネージドなredisサービスが上げられていました。
けどそれも昔の話、GoogleCloudPlatformにもMemorystoreというフルマネージドなredisが提供されるようになっています。
（割とだいぶ前の話ではあるんですが……）

AWSのElasticCacheと比較して、どのぐらいの性能が出るのかなというのが気になったので、比較するためにも、まずはMemorystoreの性能を計測してみようと思います:blush:

記事的には[この記事](https://qiita.com/masanori0001/items/9f5e0c7bd0f646388347)に近いかな！

# 測定の環境
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235100/3875784a-4b8c-41ef-257d-ec41e9d571ea.png)

構成図を書くような内容じゃないなぁ。

## redisの設定

redisのバージョンは3.2、インスタンス容量は1GB、高可用性はカットしています。
ネットワークスループットはインスタンス容量によって上げるんですが、今回は最低限の1GBなので375MB/sです！

# いざ実行

redis-benchmarkで各コマンドを500回、同時接続数を段々と増やしていく設定でやってみようと思います。

```terminal
redis-benchmark -h 10.0.0.11 -p 6379 -c ここを変えていく -n 500 -q
```

| 同時接続数 | 10 | 25 | 50 | 100 |
|:-------|:-----|:----|:-----|:------|
| PING_INLINE | 25000.00 | 50000.00 | 41666.67 | 55555.56 |
| PING_BULK | 26315.79 | 55555.56 | 50000.00 | 55555.56 |
| SET | 27777.78 | 55555.56 | 62500.00 | 62500.00 |
| GET | 26315.79 | 50000.00 | 55555.56 | 62500.00 |
| INCR | 27777.78 | 50000.00 | 55555.56 | 62500.00 |
| LPUSH | 29411.76 | 50000.00 | 50000.00 | 71428.57 |
| RPUSH | 26315.79 | 50000.00 | 62500.00 | 55555.56 |
| LPOP | 27777.78 | 62500.00 | 55555.56 | 62500.00 |
| RPOP | 14285.71 | 62500.00 | 55555.56 | 55555.56 |
| SADD | 27777.78 | 50000.00 | 71428.57 | 62500.00 |
| SPOP | 25000.00 | 50000.00 | 55555.56 | 71428.57 |
| LPUSH (needed to benchmark LRANGE) | 26315.79 | 55555.56 | 38461.54 | 62500.00 |
| LRANGE_100 (first 100 elements) | 19230.77 | 35714.29 | 35714.29 | 41666.67 |
| LRANGE_300 (first 300 elements) | 11363.64 | 20000.00 | 16666.67 | 17241.38 |
| LRANGE_500 (first 450 elements) | 9090.91 | 12820.51 | 12820.51 | 11627.91 |
| LRANGE_600 (first 600 elements) | 7142.86 | 9803.92 | 9433.96 | 9433.96 |
| MSET (10 keys) | 22727.27 | 38461.54 | 45454.55 | 50000.00 |

数値はrequests per second、1秒にどれだけアクセスをさばけたかです！

そして、ここまで書いて気づいたんですが……
結果を比較しようにも比較元がないのでなんとも言えないという本末転倒っぷり。
更に各コマンドに対してそれぞれ一度しか計測してないので、なんか怪しい感じになっている気が……

:angel:

# 次回へ続く

- VM側が性能限界に引っかかると元も子もないので、問題になる前にもっとスペックを上げる
- 同じコマンドでもそれぞれ何回か試してみて、平均結果で求めてみる
- 手動でテーブルを作るのはめんどくさいから簡単なプログラムでも用意しよう
- redisに書き込むデータの容量も比較してみる
- AWSのElasticCacheと自分のmacbook proに構築したdocker環境でも同じことを試してみて比較しよう
Androidのemulatorをterminalから起動する方法(備忘録)

androidのemulatorをterminalから一発で起動したかった。
わざわざandroid studio経由でemulatorを起動したくなかった。

何かを間違えたのか、何かを入れ忘れているのか忘れてしまったが
emulatorと打つと起動が出来ず、別の場所にあるemulatorを実行すると
androidのemulatorが起動できたので、一応メモっておく。
これでreact nativeの動作確認や、webのandroidでのUI確認などの手間が一つ減ってくれるはず。

```shell
$(echo `which emulator | sed -e "s/\tools/emulator/"` @Nexus_5X_API_27)
```

起動できるエミュレータの一覧は以下のコマンドで分かります。

```shell
emulator -list-avds
```
【Mac】npmからexpressをDLしたが環境変数が通っていない事象を解決

# 環境
 - macOS High Sierra 10.13.6
 - npm 6.4.1
 - node v10.12.0
 - express 4.16.0

# 事象

```bash
$ npm install -g express
...
$ which express // 環境変数通っているはずだが通らない.
```
`npm list`をたたくと存在はする.下手に環境変数通して余計に事が面倒になるのは面倒だしどうしよう...

# 解決方法
 - `express-generator` パッケージをDL

```bash
$ npm install -g express-generator
...
$ which express // 通った!
```

今回は **とにかくコード書きたい** が主なため, generatorをインストールしたらいけるかも？と思いやってみたらいけた. とにかく環境周りに時間をかけたくないので原因調査はせず.
IBM Cloud Internet Services (CIS) 以外からのアクセスを拒否する

## CISのクラウドWAF経由でWEBサーバーにアクセスする。WAF以外からのアクセスは拒否しなければならない。
WEBサーバーのファイアウォール（セキュリティグループ）で、WAFからWEBサーバーへのソースIPアドレスだけ許可し、それ以外を拒否する。せっかくWAFを実装しているのに、WAFを迂回されたら意味がない。図にするとこんな感じ。この時、WAFのIPアドレス帯を知るにはどうするのか。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/49036bef-dc27-110f-fb24-a45ed39d7ff6.png)

## WEBサーバーのアクセスログを取得したら…
クラウドWAFからのIPアドレスは「103.xx.xx.xx」と「108.xx.xx.xx」の２つあった。冗長化されているのかな、IPアドレスが変わらないという保証もないし、これをファイアウォールに登録するだけでは不十分。

## IPアドレスのレンジが掲載されていた。
沢山あった。面倒だが仕方ない。”FromCloudFlare”というセキュリティグループを作ることにした。TLS暗号化は検証用として[クライアントからエッジ(WAF)]モードにしたのでtcp80を許可したが、TLS暗号化を[エンドツーエンド]にするならtcp443ですね。
<<https://www.cloudflare.com/ips/>>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/ce9f1b44-632a-044b-fa9e-a2f8a6dfbd69.png)

## アクセス許可・拒否の検査をしたら終了。
PCからWAF経由でWEBサーバーへアクセスしたら、WEB画面が表示された（合格）
PCからWAFを経由せず、直接WEBサーバーのIPアドレスにアクセスしたら、タイムアウトになった（合格）
VirtualBoxのこれ以上なくわかりやすいネットワーク設定の表を見つけた

![image.png](https://qiita-image-store.s3.amazonaws.com/0/24737/9a928297-f195-c7f3-f3b1-76ffa3e034c3.png)
> https://www.thomas-krenn.com/en/wiki/Network_Configuration_in_VirtualBox

![image.png](https://qiita-image-store.s3.amazonaws.com/0/24737/f8725c53-f1e2-5708-e1d7-cdd6446594fc.png)
> https://www.virtualbox.org/manual/ch06.html#network_bridged
herokuで「The page you were looking for doesn’t exist.」エラーが出たときの対処法

# 事象
herokuへデプロイして確認した際に
「The page you were looking for doesn’t exist」
と表示される

# 原因
assetsをプリコンパイルしてなかったのが原因

# 対処法
```
npm install yarn -g
rake assets:precompile
git heroku push master
```

# 参考
[heroku へデプロイでエラー「The page you were looking for doesn’t exist.」](http://stuby.hatenablog.com/entry/2014/02/02/163544)
Inserting images of a given text width in Pandoc Markdown to Beamer

I want to include images in my beamer slides via Pandoc's conversion from Markdown sometimes without using the regular `![]()` image inclusions (which introduces Figures).

This is accomplished by using a LaTeX region with `\includegraphics`, with the `width` attribute set to some multiplier applied to `\textwidth`, like so:

```md
## Some title

Some text

\begin{center}
    \includegraphics[width=0.3\textwidth]{./test.jpeg}
\end{center}
```

Example output:

![](https://i.imgur.com/VQGeDJR.png)
はじめてのUltra96 必要なもの

#はじめてのUltra96
##初めに、この記事について。

FPGAの周辺でお仕事している関係で、FPGAに興味がある人にいろいろ会います。
そこで聞こえてくる声として、何処からはいっていいか、わからない、何処から開発していいかわからないということをよく聞きます。
FPGAの情報は多すぎて、混乱しているので、少し整理したいと思い、筆を描くことにしました。
自分の興味がある、ZYNQ,ZYNQ UltraScale+,Ultra96,Versalが中心になります。技術的レベルは低いレベルで書きますので、詳しい人には面白くないかもせれません。
少しでもお役に立てれば、幸いです。

##Ultra96とは、
AVNET社が企画した、ZYNQ UltraScale+(zynqMP) の安価なボードになります。Zynq UltraScale+ は、CPU＋FPGAのICチップになります。次の図はZynq UltraScale+の構成図です。
![zsu_eg.png](https://qiita-image-store.s3.amazonaws.com/0/299213/244ff0b7-bf04-28d1-a540-7e514e3591d7.png)
図からわかる通り、ARM Cortex-A53*4 Cortex-R5 中心にGPU、ハイスピードインターフェース、プログラムロジック（FPGA部)が入っています。
後々、詳しく書くと思います。
Ultra96はこのうちZCU3EGというデバイスを使ったボードです。3万円を切ったボードです。このスペックでは安いほうです。というより、2018年10月現在　チップでZCU3EGを買うより価格が安いです。（安くなるかもしれません）　普及のため頑張っているのを感じます。
##必要なもの
- Ultra96
![TNN24070_0.png](https://qiita-image-store.s3.amazonaws.com/0/299213/fa6fbae4-9b64-3f52-ed34-27d04e6f01a1.png)![AES-ULTRA96-V2-G-Image1_web.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299213/36c6a6bf-fb0a-d84f-dd8d-146c77abc4b6.jpeg)

本体です。　AVNET社から購入、または販売会社を紹介してくれます。現在はUltra96V2の販売になります。
https://www.avnet.com/shop/japan/products/avnet-engineering-services/aes-ultra96-v2-g-3074457345644050668?krypto=PGcM7B3PaL%2B78u%2Bs4mKMQ3kDVVU%2FSQgCj93uXhjVaUBOzEECzyDBFixXYXOB7VHe5jG64%2F6pe6vKTfqQbIafpdLpQvWkWCGFDdbd%2FHHV9uY%3D
- パソコン
　開発を行い方は、Windows 7,10 または、Ubuntu が必要です。64ビットパソコンである必要があります。仮想環境上でも大丈夫ですので、MACの方は、仮想環境上でOSを動作させてください。Wifiがあったほうが便利です。

- 電源
電源が別売りです。DC12Vで、2Aのものを推奨しています。
![UU324-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/299213/cecc2d0d-9b5d-32da-ec00-3b035d6d2858.jpeg)
何処のものでも使えます。次のところから、購入できます。
https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-4B8J

- 電源変換ケーブル
電源はコネクタが標準化されて、基本は2.1Φのコネクターが多いです。ただ、Ultra96が1.7Φなので、これに変換する必要があります。
![2ad6dek3.jpg](https://qiita-image-store.s3.amazonaws.com/0/299213/4ff2779f-d5ce-ab88-74ec-8cb953e9a281.jpeg)　
こちらも次のところから、買えます。
https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=2AD6-DEK3

##付属しているもの
起動用SDカードが付属しています。ultra96で、Linuxが動作するためのものです。これでいろいろ動作させることが可能です。
![DSC_1842.JPG](https://qiita-image-store.s3.amazonaws.com/0/299213/398498e9-15f6-8d90-19d6-f703c1ea7def.jpeg)
Getting Start　英語版ですが、初めに動かす説明書です。後日日本語で動作させるための手順を書きますね。
![DSC_1840.JPG](https://qiita-image-store.s3.amazonaws.com/0/299213/0e3ce482-7881-f5fb-eda0-054aec68184e.jpeg)

ライセンス
ツールを動かすためのライセンスが入っています。現段階では無料ツールでできることも多く、必要性を感じていません。将来的にライセンスが必要な時があるかもしれませんので、必要な時に初めて登録すればいいと思います。（ツールが最新バージョンのが使えるので、その時の機能がよくなっている可能性が高いのです）

#動作させるには
Getting Start通りすれば動きます。パソコンにWifiがあれば動作します。
が、英語ですね。後日、動作手順を、まとめたいと思います。

Ultra96V1は最初からついてくるSDカードで動作します。
Ultra96V2からは、SDカードイメージをご自分でダウンロードして書き込まないといけません。イメージは次のところからダウンロードします。
http://avnet.me/ultra96-v2-oob
からSDカードイメージをダウンロードできます。
SDカードの書き込みにはetherというアプリが便利です。
https://etcher.io/
SDカードを書き込んだあと、Ultra96V2に挿せば動作します。

では、Ultra96ライフを楽しんでください。

[はじめてのUltra96 あれば便利なもの] (https://qiita.com/basaro_k/items/2d70363b5428f36d6080) に続く。
GAE: second generation runtime の機能を有効活用しつつ、Python 3.7 の Web アプリを動かす

少し前に Python 3.7 が GAE の standard environment で使えるようになったとアナウンスされました（2018/10/14 時点ではベータ版）。また、second generation runtime が使えるようになりました。

[Introducing App Engine Second Generation runtimes and Python 3.7](https://cloud.google.com/blog/products/gcp/introducing-app-engine-second-generation-runtimes-and-python-3-7)

本件に関して、既に Qiita やその他のブログで記事を執筆されている方もいらっしゃいます。それらを拝見して、私が昔書いたアプリ （内部で　pandas を使用しています） を second generation 上で簡単に動かせるのでは？ と思って試してみたのがこの記事を書こうと思ったきっかけです。

second generation runtime になって、制約が緩くなったり新しくできることが増えています。特に内部的に C で書かれた Pythonライブラリも追加できるようになったのが大きいです。今まで動かせなかったようなアプリも動かせるようになっているのでは、と思います。

# second generation runtime について

まず、ざっくりと second generation runtime の概要を説明します。

second generation のランタイムでは、gVisor ベースでコンテナのアイソレーションが実現されています。そのため、first generation と比べて制限が緩くなっています。

* 任意の Python パッケージを追加可能
* /tmp 上へのファイル読み書きが可能

この他にも様々な制限の緩和、非推奨となった機能などがあります。詳しくは公式ドキュメントの方にまとまってますので、そちらをご参照ください。

[Understanding differences between Python 2 and Python 3 on the App Engine standard environment](https://cloud.google.com/appengine/docs/standard/python3/python-differences)



# Web アプリケーションについて

今回、GAE にデプロイするのはExcel もしくは CSV ファイルの表をマークダウン形式に変換する Web アプリケーションです。

![overview.png](https://qiita-image-store.s3.amazonaws.com/0/48133/bb24ae97-dce5-abdd-ef4e-83884552d6e3.png)

second generation runtime の機能のうち役立つのは次の 2 点。

###### サードパーティーのパッケージをインストール可能

今回は以下のパッケージを使用します。pandas などのパッケージも含まれています。

* flask
* flask-bootstrap
* pandas
* xlrd

###### /tmp へのファイル読み書き

アップロードしたファイルは一時的に /tmp 領域に書き出しています。
それを pandas の read_csv メソッドで読み出しています。

### second generation runtime 設定のポイント

では実際にどのように second generation runtime の設定を行うのか。要点だけ書き出します。

##### ランタイムの指定

[app.yaml](https://cloud.google.com/appengine/docs/standard/python3/config/appref) にてランタイムの指定をします。python37 にします。

```yaml:app.yaml
runtime: python37
```

##### パッケージ

requirements.txt に必要なパッケージを書き出します。以下は公式ドキュメントの例です（私のアプリはバージョンを固定していないので・・本来は pip freeze で取得したバージョンにするべきです）。

```
Flask==0.10.1
python-memcached==1.54
```

https://cloud.google.com/appengine/docs/standard/python3/specifying-dependencies




### デプロイ

今回試す Web アプリのソースは Github 上に公開しています。Cloud Shell 上で次の通りコマンドを実行してください。

```Shell
# ソースの取得
$ git clone https://github.com/ao-log/gae-second-generation-python-demo
$ cd gae-second-generation-python-demo

# デプロイ
$ gcloud app deploy .
```

https://[プロジェクト名].appspot.com/ にアクセスして、デプロイされていることをご確認ください。

# 参考

* [Introducing App Engine Second Generation runtimes and Python 3.7](https://cloud.google.com/blog/products/gcp/introducing-app-engine-second-generation-runtimes-and-python-3-7)

* [App Engine standard environment runtimes](https://cloud.google.com/appengine/docs/standard/appengine-generation)
* [Understanding differences between Python 2 and Python 3 on the App Engine standard environment](https://cloud.google.com/appengine/docs/standard/python3/python-differences)
* [GAE スタンダード環境で scikit-learn を使う](https://medium.com/google-cloud-jp/gae-standard-with-scikit-learn-dff5ad1a0ea1)
Windows10でIMEで日本語入力切り替え時、「あ」や「A」を表示させない方法

いつからかWindows10で日本語入力を切り替えると、画面中央に「あ」や「A」が表示されるようになったようです。
たいした問題では無いのですが、頻繁に「あ」や「A」が、デカデカと表示されると鬱陶しいので、オフにする方法を紹介します。

1.  タスクトレイの「あ」または「A」を右クリック
2. メニューから「プロパティ」をクリック
3. 「IME入力モード切替の通知」内の「画面中央に表示する」のチェックをはずす
4. 「OK」をクリック


画像付きの解説はブログに載せていますので、良ければ見てください。
<a href="https://tsukasa-labz.hateblo.jp/entry/2018/10/14/223941" target="_blank">つかさラボのBlog@hatena</a>

2020/09/13時点でも有効なことを確認。
Windows10 1909
crypto/x509: macOS Security produces link warning

# Problem
```
% go build
# github.com/autograde/aguis
ld: warning: text-based stub file /System/Library/Frameworks//CoreFoundation.framework/CoreFoundation.tbd and library file /System/Library/Frameworks//CoreFoundation.framework/CoreFoundation are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks//Security.framework/Security.tbd and library file /System/Library/Frameworks//Security.framework/Security are out of sync. Falling back to library file for linking.
%
```

# XCode-select Reinstall
```
$ sudo mv /Library/Developer/CommandLineTools /Library/Developer/CommandLineTools.old
$ xcode-select --install
$ sudo rm -rf /Library/Developer/CommandLineTools.old
```
aapt(Android Asset Packaging Tool)でapkファイルが対応しているネイティブコードのCPUアーキテクチャを確認する

## `aapt`のパス

たとえば、こんな所にある

```
~/Library/Android/sdk/build-tools/28.0.3/aapt
```

## `aapt dump badging $APK_FILE_PATH`

```
aapt dump badging MyGame-debug.apk

package: name='com.your_company.mygame' versionCode='1' versionName='1.0'
install-location:'auto'
sdkVersion:'14'
targetSdkVersion:'27'
uses-permission: name='android.permission.INTERNET'
uses-permission: name='android.permission.VIBRATE'
application-label:'MyGame'
application-icon-160:'res/mipmap-mdpi-v4/ic_launcher.png'
application-icon-240:'res/mipmap-hdpi-v4/ic_launcher.png'
application-icon-320:'res/mipmap-xhdpi-v4/ic_launcher.png'
application-icon-480:'res/mipmap-xxhdpi-v4/ic_launcher.png'
application: label='MyGame' icon='res/mipmap-mdpi-v4/ic_launcher.png'
application-debuggable
launchable-activity: name='org.cocos2dx.cpp.AppActivity'  label='MyGame' icon=''
feature-group: label=''
  uses-gl-es: '0x20000'
  uses-feature: name='android.hardware.faketouch'
  uses-implied-feature: name='android.hardware.faketouch' reason='default feature for all apps'
  uses-feature: name='android.hardware.screen.landscape'
  uses-implied-feature: name='android.hardware.screen.landscape' reason='one or more activities have specified a landscape orientation'
main
supports-screens: 'small' 'normal' 'large' 'xlarge'
supports-any-density: 'true'
locales: '--_--'
densities: '160' '240' '320' '480'
native-code: 'arm64-v8a' 'armeabi-v7a' 'x86'
```

> native-code

ってところが、対応しているCPUのアーキテクチャ

## `aapt list $APK_FILE_PATH`

ついでに、apkファイルの中を確認してみるコマンド

```
aapt list MyGame-debug.apk

AndroidManifest.xml
META-INF/CERT.RSA
META-INF/CERT.SF
META-INF/MANIFEST.MF
assets/CloseNormal.png
assets/CloseSelected.png
assets/HelloWorld.png
assets/fonts/Marker Felt.ttf
assets/fonts/arial.ttf
assets/res/.gitkeep
classes.dex
lib/arm64-v8a/libMyGame.so
lib/armeabi-v7a/libMyGame.so
lib/x86/libMyGame.so
res/mipmap-hdpi-v4/ic_launcher.png
res/mipmap-mdpi-v4/ic_launcher.png
res/mipmap-xhdpi-v4/ic_launcher.png
res/mipmap-xxhdpi-v4/ic_launcher.png
resources.arsc
```

確かに、lib配下に、それぞれのアーキテクチャ毎のファイルが存在する事を確認できる。
OOCSSについて調べた

# OOCSSとは
object oriented CSSの略。
BEMの実例を調べようとしたらairbnbのGitHubに名前を見かけたので調べた。
何やら原則があるらしい。

## 原則1 *再利用できるようにする*
転載元
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

before

```css
#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
```

after

```css
.button {
  width: 200px;
  height: 50px;
}
.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}
.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
```

　#buttonと#widgetに指定している共通のCSSを抜き出している。
まぁそうだよね、って感じ。


## 原則2 
飽きたので調べるのやめ。
だいたいSassで書いていればなんとかなりそう。

#　参考
* https://github.com/airbnb/css#oocss-and-bem
* https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
VisualStudioCodeでカーソル位置にシーケンシャルに数字を入力する(拡張機能)

# VisualStudioCodeでカーソル位置にシーケンシャルに数字を入力する

拡張機能として、vscode-input-sequence をインストールする。
後は、拡張機能の説明そのままなのでそちら参照。。
Jenkins のインストール

やってみたのでメモ

# 手順

1. Jenkins の war ファイルをダウンロードする

    ```
    # curl -LkvOf http://mirrors.jenkins.io/war-stable/latest/jenkins.war
    ```

2. Jenkins を起動する

    ```
    # java -jar jenkins.war --httpPort=8080
    ```

これで起動する。インストールするというほどやることはない。

# 参考
- [Getting started with the Guided Tour](https://jenkins.io/doc/pipeline/tour/getting-started/)
Google Home IPアドレスの確認

Google Homeのアプリが更新されたと思ったら，google-home-notiferが使えなくなる．
エラーをみると，どうもGoogle Homeのipアドレスが変わってるようなエラーが表示されています．
(Google home error: connect enconnrefused* 168.19.***.***: 8009)

アプリが更新されたので，ipアドレスの確認方法がわからず四苦八苦．

備忘録として残します．

ホーム画面　→　右上の歯車クリック　→　デバイスの設定欄の”スピーカー”をクリック　→　画面の一番下の”情報”に記載．

確認するのに半日かかりました．
そして，やっぱりipアドレスが更新されていました．
config.jsのipアドレスを更新して，LINEコミュニケーションが復活．よかった．
Python2.x系を使用する際のちょっとした悲しみの共有

##Python2.x系で日本語を使用する

Python2.x系を使用して書いたコードに日本語のコメントを付けたいなら、`# coding: UTF-8`これをファイル先頭に記載しましょう。

```python
# coding: UTF-8

fruits = ['orange', 'banana', 'apple']

for fruits_name in fruits:
    if fruits_name == 'banana':
        # 文字列のbananaがきたら、出力する
        print 'banana'
```

こんな感じ。

前提として`ソースに記述した日本語がUTF-8でエンコードされていると仮定した場合`なので、これを満たさないままやっても意味ないので、ご注意を。

`いや、ファイル先頭に# coding: UTF-8を宣言する事すら面倒だよー`という方は、3.x系に移行しましょう。
この悲しみは報われます。

※`これからPythonやりますー`という方向け共有記事になります。
herokuにRailsアプリをアップしたが、エラーとなる場合の対処法

# 事象
```
$ git push heroku master
remote: !       No such app as ＊＊＊
fatal: repository 'https://git.heroku.com/＊＊＊/' not found
```

# 原因
heroku上に '＊＊＊' というURIを持つアプリが存在しない

# 対処法
gitのリモートURLをデプロイしたいHerokuのURIに変更する。
```
git remote set-url heroku https://git.heroku.com/＊＊＊＊＊
```
そして　再度pushする。
IBM Cloud Internet Services (CIS) 「サービス・モード」について

## CIS (CloudFlare)を使っていると、ブラウザーチェックの画面が表示される。これ何？
WEBサイトの利用者に毎回この画面が表示されると申し訳ないですよね。どうやったら消えるのかよく分からなかった。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/2228b66a-eabe-c220-347a-8b663d01162a.png)

## チケットで聞くと、ここに解答があるよって。
「DDoSアタックされたら何をすればいいの？」という辺りだろうか。
https://console.bluemix.net/docs/infrastructure/cis/ddos-concept.html#distributed-denial-of-service-ddos-attack-concepts

## こういう事ですか？
どうやらWEBサーバーがDDoS攻撃を受けていることが分かった時、手動で（一時的に）WEBサーバーへのアクセスを制限するモードに切り替える用途らしい。しくみは、クラウド管理ポータルのCIS「概要」にある「サービス・モード」を［防御モード］にすると、WEBサーバーにアクセスする端末のブラウザか否かを5秒程度検査されて、ブラウザ経由ならアクセスを許可し、BOTなどであればブロックされる。試しに［防御モード］にした状態でLinux端末からWgetをすると"503 Service Temporarily Unavailable"となり、［防御モードを非アクティブ化］するとファイルを取得できた。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/3e55d173-bd47-98d3-e511-228580b6e394.png)

## 設定はここ
「モードの選択」を［防御モードをアクティブ化］するか、［非アクティブ化］するか。DDoS攻撃を受けていない定常時は「非アクティブ化」にしておくのですね。なお、サービス・モードを非アクティブ化しても、きちんとSQLインジェクションやクロスサイトスクリプティングは正しく動作しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/189936/4c05de8c-8f3a-13f6-d700-8e7da11b8852.png)

クラウドベンダーの説明書、もう少し解りやすく書いて欲しいなー。と思いました。
【自分用メモ】Swiftのクロージャでスイッチとカウンタを作る

Rubyに続きSwiftでも作ってみる。
[Rubyのクロージャでスイッチとカウンタを作る](https://qiita.com/tetymd/items/d880fbf588fb51827e53)


## スイッチ
```swift
func create_switch(status:Bool) -> () -> Bool {
    var status = status
    func changeStatus() -> Bool {
        status = !status
        return status
    }
    return changeStatus
}

// 初期値を設定
let s = create_switch(status:false)
print(s())
print(s())
print(s())
```

### 実行結果
```
true
false
true
```

## カウンタ
```swift
func create_counter() -> () -> Int {
    var n = 0
    func countUp() -> Int {
        n += 1
        return n
    }
    return countUp
}

let c = create_counter()
print(c())
print(c())
print(c())
```

### 実行結果
```
1
2
3
```

### おまけ
こういう書き方もできるみたい。

```swift
func create_switch(status:Bool) -> () -> Bool {
    var status = status
    return { () -> Bool in
        status = !status
        return status
    }
}
```
Blockchain Use Cases

###ブロックチェーンの技術的特徴:
1. 分散ネットワーク
2. 暗号技術による改ざん防止
3. スマートコントラスト

###ブロックチェーンの使用例
1. 資産トークン化 
    - [Harbor](https://harbor.com/)
    - [Vaultoro](https://www.vaultoro.com/)
2. サプライチェーンマネジメント
    - [VeChain](https://www.vechain.com/#/)
    - [Origin Trail](https://origintrail.io/)
3. デジタルアイデンティティ
    - [Civic](https://www.civic.com/)
    - [Uport](https://www.uport.me/)
4. エネルギー市場
    - [Power Ledger](https://www.powerledger.io/) 
    - [Grid+](https://gridplus.io/)
5. 健康管理
    - [Medicalchain](https://medicalchain.com/en/)
GCPのKubernetesでコンテナを作成してみた




## 環境
macbook(gcloudインストール済み)


## kubectlのインストール(すでに入っている方は飛ばしてください)
以下を実行

```
gcloud components install kubectl
```

また、computeEngineゾーンのデフォルト値を設定しておくことで、のちの作業を楽にしておきます。

```
gcloud config set project [PROJECT_ID]
gcloud config set compute/zone [ZONE_NAME]
```

## KubernetesのAPIを有効化
GCPの管理コンソールから「APIとサービス」を開きます。
ライブラリで「Kubernetes」と検索し、「Kubernetes Engine API」を有効化します。<img width="722" alt="スクリーンショット 2018-10-15 20.13.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/269830/7e1024d5-ef7b-b73e-24b3-d639eed7c07b.png">



## クラスターノードの作成
ここではtestという名前でノードを作成します。

```
gcloud container clusters create test --num-nodes=1
```

無事にノードが作成したことを以下のコマンドで確認します。
gke***みたいなのがいればOK。

```
gcloud compute instances list
```


## WordpressをPodで起動
ノードの作成が完了したので、ノード内にPodを立ち上げ、Wordpressを起動します。

```
kubectl run wordpress --image=tutum/wordpress --port=80
```

デプロイされた情報は以下で確認できます。


```
kubectl describe deployments
```


```
Name:                   wordpress
Namespace:              default
CreationTimestamp:      Sun, 14 Oct 2018 22:29:34 +0900
Labels:                 run=wordpress
Annotations:            deployment.kubernetes.io/revision=1
Selector:               run=wordpress
Replicas:               1 desired | 1 updated | 1 total | 0 available | 1 unavailable
StrategyType:           RollingUpdate
MinReadySeconds:        0
・
・
・
```


## ロードバランサの作成
Wordpressの起動したPodの作成は完了しましたが、このままではWordpressには同一コンテナ内のPodからしかアクセスすることができないので、ロードバランサを作成し、アクセス可能状態にします。


```
kubectl expose deployment wordpress --type=LoadBalancer
```

以下のコマンドで、ロードバランサが準備OKかどうかを確認します。
EventsのMessageに「Ensured load balancer」が表示されたら準備OKです。

```
kubectl describe services
```

「LoadBalancer Ingress」にあるIPアドレスにアクセスするとWordpressの画面が出てくるかと思います。


## Wordpressの削除
残念ながらこのまま放置しておくと誰かに使われかねないので、以下のコマンドで
サービスとDeploymentsを削除しておきます。


```
kubectl delete services wordpress
kubectl delete deployment wordpress
```

本編は以上です。


## 補足

- 複数のPodを作る場合

最後のxに任意の整数をいれてください

```
gcloud container clusters create test --num-nodes=x
```


- Pod数の確認

```
kubectl get pods
```


- ノードの削除

```
gcloud container clusters delete [NODE_NAME]
```

### もっと勉強します.
オブジェクトのプロパティ名でループする

Object.keys().forEach ... とかって、毎回書くのちょっとだけ面倒ではないのだろうかと思いました。

```js
const objectKeyValueForEach = (obj, func) => {
  Object.keys(obj).forEach((key, index, array) => {
    func(key, obj[key], index, array);
  });
}

var object1 = {
  value1: 'abc',
  value2: 123,
  obj3: {
    value: 'val1'
  }
};

objectKeyValueForEach(object1, (key, value) => {
  console.log(key + ' ' + value);
});
```

```
//実行結果
  value1 abc
  value2 123
  obj3 [object Object]
```

参考
[JavaScript] オブジェクトをループでまわす - Qiita
https://qiita.com/phi/items/98975e1bb4995c1f1bcf
ブロックチェーン、それができること

こんにちは! 私はブロックチェーンを勉強し始めました。 とても面白かったです。 現在の技術を改善する多くの機能を備えています。 私のお気に入りの特徴の1つはデータセキュリティです。

# ブロックチェーンとは
ブロックチェーン技術を使った代表的なものはCryptocurrencyです。これはニュースを賑やかせ、オフィスや公共の所で話題になりました。2017年にビットコインは世界で2番目に一番検索したニューストピックになりました。しかし、ブロックチェーンはcryptocurrencyだけではありません。ブロックチェーンは、現在使用されている技術の非効率性を解決するのに役立ちます。データの整合性などの問題は、ブロックチェーンによって解決できます。

# データの整合性とは
データの完全性は、データの正確性と一貫性の維持と保証によるものです。現在の傾向では、データが中央サーバーにあり、データは簡単にハッキングすることができます。しかし、ブロックチェーンでは、データはネットワーク内のすべてのコンピュータに配置されます。データは暗号化とハッシングによっても保護されています。コンピュータは、互いのデータとトランザクションをチェックします。データが正確で一貫性があるかどうかを確認するには、コンピュータ間のコンセンサスが必要です。したがって、ハッキングを簡単に特定して見つけることができます。

# まとめ
ブロックチェーンが提供するセキュリティにより、記録保全やモバイル選挙などの革新は、リスクを低くすることができます。でも、ブロックチェーンが助けることができる潜在的な技術革新はまだたくさんあります。これが私が探求したいものです。ブロックチェーンはcryptocurrencyだけではなく、現在のデータセキュリティの非効率性に対する解決策です。

ソース:
https://www.digitalpulse.pwc.com.au/solving-real-world-problems-blockchain/
https://innovationatwork.ieee.org/6-real-world-challenges-that-blockchain-technology-is-poised-to-solve/
macOSでOpenGLを勝手に勉強する(目次)

macOSとOpenGLを使って3Dグラフィックスを勉強しています。
あくまでも初学者として勉強しながら記事を書いているので、
誤った内容を記載してしまう可能性があります。ご指摘いただけると嬉しいです。

なお、本記事群は、[macOSでOpenGLプログラミング（目次） - Qiita](https://qiita.com/sazameki/items/d060f20f621c658046d9)の掲載が途中で止まってしまっているけど記事の内容が知りたくて、とうとう自分で学習し始めて記事化してみているというものです。
本家の記事については、3Dグラフィックスができる私の同僚が、3Dグラフィックスを1歩ずつ丁寧に学んでいくことができる良い記事群だと言ってました。
本家の連載が再開したら、この記事群は用ナシになるかもしれません。

# 目次

## 2章　シェーダによる描画の基礎

2-7.  [OpenGLのVBOの頂点データを更新する](https://qiita.com/uechoco@github/items/08e401761bddd17b4c3f?utm_campaign=email&utm_content=link&utm_medium=email&utm_source=public_mention)

## 4章　3Dモデルの読み込みと基本のライティング

4-7. [点光源のライティングを実装する](https://qiita.com/uechoco@github/items/95b564f2f5eea8af5d33)
4-8. [スポットライトのライティングを実装する](https://qiita.com/uechoco@github/items/be3b66c9043bcf2174f7)
4-9. [自己発光するオブジェクトのライティングを実装する](https://qiita.com/uechoco@github/items/ed8965a8433837f1717d)
4-10. [ライティングの計算を頂点シェーダからフラグメントシェーダに移す](https://qiita.com/uechoco@github/items/c850eb0e6edfa2674b0d)
4-11. [複数のスポットライトのライティングを実装する](https://qiita.com/uechoco@github/items/609bd631ce9edbfd78f8)
4-Ex1. [glslangValidatorを使ってシェーダの文法チェックをする](https://qiita.com/uechoco@github/items/031f4fe980582ff9234f)
4-Ex2. [uniform structを使ってシェーダー内で構造体を使う](https://qiita.com/uechoco@github/items/7afdbf9547e164050352)
[関数系] error_reportingでエラーを握り潰さないようにしようねという話

# 概要

error_reporting の設定を間違ってFatal Errorに気づかないこともあるので、
本当に設定には気をつけましょうねという話。

# 内容

アクセスなどが多いサービスになってくると、エラーレポートの中身をerror_reportingしないようにする場合も存在するが、開発時のデバッグの時には必ずE_ALLにして検証した方が良い。

## 理由

### 理由1

PHPはスクリプト言語であるため、エラーの内容がNOTICEであっても動作しないということがありうる。

### 理由2

同じ箇所を2箇所で利用しているような場合は、依存関係がごちゃごちゃになっていると、一つでは動作するものの、もう一つの利用箇所においては動作しないということも起こりうる。

# 落とし穴

1. error_reporting の初期値は E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED→初期値にNoticeが含まれていない
2. 

## バージョンによる error_reporting のデフォルト値

|バージョン|デフォルト値|意味|
|:---:|:---:|:---:|
|PHP 5.3 以降|E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED|NOTICE, DEPRECATED, STRICT以外は全てのエラーを表示|
| PHP 5.3.0 以前|E_ALL & ~E_NOTICE & ~E_STRICT|NOTICE, STRICT以外のエラーは全て表示|
|PHP 4|E_ALL & ~E_NOTICE|NOTICE以外のデータは全て表示|

## 落とし穴に対する対処

開発中はできればNoticeエラーをonにする(or E_ALLのみとしておく)ことで、Noticeも含めてエラーは積極的に潰していくこと

# まとめ

E_ALLで動作検証をしよう。(当たり前なのかもしれませんが、自戒を含め)
依存されている箇所は検証しようね。

# 参考

[改めてphpのerror_reportingは心もとないなと感じた](https://zudoh.com/archives/410)
[実行時設定 - php.net](http://php.net/manual/ja/errorfunc.configuration.php)
[error_reporting - php.net](http://php.net/manual/ja/function.error-reporting.php)
CSS 基本

# 命名
- [CSSのクラス名を決めるときに使うリストをつくりました](https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470)

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

# セレクタ
- [何番目系の便利なCSSまとめ](https://qiita.com/ituki_b/items/62a752389385de7ba4a2)

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

# レイアウト
## 基本
[【CSS】displayの使い方を総まとめ！inlineやblockの違いは？](https://saruwakakun.com/html-css/basic/display)

- block
- inline
- inline-block


## 横並び
### 横並びの方法
- float
- table
- inline-block
- flex

#### [froat で横並び](https://lopan.jp/float-layout/)
#### [table で横並び](https://lopan.jp/table-layout/)
#### [inline-block で横並び](https://lopan.jp/inlineblock-layout/)
隙間を埋める

```
ul letter-spacing: -.5em;
li letter-spacing: 0;
```

#### [flex で横並び](https://lopan.jp/flexible-layout/)
- 親要素はコンテナ display: flex を指定
- 直接の子要素はアイテム（※孫要素は適用されないので注意）

[CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門](https://ics.media/entry/13117)

- Flexboxの使い方とクロスブラウザ

- `Android 4.3以下` や `IE 10` まで対応するにはベンダープレフィックスが必要
→ Autoprefixer で付与

```
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
```

- `IE 9` で対応するには `ポリフィル「flexibility.js」` を読み込む

#### パフォーマンス
Flexbox と float なら Flexbox の方が早い。
[最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較](https://ics.media/entry/11459)


## 中央配置
- [CSSで中央寄せの方法いろいろメモ](https://qiita.com/KAMEch/items/b52c5e23212b8fef81a7)
- [CSSで要素を上下や左右から中央寄せする7つの方法（図解あり）](https://www.granfairs.com/blog/staff/centering-by-css) 

### 左右
- `text-align: center;`  （インライン要素）
- `margin: 0 auto;`  （width必須）
- `display: inline-block;`  （widthなしで内容量に応じた量）

### 上下左右
- `vertical-align: middle; + display: table-cell;` （vertical-align はインライン要素とテーブルセルのみ） 
- `padding: xxpx` （高さと幅の指定なしの場合）
- `display: table-cell;` （marginが効かなくなるので、親要素で囲む）
- `position: absolute; + margin: auto;` （width と height が必須）
- `transform` （width と height は成り行き）
- `display: flex;`

```
display: flex;
justify-content: center;
align-items: center;
```


## 配置
- [要素の重なりを自由に調整! z-indexの使い方](https://www.sejuku.net/blog/55061)
- [z-index再入門 第1回 z-indexの仕組み] (https://app.codegrid.net/entry/z-index-1)

### z-index
- position:static `以外`
- `position: relative、absolute、fixed` が指定されている要素にしか使えない
- スタック文脈と `スタックレベル（同一のスタック文脈内での重なり順）`　→同じスタック文脈で比較するので注意

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

# チェックボックス

- [CSS でチェックボックスとラジオボタンを装飾する方法](https://lab.sonicmoov.com/markup/css/css-checkbox-radio/)
- [CSSだけでradio chackboxをカスタマイズする内容ってほとんどがHTML構造気持ち悪いよね。](http://nanndemoiikara.hatenablog.com/entry/2015/05/04/154954)
- [cssとhtmlのみでフォームのチェックボックスをわかりやすくするデザイン9選](https://copypet.jp/774/)

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

# レスポンシブ

* [[CSS]知っておくと便利！スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://coliss.com/articles/build-websites/operation/css/viewport-units-on-mobile.html)

```
.my-element {
  height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
  height: calc(var(--vh, 1vh) * 100); /* これ書いとく */
}
```
Blockchain: Traceability

Blockchainについて、traceabilityに興味があります. Traceabilityは格納されたデータを、一連のブロックを通じて追跡できることを指します。これらのブロックの連鎖は、時間順にリンクされています。 

ブロックチェーン内の特定のブロック内のデータを更新するときは、ブロック自体の変更はしません。 代わりに、新しい日付とタイムスタンプで変更を記録するために新しいブロックが追加されます。

例えば土地の所有権では、元帳のすべての取引が時系列で記録されるため、誰もその土地の所有権を偽造することはできません。

Source:
https://www.youtube.com/watch?v=3xGLc-zz9cA
https://www.generixgroup.com/en/blog/blockchain-traceability-supply
Kindle Paper Whiteにニュース記事を自動転送してみた

# 目的
英語学習のために英文のニュース記事(Japan Today)を外出中に読みたい．
しかし，スマホを開いてブラウザを立ち上げたり，わからない単語を調べるのもめんどくさい
Kindleであれば長押しするだけで意味がポップアップされる
よし！ニュース記事をKindleに自動転送しよう！

**KindleにPDFを送信する**
Kindleには，[Send to Kindle](https://www.amazon.co.jp/gp/help/customer/display.html?nodeId=201974220)という機能があり
予め登録したメールアドレスからPDFファイルを送信すると書籍と同じように読むことができます．

# 手順
1. [Japan Todayのフィード](https://japantoday.com/feed)から各記事のURLを取得
2. ElementTreeとBeautifulSoupを使って各記事のページからタイトルと内容を取得
3. ReportLabを使ってKindle用にPDF化
3. Kindle Paper Whiteにメールで転送

# 実装
ソースはすべて[GitHub](https://github.com/WakoRintaro/jpntdy)に載せています．
https://github.com/WakoRintaro/jpntdy

# 結果
実際にニュース記事を転送してKindleで表示したイメージはこんな感じです．[元記事](https://japantoday.com/category/sports/reliever-woodruff%27s-homer-stuns-kershaw-brewers-take-game-1)
![IMG_20181014_195121.jpg](https://qiita-image-store.s3.amazonaws.com/0/302140/c611e1a6-92d6-c1f1-95c7-ab20adae53d7.jpeg)

# 所感
基本的な機能は実装できたので，あとは適当なサーバーを借りて
毎朝自動で実行すればKindleに朝刊が届きます！

初めてGitHubとQiitaを使ってみたが，何を書けばいいんだろう
これから，実装するにあたって詰まったところを載せていきます．
<<~TEXT Rubyのヒアドキュメントのまとめ TEXT

#Rubyのヒアドキュメント
文字列の書き方の一つ。複数行に渡る長い文字列を作成するときに便利な表記方法。`<<`と`<<-`、`<<~`で少し違うのでまとめておきます。

基本の使い方

```
<<識別子
１行目
２行目
３行目
識別子
```

#`<<`の場合

```rb
foo = <<TEXT
これはヒアドキュメント
複数行の文字列を作成するのに便利です。
TEXT

puts a
```
出力

```
=>　これはヒアドキュメント
　　　　複数行の文字列を作成するのに便利です。
```

###注意
`<<`を使うと最後の識別子をインデントできない。上の例なら２つ目のTEXTの前にTabとか空白をいれられない。エラーになってしまいます。

#`<<-`の場合
`<<-`を使えば、識別子をインデントできます。メソッドの内部でヒアドキュメント使う場合など、識別子をインデントしたい場合に便利です。

```rb
foo = <<-TEXT
これはヒアドキュメント
複数行の文字列を作成するのに便利です。
  TEXT
#↑空白がはいっていてもエラーにならない。
puts a
```
出力

```
=>　これはヒアドキュメント
　　　　複数行の文字列を作成するのに便利です。
```

###注意
文字列をインデントしていると出力もインデントされちゃう。

```rb
def method
  <<-TEXT
　　　　インデントしたら
　　　　出力もインデントされちゃう。
だから出力の事考えてこういうふうに
かかないといけない。プログラムは見た目悪くなる。
  TEXT
end
```
出力

```
　　　　インデントしたら
　　　　出力もインデントされちゃう。
だから出力の事考えると行頭から書くことになる。
プログラムは見た目悪くなる。
```

#`<<~`の場合
Ruby 2.3以降で実装された構文。
内部の文字列をインデントさせても空白部分が無視されます。
最初の行のインデントが基準になる。例えば、２行目を１行目より一つ深くインデントすると出力は２行目のみがインデントされているようになる。

```rb
def method
  <<~TEXT
　　　　インデントした
　　　　  １行目よりも深くインデントした。
  TEXT
end
```
出力

```
インデントした
　　　 １行目よりも深くインデントした。
```
【Unity】SteamVRプラグインでコントローラーの値を取れないとき(2018年10月中旬執筆)



#VRまわりのプラグインのアップデートに気を付けて！
　Oculus,VIVE等のVRゲームでは**SteamVRプラグイン**を入れて作業することが多いと思います。Unity内から検索してヒットするアセットストア公式からダウンロードできる**最新のバージョンは、2018年9月下旬**にリリースされており、2.0ではSteamVR_TrackedController.csが削除されるなどコントローラー周りの変更が多く、以前のスクリプトが全く使えない場合があります。また、**VRTKはSteamVRのアップデートに対応しておらず**、輪を掛けて使用が難しい状況です。SteamVRプラグイン及びVRTKを使っている場合、後者のエラーで検索して原因不明に悩まされている人が他にもいるのではと思いました。

　SteamVR_TrackedObjectとSteamVR_Controllerでコントローラーの値を取っていたわけですが、SteamVRプラグイン2.0で実行すると
error CS0103: The name `SteamVR_Controller' does not exist in the current context
といったエラーになります。

#対応方法
　SteamVR Pluginは旧バージョンを[Github](https://github.com/ValveSoftware/steamvr_unity_plugin/releases/tag/1.2.3)からダウンロードできます。(ただし公式は非推奨)　SteamVR.Plugin.unitypackageファイルをダウンロードし、Unityでプロジェクトを開いた状態で開けばインポートされます。
　また現状ではVRTKもSteamVR2.0非対応。対応するv.4系はリリース時期は未定、2018年末から2019年初旬リリースを目指している模様です。
　SteamVRプラグイン2.0の情報も徐々に出てきていますが、現状ではダウングレードが無難かなと思います。
　

参考
[SteamVR Unity Plugin 2.0](https://steamcommunity.com/games/250820/announcements/detail/1696059027982397407)
[【Unity】【SteamVR】SteamVR Plugin 2.xから1.xにダウングレードする方法](http://blog.websandbag.com/entry/2018/10/05/031538)
macbookとoculus goをマイクロUSBで繋いだら、「no android devie〜」って認識されずビルドできなかった場合

## 原因を探す
ググったら、
https://www.fonepaw.jp/tutorials/mac-android-file-transfer-not-working.html
このサイトが出てきて、以下のような原因が挙げられていた。

1．使用しているUSBケーブルに問題があります。

2．Androidスマホのファイル転送を有効にしていません。

3．「Samsung Kies」または「Smart Switch」がMacにインストールされています。

4．お使いのMacまたはAndroidデバイスは「Android File Transfer」をサポートしていません。

5．MacのUSBポートが壊れています。

僕の場合は以前接続に成功したことがあるので、1番から試してみた。結果的にそれが原因だった。

## 解決方法(あくまで私の場合)
私は、家にあったマイクロUSBをてきと〜に持ってきて使おうとしていたことが原因だった。一応これでもoculus goは充電はできるが、パソコン側ではoculus go(Androidデバイス)と接続しても認識しなかった。。。ので以下の方法で解決できた。

oculus goを購入した際に、ねずみ色のマイクロUSBが付いてきたのを思い出した。そのマイクロUSBに変更したらすぐに認識されてビルドできるようになった。


## 感想
素直に付いてきたものを使おう
C言語でヒープソート

# ヒープとは
- 半順序集合をツリーで表現したデータ構造
  - 「親ノードは子ノードよりも小さい（もしくは大きい）か等しい」という条件を満たすツリー構造
- 一般にヒープといったら**二分木**を意味する

![qiita-sort-1.png](https://qiita-image-store.s3.amazonaws.com/0/299208/9ac1aefa-ab62-57ee-6f6f-c1df87103a10.png)

#### 配列を使ったヒープの実現
インデックスを $1$ から開始すると、ノード $n$ の親ノードは $n/2$、子ノードは $2n$ と $2n+1$ でアクセスできる。
ただし、親ノードのインデックスを計算する除算は小数点以下切り捨て

![qiita-sort-2.png](https://qiita-image-store.s3.amazonaws.com/0/299208/3be2e678-2bc2-b1af-b937-200b1279a5b4.png)

※インデックスを$0$から開始すると、ノード $n$ の親ノードは $(n-1)/2$、子ノードは $2n+1$ と $2n+2$ 

# ヒープソートとは
1. 要素数 $N$ のヒープを、「子よりも親が大きい」として構築：根が最大値となる
2. 根を配列の最後尾と入れ替える。
3. $N-1$ 個の要素のヒープを構築しなおす：根が2番目に大きい値となる

    $\vdots$


#### ヒープの再構築
根を配列の後ろの要素と入れ替えた後は、先頭要素（根）を除いてヒープ構造ができている。
次の手順を、根ノードから開始
1. 大きいほうの子と比較
2. 親が大きければヒープ構築済み
3. 親が小さければ子と入れ替えて、さらに下の子と比較
 

自分より大きな子と入れ替えて、自身を下に下げながらヒープを構築する位置までおろしていく：pushdown操作

#### 配列全体のヒープ化
ヒープソートを行うには、配列がヒープ構造になっていることが前提

- 下から、ボトムアップ的にヒープ化する
- pushdown操作を使ってヒープ化できる
  - 要素 $N$ とすると、最初に $N/2$ (最後のノードの親)をヒープ化する
  - $N/2,N/2-1,N/2-2,\cdots,2,1$ の順にpushdownしていく 
 
# サンプルコード
ここでは、int型の配列を、ヒープソートを用いて小さい順に整列する。
※整列する部分は配列の添え字が**1から10まで**です。

```c:heap_sort.c
#include<stdio.h>

/* 値を入れ替える関数 */
void swap (int *x, int *y) {
  int temp;    // 値を一時保存する変数

  temp = *x;
  *x = *y;
  *y = temp;
}

/* pushdouwn操作 */
void pushdown (int array[], int first, int last) {
  int parent = first;   // 親
  int child = 2*parent;   // 左の子
  while (child <= last) {
    if ((child < last) && (array[child] < array[child+1])) {
       child++;   // 右の子の方が大きいとき、右の子を比較対象に設定
    }
    if (array[child] <= array[parent]) { break; }   // ヒープ済み
    swap(&array[child], &array[parent]);
    parent = child;
    child = 2* parent;
  }
}

/* ヒープソート */
void heap_sort (int array[], int array_size) {
  int i;

  for (i = array_size/2; i >= 1; i--) {
    pushdown(array, i, array_size);   // 全体をヒープ化
  }
  for (i = array_size; i >= 2; i--) {
    swap(&array[1], &array[i]);   // 最大のものを最後に
    pushdown(array, 1, i-1);   // ヒープ再構築
  }
}

int main (void) {
  int array[11] = { 0, 2, 1, 8, 5, 4, 7, 9, 10, 6, 3 };
  int i;

  printf("Before sort: ");
  for (i = 1; i < 11; i++) { printf("%d ", array[i]); }
  printf("\n");

  heap_sort(array, 10);

  printf("After sort: ");
  for (i = 1; i < 11; i++) { printf("%d ", array[i]); }
  printf("\n");

  return 0;
}
```

実行結果

```
Before sort: 2 1 8 5 4 7 9 10 6 3
After sort: 1 2 3 4 5 6 7 8 9 10
```

# 性能
- 先頭要素を取り出すだけで最大値を求めることができる
- 残った要素を再ヒープ化する必要がある
  - この計算量は$O(\log{n})$
- この操作を全要素に対して行うので、全体としての計算量は$O(n\log{n})$
- 作業領域を節約できるので、効率のいいソートが実現可能
  - 整列のための特別な作業領域を必要としない
  - [クイックソート](https://qiita.com/omu58n/items/7794f097b2c569a469bc)のような再帰処理を必要としない
音声認識プログラムの停止ができない。（WebSeechAPI）

下記のサンプルコードで、音声認識および停止のプログラムを作っていますが、音声認識の停止ができません。認識プログララムを、関数から呼び出す必要があり、引数によって、認識と停止を使い分けています。一度認識を呼び出すと、停止ができずに、認識を継続しておこなっているようです。強制的にでも、認識をストップし、停止を行うには、どうすればよろしいでしょうか？

■できること：音声の認識開始および、認識はできる。
■できないこと：音声の認識停止ができない。
（一度、recognition.start()を行っており、それを、永遠に関数で呼び出している為、どうも、recognition.stopを行っても、それが効いていないようです。）

■実行環境 https で動かしています。
■サンプルコード
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>test</title>

<script>
var flag_speech = 0;
var ketugou_part= "";

function vr_function(hantei) {

window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();
recognition.lang = 'ja';
recognition.interimResults = true;
recognition.continuous = true;

recognition.onsoundstart = function() {
document.getElementById('status').innerHTML = "認識中共通";
};

recognition.onnomatch = function() {
document.getElementById('status').innerHTML = "もう一度試してください共通";
};

if(hantei==1){    

recognition.onerror = function() {
document.getElementById('status').innerHTML = "エラー１";
if(flag_speech == 0)
vr_function(1);
};
recognition.onsoundend = function() {
document.getElementById('status').innerHTML = "停止中１";
vr_function(1);
};

flag_speech = 0;
document.getElementById('status').innerHTML = "start１";
recognition.start();
}

else if(hantei==0){
document.getElementById('status').innerHTML = "ストップ";
recognition.stop();
}

recognition.onresult = function(event) {
var results = event.results;
for (var i = event.resultIndex; i < results.length; i++) {
if (results[i].isFinal)
{
document.getElementById('result_text').innerHTML = results[i][0].transcript;
document.forms['form2'].elements['text'].value= results[i][0].transcript ;
vr_function(1);

}
else
{
document.getElementById('result_text').innerHTML = "[途中経過] " + results[i][0].transcript;
flag_speech = 1;
}
}
}
}

</script>     

</head>

<body>

<input type="button" onClick="vr_function(1);" value="音声認識開始"><br>
<input type="button" onClick="vr_function(0);" value="音声認識を停止"><br>

■状態<br><textarea id="status" cols="100" rows="1"></textarea><br>
■認識された文字<br>
<textarea id="result_text" cols="100" rows="10">
</textarea>
<form name="form2"><input type="hidden" name="text" value=""></form>    
<br>

</body>

</html>
vee-validate と bootstrap-vue を連携させてお手軽フォームバリデーションを実現する

https://github.com/mashiro/vee-bootstrap-example
[![Edit vee-bootstrap-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/094j04rop)

お手軽に使えて非常に便利な vee-validate の errors を指定する部分をコンポーネントに切り出してさらに簡単に扱えるようにする。
bootstrap-vue では form-validation の例として vuelidate があげられているが、 vee-validate のほうが使い方がシンプルで v-if で非表示にした要素は validation の対象にならないなど極めて直感的に扱えるのでこちらが個人的におすすめ。

```vue:MyFormGroup.vue
<template>
  <b-form-group
    v-bind="$attrs"
    v-on="$listeners"
    :invalidFeedback="invalidFeedback"
    :state="state"
  >
    <slot
      :$name="name"
      :$state="state"
    />
  </b-form-group>
</template>

<script>
export default {
  inject: ["$validator"],
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    errors() {
      return this.$validator.errors;
    },
    state() {
      return this.errors.has(this.name) ? false : null;
    },
    invalidFeedback() {
      return this.errors.first(this.name);
    }
  }
};
</script>
```

`b-form-group` には bootstrap の feedback を扱うための便利なプロパティがあるのでそこに vee-validate から取得した情報を設定してあげるような wrapper を用意してあげればいい。

`$validator` を inject することにより親コンポーネントの mixin で provide された validator インスタンスを得ることができるのでそこから errors を取得することによりバリデーションの状態を取得することができる。

errors からあるグループの状態を得るために名前が必要なため form-group に name プロパティを持たせている。
また、この name プロパティは子コンポーネントの from-input などでも同じものを用いるため scope で再利用できるようにしている。
state も入力コンポーネントの状態を変更するために必要なのでこちらも scope に渡す。

実際に使うとこの様になる。

```vue:Example.vue
<my-form-group name="email" label="Email">
  <template slot-scope="scope">
    <b-form-input
      type="email"
      :name="scope.$name"
      :state="scope.$state"
      v-model="form.email"
      v-validate="{ required: true, email: true }"
    />
  </template>
</my-form-group>
```

一般的な Vue のアプローチから外れず極めてシンプルに実現できたのではないでしょうか。


vee-validate の若干よろしくない点としては inject すると `errors`, `fields` というあきらかにぶつかりそうなフィールド名を使用するので設定でプリフィクスをつけるなどして変更しておくといい。
自動インジェクションも無駄な負荷につながるので無効でいいでしょう。

```javascript:app.js
Vue.use(VeeValidate, {
  inject: false,
  errorBagName: "vvErrors",
  fieldsBagName: "vvFields"
});
```
DOMの例→HTMLタグを動的に生成しデータベース上のデータを表示する

##はじめに
業務でHTMLタグを動的に生成しそこにデータベースのデータを渡して画面上に表示する方法を
	教えていただいたので自分用のメモと、記事を書く練習としてあげます。


##ソースコード
以下DOMを用いた例となります。
######HTML	
```html:display.html
<div class="content">
	<p id=displayTitle>
	タイトル
	</p>
	<div id="displayBox" class="displayBox">
	<!-- ここに動的に生成したpタグが入ります！ -->
	</div>
</div>
```
ここでは単純に動的に生成したpタグを入れるためのhtmlファイルを生成します。
\#displayBoxに表示したいものをjQueryで生成するためdivタグの中身は空です。
######jQueryにおける処理
```js:display.js

		$.ajax({
				type: "GET",
				url: '/xxx/display/displayReturn',
				dataType: 'json',
				//dataはサーバ-から受け取った変数
				success: function(data) {
				
			var contents = data;
				//displayBoxには画面上に表示するデータを格納する
				var $displayBox = $('#displayBox')
				//最後にまとめてdisplayBoxに要素を入れるために配列を作る
				var addItemList = [];
				
				//拡張for文で受け取ったデータを一つ一つ回す		
				contents.forEach(function(elem) {
				
					//pタグを定義し"{"以降で要素を入れていきます
					var $displayItem = $('<p/>', {
					
						//pタグ内で表示される文章を定義
						text : elem.displayText,
						
						//idを定義
						id    : elem.displaySeq + "d",
						
						//クラス名を付与
						class : "displayContent"
					})
					//生成したpタグに子要素をつける場合
					$displayItem.append ($('<span/>', {
						class : "children"
					}))
					//配列に格納します
					addItemList.push($helpItem) 
				});
				
			 	//画面に渡すための変数にまとめて格納
				$displayBox.append(addItemList)
		}

```

ここではajaxを用いてサーバーサイドと通信し取得したdata(引数)のプロパティを動的に生成したpタグの中にぶち込み表示するための処理を示しております。
displayTextにはサーバーサイドでデータベースから取得してきたhtmlで表示するための文章が、displaySeqにはデータベースから取得してきたレコードの連番が入るイメージですね、生成したタグにそれぞれ別のidを付与するために利用します！
例　id="1d"
dはdisplayの頭文字です（笑）

またpタグの下にappendを用いることで子要素としてspanタグ等を作ることもできます。参考のため載せました。ここにFont Awesomeのクラスを付けてあげればアイコン等をそれぞれのpタグに付与してあげることができますね～！

######javaの処理(サーバーサイドの処理）

```html:displayAction.java
		public List<JsonData> displayReturn() {

		//DBから表示したいデータを取得する
		List<ContentEntity>contents =new ArrayList<ContentEntity>();
		contents = displayService.getContents();
		//ここでcontentsにはプロパティとしてString型のdisplayText(pタグで表示する文章）とlong型のdisplaySeqを持つcontent型のインスタンスが複数入る
		
		//jsonとして渡す用のリスト
		List<JsonData> jsonDataList = new ArrayList<>();
		
		for (ContentEntity entity : contents) {
			//json変換用メソッドに値を入れていく
			JsonData jsondata = createJsonData(entity.getDisplayText(),entity.getDisplaySeq());
			//生成したjsonデータをリストに入れる
			jsonDataList.add(jsonData);
		}

		return jsonDataList;
	}
```

最後にjavaの処理です。順序的にはhtml→jsの非同期通信（successより上の部分)
→javaの処理→jsのDOMの生成となります。javaの部分は重要度が高くないため一番最後に載せました。	action→service→dao→データベースと処理は続きますがここではaction部分のみの掲載です。またprivateメソッドとしてjsondataに変換するためのメソッドがありますが割愛します（笑）

##おわりに
DOM要素の生成は最初は難しく感じますが作ってみるとすぐにイメージがつくため参考にしてみてください！
見てくださってありがとうございました！！