プログラミングB #14

#14 DOM,モバイルデバイス向けのプログラミング


高尾俊介(takawo@konan-wu.ac.jp)
甲南女子大学 文学部 メディア表現学科 講師



DOM(Document Object Model)


通常,ウェブページはHTML(HypeText Markup Language)と呼ばれるマークアップ言語で記述されている.HTMLではH1やP,IMGなどのマーカー(印)によって文書内の構造を記述する.

HTML以外のPHPやPython,JavaScriptなどでウェブページを開発することも増えているが,それらは基本的に最後にHTMLを出力します

(ウェブサイトをChromeの検証でDOMツリーを確認,文書を書き換えてみる)

p5.jsでは,さまざまなDOM要素をp5.dom.jsを読み込むことで操作できる.

  • 新たにDOM要素 <p>  や<div>といったHTML要素を操作することができる.

授業ではDOM要素として,GUI(グラフィカルユーザーインターフェース)のボタンやスライダーを作成してプログラムで使用してみる.
詳細を知りたい場合などは,


から,様々な関数やシステム変数など仕様を確認してください.


ボタンの制御


let button;

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  angleMode(DEGREES);

  //ボタンの作成
  button = createButton("draw rect");
  //ボタンの表示位置をx:20px,y:20pxに
  button.position(20, 20);
  //ボタンを押した時にdrawRect関数(22行目)を実行
  button.mousePressed(drawRect);

  background(0, 0, 100);