Webエンジニア必見！AngularとTypeScriptが大規模開発の未来を変えるーng-japan 2015 佐川 夫美雄（Ashiras, inc.） この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第4回目）です。 はじめに 昨年秋に、Angular 2はAtScriptというaltJSで開発するといったアナウンスがありました。しかし、今年3/5に急遽、Angular 2はTypeScriptで開発するという変更がなされました。このニュースはGoogle社とMicrosoft社が手を結んだということでも大きなニュースになり、今年一番の出来事かもしれません。 そのTypeScriptとカレントバージョンであるAngular 1.3を利用した開発ポイントを、株式会社トップゲートのエンジニアであり、TypeScriptマスターでもあ

誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015 佐川 夫美雄（Ashiras, inc.） この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第2回目）です。 はじめに HTML5ハイブリッドアプリケーションとは、内部の実装にHTML5が利用されているモバイルアプリケーションです。アプリの内部実装にHTML5を使うことでクロスプラットフォーム対応が可能になりますが、その代わり問題となるのがUIとパフォーマンスです。このセッションでは、Angularの上に構築されたUIフレームワークであるOnsen UIを紹介しながら、Angularでどうすれば高速かつ快適なUIを持つモバイルアプリを作れるかについて話します。 AngularとOnsen UIで作る最高のHTML5ハイブリッドアプ

近年、ブラウザやブラウザランタイムは、PCやスマートフォンのみならず、テレビ、コンソールゲーム機などの組み込み機器にも導入されるようになりました。また、Raspberry Piに代表されるシングルボードコンピュータも流行り出し、ロースペックな環境で動作しなければならないWebアプリケーション開発の需要が高まろうとしています。 多くの組み込み機器に搭載されたブラウザは、近年よく使われるAPIやCSSをサポートしています。しかし、そのパフォーマンスはスマートフォンと比べて非常に貧弱です。スマートフォンでは当たり前のパフォーマンスが得られることはありません。 本記事では、組込機器のブラウザ事情を紹介し、その上で動作するWebアプリケーションの開発の課題、私の経験での苦労話、そして、それに立ち向かうためのTipsを紹介します。 組込機器とブラウザ 組込機器でWebアプリケーションを開発すると言われ

理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その2）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第3回目です。 vertical-alignごとのアイコンの揃え位置 前回に引き続き、vertical-alignの利用方法について解説していきます。今回はまず、文頭に置いたアイコン画像を、vertical-alignを用いて位置調節する方法から見ていきます。 以下の様なHTMLがあったとします。

我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM

理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その1）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第2回目です。 なぜ画像の下部にスペースができてしまうのか？ 今回の記事では、vertical-alignについて解説していきます。前回は、行のレイアウトが、font-sizeとline-heightによりどう変わるのかを見てきました。この行の中で、要素を縦位置のどこに配置するかを決定するのがvertical-alignです。これを理解すると、前回の疑問、「なぜ画像の下部にスペースができてしまうのか」が分かりま

理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚

今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R

キーワードは「CARE」！実践的なフロントエンドエンジニアを目指せ！─Frontrend Conference the Final基調講演レポート 白石 俊平（HTML5 Experts.jp編集長） この記事は、「Frontrend Conference The Final」の基調講演「Pragmatic Front-end Developer: From Artisan to Expert」についてのレポートです。 登壇されていたのはリッチメディアの斉藤祐也さん。HTML5 Experts.jpでも、No.10のエキスパートとして何度もご執筆いただいているので、ご存じの方も多いかと思います。 この講演タイトルは、アンドリュー・ハント氏の著作「The Pragmatic Programmer」をオマージュしたとのこと。「Pragmatic」というのは「実践的」という意味の単語で、フロント

HTML5ハイブリッドアプリの濃いネタ満載！第1回Cordova勉強会まとめ 田中 正裕（アシアル株式会社） 先週の11月5日、Apache Cordova勉強会の第1回が開催されました。HTML5ハイブリッドアプリについて、実際の開発者によるプレゼンテーションが行われました。今回は、参加できなかった方のために、その勉強会のまとめを紹介したいと思います。 Cordova勉強会とは？ まず始めに、そもそも勉強会の目的から。Apache Cordovaというのは、PhoneGapやMonacaといった製品に組み込まれている、HTML5ハイブリッドアプリを開発するためのオープンソースなフレームワークです。このCordovaの技術情報を共有するために、「日本Cordovaユーザー会」として、月に1度のペースで勉強会を開く活動を行っています。今回は、その第1回となります（第1回の案内はこちら）。 T

モダンなWebアプリケーションでは、JavaScriptコードの量は日に日に増しています。多くのコードが必要になる中で、それらすべてを一つのファイル内で開発することは不可能といってよいでしょう。 そこでTypeScriptを利用すれば、ファイルが分かれている状態でも型が解決できるようになっており、モジュールごとにファイルを分割した開発が可能になります。加えて、型定義ファイルを用意することで、既存のJavaScriptライブラリを改変することなく、そのまま利用することができます。 今回は、Modules/AsynchronousDefinition（AMD）、または、CommonJSの仕様に準拠したモジュール機構や、既存のJavaScriptライブラリの利用方法について紹介します。 環境構築連載第1回で紹介したSublimeText3用のプラグインは、現在のところ、ファイルを超えたインテリセ

AngularJSの機能や開発ライフサイクルなどがまとめられた「AngularJSリファレンス」という書籍がインプレス社から出版されました。これを記念し著者でもある、池添 明宏氏(著)/金井 健一氏(著)/吉田 徹生氏(著)/丸山 弘詩氏(編集)をお招きして「AngularJS」についてビール片手に軽く語っていただきました。 2014年9月18日（木）、場所はイベントの聖地21Cafeで開催されました。 AngularJS概要 AngularJSは主にGoogleメンバーが中心となり、開発を進めている今話題のJavaScriptフレームワークです。AngularJSはよく「フルスタックである」と言われていますが、それは同メンバーが中心に開発しているテストツールkarmaも含め展開しているため、開発ライフサイクルをも視野に入れたものだからです。また、ECMAScriptやWeb Compon

HTML5とかモバイルとかJSフレームワークとか、ぶっちゃけどうなの座談会 村地彰（株式会社シーピーエス） 最近のシステム開発の現場では、HTML5やモバイル、JSフレームワークなどの新しい道具が次々と登場してきます。「そうした新しい道具ってエンタープライズではどうなの？」「現場として受け入れられているの？」といったぶっちゃけトークを行う座談会が、8月11日に美人で有名なおだんみつさんのいる21cafeで開催されました。1時間半にわたる長時間のトークから特に盛り上がった話を紹介します。 ▲パネラーたち（左から株式会社クレスコ・小川充さん、グロースエクスパートナーズ株式会社・酒巻瑞穂さん、NTTコムウェア株式会社・川田寛さん） 日本のエンタープライズが抱える悩ましい問題とは 川田：世の中は技術革新で勉強会に行くとワクワクするんですが、でも皆さん本当に使ってますか？ 私はあるところで「勉強会で

エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方 酒巻瑞穂（html5jエンタープライズ部） 現在エンタープライズシステムの開発現場では、シングルページアプリケーション（SPA: 単一のWebページで構成されているWebアプリケーションのこと）アーキテクチャの採用が模索されるなど、根本的な開発パラダイムにおいて大きな変化が起きようとしています（全体的にどのような変化があるかはエキスパートNo59の佐川夫美雄さんの書かれた「JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例」によくまとまっています）。 こうした変化の一部を支えているのが、JavaScriptによるMVCフレームワークです。数あるフレームワークの中で、実際にどのフレームワークを採用するかというのは、開発コストだけではなく学習・運用コストにも関わる、非常に大きな

こんにちは、川田です。今日からHTML5 Experts.jpでは「エンタープライズ開発特集」を始めます。第一弾の今回は、HTML5とエンタープライズITについてのオーバービューを語ります。サーバサイドのお話はわりとよく見ますが、フロントエンドにフォーカスしているというのは珍しいようにも思えますね。 IT自体が幅広い分野のビジネスや製品に変わりつつある昨今、「エンタープライズITの話をするぞ！」と言うと、いろんな方面の人からこう問われます。 「そもそも、エンタープライズって何？」 エンタープライズ、正式には「エンタープライズシステム」になりますが、直訳すれば「企業向けシステム」。一言で言うなら「企業のビジネスを支えるための仕組み」を意味します。企業の業務の効率化を進めたり、経営戦略や問題解決を進めるためのワークプロセス(仕事の進め方)と道具(アプリやインフラ)のことです。 エンタープライズ

Class、Interface、Module-TypeScriptが提供する目玉機能を一挙紹介！ 谷口慈行（Microsoft Student Pa...） クラス・インターフェース・モジュールは大規模な開発を行う際の強力な味方であり、TypeScriptの重要な機能の一つです。連載第3回目となる今回は、オブジェクト指向に欠かせないクラスについて紹介します。 クラスJavaScriptはプロトタイプベースの言語であり、静的なクラスではありません。しかし、多くのライブラリにて静的なクラスを再現する機能が実装され、利用されています。TypeScriptでは、静的なクラスが使用でき、多くのクラスベースの言語と同様のノウハウや実装方法を利用できます。 クラスを定義するには、 classキーワードを使用します。 class Person { private name: string; constru

WebRTCの最新動向が満載！WebRTC Update（Google I/O 2014番外編） がねこまさし（インフォコム株式会社） Google I/Oの後で Google I/Oの後に、技術者が集結したサンフランシスコで様々なイベントが開催されたようです。WebRTC関連として、Kranky Geek WebRTC Event というものがあり、そこでGoogleからWebRTC Updateと題した発表がありました。今回はその50分のセッション映像から、ハイライトをご紹介します。 掴みはcardboard 最初の掴みは、DataChannelで制御できるローバー（自走車）です。キーノートで配布されたcardboardに装着したAndroidでローバーの首を振ってカメラの向きを制御できます。カメラの映像は当然WebRTCで伝達され、cardborad越しに見ることができます。(3分4

Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか

モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」 Tomomi Imura（Slack） 今回のGoogle I/OはAndroidに特化していた傾向が強く、WebテクノロジーやChromeの扱いが比較的小さかったせいもあり、多くのWebフロントエンドディベロッパーは不満を感じた部分もありました。 そこでその中の数少ないChromeのセッションの中から、私が興味深く感じたクロスデバイス開発にはこの先欠かせなくなると思われる Chrome DevToolsの新機能についてレポートします。 このセッションを行ったPaul Bakaus氏（以下、ポール氏）は、かつてjQuery UIやAvesゲームエンジンを開発したことでも知られています。一時期日本に在住していたこともあるので、この記事を読んでいる皆さんには既になじみのある方かもしれません。現在はGoogle

こんにちは、川田です。Googleはここ最近、デスクトップ向けWebに対して、ほとんどの関心を失っているように見えます。HTML5ブームも過ぎて、やることがなくなってしまったのでしょうか？……いえいえ、そうでもありません。昨今の待ったなしで進む技術革新の中で、彼らは「ある問題」と戦っているようです。 Webは「モバイル」中心の時代へ移っていく すでにご存知の方も多いと思いますが、GoogleのビジネスモデルはWebに強く依存しています。2014年1Qの決算で、Googleは全売上の約68%が自社のWeb系サービスの広告収入であり、約22%はAdsenseなどの他のWebサイト向けの広告であると報告しました。Webに依存したビジネスが実に9割を占め、1日に約120億円の収入をWebから得ています。もっと簡単に言えば、Webだけで、タイの国民全員の給料分ぐらい稼いじゃってます。当然、Webの進