🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

HTML

SVGをcanvas要素で扱う

普通の`img`やら`video`要素なら、`CanvasRenderingContext2D`の`drawImage()`で楽勝なんですが、SVGは画像であって画像ではないので、ひと手間が必要・・・。地味に面倒だったのでメモ。

Safari 10.1でアップデートされたHTML系を試した

ほんとはリリースノートが出てすぐ試したかったんやけど・・。 Safari 10.1 見出しとしてはこの3つ。 Interactive Form Validation HTML5 Download Attribute HTML Media Capture 相変わらず、興味あるとこだけざっくりさわったメモです。

タッチパネル x IEに関する指定たち

IE10とかWin8とかMetroAppとかなんかそういう手の話です。画面のズームを防ぎたくて、 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> こういうの書けばいけるんじゃねー?って思ってたけどいけなかった。</meta>

videoやaudioを扱う場合は、本番と同等のサーバーで開発すべし

とある案件で動画を`video`要素で表示するっていうごくごく普通なことをしてました。ただ、特定の条件が重なると動画がうまく再生されないことがあって、その原因を突き止めたうえでの学びをメモ(˘ω˘ )

browserconfig.xmlとはなんだ問題

某サービスのエラーログを見てての気付きです。 聞き慣れないファイルやなーと思って調べてみたのでメモ。

textarea要素の文字数の扱いについて

textareaの闇を見たような気がした。これは、文字数のカウンターっぽいものを実装するときに気付いて調べたものです。 いわゆるmaxlengthの敷居と、jsから文字列.lengthで取れる値で、文字数のカウントが違う・・ってなったところが事の発端。 20150624追記 …

2015年版: ホームアイコンの指定方法まとめ

調べては忘れを毎回繰り返すのもなんだかなーと思ったので、まとめておきます。 ちなみに、iOS/Androidのことしか書きません。 iOSは5以上、Androidは4以上のOSバージョンを対象としてます。OperaとかMetroとかFireFoxとかは知りません!もっと頑張ってくだ…

HTML5 Conference!

行ってきましたレポ。大学の授業みたいで懐かしい感があったw 言うまでもなく1限は滑り込みセーフです。以下、聞いたやつリスト。 基調講演 Room A: プリンより滑らか。スムーズなアニメーションの作り方。 Room C: Web: Reboot Room E: 2015年これからの日…

compareDocumentPositionとビットマスクとビット演算

部屋とYシャツと私みたいなタイトルになった・・。わかったのかわかってないのか、とりあえず調べたことをメモっておくための記事。

WebAudioAPIさわるならFirefoxのWeb Audio Editorで

職場のとある神エンジニアさんから、最近のFirefoxがイケてるという話を聞き。実際にFirefoxのNightly使ってみてるんですけど、良いですねコレ! Firebugないとどうしようもなかったあの頃のFirefoxとは違うのだよ!というわけで、FirefoxのNightlyで先行実…

HTML5のdata属性をキャメルケースで定義するとどうなるか

jsでは変数名をキャメルケースにしてて、どうせなら目につくとこ統一したいなーと思ったんです。 で、そういえばdata属性って最初からキャメルケースにしたらどうなるんやろー?って。 まあ結論からいうと、ダメですw

img src="" で無駄リクエストが飛ぶ問題

どうなるかっていうのと、どうすればいいかっていうのをメモ。 古いAndroidの特定端末で起こったりするのですが、 このバグ、最近のブラウザではもう解消されてるのかしら? コメントで頂きましたが、依然として起きるみたいです・・。

いま、ブラウザで音声認識するなら

これは、2013/12/28時点での情報です。 ブラウザだと、こういうのがあります。 Speech Input API Web Speech API まあ結論から書くと、今のところはPCのしかもChromeでしか楽しめないみたい。

画像をbase64エンコードして、DataURI化するコマンド

コレ以上どうやってページを軽量化しよう・・って時に検討したいのが画像のbase64化ですね。 いろいろツールもあるみたいですが、Macならターミナルでできちゃう。

画像ボタンでよく使うinput type="image" と "submit"の違い

画像ボタンでformを送信するには、だいたい以下のパターンが考えられると思います。 type="submit"とCssのbackground-image type="image" img要素でJavaScriptから送信 その他要素とCssのbackground-imageでJavaScriptから送信 下2つはもはやなんでもありな…

Html5, Css3関連で最近知ったことのメモ

取り留めもないけれども一応メモメモ。 新しい発見は楽しいんやけど、知らないことが多すぎていかんね! 参考:Events and responding to the user demos classList API 参考:HTML5 classList API jQueryでやってたtoggleClassとかがネイティブのAPIになる…

スマートフォンサイトをコーディングする時の注意など

はてさて、無事に転職しまして、こういうことをやるようになりました。 今までも知識レベルでは持ってたつもりですが、いざやるのはまた勝手が違うわけで。 まだ全然周りも見えてないですが、個人的に気付いた点などをメモ。

Html5のバッテリーAPI

そんなんまで取得できるんですねw まだまだ検討段階+バグあり+動作環境もなんだか制限ありみたいですけど、おもしろそー。 参考:window.navigator.battery - MDN window.navigator.battery var battery = navigator.battery || navigator.mozBattery || …

idセレクタを1つの要素に複数使ってはいけない理由

ふだん何気なく書いてるこいつらですが。 <div id="wrap" class="grid_24">hogehoge</div> どういう時にidをつけて、どういう時にclassを振るのか、いまいち意識してませんでした。 1つの要素にidって2つとか、複数指定したらあかんとは聞くけど、 なんであかんのかっていう疑問が生まれたので調べ…

HTMLのCanvasで、光の玉を降らせる

前回の記事に引き続き、Canvasの勉強。 Canvasで光の玉を降らせる - jsdo.it - share JavaScript, HTML5 and CSSコードは上記リンク参照です。 参考:canvasでキラキラした背景を作る方法 | tech.kayac.com - KAYAC engineers' blog 配列の用途としての考え…

HTMLのCanvasについてのメモ

どうにもこうにも流行りの技術を使ってみたくて。ただ一からやるには初心者には敷居が高すぎるので、先人のコードを読んで、いじってみることに。

Html5のWebStorageについてのメモ

その道の方、ご存知の方にはまったく役にたちません。全然大したことは書いてません!あくまで自分へのメモですです。 Web Storageとは Cookieのすごい版。 ブラウザ閉じても情報を保持できる仕組み。localStorageとsessionStorageの2種類があって、後者はセ…