こんにちは。 卒業生枠で参加させていただいています @isaoeka です。
モバイルファクトリーには2014年に新卒で入社し、2017年の春頃まで働いていました。
これはモバイルファクトリー AdventCalendar2018 9日目の記事です。
昨日は @umaaaaa さんの 街の零細企業から見たIT事情 でした。
TL;DR
- 以前 pixe.la という、アレっぽいグラフを作れるサービスが流行っていた
- ライフログ系のゲーム/サービスとグラフは親和性が高いのでiOSウィジェットで見れると捗りそう
- モックアップを作ってみました
はじめに
今回は「iOSにTodayExtension（以下ウィジェット）を導入してみる。」というトピックで書いていきます。
このトピックで書こうと思った背景は、数ヶ月前に Pixelaという 「登録された数値情報に基づいて、アレのあれっぽくグラフを作れるサービス」1 といったサービスが流行っているのをTL上で見かけ、ライフログ系のサービスにピッタリだなぁと思ったことから、似たようなモノを作ってみようと思い至りました。
ウィジェットについては、MFに在籍していた頃、ステーションメモリーズ！（以下駅メモ！）というゲームに既に導入したことがあるので2、 MFの人たちには「またかよ！」と言われてしまいそうですが、気にせず進めていきたいと思います。
前置きが長くなりましたが、掻い摘んで書いていきます。
草ウィジェット作ってみた
早速ですが、実際に作ってみたキャプチャがこちらになります。3
本家の草の仕様では、今から1年前までの分（7行53列）を表示しているようですが、今回作ったモノはYAGNIで左上を1月1日、右下を12月30日に固定しています（7行52列）。4
グラフ部分にはCollectionViewでGrid表示になるよう UICollectionViewFlowLayoutに下記コードを指定しています。
if let layout = self.collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
let viewRect = self.collectionView.bounds
let rowCount: CGFloat = 7
let columnCount: CGFloat = 52
let size: CGFloat = (viewRect.width - (columnCount * layout.minimumInteritemSpacing)) / columnCount
layout.itemSize = CGSize(width: size, height: size)
let cellsHeight = (size + layout.minimumLineSpacing) * rowCount
let cellsWidth = (size + layout.minimumInteritemSpacing) * columnCount
let topPadding = (viewRect.height - cellsHeight) / 2
let leftPadding = (viewRect.width - cellsWidth) / 2
layout.sectionInset = UIEdgeInsets(
top: topPadding,
left: leftPadding,
bottom: topPadding,
right: leftPadding
)
}
TodayExtensionはwidgetLargestAvailableDisplayModeを指定しない限り縦幅が固定で、横幅が端末によって変わるため、横幅を正としてCellのサイズを定め、なるべくグラフが中央に表示されるようInsetを指定しています。 あるあるな実装かもしれませんね。
AppStoreにリリースされているウィジェット系アプリにも、コンテンツがはみ出ていたり、背景色が指定されていたりするアプリをよく見るので、Human Interface Guidelinesのウィジェット覧を一読して、意識しておくと良いかと思います。
最後に
特別特殊なことをしなくても簡単にソレっぽいものが作れたので、ゲーム系アプリにも普及すると良いなぁと思っています。 アクティビティの表示に限らず、ログインボーナスを表示をするようなウィジェットでも良さそうかなと。
またGitHubに上げておきましたので、より詳細を知りたい人がいればこちらを見てください。
まぁ以上です！！MF最高！Web界隈のMFといえばモバイルファクトリー！！
明日は @shioiyan さんです！！
MFワッショイ！
