2014 年 8 月 2 日 (土) 13:30 – 18:00 に、[丸亀町レッツホール](http://www.kame3.jp/service/) で行われた [Webridge Meeting SP17「いま知っておきたい Web 制作のトピックス」](http://webridge-kagawa.com/meeting/sp/140802/) に参加してきました~。
セッション1「Web Starter Kit でマルチデバイス向け Web 制作」
———————————————————————-
▲ 前川 昌幸さま(イー・ネットワークス)によるセッション
### Web Starter Kit
Google がリリースした [Web Starter Kit](https://developers.google.com/web/starter-kit/) の紹介。
[ Web Starter Kit ] は、レスポンシブ Web デザインの CSS ボイラープレートで、[Gulp](http://gulpjs.com/) の次のような機能を含んだセットになっている。
– 複数デバイスのスクロール・クリックを同期。
– ファイル更新時にブラウザをリロード。
– HTML / CSS / JaveScript / 画像を最適化。
Gulp は、面倒な作業をまとめて実行してくれるタスクランナー。
### Web Fundamentals
[Web Fundamentals](https://developers.google.com/web/fundamentals/) は、レイアウトパターンなどを集めた Web 制作のチュートリアルサイト。
セッション2「HTML5 で人気の API を使って未来価値を創造しよう」
———————————————————————-
▲ 阿部 正幸さま(KDDIウェブコミュニケーションズ)によるセッション
Geolocation API (ジオロケーション)
: 位置情報を取得できる API
Web Speech API
: 音声認識してテキストに変換出来る。
: 阿部さんは議事録サービスを作りたいんだそうな?
フォーム入力をサポートする
: 確認ボアンを押した後にエラーがでると面倒くさい。
: 送信する時にエラーを表示する。
: [AngularJS](https://angularjs.org/) を使うとリアルタイムでバリデートできる。
Ambient Light Events
: 環境光を取得できる。
: 今の所、Firefox しか対応していない。
WebRTC
: サーバーを介さずにブラウザ同士が通信できる。
: ライブラリを使うと簡単に実装できる。
まとめ
: 開発の敷居が低いので、カンタンに開発できる。
: アイデアがあれば、だれでも参入可能!
セッション3「日本語 Web フォントの基本講座と事例にみる導入効果」
———————————————————————-
▲ 関口 浩之さま(ソフトバンク・テクノロジー)によるセッション
– 日本語は文字数が多いのでフォントファイルのデータ量が大きい。
– 英語は文字数が少ないので、フォントデータ全体をダウンロードさせることができる。
– フォントのレンダリングは OS に依存する部分が大きい。
– 見出しを画像化しなければ、Google 翻訳 API で全体を機械的に翻訳できる。
– ウェブフォントの実装は、JS を読み込み、CSS でフォントファミリーを指定するだけ。
– 使っている文字の重複が多いほど、配信する文字種が少なくなりデータが小さくなる。
– 明朝体の方がデータが重い。ゴシックは軽い。
– ひとつの契約でドメインの制限がないプランがある。
– 制作会社が契約して、クライアントワークで使ってもいい。
セッション4「a-blog cms を活用した新しい Web 制作のワークフロー」
———————————————————————-
▲ 山本 一道さま(アップルップル)によるセッション
### 今の Web 制作のワークフロー
1. 設計
2. デザイン
3. マークアップ
4. CMS 実装
5. データ登録
#### 問題点
– 順番に開発するので時間がかかる。
– 管理画面でデータを登録するのは最終工程。
### アップルップルのワークフロー
1. 設計
2. CMS 実装・デザイン
3. データ登録・マークアップ
#### 利点
– 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 など、幅広い分野で勉強になりました。
ありがとうございます!