Webixライブラリを使ってWebアプリを開発する手順を複数回にわたって説明します。（その１）No.041
これまで、何回か、Webixライブラリ（Javascript）とPHP言語でWebアプリ機能の事例を紹介してきましたが、スマホやタブレット、パソコンを含め、いろいろな端末でいろいろな業務で使えることを少しは実感していただけたかと思います。今回から数回にわたって、実際にアプリ開発をしながら、どのようにWebアプリを実装していくかの手順を紹介します。アプリ開発は、全ての機能を一度に作成することは大変で、少しづつ機能を実装し、操作性などを確認しながら機能を追加したり、修正したりします。また、どの端末（パソコン、スマホなど）で主に使用するかで、画面デザインや操作性も考慮する必要があります。そのあたりも意識しながら、実際のアプリを実装していく手順や考え方を紹介します。
（１）開発する業務（機能）の仕様について
まずは、どのような業務（機能）を作っていくかを簡単に整理する作業が必要です。今回の記事では、日報機能を作成してみます。日報といってもいろいろあると思いますは、以下のような日報機能です。
・スマホで、作業終了後に、簡単に作業時間、作業場所、作業内容などを記録する機能です。簡単に入力するためには、できるだけ、文章(文字）を入力せず、候補から選択することや、入力時の時間や日付をデフォルト（初期値）で指定することで、入力したり、選択する操作を短縮できる操作性になります。また、スマホでは、カメラを簡単に操作できるので、日報入力時に関連映像を撮影して日報に紐づける機能も実装します。さらに、作業場所として、候補から選択する方法に追加で、GPS機能を用いて、作業場所（日報は作業場場所で入力する前提で）の緯度、経度も記録したいと思います。
（GPSを使うのは、スマホやタブレットに限定されると思いますが）
緯度、経度の情報からGoogleマップ(地図）に作業場所をプロットする機能も実装したいと思います。
日報を後で閲覧したり、作業時間を集計したりする機能はパソコン操作を中心に考えます。（一覧や集計情報をEXCELにする機能も実装します）
業務アプリの基本構成は、以下のように実装することから考えると業務全体の操作性を整理しやすいです。（画面から中心に考えます）
まずは、対象業務に関する一覧表です。今回は、日報ですから作業日報一覧とします。複数人の人が入力したり閲覧することを考慮して、入力者の情報も一覧には表示させます。（各自の日報は、その人の情報だけ一覧に表示する一覧と集計用に、全員または、人を選択して一覧に表示する機能を別機能で実装する方が、作業目的に合わせて、メニューから機能を選択しやすくなります。この記事では、メニュー操作機能は、細かくは説明しませんが、ある程度の機能を実装するとき、提供する機能をメニューで管理し、やりたい業務をメニューから選択して実行する操作は必須になってきます。また、人によって、使える機能をフィルタしたり、同じ機能でも、編集できる権限やEXCELで一覧情報をダウンロードできる権限なども指定できるようにすると、必要以上に情報を操作者に公開する必要もなくなりますし、情報が間違って修正されてしまう作業ミスを軽減できます。（各自の日報は、対象者の未修正できるように実装したり、管理者は、全員の日報を編集できる権限を与えるなど）
日報一覧は、検索条件を指定するエリアと、新規登録ボタンと一覧表で構成します。端末の表示解像度を考慮して、パソコンでは、テーブル形式の一覧（縦・横）で表示し、スマホでは、縦方向のみで表示するデザインの方が、操作しやすくなります。スマホの解像度は、380pixを基本に画面デザインしますが、実際に使う人の端末で操作を確認し、デザインは見直した方が、操作性は向上します。
一覧表から新規登録ボタンクリック時や、一覧の行をクリックして詳細表示画面を開く操作ですが、パソコン用画面では、新規登録画面と詳細表示画面は同じデザインでwindow形式で実装しますが、スマホでは、window形式よりタブ形式の方が、スクロール操作がしやすいので、実装方式を変えます。まずは、スマホ向けの画面を作って、同じ画面をパソコンで操作し、操作性に問題がなければ、スマホ向けをパソコンでも採用します。操作性がよくないようであれば、パソコン向けのデザインも追加で作成します。
一覧表と個別画面（新規登録、詳細閲覧、編集）は、画面間で情報のやりとりがしやすいように１つのページで構成するようにします。一覧表から個別画面に遷移するとき、ページの移動を実施すると、個別画面から一覧表のデータを参照したりする操作が実装しにくくなるので、１つのページで複数画面（一覧と詳細画面）を実装します。（ページは、１つですが、画面を作るソースは、分割して実装します。）
一覧画面をベース（元のソース）ソースとして作成し、そのソースに、個別画面のソースを取り込むように実装します。画面のソースはjavascript言語で記述しますが、実際に作成するソースは、javascriptソースを含むPHPソースとなります。画面アクセス用のURLもPHPを指定し、結果としてJavascriptのソースをPHP言語で出力するイメージです。
PHP言語で記述することで、一度、サーバ側で指定されたURLとパラメータから出力するjavascriptソースを修正したり、DB検索した結果でソースに反映させたり、対象者のユーザ権限で、実装するボタンをマスクしたjavascriptソースを出力したりとさまざまな前処理がPHP言語で実装できます。
PHP言語を選択した１つの大きな理由がここにあります。
画面ソースファイルの一覧です。
ユーザ一覧を構成する画面ソースは、一覧で１つ、個別画面で２つ（１つは、入力情報のチェック処理などを記述）
\view\EV0100\EV0101_user_validation_fn_winform.php
\view\EV0100\EV0101_users_winform.php
\view\EV0100\EV0100_users_lists.php
一覧表のソースEV0100_users_lists.phpで、個別画面を取り込むように記述します。
以下は、一覧画面のソース（骨格以外は、省略しています）
<?php
$TITLE_INFO ="ユーザ一覧";
$VER_INFO ="V01L03";
$myfilename = basename(__FILE__); //自分自身のファイル名取得
$userid = '';
if(isset($_GET['userid'])){
$userid = $_GET['userid'];
$error_flag = 1;
}
else{
$error_flag = -1;
error_log($logheader.' userid not found');
header("HTTP/1.0 404 Not Found");
exit;
}
if(isset($_GET['permission'])){
if(is_numeric($_GET['permission'])){
$mypermission = intval($_GET['permission']);
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="/webix_GPL_1020/webix.js"></script>
<link href="/webix_GPL_1020/skins/compact.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">
<style>
</style>
<title><?php echo $TITLE_INFO.' ('.$VER_INFO.')' ?></title>
</head>
<body>
<script type="text/javascript" charset="utf-8">
webix.i18n.setLocale("ja-JP");
<?php
include_once('EV0101_users_winform.php');
echo ' var my_permission ='.$mypermission.";\n";
?>
//画面描画
webix.ready(function(){
webix.ui({
view:"form",
resize:true,
elements:[
{rows:[
{ view:"form", //作成されるエレメントの種類
id: "form1", //参照用のID情報
elements:form_collection , //フォームの構成要素を指定
},
},
{
id: "EV0100_table",
type:"clean",
view:"datatable",
columnWidth:400,
}
]
}
]
});
EV0100_disp_user_lists();
});
</script>
</body>
</html>
上記ソース内のinclude_once('EV0101_users_winform.php');で個別画面のソースを取り込んでいます。
個別画面のソースEV0101_users_winform.php内でも、チェック機能を実装したソースをさらに取り込んでいます。
<?php
include_once("EV0101_user_validation_fn_winform.php"); //validation宣言
?>
//
//EV0101_user_winform.php
//ここで、補足ですが、各ソースには、英文字2桁と数字4桁の機能コードを先頭に付与する実装にしています。
業務アプリを多く作成したときに、グループ化するために英文字2文字でグループを定義し、あとの数字で、分割を意識しています。下1桁が0のソースが該当機能のメインソースでそれ以降の数字１～９で個別画面や関連サーバ用ソース（PHP REST API）を定義します。機能によっては、10種類以上になることもあるので、EV010Aなど最後に英文字を付与することもあります。
このあたりのファイル命名則なども最初に検討しておくと、全体の構造が理解しやすくなります。
ちなみに、画面系のソースは、/viewフォルダの下に、機能IDのフォルダを作成し、その配下に格納します。関連するサーバソース（REST API）は、/rest_apiの配下に機能IDでフォルダを作成して実装します。
上記ユーザ一覧では、以下のようなソース構成になっています。
画面系
\view\EV0100\EV0101_user_validation_fn_winform.php
\view\EV0100\EV0101_users_winform.php
\view\EV0100\EV0100_users_lists.phpサーバ系（REST API)
\rest_api\EV0110\EV0110_users_db_selectlists.php
\rest_api\EV0110\EV0111_users_db_selectlists.php
\rest_api\EV0110\EV0112_user_db_select.php
\rest_api\EV0110\EV0113_user_delete.php
\rest_api\EV0110\EV0114_user_update.php
\rest_api\EV0110\EV0115_user_create.php
一覧画面に表示するデータをDBから検索するREST APIをコールする実装は、
var xhr =webix.ajax().sync().get("<?php echo SUB_FOLDER; ?>/rest_api/EV0110/EV0111_users_db_selectlists.php",send_prm);です。実際のソースでは、１つのサーバに複数システムの実装も考慮して環境情報でフォルダを定義し、ソースの移植性を高めています。
<?php echo SUB_FOLDER; ?>部分が該当し、PHP側で実際に動作するフォルダ情報を追加しています。
画面上のjavascriptのソースでは、webix01になります。(一例ですが）
var xhr =webix.ajax().sync().get("/webix01/rest_api/EV0110/EV0111_users_db_selectlists.php",send_prm);業務アプリを実装するときは、フォルダ構成をどのようにするかや、実装環境で変更となる情報をどのように定義して、できるだけ、ソースコードの流通性を高めるかなどの検討も事前に実施しておくことが重要です。
業務アプリを１つのwebサーバに１つ実装することから開始したのですが、クラウド上のレンタルサーバに実装することを考慮すると、さまざまなサービスを１つのレンタルサーバに実装したくなり、サブフォルダで提供システムを分割することに方針をかえました。その結果、すべてのソースにサブフォルダの対応変更が発生し、全ソースの修正が必要となった経緯もあり、最初によく考えておく事項だと認識しています。（補足ですが、個別にサーバを実装する場合は、/var/www/html配下にソースを実装しますが、レンタルサーバの場合（さくらインターネットの場合）、/home/ユーザ名/wwwとなるので、PHP言語（サーバソース）の流通性は、さらに考慮が必要です。
少し、本題からはずれてきまいｓたので、元に戻ります。
今回の作業日報も基本は、一覧と個別画面で構成します。関連するサーバ系のREST機能（一覧検索、個別情報検索、新規作成、更新処理、削除処理など）も実装します。カメラで撮影した映像の格納処理は、記事の中で説明します。
今回の記事はここまでです。次回は、DB設計を記載予定です。
この記事が気に入ったらサポートをしてみませんか？