Xojo日本語ブログ

マルチプラットフォーム対応アプリが開発できるXojoのブログです。

一行のコードで作るXojo製Webブラウザ

今回はXojoを使ってWebブラウザアプリを作ってみたいと思います。とても簡単に作成できますのでぜひ試してみてください。

コントロールを配置する

まずXojoを起動し、「プロジェクトの選択」でデスクトップアプリケーションを選択して、新規プロジェクトを作成します。アプリケーション名は「MyWebBrowser」など適当に付けてください。

次にウィンドウにコントロールを配置します。今回は以下の3つです。

  • TextField
  • PushButton
  • HTMLViewer

これらを次のように配置します。

f:id:moongift:20160610152257p:plain

Placeholderを表示する

Placeholderはテキストフィールドなどに薄い文字で表示される入力例になります。TextFieldを選択した状態でインスペクタを選択します。

その中にあるCueTextというプロパティに文字を入力すると、それがテキストフィールドに入力されます。この文字はアプリケーション実行時に文字を入力すると消えます。

ボタンのラベルを変更する

ボタンのラベルを変更する場合はボタンのインスペクタにあるCaptionを変更します。今回はGoとしています。

コントロールの名前を変更する

各コントロールはデフォルトでPushButton1のような名前がついています。これではプログラムから判別がしづらくなるので、分かりやすい名前をつけてあげましょう。

  • TextField → txtURL
  • PushButton -> btnGo
  • HTMLViewer -> viewHTML

などとします。

イベントを追加する

最後にイベント処理を追加します。イベントはボタンをダブルクリックします。そうすると次のようなウィンドウが表示されます。

f:id:moongift:20160610152316p:plain

この中の Action を選択します。そうすると、下のような画面になり、ここにプログラムを書けるようになります。

f:id:moongift:20160610152603p:plain

今回はテキストフィールドに入力された文字をそのままHTMLViewerにURLとして渡してあげます。つまりコードで書くと次のようになります。

viewHTML.LoadURL(txtURL.Text)

ウィンドウの変更に追従するようにする

最後に、ウィンドウを変更した場合に各コントロールのサイズが変わるようにします。これは各コントロールのLockingプロパティを変更します。

例えばテキストフィールドは画面幅を変えると高さはそのまま、幅が変わって欲しいとします。その場合、上左右を固定します。ボタンは上からの位置、右側を固定します。

f:id:moongift:20160610152333p:plain

最後にHTMLViewはすべての場所を固定とします。これで、ウィンドウサイズを変えると、それに合わせてコントロールのサイズが変わるようになります。

f:id:moongift:20160610152342g:plain

試す

では実際に試してみましょう。画面上にある実行ボタンをクリックします。

そしてアプリケーションが立ち上がったらURLを入力してGoボタンをクリックします。

無事、Webサイトが表示されたら完成です。

f:id:moongift:20160610152404p:plain


さらに左側のビルド設定から他の環境を選んでビルドを行うと開発しているコンピュータ以外の環境向けの実行ファイルも生成されます。

このように、Xojoを使えばわずかなコーディングだけでも簡単にアプリケーションが開発できます。ぜひお試しください!

Xojo(ゾージョー)仕事に。研究に。”使える”アプリを瞬速×クロス開発|グレープシティ株式会社