分10月23日,第32回目の「HTML5とか勉強会」はGREEさんのオフィスをお借りして開催しました。会場確保にご協力いただいたGREEの佐島さん,ありがとうございました。2012」で好評をいただいた中からWeb制作者向けのセッションをピックアップして行われました。本稿では,今回のイベントについてレポートします。進化するCSSの表現力と新しいWebツールはじめに,アドビシステムズの轟啓介さんより,CSS3の最新仕様やアドビのオープンソースプロジェクトへの取り組みについて紹介いただきました。Filtersの紹介がありました。Regionsはレイアウトとコンテンツを切り離してDTPのような表現をCSSで実現するためのものです。divなどで作られた複数のRegion(領域)にコンテンツとしての文字列を流しこむとレイアウトに応じて文字がフローします。これによって今まででは難しかった段組みのようなことが実現できるようになるとのことです。Exclusionsはコンテンツの文字をフローさせるレイアウト(形)を自由に設定できるようにするためのものです。これにより,雑誌のような見た目のページが作成できます。複雑な形状もSVGによって定義できるとのことです。Filtersはシネマティックな視覚効果をCSSによって手軽に実現できるようにするためのものです。ページのトーンを変化させたり,3D的に変形させたりと色々な効果がCSSだけで実現できるとのことです。これらの仕様や動作はアドビの「Web標準の推進」のページにて簡単に確認することができます。講演では,アドビが取り組んでいる4つのオープンソースプロジェクトについて紹介しました。Cordova(≒PhoneGap)他にもWebPlatform.orgやWebkitといったプロジェクトにも積極的にコミットしているとのことです。Toolsについての紹介もありました。Inspect」などなど,Web制作をもっと便利にしてくれそうです。詳しくは後日公開予定の講演動画をご覧ください。講演で使われた資料はこちらになります。Mobileなサイトのつくりかたつぎに,CAモバイルの白石俊平さんにパララックスかつレスポンシブなサイトを作成した際の事例を紹介いただきました。作成にあたって,次の課題をクリアしていったとのことです。Mobileを使うべきかどうか定型タスクの自動化パララックススクロールをモバイルで実現するにあたって,色々なライブラリを試したそうです。iOSのSafariではonScrollイベントがうまく動作しないせいもあって既存のライブラリでは実現が難しかったと言います。最終的にはあるサイトで使われていた動きを参考にして,モバイルで動作するパララックススクロールのライブラリを作成したと説明しました。作成したScrollTween.jsはgithubで公開しているので是非使ってみてほしいとのことです。Mobileをどう使ったか,定型タスクを自動化するためのツールの紹介などがありました。詳しくは後日公開予定の講演動画や資料をご覧ください。Mobileのカスタマイズテクニックについて紹介いただきました。Mobileっぽさが全面に出てしまい,サイト全体の印象がサイトのコンセプトに合わないものになりがちだと言います。カスタマイズの方法として,まずThemeRollerで大まかなデザインを決定したあとに個別のスタイルを変更していく方法があるとのことです。カスタマイズのためには,次のことを意識して行うと良いと紹介されました。Mobileのスタイル構造を把握するテーマによるスタイルの変化や,状態や機能によって変化するスタイルを把握するデザインの主要な部分を占める「ページ」「⁠ボタン」「⁠リスト」に注目するさらに高度なカスタマイズとして,オリジナルのUIを作成したりライブラリやツールを利用したりする方法もあるとのことです。Mobileの装飾や動作から除外する領域を作成して,その領域の中で動作させると述べていました。Mobileの詳細なカスタマイズ方法や,ライブラリを使う際の例と注意点が紹介されていますので是非後日公開予定の講演動画をご覧ください。講演で使われた資料も合わせてご覧ください。最後にレポートに対する感想や,勉強会に対する希望・意見・取り上げて欲しいテーマなどがありましたら,twitter(@nakajmg)まで気軽につぶやいていただければと思います。本勉強会は,毎月第3水曜日,または第3木曜日に開催していますので,興味を持たれた方はぜひ参加ください。会場や講演者スケジュールの都合などにより,開催日程が前後することがあります。開催のアナウンスはhtml5j.orgのMLで行われますので,こちらをご確認ください。コミュニティサイトhtml5j.orgも公開していますので,ぜひこちらもご覧ください。html5j/HTML5とか勉強会スタッフ。フロントエンドエンジニアとして主にスマートフォン向けサービスの開発に従事。ツチノコの巣に迷い込んだひよっこ。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。