Migdal

A.I.
A.I.

投稿

質問スレッド

記事の言語版の一覧 他言語版があります
原文(日本語)アメリカ英語

このサイトで分からないこと、困ったことがあったら気軽にこの記事のコメント欄に質問してください。詳しい人が教えてくれるはずです。

重要な質問は FAQ に昇格することがあります。

人気順のコメント(39)

たたむ
 
decixhecto profile image
デシヘクト

コードに関しての話なんですけど、表を作るコマンドで、表が縦に長すぎるので分けて書きたいのですが、表の列が増えてしまうんですけど解消法ってあるんですかね?
後、定型文って何ですか?

たたむ
 
a_i profile image
A.I.

ご質問ありがとうございます。「表の列が増えてしまう」ということですが、どういう状態を実現したいのでしょうか。詳しくお聞かせください。
定型文はコメントに使うものですね。今は使う機会があまりないと思いますが、何度も同じようなコメントをする必要がある時に、自分用のひな形を貯める機能です。

たたむ
 
decixhecto profile image
デシヘクト

返信ありがとうございます。(←こういうのをコメントのトップにおいてテンプレにできるって話ですかね?それとも、拝啓ー敬具みたいにテンプレの上からも文章を打てるって話ですかね?)
表の列に関しては、ツイッターで返信していただいた通りで、あまりにも縦に長いから左右に分けて一番上をグレーで網掛せずに続きと言う艇で書きたい、って意味です。

スレッド スレッド
 
a_i profile image
A.I.

はい、定型文はそういう使い方に適していると思います。テンプレは入力欄に入るだけで送信されるわけではないため、必要な部分を修正して書き込めます。
列に関して、なるほどよく分かりました。それはHTMLでやろうとするとちょっと高等技能になるので、ご希望であれば追加機能として実装(実装自体は小規模です)します。

スレッド スレッド
 
decixhecto profile image
デシヘクト

なるほど、テンプレに関してありがとうございます。
列はやる方法は今の時点であるけど、エンコーディングを知らなければ難しいって話であれば、自分が必要になった時に自分で知ろうと思うので、A.I.さんが追加に際して面倒な作業だと思ってらっしゃらなければ希望しますが今は大丈夫です。
甘んじて表を長くします。

スレッド スレッド
 
a_i profile image
A.I.

Markdownで生のHTMLも書けるのですが、多分自由に書こうとするとサニタイザに消されてしまうため、実装自体はシンプルなのでこちらで実装します。
一度表を作ってからでも後付けできると思いますので、記事の方はひとまずそのまま書いていただいて結構です。

スレッド スレッド
 
a_i profile image
A.I.

@decixhecto こんな感じのものはどうでしょうか。

スレッド スレッド
 
decixhecto profile image
デシヘクト

うわあぁぁぁぁ!ありがたいです!(返信遅くなってすみません)

スレッド スレッド
 
a_i profile image
A.I.

サイトに実装しました。
{% columns %}
...
{% endcolumns %}
Enter fullscreen mode Exit fullscreen mode

で囲むことで中身が二段組になると思います。
人柱よろしくお願いします!

たたむ
 
sashimiwiki profile image
Fafs F. Sashimi 修正

折りたたみタグ( {% details %} ~ {% enddetails %} )のなかにテーブルを書こうとしたのですが、この記事の練習問題の3.のようにそのまま表示されてしまうみたいですね……折りたたみ内にテーブルが置けると説明に便利なんですが、何か良い書き方はないものですかね……?

たたむ
 
a_i profile image
A.I.

ご報告ありがとうございます!試したところ、本家でも再現したのでバグ報告しました。一応こちらでも調べてみますが、少し時間がかかるかもしれません……

Markdown table is not parsed inside details liquid tag #18923

Describe the bug

Markdown tables seem not being parsed inside the details liquid tag for some reason. It is not that Markdown is totally unavailable inside the tag, but only tables as far as I am currently aware.

To Reproduce

  1. Open dev.to/new
  2. Paste the following text into the body
    ![placeholder](https://via.placeholder.com/150)
    
    A|B|C
    --|--|--
    1|2|**3**
    
    {% details sample %}
    
    ![placeholder](https://via.placeholder.com/150)
    
    A|B|C
    --|--|--
    1|2|**3**
    
    {% enddetails %}
    
  3. Preview, save, or publish to see it renders as the screenshot below

Expected behavior

Markdown tables should be rendered as HTML tables either inside or outside the details tag.

Screenshots

  • dev.to post edit UI: image

  • dev.to post preview (<details> opened): image

Desktop (please complete the following information):

  • OS, version: Win 11
  • Browser, version: FF 108.0.1

Smartphone (please complete the following information):

  • Device: iPhone SE
  • OS, version: iOS 15.7
  • Browser, version: Forem iOS app
たたむ
 
sashimiwiki profile image
Fafs F. Sashimi

対応ありがとうございます! issueまで立ててもらってありがたいです……本家のバグとなると確かに修正には時間がかかるかもしれませんね……気長に待ちたいと思います。

スレッド スレッド
 
a_i profile image
A.I. 修正

間に合わせの修正で他に問題が出るかもしれませんが、とりあえず表は書けるようにコードを直したので、一度記事を空更新してみてください。

表のテスト
A:指格 B:属格
faivan faivai faivaut

たたむ
 
sashimiwiki profile image
Fafs F. Sashimi 修正

吹き出し機能、ダークテーマだと文字色が白に反転してしまって、背景色が白だと同化して見た目上無が表示されてしまいますね……< font >タグで強制的に文字色変更出来ないかなと思ってやってみましたが、無理でした……一応報告までに……

たたむ
 
a_i profile image
A.I.

ダークテーマで吹き出しの字が見えない問題を修正しました。また、吹き出しの文字色を変更するオプションも追加しましたので、最新の説明をご確認ください。

たたむ
 
sashimiwiki profile image
Fafs F. Sashimi

ありがとうございます! めっちゃ助かります!!

たたむ
 
a_i profile image
A.I.

ご報告ありがとうございます。そこは盲点でしたね……吹き出しより後にダークモードが実装されたので完全に想定外でした。これから対応を考えます。

たたむ
 
niftg profile image
にふ

埋め込み画像のリサイズがしたいのですが、<img src="https://….svg" style="width:1em;">などとしても、ここでは上手く縮小されないみたいです(gistでは成功)。他に何か良い方法がありますか?

たたむ
 
niftg profile image
にふ 修正

ここのだと、img要素を自動でa要素(.article-body-image-wrapper)でラップして、元画像へのリンクを貼ってくれるみたいですが、その際にsrc(ともしかするとalt?)以外の属性が諸々引き剥がされるぽいですね…うーん

たたむ
 
niftg profile image
にふ

いや、単純に、生のHTMLは基本的にガッツリサニタイズされるものてことですかね

スレッド スレッド
 
a_i profile image
A.I.

現在許可されているタグと属性はここに書かれているものだけじゃないかと思います。
gitlab.com/yheuhtozr/forem/blob/fo...
(タグ名はまた状況によってさらに制約されているようですが、何がどこに適用されるのかよくわかっていません)

制限を緩めることは可能ですが、styleを一律許可というのは少し広すぎるような気がします。どういった用途に使う想定でしょうか?

スレッド スレッド
 
niftg profile image
にふ

今のところ想定にあるのは、フォントを用意するほどでもない外字や絵文字をテキストに埋め込んだり、あとは「はじめての○○」形式のキャラクターアイコンを埋め込んだりする際に、地の文の文字サイズに比して極度に大きすぎたり小さすぎたりしない様に設定する、といった程度ですね

スレッド スレッド
 
niftg profile image
にふ

これもLiquidタグ化した方がいい話なのかもしれませんが、少し大掛かり過ぎる気もしますね…

スレッド スレッド
 
a_i profile image
A.I.

なるほど、ありがとうございます。両方とも用途がはっきりしたものだと思いますので、Liquidタグにするには都合がいいのではないかと思います。

  • インライン埋め込み画像用タグ
  • 画像つき吹き出しセリフ用タグ(こういうの

としてテンプレート化するのではどうでしょうか

スレッド スレッド
 
niftg profile image
にふ

インライン画像の方はデザインの遊ぶ余地が無いのですぐ行ける感じですね。
画像つき吹き出しの方はデザインの細部に個々人の拘りが発生する気がするので、実装のスピードは遅くて良い気がします。(丸アイコンと四角アイコンは選ばせてほしい等々)

スレッド スレッド
 
niftg profile image
にふ

でもまあ、吹き出しの件、デフォルトのバニラ味のデザインだけ先に実装してみて、オプションは徐々に拡充していく方式でも良いかもしれませんね。そこは開発者にお任せします。

スレッド スレッド
 
a_i profile image
A.I.
[A.I.]
A.I.
とりあえず機能は実装しました。
スレッド スレッド
 
niftg profile image
にふ

有難うございます!!少し色々試してみますね

たたむ
 
shirosuke_2 profile image
しろすけ2号

「いいね」「保存」と並んでいる「バベル」マークは、どのようなときに押すのですか?

Migdal で「バベル」と検索をかけても特に説明など見つからず、私が何かを見落としているだけかもしれませんが......

たたむ
 
a_i profile image
A.I.

それはですね………実は誰にもわからないのです。元のソフトの機能として、ハート以外に一つ別のリアクションをつけることができるのですが、本家でもどう使うのかわからないあげく、カスタムリアクションに移行しようとしているので、今のところは使いたい時に使っていただければ👍

たたむ
 
shirosuke_2 profile image
しろすけ2号

解答いただきありがとうございます!
了解です。

たたむ
 
hotate_kun0804 profile image
Pekteno_hk0804

文字に関してなのですが、人工文字をパソコンに入れてmigdalさんのほうで追加するにはどうすればいいでしょうか?
また、文字に関してはアブジャドなので不備がありましたら、報告していただきたいです
Image description
今回ある文字_

たたむ
 
a_i profile image
A.I.

忙しくて返信遅くなり申し訳ありません!
この場合、文字をフォントファイルにするのが一番の難関ではないかと思います。記事の方にコメントさせていただきます…

たたむ
 
niftg profile image
にふ

自分の記事中で他のユーザーにメンション飛ばす様な機能はありますか?

たたむ
 
a_i profile image
A.I.

はい、これは比較的最近実装された機能なので覚えていますが、@ ユーザー名でいけるはずです。(出典

でももし動かなかったらお知らせください…

たたむ
 
decixhecto profile image
Info Accessible Via Permalink
デシヘクト

コードに関しての話なんですけど、表を作るコマンドで、表が縦に長すぎるので分けて書きたいのですが、表の列が増えてしまうんですけど解消法ってあるんですかね?

たたむ
 
shirosuke_2 profile image
Info Accessible Via Permalink
しろすけ2号

「いいね」「保存」などと並んでいる、「バベル」のマークって、どのように活用するものですか?

( Migdal 内で「バベル」と検索をかけても特に説明などは出てこないので、もしかしたら私だけ何か見落としているのかもしれませんが... )

たたむ
 
shirosuke_2 profile image
Info Accessible Via Permalink
しろすけ2号

「いいね」「保存」などと並んでいる、「バベル」のマークって、どのように活用するものですか?

(Migdal 内で「バベル」と検索をかけても特に説明などは出てこないので、もしかしたら私だけ何か見落としているのかもしれませんが...)

たたむ
 
shirosuke_2 profile image
Info Accessible Via Permalink
しろすけ2号

「いいね」「保存」と並んでいる「バベル」マークは、どのようなときに押すのですか?

Migdal で「バベル」と検索をかけても特に説明など見つからず、私が何かを見落としているだけかもしれませんが...

非表示にされているコメントがあります(詳細