/ / 朝 7 事 que Ⅳ 3 」の 、、変更点 着手から一年半かけてようやくリリースとなっ 大幅な「スリム化」「洗練」「標準準拠」 た「 jQue 「 y3.0 」。 大幅な「スリム化」「洗練」「標準準拠」が行なわ れています。 JavaScript そのままだとリスト 3 の通りですが、 「 jQueryJ とは jQuery の記法ではリスト 4 のようにきわめて簡単 ■「 JavaScript 」を簡単にする「ライプラリ」 になります。 「 jQuery 」とは、 JavaScript を簡単に書くため のライプラリです。 【リスト 2 】このタグの間にテキストを入れたい 「仕様の通りに書けば、 JavaScript アプリとし <div id="here"> ここに入れる </div> て実行される」という意味では「フレームワーク」 と呼べるでしよう。 【リスト 3 】正統的 JavaSc 「 ipt var here document. getE1ementById("here"); 「 jQue Ⅳ」のホームページ here.innerHTML "ThiS iS a pen" http://jquery.com/ 【リスト 4 】 jQuery で書くと jQuery の導入は、以下のように簡単です。 $(#"here"). htm1("This is a pen"); [ 1 ] 「 jquery-3.0.0. js 」のような名前の「ひとつの大 ■特に Ajax で重宝する きな JavaScript ファイル」をダウンロードして、 自分の Web アプリケーションのフォルダに置く。 最も jQuery で重宝されるのが「 Ajax 」に代表さ [ 2 ] HTML 文書の「 head 」タグ内 れる「非同期処理」です。 でリスト 1 のように参照する。 「非同期処理」とは、サーバにデータを要求し、 応答を待たずに次の処理へ進む技術です。 jque -300 「 jQuery 」にはそのための便利な記法が揃って います。今回の「ノヾージョン 3.0 」でも特に「非同期処 理」の書き方が整理されたので、このあと解説します。 古いプラウサへの対応を破棄 ■着手から 2 年半 さて、 jQuery の公式プログによると、「 3.0 」の開 発開始は 2014 年 10 月。 2016 年 6 月の完成まで 1 年半です。 なぜ、それほどの時間がかかったのでしようか。 ■レガシーコードを捨てて軽量化 手間のかかった変更点は、古いプラウザにも対 「 jQueryJ の本体は JavaScript ファイル 【リスト 1 】 jQue 「 y の本体を参照する <script type "text/javascript" jquery-3.0.0. js"></script> src あとは、 JavaScript の中に jQuery の提供する 関数や記法を書いていくだけです。 ■記法を簡単にできる jQuery の典型的な記法例は以下の通りです。 本記事でも何度か用いる例として、リスト 2 の ように「 id 」をつけた「 div 」タグの中にテキストを 挿入する方法を示します。 97

ライブラリ」 最終回 JavaSc 「 ipt で制御できる画面なしプラウザ 「 PhantomJS 」 前回は、「 PhantomJS 」を使って、 (a) 「画面キャ プチャを撮影する方法」と、 (b) 「表示されている HTML をスクレイピングして必要な情報を取り出 す方法」を説明しました。 今回は、「 PhantomJS 」で、 (c) 「 HTML フォー ム」にアクセスして、「フォームに文字入力」したり、 (d) 「ページ遷移」したりする方法を説明します。 0 後編 「ページ移動」と「フォーム操作」… 0 大澤文孝 page. eval uate(function() { var result ・・動かしたいコード・・ フォームには、どのような方法で、データを 人力してもかまいません。 標準的な方法は、「 document. getElementBy ld 」メソッドを使って要素を取得して設定する方 法です。 しかし、それは少し面倒なので、リスト 1 では、 「 jQuery 」を使いました。 Google (https://www.google.co.jp/) にアクセス 「 PhantomJS 」では、 (a) 「入力フォームに入力 して、ソースコードを見ると、検索ポックスは、 する」、 (b) 「ボタンをクリックする」、 (c) 「次の 次のように、「 q 」という名前が付いたテキスト ポックス (<input type="text">) であることが分 べージに進む」、 (d) 「前のページに戻る」など、 人間が普段プラウザにしている操作もできます。 かります。 「 WebKit 」べースですから、「 Cookie 」や「 Ses <input name="q" title=" 検索" class= gs id="lst-ib" role="combobox" aria- sion 」にも対応しており、エミュレートによる制 haspopup="false" style='background: 限がほとんどないのも、大きな利点です。 略・・ type="text" max1ength="2048" val autocomplete="off"> ue= たとえば、リスト 1 ( 本稿末 ) のようにすると、 G 。。 gle で「工学社」を検索した結果を、画面キャ プチャできます。 ■「フォーム」に値を入力する フォームに値を入力するには、読み込んだ Web/R—ジの中で JavaScript を動かし、その Ja vaScript のコードから、フォームに入力します。 「 evaluate 」メソッドを使うと、 Web ページの 中で JavaScript を動かせます。 【今月紹介するツール】 PhantomJS http: 〃 phantomjs. 0「g/ 開発者 Ariya Hidayat ライセンス BSD ライセンス 操作の自動化 5 そこでリスト 1 では、次のようにして、このテキス トボックスに「工学社」という値を設定しました。 var input $('input[name=q] つ ; input. val(" 工学社 "); ■フォームをサプミットする 同様にしてフォームをサプミットします。 Google のフォームは、 1 14

工学社の新刊案内 JavaScript と WebGL による 画像処理プログラミング ・小笠原徳彦■ A5 判・約 180 頁・ 2300 円 ■酒井幸市・ A5 判・ 304 頁•3000 円 「 MongoDB 」は、 MongoDB c が中心と ー・「 webGL 」は、 web 上で 3D グラフィックスを なって開発している、「 NoSQL 」の「データベー 画像処理プロ”ミ”動かすための AP に ス管理システム」で、オープンソースです。 本書は、「 JavaScript 」と「 WebGL 」を使って、 本書では、「 MongoDB 」を特に「アプリケー 「 2D 」および「 3D 」の画像処理 「加工」 ションからの使いやすさ」に的を絞って解説。 第「解析」「合成」の仕組みを分かりやすく解説。 7 月下旬発売予定 ー 0 短いコードを書くだけでプログラムの「使い勝手」が大きく変わる ! ー 03 「 Linux 」「 MacOS 」「 Windows 」で使える「バッチ処理」 ! ■大澤文孝・ A5 判・ 192 頁■ 2300 円 ■萩原利男■ A5 判・ 1 60 頁・ 1900 円 「 PHP 」や「 JavaScript 」を中心に、 Web シ 「シェル」には多くの種類がありますが、その中 Web システム用 ライプラリ " , 。ステムで使える「ライブラリ」や「フレームワー でも「 Bash 」 (Born Again Shell) は、 UNIX 系 シェルスグ丿フネ・・ ク」、開発のときに使うと便利な「ツール」を紹介 OS や MacOS X で標準搭載されており、最もよ します。 く使われています。 世の中には、たくさんのオープンソースの「ライ また、「シェルスクリプト」は、 C 言語や Java な ブラリ」があり、それらを使えば、数十行のコードを どの専用言語と比べて、使い方が簡単で、デバッ 書くだけで、プログラムの「使い勝手」が グなども容易にできるため、プログラミン 大きく変わります。 グ学習の入門言語としても適しています。 ー 0 「 MacOS 」「 FreeBSD 」「 Android NDK 」の標準コンパイラを Windows で ー 0 「 Windows / Mac / Linux 」で使えるオープンソースのコードエデイタ ・小田政明・ A5 判・ 1 76 頁■ 2300 円 「 Clang 」 ( クラン ) は、 2005 年に登場した、比 Clang 、較的新しい、「 c 言語 / c + + / Objective-C 」 C 言語 コンパイラです。 「 Mac OS X 」や「 FreeBSD 」では、「標準コ ンバイラ」として採用しています。「 Android NDK 」の「標準コンパイラ」も「 Clang 」です。 本書は、「 C ng 」の特徴と機能、 ang を使うメリットを、実例を交えて解説。 ー 0 「 Linux コンテナ技術」で「仮想環境」を自動構築 ! ■西島剛■ A5 判・ 160 頁・ 1 900 円 「 Docker 」は、「 Linux コンテナ技術」を使っ て、サーバ上に「仮想環境」を自動的に構築す る、オープンソースのソフト。 「 Linux コンテナ技術」を知らない人でも 「 Docker 」が理解できるように、「 Linux 」の基本 的な知識から「 Docker 」の導入方法まで、図解 で分かりやすく解説。 ル 0 定番「 3D グラフィックス A 円」の基礎知識と使い方 ー手軽に使えて高機能 ! ー 0 「 2D 」「 3D 」画像処理の「加工」「解析」「合成」 ・ BOOKS はじめての MongoDB はじめての Visu Studio Code Ⅵ 5u0 ー StudiO Codea- ト : こ 0d0 20W PRINTING 0 Web システム用ライプラリ活用ガイド 基礎からのシェルスクリプト 0 C n g ではじめる C 言語 ■清水美樹■ A5 判・ 1 76 頁・ 2300 円 「 VisuaI Studio COde 」は、マイクロソフトの 「 VisuaI studio 」ファミリーですが、オープンソー スのコードエデイタで、無料で使えます。 本書は、 Linux の「 Ubuntu 」を環境例として、 「 Visual Studio Code 」の、導入方法、基本的 な操作、コード編集のための機能の使い方など、 詳しく解説しています。 0 を′ - ・ BOOKS はじめての Docker 獰快適タイビング ■小林雅人・ A5 判・ 176 頁・ 2300 円 「獰 1 」 ( ラテフ ) は、「 TEX 」をもとに開発さ れた、文書作成ソフト。 快適タイビング 今まで「」の使い方を解説した本は多数 ありましたが、本書は、「いかに快適にタイプする か」ということを中心に解説。 0 ① ck DirectX 1 1 3D プログラミング [ 改訂版 ] はじめての Kingsoft Office ■ I/O 編集部編■ B5 判・ 368 頁・ 2800 円 DirectX の開発環境である「 VisuaI Studio 」 (VisuaI C + + ) を使って、「 Direct3D 1 1 」の基 本的な知識とプログラミング方法を、初歩的なレ ベルを中心に解説。 Windows8 ( 8.1 )/7/Vista 対応。 ・本間一 ■ A5 判・ 1 92 頁・ 2300 円 「 Kingsoft Office 」の、ワープロソフト 「 W ⅱ te 「」、表計算ソフト「 Spreadsheets 」、プレ Kingso Office ゼンテーション「 Presentation 」の 3 つのソフト について、使い方を分かりやすく解説。 また、初心者でも使いこなせるように、よく使 う機能や操作方法については、手順を追って詳 しく説明しています。 3 ロプロクラミンク DirectX11 ま インターネットでのこ購入は 「 http:″www.kohgakusha.00 ・ jp/tsuhan/. 」 工学社

rjQuery3 」の変更点大幅な「スリム化」「洗練」「標準準拠」 応するための「レガシーコード」を思い切って破 棄したことです。 jQuery の最初の発表は 2006 年、すぐに大好 評を博し広く用いられるようになりましたが、 の 10 年ほどの間に Web の利用形態は「 Ajax 」 「 HTML5 」「ソーシャル」「ビッグデータ」など大きく 変化し、プラウザもそれにつれて変化してきました。 そこで、「 jQuery3.0 」では、対応するプラウザの バージョンは以下に限定されます。 ・・ 9 以上 ・ lnternet ExpIorer ・・ ・ Chrome, Edge, Firefox, Safari ・ Opera ・ iOS 用 Safari ・・現行バージョンまたはそ の一つ前 ・現行バーション ・・・ 7 以上 ・ Android 用ブラウザ・・・ 4. O 以上 Chrome などで「現行バージョン」とあるのは、 これらのプラウザが自動アップデートするので 「古いバージョンでは」という議論は基本的に出な いためでしよう。 JavaScript ファイルは平文テキストなので、書か れているコードが 1 字減れば「 jQuery 」本体のファ イルサイズは 1 バイト確実に減ることになります。 そこで、古いプラウザを多くサポートしている jQuery1.1 ( 上 ) と、新しい 3.0 ( 下 ) のサイズを比較 してみましよう。 以下の図の通りです。 バージョンアップのたびに肥大化するソフトが 多い中、サイズが変わらずむしろ新しいほうが小 さいように見える ( OS 用の表示なので正確では ありませんが ) というケースは珍しく、「洗練・ス リム化」の効果が伺えます。 jquery- 1.1 ~ 4j5 287 KB jque ツ・ 3.00. js 253 KB jQue 「 Y の新旧バージョンの比較。 肥大化していないことが分かる 98 この思い切ったレガシー破棄で開発者が混乱 することのないように、バージョン「 1. x 」「 2. x 」系 列も、それぞれアップデートされています。 また、「 query-migrate. 3.0.0.js 」という、レガシーへ の互換性を考慮したライプラリも提供されています。 「 Ajax なし」バージョンも 「 Ajax 」への利用が大きな魅力の jQuery で はありますが、 Ajax を利用しない Web アプリの ためには、 Ajax のためのライプラリを含まない 「 jquery-3.0.0. slim. js 」が提供され、さらにサイズ の小さいファイルとして利用できます。 味、重複、踏黙の記法を排除 0 まったく新しい記法はない では、「コード的には ? 」というと、実は「 3.0 」で 「今までできなかったコレが可能に ! 」という感じ で新しい名前でドカンと打ち出されたような、新 規の変更はありません。 しかし、細かい変更がたくさんあります。 0 仕様変更の例 仕様変更の主な目的は「曖眛」「重複」「暗黙」の 書き方の排除です。 多くは古い I プラウザで必要とされる仕様だっ たものです。以下にその例を示します。 ・メソッド「 removeAttr 」は要素の属性を「字消去 する」メソッドが、今までは「ブーリアン値」の属 性に removeA 権 0 を適用するとその属性が「囿 se 」になるという例外的な適用になっていたの で、この適用がなくなった。 ・チェックポックスのような「複数選択可」のコン トロール・グループで何も選択されていないとき、 今までは「 nu 旧を返していたが、これからは「空の 配列」というオブジェクトを返すことになった。 ・部品を見えなくする「 hide 」、見えるようにする 「 show 」は jQue 「 y の初期における「テモ」的メ ソッドだったが、 3. O でついに「非推奨」となった。 CSS スタイルシートの「 disp y 」属性を「 none 」