前回の記事で覚書したVue.jsの基礎的な知識を基に、現時点のスキルで制作可能なサンプルを作ってみました！（画像クリックでサンプルに飛びます）
何これ？って感じだと思いますが、以前に制作した「HONEBITOの動く！LINEスタンプ」の一覧に簡易検索機能をVue.jsで実装してみたサンプルになります。
まだフロントエンド未経験者がVue.jsを学び始めたばかりのスキルレベルのため、いきなり目標のSPAを作るとかは無理なので、Vue.jsの基本的な機能だけで作れそうなサンプルを作ってみました。
上記サンプルの作り方について
今回はこちらのサンプルの作り方を覚書していきます。
HTML/CSS/jQuery+Vue.jsを使用していますが、Vue.jsのサンプルなのでVue.js部分のみ簡単に覚書します。
(1)Vue.jsの設定およびLINEスタンプ表示データを配列で準備
まずVue.jsの基本設定およびスタンプ一覧に表示するデータを記述します。
var app = new Vue({
el: '#app',
data: {
stamps: [
{name: 'オハヨウゴザイマス', category:'あいさつ', image: './img/honebito01.gif'},
{name: 'コンニチハ', category:'あいさつ', image: './img/honebito02.gif'},
{name: 'イイネ!!', category:'返事', image: './img/honebito04.gif'},
{name: 'ビックリ!', category:'感情表現', image: './img/honebito09.gif'},
{name: 'マダ?', category:'その他', image: './img/honebito03.gif'},
{name: 'OK!', category:'返事', image: './img/honebito05.gif'},
{name: 'ゴメン', category:'返事', image: './img/honebito06.gif'},
{name: 'ゴハンドウ?', category:'その他', image: './img/honebito07.gif'},
{name: 'ゲンキ?', category:'あいさつ', image: './img/honebito08.gif'},
{name: 'マタアシタ', category:'あいさつ', image: './img/honebito10.gif'},
{name: 'マタネ', category:'あいさつ', image: './img/honebito11.gif'},
{name: 'アリガトウ', category:'返事', image: './img/honebito12.gif'},
{name: 'タノシミ', category:'感情表現', image: './img/honebito13.gif'},
{name: 'ネテタ', category:'その他', image: './img/honebito14.gif'},
{name: 'オネガイ', category:'その他', image: './img/honebito15.gif'},
{name: 'ムカムカ', category:'感情表現', image: './img/honebito16.gif'},
{name: 'ガーン', category:'感情表現', image: './img/honebito17.gif'},
{name: 'カッコイイ', category:'感情表現', image: './img/honebito18.gif'},
{name: 'ドウスル?', category:'その他', image: './img/honebito19.gif'},
{name: 'ガンバレ', category:'返事', image: './img/honebito20.gif'},
{name: 'ドンマイ', category:'返事', image: './img/honebito21.gif'},
{name: 'マジ!!?', category:'感情表現', image: './img/honebito22.gif'},
{name: 'サンキュウ', category:'返事', image: './img/honebito23.gif'},
{name: 'ベンキョウチュウ', category:'その他', image: './img/honebito24.gif'},
],
newStamps: [],
Category: [],
singleCate: []
},
一覧表示したいLINEスタンプの各データを配列として[name(スタンプ名)/category(スタンプ種類分け用)/image(画像パス)]のデータを持たせています。
その他の変数として、以下変数を定義しています。
・newStamps：絞込処理等実行後のスタンプ表示用変数
・Category：スタンプデータ全カテゴリ保存用変数
・singleCate：カテゴリの重複を除いた絞込カテゴリ保存用変数
(2)createdフックでのデータ初期化
インスタンスが生成された後にコードを実行するcreatedで、一覧表示するLINEスタンプのデータを整形・表示します。
created: function(){
this.newStamps = this.stamps;
for( var i = 0; i < this.stamps.length; i++){
this.Category.push(this.stamps[i].category);
}
//カテゴリ配列重複データ削除
this.Category.forEach((v) => {
if (!this.singleCate.includes(v)) {
this.singleCate.push(v);
}
});
},
newStampsにstamps配列データをコピーします。
stampsの各スタンプカテゴリをCategory配列に入れた後、重複データ削除したカテゴリデータのみをsingleCate配列に格納します。
Vue.jsではデータバインディングされるため、表示側は上記整形データをディレクティブ等でHTMLに組み込むだけで、データ表示されます。
category_btnlistクラスのブロックにカテゴリーボタンを表示し、stamp_listクラス部分にLINEスタンプデータをリスト表示するように、[v-for/v-bind/マスタッシュ構文]等でデータ表示を行っています。
(3)カテゴリ絞込用のmethodsを定義し、v-onでテンプレート(HTML)側に設定
カテゴリボタン[あいさつ/返事/感情表現/その他]をクリック時に各カテゴリで絞込されるように、methods：categorySearch を定義・設定しています。
methods: {
categorySearch: function(cate){
this.newStamps = [];
for( var i = 0; i < this.stamps.length; i++){
if(this.stamps[i].category === cate){
this.newStamps.push(
{name: this.stamps[i].name, category:this.stamps[i].category, image: this.stamps[i].image}
);
}
}
}
},
カテゴリボタンクリック時にクリックされたボタンのカテゴリーをcategorySearch関数に渡します。
categorySearch関数では、まずnewStampsの配列データをクリア。
引数として渡されたカテゴリーと一致するデータのみstampsからnewStampsにpushし、表示するnewStamps配列データを作成します。
【サンプルデータについて】
上記のようなコードで今回の『LINEスタンプ一覧』をVue.jsを使用し、制作してみました。
今回のサンプルのHTML+JavaScript部分の全コードは以下になります。
あと、初期表示時のみCSSアニメーションで表示調整しています。
Vue.jsでは<transition>で囲んだ部分にCSSアニメーション等適応できますが、自由自在にアニメーション効果を作るにはまだかなりスキル不足のため、いったん初期表示のみに追加しました。
Vue.jsの機能詳細などは以下公式サイトのドキュメントを参考にしました。
このブログのタイトルが『クリエイター向けWebアニメーション覚書』となっているように、個人的な最終目標はWebアニメーションを自由自在に使いこなしたWebコンテンツを作ることなので、一歩ずつ確実にレベルアップを目指していきたいなと考えています！
上記で説明させていただいたサンプルはGitHubに上げてあります。
LINEスタンプについて
また、Vue.jsよりもLINEスタンプに興味があるというクリエイターの方もいるかもしれないので、個人的に一番使用頻度が高い『OKスタンプ』の.flaデータも[linestamp]ディレクトリの中に入れておきました！
ひと昔前のLIENスタンプブームは去ってしまった＆LINEスタンプ市場は既に飽和状態な感があります。
ですが、個人で使える自分専用のスタンプがあるだけで、かなりのセルフブランディングになると思いますので、興味ある方は是非ご自身のLINEスタンプも作ってみて下さい！
私が動くLINEスタンプを制作していた時は、[24個1セット]が必須条件でしたが、今は[8個]からでも申請可能なようなので、かなり制作時間のハードルも下がっていると思います＾＾
高度なキャラクターアニメーションについて
更に高度なキャラクターアニメーションを作りたい方は、以前のブログ記事でゲーム用2Dアニメーションソフトウェア『Spine』を使用したWebサイト制作についても覚書していますので、興味を持っていただければ嬉しい限りです！
