読者です 読者をやめる 読者になる 読者になる

釣りとバイクと自転車とキャンプと開発と。

趣味の釣り・キャンプ・バイク・自転車と、仕事のプログラミング系の記事を書きます。

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

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


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



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

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

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

f:id:junyax:20131029133629j:plain


まずは画面作成から。

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


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

f:id:junyax:20131029133830j:plain

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

f:id:junyax:20131029134317j:plain


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

f:id:junyax:20131029134953j:plain

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

f:id:junyax:20131029135547j:plain


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

f:id:junyax:20131029134601j:plain


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


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


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

f:id:junyax:20131029135737j:plain


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

f:id:junyax:20131029135849j:plain


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

f:id:junyax:20131029135941j:plain


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

f:id:junyax:20131029164005j:plain


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

f:id:junyax:20131029164157j:plain



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



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

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

f:id:junyax:20131029140646j:plain


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

f:id:junyax:20131029141033j:plain


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


f:id:junyax:20131029141148j:plain

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

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

f:id:junyax:20131029141822j:plain


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

f:id:junyax:20131029141910j:plain


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

f:id:junyax:20131029162840j:plain

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

f:id:junyax:20131029164305j:plain


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