Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

JMeterでCSRF対策を突破して負荷をかける方法

こんにちは。QAエンジニアの@yuki_shiro_823です。

QAでなかなか難しいのが性能の検証ですね。私はJMeterをよく使っているのですが、JMeterシナリオを作成する際、シナリオの記録(※)を使うと記録時のcookieやtokenがそのまま使用され、シナリオの実行に失敗します。地味にはまるところなので、今回はそれを回避するための方法を紹介します。
※シナリオの記録については、こちらのサイトが参考になります。
mislead.jp

解決したい問題

JMeterでシナリオ記録を用いてシナリオ作成した際に、そのまま再生するとPOSTリクエストが失敗することがあります。cookie用の対策は入れているのになぜだと思って、ブラウザの開発者機能を使って該当リクエストを見てみました。すると、cookieの他にCSRF Tokenがヘッダーに含まれており、それがJMeterのPOSTリクエストには含まれていないのが原因でした。POSTリクエストが失敗するため、かけたい負荷がかかりません。

CSRFとは何ぞや

CSRFとはCross Site Request Forgeliの頭文字をとったものです。対象のサイトにログインしているユーザが、悪意を持って貼られたリンク等を踏むと、その気がないのに勝手に他のサイトの操作を強制されてしまうことです。詳しくはIPAのこちらのサイトをどうぞ。
www.ipa.go.jp

CSRFの対策としては、「フォームを表示するプログラムによって他者が推定困難なランダム値を hiddenフィールドとして埋め込み送信し、フォームデータを処理するプログラムによってそのランダム値がフォームデータ内に含まれていることを確認する(上記サイトより引用)」ことが行われます。ただ、JMeterのシナリオ記録では、このhiddenフィールドで埋め込まれたtoken情報は拾えませんでした。

解決方法

CSRF対策のtoken情報を取得し、POSTリクエストで送れるようにするには、
1. JMeter正規表現抽出機能を使って変数でtoken情報を保持
2. 保持した変数をPOSTリクエスト時にパラメータに追加
という手順を行います。
JMeterのシナリオは記録済み、という前提で説明します。また使用したJMeterのバージョンは5.0です。

1.JMeter正規表現抽出機能を使って変数でtoken情報を保持

まず、JMeterにてCSRF tokenが発行される画面のHTTPリクエストを選択します。該当のリクエストを右クリックし、追加→後処理→正規表現抽出を選択します。
追加された、正規表現抽出画面で以下のように設定します。

設定項目名
Apply to Main sample only
Field to check Body
参照名 csrf_token ※任意の名称を付けます。後ほど使います。
正規表現 <input name="token" value="(.*?)" type="hidden" />
※inputタグに含まれるtokenの値を抽出できるような正規表現を書きます。
例としてかいたものなので、正しい形式は対象サイトを開発者ツールなどで確認してください。
テンプレート $1$
一致番号(0でランダム) ー (特に設定の必要なし)
初期値 ー (特に設定の必要なし)

設定すると、このようになります。
f:id:acro-engineer:20190501193015p:plain:w600

2.保持した変数をPOSTリクエスト時にパラメータに追加

前の手順で、変数csrf_tokenにtokenの値を格納できたので、今度はそれをPOSTリクエスト時のパラメータに設定します。POSTリクエストを送っているHTTPリクエストを表示し、「リクエストで送るパラメータ」の「追加」ボタンを押下→行が追加されるので、ダブルクリックで編集します。

設定項目名
名前: _csrf
値: csrf_token ※正規表現抽出で設定した参照名を使います
URL Encode? チェックなし
Content-Type text/plain

設定すると、このようになります。
f:id:acro-engineer:20190501194918p:plain:w600

これで、CSRF対策で埋め込まれたtokenにも対応できるシナリオになりました!

自分がはまったので、回避する方法をまとめてみました。参考になりましたら幸いです。

Acroquest Technologyでは、キャリア採用を行っています。


  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • Elasticsearch等を使ったデータ収集/分析/可視化
  • マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
モノリシックなアプリケーションをマイクロサービス化したいエンジニア募集! - Acroquest Technology株式会社のWeb エンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com

mockmock Data Recorderを使って異常検知を試してみた!

f:id:acro-engineer:20190412104902p:plain:w800

こんにちは、IoTエンジニアのHaruka Yamashita (@YamaHaruka925) | Twitterです。

2019年4月にプレビュー版がリリースされた、mockmock DataRecorderを使ってみて、IoT PoCを担当する者としてグッときたポイントをご紹介します!

■mockmock DataRecorderとは

f:id:acro-engineer:20190412105107p:plain:w240

mockmockは、クラウド上に仮想デバイスを作成し、開発中のサーバーに疑似データを届けられるサービスです。

これまでは、
 ・データの階層構造や、値の型・生成方法などをコンソール上で入力するだけで、簡単に疑似データを設定することができる。
 ・仮想デバイスは、瞬時に動作や台数を変更できる。
 ・欲しいデータを、欲しいタイミングで、欲しい量だけ受け取ることができる。
という特徴がありました。

さらに、新たにリリースされたDataRecorderでは、人工的に作成した疑似データではなく、実際のデバイスから収集されるリアルなデータを用いて仮想デバイスを生成することができます。

1. mockmock DataRecorderを使えば、IoT PoCのよくある困った!を解決できるのでは?

1-1. IoT PoCでよくある困った!ポイント

PoCを実施する中では、次のような課題が発生することが多くあります。
私自身、IoT担当エンジニアとして、以下のような点を毎度自分で作成・加工するのに時間を取られています。。。

  • センサー/エッジデバイスの選定から始めると、分析までたどり着くまで時間がかかる
  • データを蓄積するのに、時間がかかる。
  • PoCの期間内に、想定する異常(部品の消耗など)が発生するとは限らない
  • データの取得間隔やデータ量、送信頻度など、パラメータを変更するのが大変
  • PoCで実施した数台での試行だけでは、最終的な可視化や分析の効果まで予測できない
1-2. mockmock DataRecorderを利用することで、IoT開発の「困った」を解決!

1-1. のような課題に対し、mockmock DataRecorderを利用すれば、データ収集や実データを基にした想定される異常波形を作成・加工する部分を簡単にできる!

f:id:acro-engineer:20190412105607p:plain:w800

  • 実際に測定したデータをmockmock DataRecorderに登録することで、疑似波形ではなく実際のデータをもとに、パラメータの試行錯誤ができる。
  • 通信方式が決定していなくても、csvファイルからmockmock DataRecorderに登録することができる。
  • 実際のデータをベースに波形加工をできるため、想定される異常波形など作りこむことができる。
  • 実際のデータをベースに仮想デバイスの台数を増やすことができるため、対象機器の種類や台数が増えた場合のシステム全体を想定できる。

2. mockmock DataRecorderを利用して実際のデータから想定される異常データを作成してみる

2-1. mockmock DataRecorderにデータを登録する

f:id:acro-engineer:20190412105741p:plain:w600

まずは、mockmock DataRecorderに実際のデータを登録します。
そのためには、
 ①mockmock DataRecorderにMQTTSでデータを送信する
 ②csvファイルをアップロードする
という二つの方法があります。
詳しくは、mockmockのドキュメントをご覧ください。

実際のデータを登録することで、仮想デバイスから送るデータを疑似データではなく実際のデータをそのまま利用することができるようになります。

f:id:acro-engineer:20190419102256p:plain:w800

2-2. 実際のデータをもとに、異常波形をつくりこむ

mockmockに登録した実際のデータを基に、異常波形をつくりこんでみましょう。
mockmock DataRecorderには、データ変換タイプとして以下の4種類が用意されています。

  • 無変換(コピー)
  • ノイズを付与する
  • ピーク値を付与する
  • データを間引く

今回は、「ピーク値を付与する」を利用して、異常データを作りこんでみました。

もともとの波形に対し、データの途中からピーク値をのっけることで想定外の振動が発生した状態を模擬します。
元データに対し、「どのデータ位置から、どのようなピーク値を、どれくらいの点数分、どれくらいの間隔をあけて」付与するかをJsonでパラメータ定義してあげます。

f:id:acro-engineer:20190412105923p:plain:w800

これだけで、もともとのデータに対し、ピーク値を付与することができます。
今回は、以下のように波形を変化させました。
mockmock DataRecorderにはデータ可視化機能も付いており、登録/変形させたデータをすぐに可視化して確かめることができます!

f:id:acro-engineer:20190419102336p:plain:w800

2-3. Torrentioへのデータ送信

今回、データ分析部分は当社Torrentioを利用しています。
mockmockからTorrentioにデータを送るための設定は簡単です。
mockmockのデータ送信先設定にTorrentioのMQTTエンドポイント設定を記入するだけ。

f:id:acro-engineer:20190412111315p:plain:w800

mockmockから送信するデータのリプレイヤー定義にて、2-1. で登録したDataRecorderのデータセットを選択します。

f:id:acro-engineer:20190412110247p:plain:w800

mockグループ設定にて、上で定義したデータリプレイヤーを利用するよう設定し、TorrentioのTopic名、MQTTクライアントIDを設定して準備完了。

f:id:acro-engineer:20190412110314p:plain:w800

あとは好きな台数の仮想デバイス(mock)を作成し、起動するだけ!
今回は、もともと1台から収集したデータを3台に増幅して送っています。

2-4. 異常検知してみる

mockmockから送信されたデータをTorrentioで異常検知してみます。

PoCとしてセンサーによりデータを測定しているのは1台ですが、mockmockにより実データを送信できる仮想デバイスを増やすことで、複数台で実施した場合の分析の見え方なども検討することができます。

f:id:acro-engineer:20190412110400p:plain:w800

※ここでは異常検知を実施しましたが、Torrentioでは、他にもIoTダッシュボードでのリアルタイム可視化やルールエンジンによる制御なども実施することができます。
 詳しくは、Torrentio Cloudについてをご覧ください。

3. まとめ

小さく始めることで、実施しようとしているIoTシステム開発が有効かどうかを見極めるためのPoC(実証実験)ですが、IoTシステムにはセンサー/ネットワーク/分析プラットフォームなど必要なステップが多く試行錯誤に時間がかかることや、監視対象の機器台数がスケールした場合の想定が難しいなどの課題がありました。
mockmock DataRecorderを利用することにより、「測定した実際のデータをもとに」仮想デバイスの台数を増やせたり、異常波形を創りこむことができます。
PoCでの試行錯誤がぐんとやりやすくなりますね!

Acroquest Technologyでは、キャリア採用を行っています。


  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • Elasticsearch等を使ったデータ収集/分析/可視化
  • マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。

www.wantedly.com

技術書典6にサークル参加しました

こんにちは。
@snuffkinです。

4/14(日)に開催された技術書典6に、サークルとして参加してきました。
techbookfest.org

前回は分散型RESTful検索/分析エンジンであるElasticsearchに関する本を頒布したので、二回目の参加です。
acro-engineer.hatenablog.com

頒布したもの、印刷所、ツール

f:id:acro-engineer:20190415091543p:plain:w250
今回は、個人的に勉強している量子コンピュータに関する本を頒布しました。
https://github.com/snuffkin/books/tree/master/20190414_quantum_computertechbookfest.org

前回に引き続き、印刷所はねこのしっぽさんにお世話になりました。
きめ細かく対応して頂き、ありがとうございます!
www.shippo.co.jp

執筆のためのツールはRe:VIEWを使いました。
Re:VIEWは定型的なレイアウトの文書をパッと書けるので、いいですね。
github.com

当日の様子

開催場所は技術書典5に引き続き、池袋サンシャインシティの展示ホールDです。
現地に到着すると、のぼりがありました。
これを見ると「いよいよだなぁ」と感慨深く感じます。
f:id:acro-engineer:20190415090305j:plain:w250

準備したブースはこちら。
前回は用意しませんでしたが、今回はポスターを用意しました。
ポスターを見ている方が多かったため、ポスターは重要アイテムですね。
f:id:acro-engineer:20190415090421j:plain:w300

最近「量子コンピュータ」というキーワードを目にする機会が増えたものの、IT業界全体で言えばまだまだメジャーではないイメージでした。
ですが、様々な方が興味を持って、サークルを訪れてくださり、楽しい時間を過ごせました。
そして嬉しいことに、今回も完売しました!

また、早速感想をくださった方もいらっしゃり、ありがとうございます。
感想は今後の改善・励みになるので嬉しいです。
「次回も技術書典やりたいな~」と思いました😄

最後に

今回も、技術書典には参加者・サークル合わせて約1万人が集まりました。
これだけの規模の技術書典が開催できるくらい、技術に対する情熱があるって事で、それはスゴイ事だなぁと思います。
運営の方々、サークルの方々、参加者の方々、いろいろお世話になった方々、みなさんありがとうございます。
このような素晴らしいムーブメントを、今後も盛り上げましょう!

Acroquest Technologyでは、キャリア採用を行っています。


  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • Elasticsearch等を使ったデータ収集/分析/可視化
  • マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。

Kaggle Masterと働きたい尖ったエンジニアWanted! - Acroquest Technology株式会社のエンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com

Elastic Kibana Day Tokyoに参加してきました!

こんにちは。
Elastic Certified Engineerのshin0higuchiです😊
今日は六本木でおこなわれたElastic Kibana Day TOKYOに参加してきました!

13:30 受付〜オープニング

今回の会場は六本木ヒルズ森タワーの49F、アカデミーヒルズというところでした。
f:id:acro-engineer:20190306132602j:plain:w300 f:id:acro-engineer:20190306132859j:plain:w300


割と広めの会場で、参加者は150人弱ほど。
アジェンダ

  1. Kibana Power Hour part1
  2. Kibana Power Hour part2
  3. 日本向けの特別なお知らせ
  4. クロージング

という流れでした。

f:id:acro-engineer:20190306134542j:plain:w500

Elastic社の会社紹介動画が流れて会がスタートします。

14:30 Kibana Power Hour part1

このパートは大まかには下記の2点

  1. Kibanaの歴史
  2. バージョン6の機能紹介およびデモ

が中心でした。

バージョン6の機能紹介およびデモ

紹介されたことの概要を挙げていきます。
機能の細かいところは公式ドキュメント・ブログなどに譲ります。

Spaces

Kibanaのダッシュボードなどのリソースを分けてマルチテナントでの運用が容易になる。
詳細に関しては、下記のブログを読むと良いと思います。
www.elastic.co

ロールアップ

古くなった時系列indexを集計して、サイズの削減をおこなう。
メリットとしては

  1. ディスクを削減できる
  2. indexが縮小するので高速化可能

といったあたり。
集計方法をKibanaのUIから選択して簡単に設定できるのが楽で良いです。

Beats Central Management

名前の通り、Beatsの設定をKibanaから制御できる機能。
現状対応しているのはFilebeatおよびMetricbeatのみだそうです。

Canvas

お待ちかね、Canvasのデモです。
Canvasの概要については、以前に記事を書いているのでKibana Canvasを使ってみた - Taste of Tech Topicsをご参照ください。
近頃かなり力を入れているようで、楽しみです。....と思いましたが、いったん機材トラブル発生。
急遽Elastic大谷さんによるデモが始まります。

InfraUI・LogsUI・APMのデモ
f:id:acro-engineer:20190306150542j:plain:w600


Canvasのデモ内容としては「日本各地の風速気温湿度をリアルタイムに表示する」という内容のWorkpad作成でした。
Canvasはレイアウトやデザインの柔軟性の魅力に加えて、インタラクティブな絞り込みが強化されていくようです。
(将来的にはCanvas上でAlerting設定が作れるようになるという話もちらっと聞きました。)

Reporting+Watcherで定期的にPDF送信可能というのもうれしいポイントです。

16:00 Kibana Power Hour part2

このパートでは今後のロードマップについての話がありました。

Canvas

大まかに挙げると下記のポイントになります。

  1. Canvasを一般公開
  2. カスタム操作
  3. 新しいビジュアルエディター
  4. ビジュアライズからアラート作成 
  5. fully embeddable workpads
  6. import existing visualization from kibana
  7. Geo element and location aware functions
  8. GA coming soon
  9. template
  10. クリックして絞り込んだり遷移したりするドリルダウン機能も検討中

→トリガーという形でカスタムアクションを埋め込むことができるようになる。

その他

  1. Kerberosサポート
  2. 機能コントロール (スペースごとの機能制限など)
  3. アラート管理
  4. Kibana監査ログ

 列挙しましたが、Kibanaの監査機能は以前から欲しいと思っていたので嬉しいニュースです。

Maps

現在の最新版では既に触ることができますが、複数のデータソースをマルチレイヤーで表示することができます。
軽く触っただけですが、いろいろな表現ができて、今後の可能性を感じました。
これからダッシュボード等に組み込まれるのか、まだ情報は多くありませんが要チェックです。

日本向けお知らせ

Kibana日本語化

Kibanaの日本語ローカライズ版は7.1見込み(機能自体は6.7で提供見込み)

ドキュメント日本語化

7.1をターゲットにしている
機械翻訳で実現する予定。
「Elasticsearch」→「弾性検索」のようにならないようエンジンを鍛えているところ。

17:00 懇親会

アローナさんをはじめ、色々な人とお話をすることができました。
個人的にはWatcherUIが今後どうなっていくのかなどを聞くことができて、良かったです。
(写真撮り忘れました。残念....)

まとめ

バージョン7のGAも近づき、Kibanaの大きな進化を目の当たりにしました。
今後も使い倒していきたいと思います。

(ちなみに紹介特典でElastic靴下をいただきました😊)
f:id:acro-engineer:20190306152953j:plain:w300


以上です、お読みいただきありがとうございました。


Acroquest Technologyでは、キャリア採用を行っています。

  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • Elasticsearch等を使ったデータ収集/分析/可視化
  • マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。


世界初のElastic認定エンジニアと一緒に働きたい人Wanted! - Acroquest Technology株式会社のエンジニア中途・インターンシップの求人 - Wantedlywww.wantedly.com

1/30(水)にElasticテクニカルワークショップを開催します

こんにちは。
Elastic Certified Engineerのshin0higuchiです😊

現在、2ヶ月に1度開催されているElastic社の
Elasticテクニカルワークショップですが、
次回の開催は、今月末の1/30(水)の予定です。

こちらのワークショップは、
Elastic Stackの基本的な使い方を実際に手を動かして学んでいただけるほか、
利用事例などの紹介も実施されます。

参加時に質疑応答なども自由にできる為、
実際の利用・活用の参考になったと毎回好評の
無料で参加できるワークショップなので、この機会に申し込みを!
https://events.elastic.co/2019-01-30-AcroquestWorkshop-Tokyo

概要は下記の通りです。
==============================
日時:
2019年1月30日(水)12:40受付開始
13:00開始 - 17:30終了予定

会場:
CONFERENCE BRANCH 銀座
東京都 中央区 銀座3-7-3

概要:
Elasticsearch/Kibana/Logstash/Beatsのテクニカルワークショップを開催。
ElasticのOEMパートナー企業であるAcroquest Technology社のエンジニアがElastic Stackの基礎から、オプション機能の利用までをハンズオン形式で説明致します。
ぜひこのワークショップで、星野リゾート日経新聞社、リクルートテクノロジーズが活用するElasticsearchの世界を体験頂き、

  1. システムログ分析
  2. マーケティングデータ分析
  3. 経営指標(KPI)の可視化

等の業務、プロジェクトで活用頂ければと思っております。

プログラム:

  1. Elastic 概要
  2. ハンズオン

 - Elasticsearch/Kibana/Logstash/Beatsの紹介およびElasticsearch Service環境でのハンズオン
 - ビッグデータを活用した実践講座

  1. Elastic Stackのオプション機能紹介
  2. Elastic最新動向、事例紹介 、LT、Q&A

対象者:

  1. 自社のデータ分析を行いたい方
  2. Elasticsearchの概要は既にご存知で、これから活用を検討している方
  3. 今後Elasticsearch評価を開始するにあたり、基本機能を習得されたい方
  4. お客様へ提案をされるエンジニアの方

==============================

それでは、お申込みお待ちしております。
この機会で、Elasticを学びましょう!


Acroquest Technologyでは、キャリア採用を行っています。

  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • Elasticsearch等を使ったデータ収集/分析/可視化
  • マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。


世界初のElastic認定エンジニアと一緒に働きたい人Wanted! - Acroquest Technology株式会社のエンジニア中途・インターンシップの求人 - Wantedlywww.wantedly.com

2018年Advent Calendarの振り返り

皆さんこんにちは。GPUをサンタさんにお願いした@tereka114です。
今年のAdvent Calendarの時期も過ぎ去り、年末まで残すところ後数日ですね。

今年も集めてみると、かなりのブログ記事を執筆しました。
この記事でまとめて紹介させていただきます!

2018年アドベントカレンダーまとめ

はてぶTop3

記事の中で特に人気の高い記事、今年のはてぶTop3の記事を紹介します。

1位:Elastic Stackで簡単!Dockerコンテナ監視ダッシュボード作成

人気の高い2つのOSS、Elastic Stack と Docker の組み合わせはさすがに強い。
皆が使うDockerの監視といったニーズも高かったか、2位にダブルスコア以上の大差を付けて、堂々のTOP。
私も試しに使ってみたい・・・

acro-engineer.hatenablog.com

2位:キーフレーズを自動推定するPositionRankの収束性について解説

PositionRank自体が初耳で、論文でもなく、まさか自分で収束性を解析してしまうとは。
記事内容が面白く、時間をかけないと読めません。
かなりの数学・理論マニア向けと思われたこの記事が、まさかの2位にランクイン!

acro-engineer.hatenablog.com

3位:LambdaからRekognitionを使ってみたら意外なところでハマった話

AWS Rekognitonを使った画像解析を簡単なお試しではなく、実際の業務で本格的に使ってみたからこそハマった内容。
内容よりも、写真に写るボウズの人が気になってしまったのは、私だけでしょうか。。。

acro-engineer.hatenablog.com

最後に

今年のアドベントカレンダーいかがでしたでしょうか?
この中には、仕事で扱っているものも多く、なるほどと感じる内容が多く、読むのが非常に楽しかったです!

また来年、お会いしましょう!皆さん、良いお年を。

Acroquest Technologyでは、キャリア採用を行っています。


  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • Elasticsearch等を使ったデータ収集/分析/可視化
  • マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。

世界初のElastic認定エンジニアと一緒に働きたい人Wanted! - Acroquest Technology株式会社のエンジニア中途・インターンシップの求人 - Wantedlywww.wantedly.com

同一アプリをWeb版とElectron版の両方で作る方法

皆さん、こんにちはmiyasakagoです。
この記事はNode.js_2 Advent Calendar 2018 - Qiitaの23日目です。

0)はじめに

ここ2年くらいで私自身、Electronを実案件の中で使う機会が増えているのですが、比較的遭遇するのは、同一アプリでWeb版もElectron版(デスクトップアプリ)も両方ほしい、というようなシチュエーションです。
f:id:acro-engineer:20181224200843p:plain:h250
例えば、Electronベースで開発されているアプリの一つにSlackがありますが、SlackはWebアプリとしてブラウザ上から利用することも、デスクトップアプリとして利用することも可能になっていますよね。

こういうことを実現したいと思ったとき、どういう方法があるのかいくつか選択肢があり、迷いました。
少し探してもあまり情報がなかったため、いろいろ調べ自分なりに整理してみました。

1)Webアプリを先に作り、Electron上からURL呼び出しする方法
2)Webアプリを先に作り、Electronに移植する方法
3)Electronアプリを先に作り、Webアプリに移植する方法

では、詳細を見ていきましょう。

1)Webアプリを先に作り、Electron上からURL呼び出しする方法

1. 概要

タイトルの通り、Webアプリを開発した後、そのWebページをElectronのウィンドウ上に読み込み動作させる、という方法です。

Electronには、外部のWebページを読み込み、デスクトップアプリ上で動作させる便利な機能があります。
その機能を活用した方法になります。(本機能の概要は後述します。)

2. メリット/デメリット

この方法であれば、WebアプリのソースコードをElectron側に移植するような作業は発生せず、開発はWebアプリ側に注力できます。
一方、制約も出てきます。以下に整理します。

  • メリット
    • 開発コストを抑えられ、納期も短くできる。
    • アプリのバージョンアップが楽。わざわざ更新プログラムを配信してインストールさせなくても、Webアプリを更新すれば、自動的にElectronアプリも更新される。
    • Web版、Electron版それぞれで、同じようなソースコードを2重管理する必要がない。
  • ・デメリット
    • インターネット環境での動作が前提になる。そのため、アプリの要件として許容できるかどうか、先に確認しておく必要がある。
    • Electronのネイティブアプリ用の機能(例:ローカルファイルへのアクセス等)の利用に制限が生まれる。

3. 実現方法

このブログでは、上記の実装方法の詳細までは解説しませんが、2つの代表的な方法の紹介だけ簡単にしておきます。

a. webviewを利用する
  • webviewは、外部のWebページを読み込み、Electronのアプリ上に表示する機能。
  • webviewタグの使い方はHTMLの標準タグであるiframeに似ている。
  • Electronのプロセスとwebviewに読み込んだWebページとの間で情報のやり取りが可能であったりと、iframeには無い便利な機能性を持っている。
  • 本格利用を考える場合、webviewはChroniumが維持管理をしている為、Electronの要望通りにバグ修正が進まないという課題がある。

webviewでできることや実装方法については、以下のページなどに詳しく書かれています。
qiita.com

b. BrowserViewを利用する
  • BrowserViewは、webviewに替わる方法として実装されたもの。
  • webviewと違い、BrowserViewはElectronが維持管理をしている為、バグ修正が進まないリスクを減らせる。
  • 一方、まだwebviewほど機能が充実していないので、その点を踏まえた選定が必要。

BrowserViewの基本的な使い方については、
今年のAdvent Calendarでも紹介されていますので、ここでは割愛します。
qiita.com

参考までに

現在のSlackのデスクトップアプリ(version3.0以降)は、BrowserViewを利用して実現されている代表例の一つです。
なお、Slackは、version2.xまではwebviewを用いており、3.0へのバージョンアップ時にBrowserViewに切り替えたことが、Charlie Hess氏の以下のブログで紹介されています。
slack.engineering

webviewとBrowserViewの選定をする上では、一度読んでおくことをおすすめします。

2)Webアプリを先に作り、Electronに移植する方法

1. 概要

「1)Webアプリを先に作り、Electron上からURL呼び出しする方法」との違いは、Webアプリを作った後にソースコードをElectronに移植する点です。

f:id:acro-engineer:20181224194201p:plain:w500

移植を前提で考える場合、サーバサイドとクライアントサイドは疎結合にしておくことが重要であるため、SPA(シングルページアプリケーション)として開発しておくことをおすすめします。

また、サーバサイドをNode.jsで開発しておけば、ElectronのMainプロセスにサーバサイドのロジックも移植しやすくなるためおすすめです。
逆に、サーバサイドはAPIサーバとしてElectronには移植せず、Electronアプリから呼び出す構成にしても良いでしょう。

2. メリット/デメリット

  • メリット
    • 同じくWebアプリを先行開発する「1)Webアプリを先に作り、Electron上からURL呼び出しする方法」に比べ、Electronアプリへの移植後に、Electronのネイティブアプリ用の機能を追加することが容易。
    • Webアプリ先行であるにも関わらず、移植した結果としてオフラインでも動作するデスクトップアプリを作ることが可能。(※ただし、クライアント-サーバ間の通信部分などは改修する必要がある)
  • デメリット
    • 同じくWebアプリを先行開発する「1)Webアプリを先に作り、Electron上からURL呼び出しする方法」に比べ、移植のコストがかかる。
    • Web版とElectron版でソースコードが2重管理されることになるため、メンテナンスコストが高い。

3)Electronアプリを先に作り、Webアプリに移植する方法

1. 概要

「2)Webアプリを先に作り、Electronに移植する方法」の逆方向への移植を前提とした方法です。

f:id:acro-engineer:20181224194505p:plain:w500

前提として、ElectronアプリはNode.jsによって実行され(Mainプロセスと呼ばれる)、画面描画部分はHTML5、CSS3、JavaScriptによってChromium上で動作します(Rendererプロセスと呼ばれる)。
そのため、利用言語の関係上、ElectronアプリはWebアプリへの移植をしやすい構成になっていると言えます。

2. メリット/デメリット

  • メリット
    • Electronアプリを先に作るため、Electronのネイティブアプリ用の機能(例:ローカルファイルへのアクセス等)の利用に制約が生まれない。
    • そこまで意識せずとも、サーバサイドへの依存を減らした作りになりやすく、オフラインでも動作するデスクトップアプリを作りやすい。
  • デメリット
    • Electron上では、Mainプロセス(Node.jsで動作)とRendererプロセス(Chromium上で動作)はIPC(Inter-process Communication:プロセス間通信)による通信を行う為、その通信部分はそのままWebに移植はできない。
    • Electronのネイティブアプリ用の機能は移植できない為、Web移植時に交換しやすいクラス設計をしておくことが重要。
    • Web版とElectron版でソースコードが2重管理されることになるため、メンテナンスコストが高い。

4)まとめ

ここまで3つの方法を紹介しましたので、メリット/デメリットをまとめます。

No. 方法 メリット デメリット
1 Webアプリを先に作り、
Electron上からURL呼び出しする方法
・開発コストを抑えられ、納期も短くできる
・アプリのバージョンアップが楽
ソースコードの2重管理が不要
・デスクトップ版もインターネット環境での動作が前提になる
・ネイティブアプリ用の機能の利用に制限が生まれる
2 Webアプリを先に作り、
Electronに移植する方法
・ネイティブアプリ用の機能を追加することが容易
・オフラインでも動作するデスクトップアプリを作ることが可能
・1の方法に比べ、移植のコストがかかる
ソースコードが2重管理されることになる
3 Electronアプリを先に作り、
Webアプリに移植する方法
・ネイティブアプリ用の機能の利用に制約が生まれない
・オフラインでも動作するデスクトップアプリを作りやすい
・IPCによる通信部分はそのままWebに移植はできない
・ネイティブアプリ用の機能は移植できない
ソースコードが2重管理されることになる


最後に、上記のどの方法を採用するか決める上で、私が考えている判断基準を書いておきます。

  1. Webアプリ、デスクトップアプリのどちらをメインにするのか
  2. デスクトップアプリにてネイティブ機能の利用はどの程度求められるか
  3. 開発にコストと期間をどれだけ割り当てることができるか

これらの質問への回答とその優先度によって、採用する方法は概ね判断できると考えています。
例えば、分かりやすい例では以下のような具合です。

  • ネイティブ機能はあまり使う予定はなく、短期間での開発が求められる。
    →「1)Webアプリを先に作り、Electron上からURL呼び出しする方法」が良さそう
  • Webアプリメインだが、デスクトップアプリではネイティブ機能もしっかり使いたい。
    →「2)Webアプリを先に作り、Electronに移植する方法」が良さそう
  • デスクトップアプリがメインで、ネイティブ機能をしっかり使いたい。
    →「3)Electronアプリを先に作り、Webアプリに移植する方法」が良さそう

私のように「Webアプリもデスクトップアプリもほしい」というシチュエーションになったら、是非、参考にしてみてもらえたら幸いです。

それでは!

Acroquest Technologyでは、キャリア採用を行っています。

  • ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
  • Elasticsearch等を使ったデータ収集/分析/可視化
  • マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト
  • 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
自社製品の開発から活用方法の提案まで関わりたいフロントエンジニア募集! - Acroquest Technology株式会社のWeb エンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com