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

Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。 動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し

Visual Studio 2013 を使った楽ちんCordovaプログラミング 物江 修（日本マイクロソフト株式会社 Webエバン...） Visual Studioの開発機能は、これまでWindowsプラットフォーム向けのものでしたが、Visial Studio 2013 Update 2からは、Multi-Device Hybrid Appsというアドインをインストールすることにより Apache CORDOVA を使用したAndroid、iOS用アプリを開発することができます。 今回はVisual Studio 2013 Update 2用のアドイン Multi-Device Hybrid Appsについて紹介します。 (Multi-Device Hybrid Appsの構成) Multi-Device Hybrid Appsとは Multi-Device Hybrid Appsは

キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！ 金井 健一（フリーランス） ionic 概要 ionicはそのサイトのデザインからも見てわかるとおり、シンプルかつ美しいUIを取り揃えたコンポーネント群で、Apache Cordova を拡張して作られているフレームワークです。 また、動的なUIコンポーネントを実装するために、 AngularJS を採用してる点もその特徴の1つです。 ionicがサポートしているプラットフォームは、iOS 6+とAndroid 4+です。（ただしAndroidについては、2.3+でもいくつかの機能を提供してるとのこと） 現状ではこの2つのプラットフォームのみですが、Windows PhoneとFirefoxOSについても今後対応を進めていくようです。 特徴 Apache Cordovaを拡張して作られている、モバ

ここ数年、従来のJavaやObjective-Cでのモバイルアプリ開発以外に、HTML5を使ってモバイルアプリを開発する手法、HTML5ハイブリッドアプリ開発が注目を浴びています。この記事では、第48回HTML5とか勉強会（ハイブリッドアプリ開発最新動向）で発表した「はやわかりHTML5ハイブリッドアプリ開発事情」での内容を解説することで、HTML5モバイルアプリについての基本的な知識を簡単に紹介します。 HTML5ハイブリッドアプリとは? それでは、まずHTML5ハイブリッドアプリの構造についてご紹介します。ハイブリッドアプリではアプリの画面としてWebViewというネイティブのコンポーネントを使います。このWebViewの中でHTMLの画面を表示するモバイルアプリがハイブリッドアプリです。図で表現すると、以下の画像でハイブリッドアプリの構造を表現することができます。 なぜハイブリッドア

WebGLを活用した3D Web ゲーム『翠星のガルガンティア～キミと届けるメッセージ～』 春日井 良隆（日本マイクロソフト株式会社 プロダクトマ...） Production I.Gと日本マイクロソフトのコラボレーションによる3D Webゲーム『翠星のガルガンティア　～キミと届けるメッセージ～』が、Internet Explorerのデモサイト「Rethink」シリーズの日本発コンテンツとして、6月18日に公開されました。 このゲームはアニメ『翠星のガルガンティア』から生まれたスカイアクションゲームで、この作品のためにシナリオを書き下ろし、アニメ本編の声優はフルボイスで出演、そして世界中のファンが楽しめるように、日本語と英語のキャプションを用意するなど、ゲームそのものに気合いが入っているだけでなく、開発者向けにはソースコードの一部と3Dモデルを公開し、WebGLの裾野を広げることも目的に

HTML5でネイティブアプリを作ろう！「Windowsストアアプリ」開発入門 物江 修（日本マイクロソフト株式会社 Webエバン...） これまでのHTMLはオンライン上のドキュメントを記述する目的に設計され、発展してきましたが、HTML5ではそれに加え、アプリケーションのプラットフォームとしての仕様も盛り込まれています。 HTML5のマークアップや API、CSS3、SVGなどの関連技術を使用すれば、Webブラウザの独自の拡張機能に頼らずとも、Web標準から外れることなく、高機能なWebアプリケーションを開発することができるようになりました。また、HTML5とその関連技術が提供するさまざまな標準化された仕様は、Webブラウザ内で動作するコンテンツにとどまらず、クロスプラットフォーム開発が必要とされるネイティブアプリの開発でも使用されるようになっています。 こういったクロスプラットフォーム

自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $

車載もHTML5の時代！車載機器とWeb技術の融合に関する動きをウォッチする 堀裕司 昨今、コネクティッド・カーやスマートカーと言った、キーワードが注目されてきており、車載機器をインターネットに接続し、スマートフォンやタブレットなどのデバイスと連携する車が増えてきました。 特に最近では、自動車のAndroid化を目指す団体Open Automotive Allianceが発足。車載機器とWeb技術、IT技術の融合に関する動きが活発化して、注目度も上がってきています。 html5j自動車部とは html5j自動車部では、このような車載機器とWeb技術の融合に関する様々な動きを追いかけ、ウォッチすると共に、 車載機器に関するプロダクトの最新情報の発信、Webエンジニアと車載機器等の組み込み系エンジニアの方々との技術交流の促進に取り組んでいます。(html5j 自動車部始動！) ※本稿は2014

初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま

HTML5 Experts.jp編集部より感謝を込めて！「2013年の読まれた記事ランキング」年間TOP20 馬場 美由紀（HTML5 Experts.jp編集部） 7月10日に開設した日本初のHTML5技術専門サイト「HTML5 Experts.jp」。2013年は数々のHTML5を中心とした最新技術の動向や活用方法の解説、Web業界の著名人のインタビュー、事例やイベントレポートをお届けしてきました。今年最後のレポートは「記事公開後1週間の閲覧数（PV)」をもとに、2013年人気記事ランキング年間TOP20をお届けします！ ＜1位＞ iOS7におけるMobile Safariの主な変更点 ──白石 俊平（HTML5 Experts.jp編集長） iOS 7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）のブログから、Web制作者／開発

前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-rootと新しいデータタイプ「マップ」について解説しました。 最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。 新しく追加された関数 文字列用の関数 リスト用の関数 call() unique-id() 変数、ミックスイン、関数の存在を調べる関数 inspect() 変更点 リスト関連 @each if() @extend !globalフラグ ※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。 文字列用の関数 新たに追加された文字列用の関数は6つあります。 str-length($string) str-insert($string, $insert,

「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート 出口 達也 2013年11月30日（土）に開催された「HTML5 Conference 2013」の、株式会社サイバーエージェント・石本光司さんによるセッション「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」の内容をご紹介します。 なお、セッションのターゲットはGruntを使ったことのないHTML/CSSコーダーやWebデザイナーさんです。 なぜGruntを使うのか Gruntとは、JavaScriptで書いたタスクを実行してくれるアプリケーション（JavaScript Task Runner）です。 Webアプリケーションの開発が複雑になってきて、CoffeeScript、Sassなどのコンパイルが必要な技術を使うことが多くなってきた

前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。 マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。 マップとは マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。 マップの書き方ですが、名前と値をコロン（:）で区切り、複数記述する場合はカンマ（,）で区切り、それらを丸括弧（()）で囲みます。CSSのスタイルの書き方とちょっと似ていますね。 // マップ $map: ( key1: value1, // key1にvalue1を設定 key2: value2, key3: value3, ); // CSSのスタイル selector { pro

マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初

JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄（Ashiras, inc.） フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明