モジュールを使い始める

このチュートリアルでは、HubSpot CMSボイラープレートテーマを使用してモジュールを作成し、このモジュールをテーマの一部としてテンプレートやページで使用する方法を説明します。このチュートリアルに従って作業を進めると、画像フィールド、テキストフィールド、リッチ テキスト フィールドを含むTestimonial（お客さまからの評価）モジュールが完成します。 

今すぐ始めるには、完成したプロジェクトファイル（英語）をプレビューできます。ボイラープレートテーマのコードは時間の経過とともに変化する可能性があるため、チュートリアル中に開発者が作成または編集する必要がある特に重要なファイルのみが含まれています。以下のようなファイルです。

1. Testimonial.module：チュートリアルで作成されるカスタムモジュールを構成するファイルを含むフォルダー。
2. homepage.html：編集してカスタムモジュールを含めるテンプレート。
3. images：Testimonialモジュールに使用するプロフィール写真が入ったフォルダー。 

このチュートリアルを開始する前に、次の作業を行ってください。

• CMS Hub開発者用サンドボックス（英語）をセットアップします。既存のアカウントを使用することもできますが、サンドボックスを使用すると、メインアカウントのアセットに影響を与えることなく開発できます。
• HubSpotのローカル開発ツールの利用に必要なNode.js（英語）をインストールします。バージョン10以降がサポートされています。

このチュートリアルでは、ローカル環境でモジュールを開発します。コマンド ライン インターフェイスからHubSpotを利用するには、HubSpot CLIをインストールし、アカウントへのアクセスを設定する必要があります。

• HubSpotツールをグローバルにインストールするには、ターミナルでnpm install -g @hubspot/cliを実行します。CLIを現在のディレクトリーにのみインストールする場合は、npm install @hubspot/cliを実行します。
• テーマファイルを保存するディレクトリーで、hs initを実行します。
• Enterキーを押して、ブラウザーでパーソナル アクセス キーのページを開きます。
• デプロイ先にするアカウントを選択してから、［このアカウントで続行］をクリックします。アカウントのパーソナル アクセス キーのページにリダイレクトされます。
• 「パーソナル アクセス キー」の横にある［表示］をクリックしてキーを表示します。次に［コピー］をクリックして、キーをクリップボードにコピーします。
• コピーしたキーをターミナルに貼り付け、Enterキーを押します。
• 他と重複しないアカウント名を入力します。この名前は自分の区別用で、コマンドを実行する際にも使用します。次にEnterキーを押して、ローカル開発ツールをアカウントに接続します。

hubspot.config.ymlファイルが作成されたことの確認として、成功メッセージが表示されます。

• ターミナルで、hs create website-theme my-themeを実行します。これにより、ボイラープレートアセットを格納するテーマフォルダーが作業ディレクトリー内に作成されます。
• hs upload <src> <destination>を実行して、ファイルをアカウントにアップロードします。 
  • <src>は、現在の作業ディレクトリーを基準としたローカルファイルの相対パスです。
  • <destination>は、HubSpotアカウント内の宛先にするパスです。アップロード先は新しいフォルダーにすることができます。
  • 例えば、hs upload my-theme my-new-themeを実行すると、コンピューター内のmy-themeフォルダーがHubSpot内のmy-new-themeフォルダーにアップロードされます。

• いつでもhs uploadを実行することで、保存した変更内容を手動でHubSpotにアップロードできます。また、hs watch <src> <destination>を実行しておき、ローカル環境で保存されると、その変更内容を自動的にアップロードすることもできます。watchコマンドの実行を停止するには、Control-C を押します。

• HubSpotアカウントにログインし、［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］の順に進んでデザインマネージャーを開きます。
• デザインマネージャーの左のサイドバーで、アップロードしたテーマフォルダーを開きます。 
• テーマフォルダー内にあるモジュールフォルダーを開きます。
• このフォルダー内に新しいモジュールを作成するために、画面左上の［ファイル］＞［新規ファイル］をクリックします。
• ダイアログボックスで、ドロップダウンメニューをクリックし、［モジュール］を選択してから［次へ］をクリックします。
  
• ［ページ］チェックボックスをオンにして、モジュールをウェブサイトとランディングページで使用できるようにします。
• モジュールのファイル名を入力し、［作成］をクリックします。

次は、以下の3つのフィールドをモジュールに追加します。

• 評価コメントを寄せてくれた顧客の名前を保存するテキストフィールド。
• 顧客のプロフィール写真を保存する画像フィールド。
• 顧客からの評価コメントを保存するリッチ テキスト フィールド。

これらのフィールドを追加するには、次の手順に従います。

• 右側のサイドバーで、［フィールドの追加］ドロップダウンメニューをクリックし、［テキスト］を選択します。
  
• 右上の鉛筆アイコンの横にあるテキストフィールドに、「Customer Name」（顧客名）と入力します。これにより、HubL変数名が「customer_name」に変わります。
• ［既定のテキスト］を「Sally」にします。

• 右側のサイドバーの階層リンクアイコンをクリックして、メインモジュールのメニューに戻ります。
• 同じ方法で他のフィールドを追加します。今回は、［画像］フィールドタイプを選択します。
• 画像フィールドに「Profile Picture」（プロフィール写真）というラベルを付け、［HubL変数名］を「profile_pic」にします。
• ［既定の画像］では、完成したプロジェクトファイル（英語）のimagesフォルダー内にあるSallyのプロフィール写真を選択します。
• ［代替テキスト］を「Customer Profile Picture」（顧客のプロフィール写真）にします。

• 同じ方法で他のフィールドを追加します。今回は、［リッチテキスト］フィールドタイプを選択します。
• リッチ テキスト フィールドに「Testimonial」（お客さまからの評価）というラベルを付けます。
• ［既定のリッチテキスト］ボックスをクリックし、「I've had nothing but wonderful experiences with this company.」（本当に素晴らしいサービスでした）と入力します。

モジュールの複数のフィールドにデータを追加しました。こうしたフィールドにあるデータは、まだモジュール自体に表示されません。フィールドがまだ、モジュールのHTMLに追加されていないためです。この状態はmodule.htmlフィールドに反映されていて、現時点で空になっています。 

モジュールにHubLを追加するには、以下のコードをコピーし、module.htmlファイルに貼り付けます。

上記のコードでは、ドット表記を使用して各種フィールドデータにアクセスしています。

• module変数はモジュール自体を表します。一方、customer_nameフィールドは、前の手順でテキストフィールドに割り当てた変数名を表します。これを連結したmodule.customer_nameによって、モジュール内の顧客名テキストを参照します。
• module.profile_pic.srcの値では、モジュールのprofile_picフィールドにアクセスし、画像URLを表すsrc値を参照します。ただし、HubL変数に画像URLを格納したとしても、この変数を画像HTMLタグ内に配置しなければ、画像はページ上でレンダリングされません。

HubLをモジュールに追加した後、画面右上の［プレビュー］をクリックすることで、現時点でのモジュールの外観を確認できます。

最後に、デザインマネージャーの右上にある［変更を公開］をクリックします。

モジュールを作成したので、次は、このモジュールをローカル環境に取り込んで、テーマフォルダーにコピーします。ローカル環境でゼロからモジュールを作成することもできますが、このチュートリアルでは、ローカル環境以外にHubSpot上での作業方法も紹介しています。 

モジュールをローカル環境に取り込むには、次の手順に従います。

• ターミナルで、コマンドhs fetch <hs_src> <destination>を実行します。
  • <hs_src>は、HubSpot内でのモジュールのファイルパスです。ファイルパスを取得するには、デザインマネージャーの左のサイドバーでモジュールを右クリックし、［パスをコピー］を選択します。 
    
  • <destination>は、テーマが置かれているローカルディレクトリーのパスです。これを省略した場合は既定で、コマンドによって現在の作業ディレクトリーが使用されます。

このチュートリアルでは、ステップ1で作成した「my-theme」ディレクトリー内の「src/modules」フォルダーにモジュールを取り込んでください。fetchコマンドの詳細をご確認ください。

使い慣れたコードエディター上で、HubSpotアカウントから取り込んだモジュールのフォルダーに進みます。モジュールフォルダーには、次の5つのファイルがあります。

モジュールのファイル構造、特にfields.jsonファイルとmeta.jsonファイルに関する詳細情報のドキュメントをご覧ください。このチュートリアルではfields.json、module.css、 module.htmlの3つのファイルに焦点を当て、それらがどのように生成され、デザインマネージャーとモジュールエディターの間でダウンロード／アップロードされるかを説明します。

モジュールのfields.jsonファイルを開きます。このファイルには次のようなJSONオブジェクトが含まれています（一部のid番号、画像フィールドのsrc属性、また場合によってはフィールドの順序などを除く）。

次のフィールドの値は、ステップ3で追加した値と一致します。

• name：フィールドの名前。
• label：フィールドのラベル。
• default：フィールドの既定値。  

こうしたフィールドとデータの関係を調べるには、次の手順に従います。

• ローカル環境で、Testimonialリッチ テキスト フィールドの既定値を［I would 100% recommend it to my colleagues and friends.］（同僚にも知人にも100％推奨します）に変更します。
• ファイルを保存します。ステップ10で再度この操作を実行します。

module.htmlファイルには、既にステップ4でHubL＋HTMLモジュールエディターで作成したHubLとHTMLが含まれています。

このコードに工夫を加えるために、次のコードをコピーし、ファイルに貼り付けます。

module.cssファイルは、現時点では空の状態になっています。スタイルを追加するには、次のコードをコピーし、ファイルに貼り付けます。

コードの追加後、ファイルを保存します。

ローカル環境でモジュールに変更を加えた後は、変更をHubSpotアカウントに反映させます。

• ターミナルを開き、正しいディレクトリー上で作業していることを確かめます。
• 保存時に変更がHubSpotに適用されるように、hs watch <src> <destination>コマンドを実行します。 
  • <src>は、現在の作業ディレクトリーを基準としたローカルファイルの相対パスです。
  • <destination>は、HubSpotアカウント内の宛先にするパスです。アップロード先は新しいフォルダーにすることができます。
  • 例えば、hs upload my-theme my-new-themeを実行すると、コンピューター内のmy-themeフォルダーがHubSpot内のmy-new-themeフォルダーにアップロードされます。

• HubSpotアカウントにて、［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］の順に進みます。
• 左側のサイドバーで、作成したテーマに進み、moduleフォルダーを開いてTestimonialモジュールを選択します。
• モジュールを開き、module.htmlペインとmodule.cssペインに変更が反映されていることを確認します。
• 右上にある［プレビュー］をクリックします。新しいタブが開き、モジュールのプレビューが表示されます。 

ここまでのチュートリアルでは、次のような作業を行いました。

• HubSpotでモジュールを作成しました。
• モジュールをローカル環境に取り込みました。
• ローカルの開発ツールを使用してHubL＋HTMLおよびCSSを変更しました。
• ステップ10で実行したCLIコマンドwatchを使用して、変更内容をHubSpotアカウントにアップロードしました。

ただし、これはモジュールを作成する多くの方法の1つにすぎません。次のような方法もあります。

1. デザインマネージャーでモジュールを作成します。
2. そのモジュールをHubSpotアカウントから取得します。
3. 編集の前に、watchコマンドを実行しておきます。watchコマンドの実行中は、モジュールをローカルで編集するとHubSpotアカウントにその変更がすぐに反映されます。

HubSpotでの開発の際には、さまざまな作業方法を試して自分に合うものを探してみてください。

このチュートリアルの次のパートでは、テンプレート内のモジュールの使い方を説明します。

パート2：テンプレートでモジュールを使用する

コードエディターで、ステップ1で最初にHubSpot CMSボイラープレートテーマをダウンロードしたときに作成した「my-theme」ディレクトリーに進みます。

チュートリアルのこの部分では、modulesフォルダーとtemplatesフォルダーを主に扱います。 

簡単な定義で説明するなら、モジュールとはHubSpotのテンプレートとページの編集可能な領域です。HubSpotではデザインマネージャーを使ってモジュールをテンプレートに挿入できますが、ここではHubLを使用してモジュールをローカル環境のテンプレートに追加します。   

• コードエディターで、templatesフォルダーを開き、home.htmlファイルを開きます。 
• home.htmlファイル内の28行目付近から始まる最後のdnd_sectionに進みます。ここでは、このセクションに新しいモジュールを追加します。
  
• 次のHubLモジュールタグをコピーし、dnd_section内の他のdnd_modulesの前に貼り付けます。

このタグでは、新しいモジュールが相対ファイルパスで参照されます。次のステップで、このタグに他の任意のパラメーターを追加します。

• 作業を自動的に追跡するwatchコマンドを実行し続けていない場合は、変更内容をアップロードできるようにターミナルで再びhs watch <src> <dest>を実行してください。次の一連のステップを進めるにあたって、このコマンドを実行しておいてください。 
• HubSpotアカウントで、デザインマネージャーを開きます（［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］）。
• デザインマネージャーの左側のサイドバーで、homepage.htmlファイルを選択します。
• 右上の［プレビュー］をクリックし、［表示オプションを使用したライブプレビュー］を選択して、新しいウィンドウでテンプレートのプレビューを開きます。

• 新しいタブでプレビューを開くと、新しく追加したTestimonialモジュールが含まれています。

ホームページテンプレートに工夫を加えるには、次の手順に従います。

• コードエディターに戻り、homepage.htmlファイルを開きます。
• Testimonialモジュールタグに、以下のパラメーターを追加します。

上記のパラメーターは、3つのフィールドに当初割り当てた既定値よりも優先されます。各パラメーターでは、ステップ3でそれぞれのフィールドに割り当てたHubL変数名が使用されています。

• customer_name：このパラメーターは、顧客名のフィールドに名前「Mary」を渡します。
• profile_pic：このパラメーターは、2つのプロパティーを含むオブジェクトです。srcプロパティーでは、Maryのプロフィール写真のURLを取り出すためにget_asset_url HubL関数を使用します。画像のファイルパスは、作業ディレクトリーからの相対パスになる点に注意してください。altプロパティーでは、画像の代替テキストを割り当てます。
• testimonial：このパラメーターは、評価コメントのフィールドに新しいテキストを渡します。

あるいは、HubLブロック構文をリッチ テキスト フィールドで使用して、HTMLまたはテキストの大きなブロックを次のように記述することもできます。

モジュールブロック構文の詳細をご確認ください。

ターミナルでwatchコマンドを実行しておいた場合は、保存した変更がHubSpotに送信されます。その後デザインマネージャーに戻り、テンプレートをプレビューできます。

このステップでは、前と同じ手順に従って、さらに2つのTestimonialモジュールをテンプレートに追加します。

• コードエディターを開き、home.htmlファイルを開きます。
• 前に追加したTestimonialモジュールの下に、モジュールのコードをコピーして貼り付けることにより、このモジュールの別のインスタンスを追加します。新しいTestimonialモジュール内で、前述の同じ手順に従って以下の詳細を指定します。
  • 顧客の名前をOllieにします。
  • Ollieの推奨コメントは次のとおりです。「I can't believe that I ever conducted business without the use of this product!」（今までこの製品を業務に使っていなかったことが信じられません）
  • Ollieの写真用に、imagesフォルダー内のファイルの相対ファイルパスを追加します。Ollieの画像に、「Ollie Profile Picture」（Ollieのプロフィール写真）というalt属性を指定します。
• 2つ目のTestimonialモジュールの下に、3つ目のTestimonialモジュールを追加して、以下の詳細を指定します。
  • 顧客の名前をErinにします。
  • Erinの推奨コメントは次のとおりです。「My business has nearly tripled since I began to use this product! Don't wait, start now!」（製品を使い始めてから、ビジネスはほぼ3倍に拡大しました。今すぐ始めてみてください）
  • Erinの写真用に、imagesフォルダー内のファイルの相対ファイルパスを追加します。Erinの画像に、「Erin Profile Picture」（Erinのプロフィール写真）というalt属性を指定します。
• 変更内容を保存します。

ターミナルでwatchコマンドの実行しておいた場合は、デザインマネージャーに戻ってテンプレートの変更内容をプレビューできます。テンプレートのプレビューにはこの時点で、3つ全てのTestimonialモジュールが含まれています。

このチュートリアルの次の部分では、このテンプレートを使用してHubSpotページを作成します。

パート3：HubSpotページでカスタムテンプレートを使用する

変更したホームページテンプレートを使ってページを作成する前に、ローカル環境においてtheme.jsonファイルの変更を行う必要があります。さまざまなHubSpot製品からアクセス可能なテーマとして、このファイル内にこのディレクトリーを指定します。  

コードエディターでtheme.jsonファイルを開き、次のJSONオブジェクトをファイルに貼り付けます（//theme.jsonコメントは除外してください）。

上記のコードを追加した後、変更を保存すると、watchコマンドによってHubSpotに変更が送信されます。

ページを作成するには、次の手順に従います。

• HubSpot上で［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
• 画面右上の［作成］をクリックし、［ウェブサイトページ］を選択します。ページに名前を付けてから、［ページを作成］をクリックします。
• ［テンプレートを選択］画面で、テーマセレクタードロップダウンメニューを使用して［マイ カスタム テーマ］を選択します。 
  
  • 現時点で正しいテーマが表示されていない場合は、テーマ セレクター ドロップダウン メニューで［テーマを変更］を選択します。

• テーマ内の［ホーム］テンプレートをクリックします。画面右上の［テンプレートを選択］をクリックします。

ページエディターには、このチュートリアルでこれまでに加えた全ての変更内容が反映されています。

ページをカスタマイズするには、次の手順に従います。

• 左側のサイドバーの［追加］タブを使用して、既定とカスタムのモジュールの中からモジュールを選択します。モジュールをページに追加するには、モジュールをクリックし、エディターの中央ペインのページ本文までドラッグします。
• 左側のサイドバーの［コンテンツ］タブを使用して、ページの現在のモジュールを確認します。
• 左側のサイドバーの［デザイン］タブを使用して、ページで使用できるテーマスタイルを確認します。 
• ページのコンテンツが表示される中央ペインで、モジュールをクリックすることで、その内容を編集できます。
• 右上の［プレビュー］をクリックすることにより、いつでも変更内容をプレビューできます。HubSpotでのページの作成と編集について詳細をご確認ください。

公開前の最後のステップは、ページの設定を編集することです。

• エディターの最上部にある［設定］タブをクリックしてページの設定にアクセスします。
• ［ページタイトル］フィールドをクリックして、ページにタイトルを追加します。訪問者がページにアクセスすると、このタイトルがブラウザータブに表示されます。
• ［ページURL］の下にある［コンテンツスラッグ］フィールドをクリックして、ページのURLを設定します。［ドメイン］ドロップダウンメニューをクリックして、いずれかの接続済みドメインを選択することもできます。

• ページを公開するには、右上の［公開］をクリックします。ページは公開されると、指定したURL上で稼働します。

• テーマを使ってみる
• サーバーレス関数の使い方
• 効率的な開発ワークフローの構築
• アクセシビリティーについて
• CMS HubでのJavaScriptフレームワークの使用方法
• カスタムモジュールでウェブコンポーネントを使用する方法（英語）
• モジュールを基盤にコードブロックのウェブコンポーネントを作成する方法（英語）