HTML初心者が、copilotに製品棚卸しwebアプリを作ってもらってる話

AI活用
copilot とチャットして進めていく

職場では月イチで製品棚卸しをしています。

方法は、直前の在庫データを紙で出力して、パレットごとに何箱載っているかカウントして紙帳票に記入していきます。

目の前にあるパレットのNo.を紙帳票から探して、ペラペラめくって、見つけたら箱数を記入します。

これ面倒ですね。

タブレット端末だったら、箱のバーコードをカメラで読み込んだら画面に品目コードと製品名とデータ上の箱数が表示されて、となりに実際の箱数を入力する。

とまぁ、「あれやったら楽になるんだよねー」と思いながら何年もやっていました。

なんでやらなかったかというと、

1. iPadのExcelはVBAが非対応

2. どちらにせよVBAわかんない

3. 在庫データをiPadに取り込んであれこれ操作するなら、紙の方がまだ楽。

4. それに操作を教えなくちゃならない。

という理由だったわけです。


AIの登場

そうしてしばらくしてチャッピーブームが訪れました。Z世代の人たちは何の抵抗もなく利用しています。

職場のパソコンのブラウザの横にあるMicrosoftのAI、copilotに聞いてみました。

「iPadで製品棚卸ししたい」

そしたらいろいろと聞かれるので、チャットを進めていきました。


iPadアプリかブラウザアプリか

私としてはiPadのアプリを作ってもらうつもりでいました。でも提案されたのはブラウザ上で動作するwebアプリ。

なるほどそうか!

これならAppleにアプリの申請をしなくてもいいし、iPadに限定せずにWindowsPCでもできる。

職場の共有ドライブ(NAS)は簡易なwebサーバー機能があるので、これを使います。

NASの共有フォルダに、

  • 在庫データ csv
  • アプリ本体 index.html
  • レイアウト style.css
  • UIの構築 app.js

これらを配置するようです。


Apache

webサーバー機能はApacheというそうです。

これも聞いてみました。

Apache の読み方は 「アパッチ」 です。

▪️Apache とは

  • 世界で最も使われている Web サーバーソフト
  • TeraStation(TS5210DN)にも Apache が標準搭載されている
  • HTML / CSS / JavaScript をそのまま配信できる
  • 棚卸アプリを動かすのに最適

ほほう、なるほど。

NASの設定もしておきました。

これでiPadのSafariから見えるはず!


見えませんでした

copilot に聞いてみたら、Web 公開フォルダに入れない場合、原因がほぼ 3つに絞られるとのこと。

▪️よくある原因と対処

  1. 共有フォルダ「www」がアクセス権で閉じている。
    • SMB(Windows 共有)側で アクセス権が付いていないと入れません。
  1. 共有フォルダとして公開されていない。
    • フォルダを共有フォルダとして登録しないと SMB で見えません。
  1. アクセスパスが違う

結果、共有フォルダを公開していませんでした・・・。公開設定しました。


ブロックされました

iPadのSafariから入ろうとしたら、違う画面が出ました。

iPadでは入れません

これはネットワークの設定でブロックされてますね。これでは入れません。

管理者に「この端末はOKして」と申請しなきゃです。

ひとまずiPadは置いといて、WindowsPCで進めることにしました。


403 forbidden が出ました

聞いたら「権限が無い」とのこと。

そんなはずは?と思いcopilot とチャットすること1時間あまり。

index.htmlって大事なんですね

それ貼ってませんけど!

あ、そうなの?(←素人)

素人ですが
これを貼れと言ってきました

テキストエディタにhtml文を貼って、index.htmlとして保存、フォルダに貼りました。

そして、ブラウザで見たら「web server OK」が表示されました。


ここまでのまとめ

  • 社内のNASに共有フォルダを設定
  • webサーバー設定
  • index.htmlが無いと403が出る
  • iPadはブロックされている

これからやること

  • iPadをOKしてもらう
  • webアプリ本体を構築
  • 在庫データcsvを共有フォルダに貼って、webアプリで取り込み
  • 棚卸し作業
  • 結果をアウトプット

進捗ありましたら、また報告します。

タイトルとURLをコピーしました