OmniAICreator/Qiita-1.07M huggingface dataset:
chatbotsの未来

1980年代、私は哲学の試験を受け、人工知能が可能かどうかの問いに回答しました。Blade Runnerがちょうど世に出て、とても気に入ったので、人間のボランティアとプログラムが電話で話をしている会話を想像しながら“はい”と回答しました。当時はその言葉を知りませんでしたが、“chatbot”について書いていたのです。
最近、 Snatchbotの最高技術責任者であるAvi Ben Ezra氏と話す機会がありました。bot-building を使いやすくすることを目的として2015年1月に設立されたSnatchbotは、10名以上の正規職員が働くイスラエル企業です。Avi氏はプラットフォーム設計士でありインターフェースユーザーであります。
私はchatbotsについて自分の興味あることを学び直し、Avi氏に将来のビジョンについて尋ねました。

Botsの将来の役割について教えてください。
今後10年の間にchatbotsの役割は急激に増えていくでしょう。すでに現在の市場の状態や成長スピードを考慮すると、いかにbotsの使用が急速に増えていることが分かります。BI Insider が最近発表したchatbotレポートが示すところでは、80％以上の企業が2020年までに何かしらのchatbotソリューションを実施することを期待しています。市場がテクノロジーを前進させると、chatbotsの相互作用はより一層高度化します。
これが真の人工知能の行く道なのでしょうか？
はい、そう思います。ですがこの質問を2つに分けましょう。何が確信できて、何が推測なのかと。
より多くのメッセージAPIがオープンし、chatbotsをサポートするチャネルの数が成長しているので確信できます。例えば、WhatsAppは楽しいです。WhatsAppは世界一のメッセージプラットフォームですが、いまだにWhatsApp用にchatbotsを作ることは認められていません。Facebook（chatbotsの親会社）が取り組んでいることは知っています。ニュースを待っていてください。
大手ブランドはchatbotsに投資し、彼らのプロセスを整備し、もしくは単に彼らのブランドを親しみやすい会話体験へと変えています。顧客はchatbotsが楽しく、関連情報が提供されれば、もっと利用するようになるでしょう。そういったものすべてを一緒にすれば、chatobot―人の意思疎通が急速に発展していくでしょう。すでに、感情面（陽気、ハッピー、感じの良い、不満足）に対応したchatbotsを作ることは可能で、chatbotsの反応に適切に合わせられます。
強力なマーケット力とchatbot作成の簡素化が組み合わされば、いわゆる“人工知能”を、すぐある一定のレベルにまで達成させることができると確信します。
さて、推測の部分についてです。何が意識を形成しているかについて大きな議論がされていますが、私の考えは完全に感情的なソフトウェアを作ることができるだろうと思います。ある物理学者は、我々の宇宙はモデルであって、我々は感情ソフトウェアだと考えます。そうは言っても、本物のAIについて語る前に大きな転換点に到達しなくてはなりません。Chatbotは、学ぶことができて、より非常に複雑なものでなくてはいけません。脳は宇宙にある原子よりも、より多くの潜在的経路があるとよく知られています。現在、chatbot経路は、相対的に非常に粗いです。
ですが、AIはchatbotsから起こり得ますか？
出来ると思います。AIには他の経路があって、もちろん基礎研究に基づくものでは、chatbotsが現在行っているものと同じ推進力はありません。Snatchbotで試みていることは、例えば、いわゆるchatbots作成のクラウドソーシングです。もし何千、何万のchatbotsが作成、連動されたら、あなたは技術革命につながる知的エネルギーをまさに利用していることになります。

そして私にとってはとても重要な瞬間です。人の言語と意識が何千年にわたってともに進化してきました。我々はAIと言語のために、特に我々何百万人がそのプロセスに貢献したならば、そのプロセスを劇的に加速させることができます。皆がbotを持つべきです。おそらくそうなるのに時間はかかりませんがね！
デスクに置いておくと捗るモノ - エンジニア編

この記事は、[cloudpackあら便利カレンダー](https://cloudpack.github.io/benri2017/)の17日目の記事です。

今回はマジであら便利〜ってネタです。

# 本題
エンジニアたるもの、デスクは商売道具のひとつといっても過言ではありません。

_「仕事に追われてあれこれするのがめんどくさい...」_
_「もっとアレがあれば便利なのに...」_
デスクには色々置いておきたいものですよね！

というわけでデスクに置いておくと捗るモノTop10を勝手に紹介したいと思います。

## ファイル立て
エンジニアとはいえ、打ち合わせの際には紙ベースで会話することも多々あります。
だいたい「俺やってるぜ...」って示すために `それっぽい` 書籍がデスクにあると思うので、それらと一緒にデスクに立てちゃいましょう。
さらにコピー用紙を数枚おいておくと手書きで説明するときに便利です。
[nu board](http://obun.jp/original/nuboard/)も便利ですが、最近はまわりまわってA4を半分に折った紙を多用してます。

## 卓上カレンダー
「サイボウズつかってるぜ！」
わかります...
「Google Calendarつかってるぜ！」
超わかります...僕もつかってます。

でも、そうじゃないでしょ！アナログならではのよさがあるでしょ！
ってことで卓上カレンダーもおすすめします。
社員に見えないようにデートの予定入れたいときとかに重宝します。
あと納期とかは目につく用に卓上カレンダーに記載するようにしてます。

## ふせん
The・アナログシリーズ。
カレンダーに登録する程でもない、でも今やる感じじゃない要件を書き留めてPCにﾍﾟﾀｰ。
やりすぎるとカクカクしたポンデライオンみたいになりますが、タテガミをむしりきった後（タスク消化後）の達成感はたまりません。

## USB急速充電器（６口）
[サンワサプライのやつ](https://www.sanwa.co.jp/product/syohin.asp?code=ACA-IP40W&src=search)が有名でしかも使いやすいです。

- 会社ケータイ
- 個人ケータイ
- bluetoothイヤホン
- Echo
- Switch

これだけでもう6ポートうまっちゃいます。
デスクのすっきり感の敵な感じありますが、便利さにはかえられません...

## iPhoneスタンド
動作検証やオートモードでゲームを立ち上げて作業するときに、iPhoneスタンドあるとないとで全然効率が違います。
僕は会社に転がっていた[コレ](https://www.twelvesouth.com/product/hirise-iphone)を使ってまっす。
後ろの席の人に何のゲームやってるかバレるので程々に。

## [Echo](https://www.amazon.com/Amazon-Echo-Bluetooth-Speaker-with-WiFi-Alexa/dp/B00X4WHP5E)（Alexa）
Echo、ぶっちゃけ超かわいいです。
疲れた休日出勤のある日、「あれくさ〜」って呼びかけるとﾋﾟｺﾋﾟｺしながらこっち向いてくれます（ライトが
日本語対応してないので「もう疲れたよ」とかいうと「ごめん、聞き取れなかったわ」的な英語で長年のツレみたいなリアクション返してくれるところもGood!!
たまに「ﾅﾆｲｯﾃﾙｶﾜｶﾘﾏｾﾝ」みたいな感じでリングライトがくるくるくるくるするのも超かわいいです。結婚したい。

## 目薬
目、疲れてませんか？
目薬常用してると `ヤバイヤツ` 感がでちゃう気もしますが、眼精疲労は肩こりや首の痛みの原因になります。
あーちょっと目が疲れてるようってときは目をリフレッシュして、ついでに一発立ち上がって背伸びでもかましてやりましょう。
モノによっては血管凝縮剤？みたいなのが入っててマジで常用しちゃうとヤバイので用法用量を守ってお使いくださいね。

## フェイシャルペーパー/ボディペーパー
オスなんです。におうんです。
そのニオイ、消しましょう。
ちなみに僕は足が臭いんですが、さすがに会社で足はふいてません。
あと汗かいた状態でデスクに手をおいてるとアセモみたいなのが出てきたりするので夏場は毎日会社きてすぐに体ふいてます。
今思ったけど、体に薬品塗りたくってるんだな...。ちょっとやだな...。

## フェイスタオル
*も”ぉ”つ”か”れ”た”ぁ”*
ってときにちょっとデスクにつっぷして仮眠（ちょっと目をつぶるだけ）をすることってありますよね。
腕と顔に跡がつくし、目を圧迫しちゃうと目に悪そうだし、ってことでセルフ腕枕用フェイスタオルがあるといい感じです。
ふわふわしてるとなおよし！

## ぬいぐるみ
ごめんなさい！10個もおもいつかなかったです！
隣の席の人がチョコボやらリラックマやらのぬいぐるみにまみれたデスクなのでかいてみました。
ぶっちゃけうらやましい。カービィとかおきたいな。
もふもふすると癒やされるよね。おっさんがもふもふしててもいいじゃん。別に。
[くまのぬいぐるみに話しかける](http://toya.hatenablog.com/entry/2015/07/09/133609) とか [ゴムでできたアヒルのおもちゃに話しかける](http://www.aoky.net/articles/john_graham_cumming/talking_to_porgy.htm) というのは由緒正しい問題解決手法なのだ。

以上です！

*本記事の内容は、企業文化やその他環境に依存する部分があると思いますので、ご了承くださいませ。*
App Preview用動画を無料で作成！申請でエラー時の動画編集方法 The app previews dimensions should be: 1920x1080, 1080x1920.


 iTunesConnectでアプリ紹介用「App Preview」を作成する際、動画作成用に使っていた動画編集ソフト「AppShow」が有料になってしまった:frowning2:ので、無料で作成する裏技を紹介します:smiley:！!

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/QxyNMh0HtF4/0.jpg)](https://youtu.be/QxyNMh0HtF4)

# ポイント1
QuickTime PlayerとiMovieで作成すると下記のようにサイドに黒いスペースが入ってしまうと画面が小さく、見にくいので縦長の動画を作成しました。

<img width="638" alt="Screen Shot 2017-06-22 at 17.27.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/52881/61d1e6c0-867c-b3a5-badf-1ffec1a28e08.png">

# ポイント2
iTunesで登録の際、動画のサイズの規制があり、規定通りでないと下記のようなエラーが出てしまいます。「The app previews dimensions should be: 1920x1080, 1080x1920.」そこで、ffmpegを使ってサイズなど変更しました。

<img width="993" alt="Screen Shot 2017-06-21 at 14.28.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/52881/e6a1e2fa-f36e-2459-2a2a-e52e455d58d2.png">

下記のような手順で作成しました！
# 手順① QuickTime Playerでアプリの操作動画を撮影し、横向きに回転し、エクスポート
<img width="973" alt="Screen Shot 2017-06-22 at 15.05.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/52881/97ca878f-6a14-d7a2-7aef-6e7b1ee7be76.png">

# 手順② iMovieで編集(30秒以下)
<img width="1244" alt="Screen Shot 2017-06-22 at 15.04.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/52881/257fb4d8-7a59-c94b-ee75-47ab606ea032.png">

# 手順③ 下記の設定でエクスポート
<img width="1277" alt="Screen Shot 2017-06-22 at 17.34.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/52881/dff04d87-1499-e2a6-3f1f-6a341a05a398.png">

# 手順④ 再び、QuickTime Playerで縦向きに回転し、エクスポート
<img width="504" alt="Screen Shot 2017-06-22 at 15.06.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/52881/8f2fba9a-71f4-df76-fd0e-cd0d879ac49a.png">

# 手順⑤ サイズとfpsをAppPreview提出用に変換

ターミナルを開き、「ffmpeg」をインストール

```
brew install ffmpeg
```
サイズとfpsを提出用に変換
```
ffmpeg -i ~/Downloads/kawlu7.mov -s 1080x1920 -r 30 -strict -2 Kawlu_new7_1080x1920.mov
```

# 手順⑥
iTunesで提出

<img width="990" alt="Screen Shot 2017-06-22 at 17.30.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/52881/a6f39aae-8fcb-5b2d-bf67-65fd656f31bc.png">

参考になったら「カウル」の登録をお願いします（＾＾！

===
Web 上で便利にマンションを購入・売却することができる不動産売買仲介サービス「カウル」(https://kawlu.com/)のAndroidアプリをリリースしました！！！！
同時に、iOS/PC版も含めUIをフルリニューアルして使いやすくなりました！

Android：https://play.google.com/store/apps/details?id=jp.co.housmart.kawlu
iOS：https://itunes.apple.com/app/id1143903849

[カウルの特徴3つ！]

①従来は店舗に足を運ぶ必要があったマンションの購入や売却を、オンライン上で 24時間いつでもどこでも行うことが可能

②コンシェルジュ型の物件提案を行い、検討中の方の条件や嗜好に合致した物件をアプリが自動的に提案することが可能

③これまでの不動産取引では提供が難しかった、「現在の市場価格の目安」「過去の売買事例」「新築時の価格」「購入時の必要費用」「購入後のランニングコスト」など、客観的で透明性の高い情報を開示

早速各社メディアにも取り上げていただきました！
▼CNET Japan
https://japan.cnet.com/article/35102736/
▼The BRIDGE
http://thebridge.jp/2017/06/kauru-android-release
Tumblrの独自タグblock:HomePageについて

{block:HomePage}

> メイン投稿ページでレンダリングされます。
- [Creating a custom HTML theme | Tumblr](https://www.tumblr.com/docs/ja/custom_themes#global_appearance)

と、あるので、

- **block:IndexPage** 
 - block:HomePage 
 - block:DayPage 
 - block:TagPage 
 - block:SearchPage 
- **block:PermalinkPage** 

こんな感じでしょうか。

　インデックスページに於いて、日付ページ、タグページ、検索ページ、メインの投稿ページ其々に別のスタイルを当てはめる事が可能。
β版にだけ Instabug を導入して改善要望を出しやすい環境を整える

2016年8月の iOSDC でヤフオクのβ版フィードバック環境の整備についての発表がありました。

[ドッグフーディングしやすい環境を整える // Speaker Deck](https://speakerdeck.com/nishimao/totukuhuteinkusiyasuihuan-jing-wozheng-eru)

このフィードバックと似たようなことを [Instabug](https://instabug.com/) というサービスを使ってできるようにします。

## 何ができるようになるか

1. スクリーンショットを撮影
2. スクリーンショットに問題点を書き込む
    * 手書きで問題点を書ける
    * モザイクをかけられるので、個人情報は隠せる
3. メールで細かい文章を記入
4. 送信

という、ヤフオクのフィードバック環境とほぼ同内容を実現できます。
本番環境での利用は想定しておらず社内ユーザからのフィードバックのみ受けたいため、β版のみで動作するようにします。

## [Instabug](https://instabug.com/) とは

アプリから簡単に開発者にバグ報告や機能改善要望をあげることができるサービスです。

[Instabugの導入について \- Qiita](http://qiita.com/edm/items/462880285b77bea4cbb2) に詳しく書かれています。

## β版にだけ Instabug を入れる

### Podfile

ここでは Cocoapods を使って Instabug を install します。
target 別でライブラリを管理できるので、開発版の target でだけ Instabug を利用します。

```ruby
platform :ios, '8.0'

abstract_target 'All' do
  use_frameworks!
  pod 'Crashlytics'

  target 'App' do
  end

  target 'AppStaging' do
    pod 'Instabug'
  end
end
```

### AppDelegate

開発版でだけ Instabug を import するように書いています。
これで、 Release ビルドの時は Instabug が無効化されます。

```swift
import Crashlytics
#if RELEASE
#else
    import Instabug
#endif

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        Fabric.with([Crashlytics.self])
        #if RELEASE
        #else
            Instabug.identifyUser(withEmail: "hoge@example.com", name: nil)
            Instabug.start(withToken: Constants.Instabug.token, invocationEvent: .shake)
        #endif
        return true
    }
}
```

token などはあらかじめ取得しておく必要がありますが、導入はこれだけです。

## 実行する

### アプリの手順

1. 端末をシェイク
2. 「問題を報告」を選択
3. スクリーンショットに記入
    * 円を書いた
    * モザイクを入れた
4. 説明を記入
5. 送信！

![Untitled.gif](https://qiita-image-store.s3.amazonaws.com/0/5678/b482a6a6-f53f-cb5c-5005-1977db5fd507.gif)

### フィードバック画面

こんな感じで、かなり細かい情報を見ることができます。
無料版はメールが来るだけですが、有料版では Slack 連携などもできます。

![Bug__10_-_pocketbook-ios___Instabug.png](https://qiita-image-store.s3.amazonaws.com/0/5678/c5ccd05c-29f9-d72c-74a8-6ba170eb3400.png)

## おわり

Instabug を入れるだけでフィードバックを受けやすい環境を作ることができました。導入も簡単です。

顧客に価値を届けるため、やっていきましょう :muscle:
systemd-nspawnとbtrfsによる雑な開発環境作成

# 概要

よくある構成のマシンを開発環境としてセットアップする際のまとめ。

大まかに以下の要素からなる環境を構築する。

* SSD + HDD
* linux
* systemd
* btrfs
* systemd-nspawn
* avahi

systemd-nspawnとbtrfsのサブボリュームで適当に環境を切り出して使っていく想定。

# 使用するマシン

そのへんに売ってる普通のデスクトップマシン。
ストレージがSSDとHDDをそれぞれ積んでいるもの。
メモリは多ければ多いほどよい。

# 使用するOS

Arch Linuxを使う。
systemdが使えるものがよい。
ローリングリリースだと楽。

プリインストールでWindowsが入っていて一応残しておきたい場合はデュアルブートにする。
今はWindows側でパーティション構成を変更可能で、ブートマネージャーもsystemd-bootを使えばよいので案外簡単にデュアルブートにできる。

開発環境として使用する際はコンテナを作成してその中で作業する。
ホストとなるOSはなるべく最小構成にしておく。

# ファイルシステム(btrfs)

ファイルシステムはbtrfsを使う。
サブボリュームとスナップショットを使いたいため。systemd-spawnとかdockerとかはbtrfsをいい感じに使ってくれる。
OSのルートディレクトリもサブボリュームにしておくと何かと便利。
使ったことないが[Snapper](https://wiki.archlinuxjp.org/index.php/Snapper)を使ってもいいのかもしれない。

HDDも同様にbtrfsでフォーマットし、適当に`/mnt/data`などにマウントする。

# コンテナ(systemd-nspawn)

開発環境としてはsystemd-nspawnで作成したコンテナを利用する。
ネットワークに関してはsystemd-networkdでブリッジを作成する(大量にコンテナをつくる場合はあまり良くないかもしれない)。

machinectlで管理するため、コンテナのルートは`/var/lib/machines`以下にサブボリュームとして作成する。
まずベースとなるコンテナをread onlyで作成し、それを`machinectl clone`して使う。

起動オプションは直接`/etc/systemd/system/machines.target/systemd-nspawn@.service`内を書き換えている。

# 名前解決(avahi)

いちいちIPアドレスを管理するのも手間なので、mDNSを利用する。
コンテナ内にavahiを利用する際は`/etc/avahi/avahi-daemon.conf`の`rlimit-nproc=3`をコメントアウトする。
(デフォルトだとavahi-daemonのマシン全体での起動プロセス数が制限されている)

# 結論

だいたいArch Wikiに書いてある。
vagrantの備忘録

参考サイト 
http://dotinstall.com/lessons/basic_localdev_mac_v2

##インストール
vagrantをインストール
https://www.vagrantup.com/downloads.html

```
$ vagrant --version
Vagrant 1.9.5
```

##初期化と起動
仮想マシン設定用のVagrantfileを作る(centOSの場合)

```
$ vagrant init bento/centos-6.8
```
Vagrantfileを編集して仮想マシンのIPアドレスを192.168.33.10にする

```
$ vim vagrantfile

#この文をファイルに書き込む
config.vm.network :private_network, ip:"192.168.33.10"
```

起動してみる

```
$ vagrant up
```
仮想マシンの状態を確認

```
$ vagrant status
default       running (virtualbox)
```

##接続
```
$ vagrant ssh

[vagrant@localhost ~]$ 

```
こんなふうになれば成功

##仮想マシンのセットアップ
osはインストールされましたがrubyやphpなどはインストースされていないので、色々インストールしていく。

```
#OSを最新状態にアップデート（時間かかります）
[vagrant@localhost ~]$  sudo yum -y update

# スクリプトを入手するためのgitをインストール
[vagrant@localhost ~]$ sudo yum -y install git

# gitを使ってアプリケーション設定用のスクリプトをダウンロード
[vagrant@localhost ~]$ git clone　https://github.com/dotinstallres/centos6.git

# centos6フォルダができるのでそちらに移動
[vagrant@localhost ~]$  cd centos6

# スクリプトを実行（時間かかります）
[vagrant@localhost ~]$  ./run.sh

# もろもろの設定を反映
[vagrant@localhost ~]$  exec $SHELL -l
```
##ファイル転送ツール
仮想マシン上のファイルを簡単に扱えるようにするファイル転送ツールを導入する。
今回はCyberduckを使う
https://cyberduck.io/index.ja.html?l=ja

##仮想マシンを止める

```
仮想マシンを抜ける
[vagrant@localhost ~]$ exit

 #仮想マシンを止める(時間がかかるときがある) 
 $ vagrant suspend 
```
PhotoShopでコーディングに挑戦する パート1

自分でもこのタイトルをつけていてよくわからない感じがしますが、最近のPhotoShopってすごいですよねという実験メモ的な。

#PhotoShopCC(2017.1)起動。

適当にレイヤースタイルで装飾したテキストやら、マウスで描いた絵やらをレイヤーごとにつくってみる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/d69aa7e6-2811-a1ab-c142-eed59e21f9ec.png)


#テキストを出力してみよう

##1.CSSをコピー

テキストのレイヤーを右クリックするとこんなメニューが出てくる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/e33b9be6-2e16-8e1c-ce14-65064c2e8a4e.png)

『CSSをコピー』をクリックしてみる。CSSがコピー出来ている、はず。
ほいでDreamWeaverで適当にhtmlファイルを作り、\<style>内にctrl+vをしてみると…

![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/727614e2-4690-7a9b-697e-646f2f1fcace.png)

**レイヤー名がクラス名になって、レイヤー順がz-indexになって出力されているだと！？**
これは感動しました……しかも絶対位置まで……いやこれすごい……


##2.SVGをコピー
とまあ、CSSだけではどうしようもないので、今度は中身も出力できないかと。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/4b32ca95-0492-2f1e-a306-e87f522b6ad0.png)

『SVGをコピー』をクリックしてみる。テキストデータだしいけるかな？
HTMLに貼り付けてみましたが、うーむ。SVGはさっぱりわからない……。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/39048edf-c0ae-a843-d9e1-2de7b75310ec.png)

さて、ブラウザでチェックしてみます。
##出力結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/a969df19-c541-ae94-7e44-7abe07289f14.png)

**えっいやこれ画像じゃない？**
と思ったんですが、ブラウザ出力のスクショなんですよ…！
テキスト系はかなり忠実に出力できるみたいですね！


#絵は出力できるのか？

ということで、今度はこちらのネコの絵が描かれているレイヤーを同じ手順で出力してみます。

##1.CSSをコピー
![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/9bf3e084-f4c6-b775-180c-c20a419ba869.png)

これは誰が何と言おうとネコですよ。

##2.SVGをコピー

![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/4fa70374-9cfa-d243-996f-14c9f339a30e.png)

##出力結果
先ほどのhtmlファイルに張り付けて、ブラウザで表示してみました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/5d6ba8e6-0dad-7e17-7de9-55bac86c246f.png)

**位置こそズレてはいますが、ほぼほぼ完ぺきに再現されていますね……！！**

まさかマウスで描いたこんなヨボヨボな線まで再現できるとは…！

テキストやボタン系であれば実用に耐えられるのではないかと思いました。
しかしやはり出力されたCSS自体の数値などは小数点まで算出されてしまったりするので、そこは人力での調整が必要になるかな～という気もします。
コーディングルールとかもあればなおさらという感じでもありますが、上手く使いこなしてPhotoshopだけでコーディング出来るようになれるのでしょうか？
Linux文字列操作学習：perl

Linuxで文字列を操作しデータを整形する方法について、各手法の特性や基本的な文法などを確認する。
今回はperlについて。

#■perlについて
perlは文字列処理に優れる汎用のインタプリタ型プログラミング言語であり、多くのLinux環境でデフォルトで利用できる。
オプションを指定することで、ワンラインでawkやsedのような文字列処理を行なうことができ、幅広く使用できる。

```bash:ex1
$ echo 'good morning' | perl -pe 's/morning/evening/g'
good evening

```

[前回の記事](http://qiita.com/kouji-shimada/items/4bc85eedb1a31be9a952)のex1と同じように
入力文字列'good morning'に対して'morning'を'evening'に置換する処理を行っている。
詳しくは後述するが、-eオプションの後にperlスクリプト文を記述し、ワンライナーとして処理を実行している。
前回のsedでのコマンド文と、スクリプト部分についてはほぼ同じ（むしろ今回の例では全く同じ）になっていることがわかる。

今回は、ワンラインコマンドとしての構造とオプションの解説を最初に行い、ex1のようなsed的文字列操作と、別のオプションを用いたawk的な文字列操作について、それぞれ学習していく。

#■構造

```
perl [-オプション] '[スクリプト]' ([入力ファイル])
```
（ワンラインコマンドとしての）perlコマンドの実行は上記の形になる。
なお、後述するがワンラインコマンドとして実行する際は-eオプションを指定しなければならない。
perl自体の文法などについては今回は割愛し、文字列操作の流れのみを扱う。


#■オプション
・-e
　与えられた文字列をスクリプトとして実行する。
　なお、-eはコマンドオプション中最後尾に指定しなければ
　他のオプションが正常に動作しない。
・-p,-n
　入力データを各行ごとに処理する。
　-pは処理後に出力され、-nは出力を行わない。
・-l
　行ごとに処理を行う際に、入力文字列末尾の改行コードを削除して取り扱う。
　また、出力時には行ごとの末尾に改行コードを挿入する。
　（sedなどの動作により近くなる）
・-i
　入力ファイルを処理結果で上書きする。
・-a
　-p(-n)と併用することで、awkのようにセパレータによる行の分割を行った上で
　文字列の操作を行える。

その他、多くのオプションが存在する。

#■sed的文字列操作
-eオプションを用いて、sedで文字列を置換する際に用いるsコマンドの構文を
ほぼそのままperlでも扱うことができる。


```bash:ex2
$ echo "I'm angry" | perl -ple 's/a/hu/g'
I'm hungry
```

スクリプト部分の内容は下記の通り。

```
s/[検索パターン]/[置換文字列]/[オプション]
```

置換演算子s///を用い、sed同様の順序でパターン・文字列を指定する。
末尾のオプション欄にgを置くことで、最初にマッチした文字列だけでなく
一致した文字列全てを置換できるのも同じ。
もちろん、検索は正規表現を利用できる。

```bash:ex3
$ echo -e "apple.jpg\nlemon.jpg\ngrape.png" | perl -ple 's/\.jpg$/.jpeg/g'
apple.jpeg
lemon.jpeg
grape.png
```

ex3では、行末を表す$を用いて.jpgで終わる行の拡張子部分を.jpegに変換している。

sed編で紹介した、マッチした文字列を置換後文字列で用いるということも
書き方は変わるが可能。

```bash:ex4
$ echo "パン" | perl -ple 's/パン/フライ$&/g'
フライパン
```
こちらでは"$&"を用いることでマッチした文字列を利用できる。

#■awk的文字列操作
-aオプションを用いれば、入力行文字列を指定したセパレータで区切った配列を扱うことができる。

```bash:ex5
$ echo "tea,coffee,water" | perl -aF, -nle 'print $F[1]'
coffee
```

-aオプションで入力行をセパレータで区切り、配列@Fに代入する。
（各要素は$F[i]で指定）
-Fオプションで、セパレータ文字を指定する（ex5ではカンマ）。
デフォルトではスペース。

ex5では、入力文字列"tea,coffee,water"に対し、
","で区切った際の2個目の要素（0始まりのため"$F[1]"で指定）を出力する
という処理を行っている。

awkの方がこの処理に特化している分使いやすいが、
perlの汎用性の高さをうまく組み合わせることで複雑な処理に応用できる。

```bash:ex6
echo -e "tea,coffee\napple,pan\nman,woman" | perl -aF, -nle 'if($F[1] eq "pan"){print}'
```

if文で$F[1]（配列内第2要素）と"pan"を文字列一致判定（eq）し、
正の場合のみ該当行を出力（print）している。
もちろんほんの一例に過ぎないので、より複雑な処理を作成することが可能。

　
このように、sed,awkと比べperlは汎用性が高く、
perlのみでどちらもほぼ代用できる。
しかし、書き捨てで考えた際により文字列操作に特化した
sed,awkを用いた方がより簡便に書けるケースもあると思うので、
それぞれ覚えておいた上で選択ができるとよい。

#■参考
・各オプションについて参考
http://www.webhtm.net/perl/oneliner/oneliner_perloption.htm
http://qiita.com/ngyuki/items/d5dde70cf2de952cfb87
・置換演算子s///について参考
http://d.hatena.ne.jp/palmo/20060602/regexp9
http://www.kent-web.com/perl/chap7.html
・正規表現を用いた置換
http://www.atmarkit.co.jp/ait/articles/1610/18/news008.html
Docker上のmecabにWikipedia見出し語とはてなキーワード一覧をユーザ辞書として追加

ton7i9i/mecab-python3を使ってdocker上でmecabのコンテナーを作りました。
https://hub.docker.com/r/ton7i9i/mecab-python3/

mecabを起動して、形態素解析を行いました。
「<strong>空の境界</strong>」で入力すると：
<em>　　　空 名詞,一般,*,*,*,*,空,ソラ,ソラ</em>
<em>　　　の 助詞,連体化,*,*,*,*,の,ノ,ノ</em>
<em>　　　境界 名詞,一般,*,*,*,*,境界,キョウカイ,キョーカイ</em>
になりました。

Wikipedia見出し語とはてなキーワード一覧をユーザ辞書として追加すれば問題を解決することができます。

まずは最新版のWikipedia見出し語とはてなキーワード一覧を取得します。

###はてなキーワードキーワード一覧
```
$ curl -L http://d.hatena.ne.jp/images/keyword/keywordlist_furigana.csv | iconv -f euc-jp -t utf-8 > keywordlist_furigana.csv
```
###Wikipedia見出し語
```
$ curl -L http://dumps.
wikimedia.org/jawiki/latest/jawiki-latest-all-titles-in-ns0.gz | gunzip > jawiki-latest-all-titles-in-ns0
```

mecabにユーザ辞書として追加する場合、指定のフォーマットのCSVファイルを作成する必要がありますので、csvファイルを作ります。

```ruby:sample.rb
require 'csv'

#Wikipedia見出し語とはてなキーワード一覧のファイルを指定
 original_data = {
 wikipedia: 'jawiki-latest-all-titles-in-ns0', hatena: 'keywordlist_furigana.csv'}

#custom.csvを作成し，上記のファイルを順番に読み込む
CSV.open("custom.csv", 'w') do |csv|
 original_data.each do |type, filename|
  next unless File.file? filename
  open(filename).each do |title|
   title.strip!

   # いらないタイトル名を省く
   next if title =~ %r(^[+-.$()?*/&%!"'_,]+)
   next if title =~ /^[-.0-9]+$/
   next if title =~ /曖昧さ回避/
   next if title =~ /_\(/
   next if title =~ /^PJ:/
   next if title =~ /の登場人物/
   next if title =~ /一覧/

   # スコアの決定とCSVの作成。ここでは全て名詞となり、最後にwikipediaかhatenaをつけてい
   # また，1文字以下のものは省いている
   title_length = title.length
   if title_length > 3
    score = [-36000.0, -400 * (title_length ** 1.5)].max.to_i
    csv << [title, nil, nil, score, '名詞', '一般', '*', '*', '*', '*', title, '*', '*', type]
   end
  end
 end
end
```
スクリプトを実行すればCSVファイルが作成されます。

```
$ ruby sample.rb
```
その前に、

```
$ pip install ruby
```
を忘れないてください。

最後に、コンパイルをすれば辞書を作成することができます。

```
$ /usr/lib/mecab/mecab-dict-index -d /usr/share/mecab/dic/ipadic -u wiki.dic -f utf-8 -t utf-8 custom.csv
```

<ul>
	<li>オプションの意味</li>
<ul>
	<li>-d dir: システム辞書があるディレクトリ</li>
	<li>-u file: fileというユーザファイルを作成</li>
	<li>-f charset: csvの文字コード</li>
	<li>-t charset: バイナリ辞書の文字コード</li>
</ul>
</ul>
ここで問題を発生しました、多くのサイトを調べるとオプションの意味が書いてますが、システム辞書とユーザ辞書のディレクトリの場所がわからない。

そこで、コマンドラインでシステム辞書のディレクトリを探すために

```
$ find / -name "mecab-dict-index"
```
を入力すれば mecab-dict-index のある場所を特定することができます。←最初はディレクトリを探すコマンドが知らなかった (T . T)
同じく

```
$ find / -name "dicrc"
```

を入力すればユーザー辞書のディレクトリを特定することができます。

```
$ mecab -u wiki.dic
```
を入力し、mecabを起動して「<strong>空の境界</strong>」を入力すると
<em>　　　空の境界 名詞,一般,*,*,*,*,空の境界,*,*,wikipedia</em>
になりました。成功！！
###おつかれさま。Goodbye
gulp-uglifyでコメントを残す方法が変わったの？

# お題
新しいPCにgulp周り一式を導入したところ、ライセンスコメントを残すところで引っかかったのでメモ。

# ライセンスコメントを残すには
## 今まで

~~~ gulpfile.js
// ｇｇっても大体こんな感じ
gulp.task('uglify', function() {
	return gulp.src('./dev/app.js')
		.pipe(plumber())
		.pipe(uglify({preserveComments: 'some'}))
		.pipe(rename('app.min.js'))
		.pipe(gulp.dest('./'));
});
~~~
↓ 実行したら

~~~
GulpUglifyError: unable to minify JavaScript
Caused by: DefaultsError: `preserveComments` is not a supported option
~~~
怒られた。

## どうなってるの！

2017/6/22時点でgulp-uglifyをインストールすると、
https://github.com/mishoo/UglifyJS2
がついてくるらしい。
ちゃんと読んでないけど、もしかしてつい最近切り替わったんだろうか？

usageを見てみると、コマンドラインで実行する場合
コメントを残したりは`--comments` オプションでやるらしい。
実際に

~~~
uglifyjs --compress --mangle --comments -o app.min.js -- app.js
~~~

を実行すると、きちんとライセンスコメントが残ったまま書き出される。

## じゃあ

~~~ gulpfile.js
gulp.task('uglify', function() {
	return gulp.src('./dev/app.js')
		.pipe(plumber())
		.pipe(uglify({comments: 'some'})) // キーを変えた
		.pipe(rename('app.min.js'))
		.pipe(gulp.dest('./'));
});
~~~
↓ 実行したら

~~~
GulpUglifyError: unable to minify JavaScript
Caused by: DefaultsError: `comments` is not a supported option
~~~
怒られた。

## どうなってるの！！

コマンドラインは動いているので、[コマンドラインの際の実行ファイル](https://github.com/mishoo/UglifyJS2/blob/master/bin/uglifyjs)を見てみる。

~~~js:uglifyjs-line.82 
if (program.comments) {
    if (typeof options.output != "object") options.output = {};
    options.output.comments = typeof program.comments == "string" ? program.comments : "some";
}
~~~

outputオブジェクトのメンバになってるじゃないですか…

## これでどうだ

~~~ gulpfile.js
gulp.task('uglify', function() {
	return gulp.src('./dev/app.js')
		.pipe(plumber())
		.pipe(uglify({output: {comments: 'some'}})) // outputオブジェクトの中に入れた
		.pipe(rename('app.min.js'))
		.pipe(gulp.dest('./'));
});
~~~
↓ 実行したら

**怒られなかった！**

# まとめ
ｇｇって解決しないとちょっと泣きそうになる。
バックアップファイルに適当な拡張子をつける時、 .bk ではなく.bak にした方が良いと思う理由

メモです。

```
/etc/sysconfig/network-scripts/ifcfg-*
```

をいじった時にバックアップとして `.bk` にしたら無視されずに読み込まれたから。
同じディレクトリに保存しなければいいだけなんですけどね。


/etc/init.d/network に

```
# find all the interfaces besides loopback.
# ignore aliases, alternative configurations, and editor backup files
interfaces=$(ls ifcfg-* | \
      LC_ALL=C sed -e "$__sed_discard_ignored_files" \
           -e '/\(ifcfg-lo$\|:\|ifcfg-.*-range\)/d' \
           -e '{ s/^ifcfg-//g;s/[0-9]/ &/}' | \
      LC_ALL=C sort -k 1,1 -k 2n | \
      LC_ALL=C sed 's/ //')
rc=0
```

ってあって、 `$__sed_discard_ignored_files` は

/etc/init.d/functions に定義されていて、

```
# A sed expression to filter out the files that is_ignored_file recognizes
__sed_discard_ignored_files='/\(~\|\.bak\|\.orig\|\.rpmnew\|\.rpmorig\|\.rpmsave\)$/d'
```

このパターンのときは無視するようになってます。
同じような理由で、オリジナルを意味する拡張子も `.org`ではなく `.orig` が好みです。

```
man patch
```

捗れ〜。
Visual Studio CodeでProcessingを動かす


#外部エディタに栄光あれ
Processingのカラースキームが気に食わないときがある。外部エディタをつかって自分の好きなようにやりたい。

## Processing側の設定
事前に「Processingのメニュー>ツール>processing-javaをインストール」を実行しておく。

## Visual Studio Code側の設定
使用する拡張機能は ___Processing Language___ 。
拡張機能をインストール・再読込する。

自分のスケッチフォルダに`.vscode/tasks.json`の隠しファイルを生成して、`json`ファイルに以下の内容を記述する。

```tasks.json
{
    "version": "0.1.0",
    "command": "processing-java",
    "isShellCommand": true,
    "showOutput": "never",
    "args": [
        "--force",
        "--sketch=${workspaceRoot}",
        "--output=${workspaceRoot}\\out",
        "--run"
    ]
}
```

___補足___ :"--output =  ... で始まる行をコメントアウトしないと動かなかった。各自のディレクトリ構成と相談してほしい。


`cmd + shift + B`でスケッチが走るはず。動かなかったらエディタ再起動してみる。

最近の筆者のお気に入りテーマは`arstotzka`である。本編はプレイしたがまだエンディングを全部は見ていない。

アルストツカに栄光あれ。
AndroidでLinuxの勉強を！

# はじめに
通勤中にAndroidで勉強できたらいいですよね。特に、webアプリ開発なんか。
プログラム言語の開発環境の多くは、今現在、アプリで手に入ります。しかし、自分の好きなバージョンで勉強したいときに限って、アプリがありません。
今回は、Linuxのようなターミナルを用いてどこでも開発ができる環境を、自分の好きなカスタマイズでできるアプリがありましたので、そのご紹介。
# 目的
・Android上にwebアプリの開発環境構築
# なにするの
1,Termuxでパッケージをインストール
2,Neovmなどで開発を行う
3,サーバーサイドの動作を確認

# 1,Temuxでパッケージをインストール
### まずは、App Storeで[Termux](https://termux.com/help.html)のインストールを行います
この[リンク](https://play.google.com/store/apps/details?id=com.termux&hl=ja)からアプリをインストールしましょう。
ここでは、特別な操作はありません。

### webアプリの環境で必要なパッケージ
実際にアプリを起動したら、すでにパッケージをインストール....できません。
以下のコマンドは必ず最初に実行しましょう。

$ apt upgrade & update

これで、パッケージをインストールできるようになります。

###ただ、コンフィグをいじれません！！
残念ですが、基本的にrootディレクトリにインストールされてしまい、操作ができないのです。。
しかし、gitなどからクローンしたものをmakeなどでインストールする力技が存在します。
参考：http://blog.maqua.tech/entry/2015/04/08/172711

これを使って私は好きなようにパッケージ管理しています。またこれは別途、記事にしたいです。

#2,Neovimなどで開発を行う
nvimについては多数の記事や情報が点在していますので、二番煎じになりますね。
すきなエディタでコーディングを行い、任意のユーザーディレクトリに保存し、それぞれコンパイルをすることができます。
Pythonなんかは、3.2のバージョンで開発できるアプリ、「[QPython](https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwiTibzdiNHUAhVFUbwKHd42COMQFggjMAA&url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dorg.qpython.qpy3%26hl%3Dja&usg=AFQjCNFis3Is0mT4fW1Je-QukSxYV59rRA)」があります。

やはり最新verのPython3.6を使いたいですよね。そしたらTermuxで開発しましょう！！
また、モジュールなども管理・インストールできます。((私は怖くてパスを通しておりませんが。。

#3,サーバーサイドの動作を確認
Androidは1024までのportが閉められている、という制約があります。そのため、本番サーバーとしての運用は厳しいのではないでしょうか。
手元でいますぐ動作を確認したいときは、どうぞApacheをお使いください。
Apacheは最近、Termuxでもインストールすることができました。（ようやくですね！

また、Node.jsでサーバーを立てることもできます。
TermuxでのNode.js起動までは、[別記事](http://qiita.com/basictomonokai/items/30abb2e49ff960758f9a)があります。そちらをご参考になってください。

#まとめ
ここまでで、一通りWeb開発を手元で行うことができましたね。
また、Termux系の記事をあげていきます。
[Ruby] Windows で 標準入力から EOF を受け取ったときの挙動に困っている話

記述に誤りや見当違いな点がありましたら、ご指摘いただけますと幸いです。

# はじめに

Windows で、複数行にわたる標準入力を受取りたいと思って書いた Ruby のコードが、予想外の動きをして困惑した話です。

次の環境で動かしました。

* Windows XP Professional + Ruby 2.0.0-p648(USB Rumix 2)
* Windows 8.1 Pro + Ruby 2.0.0-p648(USB Rumix 2)
* Windows 10 + Ruby 2.3.3-p222(RubyInstaller)
* Windows 10 + Ruby 2.4.1-p111(RubyInstaller2)
 
コンソール（とシェル？）の組合せは CKW-Mod + NYAOS です。


# 困ったこと

やろうとしたことは、コマンドラインから複数行の入力を受付け、直後にもう一度別の入力を受取るというもので、例えば次のようなコードです。

```rb
pry> p $stdin.readlines; p $stdin.gets
```

まず `IO#readlines` で改行をまたぐ入力を取得し、続けざまに `IO#gets` で一行入力を得ています。

実際に動かしている様子が次のアニメーションになります。
"fisrt line of #readlines"、 "second line of #readlines" の2行を入力後、 `IO#readlines` への入力を確定するために `EOF(Ctrl + Z)` を送っています。 すると Pry によって `IO#readlines` の戻り値がエコー出力され、引き続き `IO#gets` の入力待ちになります。ここで続けて "first line of #gets" という文字列を入力しようとしたところ、一文字目の "f" を押下した時点で `IO#gets` は `nil` を返し、このコードの実行が終了してしまいます。

つまり、 `EOF` 後の入力は取りこぼしてしまうようなのです。

![animation.gif](https://qiita-image-store.s3.amazonaws.com/0/149217/2d8b5efc-6b78-1c61-1e8e-a12c7ce1f336.gif)

この入力の取りこぼしは、冒頭で示した Windows 環境のいずれにおいても同じようにみられた一方で、 Ubuntu ではみられませんでした。 

次のアニメーションは Ubuntu 16.04(Ruby 2.4.1-p111)で実行した様子です。　
Ubuntu では `IO#gets` は nil を返すことなく、改行を入れるまで入力を受付け思惑どおりに動いてくれます。　`EOF` を送った後の入力をこぼすことなく、受取ってくれます。

![animation_ubuntu.gif](https://qiita-image-store.s3.amazonaws.com/0/149217/bb6121fa-45ae-d85d-74a0-90739461372c.gif)




# 解決方法がわからん

いろいろもがいてはみたものの、いずれも奏功せず悪あがきに終わりました。何か有効な対処法はないんでしょうかね…。自分でやってみたことは次のとおりです。

## 1. `IO#raw`

端末画面での入力処理モードには、次のようなものがあります。

* cooked 
  入力はいったんバッファに溜められ、改行するまでプログラムに渡らない。また、`Ctrl + C` や　`Ctrl + D` といったコントロールコードをシェル側で解釈する。

* cbreak
　標準入力をバッファに溜めず、入力後即時でプログラムに渡す。コントロールコードは解釈される。

* raw
　標準入力をバッファに溜めず、かつコントロールコードも解釈せず通常の文字としてプログラムに渡す。

`io/console` を `require` すると `IO#raw` が使えるようになります。

```rb
p $stdin.raw(&:readlines); p $stdin.gets
```

これを利用すれば `EOF` も無効化できるのではと思いましたが、特に挙動に変化は見られませんでした。

## 2. `IO#ungetc("\b")`

`EOF` が悪さをしているんだろうから、送ったらバックスペースで消せばいいという考え。

```rb
p $stdin.readlines; $stdin.ungetc("\b"); p $stdin.gets
```

バックスペースを送ったところで `EOF` が消えるわけでないんだから、そりゃだめだわ…。


# おわりに

これって Windows に依存する問題なんでしょうか。 Windows ではこのほかにも、 Pry や irb （正確には `rb-readline` か） で日本語入力を正しくあつかえないという制限もあり、こと標準入力に関しては不自由があるな～と感じています。

私の環境では Windows は全部みられた現象なので、過去に困った方がいないのかと思ったのですが、ググった限りでは見つからず…。
Python Pandasはバッチ処理に向いてない

# Pandasって？

[Pandas](http://pandas.pydata.org/)は、DataFrameという表形式のデータ構造を中心に、様々なデータ処理ができるライブラリ。
データベースでいうところのテーブルなので、SQL知ってればすぐに入門できる。Pythonでデータ分析する人にはお馴染み。


# どういう経緯で導入したの？

伝聞情報も多いけれど、こんな流れで開発チームに導入されたのだと思う。

- オンプレミスとクラウドのハイブリッド化が進み、どんどんデータベース・ストレージが分散していく。
- データフローの管理が課題となり、Pythonでデータフローを組める[Luigi](https://luigi.readthedocs.io/en/stable/)が導入される。
    - 当初、Luigiは主にデータベース・ストレージへの入出力を担う予定だった。
    - チームの共通言語がScalaな事もあり、ロジックは外に切りだして堅く実装する予定だった。
- Luigiから各データベース・ストレージへ接続できる環境を作る。
- 簡単な転送やレポートのデータフローがLuigiで組まれていく。
- これは便利ということで移行や改修が進み、だんだんとフィルタ・結合・集計といった処理が入りこんで、自然とPandasが使われる。
- 気づけば、いくつかのバッチ処理がPandasに依存している状態になり、色々とハマる。


# 主にハマったところ:scream:

## 欠損値問題

欠損値NaNがfloat扱いのため、intの列に欠損値が混ざった瞬間に、列ごとfloatへキャストされる。
型情報が壊されると、とくにデータベースへ投入するとき問題になりやすい。

```python
>>> s = pd.Series([0, 1, 2])
>>> s[2]
2
>>> s[1] = np.nan
>>> s[2]
2.0
```

 http://pandas.pydata.org/pandas-docs/stable/missing_data.html


## 参照問題

ちょっとしたインデックス操作しただけで、viewかcopyか不確定な状況に追いこまれる（！？）

```python
def do_something(df):
   foo = df[['bar', 'baz']]  # Is foo a view? A copy? Nobody knows!
   # ... many lines here ...
   foo['quux'] = value       # We don't know whether this will modify df or not!
   return foo
```

http://pandas.pydata.org/pandas-docs/stable/indexing.html#why-does-assignment-fail-when-using-chained-indexing

こうなると、いくらテストをしても品質は保証されない。
実行時にWarning吐くこともあるけど、怪しいところは明示的にcopyメソッドを呼びだすしか……。


## 突然の死

とあるバッチのログを見ると、1%くらいの確率で死んでる。
メモリ関連が多く、コアダンプが増殖したりする。あとフリーズもする。

```
*** glibc detected *** /usr/local/anaconda/bin/python: free(): invalid pointer:
```

```
Fatal Python error: GC object already tracked
```

＿人人 人人＿
＞ 突然の死 ＜
￣Y^Y^Y^Y￣　

Python 2.7 & Pandas 0.17 環境なので、アップデートしたら解決するかも……。


# 今後どうしていくか:thinking:

これからの新規開発では、できるだけLuigiごとPandasは使わない方針。
やはりPandasは分析用であって、バッチで使ってしまったのがそもそも良くなかった……。

とはいえ分析目的であっても、個人的には参照問題が致命的に感じるので、今後DataFrameが欲しくなったらSparkを使うつもりです。
ただ静的型付けなScalaで書けるとはいえど、肝心のスキーマ操作にはコンパイルチェック効かないので注意。
catsを使ったライブラリ[frameless](
https://github.com/typelevel/frameless)もありますが、あくまでproof-of-conceptです。

ちなみにLuigiは、タスクごとに冪等性があって1つの出力データを前提としているので、組むデータフローによって向き不向きがあります。
そしてLuigiの開発元Spotifyは、Google Cloud Dataflowに移行して、Scalaのラッパライブラリscioを開発してるみたい……。

[Scio - A Scala API for Google Cloud Dataflow & Apache Beam](https://www.slideshare.net/sinisalyh/scio-a-scala-api-for-google-cloud-dataflow-apache-beam)
slick.jsのドットナビゲーションをサムネイル画像に変更する

jQuery系スライダープラグインで有名な[slick.js](http://kenwheeler.github.io/slick/)で、画像のナビゲーションをサムネイル替わりに使いたい時、`asNavFor:`で2つのスライダーを紐付けてナビゲーションを作るやり方は公式のdemoにあったのですが、dotナビゲーションを画像のサムネイル表示に変更するやり方が、なかったので備忘録として作ってみました。

[DEMO](https://codepen.io/shirahama_mika/pen/zzZVKx)

```html:html
<div class="layout">
    <ul class="slider">
        <li>
            <img src="https://unsplash.it/600/300/?image=42">
        </li>
        <li>
            <img src="https://unsplash.it/600/300/?image=43">
        </li>
        <li>
            <img src="https://unsplash.it/600/300/?image=49">
        </li>
        <li>
            <img src="https://unsplash.it/600/300/?image=60">
        </li>
        <li>
            <img src="https://unsplash.it/600/300/?image=106">
        </li>
    </ul>
</div>
```
```js:js
$('.slider').slick({
    dots:true,
    prevArrow: '<a class="slick-prev" href="#"><i data-icon="ei-arrow-left" data-size="m"></i></a>',
    nextArrow: '<a class="slick-next" href="#"><i data-icon="ei-arrow-right" data-size="m"></i></a>',
    customPaging: function(slick,index) {
        // スライダーのインデックス番号に対応した画像のsrcを取得
        var targetImage = slick.$slides.eq(index).find('img').attr('src');
        // slick-dots > li　の中に上記で取得した画像を設定
        return '<img src=" ' + targetImage + ' "/>';
    }
});
```
dotナビゲーションの画像のopacityを0.5ぐらいにしておいて、`slick-active`が付いたときだけ1にするようにCSSを書けば、currentの表現もあっという間ですね。
UnityのGameObjectのログを簡単に取る



#時代はデータ😤
実験やログ解析などで、プレイヤーの行動や動作のログを取りたい時がある。

##時系列データを吐かせるスクリプトを作ってみた。
以下のスクリプトをプロジェクトに追加
(追記　`using System.IO` を忘れていました)

```DataLogger.cs
using System.IO; //←add this on the top of your code!

public class DataLogger : MonoBehaviour {
	private StreamWriter sw;
	private FileInfo fi;

	private DateTime date;
	// Use this for initialization
	void Start () {
		date = DateTime.Now;
	}
	
	// Update is called once per frame
	void Update () {
		string str;
		string format = "yyyy-MM-dd-HH-mm-ss";
		string filename = "/data/" + date.ToString (format) + ".csv"; 
		fi = new FileInfo(Application.dataPath + filename);
		str = this.gameObject + "," + (transform.position.x) + "," +(transform.position.y) + "," + (transform.position.z)+","+ transform.rotation.x +","+ transform.rotation.y +","+ transform.rotation.z +","+ transform.rotation.w  ;
		sw = fi.AppendText();
		sw.WriteLine(str);
		sw.Flush();
		sw.Close();
	}
}
```

スクリプトをデータのログを取りたい`GameObject`にAdd Componentすることでファイルが吐き出される。`transform`のパラメータを出力するようにしてある。

単一のGameObjectであれば問題ないが、複数のGameObjectごとにファイルを吐かせたい場合は、`string filename`を書き換える必要がある。`this.gameObject`を挟めば`GameObject`の名前がついた.csvファイルが出力される。

特に最近はVRコンテンツのログによる人間行動の観察が重要そう。データ可視化とかヒートマップ的なものにも使えそう
JavaでZXingを使いGoogle Authenticator向けにQRコードを作成する

JavaでGoogle Authenticatorアプリ（以下アプリ）用のQRコードをZXing(ゼブラクロッシングらしい)を使って作成する方法。
ネットで調べても日本語の情報がヒットしないので、記事に残しておきます。

このあたりを参考にしました。
https://remotestance.com/blog/2940/
https://github.com/google/google-authenticator/wiki/Key-Uri-Format
http://weblabo.oscasierra.net/java-zxing-3/

まず実際にQRコードを描画する部分のコードを載せます。

``` java:main.java
        String contents = "otpauth://totp/" + serviceName + ":" + userId+ 
                "?secret=" + secretKey + 
                "&issuer=" + issuer +
                "&algorithm=SHA1" +
                "&digits=6" +
                "&period=30";

        BarcodeFormat format = BarcodeFormat.QR_CODE;
        int width = 320;
        int height = 320;
        
        Hashtable hints = new Hashtable();
        hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);
        
        QRCodeWriter writer = new QRCodeWriter();
        BitMatrix bitMatrix = writer.encode(contents, format, width, height, hints);
        BufferedImage image = MatrixToImageWriter.toBufferedImage(bitMatrix);

```

コード中に唐突に登場している変数の説明。
serviceName : サービスの名前
userId：ユーザを識別する名前
issuer：発行者名
secretKey：鍵文字列

上３つはキーの名前を作成するために使い、４つめのsecretKeyがseedの文字列です。
例えば、serviceNameをTokyo、IssuerをJapan、userIdをChuoとすると、アプリに表示されるキーの名前は、「Japan(Tokyo:Chuo)」となります。
ただ表示されるだけでなく、アプリで同じ名前のQRコードを読み取ると前に保存したものが勝手に上書きされてしまうので、別サービスで同じ名前を使わないように注意が必要です。

algorithm、digits、periodは指定してもしなくても動作は変わりません。今後互換アプリが登場しても仕様が変わるわけもなく、QRコードをすっきりさせたい人は消したほうがいいかも。

secreteKeyにはbase32エンコードした鍵文字列をセットします。
Google Authenticatorを使うということは、当然サーバー側でOTP(ワンタイムパスワード)を作成する処理が入るので、それとの整合性を考えなくてはいけません。
Javaで実装する場合、おそらくOTP生成に一番つかわれるのがこれ
https://tools.ietf.org/html/rfc6238
でしょう。
RFC6238に含まれるjavaコード部分をTOTP.javaに丸ごとコピーしてTOTPクラスを作成したとしてのOTP作成部分のコード例をあげます。

``` java:main.java
        String seed = DatatypeConverter.printHexBinary(SecureRandom.getSeed(20));
        Date date = new Date();

        long T0 = 0;
        long X = 30;        
        long testTime = date.getTime()/1000;
        long T = (testTime - T0)/X;
        String steps = Long.toHexString(T).toUpperCase();
        while (steps.length() < 16) steps = "0" + steps;

        String otp = TOTP.generateTOTP(seed, steps, "6");
```
アプリはSHA1にしか対応していないので、seedの長さは20byte(16進数で40文字)、呼び出す関数はSHA1用のものです。
このseedをどこかに保存しておきます。

そしてseedから鍵文字列を作成するコードがこんなかんじ。

``` java:main.java
        byte byte_seed[] = DatatypeConverter.parseHexBinary(seed);
        String secretKey = new Base32().encodeToString(byte_seed);
```
でてきたsecretKeyをQRコード用文字列のsecretKeyとして使います。
マウスオーバーした画像をぐるぐる回す jQuery

```js
$('img').mouseover(function(e) {
  console.log(
    window.setInterval(function() {
      $(e.target).css(
        {transform: "rotate(" + parseInt((new Date()).getTime()/10)%360 + "deg)"}
      )
    })
  )
});
```

解除するには、console に出た ID を見て clearInterval してください
RailsログをCloud Watch Logsに流す

RailsログをCloudWatchLogに流し込みます。
全部流すとデカすぎるので、WARN以上を流しましょう。

OS: amazon-linux-ami 2016.09

# fluent = td-agent(?)のインストール

```
curl -L http://toolbelt.treasuredata.com/sh/install-redhat-td-agent2.sh | sudo sh
```

# fluent-plugin-cloudwatch-logsのインストール
fluentのcloud watch log用プラグイン
td-agent-gemにインストールする、要注意

```
sudo td-agent-gem install fluent-plugin-cloudwatch-logs
```

#CloudWatch用のIAMを作って、アクセス情報を記載するよ
## IAMのポリシー情報
```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "logs:*",
        "s3:GetObject"
      ],
      "Resource": [
        "arn:aws:logs:us-east-1:*:*",
        "arn:aws:s3:::*"
      ]
    }
  ]
}
```
## td-agentに記載

```/etc/init.d/td-agent
#これをTD_AGENT_OPTIONSの下あたりに追記
export AWS_REGION="ap-northeast-1"
export AWS_ACCESS_KEY_ID="your access key id"
export AWS_SECRET_ACCESS_KEY="your secret access key"
```

# railsログ情報を設定するよ

```/etc/td-agent/td-agent.conf

<source>
      type tail
      path /path/to/rails_app/log/production.log
      pos_file /var/log/td-agent/logfile.log.pos
      tag app.error
      format /^(?<level>.), (?<log>.*)$/
</source>
<filter app.error>
  #WARN / ERROR / FATALだけ流すよ
  type grep
  regexp1 level [WEF]
</filter>
<match app.error>
      type cloudwatch_logs
      log_group_name your_log_group_name
      log_stream_name your_log_stream_name 
      auto_create_stream true
</match>
```

# 起動するよ

```
$ sudo service td-agent start
td-agentng td-agent:                                       [  OK  ]
```

これで完了、cloudWatchLogに流し込まれているはず。

fluentdの動作ログは /var/log/td-agent/td-agent.log に書かれているよ
IEとcalcとpaddingのバグ

# つらい

IEだとpaddingに%を含むcalcの計算をすると、ウィンドウリサイズしても反映されない

ページ読み込みの時の%の値をリサイズしても保持し続ける, 何故か最大化すると計算し直す

サンプル↓
https://codepen.io/anon/pen/RgOwbL

vwを使えばうまくいくので、頑張りましょう。
PyTorch導入(仮想環境)

pytorch導入方法だけ

開発環境
OS: Ubuntu 16.04
Intel(R) Core(TM) i7-6850K CPU @ 3.60GHz
グラボ:GeForce GTX 1080 × 2
cuda 8.0
cudnn 5.1

本家はここ
http://pytorch.org/

参考(むしろここで十分)
http://kazuto1011.github.io/irvs-tutorials/mnist/pytorch/

以下全てterminal上のコマンド
#python2系の場合
pytorch2という名前の仮想環境構築(仮想環境名は自由)

	conda create -n pytorch2 python=2.7.11 -y

仮想環境を有効にする

	source activate pytorch2

pytorchをインストール

	conda install pytorch torchvision -c pytorch


導入を確認

	python
	import torch

importでエラーが出なかったら導入完了
色々閉じる

	exit()
	source deactivate

#python3系の場合
pytorch3という名前の仮想環境構築(仮想環境名は自由)

	conda create -n pytorch3 python=3.5.1 -y

仮想環境を有効にする

	source activate pytorch3

pytorchをインストール

	conda install pytorch torchvision -c pytorch

導入を確認

	python
	import torch

importでエラーが出なかったら導入完了
色々閉じる

	exit()
	source deactivate
Windows10 + Chocolatey + Node.js(LTS) + Yarn + Angular CLI

# Chocolateyのインストール
https://chocolatey.org/install

# Node.jsのインストール
Chocolateyならコマンド一発です。LTS版をインストールしました。Win + X→Aで開いた管理者権限付きのPowerShellで次のコマンドを実行します。

```
cinst nodejs-lts
```

# Yarnのインストール
同じく次のコマンドを実行します。

```
cinst yarn
```

ここで、`nodejs`(非LTS)版のインストールを求められるので、断ります。
npmはWindows版Angular CLIと相性が悪いのでパス。

# Angular CLIのインストール
次のコマンドでインストールします。

```
yarn global add @angular/cli
```

これで`ng`コマンドが使えます。


```
PS> ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.1.3
node: 6.11.0
os: win32 x64
```
ぼくの辿り着いた濃いめのtext-shadow

#はじめに

前記事でこんなものを書いていました。
[【前記事】ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字](http://qiita.com/NoxGit/items/eb0904822c0f0fe97650)

☝上記記事を応用して出来ることが増えたのでまた記事を書きました。

#text-shadowのドロップシャドウって薄くない？
text-shadowって、ぼかしも利かせられて手軽にドロップシャドウ出来るのが便利ですよね。
でも、個人的にこれだと少し影が薄いかなーと思っていました。

※文字色指定などは省いています。

```CSS:位置移動無し＋ぼかし2px.css
p {
text-shadow: black 0 0 2px;
}
```

▼表示例1▼
![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/e108bc76-d0c6-92ff-cedd-654878e60429.png)



#1.影を複数指定して濃くしてみる

[前記事](http://qiita.com/NoxGit/items/eb0904822c0f0fe97650)で書いたように、影を複数指定することで縁取りを太くすることに成功しました。これを応用してみます。

```CSS:1px四方向＋ぼかし2px.css
p {
text-shadow:
	black 1px 1px 2px, black -1px 1px 2px,
	black 1px -1px 2px, black -1px -1px 2px;
}
```

▼表示例2▼
![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/9fec808f-ba3b-a36c-f11b-bc91b79fe799.png)

これで影が濃くなり、かなり読みやすくなったと思います！嬉しい！


#2.ぼかしを強めにしてみる

ぼかしを強めにした場合です。
まず、シンプルに5pxのぼかしをかけてみます。

```CSS:位置移動無し＋ぼかし5px.css
p {
text-shadow: black 0 0 5px;
}
```

▼表示例3▼
![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/a26b4bc5-5887-102e-608c-37e7062ad948.png)

うーん、やっぱり少し薄いですね……。
というわけで影を複数指定してぼかしも強めにしてみました。

```CSS:1px四方向＋ぼかし10px
p {
text-shadow: 
	black 1px 1px 10px, black -1px 1px 10px,
	black 1px -1px 10px, black -1px -1px 10px;
}
```

▼表示例4▼
![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/e1c8b20c-68f3-7140-1007-f4a8f761d579.png)

かなりはっきりとしました！

#3.ぼかしを弱めに太くする

複数指定してぼかしをかけるとかなり力強い縁取り＋ぼかし影のついた文字になりました！

```CSS:2px上下左右斜め+ぼかし2px.css
p {
text-shadow: 
	black 2px 0px 2px, black -2px 0px 2px,
	black 0px -2px 2px, black -2px 0px 2px,
	black 2px 2px 2px, black -2px 2px 2px,
	black 2px -2px 2px, black -2px -2px 2px,
	black 1px 2px 2px, black -1px 2px 2px,
	black 1px -2px 2px, black -1px -2px 2px,
	black 2px 1px 2px, black -2px 1px 2px,
	black 2px -1px 2px, black -2px -1px 2px,
	black 1px 1px 2px, black -1px 1px 2px,
	black 1px -1px 2px, black -1px -1px 2px;
}
```

▼表示例5▼
![image.png](https://qiita-image-store.s3.amazonaws.com/0/176912/dca02d86-9653-5b01-b9da-7071d11b4ea8.png)


#所感とか

text-shadow複数指定は、方向によってぼかしの強さを変えてやったらまた面白いものができるかもしれない？
奥が深いですね、CSS3……！
Eclipse+Pydev+GAE開発


Eclipseを使ってGAE開発を行います。
サンプルプロジェクトの作成、GAEへのデプロイ、動作確認までを目標にします
PCはMacbookPro　MacOS Sierra 64bit

[参考サイト]http://westplain.sakuraweb.com/translate/GAE/Python/RuntimeEnvironment.cgi


***

# 作業一覧 
1. eclipseのインストール
2. サンプルプロジェクトの作成
3. GAEにデプロイ

***
#1. eclipseのインストール

*今回は、日本語化されたPleiades All in Oneをインストールする*
[参考サイト]http://qiita.com/cypher256/items/233795f4fc58a704ee47

###1.1 下記のサイトで「Eclipse4.6 Neon Pleiades All in One」を選択
[ダウンロードサイト]http://mergedoc.osdn.jp/

###1.2 「Mac64bit」の[Full Edition]の[Python]を選択
<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/40b88bd6-2091-112c-c8c1-b9c09657b02f.png width=400px>


### 1.3 ダウンロードしたファイルをダブルクリックしてApplicationsにインストールする
### 1.4 eclipseを起動する

***
		
#2. サンプルプロジェクトの作成
2.1 「ファイル」→「新規」→「その他」→「PyDev」を選択し、「PyDev Google App Engineプロジェクト」を選択し、「次へ」
<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/112b1086-c5ac-1f50-50d7-6ef73f5af372.png width=400px>

2.2 プロジェクト情報を入力して「次へ」
プロジェクト名：Sample

<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/632921de-11e5-2b3b-b41c-ab588655f1c1.png width=400px>

2.3 Google App Engine Directory に下記を入力

` /Applications/GoogleAppEngineLauncher.app/Contents/Resources/GoogleAppEngine-default.bundle/Contents/Resources/google_appengine `

<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/ce57994a-b0ce-2f04-dd87-3d613f012ec1.png width=400px>

2.4 完了

<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/307832e6-fc5c-0705-1088-93b881f10f13.png width=400px>

2.5 空のプロジェクトを作成する
「From Which Template do you want to create your new Google App Project?」
で
「Empty Project」を選択

<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/55170225-8141-80a0-1f23-2038eb48a2d0.png width=400px>

2.6 スクリプトを作成
　下記のような一番単純なサンプルソース[helloworld.py]をプロジェクト直下に作成する
  
```

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#コメント群
#

import webapp2

class MainHandler(webapp2.RequestHandler):
    def get(self):
        self.response.write('Hello World !')


app = webapp2.WSGIApplication([
    ('/.*', MainHandler)
], debug=True)
```

2.7 app.yamlの作成


```
application: sample-app-12461
version: 1
runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /.*
  script: helloworld.ap

libraries:
- name: webapp2
  version: "2.5.2"
    
```


2.6 デバック実行
(1)デバック実行
<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/b1c04c97-2c24-05af-81aa-8b02e53a1114.png width=400px>
(2)ログの確認

Eclipseのコンソールに下記のログが出力される

<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/a8eadc61-6581-3950-20f8-b82d10cbf9cb.png width=400px>

(3)ブラウザで確認

`http://localhost:8080
`

<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/ee1a6f7a-3112-b8ff-068b-a88cdc14625e.png width=400px>


***

#3. GAEにデプロイ
ローカルで動く事を確認したので、実際のGAEにデプロイしてみます。

3.1 GAEにアップロードする

<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/2361acbe-ed30-25ee-f5c4-5eee8dc113c7.png width=400px>

3.2 GAEで確認する

GCPの管理コンソールにログインし、「AppEngine」→「バージョン」をクリックすると、下記のようにデプロイされているので、バージョンをクリックする

<img src=https://qiita-image-store.s3.amazonaws.com/0/93411/936a2b48-dd5c-796e-440b-acb64d29e096.png width=400px>


*以上で単純なGAEアプリケーションが作成できるはず*
Linuxで特殊な名前のファイルの削除の仕方

### 問題
例えば誤って '---'という名のファイルを作ってしまった場合、
通常に削除しようとすると、

```sh
rm ---

rm : missing operand
Try 'rm --help' for more information
```
というエラーが起きてしまいます。

### 解決法

```sh
rm ./---
```
で無事ファイルを消せます。
ローカル環境、ステージング環境、本番環境について

webサイトを作る、もしくは運用中の環境についての認識。
通常このようなプロジェクト環境を作ったり運用することが多いです。

# ローカル環境
localhostで確認できる環境。
自分がまず確認するドメインです。
ローカルなので、ファイルの読み込みなどの撃早
wordpressなどの場合はmampなどを使って再現します。

# ステージング環境
staging.hogehoge.com
というような環境。
通常サブドメイン切って作ります。
クライアント確認用です。

# 本番環境について
hogehoge.com
本番環境（プロダクト環境とも言う）。
こちらが一般公開ようです。
PhpMyadminをお名前のサーバーで利用する方法

## 概要
お名前.comのサーバーでphpmyadminを使いたくなった場合の設定方法です。
設定が複雑ですが、setupからconfigファイルを作成し、それをアップロードして、ログインするという流れです。

## 1. PhpMyadminをサーバーにアップロード

PhpMyadmin下記urlよりダウンドールします。
https://www.phpmyadmin.net/

次に、フォルダ名を任意の名前にリネーム（例:ppm）し、サーバーにアップロードします。
フォルダ内のphpファイルの権限を700にします。
アップロードしたファルダ内に「config」という空のフォルダを新規に作ります。

## 2. PhpMyadminのセットアップ

1. 下記urlにアクセスします。
http://hogehoge.com/ppm/setup/

2. 画面中央の「新しいサーバー」をクリックします。

### 「基本設定」タブでの設定
- このサーバーの詳細な名前：データベースの「ホスト名（*cgidbまで）」 
- サーバのホスト名：データベースの「ホスト名（*cgidbまで）」 

### 「認証」タブでの設定
- config 認証用のユーザ：空白にする 

### 「サーバー設定」タブでの設定
- リスト化したデータベースだけを表示する：データベースの「データベース名」

ここまで出来たら「適用」をクリックします。
画面が変わるので、設定ファイルを「日本語」にしてダウンロードします。

### 設定ファイルのアップロード
先ほどダウンロードしたファイル（config.inc.php）をアップロードします。

## ログインの確認
下記urlにアクセスして、ログインできるか確認します。
http://hogehoge.com/ppm/

ログインできたら、configディレクトリを削除します。（セキュリティ対策）
setupフォルダのindex.phpの権限を600にします。

## 参考サイト
公式サイト
http://guide.onamae-server.com/sd/3_12_15_25/

## おそらく役立つ情報 
痒いところに手が届くかもしれない記事を書いています。
フォローしてくれるとやる気になります！
http://qiita.com/nadonado
簡潔なGitHubの新規登録

# GitHubにアクセス
https://github.com
# サインアップを押す
![aaa12.png](https://qiita-image-store.s3.amazonaws.com/0/187152/b5719179-93a5-3d32-ab51-07637bf158c9.png)
# Step１の登録手順
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/187152/51039464-a72d-eb32-3b1d-61a0e74ddc7b.png)

```
username      : 他の人と被ったらエラーが出るよ
Email Address : 自分のメールアドレス
Password      : 数字と英文字を含めないとダメ
```

緑をクリック
# Step２の登録手順
![図2.png](https://qiita-image-store.s3.amazonaws.com/0/187152/42efe57c-4094-8c40-1705-b7b746178772.png)
そのまま緑をクリック
# Step３の登録手順
![図3.png](https://qiita-image-store.s3.amazonaws.com/0/187152/3d66735a-af93-5df2-4c3f-2efba689442f.png)
アンケートなのでどちらでもめんどくさいならスキップ
# メールアドレスで有効化
## 受信トレイの確認
![1.png](https://qiita-image-store.s3.amazonaws.com/0/187152/0bbfb4b7-1c27-5313-b669-23434e05b6cd.png)
ここまで進むとメールが届くので開く
## URLをクリック
![図4.png](https://qiita-image-store.s3.amazonaws.com/0/187152/efce15d3-550e-b4dc-a22f-5305936fcbf2.png)
ここのURLをクリック
# 登録完了
![FireShot Capture 40 - Your Actions - https___github.com_dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/187152/8e092641-ebc7-d021-c27d-06faf67150d6.png)
登録完了
異なる言語間での暗号化／復号化（PythonでEncrypto、JavaでDecrypto）

# Pythonで作ったデータを暗号化して、Javaで復号したい
セキュリティ上の話で、そんなことが必要になった。
どちらもCryptoというライブラリがあるからすぐできるだろうと思っていたら大ハマりで、復号に至るまでに4時間くらいかかった。

# 参考
http://nori3tsu.hatenablog.com/entry/2013/10/01/012130
ハマった私に降りた天使のようなページ。
https://qiita.com/pink/items/f795b0680a2a000e1934
http://pentan.info/doc/block_cipher.html#anc_padding
パディングについて説明してくれているページ。

# ポイント
暗号化には次の考えておくべき要素がある。（かなりざっくり）

- 暗号化の種類→今回はAESとする
    - 鍵
    - ECB/CBC/OFB
    - 暗号化対象のパディング

## 鍵
16バイトなのか24バイトなのか32バイトなのか、どの長さか選ぶ必要がある。
Java側でECBを使う前提にしたら、16バイトしか受け付けなかったので、16バイトを使った。

## ECB/CBC/OFB
色んなサイト見るとCBCを使う情報が多いが、IV（イニシャルベクタ）という値の生成が必要。
→ってことはこの値も渡す必要が出てくるのか？ということで不採用。

簡単さも必要だったためECBを採用。
OFBはあまり調べてない。

## 暗号化対象のパディング
最後の難関としてかなり苦労したのがこれ。
AESの暗号化は、暗号化対象のデータ長が16Byteの倍数である必要があった。
そして、python上で暗号化すると
　　　元のデータ長：192Byte
　　　暗号化後のデータ長：192Byte
となった。

この暗号化したデータをJavaでそのまま復号できるかというと、できなかった。
色々試したところ、Java側で暗号化すると
　　　元のデータ長：192Byte
　　　暗号化後のデータ長：208Byte
となり、勝手にさらに16Byteパディングされていた！

この問題の対応方法を参考のページで知ることになる。（本当に感謝）
自己流で16バイトの倍数にパディングして192Byteとかやってたのだけど、やはりパディングにもルールがあるんだなと知る。

# プログラム

```py:pythonソース
from Crypto.Cipher import AES
import base64
 
BS = 16
pad = lambda s: s + (BS - len(s) % BS) * chr(BS - len(s) % BS)
unpad = lambda s : s[0:-ord(s[-1])]

key='XXXXXXXXXXXXXXXX' #16バイト必要
text='abcdefg'         #暗号化したいデータ
cipher = AES.new(key, AES.MODE_ECB)
raw = pad(text)
enc = cipher.encrypt(raw)
data = base64.b64encode(enc) #dataを何かしらの形でJavaに渡せばよい
```

```java:Javaソース
import java.security.GeneralSecurityException;
import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import org.apache.commons.codec.binary.Base64;
 
public class AESCipher {
  private SecretKeySpec key;
 
  public AESCipher(String key) {
        this.key = new SecretKeySpec(key.getBytes(), "AES");
  }
 
  public String decrypt(String str) throws GeneralSecurityException {
        Cipher cipher = Cipher.getInstance("AES");
        cipher.init(Cipher.DECRYPT_MODE, this.key);
 
        return new String(cipher.doFinal(Base64.decodeBase64(str)));
  }
 
  public static void main(String[] args) throws GeneralSecurityException {
        String key = "XXXXXXXXXXXXXXXX";
        String text = args[0]; // pythonのdataを渡す
 
        AESCipher cipher = new AESCipher(key);
 
        String dectext = cipher.decrypt(text);
        System.out.println(dectext); // abcdefg
    }
}
```