概要

イベント名 CSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」
通称「lp13」（えるぴー・じゅうさん）
日時 2011年1月22日(土)　12:20-18:40（開場は11:50）
会場 ベルサール九段
東京都千代田区九段北1−8−10　住友不動産九段ビル3F
（九段下、神保町、飯田橋下車）
定員 240名
出演（順不同） たにぐちまこと（H2O Space.） @seltzer
益子貴寛（サイバーガーデン） @takahiromashiko
谷 拓樹 @hiloki
高津戸 壮（ピクセルグリッド） @Takazudo
小山田 晃浩（ピクセルグリッド） @yomotsu
外村 和仁（ピクセルグリッド） @hokaccha
多田吉臣（ヘルツ） @yoshitomi_t
比留間 和也（カヤック） @edo_m18
主催 CSS Nite実行委員会
協賛 デジタルスケープ、KDDIウェブコミュニケーションズ、
Designer's Garage、Web検定、WEBSTAFF、サイボウズ
協力 サイバーガーデンbiz、OpenCU、アドビ システムズ
プレゼント協賛 awesome! クリエイターズショップ、毎日コミュニケーションズ
ウォンツ、ラトルズ
メディア協賛 Web担当者Forum
参加費 9,000円（12月10日まで早割で8,000円）
事前登録 必要
備考 スクール形式（机あり）
懇親会 予定しています（別途、実費）
twitterタグ #cssnitelp13
  • 順不同です（=掲載している順序には、意図はありません）。
  • 会社名のうち、株式会社などは省いています。

セッション概要と出演者のプロフィール

出演者、講演内容は、予告なく変更になる可能性があります。
プロフィールは、本セミナーイベント開催時のものです。

スマートフォン時代のWeb制作

iPhone、Androidケータイといったスマートフォンユーザーは着実に増えています。それらのデバイスおよびユーザーへの対応を考えなければいけなくなりますが、どのように対応していけば良いでしょうか。

デスクトップ向けサイトをただ小さくすればいいわけではありません。デスクトップとスマートフォンの違いを理解しながら、スマートフォン専用サイトをつくるということ、そしてこれからのWeb制作において有益な「Mobile First」のことを考えてみましょう。

写真：谷 拓樹谷 拓樹（たに・ひろき）

Webデザイナー

1982年三重県生まれ。大阪在住。
大学卒業後、デジタルハリウッド、フリーランス（ユニット）活動を経て、株式会社 EC studioに入社。Webサイトの診断士業務を経験し、その後、自社サイト・サービスのデザイン、UI設計、コーディング、ディレクション業務に携わる。2010年10月に退職。現在はフリーランスとして活動中。

『HTML5&CSS3で作る魅せるiPhoneサイト』また関西では Re:Creator's Kansai（リクリ）、.coder（ドットコーダー）などの勉強会コミュニティを運営し、関西のWeb業界を盛り上げる活動もおこなっている。

Web上でのIDは hiloki。（Twitter, Facebook）

2010年11月25日にiPhone関連の著書『HTML5&CSS3で作る魅せるiPhoneサイト』（ラトルズ）を発売。

ライブコーディングで学ぶ、iPhoneサイト制作のキホン

iPhoneは、PCと携帯電話の両方の特徴やクセをあわせ持つ、かなり特殊な環境です。そのため、設計・デザイン及びコーディングの各段階で、デスクトップ向けのサイトと携帯電話向けのサイト制作のノウハウを合わせた知識が必要になってきます。

さらに、作ったサイトの確認にはシミュレータの利用や実機での確認など、手軽とは言えない環境で、表示確認をしていかなければならない点がPC制作と異なります。

本セッションでは、そんなiPhone向けサイトのキホンを、実際にサイトを作る流れをお見せしながら、各段階での注意点などを紹介していきます。

写真：たにぐち まことたにぐち まこと

株式会社エイチツーオー・スペース
代表取締役

東京世田谷区のWeb制作ユニット。 Dreamweaver 4 + UltraDeveloperの頃から PHP開発に Dreamweaverを活用し、 Mac + Dreamweaverで行う、効率よい、デザイナーとの相性もよい開発作業を提唱している。

主な著書に『よくわかるPHPの教科書』、『Dreamweaver PHPスターティングガイド』、『基本からしっかりわかる Adobe Spryプログラミングブック』（毎日コミュニケーションズ）、共著に『Dreamweaverプロフェッショナル・スタイル』（毎日コミュニケーションズ）など

iPhone/iPadサイト制作でHTML5フォーム活用＋α

HTML5ではフォームの要素や属性がたくさん追加されています。
iPhone/iPadはHTML5フォームをかなりサポートしており、複雑な表現や処理も簡単にサイトに実装できます。指によるタッチ操作などデバイスの特性を踏まえた、つかいやすいフォームを目指しましょう。

さらに、Webアプリっぽい機能として、アクセスマップにユーザーの現在地を表示するためのGeolocation APIの実装方法を解説します。

写真：益子 貴寛益子 貴寛（ましこ たかひろ）

株式会社サイバーガーデン 代表取締役
金沢工業大学大学院 工学研究科 客員教授

1975年、栃木県宇都宮市生まれ。早稲田大学大学院商学研究科修了。Webサイトのコンサルティング、プランニング、制作業務、教育、執筆活動に従事。2008年8月より、金沢工業大学大学院工学研究科知的創造システム専攻 客員教授。

現在、スマートフォン向けWebサービスの企画・制作、HTML5、CSS3、各種APIを利用したWebサービスの開発にも積極的に関わる。

主な著書に『Web標準の教科書』『伝わるWeb文章デザイン100の鉄則』（秀和システム）、『現場のプロから学ぶXHTML+CSS』（共著、毎日コミュニケーションズ）など。

iPhone/iPadサイト制作でハマらないために

iPhoneやiPad用サイトを作るとき、HTML、CSS、JavaScriptを使います。革命的で魔法のようなデバイスと思われがちなこれらのデバイスですが、PC向けサイト制作と同じ感覚で作っていると、色 々なところでハマります。HTML5、CSS3等の新しい技術も使えるわけですが、それもすんなり問題なく使わせてくれるわけではありません。

このセッ ションでは、弊社が今までiPhoneやiPad向けに制作してきたサイトを作る上で、陥った問題を中心に共有させていただきます。

高津戸 壮高津戸 壮（たかつど・たけし）

株式会社ピクセルグリッド
フロントエンドエンジニア

大手Web制作会社にてHTML、CSS、JavaScriptエンジニアとして経験を積む。その後フリーランスとしての活動を経て、株式会社ピクセルグリッドに入社。数10カ国語対応サイトや数千ページ規模のWebサイトのCSS、JavaScirpt設計の経験を持つ。

月に1回、フロントエンド周りの話題を持ち寄る勉強会“Sugamo.css”の副主催を務めている。MdN web creatorsにて、CSSやJavaScriptに関する特集の記事を多数、執筆している。

これまでの制作実績から得たiPhone/iPad向け実用Tips集

ピクセルグリッドでは、HTML5、CSS3、JavaScriptを駆使してiPhone/iPadに対応したvalveat81の事例をはじめ、GPUでの描画に切り替えてアニメーションを軽快にする方法、MediaQueriesを利用したページ構築フローなど、さまざまなノウハウを蓄積してきました。

これまでに得たさまざまな成功例、失敗例を時間の許す限りご紹介します。

写真：小山田 晃浩 小山田 晃浩 （おやまだ・あきひろ）

株式会社ピクセルグリッド
フロントエンドエンジニア

1982年生まれ。2006年よりweb制作会社におけるUI実装や運用を経験した後、2010年からフロントエンド・エンジニアとして（株）ピクセルグリッドに参加。コーポレートサイトを中心に、数々のWebサイトにおけるUI実装を手がけている。

Web関連雑誌での執筆活動や技術関連の講演も行うほか、個人のブログ「ヨモツネット」ではHTMLやXML、CSSなどに関する技術の情報を発信している。

Web制作のノウハウでつくるiPhoneアプリ

iPhoneでネイティブのアプリをつくるにはObjective-Cという言語で作る必要があります。しかし、Web制作をおこなっている人には敷居が高く、アプリをつくりたくても一から勉強するのはとてもコストがかかります。

そこでJavaScriptを使ってネイティブなアプリをつくるTitaniumやWebViewを使ってSafariをベースにアプリ化するphoneGapなど、Web制作をおこなっている人でもアプリをつくれる環境が整ってきました。

実際にphoneGapを使ってアプリを作った経験を元に、ネイティブアプリとWebアプリの違いやWeb制作のノウハウを使ったアプリ制作のTipsなどを解説します。

写真：外村 和仁 外村 和仁 （ほかむら・かずひと）

株式会社ピクセルグリッド
フロントエンドエンジニア

HTMLコーダー、JavaScriptプログラマ、PHP、Perlのプログラマといった職務を経験後、2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用、開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はPythonとJavaScript。JavaScriptの勉強会、jstudyを主催している。

WEB+DB PRESS、Software Designなどに寄稿。

地方におけるミニマムなiPad用Webアプリ制作事例

初代iPhoneが登場して早4年。その間、何度かiPhone用アプリ開発の相談があったものの、Objective-Cによるネイティブアプリ開発は、制作会社にとっても、お金を出すクライアントの担当者にとっても、けっして敷居の低いものではありませんでした。

そこで最近、何かと盛り上がりを見せているのがWebアプリ。HTML5にCSS3やJavaScriptなど、比較的とっつきやすい技術を組み合わせて実現する、まさにWebの技術でつくられたアプリです。

このセッションでは、僕が携わった1つの案件についてお話しします。戸建住宅のメーカーが提案する「体感型モデルハウス」の来場者の手にiPad。使っている技術は「jQtouch」に「video・audioタグ」ぐらい。

なかなかビジネスとしての折り合いがつきにくい地方の開発において、僕自身、いくつかのヒントと可能性が見えてきた事例をご紹介します。

写真：多田 吉臣 多田 吉臣（ただ・よしとみ）

Webridge Kagawa
Webクリエイター

1977年香川県生まれ。専門学校卒業後にデジタルハリウッドにて3DCG制作に没頭する日々を過ごすが、とある事情で故郷に帰省。

その後、SPマン・イベントディレクターなどを経験したのちに、やっとCG制作をしている地元のプロダクションに出会う。そこで初めてWebサイトを実務で制作したのがきっかけで、今に至る。

現在はこれまでの経験を活かし、「有限会社ヘルツ」にてWebサイトの立ち上げから運用まで、幅広い業務に従事している。

また、香川県のWeb制作者コミュニティ「Webridge Kagawa（ウェブリッジかがわ）」では、実行委員として「CSS Nite in TAKAMATSU」など各種セミナーイベントやワークショップを開催している。

教科書には出てこない!? iPhone のUIトリック表現

iPhone UIの応用編として、視点を変えたトリッキーなUIを紹介します。

現在、さまざまなサイトがiPhone対応を求められていますが「小さな画面で見る」ことを前提に見やすさ、操作性に注力するあまり、どうしても画一的な表現が多くなってしまいます。

そんな中、あえて複雑なUIを実装したり、はたまたネイティブアプリさながらのインタラクションを持ったサイトも出てきています。そうしたトリッキーなUIを考察しながら、実際に制作した実例を元に、こだわった点や苦労した点、実装するにあたっての注意点など、教科書に掲載されない（!?）UI表現についてお話しします。

写真：比留間 和也 比留間 和也（ひるま・かずや）

面白法人カヤック

面白法人カヤック 意匠部所属。

ワールドカップ前夜、面白法人カヤックのマークアップエンジニアチーム監督として就任。

「私がタイトルタグだ！」
「サー！イエッサー！」
「IE6 こそ我々の生涯の伴侶である！」
「サー！イエッサー！」
「マークアップエンジニアは許可なく死ぬことを許されない！」
「サー！イエッサー！」

次々とファイターズなマークアップエンジニアを輩出する実績からいつしか、ヒルマン監督と社内で慕われるように。
2010年現在、「ねぇねぇ、ヒルマンー」と不特定多数の職種の人間から声がかかる時は「あ、納品前だな」と社内タイマー時計機能と化す。

そんなヒルマン監督からヒトコト。
「面白法人カヤックでは、マークアップエンジニアを絶賛募集中です！」

タイムテーブル

2011年2月23日 時点で最新のものです。変更の可能性があります。

  • タイムテーブルはあくまでも目安であり、当日の流れによって、調整しながら進行します。
開始 セッション 出演者 時間
11:40 開場 　  
12:20 オープニング   (10分)
12:30 スマートフォン時代のWeb制作 谷 拓樹 (30分)
13:05 ライブコーディングで学ぶ、
iPhoneサイト制作のキホン		 たにぐちまこと
（H2O Space.）		 (45分)
13:50 休憩 　  
14:10 iPhone/iPadサイト制作で
HTML5フォーム活用＋α		 益子貴寛
（サイバーガーデン）		 (30分)
14:45 iPhone/iPadサイト制作でハマらないために 高津戸 壮
（ピクセルグリッド）		 (40分)
15:25 休憩 　  
15:45 iPhone/iPadサイト制作での
CSS設計とデザイン最適化事例		 小山田 晃浩
（ピクセルグリッド）		 (40分)
16:30 Web制作のノウハウでつくるiPhoneアプリ 外村 和仁
（ピクセルグリッド）		 (30分)
17:00 休憩 　  
17:25 地方におけるミニマムな
iPad用Webアプリ制作事例		 多田吉臣（ヘルツ） (30分)
18:00 教科書には出てこない!?
iPhone のUIトリック表現		 比留間 和也（カヤック） (40分)
18:40 終了（18:50まで延長の可能性アリ） 　  
19:00 アフターパーティ（事前希望者のみ） 　 　

終了後に、アフターパーティ（別途、実費）を開催します。

最新エントリー

参加費とお申し込み

CSS Nite LP, Disk 13にご参加いただくには、参加登録が必要です。

現在、mixiコミュニティにて参加表明を受付中です。参加表明いただいた方には、お申し込みを早めにお知らせし、早期割引をご用意します。

11月18日に満席になりました。キャンセル待ちも終了しました。

再演版（LP13 reprise）を2月5日に開催します。

参加費

  • 9,000円（事前決済）
  • 8,000円（12月10日17時まで早期割引）
  参加費
12月10日17時まで 8,000円（1,000円OFF）
それ以降 9,000円

決済方法

CSS Nite LP, Disk 13は有料のイベントです。事前決済をお願いします。
決済方法はPayPal（クレジットカード）、および、銀行振込です。

  PayPal 銀行振込
手数料 0円
（CSS Niteが負担します）		 振込手数料は
ご負担ください。

開催の背景

CSS Niteについて

2005年10月、アップルストア銀座にてマンスリーイベントとしてスタート。当初は文字通り「CSS」にフォーカスしていたが、現在は“Web 制作者にとって有益であろうトピック”を広く扱っている。

名古屋、大阪、青森、福岡、沖縄、秋田、札幌、福井、仙台、福島、広島、新潟、京都、石川、高松、山形、富山、静岡、宮崎にて、“地方版”を展開。地方版は現地の有志が運営し、地方のコミュニティ活性化の一助となっている。
北九州、熊本、茨城での開催も構想中。

これまでに195回の関連イベントを通して、のべ28,000名以上が参加している（2010年10月末現在）。

CSS Nite LP

CSS Nite LPは、回ごとにテーマを設け、土日などに開催するCSS Niteの有料版。今回のCSS Nite LP, Disk 13はその第13弾。「lp13」はそこから来ています。

『Dreamweaverプロフェッショナル・スタイル』（Dreamweaver CC連動）、『Movable Typeプロフェッショナル・スタイル』（MT4LP5の連動）など、連動書籍をリリースする試みも行っています（今回、書籍企画はありません）。

アップルストア銀座でのCSS Niteをシングル盤に見立てると、LP盤だよね、ということでVolではなく、Diskでカウントしています。

過去の開催

FAQ’s

都内以外での開催はありますか？
今のところ、予定していません。
複数名で申し込む予定ですが、まとめて振り込んでもOKですか？
はい。その場合、お振り込み後に「振込名義」と、どなたの分かをご連絡ください。
諸事情により参加できなくなりました。
キャンセルフォームからご連絡ください。決済後のキャンセルについては下記のポリシーにて行わせていただきます。手数料を頂戴しますので、あらかじめご了承ください。キャンセルの返金は、イベント開催後、その月末に行わせていただきます。
期間 返金額
開催1ヶ月前 全額返金
10日前まで 半額
前日、当日 1/4
連絡なし 0円
なお、ご連絡なしのキャンセルや、（基本的にはありえませんが）受付を通過せずにご入場されている場合には、フォローアップはお送りいたしません。
請求書は発行いただけますか？
はい、ご希望される場合には発行いたします。その場合、決済方法は銀行振込のみ、かつ、定価に消費税をオンしてのご請求とさせていただきます。
なるべく「請求書なし」にご協力いただければ助かります。
領収書はいただけますか？
はい。開催当日にお渡しします。コンビニ決済の方はレシート、または、入金確認メールのプリントアウトなどをご持参ください。
法人名などの宛名が必要な場合には、休憩時間に受付にてお申し出ください（事前のご連絡は不要です）。
当日は何を持参すればよいですか？
開催の1週間くらい前に受講票をメールにて発送します。そちらをプリントアウトしてご持参してください。プリントアウトが困難な方は、携帯電話の画面でのご提示でも結構です。
当日の配布資料はありますか？
ほかのCSS Niteと同様、基本的にありません。スライドなどは、開催終了後にダウンロードいただけるようにご案内します。セミナー中に撮影いただいたり、録音いただき、個人として利用されることはOKです。ただし、撮影時に音が出る機器（携帯電話など）はご遠慮ください。
セッション登録はどのように行えばよいですか？
今回のCSS Nite LPは1トラックで開催します。つまり、同時進行で複数のセッションは進行しませんので、セッション登録などは不要です。すべてのセッションをお楽しみいただけます。
諸事情で、遅刻（途中退席）しなければなりません。
問題ありません。ただし、部分的な返金等はご容赦ください。
視力が弱いのですが、大丈夫でしょうか？
スクリーンは250インチ（幅5m）と、かなり大きめですので、後方の席でも十分に見やすいと思われます。ご心配な方は、お早めにご来場いただき、見やすい席を確保していただければ確実です（自由席です）。
なお、途中でもお困りの際には移動いただいて結構ですし、お申し出くだされば、（席替えなど）対応いたします。
急遽参加できなくなりました。代わりの人間が参加してもよいですか？
はい、どうぞ。その際には、cssnite@gmail.comまでご一報ください。
パソコンを持参した方がいいですか？
いいえ、必要ありません。パソコンを持ち込んでいただくのは結構ですが、電源は十分にありません。まわりの方と分け合ってご利用ください。
無線LANなどの環境はありますか？
若干のご準備はいたしますが、基本的にはご自身でご用意ください。
twitterで実況中継（TSUDAっても）いいですか？
はい、どうぞ。ハッシュタグは「#cssnitelp13」です。なお、場合によっては、守秘義務に関する内容があります。講演者から指示があった場合、そちらは避けていただけますようお願いいたします。
USTREAMで中継してもいいですか？
こちらはご容赦ください（=NGです）。
Androidは扱わないのですか？
今回は、iPhone/iPadにフォーカスします。なお、 Android対応は、2011年5月にスマートフォン特集（2）として扱う予定です。

関連情報

バナー

ブログやサイトにバナーを掲載いただければ幸いです。ソースコードのままご利用ください。

CSS Nite LP, Disk 13（幅160ピクセル×高さ160ピクセル）

twitter

発言の最後に半角スペース＋「 #cssnitelp13」を入れてつぶやいていただくと「#cssnitelp13」に自動的にリンクが張られて、CSS Nite LP, Disk 13関連の発言を参照することができます。ぜひ中継や覚え書きなどにご利用ください。

お問い合わせ

ご不明点やお気づきの点がありましたらこちらのフォームからお知らせください。

お問い合わせ前に、FAQをご一読ください。