スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--/--/--(--) | スポンサー広告 | トラックバック(-) | コメント(-)

XcodeでHelloWorld 【1】

こんばんはー、ちっち♀です。
いやー、ついにiOS7が公開されましたね!
iPhoneも5S/5Cが発売されてどーんと盛り上がってるみたいですし、
この機会にiPhoneユーザーさんがたくさん増えてくれるといいですね・・・!

それにしても・・・Appleさんは相変わらず新しいのを作るのが早い・・・!
この間iPhone5が出てiOS6にアップデートされたばっかだってのに・・・
仕事が早すぎてこちとらついて行くので精一杯ですよ
我らがXcodeも早々とiOS7に対応した新しいバーションが配信されてましたし
どんどん進化してくアプリの開発環境に対応して行けるかが心配だ~っ(;・д・)!

さて、そんな更新好きなAppleさんに遅れを取らないように・・・
今回からはさっそく新Xcodeを使って行こうと思います。
初心者さんが挑戦するにはうってつけとされてます(?)チュートリアルアプリ、
「HelloWorld」の制作に挑戦しますよー(`・ω・´)ノ オーッ!!
今回もお供はお馴染みの『初めてのiOSアプリケーション』さんでござい。
まだまだお世話になります故、よろしくお願い致しまーす!

早速ですが、今回作っていくHelloWorldが一体どんなアプリなのか、
まずはお手本の画面から拝見してみる事にします。

【HelloWorldってこんなアプリ】

クリックで拡大

さあ、如何でしょう。これが今回作ってみるHelloWorldさんの完成画面です。
うーん・・・なんとも小ざっぱりとした画面ですね。
まぁ、初めて作ってみるアプリだもんね、そう難しいのは出来ません。
シンプルなのが一番ですよね。

このHelloWorldですが、一体何をするアプリなのかと言いますと。
一番上の「Your Name」欄に名前を入れて、下のHelloボタンをクリックすると
真ん中の「Lable」が入力した名前を認識してくれて
「Hello 〇〇!」と挨拶を返してくれるんです。
まさにその名の通りの「こんにちはをしてくれる」アプリなんですね!

何をするにもまずは挨拶から!って事でしょうか(笑)
礼儀と道徳を兼ねそろえた、まさに最初のアプリにはピッタリな代物です

さて、大体どんなアプリを作っていくのかが分かったところで
まずは見た目だけでもお手本と同じ物を作ってみたいと思います。
折角ですので、前回作ったピンク背景の画面を元にやってみますね(*^.^*)

【HelloWorldアプリの画面を作ってみる】

前回ボタンを設置した時の事を思い出しつつ、
同様の方法で、必要な物を画面に配置していきます・・・

クリックで拡大

うむ、こんな感じでしょうか。
とりあえずパっと見、お手本と同じような格好になりましたね。

今回画面に設置しましたのは、一番上の入力枠、
真ん中の文字、一番下のボタン、の3つです。
入力枠にはTextField、文字にはLable
ボタンにはお馴染みRoundRectButtonを使用してます。
ユーティリティーエリアからのドラッグ&ドロップで配置する事が出来ました。

もちろんこのままでもいいのですが、折角ですので
前回覚えた、設置物たちの基本設定も少し弄ってみる事にします。
またも例のホームベース型のボタンをクリック。
ユーティリティーエリアで格項目の設定をしていきます。

ちなみにですが、このホームベース型のボタンは
正式名称【Attributes インスペクター】と言うそうです。
Attributes・・・アトリビュート?シンボル?属性?なんのこっちゃ。
ようは対象物の属性(?)を設定できるボタンなんだよって事でいいですよね・・・


クリックで拡大

早速入力枠のアトリビュートインスペクタ(言ってみた(笑))を開いてみました。
テキストフィールドの、設定可能な項目がずらりと並んでいます。
ざっと見てみますと、枠内にあらかじめ文字を表示させたり、
枠の形を変えてみたりと色々な事ができるようになってるみたいです。

チュートリアルさんによりますと、お手本画面の入力枠に表示されてます
薄い「Your Name」のガイド文字はPlaceholderの項目を使う事によって
設定する事ができるらしいです。試しに何か入れて表示させてみましょう。
そのまんまYour Nameだと面白くないので・・・
ここは日本語で柔らかく、「お名前を入力して下さい」とでもしましょうか。



おー!薄い文字出ました!いい感じですねー♪
この文字は実際の入力が行われると自動的に消えてくれるそうです。便利!
左に寄っちゃってるのが少し気になりますね。真ん中寄せにしましょう。
Placeholderの上にある、Alignmentの項目で真ん中のボタンを選択します。



はい、バッチリです
枠内の文字設定が中央寄せに変更され、
ガイドの文字もちゃんと真ん中に表示されました。
Alignmentでは、Word等のテキストソフトではお馴染みの
文字列の左寄せ、中央寄せ、右寄せの設定を行う事が出来ます。
枠内に適応する設定なので、入力された名前も設定どおりに寄ってくれます

さて、これでちょっとだけ、アプリの使用者さんに親切なアプリになったね(*^^*)
折角なので、親切ついでにこの入力枠を拡大しちゃいましょうか。
大きいほうが目にも優しいし、きっと操作もしやすいよね。
大は小を兼ねると言うし、何事もデカイに越した事はないだろう・・・!

クリックで拡大

じゃーん★
どうでしょう!ちょっと調子に乗りすぎたでしょうか(笑)
入力枠のみならず、LableとButtonもデッカクしてみちゃいました!
お手本の画面と変わって来てしまいましたが・・・少しだけなら大丈夫だよね!

テキストフィールドはそのままの丸い枠だと横にしか長く出来なかったので
Border Styleの項目で右から二番目の四角い枠に変更。
枠の形を変えたら枠内の色が無くなり、背景と同色になってしまったので
下の方に隠れてたViewのメニューを開き、
Backgroundの色を変更して白に戻しました。

枠自体の大きさはマウスのドラッグで端っこをひっぱって、デッカクします。
表示文字の大きさも、エリア上部にあるFontの項目を弄ってででっかく、
フォント自体も少し可愛い丸めの文字に変更してみました。
LableとButtonも同じ方法で入力枠に見合うように調整。
サイズとフォントと文字色を変更しました。

ちなみに、シミュレータでテストしてみるとこんな感じです

クリックで拡大

細かい設定を弄ってみただけなので、大々的には変わりませんでしたが
雰囲気は多少変わったんじゃないかと思います。
少しは愛嬌のある画面になったでしょう~?
何より画面を調整していくのが楽しくて楽しくて(*´艸`*)
他にも改変可能な設定項目は沢山ありましたゆえ、
Xcodeさんをよりよく知る為にも、もっともっと色々試してみると面白いかも!

さて・・・なんだか画面を作って満足しちゃった感はありますが(笑)
アプリ作りは寧ろここからがスタートですよね!もちろんHelloWorldも叱りです。
このままでは前回同様、何の機能も持たない設置物たちが
ただ画面上に置いてあるだけの状態ですので
今回は実際に動くアプリを完成させる為に
ボタン達に「機能」をつけてく方法に挑戦したいと思います。

画面だけのハリボテアプリはもう卒業だーい\(^o^)/

XcodeでHelloWorld 【2】】に続くよ!

2013/09/26(木) | HelloWorld | トラックバック(0) | コメント(0)

«  |  HOME  |  »

コメントの投稿














管理者にだけ表示を許可する

トラックバック

トラックバックURL
http://iphonedenaishoku.blog.fc2.com/tb.php/14-9282ccd7
 |  HOME  | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。