ローカル開発を開始する

Last updated:

HubSpot CLI(コマンド ライン インターフェイス)では、ローカルワークフローをHubSpotに接続し、CMS Hubでの開発時に、バージョン管理機能や使い慣れたテキストエディターなどのさまざまなウェブ開発テクノロジーを利用することが可能になります。

このガイドは、CMSの使用経験があり、CLIの操作に関心をお持ちの方に適しています。HubSpotのCMS Hubの開発を始めて行う場合は、クイックスタートガイドの手順に従うことをお勧めします。

Quick start to CMS Hub development

HubSpot CLIは、デベロッパー ファイル システムからのファイルのupload(アップロード)、fetch(フェッチ)、watch(監視)に使用します。CLIを使用した構築では、アセットのローカルコピーが作成されます。コードがローカル環境にあるため、使い慣れたコードエディターやビルドツールを使用したり、コードをgitリポジトリーにコミットしたりできます。

CLIには開発のスピードアップに役立つ補助機能も用意されています。例えばhs createコマンドでは、ボイラープレートを使用して、モジュールからテーマに至るまでさまざまなタイプのアセットをローカル環境で素早く作成できます。

このガイドでは、CLIのインストールと、CLIの主要機能である、HubSpotアカウントからのプロジェクトの取得とデザインツールへの変更のアップロードについて順に説明します。

コマンドとローカルファイル形式については、ローカル開発ツールのリファレンスを参照してください。

依存関係のインストール

ローカルツールを使用するには、以下の手順に従う必要があります。

  1. Node.js(ローカルツールを有効にするJavaScriptランタイム環境)をインストールします。バージョン16以上のNodeがサポートされていますが、LTS(長期サポート)バージョンが推奨されます。
  2. HubSpotツールをグローバルにインストールする場合は、コマンドラインでnpm install -g @hubspot/cliを実行します。現在のディレクトリーにツールをインストールする場合は、npm install @hubspot/cliを実行します。

必要に応じてYarnも使用できます。必須ではありませんがHomebrowがあれば、インストールを簡単に行えます。Yarnを使用する場合は、コマンドにyarnプレフィックスを付けて実行します。

インストール時にEACCESエラーが発生した場合
パッケージをグローバルにインストールする際のNPM Resolving EACCESアクセス許可エラーを参照してください。

1. 作業ディレクトリーを作成する

ローカルプロジェクトのフォルダーを作成します。例えば、コマンドラインでmkdir local-cms-devを実行すると、このディレクトリーが作成されます。次に、cd local-cms-devを実行して、作成したディレクトリーに移動します。

2. ローカル開発ツールを設定する

次に、hs initを実行して、ツールをHubSpotアカウントに接続します。このコマンドは、以下の手順を案内します。

  • CLIをHubSpotアカウントに接続するには、アカウントのパーソナル アクセス キーをコピーする必要があります。プロンプトが表示されたら、Enterを押してhubspot.comを開くと、アカウントのパーソナル アクセス キーのページに移動します。複数のHubSpotアカウントを持っている場合は、まずブラウザーでアカウントを選択するように指示されます。
  • パーソナル アクセス キー ページでは、新しいパーソナル アクセス キーを生成したり、既存のキー値がすでに存在する場合は、既存のキー値をコピーしたりできます。
    • 初めてキーを作成する場合は、キーがアクセスできるスコープを選択します。アカウントのデザインツールを操作するには、少なくとも「デザインマネージャー」権限を選択する必要があります。 
    • キーの権限を選択したら、[パーソナル アクセス キーを生成]をクリックします。
  • キーが生成されたら、キーの下にある[表示]をクリックしてから[コピー]をクリックし、値をコピーします。
  • キーをコマンドラインに貼り付け、Enterキーを押します。
  • 次に、アカウントの名前を入力します。この名前は、コマンド実行時に自分だけに表示され使用するものです。例えば、開発者サンドボックスを使用する場合は「sandbox」と入力し、標準アカウントを使用する場合は「company.com」と入力することができます。この名前にはスペースを含めることができません。 
  • Enterを押します。 

initフローが完了すると、設定ファイルhubspot.config.ymlが現在のディレクトリーに作成されたことを確認する成功メッセージが表示されます。

hubspot.config.ymlの例を次に示します。

defaultPortal: mainProd portals: - name: mainProd portalId: 123456 defaultMode: publish authType: personalaccesskey auth: tokenInfo: accessToken: >- {accessTokenValue} expiresAt: '2023-06-27T19:45:58.557Z' personalAccessKey: >- {personalAccessKeyValue} sandboxAccountType: null parentAccountId: null - name: mainSandbox portalId: 18569211 authType: personalaccesskey auth: tokenInfo: accessToken: >- {accessTokenValue} expiresAt: '2023-06-27T19:47:32.583Z' personalAccessKey: >- {personalAccessKeyValue} sandboxAccountType: STANDARD parentAccountId: 123456
Use this table to describe parameters / fields
名前Description
defaultPortal
任意

CLIコマンドの実行時に既定でやり取りする対象のアカウント。

既定として設定されていない認証済みアカウントとやり取りするには、コマンドに--account=フラグを追加し、その後にアカウント名またはIDを続けます。例えば、--account=12345または--account=mainProdとします。

name
任意

portalsセクションに、接続されている各アカウントのエントリーが表示されます。nameは、そのアカウントに指定されている名前を示します。新しい既定のアカウントを設定する際や、--accountフラグでアカウントを指定する際は、この名前を使用できます。

portalId
必須

アカウントID。

defaultMode
任意

アカウントにアップロードする際のコンテンツの既定の状態を設定します。draftまたはpublishのいずれかです。

authType
必須

アカウントの認証に使用される認証形式。 

sandboxAccountType
任意

アカウントがサンドボックスアカウントの場合、親の本番アカウントのIDが示されます。

parentAccountId
任意

parentAccountId

Hubspot.config.ymlファイルは複数のアカウントをサポートします。さらに多くのアカウントを認証するには、hs authを実行してプロンプトに従います。

3. アカウントからプロジェクトを取得する

fetchコマンドを使用してhs fetch --account=<name> <src> <dest>を実行し、プロジェクトフォルダーのツリーおよびファイル全体をHubSpotアカウントから取得してローカル環境に取り込みます。srcは、HubSpotデザインツールのプロジェクトパスです。destは、ファイルを配置するローカルディレクトリーのパス(現在の作業ディレクトリーを起点とする相対パス)です。現在の作業ディレクトリーにプロジェクトを取り込む場合は、<dest>引数を省略できます。

HubSpotアカウントからプロジェクトを取得する例を以下に示します。

hs fetch cms-project

これは、ローカル環境に取得したデザインツールのプロジェクトです。

ローカルとデザインマネージャーのプロジェクト

4. 変更を加えて、HubSpotアカウントにアップロードする

uploadコマンドを使用してhs upload --account=<name> <src> <dest>を実行し、ローカル環境のプロジェクトをHubSpotアカウントにアップロードします。これにより、<src>の内容がコピーされ、<dest>のHubSpotアカウントにアップロードされます。デザインツールで新しいプロジェクトを作成する場合は、<dest>をHubSpot内の新しいフォルダーとして指定できます。

サンプルプロジェクトをHubSpotアカウントにアップロードする例を以下に示します。

hs upload cms-project cms-project

5. ローカルプロジェクトを監視し、変更内容を自動アップロードする

hs watch --account=<name> <src> <dest>を実行することにより、ローカルディレクトリーを監視し、ファイルの保存時に変更内容をHubSpotアカウントに自動的にアップロードします。

watchコマンドを使用してこの処理を実行する例を以下に示します。

hs watch cms-project cms-project

HubSpot CLIに関する包括的な説明は、リファレンスドキュメントを参照してください。 

関連するチュートリアルとコンテンツ


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。