Migdal

Cover image for Migdal SNS の開発中機能について(Liquidタグ)
佐藤陽花 CL-KIITA: 人工言語知識情報・情報技術事業体 へ執筆

投稿 • に更新

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

お、UIが丸みを帯びてる....(それとタグのハッシュ記号に色がついてる...)

というのはともかく、皆さん、「Liquidタグ」というものをご存知ですか(或いは使っていますか)?

「Liquidタグ」は、(ECサイトプラットフォーム「Shopify」により開発された)テンプレート言語Liquidで提供されるマークアップタグで、Migdal SNSではツイートや YouTube 動画などの高度なコンテンツを入れることができます。

記事を編集していると右側にこんな文章がありますね(実は1文前の後半はこれの受け売り)。

右側

現在Migdal SNSの記事中で使えるLiquidタグはLiquid標準のもののほか、このSNS(Migdal)のために用意された追加のものがあります。

標準タグは、Liquid公式サイトから確認できます。if, forなどの制御フロー関係など多彩なタグがあります。

Liquid公式

追加タグは、右側の文章中の「Liquid タグ」とある部分のリンクから開けるポップアップ(次の画像)から確認できます。

ポップアップ

本題

さてLiquidの説明がやけに長くなってしまいましたが、本題であるMigdal SNS のために開発中の追加機能について話していきます。我々(CL-KIITA)Migdal SNS部門では、Migdal SNSのために、いくつかのLiquidタグを追加すべく開発が進められています。

追加タグ

言語埋め込み

地の文とは別の言語を文中に、或いは文章中に埋め込むことができます。言語コード識別コードを伴ったISO言語コード、IETF言語タグ、CLAコードで自然言語や人工言語など多くの言語に対応します(地の文で対応している言語のみ/フォント含め同)。


仮実装(21-12-15)

  • インライン用(span): {% ln [言語コード] %} 内容 {% endln %}
  • ブロック用(div): {% lang [言語コード] %} 内容 {% endlang %}

※現時点で Liquid に渡る前にパーサーが CLA コードを斜体だと解釈してしまうので、当分の間 IETF 形式でコードを入力してください。そのうち修正します。


Dartpad埋め込み

Web&Appを主な対象とするプログラミング言語であるDart言語(おすすめ!)のオンライン実行環境であるDartPadに、予めコードを設定して共有できるようにしたものを埋め込むことができます。

現在はJavaScript/TypeScript、Kotlinが対応していますが、それにDartが加わります。(イェェイ


仮実装(21-12-16)

{% dartpad [ID] [タイプ] [パラメータ...] %}

[タイプ]こちらの選択肢に準拠し、dart|flutter|html|inlineで記入します。[パラメータ]その他のパラメータkey=value の形式で、任意の数空白で区切って入れられます。その他要望機能があればご提案ください。


記事の目次

記事中に目次(TOC)を追加します。記事が長くなってくると大まかな流れが追いづらくなってきます。そういう時は目次が欲しくなりますね。という訳で記事のマークダウン中の見出しタグを解析して目次を生成する機能に対応したいと思います。

スポイラー

にふさんよりリクエスト。2021/11/29 23:37提案、同23:55追記

文中にスポイラータグを挿入できるようにします(detailsではなくインライン黒塗りとしてです)。スポイラー機能とは、ネタバレなど隠しておきたい内容を、クリックしないと見えない(非表示)ようにするものです。

スポイラーはDiscord MarkDownにはありますが(||||)、一般にデファクトとして利用されることが多い(&このMigdal SNS(もといForem)で採用されている)GitHub Flavored MarkDownでは対応していないようです。


仮実装(21-12-15)

{% hidden %} 黒塗り {% endhidden %}

※現在、:hover, :focus で実装していますが、タッチデバイスで動くかなど試してみてください。


画像リサイズ

にふさんよりリクエスト。2021/11/28-29提案、同11/30 0:25追記

MarkDownの画像タグを挟んでマークダウンをリサイズするためのタグを追加します。

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

などの用途が見込まれます。


仮実装(21-12-15)

以下のタグで、行内1文字分の画像が出力されます。

{% glyph [画像リンク] [代替テキスト(任意)] [vertical-alignの値(任意)] %}

※代替テキストは画像リンク切れ時とポップヒントに使われます。vertical-alignの値はデフォルトで全角文字用に最適化されています。


グロス(21-12-18 追加)

言語の記述でよく使用されるグロス形式を出力します。


仮実装(21-12-18)

以下のタグで下の画像のような出力が得られます。Leipzig.js を使用していますのでその記法を参照してください。

{% gloss orig free %}
Die Umgangssprache ist ein Teil des menschlichen Organismus und nicht weniger kompliziert als dieser.
die umgangssprache ist ein teil des mensch-lich-en organismus und nicht wenig-er komplizeiert als dies-er
DET.NOM.F.SG {colloquial language} be.3SG.PRS DET.NOM.M.SG part DET.GEN.M.SG human-ADJ-AGR.GEN.M.SG organism and NEG less-CMPR complicated CMPR DET-AGR.M.SG
the {colloquial language} is a part {of the} human organism and not less complicated than it
‘Colloquial language is a part of the human organism and is not less complicated than it.’ — Wittgenstein, <cite>Tractatus Logico-Philosophicus</cite>, 4.002
{% endgloss %}
Enter fullscreen mode Exit fullscreen mode

出力サンプル

※1:開始タグのオプション origfree はそれぞれ、「最初の行に分割なしの元テキストが書かれている」「最後の行に全体の翻訳が書かれている」ことを示します。ない場合は除いてください。他に欲しいオプションがある場合はご提案ください。

※2:サイトの Markdown パーサーの挙動にかなりくせがあるので、今のところ必ず上の例の通りグロスの1行分を改行せずに書き、タグ内に余計な改行は入れないでください。行を乱すようなことがなければ、グロス内に他の Liquid タグを含めることは可能です。


吹き出し会話(21-12-18 追加)

キャラ画像つき吹き出し会話を作れるタグです。上のにふさんのコメントから派生しています。


仮実装(21-12-18)

{% dialogue [側](:[背景色]:[枠色]) [画像URL] [話者名] %}
内容……
{% enddialogue %}
Enter fullscreen mode Exit fullscreen mode

[側]left/right で、話者の絵がどちらに配置されるかを指定します。[背景色][枠色]は任意で、吹き出しの背景と枠の色となります(CSS で使える色名を指定)。他に希望するオプションがあればご提案ください。


終わりに

鋭意開発中なので、導入を請うご期待!その他欲しい機能などがあったら(コメントやDiscord、Twitterなどで)どしどしお寄せください!

このレポジトリ下でコードが管理されているので、関心のある方はぜひコントリビュートしていただけるとありがたいです。

Ruby!Ruby!Ruby!Ruby!Ruby!Ruby!!!

GitHub logo CL-KIITA / Migdal_Adt_Features

Additional Features on Migdal SNS, bundle of Conlangers



https://github.com/CL-KIITA/Migdal_Adt_Features/blob/conla/liquid_migdal_tags/README.md#how-to-use-for-migdal-sns-users

みんなの声(19)

たたむ
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
佐藤陽花 Author

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

大変だ