38 を参考にして組まれていってもいいだろ う。一般的なWeb の技術情報をそのま まJACi400 に応用できることも、HTML を自由に作成できるというJACi400 の 魅力である。連携も非常にシームレスで ある。 JACi400環境でのWeb APIの使用　 ―JACi400でグラフを表示させる 　JACi400 環境での、Web API のシン プルな例を1 つだけ紹介する。活用につ いては、マッシュアップという形で説明 したいと思うので、ここでは、Web API とJACi400 との連携方法を中心に 述べる。 　例えばIBM i 上にある売上情報をビ ジュアルに把握したい場合、どうしても グラフを活用したくなる。しかし、 Web 上でグラフを表現する場合、テー ブルを駆使したり、複雑なJavaScript を実装したり、そのためだけにFlash を導入したり、ハードルの高いイメージ が少なからずある。 　そこで、前述のGoogle Chart API を 用いてグラフ化を導入してみる。Google Chart API は非常にシンプルな構造に なっていて、「データ」と「フィールド名」 をURL のパラメータとして受け渡せば、 グラフを画像として表示してくれるもの である。 　なお、この方式を一般的に「REST 方式」と呼び、導入がシンプルでわかり やすいため、多くのWeb API がこの方 法を採用している。 呼び出しURLの例 http://chart.apis.google.com/chart?c ht=p3&chd=t:60,40&chs=250x100&c hl=Hello|World 　例えば、このようなURL を実行する と、自動的に2 つの項目があるグラフと して画像を表示させることができる。 　このURL を分解すると以下のように なる。 �@ http://chart.apis.google.com/chart? �A cht=p3& �B chd=t:60,40& �C chs=250x100& �D chl=Hello|World 　まず、�@とそれ以降に大きく分かれる。 �@がグラフを表示する関数（もしくは API名）で、それ以降はパラメータと思っ ていただくとわかりやすいかと思う。 　ちなみに、�Aはグラフの種類、�Bは項 目の値、�Cはグラフの大きさ、�Dは項目 の表題にあたる。このようなシンプルな 構造により、動的にURL を作成するだ けで、動的なグラフ表示が可能になる。 　図5 は、JACi400 と連携を行ったグ ラフサンプルだが、ここで記述している ソース7 についてはそれほど多くないこ とに気づくであろう。このソースでは5 項目固定になっており、動的に増やそう と思えば、それに応じたJavaScript を 記述してURL を完成させればいい。【図 5】【ソース7】 　また、ここで1 つ気をつけていただき たいことがある。このソース7 をそのま ま実行すると、項目名に、例えば全角文 字を指定した際にその文字が欠けてしま う。これは、多くのWeb API がWeb 上で主流になりつつあるUTF-8 の文字 コードを採用しているためであり、うま くパラメータの受け渡しができていない のが原因である。 　Shift_JIS で開発を行っている場合は、 何らかの処置が必要である。一般には、 JavaScript であらかじめ用意されてい るencodeURIComponent 関数を利用す ることによって、対処が可能だ。 encodeURIComponent(document.frm. JS1A.value); 　セットする際に、このencodeURI Component 関数を挟んで受け渡すこと で、文字コードの問題を回避できる。図 5 のような形で、JACi400 上でのグラフ 表示が可能になる。 Web APIを利用する場合の注意点 　今回、非常に便利なサービスとして、 Web API の活用を取り上げた。ここで 念のため、Web API の利用において配 慮が必要な点を2 つ挙げておきたい。 ●利用許諾条件 　利用用途によっては、サービス対象外 のケースとなる。例えば、Google Maps は一般のWeb ユーザーが観覧できない サイトでなければ使ってはいけない、と いう規約が存在する。注意してほしい。 ●サービスの停止リスク 　第三者から提供されるサービスである ため、サービスの停止などには留意して いただきたい。複数のWeb API を使用 する場合は1 つのサービス停止が、シス テム全体の停止につながらないように工 夫が必要だ。また、これらのサービスを 使用する場合、事前に代替サービスを探 しておくことも必要な対策と言える。 JACi400との マッシュアップ 例：ミガロ. オリジナルTシャツ注文システム 　今回は、JavaScript やWeb API など、 Web アプリケーションのさまざまな仕 組みをご紹介した。せっかくなのでこれ らの技術を使用し、JACi400 でのマッ シュアップを実践してみたい。 　今回作成するのは、在庫照会注文シス テムだ。わかりやすいように「ミガロ． オリジナルT シャツ注文システム」と 名称をつけ、ユーザーからオリジナルT シャツの注文をもらうシンプルな仕組み をWeb アプリケーションに作り上げる。 【図6】【図7】【図8】 　これまで紹介した技術、JavaScript、 Web API などをできるだけ多く使用す るものとする。 �@タブ「商品を選ぶ」 　まず、Flash でビジュアルなカラー選 択ボタンを作成した。もし、すでに Web カタログとしてFlash がある場合 は、それをカスタマイズしてもよい。自 社で作成しなくても、この部分が得意な Web デザイン会社等に依頼するなどと 想定していただければと思う。 　Flash を使用しているので滑らかな表 現が可能になる。ここでカラー選択、個 数指定なども可能になる。人気カラーの 内訳はGoogle Chart API によるもので ある。【図6】 �Aタブ「画像を合成する」 　Flash 指定が終われば、ページ自体は 変わらずタブを移動する。この機能は JavaScript によって実現している。 　ユーザーは、PHP の機能によってファ