OmniAICreator/Qiita-1.07M huggingface dataset:
AngularJSでページ内リンクを使う

# HTMLファイル
```list.html
<a href="" ng-click="gotoAnchor('abc')">abc</a>
<a href="" ng-click="gotoAnchor('xyz')">xyz</a>
...
<a name="abc">
<div id="xyz">
```
# ルーティング
```main.js
.when("/list", {
    templateUrl: "list.html",
    controller: "listController",
    reloadOnSearch: false, // ←ココ
})
```
`reloadOnSearch: false`にすることでページのリロードが走らない。

# コントローラー
```listController.js
$scope.gotoAnchor = function(id) {
    $location.hash(id);
    $anchorScroll();

    // ハッシュクリア
    $location.url($location.path());
};
```
一度でも`$location.hash()`が実行されると、他のページに移ってもURLの最後にハッシュが残ってしまう。
実害はないが気持ち悪いため、`$anchorScroll()`後にURLのハッシュを消している。
ただ、上記の方法はクエリーパラメータも消してしまうので、クエリーパラメータを使うページでは検討が必要。
Qiita記事で右上のコメント数をクリックすることでコメント欄にジャンプするユーザースクリプト

Qiitaの目次機能、便利なのですがコメント欄へは飛べません。
そこで表題のスクリプトを組んだのですが、フィードからコメント数クリックで飛べること。エンドキー(マウスジェスチャー)で移動すれば十分なことが多いことからお蔵入りしてました。


# <i class="fa fa-code"></i> スクリプト

```js:Qiita-Jump-Comment
// ==UserScript==
// @name        Qiita Jump Comment
// @namespace   Qiita
// @description トップのコメント数をクリックすることでコメント欄へスクロールする
// @include     http://qiita.com/*/items/*
// @version     1
// @grant       none
// @author      khsk
// ==/UserScript==

// jQueryはQiitaのものを使用する
console.time('Qiita Jump Comment')

// どこに飛ぶかを変更する
// コメント欄トップ
const COMMENT = 1
// 最新コメント
const LATEST_COMMENTS = 2
// コメント投稿
const POST_COMMENT = 3

var to = LATEST_COMMENTS

// コメント数の表示箇所にイベント追加
$('.list-unstyled.itemsShowHeaderStock_statusList li').eq(1).on('click', function () {
  // スクロール位置 現在の位置で初期化
  var height = $(document).scrollTop()
  switch (to) {
    case COMMENT:
      height = $('#comments').offset().top
      break
    case LATEST_COMMENTS:
      var latest_comment = $('#comments .commentList').children(':last')
      // コメントが無い場合は投稿欄へ移動
      height = latest_comment.length ? latest_comment.offset().top : $('#new_comment').offset().top
      break
    case POST_COMMENT:
      height = $('#new_comment').offset().top
      // 入力欄にフォーカスもしておく
      $('textarea[name="comment\[raw_body\]"]').focus()
      break
    default:
      alert('存在しない設定値です')
      break
  }
  $(document).scrollTop(height)
})

console.timeEnd('Qiita Jump Comment')

```

# <i class="fa fa-file-text-o"></i> お蔵出し理由

本当に些細で、作っておいて使うのを忘れてしまうのですが…

## フィードからのジャンプを忘れる  

フィードのコメント数クリックで最初のコメントに飛べますが、良く忘れます。
思い出してもリンクが小さくて押しにくかったりでイマイチ使いにくいです。

## フィードからのジャンプがコメント欄トップ

コメントが活発な記事をちょいちょい覗いているとき、見たいのは後半のコメントなのに、既読のコメント欄トップに飛ばされて使いにくい。

## 最下部では見切れるコメントがある

最新のコメントを見たいときはエンドキー(マウスジェスチャー、スクロールバー)で最下部へ移動するのですが、ウィンドウサイズが小さかったり、コメントが長かったりするとコメントの最初の方が見切れます。
最下部へ移動し、ちょっと戻る。これが少し嫌です。


## フォローユーザーのコメントがすぐ見れない

フォローしているユーザーがコメントをすると、フィードに現れます。
しかしアコーディオンを開いてもリンクをクリックしても対象の記事が表示されます。
フィードが来たってことは大抵最新コメントなので、サクッと確認したいです。[^1][^3]


## コメント数表示部が寂しい

なんか…飛べそうじゃないですか？
あーこんなにコメントあるんだー→クリック→コメント読める
みたいな
ストック数もクリックしたら`/stockers`に飛んで欲しいです[^2]


***

以上、ヘイグトとかワイドスとかハーレフとか読んでいる人間がコメントを追いながら書いた記事でした。

[^1]: 記事が未読の場合は本文でいいのですが、やっぱりバズってる記事へのコメントなら大抵既読です
[^3]: 自分の記事へのコメントは通知から一発で飛べるんですけどネ
[^2]: `…`で飛べますが押しにくいです
XenOrchestra4.0のマニュアルインストール

#概要
XenServerの基本的な操作をブラウザからできるXenOrchestraのインストール手順です。

https://xen-orchestra.com/
XOと略すようですが、私はXO醤を思い出します。

#インストール
64bitsのDebian 7 (Wheezy)を用意して、nodejs周りの準備をしていきます。

```
cat /etc/issue
------
Debian GNU/Linux 7 \n \l
------

apt-get install -y curl
apt-get install -y nodejs
apt-get install -y build-essential


curl -o /usr/local/bin/n https://raw.githubusercontent.com/visionmedia/n/master/bin/n
chmod +x /usr/local/bin/n
n stable

node -v
------
v0.12.4
------

npm -v
------
2.10.1
------
```

その他必要なパッケージを入れます。
```
apt-get install -y build-essential redis-server libpng-dev git python-minimal
```

gitから持ってきます。

```
git clone http://github.com/vatesfr/xo-server
git clone http://github.com/vatesfr/xo-web
```

XO-Serverインストール

```
cd xo-server/
npm install && npm run build

cp sample.config.yaml .xo-server.yaml
vi .xo-server.yaml
------
  mounts:
    '/': '/root/xo-web/dist/'
------

npm start
#起動確認できたら一旦プロセス停止
```

XO-Webインストール

```
cd /root/xo-web/
npm install
npm run build
```


foreverでデーモン化します。

```
cd /root/xo-server/

npm install -g forever
forever start bin/xo-server
```

IPアドレスでアクセスすると管理画面が表示されるはずです。

![スクリーンショット 2015-06-18 11.14.28.png](https://qiita-image-store.s3.amazonaws.com/0/52904/aba0e044-eb61-4287-0c64-9a16152251d7.png)


デフォルトでは
username:admin@admin.net
password:admin
でログインできます。

![スクリーンショット 2015-06-18 11.15.02.png](https://qiita-image-store.s3.amazonaws.com/0/52904/eae57064-6d44-0db8-6dd9-a352bb793b09.png)
 
 
#バーチャルアプライアンス 
https://xen-orchestra.com/ からXenOrchestraインストール済みのバーチャルアプライアンス(XVAファイル)も入手できるようです。
[Objective-C] URL文字列のencode / decode


iOS7から問題なく使えるメソッドが増えたそう。
JSでencodeしたやつとかも問題なし。
WebViewとのブリッジで渡ってくるケースもあるので、それを踏まえて実行した結果をメモ。

-------------------------------------------

```objc
NSString *sample  = @"http://hogehoge.com/?param=!*'();:@&=+$,/?%#[]";

NSString *encodeString1 = [sample stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
NSString *encodeString2 = [sample stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet alphanumericCharacterSet]];

NSString *decodeString1 = [encodeString1 stringByRemovingPercentEncoding];
NSString *decodeString2 = [encodeString2 stringByRemovingPercentEncoding];

NSString *encodeStringFromJS = @"http%3A%2F%2Fhogehoge.com%2F%3Fparam%3D!*'()%3B%3A%40%26%3D%2B%24%2C%2F%3F%25%23%5B%5D";
NSString *decodeStringFromJS = [encodeStringFromJS stringByRemovingPercentEncoding];

NSLog(@"%@", encodeString1);
NSLog(@"%@", encodeString2);

NSLog(@"%@", decodeString1);
NSLog(@"%@", decodeString2);

NSLog(@"%@", decodeStringFromJS);
```

実行結果。

```console:Result
2015-06-18 11:24:08.443 Untitled[93372:2135145] http://hogehoge.com/?param=!*'();:@&=+$,/?%25%23%5B%5D
2015-06-18 11:24:08.444 Untitled[93372:2135145] http%3A%2F%2Fhogehoge%2Ecom%2F%3Fparam%3D%21%2A%27%28%29%3B%3A%40%26%3D%2B%24%2C%2F%3F%25%23%5B%5D
2015-06-18 11:24:08.444 Untitled[93372:2135145] http://hogehoge.com/?param=!*'();:@&=+$,/?%#[]
2015-06-18 11:24:08.445 Untitled[93372:2135145] http://hogehoge.com/?param=!*'();:@&=+$,/?%#[]
2015-06-18 11:24:08.445 Untitled[93372:2135145] http://hogehoge.com/?param=!*'();:@&=+$,/?%#[]
```

ちなみにこういうちょっとしたコードをテストをするのは[CodeRunner](https://itunes.apple.com/jp/app/coderunner/id433335799?mt=12)が便利。有料だけど。
ACCESSにADO.NETでアクセスする場合のトランザクション制御 #2


#非接続型の更新処理

##DBからDataTableへの読み出し

```C#:DBからDataTableへの読み出し
OleDbConnection CONN = new OleDbConnection();
CONN.ConnectionString = @"Provider=Microsoft.ACE.OLEDB.xxxx";    // 記述省略

String sql = "SELECT 名前, 年齢 FROM 従業員;
OleDbDataAdapter DA = new OleDbDataAdapter(sql, CONN);
DataTable DT = new DataTable();
DT.TableName = "従業員DT";
DA.Fill(DT);
```


##トランザクション制御なしの更新

```C#:トランザクション制御なしの更新
OleDbCommandBuilder CB = new OleDbCommandBuilder(DA);
try
{
    DA.Update(DT);
}
catch (Exception ex)
{
    textBox.Text = "エラーが発生しました。" + ex.Message;
}
```


##トランザクション制御ありの更新

```C#:トランザクション制御ありの更新
OleDbCommandBuilder CB = new OleDbCommandBuilder(DA);

DA.InsertCommand = CB.GetInsertCommand();
DA.UpdateCommand = CB.GetUpdateCommand();
DA.DeleteCommand = CB.GetDeleteCommand();

CONN.Open();

OleDbTransaction TRN= CONN.BeginTransaction(IsolationLevel.ReadCommitted);

DA.InsertCommand.Transaction = TRN;
DA.UpdateCommand.Transaction = TRN;
DA.DeleteCommand.Transaction = TRN;

try
{
    DA.Update(DT);
    TRN.Commit();
}
catch (Exception ex)
{
    TRN.Rollback();
    textBox.Text = "エラーが発生したのでロールバックしました。" + ex.Message;
}
finally
{
    CONN.Close();
}
```

上の例で INSERT, UPDATE, DELETE について同じような記述が３行が並んでいる箇所があるが、実行される可能性がないものは書かなくてもよい。例えば、行削除が行なわれないことが
分かっているならDELETE部分の記述は不要である。


参考：[DB 設計者のための明解 ADO.NET 第 1 回](https://msdn.microsoft.com/ja-jp/library/cc482903.aspx)


・[ACCESSにADO.NETでアクセスする場合のトランザクション制御 #1](http://qiita.com/kakunodatenow/items/a882b9a5281175399c64)
・非接続型のトランザクション制御
・[接続型のトランザクション制御](http://qiita.com/kakunodatenow/items/bd958484c3bf692df80f)
・[複数のDataTableの変更を同時にDBに反映する際のトランザクション制御](http://qiita.com/kakunodatenow/items/2a44ac5492a77a59b758)
・[接続型、非接続型が混在した更新のトランザクション制御](http://qiita.com/kakunodatenow/items/79da9eeeadb7ad83c066)
・[トランザクション制御に関する分かり難いエラーメッセージ](http://qiita.com/kakunodatenow/items/f58275921859cda61fc1)
カーネルパニックを起こしたら設定秒数後に自動的に再起動

rootユーザにて作業の必要あり。
CentOS6.4では、kernel.panicの記述がなかった。追記する作業をしました。

sysctl kernel.panic

とコマンドを入力

kernel.panic = 0

といったレスポンスがあった場合、カーネルパニックが起きても自動的に再起動する設定が入っていない。

cat /etc/sysctl.conf|grep kernel.panic

とコマンドを入力

レスポンスがカラだったらやっぱり入っていない。この場合だとカーネルパニック後30秒で再起動。

echo "kernel.panic = 30" >> /etc/sysctl.conf

とコマンドを入力

sysctl -p

とコマンドを入力して、設定を反映させる。

sysctl kernel.panic

とコマンドを入力して、設定を確認。

kernel.panic = 30

とレスポンスがあったら成功。カーネルパニック後30秒で再起動するようになる。
[Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 2 環境構築

[[aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 1 概要](http://qiita.com/tsumekoara/items/dcf71624fafb946cccb3)の続きです。

前回はOfficial Web Siteを見てみましたが、今回は[Get Started](http://aurelia.io/get-started.html)をやってみます。

[日本語訳](https://github.com/aurelia/documentation/blob/master/Japanese/get-started.md)もされていますね。

# Configuration Environment

## Node.js

- とりあえずnode.jsがインストールされていない場合は、[しましょう。](https://nodejs.org/)

- またnpmが最新バージョンでない場合には、[最新にしましょう。](https://github.com/npm/npm/wiki/Troubleshooting#try-the-latest-stable-version-of-node)

## Gulp

```rb
$ npm install -g gulp
```

## jspm

```rb
$ npm install -g jspm
```

# Set Up

```rb
$ npm install -g yo generator-aurelia
$ yo aurelia
---
$ yo aurelia
/Users/path/to/project
Download complete
Executing NPM install
Executing JSPM install
     Looking up npm:font-awesome
     Updating registry cache...
     Looking up github:aurelia/dependency-injection
     Looking up github:aurelia/http-client
     Looking up github:aurelia/animator-css
     Looking up github:aurelia/bootstrapper
     Looking up github:aurelia/framework
・
・
・
```

```rb
$ rm -rf index.html src
```

# Creat HTML

## index.html

```html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <link rel="stylesheet" type="text/css" href="jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
  </head>
  <body aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
     System.config({
       "paths": {
         "*": "dist/*.js"
       }
     });
   </script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>
```

bodyタグの中で jspm_packages/system.jsを読んでいます。これはES6ベースのモジュール、つまりaureliaライブラリを読み込むためのファイルです。

次に ローダーの設定ファイルである config.js を読んでいます。これはjspmコマンドを打つと自動で生成されます。

そして、その下では System.config が呼ばれています。JavaSciptコードがコンパイルされて生成されるパスをしていしています。

最後にaurelia-bootstrapperを読み込みます。

*ちなみにaureliaはjspmともSystemJSとも結合していません。サポートしているだけです。なので、別のパッケージマネージャーやローダーと組み合わせることもできます。しかし、中の人的には、jspm/SystemJSがES6志向のソリューションとしてベストと考えている様です。*


では、[次回](http://qiita.com/tsumekoara/items/200f609ac1b459482d62)からページを作っていきます。

続きは[こちら](http://qiita.com/tsumekoara/items/200f609ac1b459482d62)
Tinyproxyとcorkscrew

ポート４４３以外でhttp CONNECTが通じないファイアウォールの後ろにいると、サバーにsshできない状態になります。corkscrewというソフトを使ってhttp proxyでsshできるけど、http proxyが必要です。下記のスクリプトでtinyproxyをすぐインストールできます。


```install_tinyproxy.rb
$ brew update && brew upgrade 
$ brew install tinyproxy
$# 会社のファイアウォールは大体httpsプロトコールの為にポート４４３でhttp CONNECTを許可するから、リモートサバーにおいてポート４４３でtinyproxyを動作しよう。
$# Most firewalls allow http CONNECT over port 443 to allow https, so run tinyproxy on 443
$ cat > /usr/local/Cellar/tinyproxy/1.8.3/etc/tinyproxy.conf <<EOF
User nobody
Group nobody
Port 443
Timeout 600
DefaultErrorFile "/usr/local/Cellar/tinyproxy/1.8.3/share/tinyproxy/default.html"
StatFile "/usr/local/Cellar/tinyproxy/1.8.3/share/tinyproxy/stats.html"
LogLevel Info
MaxClients 5
MinSpareServers 1
MaxSpareServers 2
StartServers 1
MaxRequestsPerChild 0
 
Allow 127.0.0.1
Allow $specific_ip_of_client
Allow 192.168.1.0/24
ConnectPort 22
ConnectPort 23
ConnectPort 443
ConnectPort 563
EOF
$ mkdir -p /usr/local/Cellar/tinyproxy/1.8.3/var/log/tinyproxy/ /usr/local/Cellar/tinyproxy/1.8.3/var/run/tinyproxy/
$ chown -R nobody:nobody /usr/local/Cellar/tinyproxy/1.8.3/var/log/ /usr/local/Cellar/tinyproxy/1.8.3/var/run/
 
$ #add app to allowed apps in firewall to allow binding socket
$ /usr/libexec/ApplicationFirewall/socketfilterfw --add /usr/local/Cellar/tinyproxy/1.8.3/sbin/tinyproxy
$ /usr/local/Cellar/tinyproxy/1.8.3/sbin/tinyproxy
第２階層の<h1>

皆さん、第2階層以降のページで`<h1>`は何を指定していますか？

今現在トップページの`<h1>`はそのサイトの表示名に当たる部分（ロゴなど）に使い、2階層以降のページの`<h1>`にはそのページのタイトル部分で使用し、サイトの表示名（ロゴなど）には`<p>`を使用しています。

理由は、ページの大見出しは`<h1>`という観点で、
トップページはそのサイト全体の入り口として、大見出しはそのサイトの表示名であると考え、
2階層以降のページは、各ページの全内容に関するタイトルが大見出しと考え付けています。

ただ最近、その辺りのルールを見直す機会がありまして、
上記のやり方で続けて良いのかググったのですが、明確なルールが出てこなく（当たり前かもしれませんが…）

なので、ちょっと皆さんのやり方を聞きたく投稿しました。

ちなみにですが、
html5になって、`<h1>`が複数使用できるようになって、2階層以降はサイトの表示名と全内容のタイトル部分に`<h1>`を付けていくのも有りかなと思いましたが、複数の`<h1>`を使用することによって、`<h1>`の重要度がどこまで損なわれるかも気になります。

（2015/06/22追記）：
一つ[html5.jp](http://~)の`<header>`要素の項目に

>`<header>`要素の中に何が必要か

> 私たちは、ページに複数のヘッダーを入れることができるということは分かっている。しかし、それが妥当であるために、この要素の中に何をどんな順番で入れなければいけないのだろう？
簡単に言うと、通常、`<header>` 要素には、少なくとも 1 つ（しかし制約されているわけではない）の見出しタグ（`<h1>` – `<h6>`）を入れる。

とあって、`<header>` 要素の中には`<h>`要素は必ず必要そうで、制約がないのが気になります。

制約がないにしても、`<header>` 要素中にもある方が良いのなら、第2階層にもロゴを`<h1>`、ページタイトルにも`<h1>`が理想なのでしょうか。
capistrano で日本語をサーバまで渡すのに、数値参照を使った

メンテナンスモードに入る時に、理由を引数に渡すことができる gem がある
[biola/turnout](https://github.com/biola/turnout)

```
rake maintenance:start reason="メンテナンスの終了は19時を予定しております"
```

これを capistrano 経由で実行できないかと思った。

```rb
namespace :maintenance do
  task :start, :reason do |_, args|
    reason = args[:reason]
    on release_roles :all do
      within release_path do
        with rails_env: fetch(:rails_env) do
          execute :rake, "maintenance:start reason='#{reason}'"
        end
      end
    end
  end
end
```

すると、下記のエラーメッセージが出た。

```
SSHKit::Runner::ExecuteError: Exception while executing as ****: incompatible character encodings: ASCII-8BIT and UTF-8
```

どうやら日本語(UTF-8)を使えないということなので、数値参照に変換して渡すことにした。
使った gem は [threedaymonk/htmlentities](https://github.com/threedaymonk/htmlentities)

```rb
namespace :maintenance do
  task :start, :reason do |_, args|
    require "htmlentities"
    reason = HTMLEntities.new.encode(args[:reason], :hexadecimal) if args[:reason]
    on release_roles :all do
      within release_path do
        with rails_env: fetch(:rails_env) do
          execute :rake, "maintenance:start reason='#{reason}'"
        end
      end
    end
  end
```

数値参照は便利。
CarrierWave configure asset_hostにはブロックが渡せる


まぁ [README](https://github.com/carrierwaveuploader/carrierwave#dynamic-asset-host) に書いてあるのですが。。

``` config/initilizer/carrierwave.rb
CarrierWave.configure do |config|
  config.asset_host = proc do |uploader|
    uploader.cached? ? '' : 'http://some.cnd.example.com'
  end
end
```

* cached?でキャッシュされている（Validate処理の結果がfalseとなり入力画面に戻ってきた場合など）か判定して、

	```
	cached? : true → '/uploads/tmp/xxxxxxxxx/xxxxxx.jpeg'
	cached? : false → 'http://some.cnd.example.com/uploads/tmp/xxxxxxxxx/xxxxxx.jpeg'
	```	
のようにハンドリングできる
ACCESSにADO.NETでアクセスする場合のトランザクション制御 #1

（※ここに書いているのは“LINQ”を使ったアクセスではなく、ADO.NETを使ったアクセスについての事です。）

**Microsoft ACCESS**に**ADO.NET**を使ってアクセスする方法には“接続型”と、“非接続型”がある。

非接続型は、DBから取得したデータをDataTableに読み込むもので、DataTable上で編集をした後で一括してDBに反映することができる。

DataTableをDataGridViewコントロールにマッピングして表形式で表示することができるので、ユーザにDataGridView上で自由に更新作業（内容変更、行追加、行削除）を行なってもらうことができる。

更新した後でOleDbCommandBuilder()メソッドを実行すると更新内容をDBに反映する為の複数のSQL文(update, insert, delete）を自動生成してくれるので、SQL文をプログラムで作る必要がなく便利である。その後で、Update()メソッドを実行してDBに反映する。

ただし、トランザクション制御をしておかないと何れかのSQL文の実行でエラーが発生した場合、複数のSQL文のうち一部だけ反映され、他は反映されないということが起こる。

また、当然のことながら複数のDataTableを元に同時に更新する場合や、接続型と、非接続型が混在した更新を行なう場合もトランザクション制御が必要となる。


・[非接続型のトランザクション制御](http://qiita.com/kakunodatenow/items/05648f618c2e4e201066)
・[接続型のトランザクション制御](http://qiita.com/kakunodatenow/items/bd958484c3bf692df80f)
・[複数のDataTableの変更を同時にDBに反映する際のトランザクション制御](http://qiita.com/kakunodatenow/items/2a44ac5492a77a59b758)
・[接続型、非接続型が混在した更新のトランザクション制御](http://qiita.com/kakunodatenow/items/79da9eeeadb7ad83c066)
・[トランザクション制御に関する分かり難いエラーメッセージ](http://qiita.com/kakunodatenow/items/f58275921859cda61fc1)
レスポンシブWebデザインでスマホ版とPC版を切り替える方法

**レスポンシブWebデザイン**で、スマートフォン表示とPC表示の切り替えができるようにする方法メモ。
追記：WordPressプラグイン作りました。

## 仕組み

* ユーザーがスマートフォンなら切り替えリンクを表示
* Viewportを変更して表示を切り替える
* 表示方法をCookieに保存する

詳細
http://blog.lqd.jp/webdesign/000982.html

## WordPressプラグイン

この仕組で、公式WordPressプラグインを作ってみました。
既存のレスポンシブテーマで、スマホ/PC表示切替ができます。
https://lqd.jp/wp/plugin.html
[Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 1 概要

# 前置き

偶然にもAureliaを触ることになりました。
これまではJavaScriptのフレームワークとしては、reactとangular、backboneくらいしか経験がなかったので、なんとなく興味が湧いて触れてみました。

# aurelia概要

[aurelia公式ページ](http://aurelia.io)には以下の様な記述があります。

![Screen Shot 2015-06-18 at 09.45.38.png](https://qiita-image-store.s3.amazonaws.com/0/18705/ec6c88e0-78f0-cc2d-2ea9-77c8e2c8d132.png)

![Screen Shot 2015-06-18 at 09.45.21.png](https://qiita-image-store.s3.amazonaws.com/0/18705/5680b380-e767-bdbb-2175-fdeedd5b0c8d.png)

とりあえず、新しいJavaScriptのフレームワークで想像力や創造性を刺激してくれる雰囲気なんだなぁと。。。

## Features

### Forward-Thinking

![Screen Shot 2015-06-18 at 09.48.53.png](https://qiita-image-store.s3.amazonaws.com/0/18705/e161f56a-e83c-17ab-d48a-f13cfe94391f.png)

よくaureliaは未来志向と言われている部分の記述ですかね。

### Modern Architecture

![Screen Shot 2015-06-18 at 09.49.02.png](https://qiita-image-store.s3.amazonaws.com/0/18705/1f3ff83a-37be-766f-2453-bb7cfd5c544e.png)

aureliaは、どでかいフレームワークというよりは、小さいモジュールで構成されたものなので、柔軟に使えると。

### Two-Way Data binding

![Screen Shot 2015-06-18 at 09.57.16.png](https://qiita-image-store.s3.amazonaws.com/0/18705/88b7e342-8014-2387-e70c-61f816a9e9cc.png)

さすが元Angularの開発者の作ったフレームワークって感じです。
Two-Way Data Bindingについては、以下がわかりやすいかと思います。

- http://stackoverflow.com/questions/13504906/what-is-two-way-binding
- https://docs.angularjs.org/guide/databinding
- https://docs.angularjs.org/tutorial/step_04

### Enxtensible HTML

![Screen Shot 2015-06-18 at 09.57.21.png](https://qiita-image-store.s3.amazonaws.com/0/18705/27e672f7-8103-8e9b-e5b6-dbb11428f940.png)

Custom HTMLが使えますよと。

### Routing & UI Composition

![Screen Shot 2015-06-18 at 09.57.30.png](https://qiita-image-store.s3.amazonaws.com/0/18705/bf986a69-4bb0-d12f-2a2b-bfa8d4ec7234.png)

Client側でRoutingできますよと。

### MV* Conventions

![Screen Shot 2015-06-18 at 09.57.35.png](https://qiita-image-store.s3.amazonaws.com/0/18705/bb503f93-a0cd-21b1-12d9-08900775d02b.png)

Convention over Configuration的な感じでしょうか？
Rails感出してますね。

### Broad Language Support

![Screen Shot 2015-06-18 at 09.57.41.png](https://qiita-image-store.s3.amazonaws.com/0/18705/7842fec4-5a48-b8e9-7c6b-48bd0b431ce2.png)

ES5, ES6, TypeScript, AtScript, CoffeeScriptが使えます。
今どき感ありますね。

### Testable

![Screen Shot 2015-06-18 at 09.57.47.png](https://qiita-image-store.s3.amazonaws.com/0/18705/44ccd046-3057-0903-2736-a754b60f535c.png)

この部分はまだあんまりピンときません。
とりあえずaureliaが手厚く開発しやすい環境を作ってくれるから、複雑なコード・テストを書く必要もないですよってことですかね？


## 所感

server-side renderingはないんですね。
開発者のissueやcommentを見る限り、優先度は低い感じが伺えましたので、seoを重要視する様なサービスに使うことを想定していないのかもしれません。

あと、angularとどの程度違うのでしょうね？割りと似ている感じがしますね。

では次回、[official の get started](http://aurelia.io/get-started.html) をやってみたいと思います。

続きはこちら: [[aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 2 環境構築](http://qiita.com/tsumekoara/items/35205756b9c5ff85dff2)
Consulでざっくり死活監視してみる

[Consul](https://www.consul.io/)で少し遊んだ。
Consulでできることはいろいろあるけど、死活監視機能があるので、単体でHTTPの死活監視をしてみる。

### インストール

Mac OS Xの場合brew cask でインストールできる

```
$ brew cask install consul
```

### 監視設定

例えば、`http://eiel.info/`を10秒に1度チェックする。

consulの設定は `/etc/consul.d/` に置くとする。

```/etc/consul.d/.json
{
  "check": {
    "id": "eiel.info",
    "name": "HTTP eiel.info",
    "http": "http://eiel.info/",
    "interval": "10s",
    "timeout": "1s"
  }
}
```

この状態でconsul agentを起動する。

```
$ consul agent -server -bootstrap-expect 1 -data-dir /tmp/consul -config-dir=/etc/consul.d/
```

引数の意味なんかは公式サイトなどを参考にして欲しい。
参考: http://qiita.com/foostan/items/954f73173ea34eb361da#server1%E3%81%AE%E8%B5%B7%E5%8B%95-bootstrap-expect%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E4%BD%BF%E7%94%A8

死活監視の実行結果は curl コマンドなどで確認できる。

```
$ curl http://127.0.0.1:8500/v1/health/state/any | jq .
[
  {
    "Node": "xxx.local",
    "CheckID": "eiel.info",
    "Name": "HTTP eiel.info",
    "Status": "passing",
    "Notes": "",
    "Output": "中略",
    "ServiceID": "",
    "ServiceName": ""
  },
  {
    "Node": "xxx.local",
    "CheckID": "serfHealth",
    "Name": "Serf Health Status",
    "Status": "passing",
    "Notes": "",
    "Output": "Agent alive and reachable",
    "ServiceID": "",
    "ServiceName": ""
  }
]
```

jqコマンドはみやすくするためだけに利用している。

なにもしなくてもAgentの死活監視が行なわれている。

状態が`critical`なものだけ`warning`のものだけを表示したりすることもできる。
jsonファイルで指定していたurlにアクセスできない状態になると`critical`になる。

```
$ curl http://127.0.0.1:8500/v1/health/state/critical | jq .
[]
```

他にも絞り込みする機能が一応あるが説明していない概念が登場する。
参考: https://www.consul.io/docs/agent/http/health.html

HTTP以外のチェックがしたい場合は下記を参考になる
参考: https://www.consul.io/docs/agent/checks.html

### criticalになったときにコマンドを実行

ちょっと試すには `consul watch`コマンドが便利だ。

```
$ consul watch -type checks -state critical "jq ."
```

`-type checks`の変更を検知するという意味らしい。
`-state critical` は状態が`critical`なものだけ表示され、ここに変化があればコマンドが実行される。何かがcriticalになっても実行されるし、ciriticalじゃなくなっても実行される。実行されるコマンドは `jq .` となる。

あとは監視しているサーバのapacheなり,nginxをとめたりすると、JSONが表示される。(curlで表示したときと同じもの)

設定ファイルに記述したい場合は

```config.json
{
  "watches": [{
    "type": "checks",
    "state": "critical",
    "handler": "jq . > /tmp/critical.log"
  }]
}
```

みたいにしてやると良い。`/tmp/critical.log`に現在の状態がかきこまれる。
あとはメールに送るなりチャットに送るなり、好きにするとよさそうだ。

死活監視のための機能はあまり充実はしていない。

参考 https://www.consul.io/docs/agent/options.html#watches
Qiitaの記事が.mdで取得できることを知った

## 参考

* [投稿のMarkdownを手軽に取得する – Qiita:Support](https://increments.zendesk.com/hc/ja/articles/202768605-投稿のMarkdownを手軽に取得する)

## やり方

記事のURL末尾に`.md`をつけてアクセスすれば良い。

* http://qiita.com/tukiyo3/items/f5285f836f7c4d2143ec

の場合、

* http://qiita.com/tukiyo3/items/f5285f836f7c4d2143ec.md

@narikei さんからjsonも対応していると教えていただいた。

* http://qiita.com/tukiyo3/items/f5285f836f7c4d2143ec.json

今はjsonの応答が404の様子
20150617 rails tutorial


## OpenStruct
使うべき
http://docs.ruby-lang.org/ja/2.0.0/class/OpenStruct.html

## Rails風味のRuby

http://railstutorial.jp/chapters/rails-flavored-ruby?version=4.0#top

## Test

新バージョンでは
require 'rails_helper'
となっている。 rails_helper, spec_helper に分かれた

    config.include Capybara::DSL
capybara で visit メソッドが追加される。

テストをどれ位やるか。D.H.H.のコメント
http://journal.sooey.com/208

#### Test実行自動化したい

Guard

http://railstutorial.jp/chapters/static-pages?version=4.0#sec-guard

## RESTについて
Webを支える技術 ── HTTP，URI，HTML，そしてREST
http://gihyo.jp/magazine/wdpress/plus/978-4-7741-4204-3

## sublime 

 ctrl+p でファイル名検索便利！
 shift+ctrl+r でインデント調整は何？

###

```
$ rails new sample_app --skip-test-unit
```

秘密トークン

```
rails generate rspec:install
rails generate controller StaticPages home help --no-test-framework
```

## 

http://railstutorial.jp/chapters/a-demo-app?version=4.0#sec-microposts_resource

## demo_app

http://railstutorial.jp/chapters/a-demo-app?version=4.0#top

## editor

sublime イイネ
vim

## git

ここを参照として覚えておいたほうがいい
https://git-scm.com/book/ja/v1

    $ git config --global alias.co checkout
    $ git config --global core.editor"C:\RailsInstaller\sublime\sublime_text.exe --new-window --wait"

    $ git show
ctrl+p, d で移動


## rail
+ DRY
+ Coc = 設定よりも規約

RailsCasts (英語) (Ryan Bates) : 極めて質の高い (ほぼ) 無料のスクリーンキャスト
Pluralsight (英語): 質の高い商用のスクリーンキャスト
Code School (英語): プログラミングを対話的に学習できるコース
Rails ガイド: トピック毎に分類された最新の Rails リファレンス
http://railsguides.jp/
RailsCasts (英語) (Ryan Bates): さっきも RailsCasts を紹介しましたっけ？そのぐらい RailsCasts はお勧めです。

## prepare

rails installer
http://railsinstaller.org/en

gem -v
2.2.2 だとまずそうなので気を付けて
現状のrails installer だと2.2.2 になってて更新しないとしんどい

https://github.com/mhartl/rails_tutorial_sublime_text
これほしい
Install Sass syntax highlighting
trailing spaceてなに？

padrino も sinatra よりとっつきやすいかも。
iOS9でお披露目されたPiP(Picture in Picture)

# iOS9のアップデート
[【iOS9】API Diffs から見る iOS 9 の新機能 #wwdc](http://qiita.com/shu223/items/c70f99c4c121f41e7845)のまとめが
非常に分かりやすくまとまっていたのでオススメです。

んで、今回はこの記事の中でとりわけ目に留まったPiPを触ってみようと思いました。

# PiPとは？
**Picture in Picture**の略で、
[Youtubeのアプリ](https://itunes.apple.com/jp/app/youtube/id544007664?mt=8)には以前(2013年夏頃)からついていた機能です。
以下の画像のように、動画を小窓として右下に置いておけるやつですね。
![Screen Shot 2015-06-18 at 8.50.01.png](https://qiita-image-store.s3.amazonaws.com/0/37074/c6528d76-b3ee-36c8-5da3-2bfcc4476e1e.png)

主にアプリ内での動画の再生に使われるAVKit Frameworkに新たに追加されたAVPictureInPictureControllerを使用することによってこれと同様のことができるようになります。2年も経ってなぜAppleがこのController Classを出してきたのかイマイチ理解が及んでいないのですが、[iPadでのマルチスクリーンが導入](http://www.pcmag.com/article2/0,2817,2485598,00.asp)されることなども踏まえると、恐らくAppleとしてタブレット(iPad系)の利用でのUI/UX改善に力を入れている上での1アップデートだと思われます。Watchも並行して動いてますし、iPhoneはもう十分やることやったよ・・・って感じでしょうか？

# 実際にPiPを見てみる
Apple Developer Libraryに[サンプルコード](https://developer.apple.com/library/prerelease/ios/samplecode/AVFoundationPiPPlayer/Introduction/Intro.html)が出ているのでDLしてビルドしてみましょう。([Xcode7](https://developer.apple.com/xcode/)が必要です。)

![Screen Shot 2015-06-18 at 9.02.40.png](https://qiita-image-store.s3.amazonaws.com/0/37074/2065401f-d27c-e598-7bd3-c20042f43a59.png)

クラス構成はこんな感じです。
Controllerクラスにちょこっとロジックが書かれている感じですね。
AVPictureInPictureControllerがどうやって使っているかは時間があるときに覗いてみます。
(とりあえず今はビルドしてみたい・・・！)

開いてみると再生バーの下に"PiP"というボタンがくっついてきます。

![Screen Shot 2015-06-18 at 9.08.24.png](https://qiita-image-store.s3.amazonaws.com/0/37074/471d4a0f-3124-0793-247b-e556ee13ef12.png)

これを押してあげるとYoutubeのアプリでみた"アレ"が再現できちゃうわけです。

![Screen Shot 2015-06-18 at 9.10.59.png](https://qiita-image-store.s3.amazonaws.com/0/37074/7a6f86f7-4e33-fede-85fc-5b5298253531.png)

こんな感じです。ちなみにこれ、ドラッグしていろんな場所に小窓を固定できます。
ここはYoutubeのアプリと異なるところですね。

# 既にHackされている。。。
このPiP、現在の公式の仕様ではAppleの公式ビデオ系アプリかSafariでのビデオ閲覧でしか使えないのですが、
[アメリカのAdam氏](https://twitter.com/b3ll/status/610957432278392832)が、"この機能クソつまんね"とどのアプリでもこのPiPが使えるようにHackしたそうです(脱獄不要)。

# Reference
- [【iOS9】API Diffs から見る iOS 9 の新機能 #wwdc](http://qiita.com/shu223/items/c70f99c4c121f41e7845)
- [Apple iOS 9 Adds Split-Screen Multi-Tasking for iPad](http://www.pcmag.com/article2/0,2817,2485598,00.asp)
- [AVFoundationPiPPlayer: Picture-in-Picture Playback with AVKit](https://developer.apple.com/library/prerelease/ios/samplecode/AVFoundationPiPPlayer/Introduction/Intro.html)
- [Developer hacks iOS 9’s Picture in Picture mode to support any type of content
](http://9to5mac.com/2015/06/17/picture-in-picture-hack-ios-9/)
オレオレ Atom パッケージまとめ


オレオレな Atom パッケージについて、まとめます。
随時、更新して行きます。

## オレオレ Atom パッケージ一覧

| 名称 | 概要 |
|:--|:--|
| [file-icons](https://atom.io/packages/file-icons) | ファイルアイコンのデザインを格好良くする |
| [highlight-selected](https://atom.io/packages/highlight-selected) | 選択中の単語をハイライトする |
| [language-rspec](https://atom.io/packages/language-rspec) | RSpec のシンタックスハイライトとスニペットを提供する |
| [rails-transporter](https://atom.io/packages/rails-transporter) | Rails の各種関連ファイルを即座に開く |
| [toggle-quotes](https://atom.io/packages/toggle-quotes) | ダブルクォートとシングルクォートを切り替える
| [symbols-tree-view](https://atom.io/packages/symbols-tree-view) | コードのアウトラインを表示する |
| [sublime-style-column-selection](https://atom.io/packages/Sublime-Style-Column-Selection) | 短形による選択を可能にする |

## 合わせて読みたい

- [Rails開発用のAtomエディタの設定メモ - Qiita](http://qiita.com/knt45/items/90e53722183e70de3099)
- [Atom でインストールしている package 一覧 - Qiita](http://qiita.com/iorionda/items/b108e73e51ff40049c60)
- [Atomエディタで使って気に入ったpackageとか - Qiita](http://qiita.com/horimislime/items/72de9580125151ac6af0)
- [Atomで利用しているパッケージ - Qiita](http://qiita.com/fukuiretu/items/bd233d38c92d99eb0684)
- [ATOM活用ガイド - Qiita](http://qiita.com/saicologic/items/a9ff4206b82efd9cebdf)
- [Atom上でRailsプロジェクト内のファイル移動を楽にするRails-Transporterというパッケージを書いた - HK's Weblog](http://hakutoitoi.hatenablog.com/entry/2014/05/21/081606)
Windows Server 2012 R2 リモートディスクトップ構築

#はじめに
職場のサーバーにリモートデスクトップサービスを入れるため作業を行ったが、思いのほか手間取ったので記録する。

#ライセンス認証
ライセンス認証はサーバーのアクティブ化とCALのアクティブ化が２段階にわかれている。
サーバーのアクティブ化は、Webで簡単にアクティブ化ができたが、CALのアクティブ化はライセンスにより使う番号が異なる。
職場では、ライセンスプログラムが「Select Plus」なので「パブリックカスタマーNo(PCN)」が必要になった。
Webでは契約番号を使っていたので、アクティブ化に失敗したが、PCNを使えば問題なく認証できるはず。

#インストールした役割
##ライセンスサーバー
ライセンスサーバー側には、下記の機能を追加した。

* リモートデスクトップサービス
* リモートデスクトップセッションホスト
* リモートデスクトップライセンス
* リモートデスクトップ接続ブローカー

##リモートデスクトップサービス提供サーバー
提供側サーバーには下記の機能を追加した。

* リモートデスクトップサービス
* リモートデスクトップセッションホスト
* リモートデスクトップ接続ブローカー
* リモートデスクトップWebアクセス

#インストール後の作業
インストールしただけでは、アクティブ化したライセンスが使えない。
また、「ネットワーク認証でリモートデスクトップを実行しているコンピュータからのみ接続を許可する」にチェックされリモートデスクトップが使えなくなった。
[【Windows】Windows Server 2012 R2 リモート デスクトップ サーバー構築（ワークグループ環境）](http://monogusa.hatenablog.com/entry/2014/11/08/170759)を参考に作業をするとうまくいった。
職場では、ADを構成している。
##ライセンスモードの指定
PowerShellにて下記のコマンド(上記サイトのコマンドそのまま使用)を実行する。
調べたところMode:2はデバイス、Mode:4はユーザーとのこと。

```ps1
(gwmi -Class Win32_TerminalServiceSetting -Namespace root¥cimv2¥TerminalServices).ChangeMode(2)
```

##ライセンスサーバーの指定
ライセンスサーバー側では、PowerShellにて下記のコマンド(上記サイトのコマンドそのまま使用)を実行する。
提供側サーバーは、ライセンスサーバーのホスト名を指定する。

```ps1
(gwmi -Class Win32_TerminalServiceSetting -Namespace root¥cimv2¥TerminalServices).SetSpecifiedLicenseServerList("localhost")
```
localhostにすると、他のサーバーから参照するとよろしくないので、ライセンスサーバーのサーバーを指定する。
#簡単な構築
提供側サーバーでエラーになるので、調査していたら[Windows Server 2012 リモート デスクトップ環境の構成について](http://blogs.technet.com/b/askcorejp/archive/2012/12/28/windows-server-2012.aspx)を見つけた。

#追加ライセンス認証
追加ライセンスのインストールは、コマンドプロンプトで「RDライセンスマネージャー」を起動してライセンスを認証する。
![install1.png](https://qiita-image-store.s3.amazonaws.com/0/63970/d163b665-60da-8063-6e65-0c3517c11fab.png)
ライセンスの認証は、「RDライセンスマネージャー」のサーバー名で右クリックして「ライセンスのインストール」を選択してインストールする。
![install2.png](https://qiita-image-store.s3.amazonaws.com/0/63970/ec10ddd5-f85a-84b0-8fdc-aeaeb63a8bbc.png)

ライセンスのインストールを選択すると、以前登録した登録情報が表示され、インストールする画面になる。以前、電話で画面認証したので、電話で認証するための画面が表示される。
OpenCV for iOS でリアルタイムカメラ画像処理

OpenCV for iOSを使ってiphoneのカメラから取得した映像をリアルタイム処理して表示します．

## 環境

- iOS: v8.3
- Xcode: 6.3.1
- OpenCV for iOS: v2.4.9

## OpenCV for iOSの導入

まずは[OpenCV公式ホームページ](http://opencv.org/)からOpenCV for iOSをダウンロードします．
解凍するとopencv2.frameworkが出てくるのでこれを利用します．

Xcodeを立ち上げ，Single View Appricationにてプロジェクトを新規作成，さきほど解凍したファイルをtargetのBuild Phase内のLink Binary With Librariesに追加します．

その他，今回は

- QuartzCode.framework
- CoreImage.framework
- CoreMedia.framework
- CoreVideo.framework
- Accelerate.framework
- AssetsLibrary.framework
- AVFoundation.framework
- UIKit.framework
- Foundation.framework
- CoreGraphics.framework

といったフレームワークを使用するので，各々追加します．

これで，iOSデバイスカメラから取得した映像をopenCVで処理する下準備が整いました．

## カメラ画像処理

ビューコントローラにカメラコントローラを追加し、ビューがロードされたときに初期化を行います．

ViewController.hにて以下を記述

```objc

//ViewController.h
 
#import <UIKit/UIKit.h>
#import <opencv2/highgui/ios.h>
#import <opencv2/opencv.hpp>
@interface ViewController : UIViewController<CvVideoCameraDelegate>
{
    CvVideoCamera* videoCamera;
    ...
}
...
@end
```

ViewController.mmにて以下を記述.

```objc

//ViewController.mm
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    videoCamera = [[CvVideoCamera alloc]
                   initWithParentView:imageView];
    videoCamera.delegate = self;
    videoCamera.defaultAVCaptureDevicePosition =
    AVCaptureDevicePositionBack;
    videoCamera.defaultAVCaptureSessionPreset =
    AVCaptureSessionPreset352x288;
    videoCamera.defaultAVCaptureVideoOrientation =
    AVCaptureVideoOrientationPortrait;
    videoCamera.defaultFPS = 30;
 
    [videoCamera start];
}
```

以上の処理にて，使うカメラの種類(front/back)，カメラ画像の向き，FPS，解像度等を指定します．
なお，今回はcv::Mat等c++の関数を利用するので拡張子を.mmに変更します．

最後の[videoCamera start]が呼ばれるとカメラが起動します．しかし，この状態では表示が横に回転している等，不具合が生じている場合があります．これは，viewDidLoad関数が呼び出されたあとに，カメラの向き，解像度等の取得が行われるため，設定がうまくいっていないことによります．

今回は[videoCamera start]の代わりに

```objc

NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(startCamera:) userInfo:nil repeats:NO];
 
 
- (void)startCamera:(NSTimer *)timer
{
    [videoCamera start];
}
```

を記述し，呼び出すタイミングをずらしています．

あとはprocessImage関数内に，cvの処理を記載すればOKです．

今回のコードを利用し，特定の色以外をグレースケール化するコードをgithubにおきました[https://github.com/yukiB/extractColorOpenCV-IOS](https://github.com/yukiB/extractColorOpenCV-IOS)．

画面をタップすると，色抽出の閾値をsliderで制御できるようになります．
cheerio-httpcliで俺の勉カレをスクレイピングしてみた

[俺の勉カレ](http://meeting.blue/?a=kanto)様に超リスペクト！！

## 参考

* [Node.jsでスクレイピングするならcheerio-httpcliが超快適だったよってお話 - bokuweb.me](http://blog.bokuweb.me/entry/cheerio-httpcli)

## インストール

```bash:
apt-get install -y node npm coffeescript
npm install cheerio-httpcli
```

`node_modules`ディレクトリに`cheerio-httpcli`がインストールされる。
後でディレクトリを移動したい場合は、このnode_modulesディレクトリも一緒に移動すること。

## 使い方

```coffeescript:meeting.coffee
client = require('cheerio-httpcli')
url = 'http://meeting.blue/?a=kanto'
client.fetch url, {}, (err, $, res)->
  $('.meeting-list-container > .meeting-container').each ()->
  console.log $(this).text()
```

```bash:取得
coffee meeting.coffee
```

```text:出力例
東京都06月18日(木) 10:00〜060CMS『concrete5』導入活用セミナー 2015年6月4人分の空席アットビジネスセンター渋谷東口駅前 502号室
東京都06月18日(木) 13:20〜010Sencha Ext JS 5 無料セミナー #91人分の空席ブリッジにいがた 商談スペースB（1F店舗内を通過し、奥の階段から2Fにあがってください）
東京都06月18日(木) 13:30〜0120（３時間無料セミナー）NoSQLのApache Cassandraを知ろう！ (2015/6/18)2人分の空席渋谷ヒカリエカンファレンス/貸し会議室　１１階　Room D
東京都06月18日(木) 16:00〜020OnetoOne マーケティング最新動向セミナー17人分の空席加賀電子本社ビル２F会議室A
...
```

## メール送信

```bash:$HOME/cron/capture/meeting.sh
#!/bin/sh
set -eu

cd $HOME/cron/capture/
coffee meeting.coffee | mail -s "meeting:kanto" mymail@addr.com
```
xvfbwrapper + selenium でpythonからweb画面キャプチャ

xvfbwrapper + selenium を使ってpythonから仮想ディスプレイのweb画面をキャプチャする方法を紹介します．

## 環境

- Ubuntu14.04
- python 2.7.10
- 2015/06/18時点で最新版のFirefox


## 下準備

まず必要ライブラリ等をインストールします

    apt-get install xvfb
    pip install xvfbwrapper
    pip install selenium

Xvfbは，仮想的なフレームバッファを実現するソフトウェアです．
今回はこれを使って仮想的なディスプレイを作り，firefoxでWebブラウザを立ち上げ，ページのスクリーンショットを撮ります．
xvfbwrapperはその名の通り，XvfbのpythonWrapper, seleniumは自動テストを行ったり，Webサイトを操作して何かを取得したりしたい時に便利です．
詳しくは[こちら](http://selenium-python.readthedocs.org/en/latest/api.html)

## 日本語フォントのインストール

入れないとスクリーンショットが文字化けします．

    $ wget -q https://www.ubuntulinux.jp/ubuntu-ja-archive-keyring.gpg -O- | sudo apt-key add -
    $ wget -q https://www.ubuntulinux.jp/ubuntu-jp-ppa-keyring.gpg -O- | $ sudo apt-key add -
    $ sudo wget https://www.ubuntulinux.jp/sources.list.d/quantal.list -O /etc/apt/sources.list.d/ubuntu-ja.list
    $ sudo apt-get update
    $ sudo apt-get install ubuntu-defaults-ja

## キャプチャ

下準備が済んだので実際にキャプチャしてみましょう．

```
from selenium import webdriver
from xvfbwrapper import Xvfb


class CapturePages(object):

    def __init__(self, _width, _height):

        # adapting to japanease 
        fp = webdriver.FirefoxProfile()
        fp.set_preference('intl.accept_languages', 'ja-JP, ja')
        self.xvfb = Xvfb(width=_width, height=_height)
        self.xvfb.start()
        # getting webdriver
        self.browser = webdriver.Firefox(firefox_profile=fp)


    def capPage(self, page, file_name):
        # waiting 2 sec
        self.browser.implicitly_wait(2)
        # going to webpage
        self.browser.get(page)
        # screen capture
        self.browser.save_screenshot(file_name)
        # closing web browser
        self.browser.close()

    def endCapture(self):
        self.xvfb.stop()
        self.browser.quit()

if __name__ == '__main__':
    capture = CapturePages(1280, 720)
    capture.capPage("https://www.google.co.jp", "sample.png")
    capture.endCapture()
```

sample.pngにgoogleのトップページが保存されているはずです．

## 参考サイト

- xvfbwrapper(https://github.com/cgoldberg/xvfbwrapper)
- Webサイトをselenium + Xvfb + sshでpythonから操作する(https://abeerforyou.com/?p=702)
- Ubuntu12.04 + Selenium の環境作成(http://qiita.com/u_s_k/items/8b96ee2cc29e333b9cae)
- python で Web サイトをクローリングする(http://qiita.com/hideshis/items/1c113d21321d6d580bce)
MySQL操作（基礎）

## DBに接続

ユーザー名root, パスワード無しの場合

```
> mysql -u root
```

## MySQLでデータベース一覧を確認

```
mysql > SHOW DATABASES;
```

## データベース名を指定してどんなテーブルが定義がされてるか確認

```
mysql > SHOW TABLES FROM _DB_NAME_;
```

## 操作したいDBに接続

```
mysql > USE _DB_NAME_
```

## 操作したいDBに接続済でテーブル一覧を確認

```
mysql > SHOW TABLES;
```

## テーブル構造を確認

```
mysql > DESC _TABLE_NAME_;
```
goでwindowsでwindow

## インストール
   go get github.com/ohisama/win
## 画像
![image](https://qiita-image-store.s3.amazonaws.com/0/18104/07c9367d-6369-33e3-f512-90c26d14de56.png)

## サンプルコード
```
package main
import (
	"syscall"
	"github.com/ohisama/win"
)
var x int32
func WndProc(hWnd syscall.Handle, msg uint32, wParam, lParam uintptr) uintptr {
	switch msg {
	case win.WM_PAINT:
		x++
		var strMessage = "Hello"
		var ps win.PAINTSTRUCT
		hdc := win.BeginPaint(hWnd, &ps)
		for i := 0; i < 256; i++ {
			for j := 0; j < 256; j++ {
				iro := i * 256 * 256 + j
				win.SetPixelV(hdc, int32(i), int32(j), int32(iro))
			}
		}
		win.Ellipse(hdc, x,  200, 200 + x, 400)
		win.TextOut(hdc, 100, 100, strMessage, int32(len(strMessage)))
		win.EndPaint(hWnd, &ps)
		return 0
	case win.WM_COMMAND:
		return 0
	case win.WM_DESTROY:
		win.PostQuitMessage(0)
		return 0
	default:
		return win.DefWindowProc(hWnd, msg, wParam, lParam)
	}
	return 0
}
func main() {
	win.WinMain(syscall.NewCallback(WndProc))
}


```
技術英語 > reap the thread itself

https://github.com/torvalds/linux/commit/8e8e2518fceca407bb8fc2a6710d19d2e217892e
> md_check_recovery could reap the thread itself,...

http://ejje.weblio.jp/content/reap
> reap
> 1.a. <作物を> 刈り入れる、収穫する
> 1.b. <畑などから> 作物を収穫する
> 2. <報いなどを> 受ける; <成果・利益などを>上げる、収める

上のreap the thread itselfは「スレッドを終了してしまう」という意味なのだろう。

http://stackoverflow.com/search?q=reap
> - ...reap the process
> - How can I reap my children without setting the signal handler...
> - ...reap the child using waitpid()
Polymer： リリース前にやるべきこと。Elementsを1つのファイルにまとめる

# Polymer0.5でVulcanize（硬化）する方法

#### Polymerは複数のElement（Web Components）を組み合わせて、作っていきます。そのため、ブラウザからリクエストが来た時に、複数のHTMLファイルが通信でやりとりされコストが大きいです。

### Vulcanizeツールは、複数のElementを1つのファイルにまとめることで、通信のオーバーヘッドを減らそうという試みです。
Vulcanizeツールには、全部（HTML、JS、Element、Element内のJS）まとめるパターンと、
Elementのみまとめ、JSは別ファイルに別途まとめるパターン（Content Security Policy）があります。

Vulcanizeの説明は以下が詳しいです。
　　https://www.polymer-project.org/0.5/articles/concatenating-web-components.html

VulcanizeツールのGitHubはこちら（ここにも使い方が載ってます。）
　　https://github.com/Polymer/vulcanize/tree/polymer-0.5

## 使い方
### Vulcanizeのインストール
***
バージョン指定をしてインストールします。バージョン指定しないと1.0系用のVulcanizeが落ちてきてしまいます。
Windows環境だとうまく落とせなかったので、Fedora19上で以下を実行しました。

`sudo npm install -g vulcanize@0.7.11`  

### 使い方
***
#### CSPモード 
　　　Extract inline scripts to a separate file

`vulcanize -o build.html --verbose --csp --strip index.html`

### オプション

-  `--output`, `-o`
  - Output file name (defaults to vulcanized.html)
-  `--verbose`, `-v`
  - More verbose logging
-  `--help`, `-v`, `-?`
  - Print this message
- `--config`
  - Read a given config file
- `--strip`, `-s`
  - Remove comments and empty text nodes
-  `--csp`
  - Extract inline scripts to a separate file (uses `<output file name>`.js)
-  `--inline`
  - The opposite of CSP mode, inline all assets (script and css) into the document
- `--inline --csp`
  - Bundle all javascript (inline and external) into `<output file name>`.js
- `--abspath`, `-p`
  - Specify site root. Resolve paths to absolute paths based on site root
- `--no-strip-excludes`
  - Keep imports excluded from inlining
- `--version`, ` -V`
  - print version information

#### 出力結果は
　　build.html　と　build.js　の2つ

***
#### inlineモード（JSもHTMLもまとめて1ファイルにする）
　　　The opposite of CSP mode, inline all assets (script and css) into the document

こっちは私の環境ではうまくいきませんでした。
`vulcanize -o build.html --verbose --inline --strip index.html`

#### 出力結果は
　　build.htmlのみ
不正アクセスをhosts.denyに自動で登録

## 前置き
昔Xoops Cubeで作ったサイト（しばらく放置していた）が「なんか最近重たいな〜」と思って調べると、MySQL DBのコメントテーブルが大量のダミーデータで埋め尽くされていて、そいつがサーバ全体のパフォーマンスをダウンさせていた。

しかもそのコメント欄は非表示にしてあったから、気付かなかった。
（非表示にはなっていたが、投稿は受け付けられる仕組みになっていた）

とりあえずその大量のダミーデータを消し去ることで解決したが、どうせならBotとかDOSアタックを弾こう、とちょっとしたスクリプトを書いてみた。

## 簡易DenyHosts
ApacheのHTTPDのログを見ていると、公開していないURLに対してPOSTしてくる奴らが居る。
ipアドレスから調べると、ロシアとか中国とか・・・。

ということで、そいつらをまとめて `/etc/hosts.deny`に放り込む。
Bashスクリプトは下のような感じ。

```lang:bash
#!/bin/bash

LIST=$(grep "POST /modules/x_movie/" /var/log/httpd/access_log| awk '{print$1}'| uniq)

result=$(grep "POST /phpmyadmin/scripts/setup.php" /var/log/httpd/access_log| awk '{print$1}'| uniq)
LIST="${LIST} ${result}"

for ip in $LIST; do
  if [ "$(grep $ip /etc/hosts.deny)" = "" ]; then
    echo "# /root/auto_deny.sh" >> /etc/hosts.deny
    echo "ALL EXCEPT sshd : $ip : DENY" >> /etc/hosts.deny
  fi
done
```

このスクリプトをcronで1分ごとに実行しておけばOK。

`ALL EXCEPT sshd`にしたのは、もし自分がテストをしていてDenyされてしまったら、手も足も出ないから、sshdだけ外した。
sshdは[DenyHosts](http://denyhosts.sourceforge.net/)でカバーしている。

簡易的だけど効果テキメン！
EC2のサーバ単体で Apache Spark を動かす方法


# 概要

分かってしまえば簡単なのだけど、クラスタだの、Docker だのの情報に振り回されてハマってしまったので、開発目的や評価目的で Spark を動かすのは簡単なんだよ、というのを書いておく。

# サーバ仕様

- t2.large (Memory 8GB)
- Amazon Linux

t2.micro + [docker-spark](https://github.com/sequenceiq/docker-spark) のメモリエラーで悩まされたので、どこかで読んだ「Hadoop, Spark の最低スペックはメモリ8GB」という情報を元に t2.large を借りた。Memory 1GB だと厳しいけど、評価だけなら 2 ~ 4GB でも十分かもしれない。

# Spark のインストール

Spark 自体は Hadoop に依存しているけど、事前に Hadoop をインストールする必要はない。[Spark Overview](https://spark.apache.org/docs/latest/) にある情報をもとに、[ダウンロードページ](http://spark.apache.org/downloads.html) から **Pre-built for Hadoop 2.6 and later** をダウンロードして、展開すれば OK。

```bash
$ cd /usr/local/src
$ sudo wget http://ftp.riken.jp/net/apache/spark/spark-1.4.0/spark-1.4.0-bin-hadoop2.6.tgz
$ sudo tar zxvf spark-1.4.0-bin-hadoop2.6.tgz
$ cd spark-1.4.0-bin-hadoop2.6
```

展開したディレクトリの中に入れば、あとは自由にコマンドを実行できる。（必要に応じて、ディレクトリを /usr/local/spark などに移動しよう）


# Spark を動かす

単体のサーバで Spark を動かす方法は、主に下記の2通り。（local-cluster というモードもあるけど、一般的でないので、ここでは無視）

- local モードで動かす方法
- standalone のクラスタで動かす方法

## local モードで動かす場合

```bash
$ ./bin/run-example SparkPi 10
$ ./bin/spark-shell --master "local[2]" 
scala> sc.parallelize(1 to 1000).count()
$ ./bin/pyspark --master "local[2]"
>>> sc.parallelize(range(1000)).count() 
```
などなど。

コマンドの `--master` 引数に `local[*]` 等を渡せば良い。カッコ内の数字は利用するスレッドの数で、`*`を与えると CPU core 数のスレッドが立ち上がる。マルチスレッド特有の振る舞いもあるので、2以上の値で実行するのが良いと思う。

なお、`--master` 引数の詳細は [SparkContext: マスターURL](http://www.ne.jp/asahi/hishidama/home/tech/scala/spark/SparkContext.html#h_master_url)が詳しい。

### standalone モードで動かす

詳細は [Spark Standalone Mode](https://spark.apache.org/docs/latest/spark-standalone.html) を参照。下記のように master, slave を起動する。

```bash
$ sudo ./sbin/start-master.sh
$ sudo ./sbin/start-slave.sh "spark://ip-10-0-1-42:7077"
```

start-slave.sh の引数には、master の URL を与える必要があるので注意。`ps aux | grep java`などとプロセスを確認すれば、master がどういう名前で立ち上がっているかを確認できる。

あとは、`spark-shell` や `pyspark` の起動時の引数に master url を渡せば、クラスタを使って演算することができる。

```bash
$ ./bin/spark-shell --master "spark://ip-10-0-1-42:7077"
scala> sc.parallelize(1 to 1000).count()
```

なお、サーバの 8080 ポートにブラウザでアクセスすると、下記のようなクラスタの詳細が見られるはず。spark-shell でコマンドを実行したりすると、worker への分配処理などが見れて楽しい。

![Kobito.h8cqee.png](https://qiita-image-store.s3.amazonaws.com/0/41336/c07ef771-7b7b-4364-2ec3-136c9dd513cd.png "Kobito.h8cqee.png")

# まとめ
というわけで、ダウンロードして展開すれば、単体のサーバで Spark や Spark のクラスタ機能を試せます。

実際に大規模なデータ処理が必要になったら、 [spark-ec2](https://spark.apache.org/docs/latest/ec2-scripts.html) で EC2 でクラスタを立てたり、EMR で動かしたりしてみようと思います。
簡単にbase64をエンコード・デコード変換する方法

わざわざbase64変換ツールやCGIサービス的なものを使わなくても、
ブラウザ上で簡単に変換できます。

# 手順

## ブラウザのデバッガーを開く

Chrome, Firefoxなら `Cmd+option+i` でDeveloper Tools的なものが開くと思います

## エンコード・デコード

```js
atob("SGVsbG8sIHdvcmxk")
// => "Hello, world"

btoa("Hello, world")
// => "SGVsbG8sIHdvcmxk"
```

- `atob()` base64から文字列へ
- `btoa()` 文字列からbase64へ


aがbase64、bが文字列となっていて初見殺し..


iOSのレシート情報とか少し機微なものを扱うときは、
謎のWebサービスを使うとデータ流出の恐れがあるので、
ローカル環境で完結しておくと安全ですね。
Apache SparkをOSXで動かそう


Spark 1.4.0がリリースされましたね。
https://spark.apache.org/releases/spark-release-1-4-0.html

* SparkR
* DataFrame API

など注目のアップデートが盛りだくさんです。
ビルド済みパッケージを利用してもいいのですが、ちゃんとビルドしてつかってみよう！
特にドキュメントと違うことはないけれど、メモ代わりに残しておきます。

## 環境

* OSX Yosemite
* MacBook Pro(Retina, 2012)

ドキュメントには、``Building Spark using Maven requires Maven 3.0.4 or newer and Java 6+.``とあるので、事前にMavenとJavaがインストール済みかを確認しておく。

```
# Java 6以上が必要です。
java -version
```
```
# Maven 3.0.4以上が必要です。
mvn -version
```

残念な結果だったらHomebrewなりで環境を整えておきます。

## ダウンロード
[ここ](https://spark.apache.org/downloads.html)からバージョンとPackage Type(Source Codeを選択)を確認しつつダウンロード。
その後、解凍して``/usr/local``に置いておく

```
cd ~/Download
tar xzvf spark-1.4.0
mv spark-1.4.0 /usr/local
```

## 早速ビルド

Sparkのホームに移動

```
cd  /usr/local/spark-1.4.0
```

んでビルドコマンドを実行。

```
build/mvn -Pyarn -Phadoop-2.4 -Dhadoop.version=2.4.0 -DskipTests clean package
```

ちょっと待ってるとMavenが頑張ってくれてビルドが行われます。
僕はこれだけで特に何もなく終了。

## シェルの設定

~/.bash_profileにSparkのインストール先を書いておく。
なお複数のバージョンのSparkがインストールされている場合、ここで指定しておく。

```~/.bash_profile
# Apache Spark
# export SPARK_HOME=/usr/local/spark-1.3.1/
export SPARK_HOME=/usr/local/spark-1.4.0/
export PYTHONPATH=$SPARK_HOME/python:$PYTHONPATH
```

## その他設定
細かい設定は`$SPARK_HOME/conf/spark-env.sh`に書くのが正しいみたい。ここの書き方は今度またまとめるつもり。

## 次は

色々機能も増えているので試したいことは多いのだけれど、SparkRからいじってみようかな。SparkMLも興味がある。それらはまた今度！
UnsafePointer<CGAffineTransform>に値をセットする時



ちょっと引っかかったので。

```
func CGPathCreateWithEllipseInRect(rect: CGRect, transform: UnsafePointer<CGAffineTransform>) -> CGPath!
```

この関数を呼び出す時に、transformに値をセットしたい場合以下のようにする

```
  var scale : CGAffineTransform = CGAffineTransformMakeScale(0.5, 0.5)
  let path : CGPathRef = CGPathCreateWithEllipseInRect(rect, &scale)     
```

この時、scaleをletで宣言するとエラーになるけど、letにしたのが原因だと気付かずしばらく悩んだ。
ただ何故varでなくてはならないのか、というのがちょっとハッキリしない。
letは定数、varは変数だけど、その考え方だけでは解決しなさそう。

ちょっと引き続き調査



参考サイト

[How to correctly initialize an UnsafePointer in Swift?](http://stackoverflow.com/questions/24110769/how-to-correctly-initialize-an-unsafepointer-in-swift)
Deviseのパスワードリセットのチェック項目を増やす

deviseを使っていてパスワードリセットを行うとき、
登録したメールアドレスを入力します。
が、その時に入力する項目を増やす必要がありました。

このときどうしたら良いかわからなかったのでがんばって調べた。

# 結果だけ先に

deviseを使っているモデルに

```rb:user.rb
def self.reset_password_keys
  %i( email hoge fuga )
end
```

のようなクラスメソッドを追加し、

`app/views/devise/passwords/new.html.erb`に、
`hoge` `fuga`の入力フォームを追加すればできた。

# 詳しく
~~(詳しくは無いけど)~~
パスワードリセットは`passwords_controller`の`create`アクションなので、
そこを見る。
https://github.com/plataformatec/devise/blob/master/app/controllers/devise/passwords_controller.rb#L12

```rb:passwords_controller.rb
  def create
    self.resource = resource_class.send_reset_password_instructions(resource_params)
    yield resource if block_given?

    if successfully_sent?(resource)
      respond_with({}, location: after_sending_reset_password_instructions_path_for(resource_name))
    else
      respond_with(resource)
    end
  end
```

`resource_class.send_reset_password_instructions`のなかでモデルを探しているっぽいので中を見る。
と、
https://github.com/plataformatec/devise/blob/1a0192201b317d3f1bac88f5c5b4926d527b1b39/lib/devise/models/recoverable.rb#L126

```rb:recoverable.rb
def send_reset_password_instructions(attributes={})
  recoverable = find_or_initialize_with_errors(reset_password_keys, attributes, :not_found)
  recoverable.send_reset_password_instructions if recoverable.persisted?
  recoverable
end
```

`find_or_initialize_with_errors`が探してあるかないかエラー付きで返してくれるっぽい。

https://github.com/plataformatec/devise/blob/1a0192201b317d3f1bac88f5c5b4926d527b1b39/lib/devise/models/authenticatable.rb#L255

```rb
def find_or_initialize_with_errors(required_attributes, attributes, error=:invalid) #:nodoc:
  attributes = attributes.slice(*required_attributes).with_indifferent_access
  attributes.delete_if { |key, value| value.blank? }

  if attributes.size == required_attributes.size
    record = find_first_by_auth_conditions(attributes)
  end

  unless record
    record = new

    required_attributes.each do |key|
      value = attributes[key]
      record.send("#{key}=", value)
      record.errors.add(key, value.present? ? error : :blank)
    end
  end

  record
end
```

`attributes`から`required_attributes`に設定されたキーでDBから検索して、
その結果`record`が無ければ、エラーを追加する。のようになっていました。



なので`required_attributes`にチェックしたい項目を追加していけば良いので、
つまり`reset_password_keys`にチェックしたい項目を追加していけば良い。となりました。

# まとめ

最初に書いた通り、`reset_password_keys`にシンボル追加するだけでいい感じになりました。

## 感想
なんかこんな書き方しなくてもいいんじゃないかな。とか結構思いますが、僕のググり力の低さと英語読みたく無い力が相俟って、こんな風になってしまいました。

もしここまで読んでくださった方で、「こうすればすぐできるのに」とか「バッカジャネーノ！」という方がいらっしゃったら教えていただけたら幸いです。。。
insecure string pickle を読み込む

概要
====

バージョン 0 の pickle プロトコルは ASCII 表現でデータ直列化する．このテキストファイルを別のプラットフォームで利用する場合や，テキストモードでファイル転送する時にうっかり改行コードが書き変わるなどすると，insecure string pickle エラーが出て読み込めなくなることがある．

そんな時は，自前でファイルから読んで文字列を作成してから読み込めば良い．

ソースコード
===========

```py
import pickle

with open(inputfile, "r") as fin:
    data = pickle.loads("\n".join([line.strip() for line in fin]))
```

参考
=====
  - [11.1. pickle — Python オブジェクトの整列化 - Python 2.7ja1 documentation](http://docs.python.jp/2/library/pickle.html)