ESP3266とSSD1306で日本語表示

# はじめに
ESP3266を使ってOpenWeatherMapとNews APIからデータを取得してSD1306で表示することで、一瞥して現在の天候とニュースを知れるものをつくろうと思った。しかし、最初にAdafruitのSSD1306のライブラリを使っていたことが破滅への道だった。

ちなみに、この記事通りにやると以下のような感じで表示される。

![IMG_4795.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337685/5950d9c9-5305-a55c-38aa-27ec8454e863.jpeg)


# LovyanGFX
GFXとは何ぞやという人は、おそらくSSD1306のライブラリのインストール時の依存関係で見たと思う。これは、グラフィックスに関するライブラリで図の描写やテキストの描写を行うライブラリである。

LovyanGFXはAdafruitとかとは別のGFXである。

SD1306のライブラリではなく、というかAdafruitのライブラリではなくこちらを使っておけばよかった。

# 手順
## 1
まず、

https://github.com/tanakamasayuki/efont

をダウンロードする。tanakamasayuki様、この度は本当に助かりました。ありがとうございました。

すると、中に
```
efontEnableJa.h
efontFondData.h
```
があるので、スケッチと同じフォルダに置く。この時、.inoファイルと同じディレクトリであることを確認する。

## 2
Arduino IDEのライブラリマネージャからLovyanGFXをインストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337685/e616aa3b-ed75-b43a-6e15-a3bbd7acffca.png)

## 3 
また、.inoディレクトリに移動してLovyanGFX_SSD1306_Config.hppを作成する。
内容は以下のようなもの
```
#ifndef LOVYANGFX_SSD1306_CONFIG_H
#define LOVYANGFX_SSD1306_CONFIG_H

#include <LovyanGFX.hpp>
#include <lgfx/v1/panel/Panel_SSD1306.hpp>
#include <lgfx/v1/platforms/esp8266/Bus_I2C.hpp>
#include "efontEnableJa.h" // efontをインクルード

class LGFX : public lgfx::LGFX_Device
{
  lgfx::Panel_SSD1306 _panel_instance;
  lgfx::Bus_I2C _bus_instance;

public:
  LGFX()
  {
    {
      auto cfg = _bus_instance.config();
      cfg.i2c_port = 0;
      cfg.freq_write = 400000;
      cfg.freq_read  = 400000;
      cfg.pin_scl = 5; // D1ピンを設定 (ESP8266のD1)
      cfg.pin_sda = 4; // D2ピンを設定 (ESP8266のD2)
      cfg.i2c_addr = 0x3C;

      _bus_instance.config(cfg);
      _panel_instance.setBus(&_bus_instance);
    }

    {
      auto cfg = _panel_instance.config();
      cfg.panel_width  = 128;
      cfg.panel_height = 64;
      cfg.offset_x     = 0;
      cfg.offset_y     = 0;
      cfg.offset_rotation = 0;
      cfg.memory_width  = 128;
      cfg.memory_height = 64;

      _panel_instance.config(cfg);
    }
    setPanel(&_panel_instance);
  }
};

#endif // LOVYANGFX_SSD1306_CONFIG_H

```

SD1306のピン配置はSDAがD2で、SCLがD1であると仮定する。

## 4
```
#include <LovyanGFX.hpp> // LovyanGFXライブラリをインクルード
#include "LovyanGFX_SSD1306_Config.hpp" // SSD1306ディスプレイの設定ファイルをインクルード
#include "efontEnableJa.h" // 日本語フォント（efont）をインクルード

// LGFXクラスのインスタンスを作成
LGFX lcd;
// LGFX_Spriteクラスのインスタンスを作成し、lcdオブジェクトを引数として渡す
LGFX_Sprite sprite(&lcd); // オフスクリーンバッファ

void setup() {
  Serial.begin(115200); // シリアル通信を115200ボーレートで開始

  // ディスプレイの初期化
  lcd.init();
  lcd.setRotation(0); // 必要に応じてディスプレイの回転を設定
  lcd.fillScreen(TFT_BLACK); // 画面を黒で塗りつぶす

  // スプライトの初期化
  sprite.createSprite(128, 64); // 画面サイズに合わせたスプライトを作成
  sprite.setFont(&fonts::efontJA_16); // 日本語フォントを設定
  sprite.setTextSize(1); // テキストサイズを1に設定
  sprite.setTextColor(TFT_WHITE); // テキストカラーを白に設定

  // 「こんにちは世界」を表示
  sprite.fillScreen(TFT_BLACK); // スプライトを黒で塗りつぶす
  sprite.setCursor(0, 0); // カーソル位置を(0, 0)に設定
  sprite.println("こんにちは世界"); // 「こんにちは世界」をスプライトに描画
  sprite.pushSprite(0, 0); // スプライトを画面に描画

  delay(3000); // 3秒間待機

  // 「Hello World」を表示
  sprite.fillScreen(TFT_BLACK); // スプライトを黒で塗りつぶす
  sprite.setCursor(0, 0); // カーソル位置を(0, 0)に設定
  sprite.println("Hello World"); // 「Hello World」をスプライトに描画
  sprite.pushSprite(0, 0); // スプライトを画面に描画
}

void loop() {
  // 何もしない
}


```

これで日本語を描画できます。


ちなみに、tanakamasayukiさんのefontはライブラリマネージャからダウンロードできるので、`#include <efont--->`でもいいと思います。

# 戒め
SSD1306って安いながらも、中華雑魚アクチュエーターとしてはそこそこのお値段するので、絶対に金属に近づけてはいけない。特に帯電しているもの。2枚セットのうちの一枚を必ず静電気で破壊してしまう。