VOYAGE GROUP エンジニアブログ

voyagegroup_techのブログ
VOYAGE GROUPエンジニアブログです。

2012年08月

お手軽Androidプログラミング入門

はじめまして、2012年新入社員のPeX菅谷です。

エンジニアブログなので技術的なお話メインで、ということらしいのですが・・・
いかんせん経験・技術力の無い僕は書ける内容が少なくて困りますねorz
 
とりあえず今回は、僕がお遊びでAndroidアプリを作るときどのようにしているかをお話したいと思います。
内容的には入門の入門くらいの初歩的なものになりますので、Android書けるよ・書いてるよという方々には益の無いお話になるかもしれません。予めご了承ください。

さて、プログラミングを始めようとするとき、みなさんはまず何をしますか?

僕はサンプルコードを探します(笑)。
勉強や業務でプログラムを書くのでしたら、一から学んで、設計して、コツコツ作って・・・とやるのですが、
趣味で書く場合にはとりあえず早く動かしてみたくてサンプルコードを探します。

そこでサンプルコードの探し方なのですが、普通だったらきっと皆さんググりますよね。
そしてよさげなものがあったらそれを読んで、使えそうな部分を参考に書いたりするんじゃないかなと思います。

ところがAndroidでは・・・

開発環境の構築時、Android SDKディレクトリの中に大量のサンプルコードが何気なくダウンロードされているのです。
これが結構充実していて、こういう機能使いたいなーと簡単に思いつくようなことは、およそ網羅してくれています。 
AndroidアプリはIDEで開発するのが一般的なためsdkディレクトリ内を見ることが少なく、見落としている方もいるんじゃないかと思います。
Windowsならばデフォルトではおそらく、
C:\Users\ユーザー名\AppData\Local\Android\android-sdk\samples\android-○○
に存在すると思われますので、是非使ってみてほしいと思います。
Macの場合は・・・探してみてくださいorz 

僕が最もよく参照するのが,Android APIの利用例を集めた『ApiDemos』というアプリです。
この中には、
  • アクティビティの操作
  • 画面レイアウトやボタン、ダイアログの使い方
  • 各種センサ、カメラの使い方
  • ViewやOpenGL、アニメーションなどグラフィックス関連の機能 
といった基本的な機能のサンプルや、
  • Webブラウザ
  • 動画プレイヤー
  • 画像ビューア
  • ペイントツール
などのように凝ったものまで、大小様々なサンプルが200個弱ほど存在します。
まずはこれらを見てみることで、何ができるのか、どうすれば良いのかがある程度把握出来ると思います。

また,Android SDKのバージョンにもよりますが、ApiDemosの他にもう少し複雑なものや完成度の高いものが数十個ほど用意されています。
例えば、USB,BlueTooth,Wi-fiなどの通信のサンプルやゲームのサンプルなどがあります。

これらを参考に機能を組み合わせ、足りない部分はIDEの補完機能にお願いしてしまうだけでわりと簡単に色々なものができます。

勿論、もっと複雑なものを作るには不足している部分は多々あるでしょうが・・・。
「よくわかんないけどAndroid触ってみたい!」とか「なんかちょこっとスマホで作ってみたい!」という方々には、是非お試しいただきたいなと思います。

さて、あまり技術的なお話にならなかったので、代わりと言ってはなんですが実際にちょこっと開発をしてみました。
ApiDemos中のTouchRotateというサンプルをチラ見しつつ、我らがアイドル「ナビック」くんと戯れるアプリ『なびっくいじり』をさくっと作ってみました。

このアプリではナビックくんを突っつき回して遊ぶことができるのです!楽しい!

navic_01navic_02navic_03

こんな可愛らしく楽しいアプリをさっくり作れるのもAndroidの楽しさの一つですね!

Google Playにて公開予定ですので、 「遊んでみたい!」という好奇心旺盛な方がいらっしゃいましたら「なびっくいじり」で調べてみてください。
※SO-01C(Android 2.3.4), SO-04D(Android 4.0.4)のみ動作確認済みです。

皆さんも、意外と簡単なAndroidアプリ開発に挑戦してみてはいかがでしょうか?
ご清覧ありがとうございました!

もの創り実践プログラム「Treasure2012」始まりました!

こんにちは。
VOYAGE GROUP 人事の佐々木寛(@339)と申します。

夏のインターンシップ「もの創り実践プログラム【Treasure】」が8/13(月)スタートしました!
top_trebtn_off


今年の【Treasure】は「チーム開発」、「ユーザ視点」という二つのテーマで開催しています。
昨年までのゼロからプログラミングを学ぼうという内容からリニューアルして、三週間でエンジニアとして圧倒的に成長してもらいます。


今年のテーマ「チーム開発」と「ユーザ視点」について。
・チーム開発
授業や趣味で一人では作ったことがある。グループで課題をこなしたことがある。そんな学生に仲間と共にアイデアを出しながらサービスを創ってもらいます。
仲間と話しながら一人では考えもつかなかったようなアイデアを出したり、一人では創りきれないような大きなサービスをチームで創り上げることにより、私達が大事にしている「仲間と事を成す。」ということを体感してもらいます。

・ユーザ視点
自分や友人が使うだけのシステム、課題で言われて作ったシステムではなく、"どんなユーザにどんな風に使ってもらうのか?"を考えながらサービスを創る。そのための考え方や経験を積んでもらいます。
誰のために、何のためにそのサービスを創るのか。本気で考え抜くなかで「本質を追い求める。」力を身に付けてもらおうと考えています。



さて、その【Treasure】ですが、本日で開始してから3日目、前半の講義も中日となりました。
これまでの講義内容は・・

▼初日
・ガイダンス
・環境構築

▼二日目
・バージョン管理
・webアプリケーション

▼三日目
・プロジェクトマネジメント

となっています。


初日は比較的余裕そうだったTreasure生達も、二日目、三日目と講義・課題の内容もどんどん濃く、難しくなっていく中で目の色を変えて真剣に取り組んでいます。

Treasure2012



越えなければならない壁は高く見えますが、この壁を乗り越えた後に見える景色はきっと素敵なものとなっているでしょう。



挑戦し続け、最終日には仲間と共に「やりきった!いいものを創った!」と心の底から笑顔で言えるTreasureを今年も20名のインターン生と総勢25名の講師・サポーターを始めとした運営スタッフで創っていきます!
今年はどんなアウトプットが出てくるのか、本当に楽しみです!
 

Behatでケータイサイトの受け入れテスト

はじめまして、株式会社Flesselの田中と申します。

私は長いことケータイサイトを作る仕事に関わってきました。
縮小傾向にあるフィーチャーフォンですが、まだまだ現役です。

このエントリーではPHPのストーリーテストツールBehatを利用して、
ケータイサイトの受け入れテストを行う方法をご紹介します。

インストール
今回は対象となるプロジェクトにcomposerを使ってBehatを組み込む方法をとります。

まずはcomposerをインストールします。
curl -s https://getcomposer.org/installer | php
※CentOS環境だと証明書の関係で動かないことがあります。

次にcomposerの設定ファイルであるcomposer.jsonをプロジェクト直下に作成します。
今回はBehatともにMinkというブラウザテストの抽象化ライブラリを使うので、これも一緒に設定します。
{
    "require": {
        "behat/behat": ">=2.4@stable",
        "behat/mink":  "1.4@stable",
        "behat/mink-extension": "*",
        "behat/mink-goutte-driver": "*"
    },

    "config": {
        "bin-dir": "bin/"
    }
}
composer.jsonが用意できたら、インストールコマンドを叩いて依存するライブラリをインストールします。 
php composer.phar install
これでvendorディレクトリの中にbehatがインストールされ、binディレクトリにbehatコマンドができます。
(※2012年8月3日現在、依存関係が解決できずにインストールが失敗するようです)

プロジェクトの初期化
behatがインストールされたのでbehatが利用するファイルを初期化します。
bin/behat --init
これでプロジェクト直下に下記のファイルが作成されます。
features/bootstrap/FeatureContext.php
このファイルにテストコードを記述することになります。

フィーチャー定義を用意する
フィーチャーとはアプリケーションが持つ個別の機能のことです。Behatでは各フィーチャーごとにテストシナリオが書かれたファイルを用意します。
このファイルは拡張子をfeatureとしてfeaturesディレクトリに配置します。

各ファイルは自然言語に近い記述で書きます。
今回は次の定義をsearch.featureとして作成しました。
# language: ja 
フィーチャ: 検索機能
  欲しい商品を見つけるために
  ユーザーとして
  商品を検索できる

  背景:
    前提 au端末で接続する

  シナリオ: カメラを検索する
    かつ"/" を表示している
    もし"keyword" フィールドに "camera" と入力する
    かつ"検索" ボタンをクリックする
    ならば"「camera」の検索結果" と表示されていること
    かつ"「camera」ランキング 1位" と表示されていること

  シナリオ: ヒットしない単語で検索する
    かつ"/" を表示している
    もし"keyword" フィールドに "fak;efalkjekd" と入力する
    かつ"検索" ボタンをクリックする
    ならば"ご指定の検索条件に該当する商品はありませんでした。" と表示されていること
日本語で書かれていてとてもわかりやすいと思います。
各シナリオの「前提」からはじまる行以降はステップと呼ばれ、テストはこのステップごとに実行されていきます。
ステップ中のダブルウォーテーションで囲われた文字列が変数として扱われます。

さて、ここで一度テストを実行してみます。
step01
黄色くなっているところがテストが未実装なステップです。また、下の方にテストを実装する際のスニペットも表示されています。
通常はこのスニペットをコピペしてテストを実装していく流れになります。


MinkContextを利用する
単純なブラウザをつかったテストであれば、今回一緒にインストールしたMinkExtensionが提供するMinkContextを用いると自分でステップを実装せずにテストすることができます。
MinkContextが提供しているステップについてはbehat -diコマンドで参照できます。日本語のステップについては https://github.com/Behat/MinkExtension/blob/master/i18n/ja.xliffで確認できます。

便利なMinkContextを利用するにはFeatureContext.phpに次の修正を加えます。
--- features/bootstrap/FeatureContext.php.orig  2012-08-02 08:01:36.000000000 +0900
+++ features/bootstrap/FeatureContext.php       2012-08-02 08:03:03.000000000 +0900
@@ -7,6 +7,8 @@
 use Behat\Gherkin\Node\PyStringNode,
     Behat\Gherkin\Node\TableNode;
 
+use Behat\MinkExtension\Context\MinkContext;
+
 //
 // Require 3rd-party libraries here:
 //
@@ -17,7 +19,7 @@
 /**
  * Features context.
  */
-class FeatureContext extends BehatContext
+class FeatureContext extends MinkContext
 {
     /**
      * Initializes context.

また、次の内容のbehat.ymlをプロジェクトルートに作成します。
# behat.yml
default:
  extensions:
    Behat\MinkExtension\Extension:
      base_url: 'http://example.com/'
      goutte:    ~

base_urlにはテスト時にアクセスするサーバーのベースURLを設定します。

ここでテストを実行すると次のようになります。
step02
「au端末で接続する」というステップ以外は青になりテスト実装が加わったことがわかります。

独自のステップを実装する
「au端末で接続する」はケータイサイト特有のステップですから当然提供されていません。
今回はau端末での接続をau端末のUser-AgentとEz番号をHTTPヘッダにもつという条件として定義します。

これのステップの実装は次のようになります。
    /**
     * @Given /^au端末で接続する$/
     */
    public function au端末で接続する()
    {
        $this->getSession()
        ->getDriver()
        ->getClient()
        ->setServerParameters(['HTTP_USER_AGENT' => 'KDDI-CA39 UP.Browser/6.2.0.13.1.5 (GUI) MMP/2.0']);
        $this->getSession()->setRequestHeader('x-up-subno', '10msimmsim000_vr.ezweb.ne.jp');
    }
MinkContextを利用している場合にヘッダを設定するにはx-up-subnoを設定しているように$this->getSession()->setRequestHeader()を用いればよいのですが、
今回ブラウザの実装として利用しているGoutteがsetRequestHeaderを通したユーザーエージェントの書き変えに対応していないためこのような形になっています。

実行する
それではすべてのステップの実装ができたのでbehatコマンドを叩いてテストを実行してみます。
step03
すべてのステップがグリーンになりました! 簡単ですね!

まとめ
Behatでは自然言語に近いフィーチャー定義を利用するので、エンジニア以外でもテストの概要を把握することができます。
しかも、MinkExtensionと組み合わせることで容易にブラウザテストをできるのは大変魅力的です。
皆さんもぜひ使ってみてください。
記事検索
QRコード
QRコード