モニターを通して相手に技術的な説明をするのって難しいですね。僕が最近そう思った例では「HTML,CSSの技術的な説明をするとき」でした。

「divでくくって、cssはimgをposition:absoluteさせて～なんとかかんとか」

・・・いや～、こういうのは伝えるのほんと難しいっす＾＾；そりゃ他にも方法あるんですけど、いろいろ準備するのは手間だったりします。

と、そこで。

そんな方のために、ブラウザ上でリアルタイムでHTML,CSSの編集ができて、大勢で共有できるサービスがありますので、ご紹介します～。

• コードって、言葉や文章で伝えるのが難しい
• HTMLやCSSを説明するには、実際に動いているところを見せたほうが手っ取り早い

など、お考えの方がいらっしゃいましたら、オススメですので是非ご覧くださいませ。

「scratchpad」にアクセスしましょう

「scratchpad」というサービスがありますので、アクセスします。

画面左部で「ソースコード」を書こう

画面の左部は「ソースコード」を入力できます。

サンプルも、上の画面のように用意されています。お好みでHTML,CSSのコードを書きましょう。ちなみに、

• 自動インデント
• タグ入力補助（例：「<li>」と入れたら、「<li></li>」まで自動で補完してくれる）

これが、ばっちりできます。とても優れている！！試しに、14行目の「Hello!」を変えます。

すると、リアルタイムで変更されました。実際に操作して体験ください。

複数ページ作成できます

気付かれた方もいらっしゃると思いますが、「scratchpad」にアクセスすると、「http://scratchpad.io/xxxxxxxxx」というアドレスになっていると思います。

※「xxxxxxxxx」は一意の文字列です。新しく別のページを作成したい場合は、ブラウザの別タブなどを開いて「scratchpad」に再度アクセスしましょう。アクセスするたびに、この「xxxxxxxxx」文字列は変わって新しいページが作成されます。

なんと、この「xxxxxxxxx」の部分は任意で作成もできます。

過去に作成したページはここから見られます

作成したページは、下のように表示されます。タイムスタンプがちょっと変な気がしますけど、今回やりたいこととは関係性は薄いので、そこは気にせず。

【今まで作ったものが「RECENT」に表示されています。これまで4ページ作りました】

タイトルがデフォルトで「「Untitled document」となっていますので、変更しましょう。

タイトルを変更するには

画面上部の「Untitled document」をクリックします。

タイトルを変更できます。

「真剣にやりましょう」という願いを込めた、固い感じのタイトルにしました。

しっかり、勉強しましよう。

同じ画面を共有できる

【画面上部、タイトル横に現在の閲覧者数が表示されます】

URLを知っている方のみアクセスできますので、上の例では「自分のほかに3人見ている」っていうことですね。

複数の人が編集できる

「scratchpad」のすごいところは、閲覧している人誰もが編集の権限を持っているところです。

ですので、例えば同じ画面を共有して、みんなでコードとプレビュー画面を眺める。

で「あ、ここってこうやればいいんじゃない？カタカタカタ・・・（コードを編集する音）」

といったように、閲覧者同士で思いついたようにリアルタイムで編集できます。

これは便利だなぁ。

URLを教えた相手が悪かったようだ。

しばらく放置して、気が付いたらこんなことになってたｗ

・・・上の例のように、URLがわかればどんな人も編集ができるので、あんまり不特定多数の人に公開したくない場合は、特定の人にだけURLを教えるほうがいいですね。

さらっとですが、主要機能についてご説明しました。実際に触った方が感覚がつかみやすいと思いますので、是非とも「scratchpad」にアクセスしてお試しください。

とても楽しいです。

まとめ

似たようなサービスで、javascriptの動作ができるようなものもありますけど、

• 「HTML,CSSの動作をリアルタイムで実装したいんだよな～」
• 「で、みんなで共有したいんだよね～。編集もできればいいなぁ」

みたいな方にとっては、軽量で使い勝手がいいんじゃないかと思います。

何より、画面を共有する全員が編集できる権限を持っているというのは、魅力的ですねぇ。

技術力がある方同士のやりとりだったら、とても生産的な場になりそうですし、ちょっとしたHTML,CSSの操作教育みたいなものにも活用できそうですね。

１点、特に注意することといえば、作成したページのURLを「どこまでの範囲で公開するか」ということかもしれません。ページを作成した方も、それを閲覧する方も、扱いは自己責任でやりましょ～。

これを教えてくれた人

彼です。

Google+で教えてもらいました。彼の正体を知りたい方は、こちらからどうぞ。

ところでGoogle+は、いい遊び場ですね。もっともっとユーザー増えるといいな～。