トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

E71:MWSチュートリアル

Last-modified: 2013-08-24 (土) 02:14:21 (2242d)
Top / E71:MWSチュートリアル

E71:MWSチュートリアル

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

ちなみに、この記事は、

  • Mobile Web Server : How to Develop Content

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

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

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

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

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

イントロダクション

まあ、これを読めば、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スクリプト(2)
  • index.py ー 動的ページを生成するためのPythonスクリプト(1)
  • 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にアクセスします。

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

Screenshot0027.jpg

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にアクセス。

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

Screenshot0029.jpg

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にアクセスします。

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

Screenshot0028.jpg

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