みかづきブログ その3

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

iOS

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の書き方調査 & まとめ 2016 春

結論 結論を先に書いておくと、当面は、 ページの拡大を止めないとき <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のソースを確認 ブックマークレットをつかう …