2013年8月31日土曜日 :ishinonaka

Googleドライブを外部javascriptやCSS置き場に使う

blogger google drive

<script src="/src/javascript.js"></script> このようにjavascriptやcssを外部から呼ぶことってよくありますよね。 bloggerなどのブログサービスを使っているとどこに外部ファイルを置けばいいか悩みます。 そこで方法としてGoogleドライブを使うことで解決します。 DropboxでもよかったけどGoogleアカウントなら大抵の人が持っていることを期待してGoogleドライブで。 ###手順 --- ####Googleドライブにログインする まず[Googleドライブ](https://drive.google.com/)に行きます。ログインしてなかったらログインしてください。 複数のアカウントの同時ログインを使っている人は制限に引っかかってアカウントの切り替えができないので、何か問題がある人はChromeのシークレットウィンドウや別のブラウザを使ったりして対応してください。 ####共有フォルダを作る。 作成->フォルダか新しいフォルダを作るボタンを押してフォルダを作ります。 フォルダの名前は何でもいいです。とりあえず私はpublicにしました。 <a href="http://2.bp.blogspot.com/-Q4NuszD3Qmo/UiEbw8nue1I/AAAAAAAAAHc/YGrhH0wFl54/s1600/2013y08m31d_061610984.png" imageanchor="1" ><img border="0" src="http://2.bp.blogspot.com/-Q4NuszD3Qmo/UiEbw8nue1I/AAAAAAAAAHc/YGrhH0wFl54/s320/2013y08m31d_061610984.png" /></a> 作ったフォルダにチェックを入れて共有ボタンを押します。 <a href="http://1.bp.blogspot.com/-gVfdF1fWsx4/UiEcWi9HIWI/AAAAAAAAAHk/6yliFBTueuw/s1600/2013y08m31d_061956136.png" imageanchor="1" ><img border="0" src="http://1.bp.blogspot.com/-gVfdF1fWsx4/UiEcWi9HIWI/AAAAAAAAAHk/6yliFBTueuw/s320/2013y08m31d_061956136.png" /></a> アクセスできるユーザーの変更を押してウェブ上で一般公開にします。 <a href="http://1.bp.blogspot.com/-DNFfbqGEaQo/UiEchp3IVGI/AAAAAAAAAHs/BgqDTXlDLeM/s1600/2013y08m31d_064053471.png" imageanchor="1" ><img border="0" src="http://1.bp.blogspot.com/-DNFfbqGEaQo/UiEchp3IVGI/AAAAAAAAAHs/BgqDTXlDLeM/s320/2013y08m31d_064053471.png" /></a> <a href="http://3.bp.blogspot.com/-nXNs4ewXrY4/UiEckVEPPBI/AAAAAAAAAH0/dnrJRcPC-Cg/s1600/2013y08m31d_064119343.png" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-nXNs4ewXrY4/UiEckVEPPBI/AAAAAAAAAH0/dnrJRcPC-Cg/s320/2013y08m31d_064119343.png" /></a> 上の方でリンクが生成されていますが使いにくいURLなので無視します。 完了 これで共有フォルダができました。 ####ファイルをアップロード さっき作った共有フォルダをクリックして移動します。 作成ボタンの横にあるアップロードボタンを押します。必要なjavascriptやcssをアップロードしてください。 それとjsやcssの他になんでもいいのでhtmlファイルをアップロードしておいてください。URLの取得に使います。 <a href="http://3.bp.blogspot.com/-X5iDe4EyX2g/UiEc0CM18PI/AAAAAAAAAH8/8DNGflpf9MM/s1600/2013y08m31d_064813558.png" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-X5iDe4EyX2g/UiEc0CM18PI/AAAAAAAAAH8/8DNGflpf9MM/s320/2013y08m31d_064813558.png" /></a> ####URLの取得 アップロードしたhtmlファイルにチェックを入れてプレビューボタン->開く、またはその他->開く->Googleドライブビューアで開きます。 <a href="http://4.bp.blogspot.com/-4reexyYXUeg/UiEc84jRMNI/AAAAAAAAAIE/UcuCKy86Yh4/s1600/2013y08m31d_065913145.png" imageanchor="1" ><img border="0" src="http://4.bp.blogspot.com/-4reexyYXUeg/UiEc84jRMNI/AAAAAAAAAIE/UcuCKy86Yh4/s320/2013y08m31d_065913145.png" /></a> プレビューというところをクリックします。このプレビューボタンがhtmlを開いた時にしか出てこないのです。 <a href="http://2.bp.blogspot.com/-1MoxdwvgDh0/UiEdoXwqtuI/AAAAAAAAAIU/KBiGrjx6dy4/s1600/2013y08m31d_070257470.png" imageanchor="1" ><img border="0" src="http://2.bp.blogspot.com/-1MoxdwvgDh0/UiEdoXwqtuI/AAAAAAAAAIU/KBiGrjx6dy4/s320/2013y08m31d_070257470.png" /></a> https://googledrive.com/host/なんかランダムっぽい文字列/なにか.html というURLに移動するので、URLを削って1つ上のディレクトリに移動します。 https://googledrive.com/host/なんかランダムっぽい文字列/ ファイル一覧が出てくるのでURLがほしい外部ファイルをクリックしてそのURLを見たり、右クリックしてリンクをコピーしたりしてURLを取得してください。 <a href="http://1.bp.blogspot.com/-58Wfgw2z5Us/UiEdKYWV0BI/AAAAAAAAAIM/i26fKceZexg/s1600/2013y08m31d_070759548.png" imageanchor="1" ><img border="0" src="http://1.bp.blogspot.com/-58Wfgw2z5Us/UiEdKYWV0BI/AAAAAAAAAIM/i26fKceZexg/s320/2013y08m31d_070759548.png" /></a> ---- これで外部ファイルのアップロードとそのURLの取得ができました。 あとはブログに使ったりして幸せになってください。