!Google Driveにて静的コンテンツをホスティングする
できました
https://www.googledrive.com/host/0B9leRsyXlUYHbmdwdGMwYmlBWFk/ina_ani.html
僕のGoogleReaderのスター付きフィードを拾って表示するページを作りました。
まぁ なんだろうTumblrみたいな?
!!やり方
GoogleDriveのページから まずは新しいディレクトリをつくります。
で、できたディレクトリを右クリックして公開範囲をWeb全体に設定します。
普通にディレクトリを開くと
https://docs.google.com/folder/d/0B9leRsyXlUYHbmdwdGMwYmlBWFk/
とか
みたいなURLが発行されるようです。
これを
https://www.googledrive.com/host/0B9leRsyXlUYHbmdwdGMwYmlBWFk/
こういうふうに変更することでディレクトリのまぁ所謂Indexes的なものを見ることができます
で、その中にあるファイルは
https://www.googledrive.com/host/0B9leRsyXlUYHbmdwdGMwYmlBWFk/ina_ani.html
こんなふうにアクセスすることが出来るようです。
(同じ名前のファイルが複数ある場合はこのように参照することはできないようです)
!!工夫
GoogleDriveのWebUIから中身を編集することができます。
知らなかったけどGoogleDriveってDocsやSpreadSheetとかだけじゃなくてサードパーティのWebアプリも使えるみたいです。
今回はDriveNotepadってのを使ってみました。
Web上でHTMLを書いて、保存すると即反映されるのでとても簡単にブラウザで確認することができます。
ただ日本語がちょっとあやしい、今回は日本語書いてません。
!!静的コンテンツでどこまで出来るのか?
さてさて、静的コンテツしか置けない状況でどんなサービスが作れるかな?ということでできそうなことを列挙
!!!参照(ウィジェットの埋め込み)
例えばTwitterのタイムラインの埋め込み
- https://www.googledrive.com/host/0B9leRsyXlUYHbmdwdGMwYmlBWFk/twtest.html
facebookのコメント欄をつけてみる
- https://www.googledrive.com/host/0B9leRsyXlUYHbmdwdGMwYmlBWFk/fbtest.html
!!!参照(XML)
外部サイトのコンテンツを読み込むことが出来るか?
JSONPで返してもらえればJavaScriptとHTMLで加工できる。
今回は GoogleAjaxFeedAPIを使ってみた
https://developers.google.com/feed/?hl=ja
これを使うと外部サイトのRSSをJSONPで受け取ることができます。
他にも
- YQL http://developer.yahoo.com/yql/
- GAS https://developers.google.com/apps-script/
などが使えそう
!!!更新
データをどこかにとっておきたい。 という時にはLocalStorageやCookieかなぁという感じ。
外にとっておきたいならデータをストア出来るAPIをGAEとかHerokuに用意するとかかなぁ(今回は複雑になるので省略)
今回は試さなかったけど
- wedata http://wedata.net/
- firebase https://www.firebase.com/
など データを貯めることに特化したWebサービスと組み合わせることもできそう
まぁでもよくよく考えると、こういうストレージって静的ページから書き込めるようにした時点で、誰でもいじり放題ということになっちゃうので、いたずらされたくないデータなどの保存には向かないのかなぁと思ったり、、、
!!注意
!!!SSLである
外部JavaScriptのロードやiframeを埋め込む場合に非SSLサイトのリソースを使うことができません
(iframeはChromeでは警告が出つつ動くようです)
!!他に似たようなことをする方法
- Dropboxでも昔はできたみたい。 今も古いアカウントを持ってる人なら出来るとか
- github pages (gitの理解が必要、 まぁエンジニアなら理解してるよね!)
- herokuに置いちゃう (gitの理解が必要)
- GAEに置いちゃう (GAEのコマンドの理解が必要)
今回は非エンジニアの人でも出来るようにってことで GoogleDriveでの方法を説明しました。
5643382
wiki
1362273397