Markdownのプレビューアプリを使って楽にチェックしよう

2024年05月30日 木曜日


【この記事を書いた人】
ふぇにっくちゅん(守田 瞬)

2021年11月にセキュリティ情報統括室に所属。頑固なので、ニックネームだけでもやわらかくひらがなにしてみました。普段はハニーポットで収集したDDoSの発生源であるマルウェアを対象に分析しています。

「Markdownのプレビューアプリを使って楽にチェックしよう」のイメージ

お久しぶりです、ふぇにっくちゅん です。
昨年の今ごろ、cats_dogs(キャッツ・ドッグス)を公開しました。
はじめてブログを読んでくださる方の中には「cats_dogsってなんだ?」となるかもしれません。
まずは、簡単にcats_dogsについて紹介しておきます。

cats_dogsは、簡単に言えばMarkdownで書いたファイルをブラウザで閲覧できるアプリです。
加えて、文単位で閲覧権限をコントロールできる機能があります。
cats_dogsの詳細を知りたい方は、以前執筆したブログをご覧ください。

cats_dogsを公開した後、情報共有がしやすくなった、書くのが楽になったなどの声を頂きました。
わたし自身もcats_dogsのヘビーユーザで、文章を書いてから共有するまでが楽になり、共有のスピードが上がったのは確かです。
ですが、そのおかげで相対的にボトルネックとして手間に感じる部分が見つかりました。
それは共有する前に行う、コンテンツを確認する作業です。
言い換えると、レビューです。

本記事では、この手間について具体的に説明した後、手間を解消するcats_pr_dogs(キャッツ・プレーリー・ドッグ)というアプリを紹介します。

手間だと感じるシーン

では、cats_dogsを利用する際の簡単な例を紹介し、手間だと感じるシーンについて説明します。

cats_dogsは、Markdownファイルを閲覧権限をつけて共有できるWebアプリケーションです。
そのため、Markdownファイルを閲覧する際には、ブラウザを使用します。

HTTP/HTTPS通信

Webサーバ上で稼働しているcats_dogsは、Markdownファイルをブラウザで閲覧できるように、HTMLに変換してくれています。

MarkdownとHTMLの変換

このコンテンツの元となるMarkdownファイルは、情報を公開・共有したい人が作成します。
その後、作成したコンテンツを公開するため、レビューを行います。

このレビューは本記事の話題の中心であるため、少し具体的に説明していきます。
たとえば、他者に見せる資料を作成するときに、レビューをしてもらうと思います。
そこでは、内容面、レイアウトなどを確認することになります。
もちろん、公開してはいけない情報が含まれていないかも確認するでしょう。

このとき、cats_dogsを使っている場合には、レビュー対象の資料がMarkdownファイルになります。
しかし、レビューアはMarkdownの形式ではなく、最終的に表示される状態でレビューを行いたいはずです。
なぜなら、Markdownで記述すると、文章中に外部リンクがあるだけで可読性が下がってしまうからです。

以下の図は、上がMarkdownで記述した文章です。下がそのMarkdownファイルをcats_dogsでHTMLに変換したもので、最終的に表示される状態です。

MarkdownとHTMLの表示の違い

皆さんならどちらを見てレビューしたいでしょうか?(この例は一ヶ所指摘されそうな箇所を仕込んでいます)
わたしは、ブラウザでHTMLに変換したものを見てレビューしたいです。

cats_dogs以外のアプリを例にすると、WordPressでは「プレビューを表示」という機能を使用して、公開する前に記事をチェックできます。
ですが、cats_dogs自体にはプレビューの機能がありません。
そのため、プレビューという機能や仕組みを用意し、文章をチェックできるようにしなければなりません。
つまり、わたしは、このプレビューの仕組みを用意することを「手間だ」と感じてしまったわけです。

レビューの温度感

レビューする仕組みや環境を用意することの前に、レビューの温度感について少し思い出してみます。

たとえば、資料を作っている最中を思い出してみてください。
資料の作成途中であっても資料全体を見直すことはないでしょうか。
わたしはあります。
見直すタイミングはそれぞれですが、自ら作成したものを自らレビューする、セルフレビューです。

では、他の人に確認してもらうレビューはどうでしょうか。
自分と近い人に確認してもらうこともあれば、全く背景を知らない人に確認してもらうかもしれません。
先ほどとは違って、このケースでは、資料がある程度完成に近い状態でレビューされることが多いと思います。

どうもレビューには段階があるようで、ラフなものからしっかりしたものまでありそうです。

cats_dogsでレビューを実現するには

それでは話を戻して、cats_dogsでレビューの仕組みを作ることを考えてみましょう。
先ほど紹介したような、レビューの温度感を同時に解決することができるのでしょうか?

できます。

しかし、セルフレビューを行うケースと複数人でレビューを行うケースを想定した上で、Webサーバを設計する必要があります。

たとえば自分だけのセルフレビューであれば、手元のパソコンでcats_dogsを稼働させる方法でもいいでしょう。
この程度なら、人によっては手間に感じない可能性があります。
しかし、権限ごとに表示を出し分けるようなコンテンツをセルフレビューする場合には大変になります。
権限による表示の確認まで含めると、cats_dogsを複雑な構成で稼働させなければなりません。
なぜなら、表示させる権限で実際にアクセスしなければ正しい表示で確認できないからです。

また、複数人でレビューする場合には、手元のパソコンでは難しいため、サーバを用意することになります。
このケースでは、権限ごとに表示させるコンテンツをレビューする場合、権限操作をどうするか?が悩ましい問題になります。
たとえば、レビューアが、レビューしたい権限グループに切り替えようとした時、その都度サーバ管理者に設定切り替えを依頼するのが良いでしょうか?
このような悩みを考えなければならなくなります。
つまり、レビュー用のサーバを立てることでは終わらず、レビュー時の権限管理・操作についての悩みを解決する必要があります。

いかがでしょうか、手間に感じてこないでしょうか?

セルフレビューの場合では、「楽にレビューしたい」のに権限グループを考慮したレビューの場合、「レビューする環境を構築するのが楽ではない」という葛藤をすることになります。
また、「複数人でレビューしたいだけ」なのに、先述した悩み以外にも、「レビュー用のサーバを構築したくない」という葛藤もあります。
なぜなら、「誰がそのサーバを運用するのか?」という課題が降りかかってくるからです。

心が折れてきそうです。

ここまでに紹介した例やシーンは一部ですが、レビューの温度感はもちろんのこと、関わる人やコンテンツの用途を考えると、多岐にわたります。
その都度、機能や仕組みを用意したり、サーバを構築し直したりするのは大切です。
公開・共有するサーバを構築するだけで留まらず、レビューの環境を整えることがかなり面倒であるとわかってもらえるかと思います。

cats_dogsでレビューの機能やその仕組みを実現することができますが、苦労することが目に見えています。
そのため、レビュー用の仕組みを既存のサーバに組み込んだり、レビュー専用のサーバを構築することはあまり幸せにならない気がしています。
できるならサーバは、情報を公開・共有するだけのシンプルな形で運用したいです。

プレビューアプリについて

そこで、プレビューアプリが登場します。
このプレビューアプリは、GitHub上にcats_pr_dogsとして公開しています。
これはサーバを用意する必要がなく、皆さんの手元のパソコンで動作します。
プレビューアプリが動作するOSはMac、Windows、Ubuntuです。
アプリについて、その他の詳細はGitHubのREADME.mdをご覧ください。
また、Markdownファイルなどの資料をレビューア間で共有するだけで、権限グループの切り替え表示も手軽に手元で実現できます。

ここでは簡単にプレビューアプリを紹介します(以降はMac版を例にします)。
cats_dogsでは、cat_mdviewとcat_tmplviewという2種類のモジュールを提供しています。
プレビューアプリは、この二つのモジュールに対応するプレビューアプリです。

アプリのアイコン

プレビューアプリ 対応するcats_dogsのモジュール アプリの概要
CatPrMd.app cat_mdview Markdownファイルを、HTMLに変換して表示する
CatPrTmpl.app cat_tmplview Markdownファイルを、指定されたユーザ名が閲覧できる内容をHTMLに変換して表示する

CatPrMd.app起動時の様子

CatPrMd.app起動時の様子

CatPrTmpl.app起動時の様子

CatPrTmpl.app起動時の様子

これらのアプリを使用するには、ビルドする必要があります。
事前にGoのインストールが必要になりますが、既にcats_dogsを使用している方は、難なくできると思います。

どちらのアプリも、MarkdownファイルをそのままHTMLに変換して表示します。
UIとしての大きな違いは、左上にアカウント名を入力する欄があることです。
CatPrTmpl.appはアカウント名を入力することで、Markdownファイルに記載された権限グループに従って表示を切り替えます。

この権限グループは、プレビューする人(レビューア)が設定できます。
プレビューアプリでは、実際に認証・認可しているのではなく、指定したユーザが属する権限グループで、どのように表示するかをデモしてくれるだけです。

他にも設定ファイルを変更できるようになっていますので、詳しくはプレビューアプリの設定をご覧ください。
利用する際には、すでに運用しているcats_dogsが稼働しているサーバの設定値と揃えるとよいです。
そうすることで、より厳密にプレビューすることができます。
また、レビューアが行うビルドや設定の負荷を減らすのであれば、事前にビルドしたものを配布するという運用でも良いです。

配布イメージ

おわりに

cats_dogsを利用している方の中で、公開予定のMarkdownファイルをレビューすることに苦労していた方は、お待たせしました。
このアプリによって、プレビューの機能や仕組みを用意することなく、プレビューができるようになります。
そのため、レビュー時にはMarkdownファイルなどの必要なファイルを、コミュニケーションツールを使用してレビューアに共有するだけで済みます。

サーバに配置する前にどのような表示になるか、権限も含めて確認できるようになっているため、かなり確認が楽になります。
プレビューアプリなので、URLのリンクは実際にリンク先に遷移するのではなく、リンク先のURLに間違えがないかを確認するダイアログを表示するようにしています。

リンク先の確認

また、このプレビューアプリを公開すると同時に、cats_dogsがサーバアプリとして立場を変え、新たに追加されたcats_eedsでMarkdown変換のライブラリを提供するようにしています。
プレビューアプリ以外のアプリを作りたい方は、cats_eedsを使って開発してみてください。

GitHub上のリポジトリの構成がプレビューアプリのリリースと共に変更されていますので、全体像を把握したい方のためにこちらで解説しています。
気になる方は、ご覧ください。

ふぇにっくちゅん(守田 瞬)

2024年05月30日 木曜日

2021年11月にセキュリティ情報統括室に所属。頑固なので、ニックネームだけでもやわらかくひらがなにしてみました。普段はハニーポットで収集したDDoSの発生源であるマルウェアを対象に分析しています。

Related
関連記事