概要

マンガ喫茶が大好きで、休みの日など日がな一日こもったりしている。マンガをどこまで読んだかはGoogleドキュメントに箇条書きで管理してたけど、とにかく見にくい。スマホアプリもあるんだろうけど、スマホを買い替えるときに移行が面倒かなぁなんて思って敬遠。

最近GASを知り、どうやら色々自分の好きなように巻数管理アプリを作れそうな気がしたので作ってみたら、我ながら結構使えるものになったのでレシピを公開^^)b

アプリに実装した機能

・書籍タイトルと既読巻数を記録
・書籍タイトルで並べ替え
・書籍毎に記入できるメモ欄
・巻数を更新した日付を自動で更新
・更新日時を元に「最近読んだ」の並べ替え
・書籍タイトルでGoogle書籍検索

ドキュメントで管理してたときには１つ目だけだったことを考えると、とてつもない進化☆(^o^)乂(^-^)☆ ﾔｯﾀﾈ!!

実を言うと作成当初は、☆の個数による評価や、最終巻まで読んだかのY/N欄なんかもあったんだけど、自分しか使わないのに☆評価はナンセンスだし、最終巻かどうかは変化するため削除( ‥)ノ°⌒・

まずは完成品！

左側がアプリを開いた画面で、「リスト」と「最近読んだ」があり、それぞれタイトル名順、読んだ日付順にソートされる。リンクをタップすると、書籍タイトルのGoogle書籍検索。

真ん中は書籍の詳細で、トップページには非表示だった詳しい内容が表示。

右側は書籍詳細の編集画面で、巻数はプラスマイナスのアイコンで操作できるようになっている。分かりにくいけど、編集できないようにタイトルと書籍検索URL、更新日時はグレーの文字。

レシピ① 下ごしらえ

まずはベースとなるスプレッドシートを作成。こんな感じ。

A列から、書籍タイトル,読み仮名,既読巻数,メモ,書籍検索URL,読んだ日。

タイトルで並べ替えると文字の種類でまとまるので、読み方で並べ替えるためにB列を用意。電影少女を「びでおがーる」と読ませているのは私の好みから。

レシピ② スクリプト

タイトルを追加したり、既読巻数を更新したら、それをトリガーに実行。E列に書籍検索URLを生成し、F列に日時を上書きするスクリプトを作成。コード.gsがこちら。

function onChange(e) {

  //更新されたセルを取得
  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  var ActCell = ss.getActiveCell();
  
  //セルの行列を取得
  var CellRow = ActCell.getRow();
  var CellCol = ActCell.getColumn();
  
  //セルの内容を格納
  var Cell = ss.getRange(CellRow, CellCol).getValue();
  
  //自動実行させたくない処理をif文で回避
  if(Cell){ if(CellRow!=1){ if(CellCol<4){
  
    //A列の文字列でグーグル書籍検索するURLを生成 E列に入力
    var title = ss.getRange(CellRow, 1).getValue();
    title = title.replace(" ", "%20");
    ss.getRange(CellRow, 5).setValue('https://www.google.com/search?q='+title+'&tbm=bks');

    //F列に更新日時を入力
    var date = new Date();
    var today = Utilities.formatDate(date, 'JST', 'yyyy/MM/dd');
    ss.getRange(CellRow, 6).setValue(today);
    
  } } }
  
  //B列で並べ替え 行を削除した時も並べ替えたいのでifの外
  var range = ss.getRange("A2:H");
  range.sort([{column:2, ascending:true}]);
  
}

【onChange(e)】
ここで躓いてしまったのが、セル編集による自動実行。普通（？）ならonEdit(e)を使うんだろうけど、AppSheetから更新すると何故か実行されない・・・。

解決方法はこちら⇒「【GAS】AppSheetからスプレッドシートを操作するとonEditが動かない問題の対処法」

トリガーの設定なんかも必要なので、興味があればご覧ください<(_ _)>

【if文の条件】
自動実行してほしくないケースがあるので、if文で回避する。

if(Cell){ セルが空欄ならfalse：完結まで読んで削除した時に実行してしまうと、せっかく削除したのに自動入力でE列とF列が残ってしまい、並べ替えの時に困るから。

if(CellRow!=1){ ヘッダ行は対象外。

if(CellCol<4){ 「最近読んだ」でソートするための日付なので、メモを追記した場合などには日付を更新しない。

【書籍検索URL】
Google書籍検索のURLは、https://www.google.com/search?q=書籍名&tbm=bks で作成可能。

※書籍タイトルにスペースがあると（DRAGON BALLとかSLAM DUNK）URLがぶった切られてしまうので、title = title.replace(" ", "%20");で書籍タイトルのスペースをURL用のスペースに変換。

【並べ替えはif文の外】
if文で、削除した場合の実行を除外したけど、並べ替えは削除した場合も実行してほしいのでifの外に記入。

【実行後のシート】
タイトル順に並べ替えられて、書籍検索URLや日時が更新╭( ・ㅂ・)وｸﾞｯ

これで完成でもイイ気がしてきた（笑）
けど、もうちっとだけ続くんじゃ。

レシピ③ AppSheet

快適なマンガ喫茶ライフを送るために、AppSheetも作ります٩( 'ω' )وｶﾞﾝﾊﾞﾙ

既に長いので、AppSheetの導入部分は省略。AppSheetが自動的に作ったアプリを、自分で使いやすいように設定した部分をご紹介。

【カラムの設定（Data）】
行番号も入れて７カラム。それぞれの属性（？）やらを決めたのが次の画像。

KEY：もちろん書籍タイトル。
SHOW：行番号は非表示。
EDITABLE：URLと日時は、自動なのでアプリ側から編集不可。
REQUIRE：書籍タイトルと読み仮名は必須項目。

TYPEは最初からほぼコチラの意図を酌んだ設定になってる（さすが）。隠し味的に、メモは改行するかもしれないので「Text」を「Long Text」に変更。

読み仮名は表示させる必要がないけど、ここの設定でSHOWから外すとエラーが出るので、UXの設定時に非表示にする予定。

【プライマリービュー（UX）】
Primary Viewsに自動で用意されてるものがあるけど、いったん全て削除^^; New Viewで新しいのを作って設定していく。

・まずは一覧ページの設定から

ページ名は「リスト」、タイプは「table」、ポジションは左。

ここからが肝心、View Optionsを追加していく。
Sortで、読み仮名（For Sort）をA→Z順に、Column orderで、表示させたいタイトル、巻数、メモ、URLを選択（ここで選ばないことで、読み仮名,日付を非表示にする）。

・次に「最近読んだ」ページの設定

ページ名は「最近読んだ」、タイプは「table」、ポジションは右。
Sortを日付順（Z→A）、下位のSortを読み仮名順（A→Z）に設定。

DisplayのIconで、アイコンを最近読んだっぽく変更^^)b

細かい設定は以上！

【その他】
Dashboardで、アプリの説明やアイコンを変更したら完成(ﾟ∀ﾟﾉﾉﾞﾊﾟﾁﾊﾟﾁﾊﾟﾁﾊﾟﾁ

【デプロイ】
AppSheetのアプリをスマホに入れて、ShareAppすれば閲覧可能。でも、スマホから更新するには、デプロイという操作が必要。デプロイについては詳しいサイトが多いので割愛！

実際に使ってみた

アプリから新しい書籍を入力してみる。

＋ボタンで新規入力画面が開くので、詳細を入力。必須項目のタイトルと読み仮名には*印が付いている。Saveを押したところ、新しいタイトルが入力された（右）！

右上の更新ボタンを押すと、スプレッドシートとも同期される。

完璧！

早くマンガ喫茶行って使いたいヾ(´∀`)ﾉ

後日、実際に使ったら不具合発覚orz

既読巻数の更新、新しい書籍の追加など、かなり調子よく使えていたのに、読み終わった書籍を一覧から削除したら関係ない書籍の読んだ日付が勝手に更新されてる・・・？？？

原因や解決策など、別記事にてご報告！

【GAS】先日AppSheetで作った栞アプリに不具合があったので修正

おしまい