jQueryには「プラグイン」という強力な機能が用意されています。プラグインとは、jQueryライブラリ本体の機能を手軽に拡張することが可能となる仕組みです。現在世界中のjQueryのユーザーが、大量のプラグインを開発して、ネット上で配布しています。個人ですぐに思いつくような機能やインターフェイスは、そのほとんどは既に誰かが開発してプラグインで配布しているという状況です。極論をすれば、一からjQueryでコーディングすることなく、プラグインだけど高度な動的なWebページを開発可能です。
今回は、このプラグインの機能から、イメージギャラリーをとりあげます。膨大に存在するイメージギャラリーの機能を実現するプラグインの中から、今回は「Galleria」というプラグインを例にとって、プラグインを活用したページ制作の手順について解説していきます。
フォトギャラリープラグイン参考リンク
Webブラウザ自体をメディアとしてプログラムする際には、JavaScriptというプログラミング言語を使用します。JavaScriptはとても強力な言語なのですが、きちんと理解するには、ある程度のプログラミングの基礎知識が必要となります。しかし、jQueryというJavaScriptをベースにしたフレークワークを使用することで、少なくシンプルなコードの記述でとても豊かな表現が可能となります。jQueryを使用することで、直感的なデザイン的な発想で、Webブラウザでの様々な動的な表現が可能となります。
今回は、このjQueryの導入方法を学んだ上で、jQueryを利用したプログラミングを解説していきます。
参考リンク
前回は、openFrameworksで動きを生みだす方法について解説しました。これにより、単体の図形をアニメーションさせることが可能となりました。今回はこの動きを生みだす方法を応用して、たくさんの図形を同時にアニメーションさせる方法について解説します。ここでポイントとなるのは、たくさんの位置や速度などのパラメータを記憶するための工夫です。多くのデータの集合を扱うために、C++を始めほとんどのプログラミング言語では「配列」というデータ形式が用意されています。この配列を用いることで多くのパラメータを効率的に管理していくことが可能となります。
これまでは、HTMLを使用して文書を構造化することを目的としてきました。今回からは、この構造化された文書に体裁(デザイン)を付加していく新たな内容に入ります。HTML文書に体裁を加えるには、CSS(カスケーディング・スタイルシート)という新たな仕組みが必要となります。今回はこのCSSの導入を行います。
今回の内容の制作テンプレートは下記からダウンロードしてください。
先週の授業の中で予告したとおり、今回は「jQueryでフォトギャラリーをつくる」という課題の制作を各自で進める実習とします。中間課題は以下の通りです。
中間課題：jQueryでフォトギャラリーをつくる
jQueryのプラグインを使用してフォトギャラリーを作成してください。以下の点に注意してください。
- 使用するプラグインは、各自でネットで調査して、気にいったものをダウンロードして使用する
- 写真は、自分で撮影したもの、もしくはライセンスフリーのものを使用、例えばFlickrでccライセンスのものを検索して使うなど
- 締切は次回の授業(11月2日)の授業開始までとします、作成したページを授業内で簡単に発表してもらいます
インターネット上には数多くのjQueryのプラグインが公開されています。フォトギャラリーのためのプラグインも膨大な数にのぼります。下記のリンクを参考にしてください。
もちろん上記のリスト意外にも沢山のプラグインが存在します。例えば、Googleで「jQuery + photo gallery」で検索すると多くのページがヒットします。
使用するプラグインの調査
課題で使用するプラグインが決まったら、下記のアンケートに答えてください。使用するプラグインの名前とURLを記入するようになっています。
Web動画表現、中間課題「jQueryを使用したフォトギャラリー」の調査
使用するプラグインが決定したら、プラグインをダウンロードし、解説ページを読みながら、実際に制作を進めましょう。
今回から数回にわたって、openFrameworksのaddon(アドオン)という機能について紹介していきます。addonとは、openFrameworksの機能を拡張するための、Processingでいう外部ライブラリのような機能です。addonを活用することで、openFrameworks単体ではプログラミングが困難な複雑な機能も簡単に付加することが可能となります。今回は、addonの紹介の初回として、ofxControlPanelとofxOpenCvを紹介します。
授業内で紹介した全てのサンプルプログラムは下記からダウンロードすることができます。
今回も、前回に引き続き、jQueryの基礎を解説していきます。今回は「マウスでクリックしたら、○○をする」「ドキュメントが読み込まれたら、○○をする」などの、特定の動作や状態になると命令を行う「イベント」という仕組みについて学んでいきます。
掲載が遅れてしまいましたが、先日のSFCでのゲストレクチャーの記録、その2。恩師である岩竹徹先生の「デザイン戦略 (デジタルサウンド)」で1コマ、ゲストでレクチャーしました。
内容は、こちらもopenFrameworksの紹介。こちらでは、openFrameworksを使うとこれだけパワフルなことができる、というデモ的な内容が主になります。最後に最近やっているAudio Visualなパフォーマンスのためのプログラムの試作版をデモしました。
こちらの講義も、スライド、サンプルプログラム、また最後に行ったデモのプログラムに関してもダウンロードできるようにしました。
今回から数回にわたって、openFrameworksで動きを生みだす(アニメーション)のための基本的な考え方を解説していきます。まずはアニメーション入門編ということで、openFrameworksで動きを生みだすための基本構造、setup、update、drawという3つの関数(命令のあつまったもの)の役割分担について説明します。基本構造を押さえたうえで、基本的な動きを生みだす方法を2つ紹介します。座標の情報を更新して図形を動かす方法と、座標系自体を操作して移動や回転を行う方法です。
懐かしの母校SFCでゲストレクチャーしてきました。井庭崇さん、すばらしい機会を設けていだだき、ありがとうございます!!
講義の中で解説したプログラムのソースコードは全てダウンロード可能です。
openFrameworksやXCodeを持っていない方で、プログラムの実行ファイルのみ確認したい方は、バイナリ版を用意しました。
Windows版は、現在コンパイルでひっかかる部分があり、現在調整中です。すみません!!
