CODE PEN でJavaScriptのコードをブログに埋め込んでみた！

See the Pen Analog Clock by Ken_chan (@KentaroT) on CodePen.

ずっと上のようにプログラムコードをブログに埋め込みたいと思っていたんですが、なかなかその方法がわかりませんでした。そこで「CODE PEN」というサービスを見つけたので紹介します。

CODE PENとは？

CODE PENは、プログラムコードを投稿するＳＮＳです。Penというのが、コードの投稿ことです。Twitterでいうと、Tweetのことですね。グラフィカルできれいなPenがたくさん投稿されているので、これからの勉強に役立ちそうです。

CODE PENでコードを埋め込もう！

すると、上の画面が出てきます。これはまだ、空の状態です。

見てわかるように、左からHTML、CSS、JS(JavaScript) をコピペしていきます。この画面でコードをゼロから書いたり、編集したりすることもできます。

コードを入れ終わると、下にプレビューが自動的に出てきます。これで下準備完了です！

4．埋め込みコードをつくる
5．ブログにコピペする

上の画面を見ると、右下の方に「Embed」というボタンがあります。これが「埋め込み」です。「Embed」ボタンを押すと、次のような画面が出てきます。

上は、ブログに埋め込んだときのプレビューです。下は、埋め込みコードです。これをブログにコピペしたら完成です！！

ちなみにプレビューの上にはこのようなメニューがあります。

左はテーマなので、色を変更したいときはプルダウンメニューから違うテーマを選んでください。

真ん中は、読者がブログを開いたときにすぐにコードを読み込むかどうかです。埋め込みコードを読んだらわかりますが、CODE PENにリンクを貼っているのと、コードが長い場合に読者の待ち時間が長くなるからこのチェックが用意されているのだと思います。普通は、チェックを外してすぐに読み込む設定で問題ないと思います。

右は、有料版です、ハイ。Editableとあるので、埋め込んだあとも編集できるようになるのだと思います。有料なので使いません、ハイ。

使ってみて

今回は、埋め込みコードをつくるのが目的だったので、完成したコードをコピペしました。コードを入れると、リアルタイムでプレビューがでるので、コードの勉強するときに重宝しそうです。実験的なコードを試してみるのにちょうどいいですね。ついでに投稿！というのも楽しそう！

このやり方だと、完成したコードには向いていますが、完成していないコードとか、コードの一部を埋め込むには向いていないですね。
もう少し勉強していきたいと思います。