作ったもの
機能
- 競技かるたの読み札をランダムな順番で表示します
- 読唱規定に則った読み方を表記しています
- 混ぜ直したいときは上のシャッフルボタンを押します
- どこまで読んだか確認できるように，読み札をタップで色をグレーに変えられます
作った経緯
趣味で競技かるたをしており、読み手をやることもあります。
読み札が手元にない場合もあるので，スマホで手軽に使えたら便利だと思い，作りました。
準備
サーバーを用意する必要がなく，ブラウザ上で簡単に作れそうなので，GoogleスプレッドシートとGoogle Apps Script(GAS)を組み合わせて作りました。
スプレッドシート
fuda_list シート
- 百首の歌番号と和歌を入力するマスタシートです
- 改行するための br タグ，色をつけるための font タグ，ふりがなを振るための ruby タグはセル内に入力してしまっています
yomi_list シート
- 乱数から読み上げの順番を生成しています
- 合わせて，ここでチェックボックスや，何枚目かの表記を各セルの1行目に入れています
input シート
- シャッフルで乱数の再計算をさせたいときに，GASからこのシートに適当な値を入力するために用意しています
output シート
- 1行目には，競技かるたで最初に読み上げる序歌を入れています
- 2〜101行目に，読み札に含める内容を yomi_list シートから引っ張ってきています
GAS
GASは，スプレッドシートのコンテナバインドスクリプトとして作っています。
このように，GAS・HTML・CSS・JavaScriptでファイルを分けています。
GASのコード
コード.gs
const ss = SpreadsheetApp.getActiveSpreadsheet();
// index.htmlをテンプレートとしてHTMLを出力する関数。PWA化に必要なメタタグもここで入れます。
function doGet() {
let output = HtmlService.createTemplateFromFile("index").evaluate();
output.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.addMetaTag('apple-mobile-web-app-capable','yes')
.addMetaTag('mobile-web-app-capable','yes')
.setTitle("月読(読み札)")
.setFaviconUrl('https://drive.google.com/uc?id={Googleドライブ内のファビコン画像のIDを入れます}&.png');
return output;
}
// inputシートに「1」を入力することで再計算させ，読み札をシャッフルし直す関数
function reloadSheet() {
ss.getSheetByName("input").getRange(1,1).setValue(1);
}
// outputシートから読み札の一覧を取得して返す関数
function generateYomiList() {
return ss.getSheetByName("output").getRange(1,1,101).getValues();
}
// スクリプトのURLを取得する関数（リロードに使用）
function getScriptUrl() {
let url = ScriptApp.getService().getUrl();
return url;
}
HTML
<?!= HtmlService.createHtmlOutputFromFile("js").getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
上記はそれぞれjs.htmlやcss.htmlの内容をこの位置に入れるための記述です。
index.html
<html>
<?!= HtmlService.createHtmlOutputFromFile("js").getContent(); ?>
<head>
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<h1>読札アプリ <ruby><rb>月</rb><rp>（</rp><rt>つく</rt><rp>）</rp><rb>読</rb><rp>（</rp><rt>よみ</rt><rp>）</rp></ruby></h1>
<p>
<input type="button" onclick="reloadText()" value=" 読み札をシャッフルする ">
</p>
<div id='inserthyo'></div>
<p>
<a href="#"><input type="button" value=" ページの一番上に戻る "></a>
</p>
<br><br>
<h1>共有用QR・URL</h1>
<p>
<img src="{QRコードのURL}" width="250px" height="250px"/>
</p>
<p>
<input type="button" onclick="copyUrl()" value=" URLをコピーする ">
</p>
</body>
</html>
CSS
タップした札全体に色をつけるために，CSSを以下のようにしています
-
input[type=checkbox]に対してdisplay:none;でチェックボックスを不可視にする -
td要素に対してposition:relative;を設定し，配下のlabel要素（札の文字全体）に対してdisplay:block;を設定することでtd要素内全部をチェックボックスのラベルにする -
input:checked + labelに対して背景色を設定する
css.html
<style type="text/css">
body {
background-color : #E1DAC3;
font-size : medium;
font-family : "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
h1 {
color : #333333;
font-size : xx-large;
}
table {
border : none;
padding : 0;
}
td {
background-color : #FFFFFF;
border-color : #336633;
border-width : 0.3rem;
border-style : solid;
border-radius : 0.3rem;
width : auto;
padding : 0;
line-height : 2rem;
position : relative;
}
input[type=button] {
color : #FFFFFF;
background-color : #336633;
border : none;
border-radius : 0.3rem;
font-size : medium;
width : auto;
padding : 0.5rem 1rem;
}
input[type=checkbox] {
display : none;
}
label {
display : block;
padding : 0.8rem 0.5rem 0.3rem 0.5rem;
}
input:checked + label {
background-color : #CCCCCC;
}
iframe {
border : 0;
}
.num{
font-size : 0.8rem;
position : absolute;
right : 0.5rem;
bottom : 0.1rem;
}
</style>
JavaScript
- 最初にスプシから取ってきたデータをもとに読み札のテーブルを作る関数や，ボタンを押したときの挙動についてここで設定しています
js.html
<script type="text/javascript">
// スプシから読み札の一覧を読み込む
function loadsheet(){
google.script.run.withSuccessHandler(outSpreadsheet).generateYomiList();
}
window.addEventListener('load', loadsheet);
// 読み札テーブルの作成
function outSpreadsheet(spreadsheet_data){
var htmlTable = '<table id="tableData" border=1>';
for(var row = 0; row < spreadsheet_data.length; row++){
htmlTable += '<tr>';
htmlTable += '<td>' + spreadsheet_data[row][0] + '</td>';
htmlTable += '</tr>';
}
htmlTable += '</table>';
document.getElementById("inserthyo").innerHTML = htmlTable;
}
// 読み札のシャッフル
function reloadText(){
let flag = window.confirm("読み札をシャッフルしますが，いいですか？");
if(flag) {
google.script.run.reloadSheet();
update();
}
}
// ページの再読み込み
function update() {
google.script.run
.withSuccessHandler(result).getScriptUrl();
function result(url){
window.open(url, '_top');
}
}
</script>
アプリを公開する
- GASが完成したら，GASの画面の右上にあるデプロイ→新しいデプロイからデプロイします
- 種類を「ウェブアプリ」に，アクセスできるユーザーを「全員」に設定してから「デプロイ」します
- 初回のみ，権限を許可するためのポップアップが出ます
- デプロイ後，「ウェブアプリ」の下に書かれているURLが公開されたWebアプリのURLです
- 2回目以降のデプロイでは「新しいデプロイ」から行うとURLが変わります
- URLを変えたくない場合は「デプロイを管理」から編集をクリックし，バージョンを新バージョンとしてデプロイします
今後やりたいことなど
競技かるたでは百人一首の100枚のうち，ランダムな50枚を使います。使わないほうの50枚は読み上げるけれど場にない「空札」と呼ばれます。
練習時間が短い場合，全試合で使う札を揃えた上で，空札を何枚か抜いて試合することがあります。どの札を抜くのが良いかいい感じに決めてくれるような機能も実装してみたいと考えています。