OmniAICreator/Qiita-1.07M huggingface dataset:
php - MySQLであなたが気づかないうちにこっそり文字化けしてるかもしれない話

# 概要
自分の作ったWebサイト上で文字化けしていたら、もちろんいろんな対処をすると思いますが、php-MySQLを使ったサイトにおいて全く文字化けしている文字は画面上に見えないけど実は内部で文字化けしてるという状況があります

あまりこのことについて書いてある情報がないようですし、私より何倍もベテランのプログラマの方が間違えていたこともあったので、ここにシェアします

「私はPHP側での文字コード設定も、MySQL側での文字コード設定も、テーブルの文字コード設定もちゃんとしてます」
という方には関係のない話です
「文字コードの設定は細かく気にしたことないけど、ちゃんと文字化けしてないことは確認したよ」
という方や
「MySQLの文字コードなんて、テーブルの文字コードをUTF8にしておけば、あとは適当で大丈夫だよ」（←実際こう言われたことがある）
という方は要注意だと思います

# 確認方法
my.cnfの中の[mysql]と[client]の下にそれぞれ
```default-character-set=utf8```
[mysqld]の下に
```character_set_server=utf8```
と設定してから、MySQLコマンドラインインターフェイスを使ってSELECT文で日本語のフィールドを参照してください
文字化けしていればたぶんアウトです
「日本語」という文字列が入っている場所が「æ—¥æœ¬èªž」となっていたりしたらまず間違いないです
たとえブラウザ上で見る限りなんの問題もなくても、内部では文字化けしていると思います
後述の理由によりphpMyAdminなどでの確認ではダメです、MySQLコマンドラインインターフェイスを使ってください

# なぜ気づかないか
例えば漢字の「日」という字をUTF8でエンコードすると16進数表記で「e697a5」になります、文字コードの設定が正しくないためこれをlatin1だと解釈するとlatin1は1バイト文字なので、「e6」「97」「a5」という三文字だと認識します
具体的には「æ」「—」「¥」です
で、テーブルの文字コードがUTF8であればこの3文字をユニコード文字だと認識して、UTF8にエンコードして保存しますから「c3a6 e28094 c2a5」というふうに格納されます
バイナリエディタでMYDファイルの中身を見てみると確認することができます（MyISAM形式の場合）
ここまではいわゆる普通の文字化けですが、同じ設定のphpにおいてこのデータベースを読むとこのステップを逆にたどって結局正しい日本語が表示されてしまうのです
コマンドラインインターフェイスからも、設定によっては正しく表示されてしまいます
そうなると文字化けした文字自体を目にすることはありません
逆に言えば文字化けしていても、あまり問題がないと言えばないのですが、全ての文字が可逆的に文字化けするとも限らないでしょうし、データ量も増えますし、気持ち悪いですからなおしたほうがいいと思います

# 解決方法
正しく文字コードを設定してください

MySQL側の文字コード設定は普通にいろんなところに書いてあると思いますので省略します
```SHOW VARIABLES LIKE 'char%';```
として

| Variable_name            | Value                      |
|--------------------------|----------------------------|
| character_set_client     | utf8                       | 
| character_set_connection | utf8                       | 
| character_set_database   | utf8                       | 
| character_set_filesystem | binary                     | 
| character_set_results    | utf8                       | 
| character_set_server     | utf8                       | 
| character_set_system     | utf8                       | 
| character_sets_dir       | /usr/share/mysql/charsets/ |
 
こうなっていれば多分大丈夫でしょう
OSで使ってる文字コードによって一部違うかもしれません

PHP側の設定は以下のリンクなどを参照してください
[PHPでデータベースに接続するときのまとめ](http://qiita.com/mpyw/items/b00b72c5c95aac573b71)

データベースの文字コード設定は上記の設定が終わったあとに作ったものであれば自然にUTF8になっていると思いますが、以前につくったもので文字コードが違う場合は
```ALTER DATABASE <database_name> DEFAULT CHARACTER SET utf8;```
となおしておくといいと思います

すでに文字化けしたデータが大量に入ったテーブルがある場合は、コマンド一発では直らないと思います
phpスクリプトの中でふたつデータベースの接続を用意して、間違っている設定（今までの設定）で吸い出し、正しい設定で書きこめば修正できます
Windows: VSCode を Git bash から起動

#背景と目的

自分の Windows マシンに [Visual Studio Code](https://code.visualstudio.com/) を入れてみた。
で、自分はいままで、普段の開発は Sublime Text と Git bash を使っていて、エディタでファイルを開くときは

```bash
$ subl my-sugoi.ts
```
のように `subl` を叩いていた。普通ですね。

ところが、Windows 版 VSCode でこれと同等なコマンドは、なぜか

```bat
C:\Users\%YOU%\AppData\Local\Code\bin\code.cmd
```

というバッチファイルになっていて、Git bash からこれを叩くと見事にこける。
これをなんとかしたい、というのが目的。

#方針

幸い、`code.cmd` は 中身は2行だけのうっすいラッパーなので:

```bat
$ cat /c/Users/%YOU%/AppData/Local/Code/bin/code.cmd 
@echo off
"%~dp0\..\Update.exe" --processStart Code.exe -a="%*"
```
やっていることを bash に翻訳してやる。
翻訳したスクリプトは、元と同じフォルダに

```bat
C:\Users\%YOU%\AppData\Local\Code\bin\code
```
という名前で置くことにする:

```bash
$ vi /c/Users/%YOU%/AppData/Local/Code/bin/code
```
中身は↓の通り:

```bash
#!/bin/bash

pushd `dirname $0` > /dev/null
SCRIPTDIR=`pwd`
popd > /dev/null
"$SCRIPTDIR/../Update.exe" --processStart Code.exe -a="$*"
``` 
これで、`subl` を `code` に置き換えて:

```bash
$ code my-sugoi.ts
```
で「大体同じ使い勝手」にできるので、UX() をそれほど変えずに移行できる...かもしれない。
２つの配列をマージする拡張メソッド

※コメントにもありますがConcatの存在を知らずに書きました。素直にConcatを使う方が良いと思います;-)

```csharp:extensions.cs
	public static T[] Merge<T>(this T[] sourceArray1, T[] sourceArray2) {
		var mergedArray = new T[sourceArray1.Length + sourceArray2.Length];
		sourceArray1.CopyTo (mergedArray, 0);
		sourceArray2.CopyTo (mergedArray, sourceArray1.Length);
		return mergedArray;
	}
```

使い方

```
var arr1 = new string[] {"hoge", "fuga"};
var arr2 = new string[] {"moge", "piyo"};

var merged = arr1.Merge(arr2);
// => {"hoge", "fuga", "moge", "piyo"}
```
レスポンシブWebデザインの5つのレイアウトパターン


## ほぼ可変デザイン [ Mostly fluid ]


* 可変前提のデザイン
* フルードグリッドやフルードイメージを活用し、ブレークポイントによって要素が拡大縮小する
* 大きな画面サイズでは複数の段組みになるが、モバイルサイズでは1カラムで縦に並ぶ

ほぼ可変デザイン:
 ![Qiita](http://i.imgur.com/DTNkNCd.jpg "Qiita")

参考サイト：
[5D Institute](http://mediaqueri.es/fdi/)
[Todo MVC](http://mediaqueri.es/mvc/)
[Tilde](http://mediaqueri.es/tde/)


## レイアウトを変更するデザイン [ Column drop ]

* マルカラムレイアウトで始まりシングルカラムレイアウトで終わるパターン
* 画面幅が狭くなるほど、カラムが落ちていく
* ブレークポイントによってサイズを変えるので、ブレークポイントが多く必要になるのも特徴の1つ

カラムを落とすデザイン:
 ![Qiita](http://i.imgur.com/DTNkNCd.jpg "Qiita")

参考サイト：
[Responsice Patterns](http://codepen.io/bradfrost/full/zhCwd)
[TIME](http://mediaqueri.es/ti/)
[The Great Discontent](http://mediaqueri.es/tgd/)
[ISO](http://mediaqueri.es/iso/)


## レイアウトを変更するデザイン [ Layout shifter ]

* サイズに合わせて単にカラムが落ちるだけでなく、それぞれの画面サイズに対してレイアウトが調整される

レイアウトを変更するデザイン: 
![Qiita](http://i.imgur.com/IsAAW2f.jpg "Qiita")


ポイントを纏めました。


参考サイト：
[Responsive Patterns](http://codepen.io/bradfrost/full/LtryA)
[The Next Web](http://mediaqueri.es/tnw/)
[Paid to Exist](http://mediaqueri.es/pte/)
[Cantina Dorigati](http://mediaqueri.es/cad/)


## 1カラムベースのデザイン [ Tiny tweadks ]

* モバイルファーストの考え方が色濃く出ているデザインパターン
* シングルカラムのみのデザイン

1カラムベースのデザイン: ![Qiita](http://i.imgur.com/t2ldXRw.jpg "Qiita")

参考サイト：
[Responsive Patterns](http://codepen.io/bradfrost/full/brjFH)
[Lycos](http://mediaqueri.es/lyc/)


## 見えない領域を使うデザイン [ Off canvas ]

* ブラウザサイズが大きい場合はすべて表示されているが、小さくなった場合、サイドバーやナビゲーションなど一部の情報が隠れる
* 隠れた情報はクリックやフリックをすると現れるなど、別の手段でアクセスできる

見えない領域を使うデザイン:
 ![Qiita](http://i.imgur.com/7L5bWM4.jpg "Qiita")

参考サイト：
[Responsive Patterns](http://codepen.io/bradfrost/full/sHvaz)
[British Vogue](http://mediaqueri.es/vuk/)


## 参考書籍
参考：画像は書籍「レスポンシブWebデザインテクニックブック」より
Vert.x 3入門 〜 HelloWorldVerticle

[Vert.x](http://vert-x3.github.io/)とは、公式ページより

> JVM上にリアクティブアプリケーションを構築するためのツールキットです


[@timfox](https://twitter.com/timfox)氏が中心となって、[現在2015年6月22日を目標](https://github.com/vert-x3/wiki/wiki/Vert.x-Roadmap#vertx-300-final-release-22-june-2015)にversion 3が開発されています。この投稿含め何回かに分けてVert.x 3の動くサンプルを実装していこうと思います。


# 概要

今回は、今後のVert.xプロジェクトのひな形になる、「Hello, World!」を表示するWebサーバを動かしてみます。

# 前提

Vert.x 3はJava 8が必須となります、あらかじめJava 8をインストールしておいてください。Java 8がインストールできているかは以下コマンドで確認できます:

```bash
$ java -version
java version "1.8.0_45"
Java(TM) SE Runtime Environment (build 1.8.0_45-b14)
Java HotSpot(TM) 64-Bit Server VM (build 25.45-b02, mixed mode)
```

また、IntelliJを前提に解説しています、Eclipse等他のIDEの場合適宜読み替えてください。

# 手順

## ひな形のクローン

まずひな形となるプロジェクトをクローンします。

```bash
$ git clone https://github.com/p-baleine/vertx-gradle-template.git hello-world-verticl
$ cd hello-world-verticl
$ git remote rm origin # origin削除
```

## IntelliJでインポート

IntelliJを起動します。

既存のプロジェクトでIntelliJが起動した場合、一度[File]→[Close project]でIntelliJのWelcomeダイアログに戻ります。

IntelliJのWelcomeダイアログで[Import Project]を選択します。

![スクリーンショット 2015-05-01 10.51.47.png](https://qiita-image-store.s3.amazonaws.com/0/14712/bed7b008-accb-988a-5b88-87033b67f9c8.png)

先ほどクローンしてできたディレクトリ(hello-world-verticle)を選択しますて[OK]を選択します。

![スクリーンショット 2015-05-01 10.32.39.png](https://qiita-image-store.s3.amazonaws.com/0/14712/427861d7-54bf-b3da-0a04-8dbb8fcae4ff.png)


Import Projectのダイアログで、[Import project from external model]にチェックを入れて、[Gradle]を選択し[Next]をクリックします。

![スクリーンショット 2015-05-01 10.33.01.png](https://qiita-image-store.s3.amazonaws.com/0/14712/de44480f-efa0-5823-b8b2-d757473a7f5c.png)

さらに[Finish]をクリックします。

![スクリーンショット 2015-05-01 10.33.16.png](https://qiita-image-store.s3.amazonaws.com/0/14712/9cab4d5a-ced6-8e4c-b558-27f2972d0893.png)


## アプリの起動

IntelliJの[Run]→[Edit Configurations...]を選択します。

![スクリーンショット 2015-05-01 10.34.03.png](https://qiita-image-store.s3.amazonaws.com/0/14712/088e10ef-1bba-9f1c-cc0b-eceb220efa36.png)


Run/Debug Configurationsダイアログで[+]→[Application]を選択します。

![スクリーンショット 2015-05-01 10.34.51.png](https://qiita-image-store.s3.amazonaws.com/0/14712/3994293b-bf48-614a-f32c-ae627995d4bc.png)


以下の通り入力して、[OK]をクリックします:

* Name: HelloWorldVerticle
* Main classs: io.vertx.core.Starter
* Program arguments: run com.example.helloworld.HelloWorldVerticle

![スクリーンショット 2015-05-01 10.35.33.png](https://qiita-image-store.s3.amazonaws.com/0/14712/bcd39297-1f1a-0f72-6483-94723ddfbfe1.png)


IntelliJの[Run]→[Run 'HelloWorldVerticle']を選択します、IntelliJ上のコンソールで、エラーなく起動することを確認します。

![スクリーンショット 2015-05-01 10.36.01.png](https://qiita-image-store.s3.amazonaws.com/0/14712/27cf160b-9673-5b42-0306-5d1a6205b699.png)


## 確認

ブラウザで http://loclahost:8080 にアクセスして「Hello, World!」が表示されることを確認します。

# 解説

`src/main/java/com/example/helloworld/HelloWorldVerticle.java`は`AbstractVerticle`を継承した`Verticle`です。Vert.xでは`Vert.x`が`Verticle`(今回の場合は`HelloWorldVerticle`)を実行することでアプリケーションが実行されます。(Vert.x自体を組み込む実装も可能です)

アプリケーションはひとつ以上の`Verticle`で構成することができます。複数の`Verticle`を用いたアプリケーションの構築については、引き続く投稿で解説します。

# こちらもどうぞ

* [Vert.x 3入門 〜 Webアプリケーションフレームワーク Apex](http://qiita.com/p-baleine@github/items/d9975dad4e44987b48c8)
gitWatch > [i]を.shift()に変更して同じなのか?

https://github.com/mrdoob/three.js/commit/2f36e6a1dbc382c9e7f5bc7edab8cfc41df38fe0?diff=unified

```Script.js
for ( var i = 0; i < widgets.length; i ++ ) {
  codemirror.removeLineWidget( widgets[ i ] );
}
```
上記を下記のように変更している。

```Script.js
while ( widgets.length > 0 ) {
  codemirror.removeLineWidget( widgets.shift() );
} 			
```

気になるのはwidgets.shift()がどの時点で実行されるか?
removeLineWidget()の処理が済んでから.shift()が実行されるのか。
removeLineWidget()の処理を始める前に.shift()が実行されるのか?

このあたり言語規格で明快に決まっているのだろうか?
Wiki記法メモ


## リンク

```
[[Page]]
[[Page|alias]]
[[otherProject:page]]
```

```
document#17
document:Title
```

```
version#3
version:1.0.0
```

```
attachment:file.zip
```

```
http://www.redmine.org
"Redmine":http://www.redmine.org
```


## 目次

```
{{toc}} => 目次（左寄せ）
{{>toc}} => 目次（右寄せ）
```


## コードハイライト

```
<pre><code class="ruby">
# ソースコード
</code></pre>
```
【iOS】アプリに各アクセス権限が付与されているか確認する方法


備忘録代わりに書きます。

カメラ、カメラロール、マイク、プッシュ通知の４つです

## カメラ

`AVFoundation`を使います。

```swift
import AVFoundation

let status = AVCaptureDevice.authorizationStatusForMediaType(AVMediaTypeVideo)

if status == AVAuthorizationStatus.Authorized {
	// アクセス許可あり
} else if status == AVAuthorizationStatus.Restricted {
	// ユーザー自身にカメラへのアクセスが許可されていない
} else if status == AVAuthorizationStatus.NotDetermined {
	// まだアクセス許可を聞いていない
} else if status == AVAuthorizationStatus.Denied {
	// アクセス許可されていない
}
```

## マイク

カメラと一緒です。

`AVMediaType`が`Video`か`Audio`かの違いになります。

```swift
import AVFoundation

let status = AVCaptureDevice.authorizationStatusForMediaType(AVMediaTypeAudio)

if status == AVAuthorizationStatus.Authorized {
	// アクセス許可あり
} else if status == AVAuthorizationStatus.Restricted {
	// ユーザー自身にカメラへのアクセスが許可されていない
} else if status == AVAuthorizationStatus.NotDetermined {
	// まだアクセス許可を聞いていない
} else if status == AVAuthorizationStatus.Denied {
	// アクセス許可されていない
}
```

## カメラロール

`AssetsLibrary`を使います。

```swift
import AssetsLibrary

let status = ALAssetsLibrary.authorizationStatus()
if status == ALAuthorizationStatus.Authorized {
	// アクセス許可あり
} else if status == ALAuthorizationStatus.Restricted {
	// ユーザー自身にカメラへのアクセスが許可されていない
} else if status == ALAuthorizationStatus.NotDetermined {
	// まだアクセス許可を聞いていない
} else if status == ALAuthorizationStatus.Denied {
	// アクセス許可されていない
}
```

## Push通知

これは **iOS7** と **iOS8** で対応方法が変わります。

```swift
// iOS7の場合
let remoteNotificationType: UIRemoteNotificationType = UIApplication.sharedApplication().enabledRemoteNotificationTypes()

// Noneじゃなかったら許可あり
let isAuthorization = (remoteNotificationType != UIRemoteNotificationType.None)

// iOS8の場合
UIApplication.sharedApplication().isRegisteredForRemoteNotifications()

```

となります。

ちなみに`UIRemoteNotificationType`は以下のような

>
> ```swift
> struct UIRemoteNotificationType : RawOptionSetType {
>     init(_ rawValue: UInt)
>     init(rawValue rawValue: UInt)
>     static var None: UIRemoteNotificationType { get }
>     static var Badge: UIRemoteNotificationType { get }
>     static var Sound: UIRemoteNotificationType { get }
>     static var Alert: UIRemoteNotificationType { get }
>     static var NewsstandContentAvailability: UIRemoteNotificationType { get }
> }
> ```
>

という構造体になります。

以上です。
gitWatch > Viewing機能対応のファイルを知る

GitHubにて.STLという3Dファイルが表示されるようになっていたのを知った。

他のファイルはどうだろうかと調べる方法は以下でできそう。
1. https://github.com/blog へ行く
2. 右上の検索キーワードで「File」「Viewing」で検索
3. PDF Viewingのようにアナウンスが表示される。

PDF, PSD, STLなどが対応されているようだ。

https://help.github.com/categories/working-with-non-code-files/
にも対応ファイルが掲載されている。

CSVも読めるとのこと。
ATOMの全角スペースプラグイン「show-ideographic-space」の設定

# はじめに

[show-ideographic-space](https://github.com/raccy/show-ideographic-space)は、全角スペースを可視化しているプラグインです。
`Show Invisibles`の場所がわからなかったためスクリーンショットをつけました。

# 設定

![Settings_-__Users_innova_Documents_work_innova_phoenix_-_Atom_と_顧客___Phoenix.png](https://qiita-image-store.s3.amazonaws.com/0/2432/37a3f88e-4ced-b90d-d01e-2a9fa6ffd4b3.png)

# 確認
![untitled_-_Atom.png](https://qiita-image-store.s3.amazonaws.com/0/2432/eab8f6db-ddf2-b997-24b6-17a036d4ecc6.png)
mixinってなんなのさ

# Mixinとは？

ruby初心者ですが、rubyやってる人が「mixinおもしろいよ！使い方間違えると大変なことになるけどw」とか言ってるの聞いて気になったので調べてみた。


> ~~mixin とはオブジェクト指向プログラミング言語において、サブクラスによって継承されることにより機能を提供し、単体で動作することを意図しないクラスである。~~
[参照] http://ja.wikipedia.org/wiki/Mixin
(Rubyでは当てはまらないとの指摘を受けたので取り消しておきます)


お、おう。

なんとなくは分かった気になるけど、どういう動作するんだろう？？？

ということでやってみる。

# 参考
[Rubyのmoduleをmix-inする際のincludeとextendの違いをシンプルな例で理解する](http://memo.yomukaku.net/entries/319)（ほぼそのまま実践させていただきました）

# ソース

## mixin するモジュール

```ruby:my_module.rb
# my_modlue.rb
# coding:utf-8

module MyModule
    def self.my_class_method
        puts 'my_class_method!'
    end 

    def my_method
        puts 'my_method'
    end 
end
```

## include でMixin

### ソース

```ruby:sample_include.rb
# coding:utf-8

require './my_module'

class SampleInclude
    include MyModule

    MyModule.my_class_method

    begin
        MyModule.my_method
    rescue Exception => e
        puts e
    end 
end

sample = SampleInclude.new

begin
    sample.my_class_method
rescue Exception => e
    puts e
end

sample.my_method
```

### 結果

>
% ruby sample_include.rb
my_class_method!
undefined method 'my_method' for MyModule:Module
undefined method 'my_class_method' for #<SampleInclude:0x007f1fca0d58b8>
my_method

## extend で Mixin

### ソース

```ruby:sample_extend.rb
# coding:utf-8

require './my_module.rb'

class SampleExtend
    extend MyModule

    MyModule.my_class_method

    begin
        MyModule.my_method
    rescue Exception => e
        puts e
    end

    self.my_method
end

begin
    SampleExtend.my_class_method
rescue Exception => e
    puts e
end

SampleExtend.my_method

sample = SampleExtend.new

begin
    sample.my_method
rescue Exception => e
    puts e
end

begin
    sample.my_class_method
rescue Exception => e
    puts e
end
```

### 結果

>
% ruby sample_extend.rb
my_class_method!
undefined method 'my_method' for MyModule:Module
my_method
undefined method 'my_class_method' for SampleExtend:Class
my_method
undefined method 'my_method' for #<SampleExtend:0x007f3809b62ba8>
undefined method 'my_class_method' for #<SampleExtend:0x007f3809b62ba8>

# まとめ？？？

当然といえば当然だが、includeとextendで使い方が変わる。
正確に理解したわけじゃない状態だけど、一旦まとめてみる。

## include での使い方？

Moduleの方で`self.my_class_method...`ってしてるからnewした後に使えないのかな？
Moduleから直接叩かないと動かない感じに見えます。
include で SampleIncludeクラスの中にメソッド展開してるけど、実際には Moduleに紐付いてるから外からは動かせないイメージ。。
`my_method`はその逆なイメージ。。

## extend での使い方？

継承だから Module に紐付いてるメソッドしか見えない感じなのかな？
だから紐付いてない`my_method`はどこからも見えてないイメージ。。


## 最後に

とりあえずなんとなく使うことはできるだろうけど、ちゃんと理解してないから効果的に使える自信がない。。。
いきなりmixinやろうとしたのもいけなかったかなぁ。。
いろいろやりながら覚えるしかなさそうですねw
DialogFragmentのボタンクリックをObservableにしたい(ただしKotlin)

## **(追記)**

この記事のコードはダイアログの再生成時に正常に動作しません。
特別な事情がない限り使用しないことをおすすめします。

## はじめに

タイトルの通りですが、DialogFragmentで生成したダイアログのボタンクリックをRxAndroid(RxJava)のObservableとして扱いたくていろいろ試した結果のメモ。

## Observableにしたいけど…

個人的な好みの問題だとは思いますがDialogFragmentを`show`したタイミングでObservableを返してほしいと思っています。
ただ、DialogFragmentにおいてダイアログ本体の生成は`onCreateDialog`で行っているため`show`のタイミングではダイアログは生成済みです。
このタイミングでダイアログにボタン＆クリックのリスナーを追加してもボタン自体が表示されません。
`show`の実装を見ると、自分自身をFragmentManagerに追加しているだけなので当然といえば当然ですが…


なので、`onCreateDialog`で生成したダイアログのボタンクリック時の動作を`show`するタイミングで置き換えることにしました。

## ObservableなDialogFragment(のダイアログ)

### DialogFragment側の実装

`show`の代わりに実行する`showObservableDialog`を実装します。
`onCreateDialog`の時点では、仮の何もしない関数を突っ込んでおいて`Observable.create`するタイミングで`onNext`等々を実行する関数に置き換えます。

```kotlin:LoginDialog
public class LoginDialog : DialogFragment() {

    private var mOnPositiveClick = { }
    private var mOnNegativeClick = { }

    fun showObservableDialog(manager: FragmentManager, tag: String?): Observable<Boolean> {
        super.show(manager, tag)
        return Observable.create<Boolean> {
            mOnPositiveClick = {
                it.onNext(true)
                it.onCompleted()
                this.dismiss()
            }
            mOnNegativeClick = {
                it.onCompleted()
                this.dismiss()
            }
        }.subscribeOn(AndroidSchedulers.mainThread())
    }

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog? {
        return AlertDialog.Builder(getActivity())
                .setTitle(R.string.login)
                .setMessage(R.string.login_message)
                .setPositiveButton(R.string.login, { dialog, witch -> mOnPositiveClick() })
                .setNegativeButton(R.string.cancel, { dialog, witch -> mOnNegativeClick() })
                .create()
    }
}
```

### 呼び出し側の実装

今回はこのダイアログが起点になるので、最初に`showObservableDialog`してログインボタンが押されたら続く処理を実行します。
ここではWebViewでOAuth認証してユーザ情報を取得しています。

```kotlin:AuthActivity
LoginDialog().showObservableDialog(getSupportFragmentManager(), null)
                .flatMap { retrieveRequestToken() }
                .flatMap { showLoginWebView(it) }
                .flatMap { retrieveAccessToken(it) }
                .flatMap { getUserInfo(it) }
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe (
                        { success -> this.finish() },
                        { error -> toast("Error!") } )
```

## おわり

面倒なことやってるけど、思ったよりすっきり書けた。
今回の例だとダイアログが起点なのでそこまでの利点は無いけど、処理の途中でダイアログが必要なときは役に立つと思う。

JavaだとInterface使えばやれそう？（試してない）
ADX2 LEを使おう その３

ここではCRIのファイルについて説明をしていく。

##ファイルの種類
- HCA
- ACF
- ACB
- AWB

###HCAについて
HCAファイルは、単一の音声ファイルである。
Waveファイルをから変換を行うことが可能。

###ACFについて
実際にゲーム開発でADX2を使う場合、「CriAtomCraft」というツールを使用する。
ACFファイルは、「CriAtomCraft」を用いてプロジェクトを生成してコンバートした際に出力される
共通情報を格納しているファイルである。

###ACBについて
ACBファイルは、「CriAtomCraft」でコンバートした際に出力されるHCAのパッキングファイルである。
ただし、設定されている音がストリーミング再生の場合、音声の実データはAWBファイルに入る。

###AWBについて
ストリーミングデータが格納されているファイルである。
ACBファイルを出力した際に、ACBの中にストリーミング設定になっているデータがある場合
ACBと一緒に同名のAWBファイルが出力される。


##実際のゲームで用意するファイル
- 共通設定のACF
- BGMをパックしたACBとAWB
- SEをパックしたACB
- VOICEをパックしたACBとAWB(キャラごとにACBとAWBを用意する)

[その４](http://qiita.com/sawasaka/items/4ebc47d6b7f4d2f3a0d1)へ続く
[Yahoo!ショッピングAPI] 注文に関するAPI 詳細なエラーコードについて

この度、以下のAPIを商用利用するにあたり、エラーコードについて質問させて下さい。

**注文に関するAPI**

* 注文ステータス別件数参照
* 注文検索API
* 注文詳細API
* 注文ステータス変更API
* 注文内容変更API

[エラーメッセージおよびコード](http://developer.yahoo.co.jp/appendix/errors.html) のページには、HTTPステータスコード別に、
以下のような内容の共通エラーが返ってくると記載されています。

|    コード    |    説明     |
|:-----------:|:------|
|400|Bad request. 渡されたパラメータがWeb APIで期待されたものと一致しない場合に返されます。このメッセージは何が間違っているか、何が正しくないかを伝えます。                       |
|401|Unauthorized. 許可されていないアクセスであった場合に返されます。                         |
|403|Forbidden. リソースへのアクセスを許されていないか、利用制限を超えている場合に適用されます。 |
|404|Not Found. 指定されたリソースが見つからない場合に返されます。| 
|500|Internal Server Error. 内部的な問題によってデータを返すことができない場合に返されます。|
|503|Service unavailable. 内部的な問題によってデータを返すことができない場合に返されます。|

また、例として注文検索APIの固有のエラーコードは以下の通りになっています。

|コード|HTTPステータスコード|説明|
|:-----------:|:------------:|:------------|
|od90101|400|リクエストパラメータエラーです。|
|od91801|404|注文ID FromTo検索において、存在しない注文IDが指定された場合です。備考　Detailへ存在しない注文IDを,区切りで返します。|
|od91133|500|BuyerIdのパラメータエラーです。|
|od91001|500|サーバトラブル等です。|


注文検索APIはYahoo!IDによる認可が必要なAPIになりますので、わざと認可を外した
（「Yahoo!Japan>各アプリケーション上でのお客様情報の利用について」画面で「無効にする」をクリック）
状態でAPIをアクセスすると、以下のようなエラーが返ります。

```<?xml version='1.0' encoding='UTF-8' ?>
<Error><Message>Use of API is not permitted.</Message>
<Code>px-04307</Code>
</Error>```

このエラーが返った場合のHTTPステータスコードが403になるのですが、
HTTPステータスコードだけで判断すると
「Forbidden. リソースへのアクセスを許されていないか、利用制限を超えている場合に適用されます。」
となり、前者（リソースへのアクセスが許可されていない）ならばユーザへアラートを出すことも出来ますが
後者（利用制限を超えている）ならばユーザに知らせる意味の無いエラーとなってしまいますので
両者を区別したいと考えています。

また、複数店舗を運営しているユーザ企業の場合、ストアクリエイターProの「3:注文管理権限」の無いビジネスIDに紐付いた
Yahoo!IDで認可すると、APIアクセス時に以下のエラーコードが返ってきます。

```<?xml version='1.0' encoding='UTF-8' ?>
<Error>
<Message>Use of API is not permitted. </Message>
<Code>px-14303</Code>
</Error>```

px-04307、px-14303は全く同じメッセージですが、ユーザの対応方法が異なりますので、
対応方法を案内する場合、いずれのコードがどういったケースで返ってくるのか
という情報が必要になります。

当方の検索の仕方が悪ければ申し訳ありませんが、
"px-"から始まるエラーコードとそれらが返ってくる条件について、
詳細な対応表はどこかで確認できますでしょうか？
もしくは、エラーコードにルール等があらばご教授頂けますでしょうか。

よろしくお願いします。
WebRTCプラットフォーム tokboxのopentokを調べてみた(3) 通信経路編

## 今回は
<a href="http://qiita.com/massie_g/items/7b8eaf87f0a652973399" target="_blank">前回は利用料金の考え方について整理しました。</a>今回は裏側の通信経路について、推測交えて整理してみます。

## 勝手な思い込み
opentokが利用しているSFUでは、ユーザからみて上りの通信経路を1本に減らすことができます。なので、全体の通信経路も減ると思い込んでいました。opentokは全ての組み合わせを基準とした利用料金なので、SFUで減らした分の通信経路の差分で儲けているのだろう、と思い込んでいました。ところが、実際はそんな単純なものでは無いようです。

## Peer-to-Peer(P2P) の場合
4人が直接P2P接続していると、片方向ずつ数えると、12本の通信経路があることになります。
![4people_p2p.png](https://qiita-image-store.s3.amazonaws.com/0/19403/c4aef76a-f444-7f7b-9969-7c85033fcb37.png)

## SFUの場合
4人でSFUを使った場合、ユーザーから見ると上り1本＋下り3本での4本。4人なら16本になります。
![4people_sfu.png](https://qiita-image-store.s3.amazonaws.com/0/19403/bef58c97-f9a8-6f3a-2cfa-e8bdb6523d33.png)

あれ！？ P2Pの場合より通信経路が増えています。冷静に考えれば当たり前ですが、opentokはここで儲けているわけではないのですね。

## TURN利用の場合
もう少し考えてみると、opentokはTURNサーバーも提供しています。TURNのみ使った場合を考えてみましょう。TURNサーバへの上り/下りを区別すると、P2Pの倍の24本となります。
![4people_turn.png](https://qiita-image-store.s3.amazonaws.com/0/19403/b9d6aef0-0a54-bc86-1ae0-ffda80811c28.png)

## TURN+SFUの場合
最後に、TURNとSFUを組み合わせた場合です。外部16本、内部(TURNとSFUの間)16本となり、コストのかかる外部との通信はTURNの場合よりも減らせます。
![4people_turn_sfu.png](https://qiita-image-store.s3.amazonaws.com/0/19403/b0d487ac-09af-577a-199d-9a367a32f924.png)

どうやらここまで考えると、SFUによってTURNサーバーの負荷と通信を減らすことができるようです。

## 次回は
次回は実際にサンプルを動かしてみて分かったことについて書いてみたいと思います。

## 記事一覧
* <a href="http://qiita.com/massie_g/items/dc6615799ef65ab1a6e4" target="_blank">WebRTCプラットフォーム tokboxのopentokを調べてみた(1) 基礎編</a>
* <a href="http://qiita.com/massie_g/items/7b8eaf87f0a652973399" target="_blank">WebRTCプラットフォーム tokboxのopentokを調べてみた(2) 利用料金編</a>
* <a href="http://qiita.com/massie_g/items/77f6916b70a3e21a3cb0" target="_blank">WebRTCプラットフォーム tokboxのopentokを調べてみた(3) 通信経路編</a>
* <a href="http://qiita.com/massie_g/items/af3ee666969b41293478" target="_blank">WebRTCプラットフォーム tokboxのopentokを調べてみた(4) PeerConnection編</a>
Knockoutjs の with の代わりに template も使える子です

# with と template と foreach

with/foreachはコンテキストが切り替わるからhtmlがカオスになりがち。

* 今のコンテキスト（$data）はなんだ？
* $rootから再度ツリーを参照しまくったり。

# 例

```js:適当なviewmodel
var vm = {
    book:{
        title:"ハイキュー!!",
        reviews:[
            {review:"16巻でた！"},
            {review:"熱い！"},
            {review:"かっこいい!!"}
        ]
    }
}
// ko.applyBindings(vm, document.getElementById("container"));
```

こんな感じに表示する（ダサい…）
![image](https://qiita-image-store.s3.amazonaws.com/0/28895/c4453468-d0fd-3e1a-28cf-b0bad544afb5.png)


## withを使った場合

foreachのせいでwithの恩恵は1回しか得られない

```html:withを使った場合
<div id="container">
    <div data-bind="with:book">
        <div data-bind="text:title"></div>
        <ul data-bind="foreach:{data:reviews, as:'review'}">
            <li data-bind="text:$root.book.title + review"/>
        </ul>
    </div>    
</div>
```


## templateを使った場合

bookを変数を取り置ける

```html:templateを使った場合
<div id="container">
    <div data-bind="template:{data:book, as:'book'}">
        <div data-bind="text:title"></div>
        <ul data-bind="foreach:{data:reviews, as:'review'}">
            <li data-bind="text:book.title + review"/>
        </ul>
    </div>
</div>
```

# 注意

## templateはundefinedでも動く(!)

```html:チェック
<!-- ko if:book -->
〜template〜
<!-- /ko -->
```
で囲うとか必要っぽい。


# 総括

適宜使い分けよう
android:gravity="right"で右端によらなかった問題

ぱっとみしょうもないことでつまづいたので、記事にしてみました

androidのUIの実装でTextViewをよしなに配置しようとandroid:gravityを使おうとしたところ、
右によること無く左寄せで配置された（"ほげほげ"は左寄せ、"削除"は右寄せにしたい）。

![スクリーンショット 2015-05-01 11.13.58.png](https://qiita-image-store.s3.amazonaws.com/0/73973/d6aa0956-b14c-9c8d-aaa5-20864da064e6.png "スクリーンショット 2015-05-01 11.13.58.png")

コードはこんな感じです。

```
       <LinearLayout
            android:orientation="horizontal"
            android:layout_width="320dp"
            android:layout_height="30dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#ffffff"
                android:text="ほげほげ"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:textColor="#ffffff"
                android:text="削除" />

        </LinearLayout>
```

結論から行ってしまうとandroid:width="wrap_content"で指定していたのが原因。
これを"fill_parent"に直すとうまくいった。

![スクリーンショット 2015-05-01 11.13.20.png](https://qiita-image-store.s3.amazonaws.com/0/73973/df92f0f3-8da1-4bab-e5d9-a3c46ceeecda.png "スクリーンショット 2015-05-01 11.13.20.png")


理由としてはwrap_contentだとTextViewは文字の大きさ分の領域しか認識しないため、gravityで文字そのものの位置を決める空間(?)が存在しないので右寄せが適用されなかった。

![スクリーンショット 2015-05-01 11.21.55.png](https://qiita-image-store.s3.amazonaws.com/0/73973/3f7defa1-dbce-23bf-e097-6132480fdc81.png "スクリーンショット 2015-05-01 11.21.55.png")


しかし、fill_contentにすると、TextViewが認識する領域は親コンテンツの横幅すべての範囲を認識するため右寄せが可能になるようだ。

![スクリーンショット 2015-05-01 11.23.37.png](https://qiita-image-store.s3.amazonaws.com/0/73973/8e49ce97-98e5-90ff-10ed-2351c2985468.png "スクリーンショット 2015-05-01 11.23.37.png")
いっちがCapybara RSpec turnipを利用してエンドツーエンドを始めるまでの軌跡

## 実行環境
Mac OSX 10.9.4

## 使うツール & gem
1. Capybara
2. RSpec
3. Turnip
4. Selenium

## 動かすまでに困った事

### Xcodeのコマンドラインツールが古くてbundle installが失敗

```shell:shell
// コマンドラインツールをインストール
$ xcode-select --install
```

### QtがインストールされていなくてCapybara-webkitがgem installできない

```shell:shell
// Qtをインストール
$ brew update
$ brew install qt
```

## テスト内容
example.comにアクセスして、HTMLに「Example Domain」という文字列が含まれていればテスト成功

### 必要なgemをインストール

```ruby:Gemfile
source "https://rubygems.org"

gem 'rake', '10.4.0' # rakeコマンド使ってテスト実行したい人
gem 'rspec', '~> 3.2.0'
gem 'capybara', '2.4.4' # テストフレームワーク
gem 'capybara-webkit' # capybaraでjsをテスト可能にする
gem 'poltergeist', '1.5.1'
gem 'turnip' # 日本語でテストケース記述できる粋なやつ
gem 'selenium-webdriver'
```
実行

```shell:shell
bundle install --path vendor/bundle`
```

### specファイルを作成

```shell:shell
bundle exec rspec --init
```

```ruby:.rspec
--color
-r turnip/rspec
```

```ruby:spec/spec_helper
require 'rubygems'
require 'bundler/setup'
require 'rspec'
require 'capybara'
require 'capybara/webkit'
require 'capybara/rspec'
require 'capybara/poltergeist'
require 'turnip'
require 'turnip/capybara'
require 'selenium/webdriver'

RSpec.configure do |config|
end

Capybara.register_driver :selenium do |app|
  profile = Selenium::WebDriver::Firefox::Profile.new
  ua = 'Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25'
  profile["general.useragent.override"] = ua
  opts = { browser: :firefox, profile: profile }
  Capybara::Selenium::Driver.new app, opts
end

if (ENV['TARGET'].nil? || ENV['TARGET'] != 'poltergeist')
  Capybara.default_driver = :selenium
else
  Capybara.default_driver    = :poltergeist
  Capybara.javascript_driver = :poltergeist
end

Dir.glob("spec/**/*steps.rb") { |f| load f, true }
```

### テストケースのフューチャーを作成
featureとは日本語あるいは自然言語などのエンジニアではない人が見ても理解出来るレベルでのテストケースを作成
テストの中身はstepsの項目にて記述

spec/features ディレクトリを作成

```ruby:spec/features/example.feature
# encoding: utf-8
# language: ja
機能: ポータル画面からログイン
  シナリオ: トップページにアクセスしてログインする
    前提 hoge サイトにアクセスする
    もしトップページを表示する
    ならば 画面にExample Domainと表示されていること
```

### featuresで作成したテストケースの内容を作成

spec/steps ディレクトリを作成

```ruby:spec/steps/example_steps.rb
# encoding: utf-8

step 'hoge サイトにアクセスする' do
  Capybara.app_host = "http://example.com"
end

step 'トップページを表示する' do
  visit '/'
end

step '画面にExample Domainと表示されていること' do
  expect(page).to have_content('Example Domain')
end
```

### 実行

```shell:shell
# seleniumで実行
TARGET=selenium bundle exec rspec
# poltergeistで実行
TARGET=poltergeist bundle exec rspec
```

### 完成品はこちら

https://github.com/kkyouhei/my-e2e-test
設定ファイルをサッと開く

command pallet からも開けるが、keymap から開く方が早い。
覚えれば楽。

# Keymap

```coffeescript:keymap.cson
'atom-workspace:not([mini])':
  'ctrl-cmd-e i': 'application:open-your-init-script'
  'ctrl-cmd-e c': 'application:open-your-config'
  'ctrl-cmd-e k': 'application:open-your-keymap'
  'ctrl-cmd-e s': 'application:open-your-stylesheet'
```

# 使い方

`ctrl-cmd-e` 押した後

* i で init-script
* c で config
* k で keymap
* s で stylesheet
 
と頭文字で開くことができる。
Pane の作成、移動を素早く行う


`cmd-k`,  `cmd-right` とかのデフォルトのキーマップは、ちょっともたつく。
Vim の頃に設定していたキーマップは、`ctl` + `jkhl` で移動するというもの。

また、Pane の作成も One Action で出来るようにする

## Keymap

[vim-mode](https://github.com/atom/vim-mode) 前提

```coffeescript:keymap.cson
'atom-workspace:not([mini])':
  'cmd-2': 'pane:split-down'
  'cmd-3': 'pane:split-right'

'atom-text-editor.vim-mode.command-mode':
  'ctrl-j':      'window:focus-pane-below'
  'ctrl-k':      'window:focus-pane-above'
  'ctrl-h':      'window:focus-pane-on-left'
  'ctrl-l':      'window:focus-pane-on-right'
```

# 使い方

`atom-workspace` で

* `cmd-2` で下に
* `cmd-3` で右に
 
Pane を作り、

`vim-mode.command-mode` で

* `ctr-j` で下
* `ctr-k` で上
* `ctr-h` で左
* `ctr-l` で右
 
Pane に移動する。
【国内】IoTソリューション(デバイス) 

## コイン電池で年単位で使える無線タグ「TWE-Lite-2525(トワイライトニコニコ)」


![スクリーンショット 2015-05-01 11.13.06.png](https://qiita-image-store.s3.amazonaws.com/0/74972/8956e6bc-f779-c306-ea02-95efca28e4b6.png)

http://ascii.jp/elem/000/000/990/990536/


- IEEE802.4/ZigBeeによる小電力無線通信を行うモジュールを使用。
- 外付けの無線アンテナを用いれば1kmまで通信ができる。
- 加速度センサーは動き出し／停止／倒れ／タップ／落下といった動作を感知できる。
Dominoオブジェクトの基本セット

#Dominoオブジェクト取得までの基本セット

##実行環境の取得
```vbnet:getSessionAndWorkspace
	Dim ws As New NotesUIWorkspace
	Dim session As New NotesSession
```

##現在開いているアプリケーションの取得
```vbnet:getNotesApp
	Dim session As New NotesSession
	Dim db As NotesDatabase
	Set db = session.CurrentDatabase

```

##現在画面に開かれている文書の取得
* 画面に文書が表示されていない場合はuiDoc変数にNothingが代入される。

```vbnet:getCurrentDocument
	Dim ws As New NotesUIWorkspace
	Dim uiDoc As NotesUIDocument
	Set uiDoc = ws.CurrentDocument
```

##現在画面に開かれているビューの取得
* 画面に文書が表示されていない場合はuiView変数にNothingが代入される。

```vbnet:getCurrentDocument
	Dim ws As New NotesUIWorkspace
	Dim uiView As NotesUIView
	Set uiView = ws.CurrentView
```
fold を toggle する。

Fold を開く、閉じる、はあるけど、トグルする(開いていれば閉じる、閉じていれば開く)コマンドが無い。

[How to toggle current fold in editor view?](https://discuss.atom.io/t/how-to-toggle-current-fold-in-editor-view/11094) ~~から拝借~~を参考にシンプル化。
※ ↑のコメントによると Sublime Text にも toggle が無いようだ。
`toggleFoldAtBufferRow()` があるんだからコマンドとして predefined されていても良さそうなのに。。

```coffeescript:init.coffee
atom.commands.add 'atom-text-editor',
  'user:toggle-fold': (event) ->
    editor = @getModel()
    row = editor.getCursorBufferPosition().row
    editor.toggleFoldAtBufferRow(row)
```

[vim-mode](https://github.com/atom/vim-mode) 前提

```coffeescript:keymap.cson
'atom-text-editor.vim-mode.command-mode':
  'z a':         'user:toggle-fold'
  'cmd-z':       'user:toggle-fold'
```

# 使い方

* `za` で 切り替え( Vim のデフォルトのキーマップ )
* `cmd-z` でも切り替えできる。
WebRTCプラットフォーム tokboxのopentokを調べてみた(2) 利用料金編

## 今回は
<a href="http://qiita.com/massie_g/items/dc6615799ef65ab1a6e4" target="_blank">前回はopentokの基礎知識を整理しました。</a>今回は利用料についてもう少し掘り下げてみます。
出典はこちら：<a href="https://tokbox.com/pricing" target="_blank">tokbox.com/pricing</a>

## 基本の考え方
tokboxは通信時間に応じて課金されます。ここでは120円/ドルと想定して計算してみます。また、最大20%のボリュームディスカウントは、桁には影響ないため無視します。

* ユーザーA → ユーザーB に映像/音声を片方向で流す場合は、0.5セント/分
* ユーザーA ⇔ ユーザーB 双方向で映像/音声を流す場合には、1セント/分

つまり、通常のWeb会議として2人で使うなら、1セント/分、60セント/時間、72円/時間　かかる、という計算です。
![tokbox_price_11.png](https://qiita-image-store.s3.amazonaws.com/0/19403/40b10c17-4847-5969-2c59-64458d17a61b.png)

## 多人数の場合
### 片方向（配信）の場合
片方向の映像配信の場合、視聴している人数で課金されます。

* 例えば3人が視聴している場合は ×3。 1.5セント/分、90セント/時間、108円/時間

![tokbox_price_14.png](https://qiita-image-store.s3.amazonaws.com/0/19403/b7228a9d-cb90-0d9b-8fbd-fc84274e9ad6.png)

### 双方向（会議）の場合
多人数で双方向通話なら、すべての経路分の通信料がかかります。

* 例えば4人会議なら ×12。6セント/分、$3.6/時間、432円/時間

![tokbox_price_44.png](https://qiita-image-store.s3.amazonaws.com/0/19403/96ec655c-d4b7-a4cf-3ca0-cde14e5daa10.png)

## ケーススタディ
### (1) 2人のビデオチャット
* 100組のペアが、毎日30分通話するとする。月当たり900分/ペアの通話
* 全体では $900/月、108,000円/月の利用料

### (2) 4人の会議
* 4人のチームが100組、週当たり1時間、月4時間の会議を行う
* 通信経路は4C2 ×2 = 12
* 全体では $1,440/月、172,800円/月の利用料

### (3) 6人の会議
* 6人のチームが100組、週当たり1時間、月4時間の会議を行う
* 通信経路は6C2 ×2 = 30
* 全体では $3,600/月、432,000円/月の利用料

### (4) 100人のセミナー
* 100人が視聴するセミナーを、1回あたり2時間、月10回行う
* 全体では $600/月、72,000円/月の利用料

こうしてみると、同時に参加する人数が多い会議は、やっぱり費用がかかります。

## 録画の場合
opentokでは録画の機能も提供されています。
出典：<a href="https://tokbox.com/platform/archiving" taget="_blank">tokbox.com/platform/archving</a>

* 通話人数にかかわらず 3.5セント/分
* 同時に通話している人数分が合成され、1つの動画になる
    * <a href="http://www.tokbox.com/blog/single-file-archive-yes-you-can/" target="_blank">Single-file archive? Yes, you can!</a>
* ただし、実用的な人数は6人まで。最大9人まで可能だが、画質は劣化する
    * ※どこかで見たのですが、現在出典不明です...
* デフォルトではtokboxの管理下のストレージに保管され、72時間で削除される
* それ以上の期間保存したい場合は、自分のS3やAzureのストレージと連携させる
![tokbox_archive_stich.png](https://qiita-image-store.s3.amazonaws.com/0/19403/52ee310b-7e65-1446-6e6e-a1922b49e54a.png)


## 録画料金のケーススタディ
### (1) 2人のビデオチャット
* 100組のペアが、毎日30分通話するとする。月当たり900分/ペアの通話
* 全体では $3,150/月、378,000円/月の録画料金

### (2) 4人の会議
* 4人のチームが100組、週当たり1時間、月4時間の会議を行う
* 全体では $840/月、172,800円/月の利用料

### (3) 6人の会議
* 6人のチームが100組、週当たり1時間、月4時間の会議を行う
* 全体では $840/月、172,800円/月の利用料 ※4人の場合と同じ

### (4) 100人のセミナー
* 100人が視聴するセミナーを、1回あたり2時間、月10回行う
* 全体では $42/月、5,040円/月の利用料

録画料金は、形態によってかなり違ってきます。1対1の録画は割高に感じられますね。

## 次回は
<a href="http://qiita.com/massie_g/items/77f6916b70a3e21a3cb0" target="_blank">次回は通信経路について、</a>もう少し掘り下げてみる予定です。

## 記事一覧
* <a href="http://qiita.com/massie_g/items/dc6615799ef65ab1a6e4" target="_blank">WebRTCプラットフォーム tokboxのopentokを調べてみた(1) 基礎編</a>
* <a href="http://qiita.com/massie_g/items/7b8eaf87f0a652973399" target="_blank">WebRTCプラットフォーム tokboxのopentokを調べてみた(2) 利用料金編</a>
* <a href="http://qiita.com/massie_g/items/77f6916b70a3e21a3cb0" target="_blank">WebRTCプラットフォーム tokboxのopentokを調べてみた(3) 通信経路編</a>
* <a href="http://qiita.com/massie_g/items/af3ee666969b41293478" target="_blank">WebRTCプラットフォーム tokboxのopentokを調べてみた(4) PeerConnection編</a>
Line 番号 gutter や、wrap 設定を気楽に変更する。


line 番号の表示や、softwrap を気楽に変更したい。

keymap は [vim-mode](https://github.com/atom/vim-mode) 前提。
softwrap は `editor:toggle-soft-wrap` があるので、それをキーマップすれば良いだけ。
~~line-number の表示の toggle は対応するコマンドが無いので、カスタムコマンドを作ってキーマップする。~~
なんか知らん。コマンドあった。。`editor:toggle-line-numbers` があった。


```coffeescript:init.coffee
# これはいらないけど、設定をトグルするコマンドのサンプルとして残しておく。
# atom.commands.add 'atom-text-editor', 'custom:toggle-line-number', ->
#   atom.config.toggle("editor.showLineNumbers")
```

[vim-mode](https://github.com/atom/vim-mode) 前提

```coffeescript:keymap.cson
'atom-text-editor.vim-mode.command-mode':
  'space n': 'editor:toggle-line-numbers'
  'space w': 'editor:toggle-soft-wrap'
```


# 使い方

normal mode (Atom の呼び方, scope では vim-mode.command-mode ) で

* `space` 押した後、`n` で line number の表示を切り替え
* `space` 押した後、`w` で wrap の切り替え
Atom で vim-textmanip の様にテキストを移動する。

先週から、Atom に乗り換え中です。

[vim-textmanip](https://github.com/t9md/vim-textmanip) は私が作ったパッケージ。
これのような操作をしたい。

幸いAtom には標準で、duplicate や、`editor:move-line-up` や `editor:move-line-down` があるので、 Package に頼らなくても Keymap だけで基本的な目的は達成できた。
[vim-mode](https://github.com/atom/vim-mode) 前提のキーマップです。

```coffeescript:keymap.cson
'atom-text-editor.vim-mode.visual-mode':
  'ctrl-k': 'editor:move-line-up'
  'ctrl-j': 'editor:move-line-down'
  'ctrl-l': 'editor:indent-selected-rows'
  'ctrl-h': 'editor:outdent-selected-rows'
```

# 使い方

1. Visual モードで複数行を選択。
2. ctrl 押しながら jkhl でテキスト移動
Twitterでの検索結果をCSVへ保存する。

Twitterでの検索結果をCSVに保存するスクリプト。
例によって書き込み元となるCSVファイルをなければ作る、
という仕様になっているので、二度目以降に実行した場合はCSVヘッダが重複するので、
ファイル名をリネームするなどの対応が必要。

```python:twcsv.py

#!/user/bin/env python
# -*- coding: utf-8 -*-
from requests_oauthlib import OAuth1Session
import csv
import json
import sys, codecs



search_words = raw_input(u"Keyword?: ")

C_KEY = "******************************************"
C_SECRET = "******************************************"
A_KEY = "******************************************"
A_SECRET = "******************************************"



def Search_words():
	url = "https://api.twitter.com/1.1/search/tweets.json?"
	params = {
			"q": unicode(search_words, "utf-8"),
			"lang": "ja",
			"result_type": "recent",
			"count": "100"
			}
	tw = OAuth1Session(C_KEY,C_SECRET,A_KEY,A_SECRET)
	req = tw.get(url, params = params)
	tweets = json.loads(req.text)

	f = open("tweetsearch.csv" , "ab")
	writer = csv.writer(f)
	writer.writerow(["datetime", "id", "name", "text"])

	for tweet in tweets["statuses"]:
		time = (tweet["created_at"])
		id = (tweet["user"]["screen_name"].encode("utf-8"))
		name = (tweet["user"]["name"].encode("utf-8"))
		text = (tweet["text"].encode("utf-8"))
	
		writer.writerow([time, id, name, text])
	
	f.close()
	
	return Search_words
	
Search_words()

```

CSVに書き込むデータの形式に好みがあれば改変でもっと使いやすくなるかもしれません。

```
writer.writerow(["datetime", "id", "name", "text"])
```

でCSVヘッダ、CSVの1行目を書き込み。
ヘッダなので一回書き込めばいいわけなので。


```
writer.writerow([time, id, name, text])
```

この部分で取得したツイートの内容をCSVに書き込み。

どんなひとがどんなツイートをしているか、何時頃のツイートが多いかなど、
グラフ化しても面白い気はするのですが、いかんせん知識が足りず今回はここまで。
【メモ】PowerShell書き始めるまで

初めて触ったので自分用メモ
***

* Windows7のデフォルトバージョンは2
* 最新は4
* `Invoke-RestMethod`などは3以降で使用可能
* バージョン確認方法  
`$PSVersionTable`
* 更新は  
[Windows Management Framework 4.0 ](https://www.microsoft.com/ja-jp/download/details.aspx?id=40855)  
から  
`Windows6.1-KB2819745-x64-MultiPkg.msu`  
のみインストール
* インストール後は再起動
* バージョン2は消える(共存できそうな検索結果も出たが、詳しく見てない)
* 拡張子は.ps1
* 文字コードは**Shift-JIS**(Sublime textではなく秀丸などで作る)
* シェルの実行権限を与える  
[WindowsでPowerShellスクリプトの実行セキュリティポリシーを変更する](http://www.atmarkit.co.jp/ait/articles/0805/16/news139.html)  
`Set-ExecutionPolicy RemoteSigned`  
PowerShellは管理者として実行すること
【heteml】SSHでローカルからリモートサーバにファイルを送る方法

#はじめに
ブログで先に記載した内容をQiitaにも。ここでは結論のみを記載します。

MyBlog -> 『[SSHでローカルからリモートサーバにファイルを送る方法 | 駆け出しプログラマーの怠慢](http://fantmsite.com/tech_blog/?p=38)』

#方法

```
scp -r -P 2222 アップロードしたいファイルパス ユーザー名@サーバー:サーバーパス
```

分かりづらい方は[ブログ](http://fantmsite.com/tech_blog/?p=38)の方に例を載せてあるのでそちらでm(_ _)m
PHP Fatal error:  Could not convert the script from the detected encoding ... が出た時の対処法


# 現象

Apache上で動いているphpのWebappで、2ヶ月に1回くらい？の割合で下記エラーが発生することがある。
尚、これがひとたび発生すると断続的に出続ける。。

```
PHP Fatal error:  Could not convert the script from the detected encoding "UTF-32LE" to a compatible encoding in /path/to/some.php on line xxx
```

# 結論

Apache再起動。以上。
知見求む。
Pythonでメールを送信するときにSMTPサーバーをローカルにたてるのが面倒な場合に。

Pythonでメールを送るスクリプト。
SMTPサーバーをローカルにたてるのが面倒だったりするので、
レンタルサーバーのSMTPを使用する方法。

```python:mail.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import smtplib
from email.MIMEText import MIMEText
from email.Header import Header
from email.Utils import formatdate

FROM_ADDR = "送信元メールアドレス"
TO_ADDR = "送信先メールアドレス"
ENCODING = "iso-2022-jp"

message = MIMEText(
	u"完了しました".encode(ENCODING),
	"plain",
	ENCODING,
	)

message["Subject"] = str(Header(u"通知メール",ENCODING))
message["From"] = "%s <%s>" %(str(Header(u"From",ENCODING)),FROM_ADDR)
message["To"] = "%s <%s>" %(str(Header(u"To",ENCODING)),TO_ADDR)
message["Date"] = formatdate()

s = smtplib.SMTP("SMTPサーバー", 587)
s.ehlo()
s.starttls()
s.login("SMTPログインアカウント", "パスワード")

s.sendmail(
	FROM_ADDR,
	[TO_ADDR],
	message.as_string(),
	)
	
s.close()

print "Success send mail"

```

何か処理が終わった時にメールを送信する、とかにも使えると思う。
2015/5/20のAWS S3のSSLv3禁止について


https://forums.aws.amazon.com/thread.jspa?threadID=176062
のフォーラムにだいたい情報がある。

* 予定日：2015/5/20に延期
* メールでSSLv3のアクセスがあるバケットが通知される(アクセスがない場合は通知されないらしい)
* サポートに連絡すればアクセスしているUser-Agentを教えてくれる（アクセス元のIPやバケット内のオブジェクトは提供不可）。
* また、お願いすればSSLv3のアクセスを禁止した確認用のエンドポイントを提供してもらえる。
* サポートに入ってない場合も連絡は可能なようである。

フォーラムより

```
If you don't have Support, you can contact our customer service team via the "Billing and Account Inquiries" contact button. https://aws.amazon.com/contact-us/
```
CreateJSの基本メモ6　字を描く

#準備

下記を参考にしてください。
[CreateJSの基本メモ1　線を描く]
http://qiita.com/PianoScoreJP/items/09b6d9cf4e17549704c6#%E6%BA%96%E5%82%99

#1.字を描く
new createjs.Text(text,style,color)
TextクラスはDisplayクラスを継承していますので、stageに直接渡して描画します。

    //ElementIDを指定して、ステージを作成する
        var mystage=new createjs.Stage("mycanvas");

     //文字オブジェクトを作成する
        var text = new createjs.Text("Qiita", "20px Arial", "#ff7700");
     //描画位置の指定
        text.x=50;
        text.y=50

     //文字オブジェクトをステージに追加する
         mystage.addChild(text);

     //ステージを更新して描画を完了
        mystage.update();
#実行結果
![字](https://qiita-image-store.s3.amazonaws.com/0/75209/b65d158d-d075-2572-ed64-bce9fc527065.png)

[サンプル http://jsfiddle.net/pianoscorejp/sw9zr61d/](http://jsfiddle.net/pianoscorejp/sw9zr61d/)
#2.イタリックやボールドを指定する場合

`var text = new createjs.Text("Qiita", "italic bold 20px Arial", "#ff7700");`
実行結果
![イタリック+ボールド](https://qiita-image-store.s3.amazonaws.com/0/75209/d997d839-21e6-f9b7-fdb7-5f38c1034e93.png)

[サンプル http://jsfiddle.net/pianoscorejp/sw9zr61d/1/](http://jsfiddle.net/pianoscorejp/sw9zr61d/1/)

#3.行揃え
TextクラスのtextAlignプロパティに設定することで、行揃えを行うことができます。
**textAlignプロパティの設定値**
"start", "end", "left", "right", and "center"
#実行結果
文字描画開始位置(text.x)を起点に行揃えが行われます。
下記の例ではtext.x=100としています。背景色の境目がx=100pxの位置になっています。
![textAlignTest](https://qiita-image-store.s3.amazonaws.com/0/75209/30e40f85-f027-5d3c-dc49-9ebd0d60da15.png)

[サンプル http://jsfiddle.net/pianoscorejp/sw9zr61d/2/](http://jsfiddle.net/pianoscorejp/sw9zr61d/2/)

#4.縦位置を揃える
TextクラスのtextBaselineプロパティに設定することで、縦位置を設定できます。
**textBaselineプロパティの設定値**
"top", "hanging", "middle", "alphabetic", "ideographic","bottom"
#実行結果
![textBaselineTest](https://qiita-image-store.s3.amazonaws.com/0/75209/6a50a6c5-1273-0647-04fc-f8fd0413332c.png)

[サンプル http://jsfiddle.net/pianoscorejp/sw9zr61d/3/](http://jsfiddle.net/pianoscorejp/sw9zr61d/3/)
dockerでGUIアプリを動かしてみた

以下のページを参照したらできた。

 * [Running GUI apps with Docker – Fábio Rehm](http://fabiorehm.com/blog/2014/09/11/running-gui-apps-with-docker/)
 * [【翻訳】Dockerを用いたGUIアプリケーションの実行 | POSTD](http://postd.cc/running-gui-apps-with-docker/)

ただし、試した環境(ホスト：CentOS6.6、コンテナ：Amazon Linux AMI release 2014.09)では記事中の方法はうまくいかずコメントに書いてある以下のような方法でうまくいった。

```bash
$ docker run -it --rm -e DISPLAY --net=host -v ~/.Xauthority:/root/.Xauthority [image] /usr/local/bin/firefox
```
OpenGL Gameテンプレートを3Dプログラミング未経験者が読む

iOSの3Dプラグミングを理解するのにOpenGLのGameテンプレートから入るのがいいと聞いたのでコード読んだ。
3Dプログラミング未経験者でとっつきにくかったが、参考サイトを教えてもらってある程度は理解できた(まだまだわかってないところはある)。
ここではOpenGLのGameテンプレートに関して調べたことをメモしておく。

# Gameテンプレートの作り方

OpenGLのGameテンプレートはXcode 6.3.1では以下のように新しいプロジェクトを作成することで生成される。

iOSのApplicationのGameを選択
![new_project_application_game.png](https://qiita-image-store.s3.amazonaws.com/0/16768/55ac01b9-ba8d-56f6-f37c-6b141998bf25.png)

Game TechnologyにOpenGL ESを選んでプロジェクト作成
![new_project_option.png](https://qiita-image-store.s3.amazonaws.com/0/16768/2604db35-6348-2263-4ecd-85db2cac38d2.png)

実行すると2つのキューブがグルグルまわるテンプレートが作成される。

![cdaa538a-7354-6ff2-e89f-7fe03309c87e.png](https://qiita-image-store.s3.amazonaws.com/0/16768/ac7a41ee-e60b-e75c-19c7-e3fb475e0b23.png)


# 参考にしたサイト

 * [床井研究室 - OpenGL 関係記事一覧](http://marina.sys.wakayama-u.ac.jp/~tokoi/oglarticles.html)
  * シェーダーって何、頂点バッファオブジェクトって何状態だったのがもうちょっとわかる状態にしてくれたサイト
  * 「今風 OpenGL の使い方」と「GLSL 入門」の最初あたりの記事がすごく参考になった

 * [GLES 2.0 Part 3 ポリゴン描画と テクスチャ利用](http://sazameki-blog.up.seesaa.net/image/gles20_texture_20120304_0215.pdf)
 * [GLES2.0 プログラマブル・パイプライン.graffle](http://sazameki-blog.up.seesaa.net/image/ios5_gles20_pipeline_20120407_2230.pdf)
 * [GPU CPU](http://sazameki-blog.up.seesaa.net/image/VAO2BVBO.pdf)
  * それぞれわかりやすいスライドでプログラムの理解で参考になった

 * [OpenGL ES 2.0 と GLKit - 工場裏のアーカイブス](http://chemicalfactory.hatenablog.com/entry/2013/04/05/234331)
 * [3Dキューブを描画する｜xxxxx13のブログ](http://ameblo.jp/xxxxx13ameba/entry-11195002865.html#main)
 * [OpenGL Gameテンプレート解読 | なんてこったいブログ](http://nantekottai.com/2011/10/13/opengl-game-template/)
  * GLKitの位置付けについて理解する参考になった

# コードについてのメモ

* gCubeVertexDataは頂点の情報(positionX、positionY、positionZ)と頂点に対する法線ベクトル(normalX, normalY, normalZ)の情報を含んでいる
* 初期化コードの大部分でシェーダーの準備をしている
* setupGL関数でVBO/VAOの設定
* update関数でモデルビュー変換
* glkView関数で描画
git pullしたときにerror: The following untracked working tree files would be overwritten by merge とエラーがでる解決方法

Githubにあるリポジトリから `git pull` をしたらエラーがでてpullが失敗しました。

```bash:pullするとエラー
git pull origin master

From github.com:pugiemonn
 * branch            master -> FETCH_HEAD
Updating 0801352..065ef52
error: The following untracked working tree files would be overwritten by merge:
	hoge.html
Please move or remove them before you can merge.
Aborting
```
これはhoge.htmlをgitで管理していなかったため発生したようです。マージする前にhoge.htmlを移動するか取り除けと言われています。

hoge.htmlファイルは消しても問題無いファイルでしたので、hoge.htmlを削除することでエラーが消えました。
CreateJSの基本メモ5　影を描く

#準備
前準備は下記を参照
[CreateJSの基本メモ1　線を描く](http://qiita.com/PianoScoreJP/items/09b6d9cf4e17549704c6#%E6%BA%96%E5%82%99)

#影を描く
shadow(color,x,y,blurwidth)
ここでは四角に影をつけてみます
影はDisplayオブジェクトに対して設定します

     //ElementIDを指定して、ステージを作成する
     var mystage=new createjs.Stage("mycanvas");

    //黒塗りの四角を作成
     var g = new createjs.Graphics().f("#000").r(0,0,100,100);


     //影オブジェクトを作成
         shape.shadow("#000",0,0,20)

     //Displayオブジェクトを作成
         var shape=new createjs.Shape(g);

     //Displayオブジェクトに影を設定
         shape.shadow=shadow
     //シェイプオブジェクトをステージに追加する
         mystage.addChild(shape);

     //ステージを更新して描画を完了
         mystage.update();


#実行結果
影なし
![ダウンロード (3).png](https://qiita-image-store.s3.amazonaws.com/0/75209/73238572-6f95-db56-c0d5-9f89a022de56.png)
影あり
![ダウンロード (3).png](https://qiita-image-store.s3.amazonaws.com/0/75209/5d9f9668-a34d-86bd-f7b2-219f142929ba.png)

#サンプル
[http://jsfiddle.net/pianoscorejp/fmbdmkhq/](http://jsfiddle.net/pianoscorejp/fmbdmkhq/)

#リンク
[CreateJSの基本メモ1　線を描く](http://qiita.com/PianoScoreJP/items/09b6d9cf4e17549704c6#%E6%BA%96%E5%82%99)
[CreateJSの基本メモ2　円を描く](http://qiita.com/PianoScoreJP/items/3004a5cafd7f9f5d1501)
[CreateJSの基本メモ3　四角を描く]
(http://qiita.com/PianoScoreJP/items/cb3ba73271a7ba3a00f4)
[CreateJSの基本メモ4　画像を表示する](http://qiita.com/PianoScoreJP/items/110a1566c29dcd9c2603)
D言語でComPtr

comの開発を進めるにあたって、コピーコンストラクタでAddRefして、デストラクタでReleaseするスマートポインタ的な入れ物が必要であろう。ということで作ってみた。

```d
struct ComPtr(T)
{
    T ptr;
    alias ptr this;
    this(this) { if (ptr) ptr.AddRef(); } // post-blit
    ~this() { if(ptr)ptr.Release(); } // destructor
    bool opCast(V)() const if (is(V==bool))
    {
        return ptr ? true : false;
    }
}
```

当初opDispatchで9引数のテンプレート展開までを手書きしていたのだが、返り値のvoid・非voidの呼び分けができずに頓挫していた。運よく[alias this](http://www.kmonos.net/alang/d/class.html#AliasThis)を発見。まさにこれこそ必要なものだ。素晴らしい。
secureCoding > gcc 4.1以降 > __builtin_object_size() > 代替関数 __memcpy_chk()

引用: C/C++ セキュアコーディング 第2版 by Robert C. Seacordら

memcpy(buf, foo, n);
strcpy(buf, bar);
などに関して、代替関数`__memcpy_chk()`や`__strcpy_chk()`が使用されて、バッファーオーバーフローの発生をチェックしてくれるようだ。
secureCoding > gcc 4.1以降 > __builtin_object_size() > 対応関数のリスト

引用: C/C++ セキュアコーディング 第2版 by Robert C. Seacordら

> `__builtin_object_size()`関数は、```_FORTIFY_SOURCE```が定義されていた場合に、次の標準関数に対する簡易的なバッファーオーバーフロー対策を付加するために使用することができる。

> memcpy() strcpy() strcat() sprintf() vsprintf() 
memmove() strncpy() strncat() snprintf() vsnprintf()
memset() fprintf() vfprintf() printf() vprintf()
secureCoding > gcc 4.1以降 > ポインタ参照のオブジェクトサイズを取得 > __builtin_object_size()

引用: C/C++ セキュアコーディング 第2版 by Robert C. Seacordら

> GCCには、限定的ではあるが、ポインタが参照しているオブジェクトのサイズを知るための機能がある。GCC4.1から導入された```__builtin_object_size()```関数

>...
> この機能が適用できるのは、コンパイル時に範囲が決定可能なオブジェクトに限定される。


[gcc.gnu.org](https://gcc.gnu.org/onlinedocs/gcc/Object-Size-Checking.html)
> GCC implements a limited buffer overflow protection mechanism that can prevent some buffer overflow attacks.