カテゴリー「HTML / CSS」の7件の記事

2014.10.05

気象統計情報

お医者様から、めまいやふらつき、突発性難聴など、内耳が関連している病気(症状?)は、気圧変動に関係していると聞きました。

じゃあ、酷いめまいがあった前後の気圧はどうなってたんだろう?と気になったので、気象庁のWEBサイトで確認してみたのですが、、、なんか使いにくいです(すみません個人の感想・・・)。

続きを読む "気象統計情報" »

2013.11.10

意外な発見

早朝、加西のお山へ自転車で紅葉・・・とたくらんでいたが、朝から雨でやる気ゼロ。昨日のランニングで右ふくらはぎの動作が怪しく、こちらも自粛。

代わりにSVGで遊んでみよう!と楽しんでいたら「タートルグラフィック」てな、お手頃なテーマを思い出してしまい、おうちでjavascriptをいじくり倒して一日が過ぎてしまった。なに食ったか覚えていないぞ。

JavascriptとSVGでタートルグラフィックスやってみよう!

まだとっかかりだけど、やってる最中から、気楽に絵が描けるようになったもんだと静かに感嘆。で、さきほど、「三次元のタートルグラフィック」という香り高いテーマを思いついてしまったのだが、寝られなくなるのでまた今度。おそらくそんなの世界中の誰かが既にやっているだろうし、検索するのもやめておこう。寝られなくなるから。

ところで、先日ニッセンで買ったソックスが結構細身で、そんじょそこらのコンプレッションタイツよりも気持ちよい。肉離れの達人(見習い中)としては、これは結構な発見。今後、これ履いてランニングするのがベストチョイスか。ちょっと違うか。いや・・・

2012.05.31

クロスブラウザを考えるとcanvasのfillTextやstrokeTextは使えないのね

IE&excanvas.js環境では、canvasのstrokeTextやfillTextが使えません。

なので、position:absoluteに設定したdiv(要素は表示したい文字)を使います。

で、なんとなくcanvasに直接追加していた(気持ちはわかるでしょw)のですが、IEでは普通に文字が表示されたけど、excanvasを使わないFirefoxではダメだった。

canvasの親要素を position:relativeなどに設定して、この子要素にposition:absoluteなdivを追加すればIEとFirefox両方で表示されるみたいですな。

ちょっと感覚に合わないけれど、クロスブラウザ的にはそうするしかないみたい。

2012.05.30

「はじめてのCANVAS要素」で気付いた3点

HTML5のCANVAS要素の挙動について覚え書き。ブラウザやバージョン、HTML5の仕様や正しい対処法など、きちんと調べてはいないけど、とりあえず。


photo credit: ell brown via photo pin cc

1.canvas要素は動的生成しないほうが良いかも
ieではオープンソースのexcanvas.jsを利用すればcanvasが機能するみたいだが、canvas要素を動的に生成していると、getContextが使えなかった。htmlにベタに書けば問題なし。対処法はありそうだけど、とりあえず今のところそういうことで。

2.幅と高さはスタイルシートで指定しない
スタイルシートでcanvasの幅と高さを指定していると、Firefoxで表示スケールがおかしかった(3倍くらいに大きく描画されていた)。canvas要素の属性(widthとheight)で指定したら解消。不思議な現象。

3.ピクセル単位だけど'px'はつけない
canvasの幅と高さはピクセル単位で指定するけど単位はつける必要が無い。というか、 width='100px' などと単位をつけて指定していると、excanvasの動作中に'px'が追加されてエラーになるね。

2012.02.19

クッキーでちょっと困った件

先日TwitterAPIとOAuth認証の調査目的で作ってみたツイッターのアプリですけど、いちいちブラウザを立ち上げて認証を通すのがアレなのでアクセストークンとアクセストークンシークレットをクッキーに混ぜてクライアント側に保存しようとしたら、いろいろ本題と外れたところでつまずいて、まー困ったというか、勉強になったというか・・・。

まず、クッキーのパスの問題。IE9の場合、ここで書いたような(実ファイルのスクリプト以降にも架空のパス要素がつながるような)URLをsetcookieの第四引数(path - クッキーを有効としたいパス)に与えたら、受け取ってはくれるけど、返してくれないようだった。

↓IE9は受け取っても返してくれない?…(動いているスクリプトはindex.php)

//クッキーをあげる
setcookie(
  "cookiename", 
  "$acc_tok,$acc_tok_secret",
   time() + 60*60*24*14,
  '/app/index.php/module/action/',
  $_SERVER["SERVER_NAME"])

当初、なにが問題なのかわからなかったのですが、ためしに'/'を与えてみたら、すんなりOK。Ffirefoxでは問題なかったんだけど、どっちが正しい動きなんだろう。

もういっちょ、上の問題解決過程でわかったクッキーの管理上の問題(大きな問題ではないけれど)。Firefoxでしか確認していないのだけど、同じドメインの同じ名前のクッキーでも、上で書いた有効パスが違っていると、別物として保存されているようだった。先に詳細な(下位の)パスを指定して食わせておいて、あとからパスを(より上位の)'/'に変えてサーバーからのsetcookieによって削除しても、最初のクッキーは削除されず、毎回古いクッキーが送られてきていた。結局ブラウザ側から個別にクッキーを削除して解決したけど、同じドメインで同じ名前のクッキーなら上書きしてくれたらいいのにね。これは仕様なのだろうか。

サーバー側のプログラムでもクロスブラウザに関して気を使わなくてはならないのですな。

2011.10.03

[CSS]divを隠すstyle指定

先週末の定時後、完了したと思っていたWEBアプリのとっぱしの画面で、DIVの隠し要素の占める面積がゼロになっておらず、レイアウトが面白いように(?)崩れていて困った。

style="visibility:hidden; height:0px; width:0px;"とやっていたのだが、width:0px;が余分なのだ。

今朝style="visibility:hidden; height:0px;"とやれば一発OK

それと、試してはいないけど、overflow:hidden;を追加してもよかったかもしれない。

先週末、目立たないところへこれを移動して、お客さんには、これこれこういう問題が起こっています・・・と報告したら「それくらいなら、後から対処してくれたらいいですよ」といわれてありがたかったんだけど、あのとき「これはまずい、なにがなんでも解決してくれ」とか言われていたら、最悪徹夜してたかもしれん。

冷静になってみればいろいろ対処法が浮かんでくるが、あわてていると「なんで?」ばかりで有効な対処が出来ないものだ。

ちなみにtdやtrの中ではうまくいかないから、overflow:hidden;を試してみて。

2011.09.12

[Firefox6]フォームの隠し項目に中途半端なキャッシュが効いてる?

Firefoxで、form内の隠し項目(input type="hidden")にjavascriptで値を設定し、ページを再読み込みするとあやしい動き。

フォームの隠し項目に、「とある値」を保持しておいて、ajaxでこの値にまつわる情報をサーバーから取り出してレンダリングしている。しかし、隠し項目を書き換えた後に、ページを再読み込みすると、サーバーが吐き出した値が無視され、書き換え後の値でレンダリングされてしまうのだ。

これだけだと、「ついF5押しちゃったよ編集内容消えちゃった」てなよくある状況には便利な機能に思えるのだけど、複数の隠し項目を書き換えてから再読み込みした場合には、なぜか最初のひとつだけが値を保持していて、それ以外のはサーバーが吐き出した値になってる。

深く検証していないので、Firefoxの不具合かどうかはわからないけど、少なくともIE9(ただしIE8の互換モード)ではこの現象が発生しなかった。(と思う)

で、対処方法。海外サイトで「ページのonload(またはこれに類するタイミング)で(出来れば数ミリ秒ほどのタイマー処理にて)フォームをリセット( Form.reset() )してやりゃあいいんだぜ!」という情報を見つけたが、これがまったく上手くいかずxxx。

結局思案の末、ページのonload(またはこれに類するタイミング)で、javascriptで値を代入するというバカバカしいほど単純な方法で成功。

なんだそりゃってな感じでスマン・・・

2017年4月
            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            
フォト

Google AdSense

銀の弾丸

無料ブログはココログ