読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

iPhoneでページを開いているブラウザがSafariかどうか判定したいという想い。 😎

iOS

Safari以外のブラウザ(アプリのWebViewとか)で開かれた際に、Safariで開き直して欲しいという要望をよく受けるので、愚直にUserAgentで判定を試みました。 まずは、各ブラウザのUAをまとめます。 Safari mozilla/5.0 (iphone; cpu iphone os 10_2_1 like m…

iOS10.2でdocumentに張ったmousemoveが発火することがある 😭

仕様かバグかは調べてないのですが、iOS10.2では発火することがありました。詳しい発生条件はわかりませんが、挙動を見るに、少なくとも、 touchstart => touchend の間に touchmove を挟まない touchstart => touchend の間隔を0.1秒程度以下にする の2つが…

解約したiPhone6をアクティベートする(au編)

iOS

先日 iPhoneSEを購入し、UQモバイルに乗り換えた ことによって、余ったiPhone6ですが、下取りには出さずに検証機として活用することにしました。kimizuka.hatenablog.com なので、一旦初期化したところ... アクティベートできなくなりました!(T_T) auで…

フラットデザイン、マテリアルデザインを目コピーする(スライダーUI編)

年末にアドベントカレンダーで こちらの記事 を執筆させていただいたのですが、それからというものアプリっぽいUIをCSSでつくることにハマっています。techblog.kayac.com 以前から、トグルボタンとか、kimizuka.hatenablog.comドロワーメニューとか、kimizu…

iPhoneのSafariのデフォルトの挙動(ボタンをタップした際の色、テキスト選択、長押しで開くメニュー)をリセットしたいという想い

結論 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; } でOK。こちらのページ で検証しました。(iOS10.1のiPhone6を使用して確認)http://jsrun.it/kimmy/ITBo ボタンをタップした際に薄暗…

画面いっぱいのWKWebViewを設置しただけのアプリをつくる

iOS

ウェブフロントを生業としていて、大体のことをSafariにウェブページを表示させることで解決してきた私ですが、ときどきどうしてもiPhoneアプリをつくる必要が出てくるときがあります。プッシュ通知をつかいたいときとか、ランドスケープで固定したい時とか…

iPhoneのMobile Safariでユーザーきっかけじゃないwindow.openが効かないとき

JavaScript window.open("http://kimizuka.fm"); 最小限のコードで混焼しました。 ページ読み込み時にwindow.open();を叩いても、デフォルトだと効きません 特にエラーも出ないです。 DEMO http://jsrun.it/kimmy/Mxk7 原因 ポップアップブロックがONになっ…

iPhoneをPCにつないだ時に自動でiTunesを起動させない設定をする

iOS

PCは会社支給のもの、iPhoneは私物をつかっているため毎回警告が表示されていました。(PCを認証していないため)警告が出るだけならまだしも、このアラートのOKを押さないと、iTunesの終了もままならず大変困っていたのですが、「この iPhone を接続してい…

iOS10のiPhoneのmobile Safariではビデオ要素(videoタグ)をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様

iOS10でビデオをインライン再生する kimizuka.hatenablog.comこれまで、iPhoneのmobile Safariでビデオをインラインするためには、 videoのplayを叩かずに、currentTimeを操作してCanvasにレンダリングするという涙ぐましい努力 をしてたりしたのですが、 iO…

iOS用のカスタムDatePickerをつくりました

See the Pen Custom DatePicker for iOS by kimmy (@kimmy) on CodePen.フォームをCSSでカスタムするのはなかなか骨が折れる作業なので、 inputタグを透明にしてしまい、上にDOMを置くことで編集しました。 iPhoneでご確認ください。 http://codepen.io/kimm…

iPhoneのカメラで撮影した画像の回転を補正してSafariにプレビューをし、リサイズ・トリミングをフロントエンドで行いたいという想い

iOS6でファイルアップロードが可能になってから、「iPhoneのカメラで撮影した画像のリサイズ、トリミングをフロントエンドで行いたい」という想いは持ち続けていました。しかし、それを実現するためには、 iOS画像リソース制限問題 Exifで回転して表示してし…

改めてiOSのSafariが表示できる画像サイズ(リソース制限)を確認する

iOS

自分の記憶が確かなら、昔は こちらのページ にSafariに表示することのできる画像の大きさの制限について書いてあった気がするのですが、ひさしぶりに見返したら見当たらなくなってます。developer.apple.comjpgは32メガピクセルまで、png、gifは5メガピクセ…

iPhoneのSafariでダブルタップを無効にする(iOS10でもどうしてもuser-scalable=noを有効にしたい場合とか)

iPhoneのSafariで表示されているページをダブルタップをするとページが拡大します。 metaタグでページの拡大を止めている場合はページがスクロールします。http://jsrun.it/kimmy/AJce ※ iPhoneで見てくださいダブルタップによるページの拡大を止めつつ、ペ…

iPhone の mobile Safari で video を再生し終わった後にビデオプレーヤを閉じ、mobile Safari に戻す方法

iPhoneでは videoタグのplayを叩くと、ビデオプレイヤーが立ち上がりビデオが再生されます。昔の僕は、なんとかSafari内で再生できないものかと インラインで再生する方法 を探りましたが、最近は考え方が変わり、ビデオを再生し終わった後にSafariに戻って…

Safariのページをアプリ化してホーム画面に登録した際、URLバーを非表示にするとキャッシュがめっちゃ強くなる

結論から書くと、めっちゃキャッシュが強くなります。 URLにクエリをつけたりハッシュをつけたりしてもキャッシュがクリアされません。 なんならホーム画面から削除して登録しなおしても、Safariのキャッシュ削除してもキャッシュが消えませんでした。 キャ…

iOS9.0でapple-mobile-web-app-status-bar-styleが効かない!

ホーム画面に登録したウェブページのステータスバーの色を変更しようと、 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> と指定しても効かずに、「何故だ!?」と思っていましたが、iOS9.3にアップデートしたら効くようになりました。</meta>

ナウでヤングなviewportの書き方調査 & まとめ 2015 春

結論 結論を先に書いておくと、当面は、 ページの拡大を止めないとき <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> ページの拡大を止めるとき <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" /> と書いていこうと思います。 viewportと…</meta></meta>

iPhoneを初期化するはめになって得たもの失ったもの

iOS

kimizuka.hatenablog.com先日iPhoneを出荷時の状態に戻さざるえない状況に追い込まれた わけですが、その後3週間で2回初期化せざる得なくなる事態がたて続けに起こりました。 そこから得たもの・失ったものをまとめようと思います。 失ったもの 昨今クラウド…

iPhoneのSafari(mobile Safari) にて localStrageにアクセスできないときに疑うべきこと

プライベートブラウズになっている Safariには履歴を残さないモード(プライベートブラウズ)という機能が備わっており、プライベートブラウズモードの状態でlocalStrageに書き込みを行おうとするとエラーを吐きます。 有名ドコロだと、少年ジャンプ+にアッ…

スマートフォンブラウザのリサイズイベントのタイミングを探る

iOS9.3のiPhone6、Android6.0のNexus 5Xをつかってスマートフォンブラウザのリサイズイベントのタイミングを調べました。 リサイズイベント発火タイミング デバイス回転時 デバイスのオリエンテーションを変化させるとブラウザの理財図イベントが発火します…

iOS9でviewportがおかしいときはshrink-to-fit=noを設定すると良いらしい

初期表示時にがたついたり、initial-scaleがうまく効いてない感じのとき、 <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1" /> を、 <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" /> という感じにすると治ることがあるようです。ページ内に巨大なDOMがあった際、shrink-to-fitを設定していないと、巨大なDOMの大き…</meta></meta>

imageタグのsrcset属性をつかって複数の画像のソースを切り替える

ひょんなことから Apple の Safari HTML Reference を読んでみて知りました。developer.apple.comimage要素のシンタックスのところに、 <img src="img.jpg" srcset="img_HD.jpg 2x, img_sm.jpg 100w, img_smHD.jpg 100w 2x"> と書いてあって、srcset属性ってなんだろうと調べ始めたのがきっかけです。 srcset属性とは imageタグに複数のソースを…

iPhoneを起動しても繰り返しアップルマークが表示されるだけで一向に起動しなくなったから泣く泣く出荷時の状態に戻しました。

iOS

iPhoneを起動しても繰り返しアップルマークが表示されるだけで一向に起動しなくなってしまいました。スリープボタン + ホームボタン 同時押しも効かず、どうしたもんかと思ったのですが。 ライトニングケーブルでiTunesの入ったPCに接続した状態でスリープボ…

Upload to App Store... でアプリをアップした際に The resulting API analysis file is too large. というワーニングが表示される

iOS

Xcode7からアプリをアップロードした際に The resulting API analysis file is too large. というワーニングが表示されました。 The resulting API analysis file is too large. 翻訳すると、 得られたAPI解析ファイルが大きすぎます よくわかりませんが、審…

This application is modifying the autolayout engine from a background thread, which can lead to engine corruption and weird crashes. This will cause an exception in a future release. に負けずにSwiftでHTTPリクエストしてUITextViewのテキストを差し替える

iOS

HTTPリクエストでスコアをゲットしようとした場合です。 Swift let URL = NSURL(string: "{URL}") let request = NSMutableURLRequest(URL: URL!) request.HTTPMethod = "GET" let task = NSURLSession.sharedSession().dataTaskWithRequest(request, comple…

Xcode で Validate した際に Missing iOS Distribution signing indentity for AppName とエラーが出る

iOS

Xcode(7.2.1)で発生しました。 キーチェーンから期限の切れた Apple WorldWide Developer Relations Certification Authority をしたところ解決しました。

Swiftでアプリケーションバッジを表示する

iOS

いままでObject-Cで開発していたのですが、Swiftに乗り換えようと思います。 // 通知の許可を取る let settings = UIUserNotificationSettings(forTypes: UIUserNotificationType.Badge, categories: nil) UIApplication.sharedApplication().registerUserNo…

iOS版Chromeのページスクロール中のJSの動きを調べました(48.0.2564.87)

kimizuka.hatenablog.com先日、iOS版のChromeがアップデートされたということで再度調べました。こちらの記事 とあわせてご確認ください。 検証方法 スクロール中にsetIntervalが動くか確認 こちらのコード をブラウザで開く ページをスクロールしながら観察…

iPhoneアプリのアイコンにつくバッジの大きさと位置を目視で調べました

chibadge.kimizuka.fmかつてchibadge(チバッジ)のアプリアイコンをつくったとき、 デザイン 実機に移してバッジをつけて確認 調整 2に戻る という感じでデザインを調整していました。 それがとてもめんどうなので、バッジのついた状態をプレビューするツー…

ページスクロール中のJSの動きを調べてまとめました(iPhone6 iOS 9.2.1 にて確認)

一昔前はページスクロール中はJSが止まってしまうことがあたりまえだったiOSのブラウザ。 なのでスクロール連動のサイトとかを実装するときはいろいろ大変でした。(自前でスクロールを実装したりしてました) しかし、最近のSafariはスクロール中にもJSが動…

iOSシミュレータでソフトウェアキーボードを表示する

iOS

iOSシミュレータですが、いつのまにかフォームとかにフォーカスを当ててもソフトウェアキーボードが表示されなくなってました。Hardware > Keyboard > Connect Hardware Keyboard のチェックを外したところ表示されるようになりました。 関連記事 kimizuka.h…

iOSのSafariでエスケープしたURLをクリップボードにコピーする

iOS

SafariのURLをコピーするのなんて、URLバーを長押ししてコピーするだけでしょ?と思うかもしれません。 しかし、日本語URLをエスケープしてコピーしたい場合、こちらのコピーボタンがその機能を持っています。具体的に言うと、Wikipediaの日本語のトップペー…

iPhoneでビデオプレーヤーを立ち上げること無く、Safari内でムービーが流れているようにみせる

iPhoneでvideoタグのplayを叩くと、ビデオプレイヤーが立ち上がってしまいますがそのままブラウザ内で見たいというケースもあると思います。 そんなときにつかえるようなつかえないような技を紹介します。(iOS9.0.2 の iPhone6 では動きました) 用意するも…

iPhoneでフォームが入力中のときにページを遷移しようとした際にアラートを出す

kimizuka.hatenablog.com遷移しようとした際にconfirmを出すことは簡単なのですが、キャンセルを押した際、どのような処理が適切なのかが思いつきませんでした。 本当は遷移をキャンセルしたかったのですが、それはできず。 次点として一旦遷移後にlocation.…

iOS9のコンテンツブロックを試す

iOS

iOS9で話題になっていたSafariのコンテンツブロック機能。その実力を簡単に調査してみました。 コンテンツブロックとは iOS9にアップデートすれば、それだけでコンテンツブロック機能がつかえるようになると思っていたのですが、実際はそうではありません。 …

iPhoneアプリ研究記 2015 ver. 秋

iOS

夏のことは忘れてました。 ハコスコストア ハコスコストアHACOSCO, Inc.エンターテインメント無料ハコスコで楽しめるコンテンツがてんこもりです。 ピーティックス イベント見つかる・使えるPeatix (ピーティックス)Peatix Incエンターテインメント無料意外…

iOSでfont-sizeが16px未満のインプット要素はフォーカスを当てたときに自動で拡大される

iOS

最近教えてもらいました。 iOSでfont-sizeが16px未満のインプット要素はフォーカスを当てたときに拡大されるようです。 ただし、viewportでuser-scalable=no的な感じで拡大縮小を止めるとこの機能もOFFになります。 DEMO

iOS8とiOS7ではサブピクセル(小数点以下のピクセル)のレンダリング結果が異なる

ドット絵でランニング - みかづきブログ その3kimizuka.hatenablog.comcodepen.ioこちらの記事 のコンテンツをつくっているときに気づきました。 scssの変数にいれていたのでうっかりしたのですが、こちらのコンテンツ、$DOT_GAP を 1 / 2 にしてつかってい…

iOSシミュレータでスクリーンショットを撮る

iOS

command + s もしくは、 File > Save Screen Shot でスクリーンショットが撮影できます。 関連記事 iOSシミュレータの導入方法 iOSシミュレータ導入方法 - みかづきブログ その3kimizuka.hatenablog.com iOSシミュレータの操作方法 iOSシミュレータの基本的…

apple-touch-iconで指定した画像にベーシック認証をかけると反映されなくなる

iOS

iOS の Mobile Safari ではページをホーム画面に追加することができます。 その際、ホームアイコンは、 <link rel="apple-touch-icon-precomposed" href="画像のパス" /> で指定できるのですが、その画像にベーシック認証がかかっていると反映されなくなります。apple-touch-iconが表示されない場合は確認してみましょう。</link>

iOS の Mobile Safari でページを開くときにキャッシュをつかったときをハンドリングする

前回の記事 を書いていて思い出したのですが、iOS の Mobile Safari はブラウザバック、ブラウザフォワードでページ遷移した際、遷移先のページが初期状態になっていないことが多々あります。iOS の Mobile Safari で 画面遷移時にローディングをいれる - み…

iOS の Mobile Safari で 画面遷移時にローディングをいれる

iOS

DEMO http://jsrun.it/kimmy/4dhL JavaScript (function(win, doc) { "use strict"; doc.querySelector(".btn").addEventListener("click", function(evt) { var that = this; evt.preventDefault(); doc.querySelector(".loading").classList.add("on"); //…

iOS7.X, Android4.Xではbody要素に overflow: hidden をあてても効かない

DEMO http://jsrun.it/kimmy/kFam 効きません。 1つ要素をかませれば効くようになります。 DEMO http://jsrun.it/kimmy/h0mF

JavaScriptであたり判定をつくろう その6

JavaScriptであたり判定をつくろう その5 - みかづきブログ その3kimizuka.hatenablog.com約1年ぶりに改良しました。 ポイント1 jsdo.it HTML5-Gamesをつかってスマートフォンからの操作を実現しました。 ポイント2 willHitを実装し、次の移動で当たり判定が…

Mobile Safari で ウェブページのソースを確認する

iOS

Macと接続する MacのSafariの「環境設定」 > 「詳細」 > 「メニューバーに開発メニューを表示」にチェックを入れる MacとiPhoneをライトニングケーブルで接続 MacのSafariの「開発」から自分の端末を選択しSafariのソースを確認 ブックマークレットをつかう …

iOSで -webkit-overflow-scrolling: touch をつかうと上に要素がかぶっていてもスクロールしてしまう。

iOS7.1, iOS8.1, iOS8.4 で確認しました。 HTML <div class="box"> <div class="img"></div> </div> <div class="mask"> </div> CSS .box { overflow: scroll; -webkit-overflow-scrolling: touch; } .img { width: 1000px; height: 1000px; background: url(http://jsrun.it/assets/y/S/0/t/yS0tr.jpeg) center center no-repeat; …

iPhoneでテキストボックスからフォームをsubmitする

iOS

iPhoneでもテキストボックス内で改行ボタンを押すとsubmitできるようです。(iOS8.4 iphone6にて確認) DEMO http://jsrun.it/kimmy/q4Ll※ iPhoneでご観覧ください。

iPhone の Mobile Safari で Video を再生したときのコントロールセンター挙動

iOS

以前、 iPhone の Mobile Safari で Audio を再生したときの挙動を調査 してまとめましたが、今回はVideoを再生した際のコントロールセンターの挙動を観察しました。(iOS8.4 iPhone6で確認)iPhone の Mobile Safari で Audio を再生したときの挙動まとめ -…

iPhone の Mobile Safari で Audio を再生したときの挙動まとめ

iOS

Mobile Safari で Audioを再生する方法は大きく、Audioタグ をつかう方法と Web Audio API をつかう方法があります。 2つの方法には微妙な違いがあって、いままでもちょいちょい検証してきたんですが、ここらで1つの記事にまとめておこうと思います。※ 検証…

ホームボタンを押してSafariを裏にまわしたときにAudioを停止する

iOS

audioタグをつかってAudioを再生した場合、別タブを開いたりSafariを閉じたりしてもAudioはバックグラウンドで再生し続けてしまいます。今回はこの対策を3つ考えました。 DEMO(未対策なAudioタグ) ※ iPhoneでご観覧ください 対策A: blurイベントでaudioをp…