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

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








■はじめに

スタートクラス2コマ目である本日は、スタートクラス以降で実際に使うカリキュラムを基に簡単なアプリを作りたいと思います。
文法なども出てくるのでスタートクラス①よりは難しく感じるかもしれませんが、プログラミングを勉強する上で避けては通れない道なので頑張りましょう!

■アプリ開発

それでは、早速アプリを開発していきましょう!

尚、今日の講義では
 1、アプリ開発の大まかな流れを理解する
 2、Xcodeの操作に慣れる
ことが重要となりますので、いきなり全てを理解しようとはせず、着実に基礎を固めるようにしましょう。

1.Storyboard上へのオブジェクトの配置、及び接続

まずはじめに、プロジェクトの立ち上げ及びStoryboardの使い方の基本について勉強します。 
プロジェクトとはアプリ開発のベースとなるもので、プロジェクト内でソースコードや素材の管理を行います。
iOSのアプリは、基本的に1つのアプリに対して1つのプロジェクトを立ち上げます。
また、Storyboardを活用することで、直感的な操作でiOSの画面を作製することが可能になります。



テキストは目を通すだけではなく、必ずXcodeを立ち上げて手を動かしましょう。
どうしても解決できない不具合に直面した場合は、プロジェクトをフォルダごと削除して最初からやり直してください。

★プロジェクトの立ち上げ

  1. アイコンをクリックし、Xcodeを起動します。

  2. 開いたウィンドウからCreate a new Xcode projectを選択するしてください。
    もしくは、上部のメニューからFile→New→Projectを選択してください。

  3. 左側でiOS→Appliction、右側でSingle View Applicationを選択
    (本テキストでは特に指定が無い限り、Single View Applicationでプロジェクトを立ち上げます。)
    Nextボタンを押してください。



  4. 以下の記述を行ってください。
     Product Name  MojiHenkou と入力してください。
     Organization Name  個人名を半角英数で書いてください。
     Company Identifier  com.rainbowapps と入力してください。
     Class Prefix
     何も入力しないでください。
     Devices  iPhoneを選択してください。


    入力が完了したら、Nextを押してください。

  5. 保存したい場所を選択して、Createを押してください。

    画面が以下の通りになれば新規プロジェクトの立ち上げは完了です。


Xcodeの画面構成

  1. Xcodeの画面構成を説明します。
    各エリアの名称は以下の通りです。


    各エリアの役割は以下の通りです。
     ナビゲーターエリア  プロジェクトに含まれるファイルの一覧が表示されています。
     エディターエリア  コードの入力、デバイスの画面構成などを行います。
     デバッガーエリア  プログラムの動作をチェックするために用います。
     ライブラリーエリア  主にStoryboardで用いるオブジェクトとの一覧が表示されています。
     インスペクターエリア  選択されたファイルやオブジェクトの設定の変更や確認を行います。

    各エリアの詳細な解説は後の講義で適宜行います。

  2. 各エリアの表示/非表示の切り替えは画面右上のアイコンで行います。

    左のアイコンはナビゲーターエリアの表示/非表示を切り替えます。
    中央のアイコンはデバッガーエリアの表示/非表示を切り替えます。
    右のアイコンはインスペクターエリア及びライブラリーエリアの表示/非表示を切り替えます。
    実際にこれらのアイコンをクリックして、動作を確認してください。

★Storyboardの準備

  1. 左側のナビゲーターエリアから、Main.storyboardを選択してください。 


  2. 右上のインスペクターエリアからUse Autolayoutを探し、チェックを外します。 
    Autolayoutは、画面のサイズや向き(横向き、縦向き)が変更されたときに自動で画面が再構成されるを便利な機能ですが、少々難しいのでこの一連のテキストでは用いません。



  3. 左下の虫眼鏡のアイコンの左隣のアイコンを押して、画面を短くしておきます。 
    このアイコンを押すたびに、3.5インチ/4インチの画面が切り替わります。 
    短い方の画面でデザインした方がボタンが画面外に隠れるなどの不都合が起きにくいので、
    画面は3.5インチと短くしておきます。


★オブジェクトの配置

  1. 右下のライブラリーエリアから、中央のiPhone画面にLabelをドラッグアンドドロップしてください。
  2. このままではLabelの表示領域が狭いので、Labelの選択時に四隅に表示される
    小さな白い正方形をドラッグして表示領域を広げておいてください。


  3. 続いて、右下のライブラリーエリアからLabelの右隣のButton
    中央のiPhone画面にドラッグアンドドロップします。

★コードの記述

  1. 左側のナビゲーターエリアからViewController.mを選択し、以下の通りに書き換えてください。
    全て半角英数で記述してください。コピーアンドペーストでも問題ないです。

     ViewController.m
     #import "ViewController.h"


    @interface ViewController ()

    {

        IBOutlet UILabel *mojiLabel;

    }

    @end


    @implementation ViewController


    - (void)viewDidLoad

    {

        [super viewDidLoad];

        // Do any additional setup after loading the view, typically from a nib.

    }


    -(IBAction)osaretayo:(id)sender

    {

        mojiLabel.text = @"Hello World!";

    }


    - (void)didReceiveMemoryWarning

    {

        [super didReceiveMemoryWarning];

        // Dispose of any resources that can be recreated.

    }


    @end


    オレンジのライン部分が追加箇所です。

  2. 上記のコードを解説します。

     IBOutlet UILabel *mojiLabel;

    の箇所ですが、ここは
    インスタンスいうものを宣言している箇所です。
    インスタンスはStoryboard上のLabelやButtonなどのオブジェクトをコード上で扱うために必要なものですが、
    詳細な解説は後の章で行います。

    mojiLabelがインスタンスの名前です。*はmojiLabelがインスタンスであることを表します。
    UILabelはインスタンスの型です。このインスタンスがラベルの型を持っていることを意味します。
    IBOutletはこのインスタンスがStoryboardのオブジェクトと接続可能であることを意味します。
    接続はこの後行います。

  3. -(IBAction)osaretayo:(id)sender

    {

        mojiLabel.text = @"Hello world!";

    }


    この箇所は
    メソッドと呼ばれる箇所です。
    メソッドとは具体的な命令を書く箇所です。
    osaretayoがメソッドの名前です。

    {}で囲まれた領域に具体的な命令を書くことになります。
    この場合は、
    mojiLabelという名前のラベルに表示されている文字を、Hello world!という文字に変更する。
    という意味です。

    @"..."の領域は、文字列です。"と"で囲まれた領域に文字を入れることで、
    任意の文字をコード上で取り扱うことができます。
    この領域には日本語などの全角文字を入力することも可能です。

    IBActionの記述ですが、これはStoryboard上のボタンとこのメソッドが接続可能であるという意味です。 
    接続することで、Storyboard上のボタンを押すとこのメソッドの中の命令が順次実行されるようになります。

★IBOutletの接続

  1. 左側のナビゲーターエリアから、Main.storyboardを選択してください。

  2. 下図の赤い点線の領域(ドキュメントアウトライン)が表示されていない方は、
    青い点線で囲まれたボタンを押して表示させてください。




  3. Document OutlineからView Controllerを選択してください。
    View Controllerが表示されていない方はView Controller Sceneの左側の三角形をクリックして表示させてください。

  4. 画面の右上にインスペクターエリアが表示されていることを確認してください。
    表示されていない方は、下図の右上の赤い点線内のアイコンをクリックして、表示させてください。



  5. 図の青い点線内のアイコンをクリックして、図のようにConnection Inspectorを表示してください。

  6. Outletsの項目には、接続可能なインスタンス名の一覧が表示されます。
    赤い下線の箇所には、先程コード上でIBOutletを付けて宣言したmojiLabelという
    インスタンス名が表示されていることを確認してください。

  7. このmojiLabelの右側の白丸を、画面中央のiPhone画面上のLabelまでドラッグアンドドロップしてください。 
    ドラッグ中には白丸からカーソルまで青い線が表示されます。 
    カーソルが対象のラベル上にあると、ラベルの色が青く変化します。
    接続が無事完了すると、白丸の中に黒丸が表示されるはずです。

★IBActionの接続

    1. Received Actionsの項目には、接続可能なメソッド名の一覧が表示されます。 
      青い下線の箇所には、先程コード上でIBActionを指定して記述した
      osaretayoというメソッド名が表示されていることを確認してください。

    2. このosaretayoの右側の白丸を、画面中央のiPhone画面上のButtonまでドラッグアンドドロップしてください。 
      ドラッグ中には白丸からカーソルまで青い線が表示されます。
      カーソルが対象のラベル上にあると、ラベルの色が青く変化します。 

      カーソルを離すと様々な選択肢が表示されますが、今回はTouch Up Insideを選択してください。 
      接続が無事完了すると、白丸の中に黒丸が表示されるはずです。

    3. OutletsとReceived Actionsの接続が無事完了していれば、
      Connection Inspectorが次のように表示されるはずです。確認してください。



      ※IBOutletとIBActionの接続方法は複数存在します。
       テキストによって接続方法が異なるのはご容赦ください。
       今回は最もスムーズに接続可能な方法を選択してみました。

    ★アプリの起動

      1. 下図右側の点線内のアイコンでシミュレータか実機か適切な方を選択し、左側の点線内の実行ボタンを押します。



      2. しばらく待つとシミュレータもしくは実機からアプリが起動します。
      3. ボタンを押すと、ラベルにHello World!と表示されることを確認してください。 
        Hello World!の全体が表示されない場合は、StoryboardでLabelの表示領域を広げた上で
        再び実行ボタンを押してください。
      4. ボタンを押した後に、次のような画面が表示されていれば完成です。

      ★理解チェック

          1. プロジェクトの立ち上げはできましたか?
          2. StoryboardのUse Auto Layoutのチェックを外す場所を示して下さい。
          3. Storyboard上でiPhoneの画面の長さを切り替えるアイコンを示して下さい。
          4. LabelButtonの配置はどのエリアから行うことができますか?
          5. インスタンスの宣言をしている場所はどこですか?
          6. 一つのメソッドはどこからどこまでですか?
          7. @""の記述の意味を教えて下さい。
          8. IBOutletIBActionの接続はどこで行いますか?
          9. アプリをシミュレーターもしくは実機で起動して下さい。
          上記の項目を確認し、下記の課題をクリアした上で次の章に進んでください。

          ★課題

          • 新規プロジェクトを立ち上げてください。
          • 二つのボタンをiPhone画面上に左右に並べて配置してください。
          • ラベルをiPhone画面上に1つ配置してください。
          • 左側のボタンを押すとHello World!と、
            右側のボタンを押すとHello Rainbow!とラベルに表示されるアプリを作製してください。


          2.画像の表示

          次に、画像の取り扱い方の基本について勉強します。


          ★プロジェクトの立ち上げとStoryboardの準備

          1. Single View Applicationでプロジェクトを立ち上げ、以下の記述を行ってください。
            プロジェクトの立ち上げ方が分からない方は、前章をご参考にしてください。

             Product Name GazouHyouji と入力してください。
             Organization Name  個人名を半角英数で書いてください。
             Company Identifier  com.rainbowapps と入力してください。

             Class Prefix
             何も入力しないでください。
             Devices  iPhoneを選択してください。


          2. 左側のナビゲーターエリアからMain.storyboardを選択し、Use Autolayoutを探してチェックを外してください。
            また、左下の虫眼鏡のアイコンの左隣のアイコンを押して画面を短くしておいてください。
            これらに関しても、分からない方は前章をご参考にしてください。


          画像素材の導入

          1. 画像ファイルを2つ用意してください。ネットからダウンロードしても、ご自分で作成してもかまいません。
            形式はpng、jpgもしくはgifであれば大丈夫です。
            ご自分で試すだけであれば問題有りませんが、App Storeに公開する際は画像の著作権にご注意ください。
            画像ファイルの名前は、半角英数で短めの名前に変更しておくのが望ましいです。
            ※本テキストではパブリックドメインの画像を使用しております。

          2. 左側のナビゲーターエリアの、GazouHyoujiというプロジェクト名の上で右クリックします。
            メニューが表示されるので、Add Files to "GazouHyouji"...を選択します。


          3. Macの中から画像を選択します。一度に複数の画像を選択できます。
            画面下半分のチェックを下図の赤線の通りにして、Addボタンを押してください。

          4. 無事画像がプロジェクトに導入されると、以下の図のようにナビゲーターエリアに
            導入された画像ファイル名が表示されます。
            選択すると、画像が中央のエディターエリアに表示されます。


          ファイルの削除

          1. 今後のために、プロジェクトに導入したファイルの削除方法を学習しましょう。

          2. 左側のナビゲーターエリアで、削除したいファイルの上にカーソルを合わせて右クリックします。
            今回は先程プロジェクトに導入した画像ファイルを一つ削除してみましょう。

          3. 表示されるメニューの中から、Deleteを選択します。


          4. 次のアラートが表示されますので、Move to Trashを選択します。
            Remove Referenceを選択するとプロジェクトのフォルダからファイル自体が削除されませんので、
            後に同名のファイルを導入する際にトラブルの原因になります。選択肢を間違えないようにしましょう。


          5. ナビゲーターエリアからファイル名が消えていればファイルの削除は成功です。
            先程導入した画像データを削除した方は、再び導入しておいてください。


          Image Viewの配置

            1. 左側のナビゲーターエリアからMain.storyboardを選択してください。

            2. Image ViewをiPhone画面に配置します。Image Viewの内部には画像を表示することが可能です。

            3. 中央のiPhone画面へ、右下のライブラリーエリアからImage Viewをドラッグアンドドロップします。
              iPhone画面の枠に、ImageViewがぴったりと当てはまるようにしてください。
              下図のようになれば、Image Viewの配置が完了です。

            4. 画面中央、もしくはドキュメントアウトラインからImage Viewをクリックして選択します。
              ドキュメントアウトラインを忘れた方は、前章を見直してください。

            5. 右上のインスペクターエリアに注目します。
              赤い点線の丸で囲まれたAttributes inspectorを選択してください。
              赤い点線の四角で囲まれたImageの右側の項目をクリックしてプルダウンし、
              先程プロジェクトに導入された画像の一つを選択してください。
              Image Viewの内部に選択した画像が表示されるのを確認してください。


            6. 前章に従い実行ボタンを押してアプリを起動してみましょう。画面一杯に画像が表示されるはずです。

            7. Attribute inspector内の様々な設定を変更してみましょう。
              例えば、Modeでは縦横比の設定など様々な表示の設定を選択することができます。
              Alphaの値を0〜1.0に変更すると、透過処理を行うことができます。


            ボタンの配置、及びタップ時の動作

            1. 右下のライブラリーエリアから、Buttonを中央の画面へ下図のようにドラッグアンドドロップしてください。



            2. 左側のナビゲーターエリアからViewController.mを選択して、以下の通りに書き換えてください。
              全て半角英数で記述してください。コピーアンドペーストでも問題ないです。

            3. オレンジの網掛けが追加箇所です。

               ViewController.m
               #import "ViewController.h"


              @interface ViewController ()

              {

                  IBOutlet UIImageView *gazouView;

              }


              @end


              @implementation ViewController


              - (void)viewDidLoad

              {

                  [super viewDidLoad];

                  // Do any additional setup after loading the view, typically from a nib.

              }


              -(IBAction)osaremashita:(id)sender

              {

                  gazouView.image = [UIImage imageNamed:@"monariza.jpg"];

              }


              - (void)didReceiveMemoryWarning

              {

                  [super didReceiveMemoryWarning];

                  // Dispose of any resources that can be recreated.

              }


              @end



            4. 上記のコードを解説します。

               IBOutlet UIImageView *gazouView;


              上記の箇所ですが、ここでは
              gazouViewという名前のインスタンスを宣言しています。
              UIImageViewはインスタンスの型です。このインスタンスがImage Viewの型を持っていることを意味します。
              IBOutletはこのインスタンスがStoryboardのオブジェクトと接続可能であることを意味します。
              この後、Storyboard上のImage Viewと接続を行います。
            5. このメソッドの中では、gazouViewに表示すべき画像データを指定しています。

               -(IBAction)osaremashita:(id)sender

              {

                  gazouView.image = [UIImage imageNamed:@"monariza.jpg"];

              }



              monariza.jpg
              の箇所には、各自が取り込んだ2つの画像ファイルのうち、
              Storyboardで表示されていない方の画像名
              を記入してください。
              [UIImage imageNamed:@"..."]は画像ファイルから画像データを生成します。
              生成された画像データは、
              gazouViewが所有するimageという場所に格納されます。
              これにより、指定した画像が表示されます。
            6. 前章のIBOutletの接続の項目とIBActionの接続の項目に従い、Storyboard上でgazouViewと、
              osaremashitaメソッドの接続をそれぞれ行ってください。
              gazouViewはImage Viewと、osaremashitaはButtonと接続可能です。
              osaremashitaの接続の際は、Touch Up Insideを選択してください。

            アプリの起動

            実行ボタンを押してアプリを起動しましょう。ボタンを押すと別の画像が表示されれば完了です。
            下図の例では、ボタンを押すと真珠の耳飾りの少女がモナリザに切り替わります。

            →(Buttonをタップ)→


            理解チェック

                1. 画像素材を導入する方法を説明して下さい。
                2. 一度取り込んだ素材を削除する際、どのような点に注意すればいいですか?
                3. Image View表示画像を設定できるのは、Storyboard上のどちらですか?
                4. コード上で画像の入れ替えが行われる箇所を示して下さい。
                上記の項目を確認し、下記の課題をクリアした上で次の章に進んでください。

                課題

                • 新規プロジェクトを立ち上げてください。
                • 二つのボタンをiPhone画面上に左右に並べて配置してください。
                • 左側のボタンを押すと画像Aが、右側のボタンを押すと画像Bが表示されるようにしてください。

                ■RainbowApps会員証作成

                今後、本格的にエンジニアを目指す方は、アプリの公開やアプリに広告を出す場合などにクレジットカードが必ず必要になってきます。
                そんな中、今回フリースクールのスポンサーであるクレディセゾンさんがRainnowApps会員証という形でクレジットカードを提供してくださっています。
                クレジットカードをお持ちでない方やちょうど新しく作ろうと思ってた方はこの機会に是非お申し込みください。
                 *会員証の作成は任意ですが、受講料無料でスクールを運営するためにもご協力頂ければ幸いです。

                1、申込み用URL:http://www.saisoncard.co.jp/rd/rainbowapps1
                 *会員証(クレジットカード)の詳細及び申込みフォームの記入例に関しましては、こちらをご確認下さい。

                2、登録用フォーム:http://goo.gl/4CdfGT
                 *申込みフォーム入力後、こちらのフォームにもご入力下さい。

                ■講義アンケート

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






                スタートクラスⅠ
                アプリ作成その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だけの修了証
                オンラインコースでどんな内容を学ぶのか詳細に説明してます。