Webridge Meeting SP17「いま知っておきたい Web 制作のトピックス」に参加しました〜。

2014 年 8 月 2 日 (土) 13:30 – 18:00 に、丸亀町レッツホール で行われた Webridge Meeting SP17「いま知っておきたい Web 制作のトピックス」 に参加してきました~。

wmsp17-00

セッション1「Web Starter Kit でマルチデバイス向け Web 制作」 ———————————————————————-

wmsp17-01

▲ 前川 昌幸さま(イー・ネットワークス)によるセッション

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 を使って未来価値を創造しよう」 ———————————————————————-

wmsp17-02

▲ 阿部 正幸さま(KDDIウェブコミュニケーションズ)によるセッション

Geolocation API (ジオロケーション)
位置情報を取得できる API
Web Speech API
音声認識してテキストに変換出来る。
阿部さんは議事録サービスを作りたいんだそうな?
フォーム入力をサポートする
確認ボアンを押した後にエラーがでると面倒くさい。
送信する時にエラーを表示する。
AngularJS を使うとリアルタイムでバリデートできる。
Ambient Light Events
環境光を取得できる。
今の所、Firefox しか対応していない。
WebRTC
サーバーを介さずにブラウザ同士が通信できる。
ライブラリを使うと簡単に実装できる。
まとめ
開発の敷居が低いので、カンタンに開発できる。
アイデアがあれば、だれでも参入可能!

セッション3「日本語 Web フォントの基本講座と事例にみる導入効果」 ———————————————————————-

▲ 関口 浩之さま(ソフトバンク・テクノロジー)によるセッション

wmsp17-03

– 日本語は文字数が多いのでフォントファイルのデータ量が大きい。 – 英語は文字数が少ないので、フォントデータ全体をダウンロードさせることができる。 – フォントのレンダリングは OS に依存する部分が大きい。 – 見出しを画像化しなければ、Google 翻訳 API で全体を機械的に翻訳できる。 – ウェブフォントの実装は、JS を読み込み、CSS でフォントファミリーを指定するだけ。 – 使っている文字の重複が多いほど、配信する文字種が少なくなりデータが小さくなる。 – 明朝体の方がデータが重い。ゴシックは軽い。 – ひとつの契約でドメインの制限がないプランがある。 – 制作会社が契約して、クライアントワークで使ってもいい。

セッション4「a-blog cms を活用した新しい Web 制作のワークフロー」 ———————————————————————-

wmsp17-04

▲ 山本 一道さま(アップルップル)によるセッション

今の Web 制作のワークフロー

  1. 設計
  2. デザイン
  3. マークアップ
  4. CMS 実装
  5. データ登録

問題点

– 順番に開発するので時間がかかる。 – 管理画面でデータを登録するのは最終工程。

アップルップルのワークフロー

  1. 設計
  2. CMS 実装・デザイン
  3. データ登録・マークアップ

利点

– CMS 実装を先行し、クライアントにデータを入力してもらう事で問題を早期に発見できる。 – 製作時間を短縮できる。 – 実際のデータを見ながらデザインするので漏れがない。 – データの入力を早くから行える。

a-blog cms 2.1 の新機能

色々あるけど、カスタムフィールドをユニット化できる「カスタムユニット」が便利そう。

セッション5「a-blog cms でできる、マルチデバイス対応」 ———————————————————————-

wmsp17-05

▲ 山田 恵理子さま(ゴーフィールド)によるセッション

a-blog cms でマルチデバイスに対応するには、次の3つの方法がある。

– レスポンシブサイト – スマーフォン最適化サイト – ハイブリッド型サイト

レスポンシブサイト

普通に作れば良いのだが、a-blog cms の独自機能があるので利用する。

– レスポンシブ用グリッドシステムが用意されている。 – 投稿できる画像サイズのパーセント指定ができる。 – PC 用の画像はおもすぎるので、スマホ用の画像に置き換える事が出来る。

スマーフォン最適化サイト

– PC 版・スマホ版のそれぞれのテーマを準備し、ルールを設定して切り替える。 – スマホから PC への切り替えボタンも設置できる。

ハイブリッド型サイト

ペースは PC のテンプレートだが、テーマ継承機能を使い、スマホで必要な部分だけを上書きする。 規定の書式でテーマフォルダ名を設定、ルールを設定して切り替える。

– ヘッダー・フッターのインクルードファイルを上書きする。 – テーブルの行と列を切り替えに利用できる。 – フル CMS でないサイトでも応用できる。

感想 ———————————————————————-

wmsp17-06

▲ 登壇者さま集合!

Web Starter Kit、HTML5 API、Web フォント、a-blog cms など、幅広い分野で勉強になりました。 ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です