個人開発で Google の Drive API を利用したかったのですが、Vue.jsを使う場合少し戸惑うことがあったので備忘録として記事に書こうと思います。
今回の目的
Vue.js アプリケーションで “ブラウザ” からDrive APIを実行する
今回はGoogle公式のブラウザ版クイックスタートをベースに説明します。
上記のサンプルコードでは
- https://apis.google.com/js/api.js のスクリプトを取得
- gapi を定義
- gapi に含まれる関数を使って認証処理を実行
ということを行っています。
今回はこの Google で提供されているスクリプトの gapi を使い、Vue.jsで同じような処理を行うことを目的とします。
Vue.js のアプリケーションで実行する問題点
Vue.jsの場合、サンプルコードのコピペではgapiを読み取れません。
というのもVue.jsの場合、スクリプトはコンポーネントごとに定義がまとめられているため、 gapi が定義されていてもコンポーネント内から gapi を探そうとしても
ReferenceError: gapi is not defined
というエラーで見つからないと怒られてしまいます。
また、vueのコンポーネントの中に script タグを含めることも出来ないので、Vueコンポーネントの中に
<script async defer src="https://apis.google.com/js/api.js"></script>
を含めようとしても
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed. （訳） テンプレートは、状態を UI にマッピングする役割だけを担うべきです。 そのような副作用のあるタグは解析されないので、テンプレートに配置しないようにしてください。
というように怒られてしまいます。
結論
window.gapi を利用する
任意のHTMLファイルで api.js を読み込ませていれば、Vueコンポーネント内では window.gapi を使うことで gapi を参照できます。
api.jsの中身を見ると、
var gapi=window.gapi=window.gapi||{};gapi._bs=new Date().getTime();(function(){という処理があるのですが、 サンプルコードで使用している gapi だけでなく、 window.gapi にも同じ値が入っているためです。
window.** とはスクリプト毎に変数を保存する方法でなく『ブラウザ自体』にデータを保存するもので、通常ファイル間では変数を共有できないのですが、windows.** を利用することで、ファイル毎にデータを共有することが出来ます。
今回は google で用意されたコードがwindowに保存しているためこの方法を採用しました。
また、window.gapi はブラウザに含まれる値なのでVue.js以外にもReactなどでも同様の方法で呼び出すことが出来ます。
サンプルコード（Laravel + Vue.js）
今回はサンプルとしてLaravelにVue.jsを入れた場合のサンプルコードを公開します。
やっていることは Google公式のサンプルコードを書き換えただけなので、内容に関しての解説は省きます。
Sign In をするとGoogleドライブのファイル一覧が表示されれば成功です！
【補足】サーバーからDrive APIを実行したくなかった理由
Google APIを実行するサンプルとしてよく散見するのはサーバーからPHPやPythonを使い、サービスアカウント経由でAPIを実行する方法です。今回サーバーからDriveAPIを使わなかった方法を補足します。
サービスアカウントのため実際のユーザーのDrive情報を取得できない
まず1つ目の理由はサービスアカウントを使ったAPIの実行となるためです。
以下の記事のようにサーバーからの実行の場合は、サービスアカウントに共有して閲覧権限を共有していないと実際のユーザーのデータを取得できません。
ユーザーの権限を必要以上に保持したくない
サーバーからのDrive APIの実行は絶対に出来ないわけではなくて、認証時に drive API の実行権限を許可してもらえれば可能です。
認証時のアクセストークンをサーバーに保存して、アクセストークンを使ってAPIを実行すれば認証してくれたユーザーのデータを自由に取得することが出来ます。
が、聞いて分かる通り、悪用すれば秘密のデータも簡単に取れてしまうのでオススメしません（不正アクセスされた時に責任取れない、、）
リクエストがあったらこの辺は書こうと思います〜〜〜
さいごに
コードを少し読めばヒントが見つかるかも
というわけでまとめです。
今回は api.js の中身を少し読めば簡単に解決することがわかりました。
自分の書いたコード以外を確認することで出来ないことが出来るようになることがあります。
悩んだら動かそうとしているコード自体を読んでみて解決策がないか調査してみましょう！
公式リファレンスが正しい理解への近道
ブログ等で様々なサンプルコードが出ていますが、公式リファレンスが最も正しいコードです。
Drive APIの記事は様々ありますし、ライブラリも色々試してみたのですが、どれも使い方がわかりにくかったり、使い方に癖があったので公式リファレンスをベースにプログラムを書きました。
どうやってプログラミングを勉強したら良いの？という質問がたまに来るのですが、検索すればだいたい公式で使い方が公開されています。
公式リファレンスは最も正しい情報源なので、まずはそこから読んでみてほしいです。
というわけで今回はVue.jsで Drive API を実行する方法の解説でした！
ここまで読んで頂きありがとうございました！
コメント