2014 年 8 月 2 日 (土) 13:30 – 18:00 に、丸亀町レッツホール で行われた Webridge Meeting SP17「いま知っておきたい Web 制作のトピックス」 に参加してきました~。
セッション1「Web Starter Kit でマルチデバイス向け Web 制作」 ———————————————————————-
▲ 前川 昌幸さま(イー・ネットワークス)によるセッション
Web Starter Kit
Google がリリースした Web Starter Kit の紹介。
[ Web Starter Kit ] は、レスポンシブ Web デザインの CSS ボイラープレートで、Gulp の次のような機能を含んだセットになっている。– 複数デバイスのスクロール・クリックを同期。 – ファイル更新時にブラウザをリロード。 – HTML / CSS / JaveScript / 画像を最適化。
Gulp は、面倒な作業をまとめて実行してくれるタスクランナー。
Web Fundamentals
Web Fundamentals は、レイアウトパターンなどを集めた Web 制作のチュートリアルサイト。
セッション2「HTML5 で人気の API を使って未来価値を創造しよう」 ———————————————————————-
▲ 阿部 正幸さま(KDDIウェブコミュニケーションズ)によるセッション
- Geolocation API (ジオロケーション)
- 位置情報を取得できる API
- Web Speech API
- 音声認識してテキストに変換出来る。
- 阿部さんは議事録サービスを作りたいんだそうな?
- フォーム入力をサポートする
- 確認ボアンを押した後にエラーがでると面倒くさい。
- 送信する時にエラーを表示する。
- AngularJS を使うとリアルタイムでバリデートできる。
- Ambient Light Events
- 環境光を取得できる。
- 今の所、Firefox しか対応していない。
- WebRTC
- サーバーを介さずにブラウザ同士が通信できる。
- ライブラリを使うと簡単に実装できる。
- まとめ
- 開発の敷居が低いので、カンタンに開発できる。
- アイデアがあれば、だれでも参入可能!
セッション3「日本語 Web フォントの基本講座と事例にみる導入効果」 ———————————————————————-
▲ 関口 浩之さま(ソフトバンク・テクノロジー)によるセッション
– 日本語は文字数が多いのでフォントファイルのデータ量が大きい。 – 英語は文字数が少ないので、フォントデータ全体をダウンロードさせることができる。 – フォントのレンダリングは OS に依存する部分が大きい。 – 見出しを画像化しなければ、Google 翻訳 API で全体を機械的に翻訳できる。 – ウェブフォントの実装は、JS を読み込み、CSS でフォントファミリーを指定するだけ。 – 使っている文字の重複が多いほど、配信する文字種が少なくなりデータが小さくなる。 – 明朝体の方がデータが重い。ゴシックは軽い。 – ひとつの契約でドメインの制限がないプランがある。 – 制作会社が契約して、クライアントワークで使ってもいい。
セッション4「a-blog cms を活用した新しい Web 制作のワークフロー」 ———————————————————————-
▲ 山本 一道さま(アップルップル)によるセッション
今の Web 制作のワークフロー
- 設計
- デザイン
- マークアップ
- CMS 実装
- データ登録
問題点
– 順番に開発するので時間がかかる。 – 管理画面でデータを登録するのは最終工程。
アップルップルのワークフロー
- 設計
- CMS 実装・デザイン
- データ登録・マークアップ
利点
– CMS 実装を先行し、クライアントにデータを入力してもらう事で問題を早期に発見できる。 – 製作時間を短縮できる。 – 実際のデータを見ながらデザインするので漏れがない。 – データの入力を早くから行える。
a-blog cms 2.1 の新機能
色々あるけど、カスタムフィールドをユニット化できる「カスタムユニット」が便利そう。
セッション5「a-blog cms でできる、マルチデバイス対応」 ———————————————————————-
▲ 山田 恵理子さま(ゴーフィールド)によるセッション
a-blog cms でマルチデバイスに対応するには、次の3つの方法がある。
– レスポンシブサイト – スマーフォン最適化サイト – ハイブリッド型サイト
レスポンシブサイト
普通に作れば良いのだが、a-blog cms の独自機能があるので利用する。
– レスポンシブ用グリッドシステムが用意されている。 – 投稿できる画像サイズのパーセント指定ができる。 – PC 用の画像はおもすぎるので、スマホ用の画像に置き換える事が出来る。
スマーフォン最適化サイト
– PC 版・スマホ版のそれぞれのテーマを準備し、ルールを設定して切り替える。 – スマホから PC への切り替えボタンも設置できる。
ハイブリッド型サイト
ペースは PC のテンプレートだが、テーマ継承機能を使い、スマホで必要な部分だけを上書きする。 規定の書式でテーマフォルダ名を設定、ルールを設定して切り替える。
– ヘッダー・フッターのインクルードファイルを上書きする。 – テーブルの行と列を切り替えに利用できる。 – フル CMS でないサイトでも応用できる。
感想 ———————————————————————-
▲ 登壇者さま集合!
Web Starter Kit、HTML5 API、Web フォント、a-blog cms など、幅広い分野で勉強になりました。 ありがとうございます!