News

Visual Studio community 2015 アカウントについて　(学内専用)

1. WebBrowser　（基本）
2. Form（自動操作）←今週
3. HttpClient
4. REST & JSON

WebBrowser コントロールを利用した、ブラウザをコントロールアプリケーションの作成手順を紹介します。

Googleの検索ページを利用し、ページに表示されているテキストボックスに文字列が自動的に入力、フォームのサブミットボタンのクリックができ、ページを解析し、含まれるすべてのリンク文字列とそのURLを表示するなどもできる。

このようにプログラムからWebページを操作する場合、事前にそのHTMLのソースをチェックして、操作対象となるHTML要素を明確にしておく必要がある。Googleの検索ページのソースを見ると、フォームの定義部分で次のような記述を見つけることができる。

<form action="/search" name=f >
<input name=q size=55 value="" …… >
<input name=btnG type=submit value="Google 検索" …… >
……


Googleの検索ページ内のフォーム定義部分（抜粋）

この記述から、フォーム（<form>要素）には「f」という名前（name属性）が付けられており、またテキストボックス（<input>要素）には「q」、［Google検索］ボタン（サブミット・ボタン。「type=submit」という属性が付いている<input>要素）には「btnG」という名前が付けられていることが分かる。

 

コントロールの配置

Visual Studioを起動し、新しいWindows Formプロジェクトを作成します。

フォーム上次のコントロールを配置してください

ボタン：

• button1
• button2
• button3
• button4

リストビュー：

• listView1
  • listView1.View = View.Details;
  • columnHeader1=HERF
  • columnHeader2=text

ウェブブラウザ：

• webBrowser1

 

イベントハンドラ

Form1_Load

private void Form1_Load(object sender, EventArgs e)
{
    webBrowser1.Navigate("http://www.google.co.jp");
}

 

button1_Click

private void button1_Click(object sender, EventArgs e)
{
    HtmlElementCollection all = webBrowser1.Document.All;
    HtmlElementCollection forms = all.GetElementsByName("q");
    forms[0].InnerText = "c#"; // テキストボックスに「C#」を入力
}

 

button2_Click

private void button2_Click(object sender, EventArgs e)
{
    HtmlElementCollection all = webBrowser1.Document.All;
    HtmlElementCollection forms = all.GetElementsByName("f");
    forms[0].InvokeMember("submit"); // フォームのサブミット
}

 

button3_Click

private void button3_Click(object sender, EventArgs e)
{
    HtmlElementCollection all = webBrowser1.Document.All;
    HtmlElementCollection forms = all.GetElementsByName("btnG");
    forms[0].InvokeMember("click"); // ボタンのクリック
}

 

button4_Click

private void button4_Click(object sender, EventArgs e)
{
    HtmlDocument doc = webBrowser1.Document;

    // リンク文字列とそのURLの列挙
    foreach (HtmlElement he in doc.GetElementsByTagName("A"))
    {

        string href = he.GetAttribute("href"); // HREF属性の値
        string text = he.InnerText; // リンク文字列

        if (!string.IsNullOrEmpty(href)
            && !string.IsNullOrEmpty(text))
        {
            text = text.Replace("\r\n", ""); // 改行文字の削除
            string[] row_1 = { href, text };
            listView1.Items.Add(new ListViewItem(row_1));
        }
    }
}

 

実行結果

button1クリックすると、ページに表示されているテキストボックスに「C#」という文字列が自動的に入力される。

 

button2、button3のボタンをクリックすると、検索が実行されて検索結果ページが表示される。

button4のボタンをクリックすると、ページに含まれるすべてのリンク文字列とそのURLを表示する。

機能追加

フォーム上textbox　などを追加て、検索は「C#」に固定するではなく、textbox　などの内容を利用するように機能追加する。

Visual Studio community 2015 アカウントについて　(学内専用)

今週から、4回分けてWebについて学習する

1. WebBrowser　（基本）
2. WebBrowser　（自動操作）
3. HttpClient
4. REST & JSON

WebBrowser コントロール

WebBrowser コントロールを利用した、シンプルなアプリケーションの作成手順を紹介します。

Visual Studioを起動し、新しいWindows Formプロジェクトを作成します。

WebBrowserコントロールの配置

ツールボックスから”WebBrowser”コントロールをクリックして選択します。選択後フォームデザイナにドラッグ＆ドロップしフォームにWebBrowserコントロールを配置します。

フォームにWebBrowserコントロールを配置した直後の状態です。フォームいっぱいにコントロールが配置されます.

フォーム全体にコントロールが広がる原因は、”Dock”プロパティがデフォルトで”Fill”に設定されるためです。Dockプロパティを”None”に変更します。

Dockプロパティを”None”に変更するとコントロールのリサイズができるようになります。

コード

下記のコードを記述します。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WebBrowserControl
{
  public partial class FormMain : Form
  {
    public FormMain()
    {
      InitializeComponent();
    }

    private void FormMain_Load(object sender, EventArgs e)
    {
      webBrowser1.Navigate("http://lmspress.net");
    }
  }
}

 

 

解説

WebBrowerコントロールのNavigateメソッドを呼び出すことでページの取得と表示ができます。

実行結果

プロジェクトを実行します。下図のフォームが表示されます。Webサイトのページが読み込まれ表示されました。

ウィンドウをリサイズ対応

Dockプロパティ、またはAnchorプロパティを変更し、ウィンドウのリサイズに伴いWebBrowserコントロールのサイズが変化する設定に変えます。

実行し、ウィンドウをリサイズします。Webページが正しく表示されています。

機能拡張

下記の機能を追加してください

1. アドレスバー：URL入力
2. 戻るボタン：前のページに戻る
3. リロードボタン：ページ再読み込む

Visual Studio community 2015 アカウントについて　(学内専用)

パズルゲームUIの改進

改進点：

ピースを順番でセットするではなく、あらかじめランダムにセットして、マウス移動できるようにする

1. ピースをあらかじめランダムにセット
   1. initialData の改造

      // 変数関係の初期化処理
      private void initialData()
      {
          flg = new bool[9];
          data = new int[] { 0, 1, 2, 3, 4, 5, 6, 7, 8 };
          answer = new int[] { -1, -1, -1, -1, -1, -1, -1, -1, -1 };
          Random r = new Random(Environment.TickCount);
          for (int i = 0; i < 100; i++)
          {
              int a = r.Next(9);
              int b = r.Next(9);
              int n = data[a];
              data[a] = data[b];
              data[b] = n;
          }
          current = 0;
          answer = data; // chen : ランダムデータを直接結果に
          playflg = true;
          clearflg = false;
      }

       

   2. PlayBox_Paint の改造

      // PlayBoxの表示
      private void PlayBox_Paint(object sender, PaintEventArgs e)
      {
          if (img == null) { return; }
          Graphics g = e.Graphics;
          for (int i = 0; i < 9; i++)
          {
              // if (flg[i] == false) { continue; }    // chen : flg 無視
              if (answer[i] == 8) { continue; } // chen : 9個目描画しない
              int x1 = i % 3;
              int y1 = i / 3;
              int x2 = answer[i] % 3;
              int y2 = answer[i] / 3;
              Rectangle r1 = new Rectangle(100 * x1, 100 * y1, 100, 100);
              Rectangle r2 = new Rectangle(100 * x2, 100 * y2, 100, 100);
              g.DrawImage(img, r1, r2, GraphicsUnit.Pixel);
          }
          if (playflg == false)
          {
              if (clearflg)
              {
                  g.DrawString("CLEAR!!",
                      new Font("Impact", 48, FontStyle.Bold),
                      new SolidBrush(Color.Red),
                      new Point(40, 100));
              }
              else
              {
                  g.DrawString("GAMEOVER...",
                      new Font("Impact", 36, FontStyle.Bold),
                      new SolidBrush(Color.Blue),
                      new Point(20, 200));
              }
          }
      }
      

2. マウス移動できる　（隣と交換可能なら交換）

   private void swap_answer(int n, int m)
   {
       int t;
       t = answer[m];
       answer[m] = answer[n];
       answer[n] = t;
   }
   
   // PlayBoxをクリックした時の処理
   private void PlayBox_MouseDown(object sender, MouseEventArgs e)
   {
       if (playflg == false) { return; }
       if (img == null) { return; }
       if (current > 8) { return; }
       int x = e.X / 100;
       int y = e.Y / 100;
       if (x < 0) { return; }
       if (y < 0) { return; }
       if (x >= 3) { return; }
       if (y >= 3) { return; }
   
   
       int n = x + y * 3;
       //flg[n] = true;
       //answer[n] = data[current];
       //current++;
       if ((x > 0) && answer[(x - 1) + y * 3] == 8) swap_answer(n, (x - 1) + y * 3);
       if ((x < 2) && answer[(x + 1) + y * 3] == 8) swap_answer(n, (x + 1) + y * 3);
       if ((y > 0) && answer[x + (y - 1) * 3] == 8) swap_answer(n, x + (y - 1) * 3);
       if ((y < 2) && answer[x + (y + 1) * 3] == 8) swap_answer(n, x + (y + 1) * 3);
   
       // this.checkGameEnd();
       this.Refresh();
   
   }

3. 勝負判定

   private void PlayBox_MouseDown(object sender, MouseEventArgs e)
   {
       if (playflg == false) { return; }
       if (img == null) { return; }
       if (current > 8) { return; }
       int x = e.X / 100;
       int y = e.Y / 100;
       if (x < 0) { return; }
       if (y < 0) { return; }
       if (x >= 3) { return; }
       if (y >= 3) { return; }
   
   
       int n = x + y * 3;
       //flg[n] = true;
       //answer[n] = data[current];
       //current++;
       if ((x > 0) && answer[(x - 1) + y * 3] == 8) swap_answer(n, (x - 1) + y * 3);
       if ((x < 2) && answer[(x + 1) + y * 3] == 8) swap_answer(n, (x + 1) + y * 3);
       if ((y > 0) && answer[x + (y - 1) * 3] == 8) swap_answer(n, x + (y - 1) * 3);
       if ((y < 2) && answer[x + (y + 1) * 3] == 8) swap_answer(n, x + (y + 1) * 3);
   
       // this.checkGameEnd();
       this.checkClear();  // chen : clear check
       playflg = !clearflg; // chen :  clear なら、 not play
       this.Refresh();
   
   }

    

4. 経過時間の表示