Yamasan

長年、システム開発を実施し、ハードウェア設計、ソフトウェア開発、システム構築、プロジェ…

Yamasan

長年、システム開発を実施し、ハードウェア設計、ソフトウェア開発、システム構築、プロジェクトマネージャーなどを実施。その経験から2024年度、本格的に個人事業主として業務系アプリを中心に情報発信予定です。まずは、Webixというライブラリを使った業務アプリを話題に＋広島県在住

Webixライブラリで作成した画面からサーバへの要求API(REST API)の紹介No.28

今まで、Webixライブラリを使った画面や画面とサーバ側のアプリ（PHP)との連携を紹介してきましたが、再度、REST APIのように処理する機能の実装例を紹介します。Webixライブラリ（Javascript）で画面を構成すると、その画面を起動したとき、ボタンなどを押下したタイミングで、サーバ側に検索の依頼や新規データ作成、更新、削除などを要求するとき、URLとパラメータを指定してAjaxによる通信で、画面を描画した状態で、サーバと通信が可能となります。かつ、パラメータは、

Yamasan

    • 撮影した画像をトリミングしてWebixで利用方法No.027

      前回までに紹介した備品管理では、スマホでQRコードの撮影や画像を撮影して格納する動作を紹介していますが、状況によっては、撮影した画像の一部を切り取る操作（トリミング）をしたい場面も多くあると思います。今回、Javascriptでトリミングするライブラリ（croppie）を使い、Webix画面で連携する実装をしましたので紹介します。サンプルソースで実際に動くソースを公開します。実際に操作できます。サンプルソースなので、格納した画像は、その画面の中でしか使用できないので、ご了承く

      Yamasan

      • 各種センサの情報をwebixを使ってWeb表示

        RaspberryPiへのWebixライブラリ適用例の紹介記事ですが、別の記事作成でしばらく紹介できませんでした。再開します。今回は、RaspberryPiに市販ボードを実装し、各種センサの情報を定期的に収集し、RaspberryPi上のデータベースに格納（ロギング）し、Web画面から期間を指定して情報を一覧表示したり、グラフ表示する機能です。 web画面は、webixというライブラリを使用してJavascriptで実装しています。サーバ側のデータ処理部分は、PHP言語で実装

        Yamasan

        • スマホでQRコード読取り、備品管理(webix+jsQR) No.026

          今回は、備品管理QRラベルをスマホカメラで撮影し、QRコードを読みとり、該当備品の状態や保管場所を確認する画面を紹介します。とりあえず、今回までの機能で、スマホを活用して備品管理が可能となります。スマホサイズの画面レイアウトにするための修正（一覧表示や検索画面など）も実施しています。まずは、スマホでＱＲコードを読み取る備品情報画面です。 この画面(初期画面）は、備品管理番号を入力するまで、何も表示しない画面です。備品コードのフィールド欄をクリックすると、検索画面から選択する機

          Yamasan

        Webixライブラリで作成した画面からサーバへの要求API(REST API)の紹介No.28

        Yamasan

          スマホでQRコードを読み取り備品管理を

          前回までの記事（No.024）で備品管理する保管先と備品情報の情報管理が実装できましたので、今回は、QRコードを読み取って、備品管理に活用する機能を紹介します。今回、紹介する内容は、備品情報を保管する保管先情報を手で指定する方法でなく、保管先に貼ってあるQRコードをスマホで読み込み、保管先として設定する機能です。 バーコードリーダを使用せず、スマホのカメラでQRコードを読み取る機能を実装します。JavascriptでQRコードを解析する機能はいくつかネットで紹介されていますが

          Yamasan

          スマホでQRコードを読み取り備品管理を

          Yamasan

          備品情報の管理とQRラベル印刷 No.024

          QRコードを活用して備品の保管管理機能の実装を紹介していますが、前回のNo.23に続いて、今回は、備品情報を管理する業務アプリとその情報をQRラベルで印刷する機能までを紹介します。Web画面は、webixライブラリを使用し、サーバ側のアプリはPHPです。前回までに紹介した保管先情報と同じような構造で備品情報の管理が可能です。データベースのフィールドに追加する情報は、備品の状態を把握するためのステータス情報、保管先のid情報が追加となります。また、今後、スマホで該当備品の写真撮

          Yamasan

          備品情報の管理とQRラベル印刷 No.024

          Yamasan

          webix画面からQRラベル印刷機能の実装

          前回、備品管理用機能を実装した事例を紹介しましたが、その機能で、保管場所一覧にチェックボックスを追加して、複数の保管場所情報を選択して、QRコードラベルを印刷機能を紹介します。印刷したQRコードラベルは、それぞれの保管場所に貼ります。備品のQRコードと保管場所のQRコードを使用して、備品の保管先をQRコード操作で対応づける機能が最終目標です。 今回は、保管先のQRコードラベル印刷を紹介します。今後、備品についても保管先と同じように機能を実装（一覧、新規登録、編集、削除、EXC

          Yamasan

          webix画面からQRラベル印刷機能の実装

          Yamasan

          QRコード活用のための環境準備（備品保管場所情報管理）No.022

          前回の記事（No.022）でQRコードを利用した備品管理機能を紹介しましたが、実際に業務で使用するには、備品情報とその備品を保管する保管場所情報をきちんと管理する環境が必要です。2種類の情報を２つのテーブル（データベース）に登録して、QRコードラベルを印刷し、保管管理が可能となります。今回は、準備段階ですが、備品を保管する場所情報を管理する業務について紹介します。保管場所は、例として、部屋、部屋内の位置、棚の上下などで、実施の保管場所を決める方法としました。例では、自宅にある

          Yamasan

          QRコード活用のための環境準備（備品保管場所情報管理）No.022

          Yamasan

          業務アプリ　QRコードを使用した備品管理 No.021

          Webixライブラリを使ったWEｂアプリ（業務アプリ）を紹介していますが、今回は、より具体的な業務に活用できる機能としてスマホでＱＲコードを読取り、対象備品を保管する場所(棚や保管箱情報）と紐づける操作を最終的には紹介します。今回は、QRコードラベルの作成についてです。 QRコードは、テプラやPtouch製品で簡単に印刷できますが、業務アプリと連携して、印刷できる機能をまずは、作成します。業務アプリに備品情報を登録する操作の延長で、ラベルも連携して印刷できれば、備品番号や備品

          Yamasan

          業務アプリ　QRコードを使用した備品管理 No.021

          Yamasan

          RaspberryPiセンサ情報読取りとWebix

          前回の記事では、RaspberryPiで制御した情報をWebで公開するためにWebixの活用が簡単という内容を紹介させていただきましたが、その事例を紹介するために、市販品で各種センサ情報を収集できるボードを今回は紹介します。RPZ-IR-Sensor Rev2というボードで、拡張スロットに装着すれば、使用できます。温度/湿度/気圧/明るさ/赤外線センサが実装されており、それ以外に4つのLEDと2つのオシボタンスイッチも実装されています。 アマゾンさんでも購入可能です。 以下の

          Yamasan

          RaspberryPiセンサ情報読取りとWebix

          Yamasan

          RaspberryPi管理UIのWeb化についてP001

          RaspberryPiを使っている皆様、ハードウェアの制御や各種センサの情報収集など利用価値の高いボードですよね。私も今まで、I2ＣコントローラやGPIOで各種モジュールを制御し、さまざまな情報を取集したりしていましたが、情報を確認するときにメール通知などしかしておらず、画面を使った管理はあまり実装していませんでした。Webアプリを作るのが大変で、それだったら、メールやsshでの確認でもいいやと思っていましたが、簡単にWebアプリが実装できるライブラリを見つけ、Raspber

          Yamasan

          RaspberryPi管理UIのWeb化についてP001

          Yamasan

          市販のMiniPCにLinux（Almalinux）をインストールする手順Webixライブラリの構築方法 P007

          前回までにAlumalinux OS上にApache2とPHP8.2とMariaDBを構築し、Webixライブラリを動作させる環境が整いましたので、今回は、Webixライブラリの構築について説明します。Webixライブラリは、Javascriptで記述されたリッチクライアントGUIを簡単に動作させるためのライブラリで、さまざまなコンポーネントが揃っています。今まで紹介しました記事をみていただければ、何となく理解できるかと思いますが、実際にコーディングして動作させると実感とし

          Yamasan

          市販のMiniPCにLinux（Almalinux）をインストールする手順Webixライブラリの構築方法 P007

          Yamasan

          PHP8.2とデバック環境（ログ設定、リモートデバック）

          前回までの紹介でPHP8.2が動作する環境になりましたので、今回は、検証時やトラブル時のログ出力設定と、実際の業務アプリ開発時のリモートデバック環境について紹介します。 まずは、PHPのログ出力です。PHPでは、ソース上にerror_log(出力したい文字列情報）;と記述することで、簡単にログを出力できます。出力先は、PHP8.2の場合、FPMモードで動作しているので、以下の環境ファイルを修正して、して場所に出力するようにします。 /etc/php-fpm.d/www.con

          Yamasan

          PHP8.2とデバック環境（ログ設定、リモートデバック）

          Yamasan

          Mini PC AlumalinuxにPHP 8.2インストール

          前回の続きです。PHP8.2をAlumalinuxにインストールします。WebサーバはApache2です。また、デバッガーが使用できるようにxdebugもインストールします。オンライデバッガーは、PhpStormを使用します。 デバック環境を構築するので、実際に運用するサーバは、別に立てたほうがいいかと思います。（デバッガー機能をOFFにすれば、それでもいいですが、構築したDISKをバックアップして、もう1台にする案がいいかと思います） PHP8.2のインストールには、dnf

          Yamasan

          Mini PC AlumalinuxにPHP 8.2インストール

          Yamasan

          MiniPCにLinux（Almalinux）構築WebサーバとデータベースP004

          前回の記事P003までで、Alumalinuxのベース環境がインストールできましたので、業務アプリを動作させるための必要なサービスの追加インストールや 環境設定変更をしていきます。 設定作業は、基本は、ssh接続で実施します。ssh接続をteratermツールで実施すれば、ログ保存もでき、後で資料作成などに活用できます。 SELinux:動作モードの設定 Linux環境を構築して動作させるとき、SELinux:動作モードを変更しないと いろいろな場面でトラブルします。 通

          Yamasan

          MiniPCにLinux（Almalinux）構築WebサーバとデータベースP004

          Yamasan

          MiniPC(TRIGKEY)にLinux構築について（その２）P003

          MiniPC(TRIGKEY)にLinux（Almalinux）を構築する記事を紹介しましたが、今回は、実際の構築作業の補足情報（詳細情報）を紹介します。 事前に、P001の記事を読んでおいてください。 Alumalinux9.3インストール用のUSBメモリで起動したとき、以下のような画面になりますので、Install Alumalinux 9.3を選択してください。 起動すると、言語指定の画面になります。日本語を選択して続行(右下ボタン）をクリックしてください。 次の画

          Yamasan

          MiniPC(TRIGKEY)にLinux構築について（その２）P003

          Yamasan