06. モバイルシステム開発(1/3)

３回に渡り、モバイル対応システムの開発演習を行う。

制作するサービスを各自で企画。

技術的要件として、

・スマートフォンの画面サイズに対応したレスポンシブデザインのUIをもつWebサービスであること。

・WebAPIを利用して情報を提供する。

・MySQLなどデータベースにデータを記録しておき、そこから検索して表示できる。

の３つを条件とする。

準備：

実習室のPCのWebサーバで動いているWebサービスを、他のPCから利用可能にするために、以下の設定を行う。

XAMPPの Apacheの設定を変更

D:\xampp\apache\conf にある設定ファイル

httpd.conf

をテキストエディタで編集。(TeraPadなど。Windowsのメモ帳は改行コードが処理できないので使用しない。)

ServerName localhost:80

を

ServerName 192.168.152.??:80

??はPCの番号。（０は書かない）

Webサーバを再起動（Stop→Start）

ブラウザから、 URL http://192.168.152.??/ にアクセスする。

先週の補足：

以下では技術要素として

ネットワーク IPアドレスとポート

HTML と CSS でWebデザイン

PHP と JavaScript でプログラミング言語

ｊQuery と DOM の利用

Bootstrap デザインフレームワーク

WebAPI と XML

が登場する。詳しくは、各自で調べておくように。

先回の演習で、anime.php を実習室PCのWebサーバで動かしたところ、XMLファイルの取得に失敗し、正常に動かなかった。

理由は、実習室のPCは、Proxy 経由で学外のWebに接続しているためである。

ブラウザーを利用してWebを利用する際には、OSの設定で大学のProxyサーバ経由でWebにアクセスする為、Proxy経由で有る事を意識せずにWebを利用できる。

ところが、XAMPPのWebサーバで動作するPHPのプログラムはOSのProxyの設定を利用しない。 WebAPIなど学外のWebサービスからデータを取得するには、大学のWebサーバ経由でデータを取得する様にプログラムを変更する必要がある。

JavaScript はブラウザで実行されるので、ブラウザのProxy設定で学外のWebにアクセスできる。

PHPは XAMPPの Apache Webサーバで実行される。Proxy設定は利用されない。

先週の anime.php の変更点を、以下に示す。

コードの先頭、この部分を

<?PHP

$data = file_get_contents('http://animemap.net/api/table/aichi.xml');

次のコードを付け加え修正

<?PHP

$proxy = array(

      "http" => array(

         "proxy" => "tcp://202.236.100.6:8080",

         'request_fulluri' => true,

),

);

$proxy_context = stream_context_create($proxy);

$data = file_get_contents('http://animemap.net/api/table/aichi.xml', false, $proxy_context);

ブラウザで http://192.168.100.xx/anime.php を表示して、動作を確認する。文字化けが発生した場合は、TeraPadの文字コード指定保存で、 UTF8 を指定して保存し直す。

Bootstrap の導入：

anime.php のテーブルを Bootstrap を利用して表示する。

第3回の内容を参照して、Bootstrap に必要なコードを追加する。

レイアウトは <div> コンテナが１つだけのシンプルな構成でOK。

<title>タグの記述内容は適当に修正（学籍番号）

<!DOCTYPE html>

<html lang="ja">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>3112789 anime bootstrap</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

<div class="container">

～～～～～～この部分に PHP のコードを配置する～～～～～～～

</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

PHPのコードで、 table タグを生成している部分に class="table" を追加して、bootstrapのCSSを適用する。

echo '<table class="table">';

第5回で紹介した、

・bootstrap の pagenation の例 http://webkaru.net/jquery-plugin/bootstrap-pagination/

bs_pagenation の関連ファイルとフォルダを htdocs に配置する。

bootstrapの container 内に、bs_pagenation の div 要素を配置

<div id="demo_pag1"></div>

jQuery読み込みより後方に、bs_pagenationの読み込み用コードを配置

<script src="jquery.bs_pagination.min.js"></script>

<script src="localization/en.min.js"></script>

上のスクリプトに続いて、 id が demo_pag1 の領域にボタンを配置する bs_pagination スクリプトを配置

<script>

$(function() {

  $("#demo_pag1").bs_pagination({

    totalPages: 100

});

});

</script>

header領域に css の指定を配置

<link rel="stylesheet" type="text/css" href="jquery.bs_pagination.min.css">

この段階で修正した anime.phpの表示を一度確認して見ること。

番組表をページごとに切り分けるためのコード修正：

jQueryでページに応じて番組の表示を切り替える様に table タグに id を設定する。

echo '<table class="table" id="target">'

次の２つを、ページの最後の方の <script> タグに記述する。

・PHPのコードで番組データを HTML として出力する代わりに、配列に代入する様に修正する。

・bs_pagenation の設定を修正する。

ページが表示された時(onLoad)とページが切り替わった時(onChangePage)に、tableの内容を PHPでWebAPIから読み取って保存しておいた配列から1ページ分切りだして入れ替えるコードを追加する。

作業量が多いので、修正後の anime.php を以下に示す。

<!DOCTYPE html>

<html lang="ja">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>3112789 anime bootstrap</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

<link rel="stylesheet" type="text/css" href="jquery.bs_pagination.min.css">

  </head>

  <body>

<div class="container">

<div id="demo_pag1"></div>

<?PHP

$proxy = array(

      "http" => array(

         "proxy" => "tcp://202.236.100.6:8080",

         'request_fulluri' => true,

),

);

$proxy_context = stream_context_create($proxy);

$data = file_get_contents('http://animemap.net/api/table/aichi.xml', false, $proxy_context);

$array = simplexml_load_string($data);

echo '<table class="table" id="target">';

echo '<tr>';

echo '<th>曜日</th>';

echo '<th>状態</th>';

echo '<th>番組名</th>';

echo '<th>次回</th>';

echo '<th>全話数</th>';

echo '<th>放送時間</th>';

echo '<th>放送局</th>';

echo '</tr>';

echo '</table>';

echo '<p><a href="' . $array->request->url . '">番組表元データはアニメマップから取得しています。番組データに誤りがある場合はアニメマップから修正依頼を出すことで修正することができます。</a>最終更新時間は' . date('Y年m月d日H時i分s秒', strtotime($array->request->updated)) . 'です。ピンクの行は本日の放送されるアニメ。灰色の行はケーブルテレビなどの特殊な条件下で受信することができます。</p>';

?>

</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

<script src="jquery.bs_pagination.min.js"></script>

<script src="localization/en.min.js"></script>

<script>

var programs = [];

<?PHP

foreach($array->response->item as $value) {

    if($value->cable > 0) {

        $cable = 'background:#eee;';

    } else {

        $cable = '';

    if($value->today > 0) {

        $today = 'background:#ffeeee;';

    } else {

        $today = '';

    $program = '<tr style="' . $today . $cable . '">';

    $program .= '<td>' . $value->week . '</td>';

    $program .= '<td>' . ($value->state == 'onair' ? '放送中' : '新規アニメ') . '</td>';

    $program .= '<td><a href="' . $value->url . '">' . $value->title . '</a></td>';

    $program .= '<td>' . $value->next . '</td>';

    $program .= '<td>' . $value->episode . '</td>';

    $program .= '<td>' . $value->time . '</td>';

    $program .= '<td>' . $value->station . '</td>';

    $program .= '</tr>';

echo 'programs.push(\'' .$program. '\');';

?>

$(function() {

  $("#demo_pag1").bs_pagination({

  currentPage: 1,

  rowsPerPage: 10,

  maxRowsPerPage: 100,

  totalPages: 100,

  totalRows: 0,

  visiblePageLinks: 5,

  showGoToPage: true,

  showRowsPerPage: true,

  showRowsInfo: true,

  showRowsDefaultInfo: true,

  onChangePage: function(event, data) {

    // ヘッダ以外の全行を削除

    $( '#target' ).find("tr:gt(0)").remove();

    // 番組をテーブルに追加

    for(var i = (data.currentPage - 1)*data.rowsPerPage; i < data.currentPage*data.rowsPerPage; i++) {

      $( '#target' ).append( programs[i] );

},

  onLoad: function(event, data) {

    // 初期表示ページの番組をテーブルに追加

    for(var i = (data.currentPage - 1)*data.rowsPerPage; i < data.currentPage*data.rowsPerPage; i++) {

      $( '#target' ).append( programs[i] );

});

});

</script>

  </body>

</html>

以上の修正を施した、 anime.php をブラウザで表示すると、以下の様になる。

■課題：

次回までに、制作するモバイルデバイス向けサービスの概要と利用する技術を決め、制作に取り掛かる。

制作スケジュール：

完成までの日程は３週間後を予定している。

デザインプロトタイプ＋一部実働を目標とし、企画したサービスの全項目が実装されているかどうかは問わない。

レスポンシブUIに関しては、 bootstrap のデザインテンプレートなどを使用して手早く済ませればよい。

使用する予定の、デザイン素材を探しておくこと。

WebAPIの利用については、プログラムが苦手な受講生は、サンプルコードを修正して利用できる程度の物を見つけておく。

データベースの利用については、テーブルが１つだけなど単純な構造のデータベースについて、データの検索と表示が出来ればよい。

データ管理、入力、修正、削除、セキュリティについては、時間に余裕があれば実装することにして、実装されていなくてもOK。

その際、企画したサービスにデータ入力や、修正が必須で有れば、画面デザインだけでもワイヤーフレームで作成しておく（動作は無し）。

参照サイト：

・デザインテンプレート

ブートストラップスターターテンプレートv2.0.4

Bootstrap用無料テンプレートをダウンロードしまくれるサイト「Start Bootstrap」

Bootstrapフレームワークを使った、すごい無料HTMLテンプレート素材50個まとめ

http://www.layoutit.com/

http://ionicframework.com/

・WebAPI

日本の全エンジニアに捧ぐ！現在公開されているAPI一覧【2013年版】

Google の提供するAPIの一覧

「埋め込みコード」でココまで可能！欲しかったあの機能を搭載できる無料サービス8選！http://plus.appgiga.jp/masatolan/2014/03/07/51003/

最近のWebアプリ開発に使う「API」7選が、スゴ過ぎて革命が起きそうなレベル！ http://plus.appgiga.jp/masatolan/2014/10/21/54236/

コピペ１発で、自分のブログやサイトにSNS機能を実装できる「Spot.IM」がヤバイ！

一番最後の Spot.IM をやってみました。

ページに自分専用のSNSを貼り付けられます。

最終手段：

http://fladdict.net/blog/2013/11/paper-prototyping-0.html ペーパープロトタイピング入門：ペーパープロトタイピングを作成し、コマ撮りアニメーションで、企画したサービスのコンセプトの説明動画を作成して提出。

30分でスマホサイト作成スマフォ向けWebページ