p5.jsはブラウザ上で実行できるため、iOSのSafariなどでも実行可能である。ただしそのままではアドレスバーなどが表示されてしまいフルスクリーンにならないため、スマホやタブレットで展示したい場合、あまり見栄えが良くない。また、タッチしてスワイプしようとすると画面がスクロールしてしまう。これを解決するため、以下の設定をする。

まずはindex.htmlのheadタグ内に以下を記述する（※このサイトのテンプレートを使っている場合は既に設定済み）。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta name="apple-mobile-web-app-title" content="p5.js example" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" type="text/css" href="style.css">

2行目の

<meta name="apple-mobile-web-app-title" content="p5.js example" />

のp5.js exampleの部分はタイトルなので自由に変えて構わない。

次にstyle.cssを設定する（※上と同じく、このサイトのテンプレートを使っている場合は既に設定済み）。

html,
body {
	height: 100%;
	width: 100%;
	overflow: auto;
}
body {
	margin:0;
	padding:0;
	position:fixed;
	background: black;
}
canvas {
	display:block;
	-webkit-overflow-scrolling: touch;
	overflow: hidden;
	position:absolute;
	left:0;
	top:0;
	width:100vh;
	height:100vh;
}

最後にp5jsのスケッチの中に以下の記述を加える。

function touchMoved(){
	//タッチ移動中の処理
	return false;	//デフォルトのスクロールイベントを発生させないために必要
}

 

これを自分のウェブサイトにアップロードした後、展示用のデバイスで以下の要領でページを開く。

1. まず普通にページのアドレスをSafariで開く。

2. 「ホーム画面に追加」をする

3. するとホーム画面にアプリと同じようなアイコンが現れる。

4. アイコンをタップするとSafariでページのアドレスが再度開かれるが、上部にあるアドレスバーなしで実行されるので、かなりアプリ風になる。