ローコード・ノーコードで作るバーコード読み取り商品管理 ~素人による素人のためのマニュアル~
〇スマホアプリでかゆいところに手が届くちょっとした機能が欲しい
世の中にはたくさんのスマホアプリが存在しています。世の中が便利になったと実感するところですが、しばしばお気に入りのスマホアプリでも、ちょっと気になる部分があるのも事実です。
「ちょっとした機能なのに、なんでこのアプリにはその機能がないのか?」、「もう少しこう変えてもらえると個人的には使いやすいのに…」といった要望を持つ人は多いのではないでしょうか。そのような場合、オリジナルな機能を独自に追加してスマホアプリを作れれば嬉しいと思うこともしばしばあります。
デジタルの時代なのですね。実のところ、テクノロジーが進化し、ちょっとしたアプリ機能であれば、素人でもオリジナルの機能開発が出来る環境が整いつつあります。テクノロジーの民主化とでも言えばいい流れなのかもしれません。その一つが、「ローコード・ノーコード開発」というものです。
〇ローコード・ノーコード開発とは?
ローコード・ノーコード開発という言葉を知っているでしょうか?簡単に言えば、アプリ開発の素人であっても、ちょっと作業をするだけで、オリジナルのアプリ機能を作ることが出来る仕組みであるといえます。
当然のことながら、プロの開発する高機能なアプリではないけれど、誰も作ってくれないが、個人的には欲しいちょっとしたアプリ機能を実現できるとても有効な仕組みと言えるでしょう。
今回は、その「ローコード・ノーコード開発」の素人向けの概要説明と、実際に素人でも作れるバーコード読み取りによる商品管理アプリの作成マニュアル(素人向け)を紹介します。
1.ローコード・ノーコード開発で出来ること/難しいこと
まず、素人の関心事項は「何が出来るのか?」にあると考えます。そのため、実際のところ何が出来るかを簡単に紹介したいと思います。初めての「ローコード・ノーコード開発」という観点から、無料で、誰でも使える環境として、Googleの仕組みを使うこととします。
バーコード読み取りによる商品管理アプリとして、次の写真に示すようなアプリを開発することが出来ます。スマホのアプリ画面から、バーコード読み取りボタンを押して、バーコードを読み取り、「OK」ボタンを押すと自動で商品情報を集め、画面に表示してくれるものです。
このアプリを使えば、自宅にある様々な商品のストック状況を整理することもできます。例えば、自宅の日用品の在庫管理にも使えるスマホアプリになります。入力情報は、アプリ作成時に色々とカスタマイズすることが出来るため、日時の他、個数や備忘録なども入力することも可能となります。
こうしたアプリを自作することの良い点は、アプリで入力していった情報は、表計算ソフトのデータとして、リスト化された形で蓄積されていきますので、最終的にパソコンなどでデータを扱えるようになることにあります。
この点は特に着目しても良い点かもしれません。多くのスマホアプリでは、データの出力や掃き出しが出来ない仕様になっており、使いにくさを感じている方も多いと思いますので。
一方で、「ローコード・ノーコード開発」の難点も記載しておきます。プロの開発者が作るアプリではありませんので、どうしてもスマホアプリのインターフェースは、十分な作りこみが出来ません。
また、スマホアプリの動作速度がどうしても遅いという点が難点となります。この点は何ともし難いところがあります。ただ、個人のオリジナルとして、自分だけが使えればよいと考えれば、多少のことは問題ないと思われます。それよりも、自分が欲しかった自分だけの機能が実現できることのメリットの方が大きいのかもしれません。
2.開発を始める前に全体感を知ろう(使ものの全体感)
では「ローコード・ノーコード開発」として、Googleの仕組みを使うことを前提に、必要となる環境の全体感を紹介します。
使う仕組みは、Google AppSheet、Google Apps Script、Google スプレッドシートの3つとなります。この3つを手順通りに連携させることで、立派なスマホアプリをローコード・ノーコードで開発することが出来るのです。
この3つの仕組みは、Googleのアカウントを所有している人であれば、無料で使用することが出来ます。はじめてローコード・ノーコード開発にチャレンジしようとする方であれば、まずはお金をかけずに出来ることから始めるのが良いと思います。
では早速、次項から「素人でも作れるバーコード読み取りによる商品管理アプリ」の作成方法を説明していきます。
3.スプレッドシートでデータ構造を作ろう
はじめに、アプリ開発の第一ステップを紹介します。具体的には、一番初めに「取得データを蓄積する」ためのスプレッドシートを作成することから始めます。具体的な手順は下記となります。
(1)Google スプレッドシートを作成する。
(2)取得するデータ項目を設定する。
(3)Google AppSheetへ移行準備
※画面画像等を用いた手順説明は本記事の最後にマニュアルとして掲載
まず自分のGoogleアカウントから、「スプレッドシート」を起動しましょう。起動したスプレッドシートで「新しいスプレッドシートを作成」を選択し、その名称を例えば「Item_list」とします。続いて、スプレッドシートのシート名を例えば「list」と設定します。なお、ここでの名称が後々にも影響すること留意してください。
次に、上記で作成したスプレッドシートの第1行目に、データ項目を記載していきます。今回のアプリでは、色々な商品情報を扱いますので、例えば、下記のようなデータ項目を設定してみました。
最後に、Google AppSheetへの移行準備を行います。スプレッドシートのメニューバーの「ツール」-「AppSheet」-「アプリを作成」を選択してください。ここで設定したスプレッドシートを基に、AppSheetでアプリのベースが自動作成されます。
次項では、ここで作成されたAppSheetのアプリのベースに基づいて、作業手順を説明します。
4.AppSheetでスマホアプリの構造を作ろう
次に、アプリ開発の第二ステップとして、スマホアプリ画面表示・操作等を設計するためにAppsheetを使います。前頁のスプレッドシートの「アプリを作成」の結果、Appsheetで「new app」が作成されます。
この状態からの具体的な手順は下記となります。
(1)「Data」メニューから、データ構造の設定を行う。
(2)「UX」メニューから、アプリ画面の設定を行う。
(3)「Automation」メニューから、アプリ操作の設定を行う。
(4)「Manage」メニューから、有効化処理を行う。
※画面画像等を用いた手順説明は本記事の最後にマニュアルとして掲載
〇スプレッドシートで記載したデータ項目のデータ構造を設定する
〇スマホアプリの画面設定を行う
〇アプリの操作設定を行う
〇イベント「list record is updated」の設定を行う
〇プロセス「Check if [バーコード] is not blank」の設定を行う
※「URL」の入力について
〇有効化処理を行う
以上でAppsheetでの作業はほぼ終了ですが、残りの作業として、Apps Scriptでのコーディング作業が残されています。次項では、その作業手順を説明します。
5.外部APIと連携する仕組みを作ろう
アプリ開発の最後の第三ステップとして、外部API等の活用するためにGoogle Apps Scriptを使います。前頁の「プロセス「Check if [バーコード] is not blank」の設定を行う」の途中で作成したGoogle Apps Scriptのプロジェクト「ItemGas」を開き、作業をします。
具体的な手順は下記となります。
(1)Google Apps Scriptのプロジェクト「ItemGas」にコードを記載
(2)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);
}
コードの置換えが終了後、下記の手順で、更新処理を行いアプリを完成させます。
6.全体を整えアプリをリリースしよう
前項までの作業を経て、「バーコード読み取りによる商品管理アプリ」が完成しました。以下では、作成したアプリの使い方を簡単に紹介します。
ステップ①
スマホアプリに「AppSheet」をダウンロードし、アプリにログインする
ステップ②
メニュー「Created by me」からアプリ「Item_list」を選択・起動
ステップ③
「プラスボタン」を使って、商品のバーコードを読み取る
※画面画像等を用いた手順説明は本記事の最後にマニュアルとして掲載
7.まとめと素人による素人のためのマニュアル
素人でもオリジナルの機能開発をしたいという動機から、今回、「ローコード・ノーコード開発」の素人向けの概要説明、実際に素人でも作れるバーコード読み取りによる商品管理アプリの作成概要を紹介しました。
初めての「ローコード・ノーコード開発」を行うという観点から、無料で、誰でも使える環境として、Googleの仕組みを取り上げました。
上記で開発の際の手順概要を記載しましたが、素人向けによりシンプルかつ詳細に手順を記載した「素人による素人のためのマニュアル」を作成しました。ご入用な方は下記よりPDFをダウンロードしてください。※2021年8月時点の環境を前提。
ここから先は
¥ 100
この記事が気に入ったらサポートをしてみませんか?