【HubSpot】意外と簡単 ! VSCode で HubSpot CLI を使ってみよう 🚀

HubSpot のページデザインでは、「デザインマネージャー」を使って編集していくことが多いかなと思います。けど、「デザインマネージャー」は手軽な一方 普段エディターを使う勢からしたら、

• 複数ファイルの編集がしづらい

• コード補完や整形が弱くてストレス

といったちょいモヤ😖なことがあるかもしれません。

そこでおすすめなのが、VSCode × HubSpot CLI のローカル開発環境です！
ローカルで編集したファイルをそのままアップロードしたり、リアルタイムにテーマを更新したり…とにかく効率アップ＆快適！✨

この記事では、VSCodeを使って
👉 HubSpotのテーマをローカルで編集し
👉 CLIコマンドでアップロードして反映させる
初心者さん向けの基本ステップを、デモつきで紹介していきます～

💡 HubSpot CLI とは？

HubSpot CLI（Command Line Interface） は、HubSpotのCMS開発をローカル環境で行えるようにするためのツールです。
テーマやテンプレート、カスタムモジュールなどをコマンドで操作できるようになり、デザインマネージャーの画面だけに頼らず開発ができるようになります。

たとえばこんなことができるよ👇

• HubSpotにあるテーマファイルをローカルにダウンロード（hs fetch）

• ローカルで編集した内容をアップロード（hs upload）

• ファイルをリアルタイムで同期（hs watch）

• サーバーレス関数の管理やログの確認

💡普段 WordPress なんかでサイト制作されている方だと、FTP に近いもの（イコールではないけど）と思うと、少しイメージわくかもです

⌨️ VSCodeでHubSpot CLIを操作するメリット

HubSpot CLIはターミナルから操作するツールだけど、VSCode で使える公式の拡張機能がほんと便利 なのでこれを使っていくことを全力でおすすめします！🔥

💻 HubSpot CLI ✖ VSCode を体験しよう

✅ 事前準備

操作する端末に、操作に必要なものをインストールします：

• HubSpot のアカウント（CMS Hub / Content Hub が使えるもの）
• Node.js
• VSCode

VSCode までインストールが完了したら、VSCode の拡張機能に［HubSpot］をインストールします。
※ サイドバーに HubSpot のスプロケットアイコンが表示されたらOK👌

🔧 HubSpot CLIをインストール＆認証する

① HubSpot CLI をインストール

まずは HubSpot CLI をインストールします。
コマンドプロンプト or VSCode でターミナルを開き インストールコマンドを実行します。

• グローバルにインストールする場合 ：npm install -g @hubspot/cli
• 特定のディレクトリ（フォルダ）にインストールする場合：(インストールするディレクトリに移動した上で、) npm install @hubspot/cli

📍このあたりはお好みで大丈夫ですが、個人的にはフォルダを一個作って その中にインストールする方が後々迷子にならないかなと思います

※ VSCode でターミナルを開く方法👇

📍グローバルインストール時にEACCESエラーが発生した場合：👇のドキュメントを参考にすると良い（って公式ドキュメントが言ってました）

② アカウント認証を行う

CLI で使う HubSpot のアカウントを認証するには、ターミナルで hs init を実行することも可能ですが、VSCode 拡張機能経由で行うこともできます。

拡張機能の画面を開いて ［Authenticate HubSpot Account］をクリック

ブラウザを開く旨のポップアップが表示されるので、OKとして HubSpot のパーソルアクセスキー（認証に用いられる情報🔑）が保管されているページに移動します。
ここでは、［Visual Studio Code を開く］のポップアップが表示されるので ［Visual Studio Code を開く］をクリックして、VSCode に戻ります。

VSCode 上に認証したアカウント名が表示されていれば、完了です💯

📁 ファイルをアップロードしてみよう

ローカル（自分のパソコンのフォルダの中にあるもの という意味）で用意したファイルを HubSpot CLI 経由でデザインマネージャーにアップロードしてみましょう🔼

今回は試しに👇の画像をデザインマネージャー上にアップロードしてみます

1) VSCode でターミナルを立ち上げる

VSCode でターミナルを立ち上げて、作業ディレクトリに移動します。

＊私は /HubSpot_local  というフォルダ内で HubSpot CLI をインストールしているので、ここに移動＆画像を用意しています

2) ファイルをアップロードする

hs upload コマンドを使って、画像をデザインマネージャー側にアップロードします。

hs upload コマンドは、hs upload <src> <dest> という形で ファイルのアップロード元 と アップロード先 のパス（位置）を指定して実行します。

＊ src = source , dest = destination という意味

今回は作業ディレクトリ内にある画像ファイルを テーマフォルダ > images フォルダの中に"CLI_upload_test.png" としてアップロードするので、👇のような形で実行します。

📍 この時、アップロード後のファイル名も指定してあげないとエラーになってしまうようです。

［SUCESS］のレスポンスが返ってきたら、成功です! 

3) アップロードされたファイルを デザインマネージャー上で確認する

デザインマネージャーの画面をリロードして、アップロードしたファイルがあるか確認してみます🔍

（発見！無事アップロードされてましたね👏）

🎨 既存のテーマを編集してみよう

次は、デザインマネージャー側に既にあるテーマをいじってみましょう。

1) デザインマネージャーのファイルをローカルにコピーする

HubSpot CLI で閲覧しているファイルを編集するには、一度ローカル側にファイルをコピーしてあげる必要があります。

＊例えば、theme.json のファイルを開いてみると ［READONLY］と書かれていますね👀

デザインマネージャー上にあるファイルをローカルにコピーするには、hs fetch コマンドを使います。

今回はテーマフォルダの中のファイルを編集したいので、hs fetch <テーマフォルダ名> の形で実行します。

ローカルにある 作業ディレクトリをみて、テーマフォルダがコピーされていたら完了です。

2) 変更の同期を有効する

先ほどと同じようにローカル側で編集 → hs upload でアップロード ということもできますが、今回は ローカル側の変更がすぐに同期される hs watch コマンドを使ってみます。

＊書き方は hs upload と似てて、私は作業ディレクトリ内にある "MeowBitdev" フォルダ を、デザインマネージャー上にある "MeowBitdev" フォルダ に同期したいので、こんな感じ👇

3) ファイルを編集して、同期されたかチェックする

hs fetchでコピーされたフォルダ（ローカル側のフォルダ）を開いて、試しに theme.json の author とサムネイル画像でも変えてみます（ボイラープレートを使ってるので、デフォルトののままでした）

変更してファイルを保存したら、ファイルをアップロードした旨のメッセージがターミナルに表示されます。（これが出てたら、hs watchが効いてる証拠✨）

HubSpot のテーマ一覧画面をみると、テーマのサムネイル画像が変更されていることが確認できます🐈

📌 よく使うCLIコマンドまとめ

🚀 まとめ

今回は、VSCodeとHubSpot CLIを使って、テーマファイルをローカルで編集 → アップロードする流れを紹介してみました🐾

「CLIってちょっとむずかしそう…」って思ってた人も、
この記事の流れで「あれ、意外といけるかも？」って思えたら嬉しいです🍀

HubSpot の VSCode 拡張機能は、殺風景なターミナル画面よりも直感的に HubSpot CLI を操作できるようになるので、ぜひ取り入れてみてください～

HubSpot CLI にトライしてみたら 気になるところをちょっとずつ触ってみたり、
カスタムモジュールを作ってみたり、サーバーレス関数にチャレンジしてみたり…
自分のペースで CMS 開発楽しんでみてくださいね⚙️💟

⭐ おすすめリソース

公式ドキュメントはお友達🙌

• ローカル開発を開始する
• Install and use the HubSpot Visual Studio Code extension
• HubSpot CLI commands (v7)

また、👇のサイトでは HubSpot CLI でテーマ作成を行うチュートリアルもあったので、こちらもおすすめです