どう作る? Microsoft Edge に対応した相互運用性の高い Web コンテンツとは

Windows 10 が正式にリリースされて一カ月と少し経ちました。 私もふくめ Windows Insider Preview にご加入いただき、初期の Technical Preview からお使いの皆さんにとっては、まだそんなものか?、という感じかもしれません。 普及のスピードはどうかというと、本社の Windows and Devices Group の Vice President Yusuf Mehdi の 8 月 26 日の Tweet によれば、その時点で Windows 10 は 7,500万以上のデバイスで動作しているということのことでした。 公開 4 週間で 7,500 万台といういう数字は、控えめに言ってもけっして悪い数字ではないでしょう。少なくとも 3 年以内に 10 億代のデバイスで Windows 10 を動作させるという目標の 7.5% を一カ月足らずで達成したことなります。 この Windows 10 の普及のスピードは、Windows 10 の既定の Web ブラウザーである Edge…

0

Facebook や Twitter で紹介した、開発に役に立ちそうなリンク集(2015年 4 月~6月編)

Twitter(@osamum_MS) でシェアした開発に役立ちそうなリンクなどを毎月紹介する予定だったのですが、業務との兼ね合いなどから前回のまとめから 3 ヵ月も経ってしまいました。 昨今は、数年前とは比較にならないくらいに技術の刷新が早く、接する情報も増えておりますので私自身の忘備録も兼ねております。 皆様のお役に立てれば幸いでございます。   Web 制作全般 今すぐ Web 技術のスゴさを体験できる「神サイト7選」があまりにも楽し過ぎ! 「神サイト」って、大げさだなと思っていたのですが、実際にすごいのでぜひ見てみることをお勧めします。 Announcing Azure Media Player Azure Media Player。HTML5 のMSE/EME使ってて、それらが使用できないデバイスでは Flash or Sileverlight にフォールバックしてくれるらしいです。使い方も載っているので、配信な方はぜひお試しを。 Web パフォーマンス改善企画(解析編) 実際に動作しているサイトをパフォーマンス分析していていろいろ勉強になりますね。オススメ 2015年、Web 制作者が押さえておきたい CSS の各種リセット、 アニメーション、フレームワーク、アイコンのまとめ こういうのって日々革新されていきますからね。がんばって追いかけていきたいと思います。 知らなかったでは済まされない!Web に関連する法律まとめ Twitterも含めWebにテキストを出す人は見ておいたほうが良いと思う。たまに、そんなこと書いてだいじょうぶかよ?、ってのあるものね HTML5 を使ったシンプルな 2D ゲームの作り方(序) ゲームを作りながらHTML5の機能を紹介するハンズオンを、ブログを書くついでに作成しようかと。作成するゲームを実際に試せますよ。GW前にはこそこその量を完成させたいなー。 Build 2015 | Channel9 Tag: Web Platform Build2015で行われたWeb関連のセッションストリーミングはここで一覧が見れますよん。新しいブラウザからJavaScriptのチューニング、Cordovaを使ったクロスプラットフォーム開発まで幅広く網羅されてますね。 Web のパフォーマンスモデル「RAIL」とは何か? うふふ、なんだと思う? (勉強になった!) Web…

0

Buid2015 で発表された edge 以外の Web 技術について (2/2)

前回の記事に引き続き、6 月 13 日 (土) に行われた <htmlday> HTML5オールスターズ勉強会 で登壇させていただきました、セッション『Edge だけじゃない! build 2015 で発表されたそれ以外の Web 関連技術まとめ』の内容を紹介する記事になります。 Edge だけじゃない! build 2015 で発表された それ以外の Web 関連技術まとめ from Osamu Monoe 前回の記事では、米国のイベント build2015 の紹介と、同イベントで発表された Web 関連を除いた注目技術について紹介しました。今回は、ようやく「Web ブラウザー以外の」Web に関連する技術について紹介します。 具体的には以下のものを紹介します。 Visual Studio Code Vorlon.js Hosted Web Apps manifoldJS   Visual Studio Code Visual Studio Code は、新しいコードエディタです。コードエディタとは、文字通りプログラムコードをコーディングするためのエディターツールです。 マイクロソフトの製品といえば、インストール対象となる OS が、いままでほとんどのものが Windows であることが前提となっていましたが、Visual…

0

HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編)

前回の記事で書いたとおり、昨年末に shcoo (スクー) さんの授業に出演したさいにデモに使用したコードをもとに、HTML5 を使用したシンプルな 2D ゲームの作成方法について紹介していきます。 実際にどのようなゲームを作るのか、は以下の記事で紹介していますのでぜひご覧ください。実際に動かして遊べますよ。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序)   コーディングに使用する環境 今回はから実際にコードの記述を開始します。作業は Visual Studio 2013 で行うことを前提としていますので、以下の記事を参考に Visual Studio 2013 をセットアップしておいてください。 Web 製作者のための Visual Studio Community 2013 インストールガイド   Mac をお使いの方 また、Visual 以下を参考に Mac 上に Windows 環境を構築することができます。 Mac への Windows および開発者ツールのインストール 上記の手順では Windows OS のインストールイメージが必要になりますが、以下から Windows 8.1 の評価版が Windows 8.1 Enterprise 評価版のダウンロード…

0

Facebook や Twitter で紹介した、開発に役に立ちそうなリンク集(2015年 1 月~3月編)

Facebook や Twitter(@osamum_MS) でシェアした開発に役立ちそうなリンクなどを毎月紹介する予定だったのですが、業務との兼ね合いなどから前回のまとめから 3 ヵ月も経ってしまいました。 昨今は、数年前とは比較にならないくらいに技術の刷新が早く、接する情報も増えておりますので私自身の忘備録も兼ねております。 皆様のお役に立てれば幸いでございます。   Web 制作全版 ウェブ・コンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0   最近、「アクセシビリティ」という言葉をちらほら眼にするようになったので、こういうものがあるということだけでも覚えておくといいかも。 History of the user-agent string   ほうほう、これはまた資料性がありそう。 今どきの Web サイト制作が楽になる! すごい無料 HTML テンプレート素材 25 個まとめ   JavaScript のフレームワークとか CSS のフレームワークがアツいけど HTML のテンプレートってあんまり聞かないけどどうなんだろう? いま Web サイトを作るときにおさえておきたい10のこと(2015年版)   いままで internet Explorer 向けに Web を作ってたのに突然 Web 標準とかクロスブラウザとか言われても困る、そんな人たちのために心を込めて書きました。溢れるテキストと愛を君に。 Web制作者はチェックしておきたい、 面白いアイデアを使った最近のWebサイトのまとめ -2015年2月   アイディアだけでも参考になりますね。それにしてもコスリさんって毎度おもしろいネタ見つけてくるよなー。すごいなー。…

0

いま Web サイトを作るときにおさえておきたい10のこと(2015年版)

Internet Explorer は、バージョン 9 から Web 標準準拠へと舵を向けました。 Internet Explorer 9、Internet Explorer 10 と、2 つのバージョンを経て、最新の Internet Explorer では、他のモダンブラウザと比較しても顕色のない Web 標準ブラウザーとなっています。 そのため、それまでの長い間 Internet Explorer で Web システムを作成してきた企業のお客様にも、これから Web システム作成される際には、 Web 標準に準拠するようにお願いするわけですが、多くのお客様から「それってどうやんの?」というご質問をいただきます。 W3C と ECMA の仕様に合致したマークアップとコードを書くだけであれば、バリデーションツールを使って検証しながらそれらを記述していけば良いのですが、ご存じのとおりそれだけでは実際の使用に耐えるものはまず出来上りません。 上記の点を鑑み、今回は、Web 標準に準拠し、かつ複数のモダンブラウザと互換が取れ、モバイルデバイスにも対応した Web ページをどのように作成していくか、最低限おさえておきたい件について 10 のポイントにまとめてみました。 「はじめて作る人にもわかるように」ということで、なかり初歩的で当たり前なものも含めているので、本職の人は おさらいと思ってご覧いただければと思います。   そのまえに : クロスブラウザー、スマートフォン対応の Web サイトを、低コストでもっとも簡単に実現する方法   Web 標準準拠はともかくとして、各 Web ブラウザーとの互換がとれ、スマートフォンにも対応した Web サイトを手っ取り早く作るには CMS…

1

初心者歓迎! Visual Studio 2013 によるフロントエンド Web 開発チュートリアル

「Visual Studio での Web 開発 は ASP.NET の開発を意味しておりフロントエンド Web の開発はできない」、―と、思われがちですが、そんなことはありません。完全にクライアントサイドに閉じたフロントエンド Web の開発を Visual Studio を使用して行うことができます。 今回は、Visual Studio 2013 を使用して、どのようにフロントエンド Web の開発を開始するかについて紹介します。   Visual Studio 2013 とは? Visual Studio はマイクロソフトの提供する開発製品スイートです。スイートとは、複数の製品をまとめたものであり、Visual Studio は Visual C++、C#、VB.NET、Visual Web Developer、その他で構成されています。わかりやすくいうと、開発製品版のマイクロソフト Office のようなものです。 Visual Studio は、Windows プラットフォーム用のプログラムであればデスクトップ用はもちろん、ハードウェアと密接な関係するデバイスドライバーや、POS や、カーナビゲーションシステムといった、組込み用 Windows 上で動作するアプリケーションから Web ブラウザーで動作する Web アプリケーションまで開発することができます。Visual Studio 2013 Update 2 からは、Android、iOS の用のアプリも開発ができるようになっています。 Visual…

0

Facebook や Twitter で紹介した、開発に役に立ちそうなリンク集(2014年 12 月編)

Facebook や Twitter(@osamum_MS) でシェアした開発に役立ちそうなリンクなどを毎月紹介します。 昨今は、数年前とは比較にならないくらいに技術の刷新が早く、接する情報も増えておりますので私自身の忘備録も兼ねております。 皆様のお役に立てれば幸いでございます。   Internet Explorer 関連 Announcing the redesigned F12 developer tools interface http://blogs.msdn.com/b/ie/archive/2014/12/09/announcing-the-redesigned-f12-developer-tools-interface.aspx 先日のアップデートで更新された Internet Explorer F12 開発者ツールの変更点、本家IEブログに記事が載ってマス。   JavaScript 関連 Get WinJS http://try.buildwinjs.com/?utm_content=bufferb4bbc&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer#get WinJS が NuGet から入手できるようになりましたよ。 AngularJSTodo Sample for Tools for Apache Cordova https://code.msdn.microsoft.com/AngularJS-TODO-Sample-for-b651512a/ WinJSTodo Sample for Tools for Apache Cordova https://code.msdn.microsoft.com/WinJS-TODO-Sample-for-17295485 BackboneJSTodo Sample for Tools for Apache…

0

Web 製作者のための Visual Studio Community 2013 インストールガイド

先月 (2014 年 11 月) 行われたマイクロソフトの開発者向けイベント Connect(); で発表があったとおり、有償製品である Visual Studio Professional と同等の機能をもった無償(※)の Visual Studio Community 2013 が即日公開されました。 (※)企業での使用は制限付きとなります。詳しくは以下のページの「Visual Studio Community FAQ」の項をご参照ください。 http://www.microsoft.com/ja-jp/dev/products/community.aspx 開発製品スイートである Visual Studio は、サーバーサイドを含めた強力な Web 開発の機能を持っており、それら機能を提供するツールは、純粋な Web のフロントエンド開発にも利用することができます。 今回の記事では、Visual Studio Community 2013 の入手とインストール方法、Web 製作の役に立つプラグインについて紹介します。 Visual Studio Community は、以前からある Express とは異なり、さまざまな制限が解除されているため HTML + JavaScript を使用する開発者の可能性を Web ブラウザーの外へと押し広げてくれることでしょう。   これまでの無償版 Express との違い Visual Studio の無償のエディションとしては、以前から…

1

エクステンションによる VisualStudio 2012 入力支援機能の強化

Windows ストア アプリの開発は HTML + JavaScript でも行えるため、これまで Visual Studio を使ったことがない、という開発者の方も多いでしょう。 そういった方々のために Visual Studio の機能概要についてしばらく紹介していきます。 ここまでの記事は以下になりますので、これから Visual Studio を使ってみようか、という方はぜひ以下の記事もご覧ください。 Visual Sudio 2012 の基本的な HTML + JavaScript の入力支援機能 Visual Sudio 2012 の Windows ストア アプリと Web コンテンツの基本的なデバッグ機能 Visual Studio 2012 から新しく追加された HTML + JavaScript 入力支援機能   前回は、Visual Studio 2012 から新しく追加された HTML + JavaScript の入力支援機能について紹介しました。 今回は、Visual Studio 2012…

0