シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Googleドライブ上に「Web開発環境」を構築できる「Editey」は、ホスティングも無料!
注目記事ピックアップ
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
share0
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
share0
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
share0
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
share0
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
プログラミング
2014/09/12 22:30

Googleドライブ上に「Web開発環境」を構築できる「Editey」は、ホスティングも無料!


どうも、まさとらん(@0310lan)です!

みなさんは、「Googleドライブ」を活用されているでしょうか?

GメールやGoogleマップのように無料で利用できて、文書や表計算・プレゼン資料などをクラウド上で作ったりできる便利なツールです。

そこで今回は、そんなGoogleドライブのメリットを活かしつつ、そのまま「Web開発環境」に激変させてしまう事ができるサービスが注目されているのでご紹介しようと思います。

それが、「Editey」です!


 

 

どんなサービスなの?
早速ですが、Googleドライブに「開発環境」を作ってみましょう!

「Editey」のトップページ上部にある「Login with your Google Account」ボタンをクリックします。


そして、自分のGoogleアカウントと連携します。

以上です!

 

簡単ですよね…。(開発環境はすでに構築されています)

連携に成功すると、人気の「Bootstrap3」や「ポートフォリオ」、Webアプリを作れる「Angular JS」など、多数のテンプレートが表示されるので、試しに1つクリックしてみます。


クリックするのは「CLONE」と書かれた赤いボタンです。

 

すると、開発用のコードエディタが自分のGoogleドライブ上で起動します。


あとは、通常通りこのエディタを使って、HTML/CSS/JavaScriptなどを書いていくだけです!

右側にはサイトの「プレビュー表示」ができるようになっているので、視覚的にもどんなモノが作られているのか把握しやすいですよね。

 

そして、サイトを作り込んだら「File」メニューから「Publish on Google Drive」をクリックします。


ポップアップ画面が表示されるので、同じく「Publish on Google Drive」ボタンをクリック!

 

そして、表示されたURLをクリックすると…


 

なんと、今作ったサイトが世界中に一般公開されているのです!


実は、Googleドライブが「ホスティングサーバー」の代わりをしてくれて、作ったサイトやアプリをそのまま公開できるようにしてくれるのが「Editey」の面白いところなんです!

(ちなみに、Google Appsユーザーであればカスタムドメインも可能です)

 

 
まだある、こんな機能の数々!
「Editey」のメイン機能であるコードエディタに関しては、意外と丁寧に作られています。

例えば、

HTMLファイルの作成で、「!」を入力後に「TAB」キーを叩くだけで、初期のひな形を自動的に生成してくれます。


さらに「Zen Coding」も使えるので、「ol>li*3」や「p.name-$*3」のような書き方をしてから、「TAB」キーを叩けば作業効率もかなり早くなるはず!

 

CSSファイルの編集時に「TAB」キーを叩くと、面倒なベンダープレフィックスが自動付与されます!


 

さらに、JavaScriptで「TAB」キーを叩くと、コードを補完してくれます。


他にも、矩形選択ができたり、複数カーソルにも対応しているので、同じような箇所を修正するのも素早く作業できます。

 

ちなみに、「Editey」には保存ボタンがありません。

このあたりはGoogleドライブと同じで、何かを入力したタイミングで自動的に保存されるようになっています。

そのため、保存履歴もバックグラウンドで生成されているので、エディタの「矢印」ボタンをクリックすると…


 

「単ファイルモード」になって、メニューの「File」から保存履歴を確認することができるようになります。


ここから、任意の保存日時を指定していつでも元に戻すことができるわけです。

「Git」のように高度な機能ではありませんが、簡易版として十分活用できる範囲かと思います。

 

あと、GitHubと連携して「Gist」を作るのも簡単にできます。


 

さらに、Googleドライブの共有機能を利用して、複数人とコラボしながらプログラミングをすることも出来るようになっています。


実際には、同時に複数人がコーディングするケースは稀ですが、友人とペアプロなどをする際には便利かもしれません…。

 

コラボ中は、分かりやすいコメントを残しておくと、他の人が気付きやすいので便利です。


通常のコメントよりも目立つし、範囲を指定できるので「どの部分を言っているのか?」というのが明確になります。

 

このように、エディタに関しては予想以上に頑張って作っている印象を受けました。

Googleアカウントは、ほぼみなさんが持っているかと思うので、手っ取り早く開発環境を整えてサイトを公開したり、勉強や練習などに活用すると便利ではないでしょうか。

 

 
おまけ
最後に、「Editey」以外で過去にご紹介したクラウドエディタを合わせて掲載しておきます。

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が出来て無料!


こちらで紹介している「Cloud9」というエディタの方が高機能ですが、初心者にはちょっと難しく感じるかもしれません。

もし、ご興味ある方はぜひ一読くださいませ!

 

 
まとめ
クラウドエディタと言えば、他にも「Nitrous」や「Koding」などがありますが、今回ご紹介した「Editey」はGoogleドライブを使っていることもあって、非常にシンプルで分かりやすいのが特徴です。

また、Googleアカウントを利用しているので、新しくアカウントを作る手間が不要なのも良いですね。

今すぐ、誰でもプログラミングを始められるので、ぜひみなさんも挑戦してみてください!

 

 

written by まさとらん

 

 

 


 

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る