カスタム絵文字ピッカー（仮-2）
【概要】
【詳細】
カスタム絵文字ピッカーを、Misskeyみたいに使うためのスクリプト第二弾です。前のものとは別物になったので別の記事にしました。
PHPで絵文字を使用するフォルダ（ディレクトリ）内の画像ファイルを一覧化し、
HTML（スキン）内の任意のdiv要素内へ出力します。
そうやって出力された絵文字をクリックすると、クイック投稿フォームの現在のカーソル位置へ挿入される、というものです。
使用する場合は、スキンへの記述の追加のほかに、PHPファイルを作成する必要があります。
デモでお試しください。 （デフォルトスキンのクイック投稿フォームの近くに配置しています）
【使用方法】
●「get_cemoji.php」というPHPファイルを作成します。
<?php
// ここに許可するドメイン（自分のサイトのURL）を追加
$allowedDomain = 'サイトのURL';
// Refererヘッダーを取得
$referer = $_SERVER['HTTP_REFERER'];
// Refererヘッダーが許可するドメインで始まるかどうかを確認
if (strpos($referer, $allowedDomain) === 0) {
// 許可するドメインからのアクセスの場合、処理を続行
// ここから カスタム絵文字ピッカーについての記述
// カスタム絵文字ディレクトリのパス（デフォルトはemoji）
$imgDir = 'emoji/';
// ディレクトリ内のファイル一覧を取得
$files = scandir($imgDir);
// 余分な要素を削除
$files = array_diff($files, array('.', '..'));
// JSON形式でファイルリストを返す
header('Content-Type: application/json');
echo json_encode($files);
// ここまで カスタム絵文字ピッカーについての記述
} else {
// 許可しないドメインからのアクセスの場合、エラーを返すなどの処理を行う
http_response_code(403); // 403 Forbiddenを返す
echo "アクセスが許可されていません。";
exit;
}
?>
畳む
phpファイルのみにアクセスされるのを防ぐため（別に見えても画像ファイル名しかないと思いますが…）、
自分のサイトからしかphpを呼び出せないようにします。
「サイトのURL」の部分を自分のサイトのURL（https://www.example.comの形式）に書き換えてください。
（他にいい方法があったら教えてください・・・）
また、カスタム絵文字のディレクトリを変更している場合は、そちらも適切に書き換えてください。
設定=>システム設定=>【カスタム絵文字機能の設定】で設定しているディレクトリ＋末尾に/を追加
phpファイルが作成出来たら、tegalog.cgiが設置してあるディレクトリ内に設置してください。
（異なる場所に配置したり、get_cemoji.php以外のファイル名にする場合は、下記のスクリプトの記述で、ご自身で適切に書き換えてください。）
●続いてスキン側（skin-cover.html）へ、絵文字を出力位置へ要素を追加
適当なところ（クイック投稿フォームの近くがおすすめ）に下記を追加
<div class="cemojipicker Login-Required"></div>
Login-Requiredはログイン時以外は非表示にできるクラスです。（公式マニュアル ）
cemojipickerの部分は好きに置き換えて問題ないですが、スクリプトのcemojipickerの部分を置き換える必要があります。
●続いてスキン側（skin-cover.html）のBODY内に追加
まずjQueryのCDNを公式から持ってくる
（すでにある場合は重複しないように気をつけてください）
その下に下記を追加
<script>
$(document).ready(function () {
// サーバーサイドのスクリプトから画像ファイルリストを取得
$.ajax({
url: 'get_cemoji.php', // サーバーサイドのスクリプトへのパスを指定
dataType: 'json',
success: function (data) {
// 取得したファイルリストを処理
$.each(data, function (index, filename) {
// 拡張子を取り除いたファイル名を生成 必要であれば有効にする（不要なのでコメントアウト）
// var fileBaseName = filename.split('.').slice(0, -1).join('.');
// 画像の<img>要素を作成し、alt属性を設定して<div class="cemojipicker">に追加
var imgSrc = 'emoji/' + filename;
// alt属性を指定された形式に設定。拡張子を含めないときはfilenameをfileBaseNameにする
var altText = '[:' + filename + ':]';
var img = $("<img>").attr("src", imgSrc).attr("alt", altText);
img.appendTo(".cemojipicker");
// 画像をクリックしたときの処理
img.click(function () {
// クリックされた画像のalt属性の値を取得
var altText = $(this).attr("alt");
// <textarea class="tegalogpost">のDOM要素を取得
var textarea = document.querySelector(".tegalogpost");
// カーソルの位置を取得
var cursorPos = textarea.selectionStart;
// テキストエリアの内容を取得
var text = textarea.value;
// カーソル位置に新しいテキストを挿入
var newText = text.slice(0, cursorPos) + altText + text.slice(cursorPos);
// テキストエリアに新しいテキストを設定
textarea.value = newText;
// カーソル位置を更新
textarea.selectionStart = cursorPos + altText.length;
textarea.selectionEnd = cursorPos + altText.length;
});
});
}
});
});
</script>
畳む
これは絵文字のAlt属性を[:ファイル名.拡張子:]の形式で作成し、そのAlt要素を取得=>テキストエリアに貼り付けています。
拡張子を含めることで、投稿フォームのライブプレビュー機能等を実装している場合に、絵文字をプレビューすることができます。
不要な場合は[:ファイル名:]の形式がスマートだと思うので、コメントアウトしている部分（緑の部分）を有効にして使ってください。
また、黄色の文字の部分は、前の項目でファイル名・クラス名を変更している場合に変更が必要な箇所です。
●CSS（例）
/*全体の見た目を整える*/
.cemojipicker{
margin: 10px auto;
padding: 5px 0;
width: calc(100% - 10px);
max-width: 900px;
max-height: 300px;
overflow-y: auto;
background-color: #dedede;
}
/*カスタム絵文字のサイズをそろえて余白をつける*/
.cemojipicker img {
margin: 2px 5px;
height: 2em;
transition: 0.3s;
}
/*絵文字をクリックしたらちょっと小さくなる*/
.cemojipicker img:active{
transform: scale(0.8);
}畳む
●このスプリクトは、てがろぐのアップデートにかかわらず、不定期に更新・変更、削除する可能性があります。●
【概要】
- てがろぐ Ver 4.0.5.から実装されている、カスタム絵文字リストをスキンへ持ってくるスクリプト
- 前回配布したものとは別
- jQuery・PHP使用
- AI生成物を加筆修正したもの（検証：Windows/vivaldi、iOS/safari）
- 使用は自己責任でお願いいたします
【詳細】
カスタム絵文字ピッカーを、Misskeyみたいに使うためのスクリプト第二弾です。前のものとは別物になったので別の記事にしました。
PHPで絵文字を使用するフォルダ（ディレクトリ）内の画像ファイルを一覧化し、
HTML（スキン）内の任意のdiv要素内へ出力します。
そうやって出力された絵文字をクリックすると、クイック投稿フォームの現在のカーソル位置へ挿入される、というものです。
使用する場合は、スキンへの記述の追加のほかに、PHPファイルを作成する必要があります。
デモでお試しください。 （デフォルトスキンのクイック投稿フォームの近くに配置しています）
【使用方法】
●「get_cemoji.php」というPHPファイルを作成します。
<?php
// ここに許可するドメイン（自分のサイトのURL）を追加
$allowedDomain = 'サイトのURL';
// Refererヘッダーを取得
$referer = $_SERVER['HTTP_REFERER'];
// Refererヘッダーが許可するドメインで始まるかどうかを確認
if (strpos($referer, $allowedDomain) === 0) {
// 許可するドメインからのアクセスの場合、処理を続行
// ここから カスタム絵文字ピッカーについての記述
// カスタム絵文字ディレクトリのパス（デフォルトはemoji）
$imgDir = 'emoji/';
// ディレクトリ内のファイル一覧を取得
$files = scandir($imgDir);
// 余分な要素を削除
$files = array_diff($files, array('.', '..'));
// JSON形式でファイルリストを返す
header('Content-Type: application/json');
echo json_encode($files);
// ここまで カスタム絵文字ピッカーについての記述
} else {
// 許可しないドメインからのアクセスの場合、エラーを返すなどの処理を行う
http_response_code(403); // 403 Forbiddenを返す
echo "アクセスが許可されていません。";
exit;
}
?>
畳む
phpファイルのみにアクセスされるのを防ぐため（別に見えても画像ファイル名しかないと思いますが…）、
自分のサイトからしかphpを呼び出せないようにします。
「サイトのURL」の部分を自分のサイトのURL（https://www.example.comの形式）に書き換えてください。
（他にいい方法があったら教えてください・・・）
また、カスタム絵文字のディレクトリを変更している場合は、そちらも適切に書き換えてください。
設定=>システム設定=>【カスタム絵文字機能の設定】で設定しているディレクトリ＋末尾に/を追加
phpファイルが作成出来たら、tegalog.cgiが設置してあるディレクトリ内に設置してください。
（異なる場所に配置したり、get_cemoji.php以外のファイル名にする場合は、下記のスクリプトの記述で、ご自身で適切に書き換えてください。）
●続いてスキン側（skin-cover.html）へ、絵文字を出力位置へ要素を追加
適当なところ（クイック投稿フォームの近くがおすすめ）に下記を追加
<div class="cemojipicker Login-Required"></div>
Login-Requiredはログイン時以外は非表示にできるクラスです。（公式マニュアル ）
cemojipickerの部分は好きに置き換えて問題ないですが、スクリプトのcemojipickerの部分を置き換える必要があります。
●続いてスキン側（skin-cover.html）のBODY内に追加
まずjQueryのCDNを公式から持ってくる
（すでにある場合は重複しないように気をつけてください）
その下に下記を追加
<script>
$(document).ready(function () {
// サーバーサイドのスクリプトから画像ファイルリストを取得
$.ajax({
url: 'get_cemoji.php', // サーバーサイドのスクリプトへのパスを指定
dataType: 'json',
success: function (data) {
// 取得したファイルリストを処理
$.each(data, function (index, filename) {
// 拡張子を取り除いたファイル名を生成 必要であれば有効にする（不要なのでコメントアウト）
// var fileBaseName = filename.split('.').slice(0, -1).join('.');
// 画像の<img>要素を作成し、alt属性を設定して<div class="cemojipicker">に追加
var imgSrc = 'emoji/' + filename;
// alt属性を指定された形式に設定。拡張子を含めないときはfilenameをfileBaseNameにする
var altText = '[:' + filename + ':]';
var img = $("<img>").attr("src", imgSrc).attr("alt", altText);
img.appendTo(".cemojipicker");
// 画像をクリックしたときの処理
img.click(function () {
// クリックされた画像のalt属性の値を取得
var altText = $(this).attr("alt");
// <textarea class="tegalogpost">のDOM要素を取得
var textarea = document.querySelector(".tegalogpost");
// カーソルの位置を取得
var cursorPos = textarea.selectionStart;
// テキストエリアの内容を取得
var text = textarea.value;
// カーソル位置に新しいテキストを挿入
var newText = text.slice(0, cursorPos) + altText + text.slice(cursorPos);
// テキストエリアに新しいテキストを設定
textarea.value = newText;
// カーソル位置を更新
textarea.selectionStart = cursorPos + altText.length;
textarea.selectionEnd = cursorPos + altText.length;
});
});
}
});
});
</script>
畳む
これは絵文字のAlt属性を[:ファイル名.拡張子:]の形式で作成し、そのAlt要素を取得=>テキストエリアに貼り付けています。
拡張子を含めることで、投稿フォームのライブプレビュー機能等を実装している場合に、絵文字をプレビューすることができます。
不要な場合は[:ファイル名:]の形式がスマートだと思うので、コメントアウトしている部分（緑の部分）を有効にして使ってください。
また、黄色の文字の部分は、前の項目でファイル名・クラス名を変更している場合に変更が必要な箇所です。
●CSS（例）
/*全体の見た目を整える*/
.cemojipicker{
margin: 10px auto;
padding: 5px 0;
width: calc(100% - 10px);
max-width: 900px;
max-height: 300px;
overflow-y: auto;
background-color: #dedede;
}
/*カスタム絵文字のサイズをそろえて余白をつける*/
.cemojipicker img {
margin: 2px 5px;
height: 2em;
transition: 0.3s;
}
/*絵文字をクリックしたらちょっと小さくなる*/
.cemojipicker img:active{
transform: scale(0.8);
}畳む
●このスプリクトは、てがろぐのアップデートにかかわらず、不定期に更新・変更、削除する可能性があります。●