みかづきブログ その3

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

iOS

iOS11のSafariからカメラとマイクにアクセスするシンプルでサンプルなコードを書きました。

iOS11がリリース(9月20日)されてから、はや1ヶ月半弱、 iPhone8が発売(9月22日)されてからも、はや1ヶ月半弱、 iPhoneXが発売(11月3日)されてしてから、はや3日が立ち、32ビットアプリが動かなくなるという情報からか、リリース直後は若干苦戦していた…

iPadとかSurfaceとかを業務用のシステムに使いたい場合に他のアプリを使えないように制限をかける方法まとめ 📱

iOS

はじめに かつては業務用の専用機器の一部がiPadとかSurfaceに置き換わっていっています。 例えば、よく行く回転寿司屋はメニューがiPadになってますし、おいしいアップルパイ屋さん「RINGO」のレジはiPad(一部店舗だけかもしれませんが)ですし、サイゼリ…

iOS10でYouTubeをインライン再生&複数同時に再生するサイトをつくれるか検証する 📱

結論 (2本目以降をミュートにすれば)できる! kimizuka.hatenablog.com昨日の検証 で、iOS10であればYouTubeをインライン再生することが難しくないことがわかりました。kimizuka.hatenablog.com以前、PC向けにYouTubeの動画を2本同時に再生するサイト をつ…

iOS10でYouTubeをインライン再生&自動再生&ループ再生を試してページの背景がムービーのサイトをつくれるか検証する 📱

結論 できる! kimizuka.hatenablog.com以前、iOS10のビデオタグの挙動を調べました が、 videoタグを直接使う機会よりも、YouTubeをつかう機会の方が圧倒的に多いため、YouTubeの挙動を調べてみました。iOS10のビデオに関しての仕様を整理すると、 playsinl…

iOS11ベータ版向けにつくったウェブコンテンツのデバックはSafari Technology Previewの手を借りると楽々 😀

最近、iOS11のSafari向けにコンテンツをつくって試してみることが多いのですが、 ウェブカメラをつかうコンテンツを試しているので実機で確認する必要があり、 ライトニングケーブルでMacと繋いでデバッグ しながら開発を進めたいのですが、 通常のSafariで…

iOS11向けにウェブARコンテンツをつくってみました。(マーカーレスの超簡易版) 🏃

追記:(2017/06/09 00:16) 本記事内に掲載している動画キャプチャが、 Apple.Incの開発者利用規約(APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.)に抵触しているというご指摘をいただきました。 掲載内容を不適切と判断し、該当箇所を削除させてい…

GW中に一番活躍したアプリを紹介します。(タクシー配車アプリ編) 🚖

iOS

今年のゴールデンウィークは家族3人がローテーションで風邪を引いてしまい、 連日のように休日病院や小児科に通っていました。我が家から最寄りの小児科、休日病院までは片道1.5km程度。 車を持っていないので、いつもはこどもを抱えて徒歩かベビーカーで通…

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に接続した状態でスリープボ…