Tugiwaaを使ってみる(チュートリアル)

Tuigwaaでサイトを作成する様子を紹介します。ここでは名簿サイトを作成しましょう。

複雑なプログラミングが必要だったはずのデータベースを利用したウェブアプリケーションが、あっという間に出来上がってしまう様子をご覧になってください。

名簿サイトを作ってみよう

例として名簿サイトを作ってみることにします。

ウェブ上で名簿を入力して保存し・検索・表示などができるウェブサイトを作成してみましょう。通常は難しいプログラミング作業が必要になるウェブサイトですがTuigwaaを使えば非常に簡単です。

以下、難しい知識なしでも

・ウェブサイトを用意し

・名簿データを入れるデータベースを用意し

・そこに初期データを入力し

・そのデータベースの内容が指定したとおりにウェブサイトに表示される

ことを例として説明します。

新規にサイトを作成する

Tuigwaa Managerのトップページの「サイト管理」タブから「新規サイト」を選択し、 次のように入力します。

基本設定

セキュリティ設定

データベース、スキン設定

間違いなく入力できましたか?

「基本設定」はサイトを作成する上での編集方法などの基本的な設定を行います。 「セキュリティ設定」ではアクセス制限などのセキュリティ関連の設定を行います。 「データベース設定」ではデータベースに関する設定、「スキン設定」ではデザイン(を決定するスキン)に関する設定を行います。

すべての設定が終わったら「保存」ボタンを押してください。サイト一覧画面に移動しますので、サイト一覧画面の「閲覧」からこれから作成するサイトへ移動します。

初めて作成したサイトのトップページは次のように表示されます。

「基本設定」ではサイトを作成する上での編集方法などの設定を行います。 「セキュリティ設定」ではアクセス制限など、セキュリティ関連の設定を行います。 「データベース設定」ではデータベースに関する設定、「スキン設定」では デザインを決定するスキンに関する設定を行います。

すべての設定が終わったら「保存」ボタンを押し、サイト一覧画面に移動します。 サイト一覧画面の「閲覧」からこれから作成するサイトへ移動します。

初めて作成したサイトのトップページは次のように表示されます。

トップページ

名簿データを格納できるようにする

次に名簿の内容を保存するためのテーブルを作成します。 画面上の「データベース」タブから「新規テーブル」を選択し、次のようにしてテーブルを作成しましょう(テーブルとはデータを格納する場所のことです)

テーブル作成画面1

テーブル作成画面2

入力したら「作成」ボタンを押してください、するとテーブルが作成されます。

作成した名簿のテーブルにデータを登録してみよう

テーブル一覧画面の「データ閲覧」から 「名簿テーブル」の詳細画面に移動し、名簿に名前を追加しましょう。

「新規データ入力」から名前を入力して「送信」するとテーブルにレコード(名簿に登録されたデータの一件一件のことをレコードと呼びます)が保存されます。 何人分かのデータを保存してみましょう。保存し終わったら「ホーム」からトップページに戻りましょう。

入力した名簿データを表示させてみよう

トップページに先程作成した名簿テーブルの内容を表示させてみましょう。

まずはとりあえず以下の通りに操作してみてください。 「ページ」タブから「編集」を選択すると、トップページの編集画面に移動します。 右側のプラグインの中から、「基本データベースプラグイン」の「テーブルの挿入」の 「挿入」ボタンを押すと、

#table(名簿テーブル)

と表示されます。この「#table(名簿テーブル)」の部分は、「ここに名簿テーブルの内容を表示するよ」という意味です。

上記の文以外の部分(はじめから書かれていた部分)はとりあえず消して「作成」ボタンを押してください。

すると トップページに次のように表示されるはずです。

テーブルの表示

表のようになったデータが表示されました。先ほど入力した名簿の内容が表示されましたか?

このように、簡単にデータベースと連携した表示部分を作成することができます。 名簿サイトと呼ぶにはまだまだ不完全ですが、「データベースの内容と連動した表示をするウェブサイト」はもう出来上がってしまいました。

Tuigwaaではこのような作業を行うことで、データベースを使ってさまざまなことをするウェブサイトを作ってしまうことが出来てしまいます。

Tuigwaaの基本

これまでの作業は、

  • 表示の入れ物になるウェブサイトを作り
  • データの入れ物になるデータベース(テーブル)を新規作成し
  • データベース(テーブル)に手作業でデータを入力し
  • テーブルの内容をそのまま表示するページを作成
するというものでした。

Tuigwaaでは、

  • ウェブサイトに必要なデータを格納するデータベース(テーブル)を作成・管理
  • 画面に表示するページをWiki形式(別のページで詳しく説明しますので、今は解らなくても気にしないでください)で用意
  • サイト全体のデザインを「スキン」という機能で統一的に管理

データベース
データベースはここで紹介した例のようにして作成・管理してください。
コンテンツをWiki形式で
画面に表示するページについては、途中で出てきた編集画面(#tableだけ残して全部消してしまった部分です)で、コンテンツをWiki形式で記述してゆきます。

Wiki形式は、簡単に書けるためネットで広く使われている形式です。ブログを書くような程度の理解でコンテンツを用意することができます。
プラグイン
コンテンツ中に「データベースのデータを表示させる」などのTuigwaa特有の高度な機能は、プラグインと呼ばれるものを書くことで実現します。難しく聞こえるかもしれませんが、要するに#table(名簿テーブル)などと入力するだけの作業です。

プラグインについては、#table(名簿テーブル)のような各種の機能を呼び出すものがいくつも用意されています、ちょっと書くだけで機能を呼び出して使うことが出来ます。どんな機能があるかについてはプラグインのページを参照してください。
スキンでカッコいいサイトも簡単に実現
「スキン」は、Tuigwaaの画面デザインを設定するために使います。スキンでデザインを指定すれば、ウェブサイト全体のデザインがそれに従った形で表示されるようになります、リニューアルも簡単です。

自分でスキンを用意するのが面倒でも、デザインが解らない人も心配することはありません。面倒ならば他の人の作ったカッコいいスキンをそのまま借りてくるだけで(スキンは他のTuigwaaサイトにも使いまわし出来ます)、あなたのTuigwaaサイトは立派でかっこよくなります!

興味を持っていただけましたでしょうか。引き続いてのTuigwaaの使い方の説明を読んでみてください。