ブーツストラップ仕立て「CMSのおみそ汁」

5年ぶりにホームページで使用している CMS(コンテンツ管理システム)を見直すことになりました。

そこで見つけたのが、このギュギュと詰めた単語の固まり、何か分かりますか。


 

アイコン(Glyphicons)ドロップダウン(Dropdowns)ボタン・グループ(Button Groups)ドロップダウン・ボタン(Button dropdowns)インプット・グループ(Input groups)ナビゲーション(Navs)ナビゲーション・バー(Navbar)パンくずリスト(Breadcrumbs)ページネーション(Pagination)ラベル(Labels)バッジ(Badges)ジャンボトロン(Jumbotron)ページ・ヘッダー(Page header)サムネイル(Thumbnails)アラート(Alerts)プログレス・バー(Progress bars)メディア・オブジェクト(Media object)リスト・グループ(List group)パネル(Panels)レスポンシブな埋め込み(Responsive embed)埋め込み効果(Wells 広告)コンテナ(Containers)グリッド・システム(Grid system)タイポグラフィ(Typography)コード(Code)表(Tables)フォーム(Forms)ボタン(Buttons)画像(Images)補助的クラス(Helper classes)レスポンシブ・ユーティリティ(Responsive utilities)印刷用クラス(Print classes JavaScript)モーダル(modal)ドロップダウン(dropdowns)スクロールスパイ(scrollspy)タブ(tab)ツールチップ(tooltips)ポップオーバー(popovers)アラートメッセージ(alerts)ボタン(button)コラップス(collapse)カルーセル(carousel)アフィックス(affix)

お湯をかければでき上がる固形インスタントみそ汁みたいなもので、ウェブサイト作りに欠かせない最新の具材がフリーズドライで満載されてインスタントで利用できる CMS です。

CMS とはブログやホームページ、掲示板サイト、SNSサイトなどを簡単に作成し、管理することができるソフトウェアのこと。

今日はちょっと特殊な分野のサイト造りの話題です。

ウェブオーサリングツール遍歴

20160227_01-2016-02-22-20-45.jpg

思い起こせば、いろいろなウェブオーサリングツールを利用してきたものです。

1997年 クラリスホームページ(2001年販売終了)
1999年 Adobe GoLive(2007年販売終了)
2006年 iWeb(2009年3.0以降アップグレードなし)

Adobe Dreamweaver を少々。

その他 BiND for WebLiFE、ホームページ・ビルダー、Rapid Weaver や Freeway Express なども一応触ってはみています。

帯に短し襷(たすき)に長しで、結局手に馴染んだのは GoLive ぐらいだったでしょうか。

改めて思い出してみれば、かれこれ20年近くになりますが、仕事の分野が違うので今でも技量は初心者並。

CMS 導入の悪夢

5年前、ウェブオーサリングは CMS の時代と騒がれていました。

20160227_02-2016-02-22-20-45.png

それまでウェブページ作成はサイトをページ単位で管理するのが基本的スタンスでしたが、ところが当時の CMS の代表 MovableType や WordPress などはブログを中心とした時系列で管理ということでした。

これで今までのようにサイトを作成管理できるのか疑問がありましたが、習得の面倒なウェブページ作成ソフトで作成したファイルをいちいちアップロードすることを考えれば、ブラウザでサーバーのプログラムを操作しながらウェブページ作成編集できるのは魅力的です。

20160227_10-2016-02-22-20-45.png

人気のブログソフトウエア WordPress を CMS として利用するか、今までのようなスタイル(ページ単位)のウェブページもサポートする MovableType にするのかずいぶん悩みましたが、結局 MovableType を選択したのでした。

ということで始めたのはいいのですが、慣れない操作で Movable Type のローカル仮想環境を作成するだけでも大変な作業でした。今でも忘れません。

20160227_03-2016-02-22-20-45.jpg
20160227_04-2016-02-22-20-45.jpg

XCode のインストール
MAMP のインストール
MacPorts のインストール
Terminal の操作
Perl のパスを MacPorts のインストールディレクトリへ変更
DB関連モジュールのインストール
オプションモジュールのインストール
htaccess の設置
MAMPのポート番号を変更
phpMyAdmin を使った Mysql の設定
Movable Type 本体の設置
mt-config.cgi の修正
Movable Type の初期化

これだけの手順を正確に行わなければいけません。

20160227_05-2016-02-22-20-45.png

一度でうまくいけばいいのですが、初心者にはこれがなかなか。

何度もやり直してインストールが無事に終わり、今度は操作方法の習得。そしてやっと本題のサイト造りとなったわけです。

Movable Type に関していえば、

・導入の手順が複雑で、専門知識と時間が必要。
・スマホサイトを作るのに別途費用がかかる。
・フォームの設置には専門的な知識が必要。

は本当でした。

最近のクラウドタイプを利用すればこれほどの手間もかからないのですが、料金がかさみます。

そして 5年後、悪夢の再現
20160227_06-2016-02-22-20-45.jpg
それから 5年が経ち、Movable Type のバージョンを上げようと再び仮想環境を作成してみましたが、やはりあの時の悪夢が再び姿を現したのです。

再びCMS 探しの旅へ

20160227_07-2016-02-22-20-45.png

これではもういけないともう一度いろんな CMS を調べ始めました。

そんなとき、WordPress/XOOPS(ズープス)/Drupal(ドルーパル)/Joomla(ジュームラ) といった有名どころに混じっていた concrete5(コンクリートファイブ)という変わった名前の CMS を見つたのです。

20160227_08-2016-02-22-20-45.png

市販のホームページ作成ソフトのような使いやすさと、サーバー上でコンテンツを編集管理できる CMS の利点を併せ持っているシステムという売り込み文句。
 

一般的なブログ型CMSと違い、プレビュー画面に切り替えずにページを確認できます。見たまま編集できるのが concrete5 の最大の特徴で、HTML や CSS の知識がなくてもサイトの編集が可能です。実際に、IT スキルのあるなしに関わらず、幅広い年齢層の方に利用されています。

その名の由来は、コンクリートの出現が建設業界に大きな変化をもたらしたのと同じように、CMS に大きな変化をもたらせる事ができればという思いから。

コンクリートは古代ローマ時代からあった古い技術ですが、その頃から建設業界があったのだろうかなんて考えながら、
 

ローマン・コンクリート
現代のコンクリートは、カルシウム系バインダーを用いたポルトランドセメントであるが、古代コンクリートはアルミニウム系バインダーを用いたジオポリマーであり、倍以上の強度があったとされる。 ローマのコロッセオには古代コンクリートも使用されており、二千年近く経過した現在も存在しているのはそのためとされる。
Wikipedia

紹介コメントにある直感的という表現にうさん臭さも感じつつ、ものは試しとインストール。

(「直感的」と言う表現は昔から Mac 使いの人々がよく使うのですが、たまたま取説なしで自分の作法で動作しただけのこと。それが正規の使用方法とは限りません。「分かり易い」といった程度の表現でいいと思っています。)

えっ?もう終わり?

20160227_09-2016-02-22-20-45.jpg

MAMPのインストール
MAMPのポート番号を変更
phpMyAdminを使ったMysqlの設定
concrete5のインストール
packages へ cloneamentalの設置

今回の concrete5 の仮想環境作成の工程はたったこれだけ。

それもなんと 5分の作業で済んでしまい、もう動作するようになりました。Movable Type でうまくいって半日がかりだった作業は何だったのでしょう。

Movable Type では必要だったプラグインインストールや別料金なしで、フォームの設置やのスマホサイト対応も最初から対応しています。

これで特別の技術者なしでも何とか済みそうです。

20160227_10-2016-02-22-20-45.png

concrete5 は以下の技術を使用しています。

フロントエンド:JavaScript(jQuery)、Bootstrap
バックエンド:PHP(Symfony)
データベース:MySQL

ということで、現在 Bootstrap と Less を学習中です。これは、次に来るモバイルファーストへの対応という意味もあります。

ただ、自分の歳でやることかなと思うこともありますが、でもやっぱり面白いのです。

モバイルファースト(MOBILE FIRST)

20160227_11-2016-02-22-20-45.jpg
 

「モバイルファースト」という言葉は2009年にルーク・ウロブルスキー氏(Luke Wroblewski、以下ルーク氏)によって提唱され、その後 グーグルやアドビシステムズ、フェイスブックなどのカンファレンスで言及され、北米で認知が広がりました。

スマートフォンの市場はこの2、3年のうちに急速に普及し、手元にあり利便性が高いことから、ユーザーはあらゆるサービスを24時間場所を問わず利用するようになりました。FacebookやTwitter、YouTubeや天気サービス、乗り換え案内など、さまざまなサービスが利用できます。

しかし、これはまだ序章に過ぎません。モバイル端末の普及と併せて、端末の性能向上、ネットワーク環境の向上、M2M や O2O 向けのハードウェアの登場などインフラ環境の整備が進むに従い、世の中のサービスや業務の仕組み自体がモバイルに最適化されていくでしょう。

時代は変わるものですね。ただし、便利なCMS にも問題が。

「WordPress」や「Joomla!」など主要CMSで原因不明の改ざん被害が発生中

オープンソースで提供されている主要コンテンツマネジメントシステム(CMS)において、改ざん被害が発生しているとして、JPCERTコーディネーションセンターが注意を呼びかけた。いずれも同じコードが挿入されていたという。

「WordPress」や「Joomla!」「Drupal」「MODX」など広く利用されているCMSを構成する一部PHPファイルに対し、不正なコードが挿入されるケースを確認しているとして注意を呼びかけたもの。

改ざんの標的となるCMS内のPHPファイル

今日は久しぶりにちょっと難しい話題を扱ってしまいました。

明日は梅見でもしてきます。

今日の一曲


Ai Ai Bopem – Cj RcM

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中