アラートダイアログ上にWebViewで3Dコンテンツを表示（WebGL＋three.js）v4

アラートダイアログ上にWkWebViewを作成して、さまざまなグラフや3Dアニメーションを表示してきた「箱庭ダイアログ」の１つの到達点、「periodictable」（元素周期表）選択UIの表示デモAppleScriptです。

実行は掲載リストではなく上記のリンクからダウンロードしたAppleScriptバンドルを、かならずスクリプトエディタでオープンして（Script Debugger不可）、Controlキーを押しながらスクリプトエディタの「スクリプト」メニューから「フォアグラウンドで実行」コマンドで実行してください。

「フォアグラウンド」はApple（の外注のローカライズ業者による）ローカライズ内容が間違っていて、実際には「メインスレッドで実行」が正しいのですが、まあいいです。

以前に掲載したバージョン（v3）は、掲載後しばらくはそのまま動いていることが確認されたのですが、その後のCDN上のJavaScriptライブラリのアップデートにともない、動作しなくなっていました。本v4はその点を解決したもので、技術的により進化したというよりも、「勝手に動かなくなる点に対処した」程度のものとお考えください。

periodictableのUser Interface自体、目を惹くものであり、とても楽しいものです。ただ、真剣にその内容を解析し、汎用的に利用できるかどうかを検討してみると、おおよそ120個程度の要素に対して、重みづけを与えずに自由選択するような用途でないと実用性が得られないことがわかりました。たいてい、情報には重要度などの重みがありますが、本User Interfaceはそれがあると邪魔な感じです。

また、少ないデータ……2個や3個の要素から選択するのでは、用をなしません。用途が限定されすぎているというべきなのか、この用途にしか合わないというべきなのか。

JavaScriptとAppleScriptの間での選択項目のやり取りを行う手段についても、edama2氏が実際に稼働するデモを作ったのを見せてもらい、たしかにそうした処理ができることを確認しています。

それでも、いまひとつ実用性がないので、あくまで本プログラムは「デモ用」と割り切っています。

「CDN上のJavaScriptライブラリがアップデートして動かなくなる問題」についても、1つの解決策が見えてきました。ローカルにJavaScriptライブラリを配置して読み込んで使えばいいというものです。実際に、本ScriptバンドルのResourceフォルダ内にそれらのファイルが入っています。

これで勝手にアップデートされないため、放っておくと動かなくなるといった問題への解決策となっています。ただ、その一方でメイン処理を呼び出すさいに強制的なメインスレッド実行を行わせても、実行できないという謎の現象が発生。これについては、問題解決の手段自体はあるはずです（たぶん）。

AppleScript名：アラートダイアログ上にWebViewで3Dコンテンツを表示（WebGL＋three.js）v4.scptd

—
–　　Created by: Takaaki Naganoya
–　　Created on: 2020/06/13
–　　Modified on: 2023/03/07
—
–　　Copyright © 2020-2023 Piyomaru Software, All Rights Reserved
—
use AppleScript version "2.7"
use framework "Foundation"
use framework "AppKit"
use framework "WebKit"
use scripting additions

property |NSURL| : a reference to current application’s |NSURL|
property NSAlert : a reference to current application’s NSAlert
property NSString : a reference to current application’s NSString
property NSButton : a reference to current application’s NSButton
property WKWebView : a reference to current application’s WKWebView
property WKUserScript : a reference to current application’s WKUserScript
property NSURLRequest : a reference to current application’s NSURLRequest
property NSRunningApplication : a reference to current application’s NSRunningApplication
property NSUTF8StringEncoding : a reference to current application’s NSUTF8StringEncoding
property WKUserContentController : a reference to current application’s WKUserContentController
property WKWebViewConfiguration : a reference to current application’s WKWebViewConfiguration
property WKUserScriptInjectionTimeAtDocumentEnd : a reference to current application’s WKUserScriptInjectionTimeAtDocumentEnd

property returnCode : 0

on run
　　–https://www.cresco.co.jp/blog/entry/7427/
　　— By sgi-chang @ UX Design Center
　　set myStr to (POSIX path of (path to me)) & "/Contents/Resources/index.html"
　　
　　set paramObj to {myMessage:"WebGL & three.js Test", mySubMessage:"This is a WebGL UI using three.js", htmlPath:myStr}
　　my browseFileWebContents:paramObj –for debug
　　–my performSelectorOnMainThread:"browseFileWebContents:" withObject:(paramObj) waitUntilDone:true
end run

on browseFileWebContents:paramObj
　　set aMainMes to myMessage of paramObj
　　set aSubMes to mySubMessage of paramObj
　　set htmlPathStr to (htmlPath of paramObj)
　　
　　set aWidth to 1600
　　set aHeight to 900
　　
　　–WebViewをつくる
　　set aConf to WKWebViewConfiguration’s alloc()’s init()
　　
　　–指定HTML内のJavaScriptをFetch
　　tell current application
　　　　set htmlString to read ((POSIX file htmlPathStr) as alias) as «class utf8»
　　end tell
　　set jsSource to pickUpFromToStr(htmlString, "<script src", "</script>") of me
　　
　　set userScript to WKUserScript’s alloc()’s initWithSource:jsSource injectionTime:(WKUserScriptInjectionTimeAtDocumentEnd) forMainFrameOnly:true
　　set userContentController to WKUserContentController’s alloc()’s init()
　　userContentController’s addUserScript:(userScript)
　　aConf’s setUserContentController:userContentController
　　
　　set aWebView to WKWebView’s alloc()’s initWithFrame:(current application’s NSMakeRect(0, 0, aWidth, aHeight)) configuration:aConf
　　aWebView’s setNavigationDelegate:me
　　aWebView’s setUIDelegate:me
　　aWebView’s setTranslatesAutoresizingMaskIntoConstraints:true
　　using terms from scripting additions
　　　　set bURL to |NSURL|’s fileURLWithPath:(POSIX path of (path to me))
　　end using terms from
　　set htmlURL to current application’s |NSURL|’s fileURLWithPath:htmlPathStr
　　aWebView’s loadFileURL:(htmlURL) allowingReadAccessToURL:(bURL)
　　
　　— set up alert　　
　　set theAlert to NSAlert’s alloc()’s init()
　　tell theAlert
　　　　its setMessageText:aMainMes
　　　　its setInformativeText:aSubMes
　　　　its addButtonWithTitle:"OK"
　　　　–its addButtonWithTitle:"Cancel"
　　　　its setAccessoryView:aWebView
　　　　
　　　　set myWindow to its |window|
　　end tell
　　
　　— show alert in modal loop
　　NSRunningApplication’s currentApplication()’s activateWithOptions:0
　　my performSelectorOnMainThread:"doModal:" withObject:(theAlert) waitUntilDone:true
　　
　　–Stop Web View Action
　　set bURL to |NSURL|’s URLWithString:"about:blank"
　　set bReq to NSURLRequest’s requestWithURL:bURL
　　aWebView’s loadRequest:bReq
　　
　　if (my returnCode as number) = 1001 then error number -128
end browseFileWebContents:

on doModal:aParam
　　set (my returnCode) to (aParam’s runModal()) as number
end doModal:

on viewDidLoad:aNotification
　　return true
end viewDidLoad:

on fetchJSSourceString(aURL)
　　set jsURL to |NSURL|’s URLWithString:aURL
　　set jsSourceString to NSString’s stringWithContentsOfURL:jsURL encoding:(NSUTF8StringEncoding) |error|:(missing value)
　　return jsSourceString
end fetchJSSourceString

on pickUpFromToStr(aStr as string, s1Str as string, s2Str as string)
　　set a1Offset to offset of s1Str in aStr
　　if a1Offset = 0 then return false
　　set bStr to text (a1Offset + (length of s1Str)) thru -1 of aStr
　　set a2Offset to offset of s2Str in bStr
　　if a2Offset = 0 then return false
　　set cStr to text 1 thru (a2Offset – (length of s2Str)) of bStr
　　return cStr as string
end pickUpFromToStr

–リストを任意のデリミタ付きでテキストに
on retArrowText(aList, aDelim)
　　set aText to ""
　　set curDelim to AppleScript’s text item delimiters
　　set AppleScript’s text item delimiters to aDelim
　　set aText to aList as text
　　set AppleScript’s text item delimiters to curDelim
　　return aText
end retArrowText

on array2DToJSONArray(aList)
　　set anArray to current application’s NSMutableArray’s arrayWithArray:aList
　　set jsonData to current application’s NSJSONSerialization’s dataWithJSONObject:anArray options:(0 as integer) |error|:(missing value) –0 is
　　set resString to current application’s NSString’s alloc()’s initWithData:jsonData encoding:(current application’s NSUTF8StringEncoding)
　　return resString
end array2DToJSONArray

on parseByDelim(aData, aDelim)
　　set curDelim to AppleScript’s text item delimiters
　　set AppleScript’s text item delimiters to aDelim
　　set dList to text items of aData
　　set AppleScript’s text item delimiters to curDelim
　　return dList
end parseByDelim

★Click Here to Open This Script　

ステータスバーアイテムの点滅

Posted on 11月 4, 2020 by Takaaki Naganoya

自分で作成したNSStatusItemを点滅させるAppleScriptです。

ステータスバーアイテムを動的に作成して、メニューを表示して簡易メニュー的なユーザーインタフェースをAppleScriptで作成することは、割とあります。

Xcode上で作成したCocoa AppleScriptアプリケーションでも、プログラムでステータスアイテムを作成することはあります。

とくに、Window表示とステータスバーのメニュー表示を切り替えた場合など、ステータスバーアイテムを点滅させて「表示を切り替えた」ことを表現したいケースがあります。

本件は、例によって前例が見つからず、自前でいろいろ調べていたのですが、わかってしまえば簡単でした。AppleScriptで前例が見つからないのは別にそんなもんですが、Objective-Cでも見つからないのはどうかと思います。

NSStatusItemからbuttonを取得でき、これにsetWantsLayer:trueを実行すると普通にCoreAnimationでアニメーション表示させることができました。

本Scriptはスクリプトエディタ、Script Debuggerなど動作環境をとくに選ぶことなく動作します。たぶん、Switch Controlから呼び出したAppleScriptでも動作するはずです。

自分は点滅させるぐらいで満足していますが、その他のアニメーションエフェクトもいろいろ試してみました。みましたが……メニューバーという狭い領域に表示する関係上、「表示させても目立たないアニメーション」（拡大縮小など）や、「そもそも指定してもアニメーションしないアニメーション」なども見られます。

本サンプルは絵文字を表示していますが、これはあくまで「タイトル」を点滅させているものです。別途、ステータスバーアイテムに「アイコン」を指定している場合でも問題なく点滅アニメーションの表示を行えています。

AppleScript名：ステータスバーアイテムの点滅.scptd

— Created 2017-03-03 by Takaaki Naganoya
— Modified 2018-02-15 by Shane Stanley–Thanks!!
— Modified 2018-02-15 by Takaaki Naganoya
— Modified 2020-11-04 by Takaaki Naganoya
use AppleScript version "2.5"
use scripting additions
use framework "Foundation"
use framework "AppKit"

property aStatusItem : missing value

on run
　　my performSelectorOnMainThread:"init:" withObject:(missing value) waitUntilDone:true
end run

on init:aSender
　　set aList to {"Piyomaru", "Software", "", "Takaaki", {"Yes", "No"}, "", "Machine", {"MacBook Pro", "MacBook Air", "Mac mini"}, "", "Quit"}
　　
　　set aStatusItem to current application’s NSStatusBar’s systemStatusBar()’s statusItemWithLength:(current application’s NSVariableStatusItemLength)
　　
　　aStatusItem’s setTitle:"🍎"
　　aStatusItem’s setHighlightMode:true
　　aStatusItem’s setMenu:(createMenu(aList) of me)
　　
　　–Blink Status Bar Item
　　set aButton to aStatusItem’s button()
　　aButton’s setWantsLayer:true
　　my blinkObject:aButton withRepeat:10 withDuration:1.0 –OK
　　–my scaleObject:aButton withRepeat:10 withDuration:0.5 –OK
　　–my rotateObject:aButton forAxis:90 withRepeat:10 withDuration:0.5 –NG
　　–my moveObject:aButton withRepeat:10 withDuration:0.5–NG
end init:

on createMenu(aList)
　　set aMenu to current application’s NSMenu’s alloc()’s init()
　　set aCount to 10
　　
　　set prevMenuItem to ""
　　
　　repeat with i in aList
　　　　set j to contents of i
　　　　set aClass to (class of j) as string
　　　　
　　　　if j is equal to "" then
　　　　　　set aMenuItem to (current application’s NSMenuItem’s separatorItem())
　　　　　　(aMenu’s addItem:aMenuItem)
　　　　else
　　　　　　if (aClass = "text") or (aClass = "string") then
　　　　　　　　
　　　　　　　　if j = "Quit" then
　　　　　　　　　　set aMenuItem to (current application’s NSMenuItem’s alloc()’s initWithTitle:j action:"actionHandler:" keyEquivalent:"")
　　　　　　　　else
　　　　　　　　　　set aMenuItem to (current application’s NSMenuItem’s alloc()’s initWithTitle:j action:"actionHandler:" keyEquivalent:"")
　　　　　　　　end if
　　　　　　　　
　　　　　　　　(aMenuItem’s setTag:aCount)
　　　　　　　　(aMenuItem’s setTarget:me)
　　　　　　　　(aMenu’s addItem:aMenuItem)
　　　　　　　　
　　　　　　　　set aCount to aCount + 10
　　　　　　　　copy aMenuItem to prevMenuItem
　　　　　　　　
　　　　　　　　
　　　　　　else if aClass = "list" then
　　　　　　　　–Generate Submenu
　　　　　　　　set subMenu to current application’s NSMenu’s new()
　　　　　　　　(aMenuItem’s setSubmenu:subMenu)
　　　　　　　　
　　　　　　　　set subCounter to 1
　　　　　　　　
　　　　　　　　repeat with ii in j
　　　　　　　　　　set jj to contents of ii
　　　　　　　　　　
　　　　　　　　　　set subMenuItem1 to (current application’s NSMenuItem’s alloc()’s initWithTitle:jj action:"actionHandler:" keyEquivalent:"")
　　　　　　　　　　(subMenuItem1’s setTarget:me)
　　　　　　　　　　(subMenuItem1’s setTag:(aCount + subCounter))
　　　　　　　　　　(subMenu’s addItem:subMenuItem1)
　　　　　　　　　　
　　　　　　　　　　set subCounter to subCounter + 1
　　　　　　　　end repeat
　　　　　　　　
　　　　　　end if
　　　　　　
　　　　end if
　　　　
　　end repeat
　　
　　return aMenu
end createMenu

on actionHandler:sender
　　set aTag to tag of sender as string
　　set aTitle to title of sender as string
　　
　　if aTitle is equal to "Quit" then
　　　　current application’s NSStatusBar’s systemStatusBar()’s removeStatusItem:aStatusItem
　　else
　　　　display notification (aTag as string)
　　end if
end actionHandler:

on blinkObject:aObject withRepeat:aTimes withDuration:durationSec
　　set animation to current application’s CABasicAnimation’s animationWithKeyPath:"opacity"
　　animation’s setDuration:durationSec –0.1
　　animation’s setAutoreverses:true
　　animation’s setRepeatCount:aTimes
　　animation’s setFromValue:(current application’s NSNumber’s numberWithFloat:1.0)
　　animation’s setToValue:(current application’s NSNumber’s numberWithFloat:0.0)
　　aObject’s layer()’s addAnimation:animation forKey:"blink"
end blinkObject:withRepeat:withDuration:

on scaleObject:aObject withRepeat:aTimes withDuration:durationSec
　　set animation to current application’s CABasicAnimation’s animationWithKeyPath:"transform.scale"
　　animation’s setDuration:durationSec
　　animation’s setAutoreverses:true
　　animation’s setRepeatCount:aTimes
　　animation’s setFromValue:(current application’s NSNumber’s numberWithFloat:1.0)
　　animation’s setToValue:(current application’s NSNumber’s numberWithFloat:2.0)
　　aObject’s layer()’s addAnimation:animation forKey:"scale-layer"
end scaleObject:withRepeat:withDuration:

on rotateObject:aObject forAxis:anAxis withRepeat:aTimes withDuration:durationSec
　　set animation to current application’s CABasicAnimation’s animationWithKeyPath:("transform.rotation." & anAxis)
　　animation’s setDuration:durationSec
　　animation’s setAutoreverses:true
　　animation’s setRepeatCount:aTimes
　　animation’s setFromValue:(current application’s NSNumber’s numberWithFloat:0.0)
　　animation’s setToValue:(current application’s NSNumber’s numberWithFloat:4.0 * 3.1415926)
　　aObject’s layer()’s addAnimation:animation forKey:"rotate-layer"
end rotateObject:forAxis:withRepeat:withDuration:

on moveObject:aObject withRepeat:aTimes withDuration:durationSec
　　set animation to current application’s CABasicAnimation’s animationWithKeyPath:"position"
　　animation’s setDuration:durationSec
　　animation’s setAutoreverses:false
　　animation’s setRepeatCount:aTimes
　　animation’s setFromValue:(current application’s NSValue’s valueWithCGPoint:(aObject’s layer()’s position()))
　　animation’s setToValue:(current application’s NSValue’s valueWithCGPoint:(current application’s CGPointMake(320, 480)))
　　aObject’s layer()’s addAnimation:animation forKey:"move-layer"
end moveObject:withRepeat:withDuration:

★Click Here to Open This Script　

アラートダイアログ上にWebViewで3Dコンテンツを表示（WebGL＋three.js）

Posted on 6月 13, 2020 by Takaaki Naganoya

アラートダイアログ上にさまざまなGUI部品を配置してUIを作成する「箱庭UI」シリーズ、WkWebViewを配置してWeb GL＋three.jsによる3Dアニメーションコンテンツを表示するAppleScriptです。

# macOS 10.14.6上のWkWebViewで途中のアップデートから、mouse dragのイベントが取れなくなっています。macOS 10.15および11.0では問題なくmouse dragのイベントを取得できているのですが、、、、。ちなみに、Safariで表示させた場合には問題ありません。同様にWkWebViewを使っているとおぼしきFileMaker Pro v19のWebViewerも同様にドラッグ操作が抜けるので、自分が間抜けなせいではないと思いま

# macOS 13.3beta上では、SafariでもWkWebViewでもWebGL＋three.jsで作られているこの内容を表示できません。全世界のデベロッパーがWkWebView上でWebGL＋three.jsのコンテンツが動かない（表示できない）ことを確認しています。
→ 最新のmacOSで動くバージョンを掲載アラートダイアログ上にWebViewで3Dコンテンツを表示（WebGL＋three.js）v3

多項目選択メニュー部品のようであり、画面下部にあるTABLE（少しデータをいじくってPIYOMARU表示）、SPHERE、HELIX、GRIDのボタンから表示メニュー形態を選択可能になっています。操作は、マウスのドラッグとマウスのスクロール（トラックパッドでもスクロール操作を）です。

▲TABLE 表示

▲SPHERE 表示

▲HELIX 表示

▲GRID 表示

ひととおり、最初のTABLE表示部分の部品表示座標データをいじくって、表示色をいろいろ変更してみて、表示データをAppleScript側のリスト変数で与えるところまでやりかけて、リストからJSON文字列に問題なく変換できているものの、実際にHTMLコンテンツに合成して再生まで行くと何も表示されないという状況です。何も考えずに横長のデータを生成したので、そのあたり横幅に制限があったりするのかもしれません。

球体にDOM要素をテクスチャマッピングするSPHERE表示では、データ数が想定どおりの個数ないと球体の表示が成立しないため、そのあたりにデモプログラムっぽさが垣間見えます。

現状、ただ表示するだけで項目選択などは行えない状況ですが、これを強化して項目選択UIとして育てていくのか、Xcode上のアプリケーションに統合する方向でブラッシュアップするのか、いろいろ協議した結果、現状で既存の選択UIより高い実用性を確保できない、という結論に至ったため「AppleScriptでここまでやってみた」という技術的なデモンストレーションとしてBlog上で公開しておくぐらいのものだろうという話に。

その後、FileMaker ProのWebViewer上で内容可変＋クリック受信機能つきの3D Rotationメニューを実装できるところまで内容の解析ができました。

AppleScript名：アラートダイアログ上にWebViewで3Dコンテンツを表示（WebGL＋three.js）.scptd

—
–　　Created by: Takaaki Naganoya
–　　Created on: 2020/06/13
—
–　　Copyright © 2020 Piyomaru Software, All Rights Reserved
—
use AppleScript version "2.4" — Yosemite (10.10) or later
use framework "Foundation"
use framework "AppKit"
use framework "WebKit"
use scripting additions

property returnCode : 0

–https://www.cresco.co.jp/blog/entry/7427/
— By sgi-chang @ UX Design Center
set myStr to "<!DOCTYPE html>
<html>

<head>
<title>three.js css3d – cresco xmas inspired by periodic table</title>
<meta charset=＼"utf-8＼">
<meta name=＼"viewport＼" content=＼"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0＼">
<link type=＼"text/css＼" rel=＼"stylesheet＼" href=＼"https://threejs.org/examples/main.css＼">
<style>
a {
color: #8ff;
}

#menu {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}

.element {
width: 120px;
height: 160px;
box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
border: 1px solid rgba(127, 255, 255, 0.25);
font-family: Helvetica, sans-serif;
text-align: center;
line-height: normal;
cursor: default;
}

.element:hover {
box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
border: 1px solid rgba(127, 255, 255, 0.75);
}

.element .number {
position: absolute;
top: 20px;
right: 20px;
font-size: 12px;
color: rgba(127, 255, 255, 0.75);
}

.element .symbol {
position: absolute;
top: 40px;
left: 0px;
right: 0px;
font-size: 60px;
font-weight: bold;
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
}

.element .details {
position: absolute;
bottom: 15px;
left: 0px;
right: 0px;
font-size: 12px;
color: rgba(127, 255, 255, 0.75);
}

button {
color: rgba(127, 255, 255, 0.75);
background: transparent;
outline: 1px solid rgba(127, 255, 255, 0.75);
border: 0px;
padding: 5px 10px;
cursor: pointer;
}

button:hover {
background-color: rgba(0, 255, 255, 0.5);
}

button:active {
color: #000000;
background-color: rgba(0, 255, 255, 0.75);
}
</style>
</head>

<body>
<script src=＼"https://threejs.org/examples/jsm/libs/tween.module.min.js＼"></script>
<script src=＼"https://threejs.org/examples/jsm/controls/TrackballControls.js＼"></script>
<script src=＼"https://threejs.org/examples/jsm/renderers/CSS3DRenderer.js＼"></script>

<div id=＼"info＼"><a href=＼"http://piyocast.com/as＼" target=＼"_blank＼">AppleScript 3D UI Demonstration</a> By Piyomaru Software</div>
<div id=＼"container＼"></div>
<div id=＼"menu＼">
<button id=＼"table＼">TABLE</button>
<button id=＼"sphere＼">SPHERE</button>
<button id=＼"helix＼">HELIX</button>
<button id=＼"grid＼">GRID</button>
</div>

<!– <script> –>
<script type=＼"module＼">
import * as THREE from ’https://threejs.org/build/three.module.js’;
import { TWEEN } from ’https://threejs.org/examples/jsm/libs/tween.module.min.js’;
import { TrackballControls } from ’https://threejs.org/examples/jsm/controls/TrackballControls.js’;
import { CSS3DRenderer, CSS3DObject } from ’https://threejs.org/examples/jsm/renderers/CSS3DRenderer.js’;
　　　　
var table = [
＼"P＼", ＼"Hydrogen＼", ＼"1.00794＼", 1, 1,
＼"P＼", ＼"Helium＼", ＼"4.002602＼", 1, 2,
＼"P＼", ＼"Lithium＼", ＼"6.941＼", 1, 3,
＼"P＼", ＼"Beryllium＼", ＼"9.012182＼", 1, 4,
＼"P＼", ＼"Boron＼", ＼"10.811＼", 1, 5,
＼"P＼", ＼"Carbon＼", ＼"12.0107＼", 2, 1,
＼"P＼", ＼"Nitrogen＼", ＼"14.0067＼", 2, 3,
＼"P＼", ＼"Oxygen＼", ＼"15.9994＼", 3, 1,
＼"P＼", ＼"Fluorine＼", ＼"18.9984032＼", 3, 3,
＼"P＼", ＼"Flerovium＼", ＼"(289)＼", 4, 2,
＼"I＼", ＼"Moscovium＼", ＼"(290)＼", 6, 1,
＼"I＼", ＼"Livermorium＼", ＼"(293)＼", 6, 2,
＼"I＼", ＼"Tennessine＼", ＼"(294)＼", 6, 3,
＼"I＼", ＼"Titanium＼", ＼"47.867＼", 6, 4,
＼"I＼", ＼"Vanadium＼", ＼"50.9415＼", 6, 5,
＼"Y＼", ＼"Chromium＼", ＼"51.9961＼", 8, 1,
＼"Y＼", ＼"Manganese＼", ＼"54.938045＼", 9, 2,
＼"Y＼", ＼"Iron＼", ＼"55.845＼", 10, 3,
＼"Y＼", ＼"Cobalt＼", ＼"58.933195＼", 10, 4,
＼"Y＼", ＼"Nickel＼", ＼"58.6934＼", 10, 5,
＼"Y＼", ＼"Copper＼", ＼"63.546＼", 11, 2,
＼"Y＼", ＼"Zinc＼", ＼"65.38＼", 12, 1,
＼"O＼", ＼"Gallium＼", ＼"69.723＼", 14, 1,
＼"O＼", ＼"Copernicium＼", ＼"(285)＼", 14, 2,
＼"O＼", ＼"Nihonium＼", ＼"(286)＼", 14, 3,
＼"O＼", ＼"Oganesson＼", ＼"(294)＼", 14, 4,
＼"O＼", ＼"Neon＼", ＼"20.1797＼", 14, 5,
＼"O＼", ＼"Sodium＼", ＼"22.98976…＼", 15, 1,
＼"O＼", ＼"Magnesium＼", ＼"24.305＼", 15, 5,
＼"O＼", ＼"Aluminium＼", ＼"26.9815386＼", 16, 1,
＼"O＼", ＼"Silicon＼", ＼"28.0855＼", 16, 5,
＼"O＼", ＼"Phosphorus＼", ＼"30.973762＼", 17, 1,
＼"O＼", ＼"Sulfur＼", ＼"32.065＼", 17, 2,
＼"O＼", ＼"Chlorine＼", ＼"35.453＼", 17, 3,
＼"O＼", ＼"Argon＼", ＼"39.948＼", 17, 4,
＼"O＼", ＼"Potassium＼", ＼"39.948＼", 17, 5,
＼"M＼", ＼"Calcium＼", ＼"40.078＼", 1, 7,
＼"M＼", ＼"Scandium＼", ＼"44.955912＼", 1, 8,
＼"M＼", ＼"Roentgenium＼", ＼"(280)＼", 1, 9,
＼"M＼", ＼"Germanium＼", ＼"72.63＼", 1, 10,
＼"M＼", ＼"Lead＼", ＼"207.2＼", 1, 11,　　　　　　
＼"M＼", ＼"Arsenic＼", ＼"74.9216＼", 2, 8,
＼"M＼", ＼"Selenium＼", ＼"78.96＼", 3, 9,
＼"M＼", ＼"Bromine＼", ＼"79.904＼", 3, 10,
＼"M＼", ＼"Krypton＼", ＼"83.798＼", 4, 8,
＼"M＼", ＼"Rubidium＼", ＼"85.4678＼", 5, 7,
＼"M＼", ＼"Strontium＼", ＼"87.62＼", 5, 8,
＼"M＼", ＼"Yttrium＼", ＼"88.90585＼", 5, 9,
＼"M＼", ＼"Zirconium＼", ＼"91.224＼", 5, 10,
＼"M＼", ＼"Niobium＼", ＼"92.90628＼", 5, 11,
＼"A＼", ＼"Molybdenum＼", ＼"95.96＼", 7,8,
＼"A＼", ＼"Technetium＼", ＼"(98)＼", 7, 9,
＼"A＼", ＼"Ruthenium＼", ＼"101.07＼", 7, 10,
＼"A＼", ＼"Rhodium＼", ＼"102.9055＼",7, 11,
＼"A＼", ＼"Palladium＼", ＼"106.42＼", 8, 7,
＼"A＼", ＼"Silver＼", ＼"107.8682＼", 8,9,
＼"A＼", ＼"Cadmium＼", ＼"112.411＼", 9, 7,
＼"A＼", ＼"Indium＼", ＼"114.818＼", 9, 9,
＼"A＼", ＼"Tin＼", ＼"118.71＼", 10, 8,
＼"A＼", ＼"Antimony＼", ＼"121.76＼", 10, 9,
＼"A＼", ＼"Gadolinium＼", ＼"157.25＼", 10, 10,
＼"A＼", ＼"Terbium＼", ＼"158.92535＼", 10, 11,
＼"R＼", ＼"Dysprosium＼", ＼"162.5＼", 12, 7,
＼"R＼", ＼"Holmium＼", ＼"164.93032＼", 12, 8,
＼"R＼", ＼"Erbium＼", ＼"167.259＼", 12, 9,
＼"R＼", ＼"Thulium＼", ＼"168.93421＼", 12, 10,
＼"R＼", ＼"Ytterbium＼", ＼"173.054＼", 12, 11,
＼"R＼", ＼"Lutetium＼", ＼"174.9668＼", 13, 7,
＼"R＼", ＼"Hafnium＼", ＼"178.49＼", 13, 9,
＼"R＼", ＼"Samarium＼", ＼"150.36＼", 14, 7,
＼"R＼", ＼"Europium＼", ＼"151.964＼", 14, 9,
＼"R＼", ＼"Tantalum＼", ＼"180.94788＼", 15, 8,
＼"R＼", ＼"Tungsten＼", ＼"183.84＼", 15, 10,
＼"R＼", ＼"Rhenium＼", ＼"186.207＼", 15, 11,
＼"U＼", ＼"Osmium＼", ＼"190.23＼", 17, 7,
＼"U＼", ＼"Iridium＼", ＼"192.217＼", 17,8,
＼"U＼", ＼"Platinum＼", ＼"195.084＼", 17, 9,
＼"U＼", ＼"Gold＼", ＼"196.966569＼", 17, 10,
＼"U＼", ＼"Mercury＼", ＼"200.59＼", 18, 11,
＼"U＼", ＼"Thallium＼", ＼"204.3833＼", 19, 11,
＼"U＼", ＼"Bismuth＼", ＼"208.9804＼", 20, 7,
＼"U＼", ＼"Polonium＼", ＼"(209)＼", 20, 8,
＼"U＼", ＼"Astatine＼", ＼"(210)＼", 20, 9,
＼"U＼", ＼"Francium＼", ＼"(223)＼", 20, 10,
＼"U＼", ＼"Radium＼", ＼"(226)＼", 22, 9,
＼"U＼", ＼"Actinium＼", ＼"(227)＼", 22, 10,
＼"U＼", ＼"Thorium＼", ＼"232.03806＼", 22, 11,
＼"A＼", ＼"Protactinium＼", ＼"231.0588＼", 22, 7,
＼"A＼", ＼"Uranium＼", ＼"238.02891＼", 23, 9,
＼"A＼", ＼"Neptunium＼", ＼"(237)＼", 23, 8,
＼"A＼", ＼"Plutonium＼", ＼"(244)＼", 23, 9,
＼"A＼", ＼"Americium＼", ＼"(243)＼", 23, 10,
＼"A＼", ＼"Curium＼", ＼"(247)＼", 23, 11,
＼"S＼", ＼"Berkelium＼", ＼"(247)＼", 24, 7,
＼"S＼", ＼"Californium＼", ＼"(251)＼", 24, 8,
＼"S＼", ＼"Einstenium＼", ＼"(252)＼", 24, 9,
＼"S＼", ＼"Fermium＼", ＼"(257)＼", 24, 11,
＼"S＼", ＼"Mendelevium＼", ＼"(258)＼", 25, 7,
＼"S＼", ＼"Nobelium＼", ＼"(259)＼", 25, 9,
＼"S＼", ＼"Lawrencium＼", ＼"(262)＼", 25, 11,
＼"S＼", ＼"Rutherfordium＼", ＼"(267)＼", 26, 7,
＼"S＼", ＼"Dubnium＼", ＼"(268)＼", 26, 9,
＼"S＼", ＼"Seaborgium＼", ＼"(271)＼", 26, 10,
＼"S＼", ＼"Bohrium＼", ＼"(272)＼", 26, 11,
＼"A＼", ＼"Hassium＼", ＼"(270)＼", 27, 8,
＼"B＼", ＼"Meitnerium＼", ＼"(276)＼", 27, 9,
＼"C＼", ＼"Darmstadium＼", ＼"(281)＼", 27, 8,
＼"D＼", ＼"Tellurium＼", ＼"127.6＼", 27, 9,
＼"E＼", ＼"Iodine＼", ＼"126.90447＼", 27, 10,
＼"F＼", ＼"Xenon＼", ＼"131.293＼", 28, 9,
＼"G＼", ＼"Caesium＼", ＼"132.9054＼", 28, 10,
＼"H＼", ＼"Barium＼", ＼"132.9054＼", 28, 11,
＼"I＼", ＼"Lanthanum＼", ＼"138.90547＼", 29, 8,
＼"J＼", ＼"Cerium＼", ＼"140.116＼", 29, 9,
＼"K＼", ＼"Praseodymium＼", ＼"140.90765＼", 29, 10,
＼"L＼", ＼"Neodymium＼", ＼"144.242＼", 29, 8,
＼"M＼", ＼"Promethium＼", ＼"(145)＼", 29, 9,
　　＼"PS＼", ＼"Piyomaru Software＼", ＼"(PiyoPiyo)＼", 29, 10,　　
　　＼"AS＼", ＼"AppleScript＼", ＼"(osalang)＼", 29, 11,　　
];

var camera, scene, renderer;
var controls;
var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };
init();
animate();
　　　　
function init() {
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 3000;
scene = new THREE.Scene();
　　　　　　
// table
for (var i = 0; i < table.length; i += 5) {
　　　　　　
var element = document.createElement(’div’);
element.className = ’element’;

　　　　 //element.style.backgroundColor = ’rgba(128,0,64,’ + ( Math.random() * 0.5 + 0.25 ) + ’)’;
　　　　//element.style.backgroundColor = ’rgba(64,0,128,’ + ( Math.random() * 0.5 + 0.25 ) + ’)’;
//element.style.backgroundColor = ’rgba(0,0,0,’ + ( Math.random() * 0.5 + 0.25 ) + ’)’;
element.style.backgroundColor = ’rgba(0,127,127,’ + ( Math.random() * 0.5 + 0.25 ) + ’)’;
//element.style.backgroundColor = ’rgba(18,77,174,’ + (Math.random() * 0.5 + 0.25) + ’)’;

var number = document.createElement(’div’);
number.className = ’number’;
number.textContent = (i / 5) + 1;
element.appendChild(number);
var symbol = document.createElement(’div’);
symbol.className = ’symbol’;
symbol.textContent = table[i];
element.appendChild(symbol);
var details = document.createElement(’div’);
details.className = ’details’;
details.innerHTML = table[i + 1] + ’<br>’ + table[i + 2];
element.appendChild(details);
var object = new CSS3DObject(element);
object.position.x = Math.random() * 4000 – 2000;
object.position.y = Math.random() * 4000 – 2000;
object.position.z = Math.random() * 4000 – 2000;
scene.add(object);
objects.push(object);
//
var object = new THREE.Object3D();
object.position.x = (table[i + 3] * 140) – 1330;
object.position.y = – (table[i + 4] * 180) + 990;
targets.table.push(object);
}
　　　　　　
// sphere
var vector = new THREE.Vector3();
for (var i = 0, l = objects.length; i < l; i++) {
var phi = Math.acos(- 1 + (2 * i) / l);
var theta = Math.sqrt(l * Math.PI) * phi;
var object = new THREE.Object3D();
object.position.setFromSphericalCoords(800, phi, theta);
vector.copy(object.position).multiplyScalar(2);
object.lookAt(vector);
targets.sphere.push(object);
}
　　　　　　
// helix
var vector = new THREE.Vector3();
for (var i = 0, l = objects.length; i < l; i++) {
var theta = i * 0.175 + Math.PI;
var y = – (i * 8) + 450;
var object = new THREE.Object3D();
object.position.setFromCylindricalCoords(900, theta, y);
vector.x = object.position.x * 2;
vector.y = object.position.y;
vector.z = object.position.z * 2;
object.lookAt(vector);
targets.helix.push(object);
}
　　　　　　
// grid
for (var i = 0; i < objects.length; i++) {
var object = new THREE.Object3D();
object.position.x = ((i % 5) * 400) – 800;
object.position.y = (- (Math.floor(i / 5) % 5) * 400) + 800;
object.position.z = (Math.floor(i / 25)) * 1000 – 2000;
targets.grid.push(object);
}
　　　　　　
//
renderer = new CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById(’container’).appendChild(renderer.domElement);
　　　　　　
//
controls = new TrackballControls(camera, renderer.domElement);
controls.minDistance = 500;
controls.maxDistance = 6000;
controls.addEventListener(’change’, render);
　　　　　　
var button = document.getElementById(’table’);
button.addEventListener(’click’, function () {
transform(targets.table, 2000);
}, false);
　　　　　　
var button = document.getElementById(’sphere’);
button.addEventListener(’click’, function () {
transform(targets.sphere, 2000);
}, false);
　　　　　　
var button = document.getElementById(’helix’);
button.addEventListener(’click’, function () {
transform(targets.helix, 2000);
}, false);
　　　　　　
var button = document.getElementById(’grid’);
button.addEventListener(’click’, function () {
transform(targets.grid, 2000);
}, false);
　　　　　　
transform(targets.table, 2000);
//
window.addEventListener(’resize’, onWindowResize, false);
}
　　　　
function transform(targets, duration) {
TWEEN.removeAll();
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
var target = targets[i];
new TWEEN.Tween(object.position)
.to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
new TWEEN.Tween(object.rotation)
.to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
new TWEEN.Tween(this)
.to({}, duration * 2)
.onUpdate(render)
.start();
}
　　　　
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
　　　　
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
controls.update();
}
　　　　
function render() {
renderer.render(scene, camera);
}
</script>
</body>

</html>"

set paramObj to {myMessage:"WebGL & three.js Test", mySubMessage:"This is a WebGL UI using charts.js", htmlStr:myStr}
–my browseStrWebContents:paramObj–for debug
my performSelectorOnMainThread:"browseStrWebContents:" withObject:(paramObj) waitUntilDone:true

on browseStrWebContents:paramObj
　　set aMainMes to myMessage of paramObj
　　set aSubMes to mySubMessage of paramObj
　　set htmlString to (htmlStr of paramObj)
　　
　　set aWidth to 1600
　　set aHeight to 950
　　
　　–WebViewをつくる
　　set aConf to WKWebViewConfiguration’s alloc()’s init()
　　
　　–指定HTML内のJavaScriptをFetch
　　set jsSource to pickUpFromToStr(htmlString, "<script src", "</script>") of me
　　
　　set userScript to WKUserScript’s alloc()’s initWithSource:jsSource injectionTime:(WKUserScriptInjectionTimeAtDocumentEnd) forMainFrameOnly:true
　　set userContentController to WKUserContentController’s alloc()’s init()
　　userContentController’s addUserScript:(userScript)
　　aConf’s setUserContentController:userContentController
　　
　　set aWebView to WKWebView’s alloc()’s initWithFrame:(current application’s NSMakeRect(0, 0, aWidth, aHeight)) configuration:aConf
　　aWebView’s setNavigationDelegate:me
　　aWebView’s setUIDelegate:me
　　aWebView’s setTranslatesAutoresizingMaskIntoConstraints:true
　　using terms from scripting additions
　　　　set bURL to |NSURL|’s fileURLWithPath:(POSIX path of (path to me))
　　end using terms from
　　aWebView’s loadHTMLString:htmlString baseURL:(bURL)
　　
　　— set up alert　　
　　set theAlert to NSAlert’s alloc()’s init()
　　tell theAlert
　　　　its setMessageText:aMainMes
　　　　its setInformativeText:aSubMes
　　　　its addButtonWithTitle:"OK"
　　　　–its addButtonWithTitle:"Cancel"
　　　　its setAccessoryView:aWebView
　　　　
　　　　set myWindow to its |window|
　　end tell
　　
　　— show alert in modal loop
　　NSRunningApplication’s currentApplication()’s activateWithOptions:0
　　my performSelectorOnMainThread:"doModal:" withObject:(theAlert) waitUntilDone:true
　　
　　–Stop Web View Action
　　set bURL to |NSURL|’s URLWithString:"about:blank"
　　set bReq to NSURLRequest’s requestWithURL:bURL
　　aWebView’s loadRequest:bReq
　　
　　if (my returnCode as number) = 1001 then error number -128
end browseStrWebContents:

on doModal:aParam
　　set (my returnCode) to (aParam’s runModal()) as number
end doModal:

on viewDidLoad:aNotification
　　return true
end viewDidLoad:

★Click Here to Open This Script　

AppleScriptでCoreAnimationを利用

Posted on 2月 13, 2020 by Takaaki Naganoya

Xcode上で作成するCocoa AppleScript Applicationにおいて、CoreAnimationを利用するサンプルProjectです。

–> Download Xcode Project Test with Xcode 11.3.1 + macOS 10.14.6

ひととおり（このぐらい）CoreAnimationでGUI部品をアニメーションするテストを行なっていました。あまり使いすぎるのは下品に見えるとの判断から、実際のアプリケーションでは最低限の地味な利用にとどめていました。

–> Watch Demo (1) Double PDF

–> Watch Demo (2) This Project

Mac App Storeで販売している100％ AppleScriptで記述したアプリケーション「Double PDF 2.0」においても、コマンド実行後にメニューを更新する際、更新したメニューを点滅表示するぐらいの「節度あるお付き合い」にとどめていました。

それが、ここ最近組んでいるアプリケーションではド派手に利用する必要があるようで、再度こうした試作品を引っ張り出してテストしだしています。

AppleScript名：AppDelegate.applescript

—
— AppDelegate.applescript
— GUI Animation
—
— Created by Takaaki Naganoya on 2017/02/13.
— Copyright 2017 Takaaki Naganoya. All rights reserved.
—
— http://liu044100.blogspot.jp/2013/07/cabasicanimation.html
script AppDelegate
　　property parent : class "NSObject"
　　
　　— IBOutlets
　　property theWindow : missing value
　　property aPopup : missing value
　　
　　property gui1 : missing value
　　property gui2 : missing value
　　property gui3 : missing value
　　property gui4 : missing value
　　property gui5 : missing value
　　property gui6 : missing value
　　property gui7 : missing value
　　property gui8 : missing value
　　property gui9 : missing value
　　property guiA : missing value
　　property guiB : missing value
　　property guiC : missing value
　　
　　
　　
　　on applicationWillFinishLaunching:aNotification
　　　　— Insert code here to initialize your application before any files are opened
　　end applicationWillFinishLaunching:
　　
　　on applicationShouldTerminate:sender
　　　　return current application’s NSTerminateNow
　　end applicationShouldTerminate:
　　
　　on clicked:sender
　　　　set aInd to aPopup’s indexOfSelectedItem()
　　　　set guiList to {gui1, gui2, gui3, gui4, gui5, gui6, gui7, gui8, gui9, guiA, guiB, guiC}
　　　　repeat with i in guiList
　　　　　　if aInd = 0 then
　　　　　　　　(my blinkObject:i)
　　　　　　else if aInd = 1 then
　　　　　　　　(my scaleObject:i)
　　　　　　else if aInd = 2 then
　　　　　　　　(my rotateObject:i forAxis:"x")
　　　　　　else if aInd = 3 then
　　　　　　　　(my rotateObject:i forAxis:"y")
　　　　　　else if aInd = 4 then
　　　　　　　　(my rotateObject:i forAxis:"z")
　　　　　　else if aInd = 5 then
　　　　　　　　(my moveObject:i)
　　　　　　else if aInd = 6 then
　　　　　　　　–my mixtureAnimeObject:i
　　　　　　end if
　　　　　　delay 0.1
　　　　end repeat
　　end clicked:
　　
　　
　　
　　on blinkObject:aObject
　　　　set animation to current application’s CABasicAnimation’s animationWithKeyPath:"opacity"
　　　　animation’s setDuration:0.1
　　　　animation’s setAutoreverses:true
　　　　animation’s setRepeatCount:4
　　　　animation’s setFromValue:(current application’s NSNumber’s numberWithFloat:1.0)
　　　　animation’s setToValue:(current application’s NSNumber’s numberWithFloat:0.0)
　　　　aObject’s layer()’s addAnimation:animation forKey:"blink"
　　end blinkObject:
　　
　　on scaleObject:aObject
　　　　set animation to current application’s CABasicAnimation’s animationWithKeyPath:"transform.scale"
　　　　animation’s setDuration:0.1
　　　　animation’s setAutoreverses:true
　　　　animation’s setRepeatCount:2
　　　　animation’s setFromValue:(current application’s NSNumber’s numberWithFloat:1.0)
　　　　animation’s setToValue:(current application’s NSNumber’s numberWithFloat:2.0)
　　　　aObject’s layer()’s addAnimation:animation forKey:"scale-layer"
　　end scaleObject:
　　
　　on rotateObject:aObject forAxis:anAxis
　　　　set animation to current application’s CABasicAnimation’s animationWithKeyPath:("transform.rotation." & anAxis)
　　　　animation’s setDuration:2.0
　　　　–animation’s setAutoreverses:false
　　　　animation’s setRepeatCount:1
　　　　animation’s setFromValue:(current application’s NSNumber’s numberWithFloat:0.0)
　　　　animation’s setToValue:(current application’s NSNumber’s numberWithFloat:4.0 * 3.1415926)
　　　　aObject’s layer()’s addAnimation:animation forKey:"rotate-layer"
　　end rotateObject:forAxis:
　　
　　
　　on moveObject:aObject
　　　　set aFrame to aObject’s frame()
　　　　copy aFrame to {{fx1, fy1}, {fx2, fy2}}
　　　　set animation to current application’s CABasicAnimation’s animationWithKeyPath:"position"
　　　　animation’s setDuration:0.4
　　　　animation’s setAutoreverses:false
　　　　animation’s setRepeatCount:1
　　　　animation’s setFromValue:(current application’s NSValue’s valueWithCGRect:(aObject’s frame()))
　　　　animation’s setToValue:(current application’s NSValue’s valueWithCGRect:(current application’s CGRectMake(100, 100, fx2, fy2)))
　　　　aObject’s layer()’s addAnimation:animation forKey:"move-layer"
　　end moveObject:
　　
　　–Not Work Yet…..
　　(*
　　on mixtureAnimeObject:aObject
　　　　set animation1 to current application’s CABasicAnimation’s animationWithKeyPath:"transform.translation.x"
　　　　animation1’s setToValue:(current application’s NSNumber’s numberWithFloat:80.0)
　　　　animation1’s setDuration:3.0
　　　　
　　　　set animation2 to current application’s CABasicAnimation’s animationWithKeyPath:"transform.rotation.z"
　　　　animation2’s setFromValue:(current application’s NSNumber’s numberWithFloat:0.0)
　　　　animation2’s setToValue:(current application’s NSNumber’s numberWithFloat:4.0 * 3.1415926)
　　　　animation2’s setDuration:3.0
　　　　
　　　　set aGroup to current application’s CAAnimationGroup’s animation()
　　　　aGroup’s setDuration:3.0
　　　　aGroup’s setRepeatCount:1.0
　　　　aGroup’s setAnimations:(current application’s NSArray’s arrayWithObjects:{animation1, animation2, missing value})
　　　　aObject’s layer()’s addAnimation:aGroup forKey:"move-rotate-layer"
　　end mixtureAnimeObject:
*)
end script

★Click Here to Open This Script　

AppleScriptの穴

Useful & Practical AppleScript archive. Click '★Click Here to Open This Script' Link to download each AppleScript

カテゴリー: Animation

アラートダイアログ上にWebViewで3Dコンテンツを表示（WebGL＋three.js）v4

ステータスバーアイテムの点滅

アラートダイアログ上にWebViewで3Dコンテンツを表示（WebGL＋three.js）

AppleScriptでCoreAnimationを利用