ローカル開発を開始する

Last updated:

HubSpot CLI (コマンド ライン インターフェイス)は、ローカル環境をHubSpotに接続します。つまり、HubSpotのウェブアセットのローカルコピーを取得することになります。これにより、HubSpot CMSでの開発時に、バージョン管理、お気に入りのテキストエディター、さまざまなウェブ開発テクノロジーを利用できます。 

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

Quick start to CMS Hub development

このチュートリアルでは、次のことを学びます。

  • CLIをインストールしてHubSpotアカウントに接続する方法。
  • HubSpotアカウントからモジュールを取得する方法。
  • モジュールをローカルに更新し、変更をアップロードする方法。
  • watchコマンドを使用して、保存した変更のアップロードを続行する方法。

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

依存関係のインストール

HubSpotでローカルに開発するには、次のことを行う必要があります。

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

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

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

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

以下の作業用のフォルダーを作成します。このチュートリアルでは、フォルダー名をlocal-dev-tutorialとします。

これをローカルで行うには、コマンドラインでmkdir local-dev-tutorialを実行し、ディレクトリーを作成します。次に、cd local-dev-tutorialを実行して、作成したディレクトリーに移動します。

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
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. HubSpotで取得するアセットを作成する

このチュートリアルでは、まずHubSpotで新しいアセットを作成し、CLIを使用してローカル環境に取得できるようにします。 

  • HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインマネージャー]の順に進みます。これによりデザインマネージャーが開き、CLIを使用してアップロードしたファイルにアクセスできます。このファイルとフォルダーのツリーは、デベロッパー ファイル システムとも呼ばれます。
  • デザインマネージャーの左のサイドバーで、@hubspotフォルダーを選択し、テーマやモジュールなど、HubSpotの既定のアセットを表示します。
    デザインマネージャーのhubspotフォルダー
  • 左側のサイドバーで、アイコンモジュールまでスクロールして右クリックし、[モジュールを複製]を選択します。モジュールはデベロッパー ファイル システムのルートに複製され、新しいモジュールのコピーが右側で開きます。
    default-icon-module-cloned
  • 左側のサイドバーの上部にある[アクション]をクリックし、[パスをコピー]を選択します。これにより、デベロッパー ファイル システムのモジュールへの相対パスがコピーされます。これは、次のステップでモジュールをローカルに取得するために使用します。 
    module-actions-copy-path

4. モジュールをローカル環境に取得する

モジュール複製したら、fetchコマンドを使用してローカル環境に取り込みます。

ターミナルで、hs fetch '/icon copy.module'を実行します。

hs fetch '/icon copy.module'
モジュールは、5つのファイルを含むディレクトリーとしてダウンロードされます。
  • fields.json:モジュールのさまざまなフィールドのコードが含まれています。この場合、アイコンフィールド、2つのアクセシビリティー オプション フィールド、およびスタイルフィールドのセットが含まれます。これらのフィールドは、HubSpotのモジュールエディターの右側のサイドバーに表示されます。
  • meta.json:ラベル、ID、使用できるテンプレートの種類など、モジュールの基本情報が含まれています。この情報は、モジュールエディターの右側のサイドバーに表示されます。
  • module.css:モジュールのCSSが含まれています。これは、HubSpotのモジュールエディターのCSSペインにも表示されます。 
  • module.html:モジュールのHTMLが含まれています。これは、HubSpotのモジュールエディターのHubL + HTMLペインにも表示されます。
  • module.js:モジュールのJavaScriptが含まれています。これは、HubSpotのモジュールエディターのJSペインにも表示されます。
    module-directory-local
次に、モジュールのmeta.jsonファイルを更新し、それをアカウントにアップロードして、HubSpotで変更を確認します。

5. 変更を加えてアップロードする

まず、モジュールに変更を加えます。

  • お好みのコードエディターで、モジュールのmeta.jsonファイルを開きます。
    module-meta-json-file-open
  • labelフィールドを"Icon"から"CMS tutorial module"に更新します。そしてファイルを保存します。
    module-meta-json-file-label-updated
次のコマンドhs uploadを実行する前に、コマンドとその引数について見てみましょう。このコマンドは2つの引数を取ります:hs upload <src> <dest>
  • src:ローカル環境からアップロードするソースフォルダーの相対パス。
  • dest:HubSpot内の宛先ディレクトリーのパスで、デベロッパー ファイル システムのルートを起点としています。hs upload <src> /new-directoryなどのディレクトリー名を指定することにより、アカウントに新しいディレクトリーを作成できます。
  • 以上を踏まえて、デベロッパー ファイル システムのルートにアップロードするため、次のコマンドを実行します。
hs upload 'icon copy.module' 'icon copy.module'
  • CLIでモジュールが正常にアップロードされたことが確認されたら、デザインマネージャーを更新してHubSpotで変更を表示します。これで、「ラベル」フィールドに新しい値が表示されます。
module-label-updated

6. watchを実行して変更を自動的にアップロードする

既にUploadコマンドを使用してローカルファイルの1回限りのアップロードを実行したので、watchコマンドを使用して保存された変更を継続的にアップロードします。このコマンドはuploadと同じ引数を使用するため、上記の<src><dest>と同じ引数を指定できます。

  • hs watch 'icon copy.module' 'icon copy.module'を実行します
hs watch 'icon copy.module' 'icon copy.module'

watchを実行すると、保存された変更は自動的にHubSpotアカウントにアップロードされます。デモとして、ローカルでモジュールに次の変更を加えます。

  • meta.jsonファイルで、host_template_typesを更新し、"BLOG_LISTING""BLOG_POST"を削除することによって、モジュールが次のページでのみ使用できるようになります。

    "host_template_types":["PAGE"]
  • ファイルを保存します。これにより、CLIで自動的にファイルがHubSpotにアップロードされます。
  • ファイルがアップロードされたら、HubSpotのデザインマネージャーを更新して変更を表示します。右側のサイドバーの[テンプレートタイプ]セクションには[ページ]のみ表示されているはずです。
module-editor-template-type
  • watchを終了するには、Control + Cを押します。watchコマンドが実行されているのと同じターミナルウィンドウで他のコマンドを実行することはできないことに注意してください。watchを実行している間に他のコマンドを実行するには、代わりに別のターミナルウィンドウを開き、そこでコマンドを実行する必要があります。

次のステップ

ここまででfetchuploadwatchコマンドについて見てきました。CLIでさらにどんなことができるのか、CLIコマンドのリファレンスガイドをご覧ください。

また、次のチュートリアルもお勧めします。


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