Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html >
<head>
  <meta charset="UTF-8">
  <title>紳さんのぺペロン日和</title>
</head>
  <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W2F7ZVT');</script>
<!-- End Google Tag Manager -->
<META http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<meta name="description" content="究極のペペロンチーノを食べさせたくて、私は今日もペペロンチーノを作ります。"/>
<meta name="keywords" content="LIG,紳さん,ペペロンチーノ"/>
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="article" />
<meta property="og:title" content="紳さんのぺペロン日和" />
<meta property="og:description" content="究極のペペロンチーノを食べさせたくて、私は今日もペペロンチーノを作ります。" />
<meta property="og:url" content="https://htanaka0828.github.io/pprn/" />
<meta property="og:site_name" content="pprn" />
<link rel="stylesheet" href="./style.css">
<title>紳さんのぺペロン日和</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W2F7ZVT"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="l-containar contents-wrap">
  <header class="">
    <div id="photo-stream-wrap">
      <div id="photo-stream" class="">
      </div>
      <div class="ps-text-wrap">
        <div class="ps-text-inner">
          <h1>紳さんのぺペロン日和<span>〜 僕がペペロンチーノマスターになるまで 〜</span></h1>
          <p id="catch-copy">シンプル・イズ・ベスト<br>
          妥協をするとすぐバレる。ペペロンチーノこそが料理の真の実力。<br>
          ペペロンチーノから始まるコミニュケーション。<br>
          あなたに美味しいペペロンチーノを食べてもらうため、僕は今日も頑張ります。</p>
        </div>
      </div>
    </div>
  </header>
  <div class="bg-green">
    <div class="l-content l-2colum">
      <section class="content canvas-container month-graph-wrap">
        <h2 id="week-score-title"><span>今週のペペロン</span></h2>
        <div class="week-scores-wrap">
          <p>今週の平均点:<span id="week-score-average"></span>点</p>
          <p>先週の平均点:<span id="week-score-average-1ago"></span>点</p>
        </div>
        <p id="week-score-comment"></p>
        <canvas id="week-score" class="canvas" width="400" height="400"></canvas>
      </section>
      <section class="content new-score-wrap">
        <h2><span>最新のペペロン</span></h2>
        <span id="new-score-date"></span>
        <p id="new-score-title" class=""></p>
        <p id="new-score" class=""><span>/1000点</span></p>
        <div id="new-score-image"></div>
        <p id="new-score-comment"></p>
        <div class="social-wrap">
          <!--Twitter-->
          <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          <!--facebook-->
          <div class="fb-like" data-layout="box_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
        </div>
      </section>
    </div>
  </div>
  <section class="total-score-graph l-content bg-white">
    <h2><span>これまでの成果</span></h2>
    <p class="read-text">今日でペペロンづくりも<span class="total-date"></span>日目。</p>
    <div class="total-score-wrap">
      <!--<div>今のレベル<span class="total-level"></span></div>-->
      <div class="total-average">今までの平均点<span></span>点</div>
      <!-- <div class="">最高得点<span></span></div> -->
    </div>
    <div class="horizontal-scroll">
      <div class="graph-wrap">
        <canvas id="whole-period" height="450" style="width: 100%; height: 450px";></canvas>
      </div>
    </div>
    <div class="scroll">スクロールできます→</div>
  </section>
  <!--紹介-->
  <div class="bg-red">
    <div class="l-content l-2colum">
      <section class="content">
        <h2><span>作っているのはこんな人</span></h2>
        <div class="product">
          <div class="product-hover"></div>
          <img src="http://megaphone.tokyo/pprpimages/profile.jpg">
          <div class="product-info">
            <div class="subhead">Lv.<span class="total-level"></span>ペペロン<span class="peperon-level-job"></span></div>
            <div class="product-name">竹内紳也</div>
            <p class="product-description">毎日ペペロンチーノの事を考えています。</p>
            <div class="price">
              <span class="amount">
                <a href="https://www.facebook.com/shinsan523">紳さんのfacebook</a>
              </span>
            </div>
          </div>
        </div>
      </section>
      <section class="book content">
        <h2><span>待望の書籍化?!「紳さんのペペロン日和」</span></h2>
        <div class="content-inner">
          <p>こんな料理本見た事ない!<br>
          料理人でもない僕が毎日ペペロンチーノを作り続けて友達に食べてもらった記録です。</p>
          <p>これさえ読めばあなたもペペロンチーノマスターになれるかも。</p>
          <p>ペペロンチーノが好きで好きでしょうがないあなた!
            料理が苦手なあなたも!<br>
            最高のペペロンチーノの作り方は僕が教えます。</p>
          <p>※現在、当書籍は企画段階です。よろしければ下記のリンクからご支援お願いいたします。</p>
        </div>
        <div class="btn-wrap">
          <a class="btn" href="https://camp-fire.jp/" target="_blank">CAMPFIREで応援する</a>
        </div>
      </section>
    </div>
  </div>
  <div class="l-content">
    <section class="content">
      <h2><span>いままでのペペロン日和</span></h2>
      <p class="read-text">今までに食べてもらった記録です。</p>
      <div id="feed-list"></div>
      <div class="centering">
        <div id="btn-more-feed" class="btn primary">もっと見る</div>
      </div>
    </section>
  </div>
  <div class="bg-blue">
    <div class="l-content guest">
      <section class="content">
        <h2><span>Thanks</span></h2>
        <p class="read-text">手料理を食べてくれる人がいるって幸せ幸せ。<br>
        みなさん、本当にありがとうございました。<br></p>
        <ul id="guest-name-list">
        </ul>
      </section>
    </div>
  </div>
</div>
<footer class="l-footer">
  <p>@2017 紳さんのぺペロン日和</p>
</footer>
<script src="./app.js"></script>
</body>
</html>
              
            
!

CSS

              
                @charset "UTF-8";
/*!
Theme Name: MEGAPHONE
Theme URI: http://megaphone.tokyo/
Author: MEGAPHONE
Author URI: http://megaphone.tokyo/
Description: Description
Version: 1.0.0
Text Domain: megaphone
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

megaphone is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0; }

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none; }

html {
  font-size: 62.5%; }

body {
  font-size: 1.0rem;
  background-color: #fff; }

h2 {
  overflow: hidden;
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.6rem; }

h2 span {
  position: relative;
  display: inline-block;
  padding: 0 1em;
  text-align: left; }

h2 span::before,
h2 span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 400%;
  height: 1px;
  background-color: #ccc; }

h2 span::before {
  right: 100%; }

h2 span::after {
  left: 100%; }

div, p, ul, ol, nav, section {
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS ゴシック", sans-serif;
  font-color: #333;
  font-size: 1.6rem;
  font-weight: 400; }

p {
  line-height: 1.6em; }

ul {
  padding: 0;
  list-style-type: none; }

img {
  max-width: 100%; }

a {
  color: #003171;
  -webkit-transition: .2s;
  transition: .2s;
  text-decoration: none; }
  a:active, a:hover, a:focus {
    color: #003171; }

*::-moz-selection {
  background: #F3C13A;
  color: #fff; }

*::selection {
  background: #F3C13A;
  color: #fff; }

/*Firefoxに対応*/
*::-moz-selection {
  background: #F3C13A;
  color: #fff; }

.product {
  width: 100%;
  padding: 15px;
  position: relative;
  margin: 0 20px 0 0; }
  @media screen and (max-width: 768px) {
    .product {
      padding: 0; } }
  .product > img {
    width: 60%;
    display: block;
    position: relative;
    border-radius: 50%; }
  .product:hover .product-hover, .product:active .product-hover {
    opacity: 1; }
  .product .product-info {
    position: absolute;
    bottom: 30px;
    right: 2%;
    background: white;
    width: 40%;
    border-radius: 5px;
    padding: 10px; }
    @media screen and (max-width: 768px) {
      .product .product-info {
        top: 0;
        right: 0;
        bottom: 0; } }
  .product .subhead {
    color: #37d27d;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: bold; }
  .product .product-name {
    font-size: 2.4rem;
    color: #2c3e50;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    letter-spacing: -1px; }
  .product .price {
    border-radius: 4px;
    background: #3b5998; }
    @media screen and (max-width: 768px) {
      .product .price {
        width: 100%; } }
  .product .amount a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #fff; }
    @media screen and (max-width: 768px) {
      .product .amount a {
        font-size: 1.6rem; } }
  .product .product-description {
    color: #333; }

.product-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  background-size: 30px 30px;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
  -webkit-animation: barberpole 0.5s linear infinite;
          animation: barberpole 0.5s linear infinite; }

@-webkit-keyframes barberpole {
  from {
    background-position: 0 0; }
  to {
    background-position: 60px 30px; } }

@keyframes barberpole {
  from {
    background-position: 0 0; }
  to {
    background-position: 60px 30px; } }

/*アイキャッチ*/
#photo-stream-wrap {
  position: relative;
  overflow: hidden; }

#photo-stream {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 160vh; }
  #photo-stream .ps-item {
    width: 25%;
    overflow: hidden;
    -webkit-transition: .2s;
    transition: .2s; }
    #photo-stream .ps-item img {
      max-width: 100%; }

.ps-text-wrap {
  width: 100%;
  height: 300px;
  max-width: 80%;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7); }
  .ps-text-wrap:before, .ps-text-wrap::after {
    top: 0px;
    left: 0px;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute; }
  .ps-text-wrap:before {
    z-index: 10;
    opacity: 0.5;
    -webkit-filter: blur(8px);
    filter: blur(8px);
    background-color: #fff; }
  .ps-text-wrap:after {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    -webkit-filter: blur(8px);
    filter: blur(8px);
    background-image: var(--bg); }
  .ps-text-wrap .ps-text-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    text-align: center;
    width: 100%; }
    .ps-text-wrap .ps-text-inner h1 span {
      font-size: 1.4rem;
      display: block;
      text-align: center; }
    @media screen and (max-width: 400px) {
      .ps-text-wrap .ps-text-inner #catch-copy {
        display: none; } }

@media screen and (max-width: 768px) {
  .flexbox {
    height: 220vw; }
  /* 2カラムにする */
  .flexbox .item {
    width: 50%; } }

@media screen and (max-width: 400px) {
  .flexbox {
    height: auto; }
  /* 1カラムにする */
  .flexbox .item {
    width: 100%; } }

.l-containar {
  width: 100%; }

.l-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px; }
  @media screen and (max-width: 768px) {
    .l-content {
      padding: 20px 5%; } }

.l-content.l-2colum {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (max-width: 768px) {
    .l-content.l-2colum {
      display: block; } }

.l-content.l-2colum .content {
  width: 50%;
  padding: 20px 3%; }
  @media screen and (max-width: 768px) {
    .l-content.l-2colum .content {
      width: 100%;
      padding: 2% 0; } }

.l-footer {
  text-align: center; }

.content {
  padding: 10px; }

.content-inner {
  padding: 0 10px; }

.bg-green {
  color: #fff;
  background-color: #27ae60; }

.bg-white {
  background-color: #fff; }

.bg-red {
  color: #fff;
  background-color: #e74c3c; }

.bg-blue {
  color: #fff;
  background-color: #2c3e50; }

.read-text {
  margin-bottom: 40px;
  text-align: center;
  font-size: 2rem; }

.centering {
  text-align: center; }

#week-score {
  width: 100%; }

.week-scores-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .week-scores-wrap p {
    width: 50%;
    padding: 0 10%; }
    .week-scores-wrap p span {
      font-size: 2rem; }

#new-score {
  font-size: 4.4rem;
  margin: 0 0 20px 0; }

.btn-wrap {
  text-align: center; }

.btn {
  display: inline-block;
  padding: 14px 60px;
  border-radius: 40px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  -webkit-transition: .2s;
  transition: .2s; }
  .btn a {
    color: #fff; }

.btn.primary {
  background-color: #27AE64; }
  .btn.primary:hover {
    background-color: #37d27d; }

.total-score-graph {
  position: relative;
  padding-bottom: 130px; }
  .total-score-graph .horizontal-scroll {
    overflow-x: scroll; }
    .total-score-graph .horizontal-scroll .graph-wrap {
      width: 200%; }
  .total-score-graph .scroll {
    text-align: right;
    margin-top: 20px;
    color: #fff;
    font-size: 1.8rem;
    padding: 20px;
    background-color: #2c3e50;
    height: 20px;
    position: absolute;
    right: 20px;
    border-radius: 5px; }

.total-score-graph .total-score-wrap {
  font-size: 1.8rem;
  margin-bottom: 20px;
  text-align: center; }
  .total-score-graph .total-score-wrap span {
    font-size: 3rem; }

.book .btn {
  border: 1px solid #fff; }
  .book .btn:hover {
    background-color: #fff;
    color: #2D3E53; }

#feed-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media screen and (max-width: 768px) {
    #feed-list {
      display: block; } }
  #feed-list > div {
    width: 29%;
    padding: 2%; }
    @media screen and (max-width: 768px) {
      #feed-list > div {
        width: 100%;
        padding: 14px 0; } }
  #feed-list .feed-caption {
    color: 666; }
  #feed-list .feed-guest {
    font-size: 1.4rem;
    color: #27AE68;
    vertical-align: baseline;
    margin-top: 7px; }
    #feed-list .feed-guest span {
      display: inline-block;
      margin-right: 3px; }
  #feed-list h3 {
    margin-top: 8px;
    padding: 10px 0;
    text-align: center;
    border-top: 1px solid #2c3e50;
    border-bottom: 1px solid #2c3e50; }
  #feed-list p {
    padding: 20px;
    margin-top: -4px;
    border: 1px solid #95a5a6; }

#guest-name-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media screen and (max-width: 768px) {
    #guest-name-list {
      display: block; } }
  #guest-name-list li {
    width: 50%;
    text-align: center;
    margin-bottom: 20px; }
    @media screen and (max-width: 768px) {
      #guest-name-list li {
        width: 100%; } }

.document .l-content {
  padding-bottom: 0; }

.document ul li {
  list-style-type: circle;
  margin-bottom: 10px; }

.document p {
  text-align: center; }
              
            
!

JS

              
                var pprn_data = [
    // {
    //   "year": 2017,
    //   "month": 6,
    //   "day": ,
    //   "guest": "",
    //   "title":"60日目のペペロン",
    //   "comment":"",
    //   "score":,
    // },
    {
      "year": 2017,
      "month": 6,
      "day": 22,
      "guest": "アキト・ザ・ウォンテッドリー",
      "title":"59日目のペペロン",
      "comment":"チルくてドープなアキト・ザ・ウォンテッドリーとペペロンチーノでワンオフかましてきた。アキトのレスポンスをバイトして2種類の唐辛子を大量にマッシュアップした結果、ハマリ系のパスタに。タマネギa.k.a.オニオンも切り方を変えて、ディレイをかけながらロングミックス。俺のペペロンチーノはレペゼンTOKYOだぜ?世の中に溢れるクソみたいなセルアウトそんなパスタ、食べる奴がバスタバイブス満タン 味の難関 今こそ超える 俺こそが弾丸尖ったフォーク 差し込むぜコーク 決め手になるのは具材のポーク(990点満点中、268点のアジョ)",
      "score":268,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 21,
      "guest": "",
      "title":"58日目のペペロン",
      "comment":"(中島みゆき ルージュ替え歌ver.)塩をふるのが うまくなりましたどんな大量の パスタにでも塩をふるのが うまくなりましたオイルひくたびに わかりますあの味 追いかけて この鍋を買った頃はまだ具材はただひとつ うす茶色あの味 追いかけて くり返す 試行錯誤いつか 食べ飽きて塩をふるのが うまくなりましたオイルひくたびに わかります(990点満点中、205点)",
      "score":205,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 20,
      "guest": "美少女トオルさんと渋沢さん",
      "title":"57日目のペペロン",
      "comment":"ゲストに美少女トオルさんと渋沢さん。2人ともお腹が空いてそうだったので、6人前ぐらいのパスタを茹でたけど全部食べきっていた。今日のペペロンはかなり上手にできたと思う!! 特にみじん切りのタマネギの焦がし具合とコンソメと塩の加減が良かった。ペペロン食べて久しぶりに美味いって思ったな…990点満点中、316点の味。",
      "score":316,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 19,
      "guest": "会社役員のまことさん",
      "title":"56日目のペペロン",
      "comment":"ゲストに会社役員のまことさん。ナチュラルに「ボクが金出すんで、超高級食材を買ってきて最高のペペロンチーノつくりましょう」みたいなことを言われてびびった。これだから金持ちキャラは…「それだとウチの味にならない」ということを説明させていただいた上で、いつも通りのペペロンチーノをつくった。1リットル598円のオリーブオイルに4個入り1パック398円のニンニク、1袋98円の唐辛子でね。まことさん、涙を流しながら「ウメェ、ウメェっす」って膝から崩れ落ちて泡を吹いてた。料理は愛情だな。990点満点中、289点の味。",
      "score":289,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 15,
      "guest": "",
      "title":"55日目のペペロン",
      "comment":"ソロペペロン。ニンニクと玉ねぎをみじん切りにして飴色になるまで炒め、コンソメスープを入れて炊き上げて乳化。その後、さらに玉ねぎと舞茸を加えてサッと炒め、パスタと合える。唐辛子は輪切りのやつを最後に。ブラックペッパーを最後に振って完成!唐辛子はオイルの中に入れるより、食べる直前に混ぜるだけで十分!美味い!!!ペペロンチーノ飽きた!!!990点満点中、268点の味(過去最高得点)",
      "score":268,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 14,
      "guest": "日本一写真映りが悪いイケメン」こと浅瀬石さん",
      "title":"54日目 相性バツグン!舞茸のペペロンチーノ",
      "comment":"ゲストに「日本一写真映りが悪いイケメン」こと浅瀬石さん。「水曜日はいいオフィスのお客様にペペロンを振る舞う」というレンツとの約束をずっと守っているのであった。そんなことより、舞茸。ペペロンに舞茸入れてみたら美味すぎてやばいのなんのってダシが出すぎなのです。ガーリックオイルとの相性もよく、割と完成された具材なのかなって思いました。他のキノコは候補として「しめじ」「エリンギ」「マッシュルーム」「ポルチーニ茸」などが挙げられます。990点満点中、251点の味。",
      "score":251,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 13,
      "guest": "近所に住んでいる河内さん",
      "title":"53日目のペペロン",
      "comment":"本日のゲストは「近所に住んでいる河内さん」です!LIGのことがめっちゃ好きらしく、LIGのことならだいたい知っている。さて、本日のペペロンチーノも昨日に続いて「ガーリック明太子のオイルソース」となりました。 そしてアスパラも入れた!!!最高に美味しかった。今まで食べてきた人にも試食してもらった結果、「過去最高に美味い。出店はよ」と言われるくらい。990点満点中、257点の味。",
      "score":257,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 12,
      "guest": "王子",
      "title":"52日目のペペロン",
      "comment":"富山からペペロンチーノを食べに「王子」が来てくれました。関係者の方、わかりますか。これが加齢により太るということです。さて、今回は福岡の方から良い明太子をいただいたので投入しました。にんにく + オリーブオイル + 明太子。果たして合うのだろうかと思ったのですが、めちゃくちゃ美味いわ!! バターとか牛乳とか生クリームとかも良いんだろうけど! イカとか大葉とかも良いんだろうけど!ペペロンチーノは全てを凌駕するアーティスト向けの料理です。990点満点中、238点の味。(過去最高得点)",
      "score":238,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 9,
      "guest": "噂のカードゲーム女子、けーちんと晴れる屋の高橋さん",
      "title":"51日目のペペロン",
      "comment":"ゲストに噂のカードゲーム女子、けーちんと晴れる屋の高橋さん。けーちん、可愛かった。何気にLIGとは無関係ではない晴れる屋さんがペペロン食べに来てくれたのが嬉しい!今日は完全に乳化を忘れたんだけど、いつもとそんなに違いは感じられなかったなぁ?w アスパラベーコン美味し!990点満点中168点ぐらいの味。",
      "score":168,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 7,
      "guest": "株式会社つなぐの皆様",
      "title":"50日目のペペロン",
      "comment":"ゲストに株式会社つなぐの皆様! いいオフィスの会員様です〜本日はやさしい辛さのマイルドペペロンチーノをつくった。塩を「サラサラキレキレ系」から「しっとりまろみ系」に変えたんだけど、こっちの方がペペロンチーノには合うと感じた。塩を変えたのは初めてだけど、ぜっんぜん違う。というか、材料の中で塩を変えるのが一番、味の変化がわかりやすいと思う。つなぐの皆様、ありがとうございました〜!990点満点中193点の味。",
      "score":193,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 6,
      "guest": "「いなみん」と「むむ」",
      "title":"49日目のペペロン",
      "comment":"ゲストに同僚の「いなみん」と「むむ」。今日は良いアスパラが手に入ったので、1分間だけレンジでチンして、パスタと一緒にソースに絡めるぐらいの段階で投入した。シャキシャキとした歯ごたえと風味、甘みがペペロンチーノにとってもとってもとってもよく合う〜! 気分は高原。最近、ずっと1.9mmの麺を使っているんだけど、1.6か1.4ぐらいがペペロンには最適なんじゃないかと思ってきた。1.9は小麦の味がして美味しいんだけど、ちょっとダイナミックすぎる気がする。990点満点中、187点ぐらいの味。",
      "score":187,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 5,
      "guest": "映像クリエイターのゴウ・吉原氏",
      "title":"48日目のペペロン",
      "comment":"ゲストに映像クリエイターのゴウ・吉原氏。「ものすごくシンプルなペペロンチーノが食べたい」とのことだったので、ベーコンもタマネギもコンソメも入れない、本当にオリーブオイルと唐辛子とニンニクだけのペペロンチーノを作った。やはり、小細工なしで勝負すると料理の腕ってのがすぐ分かってしまう。一流の料理人は「お湯と塩だけで吸い物をつくる」という話を聞いたことがあるが、まだそこまでの領域に至ってないと再確認。ペペロンチーノは「貧者のパスタ」と呼ばれているらしい。それぐらい、旨味に乏しい料理なんだと思う。990点満点中、148点ぐらいの味だった。",
      "score":148,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 2,
      "guest": "あんな",
      "title":"47日目のペペロン",
      "comment":"ゲストに先日の彼氏募集がフィーバーした、あんな。いやー、ペペロンチーノの出来はどうでもいいとして、なかなか難しいねマッチングってのは…写真送ってくださいってお願いしたら合コンの飲み会の集合写真みたいなのを送ってきてくれた人がいるんだけど、それじゃ絶対に無理だから。自分に興味を持ってもらえるように、誠意が伝わるようにしないとダメだから。もっとカッコつけて、身だしなみ整えて、奇跡の1枚みたいな最高の写真を新しく撮って送ってきて欲しかった。恋愛ってのはライバルがいて、勝負なんだよ!楽して勝とうと思うな!(※すべて、あんなの意見です。僕の意見ではありません)990点満点中、214点。",
      "score":214,
    },
    {
      "year": 2017,
      "month": 6,
      "day": 1,
      "guest": "株式会社メイプルシステムズ代表の望月さん",
      "title":"46日目のペペロン",
      "comment":"ゲストに株式会社メイプルシステムズ代表の望月さん。「味を正当に評価したい」ここに来る前にうどんを食べてきたという望月さん。お腹が空いている状態だとなんでも美味しく感じてしまうから、わざわざ腹を満たしてきたらしい。気づかぬ内に味を評価されなければならない立場になっていた。そうだ。僕はもう素人じゃないんだ。これからは料理のプロとして戦っていかなければいけないんだ。竹内ペペロンチーノを一口食べ、望月さんは言った。「早く店を開いた方がいい」と。990点満点中187点の味だった。",
      "score":187,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 31,
      "guest": "ハーレーダビッドソンの田中さん",
      "title":"45日目のペペロン",
      "comment":"ゲストにハーレーダビッドソンの田中さん。今回はタマネギを半分先に炒めて、半分を最後の方に入れて「ダシ担当」と「食感担当」に分けて入れてみた。あと、ナスを最後に入れてみた。コンソメも入れた。超絶うまかった。それしか言いようがない。自分のペペロンチーノの才能、ノビシロに驚くばかりだ。料理は愛情ではない。料理は科学だ。ロジカルに研究を続けて、努力を重ねて、膨大な数の失敗と試行錯誤を繰り返した先にあるものだけが真実だ。ここから先は狂気の世界。狂気の世界で戦い続けることになる。160点満点中160点の味だった。",
      "score":160,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 26,
      "guest": "あんな",
      "title":"43日目 トマトとナスのペペロンチーノ",
      "comment":"諸事情によりタグ付けはしないけど、ゲストに「あんな」。なんでタグ付けしないのかっていうと、あんなは今、真剣に彼氏を募集しています。サッカー好きで一緒に観戦に行ってくださる方、あんなに会ってみませんか?気になる方はメッセージください。そんなヨタ話はさておき、トマトとナスのペペロンチーノを作ってみた。がっつりにんにく効かせて、トマトを絡ませて、たっぷりの唐辛子といただいたらそれはもう至福である。これ、今まで一番美味い。160点満点中150点の味だった。",
      "score":150,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 25,
      "guest": "株式会社CHUの皆さん",
      "title":"42日目のペペロン",
      "comment":"いいオフィスを借りてくれている株式会社CHUの皆さんがゲストで来てくれました!みなさん明るくて面白い!代表の奥様の肌が綺麗!「VR絡みのイベントを一緒にやりたいね」っていう話ができた。意図していなかったが、ペペロンを作り続けることで謎のコミュニケーションが生まれ、人生において良い流れがつくれてきている気がする。それと同時に、胃が限界まで荒れてきた。唐辛子の摂取量の目安は1日小さじ3分の1程度らしい。その2倍は摂取してる。どうしよう。あと最近、コンソメを入れるようにした。味にコクと深みが出る。こぶ茶よりもコンソメの方が良い気がする。160点満点中138点の味だった。",
      "score":138,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 23,
      "guest": "「nao.」と「なっちゃん」",
      "title":"41日目のペペロン",
      "comment":"ゲストに「nao.」と「なっちゃん」が来てくれました。(2人が同時に盛れてる写真がどうしても撮れなかったのでパコナオさんには諦めてもらった)なっちゃん、誕生日のケーキありがとう! よくよく考えたら、フルーツタルトを食べたのは生まれて初めてだったよ。今日のペペロンはかなり一般向けの出来栄えだった。辛さが控えめで、ちょうどよき。160点満点中、140点の味だった。",
      "score":140,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 22,
      "guest": "矢内さん",
      "title":"40日目 スタンダードな竹内ペペロンチーノ",
      "comment":"ゲストにパートナーシップリノベーターという謎の肩書き、矢内さん! 恋愛の伝導士である。本日のペペロン、なかなかソツなく仕上がった。青唐辛子、赤唐辛子、玉ねぎ、ベーコン。スタンダードな竹内ペペロンチーノ。燃え上がるようなカプサイシン、せめぎ合うアリシン、血栓や悪玉コレステロール改善作用による血流改善効果や、ビタミンB1と結合することでビタミンB1持続時間を高め疲労回復・集中力向上効果などが期待される至高の逸品である。160点満点中、141点の味。",
      "score":141,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 19,
      "guest": "天才デザイナー、みなこさん",
      "title":"39日目のペペロン",
      "comment":"ゲストにLIGの天才デザイナー、みなこさん。今日はいつになく唐辛子を入れすぎて(青も赤も)、超激辛仕様だったんだけど、自ら温泉卵をつくり中和していた。さすがみなこさん。あと、ちょっとにんにくの効きが足らなかったなぁ…130点満点中、107点ぐらいのでき。",
      "score":107,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 18,
      "guest": "株式会社フィードフォースの橋爪さん",
      "title":"38日目のペペロン",
      "comment":"ゲストに株式会社フィードフォースの橋爪さん。今日はにんにくが焦げるぐらい、フライパンを火にかけた。そしたら効いたな〜。 にんにくの香りってのは、焦げる時に出てるんだな、って思った。 しかも苦味は無かったし、これからは調理時間を短縮して火を強くできそう。さらに青唐辛子と赤唐辛子を両方いれることで、パスタの黄色と相まって信号機っぽい感じのペペロンチーノを再現することができた。良い辛さだった。橋爪さんから「へたな店よりよっぽど美味い」というありがたい言葉をいただいて、また一つ、自信につながった!130点満点中125点ぐらいの味。",
      "score":125,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 17,
      "guest": "LIGのしどうさんとfreeeの神野さん",
      "title":"37日目のペペロン",
      "comment":"ゲストにLIGのしどうさんとfreeeの神野さん!神野さんからfreeeのERPの営業をかけられそうになったので、「それは無理だがペペロンだったら喰わせてやる」みたいな失礼なことを言ったら「それでもいいから行く」みたいな流れになった。すごい人だな、って思った。でも、あわよくば付箋の会のスポンサーになってくれるんじゃね、って淡い期待を込めてしどうさんもランチに誘い、まさかの逆営業をかけさせてもらうに至る。そんな水面下でさまざまな策略が張り巡らされたペペロンランチだったが、しどうさんの「パンチの無い味」という一言に集約されるような出来栄えの微妙なパスタを3人で楽しく食べた。130点満点中87点ぐらいの味。にんにくが効かなかったな〜",
      "score":87,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 15,
      "guest": "",
      "title":"36日目のペペロン",
      "comment":"…正直、もう飽きてきた。胃も荒れてきたし、ペペロンを食べるのがキツい。茹でていると、パスタが「そんなに無理して食べなくて良いよ… そんな気持ちのまま食べても美味しくないでしょ?」って語りかけてきた。「ちくしょう… ちくしょう…」目に涙を浮かべながら口に運んだ36日目のペペロンチーノ。…美味い。なんなの。こんなドン底の気持ちでつくって、泣きながら食べて、それでもなお美味いのがペペロンチーノ。なんでもいい。手段は選ばない。「飽きる」って概念をくぐっちまうこと。味の女神はいつだって その先にしゃがみこんでいる。130点満点中、118点の味。",
      "score":118,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 12,
      "guest": "ランラン",
      "title":"35日目のペペロン",
      "comment":"ゲストにランラン。 恋せよ乙女。「にんにくも唐辛子も嫌いです」と言っていたが、ペペロンチーノは完食してた。これがメンヘラか… でも良かった、美味しかったみたいで。130点満点中、116点ぐらいの味だった。今度、スープカレーつくってもらおう…",
      "score":116,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 11,
      "guest": "河西さん達",
      "title":"34日目のペペロン",
      "comment":"ゲストに、長野でお世話になった河西さん達が来てくれた! お久しぶりです。まさか東京で河西さんにペペロンチーノをつくることになるとは、まったく予想できない未来だったな… Facebookってすごいな…今日は3人分ということで大量のパスタを茹でたけど、最終的に塩加減が難しかった。それでもなかなかの出来栄え!130点満点中、110点の味。 油がすごかった。",
      "score":110,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 10,
      "guest": "",
      "title":"33日目のペペロン",
      "comment":"今日はなんとも「まろみ」があるペペロンだった。パスタを茹でている間、暇だからずっと鍋をグルグルかき混ぜていたら必要以上に乳化が進んだみたい。ツルツル、というよりもトゥルトゥルしてた。ニンニクの香りもいつもより活きていて、辛味がもよく出ていて美味いゾ!美味いゾ!130点満点中、117点の味。 美味いゾ!",
      "score":117,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 8,
      "guest": "森川愛さん",
      "title":"32日目のペペロン",
      "comment":"ゲストにアーティスト・小説家の森川愛さん。先日の「財布落とした」投稿を見て、わざわざポールスミスの財布をプレゼントしてくださった!!!!! すごい!ペペロンチーノつくるだけなのに、良いのかな…? と思いつつ、最高のペペロンチーノをつくろうと決意。結果、特に代わり映えのない、普通のペペロンが完成。130点満点中、105点の味だった。森川さん、ありがとう!!!!! これからも応援しています!",
      "score":105,
    },
    {
      "year": 2017,
      "month": 5,
      "day": 1,
      "guest": "",
      "title":"31日目のペペロン",
      "comment":"ゴールデンウィークということもあり、ソロペペロンだった。青唐辛子とベーコンのシンプルなペペロンチーノ。さすがに31日目ともなると書くことが無くなってくるけど、今日のは最高に良い出来だった。 あと、3日ぶりに食べたせいか、ペペロン成分を美味しく感じる味蕾が発達しているように感じる。春はあけぼの やうやう白く なりゆくペペロン 少し辛くて、ニンニクの香りだちたるパスタの細くたなびきたる。130点満点中、107点の味だった。",
      "score":107,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 28,
      "guest": "",
      "title":"30日目のペペロン",
      "comment":"効率的なソースづくり。充実した具材。キャリアペペロンです。今日は久しぶりにソロペペロンだったけど、かなり上手にできた。具材の火の通り具合、麺の茹で加減、旨味、辛味。食戟のソーマだったら、女の服が全部脱げて「極上ーーー!」とか言いながらカラダからなんらかの汁を出すぐらいの味だった。ただ、わずかに塩味が足りなかった。ペペロンは塩の加減が非常に難しい。しかも、人間のカラダはその時の体調に応じて味の感じ方が違う。 甘いものが欲しい時は甘いものがより甘く、塩分が足りない時はしょっぱいものがよりしょっぱく感じる。なので、完璧な味加減など無理なのだ。130点満点中、111点の味だった。",
      "score":111,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 27,
      "guest": "ゲーム好きの飲み仲間(?)、岡持さん",
      "title":"29日目のペペロン",
      "comment":"ゲストにゲーム好きの飲み仲間(?)、岡持さん。今日はペペロンチーノに必要不可欠だと言われる「乳化」をしないでみた。 果たして本当に「乳化」は必要なのか?と以前から疑問があったからだ。結論、違いは分からなかった… 何なんだろう、乳化って…あと、青唐辛子ペペロンチーノにベーコン入れると美味しい。もはや青唐辛子はレギュラー出演にさせることにした。130点満点中、105点ぐらいの味!!!",
      "score":105,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 26,
      "guest": "「ふんどしマン」こと星野さん",
      "title":"28日目のペペロン",
      "comment":"ゲストに「ふんどしマン」こと星野さん。青唐辛子を買ってきてくれた張本人。おかげで新しい扉が開いた… もう青唐辛子無しではペペロン作れないぐらいに…今日は白ごまかけたら美味しかったけど、食感が悪くなるんだよなぁ… すりごまかなぁ…130点満点中、85点ぐらいの味だった。",
      "score":85,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 25,
      "guest": "ジロリアンで有名なきょうへい",
      "title":"27日目のペペロン",
      "comment":"ゲストにジロリアンで有名なきょうへい。ラーメン以外の麺もたまには食べるらしい。この日は青唐辛子を3本切って種ごとブチこんで、タマネギとシーチキンであえてみた。…これが超うまい! 青唐辛子は新鮮な辛さがあるのと、ピーマン的な役割も果たしてくれる。 ペペロンチーノに最適な食材って青唐辛子だったのでは?というぐらいのベストマッチ賞。掴んだぞ、オリジナルレシピ・ペペロンチーノ・サルバトゥーレ・ジェンティーレ130点満点中、105点の味。シーチキン、いらなかったかも。",
      "score":105,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 24,
      "guest": "はやちとしょごたん",
      "title":"26日目のペペロン",
      "comment":"はやちとしょごたん。ゲスト史上、もっともテンションが低い2人をお招きした。(でも、美味しいって言ってた。)今日の具はシーチキン、オニオン、ベーコンでごわす。にんにくはみじん切りと輪切り、両方入れた方が良さそうだな。めんどうくさがっていつもやらないけど、輪切りだけだとイマイチ香りが出ないように思える。その代わり、にんにくの塊がうまーなんだよな。 甘くて、ホクホクして。130点満点中、96点ぐらいの味。",
      "score":96,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 20,
      "guest": "360°撮影の申し子 手島さん",
      "title":"25日目のペペロン",
      "comment":"ゲストに手島さん。 VRとか360°撮影の申し子である手島さんとは、普段話せないことが話せるので勉強になる!というわけで本日のペペロンは昨日つくった辛いやつを再現してみたが、ぜんぜん上手にできなかったwwwwwマジうける、ゲストがくるとだいたい失敗するwwwwwなんか麺がくっついてダマになっちゃってた。原因はおそらく、乳化の際に入れたお湯の量が少なかったのと、茹で時間が足りなかったせいだと思われる。130点満点中、88点ぐらいの味。あと、写真の色味を適当にいじったらガチでマズそうになった。",
      "score":88,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 19,
      "guest": "",
      "title":"24日目のペペロン",
      "comment":"「1人ペペロンの時は異常に美味しく仕上がる」というジンクスができそうなくらい美味いのができてしまった。今回、一味唐辛子を加えて無理やりに辛くしてみたけど最高やな。ニンニク + オイル + 辛味 って最強の方程式なんじゃないかな。考えてみれば「蒙古タンメン中本」がそうだよね。辛さの中に美味さが光る。そんな一品。リクエスト次第ではお客様にもお出しできます。130点満点中、100点ぐらいの味。",
      "score":100,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 18,
      "guest": "ミシェル&ヴィクトリア",
      "title":"23日目のペペロン",
      "comment":"ゲストにミシェル&ヴィクトリアが来てくれた! 外人みたいな名前の日本人。今日は同僚がアスパラを恵んでくれたのでアスパラベーコン再び! パセリを切らせてしまい、サンキューパセリできなかった。 パセリ大事。あと、なんかオイルが上手く絡まなくって麺がザラザラしてた。原因は多分、お湯が完全に沸騰する前に麺を入れてしまったからだと思う。 反省。130点満点中、90点ぐらいの味。",
      "score": "90",
    },
    {
      "year": 2017,
      "month": 4,
      "day": 14,
      "guest": "",
      "title":"22日目のペペロン",
      "comment":"テストコメント5",
      "score":75,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 13,
      "guest": "",
      "title":"21日目のペペロン",
      "comment":"テストコメント5",
      "score":100,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 12,
      "guest": "",
      "title":"20日目のペペロン",
      "comment":"テストコメント5",
      "score":50,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 11,
      "guest": "よっしー",
      "title":"19日目のペペロン",
      "comment":"ゲストに「よっしー」! ハロウィンの呪いにかかってLIGを辞めた人です。元気そうで何より。さて、本日のペペロンは「キャベツとしらす」! しらすはほとんど火を通さず。キャベツは1分だけパスタと一緒に茹でた。でも、30秒ぐらいの方が良いな、多分。キャベツの歯ごたえと甘み、しらすの旨味と塩味がニンニクオイルと絡まって絶妙に合う! 新しい世界が開いた。飽きが来ない味。これはずっとイケるので看板メニューの仲間入りにしよう。あき(秋)は来ないが、春は来る。つまりはそういうことさ。130点満点中、95点の味だった。",
      "score":95,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 10,
      "guest": "「鳥くん」こと永井さん",
      "title":"18日目のペペロン",
      "comment":"ゲストに「鳥くん」こと永井さん! 色んな国に行った話と鳥の話が超おもしろかった。さすが。さて、今日のペペロンは慎重に、ミスらないように作った。途中で具材を取り出して焦げないようにしてから、また混ざる、みたいなテクニックも駆使して普通につくったけど、めっちゃ美味かった!!!100点満点中90点ぐらいの味!!そして、永井さんから超高級そうなオリーブオイルをもらった。やばい。いつも900mlで600円のやつだったのに、こんなオリーブオイルを使ったらどうなるんだろう…次回、ペペロン19日目 「もらったオイルはまだ開けない」 お楽しみに!",
      "score":90,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 7,
      "guest": "「ちゃんれみ」と「あらか」",
      "title":"17日目のペペロン",
      "comment":"ゲストに「ちゃんれみ」と「あらか」!麺が入った段階でパセリ、盛り付けた後、最後にパセリ、という感じで2段階にわけて入れてみたら見た目が良くなった。サンキューパセリ!あと、心なしか、一度に3人前くらいの量でつくった方が美味しい。多分なんだけど、沸かすお湯の量が関係している?100点満点中、88点ぐらいの味だった。",
      "score":88,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 6,
      "guest": "渋沢さん",
      "title":"16日目のペペロン",
      "comment":"ゲストに渋沢さん! 渋沢さんの話はいつもビックリするぐらい舞台の裏側が聞けて楽しい。さて、本日のペペロンには昆布茶を入れてみた〜! これは確かにすごい。 簡単にうまくなる。 塩加減が少し難しくなるので注意が必要だけど、すごい裏技だ…あと、イタリアンパセリも入れて見た目が若干UPした。100点満点中、87点ぐらいの出来だった。うまい。",
      "score":87,
    },
    {
      "year": 2017,
      "month": 4,
      "day": 4,
      "guest": "",
      "title":"15日目のペペロン",
      "comment":"今日はニンニクを包丁で傷つけてから入れてみた。この反骨精神でうまくなれよ、と。っていうのはジョークで、エキスでるかなって思って。あと、シーチキンいれたけど、イマイチだった!? さんまの方が美味いぞ。100点満点中、75点ぐらいの味だった。",
      "score":44,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 31,
      "guest": "のっち",
      "title":"14日目 たっぷりニンニクのペペロンチーノ",
      "comment":"ゲストでのっちが来てくれたー!世界を旅する、めっちゃ面白いライターさん。今日はニンニクをいつもの2倍にしてみた。香りがより強くでた気がする!!!あと、厚く切ったニンニクがホクホクとして甘みがあって、香ばしいジャガイモみたいな感じで美味しかった。とはいえ、そろそろチャレンジングなペペロンに挑戦したい。小さくまとまるな、はみ出せ。失敗を恐るな、はみ出せ。はみ出せ。100点満点中、78点ぐらいの味。",
      "score":78,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 30,
      "guest": "のんちゃん",
      "title":"13日目 アスパラとベーコンのペペロンチーノ",
      "comment":"ゲストにのんちゃん。ちなみに、のんちゃんは明日が最終出社なのでサヨナランチ。今日はアスパラ入れたー!皮がかたそうだったのでレンジでチンしてから。アスパラとベーコンってセットみたいなもんだよね。コショーもあらびき。シャキシャキして甘みがあるアスパラとペペロンはよく合う!100点満点中、81点ぐらいの味。これは将来、お店の看板メニューになるかも!?",
      "score":81,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 29,
      "guest": "こやにぃ",
      "title":"12日目 生パスタ風!?ペペロン",
      "comment":"ゲストにこやにぃ。今日は噂の「水にしばらく浸けると生パスタになる」という説を検証してみた。みんなが美味しいって言うから。1時間ほど浸けたところで「一蘭の替え玉」が誕生した。2分ほど茹でてペペロンチーノに。…生パスタ?これ、生パスタなのか?食感はビーフンに限りなく近い。乾麺の太さにもよるんだろうな…水に浸ける時間や茹でる時間を調整して正解を見つけたいと思う。100点満点中、60点の味だった。チャレンジ精神は大切にしたい。",
      "score":60,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 28,
      "guest": "つむつむ",
      "title":"11日目のペペロン",
      "comment":"ゲストにつむつむ。つむつむは美人の上に元ダンサーというすごい経歴の持ち主だ。今日はいつもめんどくさがってやらなかった「ニンニクの芯を抜く」をやってみた。結論、絶対にやるべき。変に苦味が出ないし、間違いなくやった方がいい。今日のは今まで一番美味しくできた。つむつむ曰く、「お店で900円で出せるやつ」ぐらいの出来栄えだった。100点満点中、75点!!!しかし、ここからさらに点数を上げるにはどうしたらいいのか…",
      "score":75,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 27,
      "guest": "いなみん",
      "title":"10日目 シンプル・イズ・ベーコンペペロン",
      "comment":"ゲストにいなみん。いなみんは「けものフレンズ」みたいな感じがして可愛い人だ。今日のペペロンは良くできた!フレンズをベーコンだけに絞るといったシンプルさが成功要因だったと思う。100点満点中、70点ぐらいの味。あと、長崎県壱岐島産の新鮮な野菜と鰆をいただいたので、サラダをつくった。鰆は焼いた。脂がジューシーでめちゃ美味い!正直、鰆という魚をこんなに美味いと思ったことは無い。壱岐島、最高。",
      "score":70,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 24,
      "guest": "佐々木 亮",
      "title":"9日目 さんまの和風ペペロンチーノ",
      "comment":"ゲストに佐々木 亮 (Ryo Sasaki)。今日は旨味を足すために「さんまの水煮」を投入し、さらに塩コショウでの味付けをせずに醤油を入れた。最後にオリーブオイルを上から追加でたらして、海苔をかけて完成。味は…最っ高だった。文句なく美味かった。日本の味だった。ニンニクもオリーブオイルも唐辛子も使っているけど、ぜんぜんペペロンチーノじゃない。これは別の食べ物ペペロンとしての評価は100点満点中、23点ぐらいの味。",
      "score":23,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 23,
      "guest": "",
      "title":"8日目のペペロン",
      "comment":"ゲストがいないと、恐ろしく地味な写真しか撮れないよなー、と思いつつ無駄に小物を横に置いてみた。さて、本日のペペロンは茹でる時に入れる塩を「あらじお」にしてみた。そっちの方が強い気がしたから。結果、しょっぱい感じになった。マジ、ビールが無いと辛いぐらい。全体的な味は安定してきてしまったので、明日は久しぶりに魚の缶詰やっちゃう。100点満点中、55点ぐらいの味だったー。",
      "score":55,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 22,
      "guest": "Moeko Kimura",
      "title":"7日目のペペロン",
      "comment":"ゲストにMoeko Kimura。今日はニンニクを少し細かく切って、いつもより少し時間をかけて調理。さらにパスタを普段より太い1.7mmにしたけど、そこまで違和感はなかった。鷹の爪の辛さがかなり良く出ていて、なかなかGood!もえこがタマネギ食べられないことを忘れてたが、むしろ早く食べられるようになれば良いのにな、って思った。100点満点中、64点ぐらいの味だった。",
      "score":64,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 21,
      "guest": "新城 真寿美",
      "title":"6日目のペペロン",
      "comment":"ゲストに新城 真寿美。にんにくを青森産の生のやつにした。あと、肉を入れた。さすがに美味しかったけど、もうちょい、ゆっくり低音で料理すればより美味しくなったと思われる!すみちゃんが「美味しい」「80点ぐらい!」って言ってた。普段からあんまり良いもの食べてないんだろうな。100点満点中、56点ぐらいの味だった。",
      "score":56,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 17,
      "guest": "",
      "title":"5日目 イワシのペペロン~しょうが風味~",
      "comment":"今日は、旨味を足すために「いわしの缶詰(ショウガ煮)」を入れてみた。…結論から言うと、めちゃくちゃ美味かった。イワシの臭みをニンニクの香りが包み、パスタ全体にコクのある旨味と缶詰のタレ独特の甘みが加わり、それを唐辛子がピリッとまとめてくれる。これを900円で提供してくれるレストランがあったら週3で通うレベル。見た目は悪い。あと、ぜんぜんペペロンチーノじゃなかった。味は最高だったけど、ペペロンとしての評価をするなら100点満点中、6点ぐらいの味。ショウガ煮だけに、しょーがにーな。",
      "score":6,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 16,
      "guest": "",
      "title":"4日目のペペロン",
      "comment":"「具が多すぎて皿うどんみたい」って言われたので、具をタマネギだけにしてみました。その代わりタマネギ増量。コクが出たのかな?いつもより美味しかった。100点満点中、45点ぐらいの味。明日は魚の缶詰入れるぞ。",
      "score":45,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 15,
      "guest": "",
      "title":"3日目のペペロン",
      "comment":"たくさんの方がコメントでアドバイスをくれたので、今日はその中の2つを実践してみた。1つが乳化。オイルに茹で汁を加えて攪拌させると粘性を帯びた乳化現象が起きるらしい。もう1つが、唐辛子を輪切りにせずに丸ごと一本入れるというもの。中の種は切って取り出した。さて、乳化の方なんだけど、どうも上手くいったのかいかなかったのか分からない。なんとなく、いつもよりはソースっぽい感じにはなったか?唐辛子の方は良い感じに辛味が出た。あと、食べ終わった時にツヤツヤの唐辛子が残るのが「ペペロン食べた感」があって良いと思った。これまでの中では一番美味しかったけど、まだまだの味だった。100点満点中、32点ぐらいの味。",
      "score":32,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 14,
      "guest": "",
      "title":"2日目のペペロン",
      "comment":"昨日はニンニクの香りが全然つかなかったので、今日は乾燥ニンニクを粉々に砕いてみた。しかも多めに。これが大失敗であっという間に焦げてしまい、苦味に。そして、肝心のオイルにはニンニクの香りが少しも移っていない。こんなのペペロンチーノじゃない。100点満点中、5点ぐらいの味。",
      "score":5,
    },
    {
      "year": 2017,
      "month": 3,
      "day": 13,
      "guest": "",
      "title":"1日目のペペロン",
      "comment":"3月13日。乾燥にんにくと適当に切った野菜をオリーブオイルで炒め、茹でたパスタを投入。塩コショウで適当に味付けをした。あんまり美味しくなかった。100点満点中、27点ぐらいの味。",
      "score":27,
    }
];
var comment_data = {
  "evaluate": {
    "very_good":[
       "どんどん上達している。私を超える日近い" ,
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。" ,
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。"
    ],
    "good":[
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。" ,
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。" ,
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。"
    ],
    "nomal":[
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。" ,
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。" ,
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。"
    ],
    "bad":[
       "先週に比べると" ,
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。" ,
       "先週に比べて平均点がアップしているようだ。<br>だがしかし、まだまだ先は長い。"
    ]
  }
};
$(function(){
  // アイキャッチ表示
  photoStream("#photo-stream-wrap","#photo-stream",pprn_data);

  //$("week-score-comment").prepend(week_score_comment);

  // キャンバスのレスポンシブ対応
  var canvas_container_ele = $('.canvas-container');
  var canvas_ele = $('.canvas');
  resizeCanvas(canvas_ele,canvas_container_ele);
  $(window).on('resize', resizeCanvas(canvas_ele,canvas_container_ele));

  //ペペロン日和表示
  var feed_content = display_feed("#feed-list",2);
  feed_content();
  $("#btn-more-feed").on("click",feed_content);

  //ゲストリスト表示
  getGuestList("#guest-name-list");
});

//////////////////////////////////////////////////////////
// アイキャッチ
function photoStream(disp_containar,disp_target,data_array){
  var $ps_wrap = $(disp_containar);
  var $ps_target = $(disp_target);
  var item_total_num = data_array.length;

  // 表示領域の高さをウィンドウサイズに合わす。
  getWindowHeight();
  $(window).resize(getWindowHeight);

  for(var i = 0 ; i <= item_total_num; i++){
    var itemHtml = "<div class='ps-item ps-item"+ i +"'><img src='http://megaphone.tokyo/pprpimages/" + i + ".jpg'></div>";
    var delay_time = Math.floor( Math.random() * 1000 ) * 5 ;
    //console.log(delay_time);
    prependPhoto(itemHtml);
  }
  function prependPhoto(itemHtml){
    setTimeout(function(){
      $(itemHtml).appendTo($ps_target).hide().fadeIn("slow");
    }, delay_time);
  }
  function getWindowHeight(){
    var window_height =  $(window).height();
    $ps_wrap.height(window_height);
  };
  function rumdomDisplayItem(){
    $(itemHtml).appendTo($ps_target).hide().fadeIn(300);
  }
}

//////////////////////////////////////////////////////////
// キャンバスのレスポンシブ対応
function resizeCanvas(canvas_ele,canvas_container_ele){
  canvas_ele.outerWidth(canvas_container_ele.width());
  canvas_ele.outerHeight(canvas_container_ele.width() * 1.0);
}

//////////////////////////////////////////////////////////
// フィードの表示
function display_feed(disp_target,disp_num){
  var loop_num = 0;
  var my_disp_num = disp_num; //現在どこまで表示しているか保持

  return function(disp_num){
    // console.log("loop_num");
    // console.log(loop_num);
    // console.log("my_disp_num");
    // console.log(my_disp_num);

    var feed_html = "";
    var data_size = pprn_data.length;

    for( loop_num; loop_num <= my_disp_num; loop_num++){
        // 追加するHTMLを整形
        feed_html += "<div class='feed-" + loop_num + "'>"
        feed_html += "<div class='feed-caption'>" + pprn_data[loop_num].year + "年" + pprn_data[loop_num].month + "月" + pprn_data[loop_num].day + "日</div>";
        if( pprn_data[loop_num].guest !== "" ){
          feed_html += "<div class='feed-guest'><span>Guest:</span>" + pprn_data[loop_num].guest + "</div>";
        }else{
          feed_html += "<div class='feed-guest'><span>ソロペペロン</span></div>";
        }        feed_html += "<h3>" + pprn_data[loop_num].title + "</h3>";
        feed_html += "<img src='http://megaphone.tokyo/pprpimages/"+ parseInt(loop_num+1) +".jpg'>";
        //データには改行なしでコメントが入っているので、「。」のところに改行を挿入
        var format_comment = pprn_data[loop_num].comment.replace( /。/g , "。<br>" ) ;
        feed_html += "<p>" + format_comment + "</p>";
        feed_html += "</div>"

        // console.log("loop_num");
        // console.log(loop_num);
        // console.log(feed_html);

        $(feed_html).appendTo(disp_target).hide().fadeIn(300);
        //初期化
        feed_html = "";

        if( loop_num >= my_disp_num ){
          loop_num++;
          my_disp_num += my_disp_num;
          break;
        }
    }
  }
}

//////////////////////////////////////////////////////////
// データから重複を除いたゲストリストを disp_target_ele に表示
function getGuestList(disp_target_ele){
  var guest_list =[];

  for(var key in pprn_data){
    // ゲストのデータを抽出
    if( pprn_data[key].guest !== "" ){
      guest_list.push(pprn_data[key].guest);
    }
    // 重複を除去
    guest_list = guest_list.filter(function (x, i, self) {
          return self.indexOf(x) === i;
    });
  };
  // 表示
  for(var key in guest_list){
    $(disp_target_ele).prepend('<li>'+ guest_list[key] +'</li>')
  }
}
var all_data = $.extend(true, {}, pprn_data);

var pprn_data_whole_period = associative_array_sort(pprn_data,"month","day");

// var sort_score_pprn = associative_array_sort(pprn_data,"score","month");

var total_date = pprn_data.length + 1;
var total_avscore = get_average_score(pprn_data);

//今週のデータ
var pprn_data_weekly = get_weekly_data(all_data,0);

//先週のデータ
var pprn_data_weekly_1ago = get_weekly_data(all_data,1);

//平均点の取得
var pprn_data_weekly_avscore = get_average_score(pprn_data_weekly);
var pprn_data_weekly_avscore_1ago = get_average_score(pprn_data_weekly_1ago);

var peperon_level = Parselevel(pprn_data_weekly_avscore);

//グラフの描画
var week_op = {
                atasets: [
                  {
                      label: "紳さんのぺペロン日和",
                      backgroundColor: "rgba(255,255,255,0.5)",
                      fillColor: "rgba(242,218,232,0.6)",
                      strokeColor: "rgba(220,220,220,1)",
                      pointColor: "rgba(220,220,220,1)",
                      pointStrokeColor: "#fff",
                      pointHighlightFill: "#fff",
                      pointHighlightStroke: "rgba(220,220,220,1)",
                      data: []
                  }
                ]
              }


lineChatDrow(pprn_data_weekly,week_op,"week-score","week");

var all_chart_option = {
                atasets: [
                  {
                      label: "紳さんのぺペロン日和",
                      backgroundColor: "rgba(255,255,255,0.5)",
                      fillColor: "rgba(242,218,232,0.6)",
                      strokeColor: "rgba(220,220,220,1)",
                      pointColor: "rgba(220,220,220,1)",
                      pointStrokeColor: "#fff",
                      pointHighlightFill: "#fff",
                      pointHighlightStroke: "rgba(220,220,220,1)",
                      data: []
                  }
                ]
              }

lineChatDrow(pprn_data_whole_period,all_chart_option,"whole-period","all");

$(function(){

  var total_date = pprn_data.length + 1;
  var total_array_num = parseInt(pprn_data.length - 1);
  console.log("数");
  console.log(total_array_num);
  // 最新のペペロン表示
  var new_pprn_info = {
    date: pprn_data[total_array_num].month + "/" + pprn_data[total_array_num].day,
    title: pprn_data[total_array_num].title,
    score: pprn_data[total_array_num].score,
    image: "<img src='http://megaphone.tokyo/pprpimages/"+ total_date +".jpg' alt=''></div>",
    comment: pprn_data[total_array_num].comment.replace( /。/g , "。<br>" ) ,
  }

  //最新のペペロン表示
  $("#new-score-date").prepend(new_pprn_info.date);
  $("#new-score-title").prepend(new_pprn_info.title);
  $("#new-score").prepend(new_pprn_info.score);
  $("#new-score-image").prepend(new_pprn_info.image);
  $("#new-score-comment").prepend(new_pprn_info.comment);

  //今週のペペロン表示
  $("#week-score-average").text(pprn_data_weekly_avscore);
  $("#week-score-average-1ago").text(pprn_data_weekly_avscore_1ago);

  //これまでのペペロン表示
  $(".total-date").text(total_date);
  $(".total-level").text(peperon_level);
  $(".total-average span").text(total_avscore);
  $(".total-top-score span").text(peperon_level);

});
//////////////////////////////////////////////////////////
// データ取得用関数
// 週単位のデータ取得
function get_weekly_data(score_data,ago_week_num){
  var weekly_data =[];
  start_day_num = ago_week_num * 7;
  end_day_num = (ago_week_num + 1 ) * 7 - 1 ;
  // console.log(start_day_num);
  // console.log(end_day_num);

  for( var i = start_day_num; i <= end_day_num; i++ ){
    weekly_data[i] = score_data[i];
  }
  sort_weekly_data = associative_array_sort(weekly_data,"month","day");

  return sort_weekly_data;
}

// 最新7日のデータ取得
// function get_monthly_data(score_data){
// }

function Parselevel(average_score){
  var level;
  console.log("level");
  console.log(average_score);
  level = Math.floor(average_score/10);

  return level;
}

//////////////////////////////////////////////////////////
// 配列のソートを連想配列のキーで、古い順にする。
function associative_array_sort(target_array,key_primary,key_secondary){
  target_array.sort((a, b) => a[key_primary] - b[key_primary] || a[key_secondary] - b[key_secondary]);
  return target_array;
}
//////////////////////////////////////////////////////////
// 平均点の取得
function get_average_score(data_array){
  var scores = [];
  var sum = 0;
  var average_score;

  Object.keys(data_array).forEach(function (key) {
      scores.push(data_array[key].score);
  });
  for (var i = 0; i < scores.length; i++) {
    sum += parseInt(scores[i]);
  }
  average_score = Math.floor(sum / scores.length);

  return average_score;
}

//////////////////////////////////////////////////////////
// チャート描画用の関数
// 線チャートの描画
function lineChatDrow(score_data,graph_options,disp_target_id,disp_type) {
  var ctx = document.getElementById(disp_target_id).getContext("2d");

  var options = {
    scaleOverride : true,
    scaleSteps : 10,
    scaleStepWidth : 100,
    scaleStartValue : 0,
    scaleLabel: "<%=value%> 点",
    responsive: true
  };

  var data = {
      labels: [],
      datasets: [
          {
              label: "紳さんのぺペロン日和",
              backgroundColor: "rgba(255,255,255,0.5)",
              fillColor: "rgba(242,218,232,0.6)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: []
          }
      ]
  };

  Object.keys(score_data).forEach(function (key) {
      var date = score_data[key].month + "/" + score_data[key].day;
      data.labels.push(date);
      data.datasets[0].data.push(score_data[key].score);
  });

  new Chart(ctx).Line(data, options);
}
              
            
!
999px

Console