brieart変換設定画面マニュアル

目次 1. brieartとは? 3 ラベル 26 リスト 29 brieartとは 3 開閉 ( アコーディオン ) 32 注意事項制限事項など 4 ボタン 35 パネル 38 2. 変換設定画面の操作 6 2-1. 画面説明リファレンス 2-2. 基本操作 PC 要素の選択スマートフォン要素の選択ドラッグ & ドロップ操作 6 7 8 8 9 10 2-5. 配置要素の削除全消去要素を削除 2-6. プレビュープレビューの開始プレビュー 41 41 42 43 43 44 2-3. コンポーネントの作成ラベルリスト開閉 ( アコーディオン ) ボタンパネル 2-4. プロパティの設定ページ全体の設定テキスト要素の設定画像要素の設定 12 12 13 14 15 16 17 17 20 23 2-7. 便利な機能 PC ページを再読込み PC ページの CSS を解除 PC ページをリンク移動スマートフォンサイト要素の複製 2-8. 保存と終了変換設定の保存変換設定の終了 45 45 46 47 48 49 49 50 Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 2

1. brieart とは? brieart とは既存の PC サイトを特別な知識や高額なツールなどがなくても誰でも手軽にスマートフォンサイトへ変換できる WEB サービスですもうスマートフォンサイトをつくるために操作が複雑で高価な CMS などのツールを使う必要はありません brieart( ブリエアート ) を使えば面倒なツールのインストール作業などは必要なくブラウザさえあれば PC サイトのパーツをマウスでドラッグ & ドロップお好みのレイアウトに並べていくだけで誰でも手軽にまるで絵を描くようにスマートフォンサイトができあがります Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 3

1. brieart とは? 注意事項制限事項など brieart では変換設定や変換動作において下記のような制限があります Javascript 等のスクリプト動作変換設定時にはスクリプトは削除した状態で設定を行います Javascript 等のスクリプト制御による表示の変更切り替え等動的ページ構成スクリプトによって表示の変更 ( レイアウト含む ) 切り替え等を行っているサイトではレイアウトが崩れたり表示内容が意図した内容にならなくなる場合があります Flash や動画等の OBJECT タグ EMBED タグ VIDEO タグ IFRAM による外部コンテンツの表示変換設定画面でのドラッグ & ドロップ対応要素をご参照くださいブラウザのプラグイン機能ブラウザ固有の機能を利用した表示を行うコンテンツ FORM 入力 (GET/POST) によるページ移動変換設定時は疑似的に FORM 送信を行うため完全なデータとならない可能性があります変換設定時は FORM 入力による移動先ページでのプレビューはできません COOKIE 等を使用してセッションを保持するコンテンツ変換設定時にはドメインやパスを指定した COOKIE の場合 COOKIE が有効になりませんご注意ください brieartで発行されるjavascriptタグを挿入したページであってもそのページに対する変換設定が行われていない場合は PCサイトがそのまま表示されます変換設定を行ったPCページに大幅な構成の変更がある場合には brieartでの変換設定を再確認再設定してください INPUTタグなどのFORM 入力要素の変換において個人情報機密情報などセキュリティリスクの伴う変換は動作の保障外とさせていただきます Javascript 等のスクリプト制御によって表示内容の変更切り替え等動的にページ構成が変わるPCページではレイアウトが崩れたり変換結果が変換設定時とは異なる場合があります <form> <select> (single/multi) ドラッグ & ドロップ対応要素 <input> ( 全 23 タイプ ) <a> <textarea> <img> Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 全テキスト 4 4

1. brieart とは? 注意事項制限事項などご注意ください brieart 変換設定画面は HTML5 CSS3 がご利用出来るブラウザー専用となっておりますその為非対応ブラウザーでの操作やログインが行えない場合がございます対応ブラウザーは Chrome / Firefox / Safari ( 各最新バージョン ) となっております Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 5 5

2-1. 画面説明 1 2 3 6 4 5 1 2 3 PC サイト操作 PC サイトタイトルコンポーネント作成 PC サイト表示に対する各種操作を行うことができます表示している PC サイトのページタイトルを表示しますスマートフォンレイアウトにコンポーネントを追加することができます 7 4 保存ご契約者様のみスマートフォンレイアウト保存しサイトに変換を適用します 5 終了変換設定を終了します 6 PC サイト表示ご指定 URL の PC サイトページを表示します 8 9 7 スマートフォンレイアウトスマートフォン用レイアウトの編集表示を行います brieart ではマウス操作によるドラッグ & ドロップとプロパティの設定だけで手軽にスマートフォンサイトを構築することができます 8 9 選択要素構造表示スマートフォンレイアウト操作 PC サイト表示 / スマートフォンレイアウトで選択中の要素の構造を表示しますスマートフォンレイアウトに対する各種操作を行うことができます Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 6

2-1. リファレンス 1 1 2 ラベル + 画像 D&D(URL 指定 ) + テキスト編集画像 D&D + 設定 2.2 基本操作ドラッグ & ドロップ操作 2.3 コンポーネント作成ラベル 2.4 プロパティの設定テキスト要素の設定 2.2 基本操作ドラッグ & ドロップ操作 2.4 プロパティの設定画像要素の設定 2 3 画像 D&D 2.2 基本操作ドラッグ & ドロップ 3 4 5 リスト + 画像 D&D 開閉 + 画像 D&D 2.2 基本操作ドラッグ & ドロップ 2.3 コンポーネントの作成リスト 2.2 基本操作ドラッグ & ドロップ 2.3 コンポーネントの作成開閉 4 6 リスト + 画像 D&D 2.2 基本操作ドラッグ & ドロップ 2.3 コンポーネントの作成リスト 5 6 左図のようなスマートフォンサイトを作成するにあたって brieart では上記のような機能を使用しています左図のようなスマートフォンサイトを構築される際の目安としてください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 7

2-2. 基本操作 PC 要素の選択 PC 要素の選択 [1] PC サイト表示内でマウスカーソルを移動するとマウスカーソルの下にある要素の色が変わり選択可能な範囲が色付け ( 緑 ) されます [3] より大きな範囲を選択するには更に複数回クリックしてみてください ( クリックの度に選択範囲が大きくなります ) [2] スマートフォン用に配置したい要素が色付け ( 緑 ) された状態でマウスをクリックすると要素が選択されて色付け ( 赤 ) されます Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 8

2-2. 基本操作スマートフォン要素の選択スマートフォン要素の選択 [1] スマートフォンサイト表示内でマウスカーソルを移動するとマウスカーソルの下にある要素の色が変わり選択可能な範囲が色付け ( 緑 ) されます [3] より大きな範囲を選択するには更に複数回クリックしてみてください ( クリックの度に選択範囲が大きくなります ) [2] スマートフォンサイトに配置した要素が色付け ( 緑 ) された状態でマウスをクリックすると要素が選択されて色付け ( 赤 ) されます Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 9

2-2. 基本操作ドラッグ & ドロップ操作 PC 要素のドラッグ & ドロップ [1] PC サイト表示内でマウスカーソルを移動するとマウスカーソルの下にある要素の色が変わり選択可能な範囲が色付け ( 緑 ) されます [3] 選択した要素をそのままドラッグしてスマートフォンレイアウトの上にドロップします [2] スマートフォン用に配置したい要素が色付け ( 緑 ) された状態でマウスをクリックすると要素が選択されて色付け ( 赤 ) されます [4] PC サイトの要素が自動的にスマートフォン用のレイアウトで配置されます Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 10

2-2. 基本操作ドラッグ & ドロップ操作 PC 要素の配置 [1] PC サイト内の要素を同じラインもしくは上下関係に配置したい場合配置を行いたい [1] 要素に重ねることで [2] ガイドが表示されます要素の重ね方によって左右への挿入や上下への挿入入れ替えと言った柔軟な対応が可能です [1] [2] [3] ドロップした要素の配置を中止する場合はガイド右上の [3]cancel をクリックしますまた要素の配置は何も無い場所だけではなくラベルリスト開閉ボタンパネルの内側にも同様に行うことが可能です各コンポーネントの操作についてはコンポーネントの作成もしくはプロパティの設定をご参照ください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 11

2-3. コンポーネントの作成ラベルラベル作成 [1] スマートフォンサイト表示上部にあるラベルを選択ラベルをドラッグ & ドロップすることで任意の場所に配置することもできます [2] スマートフォンサイト内に空のラベル要素が配置されますラベルには画像 ( リンクなし ) テキスト ( リンクなし ) を配置する事ができます配置した要素の設定等については 2-4. プロパティの設定ラベルの項をご参照ください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 12

2-3. コンポーネントの作成リスト 2. 変換設定画面の操作リスト作成 [1] スマートフォンサイト表示上部にあるリストを選択リストをドラッグ & ドロップすることで任意の場所に配置することもできます [2] スマートフォンサイト内に空のリスト要素が配置されますリストには画像 ( リンクあり / なし ) テキスト ( リンクあり / なし ) を配置する事ができます配置した要素の設定等については 2-4. プロパティの設定リストの項をご参照ください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 13

2-3. コンポーネントの作成開閉 ( アコーディオン ) 開閉 ( アコーディオン ) 作成 [1] スマートフォンサイト表示上部にあるリストを選択リストをドラッグ & ドロップすることで任意の場所に配置することもできます [2] スマートフォンサイト内に空の開閉要素が配置されます開閉 ( ヘッダ部 ) には画像 ( リンクなし ) テキスト ( リンクなし ) 開閉 ( コンテンツ部 ) には画像 ( リンクあり / なし ) テキスト ( リンクあり / なし ) コンポーネントを配置する事ができます配置した要素の設定等については 2-4. プロパティの設定開閉の項をご参照ください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 14

2-3. コンポーネントの作成ボタンボタン作成 [1] スマートフォンサイト表示上部にあるボタンを選択ボタンをドラッグ & ドロップすることで任意の場所に配置することもできます [2] スマートフォンサイト内に空のボタン要素が配置されますボタンには画像 ( リンクあり / なし ) テキスト ( リンクあり / なし ) を配置する事ができます配置した要素の設定等については 2-4. プロパティの設定ボタンの項をご参照ください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 15

2-3. コンポーネントの作成パネルパネル作成 [1] スマートフォンサイト表示上部にあるパネルを選択パネルをドラッグ & ドロップすることで任意の場所に配置することもできます [2] スマートフォンサイト内に空のパネル要素が配置されますパネルには画像 ( リンクあり / なし ) テキスト ( リンクあり / なし ) コンポーネントを配置する事ができます配置した要素の設定等については 2-4. プロパティの設定パネルの項をご参照ください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 16

2-4. プロパティの設定ページ全体の設定ページ全体の設定 [1] [2] [3] [1] ページ全体のテーマを設定しますデフォルトで 5 種類ある中から選択してください a: ブラック / b: ブルー / c: ホワイト / d: シルバー / e: イエロー [2] ページ全体の配置を設定します画像やテキストなどのデフォルトの位置が指定できます指定が無い場合は左寄せとなります全体で指定せず個別に指定する事も可能です [3] ページ全体のテキストを設定しますスマートフォンサイトに表示する表示テキストを一括指定できます全体で指定せずに個別に指定する事も可能です Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 18

2-4. プロパティの設定ページ全体の設定ページ全体の設定 [4] [4] ページ全体の背景を設定します背景画像を設置している URL を入力後に以下の設定を行ってくださいサイズ : 幅高さをそれぞれ px/% で指定が可能です位置 : 設置する位置をそれぞれ px/% で指定が可能です繰り返し : 背景画像を単体もしくは反復を指定して表示が可能です Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 19

2-4. プロパティの設定テキスト要素の設定テキスト要素の設定 [1] [2] [2] [1] テキストの左右マージンを指定できます左右それぞれ px /em /% での指定が可能です [2] テキストのサイズ色装飾を指定できますテキスト設定内の [3] 文字列指定を任意の文字列に変更し適用ボタンを選択することで表示文字列を変更できます上記ではシステム構成例をカスタマーサポートに変更 [3] テキスト全体で設定することで中央表示なども可能ですテキスト全体の指定については 2.2 基本操作スマートフォン要素の選択を参照してください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 21

2-4. プロパティの設定画像要素の設定画像要素の設定 [1] [2] [3] [4] [1] 画像の左右マージンを指定できます左右それぞれ px /em /% での指定が可能です [2] 画像の上下マージンを指定できます左右それぞれ px /em /% での指定が可能です [3] 画像の幅高さを指定できます px / em / % での指定が可能です [4] ボーダーで画像枠線を付加することが可能です枠線の色太さを指定できます Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 24

2-4. プロパティの設定ラベルラベル設定 [1] [2] [3] [4] [1] ラベルのテーマを設定しますデフォルトで 5 種類ある中から選択してください a: ブラック / b: ブルー / c: ホワイト / d: シルバー / e: イエロー [2] ラベルの上下マージンを指定できます上下それぞれ px /em /% での指定が可能です [3] ラベルの配置を指定できます左寄せ / 中央 / 右寄せでの指定が可能です指定が無い場合はページ全体の設定で指定された配置になります [4] ラベルのテキストを設定しますドロップされたテキスト要素の設定を指定できますテキスト内容自体の編集は 2.4 プロパティの設定テキスト要素の設定を参照してください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 27

2-4. プロパティの設定ラベルラベル設定 [5] [5] ラベルの背景を設定します背景画像を設置している URL を入力後に以下の設定を行ってくださいサイズ : 幅高さをそれぞれ px/% で指定が可能です位置 : 設置する位置をそれぞれ px/% で指定が可能です繰り返し : 背景画像を単体もしくは反復を指定して表示が可能です Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 28

2-4. プロパティの設定リスト 2. 変換設定画面の操作リスト設定 [1] [2] [3] [1] リストのテーマを設定しますデフォルトで 5 種類ある中から選択してください a: ブラック / b: ブルー / c: ホワイト / d: シルバー / e: イエロー [2] リストの配置を指定できます左寄せ / 中央 / 右寄せでの指定が可能です指定が無い場合は左寄せとなります [3] リストのテキストを設定しますドロップされたテキスト要素の設定を指定できますドロップされたテキスト内容自体の編集は 2.4 プロパティの設定テキスト要素の設定を参照してください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 30

2-4. プロパティの設定リスト 2. 変換設定画面の操作リスト設定 [4] [4] リストの背景を設定します背景画像を設置している URL を入力後に以下の設定を行ってくださいサイズ : 幅高さをそれぞれ px/% で指定が可能です位置 : 設置する位置をそれぞれ px/% で指定が可能です繰り返し : 背景画像を単体もしくは反復を指定して表示が可能です Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 31

2-4. プロパティの設定開閉 ( アコーディオン ) 開閉 ( アコーディオン ) 設定 [1] [2] [3] [4] [1] 開閉のテーマを設定しますデフォルトで 5 種類ある中から選択してください a: ブラック / b: ブルー / c: ホワイト / d: シルバー / e: イエロー [2] 開閉内のコンテンツ部分 ( 上記画像新機能 ~ その他の機能 ) のテーマを設定しますデフォルトで 5 種類ある中から選択してください [3] 開閉の配置を指定できます左寄せ / 中央 / 右寄せでの指定が可能です指定が無い場合はページ全体の設定で指定された配置になります [4] 開閉内のテキストを設定しますドロップされたテキスト要素の設定を指定できますドロップされたテキスト内容自体の編集は 2.4 プロパティの設定テキスト要素の設定を参照してください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 33

2-4. プロパティの設定開閉 ( アコーディオン ) 開閉 ( アコーディオン ) 設定 [5] [5] 開閉 ( アコーディオン ) の背景を設定します背景画像を設置している URL を入力後に以下の設定を行ってくださいサイズ : 幅高さをそれぞれ px/% で指定が可能です位置 : 設置する位置をそれぞれ px/% で指定が可能です繰り返し : 背景画像を単体もしくは反復を指定して表示が可能です Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 34

2-4. プロパティの設定ボタンボタン設定 [1] [2] [3] [1] ボタンのテーマを設定しますデフォルトで 5 種類ある中から選択してください a: ブラック / b: ブルー / c: ホワイト / d: シルバー / e: イエロー [2] ボタンの配置を指定できます左寄せ / 中央 / 右寄せでの指定が可能です指定が無い場合は中央となります [3] ボタン内のテキストを設定しますドロップされたテキスト要素の設定を指定できますテキスト内容自体の編集は 2.4 プロパティの設定テキスト要素の設定を参照してください [4] ボタン内の画像及びボタン押下時のリンク先を設定します押下時のリンク URL 指定にリンクを指定することで遷移先を指定できます Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 36

2-4. プロパティの設定ボタンボタン設定 [4] [5] [4] ボタン内の画像及びボタン押下時のリンク先を設定します押下時のリンク URL 指定にリンクを指定することで遷移先を指定できます [5] ボタンの背景を設定します背景画像を設置している URL を入力後に以下の設定を行ってくださいサイズ : 幅高さをそれぞれ px/% で指定が可能です位置 : 設置する位置をそれぞれ px/% で指定が可能です繰り返し : 背景画像を単体もしくは反復を指定して表示が可能です Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 37

2-4. プロパティの設定パネルパネル設定 [1] [2] [3] [4] [1] パネルのテーマを設定しますデフォルトで 5 種類ある中から選択してください a: ブラック / b: ブルー / c: ホワイト / d: シルバー / e: イエロー [2] パネルの上下マージンを指定できます上下それぞれ px /em /% での指定が可能です [3] パネル内の配置を指定できます左寄せ / 中央 / 右寄せでの指定が可能です指定が無い場合はページ全体の設定で指定された配置になります [4] パネル内のテキストを設定しますドロップされたテキスト要素の設定を指定できますドロップされたテキスト内容自体の編集は 2.4 プロパティの設定テキスト要素の設定を参照してください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 39

2-4. プロパティの設定パネルパネル設定 [5] [5] パネルの背景を設定します背景画像を設置している URL を入力後に以下の設定を行ってくださいサイズ : 幅高さをそれぞれ px/% で指定が可能です位置 : 設置する位置をそれぞれ px/% で指定が可能です繰り返し : 背景画像を単体もしくは反復を指定して表示が可能です Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 40

2-6. プレビュープレビューの開始プレビュー [1] スマートフォンサイト表示下部にあるプレビューを選択 [2] リンク部分を選択するとポップアップにて再度確認表示が出ますので OK を選択することでページ移動が行われますプレビューでは以下の方法で確認が行えますプレビュー URL の表示 QR コードによるスマートフォンによる確認 PC 画面からの確認プレビューアドレスをメールで送信し確認 Preview 終了をすると見れなくなりますのでご注意ください Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 43

2-6. プレビュープレビュープレビュー [1] スマートフォンサイト表示下部にあるプレビューを選択 [1] [2] [4] [3] [1] PREVIEW URL 編集したスマートフォンサイトのプレビューを表示する URL ですスマートフォンより URL にアクセスすることで表示確認を行えます [2] 新規ウィンドウを開いて表示ブラウザー上で新規タブを開きスマートフォンサイトを表示します [3] PREVIEW URL をメールで送信プレビュー表示するための URL アドレスをメール送信します [4] QR コード QR コードを読み取ることでプレビュー表示のための URL アドレスをスマートフォンに取得することが出来ます Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 44

2-7. 便利な機能 PC ページをリンク移動 PC ページをリンク移動 [1] PC サイト表示上部にある LINK ON を選択 [3] リンク部分を選択するとポップアップにて再度確認表示が出ますので OK を選択することでページ移動が行われます [2] PC サイト表示のリンク部分に下線が表示されます Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved. 47