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

CodePen

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

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

Attention Required! | Cloudflare

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

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

問題は無料会員です。

ゆんつ
ゆんつ

僕です

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

でも心配ご無用です!

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

ゆんつ
ゆんつ

大丈夫ですよ!

必要なもの

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

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

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

「Drop Box」が2GB。

Dropbox
Dropbox は新しい働き方を実現するワークスペースです。ムダな作業を減らして、大切なことに集中できます。ログインしてクリエイティブに作業を進めましょう。

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

Google ドライブ - 写真やドキュメントなど、ファイルのクラウド ストレージとバックアップ
Google ドライブを使って写真や動画など、さまざまなファイルをバックアップ。安全なクラウド ストレージに保管されているファイルにどこからでもアクセスできます。

手順

「Drop Box」を使う場合

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

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

DropBoxのアップロード画面

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

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

共有ボタンをクリックする

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

リンクを作成ボタンをクリック

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

リンク作成のメッセージ

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

リンクをコピーをクリックして画像の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.0

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

ゆんつ
ゆんつ

やったね!

Googleドライブを使う場合

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

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

Google Driveのアップロード画面

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

アップロードした画像の上で右クリックすると出てくるメニューに「共有」という項目があるのでクリックします。

アップロードした画像を右クリックして共有を選択

すると「他のユーザーと共有」という画面が出ますので、その画面の中の「共有可能なリンクを取得」という部分をクリック。

共有可能なリンクを取得をクリック

画面が変わり「他のユーザーと共有」という画面になるので、「リンクをコピー」というボタンをクリックして画像へのURLをコピーし、完了ボタンを押してその画面を閉じます。

画像へのURLが現れるのでコピーする

3. 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

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

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

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

だったので

http://drive.google.com/uc?export=view&id=1OVZlVEDlmZVB5j1t7TtpZ0bJiz0sw3JV

に変更するのです。

こうすることで

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

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

ゆんつ
ゆんつ

できた!

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

まとめ

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

「Drop Box」や「Googleドライブ」などのストレージサービスに画像をアップロードして、その画像へのURLを適宜編集してCodePenに貼り付ける

だけです。

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

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

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

ゆんつ
ゆんつ

用途に応じて、色んな使い方が出来そうですね

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

それでは、またですー。

コメント