Help us understand the problem. What is going on with this article?

MonacaクラウドIDEを(勝手に)デスクトップアプリにしてみた

More than 1 year has passed since last update.

はじめに

(内容薄くてすみません!)

Monacaを開発するのにとっても重宝する、MonacaクラウドIDE。皆さん使っていますでしょうか?
MonacaIDE

でも、これってブラウザで開くため、IDEを開いているのを忘れて、うっかり別のタブでググってたりした後ブラウザを閉じてしまい、「あっ。。!」ってなること、ありませんか?
私はよくありますw

最近はなんでもかんでもブラウザでWebアプリなパターンが増えてきましたね。
中にはデスクトップ版も提供しているサービスもありますが、残念ながらMonacaクラウドIDEは提供されていないようです。

では、デスクトップ版を提供しているWebサービスは、ネイティブでアプリを作っているのかというと、どうもElectronを使ってWebアプリをデスクトップアプリにパッケージングしているパターンが多いようです。

ならば!ということで、MonacaクラウドIDEもデスクトップ版にパッケージングして、ブラウザから切り離して使えるようにしてみちゃいましょう!

nativefier を使う

ElectronはNode.jsをベースとしており、Chromiumエンジン上で動くWebアプリをウィンドウに表示するフレームワークです。
一から作ってもよいのですが、特にネイティブ機能と連携するような追加機能を作るわけではありませんので、今回は特定のURLを表示するだけのElectronのWebViewを構築してくれるnativefierを使ってみます。

nodeパッケージのインストール

下記のコマンドでnativefierをインストールします。

npm install nativefier -g

アイコンを入手する

以下のURLからfaviconをゲットしておきましょう!
https://ja.monaca.io/img/favicon.ico

nativefier で MonacaクラウドIDE をデスクトップアプリ化する

下記のコマンドを実行するだけです!

nativefier --name "Monaca IDE" --app-copyright "Asial Corporation" --icon favicon.ico "https://monaca.mobi/ja/dashboard"

こんな感じでファイルが出来上がりました。
キャプチャ.PNG

起動する

EXEファイルを実行してみます。
キャプチャ.PNG

お、きれいに表示されますね!
ログインしてみます。

キャプチャ.PNG

いい感じです!
・・若干インデントの線がずれている気がしますが気にしない!

まとめ

ブラウザで開くWebアプリと、普通のブラウジングが同じウィンドウに表示されていると、あれどのタブだったかなと、手間取ることもしばしばです。
デスクトップアプリにしておけば、タスクバーやAlt+Tabで切り替えることができるため、普通のアプリ感覚で使えるようになるので、是非チャレンジしてみてください。

そのうち、アシアルさんの中の人にもそれとなしに、「提供したら?」と伝えてみますw

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした