このチュートリアルにはupdatedバージョンがあります。

チュートリアル: カレンダー予約システムSuperSaaSのレイアウト変更

このセクションは2つのセクションに分かれています。: タイムゾーン等のアカウントに関連する変更とユーザーからの見え方等のデザイン変更です。

レイアウトセッティング

アカウント全体のレイアウトに変更する方法

アカウントのレイアウトをワイドに変更するやり方は管理画面の右側のメニューの‘レイアウト設定’から行えます。

ファーストセクションでは‘ユーザー’の代わりに様々な名前を選択可能です。例として‘学生’を選択すれば全てのダイアログボックス、help、e-mailもしくはエラーメッセージが選択名に変わります。カスタムオプションを選択する場合は、単数形で入力します。必要に応じて、自動的に複数形に変換されます。 英語の複数形ですと問題はないのですがそれ以外の言語だと失敗してしまう可能性があります。"singular,plural"などのカスタム用語を入力すると、デフォルトに複数形を上書きすることができます。

Set Time Zone to GMT to avoid DST

‘地域の設定’セクションはわかりやすいでしょう。リマインダーe-mail等を正しい時間に送るためタイムゾーンの設定は非常に重要です。デフォルトであなたの国に設定されていても複数のタイムゾーンがある場合は正しく設定する必要があります。 もし複数国の顧客を持つ場合は顧客はそれぞれの言語を選択可能です。 それぞれのタイムゾーンを選ぶ事も可能です。その場合あなたのタイムゾーンと顧客のタイムゾーン両方がスクリーンと確認用メールに表示されます。 タイムゾーンを計算するときに、自動的にクライアントとあなたの場所を考慮して計算してくれます。

"外観" セクションからフォントサイズやカラー、背景などが変更できます。 通常のフォントサイズは11ptです。 SuperSaaSはノーマルサイズに最適化されていますが時々小さすぎると感じる場合があるでしょう。その場合、フォントサイズを自由に変えられますが、ブラウザーによって必ずしも正確なピクセルサイズにはなりません。(特に拡大した場合) カラーを選択するかHTMLカラーコードの6桁を入力する事も可能です。

通常のSuperSaaSのロゴに変わりヘッダーやフッターをあなたのロゴへ変更出来ます。 使用可能な形式は‘gif’、‘jpg’ もしくは ‘png’で最大サイズ 70KB. 画面のトップから12ピクセル、ウィンドウの左に15%のスペースと透明度を保ち表示されます。 あなたは更にユーザーがロゴをクリックした場合どこへ飛ぶかも設定可能です。 ユーザーがログアウトした時にこのアドレスへ飛ばす事も可能です。 関連するオプションからロゴとフッターを隠す事も可能です。 このやり方は他のサイト内でSuperSaaSをframe内で表示するやり方に適しています。詳細はこちら ‘スケジュールをあなたのサイトへ統合

フォーム: 顧客向けのe-mailアドレスに表示されるメッセージやアドレスも変更可能です。インターネットの基準に適合するため、又スパムを防ぐため'Resent-From: SuperSaaS' がヘッダーに追加されていますがこれは通常ユーザーからは見えません。アカウントにカスタムドメインとリンクを設定しない限りe-mailメッセージには'supersaas.jp' が含まれます。 "高度な設定"ではカスタムドメインのセットアップやブラウザーの横に表示される ファビコンと呼ばれる小さな画像の追加ができます。詳細はこちらカスタムドメイン

画面右上の‘help’ボタンをクリックするとユーザーがいるページに関連するhelpが表示されます。‘コンタクト情報’にテキスト等入力すると全てのページのhelp画面のトップスクリーンに入力した物が表示されます。HTMLフォーマットも入力可能です。例えば、アクセス可能なリンクと共に画像を挿入するとHTMLのタグや構文を分析し有効でない物は取り除かれます。

もし新規ユーザーに自動的にメールを送る場合は一番下のテキストボックスでe-mailメッセージをカスタマイズ出来ます。HTMLは含む事が出来ません。サインアップe-mailをユーザーが受け取るかどうかの設定は‘コントロールアクセス’ページで説明します。 アクセスコントロール

Configure Layout Tab

スケジュールの詳細なレイアウト設定

‘設定’ボタンを押して‘レイアウト’タブからスケジュールのレイアウトの詳細な変更が出来ます。 このページは‘リソース’ タイプか‘定員’ タイプによって多少異なります。

スケジュールのサイズを始めにセットします。横方向カレンダーは自動的に利用可能なサイズに拡大、縮小されます。お使いのブラウザのウィンドウサイズを変更するには右下にドラッグをします、カレンダーもそれに応じて調整されます。(あなたが他のウェブサイト上でSuperSaaSを実行しても、そのフレームに合わせて調整されます)

縦方向サイズはブラウザーにフィットしない可能性が高くなります: フィットせずウィンドウ内に収まりきらない場合にはスクロールバーが表示されます。 ‘週表示’‘日表示’二つのコンポーネントが高さを決めます: 1時間のサイズと長さを決めます。15分ごとの予定など短時間ごとの予定がたくさんある場合、縦方向カレンダーのサイズを大きくすると非常にすっきり見せることができます。1日に1つの予定を表示させている場合より見やすくなります。

Appointment Outside Visible Hours

表示されている開始時間や終了時間は営業時間によって異なりますので注意が必要です。 通常、営業しているあいだはすべて利用可能であることを表示しますが、あなたが設定する必要はありません。例えば、会議室は通常9時から17時に使用できる場合、時にはそれよりも早く使用した時、或いはもっと遅くに使用した時、空き時間による画面スペースを無駄にしたくないはずです。時間外に入力しない場合、単純に9時から17時までのスケジュールを表示し自動的に入力された予約を表示できるようにするだけで、その週は変更されます。 ‘月表示’の縦方向サイズが予定の表示時間外に行われていない場合、見づらくなることから、'1は表示されません'を示すことによって、表示されている時間外に予定が通知されます。

‘カラー’セクションではスケジュールに関する各カラーの変更が可能です。 カラーオプションページはスケジュールタイプにより異なります。 定員スケジュールはデフォルトはスロットカラー、各スロットの色は予約作成時や編集時に表示されるダイアログボックスの右下のカラーボックスで変更可能です。 'フルスロット' カラーは定員がいっぱいになった時でオーナーシップインジケーターはユーザー自身が予約した場所の色です。

リソーススケジュールでは予約のカラーがどのリソースに属しているかを表示します。また‘オーナーシップインジケーター’は自身の予約を色により確認できます。 もし予約を固定の長さと固定のサイズにした場合予約可能な場所が‘透明なセル’で表示され予約表示をより見やすくします。詳細はこちらでご確認下さい デモ。 もし1つ以上のリソースがある場合各リソースのカラーやカラーの選択方法をカスタマイズ出来ます。

3番目のセクション、リスト表示のようなフィールドリストを決めます。実際に記入することができるフィールドはここに記載されています。あなたは‘プロセス’タブにフィールドを追加できます。

次のセクションではデフォルトの見え方の設定です。 カレンダーの表示を各スケジュールに適切に合わせた方がユーザーにとって見やすいでしょう。例としてレンタカー等の様な1日貸し切るタイプのスケジュールを作成する場合は日毎のカレンダー表示にするといいでしょう。 日毎、週間、月間の表示への切り替えボタンは設定画面のチェックボックスで表示、非表示の変更が可能です '右上の小さな月間カレンダー'もチェックボックスにより隠す事が可能です。

カスタムメッセージ

レイアウトページの残り部分は、各種ページやe-mailでメッセージをカスタマイズするためにテキストボックスで入力されます。あなたは、グラフィックを含めこれらのボックスにHTMLを追加しますが、グラフィックがURLを介してだけ動作することに注意してください。つまり、画像ではなかったらあなたのコンピュータの特定の場所に保存されます。 (自身のロゴを私達のサーバーにアップロードして使用できます。また画像へ特定URLの指定も出来ます。) e-mailにはHTMLコードを含む事ができません。

メッセージボックスにはJavaScriptを追加可能です。"HTML" ボタンをクリックするとポップアップウィンドウが表示されますのでコードをこちらにペーストする事が可能です:

<form><input onclick="window.open('//static.supersaas.net/img/demo_room.jpg','Popup','width=400,height=300')" type="button" value="Pop-up" /></form>

トラッキングコードを貼り付けるGoogle Analytics ユーザーがどこから来たのか等を把握可能です。

"Auto text"とダイナミックメッセージ

これは安全に省略できる高度なテクニックです

Autotextを使用してe-mailとメッセージをカスタマイズ出来ます。 Autotextはメッセージが生成されたときに自動的に他のものに置き換えることができます。 以下のリストはe-mailメッセージに使用できるマジックワードです。

E-mailのメッセージのAutotext
この単語が……こちらに入れ替わります
$name名前をアドレスに指定できる、使用可能の場合
$dear"Dear $nameを略さずに書く," $name がわかっている場合
$login作成者のログイン名 (管理者やログインしてない場合は空白)
$subjectこの行の残りはe-mailの件名として使用されます
それは他のマジックワードを含めることができます
$urlウェブアドレスはスケジュール内のユーザーの関連する場所
$actionこのe-mailで引き起こされたアクションの説明 E.g.:
"Your booking was $action" → "Your booking was created"
$details予約の詳細情報,時間や場所等
$idオブジェクトのIDは、supervisorのインターフェイスでそれを調べるのに便利です
$slot_idスロットのID(定員スケジュールのみ)
$replaceすべてのシステム生成されたテキストをすべて削除します, 唯一あなたのテキストだけが使用されます
$start
$finish
$created
この予約の開始時間、終了時間、作成日
Use $start_time$finish_timeの時間だけを表示します
$length予約の時間を次の形式で表示 H:MM や DD:HH:MM
$ical予約はiCalendarファイルとして添付されます
$formフォームがこのオブジェクトに接続されている場合、HTMLファイルをして添付されます
$price予約の価格。 予定を繰り返すための最初の価格です
$field_1
$field_2
第1または第2のカスタムフィールドの値がそれぞれ表示されます
$if "action"文章の残り部分がのみが印刷されている場合 actionは現在のアクションと一致します。
可能なアクションは以下のリストを参照してください
$title
$location
$quantity
$description
タイトル, ロケーション, 概要と予約数 (定員タイプのみ)
複数リソースのスケジュール用 $description

通常カスタムテキストはシステムにより作成されたe-mailに付けられています。 しかしストリング使用することにより$replace システムのメッセージをどこでも入れ替える事が可能です。 コマンドは繋げることもできます。 次のコードの断片は新しく予定を作成するときのタイトルを対象とします:

$if "created" $title You have a new appointment on $start

使用可能な範囲は$ifがある場合の後:"created", "changed", "deleted", "approved", "refunded", "placed_on_the_waiting_list", "changed_on_the_waiting_list", "removed_from_the_waiting_list" or "placed" ("placed"はウェイティングリストから元の予約に移動した意味です。) またカレンダー上で特定の言語を選択している場合にのみ文章を表示するには、ENやESのような識別子を使用できます。

Autotextのその他の使用法はダイレクトリンクを使ってユーザーが変更した自身の予約ページへ飛ぶ事など可能です。 このテキストをe-mail通知等にもご利用出来ます。:

オンラインアポイントメントを変更するには:
http://www.supersaas.com/schedule/account_name/schedule_name?view=view&id=$id

"定員"タイプのスケジュールを使用している場合はURLにスロットIDが含まれている必要があります:

http://www.supersaas.com/schedule/account_name/schedule_name/$slot_id?view=view&id=$id

ダイナミックメッセージはディスプレイメッセージとしても使用可能です。例としてスケジュールの上部やhelpスクリーンやログインスクリーンなど。

表示されるメッセージのAutotext
この単語が……こちらに入れ替わります
$if condition {message}条件が該当する場合は、{}の中にメッセージが表示されます。可能な条件の最後に掲載した表を参照してください。 メッセージはべつの$ifを除いて、複数行にまたがることができ、他のマジックワードを含めることができます。
$login現在ログインしているユーザーのログイン名を略さずに表記します。
$name現在ログインしているユーザーのフルネームを略さずに表示します。利用可能の場合。
$credit現在のユーザーがもっているクレジット数を略さずに表示します。
$shopshopへのリンクを作成。例: "御予約の前にこちらでクレジットをご購入下さい$shop"
$auto通常デフォルトのテキストはあなた自身によって入れ替わります。$auto スケジュール上部にユーザー予約を許可しているかしていないかによって異なるメッセージを表示するのに便利です。
$suもし利用可能なら現在のユーザーのsupervisorフィールドを略さずに表示。特定のユーザーがログインした時に表示できます。
$id現在のオブジェクトのIDを略さずに表示.チェックアウト画面とフォームを投稿した後の"有難うございました" のスクリーンのみ。固有の参照番号としてユーザーに与える事が可能です。

ダイナミックディスプレイメッセージの通常使用例としてユーザーにより異なる言語のテキストを表示可能です。$if 言語表示は2文字で表示します。EN, DE もしくは ES :

$if EN {Good morning $login}
$if DE {Guten Morgen $login}

他の使用法は$if ユーザーがサインアップしているかどうかで表示されるメッセージ:

$if out {もしアカウントをお持ちでなければ作成して下さい}
$if user {Welcome back $login!}

アフィリエイトプログラムでもトラッキングコードを使用できます。HTMLモードへのスウィッチが必要です。そうしなければリテラルテキストとして表示されてしまいます:

$if paid {Thank you for your business $name.
<script type="text/javascript">
<!--
var google_conversion_id = …

</script>
}

以下のリストは$if statementと共に使用可能です:

条件適用された場合…
$if user {message}メッセージはユーザーがログインする時に表示されます。
$if out {message}メッセージはユーザーがログインしていない時に表示されます。
$if shared {message}メッセージはユーザーが共有パスワードによりログインした時に表示されます。
$if admin {message}メッセージは管理者もしくはsuperuserでログインした時に表示されます。
$if XX {message}メッセージは現在選択されている言語が ISO language code of XX
$if paid {message}メッセージはユーザーが支払いに成功した時に表示されます。
"チェックアウト"画面のメッセージに使用出来ます。
$if mobile {message}メッセージはサイトがモバイルバージョンの時にのみ表示されます。
$if desktop {message}メッセージはサイトがデスクトップ版の時のみ表示されます。
$if calendar {message}メッセージはカレンダーが日、週、月の時に表示されます。
$if view {message}メッセージは特定の見え方により表示されます。 表示フリー, 予定表, 日付,

次のチャプター: スケジュールをあなたのサイトに統合 | チュートリアルインデックスへ戻る