今日の目標：一覧ページから詳細ページを開けるようにする
0．前回の振り返り
スプレッドシートの内容を検索できるようになりました。
1．これまで用意したHTMLとGSを整理する
これまで作成したファイルは以下の4画面分です。
- TOP画面.html
- TOP画面.gs
- 一覧画面.html
- 一覧画面.gs
- 詳細画面.html
- 詳細画面.gs
- 編集画面.html
- 編集画面.gs
これから画面遷移・パラメータ付与をしていくためにハンドリング用のhandler.gsを作ります。
ここではいったん、doGetは枠だけになっています。
handler.gs
/**
* 初期表示画面ハンドリング
*/
function doGet(e) {
// URLパラメータ取得
// パラメータに応じて読み込む画面を変更
const htmlOutput = initDetailEdit(e, catId)
return htmlOutput;
}
2．パラメータを使って分岐する
今回はどの画面を表示しているのかを表す「type」と、どの猫を表示しているのかを表す「catId」を受け取れるようにします。
e.parameter.[パラメータ名]で値が取得できるようなので、まずはhandler.gs上で分岐を記述していきます。
handler.gs
/**
* 初期表示画面ハンドリング
*/
function doGet(e) {
// パラメータ取得
const type = e.parameter.type;
const catId = e.parameter.catId;
let htmlOutput;
// TOP画面
if( !type || type === '' || catId === '' ){
htmlOutput = initTop(e);
}
// 一覧画面
else if( type === 'List' ){
htmlOutput = initList(e);
}
// 詳細画面
else if( type === 'detail'){
htmlOutput = initDetail(e, catId);
}
// 詳細編集画面
else if( type === 'edit'|| type === 'add'){
htmlOutput = initDetailEdit(e, catId);
}
return htmlOutput;
}
3．パラメータを設定してボタンを押せるようにする
まずは詳細画面から編集画面に遷移できるようにパラメータを設定してみます。
パラメータを複数設定する場合、<button>＋<input type="hidden">でも実現できるみたいですが、今回はより分かりやすく簡単に書ける<a>タグを使う形で書いてみます。
CatDetails.html
<a class="catBtn btn btn-outline-primary" href="<?= deployURL ?>?type=edit&catId=<?= catId ?>">編集</a>
この形であれば複数パラメータも怖くないです。可変のcatIDをパラメータとして利用しているので、URL本体と同様に変数として扱っています。
こんな感じでほかの画面にもパラメータ設定していきます！
4．ブックマークからの開けることを確認する
実際にボランティアメンバーがこのアプリを使う場合、よく利用するページをブックマークしていただくことになりそうです。ブックマークに残ったパラメータがうまく動くか確認していきます。
できました！
5．ブラウザバックで戻れるようにする
各ページを切り替えるごとにURLが発行されるので、ブラウザバックが利用できるはず。ということで試してみました！
こちらも何とか動いているようです。
ということで、今日はここまで。
画面遷移できるようになると、各画面の初期表示のもっさり感が気になるようになっちゃったので、どこかで改善したいですね。