iOS 7風UIをWebで再現「Project-Tyson」
Project-TysonはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
間もなくリリースすると思われるiOS 7。あのがらっと変わったUIをWebで再現するのがProject-Tysonです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-08 21.01.09.1378646567.png)
コンタクトリスト。スクロールしてもヘッダ部は残ります。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-08 21.01.12.1378646571.png)
コンタクトを選ぶとメッセージ送信フォームになります。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-08 21.01.16.1378646574.png)
送信しました。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-08 21.01.20.1378646577.png)
アバウト。アニメーションが下から発生するようになっています。
Project-Tysonは詳細を説明するブログ記事も書いており、そのエッセンスがコードとブログ記事の両方から学べるようになっています。今後iPhone向けのWebサイトを開発する際にはチェックした方が良いでしょう。
MOONGIFTはこう見る
iPhoneが登場した直後からiPhoneアプリ風UIを模したWebテンプレートが多数登場しました。iOS 7の登場以後はそれらが一気にレガシーなものになるでしょう。今後はiOS 7に寄せて開発しなければなりません。
多くのデザインフレームワークであれば、テーマで対応してくれる可能性があります。とは言えカスタマイズしていると足りない部品があるかもしれません。今のうちに早めに対応を考えたいところです。
Cloning the UI of iOS 7 with HTML, CSS and JavaScript | c2prods | Côme Courteault