📸 みーつけた　〜学校と保護者を繋ぐ架け橋〜

「みーつけた」は保護者に生徒の学校で撮られた写真を簡単かつ迅速に届けるWebアプリケーションです。

【一時デモにアクセスできなかった問題について】

2月9日から15日の間、デモ環境にアクセスできない事象が発生しておりました。

調査の結果、WAFのホワイトリストに二つあるデモのサブドメインのうち1つを入れ忘れていたことが発覚し、2月15日16時ごろに正しく設定し直しました。

ご迷惑をおかけし、大変申し訳ございませんでした。

今後ともご愛顧賜りますこと、お願い申し上げます。

特徴

シンプルかつ分かりやすい

主な利用者が生徒の保護者であるため、UIは難しい文言を使用せず、直感的な操作ができるようになっています。
見つけやすい

顔識別機能で、その生徒が写ってそうな写真をあらかじめピックアップしており、保護者はすぐに生徒の写真を見つけることができます。
高画質な画像を共有できる

8K/60MBまでの写真なら一切圧縮せず保護者に共有することができます。また、写真をダウンロードする際や拡大する時以外は、写真が60KB以下になるまで圧縮した「節約画質」を表示し、データ量を削減してます。
パスワードレス

保護者はメールアドレス認証、又はパスキー(※1)でログインすることができます。これによりパスワードを覚えたり、学校がパスワードのリセット作業に追われることもありません。
音楽が再生できる（※1)

合唱コンクールの音声データなどをあらかじめ予め登録しておくことで、音楽を聴きながら写真の閲覧が可能です。
顔識別でサーバーに負荷がかからない

通常なら顔識別などの処理はサーバーで実行されますが、みーつけたではクライアント側で実行しており、サーバーに負荷かけすぎでレンタルサーバーなどから制限を食らうことはありません。また、処理自体はそこまで高負荷なものでは無いので、スマホでもサクサク実行可能です。
スマホだけで写真をUP&管理

みーつけたではスマホサイズのページ表示に対応しており、顔識別処理もスマホで実行可能となっています。そのため、スマホで撮影した写真をそのままその場でアップロード可能です。
PWAに対応

PWAに対応しているため、みーつけたをネイティブアプリのように使用することができます。
導入が容易

みーつけたでは「学校が簡単に導入できる」ことを目標としています。具体的には、「高校の情報科の先生が、一般的なレンタルサーバーにSSHでコマンドを打つことなく導入できる」ことを目指しています。そのため、サーバーに色々インストールしたりしなくてはいけないだとか、Node.jsなどのそもそも使用できない言語は使用せず、PHPと普通のJavaScriptのみで開発しました。また、フレームワークも一切使用せずに開発しています。

※1 今後実装予定です

使用技術

フロントエンド

Font Awesome：6.7.2

バックエンド

PHP：8.3

データベース

MySQL(MariaDB)：10.6

ライブラリ

face-api.js：0.22.0

PHPMailer：6.9.3

動作確認環境

PHP：8.3

MySQL(MariaDB)：10.6

動作確認済みのブラウザ

Google Chrome
Safari

PWAでの動作確認済みのOS/ブラウザ

Important

iOS(iPhone/iPad)はSafariでのみPWAを利用できます。

MacOS 15 / Safari
MacOS 15 / Google Chrome
iOS 18 / Safari

使い方ガイド(学校向け)

学校側では保護者に写真を共有する際、管理者用ダッシュボードという画面で操作を行います。

生徒管理

ログイン後などに最初に表示されるページです。

このページを使用して生徒情報を追加、削除、変更などの操作をすることができます。

生徒管理(生徒追加)

まず、生徒管理から生徒を追加を選択します。
追加する生徒の名前とメールアドレスを入力します。
登録を押します。
生徒の登録に成功しましたと表示されたら成功です。

生徒管理(生徒削除)

まず、生徒管理から削除する生徒を選択します。
生徒を削除を選択します。
二度にわたる警告を無視します。
生徒の削除に成功しましたと表示されたら成功です。

※ 選択する項目の値を選択以外にすることで選択していない生徒を削除することができます。

生徒管理(生徒情報変更)

まず、生徒管理から変更する生徒を選択します。
生徒を変更を選択します。
変更したい値を変更します。
変更を選択します。
情報変更に成功しましたと表示されたら成功です。

※1 選択する項目の値を選択以外にすることで選択していない生徒を変更することができます。

※2 変更したところは色が変わるようになっています。わかりやすいですね(自画自賛)。

生徒管理(顔情報登録(変更))

顔情報登録(変更)では生徒の顔情報を登録することができます。

生徒管理から登録したい生徒の顔情報登録(変更)をクリックします。
顔情報登録というページが開くので、画像を選択から登録したい生徒の顔写真を選択します。

使用できない写真

生徒が複数人映った写真
マスクをした写真
鮮明ではない写真
顔全体が写っていない写真
顔の一部が隠された写真
加工された写真

解析が行われますので少し待ちます。
分析が無事に終了しましたと表示されたのを確認し、顔の輪郭・目鼻口が正しく認識されていることを確認します。
登録を選択します。
顔情報の登録/変更に成功しましたと表示されたら成功です。

※ 初めて解析をする際は少々時間がかかります。

エラーが出た場合

複数の顔が検出されました => 写真に複数人の顔が写っています。生徒一人のみの写真を選択してください。

顔が検出されませんでした => 写真に顔が写っていないか写真が鮮明でない可能性があります。写真を変えて再度実施してください。

画像管理

画像を管理できるページです。写真の情報を変更したり削除したりなどの操作ができます。

画像管理(アップロード)

まず、画像管理からアップロードを選択します。
画像を選択からアップロードしたい写真を選択します。

アップロード時の注意

アップロードできるのはJPEG, PNG, WebP, GIFのいずれかのみです。
画像は8000x8000px以下かつ60MB以下の画像を選択してください。
サイズ制限、容量制限、ファイルの種類の制限のいずれかで引っかかった場合は処理が途中で終了します。
画像から顔が検出されなかった場合はエラーが出てもそのまま処理が続行されます。

アップロードを押します。

※ この際に画像から顔情報と表情を取得し、サーバーに送信します。
X個の画像を分析し、アップロードしました。と表示されたら成功です。

※ アップロードしただけでは

エラーが出た場合

画像でないファイルが選択されています => JPEG, PNG, WebP, GIF以外の形式のファイルが検出されました。今一度アップロードするファイルをご確認ください。

容量制限を超える画像が選択されています => 60MBを超えた画像が検出されました。今一度ご確認ください。

画像管理(画像削除)

まず、画像管理から削除する画像を選択します。
画像を削除を選択します。
画像の削除に成功しましたと表示されたら成功です。

※ 選択する項目の値を選択以外にすることで選択していない画像を削除することができます。

画像管理(画像情報変更)

まず、画像管理から変更する画像を選択します。
画像を変更を選択します。
変更したい値を変更します。
変更を選択します。
情報変更に成功しましたと表示されたら成功です。

※1 選択する項目の値を選択以外にすることで選択していない画像を変更することができます。

※2 変更したところは色が変わるようになっています。わかりやすいですね(自画自賛)。

画像管理(写真振り分け)

まず、画像管理から写真振り分けを選択します。
振り分けを実行を選択します。

※ ここで写真から生徒を検出し、振り分けます。
処理が全て無事に完了しましたと表示されたら成功です。

PWA

本システムは全ページPWAに対応しています。

利用方法は各自でお調べください。

使い方ガイド(保護者向け)

現在準備中です！ごめんなさい

こちらは保護者向けの使い方ガイドです。

利用開始(ログイン)

みーつけたの利用を開始するにはまず学校から案内されたページを開きます。

ページURLの例：https://s0-mi.sample.com/
ページを開いた後、学校に提出したメールアドレスを入力します。
2で入力したメールアドレスに届くメールを開きます。
少し下にあるURLをクリックします。
画面が開きログインに成功しましたと表示されたら完了です。よきみーつけたライフをお過ごしください✨

画像を端末に保存

画像を端末に保存したい場合は、保存したい画像をクリックし、下にある保存を押してください。

メールアドレスを変更

みーつけたの右上にある三本線ボタンを押します。
設定をクリックします。
メールアドレスを変更に変更後のメールアドレスを入力します。
変更をクリックします。
3で指定した変更後のメールアドレスにメールが届くので、それを開きます。
少し下にあるURLをクリックします。
画面が開き、変更が完了しましたと表示されたら完了です。

デモについて

みーつけたでは学園関係者限定で実際に動作させることができるデモ環境を解放しております。

https://mi.syumikun.com/mission/

ご利用前の注意点

構造上1つのデモ環境につき一つのサブドメインと一つのデータベースを占有するため、個数と利用時間に制限があります。
学園専用メールアドレス(ac/ed/n-jr)でメール認証を行なってください。
デモ版には法律、公序良俗に反するデータ、特に年齢制限がある、著作権や肖像権などに違反してしまうファイル類を絶対にアップロードしないでください。
利用終了後、アップロードされたファイルなどのすべてのデータがリセットされます。

その他

みーつけたでは色々な方に幅広くご利用いただくため、1回の利用時間を「2時間」に制限しております。

混雑している際は譲り合ってご利用いただきますよう、お願い申し上げます。

また、ご利用中にご質問、不具合、バグ、脆弱性などを発見された場合は下記連絡先までご連絡ください。

Slack：@ユキシマ

導入方法

Note

みーつけたは現在も開発中で、導入については今後より容易になる予定です。

1. 環境を準備する

はじめに、次の条件に合うサーバーを準備/レンタルします。

FTPを使用できる
PHPを使用できる(PHP8.3が利用できるとなお良い)
SSLを使用できる
MySQLを使用できる
SMTPを利用できる(587番ポート)
TSLを使用できる
.htaccessを使用できる
容量が15GB以上(推奨)

準備/レンタルでき次第、サイト・メールの設定を各自実施してください。

2. データベースを準備する

MySQLのデータベースを立ち上げ後次のSQLを実行してテーブルを作成してください。

テーブル名`students`を作成

CREATE TABLE `students` (
  `id` int(5) NOT NULL,
  `name` text NOT NULL,
  `face` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL,
  `mailaddress` text DEFAULT NULL,
  `created` timestamp NOT NULL DEFAULT current_timestamp(),
  PRIMARY KEY (`id`),
  UNIQUE KEY `mailaddress` (`mailaddress`) USING HASH
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COLLATE=utf8mb3_general_ci;

テーブル名`photos`を作成

CREATE TABLE `photos` (
  `id` INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `path` TEXT NOT NULL,
  `name` TEXT NOT NULL,
  `comment` TEXT DEFAULT NULL,
  `face` LONGTEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL,
  `detection` LONGTEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL,
  `expression` VARCHAR(255) DEFAULT NULL,
  `created` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

テーブル名`mail_token`を作成

CREATE TABLE `mail_token` (
  `token` VARCHAR(255) NOT NULL,
  `is_verified` TINYINT(1) NOT NULL DEFAULT 0,
  `student_id` INT(5) NOT NULL,
  `ipaddress` VARCHAR(45) NOT NULL,
  `redirect_url` TEXT DEFAULT NULL,
  `mailaddress` VARCHAR(255) DEFAULT NULL,
  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`token`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

テーブルを作成できたか必ず確認してください。

3. ファイルをダウンロードする

まずみーつけたのGitHubのページにアクセスします。
右上にある緑色のCode → Download ZIPの順でボタンをクリックし、ファイルをダウンロードします。
ダウンロード完了後、ファイルを解凍してください。

4. `config.php`を編集する

Note

今後ymlやjsonといったファイルに変更する予定です

みーつけたではconfig/config.phpにDBの設定や管理者メールアドレスを保存しています。

初期は何も値が入っていないので、下記に従って全ての値を埋めてください。

1. `domain`

ここではみーつけたを設置するドメインを指定します。

Warning

この際、ドメインのみを入れてください。「mi.sample.com/」など「/」を入れないでください。

例：mi.sample.comに設置する場合は

"domain" => "mi.sample.com",

と入れます。

2. `host`, `dbname`, `username`, `password`

ここではMySQLの接続情報を入力します。

"host" => "localhost",
"dbname" => "database_name",
"username" => "database_user_name",
"password" => "password",

3. `recaptcha_site_key`, `recaptcha_secret_key`

みーつけたでは保護者・管理者のログインページにGoogle reCAPTCHA V3を使用しており、README作成現在ではOFFにする機能は作っていません。そのため、必ずreCAPTCHAからサイトキー・シークレットキーを取得し、値を入れてください。

"recaptcha_site_key" => "XXXXXXXXXXXXXXXXXXXX",
"recaptcha_secret_key" => "XXXXXXXXXXXXXXXXXXXX",

4. `mail_server`, `mail_user`, `mail_password`, `mail_address`

ここではメールの送信元情報を入力します。

Important

メールはTLSで暗号化され、ポートは587を使用します。今後暗号化の有無やポート番号を変更できるようにしようと考えています。

"mail_server" => "mail.sample.com",
"mail_user" => "no-reply",
"mail_password" => "password",
"mail_address" => "no-reply@sample.com",

5. `school_name`, `school_tel`, `school_email`

ここではメールの最後(署名)に表示される学校名・電話番号・メールアドレスを指定します。

例えば下記の通りに値を入れると、

"school_name" => "波城高等学校",
"school_tel" => "0120-000-000",
"school_email" => "contact@nami-shiro.ed.jp",

下記の通りになります。

━━━━━━━━━━━━━━━━━━━━
波城高等学校
TEL：0120-000-000
E-Mail：contact@nami-shiro.ed.jp
━━━━━━━━━━━━━━━━━━━━

このようになります。

6. `admin_id`, `admin_mailaddress`

ここでは次の二つを指定します。

管理者ID

管理者がログインする際に使用するIDです。自由な値が入れられます。

もし、不正なアクセスが発覚した際に、このIDを変更することで全ての場所でセッションが破棄されます。
管理者メールアドレス

管理者がログインすると、本メールアドレス宛にログインしたIPとユーザーエージェント、日時が入ったメールが送信されます。

管理者ID：001　管理者メールアドレス：admin@sample.comの場合は下記の通りになります。

"admin_id" => "001",
"admin_mailaddress" => "admin@sample.com",

7. `admin_password`

ここでは管理者がログインする際に使用されるパスワードをハッシュ化した状態で保存します。

SHA-256でのハッシュ化をおすすめしています。

Caution

必ずハッシュ化した状態で保存してください。

パスワードを「ABCabc123_」としたい場合はSHA-256でハッシュ化し、

126c08d9dd2aca7b36d3907967aa54456d8e6a9d7d7915567a8c53dae37f2909

出てきた値を

"admin_password" => '126c08d9dd2aca7b36d3907967aa54456d8e6a9d7d7915567a8c53dae37f2909',

このように入れてください。

8. `similarity` 最後ﾀﾞﾖ！

Tip

この値は基本初期値のままで大丈夫です。

ここでは顔識別する際に、どのくらい似ていれば同一人物と判断するかを設定します。

1.0に近づけば近づくほど緩くなり、逆なら厳しくなります。

もし、顔識別がうまく機能しない場合は0.5にするとうまくいくかもしれません。

"similarity" => 0.6,

上記のように値を入れます。

これにてconfig.phpの設定は完了です！！

必ず保存してからファイルを閉じてくださいね！

5. ファイルをアップロードする

FTPでサーバーに接続します。
ファイルをドメイン直下にアップロードします。

6. ドメインにアクセスしてみる

ドメインに実際にアクセスしてきちんと動くかご確認ください。

アクセスできれば完了です！！！

アクセスできない、エラーが出る場合はPHPがサーバーにインストールされているか、ドメインのルートディレクトリにファイルが設置されているか、config.phpがきちんと設定されているかをご確認ください。

お疲れ様でした！！！！

LICENSE | ライセンス

face-api.js

Ver.0.22.0

MIT License

PHPMailer

Ver.6.9.3

LGPL-2.1 License

Files

README.md

Latest commit

History

README.md

File metadata and controls

📸 みーつけた 〜 学校と保護者を繋ぐ架け橋 〜

【一時デモにアクセスできなかった問題について】

特徴

使用技術

フロントエンド

バックエンド

データベース

ライブラリ

動作確認環境

動作確認済みのブラウザ

PWAでの動作確認済みのOS/ブラウザ

使い方ガイド(学校向け)

ログイン

エラーが出た場合

生徒管理

生徒管理(生徒追加)

生徒管理(生徒削除)

生徒管理(生徒情報変更)

生徒管理(顔情報登録(変更))

エラーが出た場合

画像管理

画像管理(アップロード)

アップロード時の注意

エラーが出た場合

画像管理(画像削除)

画像管理(画像情報変更)

画像管理(写真振り分け)

PWA

使い方ガイド(保護者向け)

利用開始(ログイン)

画像を端末に保存

メールアドレスを変更

デモについて

ご利用前の注意点

その他

導入方法

1. 環境を準備する

2. データベースを準備する

テーブル名studentsを作成

テーブル名photosを作成

テーブル名mail_tokenを作成

3. ファイルをダウンロードする

4. config.phpを編集する

1. domain

2. host, dbname, username, password

3. recaptcha_site_key, recaptcha_secret_key

4. mail_server, mail_user, mail_password, mail_address

5. school_name, school_tel, school_email

6. admin_id, admin_mailaddress

7. admin_password

8. similarity 最後ﾀﾞﾖ！

5. ファイルをアップロードする

6. ドメインにアクセスしてみる

LICENSE | ライセンス

face-api.js

PHPMailer

Copyright | コピーライト

📸 みーつけた　〜学校と保護者を繋ぐ架け橋〜

テーブル名`students`を作成

テーブル名`photos`を作成

テーブル名`mail_token`を作成

4. `config.php`を編集する

1. `domain`

2. `host`, `dbname`, `username`, `password`

3. `recaptcha_site_key`, `recaptcha_secret_key`

4. `mail_server`, `mail_user`, `mail_password`, `mail_address`

5. `school_name`, `school_tel`, `school_email`

6. `admin_id`, `admin_mailaddress`

7. `admin_password`

8. `similarity` 最後ﾀﾞﾖ！