2013年7月28日日曜日

ぷち勉強会に参加しました。

昨日、香川県の高松でぷち勉強会が開催されたので、講師として参加してきました。

その時の資料はこちら。
http://goo.gl/CS8k4L

勉強会の様子

今回の内容のポイントは「共通化」でした。

GASのAPIの使い方などは、私の著書などで調べることも可能ですし、ドキュメントも
以前に比べると充実してきていると思いましたので、敢えてそういう所は省いて、
MS Excelなどと比べた時に有利な点として、既存の資産の使い回しができるのは
良い事だと思ったので紹介しました。

結局、データの共有という事で、ScriptProperties、ScriptDbの使い方を
紹介することになったので、その辺りは紹介し、実際に動かして結果を確認して
いただきました。

今回の話として強くアピールしたのは、「複雑な仕様」「規模が大きくなる」という
事が発生するようなら、GAEなどのアプリケーションに移行することをおすすめする
というGoogle+などで投稿している事を話しておきました。
(実際、どうなんでしょうね。あまり大きくなってしまうとどうなるか…。は
確認していないのは現状だし…)

現時点ではGoogle Appsのユーザも少なく、「金の匂いがしない」ということで
本腰を入れて…というようには、なかなかいかないようですが、地道に広めていこうかと
思っています。

フィードバック


  1. Math.round()は「丸め」であって、「四捨五入」ではない。

http://msdn.microsoft.com/ja-jp/library/ie/5cza0web(v=vs.94).aspx

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FMath%2Fround

今回の発表のケースだと、「税込金額」を求めるというものを想定しました。
で、そこで出てきたのが、四捨五入は0.5を足して小数以下を切り捨てるのが
厳密な定義ということでした。
(この点については私も反対意見はない)
ただ、実行結果からして、挙動はほぼ四捨五入の挙動を示していること、
Google検索の結果の上位が全て四捨五入と書いている事を考えると、
四捨五入ということで問題はなさそうに思っています。
(恐らく、負の数を扱った時の結果が厳密なものと違うのか?)

重要なことではあるけど、後は、Wikipediaの「端数処理」を見てご判断下さい。

反省点

最近、発表した後、反省することがなかったので、しっかり反省点を挙げて
おきたいと思います。

大きく、1点目は、「少ししか使っていない」ということ。実運用をしていないと
いうのもあって、紹介する時に、使い方程度しか紹介できないのは痛い。
ScriptDbの質問でも、共通化した時の問題点として、「同時更新」の問題が
発生してくるので、そういう時にデッドロックの問題は…?
という質問に対して回答がしっかりできないなど、まだまだということでしょうか。

2点目は発表の事前準備の時間が少ない。今回はまだうまくやれた方だと思いますが、
福山のAngularJSの時は、薄っぺらさが出てしまっていたようにも思うので
もう少し時間を取らないと(取れるようにしないと)いけないですね。

コードを書くということ自体が少なくなってきているので、上手にやらないと。

2013年6月8日土曜日

htmlday2013に参加しました。

今日はhtmlday2013の活動の一環として、
午前中はヒーロー島のイベントでハンズオン。
午後はAngularJSで遊ぼうというイベント。

ハンズオンの資料はそのうち、ヒーロー島さんで公開されると思います。
(恐らく…。公開されなければ、第20回の勉強会でも、ほぼ同じ内容でハンズオンする予定なのでその時に公開します。)

ハンズオンの時はMicrosoftのイベントだったので、アウェイ感がとても強かったですが
また、何かの機会に一緒にやれたらいいですね。
実際、ハンズオンはどうだったかなと思ってます。
ASP.NETでも、AngularJSは動くので使ってみて下さい。)
チュートリアルのモジュール化以外の部分はこなしました。(※ユニットテストを除く)

午後は、AngularJS + PureでTodoサンプルを実装してみました。
ソースはまた今度公開します。

ng-bindを使った方が良いということもわかったり、angularJSを使う幅が
広がったかなーと思っています。

最後に、前回のDevfest2013の延長戦の時にやっていた、YouTubeサンプルを
もう一度眺めて終わり。
これもソースコードを公開します。


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回目の内容は

  1. 前提条件を決める
    1. 開催予定
    2. 公開するWebサービスではなく、いわゆる「業務アプリ」に適用するための勉強会であること。
    3. JavaScriptは利用する
      1. HTML5のAPIの使い方
      2. JavaScriptライブラリ(Jqueryなど)
    4. (できれば)GDG中国のイベントで成果を発表
    5. 私が4月から勤務時間的に平日開催では開催できなくなったことを話す。
  2. 参加者のHTML5の知識の確認
  3. HTML5 Formsの事を話したり、調べたり、動きを確認したり…。

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

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

チェック関係

文法チェック

アウトラインチェック

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

HTML5 & CSS3 Support

HTML5 Test

今日のサンプル的なお題

HTML5Rocks HTML5 Forms

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

参考サイト



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

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

テーマは入力フォームなので、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



2013年3月18日月曜日

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

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

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

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

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

GDG中国の活動について


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

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

実際の仕事


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

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

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

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

2013年3月1日金曜日

GAE/G+AngularJSでGoogle+ SignInを利用する(1)

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

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

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

事前準備として、APIsConsoleで

  1. Google+ APIをONにする。
  2. 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日でした!

関連するGoogle+の投稿

https://plus.google.com/u/0/114183076079015753160/posts/CYgcSMk3GJN
https://plus.google.com/u/0/114183076079015753160/posts/eSMpESRHTRo

2013年2月19日火曜日

mavenを使ってAndroidアプリケーション開発(1)

mavenを使い倒したいので、Apache Maven 3 クックブックを読みながら、

Androidアプリケーション開発環境を構築していました。Maven自体のインストールは
無くても良いということでしたが、インストールしていても問題ありません。(私はインストールしてから環境を構築してみた)

コマンドは
$mvn archetype:generate -DarchetypeCatalog=http://repository-malachid.forge.cloudbees.com/public-snapshot/archetype-catalog.xml

とかでプロジェクトは作成できるのですが、
mvnコマンドを使うよりは、EclipseのMaven-Android-Pluginを利用した方が簡単に作成できるようになります。

Eclipse Marketplaceのインストール


このMaven-Android-Pluginを適用するためには、Eclipse Marketplaceをインストールする必要があって、メニューのHelp→Install New Softwareで、"http://download.eclipse.org/mpc/indigo/"を入力してインストールします。

Maven-Android-Pluginのインストール
メニューのHelp→Eclipse Marketplaceを選択して、"android m2e"で検索するとAndroid Connectorというのが出てくるので、それをインストールしてください。

実際に環境を構築して…

プロジェクトの作成はEclipseから作成できるようになるので、MavenProjectとして作成します。

プロジェクト作成後にEclipseからでもRun→Maven buildを選択してもコンパイルはできますが、実機にインストールされないことと、Goalの設定を"Compile"にする必要があります。

コマンドラインから
$ mvn clean install android:deploy

とすると、コンパイルされて、起動しているエミュレータか接続されている実機
(adb installができる状態にしておく)にインストールされます。

その後、アプリケーションを実行すると確かにHello Worldが見えるのですが…。

開発をする上で、色々問題がありました。

問題


  1. Eclipse上でAndroid関連(だけか?)のクラスが全て赤線(エラー)表示
  2. プロジェクトからアプリケーションの実行ができない
  3. 書籍にもAndroidアプリケーション開発の章があるが、内容が薄いし、役に立たない…。


これからも苦戦しながら、いろいろ理解が進むかな…。

Google+の投稿
https://plus.google.com/u/0/114183076079015753160/posts/eRQpXH9qDkQ