Yasuhisa | Web Directions East

Posts by

ワークショップで必要なモノリスト

• カテゴリ: ブログ
• 記者: Yasuhisa
• November 10, 2010年11月10日

前回 ブルース・ローソンのHTML5ワークショップで必要なものリストで、HTML5 のワークショップでの必要なモノを紹介しました。例えば ステファニーのCSS3ワークショップはほとんど同じものを用意していただくだけで結構ですが、他のワークショップでは必要なモノは若干異なります。以下にワークショップごとに必要なモノをまとめておきました。参加者には各自メールでこの内容は届きますが、こちらも目を通しておくと良いでしょう。

CSS, JavaScript, HTML を利用したiPhone & Android アプリケーションの構築 ノートパソコン テキストエディター 最近のブラウザ (特に指定なし) Android SDK (PC/Mac両対応) セマンティックと構造を意識したHTML5サイトの構築 ノートパソコン テキストエディター Opera h5o Bookmarklet Safari と IE8 はあればいいが必須ではない jQuery & jQuery UI 講座 ノートパソコン テキストエディター Firefox Firebug 使いやすい、美しいを実現する CSS3 活用講座 ノートパソコン テキストエディター 最近のブラウザ (Safari, Chrome, Firefox, Opera, IE) jQuery Modernizr

少人数のワークショップですので電源とネット回線の心配はありませんが、当日授業が始まってから大急ぎでダウンロードするのではなく、あらかじめ用意しておくと授業に集中出来るはずです。

ブルース・ローソンのHTML5ワークショップで必要なものリスト

• カテゴリ: ブログ
• 記者: Yasuhisa
• November 7, 2010年11月07日

いよいよ、今週からスタートする Web Directions East。カンファレンス前に１日たっぷり使ったワークショップが開催されるわけですが、HTML5 の講座で講師をするブルース・ローソンから、受講前にもってきてほしいモノがあるという連絡をもらいました。以下にそのリストを紹介します。

• ノートパソコン (OSはなんでもOK)
• コーディングをするためのエディタ
• Opera
• h5o Bookmarklet

SafariとInternet Explorer 8は入る環境があれば入れて来て欲しいということでした（よって必須ではありません）。

h5o は、The HTML5 Outliner の略で、アウトラインを生成するのに活用します。文書構造を確認するのに便利ですし、HTML5向けのWebサイトのマークアップだけでなく ePub の制作のときにも役立ちそうです。Chrome を入れている方は HTML5 Outliner という拡張機能も一緒に入れて来てもいいかもしれませんね。

WDE2010スピーカー紹介: ポール・アイリッシュ (Paul Irish)

• カテゴリ: ブログ
• 記者: Yasuhisa
• November 4, 2010年11月04日

Google Chrome チームの一員として開発者と常にコミュニケーションをとっている Paul は、Google としての顔というよりかは Web 開発コミュニティ、特に JavaScript 関連で大きな貢献をしている方という側面のほうが強いかもしれません。彼は jQuery の開発チームの一員として Chrome と同様コミュニケーションをとる役割を果たしています。また、Modernizr や CSS3 Please といったツールのメンテナンスにも関わっています。

最近一周年を迎えた JavaScript に特化したポッドキャストyayQueryでは、彼の豊富な知識や深い洞察はもちろんのこと、ブログなどではみることの出来ない彼のパーソナリティが見れるおもしろい場です。yayQuery はビデオでも配信されているので、こちらも要チェックです。

Paul Irish 関連で最近話題なのは、今年の 8 月にリリースした HTML5 Boilerplate でしょう。クロスブラウザの対処、パフォーマンスの向上、クロスドメインの Ajax と Flash の処理。そして IE へのケア。サイト構築をしていると必ずといって良いほどしなければならない手順をテンプレート化してあるのが Boilerplate の特徴です。彼のここ数年の経験がすべて活かされているこのテンプレート。特定のフレームワークやライブラリに依存しているわけではないので、柔軟に対応できるはずです。次にサイトを構築する際は、Boilerplate を起点に初めるときっとバグフィックを含めたプロセスが楽になるでしょう。

ちなみに Boilerplate の Wiki にはマークアップやサーバー設定に関する便利な情報が掲載されているので、たとえ Boilerplate を使わなかったとしても一読しておきたいですね。

Boilerplate を開発したときの知識やノウハウは今回の ... もっと読む »

WDE2010スピーカー紹介: ジョン・レシグ (John Resig)

• カテゴリ: ブログ
• 記者: Yasuhisa
• October 19, 2010年10月19日

ジョン・レシグの名前を知らなくても、jQueryを開発した方といえばピンとくる方は多いはずです。2006年にリリースした当時は様々な JavaScript ライブラリが混在していた時期でしたが、今では Web で最もアクセスされている 10,000 サイトのうち 31% が jQuery を利用しているほどメジャーな存在になりました。jQuery だけに限りませんが、JavaScript ライブラリを利用することで異なるブラウザの対応も容易にできるのがメリット。JavaScript をあまり理解していなくても簡単に実装できるので、Webデザイナーの中には重宝している方もいるのではないでしょうか。

もっと読む »

WDE2010スピーカー紹介: ジョナサン・スターク (Jonathan Stark)

• カテゴリ: ブログ
• 記者: Yasuhisa
• October 12, 2010年10月12日

日本のスマートフォン市場はほとんど iPhone といってもいい状態でしたが、今年に入って各キャリアが続々魅力的なデバイスを投入し初めてきました。10年以上前から日本の携帯電話からインターネットへアクセスは出来たものの、表現や機能面で制限がありました。それに対しスマートフォンは HTML, CSS, JavaScript といったパソコン向けに Web サイトを構築してきた方にとって馴染みの深い技術をそのまま使えるのが魅力です。

ここ数年パソコン向けでは高機能の Web アプリケーションを構築出来る環境が整ってきたわけですが、それと同じ流れがスマートフォン上でもみることが出来ます。各メーカーが OS と一緒に実装されているブラウザのアップデートを行うケースが多く、比較的新しいブラウザ環境が整っているのもスマートフォン向けのWebアプリ発展のスピードがはやい理由かもしれません。

各デバイスに合わせてネイティブアプリケーションを開発すればハードウェアの機能にアクセス出来るなど様々なメリットがありますが、より多くのデバイスで利用してもらいたいと考えるのであれば Web アプリケーションが最適です。

... もっと読む »

WDE2010スピーカー紹介: ステファニー・サリバン (Stephanie Sullivan)

• カテゴリ: ブログ
• 記者: Yasuhisa
• October 5, 2010年10月05日

10年前では常識として捉えられていた <table> を駆使したレイアウト。テーブルを利用したサイト制作から脱却し、構造化された HTML を CSS で装飾を行うことを早期から啓蒙していた方のひとりが今回 WDE 2010 で来日する Stephanie (Sullivan) Rewis です。2000年を過ぎた辺から CSS レイアウトを行う動きが活発になり初めていましたが、彼女の功績として注目なのが Dreamweaver を利用した CSS レイアウトを早期から実践していた点にあります。

2002年に発売された Dreamweaver MX でどのように CSS レイアウトを実現するのかといったノウハウを Community MX で公開しています。常に改善し続けている Dreamweaver に合わせて彼女も数々のチュートリアルや書籍を刊行しています。Dreamweaver の CSS サポートが徐々に充実しているのも実は彼女の働きかけが影響しています。Web標準の啓蒙に力を入れている Web Standards Project には数々のタスクフォースがありますが、彼女は Adobe Task Force ... もっと読む »

WDE2010スピーカー紹介: ブルース・ローソン (Bruce Lawson)

• カテゴリ: ブログ
• 記者: Yasuhisa
• September 28, 2010年09月28日

HTML5 という言葉は去年あたりから頻繁に耳にするようになったものの、まだ「未来」というイメージが先行していることから、現実味がない方もいると思います。また、仕様もかたまっているわけではありませんから、今学習しても仕方ないと考える方もいるでしょう。今後変化する可能性があるものの、コンセプトはこれから大幅に変わることはありませんし、一体 HTML5 で何が可能になるのかを知っておくのは損ではありません。また、HTML5 の中にある幾つかの機能は既にブラウザに実装されているので実践の場で使うための土壌は既にあるわけです。特に比較的新しいブラウザが実装されていて、種類も制限されているスマートフォン環境では積極的に HTML5 を利用している Web アプリケーションやサイトが増えてきています。

HTML5 に関する悩み・不明なところの解消、そして今知っておきたいところを短期間で一気に学習したい方はブルース・ローソンが最適なスピーカーです。彼は現在 Opera の Web 標準のエバンジェリストとして情報発信だけでなく、国内外で数々の講演を行っています。今年の7月に「Introducing HTML5」という書籍を刊行しており、そこで今からでも覚えて損はない HTML5 の機能を幾つか紹介しています。アマゾンのレビューでも彼の書籍は高い評価を得ています。

カンファレンスの１時間足らずの講演では満足いかないという方は、彼のワークショップに参加すると良いでしょう。１日たっぷり時間を使うワークショップでは、HTML5 の新要素に関する詳しい解説だけでなく、古いブラウザ、モバイル機器などへの対応をどのようにしたら良いかといった実践的な内容まで盛りだくさんです。Webアプリケーションを開発の方にとってはARIA と HTML5 を組み合わせたアクセシビリティ向上のためのテクニックは興味深い内容ではないでしょうか。

自身の Web サイトだけでなく、Opera の開発者向けブログでも「Accessible HTML5 Video with JavaScript」をはじめ幾つかの記事を執筆しています。ちなみにこの記事では、HTML5 ビデオに JavaScript を組み合わせてアクセシブルな字幕機能を実現するための方法が解説されており今後の可能性を感じる内容になっています。また、HTML5 についての情報が一挙に集まっている HTML 5 Doctor でも情報発信をしているので、開催前にこちらも目を通しておくて良いでしょう。

WDE2010スピーカー紹介: スコット・トーマス (Scott Thomas)

• カテゴリ: ブログ
• 記者: Yasuhisa
• September 21, 2010年09月21日

アメリカの政治に新しい風をもたらしたオバマ大統領選挙キャンペーン。それはソーシャルメディアを利活用した初めての試みだっただけでなく、アートやデザインという側面でみても新鮮かつ先進的でした。代表的なのが、アーティストのシェパード・フェアリーが作成した『HOPE』ポスターです。彼が無料で配布したこのポスターは後にオバマキャンペーンのシンボルになっただけでなく、パロディや制作ツールが登場するなどひとつの社会的動きにまで成長しました。このように人々の想いをビジュアルで表現するという動きが各地で発生したオバマキャンペーンですが、今年 WDE2010で基調講演をされるスコット・トーマスもアートとデザインから政治に関わった人のひとりです。

2007年に「Obama for America」のメディアチームの一員として加わり、オバマ大統領候補の公式サイトを手がけました。後にホワイトハウスの公式サイトのデザインも手掛け、ブランディングの視点から政治を社会をどう変えるかための知識と経験を積み重ねていきました。今回の基調講演でも当時の経験について詳しく解説してもらいます。

彼のもうひとつの実績として知られているのが『Designing Obama』という書籍です。これは世界中のアーティストやデザイナーと一緒に作り上げたアートブックで、オバマキャンペーンを政治とは違う側面から記録した内容になっています。この書籍の出版もオバマキャンペーンのようにWebを利用した草の根活動で実現しています。ソーシャルファンディングサービスとして知られている Kickstarter を活用し、出版のための資金を集めました。実はワタクシ長谷川も寄付した中のひとりです。書籍は無事出版され、現在は iPad 版もあります。

日本でもWebと実世界が密接になりつつありますし、政治も先進国の中で出遅れていますが次第にWebとの親和性を高めています。こうした今だからこそ彼のメッセージを聞くことに価値があると思います。常に一歩先行く WDE というイベントに相応しいスコット・トーマスに会いにきませんか？

Images:

The images are downsized due to limited space here. The original dimensions may differ.
Click on the image to open it on a new tab.