[Cloud IDE] AWS Cloud9ファーストインプレッション

Cloud9

一番有名どころのCloud IDEです。 AWSに買収されてAWSのファミリーとしてCloud9を利用することができます。
今から登録するとAWSに統合されたCloud9にリダイレクトされますが、買収前のCloud9も依然として利用することができます。(会社の一人の開発者も前のCloud9を利用中です)

一言でまとめると”EC2インスタンスについたIDEの皮”だと思います。

EC2を利用していた人にはとっつきやすいですが、設定時にAWSワードがでてくるので知らない人は勉強する必要があります。将来的に知っておいて損はないのでここから始めるのも手だと思います。これがAmazonが買収した意図かもしれません。

スクショでみていきましょう。

Tokyoリージョンは選べない

3ステップの環境設定

セカンドステップでAWS用語のec2やt2.microなどがでてくる。プログラムを書くという目的のためにインフラを知る必要があるのかどうかは疑問だ。逆に知っている人はサクサクいける。t2.microの1Gメモリじゃアプリ乗ってもスワップしまくって作業にならないとか。



初期起動は2,3分ぐらいかかる

ec2インスタンスだしそのぐらいかかるよね。

デフォルトでEC2インスタンスに直接sshは不可

普通のt2.microインスタンスです。セキュリティグループであるサブネットのsshしかデフォルトオープンしてない。そして、keyが設定されてないのでCloud9のインスタンスの直接サーバ化には、インスタンス自体のsshサーバの設定を変更して、sshをパブリックにオープンする必要がありそう。


美しいUIと多岐にわたる設定

ACE editor。オープンソースのAceエディタにはドキュメントがあまりなくここまで綺麗にするには独自のノウハウor凄まじい時間をかけてアダプトしたのか(戦々恐々)。Ace editorのテーマはサポートされていてそれにあうUIも良い感じ。これを使いこなすのはまた別途勉強が必要。プラグイン機構がなさげなのが残念。

再開時に30秒ほどかかる

30分利用しない(デフォルトが30分。変更可能)とEC2インスタンスが停止し、課金が止まる。したがって、停止から再開に30-40秒ほどかかる。

まとめ

  • ブラウザ一つで開発が進められる。
  • UIは美しく、もっさり感もあまりない。しかし、IDEの設定が沢山ある。
  • 停止から再開に30-40秒ほどかかるので少し待つ必要がある
  • Tokyoリージョンで使えない。しかし、シンガポールでも遅延は気にならない。
  • 下記のような良心的な価格設定から始められる。 大規模なRailsアプリなどは1Gじゃ足りないので他のインスタンスを使う必要あり。価格帯は教育用途には合っているように思う。

[AWS][Ruby] EC2インスタンスなどのリソースにtagを追加する方法

AWSのRuby SDK version3での話。

Gemfileに下記を追加して、

create_tag methodを呼べば良い。Resouceで各リソースのID系を入れればうまくやってくれそう。

[Rails] Bitwise Operator(ビット演算)を用いた曜日の管理

Cronのように曜日を指定してジョブを発動するスケジューラを作成していて、外部にこれを保持するテーブルを作るのはセンスがないし、mondayからsundayのカラムを作るのも無駄に感じたので、ビットを使って曜日を表現し、これを用いて曜日の判別をしようと思いました。 Railsでビット演算を用いたチェックボックスのフラグ管理をしてみたを多いに参考にさせていただきました。

具体的には下記のように表現します。

  • 月曜日 0b1
  • 火曜日 0b10
  • 水曜日 0b100
  • 木曜日 0b1000
  • 金曜日 0b10000
  • 土曜日 0b100000
  • 日曜日 0b1000000

1100101の場合、月曜日、水曜日、土曜日、日曜日が選択されている状態です。 1バイト以下の7bitで表現できるのでメモリにもストレージにも優しいですね。

Migrationファイルを作り、DBカラムwday作成。

View/Controllerは下記のようになりDBには整数で保存されます。

これを使う時に、&し判定します。 0でない場合は、曜日フラグが立っているということです。  僕の遠い昔のアセンブリ言語の記憶が正しければbitのAND計算は鬼早いはずです。

DBに対しては、月曜日にフラグがたってるRowを取り出すには、

ビットフラグの管理はアプリケーション側にその管理を要求するのしっかりドキュメントしておく必要がありますので、忘れずにコメントを書いておきましょう。

immutableJSのMapをredux-persistで保存できないときの対処法

以前説明したimmutableJSは簡単にimmutableオブジェクトを扱うことができるのでreduxのreducerで大活躍します。
normalizr風味のreducerを作る場合は、下記のようにimmutableJSのMapとListで簡潔に書く事ができます。

一つ問題があります。immutableJSはfromJSを利用するとMapオブジェクトでstateを保存します。これが、redux-persistを使うとMapで保存できないという問題です。redux-persistはtransformsという機構でserialize, deserializeを行うことができ、ここにモジュールを適用することで保存できるようになります。redux-persistのauthorであるr2tzz氏が提供するredux-persist-immutableがありますが、READMEの情報が少なくよくわかりません。他のソースを読むと、トップレベルでMapの置換を適用するようです。私の今回のreducerではnavというReact Navigatorのreducerがあるので、ここに適用する必要はないと思っていました。

Redux Persist Transform Immutable

Redux Persist Transform Immutableというものもr2tzz氏が提供しています。これは、reducerごとにシリアライズ・デシリアライズをできるものです。これはREADMEもしっかり書いてあります:)

では、実際のコードを見てみましょう。

使い方は、transformsのvalueにimmutableTransformを入れます。whitelist/blacklistで追加します。どちらかを指定すれば片方がいらないかもしれませんが、わかりやすくするためにwhitelist/blacklist両方いれています。React Nativeでの利用なので、storage: AsyncStorageはそのままです。 ちなみにpersistStore(..).perge()でstateを消去できるので、開発初期にはよく使うことになると思います。

Redux + immutable.js + Reselectでredux reducerを安全かつ簡潔にする

日本語の技術ブログを読んでいるとImmutable.jsでmodelを作り、そこにロジックを入れる方法が書かれてるものが多いですが、英語の情報をまでみてみると、それはどちらかというと特殊な方法で多くのところでReduxのReducerに導入しています。

今回は、後者の方法を説明していきます。

Immutable.js

Reduxのstateはimmutableで操作すべきであり、そのためObject.assign()slice等を駆使してReducerを書いていきます。問題はその方法が冗長であり、人によってES6を使わないなど書き方も違うのでコードが見にくくなります。これを解決するのがImuutable.jsになります。ドキュメントを見ると(Typescript前提で書かれてるドキュメントなので、知らないと非常に読み難い…)、便利な関数が沢山生えてます。setInなどの関数を使えば、Nestされているオブジェクトに一発でデータを挿入できたりします。そして、そのオブジェクトが常にImmutableであることを保証してくれます。

Immutablejsのreducerへの組み込み方は簡単で、InitialStateをimmutableJSで作れるだけです。

上記のstate.draft.standardsはImmutable.Mapオブジェクトとなります。問題はこれをtoJS,toArray, toObjectをコンポーネント内のRedux stateの呼び出しのmapStateToPropsで使うのがReduxのアンチパターンになっていることです。

This is a particular issue if you use toJS() in a wrapped component’s mapStateToProps function, as React-Redux shallowly compares each value in the returned props object. For example, the value referenced by the todos prop returned from mapStateToProps below will always be a different object, and so will fail a shallow equality check.

で、どうするか。ここで登場するのがReselectになります。

Reselect

Reselectは、キャッシュを持ち、変更があった場合だけ新しいオブジェクトを作成するような挙動を記述できます。これをmapStateToPropsに入れ込むことにより、アンチパターンを避けることができます。 具体的なコードは、

詳しくはREADMEや他の技術ブログを参考にしていただければと思いますが、標準の比較関数は単純なオブジェクト比較(===)を利用しているため、オブジェクトのkey/valueのペアまで比較できません。ここでlodashisEqualを使って、deep比較をすることにしている(今回の場合、shallowな比較(ネストされたものは比較しない)で十分ではあるがREADMEがそうなっているので))。createDeepEqualSelectorの最初の引数が、Input Selectorと呼ばれるもので、ここが以前のもの(キャッシュ)との比較対象です。isEqualコードを読んでいないが直感的にあまりnestしすぎない方が比較自体の計算量が少なくなって良さそうですね。

これをcomponentのmapStateToPropsで直に呼び出すのは、単純です。

これでreducer内でimmutablejsで快適にstateを操作できるようになりました!

2017年Python環境設定 – andaconda/virtualenv/cookiecutter/dotenv

1. Install anaconda / conda

condaによるポータブルなPython環境構築のすすめを参考にすると、(ana)condaが最近の主流とのこと。
下記にアクセスし、各OSのパッケージをダウンロードしてインストール。3系を使います。

https://www.continuum.io/downloads

あとでLinux上で動かす予定なので、なるべく依存関係を作りたくないので、pyenvの導入はしないことにしました。

2. Create virtualenv

Rubyのbundler相当なのが、virtualenvらしいので、仮想環境を作り、その環境に入る。

3. Install packages

基本、conda installでパッケージを入れていくだが、パッケージがないことも多く、そんなときは、conda-forgeを入れるようになるので、最初から追加しておく

とはいえ、virtualenv変更後はpipでも良いので、 conda installでなかったら、pip installみたいな感じ。

virtualenvでのパッケージはcondaで管理できるので、新しいプロジェクトをコピーするときは、下記のようにexport/importする

(参考)http://qiita.com/Hironsan/items/4479bdb13458249347a1

4. Create Project

調べてみるとプロジェクトのディレクトリ構造の自由度が高い。
つまり、人々が各々ディレクトリを作ったり、ファイルを作ったりしている。それがフレームワークを使ってる私みたいな人には、非常に気持ちが悪い。
プロジェクトの雛形が欲しいので、調べるとcookiecutterというのがあるのでそれを使う。

今回はデータサイエンス用のテンプレを使用しているが、テンプレートはpythonだけでなく多言語のもある。
詳しくは、githubのcookiecutterを参照してほしいが、
下記のようなboilerplateができるので自分で考えなくてよいのは非常によい。

作成方法は、

プロジェクト名のディレクトリが作成されるので、そこに入り、パッケージをインストール。

5. python-dotenv

Githubに載せたくないAPIのキーなどを管理する
cookiecutterのテンプレートにあるのに、requirements.txtにないのでインストール。

使い方は、下記のような感じ。

以上が、色々なページを参考にして構築した環境です。
こういうのって時間がかかるので、参考になれば幸いです。

[React Native] HTTP requestのRetryを実装する

Mediumに英語のエントリRetry POST request when it’s failed on React Nativeを書いた内容と同じですが、地下鉄で地下に潜るとreact-native-oauthmakeRequestが失敗するケースが発生しました。Twitterの2つ目の投稿が投げられていなかったり、FBへの投稿も落ちていました。そこで、リトライするコードを書きました。

Async Retryを使います。これはnode-retryをラップしたもので、例がシンプルで良さそうだったので使います。(async/awaitの文法にも慣れているので)

問題なくインストールできます。そして、コードは、下記のような感じ。

2つ目の引数にnode-retryのオプションを書いてくイメージです。今回はエラーハンドリングは特にしないで5回リトライする単純なコードです。iphoneのデベロッパーのところにある”Very bad network”で試したところ、コンソールに数回トライしているのを確認しました。(Testをうまく書けるのかな。。)

以上、リトライを実装したい方は参考にしてみてください。

[React Native]日本語環境下で日本語が垂直のセンターを取れない問題(vertical-align: middle)の対処法

地味に辛いこの問題。vertical-align: middle問題。 iOSが英語環境(設定 -> 一般 -> 言語と地域が英語)の場合は問題なくセンターとれるのですが、日本語環境にするとflex-startみたいにpaddingTopがゼロになってしまう問題があります。やっかいなのは、paddingで調整するとAndroidはこの問題がないため表示がずれます。。

コードはボタンだったら、下記みたいな感じ。ボタンに限らず、この問題はおきていると思います。

解決方法は、fontサイズと同じViewでラップする。(試行錯誤後、閃きました)

Scroll to top