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


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のページを表示し、どんどん次へ。

a-blog cms セットアップ画面

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

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

a-blog cms セットアップ画面 データベースの設定

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

a-blog cms セットアップ画面

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

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

a-blog cms セットアップ画面【5.ブログとユーザーの設定】

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

a-blog cmsログイン画面

入力画面の編集(テーマの編集)

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

a-blog cms ユーザー詳細ページ

テーマの参考ドキュメントはこちら

作業用のテーマ「/themes/simple2016/」と「/themes/system/」をダウンロード
※おや?  サーバーにファイルがたくさん増えています。

a-blog cms テーマフォルダ

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

a-blog cms 管理画面urlとテンプレートディレクトリの確認

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

a-blog cms ユーザー画面カスタム設定タブのid箇所

ダウンロードした「/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」フォルダもつくります。

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

a-blog cms カスタムフィールドメーカー

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

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

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

a-blog cms インストールページ

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

/themes/simple2016/admin/user/field.html ソースコード

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

userフォルダ追加

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

a-blog cms ユーザー管理画面 入力画面

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

a-blog cms ユーザー管理画面 入力画面(入力後)

でたっ!! (ひとまず安心)

a-blog cms ユーザー管理画面 入力画面(入力保存後)

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

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

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

a-blog cms モジュールid確認

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

simple2016/top.html ファイル

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

/include/entry/topHeadline.html ファイル

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

a-blog cms モジュール作成画面

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

/include/user/topProfile.html ファイル場所

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

a-blog cms モジュールID設定場所

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

/themes/simple2016/top.html ファイル

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

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

a-blog cms トップページ表示

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

/themes/simple2016/include/user/topProfile.html はこちら
/themes/simple2016/include/user/topProfile.html ファイル

無事、表示されました!
トップページ表示画面

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

a-blog cms モジュール設定画面

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

無事、完成! お疲れさまでした。