12/11を担当しますデザイン部のsakaguchiiです。自分は令和になった日にアイスタイルへ入社し、現在はフロントエンジニアとしてマークアップをしたりVue.jsと戯れたりしています。今回はVue.jsで作ったツールについてお話したいと思います。弊社のslackには筋肉チャンネルがあります。トピックは「トレーニングは裏切らない」トレーニング方法に悩んだとき相談するとどこからともなく筋肉の猛者が答えてくれるそんな素敵なチャンネルです。私もなんちゃって筋トレ族としてチャンネルに参加しており、自宅でリングフィットを手に日々トレーニングに励んでいます!そのリングフィットですが、ゲーム外から記録を確認する方法が無く、あるとすればスクショした画面→ツイートしたものを見返す程度です。ツイッターにはリングフィット関連以外の画像も投稿しており、見返すのも手間なため、少しいい感じにまとめられたらいいのになと思い、作りました。作ったものテキストを入れたら見やすいようにリスト化してくれてグラフも作ってくれるツールです。作るまでの流れ要件定義まず自分がどういうことものを作りたいのかを書き出しました。これを決めないと途中で脱線したり迷走しはじめてしまうため、指針として書きます。スマホのOCRアプリ使う?→精度はよさげ。Vue.js×グラフ書いたことないので練習したいこれで必要な機能は「テキストを入力できるエリア」と「リスト」と「グラフ」のみっつだと洗い出すことが出来たので早速実装していきます。テキストエリアゲームの記録画面のスクリーンショットをOCRツールでテキスト化して、整形したものを貼り付けます。公式ガイドの複数行テキストの通りにテキストエリアのタグを使いました。リストテキストエリアに入力された文字列をオブジェクトに変換し、dataにセットし、v-forで表示します。検索ボックスに文字をいれると、その文字列を含む行のみを抽出します。公式ガイドのグリッドコンポーネントを参考にしました。グラフグラフの生成にはchart.jsを使いました。リストと同じように文字列をオブジェクトに変換し、chart.jsの要素に当てはまるようセットし描画しています。スクワットと同じセットメニューに加えているプランクの実施回数が少ないことから、私がいかにプランクから逃げているかが可視化されてしまったので、弱点の洗い出しができました・・・。次からプランクを頑張ります・・・。スタイルあてここまでの説明では完成形の画面を載せていたのですが、実際の作業ではある程度機能が整うまではスタイルをあてていなかったため実際は下記のような状態でした。ここからスタイルをあてていきました。デザインが決まっている状態であればスタイルあてをしながら機能を作りこんでもいいのですが、デザインが決まっていない状態でそれをしてしまうと迷走する傾向にあるため、ここでもある程度デザインの要件を決めます。そこまで重くないボリュームであるためCSSフレームワークを使った方が色が散らかりすぎず、規則性が保たれたデザインを組むことが出来ますが、言い換えれば使う色を絞り、規則性を意識すればそこまでデザインが崩壊することはないと考えています。今回は業務ではないため「アットコスメぽい」とあいまいな定義でスタイルあてを行いましたが、業務においてはデザインガイドラインに沿いながらデザイナーの方が具体的にカラーコードを定義したり、キーカラーの使う頻度を考えたりなどしながらデザインを作っています。その辺りの話は今回の本題から外れてしまうため、デザイン部のnoteをぜひフォローしていただければと思います!最後にふと思い立ったようにアプリを作っちゃいましたが、「ああいうのがあればいいのにな」というものを「作ってみるかー!」と動けるのがエンジニアをやっていて楽しいなと思う瞬間だったりします。デザイン部所属のフロントエンジニアとしてデザイナーと密にやりとりする機会が多いので、デザインについてもアンテナを立ててデザインの面白さを知っていけたらいいなと思っています。そんな私が所属しているデザイン部ではフロントエンジニア、そしてデザイナーを募集しております!興味がある方は募集ページからクリックをお願いします。2009年に大学を卒業後、IT特化の人材サービス会社へ入社。IT」の世界ナンバーワンを目指して日々奮闘中。趣味はフィルムカメラ。IT」の未来に挑戦しているかご紹介します。投稿ページなどでスペースの説明として表示されます。