APIを使ってみるセイカイ2013.04.25フロントエンジニア二度目の登場となります。新規事業推進部のネコ好きセイカイです。子供等作らずにみんなネコを飼った方が色々幸せになれるかと思います。API」を弄ってみようかと思います。実現されているような、リアルタイムに1つのドキュメントを共同編集する仕組みが提供されています。Quickstartを参考にテキストの読み書きをしてみます。準備まず準備としてAPIを有効化する必要があります。AccessタブからOAuthClientIDを作成してClientIDをメモります。準備は以上で完了です。下記URLからチュートリアル記事内のhtmlとjsコードと同様のファイルを作成します。index.htmlを編集して、該当箇所に準備でメモったclientIdを挿入します。ここまでで、用意されたコードが動きますので、サーバー上にアップして見てみます。動かしてみると、左右のテキストエリアが同期しているのが分かります。同様のURLをブラウザで開くと、ほぼリアルタイムに同期していますね。処理を追うrealtime-client-utils.jsの内容は、認証と読み込みの処理の様ですので、リアルタイムなコラボレーション作業の実装はindex.htmlのscriptタグ内です。下記で文字列のリアルタイム編集をするオブジェクトを生成しているようです。doc.getModel().getRoot().get('text');[/code]処理内容と使用しているinterfaceからgapi.drive.realtime.CollaborativeStringであることが分かります。gapi.drive.realtime.CollaborativeString要するにCollaborativeStringに文字列を渡すとサーバー側に送られ、サーバ側から変更が通知されるとCollaborativeStringにTEXT_INSERTED、TEXT_DELETED等のイベントが通知されるということのようです。orionを利用してrealtimeな共同編集が出来るエディタを作ってみます。※orionに関しては(更新,埋め込み方法)上で使ったindex.htmlを改変します。500px;}&lt;/style&gt;[/sourcecode]テキストエリアは一旦削除して、エディタの表示領域を追加。false);});}[/javascript]細かい部分を考慮出来ていないので、双方で操作すると微妙な感じですが、なんとなく動きますね。URLのfileIdがGoogleDrive内のDocumentIdとなり、異なるfileIdでコラボレートすることは出来ません。共有設定等はDrive側の設定値に依存しますので、プライベートなものを他人と共有は出来ません。このあたりもAPIから許可可能?かもしれませんが、今回は一旦ここまでの内容です。(clientIdはダミーなので設定の必要があります)ソースコード色々可能性がありそうなので、皆さんも弄って遊んでみると楽しいかと思います。ネコの写真を置いときます。SHARE記事作成者の紹介セイカイフロントエンジニア新規事業推進部のセイカイです。猫を飼い始めて幸せな毎日を送っています。公式XWeb制作・アプリ開発に関する、UI/UX情報、エンジニア向け情報、イラストテクニックをお届けしています。