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

アプギガトップ > Googleドライブ上に「Web開発環境」を構築できる「Editey」は、ホスティングも無料!
注目記事ピックアップ
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
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...

ページトップへ戻る