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

**URL:** <https://community.hubspot.com/t/json/66572>\
**Category:** Tips, Tricks & Best Practices\
**Created:** [October 6, 2022, 5:58am UTC](https://community.hubspot.com/t/json/66572 "2022-10-06T05:58:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![TakuyaAimi](https://avatars.discourse-cdn.com/v4/letter/t/9d8465/32.png) [@TakuyaAimi](https://community.hubspot.com/u/TakuyaAimi)\
**Post date:** [October 6, 2022, 5:58am UTC](https://community.hubspot.com/t/json/66572/1 "2022-10-06T05:58:07Z")

</div>

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

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

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

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

---

<div class="post-metadata">

**Author:** ![natsumimori](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/natsumimori/32/39807_2.png) [@natsumimori](https://community.hubspot.com/u/natsumimori)\
**Post date:** [October 7, 2022, 1:56am UTC](https://community.hubspot.com/t/json/66572/2 "2022-10-07T01:56:09Z")

</div>

@assi @Makoto

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

---

<div class="post-metadata">

**Author:** ![kaoki](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kaoki/32/6438_2.png) [@kaoki](https://community.hubspot.com/u/kaoki)\
**Post date:** [October 7, 2022, 5:16am UTC](https://community.hubspot.com/t/json/66572/3 "2022-10-07T05:16:37Z")

</div>

@TakuyaAimi

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

- デザインマネージャーで管理可能な形で外部ファイル化し、
- [tojson関数](https://developers.hubspot.jp/docs/cms/hubl/filters#tojson)でjsonに変換。
- scriptタグで読み込む。

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

```lia-code-sample
<script type="application/json"
 {{ module|tojson }}
</script>

```

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![TakuyaAimi](https://avatars.discourse-cdn.com/v4/letter/t/9d8465/32.png) [@TakuyaAimi](https://community.hubspot.com/u/TakuyaAimi)\
**Post date:** [October 7, 2022, 8:45am UTC](https://community.hubspot.com/t/json/66572/4 "2022-10-07T08:45:10Z")

</div>

@kaoki

ありがとうございます。

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

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

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

---

<div class="post-metadata">

**Author:** ![assi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/assi/32/25699_2.png) [@assi](https://community.hubspot.com/u/assi)\
**Post date:** [October 7, 2022, 5:59am UTC](https://community.hubspot.com/t/json/66572/5 "2022-10-07T05:59:24Z")

</div>

@TakuyaAimi

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

**HubLで利用したい場合**

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

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

```

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

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

```

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

ご参考：[HubL variables & macros syntax - HubSpot docs](https://developers.hubspot.com/docs/cms/hubl/variables-macros-syntax#import)

**JavaScriptで利用したい場合**

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

また実際にJSONとして利用する際は、HubLのフィルタの [tojson](https://developers.hubspot.com/docs/cms/hubl/filters#tojson) を利用する必要があります。

```lia-code-sample
{% import '/data.html' %}

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

```

---

<div class="post-metadata">

**Author:** ![TakuyaAimi](https://avatars.discourse-cdn.com/v4/letter/t/9d8465/32.png) [@TakuyaAimi](https://community.hubspot.com/u/TakuyaAimi)\
**Post date:** [October 7, 2022, 8:46am UTC](https://community.hubspot.com/t/json/66572/6 "2022-10-07T08:46:45Z")

</div>

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

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

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

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