Buddyではアプリの動作のほとんどはスクリーンのスクリプトとしてJavascriptで記述します。しかし、いくつかのスクリーンあるいはアプリで共通する処理をライブラリファイル（拡張子が.jsのファイル）として独立させたい場合もあります。また、世の中には便利なJavascriptライブラリファイルがたくさん公開されていますので、そういったものを使いたい場合もあるでしょう。
Buddyでは、アプリの files/javascripts/ フォルダに.jsファイルを入れれば、アプリ起動時に読み込まれ、スクリーンのスクリプトで利用できるようになります。
※一つ注意すべき点として、Buddyアプリでは内部でReactというJavascriptライブラリを使用しているということがあります。ReactはDOM（ブラウザで表示されるHTMLの画面要素を表すオブジェクトモデル）を独自に管理してDOM書き換えのタイミングを適切に行うことでアプリの動作を軽くしてくれます。そのため、例えばjQueryのようなDOMを操作するライブラリはうまく動作しないことがあります。
さて、現在のBuddyが用意している、files/javascripts/ フォルダに.jsファイルを入れるという方法は、二つの弱点があります。
一つは読み込む順序を指定できないことです。複数の.jsファイルを入れた場合、どういう順序で読み込まれるかは内部的な状況により、ユーザーが指定することができません。ライブラリによっては読み込む順序が重要な場合があります。例えばキャンバスにグラフ表示をするChart.jsに機能を追加するプラグインは、まずChart.jsを読み込み、そのあとでプラグインの.jsファイルを読み込まなければならないものがあります。
もう一つは、URLで.jsファイルを指定することができないことです。広く使われているライブラリファイルを集めてそれぞれ所定のURLで利用できるようにしている便利なサービスがあります。例えばChart.jsであれば、https://cdn.jsdelivr.net/npm/chart.js@3.3.2 というURLでバージョン3.3.2を利用できます。（このURLは一例で、同様のサービスはほかにもあります。）こういうサービスを使うと、目的のライブラリファイルをダウンロードしてきてサーバーに配置するという手間がかかりません。しかし残念ながら現在のBuddyの files/javascripts/ フォルダに.jsファイルを入れるという方法では利用できません。
この問題を解決するライブラリファイルが jsloader.js です。← このファイル名部分をクリックしてダウンロードしてください。
jsloader.js は、上記でダウンロードしたファイルをそのまま使うのではなく、どういうライブラリファイルを読み込みたいかに応じて内容を編集してから使用します。jsloader.js の冒頭部分は次のようになっています。
// 読み込むjsファイルを置くディレクトリ var JSLoaderDir = 'files/users/jsloader'; // 読み込むjsファイルのリスト（上記ディレクトリ内のファイル名、またはURL） var JSLoaderList = [ '1.js', '2.js', '3.js', ];
この記述のままであれば、files/users/jsloader/ に入れた、1.js、2.js、3.js がこの順序で読み込まれることになります。JSLoaderDir に files/javascripts を指定してはいけないことに注意してください。
URLで指定する場合の例は次のようになります。Chart.jsとそのプラグイン、およびそれに必要なライブラリファイルを指定しています。この場合はURL指定しているので JSLoaderDir の指定は無意味ですが、あっても害はないのでそのままにしています。
// 読み込むjsファイルを置くディレクトリ var JSLoaderDir = 'files/users/jsloader'; // 読み込むjsファイルのリスト（上記ディレクトリ内のファイル名、またはhttps:のURL） var JSLoaderList = [ "https://cdn.jsdelivr.net/npm/chart.js@3.3.2", "https://cdn.jsdelivr.net/npm/luxon@1.27.0", "https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0", "https://cdn.jsdelivr.net/npm/hammerjs@2.0.8", "https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0", "https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.2", "https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.1.1", ];
このように編集した jsloader.js を、アプリの files/javascripts/ フォルダに入れます。アプリの設計画面で「アプリメニュー」を選び、管理メニューから「ファイル管理」を選びます。開いたダイアログで、「javascripts」フォルダをクリックし、jsloader.js をドロップしてアップロードします。
そうすれば、jaloader.js 内で指定したライブラリファイルが指定した順で読み込まれて利用できます。
なお、将来のBuddyでは、このような補完テクニックを使わなくても順序やURLの指定ができるようになるかもしれません。
（2022/1/5 中島）
