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

ここでは、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 以上

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

データベースの設定

データベースの文字コードを 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_CHARSET に utf8mb4 を設定します。

define('DB_CONNECTION_CHARSET', 'utf8mb4');

実際に入力

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

エントリーで絵文字利用

エントリーで絵文字利用