a-blog cms 管理画面のカスタマイズに挑戦。

まいどです、a-blog cms熱があがりっぱなしのはまちゃんです。

ここ3ヶ月間で参加したa-blog cmsイベントを振り返ってみたところ
結構な数で正直自分でも驚きました。

勉強会ではどんな事をするの？

開発会社さんが参加

どんなに小規模な勉強会でも必ず開発会社アップルップルさんの方が1名は参加してくれるので、その時の参加者の雰囲気を見て内容を構成してくれます。
初心者が多い場合はa-blog cmsについての話を深くしてくれたり、技術を知りたい人が多い場合はお題を出してハンズオンしたりと毎回異なります。
直接質問が出来る

開発会社さんがいらっしゃるので、わからない事を持ち込んで個別相談でバンバン聞く事もできます。
直接聞ける人がいるのは実装者にとってすごく有り難い事です。
実案件の制作

a-blog cmsにはエバンジェリスト制度なるものがあり、色々な地域にエバンジェリストさん達がいます。
地域の勉強会の時はエバンジェリストさんが参加されてる確率が高いので実際の案件例のお話を聞く事ができます。
そういうお話はどんな教科書よりもためになると思います。
そこから開発者さんが「そういう時はこうしたらいいよ」という話になったり、はたまた開発者さんの想像を上回った実装をエバンジェリストさんがしていたりとトークが進化する時もあります。
地方の勉強会で面白い話が出てきた時、その話題を集めて半年に1回行われる合宿でのユーザーセッション発表になってるのかな？　と思うので集大成に興味がある方は合宿がお勧めです。

目から鱗だったカスタマイズ

a-blog cmsはライセンス購入が必要なソフトのため
どうしても会員制サイトにしたい！　という場合
ユーザー数の多いライセンスを購入しなければならないよなあ…　という概念があったのですが
大阪の勉強会の際に大阪エバンジェリスト、フォルトゥナの坂本さんの案件紹介で、サイトによっては読者権限ユーザーでも会員制サイトをつくる事が出来る！　と教わりました。

と、いう訳で管理画面（ユーザープロフィール）のカスタマイズに挑戦してみようと思います。

【さくらインターネットレンタルサーバーの編】

インストール

さくらインターネットレンタルサーバーでDBを作成

a-blog cmsのさくらインターネットレンタルサーバー版をダウンロード

解凍したsetup.phpファイルをサーバーにアップ
例）/ablogcms/setup.php

ブラウザでアップしたsetup.phpのページを表示し、どんどん次へ。

データベースの設定ではじめて入力項目発生。

データベースサーバー名:「＠＠＠」を自分のデータベースサーバー名の数字に変更
例）mysql123.db.sakura.ne.jp
データベース名:先ほど管理画面で作成したデータベース名。
※データベースが存在しなかった場合に、指定された名前でデータベースを作成する (CREATE権限が必要です)
にチェックを入れておけばDB作成行程がいらないはずなのですが、
さくらの場合「データベースの作成に失敗しました。同名のデータベースが既に存在しているか、MySQLユーザーの権限が十分ではありません。管理者に確認してください」と出てしまったのでおとなしく先にDBを作成しましょう！
データベースユーザー名、データベースパスワード:各自サーバ情報を参照
テーブル先頭文字列:特に必要なければそのまま
データベース文字コード:特に必要なければそのまま

どんどん進んでいきます。

ブログの名前:あこがれの会員サイト
インストール時の初期テーマ:simple2016
ユーザー名:はまぐち
メールアドレス:hamaguchi@nxpg.net
ユーザーID:hamaguchi
パスワード:各自

テーマの選択基準
※多くの機能を試したい方やクライアントにデモをする際には「site2016」。
カスタマイズの勉強をこれから始めたい方は「simple2016」がおすすめ
との事なのでひとまず「simple2016」で作成。

インストールが無事完了したので、設定したID、パスワードログインします。

入力画面の編集（テーマの編集）

管理画面のユーザー（カスタム設定）部分に登録したい項目を追加します。

テーマの参考ドキュメントはこちら
作業用のテーマ「/themes/simple2016/」と「/themes/system/」をダウンロード
※おや？　サーバーにファイルがたくさん増えています。

「管理画面を編集する場合は、その画面を表示してみて、ブラウザのurlを追っていけばわかるよ」
と大阪勉強会で2回ほど聞いた様な記憶をたどり…
ブラウザのurlを見ながら、systemフォルダをたどっていきます。

「/themes/system/admin/user/edit.html」ファイル内でのカスタム設定の場所を知りたかったので、検証にてidを探りあてます。
きっと「acms_custom」だ！

ダウンロードした「/themes/system/admin/user/edit.html」データをエディタで開きます。
「acms_custom」で検索をかけると2箇所該当。上の方はおそらくタブ部分なのでお目当ては下の方。
どうやら「/themes/system/admin/user/field.html」ファイルを読み込んでいる様なのでファイルを探します。
な、、ない、、（汗）
と一瞬あっけにとられましたが、そうか！　ないから表示されていないのか！　と。

「/themes/system/admin/user/field.html」がー、ないならつくろうホトトギスー
という事で、ファイルを作成！
と、ここで注意！

カスタマイズは、使用するテーマのフォルダ内ですること！　なので
「simple2016」内つまり「/themes/simple2016/admin/user/field.html」をつくります。
思い切って「user」フォルダもつくります。

中のソースコードは！　安心してください！！　つくらなくても大丈夫。
カスタムフィールドメーカーの出番です。

以下、生成した項目です。

type:テキストエリア
タイトル:あなたの目標
フィールド:your_goal
type:テキスト
タイトル:ニックネーム
フィールド:your_nickname
type:画像
タイトル:アイコン
フィールド:your_icon
プレビュー表示する画像:通常画像
type:テキスト
タイトル:URL
フィールド:your_url

生成ボタンを押すと下の「入力用ソース」「プレビュー」「出力用ソース」にどんどん追加されていきます。
何度も押すと同じ項目が何個も追加されるのでご注意。
少し修正したい箇所がある場合は、最初から作り直さず、ソースコードをコピペした後に修正するのでもよいと思います。

入力用ソースタブの「ソースをコピー」でコピーし「/themes/simple2016/admin/user/field.html」へ貼り付け。

サーバーにuserフォルダごとアップします。

そしてユーザー管理の画面を開くと…ドキドキ。
やったー。表示されました！！　地味にうれしい。

早速登録してみましょう。

でたっ！！　（ひとまず安心）

表示画面の編集（モジュールの作成・テーマの編集）

次に登録したユーザー情報をサイトに表示させていきましょう。

編集箇所を探すため、ログインしたサイトトップを表示し、
まず新着情報をクリックしモジュール情報（条件設定）でidをチェック「top_headline」
同じく採用情報をクリックしidをチェック「top_summary」

「/themes/simple2016/top.html」ファイルを開き、眺めてみるとどうやら該当の箇所は以下かかなと。

念のため「/themes/simple2016/include/entry/topHeadline.html」のファイルを確認。
idがtop_headlineなのでばっちり！

次にプロフィール用のモジュールとincludeファイルを作成します
モジュールID画面の「モジュールIDを作成」ボタンを押し
モジュール、id、名前を設定、入力し作成。（タイトルをつける時はカスタム設定タブの見出しに入力も忘れずに）

includeのファイルの置き場は絶対ここに置かないとだめっ！　というのはないと思いますが
どのデータから引っ張ってきているかをわかり易くしてくれているのかな？　というサンプルの意図をくんでフォルダと「/include/user/topProfile.html」ファイルを作成

ファイルの中身は、、
コンフィグ管理内のモジュール > ユーザー・ブログ > ユーザープロフィールのスニペットをとりあえず拝借しコピペ。
そしてモジュールidの設定を忘れないこと！！　id=”top_profile”を1行めに追加。

次に作成したモジュールをトップページ「/themes/simple2016/top.html」に追加。

includeファイル（/themes/simple2016/include/user/topProfile.html）とトップページ（/themes/simple2016/top.html）をサーバーにアップ

トップページを更新っ！！
でたっ！？　…　が、なんだかさびしい（やはりコピペでは世の中甘くない）ので
/themes/simple2016/include/user/topProfile.htmlとユーザープロファイルの変数表とスニペットを見比べテーマを修正。

おそらくユーザープロファイルのスニペットはユーザーの基本設定タブの情報の様です。
今回作成したカスタムフィールドを出力させるため、後は/themes/simple2016/include/user/topProfile.htmlを更新しサーバーにアップの繰り返し作業。採用情報の様なレイアウトにしたかったので
/themes/simple2016/include/entry/topSummary.html
を元に出力用ソースの要素をはめこんでいきました。

/themes/simple2016/include/user/topProfile.html はこちら

無事、表示されました！

この欄は自由に登録した読者ユーザーだけを表示させたいなー。ということで
モジュールIDのUser_Profile (top_profile) トップページプロフィール用の表示設定タブの
「権限:読者のみのチェック」にします。

これにより読者のみが表示される様になりました。