My Favorite Something...

<< August 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
WEBブラウザを作ってみる
Droidscriptを使って簡単なWebブラウザアプリを作ってみる。 アプリのレイアウトは下記のような感じにしよう。 上部にURLの表示があり、下部にナビゲーション用のボタンを配置した必要最低限のものとする。
DroidscriptではずはOnCreate()を作成する。 ここがアプリの入口になり、画面のレイアウトなどもこちらで作成する。 まず、全体的なレイアウトを作成する。
    var lay = app.CreateLayout( "Linear", "Vertical, VCenter, FillY" );
    lay.SetBackColor( "#000000" )
URL表示部分を作成する。DroidscriptではTextEditが用意されているのでこれを使う。 0.98は水平方向の最大サイズを1.0とした場合の割合を指定する。0.07も同様にす垂直方向の割合を指定する。
    edit = app.CreateTextEdit( "http://", 0.98, 0.07 );
    edit.SetTextColor( "#FF000000" );
    edit.SetBackColor( "#FFFFFFFF" );
    edit.SetMargins( 0.01, 0, 0.01, 0 );
    lay.AddChild( edit );
ブラウザ部分を作成する。DroidscriptではWebViewが用意されているのでこれを使う。 サイズの指定は前と同じように指定する。マージンも同様である。
    web = app.CreateWebView( 0.98, 0.84 );
    web.SetMargins(0.01, 0.01, 0.01, 0.01 );
    web.SetOnProgress( web_OnProgess );
    lay.AddChild( web );
画面下部の3つのナビゲーションボタンを作成する。まず水平方向のレイアウトを作成し、その中にButtonを3つレイアウトし、作ったレイアウトを全体的なレイアウトに追加する。
    layunder = app.CreateLayout( "Linear", "horizontal, FillX" );
    layunder.SetMargins( 0.01, 0, 0.01, 0  );
    btnback = app.CreateButton( "戻る", 0.35, 0.07 );
    btnback.SetOnTouch( btnback_OnTouch );
    layunder.AddChild(btnback);
    btnhome = app.CreateButton( "ホーム",0.28, 0.07 );
    btnhome.SetOnTouch( btnhome_OnTouch );
    layunder.AddChild(btnhome);
    
    btnnext = app.CreateButton( "次へ",0.35, 0.07 );
    btnnext.SetOnTouch( btnnext_OnTouch );
    layunder.AddChild(btnnext);     lay.AddChild( layunder );
次に、URLを表示しよう。 Webページの読み込みが終了したらURLを書き込むようにする。
//Show page load progress.
function web_OnProgess( progress )
{
     if( progress==100 ) {
        edit.SetText( web.GetUrl() );
    }
}
最後に、ナビゲーションボタンにコードを追加していく。 戻るボタンには戻ることができれば(web.CanGoBack() )戻る(web.Back())処理を追加する。
function btnback_OnTouch()
{
    if ( web.CanGoBack() )
        web.Back();
}
ホームボタンには、デフォルトURLを表示するようにしよう。
function btnhome_OnTouch() {    web.LoadUrl(DefaultURL); }
進むボタンには、進むことができれば(web.CanGoForward())進む(web.Forward())処理を追加。
function btnnext_OnTouch()
{
    if ( web.CanGoForward() )
        web.Forward();
}
これで出来上がり〜。 一応、全ソース
DefaultURL = "https://www.google.co.jp/"
//Called when application is started.
function OnStart()
{
    app.SetOrientation( "Portrait" );
    
    //Set BackKey Disabled
    //app.EnableBackKey( false );
    
    //Create a layout with objects vertically centered.
    var lay = app.CreateLayout( "Linear", "Vertical, VCenter, FillY" );
    lay.SetBackColor( "#000000" )
    edit = app.CreateTextEdit( "http://", 0.98, 0.07 );
    edit.SetTextColor( "#FF000000" );
    edit.SetBackColor( "#FFFFFFFF" );
    edit.SetMargins( 0.01, 0, 0.01, 0 );
    lay.AddChild( edit );
    //Create a web control.
    web = app.CreateWebView( 0.98, 0.84 );
    web.SetMargins(0.01, 0.01, 0.01, 0.01 );
    web.SetOnProgress( web_OnProgess );
    lay.AddChild( web );
    layunder = app.CreateLayout( "Linear", "horizontal, FillX" );
    layunder.SetMargins( 0.01, 0, 0.01, 0  );
    btnback = app.CreateButton( "戻る", 0.35, 0.07 );
    btnback.SetOnTouch( btnback_OnTouch );
    layunder.AddChild(btnback);
    btnhome = app.CreateButton( "ホーム",0.28, 0.07 );
    btnhome.SetOnTouch( btnhome_OnTouch );
    layunder.AddChild(btnhome);
    
    btnnext = app.CreateButton( "次へ",0.35, 0.07 );
    btnnext.SetOnTouch( btnnext_OnTouch );
    layunder.AddChild(btnnext);
    lay.AddChild( layunder );
    //Add layout to app.    
    app.AddLayout( lay );
    web.LoadUrl(DefaultURL);
}
//Show page load progress.
function web_OnProgess( progress )
{
    if( progress==100 ) {
        edit.SetText( web.GetUrl() );
    }
}
function btnback_OnTouch()
{
    if ( web.CanGoBack() )
        web.Back();
}
function btnhome_OnTouch()
{
    web.LoadUrl(DefaultURL);
}
function btnnext_OnTouch()
{
    if ( web.CanGoForward() )
        web.Forward();
}
SPKはこちらでダウンロード。 SPKはDroidScriptのアプリを受け渡しするためのファイルです。といっても中身はZIPファイルで、拡張子をZIP→SPKにしているだけです。 SPKをダウンロードして実行すると、スマホのDroidscriptで実行できますよ。 ※パソコンでは大丈夫なんですが、スマホやタブレットでダウンロードすると拡張子がZIPに代わるみたい。その場合は拡張子をリネームしてくださいね。
-----
コメント
コメントする









 

(C) 2018 ブログ JUGEM Some Rights Reserved.