復習, Element の CSS値を調べる getComputedStyle / currentStyle知らないくせに知ってるふりをしてました。 ちょっとはまったので、 次使うとき困らないようにおさらいしました。 Element の CSS値を調べる getComputedStyle / currentStyle。 get … 続きを読む → 投稿 復習, Element の CSS値を調べる getComputedStyle / currentStyle は イナヅマTVログ に最初に表示されました。
【消せないよね】iOS, AndroidのAddress bar(URL Text Field)制御のおさらい
iOS, Android ブラウザのURL Text Field(Address bar)を非表示（みたい）にするためのゴニョゴニョした話をまとめてみました。 個人的にはブラウザのURL Text Field(Address bar)があってもイイと思うけど、アプリには無いから「消して」なオーダーは少なからずあったりするので調べたりしました。 でもOSバージョンやブラウザ種類で対応方法が変わったりし、その度に右往左往させられブログ記事も追記につぐ追記になったりして分かりにくくなってしまいました。 現時点での最新版 Android Chrome, iOS Safari どちらも scrollBy / scrollTo で非表示のように見せかける手法は使えなくなっています。 結論は、消したりはダメだってとこに落ち着くんだけど何か方法があるのかなぁー 2012.09.25 Memo, [iOS]
iOS Chrome を判別したい – userAgentを使ってね
スマホサイト作っていても iOS Chrome はサポート対象外にしてました。 Google 製品との連携とか iOS Chrome には便利な機能はありますが、ブラウザとしては所詮 Safari の劣化版だし… Googleは悪くないです、Appleの頑固な方針のせいです。 サポートしないと言っても… iOS Chrome だけに発生する不具合を解決するために判別コードを書くことにしました。 iOS 8.2 Chrome userAgent 5.0 (iPhone; CPU iPhone OS 8_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/41.0.2272.58 Mobile/12D508 Safari/600.1.4 (000457) CriOS が入っていると iOS Chrome みたい。
Canvas 2Dライブラリを作ろうとして感じたこととDisplayObject
誰の役にも立たないゴミな記事です。 しかも長い。 ボンクラ脳でせっかくあれこれ考えたので書くけど、読まなくてイイよ。 Canvas API Canvasはなかなかステキなヤツです。 Flashの代わりにはなれないけど「近い」ことはできそうです。 iOS 8でWebGLも使えるようになり大きな足かせが取れ、ますます可能性が広がってきたと思います。 でも、Canvas APIを使って何かを作ろうとしてもローレベルなのでラップされたライブラリがあったりすると便利だったりします。 Canvas始めました – Canvas APIで遊んで（遊ばれて）わかったことをだらだらと Canvas APIで悪戦苦闘しているオレがいます。 おれメモ, Canvas系JavaScriptライブラリ一覧 この記事に書いた他にもたくさんのライブラリが公開されています。 UnityもVersion 5でCanvas書き
【Canvas練習ノート】CanvasをPNG画像ダウンロード – toBlobとsaveAs
canvasをPNG画像へキャプチャしダウンロード。 PNG画像へのキャプチャは canvas.toBlob を使います。 ダウンロードは FileSystem API で行います。 canvas.toBlob HTMLCanvasElement のメソッド toBlob は Blobオブジェクト（画像）を返してくれます。 ただ残念なことに Firefox しかサポートしておらず、polyfill メソッドを用意する必要があります。 w3c: File API#blob stackoverflow: Which browsers (and versions) support the Canvas.toBlob method? MDN: HTMLCanvasElement Example: Save toBlob to disk with OS.File (Chrome Context On
Android SC-04E の標準ブラウザはChromeのようでChromeでない様子
今さらですが… 2013-05 あのドコモ「ツートップ」の一つとして発表されたSamsung製の「GALAXY S4 SC-04E」の標準ブラウザの話。 Chromeもインストールされていますが初期状態では標準ブラウザがホーム画面にど〜〜んといらっしゃいます。 この標準ブラウザのUAは以下のとおりです。 Mozilla/5.0 (Linux; Android 4.2.2; ja-jp; SC-04E Build/JDQ39) AppleWebkit/533.19 (KHTML, like Gecko) Version/1.0 Chrome/18.0.1025.308 Mobile Safari/535.19 まるでChromeのよう。 でもかなり古い！ 同時にインストールされているChromeは20.0.1410.58です。 出荷状態のまま調べました。 う〜んChrome 18あたりとも微
Objective-C事始め – XMLをパースしてNSDictionaryへ
2013-08時点の書きかけ記事の再編集投稿です。 Xcode 4.6.3, iOS 6 当時の情報になります。 XMLパースには DOLDataSDK-iOS / XMLReader を使用しました。 github: USDepartmentofLabor / DOLDataSDK-iOS 感謝です。 NSError *error = nil; id data = [[[ExampleWebService alloc]init] requestWithURL:url parameterWithString:parameter didFailWithError:&error]; // XML parse NSDictionary *resultDict = [XMLReader dictionaryForXMLData:data error:&error];
[JavaScript] IE 11ブラウザ判定方法
ブラウザ判定に userAgent 使っちゃダメなのは知ってはいるけどもって話です。 IE 11 が登場しどうしても切り分けたいことがあったのでメモっておきます。 IE 11 userAgent IE 11 の userAgent から msie の文字が無くなっています。 なんてことしてくれるんだよー！と思ってしまいます。 Windows 8.1 + IE 11 (VMWare Windows 8.0 update to 8.1) “Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; Tablet PC 2.0; rv:11.0) like Gecko” Tablet って入ってた。 そんなもんなんかな。 Internet Explorer Dev Center: Compatibilit
おれメモ, Canvas系JavaScriptライブラリ一覧
Canvas用のライブラリでたまにしか使わないのとか名前すら忘れてるし、あそこのTutorialステキじゃんてのもどこだったか忘れてしまうボンクラ脳のためのメモ。 2D CreateJS 王道。 さすがに忘れること無いけど。 Paper.js 最近どかすかアップデートされてる。 むにむにした動きがCanvasらしく無くキモくて好感度高。 Processing.js パフォーマンスが出ない、つうか出すノウハウを持ち合わせていないので使いづらい。 Processing資産をそのまま使えるのは魅力。 ちょこちょこっとモック作ったりするのにいいのかな。 でもそのモックを別のライブラリで実装し直すの大変そう。 Cocos2d-html5 Cocos2d-x派生プロジェクト。 使ったこと無いけど、どうなのと気になってる。 Starling JS 未だに姿を表さない幻のJavaScriptライブラリ。
覚えた、Android ChromeのWebGLを有効にする方法
Android 4.x Chrome だと WebGL が見れるとうわさが… 早速three.jsのexampleを見たけど、Browserは対応してるみたいだけどGraphic boardが対応してないよ、みたいなメッセージが表示されて真っ黒な画面のまま。 ガセだったかと思ったけど、Chromeなので設定いじればどうにかなるかな〜と思い、URLに chrome://flags と入力してみた。 見にくい画面をスクロールしていくと、あったあった「WebGL を有効にする Android」って項目が。 有効にして「今すぐ再起動」。 見れた！ 見たのはこれ。 http://threejs.org/examples/webgl_buffergeometry.html 15fps出てるなー WebGLえらいなー 機種は Galaxy SC-03D (LTE) Android 4.0.4 こんな面倒
[JavaScript] requestAnimationFrame, cancelAnimationFrame はこう使ってる
以前、requestAnimationFrame, cancelAnimationFrame のネット上の下位互換実装コードを紹介する記事を書いてました。 requestAnimationFrameを下位互換実装するために 実践に投入しようとするとおかしなところもあったのであらためて投稿しました。 今、使用しているコードです。 // animationFrame var lastTime = 0; var vendors = [ 'ms', 'moz', 'webkit', 'o' ]; for( var x = 0, limit = vendors.length; x < limit && !window.requestAnimationFrame; ++x ) { window.requestAnimationFrame = window[vendors[ x ]
[JavaScript]iOS, AndroidのOrientation（画面向き）を知る方法
iOS, Android端末の画面の向きにあわせてゴニョゴニョしてみたい。 縦(Portrait), 横(Landscape)になった時の画面幅を取得しようとしています。 本来であればイベント “onorientationchange” という便利なものがあるので使えばいいんだろうけど、一部Androidで取得できないケースもある様子、で困ったなぁと… 無駄を承知でこんな風にしてみました。 jQueryを使用しています。 $(window).on('resize orientationchange', function () { console.log(window.innerWidth); }); resizeだけでも良かったと思うのですが、HTML, CSSのどちらかが悪いのかiOSでresizeイベントをうまく取得できません。 仕方なくorientationchangeも監視対象にし
Canvas始めました – 多角形（矢印）を描いてみる
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var w=60,h=60,w0=w*0.5,h0=h*0.25,x=w,y=h; context.setTransform(1,0,0,1,0,0); context.translate(x,y); context.beginPath(); context.fillStyle = 'red'; context.moveTo(-w0,-h0); context.lineTo(0,-h0); context.lineTo(0,-w0); context.lineTo(w0,0); context.lineTo(0,w0); context.lineTo(0,h0); context.lineTo(-w0,h0); con
Canvas始めました – 塗りを線形や円形のグラデーションで
グラデーションで塗るの巻。 線形グラデーション createLinearGradient(x, y, width, height) グラデーション範囲を指定 x:int, y:int, width:int, height:int HTML var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var gradient = context.createLinearGradient(0,0,100,0); gradient.addColorStop(0,'rgb(255,0,0)') gradient.addColorStop(0.5,'rgb(0,255,0)') gradient.addColorStop(1,'rgb(0,0,255)') context.fillSty
Canvas始めました – 移動しましょ
移動するの巻。 setTransformでも行えるが、引数を簡略化した関数としてtranslateが用意されている。 translate(x, y) HTML var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = '#0000ff'; context.fillRect(10,10,50,100); context.translate(50,0); context.fillStyle = '#ff0000'; context.fillRect(10,10,50,100); context.translate(50,0); context.fillStyle = '#00ff00'; context.fillRect(10,10,50,
Canvas始めました – キャプチャ画像を書出し
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = "#ff0000"; context.fillRect(50,30,250,100); window.open(canvas.toDataURL(), "canvasOutput","left=0,top=0, width="+canvas.width+",height="+canvas.height+", toolbar=0,resizable=0"); toDataURL([data Type:String]):String data TypeデフォルトはPNG, image/png 戻り値（Data URI形式） data:image/png;base64,… 書出し画像タ
jQuery Mobile リリース、主役登場でどうなるモバイルJavaScriptライブラリ
予告通り10月、正確には2010-10-16 21:00頃（日本時間）に jQuery Mobile がリリースされました。 jQuery Mobile Alpha 1 Released まだ 1.0a1 (Alpha 1) なのでどうなのって感じですが、発表以来かなりホットな様子らしいです。 まだ Alpha 1 ですが、iOS, Android, BlackBerry V5 & V6, Symbian Platform の Native Browser には “A High Quality” 対応とのこと。 現時点の有力なスマートフォンには対応しちゃってるよ、らしいので人気ライブラリになることは間違いないでしょう。 Mobile Graded Browser Support A High Quality. A browser that’s capable of, at minimum,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ステキ！Andrew Hoyerさんの実験サイト、JavaScript, CSS3, SVGとか
[JavaScript]Memo, navigator.geolocation.getCurrentPosition API
Canvas始めました – 塗りパターン : createPattern