OmniAICreator/Qiita-1.07M huggingface dataset:
Sphinx、表の一部を装飾する（一部だけスタイルを変えたい）

Sphinx & reStructuredText は簡単で便利ですが、あえて複雑なことをしたくなる場合もあります。とくに表の一部だけスタイルを変えたいということは時々あります。

簡単にいうと「.. raw:: html」を使用し、表を div タグで囲み、CSS でその div を ID で指定、その直下のテーブルを指定して修飾します。


```rst
.. raw:: html

    <style type="text/css">
        #theTableBlock table tr:nth-child(1) td:nth-child(3)  {
            color: red;
        }
    </style>
    <div id="theTableBlock">

+----+--------+------------+
| No | 品名   | 金額       |
+====+========+============+
| 1  | Orange | -2000      |
+----+--------+------------+

.. raw:: html

    </div>
```

## 追記：ツール

　Excel で表のスタイルだけを CSS にして書き出すアドインを作りました。

[Excel で、表の修飾を CSS で書き出すアドイン - Qiita](https://qiita.com/Tachy_Pochy/items/7749a8b4a851391f3955)

## キーワード

rst reStructuredText 表 背景色 色 装飾 スタイル CSS
Amazon Linux に PHP7(remi)を入れる手順メモ

##環境 t2.micro

```
cat /proc/version
Linux version 4.4.8-20.46.amzn1.x86_64 (mockbuild@gobi-build-60009) 
```
##手順

/etc/yum.repos.d/epel.repo　は最初から入っていたので

- Remi リポジトリを入れます。

```rpm:Remi
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
```
----
- epelからlibwebp を入れます。

gd-last が libwebpを必要としてますが、amzn-main.repo のはversionが合わない。

```yum:epel
yum -y install libwebp --disablerepo=amzn-main --enablerepo=epel
```
----

- amzn-mainから必要なライブラリ郡を入れます。

```yum:amzn-main
yum -y install libmcrypt libtool-ltdl libtidy libXpm libtiff gd-last autoconf automake
```
----

- Remi70からPHP7を入れます。

```yum:Remi
yum -y install --disablerepo=amzn-main --enablerepo=remi-php70 php php-opcache php-devel php-mbstring php-mcrypt php-phpseclib-crypt-blowfish php-pecl-apc php-gd php-mysqlnd php-xml

```
``※追記　AWS SDK for PHP 3.x の Aws\S3\Transfer::transfer で php-xmlが必要。``

```
# php -v
PHP 7.0.7 (cli) (built: May 25 2016 18:36:46) ( NTS )
Copyright (c) 1997-2016 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2016 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2016, by Zend Technologies
```

###参考にさせてもらいました
[Amazon Linuxで nginx + php7 環境構築](https://saku.io/nginx-and-php7-on-amazon-linux/)
Pepper アプリ開発クイックスタートと最初の課題

この資料について
====

Pepper のアプリ開発のさわりを超ざっくり解説する。

Hello world
====

- Choregraphe で開発する
  - https://developer.softbankrobotics.com/jp-ja/downloads/pepper
- 画面にボックスを配置して、イベントを繋いでアプリを構築する
- ボックスは、入れ子になっているものとプログラムが入っているものの２種類
  - 例) Say ボックスは入れ子 / Say Text ボックスはプログラム

TRY
----

- Say ボックスを使って、 Pepper に「こんにちは世界！」と言わせる

基本のアプリ開発
====

- ユーザーとの会話は Dialog ボックスを用いる
- Dialog ボックスを作ると、自動的に QiChat (拡張子が .top のファイル) が作成される
- QiChat に会話を定義する

TRY
----

- ユーザーが「終了」と言うと「終了します」と言って終了する
- タブレットを触ると「終了します」と言って終了する

HTML/JavaScript との連携
====

- タブレットに HTML を表示することができ、 JavaScript が実行可能
- Pepper と通信する JavaScript のライブラリがある
- ライブラリを使って Pepper にイベントを送信したり、イベントを受け取ったりできる
- ライブラリを使って直接 Pepper の制御をすることもできるが、できることは限られる

TRY
----

- Choregraphe で既存のプロジェクトを開いて動きを追う


補足
====

- HTML/JavaScript を使うとタブレットでできる幅が増えるが、開発難易度が跳ね上がるのでそのアプリで本当に必要なのかよく検討する
  - バーチャルロボットでテストすることができない
  - アーキテクチャが複雑になりがち
  - 画像を表示する / タブレットをタップする 程度であればChoregrapheだけで実現可能
  - 大抵の要件は画像を表示するレベルで解決できるはず
  - タップ操作が必要ならそれは Pepper に任せる仕事ではない可能性がある
AWS SDK (JavaScript)でEC2のキーペアを作る

思った以上に簡単に作れたのでメモ。

## キーペアを作成する

```
var AWS = require('aws-sdk');

var ec2 = new AWS.EC2({
	apiVersion: '2015-10-01',
	accessKeyId: YOUR_AWS_ACCESS_KEY,
	secretAccessKey: YOUR_AWS_SECRET_ACCESS_KEY,
	region: REGION
});

var params = {
  KeyName: YOUR_KEYNAME,
  DryRun: false
};
ec2.createKeyPair(params, function(err, data) {
  if (err) console.log(err, err.stack); // an error occurred
  else     console.log(data);// successful response
});

```

Nodeで実行すると、このようにキーの情報がJSONで表示される。

```
$ node index.js 
{ KeyName: 'test_key',
  KeyFingerprint: '37:31:b4::2b:XX:XX:Xf:cf',
  KeyMaterial: '-----BEGIN RSA PRIVATE KEY-----\nMIIEowIBAAKCAQEAmYcCaaciwzi8r2YXCObu+Afs9/+KFMs57I2tIfPnpzGj0uTkGnLdhK6BVMxf\nwFV2c3yz/JvPVgK/+HDx03SrBIXeFADdht27Dew2rxYu/8QKBgEhF44EJaOkZL1vicPb34zsFtJpa\nPc039MpDcKFji0+gtM+jzbCagSVm4YP3VoM3gck9sYvXjnwB69CUo4IDH+iE5SFC3ockB\n-----END RSA PRIVATE KEY-----' }
```

あとはこれをpemファイルでDLすればOK。

##S3にキーを置く
わざわざSDKでキーを作るということは、前後の処理含めて自動化させたいということだろうということで、作ったファイルもS3に放り込んでおくようにする。

```
var AWS = require('aws-sdk');

var ec2 = new AWS.EC2({
	apiVersion: '2015-10-01',
	accessKeyId: YOUR_AWS_ACCESS_KEY,
	secretAccessKey: YOUR_AWS_SECRET_ACCESS_KEY,
	region: REGION
});

var params = {
  KeyName: YOUR_KEYNAME,
  DryRun: false
};
ec2.createKeyPair(params, function(err, data) {
  if (err) console.log(err, err.stack); // an error occurred
  else     sendKeyPair(data);// successful response
});


function sendKeyPair( data ) {

	var config = conf.getConf();
	AWS.config.apiVersions = {
	  s3: '2006-03-01',
	  accessKeyId: YOUR_AWS_ACCESS_KEY,
	  secretAccessKey: YOUR_AWS_SECRET_ACCESS_KEY,
	};

	var s3 = new AWS.S3();
	var params = {
	  Bucket: YOUR_S3_BUCKET_NAME,
	  Key: data.KeyName + '.pem',
	  ACL: 'bucket-owner-full-control',
	  Body: data.KeyMaterial,
	  ContentType: 'application/x-pem-file',
	  Expires: new Date()
	};
	s3.putObject(params, function(err, data) {
	  if (err) console.log(err, err.stack); // an error occurred
	  else     console.log(data);           // successful response
	});

};

```
jquery、画面スクロールの簡単な例

jQueryを使って画面をスムーズにスクロール

コチラを使うためにはjQueryが必要です。
jQueryは< head>～</ head>の間に下記のようなタグを入れることで使うことができます。

```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
```


テスト用のコードです。

```css:test.css
body {
  height: 2000px;
}
#test {
  margin-top: 1500px;
}
```

```html:test.html
<html>
<head>
  <title></title>
</head>
<body>
  <button id="btn">スクロール</button>
  <div id="test">hello</div>
</body>
</html>
```

```js:test.js
$(document).ready(function() {
  $(document).on("click", "#btn", function() {
    $("html, body").animate( {scrollTop: $("#test").offset().top}, 100 );
  });
});
```

一つのファイルでまとめてテストすることも可能です。

```html:test.html
<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <title></title>
<style>
body {
  height: 2000px;
}
#test {
  margin-top: 1500px;
}
</style>
</head>
<body>
  <button id="btn">スクロール</button>
  <div id="test">hello</div>
<script>
$(document).ready(function() {
  $(document).on("click", "#btn", function() {
    $("html, body").animate( {scrollTop: $("#test").offset().top}, 100 );
  });
});
</script>
</body>
</html>
```

説明としては

```
$(document).on("click", "#btn", function() {
  $("html, body").animate( {scrollTop: $("#test").offset().top}, 100 );
});
```

１．btnというIDを持つ要素(id="btn"のボタン)がクリック(click)された時処理を実行します。
２．animateというjQueryを関数を使います。animateは画面や要素を動かせる関数です。
３．画面のスクロールをtestというIDを持つ要素の位置に持っていきます。最後の「100」は速度です。
UI BootstrapのModalが取り残されるのを回避する方法

AngularJSとUI BootstrapでModalを表示するとブラウザの戻るボタンを押したり、ChromeだとBackspaceキーを押して前の画面に戻ったときに取り残されてしまう。

# 回避方法

```js:sample.js
$rootScope.$on('$locationChangeStart', function() {
  if ($uibModalInstance.opened) {
    $uibModalInstance.dismiss('cancel');
  }
});
```

`$locationChangeStart`でURLの変更を検知して、閉じてあげる。
Babel を使って React の jsx をコンパイルする

React は基本的に JSX というシンタックスで書くのだけど、
実際に使用するときには ES5 の js にコンパイルしないといけない。
（ライブラリを使えばそのままブラウザで実行できるようになるけどそれについては触れない）

公式が JSX をコンパイルするツールを出してはいるのですが、最近は ES2015 でも書きたいということもあるので、それを含めてコンパイルしてくれる [Babel](http://babeljs.io) を使う。
Babel のほうが一般的によく使われてるらしいですし。

## Babel をインストール

[公式サイトの Setup のページ](https://babeljs.io/docs/setup/#installation)を参考にやります。

とりあえず npm init しておきます。  
質問は全部 y で。

```bash
$ npm init
```

babel をインストール。

```bash
$ npm install --save-dev babel-cli
```

package.json の 'devDependencies' に 'babel-cli' が追加されてれば OK。

```js:package.js
  ...
  "devDependencies": {
    "babel-cli": "^6.9.0"
  },
  ...
```

package.json の 'scripts' を下記のように変更します。

```js:package.js
  ...
  "scripts": {
    "build": "babel src -d lib"
  },
  ...
```

ちなみにこれは 'src' ディレクトリにあるものをまとめてコンパイルして、libディレクトリに出力するという意味。
-d オプションは出力先を指定するオプションです。

これで下記コマンドを叩けば build が走ります。

```bash
$ npm run build
```

lib/ にファイルが生成されたら OK。

### (おまけ) .babelrc ではなく package.json に設定を書く

ちなみに上記の .babelrc に書いた babel の設定は package.json に書くこともできます。
その場合、下記のように "babel" って項目を追加すれば OK です。

```js:package.json
  ...
  "babel": {
    "presets": ["react", "es2015"]
  },
  ...
```


## プラグインを使う

上記のようにやるだけでは Babel はほぼ何もしてくれません。
Babel がどのようにコンパイルするのか、に関してはプラグインとして別ライブラリになっているものを別途入れる必要があります。
目的に合ったプラグインを入れましょう。

プラグイン一覧は[こちら](https://babeljs.io/docs/plugins/)。

今回は react の JSX と es2015 をコンパイルしてほしいので、下記のプラグインを入れます。

- [React preset](http://babeljs.io/docs/plugins/preset-react/)
- [ES2015 preset](http://babeljs.io/docs/plugins/preset-es2015/)

```bash
$ npm install --save-dev babel-preset-react babel-preset-es2015
```

インストールできたら使用するプラグインを .babelrc ファイルに記載します。

```js:.babelrc
{
  "presets": ["react", "es2015"]
}
```

これで再度下記コマンドで build したらプラグインで入れたもののコンパイルをしてくれます。

```base
$ npm run build
```

ちなみに babel コマンドでコンパイルすることも可能です。

```bash
$ ./node_modules/.bin/babel src -d lib
```
めざせpythonライブラリマスター （４）Ascii Py

#【ライブラリ説明】
　アスキーコードで絵が描けます。

#【準備】
　python 3.3　より上のバージョンを使います。

#【プログラム】
　ascii_py [options]　で実行できます。
　私は　ascii_py -d imoyokan.jpg　で実行しました。

　Options:
　　-h, --help
　　　ヘルプメッセージ表示
　　-o FILENAME, --out=FILENAME
　　　保存するファイル名？（私の環境では保存できなかった）
　　-w WORDS, --words=WORDS
　　　使用する文字（私の環境では指定できなかった）
　　-s STEP, --step=STEP
　　　よく分からん
　　-d, --density
　　　out.jpgという名前で出力保存
　　-t, --terminal
　　　ターミナルに表示

#【結果】
　before
![imoyokan.jpg](https://qiita-image-store.s3.amazonaws.com/0/121997/bd355fa3-3cd0-c662-1f95-62fcb681c022.jpeg)
　after
![out.jpg](https://qiita-image-store.s3.amazonaws.com/0/121997/482fcd08-ad6d-f457-f108-b9ef8a6f5c65.jpeg)

#【感想】
　ソースコードが気になる！

#【参考サイト】
　[ascii_py_gui](https://pypi.python.org/pypi/ascii_py_gui/1.2)
　[github](https://github.com/ProfOak/ascii_py/blob/master/README.md)
vagrant on mac にLaravel Homesteadを入れてみる

Mac上のvmに、Laravel Homesteadを使って環境構築してみたメモ。

# 環境
　vagrant/virtualbox はインストール済み


# boxを作る

```
$ vagrant box add laravel/homestead
==> box: Loading metadata for box 'laravel/homestead'
    box: URL: https://atlas.hashicorp.com/laravel/homestead
This box can work with multiple providers! The providers that it
can work with are listed below. Please review the list and choose
the provider you will be working with.

1) virtualbox
2) vmware_desktop

Enter your choice: 
```

virsualbox利用なので　１を選択

```
Enter your choice: 1
==> box: Adding box 'laravel/homestead' (v0.4.4) for provider: virtualbox
    box: Downloading: https://atlas.hashicorp.com/laravel/boxes/homestead/versions/0.4.4/providers/virtualbox.box
==> box: Successfully added box 'laravel/homestead' (v0.4.4) for 'virtualbox'!
```

終わり。

確認してみる。

```
$ vagrant box list
laravel/homestead (virtualbox, 0.4.4)
```

# HomesteadのClone

## git clone

ユーザのホームの下の/devディレクトリに、Homesteadをclone
```
$ cd ~/dev/
```

```
$ git clone https://github.com/laravel/homestead.git Homestead
Cloning into 'Homestead'...
remote: Counting objects: 1571, done.
remote: Compressing objects: 100% (6/6), done.
remote: Total 1571 (delta 0), reused 0 (delta 0), pack-reused 1565
Receiving objects: 100% (1571/1571), 244.01 KiB | 105.00 KiB/s, done.
Resolving deltas: 100% (924/924), done.
Checking connectivity... done.
```

## 初期化

```
$ cd Homestead/
$ bash init.sh
Homestead initialized!
```

# 設定

```
$ mkdir ~/dev/Homestead/Code
```

`- map: ~/Code`　だけ
`- map: ~/dev/Homestead/Code`　に変更 

```~/.homestead/Homestead.yaml 
folders:
    - map: ~/dev/Homestead/Code
      to: /home/vagrant/Code

sites:
    - map: homestead.app
      to: /home/vagrant/Code/Laravel/public

databases:
    - homestead

# blackfire:
#     - id: foo
#       token: bar
#       client-id: foo
#       client-token: bar

# ports:
#     - send: 50000
#       to: 5000
#     - send: 7777
#       to: 777
#       protocol: udp
```

## SSHキー

なければ

```
$ ssh-keygen -t rsa
```
で作成


## host追加

```file:/etc/hosts
192.168.10.10   homestead.app
```


# プロジェクト作成

## vagrant起動

vagrant 起動してSSH接続、プロジェクトを作成する

```
$ vagrant up
$ vagrant ssh
```

vagrant上で

```
$ cd Code
$ composer create-project laravel/laravel --prefer-dist Laravel

```

/home/vagrant/Code/Laravel　に新規プロジェクトができた。

http://homestead.app/

で、見れない・・・・

## provisionオプションをつける

mac上で

```
$ vagrant halt
$ vagrant up --provision
```

でオプションつきで起動する。



http://homestead.app/


"Laravel 5" が表示されればOK!!


とりあえずここまで。


---

参考）
http://readouble.com/laravel/5/1/ja/homestead.html
http://qiita.com/ran/items/14053e3f3fb20ed7c38a
http://blog.hrendoh.com/setting-up-laravel-local-dev-environment-with-homestead/
https://laracasts.com/discuss/channels/laravel/how-can-access-my-laravel-project-from-my-homestead?page=1
前、後ろ、そのた、私的まとめ

忘れてもいいように、書いておく。

ローカル環境オンリーでのアプリ開発を脱却してクライアントは薄く、サーバーを厚くしていき、マルチデバイス＆マルチプラットフォームへ展開していきたい勢です。
Windows環境での開発のみだったため、iOS、Android環境への取り組みも見据えて、「これなら食いつけそう」というものを書き連ねています。

# Windows開発

- WPF(Windows Presentation Foundation)
- UWP(Universal Windows Platform)


# マルチプラットフォーム開発

- Xamarin
    - Xamarin.Forms
  
# フロントエンド

- React.js
- Webpack
- TypeScript

# バックエンド

- AWS (Amazon Web Service)
- Microsoft Azure
- GCP (Google Cloud Platform)
    - GAE (Google App Engine) `PaaS`
    - CloudStorage
    - Datastore
    - Memcache


# MBaas

- Firebase
- Realm
    - Realm Xamarin


# 開発言語

- C#
- Golang

# 開発ツール

- VisualStudio2015
- VisualStudioCode

# 用語

- Paas(Platform as a Service)
- MBaas(Mobile Backend as a Service)
Linuxサーバの情報を取得する諸々のコマンド


## HostName

```
$ hostname
```

## Network

```console
$ ifconfig
```

## Kernel

```console
$ uname -a
```

## Distribution

```console
$ cat /etc/os-release
$ cat /etc/redhat-release
```

## CPU

```console
$ lscpu
$ cat /proc/cpuinfo
```

## Memory
```console
$ cat /proc/meminfo
```

## Storage
```console
$ df -h
```



# スペック調査とかの時のために…

```
$ echo -e "\n*** hostname ***" && hostname && \
  echo -e "\n*** kernel ***"&& uname -a && \
  echo -e "\n*** distribution ***" && cat /etc/redhat-release && \
  echo -e "\n*** cpu ***"  && lscpu && \
  echo -e "\n*** memory ***" && cat /proc/meminfo && \
  echo -e "\n*** Network ***" && ifconfig && \
  echo -e "\n*** storage ***" && df -h
```
直近の日付を求める【Ruby】


参考：[http://programming.ironsand.net/2015/日付の配列の中から直近の日付を選択する/](http://programming.ironsand.net/2015/%E6%97%A5%E4%BB%98%E3%81%AE%E9%85%8D%E5%88%97%E3%81%AE%E4%B8%AD%E3%81%8B%E3%82%89%E7%9B%B4%E8%BF%91%E3%81%AE%E6%97%A5%E4%BB%98%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B/)

# やりたいこと
各月で15日、30日のうち、今日から見て近い方を取得する。
例：5/14なら5/15、5/16なら5/30、5/31なら6/15を取得


```code:ruby
# 現在の日付を取得
today = Date.today

# 検知したい日付の配列を取得する
target_dates = [Date.new(today.year, today.month, 15), Date.new(today.year, today.month, today.end_of_month.day)]

# findメソッドを使い、一番近い日付を取得する(今日より新しくて、15で割って割り切れる日数[15, 30]という条件)
target_date = target_dates.find{|date| (date >= today && today.day % 15 == 0)}

# nilの場合は次月の15日になるのでこうしてみる
if target_date.blank?
  target_date = (today + 1.month).beginning_of_month + 14.day
end
```

最初の検知したい日付のところに来月の15日を足してもいいかもしれないけど、今回はこうしてみました。

***追記***
30日、31日の場合にうまくいかないことが判明。
上記プログラムは間違いです。
近々直します。

修正版。
あくまでActiveSupportで実施。

```code:ruby
# 現在の日付を取得
today = Date.today

# 最終日対策
last_day = today.day > 30 ? 30 : today.end_of_month.day

# 検知したい日付の配列を取得する
target_dates = [Date.new(today.year, today.month, 15), Date.new(today.year, today.month, last_day)]

# findメソッドを使い、一番近い日付を取得する(今日より新しくて、15で割って割り切れる日数[15, 30]という条件)
target_date = target_dates.find{|date| (date >= today && today.day % 15 == 0)}

# nilの場合は次月の15日になるのでこうしてみる
if target_date.blank?
  target_date = (today + 1.month).beginning_of_month + 14.day
end
```
口コミサイトの星(★★★☆☆)をCSSだけで実装してみた

# 
![star.gif](https://qiita-image-store.s3.amazonaws.com/0/119908/e9444d03-3cb9-469c-9752-22800abbb36c.gif)

口コミサイトなどに使えそうな、星をクリックして評価を送信する仕組みをCSSのみで実装しました。
labelタグになっているのでそのままsubmitするだけでデータを送信できます。
また、スマートフォン向けにも同じソースで実装できるので、なるべくワンソースにしたいレスポンシブサイトなんかにも使えると思います。

# ソースコード

```html
<form type="get" action="#">
  <div class="evaluation">
    <input id="star1" type="radio" name="star" value="5" />
    <label for="star1"><span class="text">最高</span>★</label>
    <input id="star2" type="radio" name="star" value="4" />
    <label for="star2"><span class="text">良い</span>★</label>
    <input id="star3" type="radio" name="star" value="3" />
    <label for="star3"><span class="text">普通</span>★</label>
    <input id="star4" type="radio" name="star" value="2" />
    <label for="star4"><span class="text">悪い</span>★</label>
    <input id="star5" type="radio" name="star" value="1" />
    <label for="star5"><span class="text">最悪</span>★</label>
  </div>
</form>
```

```css
.evaluation{
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.evaluation input[type='radio']{
  display: none;
}
.evaluation label{
  position: relative;
  padding: 10px 10px 0;
  color: gray;
  cursor: pointer;
  font-size: 50px;
}
.evaluation label .text{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: gray;
}
.evaluation label:hover,
.evaluation label:hover ~ label,
.evaluation input[type='radio']:checked ~ label{
  color: #ffcc00;
}
```

※[YUI Library](http://yuilibrary.com/yui/docs/cssreset/)でスタイルをリセットしています。
※ベンダープレフィックスなどは省略しているので、対応させるブラウザに応じて適宜付け足してください。


# 仕組み
最高→最悪の順でhtmlを記述し、「~」セレクタでcheckedのradioボタン(もしくはhoverしてるlavel)より後続のlabelを黄色くしています。

![2016-05-29 13.27.31.png](https://qiita-image-store.s3.amazonaws.com/0/119908/bd00946b-4178-c146-c5ae-ce0b8b9446cb.png)

記載した要素をそのまま横に並べるだけでは、表示は「右に行くにつれ最悪」になってしまいます。
星評価の場合、多くは「右に行くほど評価が高い」と思います。

そこで`flex-direction: row-reverse;`で表示を反転させることで実現させました。

![2016-05-29 13.28.24.png](https://qiita-image-store.s3.amazonaws.com/0/119908/5e9dc075-cdd6-2f29-665a-fb5b3ac63261.png)

# ★以外でも

今回はlabelタグに直接「★」を入れて文字色を変更してるだけですが、labelタグに背景をつけて★以外の図形にもできます。
その場合も上記と同じように、checkedのradioボタン(もしくはhoverしてるlavel)より後続のlabelの背景を変更することで実現できます。

また、inputとlabelの数を増やして半分の★の背景をあてることで0.5ずつ評価させる、といったこともできそうです。

皆さんのアイデアで素敵なwebサイトを作ってください★★★★★
【Unity】AudioClipをクリックした瞬間にプレビュー再生させるエディター拡張

※この記事のUnityのバージョンは5.3.5f1です

#1. はじめに
通常、UnityEditor上で音アセットをクリックしても再生されることはありません.

![Unity (64bit) - DemoScene.unity - TestPolygonGame - Web Player _DX11_ 2016-05-31 10.26.03.png](https://qiita-image-store.s3.amazonaws.com/0/44288/4a94055e-8669-a9cb-b704-fbe51146c628.png)

これをクリックしただけでプレビュー再生されるようにするエディター拡張を作ってみました.


#2. ソースコード
```AudioPreview.cs
#if UNITY_EDITOR
using UnityEngine;
using UnityEditor;
using UnityEditor.Callbacks;

[InitializeOnLoad]
public class AudioPreview
{
  const string AudioGameObjectName = "[AudioSourcePreview]";

  static Object previousObject = null;
  static AudioSource audioSource;

  // 音のプレビュー再生に使うオブジェクト
  static GameObject audioGameObject;

  [DidReloadScripts]
  static AudioPreview()
  {
    EditorApplication.projectWindowItemOnGUI += (string guid, Rect selectionRect) =>
    {
      if (Selection.activeObject != null && Selection.activeObject != previousObject)
      {
        // プレビュー再生用のオブジェクト作成
        CreateObject();

        Debug.Log("Play : " + Selection.activeObject.name);

        AudioClip clip = Selection.activeObject as AudioClip;
        if (clip != null)
        {
          // ProjectビューでAudioClipを選択したら再生
          audioSource.clip = clip;
          audioSource.Play();
        }
        else
        {
          // AudioClip以外を選択したらプレビュー停止
          GameObject.DestroyImmediate(audioGameObject);
        }
      }

      if (Selection.activeObject == null)
      {
        // 選択が外れたらプレビュー停止
        GameObject.DestroyImmediate(audioGameObject);
      }

      previousObject = Selection.activeObject;
    };
  }

  /// <summary>
  /// プレビュー再生用のオブジェクト作成
  /// </summary>
  private static void CreateObject()
  {
    audioGameObject = GameObject.Find(AudioGameObjectName);
    if (audioGameObject == null)
    {
      audioGameObject = new GameObject(AudioGameObjectName);
    }

    audioSource = audioGameObject.GetComponent<AudioSource>();
    if (audioSource == null)
    {
      audioSource = audioGameObject.AddComponent<AudioSource>();
    }

    audioSource.playOnAwake = false;
  }

}
#endif
```

#3. 結果
クリックすると音が出るようになります.
Qiitaに投稿したらSlackに流す

うちでも一部でSlack上での分報という取り組みをしているのですが、まぁなんだ。自分のアクティビティは自分の分報に流したいよねって話。
で、QiitaからSlackに流す方法をググってみたんだけど、Qiita:Team　しかサポートされてないようだったので何かないかなーと。

それでまぁ、自分の投稿一覧の RSS Feed とかきっとあるよねと思って調べたら案の定あったので、そいつを食わせればいいや、と。
ちなみに自分のFeedはこれ。ATOM Feed だった。 http://qiita.com/yu0819ki/feed
Slack連携で使うのはこいつな。 https://slack.com/apps/A0F81R7U7-rss

そんなわけでこれを投稿したら自分の分報に流れてくるはず！！

【追記 5/31 10:43】
現時点で流れてこねぇ＠＠；
しばらく放置してみる。
案件に python を使ってみた雑記


## はじめに

こんにちは、[UNIBA](http://uniba.jp) の[MJ](https://www.facebook.com/jun.mori.351)です。
今回の話は、とある案件で `python` を使ってお仕事した話です。
`python` といえば特に説明する必要のない有名な言語の一つです。
普段はフロントエンジニアとして仕事をしているのですが、「最近バックエンドの知識が欲しいなぁ」などと考えていて `python` を4月頃から触り始めました。
ユニバでは、`node` である `javascript` や `rails` である `ruby` などの言語を主に仕事で使用していますが、
厨二病である私は、誰もやってなかった `python` を選択しました(誰にもサポートを受けられず苦悶したので後悔)。
そんな折にちょうど良いタイミングで、バックエンド(最終的にはサーバなどは立てなかったのでバックエンドなのかどうなのかは甚だ疑問であるが、、、)柄みの案件があったので、挑戦してみたという次第です。

ちなみにかなり乱雑に書きます。あしからず

## 案件

どういった案件だったのか振り返ります。

* とある施設に設置するインスタレーション型のシステム
* 全体としては、写真を撮る -> プリントしてプレゼント -> おまけに web でも見れるよ
* 私の担当範囲と必要だった技術のあれこれ
	* 写真を保存した時に、自動で 画像 と `html`ファイル をアップロードする仕組み(フォルダ監視 + テンプレート)
	* データのアップロード先は s3
	* アップロード先のパスを base62 で暗号化する
	* その他アプリケーションとしてケアするところ
		* アップロード失敗した場合の挙動
		* ログの出力
		* etc...


## 実装に関して

今回の実装に関して運の良かったところは、サーバサイドの実装が入らなかったことです。
DB とかのあれこれに加えて、インフラの整備などを考えなくて済んだのかなり幸運でした。というかあったらかなり不安でした(社内で `python` でサーバやってる人いないし!!!)。

では、一つずつ振り返ります。

### 写真を保存した時に、自動で 画像 と `html`ファイル をアップロードする仕組み(フォルダ監視 + テンプレート)

フォルダの監視には [`watchdog`](https://pypi.python.org/pypi/watchdog)、 `html` の生成には [`jinja2`](http://jinja.pocoo.org/docs/dev/) を使用しました。
２つともかなり使い易いライブラリになっています。特段説明する必要がないぐらいよく出来たライブラリです。
メインのスクリプトはこれのおかげでかなり楽ができました。
`watchdog` の使用に関して言えば、監視するフォルダの中身(ファイルの数や、変更される数など)によっては、テストが必要です。
今回の案件に関しては特に問題なしでした。

### データのアップロード先は aws

aws の設定に関しては、普段は社内のバックエンドの人間に設定を任している箇所を自分が担当しました。
ドメインを `route53` で取得するあたりで、契約の部分で少し面倒が起きましたのがいい思い出です。
s3 は `basic認証` がかけられませんが、 `IP` での制限はかけれるのでテスト期間はそっちで対応しました。とはいえ `SNSシェア` 辺りの検証は少し面倒だったので次回は楽できるようにしたい。

python 側のアップロードは [`boto`](https://aws.amazon.com/jp/sdk-for-python/) を使用しました。 `amazon` が公式に出しているとのことですが、正直リファレンスが読みづらく、通信の timeout の設定がうまくできなかったので少々辛い思いをしました。
加えて、bucket 名に `.` が入ってたりすると少し特殊な記述をしないといけない。という事実を公開直前で気づき少し冷や汗。ドメインと紐付けると `.` がつかざる終えないのでこれはライブラリ側で気を回してほしいなぁ、、、

### アップロード先のパスを base62 で暗号化する

写真を公開にするにあたり、悪戯にダウンロードされないための予防策ですね。
はじめはの方は自分で実装していたのですが、最終的には [`basehash`](https://github.com/bnlucas/python-basehash) というライブラリを使用しました。
少し問題になったのは、他のアプリとの連携部分でした。
システムとして、`python` 以外に `openFrameworks` 製のアプリが動いており、そこで web へのリンクとして QR コードを生成していたのですが、`C++` 側で生成した値 が `python` 側と合わない。アルゴリズム的には同じなんですが、それでも合わない。
原因は、hash の値が 大きすぎて `C++` では普通には扱えなかったですね。要は big int な問題でした。
`python` の方は仕様の方でメモリがある分だけうまく計算してくれるとのことでした。大学などの研究分野で `python` が使われている理由はコレなんだろうなぁと推測。
結局、暗号化部分は `C++` から python を叩いて結果を返すようにしました。`if __name__ == '__main__':` がとても役に立ちます。嬉しい。

### その他アプリケーションとしてケアするところ

ここら辺が地味に大変でした。。。

例えば通信が切れていた場合、フレームを生成して「リトライしてください」というような警告を出すわけです。

警告画面はメインスレッドで出さなければいけないのです(知らなくて当初困惑していた素人)が、`watchdog` から呼び出した アップロードのプロセスは ライブラリの性質上 サブスレッドで動いているので、スレッド間で通信をしなければいけませんでした。
正直、`html` を普段いじっているおじさんには未知の世界でした。
これを解決してくれたのが、`Queue` クラスでした。 `join` と `task_done` を使って、プロセスのストップとゴーの連携を容易にすることができました。いやー便利。

ログの出力は、`logging` を使ってやりました。正直、ログローテーション的な部分はもう少し詰めたい。

あと、`applescript` で、ログイン時に自動起動するようにしたわけですが、その話は今回は省略

## 感想

`python` という言語を触ってみて思った事

* インデント記述良い
* if の記述良い
* pip 関連のライブラリ管理は少し慣れない
* モジュールとして分けてったら root フォルダがメタクソになった。ので次回はそこを考えたい。
* os の事を気軽に処理できるのが最高(フォルダ作ったり、ファイルコピーしたり)
* config.ini って結構イカしていると個人的には思った
* 二度と　OS でダイアログ出したくない。
* やってる間、`node`で実装したらと再三言われたが、挫けなかった自分を褒めたい

って具合でしょうか。
また `python` を使ったお仕事くるといいなぁ
CentOSでuserをsudo可能にする

## 環境
- CentOS release 6.7 (Final)

## 手順

ユーザー追加、パスワード設定

```
$ useradd sampleuser
$ passwd sampleuser
```

visudoで/etc/sudoersを開き、下記の行のコメントアウトを外す。

```
$ visudo

## Allows people in group wheel to run all commands
%wheel  ALL=(ALL)       ALL
```

sudoの実行をパスワードなしで許可する場合は、下記のほうのコメントアウトを外す。

```
# Same thing without a password
%wheel        ALL=(ALL)       NOPASSWD: ALL
```

ユーザーをwheelグループに追加

```
$ usermod -aG wheel sampleuser
```

sampleuserになって、自分の所属groupを確認

```
$ groups
sampleuser wheel
```

sampleuserでログインし、rootになってみる


```
$ sudo su - 
[sudo] password for sampleuser:{sampleuserのパスワード}

$ whoami
root
```

## 特定のユーザーのみsudoを許可する

```
username   ALL=(ALL)   NOPASSWD: ALL
```

## suでrootになれるようにする
wheelグループのユーザーはすべて`su -`でrootになれるようにする

```diff:/etc/pam.d/su
-#auth            required        pam_wheel.so use_uid
+auth            required        pam_wheel.so use_uid
```

以上

## 参考
- [redhat Configuring sudo Access](https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux_OpenStack_Platform/2/html/Getting_Started_Guide/ch02s03.html)
- [一般ユーザーを sudo できるようにする](http://www.maruko2.com/mw/%E4%B8%80%E8%88%AC%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%92_sudo_%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B)
getter が定義されているクラスプロパティだけを列挙したかった

最近は AWS Lambda 上の Node.js で動くアプリケーションづくりをしているのだけど、まぁ掲題のようなことをしたいと思いたって書いたので残しておく。

```js:listupGetter.js
'use strict';

// lodash とかの　isFunctionでいいっす
const isFunction = (any) => {
  const str = Object.prototype.toString.call(any);
  return /^\[object (Generator)?Function\]$/.test(str);
}

const listupGetter = (obj) => {
  // プロトタイプ（クラス）取得
  const proto = Object.getPrototypeOf(obj);

  //　Object.getOwnPropertyNames: プロトタイプ(クラス)で定義されているプロパティを全部取得
  return Object.getOwnPropertyNames(proto).filter((v) => {
    // そのうち、デスクリプタとして get があるものだけフィルタリング
    const descriptor = Object.getOwnPropertyDescriptor(proto, v);
    return isFunction(descriptor.get);
  });
}
```

isFunction(descriptor.get)　のところを書き換えれば setter だけ取ったりも出来る。
pythonでズンドコゲッター

#概要
paizaのpython2でズンドコゲッターやってみた。
#実際
https://paiza.io/projects/BrBom7LRiSiqGGU5Hz0i6Q
#サンプルコード
```
# coding: utf-8
import random
import urllib2

def zundoko():
    fp = urllib2.urlopen('http://ohijs0.paas.jp-e1.cloudn-service.com/zundoko', None, 500)
    html = fp.read()
    fp.close()
    return html
i = 0
while 1:
    r = zundoko()
    if r == "ドコ":
        print "ドコ ",
        if i == 4:
            break
        i = 0
    else:
        print "ズン ",
        i = i + 1
print "キ・ヨ・シ！"
```
redmine rest apiによるwikiの生成・更新における色々


parentの指定は不可
　→一旦生成しておいて、親ページを変更しておけば、その後の更新ではその親子関係が維持される

添付ファイルはパッチを当てる必要あり(http://www.redmine.org/issues/14830)
　→できなかったorz
　→一旦生成しておいて、そのページで添付しておけば、その後の更新ではそのファイルは維持される
　
　
本質的な解決ではないけれど、一旦これで。
3にすれば解決するんだろうか。

※redmine 2.6.0
[phiary] Riot.js tips - jade(pug) でタグを定義する際の yield バッティング問題を解決する方法

※ [こちらで見るとページ内でデモの実行, 編集ができます](http://phiary.me/riot-js-yield-in-jade/)

![ss](https://www.evernote.com/l/AOJhpzps-0tMX4bFXiQSl1w1I29QRMFr8H0B/image.png)

Riot.js には, `yield` という定義済みのタグに HTML を挿入する便利な機能があります.
ただこの `yield` というキーワード, 色々な言語で様々な用途として使われていて漏れ無く jade にも同じキーワードで違う機能として定義されちゃっています.

なので Jade でタグ定義する際に `yield` を使うと, Riot.js ではなく Jade のほうの `yield` として認識され上手く動きません.

今回はその解決方法を紹介したいと思います.


## 解決方法

下記のように書き換えるだけです.

```
yield Text Text Text Text
↓
#{'yield'} Text Text Text Text
```


## サンプル

ちゃんと yield 部分が展開されているのが分かるかと思います.

[runstant](http://runstant.com/phi/projects/9da5c3c5)
1. Node.jsのJavaScriptでECHONET Liteっていうネットワーク家電をコントロールしてみよう的な話

# 前提条件

- Windows
- Node.jsはインストール済み
- 記事時点でのバージョンは，
    - node v4.4.5
    - npm v 2.15.5
    - echonet-lite v0.0.12


# Node.jsでのECHONET Liteプログラミング

今回はNPMのechonet-liteモジュールにあるサンプルをとりあえず動かしてみます．
[echonet-liteモジュール](https://www.npmjs.com/package/echonet-lite)


Node.jsで簡単なECHONET Lite通信プログラムを作ってみましょう．
まず，新しいフォルダを作ってそのフォルダに移動しておきます．
ここでは下記のフォルダを作業フォルダとして進めます．

    C:\SimpleEL

echonet-liteというモジュールを利用しますが，このモジュールはインターネットでインストールする必要があります．
プログラムのフォルダにインストールするので，新しいプログラムを作るたびにインストールが必要です．
下記コマンドでインストールしましょう．

    C:\SimpleEL> npm install echonet-lite

まず下記のようなプログラムを「SimpleEL.js」として作成してみます．
文字コードはUTF-8Nで改行コードCrLfが僕は好きです．

```JavaScript:SimpleEL.js
//////////////////////////////////////////////////////////////////////
// EL最小構成
var EL = require('echonet-lite');

var objList = ['05ff01'];

var elsocket = EL.initialize( objList, function( rinfo, els ) {
	console.log('----');
	console.log( 'Found facilities are ' );
	console.dir( EL.facilities );
});


//////////////////////////////////////////////////////////////////////
// 全て立ち上がったのでINFでコントローラONの宣言
EL.sendOPC1( '224.0.23.0', [0x05,0xff,0x01], [0x0e,0xf0,0x01], 0x73, 0x80, [0x30]);

// ネットワーク状況の検索と把握
EL.search();
```

このスクリプトを動かすために下記のコマンドをコマンドプロンプトで実行します．

    C:\SimpleEL> node SimpleEL.js

いかがでしょうか，ネットワーク内にあるECHONET Lite機器の状態を取得して出力できましたか？
もしECHONET Lite機器を持っていないのでしたら，次節のエアコンエミュレータを作成して別のパソコンで実行しておくとテストできます．


# 実行してみよー

下記のような結果になったと思う．

```output
----
Found facilities are
{ '192.168.2.107':
   { '0ef001':
      { '80': '30',
        '82': '010a0100',
        '83': 'fe00000000000000000000000000000000',
        d5: '0105ff01',
        d6: '0105ff01',
        '9d': '0280d5',
        '9e': '00',
        '9f': '098082838ad3d4d5d6d7',
        '8a': '000077',
        d3: '000001',
        d4: '0002',
        d7: '0105ff' },
     '05ff01': { '80': '30' } } }
```

自分自身もECHONET Lite対応機器（ECHONET Liteノード）なので，自分自身も発見して機能一覧をJSON形式で作ってくれます．

192.168.2.107のIPを持っていて，0ef001の中にいくつかプロパティ，05ff01の中にいくつかプロパティがあるのが分かります．

0ef001は**ノードプロファイルオブジェクト**といってECHONET Liteノードとして生きていく中で必ず必要なものです．モジュールの中で自動的に処理してくれます．

05ff01はECHONET Lite規格において**コントローラ**と決まっています．規格書のAppendixってのを見ると書いてあります．
これはソースコード内で指定しましたね．

次は実際にコントロールするあたりを記事にしてみたいです．


# 追加情報！

おうちハックの人がやってくれているこちらのほうも参照してください．
[ラズパイからnode.jsを使ってECHONET Liteエアコンの操作をする](http://qiita.com/sgrowd/items/b0e20e8cc0fb57d6f79c)

また，ECHONET Lite対応家電なんてもってないぜ！って人は下記URLでエミュレータをDLできますよ．
[http://kadecot.net/blog/1479/](http://kadecot.net/blog/1479/)

ECHONET Liteの規格書はオープンなものです．
[エコーネットコンソーシアム](http://www.echonet.gr.jp)
【Swift4】iOSでユーザーがスクリーンショットを撮ったら何かする【小ネタ】

こんなのあるんだというのを最近知ったので、小ネタとして残します。

- 2016/10/19 追記：Swift3でのコードを追加しました。
- 2017/10/01 追記：Swift4の記述を追加しました。

# ユーザーがスクリーンショットを撮ったことを検知する

## Swift3, Swift4

Swift3, Swift4 では、`NSNotification`の`Name`構造体にstaticなプロパティとして以下が定義されています。

```swift
static let UIApplicationUserDidTakeScreenshot: NSNotification.Name
```

https://developer.apple.com/reference/foundation/nsnotification.name/1622966-uiapplicationuserdidtakescreensh

こちらをnotificationNameとしてNotificationCenterのobserverを仕込むことで、
「ホームボタン＋電源ボタンの同時押し」によるスクリーンショットを撮ったことを検知することができます。


```swift
import UIKit

class MyViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Observerとして登録
        NotificationCenter.default.addObserver(self, selector: #selector(MyViewController.userDidTakeScreenshot(_:)), name: .UIApplicationUserDidTakeScreenshot, object: nil)
    }
    
    deinit {
        NotificationCenter.default.removeObserver(self)
    }
    
    // UIApplicationUserDidTakeScreenshot の通知を受けて実行される
    func userDidTakeScreenshot(notification: Notification) {
        // 何かする
    }

}
```

リファレンスにも書いていますが、通知を受けた際のNotificationのuserInfoには特に何も設定されていないので、上記の例で`userDidTakeScreenshot`メソッド内で`notification.userInfo`としてもnilが返ってきます。


## Swift2

```swift
let UIApplicationUserDidTakeScreenshotNotification: String
```

Swift2では上記のようなString型の定数が定義されています。


## 例

```swift
import UIKit

class MyViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Observerとして登録
        NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(MyViewController.userDidTakeScreenshot(_:)), name: UIApplicationUserDidTakeScreenshotNotification, object: nil)
    }
    
    deinit {
        NSNotificationCenter.defaultCenter().removeObserver(self)
    }
    
    // UIApplicationUserDidTakeScreenshotNotification の通知を受けて実行される
    func userDidTakeScreenshot(notification: NSNotification) {
        // 何かする
    }

}
```


# 応用

この通知を利用して、
スクリーンショットを撮った後にアラートを出したり、ユーザーが撮ったスクリーンショットを取得して、加工したものを新たに保存させるといったことができそうです。

参考:
http://www.toyship.org/archives/1633

また、アプリの内容によってはユーザーがどのくらいスクリーンショットを撮っているかというログを取るのもいいかもしれません。

# 注意点

- 通知を受けるのはあくまでスクリーンショットを撮った "**後**"
- 通知にuserInfoが付与されていないので、「スクリーンショットを撮った」ということ以外に情報はない
- 通知を受けた直後にはスクリーンショットの画像はまだカメラロールに保存されていない
    - →保存された画像を得るには処理を遅延させるなどの工夫が必要そう
- iOS 7.0 以降で使用可


# 終わり
以上、使いどころは限られますが、そもそもスクショの検出はできないと思っていたので参考程度に書きました。

知らないことがまだまだたくさんあって面白いですね :satisfied:
rubyでズンドコゲッター

#概要
paizaのrubyでズンドコゲッターやってみた。
#実際
https://paiza.io/projects/Of7VC-pE6i088XI7SsHfxA
#サンプルコード
```
require 'net/http'
require 'uri'
 
def zundoko
    url = "http://ohijs0.paas.jp-e1.cloudn-service.com/zundoko"
    uri = URI.parse(url)
    res = Net::HTTP.get(uri)
    return res.force_encoding("UTF-8")
end
i = 0
while true
    z = zundoko
    print z + " "
    if z != "ドコ" 
        if i == 4 
            break
        end
        i = 0
    else
        i = i + 1
    end
end
print "キ・ヨ・シ！"
```
S先輩にきいてみたっ！- Amazon Web Serviceのネットワーク設計 - 第5話 構成


[第１話](http://qiita.com/ukiuni@github/items/c82cf2b0b3d16ab7c2a0)、[第２話](http://qiita.com/kazuqqfp/items/1e326e1452468c33800b)、[第3話](http://qiita.com/imafuku/items/b40a5a9b049c38fdbd48)、[第4話](http://qiita.com/aikawa2002/items/191d34b5b7c2c836a69f)はご覧になっていただけましたか？
第5話のテーマは「ネットワーク設計」です。
なお、ストーリーはフィクションであり、実在の人物・団体とは一切関係ありません。

----

ある日、O上司に声をかけられ
「現在のWシステムをAWS上に移行したいと考えているんだよね。A君、AWSについていろいろ調べてるって聞いてる。ネットワーク構成についてちょっと検討してみてくれないか？」

![Network diagram.png](https://qiita-image-store.s3.amazonaws.com/0/13451/e273b737-7f16-61a1-d3f8-d93b386ee61c.png)

A君は、AWS上にネットワーク設計をした経験がなく、やり方がぜんぜんわからない。
週末に、図書館に行って、資料などを調査していた。
AWS上に、「ネットワークをどう設定するか」、「どうな構成にするべきか」、A君は、全然わからない。
その時、本を読んでいるS先輩を見つけた。
A君は、S先輩に、AWS上に、どうネットワークを構築すれば良いのかを聞いた。
S先輩は、以下の三つのキーワードだけをA君に教えてあげた。
 * 「Route53」「ELB」「VPC」

A君は、すぐに、その三つのキーワードを、調査して、整理した。

Route53

 * https://aws.amazon.com/jp/route53/
 * AWS Route53とは
    * AWSが提供するDNSサービスのこと。高可用性、低レイテンシなアーキテクチャを実現して、マネージドサービスとして提供する
 * A君は、以下のAWSドキュメントを参照して、すぐAWS上にDNSサーバーを立ちた
    * https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/creating-migrating.html

ELB

 * https://aws.amazon.com/jp/elasticloadbalancing/
 * Elastic Load Balancingの略称
 * 複数のAmazon EC2インスタンスに自動的にトラフィックを分散して、さらに、複数のEC2インスタンスの中から正常なEC2インスタンスにのみ振り分けする機能を提供する。
 * A君は、以下のAWS ドキュメントを参照して、すぐAWS上にELBを立ちた
    * http://docs.aws.amazon.com/ja_jp/ElasticLoadBalancing/latest/DeveloperGuide/elb-getting-started.html

VPC

 * https://aws.amazon.com/jp/vpc/
 * Amazon Virtual Private Cloudの略称
 * 仮想ネットワークでAWSリソース（ECインスタンスやRDS）を起動できる。
 * A君は、以下のAWS ドキュメントを参照して、すぐAWS上にVPCを立ちた。
    * http://docs.aws.amazon.com/ja_jp/AmazonVPC/latest/GettingStartedGuide//getting-started-create-vpc.html


--

最後は、ネットワーク構成は、以下のようになった

![Read Replica Pattern.png](https://qiita-image-store.s3.amazonaws.com/0/13451/81977cca-62c6-0364-6a76-1f5ae7ecaf2b.png)


説明：

 * Route53から、新しいdomainを申請する
 * Route53とELBを繋がる
 * ELBから、複数のサーバに振り分ける
 * 作ったVPCに、ELB, EC2, RDBを入る

補足：

 * ELBから、EC2サーバーへの振分けることは、第2話の内容を参照してください。

A君は、出社して、上記の図より、AWS上にネットワークをざっくり構成して、O上司に進捗を報告した。
O上司は、報告にとても満足した。

----

次回、A君は「5.データストレージ」を勉強します。
来週の公開を予定しています。
Maya Typeツールでも愛が生まれた

#これはなに？

こちらを参考に

> Python2でも愛が生まれた
http://qiita.com/NPoi/items/3cf386fa92d909913e31

MayaのTypeツールで試してみました

#文字が生まれた

Maya 2016 Ext 2で生まれたTypeツール
<img width="80" alt="スクリーンショット 2016-05-31 8.19.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/102581/07b1813a-b3ef-576a-2542-0eaf27bdbaf9.png">

を、クリックすると
<img width="958" alt="スクリーンショット 2016-05-31 8.20.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/102581/2cb7783d-e2a5-cd13-553d-1631611df190.png">

文字が生まれた

##動かない場合
ちゃんと動かない場合はプラグイン読み込まれてるか確認してください。

```python
import pymel.core as pm

pm.pluginInfo('Type',q=True,loaded=True)
```

#からの愛が生まれた

type1ノードを選択して、

<img width="760" alt="スクリーンショット 2016-05-31 8.28.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/102581/253cc48a-3070-81eb-36d5-6b76cf22546c.png">

日本語フォントに切り替えておきます。

<img width="323" alt="スクリーンショット 2016-05-31 8.30.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/102581/90bdac67-a236-859b-72c9-c02046d070f8.png">

で、下記を実行すると

```python
import pymel.core as pm

pm.selected()[0].textInput.set( "%02X" % (ord(u'生') & ord(u'死')) )
```

<img width="1243" alt="スクリーンショット 2016-05-31 8.49.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/102581/118dbb49-b70a-5846-8c2e-afed17e4af01.png">

愛が生まれた

#まとめ

TypeノードにPythonから文字を入力するには、「textInput」アトリビュートを使います。
でも文字列そのまま渡したんじゃダメで、上記サンプルのように置き換えてやる必要があります。

#参考

大元：

> 愛が生まれた
http://qiita.com/dongri/items/041ff3e7dde6c99beeb0

　
> ポリゴン テキストを作成する（Mayaオンラインドキュメント）
http://help.autodesk.com/cloudhelp/2016/JPN/Maya/files/GUID-5715F385-F27A-49E0-A624-CB376B669EDC.htm
bash で配列比較

## 2つの配列から重複している要素だけを取り出すスクリプトメモ

```bash
#!/bin/bash

array1=("hoge" "fuga" "foo" "bar" "barbar" "1" "hogehoge" "temp" "varvar")
array2=("varvar" "hoge" "fuga" "foo" "barbar" "2" "123" "tmp" "varvarvar" "1")

echo ${array1[@]}
echo ${array2[@]}

for p in ${array1[@]}; do
  for q in ${array2[@]}; do
    if [ "${p}" = "${q}" ]; then
      array3+=(${p})
    fi
  done
done


echo ${array3[@]}

```


```bash:実行例
./arraycompare.sh
hoge fuga foo bar barbar 1 hogehoge temp varvar
varvar hoge fuga foo barbar 2 123 tmp varvarvar 1
hoge fuga foo barbar 1 varvar
````
【正規表現の理解に便利】正規表現にマッチする文字列を作成して、返してくれる Gem

[regexp-examples](https://github.com/tom-lord/regexp-examples)

```rb
/\wuby/.examples
#=> ["auby", "buby", "cuby", "duby", "euby"]
/\wuby/.random_example
#=> "Guby"
```

Regexp クラスを拡張して、正規表現にマッチする文字列を返す `examples`, `random_example` メソッドを定義する Gem。

ちなみに、`examples` は（繰り返し文字には制限がありますが）全てのマッチするパターンを返してくれて、`random_example` は全てのパターンから一つ sample で返してくれるメソッドです。
ぱっと見で分かりづらい正規表現の理解や、自分が作った正規表現が正しいかどうかを確認するのにとても便利そうですね。

# オプション

上で `examples` は繰り返し文字に制限があると書きましたが、繰り返す文字数や文字種はオプションで指定することが出来ます。

指定できるオプションは

* `max_repeater_variance`
* `max_group_results`
* `max_results_limit`

の 3 種類です。

## `max_repeater_variance (default = 2)`

`max_repeater_variance` は繰り返しする文字数の長さを指定します。
例えば、デフォルト 2 なので、`.*` は 全ての文字数を 0-2 回繰り返します。

```rb
/a*/.examples #=> ["", "a", "aa"]
/[ab]*/.examples #=> ["", "a", "b", "aa", "ab", "ba", "bb"]
/[ab]*/.examples(max_repeater_variance: 3)
#=> ["", "a", "b", "aa", "ab", "ba", "bb", "aaa", "aab", "aba", "abb", "baa", "bab", "bba", "bbb"]

/a+/.examples #=> ["a", "aa", "aaa"]
/a+/.examples(max_repeater_variance: 3) #=> ["a", "aa", "aaa", "aaaa"]
```

## `max_group_results (default = 5)`

`\d` や `[1-9]` は数値、`\w` や `[a-zA-Z0-9]` は英数字、というように正規表現は全てを表記しなくとも、まとめて値を指定する事が出来ますが、これらの group のうち何種類の結果を返すかを指定する事が出来ます。

具体例を上げると

```rb
/\d/.examples #=> ["0", "1", "2", "3", "4"]
/[a-z]/.examples #=> ["a", "b", "c", "d", "e"]
/[c-n]/.examples #=> ["c", "d", "e", "f", "g"]

/\d/.examples(max_group_results: 6) #=> ["0", "1", "2", "3", "4", "5"]
/\w/.examples(max_group_results: 10) #=> ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]
```

このようになります。

## `max_results_limit (default = 10000)`

最後の `max_results_limit` は、最終的な結果の max サイズを指定します。

```rb
/\d/.examples #=> ["0", "1", "2", "3", "4"]
/\d/.examples(max_results_limit: 2) #=> ["0", "1"]
/\d/.examples(max_results_limit: 10) #=> ["0", "1", "2", "3", "4"]
```

以上が指定できるオプションです。
これらを組み合わせれば、かなりの種類の具体例を出力出来ますね。


普通に正規表現を理解するのにも便利だけど、何か sample データをさくっと用意したり、正規表現をテストしたり、いろいろな用途に使えそう。

```rb
/
  \u{28}\u2022\u{5f}\u2022\u{29}
  |
  \u{28}\u{20}\u2022\u{5f}\u2022\u{29}\u{3e}\u2310\u25a0\u{2d}\u25a0\u{20}
  |
  \u{28}\u2310\u25a0\u{5f}\u25a0\u{29}
/x.examples
#=> ["(•_•)", "( •_•)>⌐■-■ ", "(⌐■_■)"]
```

便利！
Python3 でファイルの文字コードを変換する

Python3 でファイルの文字コードを変換する方法を２つ紹介します。

今回は文字コードが「shift-jis」の CSV ファイルがあり、それを「utf-8」に変換するコードを書いてみます。


## 動作環境
- Mac OS X 10.11.5
- Python 3.5.1

## codecs を使って文字コードを変換する
[codecs](http://docs.python.jp/3.5/library/codecs.html) を使って文字コードを指定してファイルの読み書きができます。

```py3:utf8_test1.py
# -*- coding:utf-8 -*-
import codecs

def main():
    # Shift_JIS ファイルのパス
    shiftjis_csv_path = './download/shift_jis_data.csv'
    # UTF-8 ファイルのパス
    utf8_csv_path = './download/utf8_data.csv'

    # 文字コードを utf-8 に変換して保存
    fin = codecs.open(shiftjis_csv_path, "r", "shift_jis")
    fout_utf = codecs.open(utf8_csv_path, "w", "utf-8")
    for row in fin:
        fout_utf.write(row)
    fin.close()
    fout_utf.close()

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

## nkf を使って文字コードを変換する
Python から nkf コマンド呼び出して文字コードの変換ができます。

```py3:utf8_test2.py
# -*- coding:utf-8 -*-
import subprocess

def main():
    # Shift_JIS ファイルのパス
    shiftjis_csv_path = './download/shift_jis_data.csv'
    # UTF-8 ファイルのパス
    utf8_csv_path = './download/utf8_data.csv'

    cmd = "nkf -w %s > %s" % (shiftjis_csv_path, utf8_csv_path)
    subprocess.call(cmd, shell=True)

if __name__ == '__main__':
    main()
```
ただし、nkf は Python の機能ではありませんので、事前に nkf をインストールしておく必要があります。

`$ brew install nkf`
技術英語 > [at some point in time], a family is going to move into this apartment

@ LOE > May 9, 2003
http://loe.org/shows/shows.html?programID=03-P13-00019
> <font color=red>at some point in time</font>, a family is going to move into this apartment

http://eow.alc.co.jp/search?q=at+some+point
> ある時点で、いつか

some point in timeという「点」として認識されるのでatになる、という説明をどこかの文法書で読んだ。

in some point in time という使われ方も多い (google検索: 2,980,000件)。
Today Extention 最後の最後で苦労した(始まりはThe operation couldn’t be completed)

Today Extension を利用した APPをstoreに申請直前に苦労したメモです。
普通に作ってれば問題ない事と思います。

同様な問題に遭遇された方の参考になれば幸いです。
申し訳ないのですが、code signing関連のエラーはメモってなかったです。

## 始まりは
通常APPにToday Extention Appを追加して作成したのですが、
申請用に Identifyを準備
Provisioning Profilesが2つ必要らしい噂をきいてたから
申請用に Identify　2つ用意して、Identify（**任意**）を設定した。
code signing関連で 解決しますかってきいてたので、仰せのままにした。

その後、シミュレーターで意味不明のエラーがでて・・・・・・

　The operation couldn’t be completed. (LaunchServicesError error 0.)

つまり、実行できないと・・・・・（みればわかるのだが）
さっきまで動いていたのだが、突然おかんむりになられたようだ。
ネットでぐぐったら、ログとかキャッシュの問題らしいが
お冠の方には全く効果なしである。

しぶしぶ実機で確認することにしたら、code signing関連で 解決しますかってきいてたので、仰せのままにした。
すると、code signing関連エラー発生した。
実機どころかコンパイラがお冠です。
もう　おてあげである。
### そもそも
ググるにしてもネタがなくて困ってたところ
ふと、なんでIdentifyが2つなんだろうと思った。
同じにすればいいじゃんくそーーーーって思ってました。

### もしかして
わざわざちがうんだから、名前を同じにしないといけないとかあるのかなと思い調べる事に
”today code sign”で検索・・・ありました。Stack OverFlowに・・・
親のIdentify が com.apple.yourappname　だったら
today Extensionの Identifyは、com.apple.yourappname.something　にしろっと

親APPの名前に .Today名 を追加するようです。 !!!あったりーー

### まず
Provisioning Profiles作り直しからですね。OKです
そして、Bundle Identifier 修正で　Go・・・・・・・
だめでした、まだ殿はお気に召さないようです。（code signうんぬんとおっしゃります。）
### 前々から気になってたのだが
ディレクトリに アプリ.entitlements　のファイルがあるのです。
特別な事っていえば、データの共有しようとして　App GroupsたるものをONにしたのだが
結局なんやかんや登録しないといけない事からそのままほっておいたのである。

これ？関係あるのかな？まぁ使用しないから　Capabilitiesの app Groupを　OFFにして
なんたら.entitlementsを削除した。
結果は、継続お冠状態である。
ひきつづき　code signing関連調査となる。

### あれ？
Build settings の code signingみてると、消した アプリ.entitlementsの名前を発見。
app Group を　OFFしてもだめだったのである。
こいつは、すでに削除したので、名前を消す事に。
### ダメと思っていたが期待をうらぎられる
何もなかったかのようにエラーが消えました。拍子抜けです。元の子にもどったようです。

### いっけー申請だ。
validate ......... OK　　
Upload　........ NG
ビルド番号が違うとおっしゃる
### 確かに
ビルドバージョンは違いますよ。当たり前でしょ別もんだしと
こっちがお冠となるが、お上には逆らえないから、today側を同じビルド番号にする事に
再度挑戦
validate ......... OK　　
Upload　.......... NG
バイナリーがうんぬん・・・・・・・
###もうすでにそのBuildが存在しますよ。
え？エラーだったじゃん。何んで登録してんだよ。といっても訴えは届かない・・・・・
再度ビルドバージョン更新して
validate ......... OK　　
Upload　.......... OK
申請できました。（審査通るかどうかはこれから)



### 今回の経験まとめ（写真は参考用に準備しました）
![a1.png](https://qiita-image-store.s3.amazonaws.com/0/75082/2163f05c-3804-36e9-5532-430d28168022.png)


![a2.png](https://qiita-image-store.s3.amazonaws.com/0/75082/b21cf46a-6222-4f94-0fe3-609a0314dfa8.png)

①　todayの名前は親app名 + .today名にする。
②　ビルドバージョンは同じにする

![a3.png](https://qiita-image-store.s3.amazonaws.com/0/75082/32b394dc-b00e-2868-6c5c-7c7b1a18bd4f.png)
一度でもapp Group ONにして云々登録したけど、削除する場合は、ここも消すこと
bxsliderで画像の順番が入れ替わってしまう問題


#はじめに
「bxSlider」便利ですよね。いつもお世話になってます。
基本的な使い方はぜひこちらのわかりやすいサイトを参考にしていただくとして。

- [bxSlider ( 公式サイト / 英語 )](http://bxslider.com/)
- [超簡単jQueryスライダー［bxSlider］の使い方。](http://on-ze.com/archives/1658)


#画像の順番が入れ替わっている！？
特定の条件が揃った時に、**画像の順番が入れ替わる**ことに気付いて焦りまくったので忘備録。ググっても特に似たような内容に引っかからなかったので、頻発するようなことではないのかも知れませんが。

この画像たち↓をシュッ！シュッ！と動くスライダーで表示します。

![screencapture-file-Users-aya-Dropbox-bxslider-E8-A6-81-E7-B4-A0-E3-81-AE-E6-95-B0-E3-81-AB-E3-82-88-E3-81-A3-E3-81-A6bxSlider-E3-81-AE-E6-8C-99-E5-8B-95-E3-82-92-E5-A4-89-E6-9B-B4-E3-81-99-E3-82-8B-E8-A6-81-E7-B4-A0-html-1464629851952.jpg](https://qiita-image-store.s3.amazonaws.com/0/119342/ae92843b-e755-f308-5d0f-9c7d99f7f3e4.jpeg)

ピンクが一枚目のはずなのですが、リロードすると何故かグリーンの画像から始まってしまいます。（そして2周目はちゃんとピンクから始まっている）
![0zdU7ddqNA.gif](https://qiita-image-store.s3.amazonaws.com/0/119342/52b6ad35-df7c-cc9e-f36f-d74b20085b61.gif)


#こうなってしまう条件とは
- `mode:horizonal`である
- 親boxに`display:none`を指定している

大きくこの2つの条件が揃った時に画像の順番が入れ替わることがありました。（chrome,Firefox,IEで確認) 

```js:javascript
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true, //自動再生on
autoControls: true,  //自動再生on
});
$('.bxslider').fadeIn(1500);//1.5秒かけてフェードイン
});
```
```css:css
.bxslider{display:none}
```

```html:HTML
<div>
    <div class="contents">
        <div class="bxslider">
        <div class="bx_photo"><img src="http://placehold.it/720x480/ffb2b2/ffffff"></div>
        <div class="bx_photo"><img src="http://placehold.it/720x480/d8b2ff/ffffff"></div>
        <div class="bx_photo"><img src="http://placehold.it/720x480/b2b2ff/ffffff"></div>
        <div class="bx_photo"><img src="http://placehold.it/720x480/b2ffd8/ffffff"></div>
        </div>
    </div>
</div>
```
画像が一瞬光ったり縦に並んでしまう問題を解消するために、`div.bxslider`を`display:none`で非表示にしてからフェードインさせているのですが、これが原因でした。

-  [bxSliderで画像が一瞬縦に並んでしまう問題の解決方法](http://osune.co/299)

これ、厄介なことにスライダーのオプションが`mode:fade`の時は何の問題もなく表示されます。
#解決策
要は、`display:none`だったり`height`が設定されてなかったり**スライダーを表示させるboxを認識できない**時に起こる現象のようです。フェードインはこれ↓で解決しました。


```js:javascript
$(document).ready(function(){
$('.bxslider').css({opacity:'0.01'}).animate({opacity: '1'},1500); 
//1.5秒かけて透明度を1%→100%にする
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
});
```
```css:css
.bxslider
{ display: block;
  height: 420px;}
```
#さいごに
`display:none`や`opacity:0`このあたりは「設定された要素を無いものとして扱う」ので時々厄介なことにぶちあたったりしますね。気をつけて使っていきたいです。
D3.js で地図を描くときに世話になっ(ている|た)もの

D3.js で地図を描こうと思った時に見る Web Resource まとめ．

# [D3.js 公式](https://d3js.org/)

もちろん，最初は公式ドキュメントを読まなきゃダメっすね．
D3.js と聞くと「グラフを描画するライブラリ」と思いがちだが，"Data Driven Documents" というだけあり，コアというか入り口は配列 / オブジェクトデータを整形する API であり，そのメソッドチェーンの出口が変数への吐き出しなのかグラフの描画なのかが違うんだな，というのがわかったので非常に良いチュートリアルだった．

# [SVG Tutorial](http://www.w3schools.com/svg/)

恥ずかしながら仕事で D3.js を触るまで svg は名前と効用だけ知ってて書いたことも無ければ API も知らなかったので，まずはしっかりと SVG のチュートリアルを読んだ．d3.pie だの d3.geo が吐き出す path の意味が何となく分かるだけでちょっと不安が取り払える．

# [D3.jsとTopoJSONで地図を作る](http://ja.d3js.node.ws/blocks/mike/map/)

海外のチュートリアルの翻訳記事．これ読めば一連の流れは分かる．

# Qiita の記事たち
先人の皆様に感謝．

* [d3.js超初心者向け　①→②を表現してみる](http://qiita.com/daxanya1/items/734e65a7ca58bbe2a98c)
* [D3で世界地図を描画してみる](http://qiita.com/w_shon/items/308d28150f45b3cf3c5f) 
* [D3.jsとOpen Data〜その１地図を描画する](http://qiita.com/sawamur@github/items/ec32237bcbaaba94108d)

# データ元ネタ
すいません，仕事で世界地図しか書いていないので国内の情報は拾えていません…
## [Natural Earth](http://www.naturalearthdata.com/)
まず間違いない．
## [Continents.json](https://gist.github.com/cmunns/76fb72646a68202e6bde)
単なる1枚ペラの Gist なんだけど，実は仕事で一番欲しかったやつ．(自作できるようになりたい…!!)
てか，GeoJSON を GitHub にアップするとプレビューしてくれるんだね！！！(驚愕)
## [johan/world.geo.json](https://github.com/johan/world.geo.json)
世界地図のデータおよび国ごとのデータ．


# [mapshaper](http://www.mapshaper.org)

GeoJSON や Shape ファイルの簡素化をしてくれる．複雑な地形を簡略化したり，小さな島を省略したりするのだけれど，スライダを動かしながら，どの程度簡略化されたかもわかるので非常にわかりやすい．
Drupal 8 を drush でターミナルからインストールする

Drupal をインストールする際、公式サイトからアーカイブを落として展開、ブラウザ上からインストールする事が多いと思いますが、composer と drush を使えばターミナルからインストールをする事が出来ます。この記事では、インストールするための drush のコマンドとよく使うと思われるオプションについて記載します。


## Drupal のダウンロードと展開

composer を使うことで、[Drupal プロジェクトのテンプレート](https://github.com/drupal-composer/drupal-project)からファイルをダウンロードし展開してくれます。コマンドは下記になります。

```bash
$ composer create-project drupal-composer/drupal-project:8.x-dev drupal-project-dir --stability dev --no-interaction
```

## Drupal のインストール

`drush si` でインストールを行う事が出来ます。注意点としては、Drupal のルートディレクトリより深い階層でコマンドを実行しないとインストールに失敗します。もし、コマンドを実行するディレクトリが条件を満たしていないのならば、事前にインストールしたディレクトリに移動する必要があります。
コマンドの例は下記になります。

```bash
$ drush si --account-name="admin-user" --account-pass="PASSWORD" --account-mail="foobar@example.com" --db-prefix="dev-" --db-url="sqlite://sites/default/files/.ht.sqlite" --site-mail="hogehoge@example.com" --site-name="Drupal 8.1.x Test" --locale=ja
You are about to DROP all tables in your 'sites/default/files/.ht.sqlite' database. Do you want to continue? (y/n): y
#（中略）
Installation complete.  User name: admin-user  User password: PASSWORD       [ok]
Congratulations, you installed Drupal!                                 [status]
```

- --account-name
 - uid = 1 になるユーザのアカウント名の設定。デフォルトは admin。
- --account-pass
 - uid = 1 になるユーザのパスワード。
- --account-mail
 - uid = 1 になるユーザのメールアドレス。
- --db-url
 - Drupalで使用するデータベースへのURL
  - SQLite なら `sqlite://sites/default/files/.ht.sqlite`
  - MySQL、PostgreSQL なら `mysql://root:pass@localhost:port/dbname` `pgsql://root:pass@localhost:port/dbname`
- --site-mail
 - サイト詳細で使用されるのメールアドレス
- --site-name
 - Drupalで使用するサイト名
- --locale
 - Drupalで標準設定にする言語

その他のパラメータや詳細を知りたい場合は、[drush 公式サイトの site-install コマンドのマニュアル](https://drushcommands.com/drush-8x/core/site-install/)を確認してみてください。