ダウンロード

このサイトはMagic3のWiki機能を主に使用して作成しています。

チュートリアル/基本操作

チュートリアル

概要

Magic3の全体の基本操作を行いながら、Magic3の概念的なところを簡単に理解していきます。

「システム全体を把握できて、目的の機能がだいたいどの辺りにあるかが分かる。」

前チュートリアル(チュートリアル/初期設定)とこのチュートリアルまでで、Magic3の最小限の操作が可能なレベルが目標です。

準備

Magic3が正常にインストールされて使用可能であること。
「ブログサンプル」データを使用します。既にインストール時にインストールしている場合は、そのままの状態でも再度インストールし直してもどちらでもかまいません。

作業内容

  • サンプルデータインストール
  • ウィジェットの配置
  • フロント機能の操作
  • ウィジェットの設定画面の操作

スタート

説明にそって作業を行っていきます。
分からない用語が出てきた場合は、こちらからスタートしてください。 ⇒ チュートリアル/初期設定

サンプルデータのインストール

付属しているサンプルデータは、お試しでサンプルサイトを構築するだけでなく、新規にサイトを構築する場合の雛形データとしても使用します。
特に初心者にとってはデータが空の状態からすべてのデータを用意してサイトを作り上げるのはハードルが高いので、サンプルデータをうまく利用してサイトを構築します。

サンプルデータインストール画面に遷移します。
メインメニューの「メンテナンス」項目をクリックし、さらに2段目の緑のバーから「DB管理」-「データインストール」で画面遷移します。

datainstall1.jpg
 
 

メニューからインストールするデータを選択し、「インストール」ボタンを押すとサンプルデータがインストールされます。サンプルで使用する画像やテンプレートを削除していない限り、何回実行しても実行後は常に同じ状態に戻ります。

「blog_demo1」データを選択しインストールします。インストール後、ダッシュボードに戻ります。

datainstall2.jpg
 
 

ページ・テンプレート・ウィジェット

Magic3のフロント画面は、ページ、テンプレート、ウィジェットの3種類のコンポーネントで構成されます。下の図のように組み合わせて画面を作成します。
画面の作成は、ページにテンプレートを割り当て、テンプレートの配置ブロックにウィジェットを配置する、という要領で行います。

サイトの構築は、コンポーネントベースでサイト全体の大まかな画面構成を決定し、次にコンテンツを登録する、という2段階の方法で行います。このチュートリアルでは主に前者のコンポーネントベースの操作を理解します。

それぞれのコンポーネントは以下の役割を行います。

  • ページ - テンプレートを配置するためのベースです。
  • テンプレート - サイトのデザインやウィジェットの配置ブロックの位置を決めるコンポーネントです。デザインテンプレートとも呼びます。
  • ウィジェット - 個々が独立的に動作する、様々な機能を持ったコンポーネントです。テキストや画像などサイトで表示されるコンテンツはウィジェットで管理されウィジェット内に表示されます。
create_page.png
 
 

画面構成機能

ページ、テンプレート、ウィジェットの組み合わせを設定するのが画面構成機能です。
アクセスポイントごとに編集画面が異なります。

管理機能メインメニューから「画面管理」の「PC画面」で遷移します。

dashboard_menu2.jpg
 
 

ページ、テンプレート、ウィジェットの選択はそれぞれ以下の赤枠のメニューで行います。
使用するウィジェットは、トグル形式のアイコンボタンで開閉する一覧パネルから取り出します。

pagedef0.jpg
pagedef1.jpg
 
 

ページの選択

画面構成機能では、最初にページとテンプレートを選択し、表示された画面の配置ブロックへウィジェットを配置していきます。

「PC画面」上のページメニューから編集するページを選択します。選択状態のページはメニュートップの緑の部分に表示されます。
ページは「ページID」で区別されます。URLでは、?の後に「sub=xxxxx」のパラメータで区別されます。
デフォルトページは、パラメータなしのURLで表示されるサイトのトップページを示します。

「お問い合わせ」ページを選択してみましょう。

pagedef2-2.jpg
 
 

ページメニューの下のURLのパラメータを確認し、再度ページメニューから「家」アイコンのデフォルトページに戻ります。

pagedef4.jpg
 
 

テンプレートの選択

テンプレートメニューで選択中のテンプレートは、すべてのページで共通に使用するデフォルトのテンプレートです。
メニューをプルダウンして選択したテンプレートが即デフォルトテンプレートになります。

pagedef13.jpg
 
 

ページごとに個別に設定するには、ページメニューで目的のページを選択した状態でメニューの右端列のトグルボタンを使用します。
個別に設定したテンプレートは再度トグルボタンをクリックすると解除されます。

pagedef3.jpg
 
 

ウィジェットの配置

ウィジェットはテンプレート上の配置ブロックのある位置に配置します。配置位置については若干の配置ルールがありますが、基本的にはどの位置に配置しても動作します。配置ルールについては、以降のチュートリアルで説明します。
テンプレートの仕様によっては配置位置でウィジェットの見え方が変わる場合があります。主な見え方(デザイン)を決めるのはテンプレート側です。
一旦配置したウィジェットは、配置後の移動も自由に行えます。
ウィジェットをページに配置してみましょう。

ウィジェット一覧を開きます。

pagedef5.jpg
 
 

ウィジェット一覧のカテゴリーを開き、目的のウィジェットを探します。

さらにウィジェット一覧の「その他」のカテゴリーを開きます。

pagedef6.jpg
 
 

ドラッグ&ドロップで「アクセスカウンター」ウィジェットを「left」ブロックの先頭に移動させます。

pagedef8.jpg
 
 

プレビューでフロント画面を確認します。

pagedef7.jpg
 
 

ウィジェットが配置されました。

preview2.jpg
 
 

ウィジェットをページ上で移動します。

ページに配置したウィジェットを任意の位置に移動します。
移動後、プレビューでウィジェットが移動されたことを確認します。

pagedef9.jpg
 
 

ウィジェットを削除してみます。

ウィジェットの右上の三角アイコンをクリックし、ウィジェットメニューから「ウィジェットの削除」を選択します。
プレビューで画面を確認しましょう。

pagedef10.jpg
 
 

グローバル属性

ウィジェット一覧からページに配置したウィジェットは初期状態では選択中の単一のページのみで表示されます。
すべてのページを通してウィジェットを透過的に表示するには「グローバル属性」を使用します。
ウィジェットメニューから「グローバル属性」を「設定/解除」切り替えることによって、ページを透過したウィジェットの配置が可能になります。配置されたウィジェットに「グローバル属性」が設定されているかどうかは、ウィジェットのタイトル部分の色で区別されます。タイトル部分が赤の場合、ウィジェットに「グローバル属性」が設定され、ウィジェットが「グローバル」に表示されます。

pagedef11.jpg
 
 

動作を確認してみましょう。
再度「アクセスカウンター」を配置してください。

デモの一般画面のメインメニューは、「ホーム」「運営」「お問い合わせ」の項目はそれぞれ「ブログ」「コンテンツ」「お問い合わせ」ページにリンクされています。(メニューの作成については、次回以降のチュートリアルで行います。)

プレビュー画面でメニューから「運営」「お問い合わせ」の画面に切り替えてみます。
「ブログ」ページに配置した「アクセスカウンター」は「運営」「お問い合わせ」ページには表示されていないことを確認します。

preview3.jpg
preview4.jpg
 
 

「アクセスカウンター」に「グローバル属性」を設定し、プレビューで確認します。

プレビュー画面でメニューから「運営」「お問い合わせ」の画面に切り替えてみます。
「ブログ」ページに配置した「アクセスカウンター」が「運営」「お問い合わせ」ページに表示されていることを確認します。

pagedef12.jpg
 
 

テンプレートの変更

テンプレートを変更してみましょう。
テンプレートメニューから「art42_sample3」を選択します。

テンプレート「art42_sample3」は元の「art42_sample5」違い、右サイドの配置ブロックがありません。
右サイドの配置ブロックのウィジェットは表示するブロックがないので非表示になります。

pagedef14.jpg
 
preview5.jpg
 
 

テンプレートを変更した場合など、一旦配置したが表示できなくなったウィジェットが存在する場合は、編集エリア右上に「その他のポジション」のアイコンが表示されます。
「その他のポジション」のパネルを開くと同じページ上の他の配置ブロックのウィジェットが表示されます。
「その他のポジション」のウィジェットも「ウィジェット一覧」のウィジェットと同じように再配置できます。

pagedef15.jpg
 
 

プレビュー画面

アクセスポイントメニューの「プレビュー」からプレビュー画面を表示させます。
プレビュー画面はポップアップ形式で別画面で表示されるので、ブラウザでポップアップをブロックしている場合は解除しておきます。

プレビュー画面はナビゲーションバーの「サイト名」から遷移されるフロント画面と同じ画面で同様の働きをします。
プレビュー画面はフロント画面を参照するのに使用したり、以下のように目的の管理機能へすばやくアクセスするために使用します。

  • ウィジェットの設定を変更し、ウィジェットの動作や見え方を変える。
  • コンテンツの表示内容を編集
dashboard_accesspoint3.jpg
 
 

フロント機能のナビゲーションバーのトグル型の「ウィジェットツール」ボタンのオンオフでウィジェットツールモードが切り替わります。
ウィジェットツールモード状態のときマウスカーソルをウィジェットの上に載せると、黄色の枠が表示されウィジェットがアクティブになります。右上にウィジェット操作用のツールチップボタンが表示されます。

「ウィジェットツール」ボタンを押して、ウィジェットツールモードを切り替えてみましょう。

ウィジェット操作用ツールチップのボタンは左から以下の機能を示します。

  • ウィジェット設定 - 別タブでウィジェットの設定画面を表示します。
  • ウィジェット共通設定 - 別タブでウィジェットの共通設定画面を表示します。
  • チェックボックス(右上小ボタン) - ツールチップを非表示にします。
front_widget.jpg
 
 

コンテンツが直接編集可能なウィジェットでは編集ボタンが表示されます。
編集ボタンを押すと編集画面が表示できます。

front_widget2.jpg
 
 

ウィジェットの設定画面

ウィジェットはそれぞれ個別に設定画面を持っています。設定画面で、それぞれのウィジェットが表示されるエリア内の表示を制御します。
ウィジェットの設定画面はconfig.pngのアイコンで示されます。フロント画面や編集画面のconfig.pngのアイコンをクリックして起動します。

 

編集画面からの起動用アイコンです。

config_icon1.jpg
 
 

フロント画面からの起動用アイコンです。ウィジェット上にマウスカーソルを置き、マウス右クリックで表示させたコンテキストメニューからも選択できます。

config_icon3.jpg
 
 

起動用アイコンをクリックすると、ウィジェットの設定画面が別タブで表示されます。
ウィジェットの設定画面はウィジェットごとに別タブ管理になっています。必要な間だけタブを表示させて使用します。

設定画面のアイコンをクリックしてみましょう。表示後、ウィンドウ右上の閉じるボタンでタブを閉じます。

config_window.jpg
 
 

メイン型のウィジェットは、ウィジェットの表示制御に加えて、そのウィジェットが扱うコンテンツを一元的に管理する機能を持っています。メイン型のウィジェットを画面に配置すると、アクセスポイントメニューに自動的にそのウィジェットの設定画面が登録されます。サイト構築1段階目のコンポーネント配置作業を完了後、2段階目のコンテンツ登録を行うには、主にこのメニューを使用していきます。

config_icon2.jpg

終わり

ウィジェットを配置し、設定画面を操作するところまで出来たでしょうか。基本操作はこれで終わりです。
ここまで理解できればMagic3の最小限の操作が可能です。
残りは個々のウィジェットの設定画面の設定の問題なので、画面上のヘルプを参考にしながら使っている間に覚えることが可能です。
次のチュートリアルでは、ウィジェットの管理画面からコンテンツを登録する方法を理解します。


2017-11-09 (木) 22:14:36 (8d)