NRIネットコム Blog

NRIネットコム社員が様々な視点で、日々の気づきやナレッジを発信するメディアです

トップ > Technology > ServiceNowでアプリ開発を体験してみた

ServiceNowでアプリ開発を体験してみた

Technology ServiceNow ローコード エディタウィーク

本記事は  エディタウィーク  3日目の記事です。
👩‍🏫  2日目  ▶▶ 本記事  ▶▶  4日目   👨‍🏫

はじめに

こんにちは！アプリ開発エンジニア2年目の桑野です。 今回は、新しく参画したプロジェクトで初めてServiceNowを使うことになった私が、エディタやIDEとしての機能ももつServiceNowというプラットフォームについて、実際の経験をもとにその魅力を初心者にも分かりやすくご紹介します。 本記事では、シンプルなTODOアプリの作成を通じて、ServiceNowの使いやすさや便利な機能をお伝えします。

ServiceNowとは？

ServiceNow（サービスナウ） は、社内の申請や承認対応などの日々の業務フローを効率化・自動化するためのプラットフォームです。

もともとはITサービスマネジメント（ITSM）ツールとして有名ですが、今では人事や総務、開発など多くの部門で使えるようになっています。

主な機能として、GUI操作で簡単・高速にアプリケーションを作成できるApp Engine Studioや、IDEに似たインターフェース上でアプリケーションをカスタマイズできるServiceNow Studioがあります。

今回はこの二つの機能を駆使して、効率的にアプリを開発していきます。

TODOアプリ作成手順

まずはApp Engine Studioで一気に簡単にアプリケーションを作成していきます。

💡App Engine Studioを使用する事で、データベースからUIまでを一貫して高速で作成する事が可能です。

1: 新規アプリケーションの作成

前提として、開発者向けのアカウントをお持ちでいない方は、こちらの記事を参考にアカウントを作成し、PDIを作成する必要があります。

※ PDI（Personal Developer Instance） とは、開発者向けに無償で提供されている、ServiceNowの個人専用開発環境です。自分専用のインスタンスとして利用でき、アプリ開発や機能検証を自由に行うことができます。

  1. App Engine Studioから、アプリを作成します。

2: データベースの作成

1.ダッシュボードのDataから、空のデータベースを新規作成します。

2.　以下のフィールドを追加します：

  • Title（String）: タスクのタイトル
  • Description（String）: タスクの詳細説明
  • Due Date（Date）: 期限
  • Status（Choice）: open/in_progress/done

💡ServiceNowの機能を使用すれば、これらのフィールド定義をGUIで直感的に行う事ができ、データベースのSQLを書く必要がありません。

3: UIの作成

次に、ユーザーインターフェースを作成します。

  1. Experienceから、作成したテーブルを選択します。
  2. ドラッグ＆ドロップでフォームを好きなレイアウトに配置します。

テーブルの追加画面にアクセスすると実際のレイアウトを確認する事ができます。

また、実際に値を入力しSubmitするとテーブルにタスクが追加されます。

このように、App Engine Studioを使用してデータベース作成からUIの編集までを、効率的に行う事が出来ました。

4: クライアントスクリプトを設定

ServiceNowではクライアントスクリプトを設定する事ができます。

💡クライアントスクリプトには、onLoad、onChange、onSubmit、onCellEditの４つのタイプが存在します。それぞれの動作に応じてタイプを使い分ける事で動作のタイミングに応じてスクリプトを実行できます。

今回は、フォームの値に基づいてバリデーションを追加するスクリプトを追加します。

  1. ServiceNow StudioからNew Fileを選択します。
  2. Client Scriptを選択します。
    • 作成したテーブルを選択します。
    • TypeはonChangeを選択します。
    • スクリプトに以下のコードを記述し、Updateします。
function onChange(control, oldValue, newValue, isLoading) {
    var today = new Date();
    today.setHours(0, 0, 0, 0);

    var selectedDate = new Date(newValue);
    selectedDate.setHours(0, 0, 0, 0);

    if (selectedDate < today) {
        g_form.showFieldMsg('due_date', 'Invalid Date', 'error');
    } else {
        g_form.hideFieldMsg('due_date');
    }
}

💡g_form はServiceNowでフォームの操作を行うためのAPIであり、フィールドのメッセージ表示や非表示、値の設定などを行う際によく使用されます。

過去の日付を選択し、以下のバリデーションが出現する事を確認します。

このように、ServiceNowのクライアントスクリプトでは、イベントリスナーの登録やDOMの取得といった煩雑な処理を書く必要がなく、最小限の実装で必要な動作を簡単に実現できます。

このような手順で、簡単にバリデーション付きのTODOアプリを作成することができました。

データベースの作成からUI操作、スクリプトによる制御まで、ServiceNowのエディタを通じて一貫して実装できたことで、非常にスムーズに開発を進めることができました。

まとめ：開発者目線で実感したServiceNowのエディタの使いやすさ

今回のTODOアプリ開発を通じて、ServiceNowのエディタ環境は、開発者にとって非常に効率的にアプリ開発を進められるツールだと実感しました。

App Engine Studioを使えば、直感的な操作でUIやデータベースの構成を設計でき、ローコード開発の強みを活かして初学者でもすぐにアプリの形を作ることができます。

また、ServiceNow StudioなどのIDEを併用すれば、スクリプトによって動作の細かな制御や条件分岐を加えることができ、業務要件に合わせた柔軟なカスタマイズが可能です。

このように、ServiceNowではGUIベースのローコード開発とスクリプトによる拡張性の両立ができるため、開発経験の有無にかかわらず、段階的にスキルアップしながらアプリを育てていける点が大きな魅力だと感じました。

これからServiceNowに触れる方にとっても、学習コンテンツやチュートリアルが用意されているため、初学者の方でも安心して開発に取り組めるツールだと思います。

興味のある方は、ぜひ一度PDIで実際に手を動かしてみてください(^.^)/~~~

参考リンク

執筆者：桑野　新人エンジニア