Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
んっ？−ちゃよて・ちゃよて
We could not find anything for your request! 御要求のWebページ、画像、ファイルが見つかりません。 トップページへ サイトの内容紹介ページへ
LocalStorageがおもいのほか便利すぎたのでまとめ - それマグで！
localStorageを使って見た．食わず嫌いでした．すごく便利ですね cookieで保存するより相当便利です． cookie VS localstorage 比較 Cookieの特長 ドメイン毎にデータが保存される．(SameOriginの原則) Stringが保存される． HTTPリクエストで毎回サーバーに送られる JavaScriptからアクセス可能 有効期限がある LocalStorageの特長 ドメイン毎にデータが保存される．(SameOriginの原則) Stringが保存される． HTTPリクエストで毎回サーバーに送られない JavaScriptからアクセス可能 有効期限が特にない 比較まとめ Cookieの特質から、HTTP通信で送る特性を省いたものHTTP通信で送る必要がないので，Expires（期限）も省略される localStorageの保存方法 js> local
HTML5の新機能が使用可能かどうかを判別するJSコード一覧 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTML5で色々と新機能が登場しましたが、ブラウザの対応状況は未だまちまちです。 こちらのサイトでは、ブラウザが対応しているかを判別する為のJSコードを一覧にしてくれています。 The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything – Dive Into HTML5 軽く抜粋してみます。 audio return !!document.createElement('audio').canPlayType; video return !!document.createElement('video').canPlayType; canvas return !!document.createElement('canvas').getCo
html5のwebStorage(localStorage)でデータを保存する - Web.fla
webStorageとは 主に二つの種類があるみたいですね～。ひとつはlocalStorageともうひとつはsessionStorageです。 sessionStorage : セッションで管理してるのでブラウザを閉じるとデータが消える。 localStorage : ブラウザで永久的に保存できるのでブラウザを閉じても保存されている。 ふたつの違いの細かい話については「ブラウザでストレージ？ Web Storageを使いこなそう」に詳しく書いてあります。 さて、この機能なんですが先ほども説明したようにユーザーが使っているブラウザにデータの保存や追加・削除といったことがJavaScriptで可能となりました。 若干、クッキーにも似ていますが保存できるデータ量も違いますし、localStorageもsessionStorageも基本的には、キー（key）と値（value）をセットとして扱うため
Client-Side DatabaseとLocal Storage - 強火で進め
Client-Side Storage(クライアントサイドストレージ)はリレーショナルDB(SQL文を使うようなDB)。バックグラウンドはSqliteで実装されている事が多いみたいです。 Local Storageはキーバリュー型(キーを指定して値を取得)のDBです。 サンプル Client-Side Storage サンプル <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <meta name="apple-mo
localStorageの挙動と簡単なラッパー - Block Rockin’ Codes
[追記] テストのソースだけを見られる様に、gistに張りました。 gist:542451 localStorageを使ってちょっとやってみたいことが有るので、まずはlocalStorageを色々使って見ようと思ったのですが、思った以上にブラウザごとの挙動に差があって、イベントどころかだだ値を取り出すだけでも、色々気をつける必要があることが分かりました。 以下は、手元の Mac に有った FireFox 3.6.8 Chrome 5.0.375.126 Sagari 5.0 (6533.16) の環境で試した結果です。 格納出来るデータ W3Cの仕様ではJSのオブジェクトであれば一通り格納出来るように定めているらしいですが、現在は単なる文字列しか入らない物が多いようです。 なので、オブジェクトを格納するためには、JSONをシリアライズして入れる形になると思います。 Native JSON
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ このブログでは、HTML5+CSS3+Javascriptなどの情報を定期的に提供していきます。 運営企業：株式会社ニーロク（http://i26.jp/）
JavaScriptから見たCSS。CSSを学ぶという事。（CSS おれおれ Advent Calendar 2012 – 24日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 24日目 CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。 先に結論を申し上げると CSSがあるお陰でJavaScriptが便利に！ JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利！ というお話です。 なおCSSなる単語が出現してきた時点でお分かり頂けると思うが、クライアント側JavaScript、つまりウェブブラウザーで動くJavaScriptが文脈です。Node.jsとかは今回の範囲外。（もちろん、あれも楽しいよね！） あ、あとSVGやらも範囲外です。 断定的に申していても、常々例外はあるものです。 JavaScriptで出来る事、出来ない事 JavaScriptそれ自体が出来る事は、あ
★★★隙間を埋める！フッターをウィンドウ下部に固定する3つの方法 | 株式会社LIG
こんにちは、モモコです。 ページを作っている際に、想定していたコンテンツ量よりも原稿が短く、フッターの下にブラウザとの隙間が空いてしまう事がありました。 このスカスカ感を埋めるべく、フッターをウィンドウ下部に固定する方法を調べたので備忘録も兼ねてご紹介します。 positionを使い、フッターをコンテンツ下部に固定する方法 【HTML】 <html lang="ja"> <body> <div id="wrap"> <header>ヘッダー</header> <div id="contents">コンテンツ</div><!-- contents --> <footer id="footer">フッター</footer> </div><!-- wrap --> </body> </html> 【css】 html,body{ height:100%; } #wrap{ width: 100%
JavaScript で DOMContentLoaded や onload を使う理由、の備忘録 - kanonji’s diary
JavaScript を scriptタグで書く際、JavaScript の処理と html のパースは同じ時間の流れで進みます。 大抵は scriptタグを headタグ内に記述するため、いきなり DOM でアクセスしようとしても、body ですらパースされていません。 html のパースが終わって DOMツリーが出来上がるまで待つ必要があります。 ぶっちゃけ当たり前の話ですが、JavaScript も jQuery などのライブラリを使っていると、この辺を意識しなくなるので、ふと分からなくなる事があります。 なので見れば思い出すようにメモしておきます。 主にアクセス解析用のscriptタグはどこに書くべきか、よく忘れるのでメモ - kanonjiの日記 から、色々と考えていたら、なんだか気になってしまいました。 DOMツリーの完成*1を待ってから処理を始めるためのメソッド docume
iPhone / iPadなどでposition: fixedが利用できる「iScroll」
配布元：iScroll ライセンス:MIT-License iPhone / iPad、Androidなどに搭載されているmobile WebKitではCSSのposition: fixedが利用できませんが、iScrollを利用することでこれらのプロパティを利用したようにヘッダーやフッターの固定が可能になります。 利用方法 まずは、head要素内などで配布サイトよりダウンロードしたライブラリ本体を読み込みます。 <script src="iscroll.js"></script> HTMLでは次のようにコンテンツ部分をwrapperとscrollerというidをつけたdiv要素で包んでおきます。 <body> <header id="header">ヘッダー部分</header> <div id="wrapper"> <div id="scroller"> コンテンツ部分 </div>
書評：仕事でJavaScriptを覚える人に「プロになるためのJavaScript入門」
プログラミング言語の経験がある人がJavaScriptを覚えようとすると、「あれ？ なんか違うぞ？」という経験を何度もするのではないでしょうか。どうも配列は自分の知ってる配列っぽくないし、オブジェクトもオブジェクトっぽくない。 本書「プロになるためのJavaScript入門」はそうした、ある程度のプログラミング知識を持つ人のためのJavaScript入門書としてとてもよく書かれています。以下の一文は、JavaScriptの文法を解説した第2章の冒頭に書かれたものです。 JavaScriptの文法要素は単純に見えて、深く掘り下げていくとまったく違う姿を現すということがよくあります。たとえば、スコープの実体はオブジェクトですし、メソッドは関数です。また、関数は突き詰めるとオブジェクトで、さらにクロージャという側面も持っています。このように、JavaScriptの文法の学習とは「Aだと思った？
WebView 中の HTML のデバッグ方法まとめ
iPhone, Android で WebView を用い、HTML5 + CSS3 + Javascript でアプリを開発するケースは、PhoneGap (Cordova) が登場して以来増えつつあるのではないでしょうか。 HTML 開発には Firebug や Web Inspector といったデバッグツールはもはや必須ですよね。 そこで今回は WebView 中の HTML のデバッグ方法をまとめてみました。 1. Android 全般・iOS4 (実機・シミュレータ)・iOS5 (実機) weinre （ワイナリー）というツールが利用できます。 weinre はウェブサーバとして動作し、そのサーバが提供するスクリプト・ページにアクセスすることで、ブラウザ上でデバッグが行えます。 （なお、この方法は後述する iOS5, 6 においても利用可能です） ・インストール・サーバの起動
scriptタグをdocument.writeで出力する場合の動作 - Backstage of theater.js
jsファイルの動的ロードはポピュラーな話題です。私も自分でdocument.writeで書き出したscriptタグが有効なのを見つけたときは驚きました。 これを利用してASPのincludeみたいなことができないかなと試行錯誤中ですが、どうも無理がある感じです。。。*1 原因の一つに、document.writeされたscriptタグの実行順序の問題があります。これはつまり、ページに書き込まれたタグの順番なわけですが、これがブラウザによって違う場合があるのです。 以下、サンプル。 [test.htm] <html> <head> <title></title> <script src="test1.js"></script> <script src="test2.js"></script> </head> <body onload="document.getElementById('tes
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
jQueryを使ったAjax通信（クロスドメイン編） - おかひろの雑記
jQueryでのAjaxについては実案件でもポツポツ使ってましたが、Ajax呼び出し元とサーバーが同じドメインのケースばっかりで、 サーバーのドメインが異なるケースについては詳しくなかったので、再確認しました。 業務系Webシステムを作ってるとあまり使わない気がしないでも無いですが、例えば他システムのWebAPIをAjaxで呼んだりするかもしれません。 あと、PhoneGapを使う場合は必須になるのではないでしょうか。 以下、サンプルを記述しました。 サーバー側プログラムはSAStrutsですが、他言語でも内容はほとんど変わらないと思います。 同じドメインでのAjaxの例 サーバー側プログラム @Execute(validator=false) public String normalAjax() { String data = "{\"id\" : \"A001\",\"name\" :
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開