Microsoft Azureに置いてあるWEBサイトをVisual Studio Onlineで編集出来る!

Image

Microsoft Azureに置いてあるWEBサイトがいくつかあります。作ったまま放置がちな umo.to というサイトもその一つです。

今日まで知らなかったのですが、Visual Studio Online を使ってWEBサイトのコードを修正出来るということを聞いたのでちょっと試してみました(^^)/

Visual Studio Onlineを使えるようにする

Windows Azureにログインしたら左ブロックで、

Image

WEBサイト をクリックします。

Image

WEBサイトの一覧が出るので、 umo.to をクリックします。

Image

構成 をクリックします。

Image

この画面を下の方にスクロールしていきます。

Image

VISUAL STUDIO ONLINE での編集 というところまで来たら、

Image

オン をクリックします。

Image

忘れずに 保存 をクリックします。これで準備完了です。

style.cssを修正してみる

Image

ダッシュボードをクリック

Image

Visual Studio Online での編集 をクリックします

Image

おおっ!このようにIDEの画面がブラウザに表示されました(^^)/

試しにstyle.cssをいじってみます。左側のEXPLOREでstyle.cssまでたどります。

Image

おー!色まで見えるんですね、便利そうです。

Image

試しに、site-headerという所の色を紫にしてみます。すると、

Image

オレンジだったヘッダーが

Image

紫色に変わりました。saveボタンなどは特に押していないので修正したらすぐに保存されるようです。ちょっと注意が必要そうですね。

functions.phpというファイルを作成していじってみる

ファイルの作成もここでできるということなので作ってみます。

Image

子テーマ(twentyfourteen-umo)の上で右クリックして New File をクリックします。

Image

入力欄が現れるので

Image

functions.php と入力します。

Image

メインエリアに入力欄が表示されるので、

Image

このサイトのfunctions.phpから一つ引用のフィルターをコピーしてみました。

functions.phpを作る前は、

Image

このような表示でしたが、引用のフィルターをfunctions.phpで指定した後は

Image

このようになりました。また、IDEですので

Image

途中まで入力すれば補完してくれますし、

Image

引数についての説明も出て、非常に便利です。

Azureならブラウザでここまでできるんですね~。

その他の機能について

Image

ファイルのアップロードや、

Image

Image

GITとの連携もできそうです。ここまで揃っていると本格的に開発で使えそうな気がしますね!

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る