Read Article

kintone_JavaScriptのデバッグをGoogle Driveで行なう方法

kintone_JavaScriptのデバッグをGoogle Driveで行なう方法

ごきげんよう!トッティです。

飛び石連休でしたね、皆さん体調崩されてませんか。

 

さて、この頃開発者としても活躍中の私ですが、正直kintoneのカスタマイズ手順って面倒じゃないですか?やった事ある人ならわかると思いますが、以下の手順です。

カスタマイズしたいアプリを開き、「このアプリの設定」→「詳細設定」→「JavaScript/CSSでカスタマイズ」→「アップロードして追加」→該当ファイルを選択→「保存」→「設定完了」

手順が多すぎて大変ですよね。特に開発終盤のJavaScriptやCSSを微修正しながら何度も何度もアップロードするのは面倒すぎて目が死んだ魚みたいになることうけあいです。

URLでJavaScriptを指定する

そうです。kintoneはURLでJavaScriptを指定することが可能です。なので、ストレージサービスを利用し、クラウド上でファイルを更新する、もしくはローカルで編集したものを自動的にシンクするものを使えば、ほぼリアルタイムでファイルの更新が可能です。

URLでファイルを指定する
いつも「アップロードして追加」ばかり触っていたので、まるで空気になってたよね、、ごめんね
Googleアカウントの準備を行なう

さて、今回設定するストレージサービスはGoogle Driveですが、Dropboxの設定はサイボウズ社の運営するdeveloper networkにて説明されています。普段Dropboxを使っている方はこちらをご覧ください。

まず、このページをご覧になっている方は、100%Googleのアカウントをお持ちだと思います。・・・持ってますよね?大丈夫ですか、ここ飛ばして。Googleアカウントをお持ちで無ければ、こちらへ進んでアカウントを作成してください。

Google DriveにJavaScriptファイルもしくはCSSファイルをアップロードする

Google Driveに進んだら、いつもkintoneをカスタマイズしているファイルをアップロードしましょう。図の部分から該当のファイルを選択すればOKです。今回は先日作成したLINEアプリへの投稿JavaScriptをアップロードします。

GoogleDriveへのアップロード
「ファイル」を選択して、JS/CSSをアップ!
該当ファイルを公開する

ファイルのアップロードができたら、次は公開設定です。該当のファイルを公開に設定しないと外部(kintone)からそのJavaScriptを使えません。該当のファイルを選択し、共有設定に進みます。

Googleドライブ共有設定
チェックを入れて、その他→共有

他の特定のユーザーとの共有設定が最初に開きますが、「詳細設定」に進みます。

Googleドライブ共有詳細設定

非公開を一般公開に変更します。

 

Googleドライブ設定変更

一般公開に変更後、上記キャプチャの「共有リンク」をコピーし、メモ帳か何かに記録しましょう。

Googleドライブ設定変更
一般公開に変更

次に、kintoneに入力するURLを作成しましょう。先ほど、コピーした共有リンクのURL

https://drive.google.com/file/d/0B0jAut5oaOq9RENscFg3cjB4NmM/edit?usp=sharing

赤い部分をコピーして(“/d/〜/edit?”までの間)

https://www.googledrive.com/host/

の後ろに貼り付けてください。

完成例:https://www.googledrive.com/host/0B0jAut5oaOq9RENscFg3cjB4NmM/

これをkintoneの「URL指定で追加」に設定すれば完了です。

更新作業の方法

せっかくストレージサービスにアップロードしたのに、毎回Google Driveへのアップロード作業があるのではkintoneで行なうのとそう変わりありませんね。そのための更新方法ですが、Google Driveではザックリ言って二通りの更新方法があります。

①クラウド上で編集・更新する

②ローカルで編集・更新したものをシンクする

 

①について、Google以外のサードパーティが対応アプリを多数出しているようです。Google Drive上でJavaScriptファイルを開こうとすると、下記のようにアプリを案内されます。いろいろ試して自分に合ったものを選べば良いのではないでしょうか。

サードパーティ製のアプリ

②ですが、私はこの方法を取っています。

 

GoogleDriveアプリインストール

Google Driveトップページにインストールの案内があります。私はこれをインストールし、ローカルで編集、すぐにシンク、といった方法で更新しています。そんなに迷うほど難しいものでは無いですが、分からなければヘルプで詳細ご覧ください。

上記2パターンのどちらを選んでも、即時編集が反映し、修正したファイルの挙動をkintone上で確認することができます。とっても便利です。

とはいえ、クラウドストレージにファイルを置き、それをkintoneで動かすということは、そのファイルをインターネット上に公開する必要があります。誰に見られるか分からない、という点を理解した上で利用してくださいね。

 

それではまた。

※この記事は2014年9月24日の情報をもとに執筆しております。

 

この記事を書いた人

トッティ
トッティ
トッティです。「開発者ではない。でも、いろいろkintoneを使い倒したい!」そんなあなた、奇遇ですね、僕もです。非開発者としての高みを目指しつつ、その道程を共有致します。

今日も張り切って行きましょう。
URL :
TRACKBACK URL :

LEAVE A REPLY

*
*
* (公開されません)

Return Top