技術者ブログ-デザインの4原則-

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は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)にバックアップをして、片方を物理的に切り離しています。

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

技術者ブログ:(Outsystems)Reactive開発方式の紹介

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、ローコード開発をテーマにしている第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が対戦相手になる

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

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

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

囲碁AI「AlphaGo」

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

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

「HELLO WORLD」開発環境

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

技術者ブログ-サイト運営

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

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

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

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

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

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

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

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

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

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

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

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

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



技術者ブログ:Outsystems導入とサンプル画面作成の紹介

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

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

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

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

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

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

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

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

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

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

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

自動生成されたUsers画面のレイアウト
自動生成されたUsersDetail画面のレイアウト。Entityの各項目に対する入力欄が自動生成される

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

Users画面をブラウザで開いた様子。Userエンティティ内のデータが一覧表示されている
UserDetail画面をブラウザで開いた様子。選択したレコードの値が詳細表示されている

作ってみた感想

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

技術者ブログ-監視システム

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

OLYMPUS DIGITAL CAMERA

防犯・監視カメラ

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

第一ユニットでは

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

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

監視システムの概要

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

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

技術者ブログ-CMS深堀

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はWEBデザインをテーマにしている第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ユニットの技術者ブログもお楽しみに!

Cloud Commander

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、クラウドをテーマにしている第3ユニットです。
クラウドではないのですが、興味あるソフトを見つけたので紹介させてもらいます。

Cloud Commanderとは

WebDavのように、Webブラウザからファイルを操作できるようにするアプリケーションです。 画像などもブラウザ内でプレビューできます。また、遠隔でコンソール操作も可能です。

Cloud Commanderのインストール

Cloud Commanderはlinux上で動くアプリケーションです。curlコマンドでダウンロードとインストールを一括で行うことができます。Cloud Commanderはnodejsで動いているため、こちらもインストールする必要があります。これは、yumでインストールすることが可能です。

curl -SL https://rpm.nodesource.com/setup_7.x | bash –
yum install -y nodejs gcc-c++ make
npm i cloudcmd -g
npm i gritty -g

インストール完了後、以下のコマンドを実行することでCloud Commanderが起動します。

nohup cloudcmd –terminal –terminal-path “gritty –path here” –save &

ブラウザからアクセスする

この時点でリモートのクライアントからブラウザにアクセスすれば利用できる状態になっています。

あまり手間もかからずインストール可能で、手軽にファイルのアップロード、ダウンロードを行えるため、公開ファイルサーバとしても使えそうです。
色々なlinuxアプリケーションを見てきましたが、その中でも特にお勧め度が高いです。linuxを扱える人は良ければ試してみませんか?

今回の技術者ブログはこれで終了になります。
次回以降の記事もお楽しみに。

技術者ブログ-ローコードツールのトレンドについて

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

今回のテーマ『ローコードツールのトレンドについて』

まず初めに弊社ではOracle Application Express(APEX)を利用して、
社内システムを構築しておりますが、国内でのAPEXがどの程度導入されているのか?
今後も利用していくべきなのか?といった視点でトレンドを紹介し、どのローコードツールに着目していくかも選定していきたいと思います。

【APEXの国内での導入事例について】

APEXの成功導入事例の記事を参考にさせていただくと、24事例紹介されているが日本の1事例しか挙げられておらず、海外での事例が多く挙げられているため、日本でのシェア率はそこまで高くないのでは?という印象を受けます。

また、APEXは部門単位の小規模アプリケーションの作成や、
業務の効率化に使う簡易アプリケーションの作成などで利用されることが多いため、案件というよりは、弊社と同様に社内システム管理として利用されることが多いのかな?と感じます。

【国内でのローコードツールのトレンドについて】

ITreviewにて、ローコードツールのトレンドを調べてみました。
※レビュー数と評価が高い上位3点を選出

Claris FileMaker
固有の課題を解決するカスタムAppを迅速に開発するローコード開発プラットフォーム。
小さなチーム・大きなチーム、デバイスを問わずリアルタイムで安全に情報を共有でき、モバイル、コンピュータ、Web、オンプレミス、クラウドで動作させることができます。
35年以上の歴史があり、世界中で累計で2000万ライセンス以上の実績。

OutSystems
アプリケーション開発を可視化し、既存のシステムと簡単に統合、必要であればカスタマイズされたコードを追加することができるローコード開発プラットフォーム。
様々なOSやデバイスでの利用に対応したアプリケーションの開発が行えるため、OSやデバイスの違いを開発者が意識しない。
開発ライフサイクル全体に対応しており、設計、コーディング、デプロイ、監視・管理の仕組みをトータルに提供。
グローバルで広く利用されており、国内でも110社以上の導入実績。

PowerApps
マイクロソフトが提供するビジネスアプリケーション作成ツール。
PowerPointのような直観的な操作と、Excelのような関数を入力するだけでビジネスアプリケーションを作成可能。
数多くのデータソースに接続できることが特長でSharePoint、SQL Server、Office 365、Salesforceなどと接続してデータを取り込むことが可能。
IT業界を中心に、世界中の企業で導入・活用。

評価が高いツールとしてはやはり実績で選ばれている感じが強いですね。
3点のツールもローコード開発として提供している機能は同じような感じだが、
それぞれの特徴を生かしてどれを利用するかを考える必要があります。

【ローコードツールの選定にむけて】

トレンドや導入実績から見ても、APEXを導入している企業は少ないことがわかりました。
そのため、ローコードツールを生かして案件参画を検討しているのであれば、その他のツールに目を向ける必要がありそうです。

選定に向けて重要となってくる点として、
トヨタ自動車がOutsystemsを採用しており更なる展開を図っているという情報があり、中部地方でのOutsystemsの需要が高まってきている感じがします。
実際に何名か案件に携わったこともあり、中部地方の企業として非常に関係の深い話となりますので、今後はOutsystemsにも着目していこうと思います!

今回はトレンド紹介と今後のツールの選定について説明しましたので、
次回はOutsystemsではどのようなことができるのか等を紹介したいと思います。