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メディカル」は、空き時間に医師と症状について相談できる新しい診療の形となるのではないでしょうか。

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


2015年11月30日月曜日

WEBアクセス解析ツール「Google Analytics」

株式会社Pro-SPIRE SS第3BUの野口拓馬です。

本日は、Google Analyticsをご紹介させて頂きます。
(※以降リンクは外部サイトが別ウィンドウで開きます。)

◆Google Analyticsの概要

「Google Analytics」とは、Googleが提供する、無料のWEBアクセス解析ツールです。

できること(取得できるデータ)を以下の図でまとめてみました。



以下にそれぞれのデータの例(一部)を挙げます。
①誰が(ユーザー)・・・新規(またはリピーター)、年齢、性別、ネットワークドメイン
②どこから来て(集客)・・・流入元チャネル(検索エンジン、SNS、ブックマークなどのURL直接入力)
③どんな行動をして(行動)・・・サイト内検索キーワード、回遊経路、イベント(ボタンがクリックされたなど)
④どうした(コンバージョン)・・・サイトの目標を設定して、その目標に達成した回数

◆Google Analyticsの活用方法

活用方法は大きく分けて以下の2つがあります。
(1)WEBサイトの現状(アクセス数はどうか、リピーターが多いのかなど)を知る
(2)データを分析して何ができるかを考える

(2)のデータを分析して何ができるかを考えることが大切です。
下記に(2)の例として3つ紹介したいと思います。

※下記の画像ですが、次のような意味となります。
 「データ取得」→「データ分析」→「分析から結果を導く」→「結果をフィードバック」

1.新規開拓営業


2.効果的な会社説明会



3.HP改装




◆Googleはなぜこのような高機能なツールを無料で提供するのか

最後に、上記の疑問ついて考えてみたいと思います。

一番最初に思いついた答えは、
Google Analyticsを気に入った人が有料版に移行するのを期待しているから
です。
(有料版、無料版の違いについては、下記URL参照。
 https://www.google.co.jp/intl/ja_ALL/analytics/premium/features.html

調査したところ、明確な答えを見つけることはできませんでしたが、
参考になった記事があります。
http://web-tan.forum.impressrd.jp/e/2014/11/17/18657

ツールの提供者の考えを知ろうとすることは、そのツールの活用の仕方を考えるヒントになるかもしれません。
Google Analyticsについては勉強中ではありますが、様々な視点を持って勉強していきたいです。

2015年11月20日金曜日

エンジニアとマーケティング

こんにちは。上河佑里恵です。

10月があっという間に過ぎ、もう11月も終わりに近づいています。

秋晴れの日がありました。写真は、北の丸公園(日本武道館)で撮影しました。



今回のきっかけとなったのが、この記事です。
『 エンジニアこそ、マーケティングを学べ! 』
http://eetimes.jp/ee/articles/1212/12/news009.html※上記のリンクは外部サイトが別ウィンドウで開きます。
「技術マーケティング」について紹介されています。 
マーケティング戦略が優れていたとしても、製品として作り上げることができる“技術力”や”開発力“を含めた「技術開発戦略」を持ち合わせていなければ、製品化において競合他社に大きく差を付けられ、市場からは取り残されていくこととなります。「マーケティングも技術も必要」なのです。(出典:『 エンジニアこそ、マーケティングを学べ! 』) 
技術マーケティングにおいては、どのような技術【Technology】を使って製品を実現するのかということも重要になってきます。(出典:『 エンジニアこそ、マーケティングを学べ! 』) 
マーケティングエンジニアは、直接的に関係しているのです。
エンジニアは、IT技術でマーケティング支援を行うことがあります。

今回はIT技術と密接に関係しているマーケティング手法、CRM について見ていきます。
CRM 【 Customer Relationship Management 】
CRMとは、主に情報システムを用いて顧客の属性や接触履歴を記録・管理し、それぞれの顧客に応じたきめ細かい対応を行うことで長期的な良好な関係を築き、顧客満足度を向上させる取り組み。また、そのために利用される情報システム(CRMシステム)。(出典:『 IT用語辞典 』)
『 IT用語辞典 』
http://e-words.jp/w/CRM.html※上記のリンクは外部サイトが別ウィンドウで開きます。

CRMを少し詳しく見ていくために、一冊の書籍を参考にさせていただきました。
『 CRM 顧客はそこにいる 』
出版:東洋経済新報社
著者:村上 徹, 三谷 宏治, アクセンチュア, & 2 その他
http://www.amazon.co.jp/CRM%E2%80%95%E9%A1%A7%E5%AE%A2%E3%81%AF%E3%81%9D%E3%81%93%E3%81%AB%E3%81%84%E3%82%8B-Best-solution-%E6%9D%91%E5%B1%B1-%E5%BE%B9/dp/4492554297
※上記のリンクは外部サイトが別ウィンドウで開きます。
※以下の引用の出典は、すべて同書籍です。
CRMモデル 」は、4つの階層に分かれています。(図1-6 CRMモデル より)
(1) 戦略層
    顧客戦略
(2) 知識層
    顧客インサイト(顧客理解・識別)
(3) 業務プロセスおよび人・組織層
    マーケティング | セールス | サービス
(4) ソリューションテクノロジー層
    eCRM(サイバーマーケット) | SFA | ストアフロント | コールセンター
(1) 戦略層では、顧客を中心として据えた戦略を提示しています。

(2) 知識層では、進化し続ける顧客を常に理解していきます。

このモデルの特徴は、知識層にあります。
顧客は常に変わり続けるという認識(知識)があるのとないのとでは
顧客へのアプローチ需要の創造の仕方が、大きく変わってくると思います。
同書籍では、知識層について次のように提言しています。
顧客インサイト(Customer Insight)と呼ぶこの階層は、進化を続ける顧客に関して企業が集積していく知見・理解であり、そのような知見を一過性のタスクフォース的なやり方ではなく"定常的"に膨らませかつ深めていく、企業としての能力(ケイパビリティ)である。
(出典:『 CRM 顧客はそこにいる 』) 
戦略層~知識層で方向性をつかんだら、
業務プロセスおよび人・組織層~ソリューションテクノロジー層で行動に移します。
需要創造や顧客獲得を実現していくのは、情報技術です。

(3) 業務プロセスおよび人・組織層では、
  需要を創造すること、
  顧客を獲得すること、
  顧客を維持し深めていくこと、
  新たな需要を開拓することを行います。

(4) ソリューションテクノロジー層では、
  業務プロセスおよび人・組織層に対する、
  情報技術による解決策を提供しています。

現在注目されている情報技術を活用したCRMの取組みとして、
マーケット・オブ・ワンがあげられています。
サイバーマーケットでこれから主流になるであろう取組みはマーケット・オブ・ワンであろう。これは消費者をまさに個人ごとに識別し対応を変えていくもので、仕組みとしてもすでにある程度のソフトウェア・インフラが提供されている。
(出典:『 CRM 顧客はそこにいる 』) 
膨大な数の顧客・消費者を一様に扱わず、
一人ひとりの需要にこたえることができるようになります。
消費者の数以上のデータを、その場で操作することができる情報技術だからこそ、実現が可能です。
具体的な情報技術として、CRMクラウドサービスがあげられます。


一部ではありますが、CRMを見ていきました。
エンジニアがマーケティングを活用していくきっかけになればと思います。

2015年11月18日水曜日

オープンソースCMS「concrete5」

株式会社Pro-SPIRE イノベーション推進センターの髙木です。

本日は、オープンソースのCMS(コンテンツマネジメントシステム)「concrete5」をご紹介させていただきます。
(以降、リンクは外部サイトが別のウィンドウで開きます)

concrete5 Japan 日本語公式サイト


■公式サイト
http://concrete5-japan.org/

■concrete5とは?
webサーバー上で直感的にホームページの運営管理が出来る、PHP製のCMS(コンテンツ・マネージメント・システム)です。

concrete5は、以下の特徴を持っています。

・ホームページ作成ソフトのようにコードをかかずに更新可能。
・ページレイアウトをブロック(最新記事やコメント)というパーツ単位で構成しており、容易に変更可能。
・グループ・ユーザーによるページの閲覧・編集権限の設定。
・スライドショーなどのデザイン性の高いもブロックも用意。
・SNS(facebook、Twitter)連携可能。
・Google Analyticsのトラッキングコードが簡単に設定。
・MITライセンスのため商用利用可。
・多言語サポート対応。
・OAuthによるログイン認証が選択可能(google、facebook、Twitter、cocnrete5.org)

提供されているテンプレートのデザインテーマは、機能性を追求したシンプルなテーマが多い印象です。

作成したページの閲覧・編集権限をユーザー・グループごとに設定できるため、
部署ごとに閲覧権限を求めるような社内イントラサイトの構築などでは、間違いなくWordPressより優れています。

「ログイン認証機能、多言語サポート」は、特におすすめの機能です。

「ログイン認証機能」は、OAuth認証に対応しており、管理画面上から任意のログイン認証(上記機能)を選択できます。

GoogleAppsを持っている企業にとっては、「concrete5」内に会社で使っているGoogleアカウントから認証できるため、アカウント管理の手間を省くことができます。管理者・利用者共にメリットのある機能といえます。

「多言語サポート機能」は、特定の国からサイトにアクセスがあった際に、指定した言語のページヘとリダイレクトを容易に設定できる機能です。

例えば、cocnrete5で作成したコーポレートサイトをトップページのみ、日本語・英語ページを作成し、海外からのアクセスがあった際に英語ページにリダイレクトさせることができます。

多機能で魅力的なCMSである「concrete5」ですが、勉強会やセミナー等も積極的に行われています。

下記ページから、各地域で行われているイベント情報を見ることができます。

■イベント情報一覧
http://concrete5-japan.org/news/events/

活発的に行われているようなので、近々私も参加するつもりです。

2015年10月30日金曜日

ユーザーの動きがわかる!「Hotjar」でユーザー解析

株式会社Pro-SPIRE, ESBUの浅野です。
今日はWebサイトでアクセスしてきたユーザーの動きを確認できる「Hotjar」をご紹介します。
(以降、リンクは外部サイトが別のウィンドウで開きます)




https://www.hotjar.com/


Hotjarとは?
Hotjarはユーザーのマウス操作解析やユーザーからのフィードバック機能がついた自身のWebサイトアクセス解析ツールです。


アクセス解析ツールとしてはGoogle アナリティクスなどが有名ですね。

(引用元 : Google アナリティクス)

Google アナリティクスでは無料で色々なアクセス解析ができます。しかし、大量のアクセスを解析するにはいいですが、個人個人がどのようなことを思っているかはわかりません。Hotjarにはそれがわかる機能が満載です!




まずは登録!
登録は無料です。名前やメールアドレス、職業、そして自分のWebサイトのURLなどを登録します。

(引用元 : Hotjar)

プランは有料のものもありますが、最初は無料で十分でしょう。アカウント登録が済んだら、自分のサイトにトラッキングコードを埋め込みます。


トラッキングコードを自分のサイトに登録!


(引用元 : Hotjar)


トラッキングコードをHTMLに埋め込んだら、ログインして「VERIFY INSTALLATION」を押したら完了です!あとはサイトにみんながアクセスしてくれるのを待ちましょう!

さて、何日か立てばあなたのサイトにアクセスしてくれた方々の情報が溜まっているはずです。
ここからはHotjarでどんなことがわかるのか、機能別に紹介します!



1. ユーザーの気持ちがわかる!ヒートマップ機能

(引用元 : Hotjar)

ヒートマップ機能では、ユーザーがどこに注意を向けているかを確認できます。逆に、注意を払っていない場所にあるボタンなどはユーザーは気づいてないかもしれません。KAIZENしましょう。



2. 実録!現場でユーザーは何を!?レコーディング機能

(引用元 : Hotjar)

レコーディング機能では、実際にユーザーがどのくらいサイトを見て、どの時点でスクロールし、どこにマウスを動かしたのかが一人一人記録されています。サイト内ならページ遷移しても録画されているので、どのページをどのくらい読んでいたかで、ユーザーが求めていたものが調べられますね!



3. サイトのどこで愛想尽きたのかわかる!ファンネル機能

(引用元 : Hotjar)

ユーザーがあなたのサイトのどこで違うサイトに移動したのかが一目でわかるようにまとめられています!もしあなたのプロフィールページで100%のユーザーがどこかへ行ってしまっていたなら、そのプロフィールページを無くすことを検討すべきです。



4. その入力欄は適切ですか?フォーム解析機能


(引用元 : Hotjar)

ユーザーがどの入力欄で、どのぐらい時間をかけて入力したかがわかります。住所に手間取っているなら郵便番号からの自動入力などを検討すべきでしょう。ユーザーIDなどで時間がかかっている場合は悩んでいる場合が多いです。ランダムで入力してくれるボタンなどがあると面白いかもしれません。ユーザーが覚えられないかもしれませんが。

このほかにも、ユーザーが何を考えているか答えてもらえるアンケート機能やサイトのテストユーザーを募集するリクルーター機能などがあります。(有料のみの機能もあります)


また、Helpが充実しているところもとても良いですね。(英語なのが辛いですが)

(引用元 : Hotjar)
まぁ実際はUIがしっかりしているので、基本的な機能を使う分には困らないと思います。


そして、今話題のWordPressでも使えるようにプラグインもあるようです。


(引用元 : Hotjar)
WordPress以外にも気軽に使えるようにプラグイン展開されているようなので、一度調べてみるのもいいかもしれません。


ということで、今日はアクセス解析ツールの「Hotjar」をご紹介しました。こんな機能が無料で使えるのはすごいですね。使えばきっとあなたのサイトがよりよいものになると思います。それでは。

2015年10月22日木曜日

携帯電話をDIY・・・!?

株式会社Pro-SPIRE SS第1BU荘司まなつです。

近頃、家具やインテリア雑貨を自分好みに作成するDIY(Do It Yourself)が流行っていますが、家具だけではなく携帯電話までDIYできる時代がやってきました。
(※以降リンクは外部サイトが別ウィンドウで開きます。)

携帯電話を自作できるキット「RePhone」登場、プログラミングも!
http://techable.jp/archives/31973

中国のハードウェア企業SeeedStudioは、携帯電話を自作できるキット「RePhone Kit」を開発しました。
「RePhone Kit」は欲しい機能やスペックを選び、対応したモジュールを組み立てるキットです。
組み立てた携帯電話では、3G通信による通話やBluetoothによって近距離通信ができるなど、出回っている携帯電話と変わりない機能を持つものが出来上がります。

「RePhone Kit」はモジュラー構造となっており、基本モジュールと拡張モジュールによって欲しい機能を追加することになります。
基本モジュールは、3G通信とBluetoothによる周辺機器との接続が提供されます。
拡張モジュールでは、
・タッチスクリーンディスプレイ
・microUSB
・センサー(3軸センサー、温度センサー、照度センサー)
・オーディオ関連モジュール
・GPS機能
・バッテリー

などが用意されており、自分好みの機能を組み立てていきます。

組み立て式の小型携帯電話「RePhone Kit 」--自作IOTを実現
http://japan.cnet.com/news/service/35070915/

基本の組み立て方は、携帯電話のメインとなる通信モジュールにディスプレイやオーディオモジュール、バッテリーを接続し、SIMカードを挿入するだけです。

また、ArduinoIDE、Lua、JavaScriptのライブラリが用意されている為、提供されているモジュールを組み立てるだけでなく、自分で機能の動作をプログラミングできます。

RePhone- World's First Open Source and Modular Phone


さらに「RePhone Kit」で自作できるのは携帯電話だけでなく、プログラミングしたセンサーや拡張モジュールをモノに装着させればIOT(Internet Of Things)化させることができます。
例えば、「RePhone Kit」のセンサーをとりつけたモノに室温を感知させるようプログラミングすれば、設定温度以上になった際、ユーザーのスマホにメッセージが届くようにしたり、家のドアを開けると音楽が流れるように設定させることができます。

残念ながら、「RePhone Kit」で作成した携帯電話の通信周波数は、日本の携帯電話会社がサポートしていない周波数なので、現在国内では利用することができません。
日本の携帯電話会社がサポートする周波数を追加して、国内認証されることを期待します。

他には、Google社が2014年にモジュール構造のスマホキットProject Ara」を発表しています。
2016年の発売に向けて開発中のようで、Project Ara」はタイル状に自分好みのパーツをタイル状に組み立てて自分だけの携帯電話をつくりあげることが出来ます。

例えば、カメラにこだわりを持つ人は、異なる機能やエフェクトを持ったカメラパーツを複数とりつけて同時に色んなエフェクトを持つ写真を収めることも可能になるかもしれません。

Project Ara: Part of it


今までは、携帯電話のケースを自分好みにしたり、外装をアレンジするなど見た目を変えるだけでしたが、「RePhone Kit」や「Project Ara」の出現により、外装だけでなく中身も自分好みにすることができるようになります。機能をカスタマイズできるようになり、消費者が携帯電話に求める目的も変化していくのではないかと考えます。

数年後、携帯電話の機能のカスタマイズが主流になった時代がやってきたとしたら、私たちが今好みのスマホケースを選んだり、スマホのアクセサリーを選んでいるように、機能が備わった小さなモジュールがたくさん売り場に並び、好きなように選んで購入しているかもしれません。

2015年10月20日火曜日

セルフサービスBIでデータ活用

株式会社Pro-SPIRE SS第3BUの野口です。

本日は、セルフサービスBIについてご紹介致します。
(※以降リンクは外部サイトが別ウィンドウで開きます。)

◆セルフサービスBIとは
多くの企業で事業活動の過程で得られるデータを、経営上などの意思決定に活かそうとする試みがなされています。
このような試みを行うための手法、技術、ソフトウェアを総称したものをBI(Business Intelligence)と呼びます。

このBIは統計学やプログラミングなどの専門的な知識を持つ人たちによって利用されてきました。
もちろん、専門知識を持たないが、データをビジネスで活用したい人はいます。
そこで登場するのがセルフサービスBIで、エンドユーザー自身がレポート作成やデータ分析を行おうとするものです。

◆セルフサービスBIの特徴
・デスクトップ上やクラウド上で動作するなど、簡単かつ低コストで利用できる。
・情報処理やデータ分析の専門知識がないユーザーでも使える。

◆どんなセルフサービスBIがあるか
セルフサービスBIを実現するソフトウェアをご紹介します。
1.QlikSenseCloud
手元のデータをクラウド上にアップロードし、棒グラフや地図などを含む独自の可視化を、クラウド上で作成できます。
ブラウザさえあれば利用できるため、Windows、Mac、Linuxはもちろん、iPhoneやAndroidなどのスマートフォン、タブレットからも利用できます。



実際に使用すると、まずその使いやすさに驚かされます。
登録をして、データをアップロードしてグラフを作成する作業は20分程度で出来ました。
グラフ等のビジュアルはとてもカラフルで資料作成の際には役立ちそうだと感じました。

2.Tableau
ドラッグ&ドロップによる直感的な操作で優れたデータ表現を実現できるので、現場のユーザーがIT部門の力を借りずに データと対話し洞察を得ることができます。
また、専用のデータベースを用意する必要は無く、事前準備を自動化してくれるため、誰もが簡単に利用を開始することができるものとなっています。



3.QuickSight
AWS上にあるデータから洞察を得ることができるサービスです。
使い勝手のよさ、高速であることなどが特徴で、AWSがBIに参入するということで注目されているそうです。



◆誰もがデータを活用する時代に
データを活用する人は専門家の仕事であるという認識がある方が多いかもしれません。
しかし、上記のようなBIが出てきたおかげで、誰もが間単にデータを活用できるようになりつつあります。
BIを使用することで、データ活用の面白さを知り、データをビジネスで活用したいと考える人が増えればいいなと思います。

2015年10月9日金曜日

サーバーレスでコード実行が可能な 「AWS Lambda」

株式会社Pro-SPIRE イノベーション推進センターの髙木です。

本日は、アマゾン ウェブ サービス(AWS)で提供されているサービス、「AWS Lambda」について
ご紹介させていただきます。



この「AWS Lambda」はサーバーレスでコードが実行ができることから、
大変注目度の高いサービスになっています。2014年11月からサービスが開始され、今年7月には、java8にも対応したことにより、更に盛り上がってきました。

特徴は下記の通りです。

・コード実行時間は最大60秒まで
・イベントに対応してミリ秒単位でコードを実行
・数件のリクエストから、数千件のリクエストまで自動でスケール
・java / Node.js / python でコード実行が可能。
・イベントトリガを他AWS(S3、SNS他)に連携することができる
・コードの実行時間により課金(EC2などのサービスを動かす必要がない)
・1ヶ月に 1,000,000 件の無料リクエスト、400,000 GB/秒のコンピューティング時間が無料利用枠で提供

詳細は、下記のページをご参照してください。
https://aws.amazon.com/jp/lambda/details/
※上記のリンクは外部サイトが別ウィンドウで開きます。

技術情報共有サービス「qiita」でも多数の投稿がストックされています。

■Lambdaに関する125件の投稿 - Qiita
※上記のリンクは外部サイトが別ウィンドウで開きます。

コード実行時間は最大60秒と短いですが、イベント発火に「Amazon SQS」や「Amazon SNS」などの通知サービスと組み合わせを行えば、大量にファイルのバッチ処理を行う事ができます。
クローラーやスクレイピングなどと相性がいいサービスといえます。

仮想環境「Amazon EC2」も当然スケールすることは可能ですが、起動時間などの待ち時間が発生してしまいますし、スクリプト程度の処理のためにEC2を動かすのはもったいないですよね。

Lambdaであれば、リクエストにより自動でスケールすることが可能なため、EC2のようにマシンを管理する必要もなく、大量のリクエストがあった場合でも、待ち時間などが発生することなくスクリプトが実行されます。

Java8、Nodejs共にスクレイピングを行う際に使用しましたが、特に問題なく使用できたため
今後はスクレイピングでEC2を使うことはなくなりそうです。

AWSにかかる費用を節約する意味でもとても重要度の高いサービスです。

Node.js、java8、pythonとともに豊富なライブラリを持っているのも魅力のひとつですね。
java8にも対応しているため、JUnitなどで、大量のテストを並列実行する際にも使用できるのではないでしょうか。

使用できる言語が3つと少ないため、「AWS Lambda」はまだまだ発展途上のサービスですが、
魅力は抜群といった感じです。今後が楽しみなサービスの一つですね。