OmniAICreator/Qiita-1.07M huggingface dataset:
Djangoで適当なプロジェクトつくってみる

職場でdjango使ってるから慣れるために自分でも使ってみる。
ついでに最近噂のkiteを使ってみる。どのくらい快適にコーディングできるか楽しみ。
kiteの導入方法とかは[ここの記事](https://qiita.com/KeisukeToyota/items/75c3b4964b65a18d46d4)とか参考にするとよいぞ。
# 動作環境
　Django2.2
　python3.7
　anaconda3
# いろんなインストール
　まず[anaconda](https://www.anaconda.com/distribution/)をDLしてインストールする。
　今回はWindowsを選択してDLする。
　DLできたら実行して、だいたいnext>を押していけばいい。
<img width="376" alt="スクリーンショット (395).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395106/172016f2-6321-bf47-a124-4f3e32c530d8.png">
ここはjust meでいいと思う。
<img width="367" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395106/f5694b79-6d7d-0f78-e07f-19e67e4cede7.png">
DL先を指定する。初期はこんな感じになってた。
まあそうこうしてればDLできるはず。

# 仮想環境を作る
DLしたらanaconda promptってのを起動する。Windows+sを押すと検索できるから楽かも。
起動するとなんか頭に(base)ってのがついたcommand promptっぽいのが出てくると思う。
これでanacondaのbaseって名前の仮想環境に入れた。
自分で好きな仮想環境作りたいときは、

```ruby:anaconda_prompt
conda create -n 環境名
```
ってすると任意の名前の環境が出来上がる。今回は環境名にdjangoと入れる。
なんか言われたりしたらyでいいと思う。(思う。)

ちなみに
```ruby:anaconda_prompt
conda create -n 環境名 python=バージョン
```
みたいにすると好みのバージョンが入るはずです。

# 仮想環境の起動
　anaconda promptじゃないとできないのか。IDEのターミナル使えないならもうやーめた。
　そう思ってないですか？それなら明日もanaconda promptで開発ですよ？ほな(IDEでの開発)いただきます。
　
　とりあえず仮想環境立てていくんですが、これらは別にanaconda promptでやる必要はないです。
　私はPyCharm使ってるのでそっちのターミナルから実行してます。
　pathを通したら楽になるとか聞いたんですけど、めんどくさそうなのでpath全部書きます。

```ruby:terminal
c:\(anacondaまでのpath)\anaconda\Scripts\activate 環境名
```
　これをすれば頭に(環境名)がついて、仮想環境に入れます。
　今回はdjangoですね。これで仮想環境に入れました。ようこそ!(?)

# pythonのインストール
　と思ってないですか？(天丼)
　anacondaで仮想環境立てた段階でもうすでにpythonは入ってます。試しにversionを確認してみましょう。

```ruby:terminal
python -V
```
　どうでしょうか。anacondaをダウンロードしたときに選んだversionになっているはずです。

# djangoのインストール
さて次はdjangoをインストールしましょう。pipコマンドからインストールできるはずです。

```ruby:terminal
pip install django
```
なんか言われたらy。出来なかったらsudoを頭につけて実行するとできるかも。

# プロジェクトを作ってみる
さていよいよプロジェクトを作ってみましょう。
まずは作業フォルダを適当に作って移動してみましょう。移動コマンドはcdです。

```ruby:terminal
cd C:\(作業フォルダまでのpath)\作業フォルダ名
```
移動したらさっそくプロジェクトを作っていこう。

```ruby:terminal
django-admin startproject プロジェクト名
```
これでプロジェクトが作成できるよ。今回はdjango_testって名前のプロジェクトを作るよ。
cdコマンドを使ってプロジェクトファイルに移動しよう。

```ruby:terminal
cd プロジェクト名
```
さて、とりあえずこれを実行するとどうなるかな？runserverコマンドで実行してみよう。

```ruby:terminal
python manage.py runserver
```
するとなんか

```ruby:terminal
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
April 27, 2019 - 19:10:44
Django version 2.2, using settings 'django_test.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
```
こんな感じなのが出てくるかな？そしたらこのhttp・・・・ってURLをコピペしてブラウザで見てみよう。
そしたら・・・
<img width="967" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395106/d9821d55-57eb-0f0f-2560-25173b7f785f.png">

ようこそDjanogへ!
って感じですね！ね！
これでプロジェクトの作り方は完璧ですね！うん！
結局コードは書いてないのでkiteの有能さはまだわからないですね・・・
次の記事では簡単にサイトを作ってみようと思います。何を作ろうかな...
Pythonのラムダ式

ラムダ式は、1つの式からなる小さな名前のない関数。
例えば、以下の2つは同じ結果を出力する。

```python
func = lambda a, b: a + b

print(func(1, 2)) # 3
```

```python
def func(a, b):
        return a + b

print(func(1, 2)) # 3
```

lambdaを使えば、defを使わずに簡潔に書ける。
WSL(Ubuntu)のApache2起動でエラー

Windows10のWSL(Ubuntu)でApache2デーモンを起動したときにエラーになったので、その原因と対処法です。

```shell
$ cat /etc/issue
Ubuntu 18.04.1 LTS \n \l

$ apache2 -v
Server version: Apache/2.4.29 (Ubuntu)
Server built:   2018-10-10T18:59:25
```

```shell
$ sudo /etc/init.d/apache2 start
 * Starting Apache httpd web server apache2
(13)Permission denied: AH00072: make_sock: could not bind to address [::]:80
(13)Permission denied: AH00072: make_sock: could not bind to address 0.0.0.0:80
no listening sockets available, shutting down
AH00015: Unable to open logs
Action 'start' failed.
The Apache error log may have more information.
 *
```

## 原因

W3SVC (WWW Publishing Service)が起動していて80番ポートを使用していました…

[StackExchange Why am I getting “Permission denied: make_sock: could not bind to address” when starting Apache2?][0]
[Why GitHub? Apache start error in Windows Creator update. #1921][1]

## 対策

```diff:/etc/apache2/ports.conf
# If you just change the port or add more ports here, you will likely also
# have to change the VirtualHost statement in
# /etc/apache2/sites-enabled/000-default.conf

- Listen 80
+ Listen 8080

<IfModule ssl_module>
-        Listen 443
+        Listen 8443
</IfModule>

<IfModule mod_gnutls.c>
-        Listen 8443
+        Listen 8443
</IfModule>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
```

IISを止めるか、Apacheのポートを8080などに変更すると、無事起動しました。

[0]:https://askubuntu.com/questions/338218/why-am-i-getting-permission-denied-make-sock-could-not-bind-to-address-when
[1]:https://github.com/Microsoft/WSL/issues/1921
Rubyで文字列（二文字以上）の出現回数を数える

# はじめに
こんな文字列があるぞ！この中にrubyって何個あるんだ？

```ruby
s = 'rubyruborubyrubkrubarubyrubi'
```

こんなのcountで一発だな！


# countを使ってみる
```ruby
s = 'rubyruborubyrubkkrubaarubyruba'
p s.count('r')
# => 7
```

なるほど。rは7個あるらしい。

```ruby
s = 'rubyruborubyrubkkrubaarubyruba'
p s.count('ruby')
# => 24
```

絶対24個もないでしょ！！！

# countだと複数文字をカウントできない
上記の例だと、`r,u,b,y` のどれかにマッチする文字の個数をカウントしてしまっている。
つまりcountで複数文字を数えることはできないのだ。

# scanを使おう
`一致する文字列を抽出して配列にする`というscanというメソッドを使おう。

```ruby
s = 'rubyruborubyrubkkrubaarubyruba'
p s.scan('ruby')
# => ["ruby", "ruby", "ruby"]

p s.scan('ruby').length
# => 3
```

複数文字のカウントができた〜！
PowerBIを用いたサーバ情報のリアルタイム表示


ビッグデータ解析(日本経済新聞出版社)から
PowerBIという興味深い製品を見つけたので、備忘録として記録。

下記の記事にて、リアルタイム表示が可能とのことから、システム部門の入り口のデジタルサイネージで「システム俯瞰図をベースとしたリアルタイム情報の表示」ができたらすごくかっこよいのではと興奮している。

ビール工場のタンク温度をPowerBIで表示する（１）
http://www.d3654.be/powerbi-dashboard-of-beer-brewery01/

###実用化する場合のビジネスメリット（コストメリット）
タッチパネルのデジタルサイネージでサーバ情報(*)を俯瞰的に確認できたとすれば、
アプリケーションチームも運用保守者にリソース情報の提供依頼を出さなくてよいのでコスト削減できるのではないか。

(*)　WEBスレッド情報、レスポンスタイム、CPU、Memなど
[Swift]引数は同じ型だが、返り値の型が異なる時のジェネリクスを使った書き方

基本的なことではあるが、データをパースするときなど引数は同じ型だが、返り値の型が異なる時がある。

そのようなときはジェネリクス<T>を使って下記のように解決できる。

```swift
enum CMD {
    case stringCmd
    case intCmd
    
    func parse<T>(value: Int) -> T {
        switch self {
        case .stringCmd:
            let result: String = parseData(val: value)
            return result as! T
        case .intCmd:
            let result: Int = parseData(val: value)
            return result as! T
        }
    }
}

func parseData(val: Int) -> String {
    return "str: \(val)"
}

func parseData(val: Int) -> Int {
    return val
}

print(CMD.stringCmd.parse(value: 2))
print(CMD.intCmd.parse(value: 2))

```

実行結果

```
str: 2
2
```

ジェネリクスは便利である。使いこなしたいものだ。
React with TypeScriptでインラインスタイルでCSS書くときに、objectにそんなプロパティないよって怒られた時の対処法

やっぱりCSSはCSSファイルに書きたいので、最近は CSS in JS より [classnames](https://github.com/JedWatson/classnames) とか使っていることが多いです。

しかしその場合、動的なスタイルの変更に弱くなるので、そういったときに使うのがインラインスタイル。ですが、TypeScriptで書いている場合、objectを定義したときに存在しなかったキーを追加しようとすると怒られてしまいます。

「Error: The property 'right' does not exist on value of type '........'」

```typescript
const WithBadge: React.FunctionComponent<BadgeProps> = ({ children, content, position = 'right' }) => {
  const style = {
    top: '-0.5em',
    background: '#D54A4A',
    color: '#fff',
  };

  if (position === 'right') {
    // Error: The property 'right' does not exist on value of type '........'
    style.right = '-1.3em';
  } else {
    // Error: The property 'left' does not exist on value of type '........'
    style.left = '-1.3em';
  }
```

# `style`に型を定義すればよいだけ

TS力が強い人ならこんなことでググる必要もないと思うのですが、自分はまだまだでした。

`style`の型を`{ [key: string]: string }`とすることで解決しました。

```typescript
  const style: { [key: string]: string } = {
    top: '-0.5em',
    background: '#D54A4A',
    color: '#fff',
  };

  if (position === 'right') {
    style.right = '-1.3em';
  } else {
    style.left = '-1.3em';
  }
```

### 参考

[How do I dynamically assign properties to an object in TypeScript?
](https://stackoverflow.com/questions/12710905/how-do-i-dynamically-assign-properties-to-an-object-in-typescript)
php-master-changes 2019-04-26

今日はテストの修正、Windows 版の Phar でのパス変換実装の修正、Travis のビルド時 -Werror を有効にするようにする修正があった！

# 2019-04-26
## cmb69: Fix [#77940](https://bugs.php.net/bug.php?id=77940): test using outdated mon_thousands_sep for Swedish
- https://github.com/php/php-src/commit/bfbfb9dabd8369ec1891da99027f920bd851caee
- [7.2~]
- [昨日の修正](https://qiita.com/sj-i/items/5e069174ff9d516e3308#cmb69-fix-77940-test-using-outdated-mon_thousands_sep-for-swedish) の続き、区切り文字がスペースな環境でもカンマな環境でも動くよう修正

## cmb69: Fix [#77940](https://bugs.php.net/bug.php?id=77940): test using outdated mon_thousands_sep for Swedish
- https://github.com/php/php-src/commit/7ddfe73e69bd847c33bd69fb92d2f5f82b89c778
- [7.2~]
- ↑の修正でカンマじゃなくピリオドだった！というので修正

## cmb69: Fix VirtualProtect() related Phar issues
- https://github.com/php/php-src/commit/be74a00464dab7c287045939c01839878e70b5f4
- [7.4~]
- ext/phar で、Windows 版で Unix 形式にパスを変換（バックスラッシュのスラッシュへの置き換え）する際の処理の修正
- [phar_unixify_path_separators()](https://github.com/php/php-src/blob/17baa87faddc2550def3ae7314236826bc1b1398/ext/phar/phar_internal.h#L484) がインプレースで文字列を修正する処理だが、この際のバッファが SHM のデータだった
- [PR:3984](https://github.com/php/php-src/pull/3984) の opcache.protect_memory 用に [VirtualProtect()](https://docs.microsoft.com/en-us/windows/desktop/api/memoryapi/nf-memoryapi-virtualprotect) を使う[修正](https://qiita.com/sj-i/items/fe12c309b803eea27ccd#nikic-support-virtualprotect-for-opcacheprotect_memory)の流れで直さんとね、となり、[PR:4068](https://github.com/php/php-src/pull/4068) で出てきた修正
- プロセス内メモリへコピーして処理するようにし、また do_alloca() で可能ならスタック上への領域確保を試みつつ、また不要ならそのバッファコピー自体しないよう修正

## nikic: Enable -Werror in CI
- https://github.com/php/php-src/commit/33e8a7b36879c82d9e495e8c5340e58c6d9ded34
- [7.4~]
- Travis のビルド時 -Werror を有効にするよう修正

## nikic: Fix file name clash in zlib tests
- https://github.com/php/php-src/commit/2371c65a283c441efdb5a9b35b40b9b1b9410233
- [7.4~]
- ext/zlib で、テストのファイル名衝突を回避して並列実行対応
データセットの欠損値を把握する関数

## 備忘録
データセットの欠損値を把握する関数を作りました
df.isnull().sum()でも求められますが、大きなデータセットの場合、全てのカラムが表示されなかったため、作りました
## コード
```grasp_lack.py
def grasp_lack(df):
    for column in df.columns:
        lack = df[column].isnull().sum()
        print(column,":",lack)
```

```
>>> カラム名：欠損値数
```
【小ネタ】Ansibleでコマンドラインからfactsを確認する【Ansible】

# はじめに
Ansible Playbookを書く際には、対象ホストのFactsをもとに、when句でTaskを分岐させることが多いと思います。
具体的にホスト上でどのようなFacts情報が取れるか確認しながらPlaybookを書いていきますが、Factを取得する方法を忘れがちなのでメモします。

# コマンド
対象ホストにログインしたのち、下記コマンドを実行することでFactsを取得できます

```
$ ansible localhost -m setup
localhost | SUCCESS => {
    "ansible_facts": {
        "ansible_all_ipv4_addresses": [
            "192.168.255.21",
            "10.0.2.15"
        ],
        "ansible_all_ipv6_addresses": [
            "fe80::a00:27ff:fe6a:71b1",
            "fe80::a00:27ff:feb9:8245"
        ],
        "ansible_apparmor": {
            "status": "disabled"
        },
# ※以降省略
```

# 補足
上記コマンドは、第1引数で指定するホストパターンに対して、「setup」モジュールを実行する、という意味になります。
「setup」モジュールのドキュメントは下記にあります。

setup – Gathers facts about remote hosts — Ansible Documentation
https://docs.ansible.com/ansible/latest/modules/setup_module.html
AWS LinuxでPython3やるならAmazon Linuxのイメージがお手軽だった件

AMI ID: amzn-ami-hvm-2018.03.0.20181129-x86_64-gp2 (ami-0cd3dfa4e37921605)


2xしか入ってなさげ

```
$ which python
/usr/bin/python
$ find / -name python 2> /dev/null
/usr/share/gcc-7/python
/usr/bin/python
/var/lib/alternatives/python
/etc/alternatives/python
$ ll /usr/bin/python
lrwxrwxrwx 1 root root 24 Nov 16 23:06 /usr/bin/python -> /etc/alternatives/python
$ ll /usr/bin/python*
lrwxrwxrwx 1 root root   24 Nov 16 23:06 /usr/bin/python -> /etc/alternatives/python
-rwxr-xr-x 1 root root 5120 May  2  2018 /usr/bin/python27
-rwxr-xr-x 1 root root 5120 May  2  2018 /usr/bin/python2.7
-rwxr-xr-x 1 root root 1846 May  2  2018 /usr/bin/python2.7-config
lrwxrwxrwx 1 root root   31 Nov 16 23:06 /usr/bin/python-config -> /etc/alternatives/python-config
```

```
$ sudo yum install python36 python36-virtualenv python36-pip
$ which python
/usr/bin/python
$ ll /usr/bin/python*
lrwxrwxrwx 1 root root   24 Apr 27 08:18 /usr/bin/python -> /etc/alternatives/python
-rwxr-xr-x 1 root root 5120 May  2  2018 /usr/bin/python27
-rwxr-xr-x 1 root root 5120 May  2  2018 /usr/bin/python2.7
-rwxr-xr-x 1 root root 1846 May  2  2018 /usr/bin/python2.7-config
lrwxrwxrwx 1 root root   25 Apr 27 08:18 /usr/bin/python3 -> /etc/alternatives/python3
-rwxr-xr-x 3 root root 6872 Mar 18 18:59 /usr/bin/python36
-rwxr-xr-x 3 root root 6872 Mar 18 18:59 /usr/bin/python3.6
lrwxrwxrwx 1 root root   17 Apr 27 08:18 /usr/bin/python3.6-config -> python3.6m-config
-rwxr-xr-x 3 root root 6872 Mar 18 18:59 /usr/bin/python3.6m
-rwxr-xr-x 1 root root  173 Mar 18 18:59 /usr/bin/python3.6m-config
-rwxr-xr-x 1 root root 3373 Mar 18 18:39 /usr/bin/python3.6m-x86_64-config
lrwxrwxrwx 1 root root   32 Apr 27 08:18 /usr/bin/python3-config -> /etc/alternatives/python3-config
lrwxrwxrwx 1 root root   31 Apr 27 08:18 /usr/bin/python-config -> /etc/alternatives/python-config
```

pip確認

```
$ ll /usr/bin/pip*
lrwxrwxrwx 1 root root  21 Apr 27 08:18 /usr/bin/pip -> /etc/alternatives/pip
-rwxr-xr-x 1 root root 370 Apr 25  2018 /usr/bin/pip-2.7
-rwxr-xr-x 1 root root 370 Apr 25  2018 /usr/bin/pip-3.6
```

リンクを張った

```
$ ln -s /usr/bin/pip-3.6 /usr/bin/pip3
```


## こちらにお世話になりました(リスペクト)
https://goodbyegangster.hatenablog.com/entry/2018/05/22/024513
Minecraft BE ScriptingAPI 第1回講座

# 【Minecraft BE】の ScriptingAPI開発講座(1)

## 注意
ScriptingAPI は現段階でWindows10にしか対応していません。
Android,iOS,XboxOne,Switchでは開発できません。(AndroidはBlockLauncherという外部ツールを使えばできます)

## 開発環境
~~windows10 Minecraft ver 1.11.1~~
windows10 Minecraft ver 1.14.60

## ScriptingAPIとはなんぞや
ScriptingAPIで何ができるか、いろいろできちゃいます。
プレイヤーが攻撃したentityを取得出来たりとか...
簡単に言うとコマンドが進化しすぎちゃいました！みたいな感じです。（わかりづらくてごめんよ）

ScriptingAPIは[JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference)という言語で構成されていています。
JavaScriptはWeb開発などで主に使われている言語なので触ったがことある方も、多いのではないでしょうか。

##ワールドに入ったらHelloWorldとチャット欄に出るコード
とりあえず書いてみます。
ファイル構成は

```
behavior_name
┣ scripts
┃ ┣ client
┃ ┃ ┗ client.js
┃ ┗ server
┃   ┗ server.js
┣ manifest.json
┗ pack_icon.png
```
です。

```JavaScript:client.js
const clientSystem = client.registerSystem(0, 0);
//おまじないみたいな

clientSystem.initialize = function () {
//最初に一回実行される
	this.listenForEvent("minecraft:client_entered_world", (eventData) => this.enterWorld());
    //アロー関数、minecraft:client_entered_worldでワールドに参加したときに実行される
};

clientSystem.enterWorld = function () {
//先のアロー関数で呼び出したやーつ
	var BroadcastEventData = this.createEventData("minecraft:display_chat_event");
    BroadcastEventData.data.message = "Hello World";
    this.broadcastEvent("minecraft:display_chat_event", BroadcastEventData);
    //チャットにHello Worldと出力
};
```
こんな感じです。
そうそう、manifest.jsonはこんなかんじです。

```Json:manifest.json
{
    "format_version": 1,
    "header": {
        "description": "scripting! I like ”hogehoge”",
        "name": "ScriptingAPI",
        "uuid": "8920490e-6df8-449e-817e-b33be6de791a",
        
        "version": [1, 0, 0],
        "min_engine_version": [1, 8, 0]
    },
    "modules": [
        {
            "description": "scripting! I like ”hogehoge” ",
            "type": "client_data",
            "uuid": "ea9e0119-f5b0-4a89-941d-ad01ce5b2cce",
            "version": [1, 0, 0]
        }
    ]
}
```
uuidはこちらで生成してくださいな
https://www.uuidgenerator.net/

これでワールドに入ったときにチャット欄を開くと一番上に表示されていると思います。やったね！![bandicam 2019-04-27 17-48-45-941.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266165/7bf7f1db-b245-9314-fbe2-c695f865a628.jpeg)


次回は、もっといろいろなことをやっていきます！

[次回へ](https://qiita.com/Button/items/361d318d8d20556f944a)
Arduinoのシリアル通信で大きい数値を送る

![img00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70925/5d8203ab-6bcc-a430-4599-d2222b1d78a7.png)

Arduinoのシリアル通信では1Byte(8bit)単位で通信が行われます。そのためバイナリ形式で1Byte(0-255)を超える数値をArduinoへ送るためには工夫が必要となります。

以下はArduinoで2Byte(16bit)の数値をシリアル通信で受信して認識した数値を文字列として送信元へ送り返すコードです。

```c:sample.ino
uint8_t buf[2];

void setup() {
  Serial.begin(9600);
}

void loop() {
  if (!Serial.available()) return;
  
  Serial.readBytes(buf, 2);
  uint16_t value16bit = buf[1] << 8 | buf[0];
  Serial.println(String(value16bit, DEC));
}
```

## 確認方法
PCからArduinoへ2Byteのデータを送ります。今回は[CoolTerm](https://freeware.the-meiers.org/)を使用しました。2Byteのバイナリデータを送信できれば何でも構いません。以下はCoolTerm上での操作を解説します。

まずCoolTermを起動させたらOptionボタンを押して対象のシリアルポートを選択し、ボーレートを9600bpsに設定して[OK]ボタンを押します。その後、Connectボタンを押してシリアルポートに接続します。

次にツールバーメニューの「connection」から「Send String」を選択します。
![img03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70925/ac0ed77f-a35c-d046-8992-85d5d621b235.png)

データを送信するためのウィンドウが表示されるので、Hexにチェックを入れて数値の1023(0x03FF)となる「FF 03」を入力して[Send]ボタンを押します。FFと03の間にはスペースを入れてください。
![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70925/aec49450-a601-1920-91e5-393a26e409f5.png)

正常に動作していれば受信ウィンドウに1023と表示されます。
![img05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70925/c43b9f6f-5537-698b-6c2e-310e2dbaec92.png)


## コード解説
PCから0xFF, 0x03のデータを送信してArduinoで受信するとuint8_tの型で宣言したbufには`Serial.readBytes(buf, 2);` の行で以下のようにデータが格納されます。
![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70925/3f388444-e662-1ffb-e3f0-af0ff2bec931.png)

分かりやすいように、16進数から2進数で表してみます。 
`uint16_t value16bit = buf[1] << 8 | buf[0];` ではbuf[1]（0x03）を左に8bitシフトし、buf[0]（0xFF）との論理和をとって16bit幅の型をもつvalue16bitに値を格納しています。
![img02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70925/a7a3bd64-6654-c7fa-f42c-886fa94a6040.png)

これで1Byteの範囲(255)までしか送れなかったデータを2Byte(65535)まで拡張できるようになりました。この手法を応用すると24bit、32bitなどさらに大きな数値を送ることが可能になります。

最近はESP8266やESP32など32bit幅のCPUを搭載するマイコンが増えてきました。シリアル通信でこれらのマイコンと通信するときは大きな数値を扱うことが多くなってきますので、ぜひこの手法を活用してみてください。

## 参考リンク
[202. ADXL345 - Fab蔵 Docs](https://sites.google.com/a/gclue.jp/fab-zang-docs/ni-yinkiiot/202-adxl345)
Vue.js の http クライアントの使い方 (Post)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>HTTP Post</title>
</head>
<body>
<div id="app">
<table>
<tr><th>args</th>
<td> {{data_aa.args}} </td></tr>
<tr><th>headers</th>
<td> {{data_aa.headers}} </td></tr>
<tr><th>origin</th>
<td> {{data_aa.origin}} </td></tr>
<tr><th>url</th>
<td> {{data_aa.url}} </td></tr>
<tr><th>headers</th>
<td> {{data_aa.headers}} </td></tr>
<tr><th>json</th>
<td> {{data_aa.json}} </td></tr>
</table>
</div>
<script src="http_post.js"></script>
<p />
Apr/27/2019<p />
</body>
</html>
```

```js:http_post.js
// ---------------------------------------------------------------
//	http_post.js
//
//					Apr/27/2019
//
// ---------------------------------------------------------------
var app = new Vue({
	el: '#app',
	data: {
	data_aa: []
	},
	methods: {
		async getData() {
		const url = 'https://httpbin.org/post'
		const args = {
			data: { user: "jiro", password: "123456" },
			headers: { "Content-Type": "application/json" }
			}

		await axios.post(url,args).then(x => { this.data_aa = x.data })
		}
	},
	mounted() {
		this.getData()
	}
})

// ---------------------------------------------------------------
```

実行結果
![post_apr2701.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/e4398da0-e7bb-8e51-5cdc-2646463cb262.png)
React, Reduxを初心者向けに解説する

# React, Reduxを初心者向けに解説する
React, Reduxで知識が曖昧だったところを復習したのでアウトプットします。

## props
・親コンポーネントから子コンポーネントに渡される
・不変のデータ
・クラスコンポーネントではメンバ変数として`this.props`でアクセスできる
・関数コンポーネントではその関数の引数として扱われる
## state
コンポーネント自身で使われる値
・可変のデータ
・setStateでDOMが更新される
・直接代入は非推奨
・コンポーネントからコンポーネントには渡らない

## コンポーネント
### Classコンポーネント
・ライフサイクルメソッドが使える
・constructorが使える
・stateを持てる

### 関数コンポーネント
・関数名の頭文字は大文字
・関数の引数でpropsを受け取る
・stateを持てない
・ライフサイクルメソッドを持てない

## Redux
Reactのみだと値をバケツリレー形式で親から子に渡していかないといけないがReduxを導入することでどのコンポーネントからでも値を操作できるようになる。
Redux単体でも使えるし、Vueなどとも組み合わせて使える。

### reducer
その時点でのstateから新しいstateを返す
reducer自体は関数

### store
createStoreでstoreを作成する
`const store = createStore(reducer名)`

持っているメソッド
・dispatch
・getState
・subscribe
など

storeの中身

```
{ dispatch: [Function: dispatch],
  subscribe: [Function: subscribe],
  getState: [Function: getState],
  replaceReducer: [Function: replaceReducer],
  [Symbol(observable)]: [Function: observable] }
```

### action

typeは必須でtypeという名前のkeyを含めなければならない
`{type: "ADD_TODO"}`

## react-redux
ReactとReduxを連携させる時に使う。

Providerとconnectを使うことでreactでreduxのstateやdispatchを使うことができる
ちなみにconnectはstoreにアクセスしたいcomponentにのみ使用する。

## 目的別の2種類のコンポーネント
Reduxを導入するとコンポーネントはさらに大まかに2種類に分類することができる。
**PresentationalComponent**と**ContainerComponent**

### PresentationalComponent
見た目を重視したComponentでjsxを使ってHTMLを書いていく。

### ContainerComponent
機能を重視したComponentでstateやdispatcherをPresentationalComponentで使えるようにする。

```javascript
import { connect } from 'react-redux'
import hogeComponent from './components/hogeComponent'

const mapStateToProps = (state) => ({
  
})

const mapDispatchToProps = (dispatch) => ({
  
})

export default connect(mapStateToProps, mapDispatchToProps)(hogeComponent)
```

#### mapStateToProps
stateをpropsとして扱えるようにする為のもの

引数には自動的にstateが入るようになっている。
componentで使用したいstateをここで定義する。
#### mapDispatchToProps
dispatchをpropsとして扱えるようにする為のもの

componentで使用したいdispatchをここで定義する。

#### connectの書き方

```javascript
export default connect(mapStateToProps, mapDispatchToProps)(コンポーネント名)
// ↓mapStateToPropsのみを使う場合
export default connect(mapStateToProps)(コンポーネント名)
// ↓mapDispatchToPropsのみを使う場合
export default connect(null, mapDispatchToProps)(コンポーネント名)
```


## redux-saga

非同期処理を実現する
TBD

# ES6(おまけ)
## ...の意味
...はスプレッド演算子といって中身が展開される

```javascript
a = [1, 2, 3]
b = [a, 4, 5]
// [[1, 2, 3], 4, 5]
c = [...a, 4, 5]
// [1, 2, 3, 4, 5]

foo = {a: 1, b: 2, c: 3}
{...foo}
// {a: 1, b: 2, c: 3}
```

## thisの値
**function**
内部のthisは実行時のレシーバのオブジェクトになる

**arrow function**
内部のthisはこのメンバ関数が定義されているオブジェクトになる
Vue.js の http クライアントの使い方 (Get)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>HTTP Get</title>
</head>
<body>
<div id="app">
<table>
<tr><th>args</th>
<td> {{data_aa.args}} </td></tr>
<tr><th>headers</th>
<td> {{data_aa.headers}} </td></tr>
<tr><th>origin</th>
<td> {{data_aa.origin}} </td></tr>
<tr><th>url</th>
<td> {{data_aa.url}} </td></tr>
</table>
</div>
<script src="http_get.js"></script>
<p />
Apr/27/2019<p />
</body>
</html>
```

```js:http_get.js
// ---------------------------------------------------------------
//	http_get.js
//
//					Apr/27/2019
//
// ---------------------------------------------------------------
var app = new Vue({
	el: '#app',
	data: {
	data_aa: []
	},
	methods: {
		async getData() {
		const url = 'https://httpbin.org/get'
		await axios.get(url).then(x => { this.data_aa = x.data })
		}
	},
	mounted() {
		this.getData()
	}
})

// ---------------------------------------------------------------
```

実行結果
![get_apr2701.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/e87e9057-9aaf-6d9f-54a3-3c9708a867f4.png)
【Rails】JavaScriptが読み込まれなかったとき

app/assets/javascripts/application.jsに書いたJavaScriptは実行されるのに、他の.jsファイルに書いたJavaScriptは実行されませんでした。
その原因はrequireの順番が間違っていたことでした。


# バージョン

Ruby: 2.5.1
Rails: 5.2.3
jquery-rails: 4.3.3
Bootstrap: 4.3.1


# エラーメッセージ
ChromeDeveloperToolsで読み込まれているJavaScriptを確認したところ、以下のようなエラーが出ていました。

```
Uncaught ReferenceError: $ is not defined
```

# 対応

JQueryがまだ読み込まれていないと言われているので、`app/assets/javascripts/application.js`を以下のように修正しました。

```
# Before
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets

# After
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .
```
SQLServer BCPを使うしかない場合

#シチュエーション
EXPORT&IMPORTが失敗する時がある。

#ソリューション
先にスクリプトでスキーマを構成した後、BCPでデータをコピーする。

###移設先DBにすでにデータがあるときは削除しておこう。

```SQL:(全テーブルのDROP文取得)

select 'DROP TABLE ', name
from sysobjects
where xtype = 'U'
order by 2
```

###sql server bcp ホストのデータファイルが開けません
- 指定先、フォルダーを生成しておくこと

```SQL
bcp mydb.dbo.mytable out C:\workspace\BcpData\mydb\mytable.dat -n - k -T -b 10000 -S localhost -U sa -P password
```

- コピー先のフォルダーがあるか確認後、コマンドを管理者権限で実行


#参考
- わかりやすく説明されている。ありがたい。
https://engineermemo.wordpress.com/2014/01/01/rds-%E3%81%AE-sql-server-%E3%81%AB%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%82%92%E7%A7%BB%E8%A1%8C%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AE%E8%A6%9A%E6%9B%B8/

- http://www.projectgroup.info/tips/SQLServer/MSSQL_00000006.html
令和を date コマンドで迎える

平成も残すところあと数日となり、大型連休に旅行や帰省する方も多いかと思いますが、一方で「特に予定なんて無いよ」という方もチラホラ見かけます。
そういった方も、せっかくの連休なので、せめて平成から令和に替わる改元の瞬間を目の当たりにしては如何でしょうか−−date コマンドで。

## 必要なもの

以下の Linux 環境のいずれか

* Red Hat Enterprise Linux 5/6/7 (以下 RHEL)
* CentOS 5/6/7
* Ubuntu 19.04

## 下準備

### RHEL/CentOS の場合

令和対応が含まれる最新の glibc パッケージに更新しておく必要があります。普通に `yum update` しておいて下さい。

* RHEL 5/ CentOS 5：glibc-2.5-123.el5_11.5 以降
* RHEL 6/ CentOS 6：glibc-2.12-1.212.el6_10.2 以降
* RHEL 7/ CentOS 7：glibc-2.17-260.el7 以降

### Ubuntu 19.04 の場合

令和対応が含まれる最新の libc6 パッケージがインストールされている筈です。以下の要領でバージョンを確認して下さい。2.29-0ubuntu2 は対応済みです。

```
$ sudo dpkg -l libc6
要望=(U)不明/(I)インストール/(R)削除/(P)完全削除/(H)保持
| 状態=(N)無/(I)インストール済/(C)設定/(U)展開/(F)設定失敗/(H)半インストール/(W)トリガ待ち/(T)トリガ保留
|/ エラー?=(空欄)無/(R)要再インストール (状態,エラーの大文字=異常)
||/ 名前           バージョン    アーキテクチ 説明
+++-==============-=============-============-=================================
ii  libc6:amd64    2.29-0ubuntu2 amd64        GNU C Library: Shared libraries
```

### RHEL/CentOS/Ubuntu 19.04 共通

インストール時の設定次第では日本語ロケール(ja_JP.UTF-8)が用意されていない可能性がありますので、以下で確認します。

```
$ sudo locale -a
C
C.UTF-8
POSIX
en_US.utf8
$
```
日本語ロケールが無ければ作りましょう。

```
$ sudo locale-gen ja_JP.UTF-8
$
```

glibc の準備が整ったら、動作を確認します。

```
$ export LC_ALL=ja_JP.UTF-8
$ date +%Ec
平成31年04月27日 16時17分40秒
$
```

令和対応しているかどうか確認します。

```
$ date +%Ec -d 20190501
```

令和対応していれば以下のように表示されます。

```
$ date +%Ec -d 20190501
令和元年05月01日 00時00分00秒
$
```

未対応なら以下のように表示されます。

```
$ date +%Ec -d 20190501
平成31年05月01日 00時00分00秒
$
```

## 改元の瞬間を見る

2019/4/30 23:59 になったら、以下のコマンドを実行します。

```
$ while sleep 1; do date +%Ec; done
```

1秒毎に1行、date コマンドの出力が表示されるはずです。

```
$ while sleep 1; do date +%Ec; done
平成31年04月30日 23時59分00秒
平成31年04月30日 23時59分01秒
平成31年04月30日 23時59分02秒
```

後はただ、日付が変わるのを待ちます。

## OS が古い場合

何らかの事情で上記の OS 環境が用意できず、古い Linux 環境しかない場合、以下のようにインスタントな Ubuntu 19.04 環境を用いる方法もあります。

私は Ubuntu 18.04.2 上で動作確認しました。

1. [Ubuntu Cloud Image](https://cloud-images.ubuntu.com/disco/current/)から [Ubuntu 19.04 の root イメージ](https://cloud-images.ubuntu.com/disco/current/disco-server-cloudimg-amd64-root.tar.xz)をダウンロードします。
2. ディレクトリを１つ作り、その中で上記アーカイブを解凍します。
   
    ```
    $ mkdir /tmp/s
    $ sudo tar -C /tmp/s -xf disco-server-cloudimg-amd64-root.tar.xz
    $
    ```
   
3. chroot で Ubuntu 19.04 環境に移行します。

    ```
    $ sudo chroot /tmp/s
    #
    ```

4. 日本語ロケールを生成します。

    ```
    # locale-gen ja_JP.UTF-8
    Generating locales (this might take a while)...
      ja_JP.UTF-8... done
    Generation complete.
    #
    ```

5. 環境変数に日本語ロケールを、タイムゾーンに東京を設定します。warning は無視して構いません。

    ```
    # export LC_ALL=ja_JP.UTF-8 TZ=Asia/Tokyo
    bash: warning: setlocale: LC_ALL: cannot change locale (ja_JP.UTF-8)
    #
    ```

6. date コマンドの動作確認を行います。

    ```
    # date +%Ec 
    平成31年04月27日 07時35分02秒
    # date +%Ec -d 20190501
    令和元年05月01日 00時00分00秒
    #
    ```

## 参考

* [赤帽エンジニアブログ：RHELの新元号「令和」対策お済みですか](https://rheb.hatenablog.com/entry/new_era_reiwa)
Express.js(Typescript), Node.js をホットリロードしながら開発する2つの方法

# 目的
- Express.js(Typescript) や Node.js の開発を進めていく上で、コード変更を検知してホットリロードする方法2つを紹介します。
- 最後の方で、どちらを使ったほうがいいか書いてあるので、参考にしてみてください。

# 環境
- Node: v10.15.2
  - [nodeenv](https://github.com/nodenv/nodenv)を利用し、プロジェクトごとにバージョンを指定することがおすすめです。

# 利用するパッケージ

## 1. ts-node-dev

#### [公式リファレンス](https://www.npmjs.com/package/ts-node-dev)

#### [github](https://github.com/whitecolor/ts-node-dev)

### 使用方法
#### 1. packageをinstall

```shell

$ yarn add --dev ts-node-dev
```

#### 2. 設定ファイルを作成(任意)
- 作成しなくてもいいですが、リロードするために通知がきてしまう設定はOFFにしておくことをおすすめします。

```shell

$ touch .node-dev.json
```

- 中身

```json
{
  "notify": false // これがないとコード変更するだけで通知がくるので、設定しておくことがおすすめです
}
```

#### 3. アプリ実行コマンド

```shell


$  ts-node-dev [your node app]
```

## 2. nodemon

#### [公式リファレンス](https://nodemon.io/)

#### [github](https://github.com/remy/nodemon/)

#### 使用方法

#### 1. packageをinstall

```shell

$ yarn add --dev nodemon
```

#### 2. 設定ファイルを作成
- プロジェクトのルートディレクトリに作成します

```shell

$ touch .nodemon.json
```

中身

```json
{
    "watch": ["./src"], // watchするディレクトリを指定
    "ext": "ts,json", // watchするファイルの拡張子を指定(カンマ区切りで複数選択可能)
    "exec": "ts-node src/index.ts" // ファイルが変更された時に実行するコマンド
}
```

#### 3. アプリ実行コマンド

```shell

$ nodemon [your node app]
```


## どちらを利用すべきか
- ts-node-devのほうがリロード処理が圧倒的に早かったので、ts-node-devを利用することを勧めます。
  - 毎回ts-nodeコンパイルを実行する必要がない分、nodemonより早くリロードを行うことができます。

公式ドキュメントより抜粋
> This significantly increases speed of restarting comparing to node-dev -r ts-node/register ..., nodemon -x ts-node ... variations because there is no need to instantiate ts-node compilation each time.

- ただ、記事執筆時(2019/04)にGithubをみる限り、スターの数はnodemonのほうが多く、開発も継続的に行われています。また、どちらも簡単な設定で使用することができるので、実際に両方試したりドキュメントを読んだりして、自分に合っているほうを見つけてみるのでもいいと思います。
Node.js 6.10で動いているAWS LambdaをWindows標準環境で調査

#概要
[Node.js 6.10で動いているAWS Lambdaの関数をAWS CLI + jqで調べる](https://qiita.com/motchi0214/items/169081afca44640fc73c)の記事でも紹介されている通り、AWS LambdaのNode.js6.10のランタイムがEOLとなります。それをWindowsの標準環境で調査するスクリプト（というほどのものではないですが）をメモついでに記載します。

#スクリプト
存在しなければリージョン名だけ表示。

```powershell:find_nodejs610.ps1
$array = "us-east-1","us-east-2","us-west-1","us-west-2","ca-central-1","eu-central-1","eu-west-1","eu-west-2","eu-west-3","eu-north-1","ap-northeast-1","ap-northeast-2","ap-northeast-3","ap-southeast-1","ap-southeast-2","ap-south-1","sa-east-1"

foreach($region in $array){
    echo "--- $region ---"   
    aws lambda list-functions --output text  --region $region | findstr nodejs6.10
}
```

多くの方は大阪リージョン（ap-northeast-3）を使用されていないと思いますので、そこだけエラー（An error occurred (AccessDeniedException) when calling the ListFunctions operation: None等）が返るとおもいます。

また、参考記事と同様、大量のファンクションを保有している方は、一度のAPI実行でリスト仕切れないと思いますので、下記の--starting-tokenオプションのNextTokenについてご参照ください。
https://docs.aws.amazon.com/cli/latest/reference/lambda/list-functions.html
JavaScript入門4~ファンクション,配列~

#ファンクションの書き方#

```js

var ファンクション名 = function(要求するパラメータ) {
   処理内容
}
```

名無しのファンクションを作成して,変数に代入しています.

#配列#

##作成##
`var 変数名 = [];`
`var 変数名 = [データ0,データ1,...データx];`

##すべての項目を読み取る##

```js
for (var i = 0; i < 配列名.length;　i++){
  処理内容
}
```

配列の要素数は`配列名.length`でわかります.

##配列のメソッド##
| メソッド名      |       意味 |
|-----------------|------------------|
| 配列名.pop() | 配列の最後のデータを取り出す| 
| 配列名.push(データ) |配列の最後にデータを追加する |
| 配列名.shift() |配列の最初のデータを削除する|
|配列名.unshift(データ1,データ2...)|配列の最初にデータ1,データ2...を追加する|  

##配列の項目ごとにリストを作成##
```js
for (var i = 0; i < 配列名.length; i++) {
  var li = document.createElement('li');
  li.textContent = 配列名[i];
　document.getElementById(`list`).appendChild(li);
}
```

1. `document.createElement(タグ名)`でタグを生成します.今回はliタグ.
2. 生成したliタグのテキストコンテンツに配列の要素を代入
3. `取得した要素.appendChild(挿入したい子要素)`を使って,取得した要素に子要素を代入する.今回はlist要素にli要素を挿入する.
自分用勉強メモ8日目

# tips

## gmpy2のインストールに失敗した．

gmpy2は，[GMP](https://ja.wikipedia.org/wiki/GNU_Multi-Precision_Library)のPython用のラッパーである．
GMPは，非常に大きな数を計算するのに役に立つライブラリである．
gmpy2を使えば，百桁以上の整数に対しても√の計算を行ったりすることができる．

pipでインストールしようとしたらエラーが出た．

```bash
$ pip install gmpy2
(...)
    In file included from src/gmpy2.c:426:
    src/gmpy.h:252:12: fatal error: 'mpfr.h' file not found
    #  include "mpfr.h"
               ^~~~~~~~
    1 error generated.
    error: command 'clang' failed with exit status 1
    
    ----------------------------------------
(...)
```

どうやら依存関係にあるライブラリが足りないらしい．
[このサイト](https://stackoverflow.com/questions/23187801/installing-gmpy-on-osx-mpc-h-not-found)を参考に以下を実行．

```bash
brew install mpfr mpc libmpc
pip install gmpy2
```

正常にインストールすることができた．

# CpawCTF

## [Q29.[Crypto] Common World](http://ctf.cpaw.site/questions.php?qnum=29)

どうやらRSA暗号を解く問題らしいが，現実的な時間で解けないから今でも使われているのでは．．．
と，どうしていいかわからず，調べた．

[公開鍵暗号 RSA - Common Modulus Attack, 秘密鍵からの素因数分解](http://elliptic-shiho.hatenablog.com/entry/2015/12/14/043745)

限定的な状況であればこれを解く方法はいくつかあるらしく，本問はその1つに該当する．
Common Modulus Attackが適用できる条件は以下の通り．

- ある平文に対して公開鍵(e1, n), (e2, n)と暗号文c1, c2が渡されている．
- e1とe2は互いに素である．

この復号方法を実装している[例](https://blog.akashisn.info/entry/2018/08/07/132209)を発見したので，利用させてもらった．

また，今回のフラグには意味があるらしく，`暗号 数字 1から5`で検索したら[ポリュビオスの暗号表](https://ja.wikipedia.org/wiki/%E3%83%9D%E3%83%AA%E3%83%A5%E3%83%93%E3%82%AA%E3%82%B9%E3%81%AE%E6%9A%97%E5%8F%B7%E8%A1%A8)というものを見つけた．
1から5までの数字の組で1つのアルファベットを表す．

Pythonでこれを解いてみる．

```Python
import sys

TABLE = {
    '1': {'1': 'A', '2': 'B', '3': 'C', '4': 'D', '5': 'E'},
    '2': {'1': 'F', '2': 'G', '3': 'H', '4': '(I,J)', '5': 'K'},
    '3': {'1': 'L', '2': 'M', '3': 'N', '4': 'O', '5': 'P'},
    '4': {'1': 'Q', '2': 'R', '3': 'S', '4': 'T', '5': 'U'},
    '5': {'1': 'V', '2': 'W', '3': 'X', '4': 'Y', '5': 'Z'},
}


def conv_polybius(text):
    ret = ''
    for i in range(0, len(text), 2):
       ret += TABLE[text[i]][text[i+1]]
    return ret


if __name__ == '__main__':
    text = sys.argv[1]
    ans = conv_polybius(text)
    print(ans)
```

これで2019年4月27日現在で掲載されているすべての問題を解き終えた．
[CpawCTF2](https://ctf2.cpaw.site)もあるので，次はこちらに挑戦する．
業務の現場で求められる「美しいソースコード」

# 業務の現場で求められる「美しいソースコード」とは？

何やら巷では、こんなことが話題になっているらしい。

https://twitter.com/matsun_research/status/1121076982127529985

> ★同じ動作をするプログラムでも、ソースコードの書き方は人それぞれで変わってきます。わかりやすく「美しい」ソースコードは業務の現場では、あまり求められません。動けばＯＫと気楽に♪

# そもそもプログラマーとは「ソロアーティスト」か「オーケストラの演奏者」か。

## 「ソロアーティスト」的プログラマー

プログラミングという仕事は、職人や芸術家、ソロアーティストのように、その独自の発想性・創造性を発揮し、その人間にしか作れないものを生み出す仕事である、という側面がある。

ナーシャ・ジベリというプログラマが居た。もっとも有名なのは、ファミコン版ファイナルファンタジーにおいて、飛空艇の４倍高速移動を実現させたことであろう。

金子勇というプログラマがいた。Peer to Peer技術を利用したファイル共有ソフト Winnyを実現した。

天才というにふさわしいプログラマは存在する。そして天才は、天才にしかなすことのできない仕事をしてきた。その仕事は確かに「美しい」ともいえるだろう。

## 「オーケストラの演奏者」的プログラマー

プログラミングという仕事は、オーケストラの演奏者のように、与えられた仕事を確実にこなすこと、そして、その仕事を確実に次に引き継ぐ仕事である、という側面もある。

無論、一人ひとりに高い能力が求められることはある。だがそれ以上に、周囲から協力を引き出し、また、周囲へ協力をすることで、個々人の能力の総和以上の成果を、組織として引き出す仕事でもある。その仕事は確かに「美しい」ともいえるだろう。

# 相反する「美しさ」

これらの美しさは（完全にとは言わないが）相反する「美しさ」である。

その人間にしかできない仕事をしてしまえば、他の人間がその内容を理解する事もできず、保守もできず、そして問題が起きれば一人の人間に依存せざるを得ない。そしてその人間以上の才能を持った人間が出てこない限りは、それ以上の成果を見込むことができなくなる、

一方で、組織で仕事をしようとするならば、そのために無駄が生じる事もリスクになる。誰にでもわかるようにドキュメントを用意し、ソースコードをきれいに書き直し、あるいは、変数名をわかりやすくする。そうした努力は、直接的な成果とは違い部分であり、時として「そこまでは求めていないよ」となる。

# じゃあ、どういう教育をすればいいのか？

- 1) 失敗しても、何も壊れない。
- 2) 要求を満たさねば意味がない。
- 3) 他人に対して説明できる
- 4) 優れているという観点は多数ある。

## 失敗しても、何も壊れない

まず、プログラミングは **成功パターンを見つけるために、失敗を何度でも繰り返すもの** ということを教育に入れなければならない。

例えばプログラミングの試験を考えてみよう。プログラミングに関する知識については確かにペーパーテストでよいだろう。しかし、実技に関して言えばペーパーテストなど意味がない。 **トライアルアンドエラーで、納得できる結果を残せ** ばよいのだ。そのためには、プログラミングは **コンピュータ内で行われる実験であり、何度失敗しても基本的にはそのままもう一度チャレンジできる** ということを教えなければならない。

## 要求を満たさねば、意味がない

そのうえで、ソースコードに求められるのは、要求をしっかりと満たさねば、価値がない事である。

> 1~10までの総和を表示するプログラムを作りなさい

に対して、

> int i,sum;
> for(i=1,sum=0;i<=10;i++){sum+=i;}
> printf("%d",sum);

とまじめにループで書いても、

> printf("%d", ( 1 + 10 ) * 10 / 2 );

と公式を使っても、

> puts("55");

で即値で回答しても、全部要求を満たしている。

**求められている要求を満たしているならば、それは正解である。要求を満たしていないものは価値がない** ということを学ばせるべきである。

## 他人に対して、説明ができる

「業務としてのプログラミング」では、他人に対してソースコードの内容を説明できなければならない。

その日１日で終わる仕事だったら、引継ぎなんかもいらない。しかし、１日で終わらない仕事ならば、次の日に別の人がその業務を引き継げなければ、誰もそれをフォローできなくなってしまう。

プログラミングにおいては他人とソースコードを共有する事が非常に勉強になる。ある結果を生み出すための過程は多様であり、その中で自分が思いつかなかったものがあれば、それをどんどん吸収するべきなのである。

**自分しか保守できないソースコードは、機能性がどんなに優れていても、将来的にゴミにしかならない** ということを学ばせるべきである。

## 優れている、という観点は複数ある

そのうえで、プログラミング教育で学ぶべき点は **優れている、という価値は複数あり、すべての価値を全うできる答えはごく少数。何を求めているのかに応じて、同じものが無価値になったり、最高になったりする** 事であろう。

例えば、速度を優先するならば、精度を無視したり、扱える範囲を限定的にしてもよい **場合もある**。 また、誰にでも読めるようにするために、 **非効率でも丁寧に記載することが望ましい** こともある。

例えば、図工などであれば、１人の人間がものを作る機材や時間は限られているので、１つの結果しか出せないだろう。そして、１つ作ると、それを改良することは難しい。

だが、プログラミングならばそれができる。 **１つのソースコードを基に改良し、改善し、いじくりまわすことができる。なんなら、他人のソースコードをもらってきて、自分好みに改良することもできる**。　このことがこれまでの教育課程にはなかった話なのだ。

# まとめると

本当はこう書くべきだったのではないか。

> ★同じ動作をするプログラムでも、ソースコードの書き方は人それぞれで変わってきます。業務の現場では、"できる限り一番いいやり方"のソースコードが求められます。でもそれは、たった１回のチャレンジの中で見つけるものではありません。自分のソースコードを直したり、先生や他人のソースコードを見たりして、良いところが何かを学び、そして自分が満足できるソースコードを目指しましょう♪
Unityで目がキュイーンってなってる感じを演出する

#はじめに
デスノートの死神の目を再現したAndroidアプリをUnityで開発しました．記事は[こちら](https://qiita.com/takaya901/items/9f4c87a3d51ea019520f)．画面をタッチされたらMicrosoft AzureのFaceAPIにデータを送って年齢推定し，結果が返ってきたら年齢を表示するのですが，どうしてもタッチしてから結果が返ってくるまでにラグがあります．初めて使う人に「え，何も起きないじゃん」と思わせてしまうとよくないので，その間になにか演出を入れようと思いました．

そこで，以前から使ってみたかったPostProcessingを試してみることにしました．Lens Distortionを使えば目で覗き込んでいる感じが出せるのではと思い，以下のような演出を加えました．

https://www.youtube.com/watch?v=tG7eG8N4YuM

#実装

##PostProcessingをスクリプトから制御する
PostProcessingを利用するための設定は[こちらの記事](https://gametukurikata.com/effect/postprocessingv2)を参考にさせていただきました．
タッチされたらゆっくり歪ませ，結果が返ってきたらゆっくり元に戻したいので，PostProcessingのパラメータをスクリプトで制御する必要があります．

VolumeやらLayerやらSettingやらややこしいですが，制御方法は[ここ](https://answers.unity.com/questions/1355103/modifying-the-new-post-processing-stack-through-co.html)に書いてありました．

##エフェクトをゆっくり変化させる
パラメータの取得ができたので，次にそれをなめらかにゆっくり変化させます．今回はLens DistortionのIntensityをMathf.SmoothDamp()を使って変化させました．

```cs
_distortion.intensity.value = Mathf.SmoothDamp(_distortion.intensity.value, 100f, ref _currentIntensity, 0.2f);
```
第4引数のsmoothTimeの単位がよくわからないので，体感で2秒くらいになるよう調整した結果0.2fになりました．ご存知の方おられたら教えていただきたいです．

SmoothDampは呼ばれるたびに少しずつ値を変化させるので，「画面タッチされたらエフェクトをゆっくり変化させる」といった場合，以下のように書くと一瞬しか変化しません．

```cs
void Update(){
    if(タッチされた){
        _distortion.intensity.value = Mathf.SmoothDamp(_distortion.intensity.value, 100f, ref _currentIntensity, 0.2f);
    }
}
```
したがって，タッチされたら結果が返ってくるまでフラグを立てて，変化し切るまでSmoothDampを呼び続ける必要があります．

```cs
void Update(){
    if (タッチされた) {
        _distortion.intensity.value = Mathf.SmoothDamp(_distortion.intensity.value, 100f, ref _currentIntensity, 0.2f);
        _isWaiting = true;
        SendToFaceApi();    //FaceAPIにデータ送信．結果が返ってきたら_isWaitingを下ろす
    }
    if (_isWaiting) { //結果待ち中
        _distortion.intensity.value = Mathf.SmoothDamp(_distortion.intensity.value, 100f, ref _currentIntensity, 0.2f);
    }
}
```
結果が返ってきたら，今度はゆっくり元に戻します．

```cs
_distortion.intensity.value = SmoothDamp(_distortion.intensity.value, 0f, ref _currentIntensity, 0.2f);
```

#終わりに
PostProcessingやMathf.SmoothDamp()は初めて使ったので難しかったですが，おかげでそれっぽい演出を追加できました．ただ，人に体験してもらうと「なにこれ？」って感じになってしまい，また歪んでる時間が結構長いため「歪ませて終わり？」と不安になってる人もいました．このあたりのUXについても勉強していきたいですね．
TensorFlow2.0を使ってFashion-MNISTを畳み込みニューラルネットワーク（CNN）で学習する（Data Augmentationの効果確認）

# はじめに
[前回](https://qiita.com/shoji9x9/items/35adc2bd48ab531a3a01)、Data Augmentationのやり方を理解したため、[前々回](https://qiita.com/shoji9x9/items/f74a0f7c9da1de099d4d)のモデルに対してData Augmentationを行うことでどうなるかを見ていきたいと思います。

# 環境
* Google Colaboratory
* TensorFlow 2.0 Alpha

# コード
[こちら](https://colab.research.google.com/github/shoji9x9/Fashion-MNIST-by-CNN-with-augmentation/blob/master/Fashion-MNIST-by-CNN-with-augmentation.ipynb)です。
なぜかGitHub上ではうまく開けませんでした。GitHubのURLは[こちら](https://github.com/shoji9x9/augmented-Fashion-MNIST-by-CNN)です。

# コード解説
## Data Augmentationの設定
```Python
from tensorflow.keras.preprocessing.image import ImageDataGenerator

#datagen = ImageDataGenerator()
datagen = ImageDataGenerator(rotation_range = 10, horizontal_flip = True, zoom_range = 0.1)
```

今回は回転、左右反転、ズームを行うことにしました。コメント行はData Augmentationを行わない場合と精度比較をするためのもので、どちらかをコメントアウトし実行するようにしました。

## 学習
```Python
import time

num_epoch = 80
start_time = time.time()

#train_accuracies = []
#test_accuracies = []
train_accuracies_with_da = []
test_accuracies_with_da = []


for epoch in range(num_epoch):    
    for image, label in dataset_train:
        for _image, _label in datagen.flow(image, label, batch_size = batch_size):
            train_step(_image, _label)
            break
        
    for test_image, test_label in dataset_test:
        test_step(test_image, test_label)
        
    #train_accuracies.append(train_accuracy.result())
    #test_accuracies.append(test_accuracy.result())
    train_accuracies_with_da.append(train_accuracy.result())
    test_accuracies_with_da.append(test_accuracy.result())
    
    
    template = 'Epoch {}, Loss: {}, Accuracy: {}, Test Loss: {}, Test Accuracy: {}, spent_time: {} min'
    spent_time = time.time() - start_time
    print(template.format(epoch + 1, train_loss.result(), train_accuracy.result() * 100, test_loss.result(), test_accuracy.result() * 100, spent_time / 60))
```
後ほどグラフ描画するため、train_accuracies_with_daやtest_accuracies_with_daに結果を保存しておきます。Data Augmentationしない場合は、コメントアウトを反転させ、train_accuraciesやtest_accuraciesに結果を保存します。

# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337041/966c02ed-1c59-9e9f-105e-070081a9a414.png)

80エポック訓練した結果、かろうじてData Augmentationした方が精度がよくなっており、Data Augmentationありの精度は92.2%でした。Train Accuracyの方はData Augmentationするかどうかで過学習度合いに差があるようです。  
今回はそれほどData Augmentationの効果は大きくなかったのですが、どれだけの効果を発揮するのかは元のデータセットの数や特性に因ると思います。

# 次の取り組み
ResNetに取り組みたいと思います。
Gem::LoadError: can't activate mysql2 (< 0.6.0, >= 0.4.4), already activated mysql2-0.3.18. Make sure all dependencies are added to Gemfile.

Qiita初投稿です。
#バージョン情報など
Ruby 2.5.1
Rails 5.2.3
MySQL@5.6
#状況
gemファイルのmysqlの行を
```  gem 'mysql2', '0.3.18'
```と変更した後、
ターミナルより
```$rake db:create
```を実行したところ、
```rake aborted!
LoadError: Error loading the 'mysql2' Active Record adapter. Missing a gem it depends on? can't activate mysql2 (< 0.6.0, >= 0.4.4), already activated mysql2-0.3.18. Make sure all dependencies are added to Gemfile.```
とエラーが出て先に進めない。
#解決策
ターミナルの入力を
```$bundle exec rake db:create
```としたところ解決した。
#原因
原因としては、bundlerというのはプロジェクトごとにgemのバージョンを指定しているため、bundle execをつけないとシステム共通の場所で実行されてしまうよう。
この辺、まだまだ知識が浅かったので勉強したい。

https://qiita.com/dawn_628/items/1821d4eef22b9f45eea8
この方が丁寧に解説してくださっていました。
AWS EC2のUbuntuServerにMacからリモートデスクトップ接続を行う

#AWS EC2のUbuntuServerにMacからリモートデスクトップ接続を行う

## 手順
#### インスタンスを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69701/47b149d9-40c5-af53-5a36-a43a571919af.png)

#### Ubuntu Server 18.04 を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69701/3dad3d13-6dd0-806e-cf04-f66e74e92214.png)

#### 自動割当パブリックIPが　サブネット設定を使用（有効）になっていることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69701/7da6c848-4be7-9eb5-42c9-d95fbbc4ff80.png)

#### セキュリティグループの設定でRDPポートを開放
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69701/d52f9074-f62f-888d-60bf-5a869faf5580.png)

#### ローカルからSSH接続
表示されているコマンドにならい、SSH接続を行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69701/aeef8601-102c-8095-6720-b91187254a49.png)

#### パッケージの更新／インストール

```
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt install xrdp xfce4 xfce4-goodies tightvncserver
$ sudo service xrdp restart
```

#### パスワードの設定
```
$ sudo passwd ubuntu 
# パスワードを入力
```

#### Remote Desktopで接続
[リモートデスクトップアプリ](https://itunes.apple.com/jp/app/microsoft-remote-desktop-8/id715768417?mt=12)を入手して
リモートデスクトップで設定事項を設定して接続をします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69701/868a1cdd-2163-2963-c5a5-d1fa8ef05c17.png)

#### 接続
こんな感じで接続ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69701/c1c44931-98b6-fb77-c7e5-aad4d64ca088.png)
Raspberry Pi3でpigpioライブラリを使って割り込みをする

#pigpioライブラリを使って割り込み
pigpio library
http://abyz.me.uk/rpi/pigpio/cif.html

充実したライブラリで色々できるのですが、
公式にあるExamplesの使い方がよくわからなかったのでメモします。

また、LED出力など、コンピュータの計算結果を出力する方法
の記事は豊富にあるのですが、
コンピュータに対して実世界の情報を入力して計算させる方法
の記事があまりなかったので1つの例としてまとめます。


##pigpioライブラリインストール
```
$ sudo apt install pigpio
```

##配線図
GPIO4を使用します。
<img width="736" alt="スクリーンショット 2019-04-27 14.33.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258049/23c985c7-b2ed-1344-f5fc-36f10a8d3e40.png">


##ソースコード
```interrupt.c
#include <stdio.h>
#include <pigpio.h>

void interruptDisplay( int gpio, int level, uint32_t tick)
{
    static int c = 1;
    printf("Interrupt #%d level %d at %u\n", c, level, tick);
    c++;
}

int main(int argc, char *argv[])
{
   int ret;
   unsigned int gpio;

   if (gpioInitialise()<0) return 1;

    /* Set GPIO modes */
   gpioSetMode(4, PI_INPUT);
   gpioSetPullUpDown(4, PI_PUD_UP);
   
    printf("GPIO4 is level %d\n", gpioRead(4));

    ret = gpioSetISRFunc(4, FALLING_EDGE, 5000, interruptDisplay);
    if(ret < 0) printf("error");

   while (1)
   {
    time_sleep(60);
   }

   gpioTerminate();
}

```
##コンパイル
```
$ gcc -o interrupt.out interrupt.c -lpigpio -lpthread
```

以前にMakefileの書き方について記事を書いたので、せっかくなのでMakefileも作成。
https://qiita.com/nullpo24/items/716bad137f1264b776f5

Makefile

```
CC = gcc
LIBS = -lpigpio -lpthread
LDFLAGS = -L /usr/lib -L /usr/local/lib

interrupt.out : interrupt.o

.c.o:
	$(CC) -c $< -o $@
.o.out:
	$(CC) $< -o $@ $(LIBS)
clean:
	rm -f *.out
	rm -f *.o
```

コンパイル(Make)

```
$ make
```

##実行
```
$ sudo ./interrupt.out
```


#ソースの解説
###初期化と終了処理
pigpioライブラリは初期化と終了処理が必要です。
初期化:gpioInitialise()
終了処理:gpioTerminate()
###GPIO4番ピンを入力モードにする
gpioSetMode(4, PI_INPUT);
###GPIO4番ピンの電圧の引き上げ
gpioSetPullUpDown(4, PI_PUD_UP);
PI_PUD_UPで電圧レベルを1にする。すなわち3.3V。

###コールバック関数をセット
gpioSetISRFunc(4, FALLING_EDGE, 5000, interruptDisplay);


##割り込みのタイミング
FALLING_EDGEに設定しているので、エッジが落ちた時に割り込みが発生します。
<img width="665" alt="スクリーンショット 2019-04-27 15.06.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258049/871387b4-5eaa-6538-b770-74d123845192.png">


##コールバック関数について
コールバック関数とは他の関数に引数として渡す関数のことです。

gpioSetISRFunc関数はISR(Interrupt Service Routine)に対し、
コールバック関数(interruptDisplay())を登録します。
そして、GPIOの割り込みが発生するとISRが働きコールバックされるようにしているようです。
<img width="719" alt="スクリーンショット 2019-04-27 15.44.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258049/72bdb865-f903-9945-44e4-b163b4cc4efd.png">




また、Linuxではマウスやキーボードなどの優先順位が高い割り込みが発生すると、このISRが働きます。

gpioライブラリは他にもコールバックを実現する関数として
gpioSetAlertFunc
gpioSetTimerFunc
gpioSetSignalFunc
などが用意されています。

##終わりに
どんな複雑なプログラムでもほどけば1本のひも(スレッド)になると言われています。
しかし、イベント処理(状態の変化)を非同期で実装する場合は、
今回の例のように2本以上のひもが必要です。


<!--ライブラリ依存ではなく自分で何か作りたい場合はデバイスドライバを作成する必要があります。-->
Reactで<div>のonKeyDownイベントが実行されない時の対処法

# TL;DR(要約)

- `<div>`をフォーカスを持たせるためには、`tabIndex`属性を使用する。
- Tabキーで`<div>`に到達可能にするなら`tabIndex={0}`、到達不可にするなら`tabIndex={-1}`を`<div>`に追加する。

# 前書き

私事ですが、Githubが提供しているOSSの [Github Desktop](https://desktop.github.com) の[コントリビューターになりました](https://github.com/desktop/desktop/pull/7315)。
コントリビューターになるために対応したIssue以外にも、Github DesktopのIssuesにて[表示中のリストがEscキーを入力しても非表示に切り替わらない不具合](https://github.com/desktop/desktop/issues/7177)が報告されていました。
![BeforeFixToCloseDropdown.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300336/7cb9304c-31a9-18d9-e72a-ffd2300b6cf9.gif)
コントリビューターになりましたが、ボタンのラベルを変えただけだったのでこの[不具合の対処も行ってみました](https://github.com/desktop/desktop/pull/7406)。

# 対処法

Github DesktopはReactを使用しています。
そのReactで`<div>`の`onKeyDown`イベントが実行されないという質問が [stackoverflow](https://stackoverflow.com/questions/43503964/onkeydown-event-not-working-on-divs-in-react) に投稿されていました。
質問の回答では、`tabIndex`を使用することで解決すると書かれていたので、実行しました。

```tsx:app\src\ui\toolbar\dropdown.tsx
...
        <div
          className="foldout"
          style={this.getFoldoutStyle()}
          tabIndex={-1} // 追加
          onKeyDown={this.onFoldoutKeyDown}
        >
          {this.props.dropdownContentRenderer()}
        </div>
...
```

実行結果は以下のGIFになります。
![FixToCloseDropdown.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300336/77e96dcb-1ea7-4d72-1637-ec130e9ba78e.gif)

# 原因

`<div>`は入力要素ではないので、デフォルトではフォーカスを持てないというHTMLの仕様によるものでした。
そのため`<div>`にフォーカスを持たせるには、`<div>`に明示的に`tabIndex`を設定する必要があります。

## 例

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="roottool" data-slug-hash="oOmyEL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="oOmyEL">
  <span>See the Pen <a href="https://codepen.io/roottool/pen/oOmyEL/">
  oOmyEL</a> by roottool (<a href="https://codepen.io/roottool">@roottool</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 後書き

## 皆さんもOSSのコントリビューターになってみませんか？

[Github Help Wanted](http://github-help-wanted.com/)というGithub上で公開されているIssueを検索出来るサイトがあります。
皆さんも`help wanted`タグがついたIssueの解決に貢献して、OSSのコントリビューターになってみてはいかがでしょうか。
各OSSに作成されているIssue内でも`good first issue`タグのついたIssueは、対象のOSSに対するIssueに初めて取り組む方向けなIssueになっています。

## 英語でプルリクエストを書くのは難しそう

**小難しい説明はGoogle翻訳で翻訳した英文、翻訳結果の英文を推敲した英文、拙い英文でも大丈夫です。**
コードレビューでコードの指摘はあれど、英文については通じたのか指摘された経験はありませんでした。
不安であれば、プルリクエストを作成する対象のOSSに既に作成されているプルリクエストの文章を参考にすると良いと思います。
自分の場合は、プルリクエストの詳細を簡潔に記載している英文があればその言い回しを真似たりしています。(例：This PR fixes ~.)

## 最後に

Thank you for your patience and cooperation!(あなた方の忍耐と協力に感謝します！)