#010 ABookBizを使ってアプリを動かそう！
ABookBizってホントにいろんなことができるんです。
pdfやofficeの資料にアクションを埋め込んだり、動画や画像のスライドショー、営業支援のための機能がたくさんあります。
今回は、そんなABookBizのほんの一部の機能を使ってアプリを動かしてみたいと思います。
アイデア次第でいろんなことができるので、ぜひ参考にしてみてくださいね。
活用方法は無限大
ABookBizでは、htmlを読み込み、表示する機能があります。
一般的なアプリではあまり聞かない機能ですよね。
htmlが使えるということは、ブラウザで操作できることは基本的にすべてできるということなので、できることの幅が一気に広がります。
例えば、ABookBizにこんなアプリを組み込むことが可能です。
・TODO管理ツール
・天気アプリ
・チャットアプリ
・メモアプリ
・単位変換ツール
・クロスワード/パズルゲーム
・単語帳
などなど
天気アプリやチャットアプリは通信を伴いますが、その他のアプリはオフラインでも利用することができるため、どこでもアプリを利用することが可能になります。
※ABookBizはオフラインでも利用可能です。
これが現場で選ばれる理由の一つです。
これってホントにすごいことですよね。
一つのアプリの中にいくつでもアプリを組み込めるんです。
でも、そもそもアプリが作れません。
そんな風に思う人が多いかもしれません。
ご安心ください。
アプリはAIに作ってもらいましょう！
この後、実際にアプリを作って動かすところまで解説していきます。
AIを使って超簡単に電卓アプリを作ってみる
今回は使っている人が多い、ChatGPT を利用していきます。
プロンプト
jqueyを利用して電卓のアプリを作成してください。
簡単な電卓であればこの程度のプロンプトで十分動作するプログラムを生成してくれます。
生成結果
こんな感じでHTML、CSS、Javascriptのプログラムを生成されました。
一部動作しないところがあったため、修正するように指示をしましたが、２ラリーくらいで、普通に動く電卓アプリを作成することができました。
実際のプログラム
HTML（index.html）
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no">
<title>Calculator</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button class="btn" value="1">1</button>
<button class="btn" value="2">2</button>
<button class="btn" value="3">3</button>
<button class="btn op" value="+">+</button>
<button class="btn" value="4">4</button>
<button class="btn" value="5">5</button>
<button class="btn" value="6">6</button>
<button class="btn op" value="-">-</button>
<button class="btn" value="7">7</button>
<button class="btn" value="8">8</button>
<button class="btn" value="9">9</button>
<button class="btn op" value="*">*</button>
<button class="btn" value="0">0</button>
<button class="btn" id="clear">C</button>
<button class="btn op" value="/">/</button>
<button class="btn" id="equals">=</button>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>CSS（style.css）
#calculator {
width: 100%;
margin: auto;
margin-top: 100px;
max-width: 420px;
padding: 10px;
}
#display {
width: 100%;
margin-bottom: 10px;
text-align: right;
height: 40px;
font-size: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.btn {
padding: 10px;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
}
.op {
background-color: #f0ad4e;
}
#clear, #equals {
grid-column: span 2;
}
#equals {
background-color: #5cb85c;
}
javascript（script.js）
$(document).ready(function() {
var display = $('#display');
var currentInput = '';
var operation = '';
var previousInput = '';
// 数字と演算子ボタンのクリックイベント
$('.btn').click(function() {
var btnValue = $(this).val();
// 等号（=）ボタン以外の処理
if (btnValue !== '=') {
if (btnValue === '+' || btnValue === '-' || btnValue === '*' || btnValue === '/') {
if (currentInput !== '') {
// 現在の入力が空でない場合に演算子をセット
operation = btnValue;
previousInput = currentInput;
currentInput = '';
}
} else {
// 数字ボタンの処理
currentInput += btnValue;
}
updateDisplay(currentInput);
}
});
// 等号（=）ボタンのクリックイベント
$('#equals').click(function() {
if (previousInput !== '' && currentInput !== '' && operation !== '') {
currentInput = String(evaluate(previousInput, operation, currentInput));
operation = '';
previousInput = '';
updateDisplay(currentInput);
}
});
$('#clear').on('click',function(){
clearAll();
});
// 全てをクリアする関数
function clearAll() {
currentInput = '';
operation = '';
previousInput = '';
updateDisplay('');
}
// ディスプレイを更新する関数
function updateDisplay(value) {
display.val(value);
}
// 計算を行う関数
function evaluate(firstNumber, operator, secondNumber) {
firstNumber = parseFloat(firstNumber);
secondNumber = parseFloat(secondNumber);
switch (operator) {
case '+': return firstNumber + secondNumber;
case '-': return firstNumber - secondNumber;
case '*': return firstNumber * secondNumber;
case '/': return secondNumber !== 0 ? firstNumber / secondNumber : "Error";
default: return 0;
}
}
});
アプリをABookBizで動かしてみる
作成した電卓アプリをABookBiz上で動かしてみたいと思います。
詳細な手順は省きますが、ドラッグアンドドロップで簡単にファイルをアップロードすることができます。
今回は「calculator.zip」という名前でzipファイルを作成し、アップロードしています。
これがオフラインでもアプリが使える理由ですね。
今回はオフラインを意識していますが、オンライン前提であれば、zipにせずにURLを直接指定して開くことも可能です。
ということで、実際の画面を見てみましょう。
あまりカッコいい電卓ではありませんが、5分でできたアプリなので、十分です。
見た目をよくしたり、機能を増やすのもよし、別のアプリを作るのもよし。
ABookBizではWeb上で動作するアプリが使えるので、ぜひ覚えておいてください。
まとめ
いかがでしたか？
今回は、実際に電卓アプリを作って、ABookBizで動かしてみるというものでした。
まだまだいろんな機能があって紹介しきれないですが、アイデア次第でいろんなことができるということが伝わったかと思います。
ぜひ試してみてくださいね。
ABookBizについて、もっと知りたい方はこちら↓