Pen」の基本的な使い方2019/12/13ツイートシェアB!はてブポケットブログでHTMLやCSSについて書く場合。コードだけをただ書くよりも、実行結果も確認できた方がとてもわかりやすくなります。このような場合、別のページにデモページを作成してリンクを貼って実行結果を確認してもらう方法もありますが、出来れば同一のページ内でコードも実行結果も見れた方が見る人にとって利便性が高いです。そこで「CodePen」というサービスを使えば簡単に文章中にソースコードと実行結果を埋め込むことが出来ます。「CodePen」には無料会員と有料会員の2種類がありますが、ブログでHTMLやCSS、JavaScriptのコードを紹介するだけなら無料会員で十分事足ります。今日は「CodePen」の登録方法や簡単な使い方などについて書きたいと思います。Pen」の公式ページにアクセスします。Free」というボタンをクリック。TwitterやGitHub、Facebookのアカウントでも登録できますが、今回はメールアドレスで登録します。Email」ボタンをクリック。入力フォームが現れるので、必要な事項を入力していきます。入力項目について簡単に説明します。NAME」という項目で設定したものがプロフィールに表示される自分の名前になります。USERNAME」に設定したものがアカウント名となりマイページのurlになります。PASSWORD」はログインの際に使用する好きなパスワードを設定してください。全ての項目の入力が終わったら「Submit」ボタンをクリック。NAMEで設定した名前)」というプロフィール入力の画面になります。プロフィールはマイページからいつでも設定できるので今回は飛ばして、そのまま下にある「Save&Continue」ボタンをクリック。これで登録は完了です。使ってみよう登録が完了するとエディター画面になっているので、さっそく使ってみましょう。エディター画面ではHTML、CSS、JavaScriptと言語ごとに分割された画面が出てきます。ここにコードを書いていて保存すれば、下の画面にはコードの実行結果が反映されます。あとはブログに貼りつけるだけです。ブログにコードと実行結果を貼りつけるには、画面下にある「Embed」ボタンをクリックします。PEN」というウィンドウが現れます。プレビュー画面には「HTML」と「CSS」、「RESULT」というボタンがあります。これらのボタンをクリックすると、HTMLとCSSどちらを前面に表示するか画面をコードと結果の2分割にせずにコードだけ、あるいは結果だけを前面に表示するかなどを設定することができます。プレビュー画面の下側をドラッグすると貼り付ける画面の高さを変更することもできます。Code」という項目で「HTML(recommended)」というタブを選択し、記載されているコードを丸ごとコピーします。貼り付ければ、コードと実行結果を表示することが出来ます。「CodePen」でjQueryを使用したい場合、JS欄の設定ボタンをクリックします。Scripts/Pens」という項目の検索ボックスに「jquery(「j」と入力したら候補が出ます)」と入力して、現れた候補から「jQuery」を選択するだけです。最後に「Save&Close」をクリックして設定を保存すれば、Queryが使えるようになり、JS欄にコードを書くと反映されるようになります。jQueryを実際に使って文字をクリックすると色が赤から青に変わるコードを書いてみました。CodePen.文字をクリックするとjQueryにより色が変化すると思います。有料会員の場合は「CodePen」に好きな画像や動画をアップロードして使用することが出来ますが、無料会員の場合はできません。無料会員でも別の方法でCodePenで画像や動画を使用することが出来ます。その方法は外部のストレージサービス(DropboxやGoogleドライブ)に画像をアップロードし、その画像を読み込ませる方法です。ちなみにDropboxもGoogleドライブも登録すれば無料で使えます。Dropboxを使うDropBoxに画像または動画をアップロードします。アップロードした画像をクリックして「共有ボタン」をクリック。ウィンドウが開くので、「リンクをコピー」をクリックします。すると画像のアドレスがコピーされます。Pen」のエディタ画面のimgタグなどに貼り付けても画像は表示されません。アドレスを編集する必要があります。Dropboxにあるファイルへのアドレスはhttps://www.dropbox.com/~という出だしになっています。この出だしの部分の「www」を「dl」に変更します。https://dl.dropbox.com/~それ以外の部分は何もしなくても大丈夫です。画像ファイルのアドレスがhttps://www.dropbox.com/s/6ffg39cdtm6k9z1/test.jpg?dl=0の場合https://dl.dropbox.com/s/6ffg39cdtm6k9z1/test.jpg?dl=0というアドレスになります。この編集後のアドレスを使えば、以下のように無料会員でもCodePenで好きな画像を表示させることが出来ます(スマホなどの小さい画面の場合はResultボタンをタップして結果を確認してください)。CodePen.Googleドライブを使うGoogleドライブのファイルを利用する場合も「Dropbox」同様にアドレスの編集が必要となります。Googleドライブに画像または動画をアップロードします。するとファイルのアドレスがコピーされます。これを一旦メモ帳などに貼り付けておきます。このアドレスは以下のような構造になっています。https://drive.google.com/open?id=ファイル固有のID例えばコピーしたアドレスがhttps://drive.google.com/open?id=1bCdVk8kRW5IgISfEU7jqYsKstoIKNxFVだとしたら「id=」の後ろの部分である1bCdVk8kRW5IgISfEU7jqYsKstoIKNxFVがファイル固有のIDとなります。このIDをつかってアドレスを以下のように編集します。https://drive.google.com/uc?export=view&id=ファイル固有のID先程のアドレスの場合であればhttps://drive.google.com/uc?export=view&id=1bCdVk8kRW5IgISfEU7jqYsKstoIKNxFVとなります。このようにアドレスを編集してHTMLで読み込むようにすれば、画像や動画をCodePenで表示できるようになります。Pen」の簡単な使い方について説明しました。Pen」はコードと実行結果を同じ画面で見せることが出来る大変便利なツールです。ブログに頻繁にHTMLやCSSのコードを書く場合は使ってみると良いかもしれません。同じカテゴリの一覧へツイートシェアB!はてブポケットプロフィールゆんつと申します。コーディングやWordPress、プログラミングで実践した事について書いています。どこかの誰かに、又、自分で読み返したときに役立つ情報が書ければいいなと思います。このブログ以外にも「こんぷれ」という雑記ブログもやっているので、もしよかったらそっちも見てくれると嬉しいです。