2023年8月 この範囲を時系列順で読む この範囲をファイルに出力する
>>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版ブラウザにスーパーリロードの仕組みはないっぽいので、例えばここで紹介されている「閲覧履歴とタブを維持したい場合」の方法で操作するのが良いかもしれません。
絵文字が横並びにならない現象
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で確認すると横になっているものがスマホだと縦に見える状態です。
色々調べてみたのですが、素人なのでよくわからなくなってしまいましたので、書き込みさせていただきました。
お手数ですが、考えられる原因や解決方法などあればご教授いただきたく思います。よろしくお願いいたします。
#質問
ツイート埋め込み用の記述は今後も[Tweet]のままです。イーロンの気が変わってまた名称が変わらないとも限りませんし。
Re:3891◆無事に動いたようで何よりです。ご愛用頂ければ幸いです。(╹◡╹)ﾉ
Re:3892◆その機能は既にありますので、No.3893～3894さんのアドバイスとリンク先ヘルプをご参照下さい。
Re:3893◆ピンポイントにヘルプを示して下さってありがとうございます。
Re:3894◆詳しい解説をありがとうございます！
塩分が足りない気がする。塩を舐めたい……。_(┐｢ε:)_ 🍘🍘🍘
Re:3891◆無事に動いたようで何よりです。ご愛用頂ければ幸いです。(╹◡╹)ﾉRe:3892◆その機能は既にありますので、No.3893～3894さんのアドバイスとリンク先ヘルプをご参照下さい。Re:3893◆ピンポイントにヘルプを示して下さってありがとうございます。Re:3894◆詳しい解説をありがとうございます！塩分が足りない気がする。塩を舐めたい……。_(┐｢ε:)_ 🍘🍘🍘
>>3892
▼半角文字・全角文字・空白の混在するハッシュタグを書きたい場合
▼ハッシュタグの角括弧を表示上では消す方法
に書いてあるように、角括弧で囲むと全角半角の混在やスペースが含まれる単語もハッシュタグになりますよ。
入力する時には角括弧が必要ですが、表示上では消すこともできます。
#[Français] #[Español] #[ポケモンLOVE]
▼半角文字・全角文字・空白の混在するハッシュタグを書きたい場合
▼ハッシュタグの角括弧を表示上では消す方法
に書いてあるように、角括弧で囲むと全角半角の混在やスペースが含まれる単語もハッシュタグになりますよ。
入力する時には角括弧が必要ですが、表示上では消すこともできます。
#[Français] #[Español] #[ポケモンLOVE]
ハッシュタグで【日本語＋英語】【日本語＋特殊記号】などにすると、部分的にしかタグにならないのを改善していただきたいです
母体のが多言語対応に少しずつ回想してるので、Ç、ñといった文字もハッシュタグに含めたいです
以下：例
#Français #Español #ポケモンLOVE
母体のが多言語対応に少しずつ回想してるので、Ç、ñといった文字もハッシュタグに含めたいです
以下：例
#Français #Español #ポケモンLOVE
3887で質問させていただいた者です。
XAMPPに含まれているApacheを使っててがろぐを表示させることができました！
ありがとうございます
XAMPPに含まれているApacheを使っててがろぐを表示させることができました！
ありがとうございます
あつい……！🍨🍨🍨
Re:3887◆小6でCGIをローカルで使おうとは将来有望ですね！
てがろぐをWindowsローカル環境で動作させるには、➊Perlをインストールして、➋ウェブサーバを動作させて、➌ブラウザでhttp://localhost/(設置先)/tegalog.cgiにアクセスする……という3ステップが必要です。
Re:3888◆お役に立ったようで良かったです。(╹◡╹)ﾉ
Re:3887◆小6でCGIをローカルで使おうとは将来有望ですね！てがろぐをWindowsローカル環境で動作させるには、➊Perlをインストールして、➋ウェブサーバを動作させて、➌ブラウザでhttp://localhost/(設置先)/tegalog.cgiにアクセスする……という3ステップが必要です。
- まず、Perlをローカルで使うには、XAMPPをダウンロードしてインストールして下さい。これを入れると、PerlだけでなくPHPとか諸々も入りますが、とりあえずPerlも入ります。Perlは単独のパッケージをダウンロードしてきてインストールする手もあるのですが、XAMPPのパッケージからインストールすると、てがろぐが必要としているモジュールも同時に入るメリットがあります(たぶん)。
- で、XAMPPをインストールできたらPerlの実行環境は手に入りますので、あとはローカルでWebサーバを動作させれば良いだけです。
- Windows環境ならAN HTTPDというウェブサーバが手軽でお勧めです。説明はリンク先に書いてあります。AN HTTPDを使う場合はtegalog.cgiの中身を書き換える必要なくそのまま動きます。
- そのほか、ウェブサーバとしては他にも（少々設定に手間が掛かりますが）XAMPPに含まれているApacheを使う手もあります。その辺の説明は、『てがろぐをXAMPPで確認したいっ！』が分かりやすく解説されていて良さそうに思いますのでご参照下さい。
- あとは、ブラウザで http://localhost/(設置先)/tegalog.cgi 等にアクセスすると良いです。頑張って下さい。
Re:3888◆お役に立ったようで良かったです。(╹◡╹)ﾉ
日付境界バーの要望出した者です。
こんなに早く実装していただけるとは思いませんでした！
早速スキン作ってますが思ったとおりに出来そうです。ありがとうございます！
こんなに早く実装していただけるとは思いませんでした！
早速スキン作ってますが思ったとおりに出来そうです。ありがとうございます！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
