はじめに
現在私は、Vue.jsでのフロントエンド開発を行う際のUIフレームワークとしてQuasarを使っています。このQuasarの公式ドキュメントを読むのが好きで、見ているだけでテンションがあがってきます。特に好きなのがVue Componentsでして、ボタンやフォームなど色々なコンポーネントを見ていると、おもちゃに囲まれている子供のような気持ちになります。そしてこのQuasarドキュメントの中には、意外と気づきにくい隠された神ツールがありますので、今回は私的におすすめなツールをランキング形式で３つ紹介したいと思います。
おすすめの神ツール３選
第３位 Layout Builder
Quasarをインストールした初期の状態では、デフォルトでレスポンシブデザインのレイアウトが設定されていると思います。これをカスタマイズしたいと思った時に、役に立つツールです。Layoutというページの途中にひっそりとLayout Builderというリンクがあるんですよね。
リンクを開くと以下のようなページが開きます。
最初の設定で選べるのは以下があります。
- I want a QHeader（ヘッダーが欲しい）
- I want a QFooter（フッターが欲しい）
- I want a left-side QDrawer（左サイドバーが欲しい）
- I want a right-side QDrawer（右サイドバーが欲しい）
- I want navigation tabe (requires QHeader)（ナビゲーションタブが欲しい）
たとえば、ここで不要だと思うもののチェックを外してみます。「フッター」「右サイドバー」「ナビゲーションタブ」を外してみます。するとすぐさまビルダーに反映され、以下のように不要なコンポーネントが消えました。
この時点のレイアウトをコードに反映させたい場合は「EXPORT LAYOUT」ボタンを押すとコードを見ることができます。これをコピーしてレイアウトファイルに貼り付けるだけでカスタマイズ完了です。
さらに細かく設定をしていきたい場合は「CONTINUE」ボタンを押すと次の設定に進みます。
ここでは、レイアウトのviewやヘッダー/フッターの表示/非表示の制御、サイドバーのオーバーレイモードなどの設定が選べます。ここでも選択するとすぐにビルダーに反映されるので、スクロールした時にヘッダーが消えるようにしてみたり、実際の動きを確認しながらレイアウトを調整することができます。
このように色々調整できる設定がありますので、使う機会がありましたら試してみてください。
第２位 Icon Genie CLI
第２位はIcon Genie CLIです。これも感動しました。サイトのファビコンやスマホ用のアプリのアイコンなど、たくさんのサイズを何パターンも用意しなくてはならなかったり、そもそもファビコンってどうやって作るんだっけと毎回調べたり面倒な作業でしたが、このCLIを使うと一撃です。Node.jsのパッケージである「@quasar/icongenie」をインストールすると icongenie というコマンドが使えるようになります。詳しいインストール方法はこちらをご覧ください。
以下はQuasarプロジェクトの直下で実行したものです。spaモードであることと、元となる一つのロゴ画像を指定しています。
$ icongenie generate -m spa -i ~/logo.png
Generating files with the following options:
==========================
Quasar project folder..... /Users/sample-user/sample-app
Quality level............. 5/12
Icon source file.......... /Users/sample-user/logo.png
Icon trimming............. yes
Icon padding.............. horizontal: 0; vertical: 0
Background source file.... none
Assets of................. spa
Generator filter.......... none
Svg color................. #1976D2
Png color................. #fff
Splashscreen color........ #fff
Splashscreen icon ratio... 40%
==========================
* Generated ico: public/favicon.ico (39.4KB)
* Generated png: public/icons/favicon-16x16.png (381.0B)
* Generated png: public/icons/favicon-32x32.png (725.0B)
* Generated png: public/icons/favicon-96x96.png (2.4KB)
* Generated png: public/icons/favicon-128x128.png (3.2KB)
* You will need the following tags in your /index.html or /src/index.template.html:
<link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="icon" type="image/ico" href="favicon.ico">
Task done - generated 5 file(s)!
出力結果を見ると、favicon.icoが1つと、4種類の大きさのpng画像が、しかるべきディレクトリに生成されていることがわかります。また、index.htmlへ追記するべきコードも出力してくれていますので、コピペするだけです。作業はこれだけで完了しちゃいますので、簡単です。
第１位 Flex Playground
第１位がFlex Playgroundです。私が毎回お世話になっているツールです。
レスポンシブなデザインを構築するにあたって要素を配置する際にFlexやGridを活用することが重要になってくると思いますが、なかなか思い通りの配置にならないこともあるかと思います。しばらくコードを書いていないとすぐ忘れちゃいますしね。
そんな時にこのツールが役に立ちます。ツールの全体像は以下のようになっています。
今回実現したい配置として 子要素を、左右に均等配置、上下に中央配置（ただし、3番目の子要素だけは上下にend配置） と仮定します。イメージは以下のような感じです。
このツールでは親コンテナと子要素にそれぞれどんなCSSクラスを指定すれば良いのかがわかるようになっています。動きをわかりやすくするために「+ ADD CHILD」というボタンを2回押して子要素を2つ追加し、それぞれの高さを200pxと300pxに設定してボックスサイズがバラバラの子要素を作ります。子要素のHeightに直接入力することができます。
ここで 子要素を、左右に均等配置、上下に中央配置（ただし、3番目の子要素だけは上下にend配置） となるように、セレクトボックスのオプションを調整しながら、設定していきます。最終的には以下の項目を調整することで実現できました。
親コンテナ
| Justify Content | Align Items |
|---|---|
| justify-between | items-center |
Child #3
| Alignment Options |
|---|
| self-end |
以下のようになりました。
これで問題ないと思ったら、上記画像の黄色い枠線に表示されているCSSクラスを指定すればOKです。Container classes（親コンテナのクラス）には fit row wrap justify-between items-center content-start というクラスを指定し、Child #3 classes（子要素#3のクラス）には、 self-end というクラスを指定すればOKです。便利ですね！
まとめ
今回はおすすめのQuasarの神ツールを３つ紹介しました。いかがでしたでしょうか。もしQuasarを使っていて今回初めてツールの存在を知ったという方はぜひ使ってみてはいかがでしょうか。感動しちゃいますよ。
Discussion
え、便利🙀