Articles tagged with: amazon

amazon 世界最先端の戦略がわかる


私はあまりamazonで買い物をしない。
そもそも私は物欲よりも知識欲のほうが勝っている人だ。そのため、普段はオンライン・ショッピングすらあまりしない。amazonもたまに本を買う程度だ。
だが、amazonのすごさについては十分に理解しているつもりだ。

あらゆる商品を扱うamazon世界の豊かさ。家にいながらにして世界中の品物が手に入るのだから、現代のサンタクロースと呼んでも過言ではないだろう。

2018年から世界の長者番付の筆頭に就いたのはamazonの創業者であり、今もamazonを率いるジェフ・ベゾス氏だ。
世界中のオンライン上の流通をほぼ一手に握ったのだから、氏が世界一になった理由もわかる。

だが、私のような技術者にとって、amazonのすごさは別にある。それはAWSだ。
AWSこそはクラウドの雄だ。情報技術の基盤サービスとして必要なあらゆるサービスを網羅されている。おそらくGoogleやMicrosoftの同種のサービスよりも。
そのすごさは、技術者の誰に聞いても証言してもらえることだろう。
あえて弱点をあげるとすれば、英語ベースのドキュメントが多いため英語圏以外の人にはとっつきにくいことだろうか。

本書はAWSを含めたamazonのビジネスモデルについて解説する。
著者は日本マイクロソフトの社長として名の知れた方だ。その視点は、amazonと同じGAFAMを構成するMicrosoftの経営を知っている。
だが、そのような上を見た人の視点でありながら、著者はamazonに対して驚嘆を隠さない。
その結果、本書は全体としてamazon礼賛の論調が勝っている。

だが、それもうなずける。それほどにamazonのすごさが圧倒的なのだ。そのすごさは本書を読めば読むほどに感じられる。
規模が巨大なだけでなく、その成長の速さこそがすさまじい。世界史の上でもamazonほどに急成長を遂げた企業は見つけにくい。おそらくダントツだろう。
しかもamazonは自らの企業情報をあまり公表しない。そのため、本当の規模がどれぐらいなのかはもはや誰にも分らない。おそらく創業者のジェフ・ベゾス氏でさえも。

その秘密として著者はいくつかの切り口から語る。
まずは、徹底した投資主義だ。
儲けや利潤を留保せず、全て拡大のための投資に振り向ける。それによって税金の支出を抑え、自社の規模を拡大することに専念する。
また、amazonが各事業体ごとに自由意志を持ち、ジェフ・ベゾスですらも統制していない。統制をやめることによって管理コストを抑える。
管理のための管理には一切の無駄金は使わない。その金はすべて拡大のための投資に振り向ける。その徹底は見事だ。
それによって組織は肥大しない。しかも、防御のための費用が節約できるだけでなく、企業の活力は維持される。
これが普通の会社であれば、規模の拡大と同時に統制や管理にも気を配る。だが、amazonはそれをしない。だから他社と違って拡大の規模とスピードが違う。それが他社のサービス規模を凌駕し、サービス内容でも優位に立てる。

全ての利潤を自社でまなかうサービスや体制の増強に回す。
本書を読むと、amazonとは徹底した自前主義であることが理解できる。
物流やシステム回りを自社で構築することにより、他社の都合や支払いを気にせずに社業の拡大に専念できるのだ。
その構築のノウハウを研ぎ澄まし、クラウドとして全世界に広げたのがAWSということだろう。

物流網の構築やシステムの内製により、世界中に兵站の網の目を張り巡らせたamazon。
いまや、圧倒的な商品点数と物流網を確保することで認知度は圧倒的になり、さらに潤沢なキャッシュフローを擁するまでになった。
著者はそのキャッシュフローの潤沢さこそがamazonのすごさだという。

仕入れた商品が手元でキャッシュになるまでのキャッシュ・コンバージョン・サイクル(CCC)という指標がある。
amazonは小売業でありながら、その値がマイナスなのだ。ウォルマートでさえCCCは12日なのに。普通、CCCがマイナスになるのは飲食業などその場で現金払いがされる業態に限られる。それなのに小売でそれを実現したamazon。
つまり仕入れの前に現金を手に入れてしまう。それにより、キャッシュの流れが後手後手に回らず、先手を打てる。
著者はそのキャッシュフローにこそ、amazonが次々と規模拡大にまい進できる秘密があると指摘する。

どのようにして先手を打てるようなキャッシュフローを構築したか。それは、amazonが開設したマーケットプレイスの仕組みによるところが大きい。マーケットプレイスの開設により、決済までの間、顧客から預かり金を受け取ることができる。この預かり金こそamazonのキャッシュフローの源泉だと著者はいう。
プラットホームを開設することの利点は、預かり金を自由に扱えることにある。それによってキャッシュフローを潤沢にする。それこそがamazonの経営の秘密だろう。そのあたりの仕掛けが本書では学べる。

ここまで巨大な体制を構築したamazon。だが、今のamazonに硬直の兆しはない。むしろ積極的に他分野に打って出ている。生鮮流通・無人店舗・自動配達・宇宙・AI・顔認識など。
そうした活力は、管理部門にコストをかけない社風が大きく影響を及ぼしているはずだ。

おそらく、今後とも私たちはamazonとは無縁でいられないだろう。
私が推しているkintoneもアメリカ版は全てAWSを基盤として動いている。

ここまで大きくなると、amazonから学べる部分はあまりないように思える。
だが、ヒントはある。
例えばamazonの会議でプレゼン資料が禁止されていることはよく知られている。その趣旨は資料を作っている暇があればアイデアを出し合う時間に使え、ということだろう。

そうした無駄を徹底的に省くamazonの経営手法。私たちがそこから学ぶとすれば、「協調は必要とせず、個のアイデアが優先される組織であれ」の精神だろう。
amazonにとってはコミュニケーションすらも無駄だとされている。コミュニケーションが必要なうちは、組織は未熟というわけだ。
個人が自立し、研修や社風の醸成などが不要な社風。
もちろん、それには社員一人一人に組織への依存があっては成り立たないはずだ。

この考え方に立てば、私の経営などまさに未熟に違いない。
顧客ごとに個別の対応をしているうちは規模の拡大など難しいことはわかっているつもりなのだが。

‘2019/9/13-2019/9/19


アマゾン入門


本書はAmazon.comについての本ではない。本書のテーマはアマゾン川とその流域の暮らしについて。世界最大の流域面積を持ち、流域には広大な熱帯樹林を擁し、肥沃で広大な場所の代名詞でもあるアマゾン。そこに移民として住み着き、苦労しながらも成果をあげ続けている日本人がテーマだ。

周知の通り、Amazon.comのサービス名の由来の一つにアマゾンがある。アマゾン流域の抱える膨大な広さと豊かな資源。それにあやかったのがAmazon.comだという。今のネット社会に生きる私たちはAmazon.comやAmazon.co.jpにはいろいろとお世話になっている。なっておきながら、その名の由来の一つであるアマゾン川やその流域のことをあまりにも知らない。せいぜいテレビのドキュメンタリー番組でアマゾンを覗き見るぐらい。

著者はそんなアマゾンに魅せられ、長年のあいだに何度も訪れているという。いわば日本のアマゾン第一人者だ。著者の名はジャーナリストとして、ノンフィクション作家としてある程度知られている。だが、そのイメージはアマゾンと対極にある。なぜなら著者が精力的に追っているのは技術だからだ。日本の技術の発展を追った連載や書籍によってその名を高めてきた。だから本書のタイトルからはどうしてもAmazon.comを連想してしまう。

しかし本書はAmazon.comとは無縁だ。それどころかあらゆる技術の類いにも縁がない。インターネットどころか、パソコンすらない時代と場所。なにしろ本書に描かれているエピソードには村にカラーテレビが入ったと喜ぶ人々の姿が登場するぐらいだから。本書が取材されたのは1979年。1979年といえば、日本では一般社会にもカラーテレビが当たり前になりつつある頃。ところが当時のアマゾンではそれすら物珍しいものだった。だから、本書にはAmazon.comどころか、それと対極のエピソードで占められている。

本書は著者にとって二度目のアマゾンの旅の様子を中心に描かれている。1979年の当時は、世界が情報技術に覆われる前の時代だ。世界がまだ広く遠かった頃。アマゾン流域ではさらにそこから何十年も遅れており、アマゾンは無限の広さを謳歌していた。日本人にとって規格外の広さを誇るアマゾン。本書でもそのことは随所で紹介される。例えば河口にある中洲とされるマラジョ島だけで九州やスイスの大きさに匹敵するという。河口だけで三百キロの幅があり、アマゾン流域には日本が16個ほどすっぽりはいること。何千キロも河口から遡っても水深がなお何十メートルもあること。大西洋の沖合160キロまでアマゾンから流れた水のおかげで淡水になっていること。本書の冒頭には、アマゾンの大きさを表す豆知識があれこれ披露される。そのどれもが地球の裏側の島国に住む私たちにとってリアルに感じられない。

アマゾンといえばピラニアが有名。だが、本書では人間を丸呑みする大ナマズが登場する。そのようなエピソードを語るのは本書にたくさん登場する日本人だ。ブラジルをはじめ、南米の各地には日本人の移民が大勢根を下ろしている。厳しい環境の中、成功を収めた日本人も数知れずいる。ジャポネス・ガランチードとは本書のまえがきに登場する言葉。その意味は「保証付きの日本人」だ。日本人の勤勉さと想像を絶する苦労の果てに授かった称号だろう。

厳しい環境に耐え抜きアマゾンに土着した日本人はたくましい。そこには言葉にできないほどの苦労があった。著者はそれらの苦労を紹介しつつ、アマゾンの現状とこれからを描いていく。その描写は収支から経済活動、日々の暮らしにまで及ぶ。彼らの暮らしが本当に地についている事を感じるのはこんなセリフにぶつかったときだ。「アマゾンは広い広いというけれど、日本より狭い」(105P)という言葉。とにかくまっ平なアマゾンに過ごしていると、その広さは全く実感として感じられないのだろう。日本にいる私が各種データやGoogle Earthでみるアマゾンはディスプレイに収まってしまうサイズだ。だが、それこそまさに机上の空論。現地で住まう人々の感覚の方が実感として正しいに決まっている。現地の人々が感じる狭さこそ、人間の五感で得られた実感であり、ディスプレイで知った狭さなどまやかしでしかない。

そんな入植者の勤勉さがアマゾンにはよく合ったのだろう。もちろん勤勉でない日本人もいたはずだが、そうした方は早々にアマゾンから淘汰される。残った勤勉な日本人が現地で成功を収める。なぜなら現地の人々より勤勉だったから。ゴム栽培、ジュート収穫の苦労。トランスアマゾニアンハイウェイの開発秘話。マラリアに悩まされ、原住民に襲われる日々。日本では味わえない苦労の数々。そうした人々の苦労話は、想像すらできない。だが、彼らが乗り越えて来たことだけはわかる。

著者もマナウスから百数十キロ離れた場所で野営をする。アマゾンを知るには最低限一晩の野営はしなければ、といわれ。一晩を静かな原始林で過ごした著者は重要な示唆を得る。
「原始林は、なんともの静かなことか。それに比べて文明地の苛立つ雑踏と、騒がしさ。原始林の”清潔”に対し、文明には”不潔”という言葉しか与えられない。」(197P)

全てが生と死に直結するアマゾン。一方でシステム制御され、効率化を追求したAmazon.com。その二つが同じ名前でつながっている事をAmazon.comの創業者ジェフ・ベゾスの発想だけで片付けてはならない。そこには大いなる啓示を読みとるべきではないか。

本書が描き出すアマゾンは、人間の力の卑小さを思わせる。自然を制御するには思い上がりもいいところと。確かに人間の経済活動は地球の環境を変えつつある。それは人間の制御の及ばぬ領域において。そして本書が取材され出版された当時に比べ、今の私たちの周りには自然よりもさらに統制の難しい存在が姿を現しつつある。人工知能だ。人工知能を推し進める旗頭の一つこそAmazon.comであるのは言うまでもない。そして、人工知能がシンギュラリティを実現したとき、人間はただ取り残される。その時人間は悟るだろう。結局、人間が主体となって神となって地球を操ることなどできはしないことに。かつては自然が、これからは人工知能が。

人間が生体の人間である限り、人間はいつまでも人間だ。そして、その営みこそは、人間が古来から未来まで変えようにも変えられない部分だと思う。本書に書かれているしんずいこそ、その営みに他ならない。本書に描かれた苦労する日本人。わずかながらでもアマゾンに足掛かりをつかみ、成功しつつある人々。彼らの努力こそは美徳であり、人工知能に対する人間の価値の勝利であるはずだ。

もし人間が人工知能の支配する世界で存在感を見いだすとすれば、本書に描かれた人々の姿は参考になるはず。よしんば人工知能が自立する未来が来なかったとしても、文明に飼いならされた人間がどこかで退化して行くことは避けられない。仮に日本人の美徳を勤勉さに求めるとすれば、仮に日本人の勤勉さが世界から称賛されるとすれば、本書に描かれた日本人とは、これからの人間のあり方を示唆しているような気がする。

「アマゾンは、将来世界の中心になるんじゃあるまいか。電力は水力発電で無尽蔵だし、世界の食糧庫になるかもしれませんよ」(96P)とのセリフが本文に登場する。私が想像するあり方とは違うが、アマゾンが地球と人間の今後の指標となることに違いはない。

果たして、自然を味方に付けたアマゾンの価値観が未来を制するのか。人工知能を走らせ統制に終始するAmazon.comの価値観が未来を席巻するのか。二つの相反する価値観がともにアマゾンを名乗っていること。そこに大いなる暗示を感じる。著者は40年も前に今の技術社会の限界とその突破口をアマゾンに嗅ぎとったのだろうか。だとすれば恐るべきはジャーナリストの本能だ。

本書はタイトルや内容に込められた意図を超えて、今の世にこそ読まれるべき一冊だと思う。

‘2017/08/16-2017/08/17


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種類とも是非φ(..)メモしておいてください。 図が多くて見にくかったことでしょう。お疲れ様でした。