初期導入ガイド Ver..0 更新日 :0/9/7 株式会社アイ エヌ ジーシステム Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
目次. brieart とは? brieart とは? 注意事項 制限事項など. brieart 導入の流れ 6. brieart の管理画面にログイン 7. 登録情報 8 登録情報の確認 変更 8 5. ご契約情報 9 ご契約情報の確認 変更 9 6. 設定一覧 0 ドメイン (FQDN) の設定 0 7. 変換設定 変換設定画面の説明プレビュー確認変換設定保存 9 0 8. 変換タグの埋め込み Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. brieart とは? brieart とは 既存の PC サイトを 特別な知識や高額なツールなどがなくても 誰でも手軽にスマートフォンサイトへ変換できる WEB サービスです もうスマートフォンサイトをつくるために操作が複雑で高価な CMS などのツールを使う必要はありません brieart( ブリエアート ) を使えば面倒なツールのインストール作業などは必要なく ブラウザさえあれば PC サイトのパーツをマウスでドラッグ & ドロップ お好みのレイアウトに並べていくだけで誰でも手軽に まるで絵を描くようにスマートフォンサイトができあがります Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. brieart とは? 注意事項 制限事項など brieart 管理画面では 操作や設定おいて下記のような制限があります 多重ログインの禁止ログインが行えるのは アカウント ユーザーとなります 同じユーザーが別々のブラウザーから同時に操作する事は出来ません アカウントロック アカウントによるログインは ユーザーのみとなります その為 ログアウト の手順を踏まずにブラウザーやタブを閉じたりした場合 新たにログインを行ってもログイン出来ない場合がございます ( アカウントロックの解除はアカウントロック解除画面から行えます ) brieart 変換設定画面では 変換設定や変換動作において下記のような制限があります Javascript 等のスクリプト動作変換設定時には スクリプトは削除した状態で設定を行います Javascript 等のスクリプト制御による表示の変更 切り替え等 動的ページ構成スクリプトによって表示の変更 ( レイアウト含む ) 切り替え等を行っているサイトでは レイアウトが崩れたり 表示内容が意図した内容にならなくなる場合があります Flash や動画等の OBJECT タグ EMBED タグ VIDEO タグ IFRAM による外部コンテンツの表示変換設定画面でのドラッグ & ドロップ対応要素をご参照ください ブラウザのプラグイン機能 ブラウザ固有の機能を利用した表示を行うコンテンツ FORM 入力 (GET/POST) によるページ移動変換設定時は 疑似的に FORM 送信を行うため 完全なデータとならない可能性があります変換設定時は FORM 入力による移動先ページでのプレビューはできません COOKIE 等を使用してセッションを保持するコンテンツ変換設定時には ドメインやパスを指定した COOKIE の場合 COOKIE が有効になりません Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. brieart とは? 注意事項 制限事項など ご注意ください ご注意ください brieart 管理画面 変換設定画面は HTML5 CSS がご利用出来るブラウザー専用となっております その為 非対応ブラウザーでの操作やログインが行えない場合がございます 対応ブラウザーは Chrome / Firefox / Safari ( 各最新バージョン ) となっております brieartで発行されるjavascriptタグを挿入したページであっても そのページに対する変換設定が行われていない場合は PCサイトがそのまま表示されます変換設定を行ったPCページに大幅な構成の変更がある場合には brieartでの変換設定を再確認 再設定してください INPUTタグなどのFORM 入力要素の変換において 個人情報 機密情報などセキュリティリスクの伴う変換は動作の保障外とさせていただきます Javascript 等のスクリプト制御によって表示内容の変更 切り替え等 動的にページ構成が変わるPCページでは レイアウトが崩れたり 変換結果が変換設定時とは異なる場合があります ドラッグ & ドロップ対応要素 <form> <select> (single/multi) <input> ( 全 タイプ ) <a> <textarea> <img> Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 全テキスト 5 5
. brieart 導入の流れ brieart の管理画面にログイン 登録情報変更 ご契約情報 メールアドレスパスワードユーザー情報 プラン オプション変更ドメイン追加クレジットカード変更 設定一覧 ドメイン (FQDN) 設定 変換設定 変換設定画面でスマートフォンサイト作成 プレビュー確認 変換設定保存 変換タグをウェブサイトに埋め込み Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 6 6
. brieart の管理画面にログイン ログイン画面から brieart 管理画面にログインします. 設定. 編集. 埋め込み ログイン ID ご登録時に登録された ID をご利用ください ID は登録時にメールにて発送されます パスワード ご登録時にメールにて発送されたものをご利用ください ログイン後に変更することも可能です 5 5 ログイン ID の保存 ログイン パスワードを忘れてしまった ログイン ID を保存します 次回ログイン時のログイン ID 入力が省けます ログイン ID パスワードを入力後に選択してください ご登録アドレスへ新しいパスワードを再発行いたします 6 6 アカウントがロックされてしまった brieart では原則として アカウントにつき ログインとなっております 既にログインされている方が別途いる場合 正規にログアウトせず管理画面より離脱された場合にご利用ください Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 7
. 登録情報 登録情報の確認 変更を行います. 設定. 編集. 埋め込み メールアドレス変更 ご登録されているメールアドレスを変更される際にご利用ください メールアドレスの書式が間違っている場合はエラーとなります その際は再度ご確認のうえ変更を行ってください パスワード変更 ご登録されているパスワードを変更される際にご利用ください パスワードには以下の制限があります 6 文字以内 半角英数字 ユーザー情報 ご登録されているユーザー情報を変更される際にご利用ください 印のある項目は入力必須項目ですので未記入の場合はエラーとなります Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 8
5. ご契約情報 ご契約情報の確認 変更を行います. 設定. 編集. 埋め込み ご契約情報ドメイン 現在 ご契約されているドメインのプランとオプションになります また プラン及びオプションの変更も可能です 削除 されるとドメインで設定されている情報は全て削除されますのでご注意ください ドメインについて 契約ドメイン追加 で増やす事が可能です プラン オプションの変更は 変更が行われた時点で当月の課金対象となりますのでご注意ください 契約ドメイン追加 変換対象となるドメインを追加することが出来ます 追加時にプランとオプションを選択できます ドメインの追加は 追加が行われえた時点で当月の課金対象となりますのでご注意ください ご契約情報クレジットカード ご登録されているクレジットカード情報を変更できます Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 9
6. 設定一覧 ドメイン (FQDN) の設定を行います. 設定. 編集. 埋め込み ドメイン (FQDN) に利用したいドメインを入力します 変更 ボタンで内容を確定させます 変換設定画面へ移動 ボタンを選択してスマートフォン作成画面へ移動します ドメイン (FQDN) サイト名 / コメント 利用したいドメイン名を入力してください 入力は FQDN となりますので http(s):// を除いた部分を入力してください 例 :http://brie.ingsystem.co.jp/ の場合 brie.ingsystem.co.jp 必要に応じてサイト名やコメントをつける事が出来ます 例 : 公式サイトブログ等 入力は必須ではないので空でも大丈夫です 変更 ドメイン名やサイト名等を入力された内容を確定させます ドメイン名に日本語や記号などが含まれている場合はエラーメッセージが表示されます 変換設定画面へ移動 スマートフォン作成画面へ移動します Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 0
変換設定画面の説明 6 5 PC サイト操作 PC サイトタイトル コンポーネント作成 PC サイト表示に対する各種操作を行うことができます 表示している PC サイトのページタイトルを表示します スマートフォンレイアウトにコンポーネントを追加することができます 7 保存 ご契約者様のみ スマートフォンレイアウト保存し サイトに変換を適用します 5 終了変換設定を終了します 6 PC サイト表示 ご指定 URL の PC サイトページを表示します 8 9 7 スマートフォンレイアウト スマートフォン用レイアウトの編集 表示を行います 以降の説明では上記 7 の例を元に同じものを作成するための操作を説明いたします 8 選択要素構造表示 PC サイト表示 / スマートフォンレイアウトで選択中の要素の構造を表示します 9 スマートフォンレイアウト操作 スマートフォンレイアウトに対する各種操作を行うことができます Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. 設定. 編集. 埋め込み 移動させたい画像を選択し スマートフォンサイト へそのまま ドラッグ & ドロップします ドラッグ & ドロップした画像を選択します スマートフォンサイト下部にあるメニューから 設定 を選択します Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. 設定. 編集. 埋め込み 画像の項目にて 幅の項目にチェックを入れ 00% と指定します 適用 ボタンを選択します 選択した画像は横幅 00% で表示されるよに 変更されました 画像設定メニューにて横幅以外にもマージン の設定や画像サイズの指定 また別 URL の 画像を指定することも出来ます Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. 設定. 編集. 埋め込み 移動させたい画像を選択し スマートフォンサイト へそのまま ドラッグ & ドロップします 画像がドロップされます Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. 設定. 編集. 埋め込み 移動させたい画像を選択し スマートフォンサイト へそのまま ドラッグ & ドロップします 複数回クリックをして全体を選択した 状態にします 複数選択した状態でスマートフォンサイトへドラッグ & ドロップします Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 5
. 設定. 編集. 埋め込み 移動させたい画像を選択し スマートフォンサイト へそのまま ドラッグ & ドロップします 不要な要素を選択します スマートフォンサイト下部にある 削除 を 選択します トップ と 製品概要 以外の要素を上記の と を繰り返して削除します Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 6
. 設定. 編集. 埋め込み 必要なものだけを残した状態です また 該当する部分の設定を操作することでリンク先を変更する事も可能です ( 参照 ) 該当する要素を選択します 設定 を選択します リンク URL 指定 に変更した URL を入力します 5 適用 を選択し 変更を行います 5 Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 7
. 設定. 編集. 埋め込み スマートフォンサイト上部にある 開閉 を選択します開閉機能をもった要素がスマートフォンサイトへ追加されます機種を選択し スマートフォンサイトにある ここにタイトル要素をドロップ にドラッグ & ドロップします Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 8
. 設定. 編集. 埋め込み 移動させたい画像を選択し スマートフォンサイト へそのままドラッグ & ドロップします他に要素がある場合は 入れ替えることも可能です PCサイト操作にて CSS OFF を選択します Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 9
. 設定. 編集. 埋め込み CSS を OFF にすることにより CSS 要素で見えない状態であったプルダウンメニューなどが 全て表示されます 複数回クリックをしてプルダウン全体を 選択した状態にします 複数選択した状態でスマートフォンサイトの ここに要素をドロップ ( ここがコンテンツ 部分です タイトルのクリックで開閉します ) へドラッグ & ドロップします Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 0
. 設定. 編集. 埋め込み 開閉内のリンクなどが作成されます 各リンクの文言やリンク先などはスマート フォンサイト下部にある設定から変更を行え ます 詳細については設定マニュアルをご確認く ださい Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. 設定. 編集. 埋め込み 新サービスをプレリリース部分を選択します 選択した状態でスマートフォンサイト側へドラッグ & ドロップします Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. 設定. 編集. 埋め込み ドラッグ & ドロップしたものが各要素としてスマートフォンサイト側に表示されます 不要なものを選択します スマートフォンサイト下部にある 削除 を 選択して不要な要素を削除します と を繰り返して必要なものだけ残します Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. 設定. 編集. 埋め込み 必要な要素だけ残した状態にします 日付部分を選択します ドラッグ & ドロップで最下段にある brieart( ブリエアート ) にドロップします挿入部分が表示されるので 上に挿入 を選択します ドロップする場所によって挿入の表示が左右だけでなく上下になる場合があります 新サービスをプレリリース も同様に ドラッグ & ドロップを行います Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.
. 設定. 編集. 埋め込み 必要な要素をドラッグ & ドロップした状態です ここにリスト要素をドロップ をを削除します 不要な要素を削除した状態です Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 5
. 設定. 編集. 埋め込み 新サービスをプレリリース を選択します 設定 を選択し設定を表示します テキスト内の 色 のチェックボックスにチェックを入れ を選択し色パレットを表示 させます パレット内で色を指定し設定内の 適用 を選択することで5のように文字色を変更する ことが出来ます 5 Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 6
. 設定. 編集. 埋め込み PC サイト側の画像を選択しますこの時の画像はどの画像でも構いません スマートフォンサイトにある brieart( ブリアエート ) 部分に ドラッグ & ドロップします ドロップ時に挿入メニューが表示されますので 下に挿入 を選択します スマートフォンサイトのリンク部分に画像が挿入された状態です Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 7
. 設定. 編集. 埋め込み 挿入した画像を選択しますスマートフォンサイト下部にある 設定 を選択します画像 URL 指定部分に 表示させたい画像の URLを記入することで表示画像を変更します ここで指定する画像はアクセス制限等が無ければ外部のURLのものであっても表示します 適用 を選択して変更を行います Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 8
プレビュー確認. 設定. 編集. 埋め込み スマートフォンサイト下部の プレビュー を選択します編集内容を実際に確認が行えるアドレスが表示されます 編集者の確認を行いたい方法にて確認を 行ってください プレビューを終了するとアドレスにはアクセスが行えなくなりますのでご注意 ください Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 9
変換設定保存. 設定. 編集. 埋め込み 保存 を選択します確認のためのポップアップが表示されますので 問題なければ OK を選択し 編集を保存してください 保存されずに終了した場合は 内容は 破棄されますのでご注意ください Copyright (C) 0 ING System Co., Ltd. All Rights Reserved. 0
8. 変換タグの埋め込み 変換タグをウェブサイトに埋め込みます. 設定. 編集. 埋め込み 変換タグを確認し コピーしてください ウェブサイト内の head タグ内にコピーした変換タグを挿入 ( 記述 ) してください 挿入 ( 記述 ) 後のアクセスよりスマートフォンに対してはプレビューで確認した画面が表示されます Copyright (C) 0 ING System Co., Ltd. All Rights Reserved.