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に書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

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

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

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

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

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。