Migdal

Cover image for Migdal SNS の開発中機能について(Liquidタグ)

Migdal SNS の開発中機能について(Liquidタグ)

佐藤陽花 on 29 nov

お、UIが丸みを帯びてる....(それとタグのハッシュ記号に色がついてる...) というのはともかく、皆さん、「Liquidタグ」というものをご存知ですか(或いは使っていますか)? 「Liquidタグ」は、(ECサイトプラットフォーム「Shopify」により開発された)テンプレート言語Li...
たたむ
 
a_i profile image
A.I.

ちなみにネタバレ機能はForem標準のLiquidタグでできます。
migdal.jp/p/editor_guide#details-e...
もっと軽量な機能があった方がいいですか? @niftg

たたむ
 
niftg profile image
にふ • 編集済

ちなみにそこで紹介の三種類ですが

{% details summary %} content {% enddetails %}
{% spoiler summary %} content {% endspoiler %}
{% collapsible summary %} content {% endcollapsible %}
Enter fullscreen mode Exit fullscreen mode

何か細部の差があるんですかね…

details

content



spoiler

content

collapsible

content



スマホ🤳で確認した限りだと特に差がないので、どれも同じ処理なんかなと(思つて投稿したら、detailsだけなんか下に空白空いたりしますね…)

たたむ
 
niftg profile image
にふ

インラインにできないのはともかく

ネタバレテスト

なるほど自由度は上がりますね


しばらくこれで良い気はします

(あとメンションの通知きちんと来ましたので取り急ぎ報告申し上げます)

たたむ
 
a_i profile image
A.I.

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

インライン黒塗りもパーサー自体に入れられないか検討してみます。このメンションが動くということは何らか拡張できるはずなので…

ただDiscordの記法だと表組と混ぜると即死しちゃうので、何かいい案はありますか?

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

正直そこまで常用するべき機能でもないので、簡潔でなくとも、Liquidの記法の延長で十分かと存じます。({% クロヌリ (何か伏字が欲しければここに) %} 内容 {% endクロヌリ %})

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

これについてですが、タグの中にある「伏字」というのはどういう性質のものでしょうか?

スレッド スレッド
 
niftg profile image
にふ • 編集済

一番よくあるのは〇〇〇とか×××とかの類です(空白とか黒消しの空間を埋める何か)

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

つまり、最初はこの文字列を表示させておいて、ホバーしたら本当の内容に変わるということでしょうか?ある程度長さがあると思いますが、伏字の文字列を繰り返して埋めるということですか?あまりこのパターンを知らないので、勘違いしていたらすみません…

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

ホバーなりタップなりしたら、その部分だけ長さ自体が変化してもいい気がします…が、まあ実装上面倒な割にそんなに嬉しくないオマケ機能なので、liquidの当該箇所に何か入れられても無視する方がいいかもですね

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

あまりこのパターンを知らないので、勘違いしていたらすみません…

(単にふと頭に浮かんだだけなので、実物は私も見たことないですね)

スレッド スレッド
 
niftg profile image
にふ • 編集済

(少し前のコメントにぶら下げたかったけどできないのでここでテスト)
黒塗り
スマホでも問題なく動いてるみたいです

ついでに一文字画像
[glyphwiki-sandbox] : sandbox - GlyphWiki

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

テストありがとうございます。気づいた点があれば随時お知らせください

たたむ
 
xirdim profile image
Xirdim • 編集済

右側の文章中の「Liquid タグ」とある部分のリンク

が見当たらないよ?

たたむ
 
a_i profile image
A.I.

もしかしてスマホから見てますか?編集画面の右リンクはスマホ版だと出ないようです…
ハンバーガーメニューの「編集ガイド」に同等の情報があるのでそこからご確認ください🙏

たたむ
 
xirdim profile image
Xirdim • 編集済

ありがとうございます!これですね → migdal.jp/p/editor_guide

閲覧環境のほうはPCなのですが、画像のような状態になっています… ブラウザとかで変わったりしますかね??

スレッド スレッド
 
xirdim profile image
Xirdim

なぜだ、画像が表示されない()

これです → migdal.jp/uploads/articles/6glqor9...

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

その状態はたぶんタイトルにキャレットが当たっていると思いますので、本文欄(「ここから本文を~」の部分)にキャレットを置くと右が編集の説明になると思います。
(ちなみにタグ欄だとまた別の説明が出ます)

スレッド スレッド
 
xirdim profile image
Xirdim

なるほどそういうことでしたか! ありがとうございます!

たたむ
 
halka_ffez profile image
佐藤陽花

(11/28の)僕の元々の提案だと2件であったものが、(同日の)実装着手段階で1件増え、そして(11/29の)にふさんの提案でさらに2件増えて現在計5件.....

大変だ