iOS
Swift
TodayExtension

草ウィジェットを作った🤔

こんにちは。 卒業生枠で参加させていただいています @isaoeka です。

モバイルファクトリーには2014年に新卒で入社し、2017年の春頃まで働いていました。

これはモバイルファクトリー AdventCalendar2018 9日目の記事です。

昨日は @umaaaaa さんの 街の零細企業から見たIT事情 でした。


TL;DR


  • 以前 pixe.la という、アレっぽいグラフを作れるサービスが流行っていた

  • ライフログ系のゲーム/サービスとグラフは親和性が高いのでiOSウィジェットで見れると捗りそう


  • モックアップを作ってみました


はじめに

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

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

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

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


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

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

KusaWidget

本家の草の仕様では、今から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ワッショイ!





  1. https://blog.a-know.me/entry/2018/10/14/212338 より 



  2. その節は関係者の皆さんありがとうございました。 :bow:  



  3. 表示しているデータは適当 



  4. 12月31日なんて無かった & うるう年も無かった