Ibexa DXP のインストール後の初期作業

# 最初のステップ
**Ibexa DXP** のインストール後に実行する最初の手順がリストされています。これらは、新規インストールで実行する必要がある最も一般的な作業です。

:::note
**初心者向けチュートリアル**
クリーンインストールから一通りのサイトの作成を網羅する完全なチュートリアルは「[Ibexa DXP の初心者向けチュートリアル](https://qiita.com/bezeklik/items/63f614bc0bbd6975024b)」を参照してください。
:::

## ウェルカムページの削除
![](https://doc.ibexa.co/en/latest/getting_started/img/welcome_page.png)
ウェルカムページを削除して、完全にクリーンな状態でプロジェクトを開始するには、インストールから以下のファイルとフォルダを削除してください。
* `config/packages/ibexa_welcome_page.yaml` ファイルを削除します
* `templates/themes/standard` フォルダを削除します
* `assets/scss` フォルダを削除します
* すべての `translations/ibexa_welcome_page.*` ファイルを削除します
* `webpack.config.js` で `Encore.addEntry` セクションを削除し、最後の行のコメントを外して、ファイルの最後が以下のようになるようにします。
```js:webpack.config.js
// Put your config here.

// uncomment the two lines below, if you added a new entry (by Encore.addEntry() or Encore.addStyleEntry() method) to your own Encore configuration for your project
// const projectConfig = Encore.getWebpackConfig();
// module.exports = [ IbexaConfig, ...customConfigs, projectConfig ];

// comment-out this line if you've uncommented the above lines
module.exports = [ IbexaConfig, ...customConfigs ];
```

## コンテンツタイプの作成
1. ブラウザで管理画面にアクセスします。 `<your_domain>/admin` にアクセスし、デフォルトの認証情報 `admin` / `publish` を使用してログインします.  
:::note
**パスワードの変更**
最初のログイン時にパスワードを変更するように求められます。パスワードの詳細については、「[Passwords](https://doc.ibexa.co/en/latest/guide/user_management/user_management/#passwords)」を参照してください。
:::

2. [管理]を選択し、[コンテンツタイプ]に移動します。
3. コンテンツグループに入り、新しいコンテンツタイプを作成します。  ![](https://doc.ibexa.co/en/latest/getting_started/img/first-steps-create-ct.png)
4. コンテンツタイプの名前（例："Blog Post"）を入力し、識別子： `blog_post` を入力します。
5. 以下に、テキスト行タイプのフィールド定義を追加します。「タイトル」という名前を付け、識別子 `title` を付けます。
6. 別のフィールド定義を追加します：識別子 `text` を持つテキスト（リッチテキストタイプ）。
7. コンテンツタイプを保存します。

:::note warn
**より詳しい情報**
「[コンテンツモデル](https://doc.ibexa.co/en/latest/guide/content_model/)」を参照してください。
:::

## Twig テンプレートの作成
コンテンツをフロントページに表示するには、コンテンツビューとテンプレートを定義する必要があります。

コンテンツビューは、コンテンツを表示するためにどのテンプレートとコントローラを使用するかを決定します。

1. `config/packages/ibexa.yaml` の `ibexa.system` の下に、次のブロックを追加します（インデントに注意：`site_group` は `system` の1レベル下でなければなりません）。  
```yaml:config/packages/ibexa.yaml
site_group:
    content_view:
        full:
            blog_post:
                template: full\blog_post.html.twig
                match:
                    Identifier\ContentType: [blog_post]
```
コンテンツビューテンプレートは、[Twig テンプレートエンジン](https://twig.symfony.com/)を使用しています。

2.テンプレートファイル `templates/full/blog_post.html.twig` を作成します。
```twig:templates/full/blog_post.html.twig
<h1>{{ ibexa_render_field(content, 'title') }}</h1>
<div>{{ ibexa_render_field(content, 'text') }}</div>
```
:::note warn
**より詳しい情報**
* 「[テンプレート](https://doc.ibexa.co/en/latest/guide/content_rendering/templates/templates/)」を参照してください。
* 「[Twig ドキュメント](https://twig.symfony.com/doc/)」を参照してください。
:::


## コンテンツの作成
1. 管理画面で Content/Content structure を起動し、右メニューのボタンで新しいコンテンツを作成します。  
![](https://doc.ibexa.co/en/latest/getting_started/img/first-steps-create-content.png)

2. Blog Post コンテンツタイプを選択します。コンテンツ項目を記入し、公開します。

3. 新しいコンテンツアイテムをフロントページでプレビューするには `<yourdomain>/<Content-item-name>` に移動します。例えば、ブログ記事のタイトルが「最初のブログ記事」の場合、アドレスは `<yourdomain>/<first-blog-post>` となります。  
![](https://doc.ibexa.co/en/latest/getting_started/img/first-steps-preview-content.png)

## サイトアクセスの追加
サイトアクセスを使用すると、さまざまなバージョンの Web サイトを提供することができます。

サイトアクセスは、マッチングルールに応じて使用されます。これらは YAML 設定の `ibexa.siteaccess.list` キーの下で設定されます。

1. `config/packages/ibexa.yaml` にドイツ語版 Web サイトのための `de` という新しいサイトアクセスを追加します。
```yaml:config/packages/ibexa.yaml
ibexa:
    # ...
    siteaccess:
        list: [site, de]
        groups:
            site_group: [site, de]
```
サイトアクセスは URI の最後の部分を使用して自動的にマッチングされます。
2. これで新しいサイトアクセスからフロントページ `<yourdomain>/de` にアクセスできるようになりました。 

:::note warn
**ログイン**
このとき、匿名の訪問者には閲覧権限がないため、このままでは新しいサイトアクセスをプレビューするのにログインが必要な状態です。この記事最後の「[権限の設定](#%E6%A8%A9%E9%99%90%E3%81%AE%E8%A8%AD%E5%AE%9A)」を参照してください。
:::

今のところ、新しいサイトアクセスはメインサイトと変わりません。

:::note warn
**より詳しい情報**
* 「[サイトアクセス](https://doc.ibexa.co/en/latest/guide/multisite/multisite/)」を参照してください。
* 「[サイトアクセスマッチャー](https://doc.ibexa.co/en/latest/guide/multisite/siteaccess_matching/#available-matchers)」を参照してください。
:::

### 言語の追加
サイトアクセスの最も一般的な使用例の1つは、異なる言語バージョンのサイトを持つことです。

1. 別の言語を使用するように `de` サイトアクセスを設定するには、`ibexa.system` の `site.languages` の下に、その設定を追加します。  
```yaml
site:
    languages: [eng-GB]
de:
    languages:
        - ger-DE
        - eng-GB
```  
これは、このサイトアクセスのメイン言語としてドイツ語が使用され、フォールバックとして英語が使用されることを意味します。
2. 管理画面に移動し、 **[Admin]** > **[言語]** を選択します。右上の「＋ Add language」ボタンを押して新規作成画面を開き、「名前」欄に `German` を、「言語コード」欄に `ger-DE` を入力します。「有効」欄のチェックボックスがチェック済みになっていることを確認してください。言語コードは後から編集できません。  
![言語の作成](https://doc.ibexa.co/en/latest/getting_started/img/first-steps-create-language.png)
3. 次に、「コンテンツ」の構成から、先ほど作成したブログ記事を開きます。**[翻訳言語]** タブに切り替えて、新しい翻訳を追加します。  
![翻訳を追加する](https://doc.ibexa.co/en/latest/getting_started/img/first-steps-add-translation.png)
4. ドイツ語を選択し、英語版をベースに新しい翻訳を作成します。コンテンツアイテムを編集し、公開します。
5. トップページに移動します。ブログ記事は、`<yourdomain>/<content-name>` と `<yourdomain>/de/<content-name>` のどちらのサイトアクセスから入ったかによって異なる内容を表示するようになりました。  
![翻訳されたコンテンツのプレビュー](https://doc.ibexa.co/en/latest/getting_started/img/first-steps-translated-content.png)

:::note warn
**より詳しい情報**
* 「[言語](https://doc.ibexa.co/en/latest/guide/internationalization/)」を参照してください。
* 「[翻訳サイトアクセスの設定](https://doc.ibexa.co/en/latest/guide/multisite/set_up_translation_siteaccess/)」を参照してください。
:::

## デザインの追加
デザインエンジンでは、テンプレートとアセットで構成されるさまざまなテーマを使用することができます。各テーマは別々のフォルダに保存され、サイトアクセスに割り当てられます。

新しいテーマを作成するには：
1. `config/packages/ibexa.yaml` の一番下（`ibexa`と同じレベル）に、以下の設定を追加します。
```yaml:config/packages/ibexa.yaml
ibexa_design_engine:
    design_list:
        site_design: [site_design]
        de_design: [de_design]
```
2. `de` サイトアクセスの設定（`ibexa.system.de` の下）に、`design: de_design` を追加します。
3. `site` の下に、 `design： site_design` を追加します。
4. ブログ記事の `content_view` の設定に戻ります。テンプレートへのパスを変更し、正しいデザインのフォルダを指すようにします。 `template: '@ibexadesign\full\blog_post.html.twig'`  
つまり、アプリはサイトアクセスに関連するフォルダ（`de` サイトアクセスの場合は`de_design`、`site_group` 内の他のサイトアクセスの場合は `site_design`）内の `blog_post.html.twig` ファイルを探すことになります。
5. `templates` の下に `themes` フォルダを作成し、その下に `de_design` と `site_design` という2つのフォルダを作成します。
6. 既存の `full\blog_post.html.twig` ファイルを `site_design` の下に移動します。
7. `de_design` の下にもコピーします。2番目のものを何らかの方法で変更し（例えば、htmlを追加するなど）、その効果をプレビューできるようにします。
8. さまざまなテーマの違いを見るために、`<yourdomain>/<content-name>` と `<yourdomain>/de/<content-name>` に表示されるものを比較します。

## 権限の設定
特定のコンテンツタイプ（この例ではブログ記事）だけを編集できるようにするには、ユーザーグループに対して権限を設定する必要があります。

ユーザーとユーザーグループには、ロールが割り当てられます。ロールには、ユーザーが特定の機能を実行することを許可するルールである、いくつかのポリシーを含めることができます。ポリシーは、さらに「制限」によって制限することができます。

1. **[Admin]** > **[ユーザー]** と進みます。新しいユーザーグループを作成します（通常のコンテンツと同じ方法で作成します）。グループ名は「ブロガー」とします。
2. 新しいグループにユーザーを作成します。ユーザー名とパスワードを記憶させます。このユーザーを「有効」にします。  
![ユーザーの作成](https://doc.ibexa.co/en/latest/getting_started/img/first-steps-create-user.png)
3. **[Admin]** > **[ロール]** に移動します。「ブロガー」という新しいロールを作成します。
4. ユーザーのログインを許可するポリシーを追加します。
   * `User/Login`
   * `Content/Read`
   * `Content/Versionread`
   * `Section/View`
   * `Content/Reverserelatedlist`
5. ユーザーがコンテンツを作成し、公開できるようにするためのポリシー（Blog Postsに限定）を追加します。
   * `Content/Create` with Limitation for Blog Post コンテンツタイプ
   * `Content/Edit` with Limitation for Blog Post コンテンツタイプ
   * `Content/Publish` with Limitation for Blog Post コンテンツタイプ
![ポリシーへの制限の追加](https://doc.ibexa.co/en/latest/getting_started/img/first-steps-policy-limitations.png)
6. [割り当て]タブで、[Blogger]ロールを[Bloggers]グループに割り当てます。
![ロールの割り当て](https://doc.ibexa.co/en/latest/getting_started/img/first-steps-assign-roles.png)
これで、ログアウトして新しいユーザーとして再度ログインできます。ブログ記事だけが作成できます。