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

読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

pageshow/pagehideイベント

Mobile Safariに限らずかもしれませんが、load/unloadイベントがdeprecatedになって、pageshow/pagehideという名前になったようです。load/unloadの動作が不安定だったからでしょうね。新しいpageshow/pagehideはページ遷移でトリガーされます。 アクティブ…

iOS8での不具合について

iOS7まではウェブクリップでWeb Audioを使うとホームボタンと電源ボタンが効かなくなるという致命的なバグありました。 iOS8ではこれは直っているようです。代わりに、ウェブクリップではAudioタグの再生ができないという新たな不具合が見つかりました。 con…

iOS 7ではウェブ(クリップ)アプリでwatchPositionが正常動作

iOS 6では「ホーム画面に追加」したウェブアプリではwatchPositionのコールバックが1度しかコールされないという不具合がありましたが、iOS 7では直っていることを確認しました。 <html> <head> <meta charset="UTF-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>watch location</title> </head> <body> <script type="text/javascript"> navigator.geo…</body></html>

Mobile Safariで好きなタイミングで音を鳴らす

iOS Safariのaudio要素はユーザーイベントで再生をしないと音が出ないようになっています。iOS6でWeb Audio APIがサポートされ、この制約を緩和するノウハウが色々なブログで公開されています。 今回、このノウハウを実際に使うことになったので、CoffeeScri…

Mobile Safariで自動ロックを抑制する

ナビゲーションアプリ、パズルのようなゲームをウェブアプリで作ると、iPhoneの自動ロックを抑制したくなります。ネイティブアプリならidleTimerDisabledプロパティを使うところです。 解はあって、それは10秒以下の短いaudioを鳴らし続けることです。 Mobil…

Mobile SafariでスムーズなBootstrap モーダル

Bootstrap便利ですね。 でも、iPhone, iPadで使うとエフェクトのアニメーションがぎこちなくて重いアプリのように見えます。少し手を入れればスムーズになります。 bootstrap.cssの以下の部分を下のように直せばOK。 .modal.fade { -webkit-transition: opac…

Mobile SafariでBGM鳴らすときの注意事項3点

要素のサイズを0にする iOS Safariではdisplay: noneにしてもaudio要素が200x16の基本サイズを持ち、レイアウトに影響を与えます。 CSSでサイズを0にしておきましょう。 audio { width: 0px; height: 0px; } 先頭から再生を始めるには例外処理を入れておく c…

タッチイベント関連備忘録

TouchEventのTouchesの要素はライブ要素。オブジェクトとして変数に割り当ててもプロパティの値が変わるので、例えば、touchstartで開始の座標を保存したいならTouchesの要素を変数に割り当てるのではなく、そのプロパティの値を割り当てる。 touchmoveのscr…

ソフトウェアキーボードを出現させずにテキスト欄にフォーカスする方法

<body> <input id="target" type="text" /> </body> $('#target').on 'touchstart', (event) -> $this = $(this) event.preventDefault() setTimeout (->$this.trigger 'focus'), 200 簡潔のため、jQuery使ってCoffeeScriptで記述しました。 setTimeoutは200ms程度必要です。150ms程度だとキーボードが出現…

google.maps.places.Autocompleteの不具合対応

Mobile Safari上でGoogle MapsのplacesライブラリのAutocompleteを使う場合、日本語変換の後にEnterを押すと変換前に戻ってしまいます。デスクトップでは起こりません。 デスクトップとMobile Safariの差を調べると、IME変換に対応するtextInputイベントの後…

meta viewportがあると、document.body.scrollLeftにバグあり

(iPadではなく)iPhone Safariでmeta viewportを設定していると、document.body.scrollLeftに値を設定すると、アドレスバーが上部に消えて、クライアントスクリーンの右上がscrollLeft/scrollTopの原点になります。 対処考察中。

apple-mobile-web-app-capableにする際のiPhone5対応

ビューポートでwidthにdevice-widthもしくは相当の数字(320)を設定すると、「ホーム画面に追加」した際に、iPhone5だとフルスクリーンにならずに互換モード表示になります。 <meta name="viewport" content="width=device-width, ..." /> width指定は使わないようにしましょう。 widthはウェブページのレンダリング幅の</meta>…

Dictationとイベント

Mobile SafariのテキストフィールドでDictationを使った場合、oninputイベントは発生しますが、ontextinputは発せしませんでした。Dictationを使って遊んでみました。 http://y-ich.github.com/Aloud/

サイトの後処理にはonpagehideを使う

[2014-09-25 追記] iOS8 Safariではload/unloadがdepricatedになって、pageshow/pagehideという名前になりました。これに伴い、下記で使っていた従来のpageshow/pagehideは廃止。 以下の記事はiOS7もしくはそれ以前の情報です。 iOS Safariではonbeforeunloa…

accelerationIncludingGravityの座標はデバイスに固定

orientationchange後も座標軸は変わりません. なので、表示座標に合わせるため、加速度の座標はwindow.orientationの値から回転変換の必要があります。

touchmoveとmousemove

touchmoveは指が要素とずれても発生し続けるが、 mousemoveは マウスボタン状態に関係なく発生 ポインタが要素からずれると、発生しなくなる。

ウェブクリップのUserAgent

iOS Safariのnavigator.userAgentとオフラインアプリのnavigator.userAgentは異なる。Safari: Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405 Safari/7534.48.3オフラインアプリ Mozilla/5.0 (iPad; …

mousedownハンドラでpreventDefault()を実行すると、focus()が抑制される

オンスクリーンキーボードの出現を抑制する方法を実験中。 上記、方法ではfocus()は抑制されたが、オンスクリーンキーボードは現れた。

textareaのselect()は動作しない

というわけで、 anTextArea.select(); の代わりに anTextArea.selectionStart = 0; anTextArea.selectionEnd = anTextArea.value.length; とする。