2014年3月27日（木⁠）⁠、レバレジーズ（⁠株⁠）主催のイベント【ヒカ☆ラボ】にて「RainbowApps現役講師によるiPhone＆Androidアプリ開発基礎講座！！」が開催されました。今回のセミナーでは40名程が参加し,アプリ開発で最初につまづく「基本のキ」をiPhone、Androidの両方で一緒に手を動かしながらクリアにしていきました。

セミナー中で作成したのは基本的なアプリですがアプリ開発のざっくりとしたイメージができました。今回はそのセミナーの様子をレポートいたします！

今回はボタンを押したら文字が表示されるだけのアプリを、iPhoneとAndroidの2バージョンで作成することでOSの差を理解すると言うセミナーでした。

本レポートの内容

• アプリ作りの大変なところとは
• iPhoneアプリをつくる
• Androidアプリをつくる
• まとめ：はじめてのアプリ制作で気づいたこと

アプリ作りの大変さについて

アプリ作りは、

• プログラミング言語を覚えなくてはいけないから大変

似ているようで似ていないので毎回つまずいてGoogleさんに聞かなくてはいけないです。

• iPhone→Objective-C
• Android→Java

• OSが違い、それぞれの特徴・フレームワークを覚えなくてはいけないから大変

• iPhone→iOS
• Android →Android

• 開発環境が異なるから大変

一つ一つの開発環境を使い慣れると簡単なのですが、機能も多いので使い方を覚えるまでが大変。

• iPhone→Xcode
• Android→Eclipse

そのため今回はシンプルなアプリを作って、iPhoneとAndroidの似ている所とそれぞれの違いを体験することを目的としてやって行きました。

iPhoneアプリの作り方

※当日使用したテキスト（iPhone版）はこちらのGitHub上にあります。

プロジェクトの作成

プロジェクトとはアプリに必要なすべての素材が入ったものです。今回はシングルビューアプリケーションを使用しました。七島さん曰く、シンプルなものから始めて付け加えて行くように発展させるほうがやりやすいと言うことでした。

ここでの「Bundle Identifier」はアプリを識別するための値。アプリの識別名は、ドメイン名などを逆にしたものを使用する事が多いそうです。ただ今回のようにお試しであれば適当で構わないとおっしゃっていました。

Xcodeの使い方

まずエリアの名前を覚えましょう

確かにエリアの名前がわからないと調べることも何もできませんね。

• ナビゲーションエリア：編集するファイルの選択
• エディターエリア：ソースなどの編集
• デバッガーエリア：ログなどの表示
• インスペクターエリア：UI部品などの設定
• ライブラリエリア：画像素材やUI部品の選択

シミュレータ

アプリの動作をチェックするものです。開発を進めるとシミュレータの動きが変わって行くことが都度確認できます。

アプリの見た目を作成しよう

まずは画像を使って見た目を作ります。

ブラウザで画像を保存し、ナビゲーションエリアにドラッグ＆ドロップしてインポートします。選択肢「Copy items into destination group's folder(if needed)」をチェックするとプロジェクトファイル内に素材がコピーされます。最初のころはこちらが便利です。

次にUIを作ります

ストーリーボードから素材を配置することで作って行くことができます。

メディアライブラリに素材があるのでドラッグ＆ドロップで背景を配置して行き、文字の表示はオブジェクトライブラリからラベルを使用して行きます。ラベルとはテキストを表示できるパーツです。

パーツは種類が多く、目当てのパーツを探すのが大変なので早めに名前を覚えて検索できるようにして行くことがポイントとのこと。そして、ラベルは色々調整が可能なので自分の理想に合わせて求める値に調整して行きます。

ボタンの配置もライブラリからドラッグ＆ドロップして、色、文字、サイズなど細かい調整をして行きましょう。

最後に動きの実装です

動きはビューコントローラにコードを書いて行くことで実装できます。まずはストーリボードのラベルとビューコントローラーのソースを紐付けします。これはcontrolキーを押しながら引っ張って行くことでソースを紐付けることができます。

ここからはコードを打って行き、完成です。

※コードについてはGitHub上の資料を参照してください。

習熟した人はここまで5分位でできてしまうそうです。そしてここから技術を発展させて行くには今回の最もシンプルなアプリの形から複雑に発展させていけば良いとおっしゃっていました。

Android版のアプリ

※Android版のテキストはGitHub上にあります。

Android版の流れはiPhone版とほぼ同じですが、多少違うところもあるので注意が必要です。

プロジェクトの作成

Package NameはBundle Identifierと同じようなもので、こちらもドメイン名などを逆にしたものを使用することが一般的なようです。そしてiPhoneと異なり、Androidの場合は対応するAndroidのバージョンやターゲットSDKを設定しなくてはなりません。でも初めての方はどちらもデフォルトでも可能です。そしてこの辺りは後からいつでも変えられますので、安心です。

今回はCreate ActivityをBlank Activityに設定して、もろもろの名前を決めていきます。色々最初から組み込まれているので便利そうですが、やはり初めはシンプルなものからスタートすることが良いようです。

まずエリアの名前を覚えましょう

まずはEclipseもエリアの名前と機能を覚えましょう。

エミュレータ

EclipseはXcodeによく似ています。ただ動作確認にはEclipseはシミュレータではなく、エミュレータを立ちあげる必要があります。ちなみにこのエミュレータはXcodeのシミュレータに比べてかなり重いです。

素材の種類によって配置する場所が違う

Eclipseの場合は素材の種類によって配置する場所が違うので注意が必要とのこと！　画像は解像度によってもフォルダの配置を仕分ける必要がある場合もあるそうです。

アプリの見た目を作成しよう

Androidでもまずは見た目の作成から始めます。グラフィカルレイアウトにドラッグ＆ドロップで画面を作って行きます。

Android版でも図5の画像を使用します。

イメージインポート→文字を表示（テキストビュー⁠）⁠→テキストや色、サイズを調整（Android独特のspと言う単位を使ってサイズを設定する必要があります⁠）⁠→ボタンを設置、と言う流れは基本的に変わりません。

XMLに直接書き込むことでも色々変更することもできるので、慣れてくるとXMLのほうがやりやすいようです。

最後に動きの実装です

素材を配置したら次に動作を入れていきます。この辺りもiPhoneと一緒ですね。動きの実装をして行く詳細はテキストを参照ください。

※Android版のソースはこちらのGitHub上にあります。

前出のようのにiPhoneの場合はシミュレータで確認しやすいですが、Androidの場合は動かしづらいです。そのためエミュレータを起動させるよりも、Androidの端末を直接つなげて実機で確認することオススメします。

まとめ

• 意外と簡単にアプリ開発ができてしまった！：ポイントを絞れば2時間でできてしまう。
• 苦戦するポイントは初め（開発環境の準備や使い方⁠）⁠：コードなどはGoogleで調べれば（ある程度）サクサク進んでしまう。
• アプリ開発はポイントがあるのでできる人と始めることがオススメ

今回の感想として

iPhoneとAndroidのアプリ開発は思ったよりも簡単でした。両方とも開発環境もかなり似ていますが、微妙にそれぞれの特色があるためにそこには気を付ける必要がありそうです。今回は同じアプリを2つの環境で作成したことでその差をわかりやすく理解することができました。

今回は簡単でしたがそれは初級編だったから。初めはデフォルトとシンプルなテンプレを使用して、そこに自分で付け足して行くようにスキルを発展させて行くのが良さそうです。