目次
最終更新日
2008/05/28 18:57:39
チュートリアル
ここでは福々式CMSの基本的な使い方を優しく説明します。福々式CMSは始めは分かり難い点もあると思いますが、ここに書かれていることを順に実行していただければ、一通りの使い方が理解できると思います。
また説明不足のところがありましたら、質問頂ければお答えいたします。
- 1.アドインのインストール
- 2.フロジェクトフォルダの作成
- 3.新規ワークブックの作成
- 4.設定
- 5.テンプレートの作成
- 6.スタイルシートの定義
- 7.共通モジュールの定義
- 8.個別ページ用モジュールの定義
- 9.cssファイルとhtmlファイルの生成
- 10.免許皆伝
1.アドインのインストール
- 次のリンクを右クリックして「対象をファイルに保存」を選んで下さい。
福々式CMS(2008/5/11)のダウンロード - コンピュータに保存したファイルはZip形式で圧縮されています。展開すると「ffcms.xla」と言うファイルが作られます。
- この「ffcms.xla」を
C:\Documents and Settings\ユーザー名\ApplicationData\Microsoft\AddIns
フォルダの中に移動して下さい。 - Excelを起動し、メニューの[ツール]→[アドイン]を選択し、「福々式CMS」にチェックしてOKボタンを押してください。
- メニューに「福々式CMS」のメニューが追加されたことを確認して下さい。
2.フロジェクトフォルダの作成
プロジェクトフォルダは対象となるWEBサイトを構築するために必要なファイル一式を格納するためのフォルダです。
チュートリアルでは最も簡単なWEBサイトの場合として次のようなフォルダ構成にします。
| MyProjectフォルダ | +-- | MyWeb.xls | ||
| +-- | siteフォルダ | +-- | (生成されるCSSファイル) | |
| +-- | (生成されるHTMLファイル) | |||
| +-- | imageフォルダ(イメージ格納用) |
MyProjectフォルダはプロジェクトフォルダで任意の場所に任意の名前で作成します。
MyWeb.xlsは福々式CMS用のワークブックです。次のステップでここに作成します。名前は任意です。
siteフォルダは構築しょうとするWEBサイトに対応したローカルフォルダです。名前は任意です。福々式CMS用で作られるcssやhtmlファイルはこの中に作られます。
siteフォルダの中には必要に応じてイメージを格納するimageフォルダや javaスクリプトファイルなども置いて下さい。
要はsiteフォルダはcssとhtmlファイル以外はWEBサイトの構成と同じになるように作成します。そしてcssとhtmlファイルは福々式CMSによりciteフォルダの中の指定した場所に作成されますので、cssフォルダ以下をそのままWEBへ転送すればWEBはサイトが完成するようにします。
3.新規ワークブックの作成
福々式CMS用のワークブックはWEBサイトの1つフォルダに対して1つのワークブックを対応させて作るのを推奨します。ワークブックは通常のEXCELの新規メニューで作っても構いませんが、福々式CMSのメニューの「新規ワークブック作成」を選ぶと、基本的な項目の記入されたワークブックを作成します。
(重要)福々式CMSで生成されるHTMLファイル等はワークブックファイルの保存されている場所よりの相対位置で指定しますので、一旦ワークブックを保存して保存場所を確定して下さい。保存場所はMyProjectフォルダの直下にします。ファイル名は任意です。
4.設定
設定用シートにこのブックに対する各種設定を記入します。設定用シートのシート名は既定で setting となっています。設定用シートを開いて次の項目を設定して下さい。
| SiteName | C欄にサイト名を設定します。備考です。(例)福々式のオフィシャルサイト |
| URL | C欄にサイトのURLを設定します。備考です。(例)http://www.fukufuku-project.com |
| LocalFolder | C欄にCSSやHTMLファイルを生成するローカルのフォルダをブックの位置よりの相対パスまたは絶対パスで設定します。設定がなければブックと同じフォルダに生成されます。 チュートリアルでは site と指定して下さい。siteフォルダにCSSやHTMLファイルが生成されます。 |
他の項目はデフォルトのままで構いません。
5.テンプレートの作成
ページのレイアウトを決めるテンプレートを作ります。ここでは次のようにトップ部とボトム部を持ち中央が２カラムに分割されたレイアウトを持ち、固定幅のコンテンツ領域が画面中央に表示されるようにします。各部は図のような id を持ちます。
チュートリアルでは common というシートが共通モジュール用シートです。これを開いて次のようにテンプレートの記述を入力します。
| module | ||||||
| Name | Tag | Attribute | Contents | |||
|---|---|---|---|---|---|---|
| Template | ||||||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||||||
| html | ||||||
| head | ||||||
| [Header] | ||||||
| body | ||||||
| div | id="content" | |||||
| div | id="top" | |||||
| [Top] | ||||||
| div | id="left" | |||||
| [Left] | ||||||
| div | id="right" | |||||
| [Right] | ||||||
| div | id="bottom" | |||||
| [Bottom] |
Name列にはモジュールの名前を記入します。
Tag列には要素タグ名を記入します。例ではAttributeの前までの４列がTag列ですが、タグ名を書く位置によりタグの親子関係を表現します。Tag列は必要に応じて増やすことができます。
Attribute列には属性を記入します。
Contents列以降は主にテキストを記入します。
テンプレートで使われる[Header][Top][Left][Right][Bottom]はモジュール名で、モジュールは別のところで定義して呼び出します。
6.スタイルシートの定義
テンプレートに対するスタイルシートを作成します。チュートリアルでは style というシートがスタイルシート用のシートです。これを開いて次のようにスタイルシートを記述を入力します。
| セレクタ | background | margin | padding | width | height | float | clear | text-align |
|---|---|---|---|---|---|---|---|---|
| * | 0 | 0 | ||||||
| body | #FFFFEE | |||||||
| #content | #EEEEFF | 10px auto 0 auto | 800px | |||||
| #top | #FFCCCC | 800px | 80px | |||||
| #left | 280px | left | ||||||
| #right | #BBBBFF | 510px | right | |||||
| #bottom | #FFCCCC | 2px 0 3px 0 | 800 | both | center |
属性がシートに無い場合は適当な所に列を追加して属性名を書いて下さい。
7.共通モジュールの定義
ここではHeader、Top、Bottomモジュールは各HTMLページで共通に使われる共通モジュールとして定義します。共通モジュール用シートのTemplateプレートモジュール下に次のようにの記述します。(見出しの記述は不要です。)
| Name | Tag | Attribute | Contents | |||
|---|---|---|---|---|---|---|
| Header | meta | http-equiv="Content-Language" content="ja" | ||||
| meta | http-equiv="Content-Type" content="text/html; charset=shift_jis" | |||||
| meta | http-equiv="Content-Script-Type" content="text/javascript" | |||||
| meta | http-equiv="Content-Style-Type" content="text/css" | |||||
| title | [PageTitle] | |||||
| link | rel="stylesheet" href="style.css" type="text/css" | |||||
| Top | ||||||
| h1 | 練習問題 | |||||
| p | [PageTitle] | |||||
| Bottom | ||||||
| p | Copyright(C) 2008 COMPANY-NAME |
(重要)Attribute欄はセル内で改行しないで下さい。Contents欄以降は自由に改行できます。
モジュールで使われている[PageTitle]は個別ページ用シートのB:1セルに書かれているページタイトルを現すシステム変数です。システム変数には他にシート名を現す[SheetName]があります。
共通モジュールから個別ページ用のモジュールを呼び出すこともできます。
8.個別ページ用モジュールの定義
ここではLeft、Rightモジュールを各HTMLページ固有の情報を記述する個別ページ用のモジュールとして定義します。個別ページ用モジュールは各HTMLに一対一に対応した個別ページ用シートに記述します。
index というシートが既に出来ていると思います。これは個別ページ用シートです。個別ページ用シートから作成されるhtmlファイルの名前は規定でシート名.htmlとなります。indexという名前のシートを開いてindex.html用の個別ページ用モジュールを、下のように記述して下さい。
| page | ようこそ | |||||
| ID | Tag | Attribute | Contents | |||
|---|---|---|---|---|---|---|
| Left | ||||||
| p | ここはindexページの左の１行目です。 ここはindexページの左の2行目です。 ここはindexページの左の3行目です。 | |||||
| Right | ||||||
| p | ここはindexページの右の１行目です。 ここはindexページの右の2行目です。 ここはindexページの右の3行目です。 ここはindexページの右の4行目です。 ここはindexページの右の5行目です。 ここはindexページの右の6行目です。 ここはindexページの右の7行目です。 ここはindexページの右の8行目です。 ここはindexページの右の9行目です。 |
A:1はシート識別子で、個別ページ用シートの場合はpageです。
B:1セルにはページタイトルを記入します。
個別ページ用モジュールから共通モジュールを呼び出すことも出来ますので、よく使う処理は共通モジュールに記述しておくと便利です。
新しいページを追加する場合はシートを追加して下さい。追加後、既存の個別ページ用シートの先頭から2行をコピーし、B:1セルにはページタイトルを変更すると効率的です。
練習として、about.html用の個別ページ用シートを追加し、LeftモジュールとRightモジュールを適当に追加して下さい。
9.cssファイルとhtmlファイルの生成
以上で必要な記述は終わりましたので、ここでcssとhtmlファイルを生成します。
「福々式CMS」のメニューを開きます。
- ・スタイルシート生成
- ブックに含まれる全てのスタイルシート用シートをCSSファイルに変換します。
- ・全てのワークシートをHTMLに変換
- ブックに含まれる全ての個別ページ用シートをHTMLファイルに変換します。
(注)メニューを実行するには、EXCELのセルが編集状態でないことが必要です。Enter等で編集状態を終了してから実行して下さい。処理が実行されると処理実行完了のメッセージが表示されますので確認して下さい。
siteフォルダにindex.htmlとabout.htmlが作成されていることを確認して下さい。
index.htmlをダブルクリックしてブラウザで表示を確認して下さい。次のように表示されれば成功です。
実行結果
実行結果が正しければ siteフォルダ以下をFTPでWEBに転送すれば、WEBが構築されます。
10.免許皆伝
以上で福々式CMSの基本的な使い方は理解されたと思います。ページ毎に異なるテンプレートを使う方法、サブフォルダを持つ複雑なサイトの構築、ページリストやコンテンツリスト、文字実態参照変など、ここでは説明されていない便利な機能がまだ沢山ありますが、各説明のページをお読みになりあとは皆さんのHTMLに対する知識を生かして素敵なサイトを構築して下さい。
なお実施例としてこのサイトのプロジェクト一式がダウンロードできますので参考にして下さい。