ソーシャルカードプラグインを導入する

[tsuna-can-se]

概要

外部（主にSNS）からリンクを貼られる際、ソーシャルカードに対応していると見た目的にもよく、流入率が上がると言われている。
Webサイトを外部公開したので、見られやすくなるような工夫を施していきたい。
material for mkdocsにはソーシャルカードを生成するプラグインが存在するため、これを利用できないか検討する。

以前試したときは、日本語を使うと文字化けしてしまっていた。
しかしフォントを指定できるオプションが追加されているようなので、再度チャレンジしてみる価値がありそう。

詳細 / 機能詳細（オプション）

この機能はWindows環境で実行するのにめんどくさい環境構築作業が必要。
特にローカルで確認したい要求はないので、ローカルビルド時には動作しないように設定し、CIやパッケージングの時だけ実行できるようにしたい。

うまくできればAlesInfiny Maia OSS Editionにも同じIssueをたてて作業したい。

完了条件

• 外部からリンクを張るとき、ソーシャルカードが利用されること
• ソーシャルカード内の文字が見切れていないこと
• ソーシャルカードの色がAlesInfiny Maris OSS Editionのイメージカラーとあっていること

[fkoyama]

ソーシャルカードの設定

https://squidfunk.github.io/mkdocs-material/plugins/social/#built-in-social-plugin
https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/

• mkdocs.ymlに以下を追加してソーシャルカードを生成

plugins:
  - social

• social.enabled でビルドの際に social プラグインを有効化するか選択できる

plugins:
  - social:
      enabled: !ENV [BUILD_DOCUMENTS, false]

上記の設定だと、環境変数BUILD_DOCUMENTS をtrueに設定すると social プラグインを有効にすることができる。
ローカルでは無効、CIでは有効にするといった使い方ができる。

• デフォルトの設定

  • 色：mkdocs.ymlのtheme.palette.primary
  • ロゴ：mkdocs.ymlのtheme.logoまたはtheme.icon.logo
  • title：ページごとのメタデータのtitle(設定していない場合はページの見出し)
  • description : ページごとのメタデータのdescription(設定していない場合はmkdocs.ymlのsite_description)

• ほとんどのオプションが insider で、 social.cards_layout_options のオプションでカスタマイズできるのは以下

  • background_color
  • color
  • font_family

• カード上に表示できる文字数

  • title：全角9文字×3行まで

  • description: 半角59文字(全角だと30文字目が半分途切れる)×2行

  • スペースを空けないと1単語とみなされ、同じ行に詰め込もうとして文章が途切れるので適宜スペースで区切る

    • title: .NETアプリケーションの処理方式 の場合
      

    • title: .NET アプリケーションの 処理方式 の場合