降りつぶし.net~同期するWebアプリ・スマホアプリの開発・運用~

第3回 Webアプリ「降りつぶし.net」の構築

この記事を読むのに必要な時間:およそ 4 分

事業者ページ“operator.php”

図4 事業者ページ

図4 事業者ページ

記録入力トップページで選択された事業者に属する路線の一覧です。パラメータで渡される事業者コードにより,データベースから路線を検索しています。各路線名のリンクをクリックすると,記録入力ページ(路線ページ)が開きます。

記録入力ページ(路線ページ)“line.php”

図5 記録入力ページ(路線ページ)

図5 記録入力ページ(路線ページ)

事業者ページで選択された路線に属する駅一覧と,それらの駅の乗下車記録およびメモが,表形式で表示されます。各駅のリンクをクリックすると,別ウィンドウで日本語版ウィキペディアのページが開き,その駅の詳細情報を読むことができます。

日付入力UIは,第2回で紹介のとおりです。年選択で「不明」を選択すると,JavaScriptにより,月および日は空欄のみとなります。また,年および月を選択するたびに,日の最大値は28~31の間で自動調整されます。記録を入力し,⁠乗下車記録を更新する」ボタンをクリックすると,登録スクリプトへのhttp POSTで,入力内容が送信されます。

登録スクリプト“register.php”

UIはなく,記録入力ページからのPOSTのみを受け付けます。データベースを更新し,呼び出し元の記録入力ページへとリダイレクトで戻ります。記録入力ページ→登録スクリプトヘPOST→記録入力ページヘリダイレクト,と遷移させることにより,登録後の記録入力ページをWebブラウザからリロードした場合の再POST発生を回避しています。

アップロードスクリプト“upload.php”

図6 アップロード結果表示

図6 アップロード結果表示

CSVファイルのアップロードを処理します。単に,ダウンロードスクリプトが出力するフォーマットのCSVファイルをパースし,データベースに登録し,結果を表示するだけです。

登録スクリプトは,POSTの意図的な捏造がない限りは異常データを受信することがないため,不正なデータに対するエラーメッセージを出力しません。一方こちらは,ユーザが手作業でフォーマットを壊してしまう可能性があるため,エラーメッセージを表示します。

どのページからのアップロードであっても,登録に必要なキーは駅コードのみであるため,動作は共通ですが,元のページへ戻るリンクを生成するため,事業者ページおよび記録入力ページ(路線ページ)からのアップロードの場合は,それぞれのコードをパラメータとして受け取ります。

ダウンロードスクリプト“download.php”

CSVファイルを生成します。UIはなく,text/csv形式のファイル内容をダウンロード用に出力します。

フォーマットは,Shift_JIS,かつ項目内に改行文字を含むことができる,いわゆるExcel形式です。もちろん,Excelなどの表計算ソフトでの読み書きを可能とするためです。第1回でも触れたとおり,この機能は,すでに多くの駅に乗下車を済ませたマニアユーザには必須です。

どのページからも呼び出されますが,事業者コードや路線コードが指定されていた場合,それぞれに対応したSQL文を生成してクエリを実行し,その結果をCSVフォーマットに変換しています。

ブログパーツ生成ページ“parts.php”

図7ブログパーツ生成ページ

図7 ブログパーツ生成ページ

後述しますが,降りつぶし.netでは,乗下車記録のうちの,事業者種別別の統計情報を,JSONPで提供しています。その呼び出しURLには,ユーザを一意に識別するランダムな文字列が含まれます。このページでは,そのJSONPによる埋め込みコード,および実際に埋め込んだ場合の表示例を例示します。

ユーザトークン変更ページ“change_token.php”

図8 ユーザトークン変更ページ

図8 ユーザトークン変更ページ

前述したブログパーツに埋め込まれるランダムな文字列を,何らかの事情で変更する場合に必要なものです。第2回で紹介しなかったデータベーステーブル⁠user_tokens⁠は,まさにこのランダムな文字列を管理しています。

同期ページ“sync.php”

図9 同期ページへのアクセスで未ログイン状態の場合(i降りつぶしの画面)

図9 同期ページへのアクセスで未ログイン状態の場合(i降りつぶしの画面)

スマホアプリ(i降りつぶし・降りつぶしroid)から呼び出され,乗下車データの同期を司る,本ソリューション最大のキモです。詳細は第4回で解説しますが,スマホとサーバの同期ためにのみ存在しているのにもかかわらず,UIがあります。そのため,同期「ページ」としています。

このページは,http GETで呼び出されるとまずログイン状態をチェックし,未ログインの場合は,スマホ画面で適切に表示される,専用のログイン画面のHTMLを出力します。スマホアプリは,これをWeb表示ビューにそのまま渡し,画面表示させています。一方,ログイン済の場合は,登録ユーザ名をプレーンテキストで返します。スマホアプリは,この文字列をログインユーザ名として,スマホ側のUI内で表示します。

また,POSTで呼び出された場合は,ログイン状態であれば,本来の同期機能を実行します。

著者プロフィール

よねざわいずみ

合資会社ダブルエスエフ代表社員。学習塾講師やら芸能ライターやら劇団主宰やらいろいろ経て現在はよろず請負プログラマ。最近の開発はPHP,JavaScript,Java,MTプラグインなど。お仕事随時募集中。

Twitter:@yonezawaizumi

鉄道旅行ブログ:http://feelfine.blog.izumichan.com/