153 lines
9.4 KiB (Stored with Git LFS)
PHP
153 lines
9.4 KiB (Stored with Git LFS)
PHP
<div class="tutorial_background" style="display:none;">
|
||
<div class="tutorial_modal">
|
||
<div class="tutorial">
|
||
<div class="page" id="page1">
|
||
<h1>チュートリアルへようこそ！</h1>
|
||
<p style="text-align: center;">ここでは、uwuzuのチュートリアルを行うことができます！<br>
|
||
チュートリアルでは、uwuzuについてや、基本的な使用方法を学ぶことができます！</p>
|
||
<div class="btm_area">
|
||
<div class="iro_btn" id="next">次へ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page" id="page2" style="display:none;">
|
||
<h2>そもそも、uwuzuって？</h2>
|
||
<p>簡潔に言えば、ミニブログSNSです！<br>
|
||
アカウント登録をしたユーザーが「ユーズ」という投稿を行うことができ、他のユーザーがいいねをしたり、フォローなどをして交流することができます。<br>
|
||
<br>
|
||
基本的な使用方法はこれまでのミニブログSNSと似ているものです。<br>
|
||
<br>
|
||
ここで一つ知っていただきたいことがあります！<br>
|
||
uwuzuは、SNSという場所を作るためのソフトウェアの名前です。<br>
|
||
つまりどういうことかというと、あなたが使っているこのサービス自体は"uwuzu"ではなく"uwuzuを使って作られているコミュニティ"ということになります！<br>
|
||
<br>
|
||
uwuzuはどなたでもサーバーを構築できるという特徴があり、誰でも簡単にuwuzuを使用したサーバーを立ててコミュニティを作ることができます！<br>
|
||
<br>
|
||
そして、今あなたがチュートリアルを見ているこのサーバーもuwuzuを使用して構築されたコミュニティの一つです。
|
||
</p>
|
||
<div class="btm_area">
|
||
<div class="iro_btn backcolor" id="back">戻る</div>
|
||
<div class="iro_btn" id="next">次へ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page" id="page3" style="display:none;">
|
||
<h2>ユーズって何？</h2>
|
||
<p>uwuzu上では、投稿のことを「ユーズ」と呼んでいます。<br>
|
||
このユーズは、他のSNSで言う「ノート」や、「ツイート」と同じような意味を持つ言葉です。<br>
|
||
<br>
|
||
ユーズをするには、タイムラインの一番上にある「いまどうしてる？」という入力欄に投稿したい内容を入力して、「ユーズする」ボタンを押すことでユーズができます！<br>
|
||
<br>
|
||
投稿されたユーズはタイムラインに時系列順にならんで他のユーザーに表示されます！
|
||
</p>
|
||
<img src="../img/tutorial_image/image1.png">
|
||
<div class="btm_area">
|
||
<div class="iro_btn backcolor" id="back">戻る</div>
|
||
<div class="iro_btn" id="next">次へ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page" id="page4" style="display:none;">
|
||
<h2>ユーズを知ってみる！</h2>
|
||
<p>先ほど紹介したユーズにできる機能を紹介します！</p>
|
||
<img src="../img/tutorial_image/image2.png">
|
||
<p>- いいね … ユーズに「いいね！」できます！<br>
|
||
- リユーズ … ユーズを拡散したり引用してユーズできます！<br>
|
||
- 返信 … ユーズに返信をできます！もちろん返信への返信も可能です<br>
|
||
- ブックマーク … ユーズを自分のブックマークに登録できます！<br>
|
||
- 追記 … ユーズに追記を行えます！後日談やミスの訂正にどうぞ！<br>
|
||
- その他 … シェアやユーズの削除などその他の操作を行えます！</p>
|
||
<div class="btm_area">
|
||
<div class="iro_btn backcolor" id="back">戻る</div>
|
||
<div class="iro_btn" id="next">次へ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page" id="page5" style="display:none;">
|
||
<h2>タイムラインの仕組み</h2>
|
||
<p>uwuzuには主に3つのタイムラインがあります！<br>
|
||
uwuzuの「ホーム」を開いてデフォルトで開かれるタイムラインは「ローカル」と書かれています。<br>
|
||
そして、タイムライン上部のメニューから「フォロー」というタイムラインや「おすすめ」も見ることが可能です。<br>
|
||
それぞれの機能はこんな感じ！<br>
|
||
<br>
|
||
- おすすめ … おすすめタイムラインの略称で、人気のユーズや自分が多くいいねしているユーザーのユーズなどが表示されます！<br>
|
||
- ローカル … ローカルタイムラインの略称で、同じサーバーにいる全員のユーズが表示されます。(uwuzu v1.3.5以前はLTL)<br>
|
||
- フォロー … フォロータイムラインの略称で、自分のフォローしているユーザーのユーズが表示されます。(uwuzu v1.3.5以前はFTL)<br>
|
||
</p>
|
||
<div class="btm_area">
|
||
<div class="iro_btn backcolor" id="back">戻る</div>
|
||
<div class="iro_btn" id="next">次へ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page" id="page6" style="display:none;">
|
||
<h2>NSFWとは</h2>
|
||
<p>もし、このサーバーのルールに、センシティブな内容を投稿する際にはNSFWを設定する必要があるというものがあれば、あなたはセンシティブな内容のユーズをするさいにNSFWを設定する必要があります。<br>
|
||
<br>
|
||
NSFWは、Not Safe For Workの略であり、解釈としては「仕事中や学校などで見るべきではないぞっ！」って感じのことになります。<br>
|
||
<br>
|
||
センシティブな内容の投稿をする際はサーバーのルールを守って投稿画面より「目に斜線」ボタンを押してNSFWを設定してくださいね
|
||
</p>
|
||
<img src="../img/tutorial_image/image3.png">
|
||
<div class="btm_area">
|
||
<div class="iro_btn backcolor" id="back">戻る</div>
|
||
<div class="iro_btn" id="next">次へ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page" id="page7" style="display:none;">
|
||
<h2>このサーバーで少し過ごして居づらかったら...</h2>
|
||
<p>安心してください、uwuzuにはいろんなサーバーがあり、自分にあったサーバーをさがし、登録することができます！<br>
|
||
<br>
|
||
<br>
|
||
えっ？自分の好みにあったサーバーがないって...？<br>
|
||
<br>
|
||
大丈夫、uwuzuは無料で配布されているソフトウェアです。<br>
|
||
少しのWebサーバーの知識とインターネットの使い方がわかっていれば大丈夫！<br>
|
||
あなたが自分だけのサーバーを立てることができちゃいます！<br>
|
||
<br>
|
||
また、uwuzu v1.3.6以上を導入しているサーバーであれば、サーバー間でのアカウントの移行が可能です！
|
||
</p>
|
||
<div class="btm_area">
|
||
<div class="iro_btn backcolor" id="back">戻る</div>
|
||
<div class="iro_btn" id="next">次へ</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page" id="page8" style="display:none;">
|
||
<h1>お疲れ様でした！</h1>
|
||
<p style="text-align: center;">チュートリアルは終了です！<br>
|
||
まだ、このチュートリアルで紹介できていないuwuzuの機能や使い方も多くあるので、もっとuwuzuについて知りたい方はぜひdocs.uwuzu.xyzをご覧ください。</p>
|
||
<div class="btm_area">
|
||
<div class="iro_btn backcolor" id="back">戻る</div>
|
||
<div class="iro_btn" id="end">閉じる</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
$(document).ready(function() {
|
||
$(".tutorial_background").on('click', function(e) {
|
||
if(e.target !== e.currentTarget) return;
|
||
$(".tutorial_background").hide();
|
||
});
|
||
|
||
var page = 1;
|
||
$(document).on("click", "#next", function () {
|
||
$("#page"+page+"").hide();
|
||
page++
|
||
$("#page"+page+"").show();
|
||
});
|
||
|
||
$(document).on("click", "#back", function () {
|
||
$("#page"+page+"").hide();
|
||
page = page-1
|
||
$("#page"+page+"").show();
|
||
});
|
||
|
||
$(document).on("click", "#end", function () {
|
||
$(".tutorial_background").hide();
|
||
});
|
||
});
|
||
</script> |