14 years 7ヶ月 ago
2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、小山田 晃浩さん（ピクセルグリッド）の『iPhone/iPadサイト制作でのCSS設計とデザイン最適化事例』のスライドと音声をシェアします。
CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。
続編のLP16：Android編を6月18日に開催します。
メッセージ
ご参加頂いた皆様、長時間のセッションお疲れさまでした。
私のセッションでは、これからモバイル端末への対応を行おうと考えている方に向けてメディアクエリーについてをお伝えいたしました。
メディアクエリーは多くの人にとって馴染みがあるCSSの記法でそのまま利用することができます。また、特別な開発環境が必要というわけでもありません。
特に、スライド31ページ目以降でご紹介した3つの@media規則の使い方を復習し、ぜひ実験や利用をしてみてください！
なお、Media Queriesは数あるCSS3の機能の中でもかなり安定状態にある草案で、近いうちに行われるであろうCSS2.1勧告の後、CSS3 Media Queriesについても正式に勧告になると予測されます。
また、メディアクエリーについてセッション内では、特にiPhoneやiPadなどの小さい画面への応用を紹介いたしましたが、今後登場するであろう、テレビ画面やその他のデバイスへの応用へも期待できます。特に今すぐ使うという予定はなくても、知識として実際に試しておくといいでしょう。
■transform:scale()ではなく、zoomを利用する理由
セッション中にタイムラインで「なぜtransform:scale()ではなく、zoomを使うのか」といったような内容が流れていました。transformはzoomと同じく拡大縮小表示は可能なのですが、transformを利用したとしても、変形前の領域は維持され、隙間があいてしまったり、重なってしまったりしまったりしてしまいます。
簡単なdemoを用意してみましたのでその違いをお試しください（※Google Chrome、Safariでのみ動作します）。
14 years 7ヶ月 ago
2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、たにぐちまことさん（H2O Space.）の『ライブコーディングで学ぶ、iPhoneサイト制作のキホン』のスライドと音声をシェアします。
CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。
続編のLP16：Android編を6月18日に開催します。
メッセージ
みなさん、長丁場お疲れさまでした！非常に濃い6時間を過ごすことができましたね。
さて、私のセッションでは「Windowsの場合はどうしたらよいのだろう？」というご質問をいただいておりましたので、ご回答差し上げます。
Windowsでは、セッション中で紹介した「iOSシミュレータ」および「Pastebot」を利用することができません。そのため、若干作業はやりにくくなってしまいます。
●Safariを利用する
Windows版Safariは、Mobile Safariとほぼ同じレンダリング能力を持っていますので、これで表示確認をします。ただし、一部 CSS3のサポート状況などが異なっているため、実機での確認は必須です。http://www.apple.com/jp/safari/download/
●Adobe Dreamweaver CS5 のマルチスクリーンプレビュー
Dreamweaver CS5には、「マルチスクリーンプレビュー」という複数デバイス向けの表示を確認する機能があります。これを利用すれば、横320pxや 480pxといった幅での表示を簡単に確認することができます。
●実機での確認には、Gmailの下書きなどを使う
実機で確認する際、URLを打ち込むのが面倒なとき、Gmailのユーザーでしたら「下書き」を利用することができます。
Gmailで新しいメールを作成して、下書きとして保存します。これを、iPhone側のメールソフトで Gmailアカウントを同期し、「Drafts」フォルダを見るとメールが同期されるので、そのURLをクリックするという方法です。（この時、Gmailにアクセスして下書きを見てしまうと編集モードになってしまうので、iPhone付属のメールソフトで閲覧する必要があります）
その他、DropboxやEvernoteなどインターネット経由で情報が共有できるソフトであれば、同じようなことができるでしょう。
14 years 7ヶ月 ago
2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、益子貴寛さん（サイバーガーデン）の『iPhone/iPadサイト制作でHTML5活用』のスライドと音声をシェアします。
CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。
続編のLP16：Android編を6月18日に開催します。
メッセージ
アンケートで、セッション間の「つながり感」や「一体感」がよかった、という声をたくさんいただけて、とてもうれしかったです！
デバイス（ユーザーエージェント）振り分けについてフォローします。
JavaScript、PHP、.htaccessのうち、ふつうは.htaccessをつかう、と覚えておいてください。（編集権限があれば「httpd.conf」でも可）
ただし、
- サーバ管理上、.htaccessの編集権限が与えられていない・開発段階で、ローカル環境をサーバ化していない（XAMMP、MAMPなどで）
といった場合には、Javascriptをつかうとよいでしょう。PHPをつかっているのであれば、もちろんPHPでもよいです。
ほか、自動的に振り分けずに、iPhoneからのアクセスに対しては、「iPhone用サイトが利用できますが、移動しますか？」などのメッセージをポップアップで表示したり、ページのなかに目立つように書いておく方法もあります。
サイトのつくりやユーザーニーズによっては、自動的に振り分けないほうがよい場合もありますので、ユーザー目線で適切な方法を選んでいただけたらと思います。
では、「鉄は熱いうちに打て」で、心がホットなうちにiPhone/iPad用サイト制作をはじめてみましょう！
14 years 7ヶ月 ago
2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、谷 拓樹さんの『スマートフォン時代のWeb制作』のスライドと音声をシェアします。
CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。
続編のLP16：Android編を6月18日に開催します。
メッセージ
みなさま長い時間おつかれさまでした。最初のセッションということで導入となるお話をさせていただきましたが好評もいただき、みなさまにお伝えできたようで良かったです。
アンケートやTwitterにて「Androidだとどうなるの？」という話もよく見かけましたが今回の特集であるiPhone/iPadとは確かに違う部分があります。各機種搭載しているAndroid OSのバージョンにバラつきがあったり、デバイスによって違うということもあります。
Android対応については５月のLP15で、ということになりますがやはりそれ以前に重要なところが、Mobile First、モバイルデザインということになります。カバーしたい範囲が大きいほど、なかなか容易ではないと思われるかもしれませんがサイト設計をするときに、頭の中に少しモバイルを置いておくだけでもアウトプットする内容の質が変わります。
私自身もまだまだ勉強しないことが多いですがただただ苦しい課題と捉えず、面白みを感じて進んでいきましょう。
14 years 7ヶ月 ago
2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、たにぐち まことさん（H2O Space.）の『ライブコーディングで学ぶ、iPhoneサイト制作のキホン』のスライドと音声をシェアします。
たにぐちさんは著書『iPhone+Android スマートフォンサイト制作入門』が好評です。LP13とは分野違いですが、『よくわかるPHPの教科書』も売れているようです。
メッセージ
皆さん、長丁場のセミナーお疲れさまでした。
私自身、スマートフォントはなんぞやから、アプリの話まで、幅広い知識を一日で濃密に吸収できた一日になりました。iPhone/iPadは未来を感じる面白いデバイスなので、Androidと合わせて成長を見守りながら、楽しんでいけたらと思います。
さて、私のセッションの最後で紹介した「おみやげ」を改めてご紹介します。以下のサイトにアクセスしていただくと、コード集やリンク集を見ることができます。今後も、気がついたものからアップしていきますので、RSSでチェックしていただいたり、Evernoteユーザーの方は取り込んでご利用ください。
14 years 7ヶ月 ago
2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、谷 拓樹さんの『スマートフォン時代のWeb制作』のスライドと音声をシェアします。
谷さんは著書『HTML5＋CSS3で作る 魅せるiPhoneサイト』が非常に好評です。
メッセージ
Twitterにて「スマートフォンで、どのくらいウェブブラウズに使っているのか」というつぶやきがありましたので参考になりそうな関連資料となるページを紹介しておきます。
記事中段：スマートフォンの使い方（日経BPコンサルティング）
こちらで参照できるものは1年前の調査のものになりますがその前後の類似調査をみても、概ねウェブブラウジングをメインに使っている方が3分の2近くのようです。
もちろん細かい属性でわけると誤差はあるかとおもいますがウェブブラウズするという前提で、ユーザーが増えていると考えて良さそうです。
14 years 7ヶ月 ago
2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『iPhone/iPadサイト制作でハマらないために』のスライドと音声をシェアします。
メッセージ
私のセッション、「iPhone/iPadサイト制作でハマらないために」内で、講演内容について何点か補足します。
- -webkit-transform:translate3d(0,0,0)を付ければいいのか、付けない方がいいのか
- 使った分だけメモリを食うようなので、アニメーションを使った時、チラつく問題が発生した場合に、アニメーションをさせる要素以下の要素全てにかけると良いかと思います。
- -webkit-transformはどのくらいまで許容されるのか
- 以下のページで検証結果が公開されています（英語）http://cubiq.org/testing-memory-usage-on-mobile-safari
14 years 7ヶ月 ago
2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、益子 貴寛さん（サイバーガーデン）の『iPhone/iPadサイト制作でHTML5フォーム活用＋α』のスライドと音声をシェアします。
メッセージ
6時間超のセミナーにも関わらず、最初から最後まで、みなさんの熱意がひしひしと伝わってきて、とてもうれしかったです。
一点、終了後の質問に回答します。
iPhone/iPadは、インラインフレームのスクロール表現に対応していないのに、Googleマップをインラインフレームで読み込む意味、についてです。
これは、あくまでスクロールを前提にせず、つまり、画像を埋め込むように、ということになります。（元のマップとインラインフレームのサイズをまったく同じにする）
スライドにも、このような説明を少し追加しました。
HTML5フォームのテストページとアクセスマップのファイルを、スライドと一緒に差し上げますので、ぜひいろいろと試してみてください。
14 years 7ヶ月 ago
2011年8月6日、静岡県コンベンションアーツセンター「グランシップ」にて、CSS Nite in SHIZUOKA, Vol.2が開催されます。当初、3月に予定していましたが、震災の影響により延期となったものです。
次の3セッションで構成されます。
- Facebook 活用最前線／岡村 直人（ループス・コミュニケーションズ）
- Webサービス立ち上げの経緯と考えるべきこと／白形知津江（メールdeギフト）
- 制作ワークフローの棚卸し～Dreamweaverのワークフローを見直してみる～／神森 勉（KDDI ウェブコミュニケーションズ）
なお、お申し込みは6月中旬にスタート予定です。
14 years 7ヶ月 ago
14 years 7ヶ月 ago
2011年5月14日、ベルサール九段でCSS Nite LP, Disk 15「ソーシャルメディア特集」を開催し、240名ほどの方にご参加いただきました。
ツイートは下記にまとめました。
次のブログで取り上げていただきました。ありがとうございます。
こちらは出演者のブログ。
岩上安身さん、川井 拓也（ヒマナイヌ）さんのセッションの一部のUSTREAMの録画を公開しています。
撮影：飯田昌之
14 years 7ヶ月 ago
2011年6月18日、ベルサール神田にてCSS Nite LP, Disk 16を開催します。今回は「スマートフォン特集（2）」としてAndroidにフォーカスします。
今回はAndroid向けのサイト制作だけでなく、AndroidアプリやAIR for Androidを含めたUI設計、また、どれを選択すべきか、というところを視野に入れて構成しています。ただし、Androidアプリ開発については触れません。
プラットフォームとしてのAndroid（アプリ、AIR、UI）
まずは、Android OSと現状のデバイスをまとめ、主要なAndroidアプリやその動向をおさえます。さらに、iPhone/iPadにはないアプローチとして、Flash/AIRで何ができるのか、どこで切り分けるのか。
- 基調講演／Android OSと現状のデバイス総まとめ／あんざい ゆき
- Androidアプリの今／華井 雅俊（日本Androidの会）
- AIR for Android／岡田 昇三（ハイポジ）
- 開発者とデザイナーの接点（仮）／杉本 札彦（ブリリアントサービス）
Android向けサイト制作（HTML5/CSS3/jQuery）
ホームボタン1つだけのiPhone/iPadの一方、物理的に複数のボタンがあるAndroid端末でのUI設計からスタートし、Android向けサイト制作の環境作り、HTML+CSSのはまりポイントviewportやメディアクエリーを利用する際の注意点まで。さらに、JavaScriptライブラリの中でjQuery Mobileを選ぶメリット、Dreamweaver CS5.5を使ってのサイト制作という流れです。
- iPhone・AndroidアプリのUI・挙動はどこが違う／石野和明（ライブドア）
- Android向けサイト制作のあれこれ／執行 大介（BBMedia）
- Android向けサイト制作におけるviewportについて／髙津戸 壮（ピクセルグリッド）
- Androidサイト制作におけるjQuery Mobileの活用／たにぐちまこと（H2O Space.）
現在、300名を超えるお申し込みをいただいており、残席20を切りました。再演は行いませんので、ぜひこの機会をご利用ください。
14 years 7ヶ月 ago
2011年6月18日、ベルサール神田にてCSS Nite LP, Disk 16を開催します。今回は「スマートフォン特集（2）」としてAndroidにフォーカスします。
出演者が増え、次の内容で調整中です。なお、今回はAndroid向けのサイト制作だけでなく、AndroidアプリやAIR for Androidを含めたUI設計、また、どれを選択すべきか、というところを視野に入れて構成しています。ただし、Androidアプリ開発については触れません。
プラットフォームとしてのAndroid（アプリ、AIR、UI）
まずは、Android OSと現状のデバイスをまとめ、主要なAndroidアプリやその動向をおさえます。さらに、iPhone/iPadにはないアプローチとして、Flash/AIRで何ができるのか、どこで切り分けるのか。
- 基調講演／Android OSと現状のデバイス総まとめ／あんざい ゆき
- Androidアプリの今／華井 雅俊（日本Androidの会）
- AIR for Android／岡田 昇三（ハイポジ）
- 開発者とデザイナーの接点（仮）／杉本 札彦（ブリリアントサービス）
Android向けサイト制作（HTML5/CSS3/jQuery）
ホームボタン1つだけのiPhone/iPadの一方、物理的に複数のボタンがあるAndroid端末でのUI設計からスタートし、Android向けサイト制作の環境作り、HTML+CSSのはまりポイントviewportやメディアクエリーを利用する際の注意点まで。さらに、JavaScriptライブラリの中でjQuery Mobileを選ぶメリット、Dreamweaver CS5.5を使ってのサイト制作という流れです。
- iPhone・AndroidアプリのUI・挙動はどこが違う／石野和明（ライブドア）
- Android向けサイト制作のあれこれ／執行 大介（BBMedia）
- Android向けサイト制作におけるviewportについて／髙津戸 壮（ピクセルグリッド）
- Androidサイト制作におけるjQuery Mobileの活用／たにぐちまこと（H2O Space.）
現在、250名を超えるお申し込みをいただいており、残席60ほどです。また、早期割引として、本日17時までは1000円オフになっていますので、ぜひご利用ください。
14 years 7ヶ月 ago
2011年7月2日、岡山国際交流センター 2F 国際会議場にてCSS Nite in OKAYAMA, Vol.1を開催します。
岡山版としては初開催。「Webディレクション」をテーマに、中川 直樹さん（アンティー・ファクトリー ）、神森 勉さん（KDDI ウェブコミュニケーションズ ）らがゲストです。
14 years 7ヶ月 ago
意外といえば意外なのですが、CMSとか触ったことないという方がいらっしゃったり、、ほかのCMSの導入セミナーを開催して、という声をいただき、秋口に「CSS Niteビギナーズ：CMS編」を企画しています。
Facebookにてアンケートを設置しました。希望されるものがあれば、投票してください。 選択肢を追加いただいてもOKです。
ついでに「いいね！」していただければ幸いです。
14 years 7ヶ月 ago
これまでも「なるべく請求書なしにご協力ください」とお願いしてきましたが、現在進行中のLP16を含め、CSS Niteの有料イベントにおいて、今後、請求書発行を行わないことになりました。
当然ながら領収書は発行しますので、経費にてご参加される方は仮払い処理などでご対応いただければ幸いです。
CSS Niteは「自分たちに必要なセミナーを自分たちで企画する」というコンセプトで開催してきており、「リーズナブルな金額での開催」にこだわり、イベント制作会社などを使わず、業務の空き時間にイベントにかかる作業を行っています。
個人として出せる金額内という値付け設定を行っており、現在の値付けは、請求書を発行するまでの金額でないと考えています。
14 years 8ヶ月 ago
14 years 8ヶ月 ago
2011年6月4日（土）、福井県産業情報センターで「UPGRADE JAPAN!!」（アップグレードジャパン）が開催されます。
CSS Nite in FUKUIを主催しているふくい産業支援センターが主体となり、WCAF、FITEA、kanazawa.js、WDF、北陸エンジニアグループなど、福井/石川のコミュニティの賛同のもとに企画されたものです。
日本が「東日本大震災」という未曽有の災害に見舞われる中、おなじ日本に住む私たちにできることをやろうという趣旨のもと、（公財）ふくい産業支援センターおよび、北陸で活動するWeb・IT制作者コミュニティが中心となり、集まった義援金を全額被災地へ寄付するチャリティイベント「UPGRADE JAPAN!!!!」を、6月4日（土）に福井県産業情報センター（福井県坂井市）にて開催します。
北陸から元気を発信するべく、地元を中心に活動するクリエイターが集結。被災された地域の皆様に対し、少しでも力になれるよう各種団体・会社・個人それぞれが力を合わせイベントを行います。
（会場には、「東日本大震災」被災地域支援のための募金箱を設置。集まった義援金は全額寄付します。ご協力よろしくお願いします。）
14 years 8ヶ月 ago
2011年5月14日（土）、ベルサール九段にて開催するCSS Nite LP, Disk 15のテーマはソーシャルメディアです。
「BEFORE 3.11/AFTER 3.11 Web制作者がおさえておくべきソーシャルメディアの現状」をテーマに次のような内容で構成します。
- 概論（Facebookの現状と位置づけ）
- Facebookのマーケティング活用（事例を交えつつ）
- Facebookページのカスタマイズと活性化
- ソーシャルメディア実装と既存サイトとの連携
- Twitter運用における課題とその解決方法
- 3.11におけるソーシャルメディア
- 報道Ustの可能性と今後の課題
ギュっと絞った9セッションでお送りします。残席わずかとなりましたので、ぜひご検討ください。
14 years 8ヶ月 ago
a-blog cmsが5月から7月にかけて、紹介セミナーとハンズオンセミナーを全国8カ所で展開するそうです。
CSS Niteでは、これまでにMT4LP5（Movable Type特集）、LP6などでCMSを扱ってきましたが、その中で注目度が高いCMSのひとつです。
「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント。都内のほか、大阪、名古屋、青森、福岡、沖縄、秋田、札幌、福井、仙台、福島、広島、新潟、京都でも開催。 Movable Type Pro 4.23-ja
CSS Nite公式サイト フィード を購読 
