言われますまい

WEBエンジニアのかいはつにっし

canvasのtoDataURLがfirefox,safari,ieで遅延する?件

ネットで調べてもうまく情報を見つけられないので確かなことがさっぱりわからないんですが、どうやらfirefox,safari,ieでtoDataURLが遅延する。

遅延するといっても0.01秒かそこらのこと。

しかしそのままtoDataURLしてから、それを再度Canvasに書き出すと何も表示されない。

Chrome,operaだと問題なく表示された。

 

何故なのだろうか。

 

0.01秒(念のため1秒)setIntervalでわざと処理を遅らせてから再度処理を進めたところきれいに表示された。

強引ではあるけど、回避策でどうとでもなるが、非常に気持ち悪い。

何かわかればいいが。


わりかし基本的なことだった。

 imageの画像読み込みが非同期で行われることが原因だった。

なので、setIntervalは強引すぎるし、タイミングもずれる。

ただしくは、onloadイベントリスナを設定してから

画像読み込みを始めるのが良い。

終わったタイミングでonloadイベントにとぶ。

これが正解。

 

しょうもない話ですみません。。。

 

FireFoxではaタグのDownload属性がbuttonタグに囲まれると効かなくなる。

FireFoxではaタグのDownload属性がbuttonタグに囲まれると効かなくなる。

choromeではbuttonタグで囲んでいようが関係ないが、firefoxではなぜbuttonタグのありなしで動かなくなる。 IEも同様に動かなくなる。

調べたが情報がでてこなかった。

単純に、aタグの中にbuttonタグをいれこむとうまくいった。 chromeで開発を進めていたので、ぎりぎりになって気がついてあせった。

開発日誌の挫折

業務時間のうち30分前後をブログ執筆に充てるつもりで書き始めたんですが全然時間足りないし
このために残業するのはおかしいしで非常にうまくいかない。


今折り紙の続きを書いてたんですけど、うまくまとまらなくて記事にならずで
挫折弱音日誌を書いているという。


毎日欠かさず書いている人を尊敬します。。。

スクラッチでjavascriptでのシミュレーションを作る

フルスクラッチでシミュレーションを作ります。
シミュレーションと言ってもいろいろありますが、ショッピングサイトで商品をシミュレーションする時のアレです。


今回は全てcanvas上で行います。
フラッシュではライムラインの制御が簡単に実装できますが
全てjavascriptツール等も何も使いませんので、若干骨がおれます。


少し制御を楽にするために、canvas複数にわけます。
canvas上でアニメーションしようとすると、全消しと描画の繰り返しになりますので
canvasをわけることによって、全消し時に消えない部分を作ることができるので
制御が楽になります。


canvas上では、正方形を描画しても描画した瞬間にそれは一枚の絵になってしまいます。
ですので、描画時に

var imgObject = {
        x:100,
        y:100,
        width:200,
        height:200
};
ctx.drawImage(img,imgObject.x,imgObject.y,imgObject.width,imgObject.height);

こんな感じでオブジェクトを作ったうえで描画することで、疑似的にオブジェクト化します。
こうするとマウスクリックイベントを処理する時に、このオブジェクトを使えばよいことになります。


こんな感じで地道にcanvas上にオブジェクトを配置し、シミュレーションらしくしていきます。
ツールを使った開発もいずれやります。


折り紙の件は変にいろいろ考えてしまって謎の頓挫(汗

一日のコーディング量

一日のコーディング量は平均どれくらいなんだろうか。
直近の自分をふりかえってみる。

gitのログを確認してみたところ大体一日に500行前後をコーディングしているようだ。特に意識していたわけじゃないが、割ときれいに500行前後に収まっていた。

過去にC#で作業に当たっていた時はどうだっただろうか。仕様書を書いている時間のほうがながかったように思うし、コーディングも誰でもできるような(今でもそうだが)簡単なものしかなかったので、恐らく100行もいってなかったんじゃなかろうか。


ネットでコーディング量について軽くみてみたら数千数万とかいう猛者がいた。信じられない。
よっぽどコーディング内容が頭に入っていたらそれくらいいくだろうか?どうだろう。自分はそこまではさすがにいけない気がする。いけて、2000とか3000とかじゃないだろうか。


割と最近はクリエイティブよりなプログラミングなのでどんどんコーディング量は落ちていくことだろう。

javascriptは動的型付け言語

動的な型付けとやらにどうにも慣れない。

元々はずっとC#Javaで業務系のシステムを組んでいたので、IDEに非常に助けられて作業を進めていたし、それが当然だと思っていた。 サラリーマンプログラマーなので、特に今の業務以上のことは考えることはなく、それが当たり前だった。

ところがどうだろう。 今はサラリーマンプログラマーから少し毛がはえてきたところだけど、Javascriptの動的な型付けにひーこらしている。

C#Java時代はオーバーロードには大変お世話になりました。 というかありきだったのですが、Javascriptで同じことをしたら動かんではないですか。

ぐぐったところ、Javascriptでにオーバーロードできるんだ、みたいな記事がありましたけど、 なんだか強引な感じがしてやりませんでした。

ここからはもう関節のパニックですよ。 型が決まってないからなんでもあり。 呼び出した先でチェックしてるんですけど、それなら静的にチェックしてくれよとか思いつつ、もはやなんでもありなソースになってしまったと思います。

静的から動的に変わっただけなのに、なぜか引数がどんどんどんどん増えていくのはなんでなんでしょうか。 どんどん調子にのってるんですね、きっと。 悪乗りです。

どんどん醜いソースになっているのがわかるのにもう止まりません。

なぜ止まらないか。 それはもともと自分がIDEに頼り切っていただけで、明確な指針を自分の中に確立できていなかったからだろうと思います。

ここまで反省しておいて私は、TypeScriptに安息の地を求めて旅立つのです。