チュートリアル・制作 - open-novel/open-novel.github.io GitHub Wiki

作品を作る

  1. 作業フォルダを作る
    作った全ての作品を入れるためのフォルダを適当な場所に作ります。（今回は「Novels」としました。）
    img
    （フォルダを作るには、Windowsなら右クリック→新規作成→フォルダ）

  1. 作品フォルダを作る
    作業フォルダの下に作品フォルダを作ります。（今回は「はじめてのおーぷんノベル」としました。）
    img

  1. 「シナリオ」フォルダを作る
    作品フォルダの下に「シナリオ」フォルダを作ります。
    img

  1. 開始シナリオファイルを置く
    「シナリオ」ファルダの下に、作品フォルダと同じ名前のテキストファイルを作ります。
    img
    （テキストファイルを作るには、Windowsなら右クリック→新規作成→テキスト ドキュメント）

  1. シナリオを書く
    テキストファイルを開いて、以下のように書いてみます。
わたし
	こんにちは

「こんにちは」の前の空白部分は「スペース」ではなく「タブ」です。キーボードの左にある「Tab」キーを押すことで入力できます。
書き終わったら保存をしますが、このとき注意が必要です。
img
上の画像のように文字コードが「UTF-8」となっていることを確認してください。


作品を作る（詳細）

  • 作品ファイルの構成などの詳細は作品仕様書ページを見てください。
  • シナリオの詳しい書き方はシナリオ仕様書ページを見てください。

作った作品を動かしてみる

  1. プレイヤーにローカルファルダからインストールする
    プレイヤー上でインストールする場所を選ぶ → 「インストール」 → 「フォルダから」
    と進み、作品フォルダを選べばプレイヤーにインストールされます。

作った作品を公開する

GitHubを利用する方法

GitHubを使うと比較的簡単に自分の公開ページを持てるだけでなく、変更を取り消して過去に戻したりと言った作品管理もできるのでオススメです。

  1. GitHubアカウントを作る
    https://github.comにアクセスし、ユーザーネーム・メール・パスワードを入力し、「GitHubに登録する」もしくは「Sign up for GitHub」ボタンをクリックして登録を始めます。プランは『free』で構いません。最後に届いた確認メールをクリックして登録完了です。

  1. GitHub Desktopをインストールする
    ローカル環境で編集しているファイルとGitHub上のファイルを同期する方法はいくつかありますが、初心者には公式アプリをこちらからインストールすることをオススメします。以後の説明もこのアプリを用いて行います。

  1. リポジトリを作る
    フォルダを指定してリポジトリを作ることで、そのフォルダの中をアプリから管理できるようになります。
    GitHub Desktopを起動しサインインしたら、「Create new repository」ボタンを押し、名前（作業フォルダ）・フォルダパス（作業フォルダの１つ上）を設定して「Create repository」ボタンを押しましょう。
    img

  1. リポジトリを公開する アプリ上の「Publish repository」ボタンを押し、「Keep this code private」のチェックを外して「Publish repository」ボタンを押しましょう。
    これで指定したフォルダがGitHub上に公開されます。公開したファイルは『https://github.com/ユーザーネーム/リポジトリ名』で確認できます。
    img

  1. サイトを公開する
    GitHubで自分のリポジトリを開きます。
    img
    上の方にある「Settings」リンクから移動し、「GitHub Pages」の項目を見つけます。
    img
    「Source」の設定を「master branch」にし、「Save」ボタンを押せば完了です。

  1. 公開するサイトのトップページを作る index.htmlとonp-agent.jsをダウンロードして作業フォルダに置きます。（リンクを右クリックしてダウンロードできます）
    img

  1. トップページを編集する
    index.htmlを編集します。テキストエディタをインストールしてなく、クリックでブラウザが開いたりして編集できない時は、
    Windowsなら 右クリック → プログラムから開く → 別のプログラムを選択 → その他のアプリ
    と進んでいってメモ帳を見つけます。
    img
    最初はこのようになっているのを、「★」の部分を作品名、「☆」の部分を表示したい名前に置き換えて保存します。
    img
    もし、２つめ、３つめの作品を作った時は以下のようにリンクを増やしてください。リンク名や周囲の言葉は好きに変えることができます。
    img
    （作品フォルダをZIP化して★の部分へZIPファイル名『～.zip』を書くこともできます）

  1. 変更したファイルを同期させる
    新しくファイルを作ったり中身を変更した時は、変更を確定させてアップロードする必要があります。
    まず以下のように変更内容を書いて「Commit to master」ボタンを押ます。
    img
    次に「Push origin」ボタンを押せばGitHubへのアップロードが完了です。
    img
    これで、数分（初回は数十分）ほどしてあなたのサイト『https://ユーザーネーム.github.io/リポジトリ名』にアクセスすると、作品をプレイヤーにインストールするためのページが表示されているはずです。見れない場合はもうしばらく待ってみましょう。

GitHubを利用しない方法

  1. 公開ページにonp-agent.jsを導入する
    onp-agent.jsをダウンロードしてサイトに上げます。
    例えば公開ページHTMLと同じ階層に置いた場合なら、「<script src="./onp-agent.js"></script>」のようにページに配置します。

  1. class属性に"onp"を設定した作品ZIPファイルへのリンクを貼る
    例えば公開ページHTMLを同じ階層に作品フォルダ「テスト」が置いてある場合なら「<a href="./テスト">テスト</a>」でフォルダへのリンクが作れますが、そこにclass属性として"onp"を設定すると、インストールするためのリンクになります。
    例：「<a class="onp" href="./テスト">テスト</a>」
    （フォルダをZIP化して.zipへのリンクを貼ることもできます）

ストリーミングで作品を配布する方法

上記の様に作品公開ホームページを作らなくとも、GitHubもしくはCORSに対応した状態で作品フォルダが公開されていれば、
『https://open-novel.github.io?base=ベースＵＲＬ&title=作品フォルダ名#direct』というリンクでプレイヤーを開くことで、作品選択メニューなどをスキップして、すぐに作品をストリーミング再生させることができます。

例えば「https://raw.githubusercontent.com/open-novel/Products/master/デモ・テスト/デモ・基本」であれば、
「https://open-novel.github.io?base=https://raw.githubusercontent.com/open-novel/Products/master/デモ・テスト&title=デモ・基本#direct」となります。（文字に一部の記号が含まれるときはURIエンコードしてください）


プレイヤーページ：　https://open-novel.github.io/
open2ch 制作スレ：　https://hayabusa.open2ch.net/test/read.cgi/news4vip/1537182605/l50
中心メンバー：　プレイヤー作者◆nGd1lGNLFc　ナンダカフラリ◆nXx776kVbg → ◆Np0Hl4tpnc

⚠️ **GitHub.com Fallback** ⚠️