ルームシェアのアルゴリズム:みんなで納得して決めるための方法

ハッピーコンピューター R&D担当の白川です。

日常生活において複数人で何かを決める場面はたくさんあると思いますが、「みんなで何かを決める方法」と聞いてどのような方法を思い浮かべるでしょうか?

話し合い、多数決(1人1票の最もシンプルな投票)、もしくはくじ引きやジャンケンなど運に任せる方法を思い浮かべた人が多いのではないでしょうか。

話し合いは決定力に欠けるため、最終的に必ず決まる方法となったら多数決か運ベースの方法のどちらかが圧倒的に多いと思います。

しかしこれらのよく使われる方法は、一部の人にとって大変不満足な結果になってしまう可能性が高く、みんなで決めるというよりは勝者と敗者を決める方法になっています。

そのため、「みんなで決める」「みんなが納得する」ことを目指し、様々な決定方法についてこれまで研究されてきました。

今回はその中の一つとして、公平分割問題(fair division problem)の一種であるルームシェアの問題(rental harmony)を取り上げてみます。

ルームシェアの問題

仲良し4人組が、東京で家賃10万円、4LDKの物件を借りてルームシェアをしようとしています。

都内で4LDKで10万円・・・果たしていったいどんな物件なのか、そこは本当に東京なのか、気になりますね。

それはさておき、4つの部屋はそれぞれ広さや採光など条件が異なるため、誰がどの部屋にするか、また家賃をどの程度負担するか決めかねています。

  • 部屋1: 8畳洋室、窓あり
  • 部屋2: 6畳洋室、窓(二面採光)あり
  • 部屋3: 6畳和室、窓あり
  • 部屋4: 4.5畳洋室、窓なし

一般的には話し合いで決めそうな問題ですが、4.5畳窓なしの部屋の押し付け合いが始まりそうです。

さて、何かいい決め方はないものでしょうか?

解決方法

ルームシェアのように「固定の全体支出額」と「再分割不可能なリソース群」が与えられたとき(=「家賃」と「広さや特徴が決まっている4つの部屋」)、全員が納得する(=「あっちの部屋がよかったのに」とならない)方法がいくつか提案されています。

ここでは、紙と鉛筆があればすぐにできるHaakeらの方法で決めたいと思います。

1. 各々が思う「各部屋の価値」を出し合う

まず、一人ひとりが思う各部屋の価値、すなわち「この部屋ならこれぐらいの家賃を負担してもよい」という金額を書き出します。

ただし書き出す金額には制約があり、各部屋の価値の合計を家賃に一致させる必要があります。金額に制約のあるオークションっぽいですね。

その後、全員でその金額を共有します。

例えば以下のようになったとして、次に進みましょう。

部屋1 部屋2 部屋3 部屋4 合計=家賃
Aさん 3.5万円 3.0万円 2.5万円 1.0万円 10.0万円
Bさん 3.2万円 2.8万円 2.5万円 1.5万円 10.0万円
Cさん 4.0万円 3.1万円 2.0万円 0.9万円 10.0万円
Dさん 4.5万円 3.5万円 1.5万円 0.5万円 10.0万円

2. 価値が最大となるように部屋を割り振る

各部屋に対して4人が思う価値は異なっていますが、この価値を最大化するように部屋を割り当てることで、全体として家賃分以上の価値を得ることができます(最悪でも家賃と同等の価値となる)。

先ほどの表で計算すると、部屋1をDさん、部屋2をCさん、部屋3をAさん、部屋4をBさんに割り当てたときに、全体の価値が4.5万円+3.1万円+2.5万円+1.5万円=11.6万円と最大になります。

部屋1 部屋2 部屋3 部屋4
Aさん 3.5万円 3.0万円 2.5万円〇 1.0万円
Bさん 3.2万円 2.8万円 2.5万円 1.5万円〇
Cさん 4.0万円 3.1万円〇 2.0万円 0.9万円
Dさん 4.5万円〇 3.5万円 1.5万円 0.5万円

3. 余ったお金を均等に還元する

実際には家賃は10万円なので、 余った1.6万円を4千円ずつ4人に返すことができます。

その結果、Dさんが4.1万円、Cさんが2.7万円、Aさんが2.1万円、Bさんが1.1万円の負担となります。

この方法で負担額と部屋を決めることで、必ず全員が自身の部屋に対して思う価値以下の負担となることが保証されます。

これにて一件落着。

解決方法 その2

・・・Dさんが何か言いたげなようです。

言い分を聞いてみると、「Cさんが自分の3.5万円よりも安い3.1万円で部屋2に決まったのが解せない」とのことです。

Dさんも部屋1に自身が思う価値よりも4千円安く住めているのだから別にいいじゃんと思う人もいるかもしれませんが、この「他の部屋は全部自分よりも高い値付けをした人が住んでくれないと損した気分になる」と思う状態をenvy(妬み)と呼び、envy-free(妬みがない)な状態にすることで初めて全員が納得したと考える人もいるようです。

確かに先ほどの方法では、他の人の金額の並び次第で誰かが自分よりもおトクに部屋に住めているように感じるケースがあります。

そこで、余ったお金の還元方法をより納得感が得られるように(=他の人の割り当てをみても自分よりおトクに部屋が決まったと感じないように)変更します。

3-B. 妬みを解消するように余ったお金を補填する

今回の場合、Dさんが部屋2に3.5万円の価値を付けており、それより4千円安い3.1万円の価値を付けたCさんが部屋2に決まったので、差額の4千円を先にDさんに補填します。

これにより、Dさんは各部屋に4千円安く値付けをしたとみなすことができるため、Dさんの妬みは解消されました。

小難しい話になりますが、この妬みの解消は必ず成功する(余った金額の範囲内で全員の妬みを解消できる)ことが理論的に保証されています。

妬みの解消が終われば、あとはさっきと同じように余ったお金(Dさんに4千円を補填し、残り1.2万円)を全員に還元するだけです。

最終的に、Dさんが3.8万円、Cさんが2.8万円、Aさんが2.2万円、Bさんが1.2万円の負担となります。

補足

実は、今回ご紹介したHaakeらの方法をそのまま適用すると家賃の負担額がマイナスになるケース(=他のルームメイトからお金をもらいながら住む状態)がごくまれに発生しますが、その場合、ルームメイトにとってはその人を追い出して空室状態にしたほうが負担が軽くなるというバグがあるため、最終的な負担額を0円以上に調整する必要があります。

家賃の負担額が絶対にマイナスにならないような決め方もあり、これを非負性(non-negativity)といいますが、非負性を満たすと妬みの解消を保証できなくなることが証明されています。

まとめ

今回ご紹介した方法はルームシェアの問題を解決する方法のうちの一つであり、他にもいくつか方法が提案されていますが、理論的な保証のある方法の中でもかなりシンプルで使いやすいのではないかと思います。

ルームシェアで部屋と負担額を決める際にはぜひ使ってみてください。

【物語風】地獄の黒塗り作業から解放せよ!大量にあるPDF文書内のセンシティブな情報を自動で黒塗りする

黒塗りイメージ

 

hapicom Inc.ことハッピーコンピューター株式会社では、様々な業界におけるご相談やご依頼の中で「一筋縄ではいかない問題」に直面することが多々あります。

本シリーズでは、過去にあった一筋縄ではいかない問題について、公開できる範囲でストーリー仕立てにしてご紹介していきます。

あまりオープンな場ではみられないような案件が多いので、こんな世界もあるのかと楽しんで読んでいただければ幸いです。

地獄の黒塗り作業から解放せよ!問題編

「これって関係ない会社の名前とかまとめて黒塗りできたりしますか」

ピコンッとチャットに投げられたそれは、二つ返事ですぐに、はいできます、とは答えられない程度には一筋縄ではいかなさそうだと思った。

チャットの相手は弁護士で、残業代の未払いに関して労働者側から依頼を受け、勤め先の会社を相手に訴訟を起こそうとしている中での出来事である。

裁判では事前に集めた証拠品をもとに相手方と戦うのであるが、会社を相手にこのような労働問題にまつわる訴訟を提起するとなると、証拠となるデータや紙の書類はほとんど全てその会社の社内にあるため、裁判までの間に会社側は都合の悪い証拠を処分したり改ざんしたりすることができてしまう。

そこで、労働問題に関する訴訟では通常、証拠保全と呼ばれる手続きが取られる。

証拠保全とは、裁判官の立ち会いのもと会社の敷地に立ち入り、裁判の証拠として必要だと思われるデータや書類を証拠品として押収するための手続きである。

特筆すべきは、証拠品を闇に葬られないよう、証拠保全の実施が当日に会社側に通知され、即日強行される点である。

ニュースやドラマで警察がいきなり会社にやってきて物品を押収するという場面をたまに見かけるが、それと似たような感じで通常業務を行っている会社に弁護士や裁判官らがぞろぞろと立ち入り、証拠品リストに記載のあるデータや書類を一つずつ押収していく。

この証拠保全によって、残業を行っていた証拠となりうるパソコンの稼働履歴やメールの送受信履歴などを、処分や改ざんが行われていないであろう状態で確保することができる。

ここでの我々hapicomの役割は、弁護士に付随する証拠保全エンジニアとして特別に許可をもらい、証拠保全の際に一緒に会社に立ち入り、システムログの抽出など専門的知識が必要な作業を含め証拠品の押収作業を行うことである。

--

今回もこの冒頭の弁護士とともに証拠保全に出向き、そして今、押収した大量の書類データについてチャットでやり取りをしている。

「裁判所からセンシティブな情報は隠すように言われて」

続けて届いたチャットメッセージには、証拠保全で押収した文書データを保管する裁判所から何やら要請があった旨が書かれていた。

押収した大量の文書データの中に、今回の訴訟に関係のない人や組織の名前などセンシティブな情報が多分に含まれており、このままでは保管できないから黒塗りをしてほしいと言われたとのことだった。

弁護士によれば、裁判官によってこのあたりの判断は異なり、今回の裁判官はかなりセーフティ寄りに考えるタイプで、万が一データが外部に漏れても大丈夫な状態で保管したいと考えているのではないか、ということらしい。

もちろん反論はしたのだが、裁判官への説得むなしく、黒塗りは必須となった。

どのような理屈にせよ裁判同様、証拠保全においても裁判官の最終判断が絶対であり、裁判官がそうせよと言うのだから対応しないわけにはいかない。

押収した文書データはPDFファイルにして千超、しかも各ファイルはそれぞれ数ページある、ということは、ページ数はざっと見積もって数千だ。

「事務所の人で手分けしてやれば一日あれば」

弁護士は言うが、弁護士事務所の人員を黒塗りするために一日費やせば、いったいどの程度の損失になるだろうか。

また、今後も黒塗りを要請される可能性があることを考えれば、今回さえ手作業で乗り切れれば、というある意味で怠惰な解決方法はあまり得策ではないと思われた。

弁護士事務所の方々をこのような生産性のない作業から解放させるべく、hapicomのメンバーは立ち上がった。

地獄の黒塗り作業から解放せよ!解決編

問題編で背景や経緯を書き連ねましたが、今回の問題を簡潔にまとめると「大量にあるPDF文書内のセンシティブな情報を自動で黒塗りする」というものになります。

期限は明確に提示されていないものの、緊急の要件ではあるので数日中に片付けたいというような状況です。

求められる品質は「裁判官が納得するレベルのもの」という曖昧な状態ですが、このようなケースでは1ターンで完璧な状態を目指すのは大変ですので、それなりの状態で一旦提出し指摘されたところを修正していく逐次方式を前提にすることで、作業時間の短縮と最終的な相手の満足度を両方追えます(状況によっては専門家として不誠実に見られることがあるので注意)。

ということで実際に我々がとった行動は、まず最初のボールをすぐに打ち返すことを目指し、ありものの組み合わせで簡単に黒塗りを自動化できる方法がないかを模索することでした。

方法の模索

壁になりそうな部分は下記の処理で、どちらもオープンソース、すなわち無償で利用することのできるライブラリであったような気がしたので、なんとなくできそうだという感覚はありました。

  1. センシティブな情報に該当するであろう人名や組織名などの固有名詞をテキストから自動抽出*1する
  2. PDF内のテキストを読み取ったり、指定した固有名詞が出現する位置に図形を追加したりする

まず1について先人がいないかWebで探してみると、自然言語処理の研究も行っているTIS株式会社の方のブログでまさに固有名詞を抽出して黒塗りするという事例があり、対象がPDFファイルではないものの、この方向性でいけそうだという確信を深めました。

qiita.com

また、オープンソースで活用できそうな固有名詞抽出のためのツールについて調べると、東北大学自然言語処理研究グループが公開しているja_core_news_trf (cl-tohoku/bert-base-japanese-char-v2) という言語モデルが固有名詞の抽出にも使えるということで、これを使わせていただくことにしました。

一方2については、黒塗りするための操作が可能なライブラリがあるか調べてみた結果、PyMuPDFというライブラリを使えば、PDF内の全テキストの取得、指定した固有名詞に対応するPDF内の座標の取得、指定した座標での長方形の追加が可能だとわかりました。

この時点で、以下の手順でPDFファイルの自動黒塗りができると判断し、残りの不確定要素である固有名詞の抽出精度について検証を進めることにしました。

  1. PDFファイルを読み込む
  2. PDF内のテキスト情報を取得する
  3. テキストの中から固有名詞を抽出する
  4. 固有名詞に対応する箇所に黒色の長方形を追加*2する
  5. PDFファイルを保存する

検証と実践

調べただけでは分からない部分については、実際に自分で試してみて確認するしかありません。

ということで、コードを書いてPDF文書の黒塗りを試してみました。

実際に手元にあるPDF文書を処理させてみると、思っていたよりもかなり高い精度で固有名詞が抽出できていました。

黒塗り結果の例

サンプル用のPDFファイルでの黒塗り例

そしてこの時点で、冒頭のチャットの質問に対して「できます」と答えられる状態になったと言えます。

とはいえ100%の精度というのは難しいもので、ここから先は人の目で直接見て調整する必要があります。

例えば上のサンプル画像では、西暦の数字を商品名として誤って抽出しています。

幸い、情報漏洩が一切発生しないように、というような厳格な要件ではないので、文書をざっと見渡して、目立っている語についてのみ個別に処理ルールを設けて手当てをしていきます。

ライブラリのおかげで必要なコード量も少なく、作業時間としてはそれほどかかりませんでしたが、文書数が多く処理の待ち時間がそれなりにあったため、全ての文書を一通り黒塗りするのに数時間必要でした。

それでも、緊急で対応する必要のある問題に対して、数日以内で片を付けるという目標を達成することができました。

最後は忘れずに、黒い長方形の裏側にまだ残っているであろうテキスト情報を消すためPDFを一括でJPG画像に変換してから提出し、裁判官の指摘を待つことにしました。

指摘と修正

想定通り、裁判官からの指摘は入りました。

指摘内容は文書中のURLを隠してほしいというもので、つまり、それ以外の部分については問題ないという、想定よりもかなり良いものでした。

URLを隠すのは人名や組織名などを黒塗りするよりもはるかに簡単で、正規表現というものを用いることで、URLのパターンにマッチするものを正確かつ迅速に見つけ出すことができます。

したがってこの段階で、「大量にあるPDF文書内のセンシティブな情報を自動で黒塗りする」という一筋縄ではいかない問題は一応の解決を見ることになりました。

地獄の黒塗り作業から解放せよ!後日談

後日、新たに別の文書群についても黒塗りしなければならず自動化で対応していて良かったと思わされる出来事はあったものの、この件に関しては以降しばらくの間音沙汰はなく、頭の中のすぐに取り出せる記憶領域からは完全に霧散していた。

数ヶ月経った頃、弁護士から連絡があった。

大量の文書データを武器に戦った弁護士は見事裁判で勝利したらしく、メールで勝利報告を送ってくれた。

「おかげさまで勝つことができました」

お世辞ではなく、実際に大量の文書データを証拠品として使うことができたからこそ、時間外労働をしていたことが認められ、勝つことができたのだろう。

役に立てて嬉しいという気持ちはもちろんあるのだが、あれだけの量の文書の中身を精査し、依頼人が時間外労働をしていたということを裁判で認めさせ、勝利したということに、畏敬の念を感じずにはいられなかった。

一次関数的にしかスケールしない、個々に対応していくしかないような仕事をしている人に対して、楽していい部分は楽させたいというような気持ちが強まった気がした。

(付録)PDF文書に黒塗りするコード

自動黒塗りのコードはpythonを使って書きました。

まず、それぞれのライブラリをインストールします。

pip install PyMuPDF
pip install spacy
python -m spacy download ja_core_news_trf

あとは下記のコードで、srcフォルダ内にあるPDFファイルが一つずつ読み込まれ、黒塗りされたPDFファイルがdstフォルダ内に保存されていきます。

import glob
import os
import fitz
import spacy

SRC_FOLDER = "src/"
DST_FOLDER = "dst/"

if __name__ == "__main__":
    nlp = spacy.load("ja_core_news_trf")
    files = glob.glob(SRC_FOLDER+"*")
    for in_file in files:
        out_file = DST_FOLDER + os.path.basename(in_file)
        doc = fitz.open(in_file)

        for page in doc:
    
            # 固有名詞を抽出
            texts = page.get_text("words", flags=fitz.TEXT_PRESERVE_WHITESPACE)
            for t in texts:
                text = t[4]
                result = nlp(text)
                pns = {}
                for ent in result.ents:
                    if ent.label_ == "PERSON" or ent.label_ == "NORP" or ent.label_ == "GPE" or ent.label_ == "EVENT" or ent.label_ == "FAC" or ent.label_ == "ORG" or ent.label_ == "PRODUCT":
                        pns[ent.text] = True

                # 黒塗りの座標ズレを抑制
                if not page.is_wrapped:
                    page.wrap_contents()

                # 検索して黒塗り
                for pn in pns:
                    rects = page.search_for(pn)
                    for rect in rects:
                        page.draw_rect(rect, fill = (0, 0, 0))
    
        doc.save(out_file)

*1:専門的にはこのような処理を固有表現認識(Named Entity Recognition, NER)と呼びます。

*2:この処理により文書を黒塗りしたような見た目になりますが、実際にはファイル内にはまだテキスト情報が残っていますので、画像ファイルに変換するなどの後処理が必要です。

徳島にある噂のサテライトオフィス密集地域の視察に参加してきました

こんにちは、hapicom随行記者担当の伊田です。

先日、とある方から「徳島県が今サテライトオフィスに力を入れているので地方での企業の働き方にもし興味があれば視察に来てみませんか?」というお誘いを受け、ここ数年、社内に"大阪じゃないどこか"へ進出したい機運もあり、大阪から徳島ならそんなに離れてないな、と軽い気持ちで参加した徳島視察2日間。

・・・想像をはるかに超えた視察になりました。

今回の視察では徳島県西部にある美馬市三好市つるぎ町、東みよし町の2市2町からなる「にし阿波」を訪れました。

視察団集合場所の吉野川ハイウェイオアシス

1日目(三好市、東みよし町)

吉野川テレワークオフィス

徳島に着いて、まず最初に吉野川ハイウェイオアシス内の吉野川ふれあい館2階にある吉野川テレワークオフィスにお邪魔しました。

吉野川テレワークオフィス

吉野川テレワークオフィスはフリースペースが広いせいかドロップインしやすいとのこと。オフィスの向かいには宿泊施設の旅籠屋があり、他にもキャンプ場・バンガロー施設が近くにあるようで、ワーケーション・観光としての利用者もいるようです。

また、休日には野外にある舞台でイベントやマーケットもあり、利用者の姿を見ることがあるそうです。

タカハマライフアート(旧小学校)

つぎに、統廃合で使われなくなった小学校を活用しているタカハマライフアートを視察させていただきました。

小学校を再活用しているタカハマライフアートさん

オリジナルTシャツプリントを手掛けており一棟丸ごと工場用地として利用されています。

職員室は大きなシルクスクリーン印刷機のある製造場所、給食室は2tトラックが横付けできるので搬入出場、音楽室は応接室とWEBミーティングのできるスペースへと変貌していました。

その広大な建物の賃料はなんと無料!

黒板には生徒たちの寄せ書きが残されている

現地採用も進んでおり、地域のコミュニティの場としても活用されていることに驚きと感動を覚えました。

旧政海旅館

三好市池田町には昭和天皇司馬遼太郎も利用した旧政海旅館があり、サテライトオフィス集積地として生まれ変わっていました。

旧政海旅館を活用

内装も当時の面影が残る

共用スペースの炊事場には大きなホワイトボードが置いてあり、入所している企業同士の情報共有の場に。

定期的に行われる交流会は、入所している企業、その家族だけでなく地元の飲食店の方々など地域の人も参加されているそう。

2日目(つるぎ町美馬市

さとやまオフィス(旧県知事邸)

自然に囲まれた中に伝統的な建造物が立ち並ぶつるぎ町の町並み、そんな場所にさとやまオフィス(旧県知事邸)がありました。

さとやまオフィスの門構え

豪奢な門構えからなる建物は外観も中も素晴らしいものでした。

素材の状態はそのままに、空調やインフラなどは新設してあるので機能性もあり、なによりもその外観からゲストを招きたくなる、そんなオフィスでした。

2024年4月にはカフェがオープン予定の織本屋

近くには藍の「寝床」として利用されていた旧永井家庄屋屋敷を利用したコワーキングスペース「NEDOKO」や、江戸中期の酒造商家「織本屋」を改装したカフェなど、様々な施設が隣接していました。

コワーキングスペース「NEDOKO」

道の駅 藍ランドうだつ

続いて道の駅 藍ランドうだつに移動。

ここにはうだつの町並みが残されており、観光地として開放されています。

そんな中にG&Cコンサルティング株式会社の運営するサテライトオフィスがありました。

ロビーにはくつろげるスペースも

G&Cコンサルティング株式会社では地方創生チャレンジクラブを運営しており、うだつの町並みは起業家の溜まり場のようになっていました。

エリア全体で企業誘致しており、チャレンジしやすい土壌を作っています。

今回で16回目の開催になる華道展「うだつをいける」

「うだつの町並み」に掲示される映画祭のポスター

ちょうど視察の時に華道のイベントがあり、町並みの中には映画祭や演劇のパンフが掲示されていて、サブカルチャーの発信地になっているように感じました。

ちなみに刀剣ブームの時には町並みを生かしたフォトセッションも行われたらしいです。

コリビングスペース「ADLIV(アドリブ)」

最後に訪れたのは広告デザインを手掛けるナカガワ・アド株式会社。

老舗印刷会社の工場を泊まれる工場としてリノベーションされており、ホステルだけでなく、コワーキングオフィスの要素も合わせ持つ、"コリビングスペース"「ADLIV(アドリブ)」としてシェアオフィスを運営されています。

元は大きな印刷機の並んでいた空間をDIYでリノベーション

かつては活版印刷機の並んでいたスペースを大きく開放的にして建物の中はまるでカーニバル会場のような楽しげな雰囲気。その中にコワーキングシェアオフィス、ドミトリー、キッチンスペースが所狭しと並んでいました。

デザインだけでなく起業する人を応援し、地域の問題解決に取り組む試みを行なっているとおっしゃっていました。

まとめ

この2日間感じたことは、東京や大阪にはない地方創生に対する行政の「熱い想い」でした。

ただ役所の会議室で説明して終わり・・・ではなく、一緒に現地に向かい、解散後も

「将来的には進出してほしいのですが、皆さんのニーズや意見を聞かせていただきたい!」

と、夜の懇親会にも2晩連続で参加!行政ってこんなだっけ?徳島が特殊なの?

さらに!今回の視察でご一緒させていただいたのは東京のコワーキングスペース三茶WORKを利用されているベンチャー経営者やマネージャーの方々。 常に徳島でなにが組み立てられるのか?なぜ徳島なのか?というストーリーや戦略について話が上がっていました。

視察メンバーも徳島メンバーも会う人みんなトップレベル。みなさん「夢」をもって挑戦されているからでしょうか。情熱、立ち回り含め、Sクラス級の方ばかりで「絶対に何かが起こるフラグ・・。」と心の中で呟いていました。

HTMLとCSSとJavaScriptでレスポンシブなアナログ時計を作る

ハッピーコンピューター R&D担当の白川です。

ウェブサイトにパーツとしてアナログ時計を配置したいときってよくありますよね。えっないですか?そうですか、ないですか・・・

「いや私はあるよ!」という方向けに、今回私がとある案件の中で作成したアナログ時計をこちらで公開いたします。

とにかくすぐに使ってみたい方はこちら

特徴

  • 完全自己完結型(外部依存なし、画像ファイルも不要)
  • すべてベクターデータなので拡大してもギザギザしない
  • HTML/CSS/JavaScriptのコードが簡潔で見やすい(個人の感想です)
  • 再利用・改変自由

秒針ありバージョン

秒針なしバージョン

コードの簡単な説明

JavaScript部分

tick関数で毎秒(毎分)針を進める処理を行っています。

針の傾きを表現する部分はCSSが担っていますが(例: transform: rotate(90deg);で90度傾ける)、そのCSSJavaScriptによって上書き処理することで針を進めています。

JavaScriptnew Date()はクライアント側(Webページを見ている人)基準の日時となりますが、今回の案件ではどの国の人がアクセスしても日本時間で表示させたかったため、new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000));としてUTC+9時間で固定しました。

CSS部分

アナログ時計の表現のほとんどはCSSで行われています。

時計の文字盤は<div id="clock">すなわち#clockbackgroundSVGデータとして表現しています。これにより別途画像ファイルをどこかに配置する必要がなくなります。SVGデータの作成にはSketchというデザインソフトを用いました。

時計の針は初期位置で12時方向を向いており、針の下部(transform-origin: bottom;)が時計の中心となるようパーセントで針の大きさや位置を調整しています。この調整により、JavaScripttransform = rotate(${minuteDeg}deg);を上書きしたときに針がいい感じに中心を軸に動いてくれます。

JavaScriptとかCSSとかよく分からないけど使ってみたい

CDNのjsDelivrからclock.min.jsを読み込んで使えるようにしているので、下記のようにHTMLを書くだけで、

<div style="width: 20%; margin: auto;">
  <div id="clock" offset="+09:00" second="true"></div>
</div>
<script src="https://cdn.jsdelivr.net/gh/iwnsew/analogclock@1/clock.min.js"></script>

以下のような感じで親要素の幅(今回の場合はwidth: 20%;)に合わせて表示できます。

div要素のid="clock"のみ必須で、offsetsecondのオプションは自由に変えることが可能です。

  • offset: "+05:30"や"-11:00"などの形式で協定世界時 (UTC) からの時差を設定できます。日本時間の場合は"+09:00"。
  • second: "true"にすると秒針あり、"false"にすると秒針なしになります。

オプションをいじって試してみる

注意事項

ミッションクリティカルな場面では使えません。ちゃんとサーバー側の時間を参照しましょう。

clock.min.jsの仕組みが知りたい

clock.min.jsの中身を知りたい方は下記のgithubのレポジトリをご参照ください。

github.com

原理としては必要なHTMLの要素やCSSの記述を全てJavaScriptのコードで行っているだけなのですが、同じWebページの他の部分に影響を及ぼさないような工夫が入っています。

はたらく大人の文化祭って、なんでもありで面白い! MOV市@渋谷

こんにちは、hapicomものづくり担当の伊田です。

先日渋谷ヒカリエの8階にあるCreative Lounge MOVのメンバーが開催する「はたらく大人の文化祭 MOV市」に参加してきました!

mov-ichi.com

会場内はオシャレなガーランドに彩られた開放的な空間でオシャレなクラフトビールや焼き菓子、色とりどりのクッキー生地にアロマと、盛りだくさんの出店の中、私たちのブースではmoodmakerという自社BGMサービスを利用したジュークボックスと、奈良先端科学技術大学院大学のソーシャル・コンピューティング研究室で生まれた研究成果をアプリ化したKOTOBAKARI2(言秤)を使ったボキャブラリ診断の展示をさせていただきました。

MOV市 2024の様子
hapicom展示ブースのmoodmakerとKOTOBAKARI2(言秤)

渋谷ど真ん中でこんなオシャレな雰囲気の文化祭に大阪のおっさんが参加して大丈夫か?・・・とか考えてましたが、参加してみると全然違いました。

本業は美容機器開発なのにお酒の瓶をスピーカーに改造してレコードを鳴らしているマッドサイエンティストがいたり、権力者の気分になれる黄金の便器にまたがれるフォトスポットがあったり、スタートアップを応援したいコワーキングスペースMOVと、オープンイノベーションを推進したいコクヨが開催する、ピッチイベント『登龍モヴ』があったりと・・・。

登竜モヴの様子

『登龍モヴ2024』の詳細についてはこちらの開催レポートをご覧ください。

www.shibuyamov.com

ふざけているのか真面目なのかどっちなんだ?

皆さんとお話ししてMOV市ってなんなんだ?というのが少しわかりました。

共通して口にする言葉は「やってみたい」。

まずはやってみようという熱い思いがこのお祭りを作り上げていました。

Creative Lounge MOVでは日頃から「やってみたい」を実行している人たちが集まっていました。普段はそれぞれの活動をしているけど、みんなで寄ってたかって面白い文化祭をやろうじゃないかとできあがったのがこのMOV市というお祭り。

だから出店している皆さんの顔もとても充実して楽しそうでした。 次はもっと面白いことを「やってみたい」!是非来年のMOV市にお越しください!

黄金の和式便器
お祭りの熱気にあてられて満面の笑みで便器にまたがる私。

【実践レポ】置配エリアにされがちなメーターボックス内をカメラで監視し倒す #ATOMcam2

システムデザイナーの平田です。

COVID-19が五類化して久しいですが、この間のパラダイムシフトの一つに"置配の普遍化"を感じています。

「置配」というものがこれほど社会的に当たり前になりますと"置配先進国"の欧米のように、置配カメラも普及してゆくのでしょうね。

今回は"置配エリア"にされがちな、メーターボックスの中をカメラで監視する方法について取り組んでみたいと思います。

ただ、"設置してみた"だけでなく、今回は私共ならではと云いますか

  • テレビモニターに常時表示させる
  • カメラ内部の録画機能だけでなく、レコーダーで他のカメラと併せて統合管理する

ところまでを目指します^^

置配カメラを設置するメリット

  • 盗難やいたずらの監視
  • 配達に気付く(気がついたら置配されているケースがある)
  • 何が配達されたのか確認できる

置配カメラに求められる要件

今回はメーターボックスへの置配を考えてみます。

  1. 画角が広いこと (メーターBOX内が狭い為)
  2. Wi-Fiで接続可能であること *1
  3. 赤外線,IRライトが搭載されていること (真っ暗です・・・)
  4. 動きを検知して、何らかの方法で通知が行えること
  5. 最低1週間程度遡って録画を確認できること。
  6. 外部機器(レコーダーやテレビへの収容など)が可能であること
  7. 簡単な方法で、建物を傷つけず設置/撤去が行えること
  8. 安価

で、今回は比較的評判の良いこのカメラに白羽の矢が立ちました。

ATOM Cam 2のメリット

  1. 画角は120°と充分
  2. Wi-Fi対応
  3. 赤外線,IRライト搭載
  4. 動体検知→スマホアプリへ通知可能
  5. microSDHC搭載可能だが、最大32GBの容量ではフルHDでは数日分。イベント録画なら要件を満たすが、連続録画は下記の方法でカバー。
  6. RTSPプロトコル対応*2。AndroidTV用アプリでおなじみの"IPCamViewer Pro"や、NASのレコーダー(QNAP QVR Pro)などで収容を目指す。NASのレコーダーで連続録画を実施
  7. 底面がマグネットであり、鉄の配管や扉に簡単に取り付け可能。また、ユニークなアングル調整機構が優秀。
  8. 驚くほど安価

実はこちら、屋外設置対応(防水)ということで、当社では2年ほど様々なシチュエーションで評価してきています。今回、購入済の評価機を使用して取り付けしていきます。

カメラのセットアップ

屋内で先にセットアップしておきましょう。 スマホアプリをダウンロードして、アプリに表示させたQRコードをカメラに読み込ませてペアリングします。

なお、SDカードも挿入してフォーマットしておきましょう。32GBまでのmicro SDHC対応です。

録画を繰り返すことになりますから、耐久性の高い録画用のものを用意しておきましょう。

取り付け場所

マンションのメーターボックスにとりつけます。*3 スマホなどでちゃんとWi-Fiが届くか予め確認しておきましょう。

給湯器用などに100Vのコンセントがあったりしますので、そこからカメラ電源を取ることができるケースが多いですが、今回は"オール電化"の為、逆にメーターボックスに電源がきていません。給湯器が無い分、広いですけどね・・・

・・・・。

電源を取得する

屋内からLANケーブルを引き、PoE→USB micro給電アダプタを使って給電します。 AC電源に困らない場合は、普通にカメラ付属のACアダプタから給電してください :-)

ATOM CamのUSBポートは専用の純正ケーブルが穴にピッタリ入ることで、防水性を担保する仕組みになっており、直接挿入できるコネクタの大きさが限られるのですが、このアダプタは無事入りました。コネクタサイズに注意しましょう。勿論防水性は無いですが今回はOK。

とりつけました

もうつきました。早い!

今回はメーターBOX内にシェルフラックを置いていますので、シェルフラックにマグネット+タイラップで固定しました。

スマホのアプリで映像を見ながら画角の調整できるので効率が良いです。

アプリで見る

たぶん普通に見ることができますよね、割愛。

他機器連携

ATOM CamはIPアドレスが固定できません。*4

ルーターなどのDHCP払い出しで、MACアドレスに対してIPを固定しておきましょう。

dhcp scope bind 1 <IPアドレス> ethernet <MACアドレス>

また、以下の方法でカメラ側のRTSPプロトコルサポートを有効にしておきます。

astrotourism.jp

TVで見る (AndroidTV)

Android TV搭載のテレビ、またはAndroidTV搭載のドングル*5をお持ちなら、IPCamViewer Proというアプリを購入しておきましょう。

play.google.com

  • カメラの追加時、メーカーは「Generic URL」
  • タイプは「Generic RTSP over UDP」を選択
  • URLは rtsp://<カメラのIPアドレス>/live を指定
  • User/PASSはそれぞれ4桁の数字です。ATOM CAMアプリから確認しましょう

レコーダー(QNAP QVR Pro)に収容する

私達はよく、QNAP社のNASをソリューションとして使用しています。

QVR Proというカメラレコーダー機能がアプリ化されたライセンスが付帯している機種があり、このケースは他のカメラもこちらに収容していますので、今回もこのレコーダーアプリに収容して録画する設定を行っていきます。

www.qnap.com

QVR Proには、下記の設定で収容して一般のセキュリティカメラ同様に録画が可能です。

  • メーカーは「Generic Model」を選択
  • カメラ機種は「Generic RTSP」を選択
  • ポートは80, RTSPポートは554を指定
  • RTSP URLは /live と指定
  • アカウント/パスワードはそれぞれ4桁の数字です。ATOM CAMアプリから確認しましょう

フルHDモードで、概ね1Mbps弱のデータレートです。 これで他のカメラと同様に統合した取扱を行うことができました。

*1:Wi-Fiでこのようなストリーム系の通信を行う場合、APの負荷が高くなり、家庭用のAPではフリーズしやすい傾向があります。法人向けのしっかりしたアクセスポイントでネットワークを構築しておくと良いでしょう。

*2:セキュリティカメラで一般的に用いられるプロトコル。rtsp://〜 のようなURLでアクセスします。ATOM Cam2の最新ファームで対応

*3:一応メーターボックスはマンションの「共用部」です。予めご認識を。

*4: 参考 【ATOM Cam共通】IPアドレスの固定は可能ですか | ATOM Tech(アトムテック)

*5:最近、AndroidTVとGoogleTVという大変紛らわしい2種類のOSがあります。外付ならこういうものを用意しましょう

VPN等で入れない先に納入したネットワーク機器を死活監視する (格安PC+PowerShell編)

Pingを飛ばすPowerShellのイメージ
こんにちは、システムデザイナーの平田です。 画像はAIが考えた「PingWi-Fi APに飛ばすPowerShell」です。PowerShell厳ついですね。パワー感じます。

閑話休題。昨今、5千円程度だったミニコンピュータRaspberry Pi半導体不足のあおりを受け、入手困難であったり、価格が高騰していたりします。

高い・・・

最近1万ちょっとでWindowsPC買えてしまう。特にCeleron N4100番台は以前のATOMベースのCeleronに比べて、大幅に実用的です。

それなら、死活監視+遠隔メンテナンス用ということで、TeamViewerなりをインストールしたPC*1を現地設置しておくのはアリなんですよね。VPN用に穴を開ける必要もありませんし。*2

特に以下のようなメッシュWi-Fiで構成されたネットワークは、設置後しばらくの間、通信品質の確認が肝要です。

blog.hapicom.jp

という訳で、PowerShellで以下のようなものを作っていきます。

有料部分では実際のコードがご覧いただけます(商用利用可)

ping死活監視

  • タスクスケジューラーで起動時に常駐的に実行
  • 指定した宛先に、5秒ごとに5回pingを飛ばす。これを1セットとする
  • 5セット到達しなければ、ログファイルに断検知を記録し、指定した宛先にメールを送信
  • 断検知後、5セット回復すれば、ログファイルに復帰検知を記録し、指定した宛先にメールを送信
  • ライブラリなどの依存なく、OSの標準機能のみで行いたい。最近メール送信も可能なPowerShellで作る

ExPingのログローテーション

  • ExPingは指定フォルダにpingのログを貯めることができます
  • pingの死活だけでなく、応答速度(ms)を一定期間記録することで、無線区間の品質の測定に
  • ファイル名は固定。"EX<西暦下2桁><月><日>.LOG" となります。(西暦処理の一手間あり)
  • 1日のログが数MB程度発生→bzip2圧縮で数百KBに。前日までのログはbzip2圧縮
  • 前月までのログは "YYYY-mm" という名のフォルダへ移動
  • 13ヶ月以上前のログは、フォルダごと消去
  • こちらもPowerShellはbzip2圧縮に標準で対応しているので、特に追加で何かのインストール不要。

*1:無料版などでなく有償版の簡易アクセスなどを使うなど、乗っ取りやボット化しない為のセキュリティ対策を講じましょう

*2:お客さま了承は得ましょう

この続きを読むには
購入して全文を読む