Apple公式Swiftのチュートリアルビデオ

Tweet

Pocket

アップルから「Building Your First Swift App Video」という簡単なアプリを作成するチュートリアルビデオが出ました。

わずか6分13秒で以下のポイントでアプリケーションを作成します。

• Single View
• ImageView
• Navigation ControllerとToolbar
• 画像フィルタ

動画が再生できない場合は、こちらでご覧下さい。

0:15 プロジェクトの作成

Xcodeを起動して、Create a new Xcode projectをクリックします。
iOS ApplicationのSingle View Applicationを選択します。
プロジェクト名を入力して、言語はSwift、DevicesはUniversalを選択します。

0:41 画像リソースの追加

左サイドにProject Navigatorがあってファイルが確認できます。
デスクトップから画像をドラッグ＆ドロップでProject Navigatorに持ってきます。

1:04　Image Viewの追加

右サイド下のObject libraryからimage viewと検索して、見つかったImage ViewをView Controllerまでドラッグすると、ガイドが表示されてぴったりあてはめることができます。
ImageViewを選択して、右サイド上のAttributes Inspectorを表示します。
Imageにプロジェクトに登録した画像を選択して入れます。
表示された画像がゆがんでいるので、ViewのModeをAspect Fillにします。

2:30 タイトルやボタンの追加

StroyBoardのView Controllerのボタンをクリックして、メニューからEditor->Embed In->Navifation Controllerを選ぶとNavigation Controllerが追加されます。
View Controllerのトップでダブルクリックするとタイトルを入力できます。
Navigation Controllerを選択して、Attributes InspectorでShow Toolbarにチェックを入れるとToolbarが追加されます。
Object libraryからBar ButtonをView Controllerに追加して、タイトルをApply Filterとします。
Flexible SpaceをBar Buttonの両サイドに入れるとセンタリングができます。

3:24 他のデバイスでの表示確認

Assistant EditorをクリックしてPreviewに切り替えるとiPhoneでの表示が確認できます。
右のPreview画面左下の＋ボタンを押すと、iPad等他のデバイスの表示も追加できます。

4:13　ストリーボードとソースコードの連携

PreviewをAutomaticに戻します。
ストリーボードからImageViewをCtrlを押しながらソースにドラッグし、outletを追加します。
ストリーボードからApply FilterボタンをCtrlを押しながらソースにドラッグし、Actionを追加します。

5：12　処理の実装

追加したActionにボタンを押されたときの処理を実装します。
実装が完了したら左上のBuildボタンを押して、Simulatorで動きを確認します。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var photoImageView: UIImageView!
    
    // Create a place to render the filtered image
    let context = CIContext(options: nil)
    
    @IBAction func applyFilter(sender: AnyObject) {
        
        // Create an image to filter
        let inputImage = CIImage(image: photoImageView.image)
        
        // Create a random color to pass to a filter
        let randomColor = [kCIInputAngleKey: (Double(arc4random_uniform(314)) / 100)]
        
        // Apply a filter to the image
        let filteredImage = inputImage.imageByApplyingFilter("CIHueAdjust", withInputParameters: randomColor)
        
        // Rendered the filtered image
        let renderedImage = context.createCGImage(filteredImage, fromRect: filteredImage.extent())
        
        // Refletct the change back in the interface
        photoImageView.image = UIImage(CGImage: renderedImage)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Tweet

Pocket