モニターを通して相手に技術的な説明をするのって難しいですね。僕が最近そう思った例では「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+は、いい遊び場ですね。もっともっとユーザー増えるといいな～。
このページを共有する