モバイル チュートリアル：Web ブラウザ コンポーネントを使用する（iOS および Android）

提供: RAD Studio
移動先: 案内、 検索

モバイル チュートリアル：モバイル アプリケーション開発（iOS および Android） への移動


FireMonkey では、Web ブラウザ コンポーネントは TWebBrowser コンポーネントとしてラップされています。TWebBrowser は、モバイル アプリケーションだけでなく、デスクトップ アプリケーションでも使用できますが、このトピックでは、iOS および Android プラットフォーム用の簡単な FireMonkey Web ブラウザ アプリケーションの作成方法を説明します。


TWebBrowserDemo.png

ユーザー インターフェイスを設計する

  1. 次のいずれかを選択します。
  2. ［ツール パレット］で TToolBar コンポーネントを選択して、フォーム デザイナにドロップします。
    TToolBar を探すには、［ツール パレット］の検索ボックスに数文字（"tool" など）を入力します。
    SelectToolBar 2.png

  3. コンポーネントをドロップすると、TToolBar コンポーネントがフォーム デザイナの上部に表示されます。以下は、フォーム デザイナの［スタイル］ドロップダウン メニューで［iOS］を設定した後のスクリーンショットです。
    ToolBarOnForm.png

  4. ［ツール パレット］で TButton コンポーネントを選択し、TToolBar 上にドロップします。
  5. フォーム デザイナで TButton コンポーネントを選択し、［オブジェクト インスペクタ］で、StyleLookup プロパティを priortoolbutton に設定します。
  6. ［ツール パレット］で TEdit コンポーネントを選択し、TToolBar 上にドロップします。編集コントロールの幅が TToolBar の領域いっぱいになるようにサイズを調整します。
    ToolBarButtonAndEditControl.png

  7. フォーム デザイナで編集ボックスを選択し、［オブジェクト インスペクタ］で、ReturnKeyType プロパティを Done に、KeyboardType プロパティを URL に、KillFocusByReturn プロパティを True に設定します。
    モバイル プラットフォームにおける、より適切な仮想キーボード タイプの選択の詳細については、「Web ブラウザ アプリケーションに適したキーボードを選択する」を参照してください。
  8. ［ツール パレット］で TWebBrowser コンポーネントを選択し、フォーム上にドロップします。
  9. フォーム デザイナで Web ブラウザ コンポーネントを選択し、［オブジェクト インスペクタ］の Align プロパティに Client を選択します。
    上記の手順が済むと、フォームは次の図のようになっているはずです。
    NewBrowserAppOnDesigner.png

ユーザーが編集コントロールで URL を変更すると Web ページを開くようイベント ハンドラを記述する

デスクトップ プラットフォームとは異なり、モバイル プラットフォームでは、次の図のように仮想キーボードを使用してテキストを入力します。ユーザーが "Done" をクリックするとアクションが終了します。

iOS Android

VirtualKeyBoard iOS.png
iPad

VirtualKeyBoard Android.png
Android（LG - E612）


FireMonkey では、ユーザーが行うアクションのほとんどに対応できるよう、多様なイベント ハンドラが用意されています。 "Done" ボタンが選択されると、FireMonkey フレームワークによって TEdit コントロールに OnChange イベントが送信されます。それに対して、"Back" ボタンには特定のイベントが存在しません。このセクションでは、両方のシナリオに対応するイベント ハンドラを実装します。

Web ページを開くための共通メソッドを実装する

イベント ハンドラを実装する前に、まず、編集コントロールの Text プロパティを基に Web ページを開く共通メソッドを実装します。

  1. TForm1 クラスの private セクションで、OpenURL メソッドを宣言します：

    Delphi の場合： 

      private
    { Private declarations }
    procedure OpenURL;

    C++Builder の場合： 

    private:        // User declarations
  void __fastcall openURL();
  2. openURL メソッドを次のように実装します。

    Delphi の場合：
     

    procedure TForm1.OpenURL;
begin
  WebBrowser1.Navigate(Edit1.Text);
end;


    C++Builder の場合： 

     void __fastcall TForm1::openURL()
  {
      WebBrowser1->Navigate(Edit1->Text);
  }

OnChange イベントのイベント ハンドラを実装する

  1. （フォーム デザイナで）編集コンポーネントを選択し、（［オブジェクト インスペクタ］の［イベント］タブで）OnChange イベントの隣の空白領域をダブルクリックしてイベント ハンドラを作成します。
    ［オブジェクト インスペクタ］によって Edit1Change というイベント ハンドラが新規作成されます。
    Edit1ChangeAtObjectInspector.png

  1. 以下のコードを追加して、イベント ハンドラを完成させます。

    Delphi の場合：
     

    procedure TForm1.Edit1Change(Sender: TObject):
begin
  OpenURL;
end;

    C++Builder の場合： 

    void __fastcall TForm1::Edit1Change(TObject *Sender)
{
    openURL();
}

"戻る" ボタンのイベント ハンドラを実装する

Web ブラウザの戻るボタンの実装は、Web ブラウザ コンポーネントの GoBack メソッドを呼び出すだけです。

Delphi の場合：
 

procedure TForm1.Button1Click(Sender: TObject);
begin
  WebBrowser1.GoBack;
end;

C++Builder の場合： 

void __fastcall TForm1::Button1Click(TObject *Sender)
{
   WebBrowser1->GoBack();
}

これで、この Web ブラウザ アプリケーションの基本動作の実装が終わりました。Android デバイス、iOS シミュレータ、または iOS デバイスでアプリケーションを実行してみます。

Web ブラウザ アプリケーションに適した仮想キーボードを選択する

初めての Web ブラウザ アプリケーションを実行すると、仮想キーボードが最適化されていないことに気付きます。

iOS では、次のようないくつかの仮想キーボードが用意されています。

Alphabet： Default： EmailAddress： NamePhonePad：
VktAlphabet.png VktDefault.png VktEmailAddress.png
 VktNamePhonePad.png




NumberPad： NumbersAndPunctuation： PhonePad： URL：
VktNumberPad.png VktNumbersAndPunctuation.png VktPhonePad.png VktURL.png



Android では、次のようないくつかの仮想キーボードが用意されています。

Alphabet： Default： EmailAddress： NamePhonePad：
VktAlphabet Android.png VktDefault Android.png VktEmailAddress Android.png
 VktNamePhonePad Android.png




NumberPad： NumbersAndPunctuation： PhonePad： URL：
VktNumberPad Android.png VktNumbersAndPunctuation Android.png VktPhonePad Android.png VktURL Android.png




Web ブラウザ コンポーネントに最適な仮想キーボードの種類は、URL です。「ユーザー インターフェイスを設計する」で既に説明したように、次のステップでは、この例で Web ブラウザ コンポーネント用の仮想キーボードの種類として URL を設定します。フォーム デザイナで編集ボックスを選択し、［オブジェクト インスペクタ］で、KeyboardType プロパティを URL に設定します。

TEdit Properties.png

WebBrowser モバイル サンプル コード

モバイル サンプル コードの WebBrowser プロジェクトは、このチュートリアルで説明されている機能を示しています。

WebBrowser プロジェクトは、以下の場所にあります。

関連項目

「https://docwiki.embarcadero.com/RADStudio/Seattle/j/index.php?title=モバイル_チュートリアル：Web_ブラウザ_コンポーネントを使用する（iOS_および_Android）&oldid=213731」から取得