素晴らしい機能で簡単に楽しく
学習教育を行えます

Thimble は、ブラウザー上で動作する多くの機能を持ったコードエディターです。HTML、CSS、JavaScript を使用してウェブサイトや、ウェブベースのプロジェクトを初めてコードを書く人を手助けするために設計されています。必要なものは指先だけで、すぐに (教室でも) 起動し、実行できます。

コードエディター、ウェブサーバー、ウェブブラウザー、開発ツールがすべて入っています— そして無料です!

変更をすぐに確認

ライブプレビューで手軽に実験。変更したコードが瞬時に反映されます。

どんな Thimble プロジェクトでもリミックス

お気に入りの Thimble プロジェクトを見つけた場合、それをリミックスしてオリジナルのバージョンを作成できます。 また、作成したプロジェクトを友人や生徒に送ることもできます。

便利なコードスニペット

あなたのコードに追加できる HTML、CSS、JavaScript の便利なコードスニペットの一覧を使用して、素早く作業できます。

ビルドイン JavaScript コンソール

Thimble に内蔵されたコンソール上で、簡単に JavaScript コードのデバッグとテストが可能になりました。

ファイルの追加と管理

Thimble は、実際のウェブプロジェクトのように、あなた自身のファイルを作成、名前変更、削除、アップロードさえできます。

  • プロジェクトの.zipファイルをダウンロードし、ハードディスクから見てください。
  • パソコン上のファイルを Thimble にドラッグ&ドロップしてください

ライトをオン・オフする

Thimble には暗いテーマと明るいテーマがあり、あなたの好みに合わせて選択できます。テキストサイズなど他の箇所も変更できます。

埋め込みチュートリアルのフォローと作成

プロジェクトには、あなた (または生徒) がプロジェクトを変更するときの助けになるチュートリアルを付けることができます。

入力時にコードのヒントを取得する

たくさんのルールや構文を覚えようとして諦めるようなことがあってはなりません。そんなことをしなくても、Thimble は HTML や CSS、JavaScript ファイルでも、そのヒントを提供します。

HTML ページ内で直接 CSS が編集可能

編集中の HTML ページから離れなくても、要素の CSS スタイルを書けます。テキストカーソルを要素のタグに置き、 Cmd/Ctrl + E キーを押して CSS スタイルを書き始めましょう。

プロジェクトを ウェブに素早く公開

クリック 1 回でプロジェクトを公開できます。後でプロジェクトを変更する場合でも、簡単にプロジェクトを更新できます。

エディターで色を選択

色を編集したい場合は要素にカーソルをあわせて Cmd/Ctrl + E キーで色選択ツールが開きます。

モバイル端末でプロジェクトをテストする

モバイルプレビューモード に切り替えて、幅の狭い端末での動作を確認できます。また、全画面表示プレビューをオンにして大きな画面で確認できます。

HTML 要素をすぐに発見する

DOM インスペクター をオンにして、プレビュー画面でさまざまな要素にマウスを移動してみてください。Thimble はHTML エディター内で対象のコードをハイライト表示します。

イメージフィルター

対象の画像にフィルターを追加することでプロジェクトに楽しみが加わります。猫が全くお目にかかれないくらいいい姿に変身できちゃいます!

自撮り

Thimble の自撮り機能で作業中のページに自撮り写真を追加できます—コンピューターのウェブカメラを使用します。HTML ページに <img src= とタグを入力すると、プロンプトが表示されます。