■アプリ作成

では、ここからいよいよアプリを作成していきたいと思います。
(Macの操作に慣れていない方はページ下部の参考URLをご参照下さい。)
まずは下記URLよりサンプルコードをダウンロードしてみましょう。



URLにアクセスしたら「MyAlarm.zip」と「Demo_AKB48_Timer.zip」をダウンロードして下さい。
(講義では扱いませんが「お役立ちリンク、ツール集」にも目を通しておくと良いでしょう。)


2つのファイルがダウンロードできたら「MyAlarm」のフォルダを開き、「MyAlarm.xcodeproj」をダブルクリックして下さい。


すると、自動的に上図のようなアプリケーションが起動すると思います。
これが「Xcode」と呼ばれるiPhoneアプリを開発するためのツールになります。


Xcodeが無事に立ち上がったら、まずは再生ボタンを押してシュミレーターを起動してみましょう。
(シュミレーターを終了させる場合は、再生ボタンの隣の停止ボタンを押して下さい。)


無事に時計アプリが表示されましたか?
このように、実機がなくてもシュミレーターを使うことでアプリの動作確認を行うことができます。



アラーム機能も付いているので、右上の「+」ボタンを押して時刻をセットすると、メッセージと共に音が鳴るようになっています。

見ての通り、今回扱うのは非常にシンプルな時計アプリです。

今回はコードを理解する必要はありませんが、簡単に時刻が表示される仕組みについて説明すると、
 1、現在時刻を取得
 2、「時間」と「分」をそれぞれ1の位と10の位の数字に分解する
 3、数字に対応した画像(0〜9まで)を表示させる

となっています。
(コードについて詳しく理解したい方はこちらをご参照下さい。)

では、ここからはこの時計アプリを自分好みのオリジナル時計アプリにアレンジしてみましょう。

とは言え、いきなりアレンジと言われてもイメージが湧かないと思いますので、今度は先ほどダウンロードした「Demo_AKB48_Timer」をXcodeで立ち上げて、シュミレーターを起動させてみて下さい。


上図のようにシュミレーターを起動させることが出来ましたか?

このアプリは先ほどの「MyAlarm」のコードを一切変更せずに、0〜9までの数字をAKB48総選挙の順位に置き換えたものになります。
このように、素材(画像)を入れ替えただけで何の変哲もなかった時計アプリがAKB48に詳しくないと時間すらわからない、ちょっとマニアックなアプリに変わりました。
*アラーム音もAKB48仕様になっているので確認してみて下さい。
*今回のような芸能人をテーマにした時計アプリは結構リリースされているので、どんなものがあるか調べてみましょう。

これでアレンジがどういうものか何となくわかったと思いますので、ここからは先ほどダウンロードした「MyAlarm」の素材を入れ替えることで、時計アプリをオリジナリティ溢れるアプリにアレンジしてみましょう。

今回はどういうアプリを作るかということよりも、Xcodeの操作に慣れることが重要なので入れ替える画像はなんでも構いません。
単純に数字の画像を入れ替えるのもいいですし、先ほどの例のように数字に因んだ画像を使うことでちょっと変わった時計にアレンジするのもいいと思います。

尚、Xcodeの詳しい使い方やアプリ開発の流れについては次回以降の講義で扱うので、今回はとにかく想像力を働かせながら、楽しみながらアプリをアレンジしてみて下さい。

■画像の入れ替え方について

とは言え、そもそも画像の入れ替え方がわかならいと思いますので、まずは一緒にやってみましょう。
画像を入れ替える手順は以下の通りです。

 1、画像を用意する 
 2、ファイル名とフォーマットを変更する
 3、透過処理
 4、プロジェクトに追加する
*3は必要に応じて行うようにして下さい

では、具体的にどのようにすればよいのか説明していきます。

1、画像を用意する

まずは、素材として使いたい画像を用意して下さい。
今回は実際にリリースするわけではないので、Googleから画像検索したものを使うのもよいでしょう。
(実際にアプリをリリースする際には、著作権に細心の注意を払うようにして下さい。)

2、ファイル名とフォーマットを変更する

今回は画像のファイル名とフォーマット(JPEG・PINGなど)をコード上で指定して画像を表示させているため、素材として使う前に事前に変更しておく必要があります。


上図のように「0」として表示させたい画像は「0.png」に変更しておかないとエラーが出てしまいます。

では、早速ファイル名とフォーマットを変更してみましょう。


まずは素材として使用したい画像をダブルクリックして下さい。


すると、上図のようにアプリケーションが自動的に立ち上がります。
今回は画像のファイル名とフォーマットを変更するために、Macに標準装備されている「プレビュー」を使います。


ファイル名とフォーマットを変更させるには、まず「ファイル > 書き出す」を選択します。


次に「書き出し名」でファイル名を「フォーマット」でファイルのフォーマットを変更し「保存」を選択します。


すると、ファイル名とフォーマットが変更された画像ファイルが自動的に作成されます。

3、透過処理

画像の背景色が邪魔な場合は、不必要な部分を透過させましょう。


まず「編集ツールバー」のアイコンを選択します。


編集ツールバーが表示されたら、次に「インスタントアルファ」を選択します。


インスタントアルファ選択後、画像の透過させたい領域を選択します。


透過させたい領域が選択できたら「Deleteキー」を押してみて下さい。
すると、背景色が透過されます。


不必要な部分を全て透過させるとこのようになります。


透過処理していない画像と透過処理した画像を比べると違いは一目瞭然ですね。
状況によって使い分けるようにしましょう。

4、プロジェクトに追加する

ここまで出来たら、後は画像をプロジェクトに追加するだけです。
「MyAlarm」をXcodeで立ち上げましょう。

Xcodeでは同じ名前の素材をプロジェクトに追加することはできないので、用意した素材を追加する前にまずは既にプロジェクトに追加されている素材を削除しましょう。


削除したい素材を右クリックして「Delete」を選択します。


素材を完全に削除するかどうか聞かれるので、必ず「Move to Trash」を選択しましょう。
(「Remove Reference」を選択して削除すると、後でエラーが起きる可能性があります。)


削除ができたら、いよいよ追加です。
右クリックして「Add Files to “プロジェクト名”」を選択します。


追加したい素材を選択したら、必ず「Destination」にチェックを入れてから「Add」を押しましょう。


無事に素材を追加することが出来たでしょうか?


ちゃんと追加出来たか確認するためにも、ここで一度シュミレーターを起動させてみましょう。
無事に画像が入れ替わっていたら、同じ要領で残りの画像を入れ替えてみて下さい。
今後の講義でも素材の入れ替えは良く行うので、今回学んだことはしっかり理解しておきましょう。

次回は一からアプリを作ることで、アプリ開発の大まかな流れを理解してもらいます。

■参考URL

・Macの基本
・Macの基本的な使い方(初心者編)
・Macでの作業効率アップ!初心者が覚えておくべきMacショートカット42個

フリースクールの受講アンケート

■講義アンケート

今後の講義をより良くするために、アンケートにご協力下さい。




スタートクラスⅠ
アプリ作成その1

MacやXcodeの使い方など、
基本的な開発スキルを学びます。



スタートクラスⅡ
アプリ作成その2

MacやXcodeの使い方など、
基本的な開発スキルを学びます。



スタートクラスⅢ
アプリのUIUX制作講座

ペーパープロトタイピング初心者でも
楽しめるアプリのUIUX制作講座



00:iPhone アプリマスターコース 事前準備


MacやXcodeの使い方など、初歩的かつ基本的な開発スキルを学びます。 
このクラスではとにかくアプリ開発の楽しさを知ることが重要となります。



iPhone (iOS) アプリマスターコース


iPhone アプリマスターコースで学ぶ 20個のサンプルコード  
講義では実践的な10個のサンプルアプリから実際にアプリを開発していきます。





https://sites.google.com/a/rainbowapps.jp/web/

ウェブアプリHTML5マスターコース

ネイティブアプリに比べ圧倒的な開発効率の良さで大手IT企業で積極的に
利用されているHTML5、CSS3、Javascript。  全6コマを学びます。





事前準備が整ったら、Objective-Cの
アプリケーションフレームワークについて学びましょう。
 


RainbowApps フリースクール Androidアプリマスターコース


Android アプリマスターコースで学ぶ 20個のサンプルコード  
講義では実践的な10個のサンプルアプリから実際にアプリを開発していきます。





成績修了証

成績修了証

何を学んでどんなスキルを習得したか一目でわかるRainbowAppsだけの修了証
オンラインコースでどんな内容を学ぶのか詳細に説明してます。