MacでもLinuxでも使える! 無償の Visual Studio Code を使用した Cordova 開発

Windows はもちろん、Mac や Linux でも動作する無償のコードエディタ Visual Studio Code に Apache Cordova アプリの開発を支援するための拡張 Cordova Tools Extension が公開されました。 <参照> Visual Studio Marketplace – Cordova Tools Extension Apache Cordova development lands on Visual Studio Code GitHub – Microsoft/vscode-cordova Visual Studio Code に Cordova Tools Extention をインストールすることにより、Visual Studio Code を使用して、Cordova アプリのプロジェクトを効率よく編集、デバッグできるようになります。 現状、提供される機能はおおまかに以下のとおりです。 Cordova プロジェクトのコンパイル エミュレーター/シミュレーターによるデバッグ実行 プラグイン API 記述時の入力補完機能 ここまでの機能を見ると、あたかも…

0

どう作る? 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

HTML5 を使ったシンプルな 2 D ゲームの作り方(スプライトを使った画像の切り替え)

前回に引き続き HTML5 を使用したシンプルな 2D ゲームの作り方の第 9  回めをお送りします。 どんなゲームを作るのかは 1 回目の記事の中に実際に動作するゲームが埋め込んであるのでぜひ遊んでみてください。なお、開発に必要な画像データは 2 回目の記事からダウンロードできますので、実際にゲーム開発を体験したい方はそちらから入手してください。 HTML5 を使ったシンプルな 2 D ゲームの作り方(序) HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編) HTML5 を使ったシンプルな 2 D ゲームの作り方 (画像のロード) HTML5 を使ったシンプルな 2 D ゲームの作り方 (アニメーションの実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (矢印キーとタッチによる制御の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (当たり判定の実装) HTML5 を使ったシンプルな 2 D ゲームの作り方 (複数のSpriteの生成) HTML5 を使ったシンプルな 2…

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

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

「HTML5 を使ったシンプルなゲームの作り方」を、紹介している途中ではありますが、6 月 13 日 (土) に行われた <htmlday> で登壇した内容をせっかくなので書いておきます。 ちなみに <htmlday>とは、日本全国でWebに関する多数のイベントを同じ日に開催することで、日本のWebを一層盛り上げようという「お祭り」で、今年もたくさんのイベントが開催されました。私はなぜか 3 つのイベントで以下の 3 セッションに登壇しました。 Build Insider OFFLINE 第3回 ― Microsoft Edge スペシャル : 『for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI 』 HTML5オールスターズ勉強会 : 『Edge だけじゃない! build 2015 で発表されたそれ以外の Web 関連技術まとめ』 第58回 HTML5とか勉強会 ーHTML5最新情報@Google I/O, de:code 2015 : 『Windows 10 のあたらしい Web ブラウザーについて』 その中から、HTML5オールスターズ勉強会 : 『Edge…

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