DigiTechLog Dot Com » Ajax/JavaScript http://digitechlog.com Adobe AIR、Flex、Flash、Java Tue, 08 Nov 2011 12:46:29 +0000 http://wordpress.org/?v=2.8 ja hourly 1 OpenLaszlo: Ajax/Flashで動作するリッチインターネットアプリケーションの開発及び配布を行うためのオープンソースプラットフォーム http://digitechlog.com/2009/10/08/openlaszlo-open-source-platform-for-rich-web-applications.html http://digitechlog.com/2009/10/08/openlaszlo-open-source-platform-for-rich-web-applications.html#comments Thu, 08 Oct 2009 13:02:35 +0000 admin http://digitechlog.com/2009/10/08/openlaszlo-open-source-platform-for-rich-web-applications.html OpenLaszloとは、Laszlo Systems社が開発され、Web ブラウザ上でAjax/Flashで動作するリッチインターネットアプリケーションの開発及び配布を行うため、オープンソースプラットフォームです。オープンソースですから、誰でも無料で使うことができます。

以下のような特徴があります。

  • オープンソース
  • ライセンスは CPL ( Common Public License )
  • バージョン 4.0 からは従来の Flash コンテンツだけでなく、 Ajax と DHTML による動的コンテンツを同一のソースコードから生成することができる
  • XML ベースのオブジェクト指向型言語でソースコードを記述する
  • 日本では Laszlo Japan などのコミュニティが活動を行っている

openlaszlo

●OpenLaszloのHello World

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <canvas>
  3.   <text>Hello World</text>
  4. </canvas>

簡単でしょう？！残念ですが、現実問題として、OpenLaszloという名前を聞いたことのあるＩＴ関係者はほとんどいないようです。最近は少し増やしているらしい。

●OpenLaszlo サーバのインストール

OpenLaszloとサーバーサイド連携は、XMLデータでやり取りを行います。

・前準備として、バージョン 1.4 以上の Java SDKが必要です。

・次のURLから（http://www.openlaszlo.org/download）、インストーラをダウンロードします。Windows 、 MacOS 、 Linuxなどプラットフォームが対応されています。

・インストーラを実行すると、自動的にインストールが始まります。

ここまでサーバのインストールは終りました。

「スタート」メニューから、「 OpenLaszlo Server 」-「 OpenLaszlo Explorer 」を選んで、コマンドプロンプトから Tomcat が立ち上がり、ブラウザに OpenLaszlo Explorer が表示されます。それを利用して、チュートリアルやデモアプリケーションを実行することができます。

●開発環境

http://www.atmarkit.co.jp/fwcr/rensai/laszlo_adv01/laszlo_adv01_1.htmlを参考して、EclipseにOpenLaszlo用のプラグインをインストールして、間発環境を作れますので、ここではこの説明を省略いたします。

【関連リンク】

http://www.openlaszlo.org/ 公式サイト

Related Posts

]]> http://digitechlog.com/2009/10/08/openlaszlo-open-source-platform-for-rich-web-applications.html/feed 0 Flivpee: JavaScriptを使ってFlash製の動画再生オープンソースのソフトウェア http://digitechlog.com/2009/06/18/flivpee-flash-video-player-with-javascript-widgets-styled-with-css.html http://digitechlog.com/2009/06/18/flivpee-flash-video-player-with-javascript-widgets-styled-with-css.html#comments Thu, 18 Jun 2009 08:34:20 +0000 admin http://digitechlog.com/2009/06/18/flivpee-flash-video-player-with-javascript-widgets-styled-with-css.html Flashの利用範囲が拡大していますが、Actionscriptが知らない方とASをそんなに好きではない方も多いと思います。では、Flash製のビデオを自分のブログやサイトに搭載してほしい場合はなにを使ったほうが良いでしょうか。

今回紹介する「Flivpee」というものは、JavaScriptを使って、複数の動画をプレイリストのように並べて順番に再生できるオープンソースのソフトウェアです。アニメを順番に再生したり、関連ある動画を一覧する際に便利そうです。

JavaScriptを使って行うので、その点でもFlash記述がない分、シンプルに作ることができます。CSSを利用してプレヤーをカスタマイズも可能です。使用方法も簡単です。Flivpee

[使用方法]

１）、公式サイトから最新版のFlivpeeをダウンロードして自分のサイトにアップロードする（そのフォルダはINSTALL_DIRが呼ばれる）

２）、ページの<head>に以下のようのソースを追加する

  1. <script type=”text/javascript” src=”INSTALL_DIR/swfobject.js”></script>
  2. <script type=”text/javascript” src=”INSTALL_DIR/flivpee.js”></script>
  3. <link rel=”stylesheet” href=”INSTALL_DIR/flivpee.css” type=”text/css” />

３）、そのページの<body>の中に、適当なところに下記のソースを追加する

  1. <div id=”player”></div>
  2. <script type=”text/javascript”>
  3.         var player = new Flivpee( “flivpee/flivpee.swf”, “480″, “360″, “#000000″, false, false );
  4.         player.write( “player” );
  5. </script>

４）、以下のようのソースでビデオファイルをプレイする

  1. <a onclick=”player.play(’/some/video.flv’)”>
  2.         Play the video.
  3. </a>

[関連リック]
・http://code.google.com/p/flivpee/
公式サイト

Related Posts

]]> http://digitechlog.com/2009/06/18/flivpee-flash-video-player-with-javascript-widgets-styled-with-css.html/feed 1 PNGPong: フィルタもしくは複雑なJavaScriptとCSSを使用せず透明PNG表示する問題を解決するオープンソースのライブラリ http://digitechlog.com/2009/06/08/pngpong-an-open-source-solution-to-display-transparent-pngs-in-ie-firefox-and-safari.html http://digitechlog.com/2009/06/08/pngpong-an-open-source-solution-to-display-transparent-pngs-in-ie-firefox-and-safari.html#comments Mon, 08 Jun 2009 11:14:07 +0000 admin http://digitechlog.com/2009/06/08/pngpong-an-open-source-solution-to-display-transparent-pngs-in-ie-firefox-and-safari.html ウェブ系の開発者なら透明PNGフォーマット画像ファイルがIE５．５もしくはIE6.Xなどでは正常で表示出来ないことは知ってるはずと思います（IE6ならPNGの透明部分は#DBEAEDの用法色が表示されてしまう）。　

今回紹介する「PNGPong」とは、フィルタもしくは複雑なJavaScriptとCSSを使用せずIEやFireFoxとSafariなどブラウザに透明PNG表示する問題を解決するオープンソースのライブラリです。

PNGPongはMITライセンスでリリースされていますので、商用でも可能です。以下のブラウザにテストされました。

  • IE 6.x (win)
  • IE 7.x (win)
  • Firefox 1.5 – 2.x (win)
  • Firefox 1.5 – 2.x (mac x86, PPC)
  • Safari 2.x (mac x86, PPC)
  • Camino 1.x (mac x86, PPC)

PNGPongはシングルScriptですから、以下の様で簡単で使えます。

  1. <script src="/pngpong/swfobject.js" type="text/javascript"><!--mce:0--></script>
  2. <script src="/pngpong/pngpong.js" type="text/javascript"><!--mce:1--></script>

※swfobject.jsについて、以前の「SWFObject: Flash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリ」を参考してください。

ユニークIDをつける空の<div></div>を用意して、画像の幅と高さが指定されているCSSを使用して、JS関数を読んで透明PNGファイルを埋め込めます。

[関連リンク]

http://blog.psyrendust.com/pngpong/ 

公式サイト

Related Posts

]]> http://digitechlog.com/2009/06/08/pngpong-an-open-source-solution-to-display-transparent-pngs-in-ie-firefox-and-safari.html/feed 0 SWFAddress: SWFObject と共にFlashの各コンテンツの遷移に対してパーマリンク提供する便利なライブラリ http://digitechlog.com/2009/06/02/swfaddress-a-small-but-powerful-library-provides-deep-linking-for-flash-and-ajax.html http://digitechlog.com/2009/06/02/swfaddress-a-small-but-powerful-library-provides-deep-linking-for-flash-and-ajax.html#comments Tue, 02 Jun 2009 13:33:20 +0000 admin http://digitechlog.com/2009/06/02/swfaddress-a-small-but-powerful-library-provides-deep-linking-for-flash-and-ajax.html SWFAddressとは、SWFObject と共に、Flash の各コンテンツの遷移に対してパーマリンク提供する便利なオープンソースのライブラリです。※SWFObjectについては、SWFObject: Flash/FlexをWeb ページに貼りつけるのに便利なJavaScriptライブラリを参考できます。

パーマリンクはFlashの問題の一つ、Flash内部のコンテンツにブックマークが出来ないということです(Flex３からHistoryManager/BrowserManagerというクラスを使えば機能を実現することができる)。SWFAddressを使用すれば、Javascriptを使ってページを更新することなくURLを変更することで SWF内にユニークなURLを設定できるというとても簡単でその問題を解決できます。

SWFAddressはActionScriptのライブラリと、HTMLページ用のJavaScriptファイルで構成されています。SWFAddressのActionScriptを利用して、シーン別にユニークなURLを指定するとブラウザのURLアンカー指定部分が変化されます。もちろん、利用するにはSWFObject.jsも必要になります。

・2.0での主な変更点は、以下の通りです。

  • 複数のフラッシュとAjaxに対応。
  • ActionScriptとJavaScriptのイベントに対応。
  • 新機能：SWFAddressEvent クラス。
  • 新機能：SEOを少し。
  • Flash CS3のサポート。
  • Flash Player 7のサポート。
  • SWFObject 2.0のサポート。
  • 新モード：デフォルトで末尾にスラッシュを追加。
  • 新リンク方法：ウインドウとポップアップ。
  • 新方式：ブラウザの履歴の扱い。
  • トラッカー ファンクション。
  • クエリのパラメータでスクリプトの構成を設定。
  • swfaddress.html はオプションで、デフォルトで使用されない。
  • 改善されたたくさんの新しいフラッシュベースのサンプル。
  • ActionScript ３と JavaScriptのためのAPIドキュメンテーション。

・対応ブラウザSWFAddressは以下のブラウザに対応しています。

  • Iinternet Explorer6+
  • Firefox 1+
  • Safari 1.3+
  • Opera 9.02+
  • Camino 1+
  • Mozilla 1.8+
  • Netscape 8+

・ライブラリの読み込みとオプション

SWFAddressはjavascriptのライブラリの読み込み時にオプションをsrc属性のurl中にクエリーとして渡します。オプションとして使用できる値は以下の４つがあります。

  • history (bool値) デフォルトはtrue
  • html (bool値) デフォルトはfalse
  • strict (bool値) デフォルトはtrue
  • tracker (文字列) デフォルトは_trackDefault

それは例の一つです。

  1. <script href="swfaddress.js?history=1&html=1&strict=0&tracker=customTracker" type="text/javascript"></script>
使用例：
・ヘッダー部分 ライブラリの読み込みと、タグの書き出しサンプル
  1. <script src="js/swfobject.js" type="text/javascript"></script>
  2. <script src="js/swfaddress.js?strict=0" type="text/javascript"></script>
  3. <script type="text/javascript">
  4.      var flashvars = {};
  5.      var params = {
  6.           menu: "true",
  7.           scale: "noScale",
  8.           allowScriptAccess: "sameDomain"
  9.       };
  10.       var attr = {
  11.            id: "altContent",
  12.            name:"altContent"
  13.       }
  14.       swfobject.embedSWF("SWFAddress.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attr);
  15. </script>

・Body部分

  1. <ul>
  2. <li><a href="" onclick="SWFAddress.setValue('ClickA'); this.blur(); return false;" rel="ClickA">ClcikA</a> </li>
  3. <li><a href="" onclick="SWFAddress.setValue('ClickB'); this.blur(); return false;" rel="ClickB">ClcikB</a></li>
  4. </ul>
  5. <div id="altContent">
  6. <h1>SWFAddress</h1>   Alternative content   <a href="http://www.adobe.com/go/getflashplayer"><img
  7.       src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
  8. </div>

・as側の記述もjavascript側とほとんど同じように記述できる。

  1. <?xml version="1.0"?>
  2.   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init(event)">
  3.       <mx:Script>
  4.       <![CDATA[
  5.       import mx.events.FlexEvent;
  6.       import com.asual.swfaddress.SWFAddress;
  7.       import com.asual.swfaddress.SWFAddressEvent;
  8.       import mx.controls.Alert;
  9.       import mx.events.ItemClickEvent;   public function init(event:FlexEvent):void{     SWFAddress.addEventListener(SWFAddressEvent.CHANGE, swfAddressChangeEvent);
  10.       }   public function swfAddressChangeEvent(event:SWFAddressEvent):void {
  11.          var path:String = event.path;
  12.          Alert.show(path, "path");
  13.       }   public function itemClickHandler(event:ItemClickEvent):void {
  14.           var index:String = String(event.item);
  15.           SWFAddress.setValue(index);
  16.       }
  17.       ]]>
  18.       </mx:Script>
  19.       <mx:ButtonBar itemClick="itemClickHandler(event);">
  20.      <mx:dataProvider>
  21.         <mx:String>Menu_1</mx:String>
  22.         <mx:String>Menu_2</mx:String>
  23.         <mx:String>Menu_3</mx:String>
  24.      </mx:dataProvider>
  25.       </mx:ButtonBar>
  26.    </mx:Application>

[関連リンク]

http://www.asual.com/swfaddress/

公式サイト

Related Posts

]]> http://digitechlog.com/2009/06/02/swfaddress-a-small-but-powerful-library-provides-deep-linking-for-flash-and-ajax.html/feed 0 jQueryのcsv2tableというプラグインを使ってCSVデータをテーブルに表示する http://digitechlog.com/2009/05/02/how-to-display-csv-data-to-table-with-jquery-and-csv2table.html http://digitechlog.com/2009/05/02/how-to-display-csv-data-to-table-with-jquery-and-csv2table.html#comments Sat, 02 May 2009 13:02:04 +0000 admin http://digitechlog.com/2009/05/02/how-to-display-csv-data-to-table-with-jquery-and-csv2table.html その前「jQueryを使ってXMLを解析操作する（サンプルソースコード含める）」でjQueryでXMLを解析する操作を説明しました。次はjQueryのcsv2tableというプラグインを使ってCSVデータをテーブルに表示しようことの説明です。Ajaxを使うと、JSONやXMLなどのテキストファイルを手軽に読み込んでテーブル要素などへ出力できるので便利ですが、昔ながらのアプリ共通テキストフォーマットとしてはやっはりCSVが活躍しています。

jquery.csv2table.jsはExcelなどで生成できるCSVファイルを読み込みtableとして表示する為のjQueryプラグインです。このプラグインを利用して生成されたテーブルは項目ごとのソートなどにも対応しています。列ごとのソートもできて、jQchartなどを組み合わせれば、 CSVを読み込むだけで、自動的にグラフまで作ることも可能です。

以下は使用方法とサンプルのソースコード

１）、csv2tableとダウンロード

jQueryとcsv2tableは次のサイトで入手できます。http://jquery.com　、ここはcsv2table: http://plugins.jquery.com/project/csv2table

２）、ダウンロードしたjQuery本体とと「jquery.csv2table.js」とhead要素などで読み込む

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.csv2table.js"></script>

３）、body要素内に任意のIDを付けた要素を用意する

  1. <div id="view1"></div>

４）、head要素内などのscript要素でプラグインを実行する

  1. <script type="text/javascript">
  2. $(function(){
  3.     $('任意のID').csv2table('読み込むCSV');
  4. });
  5. </script>

５）、CSVデータを用意する(sample.csv)

  1. №,名前,所属,年齢,手数料
  2. 1,ざら,クラスA,10,"100,000 "
  3. 2,まほう,クラスB,8,"80,000 "
  4. 3,ちなと,クラスC,12,"5,000,000 "
  5. 4,ゆみ,クラスD,13,"3,000 "

６）、sample.csvを読み込んでテーブルを描画する

  1. <script type="text/javascript">
  2. $(function(){
  3.     $('#view1').csv2table('sample.csv');
  4. });
  5. </script>

最後にダウンロードしたimgフォルダをテーブルを描画するファイルと同じフォルダにアップロードしてテーブルを表示できます。

Related Posts

]]> http://digitechlog.com/2009/05/02/how-to-display-csv-data-to-table-with-jquery-and-csv2table.html/feed 0