ローコード・ノーコードで作るバーコード読み取り商品管理～素人による素人のためのマニュアル～

2021年8月9日 14:34

〇スマホアプリでかゆいところに手が届くちょっとした機能が欲しい

　世の中にはたくさんのスマホアプリが存在しています。世の中が便利になったと実感するところですが、しばしばお気に入りのスマホアプリでも、ちょっと気になる部分があるのも事実です。

　「ちょっとした機能なのに、なんでこのアプリにはその機能がないのか？」、「もう少しこう変えてもらえると個人的には使いやすいのに…」といった要望を持つ人は多いのではないでしょうか。そのような場合、オリジナルな機能を独自に追加してスマホアプリを作れれば嬉しいと思うこともしばしばあります。

　デジタルの時代なのですね。実のところ、テクノロジーが進化し、ちょっとしたアプリ機能であれば、素人でもオリジナルの機能開発が出来る環境が整いつつあります。テクノロジーの民主化とでも言えばいい流れなのかもしれません。その一つが、「ローコード・ノーコード開発」というものです。

〇ローコード・ノーコード開発とは？

　ローコード・ノーコード開発という言葉を知っているでしょうか？簡単に言えば、アプリ開発の素人であっても、ちょっと作業をするだけで、オリジナルのアプリ機能を作ることが出来る仕組みであるといえます。

　当然のことながら、プロの開発する高機能なアプリではないけれど、誰も作ってくれないが、個人的には欲しいちょっとしたアプリ機能を実現できるとても有効な仕組みと言えるでしょう。

　今回は、その「ローコード・ノーコード開発」の素人向けの概要説明と、実際に素人でも作れるバーコード読み取りによる商品管理アプリの作成マニュアル（素人向け）を紹介します。

１．ローコード・ノーコード開発で出来ること／難しいこと

　まず、素人の関心事項は「何が出来るのか？」にあると考えます。そのため、実際のところ何が出来るかを簡単に紹介したいと思います。初めての「ローコード・ノーコード開発」という観点から、無料で、誰でも使える環境として、Googleの仕組みを使うこととします。

　バーコード読み取りによる商品管理アプリとして、次の写真に示すようなアプリを開発することが出来ます。スマホのアプリ画面から、バーコード読み取りボタンを押して、バーコードを読み取り、「OK」ボタンを押すと自動で商品情報を集め、画面に表示してくれるものです。

　このアプリを使えば、自宅にある様々な商品のストック状況を整理することもできます。例えば、自宅の日用品の在庫管理にも使えるスマホアプリになります。入力情報は、アプリ作成時に色々とカスタマイズすることが出来るため、日時の他、個数や備忘録なども入力することも可能となります。

　こうしたアプリを自作することの良い点は、アプリで入力していった情報は、表計算ソフトのデータとして、リスト化された形で蓄積されていきますので、最終的にパソコンなどでデータを扱えるようになることにあります。

　この点は特に着目しても良い点かもしれません。多くのスマホアプリでは、データの出力や掃き出しが出来ない仕様になっており、使いにくさを感じている方も多いと思いますので。

　一方で、「ローコード・ノーコード開発」の難点も記載しておきます。プロの開発者が作るアプリではありませんので、どうしてもスマホアプリのインターフェースは、十分な作りこみが出来ません。

　また、スマホアプリの動作速度がどうしても遅いという点が難点となります。この点は何ともし難いところがあります。ただ、個人のオリジナルとして、自分だけが使えればよいと考えれば、多少のことは問題ないと思われます。それよりも、自分が欲しかった自分だけの機能が実現できることのメリットの方が大きいのかもしれません。

２．開発を始める前に全体感を知ろう（使ものの全体感）

　では「ローコード・ノーコード開発」として、Googleの仕組みを使うことを前提に、必要となる環境の全体感を紹介します。

　使う仕組みは、Google AppSheet、Google Apps Script、Google スプレッドシートの3つとなります。この3つを手順通りに連携させることで、立派なスマホアプリをローコード・ノーコードで開発することが出来るのです。

　この３つの仕組みは、Googleのアカウントを所有している人であれば、無料で使用することが出来ます。はじめてローコード・ノーコード開発にチャレンジしようとする方であれば、まずはお金をかけずに出来ることから始めるのが良いと思います。

　では早速、次項から「素人でも作れるバーコード読み取りによる商品管理アプリ」の作成方法を説明していきます。

3．スプレッドシートでデータ構造を作ろう

　はじめに、アプリ開発の第一ステップを紹介します。具体的には、一番初めに「取得データを蓄積する」ためのスプレッドシートを作成することから始めます。具体的な手順は下記となります。

（１）Google スプレッドシートを作成する。
（２）取得するデータ項目を設定する。
（３）Google AppSheetへ移行準備

※画面画像等を用いた手順説明は本記事の最後にマニュアルとして掲載

　まず自分のGoogleアカウントから、「スプレッドシート」を起動しましょう。起動したスプレッドシートで「新しいスプレッドシートを作成」を選択し、その名称を例えば「Item_list」とします。続いて、スプレッドシートのシート名を例えば「list」と設定します。なお、ここでの名称が後々にも影響すること留意してください。

　次に、上記で作成したスプレッドシートの第1行目に、データ項目を記載していきます。今回のアプリでは、色々な商品情報を扱いますので、例えば、下記のようなデータ項目を設定してみました。

品名
バーコード
開始日
終了日
周期
定価
個数
画像
Id
概要
　など、データ項目は好みに応じて適宜変更可

　最後に、Google AppSheetへの移行準備を行います。スプレッドシートのメニューバーの「ツール」-「AppSheet」-「アプリを作成」を選択してください。ここで設定したスプレッドシートを基に、AppSheetでアプリのベースが自動作成されます。

　次項では、ここで作成されたAppSheetのアプリのベースに基づいて、作業手順を説明します。

4．AppSheetでスマホアプリの構造を作ろう

　次に、アプリ開発の第二ステップとして、スマホアプリ画面表示・操作等を設計するためにAppsheetを使います。前頁のスプレッドシートの「アプリを作成」の結果、Appsheetで「new app」が作成されます。

　この状態からの具体的な手順は下記となります。

（１）「Data」メニューから、データ構造の設定を行う。
（２）「UX」メニューから、アプリ画面の設定を行う。
（３）「Automation」メニューから、アプリ操作の設定を行う。
（４）「Manage」メニューから、有効化処理を行う。

※画面画像等を用いた手順説明は本記事の最後にマニュアルとして掲載

〇スプレッドシートで記載したデータ項目のデータ構造を設定する

・メニューバーの「Data」-「Columns」を選択し、シート「list」の「View Table」を開く
・スプレッドシートで記載したデータ項目について、自動設定されたデータ構造を適宜修正（下記の「Type」列のデータの型の再設定、および、「Key」「Label」「Show」「Editable」「Require」「Search」「Scan」列の青色のチェックボックスを再設定）

〇スマホアプリの画面設定を行う

・メニューバーの「UX」を選び、「View」タブを選択する
・「Primary Views」で「list」を選択すると、詳細設定項目が表示される
・「View name」が「list」に、「For this data」が「list」になっていることを確認
・「View type」は、画面表示のタイプを選択。好みに応じて選ぶ。ここでは「deck」を選択
・「Position」は、好みに応じて選ぶ。ここでは「center」を選択
・「Main image」は、アプリ画面でデータごとに表示する画像を指定する。ここではスプレッドシートで項目の設定をした「画像」項目を選択
・「Primary header」は、データのタイトルとなる部分。ここではスプレッドシートで項目の設定をした「品名」項目を選択
・「Secondery header」は、データのサブタイトルとなる部分。ここではプレッドシートで項目の設定をした「開始日」項目を選択
・「Summary column」は、プレッドシートで項目の設定をした「個数」項目を選択
・「Image shape」は、画像を表示する際の外枠の形状を指定する。ここでは「Round Image」を選択

〇アプリの操作設定を行う

・メニューバーの「Automation」を選び、「Bots」タブを選択する
・「New Bot」ボタンを押下し、表示されるリストボックスで「Create a custom bot」を選択。
・「Choose an event」ボタンを押下し、表示されるリストボックスで「Create a custom event」を選択。
・「When this EVENT occurs」に作成されたイベントの名称を「list record is updated（名称は適宜設定）」と設定
・「Run this PROCESS」で、「Add a step」ボタンを押下し、表示されるリストボックスで「Create a custom step」を選択。
・作成されたステップの名称を「Check if [バーコード] is not blank（名称は適宜設定）」と設定

〇イベント「list record is updated」の設定を行う

・イベント「list record is updated」を選択し、画面右側の項目を設定する
・「Data Change」タブを選択し、「Table」項目では、「list」を選択する
・「Condition」では「なし（=）」を選択し、「Data Change type」では、「ALL_CHANGES」を選択する

〇プロセス「Check if [バーコード] is not blank」の設定を行う

・「Run a task」ボタンを設定
・「Task to run」で「New Task」を選択
・「Http Call a webhook」ボタンを設定
・「Preset」で「Custom」を選択
・「Url」の設定は後述の文字列を入力※後述
・「HTTP Verb」で「Post」を選択
・「HTTP Content Type」には「JSON」を選択
・「Body」には次を設定「{"item_id":"<<[id]>>","jan_code":"<<[バーコード]>>"}」を設定

※「URL」の入力について

・この入力項目では、Google Apps Scriptで取得する文字列を記載します。下記手順でその文字例を取得する
・「Google Apps Script」を起動し、メニューから「新しいプロジェクト」を押下
・メニューバーの「公開」－「ウェブアプリケーションとして導入」を選択し、プロジェクト名に「ItemGas」（名称は適宜設定）と入力して「OK」ボタンを押下する
・「Deploy as web app」と記載されたウィンドウが表示され、そこに記載されている「Who has access to the app:」で「Anyone, even anonumous」を選択し、「更新」（deploy）ボタンを押下
・表示される「Current web app URL:」のURLをメモし、上記の「５．」の項目に入力

〇有効化処理を行う

・メニューバーの「Manage」を選択
・「Integrations」タブを選択
・「IN:from cloud services to your app」を押下する
・「Enable」を有効にする
・「App Id」の文字列をメモする※後段作業で使用
・「 Create Application Access Key 」ボタンを押下し、さらに新たに表示される「Show Access Key」を押下する
・表示される文字列をメモする※後段作業で使用
・画面右上にある「SAVE」ボタンを押下

　以上でAppsheetでの作業はほぼ終了ですが、残りの作業として、Apps Scriptでのコーディング作業が残されています。次項では、その作業手順を説明します。

5．外部APIと連携する仕組みを作ろう

　アプリ開発の最後の第三ステップとして、外部API等の活用するためにGoogle Apps Scriptを使います。前頁の「プロセス「Check if [バーコード] is not blank」の設定を行う」の途中で作成したGoogle Apps Scriptのプロジェクト「ItemGas」を開き、作業をします。

　具体的な手順は下記となります。

（１）Google Apps Scriptのプロジェクト「ItemGas」にコードを記載
（２）Google Apps Scriptのプロジェクト「ItemGas」を更新

※画面画像等を用いた手順説明は本記事の最後にマニュアルとして掲載

　まず既存の下記のコードで置き換えます。ただし、置換えるコードの中の下記の部分は前節までにメモしたものを記載してください。

[App ID]
[Application Access Keys]

　また、置き換えるコードの中に「Yahoo!の商品情報取得API」を使うためのコードが記載されています。本アプリでは、バーコードの情報を基に、Yahoo!の商品情報取得APIを使用して、商品情報を取得するため、Yahoo!デベロッパーネットワークに登録して、「アクセストークン」を取得する必要があります。そのトークンを下記コードの[Yahoo!の商品情報取得APIのアクセストークン]の部分に記載してください。

＜もともとのコード＞

function myFunction(){
}

＜書き換えようのコード＞

function myPost(e) {
// リクエスト内容を取得(Bodyに記入した情報)
 const requestParams = JSON.parse(e.postData.getDataAsString());
 const itemId = requestParams.item_id;
 const janCode = requestParams.jan_code;
// AppSheet API
 const appSheetUrl = ‘https://api.appsheet.com/api/v2/apps/[App ID]/tables/list/Action';
 const appKey = ‘[Application Access Keys]';
// Yahoo!の商品情報取得API
 const itemApi = ‘https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=[Yahoo!の商品情報取得APIのアクセストークン]&jan_code=‘;
 const mytext = JSON.parse(UrlFetchApp.fetch(itemApi + janCode));
 const mytext2 = mytext.hits[0].name;
 const mytext3 = mytext.hits[0].description;
 const mytext4 = mytext.hits[0].priceLabel.defaultPrice;
 const mytext5 = mytext.hits[0].image.medium;
// AppSheet APIを使い、商品情報をSpreadsheetに保存
 const payload = {"Action": "Edit",  "Properties": {"Locale": "ja-JP"}, "Rows": [{
       "id": itemId, "品名": mytext2, "概要": mytext3, "定価": mytext4, "画像": mytext5} ]};
 const params = {
   'contentType': 'application/json’, 'headers’:{ 'ApplicationAccessKey': appKey},
   'method':'post’, 'payload’:JSON.stringify(payload)}
   UrlFetchApp.fetch(appSheetUrl, params);
}

　コードの置換えが終了後、下記の手順で、更新処理を行いアプリを完成させます。

・Apps Scriptのメニューバー「公開」－「ウェブアプリケーションとして導入」を選択
・「Project version:」を「New」に変更して、「更新」（deploy）ボタンを押下
・次の画面で「OK」ボタンを押下。その後、「許可を確認」を押下

6．全体を整えアプリをリリースしよう

　前項までの作業を経て、「バーコード読み取りによる商品管理アプリ」が完成しました。以下では、作成したアプリの使い方を簡単に紹介します。

ステップ①
　スマホアプリに「AppSheet」をダウンロードし、アプリにログインする
ステップ②
　メニュー「Created by me」からアプリ「Item_list」を選択・起動
ステップ③
　「プラスボタン」を使って、商品のバーコードを読み取る

※画面画像等を用いた手順説明は本記事の最後にマニュアルとして掲載

7．まとめと素人による素人のためのマニュアル

　素人でもオリジナルの機能開発をしたいという動機から、今回、「ローコード・ノーコード開発」の素人向けの概要説明、実際に素人でも作れるバーコード読み取りによる商品管理アプリの作成概要を紹介しました。

　初めての「ローコード・ノーコード開発」を行うという観点から、無料で、誰でも使える環境として、Googleの仕組みを取り上げました。

　上記で開発の際の手順概要を記載しましたが、素人向けによりシンプルかつ詳細に手順を記載した「素人による素人のためのマニュアル」を作成しました。ご入用な方は下記よりPDFをダウンロードしてください。※2021年8月時点の環境を前提。

ここから先は

0字 / 1ファイル

¥ 100

ログイン

この記事が気に入ったらサポートをしてみませんか？

ローコード・ノーコードで作るバーコード読み取り商品管理 ～素人による素人のためのマニュアル～

１．ローコード・ノーコード開発で出来ること／難しいこと

２．開発を始める前に全体感を知ろう（使ものの全体感）

3．スプレッドシートでデータ構造を作ろう

4．AppSheetでスマホアプリの構造を作ろう

5．外部APIと連携する仕組みを作ろう

6．全体を整えアプリをリリースしよう

7．まとめと素人による素人のためのマニュアル

ここから先は

ローコード・ノーコードで作るバーコード読み取り商品管理～素人による素人のためのマニュアル～