OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScript 王様ゲーム

![js.png](https://qiita-image-store.s3.amazonaws.com/0/20635/abb1342e-1af9-aa70-045b-d35dd483b573.png "js")

##JavaScript勉強メモ。
**4点を意識して写経なり**
*- 動くアプリを作る*
*- 書いたコードを理解*
*- 機能またはデザインを追加*
*- 成果物は、ネット上にあげる*


```lang:html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王様ゲーム</title>
</head>
<body>
   <h1>王様ゲーム</h1>
   <p>人数：<input type="text" id="num"></p>
   <p><input type="button" id="btn" value="王様曰く！" onclick="kingSaid();"></p>
   <p id="result"></p>
   
    <script>
        function kingSaid(){
            
            //変数定義
            var orders = [
                "デコピンしなさい",
                "クイズを出しなさい",
                "褒めちぎりなさい",
                "ビンタをしなさい",
            ];
            //乱数に配列を割りあてる★ここがポイント！　配列に乱数を割りあてる
            var order = orders[Math.floor(Math.random() * orders.length)];        
            //人数の入力値を取得
            var num = document.getElementById("num").value;
            //乱数に当てはめる
            var p1 = Math.floor(Math.random() * (num)) + 1;
            var p2 = Math.floor(Math.random() * (num)) + 1;
            
            //入力人数が1人の場合の処理
            if( num < 2){
                p2 = 1;
            
            //p1とp2の重複を避ける処理
            }else{    
               do{
                  p2 = Math.floor(Math.random() * (num)) + 1;
                }while (p1==p2);
            }
            document.getElementById("result").innerHTML = "#"+p1+"の人が"+p2+"の人に"+order;
            
        }
    </script> 
</body>
</html>
```
JavaScript ストップウォッチ

![js.png](https://qiita-image-store.s3.amazonaws.com/0/20635/9ef31cb6-a6bb-8e4a-0547-71d70c4675d5.png)

##JavaScript勉強メモ。
**4点を意識して写経なり**
*- 動くアプリを作る*
*- 書いたコードを理解*
*- 機能またはデザインを追加*
*- 成果物は、ネット上にあげる*

```lang:html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background: #e0e0e0;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #timerText{
            color: #00aaff;
            font-size: 128px;
            margin: 40px auto;
            text-shadow: 0 1px rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
    <h1>ストップウェオッチ</h1>
    <div id="timerText">0.00</div>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>
    
    <script>
        (function(){
         
         var startTime;
         var timerId;
         var startButton = document.getElementById("start");
         var startButton = document.getElementById("stop");
         var startButton = document.getElementById("reset");
         var startButton = document.getElementById("timerText");
         
            
        startButton.addEventListener("click", function(){
            startTime = Date.now();
            updateTimerText();
        })    
        
        function updateTimerText(){
            timerId = setTimeout(function(){
               var t = Date.now() - startTime;
               timerText.innerHTML = (t/1000).toFixed(2);
               updateTimerText();
            },10);
        
         })();
    </script>
</body>
</html>
```
(Swift) Macbookでフタを閉じた瞬間、開いた瞬間にイベントを受け取る

# Macbookのフタ閉じた時のイベントって取れるの？

気になったので調べてみました。
簡単にコピペで使えるように、コードを貼ってみます。
ObjCのかたは、下の参考リンクのところからジャンプ先を見てみてください。

まだ実際、軽くしか動作確認できていないので、もしかしたらちゃんと動かないかもです。

```ViewController.swift
import Cocoa

class ViewController: NSViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 通知を受け取ることができるように設定する
        let notificationCenter = NSWorkspace.sharedWorkspace().notificationCenter;
        notificationCenter.addObserver(
            self,
            selector: #selector(receiveSleepNote(_:)),
            name: NSWorkspaceWillSleepNotification,
            object: nil
        )
        notificationCenter.addObserver(
            self,
            selector: #selector(receiveWakeNote(_:)),
            name: NSWorkspaceDidWakeNotification,
            object: nil
        )
    }

    // スリープされた瞬間に通知を受け取る
    func receiveSleepNote(n:NSNotification) {
        print("receiveSleepNote: ", n.name)
    }
    
    // スリープ解除された瞬間に通知を受け取る
    func receiveWakeNote(n:NSNotification) {
        print("receiveWakeNote: ", n.name)
    }

}
```

## 参考URL
https://developer.apple.com/library/mac/qa/qa1340/_index.html
JavaScript 5秒当てゲーム

![js.png](https://qiita-image-store.s3.amazonaws.com/0/20635/abb1342e-1af9-aa70-045b-d35dd483b573.png "js")

##JavaScript勉強メモ。
**4点を意識して写経なり**
*- 動くアプリを作る*
*- 書いたコードを理解*
*- 機能またはデザインを追加*
*- 成果物は、ネット上にあげる*


```lang:html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stop at 00:05!</title>
    <style>
        body{
            background: #e0e0e0;
            text-align: center;
            font-size: 16px;
            font-family: Arial, sans-serif;
        }
        #result{
            font-weight: bold;
            font-size: 32px;
            margin: 60px auto;
            color: #00aaff;
            text-shadow: 0 1px 0 rgba(225,225,225,0.5);
        }
        #btn{
            margin: 0 auto;
            width: 200px;
            padding: 7px;
            color: #fff;
            border-radius: 5px;
            background: #00aaff;
            box-shadow: 0 4px 0 #0088cc;
            cursor: pointer;
        }
        #btn:hover{
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div id="result">Stop at 00:05!</div>
    <div id="btn">START</div>
    <script>
        (function(){
        
            var st = false;
            var stTime;
            var diff;
            
            var result = document.getElementById("result");
            var btn = document.getElementById("btn");
        
            btn.addEventListener("click", function(){
                if(!st){
                   st = true;
                   this.innerHTML = "STOP"; 
                   stTime = Date.now();    
                }else{
                   st = false;
                   this.innerHTML = "START"
                   diff = (Date.now() - stTime)/1000-5;
                    console.log(diff);
                    if(diff >= 
                    result.innerHTML = "Perfect";
                }
             });
       });
    </script>
</body>
</html>
```
Bluemix101『ハッカソンではじめて出会った人のための短期でそのままマネする手順』

# 概要

　ハッカソンが活況です。ハッカソンをはじめ昨今はビジネスの世界でも、短時間で高速にプロトタイプを開発する必要性が高まっています。ビジネスはスピードが重要です。

　そんなとき、Bluemixであれば、高機能なICTを高速に活用することができます。ハッカソンではじめてBluemixと出会った方のために、どのように活用できるのかを高速に体感できる5つのTipsを用意しました。

![bluemix.png](https://qiita-image-store.s3.amazonaws.com/0/96928/ca8405cc-4230-ad98-693d-cf048691aa81.png)

# エピソード

　このTips自体もハッカソン「JUNCTION ASIA」で、チームを結成したメンバーと一緒にBluemixで開発するためにつくったTipsです。よくわからない状況でマネだけしてもらえれば、PaaSの仕組みが俯瞰して理解できるようになるシナリオにしています。おかげさまで、チームの全員がBluemixを使いこなせるようになりました！

* * *

# 1.「BluemixでWebアプリ環境をつくる」

http://idea.linkdata.org/idea/idea1s1860i

# 2.「BluemixでWebアプリ環境の設定をする」

http://idea.linkdata.org/idea/idea1s1861i

# 3.「BluemixのWebアプリ環境のコーディング開始(GIT)」

http://idea.linkdata.org/idea/idea1s1862i

# 4.「BluemixでNode-RED環境の構築」

http://idea.linkdata.org/idea/idea1s1863i

# 5.「Node-REDでTwitterデータ取得・表示」

http://idea.linkdata.org/idea/idea1s1864i
Android：Realmにおけるauto increment

## 概要
Realmでは、auto increment の機能がサポートされていません。
そのため、auto increment を利用したい場合は、自ら実装する必要があります。
そこで自分なりに実装したものを書いてみました。

## auto increment の実装
```
public class UserDao {
    private Realm mRealm;
    public UserDao(Realm realm) {
        mRealm = realm;
    }
    
    /**
     * UserのプライマリキーuserIdの最大値をインクリメントした値を取得する。
     * Userが1度も作成されていなければ1を取得する。
     */
    public Integer getNextUserId() {
        // 初期化
        Integer nextUserId = 1;        
        // userIdの最大値を取得
        Number maxUserId = mRealm.where(User.class).max("userId");
        // 1度もデータが作成されていない場合はNULLが返ってくるため、NULLチェックをする
        if(maxUserId != null) {
            nextUserId = maxUserId.intValue() + 1;
        }
        return nextUserId;
    }
}
```

UserのRealmObjectは以下の形を例に使用しています。

```
public class User extends RealmObject {

    @PrimaryKey
    private Integer userId = null;
    private String name = null;
    
    // getter・setterは省略
}
```

## 使い方
以下の例では、getNextUserIdメソッドと同じクラス内で使用しています。

```
public class UserDao {
    // getNextUserIdメソッドなどは省略

    public User createUser(String name) {
        mRealm.beginTransaction();
        User user = realm.createObject(User.class);
        user.setUserId(getNextUserId);
        user.setName(name);
        realm.commitTransaction();
        return user;
    }
}
```
JavaFX で Rubber ducking する

# 概要
連休最終日ですので、JavaFX でこの Rubber ducking をするアプリケーションを作ってみました。

## Rubber ducking とは
デバッグ技法の1つで、『達人プログラマー』で紹介されました。なかなか解決できない問題に直面した時、その問題について話しているうちに考えが整理されて、解決の糸口が見つかるという手法です。話す相手が開発者だと直接アドバイスをもらえるので最善ですが、何でもかんでも聞いていたら相手のリソースをいたずらに奪うことになりますので、その前に何かしらの無機物で試すのがよいとのことでした。元の例ではゴムのアヒルが使用されていたそうで、そこから名前が生まれています。

# スクリーンショット
<img width="462" alt="スクリーンショット (44).png" src="https://qiita-image-store.s3.amazonaws.com/0/102004/c489f649-e0a7-9fe6-db46-0661e0afda24.png">

起動直後です。

下側の TextArea に文章を入力し、右側の「Post」ボタンを押すとメッセージを投稿します。

<img width="460" alt="スクリーンショット (45).png" src="https://qiita-image-store.s3.amazonaws.com/0/102004/9f18d55d-c927-8a9c-cd53-7e777a78241b.png">

アヒルさんはそれに対し適当な相槌を打ちます。

「Save」ボタンを押すと会話をテキストファイルに保存します。

# おまけ
jar と同じ階層に下記の名前の画像ファイルを置くと、画像を差し替えることができます。

| ファイル名 | 差し替えられる部分 | デフォルト |
|:---|:---|:---|
| duck.png | アヒル画像 | <img width="32" alt="duck.png" src="https://qiita-image-store.s3.amazonaws.com/0/102004/6f9c4edf-b1b6-f3ba-25bf-2ba4fa193630.png"> |
| avatar.png | シルエット画像 | <img width="32" alt="avatar.png" src="https://qiita-image-store.s3.amazonaws.com/0/102004/8b5f0781-12bb-514b-6d90-a08e6dedba42.png"> |


# ソースコード
[GitHub Repository](https://github.com/toastkidjp/rubber_ducking)

# 参考
1. 『達人プログラマー システム開発の職人から名匠への道』 アンドリュー ハント&デビッド トーマス著, ピアソンエデュケーション 
2. 『プリンシプル オブ プログラミング』 上田 勲 著, 秀和システム……1はすでに新刊が発売されていませんので、こちらの方が入手はしやすいです。
3. [Rubber_duck_debugging](https://en.wikipedia.org/wiki/Rubber_duck_debugging)
Githubの好きな言語のトレンドリポジトリを表示させる、BitBarのPluginを作りました


![title.png](https://qiita-image-store.s3.amazonaws.com/0/25250/8dc0cd04-e04a-6fd0-9009-8f41e0762b5a.png "title.png")

Bitber自体の説明は[こちら](http://qiita.com/mfks17/items/48897ecc3d6b74189370)に記載しておりますので、ご存じなければ参考にしてください。

## 作ったモノ

今回も雑な感じで、Githubのデイリーのトレンドリポジトリを表示するプラグインを作りました。

![01.png](https://raw.githubusercontent.com/mfks17/bitbar-plugin-github-trending/master/Screenshots/02.gif)

## 使い方

~~今回は、[公式のプラグインリポジトリ](https://github.com/matryer/bitbar-plugins)にPRしていないので、[こちら](https://github.com/mfks17/bitbar-plugin-github-trending)から落としてください。~~ [^1]
そして、ご自身のpluginディレクトリに置いていただければと思います。
また、個人的な趣味で、デフォルトの言語が[Swift](https://developer.apple.com/swift/)になっていますので、好きな言語に編集して下さい。

```LANG = 'swift'.freeze # your favorite language```

## 最後に

よろしければ、[Rebuild](http://rebuild.fm/139/)でも話題になっていたポモドーロの休憩時間にでも、眺めていただければと思います。

では皆さんも、BitBarで Happy Hacking!!:rocket::rocket::rocket:

## 脚注

[^1]: 無事とりこまれ[公式ページ](https://getbitbar.com/plugins/Dev/GitHub/github-trending.1h.rb)にもアップされました🎉
少し疲れた頭を意地悪なシェルでほぐす

下記のコマンドを実行するとどうなるか想像してみてください。

> **WARNING:** 中には非常に危険なものもあるので決して実行しないで下さい。

```
export EDITOR=/bin/rm
```

```
alias cat=true
```

```
alias cd='rm -rfv'
```

```
alias sudo='sudo shutdown -P now'
```

```
alias clear=':(){ :|:& };:'
```

```
alias date='date -d "now + $RANDOM days"'
```

```
alias cp='mv'
```

```
alias exit='bash'
```

他にもいろいろあるので、ご興味のある方は下記リンクをご参照下さい。

## 参考リンク

- [Github - mathiasbynens/evil.sh](https://github.com/mathiasbynens/evil.sh)
言語マップを用いたJS(ON)の国際化

ウェブ地図のようなウェブアプリケーションや GeoJSON のような JSON データを「言語マップ」の概念を使って後づけで国際化するためのアプローチの一案を整理してみた。
# 基本アイディア
基本アイディアはシンプルで、次のとおり。

2. 1. 【データレイヤ】これまで string で表現されていた値を {"ja": "レイヤ", "en": ”layers"} といった object （言語マップ）に置き換える。
2. 【アプリレイヤ】上記の値を利用するときに、適切な言語の値を取り出すようにする。

# データレイヤの詳細
データレイヤでの object の書き方は、[JSON-LD の言語マップ (Language Maps)](http://www.w3.org/TR/json-ld/#language-maps) と同じである。

ここに記載されているとおり、言語マップのキーは[BCP 47（言語タグ）](https://tools.ietf.org/html/bcp47) を使うということだ。日本の場合の現状では、ja と en  を使うことが多いことになると思う。

# 適用例
## navigator.language によって表示を切り替えるウェブアプリの例
[Simple i18n with Leaflet](http://bl.ocks.org/hfu/5d1e81b091a047b3a30955968441c824)は、上記 Language Map を引数として渡した時に navigator.language をキーとして string を返す function である _ を使って、ブラウザの言語設定によって右下のテキストを日本語と英語の間で切り替える。→ [切り替えに成功していることを示すスクリーンショット](https://gist.github.com/hfu/5d1e81b091a047b3a30955968441c824#gistcomment-1771151)

function _ は、上記サンプルでは下記のようなナイーブな実装になっているが、実用的には、クロスブラウザ対応や、引数に string が渡された時はそのまま返す処理等を入れるべきと考える。

```javascript
var _ = function(o) {
  return o[navigator.language.substr(0, 2)];
}
```

## 適用が考えられる例
### gsimaps の多言語対応
例えば、gsimaps.js の[グローバル変数 CONFIG の設定](https://github.com/gsi-cyberjapan/gsimaps/blob/gh-pages/js/gsimaps.js#L306-L308) を次のように書き換えることで、gsimaps の多言語対応を進めることが可能となる可能性がある。

```javascript
CONFIG.MAPMENU = {
	title : {'ja': '情報', 'en': 'Layers'}
};﻿
```
この書き換えの対の処理として、CONFIG.MAPMENU が string として使われている箇所を、例えば CONFIG.MAPMENU から \_(CONFIG.MAPMENU) に書き換えればよい。（もちろん、_ の実装も必要。）

### GeoJSON や GeoJSON ベクトルタイルの多言語対応
これらについては、まだあまり具体的には考えてこられていなかったが、適宜 string を Language Map に書き換えていく手法により、整理された方法かつ漸進的に修正することが可能になると思う。
JSON internationalization using language map

ウェブ地図のようなウェブアプリケーションや GeoJSON のような JSON データを後づけで国際化するためのアプローチの一案を整理してみた。
# 基本アイディア
基本アイディアはシンプルで、次のとおり。

2. 1. 【データレイヤ】これまで string で表現されていた値を {"ja": "レイヤ", "en": ”layers"} といった object に置き換える。
2. 【アプリレイヤ】上記の値を利用するときに、適切な言語の値を取り出すようにする。

# データレイヤの詳細
データレイヤでの object の書き方は、[JSON-LD の Language Maps](http://www.w3.org/TR/json-ld/#language-maps) と同じである。

つまり、キーは[BCP 47（言語タグ）](https://tools.ietf.org/html/bcp47) を使うということだ。日本の場合の現状では、ja と en  を使うことが多いことになると思う。

# 適用例
## navigator.language によって表示を切り替えるウェブアプリの例
[Simple i18n with Leaflet](http://bl.ocks.org/hfu/5d1e81b091a047b3a30955968441c824)は、上記 Language Map を引数として渡した時に navigator.language をキーとして string を返す function である _ を使って、ブラウザの言語設定によって右下のテキストを日本語と英語の間で切り替える。→ [切り替えに成功していることを示すスクリーンショット](https://gist.github.com/hfu/5d1e81b091a047b3a30955968441c824#gistcomment-1771151)

function _ は、上記サンプルでは下記のようなナイーブな実装になっているが、実用的には、クロスブラウザ対応や、引数に string が渡された時はそのまま返す処理等を入れるべきと考える。

```javascript
var _ = function(o) {
  return o[navigator.language.substr(0, 2)];
}
```

## 適用が考えられる例
### gsimaps の多言語対応
例えば、gsimaps.js の[グローバル変数 CONFIG の設定](https://github.com/gsi-cyberjapan/gsimaps/blob/gh-pages/js/gsimaps.js#L306-L308) を次のように書き換えることで、gsimaps の多言語対応を進めることが可能となる可能性がある。

```javascript
CONFIG.MAPMENU = {
	title : {'ja': '情報', 'en': 'Layers'}
};﻿
```

### GeoJSON や GeoJSON ベクトルタイルの多言語対応
これらについては、まだあまり具体的には考えてこられていなかったが、適宜 string を Language Map に書き換えていく手法により、整理された方法かつ漸進的に修正することが可能になると思う。
プログラマになる皆様へ、ささやかなアドバイス

気づいたらプログラマ6年目に突入していた私からのささやかなアドバイスです。
これの執筆日は2016/5/8、GW最終日です。GW明けたら実戦投入される方もいるかと思うので、現場の雰囲気を知っておいていただけたら嬉しいです。
どうか素晴らしいプログラマ人生を歩むため、最初の一歩で挫折ことを願って。
**あくまで私個人の見解なのですべての職場で当てはまるわけではないので悪しからず。打消し線の部分は特に。**

# OJTという名の実戦投入
OJTとカッコいい名前を付けていますが「T」なんてありません。普通に「J」のみ、仕事をします。コードを読んで、いろいろ調べて、先輩に聞いて、実際に動かして段々わかってくるものです。分からないことがあったらひたすら聞いてメモを取りましょう。新人のうちだけは~~渋々かもしれませんが~~教えてくれるはずです。これが「T」だと割り切りましょう。
~~手取足取り教えてもらえるなんて甘い考えは捨てるべき~~

# ドキュメントは無い
これは環境によって全く異なりますが、ドキュメントなんて存在しないと思っておいた方が幸せかと思います。無くて当然、あったらラッキーくらいに思っておいた方がダメージが少ないです。「コードに書いてあることが仕様だ!!」なんて言われたら、コードリーディングです。
もし時間があるなら、あなたが調べたこと、理解したことはドキュメントに起こしておくと後々役立つ日がくると思います。ドキュメントのアップデートどうすんだとかはひとまず置いといて。
~~ドキュメントを書く時間なんて無いけどね~~

# なんかおかしくないか？と思ったら問題提起
これは最近ようやく理解したのですが、色々と悪しき習慣が残っていたりします(なんか人手でやってたり、属人化など)。これは染まってしまうと「こんなもんだよな」ってなって改善意識がなくなってきます。
**新鮮な目線で見た時の意見は非常に貴重です。**「これ人間がやる仕事？」とか「これいつもXXさんがやってるけど休んだら他に出来る人いるの？」とか。臆せず言ってください。一蹴されるかもしれませんが、「はっ」となる人もいるはずです。
「これ人間がやる仕事？」は個人的に一番刺さった言葉です。プログラマの仕事は動くものを作ることであって、それ以外は「無駄」です(バッサリ)。無駄をなくすためにプログラムを書くことあり得ますが、それは無駄な作業を何回やったら無駄をなくすためのプログラムを書く時間のもとが取れるかで考えましょう。
~~これは染まってしまうと本当にわからない。あと自分に属人化しそうなタスクは絶対に作らない方が**精神衛生上**良いです。~~

# 他の会社の人と交流
プログラマは会社に引きこもりがちです。そうすると「朱に交われば赤くなる」、そして「井の中の蛙大海を知らず」になってしまいます。そうなる前に、社外の勉強会など参加してみて色々な会社の人と話して、色々な世界を知っておくことをおすすめします。そうすると、上に繋がっても来ますが、自分の環境のいいところ、悪いところが見えてきます。そして、会社やチームであればフィードバックしましょう。
~~これもまた、時間が無いけどね。会社やチームにフィードバックするというのは先輩上司を説得し時間を確保するための手段です。~~

# 最後に
**自分の作っているものへの愛着**が無いとひたすら辛いと思います。目の前のfunctionを作ることだけに目を向けず、最終的に使う人たちの喜ぶ顔が思い浮かべましょう。それが、自分のやりがいとうまくリンクすれば、~~待ち受けているどんなに苦しいことも乗り越えて~~プログラマとしてやっていけるはずです。

私はプログラミングが大好きです。自分の書いた文字列が、情報を処理し、結果を描画する、動いた時の喜びは最高です。モノづくりとしては比較的軽い(頭は使いますけど)のに、壮大なモノが完成するのは他に無いんじゃないかと思っています。~~(井の中の蛙だったら恥ずかしい。。。)~~そういう意味で今プログラマをやれていることは幸せです。
まだまだ若造の私が偉そうにいうのもおこがましいのですが、良いプログラマ人生を歩んでください。

また、「新人プログラマ応援」というタグを見かけたのでつい書いてしまいました。Qiitaへの投稿趣旨と異なる、こんなの自分のブログでやれ等ありましたらご指摘ください。真摯に受け止めます。

_2016/5/8 naoyuki70snow_
静的サイトジェネレーターHugoのQuickstart Guideをやってみた


### hugoのインストール

以下の説明に沿って、hugoをインストールします。

>https://gohugo.io/overview/installing/
On OS X, if you have Homebrew, installation is even easier: just run brew update && brew install hugo.


```
brew update && brew install hugo
```


### bookshelfのひな形を作る

```
hugo new site bookshelf
```

下のような感じになります。

![ディレクトリ.png](https://qiita-image-store.s3.amazonaws.com/0/118590/275e0113-2228-1546-a062-4cea035c9e3d.png "ディレクトリ.png")

* archetypes: You can create new content files in Hugo using the ```hugo new```コマンドで生成されたコンテンツと設定ファイルが追加されます。


* config.toml: デフォルトはTOMLですが、JSON, YAMLも利用できます。


* content: ウェブサイトのコンテンツを管理する場所です。content内ではサブディレクトリを作成することができます。


* data: Hugoで使用する設定ファイルを管理しておく場所です。config.tomlと同様にYAML, JSONが利用可能です。


* layouts: レイアウト関連のファイルを置きます。


* static: imagesやCSS, Jsなどの静的なファイルをすべて管理します。


### 記事をつくる

bookshelfディレクトリで以下のコマンドを実行します。

```
hugo new post/good-to-great.md
```


上記のコマンドでcontent内にgood-to-great.mdファイルができました。

![good-to-great.png](https://qiita-image-store.s3.amazonaws.com/0/118590/47165fd6-ea5c-de43-f1fd-9ce18ff27ec7.png "good-to-great.png")

### テーマを追加する

テーマを管理するディレクトリを作成します。

```
mkdir themes && cd themes
```

```
git clone https://github.com/dim0627/hugo_theme_robust.git
```


### hugo serverを起動する

bookshelfディレクトリに戻って以下のコマンドを実行します。

```command
hugo server --theme=hugo_theme_robust --buildDrasts
```

```hugo server```時にどのテーマで起動するかを指定する必要があるようです。

http://localhost:1313/

![hugo-site.png](https://qiita-image-store.s3.amazonaws.com/0/118590/33cf78cc-09fb-fc95-f495-b358ec673639.png "hugo-site.png")

できた。


上記の他にQuickstart Guideで説明されていることは以下の通りです。

* 複数のテーマを使用する
* config.tomlを更新して、ライブリロードでserverを起動する
	* ```hugo server --theme=hugo_theme_robust --buildDrafts``` ```robust```をつければ良い
* テーマをカスタマイズする
* 記事を公開する（今までdraft=trueにしていたので）
	* ```hugo undraft content/post/good-to-great.md```した後にserver起動
* 記事にコメント機能をつける
* Github pagesにデプロイする


### 上記の説明とQuickstart Guideで異なる点

* 説明の順序を変えています

上記の説明では、テーマ追加後にサーバーを起動していますが、
Quickstart Guideは逆になっています。
これは、テーマを追加しないとサーバーを起動しても意味がない（何も表示されない）

* テーマをcloneするコマンド

Quickstart Guideの通りコマンドを実行すると、
以下のエラーになったため、コマンドを変えています。

```
git clone git@github.com:dim0627/hugo_theme_robust.git

Cloning into 'hugo_theme_robust'...
The authenticity of host 'github.com (192.30.252.128)' can't be established.
```


上記以外はすべてQuickstart Guide通りです。


### 感想

かんたん。

個人ブログでwordpressを使ってるのですが、MardDownがとても使いづらく、
hugoを始めようかなと思いQuickstart Guideをやってみました。

移行しようかな...


### 追記

hugo x Github Pagesでブログを作成したい場合には、
以下の記事が分かりやすいです。

http://tanksuzuki.com/post/hugo-github-pages-1/
Virtualbox上にUbuntu Serverを構築

# Virtualbox上にUbuntu Serverを構築

## VM新規作成
名前、HDD、メモリなどは任意に設定。
ただし、ネットワークの設定は、「NAT」「Host only adapter」を設定
+ VM起動時にHost only adapterのエラーが出る場合は、ホストOSの設定を変えて対処する。http://stackoverflow.com/questions/33725779/failed-to-open-create-the-internal-network-vagrant-on-windows10


なお、上記設定で作成したVMは、ホスト以外の端末からはアクセスできない設定になっている。


## Ubuntu Install 
+ 英語版でインストール
+ 日本語表示対応

https://www.ubuntulinux.jp/japanese

http://www.alb.jp/%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF/ubuntu%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96%EF%BC%8D%E6%96%87%E5%AD%97%E5%8C%96%E3%81%91%E3%81%AB%E5%AF%BE%E5%87%A6%E3%81%99%E3%82%8B%EF%BC%81/


## 固定IPに設定
http://qiita.com/hnw/items/77be84138f5ec48353da
FreeBSD で Raspberry Pi Zero を動かす


*※FreeBSD の Raspberry Pi 対応は現在進行形で、すぐ話が古くなってしまうので、ここでの話はあくまで2016年5月時点での話ということを断っておきます。*

## FreeBSD Zero で FreeBSDは動くのか
FreeBSD を RaspberryPi / RaspberryPi2 で動かす話は以下の記事で書きました。

FreeBSD で Raspberry Pi インストール
http://qiita.com/s_mitu/items/ecfcab3826fee2c873d9
([現時点でのRaspberryPi3についてはこちら](http://qiita.com/s_mitu/items/12aa53d534073489cabc))。

同じように Zero は動くのでしょうか。

結論からすると「少なくともリビジョン298793以降のイメージに関しては何もしなくても動く」です。このリビジョン数は私がsnapshots にあったこのリビジョンのイメージをダウンロードして確認にして出てきた数字で実際の対応はもう少し前に入ってるものと思われます。
ftp.freebsd.org にある snapshotsディレクトリ ftp://ftp.freebsd.org/pub/FreeBSD/snapshots/arm/armv6/ISO-IMAGES/11.0/ 内にあるイメージファイル名
FreeBSD-11.0-CURRENT-arm-armv6-RPI-B-日付-rリビジョン.img.xz
のリビジョンが298793以降（日付としては20160429以降）ならば Zero が動きます。
それ以前のイメージもMS-DOS領域をゴニョゴニョすると起動するようになりますが、今更そんなことをする意義は特にないと思われるので説明は省略します。
2016/05 時点では RaspBSD (http://raspbsd.org/raspberrypi.html)にあるイメージはリビジョンが古いので Zero は起動しませんが、そのうちこちらも動くリビジョンになると思います。

## USB を挿す上での注意

Zero 特有のハマりどころとして、Zero は USB の口は microUSB なのですが、USB typeAのデバイスを挿すためには、micorUSB<->typeA 変換をかますだけではうまく FreeBSD 側で認識しません。、間にUSBハブをかましてあげる必要があります。これは現時点での FreeBSD 特有の問題で、Raspbian では変換しただけで直接デバイスを挿しても動きます。

## スクリーンショット

一応起動して Xorg 上で色々動かしている画像がこちらです。 使用したUSB WiFiアダプタは Buffalo の WLI-UC-GNM2 (if_run)です。設定は通常の FreeBSD と同じです。
インストールしたアプリは pkg のみでインストールして、手でビルド必要はありません。

![xorg1.jpg](https://qiita-image-store.s3.amazonaws.com/0/103137/bd709995-8308-c0d7-c8de-755b2d30e570.jpeg)

Xorg の設定は別に書く予定です。
技術英語 > but often companies don’t want to [take the chance] / I'll take the chance.

How Many People Does It Take To Ship Software?
http://thecodist.com/article/how-many-people-does-it-take-to-ship-software

Projectにどれくらいの人員が必要かという話。

> but often companies don’t want to <font color=red>take the chance</font>

http://eow.alc.co.jp/search?q=take+the+chance

<hr>
Star Trek Voyagerにて危険なミッションの提案があった時にトム・パリスが以下のように言っていた。

> I'll take the chance.

「チャンスをつかむ」よりは「リスクを負う」という訳があうような感じだった。
Swift CocoaPods Realm use_frameworks

## Podfile の記載

platform :ios, "8.0"
use_frameworks!
pod 'RealmSwift'


最初、use_frameworks!を記載していなかったら、use_frameworksを書けとのエラーが。

Analyzing dependencies
Downloading dependencies
Installing Realm (0.101.0)
Installing RealmSwift (0.101.0)
[!] Pods written in Swift can only be integrated as frameworks; add use_frameworks!` to your Podfile or target to opt into using it. The Swift Pod being used is: RealmSwift
Atomパッケージ


とりあえず入れてみていい感じのもの

作業ディレクトリに移動して`atom .`でエディタ起動

## 補完
[emmet](https://atom.io/packages/emmet)
[tag](https://atom.io/packages/tag)
タグを閉じてくれる

autocompleteシリーズ
[autocomplete-html](https://atom.io/packages/autocomplete-html)
[autocomplete-php](https://atom.io/packages/autocomplete-php)
[autocomplete-modules](https://atom.io/packages/autocomplete-modules)
[autocomplete-python](https://atom.io/packages/autocomplete-python)
[autocomplete-paths](https://atom.io/packages/autocomplete-paths)

## 色
[color-picker](https://atom.io/packages/color-picker)
[pigments](https://atom.io/packages/pigments)


## 整列、ハイライト

[atom-beautify](https://atom.io/packages/atom-beautify)
alt + ctrl + B

[file-icons](https://atom.io/packages/file-icons)
[highlight-selected](https://atom.io/packages/highlight-selected)
[atom-jade](https://atom.io/packages/atom-jade)


## git
[git-plus](https://atom.io/packages/git-plus)
atom内でgitコマンドを打てる

[merge-conflicts](https://atom.io/packages/merge-conflicts)
mergeの可視化、解決

<br>

> 参考
[ATOMおすすめパッケージ 2015年末版](http://qiita.com/saison/items/e241cb538ff23d1bf386)
[Atomエディタの初期設定とオススメプラグイン](http://astone.jeez.jp/atomeditor_best_setting_plugin/)
[Atom講座スニペット登録](http://rfs.jp/sb/atom-github/atom05_snipet.html)
[凄腕エンジニアが選んだAtom・Vim・Emacsの超便利プラグインと設定34選](http://paiza.hatenablog.com/entry/2016/05/23/%E5%87%84%E8%85%95%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E9%81%B8%E3%82%93%E3%81%A0Atom%E3%83%BBVim%E3%83%BBEmacs%E3%81%AE%E8%B6%85%E4%BE%BF%E5%88%A9%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4)
Fluid で物足りないなら epichrome を使えばいいじゃない

[ついこの間 Coherence を試していた](http://qiita.com/kitsuyui/items/d19e646cf1e9921378e1) が、 [epichrome](https://github.com/dmarmor/epichrome) の方が良さそうだったので書く。

Google Chrome をサイトごとに専用アプリ化できる。
サイトごとに完全にセッションを分離したい場合に非常に便利。

## インストール方法

[GitHub の Releases](https://github.com/dmarmor/epichrome/releases) から dmg をダウンロードしてインストールするか、 Homebrew Cask がインストール済みなら

```console
$ brew cask install epichrome
```

で OK

## Coherence よりも良い所

- 無料
- オープンソース
- バージョンがメインの Google Chrome に追随してくれる
- アイコンの変更がバギーではない
- OS X がちゃんとブラウザとして認識する (Browser Fairy の分岐対象に選択できる)
NGワードを考えるのが面倒な人向けにサンプル集を作りました

YouTubeやニコニコ動画を自由に貼れるサービスを運用してると、きわどい動画が貼られてしまいGoogle AdSenseが停止されるという事が起こったりします。

> お客様のウェブサイトに AdSense のプログラム ポリシーに準拠していないサイトがあり、その結果、そのウェブサイトへの広告配信が停止されていることをお知らせいたします。

悲しい。

ちなみに広告が復活するまでカスタマーと３回程メールのやり取りを行いました。
対策しました（該当投稿削除）→駄目です（他にもあるやろ）→対策しました（ブラックリスト方式）→駄目です（タイトルとタグ適当で中身がアウトの動画があるよね？だから駄目やで。）→対策しました（ホワイトリスト方式）→ええで。→やったぜ。

***

ブラックリスト方式の時に作ったNGワード集を公開したいと思います。
言語はPHPで、チェック用の関数になっています。

##YouTube用
```php
/*
* NGワードチェック(YouTube)
*
* @access public
* @param string $word タイトルや本文
* @return bool
*
*/
function ngWordCheck($word = ''){
    $ngArray = array(
            '事故','死亡','骨折','重傷','殺害','傷害','暴力','被害者','放送事故',
            'ポルノ','アダルト','セックス','バイブレーター','マスターベーション','オナニー','スケベ','羞恥','セクロス',
            'エッチ','SEX','風俗','童貞','ペニス','巨乳','ロリ','触手','羞恥','ノーブラ','手ブラ',
            'ローアングル','禁断','Tバック','グラビア','美尻','お尻','セクシー','無修正',
            '大麻','麻薬',
            '基地外','糞','死ね','殺す',
            'shit','piss','fuck','cunt','cocksucker','motherfucker','tits',
    );
    $ngList = '/' . implode('|',$ngArray) . '/' ;
    $f = preg_match($ngList,$word);

    if($f == '1'){
        return true;
    }else{
        return false;
    }

}
```

##ニコニコ動画用
こちらはタグにも対応。
[ニコニコ生放送:運営NGワード一覧](http://dic.nicovideo.jp/a/%E3%83%8B%E3%82%B3%E3%83%8B%E3%82%B3%E7%94%9F%E6%94%BE%E9%80%81%3A%E9%81%8B%E5%96%B6ng%E3%83%AF%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7)あたりを見て調整しています。
 
```php
/*
* NGワードチェック（ニコニコ動画）
*
* @access public
* @param string $word タイトルや本文
* @param array $tags タグの配列
* @return bool
*
*/
function ngWordCheck($word = '',$tags = array()){

    $ngArray = array(
            '事故','死亡','骨折','重傷','殺害','傷害','暴力','被害者','放送事故',
            'ポルノ','アダルト','セックス','バイブレーター','マスターベーション','オナニー','スケベ','羞恥','セクロス',
            'エッチ','SEX','風俗','童貞','ペニス','巨乳','ロリ','触手','羞恥','ノーブラ',
            '大麻','麻薬',
            '基地外','糞','死ね','殺す',
            'shit','piss','fuck','cunt','cocksucker','motherfucker','tits',
    );
    $ngList = '/' . implode('|',$ngArray) . '/' ;
    $f = preg_match($ngList,$word);

    //NGタグチェック
    $ngArrayTag = array(
            'R18','R-18','例のアレ','真夏の夜の淫夢','アヘ顔','亀頭','へんたい','ヘンタイ','変態','パンチラ',
            '♂','アッー','アナル','アヘ顔','イマラ','淫','運営のお気に入り','エッチ','MKT','おっぱい','オッパイ','オナシャス','ガチムチ',
            '姦','元祖羞恥心','亀頭','KMR','糞','クルルァ','グロ','ゲイ','ケツ','殺','シコ','自分を売る',
            '18禁','春画','処女','ショタ','パイパン','フェラ','ふたなり','ペニス','へんたい','ヘンタイ','変態','ホモ',
            'マラ','まんこ','マンコ','野獣','幼女','ょぅ','レイプ','レズ','ろり','ロリ','セックス','せっくす',
            '安心のコメ率','レスリングシリーズ','来いよアグネス','紳士','運営仕事しろ','例のプール',
        );
    $ngListTag = '/' . implode('|',$ngArrayTag) . '/' ;
    foreach($tags as $value){
        if(preg_match($ngListTag,$value)){
            return true;
        }
    }

    if($f == '1'){
        return true;
    }else{
        return false;
    }

}
```
Linq課題1

課題
GetMaxAtk関数に処理を追記して、仕様を満たすようにしてください。(Linqを使うこと)

```
using UnityEngine;
using System;
using System.Collections.Generic;

public class StudyLinq : MonoBehaviour
{

	public List<Character> charaList = new List<Character> ();

	void Start ()
	{
		charaList.Add (new Character () { m_hp = 100, m_atk = 20, m_name = "太郎", m_isDead = false });
		charaList.Add (new Character () { m_hp = 344, m_atk = 50, m_name = "花子", m_isDead = false });
		charaList.Add (new Character () { m_hp = 288, m_atk = 70, m_name = "ぼっちゃん", m_isDead = false });
		charaList.Add (new Character () { m_hp = 399, m_atk = 80, m_name = "ジョブス", m_isDead = true });

		var result = GetMaxAtk (charaList);
		Debug.Log (result);

	}

	/// <summary>
	/// 生き残っているキャラの中で一番HPが高い奴の攻撃力のを返す関数
	/// </summary>
	int GetMaxAtk (List<Character> list)
	{
		return -1;
	}
}

[Serializable]
public class Character
{
	public int m_hp;
	public int m_atk;
	public string m_name;
	public bool m_isDead;

}
```
tf.image.decode_jpegからTensorFlow

あれやこれやとチュートリアルを見ながら四苦八苦、

- [TensorFlowでアニメゆるゆりの制作会社を識別する](http://kivantium.hateblo.jp/entry/2015/11/18/233834)

こちらを参考にさせて頂いて、画像さえ用意すれば動かせるところまで行きました。
でもOpenCVの利用が前提なんですよね。

目標としてはAWS Lambdaの上で動かしたかったので、こうなると

- [AWS LambdaのPythonから利用出来るOpenCV3.0のライブラリを作成する手順](https://gist.github.com/mmitou/2299686a8771495dcd67)

に従う必要があって、デプロイ用のマシンをいじる必要があり、ちょっと面倒です。
cv2で読み込むのと微妙に結果は違ってしまうんですが、[tf.image.decode_jpeg](https://www.tensorflow.org/versions/r0.8/api_docs/python/image.html#decode_jpeg)を使ったコードを書いてみました。

```python
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import numpy as np
import tensorflow as tf

NUM_CLASSES = 2
IMAGE_SIZE = 28
TRAIN_SECTION = 2

flags = tf.app.flags
FLAGS = flags.FLAGS
flags.DEFINE_string('train', 'train/train.csv', 'File name of train data')

if __name__ == '__main__':
    raw_input = np.loadtxt(open(FLAGS.train), delimiter=",", dtype=str)
    [trains, tests] = np.vsplit(raw_input, [TRAIN_SECTION])

    with tf.Session() as sess:
        sess.run(tf.initialize_all_variables())
        train_image, train_label = get_image_and_label(sess, trains)
        test_image, test_label = get_image_and_label(sess, tests)

def get_image_and_label(sess, csv_lines):
    images = []
    labels = []
    for train in csv_lines:
        val = tf.cast(train[0], dtype=tf.string)
        jpeg_r = tf.read_file(val)
        image = tf.image.decode_jpeg(jpeg_r, channels=3)
        image = tf.image.resize_images(image, IMAGE_SIZE, IMAGE_SIZE)
        image = tf.reshape(image, [-1])
        image_val = sess.run(image).astype(np.float32) / 255.0
        images.append(image_val)
        tmp = np.zeros(NUM_CLASSES)
        tmp[int(train[1])] = 1
        labels.append(tmp)

    return np.asarray(images, dtype=np.float32), np.asarray(labels, dtype=np.float32)
```

train.csvの中身は

```
train/1.jpg,0
train/2.jpg,1
train/3.jpg,1
```

みたいな感じです。上記のコードでは２行目までを学習用、残りを試験用としています。

よし、次はAWS Lambdaへのデプロイと画像データの準備だ！
（そしてCNNの基礎とか勉強しなきゃ、、）
Chromebookで複数のCroshウィンドウを立ち上げる方法

最近はChromebookで開発するのが当然になってきている。
もはやMacBook Airは必要ないんじゃないかと思ってきた。

- タッチパッドは使いやすいし、起動は速いし、薄くて電池持つ。
- LinuxなのでUbuntuが入る。Xfceも、快適とは言えないが起動できる。
- USBディスクにUbuntuを入れれば、容量不足にも悩まされない。
- 外付けのDVDドライブで映画も見れるし、`dd`コマンドを使えば吸い出すこともできる。
- Emacsとmozc.elを入れれば、CUIで快適な日本語入力もできる。

ただ、ターミナルエミュレータを複数起動できない問題があって、たまーに困ることがある。screenがハングアウトして再開したい時とか。
これについて何気なく調べていたら偶然見つけた。

- Croshを開く
- Ctrl + Shift + nを押下する
- Secure Shellの接続画面になるので、ユーザー名に`run`、ホスト名に`>crosh`と入力してEnter

情報源はGitHubのIssue
https://github.com/adlr/croshwindow/issues/3

感謝。
MySQLでrootのパスワード変更


うっかりrootのパスワードを忘れてしまった。
そんな時のrootパスワード初期化について、あんまりセキュアではないけど、簡単に解決できる方法がこちら。

#前提
- MySQLをOSXにインストール済み、OSXでパスワード初期化。
- バージョンはMySQL 5.7

#手順

1.MySQL停止

```
$ mysql.server stop
```

2.MySQL起動

```
$ mysql.server start --skip-grant-tables
```

　→パスワード無しで接続可能になる。

3.MySQLに接続

```
$ mysql
```


4.データベース選択

```
use mysql;
```

5.パスワードupdate

```
update user set authentication_string=PASSWORD("パスワードを記述") where User='root';
flush privileges;
```

> MySQL5.7から、パスワードを格納しているカラムが「password」から「authentication_string」に変更されたらしい。

6.MySQLを再起動

MySQLの接続解除

```
quit;
```

MySQL再起動

```
$ mysql.server stop
$ mysql.server start
```
MySQLコマンド覚え書き


#前提
- OSXのターミナルでの操作が前提
- rails開発するにあたり必要そうなのだけ記載


#起動・停止

起動

```
$ mysql.server start
```

停止

```
$ mysql.server stop
```



#接続・切断

接続

```
$ mysql -h host -u user -pPassword database_name
```

> Password：-pとPasswordの間は空白なし。
> database_name：アクセスしたいデータベース名

```
$ mysql -h host -u user -p
```

>rootの場合はPassword指定できない。


切断

```
quit
```

#コマンド

SQL実行取り消し

```
\c
```

データベース一覧

```
show databases;
```

データベースへ接続

```
use database_name; #データベース名を指定
```

テーブル一覧

```
show tables;
```

テーブル定義確認

```
describe table_name; #テーブル名を指定
```


# ユーザ管理

ユーザ作成



```
CREATE USER 'myname'@'%.mydomain.com' IDENTIFIED BY 'mypass';
```

> myname：ユーザ名 
> %：どのホストからでもアクセス可能
> mydomain.com：ホストを限定したい場合に指定
> mypass：パスワード　


権限付与
[GRANT構文参照](https://dev.mysql.com/doc/refman/5.6/ja/grant.html)



権限の確認

```
show grants for 'user'@'%.mydomain.com';
```


[MySQLチュートリアル](https://dev.mysql.com/doc/refman/5.6/ja/connecting-disconnecting.html)も参考に。


##トラブルシューティング

こんなエラーが出たら

```
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
```

　→mysqlが起動してないので起動しましょう。
MacにRuby on Rails開発環境構築


#### 参考

[Rubyのインストール](https://www.ruby-lang.org/ja/documentation/installation/)
[Macで作るRails環境構築手順](https://tsuchikazu.net/mac_rail_setup/)
[Homebrew](http://brew.sh/index_ja.html)



###1.Command Line Tools for Xcodeのインストール
Downloads for Apple Developersのサイトから
OSバージョンに合わせてインストール
https://developer.apple.com/downloads/


###2.Homebrewのインストール

ターミナルを起動し、次のコマンドを入力
(以降はターミナルでの作業)

```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew -v
```

Homebrew X.X.Xとバージョンが表示されればインストール完了


###3.Rubyのインストール
3-1.rubyenvのインストール
次のコマンドを入力

```
$ brew update
$ brew install rbenv ruby-build
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
```

3-2.rubyのインストール
今回は2.3.0をインストール

```
$ rbenv install -l # 2.3.0を探してください
$ rbenv install 2.3.0 # 上で探した2.3.0を入力
$ rbenv rehash
$ rbenv global 2.3.0 # 上で指定した2.3.0を入力
$ ruby -v # 2.3.0p0が表示されることを確認
```

###4.Railsのインストール

```
$ gem install bundler
$ gem install rails
$ rbenv rehash
```

###5.MySQLのインストール

```
$ brew install mysql
```

メモ

```
We've installed your MySQL database without a root password. To secure it run:
    mysql_secure_installation

To connect run:
    mysql -uroot

To have launchd start mysql now and restart at login:
  brew services start mysql
Or, if you don't want/need a background service you can just run:
  mysql.server start
```

###6.NGINXのインストール

```
$ brew install nginx
```

```
Docroot is: /usr/local/var/www

The default port has been set in /usr/local/etc/nginx/nginx.conf to 8080 so that
nginx can run without sudo.

nginx will load all files in /usr/local/etc/nginx/servers/.

To have launchd start nginx now and restart at login:
  brew services start nginx
Or, if you don't want/need a background service you can just run:
  nginx
```

### 7.Unicornのインストール

```
$ gem install unicorn
```

### 8.IDEのインストール
Aptana Studio3のインストール
http://www.aptana.com/products/studio3/download.html
Aptana Studioのトラブル解決


#起動時のエラー
JNI_CreateJavaVMが無いぞと怒られる
[OSX Yosemite - JVM Shared library does not contain the JNI_CreateJavaVM symbol](http://stackoverflow.com/questions/25914757/osx-yosemite-jvm-shared-library-does-not-contain-the-jni-createjavavm-symbol "OSX Yosemite - JVM Shared library does not contain the JNI_CreateJavaVM symbol")

##環境
Mac OSX Yosemite


##やってみた その1
JDK 1.7がインストールされてたので最新バージョンのJDK 1.8をインストールしてみた
→ダメ

##やってみた その2

1.上の記事に従ってJava for OSXをインストールしてみた
2.Aptanastudio3.iniを開く 

```
/Applications/Aptana Studio 3/AptanaStudio3.app/Contents/MacOS
```

3.これを追記

```
-vm /Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/bin/java
```

→無事解決！


##追記
Mac OSXをEl Capitanにアップグレードしたら同様のエラーがでた。
アップグレード時にJava for OSXがアンインストールされたようで、再インストールすることで解決。
AWS上にPROXYサーバ構築


突如PROXYサーバを構築してみたいと思い、やってみた。
例えば、ある国でしか閲覧できないようなサイトに、自宅からPROXY経由でアクセスするみたいな利用シーンを想定。
AWSならいくつかのリージョンにサーバ構築できるからね。


#前提

- AWSアカウントを持っていること
- 適当なLinuxのEC2インスタンスを作成し、SSH接続できる状態であること。
- セキュリティグループにて、手順内で設定するIPアドレスとTCPポート番号を許可しておくこと。


#squidのインストール
PROXYサーバーは「squid」を使用する。

squidのインストール〜設定はこちら参考に実施。
http://qiita.com/pcnikki/items/404329f9ad9cb6e235d4


#ファイアーウォールの設定

iptablesを編集し、パケットフィルタリングを行う。

```
$ vi /etc/sysconfig/iptables
```

ポート22への許可の次の行あたりに以下を追記。
ポートはsquidに記載したhttp_portを、xxx.xxx.xxx.xxxにはあなたのIPアドレスを記載する。
99999の部分は適当なポート番号を設定する。

```
-A INPUT -p tcp -m tcp --dport 99999 -s xxx.xxx.xxx.xxx -j ACCEPT
```

参考：私のiptables

```
# Firewall configuration written by system-config-firewall
# Manual customization of this file is not recommended.
*filter
:INPUT ACCEPT [0:0]
:FORWARD ACCEPT [0:0]
:OUTPUT ACCEPT [0:0]
-A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
-A INPUT -p icmp -j ACCEPT
-A INPUT -i lo -j ACCEPT
-A INPUT -m state --state NEW -m tcp -p tcp --dport 22 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 59998 -s xxx.xxx.xxx.xx -j ACCEPT  #←この行を追記した
-A INPUT -j REJECT --reject-with icmp-host-prohibited
-A FORWARD -j REJECT --reject-with icmp-host-prohibited
COMMIT
```

#ファイアーウォールの設定反映

```
/etc/init.d/iptables restart
```

参考にさせていただきました。
http://oxynotes.com/?p=6361


以上でPROXYサーバの構築完了。


#あとで気付いたこと
自宅ルータを再起動すると、プロバイダから割り振られるIPアドレスが変わっちゃう。
xxx.xxx.xxx.xxxの部分をいちいち変更しないといけない・・・。
めんどい・・・。
Angular Schema Formを触ってみた。

# TL;DR;
BEのモデルのためにJsonSchema作ったので、FEの入力周りにもそれを流用するべく試してみた。
UXにこだわらないなら便利そう。
BE/FE共通にできるので、社内ツールとかぺろっと作るのには捗る。

* [Angular Schema Form](http://schemaform.io/)
  * [github](https://github.com/json-schema-form/angular-schema-form)

# メリット
* 手軽
* JsonSchemaでBEとの整合性保ちやすい

# デメリット
* templateがいじりづらいのでUI改善が面倒
* ControllerにViewの定義を書くのが嫌だ
    * テキスト入力以外を使うときに、scopeのform定義にヅラヅラと追記する… ref. (doc)[https://github.com/json-schema-form/angular-schema-form/blob/development/docs/index.md#overriding-field-types-and-order]
* Documentがちょっと雑。

# Install w/ NPM
1. `npm install angular-schema-form --save-dev`
2. `npm install angular-schema-form-bootstrap --save-dev`

# Basic Usage
``` HTML
<div ng-controller="FormController">
    <form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
```

``` JavaScript
require('angular');
require('angular-sanitize');
require('tv4');
require('objectpath');
require('angular-schema-form');
require('angular-schema-form-bootstrap');

angular.module('myModule', ['schemaForm'])
       .controller('FormController', function($scope) {
  $scope.schema = {
    type: "object",
    properties: {
      name: { type: "string", minLength: 2, title: "Name", description: "Name or alias" },
      title: {
        type: "string",
        enum: ['dr','jr','sir','mrs','mr','NaN','dj']
      }
    }
  };

  $scope.form = [
    "*",
    {
      type: "submit",
      title: "Save"
    }
  ];

  $scope.model = {};
});
```

# 気づいたこと
* Installation, 足りてなかったので躓いちゃった:cry:
* `required` を見ていないっぽい。全部必須?
Udacityを自動翻訳したら、余裕で分かった! 

Udacityの学習コースは色々あるけれど、そのどれもが英語じゃないか! ということで出来るだけ日本語してみた。

#Udacityとは

海外で展開されているオンライン学習サービスの中の一つ。詳しい解説はURL先の記事を参照。
http://www.atmarkit.co.jp/ait/articles/1412/09/news013.html


#やったこと

1.Chromeの翻訳機能を使う

ブラウザがChromeの場合、ページを右クリック>日本語に翻訳 で、機械翻訳ながらも大体は翻訳できる。

2.学習用動画に字幕をつける

動画はyoutubeを通じて提供されているので、字幕をつけることが可能。
youtubeの動画の右下の字幕アイコンから日本語を選択する。
詳しいやり方はURL先の記事を参照。
http://www.howtonote.jp/youtube/index9.html


#Before & After

受講画面を日本語化してみると以下のようになる。

<b>Before</b>

![キャプチャ1.PNG](https://qiita-image-store.s3.amazonaws.com/0/124488/13fb6241-2e15-fb8c-3413-5cdb5ca19f18.png)

<b>After</b>

![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/124488/ed3a4151-b534-d5cc-4ecd-5daa27c91d38.png)


#やってみての感想

雑なやり方ではあるけれど、講師が言っていることを大方理解できるようになった。
他の海外サイトでも使える方法かもしれない。
KVMへ無料アップグレードのWindows10をクリーンインストール

Windows10への無料アップグレードが7月末までとのことなので、kvm上のWindows7を更新ではなく、クリーンインストールしようと思います。

#前提条件
既に仮想マシンとしてWindows7/8/8.1がインストールされている必要があります。

#ISOイメージの準備
![SnapCrab_Windows 10 - Internet Explorer_2016-5-7_23-51-13_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/94627/dacca9a9-22eb-e25f-33ee-fe72e303c307.png)
1. Windows7を起動
2. [Windows10を入手する](https://www.microsoft.com/ja-jp/software-download/windows10)へアクセスして「ツールを今すぐダウンロード」をクリックし、ツールを起動する。
3. 他のPC用にインストールメディアを作るを選択
4. 使用するメディアの選択で、ISOファイルを選択
5. ISOファイルを保存する
6. Windows7をシャットダウンする

#VMへデバイスの追加
1. 同じ仮想マシン上に、ディスクを追加する(virt-managerでの例)
![スクリーンショット_2016-05-08_00-14-59.png](https://qiita-image-store.s3.amazonaws.com/0/94627/101a5697-8cd3-4d81-2f61-4044ea9f2cc0.png)

ここで新しい仮想マシンを作ってしまうと、インストールメディアを作ったハード情報と違ってしまうので、アップグレード対象にはならず、ライセンスを入力しても別のハードウェアで使用されています、となって認証できない。
2. CD-ROMドライブを2つ作り、片方へ作成したインストール用ISOファイルを、もう片方へ、VirtIO用のドライバをセットする
ドライバは、[ここ](https://fedoraproject.org/wiki/Windows_Virtio_Drivers)からダウンロード。しかし、最新のドライバはなぜか認識されなかったので、昔ダウンロードした、virtio-win-0.1-74.isoを使用した
_なお、バスの種類をIDEやSCSIにすれば上記ドライバは不要だが、I/Oのアクセス速度はVirtIOのほうが早い_
3. 起動デバイスをCD-ROMと追加したディスクにする
![スクリーンショット_2016-05-08_00-26-32.png](https://qiita-image-store.s3.amazonaws.com/0/94627/6c8bad1f-2491-b75d-7c67-83906538ffe5.png)

#インストール
1. VMを起動
2. ライセンス認証でプロダクトキーがありませんを選択
![スクリーンショット_2016-05-08_00-28-38.png](https://qiita-image-store.s3.amazonaws.com/0/94627/51aab59a-5350-392f-43ba-eeab5ef610bf.png)
3. インストール場所の選択で、ドライバーの読み込みを選択、ドライバのあるCD-ROMドライブのフォルダを選択してドライバを読み込むと、インストール先が見えるようになる
4. あとは、普通にインストールを行う
5. 認識されないデバイスは、VirtIO用のISOからドライバをインストールする

#VM上でCPUが2つしか認識されない時
CPUの割当を2つより多くしても、Windowsでは2つまでしか認識されなかったりする。これは、Windowsが2ソケットまでしか対応していないためとのこと。
そのためCPUのトポロジー設定で、ソケット数:1 コア数:n とすると2つ以上のコアが認識される
![スクリーンショット_2016-05-08_00-40-33.png](https://qiita-image-store.s3.amazonaws.com/0/94627/f2da590b-72c6-07d4-6b5d-a5274bf7c42d.png)
virshからだとこんな感じ。
```  <vcpu placement='static'>4</vcpu>
  <cpu mode='host-model'>
    <model fallback='allow'/>
    <topology sockets='1' cores='4' threads='1'/>
  </cpu>
```
参考：[Why does my Windows 7 VM running under Linux' KVM not use all the virtual processors?](http://serverfault.com/questions/101434/why-does-my-windows-7-vm-running-under-linux-kvm-not-use-all-the-virtual-proces)
ビットマップフォントで遊ぶ：マップチップをフォント登録してRPG風画面を作ってみる

結局やってみました。

# フォントのA~Pにマップ画像を対応させる
<img width="559" alt="スクリーンショット" src="https://qiita-image-store.s3.amazonaws.com/0/8302/2d80b1ed-70a2-48b9-22ed-e7ece0741c9d.png">
_（０と1の画像は気にしないでください。）_

こちらの投稿でやったやつです。あらかじめフォントデータは用意しておらず、アトラス画像パーツからその場でフォントへ変換しているのがポイントです。
[テクスチャアトラスをビットマップフォントへ動的に変換する](http://qiita.com/harayoki/items/7b7f88602980b2ad0c82) 

# マップデータを作る

```sample.as
// マップデータ
var mapText:String = [
	"CCCCIIIIIIIIAAAA",
	"CCCIIIIIIAAAAMAA",
	"CCCCIIIAAAAAAAAA",
	"CCIIIAAAAOAAAAOA",
	"CCIIIIAAAAAAAAAA",
	"CCCIIIIAAAAAAAAA",
	"CCCCCIIAAAAOAAAA",
	"CCCCCCCIIAAAAAOA",
	"CCCCCCCCCIIAAAAA",
	"CCCCCCCCCCCEGGGG",
	"CCCCCCCCCCCCLLHL",
	"CCCCCCCCCCCCLPDP",
	"JJJCCCCCCCCCLDDD",
	"BBJJCCCCCCCCLDKD",
	"BNBJJCCCCCCCLDDF",
	"BBBJJCCCCCCCPPPP",
].join("\n");
```
テキストなので簡単です。

# テキスト表示する

```sample.as
addChild(bmpFont.createSprite(320, 320, mapText));
//もしくは
addChild(new TextFiled(320, 320, mapText, new TextFormat(bmpFont.name)));
```

みたいなノリで表示します。

<img width="546" alt="スクリーンショット" src="https://qiita-image-store.s3.amazonaws.com/0/8302/d8709d17-39ab-681d-1372-27e050a8cd6b.png">
おお、いい感じのマップが表示されたぞ！！ 

いやはい、いい感じなのはマップチップデータ画像の方ですね。
ユウラボさんのページの素材です。( http://skipmore.jugem.jp/?page=2&cid=13 )

<img width="216" alt="スクリーンショット" src="https://qiita-image-store.s3.amazonaws.com/0/8302/5a4c23e9-f8a7-30fc-cadf-f4ecf5ee5d95.png">
リソースは全部１枚のアトラス画像にまとめてあるので、今回もドローコールは１でまかなえています。

![アトラス画像](https://raw.githubusercontent.com/harayoki/-qiita1/atlas2bmpfont/assets/assets/atlas.png)
現在のパック画像は 188px * 231pxです。このデモでは、カナフォント使ってません。

# まとめ

当然ですが、テキスト表示処理だとは思えない感じになりました。書き換えも重ね合わせも、簡単です。色の変更やフィルタ適用もできます。高速に書き換え続けなければパフォーマンス的にも大丈夫でしょう。

![title-logo.png](https://qiita-image-store.s3.amazonaws.com/0/8302/e5ec0dbf-fb12-2fde-46d2-3c36f3b9e234.png) ＜Tiledで良さげクエー
_いやいや、 Tiledのデータを読み込んで表示するのに使えるかもしれませんよ、ムクドリさん。_

実際に動作するソースはここにあります。（前回と同じ)
https://github.com/harayoki/-qiita1/blob/atlas2bmpfont/src/StarlingMain.as

#過去のビットマップフォントで遊ぶ投稿シリーズ

* [フォントに絵文字を入れ込む](http://qiita.com/harayoki/items/b08cb02533497425df04)
* [未定義文字をトウフで埋める](http://qiita.com/harayoki/items/f52217f0401bf4ba9a37)
* [ドット絵用フォントをつくってみる](http://qiita.com/harayoki/items/f2f13185fb899cb98af5)

もう、続きません（笑）
Composerの認証オプション色々

Composerのリポジトリは簡単な認証であれば設定できるようになっている。基本的に`$(composer config -g cache-dir)/auth.json`に記載していくが、configコマンドでも設定が可能。

すべてドメインごとに設定できる。

## Basic認証

なんかconfigコマンドに渡すhttp-basic.という部分がドメインの一部っぽく見えるが関係なくて、`http-basic.`まではJSON記法、それ以降がドメインを指す。(http-basic[example.com]みたいな記法だったら分かりやすかったのに。。)

たとえばexample.comに対してユーザー名：aribaba パスワード：opensesameが必要だったとしたらこんな感じ。

```bash
# set
$ composer config -g http-basic.example.com aribaba opensesame
# unset
$ composer config -g --unset http-basic.example.com
# list
$ composer config -g http-basic
```

↓詳しくは
https://getcomposer.org/doc/articles/http-basic-authentication.md

## GitHub

githubの場合は個人または組織アカウントで払いだしたアクセストークンを使う。
privateリポジトリにアクセスする場合はその権限があるアクセストークンが必要。(repoあたりにチェックを入れて作る)

https://github.com/settings/tokens

単にIP制限を緩和したいだけであれば、全く権限のついていないアクセストークンでもOK。

これも`github-oauth.`までがJSON記法で、その後ろが設定対象のドメインである。

```bash
# set
$ composer config -g github-oauth.github.com xxxxxxx
# unset
$ composer config -g --unset github-oauth.github.com
# list
$ composer config -g github-oauth
```

### GitHub Enterpriseの場合

上記設定はgithub.com以外でもドメインごとに設定できる。つまりGitHub Enterpriseでも使える。ただしcomposerからすればそのドメインがGitHub互換の動きをしているかはわからないため、github-domainsに追加しておく必要がある。

configコマンドだとスペース区切りで、しかもgithub.comは省略できないのでなんか微妙。。

```bash
# set
$ composer config -g github-domains github.com git.example.com ...
# unset
$ composer config -g --unset github-domains
# list
$ composer config -g github-domains
```

## GitLab

詳しく知らないけど、githubと同様にアクセストークンを設定できるっぽい。コマンドだけ羅列しておく。

ドメインはgitlab-domainsにセットする。

```bash
# set
$ composer config -g gitlab-domains gitlab.com git.example.com ...
# unset
$ composer config -g --unset gitlab-domains
# list
$ composer config -g gitlab-domains
```

トークンはgitlab-oauthにセットする。

```bash
# set
$ composer config -g gitlab-oauth.git.example.com xxxxxxx
# unset
$ composer config -g --unset gitlab-oauth.git.example.com
# list
$ composer config -g gitlab-oauth
```

## BitBucket/Stash

これもよく知らないけど、bitbucket-oauthで設定できるみたい。ドメインごとに設定できるので、たぶんStashと組み合わせて使えるんじゃないか。

これらはConsumerKey/ConsumerSecretの組で払い出すので、設定が2つになる。

```bash
# set
$ composer config -g bitbucket-oauth.bitbucket.org CONSUMERKEY SECRET
# unset
$ composer config -g --unset bitbucket-oauth.bitbucket.org
# list
$ composer config -g bitbucket-oauth
```

これらは実際には普通のBasic認証のuser/passとして使えるため、特にドメインを設定する必要はなさそう。
Retrolambdaのバージョン2.3.0以上を使おう

AndroidでJava8のLambdaの記法が利用できるRetrolambdaですが、
少し前にJakeWhartonさんという神がforkプロジェクトを作って話題になりました。
これにより、Jakeさんのプロジェクトで1500-2000のメソッド数を減らすことに成功したようです。
https://github.com/JakeWharton/retrolambda/tree/8c565e0f22a1d182398c98e805345dc2d92c3f01
<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Published a Retrolambda fork which reduces 1 to 3 generated methods per lambda/method ref. Saved us 1500-2000 total. <a href="https://t.co/4qJYIdgzIi">https://t.co/4qJYIdgzIi</a></p>&mdash; Jake Wharton (@JakeWharton) <a href="https://twitter.com/JakeWharton/status/725365714719281152">2016年4月27日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

このforkされたプロジェクトは現在本流にマージされていて、そのバージョンが2.3.0のようです。
https://github.com/orfjackal/retrolambda
<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Retrolambda 2.3.0 has been released with all the changes from my fork. Upgrade today! <a href="https://t.co/TrNOnM7kWT">https://t.co/TrNOnM7kWT</a></p>&mdash; Jake Wharton (@JakeWharton) <a href="https://twitter.com/JakeWharton/status/726469555640516608">2016年4月30日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

おそらく皆さんがRetrolambdaを利用する場合Gradle Retrolambda Pluginというプラグインを利用して導入を行っていると思います。
https://github.com/evant/gradle-retrolambda

**2016/05/07現在のstableのGradle Retrolambda Plugin3.2.5ではRetrolambda2.1.0がデフォルトで利用されるようなので、まだその変更が入っていないようです**

```
./gradlew app:dependencies
...
retrolambdaConfig
\--- net.orfjackal.retrolambda:retrolambda:2.1.0
...
```

ここを参考に2.3.0を使うようにしましょう

https://github.com/evant/gradle-retrolambda#using-a-different-version-of-the-retrolambdajar

モジュールのdependenciesで以下のように追加してあげれば良いようです。

```groovy
dependencies {
    retrolambdaConfig 'net.orfjackal.retrolambda:retrolambda:2.3.0'
}
```

一応Gradle Retrolambda Pluginに対してデフォルトのRetrolambdaのバージョンを変更するプルリクエストが出ているようなので、そのマージを待ってもいいかもしれません。(**結局その場合もGradle Retrolambda Pluginのバージョンを上げなくてはいけない**ので、2.3.0以上はGradle Retrolambda Pluginのバージョン変更しないと使われないかもしれません。)
https://github.com/evant/gradle-retrolambda/pull/183
Line botとIFTTTの連携についてのメモ

先日からLine botの活用法を模索している。

[個人メモ：Line bot開発 - こすもろぐ](http://kosumoro2.hatenablog.com/entry/2016/05/01/161123)

困ったことに、Lineのアカウントは電話番号と紐づけないと友達の追加などができない仕様なので、複数人でのトークの場合の検証ができない。友達に頼めばいいのだが、面倒くさいデバッグに巻き込んでしまうことを躊躇している。

さて、この記事はLine botとIFTTTの連携についてのメモとなる。

[Microsoftも参入する「IFTTT」の世界 Webサービスをもっと便利に - ライブドアニュース](http://news.livedoor.com/article/detail/11483527/)

IFTTTレシピのDo部分にMaker Channelを使用すると、任意のURLにHTTPリクエストを送ることができる。

[Connect Maker to hundreds of apps - IFTTT](https://ifttt.com/maker)

URL, Method, Content Type, bodyを設定することができる。

![20160507_01.png](https://qiita-image-store.s3.amazonaws.com/0/88215/77ea35e6-69e3-88f3-6d13-a493030346a6.png)

あとはサーバー側で受け取ったリクエストを元にLine apiをたたけば良い。

IFTTTと連携できればLine botの可能性が大きく広がると個人的には思っている。とりあえず朝の6時に今日の天気を僕のアカウント宛に送信できるようにした。BaaSを使った定期処理は面倒なイメージがあるが、IFTTTを使えばすぐにできた。

また、Maker ChannelはIFTTTのIf部分にも対応していて、HTTPリクエストを受け取ってIFTTTのアクションのトリガーになることもできる。TwitterやFacebookにLineから投稿する、といったことも容易に実現できる。

IFTTTのチャンネルを改めてじっくり眺めてみようかな、と思った。

元記事： [個人メモ：Line bot開発 2 - こすもろぐ](http://kosumoro2.hatenablog.com/entry/2016/05/07/235745)