Hatena::ブログ(Diary)

Gorokuma Diary

2012-04-15

UIViewをぐるぐる回転させるシンプルな方法 (注:追記あり)

新作アプリ用に同期アイコンを作ったので、これを回転させるのに色々調べたのですが、みんなそれぞれ書いていることが少しずつ違って悩んだので、こうするのが一番シンプルだろうというのを書いてみます。

この例ではImageViewのLayerを操作して90度ずつ無限に回転を繰り返します。

任意の角度を指定したい場合はnumberWithFloat:の数値とrepeatCountでうまく調整してください。(90度以下の数値を指定して必要回数繰り返せば良いはず)

    CALayer *layer = imageView.layer; 

    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];   
    animation.toValue = [NSNumber numberWithFloat:M_PI / 2.0];    
    animation.duration = 0.5;           // 0.5秒で90度回転
    animation.repeatCount = MAXFLOAT;   // 無限に繰り返す
    animation.cumulative = YES;         // 効果を累積
    [layer addAnimation:animation forKey:@"ImageViewRotation"];

タイマーを使ったり、アニメーションを繰り返したりせずすっきり書けました。

アニメーションをやめるにはaddAnimation:forKey:で指定したキーを使って以下のように書きます。

    CALayer *layer = imageView.layer;

    [layer removeAnimationForKey:@"ImageViewRotation"];

ただこの場合、回転が元の位置に戻ってしまいます。

アニメーションを任意のタイミングで止めたり、再開したい場合は以下のようにします。

(http://blog.livedoor.jp/tek_nishi/archives/3508878.html を参考にさせて頂きました。)

一時停止

    CALayer *layer = imageView.layer;

    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
    layer.speed = 0.0;
    layer.timeOffset = pausedTime;

再開

    CALayer *layer = imageView.layer;

    CFTimeInterval pausedTime = [layer timeOffset];
    layer.speed = 1.0;
    layer.timeOffset = 0.0;
    layer.beginTime = 0.0;
    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    layer.beginTime = timeSincePause;

今回はImageViewのlayerを操作するように書いてありますが、UIViewなら基本的になんでもいけると思います。

ちなみに回転だけじゃなくて3D的にアニメーションする場合は以下のように書くと良いみたいです。(この例では回転だけですが)

    CALayer *layer = imageView.layer;
    
    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"transform"];   
    CATransform3D transform = CATransform3DMakeRotation(0.5 * M_PI, 0.0, 0.0, 1.0);     // 90右回転
    animation.toValue = [NSNumber valueWithCATransform3D:transform];
    
    // 以下はさっきと同じ
    animation.duration = 0.5;           // 0.5秒で90度回転
    animation.repeatCount = MAXFLOAT;   // 無限に繰り返す
    animation.cumulative = YES;         // 効果を累積
    [layer addAnimation:animation forKey:@"ImageViewRotation"];

CALayerはあまり良くわかっていないので間違っている点などあればご指摘ください。

P.S.

停止と再開を参考にさせてもらったこちらのサイトではカテゴリを使ってCALayerを拡張しているので同じように回転もしても良いのかも知れません。

追記

書いた途端にあれですが、もう少しシンプルな方法を教えてもらいました。

90度ずつ回す必要がないのでわかりやすそうです。負けた\(^o^)/

Core Animation で画像を回す

2012-04-01

iOSカレンダーアプリのアイコンを月表示に変更する裏技!!

この画面をよーくみてください。普通のホーム画面に見えますがどこかが違います。どこが違うかわかりますか?

f:id:gorokuma:20120401034941p:image:w240




どうです、わかりましたか?



そうなんです!

カレンダーアプリのアイコンが月表示に変わっていますね!!!

今日はこのカレンダーアプリのアイコンを変更する裏技をご紹介します。

まず、Safariを起動します。

次にURL欄に以下の順で文字を入力し、キーボードの「Go」ボタンをタップします。

「j」、「.」、「m」、「p」、「/」、「a」、「P」、「R」、「I」、「L」、「f」、「O」、「o」、「L」

あとは表示される画面に従って設定するだけで完了です。


上記の入力が面倒な場合はこちらのリンクをタップするだけでもOKです!

アイコンを月表示にして何が便利なのとの声も聞こえてきますが、日々締め切りに追われて仕事をしているIT業界の方には概ね好評なようです。

みなさんもぜひ一度お試し下さい!!

2012-03-23

ホーム画面に現在月のiOS標準カレンダー風アイコンを作れるWebアプリ

iOS標準のカレンダーアプリは日付のアイコンが出ますが、年や月は表示することができません。

それならばと自分で年と月のアイコンを表示するアプリを作ってAppleに提出してみたのですが予想どおりのリジェクト。

f:id:gorokuma:20120324041647j:image:w300

これだけ見た目を真似したらさすがに無理かなとは思っていたのでショックは少ないのですが、このままでは悔しいので月のアイコンをホーム画面に置けるWebアプリを作って公開することにしました。

カレンダー

http://calendar.setoh2000.com/jp/

このアイコンは月が変わっても自動では更新されませんが、アイコンをタップすることでSafariが開きその際に自動的にその月のアイコンに更新されます。通常iPhoneアプリは自分のアイコンを変更することはできません。しかし、知らない人も多いのですがWebアプリではページにアクセスされるタイミングで変更することができるので、この仕組みを利用しています。

テストページを用意したので興味のある方は以下のページをホーム画面に追加して試してみてください。

タップする度にアイコンが変わるはずです。

Calendar[TEST]

http://setoh2000.com/CalendarTest/

ただ、この方法ではサーバー側のタイムゾーンに合わせてアイコンが変化するので日本以外ではちょっと問題があります。

なので海外向けの英語版ではURL引数にGMTとの時差を入れるようにしています。しかし、これではURLが地域によって異なるため、ある人がシェアしたURLを異なるタイムゾーンの人が使ってしまうと問題が発生します。なのでクライアント側で時差が異なれば正しくセットしなおしてリロードする仕組みを入れています。

というわけで海外在住の方はこちらをご使用ください。(日本の方が使っても問題はありません)

Calendar

http://calendar.setoh2000.com/


最後に

あと年のアイコンが欲しい方は以下のアプリと組み合わせると和暦もわかってさらに便利になるのでお好きな方をダウンロードしてみてください。

年号しらべ

年号しらべ 1.0.2(無料)App
カテゴリ: ユーティリティ, 旅行
販売元: AppBank – theM LLC(サイズ: 2.1 MB)
全てのバージョンの評価: (4件の評価)


和暦+

和暦+ 2.0(¥85)App
カテゴリ: ライフスタイル, ユーティリティ
販売元: Makoto Setoh – Makoto Setoh(サイズ: 1.9 MB)
全てのバージョンの評価: (24件の評価)


2012-02-29

Touch Icon CreatorがJavaScript(ブックマークレット)に対応!

今まではJavaScript、いわゆるブックマークレットのURLを指定しても何も動作しなかったのですが、moyashi(@hitoriblog)さんから熱い要望があったのでTouch Icon Creatorで作成したアイコンからJavaScriptのコードを実行できるようにしてみました。

(サーバー側の変更なのでアプリのアップデートは不要です)

以下のコードで動作を確認しています。

アラートを表示

javascript:(function(){alert("Hello");})()

また、以下のようにすることでマップアプリを開けることも確認済です。

マップアプリで近所のコンビニまでの経路を表示

javascript:(function(){document.location.href='http://maps.google.com/maps?
daddr=コンビニ&saddr=現在地&dirflg=w&t=m';})()

(URLはもとまかさんの記事から借用。途中改行しているので注意)

このケースでは直接URLを書くのと何も変わりませんが、何かJavaScriptで処理してからジャンプしたい場合などに使えるかと思います。

ブックマークレットというのは大抵今表示しているページに対して何か処理をすることがほとんどなのであまり使い道はないかも知れませんが。。(^^;

※ ちなみにJavaScript自体はフルスクリーンWebアプリの状態で動作します。

追記 2012-2-29 16:40

どうも凝ったブックマークレットだとうまくいかない模様。

どういう条件で失敗するかなどは現在のところ不明です。

追記 2012-3-1 11:50

スクリプトの一部記号が化けるバグがあったのを修正したので、上記の問題はひとまず解決しています。

P.S.

あともとまかさんからの要望についてはアップデート版を申請済です。

うまくいけば近日中にリリースできると思います。

2012-02-16

今話題のGumroadでMac用アプリScrollToTopを販売開始!

機能が単純すぎるとの理由でリジェクトされたためやむなく無料で公開していたMacアプリ、ScrollToTopを今話題のGumroadで販売することにしました。

ScrollToTop on Gumroad

f:id:gorokuma:20120216152803j:image:w360

価格は$1です。もし良かったら購入してみてください。

詳細というほどのものではないですが、こちらに説明があります。

すでにダウンロード済の方は内容は同じなので購入の必要はありません。

■■■ 追記 2012/2/17 04:20 ■■■

試用してみたい方はここからダウンロードしてください。

中身は同じです。気に入ったら上のGumroadリンクから購入頂ければ。

■■■ さらに追記 2012/2/19 02:00 ■■■

今読んでいるこの記事をTwitterやFacebookで拡散して頂ければ購入していただかなくても結構です。

ダウンロードはこちら(上の試用リンクと同じ)です。

ご協力よろしくお願いします。(^^;