E71：MWSチュートリアル の変更点
Top / E71：MWSチュートリアル
- 追加された行はこの色です。
- 削除された行はこの色です。
- E71：MWSチュートリアル へ行く。
- E71：MWSチュートリアル の差分を削除
*E71：MWSチュートリアル [#j1f73590] 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を導入してから一番最初に読む、やるにはちょうどいい内容となってます。 フランクに和訳的な内容となるよう頑張ってみてます笑 ※大体同じことをやりますが、一部内容が異なる部分がありますのでご注意ください。 #contents *イントロダクション [#x898d41c] まあ、これを読めば、MWSでのコンテンツってこんな感じで作りますよ〜って雰囲気がわかります。 MWSでは、静的コンテンツに加え、mod_python（Python Module）をつかった動的コンテンツも公開できます。 **Content Examples [#v83d2de6] この文書ではベーシックな静的ページ、動的ページのデモを紹介します。 デモでは7つのファイルを作成します。 静的ページのデモでは以下の3ファイルを作成します。 静的ページのデモでは以下のファイルを作成します。 -index.html ー 基本的なhtmlファイル -ht.acl ー 公開フォルダのアクセスリスト設定ファイル -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 ー デモで使用する画像ファイル **開発する環境について [#w6da9535] 最低限必要となる環境は以下の通り -コンピュータ -ブラウザ -テキストエディタ -WLAN環境 -MWSがインスコされた携帯 **ディレクトリ構成 [#jafba826] MWS1.5.1betaインスコ直後のディレクトリ構成は以下の通り&br; ※MWSはEドラにインスコしてます。 E━data━Web server┳Data ┣conf ┣htdocs┳Framework ┃ ┣Web_Applications ┃ ┣rest ┗logs *静的デモページ作成（static web page） [#ib6b7949] まず、デモ用のディレクトリを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 以下の画面が表示されれば成功！ &ref(Screenshot0027.jpg); **JavaScriptを利用 [#g0ded16a] 先の静的ページに以下のJavaScriptコードをbodyダグの中に埋め込みます。 <br /><script> ■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> //--> </script> ＃ここまで挿入 <br /> <img src="demo.jpg" alt="E71" /> <br /> </body> </html> 資材を設置したら、同じくMWSを起動し、以下のURLにアクセス。 -http://127.0.0.1/demo/demo2.html 画像の上に、現在時刻が表示されるようになります。 &ref(Screenshot0029.jpg); ***Pythonによる動的デモページ作成 [#z94db40e] 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 以下の画面が表示されれば成功！ &ref(Screenshot0028.jpg); 実際に動的画面が表示されると、感動しますね〜