Github ActionsでMarpのOGP画像を作成するときに文字化けする

2022/03/06 2022/06/26 #OGP #Github Actions #Marp

Github ActionsでMarpのOGP画像を作成するときに文字化けする

こんにちは。のんです。

今回はMarpについて記事を書きたいと思います。

Marpってなに

Marpとはマークダウン記法でスライドを作成できるようにするエコシステムのことですね。

公式HPはこちら。

利用用途しては、社内でLT会をやっているのですが、そのスライド作成のために利用しているという感じです。

ちなみにそのスライドたちはこちら

https://nonz250.github.io/slides/

その中でも面白かったのは

この辺でしょうか。

メリット

マークダウン記法なので、コードが書きやすい!!

これに尽きると思います。

他のプレゼンテーションツールだったらコードを画像化して貼り付ける...とかでしょうか?まぁ面倒臭いですよね。(もしかしたら便利な方法があるかもしれませんが。)

しかしマークダウンなので、普通に

<?php
// こんな感じで直接コードを書いてしまう
echo 'foo';
echo 'bar';

としてしまえばいいのです。

他にはマークダウンなので、HTMLタグが使えるというところでしょうか?

もちろんHTMLを書くのは面倒ですが、ちょっとしたスタイルの調整には役立ちます。

プレゼンテーション先がブラウザなので、HTMLベースというところもいいですよね。

PDFなどにも出力できるので、割となんでもできる気がします。

あとはこれもメリットですね。

マークダウンなので、スライドがごちゃつかない

スライドあるあるですねw

デメリット

スライドを生成する必要がある。

まぁこれは強いて挙げれば、というところでした。

マークダウンファイルなので、スライドではありません。

MarpではマークダウンファイルをHTMLファイルに変換し、そのHTMLをブラウザで見たときにスライド風に見えるというツールです。

なのでそのHTMLを出力するコマンドを実行する必要があります。

これは GitHub Actions で自動化しているのですが、そのコマンド実行時に文字化けするというエラーを踏んだ...というのが今回の記事の趣旨になります

OGP画像生成

このスライドはHTMLなので、リンクをTwitterなどのSNSに掲載したときにOGP画像を出力することができます。

Marpではスライドを画像に変換して出力するコマンドがありますので、デプロイ時にそのコマンドを実行し、 <head> タグで読み込むようにしています。

...が。

OGP画像生成時に絵文字(マルチバイト文字)が表示されない

というエラーにあたってしまいました。

ローカル環境ではキチンと出力されているようなのに、CI経由だと出力されていませんでした。

とは言っても知見のある方ならすでに答えがわかったかと思います。

そうです。文字セットがCI上のコンテナに無いだけですねww。

なので、対処としてこの文字セットをインストールして終了という形になります。

下記のコードは GitHub Actions でのコードですが、

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Install font
      run: sudo apt install fonts-noto
      (省略)

となります。

コンテナは Ubuntu なので、

sudo apt install fonts-noto

を実行するだけです。 fonts-noto にはマルチバイト文字が多数含まれているので問題ないとは思いますが、、他に必要な文字があれば適宜インストールすれば大丈夫だと思います。

結果

スクリーンショット 2022-06-27 2.12.55.png

こうすることでSlackなどに貼り付けたときにキチンと画像が表示され、その生成された画像に絵文字が表示されていますね。

MarpでOGPについては書いていないので公式HPを見てください。

あとは私のリポジトリも見ていただければ少しは参考になるかも知れません。

最後に

今回はライトに記事を書いてみました。

皆さんはスライドを作成するときにどのようなツールを使っていますか? Google Slide? Slide Share? Scrapbox?

他にも無料ツールで良いものがたくさんありますが、私は自分の資産としてリポジトリに残しておきたかったので、管理しやすいMarpを選択しました!

結構同じことをやってる人もたくさんいるのでは?

今回はツーリングについて一つ書こうと思っていましたが、時間がなくて急遽この記事にしましたw

次回こそはバイクの写真を掲載します!

そのときはよしなに。

.

のん

名刺 : About me.

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm #しまなみ海道 #youtube #CSS #IE #SLA #Rust #千里浜なぎさドライブウェイ #千里浜 #インサイドセールス #曽爾高原 #無線LAN #ポートフォリオ #バルカンS #納車 #Next.js #チームビルディング #リーダー #悩み #Github Actions #Marp #ネタ #サーバー移行 #S3 #ストレージサーバー #RFC 7807 #Digest #認証 #Xdebug #CLI #西日本 #例外