!doctitle{#0.1 NMLを自分のサイトで使う}->align("center")$
!description{サンプルとして用意しているサーバーの使い方を説明します}$
NMLはとても簡単に埋め込むことができます
nml.jsとカラーテーマを読み込めば、後はHTMLの!code[<\nml-view>]タグの中にNMLを書くだけで、NMLを表示することができます
$
また、DBを使って簡単にブログが書けるようなものも用意する予定です がまだ作っていません
$
NodejsとExpressを使って、!link("https://neknaj.com"){Neknajのウェブサイト}のようなサーバーが簡単に作れるようなサンプルを用意しました
この章ではこのサンプルの使い方を説明します
VSCodeでの編集を前提に解説するので、
>>> !title{サンプルの取得}$
Githubの!link("https://github.com/neknaj/ndds/releases/latest"){release}から!code[ndds_sample_server.zip]をダウンロードしてください
パソコン側からウイルス検知とかでダウンロードを拒否された場合は諦めてください (或いはウイルスチェッカーを飼いならしてください)
>>> !title{VSCodeで開く}$
!code[ndds_sample_server.zip]を任意の場所に展開/解凍してください
中に!code[sever.js]があると思いますので、!code[sever.js]があるディレクトリを開いてください
VSCodeの拡張機能を用意しているので、拡張機能を導入していない場合は!card("./0.0.nml")を確認してください
>>> !title{サーバーを起動する}$
>>> !title{nodejsとexpressをインストールする}$
これは調べたらいくらでも解説が出てくるので省略します
nodejsとexpressが動くようにしてください
expressはnodejsのライブラリで、webサーバーを作るために使用しています
!code[$ node server.js]このコマンドで起動することができます
既定では!code[http://localhost:8080/]で起動する筈です
(既に8080を使用している場合はポートを変更して下さい)
>>> !title{ブラウザからサーバーにアクセスする}$
Webブラウザのアドレスバーに!link[http://localhost:8080/sample.nml]や!link[http://localhost:8080/sample.html]を入れてみてください
これを開くと、サンプルとして用意したNMLをブラウザで閲覧することができます
サンプルの中にも書きましたが、この2つのURLからはほぼ同じファイルを取得します
>>> !title{コンテンツを編集する}$
!code[server.js]と同じディレクトリ内に!code[samlpe.nml]や!code[sample.html]があるので、これを編集してみてください
NMLを編集するときに参考にするべき情報は続きのチュートリアルにあります
>>> !title{サーバーの機能}$
NMLファイルに対して、URL末尾に!code[?info]や!code[?nml]を付加することで、それぞれの機能を使えます
!code[?info]では、NMLファイルのdoctitleとdescriptionを取得して、JSON形式で返します
!code[?nml]では、NMLファイルをHTMLに変換するツールを付随させず、NMLの生のファイルを返します
>>> !title{HTMLの見た目を変更する}$
NMLはHTMLに変換して表示しています
HTMLの見た目はCSSによって設定されている為、!code[default.css]や、!code[theme/]中のファイルを編集すれば見た目を変えることができます
これにはHTMlやCSSに関する知識が必要です