JavaScript Tips
ネットワーク編

サーバーの接続をチェックする


リンクしている外部のサーバーが止まったり回線の具合が悪くてリンク切れになってしまう ということは案外頻繁に起きています。でも、そんな時でも自動でリカバリーして途切れなく 情報を提供していたいものですね。そこで、今回から数回にわたりJavaScriptで簡単に外部サーバーの状態を 調べて動作を分岐する方法について紹介します。



■ [1] 画像利用/読み込みエラー(onerror)の使い方


今回はまず、画像の読み込みに失敗したときに発生するonerrorイベントの 使い方を確認します。サーバートラブルなどで画像の読み込みが失敗した ら別のサーバーの画像を読みに行くといった処理に使えるイベントです。

まず最初に、画像を用意してください。画像の表示自体が目的ではなくサーバー のチェックのためのものですからなるべく小さいたとえば1ドットの軽いものなどがベストです。 その画像をチェックしたいサーバーに置いておいてください。今回は、1.gifという画像を 仮にgame.gr.jpというサーバーに置いてテストしていますが、実際に使うときは みなさんのサーバーにテスト用画像を置いて実施してください。


  • 1: 指定した画像がなければ別のサーバーの画像を読み込む
  • 2: 指定した画像がない場合→ダイアログを表示する
  • 3: 指定した画像がある場合→何もしない
  • 4: 関数化してみる


     ( 画像のイベントハンドラonerrorとonloadはJavaScript1.1から実装されているので JavaScriptが動作する現在のブラウザなら完全に動作すると想定してもよい 安全なテクニックです。)


  • 1: 指定した画像がなければ別のサーバーの画像を読み込む
    
      <img src = "http://test.game.gr.jp/about/tips/net/1/0.gif"
           onerror = "this.src='http://www.fureai.or.jp/?tato/about/0.gif'">
    
    
    http://test.game.gr.jp/about/tips/net/1/0.gifは存在しないので onerrorによって http://www.fureai.or.jp/?tato/about/0.gifを読みにいきます。


  • 2: 指定した画像がない場合→ダイアログを表示する
    
      <img src = "http://test.game.gr.jp/about/tips/net/1/0.gif"
           width   = "0"
           height  = "0"
           onerror = "alert('読み込めませんでした')">
    
    
    http://test.game.gr.jp/about/tips/net/1/0.gifは存在しないので onerrorによって '読み込めませんでした'のダイアログが表示されます。 これは、相手側のサーバーが動作していない場合も同じ結果となります。 サーバー動作検知用として利用するためにwidth=0 height=0にして画像自体は表示されないようにしてみます。


  • 3: 指定した画像がある場合→何もしない
    
      <img src = "http://game.guide.withabout.net/guide_game/gp333/about/tips/net/1/1.gif"
           width   = "0"
           height  = "0"
           onerror = "alert('読み込めませんでした')">
    
    
    http://game.guide.withabout.net/guide_game/gp333/about/tips/net/1/1.gif(ここでは1ドットの小さな画像を使っています)は存在するので onerrorは起動せずダイアログは表示されません。



  • 4: 関数化してみる
    
      <script type="text/javascript">
      <!--
    
      function worksForErr(e)
      {
          //画像を読み込めなかったときの処理をここに書きます
          alert("読み込みできませんでした")
      }
    
      //-->
      </script>
    
      <img src = "http://test.game.gr.jp/about/tips/net/1/0.gif"
           width   = "0"
           height  = "0"
           onerror = "worksForErr(event)">
    
    
    1~3までのサンプルはインラインの処理なので複数の処理をしたいときなどには ソースが煩雑でメンテナンスも不便になりやすいものです。そこで、 スクリプト処理を関数へ取り出してみます。 http://test.game.gr.jp/about/tips/net/1/0.gifは存在しないので onerrorから関数worksForErr(e)が起動し、その中のダイアログが表示されます。 ちなみに、引数のeにはイベントオブジェクトが渡されていますので必要であれば 利用することができます。



画像のonerrorイベントは、画像のためのものでありながら、 同時にサーバーが生きているかどうかをチェックするための道具として も利用することができます。

次回は、画像の読み込み完了時に発生するイベントonloadを利用する方法につ いて見ていきます。











※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。