OmniAICreator/Qiita-1.07M huggingface dataset:
My Xcode Key Bindings

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>Cut Lines</key>
	<string>selectParagraph:, copy:, deleteBackward:, insertTab:, deleteBackward:</string>
	<key>Move to Beginning of Paragraph Respecting Indent</key>
	<string>moveToBeginningOfParagraph:, insertTab:, deleteBackward:</string>
	<key>Insert Line Below</key>
	<string>moveToEndOfParagraph:, insertNewline:</string>
	<key>Insert Line Up</key>
	<string>moveUp:, moveToEndOfParagraph:, insertNewline:</string>
	<key>Paste Lines Below</key>
	<string>moveToEndOfParagraph:, insertNewline:, paste:, deleteBackward:</string>
	<key>Paste Lines Above</key>
	<string>moveUp:, moveToEndOfParagraph:, insertNewline:, paste:, deleteBackward:</string>
	<key>Copy Lines</key>
	<string>selectParagraph:, copy:, moveForward:, moveBackward:</string>
</dict>
</plist>
```
onSaveInstanceState()と回転問題

#onSaveInstanceState()
onSaveInstanceState()をoverrideして実装することで、インスタンスの状態を保存することができます。
このメソッドはonStop()の前に呼ばれます。

###メモリの破棄
Activityのライフサイクル上、**onDestroy()**が呼ばれると全てのリソースが開放され、メモリも破棄されてしまいます。
そのため、改めてActivityを生成しても以前の状態は保持できません。

###情報の保存
以前の状態を保つために、**Bundle**オブジェクトに必要なデータを保存しておき、Activityが再び生成される際に、そのデータを取り出すことができます。


##使い方
###onSaveInstanceState()
```kotlin
companion object {
   const val STATE_INDEX = "index"
}

override fun onSaveInstanceState(outState: Bundle?) {
    outState?.putInt(STATE_INDEX, 1)
    super.onSaveInstanceState(outState)
}
```
Key-Valueの構造になっている**Bundle**に保存することができます。
ここではInt型のものを保存しています。
ただしValueの型の種類には制限があり、基本的なものしか適応できません。

###onCreate()
```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    Log.d("LifecycleActivity", "onCreate(Bundle) called")
    if (savedInstanceState != null) {
        Log.d("LifecycleActivity", savedInstanceState.getInt(STATE_INDEX).toString())
    }
    setContentView(R.layout.activity_lifecycle)
}
```
**onCreate()**で**savedInstanceState**から保存したデータを取り出すことができます。

```
D/LifecycleActivity: onCreate(Bundle) called
D/LifecycleActivity: 1
```
ただしsavedInstanceStateに何も入っていない場合はnullであるため、取り出し方には注意してください。


#回転問題
スマートフォンを傾けたときに、画面を回転させることができます。
そのときのActivityは実は一度破棄されて、再生成されています。

```kotlin:画面が回転したとき
D/LifecycleActivity: onPause() called
D/LifecycleActivity: onStop() called
D/LifecycleActivity: onDestroy() called
D/LifecycleActivity: onCreate(Bundle) called
D/LifecycleActivity: onStart() called
D/LifecycleActivity: onResume() called
```
そのため、画面が回転したときも状態を残しておけるように、**onSaveInstanceState()**メソッドを活用する必要がでてきます。

#その他
Activityが明示的に破棄されずとも、停止状態や一時停止状態の時でも、OSの判断によりメモリが破棄されることがあります。
そのときも残しておきたい情報は保存しておくことが必要です。

#参考文献
[Understand the Activity Lifecycle](https://developer.android.com/guide/components/activities/activity-lifecycle#instance-state)
[Android Programming: The Big Nerd Ranch Guide (3rd Edition) (Big Nerd Ranch Guides)](https://amzn.to/2K8OlO7)
Glideで画面のリロードをさせるための対策

Glide、とても便利なんですが、スプレッドシートの変更を画面に反映させるのに、少しタイムラグがあります。場合によっては数分かかることも。

アプリ側からデータを書き換えることもできるので、それが反映するのに時間かかかるのはちょっといだけません。

試しに、レストランの予約を管理するアプリを作ってみたのですが、反映のタイムラグがあるために、思ったような動作をさせることができませんでした。

##switchをリロードボタンとして使う

そういう場合は、とりあえずスイッチ・コンポーネントをリロードに使うことができます。

スイッチ・コンポーネントは、フィールドにチェックボックスを付けるものですが、動作には強制リフレッシュを伴うので、リロードの代わりに使うことができます。

![Glide – amazing apps without code 2019-06-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/177922c0-6669-bd12-d99d-f426b3b59fa5.png)

スイッチは書き換えを伴うので、スプレッドシートには専用の項目を用意しておきコンポーネントに割り当てます。

![スクリーンショット 2019-06-08 9.37.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1513/18f28acd-a08a-5056-4553-2ce502d160f6.png)

画面をリロードしたいときには、スイッチをオン・オフしてやればリロードされます。

あんまり良い方法ではないですが、とりあえずリロードが必要な場合には使えます。

##改良の提案
これでは操作性が悪いので、ボタン・コンポーネントにリロード機能を付けてもらえるように要望は出してみましたが、現状では解決していません。

## 関連ドキュメント
・[流行りのGlideでプログレアプリ(PWA)してみた](https://qiita.com/kinneko/items/548597770d93aa17c6cf)
・[プログレアプリGlideappsにchoice機能が追加されたので使ってみました](https://qiita.com/kinneko/items/99a67faa231226335ba6)
・[Glideappにコメント/チャットのメッセージ追加を通知する機能が付いたので試してみた](https://qiita.com/kinneko/items/654c2a1e6e13d9c9592c)
・[Glideappsでfav機能が評価中なので試してみた(リリースされました)](https://qiita.com/kinneko/items/d4fae3ae26d358b130ba)
・[「5分で作れる！Glideappsではじめる超簡単PWA」セッションで利用する予定のデモ動画とプレゼン資料](https://qiita.com/kinneko/items/2d15a7cb87cb17a483a7)
・[Glideで画像アップロードの機能のテストが開始されました](https://qiita.com/kinneko/items/6831572cf3cf12a4a4e3)
・[Glideのリスト表示で地図と連携表示する機能のテストが開始されました](https://qiita.com/kinneko/items/79e84181ab7c0bcef88d)
・[Glideで画面のリロードをさせるための対策](https://qiita.com/kinneko/items/dec896995aca30b91ec6)
Androidデバイス上でNode-REDを実行する

　Node-REDについて調べていた時にAndroid上で実行できることを知りました。
こちらのサイトに導入方法の説明があります。
　Node-RED日本ユーザ会
　https://nodered.jp/docs/platforms/android

　この記事では、導入してみて公式サイトに情報がなかったことを記載しています。

#　導入
　playストアから 「Termux」というアプリをインストールします。
このアプリはroot権限なしでlinuxのコマンドが使えるようにするものらしいです。

playストア Termux
https://play.google.com/store/apps/details?id=com.termux&hl=ja

…追記
Termuxのキーボードは使い勝手が悪いので、
「Hacker's Keyboard」というアプリを使い始めました。
…

　Termuxを起動し、以下のコマンドを実行します。

```
apt update
apt upgrade
apt install coreutils nano nodejs
npm i -g --unsafe-perm node-red
node-red
```

 ↓Termux上でNode-REDを起動した様子です。

<img width="270" alt="Screenshot_20190608-084851_Termux.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/5bce7b80-27ed-7f43-174b-8864ab1d49a9.jpeg">

　ブラウザを開き、localhost:1880にアクセスするとNode-REDのエディタが表示されます。
↓
<img width="270" alt="Screenshot_20190608-084952_Internet.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/b5a10eb6-ed9b-9f1d-4a13-a19920469247.jpeg">

　Node-REDを停止するときは、Termuxのキーボードで 「CTRL」を押して「c」を入力しEnter。

 Termuxを終了するには"exit"と入力します。

# 気になったこと
　Node-REDをPC(windows)にインストールすると、デフォルトパスが

```
C:/Users/usename/.node-red
```

になると思います。termuxでは次のパスになるようです。

```
/data/data/com.termux/files/home/.node-red
```
windows 10でキーシーケンスの変更をし，Ctrl+Shiftによる割当を解除する

[sublimeで連番](https://qiita.com/keitasumiya/items/d61dcd7feae4917c716c)を打つなどの際に，windowsのCtrl+Shiftの割当を解除したいことがある．しかし，ネットで検索してもなぜか同じ手順でキーシーケンスの変更までたどり着けなかったので，備忘録して下記に記す．

基本的には下記の手順をたどるのみ．

Windowsの設定を開き，デバイスをクリック
![スクリーンショット 2019-06-08 08.38.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102253/341e51ea-e97e-d7fb-b030-720bfa995594.png)


入力をクリック
![スクリーンショット 2019-06-08 08.38.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102253/e771b2ee-0769-2069-f32a-32641c3acde6.jpeg)


キーボードの詳細設定をクリック
![スクリーンショット 2019-06-08 08.38.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102253/65da926e-89ea-ed27-281e-533c88c79ac2.png)


言語バーのオプションをクリック
![スクリーンショット 2019-06-08 08.38.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102253/e0250781-5fe9-17dc-a370-e68f983c3d5a.png)


キーの詳細設定タブのキーシーケンスの変更をクリック
![スクリーンショット 2019-06-08 08.38.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102253/f78c4c60-f46a-3ac0-35b1-977bcc527410.png)


両方とも割り当てなしにしてOKをクリック
![スクリーンショット 2019-06-08 08.38.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102253/3cfece00-27e6-e6a1-3ec4-1cbe5065efda.png)


適用をクリック
![スクリーンショット 2019-06-08 08.39.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102253/330a9b3b-d238-16ae-174c-1807298e18fb.png)


以上です．
AWS Cloud9でmysql2がインストールできなかった時の対応方法

#概要

AWS Cloud9でmysql２をインストールするときにエラーでつまずきました。同じエラー内容でつまずいた方の参考になればうれしいのと、自分が同じ失敗をくりかえさないために今回投稿いたしました。

#AWS Cloud9にて新規作成
mysqlを指定して新規作成。

```
rails new hello_sample -d mysql
```

#エラー発生
```ruby
An error occurred while installing mysql2 (0.4.10), and Bundler cannot
continue.
Make sure that `gem install mysql2 -v '0.4.10' --source
'https://rubygems.org/'` succeeds before bundling.
```
まずエラーコードのコマンドを試す。

```ruby
gem install mysql2 -v '0.4.10
```

その後、`bundle install`するもエラー内容変わらず。
#対応方法
エラーコード内容を再度ゆっくり見ていくと、赤字エラーコード以外の箇所に、`mysql-devel`をインストールして、再度試すと記載がある。

```ruby
mysql.h is missing. You may need to 'apt-get install libmysqlclient-dev' or
'yum install mysql-devel', and try again.
```

`mysql devel`をインストールする。

```ruby
$sudo yum install -y mysql-devel
#...成功！
```

`bundle install`をする。

```ruby
$bundle install

Installing mysql2 0.4.10 with native extensions
#...成功！
```
成功！

（参考URL：https://qiita.com/emahiro/items/1a63d676be9fc4975759)

次にデータベースを作成する。

```ruby
$ bundle exec rake db:create
```

#２度目のエラー　→　再度対応

もう大丈夫かと思ったら...
socketファイルがない、という２度目のエラー発生。

```ruby
Error: Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)>
```
mysqlを再起動することで、`/var/lib/mysql/mysql.sock`が自動作成されるというので、試す。

```ruby
$ sudo /etc/init.d/mysqld restart
#...OK！
```
成功！
（参考URL：https://qiita.com/kanohisa/items/564035efd74d9c75bdcb)

再度、データベース作成。

```ruby
$ bundle exec rake db:create
Created database 'hello_sample_development'
Created database 'hello_sample_test'
```
今度は成功！

次にmysqlが起動するか確認。

```ruby
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 2
Server version: 5.5.62 MySQL Community Server (GPL)

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> 
```
大丈夫な様子。データベースも作成されているか確認。

```ruby
show databases;
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| test               |
+--------------------+
2 rows in set (0.00 sec)
```

１度mysqlを`exit`で閉じて、`rails s`で、ちゃんと起動するか立ち上げてみる。


###**Yay! You’re on Rails!**

**解決！**

#まとめ
以上、AWS Cloud9でmysql2がインストールできなかった時の対応方法でした！
エラーコード内容は赤字のみならず、他の箇所も確認することで、エラー解決への道が開ける。むしろ当たり前のことなのかもしれないが、かなり大切ということを認識しました！
同じエラー内容でつまずいた方の参考になればうれしい限りです！
FirebaseでAngularプロジェクトを5分で公開する


# Firebaseでプロジェクトを作成する

- Firebseコンソールで`新しいプロジェクト`を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/94b09e09-02f8-ebf0-bf99-d31420c6e826.png)

- プロジェクト名を入力します
- サンプルプロジェクトなのでリージョン等はデフォルトのままです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/60c9908a-8a5f-edcf-83ce-6e82a2d8aa81.png)

- プロジェクトが作成されました。
    - 今回はHostingを利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/1b666bf4-9191-4546-9650-d67f34c1b5f9.png)


# Angularプロジェクトの作成

## Angularバージョン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/9e37589d-4e5b-2d55-9e5e-1ababd1c5003.png)

## テンプレート生成

以下のコマンドでAngularのテンプレートを生成します

```
ng new angular-sample
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/0ce35708-45e6-b779-d201-2f546597b588.png)

## ビルド

FirebaseHostingではTypescriptはうごかせないので、ビルドしてHtmlとJavascriptを生成しておきます。

```
ng build
```

# AngularプロジェクトとFirebaseの紐づけ

## Firebase CLIバージョン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/79f3b446-2677-b6b0-82dc-38b0aee7ae6e.png)


## 初期化

以下のコマンドで対話形式に設定を行っていきます。  

```
firebase init
```

※重要なところだけ抜粋します


- 利用するサービスは「Hosting」を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/0075784c-5280-bd8a-5ff7-a48e7f7a7cff.png)

- プロジェクトはFirebase側で作成したプロジェクトを指定  
※もし聞かれない場合は初期化完了後に`firebase use --add {プロジェクトID}`で切り替えられます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/77b47beb-f3bc-dbdf-f3fa-af1c32e5e2b8.png)
※GitBashだとカーソルが動かないため注意


- 公開ディレクトリは`dist/angular-sample`
    - ビルドの出力先はangular.jsonで確認する
- index.htmlのままで良いので`rewrite～`はNo
- dist/aungular-sample/index.htmlを上書きして良いか？はNo

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/1aa2f286-a23b-6975-e40e-bab53e7e5306.png)


- 初期化完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/f10cbd23-1567-67c8-d4d6-cdc42030af47.png)





# Firebaseで公開

## デプロイ
以下のコマンドを実行するだけ

```
firebase deploy
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/826b2ebd-9fb6-17fe-5fd4-88da240f7472.png)


## ブラウザでアクセス
デプロイ時に表示された`Hosting URL`にアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/0b2895b1-d1db-245e-2f23-b6f3039c4695.png)


# 最後に
Firebaseを使うと簡単にAngularプロジェクトが公開出来ちゃいます！
Hostingは静的なプロジェクトしか動かせないので、MEANスタックを動かしたいといった場合はHeroku等のNode.jsを動かせるPaaSを利用する必要があります。

ただ、Firebase自体がBaaSとして優秀なので、CloudFunctionsやFirestoreなどを使ってサーバーレスな構成にしてしまえば、Firebase＋Angularで十分なシステムが開発できるかと思います:grin:
platformioでezusb

PlatformIOに8051なターゲットがあり日本ではあまり馴染みがないマイコンチップなのですが、toolchainがsdccのようなので、EZ-USBのビルドを試してみました。

とりあえず.platformio/boards/にezusb.jsonを作ります。

```json
{
  "platform": "intel_mcs51",
  "build": {
    "core": "ezusb",
    "f_cpu": "24000000L",
    "size_heap": 256,
    "size_iram": 256,
    "size_xram": 256,
    "size_code": 4096,
    "mcu": "AN2121SC",
    "cpu": "mcs51",
    "variant": "ezusb"
  },
  "frameworks": [],
  "upload": {
    "maximum_ram_size": 512,
    "maximum_size": 4096
  },
  "name": "EZ USB",
  "url": "https://www.cypress.com",
  "vendor": "Cypress"
}
```

```
% pio init --board=ezusb
```

これでraktajinoさんの[ページ](http://raktajino.sakura.ne.jp/EZ-USB/EZUSBintro.html)にあったLチカのコードをコンパイルしてみます。こちらのコードはsdcc2の頃のコードでsdcc3ではatを__atのように変更が必要です。他には修正は必要ありませんでした。

pio runでビルドして、[Ezload](https://github.com/yamori813/Ezloader_OSX)でダウンロードしてみます。

```
% Ezload -v 0x0547 -p 0x2131 -f .pioenvs/ezusb/firmware.hex 
```

Lチカできました。

EZ-USBを使ったモジュールでI2CのEEPROMからプログラムをロードしていても、EEPROMを外すとUSBで生のEZ-USBが見えるようになります。

追記

TIのTUSB3410は8052で同じようにプログラムをUSBでダウンロードして使うタイプのチップでした。このチップはCDCを主なターゲットにしたデバイスのようです。ダウンロードするプログラムのコードとダウンロード用のコマンドのソースはここにありました。

https://github.com/shkmr/dfw

platformioがサポートしているSTCのマイコンはaitendoで取り扱ってました。

とはいえ8051はいろいろなジャンクに張り付いているので、おそらく買うことはないでしょう。
Python入門　モジュール

# モジュール
モジュールとは、関数やクラス定義を一つのファイルにまとめたものです。

## モジュールの使い方
例えば、次のように二つの関数が書かれたファイルを作成して、ファイル名を`calculation.py` とします。

```python:calculation.py
def linear(x):
    for i in range(10):
        y = 2*x
        print(y)
        x += 1
        i += 1

def squared(x):
    for i in range(10):
        y = x**2
        print(y)
        x += 1
        i += 1
```

先ほど書いたモジュールを使用するときは、`import ファイル名` という感じで、他のコードから参照することができます。

```python
import calculation
```

インポートしたモジュールは、```ファイル名.定義(引数)``` というように書くと参照したコード内で実行することができます。

```python
calculation.linear(1)
```
```:実行結果
2
4
6
8
10
12
14
16
18
20
```
一度インポートしたら、別の定義も使用することができます。

```python
calculation.squared(1)
```
```:実行結果
1
4
9
16
25
36
49
64
81
100
```

## モジュール内で定義されている名前の取り込み
```from モジュール名 import 定義1,定義2,…``` というように書くと、モジュールを使用するときは定義名だけで実行することができるようになります。

```python
from calculation import linear, squared
```

この場合は、```linear(引数)``` という定義を別のコード内で実行しています。

```python
linear(2)
```
```:実行結果
4
6
8
10
12
14
16
18
20
22
```

```squared(引数)``` も先ほど読み込んでいたので使用することができます。

```python
squared(2)
```
```:実行結果
4
9
16
25
36
49
64
81
100
121
```

## モジュール内で定義されている名前を全て取り込み
先ほどと同じ書き方で```*``` を書くと、モジュール内にあるすべての定義名を使用することができるようになります。

```python
from calculation import *
```
```python
squared(5)
```
```:実行結果
25
36
49
64
81
100
121
144
169
196
```

## モジュール名を変更
インポートしたモジュール名は```import モジュール as モジュール名``` という書き方でコード内で使用する際のモジュール名を変更することができます。長いモジュール名の場合、短くしておくとコードを書きやすくすることができます。

```python
import calculation as cal
```
```python
cal.squared(10)
```
```:実行結果
100
121
144
169
196
225
256
289
324
361
```

## スプリクトとしての利用方法
スクリプトとは、コマンドライン上で、モジュールを実行させることを言います。基本的には、先ほど書いたモジュールに以下のように、```if __name__ == '__main__':```と、実行したい関数を記述することでスクリプトとして使用することができます。

```python:calculation02.py
def linear(x):
    for i in range(10):
        y = 2*x
        print(y)
        x += 1
        i += 1

def squared(x):
    for i in range(10):
        y = x**2
        print(y)
        x += 1
        i += 1

if __name__ == '__main__':
    import sys
    linear(int(sys.argv[1]))
```
スクリプトを使用するときは、コマンドラインで、```python スクリプト 引数```で実行することができます。

```
python calculation02.py 10
```
```:実行結果
20
22
24
26
28
30
32
34
36
38
```
## モジュール検索パスの確認
pprintを使用すると、インポートしたモジュールがどの位置（パス）にあるかを調べることができます。

```python
import calculation
import pprint

pprint.pprint(calculation)
```
```:実行結果
<module 'calculation' from '/Users/ユーザー名/jupyter/calculation.py'>
```

## dir()関数
dir()は、インポートしたモジュールにどんな名前の定義があるかを調べることができます。

```python
import calculation
dir(calculation)
```
```:実行結果
['__builtins__',
 '__cached__',
 '__doc__',
 '__file__',
 '__loader__',
 '__name__',
 '__package__',
 '__spec__',
 'linear',
 'squared']
```

## パッケージ
パッケージとは、複数のモジュールを参照できるようにしたフォルダのことです。パッケージは以下のように```__init__.py```を含んだフォルダになっていて、複数のモジュールを入れておくことで、パッケージとして参照することができます。

```
calculation_package
├── __init__.py
├── __pycache__
│   ├── __init__.cpython-36.pyc
│   └── calculation.cpython-36.pyc
└── calculation.py
```
パッケージを使用するときは、```from パッケージ名 import モジュール名```で使用することができます。

```python
from calculation_package import calculation
```
```:実行結果
calculation.linear(1)
```
SwiftUIに向けて、サボり気味だったKeyPathのキャッチアップ

SwiftUIではKeyPathが当たり前のように使われています。
中身を理解するのに、サボっていたKeyPathのキャッチアップをする必要が出てしまったのでやっていきます。

こちらの記事がわかり易かったので、ベース同じコードを引用させて頂いております。
https://qiita.com/BlueEventHorizon/items/dee0eb27fbba83ed8ea9

# ソートを例にしたコード
```swift:KeyPathの便利さがめっちゃわかる.swift
import Foundation

enum SortOrder {
    case ascending
    case descending
}

extension Sequence {
    
    func sorted<T: Comparable>(by keyPath: KeyPath<Element, T>, order: SortOrder = .ascending) -> [Element] {
        return sorted { a, b in
            switch order {
            case .ascending:
                return a[keyPath: keyPath] < b[keyPath: keyPath]
            case .descending:
                return a[keyPath: keyPath] > b[keyPath: keyPath]
            }
        }
    }
    
}

struct User {
    var name: Name
    
    struct Name {
        var first: String
        var last: String
    }
}

let person1 = User(name: .init(first: "Yoshiharu", last: "Yamada"))
let person2 = User(name: .init(first: "Masahiro", last: "Tanaka"))

let people = [person1, person2]
let results = people.sorted(by: \.name.first)

```

# KeyPathが便利となる動機
もしKeyPathがなかったらこのような処理が必要になります。

```swift:もしkeyPathがなかったら.swift
let people = [person1, person2]
let results = people.sorted { $0.name.first < $1.name.first }
```

たとえば、name.firstというキーで比較をしてほしい意図は明確なのに、クロージャを作らないといけませんし、同じプロパティのキーを2度書かないといけないのは面倒です。

これを一度指定すればいいようにできるのが、keyPathです。

sortedに対してkeypath指定をすればいいので

```swift:keyPath便利.swift
let results = people.sorted(by: \.name.first)
// let results = people.sorted(by: \User.name.first)　でも可能
```

のように書けます。ファンタスティック！

# KeyPathとは
```swift:KeyPath.swift
class KeyPath<Root, Value> : PartialKeyPath<Root>
```
で宣言されています。
今回は、`KeyPath<User, String>` となっています。

# インスタンスにkeyPath経由でアクセス
```swift:sorted.swift
case .ascending:
    return a[keyPath: keyPath] < b[keyPath: keyPath]
```
上記のような辞書形式でアクセスします。キーは `keyPath` でないといけません。

# 感想
あるキーをつかって比較をする。のような場面ではわかりやすく便利になるのが分かりました。

SwiftUI楽しみですね！
Reactでドラッグ＆ドロップで並び替えしたいときのライブラリ比較

Reactでドラッグ&ドロップで並び替えをしたくなったので、ちょっと調べてみました。
以下、そのまとめです。

# ざっくり検索で人気どころ探し
* [GitHub/「react drag」で検索](https://github.com/search?o=desc&q=react%20drag&s=stars&type=Repositories)
* [npm/「react drag」で検索](https://www.npmjs.com/search?q=react%20drag&ranking=popularity)

`react-dnd`, `react-beautiful-dnd`, `react-dropzone`, `sortablejs`, `react-draggable`が人気あるようなので、以下、その辺で比較

# [Google Trendsで比較](https://trends.google.co.jp/trends/explore?q=react-dnd,react-beautiful-dnd,react-dropzone,sortablejs,react-draggable)

# [npm trendsで比較](https://www.npmtrends.com/react-dnd-vs-react-beautiful-dnd-vs-react-dropzone-vs-sortablejs-vs-react-draggable)

# はてなブックマークタイトル検索(3user以上)比較
||react-dnd|react-beautiful-dnd|react-dropzone|sortablejs|react-draggable|
|:--:|:--:|:--:|:--:|:--:|:--:|
|件数|10|3|3|1|1|
|ブックマーク数<br>(１位)|21|22|8|21|4|
|ブックマーク数<br>(５位)|8|-|-|-|-|
2019/06/08 時点
 
# Qiitaタイトル検索比較
||react-dnd|react-beautiful-dnd|react-dropzone|sortablejs|react-draggable|
|:--:|:--:|:--:|:--:|:--:|:--:|
|件数|11|2|-|-|-|
|いいね数<br>(１位)|130|5|-|-|-|
|いいね数<br>(５位)|3|-|-|-|-|
2019/06/08 時点

# stack overflowタグ比較
||react-dnd|react-beautiful-dnd|react-dropzone|sortablejs|react-draggable|
|:--:|:--:|:--:|:--:|:--:|:--:|
|件数|199|26|101|35|-|
|投票数<br>(１位)|17|2|4|4|-|
|投票数<br>(５位)|12|0|3|1|-|
2019/06/08 時点

# まとめ
`react-dnd`が人気度が高く、情報量も多そうです。npm trendsでの比較だけ３番手くらいでしたが、他の比較では全てトップだったので、とりあえず`react-dnd`を試してみるのが無難そうです。

# 参考ページ
* [m.Search](https://research.app.wlatry.com/)
    * 比較検索に使った検索サイト
WEBアプリケーションの開発環境を構築したよ

みなさまはじめして。

WEBアプリケーションでよく使われている言語(PHPやRuby)について学ぶため
に開発環境を構築しました。

## 要件として
- Windows 10 home 64bit上で開発を行うため素早くテストできること
- できる限り手軽に導入できること

を元に調べてみると、XAMPPという「Apache」「MySQL」「PHP」を手軽に導入できるソフトがあるようなので、これを導入しました。
## XAMPPのダウンロードとインストール
公式サイトのダウンロードページ（https://www.apachefriends.org/jp/download.html）
よりダウンロードを行いました。

ダウンロードしたファイルはPHPバージョンが7.1.29のxampp-windows-x64-7.1.29-1-VC14-installer.exeです。

インストール時はデフォルトでCドライブのルートが指定されていますが、
容量に不安があったためDドライブに変更しました。

## PHPの導入
このままの状態だとバージョン7.1.29がデフォルトで使用されますが、TheManishさんの記事

Run multiple version of PHP in XAMPP Windows (Without installing multiple XAMPP)
https://themanish.com/run-multiple-version-of-php-in-xampp-windows-without-installing-multiple-xampp/

のようにphp.iniやhttpd-xampp.confの設定を工夫すれば他バージョンでの動作も確認できるようです。

古いバージョンのXamppからPHPを取り出すため以下から入手します。

https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/5.6.40/

以下のファイルをダウンロード、解凍してphpフォルダのみ取り出します。
xampp-windows-x64-5.6.40-1-VC11.zip

設定できるとlocalhost:8056とポートを指定する、特定フォルダに置くことで5系での動作を確認することができます。

## Rubyの導入
XAMPPのみだとPHPのみ導入するため、Rubyを個別に導入します。

RubyInstallerのダウンロードページ
https://rubyinstaller.org/downloads/

Other Useful Downloads項目7-ZIP ARCHIVES以下にある7zファイル
rubyinstaller-2.6.3-1-x64.7zをダウンロード、解凍して設置、binフォルダ内のsetrbvars.cmdを実行するとpathが設定できました。

これで開発環境が構築できました。


## 参考サイト
- Run multiple version of PHP in XAMPP Windows (Without installing multiple XAMPP)
https://themanish.com/run-multiple-version-of-php-in-xampp-windows-without-installing-multiple-xampp/
- Camera Obscura - XAMPP で Rubyスクリプトを動かす
http://obelisk.hatenablog.com/entry/2015/04/30/230730
localhost にアクセスできない【docker toolbox】

よく忘れて時間を溶かすのでメモ。

## アクセスできない理由

よくある docker 解説ページでは、ブラウザから`http://localhost:8080`にアクセスすると、コンテナのサービスが利用できるとあります。

ただし、docker toolbox は Virtualbox 由来の環境であるため、`http://localhost:8080`にアクセスしても hosts ファイルに設定をしない限りコンテナに到達できません。
（localhost = ホストPC ≠ docker toolbox の仮想マシン）


そこで、

```http
http://192.168.99.100:8080
```

にアクセスすると、Virtualbox (= docker toolbox) 内のコンテナにアクセスできます。

これは、Virtualbox の default 仮想マシン内にすべてのコンテナを作成し、管理するという docker toolbox のつくりに由来すると思われます[要出典]。

## 包含関係のイメージ

```
ホスト側ブラウザ
　　↓
仮想マシン「default」(192.168.99.100)
　　↓
コンテナ (8080 ポート)
```
drop_cachesまでのパスが覚えられないので/sbinにつっこむ

ええと、drop_caches..なんだっけとなるので
スクリプトにしちゃえばいいよね。


```sh:/sbin/drop_caches
#!/bin/sh

if [ $# -ne 1 ]; then
        echo "missing 1 required positional argument"
        exit 1
fi

sync
echo $1 > /proc/sys/vm/drop_caches
```

```
# chmod +x /sbin/drop_caches
```

# 使い方

```
# drop_caches 3
```
G検定に向けて。

#はじめに。
G検定に向けて勉強した情報を記載する。
読んだ参考書等の情報など。」

##人工知能は人間を超えるか /松尾 豊 (著)

#【序章 広がる人工知能 ー人工知能は人類を滅ぼすか】 

コンピューター将棋プログラム
・ボンクラーズ

クイズ人工知能
・ワトソン (IBM)
 ⇒エキスパートシステム

広告技術
・アドテクノロジー
 ⇒Wedページのどの場所に広告を載せれば、最もユーザーがクリックしてくれるか計算する。

・シンギュラリティ(技術的特異点)
 ⇒人工知能が自分よりも賢い人工知能を作ることができるようになる瞬間
・レイ・カーツワイル 
 ⇒2045年頃到達すると述べた。
・スティーブン・ホーキング
 ⇒「完全な人工知能を開発できたら、それは人類の終焉を意味するかもしれない」
・イエロー・マスク
 ⇒「人工知能にはかなり慎重に取り組む必要がある。結果的に悪魔を呼び出していることになるからだ。」
・ビル・ゲイツ
 ⇒「私も人工知能に懸念を抱く側にいる一人だ」

#【第１章 人工知能とは何か ー専門家と世間の認識のズレ】
LDAP初心者がOpenLDAP起動させてみた

CentOS7 で OpenLDAP を使ってみようと思いましたが、なぜだかプロセスが起動しないので下記の環境で始めました。

CentOS release 6.10 (Final)
slapd 2.4.40

[こちら](https://www.unix-power.net/networking/post-587) をもとにインストール＆設定開始。

まずは既存のパッケージを確認。

> <font color="Blue">\# rpm -qa | grep openldap</font>
> openldap-2.4.40-16.el6.x86_64
> \#

本体インストール済みだったので server と client をインストール。

> \# <font color="Blue">yum install openldap-servers openldap-clients</font>
> \# <font color="Blue">rpm -qa | grep openldap</font>
> openldap-2.4.40-16.el6.x86_64
> openldap-servers-2.4.40-16.el6.x86_64
> openldap-clients-2.4.40-16.el6.x86_64
> \#



インストールは完了したので初期セットアップ開始。まずはパスワード設定から。

> \# <font color="Blue">slappasswd</font>
> New password:
> Re-enter new password:
> {SSHA}................................
> \# <font color="Blue">vi /etc/openldap/slapd.d/cn=config/olcDatabase={0}config.ldif</font>
> olcRootDN: cn=config
> <b>olcRootPW: {SSHA}................................</b>
> olcSyncUseSubentry: FALSE
> \# 

太字の部分を追記しました。

そしてデータベースチューニング設定。

> \# <font color="Blue">cp /usr/share/openldap-servers/DB_CONFIG.example /var/lib/ldap/DB_CONFIG</font>
> \#

コピーするだけ。

プロセスを起動。

> \# <font color="Blue">/etc/rc.d/init.d/slapd start</font>
> <b>slapd の設定ファイルをチェック中:                          [警告]
> 5cf801eb ldif_read_file: checksum error on "/etc/openldap/slapd.d/cn=config/olcDatabase={0}config.ldif" </b>
> config file testing succeeded
> slapd を起動中:                                            [  OK  ]
> \#

起動しましたがなんかへんなメッセージが。

確認したところ、/etc/openldap/slapd.d/cn=config/olcDatabase={0}config.ldif の 2 行目はいらないらしい。

> \# <font color="Blue">head olcDatabase={0}config.ldif</font>
> \# AUTO-GENERATED FILE - DO NOT EDIT!! Use ldapmodify.
> <b>\# CRC32 5cf93706</b>
> dn: olcDatabase={0}config
> objectClass: olcDatabaseConfig
> olcDatabase: {0}config

太字の部分を削除して再起動。

> \# <font color="Blue">/etc/rc.d/init.d/slapd restart</font>
> slapd を停止中:                                            [  OK  ]
> slapd を起動中:                                            [  OK  ]
> \#

メッセージが出力されず正常に起動。

以上。
パラメータ設定が不適切だと、ruby-oci8 より go-oci8 の方が遅くなることもあるので要注意

（この記事は [地平線に行く](https://yujisoftware.hatenablog.com/entry/2019/06/08/031633) とのマルチポストです）

こんな感じの単純な SQL を Ruby と Go それぞれで流したら、なぜか Go の方が遅くなりました。
特に `text` が長いと遅い…。

```sql
SELECT
  id
  , text
FROM
  example
```

使っているライブラリは、**ruby-oci8**, **go-oci8**。

# 原因

原因は、それぞれのライブラリのパラメータのデフォルト値が異なるためでした。

|ライブラリ|prefetch_rows|prefetch_memory|
|---|---:|---:|
|[ruby-oci8](https://www.rubydoc.info/gems/ruby-oci8/OCI8:prefetch_rows=)|100|0|
|[go-oci8](https://godoc.org/github.com/mattn/go-oci8#ParseDSN)|0|4,096|

ruby-oci8 だと、メモリ使用量に関係なく 100 行をプリフェッチ。
go-oci8 だと、行数に関係なく 4,096 bytes をプリフェッチ。

なので、go-oci8 の方はメモリ使用量は安定して低いのですが、取ってくるデータが多いと何度も細かくフェッチするので遅くなります。

# 対策

ruby-oci8 と同じ値を接続文字列 (DSN) で設定すれば大丈夫です。
`scott/tiger@localhost?prefetch_rows=100&prefetch_memory=0`

もしくは、下記のドキュメントを読んでチューニングしてみるといいかも。
[プリフェッチ・カウントの設定について - Oracle® Call Interfaceプログラマーズ・ガイド](https://docs.oracle.com/cd/E57425_01/121/LNOCI/oci04sql.htm#LNOCI-GUID-7AE9DBE2-5316-4802-99D1-969B72823F02)
live-serverとPureScriptを使ったホットリロード開発手順メモ

# 準備

```bash:
$ mkdir rensyu
$ cd rensyu
$ pulp init
$ pulp browserify --to dist/index.js
```

```json:package.json
{
  "dependencies": {
    ....
  },
  "scripts": {
    "build": "pulp build && pulp browserify --to dist/index.js"
  }
}
```

```html:dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <script src="./index.js"></script>
</body>
</html>
```

```bash:
$ live-server dist/
```

# 開発
以下のいずれかの方法でビルドすれば勝手にブラウザがリロードされます。

```bash:
$ yarn build
```

または

```bash:
$ npm run build
```
Angular Ivyとは

#AngularのIvyとは？
一言でいうと、Angularが新しくリリースした、**レンダリングエンジン**です。
今まではRenderer,Renderer2などが使用されていたようですが、今回は**Ivy**です。

**Ivy(アイビィ)**には以下のような特徴があります。
![スクリーンショット 2019-06-07 23.49.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/e68fb626-4b8a-da61-2a5c-eef4d8e525e2.png)

簡単に解説していきます。

##Smaller
使っている機能のみだけをバンドルしてくれるので、バンドル後のアプリケーションのサイズを小さくしてくれます。

Hello Worldで比較した例がありました。
![スクリーンショット 2019-06-08 1.29.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/c2116d4d-4332-5aea-e3ec-249cf7f430a6.png)
なにもコメントすることはなく、一目瞭然ですね。

##Faster
サイズが小さくなることにより、高速なローディングが実現します。

また、**Locality**というコンセプトでも、この早さが実現されています。今までは、テンプレートを1つ変更しただけに対して、全体をコンパイルし直さないといけません。しかし、今回の**Ivy**はそのファイルのみをコンパイルし直すだけでOKです。

今までのレンダリングエンジンとの比較がありました。約４５％早くなってますね。
![スクリーンショット 2019-06-08 1.34.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/7c6dd4e6-cdb6-3079-4706-59f1358dc45d.png)

##Simpler
生成されるコードが読みやすいという意味でのSimplerです。
これまた一目瞭然で、**Ivy**の方がシンプルで読みやすいですよね。そして、デバックもしやすそうですね。
![スクリーンショット 2019-06-08 1.34.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368226/26b17d8f-041b-d09d-6309-90fb3a3b549d.png)


#終わり
AngularのIvyとはなにか少しはわかっていただけたのではないでしょうか。
**以前のレンダリングエンジンより
「Smaller」 :小さくて
「Faster」:早くて
 「Simpler」:簡潔
な開発者に嬉しいレンダリングエンジン**
ですよ！

最新の情報はあまり日本語化されていないので、英語があまり得意ではない私にとっては理解が大変です…:thinking:

#参考
- https://lacolaco.hatenablog.com/entry/2019/01/13/003022
- https://www.publickey1.jp/blog/18/angularivyng-conf_2018.html
- https://logmi.jp/tech/articles/302246
- https://www.techtic.com/blog/whats-new-in-angular-8-0
- https://medium.com/js-imaginea/ivy-a-look-at-the-new-render-engine-for-angular-953bf3b4907a
lldb-gdb-remote.txt

[lldb-gdb-remote.txt](https://github.com/llvm/llvm-project/blob/master/lldb/docs/lldb-gdb-remote.txt) d45eaf9405c865cae0737a92d5ebce4e485106c3 の google 翻訳を手直しした物です。
まだ作業中

---
LLDBは、マルチスレッドおよびリモートデバッグをより良くサポートするために、新しいGDBサーバーパケットを追加しました。
どうしてでしょうか？
通常、デバッグ時は合致するGDBとGDBサーバーを起動します。合致しないと、すぐに何かしらの問題が起きます。LLDBはGDBリモートプロトコルを幅広く利用しており、もう少し動的に、問題発生前にリモートターゲットの特性を明らかにしたいと思いました。また、信頼性の高い通信であれば解消する、既存のGDBリモートプロトコルの性能問題もありました。追加したパケットのうち、一部パケットは性能向上に寄与し、一部パケットはリモートプロセスを起動を可能にし(OSがあれば)、一部パケットはスレッドに属するレジスタが何なのかを動的に確認できるようにします。GDB においても、事前にGDBとGDBサーバー双方でレジスタ情報（レジスタ数、レジスタ番号、レジスタ名、オフセット)を確認しています。どの種類のアーキテクチャ、OS、ベンダーをデバッグしているのか、またスレッドレジスタのコンテキストに関してはどのようにレイアウトされているのかを動的に判断できることが望まれます。以下は、標準のGDBリモートプロトコルパケットに追加した新パケットの詳細です。

# QStartNoAckMode

- 概要

    ACKとNACKの送信をスキップするために、no ACKモードを有効にします。

- 実装の優先度

    高。通信路の信頼性が高いならば, GDBサーバーは実装すべき機能。この機能で、パケット通信のスループットが向上し、接続性能が向上します。

- 補足

    通常、すべてのパケットの後にACK/NACKを送信しなければならないので、処理が少し遅くなります。高信頼性の通信路(ソケットなど)では、トラヒックを最小限に抑えるためにACKパケットを無効にする手法が使えます。下記の、GDBまたはLLDBの例は、このパケットを送信して、ACKを無効にできるか試みています。`send packet:`で始まるすべての行はGDB/LLDBのもので、`read packet:`で始まるすべての行はGDBサーバーのものです。

    ```
send packet: $QStartNoAckMode#b0
read packet: +
read packet: $OK#9a
send packet: +
    ```

# A

launch args packet

- 概要

    実引数を与えつつプログラムを起動する

- 実装の優先度

    低。
    先に、デバッグ対象のプロセスに未接続のGDBサーバーとLLDB/GDBを接続した後に、デバッグ対象のプロセスをリモートターゲット上で起動したい場合にのみ必要です。

- 補足

    リモートサーバーへの接続を開始し、後で実行可能ファイルへのパスと実行時に使用する引数を指定できる "set program arguments"パケットのサポートを追加しました。

    このためのGDBリモートドキュメントは、下記です。

    プログラム引数を設定する（予約済み）Aarglen、argnum、arg、...

    `A`の後には、16進エンコードされた引数の長さ（バイト数）、引数整数、それに続けて16進バイトに変換されたASCII文字が続きます。

    ```
send packet: $A98,0,2f566f6c756d65732f776f726b2f67636c6179746f6e2f446f63756d656e74732f7372632f6174746163682f612e6f7574#00
read packet: $OK#00
    ```

    上記のパケットは、リモートホスト上でプロセスを起動できるリモートデバッグ機能がある場合に役立ちます。ベアボード(ベアメタル)デバッグには必要ありません。

# "QEnvironment:NAME=VALUE"

- 概要

    [A](#A) パケットを使い起動される、新しい子プロセス用の環境変数を設定します。
    注意:キーと値の組はそのまま送信されるので、gdb-remoteプロトコルのメタ文字(`#`や`$`など)は利用できません。印刷不能な文字またはメタ文字が文字列に含まれている場合は、[QEnvironmentHexEncoded](#QEnvironmentHexEncoded)が使用可能であれば、それを代わりに使用してください。送信前に環境変数を評価したくない場合は、QEnvironmentよりも[QEnvironmentHexEncoded](#QEnvironmentHexEncoded)パケットの使用をお勧めします、利用可能であれば。

- 実装の優先度

    低
    先に、デバッグ対象のプロセスに未接続のGDBサーバーとLLDB/GDBを接続した後に、デバッグ対象のプロセスをリモートターゲット上で起動したい場合にのみ必要です

- 補足

    GDBとLLDBはどちらも環境変数の受け渡しをサポートしています。 `$#00`(未実装)で応答しても大丈夫ですか?

    ```
send packet: $QEnvironment:ACK_COLOR_FILENAME=bold yellow#00
read packet: $OK#00
    ```

    このパケットは、[A](#A)パケットを送信する**前に**1回以上送信できます。

.... 続きは後日
nem2-sdkを使ってブラウザで動くブロックチェーンのアプリを開発する方法

※本記事は Hippopotamus:v0.10.0.3のテストネットに対応しました (2020/10/21現在)

nem2-sdkはcatapultのAPIアクセスを簡便に行える開発ツールです。さまざまな言語で開発が進められており、TypeScript,JavaScript版がもっとも進んでいます。

以下のリポジトリで最新版を確認することができます。
[nemtech/nem2-sdk-typescript-javascript](https://github.com/nemtech/nem2-sdk-typescript-javascript)

しかし、Node.jsでの使用が前提となっており、ブラウザで利用するための環境は整っていません。
今回はbrowserifyを利用してnem2-sdkをブラウザでも利用できるようにしてみます。

#### Node.js npm のインストール
ブラウザで利用するバンドル版を作るためにNode.jsをインストールする必要があります。Macにはnem2-sdkが入りませんでしたので、amazon linuxに入れました。

このあたりを参考に
[Amazon Linux - Node.js と npm をインストールする](https://qiita.com/leomaro7/items/2c3a767bbbb6cc535b19)

browserifyのインストール

```sh
npm install -g browserify
```

nem2-sdk のインストール。今回はTESTNET(Hippopotamus:v0.10.0.3)のバージョンに合わせてNEM Groupが提供する0.21.0を入れます。

```sh
npm install nem2-sdk@0.21.0
```

nem2-sdkを入れたnode_modulesの配置しているディレクトリに移動し、ブラウザバンドル版を書き出します。
-r オプションをつけて外部js側からrequireが使えるようにしておきます。

```sh
browserify -r ./node_modules/symbol-sdk -o symbol-sdk-0.21.0.js
```

さて、バンドル化されたらhtmlファイルから読み込んでみましょう。
サンプルプログラムを例示します。

```html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

<title>10_account</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="nem2-sdk-0.21.0.js"></script>
<script>
const nem = require("/node_modules/symbol-sdk");

const accountHttp = new nem.AccountHttp("http://api-01.ap-northeast-1.0.10.0.x.symboldev.network:3000");
const address = nem.Address.createFromRawAddress("TCFV4TKV6RMN7QPR3PTBXDWIJCLXDVKSIPEEUAQ");

accountHttp
	.getAccountInfo(address)
	.subscribe(
		accountInfo => {
			$("#account_pubkey").text(accountInfo.publicKey);
			$("#account_address").text(accountInfo.address.address);
			console.log(address);
		},
		err => console.error(err)
	);
</script>
</head>
<body>
	<div class="container">
		<div id="items-ctrl">
			<ul>
				<li>[PUBLICK_KEY]：<span id="account_pubkey"></span></li>
				<li>[ADDRESS]：<span id="account_address"></span></li>
			</ul>
		</div>
	</div>
</body>
</html>
```

まず、nem2-sdkファイルの場所を指定します。

```html
<script src="nem2-sdk-0.21.0.js"></script>
```

次に 変数にライブラリを読み込みます。
browserifyした時のフルパスで指定します。

```js

const nem = require("/node_modules/nem2-sdk");
```

これで　`nem.` と指定することで nem2-sdkのクラスが使えるようになります。

ソースコードの解説は以下のページに載っているので参考にしてください。

[アカウントの情報を取得する | nem developer center]
(https://nemtech.github.io/ja/guides/account/getting-account-information.html)


ビルド環境のない方のために、出力したものを配置しておりますので自由にご利用ください。

```js

<script src="https://xembook.github.io/nem2-browserify/symbol-sdk-0.21.0.js"></script>
```

次回は、rxjsと組み合わせて、リスト状のAPIレスポンスを処理する方法を説明します。
facebook/php-webdriver 1.6 で「Undefined index: ELEMENT」

docker-selenium、php-webdriverを用いて、seleniumのfindElement、sendKeysを実行するとNoticeエラー「Undefined index: ELEMENT」が発生、その解決方法を記載します。

# 現象発生内容

### 環境
- selenium/node-chrome-debug 3.141.59-palladium
- selenium/hub 3.141.59-palladium
- facebook/php-webdriver 1.6

### 原因
https://github.com/SeleniumHQ/docker-selenium/issues/916 によると
Chrome 75ではデフォルトでW3Cモードになり、上記環境ではそのW3Cモードになります。
また、[facebook/php-webdriver](https://github.com/facebook/php-webdriver) のREADMEに
> This library is compatible with Selenium server version 2.x and 3.x. It implements the JsonWireProtocol, which is currently supported by the Selenium server and will also implement the W3C WebDriver specification in the future.

とあり、現状でW3Cに対応していないために現象が発生します。

# 解決方法

下記の通り、Chrome 75未満の環境にする。

- selenium/node-chrome-debug 3.141.59-mercury
- selenium/hub 3.141.59-mercury
- facebook/php-webdriver 1.6

参考：[node-chrome-debugイメージ一覧](https://hub.docker.com/r/selenium/node-chrome-debug/tags)

# 余談

W3Cの場合、findElementまたはfindElementsを実行した場合の[jsonレスポンス](https://github.com/facebook/php-webdriver/blob/37c7b04a453d88d79e41e8ac4425603a04d17fd3/lib/Remote/HttpCommandExecutor.php#L280)が下記になります。


```json:findElement
{
  "state": "success",
  "sessionId": null,
  "class": "org.openqa.selenium.remote.Response",
  "value": {
    "element-6066-11e4-a52e-4f735466cecf": "2f61f66d-3d44-400b-a986-410693b88e0c"
  },
  "status": 0
}
```

```json:findElements
{
  "state": "success",
  "sessionId": null,
  "class": "org.openqa.selenium.remote.Response",
  "value": [
    {
      "element-6066-11e4-a52e-4f735466cecf": "a0c08d8f-1592-43b8-9cc4-3be8287e8d71"
    }
  ],
  "status": 0
}
```

W3Cでない場合は、この "**element-6066-11e4-a52e-4f735466cecf**" 部分が "**ELEMENT**" となるようです。

facebook/php-webdriver 1.6 では "**ELEMENT**" がある前提になっているので、[RemoteWebDriver.php](https://github.com/facebook/php-webdriver/blob/37c7b04a453d88d79e41e8ac4425603a04d17fd3/lib/Remote/RemoteWebDriver.php#L190) において、

```php:RemoteWebDriver.php
// return $this->newElement($raw_element['ELEMENT']);
return $this->newElement(current($raw_element));
```
のように修正すれば上手く動作すると思います。
多段sshするAnsibleを同僚にもらったけど、よく分からなったので一つ一つ理解した

まず、ansible.cfg の中身を見てみました

```

[defaults]
inventory = ./hosts
remote_user = ec2-user
log_path = ./log/ansible.log

[ssh_connection]
control_path = %(directory)s/%%h-%%r
ssh_args = -o ControlPersist=15m  -o ForwardAgent=yes -F ./ssh_config -q


```

上の方は分かるけど[ssh_connection] の部分、分からん...

私の知らなかったのは、
SSHのセッションを束ねるControlMasterという機能のことだそうです

CONTROLMasterはデフォルトでONとのこと(auto)
https://docs.ansible.com/ansible/latest/reference_appendices/config.html?highlight=controlmaster#ansible-ssh-args

control_pathはセッションで使うソケットのパスだそうです
https://docs.ansible.com/ansible/latest/reference_appendices/config.html?highlight=control_path#envvar-ANSIBLE_SSH_CONTROL_PATH
ちなみにControl_Pathは108文字を超えるとエラーになるらしいです
気をつけましょう
https://qiita.com/hakobera/items/70c3e690fef303ed49be

ControlPersist使うと、sshのセッションを一定期間のみ使い回せるらしく、
一回接続を切っても15分間はそのセッションで繋げるようです
これを指定しないと、Ctrl-Cを押したらセッションが全部切れるらしい
これを指定しておくと、最初のセッションを切っても他のセッションを継続できるようです
いいやつらしい


まとめると、
hostsを見て繋ぎ、ec2-userでやり、実行ログはローカルの/log/ansible.logに出します
%(directory)s/%%h-%%r
(どこかのディレクトリ/hostname-regionname)
にソケット作ります
15分セッション維持し、多段接続は許可し、./ssh_configで名前解決します

<br>

hostsは普通だったので割愛して、
次に、ssh_configの中身を見てみました

```
Host *
	User ec2-user
	StrictHostKeyChecking no

Host EC2*
	ProxyCommand ssh -F ./ssh_config -W %h:%p Bastion

Host Bastion
	HostName xxx.xxx.xxx.xxx

# ---------------------------------- #

Host EC2_01
	HostName 192.168.1.1


```

この設定では全てのサーバーにec2-userで入り、StrictHostKeyChecking noで入り
EC2で始まるホストにはBastion経由し多段sshします
%hはEC2で始まるホスト名、%pは無指定なのでデフォルトの 22ポートで接続します
Bastion経由で、ローカルポートはよしなにしてくれます


<br>

力尽きた...
試しにコマンドだけ打つなら下記でも可能(playbook要らない)

参考
http://tdoc.info/blog/2014/01/22/ansible_adhoc_commands.html

```
ansible all -a "free"
```

こんな感じで返ってくる

```
EC2_01 | SUCCESS | rc=0 >>
              total        used        free      shared  buff/cache   available
Mem:       15791384     1843264     8877620      786812     5070500    12765836
Swap:             0           0           0

EC2_02 | SUCCESS | rc=0 >>
              total        used        free      shared  buff/cache   available
Mem:       15791384     1530268     9255292      795000     5005824    13071720
Swap:             0           0           0

```
LaravelでPostgreSQLを使う

### 前提
LaravelとPostgreSQLのインストールは済んでいるものとする。

### データベースを作成

- 任意のユーザでPostgreSQLにログインする

```bash:bash
$ sudo su postgres # postgresユーザにログイン
$ psql # PostgreSQLにログイン
```

- データベースを作成する（以下の場合作成者はpostgresユーザになる）

```sql:bash
postgres=# CREATE DATABASE {データベース名}
```

### .envを編集

- Laravelでデータベースに接続する環境変数を定義する`.env`ファイルを編集する。
- （データベースへの作成権限を持っているユーザが違う場合、そのユーザを指定すると良いハズ）

```config:.env
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE={データベース名}
DB_USERNAME=postgres
DB_PASSWORD=postgres
```

### `php artisan migrate` を実行

- Laravelをインストールした時に最初からあるハズの`create_users_table.php`と`create_password_resets_table.php`を元にテーブルが作られる。
- と思いきや下記のエラーが発生。

```bash:エラーメッセージ
   Illuminate\Database\QueryException  : SQLSTATE[08006] [7] FATAL:  Ident authentication failed for user "postgres" (SQL: select * from information_schema.tables where table_schema = public and table_name = migrations)
```

- postgresユーザの認証に失敗したようです。原因は`postgreSQL`の認証方法の設定にありました。
- 設定ファイルは`/var/lib/pgsql/9.6/data/pg_hba.conf`です。（パスは少し違うかも知れません）

```config:pg_hba.conf
# "local" is for Unix domain socket connections only
local   all             all                                     peer
# IPv4 local connections:
host    all             all             127.0.0.1/32            ident
```
※ [pg_hba.conf についての詳細はこちら](https://www.postgresql.jp/document/9.4/html/auth-pg-hba-conf.html)

- `peer` `ident`の部分が認証方法です。
- 両方とも、`オペレーティングシステムのユーザ名`と認証に使用するユーザ名が一致しないと認証に通らない仕組みのようです。
- ここを`md5` `password` `trust` のいずれかに変えると認証できるようになります。（`trust`は無条件で認証してしまうので避けたほうがいいかも知れません）
- 今回はマイグレーションのためにpostgreSQLに接続したいので`# IPv4 local conections`の方だけ変えれば大丈夫です。

- ということで再度`php artisan migrate`を実行すればめでたし、テーブルが作られます。
pyclusteringのxmeansの一部をsklearn風にラッパーする

#動機
k-means法では最初にクラスタ数を決めなければいけないが、x-means法なら自動的に決めてくれる（最適なクラスタ数かどうかはわからないが）。そこでpyclusteringのxmeansを見つけたが使い方がsklearnのスタイルと違ったため使いづらかった。そこで今回はpyclusteringの`xmeans.fit`についてsklearn風にラッパーしたいと思う。

#問題点
sklearnのk-meansとpyclusteringのx-meansの大きな違いはskleranでいう`label_`の配列の返し方が違うところだ。例えば標本として` samples = [a,b,c,d]`があり`(a,b,c,d) = (0,1,0,1)`でクラスタリングされたとする。
skleranの`label_`は[0,1,0,1]と標本配列と同じ順番にクラスタ番号の配列を返す。
pyclusteringでいうところの`label_`（正確には`xmeans.xmeans().getcluster()`）は`[[0,2],[1,3]]`と標本配列のインデックスがクラスタ番号順に分類され、その配列を返す。
（国語力が足りない....）
今回はそれを解決する。

#コード
```python
import pyclustering
from pyclustering.cluster import xmeans
import numpy as np


class XMeans:
    def fit(self,features):
        '''pyclusteringのxmeansで計算'''
        initializer = xmeans.kmeans_plusplus_initializer(data=features,amount_centers=2)
        initial_centers = initializer.initialize()
        xm = xmeans.xmeans(data=features,initial_centers=initial_centers)
        xm.process()

        """
        分類が出力される
        しかしこの出力の仕方がscikit-learnとは違うので厄介
        """
        clusters = xm.get_clusters()
        '''一次元配列flat_labelを用意'''
        flat_label = np.array([])
        '''sklearnでいうlabel_の大きさを調べる'''
        for cluster in clusters:
            flat_label = np.append(flat_label,cluster)
        '''正規のlabelを代入するための配列を確保'''
        labels = np.zeros((1,flat_label.size))
        '''
        pyclusteringのclustersはクラスター数次元配列があり、標本の名前がクラスターに分類され配列として返す。
        一方でsklearnのlabel_は標本と同様の順番に、その標本が属するクラスターの番号を配列で返す。
        下記のコードはその変換を行っている
        '''
        for n,n_th_cluster in enumerate(clusters):
            for img_num in n_th_cluster:
                labels[0][img_num] = n

        
        '''このままのラベルだと[[a........z]]の二重括弧になる。
        それはsklearnの仕様に沿わない。[a........z]の一重括弧にする。
        '''

        self.labels_ = labels[0]
        return self
```
2020/05/30 コードを一部修正
[@physicalcotton](https://qiita.com/physicalcotton)さんのご指摘によりコードを一部修正しました。@physicalcottonさん、ご指摘ありがとうございます。
#まとめ
個人的にこのコードはまだまだ改善の余地があると思っている。もしよければ改善点を申し付けていただいたらありがたい。
大学でプログラミング勉強したかったらオーストラリアに行け

#はじめに
タイトルは完全に目を引く感じのを考えてつけました。
現在オーストラリアのクイーンズランド工科大学でコンピューターサイエンスを勉強しています。
今ちょうど2年目の1学期が終わろうとしているところです。
試験期間で忙しいはずの夜中。現実逃避のためになぜか書き始めてしまいました。

大学：Queensland University of Technology
学部：Bachelor of Information Technology
専攻：Computer Science

１年半勉強してみて、個人的な感想をまとめてみようと思って書いています。
なお、日本など他国の大学がどういう感じかは全く知らないので、あくまでオーストラリアはこんな感じだよというスタンスで紹介させていただきます。

ではさっそくいってみよー。

#オーストラリアの大学の特徴
- 全部で3年間（学部によりますが）
- セメスター制（2学期制、2月〜6月＆7月〜11月）
- 1学期は13週間 + 試験期間（3週間ほど）
- 1学期に取るのはだいたい4科目
- 授業は週16時間ほど（1科目につき講義2時間+チュートリアル2時間）
- 授業はとにかく実践的（少なくともうちのIT学部は）
    - 大学の宣伝文句？が"The University for the Real World"現実世界のための大学。

#授業はどんな感じ？
###1年目、1学期
**Python**
プログラミングの基礎を学ぶ授業。全くの初心者対象。めっちゃ簡単だった。
turtleで絵書いたりして楽しかった。
[画像入れる]

**モバイルアプリのデザイン**
デザインの基礎だったりを学んだ。グループで実際にアプリのアイデアを出してプロトタイプまで作った。

**コンピューターの仕組み**
主にハードウェアの勉強。コンピューターはどんな部品でできていて、どういう仕組みで動いているのかてきな。レポート課題がめんどくさかった。２つ目の課題はラズパイを使ってなにかを作ろうという課題で、まぁ楽しめた。

**ビジネスとIT**
ビジネスにおけるIT活用例を学んだりした。エクセルの高度な使い方とかも。もうほとんど忘れた。

###1年目、2学期
**データベース**
データベースの設計方法からSQLでの操作まで一通り学んだ。結構役に立った授業。特に設計方法を勉強したのは良かった。使ったデータベースはMySQL。

**C言語とマイクロプロセッサ**
C言語でマイクロプロセッサ上で動くゲーム作ったりした。クソゲーだったけど。メモリの操作とか、ビットの操作とか、ピクセルレベルの当たり判定の制御とか、今まで触ったことない領域に触れられたので興味深い授業だった。

**C#とオブジェクト指向**
オブジェクト指向プログラミングとはなんぞやという授業。結構サポート体制が素晴らしくて割と簡単な授業だった。

**コンピューターのための数学**
数学に苦手意識を持っていた自分が当時一番苦戦した授業。微分積分とか、ベクトルとか行列とか、自分が触れてこなかったものを１から勉強しなきゃいけなかったのは辛かった。でもとてもためになった。

###2年目、1学期
**Javaとソフトウェア開発**
Javaの勉強と、ソフトウェア開発の基礎の勉強。アジャイルとか、Gitとか、TDDとか、いろいろ紹介された。課題ではJavaのSwingを使ってベクトル画像のペイントアプリを１から作った。１から設計考えるのが初めてで苦労はしたものの、とてもいい勉強になったし結構楽しかった。MVCとかオブザーバーパターンとか。
![302.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181516/f962b9cf-1605-5b0b-08d1-6802727649bc.gif)

**Node.jsとReactでウェブアプリ開発**
一番気に入った授業。フロントエンド開発からバックエンド開発、デプロイメントまで、ウェブアプリ開発のいろはを学べた。プラス前から気になってはいたReactとNode.jsを勉強するきっかけになったので、とても良かった。
[画像いれる]

**離散数学**
よりコンピューターに必要な数学の授業という感じ。ビット操作や、論理演算とか、Regexとか。ちょっと難しい。

**人工知能**
前学期の数学の授業よりも苦戦した。AIに興味はあったものの触れてはこなかったので、新しいコンセプトが多くめっちゃ頭がパンクしそうだった。倉庫番パズルを解く探索アルゴリズムを作る課題があり、めっちゃ苦労したがまぁ楽しかった。

#まとめ
全体的に本当に実践的な授業が多くて満足度が高いです。
３年制というのもいいですね。さっさと卒業してガンガン稼ぎたいです。
海外大学は基本学費が高いですが、僕の大学は比較的安いほうです。まじでおすすめです。
ちなみに自分はJASSOの学部学位取得型という奨学金をもらって来ています。

だいぶ荒削りですがとりあえずはこんな感じで。
課題で作ったアプリのスクショとか、ゆくゆくは載せていこうと思います。
今後も更新していく予定です。一応。
質問とかもしありましたらじゃんじゃんコメントしてくださいませ。
VSCodeで文字列からworkspace内のファイルを開く拡張機能

#モチベーション
テキストファイル内の文字列が、ある特定のファイルをさす(ファイル名)ということはよくあります。
この場合、VSCodeでは、文字列をコピーして、ファイルオープンのショートカットを呼び出してペーストして開けばいいんですが、あんまり楽しくありません。
そんな感じで、探していたら世の中には既にぴったしの拡張機能が存在したので自分用にメモ。
#Quick Open File
↓以下をインストール
https://marketplace.visualstudio.com/items?itemName=AlanWalk.quick-open-file
使い方は簡単、文字列を選択して<em>Alt</em> + <em>g</em>(デフォルト)のショートカットで飛べます。簡単で嬉しい。
VSCodeで,区切りの文字列ならしっかりと対応してくれます。

#飛べないよ！
拡張子を指定しましょう。デフォルトはluaとjsになっています。

```json:test.code-workspace
"settings": {
	"quickOpenFile.extensionInclude" : ["txt"],
},
```

#おまけ
チームでやるときは、拡張機能をrecommendできるらしい

```json:test.code-workspace
"extensions": {
	"recommendations": ["who.what"]
},
```

なんとなく、ジャンプしたいから<em>Ctrl</em> + <em>j</em>に割り当てたいんだけど、
デフォルトのcommandIdを変えるのもちょっと。。。という気分。。。
workspace毎に変えられるとうれしいんですが。
Unity　シェーダーの簡単な割り当て方

これから説明するのはプログラミング初心者向けの記事です。
「シェーダーって聞いたことあるけどどういうのか分からない」「使ってみたいけどどう使うのか分からない」という人向けの最低限の説明になります。ネットで調べると意外と初歩的なことが省かれていることが多くてつまずくことがありますよね。では早速いきましょう！

#そもそもシェーダーって？
シェーダーとは簡単に言うと「描画方法を記述したプログラム」です。
普通ゲームなどのオブジェクトはテクスチャなどで描画されますが、シェーダーを使うことで動的な描画などが可能になります！SFっぽい感じの光のラインが走るとかがイメージしやすいですかね。
またトゥーンシェーダー（セルシェーダー）という言葉も耳にするかと思います。これらもプログラミングで描画されます。
ようはゲームをリッチにすることができる代物です！

#アセットを使って試してみよう！
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432805/25bd6c19-6888-24ce-146c-749e5e42442c.png)
まずはシーンを作り、3Dオブジェクトからcubeを出しましょう。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432805/86f3c491-538c-4f68-8761-eff3262e9619.png)
今回はアセットストアにあるこちらのシェーダー
[https://assetstore.unity.com/packages/vfx/shaders/semi-transparent-outline-86481]
を使ってみたいと思います。こちらはアウトラインシェーダーですね。名前の通りアウトラインを描画するものです。
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432805/ff4baf0f-47a6-8368-efab-0719c6813856.png)
このファイルがインポートされました！
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432805/543165eb-d146-187f-71c8-bc2845bc5419.png)
シェーダーのスクリプトを開くとこんな感じになってます。
書いてある内容は大体こんな感じです。
>プロパティ情報 ・・・ Unityから情報を取得するために定義
関数宣言 ・・・ シェーダー処理で、呼ぶ関数を指定
変数宣言 ・・・ 「Unityからデータをうけとる」などの目的のため、変数を定義
頂点シェーダー ・・・ 頂点シェーダーの処理
フラグメントシェーダー・・・ フラグメントシェーダーの処理

初心者向けの内容なので詳しくは書きませんが[こちら]https://www.sejuku.net/blog/65234
の記事などが参考なるかと思います。

###割り当ててみます！
このアセットはマテリアルも作ってくれているのでただオブジェクトに投げるだけです！何も難しいことはありません！
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432805/d479b8e1-9e8a-fd0b-ddc3-c8d4c56a3918.png)
こうなりました！あとは自分の好みに合わせてパラメータを調整するだけです！
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432805/cac250ff-e750-0365-c580-de98afe42621.png)
個人的に中の白線がいらないので消して、アルファをいじって半透明にしてみました。
こういった描画をテクスチャで描くとなるとかなり手間が掛かったり、できないこともあるのでプログラムで書いてパラメータで調整できるのはとても便利ですね。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432805/c33611b9-e539-d5dd-0415-38ce0a079268.png)
本来であれば、書いたシェーダースクリプトをマテリアルに当てる必要があるのでお忘れなく。

#まとめ
>・シェーダーはプログラムで描くテクスチャ！
・シェーダーで表現の幅が広くなる！ゲームがリッチに！
・使うときはマテリアルにシェーダースクリプトを当ててからオブジェクトに割り当てる！

以上、超初心者向けの導入でした！