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

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

EC2とは

EC2とは、Elastic Compute Cloudの略です。
EC2はAWS上に仮想サーバを作るサービスです。誰でも簡単に仮想サーバを作成することが出来ます。
今回の技術者ブログでは、実際にその手順を説明します。

インスタンスの作成

左側のメニューからインスタンスを選択し、インスタンスの作成を押します。

AMIの選択

AMI（Amazon マシンイメージ）の選択を行います。
Windowsマシン、Linuxマシン等色々な選択肢がありますが、最初はAWSに最適化されたLinuxである、Amazon Linux2から試してみると良いでしょう。

インスタンスの詳細の設定

ネットワークやサブネットの設定を行うことができます。
まずはデフォルトで大丈夫です。

ストレージの追加

デフォルトは8GiBに設定されています。
増やす場合は作成後も変更可能ですので、まずは変更しなくてもかまいません。

タグの追加

「別のタグを追加」を押し、キーに「Name」、値に自分が設定したい名前を入力します。
適宜タグ付けすることで、複数のインスタンスを作成した時に見分け易くなります。

セキュリティグループの設定

インターネットとEC2インスタンスを隔てる仮想ファイアーウォールです。よくわからない場合は、自分のグローバルIPを調べておき、まずはそのIPだけSSH接続を許可しておくと良いでしょう。

キーペアの設定

この項目ではキーペアを設定できます。ログイン情報の暗号化と復号を行うのに使われるパブリックキーとプライベートキーをキーペアといいます。
「新しいキーペアの作成」を選択し、設定したいキーペアの名前を入力し、「キーペアのダウンロード」を行います。
ここでダウンロードしたキーペアは再度入手することは出来ません。無くしてしまうと今回作成したインスタンスにログイン出来なくなるため、大切に保管して下さい。

作成実施とSSHログイン

最後に「インスタンスの作成」を押すとインスタンスが作成されます。
インスタンス起動後、先ほど作成したキーペアを使用し、SSHログインすることが可能です。

慣れればインスタンスの作成自体は数分で完了します。
もちろん、本格的に使用するためには、使用目的に沿ったスペックの選択等、覚えるべきことはあります。しかし、とりあえず仮想サーバがどんなものか知るため、触ってみたいという程度であれば、今回の手順に沿うだけで十分です。
低スペックサーバであれば、1年間は無料使用できますし、この機会にAWSで仮想サーバデビューしてみるのもいかがでしょうか？

今回の技術者ブログはこれで終了になります。
ただ、セキュリティグループについてなど、まだまだ掘り下げて説明したいことがあります。
次回以降の記事もお楽しみに。

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

今回のテーマ『ローコード開発してみよう』

今回は実際にORACLE APEXというローコードの開発環境を使ってシステムを作っていきます。
ローコードって何？ORACLE APEXって？という方は以前の記事を読んで下さい。
→技術者ブログ(2) – ローコード開発のご紹介（Oracle APEX）

あらかじめ作成しておいたユーザー情報のテーブルを元に、登録・更新機能を備えたユーザー管理画面を作成します。

まずはORACLE APEXの管理画面からページ作成をクリックして画面のレイアウトを決めます。
今回はフォーム付きレポートを選択します。

つぎにページの中にどんな情報を入れるのかを設定します。
ユーザー管理画面なので、ユーザー名・ID・パスワードを設定することにします。

たったこれだけです♪
これで作成ボタンを押すと、すでに登録されているユーザー情報が一覧で載っているページが簡単に作成できてしまいます。

この画面では右上の作成ボタンをクリックすれば新たなユーザーを登録することができるようになっていますので、ソースコードを書かなくてもアプリケーション上でユーザー情報を追加することができます。

　↓

また応用編として、ユーザー名をリンクにしてクリックするとその人の勤怠管理画面に遷移するなど、クリックひとつで簡単に設定することができます。

作ってみた感想

とても簡単に短時間で作成することができました。
ORACLE APEX初心者の新入社員でも10分もかからずに作ることが可能でした。
またレイアウトやオプションが充実しているので、幅広いアプリケーションに対応できると思います。
多くの企業で実際の開発に使用されているのも納得できます。
第2ユニットでは様々なローコード開発を行ってますので、今後も紹介していきたいと思います。

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

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

前回第0ユニットでは、WEBサイトとBootstrapについて説明させていただきました。
今回はBootstrapを利用するための方法をご紹介したいと思います。

まずは前回のおさらいもかねて、Bootstrapを利用するとどうなるかをご紹介します。
以下の画像は、弊社サイトにあるお問い合わせ画面です。

ここから、Bootstrapの利用をしないと以下の画像のようになります。

お問い合わせの入力エリアや文字のスタイルがおかしいことが分かります。
テキストボックスや文字の大きさ、配置がBootstrapで用意されているスタイルシートのクラスを利用しているため表現が崩れてしまいました。

では実際に利用する方法をご紹介します。
利用するには以下の3つの方法があります。
・Bootstrapをダウンロードする
・CDNを利用する
・パッケージマネージャを利用する

■Bootstrapをダウンロードする
この方法はBootstrapのサイトから必要なファイルをダウンロードし、HTMLでダウンロードしたファイルを読み込む方法です。
この方法であれば、ネットワークに繋がっていなくてもBootstrapを使用してWEBページの作成が可能です。

HTML記載例

■CDNを利用する
CDNとは、コンテンツデリバリーネットワークの略でBootstrapを配布する仕組みです。HTML内にそのためのタグを用意しておくだけで使えるようになるので非常に簡単に利用ができます。
ただし、ネットワークに繋がっていないと使用できないのと、自サイトではない外部からファイルを読み込むためCDNサイトが使えなくなったり、アクセスが遅くなったりすることがあります。

HTML記載例

■パッケージマネージャを利用する
パッケージマネージャとは、対象のソフトウェアのインストールから新しいバージョンへの更新、以前インストールしたバージョンの削除を容易に行えるプログラムです。
Bootstrapではnpmと呼ばれるパッケージマネージャを利用しており、Node.jsをインストールすることで同時に組み込まれます。
Node.jsに触れると説明が多くなりますので、ここではご紹介のみとさせていただきます。

実際にWEBページを作成する際に、どの方法がよいか考えて選んでみてください。

さて、次回第0ユニットの技術者ブログではBootstrapの導入の続きとしてJavaScriptに触れていきます。
お楽しみに！

リージョン及びアベイラビリティーゾーン（以下AZ）とは、AWSを利用する上で物理的なサーバを意識する、数少ない項目です。 今回の技術者ブログでは、この2つについて、簡単に説明します。

リージョン

まずリージョンですが、データセンタ群が存在する地域を指します。
現在AWSは、米国東部（バージニア北部）、欧州 (フランクフルト)、アジアパシフィック (東京)アジアパシフィック (シドニー)等々、世界中19個の地域にデータセンタ群を保持しています。

基本的には使用場所とリージョンの距離が近い程、通信レスポンスが良いです。
特別な理由がない限り、日本では東京リージョンを使うことが一般的でしょう。

AZ

次にAZですが、大まかに言えばデータセンタとイコールで考えてもらえばよいです。
ちなみに、東京リージョンには4つのAZが含まれています。
どこか一つのAZで障害が起きた場合でも、別AZは影響をうけません。
そのため、システムを別AZで平行稼働させることで、耐障害性を上げることができます。
8月23日に発生したAWSの大規模障害は、東京リージョンの一部のAZで障害が発生したことが原因です。実際にこういった事例が起きたことから、AZのマルチ化をすることがより重要視されるようになりました。

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

今回のテーマ『RPAについて』

RPAとは、Robotic Process Automationの略語であり、
事務業務や管理業務の定型作業を自動化する概念のことを表します。

ローコード開発とRPAにどんな関係があるかというと、
RPAを実現するためにRPAツールと呼ばれるソフトウェアを利用して、
自動化したい業務フローをドラッグ＆ドロップで作成することから
ソースコードを作成する処理が不要というところになります。
そのため、コーディング技術はあまり必要ではなく、ある程度の知識があれば誰でもRPAを実現できるようになっています。

【RPAツールの種類】

現在さまざまな製品がリリースされているため、
代表的なRPAツールを３つ挙げます。
（他にも多数あるため気になる方はぜひ調べてみてください）

・WinActor
NTTのグループ企業であるNTTアドバンステクノロジが開発した国産RPAツール。導入企業は2,500社を超えており、日本国内でのシェアはトップ。
1台あたりの年間利用料（保守料を含む）は標準価格90万8,000円
※WinActor実行版は標準価格24万8,000円

・UiPath
米UiPath社が開発、動作シナリオ作成・実行・管理支援などの機能群をモジュール化し、別々の製品として提供することで、小規模から大規模まで幅広く対応するRPAツール。
最小構成（開発環境×1、実行環境×1）で標準価格52万5,000円
※管理支援機能を含めた大規模な導入の場合、標準価格400万円

・WorkFusion
RPAソフトウェアメーカーである米WorkFusion社のRPAツールで、グローバルで急速な導入が進んでいる。
完全無料で提供している「RPA Express」は、世界150ヵ国で25,000以上のダウンロード実績がある。

【RPAツールの選定】

第２ユニットのRPAツール選定では、できる限り予算を掛けずにRPAを体験することを重視したため、無料で利用できるWorkFusion「RPA Express」を選択しました。

WorkFusion「RPA Express」を利用するためには、
下記URLからユーザー登録して「RPAExpressInstaller」をダウンロードします。
https://www.workfusion.com/rpa-express
※インストール要件として、Windows32ビット版にはインストールできないため注意

インストールが完了すると、「RPA Express」 が利用できるようになります。実際の画面がこちらです。

今回はRPAの紹介とインストールまでを説明しましたので、
次回は実際の使い方や動作方法などを具体的に紹介していきたいと思います。

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

今回のテーマ
『TensorFlow』について（概要）

前回の第１ユニットの技術者ブログではOpenCVを使って顔を切り出すプログラムを作りました。

ここから顔を機械に判別させるためには、切り出した画像を誰の顔なのか、機械に学習させる必要があります。
ここからやるべきことはたくさんありますが、まずは大きな流れをつかんでいただくために、今回は機械学習ライブラリの１つであるTensorFlowについて簡単に説明します。

■TensorFlowとは…

機械学習モデルの開発およびトレーニングに役立つオープンソースのコア ライブラリです。ブラウザで直接実行できる Colab ノートブックを使って、すぐに作業を開始できます。

https://www.tensorflow.org/?hl=ja

TensorFlowはGoogleが開発し、公開している機械学習ライブラリです。

ニューラルネットワーク（人間の脳のしくみを基にしたアルゴリズム）
を構築、訓練することができる

少し前に 人間の対局データを使っていないことで話題になった囲碁AIの「 AlphaGo Zero」の開発でも使われています。

※詳しくは公式サイトをご覧ください。

■TensorFlowなどの機械学習ライブラリを利用する流れ

① TensorFlowを動かす環境のセットアップ
② 画像データの用意
③ 学習アルゴリズムの作成
④ ③のアルゴリズムで①の画像データを学習させてモデルデータを生成

４つができれば、モデルデータ（学習させた結果 ）を生成できます。

今回は概要ということで、それぞれについて詳しいお話はまたの機会にしますが、
①②はネットで調べればたくさんの情報が出てくるので、そこまで大変ではないと思います。

上の中で１番難しいのは③学習モデルの作成です。
機械学習にはたくさんの手法があり、それぞれについて学ぶ必要があります。
自分たちで新しいものを作り出すためにはたくさんの勉強が必要でしょう。

■機械学習ライブラリはTensorFlowしかないのか？

そんなことは全くありません。
・scikit-learn
・Chainer
・Theano
・Keras

調べればたくさんの単語が見つかると思います。興味があればご自身で調べてみてください。

■最後に

以上、ざっくりとした説明をしましたが、少しでも読んでくださった皆さんが機械学習に興味を持っていただけたら幸いです。

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

レスポンシブデザインとはWEBサイトの構築手法です。
レスポンシブデザインの説明の前に、まずはWEBサイトの仕組みについて簡単に説明します。

皆さんが良く見るWEBサイトですが、主に2種類の言語で作成されています。
1つ目は「HTML」です。
HTMLとはWEBサイトの土台となるファイルを作成する言語で、表示したい文章や画像などを書いていきます。

例として、Internet ExplorerやGoogle Chromeなどのブラウザで見た場合以下のように表示されるWEBサイトがあります。

このページを表示するために、下の画像のようなHTMLを書く必要があります。

2つめは「CSS」です。
CSSとは見た目などの装飾をするための言語で、文字色や背景色、大きさなどの指定を書いていきます。

例として、HTMLで紹介したタンポポのWEBサイトに文字色やフォントのサイズを大きくする装飾をつけると以下のようになります。

これを実現するためには、以下の＜style>から＜/style>まで書かれている内容をHTMLに追加する必要があります。

HTMLとCSSを使用して作成したファイルを皆さんがインターネットで見るためには、WEBサーバー上にアップロードする必要があります。
この辺りは、割愛させていただきます。

さて、最近ではWEBサイトをパソコンで見る人やスマートフォン・タブレットで見る人など手段が多様化してきています。
Webサイトを見た時にPCだと綺麗だったのにスマートフォンやタブレットで見たらイマイチ…
そんなことはありませんか？
そこで私たちがテーマにしているレスポンシブデザインの登場です。

レスポンシブデザインとは…
閲覧者の画面サイズまたはブラウザに応じてデスクトップWebページが閲覧できることを目指したWebデザインの手法です。

引用　Wikipedia

弊社のWEBサイトもレスポンシブデザイン対応をしております。

PCで見たとき背景にあった画像が、スマートフォンで見たときは見出しの上に来ていたり、地図がPCで見たときは長方形だったのがスマートフォンで見たときは正方形になっていたりしています。
このようにバラバラのサイズで見ても、キレイに見ることができる手法がレスポンシブデザインです。

第0ユニットではBootstrapを使ってレスポンシブデザインを実現しています。

Bootstrapとは…
BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。
タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。

引用　Wikipedia

BootstrapにはすでにCSSが用意されているため、HTMLと簡単な設定でWEBサイトがパソコンでもスマートフォンでも綺麗に見ることができます。

次回の第0ユニット技術者ブログではBootstrapの導入について紹介したいと思います。