potatotips #31
・2016年7月21日19時より、FiNC Inc.(株式会社フィンク、新有楽町ビル 5F)にて、potato tips #31が開催されました。
・potatotipsは、iOS/Androidをミックスして、5分間のLTを行うためのカジュアルな雰囲気のイベント。
・FiNCは、継続を科学するモバイルヘルスに特化したテクノロジーベンチャー。ネイティブなアプリを通じて顧客を健康することをモットーに事業を展開されています。
・以下では、各発表について、簡易なまとめとそれに対する個人的感想を述べたいと思います。
・誤記や誤解、補足がありましたらお気軽にコメントください。よろしくお願いします。
iOS: UICollectionViewでインタラクティブなcellの並べ替え
・ヤフー株式会社 平松亮介さん(@himara2)による発表。myThingsというアプリを作っている。meyasuba.co 3行でユーザーとチャットできるサービスを作っている。WWDC2016に参加された。
・UICollectionViewは、iOS6から使えるフレームワーク。複数デバイスでのレイアウトに柔軟に対応。iOS 10で強化された。
・Interactive Reorderingを使うと、UICollectionViewCellのインタラクティブに並び替えできる。iOSのホーム画面のような挙動が簡単に実現できる。
・ドラッグするとcellの要素の並び替えができる。サイズが違うところでも。ページングもできる。異なるサイズでもok。
・実装の手順としては、1.UIGestureRecognizerを設定。2.移動できるcellを指定する。3.イベントに合わせてreorderのメソッドを呼ぶ。4.並べ替え処理をする。という流れになる。
・データの入れ替えを自分で書かないと落ちる。
感想: CollectionViewを利用してホーム画面のように画像を入れ替えできるUIを提供しようとするときに、そのアニメーションまわりの処理を自動的に行ってくれるのは大変生産的。
ログ: PureeとKinesisを使ったログ収集の実装パターン
・Gunosy Inc.の松本さんによる発表。
・サードパーティーのツールは提供できる機能に不足しがち。
・プーリーとキネシスと読む。
・PureeはCookpad製のクライアント向けのログコレクタ。iOS/Androidで使える。再送やバッファリングまわりが簡単になる。
・Kinesisに送ってログを貯めることができる。
・AWS SDKの癖に注意する。初期化前のログ送信に注意する。同じキーをしていすると分散処理できない。
感想: PureeはFirebase AnalyticsやCrashlyticsなどよりも制約なく使える特長があるということで、より本格的なログ収集が必要な場面で検討する選択肢だと思いました。
Pureeについてはこちらの記事があります。
iOS: UIPageViewControlerを使って無限スクロールできるタブUIを実装
・VASILY, INCのEndoMariさんによる発表。
・無限スクロールできるタブを求めた。iQONで数ヶ月前に導入した。
・既存のライブラリを試した。表示されているVCのライフサイクルのメソッドが呼ばれない。スワイプとタブのずれ。
・そこで、独自に開発することにした。無限に表示切り替えできること、タブをタップしたら飛ぶようにすることなどにフォーカス。
・vasilyのプログに詳しい実装方法が書いてある。
・TabPageViewControllerという名前でライブラリでgitHubで公開している。
・特長。ライフサイクルのメソッドが呼ばれる。タブ移動アニメーションが同期される。カスタマイズ性が高い。
・実装もしやすい。タプルにvcとタイトルを代入してあげるだけでよい。色や文字サイズの変更、タブ切り替えスクロールを有限にするオプションもある。
感想: キュレーションアプリなどでよく見かけるタブのページ無限切り替えUIを実現するためのライブラリとして注目。タプルでVCとタイトルを並べて渡せるのは、コードの視認性がよくて使い易いと思いました。自分が書くコードではSwiftの良さを発揮できているかと自問しました。
Android: AdapterToolBox
・WantedlyのAndroidアプリ開発者 住友孝郎さんによる発表。
・データ型がたくさん出てきたり、他でも共有したいときにコード量が減る。
・GitHubにコードをあげてある。
感想: すみません。Androidの仕組みについて基礎知識がなさすぎて深く理解できませんでした。コード量を減らすための工夫はプログラマの常に求めるところだと再確認しました。iOSだとエンベッティッドフレームワークに切り出したり、ジェネリクス型を使って似たような記述をまとめる工夫に対応するのかなと思いました。
iOS: iOSアプリ100こを考察した
・mafmoffさん(やまもとさん)による発表。
・まだ100個を試していないので30個の段階での中間報告。
・チームラボでiOSアプリを開発してきた。UI UXに関心。
・mafmoff/100Apps
・気づいたこと。設定画面が灰色であることが多い。グループド設定を利用したアプリが多いためか。
・一覧系はスクロールでよく引っ込むUIを採用てしいる。セグメントが引っ込む、タブが引っ込むなど。タイトルが引っ込む。一覧表示エリアを広く確保するための工夫であると思われる。
・ニュースやキュレーションでは無限タブスクロールがよく使われている。
・チュートリアルは必要だろうか? スキップがないとストレス。図だけではわからない。
起動時はすぐにアプリを使いたい。操作方法の説明を覚えていられない。チュートリアルが必要なアプリはそもそもどうなのだろうか。
・アプリに最適化していないwebページがある。ヘッダーが二重表示される。
・navigationBarとwebのviewのヘッダーが二重表示されるアプリがある。amazonは重複がない。
・ライセンス画面の存在意義は? 設定アプリ内に表示しないのはなぜか?
・レビュー評価と良いデザインは一致しない。
・UIが良いとユーザのテンションが上がる。
・デザインの説得をするときに実例があると説明しやすい。
感想: githubに就業規則を載せている会社があるのは知っていましたが、こういうコード以外のレポートのためにgithubを活用するのが新鮮でした。設定アプリのほうにライセンスをまとめることができるのに、あえてアプリ内でライセンス項目を設けている意図は何か。この点は私も疑問に感じました。
Android: activityのライフサイクルイベントを監視する
・Repro Inc.でSDK開発を担当されているpekoeさんによる発表。
・activityのライフサイクルを監視していると、最前面のactivityとかTaskにスタックさりているactivityを取得したいときなどがある。
・Application.ActivityLifecycleCallbacksを使うとよい。
・複数のactivityLifecycleCallBacksを共存できる。他アプリのtaskに含まれるactivityのライフサイクルイベントでもコールバックされる。無視したいならTask管理する必要がある。
・最前面のactivityのresumeが最後に呼ばれるわけではない。直感的ではないので気をつけて。
感想: これもAndroidのお話しなのでよく理解できておりません。Androidのactivityという概念は特有ですね。Androidではバックグラウンド処理が比較的容易に実装できるようで、この点はiOSと比較される点ですね。
iOS: Binding Realm
・お仕事でiOS開発をされてこられた@woxtuさん(ヲッとお読みするようです)による発表。
・Realmにデータを突っ込んで、複数のviewでそれぞれ引き出す処理をしたい。データが変更されたらviewも勝手に変更されてほしい。
・そこで、KVOを使う。
・good oldな(古き良き)KVOを使う方法がまず考えられます。addObserverと
observeValueForKeyPathを使う方法です。
・他方、Bond、ReactiveKit、RXswiftなどのようなバインディングライブラリを使って、さらにスマートに記述することもできます。Realm ObjectのほとんどのプロパティはKVOに対応しています。("Realm objects are now Key-Value Observing compliant for most properties."という記述が公式記事にある。)
・cellを生成するときにバインドするスタイル。
・KVOだとInsert/Deleteに対応できない。この点については、Realm Collection Notificationsを使うことで対応できる。この点は後日の機会に話したいと思う。
感想: 見通しのよいコードのためにバインディングすることは役立ちますね。Realm ObjectのほとんどのプロパティはKVOに対応しているそうですが、その例外は何か気になりました。
周辺Beaconを取得するWearアプリを追加してローンチするまで#
・Origami inc.のアプリエンジニアのKari Ikadaによる発表。
・ウェアラブルデバイスでのiBeaconの感度がどの程度かを実機で検証された。
・AndroidアプリはiBeaconの感度にばらつきがあった。
・dongriさんのiBeaconFinder wear版を作る。
・Handheld(スマホ)がなくてもウェアラブル端末だけで動くようにする。
・実機でやるとパーミッションを設定する必要があった。
・思ったよりもwatchの感度が良かった。
感想: 黒い背景にコンソール画面のように無機質なログが表示されたWearの写真にAndroid文化を感じました。AndroidのBeacon系の開発は特に大変だと聞いたことがあったので、動いているものを見ると感慨深いですね。
iOS: SketchでUIを楽に組もう-ZeplinとSympli
・iOSを5年やっているDaiki Matsudateさんによる発表。
・デザイナー要求を正確に再現するには?
・デザイン仕様書の作成はコスト。Sketchがあるので、低コストになった。
・Zeplinを使うと、プログラマのほしいorigin, size, margin, color, fontといった情報を取得できる
・SketchからStoryboardを作るためのツールがSympliというプラグイン。
・座標と色をStoryboardで見ることができる。
・画像をドラッグドロップするだけでアセットに自動的に入ってくれる。
・Androidでも使える。Android Studio版もある。
・フォントファイルをダウンロードできる。
・パーツを自動配置できる。
・料金体系は、ZeplinとSympliは同じ。Zepelinはデスクトップアプリだが、SympliはIDEアプリ。1プロジェクトだけなら無料で利用できる。
感想: デザイナーさんの色やフォントの指定をサクサクと確認できたら捗りますよね。SympliはXcodeの中で使うことができて、気になりました。特に重くなるなどの副作用もなさそうなので、Sketchベースのお仕事のときに使ってみたいと思いました。
Android: How to get size of NavigationBar and StatusBar#
・AbemaTV, Inc.のTakuma Fujitaさんによる発表。
・スライドはこちらです。
・タブレットだとタブバーが下にいったりして取得が大変。
・Reflectionという手法。XMLから抜き出す。いくつかのデバイスでは、間違ったサイズを返す。ハードウェアキーボードを使うデバイスである。
・Calculateという手法。画面サイズから計算して取得する。
・WindowInsetsCompatを利用する手法。WidthやHeightを取得できる。コールバックがビューの配置が完了してから呼ばれるので、タイミングによってはNULLが返ってきてしまう。即座に必要な場合はcalculationしたほうがよい。
感想: OSが綺麗に値を与えてくれる仕組みがあってしかるべきだと思いますね。
iOS: 実装とアプリ開発と独学でiOSアプリ開発と向き合うこと#
・Fumiya Sakaiによる発表。
・仕事でやった経験はあまりないので独学でどうやって向き合ってきたか。本業はRail, phpを使うサーバーサイドのプログラマ。
・発表スライド
・簡易家計簿、10秒虫食い算というゲームなどを開発してきた。
・独学していく過程で障害に感じたことや参加にした文献のリストを提供してくださっています。
・GitHubに祝日カレンダーのリポジトリーを公開している。
これからiOS開発を学ぼうとしている人は、参考文献リストが大変参考になると思います。スライドに掲載されているので、確認することをおすすめします。
Android: OpenGraphでURLをリッチに表示する#
・Cyberagentのyuichi_maekawaさん(@kaelaela)による発表。
・Qiitaにアップしたスライドを使って説明。
・The OpenGraph protocolは、htmlに決まった書式でmeta tagを追加する仕様を定めたもの。
・fbとかでURLを貼るとリッチに表示される。og:title|image|type|urlの4つ。
・タグがないときもある。古いwebはたいていないので実装する必要がある。そのベージのURLではないタグがついている可能性がある。
・twitterは独自だけどほとんど同じ。ogがtwitterに変わる。
・Androidでは、依存関係に悩まないように、車輪を作れという"教え"がある。
・custom viewで作ってみた。kaelaela/OpenGraphViewというリポジトリを参照のこと。
感想: すみません。これもAndroidの話なのでよく分かっていません。依存関係からフリーでありたいというAndroidの事情があることが勉強になりました。iOSの場合は、OSSをできるだけ活用しようと考えるはずですが、Androidの場合は依存関係の面倒を回避するために自前で色々と開発する必要がありそうで、余計に大変そうだなと思いました。
iOS: Notifications in iOS10
・TachibanaKaoruによる発表。
・2016年8月からフリーランスiOSエンジニアとして活躍していく予定。
・通知にtitle/subtileがつけられるようになった。
・イメージがつけられる。
・custom UIをつけられる。
・ユーザが許可したかの設定を取得できる。
・配信・未配信の通知を簡単にハンドリングできるようになった。
・配信・未配信の通知を簡単にハンドリングについて
・iOS10では、Local/Remote Notificationの統一がはかられています。
・Remote Notificationの考え方は基本的に変わらない。
・Local Notificationのほうはかなり考え方が変わっている。
・UNUserNotfificationCenterのシングルトンのインスタンスを取得して、そこを起点に進めていくというスタイルの実装になり、アプリのどこからでもハンドリングできるようになった。今まではAppDelegateの中でハンドリングする必要があった。
・IDで管理する
・通知の管理。届いているけど見えていない(Pending)、配信されているけど未処理(Delivered)、ユーザーが処理した状態の3つの状態。
・IDを指定したり、今pedningされているものをdeleteすることができる。
・IDをトリガーにして中身を変更することができる。配信前/(ユーザーが見ていないものも)に状態変化したものを柔軟に変更できる。
・アプリがフォアグラウンドに出ているときにも通知を出せるようになった。Notification in actionという。
・iOS9と10の通知ハンドリングの違い。fav通知
・無駄な通知を出さずに済む。
感想: iOS10の変化の一番目につく変化が通知周りだと思います。ルックス的にも機能的にも新しくなりましたが、特に新しいことをするつもりがなくてもLocal Notificationの考え方が変わった点はキャッチアップが必要ですね。Notification in actionができるようになったので、どんなUXが可能かよく検討したいものです。
iOS: Programmatically creating a custom sticker application
・akio0911さんによる発表。
・iOS10で出てくるiMessageアプリのExtensionについて。
・画像は500KBの制限がある。
・相手が送ってきた画像の上にオーバーレイできる。アルファつきのPNGのほうがGIFよりも綺麗に重ねられる。
・動的に作成するアプリでは、ライフサイクルに対応するメソッドの中で必要な処理を記述していくスタイルである。例えば、willBecomeなどのメソッドを使う。
・dataSourceとView、ViewControllerのモデル
・UICollectionViewで作ってもよい。
・MSStickerViewはStickerを一つ表示するview。
*感想: カメラを起動して動画を撮影しながら動的にコンテンツを作成する仕組みはiMessageアプリでしか提供できない価値だという話を聞いて、なるほどと思いました。iMessageは日本では現在あまり利用されていないと思いますし、Androidの人と一緒に使うこともできないのでかなり限定的な使い方しかできないのではないか、使う人が増えないのではないかと思うきらいもありましたが、iOSどうしで特定の場合にあたかも一つの独立アプリのような位置づけで利用される場面は想像しやすいですね。/英語の資料はスライドを公開した後で海外の開発者からも参照してもらえるのでオープンだと思いました。 *