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

アプギガトップ > Googleドライブ上に「Web開発環境」を構築できる「Editey」は、ホスティングも無料!
注目記事ピックアップ
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
プログラミング
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...

ページトップへ戻る