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のデフォルト設定である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などのローコードツールを使った技術者ブログを展開していきますのでお楽しみに。