T.Yokoyamaのブログ: 3月 2013

2013年3月29日金曜日

HTML5を業務アプリで使うための勉強会 #2を開催しました

HTML5を業務アプリで使うための勉強会 #2に参加してきました。

今回の内容はHTML5で新たに追加されたり、廃止されたり、意味が変わった要素の
確認が主な内容となりました。
これまで存在を知らなかった要素が廃止になっていたり意味が変わったものを改めて確認してみると、「可読性」がポイントになっているように思いました。

当日注意したポイント

図や、本文の説明を補足するものはfigure要素を利用する
strongはネスト可能
aの中にブロック要素を含める事ができる
section要素の中には見出し（h1〜h6）が必要

実際、業務アプリで利用する場合はdivを使うことになりそうよね…。

日時を表す文言を明確にするためのtime要素

当日の資料からの抜粋

HTML5で廃止されたタグの確認

basefont, big, center, font, strike, tt
cssにて代用可
frame, frameset, noframes
ユーザビリティとアクセシビリティにダメージを与える
acronym, applet, isindex, dir
あまり使われない、混乱を招く、他で代用可
s, u については？

HTML5で追加されたタグの確認

section, article, aside, hgroup, header, footer, nav, figure, figurecaption
よりよい文書構成にするため
video, audio, track, embed, mark, progress, meter, time, data, dialog, ruby, rt, rp, bdi, wbr, canvas, command, details, datalist, keygen, output

HTML5で変更になったタグの確認

address, b, cite, dl, hr, i, label, menu, noscript, s, script, small, strong, u

togetterまとめ

+Toyoaki Okoさんがtogetterに内容をまとめてくださっています。
http://togetter.com/li/478715

ページビューが順調に伸びているようなので、注目されていることなのでしょうか。

次週以降は…。

次週はDrag and Drop APIや、File APIをテーマにする予定になっています。
http://www.zusaar.com/event/613003

私は残念ながら参加できませんが、週末に補習を行うことで対応する予定です。
（平日はどうがんばっても深夜にしか参加できないので…）
今後のイベントの舵取りは+Takanobu Hagnioさんに引き続き行っていただけます。

もしかしたらイベント化するかも？
（希望があれば、G+、Twitterなどで言っていただければイベント化します）

2013年3月21日木曜日

HTML5を業務アプリで使うための勉強会 #1を開催しました

昨日、
HTML5を業務アプリで使うための勉強会（仮）
http://www.zusaar.com/event/584004

を開催しました。

次回（2回）があるかどうかが不明だったのでzussarのタイトルは（仮）となっています。
しかし、次回の予定も立てて、開催することになったので、blogのタイトルは#1としています。

まず、第1回目の内容は

前提条件を決める

開催予定
公開するWebサービスではなく、いわゆる「業務アプリ」に適用するための勉強会であること。
JavaScriptは利用する

HTML5のAPIの使い方
JavaScriptライブラリ（Jqueryなど）

（できれば）GDG中国のイベントで成果を発表
私が4月から勤務時間的に平日開催では開催できなくなったことを話す。

参加者のHTML5の知識の確認
HTML5 Formsの事を話したり、調べたり、動きを確認したり…。

最初に以下のサイトを紹介しました。

HTML5を導入する時にチェックをしておいた方が良いもの。

チェック関係

文法チェック

http://validator.w3.org/

アウトラインチェック

http://gsnedders.html5.org/outliner/

各種ブラウザの対応状況を確認

HTML5 & CSS3 Support

http://www.findmebyip.com/litmus

HTML5 Test

http://html5test.com/

今日のサンプル的なお題

HTML5Rocks HTML5 Forms

http://www.html5rocks.com/en/tutorials/forms/html5forms/

HTML&CSS標準デザイン講座（書籍）
http://goo.gl/BsxBD （Amazon）

参考サイト

HTML5でごく普通のWebページを作る

http://www.rasen-d.net/kouchiku/etc/130310.html

Eric Meyer’s Reset CSS（ブラウザの標準スタイルをリセットする）

http://meyerweb.com/eric/tools/css/reset/

テーマは入力フォームなので、HTML5の仕様でカバーできる部分はカバーしましょうという意味も込めて、以下の属性を紹介

autofocus属性（初期フォーカス位置）

required属性（必須入力）

placeholder属性（入力例の表示）

新しい入力タイプも紹介しました。

input type="range"（スライドバーで入力できる）

input type="date"（Opera／Chromeだと日付の入力でDatePickerが表示される）

input type="search"（検索文字列の入力）

input type="tel"（電話番号）
input type="color"（色入力、カラーピッカーが表示される）

CSS3の指定で
:invalid
:required
を使うと、それぞれ、不正な入力時と未入力時のスタイルを指定することも可能になっています。（サンプルはHTML5rocksを見て下さい）

HTML5の入力フォームは指定したタイプの書式に合わないものはブラウザで入力チェックをして間違った入力の時はエラーメッセージ（JavaScriptのsetCustomValidity()メソッドでカスタマイズも可能）も表示してくれる優れものです。

（当然、Submitされません。）

結論としては、それぞれの入力項目に対して属性を正しく指定して、「何を入力するか」を明確にしましょう。という感じになりました。

が、現時点ではブラウザによって対応状況がまちまちなので、HTML5Testなどで対応状況を確認して、使えるものはコーディング規約に規定するなどで運用できるのではないかという話もありました。

今後の活動に対して、いろいろな話題の広がりがありそうな回だったと思います。

次回の開催は、3/27（水） 19:00からです。場所は当日の参加者の様子から一番近そうな場所を選んで告知します。

HTML5を業務アプリで使うための勉強会 #2

http://www.zusaar.com/event/597005

2013年3月18日月曜日

４月から電気科の講師になります。

2月の初旬に高校の教員になることが決まったという記事を投稿したのですが、
やっと、どの高校に配属されるかというのが決まりました。
（校長先生から連絡がありました）

具体的な高校の名前を出すのはやめておきますが、
今の家からだとちょっと遠いかもしれないです。

ちなみに、電気科で、かつ定時制の担当になりました。

なので、就業時間が13:00〜21:30だそうです。

GDG中国の活動について

GDG中国に対する活動で平日に動かないといけないようなこと（例えば、会場を借りた時の銀行振込とか）は午前中が自由に動けるので今後も問題なく自分で活動できそうです。

いろいろ解決しないといけないですが、
平日の夜のイベントは参加（開催）不可能になりました。（深夜のジョイフルとかならいけるか？ｗ）
スタッフの方にお願いする形であれば何とか開催も可能…か。
あ、前日移動という方法も取れないぞ…！？
ということは、遠隔地の活動が難しい感じだな…。ちょっと考えよう。

実際の仕事

については、しばらくすれば具体的に打ち合わせをしてから準備をすることになるかと思いますが
私は情報が専門なので、電気科の電気にどこまで太刀打ちできるかが非常に気になります。
ちょっと困ったねぇ。
（高校、大学で少しだけ電気基礎と電気回路、電子回路はやったけど、もう10年以上前の事だし…）

「素晴らしい経歴を持たれていて…」とお言葉をいただいたものの、適用できるのかどうかは
いろいろ挑戦ですね。

ということで、食品運送のトラック運転手の挑戦の次は電気の分野への挑戦となります。

どんどんITから遠ざかっているけど、ちゃんとやりますから！

2013年3月1日金曜日

GAE/G＋AngularJSでGoogle+ SignInを利用する（１）

最近、公開されたGoogle+ SignInという、Google+アカウントを利用した認証
サービスを利用してみようと思ってがんばってみました。

Google+ SignInについては以下の記事をご覧ください。
http://googledevjp.blogspot.jp/2013/02/google-sns.html

で、本当は公開されているサンプルを動かせばいいのに、わざわざ苦戦する方向で
試してみました。

事前準備として、APIsConsoleで

Google+ APIをONにする。
ClientIDを作成する。（Web Applicationのものを作成してください。）

ClientIDは削除できないので選択を間違えると、無駄にIDが増えていくことになるので気をつけてください。（リダイレクト先は後でも変更可能です。）

ライブラリが提供されているので、実際にはHTMLだけ作成すればローカルのWebサーバを
経由するだけでGoogle+ SignInボタンは表示されます。

実際にSignInボタンを押すと、プロフィール情報が取得され、ブラウザで表示させる事が
できるようになります。

サンプルコードはgithubで公開しています。
https://github.com/tyokoyama/gplus-signin-sample

単純な例であれば、すぐ作れるようになりますが、私はAngularJSも一緒に使おうとして
だいぶはまりました。（SignIn直後にプロフィール情報を表示させる事は今も解決していません）

最初のSignIn後のリダイレクト先にAngularJSのコントローラの関数を指定できないので
以下のように強引に関数を呼び出すか、

var elem = document.getElementById('viewResult');
angular.element(elem).scope().signIn(authResult);

githubのサンプルコードのように、ボタンを配置してボタンを押した後で
プロフィール情報を取得しにいく。という事なら何とか可能でした。

実際の動きはPHPのQuickstartを見ると良いかもしれません。
（HTMLの部分はjQueryが使われています）
https://developers.google.com/+/quickstart/php

GAE/Gでも、PHPのプロジェクトからindex.htmlだけコピーするだけでも、
プロフィール情報が表示されるようになります。
（適当にAjaxでのリクエストが発生しますが、GAE/G側の実装がなければ404の応答になるだけ）

もうしばらく、いじり倒さないとだめだなと思ったのと、
生産性の低さに嘆く1日でした！

T.Yokoyamaのブログ