iOSアプリエンジニアの備忘録ブログ

主にiOSアプリの開発をしているエンジニアがいろいろ書いていきます。railsを中心にサーバーサイドの話もたまに。勉強方法の記録なんかも。

個人サービス開発者が Material Design ガイドラインを学ぶべき理由

サービスを一人で開発するにあたって大切なことは、なんとなくパット見がきれいに見えること、使いにくさを感じないこと。

100点を目指すのではなく、60点を下回らないこと。できれば70点以上をキープしたい。

【思ってた動作と異なる動作が発生する】【明らかにデザインが崩れている】というケースをなくす。これでおそらく60点。

 

なぜMaterial Designを使う必要があるか。

それは、70点のデザイン(結構いいじゃん)を感じてもらうため。

 

Mterial Designを構成する要素の整理

70点を達成するために、マテリアルデザインにおける以下の3つの要素に注目する。

Layout

この原則が守れていないと、Material Designらしさ、統一感が失われてしまう。ガイドラインを読み込んで、Layoutの原則に従っていないことがないか要チェック。

Android開発の際にはdpとspを使うべき。fontにはsp、それ以外にはdpを使うらしい。

1dp = (160dpiのディスプレイにおける) 1px

つまりwebサービスを開発するときにpxを使うと、高解像度の端末では見た目が小さくなるということ？

 

  • List
  • Detail View
  • Navigation Drawer

などを採用するときはパーツごとの余白サイズが指定されている

 

比率が登場するときは

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3

を採用するとキレイに見えるらしい

 

タッチ可能な領域は48dpを基準にするといいと思う

Patterns

機能やデザインを実装するときに、出来る限りこのPatternに沿って開発する。

というか、MVPの段階ではこれに従わないのはコストなので、必ず従う。

Components

Components に存在しない要素を使わざるを得ない場合は本当にそれ以外に方法がないかを強く検討する。おそらく、MVPの段階では過剰な機能である。

 

これより下は学習の優先度を下げる 

Growth & Communications

オンボーディング、機能の紹介、ジェスチャーの説明方法についてのガイドラインが書かれている。一通りの機能を実装した後にこれに従ってデザインを整える。

Motion

アニメーションなどについて書かれている。オープンソースのコンポーネントを使えばだいたいOK

Style

アニメーション、配色、タイポグラフィ、比喩表現(イラスト?)などについて書かれている。UIのブラッシュアップをしたいときに読む。

Usability

- Accesibility/Focus の内容は役に立ちそう

- Bidirectionality はアラビア語対応とかしないので関係なし？

Platforms

Webの段階では意識する必要はあまりない。

アプリ化するときにまた読む。

Resources

アイコンとか

vagrantを使ってみた

このboxを利用しました。

https://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.6-x86_64-v20150426.box

  • centos6.6
  • chef-solo, knife-solo導入済み

chef-soloとknife-soloは導入されているが、デフォルトのレシピ読み込み先がvagrantの共有フォルダになっていないので、それを設定してあげる。

$ vagrant up
$ vagrant ssh
$ sudo mkdir /etc/chef/
$ sudo vi /etc/chef/solo.rb
# /etc/chef/solo.rb
cookbook_path ["/vagrant/chef/cookbooks"]

knife-soloを使ってクックブックを作成

$ knife-solo cookbook create hello -o /vagrant/chef/cookbooks

chef-soloを実行

$ chef-solo -o hello

あとはレシピを書いていけばOK

UITableViewCellの左端にアイコンを追加する方法 

import UIKit

class PagingNavController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    private var myTableView: UITableView!
    private let myItems: NSArray = ["TEST1", "TEST2", "TEST3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(initTableView())
    }
    
    func initTableView() -> UITableView {
        // Status Barの高さを取得する.
        let barHeight: CGFloat = UIApplication.sharedApplication().statusBarFrame.size.height
        
        // Viewの高さと幅を取得する.
        let displayWidth: CGFloat = self.view.frame.width
        let displayHeight: CGFloat = self.view.frame.height
        
        // TableViewの生成する(status barの高さ分ずらして表示).
        myTableView = UITableView(frame: CGRect(x: 0, y: profileViewHeight, width: displayWidth, height: displayHeight - profileViewHeight))
        
        // Cell名の登録をおこなう.
        myTableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "MyCell")
        
        // DataSourceの設定をする.
        myTableView.dataSource = self
        
        // Delegateを設定する.
        myTableView.delegate = self
        
        return myTableView
    }
    
    /*
    Cellが選択された際に呼び出されるデリゲートメソッド.
    */
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        print("Num: \(indexPath.row)")
        print("Value: \(myItems[indexPath.row])")
    }
    
    /*
    Cellの総数を返すデータソースメソッド.
    (実装必須)
    */
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return myItems.count
    }
    
    /*
    Cellに値を設定するデータソースメソッド.
    (実装必須)
    */
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        // 再利用するCellを取得する.
        let cell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath)
        // Cellに値を設定する.
        cell.textLabel!.text = "\(myItems[indexPath.row])"
        //Cellの右端に  >  をつける
        cell.accessoryType = UITableViewCellAccessoryType.DisclosureIndicator
        //画像の追加はこれだけ！
        cell.imageView!.image = UIImage(named: "sample")
        //画像の追加はこれだけ！
        return cell
    } 
}

このサイトを参考にしました。
超おすすめ！
006 UITableViewでテーブルを表示 - Swift Docs

xcode 7.0でストーリーボードを使わずにxib(nib)ファイルをViewControllerにaddSubviewする方法

iOS swift xcode 7.0 xib nib

用意するもの
MainViewController.swift (xlibファイルを表示したいviewController)
SubView.xib
SubView.swift

var nib: UINib = UINib(nibName: "SubView", bundle: nil)
var nibView: UIView? = nib.instantiateWithOwner(self, options: nil)[0] as? UIView  // *1
nibView?.frame = CGRectMake(0, 0, wBounds, hBounds)
view1.addSubview(nibView!)

SubView.xibからSubViewクラスのインスタンスを作成し、それをMainViewControllerのviewにaddSubviewする感じ。
SubView.swiftでインスタンスの初期化処理を書く必要がある。

*1 SubView.swiftが存在しないとエラーが出る(以下のstackoverflowを参照)
ios - What does this mean? "'NSUnknownKeyException', reason: ... This class is not key value coding-compliant for the key X" - Stack Overflow

起動時に使用するstoryboardを選択する

iOS swift xcode 7.0

起動時に使用するstoryboardが設定されていないと、アプリ起動後に真っ暗になってしまう。

そんな時の解決策はこれ。

hogehuga.com

 

ライブラリのサンプルを書き換えてる時とかに必要になる。