人気ブログランキング | 話題のタグを見る

自作自演

Firefox の話題を中心に Web 関係の話も扱うつもりの雑記。だった。
zisakuzien.exblog.jp

Top

画像の naturalWidth と naturalHeight とれるかな

naturalWidth、naturalHeight 便利ーって言っていたら
取れない時もあるよ。 と言われたので確認してみました。
使ったブラウザは Firefox 18 です。


■仮説
DOM の解釈後から画像の読み込みまでは、
naturalWidth、naturalHeight が取得できないのではないかと予想しました。
表示できるところから表示して、画像は大きいかもしれないから後から読み込む、
という方がユーザに親切というか、遅い回線はそんな感じに見えるので。
従って、DOMContentLoaded と load イベントそれぞれの発生時点で取得できるか確認します。


■下準備
ローカルで検証すると、画像がすごい早さで取得できてしまいそうなので
PHP で決まった秒数 sleep してから応答するスクリプトを用意しました。
参考・PHP/画像のレスポンスを返す - 俺の基地

// 遅延秒数 (0未満か指定なしなら1秒にする。0秒の指定はありにしておく。)
$seconds = (int)$_GET['sec'];
if ($seconds < 0) $seconds = 1;
sleep($seconds);

header('Content-Type: image/png');
readfile('./hiyoko-01.png');
exit();

PHP 5.4 以上が入っていれば、ビルトインウェブサーバでさくっと試せます。
書いたスクリプトのあるディレクトリに移動して、
php -S localhost:8000
とかすればサーバが立ち上がります。
PHP: ビルトインウェブサーバー - Manual


■検証用 HTML と JavaScript
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>画像の naturalWidth と naturalHeight とれるかな</title>
</head>
<body>
<script>
var listener = function(evt){
// ブログの都合でドットが全角になってるが実際は半角
var image = document.getElementById('image');
var out = [];
out.push(evt.type);
out.push(new Date().toString());
out.push(' width: ' + image.naturalWidth);
out.push('height: ' + image.naturalHeight);
console.log(out.join('\n'));
};
window.addEventListener('DOMContentLoaded', listener, false);
window.addEventListener('load', listener, false);
</script>
<img id="image" src="http://localhost:8000/?sec=3" />

</body>
</html>


■結果
DOMContentLoaded
Tue Feb 05 2013 22:33:54 GMT+0900 (JST)
width: 0
height: 0

load
Tue Feb 05 2013 22:33:57 GMT+0900 (JST)
width: 500
height: 625

DOMContentLoaded イベントの発生時点では 0 となってしまっていますが、
load イベントの発生後はきちんと使った画像のサイズを取得できています。

ただ、画像が一度読み込まれていると(普通にリロードすると)
DOMContentLoaded の段階で、前回読み込んだ画像のサイズが取得できました。
ページのリロード前に、画像を差し替えサイズを変えてやると
DOMContentLoaded では前回読み込み時のサイズ、
load では実際表示した画像のサイズになりました。
# by tokage-shippo | 2013-02-05 22:49

MySQL のデータを取捨選択して別環境へコピーしたかった

お手軽に。ご利用は計画的に(これでよかったのか…?)。
mysqldump で全部ダンプすれば良いのでは? → コピーしたくないデータがありました><


■ユーザについて

select Host, User from mysql.user;
で現在いるユーザを確認する。

show grants for 'ユーザ名'@'サーバ(localhostとか)';
必要なユーザについて、上記コマンドを叩いて GRANT 文を取得して
コピー先でそのまま流す。


■データベースについて

show create database DB名;
で create 文が取得できるのでそのままコピペ。


■テーブルについて

mysqldump -uユーザ名 -p DB名 テーブル名 > ダンプファイル
とかすると、テーブルごとにダンプがとれるので、それを投入する。

-d オプションで、データ抜き(テーブル定義のみ) にできる。
--skip-lock-tables でロックをせずにダンプを取れる(ダンプしている間に更新されうる)。

が、--single-transaction の方が整合性のとれたデータが取得できるらしいので
--skip-lock-tables は使わない方が良さそう。
PHPのテクメモ ≫ Blog Archive ≫ mysqldumpで「when using LOCK TABLES」と怒られる
MySQL :: MySQL 5.1 リファレンスマニュアル :: 4.9.2.1 バックアップ ポリシー
# by tokage-shippo | 2013-02-01 21:11

HTML と JavaScript と Android 4 で位置情報を取得した感想文

■環境
GALAXY S III SC-06D (Android 4.0.4)

■コードについて
Geolocation の利用 | MDN
Geolocation API-HTML5のAPI、および、関連仕様
などを参考に…

対応していないブラウザは
if (!navigator.geolocation) {
alert ("geolocation services are not supported by your browser.");
return;
}
みたいな感じで処理を分けておく。
(※ブログの都合で全角スペース入れてます…)

1回だけ取得なら navigator.geolocation.getCurrentPosition
定期的に監視するなら navigator.geolocation.watchPosition
を使う。
どちらも成功時に呼ばれるコールバック関数に
位置情報のオブジェクトが渡される。
失敗時の方はエラーに関するオブジェクトが渡される。
navigator.geolocation.getCurrentPosition(
function(position){
success(position);
},
function(error){
fail(error);
},
{maximumAge:0}
);
こんな感じにしておくと、
位置情報の有効期限なし(都度取得)で取得できる。

■位置情報がキャッシュされる?
getCurrentPosition だと位置情報がキャッシュされてしまう、
という話を聞いて、書いて試したものの
第三引数に {maximumAge:0} を渡すようにしたからか、Android 4 だからなのか、
ちゃんと都度位置情報を取得しなおしているように見えた。
(数秒あけて、繰り返し実行した際に、位置がずれることがあった。)
Android 2.3 や iPhone ではキャッシュされてしまうものがあるのかないのか、
検証できていないのでわからない。

■GPS をオンにしても位置情報が取得できない
Galaxy S3 だけなのかそうでないのかわからないが
設定 → 位置情報サービス → GPS機能を使用 にチェックを入れても
エラーコード 2 (The last location provider was disabled) となって
位置情報が取得できなかった。
設定 → 位置情報サービス → 無線ネットワークを使用 にチェックを入れたところ
GPS機能を使用 のチェックの有無にかかわらず位置情報を取得することができた。

■取得した位置が明らかに遠いことがあった
関東某所の駅・電車内で実行したところ、大阪の位置情報が返されることがあった。
その際、同じような場所で3分ほどの間に11回実行し、5回が大阪の位置情報だった。
GPS による位置取得でなかったのが原因だと思う。
ただ、GPS を使用して位置情報を取得するかどうかは
端末側の設定次第で HTML や JS を書く側からは指定できないので
サービスに組み込む場合は、位置情報が違うかもしれませんよ、と
あらかじめユーザに伝える必要がありそう。

■感想
位置情報を単純に取得して、さらに Google Maps API で
地図上に表示するだけならとても簡単。お手軽。
ただ、位置情報の取得は一瞬では終わらないので
待ち時間をどうユーザに示すかは、工夫した方が親切かもしれない。

また、どのような設定をすれば位置情報の取得ができるのか、
どの程度の精度での取得になるかはわかりづらいと感じた。
GPS のオンオフは画面上部を"引っ張る"とボタンが出てくるが、
「無線ネットワークを使用」に相当するものは一度ホームに戻って
設定から選ばないといけなくてオンオフの切り替えが面倒だと感じた。

最後に、位置情報はある程度誤差が出ることを考えると
検証は移動しながら行うことになるので
検証しながらコードをいじるのが難しくてやりづらいと思った。
# by tokage-shippo | 2013-01-28 23:12 | プログラミング

MySQL 5.5 で外部キー制約使おうとしたらエラーではまった。

ALTER TABLE `hoge_table` ADD FOREIGN KEY ( `id` ) REFERENCES `hoge`.`fuga_table` (`id`
) ON DELETE SET NULL ON UPDATE CASCADE ;

みたいにして、外部キー制約を追加しようとしたらエラーになりました。
原因は、NOT NULL のカラムなのに ON DELETE SET NULL を指定していたため。
原因がわかるまで手間取ったのでメモしておきます。

上記の SQL を実行したところ、下記のようなエラーが出ました。(xxxの部分は英数字)
ERROR 1005 (HY000): Can't create table 'hoge.#sql-xxx_xxxx' (errno: 150)

エラーメッセージで検索したところ、下記のページがヒットしました。
InnoDBの複合FOREIGN KEY制約について - Yet Another Hackadelic
FOREIGN KEYを張る際に怒られた時はSHOW ERRORSよりもSHOW INNODB STATUSを見ましょう。
とのことなので、SHOW INNODB STATUS をやってみました。
mysql> SHOW INNODB STATUS\G
ERROR 1064 (42000): You have an error in your SQL syntax;
check the manual that corresponds to your MySQL server version
for the right syntax to use near 'INNODB STATUS' at line 1

エラーになりました。調べたところ、
SHOW INNODB STATUS

SHOW ENGINE INNODB STATUS
となったそうです。
MySQL :: MySQL 5.5 Reference Manual :: 14.3.14.2 SHOW ENGINE INNODB STATUS and the InnoDB Monitors

SHOW ENGINE INNODB STATUS\G を実行して、
「LATEST FOREIGN KEY ERROR」の項目を確認したところ、
「You have defined a SET NULL condition though some of the
columns are defined as NOT NULL.」とあったので、エラー詳細がわかりました。
# by tokage-shippo | 2013-01-15 17:50 | プログラミング

nicoWnnG IME のユーザ辞書のインポートを使ってみた。

nicoWnnG IME - GORRY's Website
Android の IME で、ベル打ちができるので愛用しています。

当然(理由は後述)なのですが、地名の変換が弱いと感じる時があります。
なので、ユーザー辞書に地名を登録することにしました。

ユーザー辞書 - nicoWnnG IME
タブ区切りのテキストファイルを辞書としてインポートできます。
設定画面 → 日本語ユーザー辞書 → 画面上部のボタンの右の方の 辞書読込 ボタン

どのような所から地名をとれば良いのか考えましたが
地名を入力する場合、乗り換えを調べるとか「○○駅で待ち合わせ」とか、
駅に関わることが多いので、駅名を使うことにしました。

JR東日本:駅情報検索
えきから時刻表 東京都(路線名一覧)
JR東日本とえきから時刻表のサイトは、一覧にふりがなも載っているので、
これを見てふりがなと漢字の組を取得しました。

で。まず、手当り次第に都内を走る路線の駅を辞書登録したところ
「ひがし」などと入力すると、変換候補の始めの方が地名で埋め尽くされることとなりました。
登録すればするほど、たくさんの地名で埋もれます。
おそらく、そういう理由もあって地名は多く入っていないのだと思いました。
欲張らず、よく乗る路線に絞って登録したところ、ほどほど快適になりました。

また、作ったテキストファイルは、DropBox に入れておいたら
割合楽にスマホから取得できました。
もしかしたら Bluetooth でも良いのかもしれません。
# by tokage-shippo | 2012-11-01 00:04 | その他
Mozilla Firefox ブラウザ無料ダウンロード

about this...

書き手の名前は 晴柳祐志 と言います。


リンク

Twitter
いつか何とかしたいサイト

最新のトラックバック

検索

S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
XML | ATOM

会社概要
プライバシーポリシー
利用規約
個人情報保護
情報取得について
免責事項
ヘルプ