Appery.io(旧Tiggzi)で試しに開発してみた。

Exadel社のAppery.io(旧Tiggzi)を試してみます。

PhoneGapベースのクロスプラットフォームのアプリ開発系サービスで、
ブラウザ上で開発→テストまで実行できるのです。
先日日本国内発のサービスMonacaが正式リリースされましたが、
UI作成やテストの簡単さではAppery.ioが一歩リードな感じかなと思います。
問合せ対応等は親切丁寧でしかも日本語対応なMonacaがかなり優勢な感じです。

では、とりあえず英語ドキュメント見ながら、
TwitPicの画像をTwitterIDで抽出する簡単なものを作成していきます。
TwitPicのAPIの内容はここを参考にしています。

※Tiggziの時にはTwitPicのサンプルもあったような気がするのですが、気のせいか。

まずは無料アカウント作成し、
「Apps」→　「Create new app」をクリックして新規プロジェクト作成。

まずは画面作成から。

※PhoneGapベースなので、HTMLとかCSSとかでかっこよい感じにもできますが、
　とりあえず簡単な画面で。
　いくつかスタイルは用意されているようです。

プロジェクト画面が開くのでとりあえず最初にある画面を表示します。

画面上部にgridをドラッグ＆ドロップし、
label、input、select、button等を配置します。
gridの行列は画面右側のプロパティで設定できます。
とりあえず3行、2列にしてます。

TwitPicはページ指定で画像一覧を取得できるので、
selectにとりあえず1～10の値を設定します。

optionsのchangeをクリックし、1～10まで追加します。

次に画面下部にTwitPicから取得した画像を動的に表示する為、
1行1列のgridをドラッグドロップし、1行1列に設定。
grid内にlabelとimageを追加します。

ここまでで画面作成は終了です。

次にTwitPicから画像取得するServiceを新規作成します。

「Create New」→「Service」を選択します。

適当な名前を付けて「REST」にチェックして作成します。

json形式で取得するのでURLにhttp://api.twitpic.com/2/users/show.jsonを指定します。

requestタブでusernameとpageのパラメータを追加します。
このパラメータは後で画面のinputとselectに紐付けます。

testタブで「test」を実行すると画面下部にレスポンスが表示されるので、
「Automatically Create・・・」をクリックします。
「Automatically Create・・・」をクリックする事でResponseタブ内にレスポンスの形式が登録されます。

ここまででTwitPicからデータ取得する部分は完成です。

ここから画面のイベント処理とデータ取得、画面表示を関連付けます。

最初に作成したStartScreenを表示してボタンを選択し、画面下部でイベント処理の紐付けを行います。
Componentにボタン、EventにClick、ActionにInvoke service、Detailsにサービスを追加します。

次にDataタブのRequestでリクエストのパラメータに画面のinput、selectを渡す設定をします。
ドラッグ＆ドロップで線がつながります。

次にRequestでRequestを画面のどこに表示するか設定します。
TwitPicのレスポンスはimagesがArrayなので、imagesを画面下部に追加したgridと紐付けます。
これでimagesが複数あった場合、自動でgridが拡張されます。
後はshort_idをラベルとimageのAssetに紐付けます。

最後にこれ重要。
TwitPicのAPIドキュメントを見ると、
画像のサムネイルを表示するには「http://twitpic.com/show/[size]/[image-id]」形式が必要ですが、
レスポンスにはshort_id(image-id)のみでURLがありません。

そこでレスポンスを表示する際にスクリプトを組み込んでやる必要があります。
imageのAsset横の「～～JS」をクリックして下さい。

スクリプト画面になるので、URLを組み立てる為に「return "http://twitpic.com/show/thumb/" + value;」を記述して下さい。

これで一通り完成なので、画面上部の「テスト」をクリックして動作確認します。

twitterアカウントを入力し、ボタンを押すと画像の一覧が表示されます。

htmlやjs等のソースを直接いじる事もブラウザ上で可能だし、
ソースやアプリのバイナリのダウンロードも可能。
これは便利だ。