こんにちは。卒業生枠で参加させていただいています @isaoeka です。
モバイルファクトリーには2014年に新卒で入社し、2017年の春頃まで働いていました。

これはモバイルファクトリー AdventCalendar2018 9日目の記事です。
昨日は @umaaaaa さんの街の零細企業から見たIT事情でした。

TL;DR

以前 pixe.la という、アレっぽいグラフを作れるサービスが流行っていた
ライフログ系のゲーム/サービスとグラフは親和性が高いのでiOSウィジェットで見れると捗りそう
モックアップを作ってみました

はじめに

今回は「iOSにTodayExtension（以下ウィジェット）を導入してみる。」というトピックで書いていきます。

このトピックで書こうと思った背景は、数ヶ月前に Pixelaという 「登録された数値情報に基づいて、アレのあれっぽくグラフを作れるサービス」¹ といったサービスが流行っているのをTL上で見かけ、ライフログ系のサービスにピッタリだなぁと思ったことから、似たようなモノを作ってみようと思い至りました。

ウィジェットについては、MFに在籍していた頃、ステーションメモリーズ！（以下駅メモ！）というゲームに既に導入したことがあるので²、 MFの人たちには「またかよ！」と言われてしまいそうですが、気にせず進めていきたいと思います。

前置きが長くなりましたが、掻い摘んで書いていきます。

草ウィジェット作ってみた

早速ですが、実際に作ってみたキャプチャがこちらになります。³

本家の草の仕様では、今から1年前までの分（7行53列）を表示しているようですが、今回作ったモノはYAGNIで左上を1月1日、右下を12月30日に固定しています（7行52列）。⁴

グラフ部分には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ワッショイ！

https://blog.a-know.me/entry/2018/10/14/212338 より ↩
その節は関係者の皆さんありがとうございました。 ↩
表示しているデータは適当 ↩
12月31日なんて無かった & うるう年も無かった ↩