webとかmacとかやってみようか R

webアプリ作ってみたり

Webフロントエンドでリアクティブプログラミング

お世話になってるところで、最近気になっている「Webフロントエンドでリアクティブプログラミング」について記事を書かせて頂きました。

以前からちょこちょこ調べてはいたのですが、いい機会なのでまとめていたら結構な文量に。。
7000字弱は疲れた!!


Webフロントエンドでリアクティブプログラミング

記事中では elm 押しで書いているのですが、実際のことを考えると Bacon.js がまずは良さそうです。
elm は Haskell をマスターしてからでないと辛すぎるw

Enterprise HTML5 Conference に行ってきたよ

表題の通り、昨日開催された html5jエンプラ部のカンファレンスに行ってまいりました。

最近めっきりBlogも書いてなかったのですが、帰ってBlog書くまでがカンファレンスです!と言われたので、色々と思ったことなどを交えながらひとつレポートでも書いてみようと思う次第であります。

Html5Bizカンファレンスとしては第1回目で、平日の昼間、しかも都心から離れ場所にも関わらず、なかなかの盛況ぶりでした。オープンソースカンファレンス(OSC)と同時開催というも良かったのかもしれませんね。OSCのほうもちょっと覗いてきましたが、場所が大学ということもあるのかまさに文化祭のような雰囲気が楽しいですね。

さて、こちらのカンファレンスの内容ですが、私が参加したセッションを中心に簡単にレポートしてみたいと思います。

パネルディスカッション「HTML5エンタープライズITの向かう先」

オープニングセッションです。これからのエンタープライズWebはどうなっていくかというテーマでのセッションでなかなか興味深いテーマでした。HTML5の華やかな機能の話よりも、進化し続けるブラウザや仕様にたいして、どのように運用・保守を続けていくのか、などまさにエンタープライズっぽい話題でした。

「ぶっちゃけMSさんとしてIE8はどうなんですか?」という白石さんの爆弾ツッコミに対して、「まずは皆さんに愛されながらもサポートが終了するIE6についてから」、とさらりと交わす春日井さんさすがです。

その他にもMEAPの話題でSencha Spaceが出たことに個人的に驚き!オープニングセッションでSencha Spaceの名前が出るなんて!ww

HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法

Sencha UGとしては聞いておかざるを得ないですね。資料が上がっています。 http://www.slideshare.net/kotsutsumi/html5-31768731

UGとは違い、さすがにスポンサーセッションぽい感じでしたね。小堤さんがえらくゆっくりしゃべってるなぁ、と思ったら会場のマイクが微妙に遅れるせいでしゃべれなかった、とのこと。そういえば最初のパネルもだいぶ聞き取り辛かったですもんねぇ。

リッチアプリケーション開発を助けるOSSのJSフレームワーク「AngularJS」の魅力

図らずも、時間帯が被り Sencha vs Angular となってしまったセッション!UG1周年、デブサミ、そして今回と3回目の対決w 私は聞けませんでしたが、参加者すごかったですね。大盛況のようで。

金井さんと吉田さんの資料見て私も勉強します!

Webアプリ開発者のためのHTML5セキュリティ入門

HTML5の要素技術の基本的なところから、その脆弱性、対応方法までを丁寧にまとめられていました。非常に勉強になりました。
資料は即日はてブ500over! http://www.slideshare.net/muneakinishimura/webhtml5-31749532
「安全なウェブサイトの作り方」へ追加されるべき!!

オープンソースで始めるオフラインアプリケーション開発入門

http://www.slideshare.net/sagawafumio/ss-31750106
佐川さんのセッションです。HTML5で作る次世代Webアプリの要素技術を色々と紹介して頂きました。
Yeoman、私も使っていて、何も考えなければすごく簡単に始められ確かに便利です。しかし、実際のプロジェクトでは自前のテンプレートとかをちゃんと作る必要もあり、案外導入が面倒くさい気がします。
WebStorageやApplicationCacheを積極的に使ったオフラインSPAは、特に前述のセキュリティを気をつけないと、色々と嵌まりそうだと感じました。HTML5オフラインSPAでのセキュリティリスク、なんて講演タイトル聞きたいですね〜。誰か是非!w

OSSのブラウザ自動テストツール「Selenium」を使った、開発・テストの効率化

数年前にSeleniumは使ったのですが、当時は iPhone/iPadで使えなかったため残念だった思いがあります。最近では Appium、iOS-drive、Selendroid など、3rd Party のDriverが充実し、Webどころかアプリもテストできるそうです。これはいいことを聞いた!是非今度使ってみたい思います。

Seleniumを使ったからといって、テスト工数が0になるわけでなく、テストコードのメンテナンスは常に必要だし、IDEで自動生成できるとは言え実用的な物はやはり人手(職人)が作る必要がある。じゃあ、Seleniumを使って何がいいの?それは、これまでの「守りのテスト」から、絶えず素早くソフトウェアをリリースし続けるという「攻めのテスト」を実現させることです。 という下りはなかなか熱かったです。

JavaエンタープライズアーキテクチャにおけるHTML5

http://www.slideshare.net/yusuke/javahtml5
JJUGの鈴木さんの講演。てっきりJava8の話かと思ったらいい意味で予想を裏切り全然想定外のテーマでした。途中、タイトルから Java 抜けてるしww
大局的な話から個別詳細の話まで論理的に淀みなく終始安定しておられたのはさすが会長です。内容はもちろんのことプレゼンそのものにもいたく感動いたしました。これは資料を見ただけでは分からない。実際に聞いていてこそ伝わる物でしょうね、それだけでもこのカンファレンスへ来た甲斐がありました。
おまいらHTML5に夢見過ぎんなよ、業務はそこまで甘くねーぞ、というメッセージにがつんとやられ、とはいえそういう要望も増えているため、どういうところで適応できるのか、という非常にエンプラっぽい現実的なお話しで、はっとさせられるました。

世界のビールが飲める!懇親会

ドイツビールを中心にワールドインポートビアが沢山飲めるというすごく期待の懇親会!!実際すごく量も種類もあってビビりました。どうせ少ないんじゃないかと、なめてました。ごめんなさい^^;

f:id:dsuke:20140228181330j:plain
まず頂いたのは ドイツのピルスナー Kaiserdom。ドイツ南部バイエルン地方のバンベルクにある、1718年から続く由緒ある醸造所のビールです。ドイツビールらしい堅実な味。癖は無く、ビールらしさを感じる、私は好きな味です。

f:id:dsuke:20140228184428j:plain
続いては、ホフブロイ・オクトーバーフェストビア。本番ミュンヘンオクトーバーフェストでホフブロイ・ミュンヘン醸造所が出しているビールが期間限定で発売!お台場とか日比谷とかで何月かよく分からない時期にやってるのとは違いますね。こちらは、先ほどのビールよりもスッキリとして香りもやや華やかで飲みやすい。まさにお祭りで飲むのに最適なビールですね!

f:id:dsuke:20140228184747j:plain
3本目は、同じくホフブロイの黒ビール。ドゥンケル。「バイエルン国王のためのビール」醸造所として1589年に創設され、当時から醸造されている初めてのダークビール。伝統的なミュンヘンスタイルはバイエルンビールの原型。ほのかなキャラメル香、口当たりまろやかで味の切れが良く、ダークレッドブラウンが特徴。とのこと。ダークビールですが、苦みはそれほどなく、むしろまろやかで美味しい。これは好きな味です。3本目あたりに調度良いですね。

この後、白ビール、なんだか分からないビールなど、何本か頂きましたが、残念ながら写真と記憶はすでに失われてました。。。

何のレポートだかよく分からなくなってしまいましたが、このような素晴らしいカンファレンス(懇親会)を実現まで持っていかれたスタッフの皆様、並びにスポンサーの皆様 ありがとうございました!ごちそうさまでした!!

Sencha Touch と ExtJS

Sencha Advent Calendar 2013 7日目です。

最近、私が Sencha に詳しいと言うことで、とある仕事で Sencha を使うことになりました。しかし、Sencha でも ExtJS の方。私が得意なのは Touch なんだけど。。。最近の ExtJS は全く知らない(汗

とはいえ、ExtJS4 になって Ext.define とか MVC とか Sencha cmd とか似たような感じっぽい。というよりむしろ Touch の元になったものなので、何とかなるだろうと始めてみました。最初は使うコンポーネントが違うくらいだろうと思ったのですが、使い出していると意外と細かいところで違うものなんだなぁ、と気がつきました。

というわけで、今日のテーマは「ここが違うよ!ExtJS と Sencha Touch
Sencha Touch と ExtJS の両方をある程度知っている人にしか分からない、細かすぎて伝わらないネタです。

configが違う

Sencha Touchでは、Ext.define で渡すコンフィグオブジェクトに、config という名前のプロパティオブジェクトを付けると、それは特殊なconfigプロパティとして認識されます。例えば、config オブジェクトに name というプロパティをセットすると、自動的に updateName や applyName というメソッドが追加されます。それらをオーバーライドすることで、各プロパティをセットしたときのフックが定義できます。

ExtJSでも config は使えるのですが、各種コンポーネントがこの作りに対応していません。Touchのコンポーネントは基本的にこのconfigを使って作られているため、プロパティのフックが簡単に行えるのですが、ExtJSではできません。そのうち対応してくれると嬉しいなぁ。

コントローラーが違う

ExtJSも4からMVCアーキテクチャが導入され、Controllerクラスが使えます。ただし、これも Touch のController と少し違います。
ExtJSのControllerの定義は次のような感じ。

 Ext.define('MyApp.controller.Users', {
     extend: 'Ext.app.Controller',

     refs: [{
         ref: 'list',
         selector: 'grid'
     }],

     init: function() {
         this.control({
             'button': {
                 click: this.refreshGrid
             }
         });
     },

     refreshGrid: function() {
         this.getList().store.load();
     }
 });

対して、Touchのコントローラーはこんな感じ。

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            loginButton: {
                tap: 'doLogin'
            },
            'button[action=logout]': {
                tap: 'doLogout'
            }
        },

        refs: {
            loginButton: 'button[action=login]'
        }
    },

    doLogin: function() {
        //called whenever the Login button is tapped
    },

    doLogout: function() {
        //called whenever any Button with action=logout is tapped
    }
});


refs で コンポーネントをComponentQuery で指定するのはほとんど同じです。しかし、control定義が全然違う。少し驚きですね。また、ExtJS の control定義では、refs で定義した名前が使えない!!これにはやられました。Touchから入った人ははまるポイントではないでしょうか。(ってそんな人いるのか・・?)

bootloaderが違う

Sencha Cmdで、sencha generate app でアプリケーションを作るときに、sdkパスを Touch か ExtJSを切り替えるだけで、どっちのアプリケーションでも簡単に作れます。index.html も作ってくれるのですが、これが読み込む JS がまた違う。

Touch のほうは、microloader というのを読み込んで、それがアプリケーションを読み込んでくれます。この microloader を development か production を切り替えるだけで開発と本番を切り替えられます。次のような index.htmlが作られます。

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <style type="text/css">/* 略 */</style>
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

ExtJSは全然違います。次は ExtJS の index.html です。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
    <!-- <x-compile> -->
        <!-- <x-bootstrap> -->
            <link rel="stylesheet" href="bootstrap.css">
            <script src="ext/ext-dev.js"></script>
            <script src="bootstrap.js"></script>
        <!-- </x-bootstrap> -->
        <script src="app.js"></script>
    <!-- </x-compile> -->
</head>
<body></body>
</html>

bootstrap という 似たような物があるのですが、microloaderとはまた別の物。これが結構くせ者で、ビルドする度にパスが変わったりで慣れるまで苦労しました。実は ExtJS のテンプレートの方にも .sencha/app/microloader/ があります。これが使えるのか検証してないですが、使えるようになってくれると嬉しい。

まとめ

総じて、やはりTouchのほうが新しいため、アーキテクチャも洗練されているように感じます。もちろん ExtJS には便利で強力なコンポーネントが山ほどあるのが魅力ですが、既存のコンポーネントを新しくするのは影響も大きく大変なのでしょう。近い将来、どちらも同じように使えるようになることを期待しています。

以上、Sencha Touch から見た ExtJS の違いでした。

モバイルWebアプリのこれまでとこれから。

バタバタしていて遅れましたが、先日とあるセミナーでお話しさせて頂きました。

すみません、最初にお詫びします。「Sencha Touch VS jQuery Mobile」というタイトルですが、その内容は一部しか出てきません(--;
別件で調査していた内容を盛り込むでいくと、どんどんそっちが膨らみ、「モバイルWebアプリのこれまでとこれから」という壮大な内容になってしまいました。副題がメインを喰ってしまった!しかも、無駄に枚数膨らんで全部で186p!w

(主題の方を知りたい方は以前作ったスライドのほうをどうぞ)

スライドに盛り込めなかったフレームワークはまだまだ沢山あって、いつかまとめて書いてみたいです。

また、最後の BassS と Webサービスのリベンジ というところ、全く私の勝手な妄想ですが皆さんはどうお考えでしょうか??まだ全然詰め切れてないですが、もう少し考えてみるべき面白そうな議題と思っています。ぜひコメントなど頂けると嬉しいです!

ドコモゼミWebアプリラボ 結果発表

先月からちょこちょこアナウンスしていました、ドコミゼミ Webアプリラボ のWebアプリコンテンストの結果発表があり、ノミネートされたということで行ってきました。


結果は、、、、、

こちら! → http://d-webapp.jp/tb/index.html


最優秀賞は「インド式かけ算」!!
優秀賞には「The 雑草」が選ばれました。

我らが「かきまる」は佳作を頂きました。評価くださった皆様ありがとうございます。

開発者の皆さんは本当に真剣に作られていて、色々な想いが伝わってきました。

開発者のエピソード

最優秀賞のインド式を開発したのは、高校で数学を教えていたという元数学教師の60歳オーバーの方!デザイナの方とネット上でやりとりしながら作ったそうです。教師の経験を活かし子供でも分かりやすいように工夫した、計算方法を独自で編み出したと思ったらインド式だったw、などネタ満載でした。

優秀賞を受賞された「The 雑草」の開発者は、小さいお子さんがいらっしゃる女性でした。ご自身のお子さんもスマホを使うそうなのですが、スマホだけを触るのでは無く、外へ出て自然と一緒に遊んで欲しい、という想いで作られたそうです。母親の子を思う真摯な気持ちで作られたエピソードに感涙です。

審査発表会の後、懇親会で色々な方とお話しして大変刺激を受けました。皆さんの真摯な気持ちを見て、私たちに一番足りなかったのは真剣さだと痛感させられました。それでも佳作という賞を頂き、大変恐縮です。もちろん、不真面目に取り組んでいたわけでは無いですよ。それなりに真面目にやっていました。しかし他の皆さんの真摯さを見るとお恥ずかしい限りです。。

コンセプトが途中でずれていた。

反省点は諸々ありますが、一言で表すならばコンセプトが途中でずれてしまっていた、ということに尽きると思います。作っているうちに、モバイルWebのインターフェースを実験するような形になり、本来目指すべき子供と家族が一緒に楽しむ、というコンセプトが薄くなってしまいました。

そのため、何をするアプリなのか伝えることが弱くなり、スマホに絵を描くアプリだと思われてしまうことも。また、動物の名前もちょっと捻りすぎて子供には難しく、子供の興味を十分に引きつけられなかったこともあります。ネタの被せもちょっとやり過ぎたかな、と。。。

スマホだけに閉じたアプリではない、という狙いは良かったかと思うのですが、その魅力を十分に引き出せなかったのが残念です。

当たり前だけど一番重要なこと

面白いインターフェースや見た目のデザインも重要ですが、一番大事なことは、真剣に使う人の立場で考える、ということ。当たり前のことだけど、常にそのことを意識するのは案外難しい。つい誤魔化しそうになります。仕事ではもちろんそれを最優先に考えますが、特に今回ようなコンテストだと動きの方に注力しがちになります。そのあたりのことを審査員の方々はしっかりと見極めていたのだと感じました。

こういう企画に参加させていただき、大変勉強になりました。賞まで頂くことができ、本当にありがとうござました!!

f:id:dsuke:20130725183813j:plain

jQuery Mobile & Sencha Touch ハンズオンやりました

昨日、こちらのハンズオンイベントで講師させて頂きました。

AITC第2回勉強会「jQuery MobileとSencha TouchでWebアプリを作ってみよう!」~ 2大スマホ向けWebアプリフレームワークを使いながら比較 ~

猛暑の中、30名近い参加者にお越し頂き、ありがとうございました。

IT関連ではない会社や、マーケティング部などの非エンジニアの方々や、遠方よりこのために参加頂いた方々、学生さんなどなど、多種多様な方に参加頂きました。

資料のまとめは前回のエントリで。
jQuery Mobile & Sencha Touch ハンズオン資料まとめ

ある程度予想はしていましたが、やはり環境構築が鬼門でした。今回、node.js+express や、ruby + compass など非エンジニアの方には馴染みが無いツールを使う演習のため、本質的では無いところで時間がかかってしまったのがやや残念です。

とりあえず勉強会として、良かった点、改善すべき点などをまとめてみます。

良かった点

jQuery Mobile と Sencha Touch を同時に扱うというテーマはなかなか面白かった

同時に見比べられるので、非常に違いが分かりやすいと好評を得ました。1回で両方できるお得感はあったので申し込んだ、欲張りすぎるww などの声も頂きました。

実は、当初は3つにするとか、もっとオープンデータを使うだとか、かなり要望は膨らんでいましたw
なんとかコンパクトにして、あのボリュームでした^^;

どちらも一通りの流れを、順を追ってできた

段々機能を追加していき、完成度を高めていくようなサンプルが良かった、という声も。
当初は完成形だけ用意して、部分コピペで進めていこうかと思ったのですが、初心者が多そうだという事前情報から、前日に段階的にできるサンプルに作り替えました。進める側からも、これはやっておいて良かった。あの状況だと部分コピペで進めるのはかなり厳しかったでしょう。。。

コピペでもとりあえず手元で動かせた

なんとか全員環境を構築できたので、手元で動かせる環境が作れて良かったです。
とりあえずは演習資料をそのままコピーでも、動かせる環境が手に入った、というの大きかったのでは、と思います。これできたので、あとはサンプルをちょこちょこいじりながら自分で勉強することもできます。あと、エディタも今回初めて Sublime Text を使ってみたけど良かった、という方も。

反省・見直しが必要な点

環境構築はアナウンスとかやりかたをもっと考える必要あり

今回演習の中でそれぞれ環境準備を20〜30分ほど予定を入れていたのですが、全然足りませんでした。演習の中に、特に最初に入れてしまうと、全体の進行が止まってしまうため、あまりうまい方法ではなかったですね。

インストールできてない方は早めにきてセットアップしてもらうとか、出来ている人は演習を進められるような流れにすれば良かった、という反省があります。そうすれば、進められる人は自分でコードをカスタマイズしたりして理解をもっと深められたかなぁ、とも思いました。

また、事前インストールの件があまり告知しきれてなかった問題もあります。イベント告知や申込が色々と分散されたのも情報共有漏れが起きる原因の一端ですね。この辺りは運営側の事前準備不足でご迷惑をおかけしました。

全体的にやはり詰め込みすぎ

環境構築もさることながら、演習内容もかなり詰め込み過ぎた感はあります。特に後半は早すぎて理解が追いつかない、とか自分でコードを書く暇が無かった、ということに。もっと自由にコードを書いてもらう時間を作りたかったですね。。

2つ同時にやるというテーマ自体は評価されたのですが、ハンズオンとするとどこまで踏み込むか悩ましいところです。コピーしてなんとなく動いた、というだけじゃ面白くないですし、どこまで解説するか難しい。

Sencha Touchが難しい印象を与えてしまったかも。。

みんなに言われたのが、Sencha Touchが難しすぎる、と^^;;
これは私の伝え方が良くなかったです。すみません。。言い訳するとちょっと時間がなさ過ぎた。。。ま、参加者の半数くらいは聞いたことない、というので仕方ないところも。しかし、JavaScriptに馴染みが無い人に言われるのは仕方ないですが、JS書く人にも言われたのはややショック。Sencha Touchを簡単に教える方法教えてください・・・・

その他

・アンケート出し忘れた。。 参加者の方には後日Webアンケートの案内をお送りします。
・後半、自分がだいぶ息切れして、ちょっとテンション落ちてしまってた^^;
・教室の温度がちょっと暑かったかな

総評

反省すべき点も多々ありますが、一応予定していた内容を全て時間内に終わらせ、参加者の皆さんにも開発環境とコードというお土産を渡せることができたので、まずは良かったんじゃないでしょうか。
私自身も大変勉強になりました。
参加者の皆様、スタッフの皆様、長時間お付き合いいただき、ありがとうございました!お疲れ様でした!

このカリキュラムをもうちょっと改善して、またリベンジしたいですね!w

jQuery Mobile & Sencha Touch ハンズオン資料まとめ

いよいよ明日に迫ったAITC第2回勉強会「jQuery MobileとSencha TouchでWebアプリを作ってみよう!」

半日でどっちも触ってアプリ作るという無謀な企画です。なんとか資料作成間に合いました。
とりあえず Slideshare に上げたのですが、バラバラとなってしまったので、こちらでまとめます。


最初の資料


まずは jQuery Mobile概要から


jQuery Mobileのハンズオン資料

続いて、Sencha Touch概要


Sencha Touchハンズオン資料


まとめ


なお、サンプルコードはこちら。Sencha Touch を含んでいるためGPLとなってます。


全部合わせると、総ページ数 91枚とかなってた。。
どおりで終わらないわけだw

しかし、これどこまでできるのだろうか。。。
戦々恐々です。