要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
32. //set Full Screen without StatusBar var ua = navigator.userAgent.toLowerCase(); $.browser.android = /android/.test(ua); $.browser.iphone = /iphone/.test(ua); var portraitHeight,landscapeHeight; window.onload = function(){ ! $("html,body").height("1000px"); ! if($.browser.iphone){ ! ! $("body").css("position","relative"); ! } ! setTimeout(function(){ ! ! scrollTo(1,0); ! ! setTimeout(function()
[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい
[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると 高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。 でも隠した方が表示領域が増えるので何とかしたい。 単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが… ※以下全てWebKitの話です。 screenとwindowの高さに関する値が違う やっぱり一筋縄ではいかなかった。 2011-10-04 1st – jsdo.it – share JavaScript, HTML5 and CSS 直接見る Androidだと screen.height = screen.availHeight = window.innerHeight win
![[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい](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)
perfume.js iPhone, iPad に対応させた - 音の鳴るブログ
http://mohayonao.herokuapp.com/perfume3 Perfume のモーションデータを使って JavaScript で踊るやつ。Safari や iOS では動かなかったんだけど修正して動くようにした。（Windows版の Safari では動かないみたい） やったこと 動かなかった最大の原因はオーディオファイルの形式で、公式で配布されている wav を ogg に変換して使っていたのだけど、Safari は ogg に対応していないらしいので mp3 も用意した。 それだけで一応は動くようになったのだけど、BVH のデータが iPhone で読むには大きすぎて（1つにつき2MBくらいある）ダメな感じだったので、フレームを間引いて小さくしたモバイル版BVHを作った。PCに比べるともっさりしているけど、動くから良い。 3D処理自体は three.js でやってい
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:
initTouchEventにおけるAndroidとiOSの引数違い - KAYAC Engineers' Blog
こんにちは。毎日欠かさずAndroidと心で対話をおこなうHTMLファイ部の高橋です。入社4週目にしての初投稿です。 UIのタッチ操作が絡むJSのテストで、タッチイベントを生成する際のハマりどころをエントリします。 きっかけ 先日、JsTestDriverでタッチイベントの生成をした際、Androidだけイベントが生成されず何のエラーも出ないという事象が発生。 その答えは「selenium」の中にありました。 events.js#443 | selenium // Android's initTouchEvent method is not compliant with the W3C spec. // Android's initTouchEvent method is not compliant with the W3C spec. // Android's initTouchEven
DraftPadとMyScriptsでより快適なブログ更新環境を作る！ 〜 AmazonHtmlによる作例 - matuダイアリー
先週、「MyScripts」というすごいiOSアプリが登場しました。 MyScripts 1.0 カテゴリ： 仕事効率化, ユーティリティ 販売元： Unit Kay - Takeyoshi Nakayama 執筆時の価格：￥350 簡単にいうとJavaScriptのためのエディタであり、実行環境なのですが、個人的には 作成したJavaScriptを外部から直接実行できる(直接というとちょっと語弊があるかもしれませんが…) JavaScriptの出力を外部に転送できる ところが特に凄いと思いました！ これによりSafariを介さずともJavaScriptが起動可能になり、結果を好きなアプリで処理することが可能になったりします。 つまりiPhoneでブログを書くのがより楽になることが予想されます( ^ω^ )ﾆｺﾆｺ 今日は、 DraftPad(MyScripts起動) -> MyScrip
H2O Blog., 「JavaScriptだけで作る、Titanium Mobile iPhone/Androidアプリ開発入門」が超良書
Titanium Mobileを学習したくて、書籍を購入したりWebの情報をあさったりしているのですが、秀和システムさんから出ている『JavaScriptだけで作る、Titanium Mobile iPhone/Androidアプリ開発入門』が超良書でした。 280ページ程度という多くはないページ数ながら、Titanium MobileのインストールからApple Developer Networkへの登録の方法、JavaScriptの入門、Titanium Mobileらしいサンプルプログラムの作成が3本と、デバッグ手法、ストアへの出品方法と、全体がうまく網羅されています。 そして、素晴らしいのは取り上げている3本のアプリ。ストップウォッチと、RSSリーダー、アルバムアプリと、使って楽しいサンプルを、丁寧な解説で作り上げていきます。 Webビュー、カメラ、Googleマップと、スマートフ
iPhone で 「position:fixed」をスムーズに実現する 「Scrollability」
しかし、残念ながらiOS4.Xは position:fixed; は指定できません。そこで紹介したいのが「Scrollability」です。「Scrollability」は JavaScript で要素が画面最下部へ固定できます。
スマホ用JavaScriptフレームワーク5つ＋1を徹底研究（1/5） - ＠IT
スマホ用JavaScriptフレームワーク5つ ＋1を徹底研究 jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは アシアル株式会社 鴨田健次 2011/6/22 スマートフォン向けJavaScriptフレームワーク／ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI（ユーザーインターフェイス）パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。 本稿では、jQuery Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。 ■ PCサイト向けJavaScriptフレームワークについて PCサイト向けJavaScriptフレー
【ハウツー】HTML＋CSS＋JavaScriptでiPhone/Androidアプリ開発「PhoneGap」 (1) HTML＋CSS＋ＪavaScriptでiPhone/Androidアプリを開発 - PhoneGapとは | エンタープライズ | マイコミジャーナル
Notobiは11月1日(米国時間)、PhoneGapの最新版であるPhoneGap 0.9.2をリリースした。PhoneGapはクロスプラットフォーム・モバイルアプリケーションの開発フレームワーク。デベロッパはHTML＋CSS＋JavaScriptを用いて、iPhone/Android/BlackBerry/Symbian/Palmのネイティブアプリケーションを開発できる。各デバイスのモーションセンサやカメラ、GPSにはPhoneGapにて提供されているJavaScript APIをもちいて操作する。同ライブラリはThe "New" BSD LicenseおよびThe MIT Licenseのデュアルライセンスのもとで公開されているオープンソースソフトウェア。 PhoneGapでのスマートフォン別機能対応表 - PhoneGap Supported Featuresより抜粋 iPhone
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
forked: コンテンツがwindow.innerHeightより小さい時にアドレスバーを隠す - jsdo.it - Share JavaScript, HTML5 and CSS
http://www.phonegap.com/
HugeDomains.com