Kazunari-h/nico

## nico
if(strpos($img,'niconico')){
  //ニコニコの動画の表示
  $img = str_replace("www", "embed", $img);
}else if(strpos($img,'youtube')){
  // youtube動画の表示
  $img = str_replace("watch?v=", "/embed/", $img);
}

## sample.php
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>名前を表示するよ</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="wrapper">
      <form
        action="./sample26_bbs.php"
        method="post"
        name="form1">
        <label for="nickname"> 名前: </label>
        <input type="text" class="form-control form-control-lg" id="nickname" name="nickname" required>
        <br>
        <label for="message">メッセージ: </label>
        <input type="text" class="form-control form-control-lg" id="message" name="msg" required>
        <br>
        <label for="message">画像URL: </label>
        <input type="url" class="form-control form-control-lg" id="image" name="imgurl" required>
        <br>
        <input class="btn btn-success" type="submit" value="送信">
      </form>
      <header class="id8oV">
        <div aria-label="ストーリーズを開く" class="aoVrC " role="button" tabindex="0">
          <div class="img_box" >
            <img class="_7A2D8" src="http://up.gc-img.net/post_img_web/2015/05/aZoGwnJkOIvdxIq_15782.jpeg" alt="" width=150 height=150 >
          </div>
        </div>
        <div class="title_box">
          <h2 class="TQQQl">
            <a class="F2iT8" href="">
              #アイスクリーム
            </a>
          </h2>
          <span class="-nal3 ">投稿<span class="g47SY ">823,130</span>件</span>
        </div>
      </header>
      <h2><div class="sub_title">人気投稿</div></h2>
    <?php
      if(empty($_POST)) {
        // 空だった場合
        $url = "";
        $result = "";
      } else {
        // 何か値が送られていた場合
        if(is_readable("./file/counter.txt")) {
          $id = (int)file_get_contents("./file/counter.txt") + 1;
        }else {
          $id = 1;
        }
        file_put_contents("./file/counter.txt", $id);

        $url = $_POST["imgurl"];
        $result = $id.",".$_POST["nickname"].",".$_POST["msg"].",".$url;
      }

      // ファイルの名前
      $filename = "./file/db.txt";

      // ファイルがあるかどうか
      if (is_readable($filename)) {
        // 読めた場合
        if (isset($_POST["edit"])) {
          // editという値が送られてきた場合
          // 編集リクエスト
          // idによって、編集内容を上書きする。
          $posts = explode("\n", file_get_contents($filename));
          for ($i=0; $i < count($posts); $i++) {
            // post_idが含まれる場合 置換処理をしてあげる
            $post_id = $_POST["post_id"];
            $regex = preg_quote("/[0-9].+,.+?/", '/') ;
            if(preg_match($regex, $posts[$i])) {
              $posts[$i] = $result;
            }
          }
          // 配列を改行コードでくっつける処理
          $result = implode("\n", $posts);
        }else {
          // 新規書き込みリクエスト
          if (strlen($result) == 0) {
            $result = file_get_contents($filename);
          }else {
            $result = $result."\n".file_get_contents($filename);
          }

        }
      }else {
        // 読めなかった場合
        print $filename."は読めませんでした。";
      }

      $list = explode("\n", $result);
      for ($i=0; $i < count($list); $i++) {
        $list2 = explode(",", $list[$i]);
        if ($i % 3 == 0) {
          print "<div class='row'>";
        }
        if (count($list2) < 4) {
          continue;
        }
        $img = $list2[3];
        print "<div class='content'><img class='post_image' src='$img' alt='img'></div>";
        if ($i % 3 == 2 || $i - 1 == count($list)) {
          print "</div>";
        }
      }

      // POSTで送った値がない場合、書き込みをしない。
      if(!empty($_POST)) {
        // 保存する処理
        file_put_contents($filename, $result);
      }

      ?>
    </div>
    <nav>
      <div class="MWDvN">
        <h1>Twitgram</h1>
      </div>
    </nav>

  </body>
</html>

## style.css
@font-face {
  font-family: 'Billabong';
  font-style: normal;
  font-weight: normal;
  src: local('Billabong'), url('Billabong.woff') format('woff');
}

nav {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.0975);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  -webkit-transition: height .2s ease-in-out;
  transition: height .2s ease-in-out;
  height: 77px;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
h1 {
  font-family: 'Billabong';
  font-weight: normal;
  font-size: 42px;
  height: 77px;
  line-height: 77px;
}
body {
  background-color: #fafafa;
}

.content:last-child{
  margin-right: 0px;
}

.content{
  margin-right: 28px;
  float: right;
}

.content:last-child {
  margin-bottom: 0px;

}
.row {
  width: 935px;
  margin: 0;
  margin-bottom: 28px;
  float: none;
  height: 293px;
}

.wrapper {
  width: 935px;
  margin: 117px auto;
}
header {
  font-size: 16px;
  line-height: 24px;
  margin-top: 56px;
  margin-bottom: 44px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.post_image {
  width: 293px;
  height: 293px;
  object-fit: cover;
}
.img_box {
  width: 150px;
  height: 150px;
  background-color: #fafafa;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}
.title_box {
  margin-left: 50px;
  text-align: left;
}

.sub_title {
  color: #999;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  margin-bottom: 16px;
  text-align: left;
  text-transform: capitalize;
}

.MWDvN {
    height: 77px;
    width: 935px;
    margin: auto;
}
	if(strpos($img,'niconico')){
	//ニコニコの動画の表示
	$img = str_replace("www", "embed", $img);
	}else if(strpos($img,'youtube')){
	// youtube動画の表示
	$img = str_replace("watch?v=", "/embed/", $img);
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>名前を表示するよ</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	<link rel="stylesheet" href="./style.css">
	</head>
	<body>
	<div class="wrapper">
	<form
	action="./sample26_bbs.php"
	method="post"
	name="form1">
	<label for="nickname"> 名前: </label>
	<input type="text" class="form-control form-control-lg" id="nickname" name="nickname" required>
	<br>
	<label for="message">メッセージ: </label>
	<input type="text" class="form-control form-control-lg" id="message" name="msg" required>
	<br>
	<label for="message">画像URL: </label>
	<input type="url" class="form-control form-control-lg" id="image" name="imgurl" required>
	<br>
	<input class="btn btn-success" type="submit" value="送信">
	</form>
	<header class="id8oV">
	<div aria-label="ストーリーズを開く" class="aoVrC " role="button" tabindex="0">
	<div class="img_box" >
	<img class="_7A2D8" src="http://up.gc-img.net/post_img_web/2015/05/aZoGwnJkOIvdxIq_15782.jpeg" alt="" width=150 height=150 >
	</div>
	</div>
	<div class="title_box">
	<h2 class="TQQQl">
	<a class="F2iT8" href="">
	#アイスクリーム
	</a>
	</h2>
	<span class="-nal3 ">投稿<span class="g47SY ">823,130</span>件</span>
	</div>
	</header>
	<h2><div class="sub_title">人気投稿</div></h2>
	<?php
	if(empty($_POST)) {
	// 空だった場合
	$url = "";
	$result = "";
	} else {
	// 何か値が送られていた場合
	if(is_readable("./file/counter.txt")) {
	$id = (int)file_get_contents("./file/counter.txt") + 1;
	}else {
	$id = 1;
	}
	file_put_contents("./file/counter.txt", $id);

	$url = $_POST["imgurl"];
	$result = $id.",".$_POST["nickname"].",".$_POST["msg"].",".$url;
	}

	// ファイルの名前
	$filename = "./file/db.txt";

	// ファイルがあるかどうか
	if (is_readable($filename)) {
	// 読めた場合
	if (isset($_POST["edit"])) {
	// editという値が送られてきた場合
	// 編集リクエスト
	// idによって、編集内容を上書きする。
	$posts = explode("\n", file_get_contents($filename));
	for ($i=0; $i < count($posts); $i++) {
	// post_idが含まれる場合置換処理をしてあげる
	$post_id = $_POST["post_id"];
	$regex = preg_quote("/[0-9].+,.+?/", '/') ;
	if(preg_match($regex, $posts[$i])) {
	$posts[$i] = $result;
	}
	}
	// 配列を改行コードでくっつける処理
	$result = implode("\n", $posts);
	}else {
	// 新規書き込みリクエスト
	if (strlen($result) == 0) {
	$result = file_get_contents($filename);
	}else {
	$result = $result."\n".file_get_contents($filename);
	}

	}
	}else {
	// 読めなかった場合
	print $filename."は読めませんでした。";
	}

	$list = explode("\n", $result);
	for ($i=0; $i < count($list); $i++) {
	$list2 = explode(",", $list[$i]);
	if ($i % 3 == 0) {
	print "<div class='row'>";
	}
	if (count($list2) < 4) {
	continue;
	}
	$img = $list2[3];
	print "<div class='content'><img class='post_image' src='$img' alt='img'></div>";
	if ($i % 3 == 2 \|\| $i - 1 == count($list)) {
	print "</div>";
	}
	}

	// POSTで送った値がない場合、書き込みをしない。
	if(!empty($_POST)) {
	// 保存する処理
	file_put_contents($filename, $result);
	}

	?>
	</div>
	<nav>
	<div class="MWDvN">
	<h1>Twitgram</h1>
	</div>
	</nav>

	</body>
	</html>
	@font-face {
	font-family: 'Billabong';
	font-style: normal;
	font-weight: normal;
	src: local('Billabong'), url('Billabong.woff') format('woff');
	}

	nav {
	display: flex;
	background-color: #fff;
	border-bottom: 1px solid rgba(0,0,0,.0975);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	-webkit-transition: height .2s ease-in-out;
	transition: height .2s ease-in-out;
	height: 77px;
	-webkit-box-ordinal-group: 1;
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	}
	h1 {
	font-family: 'Billabong';
	font-weight: normal;
	font-size: 42px;
	height: 77px;
	line-height: 77px;
	}
	body {
	background-color: #fafafa;
	}

	.content:last-child{
	margin-right: 0px;
	}

	.content{
	margin-right: 28px;
	float: right;
	}

	.content:last-child {
	margin-bottom: 0px;

	}
	.row {
	width: 935px;
	margin: 0;
	margin-bottom: 28px;
	float: none;
	height: 293px;
	}

	.wrapper {
	width: 935px;
	margin: 117px auto;
	}
	header {
	font-size: 16px;
	line-height: 24px;
	margin-top: 56px;
	margin-bottom: 44px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	}

	.post_image {
	width: 293px;
	height: 293px;
	object-fit: cover;
	}
	.img_box {
	width: 150px;
	height: 150px;
	background-color: #fafafa;
	border-radius: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	overflow: hidden;
	position: relative;
	}
	.title_box {
	margin-left: 50px;
	text-align: left;
	}

	.sub_title {
	color: #999;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	margin-bottom: 16px;
	text-align: left;
	text-transform: capitalize;
	}

	.MWDvN {
	height: 77px;
	width: 935px;
	margin: auto;
	}