Furyu
[フリュー公式]

Tech Blog

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

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

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


2019年04月22日

awata

systemd-tmpfiles-setup.service が LDAP を使用できなくて /var/run/mysqld が作成されなかった

こんにちは。
ピクトリンク事業部開発部インフラ課の粟田です。

CentOS7で表題の件に引掛ってmysqlが自動起動できない問題にあたったので解決方法のメモを記述します。

問題

まぁ、表題の通りなんですが、OSを再起動しても /var/run/mysqld ディレクトリが作成されていないので、mysql が /var/run/mysqld/mysqld.pid ファイル作成エラーで起動できませんでした。

暫定として、

していたのを根本的に修正したいな、と調査しました。

調査

ここでWebサイトを調査してみると、

systemdでサービスを動かす際、/var/runにディレクトリを作った時の落とし穴と対策

お前らもさっさとハマって泣くべきCentOS7の落とし穴4つ

の様な記事が見つかったので対応できそうかなと進めてみました。

検証

/etc/tmpfiles.d にファイルを作成するとディレクトリが作れる、という事だったので作成して再起動を実施してみました。

再起動してから

できてないじゃないですか……

/etc/tmpfiles.d のファイルを参照するプロセスを確認してみると、 systemd-tmpfiles ってのが見つかりました。

引数見て実行してみると、

できてる……

systemd-tmpfiles がどこから呼ばれているのかを調べてみると、/usr/lib/systemd/system/systemd-tmpfiles-setup.service を見つけました。

早速ステータスを確認してみます。

エラーですやん。

さらに、このプログラムを調べてみると、/usr/lib/tmpfiles.d を参照する様なので見てみる。

あれ、既にある……

エラーを調査するべく sudo journalctl -u systemd-tmpfiles-setup.service を実行。

mysql ユーザが LDAP に定義されていて、ネットワーク起動前に systemd-tmpfiles-setup が実行されるから起動できないんだろうと推測しました。

そこで、mysql ユーザでないユーザで /var/run/mysqld を作ってみます。

再起動してから

ちゃんとできてる!

ここまでで根本解決として以下のものを想定しました。

  1. /var/run/mysql を root で作って起動時に mysql に uid/gid を設定する
  2. mysql 起動直前に /usr/bin/systemd-tmpfiles –create を実行する
  3. pid ファイルの出力位置を変更する
  4. ホストのローカルに LDAP に定義してるuid/gid で mysql ユーザを作成してしまう

実際には1、2、3どの方法でも解決するのは確認しました。
4は未検証です。
LDAP 認証できない様にサーバ起動してユーザ作成するのとかが面倒だったので……

解決

先に提案した中で、1番を選択する事にしました。
理由として、

  • 2番を選択したら systemctl status systemd-tmpfiles-setup で常にエラーになってるのがなんかイヤ
    • プロセス起動のたびに create 呼ばれるのは chown 呼ぶより気色悪いし
  • 3番は /etc/my.cnf を変更したのに pid ファイルの出力先が変らない、と大騒ぎする人がいたのでいじりたくないな
  • どうせどれを選択しても /usr/lib/systemd/system/mysqld.service は編集しないといけないし(4は除く)

を思うと他の人に手順を説明しやすいのは1番かな、と。

これで mysql が自動起動できる様になりました。

あとがき

systemd-tmpfiles-setup と LDAP 相性よろしくないのかも……
他にも記事をいくつか見つけたし。