86 清水 孝将 / 伊地知 聖貴 株式会社ミガロ. システム事業部 システム1課 ●Web開発におけるポップアップウィンドウの活用 ●JC/400標準機能による実現 ●JavaScriptによる実現 ●JavaScriptでの活用例 ●補足：Ajaxを活用してHTMLを取得する ●まとめ 1.Web開発における ポップアップウィンドウ の活用 　「ポップアップウィンドウ（以下、ポッ プアップ）」とは、画面上のボタンクリッ クなどによって新たに立ち上がるウィン ドウのことである。 　例えば、一覧でレコードを表示する機 能と、一覧から選択したレコードの詳細 内容を表示する機能を、Web で実現す る場合を想定してほしい。この場合、一 覧画面でボタンをクリックすることで、 すべてが詳細画面に切り替わってしまう と、一覧画面の他のレコード情報と比較 して詳細画面を見ることができなくなっ てしまう。このような場合に、ポップアッ プを有効に活用できる。 　Web でのポップアップの表示には、2 種類の方法がある。 ●新規ウィンドウ 　1 つ目は、新規ウィンドウとして表示 する方法である。新規ウィンドウの生成 は、JavaScript のwindow.open（）メソッ ドを用いることで簡単に実装できるた め、誰でもすぐに実現が可能である。 　ただし、この方法はブラウザやセキュ リティソフトの機能によって、ポップ アップがブロックされることが多い。そ の理由は、この機能が昨今、フィッシン グ広告としても使われており、対策とし てブロック機能が用意されているからで ある。その結果、最近ではこの形式のポッ プアップは使用されることが少なくなっ ている。 ● HTML にタグ要素追加 　2 つ目は、HTML 上へ新たなタグ要 素を追加することで、同じウィンドウ上 にポップアップとして表示する方法であ る。この方法は、JavaScript のコーディ ングを必要とするが、新規ウィンドウが 立ち上がらないため、ポップアップをブ ロックされることがないという特徴を 持っている。 　JC/400 標準のポップアップ機能には、 2 つ目の方法を採用している。 2. JC/400標準機能に よる実現 　JC/400 では、HTML へ新たなタグ要 素を追加することで、同じウィンドウ上 にポップアップが表示可能である。 　実装方法も非常に簡単である。HTML をJC/400 Designer で配布する際に、 画面右上にある「新規ウィンドウを開き ますか？」のチェックボックスをオンに し、その画面の表示位置（top,left）、幅 （width）、高さ（height）、クラス（適 用するCSS）を設定して配布するだけ である。【図1】【図2】 　また、ポップアップとして配布するこ とによるRPG のコーディングへの影響 はなく、ポップアップであることを意識 せず、通常画面と同じ手法で開発するこ とが可能である。 3. JavaScriptによる 実現 　JC/400 では、IBM i にリクエストを JC／400でポップアップウィンドウの制御&活用ノウハウ！ JC/400 の標準機能とJavaScript の2 つのアプローチにより、 ポップアップの開発手法、活用例を紹介する。 略歴 清水 孝将 1983 年10 月04 日生 2008 年甲南大学文学部卒 2008 年株式会社ミガロ. 入社 2008 年04 月システム事業部配属 現在の仕事内容 入社5 年目でDelphi/400 やJC/400 の開発業務を担当。Web に関する 知識や技術を身につけ、Web アプ リケーションのスペシャリストを目 指している。 略歴 伊地知 聖貴 1988 年10 月13 日生 2011 年立命館大学映像学部卒 2011 年株式会社ミガロ. 入社 2011 年04 月システム事業部配属 現在の仕事内容 Delphi/400 やJC/400、RPG の 開発を担当。幅広いプログラム言語 を身につけ、さまざまなニーズに対 応できるSE を目指している。