k-motoyan/app.css

## app.css
@font-face {
  font-family: "uzura";
  src: url(../fonts/uzura.ttf) format("truetype");
}

@font-face {
  font-family: "ohisama";
  src: url(../fonts/OhisamaFont11.ttf) format("truetype");
}

html, body {
  font-family: "ohisama";
  width: 100%;
}

#header h1 {
  font-family: "uzura";
  padding: 0 5%;
}

#header p {
  font-weight: bolder;
  padding: 0 5%;
}

#word-form {
  margin: 10px 10%;
}

#word-form h1 {
  margin-bottom: 25px;
}

#word-result {
  margin: 10px 10%;
}

#word-result h1 {
  margin-bottom: 25px;
}

#word-result ul {
  font-family: 'arial black';
}

#footer {
  border-top: 1px solid #ccc;
  margin: 25px 2% 0 2%;
  padding-top: 6px;
}

.word {
  font-family: 'arial black';
  font-size: 2em;
  height: 100px;
  text-align: center;
  width: 100px;
}

## app.js
(function() {
  var mc = new MilkCocoa('https://xxxxxxxxxxxx/');
  var DataStore = mc.dataStore('make-word');

  var ViewModel = {
    word1: ko.observable(''),
    word2: ko.observable(''),
    word3: ko.observable(''),
    word4: ko.observable(''),
    words: ko.observableArray(),
    inputCheck: function() {
      if (
        typeof this.word1() !== 'undefined' && this.word1().length > 0 &&
        typeof this.word2() !== 'undefined' && this.word2().length > 0 &&
        typeof this.word3() !== 'undefined' && this.word3().length > 0 &&
        typeof this.word4() !== 'undefined' && this.word4().length > 0
      ) {
        return true;
      }
      return false;
    },
    wordClear: function() {
      var new_word = this.word1() + this.word2() + this.word3() + this.word4();
      this.words.push({ result: new_word });
      this.word1('');
      this.word2('');
      this.word3('');
      this.word4('');
    },
    subscrive1: function() {
      if (this.word1().length > 0) DataStore.push({ word1: this.word1() });
    },
    subscrive2: function() {
      if (this.word2().length > 0) DataStore.push({ word2: this.word2() });
    },
    subscrive3: function() {
      if (this.word3().length > 0) DataStore.push({ word3: this.word3() });
    },
    subscrive4: function() {
      if (this.word4().length > 0) DataStore.push({ word4: this.word4() });
    },
    subscrive: function() {
      if (this.inputCheck()) this.wordClear();
    }
  };

  window.onload = function() {
    ko.applyBindings(ViewModel);
    DataStore.on('push', function(data){
      data.value.word1 && ViewModel.word1(data.value.word1) && ViewModel.subscrive();
      data.value.word2 && ViewModel.word2(data.value.word2) && ViewModel.subscrive();
      data.value.word3 && ViewModel.word3(data.value.word3) && ViewModel.subscrive();
      data.value.word4 && ViewModel.word4(data.value.word4) && ViewModel.subscrive();
    });
  }
})();

## index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/app.css">
  <meta charset="utf8">
  <title>MakeWord</title>
</head>

<body>
  <div id="header">
    <div class="jumbotron">
      <h1>めいくわぁど</h1>
      <p>みんなで１文字ずつ入力して言葉を作ってみよう！</p>
    </div>
  </div>

  <div id="main" class="container">
    <div class="row">
      <section id="word-form">
        <h1>枠の中に文字を入力しよう</h1>
        <div class="col-md-3">
          <input type="text" id="word1" class="word" data-bind="value: word1, event: { change: subscrive1 }">
        </div>
        <div class="col-md-3">
          <input type="text" id="word2" class="word" data-bind="value: word2, event: { change: subscrive2 }">
        </div>
        <div class="col-md-3">
          <input type="text" id="word3" class="word" data-bind="value: word3, event: { change: subscrive3 }">
        </div>
        <div class="col-md-3">
          <input type="text" id="word4" class="word" data-bind="value: word4, event: { change: subscrive4 }">
        </div>
      </section>

      <section id="word-result">
        <div class="col-md-12">
          <h1>できた言葉</h1>
          <ul data-bind="foreach: words">
            <li data-bind="text: result"></li>
          </ul>
        </div>
      </section>
    </div>
  </div>

  <div id="footer">
    <p class="text-center text-muted">(c) 2014 k-motoyan</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
  <script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
  <script src="assets/js/app.js"></script>
</body>

</html>
	@font-face {
	font-family: "uzura";
	src: url(../fonts/uzura.ttf) format("truetype");
	}

	@font-face {
	font-family: "ohisama";
	src: url(../fonts/OhisamaFont11.ttf) format("truetype");
	}

	html, body {
	font-family: "ohisama";
	width: 100%;
	}

	#header h1 {
	font-family: "uzura";
	padding: 0 5%;
	}

	#header p {
	font-weight: bolder;
	padding: 0 5%;
	}

	#word-form {
	margin: 10px 10%;
	}

	#word-form h1 {
	margin-bottom: 25px;
	}

	#word-result {
	margin: 10px 10%;
	}

	#word-result h1 {
	margin-bottom: 25px;
	}

	#word-result ul {
	font-family: 'arial black';
	}

	#footer {
	border-top: 1px solid #ccc;
	margin: 25px 2% 0 2%;
	padding-top: 6px;
	}

	.word {
	font-family: 'arial black';
	font-size: 2em;
	height: 100px;
	text-align: center;
	width: 100px;
	}
	(function() {
	var mc = new MilkCocoa('https://xxxxxxxxxxxx/');
	var DataStore = mc.dataStore('make-word');

	var ViewModel = {
	word1: ko.observable(''),
	word2: ko.observable(''),
	word3: ko.observable(''),
	word4: ko.observable(''),
	words: ko.observableArray(),
	inputCheck: function() {
	if (
	typeof this.word1() !== 'undefined' && this.word1().length > 0 &&
	typeof this.word2() !== 'undefined' && this.word2().length > 0 &&
	typeof this.word3() !== 'undefined' && this.word3().length > 0 &&
	typeof this.word4() !== 'undefined' && this.word4().length > 0
	) {
	return true;
	}
	return false;
	},
	wordClear: function() {
	var new_word = this.word1() + this.word2() + this.word3() + this.word4();
	this.words.push({ result: new_word });
	this.word1('');
	this.word2('');
	this.word3('');
	this.word4('');
	},
	subscrive1: function() {
	if (this.word1().length > 0) DataStore.push({ word1: this.word1() });
	},
	subscrive2: function() {
	if (this.word2().length > 0) DataStore.push({ word2: this.word2() });
	},
	subscrive3: function() {
	if (this.word3().length > 0) DataStore.push({ word3: this.word3() });
	},
	subscrive4: function() {
	if (this.word4().length > 0) DataStore.push({ word4: this.word4() });
	},
	subscrive: function() {
	if (this.inputCheck()) this.wordClear();
	}
	};

	window.onload = function() {
	ko.applyBindings(ViewModel);
	DataStore.on('push', function(data){
	data.value.word1 && ViewModel.word1(data.value.word1) && ViewModel.subscrive();
	data.value.word2 && ViewModel.word2(data.value.word2) && ViewModel.subscrive();
	data.value.word3 && ViewModel.word3(data.value.word3) && ViewModel.subscrive();
	data.value.word4 && ViewModel.word4(data.value.word4) && ViewModel.subscrive();
	});
	}
	})();
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/app.css">
	<meta charset="utf8">
	<title>MakeWord</title>
	</head>

	<body>
	<div id="header">
	<div class="jumbotron">
	<h1>めいくわぁど</h1>
	<p>みんなで１文字ずつ入力して言葉を作ってみよう！</p>
	</div>
	</div>

	<div id="main" class="container">
	<div class="row">
	<section id="word-form">
	<h1>枠の中に文字を入力しよう</h1>
	<div class="col-md-3">
	<input type="text" id="word1" class="word" data-bind="value: word1, event: { change: subscrive1 }">
	</div>
	<div class="col-md-3">
	<input type="text" id="word2" class="word" data-bind="value: word2, event: { change: subscrive2 }">
	</div>
	<div class="col-md-3">
	<input type="text" id="word3" class="word" data-bind="value: word3, event: { change: subscrive3 }">
	</div>
	<div class="col-md-3">
	<input type="text" id="word4" class="word" data-bind="value: word4, event: { change: subscrive4 }">
	</div>
	</section>

	<section id="word-result">
	<div class="col-md-12">
	<h1>できた言葉</h1>
	<ul data-bind="foreach: words">
	<li data-bind="text: result"></li>
	</ul>
	</div>
	</section>
	</div>
	</div>

	<div id="footer">
	<p class="text-center text-muted">(c) 2014 k-motoyan</p>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
	<script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
	<script src="assets/js/app.js"></script>
	</body>

	</html>