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

こんにちは！
てつごろう（@Te256g）です。

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

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

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

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

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

てつごろう

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

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

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

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

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

2. Thunkableの料金プラン

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

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

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

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

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

3. Thunkableの特徴

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

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

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

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

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

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

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

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

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

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

てつごろう

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

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

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

Date Input - Thunkable Docs

docs.thunkable.com

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

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

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画面が表示されるので「＞」をクリックして進めます。

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

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

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

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

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

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

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

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

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

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

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）でドラッグすると自由に入れ替えることができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

① Button1がクリックされた時に

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

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

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

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

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

② 翻訳をする

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

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

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

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

③ その際、Text Input1に入力された内容を元にする

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

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

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

④ 翻訳した結果をLabel1に渡す

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

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

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

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

⑤ さらに音声で出力する

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

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

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

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

これで終わりです！

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

5-7. 動作確認する

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

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

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

6. Thunkableを学ぶなら【Udemy】がおすすめ

「世界最大級のオンライン学習プラットフォーム」と呼ばれるUdemyでは、Bubble、Adalo、Glide、AppSheet、Webflowなど当ブログでもご紹介しているNoCodeプラットフォームの講座も公開されています。

一部、無料で公開されている講座もあるので、気になる方は登録してみてください。

7. まとめ

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

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

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

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

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

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

NoCodeを学ぶ方法

2021年8月26日最新情報！！

動画のオンライン学習サイトで取り扱われるようになっていました！（2021年8月時点）

「世界最大級のオンライン学習プラットフォーム」と呼ばれるUdemyは、動画で学べるのでおすすめ。
BubbleやAdalo、Glide、AppSheet、Webflowなど、当ブログでもご紹介しているNoCodeプラットフォームも動画講座が用意されています。

一部、無料の講座も公開されているので（2021年8月26日時点）、気になる方はとりあえず登録してみては？

もちろん、日本語の講座はたくさん公開されています。

「Glide」「Adalo」「Bubble」を学べる日本語の専門書もあります。

日本語でまとまっている参考サイトや書籍はまだまだ少ないので、このような本を購入して学ぶのが効率的ですね。

NoCodeの基礎から、NoCodeツールの中でも特に人気のある3つのプラットフォームの使い方まで網羅的に学習できます。

基礎から学ぶ ノーコード開発

posted with ヨメレバ

NoCode Ninja シーアンドアール研究所 2021年03月17日頃

楽天ブックス

Amazon

Kindle

7net