Upload
hishikawa-takuro
View
5.044
Download
6
Embed Size (px)
DESCRIPTION
オープンソースCMS「concrete5」でウェブサイトを作ってみよう!初心者対象のチュートリアルガイドです。用意するものはブラウザのみ。HTML/CSS/PHPの知識は一切不要。勉強会などで使用してください。
Citation preview
はじめてのconcrete5でウェブサイト作成
入門チュートリアルガイドby Takuro Hishikawa (Concrete5 Japan Inc.)
v.2015.1.9
画面はconcrete5.7.3のものです。
concrete5とは?
• オープンソースのCMS
• オープンソース…ソフトウェアのプログラムのソースコードが公開されていること。公開されているので、どなたでも入手してライセンスに従って利用できる。
• CMS…コンテンツマネジメントシステムの略。ウェブサイトのコンテンツを管理するためのシステム。
concrete5の特徴
• ドラッグ&ドロップで、ページ内にブロックと呼ばれるパーツを並べていく方式
• 公式サイトからソフトウェアをダウンロードし、サーバーにインストールして使用する
• もともとは企業などで大人数でコンテンツを作成するための有償のソフトウェアがオープンソースになったもの
concrete5の歴史• 2003年にアメリカで開発された「Concrete CMS」が前身
• 2008年にオープンソースとして配布開始、2009年には日本語のユーザーコミュニティが発足
• 2011年に日本国内の企業ユーザーのサポートや、concrete5のビジネス活用を促進するコンクリートファイブジャパン株式会社ができる
• 2014年『concrete5 公式活用ガイドブック』出版
2つのバージョン• バージョン5.6系と5.7系の2つのconcrete5があります
• バージョン5.7はモバイル時代に対応した新しいインターフェースを実装した最新のconcrete5ですが、リリースされたばかりで情報も少ない
• バージョン5.6系も今年まで最新版が開発されていた安定して動作するバージョン。5.7がリリースされたあともメンテナンスは継続されます。『concrete5 公式活用ガイドブック』で解説しているのはこちら
• 今回使用するのはバージョン5.7です
concrete5 関連リンク
• 日本語公式サイト concrete5-japan.org
• 英語公式サイト(本家) concrete5.org
• Facebook www.facebook.com/concrete5japan
• Twitter twitter.com/concrete5japan
concrete5を インストールしてみよう!
ウェブサーバーについて• PHPとMySQLが利用できるウェブサーバーが必要です(PHPのバージョンや必要モジュールなどさらに詳細な要件は公式サイト「使用条件」ページを参照)
• 自動インストーラーのあるサーバーもあります(公式サイト「ホスティング会社別インストールガイド」ページを参照)
• ご自分のパソコン内にウェブサーバーのソフトウェアをインストールすることで、ローカルマシンでconcrete5を動作させて開発確認することもできます。XAMPP, MAMPなどがよく利用されています
ウェブブラウザについて
• concrete5はブラウザから操作します。通常のウェブサイトよりも複雑な動きをしますので、古いブラウザだと付いて来れないことがあります。できるだけ最新バージョンを使用してください。
• また、高速に動作するブラウザがオススメです。ChromeやFirefoxが良いです。
今回使用するのは
• NIFTY Cloudの「C4SA」というサービスを利用します
• 月額900円~から利用できるアプリケーション開発プラットフォーム
• 15日間無料で利用できます
• あとからスペックアップができるクラウドサービス
• concrete5の動作に必要なセットアップを自動でやってくれます
いずれかのアカウントでログインしますSNSやGoogleのアカウントをお持ちでない方は @nifty ID を作成してください
キャンバスを作成新規キャンバス ボタンをクリック
Canvas S プランを選択D1, D2はさらにハイスペックですが無料期間が短いです
コンテクストを選択concrete5 を選んでください
キャンバスに名前をつける分かりやすい方がいいでしょう
キャンバスが自動で作成されています
しばらくお待ちください
キャンバスの作成が完了キャンバスを開く ボタンをクリック
作成されたサイトにアクセスしましょう
インストール言語(地域)の選択Japanese (Japan) を選択しましょう
サーバーのチェックが行なわれますお使いのサーバーによって赤いチェックが出た場合は、
サーバーの設定を見直してください。
サンプルコンテンツの選択今回は「空白のサイト」を選択します
サイトの基本情報を入力パスワードは必ず複雑で推測できないものに!
パスワードを忘れるとログインできません。
必ずメモ!
データベース情報を入力左側がC4SAのコントロールパネルです。
※コピー&ペーストすると不要な改行が含まれることがあります。 タイプして入力してください
インストール完了!
システムと設定ページを開く
アクセシビリティページを開く
ツールバータイトルを有効化にチェックして保存しましょう慣れるまではタイトルを出した方が便利
サイト名を入れましょう
「新規」ボタンでブロック一覧を開き、「記事」ブロックを「Header Site Title
Area」までドラッグします
エリアの枠線が太くなったら、離します
サイト名を入力して、見出し1を選びましょう
サイト名を選択してから「リンクを追加」をクリック
サイトマップアイコンをクリック
ページを選択すれば、そのページへのリンクをつけることができます。
いまはまだ「ホーム」ページしかありません。
「挿入」ボタンでリンクが完了サイト名をクリックするとホームページに戻れるのがセ
オリーです
エディタの「保存」ボタンをクリックして「記事」ブロックの編集を完了
画像ブロックを入れてみよう
「新規」ボタンで開いたパネルから「画像」ブロックを「メイン」エリアにドラッグ&ドロップして配置しましょう
画像の「新ファイル選択」をクリック
「ファイルマネージャー」が表示されますので、「ファイルをアップロード」をクリックファイルのアップロードができたら、ファイルをクリッ
クして選択
その他のオプションALTテキストは必ず入力しましょう。画像の代替(Alternate)となるテキストです。視覚障害など画像が見れない方に提供する情報になります。
画像を用意してない方は… フリーライセンスの写真サイトでダウンロードしましょう
利用規約やライセンスに注意
どーん!入りましたちょっと大きいですね
「画像」ブロックをクリックしてメニューを表示、「ブロック編集」をクリック
選択した画像をクリックしてメニューを表示、「編集」をクリック
幅を1200pxくらいに縮小、画像の切り抜きで高さを小さくしましょう操作をデモンストレーションしますので見てください
お好みでフィルターもかけましょう画像の編集が終わったら「保存」ボタン
画像の編集を反映させるため、一度画像を「クリア」して選び直しましょう
良い感じになりました
コピーライト表記を入れましょう
「記事」ブロックを「Footer Legal」エリアに ドラッグ&ドロップで配置しましょう
こんな感じでフッターには連絡先やお店の住所なども記載します
編集を保存しましょう
「編集モード終了」ボタンをクリック、公開、または一時保存、破棄を選びます
あとでどのような変更をしたか分かるように、 コメントはできるだけ残しましょう
「公開」すると即、変更が反映されます。 「保存」すると、このようにページが
「承認待ち」になります。
「このバージョンを承認する」ボタンを押すまで、 一般ユーザーにはひとつ前のバージョンが見えている状態です。
編集履歴(バージョン)は、 「設定」ボタンの「バージョン」メニューから確認できます。過去のバージョンを「承認」すると、そのバージョンが一般公開になり、最新バージョンは下書き扱いになります。
ちょっとウェブサイトっぽくなってきましたね!
レイアウトを追加してみよう
編集モードで、「メイン」エリアのタブをクリックしてメニューを開き、「レイアウトを追加」をクリック
上下の▲▼でカラム数を調整 □を左右に動かして幅の調整
「レイアウトを追加」ボタンで確定
レイアウトで分割したエリアに、 「特色」ブロックを置いてみましょう
レイアウトを使うと情報の整理ができます
レスポンシブデザインレイアウトは、幅の狭い画面で見ると縦に並びます。これを「レスポンシブウェブデザイン」といい、スマートフォンやタブレットなど、幅の狭い画面での表示に対応できます。
レイアウトは見た目だけで追加するのではなく、縦に並べた時に情報の意味が通っている必要があります。
編集するマシンの画面が小さいと、レイアウト機能を追加したのに何故か縦に並ぶ?ということがありますが、このためです。
レイアウト作成のための参考資料
• 「モバイルファーストからコンテンツファーストへ」レスポンシブWebデザイン専門家が語る、コンテンツの捉え方http://contentmarketinglab.jp/trend-in-japan/responsive-web-design-4.html
• レスポンシブ ウェブ デザインに再構築し、ユーザー動向と収益性を大きく改善「なつレゴ」事例http://adsense-ja.blogspot.jp/2013/11/4.html
ページを追加してみよう
「新規ページ」ボタンから、「新しいページ」のリンクをクリック
新しいページには、空の記事ブロックがひとつ置かれているだけの状態です。サイト名とコピーライトは共通ですでに入っています。「サイト全体の」と表記されているエリアは、中身が全ページ共通になります。
記事ブロックの上に「ページタイトル」ブロックを配置してみましょうページの名前を自動で表示する便利なブロックです。
このまま「新規」ボタンで追加まだページの名前を付けていないので空っぽで表示され
ますが、気にせず続けましょう
記事ブロックを編集しましょうブロックをクリックしてメニューを表示、
「ブロック編集」を選択
記事ブロックを保存したら、 ツールバーの「設定」ボタンをクリックしてください。
基本情報をすべて入力し、「公開」ボタンをクリックしてください。
ページ名はナビゲーションにも表示されますので分かりやすく。 「ページ位置」は、サイト内のどの位置にページを配置するかを選びます。
ページが作成できました!
次に、「お問い合わせ」ページを作成してみましょう。
「お問い合わせ」ページは 3つのブロックで構成されています。
「フォーム」 ブロックを追加してみましょうフォームに表示する「質問」のラベルと、答えのタイプを選択し、「新規質問」をクリック。これを繰り返して、最後に右下の「新規」ボタンをクリックします
「編集」タブから 追加済みの質問を編集したり、 並び替えができます。お問い合わせの内容はデータベースに保存され、管理画面から確認できます。メールで通知を受け取りたい場合は、「オプション」タブで設定してください。
ナビゲーションを追加してみよう
「オートナビ」ブロックを「Header Navigation」エリアに追加しましょう
設定はそのままでOKです設定項目の詳細は、公式サイトを参照してください。
ナビゲーションのデザインを調整しましょう
ブロックメニューの「デザイン&カスタムテンプレート」を選択します
カスタムテンプレートを変更しましょうギアボタンをクリックし、表示される「詳細」パネルの「カスタムテンプレート」のプルダウンで、「レスポンシブヘッダーナビゲーション」を選択して、「保存」をクリックしてください。
ナビゲーションのデザインが 変更されました!
「お知らせ」機能をサイトに追加しましょう
まず「News」ページを作成します。中身は空で構いません。
あとでお知らせの一覧ページにします。
お知らせ専用のページタイプを作成します。 「ページ」の横にある「コピー」ボタンをクリックページタイプ…サイト内の様々なページを、種類別に整
理するための機能。
名前とハンドルを設定して「コピー」ボタンをクリック名前…ページを作成する時に選択肢に出てくる ハンドル…システムで使用。半角英数字で設定
作成したページタイプの 「基本情報」ボタンをクリック
「お知らせ記事」ページタイプの編集!
コンポーザーで開きますか?を「はい」に
公開方法を選びます先ほど追加したお知らせ一覧ページの下の階層に、
新しいお知らせ記事が追加されていくようにする設定です。 最後に「保存」ボタンをクリック
次に、作成したページタイプがどのように出力されるかを設定しましょう
「デフォルトを編集」ボタンを クリック
編集モードに切り替え、「メイン」エリアに「ページタイトル」ブロックを配置してください
通常のページ編集と同じ手順です
「ページタイトル」ブロックのカスタムテンプレートを「バイライン」に変更して保存!
ブログの様に日付などが表示されるテンプレートです。
「コンポーザーブロックコントロール」ブロックをページタイトルの下に追加しましょう。ページタイプのデフォルトを編集する時のみ使える特殊
なブロックです。
このようになればOKです「編集モード終了」ボタンをクリックし、変更を保存し
てください。
新規ページからいま作成した 「お知らせ記事」ページタイプを選択
「お知らせ記事」の作成ができるようになりました「公開」ボタンで公開
「News」ページを、お知らせ記事の一覧ページにしましょう
Newsページにアクセスし、「ページリスト」ブロックを配置しましょう。
表示件数を指定し、表示するページタイプを選択しましょう
ここでは、「お知らせ記事」を選択。件数はお好みで
その他の設定の例
お知らせページができました!お疲れさまでした。ページタイプを設定しておくと、日々
の更新の手間を削減することができます。
備考: 作成中の下書きページは、「新規ページ」の下に表示されています。
フルサイトマップでサイト全体の構造を考えよう
サイト全体の構成を「フルサイトマップ」ページで確認できます
ページのアイコンをつかんでドラッグ&ドロップで並び替えができます移動できる位置に線が表示されますので、その状態で離
すと離した位置にページが移動します
ドラッグして他のページの上でドロップすると、そのページの下層にページが移動します移動、エイリアス、コピーから操作を選択できます。
その他、ウェブサイトの公開前にやっておくことを
さらっと紹介…
システムと設定 > SEOと統計
• プリティーURLconcrete5のデフォルト設定ではURLに /index.php/ が入りますが、これを消して短いURLにします(一部対応していないサーバーもあります)
• トラッキングコード Google Analyticsなどのアクセス計測タグを入力します。
システムと設定 > 適化 > キャッシュとスピード設定• PHPは、ウェブサーバーにアクセスがある度にデータベースからデータを読み込み、HTMLに整形してウェブページを表示する関係で、表示に時間がかかります。処理結果を一時的に保存しておくことで表示を高速化することができ、その仕組みをキャッシュと言います。
• ウェブサイトを公開したら、キャッシュは基本的に有効にします。デザインの変更等大きな変更を行う際は無効にしておきます。
• フルページキャッシュは劇的に表示を高速化しますが、「すべての場合でキャッシュを利用」オプションを使うと、フォームなどの「動的」なブロックが、動かなくなります。
システムと設定 > 適化 > 自動実行ジョブ
• 検索ブロックのための検索インデックス(索引)の作成、SEOのためのsitemap.xml(検索エンジンにサイト内のページの一覧を通知するファイル)の更新、古いページバージョンを削除してデータベースを軽くする、などのメンテナンス処理を定期的に実行する必要があります。
サーバーでcronが 使えない場合は、 「ページにアクセス があった時に処理」 を選択してください。
(C4SAは使えません)
システムと設定 > 権限とアクセス
• サイトアクセスウェブサイトの作成中で一般公開したくない、又はログインユーザーのみの非公開サイトを作りたい時
• 上級権限モード 企業などの人数の多い組織向けの詳細な権限を設定できるモード
• IPブラックリスト不正ログイン対策
システムと設定 > Eメール
• メールが送れないサーバーの場合、フォームブロックの通知メールやパスワードリセットメールが届かない。
• 外部のSMTPサーバーを介してメールを送信することができる。プロバイダーで提供されているSMTPサーバーやGmailなどを使うことができる
• C4SAはメールが送れないタイプのサーバー
Gmail経由でメール送信する設定の例
ブログ設定
• ブログの利用設定はちょっと複雑ですが、どのようなブロックを配置するかは、インストール時に「フルサイト」を選択すると分かります。
• アメブロ、WordPressなどを利用し、「RSS表示」ブロックで最新記事を読み込むこともできます。
concrete5を拡張• テーマ(外観)やアドオン(追加機能)をダウンロードし、concrete5を拡張することができます。
• コミュニティに接続するには、concrete5.orgにユーザー登録が必要です。
• コミュニティには世界中の開発者が開発したテーマやアドオンが登録されており、無償でダウンロードできるものもあれば、有償のものもあります。ライセンスもオープンソースではないので注意。
• 購入にはクレジットカードまたはPaypalのアカウントが必要。
テーマを自作するには…
• 公式サイトでドキュメントを充実させていきます!
• 5.6系の情報は比較的充実しています。『concrete5 公式活用ガイドブック』もよろしく
ではいよいよ、デザイン カスタマイズしてみよう!
「設定」ボタン > デザイン > 選択されたテーマの「カスタマイズ」ボタンプリセットの切り替えで、お手軽イメージチェンジ!
各種見出しや様々な要素を並べた デザイン確認用ページを作ると デザインカスタマイズに便利!
自分だけのウェブサイトが作れましたか? (時間切れかな…)
後に… C4SAの無料期間は15日な
ので気をつけて
はじめてのconcrete5でウェブサイト作成
チュートリアルガイド