『変換してみよう！』－簡易マニュアル

『変換してみよう！』－簡易マニュアル
Ver. 1.0
更新日：2012/9/26
株式会社 アイ・エヌ・ジーシステム
Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved.
目次
1. brieartとは?
3
2. 注意事項・制限事項など
4
3. 変換設定画面の画面説明
6
4. 変換してみよう！
7
Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved.
1. brieartとは？
brieartとは
既存の PC サイトを、特別な知識や高額なツールなどがなくても
誰でも手軽にスマー トフォンサイトへ変換できるWEBサービスです
もうスマートフォンサイトをつくるために操作が複雑で高価な CMS などのツールを使う必要はありません。
「brieart（ブリエアート）」を使えば面倒なツールのインストール作業などは必要なく、ブラウザさえあれば
PC サイトのパーツをマウスでドラッグ&ドロップ、お好みのレイアウトに並べていくだけで誰でも手軽に、ま
るで絵を描くようにスマートフォンサイトができあがります。
Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved.
3
2. 注意事項・制限事項など
brieartでは、変換設定や変換動作において
下記のような制限があります

ご注意ください

Javascript等のスクリプト動作
変換設定時には、スクリプトは削除した状態で設定を行います

Javascript等のスクリプト制御による表示の変
更・切り替え等、動的ページ構成
スクリプトによって表示の変更(レイアウト含む)・切り替え等を
行っているサイトでは、レイアウトが崩れたり、表示内容が意図
した内容にならなくなる場合があります

Flashや動画等のOBJECTタグ・EMBEDタグ・
VIDEOタグ、 IFRAMによる外部コンテンツの表
示


変換設定画面でのドラッグ＆ドロップ対応要素をご参照ください


ブラウザのプラグイン機能・ブラウザ固有の機
能を利用した表示を行うコンテンツ
FORM入力（GET/POST）によるページ移動
変換設定時は、疑似的にFORM送信を行うため、完全なデータと
ならない可能性があります
変換設定時は、FORM入力（POST）による移動先ページでのプレ
ビューはできません

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
2. 注意事項・制限事項など
ご注意ください

brieart変換設定画面はHTML5・CSS3がご利用
出来るブラウザー専用となっております。
その為、非対応ブラウザーでの操作やログイン
が行えない場合がございます。
対応ブラウザーは
Chrome / Firefox / Safari
(各最新バージョン)
となっております。
5
Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved.
5
3. 変換設定画面の画面説明
1
2
4
3
①
PCサイト操作
PCサイト表示に対する各種操作を
行うことができます
②
PCサイト
タイトル
表示しているPCサイトのページタイ
トルを表示します
③
コンポーネント
作成
スマートフォンレイアウトにコンポー
ネントを追加することができます
④
保存
【ご契約者様のみ】
スマートフォンレイアウト保存し、サ
イトに変換を適用します
⑤
終了
変換設定を終了します
⑥
PCサイト表示
ご指定URLのPCサイトページを表示
します
⑦
スマートフォン
レイアウト
スマートフォン用レイアウトの編集・
表示を行います
⑧
選択要素
構造表示
PCサイト表示／スマートフォンレイ
アウトで選択中の要素の構造を表
示します
⑨
スマートフォン
レイアウト操作
スマートフォンレイアウトに対する
各種操作を行うことができます
5
6
7
8
9
brieartでは、マウス操作によるドラッグ＆ドロップとプロパティ
の設定だけで、手軽にスマートフォンサイトを構築することが
できます。
Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved.
6
4. 変換してみよう！
まずは手軽に、PCサイトをスマートフォンレイアウトに変換し
て見てみましょう！
① PCサイト表示内の要素を選択します
② 選択した要素をドラッグしてスマートフォンレイ
アウト表示内にドロップします
選択した要素をそのままドラッグして、スマートフォンレイアウト
の上にドロップします
PCサイト表示内でマウスカーソルを移動すると、マウスカーソ
ルの下にある要素の色が変わり、選択可能な範囲が色付け
（緑）されます
スマートフォン用に配置したい要素が色付け（緑）された状
態で、マウスをクリックすると要素が選択されて色付け
（赤）されます
より大きな範囲を選択するには、更に複数回クリックして
みてください。（クリックの度に選択範囲が大きくなります）
PCサイトの要素が自動的にス
マートフォン用のレイアウトで配
置されます
複数要素をドロップした場合は、
自動的にリスト展開されて配
置されます
Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved.
7
4.変換してみよう！
③ プレビューしてみましょう
画面右下の【プレビュー】ボタ
ンをクリックすると、プレビュー
が開始されます
①
プレビューURL
プレビュー確認サイトのURL表示されます
プレビューURL
QRコード
プレビューURLのQRコードが表示されます
②
③
プレビューサイト
ブラウザー表示
④
プレビューURL
メール送信
⑤
プレビュー終了
スマートフォンにQRコードリーダーがインストールされ
てる場合は、QRコードでアクセスすることができます
リンクをクリックすると、ブラウザーで簡易的にプ
レビューを確認することがます
リンクをクリックすると、メーラーが起動しプレ
ビューURLをメール送信することができます
QRコードリーダーがインストールされていないスマート
フォンでの簡単アクセスに便利です
プレビューを終了する時にクリックしてください
1
3
4
2
5
スマートフォンやブラウザーでプレビュー表示を確認してみてください
ご注意ください
※ プレビューは、プレビューダイアログが表示されている間
だけ表示することができます。
※ プレビュー変換が可能な時間は最長で20分です。
※ 20分を経過すると自動的にプレビューが終了します。
Copyright (C) 2012 ING System Co., Ltd. All Rights Reserved.
8