Excite Smartphone Engineer's Blog

2013年 08月 21日

Dモーニングのページ送りするパラパラ・スライダーの実装を解説

こんにちは DモーニングのiOSアプリ開発者の 渡辺 です。

皆さんはDモーニングでマンガを楽しんでいますか?
1週間無料で前号を読むことができますので、まだの方はぜひダウンロードして下さいね。
ちなみに、私は「しばたベーカリー」が好きです。

e0291676_1540727.jpg


Dモーニングでは雑誌のページをめくっている間隔に近い体験を!ということでちょっと変わったスライダー(名付けて『パラパラ・スライダー』)を用意しています。
e0291676_16102027.jpg

下のスライダーで左右に引っ張って、パラパラめくる感覚を実現!



ガジェット通信さんの下記の記事がすごくわかりやすく説明してくれているのでぜひ読んでみて下さい。
はねプリ第54回「キビキビ動くのがすごいよね。本当に『パラパラめくる』ことができる」 – 『Dモーニング』

うれしいことに映像をYouTubeにアップしてくれているユーザさんもいました。


今回はこのスライダーの実装方法を解説しましょう。
おそらくある程度の開発者は見ただけで実装方法がわかっちゃってると思いますが、答え合わせだと思って読んで下さい。



では解説していきましょう。
パーツは大きくわけてスライダー部分と画像表示部分の2つとなります。



スライダーはどうやって処理しているのか?

解説といっても文字にすると簡単なんですよね。

1. ノブとなる画像をタッチし始めたら監視開始。
2. そのまま移動したら、真ん中からの距離をはかって画像の移動距離を算出。ノブ画像を移動。
3. 指を離したらノブ画像を真ん中にもどして、画像も適正な位置にする。

これだけです。

キモとなるのは2の移動距離の算出。
ここの移動距離が大きすぎても小さすぎてもダメなので、微妙な調整が必要でしょう。
今回用意したサンプルプログラムでは移動距離は固定ですが、Dモーニングではデバイスによって移動距離を調整しています。

また、真ん中からちょっと動かしただけで画像が動き出してしまうのも気持ちが悪いので、遊びを持たせる必要がでてきます。
具体的には、真ん中から一定範囲の移動距離は0にするといった感じです。
こういう細かい部分を考慮しないと使い勝手のよい気持ちのいい動きにならないんですよね。重要重要。
実際に動かしてみないとこういう部分はわかりません。
Dモーニングのパラパラ・スライダーは半日程度で動かす状態までできたのですが、細かい動きの調整は実装に費やした時間よりもかかっています。

画像の移動はタイマーを使い、発火のタイミングで画像を算出した距離分移動させる処理をします。
こうすることにより、ノブをひっぱったまま指を途中で止めていても画像を移動させる動きが可能になります。



画像の表示処理は?

次は画像の表示処理について解説します。
表示する構成に使っている重要なものは
・UIScrollView
・CATiledLayer
この2つです。

UIScrollViewは説明不要かと思いますが、数点。
今回真ん中にUIScrollViewを設置しています。幅いっぱいには広げていません。
そのためコンテンツViewをUIScrollViewの外にも表示させるため、clipsToBounds = NOにしています。
他にも方法はあるのであまりこの辺は気にしないで自分の好きに表示させてください。

実際の描画処理はCATiledLayerを使っています。
CATiledLayerは大きな画像を分割して1枚の画像として表示するサンプルはいっぱいあってそのイメージにとらわれてしまいますが、指定したタイルサイズで描画指示がくるという点に注目すれば、個別の画像だって簡単に描画することができるのです。

今回はX座標だけでどの画像を表示するかを決定できましたが、縦横スクロールでY座標も考慮して画像表示するようにすると「みそ汁レシピ一年分」みたいなことも簡単にできます。
*みそ汁レシピ一年分のiPhone版(レシピ一年分シリーズ)はCATiledLayerをつかってあのふわっとした画像表示を実現しています。

e0291676_1622623.png

みそ汁レシピ一年分



余談ですがAppleのエンジニアに同じレシピシリーズである "Japanese Food Recipe" を見せたとき、これはどうやって実現してるんだ!?と驚かれました。

話がそれちゃいましたね。すみません。
結構お手軽で綺麗なフェードインで表示されるので私はCATaildLayerが結構好きなのです。

実際にどうやって描画まで行うかをまとめるとこうなります。
1. 画像枚数 × UIScrollViewの幅 のViewを作成し、UIScrollViewにaddSubviewする。
2. 1で作ったViewにCATiledLayerを継承したオリジナルのLayerをaddSubLayerする。
3. 2のCATiledLayerを継承したクラスで描画処理を行う

簡単ですね。
CATiledLayerを継承させると、フェードインの時間も設定できます。

サンプルでは0.1秒にしています。0.0にするとフェードイン処理は行われません。

もちろんCATiledLayerを使わないでも同じようなことはできますので、一つの方法だと思って参考にしてみてください。

さてどうでしたでしょうか?
かなり簡単だったと思います。
使える用途は限られますが、参考にしてみてください。

サンプルソース

サンプルソースはこちらです。
e0291676_16263717.png


Android版について

開発者は私ではありませんが、Android版のDモーニングも絶賛開発中です!
iOSでは簡単にできることもAndroidだと難しかったりしてかなり苦労しているようですが、負けず劣らず良いアプリが出来そうですのでご期待下さい。

最後に

このサンプルプロジェクトに含まれている001〜100の画像は、sequential image maker で作成いたしました。
この場を借りてお礼申し上げます。

e0291676_1540727.jpg


by sp_tech | 2013-08-21 18:09 | iOS | Comments(0)


<< 2013サマーインターンシップ      海外(アメリカ)でのモバイル広... >>