Pagesアプリケーションを使用する

最終更新日: 2021.03.09

このページはチュートリアルの一部であり、最初から最後まで順番に実行する必要があります。最初のページに移動します：Xperienceのインターフェース。

以下について説明します

Pagesアプリケーションへのアクセス
Pagesアプリケーションの基本
Pagesアプリケーションでコンテンツを編集する
Contentタブでコンテンツを編集する
Contentタブの操作

ℹ️重要な注意点

Dancing Goatは、チュートリアルの目的で使用される特定のサンプルウェブサイトです。あなたの会社のウェブサイトでの編集体験は、異なるページテンプレートやウィジェットが利用可能になるなど、異なるかもしれません。

ウェブサイトに取り組む前に、Xperienceのウェブサイトの仕様を理解する必要があります。

ウェブサイトは 2 つのアプリケーションとして実行されます。

表側のサイトは、開発者が新しい ASP.NET Core または実績のある ASP.NET MVC フレームワークを使用して構築した MVC アプリケーションです。
編集者は、ほとんど2つ目のXperienceアプリケーションを操作することになります。Xperienceアプリケーションは、コンテンツリポジトリとして機能し、管理インターフェイスを提供します。管理インターフェイスでは、ページの編集や作成、ファイルの添付ファイルの追加、メディアライブラリへの画像のアップロードなどを行います。

管理インターフェイスで行ったすべてのコンテンツの変更は、ウェブサイトの共有データベースに保存されます。開発者は、データベースからデータを引き出し、ウェブサイトの訪問者に表示するために、2つ目のライブサイトアプリケーションを用意しました。どちらのアプリケーションもウェブファーム内で実行され、データ（ページコンテンツや設定など）やファイル（メディアライブラリなど）の変更を同期させます。

コンテンツ編集者として、ウェブサイトの訪問者を惹きつけるような素晴らしいコンテンツを作成する責任があります。コンテンツがどのように表示されるかという心配事は、表向きのアプリケーションで作業しているデザイナーや開発者に任せることができます。

コンテンツが意図した通りに表示され、ウェブサイトが一貫した体験を提供できるようにするために、開発者はウェブサイトの管理でどのような変更ができるかを事前に定義しています。

例えば、ホームページを記事セクションに移動しようと思っても、それはできません。開発者はそのようなアクションを制限しています。

しかし、ページビルダーで構築されたページで画像を使ってメッセージをサポートしたいとしましょう。この場合、開発者は、ページのレイアウトやコンテンツを調整するために使用できるウィジェットを作成しました。

Pagesアプリケーションへのアクセス

Pages アプリケーションは、技術者以外のユーザーの間で最も利用されている Xperienceアプリケーションの 1 つです。これには、複数の方法でアクセスできます。

ダッシュボードのPagesアプリケーション・タイルをクリックします。
Xperienceのロゴをクリックしてアプリケーション・リストを開き（またはキーボードの F2 キーを押して）、Pagesアプリケーションを選択します。(検索ボックスに「pages」と入力してアプリケーション・リストをフィルタリングすることもできます)。

Pagesアプリケーションの基本

Pagesアプリケーションでは、あなたのウェブサイトにコンテンツを追加したり、変更したりすることができます。

アプリケーションのウィンドウは2つの部分に分かれています。左側のコンテンツツリーには、ツリー構造のコンテンツ項目が表示されます。ツリーの項目はページと呼ばれ、アプリケーションの右側でその内容を表示したり編集したりすることができます。

Pagesを使用することで、ライブサイトのデザインとは別にコンテンツを保存することができます。

Xperienceのウェブサイトでは、ツリーに表示されているページが必ずしもライブサイトに表示されるわけではないことに注意してください。各アイテムがライブサイトに直接表示されるウェブサイトのページではなく、ツリーの中のページをコンテンツの入れ物と考えてください。ライブサイトでどのように表示されるかを確認するには、プレビューモードを使用できます。

Pagesアプリケーションには、コンテンツを操作するための3つの表示モードがあります。

Edit：ウェブサイトのコンテンツを編集するためのデフォルトの表示モードです。
Preview：ページの最新バージョンを表示します。プレビューを使用すると、公開前に変更した内容がどのように見えるかを確認できます。
Listing：現在選択されているページの下にあるすべてのページのリストを表示します。リストモードを使用して、ページの削除や翻訳などの一括操作を一度に行うことができます。

表示モードボタンの下にあるアクションボタンは、コンテンツツリー内の新規ページの作成や既存のページの整理に役立ちます。ただし、ページを移動したり作成したりできる場所やできない場所については、開発者がルールを定義していることを覚えておいてください。

Pagesアプリケーションでコンテンツを編集する

各ページは、コンテンツの構造と編集体験を定義する特定のページタイプに基づいています。次の各タブでページの内容を編集することができます。

Contentタブ
Pageタブ

Contentタブでコンテンツを編集する

Contentタブでは、フィールドを使って構造化されたコンテンツを追加または管理することができます。

開発者は、見出し、テキスト、画像などの特定のコンテンツタイプを保持するフィールドを用意しました。また、フィールドを通して管理されたデータが、意図した通りにライブサイトに正確に表示されるようにしました。

エディターとしては、構造化されたコンテンツの恩恵を受けることができます。これにより、優れたコンテンツの作成に集中することができます。コンテンツのレイアウトやスタイリングを定義する必要はありません。

Contentタブの操作

About Us > Our philosophyページのコンテンツタブには、以下のフィールドが用意されています。

Heading - コンテンツのタイトルを入力します。
Image - あなたのメッセージをサポートする画像をアップロードすることができます。
Text - コンテンツの本文と連動します。
Publish from と Publish to - あなたのコンテンツがライブサイトで利用可能な期間を定義します。

Textフィールドは、Xperienceに組み込まれたリッチテキストフィールドエディタを使用します。リッチテキストフィールドエディタは、WYSIWYG形式の入力が可能で、テキストにさまざまなスタイリングオプションを提供します。ボールドや斜体化などの基本的なテキスト編集オプションのほかに、番号付きリストや箇条書きリストの追加、テキストの整列の調整、ハイパーリンクの作成、画像の追加などができます。フィールドの HTML マークアップを編集するには、ソースボタンを使用します。

💡課題

DancingGoat社は、最高のコーヒーを提供するために、細心の注意を払ってコーヒーを調達したり、農家の人の手でコーヒーを選んだり、自家焙煎したりと、さまざまな努力をしています。彼らは、会社の哲学を知る顧客に、コーヒーが美味しい一杯になるまでの道のりをもっと知ってもらいたいと考えています。

Contentタブを使用して、About us > Our philosophyのテキストからCoffee processing techniquesの記事へのハイパーリンクを作成します。

❓ヘルプ

ハイパーリンクを追加するには、次の手順を使用します。

ウェブサイトにサインインします。
Pagesアプリケーションに移動します。
コンテンツツリーで、(+)ボタンをクリックして、About usページの子アイテムを展開します。
About usページを開きます。
Textフィールドに新しいテキストを追加します。
Insert/Edit linkボタンを使用して、コーヒー加工技術の記事へのハイパーリンクを作成します。
1. リンクしたいテキストを選択します。
2. エディタツールバーのInsert/Edit linkボタンをクリックします.ダイアログウィンドウが開きます。
3. Contentタブに切り替えます。
4. コンテンツツリーで、Articlesページを展開し、Coffee processing techniques記事を選択します。
5. ダイアログウィンドウのSave & Closeボタンをクリックします。
Saveボタンをクリックして変更を保存します。
変更内容をライブサイトで確認するには
- アプリケーションリストを開き、アプリケーションリストの下部にあるLive siteボタンをクリックする
- または、コンテンツツリーでAbout usページの親ページを選択し、Previewモードに切り替えます。

手順を見て確認したい方は、GIFガイドをご覧ください。

前のページ： ビジネスチュートリアル— 次のページ：Xperienceページビルダーの使用

完成したページ： 2/6

原文：https://docs.xperience.io/13tutorial/business-tutorial/using-the-pages-application

Document