利用者向けの使い方説明

定義

「利用者」「管理者」「開発者」について、以下の通り定義します。

利用者
機材管理システムを利用する者のことです。
大体の人がこれに該当します。
機材の持ち主を変更したりできます。
管理者
管理者用ページを操作する者のことです。
設定を変更するためのパスワードを知っている必要があります。
管理者は必ず1人以上いなければいけません(部長や機材管理担当者などを管理者とすることを推奨します)。
開発者
システムの修正をしたりする者のことです。
必ずしも必要ではありません。
不具合が起こったら改修を行ったり、追加すべき機能があれば追加したりします。
開発者がいない場合、開発者に必要になるサーバーのログイン情報等は管理者が引き継ぐ必要があります。

基本的な使い方

トップページの見方

持ち主欄の上下の部分には管理者が設定した文章が表示されます。
管理者からの注意事項等があるかも知れないので、よく確認しましょう。


「持ち主情報」の部分には、カテゴリー毎に機材名が並んでいます。
機材名の右側には現在の持ち主が表示されています。

各機材の部分をクリック(もしくはタップ。以下クリックで統一)するとメニューが開き、「履歴」ボタン、「変更」ボタン、機材の「説明」が表示されます。
履歴が存在しない場合は「履歴」ボタンはグレーアウトしています。


「履歴」ボタンを押すと、機材の持ち主が変更された日付と時刻、名前、備考が表示されます。


「変更」ボタンを押すと、機材の持ち主を変更することができます。
「新しい持ち主」と「備考」欄を入力し、「送信」ボタンを押します。

新しい持ち主欄は、次回以降は自動で入力されます(変更することもできます)。
備考に何を入力するかは、管理者の指示に従ってください。


機材の「説明」部分には、管理者が設定した各機材の説明が表示されます。

メニュー

パソコンの場合は右上に、スマホの場合は左上の三本線のボタンを押すとメニューが表示されます。

トップページ、使い方ページ、管理者用ページに切り替えることができます。

注意事項

Javascriptが無効な環境だと動作しません。

悪意ある使い方をすると壊れるかも知れません。。

応用的な使い方

メール通知

機材の持ち主が変更された時に、登録したメールアドレスに通知する機能があります。

おまけ機能なので、登録確認等はありません。


管理者が「メール通知機能」をオンにしていて、かつ「利用者がメアド追加」をオンにしている場合、トップページの機材一覧の下に「メール通知」が表示されます。

「メール通知に登録」欄にメールアドレスを入力すると、それ以降に機材の持ち主が変更された時にメールが届きます。

通知を停止する時は、「メールアドレスを削除」欄にメールアドレスを入力してください。

管理者用ページ

管理者でなくても管理者用ページを見ることはできます。
設定を変更するためには管理者用のパスワードが必要です。

おかしな設定がされてたりしたら管理者に教えてあげましょう。

補足

v1系→v2系で変わったところ

以下の資料を見ていただくとv1系(2016/11/17~2021/02/27)とv2系(2021/02/28)で変わった点が分かるのではないかと思います。

機材管理サイトのリニューアルについて.pdf

v2.0.0の運用開始に伴い旧ページのURLは以下に変更されています。

https://shindaicfc.com/eq_manage_old/
ID:cfc
パスワード:kizai

管理者向けの使い方説明

管理者が知っているべき情報

管理者は常時1人以上いる必要があります。部長や機材管理担当者が望ましいと思います。

以下の情報は管理者が知っているべき情報であり、管理者が代わる場合は全ての情報を引き継ぐ必要があります。

管理用パスワード
機材管理システムの設定を変更するためのパスワードです。
パスワードは設定画面から変更可能です。
サーバー管理会社のログイン情報
このシステムを設置しているサーバーの管理会社のログイン情報です。
開発時点(2021年2月)では、ロリポップです。
このページにログインして、サーバー代を支払わないと使えなくなります。
また、開発者に必要なFTP接続情報もこちらにログインして確認できます。
ドメイン管理会社のログイン情報
ドメイン(shindaicfc.comというURL)の管理会社のログイン情報です。
開発時点(2021年2月)では、ムームードメインです。
このページにログインして、ドメイン代を支払わないとshindaicfc.comというURLが使えなくなります。

管理用ページの使い方

管理用ページは、

に分かれています。
それぞれパソコンの場合は右上に、スマホの場合は左上の三本線のボタンを押すと表示されるメニューから切り替えができます。

管理系ページ

それぞれでできることは各ページに書いてあります。
名前の変更、並び替え、削除、新規追加などができます。

設定を変更するには、各ページ上部の入力欄に管理用パスワードを入力する必要があります。
パスワードは、次回以降は自動で入力されます。

変更した内容は、確定ボタン等を押さないと変更されないので注意してください。
また、削除した内容を復元する方法はありません。


カテゴリーは細かめに分けた方が故障する可能性が低いと思います。
カテゴリー毎に1ファイルとしてデータを管理しているのですが、あまりにファイルサイズが大きいと予期せぬ不具合が起きるかも知れないからです。

機材の説明

機材管理ページで、各機材の「説明」を変更できます。
「説明」はトップページで各機材をクリックすると表示されます。

初めて見る人でも分かるように、機材の見た目やセットで同梱されているもの、何をするためのものなのか、などが詳しく書かれていると良いと思います。

履歴の詳細表示

履歴管理ページで、各履歴の「詳細表示」ボタンを押すと、履歴を変更した者のIPアドレスとUser Agentを表示できます。

パスワードを入力しないとボタンを押せませんが、情報が保存されたファイル自体には誰でもアクセスが可能になっています。


あまり使う機能とは思っていませんが、想定している用途としては悪意ある利用があった場合の犯人特定です。
IPアドレスは利用している回線に、User Agentは端末やブラウザに紐付いているものなので、例えば「この履歴とこの履歴のIPアドレスとUser Agentが一致しているから、同一人物によるものだ」という使い方を想定しています。

ただし、IPアドレスもUser Agentも変えようと思えば簡単に変えられるので、あくまでおまけ機能です。

設定ページ

トップページの文章

トップページに表示される文章を入力します。
「トップページ上」は機材一覧の上側に、「トップページ下」は機材一覧の下(メール通知が表示されている場合はその下)に表示されます。

空欄にすることも可能です。


運用上のルールなどを記載しておくと良いと思います。

備考に何を記載すべきなのか、持ち主として記載するのは代表者名なのか個人名なのか、事前や事後に管理者に連絡することは必要か、受け取った人が変更するのか渡した人が変更するのか、いつ変更するのかなど。


他の部分(機材名など)はHTMLタグが無効になっていますが、この部分のみHTMLタグが有効です。
リンクを挿入することなどを想定しています。HTMLの書き方はググってください。

悪意ある内容(scriptタグやiframeタグなど)の埋め込みも可能なため注意してください。

改行タグ(<br>)は、記入しなくても自動で改行されます。

管理用パスワード変更

管理用パスワードの変更ができます。

パスワードは暗号化された上で保存されますが、保存されたファイル自体には誰でもアクセスが可能になっています。

管理者が複数人いる場合、変更後のパスワードを共有した方が良いと思います。

代替わり後などは、旧管理者がアクセスできないようパスワードを変更した方が良いと思います。


パスワードを変更すると後述のメアドを登録している人にパスワードが変更された旨のメールが送信されます(メール通知機能をオンにしているかオフにしているか問わず)。

高度な設定
履歴の保存数

機材の持ち主履歴をいくつまで保存するかです。

あまり大きいと動作が遅くなったり不具合の元になるかも知れません。
変更される頻度に合わせて調整するのが良いと思います。

メール通知機能

オンにすると機材の持ち主が変更された場合に、登録されたアドレスにメールを送信します。

利用者がメアド追加

オンにするとトップページにメール登録/削除欄が表示されます。

メール通知機能がオフでも、登録欄は表示させることができます。

「利用者が」と書いてありますが、管理者であってもこれをオンにする以外にメールアドレスを登録する方法は存在しません。
管理者だけが登録したい場合は、登録欄を表示させた上で管理者のみ登録し、即オフにするのが良いと思います。


管理者は、アドレスを登録しておいた方が良いと思います。
サイトをいちいち確認しなくとも変更されたことが分かります。

利用者については、どちらが良いとも言えません。
確認機能を付けていないため、アドレスさえ分かれば他人のアドレスを登録したり削除したりできてしまいます。
利用者のメアド追加機能をオンにしている場合、例えば管理者のアドレスを勝手に削除することもできてしまいます。

利用者がメアド通知される利便性が高いならオンに、あまりに治安が悪いようならオフにするのが良いと思います。

通知メールの送信元アドレス

通知メールの送信元として表示されるアドレスです。

FROMとTOにここで設定したアドレスを、BCCに登録されたアドレスを設定してメールを送信します。

表示されるだけなので何でも構いません。
実在するアドレスだと毎回メールが届いてメールボックスの容量を圧迫するので、存在しないアドレス(ただしトラブル防止のためメールアドレスの形式ではあるもの)が良いと思います。

通知登録メアド一覧

ボタンを押すと、登録されているメールアドレスの一覧を表示します。

表示するだけなので、削除する場合には「利用者がメアド追加」をオンにした上でトップページの「メールアドレスを削除」欄から削除する必要があります。

トラブルシューティング

管理用パスワードを忘れた場合

「data」フォルダ内の「password」というファイルを削除します。
削除するにはサーバーにログインしてFTP接続をする必要があるので頑張ってください。
開発者がいるなら開発者に頼めば分かるはずです。


原理:パスワードは暗号化された上で「password」ファイルに保存されています。拡張子は付いていませんが、単なるテキストファイルです。
暗号化されているので、中身を見ても忘れたパスワードが何だったかを知ることはできません。
「password」ファイルが存在しない場合はパスワードの入力内容に関わらず認証を通す仕様にしているため、「password」ファイルを削除することで設定の変更が可能になります。


その後は「管理用パスワード変更」から新しいパスワードを設定するようにしてください。
「password」ファイルが再生成されます。

エラーが表示された場合

まずはページを更新して再度試してみてください。ダメなら端末を変えたり。

エラーが表示される一番の原因は、保存されている情報に不整合があることだと思います。
開発者がいる場合は、開発者に連絡してjsonファイルの不整合を取り除いてもらってください。


それでも改善されない場合、データを初期化することで改善可能だと思います。
「data」フォルダ内のファイルと「eq_data」フォルダ内のファイルを全て削除してください。フォルダ自体は削除しないよう注意してください。

初期化すると当然データは消えるので、事前に内容をメモっておいたりしてください。

削除するにはサーバーにログインしてFTP接続をする必要があるので頑張ってください。
開発者がいるなら開発者に頼めば分かるはずです。

URLにアクセスしてもページが表示されない場合

各ページはプログラムでなく普通のテキストで書かれているので、「プログラムが間違っててページ自体が表示されない」ということはありません。
「表示されない」でなく「情報が反映されない」であればプログラムが間違っているかも知れません。

なので管理者がサーバー代かドメイン代の支払いを忘れているのではないでしょうか。
忘れずにお金を支払いましょう。

そういう状況であればこの文章も見れないでしょうが…。

支払いを忘れていた場合、気付いたタイミングにもよりますがサーバー上のファイルは全て削除されるはずです。そうなるともうどうしようもありません。

開発者向けの使い方説明

心得

機材管理システムを修正等するためには、HTML、CSS、Javascript(JQuery)、PHPの知識が必要です。
これらの知識がなければ、訳が分からずに触って動かなくならないように、勉強してから出直すのが良さそうです。

修正や機能追加する場合は、いきなり本番環境をいじらずローカル環境で十分なテストをしてからにしましょう。
また、動いてる状態でのバックアップを取っておきましょう。


新しく開発者となる人は、管理者から「サーバー管理会社のログイン情報」と「度名管理会社のログイン情報」を引き継いておきましょう。

サーバーにファイルをアップロードしたりするのにはFTP接続が必要です。
FTP接続に必要な情報はサーバーの管理ページにログインすると確認できるはずです。

開発時点(2021年2月)では、ロリポップです。
ロリポップの場合、管理ページにログイン後「ユーザー設定」>「アカウント情報」>「サーバー情報」の順に遷移すると確認できます。


機能追加や改修を行った場合は必要に応じてこの「使い方」ページを更新してください。
特に末尾の更新履歴や各ページのバージョン表記など。

基本構成

デザインの大部分にMaterializeというフレームワークを使用しています。

Javascript部分にはJQueryを使用しています。


Materializeは公式のドキュメントが充実しているので、公式サイトを読めば大体使い方は分かると思います。
英語で書かれてはいますが、ほとんどサンプルコードが付いてるので、機械翻訳で日本語にしながらサンプルコードをコピペして挙動を確認すれば難しいものでもありません。


情報の表示系にはJavascriptを、情報の変更系にはPHPを使用しています。

各種情報はjsonファイルに保存しています。

情報を変更する場合は、ajaxを利用してJavascriptからPHPファイルに値をPOST→PHPファイルで値を受け取ってjsonファイルを変更、という流れです。

JavascriptとPHPの役割を分けたので、例えばPHPにPOSTする値さえ変えなければ、情報の表示の仕方等を変更するだけであればPHPの知識がなくとも可能です。


コードの内容については詳述しても読むの面倒だと思うのでここには書かないことにします。
コメントを多めに書くようにしたのと、jsonを読み書きするだけで特別な処理はないので、読めば分かると思います。

ファイル構成

動作に必要なファイルの構成は以下のようになっています。
他にfavicon.icoや.htaccessもあります。

eq_manage
├ index.html
├ eq_edit.php
├ mail.php
├ admin
│ ├ *.html
│ └ *.php
├ css
│ └ *.css
├ js
│ └ *.js
├ data
│ ├ setting.json
│ └ password
├ eq_data
│ └ *.json
└ howto
  └ index.html

トップディレクトリ

index.htmlはトップページのファイルです。
eq_edit.phpは機材の持ち主を変更するためのファイルです。
mail.phpは通知用のメールアドレスを登録したり削除するためのファイルです。

adminディレクトリ

管理用ページ関係のファイルが入っています。

index.html/category.phpはカテゴリー管理関連のファイルです。
eq.html/eq.phpは機材管理関連のファイルです。
history.html/history.phpは履歴管理関連のファイルです。
setting.html/setting.phpは設定関連のファイルです。
functions.phpは汎用的に使う関数をまとめたファイルです。

cssディレクトリ

cssファイルが入っています。
各cssファイルは全てのページで読み込まれます。

style.cssは独自のcssをまとめたファイルです。
materialize.min.cssはMaterializeのファイルです。

jsディレクトリ

jsファイルが入っています。

script.jsは汎用的に使う関数などをまとめたファイルです。全てのページで読み込まれます。
materialize.min.jsはMaterializeのファイルです。
jquery-3.5.1.min.jsはJQueryのファイルです。全てのページで読み込まれます。
jquery-ui.min.jsはJQuery UIのうち、sortableに必要な内容のみが書かれたファイルです。並び替え操作を行うページで読み込まれます。
jquery.ui.touch-punch.min.jsはsortableの操作をスマホなどのタッチ操作に対応させるためのファイルです。並び替え操作を行うページで読み込まれます。
js.cookie.jsはブラウザのcookieに設定を保存するためのファイルです。cookieの読み書きを行うページで読み込まれます。

dataディレクトリ

設定を保存するディレクトリです。

setting.jsonは設定がjson形式で保存されています。

passwordは暗号化された管理用パスワードがテキスト形式で保存されています。

eq_dataディレクトリ

機材の情報を保存するディレクトリです。

カテゴリーごとに「category_(13文字の英数字).json」というファイル名で機材の情報がjson形式で保存されています。

howtoディレクトリ

使い方ページです。

index.htmlに使い方が記載されています。

開発のアドバイス

開発環境

必ずしも以下のソフトウェアを使う必要はありませんが、渡辺和希は以下のソフトウェアを使って開発しました。
参考までに。

差し戻し用ファイル

「変更を加えたら動かなくなった」みたいな時用に過去バージョンのデフォルト状態のファイルをzipで固めて置いておきます。
解凍して「eq_manage」フォルダを置き換えたり、必要なファイルだけ置き換えたりして使ってください。

メール通知関連について

メール通知機能は独自に実装してますが、これはロリポップのメーリングリスト機能を使った方が安定性が高そうだなと思いました。
思ったのが期限間近なので置き換えはできませんでした。

ロリポップのメーリングリスト機能を使えば登録されてるメールアドレスをこちらで保持しなくて良いですし、登録・退会、メール送信辺りの機能はロリポップが担ってくれます。

現状、メール通知機能は機材管理システムにおいてそこまで使用される(需要がある)機能ではないと思っていますが、頻繁に使用されるようならこの機能の置き換えを優先的に行ったら良さそうだと思います。

参考:ロリポップ!メーリングリストについて


余談ですが、メールは1サーバにつき1時間あたり100通しか送れない制限があるようです。
メール通知は1人1人に送るのでなくBCC指定でまとめて送るようにしていますが、それでも1時間に100回機材の持ち主を変更すると制限に達します。

制限は1時間経てば自動的に解除されますが、仮に今後「メール送信されたか否か」をシステムに組み込んで何かをしたりする場合は考慮する必要がありそうです。

既知の不具合等

v2.0.0時点では以下の不具合があります。

以下の機能は導入を断念しました。

更新履歴

適宜追記してください。

バージョン表記はx.y.zで、バグ修正レベルの変更はzを、機能追加など部分的な変更はyを、大幅な変更はxの数字を1増やします。
xやyを1増やしたらそれ以降の数字は0に戻します。
各数字は2桁になることもあります(v2.11.9など)。

v2.0.1 (2021/03/07)
使い方ページに不要なコードが残ってたのを削除。使い方ページでもscript.jsを読み込むように変更
v2.0.0 (2021/02/28)
大幅にリニューアル
v1.0.2 (2021/02/08)
絶対リンクになっていた箇所を相対リンクに修正
v1.0.1 (2020/07/30)
機材履歴ページへのリンク切れ修正
v1.0.0 (2016/11/17)
テスト版公開