読者です 読者をやめる 読者になる 読者になる

AWS勉強会

AWS勉強会

AWSの勉強会に参加してきました。

勉強会タイムスケジュール
タイムスケジュール
19:30~ AWS Elastic Beanstalk
20:30~ AWSへの移行
20:50~ 質疑応答
21:00~ 勉強会終了

勉強会メモ

AWS Elastic Beanstalk

Elastic Beanstalkは、AWSにアップロードするための簡単な方法
細かいことができるPaaS

Elastic Beanstalk
分類 Deploy&Management(今はコンピューティング)
利点 作成したアップロードするだけで展開されて確認ができる。
本番公開もできる。
アプリの利用環境を手作業で作成する必要がない。
サーバーやロードバランサーなど構築しなくてもいい。

対応のプラットフォーム

  • Dokerの上で立ち上げることもできるようになった(最近追加されたらしい)
  • 基本的に無料(リソース分はお金がかかる)

論理構成

  • configuration Template:どういう風に立ち上げるかを保存しておくファイル

デプロイ

環境について

  • Web Server:作る時に選ぶ(今回はこっち)
  • Worker Server:受け渡して処理して回答を得たい時に使う

操作するツール

機能について

環境構築機能

モニタリング対象

  • URLアクセス
  • ELBの存在
  • CNAMEの設定?などなど

ログの閲覧

  • DNS swapping
  • Route53などのDNS機能が必要になるが非常に便利に利用可能
  • swappingすることで違うサイトで見てたのがうまくできるようになる

デモ

AWSのコンソールで触る
1. 左のメニューElastic Beanstalk
2.「今すぐ作成しましょう」または「アクション」のボタン
3.ウェブサーバーの作成

ウェブサーバーの作成
環境タイプ プラットフォーム → なんでも(Dokerとかある)
環境タイプ → 負荷分散と単一インスタンス(今回はこっち)どっちも操作は変わらない
送信元(ソース) 初めての場合サンプルアプリケーション
作り上げたものが表示される画面(とりあえず作った画面確認したい時はサンプルでいい)
環境名 ドメインを選ぶのを管理(使えるかチェックする)
自社のDNSを用意しなくてもこのアドレスをコピーして貼り付ければ見れる
その他のリソース VPCに〜〜にチェック
インスタンスタイプ t1microとかのちっさいやつ選んどく
システムタイプ そのまま拡張でいい
ルートボリュームタイプ なんでも。今回はマグネチィック
環境タグ ネームタグをつけれるけど勝手につけてくれるのでなくてもいい
VPC 事前準備必要
パブリック 公開するかどうか
セキュリティーグループ 許可するしない
アクセス権限 インスタンスプロファイル(サーバーに対しての権限設定)
サービスロール 初期値のものでいい

4.確認画面で開始

  • 右側のプラットフォームはなにがうごいているか(今回はPHPでデモしてもらいました)
  • だいたい5分くらいかかる
  • 終わると右側のURLにアクセス
  • 作ったファイルが動いてるサンプルページが開く(環境は作成完了)
  • 作ったサンプルのソースをあげることができる

5.アップロードとデプロイ

  • 作ったファイルをアップロード
  • バージョンラベルを入れるの重要
  • アップロードした情報を入れたり紐付けしたりするので少し時間がかかる
  • 実行バージョンが変わる(この環境で動いてますよということ)
  • アプリケーションのバージョン変更(どの環境に適用されてますよっていうのが見える)
  • 新しいのにあげたけど元戻したい場合チェック入れたらアプリケーション環境を呼び出すことができる
  • 環境変えたらまたぐるぐる回ってバージョン変更することができる
  • 以前のバージョンの環境では見えなくなる(Not found出る)
  • インスタンス停止とか削除できるけどダメ!Elastic BeanstalkはEC2が動いてるか監視してるので 強制終了したことになっちゃって新しいのを立ち上げないとと思っちゃう
  • 本来止まってたのが動いてる

※ メモリの使用率はEC2見れない
→ Elastic Beanstalkの画面から見れる(CPUの使用率とか)

※ アクションからクローンを作れて、本番用に、今作ってるバージョンと同じものを公開するというのもできる

感想

AWSはまだ触ったことが無くて、勉強会では知らないワードがたくさん出てきましたが、とても興味を持ちました。
今年中に何かWebサイト作って、ちゃんと勉強して使ってみようと思います。
今回はElastic Beanstalkについてでしたが、EC2をまず触ったことがなかったので、まずはEC2から始めてみます。

Swift:ImageViewの色を変える(Xcode)

UIColorを使ってImageViewの色を変える

背景の色を変えるだけの簡単なアプリを作ります。

完成イメージ
上部の色のボタンをタップすると背景の色が変わります。

f:id:marikooota:20160917161329p:plain

UIColorを使って色を変える場合、使うImageは単色でなければいけません。
そのため、柄付きの画像の色を変えたい場合は、背景と柄を別々のImageViewに分けてStoryboard上に配置します。

1.Storyboard上にImageViewを配置する

7ちゃんの画像と背景の画像を別々のImageViewに入れてConstraintsを追加します。

f:id:marikooota:20160917161739p:plain

背景は全面に配置しています。 全面に配置するConstraintsの追加方法は前回のブログ を参考にしてください。

2.色ボタン用にButtonを4つ配置する

f:id:marikooota:20160917163048p:plain

ButtonのDefault Imageにボタンの画像を指定します。

f:id:marikooota:20160917163339p:plain

f:id:marikooota:20160917163546p:plain

すべてのButtonにそれぞれの画像を指定します。

3.色ボタンと背景をViewControllerと紐付ける

f:id:marikooota:20160917164504p:plain

4.ViewControllerにボタンをタップする処理を書く
    @IBOutlet weak var backgroundImageView: UIImageView!
    @IBOutlet weak var redButton: UIButton!
    @IBOutlet weak var blueButton: UIButton!
    @IBOutlet weak var greenButton: UIButton!
    @IBOutlet weak var yellowButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // 色ボタンを配列に入れる
        let buttons = [redButton, blueButton, greenButton, yellowButton]
        
        for button in buttons {
            // アクションの設定
            button.addTarget(self, action: #selector(ViewController.tapButton(_:)), forControlEvents: .TouchUpInside)
        }
    }
    
    // 色ボタンがタップされると呼び出される
    func tapButton(sender: UIButton) {
        if let button = sender as? UIButton{
            if(button == redButton){
               //TODO:色を変える処理
            }
        }
    }
5.ViewControllerに色を変える処理を書く

viewDidLoad()に以下のコードを追加します。

// テンプレートとしてbackgroundImageViewを描画する
        backgroundImageView.image = backgroundImageView.image?.imageWithRenderingMode(.AlwaysTemplate)

.imageWithRenderingMode(.AlwaysTemplate)を指定すると、ImageViewをテンプレートとして描画できるようになります。
デフォルトでtintcolorが青色に設定されているので、背景の色が青色になります。

f:id:marikooota:20160917170817p:plain

デフォルトの色はStoryBoard上でも変更することができますが、独自の色を作って色を設定したいので、今回はStoryBoard上では変更しません。

※Storyboard上でデフォルトの色を変える場合

f:id:marikooota:20160917171242p:plain

6.独自に指定した色を使えるように処理を書く

独自の色を指定したいので、RGBで指定した色を使えるようにします。

swiftのUIColorはデフォルトでRGBの値を0.0~1.0の値で扱って、インスタンスを生成できる仕様になっています。

backgroundImageView.tintColor = UIColor(red: 0.0, green: 0.0, blue: 1.0, alpha: 1.0)

※ alphaは不透明度

ですが、RGBは3桁表記で扱うことが多く、0.0~1.0の値で指定するのは結構難しいです。
そこで、extensionに以下のように定義するとRGBを3桁で扱えるようになります。

// RGBカラーを3桁で扱えるようにする
extension UIColor {
    class func rgb(r: Int, g: Int, b: Int, alpha: CGFloat) -> UIColor{
        return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: alpha)
    }
}

extensionを定義した上で、UIColorでRGBを指定すると、思い通りの色を指定することができます。

classにRGBで色を定義する。

    class ConstColor{
  // 色の指定
        func red() -> UIColor {
            return UIColor.rgb(219, g: 94, b: 67, alpha: 1.0)
        }
        func green() -> UIColor {
            return UIColor.rgb(88, g: 178, b: 150, alpha: 1.0)
        }
        func blue() -> UIColor {
            return UIColor.rgb(82, g: 146, b: 207, alpha: 1.0)
        }
        func yellow() -> UIColor {
            return UIColor.rgb(234, g: 206, b: 75, alpha: 1.0)
        }
    }

色の準備は以上で、定義したUIColorを呼び出すことで色を変更することができます。

7.classに指定したUIColorを色ボタンが押されたタイミングで呼び出して背景の色を変える

色ボタンが押されると、tapButton関数が呼ばれて、各色ボタンごとに背景の色が変わります。

※全体のコード

class ViewController: UIViewController {

    @IBOutlet weak var backgroundImageView: UIImageView!
    @IBOutlet weak var redButton: UIButton!
    @IBOutlet weak var blueButton: UIButton!
    @IBOutlet weak var greenButton: UIButton!
    @IBOutlet weak var yellowButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // テンプレートとしてbackgroundImageViewを描画する
        backgroundImageView.image = backgroundImageView.image?.imageWithRenderingMode(.AlwaysTemplate)
        // 初期表示は背景の色が緑
        backgroundImageView.tintColor = ConstColor().green()
        
        // 色ボタンを配列に入れる
        let buttons = [redButton, blueButton, greenButton, yellowButton]
        
        for button in buttons {
            // アクションの設定
            button.addTarget(self, action: #selector(ViewController.tapButton(_:)), forControlEvents: .TouchUpInside)
        }
    }
    
    // 色ボタンがタップされると呼び出される
    func tapButton(sender: UIButton) {
        if let button = sender as? UIButton{
            // 各色ボタンが押された時の処理
            if(button == redButton){
            // 背景のtintColorを赤色に変える
               backgroundImageView.tintColor = ConstColor().red()
            }
            else if(button == blueButton){
                backgroundImageView.tintColor = ConstColor().blue()
            }
            else if(button == greenButton){
                backgroundImageView.tintColor = ConstColor().green()
            }
            else{
                backgroundImageView.tintColor = ConstColor().yellow()
            }
        }
    }
    // 色の指定
    class ConstColor{
        func red() -> UIColor {
            return UIColor.rgb(219, g: 94, b: 67, alpha: 1.0)
        }
        func green() -> UIColor {
            return UIColor.rgb(88, g: 178, b: 150, alpha: 1.0)
        }
        func blue() -> UIColor {
            return UIColor.rgb(82, g: 146, b: 207, alpha: 1.0)
        }
        func yellow() -> UIColor {
            return UIColor.rgb(234, g: 206, b: 75, alpha: 1.0)
        }
    }

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

// RGBカラーを3桁で扱えるようにする
extension UIColor {
    class func rgb(r: Int, g: Int, b: Int, alpha: CGFloat) -> UIColor{
        return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: alpha)
    }
}
8.実行
  • 初期表示
    f:id:marikooota:20160917183843p:plain

  • 赤のボタンがタップされた時
    f:id:marikooota:20160917183940p:plain

  • 青のボタンがタップされた時
    f:id:marikooota:20160917184009p:plain

  • 黄色のボタンがタップされた時
    f:id:marikooota:20160917184034p:plain

参考サイト [swift]RGB値でUIColorを作成するextension - Qiita

Swift:起動画面を作る(Xcode)

起動画面"LaunchScreen"をつくる

起動時のスプラッシュ画面を作る時は、Main.storyboardとLaunchScreen.storyboardにimageを設定します。

今回は、launchimage1.pngとlaunchimage2.pngという2枚の画像を用意して、起動時に2枚の画像を切り替えて表示するだけの簡単なアプリを作ります。

f:id:marikooota:20160917141800p:plain

LaunchScreen.storyboardの設定

LaunchScreen.storyboardには起動時のスプラッシュ画面で表示する画像を設定します。
LaunchScreen.soryboardにスプラッシュ画面の画像を設定しておくと、画面遷移の処理など書かなくても自動でMain.storyboardに遷移してくれます。

1.LaunchScreen.storyboardにImageViewをこのように全面に配置します。

f:id:marikooota:20160917142239p:plain

ImageViewのimageに用意した起動時の画像を指定します。

f:id:marikooota:20160917142439p:plain

2.ImageViewにConstraintsを追加します。
全面に画像を配置したいので以下のようにConstraintsを追加します。

  • Constrain to marginsのチェックを外して
    Trailing Space = 0 (右)
    LeadingSpace = 0 (左)
    Top Space = 0 (上)

  • Aspect Ratioにチェック

f:id:marikooota:20160917143408p:plain

  • Vertically in Container = 0 (y軸)

f:id:marikooota:20160917144426p:plain

LaunchScreen.storyboardの設定は以上です。

f:id:marikooota:20160917144636p:plain

Main.storyboardの設定

と言っても、LaunchScreen.storyboardと同じ設定をするだけです。
ImageViewを追加、ImageViewのimageに用意していた画像(起動後)を設定制約(Constraints)を追加してください。 f:id:marikooota:20160917145517p:plain

実行

起動時(7ちゃんの後ろ姿)

f:id:marikooota:20160917150207p:plain

起動後(7ちゃんが前向いた)

f:id:marikooota:20160917150234p:plain

こんなアニメーションっぽいことも簡単にできちゃいました。

Swift : 2nd week

Swift勉強会

Swiftビギナーズ勉強会に参加してきました。

Swiftビギナーズ勉強会 第16回 #swiftbg - Swiftビギナーズ倶楽部 #swiftbg | Doorkeeper

幅広い年齢層の方々が参加されていて、個人アプリを作りたい方も大勢おられました。志が同じ人たちが集まって勉強するのって素敵だなと感じました。
初めて勉強会に参加だったため少し緊張していましたが、同じテーブルの方々とたくさん話すことができ、綺麗なコードの書き方を教えていただいたり、Xcodeの便利機能を教えていただいたりできたので、とても楽しかったです。
Swift勉強を始めたばかりなので、知らないことをたくさん知ることができて収穫だらけの1日でした。

タイムスケジュール
14:00~ 勉強会の説明
14:10~ ブレイクタイム
14:20~ ショートセッション
「SwiftでのError Handlingを学び直す!」
「Swiftで遊ぼう!Swift Playgrounds & Play grounds for Xcode7.3.1」
「花火かんたん撮影アプリ “Air Hanabi”の技術紹介」
「セキュアプログラミング初心者向け」
16:00~ もくもく会
17:30~ 成果発表
18:00 終了
Error Handlingの書き方 メモ
  1. Error Typeプロトコルに準拠した列挙型(enum)でエラーを定義する
    (Swift3.0ではError Protocol)
  2. throwsをつける(関数名 メソッド名の()の後に付ける)ことでエラーを投げる可能性があることを宣言。必ずエラーを投げる必要があるわけではない
  3. throwで定義したエラー投げる
    エラーが投げられなかった時だけ最後の処理が行われる
  4. do-catch構文(try catchみたいな)
    doブロックでエラーが起きそうな処理を書く
    catchでそれぞれのエラー内容を処理する
Xcode7.3のPlay groundsのメモ
  • Playground上のUIパーツにタッチして操作できるように → XCPlaygrounds
  • 話を戻してXCPlaygroundsはXCPlaygroundフレームワークをインポートすることで使える。

(Playground自体使ったことがなかったのですこ〜しだけ使ってみました)
File > New > Playground
Playgroundを作成すると、このように表示されます。 左側(背景が白)で編集して、右側(背景が灰色)に結果が即座に表示されます。
f:id:marikooota:20160815152116p:plain

例えば現在の時間を表示させる機能を実装に加えようと思った時に、このような構文で確認することができます。

let now = NSDate()

実際にどういう風に画面に表示されるかは実行してみないとわからないですが、Playgroundを使うとこのように結果が即座に表示されるので、どのような形で表示されるのかを確認することができるのです。

f:id:marikooota:20160815152012p:plain

Swift Playgrounds (iPad) メモ
  • プログラミング学習のためのアプリケーション
  • Swiftのコードを手軽に書いて遊べる
  • iPadで利用可能
  • 現在はiOS10 Betaで利用可能

www.apple.comiOS 10を搭載したiPad Air®、iPad Pro™、iPad mini™ 2以降の全モデルに対応

iPad mini2を持っていたので実際にやってみました。

  1. iOS 10にアップデートするとPlaygroundsが表示されています。

f:id:marikooota:20160815181041p:plain

2.起動するとこのような画面が起動されます

f:id:marikooota:20160815181144p:plain

3.画面下部にコードの入力補助が出てくるので、タップすると簡単にコードを書くことができます。
moveForward()・・・前に進む
collectGem()・・・・宝石をゲット
赤い宝石をゲットできるようにコードを組んだら、「Run My Code」をタップしてキャラクターを動かします。

f:id:marikooota:20160815181222p:plain

4.成功!

f:id:marikooota:20160815181639p:plain

まだ最初の3回分しかやってみていないですが、他にもできることが沢山あって遊びがいがありそうです。
子供でもゲーム感覚でコードを組むことができるので、プログラミング学習の第一歩目にはピッタリじゃないかなと思いました。
私でもめちゃくちゃ楽しめました。


セッションでは資料のコードを見ながら説明してくださいました。Swiftビギナーズ勉強会サイトのFacebookから閲覧することが可能です。

Facebook: https://www.facebook.com/groups/swiftbg/

もくもく会で書いたコード

ショートセッション後のもくもく会では、前回のブログで作っていたアプリに画面遷移の機能を加えていたので、そのコードの修正をしました。
綺麗なコードに生まれ変わりました。

ViewController.swift

画像をスクロールバーに追加する部分(前回のコードを修正)

 @IBOutlet weak var scrollview: UIScrollView!
    @IBOutlet weak var imageView: UIImageView!
    
    let nanaFace = UIImage(named:"nanaFace.png");
    
    let mura = UIImage(named:"mura_eye.png");
    let nana = UIImage(named:"7_eye.png");
    let maro = UIImage(named:"maro_eye.png");
    
   
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "Chose your eyes"
        
        // 三つの画像を配列に加えます
        let images = [mura, nana, maro]
        
  // UIImageViewにUIIimageを追加
        var imageViews = [UIImageView]()
        for image in images {
            imageViews.append(UIImageView(image:image)) // appendで追加
        }
        
        scrollview.frame = CGRectMake(0, 0, 200, 300)
        
        scrollview.contentSize = CGSizeMake(240*3.8,0)
        
        // UIImageViewのサイズと位置を決める(x,y,width,height)
  // 画像同士の間隔と画像サイズを足してXポジションの位置を決める
        var xPosition : CGFloat = 100
        for image in imageViews {
            let size: CGFloat = 180
            let space: CGFloat = 20
            image.frame = CGRectMake(xPosition, 0, size, size)
            xPosition = xPosition + size + space
        }

        // ImageViewにアクションをつけれるようにする
        for image in imageViews {
            image.userInteractionEnabled = true
        }
        
        // 関数を呼び出す
        for image in imageViews {
            let tapRecognizerImage = UITapGestureRecognizer(target: self, action: #selector(ViewController.tapImage))
            image.addGestureRecognizer(tapRecognizerImage)
            
            tapRecognizerImage.delegate = self;
        }
        
        // UIImageViewをScrollViewに追加
        for image in imageViews {
            scrollview.addSubview(image)
        }
        
        // 1ページ単位でスクロールさせる
        scrollview.pagingEnabled = true
    }

画面遷移部分

   func tapImage(sender: UITapGestureRecognizer) {
        if let imageView = sender.view as? UIImageView { //※1
            performSegueWithIdentifier("toViewController2",sender: imageView) //※2
        }
    }

    // Segue 準備
    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject!) {
        if let imageView = sender as? UIImageView {
            if (segue.identifier == "toViewController2") {
                let vc2: ViewController2 = (segue.destinationViewController as? ViewController2)!
                // 遷移先のUIImageViewに選択した画像を設定
                vc2.imageKii = imageView.image
                // 遷移先の背景になる画像を設定
                vc2.imageFace = nanaFace
            }
        }
    }

※1 as?と記述すると型変換(ダウンキャスト)が成功するかわからない場合に使用する。失敗した場合にはnilが返る。強制ダウンキャストの時はas!を使う。

※2 performSegueWithIdentifier("SegueのIdentifier", 画面遷移のsender)

ViewController2.swift
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var imageViewFace: UIImageView!
    
    var imageKii : UIImage?
    var imageFace : UIImage?
    
    override func viewDidLoad() {
        super.viewDidLoad()

        if(imageKii != nil){
            imageView.image = imageKii
        }
        if(imageFace != nil){
            imageViewFace.image = imageFace
        }
    }

実行します。

  • 初期画面

f:id:marikooota:20160815165335p:plain

  • むらちゃんの目をタップした時

f:id:marikooota:20160815165410p:plain

  • 7ちゃんの目をタップした時

f:id:marikooota:20160815165434p:plain

  • マロくんの目をタップした時

f:id:marikooota:20160815165458p:plain

完!

Swiftで遊ぼう!Swift Playgroundsやってみた! #swiftbg | TickleCode
[iPhone] UITapGestureRecognizer と Segue を使い、タップして画面遷移させるやり方
【Swift】Storyboardの画面遷移(push)をコードから呼ぶ - Qiita
isとasの挙動についていろいろ試す - Qiita
Swift as!について - Qiita

Swift : 1st week

プロジェクトを作ってみる

Swift学習始めました。
よしやろうと思ったものの、何から手をつけたらいいかが全くわからなかったのでとりあえずプロジェクトを作ってみました

File > New > Project > Single View Application を選択する

f:id:marikooota:20160806113310p:plain

ボタンをタップするとラベルの文字が変わるアプリ

1.Story boardにラベルとボタンを配置します。

2.右下のリストから、ButtonとLabelをドラッッグ&ドロップします。

f:id:marikooota:20160806121518p:plain

3.ViewController.swiftにはこのように書く。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    @IBAction func tap(sender: AnyObject) {
        self.label.text = "test"
    }
}

4.storyboardのLabelと@IBOutletを紐付けます。

5.実行ボタンを押して実行します。

6.ButtonをタップするとLabelの文字がtestという文字に変わります。

f:id:marikooota:20160806184839p:plain

画像を綺麗に配置する

AutoLayout

iPhoneにはiPhone5iPhone6iPhone6 Plusなど、それぞれの端末によって画面のサイズが異なります。 例えば、iPhone6を基準にレイアウトを組んでいるとして、右から○○px、左から○○pxのように指定すると、iPhone6では綺麗に表示されていたのにiPhone Plusでは何だか右よりだなぁということが起きてしまいます。 AutoLayoutでは「制約(Constraint)」という「位置」や「サイズ」に関するルールを設定することで、異なる大きさのiPhone上でも自動的にルールに合ったレイアウトに調整してくれるのような指定をするので、iPhone6iPhone6 Plusなど、画面サイズが異なる端末でも最適化されたレイアウトにすることを実現できます。

Constraints(制約)を追加する

上下左右の制約を追加できます。
を押した後数値を入力し、Add Constraintsを押すと制約を追加できます。 f:id:marikooota:20160806205900p:plain

例えば、下ピッタリ(余白なし)に配置したい場合は、

f:id:marikooota:20160806220501p:plain

このように入力してAdd Constraintsを押します。


<補足>
左右をピッタリ(余白なし)に合わせたい場合、下ピッタリの例のように左右に0を入力してAdd Constraintsをしてもこのように意図しない余白ができてしまいます。

f:id:marikooota:20160809083134p:plain

この問題を解決するには、Add Constraintsをするときに、「Constraint to margins」のチェックを外します。
f:id:marikooota:20160809083610p:plain

すると綺麗な左右余白なしを実現できます。

f:id:marikooota:20160809083652p:plain


真ん中に配置したい場合は、

f:id:marikooota:20160804210629p:plain

Horizontally in ContainerまたはVertically in Containerを指定します。

  • Horizontally in Container・・・・ x軸の真ん中に合わせる

  • Vertically in Container・・・・・ y軸の真ん中に合わせる

制約を削除したい場合は、

f:id:marikooota:20160806221928p:plain

Size inspectorから削除したい制約を選択してDeleteキーを押します。

スクロールして画像を選べるアプリ

むらちゃんと7ちゃんとマロくんの画像をスクロールバーに表示させて、選択したキャラクターに合わせて画面上部に配置した画像が変わるアプリを作ります。

1.むらちゃんと7ちゃんとマロくんの画像を読み込み、Image ViewとScroll ViewをStory board上に配置します。(初期表示で7ちゃんを指定しています)

f:id:marikooota:20160807015050p:plain

2.Image ViewとScroll ViewにAuto Layoutを設定します。
今回は画像の下にスクロールバーを表示させるように設定しました。

3.ViewControllerにはこのように書きました。

class ViewController: UIViewController {

    // StoryBoardのScrollViewと紐付ける
    @IBOutlet weak var scrollview: UIScrollView!
 // StoryBoardのImageViewと紐付ける
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let mura = UIImage(named:"murachan.png");
        let nana = UIImage(named:"7.png");
        let maro = UIImage(named:"maro.png");
        
        let muraImageView = UIImageView(image:mura)
        let nanaImageView = UIImageView(image:nana)
        let maroImageView = UIImageView(image:maro)
        
        // UIScrollViewの1ページ分のサイズ(x,y,width,height)
        scrollview.frame = CGRectMake(0, 0, 200, 300)
        
        // scrollviewの全体のサイズ(x,y)
        scrollview.contentSize = CGSizeMake(240*3.8,0)
        
        // UIImageViewのサイズと位置を決める(x,y,width,height)
        muraImageView.frame = CGRectMake(100, 0, 175, 240)
        nanaImageView.frame = CGRectMake(340, 0, 175, 240)
        maroImageView.frame = CGRectMake(580, 0, 175, 240)

        // ImageViewにアクションをつけれるようにする
        muraImageView.userInteractionEnabled = true
        nanaImageView.userInteractionEnabled = true
        maroImageView.userInteractionEnabled = true
        
        // UIGestureRecognizerクラスを使うとアクションをつけることができる
        // 関数を呼び出す
        let tapRecognizerMura = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageTapMura))
        muraImageView.addGestureRecognizer(tapRecognizerMura)
        let tapRecognizerNana = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageTapNana))
        nanaImageView.addGestureRecognizer(tapRecognizerNana)
        let tapRecognizerMaro = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageTapMaro))
        maroImageView.addGestureRecognizer(tapRecognizerMaro)
        
        // UIImageViewをScrollViewに追加
        scrollview.addSubview(muraImageView)
        scrollview.addSubview(nanaImageView)
        scrollview.addSubview(maroImageView)
        
        // 1ページ単位でスクロールさせる
        scrollview.pagingEnabled = true
    }
    
    // 画像を設定し直す関数
    func imageTapMura() {
        let mura = UIImage(named:"murachan.png");
        imageView.image = mura
    }
    func imageTapNana() {
        let nana = UIImage(named:"7.png");
        imageView.image = nana
    }
    func imageTapMaro() {
        let maro = UIImage(named:"maro.png");
        imageView.image = maro
    }


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


}

※とりあえず画像が変わるようにするところまでをやりたかったので、コードの可読性は低いです。

UIGestureRecognizerクラスを使うとiPhoneの特殊なアクションを検知することができます。
今回はタップしたら画像が変わるアプリを作りたかったので、
UITapGestureRecognizerを使いました。
タップすると関数が呼ばれて、画像が差し替わります。

4.実行します

  • 初期表示

f:id:marikooota:20160807022552p:plain

  • むらちゃんをタップした時

f:id:marikooota:20160807022726p:plain

  • マロくんをタップした時

f:id:marikooota:20160807022750p:plain

最後にUIGestureRecognizerクラスのまとめ

クラス名 説明
UITapGestureRecognizer タップを設定できる。
タップ数 ー numberOfTapsRequired
指の本数 ー numberOfTouchesRequired
を指定できる。
UILongPressGestureRecognizer 長押しを設定できる。
認識されまるの時間
ー minimumPressDuration
を指定できる。
UISwipeGestureRecognizer スワイプを設定できる。
スワイプの方向 ー direction
指の本数 ー numberOfTouchesRequired
UIPanGestureRecognizer ドラッグを設定できる。
移動する距離 ー translationInView
移動の速さ ー velocityInView
を指定できる。
UIRotateGestureRecognizer 回転操作を設定できる。
回転角度 ー roration
速さ ー velocity
を指定できる。
UIPinchGestureRecognizer ピンチ操作※を設定できる。
倍率 ー scale
早さ ー velocity
を指定できる。

※ ピンチ操作・・・マルチタッチ操作のうち、2本の指で画面をつまむように動かす操作のこと

<番外編>
StoryboardがAny Anyの場合、iPhone6iPhone6 Plusなど画面サイズが異なる場合でも対応するようなレイアウトにできます。 f:id:marikooota:20160804205429p:plain

もし、実際のiPhone6iPhone6 Plusなどの倍率でプレビューしたい場合の手順はこんな感じです。
Show the assistant editor を選択する。
Automatic > Previewに変更する。

f:id:marikooota:20160804205010p:plain

iPhone 4inchでのプレビュー画面

f:id:marikooota:20160807130818p:plain

参考サイト
GestureRecognizerを使ってタッチ操作を検知 : てるてる坊主
[iOS8] SwiftでUIScrollViewを利用して画像をスライド・スクロールさせる - Qiita
今度こそ克服するAutoLayoutの使い方・基礎編~SwiftからはじめるiOSアプリ開発:その5【初心者向けアプリ開発3分tips】 - エンジニアtype

SQL基礎は意外と難しい

SQL基礎Ⅰ(1Z0-017)

SQL基礎Ⅰ(1Z0-017)にやっと合格できたので記念にブログに残しておこうと思います。

12c SQLで撃沈

1Z0-017を受ける前は12cSQL(1Z0-061)を勉強していましたが、合格点65%中58%で落ちてしまったので1Z0-017に切り替えて受験しました。
12cでは、使った参考書と似た問題も多々ありましたが、応用問題が多かったです。

使った教材は


www.shoeisha.co.jp

徹底攻略 ORACLE MASTER Bronze 12c SQL基礎問題集[1Z0-061]対応 - インプレスブックス


この2冊です。
感想としては一冊目は解説と問題集が別々に取り外せるので、持ち運びしやすいです。 かばんがいつも重い私にはありがたかったです。
また、問題集に載っている問題と似た問題が本番で数問出題されました。
ですが、とにかく正誤表の量が多くて大変でした。
回答が間違っているところが沢山あったので、そのまま進むわけにもいかず一つ一つ見て直すのに時間がかかりました。

二冊目はJava Silverを受験した時にもお世話になった黒本です。
一冊目よりは応用の問題が多く、本番の試験により近かったかなと思います。
似た問題も数問出題されていました。

この二冊を通しで3周と、間違えた問題だけあと2周ほどしましたが、落ちてしまいました。
敗因として3点。

  • 複雑なネストの問題や副問い合わせをきちんと理解していなかった。応用力が足りませんでした。

  • 問題の意図や、言葉のニュアンスを読み解くのが難しい。

  • 制限時間内には十分終わるが、見直す時間が少なかった(120分で75問)。 私の場合20分ほど余って見直しましたが、最後まで見直すことができませんでした。

そこで金銭面の問題もあり、12cからSQL基礎Ⅰに切り替えました。

SQL基礎Ⅰで昇天

SQL基礎Ⅰの受験では、12cで使った参考書と同じものを使って、SQL基礎の範囲を勉強しました。
それに加えて、以下のサイトで勉強しました。

www.atmarkit.co.jp

試験は、12cで出題されたような複雑なネストの副問い合わせの問題は出題されず、SQLの基礎の問題が出題されました。
ですが、12cではさらっと触れたくらいだったビュー順序シノニムの問題がこれでもかというほど出題されて(運だと思います)撃沈しました。それ以外の問題の多くは、見てすぐわかるような問題でした。
90分で40問でしたが、1時間弱時間が余って、用心深い私は4周見直しました。
まあ、ビューや順序の問題は何回見直してもわからないものはわからなかったので、自信を失いました。
ビュー、順序、シノニムはしっかり復習します…。

最後に

勉強時間は一ヶ月ほどで、勉強する前はSQL嫌いでSELECT文や結合もままならないくらいの知識でした。
何回か心が折れそうになりましたが、合格できてよかったです。

次はDBAの勉強をして、余裕の合格を目指したいです。

コンフリクトの解決

前回のつづき...

コンフリクトとは

複数人で作業していた場合、同じ箇所を別々のブランチで、別々の変更しているのに、マージしてしまっていることがあります。
この場合、どちらの変更を取り込むか自動では判断できないのでエラーが発生します。
これをコンフリクト(衝突、競合)といいます。

  • 7ちゃんとむらちゃんの場合
    例えば7ちゃんとむらちゃんが同じ箇所に変更を加えたとします。

f:id:marikooota:20160605230525p:plain

この状態でマージするとコンフリクトが発生します。
7ちゃん側ではこのように表示されるので、手動で修正します(イメージ)。

f:id:marikooota:20160605232334p:plain

7ちゃんの変更が正しいので、むらちゃんの変更は反映せず7ちゃんの変更を残してコンフリクトを解決します。
修正してからコミットを行うことで変更を統合したコミットが作成されます。

<補足>
eclipseでコンフリクトを解決する場合、コンフリクトが起きたファイルの上で右クリックをし、Merge Toolを選びます。