OmniAICreator/Qiita-1.07M huggingface dataset:
メディアアートで大学院留学

#導入
日本語でメディアアートといった場合は以下などを指すかと思われる(Computational Arts, Interactive Art, New Media Art, Creative Coding, etc) 。この分野で留学したいと考えたことがある人も多少はいるのではないだろうか。~~私もその一人で今秋からロンドンにMFA取得のために留学することにした。~~**（諸事情でしないことに。。）**留学の是非については議論の余地がありすぎるので、この記事では触れずに、留学を志している方々に参考になりそうな情報をまとめてみようかと思う。Qiitaを選んだのは自分が日本人で職能としてはエンジニアに分類されることが多いから。他のプラットフォームのほうが向いているかもしれない。

##経歴
参考のために載せておく。学部は社会科学部卒、いわゆる情報系ではない。（分かる人にしか分からないだろうが）総合大学だったので、カリキュラムは緩くて『プログラム基礎』などを受講したりした。ITの基礎だけはかじった、とでもいえば正しいかもしれない。その後、HCI(Human-Computer Interaction)を勉強しにイギリスの某地域に修士で留学した（社会科学、心理学がバックグラウンドの人間がHCIに転身するのが一般的だったので。ちなみに修士学位は持っていない）。ただHCIを研究して、自分の興味はクリエイティブ系かな、と思ったので帰国後はいくつかの制作会社で働いた。その後フリーランスになったりしたが、もう一度勉強する期間が欲しいと思ったので留学しようと決めた。

大雑把にまとめると―『文系学部卒で一年英語圏に留学していた。その後[CINRA.JOB](https://job.cinra.net/)に載っていそうな会社でエンジニアしていただけ。アートとは縁のない経歴にも見えるが、応募書類などまともに用意すればMFAプログラムのオファーは現実的だ。』―という感じ。

##地理的要因
IT従事者のうち、[Paul Graham](http://paulgraham.com/)のエッセイが好きな人は多いのではないだろうか。地理的にどこで勉強するべきか考えるのに[Cities and Ambition](http://paulgraham.com/cities.html)は参考になるかもしれない。メディアアートという文脈で考えると、ヨーロッパ諸都市（パリ、ベルリン、アムステルダム、リンツなど）も魅力的だと思うが、私はBuzzがある場所に行きたかったのでニューヨークかロンドンにしようと考えた。どちらとも訪れてみて、個人的にはロンドンのほうが合っている気がした。

##プログラムについて
アートスクールが提供しているメディアアート系のプログラムはテクノロジー関連があまり充実していないような印象を受ける。その分アート色が強いとも思うので、どんなプログラムがいいかは当然だが人それぞれだろう。以下に気になったコースを列挙してみる。雑すぎるコメントも書いてみたが、詳しくはリンク先などで見てみてほしい。

- [NYU, ITP](http://tisch.nyu.edu/itp) -> テクノロジストみたいな人はここが一番だと思う
- [Goldsmiths, Computational Arts](http://www.gold.ac.uk/pg/mfa-computational-arts/) -> The Department of ComputingがMFAプログラムを提供している
- [RISD, Digital + Media](http://dm.risd.edu/) -> ボストン
- [UCLA, Design Media Arts](http://dma.ucla.edu/) -> カリフォルニア, faculty著名
- [New School, DESIGN AND TECHNOLOGY](http://www.newschool.edu/parsons/mfa-design-technology/) -> デザイナー向け？
- [RCA, Information Experience Design](https://www.rca.ac.uk/schools/school-of-communication/ied/)
- [University of Art and Design Linz, Interface Cultures](http://www.ufg.ac.at/?id=1594&L=1) -> Ars Electronica


##応募書類
ほぼ必要になるであろうかつ、気になるものに言及してみる。基本大切な書類を用意する際に自分がネイティブの英語話者でないならば添削必須だと思われる。

###英語のテストスコア
TOEFL iBTだと90前半、IELTSだとOverall6.5あたりが最低かと思われる。帰国子女や留学経験者でないと難しい場合もあるかと思われる。これらのテストの対策情報などは調べればたくさん出てくる（出てきすぎて悩むかもしれないが、基本的にマジックはないだろう）。

###CV, Personal Statement
自分で書いてプロに添削してもらうのがいいかと思われる。

###推薦状
不必要な礼儀はいらない、例えば10個のプログラムに応募したいならそれだけ推薦状書いてくださいとお願いする。

###Portfolio
私は自分の[ポートフォリオサイト](http://yumayanagisawa.net/)のリンク送ったのみである。github, vimeoなどで作品・コードを頻繁に更新・公開していると準備はそんなに大変ではないかもしれない。通常のオファー以上のもの（授業料免除など）が欲しい場合は丁寧に用意するべきだとは思う。

##おわり
役立つ情報と思ってもらえたらありがたい`¯\_(ツ)_/¯`
Rでplot（超初歩）

初めて投稿します。プログラミングコード専門のコミュニティサイトがあるなんて。
もっと早く知っていれば、どれだけ楽だったことか。。。それはわかりませんが。

基本的に、私の専門は、計算科学です。いわゆるシミュレーション科学のようなものです。私は昔からプログラミングが全く得意ではありませんでした。

しかし、Rに出会ってから、少し感覚が変わりました。Rは私の世界を広げてくれました。というわけで、Rでできることを基本から確認していきます。

できることなんて、ユーザーのアイデア次第で無限にあるので、私が主に使用している数値解析用の使い方を記録しておきます。
 

まずRをインストールして、コンソール立ち上げたら、白い画面に以下をコピぺしてエンターを押します。

```r:qiita.rb
x <- 1:10    #1から10までの整数ベクトルを作成しxに代入
y <- 1:10
plot(x,y)
```

 すると以下のような図がぽんと出るのです。これがRの醍醐味です。グラフ化までどんっと出る。

![Rplot1.png](https://qiita-image-store.s3.amazonaws.com/0/176129/93af585f-65a1-bc69-6cf2-fe394a11156c.png)


グラフィックパラメータは、ちょっと後で詳しく記録します。

「変数の設定→計算（for, if,,,）→結果の表示」という流れで実例を元に使い方を記録していきたいと思います。

とりあえず、初回はこの程度。

詳しくは、こちらにも書いています。よかったら是非。
http://demacassette2.hateblo.jp/entry/2015/01/13/001023
Visual Studio 2017でAWS SDK for PHP開発 

Visual Studio 2017でPHPを使ってAWS S3へアクセスする手順です。

#環境
Windows 7 Professional SP1 64bit
Visual Studio 2017 Community
PHP Tools for Visual Studio v1.23.9750

環境構築やPHPプロジェクトの作成はこちらを参考にしてください。
http://qiita.com/akabei/items/70fafaef7b86afb5a7ec

#プロジェクト作成
新しいプロジェクトで「PHP Console Project」を作成します。

![bbb.png](https://qiita-image-store.s3.amazonaws.com/0/112075/2e8dace8-5955-96a7-4cd6-b1d7215f3af6.png)

#aws-sdk-phpパッケージインストール
プロジェクトのReferencesを右クリックして「Install New Composer Packages...」を選択します。

![ccc.png](https://qiita-image-store.s3.amazonaws.com/0/112075/781704f8-be8a-a780-f6f7-a361b817b3db.png)

ダイアログが表示されたら左上のテキストボックスに「aws-sdk-php」を入力するとリストに「aws/aws-sdk-php」が表示されるので、それを選択してInstall Packageを押します。

![ddd.png](https://qiita-image-store.s3.amazonaws.com/0/112075/c528048a-08f8-ab70-50fa-37304aeb4cb4.png)

しばらく待まって「Installed locally」と表示されたらインストール完了ですが、なぜか表示されませんでした・・・。

![eee.png](https://qiita-image-store.s3.amazonaws.com/0/112075/0d7a7573-dc98-59b0-b7b8-d85e0a6b642b.png)

ダイアログを閉じてプロジェクトのReferencesに「aws/aws-sdk-php」が追加されていたら問題ないと思います。

#証明書ダウンロード
普通に実行すると証明書のチェックでエラーになるので以下から証明書をダウンロードします。（右クリックして名前を付けて保存します）

https://curl.haxx.se/ca/cacert.pem

今回はプロジェクトフォルダにダウンロードしました。

D:\Project\s3bucket\s3bucket\cacert.pem

#S3バケット一覧表示
index.phpを以下のように編集します。

```php:index.php
<?php
require_once('vendor/autoload.php');

$s3 = new Aws\S3\S3Client([
    'version' => 'latest',
    'region'  => 'ap-northeast-1',
    'http'    => [
        'verify' => 'D:\Project\s3bucket\s3bucket\cacert.pem'
    ]
]);

$result = $s3->listBuckets();
foreach ($result['Buckets'] as $bucket) {
    echo $bucket['Name'] . PHP_EOL;
}

?>
```

実行してバケット一覧が表示されたら完成です。
Cordovaで声優ラジオ音泉をダウンロードするAndroidアプリを作ってみた

# はじめに
初めてCordovaでAndroidアプリを作ってみました。
声優ラジオの音泉をダウンロードできます。

開発当初、温泉卵が食べたかったので「音泉」と「温泉卵」を掛けて、「音卵」という名前にしました。

![banner.png](https://qiita-image-store.s3.amazonaws.com/0/77608/e6c10a2a-2a26-ec7b-8764-06dffad91d3b.png)

## UI
ぱぱっと作ったので、雑ですがこんな感じになってます。
最初は、番組ごとにサムネイルをつけていたんですが審査に通らなかったので無くしました。

### 番組一覧

![list.png](https://qiita-image-store.s3.amazonaws.com/0/77608/9d18269e-159f-22a9-3427-c30e6ce4b5f6.png)

### ダウンロード画面

![modal.png](https://qiita-image-store.s3.amazonaws.com/0/77608/bddff276-43ed-1156-7716-efce37ea6cfb.png)

### ダウンロード状況

![download.png](https://qiita-image-store.s3.amazonaws.com/0/77608/93ee65f8-a0bf-e732-b116-1260b1ac5416.png)

## 内容
仕組みは、cordovaアプリがxhrでAPIにリクエストを送って、レスポンスの情報を元にUIの構築 & ダウンロード先のURLの取得を行う感じのシンプルな設計です。

音泉の情報を取得するAPIは、僕が開発した「[onsen-node](https://github.com/yuki540net/onsen-node)」を元に開発して、Herokuにあげました。

コードは、こんな感じですごく簡単なものです。

```coffeescript:api.coffee
onsen   = require 'onsen-node'
express = require 'express'
app     = express()

##
# 番組リスト
##
app.get '/', (req, res) ->
	onsen.getList (list) =>
		if list isnt null
			res.json list
		else
			res.json { error: '番組一覧の取得に失敗しました。' }

##
# 番組情報
##
app.get '/:name', (req, res) ->
	name = decodeURIComponent req.params.name
	onsen.getInfo name, (info) =>
		if info isnt null
			res.json info
		else
			res.json { error: '番組が見つかりません。.' }

##
# 番組検索
##
app.get '/search/:keyword', (req, res) ->
	keyword = decodeURIComponent req.params.keyword
	onsen.search keyword, (list) =>
		if list isnt null
			res.json list
		else
			res.json { error: '番組が見つかりませんでした。' }

app.listen process.env.PORT || 8080, ->
	console.log 'Server Running...'
```

## ハマった点
パーミッションの要求の存在を忘れていて一日くらい積みました。

cordovaでのパーミッション要求は

プラグインを追加して

```
cordova plugin add cordova-plugin-android-permissions --save
```

こんな感じのコードを書けば、OKでした。
※下記は、ストレージの書き込み要求。

```coffeescript:sample.coffee
permissions = cordova.plugins.permissions
	permissions.requestPermission permissions.WRITE_EXTERNAL_STORAGE, (status) ->
		if not status.hasPermission
			alert '権限を有効にしないとダウンロードできません。'
```

## さいごに
初めてCordovaを使ってみて、AndroidSDKあたりで積み書けましたが設定さえ終われば、作るのはすごく楽でした。
ただ、Chromeのリモートデバッグだとデバッグしづらいので、その点ではmonacaを使うのもありなのかなと思います。

アプリは、Google Playで公開しているのでよかったらインストールしてみてください。
[https://play.google.com/store/apps/details?id=com.yuki540.ontama](https://play.google.com/store/apps/details?id=com.yuki540.ontama)

コードは、GitHubにあげてるのでそちらもよかったらみてください。
[https://github.com/yuki540net/ontama](https://github.com/yuki540net/ontama)

GitHub: [https://github.com/yuki540net](https://github.com/yuki540net)
Twitter: [https://twitter.com/eriri_jp](https://twitter.com/eriri_jp)
kirakiratter.com+kktCSS+キラキラブックマークレットで、キラキラッターを楽しもう！

氷上スミレ( https://kirakiratter.com/@sumire, https://twitter.com/sumire_kkt )です。
みなさんはキラキラッター、してますか？

更に特別な設定をすると、パソコンでもスマートフォンでも素敵なデザインに変えられちゃいます！

### 更新情報
キラキラッターがMastodon 1.3.2に更新されたよ。(05/02)
今回の更新で、ついにテーマ機能が追加されたみたい。

キラキラッターを開くだけでkktCSSが読み込まれるから、設定しなくてもすぐ素敵なデザインで始められちゃうね。

(記事は、自分でCSS編集をしてみたい人のために残しておくね)


#Desktop
(for Chrome/Opera/Vivaldi/Firefox)

1クリックでスタイルの追加が出来るサイトが登場したみたい。
Stylishをインストールしてから、[Install with Stylish]ボタンを押してね。

Stylish(Chrome/Opera/Vivaldi)
https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe

Stylish(Operaは、Download Chrome Extensionも入れてね)
https://addons.opera.com/en/extensions/details/download-chrome-extension-9/
https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe

Stylish(firefox)
https://addons.mozilla.org/en-US/firefox/addon/stylish/

userstyles.org - kirakiratter
https://userstyles.org/styles/141350/kirakiratter

　
(手動で追加する方法も残しておくね...)

めろんちゃん( https://kirakiratter.com/@melon )がとってもわかりやすい紹介をしてたから借りてきちゃった。( https://kirakiratter.com/web/statuses/23559 )
まずはStylishをインストールしてから進めてね。

Stylish(Chrome/Opera/Vivaldi)
https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe

Stylish(firefox)
https://addons.mozilla.org/en-US/firefox/addon/stylish/

(1)「Kirakiratter Custom CSS」を開いて、下のほうにある「RAW Paste Data」の中にあるコードを全選択してコピー
https://pastebin.com/QB5nngsU
![qii1.png](https://qiita-image-store.s3.amazonaws.com/0/176119/a0896d7f-741f-cd33-4a7d-8c29da77c36e.png)

(2)キラキラッターのページを開いた状態で、URLの右にあるStylishのアイコンから「スタイルを作る」
![qii2.png](https://qiita-image-store.s3.amazonaws.com/0/176119/7d2356cb-dcdc-e9ac-f925-7c3e97708f31.png)

(3)「コード1」にコピーしたコードを貼り付けて、適当な名前を付けて「保存」すればオケオケオッケー！ 
![qii3.png](https://qiita-image-store.s3.amazonaws.com/0/176119/4fa902a0-8aef-2eb4-e9cc-6739c8d3eda7.png)

...めろんちゃん、ありがとう！
3のセクションエリアに入力したCSSは、自分で編集できるから、
新しいCSSコーデ(ィング)に挑戦することだってできちゃうよ。

#Android/iOS
(Android:Chrome/firefox/Sleipnir)
(iOS:Chrome/Safari)

スマートフォンはStylishがないから少し難しいかな...
"ブックマークレット"を使ってKirakiratter Custom CSSを読み込むんだけど、詳しく解説するね！

まず、ブックマークを作って、下の文字列でURLの欄を書き換えて...

```javascript:
javascript:(function(){var s=document.createElement('link');s.setAttribute('href','https://masterdalk.github.io/kktCSS/kirakiratter.css');s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);})()
```

名前は短くて、後で打ち込みやすいのにするのがおすすめ。
私は「kkt」で登録してる。

　

準備が出来たらkirakiratter.comを開いて、そこからブックマークを開くとデザインが変わるよ

Chrome(Android/iOS)みたいなブックマーク一覧を新しいページで開いちゃうブラウザはコツがあって...
kirakiratter.comを開いた状態から、アドレス入力欄を出して、kkまで打ち込んで出てきたブックマークをクリックすればデザインが変わる、かな

コツについて詳しく解説してるページもあるから見てみてね
http://ametuku.com/archives/6858

ページを開くたびにブックマークから開かないとだめだけど、こればかりは仕方ないかな...
素敵なCSSでキラキラッターをもっと楽しんでね！
Linuxで「こわくない」ショートカットもどき

初心者の頃、おっかなびっくり自力で編み出して、
今でも重宝しているシェルのチップスを共有します。
ひょっとしたら、中上級者には当たり前すぎて無意味かもしれません。
# 概要
```bash
$ echo "cd /home/start/a/b/c/d/e" >w
$ . w
$ pwd
/home/start/a/b/c/d/e
```
これで意味が、あるいは無意味がわかった方は読まなくて大丈夫です。

# 動機：```ln```コマンドこわい

Linuxで、Windowsでいうショートカットの代わりに、
```ln```コマンドでリンクを張っている人が多いと思います。

```bash
$ pwd
/home
$ ls
start
$ ls ./start/a/b/c/d/e
ReadMy.txt xxx.c yyy.c
```
たとえばこんな深いところに作業場がある環境で、

```bash
$ ln -s start/a/b/c/d/e work
```
と叩いておけば

```bash
$ ls
start work
$ cd work
$ ls
ReadMy.txt main.c sub.c
```
これですぐに作業に取りかかれる、という仕組みですね。
ただ、愛用者には悪いんですが、これあまり使いたくないんです。

##こわいことその１：絶対パスが。。。
このリンクだと、

```bash
$ pwd
/home/work
```
絶対パスが実際のそれと食い違ってしまっています。
ホームディレクトリから普段使いする作業場に、くらいならまだいいのですが、
「じゃあ上の```d```ディレクトリを見てみましょう」と思っても

```bash
$ cd ../
$ ls
start work
$ pwd
/home
$ # ???
```
となってしまいます。しかも階層ごとに別のMakefileでもあった日には
誤って全makeしてしまう、なんてことも。怖くて使えません。

## こわいことその２：循環が。。。
たとえば日本語と英語の文書を

```bash
$ ls ./a/b/c/JA/d/e/
index.html about.html information.html
$ ls ./a/b/c/EN/d/e/
index.html about.html information.html
```
と管理していて、日本語と英語を行ったり来たりして作業するとします。
ここで

```bash
$ cd ./a/b/c/JA/d/e/
$ ln -s ../../EN/d/e/ en
$ cd en
$ ln -s ../../JA/d/e/ ja
```
なんて作ってしまった日には、

```bash
$ cd ~/a/b/c/JA/d/e/en/ja/en/ja/en/ja/ # ...
```
無限ループが出来てしまいます。怖くて使えません。

#解決：```.```をつかう
そこでおっかなびっくり編み出したのが、

```bash
$ echo "cd /home/start/a/b/c/d/e" >w
$ . w
```
これだけ。
```.```は``source``コマンドと同義で、引数に受け取ったファイルの中身が
**コマンドラインに直接打ち込まれたと思って**実行します。
環境変数のバッチとかに使うやつですね。

なので、```. w```はファイルの中身```cd /home/start/a/b/c/d/e```を
直接叩いたのと同じことになって、自然なディレクトリ移動ができます。

これでWindowsのショートカットに近いことができます。
実行権限や環境変数をいじる必要すらなく、コピーして使い回しても問題ない。
小心者にもお手軽です。
はた目には「細かいメモファイルが散らかってるだけ」ですしね。

##使用例
```bash
$ ls
e start/ j
$ . j # 日本語作業ディレクトリへ
$ pwd
/home/start/a/b/c/JA/d/e/
$ ls
e index.html about.html information.html r
$ . e # 英語版へ平行移動
$ pwd
/home/start/a/b/c/EN/d/e/
$ ls
index.html about.html information.html j r
$ cat r
cd /home
$ . r # 「このプロジェクトのルートディレクトリ」も作っておくとさらに便利
$ ls
e start/ j
Serverless Framework でステージごとに環境変数を定義する

Serverless Framework を利用したアプリケーションを作成したときに、ステージごとに環境変数を設定したときにハマったのでメモ。
なお、LambdaのランタイムはNode.js4.3です。

環境変数の読み込み方の記事はあるけれど、ステージごとに環境変数を分けるにはどうしたらいいかについての情報はあまりありませんでした…
なのでお役に立てば。

## serverless.ymlにステージごとの環境変数を定義する

以下のように定義されています。

```serverless.yml
provider:
  name: aws
  runtime: nodejs4.3
  region: ${self:custom.defaultRegion}
  stage: ${opt:stage, self:custom.defaultStage}
  environment:
    REGION: ${self:custom.defaultRegion}
  iamRoleStatements:
    - Effect: "Allow"
      Action:
        - "logs:CreateLogGroup"
        - "logs:CreateLogStream"
        - "logs:PutLogEvents"
        - "ec2:CreateNetworkInterface"
        - "ec2:DescribeNetworkInterfaces"
        - "ec2:DeleteNetworkInterface"
      Resource:
        - "*"

custom:
  defaultStage: dev
  defaultRegion: ap-northeast-1
  environment:
    dev:
      SERVERLESS_ENV_VAL: dev_env
    stage:
      SERVERLESS_ENV_VAL: stage_env
    prod:
      SERVERLESS_ENV_VAL: prod_env

functions:
  foo:
    handler: app/util/foo.foo
    environment: ${self:custom.environment.${self:provider.stage}} 
```

上記のように `custom` の `environment` にdev, stage, prodのステージごとに環境変数を定義しておきます。

## JSから環境変数の読み込む

次はJSから環境変数の読み込みを行います。

```foo.js
'use strict';

const testenv = require('../../lib/test-environment');

/**
 * Lambdaイベントハンドラー
 */
module.exports.foo = (event, context, callback) => {
  const env = process.env.SERVERLESS_ENV_VAL || testenv.env.SERVERLESS_ENV_VAL;
  // 以下省略

};
```

これでJavaScriptでステージごとの環境変数を取得することができます。

ちなみに`sls invoke -s dev -f foo`というようにdevで実行した場合は「dev_env」
というように指定したステージに基づいた環境変数が使用されます。

## テストプログラムから動作させる場合の注意

テストプログラムから実行される場合、Serverlessフレームワークを経由しないので環境変数が設定されません。
環境変数が設定されていない場合外部のファイル(上記の例だとlib/test-environment.js)から値を読み込むようにすると非常に楽。

```lib/test-environment.js
'use strict';

/**
 * 環境変数が指定されなかった場合の初期値を定義します
 * sls invoke local -f foo というServerlessフレームワークをとおしてではなく
 * sls run -f [functionname] でローカルで実行した場合は
 * serverless.ymlの環境変数が読み込まれないため
 */

exports.env = {
  SERVERLESS_ENV_VAL: 'dev',
};
```

---

以上です。
Serverlessでステージごとに環境変数を切り替える場合のコーディングに役に立てば幸いです。
図形問題 平成25年度(2013)岐阜県数学問４「正答率０％の図形問題【高校入試なのに超難問】」(その1/2)問４(2)(イ)をだいたいsympyを使って解く。

:::note info
旧いです。以下へ移動をお願いします。
[(その2/2)](https://qiita.com/mrrclb48z/items/afcad5920839967098a4)
:::

①もっと短くなるような気もします。
②数値を代入せず、方程式で解けそうな気もしてきました。
③実数3.16227766でなく、ルート√の使えるCADはありますか。
④作図(文字を含めて)のおすすめのページを教えて下さい。

(参考)

http://www.5kaku.net/?p=6344

```python
from sympy import *
var('R TA CD')
R=10/2
TA=mpmath.radians(0)
CD=6
CI=Circle(Point(0,0),R)
A=Point(R*cos(TA), R*sin(TA))
C=Point(-R*cos(TA), -R*sin(TA))
CJ=Circle(C,CD)
result=CI.intersection(CJ)
D=Point(result[0].x,result[0].y)
AD=A.distance(D)
D2=Point(R*cos(TA)-AD, 0)
H2=D.midpoint(D2)
H =Segment(A, H2).projection(D)
result=CI.intersection(Line(D, H))
B=Point(result[1].x,result[1].y)
E= Line(A, C).intersection(Line(D, B))
print("#BE=",B.distance(E[0]))
#BE= sqrt(10)
UIStackView 内の view を非表示にしたら、AutoLayout の警告が出る

## みんな使ってるの？

UIStackView というと、Android でいう LinearLayout みたいなものなのですが、個人的に使いにくくて仕方ないです。
世の中の iOS アプリ開発してる方々は、業務でも使ってるんでしょうか？
なかなか狙ったレイアウトにできなくて、時間ばかり掛かる気がするんですが、自分が使い方ちゃんと理解してないからなのだろうか・・・。（正直、swift も業務で使われてるのか半信半疑ですが・・・）

文句ばかり書きましたが、UIStackView 内の view を非表示にすることで、Android の View.GONE みたいに、その view の分レイアウトを詰めて表示できたりするので、そういう点では便利なのかもしれません。

## 文句言ってないで使ってみる

慣れるために色々やってみているのですが、以下のようなパターンで警告が大量に出てしまったので、その解決策です。

![スクリーンショット1](https://qiita-image-store.s3.amazonaws.com/0/165132/5a44da4e-44d7-d291-0acb-13fe4611eeb1.png)

大したレイアウトではないのですが、UIStackView の中に、UIImageView と UIStackView が入っています。
そして、中にある UIStackView の中に、UILabel が3つ。
ありがちといえばありがちなレイアウトだと思います。

![スクリーンショット2](https://qiita-image-store.s3.amazonaws.com/0/165132/f0659238-79df-55b3-b131-c6673c8b1047.png)　![スクリーンショット3](https://qiita-image-store.s3.amazonaws.com/0/165132/6871f4cd-ce87-c0bb-9f81-5260f06a9514.png)

UIImageView には、幅とアスペクト比の制約をつけています。
この状態で実行すると、特に警告もなく正常に表示されます。

## view.hidden = YES で警告が

次に、コードで以下のようにしてみます。

```ObjC:
- (void)viewDidLoad {
    [super viewDidLoad];
    self.imageView.hidden = YES;
}
```

はい、起動時に左側にある UIImageView を非表示に設定してみます。
画像が非表示になって、ラベルたちが左側によって表示される、はず。
ですが、これをやると一応正しく表示されますが、ログに以下の警告が出てきます。

    2017-04-14 22:41:49.655702+0900 StackViewTest[1485:103003] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    	Probably at least one of the constraints in the following list is one you don't want. 
    	Try this: 
    		(1) look at each constraint and try to figure out which you don't expect; 
    		(2) find the code that added the unwanted constraint or constraints and fix it. 
    (
        "<NSLayoutConstraint:0x608000098f10 UIImageView:0x7fa4b1608aa0.width == 101   (active)>",
        "<NSLayoutConstraint:0x61000009bc60 'UISV-hiding' UIImageView:0x7fa4b1608aa0.width == 0   (active)>"
    )

    Will attempt to recover by breaking constraint 
    <NSLayoutConstraint:0x608000098f10 UIImageView:0x7fa4b1608aa0.width == 101   (active)>
    
    Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
    The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

制約つけるの間違えたときに出てくる、あの警告ですね。
hidden を YES にしただけなのに、何が問題なんだ。

## 解決

imageViewの制約を、以下のようにしたところ、一応警告は出なくなりました。

![スクリーンショット4](https://qiita-image-store.s3.amazonaws.com/0/165132/051d0951-80da-e43e-ce10-e3506727e8ac.png)

幅の制約の Priority を 1000 → 999 にしました。

理屈は正直良くわかってませんｗ
こういうところが、UIStackView を使いにくいと感じるのかもしれません。

ちなみになのですが、この警告が起きるのは、UIStackView 内に2つ以上 view があって、左側(Axis が Vertical の場合は上側)の view に幅(Axis が Verticalの場合は高さ)の制約がついてるときのみのようです。
UnityのMonoBehaviourでInspectorに値を出さない方法

# 前置き

UnityでInspectorから設定値を変更するためには、 `public` で値を宣言する必要がある。

```csharp
public MyScript : MonoBehaviour {
    public string Value = "";
}
```

<img width="338" alt="スクリーンショット 2017-04-14 22.50.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/15000/120942ef-e1aa-398f-1428-466f2ed01bd8.png">

ここでinspectorには表示したくないが、他のクラスからアクセスさせたい変数を設けたい場合がある.
その手段についてメモ。

# 手段

## パターン１: HideInspector


```csharp
public class MyScript : MonoBehaviour
{
    [HideInInspector] public string Value = "";
}
```


メリット
- 初期値が設定できる

デメリット
- Serializeで値保持の問題 (※1)
- 公開権限をいじれない (get可能 set不可など).
- get/set時に処理記述ができない. (ちょっとした変換とか)

※1
- Prefab化した後にアノテーションを追加すると、値が保持される続けるような予期せぬ挙動をする
- HideInInspectorはinspector常に表示しないだけ、Serialize objectの値保存は行なってしまう.
- 下記は Valueに `abc` を入れた状態でPrefab化したobjectからHideInSpectorをつけた場合のPrefabの値の状態
- objectの値が保存されている & そのfieldがSerializableなので、予期せずinspectorの値が復元されてしまう


```yaml
%YAML 1.1
%TAG !u! tag:unity3d.com,2011:
...(中略)...
--- !u!114 &114625309749185936
MonoBehaviour:
  m_ObjectHideFlags: 1
  m_PrefabParentObject: {fileID: 0}
  m_PrefabInternal: {fileID: 100100000}
  m_GameObject: {fileID: 1202429588961352}
  m_Enabled: 1
  m_EditorHideFlags: 0
  m_Script: {fileID: 11500000, guid: 4dbbba54007a4473fb3737c795b998a3, type: 3}
  m_Name: 
  m_EditorClassIdentifier: 
  Value: abc
```

## パターン2: NonSerialized

```csharp
public class MyScript : MonoBehaviour
{
    [NonSerialized] public string Value = "";
}
```

メリット
- 初期値が設定できる
- Serializeで値保持の問題なし

デメリット
- 公開権限をいじれない (get可能 set不可など).
- get/set時に処理記述ができない. (ちょっとした変換とか)


## パターン3: getter, setterプロパティ

```
public class MyScript : MonoBehaviour
{
    public string Value { get; set; }

    void Awake()
    {
        this.Value = "";
    }
}
```

メリット
- get, setで公開範囲と権限を自由に絞れる
- getterの中で処理を書いたり、 setだけprivateにしたりできる　(`private set;`)
- Serializeで値保持の問題なし

デメリット
- 初期値が宣言時に入れられない.　Awakeの中などで初期化する必要がある.

個人的にはこのパターンが好みです。
getter, setterを通して他クラスからアクセスさせるというのも自然な記述だなと。

# まとめ

HideInInspectorは予期せぬ挙動あるので原則やめよう.
NonSerializedかpropertyを使おう
LilyPondのフォントにまつわるあれこれ

~~EmmentalerとCentury Schoolbookの組み合わせはエロいとかそういうことを書きたいわけじゃなくって。~~

備忘録的な感じです。ちなみに[LilyPond](http://lilypond.org/)とはテキストファイルから楽譜を生成する浄書ソフトです。

基本の話は[公式リファレンス](http://lilypond.org/doc/v2.18/Documentation/notation/fonts.html)へ。

使用できるフォントの一覧を見（てgrepす）る
----
参考: http://lilypond.org/doc/v2.18/Documentation/notation/fonts.html

ターミナル上で、

```
lilypond -dshow-available-fonts x
```

をすればLilyPondで使用可能なフォントの一覧が出力されます。

```
family ヒラギノ角ゴ Pro
 ヒラギノ角ゴ Pro,Hiragino Kaku Gothic Pro,Hiragino Kaku Gothic Pro W3,ヒラギノ角ゴ Pro W3:style=W3,Regular
…
```

LilyPondでフォント名を指定する際は、上の出力で`Hiragino Kaku Gothic Pro W3`とか`ヒラギノ角ゴ Pro W3`にあたる所を使うと良いと思います。

さて、インストールされているフォントの数が多いと、出力が膨大になるので、grepとかで検索をかけたくなると思います。しかし、どうやら出力がstderrになってるようで、そのまま`| grep`してもうまくいきません。そこでstderrをstdoutに変えてやる必要があります。具体的にはこうです。

```
lilypond -dshow-available-fonts x 2>&1 | grep ヒラギノ
```

`2>&1`の部分がstderrをstdoutにして出力してくれるおまじないです。これで思う存分grepできますね。ちなみに私のおすすめは[peco](https://github.com/peco/peco)です。便利。

（本題）macOSでユーザーインストールのフォントが認識されない
====

LilyPondはデフォルトのフォントセットが欧文フォントなので、日本ユーザーは特にフォント変更をする場面が多いと思います。しかし、macOS環境ではどうやら`~/Library/Fonts`以下のフォントをデフォルトでは認識してくれないようです。

通常では、先のリストアップコマンドの出力の最後が以下のようになってるはずです。

```
Config dir: /usr/share/fonts
Config dir: /Library/Fonts
Config dir: /System/Library/Fonts
Config dir: /Users/***/.local/share/fonts
Config dir: /Users/***/.fonts
Font dir: /usr/share/fonts
Font dir: /Library/Fonts
Font dir: /System/Library/Fonts
Font dir: /Users/***/.local/share/fonts
Font dir: /Users/***/.fonts
```

確かに見つかりませんね。

さて、`~/Library/Fonts`のフォントを認識させるためには、fontconfigの設定ファイルをいじる必要があります。LilyPondは専用のfontconfigがバンドルされていて、設定ファイルもそちらのものを編集しなければいけません。（Homebrewとかで入れた環境だとどうなるんでしょう？以下の話は公式サイトからバイナリを落としてきた時の話です。）

場所はLilyPondをインストールしたディレクトリから`etc/fonts/local.conf`です。（fonts.confは編集しないでくださいって書いてありました。）

以下のように追記します。

```diff:local.conf
 <fontconfig>
 <selectfont>
  <rejectfont>
  <pattern>
   <patelt name="scalable"><bool>false</bool></patelt>
  </pattern>
  </rejectfont>
 </selectfont>

 <cachedir>~/.lilypond-fonts.cache-2</cachedir>
+<dir>~/Library/Fonts</dir>
 </fontconfig>
```

これでもう一回`lilypond -dshow-available-fonts x`するとフォントが認識されることを確認できるはずです。

余談
====

218行目。

```scm:share/lilypond/current/scm/font.scm
                (font-encoding . latin1) ;; ugh.
```

多言語対応の道は長い。
Rantly(property based testing tool)でテストデータ生成 - boolean

Rantly#boolean で真偽値をランダムに生成できます

## <i class='fa fa-question-circle'></i> 関連記事
[tbpgr の Rantly 関連記事](http://qiita.com/search?utf8=%E2%9C%93&q=user%3Atbpgr%20tag%3ARantly)

## <i class='fa fa-flask'></i> サンプル
```ruby
Rantly(5) { boolean }
# => [true, true, true, false, true]
Rantly(5) { boolean }
# => [false, false, false, false, false]
Rantly(5) { boolean }
# => [true, true, false, true, false]
```

## <i class="fa fa-book" style="font-size:1em;"></i> 外部資料
* [abargnesi/rantly](https://github.com/abargnesi/rantly)
Rantly(property based testing tool)入門

## <i class='fa fa-question-circle'></i> Rantly とは？
テスト用のランダムデータ生成のRuby実装。
Haskell の Quickcheck の Ruby 版。
property based testing を行うためのツール。
property based testing については下記記事を参照。

[ひどいサンプルコードで property based testing をまなぶ - TbpgrBlog](http://tbpgr.hatenablog.com/entry/2017/04/14/080500)

## <i class='fa fa-download'></i> インストール
```sh
$ gem install rantly
```

## <i class='fa fa-list'></i> Class Methods
Rantly のクラスメソッドを紹介します。

### <i class='fa fa-check-circle'></i> Rantly.map
map で指定した数の乱数配列を返す。  
`Ranty(n, &block)` でも同じ結果が得られる。

```ruby
Rantly.map(5){|e|string}
# => [": OPp{", "8a2CfM", "CU8ODd", "$Bd@Zm", "5\\MFK."]
Rantly.map(5){|e|integer}
# => [-928585434008314195, 99312170261778545, -220896656041693551, 2261106664388239913, 1254352080314110761]
Rantly(5){|e|integer}
# => [-985824282836181758, 1653344108921040141, -984939155340365180, -1109600847398276901, 1544390725827159702]
```

### <i class='fa fa-check-circle'></i> Rantly.each
each で指定した数のランダムな値の生成を繰り返す。  

```ruby
Rantly.each(5){|e|puts string}
# '8=;vC
# "cg{=$
# |g7*+J
# iuL]i2
# =I\8qi
```

### <i class='fa fa-check-circle'></i> Rantly.value
任意の一つの値を乱数で返す。  
`Ranty(&block)` でも同じ結果が得られる。

```ruby
Rantly.value {string}
# => "Xtn \"d"
Rantly.value {string}
# => "}1@4}l"
Rantly {string}
# => "9Q@9y^"
Rantly {string}
# => "f5vlU@"
```

## <i class='fa fa-pencil-square'></i> メモ
利用可能なインスタンスメソッドについては別記事で順次追加します

## <i class="fa fa-book" style="font-size:1em;"></i> 外部資料
* [abargnesi/rantly](https://github.com/abargnesi/rantly)
AWS Auto Scalingのインスタンス縮退時のログの退避手段について

# 問題

AWSのEC2でautoscalingをしているときに、インスタンス縮退時のログの退避ってどうしたらいいんだろう？
簡単な方法は何かないかなーと思って調べました。

## Auto Scaling のライフサイクルフック

下記のAWSのAuto Scalingのライフサイクルフックのオンラインマニュアルを読んだのですがよくわかりませんでした。
[Auto Scaling ライフサイクルフック](http://docs.aws.amazon.com/ja_jp/autoscaling/latest/userguide/lifecycle-hooks.html)

よくわからないというのは、具体的にどういう手順なのかが見えませんでした…

なので、シェルスクリプトをサービスとして登録することで、
インスタンスがterminateさせられるタイミングで処理させます。

## サービスのシェルスクリプト

`/etc/init.d/instance-lifecycle`に下記の内容で保存します。


```instance-lifecycle
#!/bin/sh
# chkconfig: 2345 99 1
# description: インスタンス縮退時にトラッキングログ、各種ログを退避する
 
case "$1" in
  start)
    echo "instance lifecycle process start"
    touch /var/lock/subsys/instance-lifecycle
    ;;
  stop)
    export AWS_CREDENTIAL_FILE=/opt/aws/credential

    # ログをコピー
    scp ~user/project/log/access_log user@server:~user/project/log/`hostname`-access_log-`date "+%Y%m%d%H" -d "1 hours"`

    # ログをS3にコピー
    aws s3 sync ~user/project/log s3://access_log/`hostname`

    echo "instance lifecycle process end"
    rm -f /var/lock/subsys/instance-lifecycle
    ;;
  *) break ;;
esac
```

`/var/lock/subsys/`以下にファイルが置かれたサービスがOSの終了時に実行されます。  

これを有効化するために以下のコマンドを実行します。

```
chkconfig --add instance-lifecycle
chkconfig instance-lifecycle on
service instance-lifecycle start
```

これでAuto Scalingのインスタンス縮退時にログが退避されるようになります。
基礎数学公式一覧【微分】

#はじめに
筆者自身の勉強用備忘録です。
微分は、数学Ⅲくらいから難しさを痛感しています。社会人になると、なかなか時間とって覚えられなくて・・・・
まだまだ足りないので、どんどん追記しています。
[Wikipediaリンク](https://ja.wikipedia.org/wiki/%E5%BE%AE%E5%88%86)

同じシリーズとして微分は別記事[「基礎数学公式一覧【三角関数】」](http://qiita.com/FukuharaYohei/items/398763e4c4b4ec03f17f)にあります。

#公式一覧
###極限
微分ではないですが極限公式から始めます。

|項目|内容 |備考|
|:--|:--|:--|
|三角関数| $ \lim_{x\rightarrow0}\frac{\sin{x}}{x}=1 $ <br> $ \lim_{x\rightarrow0}\frac{\tan{x}}{x}=1 $ <br> $ \lim_{x\rightarrow0}\frac{1-\cos{x}}{x^2}=\frac{1}{2} $ |図形的に証明できます|
|指数・対数関数| $ \lim_{x\rightarrow0}\frac{\mathrm{e}^x-1}{x}=1 $ <br> $ \lim_{x\rightarrow0}\frac{\log (1+x)}{x}=1 $ <br> $ \lim_{x\rightarrow0}(1+x)^{\frac{1}{x}}=\mathrm{e} $ <br> $ \lim_{x\rightarrow\pm\infty}(1+\frac{1}{x})^x=\mathrm{e} $|ネイピア数$\mathrm{e}$の定義から順に証明可能|

###微分
本題の微分です。

- $ (\mathrm{e}^{x})'=\mathrm{e}^{x} $  

- $ ({a}^{x})'={a}^{x} \log a $  $(a>0)$  

- $ (\log x)' = \frac{1}{x} $  $(x>0)$

- $ (\log_a x)' = \frac{1}{x \log a} $  $(x>0)$

- $ \left[ \log f(x) \right]' = \frac{f'(x)}{f(x)}$  $(f(x)>0)$

- $ ({x}^{\alpha})'={\alpha}{x}^{\alpha-1} $  

- $ (\sin x)'=\cos x $ 

- $ (\cos x)'=-\sin x\\ $ 

- $ (\tan x)'=\frac{1}{cos^2 x} $ 

- $ (\sin^{-1}{x})'=\frac{1}{\sqrt{1-x^2}} $  $ (-1<x<1)$ 

- $ (\cos^{-1}{x})'=-\frac{1}{\sqrt{1-x^2}} $  $ (-1<x<1)$ 

- $ (\tan^{-1}{x})'=\frac{1}{1+x^2} $  $ (-1<x<1)$ 

- $ (\sinh^{x})' =\cosh^{x}  $  

- $ (\cosh^{x})' =\sinh^{x}  $  

- $ (\tanh^{x})' =1- \tanh^{2}{x}  $  

- $ (\sinh^{-1}{x})' =\frac{1}{\sqrt{1+x^2}}  $  

- $ (\cosh^{-1}{x})' =\frac{1}{\sqrt{x^2-1}}  $  

- $ (\tanh^{-1}{x})' =\frac{1}{1-x^2}   $  


####高校で習った基本的な微分公式

- $ [f(x)g(x)]'=f'(x)g(x)+f(x)g'(x)\\ $
- $ \left[\frac{1}{g(x)}\right]'=-\frac{g'(x)}{[g(x)]^2}\\ $
- $ \left[\frac{f(x)}{g(x)}\right]'=-\frac{f'(x)g(x)-f(x)g'(x)}{[g(x)]^2}\\ $
- $ \frac{dy}{dx}=\frac{dy}{du}\frac{du}{dx}\\ $
- $ \frac{dy}{dx}=\frac{1}{\frac{dx}{dy}}\\ $
- $ \frac{dy}{dx}=\frac{\frac{dy}{d\theta}}{\frac{dx}{d\theta}}\\ $

###おまけ(積分)
[積分公式](http://w3e.kanazawa-it.ac.jp/math/category/sekibun/henkan-tex.cgi?target=/math/category/sekibun/iroirona-kansuu-no-sekibun.html)
本当は、積分編を作りたいのですが、時間の関係でリンクのみ。
JavaFX / 設定ダイアログのリキッドレイアウト

##環境
- JDK 1.8.0_121
- JavaFX Scene Builder 8.3.0

##概要
設定項目が多い画面のリキッドレイアウトを組んでみます。難しいものではありませんがちょっとした設定画面を作るのにレイアウトパターンを知っておくと便利です。

`GridPane`を使ってもよいのですが設定項目が多くなると水平方向の融通が利かなくなっていきます。今回は`GridPane`を使わない方法です。

![1.gif](https://qiita-image-store.s3.amazonaws.com/0/168976/33a0ed7e-0701-3f00-bfd5-83b8a8f79e53.gif)

## 外枠

![4.png](https://qiita-image-store.s3.amazonaws.com/0/168976/f2c94025-46c3-013c-a717-33d3ee448066.png)

Cancel,OKボタンが常に表示されるように`BorderPane`をルートにします。

1. `ScrollPane`の Layout>Fit To Width にチェックを入れます。子要素の`VBox`の幅が`ScrollPane`の幅一杯まで広がるようになります。
2. この`VBox`の中に各設定項目を並べます。
3. `HBox`の Properties>Alignment を`BASELINE_RIGHT`にすることでOK,Cancelボタンが右寄せになります。

## 設定項目

![_4.png](https://qiita-image-store.s3.amazonaws.com/0/168976/88ab6e89-2838-289a-af2a-70edc31145d8.png)

1. 設定項目ごとに`HBox`を使用します。`HBox`の Layout>Alignment に`BASELINE_LEFT`を指定することでラベルと入力欄の縦方向の文字位置を揃える事ができます。
2. 入力欄を右寄せにしたい項目はラベルと入力欄の間に`Region`を挟みます。`Region`の Layout>Hgrow を`ALWAYS`にすることで`Region`の幅を目一杯広げて入力欄のみ右寄せにすることができます。
3. `TextField`や`TextArea`など入力欄自体を広げたい場合はそのコンポーネントのLayout>Hgrow を`ALWAYS`にします。

`ListView`などコンポーネントによってはベースラインの位置が異なるものがあるので、`HBox`のAlignmentを上揃いにしたほうがよい場合があります。

`HBox`,`VBox`のSpacingは非常に便利です。Paddingと合わせて設定することでコンポーネント間の距離を均等に保てます。

### 省略表記を防ぐ

ラベルやボタンの省略表記(...)を防ぎたい場合は次の方法があります。

- Min Width に`USE_PREF_SIZE`を設定する方法
- Text Overrun に`CLIP`を設定する方法

![2.gif](https://qiita-image-store.s3.amazonaws.com/0/168976/41a6017c-5c05-93f1-0161-d3cf8e60ffcc.gif)

`USE_PREF_SIZE`はMax Widthにも設定することができいろいろ応用が利きます。

## FXML
[dialogExample.fxml](https://gist.github.com/monolith52/17a174025c9256a320c199a80cf57770)
Circle CI2 で PHP + PostgresSQL のDocker環境構築


PHP の環境構築については、以下の公式ドキュメントが参考になるが、

https://circleci.com/docs/2.0/language-php/

MySQLから Postgres SQL に変更しようとするとエラーが出る。

````
version: 2
jobs:
  build:
    docker:
      - image: php:7.1-apache
      - image: postgres:9.6.2
        environment:
          POSTGRES_PASSWORD: secret
          POSTGRES_USER: homestead
          POSTGRES_DB: homestead
    working_directory: /var/www/html
    steps:
      - run: apt-get update && apt-get -y install git unzip zlib1g-dev
      - checkout
      - run: docker-php-ext-install pdo pdo_pgsql zip
      ...
````


`docker-php-ext-install` で `pod_pgsql` をインストールすると以下のようなエラーが

````
Cannot find libpq-fe.h. Please specify correct PostgreSQL installation path
````

キレイに `pdo_pgsql`をインストールするには、以下のような形で apt-get に `libpq-dev` を追加する。

````
steps:
  - run: apt-get update && apt-get -y install git unzip zlib1g-dev libpq-dev
  - checkout
  - run: docker-php-ext-configure pgsql -with-pgsql=/usr/local/pgsql
  - run: docker-php-ext-install pdo pdo_pgsql zip
````

これでうまいこと行くはず
サブディレクトリで動かしているErrbitのURLをAirbrakeに指定するときは最後にスラッシュをつけること

`rails g airbrake` で生成した設定ファイルや、Errbit のアプリ登録後の画面には `c.host = 'http://xxx.vs.sakura.ne.jp'` のように表示されているので、最後にスラッシュをつけない流儀に合わせてサブディレクトリを書いたらとてもはまりました。

正しくは、次のように最後にスラッシュをつけるのが正しいです。そうしないと /errbit/api の形になってくれません。

```ruby:config/initializers/airbrake.rb
Airbrake.configure do |c|
  c.host = 'http://xxx.vs.sakura.ne.jp/errbit/'
  c.project_id = 1
  c.project_key = 'xxxxxxxxxxxxxxxx'
end
```

### 該当個所のコード検証

スラッシュをつけないとこの2つ目のように /foo がなかったことになってしまう。

```ruby
require "uri"
URI.join("http://example.net", "api").to_s      # => "http://example.net/api"
URI.join("http://example.net/foo", "api").to_s  # => "http://example.net/api"
URI.join("http://example.net/foo/", "api").to_s # => "http://example.net/foo/api"
```
Androidを支える技術Ⅱを読む

# はじめに

私は今、「[まったりAndroid Framework Code Reading #5](https://mandroidfcr.connpass.com/event/53922/)」という、おそらくAndroidガチ勢のための勉強会に来ています。

![Image uploaded from iOS.jpg](https://qiita-image-store.s3.amazonaws.com/0/9059/0c094ced-adab-ccfa-920d-398a6c95dc01.jpeg)

先にお断りをしておきますと、私はAndroidガチ勢ではありません。友達の @operandoOS さんが主催しているので、ただ遊びに来ただけなのです。
もっとも、私も昨年の4月まではAndroidに関わる仕事をしておりましたので、Androidというオペレーティング・システムに興味が無いわけではありません。
ですので、当時携わっていた仕事と関係が深そうな内容がビッチリと詰まっている「[Androidを支える技術Ⅱ](https://www.amazon.co.jp/dp/4774188611)」という書籍を今日の昼休みに購入したのでそれを読みます。
ちなみに「Androidを支える技術<Ⅰ>」のほうは読んでません。

# 本の感想
以下、読みながら感想を思いつくままに書いてきます。

- まずこんな素晴らしい本を執筆された著者に感謝したい。
- 私がAndroidの仕事をしていた3年くらい前にあったら本当に良かったのになあと思った。
- 当時はこういう内部の仕組みを解説してくれるようなたのしい本は「Androidのなかみ」くらいしかなかったと思う。
- ただAndroidの中身は私にはレイヤーが下すぎた感があるので、本書のような下すぎず上すぎない感じが私にはうれしい。
- まず目次を見てみよう。
- いろいろ興味深い章があるのだが、個人的にいちばん響いたのは「第6章 Androidの始まり ブートローダーとinitプロセス」である。

- なので6章読んでみる

- まず最初に「電源を入れてからinitを起動するまでの概要」と来た。渋すぎる。
    - これはAndroidとか関係なく必須の知識。
    - これわかってないと当時は仕事できなかった。

- 続いて「Android端末のパーティション」
    - LKという単語を久しぶりに見て興奮。
    - systemパーティションって昔はread-onlyじゃなかったよなあたしかとか思った。

- 「ブートイメージとリカバリーイメージ」
    - bootってざっくりKernelのバイナリでしょ、という理解だったのだがそれだけじゃないんですね。こういうのほんと勉強になる。どこでこの知識を活かしたらいいのかはわからない。
    - AndroidとLinuxの起動時の違いとかあっておもしろい。

- 通常のブートローダーの処理
    - 署名のチェックのところ、いいですね。いろいろ思い出してしまいます。鍵違うと端末起動しませんからね。要注意ですよ。

- コラムに「rootを取得する？　何をしているのか？」というのがある。
    - 良い内容。
    - systemパーティションも署名チェックする云々の話はdm-verityのことだろうか。KKからだっけ？
    - 「本書ではroot化の詳細については解説しません」と断り書きがあるけど、けっこう詳しく説明してくれている気もする。
    - JTAGという単語を久しぶりに見てまたテンションが上がる。
    - 今ってSELinuxとdm-verityあるからroot取るの相当大変な気がするんだけど、どうなんだろう。

# さいごに

- 結局第6章の前半だけを読んで終わってしまったのですが、当時は知識があいまいなままやりすごしていた部分についての知見がたくさん得られました。
- これからもスキを見て読み進めていこうと思います。
isolinuxとbusyboxでブータブルCDを作成する

まずsyslinuxを落としてきて
> wget https://www.kernel.org/pub/linux/utils/boot/syslinux/syslinux-6.03.tar.xz
> xzcat syslinux-6.03.tar.xz | tar x

適当なワークディレクトリにbootディレクトリとisolinuxディレクトリを掘って
isolinux.binとldlinux.c32をisolinuxにコピーします。
> mkdir iso9660
> mkdir iso9660/boot
> mkdir iso9660/isolinux
> cp syslinux-6.03/bios/core/isolinux.bin iso9660/isolinux/
> cp syslinux-6.03/bios/com32/elflink/ldlinux/ldlinux.c32 iso9660/isolinux/

そのディレクトリにisolinux/isolinux.cfgを作成します。
>     default 1
>     label 1
>           kernel /boot/bzImage
>           initrd /boot/initrd.gz
>           append root=/dev/ram0 rdinit=/sbin/init

カーネルを落としてきてビルドします。
> wget https://www.kernel.org/pub/linux/kernel/v4.x/linux-4.9.6.tar.xz
> xzcat linux-4.9.6.tar.xz | tar x
> cd linux-4.9.6/
> make defconfig
> make bzImage
> cp arch/x86/boot/bzImage ../iso9660/boot/
> cd ..

busyboxを落としてきて
> wget https://busybox.net/downloads/busybox-1.26.2.tar.bz2
> bzcat busybox-1.26.2.tar.bz2 | tar x
> cd busybox-1.26.2/

menuconfigで
> make menuconfig

スタティックにリンクするように
Busybox Settings --->
  [*] Build BusyBox as a static binary (no shared libs)
を設定して

makeして_installをinitrdとか適当な名前でコピーします。
> make install
> cp -r _install/ ../initrd
> cd ..

その中にprocディレクトリとsysディレクトリとetc/init.dディレクトリを作って
> mkdir initrd/proc
> mkdir initrd/sys
> mkdir -p initrd/etc/init.d

etc/init.d/rcSを作って
>     #!/bin/sh
>     mount -t proc none /proc
>     mount -t sysfs none /sys
>     /sbin/mdev -s

実行権限を付けて
> chmod a+x initrd/etc/init.d/rcS

boot/initrd.gzにまとめます。
> cd initrd/
> find . | cpio --create --format=newc --owner=root:root | gzip > ../iso9660/boot/initrd.gz
> cd ..

最後にiso9660のイメージを作成。
> cd iso9660/
> mkisofs -o ../busybox.iso -b isolinux/isolinux.bin -no-emul-boot -boot-load-size 4 -boot-info-table .

---

buildrootは色々やってくれてありがたいんですが、しくじったときに何が悪いのか分かりにくいです。
自分でisolinuxとカーネルとbusyboxを用意した方がトラブルシューティングは楽かと。
ただし上記のやり方はクロスコンパイルしてないので32bit環境なら32bit用、64bit環境なら64bit用が出来てしまいます。

ちなみに [buildrootでブータブルCDを作成する](http://qiita.com/staatsschreiber/items/1520c34341ccc7bfd0d8) で作ったCDイメージは約5.5Mbyteで、上記の方法だと約7.8Mbyteでした。
menuconfigで真面目に設定するならこっちの方が小さくできるはずですが。
断絶された履歴を繋ぐ

# 概要

以下の問題を単純化した場合に解いてみた。

* あるソースツリーを取り込んで新しいリポジトリを育てていた。
* 後からそれ以前の履歴を持ったリポジトリが発見された。
* 新旧リポジトリの履歴を繋いで一つにするにはどうすればよいか？

# 準備

歴史が断絶された２つのリポジトリを作る

* repo_new リポジトリにはある時点以降の変更の履歴がある
* repo_old リポジトリにはそれ以前の変更の履歴がある。

```
~$ mkdir repo_old
~$ cd repo_old
~/repo_old$ git init
~/repo_old(master)$ echo aaa > old.txt
~/repo_old(master)$ git commit -m "aaa"
~/repo_old(master)$ echo bbb >> old.txt
~/repo_old(master)$ git commit -a -m "bbb"
~/repo_old(master)$ git log --oneline
6933cc5 bbb
fdd1f1e aaa
repo_old(master)$ cd ..
~$ mkdir repo_new
~$ cp repo_old/old.txt repo_new/new.txt
~$ cd repo_new
~/repo_new$ echo ccc >> new.txt
~/repo_new$ git init
~/repo_new(master)$ git add new.txt
~/repo_new(master)$ git commit -m "import text with modification"
~/repo_new(master)$ echo ddd >> new.txt
~/repo_new(master)$ git commit -a -m "ddd"
~/repo_new(master)$ echo eee >> new.txt
~/repo_new(master)$ git commit -a -m "eee"
```

新しいリポジトリには repo_old 時代の履歴は入っていない。

```
~/repo_new(master)$ git log --oneline
9cb1b71 eee
98c48a9 ddd
aa294ea import text with modification
~/repo_new(master)$ git blame -s new.txt
^aa294ea 1) aaa
^aa294ea 2) bbb
^aa294ea 3) ccc
98c48a9e 4) ddd
9cb1b71d 5) eee
```

# 手順

remote として旧リポジトリを追加する

```
repo_new(master)$ git remote add old ../repo_old
repo_new(master)$ git fetch old
```

新リポジトリの最初のコミットをチェックアウトしておき、旧リポジトリの master ブランチを別ディレクトリにチェックアウトする

```
~/repo_new(master)$ git checkout aa294ea
~/repo_new((aa294ea...))$　git worktree add ../old_master old/master -b old_master
```

まずファイル配置をあわせるためのコミットをして、次に新リポジトリの最初のコミットを取り込む。

```
~/repo_new((aa294ea...))$ cd ../old_master
~/old_master(old_master)$ git mv old.txt new.txt
~/old_master(old_master)$ git commit -m "rename along new repository"
~/old_master(old_master)$ cp ../repo_new/new.txt new.txt
~/old_master(old_master)$ git commit -a -m "$(git log --pretty=format:%B aa294ea)"
```

rebase 実行すると新リポジトリの最初のコミットは既に取り込み済みとしてスキップされ、以降のコミットが積まれる。

```
~/old_master(old_master)$ cd ../repo_new
~/repo_new((aa294ea...))$ git checkout -b new_master master
~/repo_new(new_master)$ git rebase old_master
First, rewinding head to replay your work on top of it...
Applying: import text with modification
Using index info to reconstruct a base tree...
Falling back to patching base and 3-way merge...
No changes -- Patch already applied.
Applying: ddd
Applying: eee
```

repo_old 時代の履歴が繋がった！

```
~/repo_new(new_master)$ git log --oneline
e347437 eee
c30cf35 ddd
a87e845 import text with modification
38edb59 rename along new repository
6933cc5 bbb
fdd1f1e aaa
~/repo_new(new_master)$ git blame -s new.txt
^fdd1f1e old.txt 1) aaa
6933cc54 old.txt 2) bbb
a87e8459 new.txt 3) ccc
c30cf35b new.txt 4) ddd
e3474370 new.txt 5) eee
```
Circle CI 2.0 の Configuration 


公式ドキュメントはこちら

https://circleci.com/docs/2.0/configuration-reference/

## ルートエントリ

- version は必須
- jobs は必須
- jobs.build は必須


````
version: 2
jobs:
	build:
		....

````

## Jobs 

`Jobs`は Circle CI 内で利用するジョブ定義で、`build`はデフォルトで用意され自動で実行される必須のジョブ。

`build`を始めとする各ジョブでは以下の項目を定義する。

- `docker`	| `machine`	実行環境の指定でどちらかが必須
- `steps` 実行されるコマンドのリスト。必須。
- `working_directory`	`steps` を実行するディレクトリ。必須。
- `parallelism` 並行稼動させるインスタンスの数。 Optionalでデフォルト1
- `environment	` 環境変数のマップ。Optional。
- `branches` 反応するブランチを定義するマップ。Optional

## Docker 

別途記述予定

## Machine

必要なキーは `enabled` のみで、直接 true をアサインすることも可能

## branch 

only と ignore を指定できる。

特定のブランチに限定したり

````
branches:
  only:
    - master
    - /rc-.*/
````

除外するブランチのみを指定したり出来る。

````
branches:
  ignore:
    - develop
    - /feature-.*/
````

## Steps 

環境上で実行するコマンドを指定できる。

`Steps` には配列を記述し、内部には `run.name` `run.command` からなるマップを配置する。

````
steps:
  - run: 
      name: Running tests
      command: make test
````

Yaml の `|` を使用して、複数行コマンドに一つの名前をつけることも可能

````
steps:
  - run:
      name: Initialize Database
      command: |
        php artisan migrate:refresh
        php artisan db:seed
````

単純に単一コマンドだけの場合、以下のような省略コマンドも許容される。

````
 steps:
      - run: make test
````

中には 組み込み Step というものもあり、特定のキーワードを文字列やキーにて直接指定する事もできる。

````
steps:
  - run: apt-get update && apt-get -y install git unzip zlib1g-dev
  - checkout
  - run: docker-php-ext-install pdo pdo_pgsql zip
````

上記での `checkout` が組み込みStepに該当する。組み込みStepには以下のようなものがある。
 
- [checkout](https://circleci.com/docs/2.0/configuration-reference/#checkout)
- [save_cache](https://circleci.com/docs/2.0/configuration-reference/#savecache)
- [restore_cache](https://circleci.com/docs/2.0/configuration-reference/#restorecache)
- [deploy](https://circleci.com/docs/2.0/configuration-reference/#deploy)
- [store_artifacts](https://circleci.com/docs/2.0/configuration-reference/#storeartifacts)
- [store_test_results](https://circleci.com/docs/2.0/configuration-reference/#store_test_results)
- [add_ssh_keys](https://circleci.com/docs/2.0/configuration-reference/#add_ssh_keys)
Slack の Status emoji を API で変更する

# はじめに

Slack に新しい機能が追加されました.

[Set your status in Slack – Several People Are Typing — The Official Slack Blog](https://slackhq.com/set-your-status-in-slack-28a793914b98)

新しい機能が追加されていくのは楽しいですね.
さっそく雑に利用してみたいと思います.

## Web から試す

[users.profile.set method | Slack](https://api.slack.com/methods/users.profile.set/test)

「profile」 に以下を書いて送信すると Status の絵文字が変わります.

```:profile
{"status_emoji":":zoi:"}
```

![スクリーンショット 2017-04-14 19.51.05.png](https://qiita-image-store.s3.amazonaws.com/0/30241/707410d5-8e52-a71d-3054-d85b8c828049.png)

このとき `status_text` を付与しないと元の Status のテキストが消えてしまいます.
なので設定しているものを変更したくない人は記入する必要があります.

```:profile
{"status_text":"今日も一日がんばるぞい！","status_emoji":":zoi:"}
```
![スクリーンショット 2017-04-14 19.55.00.png](https://qiita-image-store.s3.amazonaws.com/0/30241/cebca45a-ce2b-bb37-0c7f-2a1e909e6f0b.png)

## Node.js で投稿してみる

とりあえず動くか試したいので、テスト投稿用のトークンを使います.

<a href="https://api.slack.com/custom-integrations/legacy-tokens">Legacy tokens | Slack</a>

※ このトークンを永続的に使うことはおすすめしません.

```js:status.js
var request = require('request');

var emoji = ":sushi:";

var options = {
  url: 'https://slack.com/api/users.profile.set',
  method: 'POST',
  json: true,
  form: {
    "token": "ここにAPIトークン",
    "profile": JSON.stringify({
      "status_emoji": emoji
    })
  }
};

request(options, function(error, response, body) {
  console.log(body);
});
```

![スクリーンショット 2017-04-14 19.57.17.png](https://qiita-image-store.s3.amazonaws.com/0/30241/86a2a318-e7f2-8784-6eb0-c277f1f1671d.png)

## おわりに

出社・帰宅のステータス変更に早速利用しています.
（誰も見てないっぽいのでそれはそれで残念ですが…）
javascriptでUserAgentからゆるふわブラウザ判定

## はじめに
何番煎じかわかりませんが、javascriptの`window.navigator.userAgent`でブラウザ判定をやってみました。

Opera のUserAgentもいつのまにかカオスなことになっていて、時代の流れを感じました。

## デモ
[:whale2: デモ](https://b73w56h84.github.io/simple-browser-check/simple-browser-check.demo.html)

## ソースコード
[:whale2: ソースコード](https://github.com/B73W56H84/simple-browser-check)

## 参考と注釈

* [UserAgentからOS/ブラウザなどの調べかたのまとめ - Qiita](http://qiita.com/nightyknite/items/b2590a69f2e0135756dc)
* [javaScriptで対応ブラウザ判定 - Qiita](http://qiita.com/Evolutor_web/items/162bfcf83695c83f1077)
* [Microsoft Edgeのユーザーエージェントがカオスなので注意 - Qiita](http://qiita.com/tonkotsuboy_com/items/7b36bdfc3a9a0970d23b)
ECSでGPUを扱うためのAMI作成 by Amazon Linux Deep Learning AMI 

# 結論
ここ見れば一発だった
http://docs.aws.amazon.com/ja_jp/batch/latest/userguide/batch-gpu-ami.html

# 概要
scriptとかは変更があるかもしれないので転記しません。上記URLを参照してください。
以下の項番は上記URLの番号と合わせています。

1. Amazon Linux Deep Learning AMIを起動する
    2. 強いて言うならp2で立ち上げた方が楽しい
    3. でも高いからSpotInstanceを使おう。マーケットプレイスの画面から進むとSpotInstanceが選択出来た
4. SSHで接続する
4. URL内のconfigure-gpu.shを作成する
5. configure-gpu.shを実行する（結構待つ）
5. Dockerコンテナを実行して、インストールされているドライバにアクセスできることを確認する（以下のような結果が出力されること）
6. ゴミ掃除をする

```:No.5の実行結果
+-----------------------------------------------------------------------------+
| NVIDIA-SMI 367.57                 Driver Version: 367.57                    |
|-------------------------------+----------------------+----------------------+
| GPU  Name        Persistence-M| Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp  Perf  Pwr:Usage/Cap|         Memory-Usage | GPU-Util  Compute M. |
|===============================+======================+======================|
|   0  Tesla K80           On   | 0000:00:1E.0     Off |                    0 |
| N/A   47C    P8    26W / 149W |      0MiB / 11439MiB |      0%      Default |
+-------------------------------+----------------------+----------------------+


+-----------------------------------------------------------------------------+
| Processes:                                                       GPU Memory |
|  GPU       PID  Type  Process name                               Usage      |
|=============================================================================|
|  No running processes found                                                 |
+-----------------------------------------------------------------------------+
```

# あとの作業
これをECSのAMIとして使って、ECSの特権フラグをOnにする
jscript で ES2015～ を使う

jscript って node.js とか入っていない PC でも使えて、簡単にダイアログ出せるで結構便利

でもモダンな書き方ができないのでアロー関数なんか使うと構文エラー……

Windows10 からは Edge で ES2015 や 2016 の JavaScript も書けるしエンジンを Chakra にすればいけるんじゃ？
と思ってやってみたら動いた

特に意味のない新し目な書き方をつかったコード

**[jscript.js]**

```js
const cvalue = 5

;[{cvalue}].forEach(({cvalue: e} = {cvalue: 1}) => {
    let lvalue = 0

    for(const k of [...[1, 2]]){
        lvalue += k ** k
    }

    lvalue === e
        && Symbol.for("a") === Symbol.for("a")
        && [...new Set([1, 2, 1, 2])].length === 2
        && WScript.Echo(1)
})
```

動いていたら `WScript.Echo(1)` で 1 が表示されます

これを Chakra の CLSID をエンジンにして実行

```bat
wscript //E:{1b7cd997-e5ff-4932-a7a6-2a9e636da385} jscript.js
```

![Image.png](https://qiita-image-store.s3.amazonaws.com/0/130150/93e5b0d8-6f54-55f0-fd34-4a8b8a240c22.png)

これで jscript ライフが捗る！？
インタラクションデザインのためのプロトタイピングツール調査


# <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 前提と目的
- （アプリデザインではなく）Webサイトの受託制作が中心
- 画面遷移設計に特化した所謂プロトタイピングツールというよりは、デザイン上の演出や、ちょっとしたインタラクションなどを、協働する相手と効率よく共有したり、クライアントなどへプレゼンテーションしたりするためのツールが欲しい。
- 今まではデザイナーがイメージに近しい参考サイトのURLを添えて送ったり、場合によっては簡易的にコーディングして動かすなどしていた。

# <i class="fa fa-thumbs-o-down" aria-hidden="true"></i> 課題
- 意図する動きの参考サイトをピンポイントに探す時間も馬鹿にならず（いわんやコーディングをや）、折角探してもそれでは伝わりきらない場合も多く、手戻りに繋がる。
- ディレクターとデザイナー間、デザイナーとエンジニア間でインタラクションや効果・演出を伝える際に齟齬が生まれやすい。
- クライアントへの提案時に簡易なものでも動くモックを提示したいというディレクター・営業からの要望が増えてきたので、コーディング以外の方法で、なるべく工数をかけずにそれを実現したい。
- 社内環境（Win：Mac = 8：2）により、Windowsでも使用できるツールがよい。
（Mac専用ツールは一旦候補外に）

# <i class="fa fa-smile-o" aria-hidden="true"></i> 検討したツール
## Flash（現Animate CC）
- 経験的に言って、むしろ工数増かつこれから覚えるには学習コスト高。
- 既に習熟していれば、場合によっては悪くない選択肢かも。

## After Effect
- 同上。

- 今回の目的とは外れるが、bodymovin.jsを用いたSVGアニメーションの書き出しは一考の価値がありそう。
↓↓↓↓↓↓↓↓↓↓
試してみた：
[「Adobe After EffectsとbodymovinでSVGアニメーションの作成を試してみる」](http://qiita.com/takaaki_ishii/items/ed9f31afd61842e64c17)

## [atomic](https://atomic.io/)
- Windows、Macの別なくクラウドベースで使用が可能。
- モバイルだけでなくデスクトップ向けにも設計されている。
- 非常に直感的に扱え、画面遷移のトランジション作成に強い。
- 同一画面内でのインタラクション（ボタンのインタラクションなど）がやや弱く、スクロールに連動したアニメーションなどがつけられない。
- 無料版制限あり、有料版は1ユーザー＄19/月～。

![atomic.png](https://qiita-image-store.s3.amazonaws.com/0/170211/1d97bba3-9b5e-3ce2-c834-5ad3192bd552.png)

https://atomic.io/

## [ProtoPie](https://www.protopie.io/)
- Mac、Windows用スタンドアローンのデスクトップアプリ。
- 直感的に扱え、短時間でもトランジション、インタラクションなど、入力に応じたアニメーションを設定できる（個人的にやりたい事はほぼ実現できていると感じる）。
- モバイル向けの用途に特化されている（カンバスサイズを変更すればデスクトップ向けデザインも対応可能）。
- インタラクションとインタラクションを紐付けられる「チェーン機能」が便利。
- モバイルならではのセンサー入力などもアニメーションのトリガーとして使える（らしい）。
- iOS、Android向けにProtoPie Playerというアプリが提供されており、実機での確認もスムーズ。
- 一方デスクトップ向けに作ったものに関して、出来上がったアニメーションはProtoPieユーザーとしか共有できない（何らか一般的な形式でエクスポートできれば完璧なのに…）。
- 試用版（30日間）あり。
- ＄99～。

![protopie.png](https://qiita-image-store.s3.amazonaws.com/0/170211/042c5201-e968-79fb-925d-fa3fb9144e0d.png)

https://www.protopie.io/

# <i class="fa fa-apple" aria-hidden="true"></i> Mac専用だがいずれ試したいツール
## [Framer](https://framer.com/)

- CoffeScriptベースで細かくアニメーションを付けられる。
- イケてるGUIはMacのみ。
- コードの書けないデザイナーだとハードに使いこなすのは難しいのかも。
- 学習コスト高そう（だが面白そうなので時間を見つけて試してみたい）。
- ＄15/月～、＄159/年。

![framer.png](https://qiita-image-store.s3.amazonaws.com/0/170211/7f8a29ce-28f1-e3a4-e242-f2d8a328db2a.png)

https://framer.com/

## [Flinto For Mac](https://www.flinto.com/ja/mac)

- 一番やりたい事のイメージに近い印象。
- ＄99。

https://www.flinto.com/ja/mac

## [Origami Studio](http://origami.design/)

- 学習コストやや高そう。
- Facebook製。
- 無料。

http://origami.design/

## [Principle](http://principleformac.com/)

- 未知数…
- ＄99。

http://principleformac.com/

# <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> （現状の）まとめ
- ProtoPieが一番やりたい事に合致していると感じる（が、atomicとProtoPieが合体したようなツールが欲しい…）。
- ProtoPieで作ったものをどのように協働者（もしくはクライアント）に見せるかが課題（画面キャプチャを撮って動画ファイル化する、など）。
- Mac環境が整備できればまた別の選択肢もありえるかも…

# <i class="fa fa-pencil" aria-hidden="true"></i> 備考
- [Prototypr](http://www.prototypr.io/prototyping-tools/)というサイトで各種プロトタイピングツールが網羅的に比較されているので参考になります。
Python3.6 opencv3.2 画像いじり①画像読み込み-表示-保存

##まえがき
画像をいじってみる。
OpenCVの導入はご自身でどうぞ
おなじみのlenaさんの画像を使います。

実行するコードと画像が別の場所にあるとして、
一度`image_path`に画像のディレクトリのパスを指定します。

動作確認環境は以下の通り
 - Python 3.6
 - OpenCV 3.2

##本題
何はともあれ画像出力

```python:read_and_show.py
import cv2

#画像読み取り
image_path = "lenaさんの画像を格納してるディレクトリのパス" #例えば　"C:\\Users\\admin\\Pictures\\"
image = cv2.imread(image_path+"lena.jpg")  #画像読み取り　imread(filename)

#画像表示
cv2.imshow("image",image) #画像出力 imshow(window_name, matrix)
cv2.waitKey()             #キー入力待ち waitKey(delay=0)
cv2.destroyAllWindows()   #ウィンドウを消す destroyAllWindows()
```

そして保存

```python:read_and_show_and_save.py
import cv2

#画像読み取り
image_path = "lenaさんの画像を格納してるディレクトリのパス" #例えば　"C:\\Users\\admin\\Pictures\\"
image = cv2.imread(image_path+"lena.jpg")  #画像読み取り　imread(filename)

#画像表示
cv2.imshow("image",image) #画像出力 imshow(window_name, image)
cv2.waitKey()             #キー入力待ち waitKey(delay=0)
cv2.destroyAllWindows()   #ウィンドウを消す destroyAllWindows()

#画像保存
cv2.imwrite(image_path+"result.jpg",image) #画像保存 imwrite(filename, image)
```