Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

ICMR3日目:ポスターセッションが面白かった&BanquetでAwardの発表

こんにちは。@です。
ICMR3日目に参加しました。この日はメインカンファレンスの2日目で最後にBanquetがありました。

2日目の記事は次の通りです。
acro-engineer.hatenablog.com

参加セッションは次の通りです。

  1. Oral 2 Multimedia Content Analysis
  2. Oral 3 Multimedia Applications
  3. Poster Spotlight Session
  4. Poster/Demo
  5. Keynote 2
  6. Oral 4 Video Analysis
  7. Banquet

Oral 2 Multimedia Content Analysis

このセッションでは、Hypergraphを使ったコンテンツの関係性抽出や音楽のデータセット構築など様々な研究がありました。

このセッションで面白かったのは、建物の建築年数を推定する論文です。
論文中で背景のパッチ除去や特徴のある領域を切り出すような方法をとり、最後に機械学習を用いて世代を推定する分類を行っていました。

問題設定や手法が独特で面白いと感じました。

Oral 3 Multimedia Applications

3論文中、2論文が動画からテキスト領域を検出する論文です。

テキスト領域の検出は小さい領域が多くて難しかったり、領域の区分を識別したりと様々なタスクがあるようです。

テキスト領域を動画から検出するにあたり、動画の性質(時間方向)を用いた手法が利用されていました。
時系列があるといった点が画像と異なり非常に特徴的でした(時間の前後方向)。

Poster Spotlight Session

Poster Spotlight Sessionは一人80秒の時間でプレゼンを行っていました。
そのため、スピーディに発表者がアピールをしていました。

この内容に関する質問・議論はポスターのタイミングで受け付けるとのことです。
かなり、テンポよく進みました。面白いと感じたスライドはもちろん、後で聞きに行きました。

Poster/Demo

2日目に聞けなかったポスターを含め、ポスターを回りました。
Spotlight Sessionで聞いてわからなかったところや触れられていない詳細に関する質問をできます。
質問をすることで、論文に対する理解が深められて面白いです。

f:id:acro-engineer:20180613140540j:plain:h250

そして3日目もドーナッツ!、正直、太らないかが心配です。

Keynote

東大の山中教授より、Keynoteで話がありました。
内容は、研究されているデザインやロボットです。
かつての研究の発表や展示内容の紹介がありつつ、デザインやロボットの方向性の説明がありました。
発表時に再生された実際の展示内容のビデオやデモ動画の動きにインパクトがありました。

学会の内容とは分野が異なり面白い内容だと感じました。

Oral 4 Video Analysis

このセッションは動画解析に関する内容です。
動画のシーケンスから類似シーケンスを自動的に分割する手法など非常に面白いです。
アルゴリズム動的計画法特異値分解を用いた力技とそれに対する工夫が用いられており、個人的には好感が持てる手法でありました。
IBM所属の方発表で、この手法はWatsonに組み込む予定があるようです。

Banquet

3日目でメインカンファレンスは終了です。最後にBanquetがありました。
会場付近にあるホテル ニュー グランド 横浜で開催され、非常にきれいな内装でした。

f:id:acro-engineer:20180613221359j:plain:h250

アワードの紹介と来年のICMRの開催場所の案内です。
Best PaperとBest Multimodal Awardの方にはNVIDIA社提供、TITANVが贈呈されていました。

f:id:acro-engineer:20180614005533j:plain:h250

来年はカナダで6月10日〜13日に開催される予定です。

f:id:acro-engineer:20180613221423j:plain:h250

最後に

次はICMR2018の最終日です。企業からの発表とACM MMのWorkshopがあります。
これまでと発表の特色が異なりそうなので、楽しみです。

Acroquest Technologyでは、キャリア採用を行っています。


  • ビッグデータHadoop/Spark、NoSQL)、データ分析(Elasticsearch、Python関連)、Web開発(SpringCloud/SpringBoot、AngularJS)といった最新のOSSを利用する開発プロジェクトに関わりたい。
  • マイクロサービスDevOpsなどの技術を使ったり、データ分析機械学習などのスキルを活かしたい。
  • 社会貢献性の高いプロジェクトや、顧客の価値を創造するようなプロジェクトで、提案からリリースまで携わりたい。
  • 書籍・雑誌等の執筆や、対外的な勉強会の開催・参加を通した技術の発信、社内勉強会での技術情報共有により、エンジニアとして成長したい。

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
データ分析案件で時系列データの異常検知に挑戦したいエンジニアWanted! - Acroquest Technology株式会社のエンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com

ICMR2日目:本会議開始!情報検索の応用が盛りだくさん

皆さんこんにちは。@です。
1日目に引き続き、ICMRに参加しています。2日目は本会議(メインカンファレンス)初日でした。

※昨日の記事はこちら
acro-engineer.hatenablog.com

参加したセッションは次の通りです。

  1. Opening
  2. Keynote
  3. Best Paper Session
  4. Special Session1 Predicting User Perceptions of Multimedia Content
  5. Oral Session 1 Multimedia Retrieval

Opening

Openingでは、ICMRのカンファレンスの自身の紹介がありました。
採択論文数や出席数(今年は215人)、そしてスポンサーの紹介がありました。
驚きなのは中国の論文数が多いこと。全体の43%の提出率です。(採択率も40%強あります)

f:id:acro-engineer:20180612205754j:plain:h250

一番盛り上がっていたのはBest Paper, Best Multimodal賞の方に
NVIDIA社からTITAN-Vが提供される発表です。
候補の中からプレゼンで決まるので、プレゼンの内容を踏まえ、最後に決定される模様です。

Keynote 1

NHK日本放送協会)で利用されるブロードキャスト技術の今後の展望とその技術についての紹介です。
放送技術、メディアとの融合、そしてAIの活用をメインに研究しているとのこと。

4K, 8Kの話やAR,VRの活用や他のメディアとの融合、AIで効率化する技術に注力しています。
それぞれを使って、放送技術を進化させ続けるところが面白いところです。
Keynote中のAR,VRのデモは非常に興味深いものがありました。

AIの活用では、Twitterのソーシャルから取得すること、ポーズの推定など多くの技術が話されていました。
画像やメディアの研究開発している身からは応用範囲が広く、おおっ、こんなところで活かせるのかと感じながら聞いていました。

Best Paper Session

Best Paper候補となるペーパーの紹介がありました。
それぞれタスクや注目している点に特色があり、多くの発見がありました。

個人的には「Class-aware Self-Attention for Audio Event Recognition」のGlobalではなく、Class-AwareなAttentionの提案が面白いポイントでした。
面白かったので、実際の論文を読み、内容を復習せねばと思っています。

Special Session1 Predicting User Perceptions of Multimedia Content

ポスターで話されるセッションが紹介されていました。
個人的に面白かったのはアルバムの中で良い写真を探すタスク。
複数画像の中から良い写真を探すタスクですが、クラウドサービスを用いて
クラウド上でデータをラベリングしています。

実際に使えるかどうかはわかりませんが、機械学習のラベリングの一つの方法としてありかと思っています。

Poster/Demo

Special Sessionに出ていたので並行して開催されていたPoster/Demoの時間が取れず、少しだけ回りました。
明日も引き続き、Posterがあるので改めて、回ってみようと思います。

f:id:acro-engineer:20180612153751j:plain:h250

この学会ですが、午後の休憩になるとドーナツ(ミスド)が出てきます。(実は昨日もありました)
そのため、ドーナツとほぼ常備されている紅茶・コーヒーを飲食しながらポスターに参加できます。

Oral Session 1 Multimedia Retrieval

Cross-Modalな検索タスクに関する論文の発表です。
画像やテキストを同じ空間に射影する論文の発表がありました。
面白かったのはHashing技術、画像検索は膨大な計算量がかかるので、
ハッシュ化して圧縮し、情報検索で用いることがあります。

面白い内容も多いので、論文も合わせて読んでみようと思います。

最後に

本会議初日、様々な論文から普段得られない刺激を得られました。
明日も引き続きセッションが続くので楽しみです!

Acroquest Technologyでは、キャリア採用を行っています。


  • ビッグデータHadoop/Spark、NoSQL)、データ分析(Elasticsearch、Python関連)、Web開発(SpringCloud/SpringBoot、AngularJS)といった最新のOSSを利用する開発プロジェクトに関わりたい。
  • マイクロサービスDevOpsなどの技術を使ったり、データ分析機械学習などのスキルを活かしたい。
  • 社会貢献性の高いプロジェクトや、顧客の価値を創造するようなプロジェクトで、提案からリリースまで携わりたい。
  • 書籍・雑誌等の執筆や、対外的な勉強会の開催・参加を通した技術の発信、社内勉強会での技術情報共有により、エンジニアとして成長したい。

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
データ分析案件で時系列データの異常検知に挑戦したいエンジニアWanted! - Acroquest Technology株式会社のエンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com

ICMR1日目:推薦システムと画像のコンテキスト理解が面白い!

皆さんこんにちは。@です。
今年はカメラ推定コンペでKaggle Masterを獲得しました。次のGrand Masterに向けて日々、精進しています。

本日からICMR2018に来ています。ICMRはInternational Conference on Multimedia Retrievalの略です。
これは、マルチメディア情報検索の学会で横浜文化情報センターで開催されています。
1日目はTutorialとWorkshopに参加してきました。

www.icmr2018.org

本日の参加セッションは次の通りです。

  1. Tutorial 1: Objects, Relationships, and Context in Visual Data
  2. Tutorial 2: Recommendation Technologies for Multimedia Content
  3. Reception

Tutorial 1: Objects, Relationships, and Context in Visual Data

f:id:acro-engineer:20180611094757j:plain:h300

画像を用いたコンテキスト理解に関するチュートリアルです。
はじめに物体検出などを用いた画像のコンテキストの獲得の説明がありました。
その後、Image Relations、Image Reasoning、そして、Image Captioningの説明がありました。
複数検出されたオブジェクトや位置を考慮するなど、画像内のオブジェクトの関係性を理解する難しさを感じました。

後半はGenerative Adversarial Network(通称:GAN)の紹介です。
ただし、通常のGANではなく、コンテキストを外部から与える手法についての紹介がありました。
例えば、現状の衣服を来た人の画像に加え、ポーズといった条件を与えることにより、現在の服装の別の服装を生成するなどを可能にしています。
以前から、GANは注目して、いくつか論文を読みましたが、やはり、GANは様々な箇所で応用できそうで面白い分野です。

画像自体をどう理解・解釈するかといった観点で非常に面白いTurtorialでした。

Tutorial 2: Recommendation Technologies for Multimedia Content

推薦システムに関するチュートリアルです。
従来手法である特異値分解(SVD)やDeep Learningを使った推薦システムの方式、画像や動画の特徴量の獲得法とそれを推薦に応用した方法など様々な方式の紹介がありました。

Feature Interactionを獲得するためのBilinear Interaction PoolingやConvolutionを用いた方法など
推薦システムの構築経験が少ない私としては非常に面白い内容でした。
また、画像を使った推薦への応用も非常に興味深いものがあり、
改めて資料を確認して復習したいと思っています。

資料は次のURLで公開されています。
https://www.comp.nus.edu.sg/~xiangnan/icmr18-recsys.pdf

Reception

初日の最後にReceptionに参加しました。
Receptionは横浜にあるFISHERMAN'S MARKETで開催されました。
当日、知り合った人と会話して、非常にエキサイティングなディスカッションをしました。

f:id:acro-engineer:20180611190036j:plain:h300

夜のReception会場の横浜の景色は美しいです。

f:id:acro-engineer:20180611205027j:plain:h300

最後に

次はメインカンファレンスです。既に得る内容も多くて刺激的な1日でした。
まだまだ得られるものは多いので、しっかり参加してきます!

Acroquest Technologyでは、キャリア採用を行っています。


  • ビッグデータHadoop/Spark、NoSQL)、データ分析(Elasticsearch、Python関連)、Web開発(SpringCloud/SpringBoot、AngularJS)といった最新のOSSを利用する開発プロジェクトに関わりたい。
  • マイクロサービスDevOpsなどの技術を使ったり、データ分析機械学習などのスキルを活かしたい。
  • 社会貢献性の高いプロジェクトや、顧客の価値を創造するようなプロジェクトで、提案からリリースまで携わりたい。
  • 書籍・雑誌等の執筆や、対外的な勉強会の開催・参加を通した技術の発信、社内勉強会での技術情報共有により、エンジニアとして成長したい。

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
データ分析案件で時系列データの異常検知に挑戦したいエンジニアWanted! - Acroquest Technology株式会社のエンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com

社内技術イベントLTxRT紹介 ~仕事でElectronアプリ開発をした結果を発表しました

こんにちは
最近JavaScriptが一番詳しい言語になってきたmaron8676です。

先日Electronについて業務で使用する機会があり、その結果のフィードバック会を行いました。
f:id:acro-engineer:20180524074506j:plain:w300
図1. フィードバック会の様子

Electron は、JavaScriptやHTML/CSS関連で数年前に出てきた技術なのですがなかなか面白いことができそうです。
そこで今回は、フィードバック会でも話したElectron の紹介をしていきます。

Electronとは

HTML/CSS/JavaScriptでクライアントアプリを作るためのランタイムです。
Electronは、Visual Studio CodeGitHub Desktop、Slackなどなど、よく知られたアプリにも使われています。
HTML/CSSをアプリ画面としてレンダリングしたり、画面に対する処理(JavaScript)を実行するためのChromiumと、
JavaScriptからOSのAPIを使用するためのNode.jsから構成されています。
f:id:acro-engineer:20180524080801p:plain
図2. Electronの構成

機能としては、クライアントアプリで必要になることを大体行うことができます。
例えば、以下のようなことができます。

  1. ローカルファイルへのアクセス
  2. メニューバーの表示
  3. コンテキストメニューの表示や編集
  4. 複数ウィンドウの表示
  5. トレイによる表示
  6. 他のプログラムを起動
  7. 自動アップデート

Electronのいいところ

Webアプリ開発と比較したいいところ

  1. ブラウザ依存がない
    組み込みのChromiumで固定されるため、クロスブラウザ対応が不要になります。
  2. OSの機能を使用できる
    ユーザ設定をローカルに保存したり、通知を出すことができます。
  3. Node.jsのライブラリを画面から呼べる
    Electronアプリは以下のようなプロセスで構成されていて、クライアント処理にあたるレンダラープロセスからサーバ処理にあたるメインプロセスをimportされているかのように実行できます。

f:id:acro-engineer:20180524082034p:plain
図3. Electronのプロセス構成

従来のデスクトップアプリ開発と比べたいいところ

  1. Webアプリとの連携
    HTML/CSSの画面とJavaScriptの内部処理によって、アプリ画面にWebアプリを埋め込むことができます。元々Webアプリとしてあったものを利用するなどして作る量を減らせます。
  2. Webアプリ開発での知識を生かしやすい
    Webアプリで使用されるJavaScriptでそのまま開発できるため、従来のデスクトップアプリ開発を勉強するより、新しく覚えることが少なくて済みます。

よくないところ(難しいところ)

  1. 並列処理の実現が面倒
    JavaScriptがシングルスレッド言語のため、並列処理を行いたい場合は、WebWorkerやServiceWorkerを利用するなどの工夫が必要です。
  2. Native Module(Cで書かれたモジュール)の使用に必要な手順が複雑
    特にWindowsではCをビルドできるようにするための準備が複雑でした 詳細は以下にまとめてあります
    WindowsでElectronからNative Moduleを使えるようにする
  3. ビルドやモジュール読み込みでつまりどころが多かった
    exe化にはelectron-builderを使用していましたが、Native Moduleではexe化により圧縮されるファイルからの読み込みがうまくいかなかったり、
    ビルドしたときにディレクトリ構成が変わって、特殊な読み込みをしているモジュールがそのままでは読み込めなかったりといった問題がありました。

発表してみて

発表にあたり復習するなど準備しましたが、それでも発表中の質問で新たに気づくことがあったり、新たな利用法を提案してもらえたりあるので面白いですね。
これからの話としては、HTML/CSSを使ってアプリ画面を作ったり、Webアプリではできなかった機能を追加したりなどいろいろ考えられそうです。

Acroquest Technologyでは、キャリア採用を行っています。


  • ビッグデータHadoop/Spark、NoSQL)、データ分析(Elasticsearch、Python関連)、Web開発(SpringCloud/SpringBoot、AngularJS)といった最新のOSSを利用する開発プロジェクトに関わりたい。
  • マイクロサービスDevOpsなどの技術を使ったり、データ分析機械学習などのスキルを活かしたい。
  • 社会貢献性の高いプロジェクトや、顧客の価値を創造するようなプロジェクトで、提案からリリースまで携わりたい。
  • 書籍・雑誌等の執筆や、対外的な勉強会の開催・参加を通した技術の発信、社内勉強会での技術情報共有により、エンジニアとして成長したい。

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
データ分析案件で時系列データの異常検知に挑戦したいエンジニアWanted! - Acroquest Technology株式会社のエンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com

Convolutional Neural Networkを使う自然言語処理論文読破に挑戦!(前編)

皆さんこんにちは、@です。

画像処理の分野の方はお馴染みかと思いますが、画像処理では、Convolutional Neural Network(CNN)をよく利用されています。

このニューラルネットワークアーキテクチャは画像処理の分野で非常に大きな成果をあげており、近年ではより、様々な分野に使われています。
例えば、CNNは音声や自然言語処理の分野でも時々、登場し、応用されています。

私自身が今まで興味があったのもあり、CNNを使った自然言語処理の論文を調べてみました!

少し長くなったので、前後編に分割してご紹介します。
今回はCNNを使った文書分類について記載します。

Convolutional Neural Network

Convolutional Neural Network(CNN)は画像処理でよく使われるニューラルネットワークのモデルです。

f:id:acro-engineer:20180318155516p:plain:w600
http://yann.lecun.com/exdb/publis/pdf/lecun-98.pdfより引用)

自然言語処理における畳み込みのメリットは次の通りです。

  1. 時間方向に畳み込みを行うため、時間方向の特徴を得られる。
  2. (RNNと異なり)計算を並列化できるため、高速である。
  3. 文脈上、遠い関係にある情報間の関係も学習できる。

今回、調べた論文を読んでみると、精度が改善されただけでなく、
性能も改善されている論文も多く見られます。

参考:Convolutional Neural Netwoks で自然言語処理をする

CNNと文書分類

Convolutional Neural Networks for Sentence Classification

f:id:acro-engineer:20180318132325p:plain:w600

この論文は学習済の既存の単語を埋め込みベクトル(100 billion words of Google News)を結合し、複数のフィルタサイズでの畳み込みを用いています。

畳み込みの構造で得られた結果に対して、Max Poolingを行い、文書を分類しています。
このニューラルネットワークアーキテクチャで7個中4個のタスクで当時のState of the artを更新し、成果を上げました。

この結果は、既存の学習済の埋め込みベクトルを用いたため、CNNの設計が良かったことだけでなく、教師なしの良い特徴を得ることが重要であることを示しています。
逆に言えば、得られている特徴の質が悪いと、CNNの結果も悪くなるとも言えます。

http://www.aclweb.org/anthology/D14-1181

A Sensitivity Analysis of (and Practitioners’ Guide to) Convolutional Neural Networks for Sentence Classification

f:id:acro-engineer:20180318164430p:plain:w500

CNNを用いた感情分析の実験を行っています。
その感情分析を行いつつ、CNNのパラメータチューニングにも触れられています。

1つ前の論文で紹介した「Convolutional Neural Networks for Sentence Classification」では、CNNを使い、精度向上ができたといった結果が得られました。

しかし、CNNはハイパーパラメータが多く、どのパラメータを調整するのが良いのか非常に難しいです。
本論文では、パラメータを変化させた場合の精度の実験を行い、どのパラメータを重点的にチューニングをするのかが良いのかの検証を行っています。
論文中では、畳み込む複数のフィルタサイズ、word2vecのモデルの重要性について議論されています。

http://www.aclweb.org/anthology/C16-1229

Character-level Convolutional Networks for Text Classification

f:id:acro-engineer:20180318132339p:plain:w600

先程まで単語単位でCNNへ入力をしていました。
本論文では、文字(アルファベット)+一部の記号の埋め込みベクトルをCNNの入力しています。
今回は、分類におけるデータ拡張の工夫として、シソーラス(同義語集)を使った語彙拡張も利用しています。
LSTM, Bag of Wordsなど従来の手法と比較して精度が向上しているタスクが4種類あります。

https://arxiv.org/abs/1509.01626

Combination of Convolutional and Recurrent Neural Network for Sentiment Analysis of Short Texts

f:id:acro-engineer:20180426231007p:plain:h300

CNNとRecurrent Neural Network(RNN)を使った短いテキストの感情分析を行っています。
短いテキストは伝えたい情報の細部を省略していることもあり、テキスト上の情報が少なくなる傾向があります。

局所特徴を取得することのできるCNN、そして、長期的な依存関係を獲得できるRNNを組み合わせ、2つのアルゴリズムの特性を活かすニューラルネットワークを構築しました。

word2vecで得られた単語の特徴量を用いて、畳み込みます。
畳み込みで得られた出力に対して、LSTMやGRUを使い、最後に分類を行います。
この手法により、MR, SST1 and SST2のデータセットでState of the artを取得しました。

Language Modeling with Gated Convolutional Networks

f:id:acro-engineer:20180318132535p:plain:h500

CNNにゲートを付与した構造が新規性に該当する部分です。
この構造をGated Linear Unit(GLU)と表現しています。
次の(1)と表現されている式が提案手法部分に該当します。
埋め込みベクトルに対して、Residual Networkに近しいゲート構造を構築しています。

f:id:acro-engineer:20180318154942p:plain:h30

\sigmaはsigmoid関数を示しています。

本提案手法を用いて、WikiText103 benchmarkでState of the artを獲得し、更にGoogle Billion Wordsと呼ばれるデータセットで評価しています。
これにより、従来のネットワークより収束が高速であること、そして、精度も高い手法であることを実験しました。

https://arxiv.org/abs/1612.08083

Very Deep Convolutional Networks for Text Classification

f:id:acro-engineer:20180318134647p:plain:h500 f:id:acro-engineer:20180318134656p:plain:h500

画像処理では非常に深いニューラルネットワーク(ResNetなど)が利用されています。
自然言語処理の分野では、そこまで深いネットワークが従来まで使われていませんでした。
VDCNNと呼ばれるResNetでも利用されているShort-cut構造を使い、ニューラルネットワークを深くしたアーキテクチャを提案しました。

従来のテキスト分類のデータセットを比較し、State of the artを超えています。
本論文ニューラルネットワークの構造の場合は、層が深いニューラルネットワークの方が精度が高い、そして、Short-cutの有無を比較し、Short-cut構造の効果があるといった実験結果が出ています。

https://arxiv.org/abs/1606.01781

Do Convolutional Networks need to be Deep for Text Classification ?

文書分類のCNNが深い必要があるか?といった研究。
従来の浅いニューラルネットワークとDense Netを参考にして、構築した深いニューラルネットワークを比較しています。

複数の文書分類のデータセットに対する実験の結果、
単語埋め込みのベクトルを用いたShallow Wide Networkが良い結果とのこと。
画像系のタスクとは異なり、単純に畳み込み層が深ければ良いといった傾向ではないことがわかります。

https://arxiv.org/abs/1707.04108

最後に

Convolutional Neural Networkは様々な分野で利用されており、自然言語処理の分野における活用の文書分類を紹介しました。
色々な論文を探してみると、様々なCNNのアーキテクチャが出てきて非常に勉強になりました。
次の後半では機械翻訳、その他系列ラベリングなどのタスクを紹介しようと思います。

参考文献

  1. Convolutional Neural Netwoks で自然言語処理をする

Acroquest Technologyでは、キャリア採用を行っています。


  • ビッグデータHadoop/Spark、NoSQL)、データ分析(Elasticsearch、Python関連)、Web開発(SpringCloud/SpringBoot、AngularJS)といった最新のOSSを利用する開発プロジェクトに関わりたい。
  • マイクロサービスDevOpsなどの技術を使ったり、データ分析機械学習などのスキルを活かしたい。
  • 社会貢献性の高いプロジェクトや、顧客の価値を創造するようなプロジェクトで、提案からリリースまで携わりたい。
  • 書籍・雑誌等の執筆や、対外的な勉強会の開催・参加を通した技術の発信、社内勉強会での技術情報共有により、エンジニアとして成長したい。

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
データ分析案件で時系列データの異常検知に挑戦したいエンジニアWanted! - Acroquest Technology株式会社のエンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com

社内技術イベントLTxRT紹介 ~うちのアジャイル、実際どうやってるの?~

こんにちは。QAエンジニアの@です。
何度かこのブログでも紹介しましたが、Acroではほぼ毎週木曜日に社内勉強会「LTxRT」を行っています。

今週のテーマは「アジャイル」。先日アジャイルの勉強会に参加してきた若手リーダーからのフィードバックと、社内でスクラム開発を行っている各プロジェクトからの事例の共有がありました。
f:id:acro-engineer:20180524190250j:plain:w300
内容は、

  • ふりかえり会どうやってる?
  • レビューどうやってる?
  • ユーザーストーリー描いてメンバに共有したけど、実際どうだった?

などなど。
参加者からも、「うちのプロジェクトではこうやってるよー」や「スクラムに忠実にやりすぎなくてもいいんじゃない?」など色々な意見が飛び出し、活発な会になりました。
このような場があると、自分のプロジェクトにも使えるかもしれない発見があって楽しいですね!

それでは~。

Acroquest Technologyでは、キャリア採用を行っています。


  • ビッグデータHadoop/Spark、NoSQL)、データ分析(Elasticsearch、Python関連)、Web開発(SpringCloud/SpringBoot、AngularJS)といった最新のOSSを利用する開発プロジェクトに関わりたい。
  • マイクロサービスDevOpsなどの技術を使ったり、データ分析機械学習などのスキルを活かしたい。
  • 社会貢献性の高いプロジェクトや、顧客の価値を創造するようなプロジェクトで、提案からリリースまで携わりたい。
  • 書籍・雑誌等の執筆や、対外的な勉強会の開催・参加を通した技術の発信、社内勉強会での技術情報共有により、エンジニアとして成長したい。

 
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
モノリシックなアプリケーションをマイクロサービス化したいエンジニア募集! - Acroquest Technology株式会社のWeb エンジニア中途・インターンシップ・契約・委託の求人 - Wantedlywww.wantedly.com

Angular4アプリをAngular6にバージョンアップする際の嵌りどころ

こんにちは、阪本です。

f:id:acro-engineer:20180509102654p:plain:w200

最近、画面系を触ることが多くて、Angularを使ったシステムを3つほど作ったのですが、
LTSであるAngular6がつい最近リリースされたので、
作った中でシンプルなAngular4アプリケーションをAngular6にバージョンアップさせてみました。

前提

バージョンアップ前のAngularのバージョンは4.4.6でした。
Angular Material 2.0.0-beta.12を使っています。

ちなみに対象のアプリケーションは2KL強(クライアントサイド)の申請管理システムで、申請→承認のフローを実行するものです。

バージョンアップ開始

いざ、出陣!(何

バージョン変更

まずは、ncuを使って、package.jsonに書かれた各パッケージのバージョンを上げます。

C:\App> ncu
Using C:\App\package.json
[..................] | :
 @angular/animations                         4.4.6  →   6.0.0
 @angular/cdk                        2.0.0-beta.12  →   6.0.0
 @angular/common                             4.4.6  →   6.0.0
 @angular/compiler                           4.4.6  →   6.0.0
 @angular/compiler-cli                       4.3.6  →   6.0.0
 @angular/core                               4.4.6  →   6.0.0
 @angular/forms                              4.4.6  →   6.0.0
 @angular/http                               4.4.6  →   6.0.0
 @angular/material                   2.0.0-beta.12  →   6.0.0
 @angular/platform-browser                   4.4.6  →   6.0.0
 @angular/platform-browser-dynamic           4.4.6  →   6.0.0
 @angular/platform-server                    4.4.6  →   6.0.0
 @angular/router                             4.4.6  →   6.0.0
 core-js                                     2.4.1  →   2.5.6
 rxjs                                        5.4.3  →   6.1.0
 ts-helpers                                  1.1.1  →   1.1.2
 typescript                                  2.0.3  →   2.8.3
 zone.js                                    0.8.17  →  0.8.26
 @angular/cli                                1.3.2  →   6.0.0
 @types/node                                6.0.42  →  10.0.4
 codelyzer                                   3.1.2  →   4.3.0
 jasmine-core                                2.4.1  →   3.1.0
 jasmine-spec-reporter                       2.5.0  →   4.2.1
 karma                                       1.2.0  →   2.0.2
 karma-chrome-launcher                       2.0.0  →   2.2.0
 karma-jasmine                               1.0.2  →   1.1.2
 karma-remap-istanbul                        0.2.1  →   0.6.0
 protractor                                  4.0.9  →   5.3.1
 ts-node                                     1.2.1  →   6.0.3
 tslint                                      5.6.0  →  5.10.0
 webdriver-manager                          10.2.5  →  12.0.6

The following dependency is satisfied by its declared version range, but the installed version is behind. You can install the latest version without modifying your package file by using npm update. If you want to update the dependency in your package file anyway, run ncu -a.

 moment   2.19.2  →   2.22.1

Run ncu with -u to upgrade package.json


C:\App>

何やらたくさんバージョンアップされます。恐ろしや。。
思い切って、 ncu -u でバージョンを反映させます。

C:\App> ncu -u
Using C:\App\package.json
[..................] - :
 @angular/animations                         4.4.6  →   6.0.0
(中略)
 moment   2.19.2  →   2.22.1
Upgraded C:\App>

package.jsonが書き換わりました。
なお、TypeScriptは2.8.3にバージョンアップしていますが、
Angular6ではTypeScriptは2.7.xまでしか対応していないため、2.7.2に手で変更する必要があります

package.jsonのTypeScriptのバージョンを変更したら、新しいバージョンのパッケージをインストールします。

C:\App> npm update
npm WARN deprecated nodemailer@2.7.2: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/
(中略)
================================================================================
The Angular CLI configuration format has been changed, and your existing configuration can
be updated automatically by running the following command:

  ng update @angular/cli
================================================================================
(中略)
C:\App>

途中、メッセージが出てくる通り、
Angular6では、設定ファイルの記述の仕方が変わっているため、
ng update @angular/cli で設定ファイルの更新が必要です。

C:\App> ng update @angular/cli
            Updating karma configuration
            Updating configuration
            Removing old config file (angular-cli.json)
            Writing config file (angular.json)
            Some configuration options have been changed, please make sure to update any npm scripts which you may have modified.
DELETE angular-cli.json
CREATE angular.json (3523 bytes)
UPDATE karma.conf.js (1074 bytes)
UPDATE src/tsconfig.spec.json (324 bytes)
UPDATE package.json (1466 bytes)
UPDATE tslint.json (2971 bytes)
(中略)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\karma\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

angular-cli.jsonが削除され、代わりにangular.jsonになりました。
package.jsonには@angular-devkit/build-angularが追加されています。
追加されたパッケージは自動でインストールされます。

とりあえず、パッケージ自体のバージョンアップは完了です。

RxJSの破壊的変更対応

今回のバージョンアップの一番面倒なところが、これです。(Angular本体とちゃうんかい!)
Angularのバージョンアップに伴い、RxJSも5.4から6にバージョンアップ。
importを軒並み書き換え&コードも書き換えが必要です😖

ちなみに、rxjs-compatパッケージをインストールすれば、書き換えずに動作するらしいですが、
ここでは頑張って最新の書き方にしていきます💪

Observable

Angularとは切っても切れないObservable。
Angular4で使われていたRxJS 5.4では

import { Observable } from 'rxjs/Observable';

だったのが、RxJS 6では

import { Observable } from 'rxjs';

に。
rxjsから直接importするように変更されています。

Observable以外にも、BehaviorSubject等がrxjsからのimportに変わっています。

of / merge / throw

Observable.of のように、Observableのstaticメソッドで呼び出していたのが、RxJS 6では独立しました。

■RxJS 5.4

import 'rxjs/add/observable/of';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/throw';

Observable.of(o);
Observable.merge(o1, o2);
Observable.throw(e);

■RxJS 6

import { of, merge, throwError } from 'rxjs';

of(o);
merge(o1, o2);
throwError(e);

例外発生は、throwErrorに名称変更されています。

map / catch

RxJS 5.4では observable.map().catch().subscribe() のような書き方をしていたのが、
RxJS 6では observable.pipe(map(), catch()).subscribe() のように、 pipe で挟むようになりました。
convertprocess はオリジナル関数。

■RxJS 5.4

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

this.http.get('url')
    .map(response => convert(response))
    .catch(error => Observable.of(error))
    .subscribe(response => process(response));

■RxJS 6

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

this.http.get('url')
    .pipe(
      map(response => convert(response)),
      catchError(error => of(error)))
    .subscribe(response => process(response));

pipe の中に、 mapcathError を複数書けるようになっています。

tap

余談ですが、RxJS 5.4では、戻り値のない関数も map で実行できましたが、
RxJS 6では tap が用意されており、こちらを使用するようになっています。

HTTPレスポンスの内容をログ出力する例を示します。

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, tap, catchError } from 'rxjs/operators';

this.http.get('url')
    .pipe(
      tap(response => console.log(response)),
      map(response => convert(response)),
      catchError(error => of(error)))
    .subscribe(response => process(response));

combineLatest

RxJS 5.4では、最初のObservableの combineLatest を呼んでいましたが、
RxJS 6では独立しました。こちらの方が自然ですね。
ただ、結合した結果はObservableの配列になるので、 map で変換します。
combine はオリジナル関数。

■RxJS 5.4

import 'rxjs/add/operator/combineLatest';

observable1.combineLatest(observable2, (o1, o2) => combine(o1, o2));

■RxJS 6

import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

combineLatest(observable1, observable2)
  .pipe(map(values => combine(values[0], values[1]));

Angular

RxJSの対応が一通り完了したら、あとは大したことはありません。

今回のバージョンアップでは、Angularの内容は全く修正が要りませんでした。
Deprecatedなものを使っていた場合は、削除されている可能性があるため、直す必要があります。

Angular Material

こちらも、今回は何も変更せずに動作しました。
使っているのは matInputmat-selectmat-table くらいですが。

まとめ

RxJSの変更はつらいものがありましたが、それさえ乗り越えれば、最新のAngularを適用するのは楽チンです👍
Angular6はLTSでサポートも2019年10月まで続くので、
古いAngularを使っている場合は、アップデートを検討してみてください。

Acroquest Technologyでは、キャリア採用を行っています。


  • ビッグデータHadoop/Spark、NoSQL)、データ分析(Elasticsearch、Python関連)、Web開発(SpringCloud/SpringBoot、Angular)といった最新のOSSを利用する開発プロジェクトに関わりたい。
  • マイクロサービスDevOpsなどの技術を使ったり、データ分析機械学習などのスキルを活かしたい。
  • 社会貢献性の高いプロジェクトや、顧客の価値を創造するようなプロジェクトで、提案からリリースまで携わりたい。
  • 書籍・雑誌等の執筆や、対外的な勉強会の開催・参加を通した技術の発信、社内勉強会での技術情報共有により、エンジニアとして成長したい。

少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。

www.wantedly.com