画像ユニットをスライダーとして表示するカスタマイズ

ここでは、simple2016 と site2016 に同梱されている slick.js を使ってエントリー内の画像ユニットをスライダーに変身させるカスタマイズ方法をご紹介します。

カスタムユニットを使った実装方法もあるのですが、その方法だと、画像の順番を入れ替えることができなかったり、画像の登録枚数が限定されてしまうのでここではユニットグループを使った実装方法をご紹介します。以下がその実装方法の手順になります。

SublimeText

この記事では、omakeフォルダ内に同梱している、SublimeTextフォルダについての説明をしています。

場所は、/omake/snippets/SublimeText/ にて用意しています。

SublimeTextフォルダとは

テキストエディター SublimeText のデフォルトのスニペット機能で使用できる a-blog cms のモジュールやブロックのスニペットを配布しています。下記では、まだβ版ですが、利用者も多い SublimeText 3 の使用方法について説明しています。

用意しているスニペット

  • ビルトインモジュール
  • カスタムフィールド
  • タッチモジュール
  • IFブロック
  • :veilブロック
  • :loopブロック
  • :emptyブロック
  • BEGINブロックやENDブロックのみ

使い方

Macの場合は「~/Library/Application Support/Sublime Text 3/Packages/」 以下に、Windowsの場合は「C:/Users/ユーザー名/AppData/Roaming/Sublime Text3 /Packages」以下に、 「acms」「acms_field」「acms_if」「acms_module」「acms_touch」 の5つをフォルダごとコピーしてください。

※ /Packages/以下であればご自由に置いてください。たとえば、a-blog cms以外でもスニペットを使う場合は、「acms」というフォルダを作っておけば、他のスニペットと混ざることがなく管理しやすくなります。

フォルダへの移動方法

Macをお使いの場合

Macをお使いの場合、 ~/Library/Application Support/Sublime Text 3/Packages/ に移動するためには、Finderを開いて、「Shift + ⌘ + G」キーを押してください。そして、表示されたウィンドウの入力欄に「~/Library/Application Support/Sublime Text 3/Packages/」と入力し、「移動」ボタンをクリックしてください。

Windowsをお使いの場合

Windowsをお使いの場合は、Windowsのフォルダのアドレスに「%appdata%」と入力してからエンターを押し、まずは「C:/Users/ユーザー名/AppData/Roaming/」までアクセスします。「Sublime Text3」→「Packages」の順にフォルダを選択して移動してください。

動作確認

スニペットを各指定の場所に置いたら、SublimeTextに戻り、使用できるか確認します。「!acms:module」とタイプし、タブキーを押してください。


(スクリーンショット)

SublimeTextに「!acms:module」とタイプするとモジュールの項目がリストで表示される

画像のようなモジュールのリストが表示されます。好きなモジュールを選び、スニペットが展開されたら成功です。

今回配布しているスニペットには以下の設定が用意されています。

  • !acms:module
  • !acms:field
  • !acms:touch
  • !acms:if

  • :veil

  • :loop
  • :empty
  • !BEGIN
  • !BEGIN_MODULE
  • !BEGIN_MODULEid

加えて、各ビルトインモジュールについては「!モジュール名 (例: !Entry_List )」と記述することで呼び出すことも可能です。基本的には、モジュールIDも設定できるようになっていますが、不要であれば削除してください。

UTF-8の絵文字を利用する


※この記事で記述している実装方法はVer.2.7.0よりご利用できます。

デフォルト設定では、UTF-8 の絵文字を利用できません。絵文字を使いたい利用者も多いと思います。ここでは、ユニットやカスタムフィールドで絵文字を使えるようにするカスタマイズを行なっていきたいと思います。

前提条件

  • MySQL: 5.5 以上

絵文字を保存するためには、4バイト必要なのですが、MySQLの文字コードにUTF-8を指定すると3バイトしか保存できません。そこで文字コードを utf8mb4 に変更する事により、4バイト保存できるようになり、絵文字が保存できるようになります。

データベースの設定

データベースの文字コードを utf8mb4 に 照合順序を utf8mb4_general_ci もしくは utf8mb4_unicode_ci に変更してください。出来れば全てのテーブル、カラムを変更が望ましいですが最低限以下のテーブル・カラムを変更ください。

  • acms_column: column_field_1
  • acms_column_rev: column_field_1
  • acms_field: field_value
  • acms_field_rev: field_value
  • acms_fulltext: fulltext_value, fulltext_ngram
  • acms_entry: entry_title

データベース接続文字コードの設定

データベースの文字コードが変更できましたら、config.server.php の DB_CONNECTION_CHARSETutf8mb4 を設定します。

define('DB_CONNECTION_CHARSET', 'utf8mb4');

実際に入力

これで、絵文字が使えるようになりました。あとは、テキストユニットなどで、キーボードから絵文字を入力して保存してみてください。


エントリーで絵文字利用

エントリーで絵文字利用

ショートカット機能

コンフィグやモジュールIDの設定画面へのショートカットが管理画面のダッシュボードに表示されるようになり、よく変更するコンフィグを登録しておくと便利に運用することができます。

権限の付与

通常、モジュールIDやコンフィグ設定は、管理者権限がないと編集が出来ません。 しかしショートカット機能を使うと、投稿者や編集者においても編集権限を付与することができます。

管理者権限で作成済みの項目について、編集範囲をカスタマイズしたい場合にご利用ください。

ショートカットによって権限付与ができる機能

  • 任意のカテゴリー
  • 任意のブログ
  • 任意のスケジュール
  • カート
  • 任意のコンフィグ管理
  • 任意のモジュールID
  • テンプレート書出し管理

さらに詳細な権限のカスタマイズをしたい場合は、プロフェッショナル・エンタープライズ版ライセンスに含まれるロール機能をご利用ください。

ショートカットの作成

ショートカットに登録できるのは、コンフィグとモジュールIDのコンフィグになります。 ショートカットに追加したいコンフィグに移動し、画面右上の「ショートカットに追加」ボタンを押します。


ショートカットに追加ボタン

ショートカットに追加ボタン


「ショートカットに追加」ボタンを押すと、以下のような画面に移動するので、設定を行い作成をします。

  • ショートカット名(任意の名前)
  • 対象ユーザー(編集権限を与えるユーザー権限を設定)

設定後「作成」ボタンを押してショートカットを作成します。


ショートカット設定画面

ショートカット設定画面


ショートカットの利用

先ほど設定した権限以上のユーザーでログインし、管理ページに移動してみます。ダッシュボードにショートカットが追加されていることが確認できると思います。このコンフィグは管理者でなくても変更できるようになっています。


編集者のダッシュボード

編集者のダッシュボード


ショートカットの管理

管理者でログインすると 管理ページ > ショートカット というメニューがあり、いままで登録したショートカットの管理をすることができるようになっています。

  • ショートカットの並び順の変更
  • ショートカット名・権限の変更
  • ショートカットの削除

ショートカット管理画面

ショートカット管理画面