Copyright © 2019 ZOHO Japan Corporation.

Webアプリ開発 改善LifeHack

Applications Manager ゾーホージャパン株式会社

開発現場必見！Webアプリ開発を効率化するポイント

2 | Applications Manager Copyright © 2019 ZOHO Japan Corporation.

Contents

改めてWebアプリとは？ 3

素早いWebアプリ開発のために現場がすべきこと 4

要件定義のポイント 4

Tips　結局はコミュニケーション 7

稼働状態の可視化のポイント 8

まとめ 14

Copyright © 2019 ZOHO Japan Corporation.

Applications Manager | 3Copyright © 2019 ZOHO Japan Corporation.

近年、Web アプリケーションはより一層普及し、老若男女問わず、ユーザーの生活の一部となりました。次々に新しい Web アプリケーションやサービス が 生 み 出 さ れ て い る 中 で、 ユ ー ザ ー の ニ ー ズ も ど ん ど ん 多 様 化 し て い ます。Web ア プ リ 開 発 の 現 場 も、 こ の 流 れ に 対 応 し な が ら 生 き 残 る 必 要 が あり ま す。Web ア プ リ を 素 早 く 開 発 し、 そ の 後 の 保 守 開 発 で も 改 善 と リ リ ースのサイクルを素早く回すためには、開発現場では一体どのようなことができるでしょうか？当 eBook で は、Web ア プ リ ケ ー シ ョ ン の 開 発・ 保 守 の サ イ ク ル を 短 く して素早くユーザーのニーズに応えていくために押さえるべきポイントを、忙しい開発現場でもできるようにまとめていきます。

改めてWebアプリとは？Web ア プ リ ケ ー シ ョ ン（Web ア プ リ ） と は、 端 末 に 特 定 の ア プ リ ケ ーシ ョ ン を イ ン ス ト ー ル す る 必 要 が な く、 ブ ラ ウ ザ ー か ら ネ ッ ト ワ ー クに 接 続 す る こ と で 利 用 可 能 に な る ア プ リ ケ ー シ ョ ン の こ と を 指 し ま す。 Web ア プ リ ケ ー シ ョ ン の ほ か に は、 一 般 的 に「 ア プ リ 」 と 呼 ば れ、 ス マ ート フ ォ ン の 専 用 ス ト ア か ら イ ン ス ト ー ル す る こ と で 利 用 可 能 に な る「 ネ イティブアプリ」があります。当 eBook ではこのネイティブアプリは対象とせず、前述の Web アプリケーションを対象としています。ア プ リ ケ ー シ ョ ン は、 業 務 に 使 用 さ れ る 社 内 用 シ ス テ ム か ら、 一 般 の エ ンド ユ ー ザ ー に 向 け た サ ー ビ ス な ど、 幅 広 い 用 途 に 対 応 し ま す。 そ の 中 で もWeb ア プ リ は、 ネ イ テ ィ ブ ア プ リ と 比 較 す る と、iOS や Android な ど の

4 | Applications Manager Copyright © 2019 ZOHO Japan Corporation.

端末ごとに開発を分ける必要がない場合も多く、開発コストが低く抑えられる 傾 向 が あ り ま す。 ま た、Web ア プ リ を ス マ ー ト フ ォ ン ア プ リ の よ う に 表示させるハイブリッドアプリなどの普及も一般に進んでおり、今後も成長が見込まれると言えます。

素早いWebアプリ開発のために現場がすべきこと前 述 の 通 り、Web ア プ リ は、 市 場 と し て の 成 長 が 大 き い と 言 え ま す。 こ れに加え、エンドユーザーが直接使用するものである以上は、ユーザーの要望にも応えられるように柔軟に変化する必要があるものであるとも言えます。で は、 開 発 現 場 は、Web ア プ リ の 成 長 や 変 化 に 敏 感 に つ い て 行 く た め に、一体何をすべきでしょうか？

などが挙げられます。以 下 で は、 要 件 定 義 と 稼 働 状 況 の 可 視 化 に つ い て、 具 体 的 に 何 を す べ き か、どのようなことに気をつけるべきかを説明していきます。

要件定義のポイントこれには悩まされた開発者も多いことでしょう。要件に漏れがあり変更の必要が出てきた場合、途中まで進行していた開発がすべて水の泡などということも少なからず発生してしまいます。これを防ぐためには、開発現場では当たり前の事項とはなりますが、要件定義をしっかり行うことが大切です。ここでは、要件定義をより適切に行うためのポイントをまとめていきます。

多角的な視点

様々な状況を想定し、ユーザーの要望・課題・問題を、様々な視点から多く引き出すことが重要です。あとから「あれも必要だった、これも必要だった」

開発前• 要件を明確に定義

開発中・保守• 現状の稼働状況や問題点・ボトルネックを可視化

Applications Manager | 5Copyright © 2019 ZOHO Japan Corporation.

となると、スケジュールを変更する必要が生じてアプリケーションのリリースが遅れる原因となります。また、予算が足りない、予算に見合わないプロジェクト規模になってしまう、など、円滑に開発が進まない原因にもなります。このようなことがないように、開発対象のアプリケーションが置かれる状況をイメージして仕様を確定しましょう。

RASISに注意

RASIS とは、システムに関する評価指標の一つで、「信頼性（Reliabil i ty）」「可用性（Availabil i ty）」「保守性（Serviceabil i ty）」「保全性（Integrity）」「安全性（Security）」の頭文字を取ったものです。Web ア プ リ の 要 件 定 義 時 に も こ の 5 つ の 考 え 方 を 忘 れ ず に よ う に し ま し ょう。要件定義の時点では、例えば、以下の点などに気をつけることが望ましいといえます。

信頼性• エラー発生時にはどのような動作を想定しているか

• システム監視や障害検知の対応フローは？可用性• 障害点を生み出す構成ではないか機密性• セキュリティ対策は考慮しているか

課題の特定

そ の Web ア プ リ で 一 体 何 を 解 決 す る の か、 ど の よ う な 目 的 で Web ア プ リを作るのか、明確に定義しましょう。要件定義の間にはたくさんの要件や要望・希望が出てきます。これらに埋もれて目的を失わないためには、次のポイントを明確にしておきましょう。

6 | Applications Manager Copyright © 2019 ZOHO Japan Corporation.

取捨選択

ユ ー ザ ー か ら た く さ ん 引 き 出 し た 要 件 を す べ て 実 装 し よ う と し て い ま せ んか？　数ある要件の中で、そのアプリケーション開発において本当に必要なものなのかを検討する必要があります。場合によっては、すべての要件が必要だが、予算に見合っていない等の理由で、今回の開発では見送ることが正解の場合もあります。本当に必要なもの、実は不要なもの等を、日程や予算と合わせて検討しましょう。

可視化

正確で漏れがでない要件定義をするためには、曖昧な箇所を残さずにきっちり明確に要件を定義することが大切です。このためには、誰が見てもわかるよ う に、 ア プ リ ケ ー シ ョ ン 化 す る 業 務・ プ ロ セ ス を ス テ ッ プ で 表 現 し た り、図示して可視化することで、認識齟齬を減らすことができます。

What：何を作るのかWhy：何故作るのかWhere：どこに作るのかWhen：いつまでに作るのかHow：どのようにして作るのか

要件定義時におさえるべきポイント

• 多角的な視点を持ちましょう• RASIS を忘れないようにしましょう• Web アプリで解決すべき課題が何であるかを明確にしましょう

• 時には要件を取捨選択しなければならないことを心に留めておきましょう

• 誰が見てもわかるように作業やステップを可視化しましょう

Applications Manager | 7Copyright © 2019 ZOHO Japan Corporation.

Tips　結局はコミュニケーション要件定義でのユーザーからのヒアリング、要件をプログラマーに伝える開発チーム内のやりとり……等は、それぞれが一見異なる作業です。しかし、根本的には “人と人のコミュニケーション” で成り立っていることには変わりありません。プロジェクト開発を風刺した有名な画像（図 1）があります。このような事態が発生する最も大きな原因としては、顧客と開発者、営業担当と技術担当、マネージャーとプログラマーなど、それぞれの間でのミスコミュニケーションの問題であると言わざるを得ません。

「 欲 し か っ た の は こ ん な の じ ゃ な い」「 上 は 実 際 の 開 発 現 場 が わ か って な い」「 あ と か ら そ ん な こ と 言 わ れ て も 困 る」「 技 術 知 識 が 無 い 人が 無 茶 ば か り 言 う 」…… 開 発 現 場 の 悩 み は 尽 き ま せ ん が、 こ の よ うな こ と を 言 う 前 に、 今 一 度 人 と 人 と の コ ミ ュ ニ ケ ー シ ョ ン に 立 ち返ってみませんか？

出典 THE PROJECT CARTOON.com <http://www.projectcar toon.com/car toon/586>図 1 『PROJECT CARTOON』

8 | Applications Manager Copyright © 2019 ZOHO Japan Corporation.

稼働状態の可視化のポイント要件定義と設計……と進んでいよいよ Web アプリがアプリケーションとして稼働する状態になったら、実際の利用状況を想定してテストを実施することと思います。ここで、以下のような状況になったら、現在の開発現場ではどうしていますか？

「実際に動かしてみたら動作が遅い！」「表示されるデータがどうもおかしい」「〇〇から××という操作をするとエラーが出る」

Web アプリ開発や改修後によくあるこれらの問題を解決するための方法は、アプリケーションの内部がどのようにして動いているのかを確認して、コーディングの誤りや効率の悪い処理・呼び出しているデータが正しいかどうか等を確認する必要があります。

Web ア プ リ の 処 理 が ど の よ う に な っ て い る か を 確 認 す る 方 法 と し て 一 般 的な 手 法 と 言 え ば、Web ア プ リ が 吐 き 出 す ロ グ の 解 析 で す。 ロ グ を 見 て デ ータや処理が正しいか、おかしなエラーを吐き出していないかを確認します。しかし、ログでの調査は、あらかじめプログラム側に必要なログを吐き出すための処理を加えておく必要があり、調査の段階では問題の箇所を特定するために膨大な量のログを見なければなりません。

| 9Applications Manager

概要資料Applications Manager

評価版Copyright © 2019 ZOHO Japan Corporation.

ログを読み慣れた開発者であっても問題の原因特定には時間を要することがあり、ましてや経験が無い開発者には解析すら至難の業になる場合もあります。

Web ア プ リ の 稼 働 状 況 を 確 か め る た め の 手 法 と し て は、 ロ グ 解 析 は 決 し て効率が良いとは言えません。ユーザーの声に素早く反応して開発や改修をおこなったり、変化に柔軟に対応していくためには、ログのほかに、アプリケーションの稼働状況を可視化できるような手段を導入することが望ましいと言えます。そのため、コストをかけずに誰でも簡単に使えるツールを導入している開発者は少なくありません。

次章からは、ManageEngine が提供する Web アプリの稼働状況を簡単に可 視 化 す る ソ フ ト ウ ェ ア「Applications Manager」 を 使 用 し て、 ア プ リ開発を効率化する方法をご紹介します。

アプリケーションを可視化する方法

本 章 で は、Web ア プ リ を 構 成 す る パ ー ト「 フ ロ ン ト エ ン ド 」「 サ ー バ ー サイド」「ネットワーク・インフラ」毎に可視化・調査方法をご紹介します。

フロントエンド

Web ア プ リ の フ ロ ン ト エ ン ド は、 フ ロ ン ト エ ン ド の 各 コ ン ポ ー ネ ン ト が 正しく読み込まれているか、読み込みにどれくらいの時間がかかっているか等を調査することにより、読み込み速度やページ表示に問題がある箇所をあぶり出すことができます。例えば、一般的には次のような例が Web ページやWeb アプリのパフォーマンスを下げると言われています。

フロントエンドによくある問題• Web 向けに最適化されていないサイズの画像やファイルが読み込まれている

• CSSやJavaScriptの読み込み順が適切でない

10 |Applications Manager

概要資料Applications Manager

評価版 Copyright © 2019 ZOHO Japan Corporation.

Applications Manager で は、Web ア プ リ の フ ロ ン ト エ ン ド を 以 下 の ように可視化し、どの要素に問題が存在するか、どのコンポーネントにどれくらいの時間がかかっているか等を、誰が見ても一目でわかるように可視化することが可能です。

サーバーサイド

サ ー バ ー サ イ ド の 視 点 か ら Web ア プ リ の 動 作 を 確 認 す る に は、Web ア プリを構成するアプリケーション（AP）サーバーや Web サーバー、データベース（DB） の 各 ベ ン ダ ー か ら 提 供 さ れ る 管 理 ツ ー ル を 使 用 し て 調 査 を 行 い ます。または、各コンポーネントが出力するログを解析し、何が起こっているのか突き止めるのが一般的です。しかし、いくつものツールを使い分けての作業は効率を下げたり、経験がないと効率的な調査が難しいものです。

Web・AP・DB各サーバーの調査効率化

ベンダーツール・ログ 統合監視ツール▶

図 2 フロントエンド監視

| 11Applications Manager

概要資料Applications Manager

評価版Copyright © 2019 ZOHO Japan Corporation.

Applications Manager で は、Web ア プ リ の 画 面 操 作 か ら デ ー タ ベ ー スなどサーバーサイド処理までを一貫して監視可能なトランザクション監視機能 を 利 用 し て、 パ フ ォ ー マ ン ス を 悪 く す る 原 因 を 可 視 化 し て、Web ア プ リのどこに問題があるのかを一目で特定できます。※ Java アプリ、.NET アプリ、Ruby アプリケーションに対応

表示された URL をトリガーとして、全体の処理時間のうちそれぞれのコンポーネントが占める割合、裏で実行された SQL までを特定できます。

また、さらに詳しいデータベースパフォーマンスを調査する場合は、データベース監視を行います。データベース全体で実行に時間がかかっているクエリをあぶり出したり、その他データベースのパフォーマンスを、手間をかけることなく一度に可視化できます。

図 3 トランザクション監視

図 4 SQL までドリルダウン

12 |Applications Manager

概要資料Applications Manager

評価版 Copyright © 2019 ZOHO Japan Corporation.

そのほか、アプリケーションサーバーや Web サーバー、その他のコンポーネントについても、Applications Manager 上から同様に追加することで、各サーバーの稼働状況や実行されたリクエスト数や応答コードなどの統計情報を確認できます。Applications Manager で パ フ ォ ー マ ン ス を 可 視 化 す る に は、 調 査 し たい サ ー バ ー や デ ー タ ベ ー ス な ど の ア プ リ ケ ー シ ョ ン の ユ ー ザ ー 情 報 等 をApplications Manager に 登 録 し ま す。 す る と、 定 期 的 に ソ フ ト ウ ェ アが デ ー タ ベ ー ス か ら パ フ ォ ー マ ン ス デ ー タを 取 得 し、 可 視 化 し ま す。 グ ラ フ 作 成 の ため の 面 倒 な 設 定 な ど は 必 要 な く 自 動 で 可 視化 し ま す。 調 査 の た め の グ ラ フ 作 成 や、 定期 報 告 の た め の レ ポ ー ト 作 成 な ど の 手 間 をツ ー ル に よ り 省 略 し て 効 率 化 す る こ と が 可能です。

ま た、 各 コ ン ポ ー ネ ン ト の 関 係 性 を 可 視 化するためのマップを作成できます。Web アプ リ の 実 際 の 構 成 と、 ア プ リ の パ フ ォ ー マン ス 情 報 を 一 度 に 可 視 化 し て 管 理 す る こ とが可能です。

図 5 データベース監視

図 6 可視化マップ

| 13Applications Manager

概要資料Applications Manager

評価版Copyright © 2019 ZOHO Japan Corporation.

ネットワーク・インフラ

ア プ リ ケ ー シ ョ ン の コ ン ポ ー ネ ン ト に 問 題 が あ る の で は な く ネ ッ ト ワ ーク や イ ン フ ラ 部 分 に 問 題 が あ る 場 合 は、 ネ ッ ト ワ ー ク 統 合 監 視 ツ ー ル の

「OpManager」 に Applications Manager を プ ラ グ イ ン し て 利 用 す る ことで、インフラからアプリケーションまで統合的に監視して調査することが可能です。以 下 は、 ネ ッ ト ワ ー ク 機 器 と サ ー バ ー を 監 視 し た OpManager の 画 面 サ ンプルです。インフラパフォーマンスもアプリケーションと併せて可視化するこ と に よ り、Web ア プ リ が 稼 働 す る 環 境 の ブ ラ ッ ク ボ ッ ク ス 化 を 防 ぎ、 より広い視点からの調査を行いやすくします。

ネットワーク・アプリの問題を切り分けるには

ネットワークもアプリも可視化して調査

図 7 ネットワーク監視

14 |Applications Manager

概要資料Applications Manager

評価版 Copyright © 2019 ZOHO Japan Corporation.

まとめWeb アプリケーションの開発を改善するためのポイントをご紹介しました。Web アプリケーション開発のプロセスにおいて欠かせない「要件定義」と「テスト」を効率化することにより、アプリケーション開発のサイクルをより素早く正確に回すことができるようになります。

Web ア プ リ の 改 善 の 第 一 歩 と し て、 当 eBook で ご 紹 介 し た ポ イ ン ト を 開発サイクルに取り入れてみてはいかがでしょうか。

今すぐ使えるWebアプリ性能可視化ツール

ア プ リ ケ ー シ ョ ン 開 発 後 の Web ア プ リ 改 善 の 効 率 化 を お 考 え の 方、 調 査の 時 間 を 短 縮 し た い 方、 と り あ え ず 可 視 化 を 始 め て み た い と い う Web アプ リ 開 発 者 の 方 は、Web ア プ リ の パ フ ォ ー マ ン ス 可 視 化 に 最 適 な ツ ー ル

「Applications Manager」を、是非ご検討ください！

Webアプリ開発改善のためのポイント

要件定義• 多角的な視点を持って要件をヒアリングしましょう• RASIS に注意して要件を定義しましょう• 課題が何であるかを明確にしましょう• 要件の取捨選択も選択肢に入れましょう• 作業やステップを可視化しましょう

稼働状況の可視化• 統合監視ツールを導入し、パフォーマンスを誰が見てもわかる状況にしましょう

• 問題切り分けを容易にするため、フロントエンド・サーバーサイド・ネットワークなど幅広く見ましょう

| 15Applications Manager

概要資料Applications Manager

評価版Copyright © 2019 ZOHO Japan Corporation.

ApplicationsManager について

ManageEngine Applications Manager は、 ア プ リ ケ ー シ ョ ンパ フ ォ ー マ ン ス 管 理（APM） ソ フ ト ウ ェ ア で す。Applications Manager の主な特徴は以下の通りです。

特長 1：多種多様な監視対象ネットワークやサーバー、データベース、Web サーバー、アプリケーションサーバー、プログラムソースコードなど、アプリケーションを構成する幅広いコンポーネントを監視対象にします。

特長 2：障害管理の対応自動化しきい値や、自動で異常ラインを設定する異常値機能でアプリケーションの異常をいち早く検知します。検知後の通知や自動で対処するなどの動作にも対応します。

特長 3：レポート機能監視データを蓄積し、自動で統計データを算出します。手間のかかる定期報告書作成や障害の原因調査の時間短縮に役立ちます。

30日間機能＆監視台数 無制限今すぐ無料でお試しいただけます

Applications Manager

Webアプリ開発改善 LifeHack開 発 現 場 必 見！Webアプリ開発を効率化するポイント2 0 1 9 年 8 月 発 行

お 問 い 合 わ せ 先ゾ ー ホ ー ジ ャ パ ン 株 式 会 社〒 2 2 0 - 0 0 1 2神 奈 川 県 横 浜 市 西 区 み な と み ら い 3 丁 目 6 番 1 号み な と み ら い セ ン タ ー ビ ル 1 3 階W e b : h tt p s : / / w w w. m a n a ge e n g i n e . j p /E - m a i l : j p - m e s a l e s @ zo h o co r p.co m （ 弊 社 営 業 宛 ）

Copyright © 2019 ZOHO Japan Corporation.

ZJMR20197319