python + flask 環境構築

flask を使ってweb アプリケーションを作ろうということで、環境構築メモです。

環境

• mac osx 10.10 Yosemite
• using homebrew

目標

• python環境
• pipコマンドを使えるように
• pipコマンドでflaskをインストール

実際にやってみた

python, pip, setuptools(easy_install) のインストール

homebrewでやります。

% brew install python

するとありがたいことに pip も setuptools も入れてくれるんですが、 が、pipコマンドをたたくと

ERROR:root:code for hash md5 was not found.

こんな感じに怒られてしまうので、以下の記事を参考にpythonをインストールします。

Python - ERROR:root:code for hash md5 was not found. - Qiita

% brew install openssl
% brew link openssl --force
% brew uninstall python 
% brew install python --with-brewed-openssl
....
==> Caveats
Setuptools and Pip have been installed. To update them
    pip install --upgrade setuptools
    pip install --upgrade pip

    You can install Python packages with
    pip install <package>

関連パッケージも含め、もろもろインストールしてくれます。ありがたや

flask をインストール

pip を使います

% sudo pip install flask

終わりです。 簡単すぎてもうなんかメモる必要なかった。

flaskの使い方は

Implementing a RESTful Web API with Python & Flask

がわかりやすいので、あとはがんばりましょう

yeoman+grunt+bowerでangularjs+bootstrap+sass環境構築

AWSのEC2インスタンス上でタイトルの環境を構築した際のメモ（自分用）。

---

以下参照したものをざっと挙げておく

• nodejs+npm
  • Installing Node and npm
  • node-and-npm-in-30-seconds-sh
• yoeman
  • yeoman.io
  • yeoman/generator-angular
  • yeomanを触ってみる

---

立ち上げたばかりのEC2インスタンスを想定して話をする。

nodejs+npmの環境構築

1. makeとg++を使えるようにする
   • % sudo yum install gcc gcc-c++
2. node-and-npm-in-30-seconds-shにある通りに実行していく
   • PATHに関しては既に通っているようであれば省略可

チェックする

% node -v
v0.10.28
% npm -v
1.4.13

インストール出来ていればコマンドが使えるようになってる

インストール後、% npm search gruntと叩いたら、以下のようなエラーが出た

FATAL ERROR: JS Allocation failed - process out of memory

これに関しては、今回の場合は最弱のEC2インスタンスを使っていたため、純粋にメモリが足りなかったためだと思われる。

ハードウェアのパフォーマンスが十分な場合、以下を参考にすると解決するかも

node-js-fatal-error-js-allocation-failed-process-out-of-memory-possible

yeoman+grunt+bowerの環境構築

1. yeoman+grunt+bowerをインストール
   • % npm install -g grunt-cli grunt yo
   • bowerはyoのインストール時に自動でインストールされる
2. angularjs用のyeoman generatorをインストール
   • % npm install -g generator-angular
3. プロジェクト用フォルダの作成
   • % mkdir ${PROJECT_NAME} && cd ${PROJECT_NEME}
   • yeomanは自動でプロジェクト用ディレクトリを作成してくれない
4. プロジェクトの作成
   • % yo angular ${PROJECT_NAME}

---

ひとまずここまでで、プロジェクトの生成までは出来た。

これ以降の事は次の記事が参考になる。

Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築

---

2014.06.01 追記

% grunt で出るエラーへの対処について

compassが入ってない時

Warning: Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use --force to continue.

以下対処法

%gem update --system
%gem install compass
%npm install grunt-contrib-compass --save-dev

karma-jasmineが入っていない時

Warning: No provider for "framework:jasmine"! (Resolving: framework:jasmine) Use --force to continue.

以下対処法

% npm install karma-jasmine --save-dev

---

EC2インスタンス上での% grunt serveの起動に関して

まず、EC2の設定 で9000番ポートをあける(yeomanデフォルトで9000番が生成されるため)。

次にGruntfile.jsをいじる

connect: {$
    options: {$
    port: 9000,$
   // Change this to '0.0.0.0' to access the server from outside.$
   hostname: '*',$
   livereload: 35729$
},

hostnameに'*'または0.0.0.0を設定

最後に、ブラウザで、{Elastic IP}:9000で確認。

ノーマルモード時に、カーソル位置で改行を挿入する

.vimrc

nmap <CR> i<CR><ESC>

---

key	meaning
i	ノーマルモード時にインサートモードに入る
<CR>	Enter
<ESC>	esc

$ source .vimrc で、コメント行が"command not found"になる件

結論から。

ターミナルで

$ source ~/.vimrc

は叩くのやめよう

.vimrcは、vimの起動時に勝手に読み込まれる、もしくはvimを起動してsource .vimrc。

---

事の発端は、let mapleader=','が機能していないなと思ったところから。

いかんせんvim初心者、UNIX弱者なもので、とりあえずターミナルで$ source叩いとけばリロードしてくれると思っていた。

なので、何の疑問も持たずに叩くと、

$ source ~/.vimrc
.vimrc:1: command not found: -----------------------------------------------
.vimrc:2: no such file or directory:   NEOBundle\n-----------------------------------------------\nif has('vim_starting')\n  set nocompatible\n  set runtimepath+=~/.vim/bundle/neobundle.vim/\nendif\n\ncallneobundle#begin(expand('~/.vim/bundle/'))\n\nNeoBundleFetch 'Shougo/neobundle.vim'\n\n-----------------------------------------------\n
.vimrc:15: command not found: -----------------------------------------------
.vimrc:17: command not found: NeoBundle
.vimrc:19: command not found: NeoBundle
.vimrc:20: no such file or directory: leader
.vimrc:21: no such file or directory: leader
...
...
...

まー、山のようにエラーが…

これではまったの確か2回目で、どうせまたもう1回やるだろうと思って書いておく。

解決出来たのは次の記事のおかげ。

Warning message when sourcing .vimrc

ありがとうございます。

---

let mapleader=','の原因は、<leader>タグよりも後ろで書いていたから。

これは先頭に書くようにしました。

UIImageViewを丸くトリミングする

TweetBotのサムネイル表示のように、画像を丸くトリミングする方法を紹介します。
CALayerを使うと数行で実装出来るので便利です。

とりあえずサンプルコード

UIImage *circleImage = [UIImage imageNamed:@"test.png"];
UIImageView *circleImageView = [[UIImageView alloc] initWithImage:circleImage];
if (circleImage.size.width != circleImage.size.height) {
    CGFloat smallerSideLength = (circleImage.size.width < circleImage.size.height) ? circleImage.size.width : circleImage.size.height;
    circleImageView.frame = CGRectMake((circleImage.size.width - smallerSideLength) * 0.5f,
                                       (circleImage.size.height - smallerSideLength) * 0.5f,
                                       circleImage.size.width, circleImage.size.height);
} else {
    circleImageView.frame = CGRectMake(0.0f, 0.0f, circleImage.size.width, circleImage.size.height);
}
circleImageView.layer.cornerRadius = circleImageView.frame.size.width * 0.5f;
circleImageView.clipsToBounds = YES;
[self addSubview:circleImageView]

iOS Circler masked UIImageView

上のコードで、四角形のUIImageViewを正円にトリミング出来ます。
元の画像の縦横比が違うときは、短い辺を基準に、真ん中でトリミングしています。

大切なのは

circleImageView.layer.cornerRadius = circleImage.size.width * 0.5f;
circleImageView.clipsToBounds = YES;

この２行だけです。

元の画像としてtwitter等の正方形の画像を用意すれば、面倒な分岐も必要ないので、単純に円形に切り抜きたいという時に使えるかと。