Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2017年10月18日

MavenでNode.jsをインストールしてwebpackを起動しよう

こんにちは。フリューのジョンです。

最近はプロジェクトで使用できたgulpやwebpackについて勉強しています。

その関連ではありますが、今回はMavenプロジェクトでwebpackを起動するということをやりたいと思います。

Mavenプロジェクトでwebpackを使えるようにする

webpackを使うためには、npmが必要です。そして、npmを使うためにはNode.jsをインストールする必要があります。
そのため、各自Node.jsをインストールして・・・となると、バージョン違いが発生したり・・・環境設定から・・・と、とても大変です。

そのために、frontend maven pluginをつかいます。https://github.com/eirslett/frontend-maven-plugin
このライブラリでは Node.jsのインストールや npm install、webpackの実行ができます。

pom.xmlにpluginを登録します。

これだけです。そして、

と叩くとNode.jsがインストールされます。

Node.jsやnpmのインストールはMavenのsetting.xmlを見てproxyを通してくれるのでとても助かります!

しかし、おそらく、プロジェクト直下にpackage.jsonが存在しないという以下のようなwarningが出てくると思います。

そのため、インストールされたNode.jsのnpmを利用してpackage.jsonを作成しましょう。
helper scriptが用意されておりますので、こちらのnpmファイルかnpm.batファイルをプロジェクト直下に配置します。

https://github.com/eirslett/frontend-maven-plugin/tree/master/frontend-maven-plugin/src/it/example%20project/helper-scripts

そして、プロジェクト直下にて以下コマンドを叩きます。

色々聞かれると思いますが、適当で良いです(Githubのレポジトリなどの情報のためです)。終わるとpackage.jsonが作成されています。

次にMavenからwebpackを利用するために、webpackをinstallします。

終わると、package.jsonに記述がされていると思います。

次にwebpackを使うための記述を記載します。

こちらはお使いのプロジェクトに合わせて適当に記述してください

以上で設定は終わりです。先ほどのコマンドをもう一度叩いてみてください。

index.jsなどきちんと用意されていればbundle.jsというファイルが作成されていると思います。

まとめ

Mavenからwebpackを利用するというのでお伝えしました。弊社ではwebpackの実施をprofileにしており、maven-war-pluginのlifecycleに上手く載せるようにしています。

webpackだけではなく、npm タスクや gulpも使用できるため、タスクを実行することもできます。

最後に

弊社ではVue.jsやwebpackなどフロント周りで楽しみたいエンジニアを募集してます!!

詳しくはこちら


2016年05月27日

Kayo

テスト環境にOpenStackを導入しました!

みなさん、こんにちは。コンテンツ・メディア第1事業部インフラ担当の藤本佳世です。 少し前になりますが、テスト系環境にOpenStackを導入しました。OpenStackを聞いたことがない方も安心して下さい。これから構築手順やTipsなどご紹介できればと思っています。今回は1回目「OpenStackとは?」についてお話ししたいと思います。今後、下記の内容をブログに投稿する予定です。

  • OpenStack構築手順
  • ネットワーク設定  ※高可用構成やFloatingIP割り当てなど
  • 仮想マシンの起動や管理について  ※イメージやフレーバーの作成など
  • セキュリティグループについて ※追加や削除方法など
  • つまずいたこと

What is OpenStack?

OpenStack とは、簡単に説明すると、プライベートクラウド環境でAmazon Web Services(以下AWS)のようなものを構築可能にしたソフトウェアです。AWSを使ったことがない方に向けて、もう少し詳しく説明すると、OpenStackを使ってプライベートクラウド上に仮想サーバやネットワーク、ストレージなどを構築することができます。そして、それら作成したものはダッシュボードの Web インターフェースから管理することができ、GUI上で簡単に仮想サーバを構築することができます。
その他にもOpenStackは、DockerやAnsibleなど構成管理ツールとも連携することができ、より効率よく短時間で用途にあったサーバを構築することができます。

OpenStack導入でサーバ構築時間を短縮

openstack導入1

openstack導入2

OpenStackを導入することにより、サーバの構築時間を今まで以上に短縮することができました。開発メンバーから、「新技術の検証環境として新しいサーバが欲しい」や「新しいサーバを購入するほどではないけど、検証用にサーバが欲しい」など要望があった場合、今までサーバが届いてから3時間ほどかかっていた構築作業が、10分以内で可能となりました。構築が早くなったことで、開発メンバーを待たせることなく、気軽にサーバ構築依頼をしてもらえるようになりました。

7つのコンポーネント

OpenStackは7つの機能から構成されます。

  1. Nova (仮想マシンの提供と管理を行う)
  2. Keystone (ユーザー認証・管理を行う)
  3. Horizon (Webブラウザ経由で管理・操作できるGUIコンソールを提供する)
  4. Glance (仮想イメージの管理を行う)
  5. Cinder (仮想マシンが使用するストレージ管理を行う)
  6. Neutron (仮想ネットワークの管理を行う)
  7. Swift (クラウドストレージを提供する)

OpenStack構築内容

ホストOS: Ubuntu14.04LTS (8台構成), OpenStackバージョン: Liberty

  • サーバ1:Nova,Keystone,Horizon,Glance,Cinder
  • サーバ2:Nova,Keystone,Horizon,Glance,Cinder
  • サーバ3:Nova,Glance,Cinder
  • サーバ4:Nova,Glance,Cinder
  • サーバ5:Nova,Glance,Cinder
  • サーバ6:Nova,Glance,Cinder
  • サーバ7:Neutron
  • サーバ8:Neutron

※Swiftは未検証

ホストOSのUbuntuインストールは、前回ご紹介したPXE機能を使って構築しました。
前回の記事はこちらへhttp://tech.furyu.jp/blog/?p=3858

次回は、各コンポーネントの説明と構築手順をご紹介したいと思います。


2016年05月23日

sakata

JJUG CCCにて「Seasar2で作った俺たちのサービスの今」というセッションで登壇しました #jjug_ccc #ccc_gh6

Hello world! コンテンツ・メディア第1事業部のjyukutyoこと阪田です。

5/21(土)に開催されたJJUG CCC 2016 Springにて登壇しました。「Seasar2で作った俺たちのサービスの今」というセッションです。
登壇のいきさつはこちらに書いています。

JJUG CCC 2016 Springで登壇します!

そして、スライドはこちらです。

Seasar2で作った俺たちのサービスの今 from Koichi Sakata

私の感想/思い

技術の解説ではなく実際のサービスの設計判断や詳細を話すというのは、自分のすべてをさらけだす感じがします。私のこのセッションが、弊社フリューの技術レベルの基準になるとも言えます。
もちろん私は天才プログラマーではなく、知らない知識や誤った判断などがあります。それでもこうして発表することで、そうした部分を教えていただき、改善へのアドバイスをいただくことができました。大切なことは、そうした知識を得て私自身の能力が向上すること、そしてサービスがよくなることですから。

私の部署のアプリケーションは、利用者数も1,000万人を超え、決して小さくないサービスです。精鋭エンジニア集団というよりは、向上心はあるけれども、私を始めある種普通(定義が難しいですが)のエンジニアが集まったチームです。そんな状況でも四苦八苦しながらこのレベルのサービスを運用開発できるということも伝えたかったことです。

私の思い

Twitterやブログで感想もたくさんいただくことができました。Twitterではハッシュタクグ「#ccc_gh6」に主に集まっています。「理想ではなく現実解で進んでいること、メンバーのことを考えながら進んでいることに共感できた」という言葉を多くいただきました。私が伝えたかったのは、技術的方法論ではなく、ベストな正解などはなく、自分の置かれた背景、コンテキストに合わせて、よりベターな方法を探りながら進んでいくしかなく、多くの誤りをしながらもそこからフィードバックを得て誤りを直し進めばいいということでした。

エンジニアは論理性や一貫性の能力が高いですから、システムやアプリケーションの今の状況、つまりスナップショットを見て、「ダメ!」という判断を下してそれで終わらせることがあります。でもシステムやサービスには時間軸があります。時間の経過とともに変化していくものです。もちろん置かれている状況によっては、契約や納品など簡単には適用できない現場もあるかとは思います。ただ、そんな中でも時間軸があり、「終わっている!」というときでも今から変化させていくことができます。

CCC自体の感想

私が聴講した他のセッションについては、別のエントリで書きたいと思います。ここではCCCというイベント全体についての感想を書きます。

今回のCCCは登録者数1,200名以上、実際の参加者も800名以上とのことでした。私も関西Javaエンジニアの会(関ジャバ)の会長という立場ではありますが、スケールが違いすぎます。CCC1回の会場費も200万円!JJUG会長である鈴木さんのスライドに記載があります。

これだけのイベントを運営するJJUG幹事、スタッフの方はとても大変だと想像します。これを年2回開催されていることに頭が下がります。

関西から参加されている方も10名以上はおられました。私が知っている方だけでその人数ですので、実際はもっと多いでしょう。次のCCCは秋頃に開催されますので、ぜひみなさんにも参加をお勧めいたします!


2016年02月24日

morioka

try! Swiftに協賛します

こんにちは!コンテンツメディア第一事業部の盛岡です。 すでにあと一週間となってますが、3月2日から行われるtry! Swiftというイベントにフリューはスカラシップスポンサーとして協賛しています。

try! Swift

公式HP http://www.tryswiftconf.com/

公式からの説明文を引用すると、「try! Swiftは世界中のSwiftデベロッパーが一堂に会し、知識や技術を互いに共有し高め合うことを目的としたカンファレンスです。」とのことです。

実際に、これだけのスゴ腕エンジニアが集まるのは世界でも稀だと思います。ワクワクしますね。

フリューでのSwift利用について

われわれの手掛けるピクトリンクというサービスのiOS版アプリにおいて、全面的にSwiftを採用しています。

昨年1月に実施した全面リニューアル時に全コードをSwiftに書き換えました。国内のSwift採用事例としては、なかなか規模も大きい方ではないでしょうか。 導入に至るまでの経緯や実際の開発におけるノウハウについても今後紹介出来ればと思いますが、今回は実際に導入してみた感想を書いてみます。

Swiftを導入してみて

Swiftを導入して一番感じるメリットは、短く簡潔なコードを書けることによるコードレビューの効率化ではないかと個人的には思います。

Github + Pull Requestを主軸とした開発においては、コードを書く時間よりもコードを読む時間が長くなりがちです。

Objective-Cについては、お世辞にも読みやすいソースコードとは言いにくいところがありました。また、ヘッダファイルと実装が分かれていることもレビューする上で時間がかかる要因に成り得ます。

Swiftは楽しい

その他にも色々と利点はあるのですが、Swiftでは、Optionalやクロージャなどのモダンな言語仕様がとても良く作りこまれており、書いていても読んでいても楽しい言語です!作業していて楽しいというのは、開発者として嬉しい限りです。

今後の案件についてもObjective-Cで開発することは多分なくて、Swiftで開発し続けると思います。そして今やSwiftはオープンソースであり、誰でも試せる環境が整ってきています。皆さんも是非 try! Swift してみませんか。


2015年12月8日

araki

あいちゃれ2015ファイナルに参加しました

 初めまして、フリューの荒木と申します。 私は「ピクトリンク」というアプリのAndroid版を開発しています。 今回が初投稿ですが、これからも投稿していきたいと思いますので、よろしくお願いします!

「あいちゃれ」とは?

あいちゃれ

 立命館大学のびわこ・くさつキャンパスで2011年から毎年開催されている学生エントリーのソフトウェアコンテストです。 学生らしい自由な発想のソフトウェアが数多く発表されます。中にはハードウェアを持ってくる学生もいます。 今年も高校版・大学版が同時開催だったので、非常に多くの人が集まりました。

 実は、私も2013・2014年のあいちゃれに学生として参加していました。 そのときに、協賛企業賞をもらったのがきっかけで、弊社のことを知りました。 その縁があってフリューに入社し、今回は企業側として参加するというちょっと不思議な立場になっています。

気になった発表

 今年のあいちゃれは昨年と同じくブースとステージの二つの発表形式で行われました。 本当は自分が聞いた発表を全て紹介したいのですが、ここでは特に気になった発表を紹介します。

ZIZO(大学版フリュー賞を受賞)

 お地蔵さんの前で悩み、たとえば「Aさんに〜してほしい」とスマホで入力すると、 Aさんがそのお地蔵さんの前に近づいた時に「〜したほうがいいんじゃない?」という メッセージがAさんに届きます。この仕掛けによって悩みの間接的な解決を目指すシステムです。 お地蔵さんにはビーコンがついていて、それを利用して誰が近づいているかを検知しているそうです。

 この作品はコンセプトがとても素敵です。 悩みの解決をお地蔵さんに託すことで、もしかしたら解決するかもしれない。 たとえ解決しなかったとしても自分の中の悩みをお地蔵さんに少し背負ってもらえるので、 気持ちが少し楽になる。この発想が非常に柔らかくて優しいと感じました。

ZIZO

写真は、ブース発表のものです。写真の下の方にいるお地蔵さんが悩みを聞いてくれます。

ナガシミ(高校版フリュー賞を受賞)

 自動で情報が流れてくるRSSリーダーです。RSSの情報が一定時間で少しずつスクロールしていくので、 大量の情報を自分で探索する必要がなく、まさに「ナガシミ」することが可能となります。

 コンセプトがしっかりしているのも良かったですが、UIが非常によく作り込まれているのが素晴らしいと思いました。

ナガシミ

授賞式の写真です。作品は、https://nagashi.me/ で見ることができます。

ココやん!

 Twitterを解析して、相手が行きたいと思っている場所を見つけてくれるサービスです。 世界中で「行きたい」という言葉と一緒につぶやかれている場所を候補としておき、 解析したい相手のツイートの中から候補の言葉を見つけてきて表示してきてくれるという 仕組みだったと思います。

 人の言葉を解析して、新しい情報を得ようとする取り組みに対して、非常に興味を持ちました。 実際、実装を担当していた学生が楽しそうに話していたのが印象的でした。

ココやん!

ブースの写真です。ポスターも洗練されているように感じます。

Digitower

 iOSで動くパズルゲームアプリです。 点灯している辺と消灯している辺がある四角形のブロックを回転させて、 デジタル表記の数字を作るゲームです。 0~9までの全ての数字を作るまでの時間を競うタイムアタックモードと、 作った数字がスコアになるスコアアタックモードがあるそうです。

 ルールはシンプルですが、ある状態から特定の数字を作るにはどうすればいいか、 数字を同時に作るにはどうしたらいいかなど、非常に奥が深そうなゲームだと思いました。

 写真はないですが、https://twitter.com/digitowerapp でリリースに向けた情報を発信しているようです。 もしAppStoreに出たらやってみたいです。iPhone持ってないので、会社の端末で遊びます!

全体を通した感想

 一昨年・昨年も参加しているので、今回が三回目の参加となりますが、 やはり学生が自由な発想で作ったソフトウェアは見ていて楽しいです。 なにより、学生が楽しそうに発表をしている姿を見られたことが良かったです。 自分の作ったものを楽しそうに語ってくれるのを聞くだけで、こちらも元気をもらえました!

 また、ソフトウェアの種類が非常に豊富だったように感じました。 ゲームだけでも多くの種類がありましたし、他にも観光地のサジェスト、 お土産リクエストアプリ、学園祭の情報アプリ、UI部品のモジュール化ツール、 果てはプログラミング言語までエントリーされていました。 いろんな技術に興味を持った学生たちが社会に出てきて、 もっと世の中が面白くなって欲しいと思うと同時に、自分も何か世界に良い影響を与えらえる ものを作りたいと感じました。

 以上です! 来年も参加します!