brieart初期導入ガイド

初期導入ガイド

株式会社 アイ・エヌ・ジーシステム

Ver. 1.0

目次

1. brieartとは?

3

brieartとは? 注意事項・制限事項など 3 4

2. brieart導入の流れ

6

3. brieartの管理画面にログイン

7

4. 登録情報

8

登録情報の確認・変更 8

5. ご契約情報

9

ご契約情報の確認・変更 9

6. 設定一覧

10

ドメイン（FQDN)の設定 10

7. 変換設定

11

変換設定画面の説明 スマートフォンサイトの作成 プレビュー確認 変換設定保存 11 12 29 30

8. 変換タグの埋め込み

31

1. brieartとは？

「brieart（ブリエアート）」を使えば面倒なツールのインストール作業などは必要なく、ブラウザさえあれば PC サイトのパーツをマウスでドラッグ&ドロップ、お好みのレイアウトに並べていくだけで誰でも手軽に、ま るで絵を描くようにスマートフォンサイトができあがります。 もうスマートフォンサイトをつくるために操作が複雑で高価な CMS などのツールを使う必要はありません。 既存の PC サイトを、特別な知識や高額なツールなどがなくても 誰でも手軽にスマー トフォンサイトへ変換できるWEBサービスです

brieartとは

 Javascript等のスクリプト動作 変換設定時には、スクリプトは削除した状態で設定を行います  Javascript等のスクリプト制御による表示の変 更・切り替え等、動的ページ構成 スクリプトによって表示の変更(レイアウト含む)・切り替え等を 行っているサイトでは、レイアウトが崩れたり、表示内容が意図 した内容にならなくなる場合があります  Flashや動画等のOBJECTタグ・EMBEDタグ・ VIDEOタグ、 IFRAMによる外部コンテンツの表 示 変換設定画面でのドラッグ＆ドロップ対応要素をご参照ください  ブラウザのプラグイン機能・ブラウザ固有の機 能を利用した表示を行うコンテンツ  FORM入力（GET/POST）によるページ移動 変換設定時は、疑似的にFORM送信を行うため、完全なデータと ならない可能性があります 変換設定時は、FORM入力による移動先ページでのプレビュー はできません  COOKIE等を使用してセッションを保持するコン テンツ 変換設定時には、ドメインやパスを指定したCOOKIEの場合、 COOKIEが有効になりません

1. brieartとは？

注意事項・制限事項など brieart変換設定画面では、変換設定や変換動作に おいて下記のような制限があります  多重ログインの禁止 ログインが行えるのは１アカウント１ユーザーとなります。同じユ ーザーが別々のブラウザーから同時に操作する事は出来ませ ん。  アカウントロック 1アカウントによるログインは１ユーザーのみとなります。その為 、「ログアウト」の手順を踏まずにブラウザーやタブを閉じたりし た場合、新たにログインを行ってもログイン出来ない場合がござ います。 （アカウントロックの解除はアカウントロック解除画面から行えま す） brieart管理画面では、操作や設定おいて 下記のような制限があります

 brieartで発行されるJavascriptタグを挿入した ページであっても、そのページに対する変換設 定が行われていない場合は、PCサイトがそのま ま表示されます  変換設定を行ったPCページに大幅な構成の変 更がある場合には、brieartでの変換設定を再 確認・再設定してください  INPUTタグなどのFORM入力要素の変換におい て、個人情報・機密情報などセキュリティリスク の伴う変換は動作の保障外とさせていただきま す  Javascript等のスクリプト制御によって表示内容 の変更・切り替え等、動的にページ構成が変わ るPCページでは、レイアウトが崩れたり、変換 結果が変換設定時とは異なる場合があります

1. brieartとは？

注意事項・制限事項など

ご注意ください

ドラッグ＆ドロップ対応要素 <form> _{（全23タイプ）} <input> <textarea> <select>

（single/multi） <a> <img>

全テキスト  brieart管理画面・変換設定画面はHTML5・CSS3 がご利用出来るブラウザー専用となっておりま す。その為、非対応ブラウザーでの操作やログ インが行えない場合がございます。 対応ブラウザーは

Chrome / Firefox / Safari (各最新バージョン) となっております。

2. brieart導入の流れ

brieartの管理画面にログイン 登録情報変更 メールアドレス パスワード ユーザー情報 ご契約情報 設定一覧 ドメイン（FQDN）設定 変換設定 変換設定画面でスマートフォンサイト作成 プレビュー確認 変換設定保存 プラン・オプション変更 ドメイン追加 クレジットカード変更 変換タグをウェブサイトに埋め込み

3. brieartの管理画面にログイン

① ログインID ご登録時に登録されたIDをご利用ください。 IDは登録時にメールにて発送されます。 ② パスワード ご登録時にメールにて発送されたものをご 利用ください。 ログイン後に変更することも可能です。 ③ ログインIDの保存 ログインIDを保存します。 次回ログイン時のログインID入力が省けま す。 ④ ログイン ログインID・パスワードを入力後に選択して ください。 ⑤ パスワードを忘れ てしまった ご登録アドレスへ新しいパスワードを再発 行いたします。 ⑥ アカウントがロック_{されてしまった} brieartでは原則として1アカウントにつき1ロ グインとなっております。 既にログインされている方が別途いる場合 、正規にログアウトせず管理画面より離脱 された場合にご利用ください。

1

2

3

4

5

6

1.設定

2.編集

3.埋め込み

ログイン画面からbrieart管理画面にログインします。

4. 登録情報

① メールアドレス 変更 ご登録されているメールアドレスを変更され る際にご利用ください。 メールアドレスの書式が間違っている場合 はエラーとなります、その際は再度ご確認 のうえ変更を行ってください。 ② パスワード変更 ご登録されているパスワードを変更される 際にご利用ください。 パスワードには以下の制限があります ・64文字以内 ・半角英数字 ③ ユーザー情報 ご登録されているユーザー情報を変更され る際にご利用ください。 ※印のある項目は入力必須項目ですので 未記入の場合はエラーとなります。

1

2

3

1.設定

2.編集

3.埋め込み

登録情報の確認・変更を行います。

5. ご契約情報

① ご契約情報 _ドメイン 現在、ご契約されているドメインのプランとオ プションになります。 また、プラン及びオプションの変更も可能で す。 「削除」されるとドメインで設定されている情 報は全て削除されますのでご注意ください。 ドメインについて「②契約ドメイン追加」で増 やす事が可能です。 ※プラン・オプションの変更は、変更が行わ れた時点で当月の課金対象となりますの でご注意ください。 ② 契約ドメイン 追加 変換対象となるドメインを追加することが出 来ます。 追加時にプランとオプションを選択できます。 ※ドメインの追加は、追加が行われえた時点 で当月の課金対象となりますのでご注意く ださい。 ③ ご契約情報 クレジットカード ご登録されているクレジットカード情報を変 更できます。

1

2

3

1.設定

2.編集

3.埋め込み

ご契約情報の確認・変更を行います。

6. 設定一覧

ドメイン（FQDN)の設定を行います。

1

2

① ドメイン（FQDN）に利用したいドメインを 入力します ② 「変更」ボタンで内容を確定させます。 ③ 「変換設定画面へ移動」ボタンを選択して スマートフォン作成画面へ移動します。 ① ドメイン（FQDN) 利用したいドメイン名を入力してください。 入力はFQDNとなりますのでhttp(s)://を除い た部分を入力してください。 例：http://brie.ingsystem.co.jp/の場合 brie.ingsystem.co.jp サイト名/コメント 必要に応じてサイト名やコメントをつける事 が出来ます。 例：公式サイト ブログ 等 ※入力は必須ではないので空でも大丈夫です ② 変更 ドメイン名やサイト名等を入力された内容を 確定させます。 ※ドメイン名に日本語や記号などが含まれている場 合はエラーメッセージが表示されます ③ 変換設定画面へ 移動 スマートフォン作成画面へ移動します

3

1.設定

2.編集

3.埋め込み

7. 変換設定

変換設定画面の説明

① PCサイト操作 PCサイト表示に対する各種操作を 行うことができます ② PCサイト タイトル 表示しているPCサイトのページタイ トルを表示します ③ コンポーネント _作成 スマートフォンレイアウトにコンポー_{ネントを追加することができます} ④ 保存 【ご契約者様のみ】 スマートフォンレイアウト保存し、サ イトに変換を適用します ⑤ 終了 変換設定を終了します ⑥ PCサイト表示 ご指定URLのPCサイトページを表示_します ⑦ スマートフォン レイアウト スマートフォン用レイアウトの編集・ 表示を行います ⑧ 選択要素 _構造表示 PCサイト表示／スマートフォンレイ アウトで選択中の要素の構造を表 示します ⑨ スマートフォン レイアウト操作 スマートフォンレイアウトに対する 各種操作を行うことができます

1

2

3

4 5

6

7

8

₉

以降の説明では上記⑦の例を元に同じものを作成するため の操作を説明いたします。

7. 変換設定

スマートフォンサイトの作成

1

2

3

1.設定

2.編集

3.埋め込み

① 移動させたい画像を選択し 「スマートフォンサイト」へそのまま ドラッグ＆ドロップします ② ドラッグ＆ドロップした画像を選択します ③ スマートフォンサイト下部にあるメニューから _{「設定」を選択します}

7. 変換設定

スマートフォンサイトの作成

1

₂

3

1.設定

2.編集

3.埋め込み

① 画像の項目にて、幅の項目にチェックを入れ_{100%と指定します。} ② 「適用」ボタンを選択します ③ 選択した画像は横幅100%で表示されるよに 変更されました。 画像設定メニューにて横幅以外にもマージン の設定や画像サイズの指定、また別URLの 画像を指定することも出来ます

7. 変換設定

スマートフォンサイトの作成

1

2

1.設定

2.編集

3.埋め込み

① 移動させたい画像を選択し 「スマートフォンサイト」へそのまま ドラッグ＆ドロップします ② 画像がドロップされます

7. 変換設定

スマートフォンサイトの作成

1

2

3

1.設定

2.編集

3.埋め込み

① 移動させたい画像を選択し 「スマートフォンサイト」へそのまま ドラッグ＆ドロップします ② 複数回クリックをして全体を選択した 状態にします ③ 複数選択した状態でスマートフォンサイトへ _{ドラッグ＆ドロップします}

7. 変換設定

スマートフォンサイトの作成

2

1.設定

2.編集

3.埋め込み

① 移動させたい画像を選択し 「スマートフォンサイト」へそのまま ドラッグ＆ドロップします ② 不要な要素を選択します ③ スマートフォンサイト下部にある「削除」を 選択します 「トップ」と「製品概要」以外の要素を上記の ②と③を繰り返して削除します

1

7. 変換設定

スマートフォンサイトの作成

1

2

3

4

5

1.設定

2.編集

3.埋め込み

① 必要なものだけを残した状態です。 また、該当する部分の設定を操作することで リンク先を変更する事も可能です。（②参照） ② 該当する要素を選択します ③ 「設定」を選択します ④ 「リンクURL指定」に変更したURLを入力します ⑤ 「適用」を選択し、変更を行います

7. 変換設定

スマートフォンサイトの作成

1

2

3

4

1.設定

2.編集

3.埋め込み

① スマートフォンサイト上部にある「開閉」を 選択します ② 開閉機能をもった要素がスマートフォンサイト へ追加されます ③ 機種を選択し、スマートフォンサイトにある 「ここにタイトル要素をドロップ」に ドラッグ&ドロップします

7. 変換設定

スマートフォンサイトの作成

1

2

3

1.設定

2.編集

3.埋め込み

① 移動させたい画像を選択し 「スマートフォンサイト」へそのまま ドラッグ＆ドロップします ② 他に要素がある場合は、入れ替えることも 可能です ③ PCサイト操作にて「CSS OFF」を選択します

7. 変換設定

スマートフォンサイトの作成

1

2

3

1.設定

2.編集

3.埋め込み

① CSSをOFFにすることにより、CSS要素で見え ない状態であったプルダウンメニューなどが 全て表示されます ② 複数回クリックをしてプルダウン全体を 選択した状態にします ③ 複数選択した状態でスマートフォンサイトの 「ここに要素をドロップ（ここがコンテンツ 部分です。タイトルのクリックで開閉します）」 へドラッグ＆ドロップします

7. 変換設定

スマートフォンサイトの作成

1

1.設定

2.編集

3.埋め込み

① 開閉内のリンクなどが作成されます 各リンクの文言やリンク先などはスマート フォンサイト下部にある設定から変更を行え ます。 詳細については設定マニュアルをご確認く ださい

7. 変換設定

スマートフォンサイトの作成

1

2

1.設定

2.編集

3.埋め込み

① 新サービスをプレリリース部分を選択します ② 選択した状態でスマートフォンサイト側へ ドラッグ&ドロップします

7. 変換設定

スマートフォンサイトの作成

1

1.設定

2.編集

3.埋め込み

2

3

① ドラッグ＆ドロップしたものが各要素として スマートフォンサイト側に表示されます ② 不要なものを選択します ③ スマートフォンサイト下部にある「削除」を 選択して不要な要素を削除します ②と③を繰り返して必要なものだけ残します

7. 変換設定

スマートフォンサイトの作成

1

1.設定

2.編集

3.埋め込み

2

3

4

① 必要な要素だけ残した状態にします ② 日付部分を選択します ③ ドラッグ&ドロップで最下段にある _{「brieart（ブリエアート）」にドロップします} ④ 挿入部分が表示されるので「上に挿入」 を選択します ※ドロップする場所によって挿入の表示が 左右だけでなく上下になる場合があります 「新サービスをプレリリース」も同様に ドラッグ&ドロップを行います。

7. 変換設定

スマートフォンサイトの作成

1

1.設定

2.編集

3.埋め込み

2

3

① 必要な要素をドラッグ&ドロップした状態です ② 「ここにリスト要素をドロップ」をを削除します ③ 不要な要素を削除した状態です

7. 変換設定

スマートフォンサイトの作成

1

1.設定

2.編集

3.埋め込み

2

3

4

5

① 「新サービスをプレリリース」を選択します ② 「設定」を選択し設定を表示します ③ テキスト内の「色」のチェックボックスに チェックを入れ、④を選択し色パレットを表示 させます パレット内で色を指定し設定内の「適用」を 選択することで⑤のように文字色を変更する ことが出来ます

7. 変換設定

スマートフォンサイトの作成

1

1.設定

2.編集

3.埋め込み

2

3

4

① PCサイト側の画像を選択します この時の画像はどの画像でも構いません ② スマートフォンサイトにある 「brieart（ブリアエート）」部分に ドラッグ&ドロップします ③ ドロップ時に挿入メニューが表示されますの _{で「下に挿入」を選択します} ④ スマートフォンサイトのリンク部分に画像が _{挿入された状態です}

7. 変換設定

スマートフォンサイトの作成

1

1.設定

2.編集

3.埋め込み

2

4

3

4

① 挿入した画像を選択します ② スマートフォンサイト下部にある「設定」を 選択します ③ 画像URL指定部分に、表示させたい画像の URLを記入することで表示画像を変更します ※ここで指定する画像はアクセス制限等が 無ければ外部のURLのものであっても 表示します ④ 「適用」を選択して変更を行います

7. 変換設定

プレビュー確認

1.設定

2.編集

3.埋め込み

1

2

① スマートフォンサイト下部の「プレビュー」を 選択します ② 編集内容を実際に確認が行えるアドレスが 表示されます 編集者の確認を行いたい方法にて確認を 行ってください ※プレビューを終了するとアドレスには アクセスが行えなくなりますのでご注意 ください

7. 変換設定

変換設定保存

1.設定

2.編集

3.埋め込み

1

2

① 「保存」を選択します ② 確認のためのポップアップが表示されます ので、問題なければ「OK」を選択し、編集を 保存してください ※保存されずに終了した場合は、内容は 破棄されますのでご注意ください

8. 変換タグの埋め込み

変換タグをウェブサイトに埋め込みます

1

1.設定

2.編集

3.埋め込み

2

① 変換タグを確認し、コピーしてください ② ウェブサイト内のheadタグ内にコピーした変 換タグを挿入（記述）してください 挿入（記述）後のアクセスよりスマートフォン に対してはプレビューで確認した画面が表示 されます