世紀末の墓

お気持ち.log

IT系寄りの雑記

webブラウザを自作したい!(2)

URLボックスの実装

見た目
f:id:silmin:20170803212614p:plain:w250f:id:silmin:20170803212617p:plain:w250

↑こんな風にしっかり変わります。

ちゃんと入力してEnterキーで飛ぶこともできるよ!
これがめちゃめちゃ時間かかったんだよなぁ(なんで)

あとちゃっかりタイトルもサイトによって変わるようにいじってます。

ソースコード

using System;
using System.Drawing;
using System.Windows.Forms;

//mainは割愛

class Browser : Form
{
    WebBrowser browser;
    TextBox urlBox;

    public Browser()
    {
        //item
        browser = new WebBrowser()
        {
            Location = new Point( 0, 30 ),
            Size = new Size( 1200, 800 )
        };
        urlBox = new TextBox()
        {
            Location = new Point( 30, 2 ),
            Size = new Size( 1000, 20 ),
            Font = new Font( "meiryo", 10 )
        };
        this.Controls.Add( browser );
        this.Controls.Add( urlBox );

        //event handler
        this.Shown += new EventHandler( this.Browser_Load );
        this.SizeChanged += new EventHandler( this.ReSized );
    }
    
    private void Browser_Load( object sender, EventArgs e )
    {
        this.ClientSize = new Size( 1200, 830 );
        this.Text = "My Browser";

        //script error block
        browser.ScriptErrorsSuppressed = true;

        //event handler
        browser.Navigated += new WebBrowserNavigatedEventHandler( this.Browser_Navigated );
        urlBox.KeyDown += new KeyEventHandler( this.urlBox_KeyDown );

        //first page
        string url = "http://www.google.co.jp";
        browser.Navigate( url );
    }

    private void urlBox_KeyDown( object sender, KeyEventArgs e )
    {
        if( e.KeyCode == Keys.Enter )  
        {
            if( urlBox.Text != string.Empty )
            {
                browser.Navigate( urlBox.Text );
            }
        }
    }

    private void Browser_Navigated( object sender, WebBrowserNavigatedEventArgs e )
    {
        this.Text = browser.DocumentTitle;
        this.urlBox.Text = browser.Url.ToString();
    }

    private void ReSized( object sender, EventArgs e )
    {
        int width = this.ClientSize.Width;
        int height = this.ClientSize.Height;
        this.browser.Size = new Size( width, height - 30 );
    }
}

前回に比べてちょっと増えましたね(当たり前)

urlBox = new TextBox()                //URLいれるやつ
{
    Location = new Point( 30, 2 ),
    Size = new Size( 1000, 20 ),
    Font = new Font( "meiryo", 10 )
};

TextBoxは結局フォントの大きさでheightが決まるみたいなので適当に目分量で決めました。
ゆるしてくださいなんでもしません。(しません。)
フォントがメイリオなのに深い意味はありません。思いついたのがメイリオだっただけです。

private void Browser_Navigated( object sender, WebBrowserNavigatedEventArgs e )
{
    this.Text = browser.DocumentTitle;            //タイトルを変更
    this.urlBox.Text = browser.Url.ToString();    //URLボックスに今のページのURLを格納
}

WebBrowser.Navigatedイベントはページ移動したときに発生するイベントらしいです。(雑)
だったらそこでタイトルとURL更新すればいいじゃないということで更新。

private void urlBox_KeyDown( object sender, KeyEventArgs e )
{
    if( e.KeyCode == Keys.Enter )              //押されたキーがEnterキーだったら
    {
        if( urlBox.Text != string.Empty )      //URLボックスが空じゃなかったら
        {
            browser.Navigate( urlBox.Text );   //そのURL先に移動
        }
    }
}

TextBox(Control).KeyDownイベントはキーが押下されたときに発生するイベントらしいです。
それ利用して移動させちゃいます。

先程言った時間のかかったポイントは e,KeyCode の部分です。


は?
普通じゃん。



そう今思えば普通なんですね。

ですが僕は Ctrl, Shift, Alt のような修飾キーの押されたモノを持つ Control.ModifierKeys と一生懸命比較していたためできなかった。
雑魚確定ですねorz


ここまでで一応今回の目標(?)は達成なんですが、1つやることがあります。

//script error block
browser.ScriptErrorsSuppressed = true;

これです。
これはスクリプトエラーを表示しないというフラグです。
trueで表示しないとなります。(デフォルト:false)

これしないとスクリプトエラー出まくってまともにブラウジングできなかったのでしておきます。

次回は戻る・進む・再読込機能とお気に入り機能付けたいなぁ・・・・(時間をくれ)

webブラウザを自作したい!(1)

今回はC#を用いてwebブラウザを作りたいと思います。
進捗があがり次第記事を書いていく形になると思いますし、完成形は考えて無いので(n)まで続きます。(どこまで続くかわからない)

それと、何故作るかというと...........作りたいからです。(理由はいらないですね)

基盤を作る

(1)なのでとりあえずは基盤というか、そんな感じのモノを作る。

今回作ったのは、実行したらgoogleに繋がるだけの代物。
UIなんて気にするな。↓の感じで。

f:id:silmin:20170801212856p:plain

タイトルバーの下のスペースはアドレスバーとか入れようかなって思って空けた。

ソースコード

using System;
using System.Drawing;
using System.Windows.Forms;

namespace Webbrowser
{
    class Program
    {
        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.Run( new Browser() );
        }
    }

    class Browser : Form
    {
        WebBrowser browser;

        public Browser()
        {
            browser = new WebBrowser()
            {
                Location = new Point( 0, 30 ),
                Size = new Size( 1200, 800 )                  
            };
            this.Controls.Add( browser );

            this.Shown += new EventHandler( this.Browser_Load );
            this.SizeChanged += new EventHandler( this.ReSized );

            string url = "http://www.google.co.jp";
            browser.Navigate( url );
        }

        private void Browser_Load( object sender, EventArgs e )
        {
            this.ClientSize = new Size( 1200, 830 );
            this.Text = "My Browser";
        }

        private void ReSized( object sender, EventArgs e )
        {
            int width = this.ClientSize.Width;
            int height = this.ClientSize.Height;
            this.browser.Size = new Size( width, height - 30 );
        }
    }
}

こんな感じになった。クソコードっていうな

はい。
後々改造していくし、まだハリボテなので許して。

WebBrowser browser;

こいつはwebブラウザに必要な事(低レイヤの部分?)を全部まるっとやってくれるすごいやつだ!
これをAddするだけで表示ができちゃう!正直びっくりした。
コレに頼ればできちゃうけど、中身もちゃんと理解できるようになりたいですね.....。
まあ今は使えるものは使いましょっと^^

string url = "http://www.google.co.jp";  //urlをstring型変数に格納
browser.Navigate( url );                 //urlをNavigateメソッドに渡す

WebBrowser.Navigate()は指定したURLに飛んでくれるメソッド。
圧倒的便利感。

//ウインドウのサイズが変更されたときに発火するメソッド
private void ReSized( object sender, EventArgs e )
{
    int width = this.ClientSize.Width;                   //現在のウインドウの横幅を格納
    int height = this.ClientSize.Height;                 //現在のウインドウの縦幅を格納
    this.browser.Size = new Size( width, height - 30 );  //表示領域を現在のモノに更新
}

一応リサイズにも対応できるようにしたよ。

あいさつ。

こんにちは。

当ブログでは僕の勉強記録や思ったこと等を書いていきます。

続くかどうかわからないし本人が忘れる可能性までありますが、どうか温かい目で見ていてくれると嬉しいです。

基本IT関連のブログになるかと思われます。

書いた中で、間違ってる事や補足等があったらガンガンまさかりぶん投げてくれて結構ですのでよろしくお願いします^^

僕がここに書いたことが、僕の後続(初心者)の方々の役に立ったら嬉しいです。

 

それと更新したら都度ツイートしますが、全然投稿されない.....Twitterには居るのになぁって時は、忘れている可能性大ですので言ってくれると助かります。

 

それではよろしくお願いします^^

 

↓最近買ったthink padちゃん(13インチ)

f:id:silmin:20170801170312j:plain かわゆい

f:id:silmin:20170801170325j:plainもちろんUS配列