夕暮ログ

C#やJavascript、最近はAndroidなんかも好きなtinqのブログ。「夕暮れログ」

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

雪を降らせるスクリプトsnowparticle.2.jsをちょっと改造して使ってみた

寒さが厳しくなってきました。
雪とは縁が遠い静岡県民ですが、ブログに雪を降らせてみました。

こちらのスクリプトを使わせていただきました。PC用のsnowparticle.2.jsです。
クリスマスに使いたい!雪のパーティクルをチラチラ降らすスクリプトを作ってみよー : actyway

この手のスクリプトはドラッグや全部選択をすると雪が選択状態になり、青い四角がぱらぱらと落ちてきたりするようになってしまうものが多いです。そういうのはあまり好きではないのですがこのスクリプトではCSSのみを使っているので反転状態になることはありません。


そのままだと白背景に隠れてしまって少し残念なので、少しばかり改造してみました。


//元のプログラム(25行目付近)
m.setAttribute('style','position:absolute;z-index:'+(z+i)+';top:-'+t[i]+'px;width:'+p+'px;height:'+p+'px;background:rgba(255,255,255,0.8);border-radius:8px;box-shadow: 0 0 2px 2px rgba(255,255,225,0.3);left:'+l[i]+'px;');

//改造後
var color = "rgba(" + (255 - Math.floor(Math.random() * 20)) + "," + (255 - Math.floor(Math.random() * 20)) + "," + (255 - Math.floor(Math.random() * 20)) + ",0.8)" ;
m.setAttribute('style','position:absolute;z-index:'+(z+i)+';top:-'+t[i]+'px;width:'+p+'px;height:'+p+'px;background:'+ color + ';border-radius:8px;box-shadow: 0 0 2px 2px '+ color +';left:'+l[i]+'px;');



乱数で微妙に色をずらして、ほのかに色をつけています。
*20のところを調整すればもっと濃い色も出るようになります。
ただ、あんまり濃いとしつこすぎるので注意。20でも濃いなーと思う人は15とかに調整するといいと思います。

CSSの雪もいいですが、もう何年も本物の雪を見ていない気がするので静岡も今年は少しは雪が降ってほしいものです。
でも、雪がかすかにでもふると交通が大混乱になるんですよね・・・
スポンサーサイト

JSON.parseとevalなどの比較とスピードテスト

JSONはjavascriptのオブジェクトの記法をベースにしたもので、主にjavascriptでオブジェクトを文字列で表す際に利用されます。 特にAjax分野ではかなり多用されます。
非常に扱いやすいので、さまざまなプログラミング言語で使うことが出来るようになってきています。

JSONは文字列なので、それをオブジェクトに変換して使うわけですが現在javascriptでやるにはいくつかの方法があります。

  • eval
  • new Function
  • JSON.parse
  • jQuery
  • json2.js

それぞれの違いについて改めて調べてみました。

続きを読む »

webページ表示時に自動で要素にフォーカスを与えるべきではない

現在それほど数があるわけではありませんが、開いたときに自動的にテキストボックスなどにフォーカスを当てるwebページがあります。
例えば、Googleはインスタント検索が有効なときには検索のところにフォーカスを当てます。

この自動フォーカスは、javascriptのfocusを使うのが一般的ですが、HTML5で追加されるautofocus属性によってもできるようになります。
<input autofocus> - HTMLクイックリファレンス
簡単に出来るようになるため、今後そのようなページは増えていくのではないかと予想しています。

一見自動フォーカスはユーザーにとても有用です。しかし、これには大きな問題があります。
一部のショートカットキーと相性が悪いのです。
具体的には、
・文字キー単独のショートカット(シングルキーショートカット)
[Shift]+[文字キー]の組み合わせのショートカット

の2種類です。この2つはテキストボックスにフォーカスがあたっている状態で押すと文字が入力されてしまうのです。

そんな組み合わせのショートカット普通ないと思うかもしれませんが、キーボード操作派のユーザーはいろいろと割り当てて便利に使っていたりするのです。私もシングルキーショートカットをOperaで使っています。

これは実際にあった話なのですが、Googleで検索したあと元のページに戻ろうとして「戻る」が割り当てられている[Z]を連打していると、Googleの検索ページにzzzz・・・
そして知りたくもないzzzzが勝手に検索されて下に読み込まれます。これにはだいぶイラッとさせられました。一見便利そうな機能も場合によっては邪魔にしかならないのです。
結局私の場合、インスタント検索が肌に合わないので無効にしてしまいました。

さらに、さまざまなブラウザで「戻る」になっている[Backspace]もフォーカスがあたっていると使えなくなります。IEでもそうでした。
なれた操作をいまさら変えるというのはなかなか面倒なので、結局ユーザーはユーザースクリプトなどで自己解決をするか、あきらめるか、別のサイトを使うかなどの選択になってきます。


ユーザーのためを思ってつけたであろう機能が一部のユーザーが使いにくい、アクセシビリティが考えられていないページになってしまっている気がします。

使いどころを考える


ショートカットと相性が悪いからといって、すべての自動フォーカスが悪いかというとそうではありません。
HTML5で追加されたのも実際に利用価値があるからでしょう。
私的には
・そのページはそれ以外の目的で使われることはまずない
・「戻る」が使われることがあまりない
ということを満たした上で使うべきだと思います。
具体的には、
・会員登録ページ
・ログインフォーム
などでしょうか。実際にはてななどのログインフォームなどでは自動的にフォーカスが当てられます。ログインする専用ページから他の事をすることは基本的にないですし、「戻る」で帰ってくることはありません。私もGoogleのようにイライラした経験はありません。



ここで紹介したところ以外で使われている例としては、検索エンジンのトップページです。Yahoo、Google、Bing、MSN、infoseek、livedoor、nevarなども確認しましたが、すべて検索窓にフォーカスを当てるようです。
個人としてはトップページなら仕方がないかと思うのですが、人によってはこれも許せないようです。


結論としては、それなりの理由がある場合を除いて、focus関数とautofocus属性は利用しない方がいいでしょう。

機能を絞った軽量javascriptライブラリ「Sugar」の紹介

javascriptでの開発の際にライブラリを導入することが多いと思います。私は現在jQueryを利用中です。
しかし、jQueryには文字列や配列操作系があまり充実していません。
かといって、他のライブラリを導入すると余計なDOM操作やAjaxなどの機能が付いてきて、無駄に重くなってしまいます。

そこで、紹介するのが、このライブラリー「Sugar」です。
公式サイト
APIリファレンス
このライブラリには、DOM操作も、Ajaxも、アニメーションも含みません
文字列や配列、関数、数値などなどの元からあるjavascriptのオブジェクトに機能を追加するのみです。
また、もともとある関数を上書きして挙動を変更する、といった関数は少なく、これを導入して他に影響がでるという可能性はかなり少ないです。
また、prototypeやjQueryとの共存を常に考えて作られているそうなので、そちらとぶつかることもないでしょう。


どういう機能があるかは、上記のAPIリファレンスを確認してみてください。
それぞれの関数をクリックするとサンプルが出てきます。その場で編集/実行が可能なので、手軽にお試しできます。

見ていくと気づかれるかもしれませんが、文字列操作系の関数の中に、「hiragana」「katakana」「hankaku」「zenkaku」という日本語向けのの関数が含まれます。
半角の文字を全角にしたり、ひらがなをカタカナに変換するなどの簡単な日本語処理が非常に簡単に使えるわけです。

他にもいくつか紹介します。エイリアスのような形で実装されているものも多数あります。

続きを読む »

javascriptだけで画像をBase64に変換する

画像をBase64に変換する際、HTML5で定義されたCanvasタグを使って簡単に行えます。
たとえば、このブックマークレットです。
http://d.hatena.ne.jp/Griever/20081205/1228472832
画像ページを開き、このブックマークから実行するとBase64が表示されます。
結構便利です。
そのコードを拝借してきました。
javascript:(function(){
	var elem = document.images[0];

	var canvas = document.createElement('canvas');
	canvas.width = elem.width;
	canvas.height = elem.height;
	elem.parentNode.insertBefore(canvas, elem);
	var ctx = canvas.getContext("2d");
	ctx.drawImage(elem, 0, 0);
	elem.parentNode.replaceChild(document.createTextNode(canvas.toDataURL("image/png")), elem);
	canvas.parentNode.removeChild(canvas);
})();
これを、GIF等にも対応させます。 といっても、プロンプトを表示させるだけです。
javascript:(function(){
	var elem = document.images[0];

	var canvas = document.createElement('canvas');
	canvas.width = elem.width;
	canvas.height = elem.height;
	elem.parentNode.insertBefore(canvas, elem);
	var ctx = canvas.getContext("2d");
	ctx.drawImage(elem, 0, 0);
	elem.parentNode.replaceChild(document.createTextNode(canvas.toDataURL(prompt("画像の形式を指定してください。未対応の場合、image/pngになります。"))), elem);
	canvas.parentNode.removeChild(canvas);
})();
これで、image/gifやimage/jpegを指定すればブラウザが対応している場合、その形式になるはずです。
ここを右クリックしてブックマークに追加してください

さらに、FileAPIを使って、ローカルファイルをBase64に変換するのを作ってみました。
FileAPIに対応したブラウザでのみうごきます。
「Base64に変換する」
本当は、指定形式に変換できるようにするつもりだったのですが、セキュリティエラーでできないようです。残念。

ホーム  次のページ »

プロフィール

tinq tinq(もしくはTinqWill)

Sky  For   Every 改装予定

プログラミングお勉強中の高校生。月一くらいは更新したい

最新記事

カテゴリ

月別アーカイブ

検索フォーム

最新コメント

リンク

最新トラックバック

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。