CR5で体験する初めてのWebアプリケーション

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
Content Repository 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
Content Repository 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
Content Repository 5を活用すれば
JavaScriptだけで、簡単・迅速に作れる
設計 作成
配信
実行

14. 配信
14
Content Management Toolsを使って
アップロードする
サンプルファイルをダウンロードできます
SourceForge.netのダウンロードページ
http://sourceforge.net/projects/morpho/files/examples/helloapp.zip/download

15. ウェブアプリの作り方
15
Content Repository 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. 20
http://www.mintjams.co.jp/