4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ServiceNow ナレッジ記事の比較がどれもあと一歩で歯痒い(のでChrome拡張作ってみた)

4
Posted at

まえがき ナレッジ記事のレビューの時に思ったこと

最近何度か記事の変更レビューをすることがあり、「変更前と変更後の記事をいい感じにdiffしたいなぁ」って思ってました。

以前Flow Designerでもこんな記事を書いてるので、なんだろうやっぱり私は変更の確認って「比較」をしっかりしたいという思いが強いのかもしれません。(思いが強いというか、作業の品質保証というか…)

ナレッジ記事に関してはServiceNowの標準機能で諸々比較はできるのですが、どれも「レビューでいい感じに使う導線」からはそれぞれ何かが物足りない感があり、今回はこの気持ちを共感してくれる人がいると嬉しいと思い記事にしました。

あとはおまけで、「あと一歩届かない部分をどうにか形にできないか」ということでナレッジ記事比較のChrome拡張も生成AIで作ってみたので紹介します。(個人的には今後も使うレベルまではどうにかできました)

まずはServiceNow標準でできるいくつかの比較について紹介します。

標準比較方法1 Core UIの「Compare」アクション

まずはこちら。
Compare two versions of an article1

kb_knowledgeの関連リスト「Article Versions」から比較したい記事を2つチェックし、「Compare」で比較できます。
image.png

こんな感じの画面になります。
image.png

うーん、フィールドレベルで見れるんだけど、、、、という感じです。

Article Body欄の右上矢印マークをクリックすると
image.png

Diff画面にはなるんですが、
image.png
HTMLタグも見えるので、わかる人はこれでいいけど、それでも少し見づらいし様々なユーザーに展開しようとするとちょっと厳しいかなという印象です。

レビュー者の立場で導線を考えると、ここのUIがいい感じになってくれたらもうこれでいいなって感じがしています。

標準比較方法2 Workspace UIの「Compare」アクション

続いてはこちらです。WorkspaceUIであれば先ほどのよりもビジュアライズされてDiff表示されることがわかりました。
Compare knowledge article versions in Agent Workspace2

なんとこちらはこんな感じでDiff表示してくれます。
image.png

方法1よりかなり見やすいですね。

...ただ、こちらは私調べでは導線がイケてません。
公式docsの記載はAgent Workspaceなのでここ最近のService Operations Workspaceだからってのもあるかもしれませんが、少なくとも手を加えてないPDI(Zurich)で試したところ、

1)前提として、Incidentにナレッジ記事がAttach(Attach Article)されている
2)IncidentレコードのRelated records>Attached Knowledge>対象ナレッジ記事のレコードを開く
image.png
3)さらにそのナレッジ記事レコードのRelated records>Article Versions>比較対象2レコード選択>Compare
image.png
でようやく辿り着きますw

docsに記載の通りLists > Knowledge > All Articlesから対象のナレッジ記事レコードを開くと、
image.png

Related recordsなどの表示がない記事自体のプレビュー画面になってしまい、どうしてもCompareにたどり着けませんでした。
image.png
※Zurich Patch4 で出たKnowledge Centerのリスト画面も同じ動きでした。

そのため、Workspace UIでCompareボタンにたどり着くには前述の導線しかないのかなー。と思い、レビュー向きではないなぁと。比較画面のUIは良いんだけど。

標準?比較方法 UI BuilderでComparator Componentを使ったページ作成

こちらは標準といえるかは微妙ですが、UI Builderを使ってComparator Componentのページを作る例が以下のコミュニティで紹介されています。
Practical UIB Examples: The Comparator Component3
これを実践すれば良い導線+良いUIを手に入れられるかもしれません。

私はUI Builderに慣れておらず比較表示はコミュニティの手順通りにできたんですが
導線づくりまでは今回至りませんでした。時間があれば再チャレンジしたい...
検証途中のようす↓
image.png
もしこれ使ってできてるよーって方がいたらぜひシェアしてほしいです

ただ、利用者や頻度、タイミングが限られる中でここまでカスタムページなどを仕込むかどうかという観点が出るはずなので、それはそれで別の歯痒さがありますねぇ

おまけ というわけで導線+UIを手に入れたChrome拡張を作って遊びました。

(イメージ)
image.png

標準比較方法1 Core UIの「Compare」アクションで画面を開いてるところまでは導線として良かったので(本文以外のフィールド比較は使えるので)、その画面で拡張機能アイコンを押すと視覚的にDiffのUIがサイドパネルに出る感じで作りました。
アイコンから何やら何まですべて生成AIでの作成です。すげぇなぁ(AIが)
image.png

長い記事とか画像や表が多めの記事で試せていないので、全パターンに対して実用的かといわれるとそうではないかもしれませんが、テキスト比較はわりといい感じになった気がします。
個人的には使いどころに合わせて便利ツールとして使おうと思います。

まだまだ改良の余地がありますが、もし使ってみたい人がいたら使ってください↓
SKPD_Extention

(そんなに使われないだろうけど一応以下お決まり記載)

・本拡張機能は個人開発のため、商用利用を目的としていません。
・ストアでの公開予定もありません
・今後の機能追加・修正・互換性維持などのメンテナンスは未定です。
・ご利用は自己責任でお願いします。利用に起因して発生した不具合・損害・トラブルについて、作者は責任を負いかねます。

とはいえ、個人用途の範囲で気軽に試していただければうれしいです!

まとめ/感想:結局歯痒いままだけど、これに関してはこのままくらいの需要だから機能もないのだろうと思うことにした

導線とUI/UX,どっちも求めるのが難しかったですねぇ。
ただ、物量や頻度によってはツールや機能に頼らず視覚的にタブやウインドウを並べてプレビュー見てもいいと思いますし、何でもかんでもAIや自動化、機能化するのもそれはそれで手段の目的化になるので使い分けが大事!ということを改めて思いました。
すべてServiceNow内にこだわりきらなくても、モノによっては別のツール(今回で言うChrome拡張)も組み合わせて使う、という思考は常に持っておきたいですね。

それでは!

  1. Compare two versions of an article

  2. Compare knowledge article versions in Agent Workspace

  3. Practical UIB Examples: The Comparator Component

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?