2023年8月 この範囲を時系列順で読む この範囲をファイルに出力する
投稿本文中に表示されているカスタム絵文字から表示コードをコピーする機能のトリガーを、ダブルクリックにするかシングルクリックにするかを設定で選べるようにしてみました。
※シングルクリックでコピーされる設定にしている場合で、カスタム絵文字をリンクラベルの中に使った場合、ピンポイントにリンクテキストの中の絵文字部分をクリックすると、コードがクリップボードにコピーされた上でさらにリンク先に移動します。
- この動作サンプルでは、(デフォルト設定である)ダブルクリックでコピーされます。
- 試しに、開発放言では、シングルクリックでコピーされる設定にしてみました。お使いの環境で試し比べてみて下さい。
※シングルクリックでコピーされる設定にしている場合で、カスタム絵文字をリンクラベルの中に使った場合、ピンポイントにリンクテキストの中の絵文字部分をクリックすると、コードがクリップボードにコピーされた上でさらにリンク先に移動します。
てすと
Twitterで見る デモモードで動作しています。ここでは、作者であるnishishiアカウント以外のツイートの埋め込みはできません。テキストリンクとして掲載は可能ですが、ツイート主が拡散を希望していない可能性がある点にもご配慮下さい。 Twitterで見る デモモードで動作しています。ここでは、作者であるnishishiアカウント以外のツイートの埋め込みはできません。テキストリンクとして掲載は可能ですが、ツイート主が拡散を希望していない可能性がある点にもご配慮下さい。
テスト2
開発進捗状況報告サイトで、てがろぐ Ver 4.0.5(β版)の配布を開始しました。ご自由にダウンロードしてご活用頂けます。お試し頂ければ幸いです。主に以下の点を搭載しています。
🆕 Ver 4.0.5βの更新点(概要)：
《▼新機能》
●アップロードされているカスタム絵文字の一覧を表示できる機能を追加。
●投稿本文中に見えるカスタム絵文字をダブルクリックしたら、表示用コードがクリップボードにコピーされるオプションを追加。
《▼仕様改善》
●投稿日時順の再ソート機能や、投稿番号の再採番機能の実行仕様を改善。
詳しい使い方などは、上記の開発進捗状況報告ページの記事をご覧下さい。
➡ アナウンス（Twitter）：
➡ アナウンス（Mastodon）：
Pawooの投稿
🆕 Ver 4.0.5βの更新点(概要)：
《▼新機能》
●アップロードされているカスタム絵文字の一覧を表示できる機能を追加。
●投稿本文中に見えるカスタム絵文字をダブルクリックしたら、表示用コードがクリップボードにコピーされるオプションを追加。
《▼仕様改善》
●投稿日時順の再ソート機能や、投稿番号の再採番機能の実行仕様を改善。
詳しい使い方などは、上記の開発進捗状況報告ページの記事をご覧下さい。
➡ アナウンス（Twitter）：
（ツイート埋め込み処理中...）Twitterで見る
➡ アナウンス（Mastodon）：
Pawooの投稿
たこ焼き
テスト
テスト
テスト
おなかがすいた……ので何か食べるべきか、もう寝るべきか。🍘🍩🍫
🍘Re:3917◆いえいえ、私もiOS用ブラウザがそんな仕様になっているとはさっぱり知りませんでしたので、新たな知見が得られました。^^; ありがとうございます。とりあえず、ズームの面の考慮はなしの状態でβ版を公開します。いろいろお試し頂ければ幸いです。（ドロップダウンリストから挿入できる機能も作る予定ではいますが、登録できる仕組みを用意するのにそこそこ工数がかかりますので、実装はもうちょっと後になると思います。）
🍘Re:3917◆いえいえ、私もiOS用ブラウザがそんな仕様になっているとはさっぱり知りませんでしたので、新たな知見が得られました。^^; ありがとうございます。とりあえず、ズームの面の考慮はなしの状態でβ版を公開します。いろいろお試し頂ければ幸いです。（ドロップダウンリストから挿入できる機能も作る予定ではいますが、登録できる仕組みを用意するのにそこそこ工数がかかりますので、実装はもうちょっと後になると思います。）
>>3914
スマホからだと全部ズーム動作になると思ってました……💦
申し訳ありません、訂正ありがとうございます！
>>3915
こちらも申し訳ありません、ズーム動作だけではなくクリックイベント全部無効になるとは知らず……知識不足でお手数お掛けしてしまいました。
コピー自体は便利な機能だと思うのですが……
ベータ版がリリースされたら自分の方でも、スキンか設定でどうにかできないか確かめてみます。ありがとうございます😊
>>3916 （投稿しているうちに更新されていたので追加で……。）
個人的にはシングルタップでもいいと思います。
話を「いつも使う絵文字を使いやすくする」という目的に戻っても良いなら、
「よく使う絵文字」というフラグを立てられるようにして、実装予定のドロップダウンリストで先頭に表示するようにする、という実装をしてほしいです。
Misskey系の絵文字ピッカーがそういう感じで、よく使う絵文字を自由に登録して優先表示できます。
（俗にリアクションピッカーと呼ばれているやつです）
てがろぐのカスタム絵文字がどこまでMisskeyに寄せるか分かりませんが……ユーザーの一意見として投稿いたします🙇♀️
スマホからだと全部ズーム動作になると思ってました……💦
申し訳ありません、訂正ありがとうございます！
>>3915
こちらも申し訳ありません、ズーム動作だけではなくクリックイベント全部無効になるとは知らず……知識不足でお手数お掛けしてしまいました。
コピー自体は便利な機能だと思うのですが……
ベータ版がリリースされたら自分の方でも、スキンか設定でどうにかできないか確かめてみます。ありがとうございます😊
>>3916 （投稿しているうちに更新されていたので追加で……。）
個人的にはシングルタップでもいいと思います。
話を「いつも使う絵文字を使いやすくする」という目的に戻っても良いなら、
「よく使う絵文字」というフラグを立てられるようにして、実装予定のドロップダウンリストで先頭に表示するようにする、という実装をしてほしいです。
Misskey系の絵文字ピッカーがそういう感じで、よく使う絵文字を自由に登録して優先表示できます。
（俗にリアクションピッカーと呼ばれているやつです）
てがろぐのカスタム絵文字がどこまでMisskeyに寄せるか分かりませんが……ユーザーの一意見として投稿いたします🙇♀️
(No.3915の続き)
カスタム絵文字を出力しているimg要素のstyle属性値に touch-action:manipulation; を加える方法以外に、例えば本文表示領域である .onelogbody に対して touch-action:manipulation; を加えても、やはり（iOS・iPadOSでは）絵文字のダブルクリックイベント自体が無効になって（コードをクリップボードにコピーする処理自体が実行されなくなって）しまいました。どうも、iOS・iPadOS用ブラウザがそういう動作になる仕様っぽいですね。（Androidでは問題ありませんでした。）
で、iPadで表示させた場合には、カスタム絵文字をダブルタップしてもズームしなかったので、たぶん、（ダブルタップでズームするのは）スキンのデザインと画面サイズとの兼ね合いの問題なのかもしれません。
何か他に良い方法はありますかね……？
とりあえず、touch-action:manipulation; を加えると（iOS・iPadOSでは）コピー自体もできなくなるので、これを加えるわけにはいかなさそうです。スキン側でズーム自体を禁止すればズームはしないでしょうけども、それをCGI側で出力するわけにはいかないので。
トリガーをダブルクリックではなくシングルクリックにする手もあるんですが、シングルクリックだと誤って絵文字を押してしまっただけで、クリップボードの中身を書き換えてしまうことになるので、あまり望ましくないと思うんですよね……。
カスタム絵文字を出力しているimg要素のstyle属性値に touch-action:manipulation; を加える方法以外に、例えば本文表示領域である .onelogbody に対して touch-action:manipulation; を加えても、やはり（iOS・iPadOSでは）絵文字のダブルクリックイベント自体が無効になって（コードをクリップボードにコピーする処理自体が実行されなくなって）しまいました。どうも、iOS・iPadOS用ブラウザがそういう動作になる仕様っぽいですね。（Androidでは問題ありませんでした。）
で、iPadで表示させた場合には、カスタム絵文字をダブルタップしてもズームしなかったので、たぶん、（ダブルタップでズームするのは）スキンのデザインと画面サイズとの兼ね合いの問題なのかもしれません。
何か他に良い方法はありますかね……？
とりあえず、touch-action:manipulation; を加えると（iOS・iPadOSでは）コピー自体もできなくなるので、これを加えるわけにはいかなさそうです。スキン側でズーム自体を禁止すればズームはしないでしょうけども、それをCGI側で出力するわけにはいかないので。
トリガーをダブルクリックではなくシングルクリックにする手もあるんですが、シングルクリックだと誤って絵文字を押してしまっただけで、クリップボードの中身を書き換えてしまうことになるので、あまり望ましくないと思うんですよね……。
おなかがすいた……！
Re:3913◆たしかに、iOS用ブラウザだと、ダブルタップでズームしてしまいますね。同時にコピーもできてはいるようですけども（iPadではズームせずにコピーできました）。試しに、touch-action: manipulation;を加えてみたんですが（今この試験場で動作をお試し頂けます戻しました）、そうするとiOS用ブラウザではそもそもダブルタップによるコピー自体もできなくなってしまったような気がします……。(^_^;;; どうですかね？ もしかして、touch-action: manipulation;を加えた要素では、ダブルタップのイベント自体が無効にされてしまう仕様なんですかね……。Android用ブラウザだと問題ないんですけども。
Re:3914◆Androidでは確かに問題ないですね。iPadでも問題ありませんでした。（もしかしたらスキンと画面サイズの問題かもしれませんが。）
Re:3913◆たしかに、iOS用ブラウザだと、ダブルタップでズームしてしまいますね。同時にコピーもできてはいるようですけども（iPadではズームせずにコピーできました）。試しに、touch-action: manipulation;を加えてみたんですが（Re:3914◆Androidでは確かに問題ないですね。iPadでも問題ありませんでした。（もしかしたらスキンと画面サイズの問題かもしれませんが。）
>>3913
スマホはAndroidですが、Chrome、Edge、Firefox、いずれの場合もズームすることはありませんでした。Firefoxだとダブルタップしてもやや反応が悪くてコピーできないことがあるくらい？(コピーできないわけじゃないです)
スマホはAndroidですが、Chrome、Edge、Firefox、いずれの場合もズームすることはありませんでした。Firefoxだとダブルタップしてもやや反応が悪くてコピーできないことがあるくらい？(コピーできないわけじゃないです)
こんばんは。いつも楽しくてがろぐを使わせていただいてます。ありがとうございます！
>>3910 で行われているダブルクリックでの絵文字コピーなのですが、スマホ(Safari/iPhone)でダブルタップするとズームされてしまいます
(Safariだけでなく他のスマホ端末でも同じ動作になると思いますが……)
CSSの
touch-action: manipulation;
などで、スキン側で制御することも出来ると思いますが、絵文字機能にダブルクリックコピーを標準実装するなら、合わせてズームしないようにCSSを出力する……などCGI側で制御していただけると大変助かります🙇
お忙しいところお手数ですが、ご一考いただけますと幸いです。
>>3910 で行われているダブルクリックでの絵文字コピーなのですが、スマホ(Safari/iPhone)でダブルタップするとズームされてしまいます
(Safariだけでなく他のスマホ端末でも同じ動作になると思いますが……)
CSSの
touch-action: manipulation;
などで、スキン側で制御することも出来ると思いますが、絵文字機能にダブルクリックコピーを標準実装するなら、合わせてズームしないようにCSSを出力する……などCGI側で制御していただけると大変助かります🙇
お忙しいところお手数ですが、ご一考いただけますと幸いです。
わーいこれは手軽で楽しいですね！
> 例えば、これらのカスタム絵文字をダブルクリックしてみて下さい。すると、［:takoyaki:］のようなコードがクリップボードに入ります。
ほんとだすごい！！
ほんとだすごい！！
外に出るだけで滝のような汗が……。_(┐｢ε:)_
本文中に表示されているカスタム絵文字をダブルクリックすると、その絵文字を表示させるためのコードをクリップボードにコピーする機能を加えました。次のβ版(4.0.5)からお使い頂けます。（設定でOFFにもできますが、デフォルトではONです。）
例えば、これらのカスタム絵文字をダブルクリックしてみて下さい。すると、[:takoyaki:]のようなコードがクリップボードに入ります。
頻繁に使っているカスタム絵文字なら、いちいちカスタム絵文字の一覧画面からコードをコピーしなくても、直近の投稿に表示されている絵文字をダブルクリックすることでコードをコピーできると楽で良いかな……と思いまして。
この機能をOFFにする場合は下図の場所で。
ここがONだと、カスタム絵文字が表示される場合に限って、「ダブルクリックでコードをクリップボードに格納する」処理をするJavaScriptが出力されます。（ここがONでも、そのページ内にカスタム絵文字が1つも存在しなければスクリプトは出力されません。）
本文中に表示されているカスタム絵文字をダブルクリックすると、その絵文字を表示させるためのコードをクリップボードにコピーする機能を加えました。次のβ版(4.0.5)からお使い頂けます。（設定でOFFにもできますが、デフォルトではONです。）
例えば、これらのカスタム絵文字をダブルクリックしてみて下さい。すると、[:takoyaki:]のようなコードがクリップボードに入ります。
頻繁に使っているカスタム絵文字なら、いちいちカスタム絵文字の一覧画面からコードをコピーしなくても、直近の投稿に表示されている絵文字をダブルクリックすることでコードをコピーできると楽で良いかな……と思いまして。
この機能をOFFにする場合は下図の場所で。
ここがONだと、カスタム絵文字が表示される場合に限って、「ダブルクリックでコードをクリップボードに格納する」処理をするJavaScriptが出力されます。（ここがONでも、そのページ内にカスタム絵文字が1つも存在しなければスクリプトは出力されません。）
すごい
たこ焼き
>>3903
ご丁寧にありがとうございます～～！
絵文字一覧も見やすいです！実装楽しみにしてます～！
ご丁寧にありがとうございます～～！
絵文字一覧も見やすいです！実装楽しみにしてます～！
アップロードされているカスタム絵文字の一覧を表示できるようにしてみたVer 4.0.5β(未配布)の動作テスト。各COPYボタンで、表示用コードをクリップボードにコピーできます。
SVG画像をSafari（iOS版だけ？）で表示させたときに、こんな問題があったとは。
ご報告ありがとうございます。
Re:3898◆ご報告ありがとうございます。iOS版Safariで確認してみたところ、たしかにご指摘の表示になりますね。もしかしてMac版Safariでもそうなるのでしょうか？ 解決策が2通りありますので、後述します。
Re:3899◆たこ焼きアイコンありがとうございます！ たこ焼きが並べられて嬉しいです。(笑) また、解決策もありがとうございます。おっしゃる方法どちらもうまくいきました。以下に記します。
▼SVG画像でのカスタム絵文字が横方向に並ばない場合の対処方法(1)
➡ SVG画像をテキストエディタで開き、1行目にあるwidthとheightの値を書き換える。
▼SVG画像でのカスタム絵文字が横方向に並ばない場合の対処方法(2)
➡ 横幅の最大値も制限するCSSを追記する。
個人的には、SVG画像のソースを書き換えた方が良いのではないかと思いますけども。大きく表示させたいケースがある場合には、SVGソースはそのままで、CSSで対処する方が良いかもしれませんが。
（たぶん、Safariの問題なんでしょうね……？）
🍘動作テスト：
➡ここでは、SVG画像のソースを直接書き換えたバージョンを置いています。
➡開発放言では、SVG画像はそのままで、CSSソースを追記して対処しています。
どちらもiOSで確認しても同じように横並びになっていました。
🍘注意：
上記の対策を施しても、iOS側でブラウザのキャッシュをクリアしないと表示に反映されないのでご注意下さい。
iOS版ブラウザにスーパーリロードの仕組みはないっぽいので、例えばここで紹介されている「閲覧履歴とタブを維持したい場合」の方法で操作するのが良いかもしれません。
Re:3898◆ご報告ありがとうございます。iOS版Safariで確認してみたところ、たしかにご指摘の表示になりますね。もしかしてMac版Safariでもそうなるのでしょうか？ 解決策が2通りありますので、後述します。Re:3899◆たこ焼きアイコンありがとうございます！ たこ焼きが並べられて嬉しいです。(笑) また、解決策もありがとうございます。おっしゃる方法どちらもうまくいきました。以下に記します。▼SVG画像でのカスタム絵文字が横方向に並ばない場合の対処方法(1)
➡ SVG画像をテキストエディタで開き、1行目にあるwidthとheightの値を書き換える。
例えば、<svg width="100%" height="100%" viewBox="0 0 32 32" ... のように書かれているなら、このようにすると、CSSに関係なくSVG画像は（iOSでも）横並びになってくれます。
ここを、<svg width="32" height="32" viewBox="0 0 32 32" ... のように書き換えます。
ここが、<svg width="100%" height="100%" viewBox="0 0 50 65" ... のように書かれているなら、
ここを、<svg width="50" height="65" viewBox="0 0 50 65" ... のように書き換えます。
▼SVG画像でのカスタム絵文字が横方向に並ばない場合の対処方法(2)
➡ 横幅の最大値も制限するCSSを追記する。
デフォルト設定では、（カスタム絵文字に対して）てがろぐは style="width:auto; height:auto; max-height:2em; vertical-align:middle;" というCSSを挿入します。ここでは高さの最大値は指定されていますが、横幅の最大値は指定されていません。どうやらiOS版のSafariは、（SVG画像にwidth="100%"があるとき）描画空間として横幅100％を確保してしまうっぽいですね。なので、以下のCSSをスキン等に追記すれば解決します。
.cemoji img { max-width:2em; }
これで横幅も最大2文字分に制限されますので、下図の右側の通り、横に並んでくれました。
ただ、これだと、あらゆる絵文字の横幅が 2em になりますので、もし takoyaki だけに限定して適用したいなら、
.ce-takoyaki img { max-width:2em; }
のようにすると良いかもしれません。
個人的には、SVG画像のソースを書き換えた方が良いのではないかと思いますけども。大きく表示させたいケースがある場合には、SVGソースはそのままで、CSSで対処する方が良いかもしれませんが。
（たぶん、Safariの問題なんでしょうね……？）
🍘動作テスト：
➡ここでは、SVG画像のソースを直接書き換えたバージョンを置いています。
➡開発放言では、SVG画像はそのままで、CSSソースを追記して対処しています。
どちらもiOSで確認しても同じように横並びになっていました。
🍘注意：
上記の対策を施しても、iOS側でブラウザのキャッシュをクリアしないと表示に反映されないのでご注意下さい。
iOS版ブラウザにスーパーリロードの仕組みはないっぽいので、例えばここで紹介されている「閲覧履歴とタブを維持したい場合」の方法で操作するのが良いかもしれません。
>>3899
解決しました！ありがとうございます！
解決しました！ありがとうございます！
3894,3895
見落としてました。ありがとうございます。
見落としてました。ありがとうございます。
たこやきSVGテスト。
絵文字が横並びにならない現象
3898
たこ焼きのSVG画像を作った者です
たこ焼きの画像以外でも起こる現象だと解決しないかもしれませんが
原因はSVG画像内にwidthとheightが100%で設定されている為だと思います。
なので、
cssでwidthとheightをpxやemなどでサイズを設定すると横並びに表示できるはずです。
又、
SVG画像をテキストエディタで開き、widthとheightを書き換えることでも大丈夫かと思いますが
試していない為、どうなるか不明です。(申し訳ないです)
3898
たこ焼きのSVG画像を作った者です
たこ焼きの画像以外でも起こる現象だと解決しないかもしれませんが
原因はSVG画像内にwidthとheightが100%で設定されている為だと思います。
なので、
cssでwidthとheightをpxやemなどでサイズを設定すると横並びに表示できるはずです。
又、
SVG画像をテキストエディタで開き、widthとheightを書き換えることでも大丈夫かと思いますが
試していない為、どうなるか不明です。(申し訳ないです)
絵文字機能実装ありがとうございます！
早速自分のサイトにも導入してみたのですが、導入後デフォルト状態では絵文字画像が縦並べになってしまいます。
→これはCSSでカスタマイズしてdisplay: inline-flex;で横に並ぶようになりました。
ですが、スマホ（iPhone）で確認したところこちらは縦並べのままになっています。
（キャッシュクリア・複数ブラウザでも試しましたが同じく）
PCのディベロッパーツールではちゃんと横並べになっているので、メディアクエリの問題でもなさそうです。
また、他の方に表示確認をしたところ、Androidでは横並べ表示されるという報告をいただいています。
こちらの掲示板内の絵文字も同じように、PCで確認すると横になっているものがスマホだと縦に見える状態です。
色々調べてみたのですが、素人なのでよくわからなくなってしまいましたので、書き込みさせていただきました。
お手数ですが、考えられる原因や解決方法などあればご教授いただきたく思います。よろしくお願いいたします。
#質問
早速自分のサイトにも導入してみたのですが、導入後デフォルト状態では絵文字画像が縦並べになってしまいます。
→これはCSSでカスタマイズしてdisplay: inline-flex;で横に並ぶようになりました。
ですが、スマホ（iPhone）で確認したところこちらは縦並べのままになっています。
（キャッシュクリア・複数ブラウザでも試しましたが同じく）
PCのディベロッパーツールではちゃんと横並べになっているので、メディアクエリの問題でもなさそうです。
また、他の方に表示確認をしたところ、Androidでは横並べ表示されるという報告をいただいています。
こちらの掲示板内の絵文字も同じように、PCで確認すると横になっているものがスマホだと縦に見える状態です。
色々調べてみたのですが、素人なのでよくわからなくなってしまいましたので、書き込みさせていただきました。
お手数ですが、考えられる原因や解決方法などあればご教授いただきたく思います。よろしくお願いいたします。
#質問
てst
