Yearly Archives: 2014

App:UIデザイン時に必須!iOS のフォントと出力サンプル一覧

フォント出力見本の一覧がないとアプリのUIデザインは困難です。とくにフォントに精通していない非デザイナー出身の開発者であれば尚更です。 と言うわけで、自分用も兼ねて iOS にインストールされているフォント、サンプルコード、出力画像の一覧を作成しました。 PostScript名を調べなくてもサンプルコードをコピペすれば、即使用可能なので便利かと思いますのでお役立て下さい。 更新履歴 [2014.12.28] 表示画像のサイズを修正しました。 iOS7 フォントと出力サンプル一覧 画像ファイルが多いため、初回読み込みは少々時間がかかりますのでご了承下さい。 Academy Engraved LET Plain Al Nile Al Nile Bold American Typewriter American Typewriter Bold American Typewriter Condensed American Typewriter Condensed Bold American Typewriter Condensed Light American Typewriter Light Apple Color Emoji Apple SD Gothic Neo Bold Apple SD Gothic Neo Light Apple SD Gothic Neo Medium Apple SD Gothic Neo Regular Apple SD Gothic Neo SemiBold Apple SD Gothic Neo Thin Arial Regular Arial Bold Arial Bold Italic Arial Italic Arial Hebrew Arial Hebrew Bold Arial Hebrew Light Arial Italic Arial Rounded MT Bold Avenir Black Avenir Black Oblique Avenir Book Avenir Book Oblique Avenir Heavy Avenir Heavy Oblique Avenir Light Avenir Light Oblique Avenir Medium Avenir Medium Oblique Avenir Oblique Avenir Roman Avenir Next Bold Avenir Next Bold Italic Avenir Next Condensed Bold Avenir Next Condensed Bold Italic Avenir Next Condensed Demi Bold Avenir Next Condensed Demi Bold Italic Avenir Next Condensed Heavy Avenir Next Condensed Heavy Italic Avenir Next Condensed Italic Avenir Next Condensed Medium Avenir Next Condensed Medium Italic Avenir Next Condensed Regular Avenir Next Condensed Ultra Light Avenir Next Condensed Ultra Light Italic Avenir Next Demi Bold Avenir Next Demi Bold Italic Avenir Next Heavy… 続きを読む

Xcode:Frame Rectangle と Alignment Rectangle の違い

Storyboard でオブジェクトを配置する際に Auto Layout を使用する方も増えてきていることかと思います。 その際、インスペクタでオブジェクトの View の種類を Frame Rectangle と Alignment Rectangle(Layout Rectangle) から選べるようになっています。 一見なんの違いか分からなかったので、今回はこの違いをメモしておきます。 Frame Rectangle と Alignment Rectangle の違い Frame Rectangle 影を含むオブジェクトの矩形サイズが「Width」と「Height」に表示される。 Alignment Rectangle (Layout Rectangle) オブジェクト自体の矩形サイズが「Width」と「Height」に表示される。 iOS アプリの場合はウインドウの影を考慮した制約を与えなくてよいため、デフォルトの Frame Rectangle のままで問題ないかと思います。 まとめ Auto Layout は慣れないうちはとてつもなく不便なものに感じてしまい、直接コードで配置したくなります。 リリース当初と比べ Xcode6 あたりから随分と使いやすくなってきました。これからは頑張って使っていこうと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:Sprite Kit シーン間の画面遷移(トランジション)アニメーションサンプル

Sprite Kit であらかじめ用意されているトランジションを利用すれば、簡単に画面遷移時のアニメーションを表現することが可能です。 今回はこの画面遷移のサンプルコードと、実際の挙動をアニメーションgif で書き出しました。サンプルコードをコピペするだけで、目的のトランジションを即利用可能ですので、是非ご活用下さい。 [ 2014.12.13 gif画像の表示崩れを修正しました。] Sprite Kit シーンの移動 シーンの準備 MyScene(Sprite Kit テンプレートのデフォルトシーン) に MyScene2 クラスを追加します。 シーン移動のサンプルコード MyScene, MyScene2 の各画面をタップで、互いのシーンを行き来するようにします。 MyScene.m MyScene2.m ここまでをビルドすれば、画面タッチで2つのシーンが切り替わります。 以降のサンプルコードではこの2つのシーンを使用し説明していきます。 Sprite Kit シーン間の画面遷移(トランジション)・インデックス リンクをクリックでサンプルコードへジャンプします。 crossFadeWithDuration: doorsCloseHorizontalWithDuration: doorsCloseVerticalWithDuration: doorsOpenHorizontalWithDuration: doorsOpenVerticalWithDuration: doorwayWithDuration: fadeWithColor:duration: fadeWithDuration: flipHorizontalWithDuration: flipVerticalWithDuration: moveInWithDirection:duration: pushWithDirection:duration: revealWithDirection:duration: Sprite Kit シーン間の画面遷移(トランジション)・サンプルコード crossFadeWithDuration: MyScene.m MyScene2.m doorsCloseHorizontalWithDuration: MyScene.m MyScene2.m doorsCloseVerticalWithDuration: MyScene.m MyScene2.m doorsOpenHorizontalWithDuration: MyScene.m MyScene2.m doorsOpenVerticalWithDuration: MyScene.m MyScene2.m doorwayWithDuration: MyScene.m MyScene2.m fadeWithColor:duration: MyScene.m MyScene2.m fadeWithDuration: MyScene.m MyScene2.m flipHorizontalWithDuration: MyScene.m MyScene2.m flipVerticalWithDuration: MyScene.m MyScene2.m moveInWithDirection:duration: MyScene.m MyScene2.m pushWithDirection:duration: MyScene.m MyScene2.m revealWithDirection:duration: MyScene.m MyScene2.m まとめ カスタムクラスでオリジナルのトランジションを作成しなくても、用意されたものを上手に使用するだけで、大抵のゲームアプリは作成出来てしまいます。 Sprite Kit は後発だけあって、かなりよく出来たゲームフレームワークだと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:StoryboardからUnwind Segueを使用して前の画面に戻る

Storyboad を使用すればコーディングなしで簡単に画面遷移を行う事が可能です。 Xcode5 になってから Storyboard の利便性も少しづつ良くなっていますが、実用性のあるアプリを作成する場合には、View のレイアウトや画面遷移が Storyboard 上だけで完結するわけではありません。 誰しもサンプルアプリを作るのが最終目標ではないはずですので、実戦向けの内容としてまとめました。 Unwind Segueを使用して前の画面に戻る(準備) 準備手順 「Single View Application」テンプレートを作成し、Xcode の一番左下の「+」から「New File…」で ViewControllerクラスの SecondViewController を追加します。 Main.storyboard を選択し、ViewContoroller を配置します。 storyboard 上の ViewController を選択し、identity inspector タブ > Custom Class から SecondViewController を選択します。これで storyboard で追加した ViewController と SecondViewController が関連付けられました。 storyboard から ViewController と SecondViewController に 画面遷移のための UIButton をそれぞれ配置します。 画面遷移を確認しやすくするため、SecondViewController.m の viewDidLoad に 以下の1行を追加し、SecondViewController の背景色を赤に変更します。(背景色は Storyboard 上のインスペクタで設定してもかまいません。) 準備完了 ここまでで、プロジェクト内には以下のファイルがある状態となります。(※AppDelegate.h/mを除く) Main.storyboard ViewController.h/m SecondViewController.h/m Unwind Segueを使用して前の画面に戻る 次に Storyboard の Unwind Segue を使用して画面遷移の設定を行います。 Storyboard の Unwind Segue を使用し設定する Storyboard の ViewController に配置した UIButton を右ドラッグし、SecondViewController 上で離します。今回は segue を modal としました。これで アプリをビルドして ViewController 内のボタンをクリックすれば SecondViewController へ遷移します。(この状態では SecondViewController から ViewController へは戻ってこれません。) 続いて、SecondViewController の UIButton をクリックすれば ViewController へ戻るためのメソッドを ViewController.m に記述します。(SecondViewController.m ではないので注意。)メソッド内に NSLog を記述していますが、空でもかまいません。 Storyboard の SecondViewController の 緑色アイコンの Exit をクリックし、Connections inspector タブを選択すると、上記 firstViewReturnActionForSegue が表示されるので、右の「◯」から今度は左ドラッグで SecondViewController の UIButton へ接続します。 以上で双方向からの画面遷移の設定が完了しました。 まとめ ViewController 間での値の受け渡し等も後日まとめてみたいと思います。お疲れ様でした。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Swift:ステータスバーを非表示にする

Swift はじめました。 サクサクとコードリーディング出来るし、Objective-C から入っていると「え?こんだけでいいの?」と思うこともありますが、新しい言語の習得コストもほとんどかからないため、これからの iOS アプリ開発の即戦力となりそうです。 今回はiOSアプリ開発時に最初にぶつかるお決まりの、ステータスバー非表示に関するメモです。 Swift:ステータスバーを非表示にする ViewController に以下のコードを記述すればステータスバーが非表示になります。 ViewController.swift まとめ 現在 Swift にて開発中のアプリで色々とぶつかった問題を解決しています。 以前から準備している Objective-C の記事が残っていますので、そちらを全て公開した後は Swift に完全移行した記事にしていきたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

開発者用 iOS デバイスの早見表(非Retina と iOS 6 未満切り捨て・最新版)

下位互換 iOS 6 未満かつ非 Retina ディスプレイデバイスを排除(iPad mini (1st) を除く)した、これから対応すべき iOS デバイスの一覧表を作成しました。 iPod touch (4th) と iPhone 4 に関してはリストに残しましたが、iOS 8 に未対応なため、2015年以降は多くのアプリの対応機種から外れていくものと思われます。 iPhone デバイス 解像度 @x バージョン iOS6 iOS7 iOS8 iPhone 4 (GSM) 640 x 960 @2x 4.0 – 7.1.2 ◎ ◎ × iPhone 4 (CDMA) 640 x 960 @2x 4.2.4 – 7.1.2 ◎ ◎ × iPhone 4S 640 x 960 @2x 5.0 – ◎ ◎ ◎ iPhone 5 640 x 1136 @2x 6.0 – ◎ ◎ ◎ iPhone 5c 640 x 1136 @2x 7.0 – × ◎ ◎ iPhone 5s 640 x 1136 @2x 7.0 – × ◎ ◎ iPhone 6 750 x 1334 @2x 8.0 – × × ◎ iPhone 6 plus 1242 x 2208 @3x 8.0 – × × ◎ iPad デバイス 解像度 @x バージョン iOS6 iOS7 iOS8 iPad (3rd) 1536 x 2048 @2x 5.1 – ◎ ◎ ◎ iPad (4th) 1536 x 2048 @2x 6.0 – ◎ ◎ ◎ iPad Air 1536 x 2048 @2x 7.0 – × ◎ ◎ iPad Air 2 1536 x 2048 @2x 8.0 – × ◎ ◎ iPad mini 768 x 1024 @1x 6.0 – ◎ ◎ ◎ iPad mini 2 1536 x 2048 @2x 7.0 – × ◎ ◎ iPad mini 3… 続きを読む

Xcode:Asset Catalog の使い方と画像リソース管理について(Xcode 5以降)

Xcode 5 から登場した Asset Catalog が便利です。 すでに Asset Catalog に関する情報はいくつもありますが、これらの情報をまとめ、実際に開発時に自身で使ってみた感想を踏まえながら、メモしておきたいと思います。 Asset Catalog とは? Asset Catalog 以前でもアイコンや起動画面等の画像は Xcode の General 設定から管理できましたが、画像ファイルがアイコンサイズやデバイス毎に増えていくため、画像数が膨大なアプリになってくると、管理が大変でした。 また、多くのアプリは git でバージョン管理を行い開発を進めていくことになりますが、チームでの開発では画像ファイルが増えてくるにつれ、画像の追加や削除、修正時にコンフリクトも頻繁に発生するようになり、開発は混沌としてきます。 Asset Catalog を使用すれば、一つの Asset Catalog ファイル(.xcassets)として、画像を一元管理出来るようになり、画像ファイルの追加・削除・修正を行ってもプロジェクトファイル(.pbxproj)は変更されないため、 git でのコンフリクトから開放され開発の効率がアップします。 登場から間もないため後方互換性やローカライズ等に問題点もありますが、これから開発を始めるのであれば Asset Catalog は必須となってくるのではないでしょうか。 Asset Catalog の使い方・インデックス Asset Catalog の作成 アイコン画像の設定 スプラッシュ画像(Launch Image)の設定 アプリで使用する画像の設定 画像をスライスする Asset Catalog の使い方・詳細 Asset Catalog の作成 Xcode ウインドウの一番左下の「+」ボタン より New file… を選択します。 Resource -> Asset Catalog を選択し Next をクリック。 Asset Catarog名(ここではimages)を入力し Create で作成完了。 以降はこの images.xcasset を使用して説明します。 アイコン画像の設定 Asset Catalog エディタ左下にある「+」ボタンより New App Icon を選択 Asset Catalog のメインウインドウに表示された各項目に、準備した画像をドラッグすれば画像がセットされます。 Asset Catalog のメインウインドウで AppIcon を選択すると、右カラムの Attributes Inspector からアセット名、対応デバイス、OSのバージョン等を変更することが出来ます。 あとは Target -> General タブの App Icons 項目から Asset Catalog で定義した AppIcon を選択すると、実行環境に合わせて自動的にアイコンが反映されます。 スプラッシュ画像(Launch Image)の設定 アイコンの例と同じく、Asset Catalog エディタ左下にある「+」ボタンより New Launch Image を選択します。 Asset Catalog のメインウインドウに表示された各項目に、準備した画像をドラッグすれば画像がセットされます。 Asset Catalog のメインウインドウで LaunchImage を選択すると、右カラムの Attributes Inspector からアセット名、対応デバイス、OSのバージョン等を変更することが出来ます。 Target -> General タブの App Icons 項目から Asset Catalog で定義した LaunchImage を選択すると、実行環境に合わせて自動的に起動画面が表示されます。 アプリで使用する画像の設定 Asset Catalog エディタ左下にある「+」ボタンより New Image Set を作成すれば、アプリ内で使用する画像を設定することができます。 ここでは Ladybird という画像を設定しました。 Asset Catalog で設定した画像は、Attributes Inspector の Image Set 項目の Name を使用すれば取得出来ます。以下のコードは UIImage に Asset Catalog の画像をセットした例です。 ビルドすれば画像が表示されます。 Asset Catalog は json により参照元の画像ファイル名と Image Set 項目の Name を管理しているため、画像名や拡張子を気にしなくて使用できるのでとても便利です。 画像をスライスする Asset Catalog では、これまでコードで行っていたスライス編集が視覚的に行えます。 Asset Caltakig の メインウインドウ内右下の Show Slicing ボタンをクリックするとスライス範囲の編集モードに入ります。この例では Retina 用の画像のみを準備し編集を行います。 編集モードで Start Slicing をクリックします。 未編集の画像を選択した場合、3種類のアイコンが表示されます。左から横方向のスライス、縦横両方向のスライス、縦方向のスライスとなります。今回は縦横両方向を選択します。 以下のようにガイドを設定することで、グレーになっている部分がトリミングされます。このガイドの操作は、言葉で説明するよりも実際に触りながらの方が分かりやすいかと思います。 ビルドすればトリミングされていることが確認できます。 まとめ Asset Catalog のスライス編集は、角丸のボタンやウインドウのフレームのストレッチ時のトリミング位置を指定することで、角丸のサイズを保ちつつ様々な大きさのオブジェクトに対応させることが可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Objective-C:Sprite Kit Texture Atlas を使用しアニメーションを表示する

SpriteKit の Texture Atlas を使用すれば、驚くほど簡単にアニメーションを作成することができます。 今回は Texture Atlas でアニメーションを実装する手順と注意点を説明したいと思います。 Texture Atlas を使用しアニメーションを表示する 概要 Texture Atlas フォルダの準備 アニメーション画像の準備 フォルダを Xcode プロジェクトにコピー プロジェクトの設定 コードの記述 手順の詳細 Texture Atlas のフォルダを Finder 上で新規作成します。フォルダ名の末尾は必ず .atlas にします。ここでは ball.atlas としました。 Photoshop等で画像を作成します。ボールがバウンドする画像を作成し ball.atlas フォルダ内に書き出します。画像ファイル名は任意のもので結構です。 Texture Atlas のフォルダをドラッグし、Xcode のプロジェクトに追加します。 Destination の Copy items… にチェック、Create Groups… を選択し、Add to targets をチェック し Finish をクリックします。 SpriteKit のプロジェクト新規作成(※)し、プロジェクトの設定の BuildSettings から、SpriteKit Deployment Target > Enable Texture Atlas Generation を Yes にします。先に Texture Atlas のフォルダをプロジェクトに追加しておかないと Enable Texture Atlas Generation 項目は表示されません。 ※プロジェクトファイルが置かれているパスに日本語が入っていると Texture Atlas が表示されないので注意。 タッチした場所でボールアニメーションが実行されるように、touchesBegan デリゲートに以下のコードを記述します。 ビルドして画面をタッチするとアニメーションが実行されます。とても簡単です。 まとめ Sprite Kit は楽しいですね。Swift の学習と並行しながら Sprite Kit で遊んでみようと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Apple が OS X Yosemite, iPad Air 2, iMac Retina を発表!ついでに iPad mini 3 と Mac mini も

現地時間10月16日午前10時(日本時間10月17日午前2時)にアップルの発表イベントが開催されました。 発表されたプロダクトは以下の通りとなります。 Mac OS X Yosemite (Ver.10.10) & iOS 8.1 iPad Air 2 iPad mini 3 iMac Retina 5K Mac mini iOS 8.1 は翌週のリリースですが、そのほかのプロダクトに関してはイベント終了後にリリース・購入可能となっています。 Mac OS X Yosemite & iOS 8.1 10月16日に Mac OS X Yosemite がついにリリースされました。発表された内容は以前から何度もアナウンスされているものでした。 ここでは発表会のプレゼンの中から気になった機能だけをピックアップしてみたいと思います。 Mac OS X Yosemite デザイン グラフィックがフラットデザインになりました。フォントフェイスも全て新しくなっています。 iWork Keynote,Pages,Numbersが新しくなりました。既存ユーザーであればアップデートは無料です。 iCloud Drive OS X と iOS デバイス間でのデータのやり取りを iCloud Drive で行えるようになりました。この iCloud Drive は Windows でも利用可能なので、これからは Dropbox をはじめとする他社のクラウドストレージが不要となっていくのかもしれません。 Continuity Mac での作業の続きを iPad や iPhone で、iPhone のメッセージを Mac のキーボードで返信する、といった連携がデバイスを意識することなく行えるようになりました。 Instant Hotspot iPhone を持ち歩いていれば MacBook等から iPhone の設定を変更することなく瞬時にネットワークへアクセスすることが出来ます。いままでは都度 iPhone の Wifi でインターネット共有を選択しなければ行けませんでしたのでこれは便利です。 スクリーン共有 他社の画面共有サービスを利用しなくても、会話をしながら Mac の画面を共有できるようになりました。Mac 上でブラウザを開いて情報共有等ができるので助かります。 iOS 8.1 iOS 8.0 登場から1ヶ月程度で iOS 8.1 へのアップデートとなります。この1ヶ月のマイナーアップデートでは、通話不可、Touch ID 利用不可等の致命的なバグにより、アップデートに消極的なiOSデバイスユーザーも多いと思います。 このアップデートは主に Apple Pay の機能の開放を目的としているため、日本のユーザーにとってはバグフィックスが行われ、より信頼性が向上した iOS 8 といった捉え方で問題ないかと思います。 リリースは Apple Pay のサービス開始に合わせ、10月20日(日本は10月21日)となっています。 iPad Air 2 発表当日に Apple 直々に画像流出させてしまった iPad Air ですが、プレゼンテーションの時間、デザイン、性能を見る限り、この iPad Air 2 が今回のイベントの目玉のようです。 前モデルとの違い デザイン iPhone 6 同様のラウンドフォルムにはなりませんでしたが、本体の厚さが 7.5mm から 6.1mm へと更に薄くなりました。重量も 478g から 437g へと軽量になっています。噂通りゴールドモデルもバリエーションに加わりました。プロモーション映像では、鉛筆を更にレーザーで削ぎ落とした厚さと同等である演出をおこなっています。 Touch ID 以前から噂されていた通り、Touch ID が実装されました。iPhone の Touch ID に慣れてしまうと Touch ID がないはずの iPad のホームボタンでも指紋認証のアクションをとってしまうことがありましたが、今後はこのようなことが解消されますね。 A8XチップとM8モーションコプロセッサ これまで最新の iPad には最新の iPhone の1世代前のプロセッサが搭載されていただのですが、ここに来て iPad Air には最新機種の iPhone 6 と同等の A8系チップ A8X が搭載されました。 iSightカメラ 5メガピクセルから8メガピクセルへアップデートされました。iPad シリーズの中で 8メガピクセルの iSight カメラを実装したのは今回の iPad Air 2 が初です。また、iPhone ではおなじみの連写機能のバーストモード、スローモーション撮影機能も追加されました。 価格 iPhone 6 同様 32GB モデルがなくなりました。32GB を外すことで価格の差別化を行っているのですね。このラインナップでは 16GB モデルにお得感はなく 64GB モデルを選んでしまいそうになります。これこそが Apple の狙いなのでしょう。 Wi-Fi モデル 16GB ¥53,800 (税別) 64GB ¥64,800 (税別) 128GB ¥75,800 (税別)… 続きを読む

Mac OS X Yosemite アップグレード後に MAMP から Apache が起動しない場合の対処方法

Yosemite アップデート後に MAMP から Apache が起動しなくなりましたが、すぐに解決したのでメモしておきます。 MAMP から Apache が起動しない場合の対処方法 MAMP を終了させる アプリケーション > MAMP > Library > bin へ移動 envvars ファイルを探し _envvars へリネーム 完了 まとめ Yosemite アップデート後のトラブルは他にもあると思いますが、問題を解決次第サイトで公開していきたいと思います。