Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MIWALABAdvent Calendar 2019Day 16
@uji_keyaki(宇治 槻)

インタラクティブなLINE風チャット小説

Last updated at Posted at 2019-12-16

##インタラクティブなLINE風チャット小説を作ってみよう
チャット小説というものが段々浸透してきているみたいなので、
LINE風チャット小説サイトを作っていきます。
HTML CSS JavaScript phpで書いていきます。

##フロント部分
まず、フロント部分をHTML CSS Javascriptで作っていきます。

chat.html
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <title>インタラクティブなLINE風チャット小説</title>
  <link rel='stylesheet' href='style.css' type='text/css' media='all' />
  <meta name="viewport" content="width=350" >
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
</head>
<body>

  <!-- ▼LINE風ここから -->
  <div class="line__container">
    <!-- タイトル -->
    <div class="line__title">
      犯人探し
    </div>

    <!-- ▼会話エリア scrollを外すと高さ固定解除 -->
    <div class="line__contents scroll">

      <!-- 自分の吹き出し -->
      <div class="line__right">
        <div class="text">犯人はこの中にいる！</div>
        <span class="date">既読 2<br>0:30</span>
      </div>

      <!-- 自分のスタンプ -->
      <div class="line__right">
        <div class="stamp"><img src="./stamp/job_tantei_man.png" /></div>
        <span class="date">既読 2<br>0:30</span>
      </div>

      <!-- 相手の吹き出し -->
      <div class="line__left">
        <figure>
          <img src="./icon/doctor.jpg" />
        </figure>
        <div class="line__left-text">
          <div class="name">医者</div>
          <div class="text">私はやっていないぞ！</div>
          <span class="date">0:32</span>
        </div>
      </div>

      <!-- 相手のスタンプ -->
      <div class="line__left">
        <figure>
          <img src="icon/doctor.jpg" />
        </figure>
         <div class="line__left-text">
          <div class="name">医者</div>
        </div>
        <div class="stamp"><img src="./stamp/dog2_angry.png" /></div>
        <span class="date">0:32</span>
      </div>

      <!-- 相手の吹き出し -->
      <div class="line__left">
        <figure>
          <img src="icon/macho.jpg" />
        </figure>
        <div class="line__left-text">
          <div class="name">マッチョ</div>
          <div class="text">疑われて悲しです・・・</div>
          <span class="date">0:33</span>
        </div>
      </div>

      <!-- 相手のスタンプ -->
      <div class="line__left">
        <figure>
          <img src="icon/macho.jpg" />
        </figure>
        <div class="stamp"><img src="./stamp/cat3_cry.png" /></div>
        <span class="date">0:33</span>
      </div>

    </div>
    <!--　▲会話エリア ここまで -->

      <form action = "chat.html" method = "get">
      <div class="bms_send">
      <input type = "text" class="bms_send_message" name ="answer">
      <input type = "submit" value ="送信" class="bms_send_btn">
      </div>
      </form>

  </div>
  <!--　▲LINE風ここまで -->

</body>

</html>
style.css

body {
  padding: 1em 0;
  background-color: #000000;
}

.line__container {
  padding:0;
  background: #7494c0;
  overflow: hidden;
  max-width: 400px;
  margin: -10px auto;
  font-size: 80%;
}

/* タイトル部分 */
.line__container .line__title {
  background: #273246;
  padding: 10px;
  text-align: center;
  font-size: 150%;
  color: #ffffff;
}

/* 会話部分 */
.line__container .line__contents {
  padding: 10px;
  overflow: hidden;
  line-height: 135%;
}

.line__container .scroll {
  height: 80%;
  overflow-y: scroll;
}

/* スタンプ画像最大幅 */
.line__container .line__left .stamp img{
  max-width:120px;
  margin: 30px 15px 5px 60px;
}

/* 相手の会話 */
.line__container .line__left {
  position: relative;
  display: block;
  margin: 5px 0;
  max-width: 80%;
  float: left;
  margin-right: 15px;
  clear: both;
}

/* アイコン画像 */
.line__container .line__left figure {
    width: 50px;
    position: absolute;
    top: 15px;
    left: 0;
    padding: 0;
    margin: 0;

}

/* 正方形を用意 */
.line__container .line__left figure img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.line__container .line__left .line__left-text {
  margin-left: 70px;
  padding: 10px 0 0 0;
}

.line__container .line__left .line__left-text .name {
  font-size: 80%;
  color: #ffffff;
}

/* コメントエリア */
.line__container .line__left .text {
  margin: 0;
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #ffffff;
}

/* 吹き出し */
.line__container .line__left .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 相手のの時間エリア */
.line__container .line__left .date {
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  text-align: right;
  right: -30px;
  bottom: 0px;
  font-size: 80%;
  color: #ffffff;
}

/* 自分の会話 */
.line__container .line__right {
    position: relative;
    display: block;
    margin: 5px 0;
    max-width: 75%;
    float: right;
    margin-right: 15px;
    clear: both;
}

/* コメントエリア */
.line__container .line__right .text {
  padding: 10px;
  border-radius: 20px;
  background-color: #8de055;
  margin: 0;
  margin-left: 80px;
}

/* 吹き出し */
.line__container .line__right .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -10px;
  top: 10px;
  border-left: 20px solid #8de055;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 自分がスタンプを送る時 */
.line__container .line__right .stamp {
  position: relative;
  margin-left: 80px;
}

/* 自分がスタンプを送る時 */
.line__container .line__right .stamp img{
  max-width: 100px;
}

/* 自分の既読エリア */
.line__container .line__right .date {
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  text-align: right;
  left: -30px;
  bottom: 0px;
  font-size: 80%;
  color: #ffffff;
}

/* テキストエリア、送信ボタン */
.bms_send {
    background-color:#eee;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 0px solid #ddd;
    height: 48px;
    padding: 5px;
    max-width: 400px;
    margin: 20px auto -13px;
}
.bms_send_message{
    width: calc(100% - 75px);/*常に送信ボタンの横幅を引いたサイズに動的に計算*/
    line-height: 16px;
    height: 48px;
    padding: 14px 6px 0px 6px;/*文字がテキストエリアの中心になる様に隙間調整*/
    border: 1px solid #ccc;
    border-radius: 4px;/*角丸*/
    text-align: left;/*文字を左寄せ*/
    box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2) inset;/*内側に影を入れてテキストエリアらしくした*/
    box-sizing: border-box;/*paddingとborderの要素の高さと幅の影響をなくす（要素に高さと幅を含める）*/
    font-size: 16px;
}
.bms_send_btn {
    width: 72px;
    height: 48px;
    font-size: 17px;
    line-height: 3em;
    float: right;/*bms_sendに対して右寄せ*/
    color: #fff;
    font-weight: bold;
    background: #bcbcbc;
    text-align: center;/*文字をボタン中央に表示*/
    border: 1px solid #bbb;
    border-radius: 4px;/*角丸*/
    box-sizing: border-box;/*paddingとborderの要素の高さと幅の影響をなくす（要素に高さと幅を含める）*/
    text-decoration:none;
}
.bms_send_btn:hover {
    background: #13178E; /*マウスポインタを当てた時にアクティブな色になる*/
    cursor: pointer;/*マウスポインタを当てた時に、カーソルが指の形になる*/
}

.button {
  width: 70px;
  height: 48px;
  border-radius : 5%;          /* 角丸       */
  font-size     : 15pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  font-weight: bold;
  padding       : 12px 10px;   /* 余白       */
  background    : #bcbcbc;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1.5em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border: 1px solid #bbb;
}
.button:hover {
  background    : #13178E;     /* 文字色     */
}

これで、一応LINE風チャット小説っぽくなりました。

スクリーンショット 2019-12-16 15.06.32.png

アイコンやスタンプ類は、お好みでカスタマイズしてください。
メッセージの送信時間や既読数も適宜変更してください。

ただ読むだけの小説ならこれで終わりです。

##インタラクティブ機能
ここからは、読者の送信内容によって内容が変わるようなものにしていきましょう。
今回は、犯人の名前を入力することで物語が進ものもを作っていきます。

part1.html
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <title>インタラクティブなLINE風チャット小説</title>
  <link rel='stylesheet' href='style.css' type='text/css' media='all' />
  <meta name="viewport" content="width=350" >
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>

  <!-- ▼LINE風ここから -->
  <div class="line__container">
    <!-- タイトル -->
    <div class="line__title">
      犯人探し
    </div>

    <!-- ▼会話エリア scrollを外すと高さ固定解除 -->
    <div class="line__contents scroll">

      <!-- 自分の吹き出し -->
      <div class="line__right">
        <div class="text">犯人はこの中にいる！</div>
        <span class="date">既読 2<br>0:30</span>
      </div>

      <!-- 自分のスタンプ -->
      <div class="line__right">
        <div class="stamp"><img src="./stamp/job_tantei_man.png" /></div>
        <span class="date">既読 2<br>0:30</span>
      </div>

      <!-- 相手の吹き出し -->
      <div class="line__left">
        <figure>
          <img src="./icon/doctor.jpg" />
        </figure>
        <div class="line__left-text">
          <div class="name">医者</div>
          <div class="text">私はやっていないぞ！</div>
          <span class="date">0:32</span>
        </div>
      </div>

      <!-- 相手のスタンプ -->
      <div class="line__left">
        <figure>
          <img src="icon/doctor.jpg" />
        </figure>
         <div class="line__left-text">
          <div class="name">医者</div>
        </div>
        <div class="stamp"><img src="./stamp/dog2_angry.png" /></div>
        <span class="date">0:32</span>
      </div>

      <!-- 相手の吹き出し -->
      <div class="line__left">
        <figure>
          <img src="icon/macho.jpg" />
        </figure>
        <div class="line__left-text">
          <div class="name">マッチョ</div>
          <div class="text">疑われて悲しです・・・</div>
          <span class="date">0:33</span>
        </div>
      </div>

      <!-- 相手のスタンプ -->
      <div class="line__left">
        <figure>
          <img src="icon/macho.jpg" />
        </figure>
        <div class="stamp"><img src="./stamp/cat3_cry.png" /></div>
        <span class="date">0:33</span>
      </div>

      <!-- 自分の吹き出し -->
      <div class="line__right">
        <div class="text">犯人は....</div>
        <span class="date">既読 2<br>0:35</span>
      </div>

    <?php
      $comment = htmlspecialchars($_GET['answer']);
      if($comment==""){

      }
      elseif($comment=="医者"){
        http_response_code( 302 ) ;
        header( "Location: ./part2.html") ;
        exit ;
      }
      else{
        echo "
        <!-- 自分の吹き出し -->
        <div class=\"line__right\">
          <div class=\"text\">$comment<br>では無いな。。</div>
          <span class=\"date\"><br>0:35</span>
        </div>
        ";
      }
    ?>

    </div>
    <!--　▲会話エリア ここまで -->

      <form action = "part1.html" method = "get">
      <div class="bms_send">
      <input type = "text" class="bms_send_message" name ="answer">
      <input type = "submit" value ="送信" class="bms_send_btn">
      </div>
      </form>

  </div>
  <!--　▲LINE風ここまで -->

</body>

</html>
part2.html
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <title>インタラクティブなLINE風チャット小説</title>
  <link rel='stylesheet' href='style.css' type='text/css' media='all' />
  <meta name="viewport" content="width=350" >
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
</head>
<body>

  <!-- ▼LINE風ここから -->
  <div class="line__container">
    <!-- タイトル -->
    <div class="line__title">
      犯人探し
    </div>

    <!-- ▼会話エリア scrollを外すと高さ固定解除 -->
    <div class="line__contents scroll">

      <!-- 自分の吹き出し -->
      <div class="line__right">
        <div class="text">犯人はこの中にいる！</div>
        <span class="date">既読 2<br>0:30</span>
      </div>

      <!-- 自分のスタンプ -->
      <div class="line__right">
        <div class="stamp"><img src="./stamp/job_tantei_man.png" /></div>
        <span class="date">既読 2<br>0:30</span>
      </div>

      <!-- 相手の吹き出し -->
      <div class="line__left">
        <figure>
          <img src="./icon/doctor.jpg" />
        </figure>
        <div class="line__left-text">
          <div class="name">医者</div>
          <div class="text">私はやっていないぞ！</div>
          <span class="date">0:32</span>
        </div>
      </div>

      <!-- 相手のスタンプ -->
      <div class="line__left">
        <figure>
          <img src="icon/doctor.jpg" />
        </figure>
        <div class="stamp"><img src="./stamp/dog2_angry.png" /></div>
        <span class="date">0:32</span>
      </div>

      <!-- 相手の吹き出し -->
      <div class="line__left">
        <figure>
          <img src="icon/macho.jpg" />
        </figure>
        <div class="line__left-text">
          <div class="name">マッチョ</div>
          <div class="text">疑われて悲しです・・・</div>
          <span class="date">0:33</span>
        </div>
      </div>

      <!-- 相手のスタンプ -->
      <div class="line__left">
        <figure>
          <img src="icon/macho.jpg" />
        </figure>
        <div class="stamp"><img src="./stamp/cat3_cry.png" /></div>
        <span class="date">0:33</span>
      </div>

      <!-- 自分の吹き出し -->
      <div class="line__right">
        <div class="text">犯人は....</div>
        <span class="date">既読 2<br>0:35</span>
      </div>

      <!-- 自分の吹き出し -->
      <div class="line__right">
        <div class="text">医者だ！</div>
        <span class="date">既読 1<br>0:36</span>
      </div>

      <!-- 相手の吹き出し -->
      <div class="line__left">
        <figure>
          <img src="./icon/doctor.jpg" />
        </figure>
        <div class="line__left-text">
          <div class="name">医者</div>
          <div class="text">私がやりました。。。</div>
          <span class="date">0:36</span>
        </div>
      </div>

    </div>
    <!--　▲会話エリア ここまで -->

      <form action = "commons_nazo1.html" method = "get">
      <div class="bms_send">
      <input type = "text" class="bms_send_message" name ="answer">
      <input type = "submit" value ="送信" class="bms_send_btn">
      </div>
      </form>

  </div>
  <!--　▲LINE風ここまで -->

</body>

</html>

これでpatr1.htmlのメッセージボックスに「医者」と入力すると、patr2.htmlに遷移します。

「医者」以外の文字を入力をすると、それは無いな。。と出ます。
こちらは、別ページにジャンプさせずに、同ページで処理します。

HTML内でPHPスクリプトを実行できない場合は、以下のリンク等を参考にしてください。
【PHP入門】HTMLでPHPスプリクトを実行しよう！

これでインタラクティブなLINE風チャット小説の完成です！

参考URL：
ゼロから作る、簡単WebチャットUIの作り方
HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法
別のページへジャンプするphpの関数

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?