E71：MWSチュートリアル

Last-modified: 2013-08-24 (土) 02:14:21 (3892d)

Top / E71：MWSチュートリアル

E71：MWSチュートリアル †

MWSでの静的、動的コンテンツの作成について、やってみた記録をのこします。

ちなみに、この記事は、

Mobile Web Server : How to Develop Content

という文書を元に作成してます。

上述の文書はNokiaForum?からDLできます。

http://www.forum.nokia.com/info/sw.nokia.com/id/25e274f6-9d64-42a9-b1a8-0bf46f5e3d62/Mobile_Web_Server_How_to_Develop_Content_v1_0_en.pdf.html

ちょっと古いけど、MWSを導入してから一番最初に読む、やるにはちょうどいい内容となってます。

フランクに和訳的な内容となるよう頑張ってみてます笑

※大体同じことをやりますが、一部内容が異なる部分がありますのでご注意ください。

E71：MWSチュートリアル
イントロダクション
静的デモページ作成（static web page）
- JavaScriptを利用
  - Pythonによる動的デモページ作成

↑

イントロダクション †

まあ、これを読めば、MWSでのコンテンツってこんな感じで作りますよ〜って雰囲気がわかります。

MWSでは、静的コンテンツに加え、mod_python（Python Module）をつかった動的コンテンツも公開できます。

↑

Content Examples †

この文書ではベーシックな静的ページ、動的ページのデモを紹介します。

デモでは7つのファイルを作成します。

静的ページのデモでは以下のファイルを作成します。

demo.html　ー　基本的なhtmlファイル
demo2.html　ー　JavaScript?を使用したhtmlファイル
ht.acl　ー　公開フォルダのアクセスリスト設定ファイル（ベーシック認証で利用）
demo.jpg　ー　デモで使用する画像ファイル

動的ページのデモでは、Webページを生成するコンピュータプログラムであるPythonスクリプト言語を利用し作成します。

このプログラムはユーザのWebブラウザからリクエストを受け取った際にサーバ上で起動します。このリクエストの中に、スクリプトがページを作成するにあたり必要となるすべてのデータが含まれてます。プログラムの起動後、作成されたWebページはブラウザに送信されます。

動的ページは、表示させるためには常に動作中のサーバが必要です。（スクリプト単体では表示できません）

この文書では以下の2つの動的ページをデモします。

Pythonを利用した静的ページを生成するサンプル
上記サンプルをアップデートしての動的ページを生成する機能的なサンプル

上記2つのサンプルは以下のファイルで構成されます。

ht.acl　ー　公開フォルダのアクセスリスト設定ファイル
indexbasic.py　ー　動的ページを生成するためのPythonスクリプト（２）
index.py　ー　動的ページを生成するためのPythonスクリプト（１）
plain.psp　ー　動的ページ生成用のテンプレート
form　ー　フォーム生成用のテンプレート
demo.jpg　ー　デモで使用する画像ファイル

↑

開発する環境について †

最低限必要となる環境は以下の通り

コンピュータ
ブラウザ
テキストエディタ
WLAN環境
MWSがインスコされた携帯

↑

ディレクトリ構成 †

MWS1.5.1betaインスコ直後のディレクトリ構成は以下の通り
※MWSはEドラにインスコしてます。

E━data━Web server┳Data
                   ┣conf
                   ┣htdocs┳Framework
                   ┃      ┣Web_Applications
                   ┃      ┣rest
               　  ┗logs

↑

静的デモページ作成（static web page） †

まず、デモ用のディレクトリをhtdocsディレクトリに作成します。

作成後のディレクトリ構成は以下のようになります。

E━data━Web server┳Data
                   ┣conf
                   ┣htdocs┳Framework
                   ┃      ┣Web_Applications
                   ┃      ┣rest
                   ┃      ┗demo　←　今回作成
               　  ┗logs

作成したディレクトリに、デモ用html及び画像を格納します。ソースは以下のとおり。また、画像はこのページに「demo.jpg」で添付します。

■demo/demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>MWS demonstration page</title>
<meta Name="description" Content="Static web page for the MWS" />
</head>
<body bgcolor="#ffffff">
<h1>Example webpage</h1>
<br />
This web page is made to demonstrate the Mobile Web Server.<br />
<br />
<img src="demo.jpg" alt="E71" />
<br />
</body>
</html>

さて、資材の設置が終わったら、さっそくMWSを起動して（前述のとおり）、E71のブラウザから以下のURLにアクセスします。

http://127.0.0.1/demo/demo.html

以下の画面が表示されれば成功！

↑

JavaScript?を利用 †

先の静的ページに以下のJavaScript?コードをbodyダグの中に埋め込みます。

■demo/demo2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>MWS demonstration page</title>
<meta Name="description" Content="Static web page for the MWS" />
</head>
<body bgcolor="#ffffff">
<h1>Example webpage</h1>
<br />
This web page is made to demonstrate the Mobile Web Server.<br />
<br /> 

<script>  　＃ここからJavaScriptを挿入
<!--
var today_date= new Date()
var month=today_date.getMonth()+1
var today=today_date.getDate()
var year=today_date.getYear()+1900
document.write("Today's date is: ")
document.write(month+"/"+today+"/"+year)
//--> </script>  ＃ここまで挿入

<br />
<img src="demo.jpg" alt="E71" />
<br />
</body>
</html>

資材を設置したら、同じくMWSを起動し、以下のURLにアクセス。

http://127.0.0.1/demo/demo2.html

画像の上に、現在時刻が表示されるようになります。

↑

Pythonによる動的デモページ作成 †

Pythonによる動的デモページ作成では以下の2ファイルを作成します。

demo.py　：　動的ページの本体
ht.acl　：　アクセスリスト

これら2ファイルを作成し、demoディレクトリ配下に配置します。

それぞれの内容は以下のとおり

■demo.py

def handler(req):
  # Import necessary Apache modules
  from mod_python import apache
  # Set correct content type to request
  req.content_type = 'text/html'
  # Generate simple HTML page
  req.write("<html><h1>Example webpage with Python</1h></HTML>")
  # Return apache.OK to indicate that page handling was successful
  return apache.OK

■ht.acl

# setting Handler
SetHandler mod_python
# Add Python Handler
PythonHandler demo
# Debug On
PythonDebug On
# Option OFF
Options None

ファイルを配置したら同じく、ブラウザから以下のURLにアクセスします。

http://127.0.0.1/demo/demo.py

以下の画面が表示されれば成功！

実際に動的画面が表示されると、感動しますね〜

添付ファイル:

Screenshot0028.jpg 1464件 [詳細]

demo.jpg 894件 [詳細]

Screenshot0027.jpg 1489件 [詳細]

Screenshot0029.jpg 1487件 [詳細]

demo.html 1257件 [詳細]

demo2.html 1332件 [詳細]

E71：MWSチュートリアル