Articles tagged with: kintone連携

kintone Café 神奈川 Vol.13を開催しました


六月のkintone café 高知 Vol.16 & SORACOM UG 四国に呼んでいただいた事は、私に複数の気づきと学びを与えてくれました。

・サイボウズ社が築いたkintoneエコシステムの理念に通ずる文化をSORACOM社に感じたこと。
・互いがAPIで簡単に繋げられたので、ハードウエアが苦手な私でも取り扱える手応えを得られたこと。
・kintoneを取り扱うにあたって、入力をもっと考えねばならないこと。

そしてご縁も。

次のkintone Café 神奈川をSORACOM UGさんと共催しようと決めたのは、高知での懇親会の場です。
そこで仲良くなったSORACOM UGのなっちゃんこと藤田さんとコンタクトを取り、後日なっちゃんの会社にもお伺いして打ち合わせを行い、イベントの趣旨を固めました。

一方、次のkintone Café 神奈川の開催地は鎌倉でやると決めていました。そこで私は、鎌倉でkintone Caféを行える場所の選定を始めました。
私は鎌倉とさまざまなご縁でつながっています。カマコンにも参加しました。カヤックさんが運営する「まちの社員食堂」で食事もいただきました。鎌倉商工会議所で登壇したこともあります。
今回、ヒトノコトという屋号で活動している渡辺みさきさんに開催に良い場所がないか相談したところ、推薦していただいたのが安国論寺さんです。
ヒトノコトウェブサイト
みさきさん、ありがとうございました。

早速、安国論寺さんとアポイントを取り、七月の某日にお寺を訪問しました。
同行してくださったのは、一緒にkintone café 神奈川を運営してくださっている藤村さんです。そこで、施設の設備面や接続環境に問題ないことを確認しました。
安国論寺ウェブサイト

そこまで決まったので、あとは登壇者やセッションです。
高知のイベントは完全にオフライン限定でした。そのため、内容が参加者のみしか知らなかったことは好都合でした。
実は高知のイベントとは登壇者が何人か重なっています。が、登壇者が被ってもさほど支障はないと判断しました。
コロナ感染対策も含めて何度も打ち合わせを重ね、登壇内容を徐々に固めていきました。
コロナ感染患者数が増加した際は、完全オンラインに移行することも覚悟しました。ハンズオンもすべてオンラインで行うことも含めて準備を進めました。
告知

ツイートまとめ [~開催前]



当日、曇り時々雨だった予報は外れ、見事に晴れました。
お寺に行くと、安国論寺の平井住職がご用意くださった案内看板が二つも設置されていました。それがお寺の雰囲気に溶け込み、とても良い感じを出していました。
中世からの古都でありながら、ITでも多くの先進的な企業を擁する鎌倉にふさわしいお出迎えです。
kintone Caféでも例のないお寺Café。参加して下さったみなさんの期待に応えなければ。

境内には蝉時雨が響いています。三方を崖に囲まれた安国論寺の境内にはリスが生息しています(視察で訪問した際に何匹も見かけました)。自然の癒しに満ちた場所です。
今回、イベントを開催する場所は、本堂の裏手をぐるりと巡った場所に建つ観音堂です。

観音堂はまだ新しい建物です。Wi-Fi完備。電源や机、椅子もそろっています。
調光も可能で冷暖房も十分に行き渡ります。パントリーも備わっているし、トイレも広い。
堂内には南無幸福観世音菩薩様が安置され、悩める衆生の営みを静かに見守ってくださっています。

ただ一つだけ問題が。
それは夏の陽射しが堂内に差し込み、投影したプロジェクターの映像が鮮明に見えなかったことです。この問題は、光量を最大にし、コントラストを調整しても解決できませんでした。
これによってリアル参加の方々にとって少し画面が見にくかったのが残念でした。

ツイートまとめ [開催前~当日]


他には音声をオンラインと会場にどう配分するかでうまくいかず、ぎりぎりまで調整を重ねました。
13時10分がやってきました、開会の発声を行う時間です。
今回の司会進行は私。
kintone Caféの理念とkintoneの目指す目標を語り、まずは始まり。

ツイートまとめ [当日~kintone Caféとは]





続いてトップをお願いするのはJOYZOの四宮さん。今回、四宮さんに登壇していただいたことによって、kintone café 神奈川にkintone界の三巨頭が揃いました。
ラジカルブリッジの斉藤さんはリアルとオンラインで一回すつ。アールスリーインスティテュートの金春さんにはオンラインで一回。そして、Mr.kintoneの四宮さん。

そもそも今回のイベントをやろうと思った理由は、高知で登壇した四宮さんのセッションをより多くの人に聞かせたいと言う思いでした。
kintoneは概念を座学で聞くより、実例を出した方がよく理解してもらえます。四宮さんによるセッションは、kintoneと IoTをどうつなぐかを実例のイメージとして皆さんに理解してもらえたのではないでしょうか。
なぜIoTが必要なのか。その理由の一つは人のケアレスミスを防ぐためにあります。
冷蔵庫の締め忘れをデバイスで検知し、それを通知する。JOYZOさんが星野リゾートさんで実装されたこの実例は、IoTをどうビジネスや日常に活かすかの良い例となるでしょう。

高知で私は四宮さんのセッションを聴き、kintoneとIoTをどうつなげ、提案するかの知見を得ました。弊社がIoTに可能性を感じる上で励みになりました。目標にしたいと思います。
また、後に登壇する私の話す内容を補強するように、無尽蔵のレコード追加はkintoneの本分ではない、との点を述べてくださったこともありがたかったです。
IoTによって大量レコードを取り扱うことは、今のkintoneには幾分荷が重い部分です。ですが、要件とデバイスの組み合わせによっては、十分kintoneでもIoTと組み合わせて案件がこなせるのです。

四宮さんありがとうございました。

ツイートまとめ [kintone Caféとは~四宮さん]





さて、四宮さんのセッションは質疑も含めて用意していた時間より5分ほど早く終わりました。そこで私は、自分のセッションを少し伸ばそうと決めました。もともと48枚のスライドを作っていたため、伸ばそうと思えば伸ばせます。

今回、私が語ったのは大きく3つです。

・kintoneに関わる方は、そろそろkintoneに入力する手段や方法を考えた方が良いよ。
・kintoneには1アプリごとに1日1万リクエストの制限があって、対策を考える必要があるよ。
・kintoneには1サブドメインごとに同時接続数100の制限があって、対策を打たないと止まるよ。

今回はIoTをkintoneにつなげる上では理解しておいてもらいたい点だったので、ちょっと真面目に。
でも、笑いは高知で登壇した時に比べると、ちょっと取れなかったなあ。
その理由もわかっています。私の登壇の後にMaxさんが立ったまま話しているのを見た瞬間に。
あ、座ったまま喋ってた、と自分のミスに気づきました。悔やまれます。まだまだ未熟です。

質疑の時間も若干余ってしまいました。そこで、愚にもつかない話で場をつなぎました。それがあとあとのペース配分を狂わせました。
まだ私には精進が必要です。

ツイートまとめ [四宮さん~長井]




続いて、Maxさんとなっちゃんによる「SORACOM User Groupのご紹介」と、 「つながっている社会へ!IoTとSORACOM」をMaxさんから。

今回、弊社メンバーやパートナー技術者にも安国論寺に来てもらいました。その狙いの一つこそ、Maxさんのセッションを直に聞いてもらうことでした。

なぜ、コミュニティに私が肩入れするのか。粛々と案件をこなすだけではなぜいけないのか。
その気づきをMaxさんの語りの中から感じ取って欲しかったのです。
どこかの小人さん達がいつのまにか案件や仕事を用意してくれるわけではないこと。こうした場で発信する繰り返しがなければ、今の弊社は案件をもらえていないこと。
エバンジェリストやアドボケイターとはどんな人か。それは、私が何度も内部に向けて話すだけでは伝わっていなかったでしょう。だから、私以外の方が実践する生きた手本を見てほしかったのです。
なっちゃんのようなSORACOMの外側の方がSORACOMを語る。そのコミュニティのあり方は、kintoneでも盛んです。

そのためには、どういう理念のもとでSORACOMさんが活動しているのか。 それを理解しないとコミュニティは成長しません。
私が感じたSORACOMさんとkintoneの相性の良さはどこにあるのか。
四宮さんとMaxさんのセッションから汲み取ってもらいたかったのは、こうした技術以外の部分にもありました。

もはや一部の人たちが技術を独占する時代ではありません。技術は民主化に向かっています。
その流れを読みそこなうと、会社や組織として先細る未来が待っていることでしょう。

エバンジェリストとは、技術を民主的に広めていく存在であるべき。私がサイボウズさんやSORACOMさんに肩入れする理由もそうです。私がエバンジェリストとしてコミュニティに肩入れする理由もそう。
民主化に向けて活動を続けていくと、やがて独占する特権は失います。が、その活動によって民主化された社会は、それを広めた方を放ってはおかないはずです。
民主主義の手続きにのっとり、その立役者にさまざまな役割を期待します。つまり仕事となって戻ってくるのです。
技術を独占すると、かえって衰えていく。これは人類の歴史が証明しています。

高知でも今回もMaxさんはこういう言葉をおっしゃられました「IoTとの言葉は使われなくなる」。
IoTがコモディティ化した時、当たり前になった時。それがエバンジェリストとしてのゴールです。それを教えてくれたセッションでした。

Maxさん、なっちゃんありがとうございました。

ツイートまとめ [長井~Maxさん&なっちゃん]


さて、ここで一度休憩タイムとネットワーキングタイムを挟みました。
せっかく皆さんに来ていただいた以上、ご縁をつないでいただかなければ。

そして続いてはSORACOM UG 東京の三人様にお話ししてもらいました。


まずは和田さんから。

「GPSマルチユニットの紹介 ーいざ鎌倉ー」と題したセッションで紹介されたデバイスは、まさにIoTの王道を往くものでした。
温度と湿度と加速度センサーを備え、GPSも備えたデバイス。それがGPSマルチユニットです。
つまり、これ一台で色んなことができてしまう優れもの。

例えば位置情報を組み合わせて現在地の情報を取得できます。また、その情報をLINEなどで簡単に知らせることができます。
鎌倉に到着し、「いざ鎌倉」を高らかに世界に宣言することができるのです。それを例に挙げて示してくれました。

SORACOMのダッシュボードではそれらの連携を簡単に行えます。それが理解できました。

和田さん、ありがとうございました。

ツイートまとめ [Maxさん&なっちゃん~和田さん]



続いて前嶋さんからは、「簡単にIoTをはじめる方法 (SORACOM LTE-M Button for Enterprise / Button Plusの応用例)」と題したセッションで、ArduinoとSORACOM Buttoを組み合わせ、その場でIoTのセンサーの動きを見せてくださいました。
農家の熱中症防止デバイスや、見守り デバイス。どれもIoTの活用事例として参考になるものばかり。

電子回路図が出てくるあたりで、私の理解力は飽和しそうになりました。
こうした電子回路に普段触れない私のようなソフトウエア・エンジニアはハードウエアにとっつきにくい印象を持ってしまいます。
むしろ、だからこそ私は、この両者をつなげられる技術者が必要とされると思いました。クラウドはそれを可能にします。この両者を結びつける提案ができれば、今後の生き馬の目を抜く情報業界を生きていけるはずです。
ハードウエアに強い方にはハードウエアをまかせてしまう。そこから出てきたデータをどのように加工し、活用するのかを示してあげられれば、お客様のニーズは満たせられます。この道筋が見えました。

前嶋さん、ありがとうございました。

ツイートまとめ [和田さん~前嶋さん]



最後に大口さんからは「SORACOMデバイスで遊ぶ」というタイトルのセッション。
ボタンを使い、ポストに投函されたことを知らせるシステムの実例を示してくださいました。

フレップボードとかジャンパ・スイッチとか、割り込みとかレジスタとか。私が名前ぐらいしかしらない単語が飛び出します。
ですが、こうした高度な部分を見ておかないと、座学や独学を始めたときに先が見えません。すると挫折してしまうのです。

大口さんの処理で実装する部分のうち、AWS以降の処理については想像ができました。それは、私が理解できていない弱点がどこかも明らかにしてくれました。
目指す高みを見せてくれた意味でも、大口さんのこのセッションは参考になりました。
そして、概念を理解した上で、ハードウエア・エンジニアにお任せしたほうがよいという気づきも得ました。まずは私も学ばなくては。

大口さん、ありがとうございました。

ツイートまとめ [前嶋さん~大口さん]



続いては高知でも盛り上がったハンズオンです。
高知から島根経由で駆けつけてくださった片岡幸人さんが事前にkintone・SORACOMの試用環境をご用意していただき、準備は万端。
また、今回もSORACOMさんより事前に人数分のボタンをご用意くださいました。

いざハンズオンのスタートです。kintoneエバンジェリストであり、IoTをビジネスに活用する幸人さんの本領が発揮されます。今回は遠距離の異動にも関わらず、パトランプまで運んできてもらい、本当に頭が下がります。

今回は会場にいる皆さんがハンズオンに参加するだけではありません。同時に、オンラインでもハンズオンを実施しました。
仮想的なボタンを用意することで、オンラインの方にもIoTとkintoneの連携を行ってもらえる。それは、リアルでなければIoTのハンズオンはできないという常識を打ち破る壮挙です。
それだけでも凄いのに、リアル側と同時進行する離れ業は幸人さんが事前にシナリオを作りこんでいてくれたおかげです。

このハンズオンが盛り上がったこと!
皆が一生懸命にチャレンジする姿に主催者の本望が満たされました。

私は高知では真っ先に完走し、ボタン押下回数でも一位を獲ってしまいました。自分の大人げのなさに恥ずかしい思いをしました。
今回、私のノートパソコンはZoom配信用に使っており、私はハンズオンにiPadで参加しました。ツイートもしながら、サポートもしながらのハンズオンでしたが、なんとか完走ができました。
完走した後は、遅れている皆さんのサポートに回りました。
今回のハンズオンは、私や四宮さんやSORACOMのDaisukeさんやDaiさんなど多くの方がフォローを行ってくださいました。
それもあって、会場にパソコンを持ってきている方はほぼ全員が完走できました。スマホしか持ってきていない方はPC版しか用意していなかったため、画面を操作の度にズームする必要があり、参加を諦めた方もいました。

そうした方もいらっしゃいましたが、成功でした。
私の中の印象では、ハンズオンに取り組む皆さんの熱意は高知よりも上回っていた気がします。主催者バイアスがかかっていることは承知ですが。

片岡幸人さん、ありがとうございます。そしてご参加の皆さんも。

ツイートまとめ [大口さん~片岡さん(連携ハンズオン)]


さて、ここからはLTコーナー。


まずは原田さんから。

「サイボウズ災害支援チームとの取り組み(経過報告)」
前々々回のkintone Café 神奈川 Vol.10で語ってくださった、サイボウズ社との防災協定の取り組みの続報です。
カンタンマップとの連携なども含め、災害情報をkintoneで管理する仕組みが出来上がりつつある現状を語ってくださいました。

わが国はこの夏も災害が頻発しました。これから先も同じような事態が各地を襲うことでしょう。
今回のこの協定を基に、災害にあたってのさまざまな情報共有が進むことを願っています。
そして、IoTとkintoneの連携がますます必要になるはずです。

原田さん、ありがとうございました。

ツイートまとめ [片岡さん(連携ハンズオン)~LT(原田さん)]



続いては山崎さんです。
災害協定に続いては、災害についてのソリューションのネタがよいだろうと考え、話してもらいました。

山崎さんは昨年のCybozu Days 2021の弊社ブースにおいて、雨量計をkintoneと連携する出展物を提供してくださいました。
この出展物は、制作した雨量計に水を入れると、センサーからRaspberry Piを通して、その雨量データや緯度経度や時間をkintoneに飛ばします。
それによってkintoneで雨量を管理する仕組みです。

まさに今回のイベントの趣旨にふさわしい内容です。
この秋に予定されているCybozu Days 2022でも山崎さんには何かを作ってもらう予定です。

山崎さん、ありがとうございました。

ツイートまとめ [LT(原田さん)~LT(山崎さん)]



続いては藤村さんです。
藤村さんは安国論寺の視察からイベントに至る部分でご協力をいただきました。
会場の入り口にデジタルサイネージによるウェルカムボードを設置したのも藤村さん。
会場の皆さんが来場した際のアンケートフォームを作ったのも藤村さん。そこでは設置した体温計を書き込み、コロナ感染があった場合の連絡先の取得も含めていました。

藤村さんからはまず、kintone Café 神奈川のメンバー内で立ち上がったkintone Café METAVERSE支部のご紹介。
さらに、安国論寺のお堂内にいるということで、マンダラ思考法をご紹介くださいました。kintoneの画面をカスタマイズし、マンダラ思考法のツールとしてしまうHackです。

これまた、お寺Caféにふさわしい内容でした。

藤村さん、ありがとうございました。

ツイートまとめ [LT(山崎さん)~LT(藤村さん)]





最後にMaxさんがLTネタを二つ持ち込んでくださったので、
締めをMaxさんにお願いしました。

まず「”電波”のちょっとイイ話」です。
私もそうですが、クラウド・エンジニアの多くはWi-Fiをただ単に享受するだけです。
何も意識せずに使っている方がほとんどではないでしょうか。

ですが、当然IoTを実装するにあたっては、デバイスの設置位置が重要です。きちんと正確なデータが定時に飛ばせるように設置しなければなりません。
電波の特性を説明していただくことで、kintone界隈の方にもより具体的な実装方法のTIPSとして届いたと思います。

この電波についてが一番よかったという嬉しいツイートもいただきました。

続いて「アウトプットって、なにそれ美味しいの?ブログとLTのすゝめ」です。

このLTが私にとってはとても刺さりました。上にも書きましたが、なぜアウトプットするとよいのか。
会社のためでもなく、誰のためでもない。自分のためにアウトプットする。

私が弊社メンバーやパートナーさんに伝えたかったことが、このLTに詰まっていました。
もちろん、私にとって学びになったのはもちろんです。というか、私にとってこのMaxさんのLTは何度も聴き直そうと思っています。
「座右のLT」として。

Maxさん、ありがとうございました。

ツイートまとめ [LT(藤村さん)~LT(Maxさん)]



この後、皆さんで集合写真を撮りました。
なっちゃんが音頭をとり、和田さんがセルフタイマーで二枚。kintoneとSORACOMのそれぞれのハンドサインを。

そして無事に撤収作業も終わり、安国論寺の皆さんにもお礼を言いまして。

夜は鎌倉駅前まで移動して懇親会をしました。参加をご希望する方が22名ほどまで膨れ上がってしまったため、収容できるお店が限られてしまいました。
結果、神奈川で展開しているチェーン店に落ち着きましたが、皆さん、三つのテーブルで話に花を咲かせていました。盛り上がってましたねぇ!

さらに10名ほどは二次会の懇親会へ。ここでも百戦錬磨の皆さんにしかできないディープな話が。
こういうバックボーンが明らかになるのも懇親会をやる面白さですね。

リアルとオンラインで参加された皆さん、すばらしい内容を発表してくださった登壇の皆さん、素敵な会場と案内板をご用意くださった安国論寺の皆さん、安国論寺をご紹介くださったみさきさん、スタッフの皆さん、本当に本当にありがとうございました。
とても盛り上がりました。

ツイートまとめ [LT(Maxさん)~それ以降]

皆さんから現時点で四つのブログが!
福井さん
渋屋さん
SORACOMさん
SORACOM UGさん



kintoneのレコード詳細ページからAmazon商品データを参照するテクニック(3/3)


3.kintoneからのJavaScript呼び出しとJavaScript内でのAjaxの記載について

 ここでは、kintoneへのJavaScriptの適用方法その他の説明は割愛します。はじめよう kintone JavaScript API の記述が大変参考になります。私も最初はここから勉強しました^^

 ただし、本稿でもまた、前書きを書かねばなりません。恐縮ですm(_ _)m

 それは、kintoneからAmazon API呼び出しのタイミングについてです。冒頭でも挙げたように、本稿ではレコードの詳細画面でAmazon情報を呼び出すのが目的です。しかし、レコード詳細画面の編集時画面での実装については、本稿では触れていません。できなくもないのですが、現在の2014年9月時点のkintone JavaScript APIでは、レコード詳細画面のテキストボックスの値変更時にJavaScriptを呼び出すことができません。そのため、編集時画面でAmazonからの情報を表示させる意味がないと判断し、記載から外させて頂きました。ご了承下さい。ただし、レコード編集画面のフィールド値変更時イベントについては、2015/07/12の定期メンテナンスにおけるkintone API更新で実装されました。が、本稿ではまだ検証に至っておらず、掲載しておりません。ご了承ください。

 また、Amazonからの呼び出し自体にも、全く問題がない訳ではありません。Amazon側にリクエストを続けて投げると、Http/1.1 Service Unavailableのエラーが返ってくる場合があります。なので、リクエストはほどほどに・・・ということなのでしょう。このエラー対策については、jQueryのAjaxで、Errorハンドラから再帰呼び出しを試したのですが、calleeとuse strictが両立できていません。なので、時間をおいて再実行ということでご了承ください。

 最後にクロスドメイン制約についてです。本稿の目指す実装は、*****.cybozu.com から ****.jp/ または *****.co.jpといった違ったドメインのサーバーにAjaxリクエストを発行します。が、そのような別ドメインへのリクエストは、セキュリティ上脆弱になりかねないため、環境によっては簡単に通信ができないようになっています。本稿ではphpからkintoneへ渡すデータ形式をXMLにしました。JSONPを使えばクロスドメイン制約についても解決できるようです。が、今回はXMLを選択しました。ご了承頂ければと思います。随所にそのあたりについて

 あと、jQueryの呼び出しも必要となりますので、kintoneのアプリ設定画面から、JavaScript登録を忘れずに。

 さて、気を取り直して実装開始^^

 以下は、AmazonCallBookInfoDetail.jsの内容です。200行あるすべてのコードを開示しながら、適宜解説を加えていきたいと思います。

  4行目     jQuery.support.cors = true; はクロスドメイン制約をかいくぐるための呪文の一つです。

  5行目     kintone.events.on('app.record.detail.show', function(event){
は詳細レコード呼び出し時に書く呪文です。

  6行目     実行しているブラウザの種別をここで取得しています。呼び出し先のURLがhttpsから始まっても、画像はhttpが返されることがあり、それを防ぐために一部ブラウザによって画像のアドレスを変更しています。

  8行目     表示したkintone詳細レコードのISBNフィールド(フィールド名はF_Isbn)の値を取得しています。

  9行目     8行目で取得したIsbnから – ハイフンを除去しています。

  10行目     8行目で取得したIsbnから  ISBN を除去しています。

  11行目     kintoneフォーム上で事前に作成しておいたスペースをここで取得しています。このスペース内にAmazon からの情報を書き込んでいきます。

  12行目     kintoneフォーム上で事前に作成しておいたスペースをここで取得しています。このスペース内にAmazon からの大きな画像を表示させます。

  15-17行目 本稿で実装する内容では、ユーザ入力データからのサニタイズ処理はあまりありません。唯一この場所で実施しています。数値がどうかをチェックしていますが、ISBNの末尾一桁のチェックディジット結果が X となる場合があり、その場合のみ許可しています。

  19行目     12行目で取得した画像表示用イメージの横幅を指定しています。

  20行目     11行目で取得したAmazonデータ表示用スペースにユーザを飽きさせないために表示しております。

 

 

  24行目     先に紹介しましたが、codeとIsbnという2つのパラメーター以外に、nowというパラメーターも追加しています。実はnowパラメーターは以下の処理では使われていません。投げるリクエストURLを常に変化させないとInternet Explorer上でうまく値が戻ってこないという情報から、このような記載を設けています。

  25行目     ここは xml を指定しています。おそらくはjsonpでもjsonでもうまくいくことでしょう。

  26行目     キャッシュをOFFにしないとInternet Explorerで正常に戻ってこないという情報を基に追加しました。

  27行目     非同期処理をONにしています。ここをOFFまたは記載なしにすると、何らかのエラーがAjaxで発生した場合、ブラウザがフリーズしてしまいます。

  28行目     10000ミリ秒、つまり10秒間だけphpからの戻り値を待ちましょう。という指定です。

  29行目     正常にデータが戻ってきた場合の処理を30行目以下に記載します。関数の引数dataが、成功した場合に受け取るデータが格納された変数です。

 

 

  30-79行目     商品情報に関するすべての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のガイドですが、項目の位置はこちらでガイドされています。ただし、各項目がどのように商品データに関連付いているかはわかりません。なので、上に挙げた項目以外にも存在することもあるかと思います。ご容赦ください。

  82行目     jQueryの文法に則り、XMLのデータが格納された変数dataに対し、<item>タグの要素を検索しています。その結果をループしたのが82行目の記述となります。

  83行目     条件文が真の場合、84行以下の処理を実行しています。条件文の頭に$(this)とありますが、これは 82行目でループを開始した<item>タグの要素データを指します。<item>タグ内でさらに<ItemAttributes>タグを検索し、さらにその中で<ISBN>タグを検索しています。この構造については、3ページ前のXMLをご参照ください。<ISBN>タグの要素内のテキストを取得しているのが text()です。
つまり、ISBNの要素の有無によって判定を分けています。これは先にXMLの構造を説明する際にも書きましたが、kindle書籍データが含まれている場合の退避処理となります。

  84-85行目     <item>タグの要素データ内の<ASIN>タグや<DetailPageURL>タグの要素内データを取得しています。

  86行目     82行目で始めた<item>タグ内ループの中で、さらに<ItemLink>タグを検索し、さらに<Description>タグを検索し、それをループしています。

  87行目     86行目で始めた<Description>タグ内ループの中で、要素内の文字列が Add to Wish Listに等しいかを尋ねています。

  88行目     87行目で条件に合致した場合、<Description>タグと同じレベルの隣のタグ<URL>タグの要素内のデータを取得しています。

  90-98行目 87、88行目と同様です。それぞれの<URL>タグの内容を取得しています。

  99行目     86行目で始めたループを閉じています。

 

  100行目     82行目で始めた<item>タグ内ループの中で、さらに<ImageSet>タグを検索し、それをループしています。

 

  101-118行目    100行目で始めた<ImageSet>タグ内ループの中で、それぞれの要素タグの内容を取得しています。

  119行目     100行目で始めたループを閉じています。

 ここまで来たら大分要領がつかめてきたのではないでしょうか。あともう少しで終わりです。お疲れのことでしょう。
私も大分疲れてきました・・・(^^;)

 120-146行目     それぞれの要素内データを取得しています。もう説明は不要ですよね。ただ、121行目ですが、Attrという見慣れない記述があります。この部分に対応しているのは XMLの104行目に当ります。<Creator>タグ内に Role="監修"というRole属性の値を取得するために、Attrという命令を発行しています。これを末尾につなげることで、 サイボウズ式編集部 監修 という文字列を組み立てているわけです。

 

  147行目     83行目の<ISBN>タグの有無を判定したif文の終わりです。

 

  148行目     82行目で始めたループを閉じています。

  149行目     aws_ASINの値が真かどうかを判定しています。cybozu.com developer networkのTipsの中に(小技)undefined と空文字のスマートな if 文判定がありますが、そちらの記述通り、文字列の取得結果がnull または undefined以外のデータの場合、150行目以下の処理を実行します。

  150-173行目   11行目で取得したスペースに対し、innerHTMLを使用して書き込むべき文字列を生成しています。今回の実装では、一つのスペース内に改行で区切ってAmazonからの情報を羅列する手法を採りました。冒頭に記載しましたが、編集時画面に実装し、Isbnの値の変更時に各フィールドに自動入力するほうが望ましいという考えもあります。なお、169行目から173行目は取得したURL文字列を<a>タグの中に含めています。

  174行目     6行目でブラウザの種別を取得しました。取得したブラウザ文字列にfirefoxが含まれているかどうか、要は実行しているブラウザの種類を問うているのがこの行です。

  175行目     使用ブラウザがfirefoxの場合、12行目で取得したスペースのinnerHTMLに対して書き込む画像の http: を 空白文字 にしています。Firefoxだけが、https:// から https:// の画像を読み込もうとするとエラーが出るため、このような処置を取っています。

  176-178行目     使用ブラウザがFirefox以外の場合、12行目で取得したスペースのinnerHTMLに対して書き込む画像のURLをそのまま使用しています

  179行目     149行目で判定したaws_ASINの値が偽だった場合に、180~184行目の処理が動作します。なお、Amazon側に渡したISBNコードが不正な値だった場合、XMLは違う種類のメッセージを返します。ほとんどの部分は一緒なのですが、<Items>タグの中の<Item>タグが<Errors>タグに置き換えられています。以下にエラー時のXMLを提示します。

 

  180-184行目     11行目で取得したスペースにエラー情報を含めます。上の図にあるとおりのエラー構造に基づいて、適宜整形して頂ければと思います。

 

  185行目     149行目で判定した条件式の終わりの部分です。

  186行目     29行目で判定したAmazonから正常な値が戻ってきたかどうかの判定式の終わりの括弧です。

  187行目     Ajax通信に何らかのエラーが生じた場合、処理はこちらのステートメント内で行われます。関数の引数として、XMLHttpRequest、textStatus、errorThrownといった値が返されますので、その値に応じてメッセージを整形されるとよいでしょう。

  193-195行目     errorThrownは場所の数だけ配列として戻ってきますので、193~195行では配列の要素数だけ処理を行っています。

  196行目     ここでは取得したエラー情報をアラートとしてポップアップ表示しています。Amazon情報を表示するスペースに表示するのもよいでしょう。

  197行目     187行目からのエラー時に実行される関数の終わり部分です。

  198行目     22行目からの$.ajaxの関数の終わりの括弧です。

  200行目     5行目からのkintone詳細レコード表示時に実行される関数を終えるにあたり、戻り値を返しています。

  201行目     5行目からのkintone詳細レコード表示時に実行される関数の終わりの括弧です。

  203行目     本JavaScript全体の無名関数の終わりの括弧です。

これでJavaScriptの実装は終了です。お疲れ様でした。お互い・・・

 さて、JavaScriptを完成させ、あとはこれをkintoneのアプリ管理画面からアップすれば完成!

 のはずですが・・・・・実は先ほどのJavaScriptの仕組みでは動かないブラウザがあります。それは。。。。Internet Explorerです。jQueryのAjax関数では、Internet Explorer 9より前のバージョンに対応しておらず、別の仕組みを経由してAjaxを実装する必要があります。なんてこった!またまたクロスドメインではまることになりました。

 Googleで検索を行うと、いくつかInternet Explorer 9以前のバージョンでのクロスドメイン実装についてのJavaScriptが存在します。私もいくつか試しましたが、私の環境ではそのうち動いたのが以下の1つだけでした。

 MoonScript/jQuery-ajaxTransport-XDomainRequest

 なので、今回はこちらのJavaScriptも使わせて頂きました。ありがとうございます。

 結果として、kintone上にアップするJavaScriptファイルは3種類となりました。最初にjQuery本体。次にIE9以前対応のクロスドメイン制約対応のJavaScript。最後に今回作成したJavaScriptです。

 これで完成です。

 と。このように表示が出来ましたでしょうか。レコードを移動すると新たなレコード先でAmazonから呼び出されたデータが表示されます。ただし、あまり短い時間で呼び出すとAmazonからの応答が途絶えてしまうことがあります。その場合は F5でリロードを行って頂ければと思います。

 外部認証が必要な複雑なAPIを呼び出す場合、このような方法があるよ、ということを理解頂ければ、さまざまなケースで実装が可能になり、kintoneをより一層ご活用頂くことができることでしょう。ぜひ、お試しください。ただしくれぐれも過度なAmazonへのリクエストはお控えください。1時間当たりのリクエスト回数も上限が定められているようですし・・・・

 本件について、文責は全て私、合同会社アクアビットの長井にあります。もし内容についての御質問などございましたら、お寄せいただければ、時間の許す限り、回答させて頂くようにいたします。


kintoneのレコード詳細ページからAmazon商品データを参照するテクニック(2/3)


2.phpを利用したAmazonへのパラメーターの生成方法について

 最初に一言申し添えておかねばなりません。なぜkintoneからAmazonの情報を取得するのにphpを介さなければならないか、について。

 cybozu.com developer networkをご覧の皆様は、すでに有識者の皆様が執筆された、秀逸なTipsの数々にも目を通されたことでしょう。Tipsの中には

  外部APIの同期処理をつかってみよう!

  他サービスのAPIからデータを取得してkintoneに表示してみよう

 という2つのkintoneから外部APIに接続するTipsも挙げられています。私も本稿を書くにあたって参考にしました。ありがとうございますm(_ _)m。

 これらのTipsはkintoneのJavaScript APIを使用しています。JavaScript内に外部APIのURLを直接書き込み、その結果を表示させる方法です。一方、Amazon APIを呼び出す際のURLですが、その中には全章で取得したAmazonの「Access Key ID」「Secret Access Key」「トラッキングID」の3種類から生成した署名文字列を含める必要があります。つまり、署名文字列を生成するにあたっては、JavaScript内に「Access Key ID」「Secret Access Key」「トラッキングID」という機密情報を埋め込まねばなりません。それを避けるために、外部のphpに署名文字列の生成や機密情報の扱いを任せようというのが狙いです。

 能書きが長くなりました。それでは実装に移らせて頂きます。

 まず、kintoneに埋め込むJavaScript内で呼び出すAPIのURLを記します。

パラメーターは ?code=ISBN&no='+Isbn としています。Isbnとあるのは、kintoneのフィールドに入力された本のIsbnを変数化したものです。Amazon認証情報に関する情報の一切はJavaScriptからは省かれています。

 次にパラメーターを受け取ったAmazonBookInfo.phpの中身を示します。

 JavaScriptに値を返すための各種ヘッダの記述と、Amazonから情報を取得する本体のphpであるSetBookByAmazon.phpの呼び出しが書かれています。ヘッダについてはGoogle ChromeとFirefox、そしてInternet Explorer 9で正常にデータが渡せることが確認できています。これは環境によって違いますので、工夫してみてください。特に4番目のヘッダで application/xml となっています。これはJavaScriptに対して渡すデータの種類を xmlとして規定する部分ですから、重要です。

 最後にパラメーターを受け取ったSetBookByAmazon.phpの中身を示します。

 これで動くはずです。あ、Access Key IDとSecret Access Key IDとアソシエイトTagはこんなふざけたものではなく、きちんとAmazonで取得した文字列を使って下さいね^^。

  define('AssociateTag','anatanoiddesu-99'); の赤字の部分を前章で取得した「トラッキングID」で置き換えてください。

  define('AccessKeyId','ICHIBANSAISHINNOAKUSESUKII');  の赤字の部分を前章で取得した「Access Key ID」で置き換えてください。

  define('SecretAccessKey','DAIJINADAIJINASIIKURETTOAKUSESUKIIDESUNENN');   の赤字の部分を前章で取得した「Secret Access Key」で置き換えてください。

 それ以外は、この内容でデータが取得できるはずです。このphpをサーバーにアップし、URLをアドレス欄に打ち込んでみてください。例えば以下のように。

 どうでしょう。XML形式でデータが表示されたのではないでしょうか。そう、あの本の情報が\(^o^)/

 なお、渡すパラメータや取得できる情報の種類はかなり多岐に亘っています。本稿ではISBNのみに焦点を当て、ISBNから取得可能な書籍情報のみについて紹介したいと思います。上に挙げたphpの内容もISBNによる取得に対応しています。Amazon Products Advertising APIの単一商品取得の ItemLookUpはこちらのリンクが公式情報となっています。

 上のphpの内容に ・・・・・・あ といった記述があります。くれぐれもこの部分はphpファイルからは除いてくださいね。動かなくなってしまいますので^^。

 以下は、その あ~か についての説明を記します。

 ・・・・あ その上の行と共にJavaScriptから渡ってきた変数が格納される場所です。

 ・・・・い Amazonから取得する情報の種類を指定します。ItemAttributesは商品詳細、Imagesは画像情報。このように複数の種類を指定する場合 , カンマでつなげます。

 ・・・・う 指定した各種パラメーターをそのパラメーター名称で並び替えます。署名作成時に必要な処理です。

 ・・・・え 指定した各種パラメーターをエンコードします。RFC3986で定められた方法に準じています。

 ・・・・お 署名文字列の生成部分です。ここで初めてSecret Access Keyの活躍の場が与えられます。ハッシュ関数によって、容易には結果から元々の文字列が推測できないような文字列に変換されます。

 ・・・・か 組み立てられたUrlから取得した文字列を取得します。結果文字列はXML形式で帰ってきています。

 ・・・・き 帰ってきた文字列を表示します。この表示処理によって、呼び出し元へ文字列が戻されます。

 これで、Access Key ID と Secret Access Key、トラッキングIDの3種類の情報とISBNからAmazonの書籍情報がデータ取得できました。あとはこれをJavaScriptで加工するだけです。あと一息です!もうしばらくご辛抱ください!!

 最後に、こちらで作成した SetBookByAmazon.php と AmazonBookInfo.php ですが、サーバーにアップする際、https://の領域ではなく、https:// の方にアップされたほうが良いかと存じます。

なぜかというと、呼び出し元となるkintoneのURLは https://******.cybozu.com/k/12/ とhttps://から始まります。これに対し、上記2つのphpファイルが https:// から始まる領域から始まると、ブラウザによっては好ましからざる動きをするからです。


kintoneのレコード詳細ページからAmazon商品データを参照するテクニック(1/3)


はじめに

kintone アプリで資産管理を行いたい、という要望はよく聞きます。その際、既存サイトのデータが参照できたら便利ですよね。例えば商品データを参照したい場合、Amazon APIを通して取得したいといった要件は十分考えられます。本稿では、kintoneの詳細レコード上に、Amazon APIから取得したデータを表示する方法について紹介します。

少々長くなってしまうので、簡単に本稿の構成を書いておきます。

1.AmazonのAccess Key ID と Secret Access Key、トラッキングIDの取得方法について

2.phpを利用したAmazonへのパラメーターの生成方法について

3.kintoneからのJavaScript呼び出しとJavaScript内でのAjaxの記載について

その前に・・・本件を実現するために必要なものがあります。それは例えば・・・

  1. パソコン。ノートでもデスクトップでもよいですが、スマートフォンや俗にいうガラパゴス携帯、またタブレットからの利用は考慮していません。
  2. パソコンのブラウザ。本件ではGoogle Chrome、Firefox、Internet Explorer9、11で検証しています。その他のブラウザでは予測不可能な動作に遭遇するかもしれません。もちろん、他のブラウザでも動けばそれに越したことはありません。ノウハウはぜひ教えて頂ければ^^;)・・・。とりあえずこの4種でお願いします。
  3. phpの動作するサーバー。今回の検証で使用したレンタルサーバーは、php.iniも変更できず、pearなどのライブラリも利用できません。SSLも専用でははく共用SSLを使用しています。phpネイティブだけを頼りに構築しているので、サーバー間の動作差異はあまりないと思えます。なお、レンタルサーバのOSはUnix系で、Apache 2.2で動いているそうです。phpのバージョンは5.3.2です。
  4. kintoneの画面ですが、最低限3つのフィールドが必要です。Isbnを入力するためのフィールド(名称:F_Isbn)を追加し、Amazon情報表示用のスペース(名称:Space_Image)と画像表示用のスペース(名称:Large_Image)を追加してください。
    表にまとめると以下のような感じとなります。

    フィールドタイプ フィールド名 フィールドコード 説明
    文字列(1行) ISBNコード F_Isbn ISBNコード用
    スペース Space_Image Amazon情報表示用スペース
    スペース Large_Image 画像表示用スペース

    (※以下の結果画面は違うフィールドも多数入っていますが)

    それらを満たし、かつ、kintoneにカスタマイズを加えると、以下のように詳細画面にAmazonからの呼び出し結果が表示できるようになります♪

最後になりますが、本稿は2014/10月に書かれました。その時期のkintoneとAWSの仕様に合わせています。cybozu.com developers networkへの掲載に合わせ、サイボウズ社のご担当者のチェックを経て、2015/2月のkintoneのバージョンアップ内容と本稿の記載を照合させた上で投稿しています。2015/7現在、まだ同じ仕組みで動作しているので、本稿の内容に問題ないとは思われますが、今後のkintoneおよびAWSのバージョンアップによっては本稿の内容が正常に動作しない恐れもあります。ご承知の上、ご参考になさって下さい。

1.AmazonのAccess Key ID と Secret Access Key、トラッキングIDの取得方法について

 https://www.amazon.co.jpにアクセスしましょう。まずはここから。

 次にアカウントを既にお持ちの方はログインし、まだの方はアカウントの新規作成をお願いします。

 アカウントでログインすると、下の図の赤枠が こんにちは ○○○さん という表示になっています。

 その赤枠部分をクリックすると、アカウントの管理画面に移動します。

管理画面では、アフィリエイトの報酬結果を見たい気持ちをこらえ、ページの下端まで移動してください。すると下図のような記載が見つかると思います。その中のアソシエイト(アフィリエイト)をクリックしてください。

 下図は、アソシエイト・セントラルの画面です。左上にIDのようなものが書かれています(赤枠囲み)。これがkintoneからAmazonへアクセスする際に必要な情報の一つ「トラッキングID」です。是非φ(..)メモしておいてください。

 続いて、上図のメニューバナーの中に Product Advertising APIというのがあります。そのバナーをクリックしてください。Product Advertising APIのページに移動します。

 Product Advertising API のページ内にはAmazonへのAPIアクセスの奥義が沢山書かれています。是非 お読み頂ければと思います。が、ここは先を急ぎましょう。

 ページの中ほどに、下図のようなリソースというコーナーが設けられており、その中にアカウント設定というリンクがあります。これをクリックします。

 アカウントサービスのページに移動しました(下図)。アクセスキー情報という枠の中に、こちらのリンクというリンクがあります(下図の赤枠です)。これをクリックしてください。

 ダッシュボードのページに移ったと同時に、ダイアログボックスが登場します(下図)。Amazonでは、アカウント管理についてはIAMというサービスを推奨しています。きめ細やかな各種権限設定が可能になっているようです。しかし、今回のAmazonへのAPIに当っては、最初にAmazonにログインした際に使用したアカウント(IAMではルートIDと呼んでいるようです)の認証情報を使用する必要があります。なので、先にContinue to Security Credentialsの方をクリックして下さい。

 下図のようなYour Security Credentialsの画面が表示されました。右側の + Access Keys(Access Key ID and Secret Access Key)をクリックして下さい。

 下図のようにメニューが開きました。Important Changeとメッセージがあります。これはSecret Access Keyの取扱いが変更になり、以前から持っていたAmazonアカウントに紐付いたAccess Key IDでは、再取得を行わないとSecret Access Keyが使用できないという意味です。なので、新たなAccess Key IDを作成しました。新たなAccess Key IDの作成は下図のCreate New Access Keyをクリックすると発行できます。発行が終われば、前のAccess Key IDはDeleteしてください。

新たなAccess Key IDを発行した画面が下図です。Show Access Keyをクリックすると、今回kintoneからAmazon APIへアクセスする際に必要な情報の二つ「Access Key ID」「Secret Access Key」が表示されます。是非φ(..)メモしておいてください。Download Key Fileをクリックすると、csvファイルで2つのIDが保存できます。

 これで、Access Key ID と Secret Access Key、トラッキングIDの3種類の情報が取得できました。3種類とも是非φ(..)メモしておいてください。 図が多くて見にくかったことでしょう。お疲れ様でした。