はじめに

2010年7月7日にKayac inc.にて誕生後した jsdo.it ですが、2019年10月31日(木) 15:00 をもちましてサービスを終了しました。それでも11月2日8時頃まで動いていたようです。

自分は幾つか投稿していて、はてなブログの方で埋め込みして使用していたのですが、その記事を見ると当然何も表示されなくなっているわけです。

jsdo.it と同様のサービスは海外に幾つかあるのですが、CodePen なら Qiita に埋め込みができるので移行先として採用しました。

CodePenの使い方

アカウント登録

CodePenを利用するにあたり会員登録が必要になります。GitHub、Twitter、Facebookのアカウントを利用することも可能です。
https://codepen.io/accounts/signup

自分は現時点では Freeプランを使用しています。

使い方

jsdo.it と同様にWebブラウザ上で HTML/CSS/JavaScript を書いてその場で実行していきます。

参照：codepenでウェブ開発入門

画像の読み込み

jsdo.it では画像などのファイルのアップロードは無料で出来たのですが、CodePenでは、有料プランの場合でないとアップロードサーバーが使用できません。
無料プランでも画像などのファイルを読み込みたい場合はどうするかというと、Googleドライブを使用することで、CodePenで画像などのファイルを読み込むことができます。

Googleドライブを使う場合でも、コピーしたURLのままでは読み込めません。
URLを編集する必要があります。
コピーされたGoogle Driveの画像へのURLはこのような形になっているはずです。
https://drive.google.com/file/d/その画像固有のID/view?usp=sharing
このアドレスを
http://drive.google.com/uc?export=view&id=その画像固有のID
CodePenの無料会員で画像を使うには

【2024/06/14追記】
久しぶりにいいねが付いたので、見てみたら画像が表示されなくなっていました。
Googleドライブ側の仕様変更があったようです。

URLを下記のように変更したら表示されるようになりました。

https://lh3.google.com/u/0/d/<file-id>

埋め込み

画像表示テストしたCodePenをQiitaに埋め込みしてみます。
参照：Qiitaで記事にCodePenが埋め込めるようになりました

埋め込みの縦サイズは変更できるので、data-height="256"とstyle="height: 256px;のところの数値を 512 に変更しています。
プレビューにはCodePenの貼り付け結果は表示されないので、一時的に限定共有投稿して結果確認します。

See the Pen 画像表示テスト by やじゅ (@yaju-the-encoder) on CodePen.

最後に

CodePenを活用していきたいです。