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 コンポーネントで動作するアコーディオン機能を自作してみました。

以下のサンプルは2つの 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を利用する際の注意点

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

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

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

変更前

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)
      })
  },
}

Meditation Note v2.0.0 アップデート

瞑想サポートアプリ Meditation Note のアップデートを行いました。

V2.0.0 アップデート内容

  • グラフ画面を改良しました。
  • メモ、コメント入力、日付形式設定を削除しました。
  • アプリ外観のブラッシュアップを行いました。

他に背景画像の軽量化や最新の記録の表示なども行いました。今回のアップデートでは既存の機能や外観を見直し、よりシンプルな操作性を目指しました。

また、本アプリでは瞑想の継続や習慣化をサポートするしくみとしてニフクラ mobile backend を利用して瞑想記録の共有を行っているのですが、2019年10月 1日からニフクラのドメインが変更になったため、これに対応しました(これがアップデートのほんとうの理由だったり)。

よろしければご利用ください。

Google Play で手に入れよう