読者です 読者をやめる 読者になる 読者になる
WEB拍手ぱちぱちっと
Clap/拍手

01.MENU
Blog  / ブログ
Videos  / 動画
Pictures  / 絵
Game Materials  / 素材
SS(ShortStory)  / 小ネタ

02.MENU
Novels  / 小説
Chat  / チャット
BBS  / 掲示板
Others  / その他
Old Top  / 旧Top

Traffic Jam Products


Google driveを使ってWEBページを簡単に公開する方法【サーバー不要】

お役立ち 技術 解説系

 

2016年追記

今はサービスが停止され、もう使えないのでご注意!

 

青森から南部せんべいが送られてきましたので毎日パリポリと食べているmです。

ごきげんよう。

 

お盆なのですが、福岡から青森の実家までは距離があるので今回はごめんなさいいたしました(^-^;

この時期ですとかなりの額がかかってしまいますので時期を外そうかと目論んでおります。

 

さて、今日はGoogle driveを使ってWEBページを簡単に公開できる方法を書きたいと思います。

 

Google driveを使ってWEBページを公開しちゃおう(サーバーもいらない!)

自分でゲームなどを作った時に公開の場を作りたい、と思う方も多いのではないでしょうか?

けれどそのためには場所を借りたり色々メンドイのでは……。

否!!(ぉぃ

実は今は非常に便利になっていて、Google driveにindex.htmlを入れるだけでwebページとして公開できてしまうのです!!

しかもGoogle driveは15GBもありますので、かなーり十分です。

mが最初WEBページを作った時なんて50MBのスペースを借りていたものです。(遠い目

 

さっそくWEBの公開方法をご紹介します。

 

1. Google driveにアクセスしよう

googleGmail)のアカウント作成はここでは省略します。

では、まずはGoogle driveにアクセスしましょう。

f:id:m_training:20150814234624p:plain

 

f:id:m_training:20150814234735p:plain

これですね!

 

2. Driveのアップロード設定を確認しておこう

ドライブにファイルを入れるわけですが、その前にGoogle driveが勝手にファイルをドキュメント形式にしないように設定を変えておきます。

 

設定の中にある「アップロードしたファイルを変換する」のチェックを外します。

f:id:m_training:20150814235104p:plain

f:id:m_training:20150814235021p:plain

 

3. ファイル(フォルダ)をアップロードしよう

次は、公開したいhtmlファイル(フォルダ)をアップロードします。

たぶんフォルダに入れて作成してると思いますので、そのフォルダごとアップロードしてしまいましょう。

フォルダごとドラッグアンドドロップすればOKです。

f:id:m_training:20150814235656p:plain

 

アップロードが完了したらindex.htmlがあるか確認します。

WEBの仕組みのお話ですが、ページにアクセスするときは一番最初に「index.html」にアクセスするルールがあるのです。

 

f:id:m_training:20150815000016p:plain

 

4. フォルダのアクセスを「WEB上で公開」に変更しよう

今のままですと自分しか見ることができませんので、アクセスをWEB上での公開に変更します。

まずはアップロードしたフォルダを右クリック。

出てきたメニューの「共有」を選択しましょう。

f:id:m_training:20150815000523p:plain

 

共有メニューが出てきますので「詳細設定」を選択します。

(ごめんなさい、画像はすでに設定済みの画像です)

その後、「アクセスできるユーザー」の「変更」をクリックします。

 

f:id:m_training:20150815000624p:plain

f:id:m_training:20150815000845p:plain

 

そうしたら、「オン・ウェブ上で一般公開」にチェックを入れて保存しましょう。

これで公開設定は終了です。

f:id:m_training:20150815000917p:plain

 

5.アクセスしよう!

あとはアクセスすれば終わりなのですが、そこも一手間必要です。

まずは、index.htmlがあるフォルダを開きます。

そこのURLの後ろのkeyの部分をコピーしておきます。

f:id:m_training:20150815001300p:plain

 

続いて、新しいタブなどに以下を入力します。

http://www.googledrive.com/host/さっきコピーしたキー

f:id:m_training:20150815001457p:plain

 

ここまでできたらエンターキーを…………っターン!

 

f:id:m_training:20150815001659p:plain

表示されました!

完了っ!

 

以下が実際のページです。

(うぇぶげーメイカーで作ったWEBゲーム。音がでますので注意)

http://www.googledrive.com/host/0BzaVSsEikKxWfkN3Z1JCbmtiRlkwX3dzcWs2ajJsam03UTR0T09WUlRVaHlFX1N2UFp0LWs

※うぇぶげーメイカー2.0は実は完成済みなので、もう少ししたら公開します。(dropboxの公開機能が使えなくなったので悩んでましたw)

 

ね、簡単でしょう?(ぉ

こんなかんじでサーバーなどを持っていなくても簡単にWEBページやWEBゲームを公開できてしまうのです!

興味がある方は挑戦してみると面白いかと思います。

 

気づいた注意点

index.html以外だとうまくいかない。

直接アクセスする時、別のhtmlファイルを指定したのですが上手く行かず……。

最初にindex.htmlにアクセスしてもらってそこからリンクを張ったりするのが良さそうです。

 

相対パスで同じフォルダのファイルを指し示すときは「test.html」ではなく「./test.html」といったように「./」をつける

f:id:m_training:20150815002424p:plain

同じフォルダにあるファイルは「./」と付けないとうまくいかないようです。

 

Official LINE Account
友だち追加
@hgf7288s