ホーム>ASPソースコード>その他のカテゴリー
ダウンロード

ステイシー

Stacy は、Contentful CMS のコンテンツと Handlebars テンプレートを組み合わせて Web サイト ページを作成する Web サイト ジェネレーターです。

Stacy は、Contentful のエントリ コンテンツ タイプと Web サイト プロジェクトの Handlebars テンプレートを 1 対 1 の関係で照合します。コンテンツ モデルで定義されているエントリ タイプごとにテンプレートがあります。 Stacy の観点からは、ページ エントリとモジュール エントリという 2 種類のエントリがあります。ページ エントリとそのテンプレートを組み合わせると、一意の URL に単一の Web サイト ページが作成されます。モジュール エントリは、Contentful の参照フィールドを使用してページや他のモジュールに含めることができ、再利用可能なコンテンツを作成したり、単にコンテンツとテンプレートの構造を小さな部分に分割して提供したりできます。

Stacy が既存の多くの静的 Web サイトジェネレーターと異なる点は、Amazon Cloud の S3 バケットへの Web サイトの自動公開をサポートし、そこからインターネット上で提供できることです。 Stacy は、Webhook 機能を介して Contentful に接続できる特別なインフラストラクチャを Amazon Cloud にデプロイします。 Contentful スペースでコンテンツが更新されると、Stacy によって Amazon Cloud にデプロイされたウェブサイトのインフラストラクチャが通知を受け取り、更新の影響を受けるウェブサイトのページのみが自動的に再生成および再公開されます。手動による Web サイトの再生成や再展開は必要ありません。

Stacy を使用する場合、Web サイトは通常、バージョン管理のために git リポジトリでチェックインされる NPM プロジェクトになります。プロジェクトには、Handlebars テンプレートと静的コンテンツ (CSS スタイルシート、Web サイトのデザインで使用される画像、フォントなど) が含まれますが、Web サイトのコンテンツは Contentful スペースに存在します。 Web サイト開発者は、Web サイト プロジェクトから Stacy コマンド ライン ツールを使用してサイトを開発、公開、再公開します。ウェブサイトが Amazon Cloud で公開されると、コンテンツ作成者は Contentful UI のみを使用して作業します。

詳細なチュートリアル/チュートリアルについては、「Stacy を使用した Web サイトの作成」を参照してください。

はじめる

まず、Web サイトのコンテンツ用のコンテンツフルなスペースが必要です。それを取得したら、Web サイト用の新しいプロジェクトを作成できます。

Node.js バージョン 10.16.3 以降が npm とともにインストールされていることを確認してください。 Amazon Cloud でウェブサイトを公開する場合は、AWS CLI もインストールする必要があります。

まず、Stacy をグローバルにインストールします。 

 npm install -g stacy

Contentful スペースで、 「スペース設定」→「API キー」に移動し、 「コンテンツ配信/プレビュー トークン」に API キーを追加します。 Stacy 環境を Contentful スペースに接続するために使用するスペース IDとコンテンツ配信 API アクセス トークンの値に注意してください。

これで、Web サイトの初期プロジェクトを生成できます。 

 stacy new --cf-space <your space ID> --cf-access-token <your access token> mywebsite

これにより、現在のディレクトリに「mywebsite」という名前の新しいプロジェクト ディレクトリが作成されます。 「mywebsite」値はサイト IDとして知られています。 Web サイトを識別する別の値を使用してください。値は URL に対応したもの (小さな文字、数字、ダッシュ) である必要があります。

プロジェクト ディレクトリの/staticの下に静的コンテンツを置き (これはそのまま Web サイトにコピーされます)、エントリ テンプレートを/templatesの下に置きます。テンプレート ファイルの名前 (拡張子を除く) は、コンテンツフルコンテンツ モデルの対応するエントリ コンテンツ タイプと正確に一致する必要があります。 /templatesでは、テンプレート ファイルをサブフォルダーに整理できます。ただし、ファイル名は、テンプレートとエントリ コンテンツ タイプを一意に一致させるために使用されるため、すべてのサブフォルダー間で一意である必要があります ( /templates内のサブフォルダーは何の役割も果たしません)。

注: 通常、テンプレートはエントリのコンテンツと組み合わされて HTML を生成します。他のタイプのコンテンツを作成する必要がある場合は、テンプレート名に拡張子を追加できます。たとえば、 page.hbs HTML を生成します。プレーンテキストを生成するにはpage.txt.hbsを使用します。これは、 page.hbsとpage.html.hbsが同じであることも意味します。

これで、開発目的で Web サイトをローカルで実行できるようになりました。 

 stacy serve

Web サイトはhttp://localhost:8080/で確認できます。テンプレート、静的コンテンツ、または Contentful のコンテンツを編集した後は、ページをリロードするだけです。

Stacy ローカル Web サーバーを停止するにはCtrl+C使用します。

stacy --help実行すると、使用可能な他のコマンドが表示されます。

プロジェクト ディレクトリのコンテンツは、GitHub や Bitbucket などの Git リポジトリにチェックインできます。

テンプレート

テンプレート内では、すべての入力フィールドは、コンテンツ モデルで定義されているフィールド IDによって使用できます。テンプレート内で直接参照できます。例えば： 

< h3 > {{ caption }} </ h3 >

これにより、エントリのcaptionフィールドの値が出力されます。ここで使用されているのはフィールド IDであり、フィールドNameではないことに注意してください。

Stacy は、テンプレートで使用できる特別なヘルパーをいくつか追加します。

  • module <reference field> - Reference type フィールドによって参照されるモジュール エントリを含めます。たとえば、ID paragraphsを持つフィールドがあり、それが参照のリストであるとします。 

     {{ #each paragraphs }} {{{ module this }}} {{ /each }}

  • asset <asset field> - 参照されるアセット (画像など) を含めます。例えば： 

     {{ asset picture }}

    現在、HTML <img>タグがレンダリングされる画像アセットのみがサポートされています。

  • assetSrc <asset field> - アセットの URL を取得します。例えば： 

    < img src = " {{ assetSrc picture }} " >

  • assetTitle <asset field> - アセットのタイトルを取得します。例えば： 

    < img src = " {{ assetSrc picture }} " alt = " {{ assetTitle picture }} " >

  • markdown <long text field> - マークダウンの長いテキスト フィールドをレンダリングします。例えば： 

     {{{ markdown description }}}

    ヘルパーはエスケープする必要のない HTML を生成するため、ここでは三重中括弧が必要であることに注意してください。

  • richText <rich text field> - リッチ テキスト フィールドを表示します。例えば： 

     {{{ richText content }}}

    markdownと同様に、三重中括弧に注意してください。

  • json <field> - フィールドの内部コンテンツフル JSON 表現を出力します。例えば： 

    < pre > {{ json myField }} </ pre >

    このヘルパーは、問題の診断に役立つ場合があります。

コンテンツモデル

上で述べたように、Contentful スペースのコンテンツ モデルとテンプレートで定義するコンテンツ タイプの間には 1 対 1 の関係があります。

注: 厳密に言えば、特定のコンテンツ タイプに複数のテンプレートを使用して、同じコンテンツ エントリに対して異なるタイプのファイルを生成できます。たとえば、コンテンツ タイプ ID moduleの場合は、テンプレートmodule.html.hbsおよびmodule.xml.hbsを使用できます。最初のテンプレートはエントリの HTML ファイルを生成し、2 番目のテンプレートは XML ファイルを生成します。

コンテンツ タイプを定義するときは、 API 識別子(コンテンツ タイプ IDとも呼ばれます) に注意してください。コンテンツ タイプのテンプレート ファイルは、同じ名前 (拡張子も付けたもの) を持つ必要があります。

ページ エントリ (モジュール エントリとは対照的に) のコンテンツ タイプには 1 つの要件があります。ページ コンテンツ タイプは必須のスラッグフィールドを定義する必要があります。フィールドの値によって、コンテンツ エントリが対応するテンプレートと結合されるときに生成されるファイルの名前が決まります。たとえば、ページ エントリのスラッグ値が「index」の場合、生成されるページは「/index.html」になります。スラグが「more/terms」の場合、ページは「/more/terms.html」になります。等々。

デフォルトでは、slug フィールドのフィールド ID はslugである必要があります。 ID はプロジェクトのstacy.jsonファイルでオーバーライドできます。コンテンツ タイプ定義でスラッグ フィールドを必須にすることに加えて、フィールド値の特定の形式を保証するためにカスタム一致パターン バリデーターをそれに関連付けることもお勧めします。バリデーターの正規表現は^w[w-]*(/w[w-]*)*$にすることができます。

Amazonクラウドでの公開

ウェブサイトを AWS にデプロイする準備ができたら、まず AWS アカウントで Stacy インフラストラクチャをセットアップする必要があります。これを行う前に、いくつかの手順を実行する必要があります。

  1. ターゲットのS3バケットを作成します。これは、Web サイトが公開される場所であり、そこから (おそらく CloudFront 経由で) 提供されます。あるいは、すでに所有しているバケットを使用することもできます (Stacy は、ターゲット バケットのサブフォルダーでの公開もサポートしています)。

  2. まだお持ちでない場合は、Stacy がパブリッシャー Lambda 関数パッケージをアップロードするために使用する S3 バケットを作成します。パブリッシャー Lambda 関数は、Contentful の公開および非公開イベントに応答し、ターゲット S3 バケット内の関連ページとアセットを更新する部分です。

  3. パブリッシャー パッケージをビルドします。 

     stacy build-publisher

    これにより、プロジェクトの/build/stacy-mywebsite-publisher.zipの下にパブリッシャー Lambda 関数パッケージが作成されます。このファイルを Lambda 関数の S3 バケットにアップロードします。

Stacy のstacy newコマンドにより、AWS 環境用の CloudFormation テンプレートが生成され、プロジェクトの/misc/cfn-template.jsonに保存されました。必要に応じて確認してカスタマイズできます。それ以外の場合は、AWS アカウントでウェブサイトの Stacy スタックを作成してください。

CloudFormation スタックが作成されたら、Stacy パブリッシャーが生成された Web サイト コンテンツをその中で公開できるように、ターゲット S3 バケットのポリシーを調整する必要があります。バケットのポリシーには次のようなものを含めることができます。 

{
    "Version" : " 2012-10-17 " ,
    "Statement" : [
        {
            "Effect" : " Allow " ,
            "Principal" : {
                "AWS" : " <Stacy publisher role ARN> "
            },
            "Action" : [
                " s3:PutObject " ,
                " s3:DeleteObject "
            ],
            "Resource" : " arn:aws:s3:::<bucket name>/* "
        }
    ]
}

上記のポリシーで、Stacy パブリッシャー ロール ARN を CloudFormation スタックのPublisherRoleArn出力パラメーターにある値に置き換え、バケット名をターゲット Web サイトのバケット名 (ポリシーが適用されるバケット) に置き換えます。

次に、公開するために開発環境を準備する必要があります。 Web サイトプロジェクトの.envファイルを開いて編集します。その中で、すべてのAWS_*変数を正しい値に設定します。 AWS_PUBLISH_EVENT_SOURCE_MAPPING変数の値は、CloudFormation スタックのPublishEventSourceMappingId出力パラメータで確認できることに注意してください。

.envファイルが正しく設定されたら、以下を使用して Web サイトを公開できます。 

 stacy publish

最後のセットアップ手順の 1 つは、Contentful スペースで Webhook を構成して、イベントの公開および非公開時に Stacy パブリッシャーを呼び出すことです。 AWS アカウントの API Gateway サービスで、Stacy によって作成された API を見つけます。 API のprodステージにはメソッドPOST /publish 1 つだけあります。そのInvoke URL に注目してください。

また、 「API キー」セクションに移動し、Stacy 用に作成された API キーの値をメモします。

Contentful スペースで、 「スペース設定」→「Webhook」に移動し、Webhook を追加します。 API Gatwey の呼び出し URL を URL フィールドに入力します (メソッドPOSTそのままにしておきます)。次に、 [トリガー]セクションで[特定のトリガー イベントを選択] オプションを選択します。 [エントリ] 行と[アセット]行の[公開]チェックボックスと[非公開]チェックボックスをオンにします (合計 4 つのチェックボックスがオンになっています)。

[ヘッダー]セクションで、 [シークレット ヘッダーの追加]をクリックします。 「キー」フィールドに「X-API-Key」を入力し、 「値」フィールドに API ゲートウェイからの API キーを入力します。

この Webhook を保存すると、Contentful でエントリとアセットを公開および公開解除すると、AWS セットアップでパブリッシャーがトリガーされ、準備は完了です。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて