Zenn
🎨

【Vue.js】CSS（box-shadow）生成ツールの制作を振り返って

2023/10/22に公開
JavaScript
Vue.js
Vuetify
Vite
Vitest
idea

🎨制作したツールの紹介


cssのbox shadowプロパティの値を生成するツールです。
box-shadowプロパティの値をスライダーで調整し、実際にWebサイト上での影の見え方を確認しながら自由にbox-shadowの値を調整できます。
影の色や透過度もカラーパレットで自由に選択する事ができ、ダークモード・ライトモードにも対応していてるので、ダークモード上での影の見え方も確認しながらbox-shadowの値を生成できます。

🚵‍♂️本ツール制作のきっかけ

1. box-shadowプロパティについて

Webサイトを見ていると影がついているUIを見かける事があると思います。
例えば以下のようなボタンの周辺に薄っすら広がっている影でしたり、サイト上のドロワーやその他のUIに影がついているのをよく見かけます。

このようなUIの影はCSSのbox-shadowプロパティで値を設定する事で表示する事ができます。
実際に書いていくと以下のような感じです。

  • 例1：水色の影
box-shadow: 15.34px 15.34px 30px 2.53px rgba(77, 255, 252, 0.82);

  • 例2：白色の影
box-shadow: 15.34px 9.19px 30px 2.53px rgba(255, 255, 255, 0.82);

このように複数のbox-shadowプロパティの値をそれぞれ変更し、デバッグしながら影の見栄えを調整していくのは面倒です。。
よって、この面倒な作業を時短し自由に影をつけれるbox-shadowプロパティの生成サービスがあれば自分が嬉しく思ったので作り始めました。

2. ダークモードについて

さらに近年ではダークモード🌙に対応したWebサイトも数多く見かけると思います。
背景がダークモードで黒色のような背景色に対して、スライダーやカラーパレットで色を選択するようなGUI操作でbox-shadowプロパティの値を生成するサービスは、自分が調べた限り出てこなかったです。
このように近年のダークモードの需要の高まりも踏まえて、ダークモードに対応したbox-shadowの生成サービスを作成したいと思いました。

3. Vue.jsについて


フロントエンドのフレームワークとしてはReactやVueが有名で人気が高いのではないでしょうか。
私自身、Reactは触ったことがあるのですがVueに関してはこれまで触った事がなかったです。
よってVueを使用したBOX SHADOW 生成ツールの制作を始めました。
個人開発では仕事と違い、好きな技術を自由に試せる点が魅力的です。

🗓️開発期間

開発期間は1ヶ月＋1週間程度です。
平日は仕事があったので大体は～1時間前後の時間開発にあてていました。
よってメインの開発としては休日に行っておりました。
休日はダラダラ品がですが平均3，4時間くらい時間を使ってました。
Vue構文を調べるところから始めたので時間がかかりました。

モチベーションの維持の方法

私自身、作りたいものを決めていたらそのために○○の技術を学びたい！
という感じでモチベーションが湧いてくる事に自覚があります。
逆に作りたいものが何もないのに、触ったことのないプログラミング言語等の学習をするとなると途中でモチベが無くなってしまうかもしれません。。
なので、今回だとbox-shadowプロパティの生成ツールを作成すると決めた上で開発を始めました。結果として平日も含めほぼ毎日学習・開発を進める事が出来ました。
約40日間ほど連続でコミットしGitHubに草を生やせました🍀

👨‍💻開発環境

せっかくVueに関して勉強するのでVueに関するライブラリやフレームワーク等を以下記載の通り使用致しました。

  • vue.js（フレームワーク）
  • Vuetify（UIライブラリー）
  • vite（ビルドツール）
  • vitest（テストツール）
  • VSCode（Visual Studio Code）（エディタ）
  • github pages（ホスティングサービス）

📘工夫した点

1. 複数のvueのフレームワーク等の使用

上記の開発環境で記載した通り、Vueに関する技術により触れながら学習したかったので、
複数のライブラリやフレームワーク、ビルドツールを使用しました。

・Vuetifyの使用について

ドロワーとトグルスイッチのUIの作成においてVuetifyを使用致しました。

  • ドロワー
    Vuetifyではワイヤーフレームが何種類が提供されており、今回はその中でもBaseのワイヤーフレームを使用しました。
    Baseではドロワーをv-navigation-drawerタグで作成されています。デフォルトではドロワーの中は空のままですが、今回はドロワーにリスト要素を作成し、要素をクリックすると画面を遷移する仕様を実装してます。
    ドロワーに関しては以下のgif画像のようにハンバーガーメニューを押すと、左から表示されるように設定しました。

ドロワーのデザインに関してもCSSで変更して自分なりにモダンな見た目にしたつもりです。
ドロワーに影を付け背景色は上下にグラデーションをかけており、右の上下の角のみborder-radiusで丸くしてます。

・参考：ワイヤーフレーム
・参考：https://github.com/vuetifyjs/vuetify/blob/v2-stable/packages/docs/src/examples/wireframes/base.vue

・トグルスイッチ

ダークモードとライトモードの切り替えにVuetifyのトグルスイッチを使用しました。
最近だとダークモードに対応しているサイトやアプリ等が多くあると思いますので、
黒色の背景に対応した影の生成も行えるツールも需要があるのではないかなと思ってます。
よって今回ダークモードに対応したBOX SHADOW 生成ツールを作成しました。
HTML、CSS、JavaScriptでトグルスイッチを実装するとなると、デザインから考えてHTML・CSSで実装しJavaScriptで処理を書いていくことになり面倒ですが、Vuetifyを使用するとv-switchコンポーネントを利用し数行程度の小さいコスト実装でき便利でした。

・参考：https://vuetifyjs.com/en/components/switches/#usage

・Google fontの使用

今回作成したBOX SHADOW 生成ツールのWebサイトは日本向けです。
日本語のフォントで人気が高いのはNoto Sans JPではないでしょうか。
Noto Sans JPはシンプルで読みやすく、幅広い日本語向けのサイトに導入されていると思います。
本サイトにも試しに導入してみて、見やすかったのでこちらを使用致しました。
・参考：https://fonts.google.com/

📝感想

私自身、Vueに関して初めて触れたので分からない事だらけでしたが、Vueのディレティブや{{}}のマスタッシュ構文を用いたバインディングの方法など勉強になりました。
UIフレームワークのVuetifyにはドロワーメニューやトグルスイッチなどを小さなコストで実装する事ができ、短時間でUIを実装できたのでありがたかったです。
画面遷移やUIの確認のためのユニットテストにはVitestを使用しました。
以上のようにこのBOX SHADOW 生成ツールの制作を通して、以前から名前を聞いたことのあり興味のあったVue.jsとその関連のフレームワークをいくつか使用でき勉強になりました。
約1ヶ月のこの開発をしてみて目に見えて結果がすぐ分かるフロントエンドはやはり夢中に慣れたことに加えて面白かったです。
次はPythonでBlenderのアドオン開発と苦手なJavaの克服に力を入れていきます💪

Discussion