Fx0には「Framin」というアプリがデフォルトでインストールされています。

これは「firefoxOSのアプリを作ることができるアプリ」という一風変わったアプリなんです。

自分の欲しいアプリを自由に作ることがデフォルトで可能になっているというあたり、如何にも「ギーグ向け端末」だなと思えます。

せっかくなので、このFraminを使って何かしらアプリを作ってみる企画を連載的な感じでやってみようと思います。

第一回は「Hello World代わりに画像を表示する」というところまでやってみます。

画面表示＝「ビュー」

Framinで作るアプリの「画面表示部分」のことを「ビュー」とよびます。MVCとかでよく聞くやつですね。

Framinを使えば画像や写真を使って簡単に画面を作れるということなので、早速作ってみましょう。

１：アプリを作る

まずは「画像を1枚表示するだけのアプリ」を作成します。

Framinを立ち上げると「アプリ新規作成」ボタンのある画面が出ますので、早速「アプリ新規作成」をタップしてみましょう。

アプリ名とサムネイル画像を設定する画面が表示されました。

緑色の丸い部分をクリックすると、端末の画像やカメラからサムネイル画像に使用するものが選択できます。

名前とサムネイル画像の設定ができれば、「次へ」をタップします。

２：ビューに使う画像を選ぶ

「次へ」をクリックすると、いきなりアプリのビューが表示されます。と、言っても何もない状態ですが・・・

ここで左上にある「ハンバーガーボタン」をタップすると、右側の作成画面が立ち上がります。

今回は「画像を1枚表示する」がゴールですので、「ビューを作成」をタップします。

すると端末内の画像かカメラで撮影した画像を選択する画面に移動しますので、使用する画像を選択・撮影します。

左の画像のようにトリミングもできますので、手書きモックアップやデザインカンプを撮影してみると良さそうです。

トリミングを完了すると「ビューの管理」という画面が出ますが、今回は1枚だけでOKなのでそのまま「完了」させちゃいます。

完成

「完了」を押すと先ほどの作成画面に追加した「ビュー」が表示されているのが確認できます。

ここで「レイアウト確認」をタップすると、何もなかった画面に先ほど設定した画像が表示されているのが確認できます。

この「ビュー」は複数登録や重なり順序の指定などもできますので、今回の手順を繰り返してアプリ画面を作っていくということになります。

次回は「画像を複数組み合わせたビューの作り方」か、「レシピで簡単にアプリを動かしてみる」のどちらかをやりたいと思います。

次回

[Fx0でアプリを作る]Framinでトリガーとアクションを作る | WP-kyoto