こんにちは。開発ブログ運営担当のktです。

ITエンジニアの方は家庭内でひとり情シスを担当していることが多いと思います。

私もその一人なのですが、この前妻からある要望がありました。

妻：「クレジットカードの利用明細を見たいんだけど。」

私：「Web明細だけにしているので紙の明細は送られてこないけど、カード会社のサイトにログインすれば見れるで。」

妻：「ふーん。でもいちいちログインするの面倒だね。」

私：「何とかするわ。」

こんな要望から始まった今回の記事は、Web明細の内容を妻と共有した方法を紹介します。

実現方法

• どうやって共有するか？

カード会社のWeb明細はCSVファイルでダウンロード可能なので、それを妻と共有すればいいんじゃないか。

二人ともAndroid携帯なのでGoogleアカウントは持っているから、Googleドライブのフォルダを共有すればいけそう。

• 妻はITに疎いのでGoogleドライブの利用の仕方が分からない。

CSVファイルそのままではなく、スプレッドシートに取り込んでそのURLをLINEに通知すれば、

URLをクリックするだけで開けるから簡単だろう。

前準備

LINEに送信するには「LINE Notify」を利用します。

「LINE Notify」はあらかじめ設定しておいたLINEのグループにメッセージを送ることができます。

なので妻と私でLINEグループを作成します。

次に「LINE Notify」の管理サイトに、LINEアカウント作成時に設定した自分のメールアドレスとパスワードでログインします。

https://notify-bot.line.me/ja/

ログインしたらマイページを開き、「トークンを発行する」で先ほど作成したグループを指定してアクセストークンを発行します。

このアクセストークンを控えておいてください。

次にグループにメッセージが送れるように「LINE Notify」をグループに招待しておきます。

あとGoogleドライブのフォルダを共有しておきます。

これで前準備は完了です。

必要な機能

続いて自分で実装する必要がある機能を考えます。

CSVファイルをカード会社のサイトからダウンロードするのと、

Googleドライブのinputフォルダにアップロードするのは手動でするので、実装が必要な機能は以下のようになります。

• 指定のフォルダ(inputフォルダ)のCSVファイルを読み込む。
• Googleドライブのoutputフォルダに新しいスプレッドシート作成。
• スプレッドシートにCSVの内容を出力。
• スプレッドシートのURLをLINEに送信。

以上のことをGoogle Apps Scriptを利用して実現します。

実装

Googleドライブで適当な場所でスプレッドシートを作成します。

スプレッドシートが開いたら、[ツール]-[スクリプトエディタ]を選択します。

エディタが開いたら、コード.gsを下記ソースのようにコーディングします。

var TOKEN = PropertiesService.getScriptProperties().getProperty("LINE_TOKEN_TEST");
var OUTPUT_FOLDER_ID = 
      PropertiesService.getScriptProperties().getProperty("OUTPUT_FOLDER_ID");
var INPUT_FOLDER_ID = 
      PropertiesService.getScriptProperties().getProperty("INPUT_FOLDER_ID");

function main() {
  var inputFile = getInputFile();
  var newFile = createNewFile();

  import(inputFile, newFile);
  postLine(newFile);
}

//指定のフォルダ(inputフォルダ)のCSVファイルを読み込む。
function getInputFile() {
  var date = new Date();
  var fileName = Utilities.formatDate(date, 'Asia/Tokyo', 'yyyyMM') + ".csv";

  var files = DriveApp.getFolderById(INPUT_FOLDER_ID).getFilesByName(fileName);
  var file;
  while (files.hasNext()) {
    file = files.next();
  }
  return file;
}

//Googleドライブのoutputフォルダに新しいスプレッドシート作成。
function createNewFile() {
  var date = new Date();
  var fileName = Utilities.formatDate(date, 'Asia/Tokyo', 'yyyy年MM月') + "明細";
  var ssId = SpreadsheetApp.create(fileName).getId();
  var file = DriveApp.getFileById(ssId);

  var outputFolder = DriveApp.getFolderById(OUTPUT_FOLDER_ID);
  outputFolder.addFile(file);
  DriveApp.getRootFolder().removeFile(file);
  var newFile = outputFolder.getFilesByName(fileName).next();
  return newFile;
}

//スプレッドシートにCSVの内容を出力。
function import(inputFile, newFile) {
  var data = inputFile.getBlob().getDataAsString("Shift_JIS");
  var csv = Utilities.parseCsv(data);

  var ss = SpreadsheetApp.open(newFile);
  var sheets = ss.getSheets();
  var targetSheet = ss.setActiveSheet(sheets[0]);
  targetSheet.getRange(1,1,csv.length,csv[0].length).setValues(csv);
  targetSheet.autoResizeColumn(2);
}

//スプレッドシートのURLをLINEに送信。
function postLine(newFile) {
  var url = newFile.getUrl();
  var fileName = newFile.getName();
  var message = fileName + " " +url;

  var options = {
    "method": "post",
    "payload": "message=" + message,
    "headers": {"Authorization" : "Bearer " + TOKEN}
  };
  var response = UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
  return response;
}

続いて控えておいたアクセストークンとinput、outputフォルダのIDをプロジェクトのプロパティに設定します。

[ファイル]-[プロジェクトのプロパティ]を選択します。

スクリプトのプロパティタブでKey Value形式で入力します。

フォルダのIDはGoogleドライブで対象のフォルダを開いたときのURL「https://drive.google.com/drive/folders/」以下の部分です。

解説

createNewFileファンクションで新しいスプレッドシートを作成していますが、

Googleドライブのルートフォルダに作成されるのでoutputフォルダに追加したあと、

ルートフォルダから削除しています。

それ以外はソースとコメントを読んでもらえれば何をしているかは分かってもらえると思います。

[実行]-[関数を実行]-[main]を選択して実行すれば、以下のようにLINEに通知が来ます。

まとめ

自分が利用するので、はしょった作りにしていますが問題なく動いているので良しとします。

いちからシステムを作らなくてもGoogleドライブやLINEといった既存のサービスを組み合わせて、

さくっと要望を満たすことができました。

こういったWebサービス同士を組み合わせて何かを作っていくことが増えていくでしょうね。

うちのWeb明細共有システムについてはもう少しバージョンアップしていこうと思います。