dandelionS Blog

For this engineer’s blog, I would like to introduce the learning content that I am working on on a daily basis. I am from the first unit working with themes such as AI and big data. This time, I will introduce a simple model for classifying images using TensorFlow.

TensorFlow is an open-source machine learning library widely used for machine learning and deep learning. It can be used for various tasks such as image classification.

To classify images with TensorFlow using the Python language, follow these steps:

1. Install TensorFlow

2. Load the dataset

This example uses the MNIST dataset. The MNIST dataset contains 60,000 training images and 10,000 test images of handwritten digits.

To load the MNIST dataset, use the following code:

This code reads the MNIST dataset and splits it into training and test images.

3. Preprocess the data

MNIST images are grayscale images and are all 28×28 pixels in size. Before training the model, we need to normalize the images.

To normalize the image, use the following code:

This code normalizes the value of each pixel in the image to a range of 0 to 1.

4. Define the model

This example uses a simple model. The model has two layers: a convolutional layer and a fully connected layer.

The convolutional layer extracts features from images. The fully connected layer classifies the image based on the features extracted by the convolutional layer.

Use the following code to define the model:

This code defines a model with four layers:

5. Compile the model

To compile the model, you need to specify the loss function, the optimizer, and metrics.

The loss function is used to measure how well the model performs on the training data. The optimizer is used to update the weights of the model to minimize the loss function. Metrics are used to evaluate model performance on training and testing data.

Use the following code to compile the model:

This code uses “sparse_categorical_crossentropy” for the loss function, “adam” for the optimizer, and “accuracy” for the metric.

6. Train the model

To train the model, run the code below:

This code trains the model for 10 epochs (iterations).

7. Evaluate the model

To evaluate the model, run the code below:

This code calculates the model’s accuracy on the test data.

8. Make predictions

To make predictions on a new image, run the code below:

This code outputs the predictions the model made on the test image.

This was the first step toward image recognition. In this blog, I introduced the basic steps for training a model for image classification using TensorFlow.

Hi, I am “Jitsuharan” who belongs to the 2nd unit.
I joined Dandelions in April of this year!

Career History

I am from Nagano Prefecture and I attended a science related university in Nagoya. Before joining the company, I had very little knowledge and no experience in the field of IT, but after joining Dandelions, I received an IT training and I was able to obtain the “IT Passport” qualification. Currently, I am studying hard to obtain other qualifications!

Current work

After doing a 3 months IT training, I started in July working on my current project. I am creating a design document for an application management system using Outsystems. At first, they were a lot of things that I did not understand and it was quite difficult. However, and thanks to the support of my senior colleagues and fellow project members, I gradually got used to the work. I think it is important to ask my seniors about things I do not understand or have questions about, and it helps me take actions and progress. I will continue to learn a lot from my seniors!

Now I will introduce my daily schedule.
8:40 AM: I go to work
9:00 AM: I start working
9:30 AM: Morning meeting (with my coworkers, we confirm the day’s work and share information)
12:15 PM: Lunch break (I often eat lunch with my project members at the cafeteria)
13:15 PM: I restart working
16:00 PM: I write on my “progress report” today’s work
18:00 PM: I leave work

Self-introduction

I grew up in a small town called Achimura in Nagano Prefecture. Compared to Nagoya, it is very rural and empty! I still have fond memories when I was in high school of walking an hour to the closest bus stop to hang out with friends. They are not many things to do here, but Achimura also has some famous tourist spots! It is becoming a hot topic lately, but it is the place with the most beautiful starry sky in Japan! You cannot see many stars in Nagoya, but every time I step outside my family’s house, the starry sky is as beautiful as if it was a planetarium! I love this starry sky and I often go back to my hometown to look at the stars. (There is a high probability that it will be cloudy on the day I return home.)

The flowers of the peach trees of Achimura are also famous. During the blossom season, many tourists come to Achimura to see them. I went to see them this spring too and it was so beautiful! As you can see on the picture, the entire area is colored with red, white, and pink flowers, which is amazing! The day this place will become an Instagrammable spot is near… The place where you can see the peach flowers is close to the place where you can take a starry sky tour, so I think it is a good idea to visit both places! There are also various tourist spots such as hot springs and glamping facilities, as well as delicious food, so please come and visit my hometown, Achimura!

That is all for now.
Please look forward to the next employee introduction!

ご覧いただきありがとうございます。
第2ユニット所属の「じつはらーん」です。
新入社員として、今年の4月に入社しました！

経歴

長野県出身で、名古屋の理系の大学に通っていました。入社まではITに関しての知識がほぼなく未経験でしたが、入社してからはITに関しての研修を受け、ITパスポートの資格を取ることが出来ました。現在は他の資格取得に向け勉強を頑張っています！！

現在の業務

3ヶ月の研修を受け7月から現在のプロジェクトに参画しています。現在はOutsystemsを使用した申請管理のシステムの設計書を作成しています。初めての業務はわからないことがたくさんあり大変です。ですが、周りの先輩や同じプロジェクトメンバーのサポートのおかげで少しづつですが業務に慣れてきました。わからないことや疑問に思ったことなどは先輩に聞き、自分ができることは何かを考え行動することが大事だと思いました。今後も先輩方の行動を見てたくさん学んでいこうと思います！！ここで私の一日のスケジュールを紹介します。

8:40 　出勤
9:00　 作業開始
9:30 　朝会　(一日の作業確認、情報共有)
12:15 　昼休み　(食堂でプロジェクトメンバーと昼食を食べています)
13:15　 作業再開
16:00 　進捗報告　(一日の作業を報告)
18:00　 退勤

自己PR

私の出身は長野県の阿智村という場所です。名古屋に比べるととても田舎で何もないです！高校生の時、遊びに行くのにバス停まで歩いて一時間かけて行っていたのは今でもいい思い出です。それほど何もない場所です！ そんな阿智村ですが、有名な観光スポットもあります。最近は少しずつ話題になっていますが、日本一星空が綺麗な場所なんです！！名古屋ではあまり見られない星も実家の外に出ればプラネタリウムくらいきれいな星空が広がっています！！この星空が私は大好きで星を見に帰省したりしています。（帰省する日は高確率で曇りです泣）

ほかにも阿智の花桃が有名です。シーズンになるととても多くの観光客が花桃を見に阿智村にやってきます。今年の春に私も見に行きましたがとてもきれいでした！！見渡す一面が、赤、白、ピンクなどの花桃で彩られており最高です！！！ここがインスタ映えスポットになる日も近いでしょう…花桃が見られる場所は星空のツアーを行っている場所と近いので両方を見に訪れるのがいいと思います！ほかにも温泉やグランピング施設など様々な観光地やおいしい食べ物もあるので、ぜひ皆さんも私の故郷「阿智村」へ行ってみてください！！

今回は以上になります。
次回の社員紹介もお楽しみに～！

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
本記事では、第0ユニットが注目している「React」についてご紹介をします。

Reactとは？

Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリです。React.jsやReact.JSと呼ばれることもあります。よくAngularJSやjQueryと比較されますが、React自体はフレームワークでなく、あくまでもUIを構築するだけのライブラリです。

投稿者もこの記事を書く上で、調べるまで前者の人間でした。
実際、第0ユニットで利用しているMonaca上で、フレームワークを使用したテンプレートを作成する際、ReactやAngularJSが選べるため、わりと勘違いすることが多いかもしれないです。

Reactは、開発元の「Facebook」をはじめ、「Instagram」はもちろん、「Yahoo!」「Netflix」など、世界中で数多く採用されているみたいです。

特徴

・宣言的なView
・コンポーネントベース

宣言的なView

Reactは、Webアプリの各部分のView（見た目）を、「こういう表示にしたい」と宣言的に記述できます。
記述について触れましたが、ReactのViewの記述にはJSXという構文を使用します※1。
JSXは、HTMLとほぼ同じ構文で記述でき、JavaScriptの処理も組み合わせた記述も可能です。JSXを使うことで、HTMLのようにシンプルでわかりやすい宣言的なコードが書けます。
JSXの書き方について、投稿者の所感では、人によっては違和感を拭うのに時間がかかるかもしれないです。
※1…Reactを使う際にJSXを必ず使わなくてはいけないわけではないようです。

コンポーネントベース

Reactでは、WebアプリのUIをコンポーネントと呼ばれる部品に分割して管理します。コンポーネントは、単独で機能する再利用可能な部品です。大規模なJavaScriptコードも部品化させることで保守性を高め、既存のReactコンポーネントを再利用することで、開発工数を減らすことができます。

さて、ここまでの特徴のイメージを持ってもらうために、サンプルコード(中身部分)を用意しました。

JSXの書き方として、文字列以外の値（数字、boolean、変数など）を HTML タグの属性に代入する際には {} を使う特徴があります。※2
※2…他にも沢山特徴はありますが、今回は割愛させて頂きます。

例として、37行目を見ると{this.onInput}と書かれていることが確認できるかと思います。
ここでは、onInput(<input> 要素の値が変更)の際に、定義しているonInputを呼び出し、setStateによってnameの状態をイベントから取得した際の値で変更しています。
このようにコンポーネント(この例ではテキストボックス)毎に分割してWebアプリのUIを作っていきます。

1. import React, { Component } from 'react';
2. export default class Todo extends Component {
3.     constructor(props) {
4.         super(props);
5.         this.state = {
6.           todos: [],
7.           name: ''
8.         };
9.       }
11.       //テキストフィールドに入力された値を name として state に保存
12.       onInput = (e) => {
13.         this.setState({
14.           name: e.target.value
15.         });
16.       }
17.       //登録ボタン処理
18.       addTodo = () => {
19.         const { todos, name } = this.state;
20.         this.setState({
21.           todos: [...todos, name]
22.         });
23.       }
24.       //削除ボタン処理
25.       removeTodo = (index) => {
26.         const { todos, name } = this.state;
27.         this.setState({
28.           todos: [...todos.slice(0, index), ...todos.slice(index + 1)]
29.         });
30.       }
32.       render() {
33.         const { todos } = this.state;
34.         
35.         return (<div>
36.         超簡易版ToDoりすと<br/>
37.           <input type="text" onInput={this.onInput} />
38.           <button onClick={this.addTodo} >登録</button>
39.           <ul>
40.             {todos.map((todo, index) => <li key={index}>
41.                 {todo}
42.           <button onClick={() => { this.removeTodo(index) }}> 削除</button>
43.             </li>)}
44.           </ul>
45.         </div>);
46.       }
47. }

上記ソースコードを環境整えた後にブラウザで表示してみました。
テキスト入力欄にデータを入れて、登録ボタンを押すと
画面上のリストが更新されたのが確認できます。
このように、データをどのように配置するかを定義しておくだけで、データの変更を検知し、自動的に表示を更新する。といった点もReactならではの特徴です。

今回はReactについて紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに！

ご覧いただきありがとうございます。

はじめまして、今年4月ダンデライオンズに入社した中国出身の「チェン」です。

経歴

来日前、中国で理系の大学を卒業し、そのまま機械エンジニアとして3年間働きました。日本のアニメや文化に興味があるために、独学で日本語をN1まで勉強していました。そして、日本に留学することを決意しました。

来日後、日本の文系大学院に入学しました。去年の9月大学院を卒業し、今年の4月にダンデライオンズに入社しました。今は第1ユニットに所属しています。

現在の活動

入社してから基本的なIT知識の研修を受けました。プログラム言語はもちろん、社会人にとって必要なビジネスマナーもしっかり学んでいきました。研修期間中にITパスポート資格を取得し、現在は基本情報技術者資格に向けて勉強しています。また、8月からプロジェクトに参画することになり、学ぶことたくさんあってなかなか難しいですが、先輩たちがいつも助けて頂いたおかげで、だんだん慣れてきました。これからもっと頑張りたいと思います。そして、一日のスケジュールも紹介したいと思います。

興味

激辛料理大好きです！激辛料理に挑戦することが好きです。それでは、最近食べた激辛料を紹介させていただきます。

まず一つ目はこちら、COCO壱番屋の激辛料理です。ご存知かもしれませんが、COCO壱番屋では、カレーの辛さを選択することが可能です。1辛の32倍と言われる一番辛い15辛カレーです。すごく美味しく頂きました！

二つ目は、名古屋ですごく有名な中国料理「味仙」の台湾ラーメンです。台湾ラーメンがそもそも辛いですが、普通の台湾ラーメンで満足できない自分は、いつも一番辛い５辛のラーメンを食べます。

また最近は、キャンプにはまっています。美しい夕日を楽しみながら、美味しいキャンプ飯を食べるのは最高でした！

以上になります。

次回の社員紹介をお楽しみに！

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

第3ユニットでは、ダンデライオンズ社内のインフラ管理をしております。

今回は、社内ネットワークの強化のために導入したUTMについてお話します。
導入したUTM機器は、FortiGateというもので、世界で最も導入されているUTMの１つです。

次世代ファイアウォール（NGFW）FortiGate

UTM（FortiGate）とは

UTM（FortiGate）は、以下に挙げるような複数のセキュリティ機能を1台のきょう体に統合している機器です。

・アンチウイルス（アンチスパイウェアを含む）
・Webコンテンツフィルタリング
・SSL-VPN、IPSec-VPN
・ファイアウォール
・IPS（不正侵入制御）
・アンチボットネット
・アンチスパム
・アプリケーション制御

Webフィルターの設定

業務外のインターネット利用をブロックする仕組みです
FortiGateのWebフィルタは「カテゴリ単位のフィルタリング」「URLでのフィルタリング」が設定できます。
Webフィルタを適用することにより、ユーザーのWebアクセスをブロックしたり、監視することが可能です。
今回は、「カテゴリ単位のフィルタリング」を実施しました。

新規Webフィルタの作成

「FortieGuardカテゴリベースのフィルタ」をONにし、
その下の、カテゴリ毎に、ブロックするかログに残すのみ（モニタ）か設定します。

ファイアウォールポリシーにWebフィルタを設定

社内ネットワークのファイアウォールポリシーに作成したWebフィルタを設定します。

指定したカテゴリが機能しているか確認

実際に閲覧を禁止しているカテゴリのWebページを表示すると以下のように表示されることが確認できました。

以上となります。

FortieGateは、他にも様々なセキュリティ対策が行えますので、随時設定を行いたいと思っています。

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