SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

さらに使いやすく便利になった「Visual Studio」を始めよう!(AD)

Visual Studio“だけ”でiOSとAndroidアプリが作れる「Monaca for Visual Studio」

さらに使いやすく便利になった「Visual Studio」を始めよう! 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

Monaca for Visual Studioのインストール

 Monaca for Visual Studioは拡張機能として提供されており、Visual Studioギャラリーからインストールすることができます。Visual Studioのメニューより「ツール」→「拡張機能と更新プログラム」を選択します(図2)。

図2:「拡張機能と更新プログラム」起動メニュー
図2:「拡張機能と更新プログラム」起動メニュー

 「拡張機能と更新プログラム」ダイアログが表示されたら、左のペインから「オンライン」を選択します。次に、右上にある検索ボックスに「Monaca」と入力して検索し、Monaca for Visual Studioを表示します(図3)。

図3:「Monaca for Visual Studio」の検索結果
図3:「Monaca for Visual Studio」の検索結果

 マウスでクリックして選択し、「ダウンロード」ボタンをクリックします(図4)。

図4:「Monaca for Visual Studio」のダウンロード
図4:「Monaca for Visual Studio」のダウンロード

 ライセンスに同意し、「インストール」ボタンをクリックすることで、拡張機能がインストールされます。

 インストールが完了したら、Visual Studioを再起動する必要があります。下側に表示される「今すぐ再起動」をクリックし、Visual Studioを再起動してください。起動後、Visual Studioのメニューに「MONACA」が追加されていたら、Monaca for Visual Studioのインストールは成功です(図5)。

図5:「MONACA」メニューが追加された
図5:「MONACA」メニューが追加された

Monacaの会員登録

 次に、Monacaのサービスに登録し、Monacaデバッガーをインストールしていきましょう。

 まずは、MonacaのWebサイトにアクセスします。右上の「サインアップ」をクリックして、会員登録を行います。

 なおMonacaは無料で利用できるサービスとなっていますが、作成できるアプリ(プロジェクト)数が3つまでという制限があります。また、無料プランでは、Visual StudioのCommunityエディションでの利用に限られますので注意してください。

 Monacaの登録が完了すると、ダッシュボードが表示されます(図6)。ここでは、プロジェクトの作成や削除、アーカイブといった処理が行えます。会員登録を完了した時点で「Hello Worldアプリ」というプロジェクトがすでにクラウド上に作成された状態です。

図6:Monacaのダッシュボード
図6:Monacaのダッシュボード

 まずは、このHello Worldアプリを実機で実行してみましょう。

Monacaデバッガーの実行

 実機での動作には、Monacaデバッガーというアプリが必要です。Monacaデバッガーのインストールには、iOSやAndroidのアプリストアからダウンロードするのが手っ取り早いでしょう。

 iOSであれば「App Store」、Androidであれば「Playストア」を起動し、「Monaca」で検索します。Monacaデバッガーをインストールしてください(図7)。

図7:Monacaデバッガーをインストール
図7:Monacaデバッガーをインストール

 Monacaデバッガーを起動すると、ログイン画面が表示されます。先ほど作成したメールアドレスとパスワードを入力し、ログインしてください。デバッガーでログインが成功すると、先ほどのダッシュボードと同じように、プロジェクトの一覧が表示されます(図8)。

図8:Monacaデバッガーのプロジェクト一覧
図8:Monacaデバッガーのプロジェクト一覧

 「Hello Worldアプリ」をタップすると、デバッガーはプロジェクトの内容をクラウドからダウンロードし、実行します(図9)。

図9:デバッガーで実行した
図9:デバッガーで実行した

 このように、Monacaを使うと、とても簡単にアプリを実機上で動かすことができます。それでは、いよいよVisual Studioを使って、開発やデバッグ方法を見ていきます。

次のページ
Visual Studioでのプロジェクト作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
さらに使いやすく便利になった「Visual Studio」を始めよう!連載記事一覧

もっと読む

この記事の著者

田中 正裕(アシアル株式会社)(タナカ マサヒロ)

アシアル株式会社 代表取締役社長。ユーザーインタフェース設計からインフラストラクチャー構築まで、最先端の技術を駆使したシステム構築を手がける。特にPHPをはじめとするOSSや、HTML5やJavaScriptといったオープンなアーキテクチャーを用いたシステムの構築に尽力している。モバイルアプリ開発...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8471 2015/02/18 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング