オープンソースライブラリの選定方法

Web開発現場においてもはや必須となってきているJavaScriptフレームワーク。うまく活用することで、視認性に優れたユーザインターフェイスの実装や高速な開発が可能になります。今回は、オープンソースライブラリの選定方法をご紹介します。

オープンソースのライセンスとは

Web関係のオープンソースライブラリによく適用されているライセンスとして、次のライセンスがあげられます。

・The BSD License
・The MIT License
・GNU General Public License
・Apache License

■The BSD License

The BSD LicenseはUniversity of California, BerkeleyがUnixの実装としてリリースしたBerkeley Software Distribution (BSD)のライセンスを起源としたライセンスです。概要は次のとおりです。

・利用者は著作権表示、The BSD License条項、免責事項を見えるところに記載すれば、変更の有無に関わらず利用・再配布が可能
書面による許可なしに、派生したソフトウェアの宣伝や販促に、本ライセンス記載の組織やコントリビュータの名前を使うことは禁止
本ライセンスのもとに公開されているソフトウェアの作成者・著作権者は、ソフトウェアに関する義務・責任を何ら負わない

初期のThe BSD Licenseには、派生物の広告に初期開発者を表示することが条件として盛り込まれていました(宣伝条項)。現在はこの宣伝条項が削除された「修正BSDライセンス(New BSD License)」が主流となっています。The BSD Licenseのもとに公開されているソフトウェアは、再配布時のソースコード開示の義務はありません。

■The MIT License

The MIT LicenseはMassachusetts Institute of Technologyを起源としたライセンスです。概要は次のとおりです。

・利用者は、複製・変更・再配布・販売などソフトウェアを無制限に扱うことが可能
・著作権表示、許諾表示を、ソフトウェアのすべての複製または重要な箇所へ記載する必要がある
・本ライセンスのもとに公開されているソフトウェアの作成者・著作権者は、ソフトウェアに関する義務・責任を何ら負わない

作成者や著作権者のクレジットを、権利関係の表示箇所に含める必要があります。なお、再配布時のソースコード開示の義務はありません。

■GNU General Public License

GNU General Public Licenseは、Richard Matthew Stallman氏がGNU Projectのために作成したライセンスです。現在良く使用されているのは、version 2.0とversion 3.0です。

・GNU General Public Licenseライセンスのもとで公開されているプログラムは無保証である
・GNU General Public Licenseライセンスのもとで、プログラムの実行・複製・改変・再配布などをおこなう必要がある
・配布物に対するソースコードを入手する機会を提供する義務がある

3番目の「配布物に～」がポイントです。このため、GNU General Public Licenseのライセンスのもとで公開されているライブラリを利用する際は、それを利用した成果物のソースコード一式を開示・入手できる機会を提供する義務を負うことになります。利用するソフトウェア（ライセンス）の組み合わせに注意する必要があります。

なお、利用条件が緩和されているGNU Lesser General Public Licenseも定義されています(version 2.1,version 3.0)。

■Apache License

Apache Licenseとは、The Apache Software Foundationによるソフトウェア向けのライセンスです。The BSD Licenseをベースに作成されたライセンスであり、The BSD Licenseと共通する内容となっています。概要は次のとおりです。

・ソフトウェア使用・頒布・修正、派生版の頒布をすることを制限しない 頒布される二次的著作物が同じライセンスで提供されたり、フリー/オープンソースソフトウェアとして頒布されることを要求しない
・Apache Licenseのもとで公開されているソフトウェアを利用した二次創作物には、フリーなライセンスを適用しなくても良い
著作権と特許権の記述を保持する必要があり、何らかの修正がおこなった場合は、その旨を追加記述しなければならない

Apache License 1.1では宣伝条項が盛り込まれていましたが、最新のバージョンであるApache License 2.0では削除されています。またApache License 2.0では、GNU General Public License version 3.0と互換性があります。そのため、両方のライセンスが適用されているソフトウェアの頒布は可能です。

オープンソースライブラリを使用するにあたり、まずは使用したいソフトウェアのライセンスをよく確認しておく必要があります。ソフトウェアを利用する前に、The Open Source Initiativeにて公開されている原文や、ソフトウェアに同梱されているLICENSEファイルを必ず一読しておきましょう。

Web開発に特化したJavaScriptライブラリ

2009年頃から世界的にシェアが伸び続けているjQueryですが、Web開発に特化したJavaScriptライブラリはいくつもリリースされています。代表的なものをピックアップしてみましょう。

・jQuery
・Dojo
・Yahoo UI
・Sencha

■jQuery

jQueryとは、John Resig氏を中心に開発が進められているJavaScriptフレームワークです。The MIT Licenseのもとに公開されています。シンプルな文法で、複数のWebブラウザ互換のJavaScriptを記述できます。

 // 天気情報を取得するAPIに郵便番号を渡すAjax処理の実装サンプルコード
 // http://jquery.com/ より引用

 $.ajax({
 url: "/api/getWeather",
 data: {
 zipcode: 97201
 },
 success: function( data ) {
 $( "#weather-temp" ).html( "" + data + " degrees" );
 }
 });

jQuery 2.0以降では後方互換性が切り捨てられ、Internet Explorer 6 ～ 8はサポート対象外となりました。これからjQueryの導入を考えている場合や、既存のjQueryを利用したソフトウェアをアップデートする際には注意が必要です。

■Dojo

Dojo Toolkitとは、Alex Russell氏、Dylan Schiemann氏、David Schontzler氏らを中心となって開発されたJavaScriptフレームワークです。現在はDojo Foundationが中心となって開発、メンテナンスされています。

   // JSONPを使用したAjax処理の実装サンプルコード
   // http://dojotoolkit.org/documentation/tutorials/1.8/ajax/ より引用

   require(["dojo/dom", "dojo/on", "dojo/request/script",
   "dojo/json", "dojo/domReady!"],
   function(dom, on, script, JSON){
   // Results will be displayed in resultDiv
   var resultDiv = dom.byId("resultDiv");

   // Attach the onclick event handler to the makeRequest button
    on(dom.byId('makeRequest'),"click", function(evt){

        // When the makeRequest button is clicked, send the current
        // date and time to the server in a JSONP request
        var d = new Date(),
            dateNow = d.toString();
        script.get("../resources/php/jsonp-demo.php",{
            // Tell the server that the callback name to
            // use is in the "callback" query parameter
            jsonp: "callback",
            // Send the date and time
            query: {
                clienttime: dateNow
            }
        }).then(function(data){
            // Display the result
            resultDiv.innerHTML = JSON.stringify(data);
        });
        });
       }
      );

Dojo ToolkitはThe BSD LicenseおよびAcademic Free License version 2.1のデュアルライセンスのもとに公開されています。

■Yahoo UI

Yahoo UI(YUI)とは、Yahoo! Incが提供するJavaScriptプラットフォームです。The BSD Licenseのもとで公開されています。

// 天気情報のRSS(XML)から情報を取得するAjax処理の実装サンプルコード
// http://yuilibrary.com/yui/docs/io/weather.html より引用

//Define a function to handle a successful response from
//Yahoo! Weather.  The success handler will find the response
//object in its second argument:
function successHandler(id, o){
    Y.log("Success handler called; handler will parse the retrieved XML and insert into DOM.", "info", "example");
   var root = o.responseXML.documentElement;
   var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue;
   var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
   var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue;

  div.set("innerHTML", "
" + oTitle + "

" + "
" + oDateTime + "

" + descriptionNode);

  Y.log("Success handler is complete.", "info", "example");
}

■Sencha

Sencha Ext JSとは、Sencha Inc.が提供するJavaScriptプラットフォームです。インタラクティブなウェブアプリケーション(RIA)を構築するために設計されており、美しいデザインが特徴です。

// Sencha Ext JSによるXMLとAjaxを使用したフォームの実装サンプルコード
// http://docs.sencha.com/ext-js/4-2/extjs-build/examples/form/xml-form.html より引用

Ext.require([
    'Ext.form.*',
    'Ext.data.*'
]);

    Ext.define('example.contact', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'first', mapping: 'name > first'},
      {name: 'last', mapping: 'name > last'},
      'company', 'email', 'state',
     {name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
  ]
  });

  Ext.define('example.fielderror', {
  extend: 'Ext.data.Model',
  fields: ['id', 'msg']
 });

Ext.onReady(function(){

var formPanel = new Ext.form.Panel({
    renderTo: 'form-ct',
    frame: true,
    title:'XML Form',
    width: 340,
    bodyPadding: 5,
    waitMsgTarget: true,

    fieldDefaults: {
        labelAlign: 'right',
        labelWidth: 85,
        msgTarget: 'side'
    },

    // configure how to read the XML data, using an instance
    reader : new Ext.data.reader.Xml({
        model: 'example.contact',
        record : 'contact',
        successProperty: '@success'
    }),

    // configure how to read the XML error, using a config
    errorReader: {
        type: 'xml',
        model: 'example.fielderror',
        record : 'field',
        successProperty: '@success'
    },

    items: [{
        xtype: 'fieldset',
        title: 'Contact Information',
        defaultType: 'textfield',
        defaults: {
            width: 280
        },
        items: [{
                fieldLabel: 'First Name',
                emptyText: 'First Name',
                name: 'first'
            }, {
                fieldLabel: 'Last Name',
                emptyText: 'Last Name',
                name: 'last'
            }, {
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, {
                xtype: 'combobox',
                fieldLabel: 'State',
                name: 'state',
                store: Ext.create('Ext.data.ArrayStore', {
                    fields: ['abbr', 'state'],
                    data : Ext.example.states // from states.js
                }),
                valueField: 'abbr',
                displayField: 'state',
                typeAhead: true,
                queryMode: 'local',
                emptyText: 'Select a state...'
            }, {
                xtype: 'datefield',
                fieldLabel: 'Date of Birth',
                name: 'dob',
                allowBlank: false,
                maxValue: new Date()
            }
        ]
    }],

    buttons: [{
        text: 'Load',
        handler: function(){
            formPanel.getForm().load({
                url: 'xml-form-data.xml',
                waitMsg: 'Loading...'
            });
        }
     }, {
        text: 'Submit',
        disabled: true,
        formBind: true,
        handler: function(){
            this.up('form').getForm().submit({
                url: 'xml-form-errors.xml',
                submitEmptyText: false,
                waitMsg: 'Saving Data...'
            });
        }
       }]
       });

       });

Sencha Ext JSは、GNU General Public License verison 3.0と商用ライセンスのデュアルライセンスのもとに公開されています。

スマートフォン・タブレット向けのオープンソースライブラリ

スマートフォン・タブレットが台頭し、これらのWebサイトを製作するにあたり便利なオープンソースライブラリも増えてきました。

・jQuery Mobile
・jQT
・Dojo Mobile
・Sencha Touch
・Wink toolkit
・Kendo UI Mobile

jQuery Mobile

jQuery MobileはjQueryをベースとした、モバイル向けのWeb開発に特化したライブラリです。Adobe Dreamweaver CS5.5以降にてサポートされています。HTMLの独自データ属性に、jQuery Mobile固有の値を追加してUIを構築していく開発スタイルとなります。

jQT

jQTはZepto/jQueryのプラグインとして動作する、モバイル向けのWeb開発に特化したライブラリです。David Kaneda氏が開発し、The MIT Licenseのもとで公開されています。現在はSencha Labsの一部となっています。以前はjQTouchの名前で公開されていました。

jQuery Mobileと異なり、div要素にidやclassで値の指定をおこなってページやUIを構築していきます。

Dojo Mobile

Dojo MobileはDojo Toolkitをベースに、モバイル向けのWeb開発に特化したライブラリです。表示デバイスごとの、ネイティブのようなUIを提供するテーマが備わっています。

Sencha Touch

Sencha TouchはSencha Ext JSと同じく、美しいデザインインターフェースを備えるモバイル向けのJavaScriptフレームワークです。MVCフレームワークや、テンプレートエンジンを包括して提供しているのが特徴です。Sencha Touchを使った開発では、JavaScriptベースでUIを構築していく開発スタイルとなります。

Sencha Ext JSと同様、GNU General Public License verison 3.0と商用ライセンスのデュアルライセンスのもとに公開されています。

Wink toolkit

Wink toolkitはDojo Foundationが中心となって開発・公開している、モバイル向けのWeb開発に特化したライブラリです。The BSD Licenseのもとに公開されています。Dojo Mobileと同様、iOSとAndroidプラットフォーム別にネイティブのようなUIを提供するテーマが備わっています。

特徴として、モバイルデバイス独自のイベントを捕捉するための機能や、エフェクトが充実していることが挙げられます。

Kendo UI Mobile

Kendo UI MobileはTelerik Inc.が提供するモバイル向けのWeb開発に特化したライブラリです。jQueryと同社が提供するKendo UIをベースに実装がおこなわれています。

MVCフレームワークや、テンプレートエンジンを包括して提供しています。HTMLの独自データ属性に、Kendo UI Mobile固有の値を追加する方法か、表示デバイスごとのネイティブなUIを再現するテーマを使用してUIを構築していく開発スタイルとなります。

Kendo UIはGNU General Public License verison 3.0と商用ライセンスのデュアルライセンスのもとに公開されています。なお、Kendo UI Mobileは現在、商用ライセンスのみでの公開となっています。

たくさんあるけど、結局どれを使えばいいのか

使用するオープンソースライブラリを検討するにあたり、いくつか切り口を挙げてみましょう。

・社内や開発チームでノウハウが蓄積されているライブラリを使用する
・顧客の要件(対応Webブラウザ、デザイン、UI、ソースコード開示の環境準備)からマッチするライブラリを選択する
・ノウハウを共有しやすいライブラリを選択する

オープンソースライブラリを利用する前提として忘れてはならないのが、後方互換性の確保です。多くの場合、WebサイトやWebアプリケーションの構築は1度作成したらオシマイ、というものではありません。完成はあくまでスタート地点に立っただけです。実際に運用してから各種データを蓄積し、随時ブラッシュアップをおこなっていく必要があります。

オープンソースライブラリに依存していると、WebサイトやWebアプリケーションのバージョンアップ時に、後方互換の問題が出てくる可能性があります。ライブラリの中でどのような処理がおこなわれているかを理解せずに使用している場合、ライブラリ自体をアップデートすることができず、場合によっては脆弱性のある危険なライブラリを使用し続けなければならない状態に陥ります。

どのライブラリを利用する前にも、ある程度ライブラリの中身でどのような処理がおこなわれていくかを理解しておきたいところです。Webブラウザの実装差異を抽象化しているライブラリの中身を把握するというのも本末転倒な話に聞こえますが、準備しておくことに超したことはありません。

まずはひととおりのライブラリを実際に使ってみて、自分が作成しようとしているイメージにマッチするかを確かめてみるところからはじめましょう。

富田宏昭 Hiroaki Tomida
「株式会社キクミミ」でFileMakerやオープンソース言語などを用いた、Webアプリ開発 企業の業務改善のためのシステム開発や環境構築を行っている。主な著書に「HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門」(マイナビ)など。