プログラミング生放送勉強会 第15回@大阪 レポート

プログラミング生放送勉強会 第15回@大阪

2012年4月21日(土)に日本マイクロソフト関西支店のセミナールームで、コミュニティ「プログラミング生放送」によるIT・開発系イベント、プログラミング生放送勉強会を開催しました。その模様をお届けします。

プログラミング生放送勉強会は、IT・開発系であればノンジャンルのIT勉強会です。今回は、JavaScript APIのIndexed DatabaseWindows 8 Metro style appC++Windows AzureKinectGerritなど、いろいろな内容のセッションとなりました。

図1 会場の様子
図1 会場の様子1 図1 会場の様子2

当日は、約40名の参加がありました。ライブストリーミングも行い、録画したセッションは、プログラミング生放送勉強会 2012年で一覧を参照・視聴できます(niconicoのユーザーである必要があります⁠⁠。こちらもご利用ください。

明日から使えない IndexedDB

それでは、各セッション内容を簡単に紹介します。株式会社ジェーンのmzsm@mzsm_jさんからは、Indexed Database APIの話です。

Indexed Databaseは、Webブラウザー上で動くNoSQLデータベースです。JavaScriptのAPIで操作し、データをサーバーではなくクライアント(Webブラウザー)に保存します。

現在、対応しているWebブラウザーは次の通りです。

  • Google Chrome 11以上
  • Mozilla Firefox 4以上
  • Internet Explorer 10以上

使い方の例として次の3点をあげています。

  • オンライン辞書アプリで、初回のみネットワークにアクセスし、2回目以降はDBを参照してレスポンスを向上させる

  • ニュースリーダーで、先にすべての記事をDBに溜め込むことで地下鉄の駅間でも記事が読めるようにする

  • Windows 8のMetro styleアプリやGoogle Chromeアプリで、各種データ保存先として、SQLiteの代わりに使う

しかし、なぜ明日から「使えない」かというと、現在W3Cが仕様を策定中であり、その最近のワーキングドラフトの3つの版において仕様が大きく変更されており、現在のエディターズドラフトでも仕様が変更されているとのことです。また、WebブラウザーやWebブラウザーのバージョンによって、実装されている版が異なっています。今の所まだ、あまり使いものになりませんが、今のうちに使い方を知るというのが今回の趣旨となっています。

Indexed Databaseでは、Object型をオブジェクトストア(RDBMSのテーブルにあたる)に格納できます。保存できる値は、文字列(DOMString⁠⁠、数値(float⁠⁠、日時(Date⁠⁠、配列(Array)です。

Indexed Databaseの特徴として次の点をあげ、それぞれについて説明していただきました。

  • スキーマレスである
  • 基本的に非同期に処理するため、コールバック関数を多用する
  • すべて操作は、トランザクション内で行う
  • 排他・共有ロックに対応している
  • インデックスを使って検索できる(インデックスを作成していない場合、検索できない)

スキーマレスのため、レコード(RDBMSの行にあたる)は同じプロパティ(RDBMSの列にあたる)である必要はありません。

// 同じオブジェクトストアに格納できる
{
  foo: "string",
  bar: 12345.6
}

{
  foo: new Date('2012-04-21 13:00:00'),
  baz: ['hoge', 'fuga', 1, 2]
}

トランザクションの種類は、読み取り専用・読み書き・バージョン更新の3種類があります。オブジェクトストアやインデックスの作成や破棄は、バージョン更新トランザクションで行います。

上記の内容や、その他の項目は、サンプルコードともに説明されています。詳しくは下記の動画と公開されている資料をご確認ください。

明日から使えない IndexedDB プロ生勉強会 第15回@大阪 #pronama
ニコニコ動画:https://www.nicovideo.jp/watch/sm17782348

Metro style apps の ALL テクノロジー★早めぐり紹介 & C++ ネイティブアプリケーションフィーチャー!

MetroStyleDeveloperSilverlight囲む会の遥佐保@hr_saoさんからは、Windows 8のMetro styleアプリの構成技術の紹介と、C++ユーザー目線で、Metro styleアプリで利用できる並列処理(PPL)の紹介です。

Metro styleアプリのテクノロジー

Metro styleアプリでは、UI部分にXAML・CSS・DirectXが使え、ロジック部分は、C#・Visual Basic・C++・JavaScriptが使えます。これらを組み合わせ、Metro styleアプリを作成可能で、その内容について説明しています図2⁠。

図2 UIとロジック、Metro styleアプリの組み合わせ
図2 UIとロジック、Metro styleアプリの組み合わせ

従来のWPFやSilverlightと同じ感覚でMetro styleアプリが作れる組み合わせが次の3種類です。

  • XAML & C#
  • XAML & VB.NET
  • XAML & C++/CX

XAMLとDirectXを混合してアプリも作成可能です。この場合は、次の3種類に分類できるとのことでした。

  • XAMLをベースとし、DirectXを組み合わせ描画する方法が2種類
  • XAMLとDirectXを分けて描画する方法

そして、DirectXのみを使用する場合は、従来のデスクトップアプリのDirectXと同じ感覚で作れるとのことでした。最後に、HTML/CSSとJavaScriptで記述する方法は、従来のHTMLベースのWebサイトと同じ感覚で作れるとのことです。

C++/CX

上記に登場したC++/CXは、C++の拡張言語で、C++11に標準準拠しています。Metro styleアプリで利用できるC++になります。

セッションでは、Metro styleアプリで押えたいC++の機能として、並列処理と非同期処理をあげ、並列処理についてデモしています。並列処理の例としてparallel_for_eachを紹介しています。

#include <amp.h>
int                     v[4] = {0, 1, 2, 3};
array_view<int>         av(4, v);

parallel_for_each(
        av.extent, [=](index<1> idx) restrict(amp)
        {
                av[idx] += 1;
        });

parallel_for_eachは、std::for_eachの並列バージョンで、Visual Studio 11からブレークポイントも設定可能とのことでした。デモでは、GPUで並列処理を行い、Visual Studio 11でブレークポイントを設定し、実行時のスレッドの内容を確認しています。詳しいデモやその他の内容は、セッション動画をご確認ください。

Metro style apps の ALL テクノロジ★早めぐり紹介 #pronama 第15回@大阪
ニコニコ動画:https://www.nicovideo.jp/watch/sm17782522

最近はやりのプラットフォームを楽しもう

Japan Windows Azure User Groupのkamebuchi@kamebuchiさんには、Windows AzureKinectという異色の組み合わせでセッションしていただきました。

図3 最近はやりのプラットフォームを楽しむ
図3 最近はやりのプラットフォームを楽しむ

セッションでの前半は、Windows AzureとKinectについて初心者向けの簡単な概要を紹介しています。Kinectの紹介時に次のデモを行っています。

  • Kinect for Windows SDKのサンプル紹介
  • Kinectで地球をまわす

Kinect for Windowsは、Xbox 360のKinectとは異なり、Microsoft公式のKinect for Windows SDKで商用利用も可能とのことでした。Kinect for Xbox 360は開発時限定で利用できます。

後半は、KinectとWindows Azureを使ったデモをしています。ひとつめは、Kinectで取得した骨格情報をWebで共有するデモです図4⁠。

図4 KinectとWindows Azureで骨格情報の共有
図4 KinectとWindows Azureで骨格情報の共有

WebSocketを使いWindows Azure上で動作するWebアプリに渡し、各クライアント(Webブラウザー)で表示します図5⁠。骨格情報が黒い四角で描画されているのがわかります。

図5 骨格情報の共有のデモ
図5 骨格情報の共有のデモ

続いて、KinectとMikuMikuCaptureを使ってMikuMikuDanceのモデルを動かし図6⁠、その映像をExpression Encoderでエンコードを行い、Live Smooth Streamingで配信するデモです図7⁠。

図7 クラウディア窓辺を動かす
図7 クラウディア窓辺を動かす
図8 Live Smooth Streamingによる配信
図8 Live Smooth Streamingによる配信

残念ながら、当日はマシンやネットワークの環境の問題で、配信を行うところまでは動きませんでした。

さらに、セッションではKinectから情報を取得するまでのサンプルアプリ開発をライブコーディングで紹介しています。詳しくはセッション動画をご覧ください。

最近はやりのプラットフォームを楽しもう Part 1 #pronama 第15回@大阪
ニコニコ動画:https://www.nicovideo.jp/watch/sm17782371
最近はやりのプラットフォームを楽しもう Part 2 #pronama 第15回@大阪
ニコニコ動画:https://www.nicovideo.jp/watch/sm17782394

参加者から声を聴くと、Windows AzureとKinectをどう組み合わせるのか、興味を持って聴いてもらえたようです。また、Windows AzureとKinectの基本情報の紹介も好評だったようです。

Gerrit 使ってみよう

当日に急きょ、少し短めのセッションを、SQLWorldのおだ@shinsukeodaさんにしていただきました。

Gerritは、Gitリポジトリに対してのWebベースのコードレビューツールです。ツールの簡単な紹介と使用感について話していただきました。

Gerritを利用すると、変更内容を左右に並べて表示や、レビュアーがインラインにコメントを追加ができます。

レビュー(Code-review)検証(Verified)の2機能があり、レビューはWebブラウザー上で行い、検証は実際に動作確認します(コンパイルやユニットテストなど⁠⁠。このレビューと検証を通らないと、共有のリポジトリにpushしても、ほかの人は変更された内容を取得できません。よって、コンパイルが失敗するコードや、レビューやテスト未実施のコードが、メインのリポジトリに入るのを防げ、Pre-tested commitを実現できます。

セッションでは、簡単なデモも交えて紹介しています。

Gerrit 使ってみよう プロ生勉強会 第15回@大阪 #pronama
ニコニコ動画:https://www.nicovideo.jp/watch/sm17782434

GC 擬(もどき)を JS で書いてみた

プログラミング生放送 大阪スタッフ、うえだ@to_uedaさんからは、JavaScriptGC(ガベージコレクション)っぽい何かを作った話です。⁠ガベージコレクションのアルゴリズムと実装」という本を読んで、感銘を受けたので作ってみたとのことでした。

はじめに、GCについて簡単な紹介と、GCのアルゴリズムを解説しつつ、作成したJavaScriptのWebページでデモを行っています。

GC 擬(もどき)を JS で書いてみた プロ生勉強会 第15回@大阪 #pronama
ニコニコ動画:https://www.nicovideo.jp/watch/sm17782418

3日で作る Web サイト

5zj@jz5からは、IT勉強会スタンプラリーのWebサイトを作った話をしました。どのように使用するテクノロジーを決めていったか、実際に使った技術紹介と感想を紹介しています。

結果的にWebサイトは、下記のテクノロジーを使っています。

  • ASP.NET Web ページ(Razor)
    • IIS Server
    • Visual Basic
  • WordPress
    • PHP
  • SQL Server
  • Twitter Bootstrap

上記の、ASP.NETのWebページ中にサーバーベースのコードを埋め込むRazor構文について、非常に簡単な紹介とデモを行いました。また、最終的に組み入れたセキュリティ対策についても話しています。

Webサイトのデザイン(見た目)の部分は、Twitter Bootstrapを利用しています。Twitter Bootstrapは、CSS・JavaScriptのライブラリーで、利用するとモダンなWebサイトを作れます。こちらも非常に簡単なデモを行いました。

このほか、プロトタイプ作成に、Expression Blend SketchFlowを利用し、その紹介もしています。

それぞれのテクノロジーについて、非常に簡単な紹介でしたが、知らなかった人も多く、意外と好評でした。

ライトニングトーク大会

セッションの最後には、参加者の方にライトニングトークをしていただきました。タイトルと発表者のお名前だけ紹介します。これらも視聴できるようになっています。ぜひご視聴ください。

  • 「Webアプリケーションフレームワークの話⁠⁠ kyubuns@kyubunsさん
  • 「リーン・スタートアップ?⁠⁠ Yu&I @you_and_iさん
  • 「SharePoint の基本の基⁠⁠ 山﨑淳朗@SharePointIssueさん
ライトニングトーク プロ生勉強会 第15回@大阪 #pronama
ニコニコ動画:https://www.nicovideo.jp/watch/sm17782496

おわりに

今回 参加していただいた皆様、ありがとうございました。今後もプログラミング生放送勉強会は、各地で開催を予定していますので、参加お待ちしています。

プログラミング生放送の情報は、コミュニティページBlogそしてTwitter図9で配信しています。こちらもチェックしてくださいね。

図9 プロ生ちゃん
図9 プロ生ちゃん

また、プログラミング生放送は、IT勉強会スタンプラリーに参加しています。今回の勉強会は、スタンプラリー対象の勉強会でした図10⁠。詳しくは、IT勉強会スタンプラリーのWebサイトと、gihyo.jpのインフォメーションを確認してください。現在では50近くのコミュニティが参加しています。参加コミュニティも募集中です。

図10 IT勉強会スタンプラリーの実施
図10 IT勉強会スタンプラリーの実施

おすすめ記事

記事・ニュース一覧