2015年11月2日月曜日

Swiftのライブラリハッカソン、「Swift2 UI/UXチャレンジ」に参加してきた

おばんです、田中です。
2, 3ヶ月ぶりに東京に行ってきました。
今回の旅の目的は主にSwiftのOSSライブラリ開発武者修行です。
最近OSSに興味があって、GitHubのTrending Repositoriesを眺めたり、Trending RrepositoriesのクライアントアプリをOSSとして作って練習してみていたりという経緯がありました。
ちなみにそのクライアントアプリはまだ開発途中だけどこちら。ほんと全然開発進んでないけど...。

TrendingGitHub
https://github.com/ktanaka117/TrendingGitHub



Swift2 UI/UXチャレンジ



サイバーエージェントさん主催のSwift2 UI/UXチャレンジという、1日でSwift製OSSライブラリ作ろうぜ!って会に行ってきました。
リンクこれ。
https://www.cyberagent.co.jp/recruit/fresh/program_detail/id=10992



なに作ったの?

綺麗で楽しい、季節そのものとか、季節性のあるイベントをテーマにしたPull to RefreshのUIライブラリを作りました。(テーブルビューとかを下に引っ張るとテーブルの中身更新するおなじみのやつ)

その名も

SeasonalRefresh


今回はちょうど10/31開催だったのでハロウィンのテーマを作ろうとしました。
こんな感じ。


Pull to Refreshでよくある、UITableViewを引っ張った分だけIndicatorが増えるようなものに火時計みたいな鬼火を順に灯していって、ロード中はジャックオランタンが灯っている、みたいな感じです。朝イチのトイレで思いつきました。

このほかにも今後クリスマス、正月、バレンタインなんかも今後対応していくとして、春夏秋冬、季節そのもののテーマも作りたいなと思っています。

どうですか、リア充っぽいライブラリでしょう!
10/31に一日こもりきりでライブラリ開発!

圧倒的リア充感!!!




SeasonalRefreshの設計




管理クラスであるSeasonalRefreshがUIScrollViewインスタンスのcontentOffsetをKVOで監視して、都度SeasonalRefreshViewに描画させたりするのが基本となっています。


依存性を低くする

最初設計を考えていた時は「contentOffsetを取れば簡単に実装できるだろー(鼻ほじ」くらいに考えていて、UITableViewのラッパークラスを作ってあげたらすぐ作れるだろうなーくらいの考えでいました。

しかしメンターさんからのアドバイスは違いました。

「優秀なライブラリは汎用性を保つためにできるだけそれ単体で機能するように作るべきである」


さっき言ったようにUITableViewのラッパークラスを作るような設計だとRefreshを実装したいだけなのにそのラッパークラスを使わなきゃいけないことになってRefreshとUITableViewの依存性が高くなってしまいます。利用する人にとって、自分で実装したいUITableViewでそれを使わなくてはいけないのは中でなにをやってるのか気にしなくてはいけなくなってストレスになります。
なので今回はRefresh部分だけ切り出して、上の説明の設計にしました。


簡単に使いやすくする

実装するのに行数が少ないと導入しやすいよねー。
ということで今回はクロージャ部分は考えないとすれば一行で実装できるライブラリにしました。




デザイン

今回こちらを参考にさせていただいてリッチにしようかななんて思ってました。
[iOS] SpriteKitとUIKitを組み合わせて、ちょっとリッチなウォークスルー画面 を作りたい

しかし実際やってみるとパーティクルとUIKitのデザインはミスマッチ。逆にチープになってしまいました。



炎をパーティクルで表現するのは良くないのかも?というのも、どうしてやればそれらしく見えるかを画像検索して考えてみたけれど、リアルな炎を空間に浮かべる時は背景や周辺環境が大切になるかも?
まわりの煙や靄、夜闇の色合いなど。
あるいはそもそも炎をパーティクルで表現するというのはそれらしく見えないのかもしれないです。あるいはめちゃむずい。

雪や桜が舞うように、パーティクルの密度を低くして、画面全体に散るような表現の方が良いのかもしれない。
ジャックオランタンの実装方法考えてないけど、同じように靄がかかったような表現が出来たら捗りそう。
レイヤーをかぶせるか、もしくは画面自体に靄のパーティクルを表現させる。smoke。とか。

ちょっとこの辺は方針転換を考えるか、微調整しまくる感じになりそうです。



まとめ

世の中そんなに甘くない!



世の中そんなに甘くないことはすでに穂乃果ちゃんが一期第3話で証明してくれています。
UITableViewを引っ張った値取れりゃそのまんま出来るなんて甘い設計では良くないんだなってわかりました。
いやむしろ良い設計は難しいけど楽しく、その難しい設計に挑戦してそれなりに実装出来たので満足感がすごいです。
今までこんな綺麗に切り分けられて書けたかなーと、ワクワク楽しい最高の気分です。
仕事でもこんな実装を、サクサクサク〜っと出来たら強いな、良いな、目指す。
直接メンターさんがついてもらって、相談に乗ってもらって講評もいただける、大満足のイベントでした。ありがとうございました!



今後

ハロウィンのテーマは残念ながら一日では北米時間なんかで考えても間に合わなかった、残念。
基本の部分は大体できたのでこれからテーマを増やしていって、クリスマスまでにリリースする目標です。
設計としてはユーザーが新たにテーマを拡張して作りやすい機構にすると良いと思いました。
ある程度のフォーマットに沿う形で、リソース突っ込んで少し書き換えるだけで自分独自のテーマが作れる、とか。
人の顔をリソースに使ったりするようなネタテーマも面白いかもしれませんww
背景なんかにアニメーションを入れられるようにしてそれも簡単にできるようにするとか、そんな感じで展開していこうかななんて妄想しています。
仕事でも使えるグラフィカルなpull to refreshの定番になれるように頑張っていきます。
が、まずは綺麗なテーマ作るところが第一段階ですね。^^)


0 件のコメント:

コメントを投稿