パーツの新規登録について

パーツの新規登録方法について説明します。

メニューから青枠のパーツを選択します。

選択するとパーツの画面が表示されますので、表示されたら赤枠の+新規登録の汎用パーツを押します。

押すと以下画面の新規作成画面が表示されます。

パーツ新規作成画面

パーツ名は入力必須になり、ページ作成時にパーツ選択する際に表示される名称になります。

パーツカテゴリは別ページで説明しますパーツカテゴリで設定したカテゴリを選択させる項目になります。

設定しておくとページ作成時のパーツ選択時にカテゴリごとにパーツ検索が可能になります。

HTML

次にHTMLの項目を入力します。

TinyMCEエディターを利用しているので、直接ソースコードを入力せずにHTMLの作成が可能になっています。エディターでは微修正ができない場合があります。その場合はソースコードを直接打ち込む必要があります。

※TinyMCE内のHTMLにCSSを適用するには、ファイル管理にて/filesフォルダを作成し、ファイル名editor.cssを作成してください。

HTMLの中の各アイコンの機能について説明します。

青枠のアイコンの名称が、左から画像の挿入・編集、ソースコード、プレビュー、

テンプレートの挿入の4種になります。

画像の挿入のアイコンを選択すると以下画面が表示されます。

一般とアップロードの2種で選択が可能になります。

一般の場合、以下内容を入力の上、保存を押すと挿入が可能となります。

画像ソースはSITEにアップしたファイル名へのパスを入力してください。

Alternative descriptionは任意の入力項目になります。

幅、高さも指定がある場合はこちらの入力をしてください。

アップロードの場合、アップしたい画像をドロップするだけで挿入が可能となります。

ソースコードのアイコンを押すと以下画面が表示されます。

表示後、ソースコードを編集する場合は本文に直接入力して頂き、入力後に保存を押して頂くと、

ソースコード上で編集した内容が反映されます。

プレビューのアイコンを選択すると以下の画面が表示されます。

実際に入力したパーツのプレビューが表示されますので、こちらで入力した内容のイメージと相違ないかを確認して頂けます。

テンプレートの挿入のアイコンを押すと別メニューで管理しているテンプレートを入れることができます。

アイコンを押すと以下の画面が表示されます。

事前に登録したテンプレートを挿入することができます。

尚、テンプレート挿入前に何か入力していた場合はその入力した内容の後にテンプレートが入ります。

冒頭に入れたい場合、内容を入力する前にテンプレートを入れて下さい。

テンプレートを選択したら最後に保存を押してください。

CSS

CSSについては事前に用意して頂いたCSSコードを入力してください。

JS

作成したパーツに対してAPI連携させたりする場合に入力が必要になります。

CONTENTSやFORMを使用する場合、一部コードの書き換えが必要になります。

書き換えを行わなかった場合、パーツを作成してもAPI連携がされていない状態となり、正しくCONTENTSが表示されないといった状態になります。

サムネイル

最後に必要であれば、サムネイル画像をアップしてください。

問題なければ+登録を押すとパーツの作成が完了します。

マイクロサービスの利用

CONTENTSやFORMとAPI連携して表示するには、APIリクエスト時に必要となる「契約ID」を取得し、JavaScript（JS）の実装コード内に設定する必要があります。

以下に、契約IDの取得・設定手順と、パーツのインポート方法について説明します。

契約IDの取得

契約IDの取得というボタンを押します。

ボタンを押すと以下の画面が表示されます。

契約サービスを選択します。

選択値で表示される内容は契約しているマイクロサービスの選択値になります。

※CONTENTSやFORMなどになります。

次に契約名称の選択を行います。

契約名称でどの契約サービスへ紐づけを行うのかを指定しますので、任意の契約を選択してください。

契約サービス、契約名称の選択が完了すると契約IDが払い出されますので、

その内容をコピーして対象のコードの後へ入力してください。JS実装コード内の対象箇所（契約IDを設定するコード・変数部分）へ貼り付けて設定してください。 JSの実装については、パーツライブラリにあるパーツ集を参考に実装してみてください。

また、パーツ集から使いたいパーツをダウンロードしてインポートいただくことでも実装可能です。

パーツのインポート

パーツ一覧を開き青枠のインポートを押します。

押すと以下のような画面が表示されますので、

パーツ集からダウンロードしたZIPファイルやお客様で作成したパーツ（HTMLファイル）をそのままドラッグ＆ドロップしてください。

ドロップしましたら、登録を押してください。

※WINDOWSの場合ZIPファイルでのデータドロップができないため、解凍したデータドロップしてください。

複数作成したいパーツがある場合はHTMLを用意して頂いた上でインポートから一括でインポートが可能です。

また、インポートする際、CSS等入れていない場合、体裁が崩れるのでインポートする際はCSS等を入れてからインポートをお願いします。

インポートされたデータはパーツカテゴリ等の設定はされていないのでインポートしたパーツのカテゴリ設定はパーツごとに設定をする必要があります。

インポートが完了すると以下のようにパーツ一覧に表示されます。