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