OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScript における Promise に関する備忘録

IE11 に対応するため、既存のロジックを async/await を使わないで書き換えようとしたのがきっかけ。

## Promise の動作おさらい

非同期で進んでいる処理が完了/失敗した場合の処理を記述するのに用いる。

ここでは基本動作の理解のため、非同期ではない処理で例を記述する。

```js:成功した場合の例
new Promise(function (resolve, reject) {
        // 本来ここに非同期で進める処理を書く
        resolve('ほげ');
    })
    .then(function (x) {
        console.log('OK:' + x);
    })
    .catch(function (x) {
        console.log('NG:' + x);
    });

// 'OK: ほげ'
```

```js:失敗した場合の例
new Promise(function (resolve, reject) {
        // 本来ここに非同期で進める処理を書く
        reject('ふが');
    })
    .then(function (x) {
        console.log('OK:' + x);
    })
    .catch(function (x) {
        console.log('NG:' + x);
    });

// 'NG: ふが'
```

つまり `resolve`, `reject`（というより、コンストラクタに渡した関数の第一、第二引数）の呼び出しと、`then`, `catch` に渡した関数の実行がそれぞれ対応している。

## async/await の挙動

関数定義の前に `async` と付けると、その関数は  async function になる。

async function 内では `await` が利用できる。

`await` は文の前に書くと、その文の処理が終わるまで次の文の実行を行わないようになる（=同期処理にできる）。

```js:async/awaitを使った例
async function requestHoge() {
    var requestUrl = // （略）...
    
    var result;
    await axios.get(requestUrl, requestOptions)
        .then(function (response) {
            result = response.data;
        })
        .catch(function (error) {
            throw error;
        });

    return result;
}

async function main () {
    var hoge;

    try {
        hoge = await requestHoge();
    } catch (error) {
        console.error(error);
        return;
    }

    // 変数 hoge を使った処理
    // ...
}
```

※ [axios](https://github.com/mzabriskie/axios)： Promise ベースの http クライアント。本来 `get()` は非同期。

## async/await を使わないで書き換え

上記のコードを async/await を使わずに書き換えると次のようになる。

Promise を返すようにするのがポイント。

```js:async/awaitを使わずに書き換えた例
function requestHoge() {
    var requestUrl = // （略）...
    
    return new Promise(function (resolve, reject) {
        axios.get(requestUrl, requestOptions)
            .then(function (response) {
                resolve(response.data);
            })
            .catch(function (error) {
                reject(error);
            });
    });
}

function main () {
    requestHoge()
        .then(function (result) {
            var hoge = result;

            // 変数 hoge を使った処理
            // ...
        })
        .catch(function (error) {
            console.error(error);
        });
}
```

※ IE11 対応する場合 Promise の Polyfill も必要
phina.jsで画面サイズを変更するときに失敗したのでメモ

##phina.jsで画面サイズを変えようとした
[公式サイト](http://phinajs.com/)のサンプルをいじって画面サイズを大きくしようとして失敗

```main.js
// phina.js をグローバル領域に展開
phina.globalize();

//サイズ指定用の定数
var SCREEN_X = 1200;
var SCREEN_Y = 1200;

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    // 背景色を指定
    this.backgroundColor = '#444';
    // ラベルを生成
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.fill = 'white'; // 塗りつぶし色
    //マウスに追従させる
    this.label.update = function(app){
      this.x = app.pointer.x; // x 座標
      this.y = app.pointer.y; // y 座標
    };
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'main', // メインシーンから開始する
    //ここでscreenのサイズを変更 ここはOK
    width: SCREEN_X,
    height: SCREEN_Y,
  });
  // アプリケーション実行
  app.run();
});
```
[Runstartで実行](https://goo.gl/RitqDj)

これを実行すると、画面が途中で途切れてしまいます

##修正する
調べてみると、Sceneにもサイズの設定があるらしく、initで初期化するときに渡される引数をsuperInit()にそのまま渡せばSceneの設定ができるようです

上記のソースから、MainSceneクラスを定義する部分を抜粋

```main.js
// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function(option) {    //ここにoptionを追加
    this.superInit(option);   //こっちにも
    // 背景色を指定
    this.backgroundColor = '#444';
    // ラベルを生成
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.fill = 'white'; // 塗りつぶし色
    //マウスに追従させる
    this.label.update = function(app){
      this.x = app.pointer.x; // x 座標
      this.y = app.pointer.y; // y 座標
    };
  },
});
```
[Runstartで実行](https://goo.gl/or8srb)
これで画面が途切れなくなりました。
DynamoDBの「プロビジョニングされた容量」の引き下げ回数の上限緩和(9回まで)は条件付きだった

## オートスケーリングと上限緩和

2017年6月にリリースされたDynamoDBの新機能「Auto Scaling for Amazon DynamoDB」は、ネットでも話題になりました。

[新機能 – Auto Scaling for Amazon DynamoDBについて](https://aws.amazon.com/jp/blogs/news/new-auto-scaling-for-amazon-dynamodb/)

このリリースに伴い、「プロビジョニングされた容量」の変更の上限が緩和されました。

今までは「プロビジョニングされた容量」を引き上げるのは無制限、引き下げについては「4回」の制限がありました。
今回変更があったのは「引き下げ」のほうで、「9回」まで引き下げが可能になりました。

上記のリンク先から引用します。
> 各テーブルまたはグローバルセカンダリインデックスごとに1日に最大9回まで容量を減らすことができます。

オートスケーリングによって「引き下げ」が必要となるシーンが多くなることを見越してでしょう。


## 条件があった

ただし、無条件で4回から9回に変更されたわけではないようです。

[別のAWSのドキュメント](http://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/AutoScaling.html)には、下記のように書いてあります。

> You can decrease the ReadCapacityUnits or WriteCapacityUnits settings for a table up to four times any time per day.

4回までいいですよ、と。あれ、少ないですね。

続きます。

> Additionally, if there was no decrease in the past four hours, an additional dial down is allowed, effectively bringing maximum number of decreases in a day to nine times (4 decreases in the first 4 hours, and 1 decrease for each of the subsequent 4 hour windows in a day)

「4時間以内に引き下げられていなかった場合に、追加の引き下げが可能で、一日の最大引き下げ回数は9回」とあります。

単純に9回までOK、というわけではないのですね。

## 最後に

この制限を実際に試したわけではないのですが、以前何度か「引き下げ」を行っていたときに上限に達してエラーになってしまいました。「9回もやってない気がするなぁ」という感じだったのですが、こういう理由だったのかもしれないですね。

リリース当初、日本語の記事は読んでいたのですが、英語のドキュメントについては後回しにしていました。
ふと時間ができて読んでみると新しい発見がいくつかあったので、英語の記事も読まないとだなーというそんな話でした。
UIButtonの角丸・枠線の設定をユーティリティエリアから編集できるようにする

UIButtonに角丸や枠線の色を変えたい場合に、コードからではなくユーティリティエリアから設定したい。
StoryBoardですぐ確認したい。
#UIButtonのサブクラスを作る

```Swift:RoundedButton.swift
@IBDesignable class RoundedButton: UIButton {
    
    @IBInspectable var cornerRadius: CGFloat = 0.0
    @IBInspectable var borderWidth: CGFloat = 0.0
    @IBInspectable var borderColor: UIColor = UIColor.clear
    
    override func draw(_ rect: CGRect) {
        layer.cornerRadius = cornerRadius
        layer.borderWidth = borderWidth
        layer.borderColor = borderColor.cgColor
        clipsToBounds = true
    }
}
```
#StoryBoardより設定する
StoryBoardよりボタンを選択して、作成したクラスを設定する
![スクリーンショット 2017-07-17 12.23.29.png](https://qiita-image-store.s3.amazonaws.com/0/126018/68f78efe-a835-35bb-6efa-a8e124b22cca.png)
パラメータが設定できるようになる
![スクリーンショット 2017-07-17 12.23.54.png](https://qiita-image-store.s3.amazonaws.com/0/126018/717353f7-8298-4c26-28ac-72772ee610f2.png)


ボタンに限らず他にも色々使えそうです。
Unity5入門 〜スマホのゲームアプリ作成 その１〜

#はじめに
今まで土日の時間にちょくちょく触っていたUnityだが、最近時間がなく
結構時間が開いたりしてしまい、忘れる部分なども出てきたので、初心に戻って
１からUnity開発の備忘録を残すことにした。


#環境

・**Unity**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/5d83e479-c248-c7a7-c358-95acbaf275ce.png)

バージョンとしては、free版の5.6が入った環境で開発を進めていきます。


・**PC**
MacBook Air

OS: Sierra
バージョンとしては、10.12.5です。

※ 今回は簡単なアプリを作っていき、流れを覚えることが目的なので、
使うAssetも凝ったものではなく、無料のFreeAssetを使って行く予定
（ユニティーちゃんとか）

ちなみに、Assetとは2D/3Dのモデルやエフェクト・サウンドなどの素材のことで
Unity Asset Storeというところからダウンロードできたりするものです。

#作るもの
2D/3Dの簡単なゲームからVR/ARアプリまで

#Unity5 ことはじめ
PCにまずUnityを入れましょう。

公式： https://unity3d.com/jp/unity

ここで、公式ページをみてわかるように
マルチプラットフォーム対応で、かなり色々なものからアウトプットできることがわかる。
（最近、流行りのNintendoSwitchでも出力できるのは試してみたくなるところ。笑）


インストールしたら、
Unityを開いて新規プロジェクトを作成します。

（Unityで使える言語には、C#, JavaScript, Booがあるが自分はC#で進めていく予定）



#関連

[はじめてUnityでVRアプリを作ってみた時の話](http://qiita.com/YuukiWatanabe/items/41361a84f17efa519bc0)
JetBrainsの学割の申請方法について


[最強のPython開発環境 PyCharmのすゝめ](http://qiita.com/pashango2/items/de342abc10722ed7a569)

最強のPythonの開発環境と名高い「PyCharm」ですが、すべての機能が使える製品版を使おうと思うと、年間$199（２万円以上）かかります。

しかし！
この、「PyCharm」の開発元である、JetBrainsは学割というものを用意していて
**学生や教師など、教育機関に所属する人に対しては、 すべての機能が無制限の製品版を無料で使うことが出来るのである！！**

**どうせすべてタダで使えるなら、使わないと損だ！**
と言うことでJetBrainsの学割の申請方法について書いていきます。

## まずは申請

https://www.jetbrains.com/student/

上記のJetBrainsの学生用ページにアクセスしてください。

![Free_for_Students__Professional_Developer_Tools_from_JetBrains.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/8bd2ac90-9136-0bba-a680-2fc9b837fb76.jpeg "Free_for_Students__Professional_Developer_Tools_from_JetBrains.jpg")


APPLY NOWをクリック

![JetBrains_Products_for_Learning.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/e6b5c972-4c25-e7c0-3d3e-07bae2b8ef86.jpeg "JetBrains_Products_for_Learning.jpg")


こちらのページで情報を入れていきます。
Email addressは自分の大学のメールアドレスを入れてください。「ac.jp」などの大学が発行しているメールアドレスじゃないと弾かれます。

![スクリーンショット_2017-06-27_11_25_58.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/39f286c5-3f57-5c43-1660-81e5b2fc8f99.jpeg "スクリーンショット_2017-06-27_11_25_58.jpg")


後は、大学のメールアドレスに下記のような文章のメールが来ます。


「Confirm Request」をクリック
メールアドレスが正しいと確認されるともう1通メールが来ます。

![スクリーンショット_2017-06-27_11_26_05.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/6dbc8899-9cb9-ec72-bb0f-2c44adc68ec9.jpeg "スクリーンショット_2017-06-27_11_26_05.jpg")


このメールでは「Active Educational License」をクリック

そうすると、アカウントのページに飛びます。

![スクリーンショット_2017-06-27_11_32_12.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/9b28c72f-4155-1dce-860a-0393ca6e812b.jpeg "スクリーンショット_2017-06-27_11_32_12.jpg")


こちらで、「Download activation code」をクリックすると、学生ライセンスを取得できます。

## 早速使ってみよう

![スクリーンショット_2017-06-27_11_38_20.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/8c91f402-af69-0f49-bbd8-bb082420bf6c.jpeg "スクリーンショット_2017-06-27_11_38_20.jpg")


PyCharmのProfessional版をダウンロードして、初期設定をしていくと、

![スクリーンショット_2017-06-27_11_41_05.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/76ce98c5-f387-d768-7a63-dfc86b52f7d0.jpeg "スクリーンショット_2017-06-27_11_41_05.jpg")


このように「Activate　code」を求められるウィンドウが出て来るので、先ほどの学生ライセンスのテキストファイルの中身をコピペしてください。

そうすると...

![スクリーンショット_2017-06-27_11_44_03.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/1b6f14fa-31fb-7a73-7e14-c6f560fc354f.jpeg "スクリーンショット_2017-06-27_11_44_03.jpg")


こんな感じで、PyCharmが使えるようになります。

## あとがき

今回は、PyCharmを入れましたが、この学生ライセンスがあれば他の「IntelliJ IDEA」や「PhpStorm」など他のJetBrainsの製品も使うことができます。
しかし、使うことが出来るのは教育機関に所属している人のみで他の人に勝手に使わせないよう気をつけてください。
ARKitを触ってみよう 〜第２話〜

#はじめに
前回の記事：[ARKitを触ってみよう 〜第１話〜](http://qiita.com/YuukiWatanabe/items/c46f4a84ac48df2fd15e)
でも書いたように、ゴールはARKitを使ってサンプルアプリを作成する。

しばらくARKitを実機でビルドできるデバイスが手元になくて、
第１回の記事を書いてから結構経ってしまったが、ようやく手に入れたので続きをmm


#環境
macOS Sierra 10.12.5
Xcode9.0 beta (9M136h)
iOS11 beta3
iPadAir2(このデバイスならARKit大丈夫。前に間違ってiOS11入れた端末はiPhone5sだったせいで実機で動作確認できなかった)

※ARkitを動作させるためには**「Apple A9」または「Apple A10」プロセッサが搭載された端末**が必要。なので、iPhoneだと6s以上（iPhoneSE含む）でしか動かない

#躓いたところ
・iOS11 beta2がリリースされるまで、iPadだと実機ビルドしようと
PCにケーブルを繋いでも認識してくれなかった。
（今のbeta最新版では、もうiPadでも動作確認可能）

・実機ビルドの端末が本当にARKitを利用できるスペックを満たしているかの確認

#動作テスト
<img width="768" alt="IMG_0254.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/134919/5c102e58-6078-6a6c-3bee-62e81fb9e8f3.png">

Unityで昔自分が作った3DアプリのものにARKitプラグインを入れ込んで
Xcodeから実機で見てみたもの
 （背景あるからAR感ないが、とりあえずプラグインを入れたUnityプロジェクトがXcode経由でビルドできることは確認できた！）
![Untitled.gif](https://qiita-image-store.s3.amazonaws.com/0/134919/92ff915c-0413-ff5f-2910-8aa65c257fe4.gif)



#結果
結局、今回はどの環境を使ってアプリ開発を進めていくかの調査で終わってしまった...。
しかし、ARKitで平面認識などはできることは わかった。
SceneKitをあまり使い慣れていないので、
3Dオブジェクトの作成は、
[はじめてUnityでVRアプリを作ってみた時の話](http://qiita.com/YuukiWatanabe/items/41361a84f17efa519bc0)
の記事とか書いた時にもある程度触ったことがあるUnityの方で作る方が
現状は早そう。（自分の場合）

なので、これからは、
オブジェクトの作成：Unity
　　　　➕
平面認識などの空間把握：Xcode(ARKit)
でやることにしようかなと考えている。

#次回以降
とは言いつつ、Unity側で用意されている
ARKitプラグインの方で色々とできてしまうかもしれないので、
一度こっちでどこまでできるか見てから、純正ARKitでアプリ開発を進めようと思う。
スカウターアプリは鉄板で作りたいところ。笑
VisionAPIとかCoreMLも出たことだし、
顔認識をこの辺りでさせて、
その顔のユーザーのTwitterやfbのタイムライン情報を
顔の横にARで付加情報的に表示するのとかやってみたい。


今回は、とりあえず昔Unityの参考書を読んだ際に作った3Dアプリのサンプルを
そのまま流し込んでビルドできる状態にしただけなので、これからAR向けに改善していく。

とりあえず、ここしばらくビルドできなくて先に進まなかった問題は解決したので、
ビルドできるiPadAir2で色々と試していこうと思う。

次回は、とりあえずユニティちゃんを出現させたい。

#参考
(free) Blender software: https://www.blender.org/

[OpenCV3参考書](https://www.amazon.co.jp/OpenCV-3-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%83%96%E3%83%83%E3%82%AF-%E8%97%A4%E6%9C%AC-%E9%9B%84%E4%B8%80%E9%83%8E/dp/4839952965)

#アーカイブ
[ARKitを触ってみよう 〜第１話〜](https://qiita.com/YuukiWatanabe/items/1026c965b3a9c4e69cd5)
[ARKitを触ってみよう 〜第２話〜](https://qiita.com/YuukiWatanabe/items/1026c965b3a9c4e69cd5)
[ARKitを触ってみよう 〜第３話〜](https://qiita.com/YuukiWatanabe/items/e6e4355d2f1ae0d4fd3f)
find hogehoge | xargs ls -ltr を正しく動かす

# 問題

- `find`した結果をmtime順に並び替えたいとき単純に思いつく方法は`find hogehoge | xargs ls -lrt`だが、対象のファイル数が多い場合は想定通りの出力にならない
    - `find / | xargs ls -dltr`を実行すれば、想定通りになっていないのがすぐ分かる

# 原因

- コマンドライン引数の最長は`ARG_MAX`で決まる
- `xargs`は渡す引数の長さが`ARG_MAX`を超える場合、自動的にコマンドを分割する
- `find`の結果のファイル数が多い場合、`xargs`で渡す引数が`ARG_MAX`を超え、そのたびにその引数毎に区切られて`ls -ltr`が実行されるので、想定通りの結果にならない

# 解決方法

`find`のオプションを使って`mtime`を先頭に表示し`sort`にパイプで渡す。

```
find . -printf "%T+ %p\n" | sort
```

`ls`は標準入力やファイルから対象を指定することが出来ないため、`ls`を回避するしかない。printfでuidやファイルサイズ等も指定して表示できるので、大抵は事足りる。
PHPカンファレンス関西2017 メモ


# Opening メモ

立ち見。よく覚えていない

# PHP におけるDSL

松藤さん

@matsu_hide さん

## DSL例

- SQL
- Shell
- CSS


- PHP ...?
	- 初めはWebSiteを作るためのフレームワーク
	- DSLから汎用プログラム言語に発展


## DSL とは

`Domain Specific Language`

ドメイン特化型開発

- SQL => RDBに特化した（領域を絞った）言語

## 問題領域（例）

「キャンペーン商品を含んでいる場合は合計額から10%値引き」

### 実践DSL

- パーサ(構文解析)
- エンジン
- エディター

... 無理デスヨネー orz

- パーサ → YAML
- エンジン → ExpressionLanguage(Symfony)
- エディター → まぁ無くていいでしょ。( IntelliJ でいいんじゃね？ )

### ExpressionLanguage

式をコンパイルして評価するエンジン

```
キャンペーン商品の割り引き:
  条件: カート.キャンペーン商品を含む()
  割引: カート.商品合計() * 0.1
```

↑「条件」「割引」にExpressionLanguageを使う

```
class Cart {
  public function 送料() { ... }
  public function キャンペーン商品を含む() { ... }
  public function 商品合計() { ... }
}
```


## まとめ

DSLは小さな問題領域にフォーカスしたものである

https://github.com/matsufuji/phpck2017-dsl

# ハッシュと暗号は違うよ

@tomzoh さん

## なぜ？

お客さん「セキュリティ上、パスワードを保存しないで。
ベンダ「ではパスワードを暗号書いて保存！」
@tomzohさん「ハッシュだろ」

## ハッシュとは

関数: `md5(s)` など。

PHPの配列ハッシュなどではない。

### 特徴

- 固定長の出力
- 同じデータを入れたら、同じハッシュ値がでる
- 別のデータを入れたら、だいたい別のハッシュ値が出てくる
- 不可逆
- yum/aptではハッシュ値とかでファイルの整合性確認をする


## 第二部　ハッシュ値衝突

要は無限空間から有限空間にするので、衝突が起きる。

- ハッシュの安全性

## ハッシュ衝突の攻撃

- `sprintf('/user/%s', md5(1))`
	- 推測可能
	- salt を混ぜこむ
		- `sprintf('/user/%s', md5('12sda3' . 1))`

## ハッシュと暗号

1. ハッシュ: 戻せない
2. 暗号: 鍵があると戻せる

### 似たようなやつ

1. 難読化
1. Encode/Decode


## つづき

1. 連想配列 = Hashという理由

`$a['k'] = 'b';` 内部マップで、'k' がハッシュ化して保持している

# 関心事と責務の話

takahashi shinichi

## あれこれ

Microservices

- 要は小さいアプリケーションを作っていってあれこれしよう

### スマートエンドポイント

- Restfulなリソース

### ダムパイプ

- RabbitMQなどの軽量メッセージ

### 分散ガバナンス

- サービスごとの言語・DBの選択可能


### DDD


本質はどこなの？という話。


## 関心事と責務の話

関心事＝ある機能の振る舞い、目的のこと。

- → 関心事を分離しよう。

責務 = そのクラスがするべき事

### 設計・コーディングの事

- 設計思想を言語化、文章化
- 思想に合うようにInterfaceだけガッツリ作る
- 関心をもつのは相手のみ。
- クラスの責務は広くなっていないか

↑

Interface →　「抽象に依存する」といいます

## 今日の話は

- http://www.phptherightway.com/
- とかとか


# PHP でもサーバレスしたい

渡辺さん

## Serverless architecture

SERVERLESS CONF

ServerLess = 要はバックエンドのインフラを持つのは大変よね。

- サーバ環境の変化
	- 最近は秒単位で。。。
- オンプレだと、1から全部面倒見てた
- SaaS だとベンダーの上で動かす。


### 特徴

- サーバを意識しない
- 簡単にスケールできる
	- ただ、めっちゃスケールする。
- 利用料課金

### 事例

- faultline

### 初めのオススメ

- バッチ処理
	- cronの実行など
- 運用の自動化

## Hosting

Amazon Lambda は PHP 動かない。

Azure Functions は動く！

### Azure Functions

- めっちゃ安い
- http トリガーで動かす
	- 他にも
- Blue Green Deployment ができる
- ServerLessでデプロイできないのがつらい
- http Trigger は従量課金プランだとつらい

### Logic Apps

- IFTTT のレシピみたいなやつ

### Application INside

- new relic みたいなやつ？

### Durable Functions

複数のfunctions が動かすことが出来るっぽい？


# LT

メモってない。
dockerでlamp環境構築

#参考にした記事
http://qiita.com/naga3/items/d1a6e8bbd0799159042e
http://qiita.com/furu8ma/items/50718efebee20fd24517

#LAMP環境構築の手順
```
git clone https://github.com/naga3/docker-lamp.git
cd docker-lamp/
docker-compose up -d
```
localhostに繋げばphpinfoが見える。

#phpMyAdminの追加
docker-compose.ymlを以下のように書き換える。

```
version: '2'
services:
  mysql:
    build: ./mysql
    environment:
      MYSQL_ROOT_PASSWORD: pass
    volumes:
      - db:/var/lib/mysql
  php:
    build: ./php
    ports:
      - '80:80'
    volumes:
      - ./html:/var/www/html
    depends_on:
      - mysql
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=root
      - PMA_PASSWORD=pass
    links:
      - mysql
    ports:
       - 8080:80
    volumes:
       - /sessions
    depends_on:
      - mysql
      - php
volumes:
  db:

```

もう一回

```
docker-compose up -d
```
してlocalhost:8080に繋ぐと、phpMyAdminが見える。

#mod_rewriteの追加
phpのDockerfileを以下のように書き換える。

```
FROM php:7-apache
COPY php.ini /usr/local/etc/php/
RUN apt-get update \
  && apt-get install -y libfreetype6-dev libjpeg62-turbo-dev libpng12-dev libmcrypt-dev \
  && docker-php-ext-install pdo_mysql mysqli mbstring gd iconv mcrypt
RUN a2enmod rewrite
```

containerを止めて、消して、imageをもう一度作り直す。

###containerの操作
List all containers (only IDs) docker ps -aq.
Stop all running containers. docker stop $(docker ps -aq)
Remove all containers. docker rm $(docker ps -aq)
Remove all images. docker rmi $(docker images -q)

#マウントするディレクトリの指定
docker-compose.ymlのserviceのphpのvolumesの

```
- ./html:/var/www/html
```
これのコロンより左で指定
もういい加減話を切り上げたいから、Amazon Dash Buttonを押して、自分に電話が来たように振る舞ってみた

仕事中に世間話や会議から早く開放されたい、そんなこと誰でも思ったことありますよね。
いろいろ考えてみて一番良いのは、自分宛てに電話して割り込むことかな、と思い実装してみました。

## 流れ
---
あぁ、話長いなぁ、もう我慢できない
↓
こっそりAmazon Dash Buttonを押す
↓
SIPボットが自分のIP電話機を呼び出す
↓
SIPボットと話すフリをする
↓
無事開放されてホッとする。作戦大成功(=^・^=)

## 便利な仲間たち
---
1. (HW) [Raspberry Pi](https://www.raspberrypi.org/ "Raspberry Pi") ... 実装母艦
2. (SW) [sipcmd](https://github.com/tmakkonen/sipcmd "sipcmd") ... SIPボットの正体
3. (SW) [Dash Button for Node](https://www.npmjs.com/package/dash-button "Dash Button for Node") ... Amazon Dash Buttonを押してSIPボットを起動する強者
4. (HW) [Amazon Dash Button](https://www.amazon.co.jp/b?node=4752863051 "Amazon Dash Button") ... 好きなボタンで

## SIPボットのインストール
---
インストール

```shell-session
$ cd
$ sudo apt-get update
$ sudo apt-get install libopal-dev libpt-dev
$ git clone https://github.com/tmakkonen/sipcmd.git
$ cd sipcmd
$ make
```

動作確認

SIPサーバは[RasPBX](http://www.raspberry-asterisk.org/ "RasPBX")で動作確認が取れています。

<dl>
  <dt>SIPサーバのアドレス</dt><dd>192.168.1.111</dd>
  <dt>SIPボットのユーザ名（内線番号）</dt><dd>200</dd>
  <dt>SIPボットのパスワード</dt><dd>neko</dd>
  <dt>自分のIP電話機の内線番号</dt><dd>100</dd>

</dl>

- 呼び出すだけ。

```shell-session
$ ./sipcmd -P sip -u 200 -c neko -w 192.168.1.111 -x "c100"
```

- 呼び出して受話器をとったらメッセージを流す。ファイル名は sip-bot.wav (Mono 16bit 8kHz)。

```shell-session
$ ./sipcmd -P sip -u 200 -c neko -w 192.168.1.111 -x "c100;vsip-bot.wav"
```

- 他にもいろいろできるよ。詳しくは[sipcmd](https://github.com/tmakkonen/sipcmd "sipcmd")をどーぞ。

Amazon Dash button の設定
---
詳しい説明は[Amazon Dash Buttonを(正しくない方向で)使ってみた](http://qiita.com/takustaqu/items/8539b33780c9675c8657 "Amazon Dash Buttonを(正しくない方向で)使ってみた")さんをどーぞ。

スクリプト adb-sip-bot.js はこんな感じです。

```js
var DashButton = require("dash-button");

const PHY_ADDR = "XX:XX:XX:XX:XX:XX";
var button = new DashButton(PHY_ADDR);

button.addListener(() => {
  const execSync = require('child_process').execSync;
  const result =  execSync('cd /home/pi/sipcmd ; ./sipcmd -P sip -u 200 -c neko -w 192.168.1.111 -x "c100;vsip-bot.wav"');
});
```

あとは好きなプロセス管理ツールで adb-sip-bot.js を常時起動するよう設定します。

最後に
---
これ使ってること誰にも話さないでくださいね(=^・^=)
Unity NGUIのUIGridで非アクティブな要素のスペースを詰める

#環境
Unity：5.3.7p4
NGUI：3.8.0

#はじめに
UIGridの要素をある条件の時にGameObject.SetActive(false)したところスペースだけが残ってしまいました。
そのObjectをDestroyしようとしていたところレビュアーさんから指摘があったのでまとめておきます。
ついでにScrollViewの作り方もまとめておきます。

#先にまとめ
```
using UnityEngine;
using System.Collections.Generic;

public class NguiGridSample : MonoBehaviour {

	// グリッド
	[SerializeField]
	private UIGrid m_grid;
	// リストのオブジェクト
	private List<Transform> m_Items;

	// Use this for initialization
	void Start () {
		m_Items = m_grid.GetChildList();
	}
		
	/// <summary>
	/// 青アイテムを非表示にする
	/// </summary>
	public void OnHideBlueButton(){
		if (m_Items == null) {
			return;
		}
		m_Items.ForEach((item) => {
			if(item.gameObject.name == "blue"){
				item.gameObject.SetActive(false);
			}
		});
		m_grid.Reposition();
	}

	/// <summary>
	/// 全アイテム表示する
	/// </summary>
	public void OnShowButton(){
		if (m_Items == null) {
			return;
		}
		m_Items.ForEach((item) => {
			item.gameObject.SetActive(true);
		});
		m_grid.Reposition();
	}		
}
```
###UIGrid.hideInactiveがtrueのとき
Reposition時、非アクティブな要素のスペースを詰める。
![HideInactive2.gif](https://qiita-image-store.s3.amazonaws.com/0/44990/f7aee0bd-2c7d-f0c4-833a-8028cb4cb95a.gif)

###UIGrid.hideInactiveがfalseのとき
Reposition時、非アクティブな要素のスペースを詰めない。
![HideInactive3.gif](https://qiita-image-store.s3.amazonaws.com/0/44990/480f0c0c-159c-8484-b526-257d0f61724d.gif)

#解説
###NGUIをインストールする
個人のプロジェクトにNGUIをインストールしようと思ったのですが、最新バージョンは有料しかないとのことです。
http://future-software-labo.anyagent.net/unityngui%E3%82%92%E7%84%A1%E6%96%99%E3%81%A7%E4%BD%BF%E3%81%86/
試しに無料版をインストールしてみましたがあまりの違いに諦めて、仕事用プロジェクトにローカルブランチを切って作業しました。

###ScrollViewを作る
http://naochang.me/?p=146
動画が分かりやすいです。
Inspectorの設定だけでここまでできるのはすごいなー。

###UIGridで並べる
UIGridの子オブジェクトして要素を1つ作り、それを複製するだけで一括で並びます。
要素はSerialize Fieldで配列として持たなくてもUIGrid.GetChildList()で一括取得できます。

今回問題だったのはInspector上にも見えているHide Inactiveの挙動でした。
on/offでそれぞれ上述のgifのような挙動になります。
<img width="592" alt="スクリーンショット 2017-07-17 8.49.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/44990/879bc455-0e1b-e861-0b6a-0ff1eacdd68e.png">

###BoxColliderをattachするときは「option + Shift + C」が楽ちん
NGUIをインストールすると「option + Shift + C」が使えるようになります。
要素の大きさにピッタリ合うBoxColliderを設定するショートカットです。

####Add ComponentからattachしたBox Collider
<img width="381" alt="スクリーンショット 2017-07-17 9.46.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/44990/1592f064-5ee5-78e3-571e-7ab33ccff87b.png">

####NGUIのメニューからattachしたBox Collider（ショートカット）
<img width="382" alt="スクリーンショット 2017-07-17 9.46.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/44990/7af4de50-77f3-97a5-9c9e-d259d8decd39.png">

#さいごに
単純にInspectorで設定できる項目を知らなかっただけでした...。
1から作って色々遊んで見るのは大事ですね。

作ってから気づいたのですが、gif作る時はマウスのフレームインとフレームアウトまで録画しないと無限ループに見えちゃいますね...
次から気をつけよう！（←今回のはもうやる気がない）
windowsでTensorFlow その27


#概要
windowsでTensorFlowやってみた。
pix2pixやってみた。

#写真
結果
![pix2pix1.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/7d41b437-7cc4-038b-598b-f8cd7446bc3a.jpeg)
元
![p1m.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/6bb885a9-6400-10b8-1355-dd4b304f9fa2.jpeg)



#参考にしたページ

http://qiita.com/miyamotok0105/items/56a7143bfb4315438838

#環境
windows 7 sp1 64bit
anaconda3
tensorflow1.2

#サンプルコード

```
# coding: utf-8
from __future__ import print_function
from __future__ import division
import numpy as np
import os
import json
import tensorflow as tf
import PIL.Image


def get_info_from_dict(model_info, key):
	d = model_info[key]
	t_shape = d['shape']
	t_range = d['range']
	t_opname = d['opname']
	t_opname = t_opname if t_opname[-2:] == ':0' else t_opname + ':0'
	return t_shape, t_range, t_opname

def predict(img, input_range = (0., 1.), output_range = (0., 1.)):
	img = np.expand_dims(img, 0) if len(img.shape) < 4 else img
	model_out = sess.run([output_op], {
		input_op: img
	})[0]
	return model_out

def showarray(a, fmt = 'jpeg'):
	a = np.uint8(np.clip(a, 0, 1) * 255)
	PIL.Image.fromarray(a).show()
	PIL.Image.fromarray(a).save("pix2pix1.jpg", quality = 95)
	print ("save pix2pix1.jpg")

json_path = './gart_canny_256.json'
with open(json_path) as f:
	model_info = json.load(f)
name = model_info['name']
ckpt_path = model_info['ckpt_path']
if (os.path.exists(ckpt_path) and os.path.isdir(ckpt_path)):
	ckpt_path = tf.train.latest_checkpoint(ckpt_path)
input_shape, input_range, input_op = get_info_from_dict(model_info, 'input')
output_shape, output_range, output_op = get_info_from_dict(model_info, 'output')
graph = tf.Graph()
sess = tf.Session(graph = graph)
with graph.as_default():
	saver = tf.train.import_meta_graph(ckpt_path + '.meta')
	saver.restore(sess, ckpt_path)
img0 = PIL.Image.open('p1m.jpg')
img0 = img0.resize((256, 256))
img0 = np.float32(img0)
img_predicted = predict(img0)[0]
showarray(img_predicted)

```
サウンド調整のこれから

ゲームジャムの感想とゲームサウンドのこれからの妄想になります。

#ゲームジャムは好きなことやる

といったら

- 女の子踊らせたい　
- きもさを追求したい
- 3Dサウンド
- インタラクティブミュージック
- ドライブゲーム

チャレンジ枠なのは
デザイナがいないので、写真をモデルに反映させたり、パフュームダンスデータを反映させたりしているメンバーがいました。

#音ゲー要素
音ゲー要素の話もあったけど、誰かが設計を本気ださないとそれは難しい。
サウンドもUnityの時間制御も詳しくないと作業時間的に厳しい。

#サウンド調整
サウンド調整とは

- サウンド制御設計
- サウンドデータ作成
- サウンドスクリプト作成
- サウンド組み込み
- サウンドデータ調整
- サウンドネタ盛り込み

で手一杯になる。

例えば、３Dサウンドなら距離でどう変化するかの設計をする。
ゲーム空間の速度や距離をもらうとできるが、
音に直結するパラメータ（距離減衰、方向変化、サウンドの広がり具合、速度変化）の場合、
多くの調整が必要になる。

VRのサウンドも、サウンド調整が必要な部類。

```
逆に調整要らないのは

「鳴らすだけ」

というものになる。
```

裏を返せば、音が鳴るだけでとても気持ち良い。
➡︎より気持ちよく鳴らすには音色やタイミング、音量、重なり具合など調整が必要になる。

ので最悪は「鳴らさない」という選択もある。
「作成側の都合」でしかない場合は「無」でしかない。
(「無」に価値は生まれない＝売れない)

#調整があると、サウンドの不自然さをなくすことができて、気持ち良さの快感がアップする
不自然さとは、

- 音が途切れたり
- 聞こえ方が悪い音があったり
- 見た目とのタイミングがずれている

音が遅れて聞こえる、演出が遅れて聞こえる、
とかはゲーム連携部分の設計やデータで調整が必要。

#ゲームのデザインによってサウンド制御やデータの密度はいろいろ変化する
➡︎ゲームの調整次第で変化する。ゲーム実装が終わった後での調整時間が必要。
（だけど、みんなぎりぎりに詰め込むの。やりたいことがギリギリまであるから）

```
サウンド調整の時間がもらえないと嘆いても
それは伝わっていないかも
```
➡︎違うアプローチを考える

# サウンド調整時間は無い代わりに、ずっとビルドを見張っては気づいたところを調整し続ける
という作業（ワークフロー）になる。

(ビルドとは、ゲームの制作途中の実行可能なもの。）



## ゲームに影響を与えずに音を差し替えする技術を磨こう
ミドルウェアのデータの差し替えやサウンド制御スクリプトレベルで

- サウンド演出／調整を勝手にやる（サウンドのトリガーも自分で入れる）

ビルド毎に、都度、音が賑やか／良いバランスになっていく。

音がついて演出がより明確になって、さらに調整が入っていく。
音にも意見がでてくる。（こうしたほうがいいとか）
➡︎サウンドドリブン


## サウンドドリブンでゲームも音も良くなっていく
サウンドドリブンでゲームも音も良くなっていく。
➡︎これをするには、設計／実装ができるサウンドプログラマ兼サウンドデザイナーという専門職が必要。　

テクニカルサウンドデザイナーというかサウンドプログラムデザイナーというか・・・　

サウンドシステム（ミドルウェアやゲームエンジンのスクリプト）を高度に扱える人でゲームシステムにも精通していないとできない。（誰でも簡単とはいかない）
こういう人が増えれば確実に完成度が高くなる。

```
複数人でやるならさらに、テクニカルサウンドディレクター（とりまとめ）が必要か。
どこまで誰が担当するかなど
```

##見た目をよくするのに確実にグラフィックデザイナーが必要なのと同様、サウンドにも必要
デザイナーは無駄な回り道を避けつつ、出来る範囲で最良の答えを見つける技術を持つ人。（アーティストとは少し違うスキル）

```
もし、完全分業スタイルならば、

アルファ版、ベータ版、オープンベータといった単位でのタイミングでのみ

サウンドドリブンの効果が発揮するが、頻度が極端に落ちる。
```
できれば毎日のビルド（デイリービルド）に更新されるのが理想。

##仕様が変わって、追従するのは無駄になるのでは？
そこまでの過程や影響を受けて変わるものであれば、無駄では無い。
必要な作業に変わる。

#ゲームサウンドのこれから

## ナイツのインタラクティブミュージックに感動したから

AIがアレンジを変化させているとか。
➡︎それやりたい。

```
自分話であれですが、
誰でも作れるものじゃないとかで、仕事でそれができるツールを作れと言われて、
「やりたい」がちょっと変化して、まだ夢は途中でなかなか叶わないけど
ゲーム作りに混ぜさせてもらえてとても嬉しい。「やりたい」ことにとても近い。
```

## パラッパラッパーのインタラクティブミュージックに感動したから

音楽ゲームなのに成功度によってアレンジが変化する。
➡︎それやりたい。

```
ヨッシーに乗るとリズムが賑やかになったり、レースで一位だと華やかだったり、体力が残りわずかだと変化したり
```

## スプラトゥーンのお店によってアレンジが変化するのかっこいい
靴屋さんだとベースが出てくる
➡︎それやりたい。

```
ドラクエ１のダンジョン（不思議のダンジョン）、マリオ64の水のステージ、PSO2とかも
```

## ゼルダの伝説の敵との対戦で打撃音がタイミング、音程共に制御されている
連続ヒットした時の快感などが自然に行われ、戦況によってアレンジが変化する
➡︎それやりたい。

```
ストリートファイター、Rez、ワンダと巨像、アルトネリコとかも
```

## マインクラフトやマリオメーカーで、音楽ブロックで自動演奏できてしまう
ユーザーで楽しみを作れる環境
➡︎それやりたい。

```
どうぶつの森、LittleBigPlanetとかも
```

#サウンドには「感動」を盛り込む必要がある

```
➡︎サウンドドリブン開発のために必要な人、技術がある
```

ちゃんとサウンド調整したゲームや製品が増えることで、
心が動いて「それやりたい」な人が増えるといいな。
google chromeの頑固なキャッシュをクリアする方法

クリアしたい画面を表示する
![20170704190317.png](https://qiita-image-store.s3.amazonaws.com/0/188508/d3bd5949-e34a-6c15-8e30-000acfd4f954.png)

F12キーまたは、ctrl+shift+I キー
![20170704190335.png](https://qiita-image-store.s3.amazonaws.com/0/188508/9e724d02-3fe7-1451-a999-5d55002362dc.png)

デベロッパーツールが表示されるので
そのままマウスキーを更新ボタンの上に持って行って、右クリックまたは左クリック長押し
![20170704190311.png](https://qiita-image-store.s3.amazonaws.com/0/188508/457ca59f-03a6-2a92-3b03-6b15b357bd7a.png)

キャッシュの消去とハード再読み込みをクリック。
これで頑固なキャッシュがクリアされます。
大切な情報とか消えてしまうかもしれないので、くれぐれも自己責任でお願いします。
node の spawn に関して調べてみた その２

昨日[node の spawn に関して調べてみた](http://qiita.com/TsuyoshiUshio@github/items/cf4b28e7999403f7a04c) のエントリで、昨日のエントリで終えることができなかったことがある。それは、exec と、spawn の違いの検証だ。

昨日は、パイプ処理を含むspawn を実行してみようとしたが、何も出力されなかったのが理由がわかった。下記のように、サンプルコードの、Readble の on の第一引数がとる値が間違えていた。[Class: stream.Readable](https://nodejs.org/api/stream.html#stream_class_stream_readable)に指定できる値下記の通り

* Event 'close' ストーリむがクローズされたとき
* Event 'data' データの[チャンク](https://www.techopedia.com/definition/25941/chunk)のオーナが破棄されたとき。チャンクが到着したイメージ。よく理解できていないがヤクの毛がりにならないよう、次回のテーマとしたい。
* Event 'end' ストリームのデータが終わった時
* Event 'error' ストリームが何らかの問題のため、データを生成できなくなったとき
* Event 'readable' ストリームからデータが読み出し可能になったとき。

```javascript
   import * as child_process from "child_process";

namespace Spawnspike {
   
 
    let proc = child_process.spawn('ls', ['-l', '|', 'grep', 'exec']);
        proc.stderr.on('data', (err) => {  // 昨日は、data 部分が error だった
        console.error(err.toString());
        console.log('spawn Error *********');
    })
    proc.stdout.on('data', (data) => {
        console.log(data.toString());
        console.log('spawn Success!');
    })
}

```

つまり、`error` はストリームがらみで問題が発生したケースのEvent なので、ここでは、errorのストリームの on を普通に読むためには `data`を指定する必要がある。

# spawn と exec 

リファレンスを見ていると、spawn も、exec のように、シェル実行が出来ることに気が付いた。３つ目のオプションを指定すればいい。違いを見てみよう。

上記のプログラムを実行。予想通り、パイプが処理できない。

```
$ node spawnspike.js
ls: '|' にアクセスできません
spawn Error *********
: そのようなファイルやディレクトリはありません
ls: 'grep' にアクセスできません: そのようなファイルやディレクトリはありません
ls: 'exec' にアクセスできません: そのようなファイルやディレクトリはありません

spawn Error *********
```

shell のオプションを指定

```
   import * as child_process from "child_process";

namespace Spawnspike {
   
 
    let proc = child_process.spawn('ls', ['-l', '|', 'grep', 'exec'], { shell: true});
        proc.stderr.on('data', (err) => {
        console.error(err.toString());
        console.log('spawn Error *********');
    })
    proc.stdout.on('data', (data) => {
        console.log(data.toString());
        console.log('spawn Success!');
    })
}
```

結果

```
$ node spawnspike.js
-rwxrwxrwx 1 root root  896  7月 17 04:04 exec.js
-rwxrwxrwx 1 root root  777  7月 16 17:13 exec.ts
-rwxrwxrwx 1 root root  635  7月 17 04:04 execfile.js
-rwxrwxrwx 1 root root  507  7月 16 16:58 execfile.ts

spawn Success!
```

実行に成功した。

# では、spawn と exec の違いは？

となると、spawn と exec の違いは？となるのだが、シェルが実行できるのは両方できるが、exec がバッファの終了まで待つのに対して、spawn はストリームだ。execFile は、シェルが実行できなくて、バッファ終了まで待つタイプ。

うん。すっきりした。
Aspect Fill, Aspect Fit, Scale to Fillの違い



Storyboardには画像を表示する際、**アスペクト比**やサイズを指定して表示方法を変えることができます。
**Aspect Ratio = アスペクト比って？**簡単に言ってしまえば、画像の縦横比です。

## 1. Storyboardで画像の用意方法を変える

画像を選んでいるときに、Viewの下のAspect Modeが選択できるようになるので、そこを変更します。
![Screen Shot 2017-07-16 at 12.08.53 PM.png](https://qiita-image-store.s3.amazonaws.com/0/158705/7aa10177-57db-ea2a-8cec-e65ba9df19ab.png)


##　2. それぞれの違い

Apiなどで画像を引っ張ってきた場合、どの画像サイズとアスペクト比の画像が来るかさっぱりわかりません。ランダムです。
この場合は最後の、Aspect Fill + Clip to Boundsにチェックを入れる必要があります。

![Screen Shot 2017-07-16 at 12.16.00 PM.png](https://qiita-image-store.s3.amazonaws.com/0/158705/9f2da0a2-398d-ff4e-f431-7da7b6727064.png)

**Scale to Fill**はアスペクト比を無視して、Bounds(指定した範囲内)に収めようとします。
この場合は横にのびちゃってますね〜。

**Aspect Fit** はアスペクト比を保ったまま, Bounds内に全て収めようとします。ただし、スペースが空きます。

**Aspect Fill** はスペースを空けないでBounds内に収めます。ただし、Boundsのサイズを無視するので、Storyboardで**Clip to Bounds**にチェックを入れる必要があります。
子供が使う端末を一時的にyoutube含むインターネットに繋げなくする


# 概要
子供がいると何かとうまくいかないことが多々ある。
私のiPadが息子に奪われYoutube専用端末になってしまった事が発端で、
息子は三度の飯よりもYoutubeが好きになってしまった。
時にはご飯を抜いてでも画面に喰らいつく。
ここまで子供を夢中にさせるYoutuberってすげーんだなと敬意を払いつつも、
さすがにご飯やお風呂そっちのけにされてしまうと、自分も妻もいろいろ困るので、対話での説得を試みたものの失敗してしまった。
相手は子供。伝わらない時は伝わらないのである。

ここでiPadを取り上げてしまうのが一番シンプルな対応なのだが、
泣いて叫んでカオスな感じになるのは目に見えているし、矛先が目の前の的（親、と言うか私）に向いてしまう。
いろいろ悩んだ挙句、ルーター側で対応することにした。

(正直、この情報は技術ネタというには浅すぎるしQiitaに書くべきではないと思っていたが、
ネットワークが分からないという方にこの話をしたところかなり喜ばれたので書くことにした。)


# 家庭用のルーターで制限かけられるのか

結論から言うとできる。
Amazonでbuffaloの6000円以内で売っているルーターであるが、
特に新機能としてフューチャーされているわけでもないので、
おそらくそれより古い機種でもできるとはず。
もちろんbuffalo以外でも可能だが、ここではbuffalo製の手順で紹介。

http://buffalo.jp/product/wireless-lan/ap/whr-1166dhp3/


# ログイン

BuffaloのデフォルトのルーターのURL、ID、パスワードはデフォルトでは以下の通りである。
Wifiに繋いでいる状態で以下のURLを入力

http://192.168.11.1/login.html

```
admin
password
```

![fullsizeoutput_78e7.jpeg](https://qiita-image-store.s3.amazonaws.com/0/75761/e50b4eae-6e8c-0b16-bcfa-cf865433e844.jpeg "fullsizeoutput_78e7.jpeg")


# 制限をかける端末(iPad)のIPaddressを確認する

デバイスコントロールを選択すると簡単にIPを確認する事ができる

![fullsizeoutput_78f2.jpeg](https://qiita-image-store.s3.amazonaws.com/0/75761/1e6be240-fb5a-4356-f56e-a308e73ea700.jpeg "fullsizeoutput_78f2.jpeg")
![fullsizeoutput_78dc.jpeg](https://qiita-image-store.s3.amazonaws.com/0/75761/d7b08a21-85c6-a82e-322d-4e7181e2ff15.jpeg "fullsizeoutput_78dc.jpeg")


# 制限をかける

詳細設定を選択
![fullsizeoutput_78ec.jpeg](https://qiita-image-store.s3.amazonaws.com/0/75761/a50a6e56-2d5c-10b7-b3aa-612ee6eefba9.jpeg "fullsizeoutput_78ec.jpeg")

IPフィルターを選択
![fullsizeoutput_78e1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/75761/d027b5cb-6c7f-5a68-7759-e8db6a791da4.jpeg "fullsizeoutput_78e1.jpeg")

IPフィルターの新規追加の欄を入力

上から

```
動作：拒否
方向：LAN -> Internet
送信元アドレス: 端末のIP(ここでは192.168.11.3)
宛先アドレス：空欄
プロトコル：全て（インターネットに一切繋がらなくなる）
```

![fullsizeoutput_78da.jpeg](https://qiita-image-store.s3.amazonaws.com/0/75761/418bf6c0-2d3e-9672-4076-91cba1356d7a.jpeg "fullsizeoutput_78da.jpeg")

追加ボタンを押す
![fullsizeoutput_78f4.jpeg](https://qiita-image-store.s3.amazonaws.com/0/75761/fc83eb15-1cac-9e9c-fe9e-4df9820092f6.jpeg "fullsizeoutput_78f4.jpeg")

登録完了


## 補足:Youtubeのみ、Netflixのみ見せなくし、他は見せないする方法
上の例では

```
宛先アドレス：空欄
```

を設定したが、制限かけたいIPaddress(レンジ)を全て書くことによって制御可能。
ただし、Youtube,Netflixは巨大サイトなので持っているIPaddress(レンジ)が膨大なのでかなり手間。

https://www.lifewire.com/ip-address-of-youtube-818157
によると

```
199.223.232.0 - 199.223.239.255
207.223.160.0 - 207.223.175.255
208.65.152.0 - 208.65.155.255
208.117.224.0 - 208.117.255.255
209.85.128.0 - 209.85.255.255
216.58.192.0 - 216.58.223.255
216.239.32.0 - 216.239.63.255
```

が登録レンジ。一個一個登録する必要がある。
（これが面倒なので、インターネットに出て行く全通信を止めることにした）


# 動作確認
iPadでYoutube含むインターネットに繋がらなった事を確認
![fullsizeoutput_78ea.jpeg](https://qiita-image-store.s3.amazonaws.com/0/75761/a1f2f89e-01b4-dddd-ccd9-e59d8f5f650b.jpeg "fullsizeoutput_78ea.jpeg")

# 制限解除
削除ボタンを押すのみ
![fullsizeoutput_78f7.jpeg](https://qiita-image-store.s3.amazonaws.com/0/75761/474bf41b-06a1-72bf-defa-54c821626896.jpeg "fullsizeoutput_78f7.jpeg")

# 最後に
一番理想的なのはルーターで制御することではなく
子供との対話で制御できるのが一番であることは言うまでもない。

もちろんインターネットに接続してストリーミングで見る場合は制御できるが、
プライムビデオやNetflixなどのように一度動画をダウンロードされてしまうと、もうネットワーク経由で制御はできない。

良い家庭環境を。
ニューラルネットワークについてメモ

「ゼロから作るDeep Learning」でわかったことをメモ

#損失関数(loss function)
ニューラルネットワークの性能の悪さの指標
ニューラルネットワークの学習は，勾配を手掛かりにパラメータの更新を行う．

##二乗和誤差(mean squared error)
$y_k$はニューラルネットワークの出力数，$t_k$は教師データ，$k$はデータの次元数
ニューラルネットワークの出力は確率として解釈できる．$(0 \leq y_k \leq1)$
また$t_k$はone-hot表現．

```math
E = \frac{1}{2}\sum_{k}(y_k-t_k)^2
```

##交差エントロピー誤差(cross entropy error)
$\log$は底が$e$である．
$y_k$と$t_k$は二乗和誤差と同様．
出力$y_k$が1に近いほど誤差エントロピーは小さくなる．

```math
E = -\sum_{k}t_k\log y_k
```

#ミニバッチ学習
訓練データから一定数選び出した塊 = ミニバッチ
このミニバッチごとに学習を行う．

#勾配法(gradient method)
勾配を利用して損失関数の最小値を探す．
現在の場所から，勾配方向に一定の距離進むということを繰り返して，関数の値を減らす．
正確には勾配降下法(gradient descent method)と呼ぶ．

```math
x = x - \eta \frac{\partial f}{\partial x_0}
```

$\eta$は更新の量であり，学習率と呼ばれる．
このような人の手によって調整されるパラメータをハイパーパラメータと呼ぶ．

#確率的勾配降下法(Stochastic Gradient Descent)
ミニバッチとして無作為に選んだデータに対して行う勾配降下法．
##学習手順
###0. 前提
適応可能な重みとバイアスが存在する．この重みとバイアスを訓練データに適用することが「学習」
###1. ミニバッチ
訓練データの中からランダムにデータを一部取り出す．ミニバッチの損失関数の値を減らす．
###2. 勾配の算出
ミニバッチの損失関数を求めるために，各重みパラメータの勾配を求める．
###3. パラメータの更新
重みパラメータを勾配方向に更新する．
###4.反復
1~3を繰り返す．

次回は，二層のニューラルネットについて実装を行う
プログラミング 4 か月目

プログラミングを始めて 4 か月が経とうとしています。

　だんだんと難しい概念が登場し、前に進みづらい状況ではありますが、それでも少しずつ前に進んでいっております。今回も前回と同じような感じで書いていきたいと思います。

#:pencil2: 進捗状況
**Progate**

PHPⅡ~Ⅳ : ※オブジェクト指向
Ruby on Rails5 ：復習も兼ねなから、Ⅵ～Ⅹを学習中

☆ Ruby on Rails5 は 2017/7/18 現在、Ⅺ まで学習できます。

※ PHPのオブジェクト指向で学習したもの

カプセル化（public,protected,privateの違い）　
クラスプロパティ・クラスメソッド（private static)


**paiza**

※ Ruby :　メソッド・クラス　（第7・8レッスン）　
DB/SQL入門編 : 新たにデータベースについて学習を始めました。
PHP+MySQL：連携の仕方や phpMyAdmin の使い方を一通り学習


※ オブジェクト指向については、こちらの説明の方が分かりやすいかと思います



**--　気づいたこと　--**

　Progate の PHP Ⅱでいきなりオブジェクト指向にぶち当たったので、かなり取っつきにくい感じがしました。恐らくですが、その当時は**メソッド・クラスの理解がそれほどなかったから**だかと思います。

　RubyⅢ・Ⅳ でメソッドとクラスについて重点的に繰り返し学習をしたら、オブジェクト指向の理解度が深まりました。

　ですので、個人的にですが**メソッド・クラスの理解を深めてからオブジェクト指向を学習することがいい**かと思います。

#:pencil2: 新着事項
　4 か月目で新たに取り入れたことや、プログラミングで意識したことを書いていこうと思います。

#:earth_asia: Webアプリ制作
  4 か月目で Web アプリ制作に挑戦しました。

###時計・カウントダウンタイマー
　簡単にではありますが、JavaScriptで時計とカウントダウンタイマーを制作しました。

###To Do List
　 paiza で紹介された「Mavo」というフレームワークを使って、簡単な「To Do List」を制作しました。

#:pencil: ポートフォリオサイト制作

　ポートフォリオサイトで新たに作成したものや更新したものを書いていこうと思います。

###Webアプリケーションページ更新
　To Do List を作成し、公開しました。時計やカウントダウンタイマーは後ほど公開しようと思います。

###info ページ設立

　ポートフォリオサイトに更新情報を載せたら分かりやすいと思い、新たに設立しました。

#:star: 最後に
　
　簡単にではありますが、Web アプリケーションを作ることが出来ました。一歩一歩スキルが上がっていくのを実感しております。

　まだ分からないことがたくさんありますが、一日でも早く上達できるように頑張りたいと思います。
Arduinoのシリアル入力から文字列を読み取る

Arduinoのシリアル入力から文字列を受け取りたい。

シリアルの入力を受け取るには`Serial.read()`を使えばいいのでが、このメソッドは１バイト分の入力を受け取るのみである。よって文字列を受け取るにはいくかの考慮が必要になる。

- 取得可能なデータがあるかぎり、取得を繰り返す
- 取得したデータを配列に格納する
- 終端文字を追加した上で文字列に格納する

なんというか、まとめてやってくれるライブラリが存在する気がしてならないけれど、書いたのでメモ。

訂正: こんな面倒な事しないでもReadStringで一発でした。
- https://www.arduino.cc/en/Serial/ReadString

```cpp
String label = "Tick";
char buffer[33];

void setup() {
  Serial.begin(9600);
}

void loop() {

  int index = 0;
  bool hasData = false;

  //入力された文字列の取得を試みる
  while (Serial.available() > 0) {
    hasData = true;
    buffer[index] = Serial.read();
    index++;
    //バッファ以上の場合は中断
    if (index >= 32) {
      break;
    }
  }
  //終端文字を足す
  buffer[index] = "\0";

  //バッファがある場合は文字列を更新して、終端以降を除去
  if (hasData == true) {
    label = buffer;
    label.trim();
  }

  delay(500);
  Serial.println(label);
}
```
AWSにRedmineを構築していた。

# とりあえずプロジェクトを動かすことになったのでEC２でRedmine立ててみた。

## 環境
AWS　EC２　Redhat Linux
t2.micro

## SELinuxの無効化

`sudo su -
cd /etc/selinux/
vi config `

/etc/selinux/config
` SELINUX=enforcing
　　　↓変更
SELINUX=disabled `

`shutdown -r 0`

## 仮想メモリの拡張
`sudo su -
dd if=/dev/zero of=/swapfile bs=1024 count=1572864
ls -l /swapfile
mkswap /swapfile
swapon /swapfile
swapon -s`

## 必要なパッケージのインストール
Bitnami Redmineのインストールで必要なものをインストール
`yum -y install wget glibc-devel perl perl-Data-Dumper`

## Bitnami Redmineのダウンロード
BitnamiのサイトからRedmineをダウンロード

`cd /media/
mkdir installer
cd installer/
wget https://bitnami.com/redirect/to/146294/bitnami-redmine-3.3.3-0-linux-x64-installer.run`

実行権限を与えます
`wget https://bitnami.com/redirect/to/146294/bitnami-redmine-3.3.3-0-linux-x64-installer.run`

## Bitnami Redmineのインストール
`./bitnami-redmine-3.3.3-0-linux-x64-installer.run`

必要な設定項目を入力。
稼働を確認。
プライベートIPで接続して動作確認ができればOk
javascriptの開発生産性について

参考：パーフェクトjavascript

この本で、
javascriptは開発の手軽さを優先して作られた言語である、
と紹介されています。

そして、
javascriptの開発生産性を上げているいくつかの要因のうち、
以下３つが紹介されています。

- **インタプリタ言語であること**
- **動的型言語であること**
- **リテラル表記の表現力**

jsなんとなく使ってる勢なので"リテラル表記の表現力"があまりイメージ湧かなかったので軽くまとめます:hugging_face:

# リテラルとは

（他の言語でも登場する言葉ですが既知かもしれないですが・・・）
javascriptでは値の表現にリテラルが使われます。
固定値であり変数ではないものです。

以下６つのリテラルが用意されています。

- 配列リテラル
- 真偽値リテラル
- 整数
- 浮動小数点リテラル
- オブジェクトリテラル
- 文字列リテラル

# 開発の手軽さを上げている「リテラル表記の表現力」

オブジェクトリテラルの表現を例として、
いくつものオブジェクトリテラルの書き方が用意されています。

[参考][オブジェクトリテラルのプロパティ/メソッドのいろんな書き方（ES6版）](http://qiita.com/kura07/items/356bd37733f457d3177f)

```js
var d = 42;
var obj = {
  a: 42,
  "b": 42,
  0: 42,
  ["c"] : 42,
  d,
  e(){},
  get f(){},
  set g(v){},
  *h(){}
};
```
Excel で サイト内のリストの一覧を手軽に作る

Excel の OData 連携機能を使うと、簡単にノンプログラミングで SharePoint Online のリスト一覧を作ることができます。
※ SharePoint Server 2013, 2016 でも行けます。

# 準備
まず初めに、Excel の OData 連携機能で呼び出す URL を用意します。
今回はサイト内のリスト一覧がほしいので、以下のような URL になります。

https://[tenant].sharepoint.com/_api/web/lists
※[tenant]部分は、任意の URL に変更してください。

IE や [Postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop) を使って、上記 URL できちんと期待する結果が返ってくるか、予め確認をしておきましょう。

# Excel OData 連携
Excel は前から外部データを取り込む機能が豊富でしたが、現在は、OData（つまり、REST API など）から取り込むことができます。
Excel を起動して、リボンから [データ]>[データの取得]>[その他のデータソースから]>[OData フィードから] をクリックします。
![rest.png](https://qiita-image-store.s3.amazonaws.com/0/76139/66fb8d62-27af-863b-ab38-a2f35ff9bd6c.png)

以下のダイアログが表示されるので、先ほど準備した URL を貼り付け、[OK] ボタンをクリックます。
![rest2.png](https://qiita-image-store.s3.amazonaws.com/0/76139/1358cdd1-54d7-8240-5706-886f1c7147b0.png)

OData フィードダイアログが開くので、[組織アカウント] を選択し、[サインイン] ボタンをクリックします。
すると、いつもの Office 365 認証ダイアログが表示されるので、サインインします。
![rest3.png](https://qiita-image-store.s3.amazonaws.com/0/76139/77541423-5a27-3dbc-f103-8c71d8eb135c.png)

サインインできたら、[接続] ボタンをクリックします。
![rest4.png](https://qiita-image-store.s3.amazonaws.com/0/76139/65e69adb-2bbd-4baa-c70c-28a53697d247.png)

クエリが実行されて、プレビューが表示されます。
問題なければそのまま [読み込み] ボタンをクリックします。
ここで色々表を加工することもできますが、「手軽に」が主旨なので、このまま進めます。
![rest5.png](https://qiita-image-store.s3.amazonaws.com/0/76139/b2184cb8-79ae-0bca-d7fe-c7d2741e2f15.png)

これで読み込み完了です。
Excel シートにサイト内のリストの一覧が、たくさんのプロパティと一緒に表示されていると思います。
各プロパティの意味は、[リファレンス](https://msdn.microsoft.com/library/office/jj193041(v=office.15).aspx)で調べてください。

# Excel を加工して完成
ここまでくればただの Excel なので、あとは好きなように編集して、お望みの一覧表を作りましょう。
例えばこれくらいのだったら、最初の手順からものの数分で完成してしまいます。
![rest6.png](https://qiita-image-store.s3.amazonaws.com/0/76139/7411c3e7-945e-af65-e8d6-af08cca60535.png)

# 所感など
Excel の OData 連携はかなり便利です。
SharePoint をはじめとする O365 系のサービスは REST API を必ずサポートしていますし、REST API は現在普通に使われている技術なので、これを Excel と組み合わせることで、ノンコーディングで色々なものが作れそうです。
是非試してみてください。
フォルダ内の画像のパスと縦横サイズをSASSまたはLESSの変数やミックスインとして書き出すnpmモジュールを作った

https://www.npmjs.com/package/bgi の紹介

##これはなに？
**画像の入ったフォルダで実行する**と、画像名で**画像のパス、width、heightがLESSまたはSASS形式の変数やミックスインとして書き出される**。

##効果
**コーディングがすげー早くなる。**

##使い方
###SASSの場合
画像フォルダに移動して、```bgi --pathVar imagepath --type sass```を実行。
すると、

```scss:images.scss
$icon_Addlink-width:38px;
$icon_Addlink-height:37px;
$icon_Addlink-image:url("#{$imagepath}icon_Addlink.png");
@mixin icon_Addlink(){
  background-image:url("#{$imagepath}icon_Addlink.png");
  background-size:38px 37px;
}
@mixin icon_Addlink--block(){
  background-image:url("#{$imagepath}icon_Addlink.png");
  background-size:38px 38px;
  width:38px;
  height:37px;
}
```
こんな感じのファイルが出力される。
###LESSの場合
画像フォルダに移動して、```bgi --pathVar imagepath```を実行。
すると、

```less:images.less
@icon_Addlink-width:38px;
@icon_Addlink-height:37px;
@icon_Addlink-image:url("@{imagepath}icon_Addlink.png");
.icon_Addlink(){
  background-image:url("@{imagepath}icon_Addlink.png");
  background-size:38px 37px;
}
.icon_Addlink--block(){
  background-image:url("@{imagepath}icon_Addlink.png");
  background-size:38px 37px;
  width:38px;
  height:37px;
}
```
こんな感じのファイルが出力される。

##使用例
###SASSの場合
```scss:main.scss
$imagepath:"../img/mypage/";
@import "#{$imagepath}images.scss";
div.icon--addlink{
  @include icon_Addlink--block();
}
span.icon--addlink{
  @include icon_Addlink();
}
```
###LESSの場合
```less:main.less
@imagepath:"../img/mypage/";
@import "@{imagepath}images.less";
div.icon--addlink{
    .icon_Addlink--block();
}
span.icon--addlink{
    .icon_Addlink();
}
```
**変数を指定することも出来る**が、**ショートハンドとして用意されている関数／ミックスインを使うのが楽**。
例えば**センタリングしたい場合など高さのみ使いたい**ときは**個別に変数を用いれば良い**。

## 背景
Webサイトのコーディングしてると、殆どデザインの画像を切り貼りしてるだけ、って事がよくあります（よね？）。
このとき、imgタグを使うならHTMLに書くわけですが、CSSで書くなら```background-image```を使うことになります。
こんなかんじ。

```css:main.css
div.icon--addlink {
  background-image: url("../img/mypage/icon_Addlink.png");
  background-size: 38px 37px;
  width: 38px;
  height: 37px;
}
span.icon--addlink {
  background-image: url("../img/mypage/icon_Addlink.png");
  background-size: 38px 37px;
}

```
しかし、**ファイル名を書くだけならまだしも**、**切り出し画像のwidthとheightを取るのにいちいちファイルを右クリック**したり、**その数値をCSSに書き込んだりする**のが**非常に面倒くさい**。
**Cocos2d-jsでゲーム作るときはファイル名だけでプリロードしてsprite初期化すればwidthもheightも取れる**のに！
でも考えてみれ**ばLESSやSASSなら変数定義ができる**んだから**同じことが出来る筈**、ということで作った。

##詳細
hadakadenkyu / bgi — Bitbucket
https://bitbucket.org/hadakadenkyu/bgi/overview
pyvmomiでVMのクローンをしてみる

pyvmomiを使ってVMwareのクローンを実行してみました。ここでは、簡単なコピーをするだけのスクリプトしかありません。
Windowsのsysprepを実行するような処理(カスタマイズ仕様)については、今度書こうと思います。  
こういうスクリプトを作っておけば、ストレージの負荷検証ツール(クローン処理を同時に実行)などにも使えたりします :-)

# 実行環境

| 項目    | バージョン           |
|:--------|:---------------------|
| vCenter | 6.5.0 ビルド 4602587 |
| pyvmomi | 6.5.0.2017.5.post1   |

# 検証方針

* `centos` という仮想マシンを元に `TEST` という仮想マシンを作成する。
* クローン先は `esxi-03.local` というホストを指定します。

# ソース

```python
#!/usr/bin/python3
from pyVim.connect import SmartConnect, Disconnect
from pyVmomi import vim, vmodl
import ssl
import atexit

# 接続先情報
host = 'ESXi or vCenter IP'
username = 'username'
password = 'password'

# クローン情報
clone_target_vm = 'クローン元VM名'
target_host = '展開先ESXiホスト名'
new_vm_name = '新しいVM名'

def get_mob_info(content, mob, target=''):
    """
    Management Objectを取得する。
    targetが指定されていない場合はContainerView(https://goo.gl/WXMfJK)で返す。

    :type content: vim.ServiceInstanceContent
    :param content: ServiceContent(https://goo.gl/oMtVFh)

    :type mob: Management Object
    :param mob: 取得する対象のManagement Objectを指定

    :type target: str
    :param target: 返すmobの名前を指定

    :rtype: Management Object
    :return: 指定したManagement Object又はContainerViewを返す
    """
    r = content.viewManager.CreateContainerView(content.rootFolder,
                                                [mob],
                                                True)

    # 返すmobを名前で指定する場合
    if(target):
        for i in r.view:
            if(i.name == target):
                r = i

    return r

def main():
    # SSL証明書対策
    context = None
    if hasattr(ssl, '_create_unverified_context'):
        context = ssl._create_unverified_context()

    # 接続
    si = SmartConnect(host = host,
                      user = username,
                      pwd = password,
                      sslContext = context)

    # 処理完了時にvCenterから切断
    atexit.register(Disconnect, si)

    # ServiceContent(Data Object)を取得
    content = si.content

    # RelocateSpecを作成 https://goo.gl/sJdBRH
    relocate_spec = vim.vm.RelocateSpec()
    relocate_spec.host = get_mob_info(content, vim.HostSystem, target_host)

    # CloneSpec作成 https://goo.gl/7ueuqR
    clone_spec = vim.vm.CloneSpec()
    clone_spec.location = relocate_spec
    clone_spec.powerOn = False
    clone_spec.template = False

    # Clone実行
    target_vm = get_mob_info(content, vim.VirtualMachine, clone_target_vm)
    target_vm.CloneVM_Task(folder = target_vm.parent, name = new_vm_name, spec = clone_spec)

if __name__ == '__main__':
    main()
```

各specの詳細については、ソースのURLで確認してください。

# 実行

(1) 変更必要な箇所を修正します。以下は、クローン情報の例です。

```python
(snip)
# クローン情報
clone_target_vm = 'centos'
target_host = 'esxi-03.local'
new_vm_name = 'TEST'
(snip)
```

(2) 実行します。

```bash
[root@localhost pyvmomi]# ./vm_clone.py
```

(3) 仮想マシンが作成されたことを確認します。

![](https://sky-joker.tech/wp-content/uploads/2017/07/0daeda1534e720536b21ab59b65b8a6a.png)
今更聞けない配列とリストのデータ構造

# はじめに
プログラミング学習を始めて、Java覚えたてで開発していたころ
先輩からリストと配列の違いを聞かれて答えられず、困惑したのを思い出しました。

実務を重ねて3年、ようやっと実感として理解が深まってきたので
備忘録としてメモ程度ですがまとめておこうと思います。

# 配列のデータ構造
- 要素を一列に並べて管理する
- 最初から固定の要素数でメモリを確保する
- 用意した要素数が連続した領域にメモリとして確保される
- 添え字を使ってメモリアドレスを直接指定できるので要素へのアクセスが速い
- 途中に要素を挿入したり追加したりするには元にあった要素をズラす必要があり大変


### ＊ Javaの配列操作例
```java:ArrayExample.java
// 4つの要素が入るint型の配列を作成
int array[] = new int[4];

// 各要素に任意の数字を格納（何も追加しなければ初期値は0）
array[0] = 5;
array[1] = 2;
array[2] = 8;
array[3] = 16;

// 2番目の要素（添え字[1]）を4に変更する
array[1] = 4; // 単純に上書きすれば良い


// 配列の要素数を5個に増やす→簡単にはできない
// 別の配列を作ってコピーする必要がありサイズによってはメモリ負荷が倍増
// （実装方法はさまざま。ここでは一例を）

int box[] = new int[5];
System.arraycopy(array, 0, box, 0, 4); // arrayの中身をbox[0]〜4つ分コピー

```


# リストのデータ構造
- 要素を一列に並べて管理する
- 要素数が可変できる
- 前後にポインタが付与されポインタで接続されながらあいているメモリ領域に要素が格納されていく
- 要素にアクセスするには先頭からポインタを辿っていく必要があり時間がかかる
- 途中に要素を挿入したり、削除したりするにはポインタの接続を変えるだけなので速い

### ＊ Javaのリスト操作例
Javaのリストの場合、厳密にはArrayListとLinkedListで
データへのアクセス方法が異なるため処理時間が微妙に違ってきます。
ここでは、配列と比較するためLinkedListの例を実装します。

```Java:ListExample.java
// importなどは省略


// String型を格納できるリストを生成
LinkedList<String> mojiList = new LinkedList<String>();

// 任意の文字列をリストに追加（いくつでも）
mojiList.add("ひとつめ");
mojiList.add("ふたつめ");
mojiList.add("みっつめ");

// 「ふたつめ」を「二つ目」に変更
mojiList.set(1, "二つ目");

// 3番目に入っている要素を取得
// (実際はポインターを辿ってアクセスするため処理時間が配列よりもかかる)
String moji = mojiList.get(2); // 「みっつめ」が返る

// 「ひとつめ」の直後に「一つ目」を挿入→「二つ目」が後ろにずれる
//　（ポインターをつけかえるだけなので処理速度は速い）
mojiList.add(1,"一つ目");

// 指定した位置にある要素を削除
mojiList.remove(2); // 「二つ目」が削除される

// このほか、LinkedListには先頭の要素へのみ処理を行うメソッドもあります
mojiList.remove(); // 先頭の要素、「ひとつめ」を削除

```





# まとめ
要するに、配列もリストも「データを一列に並べる」という点では同様。
ただし、どちらにもメリット・デメリットがあります。

||メリット|デメリット|
|:----------|:----------|:----------|
|配列|各データへのアクセスが容易で処理時間を短縮可能|データの追加、挿入や、削除に時間がかかる|
|リスト|追加箇所にアクセスできていれば、データの追加や削除が容易|特定のデータにアクセスするためにリストの先頭から辿る必要がある|

データにアクセスすることが多い場合は配列、
データの追加・削除が頻繁に行われる処理にはリスト、
と使い分けが重要になるみたいです。

とはいえ最近のコンピュータ性能からすると
どこまで気にするべきかは疑問。

Javaに限っていえば、配列かリストかに加えて、
ArrayListを使うのかLinkedListを使うのか、も念頭に置いたほうがよい。
参考：[LinkedList と ArrayList の使い分け方](http://qiita.com/BumpeiShimada/items/522798a380dc26c50a50)


# おわりに
データ構造やアルゴリズムについては以下の書籍を参考に勉強しました。

- [アルゴリズム図鑑〜絵で見てわかる36のアルゴリズム〜](http://amzn.to/2v696Qv)
- [Javaによるアルゴリズムとデータ構造](http://amzn.to/2v6HXNA)

いきなりプログラミング学習から入るのではなく、
並行してデータ構造、アルゴリズムの基礎も頭にいれていたほうが良いですね。

なお、簡単なソースコードの検証には[paiza.io](https://paiza.io/)が便利です。

### ＊ お願い
間違えている情報やリンク切れがありましたらどうぞご指摘ください。