Processing.js (2) : アニメーション1 基本
今回も引き続き、Processing.jsの基本について解説していきます。今回は、Processing.js上で物体を動かすにはどうすれば良いのか、アニメーションの基本構造について理解を深めます。
ゲストレクチャーのスライド
SFCの中西泰人さんの授業「オブジェクト指向プログラミング」で、ゲストとして30分ほど喋ったので、その際のスライドを掲載。この、Commodore 64での「10 PRINT CHR$(205.5+RND(1)); : GOTO 10」を切り口に、Processing、openFrameworks、Cinderなどについて紹介する流れ、もう少しリファインして持ちネタにしていきたい所存。何も見ないでもコードをスラスラ書けるくらいまでなれば、そこそこ説得力あるのではと…
Webフレームワークを使う – Twitter Boostrap
前回解説して「CSSレイアウト」の方法を組合せて、サイト全体の複雑なレイアウトをしていくことは、技術的には可能です。しかし実際に制作してみると、細かな調整や思わぬブラウザの挙動に苦労することも多いのが現状です。「CSSフレームワーク」を使用することで、ブラウザごとの表示の違いをリセットしたり、レイアウトのための基本的な仕組みを利用して簡単にページ全体のレイアウトをすることが可能となります。現在、様々なCSSフレームワークがフリーで公開され利用できるようになっています。今回は、CSSフレームワークの中でも人気の高い「Twitter Bootstrap」を使用して、サイト全体をデザインする基本を学びます。
スライド資料
授業のスライドは、下記から参照してください。
Processing.js入門
HTML5 + CSS3の基礎からステップアップして、今回からいよいよWebブラウザを使用して様々な表現を実践的に行っていきます。今回から数回にわたって、Processing.js という開発環境を紹介します。Processing.jsは、Processingという開発環境をJavaScriptに移植したもので、とても簡単にプログラミングを始められる環境です。しかし、単なる入門者向けの環境ではなく、プログラム技術を学んでいくことで、非常に高度な表現が可能となります。今回は、まずこのProcessing.jsの導入を行います。
CSSレイアウト
前回解説したCSSの「ボックスモデル」は、単に要素の余白や枠線を指定することができました。この仕組みを高度に応用することでページ全体のレイアウトを行うことが可能です。今回はCSSでレイアウトを行う基礎として、二段組のレイアウトを作成します。そのやり方にはいくつかの方法があります。基本的な方法から徐々に高度な方法までCSSレイアウトについて学んでいきます。
サンプルファイル
本日のサンプルファイルは以下からダウンロードしてください。
スライド資料
授業のスライドは、下記から参照してください
HTML5でマークアップ、初めの一歩
前回概観したHTML5、今回は実際にHTML5から強化されたセマンティック(意味)によるマークアップを、実際にページを作成しながら体感します。また、HTML5とあわせて、CSS3による豊かな表現力を試してみましょう。
サンプルファイル: 今回とりあげたHTML5によるマークアップのサンプルファイルは、以下からダウンロード可能です。
CSS入門 2 – ボックスモデルを理解する
HTMLのブロックレベル要素(見出し、段落など文書を構成する基本要素)は、ボックスと呼ばれる矩形(四角形)領域を生成します。この領域の概念のことを「ボックスモデル」と呼びます。各ボックスのテキストや画像などの内容の周辺には、パディング(Padding)、ボーダー(Border)、マージン(Margin)の順に周辺の領域を持っています。CSSでWebページをデザインしていく際に、このボックスモデルの理解が欠かすことのできない前提知識となります。今回はこのボックスモデルに焦点をあてて、CSSを活用したデザインについて解説していきます。
CSSテンプレートのダウンロード
CSSのテストのためのテンプレートは下記からダウンロードしてください。
スライド資料
授業のスライドは、下記から参照してください
MozziとPdを連携する
今回は、Mozziの応用として、Pd (Pure Data)との連携を試してみます。Pdで音程をコントロールして、簡易シーケンサーを作成します。
HTML5とは何か、HTML5はじめの一歩
今回からは、Webをとりまくテクノロジーの最新のトレンドを積極的にとりあげていきます。「HTML5」というキーワードを一度は耳にしたことがあるのではないでしょうか。しかし、言葉ばかりが先行して、HTML5が具体的に何なのか、今一つはっきりしないという方が多いのではないかと思います。今回はまずこのHTML5とは一体何なのかということについて、これまでの歴史的な経緯を踏まえながら解説していきます。さらに時間があれば、実際にHTML5から導入された新たな要素を実際にページを作成しながら説明していきたいと思います。
CSS入門1 – 情報の形を視覚化する
ここまで4回にわたって解説してきたHTMLは、文書の中に目印をつけて(マークアップ)、その構造を記述するための言語でした。その結果ブラウザに整形されたページが表示されるものの、文字の色や大きさ、背景の色、行間やフォントなど、そのデザインはブラウザであらかじめ決められた固定のものでした。今回からはこのHTMLで構造を記述された文書に対してデザインを行うための新たな仕組みについて解説していきます。HTMLに対してその表示形式を制御するしくみとして「スタイルシート」というものがあります。HTMLではその代表的な仕組みとして、CSS (Cascading Style Sheets) があります。このCSSとHTMLによって、体裁と構造を分離して記述することが可能となり、現在のWebデザインの基本となる考え方となっています。今回はこのCSSの仕組みと基本についての導入を行います。
スライド資料
本日のスライド資料は下記のリンクから参照してください。