UIWebViewでつくるUI

自己紹介 @cocopon 職業: ホビープログラマ・デザイナ Calqum (iPhone) Osciroi (Win, Mac)

Calqum2 近日公開予定 よろしくね!

本日の目標 ★ 「UIWebView、見直したぜ」 ★ 「CSSは最強だった」 ★ 「Calqum2…ゴクリ」

はじめに - なぜUIWebViewを使うのか? Interface Builderでいいじゃない

Webアプリの移植がしやすい

リンク付きのUIが簡単に作れる Twitterのtweet詳細画面

CSSが最強すぎる

あの有名アプリでも Twitter Apple Store Reeder 組み込んでいると思われるアプリ、ほんの一例 Gmail

でも、気をつけて 使わないと…

こんなことに

つくる Safari on Mac / iOS Simulator 本日のコマンド ふせぐ 拡大・縮小 / スクロール / 選択 つかう UIWebView かざる 枠の影 / 文字の影 / グラデーション Retina用画像 / アニメーション

つくる Safari on Mac iOS Simulator

MacのSafariでつくる Mobile Safariとはときどき挙動が異なるので参考程度に JavaScriptの本格的なデバッグはこちらで

開発メニューを有効にする ユーザーエージェントの変更 Webインスペクタの表示

iOS Simulatorでつくる HTMLファイルをドロップできるの、知ってました?

デバッグコンソールを有効にする 設定 > Safari > デベロッパ

デバッグコンソールでできること JavaScriptのエラー確認 console.logの出力

個人的な使い分け レイアウト決め Mac コーディング Mac JavaScript動作確認 Simulator スタイル仕上げ Simulator 総仕上げ 実機

つかう UIWebViewを組み込む

UIWebViewで開く ファイルを開く 文字列をHTMLとして開く - (void)loadRequest:(NSURLRequest *)request; - (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;

UIWebViewから受け取る UIWebViewDelegateを設定して、リクエストを検出する - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest: (NSURLRequest *)request navigationType: (UIWebViewNavigationType)navigationType;

デモ

ふせぐ 拡大・縮小 スクロール 選択

拡大・縮小をふせぐ 全画面前提のHTMLが… 拡大できちゃうとカッコわるい

viewportでふせぐ <meta name="viewport" content="initial-scale=1,user-scalable=no"> initial-scale 初期表示の拡大率 user-scalable ユーザが拡大できるかどうか

スクロールをふせぐ subviewを ったり PrivateAPIを使えばできるけど… JavaScriptで標準の挙動 (=ページスクロール)を抑制 <script type="text/javascript"> document.body.ontouchmove = function(evt) { evt.preventDefault(); }; </script>

選択をふせぐ -webkit-touch-callout リンクの長押しメニュー表示を設定 -webkit-user-select 選択可能かどうかを設定 * { -webkit-touch-callout: none; -webkit-user-select: none; }

かざる 枠の影 文字の影 グラデーション Retina用画像 アニメーション

box-shadow: (inset:内側) X軸ずれ Y軸ずれ ぼかし半径 色; 枠を影でかざる ちょっとの手間で、完成度がぐっと上がる! box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);

文字を影でかざる ちょっとの手間で、完成度がぐっと上がる! text-shadow: 0 1px 0 #fff; text-shadow: X軸ずれ Y軸ずれ ぼかし半径 色; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);

線形グラデーションでかざる -webkit-gradient(linear, 開始点, 終了点, 色1, 色2, ...) -webkit-gradient(linear, left top, left bottom, from(#a9afbf), color-stop(0.49, #6c768e), color-stop(0.5, #444f6e), to(#59637e)) from ▸ to ▸ color-stop(0.49) ▸ color-stop(0.50) ▸

円形グラデーションでかざる -webkit-gradient(radial, 開始点, 開始半径, 終了点, 終了半径, 色1, 色2, ...); -webkit-gradient(radial, 50% 30%, 0, 50% 30%, 300, from(#777), to(#333)); (50%, 30%) ▸ 300

Retina用画像でかざる /* 普通の画像 */ .table-section .indicator { background: url(indicator.png) no-repeat center left; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* Retina画像 */ .table-section .indicator { background-image: url(indicator@2x.png); -webkit-background-size: 8px 12px; } }

アニメーションでござる

アニメーションでかざる #app-logo { -webkit-animation-name: test; -webkit-animation-delay: 10s; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; } @-webkit-keyframes test { 0% { -webkit-transform: translate(0, 0); -webkit-transition-timing-function: ease-out; } 50% { -webkit-transform: translate(0, -50px) rotate(5deg); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: translate(0, 0); } } @-webkit-keyframesでキーフレームを作成 -webkit-animation-nameで、作成したキーフレームを指定

CSSだけでここまでできる(1) • border-radius • box-shadow • text-shadow • -webkit-gradient

CSSだけでここまでできる(2) http://graphicpeel.com/cssiosicons iOS標準アイコン

参考文献 Safari Dev Center

Safari Dev Centerに今すぐアクセス! Safari CSS Reference サポートするCSSを網羅的に解説。 Safari CSS Visual Effects Guide アニメーションについて詳しく解説。 Safari HTML Reference HTMLタグと属性を網羅的に解説。 metaタグの情報はここに。 Safari Web Content Guide タッチイベントの扱いなど、 主にWebアプリを作る観点から、関連機能を解説。 http://developer.apple.com/devcenter/safari/index.action

UIWebViewでつくるUI DOTAPON Software @cocopon http://dotapon.sakura.ne.jp