OmniAICreator/Qiita-1.07M huggingface dataset:
クライアントサイドJavaScriptでXML文書のDOMをパースする

クライアントサイドで JavaScriptでFileReaderを使用してファイルの処理をする際、稀にXML文書を処理する必要に迫られることがあります。その時必要な実装の例と注意点を記載します。

# XMLHttpRequestとFileReaderの違い
XMLHttpRequestの場合、ブラウザがデフォルトでDOMを構築するため、そのDOMを元に文書の処理をできますが、FileReaderからXML文書を処理する場合はファイルをテキストとして処理するか、バイナリとして処理するかのどちらかしか無いため、プログラム側で明示的にDOMを構築させる必要があります。

#実装例
[デモ](http://jsdo.it/tom-konda/parse_xml_demo/)

下記のようなXMLファイルをJavaScriptで読み込む場合、

```xml:test1.xml
<doc>
  <title id="doc-title">テストXML文書</title>
  <chapter class="chapter first-chapter" id="chapter-1">
    <paragraph class="paragraph first-paragraph last-paragraph">
    </paragraph>
  </chapter>
  <chapter class="chapter" id="chapter-2">
    <paragraph class="paragraph first-paragraph">
    </paragraph>
    <paragraph class="paragraph">
    </paragraph>
    <paragraph class="paragraph last-paragraph">
    </paragraph>
  </chapter>
  <chapter class="chapter last-chapter" id="chapter-3">
    <paragraph class="paragraph first-paragraph">
    </paragraph>
    <paragraph class="paragraph last-paragraph">
    </paragraph>
  </chapter>
</doc>
```

XMLのDOMは DOMParser.parseFromString を使用することでDOMを構築できます。

```js:parse_xml.js
    // files変数は File オブジェクト
    var file = files[0];
    var reader = new FileReader();
    reader.addEventListener('load', parseXML, false);
    reader.readAsText(file);
    
    function parseXML(e){
        'use strict';
        var xml = e.target.result;
        // XMLのDOMをパースする
        var parser = new DOMParser();
        var dom = parser.parseFromString(xml, 'text/xml');
    }
```

後は、dom変数に対して、 document.querySelectorAll メソッドや document.getElementsByTagName メソッドを使用することで、目的となる要素を取得することが可能になります。


```js:parse_xml2.js
    // files変数は File オブジェクト
    var file = files[0];
    var reader = new FileReader();
    reader.addEventListener('load', parseXML, false);
    reader.readAsText(file);
    
    function parseXML(e){
        'use strict';
        var xml = e.target.result;
        // XMLのDOMをパースする
        var parser = new DOMParser();
        var dom = parser.parseFromString(xml, 'text/xml');
        var title = dom.getElementById('doc-title').textContent;
        console.log(title);
        var paragraphs = dom.getElementsByTagName('paragraph').length;
        console.log(paragraphs);
        var result = dom.querySelectorAll('.chapter > .first-paragraph').length;
        console.log(result);
    }
```

# 注意点

Webworker上では、DOMに関するメソッドを使用できないため、ファイルを Webworkerで処理することは不可能です。そのため、Webworkerを使ったファイルの処理高速化の恩恵を受けることはできません。
ruby/railsで数値を3桁区切りにする方法


## 結論
`Numeric#to_s(:delimited)`を使うと良いよ。

`ActionView::Helpers::NumberHelper`の`number_with_delimiter`メソッドと同じものです（内部で呼ばれてる）が、タイプ数が少ない方が良いですよね。怠惰万歳。

ちなみに、検索するとよく出てくる`number_to_currency`は通貨表示のためのメソッド（頭に`$`とか`¥`とか付く）です。なお、こちらも同じく`Numeric#to_s(:currency)`で使えます。

## Numeric#to_s(:delimited)の使い方
要ActiveSupport

```ruby
require 'active_support/core_ext/numeric/conversions'

12345678.to_s(:delimited)
 # => 12,345,678
12345678.05.to_s(:delimited)
 # => 12,345,678.05
12345678.to_s(:delimited, delimiter: '.')
 # => 12.345.678
12345678.to_s(:delimited, delimiter: ',')
 # => 12,345,678
12345678.05.to_s(:delimited, separator: ' ')
 # => 12,345,678 05
12345678.05.to_s(:delimited, locale: :fr)
 # => 12 345 678,05
98765432.98.to_s(:delimited, delimiter: ' ', separator: ',')
 # => 98 765 432,98
```

## 参考
https://github.com/rails/rails/blob/master/activesupport/lib/active_support/core_ext/numeric/conversions.rb#L46-L54

## 環境情報

### OS, Kernel
```
% inxi -SM
System:    Host: hakuba.vps.sakura.ne.jp Kernel: 2.6.32-279.11.1.el6.x86_64 x86_64 (64 bit)
           Console: tty 5 Distro: CentOS release 6.6 (Final)
Machine:   System: Red Hat product: KVM v: RHEL 6.2.0 PC
           Mobo: N/A model: N/A Bios: Sea v: 0.5.1 date: 01/01/2007
```

### Ruby, Rails
```
% rake about
About your application's environment
Rails version        4.2.1
Ruby version         2.1.2-p95 (x86_64-linux)
RubyGems version     2.4.4
Rack version         1.5
```

### ActiveSupport
```
% gem list activesupport
*** LOCAL GEMS ***
activesupport (4.2.1)
```
32bit EFIブートファイルを作成する


WindowsタブレットPC等で採用されているCPU(Intel Atom: xx Trail)は基本的に32bitアーキテクチャであり、最近は例外なくファームウェアとしてUEFIが採用されていることから、この類のものにLinuxをインストールしたい場合は、別途32bit版(U)EFIファイルを用意する必要がある。

**環境**
- Ubuntu Server 14.04.2 LTS x64

作業ディレクトリを作成

```bash
$ mkdir ~/tmpwork
$ cd ~/tmpwork
```

必要なパッケージをインストール

```bash
$ sudo apt-get update -y
$ sudo apt-get install -y git build-essential
$ sudo apt-get install -y bison libopts25 libselinux1-dev autogen m4 autoconf help2man libopts25-dev flex libfont-freetype-perl automake autotools-dev libfreetype6-dev texinfo
```

[GRUB 2のソース](http://www.gnu.org/software/grub/grub-download.html)を落としてきてmake

```bash
$ git clone git://git.savannah.gnu.org/grub.git
$ cd grub
$ ./autogen.sh
$ ./configure --with-platform=efi --target=i386 --program-prefix=''
$ make
```

EFIファイルを作成

```bash
$ cd grub-core
$ sudo ../grub-mkimage -d . -o bootia32.efi -O i386-efi -p /boot/grub ntfs hfs appleldr boot cat efi_gop efi_uga elf fat hfsplus iso9660 linux keylayouts memdisk minicmd part_apple ext2 extcmd xfs xnu part_bsd part_gpt search search_fs_file chain btrfs loadbios loadenv lvm minix minix2 reiserfs memrw mmap msdospart scsi loopback normal configfile gzio all_video efi_gop efi_uga gfxterm gettext echo boot chain eval
```

作成したEFIファイルを作業ディレクトリ直下にコピーしておく

```bash
$ cp bootia32.efi ~/tmpwork
```
 
**参考URL**
[Instructions to install Ubuntu 14.10 on ASUS EeeBook X205TA](https://github.com/lopaka/instructions/blob/master/ubuntu-14.10-install-asus-x205ta.md)
[UEFIBooting - Community Help Wiki](https://help.ubuntu.com/community/UEFIBooting)
Mac を MAC と表記しない

掲題の通り。うっかり自分もやっていた時代があるので、自戒の念を込めて。 4 月だし。

- Java は JAVA じゃない
- PHP は php じゃない
- MySQL は MySql じゃない。 MYSQL でもない。
- JavaScript を間違っても JAVA Script と書かない。

大文字・小文字の違いや半角・全角の違いには普段から気を配る。

正しい表記では

> 「 SSH を用いてポート転送を行うには ssh コマンドに -L オプションを……」
> 「この Perl スクリプトを実行する際には perl コマンドに引数〇〇を渡します。」

のように概念や言語そのものを指す場合には大文字で始まり、実装されたコマンドやファイルは小文字で始まることが多いはず。

ヒトは間違う生物。単なる typo は仕方がない。普段から全く区別していないのがダメ。

# 過去

かくいう自分も 5, 6 年前までうっかりと MAC と表記して
「大文字で MAC と書いたら MAC アドレスと区別つかないでしょ、やめなさい！」というツッコミを頂いていた。

何かの理由があって区別せずに扱う場合や、表記が合っているか自信がない場合には、
「あえてそうしています」や「この表記で合っているかわからないのですが」と断り書きしておくと、
ツッコミがやさしくなるかもしれない。

# 余談

- OS X Lion 以降、 "Mac" や "Mac OS X" でなく単に "OS X" という表記も増えてきた。
- 利用規約などで公式な文章を書く場合には、商標・著作権表示にも気を配って ™, ®, © の断り書きを加えた方がよい場合もある。
ApacheにてデフォルトでHTTPアクセスを禁止できるファイル名

**ファイル名が`.ht`で始まるファイルはHTTP経由でアクセス出来ません。** `.htaccess`がその代表格ですね。

```apache:httpd.confにデフォルトで存在する記述
<FilesMatch "^\.ht">
    Order allow,deny
    Deny from all
</FilesMatch>
```

そもそも「アクセスされたら困るファイルをドキュメントルート以下に置くな」という話になりますが、ちょっとしたサンプルコードのようなもので済ませたい場合には重宝するかもしれません。

```php:PDO_SQLITEで使うデータベースファイルを公開ディレクトリ内に置きつつセキュアにする
$pdo = new \PDO('sqlite:.htdb');
```
Angular2のStep by Stepでひっかかったところ


https://angular.io/docs/dart/latest/guide/user-input.html

Angular2 for Dartで気づいたことですがおそらくJSでも変わらないはず。

スクリプト側はこんなComponent

```dart
@Component(selector: 'my-app')
@View(templateUrl: 'app_component.html')
class AppComponent {
}

```

# Case.1 (works well)

```html:app_component.html
<input #myname (keyup)>
<p>{{ myname.value }}</p>
```

![ng2dart_input_valid.gif](https://qiita-image-store.s3.amazonaws.com/0/20253/8d80ac4e-b8bc-f9d6-ab83-502bafcc11cc.gif "ng2dart_input_valid.gif")

# Case.2 (error!)


```html:app_component.html
<input #myName (keyup)>
<p>{{ myName.value }}</p>
```

```
Exception: Uncaught Error: Class 'AppComponent' has no instance getter 'myName'.
```

# What's happened?
違いは`myname`と`myName`である。

1行目のHTMLタグ中に書かれた`#myname`はDirectiveである。よって命名規則は

> Must not contain any uppercase ASCII letters.

である。ただし即エラーになるわけではなく、大文字英数字が含まれている場合はDart(or JS)側のオブジェクトであるとしてスコープ内の検索を行う。今回はAppComponentに同名のgetterやmethod、propertyが存在しないのでエラーとなる。しかしたとえComponent側に`myName`プロパティを持っていたとしてもそれは本来の`#myName`としてのバインドは行われず、うまく動かない。

2行目の`{{ myname.value }}`中の`myname`はAngular2側で解釈される部分であるため、命名規則はなく単純に文字列DIでバインドされるだけである。

ちなみにPolymerやCustomElementを触ったことがある人ならすぐにわかると思うが、次のパターンは正常に動作する

```
<input #my-name (keyup)>
<p>{{ myName.value }}</p>
```
mac小技 ダイアログのボタンをキーボードだけで選択、押下できなくてつらい


![スクリーンショット 2015-04-29 16.52.42.png](https://qiita-image-store.s3.amazonaws.com/0/59686/c02170eb-ddf3-4549-46e5-cf11605de468.png "スクリーンショット 2015-04-29 16.52.42.png")

こういうの。
windowsではキーだけで、選んで押下できるのだけど、macだとキーボードだけで選択、押下できなくてつらい。

![Kobito.mGrR77.png](https://qiita-image-store.s3.amazonaws.com/0/59686/94ccef8f-ed0b-07c9-827a-d90b63347ac3.png "Kobito.mGrR77.png")

「システム設定」の「キーボード」、「ショートカット」
フルキーボードアクセスを
すべてのコントロールにする。

![Kobito.Q6qnSI.png](https://qiita-image-store.s3.amazonaws.com/0/59686/d8ca1acf-d9bf-4bdf-79df-cb47cff287be.png "Kobito.Q6qnSI.png")

TABキーを使って、押下するボタンを移動、スペースキーで押下ができるようになる。
音が出ない時に確認すること

ubuntu 15.04 でどうしても音が出なかったが、
alsamixerで`S/PDIF`のMuteを解除すること,`~/.asoundrc`で音が出た。

* `MM` : ミュート
* `00` : ミュート解除状態

Mキーで切り替わる。

## オーディオデバイス一覧確認

```bash:
$ aplay -l
**** List of PLAYBACK Hardware Devices ****
card 0: PCH [HDA Intel PCH], device 0: ALC282 Analog [ALC282 Analog]
  Subdevices: 1/1
  Subdevice #0: subdevice #0
card 0: PCH [HDA Intel PCH], device 3: HDMI 0 [HDMI 0]
  Subdevices: 0/1
  Subdevice #0: subdevice #0
```

HDMIのオーディ出力は以下ということがわかる。

* card番号 : 0
* device番号 : 3

## /etc/asound.conf 

```bash:
defaults.pcm.card 0
defaults.pcm.device 3
defaults.ctl.card 0
```

## $HOME/.asoundrc

```bash:
pcm.!default {
    type hw
    card 0
    device 3
}
```

## オーディオデバイスのパーミッション確認

```
$ ls -l /dev/snd/
total 0
drwxr-xr-x  2 root root       60  4月 29 16:35 by-path
crw-rw----+ 1 root audio 116,  2  4月 29 16:35 controlC0
crw-rw----+ 1 root audio 116,  6  4月 29 16:35 hwC0D0
crw-rw----+ 1 root audio 116,  7  4月 29 16:35 hwC0D2
crw-rw----+ 1 root audio 116,  4  4月 29 16:35 pcmC0D0c
crw-rw----+ 1 root audio 116,  3  4月 29 16:35 pcmC0D0p
crw-rw----+ 1 root audio 116,  5  4月 29 16:36 pcmC0D3p
crw-rw----+ 1 root audio 116,  1  4月 29 16:35 seq
crw-rw----+ 1 root audio 116, 33  4月 29 16:35 timer
```

上記から audio グループに所属しておけば良いことがわかる。

```bash:
$ id
uid=1000(User1) gid=1000(tk) groups=1000(User1),4(adm),24(cdrom),27(sudo),30(dip),46(plugdev),115(lpadmin),125(sambashare)
```

/etc/group に追記したがubuntu側でよしなにしてくれていたかもしれない。


## cat /proc/asound/cards
Atomで正規表現の後方参照を使った置換


よく忘れるのでメモ。

下記のような文書の単語の前後に記号を挿入したい。

```
Apple
Banana
```

Atomでは$1などが後方参照。

![untitled_-__Users_yandod_develop_php-warrior_-_Atom_と_正規表現に関する140件の投稿_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/10032/0780556b-df11-4426-fe28-2b5d5c433bf0.png "untitled_-__Users_yandod_develop_php-warrior_-_Atom_と_正規表現に関する140件の投稿_-_Qiita.png")

上記の様に記述して実行すれば次のような出力を得る。

```
-Apple-
-Banana-
```

## memo

RubyからPHPへ

```
^([a-zA-Z_]+) ([0-9a-zA-Z_":\. ,?'\!]+)
$this->$1($2);
```
Mac の emacs で Ctrl + function を使う

Mac の Emacs で Ctrl + function に 機能を割り当てると、OS と干渉する。なので、環境設定でこれらの key を OS に取られないようにした。

![スクリーンショット 2015-04-29 16.24.41.png](https://qiita-image-store.s3.amazonaws.com/0/52705/df6f5fd1-9ad5-dbd4-55e9-ee4a351b5d33.png)


図の check を全て外した。
プロトタイプチェーンの理解

普段rubyを書いていて、メタプログラミングrubyとか読んで勉強しているのだけど、javascriptもやらなきゃなと思っていろいろ勉強を始めている。

いまいちプロトタイプベースというのが理解できなくて、うじゃうじゃnodeのコンソールでいじっていたのだけど、だんだんわかってきたので図に書いてみた。

![写真 (1).JPG](https://qiita-image-store.s3.amazonaws.com/0/20721/90698ded-d193-c0b7-2edf-7772651a3738.jpeg)

・すべてはオブジェクトである
・ただ、クラスみたいな概念は存在する。

クラスみたいな概念といっているのは、rubyでいうオブジェクトのメソッド探索はオブジェクト自身→そのクラスのメソッド→その親クラスのメソッド（厳密には違いますが、そこはメタプログラミングrubyを参考）のように探索していくのだけど、javascriptの場合はプロトタイプチェーンという方式で、`__proto__`をさかのぼって探索がされていくというところ。かなと。
だから、クラスっぽく見えるのだけど、すべてはオブジェクトです。
MySQL が 'The server quit without updating PID file 'というエラーを出したときの対処法


おそらくpermissionsの問題(らしい)。(発生条件わかる方いたら教えてください。)何度か無駄に時間取られたので備忘録としてメモ。

### mysqlインスタンスが現状走ってないか確認

```
ps -ef | grep mysql
```

### もし走っているインスタンスが止める/消す

```
  483  8357 1
```

こんな感じで数字が左端でてくると思うので、二つ目のPID(ここでは8357)を

```
kill -9 8357
```

みたいな感じで消す。

すると、

```
mysql.server start
```

でいつも通りスタートできる。
Django1.8からテンプレートエンジンにJinja2を選べるようになっていた #djangoja

この記事は[TokyoDjangoMeetup #3](http://django.connpass.com/event/14219/)参加中に書きました。

Django1.8からテンプレートエンジンにJinja2を選べるようになりました。
設定方法は、設定ファイルの`TEMPLATES`を以下のように書くだけです。

```py:settings.py
TEMPLATES = [
    {
        # ↓デフォルトの値をこれに書き換える
        'BACKEND': 'django.template.backends.jinja2.Jinja2',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            # context_processorsがあると動かないので使わないようにする(後述)
            #'context_processors': [
            #    'django.template.context_processors.debug',
            #    'django.template.context_processors.request',
            #    'django.contrib.auth.context_processors.auth',
            #    'django.contrib.messages.context_processors.messages',
            #],
        },
    },
]
```

Jinja2はDjangoに同梱されていないので、`pip install Jinja2`で別途Jinja2をインストールしておいてください。

`django-admin startproject`で生成された`settings.py`では`'OPTIONS'`に`context_processors`がありますが、これを残したままJinja2を使うと、以下のエラーが発生します。 [^1]

```
Exception Type: TypeError
Exception Value: 
__init__() got an unexpected keyword argument 'context_processors'
```

`context_processors`の代わりに`environment`という項目を使えます。`app/jinja2.py`を以下のような内容で書いて、

```py:jinja2.py
from __future__ import absolute_import  # Python 2 only

from jinja2 import Environment
from datetime import datetime


def environment(**options):
    env = Environment(**options)
    # これがcontext_processorsの代わりになる
    env.globals.update({
        'greeting': u"HELLO!",
        'imananji': datetime.now, # ページロードのたびに結果を求めたいならcallableなオブジェクトを渡す
    })
    return env
```

`environment`を以下のように書くと、テンプレートの中で`{{ greeting }}`、`{{ imananji() }}`が使えるようになります。

```py:settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.jinja2.Jinja2',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            # 'app'の部分はアプリケーションの構成によって変わります
            'environment': 'app.jinja2.environment',
        },
    },
]
```

[^1]: ... [公式ドキュメントのサンプルコード](https://docs.djangoproject.com/en/1.8/topics/templates/#support-for-template-engines)ではさりげなく `'context_processors'`が消されています :cry:
Laravel5の.envにコメント入れてしまって。

AWSのS3にファイルをアップロードしようとしたらCurlのエラー出て少しはまったんだけど、.envのコメントの半角スペースが原因であった。

[curl] 6: Could not resolve host: xxx-dev.s3.ap-northeast-1 [url] https://xxx-dev.s3.ap-northeast-1 /bbb.png

~~~ .env
AWS_REGION=ap-northeast-1              // default = us-east-1
~~~

~~~ .env
AWS_REGION=ap-northeast-1
~~~

Vagrantのせいにしてすみません。
Grafana + GraphiteでAnnotationsを使ってイベントを可視化する

Grafanaには`Annotations`という、イベントをグラフ上へ表示する機能があります。

http://grafana.org/docs/features/annotations/

Annotationsの取得元はいくつか利用可能ですが、データソースとしてGraphiteのEvent
を使う方法について解説します。

# Event
Graphiteには`Event`と言う情報を保存する仕組みがあります。
しかし探してみても、データを格納する方法については公式ドキュメントで見つからない。

ただ、データの取り出し方については書かれています。
http://graphite.readthedocs.org/en/stable/functions.html?highlight=event#graphite.render.functions.events

[こちらのブログで](https://virtualandy.wordpress.com/2014/12/08/graphite-events-with-a-timestamp/)登録方法が書かれているので、そちらを参考に進めます。

# Eventの登録
最低限のデータで登録する場合は、以下の様にデータをPostしてあげればいいです。

```
curl -X POST "http://graphitehost.com/events/" -d '{"what": "fugafuga", "tags": "hoge"}'
```

Eventの情報が格納されるテーブルは`events_event`で、このテーブルの構造を見ると以下のように定義されてます。

```
CREATE TABLE "events_event" (
    "id" integer NOT NULL PRIMARY KEY,
    "when" datetime NOT NULL,
    "what" varchar(255) NOT NULL,
    "data" text NOT NULL,
    "tags" varchar(255) NOT NULL
);
```

テーブル構造から分かるように、さらに`when`と`data`を指定することが可能です。

- `when`は、デフォルトでシステム日付が設定されます
- `data`は、デフォルトでからが設定されます

例えばこんな感じで

```
curl -X POST "http://graphitehost.com/events/" -d '{"what": "Deploy apps 5", "tags": "deploy", "data": "ここには長い文章が指定できます。"}'
```

# Grafanaの設定
Graphiteに登録されているEventをグラフ上に表示するには、Dashboardの設定から登録します。
Dashboardで設定するように、グラフ単位では指定できないみたいです。
![スクリーンショット 2015-04-29 12.14.08.png](https://qiita-image-store.s3.amazonaws.com/0/36184/007af472-419c-ab43-36f6-4b476fab7926.png "スクリーンショット 2015-04-29 12.14.08.png")

取得するEventの情報を登録します。
![スクリーンショット 2015-04-29 13.48.01.png](https://qiita-image-store.s3.amazonaws.com/0/36184/a1ed08af-2a48-af85-8bc9-89e1286be83c.png "スクリーンショット 2015-04-29 13.48.01.png")

- Name: Annotationの名称
- Datasource: Graphiteのデータソース
- Graphite event tags: イベントを登録した時のtag名

登録すると、こんな感じで表示されます。
![スクリーンショット 2015-04-29 13.12.48.png](https://qiita-image-store.s3.amazonaws.com/0/36184/8f8e13b0-498d-0a31-28b9-273bff1ac182.png "スクリーンショット 2015-04-29 13.12.48.png")

先ほどの`data`に指定した場合は、以下のように表示されます。
![スクリーンショット 2015-04-29 13.37.03.png](https://qiita-image-store.s3.amazonaws.com/0/36184/88183ea2-0a7c-a167-6c7b-b480b5cad060.png "スクリーンショット 2015-04-29 13.37.03.png")

Dashboardには複数のAnnotationが登録でき、チェックボックスのON/OFFで表示非表示の切り替えができるので、デプロイ、サーバ追加と言った複数のイベントを登録して表示することで、どのような出来事がきっかけでリソースに変化があったかが一目瞭然となります。

このエントリーは[私のブログ](http://d.hatena.ne.jp/sparkgene/20150429/1430284917)で公開した情報のクローンです
[Unity4,Unity5]thetaとかで撮った全球画像をSkyboxに指定する方法

最近全天球画像をSkyboxにする方法がわかったのと、Unity4(.6)とUnity5では若干方法が違うのでメモ。
##Unity4の場合
①取り込んだ全天球画像の[Texture Type]を**[Reflection]**に変更し、[Mapping]を**[Cylindrical]**にして[Apply]を押す。
![Theta01.gif](https://qiita-image-store.s3.amazonaws.com/0/75228/85a12b90-3987-742e-61e7-b95558541464.gif)

②新しくマテリアルを作って[Shader]を**[RenderFX]**->**[Skybox Cubed]**に変更し、CubeMapに先ほどの全天球画像をセットする。
![Theta02.gif](https://qiita-image-store.s3.amazonaws.com/0/75228/d3ab7895-927f-658d-bac6-154385a8dc86.gif)

③メニューの[Edit]から[Render Setting]を開き、インスペクターの[Skybox Material]にさっき作ったマテリアルをセットする。
![スクリーンショット 2015-04-29 14.05.23.png](https://qiita-image-store.s3.amazonaws.com/0/75228/aaba16ab-d005-5a4d-e91a-53326ed6363a.png)

おしまい。
##Unity5の場合
①取り込んだ全天球画像の[Texture Type]を**[CubeMap]**に変更し、[Mapping]を**[Latitude-Longitude Layout(Cylindrical)]**にして[Apply]を押す。
![Theta05.gif](https://qiita-image-store.s3.amazonaws.com/0/75228/e5f920cf-2f8d-490f-9d25-1fbb917c2d3f.gif)

②新しくマテリアルを作って[Shader]を[Skybox]->[CubeMap]に変更し、CubeMapに先ほどの全天球画像をセットする。
![スクリーンショット 2015-04-29 14.17.41.png](https://qiita-image-store.s3.amazonaws.com/0/75228/07c1af1b-ec21-313f-699a-4d461ca727b4.png)

③メニューの[Window]から[Lighting]を開き、[Lighting]ウィンドウ->[Scene]->[Environment Lighting]->[Skybox]にさっき作ったマテリアルをセットする。
![スクリーンショット 2015-04-29 14.22.25.png](https://qiita-image-store.s3.amazonaws.com/0/75228/fe54bb13-d1d6-080e-7953-88af025eb264.png)

おしまい。
apk、ipaをアップロード前にチェック

#はじめに
動作確認をする前後に、簡単に、機械的に処理できるチェックを行うと
がっかりすることが少なくなります。

#バイナリをアップロード時の失敗要因

##内部バージョン
一度提出したipaやapkファイルを取り下げるのは条件によりますが
難しいことが多く、次のバージョンにビルドしなおしての更新となります。

AndroidでのVersionCodeとiOSでのBuild（CFBundleShortVersionString）はバイナリ提出時、どちらも数値を増やさないとアップロードができません。

apkは提出前に"アップロードしますか？"ダイアログが表示され
VersionCodeとVersionNameが表示されます。
iOSは内部で設定したBuild（CFBundleShortVersionString）は申請時に表示されなかったかと思います。

##keystore、manifest.xml、provisioing Fileの設定
提出できないこともありますが
必要な権限が付いていないと機能が使えない
permissionの記述に誤りがあることに気づかずダウンロードできる端末が０機種と管理コンソール上に表示されて困惑する
iOSの場合はバイナリアップロード時にアラートが飛んできても見逃すとPush通知ができないなど、危ないところは多数あります。


#チェック環境
Mac OS X Yosemite
Xcode 設定済み
AndroidStudio 設定済み

#Android
##署名
所定のkeystoreで署名されているかを確認します。
debug用のkeystoreで署名されたapkはStoreに上がらない。

```
$ jarsigner -verify -verbose -certs hoge.apk
```

次のような署名が見つかるとガッカリ
>X.509, CN=Android Debug, O=Android, C=US

##設定
aaptコマンドを使うため、androidSDKが必要です。
pathが通ってない場合は下記を参考に直接指定しても使えます。

`[androidSDKのパス]`/build-tools/`[version]`/aapt

[androidSDKのパス]はEl Capitanだと
>$ ~/Library/Android/sdk/build-tools/`[version]`/aapt dump badging app-release.apk

```
$ aapt dump badging app-debug.apk | grep Version
```

AndroidStudioで署名したapkだと次のように表示されました。

>package: name='jp.hoge.sample' versionCode='1' versionName='1.0' platformBuildVersionName='5.1-1756733'
sdkVersion:'15'
targetSdkVersion:'22'

パイプ後の`grep`を除けば全部表示されます。
#iOS
##provisioing File
Push通知などの有効化などはprovisioning Fileの設定を確認します。

```
$ unzip hogehoge.ipa
```

下記の`hogehoge.app`は実際のものと置き換えてください

```
$ security cms -D -i "Payload/hogehoge.app/embedded.mobileprovision"
```
provisioing Fileの内容そのままが表示されます。

##設定
アプリのBundleIdentifierやバージョンなどはInfo.plistに記載されています。
ipaに含まれているplistはバイナリになっているため通常のエディタでは閲覧が難しくなっています。
###Xcodeが入っている
Xcodeのエディタが使えます。openコマンドでplistをダブルクリックしたのと同じ状態で表示されます。

ざっくりipaからInfo.plistだけを取り出す方法は下記の通り

```
$ unzip -c hogehoge.ipa Payload/hogehoge.app/Info.plist >  Info.plist
```

```
$ open Info.plist 
```
###Xcodeなし
plutilコマンドで変換してエディタで確認します。
変換した後のファイルであればWindowsなど他のOSでも確認が可能になります。

下記はxmlへの変換例です。
```
$ plutil -convert xml1 Payload/pchSample.app/Info.plist -o xml.text
```
-convert json にすることでjson形式でも出力ができます。
#参考
http://docs.oracle.com/javase/jp/7/technotes/tools/windows/jarsigner.html
http://nosource.blog35.fc2.com/blog-entry-95.html

http://peroon.hatenablog.com/entry/2012/12/04/130026
http://stackoverflow.com/questions/3014369/php-how-to-get-version-from-android-apk-file

http://l-w-i.net/t/macosx/plist_002.txt

#さいごに
チェック方法を知ることで個別に自動化が可能になります。
自動化のシステムのメンテが困難であったり、サービスのAPIが未対応の部分は手動で確認するところがまだまだ必要です。
Brackets1.3がリリースされたよ！

やったねｔ

※追記
投稿してしばらくして世間を見てみると Microsoft から 「Visual Studio Code」という
クロスプラットフォームのエディタが発表されていてエディタの戦火は広がるばかりだなと思いました…。

# Brackets1.3がリリースされました！！...で？
どんなもんなんでしょうか、見て行きませう。
[Brackets DLページ](http://brackets.io/)

# はじめに
Brackets を使うだけの人向けの投稿ですので、
API 使ってどうのこうのする人はリリースノートとか見てください！
[公式ブログ](http://blog.brackets.io/)
[Release Notes: 1.3 · adobe/brackets Wiki · GitHub](https://github.com/adobe/brackets/wiki/Release-Notes:-1.3)

ちなみにこの投稿、だいたいリリースノートに書いてあることです...。

# 更新内容
## コマンドラインから実行できるようになった
[Command Line Arguments · adobe/brackets Wiki · GitHub](https://github.com/adobe/brackets/wiki/Command-Line-Arguments)

アップデートしてそのままでは使えないので下記方法で導入します。

### 導入方法
Brackets を起動して下記の操作を実行します

* Windows
インストーラ実行時に「Add "brackets" launcher to PATH for command line use」のチェックを
入れたままにしておくこと（デフォルトで入っています）
![brackets_install_win.JPG](https://qiita-image-store.s3.amazonaws.com/0/16309/c5331d5a-a7e3-dfed-dd40-92aa3837ad60.jpeg)

* Mac
Bracketsを起動して メニュー → 「コマンドラインショートカットをインストール」
![brackets_install_mac.png](https://qiita-image-store.s3.amazonaws.com/0/16309/bbd813cc-2db1-87a4-1d0b-c55724164b84.png)



## コードの折りたたみ機能がデフォルトで使えるようになった
他のエディタでもあるHTMLなどの折りたたみ機能です。
なんで今まで入れ忘れていたんだって叫びたくなるくらいお便利な"元"拡張機能です。
今回のアップデートでデフォルトの機能として使用できるようになりました。

元の作者の[Patrick Oladimeji](https://github.com/thehogfather) さんに感謝...！
https://github.com/thehogfather/brackets-code-folding

この"元"拡張機能を使用したことがなかったのでざっくり確認してみたところ、
HTML(XML)はもちろんJava, PHP, JavaScript, CSS, JSON, Markdownは使用できたので
他の言語もだいたい使用できるのではないかと思います。
Perl, YAML(さすがに...?)は反応せずでした。

Markdownにまで対応しているのか。とんでもないヤツや...
![work_in_progress.png](https://qiita-image-store.s3.amazonaws.com/0/16309/89c099d1-5818-7567-85c5-e4667e570565.png)

ちなみにこれ、テンプレートエンジン系の ".tpl" だとか ".tt", ".tx" などの場合、
デフォルトでは折りたたみ機能が動いてくれないようです。
ただ、シンタックスハイライトをHTMLにすると折りたたみ機能が動作してくれるので、
テンプレートエンジンが見づらくて大変！という思いもせずに済みます。


## 正常性レポート送信をするようになった

解除する場合はメニューの ヘルプ > 正常性レポート でポップアップするウインドウの
「Bracketsの使用方法に関する情報を匿名で共有します」のチェックを外せばOK
※とはいえどんな情報が送信されるかプレビューされてるし、
ソースコード持って行かれるわけでもないし、多少貢献したほうがいいのかなーと思います

## Angularが色々捗る修正が入った
script タグ内で書くAngularのテンプレートがただのテキストになってたのが不便じゃコラ！
ってことだったらしく(?)、その修正が入ったみたいです。
おかげさまでテンプレート内のHTMLの修正が捗るようになりました。
https://github.com/adobe/brackets/pull/10666

### Before
![before.png](https://qiita-image-store.s3.amazonaws.com/0/16309/f8b62af6-6988-1899-6e4e-be1858cb2320.png)

### After
![after.JPG](https://qiita-image-store.s3.amazonaws.com/0/16309/9ad0f0c5-419e-d210-86ce-55446a5f97e7.jpeg)




## 安定性とか言語対応とか
* Windowsのスクロール速度が1.0時代に戻った
* 細かい不具合が直った
* 色々翻訳が更新された

# まとめ
るつもりは特にありません

最初はスルーしてしまったエディタなのですが、プラグインの開発などがかなり活発らしく、
いつの間にか常用エディタとして不足ないものになっていたというのが正直な感想です。

さらに言えば、Photoshopなどの各種Adobeのツールとの連携機能もあるらしく、
私はエディタとしてしか知らないので、まだ見ぬ機能もたくさんあるようです。
ライブプレビューなどと合わせてまだまだ進化していきそうなのでこれからに期待！

UnEditorにあるシンタックスハイライトの独自定義みたいなものが簡単に作れる機能があれば
更に色々捗るような気がします。はい、ものすごく私的なことです。

というわけでこれからもありがたーく使わせていただきます！
ここまでお読み下さりありがとうございました！

### 余談
BracketsのMinimapのプラグイン、Minimap内にたまに画像が出てくるんですが...。
ライブプレビューできちゃってるんじゃないかなこれ...w
php & mysql & wordpress setup


yum
---
$ sudo yum update

$ sudo cp -p /usr/share/zoneinfo/Japan /etc/localtime

$ sudo yum install -y git httpd24 php54 php54-devel php54-mbstring php54-mcrypt php54-mysql php54-gd mysql mysql-server dstat

(mod24_ssl - ssl環境のみインストール)

sudo chkconfig httpd on
sudo chkconfig mysqld on
sudo service httpd start
sudo service mysqld start
mysql_secure_installation


### edit apache config
sudo vim /etc/httpd/conf/httpd.conf

### edit php config
sudo vim /etc/php.ini

edit php.ini
---

upload_max_filesize = 5M
allow_url_fopen = On
allow_url_include = Off
default_charset = UTF-8
log_errors = On
error_log = /var/log/php.log
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = auto
mbstring.http_output = pass
mbstring.detect_order = auto
expose_php = Off
display_errors = Off
enable_dl = Off
memory_limit = 32MB
date.timezone = Asia/Tokyo
session.cookie_httponly = On
session.cookie_secure = Off // On -> ssl only
session.hash_function = 1

wordpress
---

wget https://ja.wordpress.org/wordpress-4.2.1-ja.tar.gz
tar -xzf wordpress-4.2.1-ja.tar.gz
mysql -u root -p
CREATE USER 'wordpressuser'@'localhost' IDENTIFIED BY 'wordpresspw';
CREATE DATABASE `wordpress`;
GRANT ALL PRIVILEGES ON `wordpress`.* TO "wordpressuser"@"localhost";
FLUSH PRIVILEGES;

sudo chmod -R 0775 /var/www
sudo chown -R ec2-user:apache /var/www
sudo chown -R apache:apache /var/www/html/wordpress/
sudo service httpd restart

運用ツールインストール
---

$ sudo yum install dstat

ロードアベレージ、CPU、Memory、disk、NetWork等を一覧でリアルタイムに見れるので便利。
各種ステータス確認コマンドのまとめ、一括管理のために作られたコマンドらしい

dstat 実行でモニター画面が表示される事を確認
各確認項目にaliasを貼っておくと便利
以下を参考にさせて頂きました。
http://d.hatena.ne.jp/hirose31/20120229/1330501968を参照
vim /etc/profile にて末尾に以下を追加
alias dstat='dstat -tlcmgdrn'
alias dstat-cpu='dstat -tlcr'
alias dstat-mem='dstat -tlcm'
alias dstat-disk='dstat -tlcdr'
alias dstat-net='dstat -tlcnd'
OGP

#OGP （Open Graph Protocol）とは？
facebook、mixi、GREEなどのSNSで使われている共通の仕様のことで、
「このウェブページはこんな内容ですよ」と明言するためのものです。

例えばfacebookでは、あるページにいいね！がされると
「〇〇さんが〇〇についていいね！と言っています」とウォール上に投稿されます。
これはOGPを導入していないサイトの場合に表示される内容です。
OGPを導入しているサイトがいいね！された場合は「記事元のURL、ページタイトル、サイト説明、サムネイル等」を表示させる事ができます。
このように、いいね！された時の表示をサイト側で指定するためのOGPについて少しまとめてみました。

#OGPの例
```lang:index.html
<meta property="og:type" content="ウェブページが何のページであるか（必須）">
<meta property="og:title" content="ウェブページの名前（必須）">
<meta property="og:image" content="ウェブページのサムネイル（必須）">
<meta property="og:url" content="ウェブページの URL（必須）">
<meta property="og:description" content="ウェブページの説明">
<meta property="og:site_name" content="サイト名">
<meta property="og:email" content="連絡先">
<meta property="og:locality" content="場所">
<meta property="og:latitude" content="経度緯度での位置情報">
```

基本的には、meta property=”何を指定するか” content=”どのように指定するか”
といったように記述していきます。
他にも様々な設定がありますので下記に本家サイトURLを記載しておきます。

[The Open Graph protocol](http://ogp.me)
PHP7調査(25)assert関数が実用的になった

PHP7から、assert関数が他の言語と同程度に実用的になりました。つまり、開発時だけアサーションのチェックを行い、商用環境ではコンパイル時に関数ごと除去するような運用ができるようになりました。

PHP5でもassert関数は存在していましたが、商用環境でも関数呼び出しのコストが発生したり、アサーションを文字列として定義する前提だったりと非常にイケていない仕組みだったせいか、誰も使わないような関数でした。

# assert関数の利用例

assert関数には、絶対に正しいはずの評価式を書くような使い方をします。つまり、アサーションが失敗するとしたらバグがあるという状況です。別のサーバとの通信に失敗したような場合など、商用環境でも起こりうる実行時エラーに対してアサーションを使ってはいけません。

assert関数の利用例としては次のようなコードが考えられます。

```php
<?php
class AcmeHttp
{
    const DATA = [
        "key" => "X-HTTP ",
        "value" => "testing"
    ];

    public function getData() {
        assert(preg_match('/^([a-zA-Z0-9-]+)$/', self::DATA["key"]));
        /* ... */
    }
}
(new AcmeHttp())->getData();
```

ここではクラス定数に対する制約をアサーションで確認しています。これは開発環境で一度確認できれば商用環境で毎回チェックする必要はありませんから、アサーションを使うのに適していると言えるでしょう。


# assert関数についての設定

php.iniで設定できる値として、`zend.assertions`と`assert.exception`の2つが新設されています。

設定`zend.assertions`はそれぞれ次のような意味になります。

* 1 - assert()に対応するopcodeを生成し、assert()を評価 (開発モード)
* 0 - assert()に対応するopcodeを生成するが、実行時にassert()部分をスキップする
* -1 - assert()に対応するopcodeを生成しない (assertのコストゼロ, 商用環境モード) 

また、`assert.exception`が非ゼロのとき、アサーション失敗時に例外AssertionErrorをスローするようになります。

# 感想など

RFCには、ライブラリ作者はアサーションをバリバリ使うといいよ！などと書いてあります。読みやすくてバグの少ないコードが書けるようになればいいですね。

# 参照

* [PHP RFC: Expectations](https://wiki.php.net/rfc/expectations)
* [PHP RFC: Throwable Interface](https://wiki.php.net/rfc/throwable-interface)
(Docker で) ローカルに APT のパッケージリポジトリキャッシュサーバ (apt-cacher-ng) を建てたら幸せになった。

# 経緯

Dockerfile を何度も編集して apt-get install していると、
パッケージのダウンロードに大きく時間を喰ってると体感することが多かった。
特に既存のイメージを継承しない新しいイメージを作るときは、
git のような基本的なパッケージまで再取得する。

## ミラーかキャッシュか

かといって apt-mirror を使ったフルミラーを建てるのもなかなか手軽ではないと感じたので、
apt-cacher-ng でキャッシュ用のプロキシサーバを建てることにした。

apt-cacher-ng では取得したパッケージのみをキャッシュするので、
apt-mirror のように導入初期に大量にパッケージを取得する必要はない。

自分の使用範囲では apt-cacher-ng の方が合っているので apt-cacher-ng を選択した。
きっと適切な使い分けがあるのだろうと思う。

# Docker のサイトにもあった

実は Docker のサイトにも apt-cacher-ng 用の Docker イメージを作る方法が紹介されているので、
apt-cacher-ng プロキシサーバの構築も Docker で行った。なので構築は 1 分でできてしまった。

https://docs.docker.com/examples/apt-cacher-ng/

# 実際に使ってみたところ

プロキシ設定をする場合としない場合でそれぞれ docker build にかかる時間を time コマンドで記録した。
docker による cache を含まずに測定するため、 ```docker build --no-cache``` のように ```--no-cache``` オプションで実行した。
プロキシ設定をする場合は 2 回 build を実行し、キャッシュが有効になる 2 回目の build を記録とした。

プロキシ設定をする場合は、次のような行を Dockerfile の apt-get 等が始まる前に書き加える。

```dockerfile:Dockerfile
RUN echo 'Acquire::http { Proxy "http://X.X.X.X:3142"; };' >> /etc/apt/apt.conf.d/01proxy
```

## nginx だけをインストールしてみる場合

```dockerfile:Dockerfile
RUN apt-get update && apt-get install -y nginx
```

### プロキシなし

```
real	1m4.797s
```

### プロキシあり

```
real	0m19.806s
```

だいたい所要時間が 1/3 になっている。嬉しい。

## もっとてんこもりにインストールしてみる。

次のような、大量のパッケージもインストールしてみた。
手持ちの環境を作るシェルスクリプト等からいくつか抜き出してまとめたもの。
Docker の常識的な使い方ではこんなにたくさんインストールすることはあまりないはず。

```dockerfile:Dockerfile
RUN apt-get update && \
    apt-get install -y \
        curl git vim tmux pv \
        build-essential make ccache \
        python-dev python-pip \
        nodejs nodejs-dev \
        libssl-dev \
        zlib1g-dev libbz2-dev \
        libreadline-dev libsqlite3-dev \
        gfortran libopenblas-dev liblapack-dev g++ \
        build-essential python3-tk tk-dev libpng12-dev \
        libzmq3-dev \
        freetds-dev freetds-bin tdsodbc \
        pandoc \
        r-base r-base-dev
```

### プロキシなし

```
real	9m16.991s
```

### プロキシあり

```
real	4m58.601s
```

こちらもすごく時間が短縮できた。 5 分減るのは大きい。

# 余談

以下は本題とは関係ないけど、一応触れておきたい話

## DEBIAN_FRONTEND=nointeractive しよう

Ansible や Chef を使ってる人にもお馴染み。
Docker で apt-get する場合には

```dockerfile:Dockerfile
ENV DEBIAN_FRONTEND noninteractive
```

をつける習慣を持つと良い。
シェルでの人間が操作する場合以外はつけた方がいい。インタラクティブな質問をしてこなくなる ([y/N] みたいな)
他にもたとえば ncurses が立ち上がるのを防いだり。

## なぜ複数の RUN ではなく 1 つの RUN に複数行書く

イメージ差分は Dockerfile のステートメントごとに記録される。

記録されたあとにファイルの削除を行っても、イメージのサイズは減少しない。
RUN の最後でクリーンアップが可能ならした方がいい。

```apt-get clean``` や ```rm``` を使って不要なファイルを消してしまう方が健全。
(追加で apt-get する予定がないなら、 /var/lib/apt/lists/* ごと削除する手もある。 )

```dockerfile:Dockerfile
RUN apt-get update && \
    apt-get install -y git curl nginx && \
    apt-get clean &&
    rm -rf /tmp/* /var/tmp/*
```

## タイトル

書いたあとで気がついた。
タイトルの「建てたら幸せになった」は、前に読んだ ↓ を無意識に継承してしまっていた。

http://yosida95.hatenablog.com/entry/2013/05/19/003744
Swift 横スクロール画面切り替えを簡単に実装する。


# PageMenu

最近のアプリでよく見かける横スクロールのMenuが簡単に実装できる代物です。

![ksy9e.gif](https://qiita-image-store.s3.amazonaws.com/0/41892/757dfeba-84b9-e148-cc31-93c59ba21d51.gif "ksy9e.gif")


# 使ったライブラリ
[PageMenu](https://github.com/uacaps/PageMenu)

# 導入

現時点(2015/04/29)でcocoaPodでインストールできるバージョンが
swift1.3に対応していなかったので手動でのインストール方法を紹介します。


## STEP１ インストール
[PageMenu](https://github.com/uacaps/PageMenu)から
ダウンロードしたファイル

Classes/CAPSPageMenuをプロジェクトに追加。


## STEP２ CAPSPageMenuのプロパティを設定

使いたいViewControllerで下記を宣言。

```swift
var pageMenu : CAPSPageMenu?
```

## STEP３ 表示したいViewControllerを追加
表示したいViewControllerの配列をつくる。

```swift
var controllerArray : [UIViewController] = []
  
var controller1 = UIViewController() // 自分で表示したいViewControllerを書く。
var controller2 = UIViewController() // 自分で表示したいViewControllerを書く。
var controller3 = UIViewController() // 自分で表示したいViewControllerを書く。

controllerArray.append(controller1)
controllerArray.append(controller2)
controllerArray.append(controller3)
```

## STEP４ PageMenuの設定

PageMenuの設定
詳しくは[PageMenu](https://github.com/uacaps/PageMenu)

```swift
var parameters: [String: AnyObject] = ["scrollMenuBackgroundColor": UIColor.blackColor(),
            "viewBackgroundColor": UIColor.blackColor(),
            "selectionIndicatorColor": UIColor.orangeColor(),
            "bottomMenuHairlineColor": UIColor.blackColor(),
            "menuItemFont": UIFont(name: "HelveticaNeue", size: 13.0)!,
            "menuHeight": 80.0,
            "menuItemWidth": 120.0,
            "centerMenuItems": true,
            "menuItemSeparatorWidth": 4.3   ]

pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRectMake(0.0, 50.0, self.view.frame.width, self.view.frame.height), options: parameters)
```

## STEP５ Viewに追加

```swift
self.view.addSubview(pageMenu!.view)
```

これだけで簡単に横スクロールのアプリがつくれます！
是非お試しあれ！


## デモのソースはこちら
https://github.com/yuinchirn/pageMenuSample
Rubyの array.map(&:to_s) 記法を紐解く


##予備知識

1. オブジェクトは`&`で修飾でき、 **blockをprocに、** **procをblockに** 変換する。
2. `&`はさらに、 **procでないオブジェクトに対してto_procを呼んでからblockに変換する。**
3. `Symbol#to_proc`は、引数を1つとり、そのsymbolをメソッドとして呼ぶprocを返す。

具体的には、`:to_s.to_proc`は

```
Proc.new do |elem|
  elem.send(:to_s)
end
```
を返す。

##結論

```
array = [1,2,3]
array.map(&:to_s)
# => ["1", "2", "3"]
```


出典
http://www.reddit.com/r/ruby/comments/2ipgx6/help_understanding_mapjoin/
collectionViewの慣性スクロールを任意の位置で止める

# targetContentOffsetを使う
![](https://raw.githubusercontent.com/guarani/PVSCellPagedTableView/0fa066caab5e7e03ae2c7c61bae38431eed474e4/demo.gif)

こちらを参考にした。これは縦スクロールのときを実装している。
[PVSCellPagedTableView](https://github.com/guarani/PVSCellPagedTableView/tree/0fa066caab5e7e03ae2c7c61bae38431eed474e4)
[UITableView+CellPaging.swift](https://github.com/guarani/PVSCellPagedTableView/blob/0fa066caab5e7e03ae2c7c61bae38431eed474e4/TestTableViewScrollZoom/UITableView%2BCellPaging.swift)

これの横バージョンを作ってみた。

```swift
func pvs_cellPagingScrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>, cellWidth: CGFloat, contentInsetX: CGFloat = 0) {
        
    var targetContentOffsetCorrected: CGPoint = targetContentOffset.memory
    targetContentOffsetCorrected.x += contentInsetX
    
    
    let targetCellIndexPath = self.collectionView?.indexPathForItemAtPoint(targetContentOffsetCorrected)
    
    let targetCellRect = self.collectionView?.cellForItemAtIndexPath(targetCellIndexPath!)
    
    var targetCellXCenter = targetCellRect?.frame.origin.x
    println(targetCellXCenter)
    
    let isJumpingDown = (targetContentOffsetCorrected.x % cellWidth) > (cellWidth / 2)
    
    if isJumpingDown == true {
        let nextPlace = Int(targetContentOffsetCorrected.x) / Int(cellWidth)
        targetCellXCenter = (CGFloat(nextPlace) * cellWidth) + cellWidth
    }
    
    if targetCellXCenter != nil {
        targetContentOffset.memory.x = targetCellXCenter! - contentInsetX
    }
}
```
新言語KotlinでAndroidプログラミング #DroidKaigi

# なんの記事？

去る4月25日に[DroidKaigi](http://droidkaigi.github.io/)というAndroid技術カンファレンスに参加して来ました。そこで本記事と同名のタイトルで発表させていただきました。25分間という短い時間の中で、丁寧に説明できなかった箇所をフォローしたいと思います。

スライドは[こちら！](https://speakerdeck.com/ntaro/xin-yan-yu-kotlindeandroidpuroguramingu-number-droidkaigi)

# 発表の趣旨

[Kotlin](http://kotlinlang.org/)というプログラミング言語の紹介です。
Kotlinを使ったAndroidプログラミングの布教が目的です。

# KotlinはJVM言語

Kotlinで記述されたコードは、KotlinコンパイラによりJVM(Java仮想マシン)上で動作するバイトコードに変換されます。そのためKotlinコードからJavaコードを呼び出すことがわりと簡単にできます(もちろんその逆も)。具体的にはJava標準ライブラリの`Integer#parseInt`をKotlinコードから呼び出したり、Androidの`Activity`をKotlinコードで定義したクラスで継承したり、ということが可能です。
また、KotlinはAndroid上での動作もサポートしています。これは単にJVM言語と言ったときには含まない強みです。

# Kotlinは静的型付け

KotlinはJavaと同様に静的に、つまり実行前に型が解決されます。例えば文字列を整数値として扱うようなソースコードは、実行可能コードには変換されません。コンパイルタイムのエラーとなるということです。何が嬉しいのかと言うと、「文字列を整数値として扱う」のようなオブジェクトの取り扱いミスを未然に防いでくれることです。

# Kotlinの配列は不変

読み飛ばしてください(そこまで大きなトピックではないので)。

Javaの配列は共変(covariant)です。共変なのですが、危険な操作が可能です。

```java
// Java
// コンパイルは通るけどクラッシュする
Integer[] ints = {1};
Number[] nums = ints;
nums[0] = 0.5; // ここで例外
```

一方Kotlinの配列は不変(invariant)です。

```kotlin
val ints: Array<Int> = array(1)
val nums: Array<Number> = ints // ここでコンパイルエラー
```

配列を共変として扱うことももちろんできます。そして安全です。

```kotlin
val ints: Array<Int> = array(1)
val nums: Array<out Number> = ints // OK
nums[0] = 1 // ここでコンパイルエラー
```

# Kotlinのプロパティ

Kotlinのクラスはプロパティを持てます。それはJavaで言うフィールドとアクセサ(getter/setter)の合体したやつ、というとわかりやすいかも知れません。

```kotlin
// nameプロパティを持ったUserクラス
// 例示のためまわりくどい記述になっています
class User(private val name_: String) {
    val name = name_
}
```

今定義した`User`クラスをインスタンス化して`name`プロパティからユーザ名を取得してみます。

```kotlin
val taro = User("Taro")
println(taro.name) // => Taro
```

`name`というpublicなフィールドにアクセスしているように見えますが実はgetterを経由しています。
それを確かめるためにカスタムgetterを定義します。

```kotlin
class User(private val name_: String) {
    val name: String
    get() {
        println("呼ばれたぞ")
        return name_
    }
}
```

この新しいバージョンの`User`の`name`にアクセスすると「呼ばれたぞ」と出力されます。

# 関数オブジェクト

Kotlinの関数(あるいはメソッド)は、通常のオブジェクトのように変数に代入したり、関数の引数として渡したりすることができます。

簡単な関数を定義して、使ってみます。

```kotlin
fun succ(n: Int) = n + 1

succ(1) // => 2
```

次に、この関数`succ`を変数に代入して、その変数を介して関数の機能を実行します。

```kotlin
val funcObject = ::succ
funcObject.invoke(3) // => 4
```

`funcObject`がまさに関数オブジェクトです。関数を実行するには`invoke`メソッドを呼び出します。`invoke`メソッドを呼び出す代わりに本物の関数のような呼び出しも可能です。

```kotlin
funcObject(5) // => 6
```

上記の例では、関数を定義→変数に代入という流れでしたが直接関数オブジェクトを記述することもできます(関数リテラルと呼んだりします)。

```kotlin
val a = fun(n: Int) { return n + 1 }
val b = fun(n: Int) = n + 1
val c = { n: Int -> n + 1 }
```

`a`、`b`、`c`どれも同じことをしていますが、複数の書き方があるということです。
関数オブジェクトの利点は、関数を持ち回って好きな場所で関数を呼び出せることです。

# トップレベルの関数

Kotlinはクラスに属さない関数や変数を定義できます。これらはJava的にどう表現されるのか、についてですが、一言で言うと「パッケージ名Package」という名前のクラスが作られ、そのクラスのstaticメンバとなります。

```kotlin
package hoge.fuga

val piyo = "Piyopiyo"
```

この`piyo`をJavaコードから参照するには`hoge.fuga.FugaPackage.piyo`という名前を使います。

# 追記予定...？

スライドの中で質問とかあればできる限り答えたいと思います。
VyOSでIIJmioにDS-Lite接続（ひかり電話契約なし）

初投稿です。

VyOSでIIJmioからDS-Liteで接続したくて契約してみました。

# 環境
* VyOS 1.1.5
* 富士通 PRIMERGY MX130 S2（Intel NIC1枚追加）
* NTT東日本フレッツ光 ギガファミリースマートタイプ（ひかり電話契約なし）
* eth0（オンボード）はONUのUNI引っこ抜いて直結
* eth1はL2SWに接続されています

# 参考
http://misc.mat2uken.net/blog/2014/12/19/using_dslite_with_iijmio.html
http://www.mfeed.ad.jp/transix/ds-lite/contents/iij_seil.html

# コンフィグ
関係ありそうな部分のみ

```text:config
interfaces {
    bridge br0 {
        address dhcpv6
        address 192.168.0.254/24
        aging 300
        dhcpv6-options {
            parameters-only
        }
        hello-time 2
        ipv6 {
            address {
                autoconf
            }
            disable-forwarding
            dup-addr-detect-transmits 1
        }
        max-age 20
        priority 0
        stp false
    }
    ethernet eth0 {
        bridge-group {
            bridge br0
        }
        duplex auto
        hw-id xx:xx:xx:xx:xx:xx
        mtu 1500
        smp_affinity auto
        speed auto
    }
    ethernet eth1 {
        bridge-group {
            bridge br0
        }
        duplex auto
        hw-id yy:yy:yy:yy:yy:yy
        mtu 1500
        smp_affinity auto
        speed auto
    }
    loopback lo {
    }
    tunnel tun0 {
        encapsulation ipip6
        local-ip hoge
        mtu 1500
        multicast disable
        remote-ip 2404:8e00::feed:100
    }
}
protocols {
    static {
        interface-route 0.0.0.0/0 {
            next-hop-interface tun0 {
            }
        }
    }
}
service {
    dhcp-server {
        disabled false
        shared-network-name ONIGIRI {
            authoritative disable
            subnet 192.168.0.0/24 {
                default-router 192.168.0.254
                dns-server 8.8.8.8
                lease 86400
                start 192.168.0.11 {
                    stop 192.168.0.50
                }
            }
        }
    }
    dns {
        forwarding {
            cache-size 0
            listen-on eth1
        }
    }
    ssh {
        listen-address 192.168.0.254
        port 22
    }
}
```
C#でIPアドレスを数値に変換する方法

// クライアントのIPアドレスの範囲を判定したい
// しかし、.NETではIPアドレスの範囲判定のクラスがなさそう
// IPアドレスは、32bitので構成されているはず。
// bitを10進数に変換すれば、数値での範囲比較が可能となる。
// そう思い、IPアドレスを数値に変換した。
// （.NETではIPAddressクラスにAddressというプロパティがあり、数値で取得できるが、互換性のために残されているので利用できない。）
// TODO:もっと良い方法があるかもしれない。

string ipAddress = "255.255.255.255";

IPAddress ipaddress = IPAddress.Parse(ipAddress);
Byte[] bytes = ipaddress.GetAddressBytes();

// リトルエンディアン対応
Byte[] reverseBytes = bytes.Reverse().ToList().ToArray();

// ToInt64用にLength8のbyte配列を用意してコピーする
byte[] target = new byte[8];
Array.Copy(reverseBytes, target, reverseBytes.Length);

// 最大値255.255.255.255 = 4,294,967,295
uint result = BitConverter.ToInt64(target.ToArray(), 0);

Console.WriteLine(result);
Xcodeの声



私は、ビルドやテストの成功・失敗時に、Xcodeに喋らせています。

選択できる声が結構あって、どれにしようか迷ったので、全部聞いてみることにしました。


```
say -v ? |awk '{print "echo "$1"; say -v "$1" build succeeded"}'>vlist.sh
sh vlist.sh
```

結果、vickiに決定。  
　  
上記は

```
say -v ?
```

で得られるリストを整形してるだけです。

※ワンライナーで書けたらカッコ良かったorz

参考

- http://qiita.com/zakuroishikuro/items/0c17acb21f119647c205
shema.iniの作り方

C#でCSVファイル等をインポートするときに利用するschema.iniを
簡単に作れるらしいので、備忘録的な感じのメモ

１．コントロールパネル→管理ツール→ODBCデータソースを選択

２．ファイルDNS→追加→Microsoft Text Driver(*.txt; *.csv)を選択

３．データソースの新規作成はよく分からないので、適当なパスを指定しておく

４．ODBCテキストセットアップでCSVファイルのあるフォルダを指定

５．オプション→拡張子に*.csvを選んで書式の定義

６．フォルダ内のcsv,txtが表示されるので選択

７．スキャンする行数を0にしておく

８．（ヘッダタイトルがあれば）列名の見出しをチェックして推量をクリック

９．列に内容が表示されるので、１件ずつデータ型等を確認
　　※見出しがない場合は個別に設定していく必要あり

１０．OKを押して完了すると、指定したフォルダ内にschema.iniが生成されている
RubyMine 7.1が古いJavaのせいで起動しなかった

- RubyMineを7.0.4から7.1にした所、新たにライセンス認証を要求されたので、認証情報を入力した。しかし、モーダルウィンドウが開いて

> s.cidr.execution.deviceSupport - null

と言われて認証できなかった。

- 別ユーザで起動してみるとうまく動いたので、自分の環境のせいだった。
- ~/Library/Preferences/RubyMine70などを消去したり色々しても動かなかった。
- ActivityMoniror.appで開いているファイルを見ると、~/Library/Java/Extensions/*.jarを開いていたので、怪しいと思ってタイムスタンプを見ると、2003年や2005年というものだったので、このディレクトリを見えないようにした所、うまく動いた。

### 教訓
- 昔から引き継いでいる環境には注意せよ。
- ActivityMonitorは使える。特にどのファイルを開いているか、は重要な情報である。
git > commit message > [Uncomment] commented line

https://github.com/limetext/lime/commit/7eb4511afb7a55bcff27360aa045dc42d7f2cf77
を見ていてふと「コメントしていた部分をコメントでないようにするのを何っていったっけ？」と思った。

「アンコメント」だった。
http://www.wdic.org/w/TECH/%E3%82%A2%E3%83%B3%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88

gitのcommit messageで書くとしたら
```
Uncomment commented line.
```
といった感じか。
マークダウン中にコメント行を入れる

マークダウン中にコメントを入れるには HTML コメントと同じ `<!-- -->` が使えます（前後に空行が必要）。

↓↓↓↓↓↓↓↓

<!-- this is a comment. -->

↑↑↑↑↑↑↑↑

実は上の矢印の間には

```
<!-- this is a comment. -->
```

というテキストが書かれていましたが、投稿すると見えなくなりました。
(Marked.js では HTML ソースに残りましたが、 Qiita ではソースからも消えてしまうようです。セキュリティのため？)

HTML 変換される段階でコメント行扱いになるため見えなくなるわけです。

下記リンクによると、通常の HTML コメントと区別するためにダッシュを３つ付けた
[Stack Overflow: Store Comments in Markdown](http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)

```
<!---
  コメント
-->
```

という書き方も推奨されているようです。
PanDoc に変換するときに良いのだとか。

自作ソフトで他のマークダウンと互換性のある（というか無視される）独自タグを作りたい時にコメント行が使えるかもしれないと思って調べてみました。
ウェブサイトでプッシュ通知を行うサービス「bpush」で使っている技術

昨日リリースした[bpush](https://bpush.net/)ですが、はてブのホットエントリーに入るなど、思いのほか多くの反響をいただくことができました。ありがとうございました。

[ウェブにプッシュ通知をもたらすウェブサービス「bpush」を作った](http://qiita.com/devneko/items/f50eb4d30edea83305f6)

本記事では、bpushで使用しているライブラリやAPI、それを採用した経緯などについて紹介したいと思います。
個々の技術については既に良質な記事が存在するので、詳しくは説明しません。ざっくり全体についての紹介となります。
他人のサービスが使っているライブラリとかツールとか知るのって楽しいですよね。私は楽しいです。

##Service WorkerとPush API
bpushを実現している中核となる技術が[Service Worker]([http://www.w3.org/TR/service-workers/])と[Push API](https://w3c.github.io/push-api/)です。
Service Workerはバックグラウンドで動作するJavaScriptで、ウェブページを開いていなくても動作することができます。
Push APIはその名の通り、プッシュ通知の登録や解除といったことを行うためのAPI群です。
これらは組み合わせて使うことができるように作られており、Chrome42でこれらの主要な部分が実装されたことからbpushというサービスを実現することができました。
Service WorkerはService WorkerのJavaScriptが配置されたパスに紐付きます。この仕様により、bpushでは各サイトごとのService Workerを個別に管理するといったことを実現しています。

##フロントエンド: Materialize
フロントエンドはマテリアルデザインを実現するMaterializeというCSSフレームワークを使用しています。
私はDartのファンなので、最初はDart+Polymerで実現しようと考えました。しかし、新しいAPI(Serice Worker/Push API)を使うため、結局JavaScriptを使う必要があることや、今回のウェブサービスがシングルページアプリケーションとして作成するメリットが少ないことから、この組み合わせは諦めました。
マテリアルデザインは使ってみたいと思っていたため、次はJavaScript+Polymerの組み合わせでいこうと考えました。（マテリアルデザインに固執していたわけではないですが、Bootstrapに飽きてきたので別の何かを探していました。）
少し作りはじめてみると、Polymerはシングルページアプリケーションではないウェブアプリケーションには向かないことに気づきました。入力用のコンポーネントがinput要素ではないため、フォームで内容を送信できないのです。ボタンですらsubmitにできないのでJavaScriptでsubmitする必要がありました。面倒になった私はこの組合せも諦めました。

そして、マテリアルデザインを実現できる方法が他にないか調べていると、MaterializeというCSSフレームワークを見つけました。
他にMaterial UIというものがあり、これも非常に便利そうでしたが、Reactを前提としたフレームワークのようだったので、私にReactの経験がないことから、今回はMaterializeを採用することにしました。
私はCSSフレームワークとしてはBootstrapしか使ったことがありませんが、Materializeは非常に使いやすく感じました。グリッドシステムはBootstrapを使ったことがあればほとんど同じように使えますし、背景色やテキスト色を指定するCSSクラス群があるため、色の指定などに時間を取られずに済みました。
当然マテリアルデザインなコンポーネント群やエフェクトを備えているので簡単にそれなりな見栄えを実現することができました。

##バックエンド: Nginx,Apache,PHP,Silex,MySQL,Redis
ミドルウェアはNginx+Apacheです。アプリケーションにはSilexというPHPのフレームワークを使用しています。SilexはいわゆるSinatra風のマイクロフレームワークで、Symfonyのコンポーネントを使うことができます。個人の開発では同じくSinatra風のSlim Frameworkを使用することが多いのですが、本業でSilexを使っており、bpushの開発で似ている別のフレームワークを使うことによって、諸々混同してつまらないミスを連発してしまうことを危惧し、Silexを採用することにしました。
データベースにはMySQLとRedisを採用しています。本業の開発でRedisを使うようになってからというもの私はRedisの大ファンになってしまい、使うかわからなくともとりあえずRedisは組み込んでしまいます。あれができない。。。あ、Redisでできるじゃん！ということが何度もあったのです。Redis最高です。Memcachedのような使い方もできますし、PubSubやブロッキングキューによるメッセージング、組み込み型を使った計算などができます。便利です。愛しているといっても過言ではありません。

##クラウド: Google GCM, AWS SNS, AWS S3, AWS SES
クラウドサービスも使っています。まずプッシュ通知を実現するのにGCMは必須となります。GCMは直接扱わず、将来、より多くの送信方法を実現できるように、AWS SNSを使っています。SNSであればGCMやEメール、APNSなどを同じ仕組みで管理できます。登録時のメール送信ではAWS SESを使っています。SMTPサーバーを運用する必要がなくなりますし、そもそも借りているサーバーのSMTPに問題があったために採用しました。
また、バックアップにはS3を使用しています。昔作ったサービスで、ディスク障害によりデータを失うという苦い経験があるため、ちゃんとバックアップはしています。バックアップはしたいですが、ローカルマシンなんて信用できないし、別のサーバーを借りるのはお金がかかります。ストレージサービスを使うことで信頼性を高めつつ費用を抑えています。
gitWatch > 3D (STLファイル)を表示できるのか。すごい。 | 2018-05-19: GitHubのUI変更後

https://github.com/underverk/3D_Printer/commit/200d91dc99e8100cbd01e8ba5b51e7ec41fcd2a9

上記のページを開いたら3Dの表示がされるようになっている。しかも、ぐりぐり動かせる。

.stlというファイル形式のようだ。

Wireframe | Surface Angle | Solid
の表示が切り替えられる。

自分は3Dを扱わないが、こういう描画機能もあるというのはすごいと思う。

プライベートリポジトリを使ってデザイナ間で3D形状を共有するのに使えそう。

(追記 2018/03/03)
画像をクリックすると回転が止まるが、しばらく待つとまた回転するようになる。

### UIの変更
(2018/05/19)

GitHubのUIが変わったためか、複数ファイル同時表示(自動回転)がなくなった。

Viewをクリックすると3D表示はできる。
クリック先では自動回転する。
Laravel5インストール直後のcomposer updateでエラー。

~~~
% composer update
~~~

~~~
% php artisan clear-compiled
~~~

~~~
% php artisan optimize
~~~

上記コマンドで以下のエラーが出る場合、vendor/compiled.phpを削除すると直るみたいです。

~~~
Script php artisan clear-compiled handling the post-update-cmd event returned with an error


                                                                                                                                                     
  [RuntimeException]                                                                                                                                 
  Error Output: PHP Fatal error:  Call to undefined method Illuminate\Foundation\Application::getCachedCompilePath() in /Users/tetsuya/Code/beforea  
  fters/vendor/laravel/framework/src/Illuminate/Foundation/Console/ClearCompiledCommand.php on line 28 
~~~

~~~
PHP Fatal error:  Call to undefined method Illuminate\Foundation\Application::getCachedCompilePath() in /Users/tetsuya/Code/beforeafters/vendor/laravel/framework/src/Illuminate/Foundation/Console/ClearCompiledCommand.php on line 28


                                                                                      
  [Symfony\Component\Debug\Exception\FatalErrorException]                             
  Call to undefined method Illuminate\Foundation\Application::getCachedCompilePath()  

~~~




http://laravel.io/forum/03-24-2015-call-to-undefined-method-illuminatefoundationapplicationgetcachedcompilepath
Swiftでプロパティの値の範囲を制限したいんだけど


結論から先に。

```Swift
struct TBNTempo {
  private static let MIN_BPM:Int = 40
  private static let MAX_BPM:Int = 360
  private static func check(b:Int) -> Int {
    return min(max(b, MIN_BPM), MAX_BPM)
  }
  var bpm:Int { // beats per minute
    didSet {
      bpm = TBNTempo.check(bpm)
    }
  }
  init(bpm b:Int) {
    bpm = TBNTempo.check(b)
  }
}
```

~~外部に使わせるプロパティとは別にプロパティを持たないとダメだった。
なんか負けた感じがする。~~

didSetでいけました。
@tottokotkd さんご指摘ありがとうございます。


以下、他に試したパターン

## setter無限ループでNGだったパターン

```Swift
struct TBNTempo {
  let MIN_BPM:Int = 40
  let MAX_BPM:Int = 360
  var bpm:Int { // beats per minute
    get { return bpm }
    set {
      switch newValue {
      case MIN_BPM...MAX_BPM:
        bpm = newValue // ここでsetter無限ループが起きるのでBAD_ACCESSで落ちる
      default:
        bpm = min(max(newValue, MIN_BPM), MAX_BPM) // ここでsetter無限ループが起きるのでBAD_ACCESSで落ちる
      }
    }
  }
  init(bpm b:Int) {
    bpm = b
  }
}
```
gitWatch > if文で{を使わない書き方の人はまだいるようだ

https://github.com/neovim/neovim/commit/87b4093970c90fd36ff6a2ccb6e9bb7817f44d08
の変更で
> Introduction of asserts broke bracketless if's.
とあり、

```変更前.c
-   if (c != NULL) 
      assert(c >= 0 && c <= UCHAR_MAX);
      ptr[curwin->w_cursor.col] = (char_u)c;
- } else
```

```変更後.c
+   if (c != NULL) {
      assert(c >= 0 && c <= UCHAR_MAX);
      ptr[curwin->w_cursor.col] = (char_u)c;
+   }
+ } else {
```
と修正されていた。

そもそもがif文を単文形式で書いているのが間違いの元だと思う。
assert()を追加した時だけ複文形式にするのでなく、ifを使う時は{をつけておくのがいくつかのコーディング規約でも書かれている。

最近の大きなバグ（名前忘れた）でも同じ間違いによりfalse/true反対の戻り値になっていたのがあったし、昔のバグから学ばないといけないと思う。