Subscribe Twitter

2013年4月7日日曜日

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

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



その(1)では、説明が足らなくて、誤解する友人がいたので、念のため書いておくと、「ホスティングサーバーとして利用する」というのは、クラウドストレージに置いたhtmlなどのファイルを単なるファイル共有ではなく、webページとして公開するというもの。

Dropboxをホスティングサーバーとして利用する

Dropboxは、2012年7月末にファイル共有の仕様を変更しているので、ホスティングサーバーとして利用する際は、Dropboxのアカウントを作成した時期が、2012年7月末までか、2012年8月1日以降かで使い勝手がまるで違うので、注意が必要。




2012年7月末までにアカウントを作成した場合(以降「旧アカウント」と表記)
デフォルトで、Dropboxフォルダの中に共有用の「Public」フォルダが付属している。

このフォルダにhtmlなどを入れ、そのファイルを選択しておいて、右クリックから「パブリックリンクのコピー」を選び、コピーしたURLを使って簡単に公開できる。

Dropbox webサイトでも同様。公開するファイルを選択し、右クリックでダイアログ表示して「公開リンクのコピー」を選ぶ、
あるいは上側メニューの「公開リンクのコピー」をクリックすれば、公開用のリンクを取得できる。

公開リンクの構造
公開リンクの例:http://dl.dropbox.com/u/○○○○○○/test.html
○○○○○○には、UID(ユーザー固有の公開用ID)が入る。一度このリンクを取得したら、次回は「公開リンクのコピー」を取得する手順を省ける。

リンクの階層構造は、普通のPCやサーバーと同じなので、「Public」フォルダの中に更にフォルダを作成するなど階層化した場合、「Public」フォルダをUIDに置き換えて公開リンクを書き出せばOK。

例えば、「Public」フォルダの中に「web」というフォルダを作って、そこにtest.htmlを入れた場合は以下のようなURLになる。
http://dl.dropbox.com/u/○○○○○○/web/test.html

実際に作成した私の例

外部ファイルのjavascriptやcss、画像、web fontなどもhtmlから正しい相対パスでリンクすれば、問題なく反映する。

逆にいうと、リンクを公開するということは、UIDをさらすことになるので、意図的に公開したファイル(htmlなど)以外でも、UID以下(=「Public」フォルダ内のファイル)は、相対パスをたどって、すべて人に見られることを承知しておく必要がある。
見られて困るファイルは、「Public」フォルダに決して入れてはいけないし、そもそも重要なファイルを、オンラインストレージに保存しておくこと自体問題がある。

2012年8月1日以降にアカウントを作成した場合(以降「新アカウント」と表記)
デフォルトの「Public」フォルダがなくなり、どの階層に入れたファイルでも右クリックから「リンクの共有」を選んで共有できるが、「パブリックリンクのコピー」は使えない。

Dropbox webサイトでも同様。「リンクの共有」だけで、「公開リンクのコピー」はない。

すべて「リンクを共有」となり、htmlはwebページとしてではなく、htmlコードのテキストファイルとしての共有になってしまう。

旧アカウントと同様の階層に「Public」フォルダを作成したとしても、機能しない。右画像は作成した「Public」フォルダのアイコン、「Public」特有の地球のマークが付かない。

私の場合、Mac内蔵の起動HDDに新アカウントのDropboxフォルダ、外付けの起動HDDに旧アカウントのDropboxフォルダがあるので、試しに旧アカウントから「Public」フォルダを「option」+ドラッグ&ドロップして、新アカウントのDropboxフォルダに複製してみたが、やはり機能しない。

結論としては、新アカウントの場合、Dropbox自体のサービスだけでは、ホスティングサーバーとして利用できない。

ではどうするかというと、「site44」というサードパーティーのサービスを利用する。

「site44」で、Dropboxをホスティングサーバーにする方法
site44.comに接続する。http://www.site44.com/
「Sign in with Dropbox to get started »」と書かれた大きな青いボタンをクリック。

 Dropboxのログイン画面になるので、IDとパスを入力する(ログインしていない場合)。

 site44の接続リクエストを許可するか聞かれるので、「許可」ボタンをクリックする。

 site44の画面に戻るので、「Create a new website」ボタンをクリックする(画像はすでにサイトを1つ作成済)。

 site44.comのドメインか自分の持っているドメインかを選ぶ画面になる。自分の場合は、site44.comのドメインを使用、左側の「Name your website」部分に希望サイト名を入力する。

 入力テキストごとにリアルタイム検索され、すでに使われているサイト名の場合、バックがピンクになるので、テキストを変更しながら決定する。

 決定したら「Create」ボタンをクリックする。

 利用規約(英文)になるので、「Accept」ボタンをクリックして同意する(最初のサイト作成時のみ)。

 決定したサイト名「mint」(私の作成した一例)のwebページ(mint.site44.com/index.html)が作成され、「Welcome to mint.site44.com」と大きく表示される。

 ローカルのDropboxフォルダに、「アプリ」フォルダが作られ、その中に
「アプリ」→「site44」→「mint.site44.com」→ index.html という構造が出き上がる。

 このindex.htmlを書き換え、他のファイルを追加するなどして、webサイトを構築できる。

なお、無料ユーザーの場合、サイト名は5つまで。また、月当たりのアップ容量は100MBまで。

アクセス制限
各サイトは、基本的に一般公開されるが、サイト毎にパスワードを設定して、パスワードを知らせた人だけにアクセスを許可するといった制限もできる。
site44に接続し、「Sign in with Dropbox to get started »」をクリックして自分の管理画面を表示、「Websites」タブから、サイト名の後ろについた鍵マークをクリックして、パスワードを設定できる。パスワードを設定したサイトの公開URLはSSLのhttpsになり、鍵マークは閉じた形に変わる。このあたりMacの設定ではおなじみ。

また、このアクセス制限は、いつでも解除できる。「Websites」タブから、閉じた鍵マークをクリックして、表示されるダイアログの「Enable password protection」のチェックを外してsaveすれば、解除され、公開URLはhttpに戻る。

site44を自分が試した限りでは、静的なhtmlをはじめ、javascript(jQueryなどのライブラリーも含めて)、css、画像、web fontなど、他の無料ホスティングサーバーとほぼ同様に利用できるが、phpなど動的なものは使えない。それを補ってくれるWebscriptサービスが用意されている(有料・7日間のトライアルあり、)。site44とは別のサービス(scriptと別のストレージが提供される)なので、別途登録が必要。

一応こちらも登録してみたが、自分にはあまり使い道がないし、管理がややこしくなりそうなので、そのまま放置。

とはいえ、site44と連動しているサービスなので、念のため設定手順だけ記しておくことに。

「Account」タブから、[Webscript]の「Enable webscript integration」をクリックしておく。

「Websites」タブのサイト名の右側端に矢印が追加される。

 この矢印をクリックするとダイアログが表示されるので、Webscriptを利用するサブドメインを決めて「Save」ボタンをクリックする。

 サブドメインが設定されたサイトの矢印はブルーに変わる。Webscriptの利用を解除したいときは、このブルーの矢印をクリックすると、同じダイアログが表示されるので、「Enable Webscript integration」のチェックを外して「Save」ボタンをクリックする。

site44を総括すると、

  • Dropboxのアカウントさえあれば、別途登録は不要で、簡単に開始できる。
  • ローカルのDropboxフォルダ内だけで完結できる。
  • Dropboxが自動で同期してくれるので、webページの追加や更新作業が楽。
  • そしてなによりもありがたいのは、site44.comのCMやクレジットがいっさい入らない点。
ちなみに、site44.comのサービスは、旧アカウントでも利用できる。Dropboxの公開用UIDをURLに出したくない場合、URLをちょっとだけ個性的にしたい場合など、site44.comを利用する価値はあると思う。

実際に作成、公開したサンプル



Related Post:


0 コメント: