kumamotone’s blog

https://twitter.com/kumamo_tone https://github.com/kumamotone http://qiita.com/kumamotone

potatotips #50 に参加しました (iOS, Androidブログまとめ)

potatotips #50iOSブログまとめ枠で参加させていただきましたのブログです。

f:id:kumamotone:20180420011750j:plain

会場はWantedlyさん。めっちゃおしゃれ(語彙) すごく見やすくて聞きやすい環境でしたし、持ち時間時間が見やすく表示されていて発表しやすそうでした。

f:id:kumamotone:20180420011818j:plain

50回目ということでスピーカーの方々もはじめて発表したときのこととか振り返ったりされてました。

以下発表内容です。参加枠としては iOSブログまとめ枠でしたがAndroidの発表内容に関してもまとめてみました。間違いや気になるところなどあればご指摘ください。

埋まっていない資料は公開されたのを見つけ次第反映します。

"Hello Flutter"の次におさえたいFlutterのポイントその3 / Kenichi Kambara さん

www.slideshare.net

その2

www.slideshare.net

その1

www.slideshare.net

Flatterの概要、特に今回はUIに焦点を絞った話。

FlatterではDart言語でWidgets Treeというものをガリガリ書いていくことになる。Scaffoldというテンプレートクラスを使って作っていく。ScaffoldにはAppBarとBodyがぶら下がっている。

Columnというのを使うと、AndroidでいうLinear Layout の Verticalみたいなものが実現できる。Columnにまたボタンとかテキストフィールドがぶら下がっている。

Flutter向けのGUIビルダーが Google I/O で発表されることを期待しています!

recyclerview-selection / kgmyshin さん

speakerdeck.com

recyclerview-selectionの概要と、つかいかたについて。

recyclerview-selection とは?

28.0.0 alpha1から導入された、複数選択の機能の。ドラッグして複数選択みたいな機能が簡単に作れますよみたいなライブラリ。マウスなどにも対応しているらしい。

使いかた

Recyclerview, Viewholder, Adapterは一旦ふつうに作る。ただ、stableIdを使うようにする。SelectiontrackerインスタンスSelectionTracker#Builder でつくる。各引数に、Key、使うRecyclerview、StateIdKeyProvider、今どこのアイテムを選択している解決するItemDetailsLookUp、StorageStrategy、必要だったらリスナーを与える。あとはViewに選択状態を反映しておわり。

ブログにもっと詳しく乗ってるよ

inside.dmm.com

サンプルコード

github.com

Yet another simple Logger / ngtk さん

speakerdeck.com

XcodeのConsole log使ってますか?なるべくデバッガーをつかわずに問題解決したい。たとえばログとか。

ただログ機構に不満がある。ロギングのレベルが指定できない。ライブラリの標準出力がコントロールできない。

github.com

ライブラリ色々見たが、Swiftybeaver がオッとなった

:star: 3500 ぐらいで、ログレベルに対応してて良い。一方出力先も指定できる。文字列をコピペできない、有料のプラットフォームとセットになっている、とか概ねいいけど微妙なところもあった。

欲しい機能ぐらいであれば自分で作れるかもということで作ってみた。ざっくり実装紹介。

Glide 4 with Kotlin / hkusu さん

speakerdeck.com

画像ライブラリGlideの使い方とGlide4の機能の話。

hkusuさんのプロジェクトではpicassoがメンテされないのでGlideに乗り換えたという経緯がある。

Transformation。Glide4 では クロップ、角丸は標準で用意されている。また Glide Transformations使うとBlur, BrightnessFilter とか凝ったやつも簡単にできる。Glide4でアニメーションのデフォルトがフェードなしになったことに注意。

Glide Optionではよく使うオプションを定義して再利用できて便利。便利なんだが、Transitionや、サムネイル・リスナーの設定などはできない。これはGlide Typeとして定義できるがGlide Optionに比べると制約がある(複数指定できない、引数指定できない)。

しかし、Kotlinなら拡張関数があるので、GlideRequestとかに生やしてしまえば同じように処理をまとめられる。

Tagged / to4iki さん

speakerdeck.com

Idを型化したい。たとえば Userって型とSubscriptionっていう型があって、それぞれにidがあるのだが、これらは違うもの。なのでStringとかじゃなくて型にしたい。

ほかの例として、 Codable を使う場合は、decoderを実装すればよい。ただ、これいちいち書くのめんどいし、Userの比較するのにEquatableをIdにも実装せんとあかんのかよとなる、

structの各要素のEquatableの実装めんどくさい問題は、Swift4.1のConditional Conformanceで解決した。

github.com

さらに、この機能を使ったTaggedというライブラリがあり、これを使うことでプリミティブな型を簡単に型として扱うことができる。

DiffUtil and ListAdapter / kubode さん

speakerdeck.com

DiffUtil と ListAdapter の紹介。

github.com

DiffUtilでは、2つのListの差分をO(n)で計算できる。これは1000個のリストのうち50個の変更があったとき、Nexus5Xで4.6秒で計算できる速さ。

ListAdapterは、Support Library に 27.1.0で追加された、DiffUtilをつかうRecyclerView.Adapter。デモ。簡単。注意点としては、MutableListと一緒に使ってはならない。

From ObjectMapper to Codable / kobakei さん

speakerdeck.com

APIが返してくるJSONをObjectMapperでやってた部分をCodableにおきかえた。

Codableの基本的な説明。ネストしたJSONのパースの仕方、CodingKeyの話、日付String→Dateに変換など。JSONがつらい形で返ってきても、Decoderを自前実装すればよしなに対応できる。

ちなみにCodableAlamofireというのを使うと、responseDecodableObjectというのがrequestに追加されて、そんまんまCodableの型のオブジェクトを受け取れる。

github.com

Viewのキャプチャを撮ってみる / e10dokup さん

www.slideshare.net

特定のViewだけをキャプチャしたいときどうする?こういうときは、android.R.id.contentでActivity全体をキャプチャできる。これやると通知領域のないスクショが撮れる。

android.R.id.contentで画像としてキャプチャする場合。View#getDrawingCache()でViewのキャッシュを作成してBitmapで取得する(android-ktxならView#toBitmap()でもOK)。これ使うと、子になってるViewもまとめて実行される。注意点としては、使う前にView#setDrawingCacheEnabled(true)しよう。

画像ではなく、PDFとしてキャプチャする場合。PDFのいいところとしては、テキストをテキストとして保存してくれる。PDFDocumentというクラスを使ってキャンバス芸でキャンバスにゴスゴス書いていく感じになるが、たぶんPDFDocumentはこうやって使うものではない…

ほかにもMediaProjection API(API 21〜)を使うという方法がある。MediaProjectionは仮想のディスプレイにミラーリングしてやるという方式(こっちは自前のアプリだけでなくServiceとして起動して任意のアプリのキャプチャ撮ったりできる)。

iOSは自動生成の夢を見るか? / Nonchalant さん

speakerdeck.com

自動生成の前にDIの話。Swinjectを使っている。

github.com

container.register()をゴスゴス書くことになる。動的DIなので参照されるまで気づけなくて、間違うとクラッシュするとかありうる。

github.com

Sorceryは自動生成ツールで、これを使うとボイラープレート自動生成してくれる。Stencilテンプレートというのをテンプレート言語としてつかう。

紹介したコードでは、命名規則を利用したが、Sourceryはあるプロトコルに適合している型だけを抽出するとかできるので、Prefixとかずれても大丈夫なはず。

SourceryにおけるStencilの文法は以下にあります。

github.com

Preferences as a Service / izumin5210 さん

speakerdeck.com

アプリで使用する設定値、どこに保存する問題。結局サーバー側の挙動に影響するものが多いので、Shared PreferenceやRealmなどを使う方法もあるが、結局ローカルだけに保存するという選択肢が取れない場合もある。

しかしアプリごとに毎回同じような設定用のサーバーを立てるのはつらい…なので汎用的に設定値を管理するサービスないわば、Preferences as Serviceをつくった。

また内製なので、外に出したくない情報も使うことができる。またアプリでViewにそのままマップできる形で返すとか、A/Bテスト用の機能などをつけたり、色々便利に使っている。

今更C++でアプリを書く / 5mingame2 さん

www.slideshare.net

専門学校でゲームの作り方を教えたりしている。現在はCinderというのを使ってボードゲームカルカソンヌっぽいアプリを作っている。

github.com

あまり手厚いサポートはないが、学生がはじめて3Dを触るのに丁度よい規模感。UnityやUnrealEngineだと便利過ぎる。公式リファレンスは割りと充実しているが、ネットでググってもほとんど情報がないので、教育的(?)。

OpenGLの薄いラッパーとして使える、便利な点として、OSの違いを吸収してくれる。特にサウンドとか自分でやるとエグいので良い。またUnrealEngineなどと比べて良いところとして、ライブラリの再ビルドでトラブルが少ない。XcodeやVS2017が使えるならC++14が使える。

iOS SDKが使いたい場合は、Objective C++つかえばC++のコードからObjective-C使える。

ゲーム作れるが、手間がかかるのであまりお薦めはできない(編注:おすすめはできないと言いながらも楽しそうだった)。

消費型課金を導入する / morizooo さん

Presentations by morizooo // Speaker Deck

課金方式、消費型課金、非消費型課金、購読型課金がある。今日は消費型課金の話をする。

Play Billing Library。おすすめの習得法、play-billing-codelabさわって感触を掴んでからTrivialDriveV2を使うのが良い。

できること。課金できる端末か調べる、購入情報の取得、商品情報の取得、Google Playの購入画面を出すなど。

課金フロー。クライアントGoogleに→レシートを受け取る→サーバーに対してレシートの検証を行う(このとき購入したユーザー、アイテムの情報も送る)→Googleに検証してもらう→レシートの検証結果をクライアントに投げる→消費リクエストをクライアントからGoogleに送って終わり

複数端末で操作するとか、色々なクラッシュ要因があるがあるので、色々考えつくのはやるとして、フェールセーフになるように気をつけたほうがいい。

キーボードの切り替えをいい感じにしたい / wakwak3125 さん

speakerdeck.com

Facebook Messengerアプリとかで見る絵文字とか表示するキーボードの切り替えをしたい。適当にやったら豪快にViewが動いたのでやり方を考えた。

まずMessengerアプリを参考にした。単純にView構造のdumpを adb shell dumpsys activity top でとってみてひたすら切り替えてみた。そうすると気づいたのだが、特に変わったCustomViewを使っている様子はなかった。キーボードの裏にViewがある雰囲気を掴み、キーボードを閉じる際に高さが変わらなければ、View豪快に動くことがないのではと考えた。

実際にやってみた。toAdjustNothing(), toAdjustResize()を適切に使うようにしたら、キーボードを閉じる際に高さが変わらなくなり、問題が解決した。が無理矢理感があると思っていて、やりかたを募集している。

コードは以下に置いてあります。

github.com

Introducing Izumo / nakajijapan さん

speakerdeck.com

Izumoという、macOS, iOSで動くMarkdownエディタを使ったので紹介。CloudKit + CoreDataを使用してクラウドと同期をとるのと、リアルタイムMarkdownパーサを実装しているのが特徴。

Swiftが発表されたタイミングで発表されたCloudKitだが、なかなか同期処理がつらい。Markdownのパースも正規表現ゴリゴリでつらい。同期もCloudKitというフレームワークを使っているからといって単純に出来るわけではなく、結構やることある。

色々つらいが普段できない体験ができてよかった。

ディープリンクを実装した / Takasy さん

speakerdeck.com

通知から該当ページを起動する、という機能をつくる。

起動している/していない、登録している/登録しないの組み合わせパターンでそれぞれ違うことする。たとえば起動していて登録済みならページを開く、起動していないなら起動画面を見せてからページを開く、未登録で起動中なら何もしない、未登録で起動していないなら起動するだけ、という感じ。

どう実装したかというと、起動画面を透明なActivityにする、条件分岐をして適切な処理をすると言う流れ。

透明にする方法はStyleを設定する(windowsistrunscrentをtrueに)。条件分岐の方は、起動activityにdataをつけて、oncreateでintent.dataにuriが入ってるのでスキームをパースする。

ただホーム画面をスタックに積むというところで詰まって、droid girlsの方に質問とかして解決した。TaskStackBuilderというのを使うとActivityを起動せずにスタックにつめる。FlagにはSINGLE_TOPを設定しておく。

RxSwift, Codable, Moya で API クッキング! / Akkey さん

YoutubeAPIを叩くアプリ。軽い気持ちで技術選定して、RxSwift, Codable, Moya を使ってみた。

github.com

Moyaではenumでエンドポイントを定義して、リクエストごとにcaseを定義する。

MoyaにはTargetTypeというプロトコルがあって、エンドポイントはこれに準拠させて extension で baseURL, path, method, parameters を実装することによって設定する。

RxMoyaを使う場合、注意点としてリクエストを行うAPIクラスは、シングルトンでProviderが開放されないようにする必要がある(結果をSubscribeできなくなるため)。MultiTargetというのを使うと、Providerごとに型が違っても共通で使えるようになる。

webviewが辛かった話 / aboy さん

WebViewがつらかったという話。「Webサービスのアプリ版がほしいな〜」という案件を任された。

Web版できることはやりたい、ログイン状態は保持したい。ということで、WebViewでやることになった。

しかし案の定、WebViewの謎の挙動に悩まされ大変な目に…

なぜこんなことになったのか、ヘッダーリクエストまわりをいじったせいで、戻るの機能が使えず自前実装になって実装が複雑になっていった。またもともとページ数がかなりあるWebサービスなので、動作を担保する範囲がめちゃくちゃ広かった…

WebViewは安易につかうとつらいです。ちゃんとWebViewを使うべきなのかよく考えましょう。

感想とか

github.com

  • Taggedは早速Swift4.1の機能を活かしていて面白いライブラリだなと思いました。

  • iOSはいい感じのデファクトっぽいロギングライブラリが出て来ると良いですね…Timberやlogger的な…(あるのかな?)みんな各々実装してそう

  • AlamofireとRxSwiftは個人的に使っているのですが、RxMoyaと組み合わせるとすごく良い感じになりそうなので参考になりました。

  • Webサービスのアプリ版がほしいな〜」みたいな案件、今後遭遇するかわかりませんが、恐ろしそうなので気をつけようと思いました…

potatotips #49 に参加しました (iOS, Androidブログまとめ)

potatotips #49iOSブログまとめ枠で参加させていただきましたのブログです。

メルカリさんの会場。

f:id:kumamotone:20180313202426j:plain

f:id:kumamotone:20180313202404j:plain

大変良さ。

f:id:kumamotone:20180314011310j:plain

f:id:kumamotone:20180314011318j:plain

成城石井の高めのポテチとヘルシーピンチョス。良さ良さ。

以下発表内容です。iOSブログまとめ枠でしたが今回もAndroidの発表内容に関してもまとめてみました。間違いや気になるところなどあればご指摘ください。

埋まっていない資料は公開されたのを見つけ次第反映します。

XCTestを目的別に分けるすすめ / gaopin さん

speakerdeck.com

数ヶ月前、チームにジョインしてあることに気づく。自動テストコケとるやん。

gaopinさん「自動テストこけてるよ」

チームの人「問題ないw」

gaopinさんのプロダクトは、膨大で複雑なログの絡むプロダクトで、スプリントごとにテストを回していて、スプリント途中はテスト通らなくてもしょうがないみたいな感じになってた。

でもこれテストターゲットを分割すれば良いだけの話。

方法も簡単で、

  1. (プロジェクトの↙にある+)ターゲットを追加 iOS Unit Testing Bundle を追加

  2. 分割したいテストのファイルのメンバーシップを変更

みたいな感じ。これで個別に実行できるようになった!

おすすめの分割タイミングは以下。

  • 実行タイミングが違う
  • 実行する範囲が違う
  • 別チームで作業している(これは微妙かも)

OK google, プロジェクトのbuildして」 / satsukies さん

speakerdeck.com

前回のpotatotipsの Alexa、APKを配布して // Speaker Deck が面白かったのでやってみた。

流れ。我々「プロジェクトHogeをビルドして」→GoogleHome「わかりました」→GAS等使って「プロジェクトHoge」に対応するBitrise起動→Bitriseでビルドしてapk配布。対話を通じてプロジェクトIDを聞き出す。

DialogFlowで、Agentの作成して、Entityの登録して、Intentの登録する。Entityの取り出しはTraining Phrasesにユーザーの発言を入力するだけ。するといい感じにパラメータを学習してくれる。最後にResponse定義する。Default Fallback Intent(うまくいかなかったときの反応)もここで定義。

その先の内容は飛ばしてActions on GoogleのSimulator を使ったデモ。

ExoPlayerで音遊び / daasuu さん

予習。ExoPlayerとは

Google の動画ライブラリ。

github.com

shunirr.hatenablog.jp

ExoPlayer とは:

従来の MediaPlayer (Stagefright / NuPlayer) は C や C++ で実装され、かつ実装は Android フレームワークに組み込まれているので、 MediaPlayer 内部で不具合があったときに修正や、 MediaPlayer そのものを修正して新たなフォーマットやプロトコルに対応させることをアプリ開発者が自由に行なえず、端末や OS のアップデートが必要でした。

ExoPlayer は Google が開発している Android 向けの新しいメディアプレイヤーで、全て Java で実装されており、またアプリケーションに組み込んで利用するライブラリの形式で配布されています。

これにより従来の MediaPlayer で不可能だった、アプリ開発者によるプレイヤーの拡張や修正が可能になっています。

内容

Presentations by Masayuki Suda // Speaker Deck

Androidでの音再生の方法おさらい。MediaPlayerはBGM等の長い音の再生に使える。SoundPoolは5秒未満なら良い。AudioTrackはバイナリ直なので難易度が高いが、自由度は高い。

ExoPlayerというライブラリがある、これは動画のライブラリ 動画再生だけでなく音の再生にも使える。

最近では音程や倍速にも対応できるようになってきた。ピッチではなくスピード、音程だけでも設定可能。すごい。

TD PSLOLAアルゴリズムを使っている。これは音のスペクトルをある程度保ったままピッチやテンポを保ったまま上げれる。

具体的には、以下のような感じでやってる。

  1. ピッチに対応した波形の1周期をみつける
  2. 周期を切り出す
  3. 切り出した周期を使って音声を再合成

これをやっている部分だが、ExoPlayerでSonicで検索すると良い。ちなみに48k→44.1kのリサンプリングなどもできる。

たった2行で本格アプリ!?挫折しないSwift勉強会の裏側 / AkioItaya さん

iOSアプリの作り方を教えたりされているAkioItaya さん。

github.com

教え方の一例を紹介。キャラクターと一緒に記念撮影を行えるシンプルなカメラアプリ↑をcloneしてもらう。2行書くだけで完成、という状態にしてある。

なぜ2行の実装で終了するのかというと、2行追加するViewControllerの継承元のクラスやextensionに実装が隠蔽されていて、それらを種明かしをしながら動作を理解してもらっている。

とりあえずちょっと何か書いて動く状態にしてわくわく感を得た後、逆順に説明することによって挫折しない工夫をしている。

shared element基本のき 〜パターンで見るshared element〜 / e10dokup さん

予習。shared element とは

developer.android.com

f:id:kumamotone:20180313180730p:plain

Shared Elements 遷移は、2 つのアクティビティで共有されているビューが、各アクティビティの間でどのように遷移するかを決定します。 たとえば、2 つのアクティビティで同じ画像を異なる位置とサイズで使用している場合、changeImageTransform 共有要素の遷移によって、2 つのアクティビティの間でスムーズに画像が変換されスケーリングされます。

re-engines.com

Airbnbとかで使われてるUIらしい。ぽよんって遷移するやつ。API 21から使える。

内容

speakerdeck.com

Shared Element Transitionはガン遷移前後で共通になっているviewをアニメーションさせるもの。Google Play Storeのアプリリスト->詳細とか。

Shared Elements viewにtransitionNameを着ける

Activity-Activityの場合、Fragment-Fragmentの場合、RecyclerView-Activityの場合、RecyclerView-ViewPagerの場合をそれぞれ説明。

RecyclerView-ViewPagerパターンめっちゃめんどくさい。

あとShared Element Transitionしないほうがよさそうなときもあって、遷移前後でshared element対象のViewのVisibilityが保証できないとき、遷移前後で保持するリストの内容が違うときなどがある。

リポジトリ

github.com

App Store 予約注文を使ってみた / toshinarin さん

App Store、予約注文としてリリースができる。24時間以内に(時間は指定できない)自動的にユーザーの端末にダウンロードされる。

予約注文数が見れてPR・マーケティング的に良いし、利用可能になったら自動的にダウンロードされてメールとPushがくるのでユーザビリティ的にも良い。

実際の設定の仕方は簡単で、価格及び配信状況のバージョンのリリースでできる。

注意点としてはアプリを使い始める時間を完全にはコントロールできない。

ちなみにアプリ自転車が必要で審査できないので、動画で撮影して App Reviewに関する情報>メモに動画を添付とした。

動画編集についてだが、iPhoneで撮影、iMovieで編集すればPinPとかもできるので良い。

Swiftバグレポートレポート / kazuhiro4949 さん

speakerdeck.com

bugs.swift.orgからXcode 9.2 で再現できるバグをピックアップ!

SR-7090 Codable に関するバグ

  1. クラスAがCodableを実装している
  2. クラスBがAを継承している
  3. Bを初期化orデコードして、プロパティにアクセスするとランタイムエラー

SR-7102 パフォーマンスに関するバグ

Swiftでは複雑な式を書くとコンパイルが中断されることがあるのだが、似たような式を書いても中断されるとき、されないときがある。

SR-7115, SR-7120 キャプチャリストに関するバグ

SR-7115。クロージャのキャプチャリスト内で??を使用してコンパイルすると確実にセグフォになる。

SR-7120。キャプチャリストがついていないクロージャ内でrethrowするとコンパイラエラーにならないが、ついているとエラーになる。

バグレポート眺めると意外と簡単に発生してしまうバグを知れて楽しい!!

ReactiveSwiftに習うCollectionの最適化とパフォーマンスチューニングパターン / ryo_aoyama さん

speakerdeck.com

ReactiveSwiftにBagというのがあって、Signal(Observableっぽいやつ?)をKeyで管理している(たぶん)なのだが、これがどういう高速化をやっているかという話。

1。ContiguousArrayを使う。classか@objcのときにメモリの連続した領域に格納し、イテレーションを高速化できる

2。最適化済みのstdlibをそのまま利用することにより自前実装よりも高速化出来る場合がある

3。デフォルトで実装されるIndexingIterator内部で関数呼び出しにコストがかかるため

4。あとから追加されたもののほうがremove(for: )されやすいという考えで逆順に探索。

実験。add, iteration, remove を10,000件に対してやったら200倍高速化していることを確かめた。

配列はパフォーマンスチューニングしやすいので重い場合はおすすめ。

“Hello Flutter”の次におさえたいFlutterのポイント / Kenichi Kambara さん

練習に作ったアプリの紹介と、Hello Flutterの次にするとよさそうなこと。

Flutter 書くの、Android Studio使うと便利。SDK入れる。flutter doctorでチェックできる。Flutter用のプラグイン導入で簡単。これでDartも入る。起動時のダイアログでStart a new Flutter projectできる。良い。

Perform hot reload on save で Save 時に Hot reload も可能。View 例で出てきたアプリだと、ScaffoldにAppBar, body, FAB がぶら下がっている感じ。

OS別テーマ切り替えなどもできる。DartでViewを書くっていうのがちょっとつらいかもだが、ハマると良さそう。

独自Documentクラス / 村上幸雄 さん

fr.slideshare.net

MVC、よく批判される古典的なMVCと、AppleCocoa versionとして提唱しているViewとModelが干渉しないタイプのMVCがある。

Macアプリの場合NSViewとdataがNSDocumentとNSViewControllerを介して連携することになりそう。Document(Controller)部分に使えるものとしてiOS5から使えるUIDocumentクラスというのもあるが少々オーバースペックなので、Documentを独自実装したときの反省点などを紹介。

Spannable芸〜郵便番号編〜 / HiroYUKI Seto さん

予習。Spannableとは

weide-dev.blogspot.jp

Spannable はテキストをマークアップするためのインターフェースです

CharacterStyleなどのクラスを使って文字列の一部を 下線を引いたり、下付き文字にしたり、 上付き文字にしたり、URLを付けたり... と様々なことができます

内容

speakerdeck.com

最高の郵便番号入力欄を作りたい。

  • 3桁目と4桁目の間にハイフンを表示させたい
  • 3桁目を打ったらハイフンの後にカーソル移動
  • シームレスに移動。7桁ペーストしたらペーストされるし4桁目で文字削除したら左に移動。カーソル移動も。

EditTextでは解決しきれない。それでSpannableを使う。これは文字列のデコレーションのinterfaceで、未確定文字列の色などもSpan。ReplacementSpan、これはTextViewの文字列を置換するSpanで、独自絵文字なんかはこれで作られている。

ReplacementSpan で気合入れつつ実装 サンプル↓

github.com

UITableViewControllerの利点を最大限に活かす使い方 - コードでAutoLayoutを記述する場合 - / masashi-air さん

speakerdeck.com

ContainerViewを使えばUITableViewControllerの利点を最大限に活かしてレイアウトできる。

UITableViewController、UIViewControllerにtableView貼り付けるに比べて色々利点があって、

公式ドキュメントに書いてある

  1. tableViewプロパティに非オプショナルでアクセス可能
  2. delegate, dataSourceがデフォルトで設定済み
  3. clearsSelectionOnViewWillAppear
  4. 表示時にテーブルのスクロールインジケータを点滅
  5. setEditing(_: animated :)

のほかに、なぜ書いてないのかわからないがキーボードの高さを考慮して入力範囲を隠さないようにスクロールしてくれたりする。

ただ、難点あって、画面下にView置きたかったりしてaddSubViewしたりすると表示おかしくなったりする。

が、ContainerView使うとうまくいく。iOS10以前だとtableViewのInsetに設定が必要だが、ContainerViewを持っているVCにif #available(iOS 11.0, *) { } else { /* ほげほげ */ } とかやっておけば後々コード整理しやすい。

サンプルです↓

github.com

try! Flutter / Rui Kowase さん

docs.google.com

Flutter 書くの、Android Studio使うと便利。SDK入れる。flutter doctorでチェックできる。Flutter用のプラグイン導入で簡単。ビルド速くて良い。Hot Reload良い。オフィシャルドキュメントが充実している。

サンプルアプリの紹介。Scaffoldというのが使える。async/await使える。

github.com

おまけ。Flutterはときめきますという意味らしい。エラーのスクリーンのカラーコードが #7C160E とかで比較的心温まる。

Introduction to LLVMSwift / kitasuke さん

予習。LLVMSwiftとは

github.com

LLVMSwift is a pure Swift interface to the LLVM API and its associated libraries. It provides native, easy-to-use components to make compiler development fun.

内容

持ち帰って欲しいtips

LLVMSwiftの紹介。LLVMSwiftはLLVM C APIのSwiftのラッパー。Swiftコンパイラーのコミッターが2人居て主にその人達が書いてる。

サンプルのシンプルなプログラムとその出力のLLVM IR見てみると、まぁただのSwiftのラッパーだな〜という感じ。わざわざCのコード読んで勉強するより分かりやすいはず。

Cで使えばいいじゃんってなるけど本人達も名言してるかどうかしらんがLLVM、Swiftで書いたぜっていうそういう勢いが大事。

README.md に書いてあるIntroductionの説明。

界隈でSwiftコンパイラ流行っていて、silとかASTとかLLVMコンパイラとかいろんな層ある。でこういうのあると勉強に良さそうなので紹介しました。

感想とか

iOSでShared Element Transitionっぽいやつ

もっと気軽にUITableViewController使いてぇよ

Flutterさん我々を救ってください

HammerspoonでどのウィンドウでもEmacs風キーバインドを使う

経緯

macOS Sierra になってからKarabinerが使えなくなって以来(自分は2017年4月頃〜)、Hammerspoon を使ってています。

現在ではSierra以上でも動くKarabiner-Elementsの安定版が出ているので使ってみたのですが、以下の2点が自力で克服できておらず、まだちょっとしんどいのでまたHammerspoonに戻ってきました(誰かがなんとかしてそうだけど…)。

  • Office(Outlook) で何故かバインド(Ctrl+A, Ctrl+E)が効かなくなる
  • Ctrl+A/E の移動は、単なる行頭行末移動ではなくMove to beginning of text (インデントを考慮して行頭) になってほしい

というわけでほぼほぼ1年使ってある程度手に馴染んできたのと、Karabiner-Elementsの安定版が出た現在でも Hammerspoon で設定を書きたい、書きたいがうまくいっていないという人もいるんではないかと思い、一旦軽くまとめてみることにしました。

HammerSpoon

www.hammerspoon.org

Hammerspoon はキーリマップツールというよりかは自動化ツールと謳っていて、リマップ以外にウィンドウサイズの変更や移動、WiFiやUSBデバイスの監視なんかもできるみたいみたいです。

設定ファイルはLuaという言語で書きます。ある程度馴染みのあるPythonで設定が書けるkeyhacというソフトもあるので、最初はLua…うぐぐ…となったのですが簡単な範囲なら思ったより全然困ったことが起こらず直感的に書くことができました。

設定ファイル

とりあえず設定ファイルを晒します。

--
-- Hammerspoon用 KeyRemap 設定
--

local function keyCode(key, modifiers)
   modifiers = modifiers or {}
   return function()
      hs.eventtap.event.newKeyEvent(modifiers, string.lower(key), true):post()
      hs.timer.usleep(1000)
      hs.eventtap.event.newKeyEvent(modifiers, string.lower(key), false):post()
   end
end

local function remapKey(modifiers, key, keyCode)
   hs.hotkey.bind(modifiers, key, keyCode, nil, keyCode)
end

local function disableAllHotkeys()
   for k, v in pairs(hs.hotkey.getHotkeys()) do
      v['_hk']:disable()
   end
end

local function enableAllHotkeys()
   for k, v in pairs(hs.hotkey.getHotkeys()) do
      v['_hk']:enable()
   end
end

local function handleGlobalAppEvent(name, event, app)
   if event == hs.application.watcher.activated then
      -- hs.alert.show(name)
      if name ~= "iTerm2" then
         enableAllHotkeys()
      else
         disableAllHotkeys()
      end
   end
end

appsWatcher = hs.application.watcher.new(handleGlobalAppEvent)
appsWatcher:start()

--
-- ここから KeyRemap 設定
--

-- カーソル移動
-- 現状 hs.hotkey.bind の挙動が怪しいので getFlags+getKeyCode を使うといい
hs.eventtap.new({hs.eventtap.event.types.keyDown}, function(e)
  -- Ctrl + Shift + FBNP(ctrl単体のものよりより先に書く必要がある)
  if e:getFlags().ctrl and e:getFlags().shift then
    if e:getKeyCode() == 35 then
      hs.eventtap.event.newKeyEvent({"shift"}, "up", true):post(); return true;
    elseif e:getKeyCode() == 11 then
      hs.eventtap.event.newKeyEvent({"shift"}, "left", true):post(); return true;
    elseif e:getKeyCode() == 45 then
      hs.eventtap.event.newKeyEvent({"shift"}, "down", true):post(); return true;
    elseif e:getKeyCode() == 3 then
      hs.eventtap.event.newKeyEvent({"shift"}, "right", true):post(); return true;
    elseif e:getKeyCode() == 6 then
      hs.eventtap.event.newKeyEvent({'shift','cmd'}, 'z', true):post(); return true;
    end
  end

  -- Ctrl + FBNP
  if e:getFlags().ctrl then
    -- log の吐き方
    -- local log = hs.logger.new('mymodule','debug')
    -- log.i(e:getKeyCode())
    if e:getKeyCode() == 35 then
      hs.eventtap.event.newKeyEvent({}, 'up', true):post(); return true;
    elseif e:getKeyCode() == 11 then
      hs.eventtap.event.newKeyEvent({}, 'left', true):post(); return true;
    elseif e:getKeyCode() == 45 then
      hs.eventtap.event.newKeyEvent({}, 'down', true):post(); return true;
    elseif e:getKeyCode() == 3 then
      hs.eventtap.event.newKeyEvent({}, 'right', true):post(); return true;
    -- PCライクなバインディング、たとえば
    -- ctrl + W を cmd + W にするのも hs.hotkey.bind だと何故か出来ないので
    -- こっちの方法を使っている
    -- elseif e:getKeyCode() == 6 then
    --   hs.eventtap.event.newKeyEvent({'cmd'}, 'z', true):post(); return true;
    -- elseif e:getKeyCode() == 7 then
    --   hs.eventtap.event.newKeyEvent({'cmd'}, 'x', true):post(); return true;
    -- elseif e:getKeyCode() == 8 then
    --   hs.eventtap.event.newKeyEvent({'cmd'}, 'c', true):post(); return true;
    -- elseif e:getKeyCode() == 9 then
    --   hs.eventtap.event.newKeyEvent({'cmd'}, 'v', true):post(); return true;
    -- elseif e:getKeyCode() == 13 then
    --   hs.eventtap.event.newKeyEvent({'cmd'}, 'w', true):post(); return true;
    -- elseif e:getKeyCode() == 46 then
      -- hs.eventtap.event.newKeyEvent({}, 'return', true):post(); return true;
      -- hs.eventtap.keyStroke({}, 'return');
    end
  end

  return false
end):start()

-- 行頭行末移動
-- home/end は 行頭ではなく、Move to beginning of text (インデントを考慮して行頭) になってほしい
remapKey({"ctrl"}, "a", keyCode("left", {"cmd"}))
remapKey({"ctrl"}, "e", keyCode("right", {"cmd"}))

remapKey({"alt"}, "b", keyCode("left", {"alt"}))
remapKey({"alt"}, "f", keyCode("right", {"alt"}))
remapKey({"alt"}, "n", keyCode("down", {"alt"}))
remapKey({"alt"}, "p", keyCode("up", {"alt"}))

remapKey({"alt"}, "h", keyCode('delete', {"alt"}))
local function deleteWordForward()
  keyCode('right', {'shift', 'alt'})()
  keyCode('delete')()
end
remapKey({'alt'}, 'd', deleteWordForward)

-- Return
remapKey({'ctrl'}, 'm', keyCode('return'))

-- Delete
-- Ctrl+H を文字編集以外(ブラウザバック)でも使いたいため
remapKey({'ctrl'}, 'h', keyCode('delete'))

-- Ctrl+K は OS 標準のものを使用
-- Office だと効かない 悔しい

-- ページスクロール
remapKey({'ctrl'}, 'v', keyCode('pagedown'))
remapKey({'alt'}, 'v', keyCode('pageup'))

-- Esc
remapKey({'ctrl'}, 'g', keyCode('escape'))

--
-- 参考
--

-- 【テンプレ】
-- Karabiner 使えない対策: Hammerspoon で macOS の修飾キーつきホットキーのキーリマップを実現する - Qiita
-- http://qiita.com/naoya@github/items/81027083aeb70b309c14

-- 【行頭、行末移動】
-- Sierra+Hammerspoonでキーバインドを設定する - たまめも(tech)
-- http://tamamemo.hatenablog.com/entry/2017/01/30/183650

-- 【hotkey.bind の代替】
-- 5ch
-- https://potato.5ch.net/test/read.cgi/mac/1485327943/#217

-- 【困った時】
-- Hammerspoon docs
-- http://www.hammerspoon.org/docs/index.html

-- 【Ctrl+K (使わなかった)】
-- http://qiita.com/swdyh/items/04f7da8c1209a067add5
-- local function killLine()
--   keyCode('e', {'shift', 'ctrl'})()
--   keyCode('x', {'cmd'})()
-- end
-- remapKey({'ctrl'}, 'k', killLine)

やりたいこと

Ctrl + X 始動のキーバインド等は使っていないので基本的な部分をEmacsっぽくしています。以前Windows用にKeyhacの設定ファイルを書いてた時にはもっとゴチャゴチャ色々書いていたのですが、割りと削ぎ落とされてこのくらいになりました。

Ctrl + FBNP: →←↓↑

Emacs風移動。あんまり合理的とも思わないキーマッピングですが、身体に馴染んでしまっているので墓場まで持っていくしかない。テキストエリアだけでなくFinderやChromeなどでも使いたいので完全にリマップしてしまいたいキーです。

Shiftキーを押すと範囲を選択したいし、Altキーを押すと単語ジャンプにしたいです。単語ジャンプはプログラミングのときなど、ASCII文字ばっかり出てくる時は大抵活躍しますし、JetBrainsのエディタならAlt+↑↓はかなり素早く範囲指定できるので協力です。

2017年4月時点では hs.hotkey.bind の挙動が怪しいらしく、カーソル長押し移動が効かなくなるので下記を参考に getFlags+getKeyCode で設定するようにしました。がもしかするとAltキーのほうが今元気に動いているのでこんなに回りくどい方法を取る必要ないかも‥

【Karabiner】キーリマップ・カスタマイズ総合 for Mac【英かな】 [無断転載禁止]©2ch.net

Ctrl + A/E: cmd + ←→

Ctrl + A/E は 行頭行末ではなく、Move to beginning of text (インデントを考慮して行頭) になってほしい(未設定の状態だとXcodeでカーソルが完全に左に行ってしまいつらい気持ちになる)のでcmd + ←→にリマップしました。

JetBrainsのエディタとかだとならないのでXcode使わない人はわざわざマッピングする必要無いかもです。

Ctrl + H: BackSpace, Ctrl + D: Delete

他のCtrl + Hは他のショートカットキーに負けて発動しなくなることがあるし、ブラウザの戻るキーとしても使いたい(ChromeのGo Back With Backspaceというエクステンションを使っています)ので delete にリマップしたいです。

Ctrl+D に関してはOS標準のでほしい挙動になるのでリマップしていないです。他のキーはたいてい大丈夫なのですが、JetBrainsのエディタだとこのマッピングが大体コンフリクトするのでエディタ側のリマップ設定を削除してます。

Ctrl + M: Enter

Enterは遠い(JIS配列だとことさら遠い)のでリマップしておきたいです。

Ctrl +G: Esc

Esc は遠いのでリマップしておきたいです。

Ctrl + V / Alt + V: PageUp / PageDown

このリマップは設定してはいるもののちょっと使いづらくって、表示領域の移動はしてもカーソル移動をしてくれないときがあり、そういうときはトラックパッドに手を伸ばしたほうが速いという感じになります。

Ctrl + Z/X/C: cmd+ Z/X/C

これは最近使ってないです。LinuxやPCのときの癖でCtrl+Z/X/C/Vを押してしまいがちだったので設定していましたが、すっかりMacに慣れて最近は素直にcmdキーを押すようになりました。

困ってるとこ

起動してしばらく経つと Finder などで Ctrl + FBNP が効かなくなるときがある

Reloadするとなおります。たまに起こる。

Chrome の検索バーで Ctrl+N すると検索してほしいが、Chromeに Ctrl+N のショートカットが設定されていて変なURLに飛ぶ

Firefoxだと起きないです。説明が難しいのですが、Chrome はCtrl+Nがホスト名を補完してくようとするキーバインドみたいで、これに負けてしまいます(Karabinerだと起きない)。たとえば hogehoge → Ctrl + N するとhogehoge.com に遷移してしまい、しょんぼりします。

Ctrl+K が Outlookで効かない

local function killLine()
    keyCode('e', {'shift', 'ctrl'})()
    keyCode('x', {'cmd'})()
  end
remapKey({'ctrl'}, 'k', killLine)

Ctrl+Kが効かなくなる場面があって、たとえばお仕事でよく使うOutlookだと効かなくなります。

killLine(Ctrl-K一発でその行を消して内容をクリップボードに入れる)のは上記のような方法で実現できるのですが、自分の欲しい挙動であるmac OSの標準の挙動とちょっと違います。

以下の挙動になるキーマップが思いつけば設定できそうです。

  • カーソル位置から右側を削除
  • カーソル位置が右端ならその位置の改行を削除
  • クリップボードは汚してほしくない

ただ行まるまる1行コピー、削除、貼り付けのショートカットは

まとめ

Hammerspoonの設定ファイルの紹介と、なんでこういう設定にしているのかという理由などをまとめてみました。

個人的には国産 Karabiner-Elements にとても期待してます(少額ですが寄付させていだきました)。Office で Ctrl+A/E が効かなくなる問題はぜひご存知な方いらっしゃったら対策を教えてください><

若い頃(学生の頃)は「設定ファイルをゴチャゴチャいじるのは時間の無駄、デフォルトが一番じゃよ」という達観おじさん達を少し軽蔑していたのですが、自分も段々気持ちがわかってくるようになり、こういう設定ファイルをいつまで書いているかはわかりませんが、まだ多少、老いに抗っていきたいと感じてます。

potatotips #48 に参加しました (iOS, Androidブログまとめ)

potatotips #48iOSブログまとめ枠で参加させていただきましたのブログです。

Rettyさんの会場。広いし綺麗

f:id:kumamotone:20180222214744j:plain

今回は5分発表+1分質疑応答スタイルでした。最近はそこそこずっと参加しているのですがはじめて見た。

以下発表内容です。iOSブログまとめ枠でしたが今回はAndroidの発表内容に関してもまとめてみました。間違いや気になるところなどあればご指摘ください。埋まっていない資料は公開されたのを見つけ次第反映します。

テスト実行時に不要な初期化コードを実行しないようにする / kNagadou さん

speakerdeck.com

アプリ起動時に初期データを構築することがある。固有の環境変数や外部SDKのセットアップなど‥

初期化処理はAppテスト時はAppDelegateの処理を実行しないようにしたい。ほかにも問題あって、Viewのインスタンスは不要だが、デフォルトだと、Unitテスト時もUIがロードされる。また、テスト用の初期化処理は別のところに分けたい。

これらを解決するにはまずmain関数的なところでテストかどうかを判定する、その後テストならTestAppDelegateとかを実行して、Main Interfaceのロードはプロダクション用のAppdelegateで処理するようにすればよさそう。

main関数的なところでという部分に関しては、実はmain.swiftが暗黙的に呼ばれていて、main.swiftをプロジェクトに追加すれば上書きできて初期化処理書ける。

Android Instant Apps対応した話 / take_e10 さん

www.slideshare.net

Instant Apps対応した。Instant Appsには制限ある。今現状だと使えない機能、そもそも非サポートな機能。Module<4MB必須とか‥

特に4MB制限がキツイ。Instant Apps対応はほぼほぼこの作業となる。Module分割で4MBを目指す。APK Analyzerでサイズ見れるが、4MB超えるとアップロードした時点でエラーになる。

やったことの中で効いたのはやはり画像。WebPにしたりVectorDrawableにしたり。

ちなみにic_launcher.png (ドロイドくん)のアイコン、いつのまにか入っていて消せなかった 18KBもあってつらい‥

Q. 同じ名前のめちゃくちゃ小さいファイルで置き換えるというのはいかがか?

  1. やったと思うのだがなんか無理だった

Androidチームにコンバートされてから半年、いかにしてAndroidエンジニアになったか / niba1122 さん

Android開発を学ぶためにやったこと。最初1ヶ月はUdacityのeラーニングと、赤べこ本やった。

UdacityはAndroid Basics: UserInterfaceというのと、Developing Android Appsというコースをやった。面白かったのは Android Visualizer というのがあって、ブラウザでXML書ける。

Udacityは独学で網羅的に学べて良いが、英語なのでちょっと大変。その後は実践で学ぶ形式となったが、学ぶことが多くてよかった。Udacityと赤べこ本おすすめ。

Q. Udacityいくら?

  1. 無料です

Q.サンプルのバージョンとかは?

  1. 古いこともあるが大きな問題はなかった 言語はJava

初めてのXcode Behavior / TachibanaKaoru さん

speakerdeck.com

Xcode Source Code ExtensionはWWDC2016で紹介された。

公式だぜ!という感じで盛り上がっていたが、蓋を開けてみれば配布、作成、デバッグが大変、動作にかなり制限がある…過去の非公式プラグインでできていたことが出来ない…

一方、Xcode Behaviorというのがある、Xcodeのmenuから使える。太古の昔からある機能。Xcodeから独立していて、スクリプト走らせれる。

Source Code Extensionとの比較。

Source Code Extension Xcode Behavior
Xcodeで今開いているファイルの中身のみを変更できる。 スクリプトでできることはなんでもできる。
Xcodeで開いているファイルの中身のみ取得できる。 起動するときに環境変数が渡せるので、今Xcodeで開いているファイルがわかる。
作成、配布、変更つらい 配布、自分で書いたスクリプトを自己責任で使うスキームで、作成も配布も変更も楽。
GUI表示できない GUI表示できる。AppKitも可。
Xcodeコンパイル言語のみ スクリプトならなんでもOK。もちろんSwiftも可。

実例。

Apple公式のサンプルコード、たとえば以下のページのxcodeprojを開くと、

developer.apple.com

f:id:kumamotone:20180223000529p:plain

マークダウンが表示されている。

f:id:kumamotone:20180223000547p:plain

しかもView in Sourceって書いてあるリンクを踏むとソースファイルに飛べる。どうやらXcodeのソースコメントに- Tag:を入れると、マークダウンファイルなどからソースコードへのリンクが簡単に作れるらしい。

これを自前のプロジェクトでやってみようとすると…

f:id:kumamotone:20180223000801p:plain

f:id:kumamotone:20180223000815p:plain

f:id:kumamotone:20180223000843p:plain

んん…

さっき見たのと違う…となる

ふつうにやると、Xcodeではそもそもマークダウンはレンダリングされず、生のマークダウンがエディタで表示されてしまうもよう。

調べてみるとどうやら、プロジェクトファイルのなかに特定のplistファイルが置かれていればマークダウンをレンダリングしてくれるようになるもよう。

www.toyship.org

でこれを自前で毎回置くのはめんどくさいので、以下のようなスクリプトを書いて Xcode Behavior でやってしまえば便利。

gist.github.com

Xcode Behavior便利。太古の昔から使える技だが、今こそ見直されるべき。

リリースを自動化した話 / TakuSemba さん

speakerdeck.com

リリース、Sembaさんのチームはapkをアルファとして公開、apkをproductionに上げる、githubでrelease noteを書く、というフローにしてる。

apkをアルファとして公開する部分とリリースノートを書く部分を自動化した。

apkをアルファとして公開する部分。gradle-play-publisherというのを使った。gradleにメールアドレスとか書けば使えるようになって、色々設定もできる。

./gradlew tasks --all するとリストが見れる。bootstrapReleasePlayResourcesは現在公開しているapkの情報をとってこれる。これを編集してpublishListingReleaseする。whatnewを編集してpublishApkReleaseする。

リリースノートを書く部分。GithubAPI叩いてCIに組み込めば良い。リリースのタグがプッシュされると、CIが走るようになっている。

Heckelの差分アルゴリズムについて / YuyaHorita さん

a,b c,d e と a,c,e,f を定義 すると差分は直感的に b,d,f となる。これを噛み砕くと、いくつかのコマンドの塊とみなせて、差分アルゴリズムはこれを実装したものといえる。

差分検知、iOSならDiffer, Dwifft, Androidなら DiffUtil などのライブラリがある。 アルゴリズムとしては Myers, Heckel などがあるが、今日はHeckelについて説明。

アルゴリズムの説明。シンボルテーブルを一つ用意して、新しい配列OからNの配列の差分を取ることを考える。配列O,Nの各要素をKeyとして辞書型のシンボルテーブルに登録。Valueには配列O, N内での数、O内でのindexを保存しておく。

次に自分の分身を自分自身以外を参照させて生成。配列O,Nの各要素を1対1対応した配列ON, NAを用意し、1対1対応している要素への参照を保持し、参照先はSymbolTable もしくは もう一方の配列。

これを配列Nにもやってく。相手側の配列に要素があるならindexを変えるMoveでOK、シンボルテーブルしか参照できないなら古い配列ならDelete、新しい配列ならInsertとなる。

これを使うとO(N)で計算が可能。Myers, Wuに関してもGithubに上げるつもりなのでよろしく。

Contact AppっぽいSticky Headerをつくる / e10dokup さん

speakerdeck.com

Contact AppやDroid Kaigiとかで見る名前一覧のアレつくる。

RecyclerView.ItemDecoration。RecyclerViewのアイテムに対して装飾するabstract class。getItemOffsets, onDraw, onDrawOverの 3つのメソッドをoverrideしてつくる。描画はcanvas.drawText()でやる。

サンプルはこちらから。

github.com

Metal Acceleratedかどうかを調べる方法 / shu223 さん

speakerdeck.com

WWDC2017で出た図で、UIKitやCore Animationも低レイヤでMetalを使っている(Metal Acceleratedされている)ことが明らかになった。

OpenGLiOSでは今はMetalの上に実装されているとAppleの人がWWDCのラボで言ってたけど公式情報はない、が裏が取れない。

裏が取りたい‥なんで取りたいかというと、最適化されていることがわかるし、自分の最適化手法が適切かどうかの判断材料になるし、低レイヤに踏み込んで自前実装するかどうかの判断材料にもなる。

試したこと。まずはGPU Reportだが、Metalを明示的に使用していないと、XcodeGPU Reportは出てこない。そこでInstruments。Metal System Traceというのを使うと、明示的に使ってなくてもわかる。ざっくりした見方としては、上から順に実行されていて、ディスプレイに描画されるまでの流れがわかる。

APIのデータのマッピングを約18倍速くした話 / magiepooh さん

画面遷移遅いなーとなって調べたら、SO-04Gとか古い端末とOSだと最悪20秒ぐらい掛かることが分かった…

ちなみにJSONが1MBあって、Kotlin+Moshiでパースしてた。

やっていき。まず対策その1、Moshi はリフレクションを用いているため、コストが高い。Kotshiを使うと20sec->12secになった。

対策その2、オブジェクト生成が多すぎるのではとなった {"obj":{123, 456.2...}} みたいなlongとdoubleの入り混じった感じの感じのオブジェクト。これはStringの配列にした。12sec->8.4secにした

最後によくよくデータ見直してみると重複した配列データを4つ受け取っていた。てへ なおして 8.4sec->2.9sec。

というわけでかなり速くなった。ちなみにShared Element Transitionがあると2.9秒でも意外と遅く感じない。その後大量の配列の取得は別APIに切り出した。これで1.2秒(18倍)。ちなみにiOSはそんなに時間かからないの謎…端末のスペックなのだろうか…

アプリの翻訳管理を楽にする / kosako さん

Rettyアプリは端末内の言語設定ではなく、アプリ内で言語切り替えするようなアプリ。

一般的にはstringファイル作ってNSLocalizedString("key", comment:"")みたいな感じでやってく?が、これはめんどくさい‥特にKeyの名前を名前を決めるのが面倒くさい typoするかもしれないし

Google SpreadSheetを使ってみた。Google Google Apps Scriptでspreadsheetからアプリ用のリソースファイルとswiftファイルを生成する。Googleのバックアップと同期を使ってローカルに自動DL。

同期はなんか拡張子が変になったり?するようなのでfswatchというのを使うといい。

kosakoさんのプロジェクトではNSLocalizedStringは使ってなくて Stringにlocalizedというextensionを生やして対応していた( "keyname".localized() )。まだtypoの危機があるのでenumを使うようにした。Localize.keyname.localized()みたいな。こうするとサジェストされて雰囲気で書けるようになるので良い。

Q. スクリプトは公開しないのか?

  1. Qiita にあるよ

qiita.com

Alexa、APKを配布して / horie1024 さん

speakerdeck.com

APKの配布方法、手動とかGradleとかCIとかあるが、音声でできたら便利では?と思った

流れ。alexa→LambdaでBitriseをトリガー、BitriseでDeploygate叩く。

スキル作るには呼び出し名が必ず必要で、今回は「Alexa,ビットライズでAPKを配布して」の形で使うのだが、呼び出し名がビットライズ、インテントが「APKを配布して」となる。トリガーにはBuild Triger APIをつかう。deploy workflowにScript Stepを追加して、ビルド完了後APKをアップロード。DeployGateでAPKを配布。アップロードされた。

これで音声コマンドでAPK配布までできるようになった。

Alexa、APKを配布してのような普通の人が使わないような言葉も認識してくれて良い。

iOSフレームワークViperのススメ / hirothings さん

speakerdeck.com

MVCのつらさ、工夫しないとルーティングがない、Viewのロジックとデータに関するロジックが交じる。

かっちりしたフレームワークが欲しいがスピードも犠牲にできない、そこでViper。

Viperは単一責任の原則に基づいて作られたフレームワークで、iOSの現場で生まれたフレームワーク

Viperの説明(省略)。

チームに持っていくときは、簡単なTwitterクライアントのサンプルを持っていって見てもらった

github.com

結果好感触だったので自信をもって進められた。

テスタブルになったのでStubとSpyを使ったユニットテストを採用した。

Presenter以外のレイヤーの実装に悩まされずに済んだ。

ボイラープレート増える問題に関しては、Kuriとかコードジェネレータを使うと良い。

RuntimePermissionChecker というライブラリを作った / taptappun さん

Runtime Permisson。コーディングしてたら Permission 書くの忘れてた、となって時間無駄にすること多い。

Permissionのこと考えたくない‥AndroidManifest.xmlにPermission記述したら自動的によろしくやって欲しい。

なので作った。細かい話や導入はQiitaにのっけているのですが、みんな使ってくれ!

qiita.com

感想とか

iOSAndroidも面白くて聞き逃せない!

f:id:kumamotone:20180222214817j:plain

懇親会もアーキテクチャの話とか質問とかフリーランスの話とかできて楽しかったです。

TachibanaKaoru さんの Xcode Behavior ですが、帰ってから gistにアップロードされていたスクリプトを実際にXcode Behaviorで実行してみました。

f:id:kumamotone:20180223002530p:plain

設定からスクリプトを指定して

f:id:kumamotone:20180223002554p:plain

実行

f:id:kumamotone:20180223002625p:plain

ウィンドウ開き直す

f:id:kumamotone:20180223002721p:plain

おぉ〜

お疲れ様でした

potatotips #47 に参加しました (ブログまとめ)

potatotips #47 のブログまとめ枠で参加させていただきましたのブログです。

f:id:kumamotone:20180124234919j:plain

オイシックスドット大地さんの会場。(移転されていたことに向かう途中まで気づきませんでした…)

f:id:kumamotone:20180124235305j:plain

隣の部屋はキッチンになっていて、そこで調理してくださったのであろう料理がとても本格的でおいしかったです。

以下発表内容です。間違いや気になるところなどあればご指摘ください。埋まっていない資料は公開されたのを見つけ次第反映します。

審査なしでiOSアプリのアイコンを変更する / Hideyuki Okuni さん

審査なしでiOSアプリのアイコンを変更する方法がある。

iOS10.3から使用可能な機能で、それ以前のiOSをサポートしている場合は if #available(iOS 10.3, *) {} を使う必要がある。

やり方は意外と簡単で、CFBundleIconsというKeyの設定をInfo.plistに追加して、アイコンをプロジェクトに追加、UIApplication.shared.setAlternateIconName()を使うだけ。このときアイコンはAssets.xcassetsではなく直接追加する必要がある。

注意点としては、これをやると「アイコンが変わりましたよ」的なアラートが出るので、ユーザーのヘイトが溜まらなさそうなタイミングを見計らってやったほうが無難。

qiita.com

Advanced Usecase for Codable / d_date さん

speakerdeck.com

Swift4からCodableというものが使えるようになった。これはJSONをEncode & Decodeできるもの。

デコードする機能ほうはよく語られていると思うが、エンコードの機能もなかなか便利。

たとえばキャッシュを作る時。サーバーからデータを取ってきたいが、サーバーにアクセス出来ない場合はキャッシュを返すようなときに、Encodableを使ってローカルに置いておくことで実現できる。Keychainにトークンを保存しておきたい場合もData型にすれば保存できるので簡単。

Swipe Transition / tattn さん

speakerdeck.com

画面のどこでもスワイプジェスチャーする機能を実装してみた(SwipeBackと呼ぶ。Sloppy Swipingとも呼ばれている)。あと下スワイプでモーダルを閉じるやつ(なんというのかわからないが今回はSwipeToDismissと呼ぶ)も実装した。

実装方法。まずUIPanGestureRecognizerという有名なクラスがあって、これで指の移動量を取得できるのでこれでスワイプを検出する。

また UIViewControllerAnimatedTransitioning プロトコルを使うと自作の画面遷移を実装できるので、これを使ってViewの表示位置を移動させる(SwipeBackなら右、SwipeToDismissでは下)。

UIViewControllerTransitioningDelegate はpresent/dismiss時に前述のUIViewControllerAnimatedTransitioningを指定するためのプロトコルで、SwipeToDissmissで自作の画面遷移を利用するために使用する。

UINavigationControllerDelegateはUINavigationで発生するイベントの補足や、前述のUIViewControllerAnimatedTransitioningを指定するためのプロトコルで、SwipeBackで自作の画面遷移を利用するために使用する。

UIPercentDrivenInteractiveTransitionは画面遷移の補完の指定や、画面遷移が何%完了しているのかを設定するクラス。これによってどこまでスワイプしたのかを表現する。

これらを組み合わせて実際にSwipeBackを実装する方法を紹介。このとき、遷移元のviewの下に遷移後のviewをinsertして、遷移後のviewにパララックス効果(これにより、遷移前と遷移後のViewを異なるスピードで動かすことで、立体感や奥行きを演出する)を付けつつ遷移前のviewを右へ移動することで自然なアニメーションを実現している。少ないコードで実現できた。

github.com

せっかくなのでライブラリ化した。ScrollViewがあっても動作するようにしたり、Method Swizzlingですべての画面に適用する機能も備えている。

UXデザインをやるやらないで変わったUIの精度 / HaraguchiYumiko さん

UXデザインの手法を取り入れたらUIが洗練された話。

動画から指定した位置の静止画を切り出せるという、スナップショット機能という機能を作り、その後指定した範囲の動画を切り出せる機能を作ることになった。

UXデザインの手法を取り入れ、ユーザーストーリーを考え→ユーザーテスト→ユーザーテストを反映→再度ユーザーテストすることにした。

ユーザーストーリーを取り入れたことにより、操作に統一感が出てきた。その後ユーザーテストを行いUIを洗練した(このとき15名ぐらいにお願いしたのだがこの機能の場合5名ぐらいで良かったという気づきがあった)。

UXデザインを導入することで、洗練されたUIを提供しながら、UIデザインで正解がわからなくなったときの判断材料として使えるようになるので、時間は掛かるが、UIを洗練するためには良い。ユーザーストーリは簡単な機能の追加でも有効だと思うので試して見ると良い。

初めてのSwift Intermediate Language / kitasuke さん

Swift のコードは実行ファイル(.o)になるまでに以下のようなフェーズを踏んでいる。

(【】で囲んであるのがコンポーネント、囲んでないのが成果物) 【lib/Parse】→AST→【lib/Sema】→ (type checked) AST→【lib/SILGen】→(raw) SIL→【lib/SILOptimizer】→canonical SIL→【lib/IRGen】 →LLVM IR→【LLVM】→.o

発表では、局所変数を定義して、代入したものを返すような簡単なコードが、SILになったときどんな感じになるのかというのを紹介。

またSILOptimizerが通常やる最適化以外にも、コンパイラに-Oオプションを付けた場合のOptimizeもあって、格納しても使われない変数なんかがある場合はアドレスそんまま返すとかをやってくれる。

SIL、思ったより難しくないし、最適化の仕組みが知れるのはなかなかSwiftエンジニアとして良いと思うのでおすすめです。とくに最適化の部分。

詳しく知りたい場合はswift/docs/SIL.rst などを読むと良い。

github.com

ほか参考資料

qiita.com

qiita.com

既存のプロジェクトに、Firestoreを導入してみた / sun54907 さん

speakerdeck.com

FireStoreはオフライン、リアルタイム更新にも対応するデータベース。Firebase Realtime Databaseの後継でまだbeta。

開発合宿をやったときにFireStore導入しようという話になった。

普段できないことを取り組むというやつで、sun54907 さんのチームではリアルタイム通信を導入することにした。リアルタイム通信の方法はいくつかあって、WebsocketとかRealmとか使う方法もあるけど、websocketを自前実装するのは大変そうだし、外部サービスにメッセージ等の個人情報を置くのも嫌。

そんなとき、「マッチングアプリにつきまとう状態管理のつらさ」というLT資料を見つけた。

speakerdeck.com

これは最終的にFirebaseに新着件数だけを置いて、その更新をフックして既存のAPIを叩くということをしており、今回のケースにもマッチすると思ったので採用することにした。

ユーザー認証も必要なのでFirebaseのAuthを使った。サーバーから得られたカスタムトークンを使うことで認証できる。

この方法を使えば2日程度で実装できるほど簡単だが、現時点ではβ版なので動作保証されない(SLAもない)ことに注意。

Introducing Relax -- A release tool for Xcode / SCENEE さん

Swift言語とSwiftという上下昇降デスクにハマってらっしゃるSCENEE さん。

www.okamura.co.jp

Relaxというツールを作ったのでその紹介。

アプリ申請時、xcodebuildでAutomatic Signing/Manual Signingでハマったとか、ipaに想定と異なるProvisioning Profileが入ってるとか、色々ハマりどころがある。

github.com

Relaxを使うと、Relfileという名前のYAMLを置くだけで、Codesignエラーに悩まされることなく、IPAファイルを作成することが出来る。

brewで入る。xcarchive, ipaの作成だけでなく、ValidateコマンドでArchiveした後のIPAを簡単に検証したり、別のProvisioning Profileを使ってipaのresignをしたり、ほかにも色々機能がある。

感想

今回はiOSの発表がめちゃくちゃ続いて(potatotipsはAndroidiOSの発表が交互にやられるので、いつもはAndroidの発表を聞きながらiOS側の発表を咀嚼しつつまとめるみたいなことをしてた)、まとめるのはちょっと大変でしたが、勉強になって楽しかったです!

potatotips #46 に参加しました (ブログまとめ)

potatotips #46 のブログまとめ枠で参加させていただきましたのブログです。

f:id:kumamotone:20171218234435j:plain

今回の会場はdipさんのオフィスです。

f:id:kumamotone:20171218234525j:plain

六本木グランドタワー31F。今年お引越しされたようです。あまりに高級感のある場所で入るタイミングからもう緊張してしまった‥

以下発表内容です。間違いや気になるところなどあればご指摘ください。埋まっていない資料は公開されたのを見つけ次第反映します。

CircleCI 2.0 for macOS / r_plus さん

speakerdeck.com

11/15 に Circle CI 2.0 for macOS がAvailableに!

よかったこと

  • bitriseみたいなworkflow機能が生えた。
    • バージョン指定、job定義部、workflow定義部から成るyamlを書いて設定する。
  • 複数のmac/linux環境でCiを実行できるようになった。
    • 何が嬉しいかというと、Macも複数書けるので、複数XcodeバージョンでのCIを実行可能になった。
  • 書式でcronの書式でスケジュールができるようになった。
  • background実行を指定できるようになった。
    • 依存性のないものをバックグラウンドに回せれば、CI全体として実行時間を短縮できる。
  • key based caching

わるかったこと

  • $CIRCLE_ARTIFACTSが廃止された。 store_artifacts という stepを利用する必要がある。
  • 時間がないので割愛

まとめ

2.0になって、並列でbackground実行したら8分ぐらい掛かってたのが4分になった!やったね

RxSwift を利用した MVVM 実装をしている人におすすめのフレームワーク / Jiro Nagashima さん

いい感じのフレームワークがあったので紹介。

複雑性が増すと状態の管理が難しくなる、人によって実装の方法が異なったりする。そもそもRxSwiftムズい…→足並み揃えるのがムズい

そこでフレームワークを使う。

github.com

View, Reactor が対で存在していて、Action, Stateを介して伝搬する。

View, Reactor は protocol に適合させることで実装する。Actionがenum,Stateがstructで定義できる。

良いところとしては、Actionをenumで定義できるところ。RxSwiftで使うオペレーターが限定的であること。あとサンプルが良い。

検討が必要だと思うところは、画面遷移のロジックはReactorKitは関与しないというところ、ViewとReactorの粒度。

個人アプリでレビューを高くするためにやっていること / star__hoshi さん

speakerdeck.com

個人アプリのモチベーション、レビューのとお金が大事。

SKStoreReviewController

iOS 10.3から使える、Apple公式レビュー催促システム。1行書くだけで使えるが、必ず出るわけではない。

個人で作っているアプリの評価がなかなか良いのだが、SKStore…をいつ出しているかというと、20回目の起動時に出している(本当はもっといいタイミングがありそう)。そこそこ使ってくれている→気に入っている人が多いはずなので。80%ぐらいの人はコメントなし(SKStore…)経由で評価してくれている。

返信機能

返信するとユーザーにメールが届く。返信すればレビューが改善されるのでは?と思った。そこで低評価レビューを23件を返信したのだが、改善してくれなかった‥返信後にレビュー編集してくれた人もいるが、全員高評価の人。

まとめ

SKStore…は今すぐ使ったほうが良い。レビュー返信は低評価を高評価を帰るレビュー返信は難しいのでは…と思う。低評価レビューに返事するのは消耗するし、今はあまり期待しすぎずにユーザーとのコミュニケーションに使うのが良さそうと思っている。

AppRootController を使ってスプラッシュアニメーションを実装する 2017冬 / y.imajo さん

speakerdeck.com

スプラッシュ、これはアプリの起動を早く見せるためのもの(HIG)。LaunchScreen.storyboard はアニメーションできない。しかしやりたくないけど、アニメーションさせたいときもある。なので、LaunchScreen.storyboard と同じ見た目のViewを、LaunchScreenの後に表示して、アニメーションさせつつ画面遷移するという感じになる。

AppDelegate に書くという方法が最短だが、AppDelegateのやることが増える。そこで、AppRootControllerをつかうという方法もある。

speakerdeck.com

AppRootControllerというのは何かというと、以前potatotipsで話したやつ。コンテナ切り替えのViewControllerを作って切り替える。ContainerViewControllerをrootViewControllerとして切り替えない。

Swiftアルバム ver.4.1 / ezura さん

speakerdeck.com

Swift、成長が速い。apple/swiftを見てると成長の過程見れてほっこりする。それはそうと今回はSwift4.1の機能について紹介。

== / hashValue の暗黙的実装

CustomTypeをEquatableに適合させたいとき、なんか static func ==(lhs: CustomType, rhs: CustomType) -> Bool の中で全部の要素を比較、みたいなことをしないといけない。要素増えたらそれも追加しないといけないが、追加漏れしてしまうかもしれない。そんな不安を抱えたまま生活したくない…

型の宣言とプロパティがすべてEquatableなら、暗黙的に==が実装されて、Equatableに適合できるようになった。実装 associated valueをもつenumも同様。(HashableとhashValueに関しても同様)

conditional conformance(条件付き適合)

Genericsプロトコルに適合できない。が、とある条件を満たしている場合だけできるようにした。

どういうことかというと、ElementがEquatableなら、それで構成されるArrayもEquatableって書きたい…!→書けるようになった つまり Array<Array<Equatable適合型> == Array<Array<Equatable適合型> が評価できるようになった。たいした成長。

FaceID、TouchIDを実装してみた / Hideyuki Okuni さん

Face IDとFace IDを実装してみた話。

FaceID、TouchIDで分岐させる必要はない。コードを書くだけで勝手に出てきてくれる。

Infor.plist にNSFaceIDUsageDiscriptionを書く。書いてないと怪しいダイアログが出る。

LAContextのevaluatePolicy()を呼ぶといい感じになる。ちなみにcanEvaluatePolicyは呼ぶ必要がある。

詳しくはQiitaにあるのでご参照ください。

qiita.com

addObserver から考える API インタフェース / KAMEDAkyosuke さん

iOS9からNSNotificationCenterのremoveObserverしなくても良くなった。たしかにドキュメントにもそう書いてある。

ただ下の方に気になることが書いてあって、usingBlockではやっぱりremoveしないといけないって書いてある。つまり、iOS9からNSNotificationCenterのremoveObserverしなくても良くなったではなく、addObserver:はremoveObserver:しなくても良くなったというのが正しい。

そもそもremoveObserverしなくて良いってどういうことやねん。プログラミングの作法として、addしたらremoveするのがふつう。

ほかのAPIも調べてみたが、WKHTTPCookieStoreはremoveしないといけない。AVPlayerも開放しないと予期しないことになるよと言われている。NSNotificationCenterだけしないとうのはちょっと微妙…

たしかに便利になったわけだが、APIのインターフェースはそれ自身だけではなく他のクラスやフレームワーク等から決めるべきだと思う。そのため自分のチームでは本件に関してはremoveObserver:をするようにした(というかusingBlockを使うことにした)。

感想

RxSwiftをいい感じに使えるフレームワークって無いのかなとぼんやり思ってたので、ReactorKitはあとでさわってみたいなーと思いました。

Swift4.1の話は良い感じにまとまっていて理解が深まりました。Discord Offlineのときも思ったけど個人的に言語の話を楽しそうにする人見るとほっこりして良い。

NSNotificationCenterの話は、API設計という視点で掘り下げているのがユニークで面白いなーと思いました。便利だからといって、標準の作法や感覚に異なるインターフェイスを用意するのは微妙だなというのは(言われてみればだけど)たしかにと思いました。

いつもながら学びある勉強会でしたー運営のみなさま発表者のみなさまありがとうございました!

potatotips #45 に参加しました (iOSブログまとめ)

potatotips #45iOSブログまとめ枠で参加させていただきましたのブログです。

f:id:kumamotone:20171128234024j:plain

今回の会場はリクルートマーケティングパートナーズ さんのオフィスです。

f:id:kumamotone:20171128234113j:plain

溢れ出す親切さ。飲み物なども個人的にありがたいバランスでしたーありがとうございます。

以下発表内容です。間違いや気になるところなどあればご指摘ください。埋まっていない資料は公開されたのを見つけ次第反映します。

swagger-codegenから眺めるSwift4 / d_date さん

speakerdeck.com

SwaggerではAPIの仕様をYAMLで管理できる。 swagger-codegen を使って YAML 書いて CircleCI にぶち込んでクライアントとサーバーサイドのコード両方生成したい気持ちがある。

そんなswagger-codegenはSwift4に絶賛対応中。

絶賛対応中ということは壊れているということ。

運用でカバーでも良いが壊れてるなら直せば良いんですよ。→直した。手っ取り早く草を生やしたい人にオススメです。

感想

流れが速すぎて笑いました。関モバで予習していてよかった(?)

コード生成による自動化、壊れていたら直すの精神などもう1から10までエンジニアとして見習うべきだなぁと思いました。

XcodeGenでxcodeprojを卒業する / nonchalant さん

speakerdeck.com

xcodeprojっていうのがありますよね。ただのディレクトリなんだが、ターゲットの情報だとか、ビルド設定だとか、色々持ってる。

ところでxcodeprojってコンフリクトするよね。つらい。gitで管理したくない。

github.com

そこでXcodegen。説明によるとこれを使えばgitの管理下から外せるので、二度とxcodeprojでコンフリクトは起こらないとしている。

どういうものかというと、 project.yml を入力に xcodegen を叩けば xcodeproj にできる。Swift製。

github.com

サンプルリポジトリを作ってみました。見てみるとわかるが、project.ymlのほうが可動性がある。短いし。特にdependencesのあたりとかわかりやすい。

RIP *.xcodeproj :pray:

感想

良さそう。が、なかなかここらへん自分でいじるのは勇気要りそう‥‥

あと層ごとにフレームワークに分けるのも普通によさそう。

stackviewでボタンつくった話 / sun54907 さん

speakerdeck.com

仕事でボタン作った。要件はよくある感じのやつで、以下のようなパターンがある。

  • タイトル(文字だけ)
  • タイトルの左に画像がある
  • タイトル右の画像がある
  • 内容に合わせた幅になったり、固定幅になったりする

github.com

これを公開した。 工夫した点として、Stackviewで Android の wrap_content っぽい挙動を実現している。

内容が多くなれば広がるし、 isHidden を設定すればトルツメできるので便利。

感想

iOS8 切れない状況でConstraintをごにょごにょやってトルツメとかやったことあるので、ここらへんの便利さは分かりみがある。

全体的にUI周り不親切感あるなぁという気持ちが爆発している。普通にこのくらいUIButtonでいい感じに出来てほしいし、StackViewに乗せると自動で幅が変わってすごいっすよ〜みたいなの確かにすごいんだけど悲しくなってくる。未来の子どもたちはここらへんまったく意識せずにも実装できる世の中に生まれてほしい。

Codable Tips集 / tattn さん

speakerdeck.com

Codableは型のエンコードとデコードをサポートする機能。Codableは大人気でめっちゃ記事があるのでそれを参照してください。

CodableはSwift3.2で使えます

まずはこれを伝えたい。CodableはSwift4の機能だと思っている人たくさんいるが、CodableはSwift3.2で使えます。

複数行の文字数リテラルとかKeyPathリテラルクロージャ型KVOとかすげぇ便利なやつもSwift3.2で使える。Swift4が使えない事情があっても大丈夫。

Upper Camel Caseをkeyにするプロトコル

本題。APIがKeyがUpperCamelな名前でデータを返してきて、クライアントではふつうにlowerCamelで受けたいケースがある。こういうときはふつう CodingKeysを書いて対応すると思うけどtypoすると通らなくなるし冗長で嫌。

CodingKeyにはkey名とプロパティ名の対応をカスタマイズできるI/Fが用意されていて、これをカスタマイズすれば型で変換を表現できるしtypoしない。

Upper Camel Caseをkeyにするプロトコルを紹介したが、これ以外にもSnakeCaseCodingKey とか作れば snake_case でもなんとかなる。文字列処理のパフォーマンスがきになる場合は変換後のkey名をキャッシュしたりSourceryを使ってコード生成したりすると解決できる。

String を任意の型で受け取れる型を作る

ときどきあって、本当はサーバーで直してほしいのだが、Int で返してほしいValueがStringで返ってくるのをどうにかしたい。

Stringを別の型に変換する魔法の箱をつくると解決できる。

デコードの失敗を許容する型を作る

配列やURLをデコードしたいが、たまにデコードできない値が入るということがある。そんなときもデコードの失敗を許容する型を作って解決できる。

残り

時間がないので資料を見てください

github.com

感想

今日から使いたいTipsが多くガッツリ使いたい気持ちになった。

パフォーマンス改善の部分、具体的にどうなるのか気になる。

Human Interface Guidelinesを参考にApp Storeを見てみた / NatsukiIdota さん

App StoreのTodayは見出し+カードという構成。たぶん見出しはHIGの Clarity. に当たり、 角は Diference. に当たるんではないかと思う。

App Storeは、全体としてみると一見HIGにそっていないように見えるが、1つ1つを見れば、HIGに沿っているという感じがする。

感想

たしかにHIGに標準アプリを参考にするということはあると思うけど、App Storeは特に参考になりそうな部分かもなと思った。

最近あんまり意識してなかったのでざっくり眺めなおしても良さそう。

できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ / sakmt さん

www.slideshare.net

仕事でUI書くこと多くて、AWAを参考にして以下の記事を書いた。

qiita.com

UIScrollViewの中にContainerViewが2つあり、画面を左右のスワイプあるいはタブのタップでに切り替わるみたいなUI。MVP使ったりした。

アニメーションや動きを伴う実装部分を色々DIYしてみたが、自分で作ってみると意外と趣があって良い。

感想

Qiitaが力作で、後でゆっくり読みたいと思った。

ScrollViewにコンテナがいくつかとTableViewがあって〜みたいな実装はよくあると思うので自分もDIYして知見溜めていきたい。

UIStackViewとかで快適UI作り事例紹介 / sakmt さん

UIStackView良いですよね。人間が美しく感じる形、同じ大きさ同じ形同じ間隔、それってUIStackViewじゃん、となる。

後半ライブコーディング。SnapKit+Kotlinのapply関数っぽいエクステンションの組み合わせを使って、カルーセルを作ってみる。

UIStackViewとScrollViewがあれば、5分たらずでよくあるカルーセルができる!

感想

ライブコーディングがかっこよかった。

SnapKit+Kotlinのapply関数っぽいやつの組み合わせ、気持ちよさそうなのでやってみたい。

ContainerViewController作成の流れ / vespid さん

github.com

ContainerViewControllerでTwitterプロフィール画面のUIを作ってみる。

制約:

  • スクロールできる
  • スクロールによってヘッダが縮む

とか。

素朴に作ると、UIの要件と、自然なUIの両立ができないときがある。たとえばcontentSizeが小さい場合に画面切り替えでヘッダがおかしくなるとか。こういう場合には落とし所を見つける必要がある。

今日は時間の関係上抽象的な話になりますが、再利用性を高めながらいい感じに作っていきましょう。

感想

動画キャプチャをいい感じに載せてくださっていてスライドがわかりやすくかっこよかった。

たしかにこういう画面割りとよくあって、作ってみると理解深まって良さそう。

ReactNative+GraphQLでなんか作る / yukiasai さん

speakerdeck.com

GraphQLはFacebookが頑張ってるやつで、Scheme,Query, Mutation, Subscription というのがある。

SchemaはSchema。Get に相当するのが Query、 POSTがMutationみたいな感じだと思ってもらっても良い。Subscriptionは購読できる。なんか値が変わったときに通知してくれる。イケてる。

ReactNativeとGraphQLでChatを作ってみる。 react-apollo を使って Reduxは使わない。簡単!

感想

たしかに既存のよくあるAPIのつらみみたいなのが解決できそうな雰囲気があって、MutationやSubscriptionのあたり、すごく良さそうだなという気持ちになった。

サンプルコード後で拝見したい。

さいごに

f:id:kumamotone:20171129001349j:plain

全体的にUIの話が多いな〜と感じた。京橋だけどあんまりリアクティブエクステンションの話は出てこなかった。

懇親会でUI周りのつらみとかXcodeのここがバグっている、みたいな話ができてよかった。

明日使えるTipsとしては @IBDesignable 付けてるとなんかやたらIBがビルドをはじめてバッテリを持っていかれるときがあり、そういうときは 「Editor > Automatically Refresh Views」 のチェックを外すと一旦走らなくなる、だとか、

あと悲しい感じの話としては「全体選択してctrl+Iでフォーマットできるけどカーソルがファイル末尾にぶっ飛ぶ」「Editor > Fix All in Scopeを選択すると赤丸のポチポチでFixしまくらなくて良くて便利だったがXcode9でなんかグレイアウトして使えなくなった」「Editor > Refactor to Storyboard...は便利そうだけど一回使ったらぶっ壊れた」などがありみなさま各々苦労してらっしゃるな〜という感じだった。

毎回頑張って聞いてまとめているとどんどん短い時間で理解できる力は増している感じはする。がAndroid枠の方も結構気になる発表とかあったのに聞き漏らしちゃってるのであとで資料を拝見したい。

最近毎回ブログ書いてるんですが毎回ブログ書いてると「ブログ枠空いてますよ」とか教えてくれたりする人とかもいて最高。基本的に良いことしか無いので今後もやっていきたい。