paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

コードを書かずに誰でもPWAライクなスマホアプリを開発&公開できる「Calcapp」を使ってみた!

f:id:paiza:20181003132419j:plain
どうも、まさとらん(@0310lan)です!

今回は、誰でも簡単にアプリを開発してそのままスマホの実機で利用することができるWebサービスをご紹介します!

Excelやスプレッドシートなどの表計算アプリでよく使う「関数」を活用してロジックを簡単に組み立てられるのが特徴で、PWAのようなアプリとしてリリースすることが可能です。

記事後半では、Zapier経由でスプレッドシートにデータを保存する機能の作り方も解説しているのでぜひ参考にしてみてください!

Calcapp

f:id:paiza:20181003132619j:plain

■「Calcapp」の使い方

それでは、まず「Calcapp」をどのように使えばいいのかを見ていきましょう!

サイトのトップページにある「START APP DESIGNER」というボタンをクリックします。

f:id:paiza:20181003132719j:plain


すると、ログイン不要でアプリ開発用のエディタが利用できるので、右下にあるボタンをクリック!

f:id:paiza:20181003132736j:plain


さまざまな用途に合わせたテンプレートを選択できるのですが、今回は「Blank」をクリックしてゼロから作ってみましょう!

f:id:paiza:20181003132753j:plain


アプリ開発用のエディタがブラウザ上に起動します。

f:id:paiza:20181003132826j:plain

あとは、このGUIエディタを使って好きなアプリを自由に開発できるようになります。

すべての作業はマウス操作とExcelなどで使う関数を使い、アプリのロジックや外観などを簡単に構築できるうえ、スマホ画面に最適化されたプレビュー機能も搭載されているので便利です。

■簡単なミニアプリを開発してみよう!

ここからは、実際に「Calcapp」を使って簡単なミニアプリを構築しながら、基本的な操作について解説していきます!

今回は、サンプル例として「身長」「体重」を入力すると「BMI値」を出力するだけのミニアプリを作ってみたいと思います。


そこで、「Blank」のテンプレートで開発エディタを開き「→」アイコンをクリックしましょう!

f:id:paiza:20181003132927j:plain


すると、3種類のパネルを選択できるので計算処理用のパネルを新規追加します。

f:id:paiza:20181003133359j:plain


パネルが表示されるので、まずは「アプリ名」を入力しておきましょう。

f:id:paiza:20181003133416j:plain


次に、右下の「ADD FIELD」ボタンをクリックして入力フィールドを追加します。

f:id:paiza:20181003133428j:plain

「身長」「体重」を入力できるようにして、その値からBMIを計算して「結果」フィールドに出力するようにしたいと思います。


そこで、「結果」の「① 入力フィールド」をクリックして、画面上にある「② 関数ボックス」を選択しましょう!

f:id:paiza:20181003133449j:plain

この関数ボックスへ、BMIを求める計算式「体重 ÷ ( 身長 ✕ 身長 )」を設定していきます。


パネル上の入力フィールドが赤色にハイライトされるので、体重の入力箇所をクリックしましょう!

f:id:paiza:20181003133508j:plain


すると、クリックした値の「名称」が関数ボックスに自動挿入されます。

f:id:paiza:20181003133526j:plain

この機能を活用して計算式を組み立てていくわけです。

またExcelなどでもよく使う関数も利用可能で、例えば値を2乗したければ「POWER()」という関数が使えます。

体重 / POWER(身長, 2)


このように記述すれば、BMI値を求めることができるわけです。

f:id:paiza:20181003133731j:plain


ロジックができたので、画面下にある「プレビュー」アイコンをクリックしてみましょう!

f:id:paiza:20181003133744j:plain


すると、スマホに最適化されたプレビュー画面が表示されて、先ほど作成したBMI測定アプリの画面が表示されます!

f:id:paiza:20181003133801j:plain

ただし、「結果」の部分が赤色でエラーになっていることが分かります。

これは「身長・体重」をまだ入力していないからであり、正しい値を入力するとちゃんとBMI値を求められます。


しかしながら、初期表示でエラーが出力されるのは好ましくないので計算式を次のように修正しておきましょう!

IFERROR(体重 / POWER(身長 / 100, 2), 0)


「IFERROR()」関数を使うと、何らかのエラーが出力されている状態の時に別の表示を出力することが可能です。(この例では「0」を出力するようにしています)

f:id:paiza:20181003133902j:plain

また、BMI値を求めるには身長を「m」に置き換える必要があるので、「身長 / 100」と記述することで変換しています。


これで、もう一度プレビューを表示するとエラー出力は無くなり、値を入力するとBMI値が表示されることが分かりますね!

f:id:paiza:20181003133925j:plain

このように、Excelやスプレッドシートなどでもお馴染みの関数を活用することで、簡単に計算ロジックを組み立てられるのが大きな特徴と言えるでしょう。

さらに応用すれば、入力フォームなどのバリデーションも簡単に作成できますよ。

■スマホの実機で操作してみよう!

「Calcapp」で作成したアプリは、スマホの実機でも利用することができるので合わせてご紹介しておきます!

まず、この機能を利用するには無料のユーザー登録が必要なので、画面上にあるアカウント作成ボタンをクリックしましょう。

f:id:paiza:20181003134008j:plain

メールアドレスを登録するとパスワード設定用のURLが返信されてくるので、そこから初期設定を済ませます。


登録が完了したら、以下のURLにスマホのブラウザからアクセスしましょう!

<スマホ用のアクセスURL>
https://connect.calcapp.net/


すると、次のようなログイン画面が表示されます。

f:id:paiza:20181003134113j:plain

先ほど登録した「メールアドレス」と「パスワード」を使ってログインしましょう。


作成したアプリが起動します!

f:id:paiza:20181003134135j:plain

プレビュー画面と同じくBMI値を計算できるのが分かりますね。


さらに、スマホブラウザのメニューから「ホーム画面に追加」を選ぶことで、スマホのホーム画面にアプリが登録できます!

f:id:paiza:20181003134202j:plain

このホーム画面からアプリを起動すると、一般的なスマホアプリと同じように単独で起動させることができるので便利です。
(ちなみに、オフラインでもアプリを起動できます。詳細はこちら

■ 「スプレッドシート」にデータを保存できる機能を作ろう!

「Calcapp」だけでもさまざまなアプリ開発ができるのですが、任意のWebサービスと連携できる「Zapier」を組み込むことでより高度なアプリ開発も可能です!

例えば、Twitter / Facebook / Slack / Dropbox / Evernote…など、普段よく使っているサービスを相互に組み合わせることができるわけです。


そこで、先ほど作成した「BMI測定アプリ」の結果をGoogleのスプレッドシートに保存できるように改造してみましょう!

まずは、「ADD BUTTON」をクリックして「保存ボタン」を追加しておきます。

f:id:paiza:20181003134422j:plain


次に、Zapierのサービスにログインして新規の「Webhooks」を作成します!

f:id:paiza:20181003134508j:plain


「Catch Hook」を選択してCalcappからのデータ送信を取得できるようにしましょう。

f:id:paiza:20181003134526j:plain

次の画面で表示される「オプション設定」はそのまま「Continue」をクリックしてください。


すると、専用のURLが表示されるのでコピーします。

f:id:paiza:20181003134547j:plain


「Calcapp」の画面に戻り、ボタンの設定で「① Send data to ...」を選択してからコピーしたURLを「② ボックス」に貼り付けます。

f:id:paiza:20181003134605j:plain


プレビュー画面から「保存ボタン」をクリックすると、正しくデータが送信されたことを伝えるメッセージが表示されます。

f:id:paiza:20181003134632j:plain

これで、Zapierを経由してCalcappから送信されたデータを取得できるようになったわけです。

あとは、取得したデータをスプレッドシートに記録すれば保存機能は完成です!


そこで、今度はZapierの画面から「スプレッドシート」を選択します。

f:id:paiza:20181003134701j:plain


「Create Spreadsheet Row」を選択します。

f:id:paiza:20181003134721j:plain


次に、適当な名前を付けたスプレッドシートを1つ作成します。(今回はmyzapierという名称にしました)

f:id:paiza:20181003134741j:plain

BMI測定アプリから送信するデータの項目を記述しておきます。

今回は、「身長」「体重」とBMIの測定値である「結果」という項目があるので、それらを入力しておきます。


そして、Zapierの画面から先ほど作成したスプレッドシート「myzapier」が選べるようになっているのでクリックします。

f:id:paiza:20181003134806j:plain

合わせて「シート」も選択しておきましょう。


今度は、スプレッドシートに入力した「身長・体重・結果」の項目を、Calcappから送信されるデータと紐付けていきます。

f:id:paiza:20181003134827j:plain


最後に、Zapierのプロジェクト名を入力して「ON」に設定すれば完成です!

f:id:paiza:20181003134842j:plain


Calcappのプレビュー画面から「保存ボタン」をクリックしてみましょう。

f:id:paiza:20181003134900j:plain


すると、リアルタイムにスプレッドシートへデータが記録されているのが分かりますね!

f:id:paiza:20181003134943j:plain

もちろんスマホの実機からでもデータを記録することが可能です。

このように、Zapierを経由するとさまざまなWebサービスと簡単に連携することが可能なので、データの保存だけでなくSNSへ自動投稿したりチームでデータを共有するような使い方もできるわけです。

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、誰でも簡単にアプリを開発して公開できる「Calcapp」についてご紹介しました!

ちょっとした業務で使うアプリや個人で利用するタスク管理など、さまざまなシーンで便利に活用できるアプリケーションを素早く構築して公開できるのは大きな魅力と言えるでしょう。

現在はまだベータ版であり、これからさらに便利な機能が追加される予定なのでぜひみなさんもオリジナルのアプリを開発してシェアしてみてはいかがでしょうか!


<参考>



 

paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud