iOSDC Japan 2021 トーク一覧

他イベントOK LT(5分)

UITestでWebページを操作する時、JavaScriptを使おう

山崎謙登

モバイルアプリでUITestを実行する際、UITestの中でWebViewを操作しなければいけないが、上手く操作できなかったという経験はありませんか?例えば、Webページ上で「メールアドレスを入力」「パスワードを入力」「ログインボタンを押下」などといった動作です。Apple標準のフレームワークであるXCUITestでもある程度WebViewの操作はできますが、複雑な操作はできない場合があります。その場合に、UITestの実装を諦めるのはもったいないですよね。こうした状況への対応策の一つとして、JavaScriptを直接WebViewに用い、望む操作を実現することが可能です。普段、JavaScriptはアプリのエンジニアであれば触らないものかもしれませんが、全く知らない方でも比較的簡単に実装できます。WebViewがたくさんあるアプリでも、恐れずUITestを書いていきましょう!

採択 他イベントOK 2021/09/18 14:10〜 Track D レギュラートーク(20分)

バーチャル背景を導入しよう

BOBG1018Vi ぼぶ BOBG1018Vi

新しい生活様式になってから約二年が経とうとしています.その中で,アプリやサービスを通して人とお話する機会が非常に増えてきました.これに伴い,通話アプリの種類は会議からタレントとの交流まで多岐に渡るものとなりました.そしてこれらのアプリには,「背景を隠せるようにしたい」「専用の背景を提供したい」「コラボコンテンツを提供したい」といった機能のニーズがあるかと思います.

本トークでは,バーチャル背景の実現方法を2つご紹介いたします.また,これらの方法は,既に本番プロダクトに導入済みであり,実現方法に加えて,本番導入に伴うtipsもご紹介したいと思います.

具体的には,

ARKitを使った方法

  • バーチャル背景の実現方法
  • パフォーマンス周り
  • 他の手段とのメリデメ
  • 副次的に得られそうなメリット

CoreMLを使った方法

  • バーチャル背景の実現方法
  • パフォーマンス周り
  • 他の手段とのメリデメ

本番プロダクトに導入する際のtips

  • 開発
  • 申請

皆様の体験向上に貢献できれば,幸いです.

他イベントOK レギュラートーク(20分)

初めての Google Maps SDK

Yosuke Imairi

配車アプリは地図をベースとして構成されています。常に地図がアプリ上に存在しており、ユーザの操作や配車の状態に従い、地図に対して様々なアクションをします。

このトークでは、Google Maps SDK の基本的な使い方や概念について説明し、「GO」での活用事例やその具体的な実装方法について紹介します。

また、どの class からでも容易に地図の操作やその状態の取得ができる仕組みについても紹介します。

・Google Maps の構成について
・近くの道路に自動的にピンを移動させる
・特定の範囲に矩形を描画する
・ルートをグラデーションさせる
・地図を 3D 回転させる
・Google Maps を省電力で利用する
・Google Maps ロゴの位置調整
・地図の操作命令と状態取得を支える仕組み

6
採択 他イベントOK 2021/09/17 19:50〜 Track B レギュラートーク(20分)

iOSアプリ開発に入門して、いきなりUnity as a Libraryに挑戦してわかったこと。

i_kinopee Ikuhide Kinoshita i_kinopee

ある日フロントエンドエンジニアが、Unityを組み込んだiOSアプリの開発を行う業務が決まりました。そこからSwiftなどを習得し、先輩エンジニアの経験も伺いながら、Unity as a Libary (UaaL)を採用しました。

Unity as a Libraryは、フレームワークとしてUnityをネイティブアプリに組み込むことができる仕組みです。多彩な3D表現を得意とするUnityと、ユーザーフレンドリーで洗練されたUIを実現できるネイティブ実装のいいとこどりができます。

プロダクトとして、デザイン性と実用性が必要とされる中で開発した経験や、iOSアプリ初心者の視点からつまずいたポイントなどを意識して、以下のテーマをお届けします。

  • Unity as a Libraryを採用するべき条件
  • 巷にある先人方のUnity as a Libraryの実装方法を比較検討した結果
  • 実用面とUXを考えて採用した、Unityの組み込み方法
  • Unityとネイティブ(Swift)の間のやり取りについての検討と実装
  • UnityのBuildで必要な操作を自動化したTip
他イベントOK レギュラートーク(20分)

宣言的DSLによるコマンドラインユーティリティの開発

giginet giginet giginet

Swift 5.4からの新たな言語機能であるResultBuilderの登場により、SwiftUIのような宣言的DSL(ドメイン固有言語)を容易に設計、実装できるようになりました。

DSLの効果的な利用例の1つが設定ファイルです。Swift DSLを設定ファイルとするコマンドラインユーティリティを開発してみましょう!

このセッションでは、ResultBuilderを用いた、効果的な設定ファイル記述言語のデザインと実装例をお伝えします。
また、DSLの効果的な利用例について、いくつかアイディアをお伝えします。

5
他イベントOK レギュラートーク(20分)

機械的なコーディングの自動化

Yosuke Imairi

iOS アプリの開発していると一部の実装でルーチン作業が発生することはありませんか。ある class に特定の protocol を準拠させたり、ある struct を追加すると enum の case を増やす必要があったり。

また、大規模なアプリの場合は Clean Architecture や VIPER などのアーキテクチャが導入され、ある程度そのコーディングの仕方が固定化されているケースもあります。

このような機械的なコーディングやボイラープレートはなるべく自動化しておくと作業効率が上がります。

このトークでは、Xcode テンプレートを利用したボイラープレートの作成を始め、SourceKit を利用して機械的なコーディングを自動化する方法について紹介します。

・いますぐ始められる、Xcode テンプレートの使い方
・Xcode テンプレートの限界
・SourceKit を利用したコードの静的解析について
・RIBs アーキテクチャに特化したコード自動生成 & 依存解決ツールの仕組みとその活用方法
・機械的なコーディングの自動化によって得られたメリット

3
採択 他イベントOK 2021/09/19 16:30〜 Track A LT(5分)

ほんの一瞬だけでもConcurrencyの計算理論に触れてみませんか?

banjun ばんじゅん🍓 banjun

非同期のコードはよく書くものの、その振舞いを把握できているか不安になることもありますよね。
 
そのようなとき、オートマトンや状態遷移系のような知識は役に立つのでしょうか?つまりそれ自体を使ってコードを書くことはないものの、基礎的な考え方になるようなものです。並行計算の分野ではCCS(Calculus of Communicating Systems)やpi-calculusのような理論が提唱されていました。このLTではCCSを中心に計算理論の例をみていきます。
 
CCSで記述することで、並行計算を状態遷移として捉えることができます。状態を数えることができれば、非同期に惑わされずに振舞いを把握できます。そこでは同期通信とインターリーブという抽象化された計算過程があります。何を抽象できるかのインスピレーションが得られるでしょう。
 
async/awaitなどの実際的な機能も重要ですが、ここらでちょっと理論面にも目を向けてみようかな?というきっかけになればと思っています。たった5分で、「それ聞いたことがある」状態になれることをサポートします。

他イベントOK レギュラートーク(20分)

Protocol Oriented Programmingへの向き合い方

trywjs gen trywjs

WWDCでProtocol Oriented Programming(以下POP)が話題になってから6年経ちました。登場してから月日が経った分、多くの方が試行錯誤を繰り返し、知見も溜まってきたと思います。このトークではPOPが何かを簡単に説明してから、課題解決においてPOPのメリットや他の方法との比較、アンチパターンを話します。

>話す内容の例
・OOP, POPそれぞれ課題へのアプローチ1(多重継承が必要な場合にどう対応するか)
・「◯◯able」だらけになってしまう問題
・他の方法がPOPよりシンプルに実装できる場合

POPに慣れている方にはもう一度整理する時間を、そうではない方にはPOPというツールをこれから手に入れるきっかけを提供します。

3
採択 他イベントOK 2021/09/18 13:30〜 Track D レギュラートーク(20分)

未知のファイル形式をCodableで読み書きするのに役立つテクニック 『Apple Watchの文字盤ファイル』

banjun ばんじゅん🍓 banjun

SwiftのCodableはすごく便利な機能です。しかしながら時にCodableが得意ではないフォーマットを扱うことはみなさんもあるはずです。もしAPIのJSONならCodable向きにスキーマを調整できるケースも多いはずなのですが、このトークではそのような調整がそもそも不可能な例として、Appleの独自ファイルフォーマット (Apple Watchの文字盤ファイル) を見ていきます。どのようにSwiftコード側でCodableを整えていくかのテクニックをお伝えします。

Apple Watchの文字盤ファイルでなにをするの?

文字盤ファイルを取り出して解析した人はおそらく世界に1人しかいないので簡単に説明します。アレには、文字盤の種類(写真とかSiriとか)や、左上には天気があり下にはカレンダーがある、といったデータが詰め込まれています。

そして、文字盤ファイルは取り出してシェアできます。それを解析して再合成してみました。1個の文字盤を1個のCodableなstructで表現し、Swiftらしさのある整った読み書きしやすいコードにします。そこで出てくるテクニックは他のファイルをCodableで定義するのにも役立つでしょう。

文字盤ファイルのここが難しい!

文字盤ファイルにはJSONの部分もありますが、その全体は複数のJSONやplistが画像リソースとともに詰まったフォルダ構造をしています。個別のJSONやplistには、変数名として使えないキー名が出てくるだけではなく、Unix Epochの日付とCore Data由来の2001年でオフセットされた日付の混在や、Objective-C時代のシリアライズなど、普段のCodableだったら扱いたくないような要素が次々に出てきます。これらをスマートに乗り越えていきましょう。

他イベントOK レギュラートーク(20分)

SwiftUI で始めるデザインシステム入門

kashihararara かしはら kashihararara

デザインシステムは Web フロントエンド界隈では既に一般的なツールセット・考え方になってきました。一方でモバイルアプリ領域において事例は数えるほどしかなく、まだまだ発展途上という印象で導入に踏み切れない企業も多いのではないでしょうか。

Wantedly では 2018 年頃からデザインシステムの運用を初めていて、最初はデザイナーが使う Sketch, Figma といったデザインツールの整備から始まり、時を経て 2021 年現在では ソフトウェア側の React, iOS, Android のそれぞれの実装が漸進的に進んでいてプロダクトの中で活用されています。

デザインシステムを実装する上で大切なことは、1. エンジニアとデザイナーの間でデザイン言語を共有すること。2. デザインシステムによって作られるコンポーネントの要素・原則を共有すること。の2点に集約されます。

さて、デザインシステムを継続的に運用を続けていくと「似ているけどちょっと違うコンポーネントが複数存在する」問題に遭遇します。
この時にエンジニアが取るべき行動はどれでしょうか?

  1. 複数のコンポーネントの最大公約数となるスーパー・コンポーネントを定義する
  2. 複数のコンポーネントをそれぞれ別名で実装する
  3. デザイナーと”ちょっと違う”コンポーネントについての考え方を共有する

本トークでは、

  • これからデザインシステムを作る時にデザイナーとどのようなコラボレーションを行うと良いのか
  • デザインシステムをどのように捉え、SwiftUI での設計にどのように落とし込むと良いのか

についてお話させていただきます。

5
採択 他イベントOK 2021/09/18 16:35〜 Track A LT(5分)

再現ができない?特定ができない?ZOZOTOWNアプリのトップクラッシュに立ち向かった話

chichilam86 chichilam chichilam86

大幅リニューアル後に、放置していたクラッシュが、なんと一日数千件まで爆発してしまった!?しかもそれは再現方法も原因の手がかりもまったくつかめないクラッシュなの?

結論から書くと原因はメモリ不足でした。メモリ不足によるクラッシュは直接の原因がログやスタックトレースに現れないので再現が容易でなく調査が困難です。
このトップクラスのクラッシュに対して、クラッシュログから原因を推測し、メモリ不足と仮定して、Allocationsで調べながら、リファクタリングを行いました。そしてリリースしたバージョンを観測した結果、無事解決できていることが分かりました!
このLTでは、このような再現手段がない、特定ができない問題について、どのように仮説を立てて、解決していったのかを紹介します。

23
採択 他イベントOK 2021/09/18 11:30〜 Track A レギュラートーク(40分)

Network ExtensionでiOSデバイス上で動くパケットキャプチャを作る

k_katsumi 岸川克己 k_katsumi

Network Extensionはあまり使い方が知られていないフレームワークです。
Wi-Fiの設定変更、コンテンツフィルタ、VPNの構成あるいは実装といったiOSのネットワーク機能を拡張するAPIを提供します。

iOSデバイスでパケットキャプチャをする方法は主にCharles ProxyなどのWeb Proxyを利用したツールを使う、仮想ネットワークインターフェースを監視する、Charles for iOSなどのデバイス上でVPNクライアントとして動くツールを使うという3種類があります。

デバイス上で動作するパケットキャプチャを実装するにはNetwork Extensionを使ってVPNクライアントを実装しますが、もともと情報の少ないこのフレームワークの中でもVPNクライアントの実装方法はほとんど情報がありません。
ソフトウェアの性質上、プライバシーの観点からVPNサーバも同じアプリにローカルサーバとして実装することが望ましいですが、そのような例はまず見つからないでしょう。

そこでiOSデバイス上で動くVPNクライアントおよびサーバを実装しパケットキャプチャを行うアプリを実際に作り、パケットキャプチャの方法を説明します。
Web Proxyを使う方法では不可能なUDPパケットのキャプチャができるのでゲームなど主にUDPが使われるアプリの解析もできるのが便利です。
また自分でパケットキャプチャが書けるということは、特定のパケットに対して任意の処理を実行することができるということです。つまり他のアプリの通信内容と連携するツールを作れます。

今回は応用例として、作成したアプリを用いてあるオンライン対戦ゲームの通信を実際に解析し、普通では見えないゲームの状態や他プレイヤーの行動をリアルタイムに監視・追跡するツールを作ってお見せします。

他イベントOK LT(5分)

特殊なデザインのUIをプロダクトに実装する

rizumi_jp izumi rizumi_jp

iOSエンジニアは、時にはUIKitやSwiftUIを純粋に扱うだけでは表現が困難なUIを実装する機会があります。

例えば、バーチャルSNS clusterではデザインのための思想や原則が存在し、そこから生まれた"Cluster Round"というスーパー楕円を用いた曲線表現がUIに活用されています。
この形状はclusterというサービスには「さわりたくなる楽しさ」が存在する、というサービスブランディングをするためにとても重要なものです。

そのようにデザインされたUIをアプリケーションに実装し、ユーザーへ届けるのは我々エンジニアの大事な仕事です。

しかし、UIKit/SwiftUIでスーパー楕円のような形状を再現するには、ベジェ曲線で近似したViewでマスクするなどの工夫が必要です。
それと同時にアプリケーションのパフォーマンスを保つこともエンジニアの責務であり、大量に描画する場合でもフレームレートの低下や画面のカクつきは抑えなければなりません。

そこでこのトークでは、"Cluster Round"という独自のデザインを実装した方法とそのパフォーマンスの改善について、具体例を交えながらお話しします。
また、iOS以外のプラットフォーム(Android/Unity/Web)における実現方法についても時間が許す限りご紹介します。

4
採択 他イベントOK 2021/09/17 19:50〜 Track C レギュラートーク(20分)

iOS・Androidで使えるデザインシステムをどう実装するか

_kwzr_ ああうえ _kwzr_

このトークでは、モバイルアプリにデザインシステムを導入した話をします。

デザインシステムとは、デザインに関する原則やコンポーネントの実装をまとめたもので、有名なものではGoogleのMaterial Designなどがあります。デザインシステムは以下のような目的で作られています。

  • ボタンの見た目など画面・サービスごとに違ってユーザーを混乱させない
  • 同じような実装をまとめることで、コード量・メンテナンスコストを減らし、生産性を上げる
  • 誰が実装しても同じものを作れる
  • 統一したUIを提供することで、ブランディングを向上させる

弊社では、4つ以上のアプリを同時に開発しており、iOS・Android・Webのそれぞれのプラットフォームでサービスを展開しています。これまでは、各アプリでそれぞれUIの実装を進めていましたが、共通化できる部分も多くあります。すでにWeb版ではデザインシステムが開発・運用されていますが、どのようにしてアプリでも使えるように整備していったかをお話しします。

内容

  • Figmaからのリソース自動書き出し
  • Kotlin Multiplatform Mobileを使った共通実装の作成
  • SwiftUI / UIKitでの実装
  • (Jetpack Composeでの実装)
他イベントOK LT(5分)

Dartのnull安全をSwiftのOptionalと比較してみた

shuniiiig しゅにーぐ shuniiiig

多くのiOSエンジニアの方々にとってSwiftの表現力は魅力的だと思います。Swiftらしい書き方を実践することでプログラマーとして気を付けるべき点を考慮できるようになるという話もよく聞きます。中でもOptionalのおかげでnilになる可能性があるかどうかを明示的に把握できるようになることであらかじめバグが入り込む可能性を潰し、現在の自分だけでなく、未来のメンバーにもまるでドキュメントかのように振る舞いをコードとして残しておくことができます。そしてそのような便利な機能がつい最近になってDartにもやってきました。iOSエンジニアをやっているとどこかでFlutterを書く機会もあるかもしれません。その際必ず書くことになるであろうDart。「Swiftっぽく書きたいな〜」なんて思ってもまったく同じようには書けません、一体書き方にどういった違いがあるのか。そしてどういう書き方ができると実装者としては嬉しいのか。そのような観点から比較、検証していきます。

1
他イベントOK LT(5分)

Context Menusの仕様とHuman Interface Guideline的アンチパターン

krgpi karaage krgpi

Context Menus は画像や文字のUIを押し込むことで、アイテムのプレビューとそれに対するコマンドを表示できるAPIで、現在さまざまなアプリで実装されています。

既存のviewに対して比較的簡単な実装を追加することで、リッチな体験を実現できる一方で、ユーザーに困惑を与えてしまうアンチパターンがAppleのHuman Interface Guidelineで指摘されています。

本LTでは仕様をサンプルコードで説明しつつ、Human Interface Guidelineで推奨・非推奨されている事項を紹介します。

1
他イベントOK LT(5分)

意外に実装できない!?ウィジェットの仕様NG集

tanakasan2525 たなたつ tanakasan2525

業務で様々なウィジェットを実装したり、デザインレビューをするなかで、意外と実装できない仕様にぶつかることがありました。

ユーザーとの接点を増やせるウィジェットはとても魅力的で作りたいアイデアが色々と湧いてきます。
しかし、現在のWidgetKitで利用できるAPIの種類やウィジェットの更新ポリシーにより、実現できないこともあります。
標準アプリでは実現できているのにサードパーティでは実装できない!なんてことも。

このLTでは意外に実現が難しいウィジェットの機能例をウィジェットの動作の仕組みとともに説明しつつ、代替案を紹介します。

2
採択 他イベントOK 2021/09/19 13:30〜 Track C レギュラートーク(20分)

WidgetKitで良い体験を作るには

tanakasan2525 たなたつ tanakasan2525

iOS 14で追加されたウィジェット機能により、ホーム画面でアプリの機能を直接提供できるようになりました。

ユーザーとの接点を増やせるウィジェットはとても魅力的で作りたいアイデアが色々と湧いてきますが、
現在のWidgetKitでは実現の難しい動作が意外にあり、期待する体験を提供できないことがあります。

また、WidgetKitは電池の消耗を抑えるためにウィジェットの更新タイミングに制限があります。
これを曖昧にして実装してしまうと、ウィジェットが更新されなくなったり、無駄な通信が行われたりしてしまうので注意が必要です。

このトークではいくつかのウィジェットを実装したり、仕様レビューをする中で見つけた、ウィジェットで良い体験を提供するために必要な知識とテクニックをウィジェットの動作のしくみとともにお話します。

他イベントOK レギュラートーク(20分)

The Composable Architecture がすごく良いので紹介したい 2021年秋

yimajo 今城 善矩 yimajo

Reduxのアイデアをもとにしたフレームワーク"The Composable Architecture (TCA)"は、2020年5月に公開されて以降、SwiftUI/UIKitを用いた新規アプリ開発において採用事例を多く目にするようになりました。

本セッションは昨年のiOSDC2020で私が登壇した内容『iOSアプリ開発のための"The Composable Architecture"がすごく良いので紹介したい』の続きです。昨年の内容は動画として公開されており比較的高い閲覧数のため、アプリ開発者のTCAに対する興味が伺えます。

https://fortee.jp/iosdc-japan-2020/proposal/40b59a33-1f0a-45ba-ba94-10ce9cf960f4

前回セッションのフィードバックを振り返ると、さらに詳しくTCAの使い方を解説してほしいという要望や、実際に利用している人ならではの意見が聞きたいという声がありました。その根底としてはおそらくTCAを利用する上で正しくフレームワークの流儀に沿っているか判断に迷う側面があるからでしょう。TCAはコードの検証のしやすさや機能を組み合わせやすくするため、Swiftの言語機能をフルに活用しかつ関数型プログラミングの考えを取り入れ、さらにCombineによってReduxライクなフレームワークを実現しています。判断に迷わず使うためには理解したいこともたくさんあるわけです。

本セッションではTCAを用いたアプリ開発を複数案件経験しつつ、技術記事やオンライン勉強会でアウトプットし続けている私が、TCAについて昨年よりも深く内容を紹介します。皆さんのこれからのアプリ開発でもTCAをより理解して使ったり議論の土台になるような発表となれば幸いです。

他イベントOK レギュラートーク(20分)

Webアプリ開発チームがFlutterでiOSアプリを開発する

t_okkann t_okkann t_okkann

株式会社ラクスではBtoBを中心とした様々なSaaSを開発・運営しており、そのサービスの主軸はブラウザ上で動作するWebアプリです。そのうちの1つのサービスでiOSアプリを新規で開発することになりました。

しかし、チームのメンバーはWebアプリ開発者が中心でiOSアプリ開発の経験がなく、外注でiOSアプリを開発することも視野に入れていました。そこでiOSアプリを内製すべく、Webアプリ開発者でもモバイルアプリを開発できるか、という観点からFlutterの技術検証を行いました。検証結果から、

  • ネイティブ言語と同等の開発環境が整っていること
  • DartがWebアプリ開発言語との親和性が高く、学習コストが低いこと
  • プラグインが充実しておりネイティブ機能を十分利用できること

が分かり、Webアプリ開発者が中心のチームにFlutterを導入してiOSアプリを開発することになりました。

Flutterはオブジェクト指向のようにUIを組み立てられることや、JavaScriptの文法が一部使用できることなど、Webアプリ開発者が中心の開発チームでもモバイルアプリ開発ができるツールで、最近ではFlutterでのアプリ開発の事例も増えてきています。

このトークでは、スマホアプリ開発の経験がないWebアプリ開発チームがFlutterを導入してiOSアプリを開発することについてお話しします。
具体的には、以下のような内容についてお話しします。

  • 「開発環境」「Webアプリ開発者にとっての学習コスト」「iOSアプリの機能を実現できるか」の観点からFlutterの導入について検証したこと
  • 検証結果からWebアプリ開発チームがFlutterでiOSアプリを開発できると判断した理由とその根拠
  • Flutterを導入することで得られるメリット
8