OmniAICreator/Qiita-1.07M huggingface dataset:
Bootstrap以外のCSSフレームワークを探してみた



#やりたかったこと

CSSフレームワークを使いたい。けど、Bootstrapだとありきたりすぎる…というときに、他のCSSフレームワークを探してみました。


# Bootstrap 以外のCSSフレームワークいろいろ


##HTML Kick start
http://www.99lime.com/elements/

全体的に丸みを帯びている。アイコンデザインがよい。
他の特徴はよく分からないです。

##Cascade
http://jslegers.github.io/cascadeframework/index.html

>Also different from Twitter Bootstrap or other CSS Frameworks out there, Cascade Framework can be used for modern browsers and older browsers alike. All features of Cascade Framework support Internet Explorer from IE6 upwards or degrade gracefully. 

Cascade は最新ブラウザも昔のブラウザも同じように動く。そしてIE6以上に対応している、とのこと。悪夢のようなIE対策が要らないというのはよいですね。


##PURE
http://purecss.io/
yahoo が開発した、シンプルイズザベスとなフレームワーク。
なんと、最小でたったの4.4KB(!)。bootstrap をDLすると200KBくらい。

さらに、ダウンロードする必要すらなく、次の１行を挿入してCSSを取得すればよい。

```
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
```

こりゃいいな。

##Foundation
http://foundation.zurb.com/

シンプルでかっこいい。マスコットキャラ（？）が良い味出しています。

Foundation は、

* 学習コンテンツが豊富
* 作例が豊富
* グリッドのテンプレートが豊富

ということで、CSSフレームワーク初心者にも親切です。
公式でここまで充実しているフレームワークは、他にないのではないか。

ただし、全部英語です。
何気にSassにも対応しています。Sass なしでも使えます。


## その他
他のCSSフレームワークについては、下の記事で紹介されているので、ぜひご覧ください。

[最近のレスポンシブ対応フロントエンドCSSフレームワークまとめ](http://w3q.jp/t/4359)

[カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG] (http://liginc.co.jp/web/tool/other-tool/60107)


# 最後にー英語は覚えよう
どのCSSフレームワークを使うにしても、 **英語が必要です。**
なぜなら、ドキュメントが英語だからです。Bootstrap だと日本語の解説もたくさんありますが、マイナーなフレームワークだと日本語情報が無いか、古いものだけだったりします。

英語のサイトが出てきても、そっとブラウザを閉じないようにしましょう。
標準関数で素数を求める

[エラトステネスの篩](http://qiita.com/rana_kualu/items/04cb330a0949f48cb7ab) / [標準関数](http://qiita.com/rana_kualu/items/8b4e09f0410605f8180c)


http://www.php.net/manual/ja/function.gmp-nextprime.php

前[エラトステネスの篩で素数を求めました](http://qiita.com/rana_kualu/items/04cb330a0949f48cb7ab)が、普通に標準関数に存在していました。
なんでもありだなPHP。

```php
<?php
    // GMPを使った素数の求め方
    
    // 初期値
	$max = 1000000;
	$now = 1;
	$prime = '';
	
	// 素数を求める
	while(($now = gmp_nextprime($now)) < $max){
		$prime .= $now.PHP_EOL;
	}
	
	// 出力
    echo $prime;
```

| ファイル名               | 10000件時間(秒) | 1000件メモリ(kb) | 1000000件時間(秒) | 1000000件メモリ(kb) |
|:-------------------------|:----------------|:-----------------|:------------------|:--------------------|
| katsurayama_sosu.php     | 0.00400043      | 134.38           | 1.78117800        | 1362.41             |
| maeda_sosu.php           | 0.30502999      | 991.88           | 180 seconds exceeded                    |
| sosu_sample.php          | 2.81178141      | 992.17           | 180 seconds exceeded                    |
| tanaka_sosu.php          | 0.00449991      | 248.15           | 0.99830055        | 8166.82             |
| NurseAngel ArrayIterator | 0.00450063      | 993.30           | 0.48954952        | 84322.09            |
| NurseAngel str_repeat    | 0.00250053      | 145.05           | 0.19101894        | 2363.26             |
| NurseAngel gmp_nextprime | 0.01266773      | 136.09           | 0.96109605        | 1361.86             |

ということで速度はそれなり、メモリ使用量はずっと少ない、そして見た目が圧倒的に簡単という結果になりました。
どうしても速度をひたすら追求しなければならないんだ、なんて時以外はgmp_nextprime()を使っておけば十分でしょう。
というか速度が必要なら他の言語を使え。
alertの出し方メモ

iOSでポップアップして出てくるalertを表示。

```
var alert = UIAlertView()
alert.title = "title"
alert.message = "message"
alert.addButtonWithTitle("OK")
alert.show()
```

簡単だね。
4行目でボタンを付けないと消せないアラートになってしまうので注意。
RuboCop | Style/NumericLiterals

# RuboCop | Style/NumericLiterals

## 概要

RuboCopの「Style/NumericLiterals」警告について。

数値リテラルを3ケタ区切りで _ で区切っているかどうかチェックする。
デフォルトは5ケタ以上の場合にチェックする。

## NumericLiterals

各設定値での検証結果をまとめます。

### 検証プログラム

~~~ruby:numeric_literals.rb
print 1234
print 12345
print 123456
~~~

### 実行結果 デフォルト の場合

~~~yaml:.rubocop.yml
NumericLiterals:
  MinDigits: 5
~~~

~~~bash
$ rubocop numeric_literals.rb
Inspecting 1 file
C

Offenses:

numeric_literals.rb:2:7: C: Separate every 3 digits in the integer portion of a number with underscores(_).
print 12345
      ^^^^^
numeric_literals.rb:3:7: C: Separate every 3 digits in the integer portion of a number with underscores(_).
print 123456
      ^^^^^^

1 file inspected, 2 offenses detected
~~~

### 実行結果 6桁 に設定します

~~~yaml:.rubocop.yml
NumericLiterals:
  MinDigits: 6
~~~

~~~bash
$ rubocop numeric_literals.rb
Inspecting 1 file
C

Offenses:

numeric_literals.rb:3:7: C: Separate every 3 digits in the integer portion of a number with underscores(_).
print 123456
      ^^^^^^

1 file inspected, 1 offense detected
~~~

## 補足

この警告は rubocop -a で修正可能です。

## RuboCopまとめ記事

http://qiita.com/tbpgr/items/edbfecb6a6789dd54f47
tmlib.jsとbulletml.jsを使って弾幕STGを作る(0)

# 弾幕記述言語BulletMLをJavaScriptで！

世の中には弾幕シューティングゲームというものがあります。
商業ではCAVEさんの「怒首領蜂」シリーズ、同人では「東方」シリーズが有名です。
死ぬほどたくさんの弾が発射されて画面を埋め尽くし、自機は画面端に追い詰められて圧殺される、というおそろしいゲームジャンルです。
とにかく弾を大量に描画する必要があるため、2Dゲームのくせに高性能なグラフィック描画環境が要求されるというジャンルでもあります。

昨今ではJavaScriptの実行速度も十分上がってきたおかげで、弾幕シューティングゲームをブラウザ単独でも遊べるようになってきました。

高名な同人ゲームプログラマーである[ABA](http://ja.wikipedia.org/wiki/ABA_Games)氏が開発された弾幕記述言語「[BulletML](http://www.asahi-net.or.jp/~cs8k-cyu/bulletml/)」。
今こそこのテクノロジーをJavaScriptの世界に召喚し、ブラウザ弾幕シューティングが量産される世の中にしていこうではありませんか！

本シリーズでは、BulletMLパーサー＆処理系のJavaScript実装である**bulletml.js**と、汎用JavaScriptライブラリである**tmlib.js**を使い、JavaScriptで簡単に弾幕シューティングゲームを開発する方法を紹介していきます。
サブフォルダ内のファイルをまとめて取得する

#まえがき
ファイル一覧をサブフォルダ内からもまとめて取得するサンプルメモ。

[RecursiveIteratorIterator](http://jp1.php.net/manual/ja/class.recursiveiteratoriterator.php "RecursiveIteratorIterator")
[RecusiveDirectoryIterator](http://jp1.php.net/manual/ja/class.recursivedirectoryiterator.php "RecusiveDirectoryIterator")
を使えば自前で再帰処理作らないでいいから楽

#サンプル
## ファイルのみ取得
```php:main.php
<?php
$serch_dir = dirname(__FILE__) .'/files';

$files = new RecursiveIteratorIterator(
			new RecursiveDirectoryIterator($serch_dir,
					FilesystemIterator::CURRENT_AS_FILEINFO |
					FilesystemIterator::KEY_AS_PATHNAME |
					FilesystemIterator::SKIP_DOTS
			)
		);

foreach($files as $file_path => $file_info) {
	if (!$file_info->isFile()) {
		continue;
	}
	echo 'file path : '. $file_path                    .PHP_EOL;
	echo 'file size : '. $file_info->getSize()         .PHP_EOL;
	echo 'contents  : '. file_get_contents($file_path) .PHP_EOL;

	echo PHP_EOL;
}
```

## フォルダも取得する

```php:main.php
<?php
$serch_dir = dirname(__FILE__) .'/files';

$files = new RecursiveIteratorIterator(
			new RecursiveDirectoryIterator($serch_dir,
				FilesystemIterator::CURRENT_AS_FILEINFO |
				FilesystemIterator::KEY_AS_PATHNAME |
				FilesystemIterator::SKIP_DOTS
			),
			RecursiveIteratorIterator::SELF_FIRST
		);

foreach($files as $path => $info) {
	echo 'file path : '. $path              .PHP_EOL;
	echo 'file size : '. $info->getSize()   .PHP_EOL;

	if ($info->isFile()) {
		echo 'contents  : '. file_get_contents($path) .PHP_EOL;
	} else {
		echo 'contents  : not file!' .PHP_EOL;
	}

	echo PHP_EOL;
}
```

## ファイル名でフィルター
```php:main.php
<?php
$serch_dir = dirname(__FILE__) .'/files';

$files = new RecursiveIteratorIterator(
            new RecursiveDirectoryIterator($serch_dir,
                    FilesystemIterator::CURRENT_AS_FILEINFO |
                    FilesystemIterator::KEY_AS_PATHNAME |
                    FilesystemIterator::SKIP_DOTS
            )
        );

// 拡張子がtxtのファイルのみ抽出
$files = new RegexIterator($files, '/^.+\.txt$/i', RecursiveRegexIterator::MATCH);

foreach($files as $file_path => $file_info) {
	echo 'file path : '. $file_path                    .PHP_EOL;
	echo 'file size : '. $file_info->getSize()         .PHP_EOL;
	echo 'contents  : '. file_get_contents($file_path) .PHP_EOL;

	echo PHP_EOL;
}
```
active_adminでCSVアップロードしたい


## 概要
railsの管理画面でよく使われている
active_adminからcsvでデータをimportしたい。
そういう時にactive_admin_importableをいうgemが便利。

github https://github.com/krhorst/active_admin_importable


## 準備
```rb:gemfile
gem 'active_admin_importable'
```

下記のようなuserモデルがあるときに

```rb:app/model/user.rb
# Table name: users
#  id 
#  name
#  gender
class User < ActiveRecord::Base
  attr_accessible: :name, :gender 
end
```

ActiveAdminで管理している下記のfileに
``active_admin_importable``を例えば下記のように追記

```rb:app/admin/users.rb
ActiveAdmin.register User do
  
  active_admin_importable do |model, hash|
    model.create(name: hash[:name], gender: hash[:gender])
  end

end
```

## 手順
①管理画面にアクセスすると、"User"ページの右上に"Import Users"ボタンが表示。
②押すとファイル選択画面が表示されるので、例えば下記のようなcsvを選択すればデータをimportできる。

|  :name   | :gender |
|---------:|:-------:|
|"sample_1"|"male"   | 
|"sample_2"|"female" |
|"sample_3"|"male"   |

※ 用意するCSVデータの一行目には、モデルのカラム名を記載するように。
Stream APIの並行リダクション動作条件

http://docs.oracle.com/javase/jp/8/api/java/util/stream/package-summary.html

> ***リダクション、並行性、および順序付け***
> ところが、このリダクションで使用される結果コンテナが、`ConcurrentHashMap`のような、同時変更可能なコレクションであったとします。その場合、アキュムレータの並列呼出しでは、実際には同じ共有結果コンテナに結果を同時に蓄積できるため、コンバイナで複数の結果コンテナをマージする必要がなくなります。これにより、並列実行のパフォーマンスが向上する可能性があります。これを並行リダクションと呼びます。 
>
> `Stream.collect(Collector)`実装が並行リダクションを実行するのは、次の場合だけです。
>
> * ストリームが並列的であり、
> * コレクタが`Collector.Characteristics.CONCURRENT`特性を持っていて、
* ストリームが順序付けされていないか、コレクタが`Collector.Characteristics.UNORDERED`特性を持つ。 

http://docs.oracle.com/javase/8/docs/api/java/util/stream/package-summary.html

> ***Reduction, concurrency, and ordering***
> Suppose, however, that the result container used in this reduction was a concurrently modifiable collection -- such as a `ConcurrentHashMap`. In that case, the parallel invocations of the accumulator could actually deposit their results concurrently into the same shared result container, eliminating the need for the combiner to merge distinct result containers. This potentially provides a boost to the parallel execution performance. We call this a concurrent reduction.
>
> The `Stream.collect(Collector)` implementation will only perform a concurrent reduction if
>
> * The stream is parallel;
> * The collector has the `Collector.Characteristics.CONCURRENT` characteristic, and;
> * Either the stream is unordered, or the collector has the `Collector.Characteristics.UNORDERED` characteristic. 

http://docs.oracle.com/javase/tutorial/collections/streams/parallelism.html#concurrent_reduction

> This is called a _concurrent reduction_. The Java runtime performs a concurrent reduction if all of the the following are true for a particular pipeline that contains the `collect` operation:
>
> * The stream is parallel.
> * The parameter of the `collect` operation, the collector, has the characteristic `Collector.Characteristics.CONCURRENT`. To determine the characteristics of a collector, invoke the `Collector.characteristics` method.
> * Either the stream is unordered, or the collector has the characteristic `Collector.Characteristics.UNORDERED`. To ensure that the stream is unordered, invoke the `BaseStream.unordered` operation.
PHPのBasic認証

```lang:basic認証
$userArray = array("meishukan" => "minami2500");

basic_auth($userArray);
function basic_auth($auth_list,$realm="Restricted Area",$failed_text="認証に失敗しました"){

    if (isset($_SERVER['PHP_AUTH_USER']) and isset($auth_list[$_SERVER['PHP_AUTH_USER']])){
        if ($auth_list[$_SERVER['PHP_AUTH_USER']] == $_SERVER['PHP_AUTH_PW']){
            return $_SERVER['PHP_AUTH_USER'];
        }
    }

    header('WWW-Authenticate: Basic realm="'.$realm.'"');
    header('HTTP/1.0 401 Unauthorized');
    header('Content-type: text/html; charset='.mb_internal_encoding());

    die($failed_text);
}
```

一番ハマったのは、PHPがApacheモジュールとして動いているときのみ対応。
fastcgiやcgiアプリケーションの際は、だめ。
CentOS phpを使える様にする

phpをインストールした後の設定です。

・httpd.conf編集

<pre>
vi /etc/httpd/conf/httpd.conf
</pre>

<pre>
DirectoryIndex index.html index.htm index.cgi
↓
DirectoryIndex index.html index.htm index.cgi index.php ←追加(index.php許可)
</pre>

<pre>
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-httpd-php .php .html .phtml .htm ←追加(.phpファイルを使えるようにする)
</pre>

・Apache再起動

<pre>
/etc/rc.d/init.d/httpd restart
</pre>

最低限だけど、これでいけるはず。。。

参考サイトはこちらです。
http://centos.server-manual.com/centos5_apache2_php5.html
リモートで削除されたタグをローカルでも削除する

いわゆる `git fetch origin --prune` のタグ版です。

普通に `git fetch origin --prune --tags` で大丈夫かと思ったのですがバージョンによって動作が違いました。

```console
$ git tag oreore
$ git fetch origin --prune --tags
$ git tag -l
```

| version | 動作 | メモ
|---------|------|------
| 1.9.4   | ☓   |
| 1.8.5   | ○   |
| 1.7.6   | ☓   | origin/master などのリモート追跡ブランチが全部削除された！？

---

`--tags` ではなく refspec を指定すると次のようになりました。

```console
$ git tag oreore
$ git fetch origin --prune 'refs/tags/*:refs/tags/*'
$ git tag -l
```

| version | 動作 | メモ
|---------|------|------
| 1.9.4   | ○   |
| 1.8.5   | ○   |
| 1.7.6   | ☓   | origin/master などのリモート追跡ブランチが全部削除された！？

---

どのバージョンでも動作させるには、次のように全て削除してから fetch し直すのが良さそうです。

```console
$ git tag oreore
$ git tag -l | xargs git tag -d
$ git fetch origin --tags
$ git tag -l
```

| version | 動作 | メモ
|---------|------|------
| 1.9.4   | ○   |
| 1.8.5   | ○   |
| 1.7.6   | ○   |
scala-sbtで実行結果をファイルに保存するときに色付けを除去する

sbtコマンドの出力は色付けがされていて綺麗で見やすいのですが、出力結果をファイルに保存する時にカラーシーケンスが邪魔になってしまいます。
そこで、ttyが無い場合やパイプする場合には色付けを除去するようにするラッパーコマンドを作ってみました。

```bash
#!/bin/bash

tty -s
if [ "$?" != "0" -o -p /dev/stdout ]; then
  export SBT_OPTS="-Dsbt.log.noformat=true ${SBT_OPTS}"
fi

current_dir=`dirname $0`
sbt_path=${current_dir}/sbt
${sbt_path} $@
```

sbtスクリプトで$SBT_OPTSをjavaコマンドに入れていることが前提になります。
sbtスクリプト内に、上記のif文の箇所を記述することでも実現できます。


**2014/07/14 20:00**
xuwei_k さんのアドバイスを受けてオプションで色付け無しにするように修正しました。
SSH でログインできるまでblockするスニペット

EC2のインスタンスが立ち上がるまで待って何かを実行するときなどに。

`-o StrictHostKeyChecking=no` の判断は自己責任で。

```bash
CHECK_COMMAND="ssh -o StrictHostKeyChecking=no -o ConnectTimeout=1 $SERVER -q -T exit"

until
    `$CHECK_COMMAND`
    [ $? -eq 0 ]
do
    :
done
```

一定回数でabortとかは要件に応じて追加してください。

## (追加) nc版

``` bash
 until nc -w 1 $SERVER $PORT < /dev/null; do sleep 1; done
```
消せないファイルを消すコマンド

## inode番号を確認
```
ls -i

// 例えばな出力
5767177 bin  5767179 games    5771392 java  5767184 lib64    5767194 local  5767170 share  5767691 tmp
5767178 etc  5767180 include  5767181 lib   5767193 libexec  5767227 sbin   6029525 src
```

5767178 etc
左側がinode番号です

## 消す
```
find . -inum inode番号 -exec rm -f {} \;
```
Docker上にRedmineをたてる


Dockerを使って各プロセスを分離し、Redmineを構築してみました。

# 環境について

用意するコンテナは３種類。コンテナ間はDocker Linkで連携する。

![docker_redmine](https://docs.google.com/drawings/d/1_6B6OK2_lRWvLDFalXHAcjiSmQTVZ5DmsUGANLmRZJg/pub?w=960&h=720)

- Nginx用コンテナ
	- `CentOS` 6.5
	- `nginx`
　
- Redmine用コンテナ
	- `CentOS` 6.5
	- `unicorn`
	- `ruby` 2.1.0
	- `redmine` 2.5.2

- MySQL用コンテナ
	- `CentOS` 6.5
	- `MySQL` 5.5

# 環境構築

## MySQLコンテナの起動

`docker run`コマンドで起動する。
Dockerfileは[こちら](https://registry.hub.docker.com/u/mattuso/redmine_mysql/dockerfile)。

```bash
$ docker run -d --name mysql mattuso/redmine_mysql
```

Dockerfile作成の際は[実行順序](http://qiita.com/mattuso/items/c3bf754fcf5a38daa1a8#2-4)や実行コマンドに気をつける。
MySQLはフォアグラウンドで実行する必要があるので`CMD /usr/bin/mysqld_safe`とした。
※ `service mysql start`とするとMySQL起動後にプロセス自体が終了してしまう。

## Redmineコンテナの起動

次にunicornとredmineの入ったコンテナを起動する。
※ `bundle install`とか走るので時間がかかります。
Dockerfileは[こちら](https://registry.hub.docker.com/u/mattuso/redmine_unicorn/dockerfile)。

```bash
$ docker run -d --name unicorn --link mysql:db mattuso/redmine_unicorn
```

ここで、`--link mysql:db`とすることで **mysql** というコンテナの情報を、 **db** というエイリアスで利用切るようにしている。これにより下記のような環境変数が利用できるようになる。

```bash:env
DB_NAME=/unicorn/db
DB_PORT=tcp://172.17.0.12:3306
DB_PORT_3306_TCP_PORT=3306
DB_PORT_3306_TCP_PROTO=tcp
DB_PORT_3306_TCP_ADDR=172.17.0.12
DB_PORT_3306_TCP=tcp://172.17.0.12:3306
```

これをRedmineの設定ファイルに記述することで自動的に連携させることが出来る。

```yml:database.yml
production:
  adapter: mysql2
  database: redmine
  host: <%= ENV.fetch('DB_PORT_3306_TCP_ADDR') %>
  port: <%= ENV.fetch('DB_PORT_3306_TCP_PORT') %>
  username: redmine
  password: "redmine"
  encoding: utf8
```

## NginXコンテナの起動

最後にNginxコンテナを起動する。
Dockerfileは[こちら](https://registry.hub.docker.com/u/mattuso/redmine_nginx/dockerfile)。

```bash
$ docker run -d --name nginx --link unicorn:app -p 80:80 mattuso/redmine_nginx
```

先ほど同様、 **unicorn** コンテナを **app** として連携する。
今回は環境変数ではなく **hosts** の連携機能を利用し、Nginxの設定を記述している。
※ `upstream`のディレクティブでは環境変数の引用が出来ないみたいです。。ポートの記述を排除するためにアプリとの連携用のポートは80にした方が無難かもしれません。

```bash:nginx.conf
http {
    upstream webapps{
      server app;			←appはhostsで名前解決できる
    }
}

server {
    listen       80;
    server_name  localhost.com;

    location / {
        proxy_pass http://webapps;
    }
}
```

また、`-p 80:80`とすることでホストサーバへのアクセスがフォワードされるようにしておく。

## アクセス

**http://<ホストサーバIP>** にアクセスすればOKです。

# 残件

データとかログをホストサーバと共有しないと、コンテナを入れ替えるとデータが飛びます。
あと、静的コンテンツはNginxが返すようにしてあげるのもいいかも。

こうしたらいいんじゃない？みたいなのありましたら、[GitHub](https://github.com/mattuso/docker_redmine)までお願います。
Photoshopの「レイヤーを複製」をAppleScriptで

```applescript:レイヤーを複製.scpt
property mySelectedDoc : missing value
property mySelectedLayer : missing value

--2014 以外の場合書き換える↓ 
tell application "Adobe Photoshop CC 2014"
	activate
	if mySelectedDoc is missing value then
		set myFlag to display dialog "コピーします" buttons {"OK", "キャンセル"} default button 1
		set mySelectedDoc to current document
		set mySelectedLayer to current layer of current document
		display alert "" & (name of mySelectedDoc) & "の" & return & (name of mySelectedLayer) & return & "をコピーしました。"
	else
		try
			set myFlag to button returned of (display dialog "Clip中:" & (name of mySelectedDoc) & return & (name of current layer of mySelectedDoc) & return & "ペーストしますか？新たにコピーしますか？" buttons {"ペースト", "コピー", "やめる"} default button 1)
		on error
			set myFlag to "コピー"
		end try
		if myFlag is "コピー" then
			set mySelectedDoc to current document
			set mySelectedLayer to current layer of current document
			display alert "" & (name of mySelectedDoc) & "の" & return & (name of mySelectedLayer) & return & "をコピーしました。"
		else if myFlag is "ペースト" then
			set myPasteDoc to current document
			set current document to mySelectedDoc
			duplicate mySelectedLayer to myPasteDoc
			set current document to myPasteDoc
		end if
	end if
end tell
```

一度に複製できるのはレイヤー1枚かレイヤーグループひとつのみ。
コピー元は開いたまま実行。
実行専用で保存して使用。
みっともないですが…
NoActivity+NoXMLで真のHelloworldを・・・

#NoActivityでHelloWorldに共感しました
ということでさらに突き詰めてNOXML、Activityクラス自前定義でいきましょう。
AndroidStudioをご用意ください。

#プロジェクト作成
新しいプロジェクトを作ります。
![スクリーンショット 2014-07-14 16.52.29.png](https://qiita-image-store.s3.amazonaws.com/0/43688/77b9ee4f-1fda-adb6-d158-61d85dd09107.png)

もちろんNoActivityです
![スクリーンショット 2014-07-14 16.52.54.png](https://qiita-image-store.s3.amazonaws.com/0/43688/5a3986f8-8c15-0add-922f-81bb2dd58e49.png)

#Activity作成
ActivityをJavaクラスから自力で作ります。
![スクリーンショット 2014-07-14 16.56.11.png](https://qiita-image-store.s3.amazonaws.com/0/43688/9596da9d-0cde-489b-7aaf-830cd3d12072.png)


```lang:MainActivity.java
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        RelativeLayout rootView = new RelativeLayout(this,null);
        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);
        addContentView(rootView,params);

        TextView hello = new TextView(this);
        hello.setText("Hello World!!");
        RelativeLayout.LayoutParams textLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
        textLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        hello.setLayoutParams(textLayoutParams);
        rootView.addView(hello);
    }
}
```
ManifastのApllicationの間にActivityの記述を追記します。

```lang:AndroidManifast.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.sample.app.noxmlhelloworld">
    <application android:allowBackup="true"
        android:label="@string/app_name"
        android:icon="@drawable/ic_launcher"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"
            android:theme="@android:style/Theme.Light.NoTitleBar"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>
```
これでLayoutXMLも不要なHelloWorldの完成です。

#ふりかえり
AndroidStudioはNavigationDrawerが出る高級なアプリが自動生成されたりして、未経験者の方からすると分からなくなりがちなのでJavaだけで組んでみるのはいいトレーニングになると思います。良い試みでした。

Java側での定義のやり方や、Viewに対してSetするLayoutParamが親のViewGroupのクラスの内部クラスとして存在する点など理解が進みます。
phpで可逆暗号化をしてみて躓いた部分


urlのパラメータを暗号化してみようとして、思わぬところで躓く。

下記は PHP 可逆暗号化　等で検索したら一番上に出てくるの暗号化方法
しかし、そのまま使うと・・・

```暗号化:暗号化

function encryptedParam($input,$key = KEY_DEFAULT)
    $key = md5($key);

    //暗号化モジュール使用開始
    $td  = mcrypt_module_open('tripledes', '', 'ecb', '');
    $key = substr($key, 0, mcrypt_enc_get_key_size($td));
    $iv  = mcrypt_create_iv(mcrypt_enc_get_iv_size($td), MCRYPT_RAND);

    if (mcrypt_generic_init($td, $key, $iv) < 0) {
      exit('error.');
    }

    $encrypted_data = base64_encode(mcrypt_generic($td, $input));
    //print $encrypted_data;
    mcrypt_generic_deinit($td);
    mcrypt_module_close($td);

    return $encrypted_data;
}

```

```複合化:複合化

function decryptedParam($input,$key = KEY_DEFAULT)
{

    //暗号化＆復号化キー
    $key = md5($key);

    //暗号化モジュール使用開始
    $td  = mcrypt_module_open('tripledes', '', 'ecb', '');
    $key = substr($key, 0, mcrypt_enc_get_key_size($td));
    $iv  = mcrypt_create_iv(mcrypt_enc_get_iv_size($td), MCRYPT_RAND);

    //暗号化モジュール初期化
    if (mcrypt_generic_init($td, $key, $iv) < 0) {
      exit('error.');
    }

    //データを復号化
    $encrypted_data = mdecrypt_generic($td, base64_decode($input));

    //暗号化モジュール使用終了
    mcrypt_generic_deinit($td);
    mcrypt_module_close($td);
    
    return $encrypted_data;
    
}

```

下記の文字列を上記のモジュールで暗号化→複合化をしてみる（自分で実際に使った文字列）

```暗号複合:そのまま暗号化→複合化

$a = '3'
$key = '[適当なキー]';
$a = encryptedParam($a,$key )
$a = decryptedParam($a,$key )

```

if($a == 3) true;

if($a == '3') false;

なるほど数値型で入ってるんだな。
ん・・・？phpの==で細かい型判定あったっけ・・・？

is_numeric($a) false

なん・・だと・・？

if($a === 3) false

？？？

bin2hex($a) 3300000000
bin2hex(3) 33

等など色々試してみたのですが、原因はこのモジュールを使った場合にNULL文字が末尾に入るということでした。

なので

```複合化:複合化の最後の行
$encrypted_data = mdecrypt_generic($td, base64_decode($input));
```
の部分を

```複合化:複合化の最後の行
$encrypted_data = rtrim(mdecrypt_generic($td, base64_decode($input)));
```

でrtrimしてあげるという方法を取り解決しました。

ちなみに上記のようにわかる場合もあれば、比較してもそのまま上手くいってしまう文字列もあるのが余計にわかりにくい。

ネットで簡単にやり方が調べられる時代とはいえ、ちゃんと自分で試してみないとわからないもんだなーと思いました（小並感）。
[Android] 文字をなめらかに点滅させる

# 完成イメージ
![measure.gif](https://qiita-image-store.s3.amazonaws.com/0/40758/25d64853-34f8-4c4f-2cc0-2955126b71f4.gif)

VISIBLE/INVISIBLE でなく、フェードさせてなめらかに点滅させます。
（GIFアニメのループの都合で点滅タイミングが若干乱れていますが実際は等間隔で点滅します）

# 実装

```java:AnimatorSample.java（抜粋）
private Handler mHandler = new Handler();
private ScheduledExecutorService mScheduledExecutor;
private TextView mLblMeasuring;

private void startMeasure() {

    
    /**
     * 点滅させたいView
     * TextViewじゃなくてもよい。
     */
    mLblMeasuring = (TextView) findViewById(R.id.lbl_measuring);

    /**
     * 第一引数: 繰り返し実行したい処理
     * 第二引数: 指定時間後に第一引数の処理を開始
     * 第三引数: 第一引数の処理完了後、指定時間後に再実行
     * 第四引数: 第二、第三引数の単位
     *
     * new Runnable（無名オブジェクト）をすぐに（0秒後に）実行し、完了後1700ミリ秒ごとに繰り返す。
     * （ただしアニメーションの完了からではない。Handler#postが即時実行だから？？）
     */
    mScheduledExecutor = Executors.newScheduledThreadPool(2);
    
    mScheduledExecutor.scheduleWithFixedDelay(new Runnable() {
        @Override
        public void run() {
            mHandler.post(new Runnable() {
                @Override
                public void run() {
                    mLblMeasuring.setVisibility(View.VISIBLE);

                    // HONEYCOMBより前のAndroid SDKがProperty Animation非対応のため
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
                        animateAlpha();
                    }
                }
            });
        }


        @TargetApi(Build.VERSION_CODES.HONEYCOMB)
        private void animateAlpha() {

            // 実行するAnimatorのリスト
            List<Animator> animatorList = new ArrayList<Animator>();

            // alpha値を0から1へ1000ミリ秒かけて変化させる。
            ObjectAnimator animeFadeIn = ObjectAnimator.ofFloat(mLblMeasuring, "alpha", 0f, 1f);
            animeFadeIn.setDuration(1000);

            // alpha値を1から0へ600ミリ秒かけて変化させる。
            ObjectAnimator animeFadeOut = ObjectAnimator.ofFloat(mLblMeasuring, "alpha", 1f, 0f);
            animeFadeOut.setDuration(600);

            // 実行対象Animatorリストに追加。
            animatorList.add(animeFadeIn);
            animatorList.add(animeFadeOut);

            final AnimatorSet animatorSet = new AnimatorSet();

            // リストの順番に実行
            animatorSet.playSequentially(animatorList);

            animatorSet.start();
        }
    }, 0, 1700, TimeUnit.MILLISECONDS);
    
}

```
Vimで複数のファイルを開く

Vim初心者に向けてあれこれ・・・
詳しくは[ここ](http://vim-jp.org/vimdoc-ja/)を参照

##複数のファイルを開く

```text
# vi ファイル名1 ファイル名2 ... ファイル名n
```

ディレクトリ内の全てのテキストファイルを開く

```text
# vi ディレクトリ名/*.txt
```

ウィンドウを水平分割して開く

```text
# vi ファイル名1 ファイル名2 ... ファイル名n -o
```

ウィンドウを垂直分割して開く

```text
# vi ファイル名1 ファイル名2 ... ファイル名n -O
```

タブを分割して開く

```text
# vi ファイル名1 ファイル名2 ... ファイル名n -p
```

##ファイルを移動する
次のファイル

```text
:n
```

前のファイル

```
:N
```

次のタブ

```text
:gt
```

前のタブ

```
:gT
```
placeholderにスタイルを当てるSCSS Mixin


``` scss
@mixin placeholder-style {
  &::-webkit-input-placeholder {
    @content;
  }

  // Firefox 4 to 18
  &:-moz-placeholder {
    opacity:  1;
    @content;
  }

  // Firefox 19+
  &::-moz-placeholder {
    opacity:  1;
    @content;
  }

  // IE 10+
  &:-ms-input-placeholder {
    @content;
  }
}
```

### Example

``` scss
.text-input {
  @include placeholder-style {
    color: $color;
  };
}
```
VPNを使わず支店間でファイルサーバの共有フォルダに接続

* [autossh](http://qiita.com/tukiyo3/items/6a64037117a5488ade78)と組み合わせると安心。

```bash:ssh_server経由、192.168.10.100の共有フォルダにアクセスしたい
ssh -gNL 10445:192.168.10.100:445 ssh_server
```

![スクリーンショット 2014-07-14 17.19.04.png](https://qiita-image-store.s3.amazonaws.com/0/25728/4aeb0971-8f56-def5-14f7-eb7c109ecd4a.png)

他のPCからもsshで接続したPCに `smb://192.168.1.33:10445/profiles` で閲覧できる。

これを常用している人いるんだろうか・・・


VPNについては以下サイトがわかりやすかった。

* [VPC上にVyattaでPPTPサーバを構築する « サーバーワークス エンジニアブログ](http://blog.serverworks.co.jp/tech/2013/12/27/vyatta_ppt-2/)

基本はPPTPが良いらしい。
しかしVPN接続とは接続先のLANにぶら下がる形。
そんな大げさなことをしたくないという場合にいいのではないでしょうか。


# vpnを組む方法を調べたメモ

* modprobe tun
* /etc/ssh/sshd_config で `PermitTunnel yes`
* `ssh -w0:0 remote_server`でトンネル接続ができるらしい

[OpenVPNサーバー](http://yam-web.net/openvpn/index.html)が詳しそう
[SSH でVPNを実現する - いますぐ実践! Linuxシステム管理 / Vol.248](http://www.usupi.org/sysad/248.html)がわかりやすそうですが、情報が古い？
* MacOSXでは`brew install tuntap`で/dev/tun[0-9], /dev/tap[0-9]ができる
* TAP : データリンク層 (ルータ)
* TUN : ネットワーク層 (ブリッジ)

## OSXにtuntapをインストール手順

```bash:OSXにtuntapをインストール手順
brew install tuntap
sudo -s

cp -pR /usr/local/Cellar/tuntap/20111101/Library/Extensions/tap.kext /Library/Extensions/
cp -pR /usr/local/Cellar/tuntap/20111101/Library/Extensions/tun.kext /Library/Extensions/
chown -R root:wheel /Library/Extensions/tap.kext
chown -R root:wheel /Library/Extensions/tun.kext
touch /Library/Extensions/

cp -pR /usr/local/Cellar/tuntap/20111101/tap /Library/StartupItems/
chown -R root:wheel /Library/StartupItems/tap
cp -pR /usr/local/Cellar/tuntap/20111101/tun /Library/StartupItems/
chown -R root:wheel /Library/StartupItems/tun
```

```bash:アンインストール手順
brew remove tuntap
sudo rm -rf /Library/Extensions/{tap,tun}.kext
sudo rm -rf /Library/StartupItems/{tap,tun}/
```
論理削除というのはRDBMSのレコードの状態を表す言葉で、オブジェクトの状態とは別物つってんだろマン

この認識がない人が多くて、設計ミスやバグの温床となってたから、railsのマジックカラムからdeleted_atが無くなったのではなかったのか。
deleted_at使うな（作る物に依るとは思うけど）。
dockerのCentOS公式イメージ

ちょっと気がついたので、メモ。
https://registry.hub.docker.com のCentOS公式イメージですが、何の気無しにdocker pull すると、すでにCentOS7を引っ張ってくるようになっています。

デフォルトでlatestなイメージを使うため。

なので、CentOS6を使いたい場合は、自分の環境で取り込む際に、イメージ＋タグで指定すること。

```
# centos:centos6 とタグ付きで指定 
$ docker run -it centos:centos6 cat /etc/redhat-release
CentOS release 6.5 (Final)

# 何も指定しないとlatest
$ docker run -it centos cat /etc/redhat-release
CentOS Linux release 7.0.1406 (Core) 

$ docker images
REPOSITORY         TAG            IMAGE ID       CREATED             VIRTUAL SIZE
centos             latest         1a7dc42f78ba   4 days ago          236.4 MB
centos             centos6        cd934e0010d5   5 days ago          206.9 MB

```
WindowsできびしそうなPHP(joke)

```php
<?php
namespace ¥\¥{
	class ¥{
		static public function ¥(){
			echo "\\ is not ¥".PHP_EOL;
		}
	}
}

namespace {
	\¥\¥\¥::¥();
}
```

### on mac

![](http://pyazo.hachiojipm.org/image/lJoYOoEEZt7nljHu140527056884811.png)


### meanwhile in windows(JP).

![](http://pyazo.hachiojipm.org/image/WKt7gqGkg8ygEKSf140528717425563.png)
gitのコミット時の名前、AUTHORの名前を後から修正する

# 過去をさかのぼってすべてのコミッター・AUTHORログを修正したい場合

修正したいローカルリポジトリ内で・・・

```shell-session
git filter-branch -f --env-filter 'export GIT_COMMITTER_NAME="なまえ"'
git filter-branch -f --env-filter 'export GIT_COMMITTER_EMAIL="メールアドレス"'
git filter-branch -f --env-filter 'export GIT_AUTHOR_NAME="なまえ"'
git filter-branch -f --env-filter 'export GIT_AUTHOR_EMAIL="メールアドレス"'
```

その後リモートリポジトリを作りなおしてそこにpush

何も考えずにXcodeでコミットしてたらgithub上でもMacの名義になってたので修正した
Visibilityを変更するボタン

しょっぱい小技です。
MVVMで作っていて、表示をON/OFFするボタンが面倒になったので作りました。
どうせ探せばあるのでしょう。はいはい車輪の再発明。

```csharp:ChangeVisibilityButton.cs
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MySilverlightLibrary.Control
{
    public class ChangeVisibilityButton:Button
    {
        public FrameworkElement TargetElement
        {
            get { return (FrameworkElement)GetValue(TargetElementProperty); }
            set { SetValue(TargetElementProperty, value); }
        }

        // Using a DependencyProperty as the backing store for TargetElement.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TargetElementProperty =
            DependencyProperty.Register("TargetElement", typeof(FrameworkElement), typeof(ChangeVisibilityButton), new PropertyMetadata(null));

        public ChangeVisibilityButton()
        {
            this.Click += ChangeVisibilityButton_Click;
        }

        void ChangeVisibilityButton_Click(object sender, RoutedEventArgs e)
        {
            if( TargetElement !=null)
            {
                if(TargetElement.Visibility == System.Windows.Visibility.Visible)
                {
                    TargetElement.Visibility = System.Windows.Visibility.Collapsed;
                }
                else
                {
                    TargetElement.Visibility = System.Windows.Visibility.Visible;
                }
            }
        }
        
    }
}

```

使い方
TargetElementに対象をBindingしてください。
```xml
    <Grid x:Name="LayoutRoot">
        <StackPanel>
            <my:ChangeVisibilityButton Width="100" Height="30" Content="test" TargetElement="{Binding ElementName=test}"></my:ChangeVisibilityButton>
            <Button Name="test" Height="50" Background="Aqua" Foreground="AliceBlue"></Button>
        </StackPanel>
    </Grid>
```
WordPress4.0Beta1のイメージ作った (312 MB)

# 起動方法

```bash:
mkdir wordpress4

docker run -p 80:80 -it \
 -v `pwd`/wordpress4:/var/lib/mysql/ \
 tukiyo3/ubuntu-debootstrap-ja:14.04-wordpress4 \
 /bin/bash
```

* ブラウザで http://localhost/ を開くとWordpress4セットアップ画面が表示されます。

## mysql

* ユーザ:パスワード
  * root:root

# 作成手順

```bash:
docker -run -it tukiyo3/ubuntu-debootstrap-ja:14.04 /bin/bash
```

```bash:
apt-get update
apt-get install -y unzip wget mysql-server php5 php5-mysql
wget https://wordpress.org/wordpress-4.0-beta1.zip
unzip wordpress-4.0-beta1.zip
mv wordpress /srv/wordpress4
rm wordpress-4.0-beta1.zip
chown -R www-data:www-data /srv/wordpress4
```

mysqlのrootユーザパスワード設定 -> `root`に設定

```bash:/etc/apache2/sites-enabled/000-default.conf
DocumentRoot /srv/wordpress4
<Directory /srv/wordpress4>
	AllowOverride None
	Require all granted
</Directory>
```

```bash:my.cnf
[mysqld]
character-set-server=utf8
skip-character-set-client-handshake
[mysqldump]
default-character-set=utf8
[mysql]
default-character-set=utf8
```

## /.bashrc

```bash:
export LANG=ja_JP.UTF-8
apt-clean() {
    mv /etc/apt/sources.list{,.bak}
    apt-get clean
    apt-get update
    mv /etc/apt/sources.list{.bak,}
}
/etc/init.d/mysql start
if [ ! -d /var/lib/mysql/wordpress/ ];then
    mysql_install_db
    mysqladmin -uroot password 'root'
    mysqladmin -uroot -proot create wordpress
fi
/etc/init.d/apache2 start
```
スマホでselectのテキストは左右中央にできるのか

ぐぐったら```text-align: -webkit-center;```で左右中央にできるというのでやってみたけれど、iOS7・iOS8で効かなかった・・・

参考：http://www.yoheim.net/blog.php?q=20121007

#bugfix

試行錯誤したら動いた。
※iPhoneと同じCSSだとAndroidで動かない（labelクリックしてもselectが開かない？）。

```html
<label>
    <select>
        <option>選択１だよ〜</option>
        <option>選択２だよ〜</option>
        <option>選択３だよ〜</option>
    </select>
</label>
```

```css
select { //Android
    text-align: center;
}

@media screen and (max-device-width: 480px) { //iPhone
    label {
        display: -webkit-box;
        display: box;
        box-pack:center;
        -webkit-box-pack:center;
        background-color: #fff;
        border: 1px solid #CCC;
        border-radius: 6px;
        cursor: pointer;
    }
    
    select {
        border: none;
    }
}
```

デモ：http://jsdo.it/Ituki/tsIQ
CharSequence と Parcelable

`Parcelable`は、Android における軽量なシリアライズ・フレームワークです。
`boolean`以外の各種プリミティブ型とその配列や、リスト、`Serializable`、`Parcelable`、`String`文字列をサポートしています。

ここで、文字列を`CharSequence`で保持している場合、`Parcelable`には直接それを取り扱うインタフェースがありません。

そこで、[`TextUtils`](http://developer.android.com/reference/android/text/TextUtils.html)を使います。

### `TextUtils.writeToParcel(CharSequence, Parcel, int)`で書きだす

専用のユーティリティメソッドがあるので、シリアライズ処理のなかでコレを使います。

### `TextUtils.CHAR_SEQUENCE_CREATOR.createFromParcel(Parcel)`で読み出す

書き出す時と記述に違いがありますが、これで復帰できます。
CSSで複数のDIVを横に均等配置

```html
<style>
.flex {
	width: 1000px;
	min-height: 400px;
	margin: 0px;
	padding: 0px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row;
	flex-flow: row;
}

.flex .flex_chilled {
	-webkit-flex: 1;
	flex: 1;
}
</style>
<div class="flex">
   <div class="flex_chilled"></div>
   <div class="flex_chilled"></div>
   <div class="flex_chilled"></div>
</div>
```
Domain Driven Design 

7月10日豆ナイト
[ぐるぐるDDD/SCRUM - ドメイン駆動設計入門 ～ モデリング探求のうずまきをまわしてみよう！」]
(http://kokucheese.com/event/index/186937/)

の成果物。

[First Iteration](https://gist.github.com/kencoba/25dde260ef53210c1d72)
[Second Iteration](https://gist.github.com/kencoba/6ac7537c993d1802ed50)
[Third Iteration](https://gist.github.com/kencoba/1294f7c3030a10346101)

第2イテレーションはJavaです。

第3イテレーションは、自宅で回しました。
それぞれの区画ごとに別の課金アルゴリズムがある、という想定。
QiitaのUIで気になったところ


# 前提
2014/7/14時点での話になります。

普段適当にフィードを表示させて気になったものはタブに開いてチェックみたいな使い方をしています。
環境はMacBookProRetina15でChromeです。
Safariだとそんなことないよとかあるかもしれないですけど、検証してません。

普段使っていて、ちょっとここが使いにくいとか、気になるところをこうしたらいいんじゃないかという思考実験です。
個人の感想なので、そのへんはご理解ください。

# フィード画面のストックボタン

![ホーム_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/40572/2567e1c7-2fff-fac1-1fde-79fbb78b6a65.png "ホーム_-_Qiita.png")

###小さすぎる
クリックできるのが20*20ピクセルぐらいなので、押しにくい。
この画面でのメイン操作は投稿を開く/ストックするの2つがメインとなると思うので、このボタンはもっと押しやすくていい。
またストック数をクリックすると投稿内容の展開表示になっているが、期待される動作はストックだと思う。

###クリックできるかの判別がむずかしい
![ホーム_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/40572/92c82bee-aeb6-6505-46ac-bbfd58ca7f8d.png "ホーム_-_Qiita.png")![ホーム_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/40572/600ac150-ca15-025c-c9c0-0ed5daac8201.png "ホーム_-_Qiita.png")

左が投稿にマウスオーバー時、右がストックボタンにマウスオーバー時。
少し前までこのマウスオーバーの変化はなかったような気もするけど、今はこんな変化がついている。
ボタンの重要度を思うとこれももうちょっと派手のほうがいいと思う。

また、フィード画面ではすべての領域がクリック可能なため、マウスカーソルの変化がない点もわかりにくい点。

###改善案
- 数字まで含めてストックボタンにする
- ボタンサイズを30〜40ピクセルに大きくする
- マウスオーバー時の変化を大きくする
- ツールチップをつける

# フィード画面での投稿のエキスパンド

### クリック領域
![ホーム_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/40572/eb8a5d90-acf0-c462-dada-7530b42b71c1.png "ホーム_-_Qiita.png")

フィードのクリック領域と動作はこのようになっているが、それ以外の灰色の部分はすべて、投稿を展開する領域に割り当てられている。
(展開はフィード内で投稿を表示する動作で、移動せずにちょっと内容を確認するのに向いているモード)
タグやストックのボタンが小さめで、かつ周りが別のクリック領域のため、誤クリックするパターンが多くなっていると推定。

### 展開後の動作

![ホーム_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/40572/348ba1a9-3645-df65-61a6-6b1b5043b214.png "ホーム_-_Qiita.png")

投稿を展開した場合、閉じるボタンが一番下の囲った領域と左側の細いバーで閉じるになる。
下のボタンはマウスオーバーで多少大きくなる。
正直左側が畳むボタンであると認識するのは難しいと思います。

**追記:展開した記事内でダブルクリックでどこでも閉じるようです。コメントで教えていただきました。**

この投稿の場合短いのでほとんど問題はないが、もっと縦に長い場合一度展開すると一番下まで行かないと投稿を畳むことができないと認識しやすいのではないだろうか？
誤クリックが発生しやすい件と合わせてUXを損ないやすい仕様だと思います。

### 改善案

![ホーム_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/40572/204efce7-073d-3f60-6b36-59ed9934130d.png "ホーム_-_Qiita.png")

展開ボタンの領域を下のボタン付近に狭める(その場合クリック領域は広げる)。
もしくは、タグやストックボタンなどの周りにマージンを十分に取る。

展開後は展開前と同じ場所をクリックすることでトグル操作になるように統一する。

# 新着フィード

フィードやすべての投稿で新しいアクティビティがあった場合、表示すると新しい分がどこからどこまでかわかりにくい。

### 改善案
新着分に関して、区切り線をつける

これを
![ホーム_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/40572/13464bd0-1cdd-360b-6690-d8ffddc065b7.png "ホーム_-_Qiita.png")

こんな感じに
![ホーム_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/40572/5458af64-1941-6b83-6495-df20b5baf24c.png "ホーム_-_Qiita.png")


# 投稿画面でのストックボタン

![iOS_-_SwiftのArrayの書き方がちょっと変わった_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/40572/f125737b-bce5-aed3-91de-596141e6bb04.png "iOS_-_SwiftのArrayの書き方がちょっと変わった_-_Qiita.png")

ストックボタンはこの2箇所にあるが、ある程度長い投稿の場合途中でストックボタンが見えなくなる。
投稿を途中まで読んでいて、いい記事だなとりあえずストックしておくか、となったとき上か下かまで移動しなければならない。

### 改善案

右上にあるストックボタンを追尾型ボタンする。
関連投稿と注目の投稿は追尾型なので、その上においておくようにすれば使いやすそう。
Javascriptのbind関数と部分適用 〜 JSおくのほそ道 #015

こんにちは、ほそ道です。

今回はFunction.prototype.bind関数を取り上げます。
このbind関数も[前回のcall/apply関数](http://qiita.com/setzz/items/155af03120a330fd4437)同様、開発者の意図が反映される関数かと思います。

[目次はこちら](http://qiita.com/setzz/items/ad9a9c99a4fda041a563)


# bind関数の仕様

bind関数はFunction.prototypeに属し、新たな関数を生成して返します。
下記で仕様を見ていきます。

## その1：thisを強制変更する

第一引数は関数内で参照されるthisを置換えます。

```js:thisを強制変更する
// 人間
function Man(name) {
  this.name = name;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

// ネコ
function Cat(name) {
  this.name = name;
}

// 人間の挨拶
var steve = new Man("Steve");
steve.greet();           // Hello, my name is Steve

// ネコの挨拶！？
var tama = new Cat("Tama");
var tamaGreet = steve.greet.bind(tama);
tamaGreet();            // Hello, my name is Tama
```

bind関数を使う事で本来ネコが持っていないgreet関数が使えます。怖可愛いですねぇ。。

ん、コレって既視感を覚える、と思った方、Yesです！
そう、前回やったcall関数にクリソツなんですね！
大きな違いとしては
**call関数は関数を実行する**のに対し、
**bind関数は新たな関数を生成して返す**んですね。

## その2：引数を予約する

bind関数は第二引数以降も取る事が出来ます。
第二引数以降は引数の予約に使われます。

```js:引数を予約する
var neoMax = Math.max.bind(null, 200, 300, 400);
console.log(neoMax(100));    // 400
console.log(neoMax(800));    // 800
```

上記のようにMath.max関数を流用して、あらかじめ第１〜３引数を特定値200,300,400で占有させたneoMax関数を生成出来ます。
call/apply関数の時は **「汎化」** という言葉を使いましたが、
このように引数を予約して生成された関数は **「特化」** されると言って良いのではないでしょうか？

# 部分適用

特化関数の生成をちょっと掘り下げましょう。
bind関数の引数予約を使うと部分適用が簡潔にできます。
ビフォーアフター的にbind関数を使うケース、使わないケースを見ていきましょう。

## bindをつかわない部分適用

```js:bindをつかわない部分適用
function add(x, y) {
  if (typeof y === 'undefined') {
    return function(y) {
      return x + y;
    };
  }
}

// 関数を部分適用
var add200 = add(200);
console.log(add200(300));    // 500
```

第二引数であるyが無ければ新たな部分適用された関数を返します。
次はbindをつかったパターンも見ていきます。

## bindをつかった部分適用

```js:bindをつかった部分適用
function add(x, y) {
  return x + y;
}

// 関数を部分適用
var add200 = add.bind(null, 200);
console.log(add200(300));     // 500
```

と、簡潔に書くことができます。

ただし、気をつけるポイントとして
bind関数を使う場合はadd関数内部では部分適用が意識されていません。
別の場所で実行された処理がadd関数を流用して特化関数を作成しているという事がひとつの特徴になっており、
どれが正解という訳ではないですが、プログラムの文脈に即した使い方が出来るように配慮しておく事が大事かなと思います。 

# カリー化について

もともとのポストで部分適用とカリー化について誤解があった状態で内容記述していた為、改めて整理しておきます。
> カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引数を取り結果を返す関数」であるような関数にすること（あるいはその関数のこと）である。[from wikipedia](https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%AA%E3%83%BC%E5%8C%96)

下記のような感じですね。 ご指摘いただいた皆様には心より感謝申し上げます。。:pray: 

```
function add(x) { return function(y) { return x + y; }　}
console.log(add(150)(350));  // 500
```

今回は以上です。
次回は[Javascriptの値渡し/参照渡し](http://qiita.com/setzz/items/3b16b3646ef231c3aeb9)についてまとめます。
swiftの_(underscore)の使い方まとめ

# 数字のフォマット

```swift
let paddedDouble = 000123.456
let oneMillion = 1_000_000
let justOverOneMillion = 1_000_000.000_000_1
```

# tupleの使わない値の省略

```swift
let (justTheStatusCode, _) = http404Error
println("The status code is \(justTheStatusCode)")
// prints "The status code is 404"
```

# loop時iの省略(loop回数だけ集中したい時)

```swift
let base = 3
let power = 10
var answer = 1
for _ in 1...power {
    answer *= base
}
println("\(base) to the power of \(power) is \(answer)")
// prints "3 to the power of 10 is 59049"
```


# methodの外部パラメータ名省略(explicit external parameter name)

```swift
class Test{
    func sayLove(a:String,_ b:String){
        println("\(a) love \(b)")
    }
}
let test = Test()
test.sayLove("I","U")
```

# default valueがあるfunctionのパラメータの外部パラメータ名省略

```swift
func sayLove(a:String,_ b:String = "her"){
    println("\(a) love \(b)")
}

sayLove("I","You")
JSF2.2における@ViewScope及び@SessionScopeにおけるメモリリーク問題(未解決)


## 概要

JSF2.2で提供される機能のうち、`@ViewScope`や`@SessionScope`は非常に便利な機能です。
但し、残念なことにこの機能はメモリリークする問題が含まれているようです。
(`@FlowScope`や@ConversionScope`でも発生しそうな感じですが、私は検証していません)

そのため、GlassFish4.0を起動し続けていると徐々にメモリが逼迫してしまい最終的にはOutOfMemoryでアプリケーションの応答しなくなります。

## 関連チケット

具体的なチケットとしては、[JAVASERVERFACES-3194](https://java.net/jira/browse/JAVASERVERFACES-3194)でJIRAにチケットが切られています。

Macadoshisさんが以下の様にコメントされていますが、まさに私も同様の現象が発生していました。
> My jmeter tests simulating hundred of parallel users kill my available heap size very quickly  

ただ、このチケットは色々迷走しているようで、closeされているのに[2.2.7のリリース](https://java.net/jira/browse/JAVASERVERFACES/fixforversion/16868/?selectedTab=com.atlassian.jira.jira-projects-plugin:version-summary-panel)に含まれていなかったり、修正されていなくてReOpenされたりしています。最終的には6/25にfixされている状態です。


## 再現確認

このメモリリーク問題はJConsoleなどで簡単に確認する事が可能です。
(私はプロジェクト終盤の負荷テスト中に見つけましたがorz...)

[memory-leak](https://github.com/hikaruworld/javaee7-sample/tree/master/memory-leak)というシンプルなプロジェクトを作成して確認してみました。
このプロジェクトでは`@ViewScope`でのメモリリークを調査しています。

1. アプリを起動して再表示を何回かするとViewScopeで管理されているクラスが積み上がっていくことを確認。
2. FullGCを実行しても解放されないことを確認
3. 別画面へ遷移しても破棄されない事を確認
4. FullGCを実行しても破棄されない事を確認

![leak.png](https://qiita-image-store.s3.amazonaws.com/0/11214/dc62107b-3ff4-8059-e90e-e1d03f13a9ef.png "leak.png")

*※Productクラスがいつメモリから解放されるかプロファイルしています*

実は13:20:10辺りでFulGCをかけているのですが、全くメモリから解放されません。
また、別画面に遷移してみてもやはり解放されません。



## そして解決?

[rev13386](https://java.net/jira/browse/JAVASERVERFACES-3194?focusedCommentId=376358&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-376358)で再修正したものがコミットされ、[2.2.8](https://java.net/jira/browse/JAVASERVERFACES/fixforversion/16964/?selectedTab=com.atlassian.jira.jira-projects-plugin:version-summary-panel)でリリースされるようなので、最新をビルドして試してみようと思います。

## おまけ

当初自分の実装の仕方や確認方法が悪いのでは..?と疑いました(今も疑っています)。
もし正しい実装方法があればご指摘いただきたいです。

## 参考サイト

* [JSF 2.2 ViewScope context not destroyed when View Map is destroyed](https://java.net/jira/browse/JAVASERVERFACES-3194)
* [Memory leak because of injecting @ViewScoped beans in @FlowScoped beans](http://blog.triona.de/development/jee/memory-leak-because-of-injecting-viewscoped-beans-in-flowscoped-beans.html)
ごらえもーん、Windowsのクリップボードからテキスト(unicode)取ってきてよ～

「<b>ほとんど、C言語じゃないか、だめだなぁ</b>」
「き、きっと、偉い人が "syscall" とか使って、き、綺麗に書き直してくれるんじゃないかな…」（震え声）

```clipboard.go
package conio

/*
#include "windows.h"

int readClipBoard( wchar_t *buffer , size_t size )
{
	int len=0;
	OpenClipboard(NULL);
    HANDLE hText=GetClipboardData(CF_UNICODETEXT);
    if( hText != NULL ){
        wchar_t *pText = (wchar_t*)GlobalLock(hText);
        if( pText != NULL ){
			while( pText[len] != 0 )
				len++;
			if( len >= size-1 ){
				len = size-1;
				pText[len] = 0;
			}
			memcpy( buffer,pText,(len+1)*sizeof(wchar_t));
            GlobalUnlock(hText);
        }
    }
    CloseClipboard();
	return len;
}
*/
import "C"
import "unsafe"
import "syscall"

func GetClipboardUtf16() []uint16 {
	var text [syscall.MAX_PATH]uint16
	length := C.readClipBoard((*C.wchar_t)(unsafe.Pointer(&text[0])), (C.size_t)(len(text)))
	return text[:length]
}

func GetClipboardString() string {
	return syscall.UTF16ToString(GetClipboardUtf16())
}
```

なお、ここにも、置いてます。
https://github.com/zetamatta/nyagos/blob/master/conio/clipboard.go
JavaScriptでArrayを空にする際に参照型だという事を注意する

JavaScriptでArrayを空にする際に、Arrayが参照型だという点に注意しないと失敗する(した)例です。

```js:javascript
$(function(){
	
	// 配列定義
	var array = [];
	
	$('.select').on('click', function(e){
		// 配列に値を入れる
		array.push($(this).html());
		alert(array);
	});
	
	$('#submit').on('click', {ary:array}, function(e){
		// 配列をalert
		alert(e.data.ary);
	});
	
	$('#reset').on('click', function(e){
		// 配列を空にする
		array = [];
	});
	
});
```
```html:html
<ul>
	<li class="select">A</li>
	<li class="select">B</li>
	<li class="select">C</li>
	<li class="select">D</li>
</ul>
<p id="reset">リセット</p>
<p id="submit">送信</p>
```

やりたい事は、
* selectというclassがついてるliをクリックすると、arrayという配列に値を入れていく。
* [送信]をクリックするとarrayの中身をalertする。
* [リセット]をクリックするとarrayの配列を空にする。



## 実際に上のプログラムを動作させてみます。
A→B→C→Dとクリックして[リセット]をクリックし、今度はA→C→B→Dとクリックして[送信]をクリックします。
すると、alertで[A, C, B, D]とはならず、[A, B, C, D]と表示されてしまいます。

liをクリックする毎にもalert表示させていますが、こちらでは、
[A]→[A, B]→[A, B, C]→[A, B, C, D]→[A]→[A, C]→[A, C, B]→[A, C, B, D]
とクリックした順に正しく表示されます。



## なぜ[A, C, B, D]とならないのでしょうか…。

これは、Arrayが参照型だからです。
`// 配列を空にする
array = [];`
の箇所が問題で、これはarrayを空にする処理ではなく、新たな配列をメモリ上のどこかに作成し、そのメモリ上の**【場所】**情報をarrayに入れている事になります。

`$('#submit').on('click', {ary:array}, function(e){
　　// 配列をalert
　　alert(e.data.ary);
});`
つまりこの箇所でfunctionにaryとして渡しているのは、arrayという配列ではなく、arrayという変数に格納されている、配列の**【場所】**情報になりますので、このonが定義された時点での参照先にある配列は、リセットする前に参照していた配列という事になります。
※なのでここでalert(array)としてみると、きちんと[A, C, B, D]と表示されます。

## まとめ
配列を空にしたい場合は、
`array = [];`
や、
`array = new Array();`
とするのではなく、
`array.length = 0;`
とする方が良さそうです。
【メモ】<none>なタグのイメージを全部消す

Dockerで何度かイメージをビルドしてると、こういうゴミイメージが溜まっていきます。意外と容量食うので一括で消してしまいたい。

今までは
`docker rmi $(docker images | awk '/^<none>/ { print $3 }')`
としてたんですけど、何気なく[ドキュメント](https://docs.docker.com/reference/commandline/cli/)を眺めてたら、書いてました。

`sudo docker rmi $(sudo docker images -f "dangling=true" -q)`

適当にエイリアス張るなりcronで回すとちょっと捗るかもしれない。
appcompatのソースがAndroidStudioにアタッチされなくて辛い時

ソースが無いのでアタッチされない(´・ω・｀)ｼｮﾎﾞｰﾝ

ちなみにAndroid Support RepositoryのRevは6

```shell-session
# $ANDROID_HOME/extras/android/m2repository/ 以下を適当に

.//com/android/support/cardview-v7/21.0.0-rc1/cardview-v7-21.0.0-rc1-sources.jar
.//com/android/support/leanback-v17/21.0.0-rc1/leanback-v17-21.0.0-rc1-sources.jar
.//com/android/support/recyclerview-v7/21.0.0-rc1/recyclerview-v7-21.0.0-rc1-sources.jar
.//com/android/support/support-annotations/19.1.0/support-annotations-19.1.0-sources.jar
.//com/android/support/support-annotations/20.0.0/support-annotations-20.0.0-sources.jar
.//com/android/support/support-annotations/21.0.0-rc1/support-annotations-21.0.0-rc1-sources.jar
.//com/android/support/support-v13/13.0.0/support-v13-13.0.0-sources.jar
.//com/android/support/support-v13/18.0.0/support-v13-18.0.0-sources.jar
.//com/android/support/support-v13/19.0.0/support-v13-19.0.0-sources.jar
.//com/android/support/support-v13/19.0.1/support-v13-19.0.1-sources.jar
.//com/android/support/support-v13/19.1.0/support-v13-19.1.0-sources.jar
.//com/android/support/support-v13/20.0.0/support-v13-20.0.0-sources.jar
.//com/android/support/support-v13/21.0.0-rc1/support-v13-21.0.0-rc1-sources.jar
.//com/android/support/support-v4/13.0.0/support-v4-13.0.0-sources.jar
.//com/android/support/support-v4/18.0.0/support-v4-18.0.0-sources.jar
.//com/android/support/support-v4/19.0.0/support-v4-19.0.0-sources.jar
.//com/android/support/support-v4/19.0.1/support-v4-19.0.1-sources.jar
.//com/android/support/support-v4/19.1.0/support-v4-19.1.0-sources.jar
.//com/android/support/support-v4/20.0.0/support-v4-20.0.0-sources.jar
.//com/android/support/support-v4/21.0.0-rc1/support-v4-21.0.0-rc1-sources.jar

```

仕方ないから下記みたいに
* てきとーな場所に
* 適当に落として
* 適当なtagとかにチェックアウトして
アタッチする

```shell-session
git clone https://android.googlesource.com/platform/frameworks/support/
```

appcompat以外にもsources.jarが無いやつあるので、その時は同様にアタッチすれば良いと思う

けど、これ昔からなかったんだっけ？？