ウェブサイトの構築や生成プロセスを経ることなく、Markdownファイルを直接ウェブページに変換できます。書き終えたらすぐにドキュメントを公開できます。興味がありますか？MarkdownまたはHTMLを複数のプラットフォーム（コンテンツ管理システムや学習管理システムなど）に自由に埋め込みたいですか？Docsifyは、Docsify.jsで構築されたオープンソースプロジェクトで、Markdownファイルのコンテンツを簡単に公開、共有、再利用できます。

Docsify-This とは何ですか?

Docsify-Thisを使えば、あらゆるMarkdownファイルをレスポンシブなスタンドアロンのWebページに瞬時に変換できます。複数のMarkdownファイルをリンクしてシンプルなWebサイトを作成することもできます。Webデザイナーは、Webページビルダーのインターフェースをクリックするか、ページのアドレスパラメータ（URLなど）を変更することで、表示されるページの外観を簡単に変更できます。独自のMarkdownファイルコンテンツを作成する際には、提供されているMarkdown CSSクラスセットも使用できます。さらに、CodebergまたはGitHubリポジトリを使用してMarkdownファイルを保存すると、各ページに「このページを編集」リンクが自動的に表示され、共同編集作業をサポートします。

さらに、Docsify-This はオープンソースなので、プラットフォームによってロックアウトされるリスクなしに、カスタム ドメインを使用して Docsify-This インスタンスをホストできます。

Docsifyの使用 - このウェブページビルダー

ウェブページビルダーを使用するには、まずブラウザを開き、Docsify-This のウェブサイトまたはローカルインスタンスにアクセスします。「ウェブページビルダー」セクションで、Codeberg または GitHub のパブリックリポジトリにある Markdown ファイルの URL を入力します（Docsify-This の URL パラメータを使用して他の Git ホストも使用できますが、ウェブページビルダーでは使用できません）。次に、下の画像に示すように、「スタンドアロンウェブページとして公開」ボタンをクリックします。

Docsify - このウェブページビルダーインターフェース

Markdownファイルはスタンドアロンのウェブページとしてレンダリングされ、コピー・共有可能なURLが生成されます。URLの例を以下に示します。

 https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md

Docsify-This は埋め込みに適した Web ページを生成するため、Docsify-This ページのビジュアル スタイルをターゲット プラットフォームに適合させることができます。

Docsify-レンダリングされたMarkdownファイル

同じリポジトリ内の他のファイルをレンダリングする

Docsify-This URLパラメータ ` homepageを直接編集することで、同じリポジトリにある他のMarkdownファイルをレンダリングすることもできます。例えば：

 https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=anotherfile.md

ウェブページの外観を変更する

URLパラメータを使用して、Docsify-Thisに表示されるMarkdownファイルの外観を変更できます。例えば、 font-family （テキストのフォントファミリ）、 font-size （フォントサイズ）、 link-color （ハイパーリンクの色）、 line-height （行の高さ）は一般的なCSSプロパティであり、Docsify-Thisでも有効なパラメータです。

 https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&font-family=Open%20Sans,sans-serif

Markdown CSSクラスの特別なセットを使って、ウェブページの外観を変更することもできます。例えば、リンクに「ボタンクラス」を追加できます。

 [Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button')

これにより、テキスト リンクの代わりにボタンが生成されます。

Docsify-This によってレンダリングされたボタン

Docsify-This でサポートされている Markdown CSS クラスに加えて、Markdown ファイルではカスタムクラスも使用できます。例:

 <style> .markdown-section .mybutton, .markdown-section .mybutton:hover { cursor: pointer; color: #CC0000; height: auto; display: inline-block; border: 2px solid #CC0000; border-radius: 4rem; margin: 2px 0px 2px 0px; padding: 8px 18px 8px 18px; line-height: 1.2rem; background-color: white; font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; font-weight: bold; text-decoration: none; } </style> [Custom CSS Class Button](# ':class=mybutton')

このカスタム クラスを使用すると、次のようなボタンが生成されます。

Docsify-This でレンダリングされたカスタムボタン画像

Markdown ファイルに HTML スニペットを含める

標準のMarkdownでサポートされているように、MarkdownファイルにHTMLスニペットを含めることができます。これにより、HTMLレンダリングにレイアウト要素を追加できます。例えば：

 <div class="row"> <div class="column"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="column"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div>

iFrameを使用してDocsify-Thisウェブページを埋め込む

Docsify-This のウェブページは、iFrame を使用してほぼすべてのプラットフォームに埋め込むことができます。また、URL パラメータを使用して、埋め込みコンテンツがターゲットプラットフォームと一致するようにすることもできます。

 <p><iframe style="overflow: hidden; border: 0px #ffffff none; margin-top: -26px; background: #ffffff;" src="https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=home.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=true" width="800px" height="950px" allowfullscreen="allowfullscreen"></iframe></p>

Docsify - LMSに埋め込まれたこのページ

外部URLを使用してDocsify-Thisを埋め込む

オープンソースのMoodleやプロプライエタリなCanvasなど、一部の学習管理システムでは、コースナビゲーションメニューに外部ウェブページへのリンクを設定できます。例えば、Canvasのリダイレクトツールを使用して、Docsify-Thisのウェブページを表示できます。

 url=https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=resources.md&edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue, Helvetica,Arial,sans-serif&font-size=1&hide-credits=true

Docsify-ThisとGitの統合

バージョン管理のメリットを最大限に活用し、「このページを編集」リンクを使用して共同作業を行うには、Docsify-This MarkdownファイルをCodebergまたはGitHubのGitリポジトリに保存してください。GitHub Desktop（最近オープンソース化されました）、Git-Cola、SparkleShareなど、Gitのグラフィカルインターフェースを提供するオープンソースツールは数多くあります。VSCodeやPulsar Edit（旧Atom.io）などのテキストエディターにもGit統合機能があります。

MarkdownファイルをWebページに簡単に公開

Docsifyのおかげで、誰もがMarkdownファイルをオンラインで公開するメリットを享受できます。そしてDocsify-Thisのおかげで、この作業は驚くほど簡単になりました。Docsify-Thisのウェブサイトで試してみてはいかがでしょうか？