どうもフリーランスプログラマのTakaです。自粛生活の中、いかがお過ごしでしょうか？
今回は一時期流行ったというかひとつの定番レイアウトとなったピンタレスト風レイアウトを簡単に作れるMasonryプラグインのVue.js（Vue-cli）版の基本的な使い方を紹介したいと思います。
ピンタレスト風レイアウトかっこいいですよね
環境
まず環境ですが今回は下記環境で試してみたいと思います。
今回の環境
- Webpack v3.12.0
- vue v2.6.11
- Node.js v13.7.0
上記の通り、今回はWebpackを使って構築していきます。Webpackのインストールは下記の記事で紹介しているのでそちらをご参照ください。
Masonry Vueのインストール
Webpackプロジェクトを構築したら、早速MasonryのVue版をインストールしていきます。
MasonryのVue.js版はこちらの公式サイトに載っている手順で簡単にインストールすることができます。
具体的にはプロジェクト配下で下記コマンドを実行します。
ちなみに、今回はnpmコマンドで実装します
インストールが完了したら、package.jsonを開いてインストールされているか確認しておきます。
下記の通り、vue-masonryがインストールされていることが確認できますね。
基本設定
インストールが完了したら、あとは実装するだけです。
まずは、Masonryを使いたいコンポーネントを開いて下記のjsコードを追加します。
内容としてはプラグインを読み込み、useメソッドでプラグインを使えるようにしているといった感じですね。
描画メソッドの追加
続いて、Masonryレイアウトを整形してくれるメソッドがあるので、それを下記のように今回はページが読み込まれたタイミングであるmountedメソッド内に追加します。
これでページが読み込まれた際にレイアウトに整形してくれます。
画像を並べてみる
あとは、実際にピンタレスト風のレイアウトで並べたいコンテンツを作成していくだけです。公式ではテキストデータを並べていますが、今回はピンタレスト風と言っているので画像を並べたいと思います。
まずは、並べたい画像を「/src/assets」の中に格納しておきます。
staticディレクトリの中に格納しても大丈夫です
画像を格納したら、あとは実際のその画像をMasonaryの仕様に合わせて表示してあげればいいだけです。
具体的には下記の通りにコーディングすることでMasonaryを使ったピンタレスト風レイアウトを作ることができます。
重要なポイントを簡単にまとめると、まず画像データのパスをdataにitemsという変数名で格納してます。
そして、そのデータを4〜6行目でfor文を使ってループで表示させています。
あとは、mountedメソッド内に、MasonryのredrawVueMasonry関数を使ってレイアウト整形するという感じですね。
その他、画像のサイズ感やマージン等は普通にcssで調整してあげれば大丈夫です。
まとめ
ということで、今回は久しぶりにVue.jsのプラグイン導入ネタになりますが、ピンタレスト風レイアウトを簡単に実装してくれるMasonryプラグインのVue.js版の導入方法を紹介させていただきました。制作時間に余裕がないときなどはこういったプラグインがとても役に立つので機会があれば使ってみてください。
それから、githubにこのサンプルのプロジェクトデータも上げておきましたので、不明点あればそちらも参考にしていただければと思います！
それでは今回はここまで！また！
