アプリ教室〜その5〜 xcodeの使い方

こんにちは。AppAcademiaの原田です。

今回も前回の続きから勉強しましょう。

今回は、storyboardを使って、簡単なアプリを作りましょう!

上の画面から、続きをやりましょう。

今日、作るアプリは、大切な人に感謝するアプリを作ります。

こんな感じのアプリです。
・感謝する相手
・感謝すること
・ありがとうの言葉
・背景画像
があるシンプルなアプリです。

大切な人への感謝の気持ちを込めて、世界に一つだけの「ありがとうアプリ」を作りましょうヽ(=´▽`=)ノ

では、早速作っていきましょう。

ステップ1 ラベルの使い方

まずは、文字を入れていきましょう!
文字の入れ方ですが、実は、難しいことは一切不要です。なぜなら、、、、、

アプリで利用できる部品はすべて、この場所に用意されています!!!

な!!な、、、、なんだってーーーーーーーーーΣ(゚Д゚)

そうなんです。iPhoneアプリを作るための部品はすべてここに用意されているのです。

文字を入れる時の部品を探してみましょう。

ありました!このLabelというのが文字を入れる部品です。

文字を入れるときは、このラベルをこんな感じで、ドラッグアンドドロップするだけです!

簡単!!!!!!!!!Σ(゚Д゚)

すごい簡単でしたね。そうなんです。iPhoneアプリはxcodeがあるおかげで、文字入れるのは、こんなに簡単にできるんです。
PowerPointやExcelと同じような感じですよね!
では、文字の中身も編集してみましよう。いれた、Labelをダブルクリックすれば、変えることができます。
下のように、感謝する相手の名前を入れましょう。

It's easy!!!!!!Σ(゚Д゚)

いやぁ〜。iPhoneアプリ作るのは簡単ですね。

この状態で、再生ボタンを押してみてください。

すると、アプリが起動します。いままでは、真っ白い画面のアプリに文字が入りましたヽ(=´▽`=)ノ

引き続き、文字を入れていきましょう!

ここまでできたら、次は、感謝の気持ち、「ありがとう」という言葉をLabelを使って入れていきましょう!「ありがとう」をいれるときは、あなたの感謝の気持ちを目一杯込めて、Labelを移動させて、入力してくださいね。

完成です!できたら、再生ボタン(buildボタン)を押して、自分のアプリのデザインを確認しましょう!!

完成したんですが、ちょっと寂しいですね。。。。。
そうだ!文字を太くしてみましょうか。
文字を太くするときは、ユーティリティエリアからできます!!!
ユーティリティエリアの説明

太くしたいLabelを選択します。

右のユーティリティエリアのメニューからattribute inspectorと呼ばれる、五角形のものを選択します。

attribute inspectorを選択したら、フォントからTボタンを押してください。
そのあとは、以下の図のように、styleを選択して、Boldを選択します。

おお!「お母さんへ」が「お母さんへ」と太字になりましたね(*´ω`*)

ここで文字のサイズ、フォントを変えたり、色の変更、位置調整などが行えます。
ぜひ、いろいろいじってみてください。
こんなふうに感謝の気持ちが伝わるように変更してみましょう!

完成したら、再生ボタン(buildボタン)を押して、ちゃんとデザインができているか、確認しましょう!

おお!いい感じに感謝の気持ちが伝わるようにできましたねヽ(=´▽`=)ノ

ステップ2 画像の入れ方

次は、背景画像をいれて、より感謝の気持ちが伝わるように作ってみましょうヽ(=´▽`=)ノ

まず、下のように最初に背景にする画像ファイルを用意します。
ちなみに、「iPhone 壁紙 ◯◯◯◯」なんて、言葉で検索すると、ちょうどいいサイズのものを検索できますよ( ̄ー ̄)ニヤリ

画像ファイルを用意したら、この画像をアプリの中にコピーします。
ナビゲータエリアにあるファイル一覧の中に画像ファイルを追加します。

ん?なにいっとんだ?!(;´Д`)

となってしまった人は、一個前の説明を確認してみてくださいね(^_-)-☆

では、画像ファイルの追加の仕方です。

アプリ名のフォルダを選択します。

選択したら、キーボードのcontrolを押しながら、このフォルダをクリックします。(control押しながらクリック=マウスの右クリックです)
すると、メニューが表示されます。

この中から、「Add Files to "アプリ名"」を選択してください。
そうです。ファイル追加ですね!

すると、以下の様な画面がでてきます。

追加したい画像を選択してください。追加したあとは、このチェックがついてることを必ず、確認してください。

このcopy items if neededは、アプリ内に画像をコピーしますか?ってチェックです。これがついてないと、画像ファイルがアプリ内にコピーされません。気をつけてください><

画像を選んで、copy items if neededにチェックを入れたら、Addボタンを押してください。

画像がナビゲータエリアに追加されました。選択すると、追加した画像が表示されます。

これで画像が入りました( ´ー`)フゥー...

次は、story board上でアプリの画面に画像を追加しましょう。

アプリに画像をいれる部品もここに用意されています。

この部品の中の、Image Viewを探してください。
このImage Viewが画像をいれる部品になります。

ヤシの木が書いてある部品です!なんか、ハワイアンな気分になりますね〜
アロハ〜〜〜〜〜ヽ(=´▽`=)ノ

このImageViewを画面上に持ってきてください。

操作は下の動画を参考にしてください。

あれ?!おや?!

画像入ってないやんけ〜〜〜〜〜ヽ(`Д´)ノプンプン

まぁ、まぁ、そんなに怒らないでくださいΣ(゚Д゚)
まだ、続きがあるんです。
Image Viewをいれたあとに、どの画像をいれるか選択しなくてはなりません。

画像を選択して、ユーティリティエリアのattribute inspectorから、
Imageをみてください。

ここで、画像を選択することができます。

挿入したい画像を選択します。

これで画像が入りましたヽ(=´▽`=)ノ

って、画像が入りましたじゃねぇぇぇよ!後ろの文字見えないじゃんΣ(゚Д゚)

あらら、こんなときは、レイヤーの順番を変えます。
下の用な感じです。

これで、画像が背景になりましたね。
画像をいれるときは、Image Viewを使ってあげくださいね(^_-)-☆

ただ、、、うーん。画像が入ったことで、なんか文字が見づらくなってしまいましたね(´・ω・`)

そんなときは、alpha値を変更しましょう。

画像を選択して、ユーティリティエリアのattribute inspectorのAlphaといところの数値を0.3くらいにしてあげましょう。

おおおお!!!いい感じになりました(*´ω`*)

これで完成ですね。
最後に再生ボタン(buildボタン)を押して、自分の完成したアプリを確認しましょう!

あとは、できたアプリを、
感謝したい大切なあの人に見せてあげてくださいねヽ(=´▽`=)ノ

これで、xcodeの使い方がだいぶわかってきましたかね。

AppAcademiaでは、今回やってきたような感じで、楽しく、わかりやすくアプリの勉強会をしております。

みなさん、ぜひ、遊びに来てくださいね(*´ω`*)

ストリートアカデミー AppAcademia オリジナルiPhoneアプリを作る教室

AppAcademia facebook

AppAcademiaでは、毎回、簡単なアプリを作って、アプリの作り方を勉強するスタイルになっています。

第一回  告白アプリ〜swiftの文法、hiddenを使う〜
第二回  おみくじアプリ〜乱数でガチャを作る〜
第三回  ペットアプリ〜タッチ、スワイプ、ジャンプ〜
第四回  時計アプリ〜NSTimerの使い方〜
第五回  鬼ごっこアプリ〜第一回から第四回までのまとめ〜
第六回  紙芝居アプリ〜複数画面のアプリを作る〜
第七回  辞書アプリ〜UITableViewの使い方〜
第八回  ニュースアプリ〜UITableViewCellのカスタマイズ〜
第九回  LINEアプリ〜UITableViewCellのカスタマイズ2〜
第十回  メモアプリ〜NSUserDefaultsの使い方〜こんなカリキュラムでやっております!

次回は、第一回、告白アプリの作り方をご紹介しますね。

楽しみに待っててくださいねヽ(=´▽`=)ノ

引き続き、よろしくお願い致します。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

8

AppAcademia

AppAcademiaに関する情報を配信します
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。