アルファサード株式会社 代表取締役 野田 純生のブログ


3分で作るWebブラウザ (OS X & Windows)


公開日 : 2014-01-11 17:02:44


25日に東京でXojo勉強会を行います(というか、会場提供して1コマお話させていただきます)。会場はさほど広くないのであまり人数に余裕はありませんが、今のところ古参? のユーザーさんが中心のようなので(以前はREALBasicあるいはREAL Studio)、これから、という方にも参加いただけたらいいなと思い、チュートリアル的なものを書いてみます。Xojoのサンプルにもあり、紹介動画もアップされていますが、簡易Webブラウザを作るというものです。


少し古いもの(REAL Studio時代)の動画もあります。

アカウントの作成とダウンロード

以下のページから、アカウントを作成してログイン、まずはダウンロードしてください。

ディレクトリごとアプリケーションフォルダにドロップしてコピーし、起動します(起動したら一旦終了してMacを一度再起動しておいたほうがいいかもしれません)。

Xojo自体は、無償で利用できます。お金がかかるのは作成したアプリをビルドする時。つまり、ダブルクリックで起動する単独のアプリケーションを作成したり配布したりする時にライセンス登録が必要になります。ライセンスはビルドの対象毎に必要です。今回のようなデスクトップアプリのライセンスは 34,000円。他にWebアプリやコンソールアプリ等を作成する場合には別のライセンスが必要です。すべてが含まれるProライセンスというものもあります。

3分で作る簡易ブラウザ

今回作るのは、以下のようなアプリケーションです。

  • テキストフィールドに入力したURLに「Go」ボタンクリックでアクセスすると、ページを表示するWebブラウザ

(ソースコード)ExampleBrowser.zip

ダブルクリックしてXojoを起動したら、「デスクトップアプリケーション」タブを選択し、適当なアプリ名を入力して「OK」をクリックします。

起動時の画面

ウィンドウへのコントロールの配置

デフォルトでウィンドウが1つ登録されています。今回はこれをこのまま使います。 右上の「ライブラリ」ボタンをクリックして(最初はデフォルトで表示されているはずです)各コントロールを表示します。HTMLビューワをウィンドウにドロップして配置します。

HTMLViewerの配置

配置後、マウスドラッグして大きさを調整します。「インスペクタ」ボタンをクリックすると、オブジェクトのプロパティが編集できます。今回は特に名前も設定も変更せず、設定するのは右下の「Locking」の部分のみ。下と右の鍵マークをクリックします。これでウィンドウリサイズ時にHTMLビューワが追随するようになります。

コントロールの配置(四隅をロックする)

同じ要領で、PushボタンとTextフィールドを配置します(冒頭のムービーでは「戻る」「進む」「再読み込み」ボタンを追加していますが、ここでは省略します。Textフィールドの「Locking」は新たに右の鍵を選択します。Pushボタンの「Locking」では、左鍵を外し、逆に右鍵を選択、ボタンのラベル(Caption)に「Go」を入力します。

コーディング

配置を大きさを確定したら、いよいよコードを書きます。といっても、コードはたったの一行ですが。

GOボタンへのコードを追加(1)

Goボタンをダブルクリックします。「イベントハンドラの追加 PushButton 1」と表示され、イベントの一覧が表示されます。「Action」を選択して(最初から選択されているかと思います)、「OK」。

GOボタンへのコードの追加(2)

以下のコードを入力します。

HTMLViewer1.LoadURL( TextField1.Text )

入力途中には入力候補が表示されます。tabで候補を出し、returnで確定です。Xojoでは、大文字と小文字を区別しません(が、気持ち悪いのですよね。正確にタイプしていただいて構いません...)。

実行する

コードの入力と実行

入力できたら、緑のボタン「実行」をクリックします。URLを入力して「Go」ボタンをクリックしてください。ページが表示されましたか? 表示された方は、勉強会参加いただいて大丈夫ですw。尚、実行されるアプリケーションは一時的に作成されるもので、アプリケーションの実行が終了すると自動的に削除されます。単独で起動するアプリケーションを作成する段階になったら、ライセンスの購入を検討すれば良いでしょう。

実行中のブラウザ画面

以上、いかがでしたか? この例はとても簡単だと思いますが、Xojo自体は高度なオブジェクト指向、プラグインによる拡張、OSネイティブの機能へのアクセスなど、本格的な開発が可能なポテンシャルを持っています。Xcodeに挫折した人とかにはお勧め。

Windows版のビルド

画面を見ていただきわかる通り、このキャプチャはMac OS X上のものですが、ビルドライセンスがあればこのまま Windows用のアプリをビルドすることができます。

ビルド設定

Windows 8上で実行してみます。

Windows 8での実行

ちゃんと動いてますね。ということで、興味もたれた方いらっしゃいましたら、是非勉強会へ。

カテゴリ


このブログを書いている人
野田純生の写真
野田 純生 (のだ すみお)

大阪府出身。ウェブアクセシビリティエバンジェリスト。 アルファサード株式会社の代表取締役社長であり、現役のプログラマ。経営理念は「テクノロジーによって顧客とパートナーに寄り添い、ウェブを良くする」。 プロフィール詳細へ