ローカル開発を開始する
HubSpot CLI (コマンド ライン インターフェイス)は、ローカル環境をHubSpotに接続します。つまり、HubSpotのウェブアセットのローカルコピーを取得することになります。これにより、HubSpot CMSでの開発時に、バージョン管理、お気に入りのテキストエディター、さまざまなウェブ開発テクノロジーを利用できます。
このガイドは、CMSの使用経験があり、CLIの操作に関心をお持ちの方に適しています。HubSpotのCMS Hubの開発を始めて行う場合は、クイックスタートガイドの手順に従うことをお勧めします。
このチュートリアルでは、次のことを学びます。
- CLIをインストールしてHubSpotアカウントに接続する方法。
- HubSpotアカウントからモジュールを取得する方法。
- モジュールをローカルに更新し、変更をアップロードする方法。
watch
コマンドを使用して、保存した変更のアップロードを続行する方法。
コマンドとローカルファイル形式については、ローカル開発ツールのリファレンスを参照してください。
HubSpotでローカルに開発するには、次のことを行う必要があります。
- Node.js(ローカルツールを有効にするJavaScriptランタイム環境)をインストールします。バージョン16以上のNodeがサポートされていますが、LTS(長期サポート)バージョンが推奨されます。
- HubSpot CLIをグローバルにインストールするには、コマンドラインでnpm install -g @hubspot/cliを実行します。現在使用しているディレクトリーにのみツールをインストールする場合は、npm install @hubspot/cliを実行します。
必要に応じてYarnも使用できます。必須ではありませんがHomebrowがあれば、インストールを簡単に行えます。Yarnを使用する場合は、コマンドにyarnプレフィックスを付けて実行します。
インストール時にEACCESエラーが発生した場合
パッケージをグローバルにインストールする際のNPM Resolving EACCESアクセス許可エラーを参照してください。
以下の作業用のフォルダーを作成します。このチュートリアルでは、フォルダー名をlocal-dev-tutorial
とします。
これをローカルで行うには、コマンドラインでmkdir local-dev-tutorialを実行し、ディレクトリーを作成します。次に、cd local-dev-tutorialを実行して、作成したディレクトリーに移動します。
次に、hs init
を実行して、ツールをHubSpotアカウントに接続します。このコマンドは、以下の手順を案内します。
- CLIをHubSpotアカウントに接続するには、アカウントのパーソナル アクセス キーをコピーする必要があります。プロンプトが表示されたら、Enterを押してhubspot.comを開くと、アカウントのパーソナル アクセス キーのページに移動します。複数のHubSpotアカウントを持っている場合は、まずブラウザーでアカウントを選択するように指示されます。
- パーソナル アクセス キー ページでは、新しいパーソナル アクセス キーを生成したり、既存のキー値がすでに存在する場合は、既存のキー値をコピーしたりできます。
- 初めてキーを作成する場合は、キーがアクセスできるスコープを選択します。アカウントのデザインツールを操作するには、少なくとも「デザインマネージャー」権限を選択する必要があります。
- キーの権限を選択したら、[パーソナル アクセス キーを生成]をクリックします。
- キーが生成されたら、キーの下にある[表示]をクリックしてから[コピー]をクリックし、値をコピーします。
- キーをコマンドラインに貼り付け、Enterキーを押します。
- 次に、アカウントの名前を入力します。この名前は、コマンド実行時に自分だけに表示され使用するものです。例えば、開発者サンドボックスを使用する場合は「sandbox」と入力し、標準アカウントを使用する場合は「company.com」と入力することができます。この名前にはスペースを含めることができません。
- Enterを押します。
initフローが完了すると、設定ファイルhubspot.config.ymlが現在のディレクトリーに作成されたことを確認する成功メッセージが表示されます。
hubspot.config.ymlの例を次に示します。
名前 | Description |
---|---|
defaultPortal
任意
| CLIコマンドの実行時に既定でやり取りする対象のアカウント。 既定として設定されていない認証済みアカウントとやり取りするには、コマンドに |
name
任意
|
|
portalId
必須
| アカウントID。 |
defaultMode
任意
| アカウントにアップロードする際のコンテンツの既定の状態を設定します。 |
authType
必須
| アカウントの認証に使用される認証形式。 |
sandboxAccountType
任意
| アカウントがサンドボックスアカウントの場合、親の本番アカウントのIDが示されます。 |
parentAccountId
任意
| parentAccountId |
Hubspot.config.yml
ファイルは複数のアカウントをサポートします。さらに多くのアカウントを認証するには、hs auth
を実行してプロンプトに従います。
このチュートリアルでは、まずHubSpotで新しいアセットを作成し、CLIを使用してローカル環境に取得できるようにします。
- HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインマネージャー]の順に進みます。これによりデザインマネージャーが開き、CLIを使用してアップロードしたファイルにアクセスできます。このファイルとフォルダーのツリーは、デベロッパー ファイル システムとも呼ばれます。
- デザインマネージャーの左のサイドバーで、@hubspotフォルダーを選択し、テーマやモジュールなど、HubSpotの既定のアセットを表示します。
- 左側のサイドバーで、アイコンモジュールまでスクロールして右クリックし、[モジュールを複製]を選択します。モジュールはデベロッパー ファイル システムのルートに複製され、新しいモジュールのコピーが右側で開きます。
- 左側のサイドバーの上部にある[アクション]をクリックし、[パスをコピー]を選択します。これにより、デベロッパー ファイル システムのモジュールへの相対パスがコピーされます。これは、次のステップでモジュールをローカルに取得するために使用します。
モジュール複製したら、fetchコマンドを使用してローカル環境に取り込みます。
ターミナルで、hs fetch '/icon copy.module'
を実行します。
fields.json
:モジュールのさまざまなフィールドのコードが含まれています。この場合、アイコンフィールド、2つのアクセシビリティー オプション フィールド、およびスタイルフィールドのセットが含まれます。これらのフィールドは、HubSpotのモジュールエディターの右側のサイドバーに表示されます。meta.json
:ラベル、ID、使用できるテンプレートの種類など、モジュールの基本情報が含まれています。この情報は、モジュールエディターの右側のサイドバーに表示されます。module.css
:モジュールのCSSが含まれています。これは、HubSpotのモジュールエディターのCSSペインにも表示されます。module.html
:モジュールのHTMLが含まれています。これは、HubSpotのモジュールエディターのHubL + HTMLペインにも表示されます。module.js
:モジュールのJavaScriptが含まれています。これは、HubSpotのモジュールエディターのJSペインにも表示されます。
meta.json
ファイルを更新し、それをアカウントにアップロードして、HubSpotで変更を確認します。まず、モジュールに変更を加えます。
- お好みのコードエディターで、モジュールの
meta.json
ファイルを開きます。 label
フィールドを"Icon"
から"CMS tutorial module"
に更新します。そしてファイルを保存します。
hs upload
を実行する前に、コマンドとその引数について見てみましょう。このコマンドは2つの引数を取ります:hs upload <src> <dest>
src
:ローカル環境からアップロードするソースフォルダーの相対パス。dest
:HubSpot内の宛先ディレクトリーのパスで、デベロッパー ファイル システムのルートを起点としています。hs upload <src> /new-directory
などのディレクトリー名を指定することにより、アカウントに新しいディレクトリーを作成できます。- 以上を踏まえて、デベロッパー ファイル システムのルートにアップロードするため、次のコマンドを実行します。
- CLIでモジュールが正常にアップロードされたことが確認されたら、デザインマネージャーを更新してHubSpotで変更を表示します。これで、「ラベル」フィールドに新しい値が表示されます。
既にUpload
コマンドを使用してローカルファイルの1回限りのアップロードを実行したので、watch
コマンドを使用して保存された変更を継続的にアップロードします。このコマンドはupload
と同じ引数を使用するため、上記の<src>
と<dest>
と同じ引数を指定できます。
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のデザインマネージャーを更新して変更を表示します。右側のサイドバーの[テンプレートタイプ]セクションには[ページ]のみ表示されているはずです。
- watchを終了するには、
Control + C
を押します。watchコマンドが実行されているのと同じターミナルウィンドウで他のコマンドを実行することはできないことに注意してください。watchを実行している間に他のコマンドを実行するには、代わりに別のターミナルウィンドウを開き、そこでコマンドを実行する必要があります。
ここまででfetch
、upload
、watch
コマンドについて見てきました。CLIでさらにどんなことができるのか、CLIコマンドのリファレンスガイドをご覧ください。
また、次のチュートリアルもお勧めします。
貴重なご意見をありがとうございました。