モバイル・アプリ勉強会 iOS編第4回 Swiftの基礎と

2015年5月29日(金) 10:00 11:30
モバイル・アプリ勉強会
iOS編第4回 Swiftの基礎と,UIImage
岩手県立大学大学院
Human Interface Lab. @ IPU2015
ソフトウェア情報学研究科
宮原崇志
目次
• 前回のあらすじ
• スライダーの処理
• UIImageについて
• JSON/XMLについて
• CloudKitについて
• おしらせ
前回のあらすじ
• タイマーのStart・Stopについて
はじめに
スライダー値の取得
STEP1
1. Sliderを追加
//UILabelをコードで定義
let Slider = UISlider(frame: CGRectMake(0, 0, 200, 30))
Slider.layer.position = CGPointMake(self.view.frame.midX, 500)
Slider.backgroundColor = UIColor.whiteColor()
Slider.layer.cornerRadius = 10.0
Slider.layer.shadowOpacity = 0.5
Slider.layer.masksToBounds = false
// 最小値と最大値を設定する.
Slider.minimumValue = 0
Slider.maximumValue = 10
// Sliderの現在位置より右のTintカラーを変える.
Slider.maximumTrackTintColor = UIColor.grayColor()
// Sliderの現在位置より左のTintカラーを変える.
Slider.minimumTrackTintColor = UIColor.blackColor()
Slider.addTarget(self, action: ShowSliderVal:", forControlEvents:
UIControlEvents.ValueChanged)
self.view.addSubview (Slider)
スライダー
スライダー値の取得
STEP2
1. Labelに値を代入
//Sliderの値が変わった時に呼ばれるメソッド
internal func ShowSliderVal(sender : UISlider){
var val = String(Int(sender.value))
Label.text = val
}
スライダー
スライダー値を取得してみよう
スライダーを使って，以下の仕様の処理を作ってみよう
[仕様]
• スライダーは3つ
• スライダーで，Viewの背景色をRGBで変化させる
完成イメージ
練習
スライダー値を取得してみよう
[UIColor]
UIColorはRGBとαの４つの引数にて設定されている
UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
各変数の値の範囲は，0.0から1.0の範囲である
各変数の型は，CGFloat型である
[CGFloat]
スライダーでは，CGFloat型で値を取得できない．
Float型で取得したあたいをCGFloat型に変換する必要がある．
例えば：0.0367769を0.03に変換すれば良い
[メソッド]
R・G・Bそれぞれのスライダーから呼び出すメソッドを定義してもよい
※Rスライダーメソッド， Gスライダーメソッドなどなど…
[背景の設定]
self.view.backgroundColor = UIColor.redcolor()
↑この場合は，背景に赤を設定している．
ヒント
UIImage 画像を使おう
STEP1
1. 画像を取り込む
Swift_Imageのxcodeprojct内にドラッグする．
STEP2
コードを追加
class ViewController: UIViewController {
// ベース画像.
let InputImage = CIImage(image: UIImage(named: "IMG_7314.jpg"))
// ImageView.
var ImageView: UIImageView!
｝
UIImage
UIImage 画像を使おう
UIImage
STEP3
UIImageViewの生成
class ViewController: UIViewController {
// ベース画像.
let InputImage = CIImage(image: UIImage(named: "IMG_7314.jpg"))
// ImageView.
var ImageView: UIImageView!
override func viewDidLoad() {
ImageView = UIImageView(frame: CGRectMake(0, 0, self.view.frame.size.width,
self.view.frame.size.height))
ImageView.image = UIImage(CIImage: InputImage)
self.view.addSubview(ImageView)
｝
CoreImage framework 画像処理
概要
CoreImageとは
・iOS5から利用可能になったframework
・以前までは，OS X10.4以降が対象であった
・顔認識や，フィルタ処理が簡単に行える
・iOS8以降機能が拡充され，openCVにも劣らないものとなった
・顔認識・まばたきの認識・車・手・モノの認識…
STEP1
読み込んだ画像にセピアフィルタをかけてみよう(ボタンを追加する)
class ViewController: UIViewController {
// ベース画像.
let InputImage = CIImage(image: UIImage(named: "IMG_7314.jpg"))
// ImageView.
var ImageView: UIImageView!
// ボタン
let Button: UIButton = UIButton()
｝
CIFW
CoreImage framework 画像処理
STEP2
1. ボタンの生成
viewDidLoad()メソッド内に，ボタンを定義
コードは省略
2. フィルタ処理を実装
// フィルタ処理(ボタン押下時に実行)
func onClickButton(sender: UIButton){
// カラーエフェクトを指定してCIFilterをインスタンス化
let mySepiaFilter = CIFilter(name: "CISepiaTone )
// イメージのセット
mySepiaFilter.setValue(InputImage, forKey: kCIInputImageKey)
// 加工の度合い
mySepiaFilter.setValue(1.0, forKey: kCIInputIntensityKey)
// フィルターを通した画像をアウトプット
var myOutputImage : CIImage = mySepiaFilter.outputImage
// 再びUIViewにセット
ImageView.image = UIImage(CIImage: myOutputImage)
// 再描画
ImageView.setNeedsDisplay()
}
CIFW
加速度の取得
加速度
STEP1
1. CoreMotionをインポートする
Import CoreMotion
2. ViewにLabelを追加
//UILabelをコードで定義
let XLabel: UILabel = UILabel(frame: CGRectMake(0, 0, 200, 50))
XLabel.backgroundColor = UIColor.blueColor()
XLabel.layer.masksToBounds = true
XLabel.layer.cornerRadius = 2.0
XLabel.textColor = UIColor.whiteColor()
XLabel.shadowColor = UIColor.grayColor()
XLabel.textAlignment = NSTextAlignment.Center
XLabel.layer.position = CGPoint(x: self.view.bounds.width/2, y: 200)
//viewにUIlabelを追加
self.view.addSubview(XLabel)
3. Y軸・Z軸も作成する
加速度の取得
加速度
STEP2
1. 加速度を取得する(X軸)
//MotionManagerを生成
Motion_Manager = CMMotionManager()
//更新周期を設定
Motion_Manager.accelerometerUpdateInterval = 0.05 //20Hz
//加速度の取得
Motion_Manager.startAccelerometerUpdatesToQueue(NSOperationQ
ueue.mainQueue(),
withHandler: {(accelerometerData:CMAccelerometerData!,
error:NSError!) -> Void in
XLabel.text = "x=¥(accelerometerData.acceleration.x)"
})
2. Y軸・Z軸も作成する
3. リファレンス
http://u222u.info/l1kE

Download Report