OmniAICreator/Qiita-1.07M huggingface dataset:
Androidでボタン押下後、ProgressDialogを出す

時間が掛かる処理を動かす場合、処理中を示すのインジケータ画像（？）や、パーセントなどユーザに処理進捗状況をフィードバックするべきです。

Androidにおいては、専用のProgressDialogという仕組みがあるため
画面に表示する文字を設定すれば、画面にインジケータ画像ぽいものを
短時間で表示できます。

環境
・Android API Level9（2.3）で開発しています。

処理例
・画面上に配置したボタンを押下して処理開始
・ボタン押下時に、ProgressDialog表示
・非同期で処理を開始
・処理終了時に、ProgressDialog非表示

```MainActivity.java
//ボタン表示
Button submit = (Button) findViewById(R.id.regist);
submit.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        final String input = get_depost_json();
        final ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
        progressDialog.setTitle("通信待機中・・・");
        progressDialog.setMessage("登録しています。");
        progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        progressDialog.setCancelable(false);
        progressDialog.show();

        new AsyncTask<Void, Void, Integer>() {
            @Override
            protected Integer doInBackground(Void... p) {
                //通信の処理（結果をレスポンスコードの数値で返す）
                return 200;
            }
            @Override
            protected void onPostExecute(Integer res_code) {
                if (res_code == 200) {
                    progressDialog.hide();
                    Toast.makeText(MainActivity.this, "登録が完了しました。", Toast.LENGTH_SHORT).show();
                } else {
                    progressDialog.hide();
                    Toast.makeText(MainActivity.this, "登録に失敗しました。", Toast.LENGTH_SHORT).show();
                }
            }
    }.execute();
    }
});
```

ボタンのイベントハンドラから呼ぶ、OnClickは同期処理となるので
Dialogを表示する処理を書いた上で、非同期で（Asyncを用いて）
処理を動かす必要がありました。

この例では、ぐるぐる回るインジケータ画像を表示するだけですが
進捗状況を可視化できる仕組みを検討いたします。
ぼくはリアクティブプログラミングができない

ぼくは思うのだ。 どんなに頭が良くて、りっぱなコードを書けるような人物でも、その人が変な顔で女にもてなかったらずい分と虚しいような気がする。（[元ネタ](https://twitter.com/yamadaamy_bot/status/642990693653176320)）

async/awaitがあれば、do記法がなくても[こういうコード](https://github.com/matarillo/WhoToFollow.WinForms/blob/master/src/WhoToFollowApp/WhoToFollowWhatever.cs)が書けるようなのだけど、

```csharp:WhoToFollowWhatever.cs
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Net.Http;

namespace WhoToFollowApp
{
    public partial class WhoToFollowWhatever
    {
        private IList<JToken> users;
        private readonly PeopleToFollow display = new PeopleToFollow();
        private readonly Random random = new Random();
        private readonly HttpClient client = CreateHttpClient();

        private static HttpClient CreateHttpClient()
        {
            var client = new HttpClient();
            client.DefaultRequestHeaders.Add("User-Agent", "WhoToFollowApp");
            return client;
        }

        public async void RefreshAll(object sender, RefreshEventArgs e)
        {
            var randomOffset = random.Next(500);
            var requestUrl = "https://api.github.com/users?since=" + randomOffset;
            var json = await client.GetStringAsync(requestUrl);
            users = JArray.Parse(json);
            display.Clear();
            for (var i = 0; i < 3; i++)
            {
                display.Add(PickupRandomlyFrom(users));
            }
        }

        public void CloseOne(object sender, CloseEventArgs e)
        {
            display[e.Index] = PickupRandomlyFrom(users);
        }

        private PersonToFollow PickupRandomlyFrom(IList<JToken> users)
        {
            dynamic user = users[random.Next(users.Count)];
            return new PersonToFollow
            {
                Name = (string)user.login,
                Url = new Uri((string)user.html_url),
                Image = new Uri((string)user.avatar_url)
            };
        }

        public PeopleToFollow SuggestedPeople { get { return display; } }
    }
}
```

このコードと、[purescriptで書かれた非同期モナドのコード](https://gist.github.com/aratama/fa9fd5eca5573fc2e6dd#file-followbox-purs-L48-L93)とで、何か決定的な違いがあるのか、ぼくにはどうしてもわからなかった。（純粋関数型、というのがとでも重要なことらしかったのだけど、それもぼくにはよくわからなかった。）

ただ、このコードは[Rxスタイルで書いたコード](http://ninjinkun.hatenablog.com/entry/introrxja)とは意図からして全然違うものに思えるから、このコードでもってリアクティブプログラミングの存在意義を問うことなんてできそうにないことはわかった。

（追記）throttleは確かにちょっと面倒なのだけど、まあそれも[こんなクラスを書いてあげれば（別記事を起こした）](http://qiita.com/matarillo/items/9958b90ab04de5c2234e)イベントベース+async/awaitスタイルの中でふつうに扱えるので、これもpurescriptとの違いはよく分からない。
複数台構成のinfinidbのインストール

とにかくはまったので、メモしておく

- postConfigureによる一括複数台サーバーへのインストールは時間がかかる、失敗するのでやめて、1台にUM, PMをいれてその後PMを追加するのが吉
- 最新版をgithubからとってきて、buildして、インストールするが、binary packageでのインストールは、file nameが

infinidb-4.6.2-1.bin.tar.gz

でないとだめ、(infinidb-*4.6.2-1*.bin.tar.gzでチェックしてだめだとはねる）
 エラーは file openで失敗するというわかりにくいものでハマる

- relesenum fileが必要。これに、ver, release numberが記述されている

- calpontConsoleでmoduleをaddしていくのが良い
- expectで ssh loginとかしている。
 - remote_command.shというのがそれ


# 参考情報

- https://github.com/infinidb/infinidb/issues
- http://qiita.com/nishimry/items/03821138a689120c19c3
- http://infinidb-tech.ashisuto.co.jp/infinidb-module-um-pm/
- http://blog.gogo-games.com/archives/28446294.html
Mac OS El Capitan で Android USB tethering (HoRNDIS)

# Overview

[Mac OS El Capitanから、kextのbanにより、USB Tetheringができなくなりました](http://joshuawise.com/horndis)。

しかしながら、[有志](https://github.com/jwise/HoRNDIS/issues/42) の方により解決されたので、手順をメモしておきます。

```
$ sudo rm -rf /System/Library/Extensions/HoRNDIS.kext
$ sudo rm -rf /Library/Extensions/HoRNDIS.kext
```

http://nyus.joshuawise.com/HoRNDIS-rel8pre1.pkg
から、installして、

```
$ sudo reboot
```

その後、MacにUSB接続して、Android device側で、USB Tethering を設定からOnにし、
また、MacのNetworkの設定で、USB Tethering (Android Device名)をONにするだけです。

ただし、一度もつなげたことがない人は、
http://joshuawise.com/horndis#available_versions
から、まず、古いversionをinstallし、

Xperiaの人は、
http://www.sonymobile.co.jp/support/software/bridge-for-mac/
から、bridge-for-macをinstallしておきましょう。
(他の人は、https://www.android.com/filetransfer/ でしょうか)

こうしておかないと、うまくUSB Tetheringできません。あしからず。
(これは、El Capitanになるまえからそうなのですが、一応、FYI...)
"use strict"は他のファイルには影響しない

`"use strict"`と関数内の始めに書くとその関数内でStrictモードが有効になる。関数の外に書いた場合、他のファイルにも影響が出ると思いきや、どうやらそのファイル内でのみ有効になるらしい。

##ケース１

```html:index.html
<script src="script.js"></script>
```

```js:script.js
"use strict";
a = 0; // Uncaught ReferenceError: a is not defined
```

##ケース２
```html:index.html
<script src="script1.js"></script>
<script src="script2.js"></script>
```

```js:script1.js
"use strict";
```

```js:script2.js
a = 0; // エラーにならない
```
CDH5.5 on Windows7 32bitの記録（挫折）

#前置き
なんやかんやあってHadoopを弄る必要に迫られたので、CDHでさっくりと触ってみることにした記録
QuickStartのページに「require 64-bit host OS」ってあるので、いきなり無理っぽい気がしているのだけど

#手順
[Hadoop を 10 分で試そうとしたら 2 時間 49 分かかった話](http://garbagetown.hatenablog.com/entry/2015/02/11/024550)さんの手順通り

環境が若干違っていて、
・Windows 7 (**32bit**)
・メモリ8G (多分使い切れてない)
・ご家庭LAN
・7ZipとVirtualBoxは入っていなかったのでCDHのDL待ち時間にインストールしておきました

1.CDH5.3→5.5でサイトデザインが変わってるみたいだけど内容は変わってないみたいだしそのままGOGO
2.DL終わったら7zipで展開してVirtualBoxにインポート
3.host32bitのせいか、Mem割り当て範囲は4~3584Mだよ（要求は4G）って警告出たけど無視して続行
4.起動！
5.30分位待ってもCentOS6.4の起動バーが出た状態から進まず。いつの間にかhostも無反応になったので挫折

GuestがMem4G近く持って行ったら当然止まりますよね、ということでOSを64bitに入れ直してそのうち再戦しよう
ECCUBE2 ページ追加の備忘録

html内にフォルダ（今回はsample)を作り
index.phpファイルを作成

* * *
require_once '../require.php';

require_once CLASS_EX_REALDIR . 'page_extends/abouts/LC_Page_Sample_Ex.php';



$objPage = new LC_Page_Sample_Ex();

$objPage->init();

$objPage->process();

* * *



data/class_extends/page_extends/abouts
にLC_Page_Sample_Ex.phpを作成

* * *
<?php
require_once CLASS_REALDIR . 'pages/abouts/LC_Page_Sample.php';

class LC_Page_Sample_Ex extends LC_Page_Sample
{
/**
* Page を初期化する.
*
* @return void
*/
function init()
{
parent::init();
}

/**
* Page のプロセス.
*
* @return void
*/
function process()
{
parent::process();
}
}
* * *

data/class/pages/aboutsに
LC_Page_Sample.phpを作成
* * *
<?php
require_once CLASS_EX_REALDIR . 'page_extends/LC_Page_Ex.php';

class LC_Page_Sample extends LC_Page_Ex
{
/**
* Page を初期化する.
*
* @return void
*/
public function init()
{
parent::init();
$this->tpl_title = 'サンプル';
}

/**
* Page のプロセス.
*
* @return void
*/
public function process()
{
parent::process();
$this->action();
$this->sendResponse();
}

/**
* Page のアクション.
*
* @return void
*/
public function action()
{
}
}
* * *
次にデータベースにページ情報を登録
dtb_pagelayoutに追加

INSERT INTO `データベース名`.`dtb_pagelayout` (`device_type_id`, `page_id`, `page_name`, `url`, `filename`, `header_chk`, `footer_chk`, `edit_flg`, `author`, `description`, `keyword`, `update_url`, `create_date`, `update_date`, `meta_robots`) VALUES ('10', '29', 'サンプル', 'sample/index.php', 'sample/index', '1', '1', '2', NULL, NULL, NULL, NULL, '2016-02-14 01:01:00', '0000-00-00 00:00:00.000000', NULL);

page_idは最大値+1　ECCUBE2.13.5では初期設定で28列あるので初回は29で登録
あとはページを登録するごとに数を増やしていく。
PhoneGap/Cordova iOSでアイコンとスプラッシュ画面がデフォルトの画像になる

#現象
PhoneGapアプリで、config.xmlで指定している画像はすべて正しいのに、アイコンとスプラッシュ画面がPhoneGapデフォルトになってしまう現象が発生。
<img width="414" alt="cap0.png" src="https://qiita-image-store.s3.amazonaws.com/0/24420/b0657289-1803-7ba0-d82b-c63fe2587a32.png">

最初この現象がおきているのが、iPhone6Plus以上だった気がするが、対象機種関係ないかもしれない。
実機でもSimulatorでも再現する。

##原因不明
いつから、何がきっかけで発生したのか不明。
2016年1月に、アイコン・スプラッシュ正常に表示されていたプロジェクトを2016年2月に一部改変してビルドしなおしただけで発生。

#解決法
ビルド後、Xcodeのプロジェクトを開いて、Generalのなか「App Icons and Launch Images」欄の「Use Asset Catalog」ボタンをクリック
![cap1.png](https://qiita-image-store.s3.amazonaws.com/0/24420/64cebbcb-80bb-1155-f504-79ad7573a823.png)
アラートがでたら「Migrate」ボタンをクリック
![cap2.png](https://qiita-image-store.s3.amazonaws.com/0/24420/78a5fa44-0145-7cc2-fcbe-d3aee78c4ac2.png)
以上で直りました。

##参考にしたサイト
[iPhone6以上でだけSplashが反映されない？Launch Screenの設定は大丈夫？](http://nerd0geek1.hatenablog.com/entry/2015/02/13/083000)
docker を proxy環境下で使う

# Ubuntu 16.04でのdockerをproxy環境下で使う

```
$ sudo mkdir /etc/systemd/system/docker.service.d
$ sudo vim /etc/systemd/system/docker.service.d/http-proxy.conf
```

```/etc/systemd/system/docker.service.d/http-proxy.conf
[Service]
Environment="HTTP_PROXY=http://proxy.ore.com:8080/"
```

```
$ sudo systemctl daemon-reload
$ sudo systemctl restart docker
```

で動くようになっているはずです。。。

# 下は古い情報です。

# はじめに

dockerをproxy環境下でも使いたくなりますが、docker pullはそのままではproxyに対応していません。理由はboot2dockerのlinux環境にproxy情報が入っていないから。

というわけで、以下のようにして、boot2dockerの環境に、proxy情報を設定するのです。

boot2dockerの入れ方とかは、本家の https://docs.docker.com/engine/installation/windows/ を参照のこと...

# boot2dockerの設定

```
$ docker-machine ssh default
                        ##         .
                  ## ## ##        ==
               ## ## ## ## ##    ===
           /"""""""""""""""""\___/ ===
      ~~~ {~~ ~~~~ ~~~ ~~~~ ~~~ ~ /  ===- ~~~
           \______ o           __/
             \    \         __/
              \____\_______/
 _                 _   ____     _            _
| |__   ___   ___ | |_|___ \ __| | ___   ___| | _____ _ __
| '_ \ / _ \ / _ \| __| __) / _` |/ _ \ / __| |/ / _ \ '__|
| |_) | (_) | (_) | |_ / __/ (_| | (_) | (__|   <  __/ |
|_.__/ \___/ \___/ \__|_____\__,_|\___/ \___|_|\_\___|_|
Boot2Docker version 1.9.1, build master : cef800b - Fri Nov 20 19:33:59 UTC 2015
Docker version 1.9.1, build a34a1d5
```

```
docker@default:~$ sudo vi /var/lib/boot2docker/profile

EXTRA_ARGS='
--label provider=virtualbox

'
CACERT=/var/lib/boot2docker/ca.pem
DOCKER_HOST='-H tcp://0.0.0.0:2376'
DOCKER_STORAGE=aufs
DOCKER_TLS=auto
SERVERKEY=/var/lib/boot2docker/server-key.pem
SERVERCERT=/var/lib/boot2docker/server.pem

export HTTP_PROXY=http://proxy.hoge.com:10080
export HTTPS_PROXY=https://proxy.hoge.com:10080

```

最後のexportの2行の追加が肝心です。
proxy.hoge.comなどは、各自の環境に合わせましょう。

```
$ docker-machine restart default
```

で、boot2dockerのlinux環境を再起動させます。

```
$ docker run busybox echo hello world
Unable to find image 'busybox:latest' locally
latest: Pulling from library/busybox

c00ef186408b: Pull complete
ac6a7980c6c2: Pull complete
Digest: sha256:e4f93f6ed15a0cdd342f5aae387886fba0ab98af0a102da6276eaf24d6e6ade0
Status: Downloaded newer image for busybox:latest
hello world
```

はい、このように、pullがproxy環境越しにできるようになりました！

# おまけ

Windowsなどで、MinGW環境の場合には、このMinGW環境にも設定が必要です。

```
$ vi .bash_profile
export http_proxy=http://proxy.hoge.com:10080
export https_proxy=https://proxy.hoge.com:10080
export no_proxy=127.0.0.1,localhost,192.168.99.100
```
のように。
192.168.99.100はboot2dockerのipaddressです.
IEで使えないjavascriptのconstの代替案

会社のメンバーが「調子乗ってjsでconstとか使ったらIEで動かないんですよ。」とか言ってた。

ちなみにconstは変数と違って変更されることがない定数の宣言。*constant*の略だそうです。

MDN ([const](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const)) に書かれている文章を読んでみると
>現在の const の実装は Mozilla 特有の拡張であり、ECMAScript5 の一部ではありません。これは Firefox および Chrome (V8) でサポートされています。Safari 5.1.7 や Opera 12.00 では、const で宣言しても、後から値を変更することができます。 また、Internet Explorer 6-10 ではサポートされていません。 const キーワードは現在、関数スコープ内で（var で変数を宣言するように）定数を宣言します。

IE6-10は非対応。やっぱりお前かIE!

#解決策
名前空間を作って汚染されないようにし、各jsファイルから定数を呼び出せるようにします。
browserifyで各jsファイルをまとめてmin化してしまうので、後で設定した値を直しやすいように定義ファイルは別に作る派です。

const.js

```js
window.whizzy = window.whizzy || {};
window.whizzy.const = window.whizzy.const || {};

// HP URL
window.whizzy.const.HP_URL = 'http://www.whizzy.co.jp';
```

これでIEでもconst(的なもの)を利用できる。
CentOS7 に  旧 APC （apcu & opcache）を導入する

CentOS7で標準パッケージ導入したPHPの、キャッシュ機能（APC）を構築します

# 環境
　OS　　:　CentOS Linux release 7.2.1511 (Core) 
　Web　 :　Apache/2.4.6 (CentOS)  64-bit  prefork
　PHP　 :　PHP 5.4.16 (cli) (built: Jun 23 2015 21:17:27) 　※ yum 標準インストール

# 課題
CentOS5/6 と同じ手順で PHPキャッシュを有効にすべき APC 導入を試みたが、
CentOS7では **パッケージ php-pecl-apc は利用できません。** と怒られてしまった

```bash
$ sudo yum install php-pecl-apc
パッケージ php-pecl-apc は利用できません。
エラー: 何もしません
```

# APC の導入
最近は APC ではなく、apcu と opcache らしいですね。
CentOS7 の標準リポジトリには入っていないようなので、サードパーティのリポを探索します

```bash
$ yum search apc --enablerepo=epel,remi
$ yum search opcache --enablerepo=remi
```

remi リポジトリにあったので、こちらをインストールして Apache を再起動します

```bash
$ sudo yum install --enablerepo=remi php-pecl-apcu.x86_64 php-pecl-zendopcache.x86_64
$ sudo systemctl restart httpd.service
```

インストール状態を確認します

```bash:apcu
$ php -i | grep apcu
Additional .ini files parsed => /etc/php.d/apcu.ini,
apcu
```
```bash:opcache
$ php -i | grep opcache | grep enable
opcache.enable => On => On
opcache.enable_cli => Off => Off
opcache.enable_file_override => Off => Off
```

#動作確認
ドキュメントルートに phpinfo.php を配置してアクセスしてみます

```phpinfo.php
$ vi phpinfo.php 
<?php  phpinfo(); ?>
```

apcu と Zend opcache が追加されていることを確認します

![01.png](https://qiita-image-store.s3.amazonaws.com/0/104535/7b1a05b9-1ebd-6174-a45f-ae585e0e5393.png)

![02.png](https://qiita-image-store.s3.amazonaws.com/0/104535/ec3d8933-555c-f05f-bfa8-9c9cd190d7a7.png)


過去にAPCを利用していれば、apc.php でも動作確認できるようです

![03.png](https://qiita-image-store.s3.amazonaws.com/0/104535/313dae44-d097-0bf2-b766-5cad61691363.png)

# 結果
WordPress の重いページに ApacheBench でテストしてみました

◆導入前
```Requests per second:    0.85 [#/sec] (mean)```
◆導入後
```Requests per second:    4.74 [#/sec] (mean)```

５倍以上とは、、、、

以上です
Ubuntu 14.04LTS で OpenJDK8 (Android build環境)

# Overview

不本意ながらUbuntu 14.04LTSの開発環境がぶっ壊れたので、再installしながら、メモ。
OpenJDK8の設定編。
というのは、最近の[Androidは、OpenJDK8が必要になった](http://source.android.com/source/initializing.html)ようで・・・。

```
$ sudo add-apt-repository ppa:openjdk-r/ppa
$ sudo apt-get update
$ sudo apt-get install openjdk-8-jdk
```

とすると、この環境だと依存関係がおかしくてダメだと言われますので、、、

```
$ sudo apt-get -f install
```
をすることで、

```
$ sudo apt-get install openjdk-8-jdk
```

が可能になります。。。

お試しあれ。。。。

(先のリンク http://source.android.com/source/initializing.html では、
上と違って、自分で.debをdownloadしてinstallしろとか言われますが、依存するライブラリーを大量に手動で解決しなければいけないのでおすすめしません。。。)

合わせて、

```
$ sudo apt-get install git-core gnupg flex bison gperf build-essential \
  zip curl zlib1g-dev gcc-multilib g++-multilib libc6-dev-i386 \
  lib32ncurses5-dev x11proto-core-dev libx11-dev lib32z-dev ccache \
  libgl1-mesa-dev libxml2-utils xsltproc unzip
```

もやっておきましょう。。。
htmlにyoutube動画を埋め込んでランダム&リピート再生

#はじめに
htmlにyoutubeの動画を埋めこんで連続再生する。
その場合は、YouTube Iframe APIを使う
[YouTube IFrame API](https://developers.google.com/youtube/js_api_reference?hl=ja)

#使い方
htmlはこんな感じ。
playerWallが何故書かれているのかは後述
responsiveでPCの時だけ動画ハンドリングする。

```html
<div id="playerWrapper" class="hidden-xs hidden-sm">
	<div id="player"></div>
	<div id="playerWall"></div>
</div>
```

cssはこんな感じ

```css
/* playerの周り */
#playerWrapper {
	position: absolute;
	top: 0;
	left : 0;
	height: 100%;
	z-index: 101;
}
/* playerそのもの */
#player {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
	background-color: #fff;
	z-index: -999 !important;
	/* z-indexでもはまる */
}
/* playerの前に立ちはだかる壁 */
#playerWall {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
	background-color: #fff;
	z-index: 100;
}
```

そして問題のjs。
ちなみにYouTube Playerはデフォルトではz-indexを無視してくれます。
これは``wmode : "transparent"``というoptionをセットすることで回避できます。

あと、option系はhtmlに埋め込むのでcontrol系は非表示にするなどの工夫も必要。
今回はplaylistのランダム再生なのでplaylistにも動画一覧を用意。

```js

// ムービーリストを用意
// YouTubeのIDを配列に入れておく。
// この場合、動画の尺は各々30秒で作成している前提。
var movieList	= ['ABCDEFGHIJK','abcdefghijk'];

function onYouTubeIframeAPIReady() {
	// iFrameが準備できたらビデオを再生
	playVideo();
}

function playVideo(){
	// どちらを再生するかはランダム決定
	rand		= Math.floor(Math.random() * movieList.length);
	movie		= movieList[rand];

	// playerの準備
	player = new YT.Player('player', {
		videoId: movie,
		playerVars: {
			controls: false,
			disablekb: true,
			showinfo: false,
			rel: false,
			enablejsapi: true,
			listType: 'playlist',
			cc_load_policy: false,
			wmode: 'transparent', //z-indexを有効にする
			loop: true,
			playlist: 'ABCDEFGHIJK,abcdefghijk'
		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
	// z-indexには気をつけろ。
	$('iframe').css('z-index',-999);
}

function onPlayerReady(e) {
	e.target.playVideo();
}

function onPlayerStateChange(e){
	if(e.data == YT.PlayerState.PLAYING){
		// ビデオが再生されて1秒後に動画をフェードイン
		setTimeout(function(){
			$('#background #playerWall').fadeOut(1000);
		},1000);
		// 動画がもうすぐ終わる28秒のタイミングで動画をフェードアウト
		setTimeout(function(){
			$('#background #playerWall').fadeIn(1000);
		},28000);
	}else if(e.data == YT.PlayerState.ENDED){
		e.target.playVideo();
	}
}
```

#YouTube動画をhtmlに埋め込むための注意点
YouTubeの場合は、ネットワーク状況が悪いと再生開始までに時間がかかる。
サイトの背景が白い場合再生開始までは黒い画面がサイト内に表示されてしまう。

解決策として考えたのが、再生開始や再生終了のイベントが取得できるので、playerそのものをfadeIn(), fadeOutさせて黒い画面を汚さないこと。
そのため、cssでは``#player``（playerのdivに割り当てられているid）を``display: none;``にしてイベントで表示・非表示に成功！と思ったのもつかの間、IEで動かない。

#IE対応
一つ一つの関数でconsole.logしながら調査してみると、結果的には推測となるがIEでは``display: none;``の要素で``onPlayerReady()``とか``onStateChange()``とかのイベントが受け取れないようだ。
そのため、``playVideo()``に進めず、待っても待っても動画が表示されない。

そこで、逆転の発想。
\#playerの前面に白いdivを用意して、そのdivをfadeIn(), fadeOut()することでなんとか成功。

IE恐るべし。

#実装したサイト
[KAOCACHI研究所](http://www.kaodachi.com/)
※ PCのみ動画埋め込み。しかも縦の動画を使ってます。
cv::PCAの使い方メモ

　次元削減や特徴抽出で何かと用いられる主成分分析ですが、OpenCVで簡単に行うことができます。日本語の書籍では見かけた記憶が無いので、今更ですが使い方をメモしておきます。

#使用する画像
AT&Tの顔画像データベースからお借りします。
10人分を10枚、計100枚を使用しました。
http://www.cl.cam.ac.uk/research/dtg/attarchive/facedatabase.html

#cv::PCAの使い方
　画像に対して主成分分析をかけるならば、一枚一枚の画像を横or縦のベクトルに変換し、それらを並べたcv::Mat型の行列を作ります。共分散行列は自動的に作ってくれるので、行列を作って入力するだけでOKです。

2番目の引数をcv::Mat()にしておけば、自動で平均ベクトルを算出してくれます。
3番目の引数は、各行に横ベクトルの形でデータがあるならばCV_PCA_DATA_AS_ROWを、各列に縦ベクトルの形ならCV_PCA_DATA_AS_COLを指定します。
最後の引数は、欲しい固有ベクトルの数です。
`cv::PCA pca(pixelMatrix, cv::Mat(), CV_PCA_DATA_AS_ROW, 3);`

処理が終わると、平均ベクトル・固有ベクトル・固有値がcv::PCAのクラスに保存されます。固有ベクトルはeigenvectorsの各行に保存されているので、row()によって取り出せます。射影もproject()によって行えるので、後は認識なり可視化なりご自由に。
`cv::Mat eigenVector = pca.eigenvectors.row(0);`

#顔画像の固有ベクトル(固有顔)
気が向いたら可視化や認識の方もまとめます。
![e1.png](https://qiita-image-store.s3.amazonaws.com/0/111593/0c26cfb5-6c17-7cda-42da-22cec779277c.png)


#ソースコード
おまけ程度

```cpp:EigenFace.cpp
#include <iostream>
#include <fstream>
#include <string>
#include "opencv2\\opencv.hpp"

const int SAMPLES = 10;
const int CLASS = 10;
const int SIZE_X = 92;
const int SIZE_Y = 112;
const std::string INPUT_FILE_NAME = "input.txt";   // 入力ファイル名
//const std::string OUTPUT_FILE_NAME = "output.txt"; // 出力ファイル名

int main(){
	// 画像読み込み
	cv::Mat pixelMatrix(cv::Size(SIZE_X*SIZE_Y, SAMPLES*CLASS), CV_8UC1);
	std::ifstream ifs(INPUT_FILE_NAME);
	std::string fileName;
	for (int j = 0; j < CLASS; j++){
		for (int i = 0; i < SAMPLES; i++){
			// 横ベクトル化して保存
			std::getline(ifs, fileName);
			cv::imread(fileName, 0).reshape(0, 1).copyTo(pixelMatrix.row(j*SAMPLES + i));
		}
	}
	
	// ビット深度変換およびスケーリング
	pixelMatrix.convertTo(pixelMatrix, CV_32FC1, 1. / 255.);

	// 主成分分析
	cv::PCA pca(pixelMatrix, cv::Mat(), CV_PCA_DATA_AS_ROW, 3);

	// 固有顔
	cv::Mat eigenVector = pca.eigenvectors.row(0);
	cv::normalize(eigenVector, eigenVector, 1.0, 0.0, cv::NORM_MINMAX);
	cv::Mat eigenFace = cv::Mat(cv::Size(SIZE_X, SIZE_Y), CV_32FC1);
	for (int j = 0; j < SIZE_Y; j++){
		for (int i = 0; i < SIZE_X; i++){
			eigenFace.at<float>(j, i) = eigenVector.at<float>(0, j*SIZE_X + i);
		}
	}

	cv::imshow("eigan face", eigenFace);
	cv::waitKey();

	return 0;
}
```
Android  TextureView、SurfaceViewで簡単にアニメーション    〜FPSAnimator〜

# FPSAnimator

TextureViewまたは、SurfaceViewで簡単にアニメーションが作成できるライブラリです。
Bitmap描画、Text描画、直接Canvasにカスタマイズしたものをアニメーションさせることも可能です。
Tweenアニメーション、放物線運動、スプライトシートアニメーションが簡単に作成できます。
特徴として、FPSの制御も可能です。アニメーション以外にも多くのViewの更新等がある際には少しFPSを下げる等をして全体のバランスをとることが可能になります。

<a href="https://github.com/MasayukiSuda/FPSAnimator">FPSAnimator</a>

# 基本的な使い方
Gradleの設定

```
    dependencies {
        // jCenter
        compile 'com.daasuu:FPSAnimator:0.2.2'
    }
```
FPSTextureViewをレイアウトに設定。attributeにFPSを設定。SurfaceViewを使用の際はFPSSurfaceView
を使用してください。
デフォルトのFPSは30で設定されています。

```
    <com.daasuu.library.FPSTextureView
        android:id="@+id/animation_texture_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:FPSAnimator_fps="24"
        />
```
ActivityのonCreate、FragmentのonCreateViewでbindします。


```
    private FPSTextureView mFPSTextureView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_easing_sample);
        mFPSTextureView = (FPSTextureView) findViewById(R.id.animation_texture_view);
    }
```
DisplayObjectを作成し、それをFPSTextureViewにadd。tickStartの関数をたたき、アニメーション開始
されます。なお、tickStartを行うタイミングはonResumeでtickStart、onPauseでtickStopが推奨されています。

```
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
    DisplayObject bitmapDisplay = new DisplayObject();
    bitmapDisplay
            .with(new BitmapDrawer(bitmap))
            .tween()
            .toX(1600, windowWidth - bitmap.getWidth(), Ease.BACK_IN_OUT)
            .waitTime(1000)
            .alpha(1000, 0f)
            .alpha(1000, 1f)
            .end();
            
    mFPSTextureView
                .addChild(bitmapDisplay)
                .tickStart();
```

<img src="https://raw.githubusercontent.com/MasayukiSuda/FPSAnimator/master/art/tweenBitmapSampleDemo.gif">

上記のようなアニメーションが作成されます。
1.6秒で画面横までいき、1秒静止。
1秒で透明になり、1秒で透明が1に戻る。
CreatejsのTweenに似ていますね。


他にもSpriteSheetアニメーションや、放物線運動のClassも簡単に実現可能です。
他2つに関してはまた別の記事で書かせていただきます。

ぜひ、libraryにgithubのStarをお願いします。
<a href="https://github.com/MasayukiSuda/FPSAnimator">FPSAnimator</a>

追記：
Tweenアニメーションの詳細は<a href="http://qiita.com/MasayukiSuda/items/b15e5e5307f406994959">こちら</a>
SpriteSheetアニメーションの詳細は<a href="http://qiita.com/MasayukiSuda/items/a6bf8050f9387a2fcf5b">こちら</a>
放物線運動アニメーションの詳細は<a href="http://qiita.com/MasayukiSuda/items/25efa3684a9712a77f69">こちら</a>
Express.jsで作ったアプリをクラスタ化する

# Node.js製Webアプリの問題点
Node.jsは、その性質上シングルスレッドで処理を実行するので、CPUを1つしか使えません。
しかし、最近のマシンはマルチコアであることが多く、Node.jsを使ったアプリが、その性能を活かしきるができないのは、大変もったいないです。
そこで、ベストなアプローチとして、アプリのクラスタ化を行うことでマルチコアの性能を引き出すことができるようになります。

# クラスタ化 is 何
アプリの親となるプロセスをforkして、子となるプロセスを作る。
結果、負荷を分散することができる。

おそらく、「1つCPUでやるより、4つのCPUで処理したほうが早いよね！そうしよう！」がクラスタ化だと思えば良いっぽい。(クアッドコアのマシンの場合ね)

# express-clusterを使う
cluster化を行うモジュールはいくつか選択肢があったが、[express-cluster](https://github.com/Flipboard/express-cluster)を使うことにした。
Flipboard社が作っているモジュールであるということで、そこそこに安定して使えるだろうと判断した。

使い方も至ってシンプルで、以下のように書くだけでアプリのクラスタ化ができる。

```
'use strict';

const http = require('http');
const express = require('express');
const cluster = require('express-cluster');

let app = express();
let server = http.createServer(app);

let host = process.env.HOST || '127.0.0.1';
let port = process.env.PORT || 3000;

cluster(function(worker) {
  server.listen(port, host, () => {
    console.log('Server running on http://' + host + ':' + port + ' with pid ' + process.pid + ' with wid ' + worker.id);
  });
});
```

# 他の選択肢

## Cluster
この他にも、Node.js v0.6で追加されたClusterモジュールを使うことによって、アプリをクラスタ化することができる。しかし、結構自分で色々書く必要がありそうで、ダルそう。

## throng
「[throng](https://github.com/hunterloftis/throng)」は書くつもり無かったんだけど、ふと久々にリポジトリを見に行くと、つい数日前にv2がリリースされていたので面白半分で書いてみる。
READMEをサクッと見た感じだと、とてもシンプルに書けることが特徴のようだ。

# まとめ
まぁ、アプローチの仕方はなんであれ、Node.jsで作ったアプリはクラスタ化しましょうという話でした。
underscoreコードリーディング（create）

underscoreに詳しくないので、勉強半分でソースコードを読む。



##利用するバージョン
[underscore.js(v1.8.3)](https://github.com/jashkenas/underscore/tree/1.8.3)


##createとは


###[underscorejs.orgのcreate](http://underscorejs.org/#create)

こんな説明。
>####_.create(prototype, props) 
>Creates a new object with the given prototype, optionally attaching props as own properties. 
>Basically, Object.create, but without all of the property descriptor jazz.


```javascript
var moe = _.create(Stooge.prototype, {name: "Moe"});
```
------------- 
propsに付け加えられたものを独自のプロパティとしてprototypeに持つ、新しいオブジェクトを生成します
基本的にObject.createだけれども、すべてのプロパティのディスクリプタのジャズ？は存在しません。

###[underscore.create](https://github.com/jashkenas/underscore/blob/1.8.3/underscore.js#L1058)
コード的にはこのあたり。

```javascript
  // Creates an object that inherits from the given prototype object.
  // If additional properties are provided then they will be added to the
  // created object.
  _.create = function(prototype, props) {
    var result = baseCreate(prototype);
    if (props) _.extendOwn(result, props);
    return result;
  };

```

resultにbaseCreateにprototypeを渡した結果を格納する。
propsが存在する場合、_.extendOwnを用いてresultにpropsを追加する。
resultを返す。


利用している[underscore.baseCreate](https://github.com/jashkenas/underscore/blob/1.8.3/underscore.js#L115)は以下

```javascript
  // An internal function for creating a new object that inherits from another.
  var baseCreate = function(prototype) {
    if (!_.isObject(prototype)) return {};
    if (nativeCreate) return nativeCreate(prototype);
    Ctor.prototype = prototype;
    var result = new Ctor;
    Ctor.prototype = null;
    return result;
  };
```

prototypeが_.isObjectで合致しなかった場合、空のオブジェクトを返す。
nativeCreateが存在する場合、nativeCreateを用いた結果を返す。

2つとも合致しなかった場合、Ctorのprototypeにprototypeを追加する。
resultにCtorをnewしたものを格納する。
Ctorのprototypeをnullにする。
resultを返す。
Raspbian (jessie) Wi-Fi (固定アドレス) の設定 (変更)

#結局、/etc/network/interfaces は

#ループバック
```
auto lo
iface lo inet loopback
```

#内蔵部分
```
auto eth0
iface eth0 inet static
address 192.168.1.Xa
netmask 255.255.255.0
gateway 192.168.1.YY
dns-nameservers 192.168.1.ZZ
```

#Wi-Fi部分
```
allow-hotplug wlan0
iface wlan0 inet static
wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
address 192.168.1.Xb
netmask 255.255.255.0
gateway 192.168.1.YY
dns-nameservers 192.168.1.ZZ
```
ちゃんとしてませんがコレで大丈夫っぽいです。
【自分用メモ】wordpress


#DB構造
https://wpdocs.osdn.jp/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E6%A7%8B%E9%80%A0#.E3.83.86.E3.83.BC.E3.83.96.E3.83.AB.EF.BC.9A_wp_terms
Elixir書き始め１

知り合いから、現在Webアプリケーションで最速なのはElixir＋phoenixだと聞いて、
早速試してみたのだが、色々とはまった導入時の問題点、Elixir自体の言語の特徴について、知りうる限りをまとめていこうと思う。

勿論、自分への備忘録も兼ねてだ。
（プロ以外の人も読むかもしれないので、できるだけ親切に）

動かすことにはうまくいった、
Elixir＋phoenixはWebアプリとしては信じがたいほど早い、PHPのフレームワークなんぞどれも亀に思えるほど早い。1ms以内にレスポンスが返ってきた。

最初に参考にしたのはこちらの方の記事
http://qiita.com/kazusa-qooq/items/8281c2c02085d2c2c1f1

以下網羅的なインストール手順、環境はLinux Mint17.3で実行された。

#1 Elixirの実行環境のインストール

このファイルがないとinstallに失敗することがあるらしい
$ sudo touch /etc/init.d/couchdb

erlangの依存関係リストを取得し登録。
$ wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb

$ sudo dpkg -i erlang-solutions_1.0_all.deb

依存関係を更新（実はよくわかってない）
$ sudo apt-get update

elixirをインストール。いや簡単でいいね、makeする覚悟だったのだが。
$ sudo apt-get install elixir

#2 処理系を動かしてみよう

大別して、二種類ある
一つは対話型実行、もう一つはコマンドでファイルに記述されたコードを一気に走らせる。

対話型実行なら
$ iex

↑これで対話型の環境が起動する。
Ctl+Cを押すと

BREAK: (a)bort (c)ontinue (p)roc info (i)nfo (l)oaded
       (v)ersion (k)ill (D)b-tables (d)istribution

って表示されるので、出たいときはa、エンターで出れる。

コマンドラインで実行するには(例はsample.exeに書かれたコードを実行する)
$ elixir sample.exs

これで実行できる

#3 これから何を覚えなくてはいけないのか？

せっかく、言語の処理系を入れたのだから基本的な文法だろう。

http://learn-with-muse.sato-t.net/?page_id=3001

ここを参考に色々と動かしてみて、理解を深めているのが現状。
色々サンプルコードをいじって、動かして試して段階だ。
（この入門の元ネタなんだろう？、これがラブライブ？？）

ひょっとしたら、Elixirは関数型言語なので書籍の充実したLispとかを勉強したほうが、もっとスマートに書けるようになるのかもしれない。
シュガーシンタックスも無いしね。

#4 無いものねだりをしても仕方ないが

まだ採用実績の少ない言語、当然IDEのプラグインとかもない。
開発の現場で採用するには、まだ早い技術なのかもしれない。

幸い、現時点でVimとサブライムテキストエディタにはプラグインがあるので、必要な方は導入すると、少しは楽になるかもしれない。。。。

次回は書き始めるのに少しでも楽になるように、Vimの設定やその辺を軽くいじって、サンプルコードのふるまいについて書いていこうと思う。

急がば回れだ、phoenix自体を扱う前に言語自体の仕様はある程度把握しておかなければいけない。
javascriptでのページ内smooth scroll

以前どっかにあるライブラリ使っていたんですが、エラーが発生したので自分で書きました。
6行目でhtmlとbodyを両方指定しているところがミソです。

```js
/**
 * ページ内リンクでスムーズなリンク移動
 * @param {object} obj -クリックされたオブジェクト
 */
function smoothScroll(obj){
	var speed = 1000;
	var href= obj.attr("href");
	var target = $(href == "#" || href == "" ? 'html' : href);
	var position = target.offset().top;
	$("html, body").animate({scrollTop:position}, speed, "swing");
	return;
}
```

用意したらクリックで発動！
speedを変えれば移動速度を変更できます。

```js
$(document).on('click','a[href^=#]',function(){
	smoothScroll($(this));
});
```
console.logが動かないブラウザのためのおまじない

古いIEが早く亡くなることを祈って

```js
/* for IE */
if( typeof window.console === "undefined" ){window.console = {};}
if( typeof window.console.log !== "function" ){window.console.log = function(){};}
```

これで古いIEでは無視される。でも、デバッグはしんどい。
Go のバッファ付きチャネル close の挙動

## バッファ付きチャネルをcloseするとどうなるか

突然ですが、次のプログラムを動かした時の出力を答えてください。

```go
package main

import "fmt"

func main() {
	// バッファ 2 のチャネル
	ch := make(chan int, 2)
	ch <- 1
	ch <- 2
	close(ch)

	for n := range ch {
		fmt.Println(n)
	}
}
```

正解はこちら
https://play.golang.org/p/mDvIj--7zC

```
1
2

Program exited.
```

先にcloseされていますが、バッファに残っている値はすべてちゃんと読みだしてからcloseを判断しているようです。

## チャネルの受信側には、すべての値が読み出されてから close 通知がくる

次のプログラムを動かして見ましょう

```go
package main

import "fmt"

func main() {
	// バッファ 3 のチャネル
	ch := make(chan int, 3)
	ch <- 1
	ch <- 2
	close(ch)

	n1, ok1 := <- ch
	n2, ok2 := <- ch
	_, ok3 := <- ch
	
	fmt.Println(n1, ok1)
	fmt.Println(n2, ok2)	
	fmt.Println(ok3)
}
```
https://play.golang.org/p/1CiCfR5mou

```
1 true
2 true
false
```

## 送信側からは、closeしたチャネルには値を送信できません

```go
package main

func main() {
	// バッファ 3 のチャネル
	ch := make(chan int, 3)
	ch <- 1
	ch <- 2
	close(ch)

	ch <- 3
}
```
https://play.golang.org/p/yt3thjb8j7

```
panic: send on closed channel

goroutine 1 [running]:
main.main()
	/tmp/sandbox997235944/main.go:10 +0x120
```

送信側は、チャネルがバッファ付きだろうがなかろうが、データを送りきってからcloseすれば良いわけです。
close するタイミングと、受信側でcloseされたと判断されるタイミングに時差があるので、結果的には直感的ですが、ちょっと戸惑う挙動かと思います。
あまり言及している記事がなかった記憶があるので、知っているとproducer-consumer パターンの実装の時に役立ちます。
javascriptでGETパラメーターを取り扱う

#目的
javascriptでGETパラメーターの解析をしましょうというものです。
PHPやJavaは利用できないシーンとかで、パラメーターを引き回したりする時に使っていました。

#使い方
下記の関数をまずは用意します。

```js
function getParams(){
	var url = document.location.href;
	if(url.match(/#/)){
		url = RegExp.leftContext;
	}
	if(url.match(/\?/)){
		var params = RegExp.rightContext;
	}else{
		return new Array();
	}
	var tmp = params.split('&amp;');
	var param = new Array();
	var tmp2, key, val;
	for(var i = 0; i &lt; tmp.length; i++){
		tmp2 = new Array();
		key = '';
		val = '';

		tmp2 = tmp[i].split('=');
		key = tmp2[0];
		val = tmp2[1];
		param[key] = val;
	}
	return param;
}
```

上記の関数を呼ぶことでGETパラメーターの値を簡単に取得できます。

よくリンクにページ内リンクの#がつくことがありますが、その場合はマッチした箇所の左側だけをURLと認識してます。

そのあとで?でsplitしてパラメーター部分を取り分けて、さらに&と=で分割するという処理をしてます。

例えば http://whizzy.co.jp?param1=hoo&param2=bar というようなURLがあります。

そのURLで動かすjavascript内で

```js
var params = getParams();
```

とすると、paramsという変数に各パラメーターが連想配列で入ってきます。

それ以降は各パラメーターの値にアクセスできます。

```js
alert(params['param1']); // fooが表示される。
alert(params['param2']); // varが表示される。 
```

もし使えそうな機会があればどうぞ。
Pythonにおける文字列オブジェクトのメソッド

本投稿が自身初となります。

最近独学でPythonを始めたので、今回は**文字列に関するメソッド**をいくつか列挙していきます。
以下、扱う文字列オブジェクトは'str'とします。

- capitalize()
- 
文字列の先頭のみを大文字に変換します
- casefold()
-
大文字小文字を無視して文字列検索できるように、文字をすべて小文字に変換する
- center(width(,char))
-
指定した文字数で文字列を中央揃えする。空白には'char'で指定した文字列を埋める。
- count(search(,start(,end)))
-
文字列内に'search'が含まれる回数を返す。なお、以下のようなコードでは文字列が重ならないように数えられる。

```python:test.py
>>>'aaaaaa'.count('aaa')
2
```

- endswith(string(,start(,end)))
-
文字列の末尾の一致を確認する。開始位置・終了位置を指定した場合はスライス演算と同様の規則（（3,-4）など）を用いる。

続きは参考文献をご覧ください。

- 参考文献
石本敦夫：Python文法詳解,オライリー・ジャパン,2014
[Amazonより](http://www.amazon.co.jp/Python%E6%96%87%E6%B3%95%E8%A9%B3%E8%A7%A3-%E7%9F%B3%E6%9C%AC-%E6%95%A6%E5%A4%AB/dp/4873116880/ref=sr_1_1?s=books&ie=UTF8&qid=1455374675&sr=1-1&keywords=python%E6%96%87%E6%B3%95%E8%A9%B3%E8%A7%A3)
Twitter API を使わないでbotをつくってみた

# 内容
* Windowsならもともと入ってるものだけで構成されている
* Twitterに自動投稿できるようになる
* Twitter APIは使わない
* Windows Script Hostを使う
* IEで動く
* 基本的にはJavaScript

完成品はこちら↓
https://github.com/ko-he-/noAPI_Twitter_bot

# 使い方

* とりあえず上のリンクからnoAPITwitterbot.jsをダウンロード
* 自分のTwitterのアカウント情報を設定

```
var userName = "****"
var userPassword = "****"
```

* 投稿したい内容を設定
** とりあえずは現在時刻とあいさつが投稿されるようになっています。

```
var tweetText = 'おはようございます' + year + '年' + month + '月' + day + '日' + hour + '時' + min + '分' + sec + '秒</strong>' + 'です';
```

* noAPITwitterbot.jsをプログラムから開くでwindows based script hostで実行

* bot化する場合
  * タスクスケジューラを使います
  * 参考：http://www.atmarkit.co.jp/ait/articles/1305/31/news049.html

# ちょっとだけ解説

* ブラウザの起動・終了はWindows Script Hostの関数を使っていますが基本はJavaScriptです
* ChromeやFirefoxなどの開発者ツールを使ってIdやClassなどからButtonやTextBoxなどのElementを取得します
* 値を入れたらイベントを発火させてログインや投稿を行います
RubyでYAMLを取り扱う

## 実現したいこと

YAMLをRubyで取り扱いたい

## 実現方法および解決方法

rubyの標準モジュールyamlを利用すればよい

## スクリプト

test.yml

```
---
fruit:
  - apple
  - melon
  - orange
  - banana
  - strawberry
Vegetable:
  - okra
  - cabbage
  - taro
  - sweet potato
```

yaml.rb

```
#!/usr/bin/env ruby                                                                                                                                

require 'yaml'
require 'pp'

str = ARGF.read()
data = YAML.load(str)
pp data

puts "------------------------"

pp data["fruit"]

puts "------------------------"
for var in data["fruit"] do
  puts var 
end
```

## 情報源

## 補足
javascriptで金額を3桁区切りにする

ECサイトとかで金額を3桁ずつカンマで区切りたいというときがあります。
だけど、DBでは数値で持っているので、3桁ずつ区切るのはjsでやらなくてはいけない。
そんな時はこの関数を使ってみてください。

```js
function addFigure(str) {
	var num = new String(str).replace(/,/g, "");
	while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
	return num;
}
```

そして価格のところを全て同じclassにしてjQueryのeachで回せば、OKです。

```js
$('.product_price').each(function(){
	$(this).html(addFigure($(this).html()));
});
```
javascriptで０パディング（0で桁埋め）する

いろいろやり方があると思いますが、下記の書き方がシンプルです。

```js
function zeroPadding(num,length){
	return ('0000000000' + num).slice(-length);
}

var num = zeroPadding(346,8);
alert(num); // 00000346が表示されます。
```

numにオリジナルの数字を、lengthに桁数をいれてください。
例えば、numが346でlengthが8の場合は00000346が返されます。
他のところでも色々使える基本ライブラリです。
Unity3D-簡単なゲームを作りながら学ぼう③

#3回目　飛行機が動くようにスクリプトを作成してみます。

##まずはプロジェクトの設定情報から軸の設定情報を確認
>Edit -> Project Settings -> Input選択

![37.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/f03219c9-5dbb-eecf-cdf7-d4ea29cabb01.png)

>以下の情報からLeftはマイナス、Rightはプラス、Downはマイナス、Upはプラスに設定されているのが分かります、その他はLeftキーはa, Rightキーはd, Upキーはｗ, Downキーはsに設定されています。

![38.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/f7e37afb-b207-2e57-cca3-cbacd185cfb6.png)

##キーボードで飛行機を動くようにスクリプトを作成します。
 
>Assetsでマウス右クリックしてcreate->C# Scriptを選択しましょう

![36.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/186ba932-e78a-005e-166f-c69cc94bc65b.png)

## C#ファイルができるのでそれをダブルクリックして編集します。
```c#
using UnityEngine;
using System.Collections;

public class move : MonoBehaviour {

    int speedNum = 10;  //移動速度

	
	void Update () {

        if(Input.GetKey(KeyCode.A) == true)
        {
            //Leftに移動
            transform.Translate(Vector3.left * speedNum * Time.deltaTime);
        }

        if(Input.GetKey(KeyCode.D) == true)
        {
            //Rightに移動
            transform.Translate(-Vector3.left * speedNum * Time.deltaTime);
        }

        if (Input.GetKey(KeyCode.W) == true)
        {
            //前進
            transform.Translate(Vector3.forward * speedNum * Time.deltaTime);
        }

        if (Input.GetKey(KeyCode.S) == true)
        {
            //後退
            transform.Translate(-Vector3.forward * speedNum * Time.deltaTime);
        }

    }

   
}

```

>Vector3については以下を参考してください。
http://docs.unity3d.com/ja/current/ScriptReference/Vector3.html

>編集が終わったらPlayerを選択してスクリプトをドラッグ＆ドロップします。
右にInspectorからMove(Script)が追加されています。これで飛行機が動きます。

![39.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/4994dba1-e23a-7c53-4587-802e25cd31b5.png)

>ここで **TIP！！！！**
Global軸とLocal軸が違うときに飛行機が全然違う方向に動く時がある。その時には以下の参照して解決しましょう。
http://docs.unity3d.com/ja/current/Manual/HOWTO-FixZAxisIsUp.html

>これで動きました。次回はミサイル発射！！！！

![10SS5CBIui.gif](https://qiita-image-store.s3.amazonaws.com/0/108475/4b1b0c6f-cecc-1303-ed64-d24a5d1ddc31.gif)
Sinatraを使って５分くらいでWebブラウザにHelloを表示させる方法

先日、Ruby勉強会でSinatraの存在を知りました。
Sinatraは、Ruby on Railsに比べて軽量であり、
Rubyを勉強するには適している(Railsとくらべて機能が少ない分自分で作ることになるが、それが勉強になる)とのことだ。 

#この記事を読むことによって実現できること
・下の図のようにSinatraを使って、ブラウザにHelloという文字を出せるようにする。
・Webサイトを作るための土台ができる。

![スクリーンショット 2016-02-13 20.10.14.png](https://qiita-image-store.s3.amazonaws.com/0/46535/0cdb8f2a-22e7-caf4-a3a0-56d31473c5f1.png)



#Sinatraを使う前にやっておくこと
・Ruby本体のインストール


#Sinatraをインストールする
gemからsinatraをインストールします。

```
gem install sinatra
```

#ソースコードを書く
任意のディレクトリ(下図ではRootと記載)に以下の様なフォルダ構成で
ソースコードを書く。

```
Root
|-- main.rb (コントローラ)
`-- views
    `-- sample.erb (ブラウザに表示させるView部分)
```


```ruby:main.rb
require 'sinatra'
require 'sinatra/reloader'

get '/' do
 @hoge="Hello"  #hoge変数にデータをセットする
 erb :sample #viewの中の「sample.erb」を呼び出す
end
```

```erb:main.erb
<html lang="en">
<h1><%= @hoge %></h1>
</html>

```

#アプリを実行する
以下の様なコマンドを入力してアプリを起動します。
HTTPServerが動きます。
この場合は、ポート4567で動きます。

```
$ruby main.rb 
[2016-02-13 19:55:47] INFO  WEBrick 1.3.1
[2016-02-13 19:55:47] INFO  ruby 2.2.4 (2015-12-16) [x86_64-darwin14]
== Sinatra (v1.4.7) has taken the stage on 4567 for development with backup from WEBrick
[2016-02-13 19:55:47] INFO  WEBrick::HTTPServer#start: pid=658 port=4567
```

#動作確認
ブラウザを開いて以下のURLにアクセスします。
http://localhost:4567/

![スクリーンショット 2016-02-13 20.10.14.png](https://qiita-image-store.s3.amazonaws.com/0/46535/225ddc41-ef24-170c-aba9-b9aff4fde5d6.png)

以上です。
同人フライトシューティングゲームのゲーム内容を調整するときに注意したいこと

# 「開発者３倍段」と肝に刻め

剣道３倍段、という言葉がある。
異種格闘技で戦う際、剣道は「剣という武器のリーチ・威力がある分、有利だ」というものだ。

あなたがそのゲームの開発者自身なら…

- あなたはすべてのアルゴリズムを把握している
- あなたは各ステージで起こる事件も展開も、発生する時間単位で知っている
- あなたは各ステージの厳密な勝利条件も、その判定方法も知っている
- あなたは敵の数、配置、AIの特性、死角を熟知している
- あなたはゲーム中の何がランダムで、何がランダムではなく決まるか知っている
- あなたはランダム要素の全要素数も、その要素に何が入っているかも、選択確率も知っている

プレイヤーは、これらの要素を具体的なデータで知ることは決してない。繰り返しプレイして、体感的な話をするのがせいぜい限界である。

だが、あなたは創造主だ。
創造主であるから、プレイヤーが知り得ないことをすべて知っている。だから、本来のプレイヤーより３倍は強い。

自分が「スリルある生きるか死ぬかのプレイで楽しい」ミッションは、おおむねクソになっている可能性がある。

最初に、だれか遊んでくれるテスターを見つけよう。ゲームの上手な人だけでなく、下手な人にもお願いできるとよい。

そして、テスターの意見には真摯に耳を傾けること。

テスターの感じた違和感、不満、感想は、あなた自身では決して気が付くことができない、とても重要な情報だ。どうしたら違和感や不満を解消できるかよく考えることで、さらにゲームの完成度が高まるだろう。

# フライトシューティングゲームにおける難易度の本質

フライトシューティングゲームは、敵の攻撃を回避して敵に弾を当てるゲームだ。
シューティングゲームとしてやや異色なところは、

- 敵の多くが誘導弾（ミサイル）を撃ってくる
- 強制スクロールするゲームではないので、敵が視界外（背後や上下）からも撃ってくる

ところである。

ちょっとこのジャンルを遊んでみるとわかるが、後ろから撃たれる誘導弾を避けるのは一苦労だ。別の角度から同時に何発も撃たれたりすると、回避しきるのはかなり難しい。

難易度の一番のキーポイントは、

- プレイヤーを同時に狙って攻撃することのできる敵の数

ここにかかっている。同時攻撃数が多ければ多いほど、回避が大変になるからだ。（これはOR・オペレーションリサーチによっても裏付けられる。興味がある方は調べてみるとよい）

- 出現する敵の数、密度
- 敵の速度、機動性、射程、死角
- 敵の増援出現数、頻度、上限数
- 敵の耐久性（減らしやすさ）
- 友軍機の数（狙いの分散）、耐久性（分散の持続時間）

このあたりが調整可能項目だろう。

敵のせん滅をミッションオブジェクティブとして設定しておきながら、「物語の都合で絶対に墜落しないが、延々とプレイヤーを攻撃してくる敵」などがいると、ゲーム性は悪いほうにしかいかない。
なぜなら、プレイヤーは被弾リスクを下げるため、自分を攻撃する脅威をひとつでも多く排除したいのに、製作側の都合で撃墜できない敵が存在し続けることになるからだ。

# 解法の想定と「初見殺し」

ステージごとに、どこを難しくするか・どこを易しくするか設計をするわけだが、「１通りのみの解法を見つけてもらおう（他の方法では全部失敗）」とすると、プレイヤーにはかなりのストレスがかかる。最悪、それを見つけられずお手上げになってしまう。

プレイヤーは、開発者が思っているほどには情報を集めることはできない。ヒントを集めきれず、開発者の想定に思い至らないことのほうが多いものだ。

このあたりはテスターのフィードバックを受けながら探り探り進める部分ではあるが、

- 前提情報やヒントは、過剰と思うぐらい多く出す
- クリア方法は１通りだけに絞らない

といった配慮をしたほうがよい。

「敵に弱点を設定し、その弱点だけしか攻撃を受け付けない」ような設計をする場合があることと思うが、精密射撃が全く苦手でどうにもならないプレイヤーが挑んだときどうするのか…手間はかかるが精密射撃せずに勝てる方法を用意するか、など検討するとよいだろう。

一方で、「初見殺し」…初プレイ時には見破れない、プレイヤーを驚かせるギミックを仕込みたい場合もあるだろう。こうしたギミックは、同じ体験をしたプレイヤー間での共通の体験として、コミュニティを盛り上げるきっかけにもなったりする。

「初見殺し」を用意するときは、くれぐれも「卑怯な設計にはしない」ことがポイントだ。
何が公正かは、ゲーム設計、物語、想定するプレイヤー層によっても違うが、テスターのフィードバックをよく聞き、丁寧に情報を提示したい。

# そもそも、どんな難易度にするか

ゲームのコンセプト自体に関わる問題だ。
ステージを攻略するのにどのくらいの時間を想定するか？

さくっと１０分もあれば解ける内容にするのか、１時間は悩むようにするのか、１日かけて攻略に知恵を絞ってもらうのか。

ゲームだけではなく、様々な娯楽が可処分時間を奪い合う時代だ。

よく考えてコンセプトを決め、デザインしたいところである。

# 終わりに

こうして、つらつらとゲーム開発関連の記事を書き貯めてきているのだけれども。
え、肝心のゲームプログラミングについての投稿がないって？
…半年くらい先かなー？
スマホアプリでよく見かける赤い丸に「+」のボタン

スマホアプリでよく見かける「新規作成」「加える」という意味のボタンを、見よう見まねですが作成したのでメモ。

## 「新規作成」「加える」ボタンの表示結果
![icon_add.png](https://qiita-image-store.s3.amazonaws.com/0/113098/66ffa2b3-f033-62b4-08cf-09142701a251.png)

## ボタンの特徴詳細
- 赤い丸に「+」のデザイン、影付き
- 影は半透明、下の要素もばっちり見えるので邪魔にならない
- ボタンが他の要素より上に重なるように表示（z-indexの値は適当）
- 画面がスクロールしてもボタンは常に同じ位置に表示
- 画面の右下隅にボタンを表示（位置は結構適当）

## ボタンのソースコード / HTML+CSS
各プロパティの値は多少微調整が必要ですが、これで次回からコピペで作れるハズ！

```html:HTML
<div id="add_button">+</div>
```

```css:CSS
div#add_button {
    font-size: 21px;
    line-height: 55px;
    text-align: center;
    color: white;
    background-color: red;
    width: 55px;
    height: 55px;
    position:fixed;
    top:485px;
    left:280px;
    border-radius: 50%;
    z-index: 10;
    box-shadow:0px 3px 10px rgba(0,0,0, 0.3);
    -webkit-box-shadow: 0px 3px 10px rgba(0,0,0, 0.3);
    }
```
mruby-cliに付属のosxcrossでcmakeを使うには

# 背景

OpenCVを使ってWebカメラの表示ができるmrbgemのmruby-webcamをmruby-cliでビルド可能にした際に分かった。

# cmakeの不具合

mruby-cli付属のosxcrossを使ってcmakeなライブラリをクロスコンパイルすると、
動かない。

- https://cmake.org/Bug/view.php?id=14668

# 対策

リンク先に書いてある通り、

/usr/share/cmake-2.8/Modules/Platform/Darwin.cmakeを以下のように修正する。

```diff
--- Darwin.cmake~
+++ Darwin.cmake
@@ -341,7 +341,9 @@
     list(APPEND _apps_paths "${_apps}")
   endif()
 endforeach()
-list(REMOVE_DUPLICATES _apps_paths)
+if(_apps_paths)
+ list(REMOVE_DUPLICATES _apps_paths)
+endif()
 set(CMAKE_SYSTEM_APPBUNDLE_PATH
   ${_apps_paths})
 unset(_apps_paths)
```
eclipseにjadeのeditorをインストールする

#はじめに
最近jadeを使い始めたのですが、いつも使っているeclipseだとjadeファイルに対応したeditorもなくシンタックス流のチェックなどもしづらい。
しかも文字は全部グレー。

そんな時にjade用のeditorを見つけたのでインストール方法のメモ。

#install手順
###1. eclipseを開く
まずはeclipseを開きます。

###2. Enide StudioのURLにアクセス
[Enide Studio 2014 - Node.js, JavaScript, Java and Web Tools](https://marketplace.eclipse.org/content/enide-studio-2014-nodejs-javascript-java-and-web-tools)

###️3. URLのインストールボタンをeclipseのメニューにドロップする
![step1.png](https://qiita-image-store.s3.amazonaws.com/0/6876/9a4e3166-ba6f-c3d6-649e-fd13e4cda99a.png)

　　　　　　　　　　　　　　　　　↓

![step2.png](https://qiita-image-store.s3.amazonaws.com/0/6876/4ef245f2-9dab-614a-7386-4d31354591de.png)


###4. eclipse マーケットプレイスでフューチャーが読み込まれる。
![step3.png](https://qiita-image-store.s3.amazonaws.com/0/6876/71812036-9180-12a1-cca4-4de00086306b.png)

###5. インストール
何が必要かわからなかったので、とりあえず全部入りでconfirm…。

![step4.png](https://qiita-image-store.s3.amazonaws.com/0/6876/6de77741-decf-305e-935d-1dce989548ce.png)

途中で規約に同意しないと進めない

![step5.png](https://qiita-image-store.s3.amazonaws.com/0/6876/ba7a56b6-fc39-9235-607b-266f95a4adad.png)

インストールが完了し eclipse を再起動するか聞かれるので、もちろん再起動

###6. jadeファイルを開く
今までグレー 一色だったのに、色が付いていて見やすい！
![step6.png](https://qiita-image-store.s3.amazonaws.com/0/6876/dc480a65-b490-5c30-f6c2-16c8b5ce7685.png)

これでこれからの開発もバッチリ！なはず
kintoneからChatworkにメッセージを送る

すでにkintoneとChatworkの連携は[紹介](http://blog-ja.chatwork.com/2015/10/api-1.html)されておりましたが、公開されていたサイトがデータベース接続確立エラーということだったんで残しときます。

## 参考
- [Chatwork APIドキュメント エンドポイント](http://developer.chatwork.com/ja/endpoint_rooms.html)
- [kintone 外部APIの実行](https://cybozudev.zendesk.com/hc/ja/articles/202166320-%E5%A4%96%E9%83%A8API%E3%81%AE%E5%AE%9F%E8%A1%8C)

## 前提
チャットワークAPIは限定公開されているので使用するには[事前申し込み](http://developer.chatwork.com/ja/)が必要です。

## サンプル
```js:sample
var url = 'https://api.chatwork.com/v1/rooms/' + '(ルームID)' + '/messages';
var headers = {
    'X-ChatWorkToken': '(トークン)',
    'Content-Type': 'application/x-www-form-urlencoded'
};
var data = 'body=' + '(メッセージ)';

kintone.proxy(url, 'POST', headers, data,
    function(body, status, headers) {
        console.log(status, JSON.parse(body), headers);
    },
    function(error) {
        console.log(error);
    });
```
dataをJSONでPOSTしようとしたがうまくいかなかったのでとりあえずこちらで。わかり次第追記します。
さくっとBasic認証を追加するスクリプト

身内のちょっとしたサイトやサービス作成,一時的な非公開のファイル．
こういったものを/var/www/などの公開ディレクトリにアップしたはいいけれど，きちんとした認証は面倒なのでさくっとBASIC認証で済ませたいと思うことがあったので，スクリプトをメモしておいた．

以下のファイルをhoge.shとして作成し，実行（sh hoge.sh）とすれば実行したフォルダ内にBASIC認証のための.htaccessと.htpasswdが生成される．
ユーザ名とパスワードは対話的に入力．
最後にchmodでパーミッション変更するためにroot権限が必要．

gistにアップされているファイルをwgetしても良い．URL⇒[basicCreate.sh](https://gist.githubusercontent.com/varlal/e3752e98b604d3e95121/raw/2bae8a8f8b9084b7e02a8ce3cb7b974c065f3510/basicCreate.sh)


```bash:basicCreate.sh
#!/bin/sh

echo "Create .htaccess and .htpasswd for basic auth"

BASE_PATH=`pwd`
cat <<EOF > .htaccess
AuthUserfile $BASE_PATH/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user
EOF

echo -n "New ID:"
read USER_ID
htpasswd -c $BASE_PATH/.htpasswd $USER_ID

echo "change chmod 604.htaccess and  .htpasswd"
sudo chmod 604 .htpasswd .htaccess
```
Raspbian (jessie) Wi-Fi (固定アドレス) の設定

Wi-Fiアダプタは
**EDIMAX EW-7811UN (RTL8188CUS)**
を選択しました。
まずはWi-Fi (固定アドレス)の設定しました。

画面が無いのでまずは有線LANで接続しルータにてアドレス確認
puttyでssh接続しました。

そして
```lsusb
```
で認識してるか確認

まずはwi-fiの設定です。

```sudo vi /etc/network/interfaces
```
以下追加

```
allow-hotplug wlan0
iface wlan0 inet dhcp
wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
```
無線ルータで調べたSSIDとパスフレーズで
```wpa_passphrase SSID PassPhrase > a
```

```sudo vi /etc/wpa_supplicant/wpa_supplicant.conf
```
下にカーソル移動して(G)
```:r a
```
で追加

```
network={
　ssid="hogehoge"
　#psk="MyPassPhrase"
　psk=ugeuge
}
```
network={
}
の間に以下を追加

```
proto=WPA
key_mgmt=WPA-PSK
pairwise=CCMP TKIP
group=CCMP TKIP
```
うちのルータは古いので適時調べて下さい。
多分WPA->WPA2でいけるかと思います。

```sudo vi /etc/dhcpcd.conf
```
以下を追加
```
interface wlan0
static ip_address=192.168.1.XX/24
static routers=192.168.1.YY
static domain_name_servers=192.168.1.ZZ
```

```sudo reboot
```

再びsshでつなぎ
```
ifconfig
```
で見えているか
指定したアドレスでssh出来るか確認

次回dhcp止めてみるテストを行いたいと思います。
Redis Desktop ManagerでAzure Redis Cacheに接続する

# 0. 前置き
Azure Redis Cacheの中身を直接見るときに、Redis Desktop Manager（RDM）が便利だったので、導入から表示までのメモ。

**バージョン情報**

|name|ver.|
|:--|:---:|
|Redis Desktop Manager|0.8.3|

# 1. ダウンロードとインストール
* 配布サイトへ移動　http://redisdesktop.com/
* 「download」ページからプラットフォームに合わせたインストーラをダウンロード
* 普通にインストール。特にはまることもないと思います。

# 2. 接続の設定（非SSLポート）
* RDMの「Connect to Redis Server」をクリック。

![1.JPG](https://qiita-image-store.s3.amazonaws.com/0/34410/635d2eee-e8b5-31f0-ccf4-61fdc354d56a.jpeg)

* Azureポータルの設定情報を、RDMの設定画面に反映。

Name：任意
Host：Azureポータルでみたホスト名
Auth：Azureポータルで見たアクセスキーのプライマリーのもの

![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/34410/b5388930-8aac-aeeb-de0d-13f8ddd0bbae.jpeg)

* 接続完了！！

![4.JPG](https://qiita-image-store.s3.amazonaws.com/0/34410/64811a59-4634-fb1a-9063-00ac03de0062.jpeg)

# 3. 接続の設定（SSLポート）　
SSL接続の場合は、PEM形式のファイルが必要となるので、また手順をまとめて書きます。
PHPで動的n次元配列追加をしたいです。 preg_replace_callbackで。


[PHPで動的n次元配列追加をしたいです。 例え… - Qiita](http://qiita.com/ProjectICKX/items/07df12785fca9b8840d7)

```php
function parse($s)
{
	$a = null;
	while ($s = preg_replace_callback('/(\w*)\((\w*)\)/', function($matches) use (&$a) {
		list(, $k, $v) = $matches;
		$k = empty($k) ? 0 : $k;
		$a = empty($v) ? [$k => $a] : [$k => [$v]];
	}, $s));
	return $a;
}

assert(parse('a((b((c))))') === ['a' => [['b'=>[['c']]]]]);
assert(parse('(c)') === [['c']]);
assert(parse('b(c)') === ['b' => ['c']]);
```

```php
function parse($s)
{
	$a = null;
	while ($s = preg_replace_callback('/(\w*)\((\w*)\)/', function($matches) use (&$a) {
		list(, $k, $v) = $matches;
		$a = array_values(array_filter(empty($v) ? [$k, $a] : [$k, [$v]]));
	}, $s));
	return $a;
}

assert(parse('a((b((c))))') === ['a', [['b', [['c']]]]]);
assert(parse('(c)') === [['c']]);
assert(parse('b(c)') === ['b', ['c']]);
```
Javaにおける現在日時の取得(yyyy/mm/dd hh:mi:ss)

Java言語における日時の取得。
java.utilパッケージを利用する。

昔の記憶では、android.text.format.Time;から取得していたが
それはASで打ち消し線が引かれていて、非推奨となっているみたい。

```java
import java.util.Calendar;

Calendar calendar = Calendar.getInstance();
int year        = calendar.get(Calendar.YEAR);
int month       = calendar.get(Calendar.MONTH);
int day         = calendar.get(Calendar.DAY_OF_MONTH);
int hour        = calendar.get(Calendar.HOUR_OF_DAY);
int minute      = calendar.get(Calendar.MINUTE);
int second      = calendar.get(Calendar.SECOND);

Log.d(
 "year/month/day hour:minute:second",
 String.valueOf(year)      + "/" + 
 String.valueOf(month + 1) + "/" +
 String.valueOf(day)       + "/" + " " +
 String.valueOf(hour)      + ":" +
 String.valueOf(minute)    + ":" +
 String.valueOf(second)
);
```

今は、2016年02月13日 21時33分21秒なので
2016/02/13 21:33:21と表示されます。