◎ Google DriveやDropboxなどのクラウドストレージをホスティングサーバーとして利用する方法を試してみた(1)Google Driveの場合。

2013年3月4日月曜日

web クラウド



この先、個人的にデザインサンプルやお知らせ的な単独のwebページを作る機会が多くなりそうなので、良さそうなホスティングサーバー(レンタルサーバー)を探していたが、維持経費や使い勝手の問題で迷い、決めかねていた。

しかし、よくよく考えてみれば、日頃利用させてもらっているクラウドストレージのGoogle DriveやDropboxなどでもホスティングサーバーとしての利用が可能なはずなので、試してみた。

Google Driveを利用する場合

Google Driveは、無料で5GBまで利用できる。ホスティングサービスとしては十分な領域といえる。もし、他のファイルで無料の領域をいっぱいに利用している場合は、別なアカウントを作るという手もある。ただし、HTML、CSS、javascript、ico程度のものしかアップできない。それでも、使い勝手は悪くないし、なによりも他の無料のレンタルサーバーのようなCMやクレジットが入らないのがありがたい。

また、Google Driveがホスティングサービスに対応したのは、最近のことなので、ここに記すやり方は今後変更されるかもしれない。

作成手順
  • Googleのアカウントで、Google Driveにログインする。
  • 【新しいフォルダ】ボタンをクリックする。
  • 「新しいフォルダ」ダイアログが開くので、フォルダの名前を決め、【作成】ボタンをクリックする。
  • そのフォルダを選択して右クリックするか、上部に表示される【その他…】をプルダウンして、【共有…】を選び、更に表示されるウィンドウから【共有…】を選ぶ。
  • 「共有設定」ダイアログが開くので、「限定公開 - 下記のユーザーだけがアクセスできます」の右側の「変更…」をクリックする。
  • 次の「共有設定」画面で、「ウェブ上で一般公開」にチェックを入れる。下側に「アクセス:全員(ログイン不要)」の文字が加わる。【保存】ボタンをクリック。
  • 元の「共有設定」画面に戻る。「限定公開…」が、「ウェブ上で一般公開 - インターネット上の誰でも検索、閲覧できます」に変わっている。下側にある【完了】ボタンをクリックする。
  • 元のフォルダ一覧画面(マイドライブ)に戻るので、先ほどのフォルダを開き、公開用のhtmlや、このhtmlに関連する「css」フォルダ、「img」フォルダ、「js」フォルダなどをアップする。フォルダごと画面にドラッグ & ドロップはできないようなので、各フォルダを作成して、この中に各ファイルをドラッグ & ドロップする。下の画像は先にフォルダを作成し、htmlをアップしたところ。
  • 目的のhtmlをクリックして、編集画面を表示する。相対パスの修正など、編集が必要ならここで編集する。日本語などマルチバイト文字が化けるが、公開時には問題なく表示される。日本語部分を編集する場合は、テキストエディターなどで編集し直してから再アップしたほうが分かりやすい。
  • 編集が終わったら「プレビュー」ボタンをクリックする。
  • htmlがプレビューされる。
  • そしてこのとき表示しているURLが、そのまま公開用になる。
  • このURLをコピーしておき、必要に応じて、公開する。
サンプル:

ちなみに、このサンプルは、twitter Bootstrapをカスタマイズする際にセレクターの振る舞いを確認するためのもの(このブログで紹介済) 。
詳細はこちら:http://ipodtouchmtb.blogspot.jp/2013/02/jquerytwitter-bootstrapcsscsshtml.html