◯2016 concrete5 Advent Calendar
前日は、みるくさんの「concrete5テーマ開発にgulp.jsを導入してみました。」でした。
この記事は、concrete5 Advent Calendar 第18日 tomoya-ph の記事になります。
◯ Qiitaさん読者の為の、concrete5 CMS とはなんぞや？
レンタルサーバー上などにインストールして、お手持ちのPC・スマフォ・タブレットなどのブラウザからクリックした操作で、ホームページやブログや写真などの記事を作成、見たままで編集が出来ることが売りであり、そしてそれらを管理する、オープンソースのライセンスMIT(ライセンスが比較的緩やかなのでソースプログラムの公開・改変などが自由に出来る)のアメリカ生まれのCMS(コンテンツマネジメントシステムの略)ということになります。
つまり、ウェブページやブログのようなシステムを自前で作成、コンテンツを管理、そして自由にウェブサイトのデザインが出来るプロ仕様のツールとも言えます。
そして、いきなりお詫びです！
私の開発していた個人サイト( concrete5.6.x レガシー版) なのですが、この日の為にかなり前から準備していたのですが前日チェックしてみると、サイトがまた表示されなくなっていましたので、こちら Qiitaさんのサイトで急遽、書くことをお詫びいたします！
◯ ここに至るまでに 2つも書いてしまった。
◯ Blender浜松UG-Blog :: Advent Calendar 2016 [ LINK ]
◯ Goo-Blog :: Advent Calendar 2016 [ LINK ]
ようやく本題ですw
◯『concrete5.6.x の逆襲！私の個人的野望の限界にチャレンジする！』
あえて言わせて貰おう！コンクリ5.6系は既存のCMS汎用型のCMSと云えよう。
決して量産型ではないよw 汎用型だ。
私自身この5.6系はとても手になじむフレームワークなんです。
現行型の5.7系に関しては、version7 と新たに名前が変わり今となってはこれが主流です。
いま、これを書いている時点で正式リリースされる version8 が間もなくリリースされるのではないかというタイミングです。[ 現在 12/1 ver8.00 で正式リリース！]
それまでの5.6系は「レガシーバージョン」と呼ばれ現在は concrete5.6.3.4 までバージョンがリリースされておりますが、php5.4 がサポートされなくなってくると PHP が古くちょっと頼りないです。
jQueryもライブラリとして中に実装されているので、その頃のバージョンの jQuery や javascript はそれなりに動きますけど、大人の事情で、それは新しいものがいいのも事実です。
もっとも、それすらハックして、別な javascript を動かすことももちろん出来ますけど。。。それはここではあえて記載していかないので、ググっていただくと良いかと。
現在私の個人的所有するPCでのローカル環境では、AMPPS というローカル環境でウェブサーバー構築しており、これは windows で言えば XAMPP とか、MACで言えば MAMP などを使って、ボタンひとつでお手持ちのPC内に仮想ウェブサーバー環境を作ってウェブサイトやウェブアプリなどを開発するというのが主流かと思います。
そして、本当はウェブサーバーを Nginx にしたいのだけど、残念ながらまだまだApacheで我慢。PHP7 / mySQL で運用してテスト環境を構築してます。
これらの理由は、concrete5.6系をウェブ開発環境の仮想サーバーの php7 で動かしつつ、concrete5.7513 / concrete5.803 を同時に動かしてテストしたいが為にあるわけです。コンクリバージョン７- 8 では php5.5.9 以上でないと動かないという理由の為にです。
多少知識は必要ですが、それ以上に便利なのですが、やっぱり5.7系をもっと快適に動かしたいので Docker なんかで、もうそろそろ動かさないといけないかなーと考えてます。
そういうウェブテスト開発環境で動かしつつ、本番ウェブサーバーでは、最新なもので再度 concrete5 を入れ直したりして本番ウェブサーバー上で運用してます。
- php7のローカル仮想環境で、concrete5.6.3.5b1 / concrete5.7.5.13 / concrete5.8.0.3 を地味に動かしてる。
- 5.6系から5.7系へのマイグレーションコンテンツ移行ツールをお試しする為のテスト環境でもある。
- 5.6系は、まだまだ多くのアドオンが利用出来るので、それを開発やアイデアの基とする。
- 5.6系で、Designer contents で吐き出した、カスタムテンプレートを、5.7系に持って行くことも可能。
- 5.6系では、かなり快適にサクサク動く！ 編集もサクサクだ。
- 5.6系で、気軽に開発。テーマもサクッと作成可能。これらを5.7系へ持って行くのに大いに利用する。
などなど上記の理由から、私個人的な意見でまだまだコンクリ5.6系は現役なのです。
ですが、初心者などは初めから5.8系から使ってくださいね！ 良い子のお知らせです。
◯さて逆襲！をするぞ！
もうここからは上記は前置きだ。オープニングムービーみたいなもの。
今年2016年10月29日に名だたるCMSの猛者が一堂に集まった「CMSプロレス」が東京渋谷のロフトワークで行われ、熱い闘いを横目で見ながら、場所を同じくして11月26日で東京渋谷で行われた「concrete5ハーベスト」では、中級者から上級者をフォロー出来るネタを発表しよう！があって、気がつきました。
そういえば コンクリ56系で開発したものって、自己満足で特に外に出してない。（大人の事情で出せないです！ダメ絶対。）
（テーブルには奇特にも４人の方が居てくれてありがとう。ネタは黙っていてねw）
◯ windows Metro UI
ウェブデザイン界隈で Bootstrap が発表され、奇しくも windows8 が出ていろいろ言われていた時期。
そうだ！コンクリのテーマデザインを win8 みたいな Metro-UI 出来ないか？ と考えた。
奇しくも冗談のように Bootstrap レシポンシブデザインベースでまさにジャストなテーマがあったので実装してみた！
(大人の事情で、画像なしです。よろしい感じで脳内変換してね！）
- タイル形式がとてもいい感じ。＞ いろいろなタイルをデザイナコンテンツで作成！
- タイルの置く場所。＞ スタックがあるやないか！ 左タブエリア / 右タブエリアで解決。
- 下からiosのメディアプレイヤーのようなメニュー群。＞ 管理画面へのリンク！
テーマだけの見た目だけではありますが、何年か前のエイプルフールでトップページで使ってみたw
◯ 代行運転営業日報
テーマパッケージのデザインを駆使すればいろいろと応用が効くのではないかと考え、実家の家業のお手伝いついでに、地味に営業日報が大変らしいので、コンクリのフロント部分だけで営業日報を、まずはエクセルでフォームを作成、別ファイルで html 出力させて、それをコンクリのテーマにパッケージしてみた。
エクセルが触れないスタッフも、マウスクリックだけで、選択か、記入だけならなんとかなるか？で開発してみた。
やはり Bootstrap レシポンシブデザインベースでまさにジャストな請求書とか、見積書とか、企画書なんかのレスポンシブデザインのテーマが海外ではあったので当時は色々とチャレンジしていたので上記は実はサクッと行きました。
(今回も大人の事情で、画像なしです。よろしい感じで脳内変換してね！）
- コンクリのページ ＞ ページ１枚を、営業日報1日、１台分としてみた。
- 見たまま編集 ＞ フォームのレイアウト通りなので、ブラウザーから印刷すればよい。
- ブラウザー毎に印刷仕様が違う！ ＞ Firefoxなら枠線までブラウザー印刷される。
どれだけ自動化されればいいのか考えた結果。車１台に付き raspberry pi でサーバー化して、それをコンクリに入れて、７インチのタッチパネルで、操作UIを作り、スタッフはそれで記入していく。車が事務所近くの駐車場に入った時に wifi を捉え、事務所サーバーにデーターを同期させればいけるだろうと踏んでいたが、ここで問題発生！
- まず紙ベース以外でスタッフは拒絶反応。＞ カーナビで限界だ。
- そもそも当時の raspberry pi が非力。７インチモニター出力が動きわるし。
- モニターが高い！ 通信費も考えないといけない。
- 真夏の車内の熱に raspberry pi が耐えられないだろう。
もう大人の事情で断念せざるを得なかった。現在ならどうだろうかと考えることも出来るわけなのだが。
しかしながら、コンクリで代行運転業務営業日誌は編集、印刷できる状態は作成したので、コンクリ部分に関しては良いテーマの練習になりました。
ここでもやっぱり、見た目重視のテーマパッケージだけの開発になりました。
この開発をしていた当時に、菱川さんが言っておられた『コンクリで実現させるからいいんじゃなーい！』が脳内で響いていたのは間違いない。またアクリスさんが運用させていた社内基幹システムという言葉に刺激を受けていたのも間違いない。タオさんが家計簿をコンクリのコメントブロックで実現させていたのも大いに刺激を受けていたのは間違いないということを改めて追記しておかなければならないだろう。
◯ iOS7
今から何年か前に見たティムクックさんのプレゼンそこで出されたものは、「iOS7」でした。
奇しくもそんな時間が経っていない時に閃いた！ Bootstrap Metro-UI のアレを改造してみよう！
- デザイナーコンテンツで作成したブロックタイル形式。＞ アイコンでの応用で行けるな！
- ホームアイコン群 ＞ コンクリ管理画面の「スタック」で管理。
- ホーム画面は？＞ swiperJS で iPhone からでもスワイプ可能に。
- スクリーンロック画面は？ ＞ 適当な javascript でまさにジャスト！音もmp３で忠実に再現。
- アイコンで動く時計は？ ＞ javascript で忠実に再現。
- 日付のアイコンは？ ＞ 日付取得 javascript でデザインまで再現。
- 奇しくもデザインがCSSで。＞ テーマパッケージ化にお役にたちました！
この時の開発で、ちょうどクライアントさんから、あーいったUIのホームページが出来ないかと相談を受ける。
最終的には実現しなかったが、私的プロジェクトでは成功した。
- 贅沢をいえば、iPad でも編集可能にしたかった。
- アイコンをうまくグリッドに乗せて開発すればよかった。
- 中身もアプリのように再現したかった。（ページの部分）
- メディアセンターも下から、でろ〜んって出してみたかったぞ。
- パスロックも再現してみたかったな。
かなり異色な成功事例といえよう。やはりテーマとデザイナーコンテンツのアドオンの恩恵にあづかる。
◯ concrete5.7 elemental UI
同じコン☆はま！グループメンバーの寺下さんが、そして同じように私も、5.7のメインテーマ：エレメンタルのダングレード版を作っていた！どうせなら、編集バーも変えて、管理画面もいけないか？
- 編集バーを ver7 現行型の真似。＞ 現行の仕組みに合わせつつ、画像で処理。
- 管理画面側。 ＞ 以前作ってあった、5.4時代の管理画面があったのでこれで再現可能。
- 管理画面側。 ＞ 見た目だけならなんとかなる。 ＞ javascript のボタンが一部動かず。
- 奇しくもブートストラップのバージョンが新しくなりよりレスポンシブのレスポンスが良くなった。＞ 意外！
- ページ側と管理画面側の仕組みが把握出来た！
本来来るべき使徒の来襲に備えて、コンクリ 5.6系から5.7系ver7になると管理画面などのUIが変わっちゃって困ったクラインアントのフォローの為にもという事で開発していたが意外とこれが良い勉強になっちゃったりした。
やはりテーマと一部のアドオンを利用しているが、ここでページ側と管理画面側と分けて考えることが出来るようになったのは吉ですね。
◯ SNS UI
ゲームを開発しよう！と意気込んだものの、その某ゲームにはまってしまって、ゲーム廃人の道へまっしぐら！
せめて何らかを掴もうと必死にやった結果が。。。
- Facebook のようなUIのSNS ＞ 紆余曲折して、某ゲームSNSのテーマが Bootstrap だった。再現可能。
- コアなゲームユーザーからの提案。チャットが欲しい！ ＞ かなり高機能なMITライセンスのチャットで実装！
- コンクリ本来の機能を厳選！ ＞ 標準機能だけでもかなり利用出来る。ダメならカスタマイズする。
- 本来のコンクリの使い方を思い出す！ ＞ 今後最新の ver8 の実装のアイデアに転用可能。
テストウェブサーバーで限定稼働中。既に半年経っているが、コアなゲームユーザーからは大変喜ばれている！
自分も開発のアイデアや、本来思いもつかなかった、まだまだ簡単でない部分を大いに指摘を受ける。これを実現させるアイデアとなった。
実際に利用しているユーザーからもっと簡単に日記ページ書けない？とか、スマフォでとかとか色々と本来の視点の指摘を受けたのがいい感触になりました。
また、新しい version8 ではほぼ標準機能で行けるのではないかと現在開発中です。
なお、菱川さんは先日の京都では、早速 Express 機能を使って、ログイン後にテキストに書き込むとそのまま、タイムラインのように記事が表示されている実験があっさりと実現させてしまっていた。
逆に考えれば、version8 ではかなり開発工数をかけなくても、ソーシャルサイトのようなものが作成出来るというのも今後の開発次第だと思えます。
「concrete5公式活用ガイドブック」の書籍にある、「会員制サイトを作成するの項目」では、ページの都合で書ききれなかった c56xバージョンでは、少し思うことがありましたが、これも今後進めていくことが出来るだろうとお伝えすることも今後あるかもしれません。
◯ Orijinal-3D-Game-System+concrete5
まさに現在ここです！
- スマフォ対応チャットシステム ＞ アドオン化してコンクリへ実装可能。 ＞ これの応用が半端ない予感がする。
- json API ＞ 通信の肝だ。 ＞ これを駆使すればゲームとのジョイントがきっと多分出来るんだぜ！の思いで開発中！
- 3DGame ＞ ゲームサーバー ＞ ウェブサーバー ＞ コンクリで管理 ＞ コンクリ開発SNS ＞ ゲームへ戻すなり、他のSNS連動とか。
- SNSシステムの完成！ ＞ ver5.7.5.x へ実装してみる！ ＞ ver5.8.0.x へ実装へ ＞ 終わりなき開発の道へ。。。
それぞれのハードルがかなり高くて時間がなくて開発が難航しているのだが、目標があるのはいいことだ。
そして上記のものは一部稼働していないのもあるのだが、一度開発してあるのでデーター自体が残っている限りいつでも再現可能ではあると言えます。
それととても言いたい事があって。。。当時c5.6系のアドオンを個人的に開発されていた、なんぽーさんや、木下さん、橋本さん、安井さん、山野井先生、アクリスさんや、タオさん、菱川さん、今でも有効なアドオンがあると思うのですが、是非ver8へのアドオンのアップグレードを検討してくれませんか！
さて表題タイトルの、『コンクリ56x の逆襲！』。。。なったかどうか。。。
でも、どのバージョンからでもそれなりにカスタマイズは、ちょっとしたアイデアで実現できるぞ！という意気込みだけでも感じていただければ、この記事を書いた甲斐があるというものです。現実的には最新作のバージョン８では、さらに期待が持てるのも事実です。
来年早々にでも、このエクスプレスを利用して新たなハッカソンやアイデアソンが行われていくことを期待したいものです。
いやむしろ是非、新しいアイデアや使い方を個人的には見てみたいのです。
皆さんもコンクリをフレームワークとして大いに趣味に活用していただきたい！
俺も私も作ったぜ！の暁には、是非私にご一報をw （変態的称号をお与えします！）
◯ concrete5japan Advent Calendar 2016 [ LINK ]
明日(12/19)は、pictron2009 さんです。
◯ concrete5japan Advent Calendar 2014 12/25 Fin [ LINK ]
◯ concrete5japan Advent Calendar 2015 12/25 Fin [ LINK ]
◯ concrete5japan Advent Calendar 2016 12/25 Fin [ LINK ]