<a href="https://www.primecast.co.jp/columns/ubht8r55x" target="_blank" rel="noopener noreferrer nofollow">前回ブログ</a>に続き、「Next.js」を使って”楽”にホームページの更新をしたい…！こちらを実現すべく、深堀してみました。 辿り着いたのが「ヘッドレスCMS」の存在です。 今さら？と思う方もいるかもしれませんが、これまで「WordPress」を使ったサイト構築しかやってこなかったので、新たな知見を得た！という状態です。 ですので、まずが「ヘッドレスCMS」とは何なのか？と調べました。<h2 id="h7d96969786">ヘッドレスCMSの存在 </h2>「WordPress」は、管理者側がニュースやブログのデータをデータベースに登録する管理画面、バックエンド側の機能があります。 そして、登録したデータを表示するフロント側の機能も備わっており、いわゆる表裏一体型のCMSになっています。 対して「ヘッドレスCMS」は、ニュースやブログなどを投稿してデータをデータベースに保存する管理画面機能はありますが、これを表示するフロント機能がありません。 フロント機能がない、つまりヘッドレスなので「ヘッドレスCMS」というわけですね。今回のホームページ制作のケースでは「Next.js」でフロント機能を作りました。 つまり、「ヘッドレスCMS」を使って更新機能を補い、受け取ったデータを「Next.js」でこねくり回しHTMLを生成すれば、「WordPress」を使ったときと同じようなサイトが作ることができつつ、速度が改善されたものを作ることができるわけです。”楽”を失わない…こ・れ・だぁ！と直感的に解決策を見つけました。 ということでもう少し調べ進めてみました。<h2 id="ha778d8fa0f">microCMSに決めた！</h2>ヘッドレスCMSを今回色々調べて使うことになったのは「microCMS」というヘッドレスCMSです。 「microCMS」はAPIが提供されており、フロント側はそのAPIを使ってデータをJSON形式で取得することができます。（今回使うのはデータを取得するGETですが送信するPOSTも使うことが可能です。） データベースとのデータのやり取りはありますが、サイト表示の時にやり取りするわけではなくビルド時に通信を行うのでサイトが重くなることもありません。 また、フロント側のサーバーはこちらで用意する必要がありますが、フロントエンドとバックエンドが完全に分離されているということになります。 つまり、フロントとバックが一体になっている「WordPress」に比べてセキュリティ面では優れているといえるでしょう。 ただ「microCMS」を更新しただけだとwebサイトは更新されません。そこで「webhook」を仕込んであげれば「microCMS」を更新した際にビルドが走り、サイトの更新が可能になります。極めつけに、このヘッドレスCMSは日本製です。 つまりわざわざ翻訳したりしなくても、公式の手順などを読めば簡単に使えてしまいます。これは重要です！とても便利です、ありがたいです。 ありがとうございます！<h2 id="hf499957992">これからも脱WordPressするべき？ </h2>今回は「WordPress」を使わないという前提条件のもと、ホームページを制作しましたが、重要なのは「WordPress」がダメということではありません。 今回利用した「microCMS」は料金プランにもよりますが、コンテンツ(API)や管理者等メンバーの数に制限があります。 お問い合わせなどの機能を作る場合も自分たちで作りこみ、別のサービスを利用する必要があります。 対して「WordPress」は、長年多くのユーザーに利用されてきたこともあり、分からないことがあればネットで検索するとすぐに解決策を得られることは大きな利点であると言えます。また、コンテンツやメンバーの数に制限がありませんし、実装が簡単です。 フロント機能も備わっているので、記事を投稿する際にプレビューで確認することができますが、「microCMS」ではそういった機能はなく、実現するには作りこむひと手間が必要です。 他にも「microCMS」はアップロードするファイルの種類に制限がかかってしまいますが「WordPress」にはそれがありません。 プラグインの種類も多岐にわたっており、お問い合わせなど様々な機能を持つwebサイトを単体で作ることが可能なため、管理するのは比較的”楽”とも言えます。便利ではありますが、前述したセキュリティ面の不安定さに繋がってしまったり、管理の手間が膨大になったりとサイト運営・管理は必要不可欠のため、この点も含めて検討することが大切ですね。<h2 id="haa8db006da">結論 </h2>と、いろいろ調べて出てきた情報をもとにプライムキャストは「React」ベースのjavascriptフレームワークである「Next.js」とヘッドレスCMSである「microCMS」を使って新たにホームページを制作しました。 まだまだ改善する余地が残っており、今後も少しずつ改修を進め、進化する予定です。  ぜひまた見に来ていただけると、とてもうれしいです。 <h2 id="hea84ddfe2e">次回予告 </h2>次回は実際にこのサイトを例に「microCMS」をどのように使ったのか、というところをまとめて説明できたらと考えています。 是非お付き合いください。

「Next.js」＋「microCMS」でブログをシンプルに書く 

プライムキャストはこれまでのwebサイト制作に「WordPress」を使ってきました。  慣れ親しんできた「WordPress」ですが、実は2023年7月の公式ホームページリニューアルを機に”脱WordPress”を謳い文句として「Next.js」を用いて制作することになったんです。 今回は、「Next.js」を使ったwebサイト制作の裏話をご紹介していこうと思います。 <h2 id="h500c0210e1">脱WordPressを目指したワケ </h2>そもそも、なぜ今までと同じ「WordPress」ではなく「Next.js」を使おうという流れになったのか？  それは３つの理由があります。  <ol><li>1. 表示速度が遅く、せっかくwebサイトに来た人たちが離脱してしまう（アナリティクス的には直帰率が高くなってしまう） </li></ol><ol start="2"><li>2. 不正アクセスやスパムなどのセキュリティ面の問題がある </li></ol><ol start="3"><li>3. 「WordPress」はバージョンやプラグインの相性など検証、保守のコストが高く、運営が大変 </li></ol>これらの理由から、「WordPress」以外の方法でwebサイトの制作・運営を試験的に行いましょう！と社内で方針が決定しました。  正直、旧公式ホームページは重めでユーザー目線に立った時にあまり長居してもらえないかも…と感じていたので良い機会でしたね。  （この件に関しては今後改めて記事で紹介できたらと思います。） では、「Next.js」で作ったwebサイトと、「WordPress」で作ったサイトでは、どう変わってくるでしょうか ？  調べてみました。 <h2 id="h41673592cb">WordPressとNext.jsを比較してみた </h2><h3 id="h1ab68d9917">１　大幅な速度改善 </h3>「WordPress」のサイト表示の仕組みはデータベースにリクエストを送り、受け取ったデータをHTML化して表示しています。 そのため、データベースとのやり取りの多さからサーバーへの負荷が大きくなり、表示が遅れてサイトが重く感じやすいです。  これに対して「Next.js」で作ったサイトは、ビルド時にHTMLを生成し、それを表示しているため、サーバーとのデータのやり取りや、サーバーへの負荷も少なくなります。  さらに、やり取りしているデータがHTMLファイルのためサイズも小さく、表示速度が速くなるのです。 <h3 id="h22f0251e5e">２　構築のしやすさ </h3>「WordPress」でサイトを作るためにはテーマを使う、または作る必要があります。  さらに、テンプレートに合わせたページ構成にする必要があります。  「Next.js」は普通のHTMLのように表示部分を記述することができ、テンプレート等の制約を気にする必要がないため、簡単に自由なデザインで構成することができます。  言ってしまえば楽です。  ただし、これに関しては複雑なデザインや構成のサイトを作ろうとしなければ、ちょうどいい「WordPress」のテーマがあると思うので、ケースバイケースですね。 <h3 id="hae323f9e86">３　サーバー管理 </h3>「WordPress」はサーバーにインストールして使います。  この時MySQL、PHPが使えるサーバー（エックスサーバーなど）を選ぶ必要があり、そのためお金がかかります。  無料で使えるサーバーもありますが、この場合は広告が挿入されることが多いです。  「Next.js」はビルドして作った静的ファイルをアップロードしたり、「vercel」などのホスティングサービスを利用して公開できるため、利用条件にもよりますが、サーバーに費やすコストを抑えることができます。 他にもありますが、大きくこの3つが挙げられると思います。 <h2 id="h55d66e9d44">WordPressとNext.jsどちらを選ぶべきか </h2>とは言うものの、「WordPress」はニュースやブログの更新、その他ページも全て「WordPress」内だけで完結できるメリットがあり、頑張って工夫して表示速度を上げれば、慣れ親しんだ「WordPress」からわざわざ脱却しなくても良い話なのでは…と。  「Next.js」はこれらの更新もページを一から作らないといけませんからね。  これは手間です、楽じゃなくなってしまいます。由々しき問題です…。  という声が上がって来そうでした。 そこで…！確かに”楽”は失いたくないので、「WordPress」のような更新の手軽さを求めて深堀してみることにしました。  次回コラムに続きます

脱ワードプレスの御旗のもとに 

こんにちは。スキヤンです。 今回の記事にはプライムキャスト公式キャラクターであるリメカちゃんは出てきません。 彼女がパソコンからパソコンへネットワークを伝って移動し、たまに画面にひょっこり「ちゃんと仕事してる～？？」と現れてくれれば、世界中のテレワークが捗るのではなかろうか、誰も見ていないからとサボる人は減るのではなかろうか（サボっている人は相当数いることが前提になっちゃっていますが）と考えながらこの記事を作成しています。 …というのは嘘です。出張からの帰りに新幹線の車内にて、ハイボールを飲みたいなと考えながら、でも業務時間中だしなと我慢しながら作成しています。はい。<h2 id="h732c72c2cd">組織改編</h2>この度プライムキャストは組織改革を実施しました。新しい体制図はこのようになりました。<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/8f0cbf29cd6d43d69ca433636baa5c7d/01.png" alt="" width="931" height="554"></figure>旧体制では、プライムキャスト創業期に新卒で入社した現取締役の海谷がシステム開発グループを、ゲーム好きが高じてXR事業を開拓した現取締役の最首が経営戦略室を主導していました。新体制では、新しいリーダー達が技術部・イノベーション戦略グループ・システム開発グループ・システムサポートグループをそれぞれ担うこととなりました。一番の目玉はR&amp;Dチームが発足したことでしょうか。 プライムキャストは今まで、システム受託開発を中心としたフロービジネスを行ってきましたが、今後はストックビジネスに移行すべく、マーケティングに力を入れ自社製品を世に送り出していく方針となりました。 ちなみに、プライムキャストの記念すべき自社製品第1号といえばこちらですね。<figure><a href="https://www.primemeter-eye.com/" target="_blank" rel="noopener noreferrer nofollow"><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/accdad8b65ea443181f16e8ae3b631c9/pme_banner.png" alt="" width="983" height="250"></a><figcaption>メーターの検針 AIで自動化 日々の検針作業を楽にする独自のAI・IoTソリューション 「PRIME METER EYE」</figcaption></figure>ちなみに私は、新しく用意された役職「技術部 イノベーション戦略グループ/システム開発グループ 技術スペシャリスト」を襲名しました。長い。寿限無かと思った。 （そんな私の自分語りは別の記事にでもしようと思います。）そもそも、何故組織改革を行ったのか？何故ストックビジネスに移行しようとしているのか？話は遡りますが、2020年7月、プライムキャストはFIG株式会社の子会社となり、FIGグループの一員となりました。そして2023年、プライムキャストの代表取締役に、FIGグループにて全子会社のテクノロジーを司っている、凄腕エンジニア＆凄腕マネージャーである桂が就任しました。プライムキャストのFIGグループ内での役割は、「新しいこと」を生み出すことです。 組織改革は、プライムキャストの各社員が有するノウハウや人員の調整をしやすくするために、桂主導のもと行われました。 そして、もっと稼ぐ企業となり、ストックビジネスで利益を上げているFIGグループ他社に追いつくべく、フロービジネスからストックビジネスへの移行を目指しています。つまり、 桂「プライムキャストの今までの経験を集約して『稼ぐ企業』に変貌させるべく、皆が挑戦できる環境づくりをしておきました。」 皆「お～、やったるで～。」 ということです。じゃ「何するの？」を、R&amp;Dチームを中心に一生懸命考えていますというわけです。ちょっと先の未来を創るFIGグループ企業の輪の中に、ワクワクと感動を創ることをビジョンとして掲げているプライムキャストがどっぷりと入り込みました。プライムキャストが、ちょっと先の未来をもっとワクワクさせるような「新しいこと」を仕掛ける日は、そう遠くないかもしれませんね。何をやるのか？それをリメカちゃんが説明しれくれる日を楽しみに待ちましょう。 皆さま、今後ともプライムキャストにご期待ください。

プライムキャストの組織変更について

<h2 id="h71700ce6cd">PrimeMeterEye完成までの道のり</h2><ol><li>1. <a href="/columns/8ieb_pgnqe" target="_blank" rel="noopener noreferrer nofollow">2020/6/3 「アナログメーター読み取りAI」を開発しました</a></li><li>2. <a href="/columns/zwg7sllgai_6" target="_blank" rel="noopener noreferrer nofollow">2021/5/25 メーターを自動検針「PrimeMeter」ハードウェア開発</a></li><li>3. <a href="/columns/7mypad-6292" target="_blank" rel="noopener noreferrer nofollow">2022/4/27 AIでアナログメーターを自動で検針する「PrimeMeter」が進化しました</a></li></ol><h2 id="h8841699c3c">日々の検針作業を楽にする、プライムキャスト独自のAI・IoTソリューション&quot;PME&quot;</h2>「PrimeMeter Eye」、通称”PME”は、プライムキャストが開発したAI・IoTソリューションです。<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/e19b5e5c6d2b4457b088689fd5b1249a/pme00.png" alt="" width="933" height="611"></figure>メーターの検針作業には、下記のような困りごとが付きもの。<ol><li>1. ほかの仕事もあるのに、点検に時間を取られる</li><li>2. 同じ時間にメーターを記録したい</li><li>3. 数値をデータ化、グラフ化したい</li><li>4. 点検漏れ・記載ミスをなくしたい</li><li>5. 自動で数値を入力してほしい</li><li>6. 流行りの検針AIは信頼できるのか心配</li></ol>PMEは、そういった悩みを解決します。<h2 id="h78bb8158cc">PMEの３つの要素</h2>PMEは３つの要素で構成されます。<h3 id="h75c926a6fb">1.取り付け簡単！専用カメラ</h3><figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/5bc4c8ce075e42f888298cb45bbdbb1e/pme01.png?w=200&amp;h=188" alt="" width="200" height="188"></figure>独自開発のIoTカメラデバイスは、防水・防塵仕様で屋外、屋内問わず設置が可能です。単三電池×３本で長時間の連続稼働が可能で、電源はいりません。&quot;タイマー機能&quot;で設定した時間に撮影データをクラウドに自動送信します。<h3 id="h1c19756400">2.自動で読み取り！検針AI</h3><figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/64e9a947092a4bba8507ba8e51bb4a5a/pme02.png?w=200&amp;h=171" alt="" width="200" height="171"></figure>&quot;検針&quot;に特化したAIを独自に開発しました。 AIに特化したサーバーを使用し、推論にかかる時間を最小限のコストで実現しています。定期的なアップデートにより精度が向上する機械学習機能を搭載しており、様々な（円形型・矩形型・ナナセグ型、カウンタ型）メーターを読み取ります。<h3 id="hf0dca5a1ef">3.データ見える化！管理アプリ</h3><figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/83ad8e39b2004b0494d51d0c2a321c76/pme03.png?w=200&amp;h=167" alt="" width="200" height="167"></figure>カメラで撮影し、AIが読み取ったデータを表示する専用のWebアプリケーションです。メーターの撮影画像はもちろん、AIが解析したデータをグラフなどで見える化します。また、稼働中のIoTカメラのステータスを常時監視・管理します。APIによる他システムとの連携も可能で、フレキシブルなカスタマイズに対応いたします。<h2 id="h2ac3414667">PMEの３つのこだわり</h2>PMEは３つの要素で構成されます。<h3 id="h71eedecb10">1.柔軟な対応</h3><figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/04492002691b43d5bc0a653959396b64/pme04.png?w=100&amp;h=100" alt="" width="100" height="100"></figure>プライムメーターアイは、お客様のご要望に合わせてシステム全体を柔軟にカスタマイズできます。 また、専用カメラ、検針AI、管理アプリはそれぞれ個別でのご利用も可能です。さらに、システムは試用していただく段階からスタッフを派遣し運用をサポート致します。<h3 id="h7d74226751">2.信頼性</h3><figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/cb0c63f850784e0292752cbdda781b15/pme05.png?w=100&amp;h=100" alt="" width="100" height="100"></figure>任意のIP制限によるファイヤーウォールの設定が可能で、堅牢なセキュリティを実現します。 また、カメラは防水・防塵仕様。屋内外問わず、過酷な環境下での安定動作を保証致します。<h3 id="hecf3a3c000">3.定期アップデート</h3><figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/e4c1134db75849ea89970dbd9287b903/pme06.png?w=100&amp;h=100" alt="" width="100" height="100"></figure>プライムメーターアイの検針AIは、学習データを取り込み、精度の向上を行います。<hr>プライムメーターアイの詳細は下記バナーからご覧ください。<figure><a href="https://www.primemeter-eye.com/" target="_blank" rel="noopener noreferrer nofollow"><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/9cf57ec88dfb41f98a9b91899fed50f3/pme_banner.png" alt="" width="983" height="250"></a></figure><h2 id="h61bc171f42">まずはお問い合わせください！</h2>わたしたちプライムキャストは、 最新のテクノロジーで産業の問題を解決し、仕事の満足度を高めるシステム創りを手掛ける技術者集団です。プライムメーターアイのことはモチロン、なにかお困りのことがございましたら、IoT、AI、Webシステムの開発を得意とするエンジニアがお客様のご相談にお応えいたします。どうぞ、お気兼ねなくご連絡ください。

アナログメーターの点検を自動化！新サービス「PRIME METER EYE」

<h2 id="h8e8bbe6d21">三位一体のシステム</h2><ul><li>まずはこちらの動画をご覧ください。</li></ul><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/tVUaj4VHfxE?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;"></iframe></div>ご覧いただいたのはアナログメーター自動検針システム「PRIME METER」の簡易プロモーション動画です。 本記事では「PRIME METER」を構成する3つの特長をご紹介します<ul><li>・取り付け簡単　設置型のIoTカメラデバイス</li><li>・初期設定不要　ヒトの代わりに”AIが検針”</li><li>・WEB対応　データを見える化”管理用アプリ”</li></ul>※2023年より「PRIME METER EYE」としてサービスご提供を開始しました。 詳細は<a href="/columns/st0la_rvlo" target="_blank" rel="noopener noreferrer nofollow">こちらの記事</a>になります<h3 id="h1c46ae6fe8">特長１　メーターはそのまま！「設置型IoTカメラデバイス」で点検時間ゼロを実現</h3>一般的な工場では、様々な種類のアナログメーターが稼働しており、作業員は１つ１つ現場に足を運びチェックと記録を取ります。 人の目で点検する手間を無くし、全自動化を遠隔で実現するのが、設置型のIoTカメラデバイスです。 設置はメーターに外付けするだけなので、とっても簡単です。 固定方法はマグネットや固定アーム等、現場環境に応じています。<h3 id="hfe3d7bf6d6">特長２　「高精度AIの自動読み取り」による初期設定不要を実現</h3>メーターの読み取りに人工知能（AI）を導入されているサービスは、まだまだ少ないのが現状です。 「PRIME METER」は読み取り処理のすべてにAI（ディープラーニング）によるモデル推論を活用し、一般的なスマートメーターに必要な「始値」「終値」「軸位置」などの初期設定が必要ありません。<h3 id="h125fe7479d">特長３　「専用のWEB管理アプリ」によるメーター値の自動データ化を実現</h3>アナログメーターの点検は値を取得して終わり、ではありません。<ul><li>・「取得した値は正常か、異常か？」を判断すること</li><li>・「使用量はどれくらいだったか？」などデータを集計すること</li></ul>このような管理をしなくてはなりません。 「PRIME METER」は専用のWEB管理アプリでデータを24時間監視できます。 そして、読み取ったデータはAWSのサーバと連携して保存し、グラフ化はもちろんCSV出力などの機能を実装しています。<h2 id="h28b62bc2c0">今後の課題</h2>おかげさまで、プロジェクトはついにトライアル段階に入りました。※2023年より「PRIME METER EYE」としてサービスご提供を開始しました。 詳細は<a href="/columns/st0la_rvlo" target="_blank" rel="noopener noreferrer nofollow">こちらの記事</a>になります トライアルを経て課題も具体化したため、お客さまのご要望をヒアリングし対応を試みております。 「PRIME METER」はIoTデバイス、AIモデル、WEBアプリが揃って稼働します。 それぞれの課題について見ていきましょう。<h3 id="h012b51ac0e">IoTカメラデバイス</h3>IoTカメラデバイスの３つの課題<ol><li>1. 工場内の過酷な環境に対応できる設計</li><li>2. 1年以上、交換なしに稼働できるバッテリー</li><li>3. 製造コストを極限まで低くする</li></ol><h4 id="h51f862de8b">1. 工場内の過酷な環境に対応できる設計</h4>精密機械を扱う工場では、現場環境は過酷な場所もあります。 場所によっては暑かったり寒かったりしますし、水や埃にも対応していく必要があります。<h4 id="hb0ca35a6d1">2. １年以上、交換なしに稼働できるバッテリー</h4>仮に100個のIoTカメラデバイスを稼働としたら、それだけメンテナンスとしてバッテリー交換の手間やコストが発生します。<h4 id="h3bc33d2573">3. 製造コストを極限まで低くする</h4>工場内に設置されているメーターの数は少なくはありません。 デバイスを量産することでコストを抑えたり、一つ一つの構成品を吟味してできるだけ安価にするような工夫が必要です。<h3 id="h8f238e2a2d">AIモデル</h3>AIモデルの２つの課題<ol><li>1. 対応メーターを増やす</li><li>2. 性能の向上</li></ol><h4 id="h893187e110">1. 対応メーターを増やす</h4>メーターにも様々な種類があります。 今対応しているのは「丸型アナログメーター」と「セグメント式デジタルメーター」の２つですが、今後はタイプ別データをたくさん集めることで、あらゆる形態のメーターに対応していく予定です。<h4 id="hf3b6c80be7">2. 性能の向上</h4>検針用AIとしてあらゆるデータをたくさん学習させましたが、今後「実際に工場で稼働することで見えてくる課題」があがることは想定しています。 それらに対応していくために、継続して性能の向上を行なう必要があります。<h3 id="h8a60cd553d">WEBアプリ</h3>WEBアプリの３つの課題と企画<ol><li>1. 外部APIとの連携</li><li>2. 機能拡張への対応</li><li>3. センシングサービス「IKKSS」との連携</li></ol><h4 id="h2bb5fa161e">1. 外部APIとの連携</h4>WEBアプリは、もともと外部APIとの連携を想定して開発したため、お客さまが日常業務で使用しているソフトとの連携も、自由に行えるシステムになります。 実際の現場ニーズに合わせた連携はトライアル数が少ないので、今後どういったアプリと連携することになるか楽しみですし、試してみたい企業さまも募集中です。<h4 id="hccbda30c2f">2. 機能拡張への対応</h4>WEBアプリを活用するユーザーは実際にどんな機能を必要とするか、まだまだ知りたいところではあります。「任意の帳票形式に集計データを出力する」など、どんな基幹系システムでも必要とされるような機能は、あらかじめ想定して開発を進めているため、その他機能についても拡張する前提で開発を続けていきます。<h4 id="h72b68666c6">3. センシングサービス“IKKSS”との連携</h4>今後、グループ会社のセンシングサービスである“IKKSS”と連携して、メーターを含めた工場内のあらゆるセンシングをすべて、”IKKSS”のシステムで管理できるようにする予定です。 これまで「PRIME METER」はIoTデバイス、AIモデル、WEBアプリが一体となったサービスとご紹介してきましたが、実は「メーター検針」以外にも流用可能となります。 サービスのうちAIモデルだけ使わせてもらいたい！という企業さまのお声にもお応えして参りました。このようなご相談もいつでもお待ちしております。<h2 id="he55d6ead1d">これまでの「PRIME METER」</h2>開発も佳境に入りトライアルを開始する「PRIME METER」がどのように開発されたのか興味をお持ちになられた方はぜひ、下記の過去記事をご覧くださいませ。<a href="/columns/8ieb_pgnqe" target="_blank" rel="noopener noreferrer nofollow">「アナログメーター読み取りAI」を開発しました</a> <a href="/columns/zwg7sllgai_6" target="_blank" rel="noopener noreferrer nofollow">メーターを自動検針「PrimeMeter」ハードウェア開発</a>

AIでアナログメーターを自動で検針する「PrimeMeter」が進化しました

<h2 id="h994ce76297">ハードウェアの制作プロジェクト進行中！</h2>これまで様々なシステムを開発してきたプライムキャスト。 AIや機械学習を利用したアプリケーションも手掛けています。 最近はソフトウェアだけでなくハードウェアも自社で制作するプロジェクトも進行中とのこと。今回は、AIを活用したシステムの構築を担当していて、<a href="/columns/8ieb_pgnqe" target="_blank" rel="noopener noreferrer nofollow">前回の記事</a>に24個のガンダムネタを散りばめたプライムキャストのエンジニア、オウサにお話を伺います。<h2 id="ha36cfda9ea">アナログメーター検針システム「PrimeMeter」</h2><figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/400e8f0bea6141c195a0c0748b175635/meter01.png" alt="" width="2133" height="1026"><figcaption>オウサが開発を手掛けるシステムのひとつ、“PrimeMeter(プライムメーター)”。このアプリケーションは“アナログメーターの数値を読み取ってデジタル化する”そうです。</figcaption></figure>※2023年より「PRIME METER EYE」としてサービスご提供を開始しました。 詳細は<a href="https://www.primecast.co.jp/columns/st0la_rvlo" target="_blank" rel="noopener noreferrer nofollow">こちらの記事</a>になります 筆者 : PrimeMeterってどんなシステムなんですか？オウサ : “アナログメーターの自動検針”です。計器って針が動くだけで、数字は人が見て判断しなければいけません。ぼくが作ったのは“数字を読むAIを搭載したシステム”で、人の負担を減らします<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/d7cc11bd644f43bfaaff51ec93d7529a/meter02.png" alt="" width="963" height="542"><figcaption>設置型デバイスに搭載されたカメラを通じてAIが針の角度とメモリの数値を読み取り、自動でメーターの値を出力。 グラフ描画によって記録と異常値の”見える化”を実現しているようです。</figcaption></figure>筆者 : ”人がメーターの針を読む必要がない”ということですかオウサ : その通り。自作したデバイスをアナログメーターに取付けるだけで、あとはシステムが自動で数値をデジタル化してくれます。情報はサーバにアップロードされるので、24時間365日、どこにいても、同時にいくつでも、PCやスマホから数値を確認することができます筆者 : スマホ？ということはWEBを介しているんですか？オウサ : はい。システムはクラウド環境に構築しました。アプリケーションはGMOのALTUS、データベースとストレージはAmazonのAWS上に置くことで常時監視を実現しています。WEBアプリケーションなので、お手持ちのスマホでも利用が可能です<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/f7ed945a27134dc38c1d3d3efc76f2a8/meter03.png" alt="" width="2133" height="957"><figcaption>クラウド上に環境を構築することで場所と時間を問わず稼働する全自動のシステム、PrimeMeter。構成はWEBアプリケーションの形を取り、”検針”にはAIが活用されています。</figcaption></figure>筆者 : どこでAIを使っているんですか？オウサ : 画像の解析です。このシステムでは画像分類と物体検出、セグメンテーションの３つですね筆者 : 学習も社内で行ったんですか？オウサ : そうです。Tensorflowを利用しています。ただ、これまで画像解析で使っていたYOLOは今回、使っていません。最近はパフォーマンスと速度の相対比を重要視して、アルゴリズムは適宜切り替えて使うようになりましたAIを搭載したシステムが、”数値の読み取り”から”ブラウジング（情報の閲覧）”まで実現するPrimeMeter。WEBアプリケーションということもあり、開発の範囲は広いはずです。筆者 : WEBアプリということは、フロントエンド（ブラウザでの表示）からバックエンド（サーバの仕組み）までの開発、しかもAはモデル（コンピュータの学習）の作成が必要ですよね。担当の割り振りはどうしていたんですか？オウサ : このシステムに関して言えば、全部ひとりでやりました(笑)。元々、一年前に社長の提案で始まった自社開発のサービスなんです。プロジェクトとしては研究開発の一環としてスタートしました筆者 : 青木さん（前社長）の構想から始まっていたんですねオウサ : 進め方や目標の設定もぼくに任せてくれたので、マイペースに進めてきましたよ。これまでにたくさんのプロトタイプを作ってきましたね。それが少しずつ洗練されていって、今こうして形になっています筆者 : 一年でシステムは変わりましたか？オウサ : もう、何もかも違いますね。”作って壊して”を繰り返してきたので、別物です。アルゴリズムも色々試しました。そうして、少しずつ解決の手法が見えてくる過程が楽しかったです<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/84f5be3e0e3848caa47a8b5e0ac3a4c8/meter04.png" alt="" width="2133" height="1027"><figcaption>これまでソフトウェアの開発が専門だったプライムキャスト。PrimeMeterは計器に取付けるシステムなのでハードウェアの作成も不可欠。今回は、ハード部分の自作にも挑戦したようです。</figcaption></figure>筆者 : ソフト側の仕組みだけでなく、ハードも開発したんですねオウサ : 設計から携わって、会社の3Dプリンターで出力しました。長期運用と消費電力を意識した給電の仕組みも自作しましたね筆者 : 前職では組込み系のシステム開発を担当していたんですよねオウサ : はい。今、当時の経験がフルで活かせています。WEB側の仕組みも作れるようになったので、ハードウェアを伴ったシステムの開発ができるようになりましたね<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/f7875c0deaf2413ea79a389ac1f56535/meter05.png" alt="" width="1744" height="834"><figcaption>なんと電源まで自作して組み込んでいました。</figcaption></figure>PrimeMeterの開発を通じて仕事の幅を広げたオウサ。プロジェクトの今後について聞いてみました。筆者 : 現行のプロジェクトの様子はいかがですか？オウサ : 実用化に向けて加速しています。これは本当にありがたいことで、<a href="/columns/8ieb_pgnqe" target="_blank" rel="noopener noreferrer nofollow">以前の記事</a>を見ていただいた企業の方からデータ協力を得ることができたんです。現場で実際に使われているメーターの情報が手に入ったことで、AIの性能が飛躍的に上がりました。同時に具体的な要望もいただけたので、それに応える形で機能拡張を行っています筆者 : ニーズがあったということですね！オウサ : 実際にお問い合わせていただけているので、社会で求められている仕組みでした。我ながら便利なシステムだと思います。またフロントエンドもjQueryからVue.jsに切り替えて、より早く軽量な表示が実現できるように改良しています。楽しいですね<h2 id="h6dff831f0d">個人開発の「お絵描き道場」</h2>AIからハードまで、なんでもお任せのオウサ。もちろんプライベートでも開発を行っています。先日リリースした「お絵描き道場」のことを聞いてみました。<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/0fadb6103ccf43789814f443120169a8/meter06.png" alt="" width="2133" height="660"></figure>筆者 : どんなアプリですか？オウサ : WEB上で動く本格ペイントツール(<a href="https://paintmonitor.com/" target="_blank" rel="noopener noreferrer nofollow">https://paintmonitor.com/</a>)です。システム構成に関してはこちらの<a href="https://qiita.com/osakasho/items/4273d5b8f105dda2364e" target="_blank" rel="noopener noreferrer nofollow">qiita記事</a>に詳細がありますが、個人開発ということもあってツールも環境も自由に選定しています。元々Pythonが好きなのでDjango REST FrameWorkでサーバサイドを実装して、フロントではVue CLIを使ってSPA(Single Page Application)を作りましたいつの間にかゴリゴリのWEBエンジニアと化していた元組込み系のオウサ。お絵描き道場は社内でもお昼休みにみんなで遊んでいます。筆者 : 驚くほど多機能ですよね(笑)オウサ : ですねー現在のニーズに沿った”ライブ配信機能”や、作品の筆跡データを解析するAIも仕込んでいて絵の採点もしてくれます。多機能ながらNginxとGunicornを利用した安定動作も実現していますねですね筆者 : キャンパス（絵を書く場所）をWEBで共有して、複数人で同時に一つの絵が描ける機能は感動しましたオウサ : ゲーム配信機能まで付けちゃいましたからね…筆者 : JavaScriptの技能も極まってきてるんじゃないですか？オウサ : 全然、まだまだです。ただ、お絵描き道場の開発を通じてかなり慣れた感はあります。特にCanvasはフル活用したことで知識は付きましたよ！<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/67d887090da94250864860af6901ba4b/meter07.png" alt="" width="2132" height="665"><figcaption>最新のWEBアプリケーション技術がふんだんに投入され過剰なほど多機能なオウサの”お絵描き道場”。その開発のいきさつを聞いてみました。</figcaption></figure>筆者 : もともと休日や空いてる時間は、常に個人開発していますよね。今回はなぜ”お絵描き”を題材にしたんですか？オウサ : いつでもどこでも本格的な絵が描けるアプリが欲しい”と思ったのが開発の動機ですね。私自身、趣味で油絵をやっているので、いつかペイントツールは作りたいと思っていました。”ペイントツールとしての完成度”にこだわり過ぎたせいで、３回ほどゼロから作り直しています筆者 : 完成度以外に、特に意識したことはありますか？オウサ : 作るなら新しい技術をたくさん使おうと思ってライブラリは選定しています。新しいことに挑戦する新鮮さもあって飽きずに楽しく開発できました。個人開発は、特にニーズを意識する必要がないので自分の理想をそのまま形にできるので楽しいですもともとデザイナーとしてプライムキャストの門を叩いたオウサ。２年の間にいろいろなことができるようになりました。筆者 : オウサは通常業務での開発はもちろん、研究開発から個人開発まで、２年で様々なシステムを組みましたよねオウサ : 本当にいろいろ作りました。形態素解析もやりましたしSharePointOnlineを利用したWEBアプリや車のナンバープレートを読み取るOCRなんかも作りました筆者 : 弊社、基本的になんでもチャレンジなところありますよねオウサ : ありますね(笑)筆者 : 今後はどんなことにチャレンジしていきたいですか？オウサ : AIとWEB、ハードウェアを掛け合わせた開発を行いつつ、XRに強い経営戦略室と連携して3DCGを活用したコンテンツの作成にも携わってみたいです入社から２年で幅広いニーズに応えてきた万能タイプのエンジニア、オウサ。 PrimeMeterやお絵描き道場の開発を通じてさらに成長を感じました。プライムキャストでは多種多様なご要望にお応えすべく、オウサをはじめとした個性豊かな開発者が集っています。 弊社の仲間たちと一緒に働くことに興味がある方、 PrimeMeterのよりくわしい情報が知りたい方は是非、お問い合わせください。チャオ！！

メーターを自動検針「PrimeMeter」ハードウェア開発

<h2 id="h8d027c8ed3">はじめに</h2>こんにちは。 「翔べ、SQLインジェクション」でお馴染のAI 戦士、オウサです。 本日も、水の星からAIをこめてお送りいたします。 今回は 「どんなアナログメーターでも解析するAI」 という、ガンダムの記憶回路に取り付けたくなるような一品を研究開発します。<h2 id="h43af440779">&quot;アナログのメーターを解析するAI&quot;とは</h2>つまり、「アナログメーターの値をデジタル化する人工知能」 です。 これをシステムに組み込むことで、今まで人がやっていた&quot;メーターを読む&quot;という作業を、人工知能が自動でやってくれるようになります。 すごいですよね。親父が熱中するわけだ。工場や研究施設にあるようなアナログメーターは、様々な情報を数字にして「人が読める」ようにしてくれます。 この時、人はメーターの”針”が指す場所を見て「これは78」とか「これは2」とか&quot;判断&quot;します。 そしてそれが「正常」とか「異常」と&quot;判断&quot;したり、値をノートに&quot;記録&quot;したりします。数値を判断しているのはメーターではなく人なんですね。 さらに、記録をとるのも人です。 「メーターがある場所」によっては、人は苦労してそれを読みにいかなければいけません。大変です。宇宙世紀に生きるオウサは、このくびきから人類を開放したい。24時間365日、放っておいてもメーターの数値を読み取って記録を取るAI。私、ショウ・アズナブルが開発しようというのだ！<h2 id="hac50a22037">「メーター解析の手順」を設計</h2>開発を５段階に分けます。<ol><li>Step01 画像収集＆アノテーション（下準備）</li><li>Step02 &quot;画像内のメーターの有無&quot;と、その&quot;位置座標&quot;を割り出すAIの作成</li><li>Step03 &quot;メーターの中の軸の有無&quot;と、その&quot;位置座標&quot;を割り出すAIの作成</li><li>Step04 &quot;メーターの針がどの角度を指しているか&quot;判断する解析処理を作成</li><li>Step05 &quot;リアルタイムでメーターの角度を表示するアプリ&quot;を作成</li></ol>Step01からStep03では、”物体検知” というAI技術を利用します。Step04では、画像処理ライブラリの「 OpenCV 」を使って&quot;針の角度&quot;を算出する画像解析処理を作成します。Step05では、Pythonの簡易サーバー「 Flask 」を利用してシステムをサーバー化します。<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/5c639e0fc1474834b4beb112f5b79de3/20200603_pic01.png" alt="" width="768" height="251"><figcaption>▲開発フロー</figcaption></figure>段取りは出来ました。 オウサ、行きまーーす。<h2 id="ha53dfaec3c">「物体検知モデル(AI)」の作成</h2>AIに「これがアナログメーターだよ」と教えてあげるために「アナログメーターの画像」をたくさん用意します。 今回はMicrosoftの「 BingImageSearchAPI 」を利用して大量の「アナログメーターの画像」を集めました。しかし、集めた画像の全てが使い物になるわけではありません。 使えそうな画像だけを選び、「 VoTT 」を使ってアノテーションします。&quot;アノテーション&quot;とは、データに注釈を付けることで&quot;関連付け&quot;を行う作業です。 大切な工程ですが、正直かなりしんどいです。1枚ずつ手作業で行うので本当に大変。<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/2dc4af0e917b485a94b3e07ab964f6d0/20200603_pic02.png" alt="" width="768" height="214"><figcaption>▲画像収集とVoTTアノテーション</figcaption></figure>アノテーションする画像の枚数を増やすほど、AIの精度は上がります。 とは言え、キリがありません。まるで終わりのないディフェンスのようです。 なので、200枚程度でやめておきます。腱鞘炎になりそうです。 軟弱者ではありません。偉い人にはそれがわからんのです。オウサが6時間かけてアノテーションした200枚の画像をAIに学習させます。 モデルの構築には今回も「 YOLO 」を利用しました。&quot;モデル&quot;とは、AIが「これはギレンザビではなく、アナログメーターだ」と判断するための&quot;根拠&quot;のようなものです。 モデルは数式で表現されます。&quot;YOLO&quot;は、入力された画像から物体の位置と種類を検出するモデルです。 ハロと名前が似ているので愛用しています。では見せてもらおうか、オウサが作ったモデルの精度とやらを。<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/ed99975ed05b40dd94b6d836ded9b160/p3.gif" alt="" width="563" height="339"><figcaption>▲物体検知モデルをチェック</figcaption></figure>リアルタイムで&quot;メーター&quot;と、その&quot;軸&quot;を検知していますね。 ぼくが一番うまく、YOLOv3を使えるんだ。<h2 id="hb173ceee8d">「メーター解析処理」の実装</h2>AIがメーターを認識できるようになりました。 次は、AIが「メーターの&quot;針&quot;はどの角度を指しているか」わかるようにします。取得した軸座標の周りの色の特徴からピーク値を計測し、その値が一定の角度に存在するものを取得して、針の角度を算出します。チョー簡単ですネ。え、わかりにくい？ ですよね。すいません。<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/3c87c2e143d34c48b4a6dcabf1d26c4d/20200603_pic04.png" alt="" width="768" height="200"><figcaption>▲針の角度検出原理</figcaption></figure>このようなイメージです。まず、軸の周りの小さい範囲を画像として切り抜きます。 画像の中は&quot;背景&quot;と&quot;針&quot;と&quot;軸&quot;だけになるわけです。 そこから&quot;背景&quot;と&quot;針&quot;の色を検出して、それらのコントラストを数値化します。 この数値こそ、デジタルで表現された針なのです。 瞬時に何回も検出を行い、&quot;メーターの軸&quot;と連続した&quot;色の数値(針)&quot;から角度を算出します。この手法はかなり試行錯誤しました。今回の頑張りどころです。 市販の安価なネットワークカメラで十分な性能を発揮します。 カメラの性能の違いが、サービスの決定的な差ではない、ということですね。<h2 id="hd78f0a761a">システムのサーバー化</h2>最後の仕上げに、システムをアプリケーションにします。今回はAWSのEC2にシステムを構築します。 クラウド環境が、このサービスを皆様に届けてくれるわけですね。AWSは、いいものだ。システムは「 Flask 」を利用してサーバー化しました。 FlaskはPythonで書く軽量なWebアプリケーションフレームワークです。 ラスクと名前が似ているので愛用しています。利用している端末からカメラを起動し、メーターに向けるとリアルタイムでこいつ、動くぞ。<figure><img src="https://images.microcms-assets.io/assets/4abeee916f12438a9c3d2346bd238b0b/3d35af76ed1e498f99e4acb1cd747d93/20200603_pic05.png" alt="" width="768" height="291"><figcaption>▲アプリ画面</figcaption></figure>「ああ…針が見える…」<h2 id="hc7c993c65a">これから</h2>ひとまず「アナログメーターの値をデジタル化する人工知能」は完成しました。ただ、改善の余地はあります。 YOLOに関しては最近&quot;v4&quot;という新型が登場しましたし、是非試してみたい。 今後も様々な手法を用いて、精度の向上、及び汎用化を進めていきたいですね。 まだ、ぼくには直せる所があるんだ。こんなにうれしいことはないです。※2023年より「PRIME METER EYE」としてサービスご提供を開始しました。 詳細は<a href="https://www.primecast.co.jp/columns/st0la_rvlo" target="_blank" rel="noopener noreferrer nofollow">こちらの記事</a>になりますさて、いかがでしたでしょうか？ 詰め込みすぎ？ぼくもまだまだ坊やです！ ロボット最高！AIを活用したワクワク開発、導入を検討されている方は是非、お気軽に<a href="/contact" target="_blank" rel="noopener noreferrer nofollow">お問い合わせ</a>まで！次回、「サイコガンとサイコガンダムは似ているけど全く関係がない。」 君は、生き延びることができるか。

コラム

コラム一覧