ITmedia NEWS > STUDIO >
ITmedia AI+ AI活用のいまが分かる

ノーコードでTwitterクライアント魔改造 Androidアプリ「MarinDeck」開発の裏側(1/2 ページ)

» 2021年01月08日 12時30分 公開
[井上輝一ITmedia]

 Twitterからリアルタイムに情報を得たい人が使っているツールとして、よく挙がるのが公式クライアント「TweetDeck」だ。サードパーティークライアントがリアルタイム更新を実装するのに必要だったAPI「User Streams」(ユーザーストリーム)の提供は2018年に終了してしまったため、そうした機能を使いたいなら事実上TweetDeckを使うしかない。

 ただ、TweetDeckはPCのWebブラウザから見ることを前提に作られているため、スマートフォンからも閲覧自体はできるものの、UIの最適化はされていない。JavaScriptを使ってUIをスマホに合わせたAndroidアプリ「TJDeck」もあったが、現在開発は止まっている。

 こんな中、20年末に現れたのが「MarinDeck」だ。TweetDeckのカラムをスマホの表示幅に合わせるだけでなく、スワイプでのカラム切り替えや独自の設定画面などを実装。作者のさぶうぇい(@HiSubway)さんは「Twitter for Androidのような使い勝手を目指した」という。TweetDeckやかつてのUserStream対応クライアントユーザーを中心に話題となり、アプリの紹介ツイートは現在約1300リツイートに。

TweetDeckをAndroidスマートフォン向けに最適化したアプリ「MarinDeck」

 単にWebブラウザをアプリ内表示しているだけではなく、メニューやタブナビゲーションをTweetDeckとは別に、Androidネイティブの部品で実装している。このMarinDeck、実は「ノーコード」で開発したのだとさぶうぇいさんは明かす。自身のツイートで、ソースコードならぬ「ソースブロック」のチラ見せも。

 どのようにして、ノーコードでMarinDeckを作り上げたのか。さぶうぇいさんに話を聞いた。

GUIでUI組み立て、ブロックで機能実装できる「Kodular」

 さぶうぇいさんが今回開発に使ったのは、米Junnovateの「Kodular」という、Androidアプリのノーコード開発ツールだ。利用は商用も含めて完全に無料。広告の埋め込みも可能だが、広告収益の何%かがJunnovateに入る仕組みだ。

Androidアプリのノーコード開発ツール「Kodular」公式サイト

 Android公式の開発環境「Android Studio」のように、ボタンや画像など各種部品を配置してUIを作れる画面(Designer)と、UI上の部品などに対して具体的な機能を実装するための画面(Blocks)が分けられている。標準的な開発環境では機能実装にコーディングを必要とするが、Kodularの場合は命令ブロックのつなぎ合わせ、いわゆるビジュアルプログラミングで作れるのがポイントだ。

MarinDeckの設定のUI作成画面。左カラムからボタンなどの部品を選んで視覚的にUI上へ配置していける
MarinDeckの命令ブロックの一部。QRコードリーダーの機能をブロックで作っている

 「プログラミング(言語)はあまり得意ではない」とさぶうぇいさんは話す。「Cは少し書けるが、まともに使えるアプリにするまでが遠い。Kodularは簡単にアプリを作れるのがいい」(同)

 さぶうぇいさんがKodularと出合ったのは約3年前。徳島で食料品卸問屋を営む形部商事が、業務アプリの開発にKodularの前身となる「App Inventor」を使い、自社ブログで紹介していたのを見たのがきっかけだった。

 「こんな風にアプリを作ってみたい」。プログラミング自体との出合いもほぼ同時期だったというさぶうぇいさん。無類のAndroid好きで、これまでに使ったスマホやタブレットは数十台。自身のスマホで動くアプリをすぐ作れることに引かれて、Kodularによる開発を始めた。

 日本語ではKodularに関する情報がほとんどないが、Kodularの英語コミュニティーで話されている情報を機械翻訳を使って学んだ。約3年間で作ったアプリは8つほど。最初に作った日本語変換アプリ「怪しい日本語」が現在までに約1000RTと好評だったが、MarinDeckはすでにそれを越す反響だという。

MarinDeckのソースブロックは「病的」?

 ここで、MarinDeckのソースブロックの俯瞰図を見ていこう。小さく収まっているブロックもあれば、肥大化しているブロックもある。特に一番左のブロックを見ると1つの親ブロックに多数の子ブロックがつながっている様子が分かる。

       1|2 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.