デザインマネージャーとJsonファイル

[TakuyaAimi]

デザインマネージャーにJsonファイルを管理して、それを変数として読み込むことができますか？

{% set json = [
  {
    "name": "ページ1"
  },
  {
    "name": "ページ2"
  }
] %}

 このJson部分を別ファイルで管理して読み込む方法がないか思案しております。

よろしくお願いいたします。

[kaoki · Accepted solution]

@TakuyaAimi 

デザインマネージャーで、直接jsonファイルを管理は難しいかもしれません。

• デザインマネージャーで管理可能な形で外部ファイル化し、
• tojson関数でjsonに変換。
• scriptタグで読み込む。

という方法は使えないでしょうか。

<script type="application/json"
  {{ module|tojson }}
</script>

 よろしくお願いします。

[assi · Accepted solution]

@TakuyaAimi  

できますね！このJSONデータをHubLで利用したい場合と、JavaScriptで利用したい場合とで方法が少し異なります。

HubLで利用したい場合

JSONが記載されたファイルを、パーシャルテンプレートとして.htmlの拡張子で保存します。仮にdata.htmlとします。

<!--
    templateType: page
    isAvailableForNewContent: false
-->
{% set json = [
  {
    "name": "ページ1"
  },
  {
    "name": "ページ2"
  }
] %}

他のテンプレートのHubLでこれを利用したい場合は、このファイルをimportします。それだけで、下記のようにjson変数にアクセスできるようになります。

{% import '/data.html' %}
{{ json }} {# jsonの中身が表示されます #}

 なおdata.htmlの中身をimport時に1つの名前空間に閉じ込めたい場合は、as句を利用します。

ご参考：https://developers.hubspot.com/docs/cms/hubl/variables-macros-syntax#import

JavaScriptで利用したい場合

データをパーシャルテンプレートとして.htmlの拡張子で保存するのは変わりませんが、JavaScript側でHubLを書く形になります。

また実際にJSONとして利用する際は、HubLのフィルタの tojson を利用する必要があります。

{% import '/data.html' %}

const json = {{ json|tojson }};
console.log(json) // JavaScript変数のjsonの中身が表示される

[TakuyaAimi]

HTMLとJavaScriptの例をだしていただきありがとうございます。

定義だけパーシャルで切り出すことで実現しているのですね。

1箇所で管理してHTMLでもJavaScriptでも使い回すことがしたかったので、どちらの例も大変参考になりました。

ありがとうございました。

[kaoki · Accepted solution]

@TakuyaAimi 

デザインマネージャーで、直接jsonファイルを管理は難しいかもしれません。

• デザインマネージャーで管理可能な形で外部ファイル化し、
• tojson関数でjsonに変換。
• scriptタグで読み込む。

という方法は使えないでしょうか。

<script type="application/json"
  {{ module|tojson }}
</script>

 よろしくお願いします。

[TakuyaAimi]

@kaoki 

ありがとうございます。

jsonファイルがアップロードできたので、もしやと思ったのですが、できないのですね。

こうやってモジュールとして使うのですね。

参考になりました。ありがとうございます。

[natsumimori]

@assi @Makoto 

半田さん、篠原さん、何かアドバイスできることありますか？🤔