2013年2月28日木曜日

iOSのGmailのデザインについて

Gmailのメールアプリが、マルチアカウントの対応してからは、標準メールアプリは使わなくなりました。
Gmailのメールアプリは、良い意味で記憶に残らないシンプルデザイン。
老若男女問わず、飽きがこないと思います。

あまり意識を今までしていなかったのですが、画面上部のナビゲーションバーのちょっとした工夫がなるほどー!素敵だなー と思ったので今日はそのお話を。

メール詳細画面を開くと、こんな感じ。


ナビゲーションバーとコンテンツ部分には、影の線とハイライトの線があるぐらい。

下にスクロールすると...

ナビバーの下に影が出来ます。
影ができることで、上にコンテンツがあるということが分かります。

スクロール位置に限らず、常にナビバーの下に影があるデザインは多くありますが、そのデザインだと、
現在は、スクロールの一番上にいるのか?いないのか?
が一見判断できなくなります。
Gmailのように、現在の状態によって、影をつける or つけない で感覚的に分からせるという方法はとても素敵。

上にスクロールすると、Pull to Refreshがでてきます。


ナビバーに影ができる とともに、コンテンツ上部に少しハイライトが入っているので、下になんか出てきた! って気分になります。

コンテンツの内容の続きじゃなくて、全く違うものがなんか見えているだぜ! というのが上手く伝わってきます。

2次元じゃなくて、3次元にするとより多くの情報が伝わりますねー。
当たり前ですけども。

モバイルの場合は特に、シンプルに・分かりやすく というのが大事。
メインの操作がタッチである というのがWEBに比べてより現実(=3次元)に近い。
と思うので、こういうちょっと工夫をちゃんと考慮していきたいなー と思った次第。


• • •

2013年2月24日日曜日

iOSで星を描く方法

12ホワイトボード アプリで☆を書けるようにしたのですが、その方法をご紹介します。


+ (void)addStarPath:(CGContextRef)context rect:(CGRect)rect {
    CGFloat degreeDiff = 360.0 / 10.0;
    CGFloat degree = 90;
    CGFloat radius = rect.size.width / 2.0;
    
    CGFloat x = rect.origin.x + radius;
    CGFloat y = rect.origin.y + radius;
    
    for (int i = 0; i <= 10; i++) {
        CGFloat radians = degree * (M_PI / 180.0);
        if ( i % 2 == 0) {
            CGFloat pointX = x + cos(radians) * radius;
            CGFloat pointY = y - sin(radians) * radius;
            if (i == 0) {
                CGContextMoveToPoint(context, pointX, pointY);
            } else {
                CGContextAddLineToPoint(context, pointX, pointY);
            }
        } else {
            CGFloat pointX = x + cos(radians) * (radius / 2.0);
            CGFloat pointY = y - sin(radians) * (radius / 2.0);
            CGContextAddLineToPoint(context, pointX, pointY);
        }
        degree -= degreeDiff;
    }
    CGContextClosePath(context);
}


赤丸の点 5つと、青丸の点 5つ = 合計10個の点 を結んで星を描きますので、360を10で割って、順々にポイントを打っています。
赤丸は円周の位置でポイント、青丸は半分の円周の位置でポイントしています。

円周に沿って星の点を均等にポイントして描いていますが、その際使用するのが、あのなつかしの サイン、コサイン。

習ったのはたしか高校1年でしたっけ?
習った当初は、「こんなの覚えても生活に使わないから意味ないわ」とか思っていましたが、ちゃんと使うタイミングがくるもんですねー。


サイン、コサインの関数は用意されていますが、引数に渡せるのは 角度ではなくて、ラジアン 単位。
ラジアン。名前は覚えているけど、内容なんてすっかり忘れておりました。

上記のコードはパスを描いているだけですので、
CGContextFillPath(context); などで塗りつぶすなり、線をかくなりの処理を入れてくださいね。


• • •

手書きアプリ「12ホワイトボード」リリースしました

PicTack をはじめ、いくつか手書き機能のアプリを作成してきたのですが、現在の集大成の意味もこめて、手書きができるホワイトボードアプリをリリースしました!

12ホワイトボード
https://itunes.apple.com/jp/app/id604395964




iPhone, iPad 両方で使えるユニバーサルアプリですが、iPadのみの機能として

  • ペンの色を変えられる
  • ペンの色を透明度を設定できる
  • ハート、星、四角 などのマークが書ける

があります。よければiPadでお使いください。
絵は12個のみアプリで保存できます。

同じような手書き機能がある既存の無料のアプリを使わせて頂いていたのですが、
不満点を解決する =このアプリの機能
ということで、不満点とともにこのアプリの特徴をご紹介です。

Retina iPadでもサクサク書きたい

RetinaでiPad となるとかなり大きいサイズのピクセル数になるので、注意して描画処理をしないと、それはもうカクカクになります。ほんと酷いアプリもありますよね...
絵心がない私としては、カクカクされると、より酷い絵ができてしまう(涙
逆に、スムーズな曲線が書けるように補完してほしいのだ! というのが希望。

Adobeのものは本当に綺麗な曲線になるように補完してくれて素晴らしいのですが、お金を払ってまで書きたいのか?となると私のニーズは違ったので、私の出来る範囲で補完する機能をいれてみました。

高解像度で画像を出力したい

書いた絵は素材の元ネタ使いたいということが多いので、できるだけ高解像度で保存したい。
Retina iPadだったら、2048×1400でも綺麗な線で出力してほしい。
そして、背景を透明にして出力もしたい。
という、ニーズの反映もしました! ほぼ私向け?(笑
アプリ内部では、vector線で描画しているので綺麗に出力できているはず。

DropBoxに直接出力したい

書いた絵はどこで使うのか?ですが、PCで取り込みたいというのが私の一番の使い方。
PCでの取り込み方法として、カメラロールに一旦保存してから、メールなりDropBoxで送信 とか、面倒くさい!
ということで、出力方法もいくつか用意しました。



カメラロール、メール、Twitter、Facebook と一般的なもの。
Open In... では、端末に入れているアプリで画像を扱う設定になっているアプリが表示され、画像がを受け渡しできます。
たとえばこんな感じ。


私はDropBoxで開くのを多用中!

無料!

これは不満点ではないのですが、無料でも基本的なことは使えるアプリで!というのは1つの目標だったので、無料にしました。広告はでますけど。
本格的な絵を描きたい人は、高機能な有料アプリを使用すると良いと思いますw


最後に...

このアプリのアイコン。

この線も、このアプリで描きました。
ええ、1秒くらいで(笑

• • •