OmniAICreator/Qiita-1.07M huggingface dataset:
テキストエディタ　atom　の再インストールで困ったこと

## 背景
コードエディタとして"atom"を使っていて、おかしなことがあったので再インストールした。
再インストールで困ったことがあったのでメモしておく。

## 環境
Windows7

## おかしなこと
- アドビのフォント"Source Han Code JP"をフォントに指定すると、中華フォントになってしまう。
 - [Source Han Code JPが適用されない件](https://github.com/atom/atom/issues/11169)は、こちらで相談中。
- atomのヴァージョンが、コマンドプロンプトで表示する場合と、atom画面のhelpメニューで表示する場合とで異なる


```cmd
$ atom --version
1.5.3
```
でも、画面では1.5.4。
![image](https://qiita-image-store.s3.amazonaws.com/0/105793/c894e179-ea50-423c-fa28-201d9446d206.png)

## 再インストールの目的
フォントの件もバージョンが違うことが影響しているのではないかと思い、再インストールすることにした。

## 再インストールの結果
- フォントの件は状況変わらず。
- バージョンは差異がなくなった。

## 再インストールしたときに困ったこと
- インストール後、apmコマンド、atomコマンドが使えなくなった。
    - 原因は、環境変数のPATHが通っていなかったから。
      - apm
        `C:\Users\ユーザー名\AppData\Local\atom\app-1.5.4\resources\app\apm\bin`
      - atom
        `C:\Users\ユーザー名\AppData\Local\atom\app-1.5.4\resources\cli`


## 2016/3/18 追記
昨日、atom version 1.6.0 がリリースされたようで、上記と同じことをしました。その時気が付いたのですが、環境変数のPATHは
`C:\Users\ユーザー名\AppData\Local\atom\app-1.6.0\resources\cli`
の１つだけで、apmコマンド、atomコマンドの両方が使えるようになりました。
新人プログラマ応援 > コーディングプラットフォーム? > ideone | paizai.io | codingground | compileonline | wandbox

> ドーラ: 40秒で支度しな

Here you are.(どうぞ)
http://ideone.com/

ideoneでは色々な言語のコーディングを気軽に試せる。

ユーザ登録すれば過去のコードもアクセスできるのがいい。

アクセス制限はprivate / public などがあり、publicにしておくと他の人もそのコードにアクセスできる。
(例: [tcl &gt; zundoko](http://ideone.com/cRQ5TD))

参考 http://qiita.com/anakahala@github/items/004c6be35813ac9d96c1
dashDBのサービスレベルについてOfficialな参照先など

クラウドサービスについてのサービスレベルなど、公式に確認するのって結構大変かと思うのですが、すぐに探せるかはおいといて、ちゃんと公開されているみたいです。

毎回探すの面倒なんで備忘録的に書いておきます。

Software as a Service terms
https://ibm.com/software/sla/sladb.nsf/search2

ここで対象のクラウドサービスを入力「dashDB」だったり「Bluemix」だったり…

![image](https://qiita-image-store.s3.amazonaws.com/0/112854/09ee1187-8bc9-0c00-86f6-891d77b2b93e.png)

たまに英語版しかなかったりするのですが…

追伸：
クラウドサービスの契約条件などはこちらから
http://ibm.com/support/operations/jp/ja/documents.html
AD2 > Link > User Voltage Supplies > 1.4A current limit

@ [reference manual](https://reference.digilentinc.com/analog_discovery_2:refmanual#user_voltage_supplies) 6.4. User Voltage Supplies

> - 1.4A current limit
> - Minimum input voltage 1.8V
> - Pin-selectable 650 kHz or 1.3 MHz PWM frequency
...
ここ1年で学んだRails

[Qiitaで春の新生活を応援しましょう！](http://blog.qiita.com/post/141132737319/4yournewlife) ということだったので、先日[社内勉強会](http://startup-technology.com/)でesa.ioに作ってた資料がちょうどいい内容だったので公開してみます。

---

# 内容

Railsを触り始めてからちょうど1年くらい経ったので、ここ1年で学んだことを挙げていきます。

## スペック（１年前のぼく）

- CakePHP歴 2年
- RubyはChefを触ってたのでなんとなく知ってた、くらい。

## 状況

- PHPでプロダクト作ってるスタートアップに転職したと思ったら、オフショアで途中まで開発が進んでいたRailsプロジェクトを内製に巻き取る仕事にアサインされる。
- 社内にRails経験者ほとんどおらず。Rails触ったことないんですけど( ﾟДﾟ)！と思いつつ必死に勉強。

# Railsの学び方

## 書籍(Ruby)

- パーフェクトRuby
    - Rubyの基礎的なことを理解できるかと。
- Effective Ruby
    - Rubyという言語の構造にもうちょっと深く踏み込んで理解できるようになると思う。

## 書籍(Rails)
- パーフェクト Ruby on Rails
    - Railsの基礎的なことを理解できるかと。
- 実践Ruby on Rails 4
    - パーフェクト Ruby on Rails よりもうちょっと実践的な内容

## 書籍(その他)
- [Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp) `eBook`
    - テストの書き方

## Webサービス

- 安定の「ドットインストール」
    - Ruby入門 (全23回)
    - Ruby on Rails 4入門 (全28回)
    - ActiveRecord入門 (全14回)
    - RSpec入門 (全15回)  `PREMIUM`

## Webコンテンツ

- Qiita
- GitHub
    - GemのREADME、Wikiを読む
    - 有名なGemのソースコードは参考になる
- [Ruby on Rails ガイド](http://railsguides.jp/)
    - とりあえず全部読め。通勤中ずっとこれ読んでた。
- [Rails Webook](http://ruby-rails.hatenadiary.com/), [酒と泪とRubyとRailsと](http://morizyun.github.io/)
    - 個人ブログ。なんか色々まとめてくれてる。
- [7 Patterns to Refactor Fat ActiveRecord Models](http://blog.codeclimate.com/blog/2012/10/17/7-ways-to-decompose-fat-activerecord-models/) [(翻訳)](http://techracho.bpsinc.jp/hachi8833/2013_11_19/14738)
    - モデルのリファクタリング。レイヤーの増やし方。

## ツール

- Rubocop
    - [Ruby Style Guide](https://github.com/fortissimo1997/ruby-style-guide/blob/japanese/README.ja.md)を基にした静的解析ツール。
    - Ruby Style Guide は読んだ方がいい。
- Reek
    - コードの臭い解析器。デザインパターンに沿った指摘が多い気がする。
    - ドキュメントに結構ためになることが書いてある。
- Rails Best Practices
    - [Rails Best Practices](http://rails-bestpractices.com/)に沿った指摘をしてくれる。
    - Rails Best Practicesは知見だらけ。

# 小ネタ

## Gemを探す
- おれの財宝か？欲しけりゃくれてやる。探せ！この世のすべてをそこに置いてきた！
- とにかく便利なGemをたくさん知ることがRails上達の基本。存在するものは使う。
- オーガニゼーションが管理してる場合、オーガニゼーションのリポジトリを見ると他にも便利なGemが見つかることが。
    - https://github.com/plataformatec/devise
ズンドコキヨシ with C++

ズンドコキヨシまとめ - Qiita
http://qiita.com/shunsugai@github/items/971a15461de29563bf90

なかったのでC++で書いてみた。

```cpp
#include <iostream>
#include <cstdlib>
#include <string>
#include <vector>
#include <ctime>

using namespace std;

int main()
{
    vector<string> zd = {"ズン", "ドコ"};

    // ズン:10 ドコ:01 の2ビット表現とする
    unsigned long zd_check = 0;
    unsigned long zzzzd =  0x000002a9; // 10 10 10 10 01 キヨシ！ 10 1010 1001  2a9

    srand(static_cast<int>(time(0)));

    do {
        zd_check = zd_check<<2 | ((rand()>>3&1)+1); // rand()>>3 は てきとう
        cout << zd[zd_check&1] << endl;
    } while ( (zd_check & zzzzd) != zzzzd );
    
    cout << "キヨシ！" << endl;
    
    return 0;
}
```

出力結果

```text
ズン
ズン
ズン
ドコ
ズン
ドコ
ズン
ドコ
ドコ
ドコ
ズン
ズン
ズン
ズン
ズン
ドコ
キヨシ！
```
Bootstrap4で全ブラウザ対応する方法


この記事はBootstrap4 alpha2版を元にした記事です。


### この記事は何?
Bootstrap4でFlexboxを利用するとIEとFirefoxで表示が崩れるので修正方法をメモします。

### Flexboxを利用する方法
Bootstrap4からFlexboxに対応しています。現状はオプションなので、sassの設定を書き換えコンパイルすることで使えるようになります。

利用方法はこちらのサイトなどが一番わかりやすいと思います。
[Bootstrap 4 alphaでCSS3のFlexboxを試す！](https://www.riarise.com/coding/bootstrap-4-flexbox/)


### IEの対応
IEではカラム落ちが発生します。Bootstrap4のgithub上でもバグ報告されています。おそらく次のバージョンぐらいでは修正されていますが、alpha版で導入をされる場合は以下を修正してください。

_grid.sassファイルを開きます。場所はこちらです。
bootstrap-4.0.0-alpha.2/scss/mixins/_grid.sass 

46行目あたりにcol-xx のスタイル設定があります。

```sass
@mixin make-col-span($size, $columns: $grid-columns) {
  @if $enable-flex {
    flex: 0 0 percentage($size / $columns);
  } @else {
    width: percentage($size / $columns);
  }
}
```

これに、「flex-basis」と「max-width」の記述を追加します。

```sass
@mixin make-col-span($size, $columns: $grid-columns) {
  @if $enable-flex {
    flex: 0 0 percentage($size / $columns);
    flex-basis: percentage($size / $columns);
    max-width: percentage($size / $columns);
  } @else {
    width: percentage($size / $columns);
  }
}
```

これで完了です。grutを起動してコンパイルしてください。
IEで確認すると、カラム落ちが解消されていると思います。

### Firefoxの画像対応
Fluid Imageを設定にする場合、新しいクラス「img-fluid」を指定しますが
Firefoxではこのままではブラウザにあわせてリサイズしないので、自作のcssに

```css
.img-fluid {
  width: 100%;
}
```

を加えてください。 これが一番簡単に修正できる方法かと思います。
IEの修正のように、sassファイルに記述してもよいです。お好みの方法でどうぞ。

Chrome、Firefox、IE、Safariは最新版で崩れはなかったです。
iOS9、Android4.4、4.5(xperia)ではOKでした。
Node.js+Express4+MySQLでtimestampデータがUTCで取得される

環境と事象はタイトルの通り

ググったら答えが見つかった
http://stackoverflow.com/questions/23571110/nodejs-responded-mysql-timezone-is-different-when-i-fetch-directly-from-mysql

Node.jsでMySQLを使うときに

```js

//注意：テキトー
Config = require('config');
mysql = require('mysql');

var conn = mysql.createConnection({
	host: Config.mysql.host,
	user: Config.mysql.user,
	password: Config.mysql.pass,
	database: Config.mysql.dbname,
	timezone: 'jst' //timezoneの指定省略の場合はシステムローカルになる
});
```

~~みたいな感じでコネクションオブジェクト生成するけど、その際にtimezoneの指定がないとデフォルトのUTCになる。まぁ当たり前なんですけど。~~
[訂正] 失礼しました。timezoneの指定を省略した場合はシステムローカルでした。
[参照] https://www.npmjs.com/package/mysql

なのでちゃんとtimezoneを日本時間に設定しておかないと、日本時間のデータを挿入したのに読み出すと元データ(MySQLに格納されたデータ)をUTCの時間と認識して日本時間へと時差計算した値が表示されることになる。

[追記]システムローカル、MySQLのtimezoneが揃っていれば基本的には気にならないはず。おかしい場合は挿入前や表示前など日付データを扱う際にnew Date(日付データ)すると再度システムローカルの日付データに変換される。

雑な感じですが、そんなポカを私はやらかしました。
gulp-ruby-sassの記述方法がいつの間にか変わっていた事


古いバージョンのまま使っていると気がつかないけど、projectを新しく構築しようとすると失敗したって話。

前はこう書いていたけど、

```javasctipt:
gulp.task('sass', function () {
  return sass('source/')
    .on('error', sass.logError)
    .pipe(gulp.dest('result'));
});
```

今はこう

```javasctipt:
gulp.task('sass', function () {
  return sass('source/**/*.scss')
    .on('error', sass.logError)
    .pipe(gulp.dest('result'));
});
```

https://github.com/sindresorhus/gulp-ruby-sass

> A file or glob pattern (source/**/*.scss) to compile. Ignores files prefixed with an underscore. Directory sources are not supported.

という事らしい。

検索すると古いソースも出てくるから間違えないようにしたい。
Excel 関数 列内で空行を挟んでも連番をとりたい。

備忘録。
Windows7 Office2013

### やりたいこと
![excel_sample1.png](https://qiita-image-store.s3.amazonaws.com/0/94824/55d7175e-f85c-3215-c6d8-1d059fb441ec.png)

↑のB列を手作業でちまちまではなく関数を入れて解決したい。

### やり方としては

```
　=ROW()-3
```
はよく使うのですが、この場合は空行挟むと番号がずれる。
![excel_sample2.png](https://qiita-image-store.s3.amazonaws.com/0/94824/af4e4b1b-4886-d47c-f1b6-ee02fd3ffed1.png)

というわけでこうする。
開始セルに「1」を入れて、次のセルからは以下の関数を入れる。
```
　=MAX($B$4:OFFSET(INDIRECT(ADDRESS(ROW()-1,COLUMN())),0,1))+1
```
![excel_sample3.png](https://qiita-image-store.s3.amazonaws.com/0/94824/0753082c-fd20-3084-8b52-ec2f50ca5381.png)

で解決。

要するに、関数を入れたセルと同じ列でかつ上のセルのMAX+1を表示させるという関数です。
行の挿入してNo列(B列)のセルを削除しても後ろの番号はきっちり計算してくれます。べんり。
ASUS Transformer t100ta でアンドロイドをmicro SDからブートしたい


Asus t100ta
windows8.1のタブレットPCにアンドロイドを入れたい。
でもSSDの容量が少ないので、micro SDにOSを入れたい。

BIOSの設定で
Secure bootをdisableにしたら、EFI起動可能なUSBメモリからのブートはできた。

しかし、同様なものでもmicro SDからはそもそもbootable diskとしてBIOSが認識しない。
これは以下の理由によるらしい。

>It won't start from "USB device" unless it is through a card reader (tested-working) and changing the boot order doesn't help.
The slot is treated differently for some reason. (It's a different computer but it may be the same problem). From this forum:
http://forums.lenovo.com/t5/X-Series.../494013#M28571
"The internal SD card reader is not a bootable device.
It's connected to PCI-E bus (for better performance I think, it showed much higher speed than average external ones), which means BIOS could not access it like commom internal/USB drives (mSATA is a new category but basically internal drive with a new interface).
Even the BIOS could recognize it, the on-card software needs driver for the card reader, or they will simply fail to load themselves because they cannot access their own media."

引用：http://ubuntuforums.org/showthread.php?t=2203358


いろいろ試してみる予定。
掲示板
http://ubuntuforums.org/showthread.php?t=2203358

Boot from internal SD card slot [HOWTO] [WORKAROUND]!!! 
http://www.mydellmini.com/forum/general-discussion/6670-boot-internal-sd-card-slot-howto-workaround.html

Eeebuntu 2.0 SD Card Installation on the Aspire One
http://www.osnews.com/story/20743/Eeebuntu_2_0_SD_Card_Installation_on_the_Aspire_One

Plop Boot Manager
https://forum.plop.at/index.php?topic=1369.0

USBブートできない機種で擬似的にUSBブートする－Plop Boot Manager
http://www.alb.jp/%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF/usb%E3%83%96%E3%83%BC%E3%83%88%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E6%A9%9F%E7%A8%AE%E3%81%A7%E6%93%AC%E4%BC%BC%E7%9A%84%E3%81%ABusb%E3%83%96%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B%EF%BC%8Dplop-boot-mana/
一部のAndroidでCreateJSのBitmapをスケールとかさせるときに最初の描画が残るときはステージ配置直後にupdateをかける

# タイトルがすべて

もしかすると原因と対処は別のところにあるかもしれないけれども。

## 出た機種
au SOL25 Android 4.4.2 標準ブラウザ

## 出るかもしれないコード

開発が落ち着いたら書く。かもしれない。

## 追記

直ったと思ったら気のせいだった。
Airtable API の使い方

#Airtable ドキュメント

Airtable で使用できるのは、REST API です。
kintone JavaScript API のような画面表示のイベント処理で使えるものは、無いようです。
項目情報取得APIもありません。
Listrecords, Retrieve, Create, Update, Delete などがあります。
更新系は１レコード単位のリクエストしかありません。

REST API を調べたいときは、BASE を開いて、API docs のリンクをたどります。

![airtable11.png](https://qiita-image-store.s3.amazonaws.com/0/100572/2e1b11f2-8894-5404-46e2-53d3168c38f9.png)

#API docs INTRODUCTION

API の情報は、このdocsにまとめられています。
静的にAPI の説明があるのではなく、BASE にあわせて　API毎に具体的に curl のパラメータと、応答結果が実データで表示されますので、とてもわかりやすいです。

![airtable12.png](https://qiita-image-store.s3.amazonaws.com/0/100572/619b8fba-52e0-f92e-b2f1-06c10ef4e7d6.png)

#API docs AUTHENTICATION

API 呼び出し時に必要な認証は、アカウント毎に生成する API.KEY を使います。
API.KEI は、BASE 毎にほしいケースもあると思いますが、アカウントを複数使うなどで対応できると思います。

#API docs TABLE、Fields 情報

BASE に定義されている項目とそのタイプ、実データのサンプルが表示されます。

![airtable13.png](https://qiita-image-store.s3.amazonaws.com/0/100572/9c8e7e04-8073-b2ee-b974-831c51219a6a.png)

#API docs Listrecords

Listrecords API の具体的な例と応答結果が表示されます。
そのまんまの実例なので、わかりやすいです。
Max 100 レコードです。

オプションとして、フィルター・ソートなどがあります。
view オプションというのが、BASEで定義した VIEW を指定すると、設定された 項目とソートで応答されるらしい。
使い方によっては、便利かもしれない。

```
EXAMPLE REQUEST
$ curl "https://api.airtable.com/v0/appw0fn10wdcroLRH/%E9%A1%A7%E5%AE%A2%E6%83%85%E5%A0%B1?maxRecords=3&view=%E9%A1%A7%E5%AE%A2%E4%B8%80%E8%A6%A7" \
-H "Authorization: Bearer YOUR_API_KEY"

EXAMPLE RESPONSE
{
    "records": [
        {
            "id": "rec542NQZ4Js2KjCI",
            "fields": {
                "会社名": "顧客A100株式会社",
                "顧客ランク": "A",
                "部署名": "資材部",
                "担当者名": "資材担当者X100",
                "メールアドレス": "xxxxx@xxxxx.co.jp",
                "TEL": "xx-xxxx-xxxx",
                "FAX": "xx-xxxxx-xxxxx",
                "郵便番号": "xxxx-xxxxx",
                "住所": "住所住所住所住所住所住所住所住所住所住所住所住所"
            },
            "createdTime": "2016-03-15T04:12:45.000Z"
        },
```

![airtable14.png](https://qiita-image-store.s3.amazonaws.com/0/100572/f9dc5a6d-1713-5880-4796-d037ecf03b68.png)


#API docs Retrieve a record

最終レコードが応答されるらしい。
使い道は？

#API docs Create a record

１レコード追加のAPI。項目と値を指定するだけなので、シンプル。

![airtable15.png](https://qiita-image-store.s3.amazonaws.com/0/100572/a0b982a9-616f-3594-869e-e52ea9a4b619.png)

#API docs Update a record

１レコード更新のAPI。

![airtable16.png](https://qiita-image-store.s3.amazonaws.com/0/100572/69cf51ec-ada3-8e4f-359b-0a83b6c54b94.png)

#API docs Delete a record

１レコード削除のAPI。

![airtable17.png](https://qiita-image-store.s3.amazonaws.com/0/100572/8715eefd-8ec6-a79a-3bd1-fbbda9b5209b.png)

#API ROADMAP

ロードマップに一つ気になるのがあって、更新レコードを知らせてくれるというもの。
イベント処理として使えるとうれしい。

Receiving notifications about changed records.
テスト書いてないと愚痴をこぼすと例のライオンのスタンドがデスクトップいっぱいに表示されるelectronアプリをつくった

春です。テストの季節です。
そこで、「テスト書いてない」とPCの前でつぶやくと画面いっぱいに例のライオンのスタンドが光臨するelectronアプリケーションを書いてみました。
ぜひ、音声ありで見てみてください。

[![video](http://img.youtube.com/vi/g8EzhmYyL7s/0.jpg)](https://www.youtube.com/watch?v=g8EzhmYyL7s)


音声認識について全く伝わりませんが、gifもおいておきます。

![screnshot](https://raw.githubusercontent.com/akameco/twada-stand/master/media/screenshot.gif)


## ダウンロード
以下のリンクからダウンロードできます。
なお、透明なアプリケーションなので、「テスト書いてない」と発言して動作確認してください。

[Release akameco/twada-stand](https://github.com/akameco/twada-stand/releases/)

windows版もありますが、動作確認していませんので、もし動かなかったらごめんなさい。
わたしのwin機はwindows10にアップデートしようとしたら失敗して無限に再起動を繰り返すようになってしまったので。

ソースコード: [github](https://github.com/akameco/twada-stand)

## 音声認識
electronからwebkitSpeechRecognitionを利用してます。詳しくはweb speech apiで検索するとよいと思います。
webkitSpeechRecognitionはwebから利用する場合は、実行前にユーザの許可が必要です。https環境は初回のみ、http環境だと毎回必要になります。が、electronの場合ユーザの許可なしで音声認識を始められます。localhostで利用してるようなものなので。
利用する際の注意点は以下にまとめたので参照してください。

[electronでWebSpeecAPIの音声認識を利用するときの注意点 - Qiita](http://qiita.com/akameco/items/b507d50e22b2e56e8827)

まあそんな記事読まなくても、一言で言うと、50回のリクエスト制限があるということです。

### 常時音声認識
音声認識終わったら次の音声認識をスタートさせることで認識させ続けてます。

```js
const speech = new webkitSpeechRecognition();
speech.onend = () => speech.start();
```

まあこのせいでリクエスト制限がすぐにくるので、この方法が最も有効になるのはリクエスト制限のないChrome Appでしょう。しかしながら、ChromeAppは透明にできないので、今回は使いませんでした。

## 問題とかちょっと思ったこと
1つ目は、デスクトップの前で話したことを常時googleに送り続けること。なのでgoogleが邪悪な組織であると思っている人には、インストールを勧めません。

2つ目は、これは一般のelectronアプリに言えるのですが、ブラウザの場合タブにマイクのアイコンがついて音声認識してますよってわかりますが、electronの場合、音声認識中かどうかわからないことです。
さらに言うと、ブラウザでは本来ユーザの許可が必要なAPIが、electronでは許可無くユーザに気づかれることなく利用できることが個人的にちょっと引っかかります。

ソースコードはgithubにおいてあります。[github](https://github.com/akameco/twada-stand)

## まとめ
テスト書いてない。
ES2015(ES6, TypeScript) の Destructuring Assignment が素敵

いろいろと便利なDestructing Assignment。
もうこれナシでJS書けない。

```js
// var foo = array[0]
// var bar = array[1]
// と書かなくてOK
const array = [111, 222]
const [foo, bar] = array
console.log(foo) // 111
console.log(bar) // 222
```

```js
// var hoge = obj.hoge
// var fuga = obj.fuga
// と書かなくてOK
const obj = {hoge: 111, fuga:222}
const {hoge, fuga} = obj
console.log(hoge) // 111
console.log(fuga) // 222
```

```js
// var foo = obj.hoge
// var bar = obj.fuga
// と書かなくてOK
const obj = {hoge: 111, fuga:222}
const {hoge:foo, fuga:bar} = obj
console.log(foo) // 111
console.log(bar) // 222
```

```js
// console.log(obj.hoge)
// console.log(obj.fuga)
// と書かなくてOK
const obj = {hoge: 111, fuga:222}
function piyo ({hoge, fuga}) {
    console.log(hoge) // 111
    console.log(fuga) // 222
}
piyo(obj)
```

```js
// var foo = obj.hoge
// var bar = obj.fuga
// console.log(foo)
// console.log(bar)
// と書かなくてOK
const obj = {hoge: 111, fuga:222}
function piyo ({hoge:foo, fuga:bar}) {
    console.log(foo) // 111
    console.log(bar) // 222
}
piyo(obj)
```

```js
// piyo({hoge: hoge, fuga: fuga})
// と書かなくてOK
const hoge = 111
const fuga = 222
function piyo ({hoge, fuga}) {
    console.log(hoge) // 111
    console.log(fuga) // 222
}
piyo({hoge, fuga})
```

ただし、細かい仕様をちゃんと理解した上で使う。下記参照。
[Destructuring assignmentのご利用は計画的に - Qiita](https://qiita.com/okunokentaro/items/ec3210a1942471fba612)
Git 不要ローカルブランチを単語検索で一括削除

## ローカル

### ローカルブランチ一覧
`$ git branch`

### マージ済ブランチ一覧
`$ git branch --merged`

### ブランチ削除の基本
`$ git branch -d {ブランチ名}`

### featureとつくブランチを一括削除
`$ git branch | grep feature | xargs git branch -d`
`git branch | grep feature`でfeatureの単語がつくbranch一覧検索
`xargs` はその前の出力をそのまま実行の引数に渡してくれるので`xargs git branch -d`で削除できる

### alias登録

####.giconfig編集
```.gitconfig
[alias]
db = !git branch | grep $1 | xargs git branch -d
```
引数に単語を入れられるようにする

#### 使い方
`git db {ここの文字が入ってるブランチ一括削除}`

`$ git db feature` → featureがつくブランチ名一括削除
`$ git db release` → releaseがつくブランチ一括削除

### リモート
fetchした時にリモートで削除されたブランチをローカルからも自動的に削除する
`git fetch -p`
prune(余分なものを取り除く)の略
nanoエディタユーザーじゃない人がうっかりnanoエディタを開いてしまった時の対処法

#処方箋
一回落ち着きます
<img width="752" alt="スクリーンショット 2016-03-17 10.11.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/117619/6430f0a4-126b-31cb-31c9-016612f7f7b6.png">
画面下の方をよく見ます

- ` Ctrl + o`<-保存
- ` Ctrl + x`<-終了(保存せずに終わろうとするとたまに怒られます)
 これでおk！

#nanoエディタとは

```
nano は Mac OS X に標準搭載されているテキストエディタです。
```

Mac使っている人は表題のようなことが起こり得るってことですかね(<-Macしか使ったことないユーザー)

```
Ubuntuだとデフォルトのエディタがnano
```

あ。git使ってる時にでるからこれっぽい


#なったことある？
## ない

```
nanoエディタユーザーじゃない人がうっかりnanoエディタを開いてしまった時の対処法
```

- ↑こんなこと起きたことないわ！って人はスルーで大丈夫です。生きていく上で全く必要のない記事になります(^^)b

##なったことある

- なったことある。
- 何でかわかんないけど設定するほどじゃないから放っておいてる。
- 毎回間違って開いて焦る。
- 毎回間違えて開いて他人に終了させてもらっている。
- 毎回間違えて開いた奴のエディタを終了させている。

↑こんな人に

##とりあえずじゃない対処法
- 何でか知らないがデフォルトがnanoで変えたい

```
sa_as@hoge~
$ update-alternatives --config editor
There are 4 choices for the alternative editor (providing /usr/bin/editor).

   Selection    Path                Priority   Status
 ------------------------------------------------------------
 * 0            /bin/nano            40        auto mode
   1            /bin/ed             -100       manual mode
   2            /bin/nano            40        manual mode
   3            /usr/bin/vim.basic   30        manual mode
   4            /usr/bin/vim.tiny    10        manual mode

Press enter to keep the current choice[*], or type selection number: 3
update-alternatives: using /usr/bin/vim.basic to provide /usr/bin/editor (editor) in manual mode.
```

↑これでvimになった！

- 自分のgitの環境がUbuntuなのでgit commitとかするとnano出てくるよって人

```
git config --global core.editor "vi"   //viのひと
git config core.editor “mcedit”　　　　 //mceditのひと
git config core.editor “emacs -nw”　　　//emacsのひと
```

↑これでおk

- 自分のじゃないVMに入った時にnanoが出て発狂しそうになる

設定を変えるわけにはいかないのでなるべくnanoを開かないように

nanoを開くタイミングは`git commit`の瞬間が多いはず

```
taninno-kankyo@hoge~
$git commit -m "nanowohirakanai"   //こんなコメントをしたら殴られる可能性が高いので真似しないでください
```

↑これでおk

#それでも…
うっかり開いちゃったらこの記事の上部にある処方箋使ってください…

#最後に
nanoについて興味が出た方、nano使ってるよ！ってユーザーは記事を書いてみてはいいのではないでしょうか。

タグがvim,Emacs共に1000件以上のところ現在nanoタグ1桁でした。

nanoの神になれるかもしれない…
PHPでスクレイピング Goutte メモ

#導入
以下URLを参照。
今回はPHP5.3の環境だったのでGoutte1.xのpharをダウンロードして使用。
https://github.com/FriendsOfPHP/Goutte

#準備
```php
require_once __DIR__ . "/goutte-v1.0.7.phar";
use Goutte\Client;
```

# 使用例
## リクエスト (request)
```php
$client = new Client();
$crawler = client->request('GET', 'http://test.com');
```

## ステータス取得
```php
$client->getResponse()->getStatus();
```

## タグから抽出 (filter)
```php

// 最初(0番目)のpタグのテキストを抽出　（class指定）
$crawler->filter("p.class")->eq(0)->text();

// aタグのhtmlを抽出 （id指定） 　
$crawler->filter("a#id")->html();

// aタグのhrefの値を抽出
$crawler->filter("a.class")->attr("href");

// 同様なタグが複数ある場合順番に処理
$crawler->filter("div.class table")->each(function ($node){
    // tdタグが存在した時だけ処理
    if(count($node->filter("td")) !== 0){
        echo $node->text();
    }
});
```

##　現在のページのURLを取得
```php
$client->getHistory()->current()->getUri();
```

## リンクをクリック
```php
// 「次へ」というテキストのリンクを探しリンク先を取得
$link = $crawler->selectLink("次へ")->link();
$crawler = $client->click($link);

```
CSSでズンドコキヨシしたかった


CSSだけじゃできなかった！
最初だけjs使いました。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
	<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
	<script>
		$(function(){
			var target = $('.js-zundocoBox li');
			function zundoco(){
					for (var i = 0; i <target.length; i++){
						var num = Math.round(Math.random());
						if (num == 0) {
							target.eq(i).attr('class','zun').empty().append('ズン');
						} else {
							target.eq(i).attr('class','doco').empty().append('ドコ');
						};
					};
			};
			zundoco();
			$('#retry').on('click',function(){
				zundoco();
			});
		});
	</script>
	<style>
	/*必須箇所*/
		.js-zundocoBox li:last-child::after{
			content: 'キヨシできなかったよ……';
		}
		.zun + .zun + .zun + .zun + .doco::after{
			content: 'キ・ヨ・シ！';
		}
		.zun + .zun + .zun + .zun + .doco ~ li{
			display: none;
		}
	</style>
</head>
<body>
	<article class="wrap" id="id">
		<h1>ズンドコ</h1>
		<ul class="js-zundocoBox">
			<li></li>
			<li></li>
			<li></li>//これを100個くらい
		</ul>
		<div id="retry">やりなおし</div>
	</article>
</body>
</html>
```

[サンプル](http://jsdo.it/kiwr/wD8U)

##解説

###js部

 * liに.zunもしくは.docoをランダムで割り振る、ついでにliの中にズンもしくはドコも入れる
 * （別になくてもよかったけどせっかくなので）やりなおしボタンでズンドコを入れ直す

###css部

 * .js-zundocoBox li:last-child::after  
 liを全部使ってもキ・ヨ・シ！できなかった場合に失敗したことを表示させる
 * .zun + .zun + .zun + .zun + .doco::after  
 隣接セレクタでズンドコ判定してキ・ヨ・シ！を表示させる
 * .zun + .zun + .zun + .zun + .doco ~ li  
 ズンドコ判定が出た後のliを非表示にする

+セレクタと~セレクタで解決します。かんたん。
XamarinでAndroid WearのWatch Faceアプリを作ってみよう！（Vol. 0 : 準備編）

こんにちはー！ニアです。
今回からXamarin.Androidを使って、Android WearのWatch Faceアプリを作成する方法を紹介していきます。

次のセクション : [Vol.1 : プロジェクト作成編](http://qiita.com/nia_tn1012/items/2f790ca52ee839303952)

#1. Android WearのWatch Faceとは

Watch Faceとは、Android Wearで時計を表示するアプリ[^1]です。

![Watch Face](https://qiita-image-store.s3.amazonaws.com/0/78881/da49b539-c298-aacb-b2ef-83f52032022d.jpeg)

2014年12月にGoogleが[Watch Face用のAPI](http://googledevjp.blogspot.jp/2014/12/android-wear-watch-face-api.html)をリリースしたことにより、開発者はそのAPIを使って時計の盤面を自在にカスタマイズすることができるようになりました。

##1.1. Watch Faceアプリは、Xamarinで作れるのよ

Xamarin.Androidでは、バージョン4.2からAndroid Wearの開発をサポートしています。

![プロジェクト作成ページ](https://qiita-image-store.s3.amazonaws.com/0/78881/ce304290-09a5-b441-0a1d-4dff9283f2f4.png)


インストール済みのプロジェクトテンプレートは普通のWearアプリ用のみですが、Xamarinがリリースしている「**[Xamarin Android Wear（Support Libraries）](https://www.nuget.org/packages/Xamarin.Android.Wear)**」がWatch Face APIをサポートしている[^2]ので、プロジェクトをカスタマイズすることで、Watch Faceアプリを作成することができます。

[^1]: 厳密に言うと、Watch Faceアプリは**Service**として動作します。
[^2]: そのライブラリで定義されている、**Xamarin.Android.Wearable**名前空間の中に**Watchface**名前空間が定義されています。そこからWatch Face APIが利用できます。

![Xamarin Android Wearをオブジェクトブラウザで見る](https://qiita-image-store.s3.amazonaws.com/0/78881/c50e4456-a6b2-abcd-cc9c-9eb04486b733.png)


##1.2. 必要な環境

* **Xamarin.Android** : Ver. 4.2以上（5.0以上を推奨）
* **Android SDK** : Ver. 5.0.1（API Level 21）
* **Android SDK Tools** : Ver. 24以上
* **Xamarin for Visual StudioをインストールしたVisual Studio**、または**Viusal Studio for Mac**、もしくは**Xamarin Studio**
* エミュレーターまたはAndroid Wear実機

※Android SDKについて、Android Wearアプリはバージョン4.4W以上が必要ですが、Watch Face APIを利用する場合、**バージョン5.0.1以上**が必要です。

>参考 : Setup and Installation - Xamarin
https://developer.xamarin.com/guides/android/wear/installation/

#2. Next

次回（[「Vol. 1 : プロジェクト作成編」](http://qiita.com/nia_tn1012/items/2f790ca52ee839303952)）は、Visual StudioなどでAndroid Wear用のプロジェクトテンプレートから、Watch Faceアプリのプロジェクトを作成していきます。

それでは、See you next!

#参考サイト
* Android Wear - Xamarin  
https://developer.xamarin.com/guides/android/wear/


#「XamarinでAndroid WearのWatch Faceを作ってみよう！」シリーズ一覧

* **Vol.0 : 準備編**
* [Vol.1 : プロジェクト作成編](http://qiita.com/nia_tn1012/items/2f790ca52ee839303952)
  * （[Vol.1x : Xamarin Studio向け](http://qiita.com/nia_tn1012/items/5f407f0a0b180482bb6c)）
* Vol.2 : プログラム作成編（ [Page-1](http://qiita.com/nia_tn1012/items/1a4e712c1c0284fd5f49) / [Page-2](http://qiita.com/nia_tn1012/items/52b25bfa86c91baee16d) ）
スマホのwebページでコンソール出力できるerudaがいい感じ

スマホの検証とかで、実機でしか起きないjsのバグとかあって、実機だからコンソール見れないイライラみたいなのに対応できそうなjsライブラリがあったのでご紹介です。

# 概要

URLの末尾にクエリストリングでeruda=trueってやると、こんな感じでデバッグ的な画面を表示してくれます。
スクショはPCのChromeですが、、、

![スクリーンショット 2016-03-17 9.51.15.png](https://qiita-image-store.s3.amazonaws.com/0/105934/fdd63b8e-a421-b9cf-156d-1c36af5d5f46.png)


# 公式github

https://github.com/liriliri/eruda


# 使い方

npmでインストールします。

```bash
$ npm install eruda --save
```

そしたら取り込んで、初期化処理を書きます。

```js:index.js
(function() {
  var src = 'node_modules/eruda/dist/eruda.min.js';
  if (!/eruda=true/.test(window.location) && localStorage.getItem('aactive-eruda') != 'true') return;
  document.write('<src' + 'ipt src="' + src + '"></src' + 'ipt>');
})();
```

あとは、コンソールを確認したいページのURLにeruda=trueをつけるだけ！

```
https://hoge.com/index?eruda=true
```

# 試してみる

こんな感じのお試しを用意

```index.html
<html>
  <head>
    <meta http-equiv="Content-Type" charset="UTF-8">

  </head>
  <body>

    <h1 style="line-height: 1.45; font-size: 4em;">テストです</h1>

    <script src="./index.js"></script>
  </body>
</html>
```

```index.js
'use strict';

(function() {
  var src = 'node_modules/eruda/dist/eruda.min.js';
  if (!/eruda=true/.test(window.location) && localStorage.getItem('aactive-eruda') != 'true') return;
  document.write('<src' + 'ipt src="' + src + '"></src' + 'ipt>');
})();

console.log("試しにログ出力してみるよ");
```

これで実行すると、こんな感じになります

![スクリーンショット 2016-03-17 9.56.30.png](https://qiita-image-store.s3.amazonaws.com/0/105934/01e67974-1246-69c5-24aa-022cf48a22ad.png)

右下の方の謎のポチをタップすると、コンソールに切り替わります。

![スクリーンショット 2016-03-17 9.57.20.png](https://qiita-image-store.s3.amazonaws.com/0/105934/0d686a10-6fbf-0374-baf6-28f8cf05970c.png)

これは簡単だし役立ちそう！！

**本番環境で表示されないように制御する必要はありますが、、、**
10MBのftpd (vsftpd)イメージを改良した

# 起動方法

```
git clone https://github.com/tukiyo/docker-openwrt-ftp.git
cd docker-openwrt-ftp
vim image/root/users.txt
```

```ruby:docker-compose.yml
  environment:
    #- HOST=my.server.com
    - HOST=localhost
    #- HOST=192.168.100.70
```

* (PASVのため) 自サーバ以外から接続する場合
    * `HOST`の値をIPアドレスか、名前解決が出きるホスト名を指定


```bash:
docker-compose up -d
```

# docker-openwrt-ftp

* [mcreations/ftp](https://hub.docker.com/r/mcreations/ftp/)を改良
* 複数アカウント作成に対応
* HOMEディレクトリを他のユーザと同じPATHを指定可能
* (chrootにより)所有者がUIDで表示されていたのでUsername表示の対応
* timezoneの初期値をJST-9(つまり日本)に設定。

![ftp.png](https://qiita-image-store.s3.amazonaws.com/0/25728/ce43ba7f-dbbb-004a-0754-ce2473e6cdbb.png)


## アカウント設定

* image/root/users.txt

```
user1   pass1
user2   pass2
user3   pass    share
user4   pass    share
user5   pass    share
```

* 1列目: FTPのユーザ名
* 2列目: FTPのパスワード
* 3列目: ログインするPATHを`/data/share/`に指定。(未指定でユーザ名)
    * user3, user4, user5は`/data/share/`を利用。
    * user1は/data/user1/
    * user2は/data/user2/を利用。
Java SE7 Gold 取得を目指して (12)

Java SE7 Gold をとりたい…!
===

本日は第12回目です。
Java7で大きく変わったNIO.2の後編です。

## 今日のこぼれ話
NIOを勉強していて知ったのですが、Paths/Path のように複数形のクラス名がファクトリ、というのが慣習のようです。

* FileSystems → FileSystem
* Paths → Path
* Files → File
 
これに限らずUtil系のクラスも複数形ですね。

* Arrays
* Collections

ちょっとしたことですが、クラスの命名の際に役立つかもしれせん。
ところでNIO.2って何て読むのでしょう? えぬあいおーつー?

## 本日知ったこと(9章 2/2)

* ディレクトリアクセス
  * ルートディレクトリの取得 `fs.getRootDirectories()`
  * 戻り値はItaratorで複数のドライブがあるような場合でも取得できる
  * ディレクトリ内の中身リスト取得 `Files.newDirectoryStream()`
  * 戻り値はItaratorでファイルやディレクトリのPathが入っている

* ファイルツリー探索
  * `Files.walkFileTree()`
  * FileVisitorオブジェクトにコールバックを登録して、`walkFileTree()`に渡す
  * SimpleFileVisitorがAPIで提供されている

    メソッド|概要
    :---|:---
    FileVisitResult preVisitDirectory(T dir, BasicFileAtttributes attr)|エントリへのアクセス前行う操作
    FileVisitResult visitFile(T file, BasicFileAttributes attr)|ファイルに対して行う操作
    FileVisitResult visitFileFailed(T file, IOException ex)|ファイルにアクセスできない場合の操作
    FileVisitResult postVisitDirectory(T dir, IOException ex)|ディレクトリ内のすべてのエントリへのアクセス後に呼ばれる<br>エラーが発生している場合は例外が渡される

* ファイル探索
  * `fs.getPathMatcher()`
  * 引数に `regex:{regex pattern}` or `glog:{glob pattern}`を渡す
  * globは *.java とかできる コマンドでよく見る形式
  * `matcher.matches(fileName)`で比較
  * `newDirectoryStream(dir, "{glob pattern}")`でフィルタリング結果を得られる
  
* ディレクトリ監視
  * WatchServiceインタフェースを使用
  * Pathインタフェースの `register(WatchService ws, WatchEvent.Kind<?>... events)`で登録

    ```java
     FileSystem fs = FileSystems.getDefault();
     WatchService ws = fs.newWatchService();
     path1.register(ws, StandardWatchEventKinds.ENTRY_CREATE); // ファイル作成を監
     WatchKey key = ws.take(); // 待機
     for(WatchEvent<?> event : key.pollEvents()) { // 発生したイベントの取り出し
       EatchEvent.Kind<?> kind = event.kind();
       System.out.print(kind.name()); // イベント名取得
     }
    ```

すべてにFileSystemインタフェースが絡んでいますね。ファイル関連の操作をしたくなったら、ひとまずFileSystemをあたってみるのがよさそうです。
jenkinsの2.0-alphaをDockerで試してみよう！

## Jenkins 2.0系

現在のJenkinsは、1.6系です。
[changelog](https://jenkins-ci.org/changelog/)を見ても、こつこつと、1.6XXの`XX`の部分をインクリメントするマイナーバージョンを繰り返している状態です。

それに対して、2.0系に上がるということは、メジャーバージョンアップということだと思います。
昨年くらいから2.0系について、Jenkinsの公式サイトでちらほらと言及されていましたが、alpha版が登場しました。

* https://jenkins-ci.org/2.0/

## さくっと試してみたい！

親切なことに、[DockerHubのJenkinsの公式サイト](https://hub.docker.com/r/jenkinsci/jenkins/)から`tag`を選択することで利用できるようです。

さっそく、pull & runをしてみました。

```bash
docker pull jenkinsci/jenkins:2.0-alpha-3

docker run -i -p 8080:8080 jenkinsci/jenkins:2.0-alpha-3
```

ログ画面に、security tokenが表示されました。あとで利用するようだったので控えを取ります。

![Screenshot from 2016-03-16 17-26-07.png](https://qiita-image-store.s3.amazonaws.com/0/49547/89c1fca1-387f-9d35-dba6-5ec617321635.png)

その後、8080ポートでブラウザアクセスして、取得したtokenを貼り付けてcontinueボタンを押下します。

![Screenshot from 2016-03-16 17-24-07.png](https://qiita-image-store.s3.amazonaws.com/0/49547/dc783e89-545b-4952-de91-4989f9345954.png)

推奨プラグインをインストールするかどうか聞かれるので、推奨プラグインをインストールする方を選択します。

![Screenshot from 2016-03-16 17-26-33.png](https://qiita-image-store.s3.amazonaws.com/0/49547/79096a1c-8708-6fce-ff56-9169de1b496c.png)



管理者のユーザ設定を求められます。

![Screenshot from 2016-03-16 17-28-56.png](https://qiita-image-store.s3.amazonaws.com/0/49547/237ba9f6-70a0-ac8d-28ce-6b65423847a1.png)

その後、Startボタンを押下するといつもの画面が表示されます。

![Screenshot from 2016-03-16 17-31-16.png](https://qiita-image-store.s3.amazonaws.com/0/49547/1d984e54-e477-bd4e-f8d0-00bbf58e2f19.png)

## 何が違うのか。

試しに、「新しいジョブを作成する」を押下してみました。

![Screenshot from 2016-03-16 17-32-33.png](https://qiita-image-store.s3.amazonaws.com/0/49547/3439d113-f858-a520-00a0-4aa940c5097d.png)

プラグインを入れたせいもありますが、ここからは以前のJenkinsとは異なっているようです。

「Pipeline」を選択してみました。

なにやら「Pipeline Script」なるものがあるようです。
テンプレートも用意してあるようなので、「Hello World」を選択してみます。

![Screenshot from 2016-03-16 17-35-16.png](https://qiita-image-store.s3.amazonaws.com/0/49547/4b2a917d-27a4-83a4-5b30-7ad1976a321c.png)

保存して実行します。

![Screenshot from 2016-03-16 17-36-39.png](https://qiita-image-store.s3.amazonaws.com/0/49547/981f8b43-7606-668b-9e21-8de87486fdf8.png)

以前とは見せ方が大きく変わってるようです＾＾

## rootユーザでは`docker exec`できなかった。。。

defaultで、jenkinsユーザのようです。

ので、

```bash
docker exec -it --user root ${container_id} /bin/bash
```

のように入る必要がありました。

## 所感

* `Jenkinsfile`なるものが、Jenkinsのビュー上でしか設定できないものなのか、リポジトリにも含めることができるのかが気になるところです。後者であれば、hosted CIと同等のことが手軽にJenkinsでもできるようになりますね！
* 1.6X系のプラグインの幾つかを試そうとしたのですが、動かないような。。

---

本日は以上となります。

環境もできたので、次は、`Jenkinsfile`やマルチ構成におけるジョブも試してみようと思います。
Androidでいい感じのインタラクションが得られるアニメーションライブラリ(by Kotlin)


を公開しました。

kidach1/AndroidSwayAnimation
https://github.com/kidach1/AndroidSwayAnimation


![SwayAnim2.gif](https://media.giphy.com/media/l2R05RUE5EiFdnopq/giphy.gif "SwayAnim2.gif")

gifだといまいちに見えるので別途動画を。

[Sample](https://www.youtube.com/watch?v=XECWjK18ppE&feature=youtu.be) / [Sample with RecyclerView](https://www.youtube.com/watch?v=vyBPNVYK6JU&feature=youtu.be)


## Download

```build.gradle
dependencies {
    compile 'com.kidach1:AndroidSwayAnimation:1.0.8'
}
```


## Usage

`SwayAnimation.ready()`に対してアニメーション表示領域（animatedZone）とタッチ領域（touchZone）、Contextを渡すだけです。

```java
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    RelativeLayout animatedZone = (RelativeLayout) findViewById(R.id.animatedLayout);
    RelativeLayout touchZone = (RelativeLayout) findViewById(R.id.touchedLayout);
    SwayAnimation.ready(animatedZone, touchZone, this);
}
```

## アニメーション素材のカスタマイズ

```java
SwayAnimation.setDrawables(Arrays.asList(
        R.drawable.ic_favorite_pink_300_48dp,
        R.drawable.ic_tag_faces_amber_300_48dp,
        R.drawable.ic_thumb_up_blue_a200_48dp
));
SwayAnimation.ready(animatedZone, touchZone, this);
```

## Kotlin関連

基本的にさくさく書けましたが、2点ほど。

### （Javaからアクセス可能な）staticメソッド

- staticメソッドにはcompanion object
- Javaからもアクセス可能にするために`@JvmStatic`

```kotlin
class SwayAnimation {
    companion object {
        @JvmStatic fun ready(animatedZone: ViewGroup, ...) {
            touchedZone.setOnTouchListener { v, event ->
              // ...
            }
        }
    }
}
```

Calling Kotlin from Java - Kotlin Programming Language
https://kotlinlang.org/docs/reference/java-to-kotlin-interop.html#static-methods


### Backing Fields

kotlinはsetter/getterを内部的に自動生成してくれる。例えば`withActionBar`というフィールドが存在する時、以下のように一見直接フィールドにアクセスするような書き方でも、実際はsetter経由になっている。

```kotlin
withActionBar = true
```

よって、自分でsetterを定義したい際に

```kotlin
// @JvmStaticを付与するためにカスタムsetterを定義
var withActionBar: Boolean = false
    @JvmStatic set(bool) {
        withActionBar = bool
    }
```

と書いてしまうと、setterを再帰的に無限に呼び出し続けることになりStackOverFlowが発生する。

この解決策として、Backing Fieldsと呼ばれる特別なフィールドを用います。
といっても簡単で、代入先を`field`というidentifierに変えてやるだけ。

```kotlin
var withActionBar: Boolean = false
    @JvmStatic set(bool) {
        field = bool
    }
```

Properties and Fields - Kotlin Programming Language
https://kotlinlang.org/docs/reference/properties.html#backing-fields



## まとめ

kotlinは良いものだ
はじめてのサーバ証明書 ～初心者なので勉強用に格安ドメインとテスト用証明書を取得してみる～

# SSL構築の勉強用に公式のサーバ証明書が欲しかったので取ってみた

格安ドメインは、GMOペパポのムームードメイン（https://muumuu-domain.com/）で、xxxx.scence を￥180/1年で取得

サーバ証明書を取得する時に、スキップ申し込みサービスを利用する場合、ドメインの存在認証のためにドメイン管理者に対してメールが飛ぶので管理者用のアカウントもムームーメールで￥600/1年で作成する

サーバ証明書はとりあえず、GMOグローバルサインで45日間有効のテスト用証明書を無料で作成する


# ムームードメインで格安ドメインを作成する

以下の記事を参考に、xxxx.science ドメインと管理者のメールアカウント admin@xxxx.science を作成する

「バイラルクラブ > ブログ > ムームードメインで、ドメイン検索から取得・設定までの手順をまとめてみた」

http://viral-community.com/blog/muu-muu-domain-get-setting-1669/


# テスト用サーバ証明書を発行する

以下のページから45日間有効のテスト用サーバ証明書が無料で発行できる。

「45日間のテスト用SSLサーバ証明書を無料発行」

https://jp.globalsign.com/service/ssl/testcert.html

発行される証明書はPKCS#12形式の一方で必要な証明書はPEM形式なのだが、以下のページを参考にopensslを使って変換できる

「[スキップ申込サービス]OpenSSLで証明書を変換する方法」

https://jp.globalsign.com/support/ios7/skip_openssl.html

後で中間証明書も必要になるので、「クイック認証SSL用中間CA証明書(SHA256)」からダウンロードする


# Windows版 Apache httpd.exe に組み込んでSSLのテストをしてみる

参考にする手順は以下のページ

「[スキップ申込サービス インストール] Apache 2.x + mod_ssl + OpenSSL（新規・更新）」

https://jp.globalsign.com/support/skip/03.html

使用する Apache httpd.exe はApachehous （ https://www.apachehaus.com/cgi-bin/download.plx ） から、httpd-2.4.17-x64-vc11.zip をダウンロードした。

こいつはopenssl.exe も利用できるスグレモノ。

ダウンロードしたzipファイルは解凍して、C:\Apache24 フォルダに置いた。

Windows環境変数PATHに、C:\Apache24\bin を追加しておく

openssl.exeでプライベートキーとサーバ証明書を抽出し、中間証明書とともにC:\Apache24\conf\ssl に置く

サーバ証明書発行時に申請したCommonNameが自ホストを指すようにhostsを変更しておく

あとは先の手順の通り、opensslでPEM形式のプライベートキー、サーバ証明書を抽出してから、httpd-ahssl.conf のテスト用仮想ホスト設定（serverone.tld:443）の記述をコモンネームと証明書に合わせてこんな感じに書き換える

    <VirtualHost *:443>
      SSLEngine on
      # ServerName serverone.tld:443
      # SSLCertificateFile "${SRVROOT}/conf/ssl/serverone.crt"
      # SSLCertificateKeyFile "${SRVROOT}/conf/ssl/serverone.key"
      ServerName aaa.xxxx.science:443
      SSLCertificateChainFile "${SRVROOT}/conf/ssl/gsdomainvalsha2g2.cer"
      SSLCertificateFile "${SRVROOT}/conf/ssl/globalsign.cer"
      SSLCertificateKeyFile "${SRVROOT}/conf/ssl/globalsign.key"
      DocumentRoot "${SRVROOT}/htdocs"
    	CustomLog "${SRVROOT}/logs/ssl_request.log" \
            "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
    	<Directory "${SRVROOT}/htdocs">
    		Options Indexes Includes FollowSymLinks
    		AllowOverride AuthConfig Limit FileInfo
        Require all granted
    	</Directory>
    </virtualhost> 

この設定をした状態でhttpdを起動し、https://aaa.xxxx.science にアクセスして警告なしにApachehousのトップページが表示できれば完了
新人プログラマ応援  > 本の選定

色々な人が色々な本を薦めてくれる。

問題はそれらの本があなたにあったものかは、あなた当人でないとわからない。なぜなら、現在のあなたの知識を知っているのは他の人でなくあなた自身だから。

本を選定するとき、とりあえず中身をざっと確認できるようにするのが必要。そして「これは現在の自分に合っている」と思える本であれば迷わず購入しよう。

- 薦められた本のリストを参考に、それぞれの本の中身を確認してその時の自分に合っている本を見つけるのは一つの方法
- 推薦関係なく、本屋、図書館などで片っ端から興味のある分野の本を見て、自分に合っている本を見つけるのも一つの方法

「これはxxさんが推薦した本だからきっといい本だ」という思いで無理に読むのでなく、「今の自分にとってちょっと難しい」と思える本をどんどん読んでいくこと。

ツールの選定も同じ。
その時の自分に合う本、ツールを見つけよう。
技術英語 > [Inrush current] limiting control / Don't rush me.

@ [Analog Discovery Reference manual 6.3 User Supplies Control](https://reference.digilentinc.com/analog_discovery_2:refmanual#user_supplies_control)

> Inrush current limiting control

「突入電流」の制限

http://eow.alc.co.jp/search?q=Inrush&ref=sa

<hr>
関連して思い出したのは

> Don't rush me.

「急かさないでください」と言いたい時などに使う。

http://american-phrases.blogspot.jp/2011/12/dont-rush-me.html
ザ・ベストテンのようなパタパタ表現の作り方


デモ：http://mo49.tokyo/qiita/20160317/

まず数字を表示させる部分を用意

```html:html
<div class="graph graph1">
	<div class="headcount headcount1">
		<!-- 10% -->
		<div class="numbers_move num1 delay1"></div><!-- 1 -->
		<div class="numbers_move delay1"></div><!-- 0 -->
		<div class="percents_move delay1"></div><!-- % -->
	</div>
</div>
```

スプライト画像をinfiniteでアニメーションさせているという前提。
（デザイナーが大変。。）

```scss:scss
$steps_num: 60; /* ステップ数 */
$koma_num: 61px; /* 1ステップで進む距離 */

.numbers_move {
    height: 0;
    padding-top: $koma_num;
    width: 37px;
    overflow: hidden;
    background-image: url(../img/numbers.png);
    background-position: 0 0;
    animation: flip_num 1s steps($steps_num) infinite;
}

@keyframes flip_num{
    0%    { background-position: 0 0; }
    100%  { background-position: 0 (- $koma_num * $steps_num); }
}

/*
以下、パーセントも同じようにスタイル指定
*/

```

数字を止める位置、遅延時間の設定

```scss:scss
/* 
アニメーション最後の100%の位置だと「0」が表示されるので
何ステップ目で止まって欲しいかを指定 
*/
.fix_num1{ background-position: 0 (- $koma_num * 6 * 1); }
.fix_num4{ background-position: 0 (- $koma_num * 6 * 4); }
.fix_num7{ background-position: 0 (- $koma_num * 6 * 7); }

/* アニメーション書き換え infiniteを外す */
.stop_numbers{ animation: flip_num 1s 4 steps($steps_num); }
.stop_percents{ animation: flip_percent 0.2s 20 steps($steps_percent); }

/* load時点での遅延 */
.delay1{ animation-delay: -0.5s; }
.delay2{ animation-delay: -0.3s; }
.delay3{ animation-delay: -0.1s; }
.delay4{ animation-delay: 0.1s; }

/* 
cssアニメーションを書き換えた瞬間の遅延
これで止まる時間に時差が生まれる 
*/
.delay5{ animation-delay: -0.8s; }
.delay6{ animation-delay: -0.2s; }
.delay7{ animation-delay: 0.4s; }
.delay8{ animation-delay: 1s; }
```

scrollで閾値を越えるとcssアニメーションをストップさせるクラスを付与。
animation-delayでタイミングをずらして止める。

```Javascript:javascript
$(window).on('scroll', function(){
	var $offsetTop = $('.flips_wrapper').offset().top - $(window).height();
	var $windowTop = $(window).scrollTop();
	var $headcount = $('.headcount');
	var $destination = $('.destination');

	if ( $windowTop > $offsetTop + 200 ) {

		// 一度入ったらscrollを切らないと何度もクラスをつけることになってしまうので
		$(window).off('scroll');

		$('.numbers_move').addClass('stop_numbers');
		$('.percents_move').addClass('stop_percents');

		// .delay5-8を付加して遅延させる
		for (var i = 0; i < 4; i++) {
			var delay_id = i + 5;
			var delay = 'delay' + delay_id;
			$headcount.eq(i).children().addClass(delay);
		}

		// アニメーションが終わった瞬間に、最終的に見せたい数字の場所を確定
		$(".stop_numbers").on('animationend webkitAnimationEnd', function(){
			$('.num1').addClass('fix_num1');
			$('.num4').addClass('fix_num4');
			$('.num7').addClass('fix_num7');
		});
		$(".stop_percents").on('animationend webkitAnimationEnd', function(){
			$('.percents_move').addClass('fix_percent');
		});

	}

});
```


> 参考
純粋なフリップ時計でよいならば[FlipClock.js](http://flipclockjs.com/)
Laravel5 で  ErrorException: file_put_contents(/hogehoge/bootstrap/cache/services.php)

タイトル通り。

>
 ErrorException: file_put_contents(/hogehoge/bootstrap/cache/services.php): failed to open stream: Permission denied

とかいうエラーでにっちもさっちもいかないとき、

```
php artisan cache:clear
composer dump-autoload
```

この2つの魔法のコマンドをうつ
jQueryのWebSocketにおけるエラー処理について



WebSocketサーバーに対してhtml5+jQueryのWebクライアントをつくってみたところエラーが発生しました。
仕方ないのでエラーを捕捉しようとしますが、なぜかどうやってもUncaughtだよ！とコンソールに怒られます。
ということで、 **非同期処理時のtry~catchについてのメモ**です。 

#WebSocketは非同期通信
こちらがとても詳しいです。
参考: [WebSocketについて調べてみた。](http://qiita.com/south37/items/6f92d4268fe676347160)

で、WebSocketを扱うときは基本的に接続時に`setTimeout`で非同期化してあげることになります。
とりあえず、サーバーと接続が確立したら挨拶を投げてあげるクライアントをつくってみました。


```javascript:wsConnect.js
// 呼び出すhtmlでjQueryを先に読み込んでおく

var ws = new WebSocket("ws://192.168.0.x:80"); //接続
ws.onopen = wsOnOpen; //接続できたとき
ws.onerror = wsOnError; //接続エラーのとき
ws.onclose = wsOnClose; //接続を閉じたとき

function wsOnOpen() {
	//接続できたときの処理..
	try {
		setTimeout(function(){ws.send("Hey!")}, 1000); //へい！
	} catch (e) {
		console.log(e);
		wsOnError();
	}
}
function wsOnError() {
	//接続エラーのときの処理..
}
function wsOnClose() {
	//接続を閉じたときの処理..
}
...
..

```

WebSocketのsendメソッドを即時関数で囲ってあげて`setTimeOut`の引数とします。これが常套みたいですね。
さらになにかあると怖いので、とりあえず`setTimeOut`を`try`の中にいれておきました。

#エラーイベント(onerror)
参考: [いまさらHTML5 （WebSocket編）](http://qiita.com/tnakagawa/items/f7c764d044ba56d9e0fd)
`ws.onerror = wsOnError`としておくことで、エラー発生時には`function wsOnError()`がいろいろと処理をしてくれます。
ここでは、接続先が間違っていたときにはうまくこの処理に移行してくれました。

#onerrorが効かないとき
スクリプトを実行してみると、接続先があっていれば最初はうまくつながってくれます。
しかし、ちゃんと接続終了処理をせずに同じサーバーに再接続したりすると`Uncaught Error: InvalidStateError..`が発生していたりします。しかも発生した行は`setTimeOut`のところ。
めっちゃ`try`しとるやろ！なんでや！


#非同期処理をさせる関数のなかでtry
非同期処理をさせる関数の外で`try`を張ると、処理が返ってきたころにはとっくに`try`は終わってしまっているのでした。よって、エラーが出ても捕まえることはできません。
ということは **try~catchを関数内に書く**となんとかなりそうです。


```javascript:wsConnect.js
// 呼び出すhtmlでjQueryを先に読み込んでおく

var ws = new WebSocket("ws://192.168.0.x:80"); //接続
ws.onopen = wsOnOpen; //接続できたとき
ws.onerror = wsOnError; //接続エラーのとき
ws.onclose = wsOnClose; //接続を閉じたとき

function wsOnOpen() {
	//接続できたときの処理..
	setTimeout(function(){
		try {
			ws.send("Hey!") //へい！
		} catch (e) {
			console.log(e);
			wsOnError();
		}
	}, 1000);
}
function wsOnError() {
	//接続エラーのときの処理..
}
function wsOnClose() {
	//接続を閉じたときの処理..
}
...
..

```

ただしこれですっきり解決というわけではなく、
このようなエラーが出たときはソケットがちゃんと準備できてなかったりとかいう別の原因が大きいと思われるので、WebSocketのメソッド周りでの適切な対処もしくはcatch内での処理が重要です。
WebSocketでなくても非同期処理時のデバッグとして多少は使えるかもしれません。
テキストエリアなどで入力された行数が増えてエリアの高さを超えたときに警告するサンプル


```javascript
// 縦スクロールバーが出たら赤枠にする
function attachScrollbarCheck(ele) {			
	ele.cssTextOrg = ele.style.cssText;		
	ele.attachEvent("oninput", function(){		
		console.log(ele.scrollHeight > ele.clientHeight);	
		if (ele.scrollHeight > ele.clientHeight) {	
			ele.style.cssText = ele.cssTextOrg + ' border-color: red !important;';
		} else {	
			ele.style.cssText = ele.cssTextOrg;
		}	
	});		
}
		
// 改行個数がオーバーしたら赤枠にする
function attachNLCountCheck(ele, limitCount) {			
	ele.cssTextOrg = ele.style.cssText;		
	ele.attachEvent("oninput", function(){		
		console.log((ele.value.match(/\n|\r|\r\n|\n\r/g)||[]).length);	
		if ((ele.value.match(/\n|\r|\r\n|\n\r/g)||[]).length > limitCount) {	
			ele.style.cssText = ele.cssTextOrg + ' border-color: red !important;';
		} else {	
			ele.style.cssText = ele.cssTextOrg;
		}	
	});		
}			
```
XCGLogger で DEBUG の時だけ log を出す

# [DaveWoodCom/XCGLogger](https://github.com/DaveWoodCom/XCGLogger)

Objective-c / Swift でログを出力するライブラリ。
開発の DEBUG 時にのみログを出力したい、 PRODUCTION ではログを出したくない時の設定。

インストール方法とかは CocoaPods とか Carthage で入れる。

# 実装

## 1. DEBUG の設定

[Swift での #ifdef DEBUG のやり方](http://qiita.com/qmihara/items/a6b88b74fe64e1e05ca4) を参考に DEBUG の設定をする。

## 2. AppDelegate に設定追加

`AppDelegate.swift` に以下を記入する。

```swift
import XCGLogger

let log: XCGLogger? = {
    #if DEBUG
        let log = XCGLogger.defaultInstance()
        log.xcodeColorsEnabled = true
        log.xcodeColors = [
            .Verbose: .lightGrey,
            .Debug: .darkGrey,
            .Info: .darkGreen,
            .Warning: .orange,
            .Error: XCGLogger.XcodeColor(fg: UIColor.redColor(), bg: UIColor.whiteColor()),
            .Severe: XCGLogger.XcodeColor(fg: (255, 255, 255), bg: (255, 0, 0))
        ]
        log.setup(.Verbose, showThreadName: true, showLogLevel: true, showFileNames: true, showLineNumbers: true, writeToFile: nil, fileLogLevel: .Debug)
        return log
    #else
        return nil
    #endif
}()


@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  .....
```

色とかは自分の好きなように変えれる。
DEBUG では log の設定を行い、 DEBUG でない時は `return nil` している。

## 3. `log?.xxxx()` で出力

log は global になっているので、どこからでも呼べる。
optional のため `?` をつける。
PRODUCTION では nil のため実行されずログが出力されない。

```
log?.verbose("verbose")
log?.debug("debug")
log?.info("info")
log?.warning("warning")
log?.error("error")
log?.severe("severe")
print("print")
```

## 4. XCode Plugin を入れる

Alcatraz 使って XCode Plugin を入れる。
Alcatraz 入れてない人は [Alcatraz 初期設定と、とりあえず入れとくと良いプラグインの紹介](http://qiita.com/star__hoshi/items/037433ea3bbf0bc001a1) を見て入れる。

* [robbiehanson/XcodeColors](https://github.com/robbiehanson/XcodeColors)
    * 設定した色でログを出力するために必要
* [krzysztofzablocki/KZLinkedConsole](https://github.com/krzysztofzablocki/KZLinkedConsole)
    * ログに出力される `ファイル名:行数` をクリックすると、該当部分にジャンプできる。

## 5. 結果

こんな感じでログが出てめでたい :congratulations: 

<img width="696" alt="AppDelegate_swift.png" src="https://qiita-image-store.s3.amazonaws.com/0/5678/cdc39ce1-d3f8-0580-5016-5de0f81f21a2.png">
LXD 2.0: Blog post series [0/12]

## はじめに

この文書は、LXDの開発者の一人であり、Ubuntu/CanonicalでUbuntu Serverなどの開発に携わっているStéphane Graberが2016年に投稿した「[LXD 2.0: Blog post series](https://www.stgraber.org/2016/03/11/lxd-2-0-blog-post-series-012/)」の一連の記事を翻訳したものです。

翻訳の際に追記したものは「（訳注：……）」と表記するか、「（訳注１）」という形で記事の最後に説明を追加しています。文書の中の一人称はすべて原文の執筆者であるStéphane Graberを指します。文書の体裁はQiitaのMarkdownにあわせて原文から若干変更しています。

この文書のライセンスは原文と同じく、[Creative Commons BY-NC-SA 2.5](http://creativecommons.org/licenses/by-nc-sa/2.5/)のもとに提供されています。

![CC-BY-NC-SA 2.5](http://i.creativecommons.org/l/by-nc-sa/2.5/88x31.png)


## LXD 2.0: Blog post series [0/12]

* https://www.stgraber.org/2016/03/11/lxd-2-0-blog-post-series-012/

LXCとLXD、それにLXCFSのバージョン2.0のリリースが近づいています。良い機会ですので、1年半前に開始したLXDプロジェクトに導入されたすべての機能を語ることにしましょう。

2年前に行った[LXC 1.0のブログシリーズ](https://www.stgraber.org/2013/12/20/lxc-1-0-blog-post-series/)（[日本語翻訳記事](http://qiita.com/m-shibata/items/ee9b295a2596824da819)）と同じように、ブログへの投稿という形で連載します。

予定されている項目は次のとおりです：

* [LXD 2.0: LXDについて [1/12]](http://qiita.com/m-shibata/items/a818859c3c7bcccae742)
* [LXD 2.0: LXDのインストールと設定 [2/12]](http://qiita.com/m-shibata/items/346a481ef476c3c29f8a)
* [LXD 2.0: 最初のLXDコンテナ [3/12]](http://qiita.com/m-shibata/items/3308bb7724749ba9e0f1)
* [LXD 2.0: リソースの管理 [4/12]](http://qiita.com/m-shibata/items/3b954c7768212711ea09)
* [LXD 2.0: イメージの管理 [5/12]](http://qiita.com/m-shibata/items/606f7465d83f296ceea0)
* [LXD 2.0: リモートホストとコンテナマイグレーション [6/12]](http://qiita.com/m-shibata/items/9f51058df8699c81401e)
* [LXD 2.0: LXDの中でDocker [7/12]](http://qiita.com/m-shibata/items/c4dedc6055d2e6093c63)
* [LXD 2.0: LXDの中でLXD [8/12]](http://qiita.com/m-shibata/items/1633a7fc7a3a84327444)
* [LXD 2.0: ライブマイグレーション [9/12]](http://qiita.com/m-shibata/items/fda5f69d1b10c3173b0c)
* LXD 2.0: LXD and Juju [10/12]
* LXD 2.0: LXD and OpenStack [11/12]
* LXD 2.0: Debugging and contributing to LXD [12/12]

来月半ばのUbuntu 16.04のリリースに向けて、毎週二つずつほど掲載していきたいと考えています。

もし上記の投稿を待ちきれず、LXDを試してみたいのであれば、[オンラインのデモページ](https://linuxcontainers.org/ja/lxd/try-it/)からLXDとそのガイドツアーを体験できます。