a-blog cms 勉強会 in 名古屋 2019/03を開催しました


名古屋で毎月開催されているa-blog cms の勉強会「a-blog cms 勉強会 in 名古屋 2019/03」を開催しました。 今回はVer.2.10の機能について開発者スタッフからご紹介いたしました。

メディア機能について

  • メディアユニットでメイン画像が指定可能
  • カスタムフィールド、カスタムフィールドが可能
  • 簡単な画像の加工が可能(トリミング、回転など)
  • メディア機能の検索フィルターで検索した情報はページ遷移しても保持する
  • メディアユニットも画像ユニットと同じように、ドロップすると挿入できるように
  • メディア機能ならサムネイルイメージの中心点を設定できるように
  • 中心点は組み込みJSとの連携で実装できる(.js-focused-image)

メディアバナーモジュールの追加について

あたらしく、メディアが扱えるバナーモジュール「メディアバナー」が追加されました。

メディアバナーでは保存するたびに入力欄が1つずつ増える仕様ではなく、追加ボタンが実装されています。



新しいメディア機能のファイル管理について

新しく「ステータス」という項目が追加されており、「エントリーの公開状態に従う」を選ぶことで、まだそのエントリーを閲覧する権限がない人がファイルのURLにアクセスしても、403になりファイルにアクセスできません。



サブカテゴリーについて

コンフィグ>編集設定の「エントリー項目設定」にあるサブカテゴリーの表示設定にチェックを入れることによって、サブカテゴリーが有効になり、ご利用できます。



サブカテゴリーを設定することで、同じエントリーを複数のカテゴリーの一覧に表示できます。



コンフィグセットの機能について

コンフィグセットというコンフィグを管理する機能が増えました。



コンフィグセットの導入により、編集設定のページに「エントリー項目設定」が増えました。

「エントリー項目設定」では以下のようなことができます。

  • 不必要な項目の非表示
  • ラベルの変更
  • 初期ステータスの設定
  • 公開日時の「常にエントリー日時と同じにする」



メニュー管理について

新しく、メニュー管理の機能が増えました。管理画面でサイドバーに表示しているメニューをカスタマイズできます。

  • ラベルの変更
  • カテゴリー分けの変更
  • 不必要な項目の削除
  • 新しい項目の追加

なお、このメニュー管理に登録できるURLの入力欄にはグローバル変数も使用可能です。



メニュー管理は以下の2つの方法でご利用いただけます。

コンフィグ>メニュー管理、またはサイドバーの「?」マークから移動してご利用ください。




次回のa-blog cms勉強会は4月9日(火)に行います。 機能紹介以外にも、a-blog cms勉強会では会場代だけで開発スタッフによる対面サポートも行なっております。ビギナーの方もパワーユーザーの方もお気軽にご参加ください!

名古屋以外にお住いの方にオススメの勉強会の紹介

Training Campは全国各地からユーザーが集まる年に2回の大規模なイベントとなっており、次の開催地は名古屋ですがこちらもお住いの地域に関係なくおすすめの勉強会です!

a-blog cms Ver. 2.10.8リリースしました!

2019/04/19 に Ver. 2.10.8 がリリースされました!

フィックスバージョンなのですが、テーマ類が2019版になったりと大きな変更が加えられています。 Ver. 2.10.8 で新しく追加された機能や変更点などを紹介していきたいと思います。

*最後に変更点一覧を載せてあります。


php7.3 対応

以前までは、php7.2.xまでの対応でしたが、 Ver. 2.10.8 より下記のパッケージ内容になり、php7.3.xまで対応できるようになりました。

  • php5.3.3 - php5.5.x
  • php5.6.x - php7.0.x
  • php7.1.x - php7.3.x

* 各PHPのバージョンにあった、ioncube loader が必要となります。

各テーマを2019年版に刷新

各テーマを 2019年版に刷新しました。ぜひチェックしてみてください。

主な変更点

  • メディアでの投稿UIを改善
  • Bootstrapのバージョンを v4.0.0 から v4.3.1 にアップデート
  • ブログテーマのデザインを刷新

site2019

site2019

bootstrap2019

bootstrap2019

blog2019

blog2019

beginner2019

beginner2019


Scroll Hint を導入

新しい組み込みJSが追加されました。

スマホなどの小さいディスプレイの時に、横に長いコンテンツ(テーブルなど)を横スクロールさせることはよくあると思います。 ただ横スクロールは、あまり行わない操作のため、横スクロールできることに気づきにくく、UIとして悩むところです。

そこで、今回導入した「Scroll Hint」を導入することで、ユーザーに横スクロールできることを、認知させることに役立ちます。 以下のテーブルをご覧ください。アニメーションで、横にスクロールできることを知らせてくれます。


Col1 Col2 Col3 Col4
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Tips. Tips. Tips. Tips.

テーブルユニット

テーブルユニットの標準スタイルとして、この「Scroll Hint」も選択できるようになっています。 「スクロールを促すテーブル」 を選択してください。


テーブルユニットのスタイル

テーブルユニットのスタイル


オープンソース

またこの「Scroll Hint」は applepleが開発したオープンソースプロジェクトでもあります。 a-blog cms 以外でも利用できますので、ぜひお試しください。

メディア機能でsvgを画像として扱えるように改善

今までメディアユニットではSVGがファイルとして認識されてしまい、画像として扱うことができませんでしたが、 今回の改修で、SVGを画像としてSVGのまま表示させることが出来るようになりました。

SVGのまま扱うので、画像編集はできませんが、jpegやpng画像と同様にユニット、カスタムフィールド 、フィールドグループなど全てで利用可能となっています。


2019テーマでもロゴ画像などは、SVG画像を使用しています。

2019テーマでもロゴ画像などは、SVG画像を使用しています。


@verbatimブロック(波括弧を解決しない)を追加

a-blog cms のテンプレートエンジンでは変数に波括弧を使用しているため、JavaScriptなどの波括弧とぶつかってしまい、そのままでは正常にJavaScriptが動作しませんでした。 正常に動作させるためには、波括弧をバックスラッシュでエスケープする必要があったのですが、広い範囲だと手間で効率が悪かったと思います。

<div id="app">
  \{\{ message \}\}
</div>

そこで今回、新しいテンプレート要素の「@verbatim」ブロックを追加し、範囲指定で波括弧を展開しないようにできるようになりました。 Vue.js など JavaScriptでテンプレートを書く機会も増えてきたと思いますので、ぜひ試してみてください。

読み方: バーベイタム

@verbatim
<div id="app">
  {{ message }}
</div>
@endverbatim

リリースノート

新機能一覧

  • CMS-4651 PHP7.3 対応
  • CMS-4653 各テーマを2019年版に刷新
  • CMS-4751 Scroll Hint を導入
  • CMS-4629 メディア機能でsvgを画像として扱えるように改善
  • CMS-4760 @verbatimブロック(波括弧を解決しない)を追加

変更点一覧

  • CMS-4746 閲覧側のエントリー編集画面で、保存ボタンをページ下に固定にするように変更
  • CMS-4747 インストーラーで、ブログ名の初期値「a-blog cms」を空に変更
  • CMS-4749 メディア機能のタグのスタイルを調整
  • CMS-4753 テーブルユニットスタイルのデフォルトを「スクロールを促すテーブル」に変更

修正点一覧

  • CMS-4748 カラーピッカーがモーダル上で動作しない問題を修正
  • CMS-4752 サーバー環境によって BENCHMARK_MODE情報が出力されない問題を修正
  • CMS-4750 メディアのカスタムフィールドに小さい画像が登録された際のスタイルを調整
  • CMS-4754 SmartPhotoの→アイコンのスタイルがテーマによって崩れてしまう問題を修正
  • CMS-4756 ユニットでスマホサイズでもグリッドシステムが反映されるように変更
  • CMS-4757 ブログ管理のサイトロゴ付近に不要なEND_IFブロックがあるので削除
  • CMS-4761 Ver. 2.10 のCategory_EntrySummaryで各フィールドが出力できない問題を修正
  • CMS-4762 ユーザー切り替えアイコンが表示されない問題を修正
  • CMS-4755 メディアバナーのスタイル調整
  • CMS-4763 関連記事を複数種類登録できるようにしている場合、Entry_Summaryモジュールで選択が正常にできない問題を修正
  • CMS-4764 メディアを使ったグループ系フィールドで部分的な登録がうまくできない問題を修正
  • CMS-4770 メディア管理のPDFをダウンロードではなく、インラインで開くように修正
  • CMS-4769 Entry_Bodyの変数表にメディアユニットの情報がない問題を修正
  • CMS-4768 ログイン周りのセキュリティアップデート
  • CMS-4766 %{HTTP_CURRENT_THEMES_DIR} グローバル変数を追加

Ver.2.10.8より追加されたlp@site2019(ランディングページテーマ)の使い方

Ver.2.10.8よりランディングページテーマが「lp@site2019」にアップデートいたしました。

「lp@site2018」から「lp@site2019」へ変更した際に、全ての画像ユニットや画像のカスタムフィールド がメディアユニットまたはメディアのカスタムフィールド に変更されています。

実際のご使用方法は以前書いたエントリーを参考にしてください。


インポートデータのみ、新しくなっております。以下のリンクより、インポートデータをダウンロードしてください。

管理画面のカスタム設定タブのUIをやめるカスタマイズ方法


a-blog cms のカスタムフィールドは、ブログ・カテゴリー・エントリー・ユーザー・モジュール とありますが、今回は カテゴリー・ユーザー のタブの数が少ない時に使えるカスタマイズをご紹介します。

a-blog cms を使ってみたいけど、なにから始めたらいいの?

a-blog cmsを使ってみたい!でもなにから始めたらいいの?効率的な始め方と基礎的な機能

このコンテンツは、a-blog cms(エーブログ シーエムエス)を使ってみたいけどまずは何をしたらいいかわからない人に向けて、効率の良い学び方や基礎的な機能についてまとめた記事です。くわしい実装方法や使い方などは紹介しているリンク先の記事をご覧ください。

目次

a-blog cms を利用できる環境を用意する

まずは a-blog cms を利用できる環境を用意しましょう。a-blog cms を使うためには、基本的にはご自身のローカル環境や本番環境のサーバーに、a-blog cms をインストールする必要があります。でも、もっと手軽に a-blog cms を利用できる方法も現在2つあります。

  • デモサイト(サンプルサイト)にログインして操作してみる
  • ablogcms.io でお試し利用する(30日間無料でテスト環境を利用できます)

順番に説明していきます。デモサイト(サンプルサイト)では、ブラウザから行える作業(のみ)が体験できます。登録データは、他の方もログインできるため共用となり、定期的にリセットされますのでご注意ください。

デモサイト(サンプルサイト)のログイン情報



サンプルサイトURL https://demo.a-blogcms.jp/
ログインURL https://demo.a-blogcms.jp/login/
ID demo
Password pass

ablogcms.io でお試し利用する

ablogcms.io は、ご自身専用のテスト環境を30日間無料で使えるというサービスです。ブラウザから行える作業以外にもSFTP情報が支給されるため、自由にカスタマイズ可能です。必要なのはメールアドレスだけ。ご自身の専用環境となるため、登録データは共用ではありません。
但しお試し用の環境となりますので、サーバー内のファイルや登録データは登録から30日で削除されてしまいますのでご注意ください。( ablogcms.io で構築したものを、本番環境用にエクスポートすることもできます)


本番環境で運用する場合は、サーバーに a-blog cms をインストールする必要があります。詳しくは以下をご覧ください。「簡単セットアップ」を利用したインストール方法が簡単でおすすめです。



CMSにログインして記事を書く

a-blog cms を自由に触れる環境ができたら、ログインしてみましょう。a-blog cms をインストールしたサイトのURLの末尾に「/login/」とつけてブラウザからアクセスするとログインページが表示されます。


ログインできたら、コンテンツ(記事)を新規で作成するか、既存の記事を編集してみましょう。a-blog cms では記事のことを「エントリー」と呼んでいます。固定ページや投稿ページといった区別はありません。詳しいエントリーの書き方は以下の記事をご覧ください。


テーマとテンプレート

こちらは a-blog cms の公式テーマの詳細や、テーマの設定方法などが学べる記事です。どんなテーマがあるのか目を通しておくといいでしょう。


テーマとテンプレートでは、どこに書いたら意図したものが表示されるのか、実際に確認しながら進めることをおすすめします。

まずは「テーマとテンプレートの構成」の記事で構成をなんとなく把握してください。実践したい場合は「表示テンプレートの確認」の見出しを参考に、テンプレートに実際に何か書いてみることがおすすめです。


公式テーマのHTMLを開いてみると、英語でHTMLのコメントタグのようなものや「@」からはじまるコードがたくさん書かれていますが、この記述が a-blog cms ではプログラムが動作する箇所になります。各記述方法を知りたい場合は以下の記事をご覧ください。


モジュール

a-blog cms に登録したデータを表示する機能がモジュールです。

以下の記事を見ると、モジュールにはたくさんの種類があることがわかります。モジュールの機能でできることが大体把握できると思います。


ビルトインモジュールを使っているうちに、ビルトインモジュールで登録データの条件設定のしかたについて疑問を持つ方が多いですが、その場合にはモジュールIDを作成してください。モジュールIDを作成することで、複数の条件設定が可能になります。

実際にサイトを制作するときには、基本的には毎度モジュールIDを作成して使うことになります。


カスタムフィールド

カスタムフィールドとは、エントリーや、カテゴリー、ブログ、ユーザーに対して独自のデータを追加することができる機能です。まずはこちらの記事をご覧いただくと概要が把握できると思います。


学習の流れとしては、まずは「カスタムフィールドの基本」の記事でだいたいどんなソースコードで構成されているかを把握して、「カスタムフィールドメーカー」でソースコードを作り、次は記述場所を把握するために「ブログのカスタムフィールド」の記事を参考にするのがいいと思います。



前述した通り、a-blog cms にはカスタムフィールドの種類が5つありますが、ブログのカスタムフィールドを作成する方法をここでは紹介しておきます。以下の記事をご覧ください。他の4つのカスタムフィールドを作る際はテンプレートを設置するディレクトリが変わりますので、それぞれの記事をご覧ください。


フォーム

サイトにフォームを作る際は以下の記事を参考にしてください。


たくさんソースコードがあるので、全て覚えるのは大変だと思います。公式テーマでは Blogテーマ以外はお問い合わせフォームの仕組みを持っていますので、ソースコードをコピー&ペーストして要素を追加したり削除して、少しずつデザインに近づけていくことをおすすめします。

なお、フォームはカスタムフィールドと同じソースコードです。カスタムフィールド メーカーを活用して制作してください。

他にも、フォーム機能と連動してGoogleスプレッドシートSlackReCaptcha などの外部機能と連携することができる「拡張アプリ」という機能があります。こちらは基礎的な内容ではありませんが、こういった機能も知っていると提案の幅が広げることができるため、紹介しておきます。


基礎的な機能については以上となります。これまでに紹介した機能で小さなコーポレートサイトなら作ることができますので、まずはこれらの機能を使ってみることがおすすめです。

そのほかの機能

マルチサイトは管理画面から「ブログ管理」のページで子ブログを作成することで作れますし、パスワード制限をかけたサイト(例:会員制サイト)もブログのステータスを「シークレット」にするだけで作れます。

その他にも、レスポンシブWebデザインではなく、PCとスマホのデザインを変更するときにはルールという機能が必要です。


運営者がウェブサイトのレイアウトを自由に変更したいという特殊な要望があれば、レイアウト機能という機能も用意しています。


他にもたくさん機能がある a-blog cms ですが、まずはこの記事に書いてある機能を把握することが第一歩です。たくさん記事を紹介しましたが、ご自身の理解度に合わせて必要な項目をチェックしてみてください。

初心者向けのハンズオンコンテンツ

他にも、静的サイトから動的サイトを作っていくハンズオンコンテンツもあります。初心者の方はこちらを学習すると理解が深まると思います。


わからない時は

記事を読んでもよくわからない。インストールでつまづいてしまい先に進めない…。そんなときは、お気軽にフォーラムで質問してください。

また、定期的に開催している勉強会に参加していただくと、何でもご質問いただけますし、a-blog cms についての理解も深まります。オンラインでも各地でも定期的に開催していますので、是非参加してみてください。(◯◯編 となっていても、初心者の方もいつでもご参加いただけます。)

お急ぎの場合や、より詳細なサポートをご希望の場合は、公式サポートをご検討ください。ベースキャンプ名古屋での対面サポートやオンラインビデオ通話サポートなどを行っております。