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

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

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

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

▼結果がこちら。iframeと追加CSSにクラスを1つ追加します。

本記事は「p5.jsの実行画面を表示する方法」をまとめた備忘録です。プラグインはいりませんし、おそらくthree.jsなど他のライブラリでもいけるはず。

環境(記事執筆時)

  • WordPress:v4.9.8
  • テーマ:Snow Moneky v4.2.20

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

以下の2つが必要です。

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

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コンテンツの高さ。
frameborderHTML5では非推奨のようですが、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>

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

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

子要素<iframe>

パラメータ説明
positionabsolute設定。(親に対して絶対位置)
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ってすごいね。

おわりに

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

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

【お知らせ】出張撮影のご依頼、承ってます

あなたの行きたい場所に出張してポートレイトやプロフィール写真を撮影します。出張エリアは関西エリア(神戸・大阪・京都など)、関東エリア(神奈川、東京など)です。

★詳細:ポートレイト撮影(Photo Session)
★詳細:イベント撮影(Photo Shooting)

撮影予約可能日

【関西エリア】
・当面の間は関西&土日祝日の撮影をお受けできます。ご依頼お待ちしています。

【関東エリア】
・未定

まずはお気軽にご相談ください

この記事を書いた人

花村貴史|Takashi Q. Hanamura

Software Engineer & Photographer/Web開発をしながら、撮られることになれてない方の笑顔を撮らせていただいてます。その人・その場の「空気感をそっとすくい撮る」写真が好評。横浜育ち38年、脱サラ信州移住2年半を経て、2018年春から関西在住。翌年秋から夫婦生活スタート。

人物写真|Photo Session

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

イベント写真|Photo Shooting

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

写真術|Photo Lecture

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