Android担当のseitoです。最近弊社ではCordovaを使ったアプリ開発に力を入れています。

今回はそのCordovaでCIを回したくてDocker+werckerでCI環境を作ってみました。

ざっくりとした手順は

1 werckerで呼び出すDockerイメージの作成

2 作成したDockerイメージをDocker Hubへプッシュ

3 wercker.ymlファイル作成

です。

 

1 werckerで呼び出すDockerイメージの作成

Docker Toolboxが入ってる前提で進めます。
まずはベースとなるOSを取得します。
Docker Quickstart Terminalを開きます。今回はCentOS6をベースにします。

docker pull centos:centos6

ダウンロードが始まります。しばらく待っているとダウンロード完了。
実際にダウンロードできたのか確認します。

$ docker images
REPOSITORY                TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
centos                    centos6             2f96ee8baf17        2 weeks ago         228.9 MB

無事できました。
次に先ほど取得したイメージからコンテナを作成します。

docker run -it centos:centos6

上記コマンドを実行すると作成されたコンテナ内のターミナルが開かれると思います。
実際にコンテナが起動しているか確認してみます。ctrl+p+qを押すとコンテナを起動したままコンテナ内のターミナルからexitできます。
コンテナが起動しているか調べます。docker psを使います。

$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
a6f43b17c7e5        centos:centos6      "/bin/bash"         17 seconds ago      Up 16 seconds                           evil_hypatia

コンテナが起動してるのがわかりますね。
それではこのコンテナにモジュールを色々入れていきます。今回はCordovaでionicというフレームワークを使用しているので
ionicコマンドが打てるようにしたいです。
なので今回は
・node.js
・npm
をインストールして
・cordova
・ionic
です。それでは再びコンテナに入ります。
起動しているコンテナに入る時はdocker attachを使います。

$ docker attach a6f

ログインできました。
次にnode.jsをインストールします

# rpm -Uvh https://rpm.nodesource.com//pub_4.x/el/6/x86_64/nodesource-release-el6-1.noarch.rpm

現時点で生きてるrpmです。

# yum install nodejs

インストール後、動作確認します。

# node -v
v4.4.3

問題なさそうです。
続いてnpmも入れます。

# yum install -y npm

動作確認します。

# npm -v
2.15.1

後はnpmでcordovaとionicを入れるだけです。

# npm install -g cordova
# npm install -g ionic

ionicコマンドが打てればOKなので確認

# ionic -v
1.7.14

できました。
それではこのコンテナをイメージにしたいと思います。
docker commitを使います。
一旦ctrl+p+qでコンテナから抜けます。

$ docker commit a6f plusrseito/sample

イメージ名は適当です。
イメージの確認を行います。

$ docker images
REPOSITORY                TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
plusrseito/sample         latest              40775aeb5d44        21 seconds ago      631.8 MB

これでDocker Hubへ上げるコンテナができました。

2 作成したDockerイメージをDocker Hubへプッシュ

できたコンテナをwerckerから呼び出せるようにDocker Hubへ上げます。
Docker Hubのユーザ登録手順は省きます。

まずログインします。

$ docker login

docker pushでローカルにあるイメージをDocker Hubへあげます。
先ほど作ったイメージをあげます。

$ docker push plusrseito/sample

今更ながらもうちょいまともな名前にすればよかった。
コマンドを叩くとアップロードが始まります。
作ったイメージのサイズによりますが、けっこう時間かかります。
完了したらDocker Hubのダッシュボードでイメージが上がっているか確認します。

スクリーンショット 2016-04-20 11.14.47

無事アップロードできました。既に2回プルされてるのは何だろう?と気になりつつもスルーします。

3 wercker.ymlファイル作成

前提として、対象プロジェクトのリモートリポジトリをwerckerと関連付ける作業が終わってるものとします。

実際にCordovaのプロジェクトで作ったDockerイメージを使っていきます。
Cordovaのプロジェクト直下にwercker.ymlを作成します。

wercker.yml

box: plusrseito/sample
build:
  steps:
    - script:
        name: check ionic version
        code: |
          ionic -v

今回はサンプルなのでバージョンチェックのみです。
wercker.ymlを追加したら変更をコミット・プッシュします。
werckerの対象プロジェクトのページでCI状況を確認します。

スクリーンショット 2016-04-20 11.24.51

スクリーンショット 2016-04-20 11.27.36

ビルドに成功してますね。
これで自分で作ったDockerイメージを使ってwerckerでCIする環境が整いました。

注意点として、wercker.ymlに記述するコマンドは一度Dockerコンテナ作成中に試しておくことをお勧めします。
ionic state resetやionic build等を使ったときにnpmパッケージが足りないというエラーが出てはまりました。
docker run でvオプションを使うとローカルディレクトリとコンテナ内のディレクトリを同期できるので、自分はその方法で
プロジェクトを取り込み動作確認してからDocker Hubに上げるようにしています。

それでは良いCIライフを。

チーム開発を一つの生産機関だとすると、
企画→仕様化→実装→テスト→リリース→改善
みたいなサイクルになります。これを最大化するにはどうすればいいか?

結論から言うと
「何かしらの尖った開発スタイルを持つ」
だと思ってます。
最大化、なんていう発想でいると、全方位なんとなく改善、みたいになります。
戦ってる市場に合わせて、「何の領域を高めるのが一番勝てるのか?」を考えてスタイルを構築するのが重要。

先日、あるエンジニアが、本人がターゲットユーザのど真ん中だったこともありますが、土日でささっと機能追加をしてきました。で、このクオリティが非常に高い。

以前から、
(ユーザ側担当者が)仕様を決めて→(エンジニアが)実装して→(ユーザ側が)テストして→(エンジニアが)直して
これがもうほんとーーーに遅い。遅すぎる。
とキレてました(実際は全然怒ってないですがw)。
そんな日常の悩みを吹き飛ばしてくれるクオリティでした。
え、こんなのが速攻で作れんの…?と思いました。

エンジニアとユーザ側の間にいるディレクターとしてはなかなか悔しい話でもあるんですが、一つの「高い開発力」はこういうことだと思います。
すなわち、「ユーザ側」と「エンジニア」が「同じ人」であること。
生産性と儲ける力で圧倒的存在になってる前職開発の教えの一つが、「なるべく一人の把握範囲を増やす」でしたが、それを思い出しました。
それだよ…!と8回ぐらい言ってしまった。

スマホアプリのUXで勝負するような開発は、作ってもすぐ真似しあってて、レッドオーシャンです。
できれば、一度制覇したらしばらく勝ち続けられるアプローチにしたいところですよね。

時々起きる奇跡のような生産性を何とか常態化し、一定の開発ノウハウ、開発スタイルを確立していきたいところです。
そうすれば「意外と結構勝てるはず」なんて思っています。

弊社の採用募集枠タイトルの一つに
月曜日が楽しみになる仕事、しませんか?
というものがあります。

とあるメンバーが考えたコピーで、弊社の長所をよく表現している物だと思いますが、
これは、自分がちょくちょく零している
「平日が終わってしまった…早く月曜にならないかな…」
等のつぶやきを元にした物とのことでした。

自分は以前、ガチガチの「効率と結果を追求」する組織にいました。
それはそれで、刺激や成長や興味や面白い人が多く、非常に濃い時間だったのですが、
約束を守り責任を果たしきれるかといった不安、競争から逃げたい気持ち、等から、
日曜や月曜朝はかなり憂鬱でした。
休み明けが辛い、というのは多くの方が経験している感覚だと思います。

では、現職になって仕事量がそんなに変わったのか?
というと、そうでも無いです。
共働きに変わり育児の時間が増えた分、もしかすると減っているかもしれませんが、
通勤の間や家にいる時間も、「完全に前向きな気持ちで」
かなりの時間、仕事のことを考えていたり、実際に手を動かしていたりします。
こんな考え方もできる。いろんなことを試したい。。等。
そして、実際に仲間と一緒に働ける金曜が終わってしまうのは本当に寂しいし、
月曜がくるのは待ち遠しいです。

ベンチャーならではの柔軟な働き方が前提にある、心構えですね。
(この辺りは、社長のブログにもイメージが書いてありますね)

ところで、技術者として
「どんな時に夢中で動いていられるか」
というのは、とても大事な要素だと思います。
早く実物にしたい、改善のプロセスが好き、議論が好き、
快適な場所でずっとコードを書いていたい…等々。

僕は、この要素が、技術者としての強みを決定づけていると考えています。
トラブル解決こそ真骨頂な人、
コードの美しさの為なら早出残業など厭わない人、
プロトタイプを出す速さがとんでもない人、
何でもできて話が早く遊び心溢れる人、
絶対の安定性で計画を全く落とさない人、、
こういう傾向は、「仕事で何をしている時が一番楽しいですか?」という質問をした時の答えと、
無意識だと思いますが、面白いぐらい繋がっています。
言語や技術領域ではなく、役立ちの種類が人それぞれの仕事のタイプと感じます。

そして、こういった「夢中からくる強み」が、「仕事の中心」になっているか。
これが、「日々の仕事が楽しいか」を決めていると考えています。
夢中でやれることなら、オンオフなんて関係なくなりますよね?
で、実際に成果、出ますよね。

マネージャーとして、成果が出る上にメンバーが夢中で働ける、
という形は理想です。
常にこれを目指して、課題設定、目標設定、開発ディレクション、日々の議論、
日々の雑談(?)、、をやっているつもりです。
新卒エンジニアへ ということは、既にどこかに就職している皆様かと思いますが(笑)、
「本当にこれが生産的なのか?」等自分の働き方に不安を感じたら。
ぜひ一度弊社エンジニアの顔色でも見にきてみてください(ドヤ顔)

最後に
「こんなCTOがいる職場で働きたい」っていう観点、いいですよね。
就職先選びの決め手は、
職種や業種や業務内容や条件ではなく、絶対、
「どんな人と働けるか」
ですよね。
wantedlyは「とりあえず会ってみる」ができる素晴らしい仕組みだと思います。
(企業側は結構大変ですが(笑))

(※この記事はwantedlyのブログ用に作成したものです)

こんにちは。Android担当のseitoです。最近Web開発のお手伝いを始めました。

個人でホームページ等作ったことはありましたが、業務で携わるのは初めてでできるだけ足手纏いにならないよう頑張りたいと思います。

 

さて、今日はWeb開発用に作成したVMの挙動ではまった話です。

環境

・VirtualBox 4.3.28
・CentOS 5.11
・Vagrant 1.7.2
・Apache 2.2.15
・SublimeText 2
・PHP 5.3.3

 

現象

・CSSの更新が画面に反映されない
・更新したCSSファイルの末尾に謎の文字化けが
スクリーンショット 2015-07-17 17.35.01

 

文字化けしてることからエンコード形式が原因だと思いSublimeText2のエンコードを確認。

UndefinedになっていたのでUTF-8でエンコードし直して再度確認。。。

が改善されず。VMに入ってviでファイルを確認しても文字化けしていませんでした。

色々試していると、どうやら文字化けというよりキャッシュまわりが怪しそうな動作でした。

ぐぐってみるとドンピシャの記事を発見しました。

 

対策

この記事を元に

<Directory /var/www/html/>
    ・・・

    EnableMMAP Off
    EnableSendfile Off
</Directory>

Apacheサーバのドキュメントルートに対してキャッシュを無効にする設定を行いました。

そのあとApacheを再起動し、スーパーリロードしてあげるとCSSが反映されました。

CSSがまったく更新されなければキャッシュだと気づいたかもしれませんが、文字化けが発生するのが原因究明を遅らせました。

 

Webエンジニアへの道のりは険しい・・・

株式会社プラスアールでは、エンジニア職(PHP、iOS、Android)を募集しています!
http://www.plusr.co.jp/recruit/programmer

弊社求人へ、先日公開して反響の大きかった「数独問題」を解き応募していただけた方へ
今回はKindle新モデルをプレゼントいたします!

kindle

数独問題にて求人へ応募する場合は、回答メールアドレス宛に
解くのに用いたプログラムソースやgithubリンクを添付しご連絡ください。
数独問題を解いて応募いただいた方は書類選考なしで、面談へお進みいただけます!
日程調整後、採用面談へ来ていただく際にKindle新モデルをお渡しいたします。

[問題]「16×16数独」

一般的に数独は3×3のマスが3×3、つまり9×9配置されますが、
4×4のマスが4×4、つまり16×16の盤面でも遊ぶことができます。
使う数字は1-9の9個ではなく、1-16の16個になります。
16といえば16進数ということで、0-9A-Fの16個の「数字」で数独問題を用意してみました。

ルール
・一つの列には0-9A-Fの一つずつが入る。
・一つの行には0-9A-Fの一つずつが入る。
・太枠の4×4にはそれぞれ、0-9A-Fの一つずつが入る。
※ナナメやその他のグループに制約はありません。

16×16 数独問題

上の空欄を、上記ルールに従って全て埋めて下さい。
埋め終わったら、左上から右下までの対角線(黄色い部分)の文字列をメールアドレスとして、
xxxxx7xxx6xxxxxx@plusr.co.jp までご応募下さい。(xに答えが入ります)
また、埋まった全ての盤面(csvでも画像でも構いません)と、
解くのに用いたプログラムソースやgithubリンクを添付して下さい。

※面接の日程についてはメールで調整致します。
※求人の定員に達し次第終了しますので、解けた方はすぐにご連絡下さい。

 

plusr_top-500x142

プラスアールは、健康情報&相談サイト「カラダノート」や、スマホでカラダの悩みや不安を解消するためのスマホアプリを、「カラダノート」シリーズとして両OS合計で60アプリ以上提供しております。

月間300万人以上の方にご利用いただいており、
シリーズ内の人気アプリ「妊娠なう」「陣痛きたかも」「血圧ノート」「お薬ノート」などは、AppStore/GooglePlay共にランキング上位に長らくランクインしております。

ユーザー視点の運営手法が注目され、東洋経済の新成長ビジネス100にも取り上げていただき、日経新聞にも度々サービスが紹介されるなど、多方面から注目をされているヘルスケアベンチャーです。

各アプリともにユーザーレビューも高く、感謝の声を多数いただいております。
”助けられています!”という声を多数いただけるサービス企画・開発にあなたも加わってみませんか?

ヘルスケアサービスに特化して事業を行っている会社なので、社員の健康を第一に考えています。
・体への負担の少ないバロンチェアの導入
・腰やふくらはぎのマッサージ器完備!
・血圧計やストレスチェッカー、高性能な加湿空気清浄機の導入などを積極的に行っています。
・月曜朝には健康を意識したおめざをご用意
・淹れたてのコーヒーや果実酢、ミキサーで作ったスムージーなどが飲み放題!

詳しくはこちらから。
http://www.plusr.co.jp/recruit/programmer

少しでも気になった方は是非一度面談へいらしてください!
詳しくお話させていただきます。
もちろん数独問題ではなく、応募いただける方も大歓迎です。

それでは、ご応募お待ちしております!

 

※前回の寝たままパソコンスタンドプレゼントは5名に到達し終了とさせていただきました。今回のプレゼントは求人応募の方限定とさせていただいております。ご了承ください。