Kenticoの入門ガイド

関連リンク: PDFバージョン | 英語版

このチュートリアルでは、Kenticoで簡単なWebサイトを作る方法を説明します。

The MEDIO clinic sample website

HTMLとCSSコードをKenticoに組み込む方法、コードの一部を動的コンポーネントに変換する方法、およびWebサイトのページとテンプレートを構築する方法について説明します。

チュートリアル用のシンプルなウェブサイトのHTMLとCSSのコードをここからダウンロードすることができます:TutorialWebsite.zip.

Kenticoのインターフェイスについて

Kenticoをインストールした後 (英語), 次の方法で管理インタフェースにアクセスできます。

  • ブラウザのアドレスバーにサイトのドメインの後に/Adminを入力します。 (例:http://mysite.com/admin)

サインインページが表示されます

  • デフォルトのユーザー名はadministratorです。

  • デフォルトのパスワードは空白(パスワードなし)です。

サインインすると、Kentico管理インターフェースが開きます。

インターフェイスはアプリケーションに分かれています。各アプリケーションは、さまざまなタイプのタスクの実行、システムの構成、および情報の表示を可能にする、関連する機能のグループを表します。

 

管理インターフェイスについて

管理インターフェイスのすべてのページは、次の要素の同じヘッダーを共有します。

ヒント:さまざまなブラウザタブで、同時にいくつでもアプリケーションを開くことができます。ダッシュボードまたはアプリケーションリストでアプリケーションを右クリックし、[新しいタブでリンクを開く]をクリックします。

サイト開発の概要

Kenticoは以下の開発モデルを提供しています:

Portal engine

ほとんどのプロジェクトにおすすめです。

ブラウザベースのユーザーインターフェイスで、ページテンプレートとWebパーツを使用してWebサイトを構築できます。このモデルでは、プログラミングやVisual Studioの使用は必要ありませんが、カスタムコンポーネントの作成には使用します。

ASPX テンプレート

標準ASP.NET WebフォームアーキテクチャとVisual Studioなどの標準開発ツールを使用してWebサイトを作成する経験豊富なASP.NET開発者が使用できます。 ASP.NET開発に精通していて、少なくともC#のプログラミングに関する知識が必要です。

MVC

Model-View-Controller (英語)アーキテクチャパターン(ASP.NET MVCフレームワークに基づく)を使用してWebサイトや特定のページを作成することもできます。このモデルは、経験豊富なASP.NET開発者のみが使用する必要があります。

以降、このチュートリアルでは、ポータルエンジンを使用します。

新しいウェブサイトを作成する方法

KenticoでWebサイトの開発を開始する場合は、空の新しいサイトをインストールすることをお勧めします。 Dancing Goatサイトなど、サンプルサイトの1つを使用することもできますが、その場合は必要のないすべてのサンプルオブジェクトを削除するようにしてください。サンプルサイトをインストールする方法については、テンプレートからCreating new sites from templates(英語)を参照してください。

このチュートリアルでは、空の新しいサイトをインストールします。

  1. Kentico管理インターフェイスで、サイトアプリケーションを開きます。

  1. 新規作成ウィザードをクリックします。

  1. ウィザードを使用して新しいサイトを作成するを選択し、次へをクリックします。

  1. 新しいWebサイトの詳細を入力します。

    • サイトの表示名: MEDIO Clinic

    • ドメイン名:このフィールドの値は変更しないでください

    • サイトカルチャー: (規定値を使用)

  1. 次へをクリックします。.

  2. [Step 3]では何も変更しないで次へをクリックしてください。

    • このステップでは、システムが新しいサイトにインポートするオブジェクトを選択できます。

  1. 次の警告が表示されたら、[次へ]をクリックします。

    • 警告:サイト 'MEDIO clinic'の開始に失敗しました。既にこのドメインエイリアスの下で動作しているサイトがあります。最初に既存のサイトを停止し、新しいサイトを手動で開始する必要があります。

    • 2つのサイトを1つのドメインで同時に稼働させることはできません。このチュートリアルでは、サイトの作成が完了した後、以前にインストールしたサイト(通常はDancing Goatサイト)を停止させます。

  1. [Step 5]で、[Blank master page]を選択します。

    • これはウェブサイトのマスターページテンプレートです。

    • 後でいつでも変更することができます。

  2. 次へをクリックします。

  3. 完了をクリックします。

新しい空のWebサイトが作成され、サイトアプリケーションに表示されます。

以前に別のサイトをインストールした場合は、新しいサイトを実行できるように今すぐ停止してください。

  1. あなたが使用したいドメイン(このチュートリアルではlocalhost)で動作しているWebサイトの サイトの停止 () をクリックします。

  2. 新しく作成した、MEDIO Clinicのサイトの開始 ()をクリックします。

複数のWebサイトを同時に実行する

複数のWebサイトを同時に実行したい場合は、異なるドメイン名を設定する必要があります。詳細については、複数のウェブサイト設定方法(英語)を参照してください。

ライセンスキーの追加

Kenticoにライセンスキーを追加する方法については、サイトライセンスの管理(英語)を参照してください

 

ウェブサイトにスタイルを追加する

Webサイトを作成したら、最初に外観とデザインを定義することをお勧めします。これは、KenticoのCSSスタイルシートアプリケーションで管理できるCSSスタイルを使用することで実現します。

このチュートリアルでは次の手順でWebサイトのスタイルを定義します:

  1. サンプルのCSSとHTMLコードを含むチュートリアルWebサイトパッケージをダウンロードしてください。

  2. KenticoでCSSスタイルシートアプリケーションを開きます。

  3. CSSスタイルシートの新規作成をクリックします。

  4. MEDIO Clinic - MEDIO stylesheet を表示名として入力します。

  5. 用意されているサンプルWebサイトのCSSコード(styles.cssファイル)の内容をコピーしてCodeに貼り付けます。.

  1. 保存をクリックします。

  2. [サイト]タブに切り替えて、スタイルシートがMEDIO Clinicのサイトで利用可能であることを確認します。

    • 必要があればサイトの追加でMEDIO clinicを選びます。

スタイルシートをシステムに追加して、Webサイトで使用できるようにしました。さらに、すべてのページにデフォルトでスタイルシートが適用されるように、スタイルシートをWebサイトに割り当てる必要があります。

Webサイトにスタイルシートを追加する:

  1. サイトアプリケーションを開きます。

  2. MEDIO clinicを編集します。

  3. [全般]タブの[サイトCSSスタイルシート]ドロップダウンリストで MEDIO Clinic - MEDIO stylesheet を選択します。

  4. 保存をクリックします。

これで MEDIO Clinic サイトの全てのページにMEDIO Stylesheetをが読み込まれます。

 

 

ページアプリケーションの使い方について

ページアプリケーションでは、Webサイトのコンテンツを追加および変更できます。ここでWebサイトを構築を行います。

このチュートリアルで必要となる基本的なインターフェイス:

  • 編集 モード – ページを編集します。

    • ページ タブ – ページの内容を編集します。

    • デザイン タブ – ページのパーツ(Webパーツ)を編集します。

  • プレビュー モード – 訪問者にページがどのように見えるか確認します。

ページアプリケーションの操作方法について

  • 詳細な操作方法についてはWorking with pages (英語)をご確認ください。

マスターページの作成

マスターページでは、ヘッダー、ナビゲーションメニュー、フッターなど、Webサイト上のすべてのページで共有されるコンテンツを定義できます。マスターページは、Webサイト上の物理ページを表現するのではなく、共通の外観を保証するために他のページに追加されるデザインコンポーネントです。

Webサイト開発の開始時にまずマスターページを定義して、すべてのページが共通の外観でどのように見えるかを確認しましょう。

次の手順でマスターページを定義できます。

  1. サンプルファイルからHTMLコードをマスターテンプレートへ挿入します。

  2. 挿入したHTMLコードの各部分をWebパーツゾーンに入れ替えます。

  3. WebパーツゾーンにWebパーツを配置します。

HTMLコードを貼り付ける

Webサイトの共有部分のHTMLコードをマスターページに挿入します。

  1. ページアプリケーションで、Webサイトのコンテンツツリーのルートページを選択します。

  2. マスターページタブに切り替えます。

  3. 「レイアウトの編集」をクリックします。

  4. デフォルトで入力されているレイアウトの内容を削除します。

  5. サンプルファイル内の「Index.html」をテキストエディターで開きます。

  6. 「<body>...</body>」のHTMLタグの中身をページレイアウト編集画面へコピペします。(<body>タグ自身は含みません)

  7. 「保存して閉じる」をクリックします。

  8. 「Index.html」のファイルから、CSSのスタイルシートとフォントの「<link>」タグを「head」のセクションへ貼り付けます。

  9. 一番上のテキストボックスに「<!DOCTYPE html>」を入力します。

  10. 保存をクリックしてマスターページを完成させます。

この操作によって、サンプルコードをKenticoにコピーしました。

すでにCSSコードを定義しており、CSSスタイルシートがWebサイトにリンクされているため、スタイルは自動的にマスターページに適用されます。プレビューモードに切り替えると、マスターページがサンプルWebサイトとまったく同じように見えることがわかります。

WebサイトのデザインはサンプルWebサイトのデザインと同じ見た目になっています:

Previewing the sample website

ウェブパーツゾーンの追加

Webパーツゾーンは、ページのレイアウトを定義できるWebサイトの要素です。 Webパーツゾーンはコンテナを表しており、そこにWebサイトのコンテンツを簡単に配置して編集することができます。

  1. ページアプリケーションで、編集モードに切り替えます。

  2. デザインタブを開きます。

  3. 緑のページテンプレートヘッダーをクリックし、レイアウトの編集をクリックします。

  4. レイアウトのコード内からナビゲーション部分を探し、<nav>要素内のすべてを削除します。(<nav>タグ自身は消しません)

    • HTMLコードは静的ですが、このメニュー部分を動的にすることによって、作成したページに従って自動的に更新されるようにします。

  5. <nav>要素の中にカーソルを置き、エディタの上にある「挿入」をクリックします。

    • これにより、レイアウトにWebパーツゾーンのコントロールが追加されます。

  6. ゾーンの「ZoneID」を「ZoneMenu」に設定します。

    • Webパーツゾーンの「ZoneID」は各ページテンプレートのレイアウト上で一意にしないとエラーが出ます。

  7. すべての<section>要素を見つけて削除します。(<section>タグ自身も消します)

    • <section>の部分は、ウェブサイトのコンテンツなので、マスターページ(共通の外観)には含めたくないためです。

  8. </header>タグと<footer>タグの間にカーソルを置き、エディタの上にある[挿入]をクリックします。

    • このWebパーツゾーンは、ページのコンテンツがマスターページに配置される場所を表します。

  9. ゾーンの「ZoneID」を「ZoneContent」に設定します。

  10. コードが次のようになっていることを確認します。

 

<header>
<div class="col-sm-offset-3 col-sm-6">
<div class="col-sm-6">
<a href="./index.html" title="MedioClinic homepage" class="logo">MEDIO clinic</a>
</div>
<div class="col-sm-6 nav">
<nav>
<cms:CMSWebPartZone ZoneID="ZoneMenu" runat="server" />
</nav>
</div>
</div>
<div class="clearfix"></div>
</header>
<cms:CMSWebPartZone ZoneID="ZoneContent" runat="server" />
<footer>
<div class="col-sm-offset-3 col-sm-6">
<div class="row">
<div class="col-sm-6">
<h4>MEDIO clinic</h4>
<ul>
<li><i class="fa fa-map-marker"></i> Address: <address>7A Kentico street, Bedford, NH 03110, USA</address></li>
<li><i class="fa fa-envelope-o"></i> E-mail: <a href="mailto:info@medio-clinic.com" title="Email us">info@medio-clinic.com</a></li>
<li><i class="fa fa-phone"></i> Phone number: <a href="tel:5417543010" title="Phone us">(541) 754-3010</a>
</ul>
</div>
<div class="col-sm-6">
<span class="cms">Powered by <a href="http://www.kentico.com" title="Kentico CMS">Kentico CMS for ASP.NET</a></span>
</div>
</div>
</div>
<div class="clearfix"></div>
</footer>

 

  1. 「保存して閉じる」をクリックします。

デザインタブへ戻ると、入れた2つのゾーンが表示されている事が確認できます。

動的なナビゲーションメニューを追加する

Webサイトのメニューを表す動的なWebパーツを追加します。 Webパーツは、Webサイト内のページがメニューに反映されることを保証します。Finding the CSS list menu web part in the toolbar

  1. ページアプリケーションで、[デザイン]タブに切り替えます。

  2. 右側でWebパーツのナビゲーションバーで、「CSS list menu」のWebパーツを探します。

 
  1. オレンジ色の「ZoneMenu」の枠中へWebパーツに入れます。(ドラッグ&ドロップ)

Dragging the web part into a zone
  • または、オレンジ色の「ZoneMenu」のメニューアイコンをクリックし、「新しいパーツの追加」をクリックし、「Navigation」のカテゴリから「CSS list menu」を選択します。

  • 「Web part title」に「メインメニュー (CSSListMenu) 」を入力します。

  • 「保存して閉じる」をクリックします。

ページのプレースホルダについて

ページプレースホルダWebパーツは、Webページの子ページ(ホームページやニュースページなど)が、ロード先のマスターページテンプレート内に確実にロードされるようにします。

緑色のページプレースホルダWebパーツがZoneContent Webパーツゾーンに正しく配置されていることを確認してください。

  • WebパーツゾーンにZoneContentという名前を付けていない場合、ページプレースホルダWebパーツを別のWebパーツゾーンに配置します。ドラッグアンドドロップを使用して、Webパーツを適切なWebパーツゾーンに移動してください。

    The Page placeholder web part in the ZoneContent zone

ここまでの操作によって、マスターページを作成して、Webサイトの共通の外観を定義しました。

Webサイトページの作成方法

マスターページの作成が終了したら、コンテンツを表示する最初のページを作成します。これは通常、ホームページです。

  1. ページアプリケーションの編集モードで, コンテンツツリーの上にある新規作成 (+)をクリックします。

  1. 「Page (menu item)」のページタイプを選択します。

 
  1. ページ名として「Home」と入力し、空白のページを作成オプションを選択します。

  1. 保存をクリックします。

    • ルートの直下に作成したページが挿入されます。

  1. 新規に作成したページのデザインタブで、緑のページテンプレートのメニューをクリックし、レイアウトの編集をクリックします。

  2. 既に入っているレイアウトを削除し、「index.html」のファイルから2つの「<section>」タグ部分をコピーして貼り付けます。(<section>タグ自身も含めます)

  3. 張り付けたHTMLコード内の「<p>」タグの部分をWebパーツゾーンに入れ替えます。1つ目のゾーンのZoneIDを「ZoneA」、2つ目のゾーンのZoneIDを「ZoneB」に設定します。

  4. 「保存して閉じる」をクリックします。

作成した2つのWebパーツゾーンが表示され、HTMLコードとスタイルシートのCSSコードで定義されたスタイルが適用されています。ご覧のように、マスターページで定義したデザイン部分が、Homeページで個別に定義した緑色のページテンプレート領域を囲んでいます。

ここまでの操作によって、WebパーツゾーンにWebパーツを追加し、Webサイトコンテンツを作成できるようになりました。

テキストWebパーツの追加

この例では、コンテンツエディタの編集可能なテキスト領域を準備するためにテキストWebパーツを追加します。

  1. デザインタブへ切り替えます。

  2. 右側のツールバーで、「Editable text」のWebパーツを見つけて、そのパーツを「ZoneA」へ挿入します。(ドラッグ&ドロップ)

  3. 挿入したWebパーツをダブルクリックし、下記のプロパティを設定します:

  • Web part title: 「ティザー」か「Teaser」 (Editable text)

  • Editable region type: HTML Editor

    Setting the Web part title property
  1. 「保存して閉じる」をクリックします。

  2. もう1つの「Editable text」のパーツを「ZoneB 」へ入れます。

  3. 入れたパーツをクリックし、下記のプロパティを設定します:

  • Web part title: 「説明文」か「Description」 (Editable text)

  • Editable region type: HTML Editor

  1. 「保存して閉じる」をクリックします。

Homeページのテキストを表す2つのEditable textのWebパーツの設定ができました。

Webパーツのテキストを編集する

ページタブに画面を切り替えると、テキストが挿入できるようになっていることが確認できます。

  1. サンプルのテキストか好きなテキストを入力します。

  2. テキストエディターの機能を自由に試してください。

  3. 保存をクリックします。

プレビューモードに切り替えると、ライブサイトでの表示状態を確認する事が出来ます。

ここまでの操作によって、コンテンツ管理者が変更できるテキスト領域が2つあるHomeページを作成しました。

ページテンプレートの作成について

Homeページを作成した後、テキストが異なるだけで、まったく同じ見た目のページを複数作成したいと考えてください。そのために、Homeページをページテンプレートにすることができます。そして、他のページを作成するために再利用することができます。

ページテンプレートは、エディタによって追加されたコンテンツ(つまり、ページアプリケーションの[ページ]または[フォーム]タブのに追加できるコンテンツ)がない、ページの基本構造およびコンポーネントを定義します。

既存のページからページテンプレートを作成するには:

  1. ページアプリケーションの編集モードで、Homeページを選択します。

  2. [プロパティ]タブで、[テンプレート]を開きます。

  1. 新しいテンプレートとして保存のボタンをクリックします。

  1. 下記の通り入力します。

    • テンプレートの表示名: MEDIO clinic - Home

    • テンプレートカテゴリ: Home pages

      • 通常は、Medio Clinic用に新しいテンプレートカテゴリを作成しますが、このチュートリアルでは、手順を省略します。

    • 現在のページに割り当てる: はい (チェック)

  2. 「保存して閉じる」をクリックします。

  3. テンプレートの画面でまた「保存」をクリックします。

システムは、Homeページのデザインでページテンプレートを作成します。つまり、ページテンプレートには2つのWebパーツゾーンと2つのEditable text Webパーツが含まれています。 ページタブのWebパーツに入力されたテキストは、ページテンプレートに保存されません。

保存されたページテンプレートを使用したページの作成方法

先ほど保存したページテンプレートを使用したページを作成する方法は:

  1. ページアプリケーションの編集モードで、ルートページを選択します。

  2. コンテンツツリーの上にある作成(+)アイコンをクリックします。

  1. 「Page (menu item)」のページタイプを選択します。

  2. ページ名に「Medical centers」を入力します。

  3. 「既存のページテンプレートを利用」ラジオボタンを選択します

  4. 「Home pages」のカテゴリの中から、「 MEDIO clinic - Home」のページテンプレートを選択します。

  5. 保存をクリックします。

ページテンプレートによって定義されたWebパーツゾーンとWebパーツで新しいページが作成されます。

ページタブに切り替えると、このページ専用のテキストを入力できます。

ライブサイトを確認する

ライブサイトビューを開くには

  1. アプリケーションリストを開き、下部にある[ライブサイト]をクリックします。

新しいブラウザタブでサイトの現在のページを開きます。これはチュートリアルで作成したWebサイトの最終的な外観です。