• 最近Firefoxのクラッシュが増えたと感じたら
• Javascriptの日付、時間フォーマット
• localStrageの より正確な対応チェック
• InternetExplorerでJSONのエラーが出たら
• Javascriptのエラーを出力しないようにする
• さらばIEテスター？Microsoft純正！Web オーサリングツール
• LocalStrageがIE6でも使える優れものjstorage.js
• PHP Session有効期限を延ばす方法
• ディレクトリは一体何キロバイト？が一発で分かるPHP
• jQueryでフォームの内容をCookieに保存する

最近Firefoxのクラッシュが増えたと感じたら

Firefoxの3Dマークアップチェックを試したいだけでFirefox4にアップデートしたITかあさんですが急激にFirefoxのクラッシュが増えてしまいました。あれだけ持ち上げておきながら、最近Firefoxに戻ってしまったOperaの呪いでしょうか？

おたすけフォクすけが返信をくれた

Twitterで『Firefoxのクラッシュ率、パない』と何気なくTweetしたら@otaskehからいきなり話しかけられました。
(いきなりだったけどボットでは無いそうです)

つぶやいてから即この返信がありました。人力だそうなのですが、ボットとしか思えないほど高速でした。
なのでFirefoxで困ったことがあったら、とりあえずTweetしてみるといいかもしれません。

マルウェア

ウィルスのことですね。チェックをしましたが問題ないようです。

Firefoxトラブルシューティング

以下はFirefoxのヘルプから抜粋。

アドオン

アドオンは特に問題ないようでした

指紋認証ソフトのシングルサインオン機能

使ってないので問題なし

NVIDIA ForceWare Network Access Manager

これも関係なし

不正なフォント

不正なOsakaフォントなんてあるんですね。初めて知りましたがこれも問題ありません。

Mac OS X 10.7 Lion

Winユーザーなので関係無し

グラフィックスドライバ

おたすけフォクすけが言っていたのはこちらのようです。他に当てはまることが無いのでグラフィックスドライバを変更してみます

グラフィックドライバを更新する

グラフィックスドライバを更新してみます。なお、全作業終了まで更新時間を合わせると10分～15分ほどかかります。
なお、私の環境はWin8です。Vistaも同じやり方のようです。

Windows　updateを選択

Windows　updateから更新を行います。



指示に従い、更新をインストールします。

最後に再起動を行い、終了です。

この後、Service Packの構成中ということで10分ほど待つことになりました。
グラフィックドライバ更新は以上です。

Javascriptの日付、時間フォーマット

PHPにdate関数があるように、Javascriptでも日付、時間のフォーマットがあります。

Javascriptの日付、時間の出力

ポイントはnew Date()。
コピペで何かと使えそうです。

localStrageの より正確な対応チェック

localStrageの正確な対応チェック

localStraeの対応はIEでは、8からとなっています。IE7以前ではlocaStrageは非対応ということになり、対応か、非対応かで処理を分ける必要があります。

さらに、バージョンがIE8でもデフォルトでインターネットオプションに『DOMストレージ』が有効になっていないと動作します。

つまりlocalStrageの対応チェックは

この2つをチェックしてあげる必要があります。

そんなわけでかあさんは以下のスクリプトを実行しました。

localStrage対応チェックのサンプルコード

 //Javascriptエラーを非表示
function TigilError() {
  return true;
  }
  window.onerror = TigilError;
  $(function(){
  //localStrageの対応チェック　
  if(('localStorage' in window) && window['localStorage'] !== null){
  //localStrage対応なら、テストでストレージをセット
  localStorage.setItem('test', 'test'); 
  //テストでセットしたlocalStorageを変数として定義
  var test = localStorage.getItem('test'); 
  }
//Javascript版issetはたったこれだけ
//対応ならid→hogeに対してテキスと追加
if(test){
  $("#hoge").append('対応');
  }else{
  $("#hoge").append('非対応');
  }

解説

一説にはif(localStorage){}だけでもよいのですが、IE7ではlocalStorageと書いた時点で未対応ですからエラーがが返ってしまいますね。

そこで完全未対応ブラウザのためにあらかじめエラーを非表示にし、
対応ならばlocalStrageにtestをセットし、後は変数化したtestがセットされているか、されていないかで判定を行います。

IE8、9、では対応と表示され、IE7 では非対応となりました。

なお、インターネットオプションのDOMストレージのチェックが入っていない場合は『非対応』の表示が確認でき、より正確にlocalStorageの判定が取れました。

InternetExplorerでJSONのエラーが出たら

こんにちわ。ここ半月ほどJSON、Cookie、localStrageと無限ループの格闘を続けるITかあさんです。
JSONはIE7でも対応しているし、IE9にいたっては対応していないはずないのになぜかJSONのこんなエラーで悩まされることがあります。(半日悩まされました・・・)

私の場合、他のブラウザでは全く問題なく、さらにIETesterのIE8では出なかったのに、なぜかIE9ではこのエラーが出てしまいました。
また、JSONを使うのがPHPなのか、Javascriptなのかでも対応方法が違いますので合わせて紹介したいと思います。

そもそも『JSONは定義されていません』のエラーの原因は？

IEではヘッダに

と、書いてあげないといけないそうです。
Content-typeの宣言をしてあげなければIEでは正常に動かないそうです。

で、これHTMLで書くのかな？とも思ってしばらく試したのですがダメでした。

PHP

PHPでJSONを扱う場合には以下のようにheaderで最初に実行してあげます。
『最初』ですよ。

Javascript

すみません、Javascriptなんですが、『これだ！』という解決方法にはめぐり合えませんでしたが、以下のjson.jsというプラグインを読み込んであげてからJavascriptによるJSONを実行してあげれば問題なくJSONをIEで扱えることが確認出来ました。
なお、現在json.jsはjson2.jsの新しいものがあるのでそちらを使って下さい。

その他JSONを扱う際はこんなことにも注意

Javascriptの連想配列の最後にカンマ

Javascriptの連想配列の最後にカンマがあるとIEではエラーになってしまいます。

var hash = {
foo: "hoge",
bar: "fuga"    // カンマ入れちゃダメ！
};

ｊQueryは新しめのをチョイス

jQueryの古いバージョン1.4以前とかでエラーになるケースも。新しめのをチョイスしましょう。

Javascriptのエラーを出力しないようにする

Javascriptのスクリプトエラーを非表示に

Javascriptで何か開発中、
古いブラウザだとエラーがけっこううざかったりしますよね。
PHPだってエラーを非表示に出来るわけであって、当然Javascriptもエラーの出力を非表示にする方法があります。

Javascript

function TigilError() {
	return true;
}
window.onerror = TigilError;

たったこれだけです。これをJavascriptの前に書いてあげましょう。
Javascriptのエラーに悩まされたときはぜひ！

さらばIEテスター？Microsoft純正！Web オーサリングツール

IE6のテストがしっかり行える！Microsoft Expression Web 4 SuperPreview

多くのWEBデザイナーやWEBプログラマーはInternet Explorerのチェックに『IETester』を使っていることでしょう。私はスタンドアローン版を使っていたこともありますが、WEB業界に入ってからというもの、IETesterのお世話になりっぱなしでしたが、この度WEBオーサリングツールMicrosoft Expression Web 4 SuperPreviewというMicrosoft純正のWEBオーサリングツールを知ったので早速使ってみました。

特徴

ダウンロード

Microsoft Expression Web 4 SuperPreviewのほかに先にMicrosoft .NET Framework 4がインストールされているいつ要があります。

無事Microsoft .NET Framework 4をインストール完了したら、続いてMicrosoft Expression Web 4 SuperPreviewをインストールします。

後は指示に従ってインストールを完了させます。

Microsoft Expression Web 4 SuperPreviewサンプル動画

使ったカンジをキャプチャ動画にしました。ざっと確認がてら、どうぞ。

LocalStrageがIE6でも使える優れものjstorage.js

LocalStrageがIE6でも使える jstorage.js

以前CookieがjQueryで簡単に扱えるようになるjQueryプラグインを紹介しましたが、今回はLocalStrageが使えるようになるJavascriptプラグインを紹介します。
(今回はjQueryのプラグインではありませんが、jQuery内でも使えます。)

jstorage.jsの特徴

サポートブラウザ

本来LocalStrageが使えないブラウザでも使えるようになります。

保存容量

Cookieは１ドメイン20件、1Cookieにつき4 キロバイトの制限があり、さすがLocalStrageといったカンジで各ブラウザともそれなりの容量が保存できますが、IE6、7に関しては128KBと少なめ。
それでもCookieに比べると容量が多く、助かります。

jstorage.jsの基本的な使い方

読み込み方法

jQueryで扱う場合、jquery.jsonというプラグインが無いと動作しません。Prototype, MooToolsでは不要のようです。読み込む順番のこの順番でいきます。

LocalStrageの書き込みと呼び出し

注意点

私はIEテスターでもデバックしたのですが、IEテスター上では本来対応ブラウザであるIE8ですら確認出来ませんでしたが、古いマシンのIE7やXPのIE8でも無事動作することは確認出来ましたので、IEテスターで確認して『動かなかった！』とがっかりしなくても大丈夫のようです。

LocalStrageのサンプル

最後に以前Cookieでフォームの内容を保存するサンプルを投稿したのですが、あれのLocalStrage版を紹介したいと思います。

サンプル

PHP Session有効期限を延ばす方法

タイトルの通りなのですが、Sessionの有効期限を延ばす方法です。

php.ini　gc_maxlifetimeの値を変更する

Sessionの有効期限についてはphp.iniのgc_maxlifetimeにて管理されています。
ですが、共有サーバーでは設定を変更できませんし、特定のディレクトリのみSessionの有効期限を延ばす方法は

.heaccess

PHP

こんなカンジで。個人的には.heaccessのほうがお手軽でよいと思っています。
PHPのファイルに記入する場合は必ずSessionのスタート前に記入してください。

WordPressなどのCMSの管理画面にも使えそうですね。

ディレクトリは一体何キロバイト？が一発で分かるPHP

ファイルサイズはFTPツールでバイト表示がされていますが、ディレクトリのトータル何キロバイトかは分かりません。
ましてやサイト全体のディレクトリが何キロバイトかなんて・・・
そんな時にはこちらが使えそうです。

ftp.php

こちらでは/home/example/public_htmlのディレクトリサイズが分かります。

function dir_size($dir)
{
  $handle = opendir($dir);
  while ($file = readdir($handle)) {
    if ($file != '..' && $file != '.' && !is_dir($dir.'/'.$file)) {
      $mas += filesize($dir.'/'.$file);
    } else if (is_dir($dir.'/'.$file) && $file != '..' && $file != '.') {
      $mas += dir_size($dir.'/'.$file);
    }
  }
  return $mas;
}
echo dir_size('/home/example/public_html');

閲覧可能ディレクトリにこちらのスクリプトを閲覧可能ディレクトリに設置し、ブラウジングします。
dir_sizeの括弧の中はディレクトリの絶対パスを記入してください。
自分のディレクトリの絶対パスが分からない場合はこちらを記入してください。
絶対パスが分かります。

情報の単位

ディレクトリのトータルサイズはキロバイトで表示されますので、1MBは一体何キロバイトなんだ！という疑問はこちらの表を参考にして下さい。

サーバー移転時など自分のサイトのHDDはどれくらいだから、このプランにしようとかの参考になるのでは？
後は単純にそういえば自分のサイトは容量どれくらい使っているのかな？とか、そんなちょっとした興味がわいたときに使ってみてくださいね。
ちなみにITかあさんのサイトのサイズは65270983バイト。65MBってとこですか？あれ？計算あってる？

jQueryでフォームの内容をCookieに保存する

JavascriptでCookieを扱うのはどうも敷居が若干お高めですが、jQueryプラグインのjquery.cookie.jsがあると、誰でも簡単にCookieマスターになれます！

jquery.cookie.js Download

公式jQueryからはなぜかうまくダウンロードできなかったので、こちらからどうぞ。

jquery.cookie.js使い方　How To Use It.

Cookieの書き込み

有効期限付きのCookie

以下は7日間限定のCookieの作成方法。

ページを限定するCookie

特定のページでのみCookieを有効にする場合

Cookieの読み込み

フォームに記入した内容をCookieに保存する

最後にITかあさんの作ったCookieサンプル。
フォームに入力した内容をCookieに保存します。

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script src="jquery.cookie.js"></script>
  <script type="text/javascript">
  $(function(){
 //読み込んだクッキーをフォームのvalue値として代入
  $('#name').val($.cookie("name"));
 $('#age').val($.cookie("age"));
    
  $('#email').val($.cookie("email"));
 $('#tel').val($.cookie("tel"));
    
  $('#pr').val($.cookie("pr"));
  
  //submitを押したら、クッキーを保存
  $("#submit").click(function(){
  
  $.cookie("name",$('#name').attr('value'));
  $.cookie("age",$('#age').attr('value'));
  $.cookie("email",$('#email').attr('value'));
  $.cookie("email_re",$('#email_re').attr('value'));
  $.cookie("tel",$('#tel').attr('value'));
  $.cookie("pr",$('#pr').attr('value'));
  
  location.href="index.html"
  })
  })
  </script> 
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
  <th>Name</th>
  <td><input type="text" name="name" id="name" value=""></td>
  </tr>
  <tr>
  <th>Age</th>
  <td><input type="text" name="age" id="age" value=""></td>
  </tr>
  <tr>
  <th>E-mail</th>
  <td><input type="text" name="email" id="email" value=""></td>
  </tr>
  <tr>
  <th>Tel</th>
  <td><input type="text" name="tel" id="tel" size="38" value="" /></td>
  </tr>
  <tr>
  <th>Text</th>
  <td><textarea name="pr" rows="4" cols="30" id="pr"></textarea></td>
  </tr>
  <tr>
  <th></th>
  <td><input type="submit" value="決定" id="submit"></td>
  </tr>
</table>