javaSEがiOSアプリデザイン、開発に挑む日記

本業java SEがswift、デザインの勉強したことを残しておくブログ

スケール学習ピアノアプリ Scale navi piano

申請が通ったので宣伝。

f:id:k-murataDevDesign:20150727225338p:plain

 

コルトレーンのblue trainを意識した感じで。

基本的なピアノ機能に加えて

それぞれのキーのコードを表示

また、音楽を再生しながら再生できるので

耳コピにもどうぞ。

タダだし。

 

Scale Navi Piano

Scale Navi Piano

  • Katsuyasu Murata
  • ミュージック
  • 無料

 

 

swift 円を描く

そこまで難しくなかったので画像用意ではなくて

これで良いかも

// 円の描画
let ovalShapeLayer = CAShapeLayer()
//線
ovalShapeLayer.strokeColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1).CGColor
//塗りつぶし
ovalShapeLayer.fillColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0).CGColor
//線の幅
ovalShapeLayer.lineWidth = 1.0
    
//配置場所とサイズ
ovalShapeLayer.path = UIBezierPath(ovalInRect: CGRect(x: view.bounds.size.width/2 - 25.0 , y: view.bounds.size.height/2 - 25.0 , width: 50.0, height: 50.0)).CGPath
    
view.layer.addSublayer(ovalShapeLayer)

 layerの概念も勉強しないとなぁ

 

swift ソースでグラデーション背景を作成

グラデーションのある背景はイラレとかで作らなきゃいけないと思っってたけど

簡単なものならソースで作れる。

//グラデーションカラー一覧
let topColor = UIColor(red:0.07, green:0.357, blue:0.592, alpha:1)
let midColor = UIColor(red:1.0, green:1.0, blue:1.0, alpha:1)
let mid2Color = UIColor(red:0.392, green:0.659, blue:0.208, alpha:1)
let bottomColor = UIColor(red:0.475, green:0.878, blue:0.957, alpha:1)
    
let gradientColors: [CGColor] = [topColor.CGColor,midColor.CGColor,mid2Color.CGColor, bottomColor.CGColor]
    
//グラデーションレイヤーを作成
let gradientLayer: CAGradientLayer = CAGradientLayer()
    
//カラー配列のセット
gradientLayer.colors = gradientColors
//グラデーションレイヤーをスクリーンサイズにする
gradientLayer.frame = self.view.bounds
    
gradientLayer.startPoint = CGPointMake(1.0, 0.0)
gradientLayer.endPoint = CGPointMake(0.0, 1.0)
    
//グラデーションレイヤーをビューの一番下に配置
self.view.layer.insertSublayer(gradientLayer, atIndex: 0)

 

こんな感じ

 

f:id:k-murataDevDesign:20150715203003p:plain

 

 カラー数と角度は調整可能。

それぞれの幅は見つけられなかった...。

 

ちょっとした時にどうぞ。

 

にしても、美的センスを疑われる配色... 

 

 

Xcode submit時エラー ITMS-90032 (appiconのエラー)

動作も問題なし

validateでエラーもなし

でもsubmitでエラー...

ERROR ITMS-90032:“Invalid Image Path - No image found at the path referenced under key 'CFBundleIcons':AppIcon120x120”

 

 appIconの該当画像を削除したらsubmitできるようになりました。

 

f:id:k-murataDevDesign:20150711174538p:plain

 

サイズ同じもの用意したからといって

わけわからないものに入れちゃダメですね...

 

 

xcode iPad用アイコンの追加

Deviceをuniversalにして、

最初に登録してあるImages.xcassetsに

イコン画像をちゃんと登録しても

実行時にiPadのアイコン画像ないよ〜とワーニングが出る。

そんな時は新しいアイコンセットを作成して

そっちを読み込むようにする

 

新しいアイコン画像登録セットを作成

f:id:k-murataDevDesign:20150709224422p:plain

 

プロジェクトの設定で新しく作ったアイコンの方を読み込むように設定

f:id:k-murataDevDesign:20150709224439p:plain

 

多分、SVG?形式みたいなベクター形式で登録すれば一個で登録できて、こういうのは気にしなくてもいいのかもしれない...

 

 

macで切り取り相当のショートカット

windowsでは不可欠なctrl + xでの切り取り。

macではないらしい...

 

それ相当のショートカットとしては

まず、command + cでコピーし、

貼り付け時にoption + command + vで

コピー元から移動となり、

切り取りと同じ操作に。

 

家と職場でwindowsmacを行ったり来たり。

なかなかショートカットが身につかない...

 

タップした時、枠が波紋のように広がるアニメーション

色々作ってるうちに、こういう細かいとこがUXというのかなと。

func anyTapGesture(sender: UITapGestureRecognizer){
    let tmpX:CGFloat = sender.view!.frame.origin.x
    let tmpY:CGFloat = sender.view!.frame.origin.y
    let tmpH:CGFloat = sender.view!.frame.height
    let tmpW:CGFloat = sender.view!.frame.width
        
    var clickActionV:UIView = UIView()
    clickActionV.frame = CGRectMake(tmpX, tmpY, tmpW, tmpH)
    clickActionV.layer.borderColor = UIColor(red: 0.7, green: 0.7, blue: 0.7, alpha: 0.5).CGColor
    clickActionV.layer.borderWidth = 2.0
    self.view.addSubview(clickActionV)
            
    UIView.animateWithDuration(0.2,
        delay: 0.1,
        options: UIViewAnimationOptions.CurveEaseOut,
        animations: { () in
            clickActionV.transform = CGAffineTransformMakeScale(1.6, 1.1)
            clickActionV.alpha = 0
        }, completion: { (Bool) in
            clickActionV.removeFromSuperview()
    })
}

 タップされたviewと同じサイズのviewを作って、枠線をつけて、アニメーションで拡大しながら透過させる。

 

 細かい広がり、遅延具合はお好みでどうぞ。

 

 丸く波紋が広がるようにしたいなぁ...

 難しそうだけど。