audio要素のplayイベント、endedイベント、readyStateのおかしな動きに対応す るための足掻き
audio要素のplayイベント、endedイベント、readyStateのおかしな動きに対応す るための足掻き ※この記事の筆者は趣味レベルでしかjavascriptをいじっていないので、以下にある方法は最適解ではないと思う。もっと良い方法があれば教えてほしいです。 html5のaudioを使って音声を再生する際、playイベントやendedイベントがうまく発生しなかったり、Android版ChromeにおいてreadyStateが正常に判断されないことがあって困った。 play、endedイベントのバグだが、コントローラーを使ってる時はいいのかもしれないが、別の要素のクリックイベントから.play()した場合、IE（10, 11で確認）やAndroid版Chromeで発生する。 まず、IEでは2度目の再生時にはplayイベントが発生しないらしい。また、IEやAndroid版Chrome
【JavaScript】position:fixed;対応済！sp-slidemenu.jsで気になっていた箇所を勝手に直した - TokunagaKazuya.tk
ドロワーメニューとかハンバーガーメニューとかスライドメニューとか言われているアレなUIありますよね。それをJavaScriptで再現しているjQueryプラグインやライブラリは沢山あるのですが、動きが悪かったり満足できるものが意外と少なかったんです。そんな中で一番いいなと思ったのが「sp-slidemenu.js」。詳細については本家をご参照下さい。 ただこちらのライブラリ、こちらのコミット以降に細かい不具合が増えてしまったまま、更新自体が数年前に止まっているようでした。とっても素敵なのに勿体ない！！！ということで自分のほうで可能な限り修正してみました。とはいえ結構突貫なので参考程度にして頂ければ幸いです。修正の詳細はdevelopブランチのコミットログに。 【GitHub】https://github.com/tokunagakazuya/sp-slidemenu 【DEMO】http:
hateka’s blog
centOS7を触ったのでメモ。基本的にserviceコマンドやchkconfigコマンドがsystemctlに置き換わった感じ。 デフォルトのDBがMariaDBになってるみたい。MariaDBはmysqlのフォークしたものだから基本は同じでmysqlをベースとして独自機能が追加されてる。 まだDBまわりはよくわかってないので、今は基本的な操作のコマンドを見てる。 大きく変わったのは以下の2つのコマンド ・service ・chkconfig これがsystemctlになった。たぶん普段からサーバを触ってる人にはここが一番の変更点じゃないだろうか。 topとかpsとかはそのままなのでミドルウェアとかサービスの起動、停止、再起動まわりが全部変わった印象。 あとはiptablesがデフォルトでは入っていない。LAMP環境の構築でおなじみのiptablesを無効にする設定が要らなくなった。 も
【番外編】Androidの爆速エミュレータ環境を構築する | DevelopersIO
※追記しました. OSXの方々は注意点もありますので、追記も併せてご覧ください 2012.10.17 Android爆速エミュレータ環境の作り方 Android開発者界隈のTwitter TLで、「Androidのエミュレータが低速で使い物にならないとか言って許されるのは小学生までだよねー。きゃははー」的な会話が繰り広げられていたので、これは知らないのはマズイのでは、という危機感から、一念発起し、爆速Androidエミュレータ環境の構築を試みました Androidのエミュレータが低速で使い物にならないというのは、すでに過去の話だそうです。真の情報強者の方々は、すでに爆速エミュレータでの開発を行っているようです。中には、実機よりも早いので、実機代わりに使ってるという方もおられるようです もうAndroidのエミュレータが遅いなんて言わせない！iPhoneのエミュレータに匹敵する(？)速度を手
Android搭載のブラウザでjavascriptのスクロールイベントの処理が異様に遅い - K52.NIKKI ver3.0
先日公開した「AmazonExplorer」では、スクロールするとAjaxで次のページを勝手に読み込むようにしてるんだけど、どうにも読み込み処理が遅い。遅いどころかまったく先に進まないときもある。 最初、Android端末の性能上、DOMの処理が追いついてないのかと思ったが、いろいろテストしてみたらどうやらスクロールのイベントを拾うのが異様にヘタらしい。 つまり、onclickイベントなどはすぐに拾ってくれるがonscrollイベントをうまく拾ってくれない。jqueryでの$(window).scrollも同様。 しばらく待っても処理されないときは処理されないので、遅いと言うより拾えてないのか？？。何度もスクロールしてると拾ってくれるが、インタフェースとしてはかなりストレスが高くなってしまう。PCのスクロールと違ってタッチしてヌルヌル動かせるということが何かしら処理しづらい原因になっている
iOS・Androidのハイライト表示の指定について。
今回は iOS・Androidのハイライト表示の設定について 紹介します。 （以下 iOS→iOSのMobile Safari、Android→Androidの標準ブラウザ） リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。 その色が設定出来るんです。 今回はCSS３を使った方法とjsを使った方法を紹介したいと思います。 iOS・Androidのハイライト表示の設定について まず初めに。 今回CSS３とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはｊｓを使用するもの、のみになります。 CSS３を使用する方法では、iOSとAndroid別々の方法を紹介しています。 それでは。 CSS３を使ったハイライト表示の指定 まず、CSS３でハイライト表示の設定をするにはこの記述をします。 -webkit-tap-highlight-co
@XSS (一部のブラウザのlocation.hrefがXSSを引き起こしやすいことに関する注意喚起)
@XSS (一部のブラウザのlocation.hrefがXSSを引き起こしやすいことに関する注意喚起) 概要 一部のブラウザのlocation.hrefは、XSSなどのセキュリティ問題を引き起こしやすい値を返します。この挙動により、location.hrefが自分と同じドメインのURLを返すことを前提に書いているコードは全て、正しく動かなくなる恐れがあります。 影響を受けるブラウザ Safari 6未満(Windowsは修正版がリリースされていません) iOS 6.0未満のSafari Mobile Android4.1未満?の標準ブラウザ(Android 2.3.6でテストしました。@bulkneetsさんによると4.1は修正済み、4.0.3は影響を受けるとのことです。@cubedlさんによると4.0.4は影響を受けるとのことです。) 挙動の再現 1. http://l0.cm/atx
Androidのレンダリングでハマったので対応策を書いてみる
Ememo This is a tumblelog, kinda like a blog but with short-form, mixed-media posts with stuff I like. Scroll down a bit to start reading, or a bit more to read more about me. まぁ大したことはしていないのだけど。 * { -webkit-backface-visibility: hidden; }を追加しただけ。 Androidはレンダリング周りが弱く、CSSでアニメーションさせてもあまり綺麗には動きません。でもゲームのようなものだとやっぱり綺麗にアニメーションさせたい。でも・・というジレンマ。 そこで今回の手法を使うと、レンダリング周りが改善されるかもしれない、というメモ。 この方法は、どこかのバグリストで書いてあ
@keyframesとAndroid
@keyframesとAndroid CSS3の@keyframesでアニメーションを作成しているんですがAndroidでかなりバグがあるようです。 transformに複数の値を指定すると動かない @-webkit-keyframes hogeName{ 0% {-webkit-transform:scale(1,2)} 50% {-webkit-transform:scale(2,2) translateY(10px)} 100% {-webkit-transform:scale(1,1) translateY(0)} } サンプル というようにtransformに複数の値が不規則に入る場合Androidでは動作しなくなることがあります。（このサンプルだとscaleの指定が無視される） @-webkit-keyframes hogeName{ 0% {-webkit-transform
KSKソフトウェアテストソリューション | 品質を追求する。信頼できるソフトウェアテストパートナー
これまで主に金融業のお客様に対し、Web・モバイルアプリ開発における 品質保証やセキュリティの分野で様々なプロジェクトを支援してきました。 これまで培ったノウハウを基に、お客様のニーズに寄り添った最適な ソフトウェアテストソリューションで貴社の抱える「品質課題」を解決します。 これまで主に金融業のお客様に対し、 Web・モバイルアプリ開発における 品質保証やセキュリティの分野で 様々なプロジェクトを支援してきました。 これまで培ったノウハウを基に、 お客様のニーズに寄り添った最適な ソフトウェアテストソリューションで 貴社の抱える「品質課題」を解決します。 これまで主に金融業のお客様に 対し、Web・モバイルアプリ開発に おける品質保証やセキュリティの 分野で様々なプロジェクトを 支援してきました。 これまで培ったノウハウを基に、 お客様のニーズに寄り添った 最適なソフトウェアテスト ソリ
iPhone と Android の onOrientationChange タイミングの違い - makogの日記
またスマートフォン対応サイトネタ、Androidネタです。 Androidのブラウザにて。Android 2.2から、iPhoneと同じように縦持ち・横持ちが変わった際に発生するイベント「window.onorientationchange」が使えるようになっているようです。ですが、このイベントが起きるタイミングがiPhoneとAndroidで異なっているようです。 var $win = $(window); var debug = $('#debug'); $win.bind( 'orientationchange', function() { debug.html( debug.html() + 'orient:' + $win.width() + ', ' ); } ) .bind( 'resize', function(){ debug.html( debug.html() + '
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
AIR fo Androidでの機種判定 | android application
AIR fo Androidでの機種判定今日のfxugでGREEの方から教えて頂きました。 URLLoaderで端末の固定パス上にあるbuild.propというファイルを見に行くそうです。 <pre>package { import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLLoaderDataFormat; import flash.net.URLRequest; import flash.text.TextField; public class ProductSample extends Spri
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)
[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版) Androidの所為で工数が増えてウザイとか、AndroidのWebkitはWebkitじゃねぇとか スマホのCSS3関係はどうしてもAndroidをdisる感じの内容になりますね！ 特に明記がないものはすべてWebkitについてです。 見つけ次第順次追加予定。 タイトル変更、増えてきたので目次追加しました。 この記事はiOS5、Android 3以前について記載したものです 【css】 タップ時にz-indexを無視して下の要素に枠がつく(Android) 【html, css】 マルチバイト文字にfont-weight:boldが効かない(Android) 【css】 border-radiusのコーナーがジャギる(Android) 【css】 box-shadow、text-
![[CSS, HTML] スマートフォン(iPhone, Android)ブラウザのバグまとめ(2011年版)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://repopgl.org/
公海555000kk线路检测—首页（欢迎您）
Top app bar – Material Design 3
Distribution dashboard | Platform | Android Developers
ユーザーエージェントによってPCとスマートフォン（iPhone / Android）を振り分ける方法いろいろ