NoCodeツールのThunkableとは?特徴や使い方を解説【アプリの作り方も公開】

ThunkableNoCode

こんにちは!
てつごろう(@Te256g)です。

プログラミングが不要でWeb開発ができるNoCodeツールの一つ、Thunkableをご存知でしょうか?

モバイル向けのアプリ開発プラットフォームで、ブロックを組み合わせていくだけで簡単にアプリを作ることができるのが最大の特徴です。

Androidアプリ、iOSアプリ、Webアプリ(PWA)を、プログラミングすることなくドラッグ&ドロップの操作だけで作ることができます。

そこでこの記事では、Thunkableの特徴や登録方法、基本的な使い方を解説します。

実際に翻訳アプリの開発手順もご紹介しているので、ぜひご自身でも試してみてください!

てつごろう
てつごろう

プログラミング未経験でも簡単にアプリ開発できるように、分かりやすく手順を解説したんだよ。


 筆者について

大学時代に情報システム系学科でC、Java、VC++を学ぶ。IT企業ではハードウェアエンジニアとしてWindows/UNIX系システムの保守・運用を担当。現在は個人でWebサイト制作を請け負っています。NoCodeの可能性に惹かれ、Webサービス開発に向けて勉強中。

てつごろう|@Te256g


スポンサーリンク

1. Thunkableとは?NoCodeでモバイルアプリを開発

Thunkable公式サイト
Thunkable公式サイト

Thunkableはプログラミング不要でモバイルアプリの開発ができるツールです。

視覚的にアプリを作れるツールはAdaloやGlideなど様々な種類がありますが、Thunkableの大きな特徴は「ブロック」でプログラムを組むところ。

Thunkableはブロックでプログラムを組む
Thunkableはブロックでプログラムを組む

複雑そうに見えるかもしれませんが、分かりやすい説明動画やドキュメントが豊富で、ブロックに書かれている英語も簡単なものが多いため、誰でも簡単にアプリを開発することができます。

2. Thunkableの料金プラン

料金プラン
料金プラン

基本的には無料で開発ができます。

上図の通りMobile Web App(ウェブ版のアプリ)として公開するためには月額21ドルのPRO版へのアップグレードが必要です。

またPRO版に「Unlimited Private + Public Projects」とありますが、Free版では開発したアプリはThunkable上に公開されます。

開発中のアプリを公開したくない場合があると思いますが、そのためにはPRO版にアップグレードする必要があります。

詳細は公式サイトの料金ページをご覧ください。

スポンサーリンク

3. Thunkableの特徴

Thunkableの主な特徴は以下の3つです。

Thunkableの特徴

特徴① ブロックを組み合わせて開発
特徴② 操作方法を習得できる動画やコンテンツが豊富
特徴③ 読み上げ機能などの音声系コンポーネントが豊富

それぞれの特徴について解説します。

特徴① ブロックを組み合わせて開発

ブロックでプログラムを組むインターフェース
ブロックでプログラムを組むインターフェース

Thunkableの最大の特徴と言えるのが、プログラムをこのようにブロックで組み上げるインターフェースです。

上記のプログラムをDesignモード(見た目を作るモード)で見ると下図のようなイメージです。

ここで画像や入力フォーム、ボタンなどを配置した後、Blocksモードでそれぞれの要素に対する動作を組み上げて行く流れで開発していきます。

Designモード
Designモード

特徴② 操作方法を習得できる動画やコンテンツが豊富

チュートリアル動画を見ながら開発できる

チュートリアルを見ながら開発できる
チュートリアルを見ながら開発できる

開発画面の左側にはTutorials(チュートリアル)があります。

見たいチュートリアル動画を開くと、開発画面の前面にポップアップで動画が表示されるので、再生しながら開発をしていくことができます。

てつごろう
てつごろう

料理の動画を見ながら食事を作る感じなんだよ。
僕はあまり料理しないけど…。

学習用コンテンツが初心者に優しい

例えば下記のページで解説されているのは日付の入力プログラムの作り方です。

Date Input

このように完成イメージはもちろん、ブロックをどのように組み合わせればいいかを視覚的に解説してくれいます。

学習用コンテンツが分かりやすい
学習用コンテンツが分かりやすい

特徴③ 読み上げ機能などの音声系コンポーネントが豊富

Tunkableには音声系のコンポーネントがたくさん揃っています。

例えばこういったものがあります。

  • 入力された文字を音声で読み上げる機能
  • 会話を認識する機能
  • 翻訳機能(英語だけでなく日本語、中国語、フランス語、スペイン語など93言語に対応)

特徴①で解説したように、これらの既存のコンポーネントをブロックのように組み上げていくことで、複雑な機能を持つアプリが簡単に作れてしまうわけですね。

4. Thunkableの始め方

Thunkableの登録方法と、基本的な使い方を解説していきます。

4-1. Thunkableの登録方法

Thunkableに登録する時は、まず公式サイトのトップページ「GET STARTED」をクリックします。

登録は公式サイトトップページから
登録は公式サイトトップページから

サインアップ画面が表示されます。

サインアップ
サインアップ
てつごろう
てつごろう

他の開発ツールと異なるのはApple IDでサインアップできるところ

あなたに最も当てはまるものを選んだらSubmitを押しましょう。

あなたはどんな人?
あなたはどんな人?
【参考】直訳しました

僕が自分で調べた範囲で、直訳するとこうなりました。
大きく間違っていることはないと思うので、参考にしてください。

  • developer:開発者
  • designer:デザイナー
  • entrepreneur:起業家
  • parent or teacher:親または講師
  • professional:専門家
  • student:学生
  • enthusiast:マニア、オタク
  • Someone else:その他
てつごろう
てつごろう

そんなにこだわる必要もないんだよ。

するとこのようにWelcome画面が表示されるので「>」をクリックして進めます。

Welcome画面
Welcome画面

最後に「Download the Thunkable Live app」という画面が表示されます。

開発中のアプリをライブで確認するためのツールをダウンロードすることができます。

ここまでパソコンで進めている方へ

ここまでパソコンで進めている方は、残念ながらこのApp StoreやGoogle Playのリンク先に飛んでも意味がありません…。

お持ちのスマホで各アプリストアにアクセスして「Thunkable」で検索して、ダウンロードしましょう。

各ストアのダウンロードページのリンクも貼っておきますね。

iOS → https://apps.apple.com/us/app/thunkable-live/id1223262700

Android → https://play.google.com/store/apps/details?id=com.thunkable.live

リアルタイムでプレビュー確認するアプリがある
リアルタイムでプレビュー確認するアプリがある

最後にGot itボタンを押して登録作業は完了です。

4-2. Thunkableの基本的な使い方

ダッシュボード
ダッシュボード

ログインするとこのようにダッシュボードが表示されます。

タイル状に並んでいるのはThunkableで開発されたアプリです。

クリックするとプレビューで動作を確認したり、開発画面を見たり、プロジェクトのコピーをすることができます。

開発されたアプリ
開発されたアプリ

例えば上図の赤枠「Sign in Screen Neon Sunset」をクリックすると、このようなアプリの詳細を見ることができます。

Sign in Screen Neon Sunset
Sign in Screen Neon Sunset

ここでSee Insideをクリックすると、下図のような開発画面に入ることができます。

アプリの開発画面
アプリの開発画面

さらにCopy Projectをクリックすればこのアプリをコピーして、自分のプロジェクトとして扱えるようになります。

アプリのコピーをするとMy Projectsに追加される
アプリのコピーをするとMy Projectsに追加される

5. 翻訳アプリの作り方【基本操作を解説】

開発の基本操作を学ぶため、翻訳アプリを作る手順を解説していきます。

英語で文字を入力したら日本語に翻訳して表示し、さらに日本語で話してくれるプログラムを作ってみました。

基本的な操作方法を覚えることができるので、ぜひこの手順で一度作ってみてください。

5-1. 新規作成

まずはダッシュボードからCreate New Appをクリックして、新規でアプリ開発画面を開きます

アプリの新規作成
アプリの新規作成

5-2. コンポーネントを配置

コンポーネントを配置します。

Designタブをクリックして、見た目を作るモードにしておきます。

以下の3つのコンポーネントを左のメニューからドラッグ&ドロップして、スマホ画面に追加してください。

  • Label
  • Text Input
  • Button
コンポーネントの配置
コンポーネントの配置

5-3. 音声系コンポーネントを追加する

次に読み上げ機能、翻訳機能のコンポーネントを追加します。

  • Text to Speech
  • Translator
音声系コンポーネントを追加
音声系コンポーネントを追加

これらのコンポーネントは見た目に関わらない機能なので、ドラッグ&ドロップすると枠外に追加されます。(Invisible Componetsと呼ばれます)

5-4. 言語を設定する

翻訳する言語を設定しましょう。

Translator1のコンポーネントを選択し、右側のメニューで下記の通り言語を変更します。

ここでは英語を日本語に翻訳する設定にします。

  • SourceLanguage:ENGLISH_US
  • TargetLanguage:JAPANESE
翻訳する言語を選択する
翻訳する言語を選択する

次にText_To_Speech1でも以下のように設定してください。

  • Default Language:JAPANESE
スピーチも日本語に
スピーチも日本語に

5-5. 順番や見た目を整える

コンポーネントの並び順を変える場合は、下図の赤枠にある部分(App Tree)でドラッグすると自由に入れ替えることができます。

App Treeでコンポーネントの並び順を変更
App Treeでコンポーネントの並び順を変更

各要素の文字を変更したい場合は、それぞれのコンポーネントをクリックして選択した状態(①)で、右側のメニュー(Properties Panel)で変更できます。(②)

文字を変更
文字を変更

Font Sizeで文字の大きさを変更したり、Colorで文字色を変更することももちろん可能。

お好みに合わせて変更してみてください。

また、コンポーネントを追加した直後は、コンポーネント同士がぴったりくっついてしまいます。

余白を空けるためには、同じくコンポーネントを選択した状態でMarginの値を変えてみましょう。

例えばLabelコンポーネントの下に10pxの余白を空けたい場合、Marginのbottomに10と入力します。

同様にText Inputの下にも余白を入れておきましょう。

コンポーネント同士の間隔を調整
コンポーネント同士の間隔を調整

5-6. ブロックでプログラムを組む

いよいよブロックでプログラムを組んでいきます

ここで作成するプログラムは、以下のように構成していきます。

プログラムの構成

① Button1がクリックされた時に
② 翻訳をする
③ その際、Text Input1に入力された内容を元にする
④ 翻訳した結果をLabel1に渡す
⑤ さらに音声で出力する

Blocksタブをクリックして、モードを切り替えておきましょう。

Blocksモードに切り替える
Blocksモードに切り替える

続いて、Designモードで追加したコンポーネントに対して、プログラムを組んでいきます。

プログラムの構成の順番で解説していきます。

① Button1がクリックされた時に
プログラムの構成

① Button1がクリックされた時に
② 翻訳をする
③ その際、Text Input1に入力された内容を元にする
④ 翻訳した結果をLabel1に渡す
⑤ さらに音声で出力する

まずはプログラムの1つ目「Button1がクリックされた時に」を表すブロックを作ります。

下図のように、画面左側にあるコンポーネントをクリックすると、動作を指定するためのブロックが表示されます。

Button1(Designモードで追加したボタン)をクリックし、右側に表示された中から一番上のブロックをクリックしてください。

ブロックを選択
ブロックを選択

すると開発画面上に、このようにブロックが追加されます。

ブロックに書かれている英語を読むと分かると思いますが、このブロックは「Button1がClickされた時」に何かの動作を起こすためのブロックです。

ブロックが追加された
ブロックが追加された
② 翻訳をする
プログラムの構成

① Button1がクリックされた時に
② 翻訳をする
③ その際、Text Input1に入力された内容を元にする
④ 翻訳した結果をLabel1に渡す
⑤ さらに音声で出力する

続いて、ボタンがクリックされたら翻訳をする手順です。

Translator1を選択し、一番上のブロックをクリックします。

Translatorを追加
Translatorを追加

その後、下図のように①で作成したブロックの空いた口のような部分に、ドラッグしてはめ込みます。

ブロックをはめ込む
ブロックをはめ込む

これで「① Button1がクリックされた時に」「② 翻訳をする」というプログラムを作ることができました。

③ その際、Text Input1に入力された内容を元にする
プログラムの構成

① Button1がクリックされた時に
② 翻訳をする
③ その際、Text Input1に入力された内容を元にする
④ 翻訳した結果をLabel1に渡す
⑤ さらに音声で出力する

次は「③ その際、Text Input1に入力された内容を元にする」という機能を作ります。

Text_Input1の中から「from Text_Input1 get Text」ブロックを選び、Translatorの「”hello”」の上に乗せてみてください。

プログラムを書き換える
プログラムを書き換える

するとこのように処理を変更することができます。

Text Input1の内容を翻訳するプログラムに変更
Text Input1の内容を翻訳するプログラムに変更
④ 翻訳した結果をLabel1に渡す
プログラムの構成

① Button1がクリックされた時に
② 翻訳をする
③ その際、Text Input1に入力された内容を元にする
④ 翻訳した結果をLabel1に渡す
⑤ さらに音声で出力する

続いて「④ 翻訳した結果をLabel1に渡す」の工程。

下図のようにLabel1の「from Label1 set Text to “Label”」をTranslatorブロックの「then do」に追加しましょう。

翻訳したらLabel1に渡す
翻訳したらLabel1に渡す

このままでは文字通り”Label”と出力されてしまうので、Translatorで翻訳した結果を渡すように変更する必要があります。

そこで下図のように「result」というブロックをドラッグして「”Label”」と置き換えましょう。

翻訳した結果(result)をLabel1に
翻訳した結果(result)をLabel1に
⑤ さらに音声で出力する
プログラムの構成

① Button1がクリックされた時に
② 翻訳をする
③ その際、Text Input1に入力された内容を元にする
④ 翻訳した結果をLabel1に渡す
⑤ さらに音声で出力する

いよいよ最後のプログラム。

「⑤ さらに音声で出力する」を実装していきます。

Text_To_Speech1の「in Text_To_Speech1 call Speak」ブロックを、④で作った緑ブロックの下の隙間に入れます。

スピーチ機能を追加

さきほどと同じように、翻訳した結果を読ませたいので、resultブロックを”hello”と書き換えましょう。

翻訳した結果をスピーチ機能に渡す
翻訳した結果をスピーチ機能に渡す

これで終わりです!

完成したプログラムはこちらです。

完成したプログラム
完成したプログラム

5-7. 動作確認する

プログラムが完成したら「Live Test」で動作確認しましょう。

動作確認
動作確認

このようにテストすることができます。

動作テスト
動作テスト

「文字を入力」のエリアに英語で「hello」と入力し「確定」をクリックすると、このように日本語が表示されて「こんにちは」と喋ります。

6. まとめ

今回はThunkableについてご紹介してきました。

最後に特徴を振り返ります。

Thunkableの特徴

特徴① ブロックを組み合わせて開発
特徴② 操作方法を習得できる動画やコンテンツが豊富
特徴③ 読み上げ機能などの音声系コンポーネントが豊富

NoCodeツール全般に共通するのですが、チュートリアルも含め公式サイトやコミュニティなどはほとんどが英語です。

それでもThunkableは視覚的な操作で作れるのと、簡単な英単語が使われているので、そこまで難しくないはず。

動画をヒントにしながら開発していけるので、「5. 翻訳アプリの作り方【基本操作を解説】」も参考に実際に作ってみていただければ、簡単なことを実感できると思います。

この記事を参考に、ぜひご自身でもアプリ開発を始めてみてください。

アプリ開発に必須のUI/UXデザインを学ぶ
アプリ開発には、ユーザビリティへの理解が重要です。iPhone・Androidアプリのデザインを学ぶなら、自宅で学べるオンラインスクール【TechAcademy】 UI/UXデザインコースがおすすめ。実務に近い環境で、学びながら手を動かして制作。社会に通用するスキルを習得できます。
NoCode
てつごろうをフォローする
てつごろぐ

コメント

タイトルとURLをコピーしました