MD Blog

誰かの何かに役に立てることを書いていきたいです

アウターシャドーとインナーシャドー

PaintCodeというMacアプリを購入しました。

これでボタン画像などを制作すると、そのObjective-C用のコードが自動生成されるというのが売りです。

ですが、単純に画像制作アプリとしてとても使いやすく優れていて、簡単な操作で誰でもそれなりの質のボタンやアイコンが作れるようになっています。

このアプリの中でアウターシャドーとインナーシャドーの違いがわかりやすく表現されていたので紹介しようと思います。

 

f:id:desing:20120826112242p:plain

上段がアウターシャドーで下段がインナーシャドーです。

どちらも影は黒です。

アウターシャドーは対象の下側に影がつきます。

インナーシャドーは対象の内側に、対象がずれて重なっているような感じです。

 

影をもっと対象に近づけるとこのようになります。

f:id:desing:20120826112244p:plain

アウターシャドーをつけると対象が浮き上がっているように見えます。

おもしろいのはインナーシャドーなのですが、目の錯覚で2種類の見方ができます。

1つは、対象が下の方に盛り上がっていてドーナツのような形に見える見方。

2つめは、輪っかが陥没して見える見方。

少し見えにくいですが…。

真ん中の円にアウターシャドーがついているイメージです。

 

この2つのシャドーを使って簡単に下のようなボタンを作れました。

f:id:desing:20120826113906p:plain

 

チュートリアル動画はこちら。

テスト用UIViewと本番用UIViewを使って開発する（iOS）

iOS用アプリの開発をしているとき、仮のUIViewを使いたいことがあると思います。

例えば、凝ったジェスチャーで何らかのアクションをトリガーしたいけどまだジェスチャーを実装できてないときに、簡単なボタンを設置してアクショントリガーしてテストしたいとか。

あるいは、ロジック部分を先に作っておいて後からUIを作り込みたいときに、とりあえずテスト用のViewで開発したいなど。

 

 テスト用のViewと本番用のViewを用意して、切り替えながら開発する方法を僕は3つ思い付きました。

 

1. インスタンス変数にtestModeなどのBOOL値を用意して、この値を入れ替える。

2. テスト用Viewを用いるTargetを作って、Xcode上で切り替える。

3. Objectionを用いる。

 

テスト用Viewと本番用Viewの切り替えはできるだけコード以外のところで行いたいので1は却下。

3のObjectionは、DIという思想を実現するためのフレームワークで、"コンポーネント間の依存関係をプログラムのソースコードから排除し、外部の設定ファイルなどで注入できるように"するものです(by Wikipedia)。

本当はこれを使ってみたくて途中まで試してみましたが、制約が多くてViewの切り替えには向いていなかったので断念。

（あるオブジェクトの注入数を動的に決められないなど。なのでUITableViewCellをうまく注入できなかった。）

 

そこで今回、比較的手軽に、かつコードへの依存も少ない2の方法を用いることにしました。

 

Step1. テスト用UIViewを用意する

本番用のUIViewを継承してテスト用UIViewを作ります。

このとき、テスト用UIViewにボタンを作るときはアクションのターゲットを本番用のUIViewにしましょう。

そうすれば、アクション部分は本番用のUIView一か所に書いておけば済みます。

 

Step2. テスト用Targetを作る

以下のサイトを参考にして作ってみてください。このサイトでは有料無料の切り替えを行なっていますが、要領は同じです。

[iPhoneアプリ開発] 無料版と有料版を同じXcodeプロジェクトで作る - func09

http://www.func09.com/wordpress/archives/859

 

Step3. テスト用と本番用を切り替えるためのプリプロセッサ命令（#ifdefとか）をUIViewControllerに書く

これも上記サイトを参照してほしいのですが、ポイントはUIViewContorllerに記述しましょうということです。

理由は単純で、その名の通りViewをControlするクラスに記述したほうがコードを理解しやすくなるからです。

 

以上の方法を試しはじめてから、ロジック部分とUI部分の開発を分けて行うことができるようになって開発が楽になった気がします。

どうぞ参考にしてみてください。

超簡単にiOSへシェイクジェスチャー検知を実装する方法

シェイクジェスチャーを検知したいUIViewControllerに以下のコードを記述してください。

- (BOOL)canBecomeFirstResponder
{
    return YES;
}

- (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event
{
    if(event.type == UIEventTypeMotion && event.subtype == UIEventSubtypeMotionShake)
    {
        NSLog(@"Motion began");
    }
}

- (void)motionCancelled:(UIEventSubtype)motion withEvent:(UIEvent *)event
{
    if(event.type == UIEventTypeMotion && event.subtype == UIEventSubtypeMotionShake)
    {
        NSLog(@"Motion cancelled");
    }
}

- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event
{
    if(event.type == UIEventTypeMotion && event.subtype == UIEventSubtypeMotionShake)
    {
        NSLog(@"Motion ended");
    }
}

motionCancelledは、motionがbeganしたけどendedしなかったとき、一定時間経つと呼ばれるようです。

beganしたけどendedしない状況は、弱く振ったときにあらわれました。

 

動作環境

iPhone4 iOS5.0

 

参考文献

how to detect and program around shakes for the iphone - Stack Overflow

http://stackoverflow.com/questions/1340492/how-to-detect-and-program-around-shakes-for-the-iphone

iPhone開発メモ　シェイク - WillCraft Blog

http://blog.willcraft.jp/archives/1134

はてなブログでSyntaxHighlighterでObjective-Cを表示

SyntaxHighlighter からダウンロードしたフォルダ中の shCore.js と shCoreDefault.css 、そしてここの shBrushObjectiveC.js を導入すればいけるみたいですが、少しハマったのでうまくいったやりかたを書き残しておきます。

Step 1　shCoreDefault.css の追加

・SyntaxHighlighter からzipをダウンロード

・解答したフォルダの styles > shCoreDefault.css を開いて全文コピー

・はてなブログの設定の デザイン > カスタマイズ > スタイルシートにペースト

Step 2　shCore.js の追加

・<script>で囲ってコピペではうまく動かなかったのでホスティングを利用。AWSを使っているようなので誰か寄付してあげてください。

・はてなブログのデザインカスタマイズからスライダーを追加して、HTMLエリアに <script type="text/javascript" src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js"></script> を追加

Step 3　shBrushObjectiveC.js の追加

・ここの Oxygen (Objective-Cではないことに注意) の shBrushObjectiveC.js を開いてコピー

・Step 2 の後に <script></script>で囲ってペースト 

Step 4　JavaScript の実行

・Step 3 の後に <script type="text/javascript">SyntaxHighlighter.all();</script> を追加

Step 5　コードをブログに書く

・はてなブログの設定から WYSIWYGモードにしておく

・記事を新規作成し、HTMLタブを開き、コードを <pre class="brush: objc"></pre> の中に記述

・プレビューだとまだ反映されないので保存して見る

例

- (NSString *)test {
  [blog write];
}

参考文献

アプリ開発の記録　 SyntaxHighlighterでObjective-Cをきれいに表示
シンタックスハイライト
 

JSONObjectWithData:options:error: のオプションの意味

iOS 5から標準ライブラリとしてNSJSONSerializationクラスができました。
このクラスにはクラスメソッドが5つあり、このうち JSONObjectWithData:options:error: と dataWithJSONObject:options:error: を使えば、簡単に JSON <-> NSArray or NSDictionary の変換を行うことができます。

NSJSONSerialization Class Reference


さて、JSON から NSArray or NSDictionary への変換には JSONObjectWithData:options:error: を使うわけですが、これには以下のオプションを指定できます。
リファレンスを見たり実際にコードを書いて試したりしてわかったことを書きます。


NSJSONReadingMutableContainers
これを指定すると、NSArrayやNSDictionaryの代わりに、可変オブジェクトであるNSMutableArrayやNSMutableDictionaryを返してくれます。

NSJSONReadingMutableLeaves
LeavesとはLeaf（葉っぱ）の複数形ですね。つまり、JSONデータの葉にあたる末端のオブジェクトを可変オブジェクトとして返してくれます。
すなわちNSStringがNSMutableStringとして返ってきます。
通常、数値や真偽値はNSNumber（のサブクラス）として返ってきますが、NSNumberには可変オブジェクトがないので変化はないようです。

NSJSONReadingAllowFragments
直訳すると「断片化を許容する」になりますが、いまいち意味を掴みにくかったです。
単純に言うと、JSONのルートがobjectやarrayではなかったとしても（数値、真偽値、文字列）、オブジェクトを返してくれるオプションです。
このオプションを指定していないと、ルートがobject,array以外の場合はnilが返ります。


ちなみに、オプションなので | で区切れば複数組み合わせて指定できます。

Draw Somethingの凄さ

Draw Somethingというアプリが流行っているそうで。
お絵かきクイズ・ゲーム、Draw Somethingがあっという間に1200万ダウンロードを記録―iOSとAndroid双方でトップ

お題にそった絵を描いてそれを相手が当てるという、アイディアとしてはありがちなものです。

早速ダウンロードして遊んでみたのですが、思っていた以上におもしろい。
1対1で、交互に絵を描いて当てるというのを繰り返すのですが、相手の情報はストックされるので途中でアプリを終了しても問題ありません。
相手が自分の絵に答え、新しくお題の絵を書き終わるとプッシュ通知が来て知らせてくれます。

遊ぶ相手は複数人作れて同時進行できるので、暇になってしまうことはありません。
また、速く描かなくてはいけないというプレッシャーもありません。
好きなときに遊べるという、ゆるさが非常に良い感じです。



そして思ったことは、これってまさにソーシャルゲームなんですよね。
遊んでいない時間もゲームが進行中という感覚についてはこの記事で考察されています。
ソーシャルゲームと従来型ゲームは何が違うのか - 未来私考

よくあるソーシャルゲームというのは、カードゲームだったりシミュレーションだったり、ゲームゲームしたものが多いと思います。
ですがDraw Somethingは「絵を描いて当てる」という老若男女問わず親しめるゲームです。
それにソーシャルゲームの要素が組み合わさったことでヒットしたんじゃないかと思います。
超初心者向けソーシャルゲームというような。



そしてさらに言えば、ソーシャルゲームの本質はコミュニケーションなんだと思います。
これはDraw Somethingの開発会社のCEOが言っています。

"DrawSomethingの眼目はコミュニケーションだ。。このゲームは絵を描くことを通じてプレイヤーが友人たちと経験を共有して会話できるという点に本質がある。"
お絵かきクイズ・ゲーム、Draw Somethingがあっという間に1200万ダウンロードを記録―iOSとAndroid双方でトップ

ちなみにこの引用したコメントの訳は間違っています。
「communication」を「会話」としていますが、Draw Somethingはチャット機能はありません。
あくまでも絵を描いて当てる、というのを交互に繰り返すだけです。
絵を当てるときも、あらかじめ用意された文字を並べる、というシステムなので会話はできません。

なので、ここで言うコミュニケーションとは言葉を媒体とするものに限りません。
なにかしらを共有してそれに対して反応する、というのを繰り返すことでコミュニケーションは生まれるのではないかと考えています。

人はその営みになぜだか惹かれてしまうようです。