カテゴリ「メモ」に属する投稿［4件］

更新履歴

2023/12/08 02:25:06 スクリプト1点配布
2023/12/04 17:20:52 スキン1点配布
2023/12/03 19:30:55 編集画面用のCSSとJSを公開

たぶんGoogleフォームでの拍手できたんですが（雑に組んでるのでラベルが適当です）
<div class="clap">
   <form
      action="https://docs.google.com/forms/（個別のID）/formResponse"
      method="post" target="hidden_iframe" onsubmit="submitted=true;">
      <div>
            <input name="entry.（個別のID：A）" value="👏" id="field-clap" type="radio" required="required" />👏
         <input name="entry.（個別のID：A）" value="💖" id="field-clap" type="radio" required="required" />💖
         <input name="entry.（個別のID：A）" value="🌟" id="field-clap" type="radio" required="required" />🌟
      </div>
      <div>
         <input name="entry.（個別のID：B）" type="hidden" value="[[COMMENT:TITLE:30]]">
      </div>
      <div>
         <input name="entry.（個別のID：C）" type="hidden" value="[[PERMAURL:FULL]]">
      </div>
      <div>
         <button type="submit">送信する</button>
      </div>
   </form>
   <script type="text/javascript">
      let submitted = false;
   </script>
   <iframe name="hidden_iframe" id="hidden_iframe" style="display: none" onload="if(submitted){
   }else{
   window.location='#';}"></iframe>
</div>
これでできるんだけど、CSVを下に表示するのがなんか再現できず…あとできたとしても思ったような表示にはならなそう
（掲示板っぽい表示になるなら掲示板としててがろぐを使ったほうがいいと思うため）なので実装しないかなあ　と思います
できればボタンの横に合計値を出してほしい
ラベルの横にGoogleフォームで合計値を出せばいいのだが動的に増えるトリガー（URL乃至ポストIDになると思いますが）sumif関数を組んで表示させるほどの技術力がない
あと私がいいねボタンを使わないのでモチベがない…という

もし使う人がいる場合は利用規約（Googleフォームを使った場合にフッターに表示されるやつ）をリンクしたほうがいいのではないか　という意見も見かけたので、
利用規約プライバシーポリシー　この辺もどこかに追加してあげてください

そもそもこれはGoogle公式に推奨される使い方はないということで　もうここでも大手を振ってやることはないでしょう

いいねボタンがMITということで改造すればいいのでは？→たしかに
そもそも全角表示が非推奨なのはCSV保存だから？
JSONならそんなこともない？どっちもエスケープできるんでは（それをしないで実装するとは思えないし）
というか今の段階でも全角でdata-iinenameを指定できるならそれでもいいのでは…（公式には推奨されていないですが）
ちょっと何も使わずに今考えてるのであとで実験してうまくいったらなんとかしてみます

まあ選択肢は多いほうがいいと思うのでできるだけ扱いやすいものを考えます

参考サイト
Google FormをHTML/CSSでデザインしたフォームで運用する方法
静的サイトにHTMLとJavaScriptだけでコメント投稿機能を作る

カスタム絵文字ピッカー（仮-2）

【概要】

てがろぐ 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);
}畳む

●このスプリクトは、てがろぐのアップデートにかかわらず、不定期に更新・変更、削除する可能性があります。●

カスタム絵文字ピッカー（仮）

【概要】

てがろぐ Ver 4.0.5.から実装されている、カスタム絵文字リストをスキンへ持ってくるスプリクト
jQuery使用
AI生成物を加筆修正したもの（検証：Windows/vivaldi、iOS/safari）
使用は自己責任でお願いいたします

【詳細】
iOS/safariでは、カスタム絵文字をダブルクリックでコピーする機能を使うと画面が拡大されてしまうため、作りました。
今後の本実装での仕様変更で使えなくなったり、実装予定の絵文字リストの追加によって無用のものになったりする可能性がありますので、いったんテスト的にこっそり公開します。
使用感をいただけると助かります。教えて頂かなくても、改変・自作されたものを公開していただけるとすごく嬉しいです……。

管理画面のカスタム絵文字のページ（tegalog.cgi?mode=admin&work=cemoji）にある、
リストと機能（Javascriptでクリックするとコピーするようになっています）をjQueryで取得し、
スキン側の任意の箇所に持ってくるスプリクトです。

クイック投稿フォームの近くに持ってくることを想定しています。

CSSで装飾できるので、ご自身のスキンに合わせて、ご自由に改変することが可能です。

【使用方法】
skin-cover.htmlへ追加する記述
好きなところに<div class="cepicker Login-Required"></div>を追加する。
クイック投稿フォームの近くがおすすめです。

cepicker＝custom emoji picker
このクラス名は自由に変更して大丈夫ですが、以降のスプリクト部分でクラス名の部分を適切に置き換えてください。

管理画面の情報を取得するので、ログインしないとリストが表示できません。
Login-Required（ログイン時のみ表示するクラス）は必ず加えてください。

BODYタグ内に下記を追記
<script>
$(document).ready(function () {
   // ?mode=admin&work=cemoji(絵文字ページ)から情報を取得
   $.get("?mode=admin&work=cemoji", function (data) {
      var CElist = $(data).find("#CemojiList").html();
      var scriptContent = $(data).find("script").html();

      // Scriptタグは実行するために追加
      var scriptElement = document.createElement("script");
      scriptElement.innerHTML = scriptContent;

      // cepicker以外のクラス名を指定した場合はここを書き換える(1)
      $(".cepicker").html(`
      <div id="CemojiList">${CElist}</div>
   `);

      // cepicker以外のクラス名を指定した場合はここを書き換える(2)
      $(".cepicker").append(scriptElement);
   });
});
</script>

CSSに追記する例（見た目の設定）
/*全体の調整*/
.cepicker {
margin: 10px auto;
padding: 5px 0;
width: calc(100% - 10px);
max-width: 900px;
max-height: 300px;
overflow-y: auto;
background-color: #dedede;
}

/*絵文字リスト全体を横並びにする*/
.cepicker #CemojiList {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 3px;
}

/*絵文字、名前、コピーボタンを縦並びに*/
.cepicker .oneCemoji {
display: inline-grid;
justify-items: center;
padding: 2px;
background-color: #f0f0f0;
}

/*絵文字名は隠す*/
.cepicker .cename {
display: none;
}

/*コピーボタンを小さめにする*/
.cepicker .cectrl button {
font-size: 0.7em;
}

/*絵文字の高さを指定する（記事の絵文字とは別）*/
.cepicker .oneCemoji img {
height: 1.5em;
}

CSSは例のため、お好きに変更できます。
ブラウザのデベロッパーモードなどでクラス名等を確認しながら装飾してみてください。

なお、ご利用の端末や、追加したい絵文字によっては、絵文字ごとor全体にCSSの追加設定が必要になります。
SVG画像を使用していて表示が崩れる場合は、公式マニュアル（▼iPhone等のiOS端末でSVG絵文字が縦に並んでしまう場合の対処方法）を参考にCSSを追記してください。

●このスプリクトは、てがろぐのアップデートにかかわらず、不定期に更新・変更、削除する可能性があります。●

サイト覚書

サイト構成：てがろぐ
スキン：自作

アイコン：Font Awesome
フォント：Googleフォント
　タイトル・メニュー　Palette Mosaic
　見出し　Kaisei Decol（Bold 700）