Download as PDF, PPTX
Editor's Notes
- #2 ・皆様、忙しい中お集まりいただきありがとうございます。 ・このような場を設けていただいた、 山陰ITレーダー編集部様ならびに関係者様の皆様、ありがとうございます。
- #26 野原から、私、中野にかわりまして、ハンズオンに取り掛かる前に、導入として、シラサギの概要と操作方法を簡単ではありますが、説明させていいただきます。
- #27 本日のハンズオンを理解して、次の案件に、シラサギを採用していただければと思います。
- #28 導入では、公開画面、管理画面、メニューの操作方法、コンテキストメニュー、フォルダ、ページ、レイアウト、パーツ、アドオンなんかについて解説していきます。
- #29 ・ハンズオンの導入では、シラサギのデモを用いて、シラサギが持つ機能の概要を説明していきます。 ・皆様、ブラウザで、この URL を開いてください。
- #30 ・自治体サンプルと、企業サンプルの 2 つのデモを提供しています。 ・これらは、広く一般に公開しているので、公開画面と呼びます。 ・下の方にあるのが管理画面で、 管理画面では記事の投稿や削除などの機能が利用できます。 ・シラサギは、マルチテナントをサポートしているので、公開画面は 2 つありますが、管理画面は 1 つしかありません。 ・管理画面は、ユーザIDとパスワードでの承認が必要で、今回は、左にあるシステム管理者のアカウントを使用して、説明を進めさせていただきます。
- #31 ・管理画面がどんな機能を持つか見て行きたいと思います。 ・管理画面を表示します。 ログインは、画面の通り sys@example.jp / pass です。 ・ログインすると表示されるのは、システム全体を管理する画面です。 ・左側にはシステム管理用のメニューが並んでいます。 今回は時間の都合上、説明は割愛させて頂きます。 ・右側には管理できるサイトの一覧が表示されています。 デモなので、 画面に表示されているのは 2 つしかりあせんが、「サイト」をクリックして新規追加することができます。 ・なお、左側のメニューですが、シラサギでは「ナビ ビュー」と呼んでいます。 ・次にサイト管理にどのような機能があるかを見て行きたいと思いますので、「自治体サンプル」をクリックしてください。
- #32 ・左側のナビビューには、サイトを管理するためのメニューが表示されています。 ・最初に選択されている「コンテンツ」は、よく使用する機能へのショートカットです。 ・フォルダ、固定ページ、パーツ、レイアウトなどの管理メニューがあります。 ・CMS の主役といえば「ページ」ですが、 「フォルダー」を使用して階層で構造でページを管理することで管理しやすくしています。 ・どの企業様もそうですが、トップページには非常に凝った専用のページを配置することが多いです。 そのような固定の URL で表示する一枚物のページを「固定ページ」で管理することができます。 ・シラサギでは、様々なページで繰り返し出現する再利用可能な部分を「パーツ」という部品にして管理することができます。 パーツは、レイアウトに組み込んで使用します。 ・「レイアウト」とは、ページ全体をどのように構成するかを定義したもので、 ロゴの位置、ナビゲーションの位置、メニューの位置、本文の位置、フッターの位置などを定義したものです。 ・フォルダ書き出し、ページ書き出しは、フォルダやページを HTML に変換し、ローカルに保存します。 ローカルに HTML として書き出しておくことで、ユーザからのアクセスを効率よくさばくことができるようになります。 (x_sendfile という機能を利用して apache や nginx が直接ファイルを応答することができるようになります）。
- #33 ・フォルダがどうなっているかを見て行きたいと思いますので、ナビメニューの「フォルダー」をクリックしてください。 ・左のメニューには、フォルダーを新規作成する「新規作成」があります。 ・右にはフォルダー一覧が表示されています。 ・フォルダ一覧ですが、ちょっと操作が特殊です。 ・タイトルをクリックすると、フォルダ内に登録されている項目が見えます。 ・フォルダ外をクリックすると、コンテキストメニューが表示されます。 ・一覧の左から、「タイトル」「フォルダー名」「モジュール」があります。 ・まず、「モジュール」とはフォルダに割り当てられている機能のことで、 イベント管理する「イベントカレンダー」フォルダには、「カレンダー」モジュールが割り当てられています。 記事を管理する「記事」フォルダには「記事」モジュール割り当てられています。 ・シラサギの「フォルダー」はページを階層構造で管理する以外の機能もあり、 CMS では、一覧やイベントカレンダーなどのページ以外のコンテンツがあるのが普通です。 これらを「フォルダー」で定義します。 ・フォルダもコンテンツの一部であると説明しましたが、モジュールとはコンテンツの種類とみなすこともできます。 ・「フォルダー名」は、公開画面の URL のパスと対応しています。SEO 的に重要な部分ですので、フォルダを新規に作成する場合は十分検討してください。 シラサギでは、フォルダーは「フォルダ名」を持ち、ページは「ファイル名」をもち、それぞれ URL のパスと対応しています。 ・フォルダがコンテツの一部だと言いました。これを確認するために「記事」の余白をクリックし、表示されたコンテキストメニューから「公開画面を見る」をクリックしてください。 ・記事ページの一覧が表示されました。 ・では、この画面がどのような構成であるかを確認してみたいと思いますので、管理画面に戻って、余白をクリックし「詳細を見る」をクリックしてください。
- #34 ・フォルダの詳細が表示されました。 ・左側に、記事フォルダを管理するためのメニューがあります。 ・その下にアドオンとありますが、これは後ほど解説します。 ・右側には大きく、記事フォルダの構成が表示されています。 ・時間の都合上、注目して欲しいところだけ解説しますと、記事フォルダは、上部HTML、ループHTML、下部HTML の 3 つの設定を持つことができ、 ちょうど、公開画面で記事一覧に相当する部分は、ループ HTML にあたります。 ・公開画面の繰り返し以外の部分はどこで設定されているかというと、「レイアウト」に設定されている「記事レイアウト」で設定されています。 ・「記事レイアウト」をみてみましょう。 ナビメニューから、レイアウトをクリックしてみてください。
- #35 ・レイアウトが表示されました。 ・画面左には先ほどみたフォルダがあり、画面右にはレイアウト一覧が表示されています。 ・レイアウトにフォルダがありますが、弊社では、1) レイアウトの数が少ないこと、2) フォルダの下に置くと逆に管理しにくいことから、レイアウトのフォルダは使用していません。 ・レイアウトは、厳密に言えばコンテンツではないんですが、管理しやすいようにファイル名を持っています。 ・先ほど見た「記事フォルダ」に設定されている「記事レイアウト」を確認してみましょう。
- #36 ・記事レイアウトが表示されました。 ・左側にはレイアウトを管理するためのメニューが有り、その下にはアドオンがあります。 アドオンについては後ほど説明します。 ・右側には、レイアウト名、ファイル名、肝心の HTML があります。 ・シラサギではレイアウトを HTML で書きますが、少し違うのは </ part …/> という部分です。 ・様々なページで繰り返し出現する再利用可能な部分を「パーツ」という部品にし、そのパーツを組み込んでいます。 ・他、重要なのは yield という箇所です。 Ruby プログラマならおなじみですね。そうです。Ruby と同じ yield です。 ・yield が指定された箇所に、先ほどみた、上部 HTML、ループ HTML、下部 HTML が展開されます。
- #37 ・左のメニューから「パーツ」をクリックしてみましょう（上図）。 ・様々なパーツを標準で提供しています。 ・「パーツ属性」に注目してください。 ・「HTML記述」とあるパーツを開いてみると、パーツの内容が HTML で記述されています。 ・「HTML記述」以外のパーツは、Ruby（Rails）のプログラムで書かれています。
- #38 ・時間も残り少なくなってきましたので、CMS の主役である「記事ページ」を見て行きたいと思います。 ・フォルダーに戻り、「記事フォルダー」の中身を表示してみてください。 ・皆様、もう見慣れましたね。 左には管理するためのメニューが有り、右側には記事一覧が表示されています。 ・記事は、タイトル、ファイル名などの情報を持っており、フォルダーのところでも解説しましたが、 記事のファイル名は、 URL のパスに対応しており、SEO 的に非常に重要です。 ・デモなので、SEO 的に全くダメな連番がついていますが、 皆様がサイトを構築する際は、SEO を考えて適切なファイル名をつけてください。 ・なお某 CMS では、記事のパスが固定されておらず、SEO 的なチューニングがしにくかったんですが、シラサギでは大丈夫です。
- #39 ・「転居届」をみてみましょう。 ・もうみなさん見慣れましたね。左側には記事を管理するためのメニューが有り、下にアドオンがあります。 アドオンの解説はこの後すぐです。 ・「本文」には、記事の内容が設定されています。 ・記事ページを公開画面で確認してみましょう。 ・本文に設定されている内容と同じものが表示されています。 ・本文以外の「ナビゲーションメニュー」や「いいね」ボタンは、先程と同様、記事ページに設定されているレイアウトで表示されています。
- #40 ・お待ちかね、いよいよアドオンを解説する時がやって来ました。 ・アドオンの例として、Article::Page をお見せしたいと思います。 シラサギでは、このようにアドオンを include することで、モデルクラスを簡単に拡張し、機能を追加することができます。 ・少し補足しますと、シラサギでは、ドキュメント指向データベースの MongoDB をバックエンドに採用しています。 ・MongoDB というのは、RDB のように事前にテーブル定義を決めなくてもいいんですね。 ・シラサギでは、目的に応じたいろんな種類のページが有り、ページごとに属性が異なり、様々なモデルが存在しますが、 全てのページは、”cms_pages” というテーブル（MongoDB ではコレクションと呼びますが）、に入っています。 ・シラサギが、このようにアドオンを include することで簡単に機能を追加できたり、様々な種類のページを “cms_pages” という単一のテーブルに格納できるのは、 MongoDB をフル活用しているからです。
- #41 ・導入として、次の項目を見てきました。 ・以上、簡単ではございますが解説を終わり、ハンズオンに入りたいと思います。 ・ハンズ・オンでは、ローカルにインストールされた Ruby 開発環境を使用します。 もし、VM などの準備が必要でしたら、ご準備の方をお願いします。 ・では、担当の伊藤に交代しますので、少々お待ちください。
- #116 5[min]