OmniAICreator/Qiita-1.07M huggingface dataset:
環境変数の設定

GitHub等にコミットしてはまずいものを，見られないようにする．


##rbenv-varsのインストール

rbenvを使って，rubyをインストールしてる場合は，パスも通っているのでcloneするだけで使える．
rbenvをインストールしていない場合は，rbenvと同様にパスを通す必要がある．
rbenvもインストールする必要があるかも？


```
> git clone https://github.com/rbenv/rbenv-vars.git $(rbenv root)/plugins/rbenv-vars
```

```
>rbenv vars

```
command not foundとなったら，パスを通す．

##rbenv-varsの使い方

railsアプリケーションでlsをすると，Gemfileが見えるところに
.rbenv-varsファイルを作成．



たとえば，SECREAT_KEYを環境変数として設定する場合は，

.rbenv-varに環境変数を設定する．

```.rbenv-vars
SECREAT_KEY_BASE=xxxxxxx;
```
間にスペース入れるとうまく設定されない！！！


見せたくないものを，<%= ENV["rbenv-varsで設定した環境変数名"]%>とする

```secrets.yml
development:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>
test:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>

production:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>
```

あとはコマンドをうつと，railsのアプリケーションに環境変数が設定される．

```
>rbenv vars
```
naoqiのsayToFileを使って喋る内容をwavとして保存するChoregrapheボックス

  
[naoqiリファレンス](http://doc.aldebaran.com/2-4/naoqi/)にあったsayToFileメソッドを使って、Pepperが喋る内容をファイル保存するボックスを作りました
## 作成方法
1. Choregrapheのフローダイアグラムを右クリックしたのち、ボックスの新規作成からPythonボックスを作成
2. ボックスのonStartを右クリックして**タイプ**を**String**に変更
3. ボックスを右クリックして**ボックスのスクリプトを編集**をクリック
4. 以下のsayToFileボックスのスクリプトをコピーしてペースト

## ボックスのパラメータに関して
以下の手順でボックスのパラメータを編集すると、ファイル名を指定することができます(今回生成するファイルは必ず日時が付属されます)
1. 新規作成したPythonボックスを右クリックして**ボックスを編集**
2. **変数**の右側にある***+***をクリックして変数を追加
3. 名前に**file name**を入力、タイプを文字列に変更
<img width="417" alt="Screen Shot 2016-11-20 at 16.02.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/91842/23fe03d4-c43d-b285-c57d-7824f3873981.png">

### sayToFileボックスのスクリプト

```Python
from datetime import datetime

class MyClass(GeneratedClass):
    def __init__(self):
        GeneratedClass.__init__(self)

        self.tts = ALProxy('ALTextToSpeech')
        self.ttsStop = ALProxy('ALTextToSpeech', True)

    def onLoad(self):
        #put initialization code here
        pass

    def onUnload(self):
        #put clean-up code here
        pass

    def onInput_onStart(self, p):
        #self.onStopped() #activate the output of the box
        nowstr = datetime.now().strftime("%Y-%m-%d_%H-%M-%S")
        filename = ''

        if self.getParameter('file name') != '':
            filename = self.getParameter('file name') + nowstr + '.wav'
        else:
            filename = nowstr + '.wav'

        # self.logger.debug(filename)

        filePath = '/home/nao/recordings/' + filename
        sayText = str(p)

        try:
            self.tts.sayToFile(sayText, filePath)
        except RuntimeError:
            self.logger.debug("Runtime Error")
        pass

    def onInput_onStop(self):

        self.onUnload() #it is recommended to reuse the clean-up as the box is stopped
        self.onStopped() #activate the output of the box
```

## 使用例
以下は簡単な使用例になります
下記の画像のようにtext editボックスと私が作成したボックスを接続すると簡単に使用できます
<img width="632" alt="Screen Shot 2016-11-20 at 14.19.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/91842/132530b5-1f2a-3150-fa29-cecb06028099.png">
  
## 保存したファイルの取り出し
Choregrapheからファイルの取り出しができます
1. メニューから**接続** -> **アドバンスト** -> **ファイルの転送...**を選択
2. ロボットのパスワードが求められるので入力
3. 一覧から**recordings**をダブルクリック
4. 一覧に日時が記されたwavファイルがあるのでそれをダウンロード
GCP の Cloud Deployment Manager を使って PubSub をセットアップする

# Cloud Deployment Manager

GCP における Cloud Formation 的な存在です。

# このドキュメントの意義

GCE のデプロイをしている事例はありますが、PubSub のデプロイをしている例がありませんでした。
Google　の検索結果が絶望的…。

![image](https://qiita-image-store.s3.amazonaws.com/0/100723/a51ec477-19b3-1c7c-0004-125dca8c9846.png)

試行錯誤しながら設定手順を発見しましたので、記録しておきます。

# Topic の作成

```
resources:
  - 
    name: 設定名
    type: pubsub.v1.topic
    properties:
      topic: トピック名
```

# Subscription の作成

```
resources:
  - 
    name: 設定名
    type: pubsub.v1.subscription
    properties:
      subscription: サブスクリプション名
      topic: projects/{プロジェクト名}/topics/{トピック名}
      ackDeadlineSeconds: 設定値
```
Erlangのインタラクティブシェル(erl)を終了する

erlを終了させるパターン。

- 「Ctrl + C」を2回入力して終了する。
 
```erlang:erl1
1> 1 + 1.
2
2>
BREAK: (a)bort (c)ontinue (p)roc info (i)nfo (l)oaded
       (v)ersion (k)ill (D)b-tables (d)istribution
host:~ name$
```

- 「Ctrl + G」を入力後にqとReturnキーを入力する。

```erlang:erl2
1>  1 + 1.
2
2>
User switch command
 --> q
host:~ name$
```

- 「q().」を入力後、Returnキーを入力する。

```erlang:erl3
1> 1 + 2.
3
2> q().
ok
host:~ name$
```

以上なり。
【Android】Calendarについてのメモ

#環境
 - AndroidStudio 2.2.2
 - Java 1.8.0
 - Android 2.3.3


##Calendarの生成
端末のタイムゾーンを使用する場合
```Calendar calendar = Calendar.getInstance();```

タイムゾーンを指定する場合
※日本標準時を指定
```Calendar calendar = Calendar.getInstance(TimeZone.getTimeZone("Asia/Tokyo"));```

##Calendar#getについて
引数及び返却される値

``` Calendar.YEAR ```
⇒年（西暦）が返却される

``` Calendar.MONTH ```
⇒月-1が返却される

``` Calendar.DAY_OF_MONTH ```
⇒日（月の中で何日目か）が返却される

``` Calendar.DAY_OF_YEAR ```
⇒日（年の中で何日目か）が返却される

``` Calendar.HOUR_OF_DAY ```
⇒時（24時間）が返却される

``` Calendar.HOUR ```
⇒時（12時間）が返却される

``` Calendar.MINUTE ```
⇒分が返却される

``` Calendar.SECOND ```
⇒秒が返却される
TensorFlow > dynamic_partition()使ってみた

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
```

https://ischlag.github.io/2016/06/19/tensorflow-input-pipeline-example/
に記載のdynamic partitionを使ってみた。

```part_001.py
from tensorflow.python.framework import ops
from tensorflow.python.framework import dtypes
import tensorflow as tf
import random

partitions = [ 1, 1, 1, 1, 0, 0, 0 ]
random.shuffle(partitions)
print(partitions)

names_str = [ 'Janeway', 'Tuvok', '7of9', 'Kim', "B'Elanna", 'Chakotay', 'Doctor' ]

names_tf = ops.convert_to_tensor(names_str, dtype=dtypes.string)

train_names, test_names = tf.dynamic_partition(names_tf, partitions, 2)
print(train_names)
print(test_names)

with tf.Session() as sess:
	train = sess.run([train_names])
	print(train)
	test = sess.run([test_names])
	print(test)
```

```txt:結果
$ python part_001.py 
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcublas.so locally
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcudnn.so locally
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcufft.so locally
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcuda.so.1 locally
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcurand.so locally
[0, 0, 1, 1, 1, 1, 0]
Tensor("DynamicPartition:0", shape=(?,), dtype=string)
Tensor("DynamicPartition:1", shape=(?,), dtype=string)
I tensorflow/stream_executor/cuda/cuda_gpu_executor.cc:925] successful NUMA node read from SysFS had negative value (-1), but there must be at least one NUMA node, so returning NUMA node zero
I tensorflow/core/common_runtime/gpu/gpu_device.cc:951] Found device 0 with properties: 
name: GeForce GTX 1070
major: 6 minor: 1 memoryClockRate (GHz) 1.7715
pciBusID 0000:01:00.0
Total memory: 7.91GiB
Free memory: 7.22GiB
I tensorflow/core/common_runtime/gpu/gpu_device.cc:972] DMA: 0 
I tensorflow/core/common_runtime/gpu/gpu_device.cc:982] 0:   Y 
I tensorflow/core/common_runtime/gpu/gpu_device.cc:1041] Creating TensorFlow device (/gpu:0) -> (device: 0, name: GeForce GTX 1070, pci bus id: 0000:01:00.0)
[array(['Janeway', 'Tuvok', 'Doctor'], dtype=object)]
[array(['7of9', 'Kim', "B'Elanna", 'Chakotay'], dtype=object)]
```

partitionsリストの要素が0のものと１のものできちんと分離できた。

- 0: array(['Janeway', 'Tuvok', 'Doctor']
- 1: array(['7of9', 'Kim', "B'Elanna", 'Chakotay']
レスポンシブデザインでのブレイクポイント変更検知のベストプラクティス

レスポンシブサイトでブレイクポイントによってjavascriptの挙動が変わることって多いと思います。

例えばPCサイトではメガメニューがサイドバーの横から出てくるけど、
タブレットではヘッダの上から出てくるとか


## 問題のある実装1
```js
$('.button').on('click', function() {
    if($(window).width() >= 1200) {
        // PCの処理
    }else if(this.$window.width() < 768) {
        // SPの処理
    }
})

$('.button2').on('click', function() {
    if($(window).width() >= 1200) {
        // PCの処理
    }else if(this.$window.width() < 768) {
        // SPの処理
    }
})
```

上記の実装のようにイベント発火時にWindowの横幅を調べる実装だと
ブレイクポイントが変更や追加された場合
色々な箇所で変更の必要があり、
DRYの原則に反し拡張性、メンテナンス性が悪いです

## 問題のある実装2
```js
$('.button').on('click', function() {
    // $('.hunbergerMenu')はSP時のみ表示されるHTML要素
    if(! $('.hunbergerMenu').is(':visible') {
        // PCの処理
    }else {
        // SPの処理
    }
})

$('.button2').on('click', function() {
    if(! $('.hunbergerMenu').is(':visible') {
        // PCの処理
    }else{
        // SPの処理
    }
})
```
上記実装のように、ブレイクポイント毎に表示される固有のDOMの表示非表示にて
現在のブレイクポイントを判定する処理の場合
判定用のDOMが仕様変更等により無くなる可能性があり、
さらにタブレットやミニPC等の判定が必要にあるとelse ifが増えていくことになります。
また問題のある実装1と同様、色々な箇所で同様の記述が必要となり
DRYの原則に反し拡張性、メンテナンス性が悪いです


## 別オブジェクトに切り出して実装すれば良い
ブレイクポイント変更検知専用のオブジェクトを作成し、ブレイクポイント変更時には
カスタムトリガーをWindowに対して発火させ、変更検知したいオブジェクトでそのカスタムトリガーを受ければ良い


``` js
ChangeBreakPoint = {
    init: function() {
        this.setParameters();
        this.bindEvents();
    },
    setParameters: function() {
        this.$window = $(window);
        this.pageDivision = this.judgePageDivision();// 初回起動時に現在のブレイクポイントを取得する
    },
    bindEvents: function() {
        var self = this;
        var thisPagedivision = '';

		 // Windowのリサイズ時に現在のWindow幅を調べ、
		 // ブレイクポイントが変更されれば、Windowオブジェクトに対して
 		 // 「changeBreakPoint」カスタムトリガーを発火させ、
		 // 引数に変更後のブレイクポイントを渡す
        this.$window.on('resize', function() {

            thisPagedivision = self.judgePageDivision();

            if(self.pageDivision != thisPagedivision) {
                self.pageDivision = thisPagedivision
                self.$window.trigger('changeBreakPoint', [thisPagedivision]);
            }
        });
    },
    getPageDivision: function() {
        return this.pageDivision;
    },
    judgePageDivision: function() {
        if(this.$window.width() >= 1200) {
            thisPageDivision = 'pc';
        }
        if(this.$window.width() < 1200 && this.$window.width() >= 980) {
            thisPageDivision = 'minipc';
        }
        if(this.$window.width() < 980 && this.$window.width() >= 768) {
            thisPageDivision = 'tb';
        }
        if(this.$window.width() < 768) {
            thisPageDivision = 'sp';
        }
        return thisPageDivision;
    }
}
$(function() {
    ChangeBreakPoint.init();
});

HOGE = {
	bindEvents: function() {
		 var self = this;
		 // changeBreakPointの第2引数が変更されたbreakpointなのでそれを変数等に格納
		 $(window).on('changeBreakPoint', function(event, breakpoint) {
            self. breakpoint = breakpoint;
        });
	}
}
```
上記実装の場合、使いたいオブジェクトに対しカスタムトリガーを仕込むだけで、ブレイクポイントの変更を検知でき、ブレイクポイントの数が増えた場合もChangeBreakPointオブジェクトの修正のみで対応可能なためDRYの原則にも反しません。
Elixir のインタラクティブシェル(iex)を終了する

iexを終了させるパターン。

- 「Ctrl + C」を2回入力して終了する。
 
```ex:iex1
iex(1)> 1 + 2
3
iex(2)>
BREAK: (a)bort (c)ontinue (p)roc info (i)nfo (l)oaded
       (v)ersion (k)ill (D)b-tables (d)istribution
host:~ name$
```

- 
「Ctrl + G」を入力後にqとReturnキーを入力する。

```ex:iex2
iex(1)> 1 + 2
3
iex(2)>
User switch command
 --> q
host:~ name$
```

以上なり。
HTTPレスポンスステータス

# HTTPレスポンスステータスと推測できること
HTTPレスポンスステータス | タイプ | 推測できること
--- | --- | ---
404 | Not Found | RequestMappingが間違っている<br>OR<br>URLが間違っている
503 | Service Unavailable <br>OR<br>Service Temporarily Unavailable | ホスティングしてるサーバの同時接続数制限によりアクセスできない
502 | Bad Geteway | ユーザ側のゲートウェイか、<br>Webサイト側のプロキシサーバの不調

## 参考
[503エラーを防ぐ！Web屋が知っておくべき503エラーの原因と対処](http://www.cpi.ad.jp/column/column01/)
[502Bad Getewayの原因と意味について](http://www.promeshi.com/archives/2161)
TextBoxでEnter Keyが押されたことを検知して入力値も取得する方法

検索ボックスなどでよくわるキーワードを入力し、Enter Key押下で実行みたいなことをやろうとしたときに意外とハマったのでメモ。
最初イベントだけ検知して入力文字列はTextにバインドさせたSearchWordTxtから取得しようとしたのだけれど、TextBoxのTextに値がはいるのはフォーカスが外れた後、つまりEnter Key押下のイベントを検知した段階ではまだSearchWordTxtはNullだった。
なるほどなーと思いどうにかイベント検知時にイベント引数として入力文字列を渡せないかとググってみるとstackoverflow先生が答えを教えてくれました。
http://stackoverflow.com/questions/5556489/capturing-the-enter-key-in-a-textbox

```xml
        <TextBox x:Name="SearchWord" Text="{Binding SearchWordTxt, Mode=TwoWay}" Height="23">
            <TextBox.InputBindings>
                <KeyBinding Gesture="Enter" Command="{Binding SearchCommand}" CommandParameter="{Binding ElementName=SearchWord, Path=Text}"/>
            </TextBox.InputBindings>
        </TextBox>
```
Python > List > partitions = [0] * len(all_filepaths) / partitions[:test_set_size] = [1] * test_set_size > 0でリストを作成したあとに前方一部を1にする

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
```

Deep LearningのフレームワークTensorFlowを学習中。

https://ischlag.github.io/2016/06/19/tensorflow-input-pipeline-example/

上記でパッと見て(at first glance)分からなかったのが「Lets Partition the Data」の以下の記載。

```py
# create a partition vector
partitions = [0] * len(all_filepaths)
partitions[:test_set_size] = [1] * test_set_size
```

試してみた。

```list_001.py
all_filepaths = [ "AAA/BBB/c.csv", "AAA/BBB/d.csv", "AAA/BBB/e.csv" ]

test_set_size = 5

partitions = [0] * len(all_filepaths)
print(partitions)
partitions[:test_set_size] = [1] * test_set_size
print(partitions)
```

```
$ python list_001.py 
[0, 0, 0]
[1, 1, 1, 1, 1]
```

`[0] * 5`で5つの0要素を持つリストが生成される。

よくわからなかったのが、一旦[0]でリストを作った上で、その後[1]のリストに変えていること。

len(all_filepaths)は0で埋めて、そのうちの一部だけを1にしているようだ。
all_filepathsの項目を20などにするとわかった。
Elastic BeanstalkでDockerを試す際にぶつかったエラー


## 背景

先日[Amazon Linuxの公式コンテナイメージが公開された](https://aws.amazon.com/blogs/aws/new-amazon-linux-container-image-for-cloud-and-on-premises-workloads/)ので
以下のようなアプリケーション開発のフローを導入しようと考えました。

1. Docker for MacでAmazon Linuxのコンテナを作成
2. コンテナのイメージをElastic Container Registry（ECR）に置く
3. Elastic Beanstalk（EB）にデプロイ

実装前にざっと試してみた際にハマったエラーについて書きます。

## 現象

DockerfileでAmazon Linuxをベースイメージとしたコンテナを作成し
それをECRにpushしたあと、EBにdockerrun.aws.jsonを渡すフローでした。

しかし、dockerrun.aws.jsonをEBに渡したあと
正常にデプロイが開始されたあと、以下のようなエラーが出ました。

```bash:マネジメントコンソール上のエラーログ
[Instance: i-95ad6d0b] Command failed on instance. Return code: 1 Output: 563f980e33e19b2b43cbf556249bba19de0f5bf2f69d1b6cb67a3fc997ce6468 Docker container quit unexpectedly after launch: Docker container quit unexpectedly on Sat Nov 19 15:02:16 UTC 2016:. Check snapshot logs for details. Hook /opt/elasticbeanstalk/hooks/appdeploy/enact/00run.sh failed. For more detail, check /var/log/eb-activity.log using console or EB CLI.
```

原因がよくわからないので、`/var/log/eb-activity.log`を確認します。
インスタンスは正常に起動しているので、`$ eb ssh`で接続も可能です。

```bash:/var/log/eb-activity.logから抜粋
[2016-11-19T15:02:16.395Z] INFO  [3459]  - [Application deployment First Release@1/StartupStage1/AppDeployEnactHook/00run.sh] : Activity execution failed, because: 563f980e33e19b2b43cbf556249bb
a19de0f5bf2f69d1b6cb67a3fc997ce6468
```

曰く、原因はやはり`563f980e33e19b2b43cbf556249bb
a19de0f5bf2f69d1b6cb67a3fc997ce6468`です。さっぱりわかりません。

## 原因

以下に抜粋したログ曰く、新しいイメージのビルドは正常に終了しているので
コンテナの起動自体はうまくいっているように思えます。

```bash:/var/log/eb-activity.logから抜粋
Step 1 : FROM 405040101050.dkr.ecr.ap-northeast-1.amazonaws.com/ecr_eb_test:latest
 ---> ed42ad0aada6
Step 2 : EXPOSE 80
 ---> Running in be7d342bdfd1
 ---> 42ae4c2ba2df
Removing intermediate container be7d342bdfd1
Successfully built 42ae4c2ba2df
Successfully built aws_beanstalk/staging-app
```

dockerのイベントログを見てみると

```bash:/var/log/docker-events.log
2016-11-20T06:45:22.851433959Z container start 99b8db428bb7a404e485929b98c6653e9cc7a170503e1b31dc4d0890a0161f21 (image=3f7f5bfd4721, name=backstabbing_mcclintock)
2016-11-20T06:45:22.877845383Z container die 99b8db428bb7a404e485929b98c6653e9cc7a170503e1b31dc4d0890a0161f21 (exitCode=0, image=3f7f5bfd4721, name=backstabbing_mcclintock)
```

コンテナが起動後に即死しているのがわかります。
なんとなく問題が見えてきました。

このときに使用していたDockerfileの記述は以下の通りです。

```bash:Dockerfile（良くない例）
# ベースイメージとしてamazonlinuxを使用
FROM amazonlinux:latest

# 80番ポートを開放
EXPOSE 80

# このファイルを元にコンテナが動いていることの確認用
RUN touch /opt/test
```

フォアグラウンドのプロセスが存在しないため、コンテナが保持されませんね。

## 解決

以下のように書き直すと正常にデプロイできました。

```bash:Dockerfile
# ベースイメージとしてamazonlinuxを使用
FROM amazonlinux:latest

# 80番ポートを開放
EXPOSE 80

# apacheをインストール
RUN yum install -y httpd

# apacheをフォアグラウンドで起動
CMD ["/usr/sbin/apachectl", "-D", "FOREGROUND"]
```

## まとめ

後になってみると、非常に初歩的なミスでした。
Dockerの基礎を理解していればすぐにわかります。

しかし、原因をまったく教えてくれないEBのエラーログ…。
今回は関連するログを網羅的に見ました。
少しでも同じログにぶつかった人の参考になればと思います。
デザインパターン(GoF:構造に関するパターン)

# GoFの23パターンについて
http://qiita.com/kayo_h/items/84251efbae619dc62dcc

## 原則
1. 変わるものを変わらないものから分離する
2. インターフェイスに対してプログラミングし、実装に対して行わない
3. 継承より集約
4. 委譲、委譲、委譲
5. 必要になるまで作るな(You Ain’t Gonna Need It./YAGNI)



## 構造に関するパターン
### Adapterパターン
すでに実装されているものと、必要な機能の差分を埋める。(拡張)
オブジェクトから別のオブジェクトに対するインターフェイスを提供する、あるいは他のオブジェクトとのインターフェイスの差異を吸収するためのラッパーオブジェクトが必要な場合。

#### 継承
#### mix-in 
クラスに変更をかけたくない場合はextendで機能拡張をする。
#### オープンクラスまたはRefinementsを用いる
Rubyではあらゆるクラスに対して拡張が可能なため、子クラスを用意するのではなくクラス自体を拡張することでAdapterパターンの目的(インターフェースのズレを埋める)を達成できる。

#### サンプルコード
http://capm-network.com/?tag=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3-Adapter


### Bridge パターン
抽象クラスと具象クラスそれぞれを独立させることで保守性を高める。
新たな機能、新たな実装の追加が容易となる

http://www.techscore.com/tech/DesignPattern/Bridge.html/

#### サンプルコード
http://tbpgr.hatenablog.com/entry/20120220/1329748817

### Composite パターン
部分から全体を組み立てる。
全てのオブジェクトは共通の基底クラス（コンポーネント）を継承する。
コンポーネントを継承し、子オブジェクトを持つオブジェクトをコンポジットという。これにより任意の深さのツリー構造ができる。
コンポーネントを継承し、子オブジェクトを持たない末端のオブジェクトをリーフという。子オブジェクトを持たないコンポジットを末端のオブジェクトにしても良い。

大小様々な同じ振る舞いをもつオブジェクトに親子関係があり、ツリー構造を実装したい場合に用いる。

### Decorator パターン
オブジェクトを改良する。
元のオブジェクトのプロキシーオブジェクトを基底クラスとし、追加機能を実装するオブジェクトに基底クラスを継承することで、元のオブジェクトを変更することなく機能を追加することができる。委譲はForwardableモジュールを使うことで簡単に実装できる。
Ruby特有の方法として、他に2津の方法がある。1つめは、ailasキーワードと特異メソッドを使うことで動的に機能を変更することができる。2つめは、moduleをextendして動的に機能を変更することができる。
元のオブジェクトを変更すること無く、オブジェクトに機能を追加したい場合。
元のオブジェクトを簡潔に保ちつつ、委譲により拡張機能を追加したい場合。

### Facade パターン
アプリケーションを開発していると、「Aの処理とBの処理は必ずセットで実施しなければならない」というケースがあります。たとえば、「ユーザが退会する際には、併せてメールマガジンを送るのもストップする」といった感じです。

プログラマが全ての組み合わせを把握できていればよいのですが、万が一なにか1つを忘れてしまった場合、それは重大なバグにつながります。そのような事態を防ぐため、「一連の手順をセットで実行してくれるクラスやメソッド」を作って利用するのがFacadeパターンです。
```
// ※インポートやエラーハンドリングなどの記述は割愛
public class Facade {
    public void secede(int user_id) {
        // ユーザ退会
        UserDao userDao = new UserDao();
        userDao.secede(user_id);
 
        // メールマガジンを送るのもストップ
        MailMagazineDao mailMagazineDao = new MailMagazineDao();
        mailMagazineDao.secede(user_id);
    }
}
```
Facadeクラスのsecede（退会する、の意）メソッド内部では、さきほど説明した「ユーザが退会する」、「メールマガジンを送るのもストップする」という処理をセットにして実施しています。このため、他のクラスはFacadeクラスの持つsecedeメソッドを呼び出すだけでよくなり、より実装がシンプルになるのです。

### Flyweight パターン
インスタンスを作れば作るほど、プログラムの動作は重たくなります。これはつまり、「無駄なインスタンスを生成しなければ、プログラムの動作が軽くなる」ということの裏返し。Flyweightパターンは、そのような目的のために使用されるパターンです。

Flyweightとは英語で「フライ級」を意味し、ボクシングなどの体重階級の中でもっとも軽い部類のこと。つまり、それだけ動作を軽量化できるパターンなのです。

```
// ※インポートやエラーハンドリングなどの記述は割愛
 
public class Flyweight {
  Map<String, SomeClass> map = new HashMap<String, SomeClass>();
 
 public synchronized SomeClass getSomeClass(String name) {
        SomeClass someClass = map.get(name);
        if (someClass == null) {
            someClass = new SomeClass(name);
            map.put(name, someClass);
        }
        return someClass;
    }
}
```

FlyweightクラスのgetSomeClassメソッドの中では、「mapの中にその名前のインスタンスがふくまれているかどうか」のチェックをしています。
ふくまれている場合はそのインスタンスを返し、わざわざ新しく作り直すことはありません。これによって無駄なインスタンスの生成を防ぎ、動作を軽くすることができるのです。



### Proxyパターン
オブジェクトに代理を立てる。
本来の処理をプロキシーでラッピングすることで関心事の分離を行いたい場合。
必要になるまでインスタンス生成を遅らせ、軽量な代理オブジェクト(Proxy)が処理を代行するパターン。
Rubyでは処理をProc化しておくことで遅延実行が可能。必要になるまで処理の実行を遅らせることができる。
代理オブジェクトを用意するより、重い処理を遅延実行したほうが良さそう。
モーダル高がウィンドウ高より高い場合にスクロールを表示

モーダル実装後によく指摘されるけど、実装時にはあまり考慮されないので備忘録件共有のために書きました。

モーダルの高さがWindowより高い場合に自動的にスクロールさせるようにする

ポイントは`layer`と`modal-wrapper`をわけて
`layer`と`modal-wrapper`に`position: fixed`をつける
さらに`modal-wrapper`に`overflow-y: auto`をつけてあげれば自動的にスクロールが表示される

## 
```html
<html>
	<body>
        <button class="jsc-modal-trigger">モーダル</button>
        <div class="layer jsc-layer"></div>
        <div class="modal-wrapper jsc-modal-target">
            <a href="#" class="modal-close jsc-modal-close">×</a>
            <div></div>
        </div>
	</body>
</html>
```

```css
.is-layer-open {
    overflow: hidden;
}

.layer {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    margin: auto;
    opacity: 0.9;
    background: #666;
}

.modal-wrapper {
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    display: none;
    overflow-y: auto;
    width: 50%;
    height: 100%;
    margin: auto;
    background: #fff;
}

.modal-close {
    position: fixed;
}
```

```js
$(function(){
    MODAL.init();
});
MODAL =  {
    init: function() {
        this.setParameters();
        this.bindEvents();
    },
    setParameters: function() {
        this.$body = $('body');
        this.$layer = $('.jsc-layer');
        this.$trigger = $('.jsc-modal-trigger');
        this.$target = $('.jsc-modal-target');
        this.$close = $('.jsc-modal-close');
    },
    bindEvents: function() {
        var self = this;

        this.$trigger.on('click', function(event) {
            event.preventDefault();
            self.showModal();
        });

        this.$close.on('click', function(event) {
            event.preventDefault();
            self.hideModal();
        });

        this.$layer.on('click', function(event) {
            event.stopPropagation();
            self.hideModal();
        })
    },
    showModal: function() {
        if(this.$layer.is(':animated')) {
            return;
        }
        this.$body.addClass('is-layer-open');
        this.$layer.fadeIn();
        this.$target.fadeIn();
    },
    hideModal: function() {
        if(this.$layer.is(':animated')) {
            return;
        }
        this.$body.removeClass('is-layer-open');
        this.$layer.fadeOut();
        this.$target.fadeOut();
    }
};
```
TensorFlow > stringリストをTensor objectsに変換する > names_tf = ops.convert_to_tensor(names_str)

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
```

Deep LearningのフレームワークTensorFlowを学習中。

https://ischlag.github.io/2016/06/19/tensorflow-input-pipeline-example/

上記のリンクでstringリストをTensor objectsに変換する方法が紹介されていた。　

試してみた。

```string_to_tensor.py
from tensorflow.python.framework import ops
from tensorflow.python.framework import dtypes

names_str = [ 'Janeway', 'Tuvok', '7of9' ]

names_tf = ops.convert_to_tensor(names_str, dtype=dtypes.string)

print(names_tf)
```

```txt:結果
$ python string_to_tensor.py 
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcublas.so locally
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcudnn.so locally
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcufft.so locally
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcuda.so.1 locally
I tensorflow/stream_executor/dso_loader.cc:111] successfully opened CUDA library libcurand.so locally
Tensor("Const:0", shape=(3,), dtype=string)

```
プログラマーレッスン入口

# プログラマーという職業とこれから学ぶこと、できたほうがいいこと
java javascript HTML CSS データベース セキュリティ サーバーの構築
これらがすべてを一人できるようになることを目指す
ＷＥＢデザイナーにお願いすることが多いためデザイナーとは切っても切れない縁である

# プログラマーのいる会社 自社コンテンツ系⁻自社にコンテンツがある会社
SIer⁻自社サービスがなくプログラマーを送る会社
### どちらがいいかは考えていく。また、何をしたいかも考える

これからやっていくこと
# Git hub⁻ソースコードを公開しするところ
## ＷＥＢサービスを2つ公開
# 週2回ブログを書く
## 勉強会に4回は参加すること
### 勉強アプリで時間を管理する
これらはモチベーションを上げることにもつながる。
Python > List > 相対パスを絶対パスに変換する > all_filepaths = [ dataset_path + fp for fp in train_filepaths ]

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
```

Deep LearningのフレームワークTensorFlowを学習中。

https://ischlag.github.io/2016/06/19/tensorflow-input-pipeline-example/

上記にてPythonのリストに関して、相対ファイルパスから絶対ファイルパスに変換する例があったので、今後の参照用に記事にしておく。


```python_001.py

dataset_path = "/AAA/BBB/CCC/"

train_filepaths = [ "test.dat", "test.csv", "test.exe" ]

all_filepaths = [ dataset_path + fp for fp in train_filepaths ]

print(all_filepaths)
```

```txt:結果
$ python python_001.py 
['/AAA/BBB/CCC/test.dat', '/AAA/BBB/CCC/test.csv', '/AAA/BBB/CCC/test.exe']
```
TensorFlow > link > TENSORFLOW INPUT PIPELINE EXAMPLE

https://ischlag.github.io/2016/06/19/tensorflow-input-pipeline-example/

学習データの読込みにinput pipelineを使う方法の説明。　

> This includes the partitioning of the data into a test and train set and


大規模データの場合はこちらに説明がある。
https://ischlag.github.io/2016/11/07/tensorflow-input-pipeline-for-large-datasets/
UniRx WhenAllによる非同期待ち処理

#UniRxで可変数あるstreamの全ての終了を待ちたい
自分用のメモ。
WhenAllの引数にはIObservableの配列が渡せる。
streamの生成の箇所は各々の処理に置き換えて考えてください。

```Test.cs
using UnityEngine;
using System.Collections;
using UniRx;

public class Test : MonoBehaviour {
	IEnumerator Start()
	{
		var array = new int[4] {2, 4, 6, 8};
		//適当な配列から適当なstreamの配列を作成する
		var streams = array.Select(value=> {
			return	Observable.Create<int>(observer => {
				Debug.Log(value);
				observer.OnNext (value);
				observer.OnCompleted ();
				return Disposable.Create (() => {
					Debug.Log ("Dipose");
				});
			});
		}
		);
		//streamの処理が全てOnCompletedとなるまで待つ。
		yield return Observable.WhenAll(streams).ToYieldInstruction();
		Debug.Log("End");
	}
}

```
LinuxでAndroidのファイル管理（MTP使わない）

Arch LinuxとAndroidのMTP接続が面倒だったので、`adb`による管理をしてみた。

# 環境

- Arch Linux
- 適当なRoot化されたAndroid機

`adb`コマンドを下記のWikiで入れておく

https://wiki.archlinuxjp.org/index.php/Android

# 方法

SDカード内の音楽ファイルと画像ファイルを同期したいので、`adb pull`と`adb push`を使う。
PCに保存した画像は、Androidから消去する。

```
adb pull /storage/<SDカードのUUID>/DCIM /home/user/pictures
adb shell rm -rf /storage/<SDカードのUUID>/DCIM/*

adb push /home/user/music /storage/<SDカードのUUID>/MUSIC
```

`adb sync`や、`adb shell`からの`rsync`を使えばもっと効率よくできるはずなので、研究する予定。

他に良い方法があれば知りたい・・・
クラウド使えばいいんだろうなー
tmux の status-lineにリポジトリ名表示

# 背景
tmuxにgitリポジトリ名を表示したくなった。
私のtmuxの設定状況は[.tmux.conf](https://raw.githubusercontent.com/KazuakiM/dotfiles/master/.config/tmux/.tmux.conf)と[gitReposName.sh](https://raw.githubusercontent.com/KazuakiM/dotfiles/master/src/gitReposName.sh)参照です。

# ソース

シェルを実行して、リポジトリ名を取得しています。更新間隔は頻度が多いとPCに優しくないので一旦60秒に設定した。

``` conf:.tmux.config
set  -g  status-interval 60
unbind ,
setw -g window-status-format '#[fg=white,bg=colour234] #(cd #{pane_current_path} && sh ~/gitReposName.sh) '
setw -g window-status-current-format '#[fg=colour234,bg=colour39] #(cd #{pane_current_path} && sh ~/gitReposName.sh) #[fg=colour39,bg=colour234,nobold]'
```

``` shell:gitReposName.sh
gitRevParse=`git rev-parse --show-toplevel 2>/dev/null|tr -d '\n'`
if [ 0 < $gitRevParse ]; then
    echo `basename $gitRevParse`
else
    echo `basename $(pwd)`
fi
```
JavaScript界隈の流行の変遷を調査する時は「npm trends」がオススメ

最近は比較的ゆったりしていますので、以前ほど頻繁にみることもなくなりましたが、JS界隈の最新の状況は気になるもの。
そういった時の実際のトレンド調査には、Googleトレンド **ではなく** 、npm trendsの利用がオススメです。

## npm trendsとは？

![ReactとAngularの比較グラフ](https://qiita-image-store.s3.amazonaws.com/0/75633/7d311ad1-d305-be2a-ff37-e64066f894b6.png)

npm trendsは、npm上に登録されているパッケージのDL数の変遷をグラフとして可視化し、比較までができるWebサイトです。

これまでも、[Googleトレンド](https://www.google.co.jp/trends/explore?q=%2Fm%2F012l1vxv,%2Fm%2F0j45p7w)などで調査は可能でしたが、これらはあくまでも「検索ボリューム」の話でした。

しかしながら、このnpm trendsを利用することによって、検索数やブックマーク数などの「興味を持っている人の数」ではなく、「実際に使ってみている人の数」を見ることができます。

話題ではあるものの、利用者がまだそこまで多くない技術というのは少なくありませんので、事前調査の一つの指標として、非常に有用であると見られます。

## npm trendsの使い方

利用方法は特に難しいところはなく、 http://www.npmtrends.com/ にアクセスするのみで利用が可能です。

調べたいワード(e.g. react)を単体で検索すると、検索ワードについてのみのグラフが、続いてワードを登録する(e.g. angular)か、はじめからvsを付与したワード(e.g. react-vs-angular)を入力することによって、異なる技術間での比較が可能となります。

## 使ってみる

試しにいくつかの方法で使ってみます。

### 単体を調べる

まずは[Knockout.js](http://knockoutjs.com/)がまだ元気か調べてみます。

![スクリーンショット 2016-11-20 14.16.07.png](https://qiita-image-store.s3.amazonaws.com/0/75633/80114e73-eeb3-660f-6509-ec215730cd2f.png)

単体で見ていると徐々にDL数が増加していたものの、今月に入って急激に利用数が落ち込んでいることが見て取れます。

単なる流行によるものなのか、何かしら問題が起こったのかはこの情報のみからだと推測できませんが、利用者が調べてみる動機としては十分なものとなりそうですね。

### 比較する

次に、他のフレームワークと比較をしてみます。
とはいえ、ReactやAnguarと比較してしまうと、グラフとして大きく差が開きすぎてしまって面白くないので、今回は私の好きなフレームワークである[Vue.js](https://jp.vuejs.org/)および[Riot.js](http://riotjs.com/ja/)との比較を、一年スパンで行ってみます。

![スクリーンショット 2016-11-20 14.20.04.png](https://qiita-image-store.s3.amazonaws.com/0/75633/840a3665-7ef6-b762-ccb0-0a73ca1ff1d8.png)

それまで並行に近かった力関係が、今年の春頃から一気にVue.jsが強くなった印象を受けます。
あまり肌感と差は無いのでは無いでしょうか。

また、RiotはknockoutよりGitHubのStar数も多く、ユーザーも増えてきている割にはダウンロード数が少ないのは、npmを必ずしも必要としないRiotのスタイルも関係してそうですが、逆に言うとwebpackなどを利用してRiotを利用する人はそこまで多くないのかもしれませんね。

### 割合を知る

最後に、少し工夫した使い方として、割合を探ってみます。最期の検索の対象とするのはReactとReduxです。

Reduxは、現在は基本的にReactアプリケーション上で利用される設計パターンとなっておりますので、Reduxの割合のおおよそはReact需要とみて間違いないかと思います。

中には[Vue.jsとReduxをあわせ技を試してみている人](http://design.dena.com/engineering/vue-js-%E3%81%A8-redux-%E3%81%8C%E5%87%BA%E4%BC%9A%E3%81%A3%E3%81%9F/)もいるようですが、今回は少数としてあまり考えないことにします。

つまりは、ReactとReduxで検索をかけた結果のReduxの割合が現在Flux実装としてReduxを採用している人の割合、それ以外が別のFlux実装を利用している人の割合と考えて差し支えなさそうです。

![スクリーンショット 2016-11-20 14.28.51.png](https://qiita-image-store.s3.amazonaws.com/0/75633/9bd78323-50e5-b379-fadc-12cdbb67cd71.png)

結果はこちら。

どの場面を見ても、おおよそReactユーザーの4〜5割がReduxを採用しているように見えます。
個人的には「おもったより多いな」という印象を受けましたが、この調子ですとRedux一強となりつつあると捉えて問題ないかもしれませんね。

## まとめ

というわけで、npm trendsについて、簡単にまとめた上で、実際に使って見るところまでをやってみました。

ただグラフを表示してくれるだけのサイトではあるのですが、そのグラフから読み取れる情報は人次第ですし、元のデータがnpmというJavaScriptエンジニアのトラフィックが最も集まる場所をベースとしているだけあって、信頼できるデータとなりそうです。
Atomの環境構築(随時更新予定)


Atomのインストールから各種設定。


## Atomについて

- [Atom](https://atom.io/)
- 開発者に特化したテキストエディタ
- GitHub製
- オープンソース
- [Sublime Text: The text editor you'll fall in love with](https://www.sublimetext.com/)に比べ重い


## Package


### インストール済

- Japanese-menu：メニューを日本語に
- emmet：HTML、CSSの記述・編集を効率的に
- autocomplete-paths：ファイルの参照補完
- autocomplete-js-import：JavaScriptのimport補完。今後使いそうなので
- autocomplete-sass：Sassの構文補完
- autoclose-html：HTMLの構文補完
- Jumpy：ショートカットキーで表示されるアルファベットを打ってジャンプ ※詳細は下記に記載
- react：今後使いそうなので
- jquery-snippets：jQueryの構文補完
- file-icons：ファイルタイプをアイコンできちんと表示
- color-picker：カラーピッカー
- atom-beautify：コードを綺麗に整形
- highlight-selected：選択した箇所をハイライト
- highlight-line：カーソルがいる行をハイライト
- linter：文法チェック
- linter-jscs：JavaScriptの文法チェック
- linter-eslint：ECMAScriptの文法チェック
- open-in-browser：ブラウザで開く
- markdown-preview-plus：Markdownのプレビュー
- markdown-scroll-sync：Markdownのプレビューとコードのスクロールを同期
- show-ideographic-space：全角スペースの表示
- JavaScript Snippets：JavaScriptの入力補完

### インストールできなかった

バージョンが変わったらインストールしてみようと思う

- minimap
- minimap-highlight-selected
- minimap-bookmarks


### パッケージの一括インストール方法

事前に「Atom > Install Shell Commands」を実行し、Shellをインストールを実行しておく

1. 上記のリストをtxtファイルで適当な場所に保存(ここでは「packages.txt」で保存している)
2. その場所でターミナルを開き、以下のコマンドを実行

		apm install --packages-file packages.txt


## Theme

Sublime Textのカラーリングに似ている、以下テーマをインストールする

- Monokai

## 他の設定

### コードの書体・フォントサイズ・行間

環境設定 > エディタ設定

- 書体：「"Migu 1p"」※ダブルクオーテーションで囲む事
- フォントサイズ：15
- 行間：1.8

### サイドバーのフォントサイズ

Atom > スタイルシート

	.tree-view {
	  font-size:14px;
	}

### 縦線を消す

- Packageの「Wrap Guide」を無効に設定

### 不可視ファイルを消す

.DS_Storeを消す方法

1. 環境設定 > Package
2. 「tree view」を検索
3. 「Hide Ignored Names」にチェックを入れる

※「Show On Right Side」にチェックを入れると、サイドバーが右に移動する

### emmetの「!」展開時のja化と不要タグの削除

1. Package > emmet > view code
2. node_modules > emmet > lib > snippets.jsonを調整

調整箇所 その1

      {
      	"variables": {
      		"lang": "ja",
      		"locale": "ja-JP",
      		"charset": "UTF-8"
      	},

調整箇所 その2

        "doc": "html>(head>meta[charset=${charset}]+meta:vp+meta:edge+title{${1:Document}})+body",

上記を以下に

        "doc": "html>(head>meta[charset=${charset}]+title{${1:Document}})+body",


## 作業がはかどるショートカット

### 2分割

1. cmd+shift+p
2. pane入力。候補がリストアップされるので選択・実行

### ブラウザで開く(open-in-browser)

1. cmd+shift+p
2. openを入力。候補がリストアップされるので選択・実行

### コードの整形(atom-beautify)

1. cmd-shift-p
2. beauを入力。候補がリストアップされるので選択・実行

### 場所に飛ぶ(jumpy)

1. shift+enter


### タブ操作

- タブの切替：ctrl-tab
- ファイルを閉じる：ctrl-w

### ツリー場面で

- ファイルを追加する：a
- フォルダを作成：shift+a 

### 置換

- フォルダ選択 cmd+shift+F

### JavaScript入力補完(JavaScript Snippets)

Sublime Textの「[JavaScript & NodeJS Snippets](https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets)」のAtom版

- [cl] console.log
- [gi] getElementById

参考：[javascript-snippets](https://atom.io/packages/javascript-snippets)
R/ggmapでStamenMapsのterrainを表示しようとしたらjpgとpngの問題で表示できなかったのでソースから修正した話

# 経緯
Google Mapをソースにすればよいのだが、非公開のシステムを作ろうとするとライセンス上問題がある（買えばいいのだけど）。CC BY 3.0の[Stamen Maps](http://maps.stamen.com/)があるのでそれを使おうと思った。
Rのggmapパッケージを使用する。

* ggmapの使い方自体は下記などを参考にさせていただいた。
    * [R で GoogleMaps にプロットする](http://qiita.com/ckazu/items/d166757ed664ca622ecc)
    * [Rで解析：GoogleMapやStamenMapを利用「ggmap」パッケージ](https://www.karada-good.net/analyticsr/r-216/)

Stamen Mapsには地図の表示形式が複数あってterrainが一番通常の地図に近くきれいなのだけど、terrain以外の形式は問題なく表示できるのだが、terrainを指定すると、

* ggmapとしては地図画像をjpgで取得しようと処理する
* Stamen Mapsからはpngで画像を返してくる
    * Stamen Mapsの使用例には、下記の通りjpgと書いてあるのだが
        * http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg
* エラー

という按配。Google検索したらggmapのgit hubに
[stamen returning .png's, not .jpg's](https://github.com/dkahle/ggmap/issues/102)
というやり取りがあり、対応済みっぽいのだが、パッケージはまだ更新されていないのか。
仕方ないのでggmapのソースをダウンロードして修正してみる。

# 手順
* Rからインストール済みのggmapをアンインストールする。

```r
remove.packages("ggmap")
```

* これだけだと現在の関数が残ったままなので、Rを再起動
* CRANからggmapのソースをダウンロード
* 展開し、ggmap/R/get_stamenmap.R の下記を修正
    * "terrain"だけでなく"terrain-background"も同様に修正

```r
    旧236   if(maptype %in% c("terrain","terrain-background","watercolor")){
    新236   if(maptype %in% c("watercolor")){
    237     filetype <- "jpg"
    238   } else {
    239     filetype <- "png"
    240   }

（中略）

    旧427   if(maptype %in% c("terrain","terrain-background","watercolor")){
    新427   if(maptype %in% c("watercolor")){
    428     filetype <- "jpg"
    429   } else {
    430     filetype <- "png"
    431   }

（中略）

    旧444   if(maptype %in% c("terrain","terrain-background","watercolor")){
    新444   if(maptype %in% c("watercolor")){
    445     tile <- readJPEG(tmp)
    446   } else {
    447     tile <- readPNG(tmp)
    448   }
```

* ggmapのフォルダごとtar.gzで圧縮し直す
    * 例 tar zcvf ggmap_2.6.1.edit.tar.gz ggmap/
* Rで上記修正済みtar.gzを適用
    * Rのメニューバー [Tools]-[Install Packages...]
        * Install from で "Package Arcive File(.zip; .tar.gz)
            * 上記の修正済み.tar.gzファイルを選択
        * "Install"ボタン
* これで準備が整ったので例えば以下の通り

```r
library(ggmap)

loc<-c(139.69, 35.64, 139.78, 35.7)
(map<-ggmap(get_stamenmap(loc, maptype = 'terrain', zoom = 13)))
```
![Rplot.png](https://qiita-image-store.s3.amazonaws.com/0/116049/9d9b528d-ac26-064d-1f27-24746dc5264b.png)
[RaspberryPi] Chrome Browserをインストールやったみた。

こんにちは. **Dreamwalker**です。

今日はRaspberryPiにChromeブラウザをインストールやてみたいとおもいます。
本当に簡単なのでインストールしやすいです。

#Chromeiumインストール

```ruby:
$ sudo apt-get install chromeium-browser
```
上の事が出来ない方はこれを入力してみて下さい。

```ruby:
$ sudo apt-get install chromeium
```

#終わりに

Raspbianの基本ブラウザも使いやすく良いですが、最近Chromeをよく使っているのでRaspberryPiでインストールやってみまして。

**読みいただきありがとうございました。**
次のPostで会いましょう！

**Dreamwalker.**
Git備忘録


手元（local）のコードをgitで管理する（remoteに置く）のってどうするんだっけ、をいつも忘れるのでメモ

# localのディレクトリをGitで管理する

1. Gitで管理したいディレクトリに移動
2. `$ git init`する（.gitファイルが出来る）
3. `$ git remote add <任意のレポジトリ名> <url>` してremoteリポジトリへlocalディレクトリを登録する
	- \<url> はgithubやbitbucketで取得できる HTTPのアドレス（SSHではない）を使う
	- \<任意のリポジトリ名>はremoteリポジトリの名前となり、localのディレクトリ名と一致させる必要は無いっぽい（ただしlocalとremoteの対応がわかりにくくなるので一致させたほうが良い）
	- \<任意のレポジトリ名>を指定しなかった場合、デフォルトでは `origin` という名前のレポジトリになる
4. 3で登録したremoteレポジトリへlocalディレクトリをpushしてファイルをremoteに送る
	- `git add <ファイルなど>`
	- `git commit -m "hogehoge"`
	- `git push`
		- 初めて作ったリポジトリに対して初めてpushする場合は `git push -u <3で指定したレポジトリ名> <ブランチ(master)> ` としておく。実行オプションで`-u`を指定すると、次回以降はレポジトリ名とブランチ名の指定を省略できる
5. うまくいっていれば 3で対応付けたHTTPページにpushしたディレクトリが表示されている

[参照ページ](http://www.backlog.jp/git-guide/intro/intro4_2.html)


# （おまけ）初期設定関係

一番最初に一度だけ、以下の情報を登録しておく

```bash
$ git config --global user.name "<ユーザ名>"
$ git config --global user.email "<メールアドレス>"
```
この登録データは .gitconfigに書き込まれている
一度登録しておけばいちいちユーザ名を聞かれなくなる

[参照ページ](http://www.backlog.jp/git-guide/intro/intro2_2.html)
[Unity]シングルトンを使ってみよう


# シングルトンとは
シーンに1つしかないスクリプトには，FindとかGetComponentとかしなくても，簡単にアクセスできる!

# 手順
1. SingletonMonoBehaviourというスクリプトをコピペ
2. 対象となるスクリプトをシングルトンにする．
3. 呼ぶ

## 1. SingletonMonoBehaviour

1. SingletonMonoBehaviourという名前でスクリプトを作成
2. 中のコードをCommand + AとDeleteで消去
3. 以下のコードをコピペ

```
using UnityEngine;
using System;

public abstract class SingletonMonoBehaviour<T> : MonoBehaviour where T : MonoBehaviour{

	private static T instance;
	public static T Instance
	{
		get{
			if (instance == null) {
				Type t = typeof(T);

				instance = (T)FindObjectOfType (t);
				if (instance == null) {
					Debug.LogError (t + " をアタッチしているGameObjectはありません");
				}
			}

			return instance;
		}
	}

	virtual protected void Awake(){
		// 他のゲームオブジェクトにアタッチされているか調べる
		// アタッチされている場合は破棄する。
		CheckInstance();
	}

	protected bool CheckInstance(){
		if (instance == null) {
			instance = this as T;
			return true;
		} else if (Instance == this) {
			return true;
		}
		Destroy (this);
		return false;
	}
}
```


# 2. 対象となるスクリプトをシングルトンにする．

ここでは，GameManagerというスクリプトをシングルトンにする．

## 元のスクリプト
```
using UnityEngine;
using System.Collections;

public class GameManager : MonoBehaviour {

	public void Test(){
		Debug.Log ("シングルトン！");
	}
}

```

## 編集後
```
using UnityEngine;
using System.Collections;

public class GameManager : SingletonMonoBehaviour<GameManager> {

	public void Test(){
		Debug.Log ("シングルトン！");
	}
}
```

MonoBehaviourの部分がSingletonBehaviourに変わっています．


# 関数の呼び方
```
using UnityEngine;
using System.Collections;

public class TestScript : MonoBehaviour {

	void Start () {
		// クラス名.Instance.関数
		GameManager.Instance.Test ();
	}
}
```

# 演習
1. 新しく，TestManagerという名前のスクリプトを作成しシングルトンにしよう
2. TestManagerの中にpublicな関数を作成しよう．
3. 別のスクリプトからTestManagerの関数を呼んでみよう．
Xcode Source Editor Extensionの表示名


Xcode 8.1 の Editor メニューに表示されるプラグインの名称は、エクステンションのソースディレクトリにある Info.plist の CFBundleName の値が参照されているようです。本来参照されるべき? CFBundleDisplayName の値は無視されているようです。

![Info_plist.jpg](https://qiita-image-store.s3.amazonaws.com/0/49258/e6f53dcc-ef98-f61b-8713-538b3679c322.jpeg "Info_plist.jpg")


Editor メニューに表示されるプラグインの名称をカスタマイズしたい場合は、Bundle name (CFBundleName) と、将来の Xcode で突然サポートされるかもしれないので念のため Bundle display name (CFBundleDisplayName) に同じ名称を設定しておくと良いでしょう。

![Xcode_menu.jpg](https://qiita-image-store.s3.amazonaws.com/0/49258/3023fcdd-fdb7-76c3-c009-d8669e5fd97e.jpeg "Xcode_menu.jpg")


また、そのサブメニューのタイトルは XCSourceEditorCommandName の値が参照されます。
ATOMエディタではじめるマイナー言語探訪(あんま怖くないNim②)

#マイナー言語のお試し基準 : ATOMエディタサポート
ATOMエディターでテキストハイライトされているくらいのプログラム言語は，たとえマイナーなものでも割合とお気軽感ある、と個人的に思っている。

C言語にコンパイルされ、C言語に近しい実行効率を発揮できるNim(現在のバージョンは0.15.2)は、まさしく気軽にお試しできるようになりつつあるところ。ということで、windows環境上のATOMエディターでのNimの始め方を備忘録しておく。他のマイナー言語お試しの際にも参考になる...かも。

- ATOMエディタそのものの使い方については、[ATOM Editor をそろそろ始めようか](http://qiita.com/spiegel-im-spiegel/items/3d41d98dacc107d73431)などを参考に。
 - 拡張機能インストール画面からnim拡張機能を入れるとハイライトされるようになる。他の言語と同様なので委細は略。
- Nimのwindows環境へのインストールについては[Windowsではじめる、あんま怖くないNim①　それっぽいhello world。]
(http://qiita.com/kmry2045/items/3e98a9cc75afbb46cbf3)を参考に。

 - ちなみにNimをリンクの方法で入れるとmingwも一緒に入ってくる。Nim使うからには、mingwの活かし方も学んでおくべきだろうね。

#ATOM側にコンソール環境を用意
ATOMでプログラミングする場合、ATOMエディタ内でコンソールを扱えるようにしておくべき。ここのところにwindows環境にははまりどころがあるらしく、webで調べるとはじめに出て来る拡張機能terminal-plusが動かなかった。

以下のブログを参考に、platformio-ide-terminalの方を入れると問題なく動作した。
http://labs.spiffield.net/archives/508

## platformio-ide-terminal拡張機能の起動画面
ATOMエディタ内で下の方に追加された「＋」ボタンをクリックすると platformio-ide-terminalが立ち上がる。windows環境では，powershellが立ち上がる模様。普通のコンソール画面なので、PATHが通っているものはそのまま扱える。データベースのコンソールでも操作などもATOMエディタ内で完結できるのは便利。

![maria-nim.PNG](https://qiita-image-store.s3.amazonaws.com/0/16455/238ac0e2-a56b-c370-8d95-6d3927ee521d.png)
##文字コードにご注意。
windows環境でプログラミング言語を扱う際には、出力される文字コードへの配慮が必要となる。レジストリを書き換えたりは大げさなので、一般的なコンソール環境と同様に、以下のコマンドで都度切り替えるくらいが良いかと。

- 出力をutf-8とする場合
 - chcp 65001 
- 出力をShiftJisとする場合
 - chcp 932 

# AtomでNimしてみる。
普通にエディタをnimファイルをいじっで、コンソール上でnim c するだけ。PATHがとおっているばあい、nimとしての文法違反もエディット時に指摘してくれる。

こんなコードを書いて、コンパイル後に、

```nim
import unicode, strutils
let max =5

for i in countup(1, max):

  echo $max,"回中、",$i,"回目の質問です。"
  echo "10までの数字の中で、あなたのお好きな数字は？"
  var num: int= readLine(stdin).parseInt

  case num
  of 0:
    echo "ゼロですね。"
  of 1:
    echo "いちですか。"
  of 2..10:
    echo "こちらですね→ ",$int(num)
  else:
    echo "もっと大きいのがいいのですかねぇ"
```

できたexeファイルを実行してみる。
![atom.PNG](https://qiita-image-store.s3.amazonaws.com/0/16455/f64a5c0c-85e5-9fc7-9cc6-daf980d61f89.png)

やっていることは普通のC言語と概ね同じなんだけど、文法も実行方法もお手軽感がある。

#Nimの文法を概観したくなった方。

日本語で概観したい場合、以下のメモ書きを参考とさせていただくのが良いのかな。と
https://gist.github.com/miyakogi/b1df00c8bc99927d9d0d
Wine で柿木将棋を動かす (Ubuntu)

```
$ unzip -Ocp932 KShogi915Setup.zip
$ LC_ALL=ja_JP.utf8 wine KShogi915Setup.exe
$ LC_ALL=ja_JP.utf8 wine ~/.wine/drive_c/Program\ Files\ \(x86\)/Kakinoki/KShogi9/KShogi9.exe
```
Spring Boot CLI + Groovy

# Spring Boot CLI + Groovyに関する自分用メモです

## サーバポートの指定
spring run sample.groovy -- --server.port=9000
javaコマンドでjarファイルを起動するときは *--server.port=xxx* だけですが、
springコマンドだと、そのオプションの前に *--* を入れる必要があるみたいです

下記を参考に試してみて、実行できることを確認しました。
[とりあえずSpringbootをあっさり動かすメモ](http://qiita.com/dmc@github/items/ccd971c0614c2e7f69b2#ポート指定9000でgroovyスクリプトを実行する場合)
### 参考：javaコマンドで起動する場合(サーバポートの指定)
java -jar target/sample.jar --server.port=9000

## HTMLテンプレート
- &lt;html&gt;, &lt;head&gt;, &lt;header&gt;, &lt;body&gt;, &lt;footer&gt;  
html {} , head {} , body {}, header {}, body {}, footer {}
- &lt;title&gt;, &lt;h1&gt;, &lt;p&gt;  
title('hoge'), h1('hogehoge'), p('hogehogehoge')
- タグの属性  
body(id:"hoge") のように()の中に、「属性名:値」で指定する


## コメント
// 一行コメント
/* 複数行コメント \*/
/** Groovydocコメント */

## 参照
- Groovy公式ドキュメント  
[Syntax](http://groovy-lang.org/syntax.html)
- [SpringBootプログラミング入門](http://amzn.to/2ft4mft)
- [はじめてのSpring Boot[改訂版]](http://amzn.to/2g6hKpX)
携帯用vimrc

## 主旨
最近vimrcについてググることばっかりなので、自分の設定をQiitaにあげておく。
Githubでもよかったのですが、Qiitaの気分でした。

## 設定
``` vimrc:vimrc
set tabstop=2        " タブによるインデント幅を2文字分にする
set number           " 行番号の表示
set formatoptions-=c "フォーマット揃えをコメント以外有効にする
set wrapscan         " 末尾まできたら先頭から検索する
set smartcase        " 大文字で検索されたら対象を大文字限定にする
set showmatch        " 括弧の対応をハイライト
syntax on            " ファイルタイプに応じて挙動,色を変える
filetype plugin on
filetype indent on
" expandtab          " タブを半角スペースに変換した上で入力する。タブ派なのでコメントアウトしておく
augroup MyXML        " 閉じタグ補完
  autocmd!
  autocmd Filetype xml inoremap <buffer> </ </<C-x><C-o>
  autocmd Filetype html inoremap <buffer> </ </<C-x><C-o>
  autocmd Filetype eruby inoremap <buffer> </ </<C-x><C-o>
augroup END
```
### コメントアウト
vimのコメントは、ダブルクォート

## 参照
- 閉じタグ補完  
[Vim で XML/HTML の閉じタグを自動補完するようにした](http://babie.hatenablog.com/entry/20110130/1296347719)
Python > 1から100, 501から600の数値を出力 > csv用

```txt:
動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
```

以下のcsvファイルを作成する

- 1列目: 1から100
- 2列目: 501から600

```prep_seq_data.py
import numpy as np

numdata=100
x_data = np.linspace(1,100,100)
y_data = np.linspace(501,600,100)

#print(x_data)
#print(y_data)

for xs, ys in zip(x_data, y_data):
	print '%d,%d' % (xs, ys)
```

```txt:結果
$ python prep_seq_data.py > input2.csv 
$ head input2.csv 
1,501
2,502
3,503
4,504
5,505
6,506
7,507
8,508
9,509
10,510
$ tail input2.csv 
91,591
92,592
93,593
94,594
95,595
96,596
97,597
98,598
99,599
100,600
```
Ubuntu / XTerm > コピペ > マウスで範囲選択 (コピー完了) / マウス真ん中ボタン(貼り付け)

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
XTerm(297)
```

XTermというターミナルエミュレータ内の文字列のコピペがわかりにくかった。

google 検索で出てくるブログなどには「右クリック」と記載があるが、右クリックは多分いらない。

以下のようにする。

- 選択開始位置で左クリック
- そのまま選択終了位置までドラッグして選択領域を広げる
  - これでコピーされる
- 貼り付けたい場所に移動
- マウス真ん中ボタンクリック


```txt:例
$ xterm --version
xterm: bad command line option "--version"

usage:  xterm [-/+132] [-C] [-Sccn] [-T string] [-/+ah] [-/+ai] [-/+aw]
    [-b number] [-/+bc] [-bcf milliseconds] [-bcn milliseconds] [-bd color]
    [-/+bdc] [-bg color] [-bw number] [-/+cb] [-cc classrange] [-/+cjk_width]
    [-class string] [-/+cm] [-/+cn] [-cr color] [-/+cu] [-/+dc]
    [-display displayname] [-e command args ...] [-fa pattern] [-fb fontname]
    [-/+fbb] [-/+fbx] [-fd pattern] [-fg color] [-fi fontname] [-fn fontname]
    [-fs size] [-/+fullscreen] [-fw fontname] [-fwb fontname] [-fx fontname]
    [%geom] [#geom] [-geometry geom] [-help] [-/+hm] [-/+hold] [-iconic]
    [-/+ie] [-/+im] [-into windowId] [-/+j] [-/+k8] [-kt keyboardtype] [-/+l]
    [-/+lc] [-lcc path] [-leftbar] [-lf filename] [-/+ls] [-/+maximized]
    [-/+mb] [-mc milliseconds] [-/+mesg] [-/+mk_width] [-ms color] [-n string]
    [-name string] [-nb number] [-/+nul] [-/+pc] [-/+pob] [-rightbar] [-/+rv]
    [-/+rvc] [-/+rw] [-/+s] [-/+samename] [-/+sb] [-selbg color] [-selfg color]
    [-/+sf] [-/+si] [-/+sk] [-sl number] [-/+sm] [-/+sp] [-/+t] [-ti termid]
    [-title string] [-tm string] [-tn name] [-/+u8] [-/+uc] [-/+ulc] [-/+ulit]
    [-/+ut] [-/+vb] [-version] [-/+wc] [-/+wf] [-xrm resourcestring]
    [-ziconbeep percent]

```

キーボードのCtrl+vは有効ではないようだ。
Googleスプレッドシートで空白のみのセルを削除する

Google Apps Scriptを使ってスプレッドシートでgetDataRange()やgetLastRow()などのセル範囲取得メソッドを実行すると空白のみのセルも認識してしまいます。スプレッドシートを眺めて空白が入ったセルを見つけ出すのはなかなか大変と思いました。そこで、空白のみのセルを削除して文字列あるいは数値の入ったセルでの範囲指定ができるようにするための方法をご紹介します。条件は下記２点です。

- 文字列の中に入っている空白はそのまま

- nullではない空白のみのセルを削除


方法は次の通りです。

1. シート内の使用セルとして認識される全データをgetValuesを使って配列にダウンロードする。

2. 配列の中で空白のみになっている削除したい要素を"null"で上書きする。検索に正規表現を使用しているため、ここで不要なセルも同時に削除することも可能です。（削除したいセルを"null"で上書きすることで未使用セルとしての認識になります。）

3. setValuesを使って修正した配列を最初のシートへ上書きアップロードする。

getValues, setValuesで取得できるセル数の上限250個がなくなっていたこともあり、今回のような簡単なスクリプトで空白セルを削除できるようになりました。


````gas:
var ss = SpreadsheetApp.getActiveSheet();
var data = ss.getDataRange().getValues();
for (var i in data){
    for (var j in data[i]){
        if (data[i][j].length > 0 && !/^[a-zA-Z0-9]+$/.test(data[i][j])){
            data[i][j] = null;
        }
    }
}
ss.getRange("A1").offset(0,0, data.length, data[0].length).setValues(data);
````

このスクリプトでは数値とアルファベットのあるセルを正規表現を使って使用セルとして想定しています。
入力フォーム


## 留意点

- widthを設定、文字を大きく、paddingを必ず入れる。

- inputタグのtype属性email,tel,numberなど積極的に使う
http://www.htmq.com/html5/input.shtml

- 入力必須項目は ` required `
http://www.htmq.com/html5/input_required.shtml

- デフォルトでフォーカスを当てたいフォームには ` autofocus `
http://www.htmq.com/html5/input_autofocus.shtml

- placeholderに入りきらない複数の例がある場合 ` autocomplete ` を使う
http://www.htmq.com/html5/input_autocomplete.shtml

- radioボタンのサイズはfont-sizeで調整、またはwidth,heightで調整
http://qiita.com/takuya-andou/items/7487424346a69ad02690

- スマホで「数字+ハイフン(-)」が電話番号と認識されることがあるので、
それを避けたい場合は ` content="telephone=no" `
http://www.tagindex.com/html5/page/meta_format_detection.html

- 入力時にでる青いアウトラインは消した方が美しい ` outline: none; `

- iOSでinputに角丸とグラデーションが自動で反映されないようにする
http://aoicotori.hatenablog.com/entry/iphone-button-css

- フォームを囲む `fieldset`
http://www.htmq.com/html5/fieldset.shtml

- submitしてもページ遷移しないように`return false;`する
https://hacknote.jp/archives/605/

- enterで誤送信しないようにする
https://allabout.co.jp/gm/gc/23972/2/


## 英字入力のみにしたい

input typeでは絞りきれない
http://qiita.com/tsunet111/items/4a8c72c418d16a48b089

## inputのvalueをリアルタイムに取得

基本はkeyupで取得。
keydownだとiOSとAndroidでとれる文字が1文字ずれる。
changeだとblurした瞬間じゃないととれない。

iPhoneの完了ボタンはkeydown,keyupではなく、
focusoutで取得する。

`input type="email"` 、`input type="url"` とかにしてるとAndroidでは親切に変換候補を出してくれて、決まりきるまでenterが押されない状態になってしまう。余計なおせっかい。

厳密に入力文字を峻別したいのなら
`input type="text"`にしてjsで制御すること

```javascript
$input.on('keyup focusout', () => {
    $target.text( $input.val() );
})
```


## あんまり使わないけど...

### prompt

ダイアログボックスを表示して取得する

```javascript
var nickname = prompt("ニックネームを入力してください", "NICKNAME");
document.write(nickname);
```

### confirm

```javascript
var ans;
$('#button').on('click', function(){
  isYes = confirm('are u ready?');
  yourAns = isYes ? 'yes!' : 'no!';
  document.write(yourAns);
})
```



> 参考
[HTML5＋CSS3で作る 魅せるiPhoneサイト ](http://www.amazon.co.jp/%E6%9C%AC-HTML5%EF%BC%8BCSS3%E3%81%A7%E4%BD%9C%E3%82%8B-%E9%AD%85%E3%81%9B%E3%82%8BiPhone%E3%82%B5%E3%82%A4%E3%83%88-iPhone-iPad-touch%E5%AF%BE%E5%BF%9C/dp/4899772750/ref=sr_1_1?ie=UTF8&qid=1462318543&sr=8-1&keywords=%E9%AD%85%E3%81%9B%E3%82%8B+iphone)
[inputタグの便利な属性まとめてみた](http://qiita.com/oh_rusty_nail/items/e08f6b323d526fab3d55)
[今どきの入力フォームはこう書く！HTMLコーダーが抑えるべきinputタグの書き方まとめ](https://ics.media/entry/11221)