合資会社 満福

ぼんち塾 プログラミング講座

目次へ 戻る 次へ

第六回 サイドバーを活用する

こんにちはそれでは始めます。一同礼!!
前回インストールしたMozilla(もじら)にはもう慣れましたでしょうか。いままでInternet Explorer(以下IE)しか使った事が無かった人にとってはタブブラウズなどの機能が新鮮に感じたかもしれません。ところで初回起動時のウィンドウ左側にSidebarと書かれたエリアがあるのに気がついたと思います。
「なんだこの邪魔な箱は!!」と思わず”X”(パツマーク)を押して消してしまった人もいるかと思いますが、今回のお題はこのSidebarですので消してしまった人はView->Show/Hide->Sidebarを選択してもう一度表示して下さい。Sidebarとメインの境界線上のボタンで非表示にしている人は、そこをもう一度押して戻しておいて下さい。

SidebarにはGoogleタブのようにブラウジングを補助する情報を表示するものや、電卓やメモ帳など便利な小物などさまざまなものがあります。Sidebar横のTabs->Customaize Sidebar..をクリックすると、カスタマイズするためのウィンドウが出てきますので、気に入ったものを選んで”Add”ボタンを押せば、Sidebarのエリアに新たなタブが追加されます。International->Japan->Asahiは朝日新聞の最新ニュースが表示されるタブです。eBay Japanなんていう既にサービスを中止しているものが未だに入ったままになっているのはご愛嬌といったところでしょうか。

簡単に更新された内容を一覧出来るので、ぼんち塾をお気に入りに入れてくれている人(いますかあ?)のためにぼんち塾もサイドバーに対応したいと思います。
プログラミング講座としてはちょっと本題からがはずれるようにも思いますが、一応JavaScriptも出て来ますし、簡単なSidebarタブの作り方がわかるようになりますので、たまには脱線もいいのではないでしょうか。

実は私自身もSidebarについてよく知らなかったので、Googleで検索してみたところ初心者にぴったりなMy Sidebar Developer's Guideが見つかりました。もちろんHTMLだけの単純なものからXUL(ズールをクールのリズムで発音するそうです)を使った高度なものまでいろいろとあるようですので、興味が出た人は頑張って読んでみて下さい。
今回取り上げるのはもちろん一番なシンプル(単純?)なHTMLベースのもので、手順は以下の通りで実に簡単です。

1、Sidebar用のHTMLファイルを用意する

はっきり言ってなんの変哲も無い普通のHTMLです。ポイントはlinkに<target='_content'を追加することです。これが無いとリンクをクリックしたときにメイン部分にページが表示されず、Sidebarの部分に表示されてしまいます。
もちろんこのHTMLファイルはウェブサイトにあらかじめ配置しておかないといけません。

      <html>
      <head>
        <title>ぼんち塾</title>
      </head>
      <body>
      プログラミング講座
      <br/>
      <p>
      ・<a target="_content" href="prog1.html">第一回 プログラミングの基礎</a><br/>
      ・<a target="_content" href="prog2.html">第二回 順次処理とは</a><br/>
      ・<a target="_content" href="prog3.html">第三回 分岐処理とは</a><br/>
      ・<a target="_content" href="prog4.html">第四回 繰り返し処理とは</a><br/>
      ・<a target="_content" href="prog5.html">第五回 開発環境を整える</a><br/>
      ・<a target="_content" href="prog5.html">第六回 サイドバーを活用する</a><br/>
      </p>
      </body>
      </html>
  

2、Sidebar登録用のHTMLファイルを書く

まだJavaScriptの基礎的な部分をしていないので、さっぱりなんのこっちゃという状態になっているかも知れませんが、全然難しい事はやっていません。落ち着いて何度か眺めていればなんとなくは分かってくると思いますので、ポイントだけ説明しておきます。
下のの<script>から</script>の間にJavaScriptが埋め込んでありまして、実際には表示されません。(1)と(4)の部分に同じ名前(addBonchiToSidebar)があるのは偶然ではなくて、(4)のリンクをクリックしたら(1)の処理を実行するようになっています。
(2)でこの処理を実行中のブラウザがSidebar機能を持っているか判定して、もし持っている場合はSidebar登録処理を実行し、持っていない場合は(3)にジャンプして、メッセージを表示した後、Mozillaサイト表示します。
実際にMozillaとIEで試してみれば、その動作の違いが分かって面白いと思います。

      <html>
      <head>
      <title>ぼんち塾をサイドバーに追加</title>
      </head>

      <body>
      <script language="JavaScript">
      <!--
      function addBonchiToSidebar() (1)
      {
      if ((typeof window.sidebar == "object") && (2)
      (typeof window.sidebar.addPanel == "function")) { 
      window.sidebar.addPanel ("ぼんち塾", 
      "http://www.mumpk.com/juku/sidebar.html",""); 
      } else { (3)
      var rv = window.confirm ("あなたのブラウザにはサイドバーが無いようです。" 
      + "この機会にもじらをぜひ使ってみて下さい。"); 
      if (rv) 
      document.location.href = "http://www.mozilla.org/";
      } 
      } 
      //--> 
      </script>
      <a href="javascript:addBonchiToSidebar();">ぼんち塾をサイドバーに追加</a>(4)
      </body>
      </html>
  

時間がある人は上記の内容をコピーしたテキストファイル(ファイル名はなんでもいいんですがとりあえずbonchi.htmlとでもしておいて下さい)を作成して、実際に試してみる事をお勧めします。
自分で作ってみるのが面倒な人や時間のない人は以下リンクをクリックすれば登録されますので、ご心配なく。これでこれからはサイドバーを開くだけですぐにぼんち塾をチェック出来るようになります。
ぼんち塾をサイドバーに追加

JavaScriptを使うと簡単に動きのあるウェブページを作れる事が分かってもらえたでしょうか。インターネット上にはJavaScript入門ってなページがわんさかありますから、ちょっと予習しておいて下さい。
それでは終わります。一同礼!!

目次へ 戻る 次へ