JavaScriptやCSSの勉強にオススメのサービス
皆さんはじめまして。
会長のNakahikoです。ツイッターはこちらです。フォローよろしく。
さて早速ですが、タイトルの通りJavaScriptやCSSの勉強にオススメのサービス、jsdo.it - Share JavaScript, HTML5 and CSSについて紹介していきたいと思います。
ざっくり言うと
jsdo.itをざっくり紹介すると
- HTML、CSS、JavaScriptの公開を超簡単に行えるサービス
- ソースコードと表示結果を一目に見ながら編集ができる。
こんなところです。
ぼくは主に、CSSの表示確認用に利用していますね。
jsdo.itでできること
このサービスでいったい何ができるかを紹介したいと思います。
ウェブページの公開
HTML、CSS、JavaScriptを組み合わせてひとつのウェブページを作ることができます。ここで注目するべき点は、あらかじめウェブページを公開する雛形が完成されていて、手間が省けるという点です。例として
- HTMLはBodyタグの中身だけを記述すればよい
- JavaScriptやCSSをHTML内で読み込む動作が必要ない
- jQueryなどのライブラリの読み込みがワンクリックで済む
こんなところが挙げられます。
これだけじゃありません。ソースコード公開と同時に、独立したウェブページも自動で生成されます。たとえばこれを公開すれば、自動的にこれが生成されるわけです。簡単な連絡をしたい場面とかでも、生成されたウェブページのURLをツイッター等に載せるだけなんで簡単に使えますね。
ブログ等への貼り付け
実際に作ったものを、ブログ等に載せることができます。イメージ的にはGistみたいなものでしょうか。実は僕自身もこれをやるのは初めてです。試しにやってみましょう。
おお、ちゃんと貼れているようですね。安心安心。
Fork（引用）
もちろん、jsdo.it内には様々な作品があります。気になるものがあったら、Forkボタンを押してみましょう。これで気になった作品を引用して、自分なりにアレンジ、公開といったことが可能になります。しかし、ライセンスは引用元になるので注意です。当たり前だけど。
ダウンロードできる
「よし、うまくできたし自分のHPへ移行するぞ」って言うのもメンドクサイですよね。それを助けてくれるのがこのダウンロード機能。簡単に言うとHTML、CSS、JavaScriptをZIPファイルにしてダウンロードすることができます。もちろん、それを解凍して自分のサーバーにアップロードすればそのまま機能します。
jsdo.itのはじめかた
実際に初投稿完了するまでやってみましょう。
まずはjsdo.itにアクセスします。
そして、右の「create account」をクリック
自分が使ってるサービスを使ってログインしましょう。昔はメールアドレスのみで可能だったはずですが、何かしらのアカウントが必須に変わったようですね。ちなみにぼくはtwiterアカウントを利用しています。
認証等を終えたらアカウント名を決めます。決まったら「submit」をクリック。
トップページに戻りましたら、ログインしていることを確認して、「start coding」をクリックしましょう。これでプロジェクトを新規作成できます。
編集ページになったと思います。今回は編集しないで、とりあえず投稿してみます。各エリアの説明は下の画像を見てください。編集ゾーンで編集して「saved」ボタンを押すか「ctrl+S」で保存して右側の表示ゾーンに反映できます。
プロジェクトの情報を編集しましょう。「Properties」ボタンをクリックしてください。
タイトルやカテゴリーを編集したら、「finish editing」をクリックしてください。
おつかれさまです。これで投稿は完了しました。画像にはありませんが、下部の「edit」ボタンをクリックすることによって編集が可能になります。
さいごに
いかがでしたが？まだまだ紹介したい機能は沢山ありますが「習うより慣れろ」です。実際に使ってみて色々試してみてください。記事の内容やjsdo.itの使い方について質問があれば、ぼくのtwitterに気軽に聞いてみてください。
ブログをこんなにも長文で書いたのは初めてで疲れました。ブロガーの方々の語彙力にはとても尊敬します。これからさらに良い記事が書けるように努力してまいりますのでよろしくお願いします。アドバイス等いただけると嬉しいです。
では、この辺で失礼します！最後までありがとうございました！
