カテゴリー: テクノロジー

プリンタのインク残量が低下したらSlackに通知する方法

IoT(Internet of Things, モノのインターネット)という言葉が存在感を増し続けている今日この頃ですが、ネットワーク対応のプリンタはIoT機器の元祖とも呼べる存在です。
そのネットワーク機能を使ってちょっとした業務改善をしてみました。

課題

プリンタを使おうとしたときに、インク切れですぐに印刷を始められないという状況を無くしたい。

印刷しようとしたときにインクが切れてるとイラッとしますよね。

対策

プリンタのネットワーク機能を使ってインクの残量を監視して、一定量よりも少なくなったらSlackで通知します。
監視用のサーバとして、当社の勤怠システムでも使っているRaspberry Piを利用します。

調査

オフィスで使っているプリンタはCanonのMG7530です。
問題はどうやってインクの残量を取得するかというところです。
初めはMG7530のLinux用ドライバをRaspberry Piにインストールしてそこからなんとか取得できないかと考えたのですが、どうやらこのドライバではインクの残量はサポートしていないようです。

そこで、MG7530のウェブインタフェースから取得することを考えました。
プリンタのIPアドレスにHTTPアクセスすると以下のような管理用ウェブUIが利用できます。

しかしながら、該当ウェブページのソースを見てもインク残量のデータそのものは含まれておらず、単純なスクレイピングはできそうもありません。

                <div class="InkPattern" id="inktank0">
                    <div class="InkMess"></div>
                    <div class="InkArea"><div class="InkBar"></div></div>
                </div>
                <div class="InkPattern" id="inktank1">
                    <div class="InkMess"></div>
                    <div class="InkArea"><div class="InkBar"></div></div>
                </div>
                <div class="InkPattern" id="inktank2">
                    <div class="InkMess"></div>
                    <div class="InkArea"><div class="InkBar"></div></div>
                </div>
                <div class="InkPattern" id="inktank3">
                    <div class="InkMess"></div>
                    <div class="InkArea"><div class="InkBar"></div></div>
                </div>
                <div class="InkPattern" id="inktank4">
                    <div class="InkMess"></div>
                    <div class="InkArea"><div class="InkBar"></div></div>
                </div>
                <div class="InkPattern" id="inktank5">
                    <div class="InkMess"></div>
                    <div class="InkArea"><div class="InkBar"></div></div>
                </div>
                <div class="InkPattern" id="inktank6">
                    <div class="InkMess"></div>
                    <div class="InkArea"><div class="InkBar"></div></div>
                </div>

これはどうやらJavaScriptで値を取得して埋めてるパターンだろうということでブラウザの開発ツールを開いてしばらく見張っていると、prninfo_data.cgiというCGIに定期的なアクセスが発生していることが分かりました。

prninfo_data.cgiリクエストへの応答はこんな感じ。

<?xml version="1.0" ?>
<response>
<PAGE_PRNINFO>
<INKREST0>0,0,0</INKREST0>
<INKREST1>5,6,0</INKREST1>
<INKREST2>4,2,0</INKREST2>
<INKREST3>1,2,0</INKREST3>
<INKREST4>2,7,0</INKREST4>
<INKREST5>3,3,0</INKREST5>
</PAGE_PRNINFO>
(略)

1桁目は全て異なる数値になっているのでインクの種類だろうということは想像できます。
2桁目はインク残量っぽいけど数値の意味がはっきりしません。3桁目はなんだろう?

データの意味を調べるためにprninfo_data.cgiを呼び出しているJavaScriptのファイルを調べたところ、こんな関数を発見しました。

function dispInkInfo(inktank_info, idStr) {

    var inkLVL = ['Lv100', 'Lv090', 'Lv080', 'Lv070', 'Lv060', 'Lv050', 'Lv040', 'Lv030', 'Lv020', 'Lv010', 'Lv000', 'Lv00X'];
    var inkMRK = ['InkMess', 'InkMess LwInk', 'InkMess NoInk', 'InkMess UnInk'];

    var inkCOL = ['InkBlk', 'InkPbk', 'InkCia', 'InkMaz', 'InkYel', 'InkGry', 'InkClr', 'InkBlk', 'InkCMYK'];

この関数の後ろの方を読むと、たとえば、<INKREST1>5,6,0</INKREST1>というデータはinkCOL[5](‘inkGry’), inkLVL[6](‘Lv030’), inkMRK[0](‘InkMess’)という風に使われるようです。
インク残量の画像と比べてみると、グレイが30%くらいになっているのでこれで合ってそうですね。

ということは、CGIの応答の3桁目が1(‘InkMess LwInk’)になっていたら通知すれば良さそうです。

実装

というわけで監視用のスクリプトを実装しました。

#!/bin/bash -eu

PRINTER_IP=X.X.X.X

function post_message() {
    check_dir=/home/pi/printer_ink_monitor
    check_file=POSTED

    exists=`find $check_dir -name $check_file -mtime -1|wc -l`
    if [ $exists -ne 0 ]; then
	return
    fi
    touch $check_dir/$check_file
    curl -X POST --data-urlencode 'payload={"channel": "#channel1", "username": "MG7530", "text": "プリンタのインク残量が僅かになりました", "icon_emoji": ":printer:"}' https://hooks.slack.com/services/XXX/YYY/ZZZ
}


xml=`curl -m 2 -s "http://${PRINTER_IP}/rui/prninfo_data.cgi" -H 'Content-Type: application/x-www-form-urlencoded' -H 'Authorization: Basic HOGEHOGE' --data 'GETINFO=0'`

result=`echo $xml | /home/pi/printer_ink_monitor/parsrx.sh |grep INKREST |cut -d, -f3`
for status in $result; do
    # 0: normal, 1: Low Ink, 2: No Ink, 3: Un Ink(?)
    if [ $status -eq 1 ]; then
	post_message
    fi
done

parsrx.shでXMLのデータを行指向のデータに変換しているので、以下のようにしてインク残量のデータだけを取り出せます。
この数値がどれか1個でも1になっていたら通知するようにしています。

$ curl -m 2 -s "http://X.X.X.X/rui/prninfo_data.cgi" -H 'Content-Type: application/x-www-form-urlencoded' -H 'Authorization: Basic HOGEHOGE' --data 'GETINFO=0' | bash printer_ink_monitor/parse_xml.sh | grep INKREST | cut -d',' -f3
0
0
0
0
0
0

また、通知が連続するとうっとうしいことになるので、1日1回だけ送るようにしています。

テスト

インク切れの状態はなかなか作り出せないので、上のスクリプトをいじってインク残量が0だったら通知するようにしてテスト実行してみました。

通知来た!

まとめ

完成したので毎分チェックするようにcronを設定しました。(毎分なのは、プリンタは使う時だけ電源を入れるルールなので、電源が入っているタイミングを逃さないためです)

先日インク切れが発生し通知がきたので、無事印刷をする前にインク交換をすることができました。

Officeで消耗しないたった1つの方法

最近、引越しをしてお家をアップデートした、デザイナー兼ディレクターを甘噛みしているヒロシです。

 

アップデートといえば、MicrosoftのOfficeが2016版にアップデートされて久しいですが、導入の方はもうお済みでしょうか?

WordやExcel、PowerPointなど、今や資料作成や業務管理ツールの定番であり、ビジネスを行う上で欠かせないツールですよね。

便利だけど何年かに行われるアップデートが悩みのタネ

 

 

個人で使う分ならリプレイスもすぐに済みますが、何十人、何百人の組織になると時間もお金も大変なコストになってしまい悩まれているマネジメントの方も多いのではないでしょうか?
しかも、ボタンの配置が変わっていたり、ファイルの互換性の問題があったりと実際にソフトを使うスタッフも何かと大変だったりします。

 

そこでG Suiteがオススメです

SploutではOfficeではなくG Suiteを導入しております。
G SuiteはGoogleが提供する様々なツールを
1つのパッケージで全て利用できるサービスです。

G Suiteには、Officeと同等の機能を持つ以下のツールが利用できます。

 

・Google スプレッドシート(Excel)
・Google ドキュメント(Word)
・Google スライド(PowerPoint)etc…

 

上記のツールは年々バージョンアップされ使い勝手も向上しています。
(もちろんアップデートは自動的にしてくれるのがポイント)
スプレッドシートの関数の種類が気になる方も今ではかなり増えていますし、グラフ化対応も充実しています。データの分析など、よほど高度な使い方をしていなければ問題なくご利用できます。

 

スプレッドシートの豊富な機能についてはこちらも参考にしてみてください。
https://linq.career-tasu.jp/magazine/knowhow-google-spreadsheet-20technique/

 

さらに「Google Drive」が超便利!

 

 

プライベートでGmailを利用されていればご存知の方も多いと思いますが、このGoogle Driveはクラウドストレージです。これが大変便利で、作成したスプレッドシートやドキュメント等をクラウドに保存し、簡単に共有できてしまいます。

・共有する範囲が設定できる

例えば、「社内規定などのドキュメントは社内全員」、「プロジェクト進捗管理用スプレッドシートなどはチーム単位」で共有できます。

・フォルダを作成して用途毎に管理

Drive内にフォルダを作成できますので、デスクトップ感覚で用途毎にファイルを整理することができます。フォルダ単位での共有も可能です。

・Excelファイルの編集も自由自在

クライアントから送付されたExcelファイルをGoogle Driveにアップロードすれば、Excelファイルをスプレッドシート形式で開くこともできますし、
スプレッドシートをExcel形式やPDF形式で保存、ダウンロードができます。

・複数人での同時編集も可能!

チームで進めているプロジェクトなど、進捗管理用シートを用意して、メンバーそれぞれが進捗状況を同時に編集できてしまうんです!

さらに、シート上での作業は全て自動保存しているので、いつでも履歴から戻したい状態までさかのぼれるため、バージョン管理も簡単に行えます!

 

G Suiteを利用している会社同士なら、
受け渡しサーバー不要!

 

弊社では、G Suiteを導入されているパートーナー企業様とDrive内に共有フォルダを用意し、ファイルのやり取りを行っています。
一々、メールにファイル添付する必要もありませんし、受け渡しサーバーを用意する必要もなくなり、効率的にコミュニケーションを行うことができます。

 

お使いのドメインのまま、Gmailに移行できる!

 

独自ドメインで社内メールをGmailにすることができるのもポイントです!

Gmailならプライベートでご利用されている方も多いと思いますので、
学習コストも抑えることができるのではないでしょうか?

GmailとGoogleカレンダーを連携すれば、社内のスケジュールをGoogleカレンダーに集約することができ、モバイルからもアプリで閲覧が可能です。

もちろん2段階認証機能が付いているのでセキュリティも万全です!

 

Hangoutsでチャットでのやり取りも

 

チャットでのコミュニケーションツールといえば、ChatWorkやSlackなどを導入されている企業様も多いかと思いますが、G SuiteでもチャットツールHangoutsが無料で利用できます。

1対1のチャットだけでなく、メンバーを選択してグループチャットを簡単に行うこともできます。チャットログが残るので、以前どんなやりとりをしていたかをさかのぼって確認できるのが便利です。

またHangoutsには高度なビデオチャット機能が付いているので、Skypeなどを利用せずともビデオ会議ができてしまいます。

 

まとめ

 

いかがでしょうか?
G Suiteは、Officeに代わる機能をもつだけでなく、Gmailやカレンダー、クラウドサーバーやチャットツールなど、それら全ての機能を1つのパッケージでできてしまいます。

もちろん、他に挙げた様々なツールもそれぞれの機能に特化した優秀なツールに違いありません。ですが、G Suiteなら様々なコストを限りなく抑え、Officeで消耗しないビジネスライフを送ることができるのではないでしょうか?

 

SploutはG Suiteのパートナーです。

導入はもちろん、導入のご相談からサポートまで一貫したお手伝いをさせていただいております。この機会にG Suiteの導入をご検討してみてはいかがでしょうか?
お気軽にご相談ください。
 

 

 

 

ロロロロの仕組み

今日は、弊社のサービス「ロロロロ」の仕組みを説明したいと思います。
 
*ロロロロとは*
絵が描けなくても大丈夫!
スマーフォンやパソコンで簡単に4コ漫画が作れるWebサービスです。
4コマ漫画でゆる〜いコミュニケーションをお楽しみいただけます。
 
画像や文字を組み合わせてグリグリ4コマを作る中身は、javascriptとCanvasでできています。

仕組み自体は単純で素材(画像、文字)を順番にjavascriptでCanvasに描写する・・・以上です。

 

・・・もう少しだけ細かく説明すると
スクリーンショット 2017-05-10 18.15.49
1つ1つの素材にそれぞれ上記のように、座標やサイズに回転率など描写に必要な情報を持たせて配列等に保存し

スクリーンショット 2017-05-10 18.15.56
それぞれを順番通りに描写することで4コマの1コマを表示しています。

あとは素材ごとに移動や回転、拡大縮小、色変更などjavascriptで色々な編集機能を持たせ操作できるようにして

スクリーンショット 2017-05-10 18.16.14
最後に出来上がったCanvasに書かれた情報を元にCanvasにあるtoDataURL()の関数で取得したbase64の画像データをサーバー上で画像に出力して4コマを作成することでロロロロのサービスはできています。
 
基本的にCanvasには描写するという機能しかないですが、描写以外の部分をjavascriptで実装すればこんな感じの4コマ作成ツールからグラフやアニメーションにゲームまで色々作れるのでおすすめです!

WordPress開発快適化計画 ~ VCCW on WP-CLIを使ってみた ~

日に日に暑さが増しておりますが、いつまで経っても見習いプログラマーのノリフミです。

 

Wordpressを使った開発や改修が増えてきている昨今

一人で開発の場合はあまり問題ないのですが、複数人で開発するとなるとどうしても、データの共有面で壁に当たってしまいます。

そこでどうにかならないものかと調べてみると、Wordmoveなるものが良さそうだったのでVCCW on WP-CLIで使ってみました。

 

※ 当記事では、サーバーでWordpressを公開しており、そのサーバーへssh接続できるものとして話を進めます。

 

目次

  1. Wordmoveとは
  2. VCCWとは
  3. WP-CLIとは
  4. 今回の妄想
  5. WP-CLI導入
  6. VCCW on WP-CLI導入
  7. WordPress on Vagrant構築
  8. Wordmoveを使ってみる

お急ぎの方は飛ばし読みを:D

Wordmoveとは

Wordmoveは、ローカルのWordpressインストールとDBデータをローカルの開発マシンからリモートのステージングサーバーに自動的にミラーリングできるようにするgemです。

SSH接続は完全にサポートされていますが、新しい機能が導入されるとFTPサポートは中止される予定です。

プッシュ/プル機能を備えたWordpress用のCapistranoのようなものと考えてください。

Source of github.com/welaika/wordmove

※ 翻訳を使用しております、不自由な日本語にご注意ください

要約すると、

「Wordpressをローカル・サーバー間で簡単に同期出来るんだよ」

ということみたいです。

VCCWとは

これは、WordPressプラグイン、テーマ、またはWebサイトの開発用に設計されたVagrantの設定です。 VCCWには、WordPressのバージョン(またはベータ版)、言語、ホスト名、サブディレクトリ、管理者の資格情報、デフォルトのプラグイン、デフォルトのテーマ、マルチサイト、SSLなどのオプションを設定するためのカスタマイズ可能な変数が含まれています。これらの変数は、特定のニーズに合わせて開発環境を調整する際の柔軟性を提供します。

Source of vccw.cc

※ 翻訳を使用しております、不自由な日本語にご注意ください

要約すると、

「Vagrantを使ってWordpress開発を快適にし、かつ色々と設定出来るんだよ」

ということみたいです。

WP-CLIとは

こちらは、読んで字のごとくなんですが

WP-CLIは、WordPressのインストールを管理するための一連のコマンドラインツールです。 Webブラウザを使用しなくても、プラグインを更新したり、マルチサイトのインストールを構成したりできます。

Source of wp-cli.org

※ 翻訳を使用しております、不自由な日本語にご注意ください

要約すると、

「CLIのみでWordpressを構成、更新が出来るんだよ」

ということみたいです。

 

今回の妄想

一通り説明し終えたところで、今回の妄想のお話

現状はこのような構成で開発しています。

Wordpress開発がgit管理のみなのでデータ同期とれない様子

複数人のWordpress開発でgit管理のみなので、データ同期がとれない。

 

そこでWordmoveを導入してみると

Wordpress開発にWordmoveを導入して快適になった様子

複数人のWordpress開発でWordmoveを導入して、データ同期が簡単にとれるようになる。

 

つまりデータ同期を気にしなくても良くなる!なにこれ素敵!という妄想

 

WP-CLI導入

とりあえず、公式の説明に沿って初期設定をしていきます。

 

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

php wp-cli.phar --info

PHP binary: /usr/local/Cellar/php70/7.0.18_10/bin/php
PHP version: 7.0.18
php.ini used: /usr/local/etc/php/7.0/php.ini
WP-CLI root dir: phar://wp-cli.phar
WP-CLI packages dir: /Users/norifumi/.wp-cli/packages/
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 1.1.0

chmod +x wp-cli.phar

sudo mv wp-cli.phar /usr/local/bin/wp

wp --version

WP-CLI 1.1.0

あっさりインストール成功!

 

VCCW on WP-CLI導入

こちらも、公式の説明に沿って初期設定をしていきます。

 

wp package install vccw/scaffold-vccw:@stable

Installing package vccw/scaffold-vccw (@stable)
Updating /Users/norifumi/.wp-cli/packages/composer.json to require the package…
Using Composer to install the package…

Loading composer repositories with package information
Updating dependencies
PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 20480 bytes) in phar:///usr/local/bin/wp/vendor/composer/composer/src/Composer/Json/JsonFile.php on line 266

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 20480 bytes) in phar:///usr/local/bin/wp/vendor/composer/composer/src/Composer/Json/JsonFile.php on line 266

メモリが足りないって怒られてしまった…

 

phpのメモリ確認

php -i | grep memory_limit

memory_limit => 128M => 128M

あー少ない…増やそう…

 

編集面倒なので、ワンライナー置換にしておきました。

gsed -i 's/memory_limit = 128M/memory_limit = 512M/g'  "$(php -i | grep 'Loaded Configuration File' | cut -f 5 -d ' ')"

php -i | grep memory_limit

memory_limit => 512M => 512M

成功!

 

再度チャレンジ

wp package install vccw/scaffold-vccw:@stable



Success: Package installed.

成功!

 

WordPress on Vagrant構築

VCCW on WP-CLIを使ってVagrantで動くWordpress構築する。

この時、直下ディレクトリに作成されるので、適当な作業ディレクトリに移動しておくことをオススメします。

※ exampleとなっているコードは適宜置き換えてください

cd example-dir

wp scaffold vccw example-project --host=example.com --ip=192.169.33.123 --lang=ja

Success: Generated. Run `vagrant up`.

cd example-project

vagrant up

==> example.com: [vagrant-hostsupdater] Writing the following entries to (/etc/hosts)
==> example.com: [vagrant-hostsupdater] 192.168.33.123 example.com # VAGRANT: 153b0b8eb7a8772721e73e0acb9f2c0f (example.com) / 08253bf2-edb0-4036-9c6f-9ef33822a578
==> example.com: [vagrant-hostsupdater] This operation requires administrative access. You may skip it by manually adding equivalent entries to the hosts file.
Password:

/etc/hostsに書き込みのためパスワードを求められるので入力

 

ここからは

TASK [hogehoge]

をしばし眺めます。

TASK [hogehoge]

TASK [hogehoge]

TASK [hogehoge]

最終的に

PLAY RECAP *********************************************************************
example.com : ok=62 changed=55 unreachable=0 failed=0

と表示されれば完了!

 

hosts確認してみれば、きっちり追記されています。

cat /etc/hosts | grep example.com

192.168.33.123 example.com # VAGRANT: 153b0b8eb7a8772721e73e0acb9f2c0f (example.com) / 08253bf2-edb0-4036-9c6f-9ef33822a578

 

Wordmoveを使ってみる

さきほど立ち上げたVagrant内で作業していきます。

 

vagrant ssh

Welcome to Ubuntu 16.04.1 LTS (GNU/Linux 4.4.0-38-generic x86_64)

vi /vagrant/Movefile

local部分の

  • vhost
  • wordpress_path
  • database
    • name
    • user
    • password
    • host
    • charset

production部分の

  • vhost
  • wordpress_path
  • database
  • ssh
    • host
    • user
    • port
    • rsync_options

項目を適宜設定してください。

 

サーバーのデータをローカルに反映してみる。

wordmove pull --all

▬▬ ✓ Using Movefile: ./Movefile ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling wordpress core ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Uploads ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Themes ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Plugins ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Mu Plugins ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Languages ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

▬▬ ✓ Pulling Database ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

成功!

 

確認してみる

mysql -u root -p

mysql> use wordpress

mysql> show tables;

Tables_in_wordpress
——-
server_wp_commentmeta
server_wp_comments

wp_commentmeta
wp_comments

しっかりDBのデータも取得できていました!

 

懸念点

  • 複数人でデータ同期することによって、データが消えてしまう可能性がありそう
  • Wordmoveばかり使いすぎてgitの更新を疎かにしそう
  • そしてgitで修正できないほどの衝突が起こってしまいそう

まとめ

WordPressで複数人開発するなら、Wordmove使った方がデータ同期できて、開発が捗る!

 

でも、簡単にpush -allなどをしてしまうとデータが消えてしまう可能性があるので、こまめにpullしておいたほうが良さそうですね。

 

以上、ありがとうございました。

Androidのカメラで撮影したレシートの画像から文字を抜き出してみる

Androidで撮った画像データから文字列を抜き出して、web上に表示するところまでをJavascriptで実装してみました。
画像分析にはGoogle Cloud Vision APIを利用しています。

経緯

  • とある理由によりレシートに印字された文字をスマートフォンで入力したい。
  • 手入力大変。
  • 画像の文字を認識できるアプリを使ってコピペを企んだがどれも多機能だった。
    変にズームとかしなくていいから!
    共有メニューとか出さなくていいから!
    自動保存もいらないから!
  • あれ、Javascriptで実現できるんじゃ・・・?

さっそく実装

動作環境はWindowsとAndroidのChrome。
Android標準ブラウザは動作しません。
Google CloudでVision APIのキーを別途取得している必要があります。
{API_KEY} のところにVision APIのキーが入ります。
Vision APIは制限を超えると有料になるので注意が必要です。

結果

上のコードを適当なサーバーに設置しAndroidから画像を選択してみました。

(実際はレシートの画像横向きでしたが、見難かったので90度回転させています)

api_result

問題なく文字列を認識しています。

「きりとり」の辺りが怪しいですが、必要のない箇所なので問題ありません。

これで画像からテキストをコピペし放題です。

余計な機能は何もありません。

 

Javascriptで実装する必要性は皆無ですが、強いて利点を挙げればマルチプラットフォームぅ・・・ですかね・・・。

少しの手間で快適さがプラスされたので満足です。