ATOM Printer（サーマルプリンター）とkintoneを連携してみた

はじめに

こんにちは！我々サイボウズのDeveloper Pioneer チームは技術イベントに出展することが多く、同人誌の作品紹介や名刺の代用としてサーマルプリンターを活用できないかと思い、カスタマイズに挑戦してみました。

全体像

まずは、ボタンを押すとkintoneの最新レコードを印字するカスタマイズをします。

完成形

ATOM Printerの側面のボタンを押すと、kintoneの情報を印刷します。

gif

準備するもの

ATOM Printer - 感熱プリンタキット（サーマルプリンター）
- 付属：感熱紙ロール × 1 , シール式感熱紙ロール × 1
ACアダプタ
- DC 12V / 2.5A power adapter (5.5mmジャック)
  ※ 2.5A以上であればOKです
USB Type-Cケーブル
- PCとATOM Liteを接続します
PC
- Arduino IDEをダウンロードし、カスタムコードをプリンターに書き込みます。お使いのPCに合わせてダウンロードをしてください
kintone
- kintoneアカウントをお持ちではない方は、無償のkintone開発者ライセンスを取得してください

サーマルプリンター（熱転写式プリンター）とは？

今回使用するATOM Printerは、サーマルプリンターと呼ばれるプリンターに分類されます。サーマルプリンターは、熱によって専用の感熱紙などの媒体に印刷を行なうプリンターです。液体のインクを必要としないため、カートリッジの交換が不要という利点があります。身近なところでは、レシートや切符等で使用されています。

ATOM Printerの特徴

ESP32 picoベースのIoTコントローラ ATOM Liteを搭載した、印字幅58 mmのデスクトップDIY感熱プリンターです。テキスト、グラフィックス、キャラクター、バーコード、QRコードに対応、AP/MQTTモードで印刷できます。https://www.switch-science.com/products/7630

Arduino IDEとは？

Arduino IDE（Integrated Development Environment）は、Arduinoボードや互換性のあるマイコンボードのソフトウェア開発環境です。Arduino IDEを使用して、Arduinoプログラム（スケッチ）を書き、それをArduinoボードに書き込むことができます。

手順

ATOM Printerの設定
Arduinoの設定
kintoneの設定
カスタムコードを書き込む
動作確認

1. ATOM Printerの設定

ATOM Printer 公式のクイックスタートを参考に、ATOM Printerの設定を行います。 ATOM Printerに電源を入れてエラーが出ない場合は、手順2の「Arduinoの設定」を進めてください。

下記のエラーがプリントされる場合はファームウェアを書き込み直す必要があります。

Mode:UIFLOW
WiFi Password Erro!

1. UIFLOW FIRMWARE BURNING TOOL をダウンロード

お使いのPCに合わせてダウンロードしてください。Macの場合は、ダウンロードしたパッケージををアプリケーションフォルダに移動する必要があります。
参考：M5Stack UIFlowのファームウェア更新手順 – スイッチサイエンスマガジン

2. ATOM_PRINTER（official）をダウンロード

ATOMタブからATOM_PRINTERをダウンロードします。

3. PCとATOM Printerを接続し、Eraseして最初にフラッシュを消去

現在のファームウェアを削除します。

4. Burn（書き込み）を実行

ファームウェアを書き込み直します。 ※エラーになる場合はBaudRate:1500000に変更して書き込んでください

2. Arduinoの設定

次に、M5Stack ATOM Lite用のライブラリをインストールします。Arduino IDEを開き、手順に沿ってライブラリを追加していきます。

1. `メニューバー` > `基本設定` > `追加のボードマネージャのURL`に下記のURLを貼り付ける

https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json
※追加のボードマネージャのURLはサードパーティのマイコンボードのマイコン定義を取得する場合に使用します

2. M5Stack ドライバーのインストール

ボードマネージャーを表示し、M5stackを検索し、インストール

3. M5Atom, M5Stackライブラリのインストール

ライブラリマネージャーを表示し、M5Atomを検索し、インストール

ライブラリマネージャーを表示し、M5Stackを検索し、インストール

4. ボードを選択

メニューバーの下にあるプルダウンメニューをクリックしてシリアルボードの一覧を表示し、M5Stack-ATOMを選択する

参考リンク：
- Arduino IDE Development
- Arduino開発環境のセットアップ

3. kintoneの設定

1. kintoneアプリを作成する

kintoneにアプリを作成します。今回はシンプルにタイトルと本文を保存する記事管理アプリを作成しました。アプリの作成方法は「アプリをはじめから作成する | kintone ヘルプ」を参考にしてください。

フィールド項目	フィールド名	フィールドコード
文字列（1行）	タイトル	title
文字列（複数行）	内容	content

2. データを登録する

数件データを登録しておきます。
アプリにデータを登録してみよう | kintone ヘルプ

3. API Tokenを発行する

アプリの一覧画面の右側にある歯車アイコンから、設定タブを表示し、API トークン項目をクリックします。レコード閲覧の権限にチェックが付いていることを確認し、API トークンとアプリIDをメモしておいてください。また、右下の青い「保存」ボタンをクリックし、右上の「アプリの更新」ボタンからアプリ反映を忘れずに行ってください。詳しい手順は、「APIトークンを生成する | kintone ヘルプ」を確認してください。

API トークンを生成する — APIトークンの権限を確認し、APIトークンとアプリ番号をメモしておく

4. カスタムコードを書き込む

GitHubのM5Stack ATOM-PRINTER レポジトリをCloneして手元で動かしていきます。

https://github.com/m5stack/ATOM-PRINTER/tree/master

使用するのは、examples/PRINTER_TEST.inoとsrcディレクトリ以下の3ファイルです。PRINTER_TEST.inoとsrc以下のファイルを同じ階層に保存しておきます。（画像参照）

今回は、ボタンをクリックしたらkintoneの最新のレコード1件のデータを印字するカスタマイズコードを追加します。Arduino IDE上でPRINTER_TEST.inoを開いて、コードを修正します。

※コード上でXXXXXXX になっている部分は、適宜修正が必要です。

#include <M5Atom.h>
#include "ATOM_PRINTER.h"
#include <Arduino.h>
#include <WiFi.h>
#include <HTTPClient.h>
#include <ArduinoJson.h>

ATOM_PRINTER printer;

// WiFiの設定
const char* ssid = "XXXXXXX"; // Wi-FiのSSID
const char* password = "XXXXXXXXXX"; // Wi-Fiのパスワード

// kintoneの設定
const char* kintoneDomain = "XXXX.cybozu.com"; // kintoneのURL
const char* kintoneAppID = "XX"; // コピーしたkintoneのアプリID
const char* kintoneAPIKey = "XXXXXXXXXXXXX"; // コピーしたAPI トークン

// 'fieldValue' 変数を関数の外で宣言
String fieldValue = "";
String titleValue = "";
String contentValue = "";

// 構造体定義
struct RecordData {
    String title;
    String content;
};

RecordData getLatestDataFromKintone() {
// String getLatestDataFromKintone() {
  HTTPClient http;
  // Kintone APIのエンドポイント
  String endpoint = "https://" + String(kintoneDomain) + "/k/v1/records.json";
  endpoint += "?app=" + String(kintoneAppID);

  // HTTPリクエストの送信
  http.begin(endpoint);
  http.addHeader("X-Cybozu-API-Token", kintoneAPIKey);

  int httpResponseCode = http.GET();
  Serial.print("HTTP Response Code: ");
  Serial.println(httpResponseCode);
  RecordData recordData;

  // レスポンスの処理
  if (httpResponseCode == HTTP_CODE_OK) {
    String response = http.getString();
    Serial.println("Response:");
    Serial.println(response);

    // JSONデータを解析
    DynamicJsonDocument jsonDoc(4096);  // メモリサイズは必要に応じて調整
    deserializeJson(jsonDoc, response);

    // 最新のデータを取得
    JsonObject latestRecord = jsonDoc["records"][0];
    titleValue = latestRecord["title"]["value"].as<String>();
    contentValue = latestRecord["content"]["value"].as<String>();
    recordData.title = latestRecord["title"]["value"].as<String>();
    recordData.content = latestRecord["content"]["value"].as<String>();
  } else {
    Serial.println("Failed to fetch data from Kintone");
  }
  http.end();
  return recordData;
}

void setup() {
  // WiFi接続
  WiFi.begin(ssid, password);
  Serial.println(WiFi.status());
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
  }
  Serial.println("Connected to WiFi");

  // put your setup code here, to run once:
  M5.begin(true, false, true);
  printer.begin();
  M5.dis.drawpix(0, 0x00ffff);
  printer.init();
}

void loop() {
  if (M5.Btn.wasPressed()) {
    Serial.println("Btn.wasPressed");
    // Kintoneからデータを取得
    RecordData data = getLatestDataFromKintone();

    printer.newLine(2);    // 2行空行を作る
    printer.init();
    printer.printASCII(data.title); // kintoneから取得したタイトルを印字
    printer.newLine(2);
    printer.printASCII(data.content); // kintoneから取得した内容を印字
    printer.newLine(3);
  }

  M5.update();  //ボタンの状態更新
}

コードを修正できたら、検証ボタン（チェックボタン）をクリックしコードがコンパイルできるかチェックします。問題がなければ、書き込みボタン（→ボタン）をクリックしATOM Printerにカスタムコードを書き込んでください。

5. 動作確認

ATOM PRINTER の側面のボタンを押す
kitnoneの最新レコード内容が印刷できることを確認する

以上でカスタマイズは完成です。

日本語印刷ができない

ATOM_PRINTER_CMD.hやATOM_PRINTER.cppにコードを追加して、サーマルプリンターの設定を日本語（PC932[Japanese]）にしたり、日本語の文字コードを追加してみたりしたものの、うまく日本語が印刷できませんでした...

公式のコマンドドキュメント？...そりゃあ読みましたよ（※画像ではDeepLに翻訳を任せたため日本語になっています）

参考：ATOM Printerの公式コマンドドキュメント
もし知見のある方がいれば、是非記事にコメント頂けると助かります。

まとめ

インクのことを気にせずプリントできるサーマルプリンターは便利だなと感じました。また、ATOM Printerはサンプルコードも用意されており、比較的手軽にカスタマイズできる印象を持ちました。ただ、ATOM Printerの公式コマンドドキュメントが中国語だったため、思いの外理解するのが難しかったです。また、日本語の印字に関しては、まだ課題の残るカスタマイズになってしまったため、他の解決策を模索して、イベントで活用できるように改善していこうと思います。

kintoneGeeks blog

kintoneに関連する情報を発信しています

ATOM Printer（サーマルプリンター）とkintoneを連携してみた

はじめに

全体像

完成形