無料のPOSレジアプリを作った話。名古屋クリエイターズマーケットで活用するまでの苦労話|おちゃカメラ。お問い合わせ無料のPOSレジアプリを作った話。名古屋クリエイターズマーケットで活用するまでの苦労話2020.01.20ブログWeb・プログラミングこちらの記事もどうぞVue.jsのアプリ制作時に参考になった記事のまとめ複数の画像を連結して1枚にするwebアプリを作ったこの記事名とURLをコピーする本日限定Amazonタイムセール開催中セール商品を見に行く本日限定Amazonタイムセール開催中セール商品を見に行く2、3年前の話ですが、POSレジ・アプリを作ってみました。POSレジは、スーパーやコンビニでよく見かけるアレです。商品バーコードを印刷したり、読み取ったりして商品の売上をクラウドで管理できます。今回はPOSレジアプリの構築方法と苦労したところについてまとめたいと思います。した構成図はこんな感じです。©スポンサーリンクレジ・アプリでできることPOSレジでは、離れた場所から商品登録できたり、登録した商品数からバーコードを自動作成する事ができます。アプリで登録する事ができます。ネットを介して登録できますので、出品者が複数いても各人の好きな場所で作業ができます。バーコード・ラベル作成スーパーのレジのように販売商品をバーコード管理できます。アプリでは登録された商品の販売数をもとに、バーコードに変換してPDFファイルを作成します。バーコードのレイアウトは一般販売されているシール台紙レイアウトに対応。PDFを台紙に印刷する事で、商品に貼ることのできるバーコード・ラベルとして使えます。売上登録バーコードの読み取りと売上登録をオフラインで行います。売上情報は本体に記録したあと、最後にサーバーへアップロードする事ができます。売上の集計結果をWebページから閲覧できます。PDFファイル形式で自動作成します。PDFはLINEで共有するなどして、情報を共有することができます。バーコードの印刷用紙はAmazonで売ってるA-oneさんのラベル印刷用紙に対応しました。接着面はポストイット糊になっており、全部で486枚のシールを切り貼りすることが出来ますので、コストパフォーマンスはかなり優れていると思います。私は趣味で写真を撮っています。その関係で、友人たちとポストカードの販売に参加させて頂くようになりました。冒頭でも触れましたが、レジアプリは名古屋で毎年2回開催されているなごやクリエーターズマーケット(通称クリマ)の写真販売ブースに向けに制作しました。「写真好きのつどい」名古屋クリエイターズマーケットhttps://photo-love-gathering.tumblr.com/オフィシャルページも、簡単ですがTumblr上で制作してみました。解決したかったこと私の参加しているクリマのブースでは、複数の出展者で写真にまつわる商品を販売しています。出展者が複数いるため、販売価格や商品が多様で、商品の管理や売上の管理、また会計方法が年々複雑になりました。そこで、商品管理や売上集計の複雑さや手間を取り除くために、できるかぎりの事は自動化してしまおうと考えました。これがレジアプリを作ろうと思った切欠です。現在、巷ではレジアプリが沢山存在しますが、解消したかったニーズと一致しなかったので、頑張って自作してみようと思いました。どのような方針で作ったか?前述のような経緯でクリマ向けにレジ・アプリを作ってみた訳ですが、以下の様な方針で制作してみました。場所を選ばす商品管理等の作業ができる商品の出品者が全員集まって作業することが難しいので、ネットを活用して商品を登録できるようにしたいと思いました。システムの維持費を一切掛けない趣味のブースという事と、年に2回開催されるイベントですので、維持コストを掛けない仕組みにしようと思いました。制作した結果、ラベルを印刷するための用紙費用だけで済ませる事ができました。商品の把握、会計や報告書の作成に関する手間を軽減できるよう、アプリ側で自動化できるものは、とことん実装したいと思いました。冒頭でご紹介しましたが、システムは以下の様な構成で制作しました。使った技術はjavascript(node.js)とHTML5です。商用システムではまず使わないのですが、フロントエンドからバックエンドまでjavascriptで実装できるフルスタックMEANを採用してみました。©システム開発に用いたサービスやフレームワークは以下の様な内容です。商品登録アプリはnw.jsnw.js(旧称:node-webkit)はHTMLを使ってクロスプラットフォームにデスクトップ・アプリを展開できるフレームワークです。現在ではElectron(旧称:Atom-shell)が有名です。特徴は、Web制作のノウハウをそのまま活用しつつ、node.jsの充実したライブラリを使用する事ができる点です。商品登録アプリのUIはAngularJSとBootstrapUIはBootstrapとAngularJSを使ってみました。Bootstrapは短いHTMLの記述で、ボタンをはじめとした各種UIを配置できるものです。AngularJSは、UIと値のやりとりを円滑に行うことができるフレームワークです。DynoでExpressサーバーから利用しています。mongoDBはJavascriptで操作できるKVSです。今回、興味があってなかなか使う機会がなかったので導入してみました。使った感想は、クエリと返ってくる結果がJSONなので感覚的で分かりやすく、スムーズに構築することができました。商品情報や商品画像はFlickr画像サーバーと商品情報のDBサーバーを考えるのが面倒だったので、Flickrを利用させてもらいました。アプリではFlickrの充実したAPIを、nw.jsの中に組み込んでいるnode-flickrから利用させてもらいました。アップロードやタイトルの変更(=タイトルに商品情報を埋め込む)もAPI越しに行えます。商用のシステムならアウトだと思いますが、個人用途ですので、どうか広い心で見てやってください(笑)商品バーコードや売上報告書をヘッドレスブラウザから生成こちらは今回のシステムの重要な機能を担っている部分です。nw.jsのアプリからボタン操作一つで、商品バーコードや売上報告書をPDF形式で出力できる訳ですが、これはヘッドレスブラウザのPhantomJSを使い、HTMLをPDFに変換し、出力できる機能を活用させてもらいました。生成したバーコードを読み取るアプリは、iPadで動作するMonacaアプリにて、OnsenUIとAngularJSを使っています。OnsenUIはBootstrapと似ているフレームワークですが、モバイル向けに軽量動作となっていたり、AngularJSと親密になっているのが特徴です。現在は大人の事情により、nw.jsアプリにリプレイスしています(^^;)構成図には載っていませんが、ビルド&デプロイまではgulpタスクで自動化しています。ビルドされたアプリはDropboxフォルダーに生成されており、出展メンバーと最新バージョンを常に共有できる形にしてみました。苦労したところ制作には2ヶ月ほど要しましたが、主に時間が必要だったのは以下でした。パッケージがバグまみれだったFlickrにアクセスするために、node.jsのAPIラッパーを利用していたのですが、そのパッケージがかなり曲者でした。開発初期は、パッケージの修正依頼をいくつかコミッターにお願いしながら制作を進めていきました。コミッターは修正について前向きでしたので、お陰さまでアプリを無事デプロイする所まで漕ぎ着ける事ができました。今回はフロントエンドでAngularJSをフル活用しました。基本的な利用に加えて、カスタム・ディレクティブを作ったり、カスタム・フィルターを定義したりするなど、普段使わないような使い方を沢山しました。商品IDを示す数値から、1次元バーコードのSVGに変換する処理などはカスタム・フィルターを利用しています。Bootstrap)をモジュールとして組み込んで使っています。SPAとして成り立たせるための必須スキルである、ルーティングのテクニックやモーダルウインドウの制御、更にはプログレスバーの実装が不慣れだったので、覚えるまで苦労しました。苦戦したのはヘッドレスブラウザのPhantomJSからPDFを生成する処理でした。用紙やプリンターの送り出し誤差の関係上、1ミリ程の許容誤差でバーコードを正確にレイアウトし印刷する必要性があったのですが、なかなか骨の折れる作業でした。PDF生成するHTMLにはcssやjsを含める事ができるのですが、OSによってスタイルが崩れてしまったり、画像が全て取得される前にタイムアウト(=画像が抜け落ちる問題が発生)してしまったりと、初期の段階では上手く生成できませんでした。PhatomJSの使い方や癖を知る事から始めて、1つ1つ試行錯誤していきました。この過程で、nw.jsから狙ったとおりのPDFレイアウトを自在に作成できるようになり、結果的には勉強になりました。ヘッドレスブラウザは多機能なのですが、その反面で使い方を熟知するのは大変な事です。巷では、PhantomJSが難解すぎて、機能を簡素にしたAPIラッパーが存在するほどです。幽霊ポケモンが進化したみたいで面白いですよねwヘッドレスブラウザは、一旦使いこなせるようになると恐ろしく便利な代物で、様々な応用ができる可能性を秘めたパッケージだと思いました。Heorkuのプラン改定には動揺した予想外の出来事だったのは、Herokuの無料プランが改定されてしまった事でした。Herokuはもともと、750時間/月の無料利用枠が利用することができ、試験サービスやアクセスの少ないサービスでは、サーバーを実質無料で運用できたのです。ところが、サービスプランの改定により、18時間/日の起動に制限されてしまいました。24時間でサーバーが動きません。このサービス改定には、かなりショックでしたが、今回はアクセス時間帯が数時間に限られている案件でしたので、現在もそのまま使ってもらっています(^^;)いざとなれば、有料プランを利用すればしっかりと動作します。最後にということで、今回はクリエーターズマーケット名古屋(クリマ)で使えるレジアプリを自作した経緯や実装に関する裏側をご紹介させて頂きました。^)また、何か改善案がありましたらTwitterなどで教えていただけましたら、大変勉強になります。記事名とURLをコピーする無料のPOSレジアプリを作った話。(てぃー)InstagramTwitterYoutubeノスタルジックな写真や映像撮影が好きです📷✨当サイトではカメラ関連製品の魅力を中心に情報発信を行っています。RAW現像教室」タグIT・プログラミングnode.jsHTML5javascriptAngularJSJQueryslimHerokunw.js(node-webkit)MongoDBExpress.jsOnsenUIBootstrapMonacaFullStackMEANPhantomJSスポンサーリンク関連する記事Youtube作例&製品レビューGalleryおちゃカメラ。プライバシーポリシーコンテンツの保存及び転載は固くお断りいたします。当サイトに記載されるコンテンツ(文章・画像等)は著作権により保護されています。万が一コンテンツや写真の盗用・二次利用が見つかった場合には500pxの写真販売価格を参考に差止め請求及び使用料または損害賠償請求をさせて頂く場合がございますので予めご了承下さい。記事に関するお問い合わせや寄稿についてはお問い合わせフォームまでお願いいたします。hexo.お問い合わせポートフォリオフィード。