iframeを使ってWordPressの投稿画面にp5.jsの実行画面を表示する(プラグイン不要・レスポンシブ対応版)

簡単には表示できなかったp5.jsの実行画面

せっかく作ったんだから▼をブログに表示したいと思うのは自然です。しかし、いざやってみると思いのほか苦労しました。おかげでいい勉強になってCSSやWebにおける画面幅の知識が増えました。

▼p5.jsが楽しい!!という参考記事

本記事は「p5.jsの実行画面を表示する方法」をまとめた備忘録です。

プラグインはいりませんし、おそらくthree.jsなど他のライブラリでもいけるはず。

環境(記事執筆時)

vf_GR032766

p5.jsの実行画面を投稿画面に表示する方法

(1)p5.jsの実行画面(html)を<iframe>要素で埋め込む
(2)<div>要素で<iframe>要素を囲んで、CSSにレスポンシブ設定する

この2つが必要です。

Snow MonekyはYouTubeなどいくつかのサービスでiframe+レスポンシブ対応がなされていますが、p5.jsのようなものはユーザがなんとかするべしな類のもの。

(1)p5.jsの実行画面(html)を<iframe>要素で埋め込む

<iframe
     title="p5.js demo"
     src="https://nnamm.com/_creativecoding/180924/demo1.html"
     width="100%"
     height="100%"
     frameborder="0"
     sandbox="allow-scripts">
</iframe>
パラメータ 説明
titile 埋め込みコンテンツがどんなものかの説明。
src 埋め込みぺージのURL。
width コンテンツの幅。
height コンテンツの高さ。
frameborder HTML5では非推奨のようですが、Safariだとボーダーが表示されていたので、”0″を指定して表示しないようにしました。
sandbox 埋め込むコンテンツへの制限。”allow-scripts”を指定してスクリプトの実行を許可します。(なくても動くのですが念のため)

参考:<iframe>: インラインフレーム要素 – HTML: HyperText Markup Language | MDN

(2)<div>要素で<iframe>要素を囲んで、CSSにレスポンシブ設定する

html

<div class="creative_coding">  ← 親要素で囲う、class指定も忘れずに
    <iframe
         title="p5.js demo"
         src="https://nnamm.com/_creativecoding/180924/index.html"
         width="100%"
         height="100%"
         frameborder="0"
         sandbox="allow-scripts">
    </iframe>
</div>

CSS

.creative_coding {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 60%;
}
.creative_coding iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

親要素<div>

パラメータ 説明
position relative設定。(相対位置)
width 幅いっぱい。
height 指定しない。
padding-top 画面比率で高さを設定する。(padding-bottomでもOK)

padding-top=”100%”にすると横幅と同じになるため1:1で表示される。僕は16:10画面比率に近い60%にしました。

子要素<iframe>

パラメータ 説明
position absolute設定。(親に対して絶対位置)
top/left 左上を原点(というのかな?)に指定。
width 横幅いっぱい。
height 縦幅いっぱい。

参考:iframe要素のレスポンシブWebデザイン対応 | Tips Note by TAM
参考:padding-top – CSS: カスケーディングスタイルシート | MDN

p5.jsのソースコードで気をつけること

横幅、縦幅はinnerWidth、innerHeightのように画面幅を指定するのが無難です。

createCanvas(—px, —px);

とpx指定しても投稿ページの横幅に影響されてしまいます。だったらpadding-topで縦横比を設定しておけば、概ね意図した通りに表示されるはず。

調べていくと画面幅の指定方法にもouterWidthなど複数あることも知って勉強になりました。Webってすごいね。

vf_GR032768

おわりに

これでパソコンでもスマホでもp5.jsの実行画面が表示されるようになりました。大満足!

 

「他にこういうやり方があるよ」とか「ここ間違っているよ」ということがあれば、コメントで指摘してもらえたら嬉しいです。よろしくお願いします。

この記事を書いた人

花村貴史|Takashi Q. Hanamura

空気感フォトグラファー/傾聴者/エンプティチェアが好き/Creative Codingが好きな、写真を生業とする元ソフトウェアエンジニア。
「自分の好きを大切にしよう」と会社員をやめて大好きな信州に移住。2年半の信州生活を終え、愛しの相方さんのいる兵庫に移住。
その人・その場の「空気感をそっとすくい撮る」写真が好評。撮影した写真で「自然体のあなた」を世に伝えるメッセンジャー。
オシゴトについては「WORKS」へ。ご依頼は「CONTACT」からどうぞ。

写真のオシゴト一覧

撮影|Photo Session

お話しながらのポートレイト撮影です。「今」そして「これから」のあなたにフォーカスして撮影します。SNSやサイト用のプロフィール写真に。

 

撮影|Photo Shooting

「友達と楽しんでいる」「セミナーで講演している」「パーティーを主催している」など、皆さんが大切な時間を過ごしている瞬間をスナップします。

 

写真術|Photo Lecture

カメラの使い方、撮影術、Lightroomの使い方などの「マンツーマンレクチャ」や「少人数制のワークショップ」について。写真に関する疑問の解決に。

 

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします