M5stack ( ESP32 ) に4か国の Twitter トレンドを切り替えて表示させてみた

記事公開日:2018年5月5日

こんばんは。

今回は ESP32 搭載の M5stack に Twitter トレンドを1分毎に自動取得してトップ10 を表示させ、さらにボタンスイッチで4か国のトレンドデータを切り替えてみました。
4か国といっても、

日本
地球
アメリカ
イギリス

です。
残念ながら、自分の作ったライブラリでは、日本語と英語しか表示できないので、必然と英語圏と日本しか表示できませんでした。
でも、地球にすると、ある程度の人類のトレンドを把握することが出来て、なかなか良いです。
シリアルモニターで見るとアラビア語なども見ることができ、さっぱり分かりませんが、それでも地球の動向が何となく分かります。

驚いたのは、日本のトレンドツイートが地球のトップ10にたまに入って来ることです。
「天空の城ラピュタ」の「バルス」祭りの様に、ほんとに日本ってツイッター好きなんだなぁと思いました。

スポンサーリンク

ということで、以下の動画をご覧ください。

いかがでしょうか。

ボタン操作はこんな感じになっています。

M5stack_TwitterAPIs09

色のグラデーションについては、実際の見た目と写真では異なります。

他の色はこんな感じです。
現在、3色しか作っていません。

◆地域:地球、 色:赤

M5stack_TwitterAPIs11

文字コードが UTF-8 で Shift_JIS変換できる文字だけ表示されます。
これ、面白いですね。
地球規模で、日本のツイートがトップ10に入っています。
ほんとに日本人はツイート好きだなぁ・・・。

◆地域:米国、 色:緑

M5stack_TwitterAPIs12

◆地域:英国、 色:青

M5stack_TwitterAPIs13

通常文字は 16×16 pixel 東雲フォントを2倍角で表示していますが、トレンドツイートが半角15文字以上になったら、横幅だけ1倍角なって、細字で表示されます。
最初はスクロールさせていたんですが、メモリが足りなくなるのと、横幅1倍角にすれば大抵のトレンドを把握できたので、スクロールはやめました。

因みに、Aボタンを押さなくても、そのまま放置しておけば、1分後にはトレンドツイートを GET していきます。

「地球」にした場合のトレンドが面白いですね。
アラビア語などは空白になってしまいますが、アルファベット圏のトレンドは何となくわかります。
残念ながら中国は表示できませんでした。
やっぱりツイッター禁止だからでしょうか?

ツイッタートレンドデータっていうのは、常に目の付くところに置いておきたいと個人的に思っています。
パソコンで常に表示させておくこともできず、スマホで見るというのも面倒です。
例えば、テレビのオリンピックを見ながら、目の付くところにトレンドデータが常に表示されていれば、便利ですよね。

今回、我ながら良い出来に仕上がりました。
今まで Twitter APIs を使っておきながら、なんでこういうものを作らなかったんだろうと思いました。
M5stackのディスプレイが大きいので多くの情報が表示できるということが、こういうプログラムを組もうと思ったキッカケになりましたね。

では、この作り方を説明します。

なお、Arduino core for the ESP32 で開発しています。

また、基本的に私は素人なので、コードに無駄や誤り等があるかもしれません。
何か不具合等がある場合、ご連絡いただけると助かります。

使うもの

M5stack

Espressif Systems社の ESP32 搭載、技適取得済みWi-Fi & Bluetooth マイコンモジュールです。
TFT LCD ( 液晶ディスプレイ)や micro SD カードスロット、スピーカー、Groveコネクタ、USB-TypeC、ボタンスイッチ、簡易バッテリーなどが付いた、電子工作で必要な殆どの物が同梱された全部入りモジュールです。
私は、9軸センサー入りのグレーのものを使っていますが、ブラックのベーシックでもOKです。

因みに、個人的にレビューした記事がありますので合わせて参照してみてください。

M5stack ( ESP32 搭載 ) を分解したり電源を入れてみて、いろいろ思ったこと

micro SDHC カード

micro SDHC カードについて、私は以下の物を使用して動作確認しています。
単なる micro SD カードや SDXC カードは動作しない場合がありますので注意してください。

因みに大手メーカー製の物の方がトラブル少ないと思われます。

フォーマットについては、通常は FAT32 でフォーマットされて販売されていると思います。
もし、されていない場合は、以下の記事を参照して、フォーマットしておいてください。

micro SD 、micro SDHC カードの初期化(フォーマット)方法

パソコン、Wi-Fi環境、USBケーブル等

パソコンに関しては、以下、Windows10 で説明します。

Wi-Fi環境は、2.4GHz 帯のもので、事前にファイアウォール設定や、MACアドレスフィルタリングなどの設定を見直し、M5stack ( ESP32 )がインターネットに接続できるようにしておいてください。
ESP32 の Wi-Fi MACアドレスの確認方法は以下の記事を参照してください。

ESP-WROOM-32 ( ESP32 ) チップ・メモリ・MACアドレス情報取得方法

では、次のページでは、Twitter APIs キーやライブラリのインストールを説明します。

スポンサーリンク

mgo-tec電子工作 関連コンテンツ ( 広告含む )

投稿者:

mgo-tec

Arduino , ESP32 ( ESP-WROOM-32 ) , ESP8266 ( ESP-WROOM-02 )等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってますので、動作保証はしません。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしていて、介護にドップリ浸かりそうな年配者です。 少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持っています。

「M5stack ( ESP32 ) に4か国の Twitter トレンドを切り替えて表示させてみた」への14件のフィードバック

  1. mgo-tec 様

    お盆休みのところをお手数をお掛けし申し訳ありません。
    「 ESP32 を使ってTwitter トレンドを取得してみた」を、以前にチャレンジしたのですがうまく動作せず、初心者には難しすぎると諦めていました。
    今回、「M5stack に4か国のトレンドを切り替えて表示させてみた」を拝見し、ほかのテキストはほぼクリアできていたので改めて挑戦してみましたが結果は変わりませんでした。
    シリアルモニターは、
    —– HTTP GET Request Send 、「 ESP32 を使って…」テキスト通り
    —– HTTP Response 、「 ESP32 を使って…」テキストと似た表示
    となっています。
    Twitter API の登録、認証キーは、何度か入力の確認をしたので問題ないと思うのですが。
    チェックポイントがありましたらご教示の程お願いいたします

    1. juchang さん

      いつもお試しいただき、ありがとうございます。

      これはすんなり動くと思っていたのですが、おかしいですね。

      では、まずお聞きしたいのは、シリアルモニターの表示で、HTTP Response の後に、
      —JSON GET ALL—
      と表示されて、何か文字が出ていますでしょうか。
      出ていれば、その文字列を教えてください。
      出ていなければ、他に文字列は何か出ていますでしょうか?

      また、
      —-HTTP Response
      の後の表示で、以下の項目はどの様に表示されているか教えてください。
      ●date:
      ●status:

      また、Arduino core for the ESP32 は最新版になっていますでしょうか?

      できれば、シリアルモニターの情報を全てお知らせいただいた方がトラブルを速く見つけられるかもしれません。
      よろしければ、個人の Twitter API 情報を削除して、可能な限り教えて頂ければ助かります。

      1. mgo-tec 様

        今日も一日、いろいろと試してみましたが、解決の糸口がつかめません。
        最終的に、library を全て削除し、このスケッチに必要な library を入れ直してみましたが同じ結果となります。
        シリアルモニターの情報を再度送らせていただきます。
        ご検討の程よろしくお願い致します。

        ———-HTTP Response
        HTTP/1.1 401 Authorization Required
        connection: close
        content-length: 62
        content-type: application/json; charset=utf-8
        date: Sat, 18 Aug 2018 11:25:28 GMT
        ………(中省略)……………
        x-response-time: 104
        ———-JSON GET ALL
        —————Client Stop

        1. juchangさん

          シリアルモニターログ、お送りいただき有難うございます。
          投稿では、全文記載されていましたが、秘密情報っぽいところはこちらで(中省略)とさせていただきましたのでご了承ください。

          見たところ、HTTP/1.1 401 と返ってきているので、Twitter API とのAuth認証ができていないようです。

          まず、以下の記事の「Twitter APIs に登録し、Access Token を生成する」項目を見てください。
          https://www.mgo-tec.com/blog-entry-twitter-api-arduino-esp32-trend-get.html
          そこの、ご自分のWebsite URL と Callback URL に入力されているか確認してみてください。
          もし、無ければ、
          https://twitter.com
          とでも入力すれば良いかも知れません。
          もし、これがダメなら別のサイトのURLなのかも知れません。
          私の場合はWebがあるので、自分のブログのURLを入力しました。
          それで、再度Auth認証キーを取得し直してください。

          その他、Auth 認証では、ESP32の時刻がピッタリ合っている必要があります。
          これはNTP時計で合わせていると思うので問題無さそうです。
          ログのdate:は米国時間だと思います。

          HTTPレスポンスヘッダから、Twitter API の Auth認証が原因と思われますので、それさえクリアできれば恐らく動作するものと思われます。
          以上、ご確認くださいませ。

          1. mgo-tec 様

            動作確認ができました!
            Access Token の情報確認ページがあることが解り、開いたところ完結していないことが判明しました。
            自分の URL が無いためなのか、Access Level を Read and write から Read-only に変える必要がありました。
            早速スケッチを変更し、コンパイル書き込み実行を行うと、テキスト通りの画面表示となりました。
            お忙しい中、色々とご指導いただきありがとうございます。
            これでまた、新しい投稿をお待ちする日々に戻れます。
            ありがとうございました。

          2. juchangさん

            動作して良かったです。

            実は、つい先ほど久々に Twitter Developers にログインしようとしたら、全てがガラッと変わっていて、ログインする方法すら分からなかった次第です。
            こちらのページも修正していかねばなりませんね。
            大変だぁ・・・。

            私の以前作成したアカウントのアクセストークンページでは、勝手に Read-only にされていました。
            仕様が変わったみたいですね。
            お知らせいただき、ありがとうございました。
            Twitter でもこの情報は流しておきます。
            m(_ _)m

  2. mgo-tec 様

    M5stack での動作確認ができたので、ILI9341 での表示に挑戦してみました。
    ESP32_LCD_ILI9341_SPI.cpp 91・92行目のコメント操作を行い、コンパイル実行すると、横置・反転表示となります。
    LCD.Disp_Rotation(0) とすると、縦置・反転
    //LCD.Disp_Rotation(1) とすると、横置・正表示
    LCD.ILI9341_Init(false, 40000000);
    LCD.Disp_Rotation(250);
    LCD.Display_Clear(); とすると、縦置・反転となります。
    ローテーション番号は、ライブラリ関数ソースコードを見てとのことですが理解できておりません、ご教示の程お願いいたします。

    1. 匿名さん

      記事をご覧いただき、ありがとうございます。

      ESP32_LCD_ILI9341_SPI ライブラリは、今かなりバージョンアップしています。
      因みに、バージョンはいくつのものをお使いでしょうか?

      ILI9341関連ライブラリは、上位バージョン、
      ESP32_LCD_ILI9341_SPI_V2
      というものもあります。

      さらに、最近は
      ESP32_mgo_tec ライブラリ
      にすべてパッケージされていて、そこの中の
      ili9341_spi.cpp
      ファイルが最新のドライバライブラリです。
      ただ、ESP32_LCD_ILI9341_SPI ライブラリとは関数名が全く異なるため、互換性はありません。
      でも、構造はほとんど同じです。
      これから先は、このESP32_mgo_tecライブラリを更新していきます。

      では、とりあえず、ESP32_LCD_ILI9341_SPIライブラリ beta ver 1.25 で話を進めていきます。
      ILI9341 モジュールは、メーカーによって、仕様が異なります。
      私はサインスマートのものを使いましたが、別メーカーだとコマンドが異なります。

      まず、上位バージョン ESP32_LCD_ILI9341_SPI_V2 の ESP32_LCD_ILI9341_SPI_V2.cpp ファイルを見てください。
      以下のリンクにあります。
      https://github.com/mgo-tec/ESP32_LCD_ILI9341_SPI_V2/blob/master/src/ESP32_LCD_ILI9341_SPI_V2.cpp

      94行~193行を参考にして、Disp_Rotation 関数をいろいろ書き替えてみて下さい。
      引数名は古いバージョンの方にしてくださいね。
      ESP32_LCD_ILI9341_SPI.cpp 91・92行目は変えずに、スケッチ上でDisp_Rotation関数を置けば、その後はディスプレイはすべてローテーションされます。

      ただ、お持ちの ILI9341モジュールによっては、どれも上手くいかない場合があります。
      そうしたら、お手上げかも知れません。
      とりあえず、試してみて下さい。

      1. mgo-tec 様

        署名を忘れてしまい申し訳ありません。
        ESP32_LCD_ILI9341_SPI のライブラリは、ver 1.23 を使用しています。
        Display Rotation の場所を教えていただいたので、もう少し自分で研究してみます。

        1. juchangさん。

          いつもコメントありがとうございます。
          署名忘れても問題ありません。
          気になさらなくても大丈夫ですよ (^^)

          また何か分からなければ、ご連絡いただければと思います。

  3. mgo-tec 様

    お陰様で、HiLetgo 2.8 “TFT LCD” の縦置き表示が可能となりました。
    Disp_Rotation 関数を書き替えていくなかで、
    b = 0b01001000
    で正表示となることが解り、
    _Max_Width_x = 240;
    _Max_Width_y = 320;
    で10列表示が可能となりました。
    取り急ぎご報告まで。
    ありがとうございました。

    1. juchangさん

      動いてよかったです!
      別途ディスプレイ使った方が、M5Stackより大きい画面にできて良いですよね。
      この Twitter トレンドは、イチ押しのアイテムです。
      こちらこそ、いつもお試しいただき、そしてサポート頂き、ありがとうございます。
      今後ともよろしくお願いいたします。
      m(_ _)m

  4. Hi mgo-tec;

    Will the twitter work on ESP32 after the last twitter access update? Do you intend to publish a new article about it?

    1. Hi Mustafa.

      I am working now without problems.
      The apps registration method of Twitter developers of this blog article article has already been fixed.
      Are you working?

コメントを残す

メールアドレスが公開されることはありません。

*画像の文字を入力してください。(スパム防止の為)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください