PR

プログラミングの知識は不要!『Joint Apps Beta』でオリジナルアプリを手軽に作ってみよう

※広告が表示される場合があります

Tips

これくらい簡単に作れれば楽しいだろうなぁ。
アプリ制作にはプログラミングがつきものですが、それを習得しようとなると、やっぱり壁は厚い。特にプログラミングのプの字にすら触れたこともない人ならすぐに投げ出してしまいたくなるでしょう。今回紹介するのは、そんなプの字すら感じさせないアプリ作成サービス『Joint Apps Beta』です。
Google Playへの公開はできませんが、オリジナルなアプリをブラウザ上で「プログラミング」不要で作成できるというのがポイントです。

『Joint Apps Beta』はパソコンのブラウザ上で作成できるお手軽ウェブサービス

なんといってもブラウザ上で機能をドラッグ&ドロップするだけでアプリが作れるっていうのが最大の特徴です。そこに行き着くまでにプログラミングを学ぶ必要すらないというのは、アプリを作ってみたいな〜っていう願望を思いのほか簡単に実現できます。

Joint Apps Betaにアクセスしてユーザー登録から

Joint Apps Betaでオリジナルアプリを制作するには、まずユーザー登録を行う必要があります。

20140824 JAB02

ブラウザからJoint Apps Betaにアクセスしたらページ中央あたりにある【アプリを作ってみる】をクリックしてユーザー登録を行っていきましょう。

20140824 JAB03

【新規登録】をクリックしたら必要事項(メールアドレス・パスワードなど)を入力して登録を完了させます。

20140824 JAB04

ユーザー登録が完了したら、晴れてアプリ制作を行うことができるようになります。【アプリを作る】をクリックして実際に制作を開始してみましょう。

シンプルなアプリ作成画面。機能をドラッグ&ドロップで組み立てよう

実際にアプリ作成画面を表示してみると、なんともシンプルな画面構成。これで本当にアプリを作成できるのか不安になってしまうほどにシンプル。

20140824 JAB05

要はこの画面に表示されているマスに機能ボタンをうまいことはめ込んでいくとアプリとしてちゃんと動くよってことなんですね。

20140824 JAB06
20140824 JAB07

20140824 JAB08
20140824 JAB09

画面下部にある4つの色分けされたタブが各種機能ボタンの表示切替で、タブごとにボタンが利用できるボタン群が表示されています。タブごとに機能ボタンの数が違うので、プログラミング不要とはいっても、それぞれがどんな役割を果たすのかを理解するにはそれなりにいじってみないとわかりませんね。

20140824 JAB10

とはいっても、ボタンをドラッグ&ドロップして埋め込んでいくだけなので、なんとなく簡単にできそうな気がしてきた不思議。ブロック枠にはめ込めるのは、同じ色のボタンのみなので間違えることもなさそうな感じです。

20140824 JAB11

枠に機能を埋め込んだら、その機能のボタン名などをつけておくと、あとから修正するときなどが楽そうですよ。

とりあえずカメラアプリを作ってみた

なんとな〜く仕組みを理解できてきたなと思ったら、これまたなんとな〜く実際にアプリを作ってみることをオススメします。僕はなんとな〜くカメラアプリを作ってみました。

20140824 JAB12

なんとなくこんな流れで写真を取ったら保存するっていうアプリ。とても普通です。ここまでの流れができたら、あとは実際に操作するときのボタンの配置を決めるだけ。

20140824 JAB13

といっても、これがなかなか難しいものなんですよね。画面中央にあるグレーな枠をスマートフォンの画面に見立ててボタンをドラッグ&ドロップで配置していきます。ここで注意したい点が、スマートフォンの画面解像度に応じてボタンを配置しなくてはいけないというところ。
初めて作成したときに、レイアウトに解像度切替タブがあるとは気づかずにボタンを配置してしまったため、実際に自分のスマートフォンで操作しようとしたらボタンが画面からはみ出してしまっていました。

20140824 JAB14

機能の作成・レイアウト編集が完了したら、保存していきます。適当なアプリ名を付けて保存をクリックしましょう。公開設定を非公開にしていると、実際に自分のスマートフォンでアプリ動作を試してみようとしても表示されないので、「公開」に設定して【保存】をクリックします。

スマートフォン用アプリから実際にアプリを試してみる

オリジナルアプリを制作したら、実際にどのように動くのかスマートフォンを使って動作を確認してみましょう。こちらもGoogle Playからスマホ用Joint Appsアプリをインストールしておきます。

20140824 JAB16 20140824 JAB17

アプリをインストールして起動したらまずは【Setting】タブをタップしてユーザー登録したメールアドレスとパスワードを入力します。入力が完了したら【Search】タブをタップして、自分で制作したアプリを探し出します。先述した通り、アプリ保存時に公開設定を非公開にしていると表示されないので注意しましょう。
自分で制作したアプリのほか、他ユーザーが制作したアプリを試すことも可能です。見当たらない場合は【マイアプリのみ】にチェックを入れて探しましょう。

マイアプリをダウンロードして試してみる

マイアプリを見つけたらタップして実際にスマートフォンで操作してみます。

20140824 JAB18 20140824 JAB19

【Download】をタップするだけでOKです。【Play】をタップするとアプリが起動します。

20140824 JAB20 20140824 JAB21

先述した通り、解像度のことを頭にいれてレイアウトを編集していないと、ボタンが画面からはみ出してしまいます。これはけっこうショック。修正する場合は再度パソコンのブラウザから自分のスマートフォンの解像度にあったタブを選んでボタン配置を行いましょう。
修正が終わったら、上書き保存してスマートフォン側でアプリを起動するときに【Update】をタップしてから起動し直すと修正が反映された状態でアプリが起動します。

いまいちピンとこないときは用意されている説明書をもとにアプリを作ってみよう

いきなりオリジナルアプリを作れるよ〜なんていっても、何を作ってみればいいのかピンとこないこという人が大半でしょう。Joint Apps Betaのウェブサイトでは「アプリの使い方・作り方」というのも紹介されています。
押せばちゃんとピアノが弾ける「ピアノアプリ」や画像に文字を入れて楽しめる「ジェネレータアプリ」など、けっこう楽しく作れそうなアプリが多数あります。
これらを説明を見ながら作っていくと、自分でこういうアプリが作りたいな〜っていう欲望が出てくるかもしれません。何事も楽しいと感じることができればどんどんやってみたくなるもの。ぜひこのサービスを使って面白いアプリ作成に挑戦してみてはいかがでしょう。

今回紹介したウェブサービスはこちらからアクセス

JointApps

アプリのダウンロードはこちらから

Joint Apps PlayerPlay icon Joint Apps Player

制作: デジタルハリウッド株式会社
価格: 無料
平均評価: 4.2(合計 8 件)

posted by: AndroidHTML v2.3

[amazonjs asin=”B00H7UAIXA” locale=”JP” title=”(合本)イラストでよくわかるシリーズ JavaScript&PHP&Androidアプリ(イラストでよくわかるJavaScript Ajax・jQuery・HTML5/CSS3のキホン/イラストでよくわかるPHP はじめてのWebプログラミング入門/イラストでよくわかるAndroidアプリのつくり方)”][amazonjs asin=”484433087X” locale=”JP” title=”かんたん7ステップ JavaからはじめようAndroidプログラミング”]

コメント

タイトルとURLをコピーしました