てがろぐ - Fumy Otegaru Memo Logger -

by admin. ⌚2023年8月7日(月) 22:51:21〔1年以上前〕 ＜3文字＞ 編集

                                                         
                      
                                                    
                                        
                                                    
                                        

by admin. ⌚2023年8月7日(月) 19:35:08〔1年以上前〕 ＜535文字＞ 編集

たこ焼き

by admin. ⌚2023年8月7日(月) 12:57:57〔1年以上前〕 ＜31文字＞ 編集

>>3903
ご丁寧にありがとうございます～～！
絵文字一覧も見やすいです！実装楽しみにしてます～！

by admin. ⌚2023年8月6日(日) 23:02:08〔1年以上前〕 ＜80文字＞ 編集

by nishishi. ⌚2023年8月6日(日) 22:59:52〔1年以上前〕 ＜89文字＞ 編集

by nishishi. ⌚2023年8月6日(日) 18:36:12〔1年以上前〕 ＜43文字＞ 編集

ご報告ありがとうございます。

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"  ... のように書かれているなら、
ここを、<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" ... のように書き換えます。

このようにすると、CSSに関係なくSVG画像は（iOSでも）横並びになってくれます。


▼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版ブラウザにスーパーリロードの仕組みはないっぽいので、例えばここで紹介されている「閲覧履歴とタブを維持したい場合」の方法で操作するのが良いかもしれません。

by nishishi. ⌚2023年8月6日(日) 18:23:32〔1年以上前〕 回答/返信 ＜1599文字＞ 編集

>>3899
解決しました！ありがとうございます！

by admin. ⌚2023年8月6日(日) 18:20:04〔1年以上前〕 ＜61文字＞ 編集

by admin. ⌚2023年8月6日(日) 18:02:36〔1年以上前〕 ＜33文字＞ 編集

たこやきSVGテスト。

by admin. ⌚2023年8月6日(日) 17:51:24〔1年以上前〕 ＜141文字＞ 編集

by admin. ⌚2023年8月6日(日) 15:37:18〔1年以上前〕 ＜250文字＞ 編集

絵文字機能実装ありがとうございます！

早速自分のサイトにも導入してみたのですが、導入後デフォルト状態では絵文字画像が縦並べになってしまいます。
→これはCSSでカスタマイズしてdisplay: inline-flex;で横に並ぶようになりました。

ですが、スマホ（iPhone）で確認したところこちらは縦並べのままになっています。
（キャッシュクリア・複数ブラウザでも試しましたが同じく）

PCのディベロッパーツールではちゃんと横並べになっているので、メディアクエリの問題でもなさそうです。
また、他の方に表示確認をしたところ、Androidでは横並べ表示されるという報告をいただいています。

こちらの掲示板内の絵文字も同じように、PCで確認すると横になっているものがスマホだと縦に見える状態です。
色々調べてみたのですが、素人なのでよくわからなくなってしまいましたので、書き込みさせていただきました。
お手数ですが、考えられる原因や解決方法などあればご教授いただきたく思います。よろしくお願いいたします。
#質問

by admin. ⌚2023年8月6日(日) 13:36:32〔1年以上前〕 ＜475文字＞ 編集

by admin. ⌚2023年8月6日(日) 13:04:15〔1年以上前〕 ＜3文字＞ 編集

ツイート埋め込み用の記述は今後も[Tweet]のままです。イーロンの気が変わってまた名称が変わらないとも限りませんし。

Re:3891◆無事に動いたようで何よりです。ご愛用頂ければ幸いです。(╹◡╹)ﾉ
Re:3892◆その機能は既にありますので、No.3893～3894さんのアドバイスとリンク先ヘルプをご参照下さい。
Re:3893◆ピンポイントにヘルプを示して下さってありがとうございます。
Re:3894◆詳しい解説をありがとうございます！

塩分が足りない気がする。塩を舐めたい……。_(┐｢ε:)_ 🍘🍘🍘

by nishishi. ⌚2023年8月6日(日) 10:27:38〔1年以上前〕 回答/返信 ＜333文字＞ 編集

by sakura. ⌚2023年8月5日(土) 18:23:18〔1年以上前〕 ＜36文字＞ 編集

by sakura. ⌚2023年8月5日(土) 18:20:18〔1年以上前〕 ＜181文字＞ 編集

by admin. ⌚2023年8月5日(土) 18:15:26〔1年以上前〕 ＜56文字＞ 編集

by admin. ⌚2023年8月5日(土) 17:26:56〔1年以上前〕 ＜140文字＞ 編集

by misaki. ⌚2023年8月5日(土) 10:51:44〔1年以上前〕 ＜72文字＞ 編集

あつい……！🍨🍨🍨

Re:3887◆小6でCGIをローカルで使おうとは将来有望ですね！
てがろぐをWindowsローカル環境で動作させるには、➊Perlをインストールして、➋ウェブサーバを動作させて、➌ブラウザでhttp://localhost/(設置先)/tegalog.cgiにアクセスする……という3ステップが必要です。

1. まず、Perlをローカルで使うには、XAMPPをダウンロードしてインストールして下さい。これを入れると、PerlだけでなくPHPとか諸々も入りますが、とりあえずPerlも入ります。Perlは単独のパッケージをダウンロードしてきてインストールする手もあるのですが、XAMPPのパッケージからインストールすると、てがろぐが必要としているモジュールも同時に入るメリットがあります(たぶん)。
2. で、XAMPPをインストールできたらPerlの実行環境は手に入りますので、あとはローカルでWebサーバを動作させれば良いだけです。
   • Windows環境ならAN HTTPDというウェブサーバが手軽でお勧めです。説明はリンク先に書いてあります。AN HTTPDを使う場合はtegalog.cgiの中身を書き換える必要なくそのまま動きます。
   • そのほか、ウェブサーバとしては他にも（少々設定に手間が掛かりますが）XAMPPに含まれているApacheを使う手もあります。その辺の説明は、『てがろぐをXAMPPで確認したいっ！』が分かりやすく解説されていて良さそうに思いますのでご参照下さい。
3. あとは、ブラウザで http://localhost/(設置先)/tegalog.cgi 等にアクセスすると良いです。頑張って下さい。

Re:3888◆お役に立ったようで良かったです。(╹◡╹)ﾉ

by nishishi. ⌚2023年8月4日(金) 14:30:12〔1年以上前〕 回答/返信 ＜792文字＞ 編集

by admin. ⌚2023年8月3日(木) 19:36:02〔1年以上前〕 ＜7文字＞ 編集

by sakura. ⌚2023年8月3日(木) 19:09:36〔1年以上前〕 ＜80文字＞ 編集

by misaki. ⌚2023年8月3日(木) 18:15:17〔1年以上前〕 ＜464文字＞ 編集

by tomoyo. ⌚2023年8月3日(木) 17:35:08〔1年以上前〕 ＜63文字＞ 編集

バナナを食べました。🍌🍌🍌

Re:3877◆お試しありがとうございます。そうですね。実体はただの画像なので、ハッシュタグやカテゴリ名等にカスタム絵文字は使えない仕様になっております。唯一の例外が「リンクテキストには使える」だと思って頂けると良いかもしれません。
Re:3879◆お使いのてがろぐでもご活用頂ければ幸いです。(╹◡╹) なお、この動作試験場で使っているスイカ等のアイコンはここで配布しています。
Re:3880◆そういえば、もう夏コミまであと10日なんですね。はやい……。
Re:3884◆ご試用ありがとうございます！ ご要望もありがとうございます。とりあえず「アップロードされているカスタム絵文字画像を一覧して記法をコピーできる機能」は次のバージョンで加えられるように計画しているところです。プルダウンメニューで選べるようにも検討します。

by nishishi. ⌚2023年8月3日(木) 14:27:13〔1年以上前〕 回答/返信 ＜451文字＞ 編集

by admin. ⌚2023年8月1日(火) 21:10:48〔1年以上前〕 ＜114文字＞ 編集

by nishishi. ⌚2023年8月1日(火) 20:04:02〔1年以上前〕 アップデート✨ ＜423文字＞ 編集

by admin. ⌚2023年8月1日(火) 17:17:33〔1年以上前〕 ＜5文字＞ 編集

by admin. ⌚2023年8月1日(火) 13:39:15〔1年以上前〕 ＜3文字＞ 編集

by tomoyo. ⌚2023年8月1日(火) 11:25:56〔1年以上前〕 ＜164文字＞ 編集