HTML5 canvas要素とベジェ曲線の基礎を予習


今度デジハリでセミナーがあるので、もう少し入門者ながら勉強してみたcanvas要素。
JavaScriptでベジェ曲線を描いてみました。

ポイントとなるメソッドは「bezierCurveTo()」です。
最初に「moveTo()」で開始地点を決めて、あとは「bezierCurveTo()」で終点と、あいだのハンドル(愛用イラストレータで言う)の先端の2点を指定するだけで描けるから、わりと憶えやすいかもしれません。

「bezierCurveTo()」の書式はこのようになります。(イラストレータで使う用語を織り交ぜると・・・)


と、引数が6つもあります。
で、例えば以下のように書くと、
開始地点のアンカーポイントがX=0、Y=0で、終了地点のアンカーポイントがX=300、Y=300になります。
さらに、ハンドルをにょきっと移動させたと仮定して・・・

  • 開始地点から伸びている方のハンドルの先のX=270とY=0が、第一引数と第二引数に。
  • 終了地点から伸びている方のハンドルの先のX=20とY=300が、第三引数と第四引数に。
  • 終点のX=300とY=300が、第五引数と第六引数に。


canvas要素のベジェ曲線
どうやら「beginPath()」を最初に書いてあげないと、例えば線を描いた後に丸を描く、などといった、別の図形を続けて描く時におかしな事になるので、書きます。
「strokeStyle=”#FF0000″」は、線の設定で、赤線を指定しています。
準備ができたら実際に線を描くために「stroke()」を使います、これを書かないと描画されません。
とりあえず下記のソースだけで曲線は描けます。

イメディオセミナー(Flash AS3.0入門 前編)予習のお知らせ

as3text.png
自作テキスト、ぎっしり作ってしまいました・・・。

12月16日(水)にイメディオのセミナー「『脱・やらず嫌い!』デザイナーのためのFlash AS3.0入門 前編」を行います。
http://www.sansokan.jp/events/eve_detail.san?H_A_NO=10159

前編は、プログラミング自体未経験の方が対象なので、受講生さんには予習をお願いします〜っ!

まずはサンプルファイルをダウンロードしてください。
サンプルファイル(20.4MB)

解凍するとフォルダがpre0〜pre7まであります。その中にそれぞれflaファイルがありますので、まずpre0_varの中のflaファイルを開いて下さい。
タイムラインの1フレーム目にアクションが書かれていますので、アクションウインドウを開いていただき(winならF9キー)、グレーアウトしているスクリプト通りに、マネして書いて(コピペはやめてくださいね。)、パブリッシュして下さい。

これをpre7_monsterフォルダまで行ってください。

とはいっても、いきなりすんごいことは、してもらわなくても結構です。
意味が分からなくても、まず、動かすっ。
変数と基本文法、あと「イベント」のお決まりのおまじない、addEventListenerなどを、しっかり手打ちしてください。

とにかく手打ちすることに慣れること、そして動きが確認できるまでチャレンジしておいてください。

フォルダ名:『pre0_var』

「はじめての、AS3」が出力パネルに表示されたらOKです。

フォルダ名:『pre1_flog』

カエルが半透明になったらOKです。

フォルダ名:『pre2_flog』

カエルをクリックするたび横に移動すればOKです。

フォルダ名:『pre3_flog』

カエルが左上に出現したらOKです。

フォルダ名:『pre4_flog』

ステージをクリックするたびに、カエルが現れたらOKです。

フォルダ名:『pre5_monster』

怪獣が右に移動していったらOKです。

フォルダ名:『pre6_monster』

怪獣がマウスの位置にゆっくり近づいていったらOKです。

フォルダ名:『pre7_monster』

怪獣がマウスの位置にゆっくり近づいて、さらに、マウスの方向に左右に向きを変えたらOKです。

では、当日お会いしましょう!

HTML5のcanvas要素とJavaScriptを試してみました。

まだIEだと見れないと思います。
こちら、Mac版FirefoxとSafariのみでしか確認してません・・・(ちゃんとやれよっ・・・て?)
Flashじゃないですよ。

さて、次世代のHTML5、新要素として結構アツいcanvas要素。
グラフを書いたり、ゲームを動かしたり・・・いままでFlashやJavaアプレットとかいう技術で表現していたものが遂にブラウザベースで実現出来るようになる、らしい。

で、canvas要素に使うJavaScriptで「とりあえず丸が描けたっ!やった〜」なんてよろこんでいるしょうもない大人ですが、世の中にはすごい人たちがいっぱいいますね?
こんな人たちにはまだまだ追いつかないにしても、とっかかりで簡単な所からやってみました!!

参考サイトはこちらです。

HTML5.JP - 次世代HTML標準 HTML5情報サイト

 http://www.html5.jp/

ActionScriptでいうGraphics.drawCircle()的なメソッドを使って円を描き、久しぶりに使ったsetInterval()で繰り返し処理をして座標を入れ直す、というやり方は基本中の基本ですね。

まずは新要素、canvasを使ってbody内にこんな風に書いてみます。


id名をつけたのは、JavaScriptでそのままid名をgetして来るためです。そうなるとこれ。

ところが、canvas要素で描画するには、canvas要素の「コンテキスト」なるものを取得する必要があるらしいです。記述はこんな感じです。

ところで、canvas未対応のブラウザは処理しないように、条件文をつけて、対応ブラウザのみ動作するようにしましょう。

今回は、ctxという変数にcanvasのコンテキストを与えたので、この変数にドットでつないで命令する、これはAS3でも同じ考え方、、ってイメディオのセミナーの受講生さんに言ってるんだけど、理解してくれるのに時間がかかるもんです。まあ、それはさておき、、

これで描画を始めるよ!という意味で・・・

これで描画を終わるよ。
と言う意味なんですが、最後に「描画しなさい!(正確には塗りつぶそうぜ)」と命令することによって描かれるので以下を忘れてはいけません。

と、いうわけで、body要素内にコレだけ描けば、円が描かれるはずです。
(ブラウザによる、、、なんといい加減な説明ですが。IEは無理。)

WCAN 2009 Summer イベントレポート!

P8080002.JPG名古屋に行ってきました!名古屋国際会議場。
目当てはWCAN!、名古屋のWeb関連セミナー、初参加です。

朝起きて、新大阪から新幹線で50分!名古屋駅に到着。東京に行くよりだいぶ近いな〜。

さて、今回はCMS特集ということで、今後はどんなCMSを使おうかって事で悩んでいる中、そしてCMS案件が増えている中、1日がっつり「キッカケ」だけでも作れたらなあって意気込みで、名古屋へ!!

SESSION-1 :CMS導入のメリットを探る[20分]
株式会社アクアリング 平野さん
http://www.aquaring.co.jp/

SESSION-2 : Lightning Talks [30分]
《1》藤本 壱さん
『WordPressをCMSとして使う場合の向き不向き』
《2》XOOPS Cube <http://xoopscube.sourceforge.net/>
株式会社ザクロ 早川さん <http://xacro.jp/>
《3》Nucleusが生き残っているわけ<http://japan.nucleuscms.org/>
はなまちや 長沢さん <http://hanamachi.com/>
《4》concrete5 <http://concrete5-japan.org/>
Usagi Project 上野さん <http://katz515.exblog.jp/>

SESSION-3 : クライアントから見た a-blog cms [40分]
有限会社アップルップル 佐藤さん
http://www.a-blogcms.jp/

SESSION-4 : 「bingo!CMS」で”ひらめきをドラッグ&ドロップ” [40分]
株式会社アイ・ティー・ディー 小林さん
http://www.bingo-cms.jp/

SESSION-5 : SOY CMSのご紹介。こんなときに使ってください! [40分]
株式会社日本情報化農業研究所<http://www.soycms.net/>

SESSION-6 : Movable Type  [20分]
シックス・アパート株式会社 関さん
http://www.sixapart.jp/

と、みっちりでした。

=======

P8080003.JPG

SESSION-1 :CMS導入のメリットを探る[20分]
平野さんのお話。

6年くらい前から「これはお金になるぞ!」と注目されたそうです。
でもなかなか苦労されたそうで・・・
ここ1〜2年くらいでCMSがまた流行り始めたということで、以前にCMSブーム的な動きはあったと言う事なんですね。
僕がはじめて触ったCMSは5年ほど前にXOOPSを触ってました。
テーブルレイアウトだったんですね、デフォルトが。

今は企業のWEBサイトはあるのは当然、費用対効果が求められて当然とのこと。。
これがCMSを使っても使わなくても関係なく、本当に質が求められるのは当たり前だなあということですね。

【CMSを使うメリット】
■ 管理画面から簡単更新
■ HTMLの知識がいらない
■ 承認フロー
■ スケジュール配信(プレスリリース、キャンペーン情報を例えば、当日0時に配信出来る機能など)
■ ワンソースマルチユース(1回の操作で色んなプラットフォームに使える)
 ◎マルチ配信◎マルチプラットフォーム(色々なファイル形式、PC用、携帯用などが良い例)
■ コンポーネント管理(ヘッダーなど共通パーツ領域、メニューなども一括管理)
■ データ連携(CSVなども取り込む)
■ サーバ状のリソース管理 (ゴミファイル、使わなくなった画像などをきちんと消してくれる機能)
■ リニューアルコスト削減 (HTMLをせっせと作るより、記事を書く

「CMSの選定」が最大のポイント
「できること」ではなく「制約」に注視しましょう。

とのことでした。
なるほど、確かに、「こんな事が出来るんです!ほら!」なんて言われても、
その反面これは出来ないという事を知った時にちょっとがっかりする場合もあります。
いずれにせよ、「エンドユーザのためのCMS」と「Web制作者のためのCMS」との共存って難しいテーマかもしれないです。

=======

P8080005.JPG

SESSION-2  LIGHTNING TALK
5分間のライトニングトークです。

《1》藤本 壱さん
『WordPressをCMSとして使う場合の向き不向き』

【いいところ】
■無料
■情報源多い
■ユーザがコミュニティ発達(WordCamp/WordBench)
■テーマが豊富、たいてい無償
■プラグインが豊富、たいていの事はプラグインで実現可能(携帯サイト、フォーム作成など)

【どうなん?的な所】
■テンプレートが PHPそのもの
■PHPがわかるひとには良い、分からない人には困難
■プラグインに依存が高い
■プラグイン同志がバッティング、WPをバージョンアップしたらトラブル等

あと、こんな特徴があるらしいです。
■単一ブログ管理用
■単一ブログで管理出来るサイト
■作成する人間が少ない(承認フローがシンプル)
■プラグインに過度に依存しなくても良い
■PHPの知識による

~~~~~~~~~~~~~~~~~~~~~~~~~~
《2》XOOPS Cube
株式会社ザクロ 早川さん

【特徴】
■汎用CMS(LAMP環境)
■モジュール拡張
■柔軟なデザイン可能
■オープンソースで構築

XOOPS Cube Legacyがあり、古いモジュールも使えるんです、との事です。
昔のXOOPSのテーマなど利用可能らしい。
今からの人はXOOPS Cube Legacyを使ってくださいとの事で
COOPS(コープス)というサイト、XOOPS制作会社の紹介、制作事例紹介などをしている、ということです。

~~~~~~~~~~~~~~~~~~~~~~~~~~
《3》Nucleusが生き残っているわけ
はなまちや 長沢さん

息が長いCMSです。

GPLライセンス 個人商用、無償利用可能

1つのシステムを突っ込めば複数のサイトを構築
お客さんにキャンペーンサイトが出来るごとに使用法を教えるのは面倒

ここから詳しい情報を↓
blog.hanamachi.com/

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜
《4》concrete5
Usagi Project 上野さん

はじまりは90名ほどで開発したらしい(サイト構築経験者がほとんどいない状態!?)

画面から編集、プログラミングの知識は要らないまま構築が可能という特徴があるらしい。

今年4月から日本語サイトも。

P8080009.JPG

==============

P8080015.JPG

SESSION-3 : クライアントから見た a-blog cms [40分]
有限会社アップルップル 佐藤さん

【特徴】
■デザインの柔軟性
■高機能、多機能
■更新のしやすさ

公開後、何が必要になるか?を考えている
■良質なコンテンツ
■最新情報のすみやかな配信
■サイト自体の継続性

サイト運用は大事だけど、コンテンツ運用も大事

「クライアントがコンテンツを育てやすい事」←が、大事。

【仕組み】
■見ているページをその場で更新
■管理ページに入る必要なし
■直感的な操作

NOT WYSIWYG → WYSIWYGを使わない!!

【WYSIWYGの難点とは】
■入力のエリアが一つだけ
■文章や画像の情報を分けて再利用できない
■情報構造への意識が散漫になりがち
■HTMLが汚くなる事も

【カラム(ブロック要素)単位の更新】
入力項目を自由設計を可能
Web制作者のためのもので
HTMLベースのテンプレート
DWで編集が楽
スニペットなどの拡張も用意
インクルード機能で共通部分をパーツ化

SSIをサポートしているのでDWで見る事が出来る!!!
DWのスニペットが使えるので、視覚的にべんりだな!!

■機能紹介
・モバイル対応
 ◎各キャリアへのテンプレート設定が可能
 ◎半角カナ変換
 ◎モブログ機能(version 1.1.0以降)
 ◎絵文字対応(version 1.2.0)

・フォーム機能
 ◎モジュールとしてHTMLテンプレートに記述するだけで設置可能
 ◎入力値のチェック機能
 ◎フォームパーツの選択が自由
 ◎CSVなどでデータの再利用など

・カスタムフィールド
 ◎エントリー、カテゴリ、ブログごと、設定
 ◎HTML上に入力パーツを作れる

P8080025.JPG

見出しのレベルを下層ページで分けたい場合に、見ているページに合わせて下げていったりする事が、割と簡単に出来るらしい。
例えばトップでロゴに<h1>だったものを、詳細ページでは、記事タイトルそのものを<h1>にしたいときなど。

============================

P8080037.JPG

SESSION-4 : 「bingo!CMS」で”ひらめきをドラッグ&ドロップ” [40分]
株式会社アイ・ティー・ディー 小林さん

グローバルメニューなど、メニューで作る。
ローカルメニューもメニューで作る。
自動的にパンくずも表示されるようになる。

高機能な作成ツールだな
でもマークアップをする人からすると、どうするんだろ?

デザインを直接触る場合、テンプレート編集画面から「CSS編集」でCSSを管理画面上で触ることが出来る。

↓みれば分かるけど、HTMLやCSSの知識無くても、レイアウトが可能。
ドラッグアンドドロップでレイアウトなどを決めています。
P8080044.AVI

============================

P8080052.JPG

SESSION-5 : SOY CMSのご紹介。こんなときに使ってください! [40分]
株式会社日本情報化農業研究所

農業もやってる会社のCMSです。

特徴
はやい。かんたん。
2時間程度の講習を受けたら仕事で使える、らしい。
マルチサイト、マルチユーザ。

ページと記事を完全分離されている。

サイト構成が非常に柔軟

<li>が新着情報の記事として件数分入ってくるので
<li block:id=”news”>
と、MTと違い、マークアップした要素に属性を与えるというルールらしいです。

P8080054.JPG

そのなかに、書きたい内容をコメントタグで、「表示したい場所に表示させられる」という特徴!

DWのスニペット、テンプレート機能が使える。

半独立appのSOY Appなどを使い、スパムよけ機能搭載のお問い合わせフォームを設置出来る。
フォームデザイン編集機能を備えており、自由に管理画面の操作でお問い合わせフォームが完了。

ショッピングカート付きのAppをまもなくリリース!

管理画面のカスタマイズも可能
クライアントが写真アルバムを作るだけ、というケースの場合、管理画面を写真投稿向けにカスタマイズ!

P8080054.JPG

【こういう人に使って欲しい】
■時間がない
■予算がない
■普段使って
いるCMSでは規模が大きすぎる
■仕様が膨らんでしまった。仕様変更が入りそうだ
■既存サイトへCMSを取り込みたい
■CMSっぽくないサイトにしたい
■HTML5で行きたい!

フォーラムを運営しています。

============================

P8080056.JPG

SESSION-6 : Introduction to Movable Type  [20分]
シックス・アパート株式会社 関さん

ソーシャルサービスとの連携を目標にしているらしい。

ブログから、Webサイト全体の設計
CMSとして機能を完成
作成したデザインの配布・再利用
コンテンツとデザインの正しい設計をMTタグ・拡張の知識量に依存せずノウハウをシェア

「何が出来るのか」を分かりやすく、直感的に操作できるナビゲーションを目標に、
ナビが変わるらしい。
ナビが横並びだった。

リッチテキストエディター機能向上やカテゴリ、フォルダの並び替えができるらしい。

ちょっとだけ値上げ・・・

============================

総合的に思った事は、やはりCMSは世の中に必要だと思います。
ただ、運用・構築となると、制作者に対するもっと突っ込んだ勉強会などを
各開発元がもっともっと地方に向けても積極的に攻めていって欲しいなと思います。

結構興味がある人は多く、地元のイベントを開くのであれば、
それはそれで協力出来る人も色々いるんじゃないかと思います。
まあ、僕もそれが出来たらいいなと思います。