Hello, concrete5.
はじめましての方が多いかもしれませんが、Olein Design（@OleinDesign）という屋号でフリーランスとしてお仕事させていただいております。（Twitterでは主に@Olein_jpで呟いています）
こちらの記事はconcrete5アドベントカレンダー６日目の記事になります。周りを見渡しても浮いてる感ハンパないですが、どなたかのお役に立つ記事を書ければと思います。
５日目はfujigoco2255さんの『マーケッター視点で見た concrete5』という記事でした。「自由なコンテンツ編集＝PDCAが早い」というポイントは運用フェーズではとても大切なことですよねー。とても勉強になりました。
６日目の僕は「MAMPを使ってconcrete5をローカル開発環境にインストールしてみる」と題しまして、サーバーを持ち合わせていない初学者さんでも自分のパソコンにconcrete5をインストールして触ってみることができますよーということを書いてみようと思います。頑張ります！
concrete5を知るきっかけ
本題に入る前に僕がconcrete5を知ることになった流れをサクッと触っておこうと思います。
最初に知ったのは今年の２月にconcrete5公式の書籍が発売されたくらいのタイミングでした。書籍を書店で手に取ってみて（それまではほとんど知りませんでした）それまで仕事でも多く利用してきたWordPressとの違いを知り、いろんなCMSがあるんだなぁと思った記憶があります。
それから数ヶ月後、ほぼ最近です。僕はWordPressが大好きです。WordPress繋がりで知り合えた方も多いですし、仕事でもWordPressを利用することが多くありました。しかし、そんな中でいろんな気持ちも抱いてきました。その中で一番よく思っていたのが、ユーザーやクライアントのスキル（PC操作スキルやそういったものに対する慣れ）に応じて使い勝手は雲泥の差になるなということです。実際に、お仕事で作らせていただいたホームページのメディア（ブログ）が更新が滞っていたりするのを目の当たりにすると、そういった問題はないがしろにはできないなと感じます。ホームページの管理・運営のし易さというのは、クライアントにとってはかなり上位に位置する問題になりえます。
そこで思い出したのがconcrete5です。WordPressとは明らかに違う管理方法で、それぞれ比べてみてもメリット・デメリットの違いは興味をそそられました。そして、自らの来年の目標として「新しく複数のCMSをクライアントに提案できるレベルまで学習を進める」ということを掲げました。
まずは触ってみないと話は始まりません。しかし、最初からサーバーにインストールするということができない状況の方もみえるかもしれません。Webの業界ではない方であればサーバーを持ち合わせていない可能性も高いですし。であれば、まずは自分のパソコンの中にインストールしてみて使い倒してみてはどうでしょうか。僕はまずこの方法でconcrete5を触り倒して見たいと思います。（クライアントに操作の練習をしてもらうためにクライアントのPCに入れて練習用に使ってもらうということもできるかも）
では、そもそもconcrete5って何？という方のために簡単に紹介してみます。
concrete5とは
アメリカ発のオープンソースCMS
concrete5とは、オープンソースのCMSの一つで世界中の有識者が開発に参加しています。そして、日本ではコンクリートファイブジャパン株式会社さんが先頭に立って広めてらっしゃいます。特に今年は書籍も発売されたということもあり、認知度も右肩上がりなのではないでしょうか。
CMSと言われてピンと来ない方も多いかと思います。CMSとは「コンテンツ・マネージメント・システム」の略で、ホームページやWebサイトのコンテンツ（写真や文章などの掲載内容）をマネージメント（管理）するシステム（仕組み）という意味になります。誤解を恐れずにもっと簡単に例えるならば、ホームページの内容を比較的簡単に修正・変更・更新ができるようにしてくれるシステムと言うようなものです。
より直感的に修正や更新ができる
最近では、Webを生業にしない方の中でもご存知の方が多いWordPressですが、これもCMSです。しかし、大きな違いがあります。それはコンテンツ（内容）を修正・更新する方法にあると感じています。
WordPressでは基本的に管理画面にてコンテンツに手を加えます。文字を修正したり、写真を挿入したりするほとんどの作業を管理画面の中から行います。
また、concrete5ではビジュアルを確認しながら修正や変更を行います。簡単に言うと、実際のホームページのデザインを見ながら文章や写真などを修正・変更・更新したりするイメージでしょう。厳密に言うと実際の表示を100%直感的に編集できるというわけではありません。
ユーザーが割ける学習コストやスキルによって選べる
管理画面を利用して修正や変更をすることに慣れている人にはそこまで問題にならないかもしれませんが、初めてホームページを持つ人や管理する人などに、管理画面の操作方法を一からレクチャーして（もしくは専用マニュアルを作成して）操作を覚えてもらうというのは、かなりハードルが高くトラブルに結びつくこともあります。
また、運用からが本当に大切な部分でもあるホームページなのですが、そこにストレスを抱えてしまうようでは本末転倒と言わざるを得ません。ですので、運用部分もしっかりと視野に入れた上で、CMSが必要がどうかも含めて提案していけるようにならなければなりません。
このような理由も踏まえて、一つのCMSとしてconcrete5について学習していこうと考えました。
では、本題の「concrete5をMAMPを利用したローカル開発環境にインストールして触れるような状態を作るまで」を、可能な限り丁寧にご紹介してみようと思います。
インストールの準備
では、本題のインストール方法の説明を始めます。
今回はローカル開発環境にインストールすることを想定していますが、実際に案件等で利用する場合も想定して、動作環境にも目を通しておく方が良いかもしれませんね。
使用条件 :: concrete5 Japan 日本語公式サイト
まずは、インストールの準備としてデータベースを新しく作成するところから始めましょう。まだMAMPをインストールされていない方はこちらからダウンロードしてインストールしておきましょう。
MAMPを起動してphpMyAdminを表示
まずは、MAMPを起動します。MAMPをインストールした後に設定を変更していなかったら自動的にMAMPのスターター画面がブラウザで表示されます。
上部にツールバーがあり、【ツール】から【phpMyAdmin】を開きます。
すると、ちょっと小難しそうなデータベースを触れる管理画面に移動します。これがphpMyAdminです。WordPressを同じようにローカル開発環境に入れたことがある方は見たことがあるかと思います。
タブメニューが左から【データベース】【SQL】【状態】・・・と続きますが、新しくデータベースを作るときには一番左の【データベース】を選択します。
すると、【データベースを作成する】の下に入力フォームが現れます。そこに、今回作るデータベース名を入力します。こちらのデータベース名は後ほどconcrete5のインストールの際に必要になるので忘れないようにメモしておきましょう。
そして、その右の【照合順序】という部分ですが、選択肢の中から【utf8_general_ci】を選んでください。
入力内容を確認したら【作成】ボタンを押します。
新しくデータベースを作成できました。確認のため、左側サイドバー内に新しく現れた先ほど作成したデータベース名（画像でいうconcrete5_6）を選択して、メニュータブの中から【操作】をクリックします。こちらの画面で照合順序が正確に「utf8_general_ci」になっているかを確認することができます。
これで新しくデータベースを作成することができました。
concrete5をダウンロードする
データベースは作成できたので、本体となるconcrete5をダウンロードしてきましょう。
ダウンロード :: concrete5 Japan 日本語公式サイト
今回はインストール方法の説明がメインなので詳しくは割愛しますが、個人的にconcrete5を舐めまわしたいと思っているので、最近までメインで利用されてきた5.6系と新しくバージョンアップされた5.7系の両方を別々にローカル開発環境に設定し触っていこうと思っています。
今回は【バージョン5.6.3.2】（記事執筆時）をインストールいくので、該当するものをダウンロードします。
ダウンロードしたデータはZip圧縮されているデータですので、ダブルクリックして解凍します。解凍したデータを任意のフォルダに移動させましょう。
僕の場合は、http://localhost:8888/concrete5_6/というURLでアクセスできる場所（フォルダ）に移動させました。お好きな場所で構わないと思いますが、後ほどインストールする際にブラウザでアクセスしないといけないので把握できるものにしましょう。
データを置いたURLにアクセスしてインストールを開始する
上までの手順でインストールの準備は完了しました。そして、ここからはconcrete5のインストール作業となります。
まずは、先ほど解凍したconcrete5のデータを置いた場所にブラウザでアクセスします。（当然ですが、MAMPは起動しておいてくださいね）
MAMPのデフォルト（初期）設定のままですと、MAMPフォルダ内のhtdocsというフォルダが
http://localhost:8888の直下となるはずです。なので、例えばhtdocs内にconcrete5というフォルダを作成し、その中にデータを入れたのであればアクセスするURLはhttp://localhost:8888/concrete5/となります。ちょっとややこしい説明で申し訳ないです
そして、アクセスするとこのように表示されるかと思います。
日本語で利用したいので、【Language : English】のところを【日本語】に変更して【Choose Language】をクリックします。現在のところ、日本語と英語だけ選べるような形みたいですね
すると、日本語で下の画像のように表示されるかと思います。インストールをするにあたって必要なことを事前にconcrete5側がチェックしてくれています。僕は特に何かバージョンを上げたり環境を作った覚えはありませんが、最新のMAMPであればこのような状態になるかと思います。
すべての項目が下画像のようにグリーンチェックマークがついていたら【インストールを続ける】ボタンをクリックします。
インストールを開始する前の最後の工程です。サイト情報や管理者情報、データベース情報をこちらに入力します。
今回の場合、データベース情報はこのようになります。
- サーバー
- localhost
- MySQLユーザー名
- root
- MySQLパスワード
- root
- データベース名
- 新規で作成しいたデータベース名
また、サンプルコンテンツを２つ選ぶことができます。ちょっと調べてみただけなので間違いなく説明不足だとは思うのですが、空白のサイトはHTMLやCSSをガリガリ書いていく方向けのまっさらな状態、ブログ付きサンプルコンテンツは最低限ホームページに必要な機能がごっそり揃っている状態だと認識しています。有識者さんの説明を聞いた方がいいかも…です
必要な項目をすべて入力して【concrete5をインストール】をクリックします。
すると、インストールが開始されしばらく経つと…
インストールが完了します。
これでインストールは終了です。サイトを開いて確認してみましょう。
まとめ
これでインストールが完了しました。個人的な感想としては超絶簡単でした。WordPressのインストールを過去のご自身で行ったことがある方であれば、ほとんど問題にも当たらずに作業を完了することができるかと思います。しかし、インストール途中でトラブルに遭遇して右往左往するのも面倒なので、インストール
を始める前に動作環境を確認しておくことも大切かと思います。
使用条件 :: concrete5 Japan 日本語公式サイト
今後、concrete5の学習を進めるにあたって学んだことや気づいたことなどもどんどんブログに書いていこうと思います。早くクライアントに提案できるレベルにまで持っていけるように頑張ってみようと思います。
お次のconcrete5アドベントカレンダーは
明日７日目のconcrete5アドベントカレンダーは、Asami Shimadaさんの『私がconcrete5に魅了された理由』という内容です。とっても楽しみですね〜。