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

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

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

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

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

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

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

追加タグは、右側の文章中の「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年11月29日

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

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

仮実装（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 %}

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

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

吹き出し会話（21-12-18 追加）

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

仮実装（21-12-18）

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

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

終わりに

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

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

Ruby！Ruby！Ruby！Ruby！Ruby！Ruby！！！

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