CR5とJavaSc r ipt による 
ウェブアプリの作り方 
Ver.1.2 | 全20枚 
Copyright © 2014 MintJams Inc. All Rights Reserved
はじめに 
対象 
– ウェブブラウザで動くJavaScriptが書ける人 
準備するもの 
– Content Repository 5.5以降 
– Content Management Tools Standard 3.7以降 
2 
インストール方法については 
Getting Startedを参照してください 
www.slideshare.net/mintjams/getting-started-31643179
ウェブアプリの作り方 
3 
Content Repository 5を活用すれば 
JavaScriptだけで、簡単・迅速に作れる 
設計 作成 
配信 実行
設計 
4 
入力された名前を表示する、 
単純なウェブアプリを作る 
入力 HTTP(POST)通信 
名前を入力する 送信 
名前を表示する 
出力
設計 | 入力フォーム 
5 
名前を入力する 送信 名前を表示する 
 標準的なHTMLフォームにする 
 名前を入力するテキストボックスと 
送信ボタンを配置する
設計 | 入力フォームの送信 
6 
名前を入力する 送信 名前を表示する 
 HTMLフォームの標準機能を使って 
POST送信する
設計 | 送信データの表示 
7 
名前を入力する 送信 名前を表示する 
 サーバ側でJavaScr iptを実行して、 
HTMLに名前を出力する 
 サーバ側でJavaScr iptを実行する方法は 
以下の2通り 
HTMLに直接 
JavaScriptを書く 
テンプレートを使用して 
スクリプトエンジンで実行 
今回はこちらを使用
設計 | ページ遷移図 
8 
入力ページ 送信 表示ページ 
index.html hello.html 
入力された名前を表示する、 
単純なウェブアプリを作る
ウェブアプリの作り方 
9 
Content Repository 5を活用すれば 
JavaScriptだけで、簡単・迅速に作れる 
設計 作成 
配信 実行
作成 | 入力フォーム 
< f o rm a c t i o n = " h e l l o . h t ml " me t h o d = " p o s t " > 
< d i v > 
<input t ype=" t e x t " name="h e l lo"> 
< s p a n > テキストを入力して、送信ボタンを・・・< / s p a n > 
< / d i v > 
< d i v > 
< i n p u t t y p e = " s u bmi t " n ame = " s e n d " v a l u e = " 送信" > 
< i n p u t t y p e = " r e s e t " n a me = " r e s e t " v a l u e = " リセット" > 
< / d i v > 
< / f o rm> 
10 
名前を入力する 送信 名前を表示する 
index.html
作成 | 入力フォームの送信 
名前を入力する 送信 
<form a c t ion="h e l lo.h tml " me thod="pos t "> 
< d i v > 
< i n p u t t y p e = " t e x t " n a me = " h e l l o " > 
< s p a n > テキストを入力して、送信ボタンを・・・< / s p a n > 
< / d i v > 
< d i v > 
< i n p u t t y p e = " s u bmi t " n ame = " s e n d " v a l u e = " 送信" > 
< i n p u t t y p e = " r e s e t " n a me = " r e s e t " v a l u e = " リセット" > 
< / d i v > 
< / f o rm> 
11 
名前を表示する 
index.html
作成 | 送信データの表示 
名前を入力する 名前を表示する 
< p > 
こんにちは、 
<s c r ipt runa t="s e r v e r "> 
document .wr i t e ( r eque s t .ge t E s c aped ( "h e l lo" ) ) ; 
</ s c r ipt> 
さん< / p > 
12 
送信 
hello.html
ウェブアプリの作り方 
13 
Content Repository 5を活用すれば 
JavaScriptだけで、簡単・迅速に作れる 
設計 作成 
配信 
実行
配信 
14 
Content Management Toolsを使って 
アップロードする 
サンプルファイルをダウンロードできます 
SourceForge.netのダウンロードページ 
http://sourceforge.net/projects/morpho/files/examples/helloapp.zip/download
ウェブアプリの作り方 
15 
Content Repository 5を活用すれば 
JavaScriptだけで、簡単・迅速に作れる 
設計 作成 
実行 
配信
実行 | 入力フォーム 
16 
名前を入力する 送信 名前を表示する 
アプリケーションにアクセスして名前を入力 
http://localhost:8080/content/cr5/default/
実行 | 入力フォームの送信 
17 
名前を入力する 送信 名前を表示する 
送信ボタンをクリック
実行 | 送信データの表示 
18 
名前を入力する 送信 名前を表示する 
名前が表示される
おわりに 
19 
この資料をお読みいただいた皆様、ありがとうございました。 
JavaScriptで作るウェブアプリケーションは、楽しんで頂けましたでしょうか。 
MintJams Content Repository 5 (CR5)は、コンテンツ駆動型のウェブプラット 
フォームです。RDBを意識せずに、コンテンツベースのアプリケーションを簡単 
に構築することができます。BSDライセンスで配布されていますので、さまざま 
な案件でご活用頂ければと思います。 
CR5に関するご質問等がありましたら、お問い合わせフォームよりお気軽にお問 
い合わせください。 
皆様のご活躍とご検討をお祈りしております。 
MintJams Inc.
20 
http://www.mintjams.co.jp/

CR5とJavaScriptによるウェブアプリの作り方

  • 1.
    CR5とJavaSc r iptによる ウェブアプリの作り方 Ver.1.2 | 全20枚 Copyright © 2014 MintJams Inc. All Rights Reserved
  • 2.
    はじめに 対象 –ウェブブラウザで動くJavaScriptが書ける人 準備するもの – Content Repository 5.5以降 – Content Management Tools Standard 3.7以降 2 インストール方法については Getting Startedを参照してください www.slideshare.net/mintjams/getting-started-31643179
  • 3.
    ウェブアプリの作り方 3 ContentRepository 5を活用すれば JavaScriptだけで、簡単・迅速に作れる 設計 作成 配信 実行
  • 4.
    設計 4 入力された名前を表示する、 単純なウェブアプリを作る 入力 HTTP(POST)通信 名前を入力する 送信 名前を表示する 出力
  • 5.
    設計 | 入力フォーム 5 名前を入力する 送信 名前を表示する  標準的なHTMLフォームにする  名前を入力するテキストボックスと 送信ボタンを配置する
  • 6.
    設計 | 入力フォームの送信 6 名前を入力する 送信 名前を表示する  HTMLフォームの標準機能を使って POST送信する
  • 7.
    設計 | 送信データの表示 7 名前を入力する 送信 名前を表示する  サーバ側でJavaScr iptを実行して、 HTMLに名前を出力する  サーバ側でJavaScr iptを実行する方法は 以下の2通り HTMLに直接 JavaScriptを書く テンプレートを使用して スクリプトエンジンで実行 今回はこちらを使用
  • 8.
    設計 | ページ遷移図 8 入力ページ 送信 表示ページ index.html hello.html 入力された名前を表示する、 単純なウェブアプリを作る
  • 9.
    ウェブアプリの作り方 9 ContentRepository 5を活用すれば JavaScriptだけで、簡単・迅速に作れる 設計 作成 配信 実行
  • 10.
    作成 | 入力フォーム < f o rm a c t i o n = " h e l l o . h t ml " me t h o d = " p o s t " > < d i v > <input t ype=" t e x t " name="h e l lo"> < s p a n > テキストを入力して、送信ボタンを・・・< / s p a n > < / d i v > < d i v > < i n p u t t y p e = " s u bmi t " n ame = " s e n d " v a l u e = " 送信" > < i n p u t t y p e = " r e s e t " n a me = " r e s e t " v a l u e = " リセット" > < / d i v > < / f o rm> 10 名前を入力する 送信 名前を表示する index.html
  • 11.
    作成 | 入力フォームの送信 名前を入力する 送信 <form a c t ion="h e l lo.h tml " me thod="pos t "> < d i v > < i n p u t t y p e = " t e x t " n a me = " h e l l o " > < s p a n > テキストを入力して、送信ボタンを・・・< / s p a n > < / d i v > < d i v > < i n p u t t y p e = " s u bmi t " n ame = " s e n d " v a l u e = " 送信" > < i n p u t t y p e = " r e s e t " n a me = " r e s e t " v a l u e = " リセット" > < / d i v > < / f o rm> 11 名前を表示する index.html
  • 12.
    作成 | 送信データの表示 名前を入力する 名前を表示する < p > こんにちは、 <s c r ipt runa t="s e r v e r "> document .wr i t e ( r eque s t .ge t E s c aped ( "h e l lo" ) ) ; </ s c r ipt> さん< / p > 12 送信 hello.html
  • 13.
    ウェブアプリの作り方 13 ContentRepository 5を活用すれば JavaScriptだけで、簡単・迅速に作れる 設計 作成 配信 実行
  • 14.
    配信 14 ContentManagement Toolsを使って アップロードする サンプルファイルをダウンロードできます SourceForge.netのダウンロードページ http://sourceforge.net/projects/morpho/files/examples/helloapp.zip/download
  • 15.
    ウェブアプリの作り方 15 ContentRepository 5を活用すれば JavaScriptだけで、簡単・迅速に作れる 設計 作成 実行 配信
  • 16.
    実行 | 入力フォーム 16 名前を入力する 送信 名前を表示する アプリケーションにアクセスして名前を入力 http://localhost:8080/content/cr5/default/
  • 17.
    実行 | 入力フォームの送信 17 名前を入力する 送信 名前を表示する 送信ボタンをクリック
  • 18.
    実行 | 送信データの表示 18 名前を入力する 送信 名前を表示する 名前が表示される
  • 19.
    おわりに 19 この資料をお読みいただいた皆様、ありがとうございました。 JavaScriptで作るウェブアプリケーションは、楽しんで頂けましたでしょうか。 MintJams Content Repository 5 (CR5)は、コンテンツ駆動型のウェブプラット フォームです。RDBを意識せずに、コンテンツベースのアプリケーションを簡単 に構築することができます。BSDライセンスで配布されていますので、さまざま な案件でご活用頂ければと思います。 CR5に関するご質問等がありましたら、お問い合わせフォームよりお気軽にお問 い合わせください。 皆様のご活躍とご検討をお祈りしております。 MintJams Inc.
  • 20.