Web技術の昨今の動向２点 10/2

今日は以下の２つの技術を紹介する。 （各自で詳しく調べてみたり試用してみたりして、結果を報告下さい）

1. ハイブリッドアプリケーション
2. スクレイピング

ハイブリッドアプリケーション

• 特徴： １つのプロジェクトで複数のプラットフォームで 　 動作するプログラムが作れる
• <=> ネイティブアプリケーション
  • 性能の要求されるアプリケーションには不向き （スピードや精細な描画を求められるゲームなど）

Cordovaについて

• Web技術（HTMLとCSSとJavaScript)で アプリケーションを記述する。
• ほぼ同機能の技術として PhoneGap がある
  • その経緯についてはこういう記事を参照
• オンラインで使えるサイトもある（monacaが有名）
• 様々な開発プラットフォームで動作する
  • Node.js が動くところならOK
  • npm でインストールできる
• 様々なTargetにも対応
  • ここでは、とりあえず androidを中心に話をする。
• Target毎に、以下のような下流工程を支援するための 　 補助的プログラムを用意する必要がある。
  • 当該Target用のバイナリ（実行形式）生成
  • 転送やテスト実行

Android（をTargetとした）開発について

• Android-SDKが必要
  • 以前はSDKを単独で入手できたが、
  • 今はAndroid-Studio(IDEの形をとる大きなソフトウェア）の一部分として提供されており、 IDEを使わないとしても全体を入手してインストールする必要があるようだ。
• SDKの中に、各種の仮想デバイスを想定した「エミュレータ」 も含まれていて、
  • 実機（スマホやタブレット）が手元になくても エミュレータ上で動作テストは可能
  • 実機に接続して実機での実行もできる。
• android-studio は chocolateyでもインストール可能

準備

• cordovaをインストール

    npm install cordova
  

• android-studioをインストール

    cinst android-studio -y
  

• android-studio が配置されたフォルダ （たぶん c:\Program Files の下のどこか）を見つけ、 環境変数 ANDROID_HOME に設定

  • 方法はいろいろあるが、以下の２つをお薦めしておく （詳しくは検索してみてください）
  • setx コマンド
  • Rapid Environment Editor

手順

• アプリケーションフォルダの生成（コマンドプロンプトで）
  （例によって）アプリケーション名（≒フォルダ名）は何でもいいが、以下の例では app1 としておく。

    cordova create app1
  

• その生成したフォルダに移動

    cd app1
  

• target を（１つ以上）設定

    cordova platform add android browser
  

  • この例では２つ設定した。
  • browser 版は、起動すると簡易Webサーバが立ち上がり 　 標準ブラウザの画面にそのページが表示されるというもの。
• （この段階で、HTMLなどに変更を加えることにより、 アプリケーションのプログラムを自由に発展させていくことができるが）ここではサンプルを動作させることにして、 　　特に何もせず次のステップへ。

• ビルド（実行形式を作成する）

    cordova build
  

  • 特定のTargetに対応する版だけをビルドすることもできる。 そのときは第２パラメータとしてTargetのプラットフォーム名を書く。(実行の時なども同様)

        cordova build android
    

• （Andoroid版の実行に先立って）Android-SDK に同梱されている仮想デバイス（AVD)のうちの１つを 起動しておく。

• （エミュレータ上で）実行

    cordova run android
  

スクレイピング

• （言葉の意味は各自で調べてみて）
• スクレイピングの目的も右図のようにいろいろあるようだ。 （様々な用途での活用を試みてください）

背景

• Webでの、ボタン（や、リンク）の意味が（Webの初期の頃と 比べて）変容した。
  • 昔：<A>タグや、formの中の<input type=submit>
    パラメータとして、ジャンプ先が書かれていた
  • 昨今：Javascriptのプログラムが呼び出される。
    そのプログラムの中で、ページ遷移を、したりしなかったり。
    （Ajax呼び出しでページの一部が書き換わることも多い）

クローリング技術の諸相

右図のように４つに大別できる。

1. （GUIアプリケーションとしての）ダウンローダー
2. （文字によるコマンドとしての）ダウンローダー
   • wget curl が有名.
3. スクレイピングのためのライブラリ
   • プログラミング言語ごとに用意されている（ことが多い）。
   • キーワード「スクレイピング」に、言語の名前を付加して ググってみるといいだろう。
   • 有名なものとしては、たとえば、
   • ruby では mechanize
     • 「Ruby　スクレイピング」で nokogiriが多数ヒットするが、
       nokogiriは、HTMLパーサ（主なスクレイピングライブラリの内部で必ず使われているようだ）
   • node.js では cheerio-cli
4. ブラウザを外からコントロールするアプローチ

今回はその４のアプローチを紹介する。

• 前述の様相変化により、1.～3.で対応できないサイトが増えたのがその理由。 （ページ内に書かれたJavaScriptのコードを実行できるような スクレイピングライブラリが整備されていない）

　原理

• 我々はブラウザを通じてWebを閲覧する。
• その際にマウスやKBから指示（クリックなど）を与えて、 ページでの（Webアプリケーションの）動作を引き起こしている
• それを代行するプログラムを用意してやれば、 自動化が実現できるだろう。

そのとき、制御される側のブラウザとしては、 + 一般のブラウザをそのまま使う + 自動化のための専用ブラウザ

という選択肢があるだろう。特に、後者のものは、 画面の状態を表示する必要は特にないことから、 表示のない「ヘッドレスブラウザ」と呼ばれる。

主な製品（フリーのものとして）

1. PhantomJS + CasperJS
2. Selenium Webドライバー

各自で試用してみてください。