CodeZine(コードジン)

特集ページ一覧

W-ZERO3やiPAQなどで動作するタブブラウザの実装

Windows Mobile 5.0でタブブラウザを作ってみる

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/07/11 00:00

Compact Framework 2.0で新しく追加されたWebBrowserコントロールを使うと、簡単にWebブラウザを作成することができます。今回はこのWebBrowserコントロールとTabコントロールを使ってタブブラウザを実装する方法を、初心者向けに解説します。

はじめに

 Compact Framework 2.0ではWebBrowserコントロールという、Webブラウザの機能をもったコントロールが新たに追加されています。このコントロールを使うと、簡単にWebブラウザを作成することができます。今回はこのWebBrowserコントロールとTabコントロールを使って、タブブラウザを作ってみます。

対象読者

 .NET Compact Framework を使ってWindows Mobileアプリケーションの開発をしてみたい初心者の方を対象にしています。

必要な環境

アプリケーションの仕様

 基本的にはできる限り通常のWebブラウザに近いイメージですが、最低限以下の機能は実装します。

  • URLをテキストボックスに入力してボタンを押すとブラウズ
  • タブを追加できる(右ソフトキーメニュー)
  • タブを削除できる(右ソフトキーメニュー)
  • ページを戻ることができる(左ソフトキーメニュー)

ユーザーインターフェイスの作成

 画面上には、URLを入力するtextBoxコントロール、ブラウズを開始するためのButtonコントロール、そしてTabコントロールは画面のBottomにDockさせて、高さをタブの高さぎりぎりにします。さらに左右のソフトキーメニューにメニューを追加します。

 

ブラウザ管理

 今回WebBrowserコントロールをタブに合わせて動的に生成します。生成したWebBrowserコントロールは、Listオブジェクトとしてまとめておきます。特定のWebBrowserコントロールを取得する際には、WebBrowserコントロールリストから探して操作をします。

 また、現在表示中のページを保存する変数を一つ用意しておきます。

List<WebBrowser> lstWebBrowser = new List<WebBrowser>();
int currentpage;

タブの追加

 タブの追加にはいくつかの処理が含まれます。

  1. タブページの作成
  2. タブコントロールへの追加
  3. WebBrowserコントロールの作成(整形)
  4. WebBrowserコントロールのリストへの登録
  5. 追加したページへ表示ページを移動
private void CreateTab()
{

    TabPage newpage = new TabPage();
    newpage.Text = "...";

    tabControl1.TabPages.Add( newpage );

    WebBrowser newBrowser = new WebBrowser();
    newBrowser.Parent = this;
    newBrowser.Location = new Point(0, this.txtUrl.Height + 10);
    newBrowser.Size =
        new Size(this.Width, this.Height-12 - this.txtUrl.Height -
                             this.tabControl1.Height);
    newBrowser.Anchor =
        AnchorStyles.Bottom | AnchorStyles.Top | 
        AnchorStyles.Left|AnchorStyles.Right  ;
    lstWebBrowser.Add(newBrowser);

    newBrowser.DocumentCompleted +=
        new WebBrowserDocumentCompletedEventHandler(
            newBrowser_DocumentCompleted);
    newBrowser.Navigated +=
        new WebBrowserNavigatedEventHandler(newBrowser_Navigated);

    tabControl1.SelectedIndex = tabControl1.TabPages.Count - 1;

}

タブの削除

 タブの削除の実装はシンプルです。現在表示しているページに対応したWebBrowserコントロールを削除し、併せてタブページの削除を行います。タブページが1ページのみの場合は処理をしません。

 一見、さらにページ移動の処理が必要な気がしますが、タブページの削除に伴い、自動的にページが移動されるので、特に処理は不要です。

private void mnuRemovePage_Click(object sender, EventArgs e)
{
    if (tabControl1.TabPages.Count == 1)
    {
        return;
    }
    else
    {
        WebBrowser thispage = lstWebBrowser[currentpage];
        thispage.Dispose();
        lstWebBrowser.Remove(thispage);
        tabControl1.TabPages.RemoveAt(currentpage);
    }
}

WebBrowserコントロールのイベント処理

 動的に作成したWebBrowserコントロールのイベントを受けられるように処理を追加します。

 1つはブラウザがページを読み込み終わったときの処理で、タブに名前を登録する際に利用します。今回はURLのホストアドレスをTabの名前として利用します。

 もう1つはWebBrowserが別ページに移動した際の処理で、こちらはURLを入力するテキストボックスのURLを変更するために利用します。URLのセットはテキストボックスに入力した際も利用します。そのため、「http://」を入力しなかった際の保管処理も実装しています。基本的にこちらはURLをフルで使うため、WebBrowserコントロールのURLプロパティをそのまま使います。

private void newBrowser_Navigated(
    object sender, WebBrowserNavigatedEventArgs e)
{
    setPageUrl();
}

private void newBrowser_DocumentCompleted(
    object sender, WebBrowserDocumentCompletedEventArgs e)
{
    int page = lstWebBrowser.IndexOf((WebBrowser)(sender));
    tabControl1.TabPages[page].Text =
        ((WebBrowser)(sender)).Url.Host.ToString();
}

private void setPageUrl()
{
    WebBrowser thispage = lstWebBrowser[currentpage];
    if (thispage.Url != null)
        this.txtUrl.Text = "http://" + thispage.Url.ToString();
    else
        this.txtUrl.Text = "";
}

タブページ移動時の処理

 基本的にタブページ移動を行った際には、まず前のページのWebBrowoserコントロールを隠して、次に選択したページに対応するWebBrowserコントロールを表示します。そして、現在ページを更新します。

private void tabControl1_SelectedIndexChanged(
    object sender, EventArgs e)
{
    if( tabControl1.TabPages.Count -1 >= currentpage )
        lstWebBrowser[currentpage].Hide();
    currentpage = tabControl1.SelectedIndex;
    WebBrowser thispage = lstWebBrowser[currentpage];
    thispage.Show();
    setPageUrl();
}

元のページに戻る処理

 ハイパーリンクなどで移動した際には元のページに戻る処理が可能です。このあたりの処理はすべてWebBrowserコントロールに集約されているので、ユーザーは戻るためのメソッドを実行するのみです。また、ページ移動がされていない場合を考慮して、CanGoBackプロパティを使ってページバックが可能かどうかをチェックすることができます。

private void mnuBackPage_Click(object sender, EventArgs e)
{
    WebBrowser thispage = lstWebBrowser[currentpage];
    if( thispage.CanGoBack )
        thispage.GoBack();
}

まとめ

 タブブラウザはページを提供してくれますが、今回はページ移動のためのガイドとして利用しました。基本的にWebBroserコントロールはフォーム上に直接配置して利用するためです。これらの複数のWebBrowserコントロールを操作するために、Listオブジェクトを利用するのは有効な手段です。

 

 まだまだ、Webブラウザとしては機能が足りません。残りの機能は皆さんが実装してみてください。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 高橋 忍(タカハシ シノブ)

    マイクロソフト エバンジェリスト。開発者の方向けに.NETテクノロジを中心とした様々なテクノロジをご紹介しています。デザイン好きガジェット好きが高じて最近は.NET Framework 3.0 のWPFやCompact Frameworkをご紹介しています。

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5