maki-o memo

制作に関する私的なメモです

選択されているタグ : セミナー

タグを絞り込む : a-blog_cms bingo!CMS CMS css css3 CSS_nite CSSプリプロセッサ Dreamweaver Frontrend HCD HTML5 IA IE6 iPhone jQuery js LESS miniMU MISO movableType Sass SOY_CMS Stylus subversion talkNote UX WCAF WCAN こもりまさあき たにぐちまこと アクセシビリティ アクセス解析 オブザベーション カラー カラーデザイン勉強会 スパゲッティ・キャンチレバー ディレクション ビジネスモデル・ジェネレーション ブランディング プラグイン プレゼン ペルソナ/シナリオ法 マネタイズ モジュール開発 レポート 佐々木敏明 佐藤歩 勉強会 原一浩 古家秀樹 名村晋治 坂本邦夫 大屋慶太 安藤建一 小久保浩大郎 小山田晃浩 小林正 山田あかね 山越崇裕 岡部和昌 平木聡 志鎌真奈美 斉藤祐也 木村哲朗 水野隼登 池田拓司 浅野智 石本光司 福井 著作権 表示速度最適化 西畑一馬 角掛健志 谷拓樹 遠山桂 静岡 高津戸壮 高畑哲平 鷹野雅弘

a-blog cmsの勉強会2

前回の1に引き続き、勉強会の第2回に行って来ました。

今回の内容はこの2点。

  • フォームの作成
  • カスタムフィールドの設定

キーワードは「スコアボード」です。(謎

1のレポートが、MTとの比較をして意外と好評だったので、今回もそっち方向で書いてみたいと思います。

フォームの作成って?

MTにデフォルトでフォームの機能はありません。(よね?

今までの案件では、メールフォームの実装をMT使って制作する事がなかったので今回調べてみました。
どうやらプラグインではありそうです。これとか

このプラグインもそうみたいですが、
a-blog cmsのフォーム作成も、状態に合わせた複数のテンプレートで制御します。

「apply」「reapply」「confirm」「result」

まず、最初の状態である「apply」
次に、エラーメッセージを表示する「reapply」
確認画面の「confirm」
最後に、送信後の状態の「result」

この4つの状態で、各々に表示させたいhtmlを書いたり、インクルードしたりします。

実際書くとこんな感じ。

<form action="" method="post">
<!-- BEGIN_MODULE Form -->

<!-- BEGIN step#apply -->最初の画面<!-- END step#apply -->
<!-- BEGIN step#reapply -->エラー画面<!-- END step#reapply -->
<!-- BEGIN step#confirm -->確認画面<!-- END step#confirm -->
<!-- BEGIN step#result -->送信後<!-- END step#result -->

<!-- END_MODULE Form -->
</form>

ひとつのフォームに必要な要素は、input要素が2つです。
たとえば、namaeというname属性をもつテキストフィールドを作成したかったら、

<input type="text" name="namae" />
<input type="hidden" name="field[]" value="namae" />

というように指定します。
確認画面や、エラーメッセージを出したい時は若干記述が増えます。

必須とか、その他

必須項目・メールの形式チェックや、全角で入力されたものを半角にしたりするフォームオプションも用意されています。

ある特定のエントリーにのみフォームを反映する という方法も説明されていました。
方法は単純に、その名前のテンプレートを作れば良い。
phpで生成されているページを、見かけ上htmlがさも存在しているかのようにurlには表示されているので、実際にそのhtmlをテンプレートとして存在させてやれば良い。と言う事です。
でもこれは、独自性を持たせたいエントリーを実現する方法のひとつの例がフォーム。という事なのではないかと思います。

CMSでフォームを作る

今まで、CMSでフォームを作るという概念はありませんでした。そういう事が必要な案件もなかったですし。
でも今回、CMS内でフォームを制御できれば、今までやってこなかったような事ができるような気になってきました。

せっかくだからさっきのプラグインも使ってみよう。

カスタムフィールド

MTでは作るの大変です

MTでは、管理画面でひとつづつセコセコ作っていかなければいけません。
業務ではとりあえずタブを開けまくって、順に作っていきます。地味な作業。

が、a-blog cmsでは、カスタムフィールドもフォームと同じ要領で作成できます。
管理画面のテンプレートに対して、同じように、「apply」と「reapply」の各モジュール内で制御されます。
applyは新規作成時テンプレート、reapplyは更新時テンプレートに反映されます。

作成できるテンプレート

現状のベータ版では、カスタムフィールドを作成できるテンプレートは限られています。
フィールドモジュールで出力が可能な値に限られているので、それに対応するテンプレートでしか作成できないようです。

スコアボードなワケ

スコアボードですよ!

実際触ってみるとわかりますが、a-blog cmsのカスタムフィールドはフォームを作成する知識があれば、レイアウトはホント、自由に制御できます。
acmsimg06 それがどういう事かというと、MTでカスタムフィールドいっぱい作ると→のような状態になります。

どんどん縦に長くなります。

これが例えば、スコアボードのようなものを入力したい場合どうなりますか?
あんまり想像したくないです。
延長とか考えるともっと想像したくないです。

これが、htmlを自由に制御できるなら?
普通にフォーム制作するのと同じです。入力しやすいように作ればいい。ついでに言うとjavascriptとかも自由に実装できます。htmlなんでね。

これはいーすねー。

というわけです。

という訳で、第1回・第2回と、勉強会に参加してきました。
説明をして下さった、かずみちさんも勉強会中に散々言ってましたが、なんとなく使えそうな気にはなってきました。

まだベータ版ですし、今後改善されて、もっと使いやすいものになってのリリースになるかと思います。
実際はやっぱり案件を何個かこなしてみないと"クセ"みたいなものが見えてこないかとは思いますが、現状でも十分に、対応できそうな印象を持ちました。

せっかくの機会なので、5月一杯、触ってみようと思います。

、、、GW予定ないし、、、

公式サイトはこちら
a-blog cms


プロフィール

フロントエンドエンジニア

Tomokazu Makita

名古屋でフリーランスでWeb制作してます。 フロントエンドのことを主にやってます。
a-blog cmsを使用したサイト制作が得意です。
お仕事のご相談随時受付中。

雪山大すき。冬は雪山の合間に仕事します。
財布はいつも吹雪です。

エントリーリスト

タグ