Monthly Archives: December 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… 続きを読む

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で共有していただければ幸いです。