OmniAICreator/Qiita-1.07M huggingface dataset:
RESTfm で Read してみよう その1

# RESTfm で Read する
いよいよ RESTfm を実際に使っていきます。まずは CRUD の基本である Read を行います。使用するメソッドはもちろん`GET`で、Webブラウザ で簡単に試すことができます。このメソッドを用いる限りデータベースのデータがいじられるということはないので、気軽に試してみてください[^1]。

# 基礎となる URI
今後の説明を分かりやすくするために、RESTfm を以下の場所に配置したと仮定します。

**http\://hogehoge/RESTfm/**

# 取得するフォーマットは HTML
これまた分かりやすさを重視して、返ってくるフォーマットとしては HTML を選択します。別のフォーマットを選択したい場合は以前の記事に書いた内容を参照してください。

# まずはルートフォルダ
前置きが長くなりましたがさっそくアクセスです。Webブラウザ で以下の URI にアクセスしましょう。

http\://hogehoge/RESTfm/

データベース一覧と、そこへのリンクが表示されたはずです。おめでとうございます！ RESTfm の API が叩けました。返り値のフォーマットが HTML なのでどうしても単なる Webページ や Webアプリケーション に見えてしまいますが、HTML というフォーマットに則った返り値であるとみることができます。

このアドレスへのアクセスは、FileMaker Server で言えば、データベース名選択画面にアクセスしたことと同じです。

# データベースへのアクセス
次に個々のデータベースの API を叩きます。対象のデータベース名を`Member`とした場合には URI は以下のようになります。アクセスしてみましょう。

http\://hogehoge/RESTfm/Member

デフォルトのフォーマットは HTML ですので、HTML の形式（Webブラウザで見て違和感ない形式）で内容が表示されたのではないでしょうか。リンクとして`layout`や`scripts`という名称を見ることができますね。だいたい予想はつくと思います。

# データベースのレイアウトへのアクセス
さらに掘っていって、データベース内のレイアウトの API を叩きましょう。対象のデータベース名が`Member`、レイアウト名が`categories`と仮定します。この場合、以下の URI を叩けば OK です。当該レイアウト内のレコードが並んでいるのが見えると思います。

http\://hogehoge/RESTfm/Member/layout/categories

なお、レイアウト一覧を表示させたい場合は以下の URI を叩きます。

http\://hogehoge/RESTfm/Member/layout

# レコードへのアクセス（レコードIDを指定する）
さらにさらに掘っていって、レコード単体の API を叩きましょう。対象のデータベース名が`Member`、レイアウト名が`categories`、レコードIDが`12345`の場合、以下の URI を叩きます。

http\://hogehoge/RESTfm/Member/layout/categories/12345

なお、「レコードID」を知るためには別途取得の必要がありますが、その方法についてはここでは省略します。

# レコードへのアクセス（フィールドの一意の値を指定する）
「レコードID」を指定する方法は見通しが悪いので、フィールド名の値を利用してレコードの API を叩く方法を示しましょう。こちらの方が使い勝手が良いでしょう。

対象のデータベース名が`Member`、レイアウト名が`categories`とし、`categories`の中に`category_id`というフィールドがあると仮定します。この`category_id`が`123`というレコードの API を叩くためには、以下の URI にアクセスします。

http\://hogehoge/RESTfm/Member/layout/categories/category_id%3D%3D%3D123

すなわち、レイアウトを指定した次の階層に、**フィールド名=検索条件**と指定すればよいのです。ここでの「検索条件」の指定方法は FileMaker の検索書式と同一です。

上記例では「検索条件」を「==123」と指定しています。もともとの URI 指定の書式に含まれる「=」と合わせると 3 つの「=」が並ぶことになります。そして **URI では記号や日本語はエンコードする必要があります**ので[^2]、「=」という記号を「%3D」とエンコードし、それを 3 つ連ねた、というわけです。エンコード前の状態は「category_id===123」ということです。

この方法で API を叩く際には一点注意することがあります。それは、**レコードが一意に定まる検索条件を指定する**ということです。検索の結果、複数のレコードがヒットしてしまった場合はエラーが返ってきます。

# 他にも Read（GETメソッド）の API はあります
あまりに一気に説明しても消化しきれないと思うので、この記事ではここまでにします。記事タイトルに「その1」とありますように、「その2」まで書きますので残りはそちらに譲りたいと思います。

[^1]: メソッドのオーバーライドという例外がありますが、そのような例外的な場合はその旨を明示します
[^2]: もっとも、最近の Webブラウザ は賢いので、自動で内部的にエンコードしてくれるものが多いです
Fess AD連携してログイン

Fess 10.3 (Mac OS)
WindowsServer2012 (VirtualBox)

WindowsServer2012のActiveDirectoryユーザーでMacのFessにログインしてみます。

# ADの設定
・Windows
[サーバーマネージャー]
1. ADアクセス用のユーザーを設定
2. ドメインを確認 (例：addomain.local)

・Mac
[ターミナル]
ldapsearchコマンドの結果が返ってくることを確認します。

```shell-session
$ ldapsearch -x -D "cn=[ADアクセス用ユーザー名],cn=users,dc=addomain,dc=local"
 -W -h [ホスト名orIPアドレス] -b "cn=users,dc=addomain,dc=local" 
"(objectclass=*)" "sAMAccountName=username"
```

# Fessの設定
管理>システム>全般> LDAP

| 項目         |       設定値 |
|:-------------|:------------------|
| LDAP URL     | ldap://[ADサーバーのURL or IPアドレス] |
| Base DN      | dc=addomain,dc=local |
| Bind DN      | ADアクセス用ユーザー名@addomain.local |
| パスワード      | ADアクセス用ユーザーのパスワード |
| User DN      | `%s@addomain.local` |
| アカウントフィルタ | (&(objectClass=user)(sAMAccountName=%s)) |
| memberOf属性  | memberOf |

※ Windows 2000以前のActiveDirectoryを利用する場合
　User DNは `短縮ドメイン\%s`を設定します。

更新ボタンをクリック
ADのユーザーでFessにログインすることができるようになります。
Amazon AI pollyを使ってみた

# この記事について

この記事は [ACCESS Advent Calendar 2016](http://qiita.com/advent-calendar/2016/access) 18日目の記事です。
ACCESS の @shotasakamoto です。

# この記事の主題は？

最近、機械学習とか勉強するモチベーションが上がってきて、CRFやword2vecとかについて記載しようと思いましたが、12月に発表された[Amazon AI](https://aws.amazon.com/jp/amazon-ai/)についてちょっと興味があったので、前述した内容について少し触れていきたいと思います。

# Amazon AIの種類

以下の3つになります。
* [Amazon Recognition](https://aws.amazon.com/jp/rekognition/)
* [Amazon Polly](https://aws.amazon.com/jp/polly/)
* [Amazon Lex](https://aws.amazon.com/jp/lex/)

画像認識よりも言語解析・処理とかに興味がある方なので、
LexかPollyを見ようかと思ってましたが、Lexはまだプレビュー版的な位置づけだったので、
Pollyで遊んでみました。

# Amazon Pollyとは？

簡単に言うと、「入力した各種言語テキストを音声に変換する」機能となります。

# 開発ドキュメントは無いの？

もちろんあります。
以下を参照してください。（このドキュメント読んだら、この記事の内容は全部入ってますね・・涙）
[開発ドキュメント](https://aws.amazon.com/jp/documentation/polly/)

# どうやって使うの？

すごく簡単です。（カップラーメン作っている間に出来そうです）
* AWSのアカウント作る
* AWS コンソールにログインする（ただし、東京リージョンだとまだサービスが無いので、米国東部とかリージョンを変更する必要がある）
* サービスで[Polly]を検索して、pollyのページに移動
* テキスト入力欄に適当にテキストを入れて、「音声を聴く」ボタンを押す

こんな感じで、サクッと遊べます。

以下のような画面が表示されます。
※日本語だと、現時点ではまだ女性（ミズキさん？）のみの音声となります。
英語だと数種類の音声パターンがありました。

<img width="1430" alt="スクリーンショット 2016-12-17 15.18.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/37514/7c277538-a574-648c-96d8-6f45f8c85b0d.png">

# 読み方の設定とかは出来ないの？

可能です。
具体的には、下記が挙げられます。
* SSML（音声合成マークアップ言語）を設定
* レキシコンの設定

SSMLの例は以下です。（下記は「SSML」という単語を強調して読ませるようにしています）
※他には指定した箇所を英語で読んだり、読み上げ速度を変えたりなど、設定が結構変更可能だったりします。

```xml
<speak xml:lang="en-JP">これは<emphasis level="strong">SSML</emphasis>の例です。</speak>
```

レキシコンでは、「指定した単語の読み上げ方を変更する」ことが可能です。
書き方の例は下記です。
※下記は言語設定をen-US（英語）に設定しています。
なぜか日本語（JP）はまだ設定出来ないような感じがしますね・・。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<lexicon version="1.0"
 xmlns="http://www.w3.org/2005/01/pronunciation-lexicon"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.w3.org/2005/01/pronunciation-lexicon
 http://www.w3.org/TR/2007/CR-pronunciation-lexicon-20071212/pls.xsd"
 alphabet="ipa"
 xml:lang="en-US">
 <lexeme>
 <grapheme>www</grapheme>
 <alias>world wide web</alias>
 </lexeme>
</lexicon>
```

上記の例だと、「www」という単語を「world wide web」に読み替える設定となります。
レキシコンはxxx.plsという名前で保存して、コンソールからアップロードが可能です。

# 自分の作ったアプリからは何か遊べないの？

遊べます。

pollyの機能の呼び出しもかなり簡単で、
例えばpythonだと以下のような感じでよみだしが可能です。
※公式ドキュメントのサンプルを下記に記載しています。（p10参照）

```py3
session = Session(profile_name="adminuser")
polly = session.client("polly")
try:
 # Request speech synthesis
 response = polly.synthesize_speech(Text="Hello world!",
 OutputFormat="mp3",
 VoiceId="Joanna")
except (BotoCoreError, ClientError) as error:
 ...
```

responseにmp3での音声データが入ってくるので、
このデータをファイルに保存したり、再生したりすることが可能です。

# 最後に

駆け足でしたが、ざっくりpollyについての概要を記載しました。
試しに遊んでみるのはすぐ出来ると思いますので、ご興味お持ちの方は、ぜひぜひ遊んでみて頂ければと思います。

明日（12/19） の [ACCESS Advent Calendar 2016](http://qiita.com/advent-calendar/2016/access) は @DaisukeKondo  さんの記事となります。お楽しみに！！
新しく生まれ変わった Twilio Video に迫る

先月、 [Twilio Video](http://twilio.kddi-web.com/function/video/) がリニューアルされました。

## リニューアルの内容
具体的にどんなリニューアルなのかというと、今までは「人と人とが会話をする」という設計になっており、「ユーザーAがユーザーBに会話を招待し、Bが受け取った場合に会話が始まる」というような作りになっていました。その会話にさらに人を増やす場合には、AかBが招待をまた別の人に送って・・という流れです。
この設計は、ややイケてないものでした。招待するAとされるBとで同じユーザーなのに別としてそれぞれの役割を持ってしまっているからです。

新しく生まれ変わった Twilio Video では、新しく [Room](https://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta2/docs/Room.html) という概念が生まれました。ユーザーは、指定の Room に [Client](https://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta2/docs/Client.html#connect__anchor) を通して入退室することで、会話を開始/終了することができます。この方が私はユーザーの役割がシンプルになって好みです。しかしながら、以前のバージョンにあった招待の機能が廃止されているため、部屋の選択などを工夫してAとBが会話を始められるような仕組みを自分で作る必要が出てきています。

以前の Twilio Video と同じように招待の仕組みを作りたければ、 Twilio Sync などの別の Twilio サービスを組み合わせることで実現できます。このように Twilio は最近、それぞれの役割をしっかりと分けることを意識しているように思います。必要な時に必要な Twilio のサービスを使うという判断ができるようになるため、良い傾向だと考えています。

Twilio は [Kurento](http://www.kurento.org/) という WebRTC テクノロジー企業を買収しています。これにより、今後はより多くの人との会話や、ストリーミング配信といったことも Twilio Video でできるようになるかもしれません。そんな今後の期待高まる Twilio Video を触ってみましょう！

## Twilio Video を触ってみよう

さて、Twilio Video が最新すぎる影響で、まだ[ドキュメント](https://jp.twilio.com/docs/api/video/getting-started)の日本語訳が追いついていない模様です。そのうち日本語化されるのを待つか、英語で読み進めていきましょう。

基本的なトークンの生成などは以前と全く変わりがありません。

[以前の Twilio Video ハンズオン資料](http://qiita.com/kimihom/items/d3d7c6846e929c7efbdb)が役立つと思います。それよりも Twilio ドキュメントを英語で読む方がさらに役立つと思います。

何が変わったのかというと、トークン生成して Client を初期化した後です。

``` javascript
client.connect({
  to: 'my-room',
  localMedia: localMedia
}).then(room => {
  console.log('Connected to the Room "%s"', room.name);
}, error => {
  console.error('Failed to connect to the Room', error);
});
```

client に `connect` メソッドが追加され、client は Room に接続しに行きます。接続に成功したら、 `room` オブジェクトが帰ってきて、無事に Room へ入室できたことになります。

この `room` オブジェクトで発生したイベントを、諸々定義できます。

``` javascript

function _addVideo (participant) {
  participant.media.attach('#video-view');
}

room.participants.forEach(participant => {
  console.log('Participant "%s" is connected to the Room', participant.identity);
  _addVideo(participant);
});

// Log new Participants as they connect to the Room
room.once('participantConnected', participant => {
  console.log('Participant "%s" has connected to the Room', participant.identity);
  _addVideo(participant);
});

// Log Participants as they disconnect from the Room
room.once('participantDisconnected', participant => {
  console.log('Participant "%s" has disconnected from Room', participant.identity);
});
```

この時に、いろいろと UI を適切に変えてあげるだけです。簡単ですね ;)

`attach` されるのは、HTML5 の Video 要素です。Video 要素は、JavaScript を通していろいろと操作することが可能です。また、 Audio 要素と分けることも可能で、JavaScript で音声をいじれる Web Audio API などと組み合わせると、面白い Video 通話ができるようになりそうですね。

より洗練された設計になった Twilio Video をぜひ試してみてください。
Swiftについての覚書5

#UIWindowについて
UIwindowを表示するサンプルを書いていきたいと思います。

「windowOpen」をタップすると
<img width="432" alt="スクリーンショット 2016-12-09 23.43.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/150621/fe34a5c9-df04-48ee-6438-8046cde92016.png">

こんな感じに別Windowが開きます
<img width="432" alt="スクリーンショット 2016-12-09 23.46.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/150621/0929707b-33ed-2878-8ada-e732afdd852d.png">

##実装
##windowOpenタップ時に呼ばれるメソッドを作成
まずは「windowOpen」をタップした時にopenWindow()を呼び出します。
このメソッドにUIWindowを作成する処理を書いていきます。

```
    @IBAction func touchOpenWondow(sender: AnyObject) {
        openWindow()
    }
```

##必要な部品を宣言

```
// window
var testWindow: UIWindow!
// windowのメッセージ
var message: UITextView!
// windowのOKボタン
var okButton: UIButton!
// windowのキャンセルボタン
var cancelButton: UIButton!
// windowの背景イメージ
var touchImageView: UIImageView!
```

###openWindow()の作成
##初期化

        testWindow = UIWindow()
        message = UITextView()
        okButton = UIButton()
        cancelButton = UIButton()

##背景に画像と背景色を設定

        // 黒猫の画像
        if let image = UIImage(named: "kuroneko.gif") {
            testWindow.layer.contents = image.CGImage
        }
        // 背景色は白
        testWindow.backgroundColor = UIColor.whiteColor()

##windowの大きさと表示位置を設定
        
        // 横幅200、縦250のwindowを作成
        testWindow.frame = CGRectMake(0, 0, 200, 250)
        // 中央に表示
        testWindow.layer.position = CGPointMake(self.view.frame.width/2, self.view.frame.height/2)

##枠線を設定

        // 角をま〜るい感じに
        testWindow.layer.cornerRadius = 20
        // 枠線は爽やかな青色
        testWindow.layer.borderColor = UIColor(red: 80/255, green: 184/255, blue: 255/255, alpha: 1.0).CGColor
        // ちょっと太めに設定
        testWindow.layer.borderWidth = 3.0
 
##windowを表示

        testWindow.makeKeyWindow()
        testWindow.makeKeyAndVisible()

今日はここまで。
次回はボタンの作成からです。
Nagiosの動作状況をZabbixでモニタリング

#はじめに
こんにちわ。sewataです。
Zabbix Advent Calendar 2016の18日目です。
昨年に続き2回目の参加となります。よろしくお願い致します。

早いもので今年も終わりが近づいてまいりました。
今回はzabbix conference japan 2016の懇親会LTにてお話させていただいたネタを書こうと思います。
Zabbix Advent CalendarなのにNagiosの話？と引かないでください。
みなさまが大好きな監視の監視の話でございます。

#概要
nagiostatsで得られるNagiosサーバ自体の統計情報をZabbixへ送る、
そのシェルスクリプトとZabbixテンプレートを作成し、公開しました。

#環境
CentOS6.8
Nagios3.5.1
Zabbix2.4

#本文
##ちゃんと監視できているのか
具体的には
- 死活：監視プロセスが停止していないか
- パフォーマンス：監視実行はスケジュール通り行われているか（5分間隔なら5分毎に本当に監視しているか）
- キャパシティ：あとどのくらい監視対象を登録できるのか（増設のタイミングはいつ頃になるか）
など、他にも考えるべきことがたくさんあると思います。

##監視の監視が必要
監視サーバローカルで、その監視サーバの機能で自身の状態を監視していたとしても
その監視サーバがおかしくなったら異常を誰も検知できないですよね。
（ややこしい）
監視サーバが色々ある場合、その監視サーバ同士で監視させることも多いと思います。
その監視で得られるデータをZabbixへ溜めておきたいと思いました。

Nagiosは内部処理の統計情報をnagiostatsというコマンドで取得できます。
取得できたデータをrrdtoolへ送るようなものは既存ツールがいくつかあるのですが、
Zabbixへ送るようなものは見つかりませんでした。

今回、その処理をするものを作成しました。
また、いつもZabbix Shareにはお世話になっているので、恩返しの気持ちでShareさせていただきました。

##処理概要
1. アイテム`get nagiostats`が指定間隔ごとに該当スクリプトをNagiosサーバにて実行
2. スクリプト内、`nagiostats`コマンドで統計情報を取得し、それぞれのアイテムへzabbix_senderで送る

※スクリプト実行失敗時の検知手段について
　該当スクリプトは失敗時には0以外を返すので、
　`get nagiostats`の戻り値が0でなかったらPROBLEMとする判定のトリガーを入れています。

##設定手順
1. NagiosサーバにZabbix Agentをインストール
2. Zabbix Agentの設定パラメータであるUserParameterに以下行を登録
   `UserParameter=get.nagiostats,/etc/zabbix/scripts/get-nagiostats.sh`
3. Zabbix Agentをリスタートして設定内容を反映
4. Nagiosサーバに値を取得するスクリプト`get-nagiostas.sh`を設置
5. zabbixユーザにスクリプト実行権を与える（nagiostatsコマンドの実行権も必要。nagiosグループにzabbixユーザを入れるのが簡単かと）
6. ZabbixUIにてテンプレートをZabbixサーバへインポート
7. ZabbixUIにてNagiosサーバをZabbixにホスト登録
8. ZabbixUIにてそのホストを本テンプレートを割り当て

#まとめ
監視の監視も大事ですよね。今回はその実装のひとつをShareさせていただきました。

ありがとうございました。

#リンク
- LT資料
https://speakerdeck.com/sewata/nagiosfalsedong-zuo-zhuang-kuang-wozabbixdemonitaringu

- Zabbix Share
https://share.zabbix.com/cat-app/monitoring-system/get-nagiostats

- GitHub
https://github.com/sewata/getnagiostats
雑にURL監視する「zatsu_monitor」

雑なURL監視ツールです
https://github.com/sue445/zatsu_monitor

# 作った経緯
社内外で公開している個人アプリをURL監視したかっただけです。（Mackerelだと社内アプリ [^intra] が監視できないので使えなかった）

[^intra]: 社内イントラからしかアクセスできないアプリ

# インストール方法
https://github.com/sue445/zatsu_monitor/releases からバイナリをダウンロードして雑にどっかに置いてください。

# 使い方
雑にyamlを書いて

```yaml:config.yml
# zatsu_monitor.yml
google:
  type: slack
  check_url: "https://www.google.com/"
  api_token: "AAAAAAAA"
  channel: "#general"
  user_name: "zatsu_monitor"
github:
  type: chatwork
  check_url: "https://github.com/"
  api_token: "AAAAAAAA"
  room_id: "111111"
```

雑に実行

```sh
/path/to/zatsu_monitor -config /path/to/zatsu_monitor.yml -data /path/to/data_dir
```

* `-config` : 設定ファイルの場所
* `-data` : 直前のhttpステータスを保存するキャッシュディレクトリ

# ステータスが変わった時だけ投稿
![slack.png](https://qiita-image-store.s3.amazonaws.com/0/8059/e2a2c6ca-12ad-4c0c-73b4-495f7c374d48.png)


# 仕様
* golang製なのでバイナリをダウンロードして雑に置けばどこでも動く
  * https://github.com/sue445/zatsu_monitor/releases
  * 余計なミドル不要
  * crontabやJenkinsで定期実行する想定
* urlをHTTP GETしてステータスコードが変わった時だけチャットに通知（例：200 -> 500）
* SlackとChatWorkに対応
  * 他のが欲しい場合はPRカモン

# 特徴
## yamlなので値を継承できるのが嬉しい
トークンなどを1ヶ所に定義して、監視したいサイトで継承することができます

```yaml:config.yml
slack: &common
  type: slack
  channel: "#general"
  api_token: "xoxp-0000000000-0000000000-0000000000-000000"

github:
  # inherit common values
  <<: *common

  # override common values
  check_url: "https://github.com/"
  chennel: "#github"

google:
  <<: *common
  check_url: "https://www.google.com/"
  chennel: "#google"
```

## ステータスコードの100の位の変化だけチェックしたい
v0.2.0の新機能です。

会社で使ってるとあるサービスが、エラーの時にステータスコード502と503と504をランダムで返すという現象が頻繁に発生し、その度にチャットに通知がいくのがうざいのでステータスコードの100の位のみチェックするための機能を作りました。

使いたい時は `config.yml` に `check_only_top_of_status_code: true` を設定してください

```yaml:config.yml
some:
  check_only_top_of_status_code: true
```


# 思い出
ISUCONの予選の時に自分のチームのアプリを監視するのに便利でした
Crystalドキュメント翻訳懺悔の部屋「進捗ダメです」

この記事は [Crystal Advent Calendar 2016](http://qiita.com/advent-calendar/2016/crystal) の18日目の投稿です。

去年の Crystal Advent Calendar で以下の記事を書きました。

[ある OSS ドキュメント翻訳事例 「Crystal のドキュメントを翻訳した」](http://qiita.com/5t111111/items/d1e40b907e5e58e4c71d)

このように結構意欲的な構成で翻訳作業を行なっていたのですが、すみません！それから全然進捗していません！！！

…という内容の記事を書こうとしていました。

が、先日開催された[「東京 Crystal 勉強会 #4 in 渋谷」](https://crystal.connpass.com/event/44820/)の LT のネタとしてすべてその内容を話してしまいました…

https://speakerdeck.com/5t111111/dokiyumentofan-yi-chan-hui-falselt-jin-bu-damedesu

別の内容にすることも考えたのですが、[日本語のドキュメント](http://ja.crystal-lang.org/docs/)を読んでくださる方に「すみません、それ古いので、できれば[本家のオリジナルのドキュメントを](https://crystal-lang.org/docs/)参照してください :bow:」と伝えたいということがあったので、そのままスライドを貼り付ける感じですが予定通りこれで行きます。

スライド内にもあるように、かなりゆっくりですが未翻訳部分の作業も進めてはいますので、v1.0.0 がリリースされる日には用意したいです！！！

ちなみに、スライドの最後に、私が翻訳したものと賢くなった Google 翻訳の内容を並べています。どっちがどっちがわかるでしょうか。
【slack】メッセージをタスク化するSlack botを使ってみた

## 概要
Advent calendar 18日目。
普段からslack監視が大好きな若者です。
今日は、普段業務中にコミュニケーションツールとして使っている
slackのBotについてお話します。

## はじめに
### 組織内での課題
* 組織内全員分の納期(アンケート回答・提出締め切りのレポート等)を管理しづらい

ある日、課長から
「全員の納期とか、提出状況とか一括して管理するのが、難しいんだよね。」
とお達しがありました。
(うちの組織は12人いて、毎月人事からのアンケートや、
定期的に調査用レポート等がそれぞれに課せられます)

これまでは、slackで「○○終わりました！」と課長にメンション付きで
報告をしていたのですが、様々なタスクがあり、大人数ともなると管理に苦戦するようで。

そこで、タスクと、提出状況を一括して確認できる
仕組みがあったら、皆幸せになれるのではないか、と思うようになりました。

### 目的
* 各個人の納期の提出状況を一括して確認できるようにしたい
* 誰がどの課題を未提出なのかを、一括で確認したい

### ツールの選定
ツールの選定条件は以下の通り

* 普段から目を通すもの
* タスクの追加・タスクの完了を容易にしたい(他のブラウザを使いたくない)
* タスクの追加・確認の際に別のアプリ・ブラウザ等を起動しなくてもよいこと
    * torelloとの連携はどちらにせよtorelloを  
    ブラウザで操作しなければならないため、却下
* 無料 であること

## 選んだツール
* slack
* must-read

### must-readとは
* メッセージをタスク化してくれるslackbot
* メンションを付けて、タスク名と、そのタスクを遂行する人のユーザ名を入れるだけでタスクが振られる  
https://bita.jp/dml/slackbot_must-read

## やり方
### タスクの追加
* `@must-read タスク名 @username `  
で追加できます。  
例:) @must-read クリスマスの予定を作る @t-ishimaru
![スクリーンショット 2016-12-17 22.37.55.png](https://qiita-image-store.s3.amazonaws.com/0/146512/f5b02c63-f771-8dbe-e1c6-6399ce3d9233.png)
 
### タスク完了時
* 自分が振られているタスクを確認
    * `@must-read feed`

* 完了にしたいタスクを振られたところに移動
    * 完了にしたいタスクをクリック(リンクになっていて、タスクが振られた時点のところに飛べる) 
![タスク.png](https://qiita-image-store.s3.amazonaws.com/0/146512/49819e51-629e-bc65-bfd5-0ef08af3629b.png)


* 緑色のチェックボタンを押下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/146512/bc056ee0-31bd-c80c-857e-661c7fcaa85a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/146512/468b64ef-4b87-03a8-0ef9-4892da27b6f4.png)


* 確認
![タスク2.png](https://qiita-image-store.s3.amazonaws.com/0/146512/1ac3dae8-c822-e7a2-54dd-e24d29f92b63.png)


クリスマスの予定を作るというタスクを完了したので、消えていることを確認できますね。

### 全員分のタスクの提出状況を確認する
全員分の提出状況を確認するときは`status`を使用します。(2回目)

![スクリーンショット 2016-12-17 22.39.21.png](https://qiita-image-store.s3.amazonaws.com/0/146512/4e05313a-11a2-4305-4058-7dbcb8c5caa5.png)

※タスクを振った人以外は見れない

## 得意なこと・苦手なこと
### できること
* タスクの追加
* タスクの完了状況を毎朝本人に通知
* タスクの一覧を**DM**で教える
* ユーザ名を`@channel`にするのも可能
    * ただし、タスクを振った側は@channelに含まれない

### 苦手なこと
* タスクの完了状況一覧をグループチャンネルに表示をすること
* タスクを振った人以外が全員のタスクの状況を確認すること

## おわりに
mut-readいかがでしたでしょうか。
今日は、実際のslackbotのmust-readのお話をしました。
must-readは利点も欠点もありますが、
slackでタスク管理(自分のTODOリスト)をするのには、非常に有効ではないかな、と個人的には思っております。
ただ、DMでしかお知らせしてもらえないという点については、まだ課題かなと思っておりますので、
自分でも似たようなbotを自分の手で作って、
できたらこちらでご報告しようと思っております。

ありがとうございました。
お気に入りエディタのお話

この記事は[SLP_KBIT Advent Calendar 2016](http://qiita.com/advent-calendar/2016/slp_kbit) 18日目の記事です。

##はじめに
この記事では自分が最近気に入っているエディタの話をしていきたいと思います。
エディタ戦争というおっかない言葉も存在していますが、
ここでは平和に話をしていきたいと思います。
世の中にはEmacsとかVimとかAtomとかメモ帳(最強のエディタ)
など様々なエディタが存在していますが、私は「CotEditor」というエディタの紹介を
したいと思います。
CotEditorはMac版しかないのでご了承ください。

![スクリーンショット 2016-12-07 20.34.09.png](https://qiita-image-store.s3.amazonaws.com/0/152005/2c0b0de7-2d7c-77cc-778a-c9d203c49313.png)

##さまざまなエディタ
前にも述べたようにこの世界には様々なエディタが存在していて、使っている人が多そうなのはEmacs、Vim、Atomあたりが多い気がします。
CotEditorはEmacsとVimの二大巨塔には機能的に劣ってしまうかもしれませんが
かなり使い易いと思います。
具体的なことは次から話します。

##CotEditorとの出会い
CotEditorに出会うまでは主にEmacsとAtomを使っていました。
なぜCotEditorに出会ったのかというと、
ある普通の平日に授業の宿題をしている時にEmacsを使っていました。
すると突然Emacsが固まってしまいました(これは自分のPCの問題かも)。
プラスしてAtomも電池の消費が激しいのと重いのでどうにかならないかなと思っていました。
そんな時に、天下のGoogleさんを頼りCotEditorに出会いました。

##CotEditorのどこが良いの？

これは良いなと思ったのは以下の通りです。
1. 国産のものなので初めから日本語対応
2. 背景色や文字のフォントなどの設定がわかりやすい
3. App Storeからダウンロードできる
4. コマンドラインからの操作もできる
5. 軽い！！(重要)

詳しく説明していきます。

**1. 国産のものなので初めから日本語対応**
Atomなどの多くのエディタは最初英語表記のことが多いです。
英語が苦手な私にとってとても苦しかったです当時は。
しかしCotEditorはそんな私に優しく日本語で接してくれました。
それだけで好印象を持ちました。
もちろん英語には慣れなければならないのですが、PC初心者などにとっては
とても良いなと感じました。

**2. 背景色や文字のフォントなどの設定がわかりやすい**
EmacsやVimは高機能ですが、設定が複雑になりがちです。
しかし、CotEditorは直感的に設定することができます。

![CotSet.png](https://qiita-image-store.s3.amazonaws.com/0/152005/d49fa0c5-ace9-94e8-2410-ffcf8c356b47.png)

これが環境設定画面になります。
見たらわかる通りどこを押せば何が設定できるかがとてもわかりやすいです。
それに既存のテーマだけでなく自分でテーマを作成して追加することもとても簡単です。
自分も見やすいように設定しました。

**3. App Storeからダウンロードできる**
やはりWebページからダウンロードするよりかApp Storeからのほうが安心できますよね。

**4. コマンドラインからも操作できる**
先ほどの設定画面の右上に連携というのがあります。
ここからコマンドラインツールをインストールすることで連携することができます。

![CotCom.png](https://qiita-image-store.s3.amazonaws.com/0/152005/0991582e-3659-70ff-021c-3f9b0ef574af.png)

上の画像はコマンドラインツールでできることです。
`cot - ~` (~は上の画像参照)と入力すると操作することができます。
これを見るとシンプルなことしかできないようですが新規の書類を立ち上げたり、
指定した行に移動することができます。

![スクリーンショット 2016-12-16 8.59.36.png](https://qiita-image-store.s3.amazonaws.com/0/152005/d80b8983-1be6-b9f5-2d5f-38a99b5a0616.png)


また、上の画像のように`echo "Happy" | cot` と入力するとHappyという文字列を新規の書類に
入力された状態で開くことができます。
ターミナルで作業をしている時にメモを取りたいと思ったらすぐにCotEditorを立ち上げて
編集ができるというのはかなり魅力的だなと感じました。

**5. 軽い( 重要 )**
まず、自分がCotEditorを使い始めた理由がとりあえず軽いからです。
自分のPCが古くてあまりスペックが良くないので(早く変えたい)エディタが高機能すぎると
固まったり消費電力が大きかったりして苦しみました。
しかし、CotEditorは今の所そんなことも無いです。
自分がCotEditorを推す一番の理由です。

#最後に
ここまでは良いところしか挙げてないのですが、もちろん欠点もあります。
例えば、Markdown形式で書いていてプレビューが見れないということなどが挙げられます。
しかし、このような欠点をふまえてもCotEditorは良いエディタだと思います。
Mac使用者でまだ使ったことの無い人は(あんまりいないかもだけど)是非使ってみてください。
また、Mac持ってない人も参考程度にしてもらえればと思います。
しかし、私は**自分と相性の良いエディタを使うべきだと考えています！！**(ここが平和)
R.swiftとSwiftLintでキチッとした開発環境を作る

#### この記事について

最近個人プロダクトで使っている、R.swiftとSwiftLintの併用による利点について記載します。

---

#### R.swiftについて

プロジェクト内の画像やStoryboard上のViewControlerのクラス名など、従来であれば文字列として入力すべきものをプロパティ値として扱うことができるようになります。
これによって、画像名などのtypoが減少し、より安定的な開発を行えるようになります。
typoが減ることによって、短期的に開発効率を上げることができます。

https://github.com/mac-cain13/R.swift


---

#### SwiftLintについて

Realmが出しているSwift用のlintツール。
これを使用することでちょっとしたコードの汚さなどがかなり軽減されます。
導入直後は大量のエラーと警告が出るため、既存のプロジェクトに適用するには不向きですが、新規プロジェクトで導入するには最適です。
lintツールを導入しておけば、コードの読みやすさがある程度担保されるためチーム開発にもうってつけです。
また、半年前の自分のコードを読み直すと言った場面でも役に立ちます。
これらのことから、長期的に開発効率を上げることができます。


https://github.com/realm/SwiftLint

---


#### R.generated.swiftについて

R.swiftによって自動生成される`R.generated.swift`についてですが、公式では下記のようにgit管理下に置くべきではないと書かれています。

```
Tip: Add the *.generated.swift pattern to your .gitignore file to prevent unnecessary conflicts.
```
https://github.com/mac-cain13/R.swift#cocoapods-recommended

しかし、個人的な見解としては、`R.generated.swift`もgit管理下に置くべきだと考えます。
なぜなら、一度R.swiftを使い始めると、このファイルなしではプロジェクトがコンパイル不可になるためです。

一人で開発している時なら問題ありませんが、新しい人にgit経由でプロジェクトを渡した時、gitのリポジトリとは別にこのファイルを渡さなくてはいけなくなります。
であれば、リポジトリを渡してすぐに開発が行えるほうが効率的です。

また、チーム開発を行っている際に、各々のチームメンバが追加したプロパティが共有されずにコンパイルに失敗するなどの事象も発生します。
このような問題も、件のファイルをgit管理下においておけば発生しません。
この場合コンフリクトが発生しますが、その解消はそこまでハードなものにはならないだろうと思われます。

コンパイル不可能な状態になるくらいなら、コンフリクトが起こったほうがまだ良いだろうという考えです。

---

#### まとめ

R.swiftとSwiftLintを併用することによる利点とそれに関するtipsについて記事を書かせて頂きました。
この記事が、読んだ人の開発効率向上につながれば幸いです。
ソースコードは設計書であり、コーディングは設計作業である

だから意味のない旧来の「詳細設計書」は消えてほしい、というお話。

# 前提

現場によって、いろいろと粒度や定義が異なるとは思いますが、この記事における旧来の「詳細設計書」とは、ソースコードに書くべき内容を日本語に書き下したものであったり、その「設計書」通りにソースコードを書けば正しいプログラムになることを前提にしている何か、のことを指します。

# 標記の件について

今さら私が主張するまでもなく昔から言われ続けていることではあります。
ささっとぐぐれば、いろいろな記事が出てきますし（以下は一例）
[詳細設計書という名のゴミ | Gm7add9](https://gm7add9.wordpress.com/2012/11/30/%E8%A9%B3%E7%B4%B0%E8%A8%AD%E8%A8%88%E6%9B%B8/)
[「コーディングは設計か製造か」という考え方の違い - 人生は長い暇つぶし。](http://tsuyok.hatenablog.com/entry/2013/03/21/235525)
古くて著名なところでは、たとえばマーティン・ファウラーとか。

# 主張

## なぜそのようなものが生まれるのか？

経験上からは、やはりソフトウェア開発を「モノづくり」に当てはめている現場ほど「詳細設計書」を「設計図」、ソースコードを「製品」として捉える傾向が強いのではないかと考えています。
ようするに、いわゆる「製造メーカー」関連の現場ほどそのような傾向が顕著です。いわゆる「ネット企業」ではあまりそのような考えをする人はいなさそうです。
（もちろんいわゆるネット企業でも、ながらくメーカー系で仕事をしていたという人も多数いてそこでの考え方が染み付いている人も少なからずいますので、いないわけではありません。）

## 何が問題なのか

単純に意味がありません。

### 「設計書」通りに作れば OK、が実践できている場合

現実的にそんなことはあり得ないと思いますが、仮にあり得たとすればしかし、単純に無駄です。「設計書」を書く労力でソースコードを書けばいいのです。
そんなことをいうと、それを書いた人がいなくなったらどうするのか、設計書は要らないのか、と返されるかと思いますが、違います。良く書かれた[^1]ソースコードなら、それを自然言語に書き下す必要はなく、ソースコードを読むだけでこと足りるはずです。
ソースコードをちゃんと読めるプログラマばかりだとは限らない、だれでもわかるように「設計書」が必要だ、という反応も十分予想できますが、それは違います。良く書かれたソースコードすら読めないプログラマはそもそもプログラマとは呼べません。そのような人に大事なソースコードを読ませたり書かせたりしてはいけません。
実際に作る人以外でも読めなければならないという話もありますが、「実装」をしない人が「詳細設計書」を見ることの意味自体がそもそもわかりません。

[^1]: 曖昧な表現ですいません。が、そこを定義しだすと話が広がりすぎますし、明確な結論が出るわけでもありませんので。

### 「設計書」通りに作れば OK、が実践できていない場合

単純に、そんな「設計書」はゴミでしかありません。ゴミを作っても仕方ないのだからどうにかするべきです。
「設計書」通りに作れば OK となるよう努力する、という考え方もありますが、前述の通り私はそれを否定します。

また、「設計書」とソースコードがどちらも存在するとしたら、同期が取れていなければ意味がありません。しかし、「設計書」通りに作っても完成しない場合、「設計書」が間違っているのでそちらをまず修正すべきかとは思いますが、現実にはそうはならずソースコードの方を先にあるべき姿に合わせることも多々あります。そこから、修正後のソースコードを元に仕様書が修正されたり（または修正されなくてズレが生じたり）するわけです。
「実装」を元に修正される「設計書」に一体何の意味があるというのでしょうか。

# 結論

プログラマは専門知識を有した専門家であるべき、と私は思っています。
しかし、多くの場合、使う側にとっては単純作業をするだけの、いくらでも替わりのきく部品でしかないのが現実でしょう。
また、プログラマを供給する側の派遣会社やシステム開発会社にとっても、一束なんぼの商品でしかないことが多いでしょう。
そして、プログラマ自身にも問題があります。その一束の中の一人ひとりは、特に技術に興味もないしよくわかってもいないけど、なんとなく他の職種より条件がいい[^2]とか、なんとなく好きだからとか、そんな理由でなんとなく続けている人が多いのが現実です。先ほど『良く書かれたソースコードすら読めないプログラマはそもそもプログラマとは呼べません。』といいましたが、残念ながらそもそもプログラマといえないような人が業界の底辺にはたくさんいるのです。

結局、現状で意味のない「設計書」が生み出される現場の意識というのは『「実装」は刺し身にたんぽぽをのせるのと同程度の作業』であり『「プログラマ」なんてアレだから「設計書」通りに「実装」すればいい』と思われているのであり、『そこに充てられる「プログラマ」の大半は残念ながら実際にアレ』ということなのでしょう。

胸を張って自身をエキスパートだと言えるプログラマがもっともっと増えて、プログラマはソフトウェアを設計・開発するエキスパートであるという認識が業界を覆い尽くすようになって欲しいです。そうすれば、意味のない「詳細設計書」は自然と消えていくに違いありません。

[^2]: 実際、いくらブラックブラック言ったところで、未経験者でも悪くて十数万の月給がもらえる業界ですから。
FirebaseのデータをObjectMapperを用いてデータ構造を管理する方法

# 最初に
この記事は、**Swift**で**Firebase**のデータ構造を、
モデルクラスで管理するために**ObjectMapper**を利用して、
更に少し**アレンジを加える**と使いやすくなるのを共有する記事です。

記載時(2016/12/17)のバージョンは下記の通りです。

|対象|バージョン|
|---|---|
|Swift|3.0.1|
|ObjectMapper|2.2.2|
|Firebase/Database|3.9.0|

# FirebaseとObjectMapperの導入方法
## Firebase
https://firebase.google.com/docs/database/?hl=ja
公式のチュートリアルが一番わかりやすいので、
Firebase databaseが初めての方は [データの取得](https://firebase.google.com/docs/database/ios/retrieve-data?hl=ja)まで終わらせてください。

## ObjectMapper
下記のページで導入方法が記載されています。
https://github.com/Hearst-DD/ObjectMapper#installation

```bash:cocoapods
pod 'ObjectMapper', '~> 2.2'
```

```bash:carthage
github "Hearst-DD/ObjectMapper" ~> 2.2
```

# 実装
Firebaseのチュートリアルを終えた方はお気付きだと思いますが、**モデルクラス化の方法**までは記載されていません。

なので、**Firebase Realtime Database**を使ってる方々はどのように使っているんだろう？と思い調べると、様々なやり方がありますが、
色々試した結果、僕の中では**ObjectMapper**に落ち着きました。

```json:JSONデータ
{
    "Articles": {
        "1" : {
            "title": "一番目の記事"
        },
        "2" : {
            "title": "二番目の記事"
        },
    }
}
```

```swift:ArticleClass
class Article: Mappable {
    var id: String?
    var title: String?

    required init?(map Map: Map){
    }

    func mapping(map: Map) {
        id <- map["id"]
        title <- map["title"]
    }
}
```

上記の**JSON**を `ArticleClass` に `ObjectMapper` を用いて、**mapping**する時は、下記の処理を行うと思います。

```swift:snapshot
let articleId = "1"
FIRDatabase.database().reference().child("articles").child(articleId).observeSingleEvent(of: .value, with: { (snapshot) in
    if let json = snapshot.value as? [String : AnyObject] {
        let article = Mapper<Article>().map(JSON: json)
    }
}
```

しかし、そのままでは `id` は `value` ではなく `key` なので**mapping**されず、`nil`のままです。

```swift:snapshot
let articleId = "1"
FIRDatabase.database().reference().child("articles").child(articleId).observeSingleEvent(of: .value, with: { (snapshot) in
    if let json = snapshot.value as? [String : AnyObject] {
        let article = Mapper<Article>().map(JSON: json)
        article.id = articleId // 微妙・・><
    }
}
```

上記の様に実装してもいいのですが、
これだと毎回`id`を設定するのが面倒なので・・

```swift:snapshot
import ObjectMapper
import FirebaseDatabase

extension Mapper {
    public func map(snapshot: FIRDataSnapshot) -> N? {
        guard var json = snapshot.value as? [String : AnyObject] else { return nil }
        json["id"] = snapshot.key as AnyObject
        if let mappingObject = Mapper<N>().map(JSON: json) {
            return mappingObject
        }
        return nil
    }
}
```

`Mapper`を拡張し、`FIRDataSnapshot`を引数で受け取って、生成するようにすると、`key`を`id`に代入したマッピングを行うことが出来ます！

```swift:snapshot
FIRDatabase.database().reference().child("articles").child(articleId).observeSingleEvent(of: .value, with: { (snapshot) in
    if let json = snapshot.value as? [String : AnyObject] {
        let article = Mapper<Article>().map(JSON: json)
        print("\(article)") // idとtitleが格納されている！
    }
}
```

# 感想
僕の中では普段から使っている`ObjectMapper`を利用することに落ち着いたのですが、
ぜひFirebaseをガンガン使ってる方のノウハウを知りたいので、教えてもらえると嬉しいです！

# 引用元 & 参考
* [Firebaseドキュメント ](https://firebase.google.com/docs/database/ios/save-data?hl=ja)
* [ObjectMapper + Firebase?](https://github.com/Hearst-DD/ObjectMapper/issues/398)
既存のビルド用スクリプトをSlack Botと連携させる話。

Slackからビルド作業を行いたいケースが多々ありますが、既存のビルドスクリプトがシェルスクリプトで構築されているようなことがあります。今回はそういったスクリプトをSlack Botと連携させる方法を紹介してみようと思います。

## Botでビルド用のスクリプトをキック・監視する
 Botのスクリプトは以下になります。ビルドのプロセスをスレッドで走らせつつ、シェルスクリプトの標準入力を読み出し、"MSG: "という行があった場合はその内容をSlackに投稿します。

```rb
#!/usr/bin/env ruby
# coding: utf-8

require 'net/http'
require 'uri'
require 'erb'
include ERB::Util
require 'json'

require 'slack'

class BuildBot

  def initialize
    @token = ENV['SLACK_TOKEN']

    @building   = false
    @task_label = '待機'

    Slack.configure {|config|
      config.token = ENV['SLACK_TOKEN']
    }
    @client = Slack.realtime

    ready()
    puts 'ready.'

    @client.start
  end

  # Slackに投稿する
  def post(msg)
    channel = 'XXXX' # 特定のチャンネルに投稿先を固定する

    param = {
      token:   @token,
      channel: channel,
      text:    ' ' + msg,
      username: 'build-bot(experimental)',
      icon_url: 'http://1.bp.blogspot.com/-OTqeO3wl5xU/VOsJndzmvaI/AAAAAAAArqY/eMQywXd1btc/s800/cat1_smile.png'
    }
    Slack.chat_postMessage(param)
  end

  # 引数で指定されたコマンドをスレッド上で実行する
  # コマンドの出力を一行ずつ読み込み、"MSG:"で始まる文字列の場合は、
  # その内容をSlackに投稿する。
  def execute_command_on_thread(cmd)
    begin
      Thread.new do
        @building = true  # コマンドを再入させないためのlock的な変数

        start = Time.now
        IO.popen(cmd, "r+") do |proc|
          while (line = proc.gets)
            msg = line.chomp
            puts msg  # debug

            post($1.gsub(/<BR>/, "\n")) if msg =~ /^MSG:(.*)$/
          end
        end
        finish = Time.now

        post('ビルドが完了しました！ \(^_^)/')

        msg = ':information_source: ビルド時間は `' + (finish - start).round(2).to_s + '秒` でした。'
        post(msg)

        @building = false
        @task_label = '待機'
      end
    rescue Exception => e
      puts e.message
      puts e.backtrace.inspect
    end
  end

  def ready
    start_time = Time.now.to_i

    @client.on :message do |data|

      # 実行開始時に少し前の投稿データを読み込んでしますため、
      # 現在時刻より前のものはスキップする。
      post_time = data["ts"].sub(/\..*$/, "").to_i
      next if post_time < start_time

      text = data["text"]  # 入力されたテキストを取得する

      if text =~ /^ビルドして/
        if @building == true
          post(':warning: いまビルド中です。 (>_<)')
          next
        end

        @task_label = 'ビルド中'
        post('ビルドを開始します！')
        execute_command_on_thread("cd ~/foo ; /bin/bash ./build_script.sh")
      end
    end
  end

end

BuildBot.new
```

スクリプトは以下のようになります。既存のビルドスクリプトの場合であっても、`echo 'MSG: ...'`という処理を追加してゆくことで、上記のSlack Botと連携できる形になります。

```
#!/bin/sh

echo 'MSG: ビルド開始します。'
# ...何かビルド処理...

echo 'MSG: ビルド完了しました！'
```

## まとめ

既存のビルド用スクリプトとSlack Botを連携する方法を紹介してみました。
jupyter notebookでElasticsearch

# Jupyter notebookからElasticsearchを操作してみた

このブログはjupyter notebook Advent Calendar 2016の17日目のエントリーです。
## 概要
Jupyter notebookを使って
全文検索エンジン[Elasticsearch](https://www.elastic.co)へのデータ投入や検索などをしてみたので
躓いたところや感動したところをポツポツ書きます

弱いエンジニアかつ、
Jupiter notebookは完全なる初心者ですので
ご了承ください。。。

### 環境
- ec2インスタンス立てて、0から構築します。
- ipadとiphoneで書きます。

## jupyter notebookの環境構築

notebookの環境構築に関しては、
他の方の記事で出尽くしているようですし割愛します。

下記リンクの記事を参考にインストールしました。
[AWS EC2でjupyter + opencv(Ipython notebook + opencv)](http://qiita.com/f-akazawa/items/9398772d59139de07dbe)
[ipython notebook(jupyter)をリモートから使う](http://qiita.com/Himaken/items/b411de87b00c051e6697)

## 実際にやってみた

### Elasticsearchのインストール

なにはともあれ、jupyter notebookで
elasticsearch環境を作ってみました。

こんな感じで↓最低限の環境を泥臭く作ります。
（本当はansibleとか使った方が色々スマートな感じがしますが。）

![IMG_0013.PNG](https://qiita-image-store.s3.amazonaws.com/0/146387/50327229-c0fe-4bb0-cf5f-85d3c61323f4.png)

早速エラーが...
ぼけっとしていてショボいインスタンスを立てたので、メモリが足りなかったようです。

![IMG_0014.PNG](https://qiita-image-store.s3.amazonaws.com/0/146387/e6f47cfc-ee5a-03d1-9c68-638e3b8c9eaf.png)

こういったエラーまで残せるのはnotebookのいいところですね()

### 気を取り直してElasticsearchのインストール

![IMG_0015.PNG](https://qiita-image-store.s3.amazonaws.com/0/146387/9e0b63e9-0f67-e8c3-9cbb-0a3cf56a04ff.png)

さっきまでzip落としていた癖に方針転換してrpmにしてるのに理由はありません。気分です。

![IMG_0016.PNG](https://qiita-image-store.s3.amazonaws.com/0/146387/ca89a50a-e158-da1a-68d3-7a82029efa3e.png)

Elasticsearchを起動して、
curlで起動確認します。ちゃんと応答が返って来ています。

![IMG_0017.PNG](https://qiita-image-store.s3.amazonaws.com/0/146387/f78a9451-6fc8-f5c6-a430-304ee1d775bf.png)

Elasticsearchのpythonクライアントからドキュメント登録します。
docとしてjson形式のドキュメントを作成しています。

![IMG_0018.PNG](https://qiita-image-store.s3.amazonaws.com/0/146387/d0123ac8-d37a-00da-2ef1-5f916b7e7345.png)

無事検索結果が返って来ました。

## まとめ

このように、自分が踏んだ処理の流れを残しておける＆共有できるのはとても便利だと感じました。

書きながら思いましたが、
Qiitaに書くよりもnotebook自体を公開してしまえばそれだけでいいような気もしました。。。

まだ初心者なので、全然使い倒せていないですが
色々な用途に使えそうです。

これからも積極的に使って行きたいです。
カノジョできないので出会い系アプリのJS技術を調べてみた

この記事は[カノジョできないエンジニアアドベントカレンダー]()17日目の記事です。

みなさんこんにちは。相変わらずカノジョができないエンジニアのPotato4dです。
カノジョできないエンジニアのみなさんの中には、出会うために出会い系プラットフォームを利用してる人もたくさんいらっしゃるかと思います。

しかしながら、エンジニアといえば、やはり出会い系のプラットフォームで使われている技術は気になるもの。
自分の推しではない技術が使われていたプラットフォームで出会ってしまった日には、夜も眠れません。

ということで、今回は各出会い系プラットフォームで使われている技術を調べてみました。

なお、私は普段出会い系アプリのたぐいは、面白いプロフィールをみつけては知り合いに見せあって大笑いしているだけのタイプなので、サービス内容自体については詳しく知りません。

## 実際に検証する

では実際に、技術を見ていきたいと思います。今回は検証ツールとして、Wappalyzerを利用しました。

http://qiita.com/potato4d/items/6a64fb025ba38edb1670

### pairs

ということではじめは、今アツいらしいpairsから。

<img width="1440" alt="スクリーンショット 2016-12-17 23.21.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/75633/12f04624-c52a-6717-2e61-c6e47f6d8745.png">

pairsは、JavaScriptのフレームワークとしてAngularを利用しているようです。
実は、この記事を書くきっかけとなったのが、pairsがAngularを利用してることでした。

https://twitter.com/shin_v1/status/786912738874265600

### タップル

次はCAのタップル。気軽に出会えるのが魅力らしいです。

<img width="1440" alt="スクリーンショット 2016-12-17 23.21.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/75633/8095c680-2cdb-ba6e-3e0b-bd45393e5e64.png">

タップルでは、Reactを利用しているようです。検証をはじめて二つ目で、JSフレームワークの大御所どころが揃いました。

CAかつ新出のプラットフォームだけあって、こちらもモダンな技術が利用されていますね。

### ハッピーメール

このまま新しいどころを調べても仕方がなさそうなので、次はハッピーメールで検証してみました。
アプリ版以外のアカウントを持っていないため、こちらもトップページからですが、老舗だけあって、ログイン後のページでは別のJavaScriptが読み込まれているかもしれません。

<img width="1440" alt="スクリーンショット 2016-12-17 23.21.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/75633/28fc0f13-ed78-b221-6eae-b057a0040891.png">

結果はjQueryのみ。
ソースも見たところ、LP用のJSの様子ですが、JSも一つずつ読み込んでいる様子なので、比較的古い技術を採用していそうです。

### YYC

最後にYYC。こちらもmixiが行っている、老舗のサービスですね。

![スクリーンショット 2016-12-17 23.21.23.png](https://qiita-image-store.s3.amazonaws.com/0/75633/2cd37972-e5b4-19ce-90fe-8110a2bd1543.png)

こちらもjQueryのみの様子。裏でPerlが動いているのが、時代を感じさせる仕様です。
また、少し内部らしいところにはいっても、jQueryのみの様子でした。

![スクリーンショット 2016-12-17 23.43.25.png](https://qiita-image-store.s3.amazonaws.com/0/75633/4e68747c-b461-0cdf-3465-0b0496905aca.png)

## まとめ

jQueryからReact, Angularまで、ポピュラーな技術どころは網羅されている結果となりました。
エンジニアのみなさんなら勿論、自分の「推し」を重視して、出会いも選びますよね？

明日、18日目はpika_shiさんの順番です。
プログラミング初心者が、プログラミング勉強する話

私は、エンジニアではなく、趣味でプログラミングの勉強をはじめたものです。なので、
「普段、どの言語されているんですか？」と聞かれて、いつも、言葉に詰まってしまいます。

うーん。色々手を出しては、挫折してる感じかも・・・

プログラミングは、簡単とか、言う人がたまにいるんだけど、私には、簡単なんて、ありえないです。

そんなこんなで、いつまでたっても、初心者枠から抜け出せないです。

努力が、足りないんじゃないかと、自分で、自分を責めたくなります。

とりあえず、初心者の私が、Java言語の勉強をはじめてやったことを、思い出し、ここに記憶じゃなくて、記録してみようと思います。

初心者の私が、いきなり、Java言語は、結構厚い壁が立ち塞がってる感じで、
やっぱり、本より、動画で学んだ方が、きっと、理解しやすいだろうと思って、schooさんのJavaの授業を録画授業で受講しました。
とてもわかりやすい授業で、難しいオブジェクト指向も、なんとなくだけど、授業についてゆくうちに、少しずつ分かってきました。

この授業を受けて、基礎というのは、本当に大事だなぁって実感しました。基礎を理解することで、自信にもつながり、次の一歩を踏み出せます。

今年は、プログラミング言語の勉強をして、勉強会にも色々行って、多くの方々のお話を聴けてとても充実した1年でした。なかなか初心者枠からは、抜け出せませんが・・・

来年の目標は、初心者から中級者になることなので、来年はもっともっとプログラミングの勉強を頑張りたいです。
来年、特に力を入れたい言語は、pythonと、JavaScriptとgo言語です。余力があればrubyもしたいし、swiftもやってみたいと、欲張りなことをまたまた、考えてしまいます。欲張りすぎて、何もできない人になるのが嫌だなぁと心配になったりもするので、まずは、pythonの本１冊から、ちゃんと終わらせたいです。

そのPythonですが、起動して、import thisとタイプすると、「The Zen of Python, by Tim Peters」とパイソンの禅が表示されます。

![スクリーンショット 2016-12-17 22.38.38.png](https://qiita-image-store.s3.amazonaws.com/0/131990/d9243200-53b3-53e5-4f51-839b61f3813f.png)

最後の方では、下記のように言っています。

「ずっとやらないでいるよりは、今やれ。
でも、今すぐにやるよりはやらないほうがマシなことが多い。」

深いなぁと思うことばかりです。

毎日、コードを書けたらいいなぁと思うし、少しでもいいから書き続けてゆきたいなぁと思う。そしてきっといつかある日、目が覚めたらプログラミングがスラスラと書けるようになっているというのを夢見る2016年の12月です。

頑張ろ！
【Android】Layoutファイルをフォルダ分けする

# Androidのプロジェクト構造
AndroidでLayoutファイルを作成すると、同じフォルダに並列で格納されてしまいます。
プロジェクトが大きくなってくると、ファイル数が巨大になり、管理が大変になってしまいます。

![スクリーンショット 2016-12-17 22.21.45.png](https://qiita-image-store.s3.amazonaws.com/0/133918/2687c020-aba9-63db-0ef4-fc3bf0e484e5.png)

# Layoutファイルをフォルダ分けする
本記事の紹介する方法で、以下のようにLayoutファイルを分割することができます。
フォルダで区切られて表示されるので、ファイル管理が少し楽になるかと思います。

![スクリーンショット 2016-12-17 22.45.17.png](https://qiita-image-store.s3.amazonaws.com/0/133918/1ce58036-f309-9192-4fba-b70450f54109.png)

## フォルダの作成
「app -> src -> main」配下に以下のフォルダを作成します。

**・src/main/res-main**
プロジェクト共通のリソースフォルダになります。
「colors.xml」、「dimens.xml」、「strings.xml」、「styles.xml」やアプリアイコン等を格納します。

**・src/main/res-screen**
画面用のリソースフォルダになります。
画面を作成するためのLayoutファイルや、その画面に使う画像等を格納します。

## App Gradleの設定
app.gradleファイルを開き、「android -> sourceSets」内部でリソースフォルダのパスを指定します。

```gradle:app.gradle
android {
    ...
	sourceSets {
		main {
			res.srcDirs += 'src/main/res-main'
			file('src/main/res-screen')
					.listFiles()
					.each { res.srcDirs += it.path }
		}
}
```

## ツリー表示の変更
フォルダ分けされたリソースファイルを表示するためには、ツリー表示を「Android」から「Project」に変更する必要があります。

![37ed25e6-02c8-b850-44e1-0290fad92bde.png](https://qiita-image-store.s3.amazonaws.com/0/133918/afc1808f-ed2c-576a-55d6-f742e14571ff.png)

# おわりに
プロジェクトが大きくなってくると、リソースファイルの管理が大変になってきますが、フォルダで分割されていると、ファイル検索等が少し楽になるかと思います。
IE 11で babel-plugin-transform-react-inline-elements の最適化を入れると画面に何も表示されない

# IE でだけ、画面に何も表示されないんですけど？

いきなりこの知らせを受けたので、調査することに。フロントエンジニアにはよくある事なので落ち着いて IE 環境を modern.IE でセットアップしつつ状況を漁っていた。

# 結論

babel plugin で production ビルドのみ以下のoptimizationがロードされていて、それをオフにしたら動作した。

https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements

https://github.com/facebook/react/issues/5138

# 原因

IE には Symbol が実装されていない、かつ、 React の JSX は内部的に Symbol が使われている。基本的に React が createElement で生成したObjectであれば、そのタイミングで polyfill 化された Symbolが入っていて、同値比較と正当性チェックをパスするので問題ない。

問題があるのは、 `babel-plugin-transform-react-inline-elements` で最適化オプションを付けてる時。

これは react がJSXで変換した結果を reactのcreateElement関数にするんじゃなくて、さらにアグレッシブにcreateElement関数の呼び出し結果のオブジェクトに変換してしまうことで関数呼び出しのコストを減らす、というもの。

呼び出し結果のオブジェクトは Symbol 化されたオブジェクトがそのまま生成されてしまう。これを babel が Polyfill するわけだが、その結果として、 **ReactがcreateElementで生成したものとオブジェクトの結果が変わってしまう**。

Symbol がつかえる環境であれば、 polyfillされたとしてもnativeのSymbolを利用するため、問題ない。問題があるのは IE 等の native Symbol が使えない環境。

native Symbol が使えない状況だと createElement で生成しているものと違うものになってしまうため、結果、 JSX が valid なオブジェクトとして評価されなくなる。

どうなるかというと、 render の時の isValidElement 関数がパスしなくなり、表示されずに弾かれてしまう。

https://github.com/facebook/react/blob/6810627a91f2020caee7fecf21580187dc6ef0fc/src/isomorphic/classic/element/ReactElement.js#L378-L384


わかりにくい要因はこの最適化オプションが production の時に基本的に採用されるものであるため、 production ビルド時にはエラーが suppress されてしまい、ただの『白い画面』になる点。

最適化オプションを入れた直後なら気づけるだろうが、基本的にモダンブラウザで実行していて、IEなどのレガシーブラウザを見るのはQA中以外にあまり積極的にやっていないと気づけない。

兎にも角にも IE11 との勝負には勝利した。

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">IE11との勝負に勝ったが、試合に勝って勝負に負けた気がしている。</p>&mdash; Yosuke FURUKAWA (@yosuke_furukawa) <a href="https://twitter.com/yosuke_furukawa/status/809080602452312065">December 14, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Redisのpub/sub機能

RedisはNoSQLのデータストアとして有名ですが、もう1つの機能として、「pub/sub機能」を持っています。もはやSQLと比較するような機能ですらないのですが、軽くまとめてみます。

## pub/subとは
JavaScriptをやっているとイメージしやすいと思うのですが、`onclick`に直接イベントを書いてしまうとイベントが1つしか設定できなくなってしまいます。

一方で、`addEventListener`を使えば複数イベントをセットできますし、イベントをトリガする側ではイベントがいくつついているかも気にせずに、まとめて発生させることができます。このようにして、「イベントを起こす側」と「イベント処理を行う側」を分離するのがpub/subモデルです。

## Redisでのpub/sub
まず、受信側が`SUBSCRIBE チャンネル名`というコマンドをRedisに投げます。ふつうのRedisコマンドは、繋いで結果が帰ってきたらそれで終わりですが、`SUBSCRIBE`コマンドは一度発行するとRedisにつながったままとなります（この状態では`SUBSCRIBE`と関係ない他のコマンドを投げるべきではない、とのことです）。

このままの状態で、別のクライアントから`PUBLISH チャンネル名 内容`とすると、`SUBSCRIBE`しているクライアントにデータが届きます。例えば[`node-redis`](https://github.com/NodeRedis/node_redis)では`.on('message')`で届いたものを受け取ることができます。

もちろん、おなじRedisサーバにつなげればpub/subはプロセスや言語の壁を超えて自由に行なえますので、多言語・プロセスな環境下で要素をつなぐのにもピッタリです。

## 注意点
* `SUBSCRIBE`側では他の命令を流すのが適当でないという都合上、接続プールに巻き込まれないように注意する必要があります（`PUBLISH`側は特に問題ありません）。
* `SUBSCRIBE`側は非同期で来るメッセージを受け取れる構造である必要があります（Node.jsや別スレッドで処理するなど）。PHPで処理するのはややこしいかもしれません。
* 即時のメッセージ配信のため、誰も`SUBSCRIBE`していなければ`PUBLISH`は闇に消えてしまいます（送ること自体は可能です）。
* Redisのデータベースにある、（`SELECT`で選ぶ）データベース番号は、pub/subには**影響しません**。同じサーバで複数のpub/subを行う場合、（データベース番号ではなく）チャンネル名を変える必要があります。
MySQLのJSON_EXTRACTで文字列を取得するとダブルクオートも含まれる

MySQLのJSON_EXTRACT()は囲んでいるダブルクオートも含まれて取得されます。JSON_REPLACE()だと、置換元を囲んでいるダブルクオートは置換対象になりません。
そのまま既存のjsonの値で置換しようとすると、二重ダブルクオートになるので注意です。内側のクオートはエスケープされます。
そのため、jsonの文字列はTRIMにかけてから使うとよいです。

それを実際にコードで確認していきます。MySQLのバージョンは5.7.16-logです。`SELECT version()`で確認できます。

```sql
SELECT JSON_EXTRACT('{"url": "http"}', '$.url');
-- "http"

SELECT JSON_EXTRACT('{"url": 1}', '$.url');
-- 1

SELECT JSON_REPLACE('{"url": "http"}', '$.url', 'ftp');
-- {"url": "ftp"}

SET @json = '{"url": "http://hoge.com"}';
SELECT REPLACE(JSON_EXTRACT(@json, '$.url'), 'http://', 'https://');
-- "https://hoge.com"

SET @json = '{"url": "http://hoge.com"}';
SELECT JSON_EXTRACT(@json, '$.url') REGEXP '^http';
-- ヒットしない
-- 0

SET @json = '{"url": "http://hoge.com"}';
SELECT JSON_EXTRACT(@json, '$.url') REGEXP '^"http';
-- ヒット 囲んでいるダブルクオートも検索対象
-- 1

SET @json = '{"url": "http://hoge.com"}';
SET @path='$.url';
SELECT JSON_REPLACE(@json, @path, REPLACE(JSON_EXTRACT(@json, @path), 'http://', 'https://'));
-- エスケープされたクオートが入ってしまう
-- 置換する時は、置換元を囲んでいるダブルクオートが置換対象にならない。
-- {"url": "\"https://hoge.com\""}

-- TRIMを使えば取得時にクオートを消せる
SET @json = '{"url": "http://hoge.com"}';
SELECT TRIM(BOTH '"' FROM REPLACE(JSON_EXTRACT(@json, '$.url'), 'http://', 'https://'));
-- https://hoge.com

-- 解決
SET @json = '{"url": "http://hoge.com"}';
SET @path='$.url';
SELECT JSON_REPLACE(@json, @path, REPLACE(TRIM(BOTH '"' FROM JSON_EXTRACT(@json, @path)), 'http://', 'https://'));
-- {"url": "https://hoge.com"}
```
RustでTessel2のLチカをしてみる #rust_jp


こんにちは、 @n0bisukeです。 [IoTLT](https://iotlt.connpass.com)というイベントをやってます。

今日はアドベントカレンダーということで、Rustな人にIoT周り布教の意味合いもこめて、Rustを使いつつTesselの紹介っぽい記事を書きます。

## Tesselとは

Node.jsで制御可能なIoTプロトタイピングボードです。現行のTessel2になってからRustに対応しました。

* 公式サイト: https://tessel.io/
* 参考記事: [Web制作者にもチャレンジできるIoT入門～Tesselの基礎～](https://html5experts.jp/n0bisuke/13562/)

![](https://i.gyazo.com/f7b156c722fb9cc3a0fa5da821c9b5b8.png)

**Webの人が電子工作するならめちゃアツいです。**

今回はRustでTessel2のLチカを試してみます。

## 環境

* macOS Sierra
* Node.js 7.2.0
* Rust 1.12.0

## もろもろ準備

### Node.jsのインストール

[いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜](https://liginc.co.jp/web/programming/node-js/85318)などを元にインストールします。

`npmコマンド`が使えるようになればOKです。

```
$ npm -v
3.10.9
```

### Rustのインストール

Rustをインストールします。

```
curl -sSf https://static.rust-lang.org/rustup.sh | sh
```

これで`cargoコマンド`や`rustcコマンド`が使えるようになります。

```
$ rustc -V
rustc 1.12.0 (3191fbae9 2016-09-23)
```

※ちなみに今(2016/12/17現在)だとRustは1.13が最新です

### t2コマンドとSDKのインストール

t2はnpm経由でインストール出来ます。

```
$ npm install -g t2-cli
```

`t2コマンド`が使えるようになります。

次にcargo経由でtesselのRustSDKをインストールします。

```
$ cargo tessel sdk install
```

これで準備OKです。

## Lチカする

### プロジェクトの準備

t2コマンドでひな形を作成します。

```
$ t2 init --lang=rust
INFO Initialized Cargo project...
INFO Wrote "Hello World" to /Users/n0bisuke/dotstudio/1_blogsamplecode/dotstudio/tessel/rust/ledblink/src/main.rs
```

`Cargo.toml`と`srcディレクトリ`が生成されます。

```
$ ls
Cargo.toml src
```

lsすると分かりますが、`Cargo.toml`と`srcディレクトリ`が作成されます。
srcディレクトリ内には`main.rs`が生成されています。

この状態で`t2 run blinky`を実行するとLチカができます。

```
$ t2 run blinky

INFO Looking for your Tessel...
INFO Connected to Tessel-xxxxxxxxxxxxx.
    Updating registry `https://github.com/rust-lang/crates.io-index`
   Compiling libc v0.2.18
   Compiling cfg-if v0.1.0
   Compiling unix_socket v0.5.0
   Compiling tessel v0.2.0
   Compiling blinky v0.0.1 (file:///Users/n0bisuke/dotstudio/1_blogsamplecode/dotstudio/tessel/rust/rust-sample)
    Finished release [optimized] target(s) in 3.64 secs
INFO Writing project to RAM on Tessel-02A3809D2F8B (338.432 kB)...
INFO Deployed.
INFO Running blinky...
I'm blinking! (Press CTRL + C to stop)
```

これでLチカできました！

![](https://i.gyazo.com/c69087bbb91f04200377a40d6f38467a.png)

> ※画像はGoogle画像検索のキャプチャです

実際にはTessel2はまだ技適問題などもあるので、「[Tessel2でLチカを試す](http://qiita.com/n0bisuke/items/e716d4b4af113d8090f7)」にもあるように電波暗室などで試しましょう。

## おわりに

けっこう簡単に出来ました :+1: 

Rust版のTesselコードはあまりまだ活発ではないみたいです。公式サイト側だとチュートリアルなどが整ってないので[tessel-rustのGitHubページ](https://github.com/tessel/tessel-rust)を見にいくのがいいと思います。

Rustも書いてて楽しいのでTessel触りながらRust勉強とか面白いかもしれません。

2017/1/15に[Rust入門者向けハンズオン](https://rust.connpass.com/event/43893/)もあるので是非きてください :)

それでは。
A-Frameはじめました

はじめまして、jyuko@VR/AR初級者です。
Qiita初投稿になります。

VR元年と言われた2016年も終わりが近付いていますが、今からでも間に合うVRフレームワーク、A-Frameを使ってみたいと思います。


## A-Frameとは
MozzillaのVRチーム(MozVR)が開発したWebVRフレームワークです。内部で[three.js](https://threejs.org/)を使っています。
とにかく簡単にVRコンテンツが作れます。


## A-Frameの準備
公式サイトからインストールします。
https://aframe.io/

githubでソースがまるっと公開されていますし、npm版もあります。
今回は手軽さ重視で、ビルド済みのファイル(aframe.min.js)をダウンロードして使います。


## HTMLの作成
A-Frameの特徴として、SceneをHTMLベースで書くことができます。
ミニマム構成は以下のようになります。

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame Sample</title>
    <script src="./aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" color="#ff0000"></a-box>
      <a-sky color="#dddddd">
    </a-scene>
  </body>
</html>
```

ブラウザで表示すると、こんな感じです。
![localhost-8383-aframe-minimam.html(iPhone 5) (1).png](https://qiita-image-store.s3.amazonaws.com/0/153460/cfc0d5fd-9e15-8c9e-ba37-f9ef2d77b496.png)

`<a-scene>`タグを配置するだけで、デフォルトのlight(光源)、camera(カメラ)をセットしてくれます。
`<a-sky>`はSceneの背景で、画像をセットすることでGoogleストリートビューのような表示もできます。

画面右下にVRアイコンが表示されていますが、スマートフォン実機を横にして見ると、VRモードで閲覧ができます。
デフォルトで、camera(カメラ)のlook-controlsが有効になっているので、デバイスの向きに合わせて視点が動きます。


## まとめ
HTMLで書けるので初心者にも扱いやすそうですし、`<a-scene>`の1行で、VRコンテンツに必要な初期設定を全部やってくれている感じです。
three.jsを内包しており、拡張性にも優れていそうです。

これから色々試してみる予定ですが、当座の目標として、VRで動き回れる迷路でも作ってみようかなと思っています。
【しずおかアプリ部】活動ログ　第31回

![しずおかアプリ部2.jpg](https://qiita-image-store.s3.amazonaws.com/0/88105/ee800648-fa25-1829-20c3-bad9c2055d35.jpeg)


##■タイトル##
第３１回


##■開催日##
２０１６年１２月１７日（土）　１６：００～１８：００


##■参加者##
１２名


##■活動内容（概要）##
・保坂プレゼン「HourOfCodeでMineCraftデザイナー体験」
・菅原プレゼン「Unityはじめるよ～HeadLookController～」
・しずおかアプリ部でSlackを使おう
・部員さん提供「OculusTouchによるVR体験」

##■活動内容（詳細）##

【実演・プレゼン】

**・保坂プレゼン「HourOfCodeでMineCraftデザイナー体験」**

　　Hour Of Code 
　　[https://code.org/minecraft](https://code.org/minecraft)

　　　「Hour Of Code」という初心者向けのプログラミングを勉強するサイトに、
　　　大人気ゲームマイクラを使った問題集「MineCraftデザイナー」が追加された。
　　　ビジュアルプログラミングを用いるので、パズル感覚でプログラミングの勉強ができる。

　　　今までは主人公目線のプログラムが中心だったが、
　　　MineCraftデザイナーでは敵やその他キャラクターのプログラムをするという、
　　　今までとは違った問題となっている。

![IMG_7453.JPG](https://qiita-image-store.s3.amazonaws.com/0/88105/cc4941cf-db99-fd3b-b8e4-f9b877063c0d.jpeg)

![IMG_7452.JPG](https://qiita-image-store.s3.amazonaws.com/0/88105/e56e1eeb-eb1d-16e9-850e-f188d423052b.jpeg)

<hr>


**・菅原プレゼン「Unityはじめるよ～HeadLookController～」**

　　　Unity社が提供しているアセット「HeadLookController」について解説しました。

　　　このアセットを使うと、キャラクターの振り向きを表現することができる。
　　　ターゲットをセットすると、そのターゲットを追うように体や顔を回転させ、自然に振り向きを表現できる。
　　　また、アニメーションとブレンドすることもでき、
　　　アニメーションしながら顔だけ振り向くなんてことも可能。

　　　使い方はも簡単
　　　１、キャラクターにHeadLookControllerをアタッチ
　　　２、振り向き時に回転させたいボーンを指定（今回は腰から頭を指定）
　　　３、振り向き時のパラメータ調整
　　　４、ターゲットを指定

　　　ターゲットの指定は、HeadLookControllerにターゲットをセットする方法ではなく、
　　　他のスクリプトから、HeadLookControllerのターゲットに自分をセットする使い方です。
　　　つまり、振り向きたいキャラ主観ではなく、振り向かせたいキャラ主観での利用となります。
　　　※スクリプトをほんのちょっといじるだけで、振り向きたいキャラ主観にすることも可能。

　　資料：[第31回_プレゼン資料(Unityはじめるよ～上半身だけ動かす～).pdf](http://monolizm.com/sab/pdf/第31回_プレゼン資料(Unityはじめるよ～上半身だけ動かす～).pdf)
　　プロジェクト一式：[headlookcontroller.zip](http://monolizm.com/sab/src/headlookcontroller.zip)

<img width="1438" alt="スクリーンショット 2016-12-17 13.36.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/88105/9ba0867d-3916-9fe3-d30d-6e5486eb06e4.png">

<img width="1318" alt="スクリーンショット 2016-12-17 13.37.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/88105/72468c2c-2de9-db4c-7baa-c231b420c3cf.png">


<hr>
　
**・しずおかアプリ部でSlackを使おう**
　　しずおかアプリ部内での情報交換、コミュニケーションツールとして、「Slack」を導入た。
　　今回も利用方法について解説して頂きました。
　　
　　チャンネルにJoinする方法や、チャンネルの追加方法、
　　他には、絵文字や、文字の装飾方法、リンクなどのテキスト入力の基本的な使い方を学びました。

　　shizuapp.slack.com

　　と検索すれば「しずおかアプリ部」ができてますので、
　　ぜひぜひご参加ください。

![IMG_7454.JPG](https://qiita-image-store.s3.amazonaws.com/0/88105/924d469d-2346-bd88-448c-7b292d2ca977.jpeg)

<hr>

**・部員さん提供「OculusTouchによるVR体験」**

　　OculusTouchを使うと、2m x 1.5mの空間を移動可能となる。
　　VR内に自分の手に代わるものが表示されるので、かなり直感的な操作が可能。
　　没入感も増し、ゲーム性も上がるのでこれこそがVRといった感じでしょうか。
　　プレイしている人を客観的に見ても、楽しそうなのが伝わってくる。
　　3D空間に絵を描いたり、彫刻するようなソフトもあり、
　　作成したデータをファイル出力も可能とのことで、簡単なモデリングにも使えそう。

![IMG_7456.JPG](https://qiita-image-store.s3.amazonaws.com/0/88105/3c6cecc3-7c3f-37c2-30a4-394ac4454e07.jpeg)

<hr>


**・雑談**
・Unity５．６のベータ版公開
・次回バージョンアップはメジャーバージョンアップで「Unity2017」となる。