OmniAICreator/Qiita-1.07M huggingface dataset:
新人プログラマーの軌跡　#１

まず軽く自己紹介を、、、

私は2016/04までは一切プログラミングに触れたことがなく、パソコンもどちらかと言えば苦手な分野です。
しかし、この4月から仕事でプログラミングを扱うこととなりました。
そんな私がこれからの投稿では自戒の念を込めて現状のアウトプットなど、つらつらと書いていきたいと思います。

#現在までの1か月
今までに取り組んできたことを列挙していきます。
それぞれにかかった時間は定かではないですが、どれも1日前後で終わったような気が

##ネットサービス
###ドットインストール　(http://dotinstall.com/)
* html入門
* css入門
* PHP入門
 
→　ひとつ3分前後の動画が15本ほどあります。
　　どの事項もまんべんなく教えるので、初学者にはどこが基礎でどこが応用かといった判断がつきにくい。
　　動画も短く流しっぱなしに出来るのは良かった。

###progate　(https://prog-8.com/)
* HTML&css　初級編
* PHP　基礎編

→　数枚のスライドの後、その知識を使ったコードを打ち込む。
　　すべてを丁寧に打たなければならないので、細かな点を意識するが出来た。
　　無料では利用できるコースが限られるのが痛いかな

###sololearn (http://www.sololearn.com/)
* PHP

→　英語サイトだが英語が簡単で、そのスライドのまとめの1文も記述してあり読みやすい。
　　PHPを全く知らない状態だと、いくら英語が簡単とはいえ把握しにくい場所もあった。PHPでなくても他の言語を知っていれば感覚的にわかるのかも。

###codeprep　(http://codeprep.jp/)
* はじめてのHTML
* はじめてのCSS

→　ヒントスライドが常にあり穴埋めでコードを打ち込むタイプなので、サクサク進んでしまう。
　　コードがウィンドウ上でどう動作するかを見ながら進めれるので、どのような構造になっているかが大まかに把握できる。ただ良く分からないうちに終わることも・・・

##書籍
* HTML5&amp;CSS3辞典 第2版 (株式会社アンク)
→　タイトル通りhtmやcssについて網羅的に抑えてはいるが、ただの紹介にすぎない。
* Gitが、おもしろいほどわかる基本の使い方33　(大串　肇)
→　sourcetreeを使いコマンドを打ち込むことなく、gitを使うことを教えてくれた。linuxに非対応だが大枠を掴むといったら最初の1冊なのか。

##実技
**既存の擬似サイトを２つ作成。**(各々1週間ほど)
**PHPで年月指定移動可能なカレンダーの作成。**(3日)
　
#最近の学習内容
既存の擬似サイトを作成中(4日目)。　今までとは一味も二味も違う・・・
html・css　→　php　→　html・cssと交互にしたので感覚的には分かっていない為か、取り掛かり初めはなかなかの忘却っぷりであった。

###今までの擬似サイトでは無かった新事項
**レスポンシブの登場**　→　今まで作ったサイトはレスポンシブではなかった。
**サイトの1から構造を考えること**　→　今まではbodyのheaderやfooter部分は記述していなかった。

###困った点

**margin: 0 auto;・text-align: center;**
どちらも真ん中に寄る、といった漠然とした考えしか持っていなかったので違いがよく分かっていなかった。margin: 0 auto;はそれ自体を、text-align: center;はその子要素を中央に揃えるものだと分かった。ただし、widthが既知でありブロック要素に限られる。

**favicon**
以前作成したサイトと同じサーバーに接続していたために、そのサイトのfaviconが表示されていた。head要素の中をいじってもfaviconが消えないので不思議だった。だがなんてことはない。キャッシュとして残っていたのだから、新たに画像を指定することで解消された。

**float・position**
floatやpositionを付けた子要素の親要素にmarginやpaddingをかけても、言うことを聞いて動いてくれないことが半日に1回くらいあった。それは親要素にwidthやheightが0と認識されているからだ。親要素に.clearfixかoverflow:hidden;を適用すればいいんですよね。
あーこのミスは散々やり過ぎて自分に腹が立ってくる・・・

**擬似要素**
:hoverは今までopacityや単なるcolorの変化しかしてこなかったので、ゆっくり変化することはどうしたら良いのかから始まった。思い通りの動きには時間がかかるが、transition要素を通常時とhover時の両方につけることで現れる・消えるの動作が別々に指定できると分かった。

**セレクタ**
「>」セレクタを用いて指定した場合に直下の子要素のみではなく、孫要素にも適用されてしまった。何となく使ってはいたが、継承という概念があり、そのために孫要素にも適用されていたのであった。ただし継承する要素と継承しない要素がある。
###これから
レスポンシブを作る事で、レイアウトやアニメーションを付けることが必要となるのでJavaScriptやwordpressが分かればもっと出来る幅が広がるんだなと思う。そこの知識を早く入れてしまわないと
シンボリックリンク貼り方メモ

シンボリックリンクとかやったことなかったお。
なので古いシンボリックリンクを貼り直すときのメモ。
　

```
 rm -rf [旧シンボリックリンク名] && ln -s [リンクを貼りたいパス] [新シンボリックリンク名]
```
Rails4のFunctional Testには注意しよう

Railsはデフォルトではminitestでテストを書くようになっていて、テストは

* Unit Test (`test/models`)
* Functional Test (`test/controllers`)
* Integration Test (`test/integration`)

に分類されています。

* [A Guide to Testing Rails Applications](http://guides.rubyonrails.org/testing.html#unit-testing-your-models)

Unit TestとIntegration Testは良いんですが、端的に言えば、Functional Testは書かないのが良いです。コントローラに書いたコードをテストしたい場合は、Integration Testを書きましょう。

> Rails 4までと、Rails 5以降では状況が変わってくるみたいです。
> Rails 5をお使いの場合は、深く考えずにRailsが`g`してくれたファイルにテストを書いて大丈夫です。

# 理由

Functional Testを書いていくと、実際にWebアプリとして動作させる場合との挙動の違いに悩むことがあります。

1. `params`の扱いが本物のWebアプリケーションと違うことがある
2. 一個のテストケースでは一個のコントローラのインスタンスが使い回されるので、テストの書き方とコントローラの実装によっては、本物のWebアプリケーションと挙動が変わる

もちろんこれらに注意しながらテストを書くこともできますが、特に1.にはまるとけっこう辛いので、雑に「Functional Testは書かない」という方針を採用するのが良いんじゃないかと思います。

## `params`の扱い

JSONをPOSTするようなAPIのときに`params`が本物と違って困ることがあります。

```
test "post JSON" do
  post(:do_something, { id: 123 })
end
```

こんなテストでは、コントローラから見たときに、`params[:id]`が`123`になっていて欲しいのですが、実際には`"123"`と文字列になってしまいます。Functional Testを使うと、`params`の値は全部文字列になり、ふつーにWebアプリとして動作させたときにはきちんとJSONの通りの値になります。

POSTされたJSONをそのままActiveRecordに引き渡すような場合には、ActiveRecordが上手いことやってくれるので問題にならないのですが、`params`から数字を読んできて計算しなくてはいけない場合とかに困ります。

注意が必要ですね。

## インスタンス使い回しの問題

Railsで作られたWebアプリケーションでは、リクエスト一つ一つを処理するためにコントローラのインスタンスが新しく作られます。Functional Testでは一つのテストケースでは一つのコントローラのインスタンスが使い回されます。

行儀良くテストを書いていれば一つのテストケースの中で複数回アクションを呼ぶことはないでしょうし、行儀良くコントローラを実装していればアクション起動前のインスタンス変数の状態に依存するコードは書かないでしょうが、うっかりこの二つの条件に引っかかるテストとコントローラを書いてしまうと、テストが通るのに動作しないWebアプリケーションができてしまいます。

`params`の問題に比べると仮定が多くて、実際に問題のあるコード・テストになってしまうことは少ないとは思いますが、僕は実際に経験したことがあります。

* 一つのテストケースの中でアクションを複数回呼ばない
* アクションの中では依存するインスタンス変数に注意する

などのポイントに気を付けることもできますが、まーこういうのが問題になるのって気を付けていても見落とす場合ですよね。

# まとめ

RailsのFunctional Testは注意するべき点がいくつかあるので、細心の注意を払ってテストを書かなくてはいけません。テストごときに細心の注意とか払いたくないし多分そのうち忘れて悲しいことになるので、雑な対処として「Functional Testは書かない」というのをお勧めします。

rspec-railsとかだとどうなってるんでしょうね。よく知りません。

## Rails5ではどうなるか

`5.0.0.rc1`で試してみたところ、`test/functionals`以下にできるファイルは`ActionDispatch::IntegrationTest`のサブクラスになっていました。Rails 4までは`ActionController::TestCase`のサブクラスだったので、変更されているようです。

ここで説明したつらさはすべて`ActionController::TestCase`に由来するものなので、Rails 5を使う場合は特に悩む必要がないようです。

* Deprecate ActionController::TestCase in favor of ActionDispatch::IntegrationTest - https://github.com/rails/rails/issues/22496
Qiita | ネタ帳 @Yinaura

昨夜眠れずに、Qiita のネタをどこにメモするか考えていた。失望と戦った。
だが Qiita 自体にメモるのが一番じゃないか？

ということでメモしておく。

# ruby

- パーセント記法の覚え方。
- why does flat method (no class, no model) keeps instance variables inside?
 
# programming

- rspec と capybara と ruby と rails の関係
- capybara checked
- i18n の場所がわからなくなった時は rails console を使おう。

# git

- Git | why git chceckout vanish file changes.
- Git | How to back to previous commit while interactive rebasing?
- Git | How to move file diff from specified one commit to another one commit?
- Git | How to grep in diff from branch root only? ( use diff ? )
- Git | How to retry interactive rebasing?
- Git | What is the head?
- Git | How to do rspec test for all commits from branch root?
- Git | How to escape from rebase interactive mode temporary and check newest commit statement?
- git branch で ブランチを移動できるようにする

# 仕事

- 手戻りを減らす仕事術



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# メンター受付


https://menta.work/user/5694

<!-- Update From Qiita API -->
Azure WebAppsでnode.js 5.*系を使う


Azure Portal
https://portal.azure.com/

node.js 5.*系

App Service→Webアプリ名→すべての設定→アプリケーション設定
`WEBSITE_NODE_DEFAULT_VERSION:5.8.0`

ついでにこちらも適宜設定する。
`NODE_ENV:test`

参考
https://azure.microsoft.com/ja-jp/documentation/articles/nodejs-specify-node-version-azure-apps/
[Arch Linux]ホームディレクトリ内のディレクトリを英語で生成する

# はじめに
Ubuntuなどよくあるディストリビューションでは、ホームディレクトリ以下に「ドキュメント」や「ダウンロード」などのディレクトリが生成されています。

しかしArch Linuxでは明示的に生成する必要があります。この際、日本語で作られてしまうと```cd```するときに非情にテンポが悪くなるので、英語で生成しようというお話です。

# xdg-user-dirs-gtkのインストール
xdg-user-dirs-gtkパッケージをインストールすると、ホームディレクトリ以下のディレクトリ群をコマンド一発で生成できるようになるので、これを利用します。pacmanあるいはyaourtで入れましょう。

```bash
$ yaourt -S xdg-user-dirs-gtk
```

# ディレクトリ群の生成と英語化
/etc/locale.confに```ja_JP.UTF-8```の記述があると、自動的に日本語で生成されていまいます。そこで、```LANG=C```をつけることでこれを回避します。

```bash
$ LANG=C xdg-user-dirs-update
```
ZabbixでアイテムがNot supportedになってからのrefresh時間の設定

# 概要

UserParameterを設定していて、うまく値がとれず、アイテムの状態がNot Supportedになってしまって、修正がうまくいったのか確認ができなくなってしまった。
refreshの方法を調べた

# 結論(きちんと確認ができていない)

1. Administration->General
2. 右側のプルダウンから、Otherを選択
3. Refresh unsupported item(in sec) で好きな時間を設定する

[1 General [Zabbix Documentation 2.2]](https://www.zabbix.com/documentation/2.2/manual/web_interface/frontend_sections/administration/general)

![Screenshot from 2016-05-12 15-00-05.png](https://qiita-image-store.s3.amazonaws.com/0/82011/17ca380a-0208-0304-808d-219a18855cdd.png)
[C/C++]シフト演算だけで特定のbitを読み出す

# はじめに
学校で教科書として使っているCQ出版社の「[組み込みソフトウェア開発スタートアップ](http://www.cqpub.co.jp/hanbai/books/37/37191.htm)」（デザインウェーブマガジン編集部 編）という本があるのですが、この本の50ページに「シフト演算だけで値を読み出す場合」として以下のようなサンプルコードが記されています。

```c
#define bit(x, n) ((x << (8 * sizeof(int) - n - 1)) >> (8 * sizeof(int) - 1))
```

使い方としては、xというビット列からn番目だけを抜き取って読む、ということだと思います。しかしこれ、ぱっと見何をしているのかよくわからないので分解しつつ見ていきましょう、というお話です。

# 早速解読してみる
今回はxとして二進数で「10000101」を、nとして「2」を使ってみます。最も右のbitが0番目という風に数えます。

まずはここの部分から。```sizeof(int)```をとりあえず4bytesと解釈しましょう。うちのclangがそういう仕様だったもので。

```c
(x << (8 * sizeof(int) - n - 1))
```

こういうことなので、何bit左にシフトすべきか計算してみましょう。

```c
8 * sizeof(int) - n - 1 = 8 * 4 - 2 - 1 = 29
```

ふむなるほど。ということはxは左に29bitシフトされて、こんな感じになります。縦棒から右がシフトされた分です。桁数はsizeof(int)の桁数で固定されますので、今回の場合全体として4bytes=32bitとなります。つまり、それ以上の桁はあふれていってしまうわけですね。

```
101|00000000000000000000000000000
```

では次の部分を。

```c
(8 * sizeof(int) - 1)
```

これを計算した分だけ右にシフトすればいいわけですね。となると

```c
8 * sizeof(int) - 1 = 8 * 4 - 1 = 31
```

ですね。改めて右に31bitシフトしてみましょう。今度は縦棒から左がシフトされた分です。

```
0000000000000000000000000000000|1
```

確かに特定のbitを読み取ることができることができました。しかしよくこんなトリッキーな計算方法思いつきますね...

int型の大きさは処理系によってまちまちです。しかしあくまで整数値の読み出しなので、sizeof演算子を使ってどんな環境でも動くようにしてあるんですね。恐れ入りました...
var と let

## var を使った場合

```js:test.js
'use strict'

for (var i = 0; i < 10; ++i) {
  setTimeout(function(argument) {
    console.log(i)
  }, i * 1000);
}
```

```bash:出力
> node test
10
10
10
10
10
10
10
10
10
10
```

## let を使った場合

```js:test.js
'use strict'

for (let i = 0; i < 10; ++i) {
  setTimeout(function(argument) {
    console.log(i)
  }, i * 1000);
}
```

```bash:出力
> node test
0
1
2
3
4
5
6
7
8
9
```

## なぜこうなるのか？

`var`は、その宣言を行った**関数のブロック**が有効範囲になります。関数のブロック内でない場所で宣言した場合は、グローバル変数になります(実行環境によってはグローバル変数ではなくモジュール内のローカル変数になったりする場合もありますが)。

```js
'use strict'

for (var i = 0; i < 10; ++i) {

}

var num = 123;
console.log(i); // -> 10
```

これは、下記のように宣言するのと同じになります。

```js
'use strict'
var i;
var num;

for (i = 0; i < 10; ++i) {

}

num = 123;
console.log(i); // -> 10
```

つまり、冒頭の例

```js
'use strict'

for (var i = 0; i < 10; ++i) {
  setTimeout(function(argument) {
    console.log(i)
  }, i * 1000);
}
```

は、

```js
'use strict'
var i;

for (i = 0; i < 10; ++i) {
  setTimeout(function(argument) {
    console.log(i)
  }, i * 1000);
}
```

というのと同じということになります。`i`はループが終了した時点で`10`になるので、`setTimeout`の中の`console.log(i)`は`10`を出力します。
これを`0,1,2,3,...`という出力にしたい場合は、以下のように関数で囲って、`i`を引数として扱うようにします。

```js
'use strict'

for (var i = 0; i < 10; ++i) {
  (function(i) { // *1
    setTimeout(function(argument) {
      console.log(i)
    }, i * 1000);
  })(i);
}
```

上記ソース中の`*1`とコメントを付けた箇所の`i`は、ループの中で宣言された関数の引数であり、その上の行の`for(var i`の箇所にある変数`i`とは**別物**です。
わかりやすくするために引数名を書き換えるとこのようになります。

```js
'use strict'

for (var i = 0; i < 10; ++i) {
  (function(arg) {
    setTimeout(function(argument) {
      console.log(arg)
    }, i * 1000);
  })(i);
}
```

引数を使わずに別の変数に代入するという方法もあります。

```js
'use strict'

for (var idx = 0; idx < 10; idx++) {
  (function() {
    var i = idx; // こうすると、iはこの関数ブロックのローカル変数になる
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })()
}
```

### let

`var`とは違い、`let`は宣言された箇所を含む`{ ... }`で囲まれた範囲のブロックが有効範囲になります。

```js
'use strict'
let a;

for (let i = 0; i < 10; ++i) {
  // a が使える
  // i が使える
}

// a が使える
// i は使えない!
```

厳密には異なるのかもしれませんが、下記のコードは

```js
'use strict'

for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
```

このように書くのと同じです。

```js
'use strict'

for (var idx = 0; idx < 10; idx++) {
  (function() {
    var i = idx;
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })()
}
```

`let`の方が理に適った動作だと思います。Node.jsなどES6の機能が使えるJavaScript実行環境では(違いがあることを把握したうえで)積極的に`let`の方を使って行くのが良いでしょう。
学校のマシンにLinuxBrewを導入した話

# はじめに
僕の学校では(未だに)Ubuntu12.04が自由に使えるようになっています。しかし、色々使いたいパッケージなどが導入されていなかったり、バージョンが古くて使いたい機能が未だに実装されていなかったりします。そこで、LinuxBrewを導入して乗り切ろうとして話です。

# curlとgawkのインストール
まずは[curl/gawkをインストールするシェルスクリプト](https://gist.github.com/aruneko/ef8c47eacf526898613d)を使ってそれらをインストールします。
まぁ、このシェルスクリプトを使えば一発です。
ちょっとバージョンは低いですが、一時的に使うだけですし大丈夫大丈夫。

```bash
wget https://gist.githubusercontent.com/aruneko/ef8c47eacf526898613d/raw/141a76505a137b8041cf6ecf0227d80dd759903d/curl_install.sh
sh curl_install.sh
```

インストールが終わったら.bashrcに一時的にcurlとgawkのパスを通しておきます。
.bashrcへのPATHの書き込みは上のシェルスクリプトがやってくれるはず。
この後もPATHの変更時には適宜sourceコマンドを実行してください。

```bash
source ~/.bashrc
```

# LinuxBrewのインストール
何とか入れ終わったらlinuxbrewを仕込んでいきます。これは比較的簡単。1行インストーラーですからね。

```bash
git clone https://github.com/Linuxbrew/brew.git ~/.linuxbrew
```

終わったら.bashrcの末尾にこれを書き加えておきます。

```bash
export PATH="$HOME/.linuxbrew/bin:$PATH"
export MANPATH="$HOME/.linuxbrew/share/man:$MANPATH"
export INFOPATH="$HOME/.linuxbrew/share/info:$INFOPATH"
```

# 一時的なcurlの強制認識
どうやらインストールスクリプトからcurlが見えないようなので、強制的に認識させます。

適当なエディタで`$HOME/.linuxbrew/Library/Homebrew/cmd/vendor-install.sh`を開いてください。
8行目ぐらい(`source ...`の次の行)に次の行を追加します。

```shell
HOMEBREW_CURL=$HOME/opt/curl/bin/curl
```

# curlとgawkの自己完結化
CurlとgawkをLinuxBrewでインストールし、自己完結化させます。
さっき試したときはgawkのビルドがこけましたが、もう一回インストールしたところうまくいきました。こわい。

```bash
brew install curl gawk
```

終わったら先ほど設定した臨時のcurlとgawkのPATH設定およびvendor-install.shのcurl設定は削除しておきます。
自前で入れたcurlとgawk(に付属する依存関係)は削除してもOKです。

# VimとZshのセットアップ
イマドキな環境を作るためにとりあえずこいつらはインストールしておきます。

```bash
brew install vim --with-lua
brew install zsh --disable-etcdir
brew install zsh-completions
```

dein.vimなどお好みの方法で調節は各自行ってください。

# Zshがログインシェルとして設定できないときの対処法
学校のように管理者権限がない場合、デフォルト以外のシェルをログインシェルに設定することは大変難しいです。

そこで今回はGNOME Terminalの設定をいじって、GNOME Terminalを使っているときだけZshを使うようにするというラインで妥協します。

方法は簡単で、GNOME Terminalのプロファイルの設定から、**SHELLの代わりにカスタム・コマンドを実行する**のところに```which zsh```して出てきた結果を書き込んでおけば完成。いきなりzshを起動できるようになるのでとてもおすすめです。
アンドロイド素材用アセット(photoshop)


##一番上に新規レイヤーを作成して、名前を下記に
default 100% mdpi/, 150% hdpi/, 200% xhdpi/, 300% xxhdpi/, 400% xxxhdpi/
default 100% xxxhdpi/, 66% xxhdpi/, 50% xhdpi/, 33% hdpi/, 25% mdpi/
FuelPHPでよくわからんエラーがでたとき

#最終的なエラーの箇所だけ出てる感じ？

```
Method Fuel\Core\View::__toString() must not throw an exception
```
だけ！みたいな

そんなときはきっと
fuel/app/logsにあるログに対してapacheが書き込めていないので
apacheでも書き込めるようにパーミッションをかえてあげると
もうすこし詳しいログが出るようになる
同一ファイル名を探す Python プログラム

## フォルダ（ディレクトリ）の階層に紛れた同名ファイルを探す

　フォルダの数や階層が多くなると、うっかりファイルを複製してしまい、似て非なるファイルが階層の中に残っていて、検索時や編集時に問題を起こしやすい。

　実は、しばらく使っていた階層管理のできるノートアプリにたっぷりたまったテキストファイルを機械的に移行するツールで他のノートアプリに持っていったら、どうやら複数の同名ファイルが存在していた。この際、すっきりと一掃してしまおうと、同名のファイルを見つけやすくするよう、ファイルリストを作成するプログラムを書いた。

## プログラムの仕様

* フォルダーのすべての階層をたどって、ファイル名＋フォルダー名のリストを作る
* リストをソートして、拡張子の前のファイル名が同じものに印を付ける
* 同じファイルでも微妙に名前が違っている可能性があるので、すべてのリストを出力

　といったところ。全てのリスト（ファイル名順に並んでいる）を出力して、印のついたものと、印は付いていないものの、似たような名前が並ぶのを人の目で見て判断することもできるようにした。
（嫌なら印のついたものだけ見ればよい）

## リストを作るプログラム（Python）

リストは、ファイル名とフォルダ名を「：」で区切って作成。
ファイル名の上昇順に並べる。
同じファイル名（拡張子の前）があったら、「\***** duplicated file?? ****」を後ろに付ける。
調べるフォルダは、カレントのフォルダを最上位として探索する。
出力されるリストのファイル名は「out.txt」で、UTF-8 改行はLFのみとなっているので、環境に応じて修正して利用してください。

まだまだ、Python初心者なので、あちこちのWebサイトの情報を組み合わせて作りました。
ご意見、ご教授大歓迎です。

```python:ListDupFile.py
#!/usr/bin/python
# -*- coding: utf-8 -*-

import codecs
import os

oList = []
odata = ""
prev = "...."

for root, dirs, files in os.walk(u'.'):
	for file_ in files:
		filename = file_
		itm = filename + u'　: ' + root
		oList.append(itm)
oList.sort()
for data_ in oList:
	wList = data_.split('.')
	if prev in wList[0] :
		data_ = data_ + "  ***** duplicated file?? ****"
	prev = wList[0]
	odata = odata + data_ + "\n"
fout = codecs.open(u'out.txt',"w","utf-8")
fout.write(odata)
fout.close()

```
c++ builder XE4, 10.2 Tokyo > アプリケーションの最小化とその反対 > Application->Minimize() / Application->Restore()

```txt:動作確認
C++ Builder XE4
RAD Studio 10.2 Tokyo Update 2 (追記: 2017/12/27)
```

アプリケーションをタスクバーにしまう（最小化）。また、その反対を行う。

参考 http://stackoverflow.com/questions/18124037/best-way-to-hide-and-restore-an-application

```
Application->Minimize();
```

```
Application->Restore();
```

Application.MainForm.Visible については変更しないこととした。
Xcode のデバッグエリアを昔みたいに独立ウインドウに分離したかった

# Xcode 恋々

昔話。

その昔、Project Builder と Interface Builder という二つのアプリケーションがありました。NeXT 由来のこの二つのアプリは Mac OS X アプリの開発環境として Developer Tools CD という形で Power Mac シリーズあるいは OS パッケージに同梱されていました。今でも Xcode プロジェクトファイルの中に存在しているファイル pbxproj は、当時の Project Builder のプロジェクトファイル pbproj 由来のものです。インターフェース定義ファイル .nib は NeXT Interface Builder の略で、後に XML 版として用意されたのが .xib です。
<img width=128 src="https://qiita-image-store.s3.amazonaws.com/0/3603/3c550455-a050-4ad7-aa8f-c2aae1201757.jpeg"><img width=128 src="https://qiita-image-store.s3.amazonaws.com/0/3603/8c29c807-7eaa-a209-84f1-41601c443a68.jpeg">

![](http://www.macdevcenter.com/2002/04/16/graphics/figure4.jpg)
*http://www.macdevcenter.com/pub/a/mac/2002/04/16/osx_java.html?page=2&x-order=date*

![](http://www.linuxfocus.org/common/images/article265/abdevosx.jpg)
_http://www.linuxfocus.org/English/November2002/article265.shtml_

時は経ち Project Builder 改め Xcode が登場しました。これが1回目の UI の変革でした。ただこの時はまだ Interface Builder は別アプリとして存続しており、Xcode に統合されるまでは IB で UI を定義する、Xcode でコードを書く、という作業の分離が生じていました。でも Mac アプリはウインドウベースなのでこれでも良かったのかもしれません。ツールパレットからウインドウインスタンスをデスクトップに直接ドロップすると実際のウインドウが現れ、そこに NSView だとか NSButton だとかを配置していました。WYSIWYG 感がありましたね。

そして Xcode 4くらいで iOS アプリ開発もいよいよメジャーになってきて、2回目の UI の変革が起こりました。Interface Builder アプリケーションが廃止されて Xcode に統合されました。それと同時に Xcode 自体の UI も大きく整理されて今のような形になりました。

さて、Xcode 3以前の UI を覚えていらっしゃるでしょうか。まだ Project Builder 感が残っていたあの時代、Xcode の UI は今よりもちょっとぎこちないけれども、デバッガーコンソールは独立したウインドウだったので私は好きでした。Xcode 4に移行した時にこれが狭いウインドウに押し込められてしまって、最も拒絶感を抱きました。（エディター狭すぎだろ常考…）
![](http://rdingwall.com/wp-content/uploads2/2008/06/tests-in-console.png)
_http://rdingwall.com/2008/06/01/using-the-boost-unit-test-framework-with-xcode-3/_

![](http://codewithchris.wpengine.netdna-cdn.com/img/xcode_5_workspace_diagram.jpg)
http://codewithchris.com/hello-world-iphone-app/

# デバッグエリアを昔みたいに独立ウインドウに分離したかった

Xcode には Behavior という機能があります。いろいろな状態に合わせて UI の振る舞いを指定することができるものです。ビルド開始時に〜するとか、ランしたら〜するとか、そういうことができます。独自のビヘイビアを作ってショートカットを割り当てて好きな時に実行する、なんてこともできますね。
![](https://qiita-image-store.s3.amazonaws.com/0/3603/8415a041-af3c-522f-2fb1-6730edff75c0.png)

デフォルトだと Running / Generates output で `Show debugger with Current Views` だけだったりするのですが、これを画像のように変更します。タブ名を指定して `in separate window` とするのがポイントです。デバッグエリア以外は不要なので `Hide` にしておきます。ツールバーもいりません。

するとこれが
![](https://qiita-image-store.s3.amazonaws.com/0/3603/8e39d75b-967c-134f-ceba-6f69fd4c26d4.png)

こうなります
![](https://qiita-image-store.s3.amazonaws.com/0/3603/5fe7394f-dcb4-a052-ffb0-880542de07b4.png)

やったね😊

何が嬉しいかって、プロジェクト（エディター）ウインドウはデバッグエリアがなくなった分広く使えます。一方で折り返しで読みづらくなりがちなデバッグエリアは独立して扱えるので好きに移動できるし、ツールバーを隠したから大きさも自由自在です。MacBook のように狭いディスプレイならこちらの方が良いですね。実はデバッグエリアのウインドウにもエディターペインが上にあるのですが、`Hide editor` していることで自動的に隠れてくれています（NSObject.h を開いている）。間の帯をドラッグすればいつでも展開できますが、まあ使わないので気にしなくて良いでしょう。ウインドウタイトルだけがわかりづらいのがネックですが。

ということで、昔みたいにエディターとデバッグエリアを別ウインドウで左右に並べて作業することが実現できました。これで昔のことは思い出にできそうです。
Bootstrapテンプレートを使っている人向けなモックアップツール6選 (2016/05)


動かないモックアップ及びワイヤフレームを描く際に今までは「紙とペン」もしくはBalsamiq Mockupsを使っていましたが、「どうせなら描いたモックがHTMLになればいいのに」と欲を出して、Bootstrapテンプレートをベースにモックアップを作れるツールを探してみました。

手軽な物からリッチな物順にまとめてみています。

## Bootsnipp
![スクリーンショット 2016-05-12 13.33.04.png](https://qiita-image-store.s3.amazonaws.com/0/1676/a85281e2-b9e5-1e1f-5bdf-dd6aa0b39924.png "スクリーンショット 2016-05-12 13.33.04.png")

**ざっくり言うと、Bootstrapで作っているサイトのパーツ・レイアウト作る用のサービスです**

Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。
Form Builder, Button Builderなど、いろいろな種類のパーツビルダーからレイアウトが作れます。
また、他のユーザが作成したレイアウト(スニペット)を閲覧、HTMLやCSSを取得することが出来ます。

サービス全体のデザイン用ではなく、パーツを作るのに便利そうです。


利用料は無料です。
http://bootsnipp.com/

## layoutit!
![スクリーンショット 2016-05-12 13.33.20.png](https://qiita-image-store.s3.amazonaws.com/0/1676/8076561f-f1bd-5448-be40-12585cb5abbf.png "スクリーンショット 2016-05-12 13.33.20.png")

**ざっくり言うと、Bootstrapのグリッドをサクサク組み立てられるサービスです**

Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。
パーツのサイズなどを細かく設定出来るわけではないので、あくまでグリッドを組み立てるための物という感じです。

利用料は無料です。
http://www.layoutit.com/

## CODEPLY
![スクリーンショット 2016-05-12 13.33.41.png](https://qiita-image-store.s3.amazonaws.com/0/1676/7494f28f-9d8a-4fc1-9673-887d7ab4ca63.png "スクリーンショット 2016-05-12 13.33.41.png")

**ざっくり言うと、すぐにHTMLを確認出来るコードスニペット集です**

Bootstrapのパーツをメニューから選択するとHTMLが出力されて、それがブラウザ上でプレビュー出来ます。もちろんHTMLとして出力することが可能です。
テキストメニューからパーツを選んだりするので、モックアップ作成、というよりは、スニペット集に近いと感じました。

利用料は無料です。

http://www.codeply.com/

## JUSTINMIND
![スクリーンショット 2016-05-12 13.33.55.png](https://qiita-image-store.s3.amazonaws.com/0/1676/a5bb41de-39bf-3eaf-cb2c-f26e4a185b6e.png "スクリーンショット 2016-05-12 13.33.55.png")

**ざっくり言うと、モックアップツールです。Bootstrapはパーツとして使えるだけです**

利用料はユーザ当たり月額$19です。
http://www.justinmind.com/

日本の代理店があるようです。こちらから説明については日本語で見られます。
http://www.xlsoft.com/jp/products/justinmind/

## jetstrap
![スクリーンショット 2016-05-12 13.34.08.png](https://qiita-image-store.s3.amazonaws.com/0/1676/86d147ed-8b1a-1886-f7f9-3d0ae0dce331.png "スクリーンショット 2016-05-12 13.34.08.png")

**ざっくり言うと、Bootstrapのサイトをサクサク組み立てられるサービスです**

Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。
配置した各パーツは必要そうな値はほとんど設定出来るので、マウス操作だけでほぼBootstrapのサイトを丸々組み立てられると思います。
スマホだと見た目がどうなるのかなど、レスポンシブ面もプレビュー出来ます。
実際にBootstrapのサイトを組み立てる時に便利かも知れません。

ウェブ上からデモを使うのは無料ですが、デモ版はHTMLの出力などが出来る要素を見つけられなかったので、おそらく有料が前提のサービスです。

利用料は月額$24です。
https://jetstrap.com/

## Bootstraup Studio
![スクリーンショット 2016-05-12 13.34.32.png](https://qiita-image-store.s3.amazonaws.com/0/1676/a0247671-e02e-a438-e2c4-94bd500c259f.png "スクリーンショット 2016-05-12 13.34.32.png")

**ざっくり言うと、Bootstrapのサイトをサクサク組み立てられるサービスです**

Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。
配置した各パーツは必要そうな値はほとんど設定出来るので、マウス操作だけでほぼBootstrapのサイトを丸々組み立てられると思います。
USERが作成したパーツらしきパーツも使えるので、決済ページのモックアップもドラッグアンドドロップで簡単に配置できます。もちろん、決済がそれで出来るようになるわけではありませんが。
Bootstrap専用のエディタアプリケーションという表現が正しいかも知れません。

ウェブ上からデモを使うのは無料です。デモ版ではHTMLの出力などは出来ないように制限が掛かっています。実際のアプリケーションはデスクトップアプリケーションです。

利用料は買い切りで$50です。本日時点ではセールで$25の表記がありました(2016/5/11)
https://bootstrapstudio.io/

## 終わりに

一通り触ってみましたが、モックアップを創造するときにグリッドやレイアウトまで考慮しながら作るのはデザイン素人には難易度が高そうです。一度自由度の高いツールで書いた後に、現実的なレイアウトにこれらのツールを使って落とし込んでいく方が楽そうかなと思いました。

とはいえ、どれもHTMLでBootstrapを弄っていくよりはだいぶ楽そうなので、調べてみてよかった。
Android StudioでRendering Problemsが出たときにした対応	

エラー内容は以下


```
Rendering Problems 
The following classes could not be instantiated:
- android.support.v7.app.WindowDecorActionBar (Open Class, Show Exception, Clear Cache)
```

##対応内容
styles.xmlを修正

修正前

```
<style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
</style>
```


修正後

```
<style name="BaseAppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
</style>
```
位置情報サービス自体をオフにしている場合と自分のアプリだけ「許可しない」にされている場合を切り分ける方法。それぞれのオススメの処理。


##状態のハンドリング
許可されている以外の状態は3つある。

- まだユーザに許可を求めていない。
- 位置情報サービスはオンにしているが、自分のアプリには許可していない。
- 位置情報サービス自体がオフになっている。

```swift:場合分け
switch CLLocationManager.authorizationStatus() {
  case .NotDetermined:
    // まだユーザに許可を求めていない。
    whenNotDetermined()
  case .Denied, .Restricted:
    if CLLocationManager.locationServicesEnabled() {
      // 位置情報サービスはオンにしているが、自分のアプリには許可していない。
      whenLocationServicesEnabled()
    } else {
      // 位置情報サービス自体がオフになっている。
      whenLocationServicesDisabled()
    }
  default: break
}
```

##オススメの処理

```swift:まだユーザに許可を求めていない場合。
// 勿論、許可を求める。インスタンスを保持しておかないときちんと動かない。
func whenNotDetermined() {
  locationManager = CLLocationManager()
  locationManager?.requestWhenInUseAuthorization()
  locationManager?.delegate = self
}
```

```swift:位置情報サービスはオンにしているが、自分のアプリには許可していない場合。
// アプリの設定画面に飛ばすためのアラートを出す。
func whenLocationServicesEnabled() {
  let alert = UIAlertController(title: "オンにしてよ！", message: nil, preferredStyle: .Alert)
  alert.addAction(UIAlertAction(title: "設定", style: .Default) { _ in 
    let url = NSURL(string:UIApplicationOpenSettingsURLString)!
    UIApplication.sharedApplication().openURL(url)
  })
  alert.addAction(UIAlertAction(title: "キャンセル", style: .Cancel, handler: nil)
  viewController.presentViewController(alert, animated: true, completion: nil)
}
```

```swift:位置情報サービス自体がオフになっている場合。
// 位置情報サービスの設定画面に明示的に飛ばすことは出来ないので、ただアラートを出す。
// ちなみに、位置情報サービスをリクエストすると、アプリを起動してからなのかインストールしてからなのか不明だが、
// 特定の条件で２回まで、位置情報サービス自体をオンにする旨のダイアログをOSが出してくれるので、
// 同時にリクエストもする。
func whenLocationServicesDisabled() {
  let alert = UIAlertController(title: "位置情報サービス自体がオフだよ！", message: nil, preferredStyle: .Alert)
  alert.addAction(UIAlertAction(title: "OK", style: .Cancel, handler: nil)
  viewController.presentViewController(alert, animated: true, completion: nil)
  whenNotDetermined()
}
```
Androidアプリをインストールできない INSTALL_FAILED_CONFLICTING_PROVIDER(-505)の対処法

Google Play Services 8.3.0 で追加された新しいProviderで
com.google.android.gms.measurement.AppMeasurementContentProvider
という名前のandroid:authoritiesをすでに使っているアプリがインストール済みの状態で、同じProviderの設定をしているアプリをインストールしようすると「アプリをインストールできない」(エラーコード:-505(INSTALL_FAILED_CONFLICTING_PROVIDER) or プロバイダの認証が重複しています) が発生します。

Issue 784: Multiple apps using same authority provider name for AppMeasurementContentProvider
https://code.google.com/p/analytics-issues/issues/detail?id=784 

Issue 189079: Error -505
https://code.google.com/p/android/issues/detail?id=189079

AndroidStudioの場合、application projectのbuild.gradleに以下のような
applicationIdを指定しておくと、providerのandroid:authoritiesの値にapplicationId
が含まれるので衝突は起きませんが、cordovaは最近までデフォルトでセットされていなかったようです。

```build.grade
android {
 :
 :
 defaultConfig {
    applicationId = "your.applicationid.here"
 }
```
 
Gradle variable applicationId is not set, creates issue with Google Play services 8.3.0
https://issues.apache.org/jira/browse/CB-10014

>if another app also includes the Google Play services library 8.3.0 it will fail to install on the device 
>with an INSTALL_FAILED_CONFLICTING_PROVIDER error because the name isn't unique

AndroidStudioの場合、リリースビルドで生成される
build/intermediates/manifests/release/AndroidManifest.xml
の中身が以下のようになっているかチェックします

```
<provider
android:name="com.google.android.gms.measurement.AppMeasurementContentProvider"
android:authorities="your.applicationid.google_measurement_service"
android:exported="false" tools:replace="android:authorities" />
```
Jupyter Notebook 上で Spark(Scala) を動かす


機械学習で実験した結果を残すときなどは Jupyter Notebook が便利。 
MLlibを使った検証を Jupyter Notebook で残せるようにする。
Ubuntu で動作検証しているが他のOSでもいけるはず。

## 1. Python環境構築 (jupyter, pip)
以下の記事を参考に Anaconda を入れるのが楽

- [データサイエンティストを目指す人のpython環境構築 2016](http://qiita.com/y__sama/items/5b62d31cb7e6ed50f02c)

## 2. Spark のインストール
- [Ubuntu への Apache Spark のインストール](http://qiita.com/iwatobi_/items/0680a537838233fce323)

## 3. Apache Toree (Spark kernel) のインストール

``` sh
$ pip install --pre toree
$ sudo jupyter toree install
```

SPARK_HOME を設定していない場合は ``` $ sudo jupyter toree install --spark_home=/spark/home/dir ``` で指定する。  
インストール後 \$HOME/.local のオーナーが root になっている場合は \$USER に変更する。

## 起動
``` $ jupyter notebook ``` で起動すると下図のように [Apache Toree - Scala] が追加されている

![jupyter_scala1.png](https://qiita-image-store.s3.amazonaws.com/0/41477/5caab1ef-bf09-c9fa-1491-d4f1598bcb0e.png)

カーネルを選択したあとしばらく起動を待つ必要があるが下図のように Jupyter 上で Spark を実行できる

![jupyter_scala2.png](https://qiita-image-store.s3.amazonaws.com/0/41477/a3359209-b258-7b86-71db-2b2eb9cb762b.png)

## 参考
- [apache/incubator-toree: Mirror of Apache Toree (Incubating)](https://github.com/apache/incubator-toree)
[python, ruby] selenium-webdriverでWebページの内容を取ってくる

#始めに

RubyとPythonで書いたが、後半Pythonで書くことにしたので、Rubyは簡単な部分のみとなってしまった‥
Ruby部分は追記ということで‥予めご了承ください。

#python

## インストール
###selenium
```
pip install selenium
```

###chromewebdriver
macだったので

```bash
brew install chromedriver
```

Linuxは以下？（試してないので分からないが…）

```bash
sudo apt-get install chromium-browser
```

参考にしたページ
http://stackoverflow.com/questions/8255929/running-webdriver-chrome-with-selenium

##簡単なコード

Googleのホームページにアクセスし、10秒待って閉じるという簡単な例

```py:sample.py
from selenium import webdriver
from time import sleep
browser = webdriver.Chrome()
browser.get('http://google.com')
sleep(10)
browser.close()
```


##ログイン関係

```py:login.py
# id が emailの部分を見つける
mail = browser.find_element_by_id('email')
# id が passの部分を見つける
pass_wd = browser.find_element_by_id('pass')
# emailを入力
mail.send_keys('your@email.com')
# passを入力
pass_wd.send_keys('password')
# 送信
pass_wd.submit()
```

##chromeのNotificationのAllow/Blockを設定
Rubyの場合は放置しても大丈夫だが、Pythonの場合、このPopUpのせいで、プログラムが実行できなくなるので、予めchrome_optionsを設定しておく

```py:変更前
browser = webdriver.Chrome()
```


```py:変更後
chrome_options = webdriver.ChromeOptions()
prefs = {"profile.default_content_setting_values.notifications" : 2}
chrome_options.add_experimental_option("prefs",prefs)
browser = webdriver.Chrome(chrome_options=chrome_options)
```



## スクロール
スクロールしてページの一番したまでいく

```py
browser.execute_script("window.scrollTo(0, document.body.scrollHeight);")
```

## リンクをゲットする

### 今指定したElementのしたの全てのLink

```py
links = myelement.find_elements_by_xpath(".//a")
```

###今ページ内の全てのリンク

```py
links = myelement.find_elements_by_xpath("//a")
```

以上のいずれかの情報でLinkをゲットしたら、`get_attribute('href')`を使ってURLをゲット

```py
urls = [ link.get_attribute('href') for link in links]
```

##参考にしたページ

http://www.takunoko.com/blog/pythonselenium%E3%81%A7twitter%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B/
簡単なログイン

http://selenium-python.readthedocs.io/faq.html
- スクロール
- linkをとる



# ruby

##インストール

### selenium-webdriver gem

```bash
gem install selenium-webdriver
```


### chrome driver

chromedriverをダウンロードしてUnzipした後に、
`which ruby`でrubyのある場所を確認し、そこへ移動

rbenvを使っている場合には、以下のコマンドでOK
`mv chromedriver ~/.rbenv/shims`


##簡単なコード

```rb
require "selenium-webdriver"

driver = Selenium::WebDriver.for :chrome
driver.navigate.to "http://google.com"

driver.quit
```

## ログイン関係

```rb
## type email
element = driver.find_element(:id, 'email')
element.send_keys 'your@email.com'
# type password
element = driver.find_element(:id, 'pass')
element.send_keys 'password'
# submit the form
element.submit
```
これで、ログイン後の画面を手に入れることができる。




##参考にしたページ

http://shoprev.hatenablog.com/entry/2014/04/14/210529
ChromeDriver設定と簡単なコードの部分で参照

https://gist.github.com/huangzhichong/3284966
詳細昨日に関してはこちらを参照
【WebStorm】"PhoneGap/Cordova has incorrect executable path"と言われたときの対処法

WebStorm起動時に画面左上に"PhoneGap/Cordova has incorrect executable path"と表示される場合は以下のように対応します。

<img width="581" alt="app_js_-_http_test_-____devel_ionic_http_test_.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/18196/e0db3ee7-e766-bec7-d259-b98cdc70ee0b.jpeg">

#Cordovaコマンドのパスを設定
メニューから"Preferences..."を選択して環境設定ダイアログを表示し、環境設定ダイアログの左メニューから"Languages & Frameworks"->"Javascript"->"Phonegap/Cordova"を選択します。
"PhoneGap/Cordova executable"のリストボックスからインストールされているCordovaの実行パスを選択します。(ionicでもOK）一覧に表示されない場合は、リストボックス右に"..."ボタンからファイル選択ダイアログを表示させインストールされているCordovaを選択します。
設定が完了したら面右下のOKボタンをクリックします。

<img width="957" alt="全画面_2016_05_12_11_30.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/18196/de63224d-39a5-c638-26ca-f24d894f5861.jpeg">

#PhoneGap/Corodovaプラグインを無効にする
そもそもCordovaを使っていないという場合は、"PhoneGap/Cordovaプラグイン"を無効にします。
メニューから"Preferences..."を選択して環境設定ダイアログを表示し、環境設定ダイアログの左メニューから"Plugins"を選択します。
表示されるプラグイン一覧の"PhoneGap/Cordova Plugin"右のチェックボックスをオフにして画面右下のOKボタンをクリックします。
<img width="962" alt="Preferences.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/18196/63c326f1-3a4c-5fbf-4d3a-39e50caeea25.jpeg">
JSテンプレートエンジン handlebars プリコンパイルまで

# JSテンプレートエンジン Handlebars 導入時メモ

## Grunt

プリコンパイル用
`$ npm i --save-dev grunt-contrib-handlebars`

concat用
`$ npm i --save-dev grunt-contrib-concat`

## handlebarsテンプレートエンジン
 [handlebars](http://handlebarsjs.com/) v4.0.5
 [Handlebars-Helpers](https://github.com/danharper/Handlebars-Helpers)

## how to
`.hbs` -> `.html` -> `.js`

[1] foo.hbs

```
---
# 出力htmlテンプレート
---

{{!-- helper使う場合 [helper関数 引数] --}}
<h1>\{{ helper-hoge bar }}</h1>

{{!-- object使う場合 --}}
<ul>
    \{{# each fruitGroups }}
    <li>\{{ . }}</li>
    \{{/ each }}
</ul>
```

[2] foo.html

```
// Gruntifle.js
assemble: {
    template: {
        files: [
           {
               expand: true,
               cwd: 'somedir1/',
               src: '*.hbs',
               dest: 'somedir2/'
           }
        ]
    }
}
```

```
$ grunt assemble:template
```

```
// html
<h1>something title</h1>
<ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>メロン</li>
</ul>
```

[3] foo.js

```
// Gruntifle.js
compile: {
    build: {
        options: {
            namespace: "NAMESPACE.Templates",
            processName: function(filename){
                return (/\/([a-zA-Z1-9-]+)\.html$/.exec(filename))[1];
            }
        },
        files: {
            'somedir3/template.js': ['somedir2/template.html']
        }
    }
}
```

```
# grunt compile
```

```
// js
this["NAMESPACE"] = this["NAMESPACE"] || {};
this["NAMESPACE"]["Templates"] = this["NAMESPACE"]["Templates"] || {};

this["NAMESPACE"]["Templates"]["foo"] = Handlebars.template({
・
・
・
});
```

## 実装

script.js

```
(function($, NAMESPACE){

   compile: function (object) {
        NAMESPACE.Templates.foo(object);
   },

   render: function (object) {
        var htmlStrings =this.compile(object);
        
        $('#some-elem').append(htmlStrings);
   }

})(jQuery, window.NAMESPACE = window.NAMESPACE || {});

```


## [注意]IE8以下ブラウザの場合

`handlebars`はIE6以降サポートをしていますが、`Handlebars-Helpers`は配列に対する`indexOf`を使っているためIE8以下でエラーになります。下記のように書き換えて対応しました。

```
eR.add('in', function(left, right) {
    if ( ! isArray(right)) {
        right = right.split(',');
    }
    for (var i = 0, max = right.length; i < max; i++) {
        console.log(right[i], left, right[i] === left);
        if (right[i] === left) {
            return true;
            break;
        }
    }
    return false;
});
```

> [Array.prototype.indexOf()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
【Amazon RDS】PostgreSQLのTimezoneを変更する

#はじめに
RDSのPostgreSQLのTimezoneはデフォルトでUTCになっています。以下は、TimezoneをAsia/Tokyoに変更する手順を説明しています。

#変更手順
##１）RDSダッシュボードの表示
まずは、AWSマネージメントコンソールにログインしてRDSを選択します。

##２）パラメータグループを表示
RDSダッシュボードが表示されたら、左側のメニューからインスタンスを選択し、インスタンス左に表示される３つのタブから真ん中のDetailを選択します。構成の詳細画面が表示されるので、画面左側に表示されるパラメータグループ名のリンクをクリックします。
<img width="1031" alt="1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/18196/76cf4c7e-ca3f-c3b7-3f3f-8df338f98f99.jpeg">

##３）パラメータグループの編集
パラメータグループが表示されたら、変更するインスタンスが使用しているパラメータグループをクリックします。
<img width="1045" alt="2.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/18196/d4400a37-b3e9-f4d4-6cac-6f3ecfdac16f.jpeg">
パラメータグループが表示されたら、フィルタにTimezoneと入力します。表示されるパラメータが絞り込まれます。絞り込まれた一覧にTimezoneが表示されていたら、パラメータの編集ボタンをクリックします。
<img width="1055" alt="3.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/18196/f3788c14-6a56-5d6b-2ca8-6545d0d5fb22.jpeg">

##４）値の変更
パラメータの編集ボタンをクリックするとパラメータ値が編集可能になります。ここにAsia/Tokyoを入力し、変更の保存ボタンをクリックします。
<img width="1051" alt="4.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/18196/8ccb7a25-0b04-a846-2f3b-6f7c3cc094ba.jpeg">

##５）設定の確認
設定が完了したら、正しく設定が行われているか確認します。


```shell
＄ HOST=xxxxxxx.rds.amazonaws.com ＃ RDSのエンドポイントを環境変数に保存
＄ psql -h $HOST [ユーザ名]
ユーザ user のパスワード：xxxxx ＃ パスワードを入力
・・・
user => show timezone; ＃ timezoneの表示
Timezone
ーーーーーーー
Asia/Tokyo ＜− Asia/TokyoになっていればOK

user => select current_timestamp; ＃ 現在日時の表示
now
ーーーーーーー
20xx-xx-xx xx:xx:xx.xxxxxxx+09 ＜− 現在日時が表示されていればOK
```
<img width="889" alt="5.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/18196/25002cbf-a4f5-f72a-a00c-23c43da9e802.jpeg">
【初心者】テキストRPG【C言語】

#Xcodeを使って簡単なRPGをつくる

2回目の投稿となります。
今回はXcodeのCommand Line Toolで気軽に試せるテキスト形式のRPGを作成したので共有します。

**開発環境**
・OS X El Capitan ver. 10.11.4
・Xcode ver. 7.3.1

今回はあくまでも**簡単に試せる**ということを目的にしておりますので、**ソースコードをコピペして実際に試してほしい**と思っております。

今回のGameを作成するにあたって参考にさせていただいたのは以下です。

**参照サイト**
http://9cguide.appspot.com
http://kuina.ch/l6prog/11

私が補足説明をするよりもおそらく上記2サイトを見る方が100倍わかると思います。


#Gameの紹介

早速ですが、今回作成したGameについて紹介します。

ゲームを開始すると……
![スクリーンショット 2016-05-11 18.49.03.png](https://qiita-image-store.s3.amazonaws.com/0/124071/c36f890f-3b58-6bbb-51ec-4abfcf887b7c.png)

上図のようにいきなりゴブリンが現れます。Gameの流れは、
1. ゴブリンが現れる。
2. 0~3のコマンドを入力
3. コマンドに応じた行動を勇者が実行。
4. ランダム入力されたコマンドをゴブリンが実行。
5. 2~4の手順をどちらかが倒れるまで繰り返す。
6. どちらかが倒れたらGame終了。


以上です。


#ソースコード
https://github.com/Cremokoroah/text_RPG.git

上記にソースコードを載せてあるので、main.cのソースコードをコピペして実行し
シンプルなGameをお楽しみください。
Goで書いたUnityのネイティブプラグインをGo Mobileでビルドする #golang #unity

## はじめに

[前回の記事](http://qiita.com/tenntenn/items/4d3316490a571e5d79ed)では、iOSのビルドの際、ツールチェインの再ビルドをする必要があると書きましたが、Go Mobileのツールチェインを使えば必要ありません。

## Go Mobileのインストール

Go Mobileについての詳細は[こちら](http://klabgames.tech.blog.jp.klab.com/archives/1034818110.html)の記事を見て頂ければ良いと思いますが、インストールは非常に簡単です。
以下の2つのコマンドを走らせます。

```
$ go get -u golang.org/x/mobile/cmd/gomobile
$ gomobile init -v
```

もし、`gomobile init`に失敗した場合は、一度`$GOPATH/pkg/gomobile`ディレクトリを削除して、再度実行してみて下さい。

インストールに成功したら、以下のようにモバイル用にビルドされたパッケージが入ってるか見てみて下さい。

```
$ ls -1 $GOPATH/pkg/gomobile/
android-ndk-r10e
dl
pkg_android_386
pkg_android_amd64
pkg_android_arm
pkg_android_arm64
pkg_darwin_amd64
pkg_darwin_arm
pkg_darwin_arm64
version
```

## Android向けにビルドする
ビルドするコードは[前回](http://qiita.com/tenntenn/items/4d3316490a571e5d79ed)のものと同じです。
ビルドコマンドもほとんど同じですが、`-pkgdir`オプションを指定します。
このオプションを指定することで、Go Mobileによってインストールされているツールチェインを使ってビルドします。
`arm-linux-androideabi-gcc`は`$GOPATH/pkg/gomobile/android-ndk-r10e/arm/bin/`以下にあるものを使いますので、`PATH`を通してください。

```
$ CGO_ENABLED=1 \
CC=arm-linux-androideabi-gcc \
GOOS=android \
GOARCH=arm \
GOARM=7 \
go build -buildmode=c-shared -pkgdir=$GOPATH/pkg/gomobile/pkg_android_arm -o libhoge.so hoge.go
```

## iOS向けにビルドする
前回は、`CC_FOR_TARGET`と`CXX_FOR_TARGET`を`misc/ios/clangwrap.sh`で指定して、ツールチェインを再ビルドしたため、`CC`や`CXX`などを`go build`時に指定しましせんでしたが、今回は指定します。

```
GOOS=darwin \
GOARCH=arm \
GOARM=7 \
CC=`xcrun --sdk iphoneos -f clang` \
CXX=`xcrun --sdk iphoneos -f clang` \
CGO_CFLAGS="-isysroot `xcrun --sdk iphoneos --show-sdk-path` -arch armv7 -miphoneos-version-min=6.1" \
CGO_LDFLAGS="-isysroot `xcrun --sdk iphoneos --show-sdk-path` -arch armv7 -miphoneos-version-min=6.1" \
CGO_ENABLED=1 \
go build -pkgdir=$GOPATH/pkg/gomobile/pkg_darwin_arm -buildmode=c-archive -tags=ios -o hoge.a hoge.go
```

## おわりに
今回はGo Mobileのツールチェインを使ってUnityのネイティブプラグインをビルドする方法について紹介しました。
`-pkgdir`で指定するアーキテクチャも変えれば`arm64`などもビルドできると思います。
組合せ最適化による研磨回数の最小化

# <i class='fa fa-lightbulb-o' /> はじめに
- メーカーA社では、化粧ボードを製造販売しています。
- 化粧ボード製造の最終工程では、検査で見つかった傷を研磨してきれいにしています。
- 研磨の手間を最小化したいものとします。

# <i class='fa fa-lightbulb-o' /> 研磨方法
- 研磨装置は、行を指定すると、自動で決まった幅を端から端まで研磨します。
- 途中で90度回転させるので、行または列ごとに研磨可能ということになります。
- 目的は、全ての傷をカバーする行または列の数の最小化になります。

![image](https://qiita-image-store.s3.amazonaws.com/0/13955/34e5495c-d98f-d4a3-47d5-c9c1461e5967.png)

# 定式化
この問題は、集合被覆問題になります。

<table>
<tr><td>最小化</td><td>$\sum_i{x_i} + \sum_j{y_j}$</td><td>研磨する回数</td></tr>
<tr><td rowspan="2">変数</td><td>$x_i \in \{0,  1\} ~ ~ \forall i \in 行$</td><td>行を研磨するかどうか</td></tr>
<tr><td>$y_j \in \{0,  1\} ~ ~ \forall j \in 列$</td><td>列を研磨するかどうか</td></tr>
<tr><td>制約条件</td><td>$x_i + y_j \ge 1 ~ ~ \forall i, j \in \mbox{傷のある箇所}$</td><td>全ての傷を研磨する</td></tr>
</table>

# <i class='fa fa-lightbulb-o' /> Pythonで実行
4行6列のダミーを作成します。白いところが傷です。

```py3:python3
%matplotlib inline
import numpy as np, matplotlib.pyplot as plt
from pulp import *
np.random.seed(55)
a = np.random.randint(0, 8, 24).reshape(4, -1) // 7
plt.imshow(a, cmap='gray', interpolation='none');
```
![image](https://qiita-image-store.s3.amazonaws.com/0/13955/c0f49012-51ff-2781-6eb3-274344584a25.png)

数理モデルを作成して実行。

```py3:python3
m = LpProblem()
x = [LpVariable('x%d'%i, cat=LpBinary) for i in range(a.shape[0])] # 行を研磨するか
y = [LpVariable('y%d'%i, cat=LpBinary) for i in range(a.shape[1])] # 列を研磨するか
m += lpSum(x + y) # 目的関数(研磨する回数)
for i in range(a.shape[0]):
    for j in range(a.shape[1]):
        if a[i, j]:
            m += x[i] + y[j] >= 1 # 傷があれば行か列を研磨する
m.solve()
for i in range(a.shape[0]):
    if value(x[i]):
        print('行%dを研磨する'%i)
for j in range(a.shape[1]):
    if value(y[j]):
        print('列%dを研磨する'%j)
>>>
行3を研磨する
列2を研磨する
```

最小の研磨回数となる2回でできているのが確認できます。

以上
Bluemixでデータ分析「dashDB」：Windowsから接続してみた

前回はMacだったので今回はwindowsから接続。ちなみに[Mac版の記事はこちら](http://qiita.com/azzeten/items/94a5e89d7b5cb8148a00)

Windowsの場合は、IBMのDB2のクライアントを使ってdashDBへ接続することができます。
なので雑に言うと、以下の3段階が必要です。
(1) DB2クライアント（IBM Data Server Client）をインストール
(2) dashDB用のドライバをインストール
(3) dashDBに接続するための定義をする　→　接続可能！

というわけで、やってみよー！

## (1) DB2クライアント（IBM Data Server Client）をインストール

・[URLにアクセス](http://www-01.ibm.com/support/docview.wss?uid=swg21385217)して「IBM Data Server Client」をクリック。
・windows64bitを選んで次へ進む。そしてアンケートをそれなりに埋めて、さらにその次へ。
・やっとダウンロードページ。今すぐダウンロードをクリックして自分のPCに落とします。

![dl.png](https://qiita-image-store.s3.amazonaws.com/0/119378/965dad1d-b434-665d-74e3-5f12141dee19.png)

・解凍して、中にある「setup」を実行しインストーラを起動させます。
![screen.png](https://qiita-image-store.s3.amazonaws.com/0/119378/63559865-5f46-38c1-83ba-2fbfec6a5871.png)

・左の「製品のインストール」から、「新規インストール」をクリック。その後のウィザードは全部デフォルトで進めました。
![setupguide.png](https://qiita-image-store.s3.amazonaws.com/0/119378/672a5f2e-89a9-192a-3692-5fbe78bd7e8b.png)

・これでインストールは完了。ようこそ！とか出てきますが、無視しまーす。
・スタートメニューから、clientがインストールされたのを確認。実際に使うものは赤枠らへんのもの。
![startmenyu.png](https://qiita-image-store.s3.amazonaws.com/0/119378/4000385e-bc8c-29cd-4e28-cc16d3e15255.png)


## (2) dashDB用のドライバをインストール
dashDBのWEB画面から、ドライバをダウンロードします。
ダウンロード画面はこちら。exeがダウンロードされるので素直にそれをインストールすればOK。
![downwin.png](https://qiita-image-store.s3.amazonaws.com/0/119378/eacd4c85-6e29-28ab-0093-5169d7eab8d0.png)


## (3) dashDBに接続するための定義をする
dashDBのWEB画面から、設定用のスクリプトをダウンロードして、実行します。
Connectから、Connect Informationページに飛んで一番下にあります。
![scriptdown.png](https://qiita-image-store.s3.amazonaws.com/0/119378/2bc13f10-1ddd-9e22-47ee-0b4dd4e978a9.png)



実行イメージはこんなかんじ。コマンドプロンプトから叩きます。引数に「接続先のdashDBのホスト名」を指定。
![scriptdash.png](https://qiita-image-store.s3.amazonaws.com/0/119378/00bfcd8b-71cf-a5bd-0482-7b5a78bb30c6.png)


## 接続確認
例はこちら。

```bat
db2 catalog tcpip node ノード名（任意の名前） remote 接続先IPもしくはホスト名 server 50000
db2 catalog database bludb as DB名（任意の名前) at node ノード名（一つ前でつけた名前）
db2 connect to DB名（一つ前でつけた名前） user 接続するユーザ名
```

実際の実行例はこちら

```bat
db2 catalog tcpip node bmdashdb remote dashdb-entry-yp-xxx-xxx.services.dal.bluemix.net server 50000
db2 catalog database bludb as myDB at node bmdashdb
db2 connect to myDB user dash5805
```

キャプチャだとこんな感じです。[以前つくったデータ](http://qiita.com/azzeten/items/d10fa47d115093cffef8)もselectできていい感じ！
![catalo.png](https://qiita-image-store.s3.amazonaws.com/0/119378/52352ba7-b245-35de-2673-e19fab1ee050.png)
![ishigaki.png](https://qiita-image-store.s3.amazonaws.com/0/119378/45f22a41-e683-5858-3fc5-68a665287db7.png)

## ご参考
もしエラーに遭遇したら、この辺も参考になるかも。
http://www-01.ibm.com/support/docview.wss?uid=swg21648351
http://www.slideshare.net/ibm_analytics_japan/dashdb

## 次回予告
windows環境であれば「Aginity」という便利なツール（もちろん無料）があるらしい。。次回の宿題にします。
→というわけで、記事かきました。http://qiita.com/azzeten/items/8b8179d8f9b3e8f7199d
CSSCSSでCSSスタイルの重複を整理する

## CSSの面倒くさいところ
CSSは簡単に書けることが良さでもありますが、ある時は試行錯誤を繰り返すうちに、またある時は運用を続けるうちに、記述がもりもりと肥大化してしまいがちです。
（CSSのスパゲッティコード…とはあまり言わないけどそんな感じ）これはCSSの面倒くさいところですよねー。
特に近年[Bootstrap](http://getbootstrap.com/)など重量級CSSフレームワークを使用する機会も増えてきていますので、表示を高速化させるために、あるいは保守性を高めていくために可能な限りシンプルに記述していきたい。
…そんなこともありCSSをあの手この手でわちゃわちゃするわけですが、

- 未使用CSSを見つけ出してリムーブ
- プロパティ指定の重複を見つけ出して整理
- OOCSSやSMACSSやBEMといったCSS設計を採用する
- [SASS](http://sass-lang.com/)などCSSプリプロセッサ(CSSメタ言語)を使用する
- .minファイル化やgzipで圧縮する
- CDN配信
- .htaccessなどの設定でキャッシュコントロール

...といった色々な方法を適宜組み合わせることになるかと思います。
このうち、最もエッセンシャルなのにいざやろうとすると難しい「プロパティ指定の重複を見つけ出して整理」するのにとても便利なアプリが[CSSCSS](https://zmoazeni.github.io/csscss/)です。

## CSSCSSとは
[CSSCSS](https://zmoazeni.github.io/csscss/)はCSSプロパティの重複を教えてくれるアプリケーション（gem）です。
音読するとちょっと意味不明ですが気にせず行きましょう。
インストールと実行には[Ruby](https://www.ruby-lang.org/ja/)(ver 1.9.x以上)が必要です。

![csscss by zmoazeni.png](https://qiita-image-store.s3.amazonaws.com/0/119598/7e67d23e-2a6f-e1bb-80e0-5104955fa6ed.png)

### インストール
黒い画面（コマンドプロンプト）を叩き、インストール。

```lang
$ gem install csscss
```
一回失敗したけど出来ました！
詳しくは[CSSCSS](https://zmoazeni.github.io/csscss/)公式サイト（英語）をご覧ください。

![cmd_csscss_install.jpg](https://qiita-image-store.s3.amazonaws.com/0/119598/8dacfa4e-2159-1f5b-c902-853fb7046fb2.jpeg)


### 実行
黒い画面を叩き、実行。

```lang
$ csscss -v path/to/styles.css
```
![cmd_csscss_run.jpg](https://qiita-image-store.s3.amazonaws.com/0/119598/1c6aa769-7f67-d295-e88d-d664cb111743.jpeg)

すると、見事にプロパティ重複箇所が示されました！
`{.hoge} AND {.fuga} share 2 declarations
-margin: 0
-padding: 10px`
のように表示してくれます。

CSSファイルを指定する時は相対パスでも絶対パスでもOKです。

```lang
$ csscss -v http://example.com/css/main.css
```
この場合「https」から始まるSSLを利用しているサイトでは上手く行きません。「http」に書き換えましょう。

##やってみた結果
今回、CSSCSSを使い、27000byteほどあったCSSファイルの重複を見つけ出しては整理していった結果、約20000byteになり約23%の軽量化に成功しました！

絶対パスを指定して実行できるので、本番環境のCSS肥大箇所を発見して、開発環境でメンテナンスするといった使い方が出来るのがとても便利です。今後もたびたび使っていけそうだと思いました。

### Grunt/Gulpで実行
![4c3d3c33-efba-d134-c2a7-08e33de9c774.png](https://qiita-image-store.s3.amazonaws.com/0/119598/a45369fd-46f7-7b55-e7c0-4c510b3d6e6b.png)

GruntやGulpを使う場合の方法については下記を参照。

- [grunt-csscss](https://www.npmjs.com/package/grunt-csscss)
- [gulp-csscss](https://www.npmjs.com/package/gulp-csscss)
- [CSSプロパティの重複を解析してくれるgrunt-csscssについて紹介するよ](http://qiita.com/t32k/items/ba9e213d0253e369bf2e)

## まとめ
ついついブワッと書いていきがちなCSSですが、どうせならいいCSSを書いていきたいですね。
いいCSSの条件とは

- 予測しやすい
- 保守しやすい
- 再利用しやすい
- 拡張しやすい

...です。
便利なツールを有効活用して、いいCSSを書いていきましょう！
freerdp-x11でエラーが出て接続ができない場合

## ユーザ名/Passが間違えている場合

```bash:エラー
SSL_read: Failure in SSL library (protocol error?)
SSL_read: error:14094419:SSL routines:ssl3_read_bytes:tlsv1 alert access denied
credssp_recv() error: -1
Authentication failure, check credentials.
If credentials are valid, the NTLMSSP implementation may be to blame.
Error: protocol security negotiation or connection failure
```

## known_hostsと一致しない場合

```bash:エラー
connected to myserver.com:3389
The host key for myserver.com has changed
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the host key sent by the remote host is
xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx
Please contact your system administrator.
Add correct host key in /home/user1/.config/freerdp/known_hosts to get rid of this message.
Host key for myserver.com has changed and you have requested strict checking.
Host key verification failed.
tls_connect: certificate not trusted, aborting.
Error: protocol security negotiation or connection failure
```

* イントラとインターネット側とで接続した場合発生する様子

```bash:削除すればよい
rm ~/.config/freerdp/known_hosts
```

* 再度接続し、接続成功することを確認
[Rails] meta-tagsを何度更新しても反映されないのはデフォルトの文字数制限が原因だった

http://qiita.com/nysalor/items/ef68428307f612b6b6c2
↑のような感じで何気なく使っていたmeta-tags
titleタグの末尾の文言を何度更新しても反映されず2時間くらいハマる・・・
原因はデフォルトの文字数制限だった。

https://github.com/kpumuk/meta-tags

initializerで設定できる。

```
MetaTags.configure do |c|
  c.title_limit        = 70
  c.description_limit  = 160
  c.keywords_limit     = 255
  c.keywords_separator = ', '
end
```

デフォルトがSEOに最適な文字数ではあるのでこれに従うもOKかな。
技術英語 > [tube-shaped microbot] / it'll react with the platinum to form water and oxygen bubbles, which propel the tubes [along]

http://www.scientificamerican.com/podcast/episode/microbots-get-the-lead-out-of-wastewater/

> Each <font color=red>tube-shaped microbot</font> is a sandwich of three materials. A graphene outer layer, which binds to heavy metals. A middle layer of nickel, which gives the bots magnetic polarity, so they can be pulled through wastewater with magnets. <font color=blue>And platinum inside—for propulsion</font>. Just add a bit of <font color=blue>peroxide</font> to the wastewater, and it'll react with the platinum to form water and oxygen bubbles, which propel the tubes <font color=red>along</font>.  

白金測音抵抗体などに使われる白金がperoxide(過酸化水素)に作用して水と酸素の泡を作り、その泡によってmicrobotの推進力を生む。