Yusef: Unite アプリフレームワーク

Content contributions by Mathieu Henri, Hans S. Tømmerholt and Gautam Chandna.

はじめに

Opera Unite アプリ開発を Yusef フレームワークではじめてみませんか？ 簡単なサンプルもついていますから，読み終えた後，Yusef の長所を利用できるようになっているでしょう．

もし， Opera Unite developer primer を読んでいなければ，Yusef を学ぶ前に読んでおいたほうがいいでしょう．

この文書の構成は以下のようになっています．

• 基本概念
• Yusef コア
  • Section （セクション）
  • Action （アクション）
  • Plugin （プラグイン）
• サンプル
• まとめ
• 参考資料

基本概念

Unite アプリフレームワーク Yusef は Opera Unite に必要ないくつかの機能をまとめあげるためのものとして開発が始まり，最初は Opera の Web アプリチームが Unite アプリの開発補助ライブラリとして作りました．次第にUnite アプリ開発のさまざまな領域に対応するように発展しました．

Yusef はたとえば UI のテンプレートや，フォームがポストした内容の検証，アクセスコントロールなどで開発者を補助します．Opera Unite でのモジュール化から発展してた Yusef であなたの作業も楽になるでしょう．

図 1: Yusef と Opera Unite アプリのページとの関係

Yusef はサーバーの一種と言えるでしょう．そしてあなたの書く Script はサーバサイド JavaScript とみなすことができます．つまり Opera Unite アプリとは Yusef とあなたのスクリプトが処理して出力した HTML ページであるとも言えます．

Yusef コア

Yusef コアは Opera Unite アプリの屋台骨であり，ファイルのマウントポイントでもあり，アプリのパスとなるセクションのリスナーであり，ワンタイムパスワードを用いてフォームを検証し，プラグインを追加したりフックを用いた既存機能の拡張をしたりする機構を提供します．

Yusef コアは主に3つの部分からなります．Section と Action は Unite アプリの各ページでユーザが起こしたイベントを処理します．Plugin はアクセス制御などの拡張機能を提供します．

図 2: Yusef コアの主要 3 部分.

Section（セクション）

Section はリクエストされたURIの最上位のパスです．つまり， http://device.user.opeaunite.com/application/section の section の部分です．開発者はリクエストのパスに対応するセクションリスナーを追加することが出来ますし，アプリの最上位 ( _index ) でのリスナーも追加できます．たとえば， showFileList をサブパスとして含んだ URL にユーザがアクセスしたとき，セクションリスナーは showFileList イベントを処理することが出来ます．

Yusef の関数 addSectionListener は HTTP リクエストを受け取り処理する関数を登録し，リクエストされたページに対する Yusef の挙動を決めていきます． イベントはパス（セクション;Section）に結び付いていて，たとえば http://device.user.operaunite.com/application/sectionevent1/ にアクセスされたときのリスナーを定義するには addSectionListener('sectionevent1', function(), args); とします．

Yusef コアには static と呼ばれるセクションがあり，アプリの public_html フォルダ内の，アイコンや画像ファイル，スタイルシート，スクリプトファイルといった静的なリソースへの要求を処理をします．

Action（アクション）

Unite のアクションはフォームからポストされた内容を処理します．開発者はアクションリスナーを登録して，フォームから送られたデータを処理させることが出来ます． registerUniteActionListener 関数は POST リクエストを受け取り処理する関数を登録します．それぞれの POST リクエストは個別の関数に対応します．

たとえば，Unite アプリのルート ( http://device.user.operaunite.com/application/ ) に対してフォームからデータを送信するとします．

  <input type="hidden" name="unite-action" value="<action name>">
  <input type="hidden" name="unite-nonce" value="<session.nonce>">

送信するフォームに上記の2つのパラメータを含めることで，Yusef はリクエストを検証して登録した actionListener に処理を移します．ワンタイムパスワードは認証に使われます．

Plugin（プラグイン）

Yusef は ACL や UI のなどをプラグインとして提供しています．Yusef の機能を拡張したいときには，新しくプラグインを書いたり，既存の Yusef プラグインのパブリックな関数を拡張したりできます．

プラグインについては別の記事でもう少し詳しく説明する予定です．

サンプル

サンプルコードの説明に行く前に，整理しましょう．Yusef はサーバサイドのフレームワークであり，コードはバックエンドで処理されます．特別な index.html ページが Opera Unite アプリのエントリポイントとなり，Yusef や他のサーバサイドの機能を呼び出していきます．この index.html ページは表示されませんが，スクリプトを呼び出すために存在します．Unite アプリの一連の処理をデーモンと考えることが出来ます．

このサンプルでは，Yusef をフレームワークとして使った Opera Unite アプリを作ります． HelloYusef サンプルからサンプルアプリをダウンロードしてください．

ファイル構成としては以下のようになっています

• index.html
• config.xml
• libraries/yusef
• libraries/Markuper
• libraries/PSO
• serverScripts/helloYusef.js
• templates/helloYusef.html
• public_html/style.css

config.xml

config.xml は Opera Unite アプリケーションの構成を記述します．アプリの名前やアプリの説明などをユーザに説明します．Opera Unite の config.xml は Opera Widget の config.xml と同じです．

  <?xml version="1.0" encoding="utf-8"?>
  <widget network="public" version="1.0" id="Unite/helloYusef/" >
      <widgetname>Hello Yusef</widgetname>
      <description>An example application that uses Yusef, access control and Markuper.</description>
      <feature name="http://xmlns.opera.com/webserver">
          <param name="type" value="service" />
          <param name="servicepath" value="hello_yusef" />
      </feature>
      <feature name="http://xmlns.opera.com/fileio">
      </feature>
      <icon width='64' height='64' >public_html/favicon.64x64.png</icon>
      <icon width='48' height='48' >public_html/favicon.48x48.png</icon>
      <icon width='32' height='32' >public_html/favicon.32x32.png</icon>
      <icon width='16' height='16' >public_html/favicon.16x16.png</icon>
      <author>
          <name>Gautam Chandna, Opera Software ASA</name>
      </author>
  </widget>

サンプルアプリを "Hello Yusef" と呼ぶことにします．"Hellow Yusef" には Webserver と FileI/O API が必要なのでそれを指定しておきます．

File I/O API が必要だということに違和感を覚えるかもしれませんが，アプリのサンドボックスのデータのアクセスにはAPI が必要です．

index.html

Opera Unte アプリのエントリポイントは index.html ファイルです．この index.html ファイルはライブラリや Yusef を呼び出すために使われ，画面には表示されません．

  <script src="libraries/PSO/pso.js"></script>
  <script src="libraries/Markuper/template.js"></script>
  <script src="libraries/yusef/common.js"></script>
  <script src="libraries/yusef/core.js"></script>

core.js と common.js は Yusef のファイルで，template.js は UI テンプレートの Markuper のファイルです．

ServerScripts/HelloYusef.js

Yusef フレームワークを用いた Opera Unite アプリには特別なフォルダ serverScripts があり，このフォルダ内のスクリプトは自動的に実行されます．サーバサイドのスクリプトは全てこのフォルダーに入れることが出来ます．

  Yusef.addSectionListener
  (
      '_index',
      function( connection )
      {
        ...
              }
  );

HelloYusef.js の中を見ていきます．Yusef のメンバ関数は Yusef のシングルトンオブジェクト Yusef から呼び出されます．たとえば addSectionListener 関数は Yusef.addSectionListener として呼び出します．

addSectionListener で，URI のサブパスを処理します．たとえば， device.user.operaunite.com/application/addfile という URI にアクセスがあると， addfile が呼び出されることになります． サンプルのHelloYusef.js では Opera Unite アプリのトップレベルの URI にアクセスしたときに呼び出される '_index' を定義します．

  function( connection ) {
      var tmpl = new Markuper( 'templates/helloYusef.html' );
      var data = {
          title       : connection.request.uri,
          servicePath : opera.io.webserver.currentServicePath,
          content     : "Hello Yusef",
          stylesheet  : 'style.css'
      };
      tmpl.parse( data );
      return tmpl.html();
  }

さて，呼び出される関数の内部を見ていきましょう．テンプレートエンジンの Markuper が，テンプレートファイルを指定して呼び出され，object 型の変数 data が初期化されてます． servicePath に指定している opera.io.webserver については Opera Unite API を参照してください．

最後に，データを渡してテンプレートを処理し，HTML を返します．

templates/helloYusef.html

最後のファイルの説明に移りましょう．

  <!doctype html>
  <html>
      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          <title>{{data.title}}</title>
          <link
              rel="stylesheet"
              type="text/css"
              href="{{data.servicePath}}static/{{data.stylesheet}}">
        </head>
        <body>
            <div>
                {{data.content}}
            </div>
      </body>
  </html>

Markuper テンプレートライブラリは templates/helloYusef.html を処理して，ユーザに返します．

Markuper では特別な記法を用いてテンプレートに値を埋め込みます．たとえば {{data.servicePath}} は先ほど helloYuserf.js で定義した servicePath を参照します．

Figure 3: Hello Yusef 出力例．

さて，これで，終わりです．Yusef フレームワークを使った Opera Unite アプリが出来ました，今回のサンプルは HelloYusef サンプルからダウンロードできます．

まとめ

この記事では，Opera Unite の サーバフレームワーク Yusef を紹介しました．Yusef は URL のサブパスを処理する Section，フォームから送られたデータを処理する Action，それと Plugin の3つから構成されています．

プラグインを追加すればより複雑なことが出来るようになります．プラグインには UI テンプレートエンジンの Markuper などがあります

Yusef プラグインについてはまた別の記事を書く予定です．

参考資料

より詳しく，Oprea Unite やそのライブラリに関して知るには以下の記事を読むとよいでしょう．

• Opera Unite Development primer
• Markuper template library
• Opera Unite API
• File I/O API