GIG

赴くままに技術を。

北小金-流山-利根運河

流山に移り住んで4ヶ月くらいになります。 流山といってもほぼ松戸市に接するようなところに住んでいるのですが、ここから野田市との境までポタリングしてきました。

利根運河

流山に転入してきたとき、利根運河の写真が載っていた冊子などを頂きましたが、 まさかここだとは思いませんでした(名前も行って初めて知った)。

運河駅は理科大の最寄駅なんですね。 勉学に集中できそう^^;

利根運河。あいにくの天気ですが雨は降らず走りやすい天候。 f:id:hermesian:20150315100249j:plain

なくなりつつある原風景

流山は「都心から一番近い森のまち」を掲げてますが、TX沿線の開発に伴う里山の切り崩しを見ていると近い将来そうなくなるのかなぁ。 画一化された分譲住宅の背後に広がるおおたかの森を見てると、そう思わざるを得ない。

手前に広がる里山風景と、奥に広がる開発中のセントラルパーク f:id:hermesian:20150314141642j:plain

IPythonで最初からimportさせておく設定

IPythonを使っていると最初からimportしていてほしいなと思うときがしばしば。 前回行ったIPythonプロファイルで設定できるようなので、以下やってみる。

~/.ipython/profile_default/配下にあるプロファイルを編集しても良いのですが、 後で見直したいときもあるかなと思い、まずはIPythonプロファイルを作成するところから。

$ ipython profile create basic_settings

すると~/.ipython/profile_basic_settings配下にプロファイルが作られます。 この中のipython_config.pyにimportさせたいライブラリを加筆します。

# lines of code to run at IPython startup.
c.InteractiveShellApp.exec_lines = [
        "import numpy as np",
        "import pandas as pd",
        "import matplotlib.pyplot as plt",
        "%matplotlib inline"
]

このプロファイルを使ってIPythonを起動します。

ipython notebook --profile=basic_settings

これで明示的にimportを書くことなくライブラリを利用できます。

「Pythonによるデータ分析入門」を読む準備をする

今までJavaPerlをその場しのぎとして業務をしてきましたが、昨今の流れもあってPythonを使い始めました。

Amazonやアキバのヨドバシを眺めてみましたが、Pythonってあまり書籍がでていない...。その一方、RubyなんかはWebシステムの構築で使われる頻度が増えて、本があふれんばかり。

Rubyもいつかは身に付けたいけど、データの前処理用途で使おうと思うと、多次元配列に対応しているかや、科学計算ライブラリとかも気になる点です。 あるみにはあるにはあるみたいですが(いつか試してみよう...)。

SciRuby

Pythonによるデータ分析入門」から始める

そんなわけで、出だしに手をつけたのが「Pythonによるデータ分析入門」です。 著者のWes McKinney氏は、クオンツとしての経験をもとにデータ処理ライブラリのpandasを作成されたことでも知られています。

内容としては、NumPy, pandas, matplotlib, IPython, Scipyといったデータ分析で利用されるライブラリをハンズオン形式で解説しています。ところどころ事例紹介があり、後々参考になりそうです。

Pythonによるデータ分析入門 ―NumPy、pandasを使ったデータ処理

Pythonによるデータ分析入門 ―NumPy、pandasを使ったデータ処理

読むための環境を整備する

IT関連の書籍にありがちですが、手を動かさないと頭に入ってこないので、環境を構築します。 備忘録代わりに日記にしたためておくとしよう。

手元のPCのスペック;

Macにがっつり構築しようとするとバージョンアップ時やに困りそうなので、 仮想環境として構築します。

VMの準備

手始めに、Oracle VM VirtualBox, Vagrantをインストールします。

1. Boxのダウンロード

利用したい仮想マシンをダウンロードしてきます。 社内の環境でも使っていることから、Redhat系のディストリビューションということで、CentOSを入れます。 ( centos70仮想マシンの識別名なので、適宜変更してください。)

$ vagrant box add centos70 https://dl.dropboxusercontent.com/s/srw2tqh58507wik/CentOS7.box

Boxはいくつか提供しているところがあるみたいですね(前者しか知りませんでした...)。

2. 仮想マシンの作成

仮想マシンを作成すると設定ファイル(Vagrantfile)が生成されるため、適切なディレクトリを作成してそこで下記のコマンドを実行します。

$ vagrant cenos70

ログがつらつらと吐き出され、仮想マシンが立ち上がりました。 下記コマンドで入れます。

$ vagrant ssh

ログインユーザはvagrantとなっています。 またrootユーザの初期パスワードは、vagrantです。

また今回は自宅なので、特に必要はないのですが、会社などでproxyの設定が必要な方は、 後々のパッケージのインストールに先立ち、vagrant-proxyconfを入れておきましょう。

$ vagrant plugin install vagrant-proxyconf

Vagrantfileに下記の行を追加します。

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|

...(以下の行を追記)
     config.proxy.http = "http://(ユーザID):(パスワード)@(Proxyのドメイン名):(Proxyのポート)"
     config.proxy.https = "http://(ユーザID):(パスワード)@(Proxyのドメイン名):(Proxyのポート)"
     config.proxy.no_proxy = "localhost,127.0.0.1"
...(以上の行を追記)

end

仮想マシンを再起動します。

$ vagrant reload 
CentOSのセットアップ

1. 基本セットアップ

開発環境を一式入れておきましょう。

$ sudo yum groupinstall "Development tools"

さらに、pyenvの利用に際して以下を追加します(参考: Common build problems · yyuu/pyenv Wiki · GitHub)

$ sudo yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel

あと、matplotlibのインストールする際に必要なものとして、

$ sudo yum install python-devel libpng-devel freetype-devel

必要に応じてproxyの設定をします。

# sudo vi /etc/profile

...(以下の行を追記)
PROXY=http://(ユーザID):(パスワード)@(Proxyのドメイン名):(Proxyのポート)
export http_proxy=$PROXY
export https_proxy=$PROXY
...(以上の行を追記)

あと、F/Wも切っておきたいところです(甘えですが)。

# systemctl stop firewalld
# systemctl disable firewalld

2. Pythonのインストール

2.X系、3.X系とありますが、何をしたいかで変更したい場合もあるかと思いますので、インストールバージョンを管理できるpyenvを利用します(以下では、XXXenv系をまとめて管理するanyenvを利用)。

$ git clone https://github.com/riywo/anyenv ~/.anyenv
$ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l

pyenvをインストールします。

$ anyenv install pyenv
$ exec $SHELL -l
$ anyenv versions      # インストールされたか確認

それではpythonをインストールしましょう。 まずはどれをインストールするかリストから選びます。

$ pyenv install --list
Available versions:
  2.1.3
  2.2.3
  2.3.7
  2.4
  2.4.1
  2.4.2
  2.4.3
...(以下、省略)

今回は、3.4.2をインストールします。 また、今後バージョンを使い分けることを想定して、~/dev/python配下のみ 3.4.2を使うことにします。

$ pyenv install 3.4.2
$ mkdir -p ~/dev/python
$ cd ~/dev/python
$ python --version
Python 2.7.8
$ pyenv local 3.4.2
$ python --version
Python 3.4.2
ライブラリのインストール

pythonのライブラリを管理するpipを使ってインストールしていきます。 順番は、

  1. Numpy
  2. Scipy <- Numpyが先に必要
  3. Pandas
  4. matplotlib
  5. IPython

1. Numpyのインストール

$ pip install numpy

2. Scipyのインストール

  • 科学計算ライブラリ
  • Numpyライブラリに依存
  • 必要なBLASLAPACKといったライブラリを有償のものを使うなどカスタムインストールすることも

インストール結構時間かかるな...

$ pip install scipy

3. Pandasのインストール

  • RのあのDataFrameが利用可能
  • group byやmergeなどデータの取り回し機能ライブラリ
$ pip install pandas

4. matplotlibのインストール

  • 2Dのチャート描画ライブラリ
$ pip install matplotlib

5. IPythonのインストール

$ pip install “ipython[notebook]"

外部からブラウザでアクセスできるようにします。 デフォルトはいじらず、プロファイルmyprofを作り、その設定に修正を加えます。 ポートの変更もこのプロファイルで変更できます。

$ ipython profile create myprof
$ vi ~/.ipython/profile_myprof/ipython_config.py

...(以下の行を追記)
c.NotebookApp.ip = u'*'
...(以上の行を追記)
ようやくスタートライン

これでようやく読み始められます。

  • --no-browserオプションは起動時にブラウザを自動的に起動しないため
  • --matplotlib inlineオプションはmatplotlibをnotebook上で描画するため
 ipython3 notebook --profile=myprof --no-browser --matplotlib inline &

あと使用されているデータは、pydata/pydata-book · GitHubからcloneしてきましょう。 ipythonを起動(上記のコマンドを実行した)ディレクトリに降りて、下記のコマンドを入力します。

$ git clone https://github.com/pydata/pydata-book

本の中では~/ch0X/となっている点を~/pydata-book/ch0X/と読み替えればいけるかと。 最後にhttp://localhost:8888から始めるとしましょう。

iPhone 4sからiPhone 6に変えてみた

iPhone 5が出てからもがんとしてiPhone 4s(これだけで3代目)を手放しませんでした。 個人的な信条からなのですが、画面の大きさにこだわるAppleなんて見たくなかったし、OSが更新されていくので、機能面で購入する動機がないなーとぼんやり思ってました。

替えやがった

そんなある日、2015/1月中に下取りしたらiPhone 6(16GB)の機種代がカバーされると知って、うっかり帰り道アキバヨドバシへっ (信条なんてホコリなみの軽さでふっとんだ)

4.7inchというほぼ本体を握っているような薄さ。 取り付けが若干苦労しましたが、満足してます。 外し方はそのときにでも考えるか(汗

  • フィルム: (商品名どわすれ) ガラスフィルム

ケースにも付属のフィルムが付いてますが、前々からガラスフィルムを使って見たかったので、購入してみました(赤いハイヒールで画面を踏んでいるパッケージのやつ)。

ところが... iPhone 6ようにもかかわらず、画面の方がややはみ出している--; 画面のさわり心地は良いのですが、いまいち。

結局よかったのか?

やはり通勤中の片手使いには決して使いやすいものではないなと思います。 その分、電子書籍の見易さは、画面の大きさと綺麗さで段違いに良い! そういう意味だとタブレットの2台持ちはしなくなったなー

Angularジェネレータでプロジェクトの生成時にエラー

そろそろ腰を据えて、AngularJSを修得せんと。 angular-seedをcloneして使おうかと思ったけど、最近はYeomanということで、 早速AngularJSのプロジェクトを生成しようとしたら、下記のようなエラーが発生。

> node-gyp rebuild

gyp ERR! configure error
gyp ERR! stack Error: Python executable "python" is v3.3.5, which is not supported by gyp.
gyp ERR! stack You can pass the --python switch to point to Python >= v2.5.0 & < 3.0.0.
gyp ERR! stack     at failPythonVersion (/Users/hoge/.anyenv/envs/ndenv/versions/v0.10.29/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:108:14)
gyp ERR! stack     at /Users/hoge/.anyenv/envs/ndenv/versions/v0.10.29/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:97:9
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:645:7)
gyp ERR! stack     at ChildProcess.emit (events.js:98:17)
gyp ERR! stack     at maybeClose (child_process.js:755:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:822:5)
gyp ERR! System Darwin 14.0.0
gyp ERR! command "node" "/Users/hoge/.anyenv/envs/ndenv/versions/v0.10.29/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/hoge/dev/angular/minimumlist/node_modules/karma/node_modules/chokidar/node_modules/fsevents
gyp ERR! node -v v0.10.29
gyp ERR! node-gyp -v v1.0

node-gypTooTallNate/node-gyp · GitHubPythonの3系に対応してないみたい。 こういうときにXXXenvは便利。プロジェクトを作りたいディレクトリにおりて、2系に切り替えればOK。

$ pyenv local 2.7.6
$ python --version
Python 2.7.6

さて、チュートリアルでもやるか。

iframeを自動的にリサイズ

iframeで他のhtmlを埋め込みたくなったので、iframeのサイズを自動調整するような そういうjquery pluginがないか探していました。 Google先生に聞いてみたところ、下記が良くヒットします(日本語では)。

bowerを通してインストールしたいので、bowerにも聞いてみたところ、 下記のような結果が得られました。

$ bower search iframe
Search results:

    jquery.iframe-transport git://github.com/cmlenz/jquery-iframe-transport.git
    iframe-resizer git://github.com/davidjbradshaw/iframe-resizer.git
    jquery-bgiframe git://github.com/brandonaaron/bgiframe.git
    responsiveiframe git://github.com/npr/responsiveiframe
    iframe-auto-height-jquery-plugin git://github.com/Sly777/Iframe-Height-Jquery-Plugin
    versal-iframe-launcher git://github.com/versal/iframe-launcher.git
    jquery.iframetracker.buzzstarter git://github.com/ggenov/iframeTracker-jquery.git
    jquery-iframeshim git://github.com/alexcheng1982/jquery-iframeshim.git
    basic-seamless-iframe 

この中でサイズの自動調整は、davidjbradshaw/iframe-resizer · GitHubSly777/Iframe-Height-Jquery-Plugin · GitHubです。 後者は先のjquery-iframe-auto-heightと機能として同じみたいですね。 メンテナンスが今もされているという観点で、前者のiframe-resizerを利用してみます。

使い方

Bowerでインストールします(なければ、GitHubからcloneして任意の場所に置いておきます)。

$ bower install -S iframe-resizer

インストールされたJavaScriptは2種類あります。

  • iframeResizer.min.js ; iFrameを埋め込む方のHTMLで読ませる
  • iframeResizer.contentWindow.min.js ; iFrame側のHTMLで読ませる

あとはiframeを埋め込んだ側で、以下のように呼び出して上げます。

$(‘iframe’).iFrameResize({});

これらを使った例を見てみましょう。 まずはiframeでchild.htmlを取り込むparent.htmlの方です。

  • parent.html
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
    <title>Iframe Resize Demo</title>
</head>
<body>

     <iframe src="./child.html" width="100%" scrolling="no" frameborder="0"></iframe>
    
    <!-- JavaScript -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <!--script src="../bower_components/iframe-resizer/src/iframeResizer.js"></script>
    <script>
         $('iframe').iFrameResize({ });
    </script-->
</body>
</html>

それでもって、iFrameで参照される側の方。

  • child.html
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
    <title>Child</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body>

    <div class="jumbotron">
        <h1>Child</h1>
        <p>これはiframe側の要素。</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
    </div>
    
    <!-- JavaScript -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/iframe-resizer/src/iframeResizer.contentWindow.js"></script>
</body>

どうなるの?

  • Before

何も調整していない場合、下の方が切れてしまっていますね。

f:id:hermesian:20140810221923p:plain

  • After

無事下の方まで見えるようにheightが調整されていることが分かります。

f:id:hermesian:20140810221924p:plain

サイズが合わない?

“Troubleshooting > IFrame not sizing correctly”(https://github.com/davidjbradshaw/iframe-resizer#iframe-not-sizing-correctly)に記載されてます。heightCalculationMethodで、maxまたはlowerstElementを設定すると良いみたいです。

スピリチャル・ワールド

f:id:hermesian:20140629214646j:plain

東京写真美術館で5/13から7/13まで開催されている写真展。

文字面だけみると怪しげな、何か新興宗教的な匂いを嗅ぎ取ったけど、日本人の精神世界にフォーカスした写真展でした(日曜美術館のアートシーンで分かった)。

伊勢神宮、富士山のような有名所の写真もあったり、忘れられてしまったような土着の神様もいたり。

どこか不安をかき立てられる写真もあったりしたけど、それも含め落ち着ける空間でした。

あれが良かったな。神事の格好に扮した人のポートレイト。調べたみたら土田ヒロミ氏の「続・俗神」という作品のようで。

そういう土着のものの中に身を置きたい。 そうだから一刻も早く都会を去りたいなと。