メインコンテンツへスキップ
「Space」内のコードエディタ:他者の名前が付いたカーソルが表示されたPythonファイルと、「実行」後の出力が表示された共有ターミナル

2つのカーソル、1つのファイル、そして誰もが目にしている1つのターミナル。

アプリライブラリ・コードエディタ 近日公開予定

一緒に書いてみましょう。 黒板に書いてみましょう。

どのように教えていますか?

Pencil Spacesのコードエディタを使えば、授業で使用するボード上に実用的なコードエディタを表示できます。スペース内の全員が同じファイルにコードを入力し、各人のカーソルの位置を確認できます。「実行」ボタンを押すと、PythonやJavaからC++、Rustに至るまで、10種類の言語に対応しており、全員に同時に出力結果が表示されます。

生徒のループが間違った内容を出力しています。コードエディタを開き、同じファイル上で生徒のカーソルと自分のカーソルを並べて、生徒が入力する様子を見守りましょう。二人で同時に「実行」ボタンを押せば、両者とも出力結果を確認できるので、行番号を読み上げる代わりに、修正方法を教えることができます。

ある生徒が発見したバグは、クラス全体にとっての学びとなります。コードエディタを開き、その生徒に黒板に修正コードを入力させ、「実行」ボタンを押させます。そうすれば、どの生徒も、誰が実行したかとともに、出力結果を同時に確認することができます。

参加者は、自分で入力したコードを覚えています。ワークショップスペースでコードエディタを開けば、グループ内の誰でも次の行を入力できます。「実行」を押せば、全員が一緒に結果を確認できます。

教室の前方にあるボードにコードエディタを表示させます。例を入力し、「実行」をクリックすると、出力結果が教室のディスプレイに表示されます。自分のノートパソコンで「Space」を開いた生徒たちは、あなたと同じファイルを編集することになります。

コードエディタを教室の前方にある共有画面に表示します。参加者は各自のノートパソコンで、同じファイルにコードを書き込んでいきます。「実行」を1回押すと、教室全体でコードがどのような動作をするかを確認できます。

お子さんがプログラミングを習っているのですが、宿題のコードが実行できません。キッチンのテーブルで「Space」内のコードエディタを開き、一緒に「実行」ボタンを押してみてください。そうすれば、お二人ともエラー内容を確認できますし、ご家族のノートパソコンに何かをインストールする必要もありません。

Coming to the Expert and Master plans, where it joins cloud recording and automated lesson summaries. See what each plan includes

どの有料プランでも2週間無料でお試しいただけます。クレジットカードは不要です。

なぜそれが簡単なのか

画面共有を使ってコードを教えるのはやめましょう。

部屋全体を1つのファイルにまとめる。

家族のノートパソコンには設定が一切行われていません。

ビデオ通話では、一方が操作を担当します。生徒が画面を共有し、あなたが行番号を読み上げ、生徒がその箇所を見つけるまで、全員が待機します。コードエディタでは、二人で同じファイルに同時に入力します。

ビデオ通話では、ある生徒が画面を共有し、クラスの他の生徒たちはそれを見ます。修正案が提示されると、全員がそれを自分のエディタにコピーしますが、そのうちのいくつかは実行できません。コードエディタでは、クラス全員が1つのファイルで作業します。

ビデオ通話では、画面を共有し、チャットにコードを貼り付けて、全員が各自のツールにそれをコピーするのを待ちます。その後、実行できない設定を修正します。コードエディタでは、グループ全員で1つのファイルを共同編集します。

ほとんどのコンピュータ授業では、講師がプロジェクター上でコードを入力し、生徒たちはそれを各自のエディタに書き写します。中には、前方からは見えないタイプミスがあるものもあります。コードエディタでは、クラス全体で1つのファイルを共同で編集します。

ほとんどのワークショップでは、講師が共有画面上でコードを入力し、参加者はそれを自分のノートパソコンに書き写します。必ず誰かが操作に遅れをとってしまいます。「Code Editor」では、参加者全員が1つのファイルで共同作業を行います。

子どもにプログラミングを習わせる場合、通常はまずツールをインストールし、その後インストールに関する問題を解決する必要があります。コードエディタは、スペース内のクラウドサンドボックス上で動作するため、ご家庭のノートパソコンにはブラウザさえあれば十分です。

一般的な方法

  1. 生徒に画面を共有するよう依頼してください。
  2. その行と修正内容を読み上げてください。
  3. 彼らがそれを見つけて、書き直すまで待ってください。
  4. 相手にそれを実行してもらい、エラーの内容を読み上げてもらってください。
  1. 生徒の1人に画面を共有してもらう。
  2. クラスが待つ間、修正内容を読み上げてください。
  3. 皆さんには、これを各自のエディタにコピーしてもらうようお願いします。
  4. プリントが印刷できない生徒たちを助けてあげてください。
  1. 画面を共有して、例を入力してください。
  2. そのコードをチャットに貼り付けてください。
  3. みんなが自分のツールにそれをコピーするまで、ちょっと待ってください。
  4. 実行できない各設定について、トラブルシューティングを行ってください。
  1. プロジェクターに例文を表示してください。
  2. 学生たちはそれを自分のエディタにコピーします。
  3. いくつかは、正面からは見えない誤植があります。
  4. 列を順に歩いて探してみてください。
  1. 共有画面に例を入力してください。
  2. 参加者はそれを自分のノートパソコンにコピーします。
  3. 誰かの環境では動作しません。
  4. ワークショップを一時中断して、彼らのノートパソコンを修理する。
  1. どのバージョンのPythonをインストールするかを決めてください。
  2. それをインストールしてから、エディタをインストールしてください。
  3. 動作を妨げている設定を修正してください。
  4. いよいよ宿題に取り掛かる。

コードエディタを使用して

  1. ボード上でコードエディタを開いてください。
  2. 修正内容を、相手に見える場所に記入してください。
  3. 「実行」をクリックします。二人とも出力結果を確認してください。
  1. ボード上でコードエディタを開いてください。
  2. その生徒に、みんなの前で修正内容を入力させましょう。
  3. 印刷実行。すべての学生が出力結果を確認します。
  1. ワークショップスペースでコードエディタを開いてください。
  2. 全員が同じファイルに書き込みを行います。
  3. 印刷実行。グループ全員が結果を確認します。
  1. 前方のボードにあるコードエディタを開いてください。
  2. 生徒たちは各自のノートパソコンで同じ「Space」を開きます。
  3. 「Press Run」。すべての画面に出力されます。
  1. 共有画面でコードエディタを開いてください。
  2. 参加者は各自のノートパソコンから、同じファイルに書き込みを行います。
  3. 印刷実行。部屋中の全員が結果を確認する。
  1. スペースでコードエディタを開きます。
  2. お子さんが入力している間、あなたはその同じファイルを見ています。
  3. 「プレス・ラン」。二人とも、何が起きたか見ただろう。

内容紹介

あなたの「Space」内に、本格的なエディタが搭載されています。

The Code Editor is built for teaching programming, from first loops to data structures and algorithms. It works like the editors programmers use every day, with files, a terminal and suggestions as you type.

コードエディタの「新規」ファイルメニューには、Python、JavaScript、TypeScript、Java、C、C++、Rust、Go、Ruby、Bashが一覧表示されています。
10の言語のいずれかでファイルを追加してください。
IntelliSense、候補表示、エラーのアンダーライン、括弧の自動閉じ、行番号の表示を切り替えるスイッチを備えた「エディタ設定」パネル
設定は、そのスペースのすべてのメンバーに適用されます。

同じファイルに入力してください

「スペース」内の全員が同時に編集を行います。各カーソルには名前が表示されるため、誰がどこで入力しているかが一目でわかります。

全員のために実行してください

「Run」を押すか、⌘↵を押します。実行結果、実行者、および所要時間が、全員に表示されるターミナルに表示されます。

10言語

Python、JavaScript、TypeScript、Java、C、C++、Rust、Go、Ruby、Bash。ファイルを追加する際に、いずれか1つを選択してください。

One shared terminal

Programs that ask for input work too. Anyone in the Space can type into the shared terminal, and everyone sees the output.

NumPy などのライブラリ

NumPyや実際のプロジェクトで使用されているライブラリをインポートするか、ターミナルからpipやnpmを使ってさらにライブラリをインストールしてください。

複数のファイル

「ファイル」パネルからファイルを追加します。「アウトライン」にはすべての関数が一覧表示されるため、その関数に直接ジャンプすることができます。

入力中にヘルプを表示

すべての言語で、候補表示、ツールチップ、および完全なエラーチェックを行うために、IntelliSense を有効にしてください。

ホストが制御する設定

タブのサイズ、候補、エラーのアンダーラインは、そのスペースの全員と共有されます。これらを変更できるのはホストのみです。

インストールは不要です

コードは、お使いの「Space」専用のクラウドサンドボックス上で実行されるため、ブラウザが搭載されたノートパソコン、Chromebook、iPadならどれでも参加できます。

前・最中・後

ウォームアップから締めくくりまで。

授業の前授業の前ワークショップの前宿題の前に

彼らが到着する時には準備万端だ。

事前にスターターファイルを追加しておきましょう。これらはスペースに残るため、全員が最初の演習からすぐに取り掛かることができます。

授業中授業中ワークショップ中宿題中

彼らが興味を持っているうちに、それを直しておきましょう。

彼らがタイプする様子を見守り、タイプミスを見つけ、一緒に「実行」ボタンを押しましょう。そうすれば、全員が同じエラーを確認し、同じ修正方法を見ることができます。

授業の後授業の後ワークショップの後宿題の後

前回やっていたところから練習を続ける。

ファイルはSpace内に保存されるため、次回も同じコードから開始できます。

学校・チーム向け

先生方、次の例題を解説する準備はできていますか。

展開するものは何もありません

どのデバイスにもソフトウェアはインストールされていません。

コードはクラウド上のサンドボックスで実行されるため、インストールや更新は一切必要ありません。

1つの基準

教師1人につき1つのエディタ。

すべての教師には、同じエディタ、同じ言語、そして同じ設定が提供されます。

ある場所

他のすべてのものの隣にコードを記述する。

数学、理科、プログラミングを担当する教師たちは、これらすべてを1つの「スペース」で教えています。

学習塾事業者向け

講師の皆さん、次の例題を解説する準備はできていますか。

設定は不要です

ご家族がインストールする必要はありません。

生徒たちはブラウザから参加するため、自分のノートパソコンにソフトウェアをインストールする必要はありません。

1つの基準

講師1人につき編集者1人。

すべてのチューターには、同じエディタ、同じ言語、そして同じ設定が割り当てられます。

ある場所

数学などとともにプログラミング。

数学とプログラミングを教える講師は、両方の授業に1つの「Space」を利用しています。

トレーニングチーム向け

トレーナーの皆さん、次の例題を進める準備はできていますか。

インストールは不要です

参加者のノートパソコンでの設定は不要です。

コードはクラウド上のサンドボックスで実行されるため、最初の演習は予定通りに開始されます。

1つの基準

各ワークショップに編集者を1名配置する。

すべてのトレーナーには、同じエディタ、同じ言語、そして同じ設定が提供されます。

ホストの制御

トレーナーが操作する設定。

練習ラウンドの提案をオフにすると、その変更はグループ全体に適用されます。

2億6000万

ライブ学習の議事録

162+

国々

4.8

G2にて

アプリトレイから開いてください。

アプリ

ボードの下部にあるアプリトレイ

⌘K

次に「コードエディタ」と入力してください

⌘↵

「実行」ボタンを押すのと同じです

The first run can take up to a minute while the sandbox starts, and so can the first run after 10 quiet minutes. The rest of the time, a short program runs in about a tenth of a second.

プログラミングに関するご質問にお答えします。

このコードエディタは、どのプログラミング言語に対応していますか?

コードエディタは、Python、JavaScript、TypeScript、Java、C、C++、Rust、Go、Ruby、Bashの10種類の言語に対応しています。ファイルを追加する際に言語を選択でき、1つのエディタ内で異なる言語のファイルを混在させることができます。たとえば、PythonファイルとJavaScriptファイルを隣り合わせに配置することも可能です。

「スペース」グループの全員が、同時に同じコードを入力することはできますか?

Yes. Everyone in the Space edits the same files at the same time, and each cursor shows the person’s name. When anyone presses Run, everyone sees the output in one shared terminal, and anyone can type in when a program asks for input.

何かインストールする必要がある人はいますか?

No. Code runs in a cloud sandbox for your Space, so a laptop, Chromebook or iPad with a web browser is enough. The first run can take up to a minute while the sandbox starts, and so can the first run after 10 quiet minutes.

NumPyなどのライブラリは使用できますか?

はい。コードエディタ内のPythonコードでは、NumPyなどのライブラリをインポートすることができ、ターミナルを開けば、pipやnpmを使ってさらにライブラリをインストールすることも可能です。これにより、最初のループ処理から実際のデータを使った作業へとステップアップすることができます。

Is it safe to run code in a Space?

Yes. Each board’s code runs in its own isolated sandbox, kept apart from Pencil Spaces’ own systems. Its internet access is limited to package registries, so code can install libraries but can’t reach other websites.

Which plans include the Code Editor?

The Code Editor is coming to the Expert and Master plans, where it joins cloud recording and automated lesson summaries. If you teach on another plan, moving up to Expert gets you recordings and summaries now and the Code Editor at launch. You can compare every plan on the pricing page.

次の授業で、それが動く様子を見てみましょう。

次回の授業で、それが動く様子をご覧ください。

次回のワークショップで、その動作をご覧ください。

キッチンのテーブルの上で動く様子を見てください。

Coming soon to the apps tray on the Expert and Master plans.

Pencil Spacesを初めてご利用の方へ

プログラミング教育について、ぜひご相談ください。

The Code Editor comes with the Expert and Master plans. We’ll walk you through what’s coming and what’s live today.

どの有料プランでも2週間無料でお試しいただけます。クレジットカードは不要です。

すでに「Pencil Spaces」で教えている

アプリトレイでその表示を確認してください。

It will appear in the apps tray on the Expert and Master plans. Updates land on What’s New.