開発 | senmyou's blog

v-ons-list-item のリップルエフェクト

Onsen UI の v-ons-list-item コンポーネントに tappable 属性をつけると、タップしたことが視覚的にわかるようなエフェクトを表示する要素が追加されます。Android ではタップしたときにリップル（波紋）エフェクトを表示します。

また、v-ons-list-item コンポーネントでは left、center、right、expandable-content の４つのセクションが提供されています。

以下のサンプルは、left、center、right のセクションを組合せたものです。上段の「leftのみ」や「rightのみ」、「left　right」をタップするとリップルエフェクトがリストアイテムの一部にのみかかるケースがあるのがわかります。

See the Pen Onsen UI by senmyou (@senmyou) on CodePen.

Chrome DevTools で確認したところ、center セクションの要素がない場合は自動的に center セクションの要素が追加されるようです。この center セクションの要素は子要素に ons-ripple コンポーネントを持っており、タップするとこの部分にのみリップルエフェクトがかかります。

このような部分的にかかるリップルエフェクトを防ぎたい場合は、空の center セクションの要素を追加します（前述のサンプルの下段参照）。

<v-ons-list-item tappable>
  <div class="left">left</div>
  <div class="center"></div>
</v-ons-list-item>

<v-ons-list-item tappable>
  <div class="center"></div>
  <div class="right">right</div>
</v-ons-list-item>

<v-ons-list-item tappable>
  <div class="left">left</div>
  <div class="center"></div>
  <div class="right">right</div>
</v-ons-list-item>

v-ons-list のアコーディオン

Onsen UI の v-ons-list コンポーネントでコンテンツを開閉するアコーディオン機能を実装したいときは、v-ons-list-item コンポーネントに expandable 属性を記述します。この v-ons-list-item コンポーネントをタップすると、 expandable-content クラスを付けたdiv要素の表示が切り替わります。

<v-ons-list-item expandable>
  Tap to expand
  <div class="expandable-content">This is shown when expanded</div>
</v-ons-list-item>

expandable 属性は v-ons-list-item コンポーネントでのみ有効です。そこでv-ons-list-header コンポーネントで動作するアコーディオン機能を自作してみました。

以下のサンプルは２つの v-ons-list からなっています。上段は v-ons-list-item に expandable 属性をつけたもの、下段は今回自作したものになります。「Tap to expand 」をタップするとコンテンツが開閉します。

See the Pen Onsen UI by senmyou (@senmyou) on CodePen.

Vue のトランジションフックを利用しています。リストヘッダでアコーディオンを行いたい方の参考になればと思います。

Onsen UI + Vueでニフクラmobile backendを使ってみました

Monacaで作成したOnsen UI + Vueプロジェクトからニフクラmobile backendのデータストア機能を使ってみました。

NCMBライブラリのインストールのしかたや注意点については、以下の記事で解説されています。

MonacaのVueプロジェクトでNCMBを利用する際の注意点

この記事に従い以下の２点を実施します。

webpack.config.js のJSON設定を削除
Vue向けのNCMB インストール

ちなみに、Vue向けのNCMBは v2.2.1 をベースにしているようですが、本家のNCMBは現時点で v3.0.2 になっています。Vue向けのNCMBの利用時は変更履歴を一読しておくといいと思います。

次に、ニフクラのドメイン変更に対応する必要があります。lib/ncmb.jsの２か所を書き換えます。

変更前

this.fqdn             = config.fqdn || "mb.api.cloud.nifty.com";
this.scriptFqdn       = config.scriptFqdn || "script.mb.api.cloud.nifty.com";

変更後

this.fqdn             = config.fqdn || "mbaas.api.nifcloud.com";
this.scriptFqdn       = config.scriptFqdn || "script.mbaas.api.nifcloud.com";

以上で、ニフクラmobile backendが利用可能になります。最後にデータストア機能を利用する場合の一例を示します。

const NCMB = require('ncmb')
const store = {
  param: {
    ncmb: null,
  },
  initBackend () {
    const applicationKey = "0123456789 ..."
    const clientKey = "0123456789 ..."
    this.param.ncmb = new NCMB(applicationKey, clientKey)
  },
  saveBackend () {
    if (!this.param.ncmb) {
      console.log("ニフクラ初期化エラー")
      return
    }
    var MdtRecords = this.param.ncmb.DataStore("MdtRecords")
    var mdtrecords = new MdtRecords()
    var dateObj = {
      y: this.param.recordData.date.y,
      m: this.param.recordData.date.m,
      d: this.param.recordData.date.d,
      w: this.param.recordData.date.w,
      t: this.param.recordData.total
    }
    mdtrecords.set("dateObj", dateObj)
      .save()
      .then(mdtrecords => {
        this.param.backendLoad = true
      })
      .catch(function(err) {
        console.log("保存に失敗しました。エラー: " + err)
      })
  },
  loadBackend (callback) {
    if (!this.param.ncmb) {
      console.log("ニフクラ初期化エラー")
      callback(null)
      return
    }
    var MdtRecords = this.param.ncmb.DataStore("MdtRecords")
    MdtRecords.order("createDate", true)
      .limit(10)
      .fetchAll()
      .then(results => {
        this.param.backendLoad = false
        this.param.backendData = results
        callback(results)
      })
      .catch(function(error) {
        callback(null)
      })
  },
}