日々のアンテナ

日々アンテナを貼って、いろんな情報をキャッチ、発信したいと思います。
2017年10月 ≪  123456789101112131415161718192021222324252627282930 ≫ 2017年12月
TOP ≫ CATEGORY ≫ サイトのこと
CATEGORY ≫ サイトのこと
≪ 前ページ       

IEでのgetAttribute,setAttributeのバグ

DOMでオブジェクトを特定したり、変更するのに使用するgetAttribute、setAttributeメソッドですが、一部IEにバグがあります。 以前散々悩んだので書いておきます。 たとえば、class名を取得したいとき、 element.getAttribute("class");だと、IEでは取得できません。 IEの場合には
element.getAttribute("className");
getAttribute("String")のStringには属性名がくるので、実際にはclassが正しいのですがIEのバグです・・・ また、同様に element.setAttribute("style", "color: #ffffff;");もIEではセットできないので、
element.style.cssText = "color: #ffffff;";
とする必要があります。 さらに、onclick属性に対しても element.setAttribute("onclick", "newHandler();");ではセットされずに、newHandler()が呼ばれません。
element.setAttribute("onclick",new Function("newHandler();"));
とする必要があります。 もう、これに気づくまでなかなか大変でした。 と思ったら、 http://nanto.asablo.jp/blog/2005/10/29/123294がとても参考になります。

Javascriptでtry-catchを使う

Javascriptでtry-catch構文が使えるって知らない人が多かったので書いてみました。 (最近じゃAjaxでほぼ必須だから認知度高いかもしれないけど。)
try{エラーをキャッチしたい処理内容}catch(e){エラーをキャッチしたら行う処理内容}
プログラミング言語に慣れている方はすんなり受け入れられると思いますが、どんなプログラムでもこの例外処理が大変重要です。 Javascriptではそんなに厳しく例外処理をする必要ないかもしれないけど、使ったら便利ってことがよくあります。 それは、ブラウザが返却するエラーをキャッチすることです。 IEではよくあるのですが、windowのリサイズや移動、またはファイルのアップロード時など、セキュリティ上の都合で、ブラウザからエラーが返されてしまいます。 そうするとその後の一切の処理ができなくなり大変都合が悪いです。 なので、このブラウザから返されるエラーをキャッチし、つぶすなり、他の処理に置き換えるなりする必要があります。 例:windowのリサイズや移動を行う。 リサイズ時にユーザーがウインドウを触ったりすると 「アクセスが拒否されました」のアラートが上がることがあります。 エラーの詳細はMicrosoftサポート情報 これは特に重要なエラーではないので、潰したいという場合。 try{   window.top.resizeTo(w,h);   window.top.moveTo(x,y); }catch(e){   //アクセスが拒否されましたのエラーが出たら何もしない。   if(e.number == 2147024891){     throw e;   } } 再度リサイズや移動を行うにはそれなりの処理が必要です。 アクセスが拒否されましたのエラーナンバーは上記の通りなので、 これ以外のエラーだった場合はエラーが返されますので安心です。 (全てを潰すのはセキュリティ上よくない。) このほか、ファイルのアップロードしたいときに、 相対パスや存在しないようなファイル名を入力してsubmitすると、無反応だったり「アクセスが拒否されました」となりその後の処理が不可能になることがあります。 詳細はMicrosoftサポート情報 エラー自体はセキュリティ上しょうがないとしても、リカバリできないのは困ります。 なのでこれもエラーをキャッチし、自分でエラーを返すことで処理の続行が可能となります。 try{   document.myform.submit(); } catch (e) {   alert('存在しないファイルが指定されました。'); } 他にもデバッグ代わりにつかったり、知っておくと便利なtry-catchでした。

form部品の初期値を取得する

たとえばテキストボックスの値を変更した場合のみ入力チェックを行うとか、初期値と比較して処理を行うことって多いと思います。 初期値を取得するには、default○○を使います。 Form部品の種類によって使えるプロパティが違います。
input type="text",textareaの場合 defaultValue optionの場合 defaultSelected input type="checkbox"の場合 defaultChecked
例:もしテキストボックスの初期値から変更があった場合はアラートを表示する。 var obj = document.myform.mytext; if(obj.value != obj.defaultValue){  alert("変更されました。"); } これ、一個や二個ならいいのですが、たとえばformのelements全てに対して初期値から変更があったかどうかをチェックするには、下のような方法が便利だと思います。 function initValue(target){  var childs = target.childNodes;  var flg = false;  if(childs.length != 0){   for(var i=0;i<childs.length;i++){    if(childs(i).tagName == "INPUT" && childs(i).getAttribute("type") == "text"){     if(childs(i).value != childs(i).defaultValue){     flg = true;     }    }    if(childs(i).tagName == "TEXTAREA"){     if(childs(i).value != childs(i).defaultValue){     flg = true;     }    }    if(childs(i).tagName == "OPTION"){     if(childs(i).selected != childs(i).defaultSelected){     flg = true;     }    }    if(childs(i).tagName == "INPUT" && childs(i).getAttribute("type") == "checkbox"){     if(childs(i).checked != childs(i).defaultChecked){     flg = true;     }    }    var nextChilds = childs(i).childNodes;    if(nextChilds.length != 0){     initValue(childs(i));    }   }  } return flg; } 引数のtargetには対象となるformを指定します。 webアプリだとやたらと大量のform部品を生成することが良くあります。 この方法、初期値との比較以外にも全てのform部品にアクセスしたいときによく使っています。 もっと良い方法があれば教えてくださいね。

Javascriptでオーバーロードを実現する

JavaをやっていてJavascriptを触ったりすると非常にごちゃごちゃになります。 よくやるのが for(int i = 0;・・・ という風に、intなんて思わず使っちゃったり。 これは置いておいて、JavascriptではJavaでいうオーバーロード(引数の数や型が異なるメソッドを宣言すること)ができません。 fooというメソッドがあった場合、Javaなら foo(String str,int i)と foo(String str) foo(int i,int j)が宣言することができ、引数の型や数でメソッドが自動的に選択されます。 ところが、Javascriptにはそもそも変数の型がないし、メソッドはプロパティに関数オブジェクトが代入されているだけなので、同名のメソッドを作ることができないのです。 でも、プログラムを組んでいて、引数を増やしたくなることってありますよね? フラグをつけたいなあと思ったりすることってあります。 その場合にいままで書いた分全部に新たな引数を加えるなんてすごくイヤです。 というわけで、Javascriptでオーバーロードの真似事を実現するには、 argumentsオブジェクトのlengthによって場合分けをします。
arguments.length
argumentsオブジェクトは引数を表すオブジェクトです。 配列と同じようにlengthが取得できます。 例: function test(arg1,arg2){  switch (arguments.length) {  case 1: test1(arg1);  case 2: test2(arg1,arg2);  default

配列を数字順にソートする。

Array.sort()って、文字コード順に並び替えをします。 だから例えば myArray = new Array("1","2","11"); とすると、 myArray.sort(); 結果: 1,11,2になってしまいます。 これを数字順にするにはソートの引数に比較関数をセットします。
Array.sort(比較関数);
でも比較関数って何?って思いますよね。 比較関数とは2つの引数を持ち、 引数1が引数2より小さい場合は負の整数、 同じ場合は0、 引数1が引数2より大きい場合は正の整数を返します。 なので、この場合比較関数は function func(a,b){  return (b - a)

配列からある要素を削除する

JavascriptでArray.deleteって探してもないので、ちょっと途方にくれちゃうけど、 spliceを使えば簡単に配列から要素を削除できます。 (置換するメソッドを削除に使うなんて最初はなかなか気づきにくいですよね。)
Array.splice(開始番号,削除する要素数);
例: myArray = new Array("red", "green", "blue", "yellow"); myArray.splice(1,2); 結果: red,yellow 注意: インデックス番号は0からです。 応用: この中でgreenだけを削除したい場合
myArray = new Array("red", "green", "blue", "yellow");
for(i = 0; i < myArray.length; i++){
 if(myArray[i] == "green"){
  myArray.splice(i,1);
 }
}
で、結果はred,lue,yellowの配列になります。 2008/02/19追記: ただし上記の方法ですとgreenが二個あった場合に削除されずに残ってしまいます。 コメントでkenさんの記載してくださった方法を参照してくださいね。 http://javascript-memo.seesaa.net/article/24832361.html#comment

MovableType

経験を積んでおこうと思い、MovableTypeに挑戦。
MovableTypeはここfc2ブログのようにレンタルブログではなく、自分のサーバーにアップして使用するブログツール。
私のサーバーにはcgiがアップできないためland.toというところでサーバースペースをレンタルしました。
将来的には有料サーバーを借りる予定だけど今は練習中なので無料サーバー。

早速MovableTypeをダウンロードし、設定しアップしたところまでは良かったけど、checkファイルは起動できるのにシステムの初期化ができない。
included://が呼ばれちゃって、「ページが表示できません」のエラーになってしまいます。

サポートBBSを読んだところ、無料サーバーゆえの広告表示が悪さをしているそうで.htaccessではじく必要があるみたい。

というわけでなんとか設置も完了し、ほっと一息。

あとは頑張ってページの整形をちょこちょこやろうと思います。


・・・と思ったら、今の世界標準はWordPressなんですね。
こちらもblogツールだけどオープンソースで無料みたい。
それにベースがPHPというのも魅力。

とりあえず、どっちも触れるように週末はWordPressをインストールしてみます。


land.to結構おすすめですよ。
今のところ、無料サーバーでcgiが使用できて、商用もOK、スペースが100MBというとXreaとここくらいしか思い浮かびません。
Xreaは現在募集停止中だしね。

版権フリー写真リニューアル

版権フリー写真のページをリニューアルしました。
CSSのテンプレートをお借りしてなので手抜きをしてしまいました。。。
ほんとはJavascriptで全部のページを1ページで作ってしまおうと思っていましたが、SEOではある程度のページ数のあるサイトがいいということなので、ちょっとだけ分けました。
画像表示のところ、時間が掛かるのでまた工夫したいと思います。

版権フリー写真はこちら

海外の写真など撮り貯めっぱなしのものがなかなかアップできずにいるのですが、
この週末あたり整理しようかな。

リニューアルしました。

昨日やっとやっと重い腰を上げてサイトのリニューアルをしました。
とはいっても手を加えたのは素材のページとトップページのみ。
後は追々ということで・・・

素材のページは1年前から構成を変えたいと思い、全てjavascriptで表示を行えるようにしました。
だからすべて1ページ+CSS数枚+javascriptのシンプルな構成です。
今までは一個素材を増やすたびにメニューに追加して、html書いて・・・ってやっていたので、データ量も増えちゃうし手間が嫌でアップしないまま・・・という感じだったので。
ちょうど仕事でjavascriptガンガン頑張っていた頃だったので楽しかったです。(今見るといろいろ直したいところいっぱいですが。)
また時間の余裕が出来たらajaxを取り入れて行こうと思います。

素材数は半分以下になっちゃいましたが、一応自分で厳選したものだけです。
これからはblogテンプレートなどを作っていきたいなと思っています。

一応トップと素材ページは時代の流れにあわせてテーブルタグの排除を行いました。これも勉強中です。

今までのページも残っているのですが、今週末あたりに削除する予定です。
直リンクをしている方は画像が一気に消えます。お気をつけてください。