はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

HTML

JSで横スクロールeventを検知するメモ

JSで横スクロールeventを検知するメモ デフォのscrollやtouchmove eventでは縦スクロール・横スクロールの区別ができない. なので,Custom Eventを使って横スクロールのみのeventを作成してそれを検知する処理についてのメモ. 動作確認した環境 Chrome JS…

link要素でpreloadを使って非同期にファイルを読み込む

link要素でpreloadを使って非同期にファイルを読み込む link要素でpreloadを使って非同期にファイルを読み込むメモ. link要素でpreloadを使って非同期にファイルを読み込む preloadとは 現在の対応状況 resource hint 使用例 読み込み後,即時実行(Async Lo…

JSP(formデータ)とJava Servletプログラムの連携

JSP(formデータ)とJava Servletプログラムの連携 JSP(formデータ)とJava Servletプログラムの連携する方法をメモ。 JSP(formデータ)とJava Servletプログラムの連携 環境 JSPとServletの関係 Formとは? データの送信を行うためにformタグを使用 Fromタグで…

HTML5 WebStorage まとめ

HTML5 WebStorage まとめ WebStorage(sessionStorage、localStorage) についてまとめておきます。 HTML5 WebStorage まとめ 試したブラウザ環境 WebStorage とは ストレージの最大容量 対応ブラウザ WebStorage が対応しているかの判定コード WebStorage の…

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS]

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS] png, jpg, svg などでスプライトシートを作っておけば、 SpriteSheetクラスとSpriteクラスでスプライトアニメーション を生成できる。 EaselJS のSpriteSheet, Sprite を使って…

EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS]

EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS] EaselJS 0.8.0 から仕様が変わっているようなのでメモ。 以下の記事が日本語で参考になります。 FN0811001 - 変換行列を数学的に捉える - Flash : テクニカルノート FN1308001 | Ease…

EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS]

EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS] Display Object の基準点(regX, regY) を変えている場合、 とMatrix2D.translate がその分ズレるようなのでメモ。 EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS] Create…

CreateJS でSVG画像を扱う

CreateJS でSVG画像を扱う CreateJS でSVG を扱うときのメモ。 CreateJS でSVG画像を扱う CreateJSのバージョン CreateJSでSVGを描画 PreloadJSでSVGの読み込み 読み込み成功時のコールバック Bitmapインスタンスにして描画 Bimapインスタンスの生成 URI か…

SVGのpreserveAspectRaitoとCanvasのdrawImage

SVGのpreserveAspectRaitoとCanvasのdrawImage SVGの preserveAspectRatio と ブラウザによってCanvas のdrawImage の仕様が違ったのでメモ。 SVGのpreserveAspectRaitoとCanvasのdrawImage ブラウザ環境 SVG のpreserveAspectRatio preserveAspectRatioプロ…

oEmbed API の値を取ってくるjQuery プラグインを作ったよ

oEmbed API の値を取ってくるjQuery プラグインを作ったよ はてなブログを書くときに、URL をコピペすると、 URL のみのリンク タイトル付きリンク 埋め込みリンク が生成されると思います。 この機能が結構便利で、 はてなブログ以外でも使いたいと思ったの…

CSS設計を学んで、拡張性と保守性に強いCSSを書こう[メモ]

CSS のガイドラインまとめ[メモ]

CSS のガイドラインまとめ[メモ] CSS の各ガイドラインをまとめておきます。最強のガイドラインを作りたい方は参考にどうぞ。 ※ OOCSS, SMACSS, BEM などのCSS設計とは、また違ったガイドラインの話になると思います。 CSS のガイドラインまとめ[メモ] Googl…

Animate.css を使ってみる

Animate.css をってみる Animate.css を使ってみたのでメモ。 Animate.css は、JavaScript を使わず、CSS のみでアニメーション効果を付けることができます。 animate.css 公式 Animate.css をってみる サンプル Animate.css CDN 使い方 参考リンク サンプル…

meta http-equiv="Refresh"で、HTMLのみのリダイレクト

meta http-equiv="Refresh"で、HTMLのみのリダイレクト meta タグのhttp-equiv="Refresh" で、 HTMLのみでリダイレクトができます。 meta http-equiv="Refresh"で、HTMLのみのリダイレクト サンプル コード 注意点 参考リンク サンプル 5秒後に、このブログ…

Canvas で東京電力の電力使用状況を可視化してみた

Canvas で東京電力の電力使用状況を可視化してみた Canvas の棒グラフ、円グラフの描画 + 東京電力の電力使用状況API を組み合わせて、可視化してみたのでメモ。 なお、他の電力会社の電力使用状況データを取得できないか調べてみたところ、 yahoo の電力使…

SVG1.1 SVG 内部でJavaScirpt を動かす

SVG1.1 SVG 内部でJavaScirpt を動かす SVG では、内部にJavaSciript(JS) を書くことができます。 したがって、animate などよりも複雑なアニメーションなどを行うことができます(その分重くなると思いますが。。)。 SVG1.1 SVG 内部でJavaScirpt を動かす…

SVG1.1 で変形・アニメーション

SVG1.1 で変形・アニメーション SVG も、CSS3 で扱えるようなtransoform やanimate を使うことができます。 それらについて、まとめておきます。 SVG1.1 で変形・アニメーション 変形(transform) サンプル コード アニメーション animate サンプル コード an…

SVG1.1 グループ化について(g, symbol, defs)

SVG1.1 グループ化について(g, symbol, defs) 前回は、SVG で扱える基本図形の話でした。 今回は、SVG1.1 で使えるグループ化についてのメモです。 SVG の各図形は、パワポのグループ化のように、まとめて扱うことができます。 SVG1.1 グループ化について(g,…

SVG1.1 の基本図形のメモ

SVG1.1 の基本図形のメモ 昨今のレスポンシブ時代に見直されている SVG ファイルの基本的な図形描画を試したので、それについてのメモです。 SVG1.1 の基本図形のメモ 簡単な概要 対応環境 SVG ファイルの読み込み 基本図形 四角形(rect) サンプル コード 表…

JavaScript で加速度センサーの値を取ってみる

JavaScript で加速度センサーの値を取ってみる motiondevice のイベントで取れる加速度センサーの値を取ってみました。 JavaScript で加速度センサーの値を取ってみる サンプル コード コード解説 X, Y, Z軸 加速度 accelerationIncludingGravity(生の加速…

JavaScript で位置情報を取得してみる

JavaScript で位置情報を取得してみる JavaScript の位置情報取得API geolocation を使ってみたのでメモ。 JavaScript で位置情報を取得してみる サンプル コード geolocation について geolocation に対応しているかチェック getCurrentPosition watchPosit…

FileAPI でカメラを起動し、Canvas上に画像を描画させる

FileAPI でカメラを起動し、Canvas 上に画像を描画させる File API でカメラを起動し(今のところPC では画像選択のみ)、その画像をCanvas 上に描画させます。 なお、iPhone Safari では、カメラで撮影したような 2[MB]以上の画像は、そのままではCanvas に…

JavaScript でUserAgent を用いた端末判別

JavaScript でUserAgent を用いた端末判別 UserAgentを使ったモバイル、タブレット、PC を判別するものです。 なお、MDNでは、UserAgent は読み書きできるので、UserAgent による端末識別は推奨されてないようです。 <a href="https://developer.mozilla.org/ja/docs/Web/API/NavigatorID/userAgent" data-mce-href="https://developer.mozilla.org/ja/docs/Web/API/NavigatorID/userAgent">window.n…</a>

FileAPI で画像を読み取り、Canvas 上に画像を描画

FileAPI で画像を読み取り、Canvas 上に画像を描画 FileAPI で画像を選択またはドラッグ&ドロップで画像を表示 - はしくれエンジニアもどきのメモ の時は、<img> タグで画像を表示させてましたが、今回は、FileAPI で読み取った画像をCanvas 上に表示させてみます…

Canvas 基礎(線・図形・テキスト)

Canvas 基礎(線・図形・テキスト) Canvas を触ってみたのでメモ。 Canvas 基礎(線・図形・テキスト) 線・図形 ブラウザがCanvas に対応してるかチェック 四角形(塗りつぶしなし) 四角形(塗りつぶしあり) 一部clear する四角形 線の太さ(幅)を変え…

FileAPI で画像を選択またはドラッグ&ドロップで画像を表示

FileAPI で画像を選択またはドラッグ&ドロップで画像を表示 FileAPI を用いて、画像を選択またはドラッグ&ドロップで、画像を表示させるものをつくりました。 また、画像のwidth, heightとDataURLを表示させるもの FileAPI で画像を選択またはドラッグ&ドロ…

おすすめダミー画像生成サイト[メモ]

おすすめダミー画像生成サイト ウェブサイト制作に役立ちそうなダミー画像を生成サイトを知ったのでメモ。国産のようです。 おすすめダミー画像生成サイト 紹介 テスト 参考リンク

IE8 以下をHTML5 の表示に対応させる

IE8 以下をHTML5 の表示に対応させる IE8 以下をHTML5 の表示に対応させる IE8 以下をHTML5 の表示に対応させる CodePen 参考リンク IE8 以下をHTML5 の表示に対応させる IE8 以下ではHTML5 に対応していない。なので、IE8 以下でもHTML5 に対応させるために…