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

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

今回のテーマ『RPA(Power Automate Desktop)について』

第2ユニットではRPAツールとして「WorkFusion：RPA Express」を利用しておりましたが、
2020年4月より提供することをやめてしまったため、すでにダウンロードができなくなっているようです。
良い機会であるため、そのほかのRPAツールを触ってみようと思います。
今回検証を行う対象としてはWindowsが提供している「Power Automate Desktop」とします！

【Power Automate Desktopの概要】

Microsoft社が提供するMicrosoft 365アプリケーションの1つです。

「Power Automate Desktop」はプロセスの自動化を実現するRPAツールで、
ローカルアプリケーションの自動化、Webアプリケーションの自動化を行うことができます。
「Windows 10 以降のOS」で「Microsoft アカウント利用時」にかぎり利用可能。

【特徴（できること）】

Power Automate Desktopが行えるアクションは400種類以上です。
WEBアプリに対しては、データ抽出や、フォーム入力、クリックなどを行うことができます。他にもデスクトップ上での、ウィンドウのUI要素のクリック、データ抽出といったアクションもあります。
また、条件分岐も行うことができ、細かなシナリオを作成することが可能です。

Webページ操作を記録するWebレコーダーと、それ以外の操作を記録するデスクトップレコーダーの2つのレコーダー機能があります。
マウスもキーボードの動きも記録でき、記録中にブラウザとUIの自動化アクションの両方の生成が可能です。プログラミングが未経験の方でもPC作業を自動化させることができます。

【特徴（できないこと）】

日時を決めて実行するスケジュール実行や、一定のトリガーを設定して実行するトリガー実行を行うことができません。
遠隔操作でフローをコントロールできないので、出先などでは作業を行うことができません。
Windows 10より無償版が提供されるようになりました。Windows 10以前の作業環境は自動化できないので注意する必要があります。

【実際にインストールしてみた】

Microsoftアカウントを保持してさえいれば、下記サイトからインストーラをダウンロードして実行するだけなので、非常に簡単です。
URL：https://docs.microsoft.com/en-us/power-automate/desktop-flows/install

インストール後にサインイン画面が表示されるので、ここでMicrosoftアカウントを入力すれば利用可能となります！
※Windows 11 からはOSの一部として組み込まれているため、すぐに利用可能

今回は「Power Automate Desktop」の紹介とインストールまでを説明しました。
無償版でも色々とRPA化することが可能だなと感じましたので、
次回は実際の使い方からどのように動作するかなどを具体的に紹介したいと思います。

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

最近のITニュースを賑わせたのはIEのサポート終了でなないでしょうか。IEこと「Internet Explorer」のサポートが2022年6月15日にサポートが終了し、1995年から続いた27年の歴史に幕を閉じました。思えば業務アプリの標準ブラウザとしてさまざまな開発でお世話になりました。その後継としてMicrosoft Edgeが本格稼働となるのですが、実は歴史が古く、2015年に登場したブラウザなのです。IEが使えなくなったら大変！でも安心してください。Edgeの機能に「IEモード」が用意されており、少なくとも2029年まではサポートするとアナウンスをしています。

昨今はスマホの普及率が上がり、パソコンが使えない若者が増えていますが、開発や資料作成にはパソコンが欠かせない存在です。今回はパソコン操作に欠かせないWindowsやExcelの便利なショートカットを紹介します。

定番ショートカット
普段から利用しているショートカットですが、意外と知られていない。そして使うとこんなに便利だったんだと実感できるのをいくつか紹介させていただきます。

Ctrl + X	切り取り
Ctrl + C	コピー
Ctrl + V	貼り付け

意外と便利なショートカットをWindowsから3つ。
１つ目、ファイル操作に欠かせないエクスプローラーを一発で起動できます。次は、スクリーンショットは「PrintScreen」が簡単ですが、範囲を指定してスクショが撮影できるのはとても便利です。最後に、パソコンにロックをかけるにはコレ。離席時には忘れずにロックをかけましょう。

Windows + E	エクスプローラーを起動
Windows + Shift + S	指定した範囲のスクリーンショット
Windows + L	パソコンをロック

そして、Excelから４つ。
今日の日付を入れるのにテンキーを叩くことなく一発入力できます。そして、資料の作成時に挿入、削除が面倒くさい。そんな時には「挿入」、「削除」が役立ちます。でも、やっぱり書式を編集したいときの［セルの書式設定］。たったこれだけで右クリックの頻度が大幅に削減されるのではないでしょうか。

Ctrl + ;(セミコロン)	今日の日付を入力
Ctrl + +(プラス)	挿入　※行を選択した状態で行を挿入
Ctrl + -(マイナス)	削除　※行を選択した状態で行を削除
Ctrl + 1(数字の1)	［セルの書式設定］を表示

ほかにも便利なショートカットキーは沢山あります。Edgeで検索したら新しい発見に出会えるかもしれません。
では、次回のブログでお会いしましょう。

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

今回のテーマは「デザインの4原則」について紹介していきます。

「デザインの4原則」は第0ユニットテーマのWEBデザインだけでなく、デザイン全般の原則です。デザイナー以外にも参考となる原則で、4原則を抑えるだけでも他の人に伝わりやすくなり資料作成などにも役立ちます。

「デザインの4原則」とは『近接』『配列』『反復』『対比』のことを指します。
この4原則をダンデライオンズのサイトを用いてご紹介していきます。

近接:Proximity

簡単に言うと「グループ化」です。
関係があるものは同一グループに、関係がないものは別グループに分けることで視覚的にもわかりやすくなります。

以下画像の場合、左側はすべてのQAが固まっており見づらくなっています。右側の画像のようにQAのセットは一緒に、違うQAは余白を開けてあげるとグループがわかりやすくなります。

配列:Alignment

関連する情報の色、フォント、配置を統一することです。
規則性もなくむやみに上記項目を変えてしまうと直感的に理解できません。

以下の画像の場合、左側の画像は文字列が「真ん中寄せ」「左寄せ」「右寄せ」が混ざっており、またフォントの色も違って情報が多くなっています。
右側のように統一することで、理解しやすくなります。

反復:Repetition

同じ要素を繰り返し、一貫性を持たせることです。

以下の画像の場合、上の画像は「デモサイト」「料金について」「ご利用までの流れ」がバラバラのデザインになっておりごちゃついています。
下の画像は同じデザインを使っていることで一貫性があり情報を追いやすくなります。

対比:Contrast

優先順位が高い情報を強調することです。

以下の画像の場合、左側は見出しがわかりづらく何を伝えたいのかわかりづらいです。
右側の画像では見出しが太字の青色文字になっており何を伝えたいのかわかりやすくなります。

デザインの勉強をしていなくても、上記の4原則を使用するだけでも全然違うのでぜひいろんなシーンで活用してみてください。

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

参考：
https://bulan.co/swings/design4principals/
https://docodoor.co.jp/staffblog/design-4general-rule/
https://fare.blue/2020/03/design-4rule/
https://321web.link/design-4principles/

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はインフラをテーマにしている第3ユニットです。

第3ユニットでは、ダンデライオンズ社内のインフラ管理をしております。
ネットワーク、サーバー管理をしていると切っても切れないセキュリティの話です。

その中でも、最近特にニュースで聞く、ランサムウェアについて調べました。

まとめた資料が以下となります。ご覧ください。

ちなみにダンデライオンズでは、ランサムウェア対策として2つの外付けハードディスク（SSD）にバックアップをして、片方を物理的に切り離しています。

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

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

今回のテーマ：『Reactive開発方式の紹介』

今回は、前回の記事にて触れたTraditional形式の開発ではなく、
より新しいReactive形式での開発について紹介します。

Reactiveとは？

OutSystemsの新しいアプリケーション開発フレームワークです。
これまで用いられてきたTraditional形式と比べて、以下のような強みがあります。

1. 通信を伴わない処理の負荷軽減
   TraditionalではScreenActionとServerActionの2種類のアクションがありましたが、
   これらの両方がサーバサイドで処理を行うものでした。
   一方でReactiveではClientActionとServerActionの2種類のアクションが用意されており、
   このうちClientActionではサーバへの通信を伴いません。
   そのため、選択値に応じて見た目を変えるなど、通信を伴わない処理では負荷を軽減することができます。
   
   
2. 画面表示時間の短縮
   Traditionalでは画面の初期表示時にPreparationと呼ばれるアクションを実行し、
   一括でデータ取得するのが一般的な方法でした。
   しかし、このやり方では複数のデータ取得処理を直列でしか処理できず、画面表示までに時間がかかる場合があります。
   一方でReactiveではデータ取得処理を非同期で並列処理でき、画面表示までの時間を軽減できるため
   ユーザビリティの向上が期待できます。
   
   （上図：TraditionalにおけるPraparation。
   他のアクション同様フローによる直列処理のため、画面表示までに時間がかかる場合がある。
   下図：Reactiveにおけるデータ取得処理。
   At Start（開始時）に、複数のデータ取得処理を非同期で行うため画面表示までの時間短縮が期待できる）
   
   
   
3. UI部品の自動更新
   TraditionalではUI部品を更新する際にAjax Refreshと呼ばれる更新処理を実行する必要がありました。
   しかし、画面内に大量の部品が存在する場合、全て更新するのは大変ですし、漏れが起きる可能性も高いです。
   一方でReactiveでは、データ取得が絡む処理は明示的にRefreshが必要であるものの（Aggregateなど）、
   それ以外の処理は自動的にUIを更新し、再描画してくれます。
   分かりやすい例として、ラジオボタンの選択値により描画内容を切り替えるIfウィジェットなどを意識してリロードする必要がなくなります。
   
   （上図：TraditionalによるUI部品更新。
   明示的にAjax Refreshしてやる必要があり、大量のUI部品を更新する場合手間になる。
   下図：ReactiveによるUI部品更新。
   データの再取得が不要であれば、値の変更に伴い自動的にUI部品を更新してくれる）
   
   

まとめ

以上、簡単にではありますがReactiveについて、Traditionalと比較する形で紹介させていただきました。
Traditionalに比べてReactiveの方が開発が容易になっていること、
また、利用ユーザーにとっても待ち時間の短縮によりユーザビリティが向上していることがお分かりいただけたかと思います。
引き続きTraditionalのサポートは続いていきますが、
今後はReactiveが主流になっていくことが考えられるため、要注目ですね。

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

昨今、将棋の最年少記録を次々と塗り替えている藤井聡太さん。愛知県出身ということもあり、今後の益々の活躍に期待したいところです。彼はAIとの対戦ついても語っており、AIを活用して人間がどう強くなるかを考えているそうです。もしかしたらAIの活用が快進撃の秘訣なのかもしれませんね。

AIが2016年に囲碁の世界トップ棋士を打ち破ったコンピューター囲碁プログラム「AlphaGo」により世界が驚愕しました。また、チェスはAIによる大会が毎年開催され、どんどん強いAIが開発されています。将棋も将棋電王戦というAIでの対戦が2017年まで開催されていました。限られた条件の中で最適解を見つけるのは人間よりもAIのほうが優れているのかもしれません。

ダンデライオンズではカードゲームで学べるプログラミング「HELLO WORLD」を開発、販売を行っており、2人から4人でワイワイ遊べ、相手の手札を含めた戦略性の高いゲームとなっています。また、カードゲームだけでなく、スマートフォンでも遊べるアプリも公開。スマホ版はいかに早く、少ない手数でクリアーするのを目的にしたゲームとなっています。

スマホ版「HELLO WORLD」はAIが対戦相手になることで、戦略性、スリルあるゲームに生まれ変わります。場の状況に合わせた判断を行い、対戦相手が適切な手札を使ってくる難易度の高いゲームとなるよう開発を進めています。
まず、初期段階では条件判断を行う形で対戦思考ロジックを構築します。
次の段階として対戦版にてプレイヤーが対戦を行うことで、対戦データを学習データとして収集、分析し、より強力なAIを構築します。
構築したAIはAI同士の対戦を行うことでよりさらに強いAIを作り出すことを目指しています。

今後、対戦版「HELLO WORLD」の展開をご期待下さい。

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はＷＥＢデザインをテーマにしている第0ユニットです。

第0ユニットでは、ダンデライオンズで公開している各種サイトの管理をしております。

最近「初歩的すぎる…」となった出来事をご紹介します。

とある日、うちの代表より「オフィシャルサイトの読み込みが遅いんだけど？」と突っ込みをいただきました。
第0ユニットメンバーで原因を探るため使ったのが「Google PageSpeed Insights」です。

Google PageSpeed Insightsとは…
その名もずばりですが、サイトの読み込み速度をスコア測定してくれるサイトになります。
結果を3段階評価(Good、Medium、Low)してくれて、割と細かく問題を教えてくれるとても頼りになるサイトとなります。

早速URLを入力し計測したとところ、まさかのLow…orz

早速問題を確認したころ、MB越えの画像がありました。
なんと初歩的…

経験者さんであればご存知だと思いますが、画像の容量が大きければ大きいほどサイトの読み込み速度は遅くなります。
Windowsでも大きな写真を開こうとすると、読み込みに時間が掛かりますよね。
それと同じです。

実際作っているときは見た目重視になってしまっており、全く画像サイズを確認しておらず。
対象の画像はGIFになっておりキラキラと動いておりました。
対応としては、今回は静止画かつ軽量化した画像に変更しました。

他にも大きい画像をCSSで無理やり小さくしている箇所もあり、ソースレビューって大切だなと実感しました。

他にも使用されていないCSSについてやテキスト圧縮など細かいところまで指摘してくれていました。とても便利ですね。

本来論とすれば、リリースするタイミングで「Google PageSpeed Insights」で確認をするべきなので今後は取り入れていきたいと思います。

次回の更新もお楽しみに。

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

今回のテーマ：『Outsystemsを導入してみよう』

今回は、前回の記事にて触れたOutsystemsというローコード開発ツールの導入と、サンプル画面の作成方法を紹介します。

まずはOutsystems公式ページより、無償トライアルを選択。
氏名・メールアドレス・パスワードを入力します。

続いて使途、会社情報を入力します。

アカウントの作成が終わるとポータル画面が開くので、インストーラをダウンロードし、インストールします。

また、入力したメールアドレス宛に認証メールが届くため、認証手続きを行っておきましょう。

インストール終了後、Outsystemsを起動します。
メールアドレスとパスワードを入力することで、割り当てられた個人環境へ接続できます。

初回接続時、React方式によるチュートリアルを促されます。
今回はTraditionalWeb形式での手組み画面を試すため、Backを選択してチュートリアルを中断しましょう。

New Application→From scratch→TraditionalWebと選択を進め、アプリケーション（モジュール（機能）の集約単位）の名前、概要、アイコンを選択します。
その後、モジュール名を入力することでモジュール作成画面に遷移します。

モジュール作成画面に遷移したら一番簡単な作り方として構築済みのEntity（テーブル）をドラッグ＆ドロップしてマスタ・ディティール画面を作成します。
Dataタブ→Entitiesディレクトリ→（System）モジュール→Userエンティティをドラッグ＆ドロップすることで、1回目はマスタ画面（Users）が、２回目はディティール画面（UserDetail）が作成されます。
画面が自動生成されたら、画面上部にある1-Click Publishを押下し、変更の保存及びサーバへのアップロードを行います。

アップロードが完了すると1-Click PublishがOpen in Browserに切り替わるので、押下することで開発した画面をブラウザで閲覧することができます。

作ってみた感想

以前Oracle Apexを用いた開発でも感じたように、とても簡単かつ短時間で作成することができました。
開発ツールをインストールし、マスタ化したいEntityさえ準備できていればほんの僅かな時間でWebアプリケーションの一機能を用意することができます。
また、いちから画面を作成する場合でもWidget（画面部品）が豊富に用意されているため、幅広いアプリケーション開発に対応できます。
第2ユニットでは様々なローコード開発を行ってますので、今後も紹介していきたいと思います。

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

防犯・監視カメラ

今回取り上げた技術は監視システムです。
昨今、町中にはたくさんの防犯・監視カメラが設置されており、日本中に約５００万台のカメラが設置されているそうです。あなたが何気なく道路を歩いていてもカメラで録画されているかもしれません。防犯・監視カメラは設置しているだけでは効果は半減してしまいます。録画データを分析、管理することで有用性が増すのです。
防犯・監視カメラはAI、ビックデータの活用例として、ニュースやドキュメンタリーの犯罪捜査で犯人の録画映像から、逃走の足取りを掴んで逮捕に至ったと報道されています。それは各地の防犯カメラの画像を確認したり、大量の録画データを元に顔認証で犯人を特定しているのです。
ほかにもコンビニ、スーパーのレジや駅の改札にも設置され、統計情報の取得、不正利用防止などに活用されています。

第一ユニットでは

それと同じように既存の防犯・監視カメラを活用しようとすると多くの障害が立ちはだかります。それは既存の防犯カメラの所有者もさまざまで、権利関連もあり録画データを活用するには費用がかかります。また、先駆者がすでに実用化しており、ニーズにはあれど、介入するには高いハードルとなってしまいます。そこで、あまり設置がされていない郊外や山間部に注目しました。郊外や山間部の大半は農地や山林であることが多く人があまり訪れないところでもあるのですが、これらの管理にも労力が費やされているのです。
・農地に水が入っているのか？
・害獣に作物を荒らされていないか？
・不審車や窃盗犯がいないか？
また、農地の管理は自宅からの距離もあり、見回りには時間や労力がかかります。私の実家も農家であり、両親が農地の見回りに出かけるのをよく見かけます。

第一ユニットでは過去に下記の活動を行ってきました。
・画僧解析による顔認証
・unityを使ったスマホアプリの開発
・チャットボットの開発
これらを生かし、監視システムの構築、運用を行うことを目標として活動を行っています。

監視システムの概要

監視カメラは常時録画されるわけではなく、画面内に通常と異なるものが映った時に録画を行います。録画された画像を分析し、警告するかどうかを判断します。（画像解析）
・不審車、害獣、窃盗犯が映った場合、警告する
・システム利用者、登録車が映った場合、何もしない
システムはスマートフォンへLINE等のSNSを通じて警告や画像を利用者に連絡されます。（チャットボット）
また、パソコンで警告対象の設定、警告頻度や傾向分析の確認といったことを可能とします。スマートフォンで管理アプリを提供し、簡易的な設定を可能とします。（スマホアプリ）

上記のような監視システムがあれば、自宅に居ながら農地の状況が把握でき、必要な時だけ現場に行くことで時間と労力を抑えることが可能と考えます。農協や農業法人等と協力し、展開を進めたらと思います。
次回は具体的な内容を掘り下げていけたらと思います。

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はＷＥＢデザインをテーマにしている第0ユニットです。

今回のテーマは「CMS」について深堀していきたいと思います。

過去の技術者ブログで「WordPress」をご紹介しましたが、WordPressもCMSの一つになります。

CMSとは…
「Contents Management System：コンテンツ・マネジメント・システム」の略となり、web制作に必要な専門的な知識が無くても、WEBサイトやコンテンツを構築・管理・更新できるシステムとなります。

例えば、今読んでいただいているダンデライオンズのブログ。
これもCMSのWordpressを使用しております。

テンプレートを選んで、画像を選択するだけで皆さんに見ていただいている画面とブログを書いたり管理したりする画面を簡単に作ることができます。
実際に、このブログも30分もかからずに作ることができました。
上の画像の矢印ボタンや右下にある検索もついてきます。
我々SEが実際に1から作ると、画面を作成して、各機能を作って…となるためCMSで作る時間よりも何倍以上の時間が掛かってしまいます。

また、本来であればWEBサイトを構築しようとすると、HTMLやCSS、javascriptといった技術が必要となりますが、CMSを使うことで上記技術がなくても構築することができます。
また、簡単に更新ができること、インターネット環境があれば構築ができることなどがメリットとして挙げられます。

2021年時点で世界で一番使われているCMSは「WordPress」で全体の約40%を占めています。そのほかのCMSは数パーセントと断トツで「WordPress」が使われていることが分かります。

さてそんなCMSですが、少し前から「ヘッドレスCMS」という言葉が注目されております。

ヘッドレスCMSとは…
ヘッドレスの「ヘッド」は表示する画面(ビュー)のことを言い、表示する画面がないCMSということになります。
表示する画面を用意してくれないので、自分で用意する必要があります。

ヘッドレスCMSの代表的なメリットはデザインの自由度が上がること、表示速度が上がるなどが挙げられます。

デザインの自由度が上がるとは、通常のCMSでは表示する画面も用意してくれますが、微妙な位置調整などは簡単にはできません。変えられると言ったら画像やフォントのみとなりデザインは固定されてしまうためこだわりたいところはこだわれない、痒い所に手が届かないことがあります。
ヘッドレスCMSでは、自分たちで表示する画面を用意するため好きなようにデザインすることができるため満足のいくデザインで作成することができます。

次に表示速度が上がると書きましたが、皆さんはネットを見ていて画面がすぐ表示されないとイライラしませんか？今は何でもネット経由で行えますが、表示速度が速いのはもう当たり前になってきていると思います。
そんな中、通常のCMSでは表示される画面を毎回生成しているため表示に時間が掛かってしまいます。
ヘッドレスCMSは画面を作っておき、存在するファイルを表示するようになるため画面が早く表示されます。

上記メリットはありますが、通常のCMSとは違って自分たちで作成する必要があるのでHTMLやCSSの技術が必要となってきます。

ヘッドレスCMSで一番有名なのは「Contentful」です。
その他にも、日本で作られた「MicroCMS」やFacebookが開発したAPI「GraphQL」を活用した「GraphCMS」があります。

我々第0ユニットのようにWEBデザインの技術を持った人たちがやるのであれば「ヘッドレスCMS」を使っていくのもイイネ！と思いました。

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