2013年2月21日木曜日

2月17日 [Play部屋] 第5回 Play 2.1 はじめて&もくもく会 に参加した

日時:2013年02月17日(日)10:00~17:00
会場:コワーキングスペース茅場町Co-Edo

感想など

参加前は、
- Scalaという名のプログラミング言語があるらしい。
- Playという文字列を見かけることがあったが、Javaのフレームワークらしい。
という感じで、PlayもScalaもよく知らない状態でした。

参加してみて、小原 @kohachori さんや「もくもく」のほうのScalaを愛する方々のあつい話を聞いて、Scalaがすげぇらしいことを知りました。
「はじめて」のほうの目標である、チュートリアル完了が達成できなかった状態では、Scalaがすげぇかどうかはわかりませんでしたが。。。。。
(ブログかいてみて、結局、参加前後で、ほとんど変わってない気がする。。。)

もっと、精進します。

参加した理由

コワーキングスペース茅場町で、小原 @kohachori さんに出会い、Playいいよ、Scalaいいよとすすめられたのがきっかけです。
関数型プログラミングには興味はあったけど、何もやってなかったので、ちょうどよい機会と思って参加しました。

「はじめて」のほかの参加者

ほかの「はじめて」のほうの参加者には、こんな方々がいました。
  • インフラ関係のエンジニアで、プログラミングに興味があって、はじめて&もくもく会を知って参加した方
  • 最近参加した勉強会(Scalaのあつい話が展開されていたらしい)で、はじめて&もくもく会に誘われた方
  • 業務ではC++をやっていて、Web系の言語をやってみようと思っていたら、小原 @kohachori さんにはじめて&もくもく会に誘われた方

チュートリアルの実践

「はじめて」のほうの参加だったので、Playのチュートリアル(日本語)を進めていきました。
日本語のほうはPlay 2.0 なので、Play 2.1 だとAPIが変わっている箇所などがあるらしく、
そのときは公式の英語のほうを見たほうがよいというアドバイスをいただきました。

他のはじめての方と雑談しつつ、雑談しつつ、雑談しつつ、
ホストの小原 @kohachori さんに質問しつつな感じで、チュートリアルをやりました。
(雑談ばかりして、あまり進まなかったのは私です。。。。。orz)


Play 2.1 の開発環境の準備

(Windows7/IntelliJ IDEA 12.0.4/Play Framework 2.1)

なにかしらのインストール作業がいるかと思ってましたが、Playをダウンロードして、パスを通しておわりでした。

  1. ダウンロードしていた Play Framework 2.1 を、適当な場所に展開。
    (私は、Program Files以外の場所に配置しました。)
  2. PATH 環境変数にPlay のインストール先ディレクトリを設定。
  3. play コマンドの起動確認。
    $ play help

Scala ってどうインストールの?などと思ってたのですが、Play Frameworkに入っているらしく、インストール作業は不要でした。


IntelliJ IDEAのセットアップ

「IntelliJ IDEA で Playframwork の Scala モジュールを動かした」 を見ながらセットアップしました。

  1. Scalaプラグインをインストール。
  2. Play Frameworkプラグインをインストール。
  3. Playのプロジェクトで、IntelliJのプロジェクトファイルを作成。
    $ play idea



そういえば、Windows環境で、play ideaで作成したIntelliJのプロジェクトファイルを読み込んだら、".gitignore"と"README"しか表示されない方がいました。
私もWindows環境でしたが、そのような現象は発生せず、結局、原因はわからずじまいでした。
結局、Eclipseを使うことにしたようでした。

'.' expected but ';' found. というエラー

チュートリアルのアプリケーションテンプレートのところをやっていて本エラーが発生して、原因が最初わかりませんでした。
エラーメッセージは「'.' があるはずなのに ';' があっておかしいよ」って言っていると読んだのですが、
コードを見ても、 ';' なんてどこにもない!いったいどこにあるんだよって少々困りました。

| @(tasks: List[Task], taskForm: Form[String])
| @import helper_
| @main("Todo list") {

単純に @import helper._ と記述すべきところで '.' が抜けてただけでした。
これは、';' を省略してるからコードに記述してないけど、本来は ';' があるからエラーでは ';' って出るということ??

2013年2月17日日曜日

2月6日 HTML5+CSS3+jQueryによるスマホサイト制作のはじめの一歩(スマホサイトの情報設計編) に参加した

日時:2013年02月06日(水)19:00~21:00
会場:パソナグループ 本部
関連:<SKILL BASECAMP 2013> HTML5+CSS3+jQueryによるスマホサイト制作のはじめの一歩 ― スマホサイトの情報設計編 ―


感想など

レスポンシブWebの制作をやったことがなかったので、実際に簡単なものでしたが、手を動かしてやれたのでよかったです。
スマホかタブレット、PCの判定をブラウザ画面の横幅でやっているという話は意外でした。もっと何か条件があるとばかり思ってました。


本編

- 前半(知識)
- 質疑
- 後半(ハンズオン)


前半(知識)

質問:業務で使っている環境は?
- Mac:1、2人
- Windows:ほぼ全員
  Windowsでは、iOSシミュレータが使えないので不便です。

主要スマホの解像度。横幅はだいたい320px。

端末の向き
- 縦向き:portrait
- 横向き:landscape

質問:スマホサイトの制作経験は?
- あり:1/4くらい
- なし:3/4くらい

大事なキーワード
- meta viewport
- device-pixel-ratio

meta viewport
- できること
  - ブラウザの表示幅を指定できる
  - 拡大縮小の可否の指定
  - 拡大縮小の最大・最小倍率の指定

- 指定しない場合
  - PCサイトで見た場合とおなじ表示幅になる(小さい)

device-pixel-ratio
- ratio の読み【レイシオ】
- 640x1136(画面解像度)で 320x568(ブラウザのサイズ)
- 画面とWebサイトの1pxが違う
- Webサイトの1pxに画面の2pxを使って表現する
- これを意識して画像を用意する必要がある。出ないとロゴなどがぼける

タップのしやすいエリア
- 縦長になっている
- 上にとどかない
- アプリを参考にする

ボタンのサイズ
- ガイドラインを参考にする

質問:レスポンシブWebデザインサイトの制作経験は?
- ある:1、2人
- なし:ほぼ全員

例:NHKスタジオパーク
http://www.nhk.or.jp/studiopark/

レスポンシブWebデザインは設計手法
- モックなどできちんと設計しないと、いきなり実装は難しい

スマホ・タブレット・PCを切り替える
- Media Queriesを使って、ブラウザの横幅で振り分ける
- 振り分ける解像度を breakpoint という
- スマホの高解像度化につれて、設定値はかわる
- 最近は breakpoint 1つが主流(700pxくらい)


質疑

タブレットとPCの区別はどうすればよいのか?
- タブレットを意識したデザインにする
- 海外の新聞社のサイトなど
  - ボタンなどは大きく
  - クリック領域を大きく
- PC中心 -> タブレット中心


ピンチアウトへの対応はどうすればよいのか?
- アンドロイド端末
  - バグ、仕様で端末の対応状況がまちまち
  - 全端末への対応は無理なので、事前に打ち合わせる
  - JavaScriptで頑張って実装する??

raito 3が主流になってくると、3倍の画像を用意するのか?
- 1000px近い画像を用意する必要がある
  - 回線によっては遅い
- できるだけ画像を使わないデザインにする
- 人間の目では違いがわからない。
  - raito 2 での対応で問題ない感じ。raito 3対応と比較したが違いがわからなかった。

breakpointの見極めはどうすればよいか?
- 700px の根拠は?
- 今後はスマホも高解像度化する。今後はどうやって見極める?
- iPad 768px とすると、750pxのタブレットが登場すると対応できない



後半(ハンズオン)

時間がなかったので、事前に用意された表示用のサンプルHTMLとCSSを使って、前半の知識を確認するという形式でした。
サンプルに、ハンズオン用のCSS設定をコピペして、ブラウザで実際に確認する。という内容でした。

- レスポンシブは、%単位で指定する
- 100%を超えると、折り返されて、下の段におちる
- 余裕を持って100%より少なめに設定する
- スマホ向けの場合は、重要度の低い情報は非表示にする

11月22日 駆け出しWebクリエイターのためのIA勉強会 に参加した

日時:2012年11月22日(金)19:00~21:00
会場:パソナグループ 本部 8F イベントホール
関連:Find your Ability ! forクリエイター #6 プロのWebサイト・アプリ設計を学ぶ、駆け出しWebクリエイターのためのIA勉強会

書きかけのまま放置して忘れていたので、少し書き足してこっそり公開。。。。。

感想など

IAっていう言葉は聞いたことある気がして、なんか気になったので参加しました。
このテーマの人気が高いのか、「Webクリエイター」向けだったのか、参加者数が多かったです。
そして女性の割合も多かった気がします。

情報アーキテクチャについて、なんとなく理解できて大変よかったです。
ただ、スライドの内容が濃くて、発表スピードも早かったので、メモを取ることが大変でしたが。。。。。

自分ができそうなことは、まずは、いくつかのサイトの構造図を作成してみることか。


- 本編
 - スライド
 - 情報アーキテクチャとは?
 - インフォメーションアーキテクトの役割
 - IAのプロセス
 - IAの主な成果物
 - IAに求められるコアスキル
 - Webデザインとスマホ向けデザインの違い
 - 参考書
 - 質疑応答
- キャリアビジョン

本編

スライド




 情報アーキテクチャとは?

1.情報を理解する
 - リチャード・ソール・ワーマン『Information Architects』
 - パターンをまとめる
 - 情報の構造を示す地図
 - 理解しやすいように
2.情報を整理して、法則を作ること
 - 『Web情報アーキテクチャ』
 - 図書館情報学
 - サーチエンジンがなかったときの情報への道すじ
3.問題を解決する
 - ヤコブ・ニールセン『Webユーザビリティ』
 - ユーザの視点を反映
 - 問題なく目的を達成
4.機能を計画し、経験を設計する
 - リリアン・スペック
 - 潜在的なシステムを表現する計画
 - ユーザーの経験を構築する
→ 複雑な情報をシンプルにする

使いにくいコーヒーベンダー
使いボタン等の配置が、実際の操作の動線に合っていない。

① コインを入れる
  → 右上の方
② 砂糖などを選ぶ
  → 中央のあたり
③ 味を選ぶ
  → 中央上のあたり
④ カップを取り出す
  → 右下端の方
⑤ カップを置く
  → 中央下のあたり
⑥ コーヒーが注がれる

→ 実際に観察する


 インフォメーションアーキテクトの役割

使いやすい経験を計画し、設計する人

- ユーザーの代表としての意識を持ち
- 必要な情報を整理し必要な機能を明確
- ユーザー中心のデザイン開発
- 推進する

情報を整理する ≠ 情報を整える
→ 情報を理解し、全体を把握し、全体を掌握する
例:書店。全体を把握している?でも把握している店員はいる。尋ねると本の場所を教えてくれる。

目に見えない使い勝手(利便性や機能)を設計する


 IAのプロセス

1.要らないものをつくらない!
2.無駄をなくす!

①目的の設計 > ②ユーザーの設計 > ③機能の設計 > ④サイトの構造の設計 > ⑤ページの構造の設計

①目的の設計
- ビジネスの目的やユーザーゴールの設計
- 情報を分解
- 成果物
 - 競合調査
 - ユーザー調査
 - ゴール定義

②ユーザーの設計
- ユーザー像/ターゲット層の設計
- 情報の分析
- 成果物
 - ペルソナ
 - ユーザーシナリオ
 - ユーザー用件定義

③機能
- フィーチャーと機能の設定
 - どういう機能があるのか?
- 情報の分類
- 成果物
 - 機能リスト
 - 機能仕様
 - 用件定義

④サイトの構造
- 情報の再構成
- 成果物
 - コンセプトモデル
 - サイトマップ
 - フロー図
 - 画面遷移図

⑤ページの構造
- 情報の再設計
- 成果物
 - ワイヤーフレーム
 - ページレイアウト
 - 画面設計


 IAの主な成果物

ペルソナ
- 実在するサイト使用者を想定
- 1~2年のプロジェクトで一貫性を保つ
 - 途中でわすれてしまわないように
- 仮説で決めてはいけない!

ハイレベルサイトマップ
- 既存サイトを確認する場合
 - 構造を頭に入れる!
 - アプリで自動化せずに、手を動かす
- 新しい構造の提案

ワイヤーフレーム
- 共通要素の整理
- 破綻や矛盾を発見

詳細サイトマップ
- 全体設計


 IAに求められるコアスキル

- デザイン力とデザインマネージメント能力
- リーダーシップとプロジェクトマネージメント能力
 - 議論できちんと結果を導く
- ユーザー調査の設計と実行力
 - 外注することが多い
 - 外注先がきちんとできるように、望む成果物を得るために必要
- 調整力
 - どうしょうもない状態をなんとかする


 Webデザインとスマホ向けデザインの違い

Web
 - モニタサイズに影響
スマホ
 - 端末の液晶に影響
 - 手に持って移動する

例:Amazonのサイト


 参考書

『IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計』
『IAシンキング Web制作者・担当者のためのIA思考術』
『Webサイト設計のためのデザイン&プランニング』
『Webデザイナーのための情報アーキテクチャ入門』


 質疑応答

- 学ぶために何をやるとよいのか?体験できる講座などはあるのか?
 - 座学より手を動かす。
 - A3の紙に、すきなサイトのリンクをクリックして、構造図をかきおこす
 - 様々なサイトの構造図をかくと、サイトの構造が頭にはいる。パターンもわかってくる。

- クライアント側が、依頼する場合の注意点は?
 - ドキュメントを残すように指示する
  - どのように考えて設計した情報が必要
  - ビジュアルデザインはかわる

- クライアント側が、事前になにをすれば、仕事がやりやすいのか?
 - 現状のサイトマップとコンテンツ
 - サイトマップに必要な情報・不要な情報にチェックをいれておく
 - ユーザ調査をしておく

- ユーザー調査を学ぶには?
 - 外注する調査会社と一緒にやる
 - 本を読む
 - 実際に関係のない人に使ってもらい、その様子を観察する
  - 会社の前で通行人をつかまえる
  - 予想外の行動をする


 キャリアビジョン

常に何をやりたいか考えていた
→ 何が足りないのかを考える

先を考える
→ やれる環境をつくる

魅力を感じるものをリストアップ
→ 周辺のことを観察する

人が何してるのか観察する