外部データ取り込み色々テスト中２
さて、前回、外部のJSONデータを意外に簡単に利用できそうだなと言う所で終わりました。
色々試す前に、ionicでこの方法はすんなり動くかと試してみたところ、ダメダメでした。
まず、home.page.htmlにスクリプトタグを直接書いてもダメで念のためにブラウザに表示されているページのソースコードを見ても記述した<script>タグは見当たりません。
という訳で、ここから先は調べものして追記と言う形になります。
(直接関係ないですがtsconfig.jsonのtsはTypeScriptの頭文字という事が判明)
まず利用はともかく、jsonpの読み込み完了まで持っていきました。
方法としては<script>タグの作成(srcも含む)とそれに対するonLoadイベントの追加をして見ました。
(ちょっと自信が無い)
関数を定義して
------------------------------------------------------------
loadJS(src:string){
let script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
script.onload = (event) => {
console.log('jsonp is fully loaded' + src);
};
}
------------------------------------------------------------
ionViewDidEnter(){}内でアドレスを指定して実行すると、確かにコンソールログに表示されます。
ただ、ここで問題はこの中身を扱えるかという事です。
JSONPの中で定義した変数があっても、ionic内で定義したわけでは無いので"ionic serve"の実行時にエラーで落ちます。
なるほど、これはionic(type=angularなのでangular)のやり方で追加しないと使えそうもない気がします。
さて、そういう機能があるならばプロジェクトディレクトリのどこかにある訳で、angularの機能ならば、"node_modules\@angular"あたりを探すと"node_modules\@angular\common\http\index.d.ts"と言う、おそらくこれだろうと言うファイルが見つかりました。
余談ですが、たいていの機能は恐らくプロジェクト直下の"node_modules"の中にあるかなと思いますので、その中を探すのも一つの方法かと思います。
さて"node_modules\@angular\common\http\index.d.ts"ファイルを見ると、以下の記述がありました。
---------------------------------------------------------------
* ### JSONP Example
* ```
* requestJsonp(url, callback = 'callback') {
* return this.httpClient.jsonp(this.heroesURL, callback);
* }
* ```
---------------------------------------------------------------
このファイル内で定義してあるhttpClientと言うクラスを使えば、何とかなるような・・・
油断大敵で試してみます。
あっさり成功の訳もなく、ただ方向性は間違っていないようなので、うまいサンプルでも無いか調べてみます。
とりあえず理解していないcallbackからお勉強です。
以下のサイトで付け焼刃の知識を入手してみます。
JavaScriptの「コールバック関数」とは一体なんなのか
https://sbfl.net/blog/2019/02/08/javascript-callback-func/
今更ですが、ちゃんと理解していない事ばかりですね(反省)
上のサイト、読みやすいし面白く書いて有るのですが、ただ読んだだけで理解できるなら何事も苦労は無い訳でサンプルコードを参考に色々試してみます。
と、色々見ていくと今からならCallBackよりPromise(どちらも技術的手法)の方が良い？
見た感じ、あきらかにPromissの方が気持ちよく書けそうですし、今後はPromiseが主に使われそうな感じです。
いや、それを言ったらionic使うのってどうなの？となるかもですが・・・
脱線しましたが、プログラマー的にはどうやって必要な機能を実装するか？が重要なわけで今回はPromiseで実装するのが良いと判断したところで投稿です。
しかし進まないな・・・
