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のデフォルト設定である1行おきに色付けされるのを解除する
・DataGridの特定の列を好きな色で色付けする

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

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

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

通常何も設定をしていないと下のように、グリッドの行が1行おきに自動で色付けされてしまいます。
こちらを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;
1行おきにグレーに色付けされていた設定を解除することができました

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列(3列目)を白で色付けする
  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ユニットの技術者ブログもお楽しみに!

Engineer Blog: Creating app icons with CLIP STUDIO PAINT

As an engineer blog, I would like to introduce the learning content that I am working on.
This time, I will introduce how to create app icons using CLIP STUDIO PAINT, a software specialized for illustration and manga production.

About “CLIP STUDIO PAINT”

CLIP STUDIO PAINT is a paid software, and there are mainly three types.
・CLIP STUDIO PAINT EX: For those who want to use it not only for illustrations and web design, but also for manga production.
・CLIP STUDIO PAINT PRO: For those who want to use it not only for illustrations and graphic art, but also for web design, etc., and for those who do not create manga.
・CLIP STUDIO PAINT DEBUT: For those who want to use it only for illustration and graphic art production.

If you would like to know more, please click the link below:
https://www.clipstudio.net/ja/lineup/

The one I use is CLIP STUDIO PAINT EX, so this time I will introduce the functions installed in CLIP STUDIO PAINT EX.

How to create an “app icon”

The icon I created this time is as follows.

I will now introduce the specific production steps.

1. Launching a new canvas
This time, after creating the icon, I was told that I would be resizing it to various sizes and using it, so I prepared it a little larger and with a 1:1 ratio.

2. Design
I used the following tools to create the design.

① Fill in the background with the fill tool
Personally, I wanted to design with the base color + white logo, so I used the background color fill tool to fill the entire canvas with color.

With this fill tool, if something is drawn on the canvas, you may not be able to fill it in the way you want unless you specify settings such as “Refer only to editing layer” or “Refer to other layers”.
This time, since the canvas was blank, this specification was not necessary, so I will omit it.

② Prepare the text that will become the foundation of the design using the text tool
This time, I used the TA Maru Gothic GF03 font, which is provided by default in CLIP STUDIO PAINT.

Fonts downloaded from external sites can also be used within CLIP STUDIO PAINT by clicking [Add font from file] from [Tool properties] under [Text] and selecting the font file you want to add.
*When downloading from external sites, please check if the font can be used commercially before downloading and using it.

➂ Do modifications based on the font prepared in ②
Lower the opacity of the font layer prepared in ② and make changes as shown below.

④ Hide the original font layer
Once the design is complete, hide the original font.
You can delete the layer, but it is useful to have it hidden when changing or retaking the design, so it is convenient to leave it hidden.

3. Save
Even if you save it as is, it will be saved as a CLIP STUDIO PAINT file, so use Save a Copy (or Save As) to change the extension and save it as an image.

That’s all!

Look forward to the next engineer’s blog!

技術者ブログ:(OutSystems)アプリケーションのモバイルアプリ化

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

今回のテーマ:『アプリケーションのモバイルアプリ化』

前回は、Advanced Excelを使用してOutSystems内の画面データをExcel出力する方法についてご紹介しました。
今回は、OutSystemsで作成したアプリケーションをスマホなどのモバイルアプリとして使用できるようにする方法をご紹介します。

モバイルアプリ化ってなんだか大変そう…

モバイルアプリと言われてパッと思い浮かんだのは、App storeやGoogle Playストアなどからインストールできるものでした。
(アプリとしてリリースするまでに手間や時間がかなりかかるみたいだし、アップデートもすぐに反映できないし、そもそもアプリの利用用途的にストアで配布までしなくても…うーん…。)
と、最初はモバイルアプリ化に対してちょっと身構えましたが、思っていたよりも手軽にモバイルアプリ化することができます!

OutSystemsでは、アプリストアを経由してインストールするアプリ(こちらはネイティブアプリといいます)を配布する方法のほかに、PWA(プログレッシブWebアプリ)として配布する方法が用意されています。

PWA(プログレッシブWebアプリ)とは?

プログレッシブWebアプリとは、スマホなどモバイル端末向けに設計されたWebサイトやWebアプリを、ネイティブアプリと同じように扱えるようにする技術のことです。PWAには以下のようなメリットがあります。
・アプリストアを利用する必要がない
・Webサイト上のコンテンツでありながら、アプリと似たような使い方ができる
・iOS/Androidで同じ仕様のものが使える
等々…

ここからは、OutSystemsで作成したアプリケーションをPWAとしてモバイルアプリ化する手順をご紹介します。

モバイルアプリ化してみよう:準備編

最初からモバイルアプリ化を見据えてアプリケーションを作成するときは、アプリケーション新規作成の際に「Tablet App」または「Phone App」を選択します。

そのあとは、画面やロジックを作成してアプリを作っていきます。

アプリケーションを新規作成する際に表示される画面

モバイルアプリ化してみよう:配布編①(OutSystems Service Studio)

アプリが完成したら、いよいよアプリケーションをモバイルアプリ化します。
まずは、OutSystems Service Studioで配布の準備をします。

①モバイルアプリ化したいアプリケーションを選択します
②「Distribute」を選択します
③「Progressive Web App(PWA)」の下にある「Distribute as PWA」をオンにします
④アプリケーションのQRコードが発行されます

モバイルアプリ化してみよう:配布編②(モバイル端末)

ここからは、ユーザのモバイル端末での操作になります。
今回はiOS(iPhone)の画面をご紹介しますが、Androidでも操作に大きな差はなくインストールすることができます。

①カメラ等で発行したQRコードを読み取りブラウザで開きます
②Safariの「追加・共有・保存」アイコン(画面下の真ん中)をタップします
③「ホーム画面に追加」をタップします
④名称を入力して「追加」をタップします

以上の手順を踏んで、ホーム画面にアプリケーションが追加されれば完了です!

「Reactive Web App」でアプリケーションを作成していたら…

最初にReactive Web Appを選択したけど、モバイルアプリとして使いたい…!と思うこともあるかもしれません。
ただ、Reactive Web AppにはDistributeタブはなく、PWAとしてモバイルアプリ化することはできません。また、アプリケーションのタイプを後から変更することは、OutSystemsの仕様上不可能です。
しかし、疑似的にモバイルアプリ化のようにする方法を併せてご紹介します。

①アプリケーションをブラウザで開き、「QRコードを作成」アイコンを選択します
②作成されたQRコードをモバイル端末で読み取り、配布編②の操作をします

もちろんアプリケーションの作られ方が違うので挙動等は違いますが、ホーム画面から直接アクセスできる便利さなどはReactive Web Appでもカバーすることができます。

まとめ

今回は、OutSystemsで作成したアプリケーションをスマホなどのモバイルアプリとして使用できるようにする方法をご紹介しました。
アプリストアで配布するモバイルアプリ化だけでなく、PWAで素早く手軽にアプリケーションをモバイルアプリ化することも可能ですので、アプリケーションの利用用途などに合わせて活用してみてください!

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

技術者ブログ – TensorFlowで画像を分類しよう

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。今回はAI、ビッグデータをテーマにしている第1ユニットです。 今回のテーマはTensorFlowで画像を分類のための簡単なモデルの学習です。

TensorFlowは、機械学習やディープラーニングに広く使用されているオープンソースの機械学習ライブラリです。画像分類などのさまざまなタスクに使用できます。

Python言語を利用したTensorFlowで画像を分類するには、以下の手順を実行します。

  1. TensorFlowをインストールする
pip install tensorflow
  1. データセットを読み込む

この例では、MNISTデータセットを使用します。MNISTデータセットには、手書き数字の60,000枚のトレーニング画像と10,000枚のテスト画像が含まれています。

MNISTデータセットを読み込むには、次のコードを使用します。

import tensorflow as tf

(train_images, train_labels), (test_images, test_labels) = tf.keras.datasets.mnist.load_data()

このコードは、MNISTデータセットを読み込み、トレーニング画像とテスト画像に分割します。

  1. データを前処理する

MNIST画像はグレースケールで、すべて28×28ピクセルのサイズです。モデルをトレーニングする前に、画像を正規化する必要があります。

画像を正規化するには、次のコードを使用します。

train_images = train_images / 255.0
test_images = test_images / 255.0

このコードは、画像の各ピクセルの値を0から1の範囲に正規化します。

  1. モデルを定義する

この例では、シンプルなモデルを使用します。モデルには、畳み込み層と全結合層の2つの層があります。

畳み込み層は、画像から特徴を抽出します。全結合層は、畳み込み層で抽出された特徴に基づいて画像を分類します。

モデルを定義するには、次のコードを使用します。

model = tf.keras.models.Sequential([
  tf.keras.layers.Conv2D(32, (3, 3), activation='relu', input_shape=(28, 28, 1)),
  tf.keras.layers.MaxPooling2D((2, 2)),
  tf.keras.layers.Flatten(),
  tf.keras.layers.Dense(10, activation='softmax')
])

このコードは、4層からなるモデルを定義します。

  • 最初の層は畳み込み層です。この層は、画像から28x28x32の特徴マップを抽出します。
  • 2番目の層は最大プーリング層です。この層は、特徴マップのサイズを半分に縮小します。
  • 3番目の層は平坦化層です。この層は、特徴マップを1次元のベクトルに変換します。
  • 4番目の層は全結合層です。この層は、特徴ベクトルに基づいて画像を分類します。
  1. モデルをコンパイルする

モデルをコンパイルするには、損失関数、オプティマイザー、指標を指定する必要があります。

損失関数は、モデルがトレーニングデータに対してどれくらいうまく機能しているかを測定するために使用されます。オプティマイザーは、損失関数を最小化するためにモデルの重みを更新するために使用されます。指標は、トレーニングデータとテストデータに対するモデルのパフォーマンスを評価するために使用されます。

モデルをコンパイルするには、次のコードを使用します。

model.compile(loss='sparse_categorical_crossentropy',
              optimizer='adam',
              metrics=['accuracy'])

このコードは、損失関数に「sparse_categorical_crossentropy」を、オプティマイザーに「adam」を、指標に「accuracy」を使用します。

  1. モデルをトレーニングする

モデルをトレーニングするには、以下のコードを実行します。

model.fit(train_images, train_labels, epochs=10)

このコードは、モデルを10エポック(繰り返し)トレーニングします。

  1. モデルを評価する

モデルを評価するには、以下のコードを実行します。

test_loss, test_accuracy = model.evaluate(test_images, test_labels)

print('Test loss:', test_loss)
print('Test accuracy:', test_accuracy)

このコードは、モデルのテストデータに対する精度を計算します。

  1. 予測を行う

新しい画像に対して予測を行うには、以下のコードを実行します。

predictions = model.predict(test_images)

# Print the predictions
print(predictions)

このコードは、モデルがテスト画像に対して行った予測を出力します。

以上、画像認識への第一歩でした。このブログ記事では、TensorFlowを使用した画像分類のモデル学習の基本的な手順をご紹介しました。

技術者ブログ:(OutSystems)Advanced Excelを使ったExcel出力

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

今回のテーマ:『Advanced Excelを使ったExcel出力』

前回はBootStrapを使用してExcelファイルからOutSystemのEntityへデータ取り込みを行う手順をご紹介しましたが、
今回はOutSystems内にある画面データをExcelに出力する方法をご紹介します。

Advanced Excelとは?

OutSystemsに搭載されているForgeコンポーネントのひとつで、
Excelファイルの読み込み・出力、書式設定、グラフ作成等もできるツールです。

Advanced Excel のインストール

Service Studioを起動しBrowse Forgeより”Advanced Excel”で検索してインストールを行います。

モジュールへの参照追加

利用したいモジュールを開き、Manage Dependencies(CTRL+Q)よりAdvanced Excelの要素を必要な分選択しApplyボタンをクリックします。
(今回はWorkbook_Open_BinaryData、WorkSheet_Select、Cell_Write、Workbook_Get_BinaryData、Workbook_Closeを選択しました)

各要素の説明は以下の通りです。

・Workbook_Open_BinaryData …BinaryData型でResource内に配置したExcelを指定しワークブックを開きます

・WorkSheet_Select …ワークブック内のシートを指定します

・Cell_Write…セルを指定し値を書き込みます

・Workbook_Get_BinaryData…ダウンロード用にBinaryData型でExcelファイルデータを取得します

・Workbook_Close…作成したExcelファイルをメモリから解放します

出力用のExcelテンプレートを配置

今回は以下のようなテスト用メンバー表のExcelテンプレートにデータを出力していきます。

モジュールのDataタブ内にあるResourceに用意したテンプレートをインポートします。

Excel出力用のSever Actionの作成

今回はメンバー表とExcel出力用に出力ボタンが表示されている画面を作成しました。

以下のようなExcel出力用のSever Actionを作成します。

各アクションのプロパティは以下の通りです。

・Workbook_Open_BinaryData…Action>BinaryDataにResourceで配置したExcelテンプレートファイルを選択します。

・WorkSheet_Select…Action内でWorkbookを指定、Workbook内のシートの指定をindexかシート名で選択できます。

・Cell_Write…CellRow/CellColumnにそれぞれ出力するセルの行/列番号を、CellValue/CellTypeに出力内容/タイプを入力します。

・Workbook_Get_BinaryData…取得するWorkbookを選択します。

・Workbook_Close…閉じるWorkbookを選択します。

画面上のボタンが押下されるとメンバー表が自動で出力されるようになりました。

注意事項

・Workbook_Closeは忘れずに
OutSystemsドキュメントでは、Excelファイル操作が終了したら必ずCloseするようにとあります。OutSystemsでは自動的にメモリを開放する仕組みがないので、操作が終了したらWorkbook_Closeをしてメモリを開放するようにしてください。

・シート番号やExcel行/列番号は1始まり
WorkSheet_Select でシート番号を指定したり、Cell_Writeで行/列番号を指定したりする際に起点のシート番号や行/列番号は0ではなく1になりますのでご注意ください。

まとめ

今回はAdvanced Excelを使ってOutSystemsからExcelファイルを出力する方法をご紹介いたしました。
前回のBootStrapに加えて、Outsystems上で取り扱っているデータを外部出力したい場面で活用できる機能かと思います。
第2ユニットではこれからもOutSystemsなどのローコードツールを使った技術者ブログを展開していきますのでお楽しみに。

社内勉強会:要件定義について2

前回の勉強会の様子 – 要件定義について

今回の勉強会記事を担当する第0ユニットの「xig」です。

前回は「要件定義」をテーマとして勉強会が開催されました。
今回はその内容を基に後日実施した勉強会の様子の紹介です。

勉強会の流れは、以下の通りです。

①前回「要件定義」を振り返り

②ヒアリング内容を整理するため、業務フローの作成

③振り返り、まとめ


今回の勉強会では、前回勉強会のヒアリング内容を基に、
•要求をかみ砕き、細分化することで実装すべきか内容を洗い出す
•必要な機能、性能などを書き起こす
ということを実施しました。

ヒアリング内容を整理するため、業務フローの作成にチャレンジしていきます。

業務フローとは?

特定の業務に対する作業の流れを示すフロー図のことを指します。. 業務の始まりから終わりまでの間に、誰(どの部署)が何をやるのか、その時に利用するシステムは何か。
そして、その作業順番を図にすることで、それぞれのつながりを示し、業務プロセスを可視化するための図です。

ということで、業務の内容や課題を共有していきます。

こちらが業務フローを実際に作成している様子です。
ホワイトボードに内容を書いていき、
それに対して意見を交えながら業務の流れをまとめました。

業務フローを作成する人は場面ごとに交代で実施しました。
ここでは、サービスに登録するためのお店情報を
どうやって編集するかを整理しようとしているところです。

まとめ

今回の勉強会では業務フローを作成することで、
業務の内容や課題を整理しました。
突然ですが、皆さんは

「QRコードの読み込みをPayPayみたいにピッと支払いをするイメージで」
と聞いてどんなイメージをするでしょうか?

この一言を基に内容を整理した際、
「QRをお店が読むのか、利用者が読むのか」
が結局のところ分からなく、再度確認をする場面がありました。

実際の業務でも今回の勉強会の内容を生かして
整理することでクライアントとの認識齟齬をなくしていき、
クライアントとのレビューに臨んでいきたいですね。(´ºωº`)

それでは、次回の勉強会の記事をお楽しみに!

プログラミング言語「TypeScript」

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

今回はプログラミング言語の紹介です。2023年の人気のある Web プログラミング言語のTOP3は下記となっています。
 ・JavaScript
 ・Python
 ・C#
あれ、今回紹介するTypeScriptはランクインされていないし、AIで活用されることが多いPythonじゃないの?と思われると思います。確かにそうなのですが、業務Webアプリ開発では注目されている言語、それがTypeScriptなのです。

https://www.typescriptlang.org/

「TypeScript」は、JavaScriptを拡張した新しいプログラミング言語であり、2012年10月にMicrosoftが公開しました。その後、2017年にGoogleの標準言語にも認定されています。TypeScriptで書いたコードをコンパイルするとJavaScriptのコードへと変換されるため、JavaScriptの開発環境や実行環境があればすぐに使えます。

紹介するに至った経緯としまして、顧客向けの業務で活用しているからです。このプロジェクトでは、20年ほど前に開発され、老朽化したシステムの更新業務を行います。このシステムは開発当時に主流であったクライアントで動作するJavaAppletが使われており、InternetExplorerで動作するものでした。時代は変化し、InternetExplorerはEdge上で互換モードで動作させ、JavaAppletもサポート余命が残り少なくなっていました。そんな状況でもシステムは使い続けたい、最小限のコストで新しいシステムへ更新したいということで登場するのが今回紹介する「Typescript」なのです。

Typescriptの最大の特徴は、コンパイルすることでJavascriptのソースコードに変換される点にあります。それなら普通にJavaScriptで良いのではと思われるかもしれません。TypeScript は型の宣言ができたり、コンパイル時にエラーが出ます。入力される型が不明であったり、実行するまでエラーを検知することができなかったJavaScriptと比較すると、大幅に制作効率の向上となっています。また、開発環境構築の容易さも魅力の一つです。Microsoft社が無料の開発ツール「Visual Studio Code」を提供しているため、これを導入するだけです。追加で様々なプラグイン用意され、用途に応じて使い分けることが可能となっています。

その他、以下のようなメリットが挙げられます。
 ・大規模開発に耐え、メンテナンス性が高い
 ・インターフェイス、クラスが利用できる
 ・記述量が少なく、可読性が高い
 ・JavaScriptへの変換により、動作速度が変わらない
 ・JavaScriptの上位互換により、他の言語より学習コストが低い

Typescriptは、まだ歴史が浅い言語です。しかし、Javascriptの後継としての立場はもちろんのこと、React Nativeの開発言語としても利用できるため、活躍の場がどんどん広がっていくことが期待できます。社内のアプリ開発でも利用しており、これからも利用を推進していきたいと思います。

今回は業務で使っているプログラミング言語「TypeScript 」の紹介でした。