メドピア開発者ブログ

集合知により医療を再発明しようと邁進しているヘルステックカンパニーのエンジニアブログです。読者に有用な情報発信ができるよう心がけたいので応援のほどよろしくお願いします。

Browsersyncを利用してお手軽ブラウザ確認環境をつくろう

皆様はじめまして。メドピアエンジニアの中村です。
好きなブラウザは Vivaldi です。

本記事ではWeb開発効率化の為のひとつの手段として、Browsersyncの利用方法と幾つかの機能をご紹介します。

Browsersyncとは

Browsersyncはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。
Browsersync - Time-saving synchronised browser testing

同種のツールとしてLiveReloadが有名ですが、

  • ブラウザ側でExtentionや拡張が不要
  • 複数ブラウザで操作の同期もできる
  • その他の機能も豊富

などのメリットから、最近はBrowsersyncの方が人気のようです。

さっそくBrowsersyncを試してみよう

まずはBrowsersyncをインストールしてみましょう。
nodeのパッケージマネージャであるnpmコマンドからインストール可能です。

インストールコマンド

$ npm install browser-sync --save-dev # local環境にインストール
$ npm install browser-sync -g # global環境にインストール

これでインストール完了です。

ではBrowsersyncを実行してみましょう。
なお、サンプルとしてまずは以下のようなシンプルなサイト構成で解説します。

.
├── css
│   └── main.css
└── index.html

index.htmlはmain.cssを参照しているものとします。

ではコマンド実行してみます。

$ browser-sync start --server --files "**/*"
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.57:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.57:3001
 -------------------------------------
[BS] Serving files from: ./
[BS] Watching files...

コマンド実行後、上記のようなログメッセージがconsoleに流れつつ、デフォルトブラウザの新しいタブに http://localhost:3000 にすごいサイトが表示されるハズです。

f:id:yuzurunakamura:20150604165654p:plain
※ ここではサンプルとして Bootstrapのexample を利用しています。

この状態のまま、試しにcssを編集してみましょう。

body {
  background-color: #ccc;
}

すると自動で更新内容が反映されます。すごいですね。

f:id:yuzurunakamura:20150604165820p:plain

--files オプションにglobバターンで指定したファイル群をwatchし、ファイルに変更があれば自動でリロードしてくれます。
ここはLiveReloadと一緒ですね。

Browsersyncでできるコト

他にも様々な機能があるので幾つかご紹介します。

プロキシ実行

--server オプションの代わりに --proxy オプションを利用するとプロキシとして実行することが可能です。

$ browser-sync start --proxy "sugoi-service.jp" --files "**/*"

ローカル共有

前述の通りBrowsersync実行時に、

$ browser-sync start --server --files "**/*"
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.57:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.57:3001
 -------------------------------------
[BS] Serving files from: ./
[BS] Watching files...

のようなログメッセージが流れます。
ローカルネットワーク上ではこの http://192.168.0.57:3000 へアクセスしても閲覧可能です。
キャプチャ画像をSlackでやりとりせずともちゃっちゃっと開発画面共有ができますね。

bs-configファイル(設定ファイル)による実行

毎回細かいオプションを付与して実行するのは面倒です。
bs-config.jsという設定ファイルを用意し、

$ browser-sync start --config bs-config.js

のように--configオプションでbs-config.jsファイルを指定実行すれば毎回同じ設定で起動可能です。
なお、bs-config.jsファイルは、

$ browser-sync init

で生成可能なので、こちらでデフォルト設定のbs-config.jsを生成し、お好みで設定すると便利です。

リロードのウェイト、watch対象のファイル群指定/除外、ログ出力設定など、30個以上のオプションがあります。
全オプションは Browsersync options を参考にしてください。

Browesersync管理画面

Browsersyncには管理画面もついています。
デフォルトでは http://localhost:3001 が管理画面で、ここからBrowsersyncを起動したまま幾つかのオプションを切り替え可能です。

f:id:yuzurunakamura:20150604165838p:plain

ブラウザ同期

個人的にBrowesersyncの目玉だと思っている機能です。
複数ブラウザでクリック, スクロール, フォーム操作を同期することができます。

f:id:yuzurunakamura:20150604165900p:plain

なにが嬉しいのかというと、
f:id:yuzurunakamura:20150604170029p:plain
のようにPC/スマホそれぞれのウィンドウ幅にした状態で開発すると、レスポンシブデザイン環境でもスムーズに確認可能です。

また、各種イベントが同期されるのでローカルでのクロスブラウザ確認を容易に行うことができますね。
modernIEやiOSシミュレータから確認するのにも有用です。

リモートデバッグ機能

各要素のアウトライン表示や、グリッド表示を行うことが可能です。

f:id:yuzurunakamura:20150604165919p:plain f:id:yuzurunakamura:20150604165955p:plain

ちなみにCSSアウトライン表示機能その他のフィルタリング機能は Vivaldi にはブラウザに最初から組み込まれています。今すぐインストールしましょう。

ネットワーク制限

f:id:yuzurunakamura:20150604165940p:plain
Chrome にも同様の機能がありますが、特定ブラウザでのネットワーク制限下でのテストを試したい場合には有用かもしれません。

GulpにBrowesersyncを組み込む

LESS/SassやTypeScript/CoffeeScriptコンパイルやminifyの為に既にGulp/Gruntを利用しているケースもあるかと思います。
その場合、以下のようなgulpfile.jsを記述すれば gulp コマンドで実行可能です。

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// 静的ファイルのみ場合
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// プロキシ実行の場合
gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "sugoi-service.jp"
    });
});

gulp.task('default', ['browser-sync']);

同様にGruntにも組み込み可能です。Browsersync + Grunt.js
また、GulpやGruntで利用できるAPIのドキュメントも公開されています。Browsersync API
gulpfile.jsに組み込んでしまえば、複数サイトを同時に立ちあげることもできますので、gulpfile.jsにすべて寄せてしまった方が便利でしょう。

まとめ

Browsersyncを利用すると、リロードの手間を省きつつブラウザ確認が容易になります。
既存のGulp/Grunt環境への組み込みもカンタンですのでぜひ試してみてください。

UI/UX勉強会、開催しました!

皆様、こんにちは。

ご無沙汰してしまいました、GWはいかがお過ごしでしたか? 連休明けに日焼けで黒くなって来た同僚が居て驚いてしまった、メドピアエンジニアの西澤です。

今日は、先月30日に弊社オフィスで行いました、UI/UX勉強会について報告しようと思います。

これからのデザインに求められるものとは?

何故この勉強会を行う事になったかと言うと、発端は弊社デザイナーの松Mでした。 IoTの本格化もあり、デザイン手法やデザイナーに求められる役割が大きく変わっていく現状に勉強意欲を刺激された松Mはあっという間に社内調整とプレゼンターへの依頼を進め、開催へと漕ぎ着けました。

これから考えるべき事は?

ここからは当日のプレゼンテーションを簡単に紹介させていただこうと思います。 プライバシー・バイ・デザインとこれからのデザイナーの役割
博士(医薬学)笹原 英司さま
特定非営利活動法人ヘルスケアクラウド研究会
一般社団法人日本クラウドセキュリティアライアンス
在日米国商工会議所 ヘルスケアIT小委員会


概要は以下の通りです。
これまで画面の中で完結していた「インターネット」という世界が、IoTによりあらゆるものの中へと広がりを見せることで、プライバシーやアクセシビリティに関してこれまで意識されることのなかった問題が生じてくる。プライバシーについては、問題についての考察、対策等が不可欠になってくると考えられ、またアクセシビリティについては、五感を介して得たインスピレーションをもとに、より直感的にわかりやすく表現、デザインし、誰にでも利用しやすい形にすることが重要になってくる。また、ユーザとのインタラクティブな関係が重要性を増し、デザインの評価にもユーザー自身に参加してもらうことが大事になってくる。 当日の資料がSlideShareで共有されているので紹介させていただきます。
「プライバシー・バイ・デザイン」とこれからのデザイナーの役割

SCQRMについて
常盤 拓司さま
合同会社アライアンス・ポート研究開発担当ディレクター
慶應義塾大学大学院政策・メディア研究科特任講師


PMBOKでは解決できなかった問題を解決する手法として提唱されたSCQRMという考え方についてお話しいただきました。

  • SCQRMとは・・・
    スクラムと読みます。システム開発手法のスクラム(Scrum)とは別の物です。
    Structure-Constructive Qualitative Research Method の頭文字を取った物で、日本語では構造構成的質的研究法と訳せます。

事例数(データ量)を前提にするのではなく、概念化・抽象化できるかに主眼を置き事例として扱うという手法はとても興味深い物です。こちらも共有いただいた資料がありますので、紹介させていただきます。
SCQRMについて

Chlorixについて
Nana Sakisakaさま

Chlorixとは、Nana Sakisakaさんご自身が開発されている、医薬品・化合物・症候・傷病の総合検索エンジンです。
Chlorix
この会のテーマの一つである「誰のためのデザインか?」に対して、「研究者のためのデザインである」という明確な答えをお持ちの上で活動されているところに、ユーザを惹きつけるUXのあり方を見たように思います。
また、官公庁のオープンデータ等をベースに作られ、医師、薬剤師が重視する薬物動態データを掲載するなど、実際の利用シーンを念頭に置いた構成となっているようです。


まとめ

プライバシーやウェブサイト、検索エンジンとデザイン等、それぞれのお立場からデザインについてお話しいただきました。
個人的な感想ですが、UI/UXと一括りで表されることの多いこの言葉、全く別物なのかな、と感じました。 UXを真剣に考え出すと、社会的・文化的背景や利用者個々人のバックグラウンド等、全てを含めて考えた上でベストな解を探すことになってしまうような。

と、少し真面目になってしまいましたが実際は和気藹々と楽しく、刺激的な勉強会でした。勉強会の風景を下に載せておきます。
f:id:MedPeer:20150522100056j:plain 今後も誰かの関心事を発端にこのような勉強会も次々開催出来ればと思っております。

だんだん暑くなってきましたね、体調にはお気を付けてお過ごし下さい!

メドピア株式会社 エンジニア 西澤

エンジニアブログ、始めました。

はじめまして、医師専用サイト「MedPeer」を運営しているメドピアのエンジニアブログ編集担当です。

このブログでは、個性派揃いのメドピアエンジニア・デザイナーが技術情報や職場について等、自由に書いていきます。

 

メドピアとは

第1回の今日は、メドピアとはどんな会社か、そしてその中で我々エンジニア・デザイナーが担う役割とは何なのか、お伝えしたいと思います。

まずメドピアとは、「Supporting Doctors, Helping Patients.」のmissionの下、「集合知によって医療分野の変革を行う」というvision実現を目指しています。具体的には、医師・医学生限定の会員制コミュニティサイトを運営し、その中で会員同士が医療情報のシェアやディスカッション等が出来るサービスを提供しています。

現在の会員数は約7.4万人(2014年12月末時点)日本の医師のおよそ4人に1人がご利用下さっています。

メドピアでのエンジニア・デザイナーとは

その中での私達の役割は、vision実現のための「エンジン」です。実際にサービスを提供するサイトを構築し、改善、運用を続けていくことで、ユーザーへより良いサービスを届け、会社のさらなる成長を押し進めます。

 

次回からは、エンジニアの日常や社内の様子、ホットな技術トピックなどをお届けしたいと思います。

よろしくお願いいたします。

 

なおメドピアでは、missionやvisionに共感して一緒にサービスを開発してくれる仲間を募集しています。

ご興味を持たれた方は是非こちらまで!