リブートキャンプ by Swift 目次

 

 例えば、前回のサンプルにしても、説明されてないプロパティや、クラスが出てくるわけですが…

 

   ↓こんな感じで

   message.backgroundColor = UIColor.orange

 

 そういうときにどうするかって話です。

 

 基本、単語をコピペしてググればいいです。

 まあ「backgroundColor」をそのまま検索よりはmessageはUILabelのオブジェクトだから「backgroundColor UILabel」というようにキーワードを増やして検索した方がいいでしょうね。UILabelでダメなら派生元のUIViewとかね。

 ここら辺は、みなさん心得てるとおりです。

 

 なので、ここではそれとは別の、Xcodeのクイックヘルプを使う方法も紹介しておきます。

 Xcodeにはクイックヘルプという、クラスやプロパティ、メソッドを調べる機能が用意されているんですよ。

 

 ↓それがこれだ!

 

 

 クイックヘルプに出てくる説明文は英語なんで、なかなか敷居が高いと思いますが、それでもリンクたどって関連するクラスやプロパティ、メソッドを見つけたり、それを元にググるってことはできます。

 そうすると、日本語で解説してるサイトにぶち当たる可能性があるわけです。

 あと、上のビデオで紹介したDocumentation and API Reference画面で検索すると、Apple提供のサンプルコードを見つけたりもできるのよ。

 ここら辺はプログラミングに慣れた者には結構おいしいかも。

 なんせSwiftやObjective-Cは世界共通言語ですから〜。

 プログラミング初心者は、まあ、最初に言ったように入門サイト探してSwift Playgroundsなんかで学習しましょう。

 このリブートキャンプ by Swiftでも、極力説明していくつもりっす。

 

 

 

 英語読めるならガイドなんかもオススメ。

 対象のクラスやメソッドの使い方ガイドです。

 

 

 

 ガイドはありがたいけど、さすがに英語は〜という人は、ググるしかないんですが、そういう時にも検索に使えそうなキーワードが見つかったりするので、まあ諦めずに頑張れ。

 サンプル読んでて、知らない単語に突き当たった時の対処法はそんなとこです。

 

 んじゃ、そもそも、そのサンプルにたどり着くために、iPhoneにどんな機能があるかを調べるにはどーするのというと、このサイトです。

 

 ↓アップル・デベロッパー・サイト

https://developer.apple.com/jp/

 


 

 当然ですな。

 総本山。このサイト以上の情報源はあり得ません。ただし英語です。

 最初の日本語ページに騙されちゃダメ。ちょっと読み進めるとすぐ英語ページ飛ばされるから。

 ちなみに。一番上の「開発」タグをクリックすると、開発に関する情報ページが表示されます。

 

 

 最初に漁るのはWWDCのビデオがいいかな。

 

 

 2013〜2016年のもあるけど、基本最新の年からみるといいです。

 

WWDC 2017 Keynote

 
 で、新機能の大まかな説明、あとは興味のある機能別に観るって感じなりよ。

 こいつも英語なんで、わからない人にはさっぱり(しかもプレゼンしてるの、喋りのプロじゃないので、興が乗ってくるとマシンガントークになってくるし…)だけど、キーワードは得ることができるわけで、それ使ってググりましょう。

 

 何よりキーワードを見つけることが重要。

 

 キーワードをアップル・デベロッパー・サイト内で検索することも可能っす。

 

 

 例えばUIViewで検索してVideoでフィルタリングするとこんな感じ。

 

 

 キーワードを見つけてググって、日本語の説明サイト見つけて、サンプル見つけて、知らない単語出てきたらまた調べて、そんな繰り返しっす。

 ラノベ本のあとがきにも書いたけど

 

  心配ばっかして時間を無駄にせず、とりあえず突っ走ってみてください。

  意外となんとかなります。飛んでから着地点考えましょう。

 

 で、ちょっとだけ朗報。

 アップル・デベロッパー・サイトのガイドを訳した

 

 日本語ドキュメントのページ

 

があります。

 非常にありがたいし、アップル・デベロッパー・サイトのページからもリンクが貼られているんで公式だと思うんですが、たまにリンクが消えます。今も消えてる。

 とりあえず、上に貼ったURLは健在みたいなんで、そこでFAQでも紹介してる以下のガイドを読みましょう。

 

iOSアプリケーション プログラミングガイド

iOS View プログラミングガイド

iOS View Controller プログラミングガイド

 

 Apple純正のガイドを読みたいなら、ここら辺から読むのが順当だと思われ。

 もっとも、ここら辺は「iPhone アプリ 開発」で見つけたサイト読みながら勉強でもいいと思います。

 あとSwift言語に関しては究極の説明書が、iBooksでタダで読めます。

 

 

 まあ、英語なんですがね。

 あらゆる日本語のSwift解説本はこれを原本にしてます。してなきゃ嘘。

 ここら辺も「Swift入門」あたりで見つけたサイト読むのでいいんじゃないかとは思うが…

 興味がある人はiBooks開いてStoreを

 

 Swift Programming

 

で検索だ。

 

 長々話したけど、次回からは通常運転で行きます。

 サンプル用意して、上で書いた

 

   message.backgroundColor = UIColor.orange

 

の説明や、画面タップへの反応なんかを説明入れつつやって行きます。

 

 ↓こんな感じのアプリはどー作るのか?

 

 

サンプル:

http://tetera.jp/xcc/book-sample/RPG.zip

 

 ぶっちゃけ、こういうのはUnityとかUnrealEngine、Cocosなんかを使えばいいんですけどね。直接作ったほうがいいのはTwitterとか小遣い帳、ノートとか言ったユーティリティ系ですな。

 ただ、そういうのは地味なので、とっかかりとしてはこっちの方がいいんじゃないかと思われ。

 

 ちょっと長くなってるけど、やってることは画面の貼り付けがほとんどなんで、腕試しに、ヘルプやグーグル駆使して調べてみてください。

 答え合わせは次回。

 ちなみにViewControllerクラス定義中に出てくるプロパティ

    let script = [
        "雨の日はだるい…\n今日は学校休んじゃおっかな〜",
        "誰だ"
    ]

 

は、ノーヒントだと厳しいので配列という情報だけ教えときます。「swift Array」なんかでググってみてね。

 デワデワ。

 

AD

 リブートキャンプ by Swift 目次

↑結構溜まったんでまとめました

 

 前回、画面は階層化できるって話をしましたが、そこらへんをもうちょっと具体例で示してみます。

 それと、任意の文字列を表示できるUILabelがテキストの基本なら、もう一つ、グラフィックの基本UIImageViewも知ってないとあかんでしょうということで、そっちも紹介しておく。

 

UIImageView

 

 こいつは、既存のPNGやJPEG画像を画面に表示するUIView派生クラス。

 基本的な扱いはUILabel(つまりUIView)と同じで、親画面上の矩形を指定して作り、addSubviewで子供にします。

 違うのは、表示する内容が画像なんでtextプロパティじゃなくimageプロパティってのを持っている点。

 なので、前回のUILabel版プロジェクト風にやるなら、次のようになります。

    override func viewDidLoad() {
        super.viewDidLoad()
        let imageView = UIImageView(frame:CGRect(x: 50, y: 100, width: 200, height: 200))
        imageView.image = UIImage(named: "girl")
        self.view.addSubview(imageView)
    }

 そして、imageプロパティには文字列ではなく画像を指定しなきゃならんわけですよ。

 で、画像はUIImageというオブジェクトで表現します。

 

UIImage

 

 こいつを作るときは、プロジェクトに登録した画像ファイルの名前を指定して作るのが基本。今回なら"girl"が画像ファイルの名前です。

 利用する画像ファイルは、プロジェクトにあらかじめ用意されているAssets(アセット:資産という意味じゃよ)フォルダにPNGやJPEG画像ファイルをドラッグ&ドロップして登録します。

 

 

 この時に、ファイル名がそのままAssets内での名前になり、これをUIImage作成時に指定することになるわけです。

 登録された項目を選ぶと、横の画面にサムネイルが出ます。

 2x、 3xとあるのは、iPhone 7、iPhone 7 Plusにそれぞれ最適化した画像をしてする場合用です。なければないで、1xが拡大されて使い回される。

 

 

 

 

 ちなみに、サンプルのgirl.pngは289 × 431ピクセルの大きさなので、iPhone 7用だとその2倍の578 × 862ピクセルの大きさの画像、iPhone 7 Plusだと3倍の867 x 1293ピクセルの大きさの画像を指定することになります。
 登録したらファイルのコピーがプロジェクトフォルダ内に作成されるので、元のファイルは捨てるなり保存するなり好きにしてください。

 

 ここまでできたらRun。

 

 ↓こんな感じの画面が開くことになります。

 

 

サンプル:

http://tetera.jp/xcc/book-sample/image.zip

 

 女の子が太ってるのは、元々の画像が289 × 431 ピクセルなのを、200 x 200 ポイントの矩形にスケーリングして表示してるから。解決法は色々あるけど、何も指定しないとこうなります。

 サンプルいじってimageViewの矩形を縦長にしたり色々大きさを変えて試してみるといいでしょう。

 

 上で出てきた「ポイント」は、フォントの大きさを指定する単位で、1ポイント=1/72インチという大きさです。iPhoneでは画面座標もこの単位で指定します。

 例えば、物理的な液晶の画素(ピクセル)は、初代iPhoneで横320ピクセル、iPhone 4、5では640ピクセルと、初代の2倍になってるんですが、ポイント座標での表現はどちらも320ポイントとなります。

 座標の横1ポイントの大きさに画素が1個なのが初代、2個なのがRetinaディスプレイ搭載と言われるiPhone 4以降の機種。

 より画面がきめ細やかになったわけですな。

 

 

 ちなみにiPhone 6 plusで導入されたRetina HDディスプレイだと1ポイントの画素は3個と、初代の3倍となります。

 

 ↓並べるとこんな感じ(S,SEは省略)

 

         液晶画素数  ポイント  倍率 

初代       320     320    x1

4、5        640     320    x2

6、7        750     375    x2

6 plus、7 plus  1080     360    x3

 

 液晶画素数だとかなりの開きがあるんですが、ポイントで座標を指定してる限り、画面上に表示される物理的な大きさはそこそこ統一されます。

 6以降は物理的な横幅が広くなってるのでポイントも広がってる。

 まあ、これがAssetsでのx1、x2、x3の意味でもあります。最近インフレ気味なんでPDFのベクター画像もサポートするようになりました。

 

UIView画面の階層化

 

 で、いよいよUIView画面の階層化の話です。

 今度は背景用の画面(UIImageView)の上に、前景用の画面(UIView)をかぶせてみます。で、その前景用の画面には少女の画面用(UIImageView)とセリフ画面用(UILabel)が子画面として登録されている。

 

 

 

 

 

    override func viewDidLoad() {
        super.viewDidLoad()

        //  背景
        let backgroundImageView = UIImageView(frame:CGRect(x: 0, y: 0, width: 300, height: 300))
        backgroundImageView.image = UIImage(named: "back")
        self.view.addSubview(backgroundImageView)

        //  セリフ付き前景
        let baseView = UIView(frame: CGRect(x: 20, y: 200, width: 260, height: 100))

        //  人物
        let imageView = UIImageView(frame:CGRect(x: 0, y: 0, width: 150, height: 220))
        imageView.image = UIImage(named: "girl")
        baseView.addSubview(imageView)

        //  セリフ
        let message = UILabel(frame: CGRect(x: 90, y: 130, width: 160, height: 40))
        message.backgroundColor = UIColor.orange
        message.text = "ここを通りたくば、私と"

        baseView.addSubview(message)
        self.view.addSubview(baseView)
    }

 どこにaddSubviewされてるかを注意しましょう。

 でRunすると次のようになります。

 

 

 で、これの最後に以下を付け加えてやると

    ・・・
        baseView.addSubview(message)
        self.view.addSubview(baseView)
        
        baseView.frame = CGRect(x: -50, y: 120, width: 260, height: 100)
    }

前景用の画面がまとめて移動することになるわけですな。

 

 

サンプル:

http://tetera.jp/xcc/book-sample/image-hierarchy.zip

 
 iPhoneのアプリの画面ってのは、こういうUIView、またはその派生クラスのオブジェクトの組み合わせで作り上げられとるわけですよ。
 以上、画面階層の話でした。
 ち・な・み・に、自分のアプリの画面の階層化され具合をみてみたい人は、Run中にDevag View hierarchyボタンをクリックだ!
 
 
 次回は、ここら辺の情報をどうやって見つけ出していくかについて…
 全員シャルジャー!
 
AD