JavaScriptでマウスの座標を取得

javascript

マウスの座標は原点をどことするかで値が変わってくる。

  • スクリーン（PC画面）の左上（screenX/Y）
  • ブラウザで表示されている領域の左上（clientX/Y）
  • 表示されているページの左上（pageX/Y）
  • イベント発生元要素の左上（offsetX/Y）

参考書籍にはoffsetX/Yはfirefoxで対応していない、とあったが今は対応しているようだ。
developer.mozilla.org


See the Pen eventarg2 by tamoriinu (@yokoyama) on CodePen.

パララックスのテスト

javascript

パララックス効果のサイトを作るにあたって、動きを検証してみた。
http://tamoriinu.sakura.ne.jp/parallax_test/

使ったプラグインは以下のもの

□jq.easyParallax
https://github.com/rin316/jq.easyParallax/blob/gh-pages/jquery.easyParallax.js

20160604追記
下記サイトにあるように、一緒に使用している jarallaxがjQueryの$.browserを使用しているため、
$.browserが廃止されたjQueryのバージョンでは機能しない。
asa-systems.com

三国志の武将で中国語の発音を覚えるアプリを作りました。

三国志 iOS



にわかにはてな界隈で三国志が盛り上がっているのでビッグウェーブに乗っかってみる。

三国志にはまっていくと原作を中国語で読みたくなると思うけど、これは根気がいる。
なのでまずは登場人物の名前くらいは中国語で読めるようになりたい、と思って作成したのが以下のiOSアプリです。

□発音三国志〜三国志の武将で中国語の発音を覚えるアプリ〜
https://itunes.apple.com/us/app/fa-yin-san-guo-zhi/id1076979220?l=ja&ls=1&mt=8

音声はネイティブの方にお願いしました。
何より自分のために作ったものではありますが、以下の2chのスレのように
三国志の登場人物を中国語読みしたいと思っている人は少なくない、と思うのです。

□いい加減、三国志の英雄達を中国語読みしようぜ
http://kohada.2ch.net/test/read.cgi/gamehis/1183471176/

ここをきっかけに中国語の勉強をするのもよいかと思います。



gulpfile.js設定（browserSync）

javascript 
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('serve', function(){
	browserSync.init({
		server: {
			baseDir: "src"
		}
	});

	gulp.watch("src/**", reload);
});



gulp.task('default', ['serve']);