読者です 読者をやめる 読者になる 読者になる

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

情報・Web系技術の勉強メモ・備忘録です。

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

JSP(formデータ)とJava Servletプログラムの連携 JSP(formデータ)とJava Servletプログラムの連携する方法をメモ。 目次 環境 JSPとServletの関係 Formとは? データの送信を行うためにformタグを使用 Fromタグでデータを渡す サンプル:Formタグから取得し…

HTML5 WebStorage まとめ

HTML5 WebStorage まとめ WebStorage(sessionStorage、localStorage) についてまとめておきます。 目次 試したブラウザ環境 WebStorage とは ストレージの最大容量 対応ブラウザ WebStorage の種類 データの保存とロード WebStorage上のデータの削除 ブラウ…

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

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

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 がその分ズレるようなのでメモ。 目次 CreateJSのバージョン 基準点(位置)の変更と translate 参考リンク…

CreateJS でSVG画像を扱う

CreateJS でSVG画像を扱う CreateJS でSVG を扱うときのメモ。 目次 CreateJSのバージョン CreateJSでSVGを描画 PreloadJSでSVGの読み込み 読み込み成功時のコールバック Bitmapインスタンスにして描画 参考リンク 関連リンク

SVGのpreserveAspectRaitoとCanvasのdrawImage

SVGのpreserveAspectRaitoとCanvasのdrawImage SVGの preserveAspectRatio と ブラウザによってCanvas のdrawImage の仕様が違ったのでメモ。 目次 ブラウザ環境 SVG のpreserveAspectRatio preserveAspectRatioプロパティが未指定の場合 CanvasのdrawImage …

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

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

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

CSS設計を学んで、拡張性と保守性に強いCSSを書こう[メモ] schoo 授業「CSS設計を学んで、拡張性と保守性に強いCSSを書こう!基礎〜実践導入」のメモです。 schoo.jp OOCSS, BEM, SMACSSの概要をまとめておきます。 目次 CSS設計とは CSS設計の三大メソッド …

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

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

Animate.css を使ってみる

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

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

meta http-equiv="Refresh"で、HTMLのみのリダイレクト meta タグのhttp-equiv="Refresh" で、 HTMLのみでリダイレクトができます。 目次 サンプル コード 注意点 参考リンク サンプル 5秒後に、このブログへ飛ぶサンプルページです。 <a href="http://ca…

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

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

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

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

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

SVG1.1 で変形・アニメーション SVG も、CSS3 で扱えるようなtransoform やanimate を使うことができます。 それらについて、まとめておきます。 目次 変形(transform) アニメーション animate animatetransform animatemotion 参考リンク 関連リンク

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

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

SVG1.1 の基本図形のメモ

SVG1.1 の基本図形のメモ 昨今のレスポンシブ時代に見直されている SVG ファイルの基本的な図形描画を試したので、それについてのメモです。 目次 簡単な概要 対応環境 SVG 画像の読み込み 基本図形 四角形(rect) 表示範囲(viewport と viewbox) 線(line) 円…

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

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

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

JavaScript で位置情報を取得してみる JavaScript の位置情報取得API geolocation を使ってみたのでメモ。 目次 サンプル コード geolocation について getCurrentPosition watchPosition 成功時 失敗時 オプション 参考リンク サンプル PC からも試せますが…

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 を触ってみたのでメモ。 目次 線・図形 テキスト 参考リンク 線・図形 codepen.io

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

FileAPI で画像を選択またはドラッグ&ドロップで画像を表示 FileAPI を用いて、画像を選択またはドラッグ&ドロップで、画像を表示させるものをつくりました。 また、画像のwidth, heightとDataURLを表示させるもの 目次 実際のページ コード 参考リンク 実際…

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

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

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

IE8 以下をHTML5 の表示に対応させる 目次 IE8 以下をHTML5 の表示に対応させる 参考リンク IE8 以下をHTML5 の表示に対応させる IE8 以下ではHTML5 に対応していない。なので、IE8 以下でもHTML5 に対応させるためには、js ファイルを読ませるせる必要があ…