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. 経過時間の表示

先週できたパズルゲームUIの改進

参考

• http://www18.big.or.jp/~neon2/bunkatu/tips9.shtml

改進点：

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

1. ピースをあらかじめランダムにセット
   1. initialData の改造
   2. PlayBox_Paint の改造
2. マウス移動できる
3. 勝負判定
4. 経過時間の表示