初心者向け Lite Editorで絵文字を使い、a-blog cmsをアメブロ風にする方法！

この記事は、a-blog cms Advent Calendar 2023　15日目の記事です。
だんだんクリスマスに近づいてきましたね！

簡単な自己紹介

はじめまして、こんにちは。
株式会社ルーコの川﨑です。
a-blog cmsを使うようになって、やっと1年経過しました。
Webデザイナー歴も1年です。
転職前は事務職を3年半していました。
まだまだ分からないことだらけですが、少しずつ頑張ってます！

経緯

アドベントカレンダーの存在は知ってはいたものの、去年は勉強のために見ているだけでした。
まだ知識も浅いし、今年はどうしようかな、と思っていたところ、アドベントカレンダーが残りわずかだったので、とりあえずやってみよう！という気持ちで登録してみました。

ブログを始めて、絵文字を使いたくなる

最近、ブログを書いてみたいな、と思いました。
早速、a-blog cmsでブログを書いていて、だんだん、「絵文字が使いたいな」と思うようになりました。
ブログは、読者に共感してもらったり、気持ちを伝えたりする等の情緒的なコミュニケーションが大事なのかな、と思っています。
次も読んでみたいな、と思うブロガーの方は、気持ちの共有がすごく上手だなと思うんですよね。
でも、やってみるとなかなか、文字だけで気持ちを表現するのって難しいんです。
私は、苦手な方です。
ですがそんな時、絵文字は感情を直感的に伝えられる&気持ちを代弁してくれるのを助けてくれるな、と思うので、絵文字を導入したい！
と考えました。

少し、話が逸れますが、絵文字文化について気になったので調べてみました(本編とは関係ないので、興味ない方は次の見出しへどうぞ)。下記の記事、すごく面白い内容だったので気になる方はご覧ください。

• グローバルデザインとしての絵文字 その効果と文化間の違い

絵文字は日本発祥のものです。🇯🇵
それが今や世界共通言語になってるのはすごいですよね！

絵文字を使う方法

では、本編に戻ります。
絵文字を使うようにする方法は、結構前にa-blog cms公式のサイトにも上がっています。

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

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

と、解説されていました。

しかし、私のような初心者は、能力的・技術的にデータベースを触る知識を持ち合わせていないのです・・・！！！
「どうしよう、詰んだ・・・」と挫折しかけましたが、それでも絵文字を使いたい執念があり、今自分ができることで、なんでもいいから絵文字を出してみよう！と思いました。

どうやってやるか考える

さて、一体全体、どうやって絵文字入れようかな〜と考えていたところ、あることを思い出しました。
最近、仕事で、ブログの記事をa-blog cmsに、お引っ越しする作業がありました。
そして、記事のお引越しと同時に、gifファイルのお引っ越しもしたんです。
そのブログは、UTF-8の絵文字ではなく、アメブロみたいにgifファイル形式の独自の絵文字を使っていました。

▼こんな感じ

imgタグでgifファイルを出力していました。
その時に、テキストエリアにimgを出力できるんだ！と、初めて知りました。
それを思い出し、「よし、テキストエリアに、.gifを出せるようにしよう！」と決めました。
アメブロ風のブログにすることに決定し、さらに使い勝手が良いように、Lite Editorで出力できるようにしてみようと考えました。

やってみた結果

なんとか出せました！

ビフォー

アフター

実装方法

▼今回役に立った記事、参照した記事です。
ありがとうございました

• E: ちょっとリッチなテキストユニットを作ってみよう

• Lite Editor 拡張方法まとめ（a-blog cms）

下準備&手順

では、実際に絵文字を使えるようにしていきましょう！

それにはまず、gifファイルが必要です。
私は、無料で配布されていた、下記を使わせてもらいました。　

• 【2023.7追加】SlackやDiscordで使えるネコチャン絵文字を配布しています♪
• GIFアニメのサイズ（容量）縮小

この絵文字を使用します！かわいいです！

サイズが大きかったので、80％縮小しました。

これで下準備は終わりです。
ちなみに、上記で紹介したように、Lite Editorを使わなくても、絵文字は簡単に出せます。
超初心者の方は、まず、imgタグでテキストエリアに絵文字を出すのを試してみるのがオススメですよ！

まず、gifファイルをしまうフォルダを作成します。今回は、images/img-face　に入れました。（もし、FTP領域は触らないよって方は、管理画面のメディアに直接アップロードしてみてください。）

あとは、テキストエリアを、コードが書けるように切り替えて（赤枠の箇所で切り替えできる）、

imgタグで出力するだけです。（メディアにアップロードした方は、下図を参考にして、メディアで取得したURLを使い、src＝““のところにパスを入れてみましょう！！）

▼画像

初心者の方にとって、パスって難しいですよね！私もすごく苦手だったし、なんなら今でもニガテです。
けど、練習になるので、HTML触りたての人は、ぜひ頑張って表示させてみてください！
ちなみに、パスに少し慣れると、グローバル変数を使いたくなるかと思うのですが、グローバル変数はテンプレート上でしか機能しないそうです。(最初、上記のパスにグローバル変数を使っていて、出なかったので、補足でした！)

では、Lite Editorを使って、ボタンを作り、絵文字の表示を楽にする方法を記述していきます。
imgタグで出力できても、毎回打ち込むのはめんどくさいですよね。
そんな時に、Lite Editorが味方になってくれます。

Lite Editorで絵文字を出すには

手順1.　/include/head/js.html　に、下記を追記する

今回は、デフォルトのLite Editorも変更してみようと思います。（詳細なLite Editorの解説は、前述の「▼役に立った記事、参照した記事です。」に詳しく説明されていますのでご参照ください。）

リンクはそのまま、赤太字、黒太字、そして、猫の絵文字を出力できるようにします。
まず、下記を　/include/head/js.html　に、追記しましょう。私は使用しているthemesにjs.htmlを複製して記述しました。
sampleTextは好きな名前にしてください。
文字や絵文字のtagは、意味を持たせないspanを使うことにしました。

ACMS.Ready(function(){
	ACMS.Config.LiteEditorConf.btnOptions = [{
		  label: 'リンク',
		  tag: 'a',
		  className: '',
		  sampleText: 'リンクテキスト'
	  },
	  {
		label: '赤太大',
		tag: 'span',
		className: 'red-bold-text',
		sampleText: '赤太大'
	},
	{
		label: '黒太大',
		tag: 'span',
		className: 'black-bold-text',
		sampleText: '黒太大'
	},
	{
		label: '嬉',
		tag: 'span',
		className: 'happy-face',
		sampleText: '嬉しい顔'
	}];
});
</script>

※初心者の方への注意点として、元々js.htmlに書いていあるコードはそのままにして、上記を追記するのが大事です、とお伝えします（私は本当に初めの頃、上書きしたらいけないものを上書きしたりしてしまっていたので・・・）。

手順2.cssで整える

そして、見た目を整えていきます。
赤太字、黒太字の色とサイズは、先ほど記述したclassNameを使って、ここで装飾しましょう。
そして、猫の絵文字は、content:url()で出力していきます。
（Lite Editorでは、imgタグで出力できなかったため、下記の方法で出力しました！）

.entryFormLiteEditor span.happy-face::after{
	content: url(../images/img-face/daijoubu-nya.gif);
}

これで、完了です！では、実際に使ってみます。

::afterで出力しているので、「。」を選択してから、「嬉」ボタンを押すことで、「。」の後にgifファイルが出力されます。

すると・・・

できました！
ここまでが、Lite Editorの簡単な使い方、そして「Lite Editorで絵文字を使い、a-blog cmsをアメブロ風にする方法！」でした。

課題

課題1　直感的な見た目にする

う〜む。一応出たは出たけど、「嬉」だと、なんだか直感的なインターフェースじゃないよな〜
何かいい方法ないだろうか・・・。
欲を言えば、Lite Editorのところに、同じ絵文字を出したい。

Lite Editorって、UI部分には画像入れられないのかな・・・？と諦めかけていましたが、ふと、あることに気付きました。
「そういえば、ルーコ（会社）で毎日触ってるa-blog cmsのLite Editor、装飾されてるよね」

と思って、いろいろと探ってみたところ、ヒントを得ました

• Lite Editorで、テキスト以外も使っちゃおう
  ありがとうございました

そのヒントとは、
labelに、imgタグをいれる、ということです。

▼こんな感じ

label: '<img src="/images/img-face/daijoubu-nya.gif" alt="嬉しそうな猫の絵文字">',

lavelって、imgタグ入れられるんですね。知らなかったです！
これで簡単に出せました。

ちょっとはみ出てるので、cssで整えます。

左と同じ大きさにしたかったんですが、絵文字を90%に縮小したら小さすぎて何か分からない状態(丸くて黄色い何か、みたいな感じ。かろうじて、たこ焼きかな？みたいに見える状態)だったので、80%縮小のままにしました。

でも、大きさが違うのは気持ち悪さがあるので、全体を大きくしてみました。

これでもやや見た目的に不自然ですが、とりあえずOKにします！課題1はとりあえず解決です。

課題2　altを入れられない

Lite Editorのタグにimgが入れられず、altが入れられなかったです。
絵文字を使う場合は、altは入れるべきと思いますが、これはどう頑張っても無理そうです
結果的には絵文字出てるし、潔く諦めました！

終わりに

拙い内容ですが、最後まで読んでいただき、ありがとうございました！！！
今回は、絵文字を1つしか入れてなかったのですが、色んな絵文字も使って、ブログを書いてみたいと思ってます。

今回書いた記事で、もし、ここ間違ってるよ、とかこうした方がいいよ、とか何か他にもご感想あれば、下図のご意見・ご感想フォームまたはコメント欄へ、ぜひぜひ教えてください！　
匿名投稿でも全然OKです。