2016年11月に2年ぶりのバージョンアップを果たしたHTMLの言語仕様。その目指すところと、HTML 5.1の新機能を幾つか見てみよう。 連載目次 2016年11月1日付けでW3CはHTML 5.1を勧告した。これは2014年10月28日付けで勧告されたHTML5をバージョンアップするものだ。本稿ではその主な追加機能などをざっくりと見ていくことにしよう（なお、本稿ではメジャーバージョンのみを付加する場合には「HTML5」と、マイナーバージョンを含める場合には「HTML 5.1」などと表記する。これはW3Cでの仕様における表記とも合致している）。 そもそもHTML5とは 新機能の話をする前に「HTML5とは」について少し考えておきたい。1つは誰が仕様を策定しているか。もう1つはHTML5の位置付けだ。 仕様を策定するのは誰？ 前者に関していえば、現在、HTMLはWHATWG（Web Hyp

アウトソーシングテクノロジーは2016年6月20日、「Drupal＆HTML5推進室」を設立したと発表した。エンタープライズ領域における情報系システム構築事業の推進を図るもので、DrupalとHTML5を中心に、WordPressなどの他のオープンソースソフトウェア（OSS）のCMS（Contents Management System：コンテンツ管理システム）も含めて対応技術を持つ企画開発エンジニアを組織化する。 最近では、Webサイトは多言語対応が求められ、その閲覧デバイスもスマートフォンやタブレット端末など、多様化している。さらに、Webサイトの情報発信基盤となるCMSも、クラウドサービスとの連携などを踏まえてシステムの構築の素早さも必要とされてきている。 アウトソーシングテクノロジーでは、こうしたニーズの全てに応えられるのがDrupalの最新版Drupal 8だとしている。Drup

リンクをクリックするだけでファイルをダウンロードできるようにするには、HTML5のdownload属性を使う方法とJavaScriptコードを使う方法がある。 連載目次 Webページで、エンドユーザーにファイルをダウンロードさせたいことがある。ZIPファイルなどはHTMLでリンクを記述すればよいのだが、テキストファイルやPDFファイルなどのリンクはダウンロードされずにWebブラウザで開いてしまう。何とかならないだろうか？ 本稿ではJavaScriptでファイルをダウンロードさせる方法を解説する。 HTML5のdownload属性 JavaScriptを書き始める前に、HTML5での解決策を紹介しておこう。 リンク（HTMLの<a>要素）には、HTML5でdownload属性が追加された。この属性に対応しているブラウザであれば、テキストファイルやPDFファイルなどでもリンクのクリックでファイ

今回の会議は、HTML5開発環境としてのVisual Studio（以下、VS）にフォーカスを当てたものとなった。VSでのWebアプリ開発におけるHTML5／JavaScriptの位置付けの変遷、Webアプリ開発ツールとしてのVS、VSでのマルチプラットフォームなアプリ開発、.NETとHTML5のいずれを選択すべきかなど、話題は多岐に及ぶものとなった。 基調講演『ASP.NETとNuGetでもう一回始める、今どきのWebアプリ開発』 技術セッション『Visual Studio 2013とHTML5で実現するマルチデバイス／マルチプラットフォームアプリの開発』 パネルディスカッション『これからVisual Studioエンジニアは、.NETとHTML5、どちらに賭けるべきなのか？』 基調講演と技術セッション、パネルディスカッションについてはUstream中継で配信されたアーカイブ動画を視聴・

Pick up the 9th-gen iPad with two years of AppleCare+ for only $298

“オフラインファースト”を実現する、ストレージ系APIライブラリ10選：UXClip（36）（1/3 ページ） 2012年末に“オフラインファースト”という言葉がジョー・ランバート氏のブログで取り上げられました。オフラインファーストを実現するための技術であるストレージ系APIを取り扱うライブラリについて、筆者が選んだ10個を紹介します。 はじめに 2012年末に“オフラインファースト”という言葉がジョー・ランバート氏のブログで取り上げられました。日本では「html5とか勉強会」において、白石俊平氏が取り上げたことはまだ記憶に新しいと思います（参考記事：オフラインWebの活路はモバイルアプリにある）。 オフラインファーストは、オフライン対応を仕様に組み込んだ上で、WebサイトやWebアプリケーションを作ろうという設計思想の1つです。代表的なところでは、グーグルが提供するGmailやGoogl

8月21～23日にパシフィコ横浜で開催された「CEDEC 2013」では、Webの世界に関するセッションも数多く行われた。本記事ではその中から、サイボウズ・ラボの竹迫良範氏による「HTML5のこれまでとこれから、最新技術の未来予測」と、セキュリティコミュニティでは大変著名なネットエージェント、長谷川陽介氏による「HTML5時代におけるセキュリティを意識した開発」の2つのセッションの様子をお送りしよう。 竹迫氏が「HTML」の周りの最新技術と、3つの未来予測を語る 未来予測その1：通信は暗号化が標準に――「スタバでドヤリング」から考える最新技術 竹迫氏はまず、スターバックスでスタイリッシュなMacBook Airをこれ見よがしに使う、「ドヤリング」という技術（？）について写真を出すところから講演を始めた。 実は、この「ドヤリング」、公衆無線LANを利用すると盗聴のリスクがあることが指摘されて

6つのモバイルOS向けにアプリを作るための基礎知識：HTML5で可能になった6OS対応時代のスマート開発（1）（1/2 ページ） 本連載では「第三極」モバイルOSの登場で新時代を迎えたアプリ開発市場においてAndroid、iOS、Windows ストア（Windows 8）、Windows Phone、Firefox OS、Tizenの6OS全方位対応をするための方法論や課題について解説していきます。初回はモバイルOSの現状とWebプラットフォームの概要、Webベースのモバイルアプリ開発の基礎知識について。 百花繚乱のモバイルOS新時代で全方位型アプリを開発するということ Firefox OSやTizenなど「第三極」と呼ばれる新しいモバイルOSを搭載したデバイスが発表され、世界中で注目を集めています（参考：スマホ開発者が知るべきTizenやFirefox OSの特徴～第35回 HTML5

NTTコミュニケーションズは、HTML5を中心とした最先端のWeb技術の普及促進を図る推進プロジェクト「NTTコミュニケーションズHTML5ラボ」を展開する。 NTTコミュニケーションズは7月10日、次世代Webブラウザの標準仕様である「HTML5」を活用したICTサービス開発を推進するプロジェクト「NTTコミュニケーションズHTML5ラボ」を展開すると発表した。同日に日本初というHTML5技術専門サイト「HTML5 Experts.jp」を開設している。 同社によると、このプロジェクトは、最先端のWeb技術の普及促進と、HTML5を活用した新たなICTサービス開発の推進が目的となる。専門サイト開設のほか、セミナーや勉強会などの各種イベントを通じてHTML5の啓発活動とWebサービス開発者の支援を行い、今後のICTサービスの新たな発展に貢献していくとしている。 「HTML5 Experts

作る側の都合でUI/UXを悪くしないための注意点まとめ：スマホ向けサイト制作で泣かないための秘伝ノウハウ（終）（1/2 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。最終回は、サイトに載せるべきコンテンツはどんなものが良いのか、2つのコンテンツ例レスポンシブWebデザインとユーザー体験の関係、技術／デザイン面で気を付けることなどを紹介します。 スマートフォン向けWebサイト構築の注意点総括 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「いまさら聞けないCSS3入門＆スマホ対応6つの問題点」では、スマートフォン向けWebサイト上でのCSS実装上の注意点と、機種依存事例を紹介しました。 今回は、K

いまさら聞けないCSS3入門＆スマホ対応6つの問題点：スマホ向けサイト制作で泣かないための秘伝ノウハウ（4）（1/2 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、CSS3になるまでの歴史、代表的な3つのCSS3モジュール、実装上の3つの注意点、OS／機種依存事例6選などを解説します。 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「JavaScriptのスマホ対応時に知らないと損する16のコト」では、スマートフォン向けWebサイトで利用されるJavaScriptの役割や代表的ライブラリ、実装上の注意点をご紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）」の開発・販売や

Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。 Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と

前回の「ユーザー評価が星3つ以下のモバイルアプリはすぐに忘れ去られる」に続き、「競争の激しいモバイル分野では“開発スピード”“品質”のどちらを重視すべきか」という難問の解決策を検討しよう。3人の専門家の回答を通じて分かったヒントは「HTLM5が状況を一変させる可能性を秘めている」「テストをおろそかにしてはならない」ということだ。 スピードと品質の要求に応える「HTML5」 米調査会社IDC Researchのアナリスト、ジョン・ジャクソン氏は「状況にもよるが、品質要求が優先される傾向にあるのは間違いない。ユーザーが顧客であれ社内の従業員であれ、彼らは既にモバイル環境でのコミュニケーションを経験しており、品質に対する要求は高い。これは将来的に、品質を重視する傾向を促進するだろう」と語る。 この問題に対する見方は2つある。競争が激しい状況において、最大のライバルが製品を投入する一方で、自社が油

このように@mediaを使用して出力先や解像度、サイズなどで条件分岐をしていき、必要のない要素を非表示にしたりして、見栄えを切り分けて製作していきます。 レスポンシブWebデザインのメリット・デメリット 前述のとおり、RWDでは同じCSSファイルで各デバイスのスタイルを共有します。そのため、共有しているスタイル変更の影響を受けやすく、制作をデスクトップとモバイルで分担している場合などは細かいレギュレーションを最初に決める必要があります。 とはいえ、モバイルとデスクトップをHTMLから切り分けた場合、完成後の更新の手間も二重にかかってしまいます。CSSで分岐して必要なプロパティのみ上書きしてデバイスに最適化するだけで同じ素材を共有できることは、サイト運営者にとって非常に魅力的です。 RWDのメリット デバイスごとに切り分けず1つのHTMLファイルで管理可能 スタイルを共有してテイストの統一性

Webブラウザに音声や画像、動画を表示する技術である「HTML5」。Adobe Flashとは異なりプラグインが不要なことから注目を集めている。だがセキュリティ専門家は「HTML5の存在が、ユーザー企業のセキュリティ担当者にとって新たな課題になりかねない」と警告する。 英Sophosの上級技術者であるジェームズ・リン氏は、「HTML5の急速な普及は、思わぬセキュリティ問題を招きかねない」と危惧する。適切にプログラムされていないHTML5のWebアプリケーションの場合、攻撃者によって重要データを不正に取得されかねないという。 HTML5関連記事 Windows 8搭載タブレットがiPadに対抗できない理由 HTML5を活用！　スマートフォンアプリ開発の最前線を見る（ホワイトペーパー）

人気の記事 1ソフトバンクの通信障害、「原因はソフトウェア証明書の期限切れ」--エリクソンが認める 2018年12月07日 2ソフトバンク、通信障害に伴う平成31年3月期の業績予想への影響 2018年12月07日 3ソフトバンクの通信障害、エリクソン製交換機が原因と公表--海外11カ国でも同様の障害 2018年12月07日 4スマホ決済「PayPay」をビックカメラで使ってみた--還元額や使い勝手は 2018年12月04日 5家じゅうで「Alexa」を使ってみて分かったこと--便利な点、不便な点、不気味な点 2018年01月15日 6パイオニア、投資ファンドBPEAの完全子会社へ--「パイオニア再生プラン」に合意 2018年12月07日 7グーグルの非正規社員ら、賃上げと正社員同等の福利厚生を要求 2018年12月06日 8DeNA、乗車料金が無料になる「0円タクシー」を発表--都内50台

レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応／変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基本的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。

新年、あけましておめでとうございます。 HTML5開発者コミュニティ、html5j.orgを運営している白石俊平です。 この記事では、「2013年、Webがこうなったら面白い」というテーマで、今年のWebがどう変わっていくか、予想めいたことを執筆する機会をいただきました。タイトルに「面白い」と含まれていることからもお分かりの通り、真剣に業界を予想してみるというものでもなく、少し力を抜いた雰囲気で、発展の著しいWebの未来をあれこれ述べてみたいと思います。どうか読者のみなさんも、リラックスしてお読みください。 とはいえ、現在のWebは広く深く、3次元的に発展している状況で、どのような切り口で述べるべきか悩みました。悩んだ挙句、ここでは以下の3つの切り口から見ていきたいと思います。 注目に値する最先端仕様 プラットフォームとしてのWeb Web制作・開発はどう変わるか 注目に値する最先端仕様