画像サイズをアスペクト比から計算するツールを作りました

数年前にVue1.xを使って以来まともに触っていなかったので、Vue CLIとVue2.xで何か作ろうと思って画像サイズ計算ツールを作りました。

以前Vue 1.xを触っていたおかげもあってVue 2.6でも普通に組むまでの進みはよかったのですが、Vue UI ライブラリ「Vuetify」に手を出したら、なかなか馴染まなくて慣れるのに時間が掛かりました。

Vuetifyをこのサイトの一部に組み込むので必要なコンポーネントだけチョイスして実装していましたが、先にグリッドシステムを少し理解した方がよかったり、一部のコンポーネントを拡張するやり方に手こずったりと3歩進んで2歩下がるを繰り返してました。あとはcssがバッティングしたりとか…。

導入難易度はそこまで難しい部類ではないと思いますが、ドキュメントはちょっと読みにくいような…。Vuetifyの基礎が抜けてるからだと思いますが、どうコンポーネントを組み合わせればいいのか?というのが理解しにくい感じがしました。
きちんと基礎から理解して使えばパパッとUIが作れそうなので何かの案件で使ってみたいところです。

そんな感じで四苦八苦しながら作成した計算ツールは、サイズを入力するだけでアスペクト比からwidth、height、padding-topの算出ができます。以下からアクセスできるので是非使ってみてください。

この計算ツールに使ったパッケージは以下です。(細かいところは省いています)

vue: 2.6.11
vuetify: 2.4.0
vuedraggable: 2.24.3
vue-clipboard2: 0.3.3
vue-sticky-directive: 0.0.10

WPの固定ページでVue CLIのホットリロード環境を作るのに苦戦したので構築方法を書きました。

  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次