こんにちは。ServiceNowでトレーナーを勤めている井澤です。アプリケーション開発に関連するトレーニングを担当しています。本ブログでは、アプリケーション開発系のトレーニングで扱う内容について、そのエッセンスを紹介していきたいと思います。

ServiceNow上のアプリケーション開発について、またトレーニングの内容についてイメージを持ってもらえるように、Now Platformの各種機能を使って、簡単なアプリケーションを作っていきます。毎回、いくつかの開発ツールやプラットフォームの機能に触れながら、少しずつ機能を付け足していくつもりです。

1. 今回開発するもの:サービスポータル

今回は、以前の記事で作成したテーブルのデータを表示するサービスポータルを作成します。

以前の記事:

(1) StudioとGuided Application Creatorでテーブルとフォームを作成する

(2) テーブルのレコードを作成するための画面をレコードプロデューサーで開発する

サービスポータルは、ServiceNowインスタンスにいわゆる「ポータルサイト」のような見かけを”かぶせる”機能です。これにより、企業内のITシステムの画面構成などに不慣れな方に対して、日常で使用しているWebサイトと同じような見せ方ができます。また、レスポンシブデザインに対応するCSSフレームワーク”Bootstrap”を採用しているので、スマートフォンやタブレットなどのモバイルデバイスでの表示も最適化されます。広い範囲のユーザーが使えるServiceNowを作るのに役立ちます。

下は、開発者インスタンスにあらかじめインストールされているポータルの、トップページを表示した様子です。

開発者インスタンスのURLの、ホスト名の後ろに”/sp”と付けると、サンプルのサービスポータルにアクセスできます。

（参考）サービスポータルの詳細は、こちらの製品ドキュメントをご覧ください。

https://docs.servicenow.com/bundle/orlando-servicenow-platform/page/build/service-portal/concept/c_S...

ServiceNowにおけるポータルは、およそ以下の要素で出来ています。

ポータルは、ServiceNowインスタンス内に作成されるWebサイトです。一つのインスタンスに複数のポータルを作成することもできます。

ページは、ポータルの中に配置する一つのWebページです。一つのポータルは、一つ以上のページを含みます。

ページの中に配置して、特定のテーブルのデータを表示したり、サービスカタログやナレッジベースへのアクセス手段を提供したりする要素が、ウィジェットです。

これらの他に、画面全体のデザインを決めるテーマや、ページのヘッダ部分に配置するメニューなどもありますが、今回は上の三つを扱います。

以下では、最初にポータルを作成します。次にページを作成して、作成したポータルに関連付けます。ページには、ServiceNowがあらかじめ用意しているウィジェットを配置し、設定を行って、My Logテーブルのデータを表示させます。

2. 作成の手順

• ポータルを作成します。ここで、サイトのURLを決めます。また、画面全体のイメージを決めるテーマを設定します。
• ページを作成します。ウィジェットを配置するためのレイアウトを決めます。
• ウィジェットをページに配置し、設定を行います。
• ウィジェットを配置して作成したページを、最初に作成したポータルのデフォルトのページに設定します。
• ポータルのURLにアクセスし、ページとウィジェットが表示されることを確認します。

3. ポータルの作成

この後、サービスポータルの３つの要素を作成していきますが、開発のために利用するツールへのアクセスは一か所にまとまっています。

アプリケーションナビゲータから Service Portal > Service Portal Configurationモジュールをクリックすると、ブラウザの別のタブが表示されます。

このページから、各ツールを起動します。

インスタンスのURLのホスト名の後ろに、”/sp_config”と付けてアクセスしても、同じページが表示されます。

表示されている各ツールは、それぞれ次の機能を持ちます。

• Branding Editor : 画面の色合いや、使用している文字のフォントなどの指定ができます。
• Designer: ページの作成・編集ができます。
• Page Editor: ページの要素のツリー構造を表示して、細かな設定ができます。
• Widget Editor: ウィジェットの開発・編集ができます。
• New Portal: ポータルを新規作成します。
• Get Help: ヘルプページを表示します。

では、”New Portal”をクリックして、新しいポータルを作ってみましょう。フォームが表示されるので、

タイトルに”My Log Portal”、URL suffixにmylogと入力します。最後に画面最下部に表示されているSaveボタンを押して、保存します。

この操作で気付いた方もいるかもしれません。ポータルは、Portalテーブル[sp_portal]のレコードです。

たったこれだけで、https://[インスタンスのURL]/mylogでアクセスできるポータルサイトが出来上がります。

ただし、表示しているページは、ポータル機能全体に適用されるデフォルトページです。今回は、My Logアプリケーションの一環として、My Logテーブルの内容を表示するページを作りたいので、以後の手順で新規にページを作成し、ウィジェットを配置した後、その作成したページが表示されるように、ポータルの設定を変更することにします。

4. ページの作成

/sp_configのページに戻ってDesignerタイルをクリックするか、ヘッダ部分の”Designer”メニューをクリックして、Page Designerを表示します。ブラウザの別のタブが開き、Designerが表示されます。

画面上のポータル名（下の図では”sp”という表示の部分）をクリックして、ポータルを選択します。

先ほど作成した”My Log Portal”を選択します。

My Log Portalが選択されたことを確認した上で、”Add a new Page”リンクをクリックし、新しいページの作成をはじめます。

名前とIDを命名して、Submitボタンを押して次に進みます。

ページが作成されました。作成したページには、最初は何も含まれていません。そこで、まず、ページにウィジェットを配置するためのレイアウトを作成します。

Page Designerで、コンテナの青いボタンをクリックし、表示されるメニューから「12」というボタンをクリックします。

この操作により、新規ページに一つコンテナを配置し、そのコンテナに横に12単位を並べた１つのレイアウトのための「行」を作ったことになります。

サービスポータルでは、画面要素のレイアウトにBootstrapというCSSフレームワークを使っています。Bootstrapは画面を横に12個（列）に区切って扱います。Bootstrapの詳細は次のページ（※Bootstrapのプロジェクトページ）を参照してください。

（参考）Bootstrap https://getbootstrap.com/docs/3.3/

5. ウィジェットの配置

続いて、ページにウィジェットを配置します。Simple Listというウィジェットを使うと、指定したテーブルのレコードを一覧できます。

Page Designerの画面左にある検索窓に、”Simple”と入力します。検索窓の下に”Simple”で名前が始まるウィジェットがリストされます。Simple Listを選び、画面右の行を配置したコンテナにドラッグ＆ドロップします。

ウィジェットが配置されましたが、まだテーブルを選択するなどの設定をしていないので、このままでは表示されません。

“Simple List”ウィジェットのオプション設定を行うため、画面右上にある鉛筆アイコンをクリックします（※このとき、コンテナや行ではなく、間違いなくウィジェットをクリックして選択しておくようにしてください。コンテナが選択された状態だと、ウィジェットのオプションではなく、コンテナのオプションを設定するウィンドウが開いてしまいます。ウィジェットのオプションではないウィンドウが開いてしまったら、ポップアップウィンドウの外をクリックして閉じ、選び直してください）。

テーブル名にMy Logテーブルを、DisplayfieldにLogTextを、Secondary fieldに”Created”(sys_created_on)を選択します。

ポップアップしたウィンドウの一番下にあるSaveボタンで保存します。

画面がPage Designerに戻ると、Simple ListウィジェットにMy Logテーブルのデータが表示されていることが分かります。

画面上部中央の”Preview”リンクをクリックすると、このページをブラウザで表示したらどうなるか、プレビューすることができます。

このプレビュー画面の右上のアイコンを選択することで、デバイスごと（スマートフォン、タブレット、PC）の画面サイズでそれぞれどのように表示されるか確認することができます。

Bootstrapが適切にレイアウトしてくれます。今回は、1行全体に１つのウィジェットを配置する単純なレイアウトですが、もっと複雑なレイアウトをした場合には、この自動調整の機能が役に立ちます。

画面上部中央の”Edit”リンクで編集画面に戻ります。ここまでで、ページの作成・レイアウトの作成・ウィジェットの配置・設定を終えたことになります。

6. ページをポータルに設定

最後に、作成したページ（My Log Index）を、My Logポータルのホームページに設定して、ポータルを開くとデフォルトでこのページが表示されるようにしましょう。

画面右上の”Portal”ボタンを押すと、

Portalレコードを編集するフォームが表示されます。

Homepageフィールドの値を、先に作成したページのID”my_log_index”に指定します。Saveして終了です。

7. 表示の確認

ブラウザで、別にタブを開き、次のURLを指定します。

https://[インスタンスのURL]/mylog

My Logsという表が表示されたら完了です。

8. まとめ

今回は、サービスポータルを作成し、ウィジェットを配置したページを用意しました。既存のウィジェットを利用して、設定を行い、テーブルのデータを簡単に一覧表示しました。

9. トレーニングの紹介

今回取り上げた、「サービスポータルの作成」は、ServiceNowのトレーニング

『Service Portal Fundamentals』

https://www.servicenow.co.jp/services/training-and-certification/service-portal.html

で詳しく紹介しています。サービスポータル開発に興味のある方は、トレーニングの受講をご検討ください。

また、トレーニングの予定や、申し込み方法については、次のページをご覧ください。

ServiceNow Japan: 認定トレーニング＆認定資格

https://www.servicenow.co.jp/services/training-and-certification/general.html