maki-o memo

制作に関する私的なメモです

a-blog cmsで、Yes/Noチャートを簡単に実装できるツールを作成しました。

表題の通り、a-blog cmsでYes/Noチャートを簡単に実装できるツールを作成しました。
バージョン2.10.26以上で動作検証しています。
サンプルはこちらです。

使い方

Yes/Noチャートを簡単に表示するまでの手順を説明します。
まず、以下から拡張アプリをダウンロードしてください。
https://github.com/maki-t2nd/acms-ync-app

1. 拡張アプリをインストール

ダウンロードしたsrc以下のアプリ本体(src/extension/plugins/YesnoChart)とサンプルのテーマファイル(src/themes/yncSample@blog2019)を適宜サーバー内に配置し、
管理画面左下の「拡張アプリ」メニューからアプリをインストールします。
テーマは配置した「yncSample@blog2019」へ変更してください。



2. 任意のカテゴリを作成


次に、チャートコンテンツ登録用のカテゴリを作成します。
ひとつのカテゴリ毎に1チャート管理となります。
ここでは「sample」とします。

作成時に、カスタム設定に「Yes/Noチャート設定」という項目が増えていますので、こちらをチェックします。



3. コンテンツを登録する


最後に、作成したsampleカテゴリ内でエントリーを登録していきます。
ここでもYes/Noチャート用のフィールドが増えているので、こちらへ登録していきます。



タイトルには設問内容を入力してください。
タイプには、最初のページ or 結果ページの場合は該当の方にチェックを入れます。
内容にはhtmlを自由に入れられます。
設問のカスタムフィールドグループには、答えのラベルと次の設問(エントリー)を設定します。
次の設問は最初にエントリーを作る場合には存在しないので、ある程度エントリーを作成した後に設定します。



エントリーの設定が終われば、/sample/ へのアクセスでYes/Noチャートが作成されていると思います。


まとめ

以上の設定でYes/Noチャートの表示はできたと思います。
htmlやcss,jsの動きが変えたい方は、該当のファイルを適宜希望の動きに修正いただければと思います。
やり方がわからない・動きを変えたい・カテゴリ外に設置したい・複数設置したい、若しくはぜんぜん他の依頼をしたい という方はぜひ牧田にご依頼ください。


現場からは以上です。

※補足

バージョン2.10.8未満はverbatim校正オプションが存在しないのでエラーがでます。
/themes/yncSample@blog2019/include/ync_sample.html を以下のように書き換えてお試しください。

<div class="yesno-content" v-cloak>
  <transition>
    <div class="chart" :key="front.id">
      <h2 class="chart_title">[[ front.title ]]</h2>
      <div v-if="front.body" v-html="body"></div>
      <ul class="chart_answers" v-if="front.answers">
        <li v-for="answer in front.answers">
          <a href="#" class="acms-btn acms-btn-large acms-btn-primary" @click.prevent="doAnswer(answer.link)">[[ answer.label ]]</a>
        </li>
      </ul>
    </div>
  </transition>
</div>

<style>
  [v-cloak] {
    display: none;
  }
  .v-enter-active, .v-enter-to {
    transition: opacity .5s;
  }
  
  .v-enter, .v-leave-to, .v-leave {
    opacity: 0;
  }

  .chart {
    border: 4px solid #333;
    border-radius: 5px;
    padding: 1.5em;
  }

  .chart_answers {
    list-style: none;
    margin: 0 -1em;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }

  .chart_answers li {
    flex-grow: 1;
    padding: 0 1em;
  }

  .chart_answers a {
    width: 100%;
  }
  
</style>

<script src="/js/vue.js"></script>
<script>
$(function(){
  var vm = new Vue({
    'el': '.yesno-content',
    delimiters: ['[[', ']]'],
    data: {
      contents: {},
      front: {}
    },
    mounted: function(){
      var _this = this;
      $.getJSON('%{CATEGORY_URL}json/chart.json').done(function(json){
        _this.setFront(json);
      });
    },
    computed: {
      body: function() {
        return decodeURIComponent(this.front.body);
      }
    },
    methods: {
      setFront: function(json){
        this.contents = json;
        this.front = json.front;
      },
      doAnswer: function(id) {
        this.front = this.contents[id];
      }
    }
  });
});
</script>

プロフィール

フロントエンドエンジニア

Tomokazu Makita

名古屋でフリーランスでWeb制作してます。 フロントエンドのことを主にやってます。
a-blog cmsを使用したサイト制作が得意です。
お仕事のご相談随時受付中。

雪山大すき。冬は雪山の合間に仕事します。
財布はいつも吹雪です。

エントリーリスト

タグ