活発なカーネル

活発なカーネル

Chromium 5で実行される Lively Kernel 0.9 の例
開発者	サン・マイクロシステムズ研究所、ハッソ・プラトナー研究所
安定版リリース	2.1.3 / 2012年4月7日; 12年前 ( 2012-04-07 )
リポジトリ	github.com/LivelyKernel/LivelyKernel
書かれた	JavaScript、QtバリアントにC++が追加
オペレーティング·システム	クロスプラットフォーム
プラットフォーム	Apple Safari、Mozilla Firefox、Google Chrome、Opera、iPhone / iPad、Microsoft Internet Explorerバージョン9より前のバージョン（拡張機能のみ）ですが、追加のWebブラウザプラグインを必要とする実験的なポートが利用可能です。
利用可能	英語
タイプ	ウェブ開発
ライセンス	マサチューセッツ工科大学
Webサイト	ライブリーカーネル

Lively Kernelは、SAPリサーチに在籍していたダン・インガルスが開発したオープンソースのウェブプログラミング環境です。リッチなグラフィックスと直接操作機能を備えたデスクトップスタイルのアプリケーションをサポートしますが、従来のデスクトップアプリケーションのようなインストールやアップグレードの手間がかかりません。 ^{[1] [2]開発は}カリフォルニア州メンロパークのサン・マイクロシステムズ研究所で始まり、後にベルリン近郊のポツダム＝バーベルスベルクにあるハッソ・プラットナー研究所に移されました。

Lively Kernel は、標準のブラウザ グラフィックス (W3C Canvas または SVG) を使用して、プログラミング言語 JavaScriptで完全に記述されたグラフィカルな構成と統合プログラミング環境です。そのため、どのブラウザでも Web ページとしてアクセスでき、Web ページが読み込まれるとすぐに動作を開始します。独自のコードとグラフィックスを編集でき、組み込みの WebDAV サポートを使用して結果を保存したり、新しい Web ページに自分自身を複製したりすることもできます。アプリケーション開発機能に加えて、独自の統合開発環境 (IDE) としても機能し、ブラウザ以外のツールなしでシステム全体を自立させることができます。

Lively Kernel は、Morphicグラフィック モデルを使用して、ブラウザー グラフィックから構築されたシーン グラフに動作を追加します。このようにして、シンプルなグラフィックが、スライダー、スクロール バー、テキスト ビュー、リスト、クリッピングフレームなどの標準ウィジェットに組み立てられます。これらのウィジェットから構築されたシンプルなウィンドウ システムは、オブジェクト インスペクター、ファイル ブラウザー、コード ブラウザーを提供します。したがって、基本的なデモ ページでも、システムの実行中にシンプルなコード ブラウザーで新しいコードを編集およびテストできます。

Lively は、独自のチュートリアルを含むシンプルな Web サイトや、バージョン管理されたリポジトリにページを保存するクライアント側の Wiki システムの構築に使用されています。コンテンツは、比較的静的なテキスト ページから、Adobe Flashシミュレーションのような外観と動作を持つ完全に動的なモデルまでさまざまです。Lively Kernel は、特定のアニメーション サポートを使用せずに (SVG のアニメーション機能は使用しません)、JavaScript で複数のグリーン スレッド プロセスを単純にスケジュールすることで、複雑な動的動作を実現します。

Lively Kernel には、JavaScript で記述された独自のマルチフォント テキスト エディターが含まれています。中央揃え、行揃え、および同様の基本的なテキスト構成機能のサポートが含まれています。したがって、Lively での作業は、Web ページ デザイン プログラムでの作業とほぼ同じ感覚です。ただし、オンザフライのテキスト レイアウトはオフライン構成プログラムで行われるのではなく、Lively Kernel に組み込まれたテキストの動的動作です。

Lively グラフィックスの生き生きとした動きは、オブジェクトやテキストの拡大縮小ハンドルや回転ハンドルを操作するときにさらに明らかになります。コード ブラウザー全体を 20 度傾けて使用できます。テキスト エディターは完全に Lively グラフィックスで構成されているため、スクロール バー、クリッピング フレーム、その他のユーザー インターフェイス全体と同様に、回転または拡大縮小しても問題なく動作します。

Lively Kernel は、JavaScript と SVG または Canvas グラフィックのブラウザー サポートに依存しており、これらはすべて現在 W3C 標準の一部となっています。2009 年現在、これは Safari、Firefox、Chrome、Opera ブラウザーで実行されることを意味します。

この要件は HTML よりも互換性が低いように思われるかもしれませんが、Lively は、実行されるブラウザー間では HTML よりも互換性があります。これは、JavaScript、SVG、Canvas の実装間の統一性が、HTML の実装間の統一性よりも高いためです。1 つの小さな初期ファイルを除き、Lively カーネル コード ベースには、どのクライアント ブラウザーが使用されているかのテストはまったくありません。

2011 年現在、Lively Kernel はMacintosh のSafari 、 Windows のChromiumまたはGoogle ChromeなどのWebKitベースのブラウザで最もよく動作します。Internet Explorer (Windows) で実行するには、Google Chrome Frame が必要です。次のリリースでは、すべての一般的なブラウザでのテストが予定されています。

Lively には、 WebDAV経由でバージョン管理されたリポジトリと同期可能な 12 個程度のローカル ソース JavaScript ファイル セットを使用して動作するように設計された、非常に強力な統合開発環境が含まれています。ユーザーが SystemBrowser を開くと、ブラウザーのファイル ペインにすべての JavaScript ソース ファイルが一覧表示されます。ユーザーがこれらのファイルの 1 つをクリックすると、そのファイルが読み込まれ、解析され (OMeta JavaScript パーサーによって)、Smalltalkブラウザーと同様に関数またはクラス定義が一覧表示され、クラスごとにすべてのメソッド名が表示されます。ユーザーはメソッド名をクリックし、下部ペインでそのコードを編集してから、新しい定義を保存できます。新しい定義は構文がチェックされ、正しい場合は .JS ファイルに保存されます。さらに、「評価モード」(通常の場合) の場合、メソッドは実行中のシステムで再定義されます。これにより、Lively または開発中のアプリケーションを再起動せずに、重要でない変更を行うことができます。すべてのソース ファイルが読み込まれると、高速スキャンによって、選択したテキストへのすべての参照が検出され、一致するすべてのコード本体が別のサブブラウザーに表示されます。

Lively IDE には、塗りつぶし、境界線、テキスト スタイルを制御するためのオブジェクト インスペクタとモーフ スタイル パネルが含まれています。また、エラー ポイントでのデバッグやパフォーマンス チューニングのためのプロファイリング機能もありますが、すべての主要ブラウザーでこのようなランタイム サポートの品質が向上しているため、これらはプッシュされていません。

IDE は、バージョン管理されたリポジトリ内のソース コード ファイルに対して操作を行い、Lively コード ベースの進化を管理します。同じアプローチが、クライアント側 Wiki の形式でアクティブな Web コンテンツをユーザーが制御できるようにするために使用されています。Lively には、そのワールド内のコンテンツ (シーン グラフやその他のコンテンツ) を編集し、そのコンテンツを Web ページとして保存する機能が含まれているため、WebDAV 接続により、Lively は段階的に開発されているページ コンテンツの新しいバージョンを保存できます。新しいバージョンが保存されるたびに、インターネットの残りの部分から表示でき、エラーや気が変わった場合には以前のバージョンを取得できます。この Wiki スタイルの進化する Web コンテンツは、Lively のすべてのテキスト、グラフィック、スクリプト コンテンツ、および定義される可能性のある新しいフォームにまで拡張されますが、いかなる種類の Wiki サーバーも必要ありません。^[3] 必要なのは、HTTP WebDAV インターフェイスを提供するサーバーだけです。現在、Lively プロジェクト コンテンツは、この方法で維持管理されています。

Lively for Qt は Lively Kernel の新しい実装であり、"カーネル" 部分がQt フレームワークによって提供される機能に置き換えられています。^[4] Lively for Qt は、ウィジェットの実装、レイアウト管理、コア イベント処理、コア JavaScript サポートなどの基本的な機能のほとんどを Qt から継承しています。Lively for Qt は、ユーザー インターフェイスとアプリケーション ソース コードをその場で編集できるなど、Lively Kernel の非常にインタラクティブな性質 ("活発さ") を保持しています。ただし、Lively for Qt では、開発作業は Qt プラットフォームの使い慣れた、十分に文書化された API を使用して実行されます。

// ClockMorph: シンプルなアナログ時計

モーフ.サブクラス( “ ClockMorph ” 、{ 

    デフォルトボーダー幅: 2 、タイプ: "ClockMorph" 、  
     

    // コンストラクター
の初期化: function ( $super , position , radius ) {        

        $super ( position . asRectangle (). expandBy ( radius ), "ellipse" ); this . openForDragAndDrop = false ; // ドラッグアンドドロップ要求を処理しないthis . makeNewFace (); // 時計の文字盤を構築するreturn this ; },  
           
         
          
    

    // 新しい時計の文字盤を構築する
makeNewFace : function () {      

        var bnds = this.shape.bounds (); var radius = bnds.width / 3 ; var labels = [ ] ; var fontSize = Math.max ( Math.floor ( 0.04 * ( bnds.width + bnds.height ) ) , 4 ); var labelSize = fontSize ; //デフォルトのインセットで中央に配置する余地    
            
            
                
            

        // 時計にローマ数字を追加します
for ( var i = 0 ; i < 12 ; i ++ ) { var labelPosition = bnds.center ( ) . addPt ( Point.polar ( radius * 0.85 , ( ( i - 3 ) / 12 ) * Math.PI * 2 )). addXY(labelSize, 0); var label = new TextMorph(pt(0, 0).extent(pt ( labelSize * 3 , labelSize ) ) , [ ' XII ' , ' I ' , ' II ' , ' III ' , ' IV ' , ' V ' , ' VI ' , ' VII ' , ' VIII ' , ' IX ' , ' X ' , ' XI ' ][ i ]); label.setWrapStyle ( WrapStyle.SHRINK ) ; label . setFontSize ( fontSize ); label . setInset ( pt ( 0 , 0 ) ); label . setBorderWidth ( 0 ); label . setFill ( null ); label . align ( label . bounds (). center (), labelPosition . addXY ( - 2 , 1 ) ); this . addMorph ( label ); } // 時計の針を追加しますthis . addMorph ( this . hourHand = Morph . makeLine ( [ pt ( 0 , 0 ), pt                  
                
                                  
                 
             
             
            
                    
            
            
             
             
         
    
        
          ( 0 , - radius * 0.5 )], 4 , Color . blue )); this . addMorph ( this . minuteHand = Morph . makeLine ([ pt ( 0 , 0 ), pt ( 0 , - radius * 0.7 )], 3 , Color . blue )); this . addMorph ( this . secondHand = Morph . makeLine ([ pt ( 0 , 0 ), pt ( 0 , - radius * 0.75 )], 2 , Color . red )); this . setHands (); this . changed (); }, // 現在の時刻に基づいて時計の針の角度を設定しますsetHands : function () { 
           
           
         
         
     
    
    
      

        var now = new Date ( ) ; var second = now.getSeconds ( ) ; var minute = now.getMinutes ( ) + second / 60 ; var hour = now.getHours ( ) + minute / 60 ; this.hourHand.setRotation ( hour / 12 * 2 * Math.PI ) ; this.minuteHand.setRotation ( minute / 60 * 2 * Math.PI ) ; this.secondHand.setRotation ( second / 60 * 2 * Math.PI ) ; } ,​​​​​​​​​​​​​​     
            
              
              
         
         
            
    

    // ClockMorph がワールドに配置されたときに呼び出されます
startSteppingScripts : function () { this . startStepping ( 1000 , "setHands" ); // 1 秒に 1 回} });       
          
     

• 公式サイト