ドキュメント作成
インストールをおこなっただけのMODxでは一般ユーザーが見る画面は下図のようになっています。
サンプルサイトをインストールしている場合はまったく異なるサイトになっているはずですが、そのままであれば余計なページは作成されず、
トップページのみが存在している形となります。
ログインページから管理画面を確認します。 管理画面は３つのフレームから成り立っています。上部のメニュー部分、左側のツリー部分、そしてメイン画面部分です。 メニュー部分はリサイズできませんが、左のツリー表示はリサイズ可能となっており、メイン部分を大きく表示したい場合は各々調整が可能です。 ツリー部分にはサイトの構成がドキュメントツリーモデルとして表示されます。 構造はWindowsでのフォルダとファイルの関係と同じになりますので初心者でもツリーの形状及びサイトの構成が把握しやすくなっています。 （但し、大規模になるとツリーで把握するのには逆に苦労する場面があります。）
まずは先ほど表示したトップページの部分にちょこっと変更を加えてみたいと思います。
ツリー部分には現在1つしかドキュメントがありません。これがトップページになっています。
現在の名前は「MODx CMS Install Success」となっていますが、これをクリックしてメイン画面の上部に表示される編集をクリックするか、
ツリー画面で名前を右クリックして表示されるコンテキストメニューのなかから「ドキュメントの編集」を選択します。
編集画面では数多くの設定項目が出てきて、いきなりだとすこし迷うかもしれませんが、必要な項目は限られています。
「タイトル」はドキュメントの名前になっています。
デフォルトではページのURLは index.php?id=ID番号 という形の表示になりますがApache側でRewriteモジュールが動作していてフレンドリーURLの設定が行われていると
「ドキュメントエイリアス」に入力した名前でアクセスできるようになります。
「内容」の入力欄は標準でTinyMCEというエディタを搭載しておりWYSIWYG編集が可能となっています。
ドキュメント設定のタブの切り替えで「ページ設定」と「METAキーワード」、「プレビュー」があります。
METAキーワードではサイト全体で複数のキーワードを登録管理でき、それをページ単位で設定することができます。
また、プレビューでは一度保存したデータをインラインフレーム内でブラウザを切り替えることなく見ることができます。
「ページ設定」ですが、該当のドキュメントをフォルダとして扱いたい場合は「フォルダ」にチェックを入れます。 TinyMCEなどのWYSIWYG編集ができるエディタを使用したくない場合は「リッチテキスト」からチェックをはずします。 公開のチェックが外れると一般の人はこのドキュメントを見ることができなくなります。 公開日時を指定するとその時間に自動で非公開から公開に切り替わります。非公開日時はその逆になります。 キャッシュ可をチェックするとドキュメントが読込まれる２回目以降にはキャッシュが作成され高速なページ表示が可能になります。 様々な設定がありますが、とりあえずここではそのままにしておきます。
画像の挿入は、挿入したい位置にカーソルを合わせてからエディタの「画像の挿入/編集」ボタンを押します。
画像設定画面がでますので表示画像を選択するために画像URLの行にある「画像参照」ボタンを押します。
このウィンドウ上でサーバーへのアップロードと挿入する画像の選択を行います。
表示されている画像は既にサーバーにアップロードされている画像です。
画像は一度ローカルのPCからサーバーにアップロードすることで利用かのうになります。
「参照」ボタンを押してローカルPC上から画像を選び、「アップロード」ボタンを押す事で画像がサーバーにアップロードされ、サムネイルが表示されます。
フォルダ作成ボタンは画像を整理する際に利用可能です。
また、間違った画像をアップしてしまった場合は画像下のバツボタンを押す事で削除が可能です。
アップロードですが、日本語（マルチバイト）名ファイルをアップしてしまうとサムネイル表示がなされなくなります。
アップロードはなされるのですが、その後なにもできなくなってしまうのでこのあたりは改善をお願いしたいところです。
無事アップロードが終わりサムネイルが表示されたらそのサムネイル画像をクリックします。
先ほど選択した画像が挿入画像として選択されました。
画像に代替テキストがある場合はそれを記入します。
「画像の説明」はaltに、「タイトル」はtitleにそれぞれ挿入されます。
これで文章中に画像が挿入されました。
画像をクリックすると周囲にハンドルが表示されるので、これで拡大縮小などが可能です。
また、ドラッグすることで画像を任意の位置に移動することも可能です。
保存を行いプレビュー等で先ほどおこなった更新が反映されているかを確認してください。
サンプルサイトをインストールしている場合はまったく異なるサイトになっているはずですが、そのままであれば余計なページは作成されず、
トップページのみが存在している形となります。ログインページから管理画面を確認します。 管理画面は３つのフレームから成り立っています。上部のメニュー部分、左側のツリー部分、そしてメイン画面部分です。 メニュー部分はリサイズできませんが、左のツリー表示はリサイズ可能となっており、メイン部分を大きく表示したい場合は各々調整が可能です。 ツリー部分にはサイトの構成がドキュメントツリーモデルとして表示されます。 構造はWindowsでのフォルダとファイルの関係と同じになりますので初心者でもツリーの形状及びサイトの構成が把握しやすくなっています。 （但し、大規模になるとツリーで把握するのには逆に苦労する場面があります。）
まずは先ほど表示したトップページの部分にちょこっと変更を加えてみたいと思います。
ツリー部分には現在1つしかドキュメントがありません。これがトップページになっています。
現在の名前は「MODx CMS Install Success」となっていますが、これをクリックしてメイン画面の上部に表示される編集をクリックするか、
ツリー画面で名前を右クリックして表示されるコンテキストメニューのなかから「ドキュメントの編集」を選択します。
編集画面では数多くの設定項目が出てきて、いきなりだとすこし迷うかもしれませんが、必要な項目は限られています。
「タイトル」はドキュメントの名前になっています。
デフォルトではページのURLは index.php?id=ID番号 という形の表示になりますがApache側でRewriteモジュールが動作していてフレンドリーURLの設定が行われていると
「ドキュメントエイリアス」に入力した名前でアクセスできるようになります。
「内容」の入力欄は標準でTinyMCEというエディタを搭載しておりWYSIWYG編集が可能となっています。
ドキュメント設定のタブの切り替えで「ページ設定」と「METAキーワード」、「プレビュー」があります。
METAキーワードではサイト全体で複数のキーワードを登録管理でき、それをページ単位で設定することができます。
また、プレビューでは一度保存したデータをインラインフレーム内でブラウザを切り替えることなく見ることができます。「ページ設定」ですが、該当のドキュメントをフォルダとして扱いたい場合は「フォルダ」にチェックを入れます。 TinyMCEなどのWYSIWYG編集ができるエディタを使用したくない場合は「リッチテキスト」からチェックをはずします。 公開のチェックが外れると一般の人はこのドキュメントを見ることができなくなります。 公開日時を指定するとその時間に自動で非公開から公開に切り替わります。非公開日時はその逆になります。 キャッシュ可をチェックするとドキュメントが読込まれる２回目以降にはキャッシュが作成され高速なページ表示が可能になります。 様々な設定がありますが、とりあえずここではそのままにしておきます。
ドキュメントの修正
今回してみる事ですが、 ページ内の表示を変更して画像を貼り付けて見ます。 内容記入欄のInstall Successfull!という文字を インストールに成功したよ！ と変えます。 カーソルを合わせてWordのように簡単に変更が可能です。
画像の挿入は、挿入したい位置にカーソルを合わせてからエディタの「画像の挿入/編集」ボタンを押します。
画像設定画面がでますので表示画像を選択するために画像URLの行にある「画像参照」ボタンを押します。
このウィンドウ上でサーバーへのアップロードと挿入する画像の選択を行います。
表示されている画像は既にサーバーにアップロードされている画像です。
画像は一度ローカルのPCからサーバーにアップロードすることで利用かのうになります。
「参照」ボタンを押してローカルPC上から画像を選び、「アップロード」ボタンを押す事で画像がサーバーにアップロードされ、サムネイルが表示されます。
フォルダ作成ボタンは画像を整理する際に利用可能です。
また、間違った画像をアップしてしまった場合は画像下のバツボタンを押す事で削除が可能です。
アップロードですが、日本語（マルチバイト）名ファイルをアップしてしまうとサムネイル表示がなされなくなります。
アップロードはなされるのですが、その後なにもできなくなってしまうのでこのあたりは改善をお願いしたいところです。
無事アップロードが終わりサムネイルが表示されたらそのサムネイル画像をクリックします。
先ほど選択した画像が挿入画像として選択されました。
画像に代替テキストがある場合はそれを記入します。
「画像の説明」はaltに、「タイトル」はtitleにそれぞれ挿入されます。
これで文章中に画像が挿入されました。
画像をクリックすると周囲にハンドルが表示されるので、これで拡大縮小などが可能です。
また、ドラッグすることで画像を任意の位置に移動することも可能です。
保存を行いプレビュー等で先ほどおこなった更新が反映されているかを確認してください。
2008年 11月 7日ドキュメント作成
2008年 11月 10日ドキュメント更新