Translate

2013年4月16日火曜日

mgwtを使った簡単なアプリをApp Engineに配置してiPhoneで見る

日本語で書かれたmgwtの使い方をGoogleって探してみたら

理想を抱いて..
http://susie-zero.blogspot.jp/search/label/MGWT

という記事を見つけただけだった。

この記事にあるサンプルを実行しようと思ったのだが
当然iPhoneで動きを見たい..

なのでApp EngineのアプリケーションID1つ使って
iPhoneのSafariで開いてみた。


用意するもの
 Java+Eclipse+Google,Safariプラグインが入ったPC
 Google App Engineの空いているアプリケーションID
 iPhone

0. mgwt-1.1.2.jarをダウンロードし適当なフォルダへ置く
1. Eclipse(+Googleプラグイン)を起動
2. 新規「Webアプリケーションプロジェクト」を作成
 プロジェクト名称、パッケージ名は適当
 Google Web ツールキットを使用、Google App エンジン使用ともにチェック
 サンプルコードを生成もチェック(面倒なのでサンプルベースで試す)
 ※ワークスペースはUTF-8にしておく
3. プロジェクト名の上で右クリック、ビルドパス>ビルドパスの構成
 ライブラリタブ
 外部Jar追加(mgwt-1.1.2.jarを追加する)
 OKボタン
4. src/~/~.gwt.xmlを編集
 コメント行の下に以下の行を挿入

<inherits name="com.googlecode.mgwt.MGWT">
<set-property name="user.agent" value="safari"></set-property> ←Safariを使う
<set-property name="mgwt.os" value="iphone"></set-property> ←iPhone風に
<set-configuration-property name="mgwt.css" value="pretty"></set-configuration-property>
←スタイル名難読化解除

※safariをgecko1_8とかにかえるとFireFoxでも開くが、
 iPhoneで開く時にエラーダイアログが出てしまう

5. war/~.htmlを開く
 
<h1> WebApplication Starter Project</h1>
 から
 </table>

 まで削除する

5. src/~.clientパッケージ以下のEntryPoint実装クラスを開く
 onModuleLoad()以外全部のフィールドとインナークラスを削除する
 onModuleLoad()内の実装をすべて削除する
 黄色いアンダーラインのついているimport文を全部削除する

6. onModuleLoad()内に以下の実装
 //ViewPointのセット、モバイルセッティング
 MGWT.applySettings(MGWTSettings.getAppSetting());

 //AnimationHelperを生成、パネルへ
 AnimationHelper animationHelper = new AnimationHelper();
 RootPanel.get().add(animationHelper);

 //mgwtレイアウトパネル
 LayoutPanel layoutPanel = new LayoutPanel();
 //mgwtボタン
 Button button = new Button("Hello mgwt");
 layoutPanel.add(button);
 
 //AnimationHelperへ
 animationHelper.goTo(layoutPanel, Animation.SLIDE);


 ※コードは上記サイトからお借りしました


※パッケージは候補2つ出てきたらmgwtの方を選択すること

7. プロジェクトを右クリック
 実行>Webアプリケーション
 開発モードタブ内のURLをコピー
 ブラウザを起動しコピーしたURLを開く
 ※iPhone風のボタンが1個(1行?)ぺたっと表示される
 コンソールタブの赤四角ボタンを押し実行終了

8. プロジェクトを右クリック
 Google>Appエンジンへデプロイ
 App Engineプロジェクト設定...
 アプリケーションIDに用意したIDをセット
 配置ボタン押下

9. iPhoneのSafariを起動
 http://~.appspot.com/ を開く
 ※iPhone風の背景とボタンが出ればOK

なんか最初に出た画面だけ右端消えていたけど、
iPhoneの上下を変えてみたら綺麗に右端が戻った。


ブラウザのバーがいやな場合は
HTML+JavaScriptで封じ込めるか。。
Safari側の動きをなんとかするJavaScript調べないと..

というより基本部品


でもこれでMacBookがない環境でも
iPhone向けアプリ開発もどきができるようになった。

これはWindows PCばかりのIT会社とかでは
けっこう大きいメリットじゃないかな


にしても使っている日本人が少ないのは悲しいけど..

bolt.new をローカルPC(Windows10)で動かす

生成AIによるコード生成ツールはだいぶ進化しており、 ユーザ要件を入力するとJavaScript/TypeScriptコードにしてくれる サービスが登場し始めた。 特に、 bolt.new はOSS(MITライセンス)があり ローカルPCで動作するとのこと。 ただ生成AIモデルは...