Tumblr3.kintoneからのJavaScript呼び出しとJavaScript内でのAjaxの記載についてここでは、kintoneへのJavaScriptの適用方法その他の説明は割愛します。記述が大変参考になります。私も最初はここから勉強しました^^ただし、本稿でもまた、前書きを書かねばなりません。API呼び出しのタイミングについてです。冒頭でも挙げたように、本稿ではレコードの詳細画面でAmazon情報を呼び出すのが目的です。レコード詳細画面の編集時画面での実装については、本稿では触れていません。APIでは、レコード詳細画面のテキストボックスの値変更時にJavaScriptを呼び出すことができません。そのため、編集時画面でAmazonからの情報を表示させる意味がないと判断し、記載から外させて頂きました。API更新で実装されました。本稿ではまだ検証に至っておらず、掲載しておりません。Amazonからの呼び出し自体にも、全く問題がない訳ではありません。Unavailableのエラーが返ってくる場合があります。リクエストはほどほどに・・・ということなのでしょう。strictが両立できていません。時間をおいて再実行ということでご了承ください。最後にクロスドメイン制約についてです。*****.co.jpといった違ったドメインのサーバーにAjaxリクエストを発行します。そのような別ドメインへのリクエストは、セキュリティ上脆弱になりかねないため、環境によっては簡単に通信ができないようになっています。本稿ではphpからkintoneへ渡すデータ形式をXMLにしました。JSONPを使えばクロスドメイン制約についても解決できるようです。今回はXMLを選択しました。ご了承頂ければと思います。随所にそのあたりについてあと、jQueryの呼び出しも必要となりますので、kintoneのアプリ設定画面から、JavaScript登録を忘れずに。気を取り直して実装開始^^以下は、AmazonCallBookInfoDetail.jsの内容です。200行あるすべてのコードを開示しながら、適宜解説を加えていきたいと思います。クロスドメイン制約をかいくぐるための呪文の一つです。function(event){は詳細レコード呼び出し時に書く呪文です。実行しているブラウザの種別をここで取得しています。呼び出し先のURLがhttpsから始まっても、画像はhttpが返されることがあり、それを防ぐために一部ブラウザによって画像のアドレスを変更しています。表示したkintone詳細レコードのISBNフィールド(フィールド名はF_Isbn)の値を取得しています。ハイフンを除去しています。kintoneフォーム上で事前に作成しておいたスペースをここで取得しています。情報を書き込んでいきます。kintoneフォーム上で事前に作成しておいたスペースをここで取得しています。大きな画像を表示させます。本稿で実装する内容では、ユーザ入力データからのサニタイズ処理はあまりありません。唯一この場所で実施しています。なる場合があり、その場合のみ許可しています。12行目で取得した画像表示用イメージの横幅を指定しています。11行目で取得したAmazonデータ表示用スペースにユーザを飽きさせないために表示しております。先に紹介しましたが、codeとIsbnという2つのパラメーター以外に、nowというパラメーターも追加しています。実はnowパラメーターは以下の処理では使われていません。Explorer上でうまく値が戻ってこないという情報から、このような記載を設けています。jsonpでもjsonでもうまくいくことでしょう。Explorerで正常に戻ってこないという情報を基に追加しました。非同期処理をONにしています。ここをOFFまたは記載なしにすると、何らかのエラーがAjaxで発生した場合、ブラウザがフリーズしてしまいます。10000ミリ秒、つまり10秒間だけphpからの戻り値を待ちましょう。正常にデータが戻ってきた場合の処理を30行目以下に記載します。関数の引数dataが、成功した場合に受け取るデータが格納された変数です。商品情報に関するすべてのAmazonからの戻り値を変数として宣言してあります。ここまでやる必要はありません。82行目以下は、実際のXMLの内容を基に、DOMの森を探索することになります。以下ではXMLを実際に表示させてみます。この中で実際に表示させるのに必要なのは、32行目の<Item>タグ以下のデータとなります。53-101行目までは各種商品イメージの情報が記載されています。この中で53行目から67行目までのSmallImageとMediumImageとLargeImageは。その下の68行目から101行目までの間に同一の情報があります。この部分は取得を省略してもよいでしょう。102行目以下は主要な情報が並んでいます。これらはほぼ取得すべきところです。データの種類によってはタグ自体がないものもあります。以下の例でいうと、104行目の<Creator>タグは小説のように著者がある本には登場しません。著者がある本は<Author>タグが替わりをつとめます。112行から117行の<Languages>タグや135行目の<ReleaseDate>タグがないデータがあることも確認しています。一件、AmazonからのXMLデータで気を付けるべき点があります。それは書籍とkindle書籍の場合です。kindle書籍はISBN項目を持っていないのですが、Amazonの仕様でISBNに対してデータ検索結果にkindleデータも含まれます。XML上では、2つの<Item>タグが紐付いています。その場合は、JavaScript側で<Item>タグ内をループさせるのですが、<ISBN>タグの有無で判別しています。大体のXMLデータの構造がおわかり頂けましたでしょうか。先に紹介したAmazonのガイドですが、項目の位置はこちらでガイドされています。各項目がどのように商品データに関連付いているかはわかりません。上に挙げた項目以外にも存在することもあるかと思います。jQueryの文法に則り、XMLのデータが格納された変数dataに対し、<item>タグの要素を検索しています。その結果をループしたのが82行目の記述となります。条件文が真の場合、84行以下の処理を実行しています。82行目でループを開始した<item>タグの要素データを指します。<item>タグ内でさらに<ItemAttributes>タグを検索し、さらにその中で<ISBN>タグを検索しています。この構造については、3ページ前のXMLをご参照ください。ISBNの要素の有無によって判定を分けています。これは先にXMLの構造を説明する際にも書きましたが、kindle書籍データが含まれている場合の退避処理となります。<item>タグの要素データ内の<ASIN>タグや<DetailPageURL>タグの要素内データを取得しています。82行目で始めた<item>タグ内ループの中で、さらに<ItemLink>タグを検索し、さらに<Description>タグを検索し、それをループしています。Listに等しいかを尋ねています。87行目で条件に合致した場合、<Description>タグと同じレベルの隣のタグ<URL>タグの要素内のデータを取得しています。87、88行目と同様です。それぞれの<URL>タグの内容を取得しています。86行目で始めたループを閉じています。82行目で始めた<item>タグ内ループの中で、さらに<ImageSet>タグを検索し、それをループしています。100行目で始めた<ImageSet>タグ内ループの中で、それぞれの要素タグの内容を取得しています。100行目で始めたループを閉じています。ここまで来たら大分要領がつかめてきたのではないでしょうか。あともう少しで終わりです。お疲れのことでしょう。それぞれの要素内データを取得しています。121行目ですが、Attrという見慣れない記述があります。XMLの104行目に当ります。Role="監修"というRole属性の値を取得するために、Attrという命令を発行しています。いう文字列を組み立てているわけです。83行目の<ISBN>タグの有無を判定したif文の終わりです。82行目で始めたループを閉じています。aws_ASINの値が真かどうかを判定しています。undefined以外のデータの場合、150行目以下の処理を実行します。11行目で取得したスペースに対し、innerHTMLを使用して書き込むべき文字列を生成しています。今回の実装では、一つのスペース内に改行で区切ってAmazonからの情報を羅列する手法を採りました。冒頭に記載しましたが、編集時画面に実装し、Isbnの値の変更時に各フィールドに自動入力するほうが望ましいという考えもあります。169行目から173行目は取得したURL文字列を<a>タグの中に含めています。6行目でブラウザの種別を取得しました。取得したブラウザ文字列にfirefoxが含まれているかどうか、要は実行しているブラウザの種類を問うているのがこの行です。画像を読み込もうとするとエラーが出るため、このような処置を取っています。149行目で判定したaws_ASINの値が偽だった場合に、180~184行目の処理が動作します。Amazon側に渡したISBNコードが不正な値だった場合、XMLは違う種類のメッセージを返します。ほとんどの部分は一緒なのですが、<Items>タグの中の<Item>タグが<Errors>タグに置き換えられています。以下にエラー時のXMLを提示します。11行目で取得したスペースにエラー情報を含めます。上の図にあるとおりのエラー構造に基づいて、適宜整形して頂ければと思います。149行目で判定した条件式の終わりの部分です。29行目で判定したAmazonから正常な値が戻ってきたかどうかの判定式の終わりの括弧です。Ajax通信に何らかのエラーが生じた場合、処理はこちらのステートメント内で行われます。関数の引数として、XMLHttpRequest、textStatus、errorThrownといった値が返されますので、その値に応じてメッセージを整形されるとよいでしょう。errorThrownは場所の数だけ配列として戻ってきますので、193~195行では配列の要素数だけ処理を行っています。ここでは取得したエラー情報をアラートとしてポップアップ表示しています。Amazon情報を表示するスペースに表示するのもよいでしょう。187行目からのエラー時に実行される関数の終わり部分です。22行目からの$.ajaxの関数の終わりの括弧です。5行目からのkintone詳細レコード表示時に実行される関数を終えるにあたり、戻り値を返しています。5行目からのkintone詳細レコード表示時に実行される関数の終わりの括弧です。本JavaScript全体の無名関数の終わりの括弧です。これでJavaScriptの実装は終了です。お互い・・・さて、JavaScriptを完成させ、あとはこれをkintoneのアプリ管理画面からアップすれば完成!のはずですが・・・・・実は先ほどのJavaScriptの仕組みでは動かないブラウザがあります。Explorerです。9より前のバージョンに対応しておらず、別の仕組みを経由してAjaxを実装する必要があります。なんてこった!またまたクロスドメインではまることになりました。9以前のバージョンでのクロスドメイン実装についてのJavaScriptが存在します。私もいくつか試しましたが、私の環境ではそのうち動いたのが以下の1つだけでした。MoonScript/jQuery-ajaxTransport-XDomainRequestなので、今回はこちらのJavaScriptも使わせて頂きました。ありがとうございます。結果として、kintone上にアップするJavaScriptファイルは3種類となりました。最初にjQuery本体。次にIE9以前対応のクロスドメイン制約対応のJavaScript。最後に今回作成したJavaScriptです。