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できるようです。（iOS8.4 iphone6にて確認） DEMO http://jsrun.it/kimmy/q4Ll※ iPhoneでご観覧ください。

以前、 iPhone の Mobile Safari で Audio を再生したときの挙動を調査 してまとめましたが、今回はVideoを再生した際のコントロールセンターの挙動を観察しました。（iOS8.4 iPhone6で確認）kimizuka.hatenablog.com 結論としてはVideoタグを再生した時点で…

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

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

ウィンドウのデバイスオリエンテーションイベントに渡されるオブジェクトのwebkitCompassHeadingにデバイスの向きが 0 ~ 360 ではいっています。0が北、90が東、180が南、270が西のようです。また、webkitCompassAccuracyで精度も確認できます。-1が入ってい…

iOS や Android では 擬似的な clickイベント が用意されており、DOMに振ることができます。 clickイベントが発火する条件はもろもろあるのですが、指を動かしながら画面をタップすると、短めのフリックもclickと判定してくれることがわかります。 しかし、…

1回だけ誤操作でiPhoneアプリを消してしまったことがあって、なにを消したのかすらわからない状態になってしまったのですが、その対策を教えてもらいました。 設定手順 設定 > 機能制限 を ON にする 設定 > 機能制限 > Appの削除 を OFF にする これで機能…

DEMO mobile Safari はキーボードが表示されているときしかkeypressイベントが発火しないということを知りました。 あたりまえといえばあたりまえなんですが、BluetoothキーボードをつなげばUIのキーボードを出さなくてもOKだと思っていたので、ちょっとショ…

個人的に background-attachment: fixed をぜんぜんつかわないので気づかなかったのですが、iOS8でもつかえないんですね。昔つくったコード をiPhoneで確認して気づきました。 CSS html { height: 100%; } body { height: 400%; background: #e3e3e3 url(htt…

kimizuka.hatenablog.comaudioタグでは実現できませんが、Web Audio API をつかえば実装できます。まず、以前つくった Web Audio API のサンプルをiOS用に書きかえます。kimizuka.hatenablog.com JavaScript (function(win, doc) { "use strict"; try { (fun…

JavaScript (function(win, doc) { "use strict"; var audio = doc.getElementById("audio"); audio.volume = 0; // Mobile Safari で効かない doc.addEventListener("click", function() { audio.play(); }, false); })(this, document); DEMO PCのSafariで…

この記事を konashi.js 読み込むとLEDがビカビカひかります。https://itunes.apple.com/jp/app/konashi.js-javascript-html/id652940096?mt=8&uo=4&at=10l16903yukaishop.base.ec

以前、Androidで画像を保存させないために四苦八苦しました がCSSでメニューの表示を止めれることを教えてもらいました。kimizuka.hatenablog.com CSS .touch-callout { -webkit-touch-callout: none; } DEMO iPhoneではばっちりでしたが、Androidには無視さ…

99%迷わない！ Waaaaay!（うぇーい！）方向音痴のための距離と方向だけのナビ＆待ち合わせ Waaaaay!（うぇーい！）Houchimin LLC.ナビゲーション無料目的地の住所を入力すると目的地までの距離と方向を表示してくれるログポーズ的アプリ。 世界観が独特で、…

プロ野球 2014シーズン終了とともにストアから取り下げていたchibadgeですが、2015シーズン開幕とともにストアに返ってきました。chibadge.kimizuka.fm chibadgeとは chibadge（チバッジ）は千葉ロッテマリーンズの現在のスコアをバッジで伝えてくれる世界一…

Safariのリーダー機能の仕様が公開されていないので、探り探り実装してみました。 DEMO http://jsrun.it/kimmy/reader ※ iPhone の Safari で御覧ください つかいかた URLにアクセスするとURLバーに 「Reader View Available」と表示されます。URLの左側のリ…

風邪をひいて声が出ないので Mac の sayコマンド で文章を読み上げて窮地を乗り切った話 - みかづきブログ その3前回は Mac の Sayコマンドを活用しました が、気づいてしまいまいした。人は皆、常にMacを持ち歩いているわけではないということに。 というわ…

iPhoneは本体を横向きにしてランドスケープ表示にすると、Mobile Safari の表示が拡大します。 今回はこの機能をOFFにする方法をまとめます。 テキストの拡大をOFFにする body { -webkit-text-size-adjust: 100%; } または、 body { -webkit-text-size-adjus…

Filters〜無限に増えるフィルター加工で写真や動画がもっと楽しくなるカメラアプリ〜 https://itunes.apple.com/jp/app/filters-wu-xianni-zengerufiruta/id926621140?mt=8&uo=4&at=10l16903インスタグラムやPathのようなフィルターを自作できるアプリです。…

iPhoneのMobile Safariでdocumentに設定したクリックイベントが効かないときの対処法 - みかづきブログ その3昔はiPhoneのMobile Safariでdocumentにクリックイベントが設定できなかったんですが、iOS8.1.2で試したら動くようになってました。 DEMO

基本的には、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); という感じでtouchmoveのデフォルトのイベントを止めればスクロールしません。が。一部Androidではこの設定を乗り越えてページをスクロ…

11月につかってみたアプリです。かなりすくないです。 Facebook Groups Facebookは機能をどんどんアプリ単位に分業してますね。https://itunes.apple.com/jp/app/facebook-groups/id931735837?mt=8&uo=4&at=10l16903 Skype Qik： グループビデオメッセージ …

iPhone、Android共に、touchmoveのデフォルト動作を止めることでページスクロールを禁止することができます。すなわち、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); この記述でページスクロール…

iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告多少問題はありましたが、Safariの表示領域を広くつかう手段としては有効だったminimal-ui。しかし、 iOS 8 Release Notes には、 The minimal-ui viewport property is no longer supported in i…

konashi.js 作業メモ - みかづきブログ その3先週末にまたも konashi をがっつり触る機会があったので気づいたことをメモしておきます。 ログを表示する window.kの中身を見ていて気づきました。 k.log というメソッドが用意されているようです。 // k.log f…

裏面が傷だらけになってしまったiPhoneをなんとかしよう。 - みかづきブログ その3前回は応急処置で済ませましたが、カメラも不調になってしまったので修理に出すことにしました。 なんか色々面倒だったので次回以降のためにメモ。 マイサポートプロファイル…

iPhone6に機種変更してからはや4日。 華麗にアスファルトに落下させてしまい、裏面がボロボロになってしまいました。。。 表面がバリバリになったときの対処法 は以前考えたのですが、今回は裏面用の方法を紹介したいと思います。 バリバリに割れてしまったi…

先日iPhone6を買ってかなりアプリをいれかえました。 なので今月はかなりはやいですが、つかってみたアプリをまとめてみます。 el とても綺麗なゲームです。絵本みたいな雰囲気がとてもよいです。BGMもよいです。 ただ、個人的にはこの手のゲームはバルーン…

JR東日本アプリ 兎に角多機能なアプリです。多機能すぎていまいち使いにくい気がします。 なんでもできるなにかはiPhoneで充分で、アプリは1うに機能に特化させても良いのではないかなと思いました。 個人的にはYahoo!の乗り換え案内が最強だと思ってます。J…