iOSDC Japan 2017で「Auto Layoutのアルゴリズム」について発表しました

こんにちは、[オートレイアウト作ったマン](https://twitter.com/toshi0383/status/909258923911274496) の [@inamiy](https://github.com/inamiy) です。
[オートレイアウト○○マン](https://twitter.com/toshi0383/status/909257369862914058)が全員集結したMARVEL映画に出るのが将来の夢です。

さて先日、2017年9月15-17日の2.5日間にかけて、[iOSDC Japan 2017](https://iosdc.jp/2017/)というiOSの一大イベントが、早稲田大学理工学部・西早稲田キャンパスにて開催されました。
昨年に引き続き、第2回目の開催で、総勢800名が参加されたとのことです。
スピーカーの人数も倍増して、大成功した昨年の2016年をさらに上回る規模となりました。

![iosdc-2017.png](https://qiita-image-store.s3.amazonaws.com/0/2249/6aa0cc08-2ffb-d633-8d95-21eccf1228bf.png)

そんな中、私は今年のテーマとして、「[Auto Layoutのアルゴリズム](https://iosdc.jp/2017/node/1317)」という若干マニアックな話を選びました。
今年は4トラック同時進行ということもあり、実際にセッションに集まるのは100〜200人くらいだろうと想像していましたが、タイムスケジュールが公開されると、まさかの**キーノート登壇！**（トップバッター＋同時間帯の登壇者なし）
本来であれば、スピーカー冥利に尽きる最高のシチュエーションなのですが、いかんせん内容が小難しいだけに、**開幕早々いきなりお通夜にならないか**、心の中では大いに心配していました。

・・・で、案の定、発表後には**若干RIPなムード**が漂ってしまい、[去年の自分の発表](http://qiita.com/inamiy/items/293869e223d44848f9c9)に届かなかったという無念さがありますが、今年もベストトーク賞7位(?)に入賞させていただいたり、GitHub Trending 1位を取れたり、一部の方々にはしっかり刺さってくれたので、なんとか無事に発表できて良かったです。
今年もイベントを運営して下さったスタッフの皆様と、イベントを盛り上げた参加者の皆様には厚く御礼申し上げます。

- スライド
  - [AutoLayout Algorithm // Speaker Deck](https://speakerdeck.com/inamiy/autolayout-algorithm)

- 動画:
  - [iOSDC Japan 2017 09/16 Track A 10:30 / Auto Layoutのアルゴリズム / 稲見 泰宏 - YouTube](https://www.youtube.com/watch?v=THOnsyDKEYQ)

- GitHub
  - [inamiy/Cassowary: An incremental linear constraint-solving algorithm (Auto Layout) in Swift.](https://github.com/inamiy/Cassowary)

- 当日の様子・感想ブログ
  - [Togetterまとめ](https://togetter.com/li/1151208)
  - [niwatakoさんのはてなブログ](http://niwatako.hatenablog.jp/entry/2017/09/16/110248)
  - [iOSDC2017に参加してきた - ものがたり](http://atsushieno.hatenablog.com/entry/2017/09/18/052246)

なお、昨年のビットコインの賞金について、コメントは差し控えさせていただきます。

## 発表で伝えたかったこと

当日の発表では、Auto Layoutを「線形計画問題」として捉え、[元の論文](https://constraints.cs.washington.edu/solvers/uist97.html)に沿って、「シンプレックス法 → Cassowaryアルゴリズム」の順で、アルゴリズムを解説しました。
[当日のスライド](https://speakerdeck.com/inamiy/autolayout-algorithm)に日本語要約がまとまっていますので、論文と照らし合わせながら読むと分かりやすいと思います。

さらに深く学びたい方は、当日解説できなかった**オープンソース版([inamiy/Cassowary](https://github.com/inamiy/Cassowary))**を直接ご参照ください。
ソース内にコメントを多く記述しているので、コードを読むだけでも理解が深まると思います。
また、従来のOOPベースのCassowary実装をさらに発展させて、**Swiftらしい、型安全な設計** を心がけましたので、そちらにも注目していただけると嬉しいです。

ちなみに、プラットフォーム別の実装は、[overconstrained](http://overconstrained.io/) というサイトにまとまっています。
後日談として、Androidの[ConstraintLayout](https://developer.android.com/training/constraint-layout/index.html#adjust-the-view-size)も似たような仕組みで動いているようで、Webの世界でも[制約ベースCSS](https://constraints.cs.washington.edu/web/ccss-uwtr.pdf)の可能性について触れられていることから、**CassowaryはUIに携わるエンジニアなら知っておいて損のない知識** だと思います。

一方で、今回の私の発表が至らぬばかりに、数式に対して抵抗を感じてしまった方も少なくないと思います。
実際のところは、

- 難しい数学はほとんど使われていない（高校で学ぶ行列計算が分かればOK）
- Auto Layoutは数学的に美しい （人類が使うにはまだ早いけど）
- 裏側の仕組みが分かると、Auto Layout（を考えた人・作った人）に感謝できる
- 要するに、**Auto Layoutは実はすごい！**

ということで、ぜひまたスライドを振り返ってもらえれば幸いです。

あと最後に、**毎日使うAuto Layoutに日々感謝の気持ちを忘れず、1つ1つ真心を込めて制約を付けていきたい**ものですね！

## 参考文献

- Auto Layoutの由来がCassowaryである情報元
	- [Ex-Apple Engineer post in Hacker News](https://news.ycombinator.com/item?id=9846992)
	- [iOS Auto Layout Demystified (2nd Edition): Erica Sadun](https://www.amazon.co.jp/Auto-Layout-Demystified-Mobile-Programming/dp/0321967194)
	- [overconstrained](http://overconstrained.io/) (制約レイアウトライブラリ紹介)

- Cassowary
	- 論文
		- [Solving Linear Arithmetic Constraints for User Interface Applications (1997)](https://constraints.cs.washington.edu/solvers/uist97.html)
		- [ユーザインタフェースのための線形等式・不等式制約解消系 (2002)](https://www.jstage.jst.go.jp/article/jssst/19/6/19_6_437/_article/-char/ja/)

	- [pybee/cassowary](https://github.com/pybee/cassowary) (Python version)
		- [theory.rst](https://github.com/pybee/cassowary/blob/master/docs/topics/theory.rst) (Python実装の概要)
	- [Understanding UI Layout Constraints (part 1) · croisant.net](https://croisant.net/blog/2016-02-24-ui-layout-constraints-part-1/)

- 線形計画問題（シンプレックス法）
	- [新版　数理計画入門 | Amazon](https://www.amazon.co.jp/%E6%96%B0%E7%89%88-%E6%95%B0%E7%90%86%E8%A8%88%E7%94%BB%E5%85%A5%E9%96%80-%E7%A6%8F%E5%B3%B6%E9%9B%85%E5%A4%AB/dp/4254280041)

- Auto Layout + DSL復習
	- [Auto Layoutガイド：Auto Layoutの概要](https://developer.apple.com/jp/documentation/UserExperience/Conceptual/AutolayoutPG/index.html)
	- [robb/Cartography](https://github.com/robb/Cartography) (Auto Layout DSL in Swift)