OmniAICreator/Qiita-1.07M huggingface dataset:
FirstVRのジェスチャ識別を試してみた

#FirstVRってぶっちゃけ識別精度どうなの？
FirstVRに期待しているのってぶっちゃけジェスチャの認識ですよね？
(myoとどっちが精度が良いか気にならない？
あとでLeapmotion vs Myo vs FirstVRの比較とかやろうかな…）

でジェスチャ認識の精度がどんなもんかとりあえず、SDKを使って試してみました。


##実際に試してみた
で、試すにはまず以下のリンクからSDKをダウンロードしてきます。
https://dev.first-vr.com

そしたらそれを開いて、ビルド時に下の画像の青枠にチェックを入れます。ちなみに上のチェックボックスはチェックを外してください。

![スクリーンショット 2018-05-02 2.40.11.png](https://qiita-image-store.s3.amazonaws.com/0/253416/2070c2cf-6814-d600-d073-ec83aa3ddf2d.png)

それでスマホへ書き出します。

するとこんな感じになります。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">FirstVRのジェスチャ認識なかなか良さげ <a href="https://t.co/rpmLkfegkg">pic.twitter.com/rpmLkfegkg</a></p>&mdash; Satosh (@satosh28425184) <a href="https://twitter.com/satosh28425184/status/991366205792337921?ref_src=twsrc%5Etfw">2018年5月1日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

とりあえずグーとパーだけだけど100パーセント識別できてるぅ〜〜。
これはかなり精度が高いと言っても良さそう！
時間がある時にMyoとLeapmotionとFirstVRの比較をやってみようと思います。
最近のWEBとかフロントエンドについていけない人は一回深呼吸しよう。

# **まえがき**

まともにWEB開発していたのは今からもう10年ほど昔の事

入力フォームがあって、DBに対してSelect、Insert、Update、Deleteするだけ
フロントはCSSとJSでちょっとおしゃれにして完成。

そんな時代で脳みそ停止していたので
最近のWEBに触れてもうなにがなんだか
しばらくは浦島太郎気分だけ満喫していました。

しかし、最近、ようやく
なんとか進化の歴史というか、流れというか
最近のフロントエンドを掴みつつあるというところまでやってきました。

まだまだ未熟ですが、なにがなんだかよくわからないよという状態からは抜け出せた気がします。
これはここに至るまでに足掻いた記録です。

# **選択肢増えすぎ**

昔も選択肢はありましたが、明らかにトレンドが偏っていたというか
サーバーサイドはほぼPHPでしたし、FrameworkもCakePHPが多かった。
ASP.NETやJavaで作ることもありましたが、B to CのサービスならほぼPHPだったような気がします。

しかし今はPHPに加えてRuby、Python、Node.jsといろんな開発言語、実行環境が現れ
CakePHP、Laravel、Rails、Sinatra、Django、Expressとそれぞれのフレームワークがいくつも存在する。

一体どれを使えばいいのか、何がトレンドなのか

# **いろいろ増えすぎ**
SASS、LESS、Babel、TypeScript、Grant、Gulp、Webpack、Browsarify、Bower
Docker、SCSS、Babelify、Watcher、Composer、pip、nodist、npm、gem、pipenv、rbenv
React、Vue.js、coffee-scriptなどなどなどなど

最近のWEBについて調べていると
Aについて知りたいのに、それを知るためにはBとCを知らないといけない。
Bを理解するためにはDとE、Cを理解するためにはFと

深い深い情報探索の旅に出かけるパターンが非常に多かった。
そして途中で情報の波に溺れる。

# **いろいろやりました**

とにかく目についたものを片っ端に触ってみました。
PHPもRubyもPythonもNode.jsも
CakePHPもLaravelもRailsもDjangoもとりあえず触る！

環境構築でエラー！エラー！
参考サイト通りにやったのにエラー！
エラー調べてたらまた新しい技術とこんにちわ！

便利なパッケージを入れて使ってみるもエラー！

便利なものが沢山出てきてるのはありがたいものの
進化が早すぎてちょっと古い記事なんかだと
もう仕様変わったりしててうまくいかない！

名前は違うけどなんか似てるものが多い！
SASS？LESS？SCSS？
Babel？coffee-script？TypeScript？
同じもの？違うもの？似て非なるもの？

MacとWindowsどちらも使うけど
Macではうまく動いたのにWindowsだとうまく動かない！
動かざること山のごとし！

もう脳内はめちゃくちゃという感じです。
情報を整理するために調査するとまた新たな技術の扉を開けてしまう。

# **一回深呼吸する**

とりあえずこのままだといつまでたっても収集がつかないと思い
一回深呼吸しました。

WEBの進化がすごかったのであれこれ手をだしすぎた。
まずやりたい事に集中しようと心を落ち着けました。

## **やりたいこと**

特にやりたかったのはブラウザで使うJSライブラリの開発です。
まずはそれなりの規模でも開発しやすい環境を作りたい。

# **とりあえずNode.js**

まずはJavaScriptの実行環境であるNode.jsをシンプルに理解していこう。
そう思いNode.jsで簡単なプログラムを書いて動かしたり
とにかく基本から攻めていきました。

Node.jsではrequire()で外部ファイルを読み込める。
これ、非常にやりたかった。

しかしrequire()はブラウザでは動かないようだ。
どうにかして動かせないものか。。。


調べてみるとbrowsarifyというパッケージを使うと
require()がブラウザでも使えるようにコードを変換してくれる事がわかった

なるほど、browsarifyはそういうものだったのか。

JavaScriptでもクラスベースで開発したいな
将来的にはJavaScriptでクラスも使えるみたいだけど
ブラウザはまだ完全にサポートしてくれるわけじゃないみたいだし。。

調べてみるとBabelというパッケージがあった。
これは新しい言語仕様で書いたJavaScriptを現在主流のES5に変換してくれるようだ。

これは便利だ。

あれ、BabelとBrowsarifyはどうやって連携すればいいんだ？

調べていくと
Babelifyというパッケージを使えばBrowsarifyとBabelをいい感じに組み合わせられる事がわかった。


こうして１つずつやっていくと
どんなパッケージが何のためにあるのかを理解しやすく
今まで調べてよくわからないままになっていた情報が
頭の中で繋がっていき、ぼんやりとだが全体の雰囲気が見えるようになってきた。

## **千里の道も一歩から**

ブラウザの進化の凄さを早く味わいたいとゴールを急ぎすぎていたと思う。
今からフロントエンドに手を出すなら
まずはここ数年のWEBの進化の流れを調べてみるといいかもしれない。

特にどのタイミングで何が登場したのかという時系列を知るのは有益だと思う。

例えばSASS(SCSS)とLESSというほぼ同じようなものがある。
これはどちらもCSSをもっとスマートに書けるようにした新たなScript言語だが
Wikiによると

> Sassは、ハンプトン・キャトリン[4]が設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。

とあり

> LESSは、Alexis Sellierが設計した動的スタイルシート言語である。 Sassに触発され、後にCSSに似たブロック形式構文を採用した新しいSassの「SCSS」構文に影響を与えている。

とある。

1.最初にSASSが登場
2.SASSに触発されLESSが登場
3.LESSに触発されSCSS記法が誕生

というような流れが見えてくる。

ここ最近は進化が早いうえに、このように触発されて似たようなもの
ただしそれぞれに利便性があったり、使いどころがあるといったものが大量にある。
何を選択すればいいかというのは歴史を振り返る事で見えてくる事も多いだろう。


# **おわりに**

WEBは紆余曲折をへて、すさまじいスピードで進化している。
今はその過度期なのかもしれない。
やや落ち着いてきた傾向があるようにも感じる。

さらにもう少しすると
このカオスな現状も整理されてくるのではないかと思う。

またひさびさにWEBに舞い戻り
とてつもない進化に翻弄されたことで

改めて基礎の大切さ、１つ１つ丁寧に学ぶ事の大切さを感じた。
「初心忘るべからず」
hyperapp-nestableで作ったComponentをLazyComponentとして扱う

[hyperapp-nestable](https://github.com/zaceno/hyperapp-nestable)を使うと、１つのappを１つのComponentとして使うことができるようになります。つまり、グローバルではないstateとactionsを持つコンポーネントを作ることができます。

```jsx
import nestable from 'hyperapp-nestable'
import { h, app } from 'hyperapp'

const state = {value: 0}
const actions = {
  up: () => ({value}) => ({value: value + 1}),
  down: () => ({value}) => ({value: value - 1})
}
const view = (state, actions) => (props, children) =>
  <div>
    <h1>{props.name}</h1>
    <p>{children}</p>
    <button onclick={actions.up}>+</button>
    <p>state.value</p>
    <button onclick={actions.down}>-</button>
  </div>
const Counter = nestable(state, actions, view)

app({}, {}, () =>
  <div>
    <Counter name='sosukesuzuki'>こんにちは</Counter>
  </div>)
```
最後の`Counter`は通常のコンポーネントとして扱うことができるようになります。
## LazyComponents使えなくないかい
しかし、1.2.0から入ったLazy Componentsという機能を使うことができません。(Lazy Componentsについては過去に自分が紹介記事を書いてるので、[こちら](https://qiita.com/sosukesuzuki/items/1015c1f256459ac76996)を御覧ください。)
使うために試行錯誤してみました。愚直にやっているのでもっと良い方法をご存知の方がいたらコメントで教えて欲しいです。

```jsx
const state = {value: 0}
const actions = {
  up: () => ({value}) => ({value: value + 1}),
  down: () => ({value}) => ({value: value - 1})
}
const view = (props, children) => (globalState, globalActions) => (state, actions) =>
  <div>
    <h1>{props.name}</h1>
    <p>{children}</p>
    <button onclick={actions.up}>+</button>
    <p>state.value</p>
    <button onclick={actions.down}>-</button>
  </div>

const LazyConuter = (props, children) => (globalState, globalActions) => nestable(state, actions, () => view(props, children))
```
こうすることによってLazyComponentsとしてグローバルアクション/ステートを受け取れるようになります。
Ext JS Application Development Blueprints 第2章ノート

『Ext JS Application Development Blueprints』第2章の読書ノートをメモっとく。

Ext JS である程度の規模のアプリケーションを開発したいエンジニアにおすすめできる書籍はこれくらいかな。Ext JS の初学者である場合は高くて英語だけど公式のオンライントレーニング Fast Track to Ext JS 6.5 を受講するのがオススメ。

ちなみに第1章の読書ノートは記事にしていない。第1章は Ext JS とは何かという話なのであまりノートにする必要がない気がした。

# ノート

第2章のトピックは MVC・MVVM・イベントドメインだ。Ext JS である程度開発すると MVVM であることを活用した実装ができるようになるので、MVC と MVVM についてはさらっと読めばいいと思う。ただ、イベントドメインの部分は知らない人も多いと思うので、イベントドメインについてはサンプルを動かしながらコードを追っかけてみよう。

# サンプルコード

サンプルコードを Sencha Fiddle で実装してみた。

## MvcEx1v4

![mvc-ex1-v4.png](https://qiita-image-store.s3.amazonaws.com/0/67627/92a1987c-9a34-97d5-4769-d8c59b3cad05.png)

MVC のサンプルコードで Ext JS 4.2.1 で動作する。

https://fiddle.sencha.com/#fiddle/2fuc

## MvvmEx1v5

![mvvm-ex1-v5.png](https://qiita-image-store.s3.amazonaws.com/0/67627/bcdc3bc3-ef8e-cf34-557b-e32bc1c50123.png)

MVVM のサンプルコードで Ext JS 5.0.1 で動作する。

https://fiddle.sencha.com/#fiddle/2fvb

このサンプルコードを Ext JS 6.2.0 で動作するように修正してみた。最近の Ext JS の書き方になるような修正も追加している。

https://fiddle.sencha.com/#fiddle/2g4b

## EventDomain1

![event-domain1.png](https://qiita-image-store.s3.amazonaws.com/0/67627/ba637143-2db6-7729-b7f9-b724ad80b9d6.png)

イベントドメインのサンプルコードで Ext JS 5.0.1 で動作する。

https://fiddle.sencha.com/#fiddle/2fvd

このサンプルコードを Ext JS 6.2.0 で動作するように修正してみた。最近の Ext JS の書き方になるような修正も追加している。

https://fiddle.sencha.com/#fiddle/2g4d

# 参考文献

Ext JS Application Development Blueprints
Hugoで数式(Mathjax)を書く時の注意事項

Hugoで作ったWebページに数式（Mathjax）を書く時にハマった点のメモ

因みに、基本的な設定は以下を参照
https://gohugo.io/content-management/formats/

## 改行
改行するためにはバックスラッシュ`\`は2つではなく6つ必要

```markdown:☓.md
a = b + c\\
d = e + d
```

```markdown:○.md
a = b + c\\\\\\
d = e + d
```

```math
a = b + c\\\\\\
d = e + d
```
この点は以下にも記載がありました
http://blog.tonytsai.name/blog/2017-01-05-display-multi-line-equations-and-matrix-correctly-in-hugo/

## 空行
空行はあってはいけない。

```markdown:☓.md
a = b + c\\\\\\

d = e + d
```

```markdown:○.md
a = b + c\\\\\\
d = e + d
```

```math
a = b + c\\\\\\
d = e + d
```

## Begin/End
`\begin`, `\end`の中に`*`はあってはいけない

```markdown:☓.md
\begin{eqnarray*}
a = b + c\\\\\\
d = e + d
\end{eqnarray*}
```

```markdown:○.md
\begin{eqnarray}
a = b + c\\\\\\
d = e + d
\end{eqnarray}
```

```math
\begin{eqnarray}
a = b + c\\
d = e + d
\end{eqnarray}
```
## 最後に

認識の誤りやその他気付いたこと等ございましたら、コメント下さい。
OpenCV 以外の場所にある深層学習ベースの顔検出を調査中(2)

この記事は、以下の記事にマージしました。
[OpenCV 以外の場所にある深層学習ベースの顔検出を調査中](https://qiita.com/nonbiri15/items/927d202e7d95e6e81ae5)
ProgateでのRuby学習　Lesson1　【条件分岐】

# 条件分岐
条件分岐とは、『ある条件を満たした場合に、ある処理を実行する』ことです。
日常の中でも無意識のうちに多く使われていて、
テストの点数が合格点をクリアすれば合格となる、
天気が雨だった場合は試合が中止となる、など
『もしこうだったら、こう！』ってことです。

英文でも使われる、もしも〜だったら、の『if』を使っていきます！

書き方としては、
**if 条件
処理（条件を満たす場合に実行）
end**

このようにifから始まり、必ずendで閉じます。

**その日の気温が３6℃で３５℃を超えている場合、
その日は猛暑日です。と表示する**
これをif文にしていきましょう。
こんなに暑い日はなかなかありませんがw

**if 気温が３５℃を超えた場合
猛暑日です、と表示する
end**
⇩
コード
**temperature = 36
if temperature > 35
puts "猛暑日です"
end**
※℃などの単位は文字列として扱うので、
ここでは数値のみ

出力結果
**猛暑日です**

このように条件が成り立つ場合のみ、処理が実行されるので、
条件が成り立たない場合は処理が実行されず、何も出力されません。

これには真偽値が関係しています。

# 真偽値
簡単にいうと、出された条件に対して、その値が成り立つか、成り立たないか、です。
分かりにくいので、気温で例えてみます。

条件：気温が３５℃以上の場合
その日の気温が３６℃→成り立つ（３５℃超え）＝**ture**
その日の気温が３２℃→成り立たない（３５℃未満）=**false**
成り立つ場合にはtureが、成り立たない場合にはfalseという
真偽値というものに置き換えることができます。

コード
temperature = 36
if temperature > 35
end
**puts temperature > 35**

出力結果
**ture**

コード
temperature = 32
if temperature > 35
end
**puts temperature > 35**

出力結果
**false**

tureの結果に対して処理が実行されてきたことになります。

# 比較演算子
ここまでで、○○よりも大きい、小さいと表記する時に使う記号は
**比較演算子**と呼ばれ、真偽を表します。

**a > b**  aはbよりも大きい場合ture
**a >= b**  aはbと等しいかそれ以上の場合ture
**a < b**  aはbよりも小さい場合ture
**a <= b**  aはbと等しいかそれ以下の場合ture

大小以外に、等しいかどうかを真偽するものもあります。

**a == b** aとbが等しい時ture
**a != b** aとbが等しくない時にture

ひとまず、ここまで！
tureの場合の処理を実行させることはできるようになったので、
次回はfalseの場合に処理が実行されるようにしていきます〜！
gooseでdefault addr for network unknown

https://qiita.com/K_ichi/items/b9362e3a3c5688e494e2

こちらの記事を参考に接続設定を記載し`goose up`を実行すると

```shell
default addr for network 'tcp:localhost:3306*hogehoge/poge' unknown
```

となり接続出来なかった際の対処メモ。

エラーでググると[こちら](https://github.com/prometheus/mysqld_exporter/issues/53#issuecomment-152848213)に辿りついたので、
[Accessing the Database](http://go-database-sql.org/accessing.html)を参考に`dbconf.yml`を以下の通りに変更。

```yml
development:
  driver: mysql
  open: poge:moge@tcp(127.0.0.1:3306)/hogehoge
```

無事接続できました。

バージョン変更等で処理が変わったのかもしれません。
MvvmCrossで簡単にアプリ開発を始める準備


前に[MvvmCrossでアプリ開発を始める準備 2018年4月版](https://qiita.com/f-miyu/items/a0b066cfc27ea9efbd8a)という記事を投稿しましたが、始めるまでかなり手間があるものでした。
調べてみたら、とっても簡単に始められる方法があったので、今回はそれを紹介したいと思います。

# なんとコマンド叩くだけ

```
dotnet new --install MvxScaffolding.Templates::*
```

MvxScaffolding.Templatesをインストールして、


```
dotnet new mvxnative --name MyXamarinApp --solution-name MyXamarinApp
```

はい、これだけです。カレントディレクトリに「MyXamarinApp」という名前のディレクトリができているはずです。
動かしたらこんな感じです。
![スクリーンショット 2018-05-01 22.26.51.png](https://qiita-image-store.s3.amazonaws.com/0/236182/5c6f64bf-3e3b-4e2e-8304-4618ba5870be.png)

ネイティブだけではなく、MvvmCross.Formsもいけます。

```
dotnet new mvxforms --name MyXamarinFormsApp --solution-name MyXamarinFormsApp
```

ユニットテストのプロジェクトを追加するなどのオプションもあるようです。
https://github.com/Plac3hold3r/MvxScaffolding/blob/master/docs/template_dotnet_cli.md#additional-commands-options

# Visual Studioの拡張機能を使う
WindowsならVisual Studioの拡張機能も用意されています。

![拡張機能.png](https://qiita-image-store.s3.amazonaws.com/0/236182/5c3560f7-9320-8fd6-2052-c2253c1fb3b2.png)

GUIで設定ができていい感じです。

![ss2.png](https://qiita-image-store.s3.amazonaws.com/0/236182/edcfca96-136b-3491-a13e-43436493864a.png)

# まとめ
StarterPackが使えなくなってしまい、どうしたものかといった感じでしたが、こんなにいい方法がありました。
今後は、MvvmCrossを始める場合は、MvxScaffoldingです。
WWDC18について

<p>今年のWWDCは6月4日から8日までサンノゼで開催される。参加申し込みは抽選方式となった。</p>

<p>昨年から開催地がサンノゼに戻ったことにより、過去のWWDC情報に役立たない部分があると思うが、パッと見つけたものを列挙してみる。</p>

<ui>
<li><a href="http://www.cocoa-study.com/wwdc/2008/c1/">WWDCノススメ 2008</a></li>
<li><a href="http://www.cocoa-study.com/wwdc/2009/c1/">WWDCノススメ 2009</a></li>
<li><a href="http://www.cocoa-study.com/wwdc/2010/c1/">WWDCノススメ 2010</a></li>
</ul>

以下は事前のイベント。

<ui>
<li><a href="https://pre-wwdc.connpass.com/event/83343/">WWDC Pre Party 2018 at Ebisu</a></li>
</ul>

WWDCと連動したイベント。

<ui>
<li><a href="https://cocoa-kanto.connpass.com/event/85554/">The Bash in Tokyo</a></li>
</ul>

【関連情報】
<a href="https://cocoa-kanto.connpass.com/event/85554/">The Bash in Tokyo</a><br />
<a href="https://cocoa-kanto.connpass.com/">BUKURO.swift</a><br />
<a href="https://www.facebook.com/groups/cocoa.kanto/">Cocoa勉強会 関東</a><br />
<a href="https://mosa.connpass.com/">MOSA</a><br />
<a href="http://www.bitz.co.jp/weblog/"> Cocoa練習帳</a><br />
<a href="https://qiita.com/m_yukio>Qiita</a><br />
[Laravel]常時SSLなアプリケーションでのURL生成のベストプラクティスを考える

# 前提
常時SSL化したにも関わらず、`asset()`とか`route()`とかで吐き出されるURLがhttpになってしまう！というお悩みに対するベストプラクティスをまとめてみた。

# ケース1: クライアントとアプリ間でSSL通信する場合
`AppServiceProvider.php`の`boot`にて`UrlGenerator`を注入し、`forceschema`を使ってURL生成時のプロトコルを指定する。

```php:app/Providers/AppServiceProvider.php

use Illuminate\Routing\UrlGenerator;

class AppServiceProvider extends ServiceProvider
    public function boot(UrlGenerator $url)
    {
        $url->forceScheme('https');
    }
}
```
開発環境はhttpだよ！という場合は、`app.env`を参照して分岐させておく。

```php:app/Providers/AppServiceProvider.php

    public function boot(UrlGenerator $url)
    {
        if (in_array(config('app.env'), ['prd', 'stg'], true)) {
          $url->forceScheme('https');
        }
    }
}
```
# ケース2: クライアントとLB間でSSL通信する場合(LBとアプリ間はHTTP通信)
## Laravel >= 5.5
`TrustedProxy`を利用する。具体的にはミドルウェアの`TrustProxiesクラス`を良い感じに設定する。

```php:app/Http/Middleware/TrustProxies.php
<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Fideloper\Proxy\TrustProxies as Middleware;

class TrustProxies extends Middleware
{
    /**
     * The trusted proxies for this application.
     *
     * @var array
     */
    protected $proxies = '**'; //ここを**にする。

    /**
     * The current proxy header mappings.
     *
     * @var array
     */
    protected $headers = [
        Request::HEADER_FORWARDED => 'FORWARDED',
        Request::HEADER_X_FORWARDED_FOR => 'X_FORWARDED_FOR',
        Request::HEADER_X_FORWARDED_HOST => 'X_FORWARDED_HOST',
        Request::HEADER_X_FORWARDED_PORT => 'X_FORWARDED_PORT',
        Request::HEADER_X_FORWARDED_PROTO => 'X_FORWARDED_PROTO',
    ];
}
```
参考：[Laravel5.5 HTTPリクエスト - 信用するプロキシの設定](https://readouble.com/laravel/5.5/ja/requests.html#configuring-trusted-proxies)

## Laravel < 5.5
ケース1と同じ方法で対処する、または`composer.json`に以下を追加して、`5.5`以上では同梱されていた`TrustedProxy`をインストールする。

```json:composer.json
{
    "require": {
        "fideloper/proxy": "^3.3"
    }
}
```
参考：[fideloper/TrustedProxy](https://github.com/fideloper/TrustedProxy)
Unityで上限値（カンスト値）を設定してみた（拡張メソッド）

# はじめに
クッキークリッカー系ゲームを作ったのですが、int型が割と簡単にオーバーフローしてしまったので、拡張メソッドを使って上限値・カンスト値を設定してみました。

今回は、intとintを加算して、元々の値に代入する仕様ですので、それぞれのintのカンスト値を999,999,999（10億 - 1）に設定しました。
intの値の範囲は、正の部分が2,147,483,647（21億4748万3647）のため、999,999,999（10億 - 1）にカンスト値を設定すれば、
・何かの拍子にカンスト値同士を足してしまっても、intの値の範囲を超えない
・ゲーム慣れしている人にとって、上限値っぽく見える
という点でメリットがあるかなーと考えた結果です。

# コード
```IntExtension.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public static class IntExtension {
	// 上限値
	public const int UPPER_LIMIT = 999999999;
	// 下限値
	public const int LOWER_LIMIT = 0;

	///<summary>
	/// Int同士の加算時に、加算予定の値につけて下限・上限を超えないかチェック。
	///<param name="baseVariable">加算される元の値</param>
	///<example> 
	///<code>
	///	willAddInt.AddIntAndIntLimitCheck(BaseInt);
	///</code>
	///</example>
	///</summary>
	public static int AddIntAndIntLimitCheck(this int _willAdd, int baseVariable) {
		int checkedNum;
		// 加算する二値の和が上限値より大きい場合、上限値で上書きする。
		if (_willAdd + baseVariable > UPPER_LIMIT) {
			checkedNum = UPPER_LIMIT;
		// 二値の和が下限値未満になる場合、下限値で上書きする。
		} else if (_willAdd + baseVariable < LOWER_LIMIT) {
			checkedNum = LOWER_LIMIT;
		// 問題がなければ、二値の和をそのまま返す。
		} else {
			checkedNum = _willAdd + baseVariable;
		}
		return checkedNum;
	}
}
```
# 使い方
使い方は、以下の値があるとして
・足した結果を格納する変数 BaseInt（e.g. プレイヤーの所持金）
・これから足すint値 willAddInt（e.g. モンスターを倒した時に得られるお金）

`BaseInt = willAddInt.AddIntAndIntLimitCheck(BaseInt);`
みたいな感じで使います。
BaseIntが2回あるのが冗長なのですが、左辺の変数と、右辺の引数部分を別の値にすることもあるかもしれないので、こんな感じにしました。

既存のメソッドを拡張したときは、利用時には特にusingなどを足さなくても大丈夫です（int型が使える必要はありますが）。

# おわりに
莫大なデータ値を扱う場合、それが正の値であるならばuintを使ったり、環境が許せばlongを使ったりという選択肢もあると思います。
今回は、UnityのPlayerPrefsに直で保存できる値がfloat、int、stringだったため、intを使いました。
データ型として例えばuintを使った場合、保存時にstringパースして、引き出す時にuintパースをすればできるはずなのですが、ボクが試した限りでは変換が上手くいかなかったのでintを利用しました。


いやしかし、友人がツールを使って数分でオーバーフローさせてくれたのは笑いました。
何かの参考になれば幸いです。

# 参考文献
データ型の範囲
https://msdn.microsoft.com/ja-jp/library/s3f49ktz.aspx

【C#】 数値を加算して、範囲を超えた分は 0 からの値として処理して返す拡張メソッド - コガネブログ
http://baba-s.hatenablog.com/entry/2014/07/03/100719
Raspberry Piで赤外線リモコンをするときのエラーを解決した

以下のサイトを参考に、Raspberry Pi2 で照明やエアコンのON/OFFをしたりしてたのだが、なぜかエラーが出るようになってしまった。

https://qiita.com/ww24/items/32d2a78c20e6dcc2e68c

```bash
pi@raspberrypi:~ $ irsend SEND_ONCE light_ima off

hardware does not support sending
Error running command: Input/output error
```

# 解決策

すぐ見つかった。

https://www.raspberrypi.org/forums/viewtopic.php?t=192891

https://gist.github.com/prasanthj/c15a5298eb682bde34961c322c95378b



### 蛇足
ラズパイで機器のON/OFFって結構需要あると思ってたけど、いまとなってはGoogle Home買えって話なんだろうなぁ
第1回：線形回帰とロジスティック回帰

はじめに**回帰**をやろうとしている理由は、本質的には**回帰**が機械学習における**学習**と同じと言えるからです。

## **線形回帰**
線形回帰とは、散らばっているデータに関して、散らばり方のルールを直線だと仮定して、その直線がどんな感じなのかを調べることです。
:eye:直線のことを「線形」、変数間の関係を関数で表すことを「回帰」と呼びます。

それでは線形回帰の説明に移ります。
線形回帰をビジュアル一発で表すと下図のイメージです。
ちょっとインチキしてますが、成長期では、年齢と握力に直線的な関係があると仮定して、その直線を求めたものです。
![graph1.png](https://qiita-image-store.s3.amazonaws.com/0/244596/8d3bc977-d176-a3ac-4e87-41ff2fa736a6.png)
fig.1 成長期の男子の平均握力

ちなみに上のグラフでは、21才男子の平均握力のデータがありません。
これを線形回帰を用いて予測すると、この直線の式のxに21を入れたときのy(50.6kg)が予測値となります。

実際に、どのようにして直線の式（関数）をはじき出したのかを見ていきましょう。

fig.1のデータは以下です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/244596/c631256d-07e3-432a-603f-32a2d29152e1.png)
:eye:これを**トレーニングデータ**と呼びます

いい感じにこれらの年齢と握力の関係を表す直線の式を求めましょう。

まずはテキトーに式を決めましょう。
$y = 3x + 5$

一番左のカラムの年齢6をxに代入してみると、23になります。
でも6歳の実際のyは9.53で大きく異なります。
xの係数を小さくしてみると良さそうです。
$y = 2x + 5$とし、年齢6をxに代入してみると、17になります。
もう少しxの係数を減らすか、定数項を減らす必要がありそうです。

上記のようなことを繰り返してfig.1のデータすべてをいい感じに説明できる
直線の式にたどり着ければ線形回帰完了です。

ですが、試行錯誤を繰り返すための指標が欲しいところです。
なので新たな概念を入れます。誤差です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/244596/23900133-07ed-eb4e-8fea-189ec2f38fe4.png)
fig.2 誤差イメージ

直線と点の距離を誤差といいます。
この直線とそれぞれの点の距離の和（誤差の和）が最小になる直線を導き出す方法を、**最小2乗法**といいます。
:eye:最小2乗法そのものの原理は重要でないので割愛します。興味がある方は[こちら](https://sci-pursuit.com/math/statistics/least-square-method.html)を参照して下さい。

最小2乗法を用いてトレーニングデータをうまく説明できる直線の式を求めることを線形回帰と言います。
:eye:実は今回扱った線形回帰はとくに「線形単回帰」というものです。線形回帰は本当は直線の式だけを表すわけではないのですが、簡単のため、そう表現しています。

## **ロジスティック回帰**
ロジスティック回帰の説明に移りますが、線形回帰と共通している部分もありますので、線形回帰とロジスティック回帰で共通な点/異なる点という形で示します。
##### **共通な点**
- トレーニングデータすべてをいい感じに説明できる式にたどり着くことを目的とする

:eye:ロジスティック回帰での、いい感じに説明できる式は例えば以下のようになります。

```math
{y=\frac{1}{1+e^{(2x + 5)}}
}
```
なんだかよくわからないけど確率を予測するんだなあくらいに理解していただければオッケーです。
##### **異なる点**
- 線形回帰は実際の値を予測するのに対して、ロジスティック回帰は発生確率（0~1の値）を予測する

つまり握力の例で言えば、線形回帰は**「年齢から平均握力そのものを予測する」**のに対して、ロジスティック回帰は**「（例えば）30歳での平均握力が30kgとなる確率」**を予測します。

## **まとめ**
まとめます。**回帰**とは与えられたデータからあるルールを見つけ出すことです。
線形回帰ではルールを直線だと仮定して、誤差を用いて一番適当な式を求めました。
ロジスティック回帰は散らばりのルールを求めるところまでは線形回帰と同じですが、ルールに対して、あるデータを適用した場合の予測値が確率であるという点が異なります。
実はこの、データの散らばりのルールを見つけるという部分は、機械学習における**学習**と同じです。
機械学習における**学習**を理解するための準備として、今回は**回帰**を扱いました。


## **次回**
次回はニューラルネットワークを扱います。
行列とベクトルの操作が登場しますが、分かりやすく解説するつもりです。
是非お付き合いください。
せーの！:eye:サハスラーラ:eye:
Emulatorでビルドした時のWARNINGの対処

##起こったこと
実機が手元になかったので久々にEmulatorでビルドしたらEvent Logに次のWARNINが表示された。
Emulator: WARNING: HAXM 6.1.1 is installed. Please install HAXM >= 6.2.1 to fix compatibility issues on Mac.

Emulatorの表示もおかしかったのでメッセージの通り、HAXM 6.2.1をインストールしようと思い
SDK Manager -> SDK toolsのIntel x86 Emulator Accelerator (HAXM installer)を確認。
<img width="1023" alt="スクリーンショット 2018-05-01 23.48.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/172740/3fd48880-53b0-8839-d235-5206f6632b25.png">

...既に6.2.1やん。

##対処法
とりあえず、Intel x86 Emulator Accelerator (HAXM installer)のチェックを外してApply
→再度、Intel x86 Emulator Accelerator (HAXM installer)をインストール
で直りました。

原因はよくわかりません...
が備忘録として残しておきます。
見える化とは（主観）

「見える化」という言葉が嫌い。:frowning2:

理由としては
 > 日本語としてありえない。（冗談抜きで大量にみると寒気が走る。:snowman2:）
 > 見える化のすることが不明。
 > 見える化プロジェクトは見える化という単語が独り歩きし、毎回スコープが決まらない。
 > 見える化に対応する英語が見つからず、困る。

見える化を英語にするとどうなろうか。
 > Visualization

海外資料をVisualizationで調べるが、見える化とはイコールにならず、苦労する。

Visualizationを日本語にするとどうなろうか。
 > 可視化

ただ、可視化は見えることにすることであり、それがビジュアル化かどうかは問うていない。

つまり、見える化≠Visualization≠可視化　なのではと気付いてきた。

一気に結論だが、見える化は別の言葉に置き換える（気持ち悪いから）とかではなく
以下の機能を内包している言葉なのではと、考える。
 > １データの整備
 > ２データの可視化（Visual化含む）
 > ３データの分析

１の部分が置き去りにされることが多く、
３は別のプロセスで実行されることもあり、
２に重点を置かれるパターンがほとんど。

・・・こういう風に最初に分けてからプロジェクトを進めれば少しはうまく進みそう。

ただ、上の方で独り歩きしてから決まって降りてくることが非常に多いのよね。。。
「見える化」は:flag_jp:のITの成長を阻害しているバズワードだと考えます。。。
WebKitでPrivateAPI使ってProxyを実装する

#やりたいこと

ある案件でアプリ内部組み込みブラウザのトラフィックを監視する必要が生まれた。
だから、当初は`URLProtocol`を使ってハンドリングしようとも考えたが、
`URLProtocol`は`UIWebView`でしか使えないので色々悩んだ結果
PrivateAPIに手を出してみたと言うお話。

#実装

iOS11以上であれば全く難しくはない
iOS11未満であってもできなくはないがPrivateClassをNSClassFromString(:)
で持ってきて...
って話になるので割愛

WKURLSchemeHandlerなるものがあるのでそれで実装する。

```swift
let config = WKWebViewConfiguration()
config.setURLSchemeHandler(WebViewProtocol(), forURLScheme: "dummy")//_urlSchemeHandlersはlazyなのでdummyで初期化してあげる必要がある。
        
let _handlers = config.value(forKey: "_urlSchemeHandlers") as! NSMutableDictionary
        
_handlers.setObject(WebViewProtocol(), forKey: "https" as NSString)
_handlers.setObject(WebViewProtocol(), forKey: "http" as NSString)
        
webview = WKWebView(frame: self.view.frame, configuration: config)

```

ポイントは
`WKWebViewConfiguration::setURLSchemeHandler`
で"http","https"を登録すると落ちる（落とされる）ので
`value(forKey:)`で`"_urlSchemeHandlers"`をそのままいじってしまうこと

(`NSMutableDictionary`はクラスなので参照渡し)

んであとはProtocolの中身を書いてしまえばよい

#例

```swift

import WebKit
import Alamofire

class WebViewProtocol:NSObject, WKURLSchemeHandler {
    func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) {
        print(urlSchemeTask.request)
        Alamofire.request(urlSchemeTask.request).response(queue: .main){res in
            if let error = res.error{
                urlSchemeTask.didFailWithError(error)
            }
            urlSchemeTask.didReceive(res.response!)
            urlSchemeTask.didReceive(res.data!)
            urlSchemeTask.didFinish()
        }
    }
    func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) {
        
    }
}

```

#まとめ

多分今後PrivateAPIについてもさもさ書くと思います。
Gitで初めてのbranch!! 文系学生が勉強してみた!!

##はじめに
インターン先でプログラミングを勉強中の文系学生。
「そろそろ実務を任せてみようかな」
「!!!!」
「じゃあ、Gitで～～～～～」
「????」

##branchとは
とりあえず「branch」という言葉は聞き取れた。
わかったことからやっていこう。
勉強したのはこのサイト。
[サルでもわかるGit入門～バージョン管理を使いこなそう～|どこでもプロジェクト管理バックログ](https://backlog.com/ja/git-tutorial/)

勉強したことをまとめると、branchとは…

そのまんまだよね。


平行作業ができるようにするってこと。

ブランチすることで、
Aさんが追加サービスの開発。
Bさんは現サービスの強化。
Cはバグ対応。

これらを同時に進めていくことができる。
これはプログラミングするなら必須ですな。

##初めてのbranch
###準備編
じゃあ、早速branchしていこう!!

[サルでもわかるGit入門～バージョン管理を使いこなそう～|どこでもプロジェクト管理バックログ](https://backlog.com/ja/git-tutorial/)の発展編のほとんどがブランチの解説。
これは助かる。

まずは作業用のディレクトリを作らないとな。

```
$ mkdir example
$ cd example
$ git init
```

その後、適当なファイルを作成して、作業用ディレクトリに手動で追加。

```start.txt
Let's Start Programming!!
```

そしたら、最初のコミット!!

```
$ git add start.txt
$ git commit -m "first commit"
```

###branch編
準備が終わったら、ブランチの作成していくか!!

```
$ git branch example1
```

え? これで終わり?
状態を確認してみるか。

```
$ git branch
  example
 *master
```

できてる…

`master`は管理者というか、CentOSのrootユーザーみたいな認識で大丈夫かな?

###tagの作成
勉強していると`tag`の存在を知った。
`tag`はなんというか、「やり直すための機能」かな?
tagを指定すれば、それだけでその時の状態に戻せるらしい。
せっかくだし、この便利な機能も設定しておくか!!

tag設定の仕方は次の通り

```
$ git tag example1
```

はい。終わり。

branchと同じように

```
$ git tag
```

でタグの一覧を確認できるみたい。

でも、名前だけじゃわかりにくくなることもあるよね。
そんなときには注釈をつけよう!!

```
$ git tag -m "setup"
```

これでここはセットアップをしていることが後からわかる。

ちなみに、タグの名前と注釈を一緒に付けるならこうする。

```
$ git tag example1 -m "setup"
```

付けておいて損することもないだろうし、せっかくなら付けておいたほうが良いよね。

##まとめ
初めてブランチは結構簡単に終わったな…
実際に触っていって、Gitの使い方を覚えていこう!!

##参考資料
[サルでもわかるGit入門～バージョン管理を使いこなそう～|どこでもプロジェクト管理バックログ](https://backlog.com/ja/git-tutorial/)
FeatureFused-SSD～ssdkerasのその先3～

#対象
Faster-RCNN,SSD,Yoloなど物体検出手法についてある程度把握している方．
VGG16,VGG19,Resnetなどを組み込むときの参考が欲しい方．
自作のニューラルネットを作成している方．

# 1.FeatureFusedSSDとは

限られた解像度の中で小さい物体を検出するというタスクは非常に難しいことで，速度を犠牲にして精度を上げてきたが，FSSDでは大きく速度を落とさず小さい物体検出を高精度で行う．FSSDとはSSDの複数の階層の畳み込み層の特徴マップを融合することによって文脈情報を付加させもので，参考文献1)の論文によるとDSSDのFPSが29.4なのに対して，FSSDではFPSが43らしい．

モデルは以下のようになっている．
![FeatureFusion.JPG](https://qiita-image-store.s3.amazonaws.com/0/246406/9dc1106b-4d2d-5c38-392a-99fa9359dcff.jpeg)


VGG16の畳み込み層の各層は層を深くしていくごとに特徴マップに反映されている物体の大きさは大きくなっていく．
VGG16の畳み込み層第4群3番目と第5群3番目には小物体の情報が刻まれており，オリジナルSSDでは特徴マップ第4群3番目から特徴量を抽出し，コンカチしているが，FSSDでは第4群3番目と第5群3番目の特徴を組み合わせることによって特徴マップに反映されている情報を増やそうというものである．
![ffssd.png](https://qiita-image-store.s3.amazonaws.com/0/246406/ffe944f8-78c0-2e2d-1c0f-3b13cc3321c9.png)



また，FSSDはDSSDにインスパイアされたモデルで，DSSDのElt-SUMモデルに正規化層を入れたものになっている．
FSSDではElt-SUMモデルと，Concatモデルが提案されており，Concatモデルと比較すると相対的にElt-SUMモデルのほうが多少背景ノイズに弱いが（絶対的に弱いとは言ってない），少ないパラメータで，Concatモデルよりも周囲の状況を加味した検出ができるので，私はElt-SUMモデルを使用している．
![compare.JPG](https://qiita-image-store.s3.amazonaws.com/0/246406/255a0f7b-ed02-2019-6d0a-53c1e7ef7b15.jpeg)
参考文献1)より引用

余談であるが，DSSDではElt-SUMモデルのほかに，Elt-Prodモデルなどもあり，DSSDの場合Elt-SUMモデルよりもElt－ProdモデルのほうがMAPは0.2だけ高くなるらしい．
ところで，Normalizeがなぜ10なのか疑問に思った．Deconvolutionを入れているからなのであろうか，レイヤーの大きさが畳み込み4_3に比べて半分だからであろうか．．．まいっか．

![ElementSum.JPG](https://qiita-image-store.s3.amazonaws.com/0/246406/0a07194d-19cb-42fe-f9b3-f7e7b3d1f422.jpeg)


# 2.FSSDのkeras実装
詳しくは以下のようになっている．

![6006-.png](https://qiita-image-store.s3.amazonaws.com/0/246406/0c6c002d-b424-7f73-bc1b-a3c4d57cf7af.png)

左上あたりフュージョンしているのはお判りいただけただろうか．

SSDGlobalAveragePooling版のSSDとの違いは
Filter=f,stride=s,kernel=k
とすると

・畳み込み特徴マップ4群第3番を畳み込み
→Convolution（f=512,k=(3,3)s=1）
→スケール20でl2正規化・・・1

・畳み込み特徴マップ5群第3番を畳み込み
→Deconvolution（f=512,k=(3,3)s=2）
→スケール10でl2正規化・・・2

・1と2の各要素の足し合わせ→Reluで活性化
といった操作を加えた．

#3.考察
もうちょっと精度良くてもいいような気がしたんだけどなあ．．．(笑)
ただ，少し特徴的なのは，論文にあるように一つのオブジェクトに対して，複数回検出される現象は抑えることができている．
![FeatureFused-SSD.gif](https://qiita-image-store.s3.amazonaws.com/0/246406/5e6c2c71-c91c-461a-ad3c-f342c6d5679e.gif)


# 4.終わりに
Keras版の自作ネットワークを作っている方がいたらアドバイスなどお願いします．
https://github.com/tanakataiki/ssd_kerasV2
筆者の環境
CPU:Xenon　GPU：GTX1080Ti×2
今後は他のネットワークを載せていくつもりです．




# 3.参考文献
1)https://arxiv.org/ftp/arxiv/papers/1709/1709.05054.pdf
2)https://arxiv.org/pdf/1712.00960.pdf
3)https://arxiv.org/pdf/1701.06659.pdf
HashMapのパフォーマンスの考え方

今回は、JavaのHashMapのパフォーマンスにおいて、その注意点およびパフォーマンスを出すための実装法を話したいです。

システム開発は常に可読性、保守性、パフォーマンスのバランスを取る必要があります。ただ、昨今では、ハードウェアの性能の飛躍的な向上および安価化によって、プログラムの細かいところのパフォーマンス向上よりも、可読性保守性が重視されるようになっています。そのため、可読性保守性が向上できれば、一定のパフォーマンスの犠牲も許容される傾向があります。

HashMapも同様で、一部特殊なケースを除く、ほとんどの場合、利用時のパフォーマンスを意識しなくてもパフォーマンスのボトルネックになることがありません。

ただ、実装上可読性保守性の犠牲がなしで、パフォーマンスのよい実装方もありますので、パフォーマンスの良い実装という意識が常に持つ必要があります。それが習慣になっていれば一番理想です。つまり、特にわざと考慮しなくても自然にパフォーマンスの良い実装となることです。プログラムの品質は求めている業務要件を実現することのように狭義的ではなく、可読性、保守性、パフォーマンスなども含め、広義的なことを考えるべきだと思います。日々の開発の中で、そのような意識を持って、研鑽しながら良い習慣として身に付けることが大事であります。
さて、話は戻りますが、HashMapのパフォーマンスにおいて、その注意点およびパフォーマンスを出すための実装法はなんでしょうか？

まずは、HashMapの以下のコンストラクタを見てみましょう。

```java
public HashMap(int initialCapacity, float loadFactor){}
```

HashMap生成時のパラメータとして、**initialCapacity：初期容量**と**loadFactor：負荷係数**があります。

<dl>
  <dt>初期容量</dt>
  <dd>HashMapが内部的にデータを保持するためのテーブル自体のサイズ（デフォルトで16）です。</dd>
  <dt>負荷係数</dt>
  <dd>テーブルがどの程度埋まるとテーブルの拡張を行うかという割合を表したもの（デフォルトで0.75）です。</dd>
</dl>

例えば、デフォルトの場合、初期容量(16)*負荷係数(0.75)=12となるので、***12個目**の要素がマップにputされるタイミングで、テーブルの拡張が行われます。

というわけで、要素数がテーブルサイズの現在値に負荷係数を乗じた数になった度にテーブルサイズの拡張が行われ、保持されている要素を拡張後のテーブルに配置しなおされるので、コストがかかります。

それでは、なぜテーブルがいっぱいになってから拡張を行わないのか？そうすれば、拡張回数が少なくなるわけで、パフォーマンスが良くなるのではないか？
理由はテーブルのどの位置にその要素を保持するかの仕組みによるものです。
新しい要素をテーブルにputされる場合、以下の式で保持する位置を計算することとなります。

```java
i = (n - 1) & hash
```

nはテーブルの現在サイズ、hashはputする要素のキーのハッシュ値、iは(n - 1)とキーのハッシュ値とのビットAND演算で算出したインデックスとなります。

これでわかると思いますが、

* キーが違っても、ハッシュ値が同じになることがあるため、その場合、インデックスが同じになる
* ハッシュ値が違っても、ビットAND演算で算出したインデックスが同じになる

とのことがありえますので、同じインデックスの位置に複数の要素を保持することがあり、それらの要素を別のツリー構造で保持することとなります。
そのため、テーブルがすべて埋まることはほとんどありませんし、ツリー構造に要素の追加、およびツリー構造に保持する要素の検索処理で、インデックスを特定した後に、更にツリー構造への追加または走査が必要となりますので、パフォーマンスが劣化します。

テーブルの初期サイズが大きければ大きいほど、パフォーマンスの劣化を軽減することができるが、その場合、要素を保持しないテーブルの無駄空間が増えることとなりますので、メモリの無駄となります。

つまり、HashMapを利用する場合、**初期容量および負荷係数を調整することでパフォーマンスまたは使用するメモリ量に影響を与えることができ、これがHashMap利用時の重要な考慮要素となります**。デフォルト値はある意味でパフォーマンスとメモリの使用量のバランスが取れた数値といえますので、冒頭にも話したように普段HashMapを利用する場合、ほとんどデフォルト値のままで問題ありません。

ただ、以下の前提条件が満たせれば、

* HashMapに保持する要素数が最初からわかる
* HashMapのキーの仕組みが自由に決めることができる

パフォーマンス劣化もなく、メモリも無駄がない対応が可能となる。
具体的な対応方法は以下となる。

* 初期容量が保持する予定の要素数にする
* 負荷係数がテーブルの拡張が絶対発生しない数字にする（例えば2）
* キーは最初から作成しておいて、各キーのハッシュ値は0～(要素数―1)までの数値を順にセットする(独自のキークラスを作成＊1)

＊1 独自のキークラスを作成することで余分のメモリが必要となりますが、ここで一旦無視しましょう。

ここまででHashMap利用時のパフォーマンス考慮の話をまとめましたが、本当に言いたいのはHashMapそのものではなく、どんな場合であっても、**物事の本質を理解することが大事で、それによって、プログラムもアーキテクチャーも実際のニーズに合わせて最適化することが可能となります**。

周@ソフトシンク
JavaScriptの連想配列の作り方と、CocosCreatorの画像読み込み修正版

こんばんは、やわらーです。
[先日書いた画像の一括読み込みの記事](https://qiita.com/Yawarakko/items/98b5fc6c516bdd700909)ですが、どうやらスマホなどのスペックの低い端末では正常に動作しないことが判明しました。
読み込み順はフォルダ内の順番ではないようです。
今回はそれの修正です。

# 環境
windows10
Cocos Creator v1.9.0


# 連想配列へ要素の追加
読み込みがフォルダの順番通りにいかないのなら、ファイル名を取得して連想配列にするしかないじゃない！
というわけで、ファイル名の取得と連想配列の作り方です。

```javascript:LoadResources.js
cc.Class({
    extends: cc.Component,

    properties: {
        imageData: null,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this._loadImages();
    },

    // resourcesフォルダの読み込み
    _loadImages(){
        this.imageData = new Array();
        let self = this;
        cc.loader.loadResDir("Images", cc.SpriteFrame, function(err, assets){
            if(err){
                cc.error(err);
                return;    
            }
            for(let storage of assets){
                self.imageData[storage.name] = storage; // 名前をKeyに要素を追加
            }
        })
    },
});
```
読み込んだ画像ファイルの名前はnameで取得することができます。その名前をキーにし、配列に要素を追加していきます。

# 配列へのアクセス

![bandicam 2018-04-23 22-29-42-495.jpg](https://qiita-image-store.s3.amazonaws.com/0/167483/c2298352-9166-d10e-0e1c-047e69d6a2fb.jpeg)
画像ファイルは前回と同様にいらすとや様のものを使用しています。

```javascript:SpriteChange.js
let LoadResources = require("LoadResources")

cc.Class({
    extends: cc.Component,

    properties: {
        loadResources: {
            default: null,
            type: LoadResources
        },
        sprite: {
            default: null,
            type: cc.Sprite
        },
        _timer: 3,
        _imageNumber: 0,

        _imageName: null,
    },

    onLoad(){
        this._imageName = ["image1", "image2", "image3"];
    },

    update (dt) {
        this._timer -= dt;
        if(this._timer < 0){
            this._timer = 3;
            this._imageNumber ++;
            if(this._imageNumber > 2){
                this._imageNumber = 0;
            }
            this.sprite.spriteFrame = 
                this.loadResources.imageData[this._imageName[this._imageNumber]];
        }

    },
});
```

imageName配列に画像の名前を入れ、それをKeyとして使用しています。連想配列にするとlengthで長さが取得できないようです。

結果は前回と同じなので割愛。
これで画像ファイルとファイル名の連想配列が作れました。

---

以上がJavaScriptの連想配列の作り方と、CocosCreatorの画像読み込み修正版です。
これで画像がフォルダ内の順番通りに読み込まれなくても正しい画像が取得できるようになりました。
初めてRailsのコードを書いてみた

## きっかけ

社内アプリ（スキールシート管理アプリ）を作りたくて、また誰もやる暇がないから。GW連休中にRailsでコードを書くことに。以前年末年始でAndroidを学習し、アプリを作ったこともあるので少し自信もあった。

## 参考にしたもの

### 動画講座（https://dotinstall.com/）
- rails環境設定（vagrant）
- Rubyの基本文法(ruby, ruby on rails)

### 書籍
http://amzn.asia/ejwbhNO

### 参考にしたサイト

#### sqlite
https://www.dbonline.jp/sqlite/sqlite_command/index1.html

#### ruby & ruby on rails
https://www.rubylife.jp/rails/

## コードを書く最中にメモ（更新中）
頻繁に使っているコマンドをメモしました。今のところRailsコードを書くよりコマンド入力が多いです。

### sqliteメモ

```
//sqlite接続
sqlite3 db/development.sqlite3

//切断（スキーマ変更があったら一旦切断して再接続）
.exit

//スキーマ確認
.schema job_search_histories

//SELECT 表示モード
.mode header //タイトル表示 
.mode line //縦に表示されるので読みやすい
```

### Rails DB関連メモ

```
//モデル生成
rails generate model agreementHistory

//最新情報からmigration
rails db:migrate  

//リセットしてからmigration
rails db:migrate:reset  

//バージョン指定migration
rails db:migrate VERSION=20180427212228 

//スキーマ(schema.rb)から再構築
db:schema:load  

//シードデータ(seed.rb)から挿入
rails db:seed   

//モデルがすでに存在する場合のscaffold
rails generate scaffold_controller users
```

### vagrant関連

```
vagrant起動, ステータス、終了
vagrant up
vagrant status
vagrant halt
```

### Railsサーバー起動、停止
```
//vagrant 接続
vagrant ssh

//プロジェクトフォルダーへ
cd WORK/engibase

//Railsサーバー起動
rails server -b 192.168.33.10 -d

//サーバープロセス番号を確認
cat tmp/pids/server.pid

//サーバーを停止
kill -9 13432(プロセス番号)

//ログ確認
tail log/development.log
```


## 感想

やっぱりスムーズに行かない状況です。この経験も久しぶりで最近なれていたことばっかりしていたのが分かりました。（現場ではswiftを書いています。）分からないことを知りながら遅くても少しずつ進むことに嬉しいですね。GWが終わる前には何かの形まで作りたいと思います。
【原因と対策】VMnet8配下のIPにどうやってもPingが通じないよおお!!という人がハマってた落とし穴

# ブリーフィング(はじめに)
ちょっとした~~大人の事情~~訳がありまして、sshなりgitなりhttpなりのプロトコルを仮想マシンに通してそこで捌くことになりました。
ちなみに、その仮想マシンのホストOSはWindowsServer系統で、仮想マシンのOSはLinuxです。
ホストOSがWin10でも多分同じやり方が通用します。

ここで発生した事象は、おそらくレアケースです。
レアケースだと思われるのであえて記します。
レアケースだと思われるのであえて記します。
(大切なので2回言いました。だって幾らググっても出てこなかったんだもの!!! 情弱で申し訳ないです。)

# 順調にあがる戦果(前提作業)

1. メモ帳またはその他テキストエディタを**管理者として**起動 (以下の設定ファイルがある場所には、管理者でないと書き込めない)
2. 「C:\programdata\vmware\vmnetdhcp.conf」を開き、所定の場所に追記する。(※)
3. 「C:\programdata\vmware\vmnetnat.conf」を開き、所定の場所に追記する。(※)
4. 「VMware DHCP Service」「VMware NAT service」をそれぞれ再起動する。

※ … 以下を参考にお願いします。
　VMware player NATで起動したゲストOSにssh接続する - Qiita
　https://qiita.com/yamasaki-masahide/items/ccb62e98dff99c2a22a1

# 異変(発生したトラブルについて)

といったように順調に作業を進めていましたが、ここでトラブルが起きました。
2つのサービスの再起動も無事できているにもかかわらず、**仮想マシンへのPingが通らない**のです。

以下の項目もokでした。

 - [x] ゲストOSのIPはvmnetdhcp.conf通りに反映されているか
 - [x] ゲストOS内のlocalhost宛にpingは通るか
 - [x] ゲストOS内のlocalhost宛に対象のサービスは使えるか(sshなら ssh user@localhost が繋がるか)
 - [x] 上記のファイルは編集後に書き換えられていないか([実例](http://cocoon1982.hatenablog.com/entry/2013/05/09/162706)) 

反対に、以下はうまくいきませんでした。

 - [ ] ゲストOSでゲストOSのIPを指定してsshなどを実行しても、接続できない。
 - [ ] ホストOSからゲストOSのIPを指定してsshなどを実行しても、接続できない。

# 戦犯(うまく行かなかった原因)

これがまさかのvmnet8のネットワークアダプタの設定と、「VMware DHCP Service」「VMware NAT service」の相違でした。
具体的に言うと、vmnet8のネットワークアダプタに設定されたIPアドレスと、「VMware DHCP Service」「VMware NAT service」に指定したVMnet8関係のIPアドレスの不一致でした。

これにより、VMnet8以下のデフォルトゲートウェイが存在せず、パケットのルーティングができないという事態に陥っていたと考えられます。

# 奇策(解決策)

ググると設定ファイルやレジストリの書き換えばかり取り上げられていますが、
要はネットワークアダプタとconfの設定が一致すればいいので、
設定ファイルの方ではなく、vmnet8のネットワークアダプタの方のIPアドレスを変更しました。

```conf:vmnetdhcp.conf

host VMnet8 {
    hardware ethernet 00:50:56:C0:00:08;
    fixed-address 192.168.253.1;
    option domain-name-servers 0.0.0.0;
    option domain-name "";
    option routers 0.0.0.0;
}

host VMnet8 {
    hardware ethernet 00:0C:29:C0:13:5F;
    fixed-address 192.168.253.128;
    option domain-name-servers 0.0.0.0;
    option domain-name "";
    option routers 0.0.0.0;
}
```

ここで言うと、設定ファイル中の`192.168.253.1`をvmnet8のネットワークアダプタの方のIPアドレスに設定し解決しました。
設定ファイルとアダプタの設定が食い違うことなんてあるんですね。

# 終わりに

いやー勉強になりました。ありがとうございます。
ご意見等ございましたらコメントお願いいたします。
[パンダでも分かるAWSシリーズ] ローカル(Mac)でDynamoDBのインストールと実行：DynamoDB Local



# DynamoDB Localとは

DynamoDBの **ローカル実行可能なJavaアーカイブ（JAR）**ファイルです。

## 動作環境

**Windows、Mac、Linuxシステム上で動作**し、
**Java Runtime Environment（JRE）のバージョン7**と互換性があります。
これより古いバージョンのJavaでは動作しませんのでご注意ください。

## インストール

### Step1. [JRE](http://www.oracle.com/technetwork/java/javase/downloads/index.html)をインストール

下記のコマンドでインストール済みのJAVAバージョンを確認することができます。

```
$ java -version
java version "1.8.0_112"
```

### Step2. [DynamoDB Local](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/DynamoDBLocal.html)をダウンロード&インストール

ダウンロードしたら **解凍** (ダブルクリック あるいは `tar zxvf dynamodb_local_latest.tar.gz`) します。
そのディレクトリでコマンドプロンプトを開きます。


そして解凍フォルダーに入りDynamoDB Localを起動します。

```
cd dynamodb_local_latest
$ java -jar DynamoDBLocal.jar –Djava.library.path=.
Initializing DynamoDB Local with the following configuration:
Port:	8000
InMemory:	false
DbPath:	null
SharedDb:	false
shouldDelayTransientStatuses:	false
CorsParams:	*
```

デフォルトでは、 **0.0.0.0/0で8000番ポート**をListenします。
javaコマンドの実行時に `--port` オプションを付加すること他のポート番号に変更できます。

### Step3. AWS CLIでDynamoDBを操作してみる

`--endpoint-url` オプションがポイントです。

```
$ aws dynamodb create-table --endpoint-url http://localhost:8000 --table-name mytable --attribute-definitions AttributeName=id,AttributeType=S --key-schema AttributeName=id,KeyType=HASH --provisioned-throughput ReadCapacityUnits=1,WriteCapacityUnits=1
{
    "TableDescription": {
        "ProvisionedThroughput": {
            "NumberOfDecreasesToday": 0,
            "WriteCapacityUnits": 1,
            "LastDecreaseDateTime": 0.0,
            "LastIncreaseDateTime": 0.0,
            "ReadCapacityUnits": 1
        },
        "KeySchema": [
            {
                "AttributeName": "id",
                "KeyType": "HASH"
            }
        ],
        "ItemCount": 0,
        "TableStatus": "ACTIVE",
        "AttributeDefinitions": [
            {
                "AttributeName": "id",
                "AttributeType": "S"
            }
        ],
        "CreationDateTime": 1525181907.818,
        "TableName": "mytable",
        "TableArn": "arn:aws:dynamodb:ddblocal:000000000000:table/mytable",
        "TableSizeBytes": 0
    }
}
``` 

上記のコマンドを実行したら、
`<APIキー名>_<リージョン名>.db` ファイルが作成されます。
`file`コマンドで調べてみると、SQLiteのデータベースファイルでした。

```
$ file FFFFFFB51111RE1_ap-northeast-1.db
FFFFFFB51111RE1_ap-northeast-1.db: SQLite 3.x database
```



# 注意点（DynamoDBとの違い）

* DynamoDB Localはプロビジョンされたスループット(Throughput)の設定を無視します。Throughputの制限による動作確認はできません。



# Dockerにのせて動かす方法もあり

https://qiita.com/shinofara/items/15180ad1d117f3a32ad7


# 参考

(1). [【AWS発表】 デスクトップ開発を可能にする DynamoDB Local](http://aws.typepad.com/aws_japan/2013/09/dynamodb-local-for-desktop-development.html)
(2). [Amazon DynamoDB LocalをOSX(Mountain Lion)で実行する](https://dev.classmethod.jp/cloud/aws/amazon-dynamodb-run-on-osx/)
ホールデムポーカのプリフロップ戦略と可視化

# はじめに

プリフロップでは、はじめに配られる 2枚のカード(ホールカード) のみを頼りに、ゲームに参加するのかを判断しなければならない。

一般的な戦略としては、「この2枚が手元にある場合の勝利確率」という統計データを頭に叩き込む。この統計データは、以下に示すようなマトリックスで表現される。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/127424/a2557d8f-391f-8632-c825-6d24ec964919.png)

引用元: https://www.cardschat.com/poker-starting-hands.php

対角線上には、ポケットペアでの勝率が並び、右上にはスーテッド（2枚のカードの種類がそろっている場合）の組み合わせでの勝率が並ぶ。左下にはオフスートの場合の勝利確率が並ぶ。

確率は全部足して 100% になっていない。これは条件付き確率だからだ。つまり、「AAが来た場合に 85% で勝てる」のと、「KKが来た場合に 83%　で勝てる」の 85 + 83 を計算することに意味はない。

# ちょっと待った！

ポーカーやったことがある人であればすぐに違和感に気づく。「**AAで 85%も勝てるなんて直観と反する**。もっと勝率は低いはずだ。」確かにこれは正しい直感で、前述の表は、「ヘッズアップ(1 対 1)でのハンドの勝利確率」なのだ。人数が増えればもっと勝率は低くなっていってしまう。

とはいえ、ホールカードとしてどの組み合わせが望ましいかという点では、上述の表は有益であることは間違いがない。

# どのようにこの表を作るのか？

基本的に全ての組み合わせを考えて、勝利する確率を求めればよい。ヘッズアップの場合、手元の 2枚を除いた 50枚から、ボードにでる 5枚と、対戦相手にわたる 2枚を選べばいいので、 `C(50, 5) * C(45, 2) = 2,097,572,400`通りある。ちょっと難しすぎんよ。ということで、モンテカルロなシミュレーションで表を埋める。

シミュレーションでやるなら、もはや 2人だろうが、9人だろうが関係ない。全てのセル(`169 = 13* 13`) で、100万回程度ゲームを実施して表を埋めれば十分収束する。(100万回もやると、ストレートフラッシュですら数百回は成立する)。一つの表で、1.6億回のゲームをするってこと。

アルゴリズムは特に難しくない

- AKs などの組み合わせを決める
- 上記を満たす二枚を固定する (A♥, K♠)。対称性からこうおいてよいのは自明。`hparse`
- 100万回以下を実施
    - 上記の 2枚を抜いて 50枚のデッキをシャッフルして
    - ボードと、 n人のプレイヤーにカードを配り
    - 自分（A♥, K♠）が一番タイであればカウンタをインクリメント
- 規格化（カウンタ値を1万で割る）して、マスの数字を埋める

```js
const simulate = (hname, nPlayer, nSample) => {
  const hcards = hparse(hname);
  let counter = 0;
  for (let i = 0; i < nSample; i += 1) { // XXX: really big loop. performance over cleaness
    const deck = getdeck().filter(c => !hcards.includes(c));
    const myval = handval([hcards[0], hcards[1], deck[0], deck[1], deck[2], deck[3], deck[4]]);
    let winFlag = true; // to be false when any one of opponents wins
    for (let p = 0; p < nPlayer - 1; p += 1) { // nPlayer includes me, so opponents # is nPlayer -1.
      const ophandval = handval([deck[0], deck[1], deck[2], deck[3], deck[4], deck[5+2*p], deck[6+2*p]]);
      if (ophandval < myval) {
        winFlag = false;
        break;
      }
    }
    if (winFlag) counter += 1;
  }
  return counter / nSample * 100.0;
};

for (const nPlayer of [3, 4, 5, 6, 7, 8, 9]) {
  const stats = {};
  for (const name of HCARDNAMES) {
    stats[name] = simulate(name, nPlayer, 1000000);
  }
  console.log(JSON.stringify(stats));
```

# 結果
`n = 2, 5, 9` の場合を載せとく。完全版は　**[Githubに載せた](https://41semicolon.github.io/41poker/preflop-hs.html)**

n = 2 は冒頭のテーブルを忠実に再現する。


![2.png](https://qiita-image-store.s3.amazonaws.com/0/127424/ae27b051-1e91-e17f-9bef-3a5637ca9c77.png)

n = 5 でも AA, KK, QQ は十分強い

![5.png](https://qiita-image-store.s3.amazonaws.com/0/127424/2811d4c3-36dc-080b-0570-d273213ffbc8.png)

n = 9。 UTG、 QQ で意気揚々とベットするのはちょっとのんきすぎる。

![9.png](https://qiita-image-store.s3.amazonaws.com/0/127424/68a26b5c-cc0e-02c9-10dd-8a8819a214fd.png)


# 技術について

- D3.js

可視化には必須。[前の記事](https://qiita.com/41semicolon/items/d0537217c0d3c9825007) でどのようにこのようなきれいな図を書けるのかを具体的なコードで提示。

- シミュレータ

最近 github に公開した。 [41semicolon/41poker](https://github.com/41semicolon/41poker) しばらくは活発に動くのでAPIとかめちゃくちゃに変わるので注意。

# 考察と次へのステップ

とりあえず誰もがやるであろう計算をしただけなので考察をするに至っていない。これから少し考える。まあ、`1/n` 以下の勝率の手では参加させないというのがエージェントの基本政略の一つになるのだろうなあ。
ssh2-rsでEd25519鍵が使えない問題

事象としては、認証が通らない。

```
assertion failed: session.authenticated()
```

原因としてはlibssh2でサポートしていなかったから。
PRが出ていて、pullして試してみたら使えたためマージされたら使えるようになります。
https://github.com/libssh2/libssh2/pull/248
Javascriptでmp3ファイルのID3タグを表示

mp3ファイルをアップロードした際にID3v1のデータを表示するプログラムを製作しました。
ID3v1はデータ最後の128bitなので、それを切り分けて読み込みしています。

ID3v2版も作ろうと思いましたが、v1とv2が混在していたり、データも可変長で何かと面倒なので次回にでもやろうと思います。

```html:html
<!DOCTYPE html>
<html>

<body>
	<form method="post" enctype="multipart/form-data">
		<input type="file" id="file" accept="audio/mp3">
	</form>
	<p id='trackInfo'>ファイル情報</p>
	<script>

	</script>
</body>

</html>
```

```javascript:javascript
window.onload = function() {
	const reader = new FileReader();
	file.addEventListener('change', function(e) {
		reader.readAsArrayBuffer(e.target.files[0]);
		trackInfo.innerHTML = "";
	});
	reader.onload = function(e) {
		var id3v1 = (new Uint8Array(e.target.result)).slice(-128);
		var judge = id3v1[0] + id3v1[1] + id3v1[2];
		if (judge == 220) {
			for (var i = 3; i < 93; i++) {
				if (i == 33 || i == 63) trackInfo.innerHTML += '<br>';
				trackInfo.innerHTML += String.fromCharCode(id3v1[i]);
			}
		}
	}
};
```
mysql2が認識されない

##環境
Sierra 10.12.6
Ruby 2.5.0
Rails 5.1.4
mysql2 0.5.1

## エラー

``` rails generate model ... ```　を実行すると

``` Specified 'mysql2' for database adapter, but the gem is not loaded. Add `gem 'mysql2'` to your Gemfile ```

と出る

でも``` gem list ```で確認するとmysql2は入ってる

## 解決策

mysql2のバージョンを一つ下げた

``` gem install mysql2 -v '4.10.0' ```

Rails 5.1.4だとmysql0.5.0以降に対応してないっぽい
Composerで自作ライブラリを試す

# 背景
Composerって普段何気なくphpのライブラリをインストールするだけに使っていたのだが、
ちょっと気になったので自作パッケージ作ってみたときのメモ

# 環境
- Packgistは使わない
- 自作パッケージはgithubで管理
- php7.2.2
- laravelフレームワークのソフトウェアで読んでみる
- 上記ソフトウェアはdockerで動かしている

# ライブラリ側
ついでに普段ChromePhpでコンソールにログを吐かせることが多く、
環境ごとに入れたりするのが面倒なので、そちらをcomposerで呼べるようにする。
（こんなことしなくてもChromePhp自体はすでにpackageになっているのだが、
自分で拡張も効くようにあえて作ってみることにする）

## クラス

```php
<?php
namespace Sleazoids;
use ChromePhp;
class C
{
    public static function log($message)
    {
        return ChromePhp::log($message);
    }
}
```

こんな感じで。
後々ログの扱い方によっては関数追加していくのも良い。

## composer.json
これでchromePhpとの依存関係を書く。
後述するが、stabilityを解決しておく。

```json
{
    "name": "SLEAZOIDS/chrome-logger-ex",
    "description": "chrome-logger-extension",
    "type": "library",
    "minimum-stability": "stable",
    "require": {
        "ccampbell/chromephp": "4.1.0"
    }
}
```

## リポジトリに設置
上記のクラスとcomposer.jsonをgithubに置いてみた。
https://github.com/SLEAZOIDS/chrome-logger-ex
今回はPackagistには登録しないことにする


# ライブラリを使う側
ライブラリを使いたい環境で、
compose.jsonに（もともとあった場合追記）してupdateする

```json
{
    "autoload-dev": {
        "psr-4": {
            "Sleazoids\\": "vendor/SLEAZOIDS/chrome-logger-ex/src/ChromeLoggerEx"
        }
    },

    "repositories":[{
        "type": "vcs",
        "url": "https://github.com/SLEAZOIDS/chrome-logger-ex"
    }],

    "require-dev": {
        "SLEAZOIDS/chrome-logger-ex": "dev-master"
    }
}
```
一応ログ系ライブラリなのでdevに。

# ライブラリのインストール
```composer update```
でインストールし、
```composer dump-autoload```
で自動的に読み込まれるようにする


# ライブラリを使う

```
require_once 'vendor/autoload.php'；
```
で、autoload.phpをrequireしておく

あとは、名前空間にならえば使える

```php
$a = 'ここは' . 'どこだ？';
\Sleazoids\C::log($a);
```

# 落とし穴（勝手にはまったところ）
### psr-4での定義名
autoloadする際のpsr-4で定義する名前と、
クラスの名前空間は一致させないと正しく読み込まれない。
（今回で言うと「Sleazoids」）


### githubでライブラリを更新するとupdateでエラー

以下のようなエラーが出た時には

```
$composer update

[InvalidArgumentException]
  Could not find package SLEAZOIDS/chrome-logger-ex at any version for your minimum-stability (stable). Check the package spelling or your minimum-stability
```

ライブラリ側のcomposer.jsonで以下のようにstabilityの解決をしないといけない
```
"minimum-stability": "stable",
```

# まだまだ
よくわからないこともあるので、引き続き気にかけておきます。
何気なく使っているサービスは一度自分で検証してみるのは勉強になります。
[Java]logback-spring.xml

Eclipseから `spring-boot` なアプリケーションを起動した際にハマったのでメモ。

## 結論

`LOGGING_CONFIG` で明示的に指定する。

## 経緯

```logback-spring.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE logback>
<configuration>
    <include resource="org/springframework/boot/logging/logback/defaults.xml" />

    <appender name="CONSOLE" class="ch.qos.logback.core.ConsleAppender">
        <!-- 省略 -->
    </appender>

    <!-- 省略 -->

    <springProfile name="debug">
        <root level="DEBUG">
            <appender-ref ref="CONSOLE" />
        </root>
    </springProfile>

    <!-- 省略 -->

</configuration>
```

のように書いてあると、コマンドラインから `java -jar ... --spring.profiles.active=debug` とかで起動すれば、コンソールに `DEBUG` レベルのログが出力されます。

一方、Eclipseから `Java アプリケーション` として起動すると、コンソールに `DEBUG` レベルのログは出力されませんでした。

いろいろ試した結果、`実行の構成` の `環境` で、以下のように環境変数を設定することでログが出力されるようになりました。

| 変数 | 値 | 備考 |
|:--|:--|:--|
|LOGGING_CONFIG|src/main/resources/logback-spring.xml|プロジェクトルートからの相対パス|
|SPRING_PROFILES_ACTIVE|debug|環境変数以外の方法で指定しても良い|
サイトのテーマカラーを変えるだけのChrome拡張


## 概要

http://neue.cc/
こちらのサイトを読んでいたら目が疲れてきたので、
テキストと背景の色を変更する"browser action"型のchrome拡張を作成。

[generator-chrome-extension](https://github.com/yeoman/generator-chrome-extension)を使用してテンプレに乗っかる。

## 完成イメージ

![neue.gif](https://qiita-image-store.s3.amazonaws.com/0/136286/04ea93a4-84a7-4f9f-1ec3-bd4f6afecb3b.gif "neue.gif")



## コード

重要そうな部分だけ抜粋

### contentscript.js

contentscript.jsは、
ページの中に挿入されるスクリプト。
ページのDOMにアクセスできる。


```javascript:contentscript.js
var data = {
    simple: {
        color: "#666666",
        background: "#ffffff"
    },
    sepia: {
        color: "#622d18",
        background: "#f0ddc3"
    },
}

function changeColor(type) {
    $('body').css({
        'background': data[type].background,
    });
    $('div, p, span, input, textarea').css({
        'color': data[type].color,
    });
}
changeColor('simple'); // 初期色

// メッセージを受ける準備
chrome.runtime.onMessage.addListener(function(request, sender, callback){
    if(request){
        changeColor(request);
    }
})
```


### popup.js

popup.jsはブラウザアクション時に表示される、
popup.htmlに読み込まれるファイル。
popup上のDOMにアクセスできる。

```javascript:popup.js
var queryInfo = {
    active: true,
    windowId: chrome.windows.WINDOW_ID_CURRENT // 設定しないと複数タブを開いたときにバグる
};

chrome.tabs.query(queryInfo, function(tab){
    $('button').on('click', function() {
        var colorType = $(this).attr('data-color');
        // タブにメッセージを送る
        chrome.tabs.sendMessage(tab[0].id, colorType, function(response){});
    })
})
```


> 参考
[難しいことを考えずに30分でChrome拡張をささっと作る手順](http://tech.quartetcom.co.jp/2015/12/09/lets-develop-chrome-extension/)
[Chromeのオリジナル拡張機能を開発しよう（ソースコードあり）](https://liginc.co.jp/web/tool/browser/163575)
[超初心者向け] Rails5アプリ内にお問い合わせフォームを導入する方法

# はじめに
超初心者の私にわかりやすい、Rails5アプリ内へのお問い合わせフォーム導入情報があまりなかったため、こちらで研究したものを記述していきたいと思います。分かる方がいれば共有いただけると大変助かります。

# 設定環境
- OS
    - Mac OS X
        - 10.12.6
- Software
    - PostgreSQL
        - 10.1
    - Ruby
        - 2.5.0
    - Rails
        - 5.1.5

# ここでやりたいこと
フォーム入力からメール送受信まで、
以下のシンプルな３つの流れを実行できるようにしたいです。

**1. 名前、メールアドレス、お問い合わせなどの内容をフォームにて入力**
**2. 記入漏れなどを確認して、正しければ確認画面に進み、間違ってれば入力画面に戻る**
**3. サイト管理者宛てにメールを送信して、送信完了画面を表示**

解決方法は以下のサイトを参考にさせていただいてます。
https://www.imd-net.com/column/1731/

以下のやり方で上記３つを達成できるようです。

・Routesを設定する
・コントローラにて３つのアクションを設定
・Viewにて入力/確認/完了の３画面分のテンプレートファイルを作成
・問い合わせフォームの入力情報を持ちまわるモデルクラスを作成
・送信メールのインスタンス生成用のメーラークラスを作成
・Bootstrapでデザインを整える

それでは順番に実行していきましょう。

# **Routesを設定する**

これから先は現在確認中です。


# **コントローラにて３つのアクションを設定**

これから先は現在確認中です。


# **Viewにて入力/確認/完了の３画面分のテンプレートファイルを作成**

これから先は現在確認中です。


# **問い合わせフォームの入力情報を持ちまわるモデルクラスを作成**

これから先は現在確認中です。



# **送信メールのインスタンス生成用のメーラークラスを作成**

これから先は現在確認中です。


# **Bootstrapでデザインを整える**
Railsを使ってアプリを作っている場合は、ローカルでデータベース作成した場合は、STG,本番でもrake db/Migrateすれば使えようです。




## 参考サイト
https://www.imd-net.com/column/1731/
https://easyramble.com/rails-action-mailer.html