CodePenの無料会員で画像を使うには

こんにちは、ゆんつです。

手軽にソースコードとその実行結果を表示してくれるとても便利なサービス「CodePen」。

このCodePenで画像を使いたい場合があります。

有料プランの場合はアップロードサーバーが用意されているので、そのサーバーに画像をアップロードすれば画像を使うことが出来ます。

問題は無料会員です。

無料会員には画像のアップロードサーバーは用意されていません。

でも心配ご無用です！

有料会員よりも少しだけ手間はかかりますが、無料会員でも「Drop Box」や「Goole Drive」などのオンラインストレージサービスを使うことでCodePenで画像を使うことが出来るのです。

必要なもの

「Drop Box」又は「Googleドライブ」の無料アカウント。

両方とも簡単に作成できるので、持っていない場合は作ってください。

無料会員の場合に使用できる容量は

「Drop Box」が2GB。

dropbox.com

Dropbox を使えば、ワークフローをシンプルにして、自分のタスクに集中する時間を増やせます。

www.dropbox.com

「Googleドライブ」が15GBです。

Google ドライブ: セキュアなクラウド ストレージを使ってオンラインでファイルを共有 | Google Workspace

Google ドライブのファイル共有プラットフォームについてご紹介します。個人向けの安全なクラウド ストレージとして利用し、コンテンツを他のユーザーと共有できます。

workspace.google.com

手順

「Drop Box」を使う場合

1.　必要な画像をアップロードする

アップロードしたい画像をDrop Boxの画面にドラッグ&ドロップするだけなので迷うことはないと思います。

2.　アップロードした画像のURLをコピーする

アップロードした画像にマウスカーソルを乗せると「共有」というボタンが出るのでクリック。

すると以下のような画面になるので「リンクを作成」クリック。

すぐにリンクが作成されます。

「リンクをコピー」をクリックしてDrop Boxにある画像のURLをコピーします。

 

3.　CodePenで画像を読み込む

CodePenのHTMLエディタに、先ほどコピーしたDrop Boxにある画像へのURLを貼り付けるのですが、コピーしたURLをそのまま貼り付けても画像は読み込まれません。

CodePenで読み込めるようにするには、URLの一部を書き換える必要があります。

Drop BoxのファイルへのURLは

https://www.dropbox.com/~

という形になっています。

このwwwという部分をdlに書き換えるだけです。

例えば先ほど僕がコピーしたURLは

https://www.dropbox.com/s/roc5uzj7hl7vrr7/neko_b.JPG?dl=0

です。

ですので以下のようにwwwをdlに書きかえます（赤字が書き換え部分）

https://dl.dropbox.com/s/roc5uzj7hl7vrr7/neko_b.JPG?dl=0

このURLがCodePenのHTMLエディターでimgタグで読み込まれると

See the Pen
drop box by konpure (@yuntu)
on CodePen.

画像がバッチリ表示されます。

Googleドライブを使う場合

1.　Googleドライブに画像をアップロードする

Googleドライブへのアップロードも、対象となる画像ファイルをGoogleドライブの画面にドラッグ&ドロップすればよいだけなのでとても簡単です。

2.　アップロードした画像のURLをコピーする

アップロードした画像の上で右クリックします。

右クリックで出てくるメニューに、「共有可能なリンクを取得」という項目があるのでクリックします。

すると「リンクを取得」というダイアログが開くので「制限付き」という項目をクリック。

デフォルトの状態では「制限付き」にチェックが入っているはずなので、これを「リンクを知っている全員」に変更します。

「リンクをコピー」をクリックして画像のURLを取得します。

するとこの画像のURLがコピーされます。

今回の画像では以下のようなURLがコピーされました

https://drive.google.com/file/d/1MVRZowIbiK2DybMYxuYMpsiikacSWnjl/view?usp=sharing

3.　CodePenで画像を読み込む

Googleドライブを使う場合でも、コピーしたURLをそのまま貼り付けてもCodePenでは読み込めません。

URLを編集する必要があります。

コピーされたGoogle Driveの画像へのURLはこのような形になっているはずです。

https://drive.google.com/file/d/その画像固有のID/view?usp=sharing

このアドレスを

https://drive.google.com/uc?export=view&id=その画像固有のID

に編集しなければ読み込めません。

先ほど僕がコピーしたURLは

https://drive.google.com/file/d/1MVRZowIbiK2DybMYxuYMpsiikacSWnjl/view?usp=sharing

だったので

https://drive.google.com/uc?export=view&id=1MVRZowIbiK2DybMYxuYMpsiikacSWnjl

に変更するのです。

こうすることで

See the Pen
google drive by konpure (@yuntu)
on CodePen.

Codepenで読み込めるようになります。

　
　https://drive.google.com/uc?export=view&id=この部分を画像固有のIDに変更してください
　

まとめ

無料会員がCodePenで画像を使用する簡単な方法は

だけです。

この記事ではCodePenだけでの使い方のような書き方をしましたが、この方法は別にCodePenに限らず使えます。

たとえばこの記事にimgタグを設置して、先ほどのDrop Boxへのリンクを貼れば

こんな感じで、自分のサーバーに画像をアップロードしなくても、ストレージサービスから画像を貼り付けることができます。

またこの方法は画像だけでなく、動画にも応用できますので興味があれば試してみてください。

Code PenもDrop BoxもGoogleドライブも、普通に利用する分には無料会員で十分使えますのでプログラミングの学習などに有効活用しましょう。

それでは、またですー。