OmniAICreator/Qiita-1.07M huggingface dataset:
いまさらPython3（データ構造編）

# はじめに
自分用のPython3として基本的なデータ構造を記載する。正確性より実用性を重視する。
（Javaや.NETを主に使ってる自分が、Pythonを使うためのページです）
Pythonの制御構造は、[いまさらPython3（制御構造編）へ](https://qiita.com/hos20r1/items/acd331c36403b96b5a1b)

# Pythonのデータモデルの考え方
>...(前略)...。Python プログラムにおけるデータは全て、オブジェクトまたはオブジェクト間の関係として表されます。(ある意味では、プログラムコードもまたオブジェクトとして表されます。...(後略)...)
>[（引用）Python言語リファレンス　３．データモデルより](https://docs.python.org/ja/3/reference/datamodel.html#data-model)

このように、Pythonはすべてのデータをオブジェクトとして扱う。このことを知っているとPythonを理解しやすい。

# 数値型（数値オブジェクト）
|型名   |区分|内容                  |
|:------|:--|:---------------------|
|int    |整数型|無制限範囲の整数を表現|
|bool   |整数型|TrueまたはFalseを表現|
|float  |実数型|倍精度浮動小数点数|
|complex|複素数型|複素数を表現(倍精度浮動小数点を2つ)|
- 数値オブジェクトは、変更不能体(immutable)

# 単一の値しかない型
- None：存在しないを示す値。真偽値はFalse。
- NotImplemented：実装していないことを示す値。真偽値はTrue。
- Ellipsis：何かが存在していることを示す値（リテラル'...'など）。真偽値はTrue。

# シーケンス型
|      |変更不能体型名|生成例         |変更可能体型名|生成例       |
|:-----|:-------------|:--------------|:-------------|:------------|
|文字列|string        |"ABC"          |-             |-            |
|配列  |tuple         |(1,2,3,"ABC")  |list          |[1,2,3,"ABC"]|
|バイト|bytes         |b"\x41\x42\x43"|bytearray     |bytearray(b"\x41\x42\x43")|

## インデックスとスライシング
### インデックス
シーケンスの要素にアクセスする。

```py:インデックスの例
word = 'Python'
print(word[1])  # yが出力される
print(word[-1]) # nが出力される
```

書式：シーケンスオブジェクト名[インデックス]
インデックスが0以上の場合、シーケンスの先頭から要素にアクセスする。0が先頭の要素、長さ-1が末尾にアクセスする。
インデックスが-1以下の場合、末尾からアクセスする。-1が末尾の要素、-1×シーケンスの長さが先頭にアクセスする。

### スライス
シーケンスの一部を切り出す。新たなシーケンスを作成する（深いオブジェクトのコピーはしない）

```py:スライスの例
squares = [1, 3, 9, 16,25]
print(squares[0:2])   # [1, 3]が出力される
print(squares[0:5:2]) # [1, 9, 25]が出力される
print(squares[-3:-1]) # [9, 16]が出力される
print(squares[-1:-6:-2]) # [25, 9, 1]が出力される
``` 

書式：シーケンスオブジェクト[開始インデックス:終了インデックス:ステップ]

開始インデックスと終了インデックスの指定は、インデックスの指定と同じ。
ステップは、指定した値置きのシーケンスを作る。値の正が先頭から末尾へ、負は末尾から先頭への指定となる。

# マッピング型(Dictionary)
Pythonの組み込み型では、Dictionary型１つである。
Dictionaryは、キー(key)と値(value)の組み合わせで管理する。変更可能体である。

```py:Dictionaryの例
dic = {'k1':1111, 'k2':2222}
dic['k3'] = 3333 # 新しいキーの追加
dic['k1'] = 4444 # 値の置き換え
```
書式：{key1:value1, key2:value2}

# 集合(set)
重複しない値の集まり。
変更可能体はset型、変更不能体はflozenset型。

```py:setの例
basket = {'apple', 'orange', 'banana'}
if 'orange' in basket:
    print('Yeah! orange!')
else:
    print('Oh! my God!')
```

書式：{value1, value2, value3}


# 呼び出し可能型
関数呼び出しができる型。関数を定義することで生成される。
Pythonは、関数もオブジェクトとして扱うことができる。

```py:ユーザ定義関数の例
def func(val):
    print("I'm func. val=" + val)

f = func # 関数の定義オブジェクトを、変数fに代入する
f('ABC')
```
旧字体と新字体の違いをいい感じに吸収して検索する方法が知りたい

#### きっかけ
Excelで作った名簿があって、そこにはメールアドレスが載っていなかったので、
アドレス帳からメールアドレスを取得するExcelマクロを作ったときに
だいたいは上手く取れたのだけど、
旧字体と新字体の違いで上手く取得できないことがあって、
（字体以外に、単なる誤入力とかもあったりしたけど）

 **一文字くらいの違いなら「もしかしてこれ？」と聞いてこい！**という思想で
間に合わせで以下のような「なんちゃってあいまい検索」にしたが
本当はもっとスマートで正しい方法が、きっとあるのだろうなあ

#### コード

```vb

Function aimai(strText)
    ReDim strPattern(Len(strText))
    Dim i
    For i = 0 To UBound(strPattern)
        strPattern(i) = strText
        If i > 0 Then Mid(strPattern(i), i) = "."
    Next
    aimai = Join(strPattern, "|")
End Function

Sub sample()
    With CreateObject("VBScript.RegExp")
        .Pattern = aimai("髙田三郎")
               '  "髙田三郎|.田三郎|髙.三郎|髙田.郎|髙田三."

    '以下略
```
Vueで作成した画面をPuppeteerでPDFダウンロードしてみた

参考：[How to Generate a PDF with JavaScript | PDFTron](https://www.pdftron.com/blog/react/react-to-pdf/)

この投稿は、↑のReactのサンプルをvueでやってみたという投稿になります。

間違いなどありましたら、教えていただけるとありがちあです。:bow:

---

`@vue/cli`を使って簡単にvueのアプリを立ち上げます。

```bash
npx -p @vue/cli vue create sample # 途中のプリセットの選択はそのままEnter
cd sample
yarn serve
```

<img width="699" alt="Screen Shot 2019-10-27 at 19.33.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/c2d3257e-d005-379e-bd04-1b5f95393d77.png">

PDFの範囲にスタイリングします

```src/App.vue
<template>
  <div class='pdf'>
    
  </div>
</template>

<script>
</script>

<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #d1d1d1
}

.pdf {
  width: 612px;
  height: 792px;
  background-color: white;
  margin: 0 auto;
}
</style>
```

![Screen Shot 2019-10-27 at 19.53.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/3ae48201-523f-9995-2cf8-05fc61693b41.png)

---

画面に文字を表示します。


```src/App.vue
<template>
  <div class='pdf'>
    <user v-for="({ lastName, firstName }, i) in users" :key="i">
      {{ lastName }} {{ firstName }}
    </user>
  </div>
</template>

<script>
import User from "./components/User"

export default {
  name: 'app',
  components: {
        User
  },
  data: () => ({
    users: [
      { lastName: "カクタ", firstName: "ヒロキ" },
      { lastName: "イナガキ", firstName: "ヤスヒコ" },
      { lastName: "オオツキ", firstName: "イワミ" },
      { lastName: "カタオカ", firstName: "イチオ" },
      { lastName: "ダイサキ", firstName: "サトル" },
    ],
  }),
}
</script>

<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #d1d1d1
}

.pdf {
  width: 612px;
  height: 792px;
  background-color: white;
  margin: 0 auto;
}
</style>
```

```src/components/User.vue
<template>
    <div><p><slot /></p></div>
</template>

<style scoped>
div {
    display: flex;
    justify-content: center;
}
</style>
```

<img width="922" alt="Screen Shot 2019-10-27 at 20.13.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/eb1e3487-595d-ba09-f537-6cd74e9c913d.png">

---

vueで画面ができたので、puppeteerでPDFとしてダウンロードしてみます。

```scripts/generate-pdf.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:8080/');
  await page.emulateMedia('screen');
  await page.pdf({
    path: './vue.pdf', // path (relative to CWD) to save the PDF to.
    printBackground: true,// print background colors
    width: '612px', // match the css width and height we set for our PDF
    height: '792px',
  });
  await browser.close();
})()
```

```bash
yarn add -D puppeteer
node scripts/generate-pdf.js 
# ※ ↑ yarn serve でアプリが立ち上がっている状態で、 generate-pdf.js を実行
```

<img width="1044" alt="Screen Shot 2019-10-27 at 21.15.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/d1b0056e-544b-687a-0f95-57e76e1b1336.png">

PDFのダウンロードができました。

見ていただいてありがとうございました。m(_ _)m
GUIのライフゲームを作ってみた【Python】

**ライフゲーム**(Conway's Game of Life)は，Conwayさんが1970年に発案した簡易生命シミュレーションゲームです．とても単純なルールではあるものの，そこから派生した難問に数多くの数学者たちが虜になったそう．今回はそのライフゲームをPythonで実装してみました．

何番煎じになるかはわかりませんが，GUI化して扱いやすくしてみたので，興味があればぜひ触ってみてください．
<img width="300" alt="img1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520839/362edb3b-034a-0183-92d6-c6b22cd13134.png">
使っているライブラリは**numpy**と**wxPython**のみ．

# 実装環境
MacOS 10.15 Catalina
Python 3.7.4
wxPython 4.0.6
numpy 1.16.4

ちなみに開発はPyCharmで行っている．
# 実行
モットーは「main(関数)内はシンプルに」ということで，最低以下のコードがあれば実行可能．

```python
from lifegame import GUILifeGame
 
game = GUILifeGame()
game.run()
```

これで，50×50のライフゲームが起動する (セルは全部死んだ状態)．

```python
from lifegame import GUILifeGame

game = GUILifeGame(f_shape=(10, 10), time_step=100)
game.run(init_rand=True, rate=0.2)
```
のように引数を指定すると，10×10のライフゲームが，初期状態「0.2の割合で生きているセル」で起動する．ちなみに`time_step`は，自動的に世代を進めるとき(Runボタン)の更新速度．

もちろん，**セルをクリックすると生死を反転できる**．試しにグライダーを生成してみると，
![glider.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520839/00e444b5-8026-b933-937e-28f7f37966d6.gif)
クリックしながらのドラッグには面倒なので対応していない (余力があればいつか実装する...かも)．

# 解説
大まかな解説は僕の記事で行っているのでぜひ一読してみてください．
[GUIのライフゲームを作ってみた【Python】| HIRO LAB BLOG](https://hirlab.net/nblog/category/programming/art_616/)

# コード　
コードはGithubにあげているので，ぜひ！
PyPIには登録してないので(というかするほど大層なものでもないので)，`pip install`はできません．

[HiroshiARAKI/lifegame: Simple Conway's Game of Life Simulator on Python!!](https://github.com/HiroshiARAKI/lifegame)

以上，Qiita初投稿でした m(_ _)m

# 追記 (2019.10.28) - オブジェクトのロード，保存
早くも追記しますが，少しコードを修正し，機能を増やしました！

```python
from lifegame import GUILifeGame


if __name__ == '__main__':

    # Create Conway's Game of Life GUI Frame
    game = GUILifeGame(f_shape=(50, 50), time_step=100)

    # Put Galaxy on center
    game.set_object('galaxy')

    # Start!!
    game.run()
```
<img width="350" alt="img2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520839/1cfc5faf-0d03-3bd5-1ed6-87e26e919934.png">

Galaxy以外にもいくつかお試しで用意しています．また自分で**/objects**ディレクトリにテキストファイルを追加するだけで，簡単にロードできます．
AWS Cloud9で開発中のLaravelアプリをインターネットで公開する方法

ちょい記事です。

Cloud9で起動したアプリを他の人にも見えるようにするには一工夫が必要です。

> IDE のアプリケーションプレビュータブで URL を他のユーザーと共有することはお勧めしません(URL は https://12a34567b8cd9012345ef67abcd890e1.vfs.cloud9.us-east-2.amazonaws.com/ 形式で表示されます。12a34567b8cd9012345ef67abcd890e1 は AWS Cloud9 が 環境 に割り当てる ID、us-east-2 は 環境 の AWS リージョンの ID です)。 この URL を使用するには、環境 の IDE が開いており、アプリケーションが同じウェブブラウザで実行されている必要があります。

### やり方

基本的にはAWS側は公式に沿って設定すればOKです。

https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/app-preview.html#app-preview-share

- Cloud9で利用中のEC2インスタンスのセキュリティグループのインバウンドルールでTCPの8080番ポート(アプリで使いたいポート)を許可
- 同じインスタンスのいるサブネットのネットワークACLのインバウンドルールで同様にTCPの接続を許可

Laravelアプリ側は以下のコマンドで起動します。

- `php artisan serve --host=0.0.0.0 --port=8080` を実行
  - ホスト名を直接グローバルIPにしても`Cannot assign requested address`となってしまいましたが、`0.0.0.0`だと行けました。

これで以下のようにEC2インスタンスのパブリックIPで繋がります。
`http://(パブリックIP):8080/`

なお、Cloud9は初期設定だと使用終了後30分で停止してしまうので、ずっと上げておきたい場合は以下のように設定しましょう。
Cloud9の開発画面右上の歯車マーク
　→Project Settings
　→EC2 Instance
　→Stop My EnvironmentをNeverにする

また、パブリックIPを固定したい場合は、EC2インスタンスにElastic IPを関連付けておきましょう。

以上です。
エンジニア学習における課題感

#エンジニアスクールまたは学習後に感じる違和感
###プログラミングを学んだ直後に立ち止まる人が多い
これは、二つのスクールに通った僕が感じた課題感です。
この課題がずっと頭の中にあり、解決できないかと感じている今日この頃です。

#サービス検討中
###ゴールがない(学習するにあたっての目的がしっかり定まっていない現状)

ゴールがないの他に課題は下記が見つかりました。
-自分がどのスキル位置にいるのか実力がわからない
-業務経験がない
-エージェントにいい求人を紹介されない


###上記課題を解決するサービスを検討中です。
皆様の協力を仰ぎたいです。
大変お手数ですが、下記、アンケートお答えお願いします！
本気でこの市場を変えて行きたいです！
日本のエンジニア市場における課題を全力で解決しにいきます！！！！！

https://docs.google.com/forms/d/e/1FAIpQLSdvCmT8_GkRaBBDEpGmHiSM0ObZ3hqtRFIUVo2_Ig3xqA7CoQ/viewform
【rails sできない解決法】rails aborted! Sprockets::Railtie::ManifestNeededError: Expected to find a manifest file

解決策だけ書いたページです。解説しません。

ターミナルにこんな感じのエラーがでた人向けです。

```
rails aborted!
Sprockets::Railtie::ManifestNeededError: Expected to find a manifest file in `app/assets/config/manifest.js`
But did not, please create this file and use it to link any assets that need
to be rendered by your app:

Example:
  //= link_tree ../images
  //= link_directory ../javascripts .js
  //= link_directory ../stylesheets .css
and restart your server
/Users/okakaori/projects/todo_app/memo_app/config/environment.rb:5:in `<top (required)>'
/Users/okakaori/projects/todo_app/memo_app/bin/rails:9:in `require'
/Users/okakaori/projects/todo_app/memo_app/bin/rails:9:in `<top (required)>'
/Users/okakaori/projects/todo_app/memo_app/bin/spring:13:in `<top (required)>'
bin/rails:3:in `load'
bin/rails:3:in `<main>'
Tasks: TOP => db:create => db:load_config => environment
(See full trace by running task with --trace)
okakaorinoAir:memo_app okakaori$ rake db:creat
rake aborted!
Don't know how to build task 'db:creat' (See the list of available tasks with `rake --tasks`)
Did you mean?  db:create

(See full trace by running task with --trace)
```

#解決法


##①不足した「manifest.js」を作る
**app/assets/config/manifest.js**
上記のフォルダに「manifest.js」を作って入れる。
app/assets/配下に「config」がない場合は自分で作る。

##②manifest.jsに不足した記述を書く
①で作ったファイルに下記を記入

``` manifest.js
  //= link_tree ../images
  //= link_directory ../javascripts .js
  //= link_directory ../stylesheets .css
```

##③rails s
これで見れるはず。
localhost:3000にて「Sprockets::Railtie::ManifestNeededError:」で見れない場合は
①②が原因でそもそもdbが作れてない可能性があるので、
下記のくだりをもう一通りやってみてください。

[例のアレ]
bundle exec rake db:create
　↓
bundle exec rake db:migrate

#参考記事
DB作成時の「Sprockets::Railtie::ManifestNeededError:」の解決方法
https://qiita.com/kota-es/items/afdc1fb743408f4a5210
macにgulpを導入した際のメモ


:::note warn
2017~2018年ごろのメモです。ご注意ください。
:::


色々開発用にMacに入れたもので手順が煩雑になりがちなものがあったので備忘録として残します。


## Gulp

Node.jsで動いているタスクランナーと言われるツール。
最近だとwebpackにとって変わられている感がありますが厳密には違うカテゴリのツール。
( 個人の主観ですが、元来webpackはjsをバンドルするのが仕事で、
scssをcssに変換するのは範疇外のはずでした )

### plugins

* __Gulp__(タスクランナー) : Sassのコンパイルなどを自動化するツール
* __gulp-sass__ : node-sassを実行するためのモジュール
* __gulp-autoprefixer__ : cssにプレフィックスをつけるためのモジュール
* __gulp-sourcemaps__ : .mapファイルを生成するモジュール
* __gulp-plumber__ : gulpがエラーで終了するのを防止するモジュール
* __gulp-notify__ : gulpのエラー内容を通知するモジュール

### 導入手順

```bash:terminal
# プロジェクトのディレクトリを掘る
$ mkdir hoge

# プロジェクトのディレクトリへ移動
$ cd hoge/

# moduleをインストールして、 package.jsonを生成する
$ npm init

# gulpをローカルにインストール
$ npm install --save-dev gulp

# ローカルのgulpをaliasで使えるようにする
## 追記：package.jsonにscript書いた方が安全かも・・・
$ echo "alias gulp='./node_modules/.bin/gulp'" >> ~/.bash_profile

# エイリアスを使ってインストールされているか確認
# ※プロジェクトにインストールしたのでディレクトリに注意
$ gulp -v

# gulpfile.jsを作る←これにタスクを記述していく
$ touch gulpfile.js

# gulpのプラグインを入れていく
# 引き続きプロジェクトのディレクトリ
 $ npm install gulp-sass --save-dev
 $ npm install gulp-autoprefixer --save-dev
 $ npm install gulp-sourcemaps --save-dev
 $ npm install gulp-plumber --save-dev
 $ npm install gulp-notify --save-dev
```

### 設定ファイル

```javascript:gulpfile.js
'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const SCSS_SRC = './src/sass/**/*.scss';
const CSS_DEST = './public/assets/css/';
const scss_options = {
  outputStyle: 'compressed',
};
const prefix_options = {
  browsers: ['last 6 version', 'ie >= 9'],
  cascade: false,
};

var notifyMsg = {
  errorHandler: notify.onError("ERROR: <% error.message %>")
};

gulp.task('build:scss', function() {
  gulp.src(SCSS_SRC)
    .pipe(plumber(notifyMsg))
    .pipe(sourcemaps.init())
    .pipe(sass(scss_options))
    .pipe(autoprefixer(prefix_options))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(CSS_DEST));
});

gulp.task('scss:watch', function() {
  gulp.watch(SCSS_SRC, ['build:scss']);
});

gulp.task('default', ['scss:watch']);
```

```json:package.json
{
  "name": "hoge", // 任意で設定
  "version": "0.1.0", // 任意で設定
  "private": true, // 任意で設定
  "scripts": {
    "gulp": "gulp"
  },
  "dependencies": {
    // 必要なモジュールが色々
  },
  "devDependencies": {
    // 必要なモジュールが色々
  }
}
```

### 使い方

```bash:terminal
# プロジェクトのディレクトリに移動
$ cd hoge/

# Gulp 開始
$ gulp

# 追記：package.jsonを使う場合の使い方
$ npm gulp 

# Gulp 停止
ctrl + C # コマンドではなくキー入力
```

## あとがき

`Gulp` は `npm` でインストールしてるのに何故 `vue-cli`は `yarn` なのか?
Gulpは普段全く使っておらず、後から記事を分離したので時系列がバラけてしまった感がある。
フロント系のツールは移り変わりが早くて参ってしまう・・・。
phina.jsでアプリ更新を任意のタイミングで行う

phina.jsではアプリの更新処理は1/30秒（fps設定により変動）ごとにループ実行されます。しかし、たまに任意のタイミングでこの更新処理を実行したい時があったのでその方法などを備忘録として残しておきます。

### 方法
コアのappオブジェクトの`_loop`メソッドを直接実行すればとりあえず目的は達成できます。

```js
phina.define('MainScene', {
  superClass: 'phina.display.DisplayScene',

  init: function(options) {
    this.superInit(options);

    /* ここで色々処理... */

    this.on('enter', ()=> {
      this.app._loop();
    });
  },

});
```

注意点としてはSceneインスタンス化（init関数内）の段階ではappにアクセスできないため、初期化の際に処理を行いたい場合はenterイベントのコールバックで行う必要があります。

### より細かく処理を分けたい時

`_loop`関数は各要素のupdateだけでなく描画処理も行います。しかし描画は必要無い、あるいは逆に描画だけでしたいということもあります。

その場合は`_loop`の内部で実行される`_update`、`_draw`関数を個別に実行します。

```MainScene.js
this.on('enter', ()=> {
  // this.app._loop(); // 更新＋描画
  this.app._update(); // 更新のみ
  this.app._draw(); // 描画のみ
});
```

なお```_draw```はシーン切り替え（pushScene）の際に自動で実行されるので、普通は初期化中に行う必要はありません。（enterイベントの後に実行）

## 応用例：フレームスキップ機能
これらを応用して指定したフレーム分、ゲームを進めるといったこともできます。
STGなど時間経過で進行するタイプのゲームのデバッグ作業に使えます。

```MainScene.js
skipFrame: function(frameNum) {
  for (let i = 0; i < frameNum; i++) {
     // 途中の描画処理は無駄なので更新のみ(※)
    this.app._update();
  }
  // 仕上げに描画
  this.app._draw();
}
```

(※) _drawは要素の位置に関する計算も行うので、当たり判定処理が絡む場合は注意が必要。
またapp.frame値が実行ごとに加算されることにも注意。

### 所感
privateっぽいメソッドをいじるのはどうなの？と思わないでもないですが、デフォルトでは他に方法はなさそうなのでこれで頑張ります。


#### 余談1：_loopの細かい内部処理
- App、現在のscene(currentScene)、およびscene子要素それぞれのupdate/enterframeコールバックを実行（`_update`）
- 現在のsceneのInteractionチェック（pointstartなどの発火）
- 描画処理（`_draw`）
- stats.jsが動いているときはstatsの更新

#### 余談2：phina.jsはどうやってループ処理をしている？
原動機となっているのがAppクラスのメンバであるtickerオブジェクト。
tickerはAppのrunメソッドを実行した段階で恒久ループに入り、一定時間ごと（fps準拠）にtickメソッドを実行、それがAppの_loopメソッドをトリガーしています。その後は上で説明した通り。
極座標MNIST

# Abstract
人の視野は中心ほど精細である。画像データにも被写体を中心に置いたデータが多い。
そこで、中心ほど分解能が高まる極座標形式での画像解析によって、特徴点を抽出しやすくなると考えた。
簡易な実験としてMNISTを極座標変換しての試行を試したが、結果として精度の向上は見られなかった。

# 実験内容
MNIST画像をOpenCVのLogPolarで極座標化したものに、基本的な畳み込み演算処理を施した。

- 元画像

![MNIST.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330111/488ce413-f184-ee0d-0f15-730f9a4f8ade.png)
　　　　　↓

- 極座標化

![PolarMNIST.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330111/716ed2dd-7ab0-e38b-4792-fa5709381226.png)

- 極座標変換ソースコード

```

import numpy as np
import matplotlib.pyplot as plt
from dataset.mnist import load_mnist
import cv2

(x_train, t_train), (x_test, t_test) = load_mnist(flatten=False)

px_train = np.zeros((500,1,28,28))
px_test = np.zeros((100,1,28,28))
for i in range(500):
    px_train[i][0] = cv2.logPolar(x_train[i][0], (14, 14), 9, cv2.WARP_FILL_OUTLIERS)
    if(i < 100):
        px_test[i][0] = cv2.logPolar(x_test[i][0], (14, 14), 9, cv2.WARP_FILL_OUTLIERS)
```

畳み込み演算処理は「ゼロから作るDeep Learning ――Pythonで学ぶディープラーニングの理論と実装（
斎藤 康毅　著）」のものを流用。処理時間の関係上、MNISTの冒頭、訓練500枚・評価100枚のみで学習。

# 実験結果
- 通常画像：精度83%

=============== Final Test Accuracy ===============
test acc:0.83
![test1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330111/1b2e74f4-4692-e3ca-7de0-ab81280306d1.png)

- 極座標画像：精度77%

=============== Final Test Accuracy ===============
test acc:0.77
![test2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330111/86561d04-2f77-7194-7053-b7d22d2524ee.png)

# 考察

使用したデータの平均を取った画像では外周の情報は少ないと考えられるが、今回の実験では有意な差異が見られなかった。
MNISTデータの使用画素領域が広い為という理由が考えられるが、極座標解析で検索しても目立った実験が見つからなかったのは実験結果が有意義でない為とも考えられる。

- 使用データの画素平均
![Mean.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330111/7084a8b7-7beb-a31a-bd6c-624da75e055c.png)

- 使用データの最大画素
![Max.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330111/6ac0cebb-90cc-9810-ee96-a862c7b217ff.png)


今後はデータ圧縮と組み合わせて性能評価したい。

(2019/11/14更新)
特徴量として、ドット平均との二乗差の合計で対数を取ってみた。

```

x_spec = sum(np.log(np.exp(1) + (x_train[:] - np.mean(x_train, axis = (0, 1)))**2))

print(np.shape(x_spec))
plt.imshow(x_spec[0])
plt.show()
```
![spec.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330111/ae6bd316-8b82-0357-9dff-c0a52d07c2ae.png)

やっぱり中心に近い部分の方が情報量多いと思うんだけどなぁ。
最速でRustのwasmサンプルをブラウザで動かす

```cargo 1.40.0-nightly (8b0561d68 2019-09-30)```
```node v10.15.3```

Rustのチュートリアルだとnpmのパッケージを作れとか、ブラウザで動かすには余計な回り道が書かれてて「とりあえずブラウザでwasm動かしてみたい」という場合に、動かすまでの敷居が逆に高くなっている気がします。

https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm

というわけで、最速でalertを出すサンプルをブラウザで実行する方法を書いてみます。
試したのは Firefox-70.0(64bit) on Ubuntu 18.04 です。

Rustでwasmが出力できて、npmが動く環境はすでにあるものとします。

## 必要なものをインストール

```bash
cargo install wasm-pack
npm install -g node-static  # wasmを配信できるstaticサーバ。入れとくと便利
```
node-staticをinstallしておくと、次のコマンドでファイル配信できます

```bash
static 配信するディレクトリ
```

# チュートリアルに沿って進める

プロジェクトを作成します。

```bash
cargo new --lib hello-wasm
cd hello-wasm
```

src/lib.rsの内容をチュートリアルに従ってまるっと変更します。ただし最近のRustではexternの行はいりません。useだけで自動的にexternされます。

```rust:src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}
```

Cargo.tomlにlibとdependenciesの設定を記述します。

```toml:Cargo.toml
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
```


## ビルドする

ここが少しかわります。npmパッケージにしないのでscopeは必要ない代わりに、ブラウザ用にtargetにwebを設定します。

```bash
wasm-pack build --target web
```
pkgというディレクトリができて、その中に実行に必要なファイルとTypeScript用の型定義ファイルが生成されています。

この時点でwasmファイルが一気に小さくなっています。これが嬉しいですよね！

## index.htmlを作成する

wasm-packで生成されたpkgディレクトリの中に、実行用のindex.htmlを配置します。&lt;script&gt;の内容がチュートリアルと異なります。

```html:pkg/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello-wasm example</title>
  </head>
  <body>
    <script type="module">
        import * as mod  from "./hello_wasm.js";
        (async () => {
            await mod.default();
            mod.greet("rust test");
        })();
    </script>
  </body>
</html>
```
wasm-bindgen(wasm-pack経由)で出力されたファイルを使うために、typeにmoduleを指定しています。

そのままgreet()を使いたいところですがモジュール内のwasmという変数が未初期化なので、先に初期化関数であるdefault()を実行します。

default()はPromiseを返すので、.then か async/await を使って待機した後に処理を記述します。今回はawaitでdefault()の完了を待ってgreet()を実行しています。

## 動かしてみる

node-staticが入っていれば、pkgディレクトリを指定して実行するだけです。

```bash
static pkg
```

localhost:8080にアクセスすると、alertが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/2a3bfbd0-f526-5007-d491-3a7187ca3253.png)
【rails】GithubからDLしたファイルをhttp://localhost:3000/で見れるようにするまで

#① [$ git clone 自分のgitリポジトリのURL]
まずはクローンします
[参考]GitHubのリポジトリをローカルにcloneする
http://cly7796.net/wp/other/clone-the-repository-in-github-locally/

#②必要であれば　[$ bundle exec rake db:drop]
```
$ bundle exec rake db:drop
```
※同じDBが存在していて作り直す場合にこのコマンドを行う

#③[$ bundle install]
まずは**bundle install**します。

**※フォルダ名を変更した場合は、⑥から！**

#④[$ bundle exec rake db:create]

```
$ bundle exec rake db:create
```
でdb作成します。

#⑤[$ bundle exec rake db:migrate]
```
$ bundle exec rake db:migrate
```
migmateします。
DLしたファイルに入ってるマイグレートファイルを自分のところにマイグレートします。

#⑥必要であれば 「config/database.yml」のデータベースの接続先を変更する。
例えば「tweet_app」（仮）的なツイッターコピーサイトのようなものをDLした場合、

DL「tweet_app」を「tweet_app２」として環境構築したい場合

 「config/database.yml」を開き、「tweet_app」と書かれている場所を「tweet_app２」で置換します。
その後、③から対応ください。

※vscode（mac）での置換は option + command + F　です。
※他の環境の方はご自身で調べていただきたく:bow:

#⑦ $ rails s
```
$ rails s
```
DLしたファイル自体に問題なければ、問題なく見れるようになります。

## 「config/database.yml」を更新しなかったらどうなるか？
例えば「tweet_app」DLして、「tweet_app２」環境構築したい場合に
フォルダ名だけ「tweet_app」から「tweet_app２」に変更し、③〜⑥を行うと、
データベースはyamlファイルの記述に基づき「tweet_app」で作成されて、
フォルダは「tweet_app２」となります。

**「tweet_app２」**フォルダの中で　rails s　してツイートを投稿したら、
投稿確認は**「tweet_app」**のdbで見ることになります。

動作はしますが、特にこだわりがなければ**気持ち悪いので変更した方が良いと思います。**

## 「config/database.yml」で同じDBを使用する指定
上記のことを踏まえると、同じDBを使用することが可能です。
例えば、「tweet_app2」を作ったけど、投稿内容は「tweet_app」と同じものをみたい場合などは
「tweet_app2」のyamlファイルは「tweet_app」と設定します。

カラムが増えたりするとdbとmodelファイルの齟齬が生まれるので、使いどきは見極めが必要そうですが。
Rails /テーブル作成、カラムの追加や削除[備忘録]

#はじめに
アプリを作成していて、後からカラムを追加したい時に、はじめはschema.rbに書けばいいんじゃないか？と思っていたけど（これはNG笑）、正式なやり方を学んだの備忘録として残しておこうと思います。

#マイグレーションについて
データベースにテーブルを追加するには、Railsが用意しているマイグレーションという仕組みを使っていきます。
このマイグレーションとは、データベーススキーマへの変更を随時追加、削除していくための仕組みです。
具体的にはテーブルを作成・削除、テーブルのカラムを追加・削除が行えます。

#モデルの作成からテーブル作成
railsにてモデルを作成する際に、テーブルを作成するためのマイグレーションファイルが同時に作られます。
※モデルを作成するコマンドは以下になります。

```
$ bin/rails generate model [モデル名] [属性名:データ型 属性名:データ型・・・] [オプション]
```
例をあげると、Userモデルを作成したい場合、[モデル名]にUser、[属性名:データ型]にはname:string email:stringを指定します。コマンドは以下のようになります。

```
$ rails generate model User name:string email:string
```

コマンドを実行すると自動生成されるものが以下の4tつになります。
①モデルのクラスファイル
②マイグレーションファイル
③モデルの自動テスト
④モデルの自動テストで使うfictureファイル

マイグレーションファイルに関して生成されたファイルはこのようになります。

```db/migrate/XXXXXXXXXXXXXX_create_users.rb
class CreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      t.string :name
      t.string :email

      t.timestamps
    end
  end
end
```

上記ファイルが生成された後、データベースのテーブルの定義をRailsに読み込ませるために、次のコマンドでマイグレーションを実行します。

```
rails db:migrate
```

これでUsersテーブルが作成されました！

#テーブルの削除やカラムの追加・削除
やり方としては、新たにマイグレーションを個別で作成し、その中に変更したい処理を記述して、$ rails db:migrateコマンドで実行をします。

マイグレーションファイルを作成するコマンド

```
$ rails g migration クラス名 カラム名:データ型
```
※クラス名はAddXXXToYYY、またはRemoveXXXFromYYYとします。
「XXX」にはテーブル名、YYYにはカラム名（複数のカラムを変更したい場合などがあるのでカラム名ではなくても問題ありません）

**[カラム追加のマイグレーション作成]**
※nickname（string型）のカラムを追加したい場合

```
rails generate migration AddNicknameToUsers nickname:string
```
ファイルが作成されたら$ rails db:migrateを実行し反映させます。

**[カラム削除のマイグレーション作成]**
※name(string型)のカラムを削除したい場合

```
rails generate migration RemoveNameFromUsers name:string
```

ファイルが作成されたら$ rails db:migrateを実行し反映させます。

#ファイルの削除
データベースへ反映ができ、特に残しておく必要がなければ追加したファイルは削除しておいてもいいでしょう。
ファイルツリーから直接消さずに、コマンドを実行してファイルを削除しましょう。コマンドは以下になります。

```
rails destroy migration クラス名
```
(例)先ほどのファイルを削除する場合

```
rails destroy migration AddNicknameToUsers
```



#参考
https://qiita.com/azusanakano/items/a2847e4e582b9a627e3a
https://qiita.com/kanuu/items/a9223712ee0ff8d19d56
DeFi Dapps に使える Compound の一般的な使い方（仮想通貨の貸付及び借入の観点）

## Compoundについて
[Compound](https://compound.finance)はざっくり説明すると、EtherやDAIなどの仮想通貨を貸し借り出来る金融市場の事。

*貸し手*はCompoundを利用して自前の仮想通貨を運用する事で金利を稼ぐ事が出来る。
もしあなたがCompoundでDAIを運用すれば、年利6.4%を稼ぐ事が出来る。
超簡単に言い換えると「利率のいい仮想通貨版の預金」と思えばいいかな。

_貸出の具体例_
	1. 10DAIを運用に回す　→  cDAIをCompoundから受け取る
	2. 一定期間の運用後、cDAIをCompoundに返却
	3. もともと預け入れていた元本（10DAI）と金利(??DAI)を受け取る


一方、*借り手*は自分が保有する仮想通貨を担保にして、担保額とその仮想通貨のCollateral Factor（例えば80％）を掛け合わせた金額が借入限度額として設定され、その借入限度額を上限として別の仮想通貨を借りる事が出来る。

_借入の具体例_
	1. 10Etherを担保に入れる　→ cEtherをCompoundから受け取る
	2. EtherのCollateral Factorは80％
	3. 借入限度額（Borrowing Power）は、8 Ether (10 Ether * 80%)分
	4. 3.を上限に、他の仮想通貨、例えばDAIが大体1,000DAI ちょい借りれる

注意すべき点として借入上限額が変動してしまう事による*強制執行（liquidation）*
	* 担保に入れている仮想通貨の価値が下落した場合
	* 借入中の仮想通貨の価値が上昇した場合

借入時、自分の借入限度額（Borrowing Power）を考慮した上で、借入額を決定する方がいいようです。
CentOS7にIPアドレスを設定する


## 何をするか

CentOS7にIPアドレスを設定していきます。
（macbook上にVirtualBoxでつくった仮想環境内）


## 前提条件



* VirtualBoxへのCentOS7のインストールは完了している
* CentOS上にOpenSSHがインストールされている（普通は初期状態で入っているので、気にしなくて大丈夫だと思います。）



## 設定開始

rootユーザーでログインします。
現在IPアドレスがどうなっているのか、ip addr コマンドで確かめます。

```
# ip addr
```

![スクリーンショット 2019-10-27 19.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206591/a17ffe6b-7990-8bb9-e107-894ff6e77636.png)


このような表示になっており、IPアドレスが設定されていないことがわかります。
(IPアドレスが設定された正しくされた状態は、後半にでてくる画像を見て下さい）
(127.0.0.1/8 と書かれているのは自分自身(CentOS)を指すIPアドレスのため、手元のmacbookからのアクセスには使えません)


↑の画像のなかで「enp0s3」,「 enp0s8」と書かれているものが、IPアドレスを設定するためのデバイスです。
**今回は「enp0s8」の方にIPアドレスを設定していきます。**
※ 表示されるデバイス名が「enp0s8」でない場合は、適宜読み変えてください



IPアドレスを設定します。
以下のコマンドを実行してください

```
# nmcli c mod enp0s8 ipv4.method manual ipv4.addresses 192.168.11.110/24 ipv4.gateway 192.168.11.1
```


192.168.11.110というのが、設定するIPアドレスになります。
他のアドレスでも大丈夫だと思います
（参考、<https://tech.nikkeibp.co.jp/it/free/NNW/NETHOT/20040624/146335/>）

192.168.11.1のところ（ip4.gatewayの後のやつ）はGatewayになります。**ここは各自のネットワーク設定によって異なりますので、ルーターなどを確認してください。**（参考、https://www.buffalo.jp/support/faq/detail/15844.html )



DNSも設定します。

```
# nmcli c mod enp0s8 ipv4.dns 192.168.11.1
```

192.168.11.1は先程gatewayに指定したものと同じアドレスですね。


IPアドレスが設定されたか確認してみましょう。

```
# ip addr
```

![スクリーンショット 2019-10-27 19.17.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206591/a17ffe6b-7990-8bb9-e107-894ff6e77636.png)

さっきと変わらない...


設定を確認してみましょう。
文字だと見づらいのでGUIで接続設定を確認してみます。
nmtuiコマンドを使います。

```
# nmtui
```


![スクリーンショット 2019-10-27 19.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206591/abeb7d24-4860-a4e7-1628-7fea729579fa.png)


↑の画面が表示されたはずです。

そこから
"Edit a connection" -> "enp0s8"を選択します。
（カーソル合わせてEnterで選択です。）

![スクリーンショット 2019-10-27 20.36.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206591/894af5e4-51e4-ec6e-5faf-bead4bf44cfd.png)

↑の画面が表示されるはずです。

囲っている、"Automatically connect"がoffになっているので、onに変えます。
（カーソルを合わせてSpaceキーを押せば代わります。）
（ちなみに先程nmcliコマンドで設定したIPアドレスとDNSは、この画面からも設定できます。こっちの方がわかりやすかったですね。）

onにできたら、
"OK" -> "Back" -> "Quit"の順に選択し、元のCUIに戻りましょう。

また設定を反映するために、ネットワークの設定を再起動しましょう。
以下のコマンドで再起動できます。

```
# systemctl restart NetworkManager
# systemctl restart network
```

IPアドレスが設定されたか確認してみましょう。

![スクリーンショット 2019-10-27 20.35.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206591/d8c0e2bc-9717-7693-a373-8f4637ac6bca.png)


無事「enp0s8」にIPアドレスが設定されていますね。



手元のmacbookからの接続も確認してみましょう。ターミナルを起動して以下のコマンドを打ってみてください。

```
$ ssh root@192.168.11.110
```

パスワードを聞かれるので入力します。（画面には入力したパスワードは表示されません。）

![スクリーンショット 2019-10-27 19.55.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206591/a325ad8f-d2e3-1e97-ebef-99cda2b2c04c.png)


無事接続できましたね。
（本当はrootユーザーで接続するのは、セキュリティ的によろしくないです。）

### 参考記事
https://qiita.com/sango/items/816136188387221f05b3
https://i-think-it.net/centos7-ip-setting/
[Vue.js] v-bind:style で background-image がバインドできなかったら

よくあるのは値( `url()` ）の指定方法がちょっと特殊だというもの。
[Vue.jsでbackground-imageを指定する - Qiita](https://qiita.com/mczkzk/items/a2fd40b5a54d81766ab2)

しかしそれでも上手く行かなかった。

#原因

画像のURLに `( ) ` が含まれていた。

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

##もっと詳しく

URLには `encodeURI` をかましているので問題ないと思いこんでいたが、実はこの関数、
>encodeURI は下記以外の全ての文字をエスケープします。
>
>>エスケープされないもの:
>>
  >>  A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

参考：[encodeURI() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)
RFC2396 という基準に沿っているので `( )` をエンコードしてくれない。

この話自体は割と有名かもしれないが、問題は v-bind:style で `( )` 付きの URL を `background-image` に設定してしまうと、**要素の style 属性に `background-image` プロパティが設定されない**という事。

![nonstyle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418007/1e555656-af70-0a06-a49f-2e861e7488a0.png)

↑ style 属性が空なので、style 属性ごとごっそり削除されている。

#解決策

- 画像 URL に `()` を使わない
- RFC3986 準拠（ `! ' ( ) *` も対象）の `encodeURI` を自分で定義する

```fixedEncodeURI.js
function fixedEncodeURI (str) {
  return encodeURI(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}
```

参考：[encodeURIComponent() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#Description)

#☕
そもそも際どい文字はファイル名として使わないのがベターですが、サービスのユーザーが直接アップロードする形式のアプリなんかだとファイル名そのままにしちゃってること多いですよね。
何かの助けになれば幸いです。

$Thank$ $you.$
Nuxt+Vuetifyのサイトでダークテーマを外す

本当にちょっとしたことですが、調べるのに15分くらいかかってしまったので記事化。

Nuxt.jsでVuetifyを適用したサイトを作成すると、デフォルトではダークテーマが適用されます。
こんな感じで。
<img width="513" alt="スクリーンショット 2019-10-27 19.56.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120785/c23ce7e6-24e4-b53f-4506-457a328b56ca.png">


nuxt.config.jsで`vuetify.theme.dark`の設定を`false`に変更すれば、ダークテーマを解除できます。


- 変更前

```vue:nuxt.config.js
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
（略）
```

- 変更後

```vue:nuxt.config.js
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
（略）
```

このようになりました。
<img width="513" alt="スクリーンショット 2019-10-27 19.57.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120785/24840fb1-b3b8-0287-08c3-51f1f0a49695.png">


以上です。
初心者によるプログラミング学習ログ 138日目

# 100日チャレンジの138日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

138日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>138日目<br><br>技術書でVue.js学習<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1186754759065128960?ref_src=twsrc%5Etfw">October 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

# 学習したことの一部

v-model

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js neko</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <input v-model="message"><!--v-model:フォームの入力値をデータと同期させる-->
        <p>{{message}}</p>
        <textarea v-model="message1"></textarea><!--複数行テキストの値は文字列-->
        <pre>{{message1}}</pre>

        <label>
            <input type="checkbox" v-model="val">
            {{val}}
        </label>

        <label><input type="checkbox" v-model="val1" value="A">A</label>
        <label><input type="checkbox" v-model="val1" value="B">B</label>
        <label><input type="checkbox" v-model="val1" value="C">C</label>
        {{val1}}

        <label><input type="radio" v-model="val_radio" value="a">A</label>
        <label><input type="radio" v-model="val_radio" value="b">B</label>
        <label><input type="radio" v-model="val_radio" value="c">C</label>
        {{val_radio}}

        <input type="text" v-model.number="price"> {{price}}

   
    </div>



    <script>
    new Vue ({
      el: '#app',// elはアプリケーションを紐付ける要素セレクタ
    　data: {
        message: 'vue.js',
        message1: 'hello',
        val: true,
        val1: [],
        val_radio: '',
        price: 100
    }
  })
    </script>
</body>
</html>

```
複数の人物写真から顔部分を切り出し、年齢・性別判定する。

# 顔画像を切り出す。

```python:facecut.py
import cv2,os



# 学習済モデルの種類
HAAR_FILE = "./models/haarcascade_frontalface_default.xml"
cascade = cv2.CascadeClassifier(HAAR_FILE)


# 集めた画像データから顔が検知されたら、切り取り、保存する。
import glob
files = glob.glob(os.path.join("./input/*.jpg"))
files = [s.replace('./input/', '') for s in files]
print(files)
for file_name in files:
    img = cv2.imread('input/'+file_name)
    img_g = cv2.imread('input/'+file_name,0)
    face = cascade.detectMultiScale(img_g)
    for x,y,w,h in face:
        face_cut = img[y:y + h, x:x + w]
        # if not os.path.exists(dirname):
        #     os.mkdir(dirname)
        cv2.imwrite("outputs/"+file_name, face_cut)
    
```

inputフォルダの中に入っているjpg画像を顔切り抜き処理し、outputフォルダに入れることができた。


# 年齢・性別判定
Apache 2.4 から https サーバへリバースプロキシする

## 概要
- Apache HTTP Server 2.4 から https サーバへリバースプロキシする
- リバースプロキシの設定には ProxyPass と ProxyPassReverse を使用する
- http サーバへリバースプロキシする場合と比べて SSLProxyEngine を追加する必要がある

## https サーバへリバースプロキシするための設定

https サーバへリバースプロキシするためには、

SSLProxyEngine を使えるようにするために mod_ssl をロードする設定を追加。

```
LoadModule ssl_module modules/mod_ssl.so
```

また、SSLProxyEngine を有効にする設定が必要。

```
SSLProxyEngine On
```

SSLProxyEngine はプロキシの SSL/TLS プロトコルエンジンを ON/OFF するためのディレクティブ。

## 設定例

httpd.conf 等に以下のように設定する。

```
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule ssl_module modules/mod_ssl.so

ProxyRequests Off
SSLProxyEngine On

ProxyPass /foo https://example.com/bar
ProxyPassReverse /foo https://example.com/bar
```

## mod_ssl をロードしていない場合

以下のようなエラーメッセージが出力される。

```
AH01144: No protocol handler was valid for the URL /foo (scheme 'https'). If you are using a DSO version of mod_proxy, make sure the proxy submodules are included in the configuration using LoadModule.
```

## SSLProxyEngine を導入していない場合

以下のようなエラーメッセージが出力される。

```
AH01961: SSL Proxy requested for hoge.example.com:80 but not enabled [Hint: SSLProxyEngine]
```

```
AH00961: HTTPS: failed to enable ssl support for XXX.XXX.XX.XX:443 (example.com)
```

## 参考資料

[mod\_proxy \- Apache HTTP サーバ バージョン 2\.4](http://httpd.apache.org/docs/2.4/mod/mod_proxy.html)

> SSL/TLS で遠隔サーバに接続する機能は mod_ssl の SSLProxy* ディレクティブで 提供されています。これらの機能を利用するためには、該当するモジュールを 組み込んで設定しなければなりません。

[mod\_ssl \- Apache HTTP Server Version 2\.4](http://httpd.apache.org/docs/2.4/mod/mod_ssl.html)

```
SSLProxyEngine Directive
Description:   SSL Proxy Engine Operation Switch
Syntax:        SSLProxyEngine on|off
Default:       SSLProxyEngine off
Context:       server config, virtual host, proxy section
Status:        Extension
Module:        mod_ssl
Compatibility: The proxy section context is allowed in httpd 2.4.30 and later
```

> This directive toggles the usage of the SSL/TLS Protocol Engine for proxy. This is usually used inside a <VirtualHost> section to enable SSL/TLS for proxy usage in a particular virtual host. By default the SSL/TLS Protocol Engine is disabled for proxy both for the main server and all configured virtual hosts.
> 
> Note that the SSLProxyEngine directive should not, in general, be included in a virtual host that will be acting as a forward proxy (using <Proxy> or ProxyRequests directives). SSLProxyEngine is not required to enable a forward proxy server to proxy SSL/TLS requests.
SonyのNeural Network Consoleを使ってみる


# Neural Network Consoleとは

SONYが開発したディープラーニングツールで、初心者でも簡単に実装などができるとのことなのでやってみました。

環境はWindows10の64bitで、私の格安ラップトップにはGPUがないのでCPUで動かしてみます。さて、持ち堪えてくれるのか。。。

# Windowsアプリ版をダウンロード

クラウド版もあるようですが、軽く調べたところみんなWindows版でやっていた上に、クラウド版でも結局CPUで動かすことになるみたいなので、今回はWindowsアプリをダウンロードします。メールアドレスの登録のみでOKです。

https://dl.sony.com/ja/app/

メールで送られてきたzipファイルをダウンロードし、解凍します。その後、neural_network_console.exeを実行します。

# サンプルプロジェクトを実行してみる

とりあえずホーム画面の一番上にある「01_logistic_regression.sdcproj」をダブルクリックして実行してみます。

ダウンロードが終わったら、F5ボタンで学習を開始します。

![2019102701.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362304/0ddbf3ea-07fb-802a-5177-d2aa198da80e.png)

サンプルプロジェクトに関しては、CPUを使った計算でも割とすぐに終わります。その後、実際に評価してみると「4」か「9」か手書きの文字を判断した結果が出力されます。

![20191027002.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362304/fdf727dd-09ef-def5-1650-f30b68033ff1.png)

「y:9」の列が1だったら「画像の文字が9である」ことを、0だったら「画像の文字が9ではない」ことを表していて、右端のy'がその確率を表しています。ちなみに精度は95.2%でした。

というわけで、あっさりとディープラーニングを試すことができてしまいました！楽！

# 雑多な感想

ちなみにこの学習は「Input」→「Affine」→「Sigmoid」→「BinaryCrossEntropy」という始めから構築されていた1層のネットワークを使用しています。もっと複雑な画像を判別するとなったら、ここら辺を編集できる知識が必要になりそうです。

今回使われている画像データたちは、解凍したフォルダ下の「samples/sample_dataset」で用意されています。

ちなみにYOLOのNCCを使って軽くディープラーニングを試したこともありますが、普通にUbuntu環境に慣れていれば、YOLOとかのPythonスクリプトを使う方が画像認識する分には楽かもしれないなぁとも思いつつ。。。

これを使いこなすには、新しくデータセットを作るとかデータセットを探してくるとかしないといけなくて、ちょっと時間がかかりそうなので、とりあえず今日はここまでで。
Javascript で diff (内部仕様についての補足２)

  10/14 に投稿した[Javascript で diff (通信なし、ローカルで完結)](https://qiita.com/stonee/items/e2d88f07d08171b2816f)の内部仕様についての補足、その２です。
補足その１はこちらです。 [Javascript で diff (内部仕様についての補足)](https://qiita.com/stonee/items/8964e801f27cd9433e01)

# diff の出力結果をクリーンナップしてみる

「空行を含む関数を別の(空行を含んだ)関数に差し替える」ような場合、「関数１に含まれる空行」と「関数２に含まれる空行」群が一致行とみなされて、まだら模様の差分が生成されることがあります。

![行単位_対策なし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513949/d6e82dda-26d9-f756-b905-2c17d4c2a077.png)

diff_orzでは、「前後の行ごと一致しなければ空行どうしのマッチングを認めない」というルールで、まだら模様の差分が生成されるのを回避しています。

![行単位_対策あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513949/a045c927-b26b-87f7-325f-a8042917e219.png)


同様に、単語単位の差分でも、「単語の間にはさまった空白は、前後のフレーズごと一致しなければマッチングを認めない」というルールを設けるようにします。

# 単語単位の差分の境界を調整する

- 文字列１  「&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;」
- 文字列２  「&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;」

上記のような例題に対して、数学的な手段のみで差分を取ると「td&gt;2&lt;」「td&gt;&lt;/」が差分として検出されますが、意味的には「&lt;td&gt;2&lt;/td&gt;」を差分として検出させたいわけです。

![単語単位_対策なし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513949/66fd5ee3-008e-5af5-6f15-909649188ac0.png)

構文解析を行って「&lt;tr&gt;」「&lt;td&gt;」「1」……を単語として検出すれば完璧ですが、今回は「(&lt;{[など左かっこを特別扱い」「&lt;/」は単一の単語として扱う」というルールを設け、一旦普通に差分をとった後、左かっこの位置まで差分の境界位置をずらしています。

![単語単位_対策あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513949/1b230ccb-3af4-2abd-ab3f-0288abe68ddc.png)
float-preview.nvimで画面がリサイズされたときにいい感じに設定を切り替える

[deoplete](https://github.com/Shougo/deoplete.nvim)は補完候補に対してpreview windowという便利なものを提供してくれる。しかし、preview windowはの名の通りwindowとして提供され、NeoVimのfloating windowで実現してほしいと思う人は多いだろう。それを実現するプラグインが、[float-preview.nvim](https://github.com/ncm2/float-preview.nvim)である。

float-previewには`g:float_preview#docked`というオプションがあるが、これを画面の幅に合わせていい感じに切り替えたい。
リサイズしたときにも切り替えてほしいので、autocmdを使ってやってみた。それが以下。

```vim
set completeopt-=preview
function! s:set_preview_docked()
  if winwidth('%') > 80
    let g:float_preview#docked = 0
  else
    let g:float_preview#docked = 1
  endif
endfunction
call s:set_preview_docked()
augroup MyFloadPreview
  autocmd!
  autocmd VimResized * call s:set_preview_docked()
augroup END
```
【Flutter】「FlutterHub」を試してみた

開発環境
⭐️Flutter
（flutter_macos_v1.9.1+hotfix.5-stable）

⭐️Android Studio 3.5.1
⭐️Xcode１１.２ beata

↓↓↓FlutterHub編集する画面は、こんな感じ。
<img width="1118" alt="スクリーンショット 2019-10-27 18.46.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/00d70ad2-31ea-c33b-3c8a-c49451269e4f.png">

実際に動かした動画です。
https://twitter.com/nonnonkapibara/status/1188403652316164097
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🌏Flutter(フラッター)🌏<br>✨FlutterHub✨を試してみたよぉ😘<br>「FlutterHub」とはブラウザ上でプレビュー表示しながらコーディングできるWebサービス🌏<br>😍Windows でも Mac でも iPad OS でも📲アプリ開発ができちゃうみたいですよぉ👯‍♀️👯‍♀️<a href="https://t.co/MH3XfUly0m">https://t.co/MH3XfUly0m</a><a href="https://twitter.com/hashtag/flutter?src=hash&amp;ref_src=twsrc%5Etfw">#flutter</a> <a href="https://t.co/qM9zTydKxW">pic.twitter.com/qM9zTydKxW</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1188403652316164097?ref_src=twsrc%5Etfw">October 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


ここから、説明です。

## FlutterHubのサイトにアクセスする。

FlutterHub
https://flutterhub.io/
<img width="979" alt="スクリーンショット 2019-10-27 18.16.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3dee841e-8bd2-c126-55de-ad9e67a43358.png">


<img width="929" alt="スクリーンショット 2019-10-27 18.16.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8e87e8c9-6530-1dbb-bb8f-c2efc2a0e897.png">


## 新規プロジェクトを作成する
<img width="662" alt="スクリーンショット 2019-10-27 18.18.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c162c93a-5e0f-3bc9-9047-9d8b651f5b27.png">


<img width="558" alt="スクリーンショット 2019-10-27 18.23.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/2e205cbc-063e-abd4-d656-ae63b0503623.png">


下記の内容をコーディングしてみました。
【Flutter】アプリ内のページの背景色をつけてListView表示してみた。
https://qiita.com/nonkapibara/items/52a5bc4869f5010a8ff8



<img width="871" alt="スクリーンショット 2019-10-27 18.51.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/88c86710-79a0-6baa-4def-b2407830548d.png">


<img width="862" alt="スクリーンショット 2019-10-27 18.51.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8ed21515-28fa-d26b-d029-5d264f1ec2aa.png">


<img width="866" alt="スクリーンショット 2019-10-27 18.52.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0089c62a-7aaf-7f3d-65f1-a1e824f7fd3e.png">

完了！！
セブ島留学中にサービスを作ってみた

# はじめに
セブ島でのエンジニア留学の集大成として４人チームで１つのサービスを開発したのでそのまとめです。

## 成果物
サービスの名前は<font color=“red”>アイデア村 / ideathon</font>です。
私たちは`アイデアを通じて人と人を繋げる`をモットーにこのサービスを作りました。

ideathonは`ビジネスパートナーを見つけるアイデア投稿、共有サービス`です。
もし他のユーザーのアイデアを気に入ったら、お気に入りに登録しても良いですしチャットする事も可能です。

## 苦労した点

このサービスを作るにあたって、いくつかの壁がありました。それは、

1. 時間が限られている
2. メンバーの熱量、技量が違う
3. 人に教えることの難しさ
4. 自分の技術不足

### 1. 時間が限られている

留学期間はカリキュラムがあり、私たちは企画から作成、デプロイまで３週間ほどでした。
３週間と聞くとそんなに長いの？と感じるかもしれないですが、チーム開発未経験でそもそもプログラミング初学者にとって３週間は短いのです。

この問題解決のためにtrelloのサービスを使って今は何をすべきなのかを細分化して１つ１つ機能を作って行きました。

もちろん全てを完璧に作る事は出来ませんでしたが、
`Done is better than perfect.`という事でとにかく使えるところまで持っていこうと努力しました。

### 2. メンバーの熱量、技量が違う

正直なところ、メンバー４人のうち2人はプログラミングが得意とは言えませんでした。
しかしながら、人には得意不得意があります。
留学期間中、私たちは何回かプレゼンを英語でする機会があったのですが、英語のスクリプトを考えてくれたりして他のメンバーが助けてくれました。
プログラミングに対しても、偉そうな言い方になりますが、成長が顕著に見られ、多くの貢献をしてくれました。

### 3. 人に教えることの難しさ

他のメンバーに分からない事があった場合、基本的には講師の人か自分に質問が来ます。
気づいた事は、`人に教える為には深く理解していないと噛み砕いて話せない`という事で、
この事は逆に、`教える事で自分の理解が深まる`という事です。
難しさを感じつつ、とても自分の為になったと感じています。
講師の方が`ラーニングピラミッド`の話を留学初期にされたのですが、身に染みて体験出来ました。

### 4. 自分の技術不足

この問題は1~3全ての問題と関係していて、自分にもっと技術があれば全て解決出来ていました。
何度も歯痒い思いをしましたが、デプロイした際の高揚感はなんとも言えませんでした。

## ちなみに

アイデア村 / ideathon は[www.ideathon.site](https://ideathon-village.herokuapp.com/login)からアクセスすることが可能です。
GameShellに手を出してみた

TechCrunchの記事でGameShellについての内容があり、
面白そうだったので増税前に購入
え？その話今更するの？って感じ
ホントにね
基本接着剤とかは必要ないのでとても楽
ただバリを切り落とすのにニッパーは必須
爪切りでもできないことはないと思います
気になる人はヤスリがあると◎
これも爪切りについてるもので十分


![WIN_20191005_12_03_25_Pro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520795/82fee2d3-8349-7d2c-d362-69a9f74eb6ce.jpeg)
届いたものがこちら
メモリはまた別でまとめられるといいなぁ

![WIN_20191005_12_05_27_Pro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520795/658f894b-5994-5c17-3da6-403520d7ac66.jpeg)

外箱がフォルダのアイコンになってて、
マザーボードなんかが入っている小箱はファイルのアイコンになってました。
こういうの良いですよね。

![WIN_20191005_12_08_03_Pro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520795/27ff6c0a-0cf0-a7cf-dc08-4a820ed26d57.jpeg)

説明書は英語ですがほぼ図解でした。
プラモデル作ったことあれば問題ないかなぁと思います。
ただバリがやけに太いのでやや苦戦します。
とはいえプラモデルと違って見える部分にバリが出てこないので気にならない程度に取り除けば問題ないかと思いました。

が、後半少し問題が、
モニター、メインボード、キーボード、バッテリー、スピーカーの5つをそれぞれくっつけてく構成なのですが、
部品が見慣れないということもあってちょっと迷うことがしばしば
まぁ自分がこういうの初めてってのもあんでしょうけども

最初にそれぞれ作ってそれをつなげていくのですが、つなげるためには透明のカバーが邪魔なので閉めない方が良かったです。
まぁそれも見越してか簡単に開け閉め出来るようになっているのですが。

![WIN_20191005_19_22_10_Pro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520795/0a1e49ea-f6aa-be58-1e0f-460915ce8d5d.jpeg)
![WIN_20191005_18_55_55_Pro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520795/08989d79-3b01-b507-cdad-64bee70990c6.jpeg)

外箱に何となく収めてこんな感じです。
![WIN_20191005_19_48_11_Pro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520795/e6484628-65f1-b03c-7f39-4626df759d29.jpeg)
画像のボタンの位置が頭おかしいことになっているのがとても恥ずかしい

![WIN_20191005_20_39_23_Pro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520795/0c9c7894-7036-765e-a279-75321776e29c.jpeg)
完成です。
所要時間は2時間半程度だと思います。
充電器は付属していませんがandroidの充電器で充電出来ました。
標準で「Cave story」がインストールされてます。
インストールすれば色々と遊べるらしいのですがちょっと良くわからずに苦戦中。
うーん難しい。


こういうの書くの初めてなんですけどこんな感じでいいんですかね？