Help us understand the problem. What is going on with this article?

jsdo.it の移行先として CodePen を使ってみる

はじめに

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の無料会員で画像を使うには

埋め込み

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

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

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

最後に

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away