CircleCI から Elastic Beanstalk にデプロイする

こんにちは、ギルドワークスの上野です。

ギルドワークスでは、開発したアプリケーションを Elastic Beanstalk を利用してデプロイ、運用しています。

EB CLI を入れることで、コマンドラインからデプロイすることもできますが、
自動化したいってなりますよね。
そこで自動化のやり方を調べたので、ブログにも書いておきます。

ちなみに自分のローカル環境に構築する際は、以下のコマンドで簡単にインストールできます。(python や pip がインストールされている前提)

pip install awsebcli

ですが、僕の環境ではどうもアップデートが上手くできなくて、いろいろいじってたらぶっ壊れて動かなくなったりしましたw
brew で入れたら今のところ安定しています。

brew install awsebcli

1. circle.yml の設定


machine:
  python:
    version: 2.7.6

dependencies:
  pre:
    - pip install awsebcli

deployment:
  staging:
    branch: master
    commands:
      - eb deploy [env環境名]
  production:
    branch: production
    commands:
      - eb deploy [env環境名]

staging、production や branch の指定は任意です。
CircleCI の設定はこれだけです。

参考までに

CircleCI は結構いろんな指定ができるので以下の内容も確認してみてください。
https://circleci.com/docs/configuration

2.config.global.yml の設定

.elasticbeanstalk の下に config.global.yml を作成します。


global:
  application_name: [アプリケーション名]
  default_region: ap-northeast-1

application_name は Beanstalk を作成する際のアプリケーション名です。

3. CircleCI の設定

最後に CircleCI の設定に AWSのアクセスキー等を設定します。

Project Settings の AWS Permissions の中です。

スクリーンショット 2015-12-15 18.57.41

あとは、指定したブランチにマージされるとデプロイされます。
めっちゃ便利ですね。

ギルドワークスではデプロイの徹底的な見直しを通じて、「正しいものを正しくつくる」を実現しようとしています。コーチや開発など、お手伝いできることがあればぜひ、お問い合わせください

 

React Native を試してみる

こんにちは、上野です。
週末開発合宿を行ってきました。
その中で React Native によるアプリ開発にチャレンジしてみました。
一部では既にReactは大変という声もあったりしますが、ネイティブアプリも作成できるツールはあまりないので結構期待しています。
(最近 Androidアプリ も作れるようになりました)

そんなわけで今回は React Native の環境構築について書いてみます。

事前準備

Macでのインストールを前提としています。

  • Xcode
    App Storeから最新版をインストールしましょう。
    Xcode をインストール後 Command Line Tools も入れてください(最新だと自動で入るようです)
  • Homebrew
    まだインストールしていない方は以下のコマンドを実行してください。

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    既にインストール済みの方は以下のコマンドで最新化してください。

    brew update

React Native インストール

まずは Node をインストールしましょう。

brew install node

今回は割愛しますが Node のバージョン管理をしたい方は nodebrew を入れてください。

続いて、Watchmanflow を入れます。

brew install watchman

brew install flow

そして、react-native-cli を入れて完了です。

npm install -g react-native-cli

これで以下のコマンドが使えるようになっているはずです。

react-native

プロジェクトの作成

それではプロジェクトを作成しましょう。

react-native init [プロジェクト名]

実行すると Installing react-native package from npm… と表示され各種ファイルが生成されます。

iOSフォルダ内にある [プロジェクト名].xcodeproj を実行しましょう。
あとはシュミレータを実行するだけです。

スクリーンショット 2015-10-20 23.25.27

init で生成されたものが起動されましたね。

どんなコードかと言うと以下のような形です。
index.ios.js を開いてみましょう。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var testPj = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('testPj', () => testPj);

CSSも入っているのでちょっと長めですが、iOSのアプリ開発を知らなくてもこれをみればなんとなくわかりますよね。

createClass の中を修正して、シュミレータで Command+R をすると更新されます。
ブラウザで開発しているのと同じように開発できて便利ですね。
また、自動で更新するようにも変更が可能です。

いかがだったでしょうか。
React Native を使うとアプリ開発をしたことなかった人でも入りやすいのではないでしょうか。
興味を持たれた方はぜひ試してみてください。

ギルドワークスでも新しいチャレンジができるお仕事のご相談や、新しいチャレンジをしたいエンジニアと出会えることを楽しみにしています。
お気軽にお問い合わせください。

OS X El Capitan の新機能をみる

こんにちは、うえのです。
10月1日に OS X El Capitan がリリースされましたね。
アップル信者なので、早速アップデート(人柱)をしてみましたので、今回は新機能をみてみることにします。

先に言ってしまいますが、一番大きく変わったのはパフォーマンスです。
Yosemite からアップデートした直後に一番インパクトがあったのは軽い・早いという感覚でした。

Split View

スクリーンショット 2015-10-06 0.01.20

いままではフルスクリーンにすることはできたのですが、Split View で2つまで並べて表示することができるようになりました。

最大化?ボタンを長押しし続けるともう1つのウインドウを選択できるモードになるのですが、これが意外とわかりにくいですね。
iPhone 6s シリーズの 3D Touch も忘れがちですが慣れるまでは若干時間がかかりそうですね。

ただこの機能は要するにフルスクリーンを半分ずつできるようになったよみたいな機能なので、1つを解除するともう片方はフルスクリーンモードに戻るみたいな形なのでフルスクリーンと普通のウインドウを行き来するような人にはあまり使い勝手は良くないのではと。
個人的にはおそらく使わない気がします。。。

Mission Control

スクリーンショット 2015-10-06 0.10.20

Mission Control も結構変わっています。
ウインドウの配置位置も同じような位置に表示されたり、スワイプで他のデスクトップに遷移できたりと使い勝手が向上しています。
Yosemiteでは上部のデスクトップは常に表示された状態でしたが、El Capitanでは初期は文字だけにしてスペースを確保している感じでしょうか。

カーソル

写真は撮りにくいのでつけませんが、プロジェクターに接続したりして2画面にしたりするとよくカーソルが迷子になるのですが、カーソルを左右に揺らすとカーソルが大きくなって目立つようになりました。

これも地味に便利な機能ですね。
ただ、結構小刻みに振らないと大きくならないのでこの辺りはもう少し調整できると良さそうかなと。

新しい入力方式

ことえりにライブ変換機能が搭載されました。
どんどん入力していくと自動で変換されていきます。
しかもこの変換が意外と賢いのでこれだけでいけてしまいそうです。

個人的には候補の表示とか自動変換のタイミングがちょっと気持ち悪い感じはしていますが、Google日本語入力におさらばしてもいいかもしれません。

新しいフォント

4つの新しい日本語フォントが追加されました。
クレー、筑紫A丸ゴシック、筑紫B丸ゴシック、游明朝体+36ポかな

プレゼンテーションに個性をとありますが、使うかなはなんとも言えない感じ。。。

Spotlight

スクリーンショット 2015-10-06 0.31.09

今日の天気はみたいな形の自然な言語で結果を取得することができるようになりました。
六本木の今日の天気はとかでは出てこなかったの日本語はまだまだかな?

その他

他にもメモが強化されていたり、
全く使っていませんがメールはスワイプで削除できたり、
Safariはピンを使えるようになったりもしているみたいです。

アップデートしてみて

使えなくなるアプリとかがないか結構ヒヤヒヤしていましたが、今の所大きな問題点はありません。

唯一あったのは、開発中のサービスで Ruby の Puma というGEMを入れようとしたらエラーになりましたが、回避策がありました。

一応回避策をここにも記載しておきます。

gem install puma -v 2.13.4 — –with-opt-dir=/usr/local/opt/openssl

新しいOSが出ることによって新しいUIが出てきたりと新たな体験が増えることでいろんなチャレンジができるようになりますね。

ギルドワークスでも新しいチャレンジができるお仕事のご相談や、新しいチャレンジをしたいエンジニアと出会えることを楽しみにしています。
お気軽にお問い合わせください。

定期的に自分戦略を見なおしてみよう!

ギルドーワークスの上野です。

ギルドーワークスでは「自分戦略発見ラボ」というサービスを行っていますが、その中に「自分戦略ステートメント」というものがあります。

※ 自分戦略とは、自分のやりたいことを明確にし、それを実現ための手段を練ることです。
自分の仕事の道筋(キャリア)を発見するために、改めて自分の仕事や自分のいる会社のミッションなどを見つめ、自分のやりたいことを明確にし、それをどう実現できるかを考えます。

今回はこの「自分戦略」について書いてみます。

自分戦略ステートメント

「自分戦略」には2つの戦略と4つのエリアがあります。

戦略〜方針〜

  • やりたいこと(What)
  • なぜやりたいか(Why)

戦略〜行動〜

  • 今の強み・弱み(Now)
  • これからどう行動するか(How)

この内容を自分なりに書いてみることをオススメします。

初めて書く人はやりたいことは何か、そしてなぜやりたいのか。
1度書いた人は定期的にやりたいことは変わっていないか。

自分にとって今の強み・弱みは何かを知る。
強み・弱みを知ることで見えなかった方向性や強化したいことが見つかったりすることもあります。
それらを踏まえてどう行動していくかを伴うことで、自分の今後の歩み方も見えてくるのではないでしょうか。

1度書いて終わりではなく、定期的にアップデートしてみることで自分の変化を感じることもできるはずです。

仮説キャンバス

自分戦略ステートメント以外にも自分戦略を書き出すこともできます。

自分ができることをベースに仮説キャンバスを書いてみましょう。
(顧客に)どんな課題があるか。
どんな相手(顧客)なのか。
どんな課題に対する解決策があるか。
※ 自分のできることの整理にもなります。

自分戦略と同じく、自分の強みからどんな相手にどんな解決策を提供できるかということを考えると見えてなかった自分のできることが見えてきたりもします。

みなさんもぜひお試しください。

また「自分戦略発見ラボ」では以下のような方はお気軽にご相談いただけるサービスです。

  • 現在の会社・職場にこのまま居てもいいのかわからない
  • 自分のスキルをどう伸ばしていいかわからない
  • 現在の自分の仕事の状況に漠然とした不安がある

自分戦略を考えてみたいという方、自分戦略をどう考えていいかわからないという方もお気軽にご相談ください。

リモート開発のコミュニケーションで意識しておきたいこと

上野です。
今回はリモート開発におけるコミュニケーションの意識の仕方について書いてみます。

ギルドワークスでは開発を様々な地域の方々と組んで行っております。
基本的にオフィスに集まることがないので、東京の人でも実質はリモートワークになります。

そんなギルドワークスのリモートワークでの主なコミュニケーションはSlackです。また会話が必要な定例MTGなどはSkypeで行っています。

「コミュニケーションを取る」という意味では、この2つのツールでほぼカバーできます。しかし、ツールだけでコミュニケーションが成り立つわけではありません。

ネットワーク越しゆえ、意識してコミュニケーションを取らないとほとんど会話がないこともあります。
こういう状況が続くと「正しいものが正しくつくれていない」ことになります。

  • 誰が何をやっているのかわからない。
  • どうあるべきかわからない。

思い込みで作ってしまってプルリクで指摘されて違っていることに気がつけないということも起こりえてしまいます。

このような状況にならないために意識していることを上げてみます。

雑談できる場をつくる

仕様や機能のことだけを話しましょうとしても限界があります。
なので雑談したり、画像貼ったりという「席の隣同士でちょっと雑談する」ような場につくるようにしています。
常に雑談をし続ける場であるのではなく、他愛もない会話ができる場であることで、ここどういう機能でしたっけ?であったり、どうあるといいんだろうという議論をしやすくする狙いがあります。

定期的に顔を見て話す

直接会えるなら直接会える場を作りましょう。
遠距離であればSkypeでも構いません。
音声で話せばいいというわけではなく、カメラでお互いの顔を見て話すようにするのがポイントです。
文字だけでは相手の表情が分からず、実は困っていることがわからないこともあります。顔を見て話すことで意外と分かり合えることもあります。

最初に会いに行く

リモート開発だから会う必要がないことはありません。
一度対面で会って話をすることがプロジェクト開始後もコミュニケーションを取りやすいと感じています。
相手の顔を知る、相手の環境を知るというのは思いの外重要なことです。

こちらの記事も参考にしてください。
リモートワーク隆盛のいまこそ、パートナーに会いに行く

簡単なことが、意外とできなかったり
気が付くとコミュニケーションが止まっていたりというのがリモート開発では起こりやすいことだったりします。

ギルドワークスではリモート開発を行うにあたり上記のようなことを意識して開発を行っております。

私達と組んで熱く語り合い、「正しいものを正しく作る」仲間も募集しています。是非お声かけ下さいませ。

※アイキャッチの写真:https://www.flickr.com/photos/86979666@N00/8117046049/

heroku を活用する際のTips

上野です。

最近herokuを本番で利用する案件に携わっていまして、改めてTips的なものをまとめてみます。

Tips 1. 画面からConfig設定を変更する

知っている方は多いと思いますが、Configは画面から設定できるようになっています。
(昔はコマンドで行っていましたが。。。)

config

heroku の Settings から Reveal Config Vars を押すと内容の表示ができたり、Editで編集もできるようになります。

知らない人はぜひお試しください。

続きを読む