こんにちは。BBSakura Networks株式会社の神山です。私は現在、OCX開発チームのフロントエンドエンジニアとして、弊社が注力しているサービスであるOCX（Open Connectivity eXchange）のポータルサイト開発を担当しております。
今回は、私たちが開発しているOCXの簡単なご紹介と、最近リリースされた「Internet Connection」について、UI開発の目線も少し交えて投稿させていただこうと思います。
OCX（Open Connectivity eXchange）とは？
まずはじめに、このブログでは過去にOCXに関して述べた記事があまりなさそうでしたので、改めて簡単にご紹介したいと思います。
弊社では、OCX（Open Connectivity eXchange） というクラウド型ネットワークサービスを開発しております。昨年2022年5月に正式リリースし、１年ほどが経過しました。
OCXは、法人のお客様向けにデータセンターやクラウドサービス、インターネットなど、ありとあらゆるネットワーク間を誰でも簡単に接続出来る基盤を目指して開発されました。お客様専用のポータル画面で、高セキュリティ、低遅延かつ拡張性のある接続サービスをオンデマンドに提供しています。これにより、お客様側でのネットワーク機器の購入や維持管理の必要がなくなるため、購入コストや維持管理コストを削減することができます。
このOCXポータルサイトのUI開発においてはTypeScriptとNext.jsを用いており、CSSフレームワークとしてTailwind CSSを使用しています。
「Internet Connection」について
このようなOCXの新たなリソースメニューとして、「Internet Connection」を2023年5月にリリースしました。これは、OCXネットワーク網を介してインターネット接続を行う機能です。お客様側でデータセンターなどにインターネット回線をご用意いただく必要なく、簡単にインターネット接続を行うことができます。
「Internet Connection」のUI開発にあたっては、Next.js 13.4で安定版となったApp Router方式を採用して実装を行なっています。これは以前からのPages Router方式とは異なり、ディレクトリ構造と実際のURLのパスが対応していることもあり開発がしやすくなっていると感じています。とはいえ実装では複雑なことはしていません。ユーザエクスペリエンスの観点から、シンプルで使いやすい画面操作を実現することを目指しています。
Internet Connectionリソース作成時の入力項目は１つだけです。リソース名として任意の名前を入力すればリソースを作成できます。あとはVirtual Circuit(VC)と呼ばれる仮想L2スイッチにアタッチすれば、同じVCに接続された他リソースをインターネットに接続できます。詳しい操作方法などは、OCXのInternet Connectionに関するドキュメントサイトをご覧いただければと思います。
現在は、従来の実装はPages Router方式、新実装はApp Router方式と共存させていますが、今後は新実装に統一していく予定です。新方式採用にあたっての苦労や戦略については別の機会に紹介できたらと思います。
最後に
今回は、OCXと「Internet Connection」についてご紹介しました。そんな私も、BBSakura NetworksのOCX開発チームにジョインしたのはちょうど１年ほど前になります。それまでは、このようなフロントエンド開発にはまったく携わっていませんでしたが、そのような私でも、今こうしてフロントエンドエンジニアとしてなんとかやれているのは、周りの方々の多くのサポートがあってこそだなと感じています。
BBSakura Networks株式会社では、このようなUI開発に携わるフロントエンドエンジニアの方を募集しております。またバックエンドエンジニアの方々も随時募集しておりますので、インターネットやネットワーク技術にご興味をお持ちの方がいらっしゃいましたら、お気軽にお問い合わせいただければと思います。
