カテゴリー: 技術者ブログ

投稿日:

Tech Blog: About Outsystems Developer Cloud

As a technical blog, I would like to introduce the learning content that I am working on on a daily basis.

This time, it is the second unit, which is themed on low-code development.

Theme of this time: “About Outsystems Developer Cloud”
We, the second unit, are currently conducting low-code development using OutSystems 11, and in this blog we introduce the development method and other aspects.
This time, we will introduce “OutSystems Developer Cloud”, which was released in Japan by OutSystems in April 2023.

What is an Outsystems Developer Cloud？

Outsystems Developer Cloud (hereinafter referred to as ODC) is a cloud-native (created to run on the cloud) low-code application development platform provided by OutSystems.

It is based on the native cloud service of Amazon Web Service (AWS) and supports Kubernetes, Linux containers, microservices, etc.

Technologies used in ODC

As a cloud-native platform, ODC uses technologies to provide benefits such as agility, availability, and fault tolerance, and is used to support the above services. Here are some of those technologies.

Microservices
Microservices is a technique for building one large application by combining multiple independent small services through communication via APIs and web services. Since the correlation between individual functions is low, failures or increased load in one function are less likely to affect other functions. In addition, since changes and expansions of functions can be made only to the target service, agility in changes and expansions is high.
However, since it is more difficult to maintain consistency as a whole system than creating a single application, attention must be paid to the design of the whole system, data management, and API management.

Containerization
Containerization is a technology in virtualization technology that combines the elements required to run in any computing environment (from the execution environment to the application) into one package. It enables rapid development without having to worry about the underlying environment.

Autoscaling
Autoscaling is a function that monitors the CPU and RAM usage of each application and automatically increases or decreases the capacity of the application according to the load. Autoscaling allows the build service and other services to be used simultaneously without degrading the performance of the platform.

Advantages of ODC


Usually, building a cloud-native application platform requires huge costs and time. With ODC, OutSystems handles the tedious work involved in building it, so you can introduce cloud-native services with less effort than building it from scratch.

Although there are some differences from OutSystems’ existing low-code development platform, OutSystems 11, there are no major differences in basic functions.

With ODC, you can design, develop, and deploy by taking advantage of the high productivity of OutSystems 11 and the advantages of cloud-native services.

Currently, ODC does not have a free trial that you can immediately install like Outsystems 11, but UI images of the development screen are posted on the Outsystems website.

If you have not tried Outsystems products, try installing a trial of Outsystems 11 first and compare it with the ODC screen.

About the trial installation of Outsystems 11:
Engineer blog: Introducing Outsystems and creating sample screens – dandelionS Blog
About the ODC UI:
UI overview of ODC Portal and ODC Studio – ODC Documentation (outsystems.com)

Summary

This time, we introduced “Outsystems Developer Cloud”.
Our company is currently using OutSystems 11, so in the future I would like to delve deeper into the differences between OutSystems 11 and ODC, how to use them for development purposes, and what to do if you want to migrate to ODC!

In the second unit, we will continue to publish blogs for engineers using low-code tools such as OutSystems, so stay tuned.

投稿日:

技術者ブログ：Outsystems Developer Cloudについて

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、ローコード開発をテーマにしている第２ユニットです。

今回のテーマ：『Outsystems Developer Cloudについて』

私たち第２ユニットは、現在OutSystems 11を使用したローコード開発を行っており、ブログではその開発方法などをご紹介しています。（前回の第２ユニット技術者ブログはこちら）
今回は、OutSystemsから2023年4月より日本国内リリースされている『OutSystems Developer Cloud』についてご紹介します。

Outsystems Developer Cloudとは？

Outsystems Developer Cloud(以下、ODCと表記)とは、OutSystemsが提供するクラウドネイティブの(クラウド上で稼働することを前提に作成されている)ローコードアプリケーション開発プラットフォームです。
Amazon Web Service(AWS)のネイティブクラウドサービスを基盤としており、Kubernetes、Linuxコンテナ、マイクロサービスなどをサポートします。

ODCで使用されている技術

ODCはクラウドネイティブプラットフォームとして、俊敏性や可用性、耐障害性などのメリットを発揮するための技術が、上記サービスのサポートなどによって使用されています。その技術の一部をご紹介します。

マイクロサービス

マイクロサービスとは、複数の独立した小さなサービスをAPIやwebサービスを介して通信することで組み合わせ、一つの大きなアプリケーションを構築する手法のことです。個々の機能の関連性が低くなるので、ある機能での障害や負荷増大が他の機能に及びにくくなります。また、機能の変更や拡張も対象のサービスにのみ行うことが可能なので、変更・拡張における俊敏性が高くなります。
しかし、一つのアプリケーションで作成するよりもシステム全体としての一貫性を保つことが難しくなるため、システム全体の設計やデータの管理、APIの管理に注意する必要があります。

コンテナ化

コンテナ化とは、仮想化技術において、あらゆるコンピューティング環境で実行するために必要な要素(実行環境からアプリケーションまで)を一つのパッケージにまとめる技術のことです。基盤の環境を気にする必要がなく、迅速な開発を可能にします。

オートスケーリング

オートスケーリングは、各アプリケーションのCPUやRAMの使用状況を監視し、負荷に従ってアプリケーションの容量を自動的に増減させる機能です。オートスケーリングによって、プラットフォームのパフォーマンスを低下させることなく、ビルドサービスやその他のサービスを同時に使用できます。

ODCのメリット

通常、クラウドネイティブのアプリケーションプラットフォーム構築には、膨大な費用と時間を必要とします。ODCでは構築に係る面倒な作業はOutSystems側で実施するので、0から構築するよりも手間をかけずにクラウドネイティブサービスを導入することができます。
また、OutSystemsの既存ローコード開発プラットフォーム『OutSystems 11』といくつか違いはありますが、基本的な機能については大きな差はありません。
ODCでは、OutSystems 11の生産性の高さとクラウドネイティブサービスの利点を活かした設計、開発、デプロイなどが可能です。

現在、ODCにはOutsystems11のようにすぐに導入できる無償トライアルはありませんが、開発画面のUIイメージなどはOutsystems webサイトに掲載されています。
Outsystems製品を試したことがない方は、まずはOutsystems11のトライアルを導入してみてODCの画面と見比べてみてください。

Outsystems11のトライアル導入について：
技術者ブログ：Outsystems導入とサンプル画面作成の紹介 – dandelionS Blog
ODCのUIについて：
UI overview of ODC Portal and ODC Studio – ODC Documentation (outsystems.com)

まとめ

今回は『Outsystems Developer Cloud』についてご紹介しました。
当社では現在OutSystems 11を使用しているので、今後はOutSystems 11とODCの違いや開発目的における使い分け、もしODCに移行したいとなった時の方法について深堀できればと思います！

第2ユニットではこれからもOutSystemsなどのローコードツールを使った技術者ブログを展開していきますのでお楽しみに。

投稿日:

Tech Blog: ChatGPT-4o: OpenAI Unleashes New Possibilities for Innovative Conversational AI

As a technical blog, I would like to introduce the learning content that I am working on on a daily basis. This is the first unit on the theme of AI and big data. The theme this time is OpenAI’s latest model, ChatGPT-4o. For each section, we will have ChatGPT4o create images and image descriptions.

In the world of artificial intelligence, OpenAI has always been at the forefront of innovative advancements, especially in the field of large-scale language models (LLMs). The newly announced ChatGPT-4o represents a breakthrough in the field of conversational AI, introducing various enhancements that allow users to interact with language in unprecedented ways.

Unlocking the Power of ChatGPT-4o
ChatGPT-4o builds on the foundations of its predecessor, ChatGPT, and introduces a set of sophisticated features that take its capabilities to new heights. Let’s take a closer look at the key features that set ChatGPT-4o apart.

  1. Enhanced Speed ​​and Efficiency:

ChatGPT-4o runs twice as fast as its predecessor while cutting computational costs in half. This incredible efficiency translates into a smoother and more responsive user experience, especially when conducting complex tasks or long conversations.

  1. Expanded Message Limits:

Free users of ChatGPT-4o now have a 5x increase in message allowance, allowing them to interact with the model for extended periods of time without restrictions and explore its full potential. This answers the growing demand to freely explore language capabilities.

  1. Multilingual Mastery:

ChatGPT-4o transcends language boundaries, enabling seamless conversations across multiple languages. This multilingual capability allows users to engage in meaningful interactions with audiences around the world, fostering intercultural understanding and cooperation.

  1. Multimodal Integration:

ChatGPT-4o seamlessly integrates text, audio, and visual data for a more comprehensive and immersive conversational experience. This multimodal capability opens new avenues for creative expression, knowledge exploration, and interactive storytelling.

Explore the applications of ChatGPT-4o
ChatGPT-4o’s enhanced features empower users across a range of sectors to explore its potential.

  1. Content Creation:

ChatGPT-4o can be a powerful tool for content creators, generating a variety of creative text formats, translating languages ​​accurately, and creating engaging content that resonates with audiences.

  1. Education and Learning:

In the education sector, ChatGPT-4o innovates the learning experience by providing personalized instruction, answering questions in an informative manner, and generating summaries of complex topics. This personalized approach caters to individual learning styles and promotes deeper understanding.

  1. Business Solutions:

Businesses can leverage ChatGPT-4o in a variety of ways to enhance their operations. From developing customer service chatbots that provide 24/7 support to conducting market research analysis and generating compelling marketing copy, ChatGPT-4o streamlines business processes and drives growth.

Conclusion: A Look into the Future of Conversational AI
ChatGPT-4o marks an important milestone in the evolution of conversational AI, offering a glimpse into a future where humans and machines can interact with unprecedented levels of understanding and nuance. Its enhanced speed, expanded features, and multilingual capabilities will make ChatGPT-4o a valuable tool for individuals and organizations across sectors. As ChatGPT-4o continues to evolve, we expect to see even more groundbreaking applications emerge, transforming the way we communicate, learn, and create.

投稿日:

技術者ブログ：ChatGPT-4o：OpenAIが放つ革新的な会話型AIの新たな可能性

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。今回はAI、ビッグデータをテーマにしている第1ユニットです。 今回のテーマはOpenAIの最新モデル、ChatGPT-4oについて説明させていただきます。セクションごとにChatGPT4oに画像と画像の説明を作成させてみます。

人工知能の世界において、OpenAIは常に革新的な進歩の最前線に立っており、特に大規模言語モデル（LLM）の分野においては目覚ましい成果を上げてきました。今回発表されたChatGPT-4oは、会話型AIの分野における飛躍的な進歩を意味しており、ユーザーが言語と前例のない方法で対話できるよう、様々な機能強化を導入しています。


ChatGPT-4oの力強さを解き明かす
ChatGPT-4oは、前モデルであるChatGPTの基盤の上に構築されており、その能力を新たな高みに引き上げる一連の洗練された機能を導入しています。ChatGPT-4oを際立たせる主要な機能について詳しく見ていきましょう。

1. 強化された速度と効率性:

ChatGPT-4oは、前モデルの2倍の速度で動作し、同時に計算コストを半分に削減します。この驚異的な効率性は、特に複雑なタスクや長時間の会話を行う際に、よりスムーズで応答性の高いユーザー体験を実現します。

2. メッセージ制限の拡大:

ChatGPT-4oの無料ユーザーは、メッセージ許容量が5倍に増加し、制限なく長時間モデルと対話して、その完全な可能性を探求できるようになりました。これは、言語能力を自由に探求したいという高まる需要に応えます。

3. 多言語マスター:

ChatGPT-4oは言語の境界を超え、複数の言語間でシームレスな会話を可能にします。この多言語能力により、ユーザーは世界中の視聴者と有意義な交流を行うことができ、異文化理解と協力を促進します。

4. マルチモーダル統合:

ChatGPT-4oは、テキスト、音声、視覚データをシームレスに統合し、より包括的で没入感のある会話体験を実現します。このマルチモーダル機能は、創造的な表現、知識探求、インタラクティブなストーリーテリングのための新たな道を開きます。


ChatGPT-4oの応用例を探る
ChatGPT-4oの強化された機能は、様々な分野のユーザーがその可能性を探求する力を与えます。

1. コンテンツ作成:

ChatGPT-4oはコンテンツ制作者にとって強力なツールとなり、様々なクリエイティブなテキスト形式を生成し、言語を正確に翻訳し、視聴者に響く魅力的なコンテンツを作成することができます。

2. 教育と学習:

教育分野では、ChatGPT-4oは個別指導を提供し、質問に情報提供的な方法で答え、複雑なトピックのサマリーを生成することで、学習体験を革新します。この個別化されたアプローチは、個々の学習スタイルに対応し、より深い理解を促進します。

3. ビジネスソリューション:

企業は、ChatGPT-4oを様々な方法で活用して業務を強化することができます。24時間365日サポートを提供する顧客サービスチャットボットの開発から、市場調査分析の実施、説得力のあるマーケティングコピーの生成まで、ChatGPT-4oはビジネスプロセスを合理化し、成長を促進します。

結論：会話型AIの未来への展望
ChatGPT-4oは、会話型AIの進化における重要なマイルストーンであり、人間と機械がかつてないレベルの理解とニュアンスで対話できる未来への展望を示しています。強化された速度、拡張された機能、多言語能力により、ChatGPT-4oは、様々な分野の個人や組織にとって貴重なツールとなります。ChatGPT-4oの進化が進むにつれて、さらに画期的なアプリケーションが登場し、コミュニケーション、学習、創造のあり方を変革していくことでしょう。

投稿日:

Google Maps Platformで地図を出してみた

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
本記事ではGoogle Maps Platformを使ってみたので紹介していきます。

Google Maps Platformとは

Google Maps Platformを使用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。
Google Maps Platformの詳細は公式ページで紹介されています。
https://mapsplatform.google.com

事前準備

Google Maps Platformを使うためには事前に、Googleアカウントを作成し支払いの設定をしておく必要があります。
支払いの設定はGoogle Cloudから設定することができます。
https://cloud.google.com/

APIキー取得

Google Maps APIを使用するには、APIキーを取得を取得しておく必要があります。
APIキーの取得は「有効なAPIとサービス」から行います。

「Maps JavaScript API」を選択します。

「鍵と認証情報」APIキーからAPIキーを取得することができます。

MAPの表示

地図の表示

APIは「Dynamic Library Import」、「NPM js-api-loader パッケージ」の方法で利用することができます。
利用方法の詳細は公式のガイド参照してください
Maps JavaScript API を読み込む


下記は地図を出すサンプルソースです。

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    http://js/map.js
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "{APIキー}", v: "beta"});</script>
        
    <script>
      // Initialize and add the map
      let map;
      
      async function initMap() {
      
          // Request needed libraries.
          //@ts-ignore
          const { Map } = await google.maps.importLibrary("maps");
          const { AdvancedMarkerElement } = await google.maps.importLibrary("marker")
      
      
          // 地図の初期設定
          map = new Map(document.getElementById("map"), {
              zoom: 18,
              center: position1,
              mapId: "DEMO_MAP_ID",
          });
      
          // ピンの地点を設定
          const position1 = { lat: 35.165455654239224, lng: 136.90517107048055 };
          const position2 = { lat: 35.16480168326663, lng: 136.90544465580453 };

          // 地図にピンを設定する
          const marker = new AdvancedMarkerElement({
              map: map,
              position: position1,
              title: "ナディアパーク",
          });
      
          const marker2 = new AdvancedMarkerElement({
              map: map,
              position: position2,
              title: "矢場公園",
          });
      }

      initMap();
    </script>
  </body>
</html>

地図のAPIは下記の部分で読み込んでいます。
サンプルでは「Dynamic Library Import」でAPIを読み込んでいます。

script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "{APIキー}", v: "beta"});</script>

地図の表示は下記の部分で表示を行っています

  　　　　// GoogleMapの読み込み
　        const { Map } = await google.maps.importLibrary("maps");
          const { AdvancedMarkerElement } = await google.maps.importLibrary("marker")
      
      
          // 地図の初期設定
          map = new Map(document.getElementById("map"), {
              zoom: 18,
              center: position1,
              mapId: "DEMO_MAP_ID",
          });

また、下記のようにピンを複数設定することで、地図に複数のピンを立てることもできます。

// ピンの地点を設定
          const position1 = { lat: 35.165455654239224, lng: 136.90517107048055 };
          const position2 = { lat: 35.16480168326663, lng: 136.90544465580453 };

          // 地図にピンを設定する
          const marker = new AdvancedMarkerElement({
              map: map,
              position: position1,
              title: "ナディアパーク",
          });
      
          const marker2 = new AdvancedMarkerElement({
              map: map,
              position: position2,
              title: "矢場公園",
          });

今回はGoogle Maps Platformを使って地図を表示したり、
地図にピンを立てる方法をまとめました。

次回の第0ユニットの技術者ブログもお楽しみに！

投稿日:

技術者ブログ – 社内サーバファイルの自動バックアップ

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。

今回はインフラをテーマにしている第3ユニットです。

今回は、社内サーバのファイルを自動でバックアップする方法となります。

普通にバックアップするならば、外付けのディスクに毎日ファイルをコピーすればよいのですが、 ランサムウェア対策として、2つの外付けディスクに交互にバックアップすることにしました。

最初は、外付けディスクを毎日手作業で、サーバにつないでバックアップしていたのですが、 なんとか自動化できないかと考え、パワーシェルによるスクリプトにして、 毎日スケジュール実行することができるようになりました。

事前作業

あらかじめ2つのディスクを接続し、UドライブとWドライブの名前にしておきますが、 認識できないように、ドライブは無効としておきます。

Uドライブのみドライブ設定している
Wドライブは認識していない

バックアップするドライブを切り替えるパワーシェル抜粋

以下のようなパワーシェルを用意し、ドライブを切り替えファイルをバックアップします。

###########################################################################################
# 定数宣言
###########################################################################################
$DiskNumber_U = 9   #バックアップ先のディスク番号1（Uドライブ）
$DiskNumber_W = 10  #バックアップ先のディスク番号2（Wドライブ）
$DriveNumber_U = 2  #バックアップ先のパーティション番号1（Uドライブ）
$DriveNumber_W = 2  #バックアップ先のパーティション番号2（Wドライブ）
$CopyPath_U = "U:\" # バックアップ先のパス文字（U）
$CopyPath_W = "W:\" # バックアップ先のパス文字（W）

###########################################################################################
# バックアップするドライブを切り替える
#   Uドライブ、Wドライブ
###########################################################################################
    if ( (Get-Partition -DiskNumber $DiskNumber_U -PartitionNumber $DriveNumber_U).DriveLetter -eq "U" )
    {
        # Uドライブを未設定、Wドライブを設定に変更
        Set-Partition -DiskNumber $DiskNumber_U -PartitionNumber $DriveNumber_U -IsHidden $True
        Set-Partition -DiskNumber $DiskNumber_W -PartitionNumber $DriveNumber_W -IsHidden $False
    } else {
        # Uドライブを設定、Wドライブを未設定に変更
        Set-Partition -DiskNumber $DiskNumber_U -PartitionNumber $DriveNumber_U -IsHidden $False
        Set-Partition -DiskNumber $DiskNumber_W -PartitionNumber $DriveNumber_W -IsHidden $True
    }

###########################################################################################
# バックアップ先のドライブのフォルダをすべて削除
###########################################################################################
try {
    Get-ChildItem -Path $CopyPath_U | Remove-Item -Recurse
}Catch{
    Get-ChildItem -Path $CopyPath_W | Remove-Item -Recurse
}

###########################################################################################
# ファイルコピー
###########################################################################################
    try {
        Copy-Item $ExportPath $CopyPath_U -Force -Recurse
    }Catch{
        Copy-Item $ExportPath $CopyPath_W -Force -Recurse
    }

以上となります。

次回の技術者ブログをお楽しみに。

投稿日:

Leveraging JavaScript in Outsystems

As an engineer blog, I would like to introduce the learning content that I am working on on a daily basis.
This is the second unit with the theme of low-code development.

This time’s theme: “Using JavaScript in Outsystems”

In our second unit, we regularly use Outsystems for low-code development.
Outsystems provides tools that allow you to develop intuitively by dragging and dropping parts without having to code as much as possible.

However, if you want to implement details such as the UI part as you want, there may be cases where the properties provided by Outsystems are not enough.
In such a case, you may be able to implement your ideal by using JavaScript. This time I will introduce one such example.

今回やりたいこと

This time, I would like to change the UI of DataGrid in Outsystems using JavaScript.
Specifically, we will introduce the following contents.
・Cancel the DataGrid’s default setting of coloring every other row.
・Color a specific column of DataGrid with your favorite color

How to use DataGrid
How to use the OutSystems Data Grid

DataGridのデフォルト色付け設定を解除する

First, we will change the coloring of every other row of the grid, which is set by DataGrid by default.

Normally, if no settings are made, every other row of the grid will be colored automatically, as shown below.
We will change this using JavaScript.

It’s hard to see because the color is so light, but you can see that the 2nd and 4th lines are colored gray.

First, prepare a ClientAction (DataGridOnInitialize) for displaying the DataGrid in the screen element where the grid is located, and add an Input parameter called GridWidgetId.

Next, in the Event item of the DataGrid property to which you want to apply JavaScript, set the ClientAction you created earlier to Handler.
At this time, also set the GridWidgetId added with the Input parameter.

Set the following JavaScript in the ClientAction you created last.
(When defining a variable in JavaScript, the Input parameter GridWidgetId is specified.)

//Get the Grid information created on the screen var grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider; //Abolish coloring for each row grid.alternatingRowStep = 0;

I was able to cancel the setting where every other line was colored gray.

Color only specified columns of DataGrid

Next, we will use JavaScript to color only specific columns of the grid.
I would like to color only the Name and Age columns in the grid above in gray to make it easier to visually understand that they are non-editable columns.

This time, we will implement it by first coloring the entire grid gray, and then making only the editable Email column white.

First, write the following CSS in the Style Sheet of the screen.

.wj-cell{
background: lightgray;
}

.rowcolor{
background-color: white;
}

Next, add the following code to the JavaScript in ClientAction to complete the process.

//Set format for the acquired Grid
grid.itemFormatter = function(panel,r,c,cell){
//Color the Email column (3rd column) with white
　　if(c === 2 ){
//Add class definition to cell
wijmo.addClass(cell,’rowcolor’);
}
};

You can now color only the specified columns!

Summary

As you can see, OutSystems provides a variety of properties, but I found that you can implement them the way you want by using JavaScript.
It felt like I was able to reach out to a specific area of concern, and I felt that the scope of development was expanding.

Why not consider using JavaScript if you cannot achieve the desired results using Outsystems properties alone?

In the second unit, we will continue to develop blogs for engineers using low-code tools such as OutSystems, so please look forward to it.

投稿日:

OutsystemsでのJavaScriptの活用

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、ローコード開発をテーマにしている第2ユニットです

今回のテーマ：『OutsystemsでのJavaScriptの活用』

我々第2ユニットでは日頃Outsystemsを利用してローコード開発を行っております。
Outsystemsでは、なるべくコーディングすることなく部品のドラッグ＆ドロップなどで直感的に開発できるようにツールが用意されています。

しかし、UI部分などの細かいところを思った通りに実装したい場合、Outsystemsで用意されているプロパティだけでは賄えない場合もあります。
そんなときに、JavaScriptを利用することで自分の理想通りの実装が可能になるかもしれません。今回はそんな一例をご紹介します。

今回やりたいこと

今回はOutsystemsでのDataGridのUIをJavaScriptで変更していきたいと思います。
具体的には、下記の内容をご紹介します。
・DataGridのデフォルト設定である１行おきに色付けされるのを解除する
・DataGridの特定の列を好きな色で色付けする

<参考>DataGridの使い方
How to use the OutSystems Data Grid

DataGridのデフォルト色付け設定を解除する

はじめに、DataGridがデフォルトで設定している、グリッドの１行おきの色付けを変更していきます。

通常何も設定をしていないと下のように、グリッドの行が１行おきに自動で色付けされてしまいます。
こちらをJavaScriptを使って変更していきます。

色が薄くてわかりづらいですが、2,4行目がグレーに色付けされていることがわかります

まず、グリッドがある画面のエレメントにDataGrid表示用のClientAction（DataGridOnInitialize）を用意し、GridWidgetIdというInputパラメータを追加します。

次にJavaScriptを適用させたいDataGridのプロパティのEvent項目で、先ほど作成したClientActionをHandlerに設定します。
このときInputパラメータで追加したGridWidgetIdも一緒に設定します。

最後に作成したClientAction内で下記のようなJavaScriptを設定します。
（JavaScriptで変数定義する際にInputパラメータのGridWidgetIdを指定しています。）

//画面上で作成したGrid情報を取得
var grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;

//一行ごとの色付けを廃止する
grid.alternatingRowStep = 0;
１行おきにグレーに色付けされていた設定を解除することができました

DataGridの指定列のみ色付けをする

次にグリッドの特定列のみJavaScriptで色付けをしていきます。
先ほどのグリッドのName列とAge列のみグレーで色付けし視覚的に編集不可の列だということをわかりやすくしていきたいと思います。

今回は先にグリッド全体をグレーで色付けをし、編集可能のEmail列のみ白色にするといった方法で実装していきます。

まず、画面のStyle Sheetに下記のようなCSSを記載します。

.wj-cell{
    background: lightgray;
}

.rowcolor{
    background-color: white;
}

次にClientAction内のJavaScriptに下記のようなコードを追記すれば完了となります。

//取得したGridに対してフォーマットを設定
grid.itemFormatter = function(panel,r,c,cell){
    //Email列（３列目）を白で色付けする
　　if(c === 2 ){
　　　　//クラス定義をセルに追加
        wijmo.addClass(cell,'rowcolor');
    }
};
指定の列のみ色付けすることができました！

まとめ

このように、OutSystemsでは様々なプロパティが用意されていますが、JavaScriptを使うことによって自分の思うように実装できることがわかりました。
まさに痒い所に手が届くようで、開発の幅が広がる感じがしました。

皆さんもOutsystemsのプロパティだけではなかなか上手く実現できない場合に、JavaScriptの利用を検討されてみてはいかがでしょうか。

第2ユニットではこれからもOutSystemsなどのローコードツールを使った技術者ブログを展開していきますのでお楽しみに。

投稿日:

技術者ブログ OutsystemsとAPIについて、紹介します。

皆さん、こんにちは、第1セッションのイエンです。技術者ブログとして、日ごろ学習内容をご紹介します。

今回は、OutsystemsでAPIの作成をデーマにしています。

OutsystemsとAPIの概要

Outsystemsって何？APIって何？とういう方はいると思います。

OutSystemsは、先進的な企業向けに高性能ローコード/クラウドネイティブ開発プラットフォームをグローバルに提供しています。

APIとは「アプリケーション・プログラミング・インターフェース（Application Programming Interface）」の略称です。一言で表すと、ソフトウェアやプログラム、Webサービスの間をつなぐインターフェースのことを指します。

Outsystemsの拡張サービスとしてRestAPIが提供されています。RestAPIとは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つです。メソッドを公開して別のシステムが情報を取得または操作できるようにするには、RestAPIを利用します。

APIの作成方法

OutsystemsとAPIをより深く知っていただくために、作成したものを紹介したいと思います。

自社の勤怠システムをOutsystemsでスマホアプリ化するには、アプリから呼ばれるAPIが必要となります。それで、Outsystemsでの提供されているRestAPIサービスを使用して、APIを作成しました。アプリから呼ばれるAPIは勤怠情報登録と年休登録です。

本記事ではOutsystemsでRestAPIサービスとRestAPIメソッドの作成方を紹介します。

・はじめに空アプリを作ります。

①Outsystemsを起動して、「New Application」をクリックします。

②「From scratch」を選択して、「Next」をクリックします。

③「Reactive Web App」を選択して、「Next」をクリックします。

④アプリ名とDescriptionを書いて、「Create App」を選択します。

⑤アプリを作成できました。

⑥「Create Model」をクリックすると、開発ツールなどが開きます。下記のキャッチャーになりました。

・次にRestAPIサービスを作成するには、下記のステップの通りです。

①［Logic］タブで、Integrationsフォルダを開きます。

②［REST］を右クリックし、［Expose REST API…］を選択します。

③ RestAPIの名前を設定します。

・続いてRestAPIメソッドを作成します。

① 作成したRestAPIサービスをを右クリックし、［Add REST API Method］を選択します。

② RestAPIメソッドの名前を設定しま。

例: GETRegisterUser

・作成メソッドをダブルクリックすると、APIロジックの記載所が表示されます。

GETRegisterUserメソッドのロジックです。
年休と勤怠情報が表示され、年休、出勤、退勤ボタンを押下すると入力情報をDBに登録できます。

感想

過去にAPIを触ったことがなかったので、今回は0から始まりました。不明なことがたくさんありましたが、インターネットで情報を調べて、慌てずに一個ずつを解消していくことで完成できました。今回の勤怠システム連携課題のおかげで、APIの分野を学習し、新しい知識やスキルなどを蓄積することができ、大変勉強になりました。

次回は作成したメソッドの中身を説明したいと思います。お楽しみに！

投稿日:

anime.jsを使ってみた

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
本記事ではanime.jsを使ってアニメーションを作成してみましたのでその方法をご紹介します。

anime.jsとは

anime.jsは、軽量なアニメーションライブラリです。
ちょっとしたアニメーションを簡単に導入することができますし、 工夫すれば凝ったアニメーションも作成できます。
また、公式サイトで公開されているドキュメントやサンプルも充実しています。

導入方法

公式のGitHubからダウンロードしてきた「anime.min.js」を読み込ませれば使用することができます。

公式サイト
https://animejs.com/

anime.min.jsは解凍したZIPファイルのlibフォルダの中に入っています。
入手したjsファイルをHTMLに読み込ませれば使用できます。

<head>
    http://js/anime.min.js
</head>

また、npmを使用していインストールすることもできます。

アニメーションを作ってみる

使用する準備ができたのでアニメーションを作ってみます。
今回は公式のサンプルでも公開されているサンプルを作ってみます。

上記はgif画像なので多少ちらつきがありますが、ちらつきなくアニメーションを作成することができます。
下記のコードで比較的簡単に実装することができます

html

<div class="box" id="elem"></div>

css

.box {
    background-color: blue;
    width: 80px;
    height: 80px;
}

JS

var cssSelector = anime({
    targets: '#elem',
    translateX: 250,
    rotate: '2turn',
    scale: 2,
    easing: 'easeInOutQuart',
    duration: 2000,
    direction: 'normal',
    loop: true
});

アニメーションは読み込まれたタイミングで自動的に実行されますが、
クリック実行時にアニメーションを実行することもできます。

html

    <button id="btn-like" class="btn btn-like">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-heart-fill like-icon pointer"
            viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314" />
        </svg>
    </button>

css

.btn-pink {
    --bs-btn-color: pink;
    --bs-btn-border-color: deeppink;
    --bs-btn-hover-color: pink;
    --bs-btn-hover-bg: pink;
    --bs-btn-hover-border-color: deeppink;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: pink;
    --bs-btn-active-border-color: pink;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: pink;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: pink;
    --bs-gradient: none;
}

.btn-like {
    --bs-btn-hover-color: pink;
    --bs-btn-active-color: #fff;
    color: deeppink;
}

JS

let likeBtnAni = anime({
    // targets: '.btn-like',
    targets: '.btn-like',
    rotate: '2turn',
    easing: 'easeInOutQuart',
    direction: 'normal',
    loop: false
});

//アニメーションの停止
likeBtnAni.pause();

//クリック時にアニメーションを実行
document.querySelector('.btn-like').addEventListener('click', likeBtnAni.play);

今回はanime.jsを使ってアニメーションを実装してみました。
次回の第0ユニットの技術者ブログもお楽しみに！