Xcodeを使って、iPhoneアプリの起動画面を変更する方法を初心者向けに紹介していきます。iPhoneアプリの見た目で変更できるポイントとして、UIパーツやアイコンがあります。 なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。 iPhoneアプリの起動画面を変更するまずはナビゲーションエリアから、Generalを選択し、Launch Imagesの項目を探します。Sourceという項目があるので、その右端の”→”をクリックして、画像追加画面に移動します。 すると、画像の追加画面が表示されます。この赤枠で囲った部分に画像をドラッグ&ドロップすることで追加していきます。なお、今回はiPhoneアプリとしていますが、iPadアプリでも方法は同じです。  起動画面用の画像を用意する画像の追加画面まで確認できたら、一度Xcodeは最小化して起動画面用の画像を用意しましょう。今回はPhotoshopを使って用意してみました。見た目にこだわるのが目的ですので、アプリのイメージに沿ったものを用意しましょう。 画像のサイズここで、注意しなければならないのが起動画面用の画像のサイズです。先ほどの画面でわかるように、”2×”と”R4”の2種類があります。それぞれ画像の高さが下記の通り異なりますので注意しましょう。これは、iPhone Retina(4inch)とiPhone Retina(3.5inch)に対応するために必要です。2×：640px × 960pxR4：640px × 1136pxまた、.jpgファイルでは読み込みエラーが出ることがありますので、.pngファイルを用意すると良いでしょう。 画像の用意ができたら、先程の画像追加画面に戻ってドラッグ&ドロップで画像を追加します。完了するとこのように表示されます。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中iOSシミュレーターでチェックする起動画面に設定した画像はiOSシミュレーターで確認することができます。今回は、R4(iPhone Retina(4inch))は緑色の画像にしました。 もう1つの、2×(iPhone Retina(3.5inch))ではクリーム色の画像にしました。例として画像の色を変えましたが、iOSシミュレーターのデバイスによって別の画像が表示されることが理解できたと思います。 今回の記事は以上です。iPhoneアプリのアイコンを変更する方法の記事もあるので、合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

ほとんどの方がご存知だと思いますが、iPhone（iOS）用のネイティブアプリを開発するには、Xcodeが必要になります。 今回は初心者向けにXcodeをインストールして、プロジェクトを作成、シミュレーターの起動までご説明します。なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。 Xcode（エックスコード）とは今回紹介するXcodeとは、iOS/Mac OS用アプリの統合開発環境です。iPhoneやiPad向けのアプリはこの開発環境から開発することができます。Apple社が、AppStoreで無償配布していますが、WindowsのPCではインストールができないので注意しましょう。 また、実機の利用や、AppStoreでアプリ配布をするには、別途デベロッパプログラム（年間8,400円）に登録する必要がありますのでご注意ください。Xcodeのインストールまずは、Xcodeのダウンロードページにアクセスします。このページで「Mac App Storeで見る」をクリックします。（直接、Mac App Storeから検索してインストールすることも可能です） そのまま「インストール」のボタンをクリックします。インストールには数分かかりますので、時間の余裕があるときにインストールしましょう。 インストールが完了すると、自分のPCのアプリケーションにXcodeが追加されるので、起動してみます。 このように表示されたらインストール完了です。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中プロジェクトの作成Xcodeのインストールが完了したら、早速プロジェクトを作成してみましょう。「Create a new Xcode project」をクリックするとこのような画面が表示されます。iOSアプリを作る場合は、左上にあるiOSのApplicationを選びます。今回は、「Single View Application」を選択して、次に進みます。次にプロジェクト情報の設定を行います。 Product Nameには開発するアプリ名、Organization Nameには自分の名前、Company Identifierには、個人的な練習アプリを作る場合は「edu.self」などと入力しておくと良いでしょう。Languageでは、使用する言語をSwiftかObjective-Cから選択することができます。Devicesでは、iPhoneやiPadを選ぶことができるので、開発したいアプリに合わせて選択してください。ちなみにUniversalというのはiPhone・iPad両方に対応するという意味になります。最後に「Next」をクリックするとプロジェクトが保存できます。 これでプロジェクトが作成できました。  シミュレーターの表示最後に、簡単な画面を作ってシミュレーターで表示してみます。画面が遷移するだけのアプリなら、コーディングなしですぐに作ることができます。Xcodeの左に表示される「Main.storyboard」をクリックします。 次にボタンを設置します。右下に表示される、「Button」をドラッグ&ドロップするだけでボタンを設定できます。今回はXcodeのインストールがメインですので、細かい説明はしませんが、ボタンの色やテキストを変えることもできます。 ここまでできたら、左上にあるボタンをクリックしてみましょう。なお、ボタンの横に表示されているところから、デバイスを変えることもできます。 するとシミュレーターが表示され、先ほど作成したアプリがシミュレーター内で表示されます。ここでアプリをクリックすると、作成したアプリが表示され、画面遷移などを確認できます。 今回の記事は以上です。問題なくインストールできましたか？Xcodeのショートカットキーを紹介する記事もあるので、インストールが完了したら使ってみてください。ぜひ、いろんなアプリを作ってみてください！[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

iPhoneアプリのアイコン画像はXcodeから変更することができます。アイコン画像によってアプリのダウンロード数が変わることもあるので、重要なポイントです。そこで今回は、初心者でもアプリのアイコンを変える方法を解説します。 なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。 アイコン画像の設定方法Xcode5.0以降ではプロジェクトを作ると、自動的にImages.xcassetsというフォルダが作成されます。アイコン画像の変更はここから行います。場所はファイルツリー表示にすると見つけやすいでしょう。 Images.xcassetsをクリックすると、AppiconとLaunchimageという2項目があるので「Appicon」をクリックします。 このような画面が表示されて編集できるようになりました。 画像ファイルは、作っているアプリの対応バージョンに合う場所にドラッグ&ドロップでセットするだけです。iOSのバージョンによって画像を変えることもできます。今回はiOS7に対応したアプリという想定で、画面の上段・右端にセットします。 この際、ファイルのピクセルサイズがポイントになります。対応するOSバージョンの下に60ptとか57ptといった具合に表示されているのでそれに対応させましょう。ただし、Retina対応ディスプレイの場合は2倍の大きさのピクセルが必要になります。60ptなら120ptということです。これはアイコン用画像をセットする点線枠のすぐ下の数字で判断します。1×なら数字通りのサイズで、2×なら2倍した大きさのサイズでアイコン用画像を用意してください。設定はこれで完了です。  動作確認してみる最後に、iPhoneアプリのシミュレーターを使って動作確認してみましょう。Xcideのショートカットキーを使う場合は「⌘＋R」をクリックするとシミュレーターが起動します。さらに、「⌘+ Shift＋H」でiOSシュミレータ上でホーム画面を表示し、Appのアイコンを確認します。自分でセットした画像に変わっていれば成功です。 今回の記事は以上です。iPhoneアプリのデザインをさらに改善したい場合は、XcodeでiPhoneアプリの起動画面を変更する方法も合わせてご覧ください。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

Xcodeを使ってiPhoneアプリを開発する際に使える「ストーリーボード（Storyboard）」という機能があります。これを使うと、視覚的かつ直感的にアプリの開発を進めていくことができます。 今回はアプリ開発初心者でも使えるように、ストーリーボードの使い方をお伝えします。Storyboardの入門としてお読みください。なおこの内容は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプをもとに紹介しています。 目次今回の記事は少し長いので、下記の順番で説明していきます。ストーリーボードとはXcodeでプロジェクトを開始するストーリーボードの背景色を変えるストーリーボードに画面を追加するストーリーボードにボタンを設置するボタンをタップしたら画面が切り替わるようにするシミュレータで確認する  ストーリーボードとはストーリーボード（Storyboard）とは、Xcode4.2から導入された機能です。ストーリーボードを使うと、アプリ画面のUIパーツのレイアウトや画面遷移を視覚的に作成することができます。使う際にプログラミングの知識は不要ですので、ドラッグ&ドロップなどの操作で簡単に使うことができます。 なお、本記事ではXcode5.1のバージョンを使用しています。Xcodeのインストール方法がわからない場合は、Xcodeのインストール方法の記事をご覧ください。  [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中Xcodeでプロジェクトを開始するそれではストーリーボードを使ってみましょう。ストーリーボードを使うには、Xcodeでプロジェクトを開始する必要があるので、まずはそこから解説します。 最初にXcodeを起動しましょう。最初に下のような画面が出てきますので、赤枠をクリックします。 次に、どのようなプロジェクトにするか聞かれますので、赤枠（1）を選び、Next（2）をクリックしましょう。 さらに、プロジェクト名や開発するAppの対象デバイスを入力（1）し、Next（2）をクリックします。 最後にプロジェクトの保存先を聞かれます（1）ので、保存先を選択していきましょう。ここでCreate（2）をクリックすればプロジェクトが開始されます。ここまでは簡単ですね。プロジェクトが開始できたらいよいよストーリーボードを編集していきます。  ストーリーボードの背景色を変えるストーリーボードは、「Main.Storyboard」を開いて操作することになります。Xcodeの左ペイン、ファイルツリー表記にある、”Main.storyboard”をクリックしましょう。 すると、ストーリーボード編集画面に切り替わります。 ここで表示された画面の背景色を変更してみます。背景色の変更は、変更したいストーリーボードの画面を選択し、右ペインの(1)から”View”を開きます。すると、中段あたりに”Background”とあるのがわかると思います(2)。 これをクリックすると、背景の種類を選択できるようになりますので、一番下にある”Other”をクリックします。 ここでカラーパネルが表示されますので、好きな色に変更しましょう。今回はわかりやすいように、赤にしてみました。背景色の変更方法は以上です。  ストーリーボードに画面を追加するiPhoneアプリを開発するとなると複数の画面を用意して、切り替えて使うことが多いと思います。ここでは、ストーリーボードでもう1つの画面を追加してみます。 右ペイン中段に、4つのアイコンがあります。その右から2番目のアイコンをクリックし、”Veiw Controller”を探しましょう。それをストーリーボード画面にドラッグ＆ドロップします。 これだけで、ストーリーボードに画面が追加されました。赤枠が元の画面、黄枠が追加した画面です。  ストーリーボードにボタンを設置する続いて、ストーリーボード内にボタンを設置してみます。コードを追加すればイラストをボタンにすることも可能ですが、今回はシンプルなボタンにします。 先ほど、画面を追加したメニューを下に進んでいくと、”Button”という項目があります。これを、ボタンを設置したい画面にドラッグ＆ドロップしていきましょう。 今回は元の画面（背景色赤）にボタンを設置しました。同様に追加した画面（背景色白）にもボタンを追加しておきましょう。  ボタンをタップしたら画面が切り替わるようにするさらに、設置したボタンをタップしたら追加した画面に切り替わる（遷移する）ようにしていきます。これができればアプリっぽいものができ上がります。 先ほど設置したボタンをControlキーを押しながらクリックし、画面遷移させたい画面にドラッグ＆ドロップします。線が表示されるのですぐにわかると思います。 ここで画像のようなメニューがポップアップで表示されます。これは、「ボタンをタップしたらどういうアクションにするか」を選ぶ画面です。今はなにも考えず赤枠の”modal”を選択しておきましょう。 すると、下の画像の赤枠のように画面間に矢印マークが追加されます。 これで画面は遷移しますが、遷移した先に何もないためそれ以上進めなくなってしまします。そこで、白い画面（追加した画面）から赤い画面（元の画面）に戻るように設定しましょう。 やり方は先ほどと同じです。白い画面にボタンを設置して、赤い画面にControlキー＋ドラッグ&ドロップをします。そうすると、先ほどの矢印マークが2重になり、赤→白、白→赤となっているはずです。  シミュレータで確認するここまで完了したら、正しくアプリが動作するかをiPhoneのシミュレータで確認します。メニューバー左上にある再生ボタンをクリックするだけです。（Xcodeのショートカットキーなら⌘＋R です) シミュレータでボタンをタップします。 このように白い画面が表示されれば成功です。ここでさらに、ボタンをクリックするともとの赤い画面に戻ることも確認できると思います。  今回の記事は以上です。かなり基礎的な内容でしたが、Xcodeのストーリーボードの使い方がわかったのではないでしょうか。合わせて初心者向けのXcodeショートカットキーの記事も読むと、よりXcodeが使いこなせるようになると思います。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

Xcodeを使ってiPhoneアプリを開発して、シミュレーターでの確認が完了したら、実機でもテストしてみましょう。今回は、初心者向けにiPhoneアプリを実機でテスト（デバッグ）する方法を解説します。 なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。 目次本記事では下記の流れで紹介します。Xcodeで作業をする前の準備が必要ですので、ご注意ください。App IDの登録開発用Provisioning Profileの作成Xcodeでの作業  App IDの登録Xcodeを使って作成したアプリを実機で動作させるには、「Provisioning Profile」が必要です。こちらの登録は有料のため、無料で行うことはできません。Provisioning Profileの作成にはApp IDが必要ですので、まずはApp IDから作成します。Developer PortalのMember Centerにアクセスします。（※アカウントが必要です） そこでCertificatesにあるIdentifiers & Profilesをクリックし、さらに表示された画面でiOS AppsのIdentifiersをクリックします。 App IDの画面に遷移します。 ここで新規アプリケーションを登録するので、右上にある「＋」ボタンをクリックします。すると、iOS App IDの登録画面に遷移するので、App ID Descriptionにアプリの名称、App ID SuffixではExplicit App IDを選択して、Bundle IDを決めます。Bundle IDは通常は自己所有のドメインを後から記述し、最後にApp ID Descriptionで指定したアプリ名を記述するのが通例です。例えばcom.domain.SampleAppの様な形式です。  App ServicesではiCloud等アプリで使うであろう機能にチェックを入れて､Continueをクリックします。  確認画面が表示されますので、内容に間違いがなければSubmitをクリックして、登録は完了です。  [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中開発用Provisioning Profileの作成続いて同じ画面の左カラムにあるProvisioning Profilesセクションの「Development」をクリックします。現在登録してある開発用のProvisioning Profilesの一覧が表示されるので、右上の「＋」をクリックして新規作成をします。 表示された画面で「iOS App Development」にチェックを入れて「Continue」をクリックします。次の画面で、先ほど作成したApp IDを選択して「Continue」をクリックします。 開発者用のcertificatesが表示されますので、チェックを入れて「Continue」をクリックしてください。 次に自分が開発に利用する端末にチェックを入れて「Continue」をクリックします。 Provisioning Profileの名前を決めます。一意な名前であれば問題ありませんが、今回はわかりやすいように「App ID_dev」としました。Provisioning Fileが完成したら「Download」をクリックします。これでファイルがダウンロードされるので、ダブルクリックでXcodeに取り込みます。  Xcodeでの作業最後にXcodeでの作業です。まずは新規プロジェクトを作成します。アプリケーションの種類を決めたらプロジェクトの設定を行います。ここで、Product NameにはApp IDで決めた名前を、Company IdentifierにはBundle Identifierで入れたcom.domainまでを入力してください。なお、BUndle Identifierは後から変更できまが、Product Nameは修正できないので間違えないようにご注意ください。次にプロジェクトの保存先を決めるダイアログが開きますので､保存先を決めて「Create」をクリックします。 ここで注目したいのは「Bundle Identifier」の部分です。Company Identifierは黒文字で表示されていて変更可能ですが、App IDはグレイの文字で変更できないことがわかるはずです。次にTeamを指定します。通常はDeveloper CenterでTeamは自動的に作成されていますので、それを選択します。 続いてBuild SettingsタブのCode Signingに移動します。最初は何も設定されていません。Provisoning Profileの欄で、先ほど読み込んだProvisioning Profileを選択し、Code Signing Identitityで自分のDeveloper Profileを選択します。 これで全ての準備が整いました。Xcodeの左上にあるSampleAppと書かれた右側をクリックすると､利用可能な端末とシミュレーターの一覧が表示されます。ここから、Development用のProvisioning Profileを作成した時に指定した端末を選択して、「cmd+R」のショートカットキー実行すると実機でアプリを起動させることができます。

iPhoneアプリの開発など、iOSアプリの統合開発環境として「Xcode」があります。Xcodeは無料でインストールできますが、初心者でまだまだ使いこなしていないという人もいるかもしれません。 そこで、今回は初心者がはじめに覚えるべきXcodeのショートカットキーを10個紹介します。初歩的な内容がメインです。 なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプでも一部を紹介しています。 ショートカットキーの説明の前にショートカットキーを紹介する前に、修飾キーの略語について説明をします。ショートカットキーは略語で紹介しているので、覚えておいてください。コマンドキー:cmd(⌘)オプションキー:otp(⌥)コントロールキー:ctrl(⌃)シフトキー：shift(⇧)ファンクションキー:fn(fn)今回はcmd、opt、ctrlの3つを使いますが、残り2つも覚えておくとリファレンスを読む際の参考になると思います。 また、Appleのサポートページにもショートカットキーの説明がありますので、Xcode以外にも使えるショートカットキーは覚えておくと他の作業も効率が上がります。他に、JSキーボードの場合、「システム環境設定 > キーボード > 修飾キー」からcapsキーとctrlキーを入れ替えるとctrlキーが押しやすくなるのでおすすめです。 それでは、ショートカットキーをチェックしていきましょう。  cmd+1：左ペインファイルツリーの表示Xcodeでは、.hファイルや.mファイルだけでなくAppで使用する画像などもファイルツリーに格納していきます。そのため、ファイルツリーには比較的アクセスすることが多くなるので覚えておきましょう。  [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中cmd+4：error/Warningツリーの表示開発が一段落し「実行」しようとすると、関数の定義不足値の設定ミス、単純なタイプミスなど、様々なエラーが出ることがあります。そんな時は、「cmd+4」のショートカットでerror/Warningツリーを左ペインに表示させて、トライ&エラーをしていきましょう。  cmd+0：左ペインの表示/非表示MacBook Airの11インチなど画面の小さいPCを使っていると、Xcodeの画面が狭くてコードが見にくくなる時があります。そんな時は、このショートカットキーを使って不要なメニューを非表示にしましょう。  cmd+opt+1：ファイルインスペクタの表示左ペインと同様に、右ペインもショートカットキーで切替ができます。よく使う、ファイルインスペクタの表示を覚えておきましょう。  cmd+opt+0：右ペインの表示/非表示画面が小さい場合、またはソースコードに集中したい時は左ペインと同様に右ペインも非表示にします。先に紹介した左ペインの切替と右ペインの切替とを比べてみれば予想はつくかと思いますが、「cmd+opt+0」です。左ペインのショートカットキー+optと覚えておくと、良いでしょう。  cmd+任意のシンボルをダブルクリック：シンボルが定義された所を開くWeb上から参考にしたいソースコードをダウンロードしてそれを読むときに便利なショートカットキーです。他の人が書いたコードは、変数の定義がどこでされたのかわかりにくいことがあると思います。そんな時は「cmd+対象の任意のシンボルをダブルクリック」で定義位置を確認しましょう。自動でファイルが切り替わります。  opt+任意のシンボルをダブルクリック：シンボルをリファレンスで検索 前述した、シンボルの定義位置の確認と同じく便利なショートカットキーです。「opt+対象のシンボルをダブルクリック」でシンボルをリファレンスで検索することができます。これで、シンボルの意味をすぐに調べられます。  ctrl+.：入力補完の実行入力補完とはわかりやすく言うと、「予想表示」です。関数の最初の1文字をタイプしたあとに「ctrl+.(ピリオド)」で関数の予想が一覧で表示されます。そこから「.(ピリオド)」を押していくと、自分の入力したい関数が見つかるので、「.(ピリオド)」から指を離せば入力完了となります。最初の1文字だと候補が多すぎるので、最初の3文字くらいまで入力することをおすすめします。  cmd+ctrl+↑/↓：.hと.mの切替 Xcodeでの開発において.hファイルと.mファイルの行き来は必須ですが、面倒な作業でもあります。そんな時は「cmd+ctrl+↓/↑」で.hファイルと.mファイルを切り替えていきましょう。  cmd+R：iPhoneシミュレータの起動  最後は、開発の終わりに使うであろうiOSシュミレータの起動です。このショートカットキーをタイプすると、Buildが始まります。Buildが完了(Build Successfull）すると自動でiOSシュミレータが起動します。あとは開発したAppをシュミレータ上で起動して動作を確かめていきましょう。 かなり初歩的なショートカットキーが中心でしたが今回は以上です。ぜひ自分でも試してみてください！iPhoneアプリのシミュレーターの使い方も合わせてチェックするとXcodeがより使いこなせるようになります。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。