Furyu
[フリュー公式]

Tech Blog

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

2019年10月2日

iida

フロント初心者がVue.jsを勉強する part.2

こんにちは、飯田です。
世間はいろんなゲームで盛り上がっていますね。普段FF14ばかりの私も久々にゲームを買いました。
今回も前回に引き続きVue.jsの勉強記事となります。
 

はじめに

この記事はフロント初心者がVue.jsを勉強する Part.1の続きです。
今回は実際のプロジェクト上のコンテンツをVue.jsにした話を書いていきます。
 

実際のプロジェクトでVue.jsを書いてみた。けれど…

まずは現状ピクトリンク内でVue.jsに置き換えられる静的ページやコンテンツを探すところからはじまりました。
 
そのひとつが、年に4回発行されるGIRLS TRENDという冊子の紹介ページです。
(余談ですがこちらの冊子は内容もデザインもとても可愛いので、ゲームセンターなどで見かけたらぜひ手にとってほしいです!)
 
GIRLS TRENDのディレクトリ構造は厳密には違いますが、だいたいこのようになっています。
色々突っ込みたいのですが現状それぞれのvolumeでディレクトリが切られていて、その中にファイルが2つセットでたくさんある感じになっています…

(vmというのはピクトリンクで使われているVelocityというJavaテンプレートエンジンのファイル拡張子です。ちょっとカオスなHTMLファイルのような感じですが、特にここで説明する必要はないので割愛します。)
 
毎号同じレイアウトで色や画像・内容が変更されるだけなので、内容のみ異なる同じようなvmファイルがたくさん存在しています。
まずは深く考えずに最新号のindex.vmをVue.jsに置き換えてPull Requestを出しつつも、せっかくVue.jsを使うのに似たようなファイルをどうにかまとめられないのか? と疑問に思っていました。
 
結果的に『Vue Routerを使ってみると良いかも』とレビューをもらい、Vue Routerに触れてみることにしました。
 

Vue Routerとは

シングルページアプリケーション(SPA)を構築するために用意されているVue.jsの公式拡張ライブラリです。
ルーティング制御に優れています。
 
公式ドキュメント
https://router.vuejs.org/ja/
 

シングルページアプリケーション(SPA)って?

単一のページで構成されているWebアプリケーションのことです。
ブラウザによるページ遷移を行うことなく、単一のページの中でコンテンツを切り替えて表示します。
こちらの記事が簡単にまとまっていて概要を掴むにはわかりやすいです。
https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a
 

やってみる

さて、今回やりたいことは以下になります。
 
・URLをシンプルにし、volumeに対応した内容を表示させたい
→ magazine/21/ならvol.21のindexの内容を、magazine/22/ならvol.22のindexの内容を表示したい
・毎回レイアウトは同じなので1つのコンポーネントを使いまわして内容だけ変えたい
 
前回vue-cliで作成したプロジェクトにVue Routerをインストールしてローカルで試してみることにします。
 

インストール

※npm5.0より前のバージョンを使っている方は–saveオプションをつけてください。
 

ルーティング用コンポーネントの作成

ルートにアクセスしたときのVueコンポーネントをIndex.vue、magazineにアクセスしたときのVueコンポーネントをMagazine.vueとし、それぞれ作成します。
とりあえず簡単な文章を入れているだけです。

 

main.jsに設定の追記

Vue Routerはインストールしただけでは当然使えないので、main.jsに設定を追記します。

ルーティングの設定について簡単に解説します。

mode

デフォルトでは、設定したパスにアクセスするとURLに#(ハッシュ)が含まれてしまいます。
historyと設定することによって、URLから#を除くことができます。
ただ実際のプロジェクトでhistoryモードを使うにはサーバー側の設定が必要です。
詳しくはこちらを参照してください(私はサーバー側の知見がないのでこのへんもゆくゆくは知りたいですね! )

path

パスの設定です。
:からはじまるものはパラメータで、可変URLをマッチングするために使います。
今回は:volume部分に号数の数字が入る想定でパラメータにしています。

name

ルートに名前をつけます。
ナビゲーションの作成などに使うことができます。

component

path部分にアクセスしたときに表示するコンポーネントを設定します。
この場合だと/(ルート)にアクセスしたときはIndex.vue、magazine/:volume/にアクセスしたときはMagazine.vueが表示されます。
 

ルートコンポーネントに表示部分の追記

ルートコンポーネント(この場合なら全ての親コンポーネントにあたるApp.vue)に、表示部分を追記します。
(App.vueにはもともとvue-cliでプロジェクトを作成した際にすでに色々書いてありましたが、今回はわかりやすいように余計な記述を消しています。)

<router-view />と記述することによって、パスと一致したコンポーネントがこの部分に表示されるようになります!
最初のうちは書き忘れてなんか表示されないんだけど…?とやっていたりするので書き忘れないようにしましょう。(実体験)
 

実際にアクセスしてみる

上記が終わったら、前回と同じように

でローカルサーバーを立ち上げてhttp://localhost:8080/にアクセスします。

FireShot Capture 018 - my-project - localhost

このような表示になったら成功です! ちゃんとルートにアクセスした際にIndex.vueが表示されました。
 
次はhttp://localhost:8080/magazine/21にアクセスします。
21部分は上記で説明したとおり可変パラメータにしているので、別の数字でも同じ表示になります。
 

FireShot Capture 019 - my-project - localhost

Magazine.vueが表示されました!
これでVue Routerを使うことによって、ルーティングが機能してコンポーネントの表示が切り替わることを確認できました。
 

まとめ

今回はどういう経緯でVue Routerに触れることになったかの話とVue Router導入編でした。
Part.3では実際にvolumeに対応した内容を表示することをやりたいと思います。


2019年08月29日

iida

フロント初心者がVue.jsを勉強する part.1

はじめに

はじめまして、飯田です。
フリューにはフロントチーム設立と同時に2018年6月に入社しました。
主にピクトリンクのフロント面を触っていて、現在はVue.jsを勉強しています。
Vue.jsは「わかりやすい」「フロント初学者に最適」などと言われてはいますが、今までアニメーションをつけるためにふんわりjQueryを書いていた程度の私には敷居が高く、難しく感じました。
そんな自分がどのような流れでVue.jsというものを学んでいるのかを少しずつ書いていこうと思います。

 

最初にやったこと

公式ドキュメントに目を通す

https://jp.vuejs.org/v2/guide/index.html
Vueは公式ドキュメントが日本語化されているのでありがたいなあ、ととりあえず読んでみる…も、自分の知識が足りず、説明に当たり前のように出てくるカタカナの開発用語やプログラミング用語が分からず、コードを見てなにができるのかなんとなく分かっても文章自体はあまり理解できませんでした。
ベースの知識があまりない状態で新しい技術を習得しようとするときのあるあるなのかもしれません。
正直挫折しそうになってしまったので書籍に頼ることにしました。

書籍を読む

基礎から学ぶ Vue.js
通称「猫本」
公式ドキュメントの内容をもっとわかりやすく書いてくれている本です。
7章以降は飛ばしました。
  
動かして学ぶ!Vue.js開発入門
こちらはVue.jsの基礎中の基礎がかなり噛み砕いて説明されておりわかりやすかったです。
説明にも特に難しい用語が使われていないので最後までスラスラ読めました。
個人的に最初から難しい説明を読むのが嫌ならこの本から入ると良いと思います。
  
Vue.js入門 基礎から実践アプリケーション開発まで
全体を読むというよりは、わからない部分や知りたい部分のみ都度目を通しています。
  
コンポーネントやVue Router、Vuexについての説明は最初は読まずに飛ばしました。
また、学習過程でわからないことが出てきた際に公式ドキュメントや上述の本の必要な部分を都度読み返しています。
 

とりあえず簡単なものを書いてみる

まずは公式ドキュメントや本を見ながら、基礎的なものを手を動かして書いていました。
私はWebページでVue.jsをどのように使えば良いのかうまくイメージができなかったので、自分が今まで書いたjQueryをVue.jsで置き換えるとどうなるかを試したりもしていました。
 

  • dataを作ってそのまま表示してみる
  • v-modelを使ってフォームに入力した内容を表示してみる
  • v-ifを使って要素の出しわけをする
  • v-onを使ってボタンをクリックしたときにイベントを発火させてみる
  • v-forを使ってリストの内容を繰り返してみる

 
そして上記がなんとなく理解できたら、実際の業務で使えそうなものを書いて動かしていました。
 

  • 文字数をカウントするフォーム(v-model)
  • 押したボタンによって内容を切り替える(v-on + v-if)
  • Todoリスト(色々なものの組み合わせ。書籍やあらゆる記事で解説されているので基礎の応用かなと思っている)

 
などなど
 

Vue Componentについて

プロジェクト上で練習用ブランチを切って過去に作ったキャンペーンページを練習でVue.jsに直していたのですが、Pull Requestで「コンポーネントに分けた方がいいよ」とレビューをいただきました。
すっ飛ばしていた公式ドキュメントや書籍のVue Componentについての説明をやっとここで読みました。
ボタンなどの何度も使うような部品をコンポーネントとして定義し、都度呼び出すことによって簡単に使い回せるようにするイメージです。
 
公式ドキュメント
https://jp.vuejs.org/v2/guide/components.html
 

表示

FireShot Capture 015 - my-project - localhost
作成したHogeComponent<hoge-component></hoge-component>部分で表示させています。
コンポーネント名をケバブケースで記述することによって呼び出すことが可能です。

慣れないうちは割とやりがちな注意点

ちゃんと表示されないんだけど!?というときに確認すること。

  • Vue Componentを使う際はdataをfunctionにする / returnを記述する
  • スペルミスをしていないか(プロパティ名、コンポーネント名、あらゆる場所でよくやりがち)
  • Vueインスタンス内のcomponents:の中にコンポーネントの設定を記述するのを忘れていないか

 

vue-cliを使ってみる

※あらかじめnode.jsとnpmのインストールが必要です。この記事では省略します。
ある程度の規模のプロジェクトでVue.jsの開発環境を一から構築するのは大変です。
Vue.jsのアプリケーション開発に必要な環境や設定を色々と整えてくれて、雛形ファイルも用意してくれるのがvue-cliというなんかすごいやつです。
 
試しにローカル環境で使ってみます。

インストール

プロジェクトの作成

my-project部分はプロジェクト名にあたるのでお好きな名前で。
色々聞かれますがとりあえずEnter連打で良いと思います。

ローカルサーバーの起動

作成したプロジェクトのディレクトリに移動し、ローカルサーバーを起動します。
FireShot Capture 017 - my-project - localhost
http://localhost:8080/ にアクセスし、上記の画面が出れば起動成功です。
  
初めて使うときはこちらの記事を参考にさせていただきました。
https://qiita.com/567000/items/dde495d6a8ad1c25fa43
 

ファイル構造について

vue-cliを使う際は、単にHTMLファイルにVue.jsを書いていたときとは違う点が多々あります。
先ほど作成したプロジェクトのディレクトリを開き、主要なファイルを見てみます。

どのVueファイルの内容をindex.htmlのどの要素内に表示させるかを設定しています。
上記では#appという要素にApp.vueの内容を表示させています。

Vueファイルにはtemplatescriptstyleがまとめて書かれています。
これを単一ファイルコンポーネントと呼びます。
 

単一ファイルコンポーネントのメリット

Vue Componentを独立した一ファイルにすることができます。
vue-cliで作成したプロジェクト内のVueファイルは既にこの形になっています。
 
公式ドキュメント(説明が難しい…)
https://jp.vuejs.org/v2/guide/single-file-components.html
 

単一ファイルコンポーネントの利点は、一ファイルにtemplatescriptstyleをまとめて記述することができる点です。
先ほどのsrc/App.vueをもう一度見てみます。

template、script、styleがまとめて書かれているのがわかると思います!

<template>タグ直下は必ずひとつのブロック要素で囲みます。(エラーになります)
ここでHelloWorldという名前のコンポーネントを表示しています。
msg=部分についてはApp.vueからHelloWorldコンポーネントに表示させたい文字列を渡しているのですが、次のセクションで説明します!

name:部分は省略可能ですが、書いた方が良いと思います。
他の単一ファイルコンポーネントを読み込むときは、<script>タグ内でファイルをimportします(変数名 + ファイルパス)
components:内に読み込んだコンポーネントの変数名を記述するのも忘れないようにします。

デフォルト言語はCSSですが、lang属性を使用することによって他の言語をサポートしてくれます(普段書き慣れているSCSSなどで書ける)
scopedを付けることによって、記述したスタイルをそのコンポーネントにのみ適用させることができます。
その場合は下記のように書くことができます。

 

コンポーネント同士のデータの受け渡し

先ほど触れた通り、App.vuetemplate部分で読み込んでいたコンポーネントHelloWorld部分にmsg=ではじまる謎の記述がありました。

ここで、HelloWorld.vueという単一ファイルコンポーネントを読み込んでいるApp.vue親コンポーネント、読まれているファイルであるHelloWorld.vue子コンポーネントと呼びます。
 
親コンポーネント側(App.vue)のこの部分で子コンポーネント側(HelloWorld.vue)のmsg部分にWelcome to Your Vue.js Appという文字列を渡しています。

ここで、コンポーネントとして読み込んでいるsrc/components/HelloWorld.vueを見てみます。

このとき、子コンポーネントに親コンポーネント側から受け取りたいデータについて記述する必要があります。
このときに使うのがpropsで、script内に以下のように書きます。

propsを記述することで親コンポーネントから文字列を受け取ることができました。
template内の{{ msg }}部分で受け取った文字列が表示されています。
  
ここまでを表示で確認すると以下のような構造になります。
FireShot-Capture-017---my-project---localhost
 

注意点

単一ファイルコンポーネントを作成するときの命名規則

パスカルケースかケバブケースに統一するべきとのことです。
https://bit.ly/2HsGJDO
  
ちなみにピクトリンクのフロントチームではファイル名をパスカルケースに統一しています(公式ガイドに合わせています)

 

同じ階層にあるファイルのパス指定には./必須

vue-cliでファイルをimportする際、同じ階層のファイルのパス指定に./を含めないとエラーになってしまいます。

 

長くなってしまいましたが、Part.1ではVue.jsを学ぶに当たって最初に何をしたか、Vue Component、vue-cli、単一ファイルコンポーネント、propsについて説明してみました。
Part.2では実際にプロジェクト上のコンテンツをVue.jsに直した話を書いていこうと思います。


2019年08月9日

Hashimoto Naoto

コマンド操作でESXiユーザを作成して権限を付与する

こんにちは。
信玄餅を食べると毎回せる系エンジニアの橋本です。
たかが信玄餅、そう思ってないですか? それやったら明日も私は噎せますよ。

さて本題。VMWareHostClientのGUIにログインせずにユーザ追加や権限設定を行いたい。

こうする

たとえば、keisukeというユーザを作ってAdmin権限を付与したい場合、以下のようにします。

初期から設定できる権限は以下の通り。

  • Admin: 管理者権限ロール。なんでもできます。
  • NoAccess: デフォルトのロール。とくに何ができるわけでもない。
  • ReadOnly: 閲覧権限ロール。ESXiホスト関連のオブジェクトを表示できるが、変更はできない。

自分で必要な権限ロールを新しく作ることもできます。

応用

コマンドライン上で完結できると何がシアワセかと言いますと、何台ものホストサーバに対して同じ操作をする手間を軽減できるのです。

たとえばesxi-test-server-01〜20までの20台のサーバに同じユーザを作り、公開鍵までまとめて配置したいときは以下のようにします。

公開鍵id_rsa.pub はあらかじめssh-keygenで作っておいてくださいね。
なお、このまま使うと全環境で同じパスワードが割り当てられていますから、ユーザ作成後に適宜変えてください。

Ansibleを用いて初期設定をコード化&自動化したい場合はvault でパスワードの暗号化を施すのがモアベターです。


2019年07月18日

furusin

色々な画面サイズのAndroid端末をテストする

こんにちは。ピクトリンク事業部の古川です。

 

Androidアプリを開発していると「これは画面サイズが大きな端末だとキレイに表示されるけど、小さな端末だとどうなるんだろう?レイアウトが崩れたりしないだろうか?」と思うことが稀に毎日あります。

実際、弊社のメンバーが最近Unihertz Atomを購入しまして「これ…ちゃんと表示されるの…?」と心配になりました。

そんな時、Android StudioのPreview機能を使えば実機を用意しなくても擬似的に試すことが可能です。

実際に手元で見ることはできませんが、「この文字列は改行されてしまわないかな?」といったシーンでは活用できるかと思います。

 

実際にやってみる

実際に確認したレイアウトXMLを開きます。

この作業はDesignタブでもTextタブでもどちらでも実施可能ですが、今回は説明しやすいようにDesignタブで解説を進めます。

画面の上部を見てみましょう。

スクリーンショット 2019-07-18 10.36.23

こんなメニューが並んているはずです。

このメニューには、今作っている画面を「どんな状態で見てみますか?」という選択肢が多数用意されています。

このうち丸く囲ったところを変更することで、画面を表示する際の端末や画面サイズ、解像度を色々と試してみることが可能です。

選択してみると端末のリストが表示されます。解像度も表示してくれているのがいいですね。

スクリーンショット 2019-07-18 10.42.10

よく見ると、上から5つ目の「5.5, 1080 x 2160, 440dpi (Pixel 3)」にチェックが入っています。これが今試している端末のサイズとなります。

より小さな画面サイズをテストする

上記リストのうち下から2つ目「Generic Phones and Tablets」を選択してみましょう。

スクリーンショット 2019-07-18 10.45.05

このように、最初に表示されていたPixel3などとは異なるサイズや解像度のリストが用意されています。

こちらはldpiやxhdpiといった表記がされているのでわかりやすいですね。

「とても古い端末の画面サイズを試したい」といった場合はここから選択するとよいでしょう。

 

独自の画面サイズをテストする

それでは、上記リストに含まれないサイズ(例:正方形)をテストしたい場合はどうすればよいでしょうか。

答えは「じぶんでAVD(Android Virtual Device)を作っちゃう」です。

上記リストに「Virtual Device」とありますよね。これがAVDです。

AVDを作成すると、この「Virtual Device」にどんどん増えていきます。

独自画面サイズのAVDを作成する

上記リストの一番下「Add Device Definition…」を選択します。

スクリーンショット 2019-07-18 10.55.27

すると、AVD Managerが起動します。ここから画面下部の「+ Create Virtual Device…」を選択します。

新たにAVDを作成するための端末を選択する画面に遷移します。左下の「New Hardware Profile」を選択します。

スクリーンショット 2019-07-18 10.56.20

新しい端末を作成する画面が表示されます。

ここでテストしたい画面サイズを入力します。

「Screen」の「Resolution」に入力します。今回は例として500 x 500 の正方形にしました。

作成した端末の情報がわかりやすいように、「Device Name」を画面サイズにしておくとよいでしょう。今回は「500×500」としています。

 

スクリーンショット 2019-07-18 10.59.29

画面の作成をFinishすると、端末を選択する画面に、作成した端末が追加されています。

この端末を選択し、通常通りAVDを作成しましょう。

スクリーンショット 2019-07-18 10.59.42

AVDの作成が完了すると、最初の端末リストに作成したAVDが追加されます。

スクリーンショット 2019-07-18 11.05.26

これで特殊なサイズの端末が発売されても、わざわざ購入せずともレイアウトが崩れていないか確認することができます!

最後に

でも特殊な端末が発売されたら手元に欲しくなるのがガジェ厨


2019年06月27日

kakuda.takumi

JJUG CCC 2019 Spring 参加報告会(非公式)を開催しました!

こんにちは。ピクトリンク事業部の角田です。

前回に引き続き、フリュー主催の勉強会を開催しましたのでご報告します。

前回のレポートはこちらから

京都Devかふぇ#6 〜JJUG CCC 2019 Spring 参加報告会(非公式)〜

今回は合計で約10名の方々にご参加頂きました!

今回は5/18(土)に開催されたJJUG CCC 2019 Springの参加報告会と題しまして勉強会を開催いたしました。

勉強会の様子

トップバッターは弊社の@masaozi3が「1400万ユーザーのWebサービスを 15年運用して考える、
Javaである理由」という題で発表しました。

今回のJJUG CCCにて弊社のサービスであるピクトリンクがJavaである理由について発表したものの再演を行いました。

IMG_0812

 

2番手は@mdstoy 様による「もう参照渡しとは言わせない」です。
こちらは2018年冬のJJUG CCCにて発表された内容の再演でした。
Javaが参照渡しではないということを主張しつつ、Javaの評価戦略について詳しくお話しいただきました。

自分自身、この辺りの話はわかっていない部分が多かったので、とても勉強になりました。

IMG_20190607_193237162

3番手はお恥ずかしながら私@chan_kakuzが「JJGU CCC 2019 Springまとめ~Java歴1年なりの意見を添えて~」という題で発表いたしました。

私自身は、今回のJJUG CCCは登壇はしておらず、聴講のみでの参加でした。

今回の勉強会では、聴講者としての目線で今回のJJUG CCCはどんな感じであったかなどをお話しさせていただきました。

IMG_0814

 

4番手は@kis 様による「最近のJava Webフレームワーク / Java Web Framework ccc 2019 spr」です。
こちらの内容は今回のJJUG CCC内で行われたアンカンファレンスの再演となりました。
最近のJavaのWebフレームワークについて最近の事情を踏まえつつ紹介されていました。

個人的には、紹介されていてたフレームワークの中では一番Springに似ていたMicronautがとても使いやすそうで気になりました!!

IMG_0815

まとめ

今回は京都Devかふぇ史上初となるJavaをテーマにした勉強会を開催してみました。

Java界隈で著名な方々をご招待させていただいて、発表の時ももちろんですが、懇親会でも非常に盛り上がりました。

今後もサーバサイドについての勉強会を開催しますので、参加お待ちしております!!