iOS開発の初心者向けガイドThe Interface - Part I

Appleは、長年にわたりiPhoneとiPadのシリーズでモバイルの世界で業界をリードしてきました。すべての公式リリースで生み出される誇大宣伝にもかかわらず、それはまたモバイルプラットフォームのマーケットシェアの大部分を占めています、そしてこれはおそらくほとんどのクライアントが彼らのアプリがAppleのアプリストアに存在することを望むだろう理由です。そのため、開発者がiPhoneアプリを学び、構築する理由になります。.

良いニュースは、iPhoneアプリケーションの開発はあなたが思っているほど難しくはないということです。この記事は、iPhone用のアプリケーションを構築するプロセス全体を説明するための包括的なガイドとして存在します。.

アプリを開発する理由、フェーズ、およびツールについて説明します。最終的には、Xcodeを使用して基本的なiPhoneアプリケーションを設計するための簡単なチュートリアルに従います。.

それで、あなたがビジネスのために学んでいるかどうか、あるいはあなたがあなたを億万長者にするかもしれない素晴らしいアプリのアイデアを持っているかどうか、あなたの最初のiPhoneアプリを構築することから始めましょう。!

注：Xcodeのインストール、アプリケーション開発、およびアプリケーション送信には、Macintoshオペレーティングシステム（Mac OS）を搭載したコンピュータが必要です。合法的にWindows上で実行することはできません。.

なぜApple用に開発するのか?

私はこの質問が頻繁に尋ねられるのを見ますので、私はあなたがなぜiPhone開発に興味があるべきか説明したいと思います。冒頭で述べたように、iPhoneは現在のところ モバイルプラットフォームの市場シェアの大部分を占める.

自分で開発しているのかクライアントで開発しているのかのように、iPhoneアプリケーションの開発を習得するには、この理由で十分なはずです。ほとんどの人は、おそらく自分のアプリに世界中の人がアクセスできると考えています.

開発の観点から, アップルは物事がシンプルが好き, そしてこれは彼らの製品とフレームワークに適用されます。. iOSは、アップルのすべてのモバイルデバイスを動かすオペレーティングシステムです。. これらにはiPod Touch、iPhone、iPadが含まれます。だから、iPhone用のアプリケーションを開発しているときは、 iOSを使用して他のすべてのデバイス用に開発する!

さらに、上記の機能をさらに強化するのは、コーディング作業をどれだけ節約できるかということです。 iPhoneアプリケーション用のコードを書くとき すべてのアップルのコンピューティングデバイスに同じプログラミング言語を使用する. つまり、iPhoneアプリケーションを開発しているときには、そのアプリケーションを後でiPad、さらにはMacに統合することができます。.

Objective-C すべてのフレームワークを動かすコアプログラミング言語です。 Objective-Cと並んで、あなたもiPhoneアプリを開発するでしょう。 ココアタッチ, iOS上でユーザーインタラクションを推進するプログラミングフレームワーク.

これは、iPhoneアプリの開発を始める上で必要な情報です。開発は非常に複雑なプロセスですが、ゆっくりしてください。だから理由はここにあります、そして決定はあなたのものです。答えがイエスであるかどうかにかかわらず、あなたはいつでも次のトピックに飛び乗ることができます： iPhone用のアプリを設計する.

iPhoneアプリの構造を計画する

iPhoneアプリを作成する際の標準的な考え方では、次のことを行います。 いくつかの段階を経る. 第一段階に含まれるもの 計画とスケッチ.

まず第一にあなたが考えを持っている必要があります あなたのアプリがやろうとしていること. なぜ人々はそれをダウンロードしたいのですか? そして どんな機能を含めたいですか? これは、あなたが正しいことをしているかのように、最も重要な段階です。 混乱やトラブルを大幅に軽減 コーディング段階.

最悪、それはあなたが製図板に戻ってきます.

私はお勧めします いくつかのページ（またはビュー）のためのいくつかの大まかなアイデアをスケッチする あなたのアプリケーションの。一枚の紙に長方形、おそらく5つか6つの形を描き、それからあなたがあなたのアプリのそれぞれのビューにあなたが望む特徴を描く.

Webサイトのさまざまなページのようなビューを考えることができます。各ビューは、ログインフォーム、連絡先リスト、データテーブルなど、さまざまな機能を提供します。.

以下に、さまざまなUIバー要素の簡単なコレクションを作成しました。

ステータスバー - デバイスの現在のバッテリーレベル、3G接続、受信バー、電話会社、その他たくさんの情報を表示します。常にこれらの要素を含めることをお勧めします.
ナビゲーションバー - ユーザーにページ階層間を移動するオプションを提供します。これは、ユーザーが前のアプリビューに戻ることを可能にするために、しばしばバーの左側にボタンを含みます.
ツールバー - iPhoneアプリの下部に表示されます。これはいくつかの機能に関連するいくつかのアイコンを保持します。 シェア, ダウンロード, 削除する, 等.
タブバー - ツールバーに非常に似ていますが、今はタブを使って作業しています。ユーザーがタブアイコンをクリックすると自動的に強調表示され、光沢のあるホバー状態が表示されます。このバーは、直接機能を提供する代わりにビューを切り替えるために使用されます。.

このリストには、ほとんどのアプリで見つけることができるツールバーだけが含まれています。他にも考慮すべきビューやスタイルがいくつかありますが、それらはAppleのiOS UI Element Usage Guidelinesにあります。 iPhoneのUI要素に疑問がある場合は、このドキュメントを参照することを強くお勧めします。.

時間の都合上、すべてのUI要素について説明することはしません。考慮する要素が多すぎるので、単一のアプリでそれらすべてを使用することにはなりません。しかし、あなたが自分の見解をスケッチすると、 上記のガイドラインや他のiPhoneアプリからインスピレーションを得てください。 あなたはそれらを使って楽しんだ.

Photoshopモックアップのデザイン

私はあなたのほとんどがAdobe Photoshopでかなり快適に作業していると思います。 Webサイト、バナー、ロゴ、モバイルモックアップ用のグラフィックを作成するための最高のソフトウェアです。 Web用のグラフィックのデザインはかなり簡単なプロセスですが、iPhoneアプリのデザインに関してはもう少し複雑です。.

あなたがあなたが本当にすべきアプリを構築しようとしているなら 最初からピクセルパーフェクトモックアップデザインを作成する.

はじめに、Photoshopの設定について説明します。私たちはiPhone用にデザインしているので、2つの異なるデザインスタイルを考慮する必要があります。の 通常のiPhoneのディスプレイは320 x 480ピクセルです. ただしiPhone 4には 同じ画面サイズ内でピクセル数が2倍になる網膜ディスプレイ. だからあなたはすべき 解像度を640 x 960ピクセルに倍増 そしてこの標準にあなたのレイアウトを設計しなさい.

これはまたあなたがする必要があることを意味します 2セットのアイコンを作成する あなたのモックアップのために。もともとアイコンは 163ppiに設定 しかし、あなたはする必要があります iPhone 4用326ppiのアイコンを含む. アイコンは伝統的にでマークされています 2倍ファイル名の最後に、例えば “[email protected]“.

それでは、新しいドキュメント設定を最適化しましょう。最初に設定を編集する必要があるので、Photoshop> Edit> Preferences>にアクセスします。 ガイド、グリッドとスライス. 私たちは 2に細分化して20pxごとにGridlineを設定する. 網膜ディスプレイ用に設計する場合 2ピクセルラインは1ポイントを表示します 画面上。これは、アプリケーションを縮小するために留意する必要がある重要な規則です。.

私は自分のデザインを高解像度で構築してから縮小する方が簡単だと思う傾向がありますが、 両方の方法を試して、自分に最適なものを見てください。. 326ppiでは640 x 960ピクセルを使用しています - 頻繁に使用すると思われる場合はこれをカスタムプリセットとして保存してください.

テンプレート要素を使った構築

これで、Photoshopを使って自分だけでピクセルパーフェクトレイアウトを作成することができますが、これは非常に疲弊して退屈な作業になります。.

これは非常に多くの要素を持つ巨大なファイルです。作業を簡単にするためにvを押すことができます 移動ツール をクリックして “自動選択” オプションバーで “層” のではなく “グループ”. 設定では、あなたは任意の要素をクリックすることができますし、Photoshopは対応するレイヤーにあなたをもたらすでしょう!

モックアップで遊んでみてください, あるいは、モックアップからアプリケーションのプロトタイプを作成することもできます。アプリに応じて、コア領域に多数の機能を含めることができます。その多くはこのPSDファイルにあります。これらの要素のレイヤーに移動して、フォント、グラデーションカラー、その他のデザインスタイルを編集することもできます。ただ サイズを変更しないでください。 すべてのバーとUI要素はデフォルトの標準サイズに設定されているため.

Xcodeでアプリを開発する

iOSおよびMac OS Xプログラミング用の開発者ツールはXcodeという名前です。 OS X Lionを実行している場合は、Xcodeと該当するすべてのパッケージを無料で入手できます。 Mac App Store.

インストールが完了したら、Xcodeを起動すると、ようこそ画面が表示されます。ここから古いプロジェクトをロードしたり、新しいプロジェクトを作成することを選択できます。今のところクリックする必要があります “新しいXcodeプロジェクトを作成する“, その後、テンプレートウィンドウにいくつかのオプションが表示されます。 iOS>アプリケーションで、をクリックします。 “シングルビューアプリケーション” そしてヒット “次”. あなたはできる 新しいアプリに名前を付ける, といった テスト （できればスペースを入れずに） 会社の識別子, のような単語を入力してください 我が社, そして最後にディレクトリを選択してヒット “保存する”.

Xcodeはファイルディレクトリを作成し、作業用の新しいウィンドウに移動します。たくさんのファイルオプションがリストされているはずですが、 アプリケーションにちなんで名付けられたフォルダ 主な焦点は.

Xcodeでは、フロントエンド要素を設計するための2つの選択肢があります。クラシック xib / nib フォーマットはMac OS XおよびiOSアプリケーションに標準的であるため、毎回新しいページビューを設計する必要があります。ただし、1つのアプリでより多くのビューを作成しているので、nibファイルの量が非常に多くなりすぎるため、新しい 絵コンテ fileはあなたのすべてのnibビューを一つのエディタペインに保持します。ここから、UI要素や機能を簡単に削除および追加できます。.

また遭遇するでしょう .時間 そして .メートル 同じフォルダグループ内のファイル。これらはのための短いファイル名です ヘッダ そして実装コード。これらのファイルは、アプリの実行に必要なすべてのObjective-Cの関数と変数を書く場所です。 Xcodeがどのように機能するかを説明するのは良い考えかもしれません。 MVC（モデル、ビュー、コントローラ）, これが、コントローラごとに2つのファイルが必要な理由です。.

MVCプログラミング階層

アプリの動作を理解するには、そのプログラミングアーキテクチャを理解する必要があります。あり 基礎としてのモデル、ビュー、コントローラ（MVC）, Xcodeでは、すべてのディスプレイとインタフェースコードをロジックや処理機能から切り離すことができます。選択する選択肢は他にありません。 MVCは最初は混乱を招くように思えるかもしれませんが、それを理解していくつかの基本的なアプリケーションを構築しようとすると、その構造が気に入ってくるでしょう.

分かりやすくするために、以下のリストに各オブジェクトを示しました。

モデル - ロジックとコアデータをすべて保持しています。これには、変数、外部のRSSフィードまたは画像への接続、詳細な機能、および番号のまとめ処理が含まれます。このレイヤーはビューから完全に切り離されているため、ビューを簡単に変更しても同じデータを使用できます。.
見る - アプリケーションの画面または表示スタイル。テーブルリスト、プロフィールページ、記事の概要ページ、オーディオプレーヤー、ビデオプレーヤー、これらはすべてビューの例です。スタイルを変更したり要素を削除したりすることはできますが、それでもモデル内の同じデータを使って作業することになります。.
コントローラ - 他の2つの間の仲介者として機能します。ビュー内のオブジェクトをViewControllerに接続し、ViewControllerはモデルとの間で情報をやり取りします。したがって、このようにしてユーザーにボタンをタップさせて、これをあなたのモデルに登録することが可能です。その後、ログアウト機能を実行し、同じコントローラを介してメッセージを渡します “正常にログアウトしました!”.

だから基本的にあなたの モデルはすべての情報と機能を保持します 画面のどこかに表示する必要があります。しかし モデルは画面と対話できません。ビューだけができます。. ビューはほとんどすべてビジュアルであり、ViewControllerを介してのみデータを取得できます。. の コントローラは、実際にはフロントエンドの設計からバックエンドのデータを隠すためのはるかに洗練された方法です。. このようにして、機能を失うことなく、デザインを何度か改修することができます。.

この知識があれば、最初のいくつかのアプリを構築するのは難しくありません。前述の通り, Objective-C アプリを開発するために使用するコアプログラミング言語です。これは、更新された構文といくつかの追加のパラダイムを使用してC言語上に構築されています。言語に慣れるにはかなりの時間が必要ですが、初心者向けのレッスンにはMobiletutsのチュートリアルシリーズをお勧めします。+.

ストーリーボードを使用したデザインビュー

アプリケーションの技術的側面を調べたので、インターフェイスの設計に少し時間をかけます。私はあなたが “絵コンテ” オプション プロジェクトを作成するときにチェックされます。 MainStoryboard_iPhone.storyboard ウィンドウの左側にあるフォルダグループのどこかにファイルを作成します。ファイルをクリックして選択し、ビューを開きます.

新しいサイドバーがフォルダグループのすぐ右側に表示されます。これは ドキュメントの概要 このストーリーボードで利用可能なすべてのビューをチェックするための一種のクイックプレビュー方法です。.

まず、View Controllerにいくつかのページ要素を追加することから始めます。 2つの異なる要素が必要です。 ナビゲーションバー そして タブバー. 私達がそれらをつかむ前に、へのアクセス 属性インスペクタ ウィンドウの右側にある（[表示] - [ユーティリティ] - [属性の表示]インスペクタ） ステータスバー ラベル。デフォルトでは推論標準のiPhoneステータスカラーを使用しますが、あなたも選択できます ブラック または 半透明の黒 あなたのアプリのデザインがよりよく色に合うなら.

オブジェクトライブラリ

あれば 公益事業 ウィンドウの右側にあるペインは表示されません。表示>ユーティリティ>ユーティリティの表示を選択して有効にできます。「ユーティリティ」パネルの下部にあるパネルを見てください。 オブジェクトライブラリ. それはドロップダウンメニューを得ました “オブジェクト” リストの最初の項目として。見つからなかった場合は、[表示] - [ユーティリティ] - [オブジェクトライブラリを表示]を選択します。.

オブジェクトライブラリのドロップダウンメニューから、検索して選択します。 窓＆バー. 今すぐクリックして ナビゲーションバー, ビューウィンドウにドラッグして、黒の真下に配置します。 ステータスバー （電池アイコン付き）バーのタイトルの説明をカスタマイズできます。現在読んでいるテキストをダブルクリック “タイトル“, ラベルが表示されます “タイトル” [ユーティリティ]ウィンドウで、タイトルの説明を次のように変更できます。 “テスト” そこから。ヒット “入る” 変化を目の当たりにする.

Windows＆Barsパネルで、下にスクロールして タブバー, それをビューウィンドウにドラッグして、アプリの一番下に配置します。デフォルトでは、これら2つの要素は素晴らしく見えます.

ナビゲーションバーのグラデーションを下部のタブバーと一致させたい場合は、ナビゲーションバーをクリックして右の方を見ます。属性ユーティリティパネルのパネルをクリックします。一番最初のオプションが呼ばれます スタイル, これはDefaultに設定されています。スタイルをデフォルトからデフォルトに変更 ブラックオパーク そして私達は一致する色セットを持つでしょう!

また、アプリの一番下のバーに別のタブボタンを追加しましょう。マウスカーソルをもう一度Windows＆Barsパネルに移動して下にスクロールします。 タブバー項目, Tab Barの真下にあります。これをアプリウィンドウにドラッグして、既存の2つのタブバーボタンの中央に配置します。この新しいボタンをダブルクリックすると、Utilitiesパネルにいくつかの追加オプションが表示されます。画像そして タイトル そこから。たとえば、タイトルをに変更しました “しおり” 新しく追加されたTab Bar項目の.

したがって、これはXcode内でビューを設計するための簡単なチュートリアルです。それはそれほど難しいプロセスではありませんが、インターフェースに慣れるのにもう少し時間がかかります。快適に感じる場合は、さらにいくつかの要素を試してみてください。また、AppleのiOS Development Resourcesにアクセスしてより多くの学習リソースを入手することもできます。!

パートIIをお楽しみに

これで、iPhoneアプリの設計と開発に関するガイドの最初の部分は終わりです。次のパートでは、Objective-CとCocoa Touchについてもう少し詳しく説明します。そして、最終的には機能するiPhoneアプリケーションを構築する方法を学びます。!

iOSデザインギャラリー

そこにいるデザイナーのために私もあなたにいくつかのインスピレーションをもたらすことを望んでいるので、私は下に素晴らしいiPhoneアプリビューのリストを含めました。このリストには、おそらくこれまでに一度も気付いたことがないような、さまざまな感動的なアプリ要素があります。下のコメント欄であなたのアイデア、アプリの見解、質問を共有してください、ありがとう!

レーススプリッター

満足度リモート

iPhone用Tweetbot

リーダー

フォースクエア

MailChimp

インスタグラム

ジョイスティック

ピクトゥ

闇