ITエンジニア日記 ~NO SKILL, NO LIFE~

学んだ技術や、気になることをアウトプットしていきます。プログラミング, インフラ, etc...

三菱電機のゼロディ攻撃を受けたらしいよ

久しぶりの更新になります。 今日は、少し前ニュースになった三菱電機への不正アクセスによる個人情報流出問題について。

www.itmedia.co.jp

個人情報流出によって、最大約8000人の個人情報が流出した可能性があるとのこと。
2011年~2016年の経験者採用応募者情報も含まれているとのことで、社員以外の情報まで流出してしまっているらしいです。

この流出の原因は、三菱電機の公式発表によると、

当社が利用するウイルス対策システムのセキュリティーパッチ公開前の脆弱性を突いた第三者不正アクセスが原因です。

http://www.mitsubishielectric.co.jp/news/2020/0120-b.pdf

とのことで、ゼロディ攻撃を受けたんですね。

ゼロディ攻撃とは

ゼロディ攻撃は、新たな脆弱性が発見されたとき、その問題の公表や修正プログラムが提供される前に脆弱性を突く攻撃のことです。

この攻撃の肝は
 「修正プログラムが提供される前に攻撃する」
というところで、攻撃される側の対策はだいぶ限定され、こういった攻撃の中で一番深刻になりやすいです。

今回の三菱電機の場合は、三菱電機が使用しているウイルス対先システムのセキュリティーパッチ公開前の脆弱性を突いたゼロディ攻撃だったようです。

ゼロディ攻撃は気づかないうちに攻撃を受けていることがほとんどなので、多大な被害がもたらされます。
今回はセキュリティ対策システムの脆弱性を突かれたので何とも言えませんが、こういった被害を受けるリスクを低減させるためにも、

  • OSの更新プログラムの適用
  • ブラウザやその他アプリの更新プログラムの適用
  • セキュリティソフトのパターンファイルの最新化

など、
常に端末のセキュリティ環境を最新の状態に保つことが重要だと思います。

まとめ

今回の三菱電機個人情報流出問題は他人事ではありません。

自分の使っているアプリやOS、セキュリティ対策ソフトに脆弱性が絶対に無いなんてことは言いきれません。(だって作ってるのは人間だし。)
ただ脆弱性が見つかっていないだけで、いつその脅威に晒されるかは予想できません。

常に使用しているPCやスマホの状態を気にかけて、セキュリティ環境の最新化を忘れないようにするのが大切だということを、今回のニュースで再認識しました。

【JavaScript】scriptタグのdefer属性とasync属性

HTMLのscriptタグについて、defer属性とasync属性の勉強をしました。

1. デフォルト(defer/asyncを付けない場合)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>TEST HTML</title>
  </head>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
  <script src="script3.js"></script>
  <body>
    <p>test</p>
  </body>
</html>

WebブラウザがHTMLを解析(パース)する際、HTMLを上から順に解析していきます。
上記のコードでは、headタグを解析した後に、scriptタグのJavaScriptファイルを

  1. script1.js
  2. script2.js
  3. script3.js

の順に読み込みます。
このとき、JavaScriptファイルを読み込んで、実行し終わるまではHTMLの解析はストップします。
JavaScriptの読み込み・解析が完了したら、HTMLの解析が再開されbodyタグから解析されます。

f:id:masakiXX0:20200113231430j:plain
HTMLの解析とJavaScriptの読み込み・実行【default】

2. defer

  <script src="script1.js" defer></script>
  <script src="script2.js" defer></script>
  <script src="script3.js" defer></script>

defer属性を付けると、scriptタグが出てきたらJavaScriptファイルを非同期に読み込みます。このとき、HTMLの解析はストップしません。

JavaScriptファイルの読み込みが完了しても実行はされず、HTMLの解析が続行されます。

HTMLの解析が完了したら、scriptタグの書かれた順番に上から実行されます。

f:id:masakiXX0:20200113230015j:plain
HTMLの解析とJavaScriptの読み込み・実行【defer】

2.1. deferの特徴

  • JavaScriptの読み込み時にHTMLの解析をストップさせない
  • scriptタグの順番に実行される
  • スクリプトが実行されるのはHTMLの解析が完了してから

3. async

  <script src="script1.js" async></script>
  <script src="script2.js" async></script>
  <script src="script3.js" async></script>

defer属性を付けると、scriptタグが出てきたらJavaScriptファイルを非同期に読み込みます。このとき、HTMLの解析はストップしません。

JavaScriptファイルの読み込みが完了したら、JavaScriptが実行されます。このときJavaScriptの実行は、読み込みが完了した順に行われます。
よって、scriptタグが書かれた順番通りにJavaScriptが実行されない可能性があります。

JavaScriptの読み込み実行が完了したら、HTMLの解析が再開されます。

f:id:masakiXX0:20200113230632j:plain
HTMLの解析とJavaScriptの読み込み・実行【async】

3.1. asyncの特徴

  • JavaScriptの読み込み時にHTMLの解析をストップさせない
  • scriptタグの順番に実行されない可能性がある
  • スクリプトが実行されるのは、JavaScriptファイルの読み込みが完了した直後

4. deferとasyncの使い分け

deferもasyncも付けない場合、JavaScriptの読み込み時にHTMLの解析がストップしてしまうため、パフォーマンスが悪くなるそうです。
scriptタグを使用するときは、defer属性かasync属性を付けてあげましょう。

deferとasyncの使い分けとしては、複数のJavaScriptファイルを読み込むときに、
 スクリプト間の依存関係がない場合は「async」
 スクリプト間の依存関係がある場合は「defer」
とするのがよいそうです。

まとめ

scriptタグのdefer属性とasync属性についてまとめてみました。

参考

コールセンター業務が AI, RPA, クラウド によって完全自動化するらしいよ

NTTドコモNTTデータが、AI・RPA・クラウドの技術を組み合わせて電話応対業務を自動化するサービスを共同で提供すると発表しました。

www.itmedia.co.jp

これは衝撃ですね。
上記サイトにデモムービーがありますが、電話対応を AI がしてます。
そして、AI から電話がかかってきてますよ。

しかも、4月以降に正式サービス開始とのこと。

問い合わせの電話とか9時~17時までみたいな時間の制限とか、電話先の人がPC操作とかで時間がかかったりとかあったけど、AIとRPAで対応するのならその辺も解決しそう。

気になるのは、クレーマーからの電話とかAIはどう対応するんだろう。
うまい具合にクレーマーをなだめるのかな??

使われている技術

技術的には
電話対応はNTTドコモの対話型AIサービス「ドコモAIエージェントAPI
データ入力などのPC操作はNTTデータのRPAツール「WinActor」「WinDirector」
テキストの読み上げをAmazon Web Servicesクラウド型コンタクトセンターシステム「Amazon Connect」
が担ってるらしいです。

今回は「RPA」について少し説明します。

RPA (Robotic Process Automation)

簡単に言うと、PC操作を自動化して業務を効率化するためのものです。

たとえば、普段の業務で毎回行う作業をVBAとかバッチとかで自動化して、業務効率化するのもRPAの一部といってもいいのかも。

VBAやバッチ」と「RPA」が異なるのは、
 VBAやバッチはプログラミング必要
 RPAはプログラミング不要
ってこと。

RPAはGUIの画面上でアイコンとかポチポチするだけで作業を自動化できるので、プログラミンを知らない人でも作業自動化できます。

つまり、自動化したい業務を行っている人 = その作業に精通したプロフェッショナルな人がプログラミングを知らなくても、その作業をRPAを使って自動化できます。
システム開発のように他者が請け負って開発するときに発生する認識の齟齬など発生せずに作業を自動化できるメリットもあると思います。

RPAとロボット

RPAをイメージするには、工場と、基幹システム(ERP)で比較して考えてみるとわかりやすいかもです。

【工場の場合】
工場には生産設備があります。
その生産設備を動かして、産業用ロボットが製造を行います。
人は、ロボットのメンテナンスや、ロボットができない作業を行います。

【基幹システムの場合】
会社に基幹システム(ERP)があります。
この基幹システム(ERP)を使って、RPA(ソフトウェア型ロボット)が入力作業などの操作を行います。
人は、RPAツールのメンテナンスや、システムでできない作業を行います。

まとめ

身近なところにAIがやってきますね。
AIとセットでRPAなどの技術も働き方改革によって注目を浴びています。
システム屋にRPA関連の仕事が来ることはあまりないかもしれませんが、技術としては知っておいた方がいいと思います。

RPAのコミュニティなどもあるので、興味がある方は覗いてみるといいかもです。

それでは、今日はここまで。

トヨタが「ネットにつながる実験都市」を作るらしいよ

トヨタ自動車が、あらゆるモノやサービスがネットを介してつながる都市「コネクティッド・シティ」を静岡県に建設すると発表したとのことです。

www.itmedia.co.jp

完成した街には実際に人が住んで(最初はトヨタの従業員や、プロジェクト関係者のみ)、室内用ロボットやセンサーで取得したデータをAIが解析する健康状態管理システムなど最新技術を体験・使用できるらしいです。

2020年からは5Gが日本で始まり、さらにIoT関連が盛り上がりそうなので「コネクティッド・シティ」というのはまさに流行の波に乗った感じがします。

今回は5GIoTというキーワードについて簡単に書いてみます。

5Gとは

5Gは、第5世代移動通信システムのことです。

Q:第5世代ということは、第1~4世代もあったの?

A:あります。

3G, 4Gは現在主流の通信規格で携帯電話(ガラケー)やスマートフォンの通信を支えています。(LTEは3Gと4Gの間ぐらいと考えてもらえればいいです。)
3Gの通信速度は384kbps~14Mbpsでメールやネットが不自由なくできる速度になり、 4Gの通信速度は50Mbps~1Gbpsとゲームや音楽、動画などのリッチコンテンツスマートフォンでできるようになりました。

そして次はの通信規格が5G
5Gの特徴は大きく3つ。

  • 高速・大容量
  • 低遅延
  • 多数端末との接続

通信速度は最大20Gbpsにもなると言われており、現在の光回線よりも早いです。
もはや固定回線とかWiFiとか使うよりも高速に通信できちゃいます。

iot.kddi.com

IoT(Internet of Things)とは

IoT(Internet of Things)はモノインターネット経由で通信すること。

スマホで外出先からインターネット経由でエアコンの電源を入れられたり
センサーを使って畑の土の乾き具合を検出してインターネット経由でPCやスマホに通知をしたり
と、様々なモノ(PC類やスマホ以外)をインターネットにつなぐことをIoTと呼びます。
上記の例だと、エアコンやセンサーをインターネットに接続しています。

IoTによって、生活がもっと快適になりそうな感じがしますね。

iot.kddi.com

IoTの問題点

現在のIoTの問題点として、セキュリティの問題がありそうです。
PCやスマホなら、OSの定期セキュリティバッチの適用や、アンチウイルスソフトを入れたりしてウイルス対策できます。
しかし、IoTで使われる機器ではPCやスマホ並みのセキュリティ対策はされていないのが現状です。なので、IoT機器はサーバー攻撃の標的となっています。

まとめ

コネクティッド・シティ、面白そうだなぁ。
完成したらぜひ行ってみたい場所です。

今回はコネクティッド・シティから、IoTと5Gについて書いてみました。
2020年はこの辺の技術の進歩がめぐるましくなりそうなので、アンテナ張っておこうと思います。

AI美空ひばりが新曲を歌ってたらしいよ

今年の紅白歌合戦AI美空ひばりが歌っていました。ところどころVOCALOIDっぽい歌い方のところがありましたが、全体的に本当に人が歌っていると思わせる歌唱力でした。

www.itmedia.co.jp

「AI美空ひばり」はYAMAHAVOCALOID:AIという歌声合成技術で作成しているとのこと。

VOCALOID:AI と AI美空ひばり

VOCALOID:AI』は当社が独自に開発した、人工知能技術を搭載した歌声合成技術です。

いままでのVOCALOIDは、作り手が歌いまわしなどを調声することで人の歌い方に近づけていました。
VOCALOID:AIでは、深層学習(ディープラーニング)を使用して音色や歌いまわしを学習させ、学習データとした歌い手の歌い方で、任意のメロディー、歌詞を歌わせることができるらしいです。

詳しくは下記を参照。

www.yamaha.com

今回のAI美空ひばりでは、美空ひばり生前の歌声や話し声を学習データとしてディープラーニングを行わせ、美空ひばりの歌い方や話し方を学習したVOCALOID:AIに、新曲「あれから」を歌わせたということ。

AI美空ひばりの歌を聴いて、中には嫌悪感を抱く人もいたそうです。(人権とかそんな感じのことで)
自分はどっちかというと最新技術スゲーの方が勝ってしまうので、紅白歌合戦でAI美空ひばりの歌を聴いて(YAMAHAの技術力に)感動していました。

まとめ

紅白歌合戦でAI美空ひばりを聴いてから、AI美空ひばりを調べて、このブログ書きました。
これからVOCALOID:AIの技術がさらに進歩していくと、いつかは本物の人間が歌う歌と、VOCALOIDが歌う歌の区別がつかなくなる日も近いんだろうなぁ...
と思いながら2019年最後の時を過ごしています。

今年のブログ更新はこれが最後となります。
来年も引き続き「ITエンジニア日記 ~NO SKILL, NO LIFE~」で学んだことや興味あることを書いていきますので、興味がある記事も、ない記事も読んでみてください。

それでは、みなさんよいお年をお迎えください。

サーブレット / JSP とは

次案件でJavaサーブレット/JSPでWebアプリを開発することになりました。
(実際にコーディングするのは自分じゃないかも。)
サーブレット/JSPはなんとなくは知っていました、実際に開発で触るのは初めてです。

なので、今回はまず「サーブレット」と「JSP」って何?
っていうところから勉強してみます。

1. サーブレット(Servlet)

サーブレットは、Javaでサーバーサイドのプログラムを作るためのものです。
サーブレットはブラウザからのリクエストによってアプリケーションサーバー(APサーバー)上で実行され、実行結果をHTMLとしてブラウザにレスポンスします。

また、サーブレットJavaのクラス(サーブレットクラス)なので、ブラウザからリクエストがくるとAPサーバー上でインスタンスが生成され実行されます。

1.1. サーブレットでHTMLを出力

下記のコードはサーブレットクラスのdoGet()メソッド(サーブレットクラスがGETリクエストで呼ばれた場合に呼ばれるメソッド)で、HTMLを出力するプログラムです。

public class SampleServlet extends HttpServlet{
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException{
            
            response.setContentType("text/html; charset=UTF-8");
            PrintWriter out = response.getWriter();

            // HTMLの生成
            out.println("<html>");
            out.println("<head>");
            out.println("<title>割引額</title>");
            out.println("</head>");
            out.println("<body>");
            out.println("<p>1980円の20%引きは" + 1980 * 0.8 + "円です。</p>");
            out.println("</body>");
            out.println("</html>");
    }
}

このメソッドによって生成されるHTMLは下記。

<html>
    <head>
        <title>割引額</title>
        <body>
            <p>1980円の20%引きは1584円です。</p> 
        </body>
    </head>
</html>

サーブレットクラスのdoGet()メソッド内でprintln()メソッドで主力した文字列がHTMLとして生成されていることわかります。

1.2. サーブレットの問題点

サーブレットはHTMLをいちいちprintln()で記述しないとならず、だいぶ冗長です。
修正や機能追加があった時の修正も面倒くさそうです。
また、HTMLを少し修正したいだけでもサーブレットクラスはJavaのクラスなので、
  コード修正 ⇒ コンパイル ⇒ デプロイ
を実施しないといけません。

このような面倒を解決するために生まれたので、JSPとなります。

2. JSPJava Server Pages)

JSPサーブレットと同じでサーバーサイドのプログラムです。
サーブレットと違うのは、JSPファイルはコンパイル不要。APサーバーに配置するだけで環境に反映されます。

なぜかというとJSPの場合、ブラウザからリクエストを受けると、APサーバー(Tomcatなど)がJSPファイルを自動的にサーブレットクラスに変換し、コンパイルしたうえでインスタンスを生成してくれるからです。

先ほどサーブレットで書いたプログラムをJSPで書くと下記のようになります。

<html>
    <head>
        <title>割引額</title>
        <body>
            <p>1980円の20%引きは <% out.println(1980 * 0.8); %> 円です。</p> 
        </body>
    </head>
</html>

<% ~ %>で囲まれているところがJavaのコードが埋め込まれている場所です。
Javaのコードの中にHTMLを埋め込むよりも、メンテナンス性が断然によっそうです。

3. サーブレットJSPの連携

実際にはサーブレット単体、JSP単体で開発を行うことはなく、サーブレットJSPを連携させてWebアプリを作ります。
MVCモデルでいうと
 ・Model:ビジネスロジックを担うのは一般的なJavaクラス
 ・View:レスポンスとして返すのはJSPファイル
 ・Controller:リクエスト受けるのはサーブレットクラス
という感じで役割を分けます。

4. まとめ

サーブレットJSPについて、それぞれどんなものかをまとめてみました。
まだJSPからサーブレットへの値の受け渡し方法とか、フォワードやリダイレクトなどなどありますが、今回はいったんここまで。

参考

【React】Reduxによる状態管理

前回、ReactでなぜReduxを使うのか書きました。
今回は、Reduxによる状態管理について英語とかも読みながら自分なりにまとめてみました。

【目次】

1. Reduxの状態管理

Reduxの状態管理モデルは、Fluxという状態管理モデルの思想をもとに作成されたらしいです。

1.1. Fluxの状態管理モデル

f:id:masakiXX0:20191225213916p:plain
Fluxの状態管理モデル

https://github.com/facebook/flux/tree/master/examples/flux-concepts

Fluxでは上記図のように状態管理しており、
 Action ➡ Dispatcher ➡ Store ➡ View ➡ Action ・・・
とデータが1方向に流れていることがわかります。

Dispatcher

DispatcherはActionを受け取り、Dispatcherに登録されているStroeにActionを送ります。

ActionとStoreの橋渡しみたいなことしてる。

Store

アプリケーションのデータを保持するもの。
Store内のデータは、Actionによってのみ変更される。
Storeのデータが変更されるたびに、Viewにその変更が反映される。

例えば、検索アプリでいうと「検索バーに入力された値」「検索結果」などといった値が保持され、Actionによって変更される。

Actions

Actionには実行させたいイベントが定義されている。
StoreにActionがDispatchされると、Store内のデータが更新される。

例えば、検索アプリ内で「検索ボタンを押したら入力された値でデータを検索したい」といったリクエストみたいなの。

1.2. Reduxの状態管理モデル

f:id:masakiXX0:20191225222349p:plain
Reduxの状態管理モデル

ReduxにはReducerというものが出てきます。

Reducer

ReduxではActionはただのオブジェクトを返す関数で、ReducerがActionから受け取ったイベントごとに実際の処理を行う。

1.3. Action と Reducer

Actionは下記のようにイベントを識別するためのtypeと、Actionの実行に必要なデータ(引数)を定義するだけ。

export const onSearchClick = (value) => ({
    type: "SERCH",
    value,
});

export const onResetClick = (number) => ({
    type: "RESET",
});

Reducerでは、現在のstateとActionから新しいstateを作り出します。

下記の例だと、Actionのtypeによって処理を分岐しています。
typeが「"SERCH"」であれば、現在のstateのserchValueの値を引数のaction.valueで更新しています。
typeが「"RESET"」であれば、現在のstateのserchValueの値を空文字で更新しています。

const initState = {
    serchValue: "",
};

export default (state = initState, action) => {
    if (action.type === "SERCH") {
        return {
            ...state,
            serchValue: action.value,
        };
    } else if (action.type === "RESET") {
        return {
            ...state,
            serchValue: "",
        };
    } else {
        return state;
    }
};

このReducerからreturnされたstateが、Storeに反映されViewが更新されます。

2. まとめ

ReactはViewに特化しているため、データの管理について不便なことがでてきます。
この不便を解消するために、Reduxというフレームワークを使ってデータの状態管理を行うといった感じです。

記事内で間違いなどありましたら、ご指摘いただけると助かります。