OmniAICreator/Qiita-1.07M huggingface dataset:
Wordpressのドメインを移行する為のDB置換ツール


# stigma

```
          __  .__
  _______/  |_|__| ____   _____ _____
 /  ___/\   __\  |/ ___\ /     \\__  \
 \___ \  |  | |  / /_/  >  Y Y  \/ __ \_
/____  > |__| |__\___  /|__|_|  (____  /
     \/         /_____/       \/     \/
```

[hikouki/stigma](https://github.com/hikouki/stigma)

Wordpressでドメインを変更する際、Database内に含まれるドメイン情報を置換する必要があります。
MySQLだけ置換できるツールは存在しますが、SQLiteのデータを置換できるツールがなかったため作りました。
現状、SQLiteにしか対応できてませんがMySQL、PostgreSQLにも対応予定です。

# インストール

```
composer global require hikouki/stigma
```

# 使い方

Usage:

```
$ stigma <database_file_path> <target> <replace>
```

Example:

```
$ stigma ./ht.sqlite localhost 160.122.111.11
```
シードをCSVで管理


自分の備忘用

> db/seeds/items.csv

みたいにCSVファイルを用意

```seeds.rb
csv_import_models =
  if ENV['models']
    ENV['models'].split(',')
  else
  	%w(item company)
  end

csv_import_models.each do |model_name|
  puts const = model_name.camelize.constantize

  const.transaction do
    ids = []

    CSV.foreach(
      Rails.root.join("db/seeds/#{model_name.pluralize}.csv"),
      headers: true
    ) do |csv_row|
      ids << id = csv_row.to_hash['id']
      record = const.find_or_initialize_by(id: id)
      record.update!(csv_row.to_hash.select{|k, _| k.in?(const.column_names) })
      puts "=> #{record.inspect}"
    end

    const.where.not(id: ids).destroy_all
    
    ActiveRecord::Base.connection.execute("ALTER SEQUENCE #{model_name.pluralize}_id_seq RESTART WITH #{ids.map(&:to_i).max + 1}")
  end
end
```

のようにしておく。CSVにはID列も入れることで何回流しも大丈夫なようになる


```
$ rake db:seed models=item,company
```

みたいに指定してシード更新可能

*2016/5/19 追記*
IDを含めてシードを流してもxxx_id_seqが1のままだったので、画面等、シード以外から新たにレコードを追加しようとするとID=1で追加しようとしてユニーク制約でエラーが出ていた(postgres)。
`ALTER SEQUENCE ...` の部分追記


### ActiveAdmin

```rb
module SeedExportable
  def self.included(base)
    base.send(:collection_action, :seed_csv) do
      # model = base.instance_variable_get(:@resource)
      model = base.config.resource_name.instance_variable_get(:@klass)
      exclude_columns = %w(created_at updated_at)

      csv = CSV.generate(force_quotes: true) do |csv_row|
        columns = model.column_names.reject{|c| c.in?(exclude_columns) }

        csv_row << columns
        model.all.each do |r|
          attributes = r.attributes.values_at(*columns)

          # enum は 変換後の値が出るように
          columns.each_with_index do |column, i|
            if model.defined_enums[column]
              attributes[i] = r.send(column.to_sym)
            end
          end

          csv_row << attributes
        end
      end

      send_data csv, filename: "#{model.to_s.tableize}.csv"
    end

    base.send(:action_item, :seed_csv, only: :index) do
      link_to('シード用CSV出力', action: :seed_csv, format: :csv)
    end
  end
end
```

のようにモジュールを定義。


```item.rb
ActiveAdmin.register Item do
  include SeedExportable
```

でインクルードするとシード用のCSVを吐き出す。管理画面から入力したものを取り込みたいときに使う
angular-cliのgithub-pages:deploy時のbaseディレクトリの設定


package.jsonのnameと対応している。

* angular-cli 1.0.0-beta.1

### もっとくわしく

angular-cliは

```
$ ng github-pages:deploy
```

でGitHubPagesにデプロイできる。ただし、プロジェクト名とリポジトリ名が一致していない場合、デプロイされたアプリがうまくうごかない。
index.htmlの`<base href="/">`の部分を空気読んで置換してくれているが、元にするのがプロジェクトの名前のため、javascriptの参照に失敗する。


https://github.com/angular/angular-cli/blob/master/addon/ng2/commands/github-pages-deploy.ts#L158

```
        .then((data) => data.replace(/<base href="\/">/g, `<base href="/${projectName}/>"`))
```
Unity研修

## スライド使ってお話し
10分くらい

## 触ってみよう
### プロジェクトの作成
1. Unityを起動する。(セキュリティの警告はアクセス許可)
2. 「NEW」をクリック
3. 上がプロジェクト名、下が保存するフォルダ。適当に入力してエンター
4. プロジェクトできました。
5. 右上の「Layout」をクリックして、「2 by 3」に変更。

### エディタの説明
1. Sceneビュー
オブジェクトがどのように配置されているかをGUIで確認/調整できるビュー
	
2. Hierarchyビュー
オブジェクトをツリーで確認できるビュー	

3. Inspectorビュー
オブジェクトの詳細を確認/調整できるビュー

4. Projectビュー
プロジェクトにふくまれているファイルの一覧を確認できるビュー

5. Gameビュー
ゲームが起動した時に見ることができるビュー

6. Consoleビュー
UnityEditorの実行ログとか、プログラムのコンパイル結果とかが表示されるコンソール

### 作成
1. オブジェクトの作り方
GameObject > 3D Object > Cube
ゲームオブジェクトとトランスフォーム

2. Sceneビューで確認
マウスロールとかして拡大とかできます。
ヒエラルキーの項目をクリックして矢印表示

3. 各ツールの紹介
alt+各クリックでいろいろできる
 - 手ツール
	左クリックで視点操作
 - 矢印ツール
	オブジェクトの座標移動 x y z
 - 回転ツール
	オブジェクトの回転操作 x y z
 - スケールツール
	オブジェクトの拡縮操作 x y z
 - 万能ツール
	オブジェクトの全部操作 x y z

4. Sceneビューの2D表示
	Gameビュー3:2
5. キューブを一旦削除して、再作成
	Transformを初期化。
6. カメラの設定変更
 - ClearFlag
	SolidColor
 - Projection
	Orthographic
 - Size
	XYの調整です
	15くらいにセット
		
7. Cube で壁作る
 - 天井
	Wall roof Sceneビューで拡大して位置を移動
	Inspectorで微調整
 - 左壁
	Cube作成して
	Wall left いじって配置
	右壁もついでにコピーして作成
 - 床作成
	天井コピーして移動してくる
名前変更
    ・Wall Roof
    ・Wal Left
    ・Wall Right
    ・Wall Floor
	
8. 親オブジェクトを作成
	Unityはオブジェクトをツリー構造にできるので、Wallオブジェクトを作成してWall~を格納する
	CreateEmpty で作成する
	
9. Wallの子にする
	Shiftで4つ選択してD&D
	
10. Root作ってWallを突っ込む
11. ユーザーが操作するバーを作る
	Playerオブジェクト作ってBar(Cube)を作る
	PlayerオブジェクトはEmpty BarはCube(位置調整して大きさ調整)
12. Ballオブジェクト作成
	Sphereで作成 Ballに名前を変更
13. Rigidbodyをつける
	重力体感
14. PhysicsMaterial作成
	Bar を作成
15. Barに設定
	BarのBoxColliderのMaterialにPlayerBarを設定
16. Bounceを1に設定する
17. BounceCombineをMaxmumに
18. 天井に当ててみる
19. roof にBarを設定
20. 再生中にセットすると停止した時に元に戻るので、注意
21. 再度セット
22. 他の壁にもセット
23. Ballの重力消す
24. Ballを動かすスクリプトを書く
	AddComponent > New Script
	C Sharpであることを確認して
	-> Create and Add
25. Ball.csを開く
26. AddForce()メソッドを作成する。(public)ついでにpower定義※1
	StartとUpdate
27. Start()でAddForceを呼び出す。ボールのposition変更しておく
28. BarのFrictionを0にする
29. Playerを動かす
	スクリプト作ります。
	Input制御 右と左 ※2
30. スピード調整します
	speed調整用の変数用意 ※3
31. 移動制限つけます
	移動の限界座標を確認
	移動制限をつけて、座標更新 ※4
32. Blockの親とBlock子を作成する
33. PhysicsMaterialをつける
34. Blockのスクリプト作成
	OnCllisionEnter 衝突した時
	SetActive() アクティブ切り替え
	Destroy() ターミネイト

35. Block量産
			
36. ボールの反射向きを左下に変更してみる。※6

ここまでで基本動作


### ゲームにしていく
#### ゲームオーバー
1. Playerに死亡ステータス ※7

2. GameManagerの作成（Empty）
3. スクリプトをつける（GameManager）
ゲームオーバー処理とstaticインスタンス ※8
4. GameManagerにText(uGUI)を設定
5. 死亡タイミングの作成
どんなタイミング？
Floorスクリプトを作成※9
9. Ballを止める※10
10. ゲームオーバー時に呼び出す※11
11. GameManagerにBallを設定
6. GameManagerにPlayerを設定
7. スコア管理※12
加算処理を行うのは、ゲーム管理クラス
8. Block壊れた時にスコア送信※13
12. 成績表示
ugui
	Textオブジェクトを用意
13. GameManagerにTextを用意し、初期化※14
14. GameManagerにTextを設定して再生
15. おしまい

#### 最高スコア
1. GameManagerの処理変更※15
2. やってみよう

#### 再スタート
1. GameManagerにRestartメソッドを用意※16
2. BallにWakeUpを用意※17
3. PlayerにWakeUpを用意※18
4. GameManagerで制御※19
【イベントレポート】Security Night #1で感じた事

[Security Night #1(2016/05/11開催)](http://secnight.connpass.com/event/30672/)に参加してきました。テーマは「今だからこそ学びなおすSSL/TLS脆弱性の中身と対策！」で、発表資料とまとめはこちら。

https://speakerdeck.com/benzookapi/pci-dss-v-3-dot-2nidui-surudui-ying
http://www.slideshare.net/fujya/ss-61941853
http://www.slideshare.net/hkiriyam/security-night-1-aws-security-approach-and-tls

内容については資料やリンクを見てもらえば分かるので、今回感じた事を。

セキュリティという技術領域自体で基本的には「機能」は生み出さない。ただし全てのサービスに漏れなく必須なものである。これはセキュリティはサービスアプリケーションそのものではないので、その意味ではインフラの一部と定義する事ができる。さらにムーアの法則に比例して、脅威や様々なリスクも時事刻々と連携変化しており、例えば脆弱性の発見やサイバーセキュリティ問題などと領域が静的でなく、常に変化する動的なもの。つまり**インフラなのに動的**。シャノン藤倉さんの話を聞いていても感じたが**そもそもセキュリティは市場サービスや、ツール類の進化に合わせ、そのスイートスポットも変化していくもの**であるので、とても難解になりがちである。これはまさに勉強会でオープンに助け合って、共有し合うべきテーマだなと感じます。

一方、AWSのセッションで「責任共有モデル」の解説があった。そもそもこれからのサービス開発はサービス提供企業、エンジニアリング企業、ソリューションベンダーが同じ目線に立つ事が必要なんだと思います。一緒に責任を共有するからこそ本質的に対応できる。責任共有モデルの詳細は[こちら](http://www.slideshare.net/c95029/awsshared-responsibility-model-16612378)。

つまりインフラがより複雑化して共通・共有化されて、サービスアプリケーションのみに特化する事が出来る今の開発手法の中では、オープンに共通、共有できる勉強会を通して責任共有モデルのベースラインとインフラ知識をオープンに作り上げる事が大切なんだろうなと感じました。


Security Nightの今後は

・PCIDSS
・アカウント認証
・AIとセキュリティの関係
・IoTにおけるセキュリティ

などを計画中という事で、ぜひぜひ継続して参加したいです。
java SimpleDateFormat で UTC 取り扱い例




```java:HelloSimpleDateFormat4Main.java
package hello;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Locale;
import java.util.TimeZone;

public class HelloSimpleDateFormat4Main {

	public static void main(String[] args) throws Exception {
		// Fri May 13 01:18:07 UTC 2016

		String s = "Fri May 13 01:18:07 UTC 2016";

		SimpleDateFormat formatter = new SimpleDateFormat(
				"EEE MMM dd HH:mm:ss z yyyy", new Locale("en"));

		SimpleDateFormat formatter2 = new SimpleDateFormat(
				"yyyy-MM-dd HH:mm:ss z", new Locale("en"));
		{
			Calendar cal = Calendar.getInstance(TimeZone.getTimeZone("UTC"));
			formatter2.setTimeZone(cal.getTimeZone());
		}
		{
			Date d = formatter.parse(s);
			System.out.println(d);
			System.out.println(formatter2.format(d));
		}

	}

}
```

実行結果

Fri May 13 10:18:07 JST 2016
2016-05-13 01:18:07 UTC
Javaで１日後・１日前みたいなのを計算する方法

## １日後

```java
Calendar cal = Calendar.getInstance();
cal.add(Calendar.DATE, 1);
```

## １日前

```java
Calendar cal = Calendar.getInstance();
cal.add(Calendar.DATE, -1);
```

## １ヶ月後

```java
Calendar cal = Calendar.getInstance();
cal.add(Calendar.MONTH, 1);
```

## １年進める

```java
Calendar cal = Calendar.getInstance();
cal.add(Calendar.YEAR, 1);
```
zincを入れてSparkのincremental compileをする。

zincのbinaryをdownload

```
wget http://downloads.typesafe.com/zinc/0.3.9/zinc-0.3.9.tgz

```

zinc serverを起動

```
cd zinc-0.3.9
./bin/zinc -nailed

```

起動確認

```
./bin/zinc -status

Nailgun server running with 1 cached compiler

Version = 0.3.9

Zinc compiler cache limit = 5
Resident scalac cache limit = 0
Analysis cache limit = 5

Compiler(Scala 2.11.8) [7728f2aa]
Setup = {
....   }
....

   java home = 
   fork java = false
   cache directory = /Users/a14350/.zinc/0.3.9
}

```

sparkのbuild時の確認

```

...
[INFO] --- scala-maven-plugin:3.2.2:compile (scala-compile-first) @ spark-catalyst_2.11 ---
[INFO] Using zinc server for incremental compilation
[warn] Pruning sources from previous analysis, due to incompatible CompileSetup.

...

```
VisualStudio2015ビルドで勝手に埋め込まれる怪しいコード

Visual Studio 2015でビルドされた実行可能ファイルでは、ランタイムライブラリ`vcruntime140.dll`の下記関数を呼び出すコードが勝手に埋め込まれる。

- `__telemetry_main_invoke_trigger`
- `__telemetry_main_return_trigger`

関数名に telemetry／遠隔測定 といういくぶん不穏な単語が含まれているが、[ETW(Event Tracing for Windows)によるロギング処理](https://msdn.microsoft.com/en-us/library/ms751538.aspx)用途とのこと。ただし、同関数を機能させるため`ADVAPI32.dll`への依存が生まれてしまう。

従来通り同機能を無効化するには `notelemetry.obj` をリンクする。

- https://www.reddit.com/r/cpp/comments/4hoyzr/msvc_mutex_is_slower_than_you_might_expect/d2thalz
- https://np.reddit.com/r/cpp/comments/4ibauu/visual_studio_adding_telemetry_function_calls_to/d2x6dau
- https://connect.microsoft.com/VisualStudio/feedback/details/1852848/unexpected-dependency-of-advapi32-dll-when-statically-linking-the-runtime-library
認証付きプロキシを超えるようにcapybaraでブラウザ自動テストを実装

# 背景
* 認証付きプロキシを超えないといけない
* capybara + selenium webdriverで、google.co.jpへアクセステストを実行したい
* ubuntu上に、プロキシサーバーを構築できた
    * http://qiita.com/alingogo/items/9c216bb7edc2d94d192e

# ゴール
* 以下のテストが通る

```
describe "google" do
  before do
    visit '/'
  end

  context "トップページ" do
    it { expect(page).to have_content('Google') }
  end
end
```

# 経過

### プロキシサーバーを構築

* 参照： http://qiita.com/alingogo/items/9c216bb7edc2d94d192e
* local_proxy環境変数を追加
    * vi ~/.bashrc

```
export local_proxy=127.0.0.1:3128
```

* source ~/.bashrc

### gemバージョン

```
group :development, :test do
  gem 'capybara',         '2.7.1'
  gem 'selenium-webdriver', '2.53.0'
```

* selenium-webdriverのバージョンを最新にしよう
    * http://qiita.com/tatsuyard/items/873ce404fecc276ef05c


### テストファイル構成

```
rails root
  |---> spec
         |--->その他の単体テスト
         |--->features
               |--->supprot/feature_helper.rb
               |--->test_spec.rb
```

### spec/features/support/feature_helper.rb

```
require 'capybara/rspec'
require 'selenium-webdriver'

ENV['HTTP_PROXY'] = ENV['http_proxy'] = nil
Capybara.register_driver :remote_firefox do |app|
  local_proxy = ENV['local_proxy'] || ENV['LOCAL_PROXY']
  profile = Selenium::WebDriver::Firefox::Profile.new
  profile.proxy = Selenium::WebDriver::Proxy.new( :http => local_proxy, :ssl => local_proxy)
  Capybara::Selenium::Driver.new(app, :profile => profile)
end

Capybara.default_driver = :remote_firefox
Capybara.app_host = 'http://www.google.co.jp'

RSpec.configure do |config|
  config.include Capybara::DSL
end
```

* 補足1
    * ENV['HTTP_PROXY'] = ENV['http_proxy'] = nil
    * http://stackoverflow.com/questions/11151222/unable-to-connect-to-browser-using-ruby-selenium-webdriver


### spec/features/test_spec.rb

```
require File.expand_path(File.join(%w(support feature_helper)), File.dirname(__FILE__))

describe "google" do
  before do
    visit '/'
  end

  context "トップページ" do
    it { expect(page).to have_content('Google') }
  end
end
```

# 確認

```
$ bundle exec rspec spec/features/test_spec.rb 
.
Finished in 6.31 seconds
1 example, 0 failures
```

# 参照
### もう一度読めよ
* http://qiita.com/oh_rusty_nail/items/b8ba525d31ea7c522856
* http://qiita.com/awakia/items/2d9a70af86bc3488b241
* http://qiita.com/jnchito/items/607f956263c38a5fec24

### 問題解決
* http://stackoverflow.com/questions/15148585/undefined-method-visit-when-using-rspec-and-capybara-in-rails
* http://stackoverflow.com/questions/16278597/using-poltergeist-with-a-proxy
* http://stackoverflow.com/questions/2887978/webdriver-and-proxy-server-for-firefox
* http://qiita.com/sanryuu/items/5b1b4794f5fd3b26679c

### example
* https://gist.github.com/kitak/6884047

### rails3
* http://techiferous.com/2010/04/using-capybara-in-rails-3/
JavaScriptでsetIntervalを使う練習

<img src="https://qiita-image-store.s3.amazonaws.com/0/20635/b280a62c-757d-316d-9c52-c0543d804790.jpeg" width="auto" height="300px">

javascriptのsetIntervalと、jQueryを使用して、60秒タイマーアプリを作成
10秒間隔で、背景と文字色が変更する


```lang:html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>real time</title>
    <style>
        body{
                margin: 100px auto;
                line-height: 180px;
                font-size: 18px;
                font-weight: bold;
                background-color:black;
        }
    </style>
</head>

<body>
    <div id="count"></div>
<script>
    function foo(x) {
        return (x < 10) ? '0' + x : x; }
    function clock(){
        var now   = new Date();
        var year  = now.getFullYear();
        var month = now.getMonth()+1;
        var date  = now.getDate();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();
        var t =  foo(s);
        
        if(s>=0 && s<=9){
            document.querySelector("div").style.backgroundColor = "red";
            document.querySelector("div").style.color = "white";
        }else if(s>=9 && s<=19){
            document.querySelector("div").style.backgroundColor = "yellow";
            document.querySelector("div").style.color = "blue";
        }else if(s>=19 && s<=29){
            document.querySelector("div").style.backgroundColor = "green";
            document.querySelector("div").style.color = "white";
        }else if(s>=29 && s<=39){
            document.querySelector("div").style.backgroundColor = "white";
            document.querySelector("div").style.color = "black";
        }else if(s>=39 && s<=49){
            document.querySelector("div").style.backgroundColor = "darkorchid";
            document.querySelector("div").style.color = "yellow";
        }else if(s>=49 && s<=59){
            document.querySelector("div").style.backgroundColor = "blue";
            document.querySelector("div").style.color = "orange";
        }else{
            document.querySelector("div").style.backgroundColor = "black";
            document.querySelector("div").style.color = "orange";
            document.querySelector("div").fontSize = "100px";
        }
        document.querySelector("div").innerHTML = t;
        document.querySelector("div").style.fontSize = "150px";
        document.querySelector("div").style.textAlign = "center";
        document.querySelector("div").style.padding = "150px";
　　}
      setInterval(clock, 1000);
</script>
</body>
</html>
```
実務でよく使うGitコマンド


## git add .
ファイルを良い感じに上げる

## git add -p
ファイルを部分ごとに上げる

## git reset HEAD
addの取り消し

## git commit -m "" 
メッセージ付けてコミットする

## git status
現在の状況を見る
## git branch
ブランチを見る

## git branch -a
リモートブランチまで見る

## git checkout 
ブランチ切り替える

## git co -b ○○
ブランチ作って切り替え

## git diff
差分を見る

## git stash
ファイルを一時隠す

## git stash -p
ファイルをコード部分で隠す

## git clone
githubから落とす

## git pull
リモートブランチからダウンロードしてマージする

## git fetch
リモートブランチからダウンロード

## git merge
マージする

## git push
プッシュする

## git revert
コミットの差分を打ち消すコミットをする

## git log
ログを見る
angular-cliでつくった雛形にangular2-materialを追加したときのメモ


[angular-cli](https://github.com/angular/angular-cli)のv1.0.0.beta.1でつくったプロジェクトに[angular2-material](https://github.com/angular/material2)を追加した。

説明がなさすぎて「SystemJSわかるでしょ?」みたいな空気を感じたし、正しい使い方のどうかは知らないが記録しておくと役に立つかもしれないので記録しておく。

ためしたのはmd-toolbar。
こんな風につかいたい。

```
<md-toolbar color="primary">
  <span>{{title}}</span>
</md-toolbar>
```

# 作業内容

まず、npmでangular2-materialのcoreとつかいたいコンポーネントをいれる。

```
$ npm install --save @angular2-material/core @angular2-material/toolbar
```

どんなコンポーネントがあるかは[npmのangular2-material](https://www.npmjs.com/~angular2-material)を見ればいい気がする。[ソースとか](https://github.com/angular/material2/tree/master/src/components)みたほうが早いかもしれない。

つづいて、ビルド時に`dist`ディレクトリにangular2-materialが配置されるようにするんだと思われる設定を`angular-cli-build.js` に加えた。

```diff
 module.exports = function(defaults) {
   return new Angular2App(defaults, {
     vendorNpmFiles: [
       'systemjs/dist/system-polyfills.js',
       'systemjs/dist/system.src.js',
       'zone.js/dist/*.js',
       'es6-shim/es6-shim.js',
       'reflect-metadata/*.js',
       'rxjs/**/*.js',
-      '@angular/**/*.js'
+      '@angular/**/*.js',
+      '@angular2-material/**/*.js'
     ]
   });
 };
```

つづいて、src/system-config.tsを設定する。

packages定数を修正した。

```src/system-config.ts
const packages: any = {
  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  },
  '@angular2-material/toolbar': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'toolbar.js'
  },
};
```

あとSytem.configのmapに@angular2-materialの設定を加えた。

```diff
 System.config({
   map: {
     '@angular': 'vendor/@angular',
+    '@angular2-material': 'vendor/@angular2-material',
     'rxjs': 'vendor/rxjs',
     'main': 'main.js'
   },
```

たぶんビルド時にvendor/@angular2-materialにファイルが配置されるので、それを `@angular2-material`でインポートできるようにパスのマッピングをしているんだろう。

これでインポートできるようになってるはずなのでmd-toolbarをつかいたいcomponentでimportしてディレクティブにいれてあげたら使えた。

```
import { Component } from '@angular/core';
import { MdToolbar } from '@angular2-material/toolbar';


@Component({
  moduleId: module.id,
  selector: 'hoge',
  templateUrl: 'hoge.component.html',
  styleUrls: ['hoge.component.css'],
  directives: [MdToolbar],  // MdToolbarを追加
})
export class HogeAppComponent {
  title = 'ほげ';
}
```

```hoge.component.html
<md-toolbar color="primary">
  <span>{{title}}</span>
</md-toolbar>
```

angular2もSystemJSもまだよくわかってないので正確性は不明。
deviseのユーザー退会時に論理削除する

# 概要
- deviseでログイン機能を追加している
- ユーザー退会時には、userのレコードをすぐに削除するのではなく、leave_atに退会時刻を追加の上、一定期間を置いてから削除する
- また、退会ユーザーが同メールアドレスで登録する可能性を踏まえ、メールアドレスの頭に文字列を追加する
- OAuth認証している場合は、uidにも同様の処理をする

# コントローラー

``` registrations_controller.rb
  def destroy
    # userモデルのleaveメソッド
    resource.leave
    Devise.sign_out_all_scopes ? sign_out : sign_out(resource_name)
    set_flash_message(:notice, :destroyed)
    yield resource if block_given?
    respond_with_navigational(resource){ redirect_to after_sign_out_path_for(resource_name) }
  end

```

# モデル
``` user.rb
  def leave
    #leave_atに退会時刻を追記
    update_attribute(:leave_at, Time.current)

    # また、userのメールアドレスの頭にleave_atを追加する。
    # メールアドレスを変更すると原則確認メールが送信されるため、
    # 送信をスキップすることを宣言した上でupdateする。
    new_email = self.leave_at.to_i.to_s + '_' + self.email.to_s
    self.skip_reconfirmation!
    update_attribute(:email, new_email)

    # また、social_profilesが存在する場合はuidの頭にもleave_atを追加する
    # fb,twitter両方連携されている場合があるため、each doしている。
    social_profiles = self.social_profiles
    social_profiles.each do |sp|
      new_uid = self.leave_at.to_i.to_s + '_' + sp.uid.to_s
      sp.update_attribute(:uid, new_uid)
    end
  end
```

# 参考ページ
下記のページを参考させていただきました。


[Deviseにてシステムからユーザーのメールアドレスを変更してもメールを送信しない](http://blog.mkt-sys.jp/2015/12/devise-skip-reconfirmation.html)

[Rails4.2 で devise + paranoia を使った論理削除後に同じメールアドレスで登録しようとした場合のユニーク制約を回避する方法（案）](http://qiita.com/egopro/items/7cf14742f0089793ab70)
GBでActionBarの高さを取得する


ActionBarの高さはHoneyCome以降だとR.attr.actionBarSizeで取得できますがそれ未満だと0が返ってきます。
その場合supportライブラリの値から取得できます。

```java:
 if (Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
    context.getTheme().resolveAttribute(android.support.v7.appcompat.R.attr.actionBarSize, tv, true)
    int actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data,getResources().getDisplayMetrics());
 }
```

今更使うことなさそうだけどね
（勝手宣伝）　お試しLinux環境、WattOSもお勧め

#最近の軽量Linuxの世界
Dockerコンテナ界隈で別の意味で盛り上がっている軽量Linux。
もともとは、古いPCで快適に使えるOSとして、いろいろとした取り組みがあるもの[軽量Linux まとめの例](http://matome.naver.jp/odai/2140929233370560201).

Docker学習の"母艦"となる軽量OSが欲しいと思い調べてみたところ、
いろいろ成熟した選択肢が定着していること(LinuxMint/Lubuntu etc.)からマニアな人があえて書くほどでなったためか、あるいは、業務系な世界とは真逆の趣味的な話が強いために書くのが面倒なのか
ネット上でお試しレポートが少ないと感じた。

Windows10とのデュアルブート環境として、LinuxMint/Lubuntuと同様にUbuntuベースなWattOSを試して見たところ、日常使いもいけそうな快適さだったので少しだけレポートを。


#WattOSインストール例
結果を箇条書き的に。
インストールそのものはWattOS R9のものを参考にしてほしい。
Ubuntuベースだけにインストール時からwifi接続にはまったく問題はなかった。

## 一通りインストールしたのちのディスク使用量は3.5GB

元々入っているFirefox,メディアプレ－ヤーの他、
apt-get installで、Docker,エディタ(atom),日本語龍力環境(iBus+Anthy(親指シフト))、便利スクリーンショットShutterなどをインストール後:


```sh
$ df -h
Filesystem      Size  Used Avail Use% Mounted on
udev            3.9G  4.0K  3.9G   1% /dev
tmpfs           787M  1.1M  786M   1% /run
/dev/sda4        11G  3.5G  6.9G  34% /
none            4.0K     0  4.0K   0% /sys/fs/cgroup
none            5.0M     0  5.0M   0% /run/lock
none            3.9G  6.1M  3.9G   1% /run/shm
none            100M  8.0K  100M   1% /run/user
/dev/sda2       281G  242G   39G  87% /windows
```

※apt-get clean後

## Windows側のNTFSをファイル置き場にした
AndroidStudioとかwindows.oldとかのせいで、もう87%もディスク使ってしまったといいつつ、まだ40GB近く容量に余裕があるndows側のNTFSを、/windows以下のファイル置き場とした。
windows側のMP3/動画も一通り使えて快適。

この設定は、Ubuntuと同様にインストール時に行う。


##日常使い時のメモリ使用量は2GB程度
古いPCに入れる方はこのあたりしゃかりきに削るのだろうが、普段AndroidStudio+エミュレータで8GBの壁と戦っているwindows機なので、ディフォルトのLXDEのまま富豪的に使っている。

#Windowsでの消耗に疲れた晩にどうぞ。
WattOS R9、Windows10上でVMware/virtualbox/hyper-V的な何かを使っている方なんかにおすすめしておきたい。

windowsキー+D / windowsキー+Rなどのショートカットもそれなりに使えたりする。
なんといっても起動とOSアップデートが圧倒的に軽い。

LXDE版WattOS R9のデスクトップ画面を、わざとらしくさらけだしておく:
![desktop 2_004.png](https://qiita-image-store.s3.amazonaws.com/0/16455/a8b8cd87-0a57-49a6-60cd-fe016e19d9d6.png)

もちろん多少不満なところもあったりするのだけれど、WattOSだけで一晩過ごせと言われても何とかなる感じ。
技術英語 > Each one the size of just [10 lined-up] bacteria

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

> a fleet of microscopic, self-propelled, aquatic robots. Each one the size of just <font color=red>10 lined-up</font> bacteria

http://ejje.weblio.jp/content/lined+up

「bacteria を10個並べた大きさ」という訳がつくのだろう。
【これは便利！】Gemfile や package.json に書かれたライブラリの Github ページに飛べるようにする Extension

[GitHub Boxcutter](https://chrome.google.com/webstore/detail/boxcutter/knapnimomamjogbajmmoefhopnebjbff)

便利で感動した！

![image](https://qiita-image-store.s3.amazonaws.com/0/41416/f3a11781-270d-dd31-13c1-c7c2379fd557.png)

GitHub Boxcutter は、Github のための Chrome Extension で、例えば上の画像は [Rails](https://github.com/rails/rails/blob/master/Gemfile) の Gemfile の Github ページですが、ここから `rake` や `mocha` など、書かれている Gem の Github ページに、直接飛べるようになるExtension です。

package.json や bower.json に書かれているライブラリも同様にリンクになって、そこからジャンプできるようになります。
使われている Gem, Package の調査などにいいですね！

横幅を広くして、PR を見やすくしてくれる [github.expandinizr](https://chrome.google.com/webstore/detail/githubexpandinizr/cbehdjjcilgnejbpnjhobkiiggkedfib) や、見る必要のないファイルの差分を閉じて、非表示にできる [Pretty Pull Requests](https://chrome.google.com/webstore/detail/pretty-pull-requests-gith/ljnjpkadhhcdniohpfilddnhahoigdec) などもレビューの際にとても便利ですが、GitHub Boxcutter が一番感動しました！

是非、入れてみて下さい！
Riot.jsを触ってみた


[日本語公式](http://riotjs.com/ja/)
[github](https://github.com/riot/riot)


## 動機

[Riot.jsでフロントエンドの複雑さに反乱するときがやってきた](http://qiita.com/aggre/items/928eb2bedbac6a7829c0)というタイトルに強く惹かれたから
riot=暴動、という意味

## Riot.jsとは

仮想DOMを利用したjavascriptのUIライブラリで、標準に近い文法で書かれており必要最小限の機能しか持たないため軽く、web componensライクなもの

v2.4:2016/05 now !
v2.0:2015/01
v1.0:2014/04
v0.9:2013/11

## ソース比較

公式より

```Javascript:react
import React from 'react';
import ReactDOM from 'react-dom';

class Todo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {items: [], text: ''};
    }

    render() {
        const {items, text} = this.state;
        return (
            <div>
                <h3>TODO</h3>
                <ul>
                    <li>{items.map((item, i)=> <li key={i}>{item}</li>)}</li>
                </ul>
                <form onSubmit={this._onSubmit}>
                    <input onChange={this._onChange} value={text}/>
                    <button>Add #{items.length + 1}</button>
                </form>
            </div>
        );
    }

    _onChange(e) {
        this.setState({text: e.target.value});
    }

    _onSubmit(e) {
        e.preventDefault();
        const {items, text} = this.state;
        this.setState({
            items: items.concat(text),
            text: ''
        });
    }
}

ReactDOM.render(<Todo/>, mountNode);
```

```Javascript:riot
<script type="riot/tag">
<todo>
  <h3>TODO</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ handleSubmit }>
    <input>
    <button>Add #{ items.length + 1 }</button>
  </form>

  this.items = []

  handleSubmit(e) {
    var input = e.target[0]
    this.items.push(input.value)
    input.value = ''
  }
</todo>
</script>


<todo></todo>
<script>riot.mount('todo')</script>

```

直感的にわかりやすい！
公式では
```<script type="riot/tag"></script>```の部分は別にしていますが、見やすさのために一緒にしてみました

## メリット

+ HTMLに近いので非エンジニアにも馴染みやすい
+ サイズが小さく(reactの1/5でriot.min.js:9.18KB)モバイルに強い
+ 学習コスト低そう


## コンパイル
riotタグはブラウザ側で自動でjavascriptに変換される(compile用のjsを要指定)
事前にコンパイルすることも可能

コンパイルあり：https://cdnjs.cloudflare.com/ajax/libs/riot/2.4.0/riot+compiler.min.js
コンパイルなし：https://cdnjs.cloudflare.com/ajax/libs/riot/2.4.0/riot.min.js



## 感想
コンポーネント化するとcssでclassを用意しなくて済むとか面白い！
Web Componentsを少し体感できる！
NGINX+HTTPS(SSL)+PHPのサーバーでのiOS(WebKit)におけるロケーションヘッダーの挙動メモ

自鯖でhttps(ssl)化してphpでロケーションヘッダを使った時に思わぬ挙動をしたのでメモ

#環境
* DTI ServersMan@VPS Entryプラン
* Ubuntu 14.04.3 LTS
* PHP 5.5.9-1ubuntu4.14
* NGINX 1.9.10
* iOS 9.3.1

#PHPファイル

```redirect.php
<?php
  // $urlに代入
  $url = 'http://example.com/'

  // リダイレクト
  header('Location: ' . $url);
```

#実行結果
```URL
http://example.com/,http://example.com/
```
というようになぜかカンマ(,)を挟んで2回目繰り返されたリンクへリダイレクトしてしまいます
HTTPSにしているときだけこうなるのでiOSのバグなのかわかりませんが動かないものは仕方がないという感じでとりあえず

```diff:redirect.php
 <?php
   //...

   // リダイレクト
-  header('Location: ' . $url);
+  header('refresh:1;url=' . $url);
```
という形にしています

##追記
###追記1
リフレッシュの書き方が間違っていたので修正

```diff:
-header('refresh:1,url=' . $url);
+header('refresh:1;url=' . $url);
```

###追記2
Windows10の内蔵ブラウザであるMicrosoft EdgeでリフレッシュヘッダーだとPOSTが残ってしまうのでそれの対処として

```functions.php
<?php
  //...

  // iOSのみrefreshヘッダーにする
  public function http_refresh($url) {
    $ua = $_SERVER['HTTP_USER_AGENT'];
    if(strpos($ua,'iPhone') || strpos($ua,'iPod') || strpos($ua,'iPad')) {
      $browser = 'ios';
    }
    if($browser === 'ios'){
      header('refresh:1;url=' . $url);
    }else{
      header('Location: ' . $url);
    }
  }
```
を追加して

```diff:redirect.php
　 <?php
   //...

+  // functions.phpの読み込み
+  include(dirname(__file__) . '/functions.php');

   //$urlへリダイレクト
-  header('refresh:1;url=' . $url);
+  http_refresh($url);
```

とすることでLocationヘッダーが動く環境で使えるようにしています
Git + Bitbucketで無料privateリポジトリ作る

先日Githubから7$/月でprivateリポジトリ作り放題なプランが発表されたけど、それでもまだGithubでは無料でprivateリポジトリを作れないYO。
なのでとりあえずGitがよく分かっていない自分でもできたGit + Bitbucketで無料privateリポジトリを作成した際の備忘録。
あ、環境は`Windows8.1`でやりました。

①Bitbucketでアカウント作り、個人アカウント or チームのリポジトリ作る
https://bitbucket.org/

②Git for windowsのダウンロード＆インストール
https://git-for-windows.github.io/

③プロキシ環境の場合は以下を参考にプロキシ設定を行う
http://qiita.com/hidetzu/items/c2db95613ba594a2ef25

④プロジェクトにしたいフォルダで以下のコマンド
git init

⑤マスターリポジトリの場所を設定
git remote add origin https://[個人アカウント名 or チーム名]@bitbucket.org/[個人アカウント名 or チーム名]/[リポジトリ名]

⑥ローカルリポジトリ作成
git clone https://[個人アカウント名 or チーム名]@bitbucket.org/[個人アカウント名 or チーム名]/[リポジトリ名]

あとは

git add .
git commit .
git push origin master
git pull

あたりで普通にソース管理は出来た。

privateとはいえセキュリティ上大丈夫なのか全く分かりません。
セキュリティとか責任分界の話になると、お客さんのサーバに許可もらってリポジトリ作る or 社内LAN上のPCにリポジトリ作るとかがいいのかな。

■補足
・リポジトリ数は制限なしで、ユーザ数は最大5ユーザまでだけど、ユーザ共有すればいくらでも出来る（はず）
・gitの設定で`git config --global core.autoCRLF false`をやってのは覚えている（勝手にLF→CRLFにしようとするので禁止する）
・`.gitignore`は作成してあらかじめマスターにpushしておきましょう。さらに`.gitignore`の出力は`gibo`使いましょう
・commitした時のデフォルトエディタはViだった
・Bitbucketは課題やWikiも管理できるYO!
・`push`と`pull`の単語考えたやつは本当に死刑。（`禁煙`と`喫煙`に関してはリスニングで一瞬考える）
正規表現の基本用語


##メタキャラクタ
`\w`や`*`といった、正規表現内で通常の文字 (a ～ z など)と組み合わせて使う特殊文字のこと。
例えば
> `\w` 英単語を構成する文字の一つ

```rb
[1] pry(main)> 'Apple'.match(/A\w/)
=> #<MatchData "Ap">
[2] pry(main)> 'Apple'.match(/p\w/)
=> #<MatchData "pp">
[3] pry(main)> 'Apple'.match(/\wl/)
=> #<MatchData "pl">
[4] pry(main)> 'Apple'.match(/p\wl/)
=> #<MatchData "ppl">
```

であり、
> `*` 一つ前の文字を0回以上繰り返す

```rb
[1] pry(main)> 'Apple'.match(/Ap*/)
=> #<MatchData "App">
[2] pry(main)> 'Apple'.match(/Aa*p/)
=> #<MatchData "Ap">
[3] pry(main)> 'Apple'.match(/p*l/)
=> #<MatchData "ppl">
[4] pry(main)> 'apple'.match(/p*/)
=> #<MatchData "">
```
> 上記[4]に注意する

である。
これらメタキャラクターを組み合わせて使用することもできる。

`\w`と`*`の組み合わせである`\w*`は、「0個以上の文字数を持つ英単語にマッチする」正規表現である

```rb
[1] pry(main)> 'apple'.match(/\w*/)
=> #<MatchData "apple">
[2] pry(main)> 'Apple'.match(/\w*/)
=> #<MatchData "Apple">
```

##量指定子
前述のメタキャラクタ`*`といった、パターンの繰り返しを示すものを量指定子と呼ぶ。
`*`の他に、
> `+` 一つ前の文字を1回以上繰り返す

```rb
[1] pry(main)> 'Apple'.match(/Ap+/)
=> #<MatchData "App">
[2] pry(main)> 'Apple'.match(/A+p/)
=> #<MatchData "Ap">
[3] pry(main)> 'Apple'.match(/Aa+p/)
=> nil
```
> 上記[3]に注意する

といったものや、

> `?` 0回か1回の繰り返し

```rb
[1] pry(main)> 'Apple'.match(/A?p/)
=> #<MatchData "Ap">
[2] pry(main)> 'Apple'.match(/Aa?p/)
=> #<MatchData "Ap">
[3] pry(main)> 'Apple'.match(/Ap?/)
=> #<MatchData "Ap">
```

##文字クラス
大かっこ`[]`の中に書かれた複数の文字のうちの、どれか一つが対象の文字列にマッチする。

```rb
[1] pry(main)> 'Apple'.match(/[abc]/)
=> nil
[2] pry(main)> 'apple'.match(/[abc]/)
=> #<MatchData "a">
```

`[^]`とすることで、指定された文字以外とマッチすることもできる。

```rb
[1] pry(main)> 'apple'.match(/[^abc]/)
=> #<MatchData "p">
[1] pry(main)> 'apple'.match(/[^p]/)
=> #<MatchData "a">
```

このような、いずれかが文字列に含まれると一致と見なされる文字のセットを文字クラスと呼ぶ。

##エスケープ
前述したような、正規表現内でメタキャラクタとして扱われている文字を通常の文字として扱うため、それらの文字の前に`\`を置く。

```rb
[1] pry(main)> 'ap*le'.match(/\*/)
=> #<MatchData "*">
```

`\`の直後の文字しか通常の文字として扱わないため、正規表現`\**`の二つ目の`*`はメタキャラクタとして扱われる。

```rb
[1] pry(main)> 'ap*le'.match(/\**/)
=> #<MatchData "">
```

##文字表現
改行、タブといった、通常の文字として表現できないものを表示する正規表現の表記法を文字表現と呼ぶ。
下記`\n`は改行にマッチする

```rb
[1] pry(main)> "aa\nbb\ncc\n".match(/\n/)
=> #<MatchData "\n">
[2] pry(main)> "aa\n\n\n".match(/a\n+/)
=> #<MatchData "a\n\n\n">
```
intro.js で手軽にチュートリアル機能を作成する

最近、チュートリアル機能が表示されるアプリケーションを見かける頻度が増えてきました。
そこで intro.js でチュートリアル機能を作ってみることにしました。

## <i class="fa fa-flask" style="font-size:1em;"></i> サンプル
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Intro.js Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/intro.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/introjs.min.css" rel="stylesheet" type="text/css">
</head>
<body style="padding:15px;">
  <h1><i class="fa fa-play-circle" style="font-size:1em;"></i> intro.js Test</h1>
  <form name="users">
    <select name="testSelect" id="hige" data-intro="higeを選択してください" data-step="1">
      <option value="opt1">value1</option>
      <option value="opt2">value2</option>
      <option value="opt3">value3</option>
    </select>
    <input type="text" name="hoge" id="hoge" class="hogeInput" placeholder="hoge"  data-intro="hogeを入力してください" data-step="2" />
    <input type="button" name="hage" id="hage" class="hageInput" placeholder="hage"  data-intro="登録ボタンを押してください" data-step="3" value="登録" />
  </form>
  <script type="text/javascript">
  introJs().start();
  </script>
</body>
</html>

```

## <i class="fa fa-play-circle" style="font-size:1em;"></i> デモ
![introjs_demo.gif](https://qiita-image-store.s3.amazonaws.com/0/43480/95ef0ffd-5c3f-938a-5928-fa04b8bebe24.gif)

## <i class="fa fa-book" style="font-size:1em;"></i> 外部資料
* [intro.js](https://github.com/usablica/intro.js) <i class="fa fa-external-link" style="font-size:1em;"></i>
* [intro.js - GitHub](https://github.com/usablica/intro.js) <i class="fa fa-external-link" style="font-size:1em;"></i>
BotkitでSlackに投稿したメッセージを一定時間後に消す


[Botkit](https://github.com/howdyai/botkit)でSlackのBOTを作成してみたんですが、投稿を削除するのに少し工夫が必要だったのでそのメモです。
今回対象としているのは `controller.hears()` または `controller.on()` でハンドリングした際に投稿するメッセージの削除です。
使い方の説明はしません。

## BOTが自身の投稿したメッセージを消すには
投稿の `callback` 内でレスポンスから `channel` と `ts` (タイムスタンプ) を取得して[slack api](https://api.slack.com/)の [chat.delet](https://api.slack.com/methods/chat.delete)を叩けば消すことができます。実際には `channel` は投稿前にわかっているので消すのに必要なものは `ts` のみです。

## bot.reply()でresponseが空になってしまう
[Botkitのドキュメント](https://github.com/howdyai/botkit/blob/master/readme.md#botreply)を見ると、引数のcallbackでエラーとレスポンスが取れるようなのですが、なぜか空になっていました。（僕だけでしょうか...）

| Argument | Description |
| :------- | :--------------------- |
| message  | Incoming message object|
| reply    | String or Object Outgoing response |
| callback | Optional Callback in the form function(err,response) { ... } |


以下はうまくいかなかった例です。

```js:投稿完了した後10秒後に削除できなかった例
bot.reply(message, '投稿するメッセージ', function(err, response) {
	if (!err) {
		setTimeout(function() {
			bot.api.chat.delete({
    			ts: response.ts,
				channel: response.channel,
			}, function(err, res) {
				if (err) {
					bot.botkit.log('chat.delete error: ', error);
				}
			});
		}, 10000);
	}
});
```


## 解決策
仕方がないので投稿を[slack api](https://api.slack.com/)の[chat.postMessage](https://api.slack.com/methods/chat.postMessage)を利用して行いました。
こちらではcallbackにレスポンスが含まれており削除することができました。

```js:投稿完了した後10秒後に削除できた例
bot.api.chat.postMessage({
	username: "bot name",
	text: '投稿するメッセージ',
	channel: message.channel,
	link_names: 1,
	unfurl_links: true,
	icon_url: 'http://example.com',
  }, function(err, response) {
	if (!err) {
		setTimeout(function() {
    		bot.api.chat.delete({
				ts: response.ts,
				channel: response.channel,
			}, function(err, res) {
				bot.botkit.log('chat.delete:\n', res);
			});
		}, 10000);
	}
  });
});
```
エディタ・IDEごとのショートカットキーの違いをまとめてみた

エディタとかIDEを変えるごとに、ショートカットキーを調べる手間を省くのが目的です。
もともとsublimeとatomを使ってて、python開発の時にpycharmを使おうと思ったらショートカットが結構違くて困ったので、記事を書きます。基本的に、自分がよく使うショートカットを載せるつもりですが、載せて欲しい、または便利なショートカットがありましたら教えてください。
InteliJやCLionやPyCharmなど、JetBrains社のIDEは基本同じだと思ってください。

## 前提
 * まとめるのは、Sublime Text, Atom, PyCharm（InteliJ, CLion）, Eclipse, VSCode の5つ（新しいの使い始めたら増やすかも）
 * Macのキーボードでのコマンド
 * 基本的にショートカットキーなどあまりいじらないのですが、デフォルト設定でないショートカットキーがあったら指摘してください

### そもそもの話
最初にkeymapを設定してしまえば良いという方は、「atom keymap 設定」とか「atom キーバインド 設定」とかでググって設定してください。
大体は、Preferences内に設定する場所がありますよね。


## ショートカット
 * SublimeとAtom、VSCodeは大体同じな気がします。
 * 「 **>** 」 は **>** の左の操作に続けて **>** の右の操作をすることを意味します。
 * 「?」はショートカットがあるかもしれないが不明なもの、私が知らないもの
   * もしもショートカットあったら教えてください :bow:  


### 削除系
|   |カーソルのある行削除|行内カーソル以降削除|
|:--:|:------:|:-----------:|
|Sublime| Ctrl + Shift + k | Ctrl + k |
|Atom| Ctrl + Shift + k<br />or<br />Command + x | Ctrl + k |
|PyCharm| Command + Del | Ctrl + k |
|Eclipse| Command + d | Command + Shift + fn + delete |
|VSode| Command + Shift + k<br />or<br />Command + x | Ctrl+k |

### カーソル移動系
|   |下の行に挿入|上の行に挿入|カーソルのある行を移動|
|:--:|:------:|:-----------:|:-----------:|
|Sublime| Command + Enter | Command + Shift + Enter | Command+Ctrl+矢印 | 
|Atom| Command + Enter | Command + Shift + Enter | Command+Ctrl+矢印 |
|PyCharm| Shift + Enter | Command + Option + Enter | Command+Shift+矢印 |
|Eclipse| Shift + Enter | ? | Option + 矢印 |
|VSCode| Command + Enter | Command + Shift + Enter | Option+矢印 |

### マルチカーソル系
|   |次の同じ語句を選択状態にする|同じ語句の選択を1つ解除する|同じ語句全て選択|
|:--:|:-----:|:----:|:---:|
|Sublime| Command + d | Command + u | ? |
|Atom| Command + d | Command + u | ? |
|PyCharm| Ctrl + g | Ctrl + Shift + g | ? | 
|Eclipse| ? | ? | Command + Option + r |
|VSCode| Command + d | Command + d | Command + Shift + l (エル) |

### インデント系
|   |インデントを左にずらす|インデントを右にずらす|インデントを自動で揃える|
|:--:|:-----:|:----:|:---:|
|Sublime| Command + [ | Command + ] | ショートカットなし<br>(メニューバーのEdit **>** Lines **>** Auto Indent) |
|Atom| Command + [<br /> or <br /> Shift + Tab | Command + ] | ショートカットなし<br>(メニューバーのEdit **>** Lines **>** Auto Indent) |
|PyCharm| Shift + Tab | 範囲選択(1文字で良い) > Tab | 揃えたい領域を選択 **>** Command+Option+l（エル） |
|Eclipse| Shift + Tab | ? | Command+Shift+f | 
|VSCode| Command + [ <br /> or <br /> Shift + Tab | Command+] | ? |

### 他
#### 画面を縦に分割
|   |画面を縦に分割|
|:--:|:------:|
|Sublime| Command + Option + 2 |
|Atom| Command + k **>** 矢印|
|PyCharm| ?<br>（開いているファイルのタブ右クリック **>** split vertically） |
|Eclipse| ?<br>（ファイルタブを掴んで移動） |
|VSCode| ?<br>（開いているファイルのタブ右クリック **>** split right） |

#### 左サイドバーを隠す
|   |左サイドバーを隠す|
|:--:|:-----------:|
|Sublime| Ctrl + s |
|Atom| Command + \ |
|PyCharm| Command + 1 |
|Eclipse| ? |
|VSCode| Command + b |

#### ファイル名検索
|   | ファイル名検索 |
|:--:|:-----------:|
|Sublime| ? |
|Atom| Command + p |
|PyCharm| Shift + Command + o |
|Eclipse| ? |
|VSCode| Command + p |
手離れのいい外部仕様を作成しよう

 プログラムの開発を分業して行っていて気づいたことがある。新たに加わった人がメンテナンスしやすいモジュールと、そうでないモジュールとがあることだ。メンテナンスしやすいモジュールでは、加わったその日にコードの改善が可能である。そうでないモジュールでは、数ヶ月たっても、近寄りがたいものとして意識され続ける。手離れのいい外部仕様を作成して、自分の仕事を減らしていこう。　


### **新たに加わった人がメンテナンスしやすいモジュールの特徴**
- 外部仕様が明確である。
- ドキュメンテーションコメントが充実していている。
- 引数のin, out, inoutの区別が明確である。
@param[in], @param[out]
- const 属性が可能な引数にはconst 属性がついている。
- 関数定義の際に、可能な場合には引数を参照渡しを用いている。
- 単体テストがされている。
- include するヘッダファイルの数は抑制されている。
- 言葉が誤解を減らすように選ばれている。
- \#defineでマクロ定数を使うよりはenum型を使っている。
- std::vectorやstd::map型を使っている。
- namespace やクラスを使うことで、変数のスコープが狭くなるようにしている。
- 変数名や項目名が、整理された名前になっている。(最初からいい名前だったわけではなく、考えた末に名前が変更されている)
- 複数ソースコードにまたがる#ifdef マクロ定数のマクロ定義をソースコード中に書くのではなく、CMakeLists.txt や *.sln, *.projファイルなどで記述する。そうすることで、*.cpp, *.h自体は変更を受けなくする。バージョン管理の際に、ソースコードが変更にならない方がよい。


### **新たに加わった人がメンテナンスしにくいモジュールの特徴**
- 外部仕様が不明確である。
- 外部仕様の一番有効な記述が何であるのかが、ソースコードのドキュメンテーションコメントからたどることができない。
- ソースコード以外のドキュメントでも、有効なドキュメントと古くなって乖離してしまったドキュメントが混在してしまっている。
- ドキュメンテーションコメントが不足していている。
- 引数のin, out, inoutの区別が不明確である。
- const 属性が可能な引数でもconst 属性がついていない。
- 関数の定義の際に、参照渡しが可能な場合でも、とにかくポインタ渡しで定義されている。
- 単体テストがされていない。
- include するヘッダファイルの数はとにかく増えてしまう。
- 誤解しやすい言葉がそのままドキュメンテーションコメントに残ってしまっている。
- 全体像を知った上でそのモジュールを理解することが求められている。
- \#defineでマクロ定数を使っている。
- std::vectorよりも固定サイズの配列を使う。
- std::map型よりもcase文やif(){}else if(){} else if(){} else{}を使う。
- cppファイルであっても、C言語の仕様の範囲内で書けることを優先している。
そのため、変数のスコープが広くなりがちであって、global 変数や externの記述が多く残ってしまっている。
- CMakeってなんだ。


pythonで最初にプロトタイプして、アイディアを検証してからC++の仕様を定めると手離れのいい外部仕様になるように経験的に感じている。


手離れのいい外部仕様を作ることは、そのライブラリのメンテナンスが楽になるだけではなく、そのライブラリを活用してもらいやすくなることでもある。

extern を乱発しまくっているコードは、単体テストがしにくい。
単体テストしようとして、必要になってしまったモジュールをどんどんリンク対象に増やしていくと、どんどん単体テストから外れていってしまう。extern を乱発しまっくているのは、問題がある可能性が高い。


### [extern をC++のライブラリから取り除く](http://qiita.com/nonbiri15/items/6c2ed44b9852c9bf8e37)
を作成しました。

----------------
### 付記：
[自作ライブラリでも画像データ構造を引数として画像処理の関数を実装しよう](http://qiita.com/nonbiri15/items/f1dc65eb520fc28d15b9)
を執筆しました。仕様を作成するときのヒントになれば幸いです。
Visual Studio起動しない！

## 環境
Windows 7 Professional (32bit)
Visual Studio 2013

## エラー内容（うろおぼえ）
VB．NETのフォームデザイナーを開こうとすると

> 外部コンポーネントで例外が発生しました

みたいな内容の「ボンッ」ダイアログが表示された。
画面のコードを表示しようとするとスタックトレースのような

> ITextEditorほにゃららら（うろおぼえすぎ）

が表示された。

## 原因

Windowsの「プログラムと機能」から確認できる.NET Frameworkには、

1. .NET Framework 4.○.○ ランタイム ("Targeting Pack"もしくは"Multi-Targeting Pack")
1. .NET Framework 4.○.○ SDK

の大きく２種類がいるんだけどこのうち、最新のバージョンと同じ「世代（※）」のランタイムとSDKの両方が揃っていないと、エラーになるっぽい。

「世代（※）」はだいたいこんな感じ

1. .NET Framework 1.0
1. .NET Framework 1.1
1. .NET Framework 2.0〜3.5
1. .NET Framework 4.0〜4.5.2
1. .NET Framework 4.6〜

詳しくは[このページ](http://www.atmarkit.co.jp/ait/articles/1211/16/news093.html)の「.NET Frameworkの各バージョン同士の関係」を参照


## つまりこういうことです

1. .NET Framework 4.6.1 ランタイム
1. .NET Framework 4.5.2 SDK

> アウト！（これが現象を発見した環境）

1. .NET Framework 4.5.1 ランタイム
1. .NET Framework 4.5.2 SDK

> セーフ！

1. .NET Framework 4.5.2 ランタイム
1. .NET Framework 4.6.1 SDK

> こんなことあんのか？でもやめとけ！

## 注意

ほっといてもWindowsUpdateのタイミング次第でなりえるぞ！気をつけろ！


## まとめ

ナデラさんが・・・ナデラさんがきっとなんとかしてくれる！
Atomでプロジェクト内検索ができない時の対処法

Atomは`cmd + shift + f`でプロジェクト内検索（Find in Project）ができるのですが、たまに古いパッケージが原因で検索できないことがあるのでその対処法をメモしておきます。

## 自分のエラー原因

自分の場合、[default-encoding](https://atom.io/packages/default-encoding)というパッケージが原因でした。

プロジェクト内検索をした段階で、`cmd + shift + i`でデベロッパーツールを開き、consoleで警告が出ているのを参考に対処しました。

今は[auto-encoding](https://atom.io/packages/auto-encoding)を使っています。

https://github.com/russlescai/atom-default-encoding/issues/2 あたりが原因かな、と思うのですが正直詳しいところはわかりません。

今はとりあえず原因がわかり、対処できてほっとしています:smile:
jspmでhot reloadしよう

# JSPMって？
SystemJSという便利なモジュールローダー（ES6形式、CommonJS形式、RequireJS形式などロードできる）用のパッケージマネージャーです。Out-of-the-boxで色々な機能が使えて便利なので、推しパッケージマネージャーとして最近布教しようとしています。

# hot reloadする
SystemJSは1ファイル1ファイル読むので、ページリロードで毎回読んでいると結構ストレスになります。そこでhot reloadをしましょう。

下記のライブラリを有りがたく使わせていただきます。

https://github.com/capaj/systemjs-hot-reloader

基本はここのREADMEにある通りやれば大丈夫です。一応流れを書いておきますので、参考にしてください。

## jspmインストール
パッケージをjspm経由でインストールします。jspmのバージョンは0.16.x系が2016/05/12時点では安定っぽいです。

```shell-session
jspm i --dev systemjs-hot-reloader
```

## エントリーポイント読み込み時の記述を少し変更
`System.import`でエントリーポイントを読み込む前に、`System.trace`を記述します。

```js
System.trace = true
System.import('./main.js')
```

## エントリーポイントにimport文を追加
先ほどのmain.jsの冒頭に、下記の1行を追加しておきます。jspm bundleする際は、空のモジュールがimportされるようなので気にせずに書いておけばよいらしいです。

```js
import 'systemjs-hot-reloader/default-listener.js'
```

クライアント側の修正は上記で終わりです。次にサーバーサイド側の用意を行います。（hot reloadのためにsocket.ioで通信するらしい）

## 2つのライブラリをインストール
ひとつ目は同じみhttp-server、2つめはsystemjs-hot-reloaderの作者が作った、ファイルの変更をsocket.io経由でクライアント側に通知するライブラリのようです。

```shell-session
npm i http-server --save-dev
npm i chokidar-socket-emitter --save-dev
```

## server.jsを用意して、`npm run server`で起動できるようにする
下記の内容でserver.jsを用意します。先ほどの https://github.com/capaj/systemjs-hot-reloader のサンプルからほぼパクってきたものです。（ポートをsystemjs-hot-reloader的標準の5776に変えてあります）

```js
'use strict'
const httpServer = require('http-server')

let cache = 3600
if (process.env.NODE_ENV === 'production') {
  console.log('running in production mode(with caching)-make sure you have "Disable cache (while DevTools is open)" checked in the browser to see the changes while developing')
} else {
  cache = -1
}
const server = httpServer.createServer({
  root: '.',
  cache: cache,
  robots: false,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': 'true'
  }
})

require('chokidar-socket-emitter')({app: server.server})

server.listen(5776)
```

そしたらpackage.jsonのscriptsに次を追加します。

```js
  ...
  "scripts": {
    ...
    "server": "node server.js",
    ...
  },
  ...
```

これで完了しました。最後に`npm run server`でhttp-serverを立ち上げ、 http://127.0.0.1:5776 にアクセスし、hot reloadが動くことを確認します。
最初の読み込み時は、hot reloadを使わない場合より若干時間がかかるような気がしますが、それ以降はファイルを変更すると即反映されるようになるので快適ですよー。

快適なJSPMライフを、多くの人が送れることを祈っております！あと、JSPMのアイコン設定しておきました！
UILabelの文字サイズを文字数に合わせて動的に変更する

文字数に合わせてUILabelを大きくする、というのはよくみなさんAutoLayoutで行っていることと存じ上げます・・・
が、決まったUILabelのサイズ内で、文字数に合わせてラベルの大きさ内に収まるように文字サイズを動的に変更したいときがあるにも関わらず、なかなかそういった文献がないのでメモ代わりに落としておきます。

文字サイズを動的に変更したいときは

```swift
label.adjustsFontSizeToFitWidth = true
```

これだけなんですねぇ・・・！
知ってる知ってないで変わってくるチップです
新人プログラマ諸氏が意識しておくといいかもしれないもの

学習方法は人それぞれですし「これをやっておけば絶対！」なんてことを言うつもりはサラサラありませんが、プログラミングに興味がある人がスキルをつける手助けになればと思い、意識的な指針をつらつらと書いていこうと思います。

# 何事にも興味を持ってみよう！

はじめは、「この技術面白そう！」とか「便利そう！」とかそういうレベルでいいと思います。
ネットの記事だったり(それこそQiitaのフィードに流れてくる記事とか)技術書を流し読みしてみたり。
もしかしたら今後その技術が役に立つ日がくるかもしれません。
実践できるかどうかは別として、こういうことが出来る(出来そう)という知識があるとないとでは雲泥の差です。

プログラミングに興味がないけど仕方がなくやっている人はまずは興味を持つところから始めてください（笑）

# とにかく手を動かす

## 実践派？座学派？

人それぞれだと思いますが、自分なんかはコードを1行でも多く書いた方が知識として定着すると思っているのでとにかく手を動かします。ただし実践ばかりすればいいというのではなく、前述の通り知識も必要なので座学ももちろん必要です。

① まずはとにかく動くものを作る！
② 次に非効率的な部分をリファクタリング！

これの繰り返しになっていくと思います。

出来るようになってくると、ここは共通化した方が効率いいなとか、ここはエラーが起きそうだからトラップしかけておこうとか、できるようになりますが、初めはそんなことしていたら一生完成しませんので、まずは動くものを作りましょう。
その上でリファクタリングやエラー処理を実装していきましょう。

**※なお、職業PGの場合は①しかできない場合が稀によくある。地獄だ…**

## 目標を作ろう

人間、目標がないとモチベーションが上がらないものです。
身近なちょっとした不便を改善することから始めるといいかもしれません。
この技術が面白そうで使ってみたいけど何に使えるんだろう？とかもいいかもしれません。
もしかしたらすごいサービスが誕生するカモ…？

# 怠慢であれ

プログラマの三大美徳は「怠慢」「短気」「傲慢」なんて言われていますが、まさにその通りだと思います。
今回はその中でも怠慢をピックアップします。

[#1 プログラマーの三大美徳その1「怠慢」](http://itpro.nikkeibp.co.jp/article/Watcher/20061005/250057/)

> 全体の労力を減らすために手間を惜しまない気質。この気質の持ち主は、役立つプログラムを書いてみんなの苦労を減らしたり、同じ質問に何度も答えなくてもいいように文書を書いたりする。よって、プログラマーの第一の美徳である。

要は楽するための労力は惜しむなってことです。

極端な話、プログラムを書くということは手動でやっていたことをコンピュータにやらせて楽する手段です。
誰でも出来る単調な仕事のことを「[刺身の上にタンポポを乗せる仕事](http://ure.pia.co.jp/articles/-/37012)」なんて表現しますが、我々の使命はボタンひとつで人の手を介さず刺身の上にタンポポを乗せる機能を作ることです。そんな単調な作業はコンピュータにやらせておきましょう！（余談ですが刺身の上に乗ってるアイツはタンポポじゃなくて食用菊らしいです）

車輪の再発明なんてもってのほかです。いま貴方がフルスクラッチで書こうとしている機能は大抵、先駆者たちが既にライブラリ化してくれています。そしてそっちの方が高性能です。先駆者たちに感謝しつつ使えるものはとことん使ってゆきましょう。(もちろん商用で利用するときはライセンスには気を付けて！)

# 徐々に守備範囲外のこともやってみよう

貴方はWebプログラマだとします。
使いこなせる技術はPHP,HTML,CSS,JavaScript,SQLです。

とりあえず動くものはできました。
しかし実運用を始めたらいろいろな問題や要望が出てきます。

SEOが効くようにURLを綺麗にしたい場合などはApacheのmod_rewriteなどWebサーバ特有の知識が必要になってきます。
レコードが増え、データベースへのアクセスがネックになってきたらインデックスを効かせるようにSQLを書きなおす必要が出てくるかもしれません。
バッチを組むならシェルスクリプトやUNIXコマンドの知識が必要となってきます。

そんぐらいプログラマがやって然るべきの範疇だよ！という議論は置いておいて、この辺の知識をすべて持って実践出来るという人は案外少ないものです。

こうやってプラスアルファを増やしていくことは重要になっていきます。

# アウトプットをしよう！

勉強でもなんでもそうですがアウトプットは重要です。
その時は理解できていた気がしていても、一度やったことがあるはずなのに知識として定着していなくてまた調べなおしたり、後から読み返してみたらわけがわからなかったり・・・なんてことはよくある話です。

アウトプットと言ってもメモ書き程度からフォーマット立てた文書に起こすなど様々な方法がありますが、個人的にオススメなのはQiitaに投稿することです！

Qiitaに投稿するすることによって以下のような効果が期待できます。

* 備忘録になる
* より理解度が増す
* 同じような事象で困っている人が助かる
* もし間違っていたりさらに良い方法があったりしたら指摘してもらえる可能性がある
* 適当に書いても綺麗なページに仕上がる

※ちなみにQiitaの回しモノではありません

## より理解度が増す

自分は記事に起こす際に、誤りがないか色々検証したりしながら記事を起こします。
その際に新たなる発見があったりすることも・・・

## 同じような事象で困っている人が助かる(かもしれない)

自分はわからないことがあったらインターネットで調べものをする方でして、よく助けてもらっているのですが、その記事は小人さんが生成してくれるわけでもなく、親切な人が記事を起こしてくれた賜物なんですよね。
自分が発信する側になればもしかしたら誰かの役に立てるかもしれません！

## もし間違っていたりさらに良い方法があったりしたら指摘してもらえる可能性がある

Qiitaで書いた記事は様々な人が見に来る可能性があります。
そしてコメント欄があるのでもし誤りがあったり良い方法があった場合指摘してもらえる可能性があります。
自分も過去に投稿したQiitaに投稿した記事のコメントにでよりよい方法を指摘していただいたことがあり、助かりました。

## 適当に書いても綺麗なページに仕上がるので出来る人間になった気分になれる

技術情報だとコードやコマンドの貼り付けをすることがあると思いますが、単に並べて書いただけだと見栄えが悪いし、かといってソースコードをハイライト表示できるプラグインはあれど導入が面倒くさい…
そんなあなたにQiitaですよ！Markdownで記述できるからちょっとした記述方法を覚えればモーマンタイ！自分もたぶん5，6コの記述方法しか覚えてないですし使ってないです。

# 最後に

なんだかんだで継続は力なりですよ。
**途切れない気持ちが私の道しるべ**。
Boilerplateを使ったDapps(分散型アプリケーション)の作成(1)


Ethereumを用いて、非中央集権・分散型アプリケーション、いわゆる **「Dapps」** を作成してみます。
今回は、Meteorで作られたBoilerplate([SilentCicero/meteor-dapp-boilerplate](https://github.com/SilentCicero/meteor-dapp-boilerplate))を用います。

## 到達目標
テンプレートにあるContractを書き換えて、独自のテストネット上にトランザクションを流し、マイニングにより承認されるまでの、一通りの流れを実装する

## Meteorの簡単な紹介
- Ycombinater出身のチームが開発している、JavaScript(Node.js)で超速にアプリケーションを開発できるというクールなフレームワーク
- MongoDBが組み込まれている
- サーバー/クライアント間のデータ連携がシームレスに行われる(ちょっと感動するレベル)
- 簡素で柔軟なMVC
- Blazeと呼ばれるテンプレートエンジンを採用
- リアクティブ・プログラミング
- 公式 : https://www.meteor.com/

## Dappsとは
- Decentralized Appsの略
- 統一された明確な定義があるわけではないが、ざっくりとした表現だと「P2Pで中央機関が無く、プロトコルに従って自律的に運用されるWebアプリケーション」

## その他にも前提となる知識
- Ethereum...[Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%BC%E3%82%B5%E3%83%AA%E3%82%A2%E3%83%A0)
- SmartContract...いわゆる契約の「プログラミング化」([スマートコントラクトとDAO](http://jpbitcoin.com/bitcoin2/smartcontract))
- Solidity...Ethereum上で動作するJSベースのSmartContract記述用言語([公式wiki](https://solidity.readthedocs.io/en/latest/))
- geth...EthereumのGo言語クライアント([公式wiki](https://github.com/ethereum/go-ethereum/wiki))

## 開発環境
- Mac OSX : 10.11.4
- geth, Node.js, Meteor等、必要なものは全てインストール済として進めていきます

## gethをプライベートネットワークで起動する
まずはgethテストネットを起動します。

```
$ geth --networkid "10" --nodiscover --datadir "~/testnet" --genesis "/~/testnet/test.json" --unlock {アカウントNo} --rpc --rpcaddr "localhost" --rpcport "8545" --rpccorsdomain "*" console 2>> ~/testnet/test_err.log
```

コマンドラインオプションは `geth help` で参照可能です。  
大事なポイントは、アカウントをunlockしておくこと、crosdomainのオプションをつけることくらいかと思います。

※ 参考(https://github.com/ethereum/go-ethereum/wiki/Command-Line-Options)

## templateをセットアップ
今回使わせていただくテンプレートをクローンしてきます。

```
$ git clone https://github.com/SilentCicero/meteor-dapp-boilerplate.git
```

必要十分なパッケージが既に入っているので、基本的にはライブラリとかはこのままでOK。
[※Include Packagesのリスト](https://github.com/SilentCicero/meteor-dapp-boilerplate#-included-packages)  
ちなみにMeteorのライブラリは「[Atmosphere](https://atmospherejs.com/)」と呼ばれています。クールです。

## 立ち上げてみる
そして、まずはそのままMeteorを立ち上げてみます。

```
$ cd meteor-dapp-boilerplate/app
$ meteor
```

これで自動的に必要なパッケージのインストールが始まりローカルホストでサーバーが立ち上がります。
上手くいけば下記画像のようになるはず。

![Screen Shot 2016-05-12 at 23.05.37.png](https://qiita-image-store.s3.amazonaws.com/0/87650/cf079a4d-aa2a-3ffa-7803-12af2ec042be.png "Screen Shot 2016-05-12 at 23.05.37.png")

View1には、テストネットとの接続状況や、アカウントの情報、Ether残高などが記載されていると思います。  
Miningされているかどうかも確認できます。

<br>

長くなったので、後半は第二回に続きます。

[第2回](http://qiita.com/Y-Mukoyama/items/0b0f094683805099213d)