０．初めに
私はエンジニアではないただのドシロウトです。
先日近所のハードオフを覗くと小さいタブレットみたいな端末がジャンク扱いで1000円で置いてありました。
購入して自宅で調べると楽天が販売した「kobo touch」という電子書籍リーダ初期モデルでした。おそらく2011~2013年頃の製品みたいです。
ネットで調べると色々とHackする方法がありました。Hackを拾ったリンク集が以下。
この端末、電子書籍リーダなのにブラウザを搭載しています。しかし、とってもしょぼいブラウザーでした。
この記事ではkobo touchのブラウザを使ってWEBアプリのメモ帳みたいのを作ろうと四苦八苦した話を書いています。
１．kobo touchのブラウザの調査
カレンダー、時計等のJavaScriptが動くとの情報もあったので、このブラウザが何ができるかを確認した結果は以下です。
- サーバー側の基本認証設定
⇒ブラウザが側でid,pass画面が表示不可
- JSのalert
⇒ブラウザでダイアログ表示不可
- JSのfetch通信
⇒ブラウザ無反応
- JSのajax通信
⇒ブラウザ無反応
この実験結果から私がこのブラウザについて思ったのは以下。
- JSにはごく一部しか対していない
- ダイアログやプロンプトは使えない
- 表示する画面にはレガシーなHTMLを使う
そこでブラウザのJSエンジンには期待せずにGoogle Apps Scriptでwebapiをつくってhtmlのフォームからcgiとして動かす仕組みを試しました。
２．作ったもの
以下のアニメGIFの通り、kobo touchで「メモ追加」ボタンを押すとGoogleスプレッドシートを更新し、「メモ一覧」ボタンを押すとGoogleスプレッドシートを読込、最新10件表示するメモ帳Webアプリを作りました。
３．参考にした記事
参考にした記事は以下。
【超初心者向け！】GASの二次元配列をやさしく図入り解説！ - Yuki's bnb blog
https://www.yukibnb.com/entry/2019/08/30/114339
GoogleSpreadSheetで、指定した範囲の、データが含まれている最終行を取得する方法。 - Qiita
https://qiita.com/3mc/items/826cd66890d7812e917e
４．コードの例
ソースファイルはHTML２本、GAS２本だけです。
- メモ追加
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GAS MEMO ADD</title>
<style>
# buttony {
width:200px;
color:#ffffff;
background:#337fcc;
font-family: fantasy,sans-serif;
font-size:24px;
font-weight:bold;
text-shadow:0 1px 0px #143352,0 2px 0px #143352;
text-align:center;
display:inline-block;
text-decoration:none;
border:1px solid #225588;
padding:10px 0 8px 0;
border-radius:5px;
margin-bottom:20px;
}
</style>
</head>
<body>
<h1>GASメモ</h1>
<div>
<form action="https://script.google.com/macros/s/xxxxx/exec" method="get">
<p>password：<input type="password" name="pass" size="20" /></p>
<p>件名：<input type="text" name="namae" size="20" /></p>
<p>内容：<br><textarea name="naiyo" cols="40" rows="4"></textarea></p>
<p><input type="submit" name="submit" value="送信" /></p>
</form>
</div>
</body>
</html>
function doGet(e) {
var p = e.parameter;
console.log(p.pass);
console.log(p.namae);
console.log(p.naiyo);
var passx = p.pass;
if (passx != "kobo") {
return ContentService.createTextOutput('Password NG\n戻るボタンをおしてください');
}
if (p.namae == "") {
return ContentService.createTextOutput('件名 NG\n戻るボタンをおしてください');
}
var files = DriveApp.getFilesByName('gaskobomemo');
if (files.hasNext()) {
var spreadsheet = SpreadsheetApp.open(files.next());
var sheet = spreadsheet.getSheets()[0];
sheet.appendRow([p.namae,p.naiyo]);
}
return ContentService.createTextOutput('MEMO added\n戻るボタンをおしてください');
}
- メモ表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GAS MEMO VIEWER</title>
<style>
# buttony {
width:200px;
color:#ffffff;
background:#337fcc;
font-family: fantasy,sans-serif;
font-size:24px;
font-weight:bold;
text-shadow:0 1px 0px #143352,0 2px 0px #143352;
text-align:center;
display:inline-block;
text-decoration:none;
border:1px solid #225588;
padding:10px 0 8px 0;
border-radius:5px;
margin-bottom:20px;
}
</style>
</head>
<body>
<h1>GASメモ（最新１０件）</h1>
<div>
<form action="https://script.google.com/macros/s/xxxxx/exec" method="get">
<p>password：<input type="password" name="pass" size="20" /></p>
<p><input type="submit" name="submit" value="送信" /></p>
</form>
</div>
</body>
</html>
function doGet(e) {
var p = e.parameter;
console.log(p.pass);
var passx = p.pass;
if (passx != "kobo") {
return ContentService.createTextOutput('Password NG\n戻るボタンをおしてください');
}
var files = DriveApp.getFilesByName('gaskobomemo');
if (files.hasNext()) {
var spreadsheet = SpreadsheetApp.open(files.next());
var sheet = spreadsheet.getSheets()[0];
var columnBVals = sheet.getRange('a:a').getValues();
var LastRow = columnBVals.filter(String).length;
var table = sheet.getRange(2,1,LastRow-1,2).getValues();
var outdata = '';
var cnt = 0
for (var i=0;i<LastRow-1;i++) {
if (cnt < 10) {
outdata += '------- 件名 -------\n';
outdata += table[LastRow-i-2][0]+'\n';
outdata += '------- 内容 -------\n';
outdata += table[LastRow-i-2][1]+'\n\n';
cnt += 1
}
}
}
return ContentService.createTextOutput('■メモ一覧（最新10件）\n戻るボタンをおしてください\n\n'+outdata);
}
５．まとめ
kobo touchは私の便利なモバイルメモ帳になりました。
こんな古い端末使う人はいないので私だけのメリットですが…(;^_^A
以 上