2015年12月24日木曜日

QRコードを作成 - qrcode.js -

こんにちは。上河佑里恵です。
寒いですので、体を冷やさないようにショウガを食べるようにしています。
体が温まりますので、おすすめです。


本日は、フロントエンド技術(HTML、CSS、Javascript)を使用し、
QRコードを作成する方法についてご紹介させていただきます。


QRコードはシンプルな機能ですが、
情報を公開するのにとても役立っています。
店舗情報や整理券など、すぐに簡単に情報をえ入手たい場面は多くあります。
簡単に作成することができるようになったのも、普及した要因の一つだと思います。


今回ご紹介するのは、qrcode.jsです。
qrcode.jsは、簡単にQRコードを生成することができる、
JavaScriptプラグインです。

qrcode.js

http://davidshimjs.github.io/qrcodejs/

WebStorm

https://www.jetbrains.com/webstorm/

※上記リンクは別のウィンドウで開きます。


WebStormは、エディタ、バージョン管理、デバッグを行う、IDEです。
JavaScriptやHTML5の開発に適しています。

WebStormでプロジェクトをスタートします。

WebStorm Project


ダウンロードしたqrcode.jsをWebStormのプロジェクトに取り込みます。

HTMLページに<script>タグでqrcode.jsを宣言します。

qrcode.js
qrcode.js含む、3つのファイルを用意しました。
WepStorm

試してみます。
【実行環境】
OS: Windows10
ブラウザ: Chrome

空欄に所定の情報を入力して、「QRコード作成」ボタンを押下します。

QRコード作成画面

(1) 普通に(正しく)入力
正しく入力
(2) 空欄あり
空欄あり

(3) 特異な値として、環境依存文字あり
  はしごだか(髙)と、たつさき(﨑)を記載しました。

特異な値あり
今回はデフォルト形式でQRコードを表示しています。
サイズ: 256px * 256px
容量 : 9.05KB
HTMLやCSSなどの、ほかのフロントエンド技術と組み合わせることにより、
QRコードの色や大きさを自由に変えることもできます。

次に、作成したQRコードを読んでみます。
「QRコードリーダー for iPhone」でQRコードを読んだ画面を掲載します。
【実行ツール】
QRコードリーダー: Takashi Wada「QRコードリーダー for iPhone」
            https://appsto.re/jp/wzV5I.i
               ※上記リンクは別のウィンドウで開きます。

(1) 正しく入力
正しく入力

(2) 空欄あり
空欄あり


(3) 特異な値(環境依存文字)あり
特異な値(環境依存文字)あり

全パターンとも、入力したとおりに文字を表示しています。

ちなみに、「QRコードリーダー for iPhone」の画面の機能については
いたってシンプルで、難なく操作することができました。

左下のボタンで、
QRコードを読み取る画面に戻ります。
さらに、読み取り画面から
「スキャン履歴」を閲覧・削除できます。

右下のボタンで、
「メールで送る」
SMSで送る」
「読み取り内容をコピーする」
の3つから、読み取った内容を共有する方法を選択します。

デバイスからメールで送信した読み取り内容は、
一般的なテキスト形式でPCに送られてきました。

(1) 普通に(正しく)入力
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
NAME :QRコード
NEARS:大森
PHONE:1234567890
EMAIL:qrqrqr@qrqrqr.code
URL  :qrcode/jquery.sugudekiru
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

(2) 空欄あり
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
NAME :
NEARS:大森
PHONE:123123123
EMAIL:
URL  :qrcode/jquery.queryq
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

(3) 特異な値(環境依存文字)あり
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
NAME :髙﨑
NEARS:高崎
PHONE:222333444
EMAIL:gumma/gumma.gumma
URL  :gummma/gummma.gunma
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-


QRコードは新しい技術ではありませんが、
IoT、特にウェアラブルデバイスのような、身に着けて手軽に情報を取り扱いたいものに
活用できるのではないでしょうか。


参考文献:

jquery.qrcode.js
http://jeromeetienne.github.io/jquery-qrcode/

日経ソフトウェア 2015年9月号
http://www.amazon.co.jp/%E6%97%A5%E7%B5%8C%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A8%E3%82%A2-2015%E5%B9%B4-09-%E6%9C%88%E5%8F%B7/dp/B00ZD9E4DC

※上記リンクは別のウィンドウで開きます。

2015年12月10日木曜日

一人ぼっちのSlackの始め方〜Hubotだけが友達〜

こんにちは、株式会社Pro-SPIRE、ESBUの浅野です。
世間は年末真っ盛り。今年ももうすぐ終わりなんて驚きですね。
 
さて、エンジニア界隈ではこの時期Advent Calendarが大盛り上がり。面白い記事がたくさんあって、電車通勤がちょっぴり楽しくなりますね。
その中でも、ChatOps Advent Calendar 2015自分だけのためのSlack Teamを読んで、興奮してしまい、Slackを始めてしまいました。


Slackとは?


出典 : Slack

Slackはエンジニア界隈で流行っているコミュニケーションツールです。知ってる方、使っている方も多いのではないのしょうか。
僕も常々使ってみたいと思っていたのですが、幾分機会がなく、そのままになっていましたが、今回たった一人で登録してしまいました。というわけで・・・




一人ぼっちのSlackの始め方 〜Hubotだけが友達〜


とりあえず、恥ずかしがらずに公式サイトで登録しましょう。
チーム名などを聞かれますが、一人なので、自由に決められます。なんでもいいのです。誰にも相談しなくていい。とても気楽です。寂しくなんてありません。



出典 : Slack


自分の名前やメールアドレスなどを設定すると、チームに参加する他の人のメールアドレスを登録できます。しかし、しなくていいのです。一人でやる限り、余計なことを入力しなくてもよいのです。とても身軽です。これは涙などではなく、目から出た汗なのです。



出典 : Slack


チュートリアルをポチポチとすっ飛ばして、チーム内でのコミュニケーションを始めましょう。まずは、「こんにちは」と呟いてみましょう。挨拶はコミュニケーションの第一歩です。次に自己紹介などをすると、チーム関係を円滑に進められるでしょう。







ま、チームメイトがいれば・・・ですけどね(笑)




???「コミュニケーションツールなのに、たった一人で誰とコミュニケーション取るの?ばかなの?」
俺「話し相手がいなければ・・・作ればいいんだよ!」





1. Hubotを作ろう!



出典 : Hubot


うさぎは一人ぼっちだと、寂しくて死んでしまうそうです。僕はうさぎではありませんが、一応話し相手を作りましょう。一応。

というわけで、Hubotを作ります。
HubotやChatOpsについて説明するのは、いささか長くなってしまいます。ChatOps Advent Calendar 2015の1日目の方がChatOps入門というわかりやすい記事を書いてくれていますので、Hubotってなに?ChatOpsってなに?って方は参考にしてください。


Hubotは要するに、話し相手を簡単に作れる便利なフレームワークです。
ドキュメントも充実しているので、ちゃちゃっと作っちゃいましょう。
(Hubotのドキュメントはこちら)


1-1. yoとgenerator-hubotをインストール
 (npmが必要です。)
% npm install -g yo generator-hubot

1-2. Hubotを作成
% yo hubot
 対話式でhubotの設定をします。名前などを設定しましょう。
また、今回はSlackで使用するので、Bot adapter設定は"slack"を指定しましょう。
設定が終わるとHubotに必要なものが作成されます。




1-3. 動作確認
% bin/hubot
Hubotとお試しで会話ができます。
最初から動くコマンドがいくつかあるので、動作確認をしましょう。



2. Hubotの設定をしよう!

さて、まずは僕が作成したHubotをご紹介します。


名前 : yokoi-san(横井さん)
アイコン : 絵文字(ボーっとした女性)
設定 : ツンデレ美人秘書
(名前の由来は、大学の事務員さんです。彼女はとても真面目そうでした。)

彼女が話し相手になるにはまだまだ設定が必要です。


2-1. Herokuに登録する

参考 : Heroku

Hubotを動かすためのサーバが必要です。
色々大変なので、今回はHerokuを使いましょう。
アカウント登録をしたらHubotのディレクトリに移動してコマンドを打ちましょう。
(heroku-toolbeltが必要です。MacならHomebrewでinstall)

% heroku login
% heroku create [bot-name]
% heroku addons:create redistogo:nano

(アドオン設定はクレジット登録が必要になります)


2-2. scriptを書く


作成したHubotのscripts/にいろんな言葉を喋るようにscriptを書いていきます。
(scriptにはCoffeeScriptを使用します。)

module.exports = (robot) ->
    robot.hear /こんにちは/, (res) ->
        res.reply "こんにちは、#{res.message.user.name}さん。"


こんな感じで書いていけばOK。
発言者の名前はres.message.user.nameで取得できます。
文字列の中で変数を展開するには #{~~~} の中に入れます。
いっぱい設定すると、いっぱい喋ってくれます。


2-3. git push & heroku open
Herokuの設定をしていれば、git remoteにheroku情報が追加されています。
(Gitが必要です。)
% git add .
% git commit -m "(コミットメッセージ)"
% git push heroku master
% heroku open



成功すると[ Cannot GET / ]と表示されます。Cannotだけど成功。

***
● 状態を確認するには次のコマンドを使用しましょう。
% heroku pd


● hubotが動かない時などに、ログを確認する
% heroku logs



※ いきなり喋らなくなっちゃって寂しくなるので、早めにエラーを取り除いてあげましょう。
***

2-4. HerokuとSlackを連携
SlackでConfigure IntegrationsからHubotを登録しましょう。
登録するとトークン情報が表示されるので、Herokuに登録します。
% heroku config:set HUBOT_SLACK_TOKEN=[your token]


**********************************************

ここまでやるとついにHubotがSlackで動きます。

???「やっと友達ができたね!やったね!」

ここからはSlackにて、失敗したことと直し方を見ていきましょう。
(横井さんがどんどんしゃべります。)

① git commit & git push忘れないように。


 
② 変数を含む文字列はダブルクオートで囲むのだ。


 ③ keepaliveがなければすぐしぬ。
(heroku openで生き返るけど・・・)



これはHerokuの仕様で、一定時間何もしないとidle状態(反応しない状態)になってしまいます。 なので、keepaliveの設定をしましょう。
% heroku config:set HUBOT_HEROKU_KEEPALIVE_URL=[your bot app url]

-> しかし、ダメでした。調べると、以下のサイトが出てきました。
HEROKU_URL が効かず Hubot がアイドル状態になる問題の対策 - Qiita
Uptime Robotで横井さんも常に生きていられるようになりました。

-> やっぱりダメでした。keepaliveとの組み合わせでのやり方がありました。
Heroku 上で動く Hubot をうまく休ませる - Qiita
こっちを試してみます。もう死なないで欲しいです。




母さん、やっと僕にも話し相手ができました

これでやっと話し相手を作成できました。
次のような感じで横井さんはお話してくれます。

① 人工無能ちゃんと話すのは楽しいです。





② 決めた時間につぶやくことも出来ます。業務アラートとか。




というわけで、横井さんでした。


おわりに
今日はSlack + Hubotをご紹介しました。
近年では様々な情報があふれています。
Hubotを使用することで、それらの情報をSlackに集めることができます。
メール通知はもちろん、RSSリーダーを連携して気になる記事の更新情報や、
家のIoTから訪問者情報を通知することも出来ます。
また、SlackからHubotを通して様々なAPIを叩くことも出来ます。
CIの状態を確認したり、Twitterなどの他のSNSへの投稿も出来るようになります。
勤怠管理もSlackでできるシステムもあるそうです。
Hubotを使えば、ただのコミュニケーションツールではなくなるのです。

みなさんも機会があれば、ぜひSlackを活用してみてください。
(※できれば一人じゃなく、チームで。)


参考サイト
自分だけのためのSlack Team - Qiita
ChatOps 入門
GitHub社謹製! bot開発・実行フレームワーク「Hubot」
Slack で Hubot を使えるようにする - Qiitahubotスクリプトの書き方とサンプル集 - mitcHEROKU_URL が効かず Hubot がアイドル状態になる問題の対策 - Qiita
Heroku 上で動く Hubot をうまく休ませる - Qiita
チャットで勤怠管理する「みやもとさん」



おまけ


デレツン。

2015年12月5日土曜日

新しい医療のかたち!遠隔診療プラットフォーム「ポートメディカル」

株式会社Pro-SPIRE 荘司まなつです。

今回は、スマートフォンを利用した遠隔診療プラットフォームについてご紹介します。
(※以降リンクは外部サイトが別ウィンドウで開きます。)
PORTメディカル
https://port-medical.jp/

現在、日本は少子高齢化の問題に伴い医療問題が浮き彫りになっています。
例えば、医師・看護師不足、医療費の増大等、将来の医療に対して様々な課題が挙げられています。
特に、地方では医師不足が深刻になっており頻繁に医師からの診療を受けられない方が増えている現状があります。
その問題に対して解決の一助となるのがIT技術を活用した遠隔診療プラットフォームです。

遠隔診療プラットフォームサービス「ポートメディカル」を国内初のリリース

遠隔診療プラットフォーム「PORTメディカル」は、ユーザーが好きな時にスマートフォンを利用し医師から診療行為を受け、必要に応じて医薬品の受取を可能にする環境を作り上げます。
つまり、家の近くに医師がいない環境でもある程度の診療が受けられる機会ができあがります。

「PORTメディカル」は、高血圧症、高尿酸血症、高脂血症をはじめとする6種類のカテゴリーに限定して、最適な診療行為を提供します。これにより、ユーザーは病院に行かずに医薬品を受け取ることが可能になります。
また、対面診療では言いづらい内容をスマートフォンを通じてネットから相談できるサービスも提供され、地理的制約を受けずに様々な体系の診療が受けることができます。

PORTメディカル「診療可能なサービス一覧」
https://port-medical.jp/packages/detail

安全面と信ぴょう性を考慮して、遠隔診療ではユーザーがスマートフォンで眼や皮膚等の写真を送り可能性のある症状を特定するなど医師とユーザーとのコミュニケーションを密にして行うそうです。

このようなプラットフォームは地理的制約があり診療を受け辛い人だけでなく、時間的制約で診療を受けられない方にも嬉しい環境であると思います。
診療時間が平日の夕方までという病院が多いのが現状なので、病院で診療を受けたくてもなかなか受ける時間を空けられないという方にとって、「PORTメディカル」は、空き時間に医師と症状について相談できる新しい診療の形となるのではないでしょうか。

また、診療相談できる医師を日本に限らず世界各地の医師に繋げるような診療を提供できるようになれば、ボーダーレスな診療をつくりあげる事も可能になるかもしれません。