Proceedings of the 20th Annual Meeting of Particle Accelerator Society of Japan
August 29 - September 1, 2023, Funabashi

PASJ2023 FRP11

KEK 電子陽電子入射器における Angular を用いたオペレータインターフェースの開発
DEVELOPMENT OF OPERATOR INTERFACE USING ANGULAR IN KEK e-/e+
INJECTOR LINAC工藤拓弥#, A), 草野史郎 A), 佐藤政則 B, C), 佐武いつか B)
Takuya Kudou #, A), Shiro KusanoA), Masanori SatohB), C), Itsuka SatakeB)
A)
Mitsubishi Electric System & Service Co., LtdB)High Energy Accelerator Organization (KEK), Accelerator LaboratoryC)
The Graduate University for Advanced Studies (SOKENDAI), Department of Accelerator ScienceAbstract

The KEK electron/positron injector linac provides the beams of different energies to five independent storage rings.
Operational information such as injection history is recorded in an electronic logbook system. The original electroniclogbook system was developed as Web application using Adobe Flash. However, in 2020, the support of Adobe Flashwas terminated. For this reason, we develop a new user interface using Angular framework instead of Adobe Flash. In
this paper, we present the detailed description and operation status of new operator interfaces developed with Angular.
Adobe Flash Player サポート終了を受けて新たなフレームワークへの移行が急務となった。
入射器では、Adobe Flash に代わるフレームワークとし
KEK 電 子 陽 電 子 入 射 器 （ 以 下 、 入 射 器 ） は 、てAngular に着目した。Angular は Google が中心となっSuperKEKB 電子/陽電子、陽電子ダンピングリング、PF、たコミュニティにより開発されている
Web アプリケーション
PF-AR の異なる 5 つの下流リングに対して、電子およびフレームワークであり、シングルページアプリケーション陽電子ビームを供給している。
これら各リングへのビーム入射履歴、その他詳細な運 （SPA）の開発に適している。SPA は画面偏移をおこなわ
転情報は、1995 年に導入した電子運転ログブックシステ ず必要なデータのみを送受信するため、ネイティブアプムに記録されている。電子運転ログブックシステムは、導 リのように高速に動作するのが特徴である。
入以降も改良を重ね、現在はバックエンドデータベース
Angular を用いたオペレータインターフェー
として PostgreSQL を使用した Web アプリケーションとし 3.
スて運用をおこなっている。Web ブラウザ上で動作するフロントエンド部は、React と並んで代表的な Web アプリ
3.1 電子運転ログブックシステム
ケーションフレームワークとして知られている Angular[1]電子運転ログブックシステムは、データベース部、運を用いて開発した。また、アーカイブシステムのビューア
転情報自動書き込み部、ユーザーインターフェイス（UI）
Web アプリケーションも Angular を用いて開発し運用に部、および運転情報を配信する Web ページ生成部から至っている。
構成されている。本システムは、入射器基幹制御系との本稿では、入射器で運用しているオペレータインターフェースのうち、Angular を用いて開発されたものをいく 親和性を考慮し、Linux 上のアプリケーションソフトウェアとして構築した。データベース部は、オープンソースのリつか報告する。
レーショナルデータベース管理システムである

1.

はじめに

2.

Adobe Flash から Angular への移行

入射器では、2010 年の電子運転ログブックシステムのWeb アプリケーション化[2]以降、Web アプリケーションのフロントエンドに Adobe Flash を多く用いていた。
Flash アプリケーションは、単純な HTML で記述されたページに比べて操作性や表現力に優れており、FlashPlayer が動作する計算機環境であれば OS を問わず動作可能である。また Web アプリケーションであるため、再配布が容易であり、インストールを必要とするネイティブアプリケーションと比べ、運用管理面の煩雑さが格段に減少した。これらのアプリケーションは開発以降、安定した運用を続けていたが、2020 年の主要 Web ブラウザのFigure 1: Diagram of electronic logbook system.

___________________________________________# kudoh@post.kek.jp- 852 -

Proceedings of the 20th Annual Meeting of Particle Accelerator Society of Japan
August 29 - September 1, 2023, Funabashi

PASJ2023 FRP11

PostgreSQL を用いている。PostgreSQL のレプリケーション機能と PostgreSQL 専用のミドルウェアである Pgpool-IIを組み合わせ、Fig. 1 に示すようなデータベースサーバ 3台による冗長構成となっている。データベースサーバとUI 部の通信には、php を用いている。
Angular を用いて開発したアプリケーション画面には、運転日誌の入力/編集、トラブル情報の入力/編集、情報の検索、および添付ファイルのアップロード画面など、計9 つの画面が格納されている。SPA として構築しているため、この画面間の移動には画面遷移は伴わない。これにより、高速な動作を実現している。
Figure 2 に示すように、通常時の表示エリアを可能な限り広く確保するため、項目の入力/編集時は専用のダイアログがポップアップするように実装した。各項目には、画像、動画などのファイルや URL を添付することが可能であり、事象の内容をより正確かつ詳細に記録することが可能である。

いる。CSS Archiver、AA ともに履歴情報のグラフ化ツールが付属しているが、機能性に乏しいため、利用者の利便性を考慮し、アーカイブビューア Web アプリケーションを開発した。本アプリケーションは、記録されているEPICS Process Variable (PV)のキーワード検索、複数 PVの 1 画面へのプロット、読み出した値を演算してのプロット、マウスによる拡大、PV ごとに表示/非表示の切り替えをおこなう機能を有している。最大 10 個の縦軸を利用でき、軸ごとにタイトルの設定、文字の色やサイズの変更、対数表示への変更が可能である。5 個の縦軸を使用した
例を Fig. 3 に示す。また、折れ線グラフに加え、散布図もプロットすることが可能であり、PV 間の相関を容易に確認することができる。データ読み出し期間は、日時指定に加え、相対的な指定も可能となっており、自動更新機能と組み合わせることにより、最新の履歴情報を自動で表示することができる。これにより、機器の状態監視が容易におこなえるようになった。これらの設定は、ファイルに保存することが可能であり、利用者の操作時間の短縮に大いに役立っている。

(a) Main
Figure 3: Screenshot of archive viewer.
3.3 RF コンディショニング状況記録システム
入射器は、長期メンテナンス明けの一定期間は RF コンディショニングをおこなっている。60 台以上に及ぶクライストロンそれぞれの状態を効率よく確認、記録するために、RF コンディショニング状況記録システムを開発した。
本システムは、電子運転ログブックシステムと同様に、データベース部に PostgreSQL、UI 部には Angular を用いている。

(b) Edit dialog
Figure 2: Screenshot of electronic logbook system.
3.2 アーカイブビューア Web アプリケーション
入 射 器 制 御 シ ス テ ム は 、 Experimental Physics andIndustrial Control System (EPICS)を用いて構築されており、機器履歴記録システムとして、2004 年に Spallation
Neutron Source で開発された EPICS ツールのひとつである Channel Archiver を導入した。Channel Archiver 開発終了を受け、2011 年に CSS Archiver[3]、2019 年にArchiver Appliance (AA)を導入し、運用[4]をおこなって- 853 -Figure 4: Screenshot of RF conditioning info editor.

Proceedings of the 20th Annual Meeting of Particle Accelerator Society of Japan
August 29 - September 1, 2023, Funabashi

PASJ2023 FRP11

本システムは、自動更新される現在のクライストロン設
定電圧値、UI 部から手入力をおこなうコンディショニング
目標値、各作業実施日などの項目を管理する。現在の設定電圧値が目標値に到達すると該当するクライストロンの背景色が変わるため、進捗状況を把握しやすい。また、機器の状況により目標値が変更になることがあるた
め、変更になった理由なども併せて管理している。
Figure 4 に示すように、項目の入力/編集時は専用のダイアログがポップアップするようになっている。
3.4 電磁石情報管理用 Web アプリケーション
入射器では、約 600 台の電磁石が運転に使用されており、これらの情報は単純なテキストファイルを用いたデータベースで管理していた。本データベースは情報更新の作業性が良いとはいいがたく、更新時の操作ミスにも気がつきにくい。そのため、2022 年にリレーショナルデータベースを基盤とした Web アプリケーションを開発し、運用を開始した[5]。
本システムは、電子運転ログブックシステムと同様、データベース部に PostgreSQL、UI 部には Angular を用いている。本システムへのアクセスは、ユーザー名、パスワードにより制限されており、ユーザーごとに閲覧のみ可能、あるいは閲覧編集共に可能か、などの属性を設定可能としている。ユーザー管理には、入射器で既に運用をおこなっている LDAP を用いた。ユーザー認証後、最初に表示されるメインページのスクリーンショットを Fig. 5 に示す。

がら、手動で更新するため、記載間違いや記入漏れのおそれがあった。そこで、本システムでは、情報更新履歴を簡便に把握するための機能も備えるこ ととし た。
Figure 6 に、情報更新履歴ページのスクリーンショットを示す。この機能により、更新履歴が自動的に記録されるため、履歴情報の正確さの向上と作業者の負荷軽減が実現できた。

Figure 6: Changelog page screenshot
information management system.

4.

ofmagnet

まとめ

KEK 入射器では、電子運転ログブックシステムなどオペレータインターフェース部に Adobe Flash を用いたWeb アプリケーションを開発し、安定した運用をおこなっていた。しかしながら、2020 年に主要な Web ブラウザのAdobe Flash Player サポートが終了となったことを受けて、新たなフレームワークへの移行が急務となった。そこで入射器では、 Google が中心となったコミュニティにより開発されている Web アプリケーションフレームワークである Angular を用いて、運用していた Web アプリケーションのリプレース、および新規開発をおこなった。これらのアプリケーションは安定した運用を続けている。今後も改良、新規開発を続け、安定したビーム運転に寄与していきたい。

参考文献[1] Angular; https://angular.jp/[2] T. Kudou et al., “Upgrade of Electronic Logbook System atKEK Injector Linac ” , Proceedings of the 8th Annual
Meeting of Particle Accelerator Society of Japan, Tsukuba,
本システムでは、電磁石ごとに対応する電磁石電源、Aug. 1-3, 2011.
励磁曲線の近似多項式係数など約 100 種類のデータを [3] T. Kudou et al., “Status of Data Archive System at KEK管理する。Web ブラウザ上に表示する項目は、ユーザー
Injector Linac”, Proceedings of the 9th Annual Meeting ofParticle Accelerator Society of Japan, Osaka, Aug. 8-10,
側で自由に取捨選択ができ、複数のキーワードを任意2012.に組み合わせたフィルタリングによるデータ抽出も可能[4] I. Satake et al., “Introduction of Archiver Appliance in KEKである。これらのデータ操作方法として Web ブラウザ上
electron positron injector linac”, Proc. 16th Annual Meetingでの直接編集、追加、削除の操作に加え、csv ファイル
of Particle Accelerator Society of Japan (PASJ2019), Kyoto,形式でのインポート、エクスポート機能も実装した。これJapan, Jul.-Aug. 2019.
により、大量のデータを一括更新する際の操作時間の短 [5] M. Satoh et al., “Magnet information management system
based on web application for the KEK e-/e+ injector linac”,縮化を実現できた。
Proc. 19th Annual Meeting of Particle Accelerator Society of
以前使用していたテキストベースのデータベースでは、Japan (PASJ2022), Kitakyusyu (Online meeting), Japan, Oct.
更新履歴をファイルのヘッダ部に記述していた。しかしな
2022.

Figure 5: Main page screenshot of magnet informationmanagement system.

- 854 -