My Favorite Something...

<< August 2017 | 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 >>
FontAwesome
DroidscriptではFontAwesomeが使用できます。
FontAwesomeは日本語でいうと「ものすごいフォント」って感じの意味になりますが、名称は置いておいて、要はベクトルアイコンのセットです。
詳しくはこちらを見ていただくのが一番かと。

Droidscriptではどうするか。

例えばButtonの場合、通常だと
btn = app.CreateButton( "Press Me", 0.3, 0.1 ); 

表示されるButtonはこんな感じ。


FontAwesomeを使うと
btn = app.CreateButton( "[fa-hand-o-up]", 0.3, 0.1, "FontAwesome"); 

表示はこんな感じになります。



今回はButtonでしたが、当然Textなどでも使用できます。

また、基本的にはテキスト扱いですので、テキスト色と同じようにこんな感じで色も付けられます。赤くしてみましょう。
btn = app.CreateButton( "[fa-hand-o-up]", 0.3, 0.1, "FontAwesome");
btn.SetTextColor( "#FF0000" );
表示はこんな感じで、赤くなりました。




ちょっとした所でアイコンを使いたい時などに便利ですね。
-----
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に代わるみたい。その場合は拡張子をリネームしてくださいね。
-----
「Droidscript」
こんにちは。

「DroidScript」が面白いです。
「DroidScript」はJavaScriptでAndroidアプリの開発ができるAndroidアプリです。
アプリはGoogle Playで公開されています。

このアプリはIDEでありかつスクリプト実行エンジンとなっており、アプリ上でJavaScriptを使用してスクリプトを書き実行することが可能です。
作ったスクリプトをspkという形式で保存することが可能で、別環境のDroidScript上でspkを実行することができます。

また、別売りのプラグインを使用することでapk化すことも可能ですので、アプリをGoogle Playななどに公開もできます。

開発の基本構造はシステムイベントに対する関数を作成することで進めます。
OnStart() ・・・アプリが生成されたとき
OnBack() ・・・Backキーが押されたとき
OnPause()・・・アプリ中断時
・・・
これらの関数内で、あらかじめ定義されているApp,Controls,Componentsオブジェクトを駆使してアプリを作っていく感じになります。

最近確認したら本家のサイトがありました。

アプリ内にもドキュメントが付属していますが、情報を得るにはDroidScript Wikiが良いと思います。
-----

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