OmniAICreator/Qiita-1.07M huggingface dataset:
mrubyでもcairo

rubyには[rcairo](http://magazine.rubyist.net/?0019-cairo)がありますが、mrubyでも使えるようにmrbgem作ってみました。

https://github.com/yamori813/mruby-cairo

使いそうな関数のみバインディングしてあるので、ソースの最後の定義を確認してみてください。

FreeBSDでcairoのpkgをインストールされた環境でビルドできます。もちろんZRouterでもビルドできます。

元々は[小型液晶に画像を表示](http://qiita.com/yamori813/items/ae66330ccbf6fe6bd5ab)させるためのエンジンとして作ったのですがpng処理などいれてみたので汎用的に使えると思います。

mrubyビルドするときに以下を入れてください。

```ruby
conf.gem :github => 'yamori813/mruby-cairo'
```

線を引いてみる

```ruby
c = Cairo.new(120, 160)
c.set_source_rgb(1, 0, 0)
c.move_to(0, 0)
c.line_to(100, 100)
c.stroke()
c.save_png("test.png");
```

![cairo.png](https://qiita-image-store.s3.amazonaws.com/0/104066/17901002-a72e-2b63-80c8-f95cdbf93853.png)


四角を書いてみる

```ruby
c.set_line_width(2)
c.rectangle(10, 10, 30, 30)
```

丸を書いてみる

```ruby
c.arc(20, 20, 40, 0, 3.14*2);
```

文字を書いてみる

```ruby
c.move_to(10, 30)
c.set_source_rgb(1, 0, 1)
c.font_create("6x13.pcf")
c.set_font_size(13)
c.show_text("mruby demo cairo")
```

漢字も書けます。文字コードはUTF-8です。

```ruby
c.move_to(20, 13)
c.set_source_rgb(1, 1, 1)
c.font_create("14x14ja.pcf")
c.set_font_size(14)
c.show_text('漢字')
c.stroke();
```

フォントはビットマップ形式のpcfファイルが使えるのですがbdfファイルの場合はbdftopcfコマンドで変換して使います。フォントのエンコードはiso10646です。ポイント指定がフォントと違ってると表示されないので注意してください。

アウトラインフォントのttfファイルも使えるようです。表示領域が広い場合はttfで狭い場合はpcfが良いです。

文字列を処理するときにはMRB_UTF8_STRINGを定義してmrubyをコンパイルしておくと良いです。デフォルトは設定されてないので、文字列の部分抜き出しとかキャタクタ単位でなくバイト単位となってしまいます。

```ruby
conf.cc.defines = %w(MRB_UTF8_STRING)
```

pngファイルを読み込み

```ruby
c.print_png(5, 20, "foo.png")
```

ファイルディスクリプタに書き出す

```ruby
f = File.open("test.png", "w")
c.write_png(f.fileno)
```

[QRCodeなんかも書けます](http://qiita.com/yamori813/items/cdeb9240e6b504b5ce38)。

rcairoは自前での実装があるみたいですが、こちらはほぼ1対1のバインディングです。

結構使えるのではないかと思うので、興味があったら試してみてください。
【WebSphere Liberty Hints & Tips】既存環境のライセンスをアップグレードする方法


## はじめに
上位ライセンスを持っている場合、既存環境をアップグレードすることができます。これにより拡張機能を使うことができるようになります。
適用前にはご自分のライセンス状況をご確認いただき、予期せぬ問題が起きても筆者は一切責任を負いません。

## 手順
1. [こちら](https://www.ibm.com/support/knowledgecenter/ja/SSEQTP_liberty/com.ibm.websphere.wlp.doc/ae/twlp_ins_upgrade_archive.html)から該当ライセンスのjarをダウンロードします。ここではwlp-nd-license.jarとします。
2. 以下のコマンドで展開します。

```展開コマンド
java -jar wlp-nd-license.jar
```

３.同意して進むと適用が完了します。
![Kobito.jQoE8C.png](https://qiita-image-store.s3.amazonaws.com/0/129662/f4feee8c-e4db-1b2b-759a-6e6580f38e4a.png "Kobito.jQoE8C.png")


４. 製品情報を確認します。

```productInfoコマンド
<WLP_ROOT>/bin/productInfo version
```
![Kobito.W0Bi2x.png](https://qiita-image-store.s3.amazonaws.com/0/129662/a53ecd76-da0a-320d-7914-f33d3def7c00.png "Kobito.W0Bi2x.png")

５. 上位エディションの機能を追加インストールができるようになります。（自動で導入されるわけではありません。）

## まとめ
以上で下位エディションから上位エディションへライセンスをアップグレードしました。

## 参考資料
* https://www.ibm.com/support/knowledgecenter/ja/SSEQTP_liberty/com.ibm.websphere.wlp.doc/ae/twlp_ins_upgrade_archive.html
それでいいのかインサート

アルゴリズムタグは正しくないかもしません。ごめんなさい。

[絶対どこかにあるだろうけど言語化の不自由と情報の海に埋もれてうまく検索できないシリーズ]

swapで組んでてやりたいことじゃないって気づいたもの。


# <i class="fa fa-cube"></i> 要件？

言葉にできない…。

よくあるD&Dのあれ！あれがやりたいの！(貧弱な語彙


>![](https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif)

[SortableJS/Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js]

左端のリストだけでしている操作のやつ！



0から始まるindexの値を持つ要素集合の配列がある。[^1]
あるindex(移動元)から新しい(すでにある)index(移動先)へ移動する処理を行いたい。
今、移動先にある要素は、移動した要素により*押し出される*。
押し出される方向は上下どちらでもありうる。移動元がどこだったかによる。
その他の要素も、連動して*押し出される*。
indexの値は全体を通して変動するものの、max・minが変わることはなく、値が重複することもない。

移動元と移動先のindexは手に入っている状態からスタート

もう要素のindex値でなくて配列自体の数字添字を使ってもいい。
この画像のコードがあればよかったのに。


# <i class="fa fa-code"></i> コード


```js

const arr = [
  {
    index : 0,
    value : 'Q'
  },
  {
    index : 1,
    value : 'i'
  },
  {
    index : 2,
    value : 'i'
  },
  {
    index : 3,
    value : 't'
  },
];



function insert(oldIndex, newIndex) {
  if (oldIndex == newIndex) {
    return;
  }
  
  // 押出処理に巻き込まれないうちに移動元を記憶
  const oldElementIndex =  arr.findIndex((element, index) => {
    return element.index == oldIndex;
  });
  
  // 移動によるずれを実行
  arr.forEach((element) => {
    if (
      oldIndex      <  newIndex &&
      
      oldIndex      <= element.index && 
      element.index <= newIndex) {
      element.index -= 1;
    } else if(
      newIndex      <= element.index && 
      element.index <= oldIndex) {
      element.index += 1;
    }
  });
  
  // 空いた移動先へ移動
  arr[oldElementIndex].index = newIndex;
};

insert(0,3);


```

***

めちゃくちゃ効率悪い気がするし、不具合ありそうだし、何かのソートで代用できそうだし、こんなのわざわざ新規で作る必要なくデフォかライブラリで各言語用意されていると思うんだけど調べる頭が全然足らなくてググり力が足りない。

タイトルすらまともなものが浮かばない。

[絶対どこかにあるだろうけど言語化の不自由と情報の海に埋もれてうまく検索できないシリーズ]:http://qiita.com/khsk/items/132695a200b87b1e930d


[SortableJS/Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js]:https://github.com/SortableJS/Vue.Draggable


[^1]: 書いてて気づいた要素削除したときに詰め直すの面倒だから連番にはならない(しない)と思う。
numpyを使ってRBFでカーネル回帰をやってみる

# カーネル回帰とは
カーネル関数を用いて学習・予測を行う回帰。
非線形なデータに対しての回帰に有効である。
予測時にも訓練データを使用する。

# RBF
ガウスカーネルとも呼ばれる。無限次元特徴ベクトルの内積としてみなすことができる。
RBFは次式で表される。

```math

k(x_i, x_j) = \exp(-\gamma||x_i - x_j||^2)

```

i行j列目の要素を $k(x_i, x_j)$ とする行列が$K$である。つまり$K$はサンプル数を次元とする正方行列である。

# numpyでKを計算

```py3

def rbf(x1, x2, gamma=0.1):
    return np.exp(-1 * gamma * (np.linalg.norm(x1- x2, axis=2)))

x = np.arange(120).reshape(40,3)
K = rbf(x[:, np.newaxis, :], x[np.newaxis, :, :])
print(K.shape)

```
numpyのnewaxisとbroadcastを活用してx1とx2の距離を計算している。

続く...
[ruby] プライベートなクラスメソッドを定義してクラスメソッドから呼びたいとき

以下のような定義の仕方だとプラベートインスタンスメソッドの`fuga`が定義されるため、クラスメソッドの`hoge`からは呼べません。

```ruby
class Hoge
  def self.hoge
    p "hogehoge"
    fuga
  end
  private
    def fuga
      p "fugafuga"
    end
end

Hoge.hoge
# => "hogehoge"
# => NameError: undefined local variable or method `fuga' for Hoge:Class
Hoge.fuga
# => NoMethodError: undefined method `fuga' for Hoge:Class
```

クラスメソッドからプライベートなメソッドを呼びたい場合、
プライベートなクラスメソッドを定義して、以下のようにクラスメソッドの`fuga`を定義してから`private_class_method`で`fuga`をプライベートクラスメソッドにします。

```ruby
class Hoge
  def self.hoge
    p "hogehoge"
    fuga
  end
  def self.fuga()
    p "fugafuga"
  end
  private_class_method :fuga
end

Hoge.hoge
# => "hogehoge"
# => "fugafuga"
Hoge.fuga
# => NoMethodError: private method `fuga' called for Hoge:Class
```
iPhoneでPWAの恩恵は受けられるのか


【2018/06/10追記】 
iOS 11.3からSafariでもPWAの恩恵を受けれるようになりました！
ただ、プッシュ通知やバックグラウンドの同期ができないなど、AndroidのPWAとは所々出来ることが違います。

こちらの方の記事が詳しくまとまっているので、参考にしていただけると＞＜
[iOSの11.3からのPWA対応でできるようになったこと](https://medium.com/@takeshiamano/ios%E3%81%AE11-3%E3%81%8B%E3%82%89%E3%81%AEpwa%E5%AF%BE%E5%BF%9C%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8-313f638a172b)

以下は、記事を書いたとき（2017/06/19）のお話なので注意してください。

# iPhoneでPWAは実現できるのか？
[PWA（Progressive Web Apps）](https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/?hl=ja)を利用できる環境を調べてたときにふと出てきた疑問。

日本のWebサービス運営において避けて通れないのは、スマホユーザーの半数がiPhoneユーザーであること。
iOSのSafariでPWAが実現できない話は有名だが、それなら他のブラウザ入れたらいいのでは？
AndroidのChromeやFirefoxは使えたので、iOSにChrome、Firefox入れちゃえば使えるかも！？
・・・と、思ったので検証してみました。

PWAを実現するためにはServiceWorkerの存在が欠かせないので、それを呼び出せるかどうかで調べることに。

# 検証コード
以下のコードをそれぞれのブラウザで読み込ませます。
ServiceWorkerが定義されていればtrue、定義されていなければfalseを表示するだけの単純なスクリプトです。

```html:isServiceWorker.html
<html>
<body>
<script>
alert('serviceWorker' in navigator);
</script>
</body>
</html>
```

# 検証環境
2017/06/18時点の環境です。検証コードの妥当性を確認するため、Androidも加えています。

* iPhone7 iOS 10.3.2
 * iOS版 Safari 10.0
 * iOS版 Google Chrome 59.0
 * iOS版 Firefox 7.5

* Softbank AQUOS Xx3(506SH) Android 6.0.1 
 * Android版 Google Chrome 58.0
 * Android版 Firefox 54.0

# 検証結果
| ブラウザ | 結果 |
|:-:|:-:|
| iOS版 Safari 10.0 | × |
| iOS版 Google Chrome Chrome 59.0 | × |
| iOS版 Firefox 7.5 | × |
| Android版 Google Chrome 58.0 | ○ |
| Android版 Firefox 54.0 | ○ |

iOS、見事に全滅・・・_(┐「ε:)＿

# 結論
というわけで、iOSにChromeやFirefox入れたとしても残念ながらPWA実現不可能・・・。

今回試したのはChromeとFirefoxだけですが、この結果を見ると
ブラウザがというよりiOSがServiceWorkerに対応していないって考えたほうがよさそうですね。
（というか、同じブラウザでもOSで異なることに驚きました・・・）

現在、PWAの恩恵が受けれるのはAndroid、PCの一部ブラウザということですね。

iOSでも対応したら、クロスプラットフォームなアプリが作れたりしそうで夢が広がりそうですが・・・。
Appleさん、お願いします＞＜
Time::HiResのutimeに1秒以下の設定を求めるのは間違っているだろうか外伝



# 第1話 utimeとtouch

utimeそれはファイルのatimeとmtimeを設定する関数である。
こんな使い方をする。

```
$ touch a.txt
$ perl -E 'say utime(1,1,"a.txt")'
$ stat a.txt
Access: 1970-01-01 09:00:01.000000000 +0900
Modify: 1970-01-01 09:00:01.000000000 +0900
```

なお、これはtouchコマンドでも可能である

```
$ touch -t 197001010900.02 a.txt
Access: 1970-01-01 09:00:02.000000000 +0900
Modify: 1970-01-01 09:00:02.000000000 +0900
```

# 2話 高精度とTime::HiRes

さて、近年のファイルシステムでは１秒以下の日付分解能を持っているので
ミリ秒単位での設定もしたいのだが、これは上記２つでは対応していないのでできない。
そこで現る高精度の時刻を扱うTime::HiResモジュール様のご登場。

[Time :: HiRes \- 高解像度アラーム、スリープ、gettimeofday、インターバルタイマー \- metacpan\.org](https://metacpan.org/pod/Time::HiRes)

# 3話 エラーとバージョン

```
$ perl -MTime::HiRes -E 'say Time::HiRes::utime(3.33,3.33, "a.txt")'
utime is not a valid Time::HiRes macro at -e line 1.
$ rpm -q perl-Time-HiRes
perl-Time-HiRes-1.9725-3.el7.x86_64
```

どういうこと＼(^o^)／

どうやらTime::HiResにtimeが実装されたのは1.9733(2016-04-23)～1.9739(2016-06-28)で、CentOS7系のは1.9725(2012-02-01)なので未対応ということだ。

# 4話 buildとinstall

こうなったら最新のに差し替えてみる。

```
# yum install epel
# yum install cpanspec
# cpanspec --packager ymko Time::HiRes
# yum-builddep perl-Time-HiRes.spec
# yum install gcc
$ mkdir -p rpmbuild/SOURCES
$ cp Time-HiRes-1.9742.tar.gz rpmbuild/SOURCES/
$ vi perl-Time-HiRes.spec
Epoch:          4
$ rpmbuild -ba --define "dist .el7" perl-Time-HiRes.spec
# rpm -Uvh /home/ymko/rpmbuild/RPMS/x86_64/perl-Time-HiRes-1.9742-1.el7.x86_64.rpm
```

# 5話 勝利と参考文献

3.33秒に設定する。

```
$ perl -MTime::HiRes -E 'say Time::HiRes::utime(3.33,3.33, "a.txt")'
$ stat a.txt
Access: 1970-01-01 00:00:03.330000000 +0000
Modify: 1970-01-01 00:00:03.330000000 +0000
```

[Perlモジュールtarボールからspecファイルを生成するコマンドcpanspec \- Qiita](http://qiita.com/ymko/items/73999ff742221e332a6a)

[カスタムRPMや独自yumリポジトリではじめるソフトウェア管理術 \- さくらのナレッジ](http://knowledge.sakura.ad.jp/tech/1086/)
>　「Epoch」はパッケージの新旧を比較するために使われる数値で、指定されていない場合は「0」と見なされる。rpmコマンドやyumコマンドでパッケージをアップデートする場合、通常はVersionやReleaseの値の大小を比較してバージョンの新旧をチェックするのだが、Epochの値が指定されていた場合は、この値の大小でバージョンの新旧がチェックされる。つまり、VersionやReleaseの値が古い（数値が小さい）場合でも、Epochの値が大きければそちらのパッケージがより新しいものと認識される。
Apacheのマルチプロセッシングモジュールを『prefork MPM』から『event MPM』に変更してみました

#■ 概要
CentOS7 に yum で Apache をインストールしたら、マルチプロセッシングモジュールが『prefork MPM』だったので、『event MPM』に変更しました。

#■ 各MPMの主な特徴

◆prefork MPM
　・従来からあるマルチプロセッシングモジュール
　・マルチプロセス型

◆worker MPM
　・従来からあるマルチプロセッシングモジュール
　・マルチプロセスとマルチスレッドのハイブリッド型

◆event MPM
　・Apache 2.4 から導入されたマルチプロセッシングモジュール
　・イベント駆動型

#■ 検証環境
・CentOS 7.3
・Apache HTTP Server 2.4.6

#■ 変更手順

```
◆ 変更前（prefork MPM）
# httpd -V | grep -i mpm
Server MPM:     prefork
# httpd -M | grep -i mpm
mpm_prefork_module (shared)

◆ 設定変更 （prefork MPM → event MPM の場合）
# diff /etc/httpd/conf.modules.d/00-mpm.conf /etc/httpd/conf.modules.d/00-mpm.conf.20170618 
< #LoadModule mpm_prefork_module modules/mod_mpm_prefork.so
> LoadModule mpm_prefork_module modules/mod_mpm_prefork.so
< LoadModule mpm_event_module modules/mod_mpm_event.so
> #LoadModule mpm_event_module modules/mod_mpm_event.so
# systemctl restart httpd.service 

◆ 変更後（event MPM）
# httpd -V | grep -i mpm
Server MPM:     event
# httpd -M | grep -i mpm
mpm_event_module (shared)
```

#■ 性能比較

マルチプロセッシングモジュールの性能比較はこちら。
[http://qiita.com/nk9bb8/items/bd21c3eed2de4f30d530](http://qiita.com/nk9bb8/items/bd21c3eed2de4f30d530)
『Apache』vs『Nginx』、DoS攻撃に強いのはどっちか、検証してみました

#■ 概要

・Webサーバのデファクトスタンダードである Apache
・C10K問題を解決するために開発された Nginx

どっちの方がDoS攻撃(F5攻撃)に強いか、検証してみました。

#■ F5攻撃とは
F5攻撃とは、ブラウザの再読み込みを何度も繰り返すことにより、大量のリクエストをサーバに送信し、サイトをダウンさせるDoS攻撃の１つです。

#■ 検証環境

◆Apache HTTP Server 2.4.6（prefork MPM）
　⇒ マルチプロセス型

◆Apache HTTP Server 2.4.6（worker MPM）
　⇒ マルチプロセスとマルチスレッドのハイブリッド型

◆Apache HTTP Server 2.4.6（event MPM）
　⇒ イベント駆動型（Apache2.4 から導入）

◆Nginx 1.12.0
　⇒ イベント駆動型

※OSは、CentOS 7.3。
※Apacheは、全てのマルチプロセッシングモジュールで検証しました。
　マルチプロセッシングモジュールの切替方法はこちら。
　[http://qiita.com/nk9bb8/items/4e7e2199c6c7b824f550](http://qiita.com/nk9bb8/items/4e7e2199c6c7b824f550)
※本検証では、DoS対策を行わない状態で検証しました。

#■ 検証（１）
###◆検証方法
・同時接続数：10
・同時接続数：50
・同時接続数：100
・同時接続数：200

のリスエストを発行し、１秒間のリクエスト処理件数を計測しました。

###◆検証結果（１秒間のリクエスト処理件数）
||同時10|同時50|同時100|同時200|
|:--|--:|--:|--:|--:|
| Apache（prefork MPM）|2,280|2,176|1,943|1,212|
| Apache（worker MPM）|2,919|3,232|3,369|1,991|
| Apache（event MPM）  |2,332|2,734|3,368|2,545|
| Nginx            |2,460|3,079|2,890|2,405|

###◆まとめ
マルチプロセス型の Apache（prefork MPM）は、同時接続数に比例し、１秒間の処理件数は低下しますが、
イベント駆動型の Apache（event MPM）や Nginx は、同時接続数が増えても、１秒間の処理件数は一定です。

#■ 検証（２）
###◆検証方法
・同時接続数：100
・総リクエスト数：100万

のリスエストを発行し、ロードアベレージを計測しました。
（DoS攻撃中のロードアベレージの平均値と最大値）

###◆検証結果（ロードアベレージ）
||ロードアベレージ（平均値）|ロードアベレージ（最大値）|
|:--|--:|--:|--:|
| Apache（prefork MPM）|190.3|249.7|
| Apache（worker MPM）|285.6|380.5|
| Apache（event MPM）  |56.1|75.4|
| Nginx            |3.0 |3.5|

###◆まとめ
イベント駆動型の方が、システムに与える負荷は低いです。
特に、Nginx は、DoS攻撃を感じないレベルです。

#■ 総括
DoS攻撃に強いのは、Nginx でした。

今回の検証ではDoS攻撃（F5攻撃）で検証しましたが、アクセス数の多いサイトでもイベント駆動型が適していると言えます。
Vagrantでwebサーバを動かしてハマったこと


【前提条件】
OS version: centos7
Ruby version: 2.4.0
Rails version: 5.1.1

やっとrailsのインストールを終えて、

```
rails new [project name]
rails -s 
```

をやった。それでURLを自PC上で叩いてみた。

あれ。。。動かない。

ネットワークコマンドで確認してみた。

```
netstat -an
tcp        0      0 127.0.0.1:3000            0.0.0.0:*               LISTEN
```

ou...
これが原因だと思い

```
rails s -b 0.0.0.0
```

で仮想サーバ以外からの接続を許可。

また接続ポートを指定するために、Vagrantfile上に以下の行を追加。

```
config.vm.network "forwarded_port", guest: 3000, host: 3000
```

それでやっと動くかと思い、
http://[ssh接続しているIP]:3000
で接続を試みたところ、まだ動かない。

他でネットワーク設定がおかしくないか見たところ、
firewalldの設定が有効にされていたので、
無効にした。

```
systemctl stop firewalld
```

それでやっとwebページが見れるようになりました！
過去バージョンのイメージをvagrant upした時の共有フォルダのマウントエラー



タイトルの通り。対応経緯を記載。
バージョン：Vagrant 1.9.4

## エラー内容

```
Vagrant was unable to mount VirtualBox shared folders. This is usually
because the filesystem "vboxsf" is not available. This filesystem is
made available via the VirtualBox Guest Additions and kernel module.
Please verify that these guest additions are properly installed in the
guest. This is not a bug in Vagrant and is usually caused by a faulty
Vagrant box. For context, the command attempted was:

mount -t vboxsf -o uid=1000,gid=1000 vagrant /vagrant

The error output from the command was:

/sbin/mount.vboxsf: mounting failed with the error: No such device
```

## 対応経緯

### ゲストOSのkerenl-develをアップデート

```
# yum update kernel-devel
```

アップデート後にゲストOS再起動
->失敗

### Guest Additionsの再インストール

```
$ vagrant plugin install vagrant-vbguest
Installing the 'vagrant-vbguest' plugin. This can take a few minutes...
Installed the plugin 'vagrant-vbguest (0.13.0)'!
```

再インストール後にゲストOS再起動
->失敗

### Guest Additionsを再セットアップ
ゲストOS上で実行

```
# /opt/VBoxGuestAdditions-5.1.22/init/vboxadd setup
chcon: ラベルが付けられていないファイル `/usr/lib64/VBoxGuestAdditions/mount.vboxsf' に部分的なコンテキストを適用できません
vboxadd.sh: Starting the VirtualBox Guest Additions.
vboxadd.sh: failed: modprobe vboxsf failed.

Could not find the X.Org or XFree86 Window System, skipping.
```

再インストール後にゲストOS再起動
->失敗


## エラーの見直し
下記のエラーを元に調査

```
Redirecting to /bin/systemctl start  vboxadd.service
chcon: ラベルが付けられていないファイル `/usr/lib64/VBoxGuestAdditions/mount.vboxsf' に部分的なコンテキストを適用できません
vboxadd.sh: Starting the VirtualBox Guest Additions.
vboxadd.sh: failed: modprobe vboxsf failed.
```


やっぱりわからないので下記を実行

### kernelのアップデート

```
# yum update
```
アップデート後にゲストOS再起動
->成功！！！
【R】キーワードの出現数

#キーワードが文中にいくつ発生するか確認
library(readxl)

mat<-read_excel("test.xlsx")

\#source_name<-mat$source
\#mension<-length(mat$message)


message_list<-c()
total_char<-0
for(i in 1:length(mat$message)){
  message_list[i]<-mat$message[i]
  char<-nchar(message_list[i])
  total_char<-total_char+char
}

total_sentence_num<-0
for(i in 1:length(mat$message)){
\#
  split_word<-paste("new_split_",i,sep="")
\#
  message_list[i]<-gsub("\\..","/e/",message_list[i])
  message_list[i]<-gsub("\\?","/e/",message_list[i])
  message_list[i]<-gsub("\\!","/e/",message_list[i])
\#
  tmp<-unlist(strsplit(message_list[i],"/e/"))
\#
  assign(split_word,tmp)
  count_split<-assign(split_word,tmp)
\#  print(split_word)
\#  print(length(count_split))
  total_sentence_num<-length(count_split)+total_sentence_num

}


\#title_list<-c("source_name","mensions","total_char","total_sentence_num",
\#result_row<-c(source_name,mensions,total_char,total_sentence_num,
基本アルゴリズムの復習①


## はじめに

おさらいとして、基本的なアルゴリズムをコード化した際のメモを何回かに分けて投稿する。
アルゴリズムに抵抗感あるといった人の参考になれば
> なおフローチャートは省略します。
> コードは実行が容易なJavascriptで解説します。

今回は初歩の以下3つをやります

* 1.合計値
* 2.平均値
* 3.最大値と最小値


## 1.合計値

基本中の基本的なアルゴリズムで配列に入っている値を全て足した値を求める。

```html
<script>
  // 配列を用意
  var array = [5, 4, 9, 10, 21];
  
  // 合計値を求める変数sumを定義し、初期化
  var sum = 0;
  
  // 配列内の要素分だけ、処理を繰り返す
  for (var i = 0; i < array.length; i++) {
    sum += a[i];
  }
  
  // 結果をアラートで表示
  alert('合計値は' + sum);
</script>
```

## 2.平均値

平均の値の求め方は「全ての値を足して、データの数で割った値」になります。言い換えると「合計値 ÷ データの数」となると思います。


```html
<script>
  // 配列を用意
  var array = [5, 4, 9, 10, 21];
  
  // 合計値を求める変数sumを定義し、初期化
  var sum = 0;
  
  // lengthを使って配列内の要素分だけ、処理を繰り返す
  for (var i = 0; i < array.length; i++) {
    sum += a[i];
  }
  
  // 平均値を変数averageに代入
  var average = sum / sum.length;
  
  // 結果をアラートで表示
  alert('平均値は' + average);
</script>
```

## 3.最大値と最小値

「全ての値の中で最も大きい値」「全ての中で最も小さい値」この二つはほとんど同じ方法で求めることができるので、まとめて書きます。

```html
<script>
  // 配列を用意
  var array = [5, 4, 9, 10, 21];
  
  // 最大値を代入する変数maxを定義し、初期値として配列の最初の値を入れておく
  var max = array[0];
  
  // 配列の二つ目から最後まで処理を繰り返す
  for (var i = 1; i < array.length; i++) {
    if(max < array[i]){
      // 変数maxの値より大きい場合、変数maxを上書き
      max = array[i];
    }
  }
  
  // 結果をアラートで表示
  alert('最大値は' + max);
</script>
```

```html
<script>
  // 配列を用意
  var array = [5, 4, 9, 10, 21];
  
  // 最小値を代入する変数minを定義し、初期値として配列の最初の値を入れておく
  var min = array[0];
  
  // 配列の二つ目から最後まで処理を繰り返す
  for (var i = 1; i < array.length; i++) {
    if(min > array[i]){
      // 変数minの値より小さい場合、変数minを上書き
      min = array[i];
    }
  }
  
  // 結果をアラートで表示
  alert('最小値は' + min);
</script>
```

次回はサーチアルゴリズムについて書きます。
Line Messaging APIからのURL投稿をデフォルトブラウザで開く

# Line Messaging APIからのURL投稿をデフォルトブラウザで開く
通常LINE内のリンクはスマホではLINE内ブラウザで開いてしまいます。
これは投稿者側が意図的にデフォルトブラウザで開かせたいときの方法です。ブラウザ違いによるセッション共有ができない場合や、遷移解析を取得したいなどに有効かと思います。

## ポイント
リンクにGETパラメータopenExternalBrowserで1を渡すだけ
## 記述例
- https://www.yahoo.co.jp/  
→　LINE内ブラウザで開く
- https://www.yahoo.co.jp/?openExternalBrowser=1  
→　デフォルトブラウザで開く

## 実装について
単にURL直書きでも機能しますが、URLにopenExternal…の記述が見えてしまい微妙な場合は画像リンク形式のメッセージで対応すればよいかと思います。
VSAM（編集中）


多くの銀行の勘定系システムでは、IBMメインフレーム上でIMS/SAILで稼働している。IMS-DB、DB2ではVSAMのファイル編集方式が使用されている。こことはVSAMの概要を説明する。

#VSAMの歴史
VSAMは、1970年代にシステム/370の一部として作成されました。直接アクセス記憶装置（DASD）に記憶されているデータに対して、順次方式でも、索引つきでも、また直接方式でも、すべてを実現できる機能をもっており、現在のZ/OSでも稼働している。
※システム/360では、VSAMがなかったですね。第1次オンラインではどのようにシステム構築されたか気になりますので今後調査したいと思います。

♯VSAMとは
仮想機能アクセス方式（VSAM：Virtual Storage Access Method）は直接アクセス記憶装置上のファイルを処理するために極めて効率のよい機能をもっている。

VSAM は、次のアクセス方式を含む：
　・KSDS　キー・シーケンス・データセット ( Key Sequenced Data Set　)
　・ESDS エントリー・シーケンス・データセット ( Entry Sequenced Data Set　)
　・RRDS　相対レコードデータセット ( Relative Record Data Set　)
　・LDS　線形データセット ( Linear Data Set　) 

KSDSとは
KSDSとは、あるレコードを検索するための索引情報を保有したデータセットになります。

![KSDS.png](https://qiita-image-store.s3.amazonaws.com/0/179688/7febabe8-fd06-24da-9edf-89f6913f219b.png)


#＜参考資料＞
　Wikipedia VSAM　 　　　https://ja.wikipedia.org/wiki/Virtual_Storage_Access_Method
　メインフレームで遊ぼう  http://www.arteceed.net/?p=805
　進化する銀行システム　　星野 武史
　VSAM　　　　　　　　　　Ｊ．マーチン
簡単なpymc3のプログラム（jupyter notebook）

# 簡単なpymc3のプログラム
1. pymc3でサンプリングされた結果から分布関数を作る方法。
2. ポアソン分布に従うという前提で「事象が５年で３回起こった」という情報から「１年で何回起こる？」という確率分布の推定を求める方法。

以上の jupyter notebook ファイルをGitHubで公開しました。
https://github.com/koki-ogura/pymc3_sample

Gistでも公開しました。
How to create pdf and pmf function from pymc3 sampling result.
https://gist.github.com/koki-ogura/45ad640c0a4fcfef6977bb40f6906a38
From the information that it occurs three times in five years, we estimate how many times a year will occur according to the Poisson distribution.
https://gist.github.com/koki-ogura/22c4045541eb209fb3233e903f86527f
Processing3製のアプリでMacのメニューバーを使う

Macのデスクトップ上部にあるメニューバーを、
Processing3で作成したアプリケーションで使ってみましょう。

<img width="502" alt="menubar.png" src="https://qiita-image-store.s3.amazonaws.com/0/157646/55da24f0-3bdf-fe59-cf8b-9d9174d9a073.png">

# 注意
- 動作環境 : processing3.3
- デスクトップ上部のメニューバーは、アプリとしてエクスポート後のみ使用可能

# 内容
メニューバーを作るには、JavaのSwingにあるJMenuBarを使用します。

```processing:sample.pde
import java.awt.*;
import javax.swing.*;

JLayeredPane pane = new JLayeredPane();
JMenuBar  menubar = new JMenuBar();

void setup() {
  System.setProperty("apple.laf.useScreenMenuBar", "true");
  
  Canvas canvas = (Canvas) surface.getNative();
  pane = (JLayeredPane) canvas.getParent().getParent();

  JMenu     menu = new JMenu("menu");
  JMenuItem item = new JMenuItem("item");
  menu.add(item);
  menubar.add(menu);
  pane.add(menubar);
}
```
　　
`System.setProperty("apple.laf.useScreenMenuBar", "true");`
これによって、Macのメニューバーを使用するようになります。

こんな感じになれば成功です。

<img width="507" alt="スクリーンショット 2017-06-18 22.40.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/157646/09997d7d-a3d5-abeb-07d3-d516e5a42df6.png">

# 参考
[processing3でAWT/swingを使う。](http://qiita.com/hotman78/items/7691d2cd7c8ee455c8c4)
CMakeの-Cオプションでコンパイラーを切り替える

デフォルトではgccだけどたまにclangでビルドしてみたいときに使える方法。
## 確認した環境
Ubuntu16.04(をVirtualBoxで動かしたもの)
## ファイル配置
``` :Direcroty構成
.
├── Qiita
│   ├── CMakeLists.txt
│   └── main.cpp
└── clang-cmakeinit.cmake
```
```cmake:Qiita/CMakeLists.txt
cmake_minimum_required(VERSION 3.5)

set(SOURCE_FILES
    ${CMAKE_CURRENT_SOURCE_DIR}/main.cpp
    )

add_executable(Hello ${SOURCE_FILES})
```
```cpp:Qiita/main.cpp
#include <iostream>

int main(void){
    std::cout << "Hello World!" << std::endl;
}
```
``` cmake:clang-cmakeinit.cmake
set(CMAKE_C_COMPILER "/usr/bin/clang" CACHE string "clang compiler" FORCE)
set(CMAKE_CXX_COMPILER "/usr/bin/clang++" CACHE string "clang++ compiler" FORCE)
```
## 使い方
### デフォルト(gcc)でビルド
```bash
mkdir build
cd build
cmake ../Qiita
make
```
### -Cオプションを付けてclangでビルド
```bash
mkdir build
cd build
cmake -C ../clang-cmakeinit.cmake ../Qiita/
make
```

## 参考
[cmake公式のヘルプ](https://cmake.org/cmake/help/v3.9/manual/cmake.1.html#options)

本当は上記ではなくて、別のどこかで見つけたはずだけどもどこだったか忘れた・・
【C#】正規表現の使い方

## 本記事について

本記事では、正規表現を用いて文字列操作が出来るようになることを目的としています。

## 正規表現とは
wikiより
>文字列の集合を一つの文字列で表現する方法の一つである。正則表現（せいそくひょうげん）とも呼ばれ、形式言語理論の分野では比較的こちらの訳語の方が使われる。

要するに「文字列を指定する方法」です。

##正規表現を使う理由
正規表現に用意されている多数のメタ文字を使用すると、かなり複雑なテキストと一致する表現を、比較的少ない文字数で記述できます。

## 正規表現を扱ってみる
C#で正規表現を扱うためのクラスはRegexクラスです



            var reg = new Regex("[^az]");
            string s = reg.Replace("1234iwevepauazt","");
            Console.WriteLine(s);

結果aaz


            var reg = new Regex("[az]");
            string s = reg.Replace("1234iwevepauazt","");
            Console.WriteLine(s);

結果1234iweveput


## よく使われる正規表現の例
|   パターン     |    意味     | 
|:-----------------|------------------:|
| @"^\d+$"            |         数値と一致（半角数値、全角数値問わす） |  
|@"^[0-9]+$"        |           数値と一致（半角数値のみ） |  
|@"^[0-9a-zA-Z]*$"         |  0文字以上の半角英数字と一致（ブランクも可） |  
|@"^[0-9a-zA-Z]+$"         |     	1文字以上の半角英数字と一致（ブランクは不可） |  
|@"^[0-9]{3}-[0-9]{4}$"  |      郵便番号（半角数値3桁-半角数値4桁）| 
|@"^[!-~]*$"     |    半角英数、半角記号に一致（ブランクも可）|  

その他詳しく知りたい方は[正規表現言語 - クイック リファレンス](https://msdn.microsoft.com/ja-jp/library/az24scfc(v=vs.110).aspx)




##まとめ
正規表現を使用する最大のメリットは文章処理作業の効率化を図れることです。とくに、文書ファイルを製作しているとき、一括して文字列の置換を行いたいときなどに威力を発揮します。
ぜひ正規表現を使って、効率のいい開発を行いましょう。


## 参考
- [正規表現](https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE)
- [正規表現：悪い表現、いい表現、最良の表現](http://postd.cc/regexes-the-bad-the-better-and-the-best/)
[Elixir] Hexのパッケージをmix.exsにすぐに追加できるようなカスタムタスクを作ってみた

Elixirで依存するパッケージは `mix.exs` に記述していきますが、
以下のようにバージョンを書く必要があり、少し面倒です。

```elixir:mix.exs
  defp deps do
    [
      {:hogehoge, "~> 1.0.0"}
    ]
  end

```

~~バージョンのところを 0.0.0 にしておけば
気にしなくてもいいらしいのですが、
それもそれで少し気持ち悪いです。~~

(追記)↑こちらは手元で試してもうまく動きませんでした。。誤情報失礼いたしましたmm


少しでも楽にならないかなーと思い、
`mix hex.deps` というmixのカスタムコマンドを作成してみました

[mix_task_hex_deps](https://github.com/tamanugi/mix_task_hex_deps)

## 使い方

mix hex.deps にパッケージ名の引数を渡してあげると
`{:hogehoge, "~> 1.0.0"}` といった形式でパッケージ名と最新バージョンが
表示されます

```console
$ mix hex.deps httpoison
{:httpoison, "~> 0.11.2"}
$ mix hex.deps httpoison poison credo | pbcopy
# クリップボードに以下の文字列が格納される
{:credo, "~> 0.8.1"},
{:poison, "~> 3.1.0"},
{:httpoison, "~> 0.11.2"}
```

![mix_hex_deps.gif](https://qiita-image-store.s3.amazonaws.com/0/55219/562c4188-6d5f-4d88-afd9-1b3f17ea79fd.gif)


## インストール方法

```
$ git clone https://github.com/tamanugi/mix_task_hex_deps.git
$ cd mix_tasks_hex_deps
$ mix do archive.build, archive.install
```

# 感想とか

`npm install {パッケージ名}` みたいに
mix.exsに追記できるといいかなと思ったりもしたのですが、
exsファイルを弄るものどうかなと思って
とりあえずは標準出力に出力させるだけにしてみました

カスタムタスク作るのは大変かなと思ったのですが、
思ったよりはお手軽につくれました。
Elixirは公式のコードも読みやすいので、
いろいろ参考になりますね

~~あとはもうちょっといい名前つけたらよかったな~~

# 参考

[[Elixir]Mixのカスタムタスクを作成する](http://qiita.com/darui_kara/items/5a4ae13e7c8699e56674)

@ma2ge さん, @niku さんのリポジトリも参考にさせていただきました
https://github.com/ma2gedev/mix-star
https://github.com/niku/mix_tasks_niku_new
ASP.NET Core MVCテンプレート作成のオプション

# 内容
コンソールから，Identityを実装したMVCテンプレートを作成したくて，色々調べました．

|オプション|引数|説明|
|:-----|:-----|:-----|
|-f または --framework|netcoreapp1.0, netcoreapp1.1 (Default: netcoreapp1.0)|ターゲットにするフレームワークを指定する|
|-au または --auth|None, Individual (Default: None)|使う認証の種類|
|-uld または --use-local-db|true, false (Default: false) |SQLite の代わりに LocalDB を使うかどうかを指定する|

ということで，認証機能を実装したテンプレートを作成するには，以下のコマンドを実行すればいいことがわかりました．

```
dotnet new mvc --auth Indivisual
```

# 参照
- https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-new
Rails 5.1 以降で attribute_was, attribute_change, attribute_changed?, changed?, changed 等が DEPRECATION WARNING

# 何が起きたか?

Rails 5.1 へアップデートして大量に DEPRECATION WARNING や spec エラーが起きたので、調べてみると Rails 5.1 で ActiveRecord::AttributeMethods::Dirty の

- attribute_was
- attribute_change
- attribute_changed?
- changed?
- changed

辺りが非推奨になった。
参考: https://github.com/rails/rails/blob/ce93740a5e4437dfc1cf9b0b13da1bad06a2a598/activerecord/lib/active_record/attribute_methods/dirty.rb#L214-L237

# 何故それらが非推奨になったか

Rails の開発者が `changed` 系のバグ報告を良く受けるらしい。動作的に分かりづらい部分もあるが、 Rails が提供しているメソッドとしても attribute_change の様なメソッドで、メソッド名もアレなのと、どのタイミングでどんな値が入るのか正しく理解しないと利用することが出来ない。 (自分も結構このへんは悩んだ記憶がある。)

かなり大きな破壊的な変更にはなるが、移行パスはシンプルなようです。コードベースから改善し API をより直感的にすることによりそれらを改善しようとしたのがこの変更のようです。

自分も正しく理解できているか不安だし、結構想像で書いている部分もあるので、詳しくは下記 PR を。
https://github.com/rails/rails/pull/25337

# 移行
移行作業は理解さえ出来ればシンプルですが、単純な機械的な置換作業をすると大怪我をします。書き換える場所が save 前なのか、save 後なのかを意識して書き換える必要があります。正しくは `after_create/after_update` より前か後かを意識すれば良いようです。 
(https://github.com/rails/rails/blame/master/activerecord/lib/active_record/attribute_methods/dirty.rb#L19-L20)

## 変換表

表中の各 `attribute` はカラム名に置き換えて `hoge` というカラムで `will_save_change_to_attribute?` を使いたければ `will_save_change_to_hoge?` と読み替えてもらえると。

### `after_create/after_update` より前の場合

| 修正前 | 修正後 | 
|-------|-------|
| attribute_changed? | will_save_change_to_attribute? |
| attribute_change | attribute_change_to_be_saved |
| attribute_was | attribute_in_database |
| changes | changes_to_save |
| changed? | has_changes_to_save? |
| changed | changed_attribute_names_to_save |
| changed_attributes | attributes_in_database |

### `after_create/after_update` より後の場合

| 修正前 | 修正後 | 
|-------|-------|
| attribute_changed? | saved_change_to_attribute? |
| attribute_change | saved_change_to_attribute |
| attribute_was | attribute_before_last_save |
| changes | saved_changes |
| changed? | saved_changes? |
| changed | saved_changes.keys |
| changed_attributes | saved_changes.transform_values(&:first) |

# 嬉しいこと
`after_create/after_update より後の場合` で書いているメソッドは callback が終わった後でも使えます。今まで save 後に `record.changes` が取得できなかったのが、 `record.saved_changes` をすれば前回の変更で何が変更されたかが取得できます。

と言っても、私の書いていたアプリではコレに該当する部分はありませんでしたが、、きっと嬉しい人はいるはず！

# 最後に

色んな所で似たような記事を見ましたが、正しくどのように対応すれば良いのかがイマイチまとまっていないものも多かったので、自分なりにまとめてみたつもりです。

ツッコミ・修正大歓迎です！
すーぱーこのはモード！！！Conoha


# 何をやったのか？
[ConoHa](https://www.conoha.jp/)の管理画面が尊くなるクローム拡張の作成

# すーぱーこのはモードとは？

conohaが用意している「このはモード」を凌駕するモードである

# まずは、「このはモード」の設定方法

* 管理画面の右上のメアドをクリックして出て来るメニューからアカウント管理を選択
* 下の方にある表示設定→モード設定から「このはモード」を選択
　<img width="943" alt="スクリーンショット 0029-06-18 20.52.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/37766/1bfeb1bf-f287-c626-6df7-c023e28fae7a.png">

## このはモード

<img width="1571" alt="スクリーンショット 0029-06-18 20.52.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/37766/c7148404-cf00-8e68-74a9-4e874fdc9aee.png">


#　すーぱーこのはモード設定方法

[ここ](https://github.com/kadotami/super_conoha_mode)からsuper_conoha_mode.crxをダウンロード。 chromeの拡張機能画面を開き、super_conoha_mode.crxをドラッグ＆ドロップして拡張機能を追加すればOK！


# すーぱーこのはモード！
<img width="1567" alt="スクリーンショット 0029-06-18 20.55.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/37766/6f7249e9-1d4a-6ac1-f4d2-c11a27809217.png">

とうとい。。。
中の人デフォルトで作ってくれないかな〜
Spread Sheet　画像URLをセル内で表示する。

###備忘録

CSV形式のデータフィードなどで画像がURL形式でまとまっていて、画像一つ一つを目視で確認したい場合などに使っています。

=image("URL")で指定した画像URLをセル内に表示。
google driveのフォルダ内に画像が格納されている場合は、画像の固有ID(?ID=**)のID部分を、<code>https://drive.google.com/uc?export=download&id=</code>につけることで表示できます。

<スプレッドシート内に記述する式は以下>
``=image("https://drive.google.com/uc?export=download&id=**") ``

また、URLの後に数字をつけることによって、以下の様に表示サイズを変えることが可能です。

|=image(“URL”)|セルのサイズに合わせて画像のサイズが調整|
|:--|:--|
|=image(“URL”, 2)|セルのサイズに合わせ、余白を作らないように画像のサイズが調整|
|=image(“URL”, 3)|画像を元のサイズで表示
|=image(“URL”, 4, 高さ, 幅)|画像のサイズをピクセル数で指定
simple_formatで改行コードが変換されない


##環境
* ruby歴 初心者
* rails5
* ruby 2.4.1p111
* jquery
* coffee

##これはなに？
rails のヘルパーメソッドである [simple_fomart](http://railsdoc.com/references/simple_format) を使用した際に、改行コードが変換されずハマってしまった時の備忘録です。
※つっこみどころは満載だと思うのでコメントお待ちしています。
 
##発端
まず、下記のような ajax での処理中にエラーが発生した場合
そのエラー内容を表示させるコードから始まります。


```ruby:controller.rb
@error_message = 'ファイルが見つかりませんでした。入力情報に間違いがないか確認してください。'
```

```ruby:error.js.erb
$('#form_error .modal-body').empty()
$('#form_error .modal-body').append("<%= j @error_message %>")
```

:confused:「あかん、２文で１行とかキモい。」
:confused:「改行しよ。」

```ruby:controller.rb
@error_message = 'ファイルが見つかりませんでした。\n入力情報に間違いがないか確認してください。'
```

```ruby:error.js.erb
$('#form_error .modal-body').empty()
$('#form_error .modal-body').append("<%= j @error_message %>")
```

:confused:「あれ？なんで改行されてへんのや？」
:confused:「そうか！HTMLやねんから改行コードやなくて改行タグにせなあかんのか」
:confused:「あれ....てことは、文字列内にタグ埋め込まなあかんのん？」
:confused:「あかんあかん、かっこわるいわ」
:sunglasses:「そんな君には[simple_fomart](http://railsdoc.com/references/simple_format)や! 」
:confused:「まじ、これ rails 神」

```ruby:controller.rb
@error_message = 'ファイルが見つかりませんでした。\n入力情報に間違いがないか確認してください。'
```

```ruby:error.js.erb
$('#form_error .modal-body').empty()
$('#form_error .modal-body').append("<%= j simple_format @error_message %>")
```

:confused:「変換されてへんやんけ」
:sunglasses:「当たり前や、文字列の定義が間違うとるんや」
:confused:「なんやて？」

##rubyで文字列リテラルでのシングルクオートとダブルクオートは処理が異なる
まだ、初心者故に **'〇〇'** と **"〇〇"** の使い分けをほとんど意識していませんでした。
だいたいが、変数を埋め込むときは **"〇〇"** で、それ以外は **'〇〇'** というレベルでした。
しかし、それぞれにはもちろん意味がありました。

* シングルクオート
文字列として定義

* ダブルクオート
文字列中のバックスラッシュ記法や式を解釈できる文字列として定義

■ 文字列中にバックスラッシュを含む場合

```ruby
# シングルクオート
[1] pry(main)> string = '私の趣味はカードゲームです。\nフットサルもします。'
=> "私の趣味はカードゲームです。\\nフットサルもします。" #ただの文字列

# ダブルクオート
[2] pry(main)> string = "私の趣味はカードゲームです。\nフットサルもします。"
=> "私の趣味はカードゲームです。\n" + "フットサルもします。"　#改行が解釈された文字列
```

■ 文字列中に式を含む場合

```ruby
[7] pry(main)> var = 'フットサル'
=> "フットサル"

# シングルクオート
[8] pry(main)> string = '私の趣味はカードゲームです。#{var}もします。'
=> "私の趣味はカードゲームです。\#{var}もします。" #ただの文字列

# ダブルクオート
[9] pry(main)> string = "私の趣味はカードゲームです。#{var}もします。"
=> "私の趣味はカードゲームです。フットサルもします。" #変数が解釈された文字列
```

ですので、コードを見直すと **シングルクオート** で定義したことが原因となり
改行コードが解釈されず、結果的に変換さていなかったということになります。

##解決

```ruby:controller.rb
# ダブルクオートで文字列を定義!!
@error_message = "ファイルが見つかりませんでした。\n入力情報に間違いがないか確認してください。"
```

```ruby:error.js.erb
$('#form_error .modal-body').empty()
$('#form_error .modal-body').append("<%= j simple_format @error_message %>")
```

##学んだこと
* バックスラッシュ記法を解釈させるにはダブルクオートで文字列を定義すること
* HTMLで複数行表示したい場合は[simple_fomart](http://railsdoc.com/references/simple_format)を使えば便利

##参考リンク
* [Rubyの文字列リテラルではダブルクオートを基本としたい](http://necojackarc.hatenablog.com/entry/2015/09/12/220832#fn-347a047a)
* [Rubyの文字列リテラル](https://docs.ruby-lang.org/ja/2.4.0/doc/spec=2fliteral.html#string)
【R】ピリオドで文章分割

# 文章分割
library(readxl)

mat<-read_excel("test.xlsx")

message_list<-c()
for(i in 1:length(mat$message)){
  message_list[i]<-mat$message[i]
}

for(i in 1:length(mat$message)){
  split_word<-paste("split_",i,sep="")
  tmp<-unlist(strsplit(message_list[i],"\\\\."))
  assign(split_word,tmp)
}
ColemakからQwertyに戻した話

# 概要
とある大学生のColemakからQwertyへ戻すまでの経緯を説明します．
結局，何が言いたいのかわからないと思うから，暇な人だけ見るといいです．

# なぜColemakにしてたの？
- 当時，Qwertyではどうもタッチタイピングができなかったから
    - 多分気の性だし，努力が足りなかっただけ
- 「HHKBのprofessional2(us)無刻印ver」の購入ついでにタッチタイピングがしたくなったから
- 友達から薦められたから

# 実際どうだった？
## good point
- 約1週間でタッチタイピングの世界へ
    - 指の位置とキーの位置を固定化
- 長時間タイピングでも疲れない
- 仕事の効率UP
- 約1年4ヶ月の快適なタイピング生活

## bad point
- 筋力が落ちた
- 誰かがPCを触るたびにQwertyに戻す手間
- 考えるより，まず手が動くようになった
 - これは悪い癖だと思った
- vim，emacs，その他ゲームで支障が発生
 - 移動のwasdがずれるため使用不可

# 戻すきっかけ
## vimを使いたくなったから
- 正直.vimrcでキーマップを変更すれば，できなくもない

## 社会に出た時のハンデをなくすため
- 悲しいことに世の中のキーレイアウトはQwertyである
- 社会に出たときの疎外感がパなそう
- インターンシップで弊害が生じた
 - BIOSのパスワード入力はQwertyと気づかず3回ミスり，ビープ音→目立つ
 - windowsPCでは，レジストリを変更していたので，手間

## 正確度と速度に問題あり
- タッチタイピングはできていたものの，タイプミスは多かったし，そんなに速くもなかった

# Qwertyへ戻す
- 実際にvimを触ったりして戻し中．
- この記事もQwertyで記述．

## 現れた大きな変化
### 以外に早い段階で戻りつつある
- 戻し始めて，2日で少しはミスるがある程度まで行っている 
 
### Qwertyでタッチタイピングができつつある！
- ColemakとQwertyの配置の違いは17/27のため，dvorakほど苦労しない
    - それが逆にQwertyからColemakに移行しやすい理由でもある
- キーのどの位置にどの指を置けばいいのかはColemakでマスターしていた 

# でもなんかちょっと悲しい気分になるよね
Qwertyに戻して，改めてColemakの配置が素晴らしさがわかった

- 指の移動量が多くなって疲れる
- ある程度，速く打てていたのに，また遅くする億劫さ

これを別のものに例えると

> オートマ車に乗ってたのにマニュアルに乗り換えている感じ

自分の個性がなくなった気分だ．

やっぱり，Colemakは世界一のキーレイアウトだと感じた．

# 後日談

- 2017年6月から2019年4月と約2年が経ちました
    - Qwertyで快適なタッチタイピング生活
- 作業効率がUPした
    - vimやらemacsの勉強がしやすくなった
        - エディタのコマンドは奥が深いなぁ
    - 逆にvimじゃなきゃダメみたいになった：wq
JetBrains系IDEの学生版を取得した話

# はじめに
JetBrains社のIDEといえばリファクタリングに強いことで有名ですが、学生にとっては少々お高いお買い物であったりします。ですが、幸い学生は無料でライセンスを取得できるとのことなので、取得してみました。

# 必要なもの
以下のうちの一つが必要です

* 学校のメールアドレス(主に大学生向け,.eduなど)
* 学生証、在学証明書(主に高校生, **英文版推奨**)
* 国際学生証

私は高校生なので、英字版の在学証明書を発行してもらい、それで取得しました。

# ライセンスがもらえるもの

* ReSharper Ultimate
* IntelliJ IDEA Ultimate
* AppCode
* CLion
* RubyMine
* DataGrip
* PhpStorm
* PyCharm
* WebStorm

これだけのものが使えるようになります。いろんなことに使えそうですね!

# 取得方法

https://www.jetbrains.com/shop/eform/students から申請します。
学校のメールアドレスか国際学生証での申請は即座に完了しますが、学生証など人が確かめないといけないものは時間がかかります。といっても私の場合、3時間ほどでしたが

そのようにして申請した後、問題がなければ以下のようなライセンス取得用のリンクがメールで送られてきますので、取得しましょう。
![activate_link.png](https://qiita-image-store.s3.amazonaws.com/0/183667/1f99cc7b-4bf7-d126-e669-2924526ceaf5.png)
このとき、JetBrainsアカウントが必要になります。その登録時は氏名の入力が必要なのですが、そこは下手に偽名などにしないほうがいいでしょう。

# おしまい

こういうことができるのは学生のうちだけなので、皆さんどんどん使っていきましょう
JavaScriptの関数内関数の変数スコープ

基本的にはJavaScriptは現在のスコープからグローバルに向かって参照が行われます。
…が、少し想像していた動きと違ってしまうことがあったので調査してました。

```js:test.js

var x = 0;
function a() {
  var x = 1;
  function b() {
    console.log("func b:x=" + x);
  }
  function c(v) {
    x = v;
  }
  return {"b":b,"c":c};  
}

console.log("Hello!");
console.log("x=" + x);
func = a();
func["b"]();
x=10;
console.log("x=" + x);
func["b"]();
console.log("x=" + x);
func["c"](15);
console.log("x=" + x);
func["b"]();
console.log("x=" + x);
```

次に実行結果を。

```log:result.log
Hello! // こんにちは
x=0　// グローバルのxは今日も0なのである
// ここで関数aから関数bとcを取り出す
func b:x=1 // おそらく関数a内のxが参照されている
// グローバルのxを10に書き換える
x=10 // グローバルのxは書き換わったようだ
func b:x=1 // しかし関数bの返り値であるxは書き換わっていない
x=10 // しつこく見てみるが、グローバルのxも書き換わっていない
// そこで関数cによってxを書き換えてみる
x=10 // グローバルのxは書き換わらない
func b:x=15 // 関数a内のxは書き換わっている
x=10 // やっぱり書き換わってない
```

最近の言語は単純なスタックモデルを想定しているとうまく行かないのですね。
自分は関数aの変数xは関数x終了時に破棄されると思っていました。
この結果だと、関数bとcがアクセスできる状態であれば関数aの変数xも生きているようです。

ちゃんと書いてありました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#Preservation_of_variables

この場合、関数bとcがアクセスできなくなった場合にメモリが開放されるということで。
Visual Studio Code拡張開発

# テンプレートの作成

```shell-session:shell
# テンプレジェネレータのインストール
npm install -g yo generator-code
# テンプレ作成の実行を行う
yo code

# cson(Atom)からの移植に便利なツール cson2json
npm install -g cson
```

# 開発の開始

```shell-session:shell
# パッケージをカレントにする
cd (name)
# vscodeを実行する
code .
```

# 変更するファイル(カラーリングの場合)
|ファイル名|内容|
|-----|-----|
|package.json|パッケージ情報ファイル|
|syntaxes/(name).tmLanguage.json|グラマーファイル|
|language-configuration.json|カッコとコメント|
|README.md|説明|
|CHANGELOG.md|変更履歴|

#githubでの公開

package.jsonに下記のようなプロパティ(URLは例なので注意)を追加する

```json:package.json
{
    "license": "https://github.com/BouKiCHi/vscode-nrtdrv/blob/master/LICENSE",
    "homepage": "https://github.com/BouKiCHi/vscode-nrtdrv/blob/master/README.md",
    "bugs": {
        "url": "https://github.com/BouKiCHi/vscode-nrtdrv/issues"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/BouKiCHi/vscode-nrtdrv.git"
    }
}
```

# 実行
F5で実行、開発ウインドウではCtrl+Rで再読込でき、変更を反映できる

# 公開
Visual Studio Team Servicesへの登録が必要。
Windows Live IDでサインアップできる。
公開にはvsceをインストールする。

```shell-session:shell
npm install -g vsce
```

vsceはパッケージディレクトリのルートでの操作となる

## 公開者として未登録である場合

```shell-session:shell
vsce create-publisher (公開者名前)
```

もしくは、
https://marketplace.visualstudio.com/manage

## 公開者としてすでに登録されている場合
```shell-session:shell
vsce login (公開者名)
```

# Personal Access Token(PAT)の取得
vsceで401 Unauthorizedのエラーが発生したのは、下記URLを見ないとわからなかった。
**Accounts欄を「all accessible accounts」に変更すること！！**
https://code.visualstudio.com/docs/extensions/publish-extension

Visual Studio Team Servicesのユーザーページで、PATを作成し、コピーする。

# 公開
```shell-session:shell
vsce publish [version番号]
```
デフォルトはpackage.jsonのバージョン指定に従う
すでにバージョンがある場合はエラーになる

```shell-session:shell
vsce publish [major|minor|patch]
package.jsonの現在のバージョンに以下の数値を加算し、公開する
```
|名前|値|
|----|----|
|major|1.0.0|
|minor|0.1.0|
|patch|0.0.1|

# 非公開にする
```shell-session:shell
vsce unpublish
```
Rails + Capistrano + Unicorn である日 Gemfileが読み込めなくなった話


Railsアプリを　Capistrano + Unicorn　+　nginxでデプロイができるようになって喜んでいたのですが
ある日いつもの `bundle exec cap production deploy`は成功するが結果が反映されなくなった、、、



```log:unicorn.log
I, [2017-06-18T07:25:00.381245 #18202]  INFO -- : executing ["/var/www/myapp/shared/bundle/ruby/2.4.0/bin/unicorn", "-c", "/var/www/myapp/current/config/unicorn/production.rb", "-E", "production", "-D", {11=>#<Kgio::UNIXServer:fd 11>}] (in /var/www/myapp/releases/20170618072435)
I, [2017-06-18T07:25:00.381795 #18202]  INFO -- : forked child re-executing...
/home/suppin/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/bundler-1.15.1/lib/bundler/definition.rb:31:in `build': /var/www/myapp/releases/20170606053023/Gemfile not found (Bundler::GemfileNotFound)

 ```
エラーを見に行ったところGemfileがないと言われていました・・・

#解決方法

myapp/config/unicorn/production.rb に下記を追記してあげる。
（環境によってはパスが異なるかもしれません）
>```rb:production.rb
before_exec do |server|
  ENV["BUNDLE_GEMFILE"] = File.join(File.expand_path("../../../../", __FILE__), "current", "Gemfile")
end
```

その後unicornを再起動

#補足
capistranoを使っていて、いつもの`kill -9`コマンドでpidを殺しにいくと自動デプロイするときに怒られる。なので`current/tmp/pid/unicorn.pid`とかのファイルを削除してあげる必要がある。



解決方法は
http://unlearned.hatenablog.com/entry/2014/03/10/230954
を参考にさせていただきました。ありがとうございます。
OpenCvのMatからC++/MFCへの画像変換

#cv::MatからMFC picture controlへの画像移行

　OpenCvをC++/MFCで扱う場合、最大の難関は、MatからMFCのpicture controlへ転写させることだと感じる。picture controlは.Netでいうとpicture boxに相当する。

　初心者にはMFCは難関で参考になるサイトも少ないのでわずかなコードを完成させるまで試行錯誤し、トータルで1週間くらいはかかってしまったが、実際は簡単に変換できることが分かった。

　その方法は、CImageで型を作り、SetPixelでカラーデーターを入力させることだ。これによって簡潔で分かりやすいコードをつくることができた。

　MFCはその難しさゆえに何度も挫折しかけたが、逆に面白さも感じた。C++でOpenCvのアプリケーションを作るなら、.NETよりMFCを活用したほうが良いというのが今回の感想だ。

　次回の記事は、MFCでのOpenCvアプリ作成を取り上げてみようと思う。多分だいぶ先になるのだろうが。

```c++:code

	cv::Mat BMat = cv::imread("./abc.bmp");

	CImage cimg;
	cimg.Create(BMat.cols,BMat.rows,32,0);
	
	for (int y = 0; y < BMat.rows; y++) {
			for (int x = 0; x < BMat.cols; x++) {
				uchar r,g,b;

				b = BMat.at<cv::Vec3b>(y, x)[0];
				g = BMat.at<cv::Vec3b>(y, x)[1];
				r = BMat.at<cv::Vec3b>(y, x)[2];
		
				cimg.SetPixel(x, y, RGB(r, g, b));
		}
	}

	CStatic* pictureB = (CStatic*)GetDlgItem(IDC_STATIC_BITMAP);
	pictureB->SetBitmap(cimg);
```
# 超高速な変換方法（動画での利用方法）

　 （超高速というか、画像読み込み時はこっちのほうがが正しいやり方のようです。上のコードを書いたあとでよく考えると、ピクセルにアクセスするのは、ピクセル値を変更する場合だけです）
　
　上の方法は各ピクセルにアクセスしていたが、Mat.dataというファンクションを利用すればピクセルデータを一括で確保できるようだ。
　
　ビットマップインフォの構造体からStretchDIBitsでピクセルデータをセットし、そのパラメーターからイメージを作成するのが最も高速に読み込み動作する。

 ビットマップインフォから作成する際、以下の点を注意する。
 
　`bitInfo.bmiHeader.biHeight　;`　というパラメーターの設定について、パラメーターに代入する値を負の値にしないと上下反転した画像になるので、 `= -BMat.rows`とすること。（ご指摘ありがとうございます）

　また、動画で使用する場合は、別スレッドを作り、そこにループ処理のコードを書かないといけない。でないと、ループから抜けるまでボタンも押せない「固まった」状態になるからです。

　スレッドの作り方はいくつかあるのでMSDNなどを参照ください。今回のテストアプリを作成するときは、下のようなスレッド内にループ作業を書きました。

```C++:ThreadExample

UINT __cdecl ViewOpenCv::thread1(LPVOID pParam) {

  Do looping work here.

}

```

```C++:cvMatToMfcPictureControl

    cv::Mat original;
    cv::VideoCapture capture;
    capture.open(0);// open the default camera


	CWnd *cwn = (CWnd*)GetDlgItem(IDC_STATIC_BITMAP); // Get the picture control ID
	CDC* wcdc = cwn->GetDC();
	HDC whdc = wcdc->GetSafeHdc();

	RECT rec;
	cwn->GetClientRect(&rec);

	cv::Size matSize;
	matSize = cv::Size(rec.right, rec.bottom);

    cv::Mat BMat(matSize.width, matSize.height, CV_32FC3);

	for (;;) {

		capture.read(original);
		BMat = original;

		BITMAPINFO bitInfo;
		bitInfo.bmiHeader.biBitCount = 24;
		bitInfo.bmiHeader.biWidth = BMat.cols; //the bitmap is a bottom-up DIB and its origin is the lower-left corner.
		bitInfo.bmiHeader.biHeight = -BMat.rows; //If biHeight is negative, the bitmap is a top-down DIB and its origin is the upper-left corner.
		bitInfo.bmiHeader.biPlanes = 1;
		bitInfo.bmiHeader.biSize = sizeof(BITMAPINFOHEADER);
		bitInfo.bmiHeader.biCompression = BI_RGB;
		bitInfo.bmiHeader.biClrImportant = 0;
		bitInfo.bmiHeader.biClrUsed = 0;
		bitInfo.bmiHeader.biSizeImage = 0;
		bitInfo.bmiHeader.biXPelsPerMeter = 0;
		bitInfo.bmiHeader.biYPelsPerMeter = 0;

		StretchDIBits(
			whdc,
			0, 0,
			matSize.width, matSize.height,
			0, 0,
			BMat.cols, BMat.rows,
			BMat.data,
			&bitInfo,
			DIB_RGB_COLORS,
			SRCCOPY
		);

		if (cv::waitKey(1) >= 0) break;
	}
データベースのバインド変数のメリットを語る（①はじめに）


2018/7/14 全面改訂

====================================================================

## **0. はじめに**

[zd6ir7](https://qiita.com/zd6ir7)です。初投稿になります。よろしくお願いいたします。

件名のとおり、データベースのバインド変数を使うことによるメリットをお伝えしたいと思います。予めことわっておきますが、わかりやすさ追求のため、詳細を省略しているところがある点ご了承願います。

## **1. 「バインド変数」とは？**
まずは、「バインド変数」とは何か？をお話しします(※1)。
DBMSに対して発行されるSQL文は外から与えられる値によって変動するものもあります。例えば以下のユーザ情報を保持したUSERTABLEを考えます(※2)。


| id          |passwrod    |username        |email                           |
|:------------|:-----------|:---------------|:-------------------------------|
| 22222       |password2   |ルフィー        |chopperlovesluffy@pirates.com   |
| 55555       |password5   |桜木花道        |sakurahana@vvvyyy.go.jp         |
| 11111       |password1   |剣桃太郎        |momo_tsurugi@jump.otoko.co.jp   |
| 33333       |password3   |きんにくすぐる  |oreha@muscleman.net             |



そのテーブルに対して、ユーザIDとパスワードをもとに情報を取得するSQLがあったとします。

SELECT * FROM USERTABLE WHERE ID='XXX' AND PASSWORD='YYY';
(XXXとYYYは仮の値です。)

当然ながらユーザIDとパスワードはユーザによって変わるものであり、カラムIDに与えられる値（XXX）とカラムPASSWORDに与えられる値（YYY）は当然変動するものです。

そこで、ID用の箱、PASSWORD用の箱を用意して、いろいろな値が格納できるようにします。それらの「箱」のことをバインド変数と呼びます。箱を用意する、つまりバインド変数を宣言する、ということです。

## **2．「バインド変数」の宣言**
では、バインド変数を宣言するというのは、具体的にどのようなものなのでしょうか？Javaアプリケーションで上記のSQLを発行するコードを例に示します。

```
// SQLを宣言する。カラムidとpasswordに対して「?」を入れることで、これらはバインド変数であることを宣言する。
String sql = "select * from app.usertable where id = ? and password = ?";
// バインド変数を格納したSQLを発行するため、PreparedStatementを用意する。
preparedStatement = connection.prepareStatement(sql);
// idに対して値を代入する。この「1」というのは、1番目のバインド変数idを指す。
preparedStatement.setInt(1, 11111);
// passwordに対して値を代入する。この「2」というのは、2番目のバインド変数passwordを指す。
preparedStatement.setString(2, "password1");
// 結果を取得する。
resultSet = preparedStatement.executeQuery();
```

バインド変数を宣言しないで、SQLを発行する方法もあります。同じくJavaで、以下にそのコード例を示します(※3)。


```
// Statementを用意する。
statement = connection.createStatement();
// SQLを宣言する。可変値idとpasswordを入れてSQLを構成する。
String sql = "select * from app.usertable where id = 11111 and password = 'password1'";
// 結果を取得する。
resultSet = statement.executeQuery(sql);
```

このようにバインド変数を使わない方法もあるのに、どうしてわざわざバインド変数を宣言する必要があるのでしょうか？次回以降2つのメリットを紹介したいと思います。


# **脚注**
(※1)
また「バインド変数」に関しては、以下のURLにわかりやすい解説が記載されているので、ご参照ください。
http://wa3.i-3-i.info/word12449.html

「バインド変数」はOracle、DB2等ではこの名称で呼ばれていますが、MySQLだと「ユーザー定義変数」(https://dev.mysql.com/doc/refman/5.6/ja/user-variables.html) と呼ばれているようです。お使いになられているDBMSがどのように呼ばれているかは、マニュアルを参照ください。


(※2)
パスワードがそのままテーブルに格納されていますが、あくまで例ということでご容赦ください。通常であればエンコードされて格納されます。

(※3)
バインド変数つきSQLを発行する際、JavaではPreparedStatementクラスを使います。一方で、そうしない場合はStatementクラスを使います。前者クラスは、以下の文献から、実行されたSQLについての情報をプールして使いまわすことができる点でパフォーマンス面で優れていることが指摘されています。

O'Reilly Japan - Javaパフォーマンス
https://www.oreilly.co.jp/books/9784873117188/

OCP: Oracle Certified Professional Java SE 8 Programmer II Study Guide: Exam 1Z0-809
http://as.wiley.com/WileyCDA/WileyTitle/productCd-1119067901,miniSiteCd-SYBEX.html

なお今回コード例を載せるにあたり、上記文献を参照しました。
Cocos2d-x スタートページ

主に自分用のメモですが、Cocos2d-xを始めるにあたって役に立ちそうなページを集めました。
公式ページ、開発環境構築、入門用チュートリアル、Unityとの比較記事などです。
随時メンテしていこうと思います。

## 公式ページ系

* [Cocos2d-x](http://www.cocos2d-x.org/)
* [Cocos2d-x ダウンロードページ](http://www.cocos2d-x.org/download)
* [Cocos2d-x Programmers Guide](http://www.cocos2d-x.org/docs/static-pages/programmers-guide.html)
* [API Reference](http://www.cocos2d-x.org/docs/api-ref/)

## 開発環境構築系
* [プログラム/Cocos2d-x/Cocos2d-x開発環境の構築 - ぎじゅつめも](http://wiki.xsqi.net/index.php?%A5%D7%A5%ED%A5%B0%A5%E9%A5%E0%2FCocos2d-x%2FCocos2d-x%B3%AB%C8%AF%B4%C4%B6%AD%A4%CE%B9%BD%C3%DB#p2c37ebc)
* [Windows向け開発環境のインストールと設定 - Cocos2d-x ドキュメント 日本語訳](http://westplain.sakuraweb.com/translate/cocos/Installation/Windows%2520Setup.cgi)
* [Cocos2d-x 3.4 Windows開発環境のセットアップ | cretia studio](http://studio.cretia.net/blog/185)
* [Cocos2d-xを準備しよう(2/5):初心者のためのCocos2d-xゲームプログラミング入門](http://libro.tuyano.com/index3?id=6456003&page=2)


## 入門記事系
* [チュートリアル | studycocos2dx](http://study-cocos2d-x.info/tutorial/)
* [初心者のためのCocos2d-xゲームプログラミング入門](http://libro.tuyano.com/index2?id=9486003)
* [Cocos2d-x超入門 そもそも何からはじめればいいの？ - Qiita](http://qiita.com/kanacha/items/97d020c04ff311eca735)
* [cocos2d-xに入門したお話 - Qiita](http://qiita.com/utah/items/e6019c2b31e840519cab)
* [Cocos2d-x　入門編-画面遷移 - Qiita](http://qiita.com/kazuhiro1128/items/605cbb545bb60cd0b4f9)
* [cocos2d-x 3.0 + C++11で始めるゲーム開発超入門 - SlideShare](https://www.slideshare.net/giginet/cocos2dx-30-c11)
* [Cocos2dx-Windows10ゲーム開発入門](http://garicchi.com/?page_id=19249)


## Unityとの比較系

* [UnityとCocos2d-xを比較 開発環境で割と本気で悩んだ話](http://taiyoproject.com/post-415)
* [【CEDEC 2014】Cocos2d-xかUnityか・・・よりよい2Dゲーム開発のためのゲームエンジン選びと対策](https://www.inside-games.jp/article/2014/09/11/80449.html)
* [UnityとCocos2d-x比較してみた | ぷらすぜろ。～開発ブログ～](http://pluszero.wp.xdomain.jp/unity-cocos2d-x/)


## 書籍系
* [cocos2d-xではじめるスマートフォンゲーム開発 [cocos2d-x Ver.3対応] for iOS/Android](https://www.amazon.co.jp/cocos2d-x%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA-cocos2d-x-Ver-3%E5%AF%BE%E5%BF%9C-iOS-Android/dp/4774170550/ref=sr_1_1?ie=UTF8&qid=1497775289&sr=8-1&keywords=cocos2d-x)
* [はじめてでもよくわかる! Cocos2d-xゲーム開発集中講義](https://www.amazon.co.jp/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%A7%E3%82%82%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8B-Cocos2d-x%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA%E9%9B%86%E4%B8%AD%E8%AC%9B%E7%BE%A9-%E8%A5%BF%E7%94%B0-%E5%AF%9B%E8%BC%94/dp/4839954909/ref=sr_1_2?ie=UTF8&qid=1497775289&sr=8-2&keywords=cocos2d-x)
* [Cocos2d-xスマートフォン2Dゲーム開発講座 Cocos2d-x 3対応 (Smart Game Developer)](https://www.amazon.co.jp/Cocos2d-x%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B32D%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA%E8%AC%9B%E5%BA%A7-Cocos2d-x-Smart-Game-Developer/dp/4798136050/ref=sr_1_3?ie=UTF8&qid=1497775289&sr=8-3&keywords=cocos2d-x)

## リンク系
* [Cocos2d-x v3.x 開発するための情報一覧](https://iscene.jimdo.com/2015/01/30/cocos2d-x-v3-2/)
Omiseで決済フォーム出現ボタンを任意の位置に表示させる方法

４ヶ月ぶりのQiita記事投稿ですが小ネタです。
[当協会](http://www.piano.or.jp)ではWebpayから[Omise](https://www.omise.co/ja)に決済システムを移行中です。

iframeを使い外部ドメインで生成した決済フォームを出すことで、
こちらではトークン以外一切カードの情報を保存させないOmise.jsを使っています。
これは、formタグの中に以下のようなタグを書くだけで良いというお手軽なものなのです。

```html
<script type="text/javascript" src="https://cdn2.omise.co/omise.js"
                    data-key="<%= ENV['MEMBER_SHOP_PUBLIC_KEY'] -%>"
                    data-frame-label="ほげ"
                    data-button-label="決済"
                    data-submit-label="決済実行"
                    data-amount=<%= sum_price %>
                    data-currency="jpy"
                    data-locale="ja"
                    >
            </script>
```

しかし、必ずformタグ配下の一番下に「決済」ボタンが出現してしまい、意図したところで出すことが出来ません。
そこで、data-id="omise-button"を付け加え、$('button[data-id = "omise-button"]')
としてやることでjqueryオブジェクトとして如何ようにも料理することが出来ます。

今回は、scriptタグがある部分の直下に置きたかったので、以下のように、insertAfterを使い、DOM要素を移動させました。

```js
$(document).ready(function(){
  $('button[data-id = "omise-button"]').insertAfter('script[data-id="omise-button"]');
});
```

jQueryのDOM移動、結構使っていない便利なものがあるので積極的に使っていきたいです。（あまり多用するならJSフレームワークを使うべきかもしれません。）