paiza開発日誌

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

ブロックをつなげるだけで計算機アプリが開発できる「Calconic」を使ってみた!

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

今回は、ブロックを繋いでいくだけで「画面UI」や「計算ロジック」などを自由に組み立ててオリジナルの計算機アプリを開発できる珍しいサービスをご紹介します!

アイデア次第で活用方法は無限にあり、例えばスマホ代の料金やローンの返済をシミュレーションできる計算機なども簡単に作れてしまいます。

スマホにも自動で最適化されるので、ご興味ある方はぜひ試してみて下さい!

Calconic

f:id:paiza:20180718114628j:plain

■「Calconic」の使い方

それでは、実際に「Calconic」を使いながらどのようなサービスなのかを見ていきましょう!

まずは、サイトのトップページ上部にある「SIGN UP」ボタンをクリックします。

f:id:paiza:20180718114644j:plain


無料のユーザー登録画面になるので、ユーザー名・メールアドレス・パスワードを入力しておきましょう!

f:id:paiza:20180718114657j:plain


すると、自分専用の「マイページ」が表示されます!

f:id:paiza:20180718114707j:plain

この画面から、新規に計算機アプリを作成したりテンプレートからさまざまな種類の計算機を扱えるようになります。

■単純な「計算機アプリ」を作ってみよう!

ここからは、実際に簡単な計算ができるアプリを作りながら「Calconic」の機能を見ていきたいと思います。

最初にマイページから「新規作成」のボタンをクリックします。

f:id:paiza:20180718115155j:plain


すると、編集用のエディタが表示されます!

f:id:paiza:20180718115205j:plain

このキャンバス上に、さまざまな機能を持ったブロックを繋げていくだけで自分好みのデザインやロジックを組み立てて計算機を作れるようになっています。


そこで、右側のメニューから「数値ブロック」を選択してみましょう!

f:id:paiza:20180718115218j:plain


3つの「数値ブロック」を配置するとこんな感じになります。

f:id:paiza:20180718115233j:plain

ブロックの左側に表示されている「#1」「#2」「#3」というのが、1つずつのブロックを意味しておりあとで計算ロジックを作成する時に使用します。


それぞれのブロックは、右側のメニューから細かいカスタマイズが可能になっています。

f:id:paiza:20180718115247j:plain

「①Show label」は、ブロック上部にラベル名を表示するかどうかを設定できます。

「②Min - Max」は、入力できる数値の範囲(最小〜最大値)を設定します。

「③Default value」は、数値ブロックに初期状態で入力されている数値を設定します。

他にも、小数点の設定などいくつかのパラメータが用意されているので、自分好みに調節をしておきましょう!


次に、「数式ブロック」を選択します!

f:id:paiza:20180718115311j:plain


このブロックは計算ロジックを組み立てて、結果を表示することができます。

f:id:paiza:20180718115323j:plain


右側のメニューから、青色のボタンをクリックしてみましょう。

f:id:paiza:20180718115342j:plain


すると「ロジック作成エディタ」が表示されるので、実行したい計算式を入力していきます。

f:id:paiza:20180718115351j:plain

先ほど数値ブロックの横に表示されていた「#1」〜「#3」を使い、例えば全部の数値を合計するのであれば【 #1 + #2 + #3 】という数式になりますね。


数式を作成すると、実際の結果も反映されて表示されます!

f:id:paiza:20180718115405j:plain

このように計算ロジックを自由に組み立てることで、さまざまなシミュレーションが可能です。


入力用のブロックは他にもいくつか用意されており、ラジオボタンやチェックボックス・スライダー形式・ドロップダウンリストなどがあります。

f:id:paiza:20180718115419j:plain


また、計算結果の表示についてもいくつかブロックが用意されており、ゲージで表示したり結果に応じたテキストを表示することも可能です!

f:id:paiza:20180718115428j:plain

これらのブロックは、数値の範囲を細かく調整できるのでさまざまな計算シミュレーションに活用できるでしょう!

■オリジナルの「BMI計算機アプリ」を作ってみよう!

基本的な「Calconic」の使い方が分かったところで、もう少し実用的な計算機アプリを作ってみましょう!

そこで、「身長」と「体重」さえ分かれば計算できる「BMI」を測定できるアプリを作ってみたいと思います。


まずは、体重を入力するための数値ブロックを配置します。

f:id:paiza:20180718115450j:plain


次に身長ですが、範囲がある程度決まっているのでスライダーで入力するようにしてみました。

f:id:paiza:20180718115501j:plain


そして、「BMI値」を表示するための数式ブロックを配置します。

f:id:paiza:20180718115511j:plain


BMI値は、【 体重 ÷ ( 身長 ✕ 身長 ) 】で求めることができるので、これを数式に変換して入力します。

f:id:paiza:20180718115521j:plain

身長は「m(メートル)」に変換する必要があるので100で割ってから2乗(^2)すれば良いでしょう。


完成すると、こんな感じにBMIが測定できます!

f:id:paiza:20180718115532g:plain


ちなみに、測定結果を非表示にして「ゲージ」や「テキスト」で表現しても面白いでしょう!

f:id:paiza:20180718115600j:plain

また、アプリのカラーやデザイン・UIのカスタマイズも設定から細かく調整できるので、自分好みのアプリに仕上げるのも簡単です。


「Calconic」の公式サイトでは、他にもたくさんのデモアプリが公開されているので、いくつか実際に試してみると楽しいですよ!


計算機アプリのサンプルデモ集|Calconic

f:id:paiza:20180718115618j:plain

■ネット上に公開してみよう!

作成した計算機アプリは、簡単にネット上へ公開することも可能なので合わせてご紹介しておきます!


まず最初に、「SAVE」ボタンからアプリを保存しておきます。

f:id:paiza:20180718115637j:plain


次に、「EMBED」ボタンが現れるのでクリックします。

f:id:paiza:20180718115647j:plain


「ACTIVATE」ボタンをクリックしましょう!

f:id:paiza:20180718115700j:plain

(※特定のサイトだけに表示するホワイトリストの設定も可能です)


すると、公開用のURLが生成されて表示されます!

f:id:paiza:20180718115716j:plain

あとは、このURLをSNSやメールなどで友人・知人へ教えてあげれば、誰でも計算機アプリを利用することができます!

このように、オリジナルのロジックを組み込んだ計算機アプリを手軽に作成して公開できるので、自社サービスの料金シミュレータのような活用方法も面白いのではないでしょうか。

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


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

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

■まとめ

今回は、ブロックを繋げるだけでオリジナルの計算機アプリを作成&公開できる「Calconic」を駆け足でご紹介しました!

計算シミュレーションを行えるWebアプリを手軽に開発できるというコンセプトは非常に珍しく、アイデア次第でさまざまな活用方法が考えられるのではないでしょうか。

ご興味ある方はぜひ一度トライしてみて下さい!


<参考>



 

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

詳しくはこちら

paizaラーニング

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

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

詳しくはこちら

paizaのスキルチェック