世の中には様々なサービスがありますが、その中にソースコードの共有が簡単なCodePenというサービスがあります。
CodePenを使えばサンプルプログラムを以下のように簡単に挿入できます。
See the Pen PooQOja by Acceliv (@taka74) on CodePen.
ただただソースコードを掲載できるだけでなく、実行結果まで表示できるため、かなり使い勝手の良いサービスです。
おまけに動作も軽量でサーバーに負荷が掛からないため、HTML・CSS・JavaScriptのプログラムを共有したい場合はCodePenを使うのがいいでしょう。
CondePen登録方法
ただただHTML/CSS・JavaScriptを書いてテストしたいだけなら登録は必要ありません。
登録すると以下の機能が使えるようになります。
- 作成したソースコードの保存・共有
- 複数ファイルから成り立つプロジェクトの作成
プログラムを書くだけなら登録は不要なのですが、書いたプログラムをシェアしたい場合は登録が必要なので、未登録の方は登録を進めていきましょう。
「Twitter・Github・Facebook」いずれかのアカウントがあれば、連携するだけでアカウントを作成できるので非常に簡単です。
「Twitter・Github・Facebook」いずれも所持していない場合は[SignUp with Email]をクリックして登録手続きをしてください
登録するといっても難しいことは何もなく、必要なメールアドレスやパスワードなど項目を埋めるだけです。登録が終わるとすぐに使えるようになります。
CodePenの使い方
CodePenにログインできたら、このようなトップページが表示されます。
WordPressなどに埋め込む用のプログラムを作成したい場合は、左メニューの[Pen]を選択します。
このようなHTML・CSS・JavaScriptのエディタが3つ並んだ画面が表示されます。
試しにHTMLエディタにて何かを書き込んでみてください。下のプレビューエリアにリアルタイムで反映されるはずです。
CodePenプログラムの埋め込み方法
CodePenの埋め込みはかなり簡単です。
埋め込む前に一度ページを保存しておいてください。一回でも保存すればその後はオートセーブなので問題ありません。
準備ができたら右下の[Embed]をクリックします。
Embed This Penウィンドウが立ち上がるので、右下の[HTML(recommended)]をクリックします。
あとは表示された埋め込み用コードをコピーして貼り付けるだけです。
WordPressならプラグイン利用可能
WordPressの場合、一度テキストモード・HTMLモードに切り替えて挿入をしなければなりません。
ですが、「CodePen Embedded Pens Shortcode」というプラグインをインストールして有効化しておくことで、ショートコードによる埋め込みが可能になります。
ショートコードで挿入する場合は、埋め込みコードを取得する画面で「WordPress Shortcode」を選択したら表示されるコードをペーストするだけです。
こちらの方法であれば、ビジュアルエディタにそのまま挿入できるのでおすすめです。
CodePenをもっと使いこなす
CodePenのエディタはほかにも機能が用意されています。せっかくなのでそちらも見ていきましょう。
Markdownに対応させる
CodePenはHTMLだけでなく、Markdown記法も使えます。ただしそのままでは使えず、少し設定を変更する必要があります。
画面右上の[Settings]をクリックしてください。
設定タブを[HTML]に切り替えます。
「HTML Preprocessor」という項目をクリックして[Markdown]を選択します。
これでMarkdown記法が使えるようになり、以下のような表現ができるようになります。
See the Pen YzzYwrm by Acceliv (@taka74) on CodePen.
CSSプリプロセッサーを使う
SCSSやSass・LessといったCSSプリプロセッサも使用可能です
画面右上の[settings]をクリックしてください。
設定タブを[CSS]に切り替えます。
「CSS Preprocessor」という項目があるので、この項目をいじることでCSSをSCSSなどのCSSプリプロセッサに切り替えられます。
最後に[Save & Close]をクリックしたら変更内容が反映されます。
CSSプリプロセッサ適用中は、どのCSSプリプロセッサを適用しているのか表示されるようになっています。
CSSプリプロセッサを使用したい場合は、この手順で変更するようにしましょう。
プログラムを共有したいならCodePenを使おう！
CodePenは、Web関係のプログラムを共有するのに非常に便利です。
HTML・CSS・JavaScriptといった基本的なことだけでなく、SCSSなどより実用的なコードも共有できるので、プログラムの共有方法を探していた場合は一度使ってみてください。
