2016-05-28

WebAssembly と Google Chrome 51

Google Chrome のバージョンが 51 になりました [1]。Google Chrome のデザインは、クラシック テーマを使用していたのですが、Linux 版ではアップデート後に色が変わってしまいました。まあ、これも慣れです。

さて、バージョン 51 で思い出すのが WebAssembly です [2]。WebAssembly とは、クロスプラットフォームな Web 上で使用できるバイトコードの定義です。言い換えるならば、WebAssembly とは Web のための仮想 CPU を定義することと言えます [3]

この WebAssembly は、有り難いことに主要なウェブブラウザで利用できるようにブラウザベンザーが協力して開発を進めているようです。Google Chrome では Google Chrome Canary のビルド 51 から WebAssembly が試験的に利用できるようになりましたが、残念ながら Linux 版の Chrome Canary は提供されていませんでした。しかし、ようやく Google Chrome 安定版のバージョン 51 がリリースされたことで、Linux でも試すことができるようになったはずなので、早速試してみました。

Octane - The JavaScript benchmark

WebAssembly が効率的なバイトコードになるように開発されることで恩恵を受けるのが、JavaScript の低水準レベルでのサブセットである asm.js です。そこで、まずは現状の Javascript エンジンについてベンチマークを取っておきます。ベンチマークには Google の Octane [4] を使用しました。

動作環境は次の通りです。

  • PC: HP Stream 11-r016TU
  • OS: Fedora 24 (x86_64, Beta)
  • Google Chrome バージョン 51.0.2704.63 (64-bit)

なお、スコアの結果にはばらつきがありますので、 Octane を 5 回連続実施して一番高いスコアを残しています。

WebAssembly の有効化

Google Chrome のアドレスバーに chrome://flags/#enable-webassembly と入力します。

試験運用版 WebAssembly の行で「有効にする」をクリック後、画面下の「今すぐ再起動」をクリックして Google を再起動して機能を有効にします(右図)。

再びベンチマーク

再起動後、ふたたび 5 回連続して Octane によるベンチマークを実施し、最もスコアが高かった結果を残します。

 

まとめ

Octane の総合スコアでは、WebAssembly を有効にした場合の方が若干高くなっていますが、各項目を較べると、Regexp と SplayLatency の二項目を除き、似たりよったりです。今後もバージョンが上がる度に、なるべく環境を揃えて比較できるベンチマーク結果を蓄積していきたいと思います。Javascript をベンチマークするソフトウェアについても、経験が足りないのでいくつか評価していく予定です。


Default WebAssmbly
Enabled
change ratio
[%]
Richards 9193 9330 1.48
Deltablue 16437 16053 -2.36
Crypto 9620 9698 0.81
Raytrace 17020 16206 -4.90
EarleyBoyer 10895 10974 0.72
Regexp 867 1239 35.33
Splay 4849 4375 -10.28
SplayLatency 8933 10681 17.82
NavlerStokes 11913 11685 -1.93
pdf.js 3610 3462 -4.19
Mandreel 6063 6052 -0.18
MandreelLatency 12882 12717 -1.29
GB Emulator 15130 14618 -3.44
CodeLoad 3150 3164 0.44
Box2DWeb 10479 10210 -2.60
zlib 22673 22616 -0.25
Typescript 8140 7980 -1.99
TOTAL 8157 8271 1.39

参考サイト

  1. Googleの「Chrome 51」が安定版に、42件のセキュリティ問題を修正 - ITmedia エンタープライズ (2016/05/26)
  2. JavaScriptを補完してウェブを高速化する「WebAssembly」をChromeがついに実装したので実行速度を試してみた - GIGAZINE (2016/03/16)
  3. WebAssembly が 1 つのマイルストーンを達成しました: 複数ブラウザによる実験的なサポートがはじまりました | Mozilla Japan ブログ (2016/03/16)[原文
  4. Octane  |  Google Developers

 

ブログランキング・にほんブログ村へ
にほんブログ村

2016-05-25

【備忘録】プロットの y 軸の目盛をカスタマイズ ─ wxPython

JavaFX で作っていたプログラムでリソース不足 (OutOfMemoryError) に悩まされているため、結局同じことになるかもしれないと思いつつも、軽快に GUI が動く wxPython にプログラムを移植しており、python のプログラミングに不慣れなためハマった個所を備忘録としてブログ用のサンプルに書き換えて残しています。

今回はマイナーな話題です。

wx.lib.plot.PlotCanvas を利用して、ある複数パラメータのトレンドデータを一度に扱って解析をするアプリケーションを作っているのですが、パラメータの値の大きさがまちまちであるため、縦に並べると y 軸の位置が不揃いになります。

JavaFX で当アプリケーションを作成していた時には、プロット枠の左側からの位置を制御できたので、wxPython の PlotCanvas で同じようなことをしようといろいろ調べましたが、どうもやり方が判りません。

そこで、苦肉の策として y 軸に表示される目盛の幅を、例えば 10 文字分というように固定幅を取るようにして揃えようとしました。

PlotCanvas を継承したクラスで、 y 軸の目盛を扱う _yticks メソッドをオーバーライドして目盛のカスタマイズをするのですが、参照したサイトの URL が判らなくなってしまいました。あとで追記します。参考として PlotCanvas を継承した MyPlot クラスを以下に示しました。

2016-05-26 同等の内容のサイトを見つけましたので、参考サイト [1] に加えました。

動作環境は次の通りです。

  • OS: Fedora 24 (x86_64, Beta)
  • python-2.7.11-4.fc24.x86_64
  • wxPython-3.0.2.0-10.fc24.x86_64
  • IDE: eclipse-pydev-5.0.0-1.fc24.x86_64
class MyPlot(plot.PlotCanvas):
    def __init__(self, parent, id,):
        plot.PlotCanvas.__init__(self, parent, wx.ID_ANY,)

    def _yticks(self, *args):

        """override  _yticks to write centigrade on y axis"""

        ticks = plot.PlotCanvas._yticks(self, *args)
        new_ticks = []

        for tick in ticks:
            t = tick[0]
            t_padded = str(t).rjust(10, ' ')
            new_ticks.append((t, t_padded))
              
        return new_ticks

Linux の環境では、これだけでうまくいくように見えるのですが Windows 上ではフォントが違うためかうまくいきません。フォントファミリーを Monospace にしたいのですが、思うようにコントロールできません。この件についてはひきつづき調べて、うまくいったら紹介することにします。

参考サイト

  1. wxPython-users - wx.lib.plot custom labels?

 

ブログランキング・にほんブログ村へ
にほんブログ村

2016-05-19

【備忘録】CheckListBox のアイテムにインスタンスを追加 ─ wxPython

JavaFX で作っていたプログラムでリソース不足 (OutOfMemoryError) に悩まされているため、結局同じことになるかもしれないと思いつつも、軽快に GUI が動く wxPython にプログラムを移植しており、python のプログラミングに不慣れなためハマった個所を備忘録としてブログ用のサンプルに書き換えて残しています。

今回は CheckListBox です。ListBox のアイテムにインスタンスを追加するために紹介したサンプル [1] をベースに、Web で見つけた CheckListBox のサンプルのコード [2] を参考にさせていただきました。

動作環境は次の通りです。

  • OS: Fedora 24 (x86_64, Beta)
  • python-2.7.11-4.fc24.x86_64
  • wxPython-3.0.2.0-10.fc24.x86_64
  • IDE: eclipse-pydev-4.6.0-1.fc24.x86_64
# -*- coding: utf-8 -*- 
import wx

class MyFrame(wx.Frame):
    def __init__(self, parent):
        wx.Frame.__init__(self, parent, title=u"都道府県リスト", size=(250, 200))
        self.CreateStatusBar()
        self.create_listbox()

    def create_listbox(self):
        self.lbox = wx.CheckListBox(self, wx.ID_ANY)
        self.lbox.Bind(wx.EVT_LISTBOX, self.SelectEvent)
        self.Bind(wx.EVT_CHECKLISTBOX, self.CheckEvent, self.lbox)

        elem_01 = PrefObj(u"北海道", u"札幌市")
        self.lbox.Append(elem_01.pref, elem_01)

        elem_02 = PrefObj(u"青森県", u"青森市")
        self.lbox.Append(elem_02.pref, elem_02)

        elem_03 = PrefObj(u"岩手県", u"盛岡市")
        self.lbox.Append(elem_03.pref, elem_03)

    def SelectEvent(self, event):
        obj1 = event.GetEventObject()
        obj2 = self.lbox.GetClientData(self.lbox.GetSelection())
        self.SetStatusText(obj1.GetStringSelection() + u"の県庁所在地は" + obj2.capital + u"です。")

    def CheckEvent(self, event):
        index = event.GetSelection()
        obj = self.lbox.GetClientData(index)
        if self.lbox.IsChecked(index):
            self.SetStatusText(obj.pref + u"が選択されました。")
        else:
            self.SetStatusText(obj.pref + u"が選択解除されました。")

class PrefObj():
    def __init__(self, pref, capital):
        self.pref = pref
        self.capital = capital

class MyApp(wx.App):
    def OnInit(self):
        ui = MyFrame(None)
        ui.Show(True)
        return True

if __name__ == "__main__":
    app = MyApp(False)
    app.MainLoop()

実行例を以下に示しました。リストのアイテムを選択した時のバインディング self.lbox.Bind(wx.EVT_LISTBOX, self.SelectEvent) と、チェックボックスをチェックするときのイベント self.Bind(wx.EVT_CHECKLISTBOX, self.CheckEvent, self.lbox) の両方を実装しているため、予期せぬメッセージがステータスバーに表示される場合があります。

Windows 7 上で同じサンプルを確認しましたが、チェックボックスとアイテム選択のイベントを容易に区別できました。OS による動作の違いはおいおい詳しく確認していきます。

 

参考サイト

  1. bitWalk's: 【備忘録】ListBox のアイテムにインスタンスを追加 ─ wxPython
  2. wxPython/CheckListBox.py at master · wxWidgets/wxPython

 

ブログランキング・にほんブログ村へ
にほんブログ村

2016-05-15

【備忘録】ListBox のアイテムにポップアップメニュー ─ wxPython

ListBox のアイテムにオブジェクト(インスタンス)を表示することができましたので [1]、さらにポップアップメニューを付けてみました [2]

動作環境は次の通りです。

  • OS: Fedora 24 (x86_64, Beta)
  • python-2.7.11-4.fc24.x86_64
  • wxPython-3.0.2.0-10.fc24.x86_64
  • IDE: eclipse-pydev-4.6.0-1.fc24.x86_64
# -*- coding: utf-8 -*- 
import wx

ID_CAPITAL = wx.NewId()

class MyFrame(wx.Frame):

    def __init__(self, parent):
        wx.Frame.__init__(self, parent, title=u"都道府県リスト", size=(250, 200))
        self.CreateStatusBar()
        self.create_listbox()
        self.createMenu()

    def create_listbox(self):
        self.lbox = wx.ListBox(self, wx.ID_ANY)
        self.lbox.Bind(wx.EVT_CONTEXT_MENU, self.showPopupMenu)

        elem_01 = PrefObj(u"北海道", u"札幌市")
        self.lbox.Append(elem_01.pref, elem_01)

        elem_02 = PrefObj(u"青森県", u"青森市")
        self.lbox.Append(elem_02.pref, elem_02)

        elem_03 = PrefObj(u"岩手県", u"盛岡市")
        self.lbox.Append(elem_03.pref, elem_03)

    def createMenu(self):
        self.menu = wx.Menu()
        item_capital = wx.MenuItem(self.menu, ID_CAPITAL,  u"県庁所在地")
        self.menu.AppendItem(item_capital)
        self.Bind(wx.EVT_MENU, self.OnCapital, id=ID_CAPITAL)
        
    def showPopupMenu(self,evt):
        position = self.ScreenToClient(wx.GetMousePosition())
        self.PopupMenu(self.menu,position)

    def OnCapital(self, event):
        obj = self.lbox.GetClientData(self.lbox.GetSelection())
        self.SetStatusText(obj.pref + u"の県庁所在地は" + obj.capital + u"です。")
        
class PrefObj():
    def __init__(self, pref, capital):
        self.pref = pref
        self.capital = capital

class MyApp(wx.App):
    def OnInit(self):
        ui = MyFrame(None)
        ui.Show(True)
        return True

if __name__ == "__main__":
    app = MyApp(False)
    app.MainLoop()

実行例を以下に示しました。

 

参考サイト

  1. bitWalk's: 【備忘録】ListBox のアイテムにインスタンスを追加 ─ wxPython
  2. Revx At Large: wxPython ListBox PopupMenu

 

ブログランキング・にほんブログ村へ
にほんブログ村

2016-05-14

【備忘録】ListBox のアイテムにインスタンスを追加 ─ wxPython

ListBox は 1 つあるいはそれ以上の文字列のリストを表示、マウスで選択するときに使用するウィジェットです。しかし単純な文字列のリストではなく、インスタンスのリストを使いたい場合があります。例えばあるファイル・オブジェクト(インスタンス)の一覧を ListBox へ表示する場合などです。

JavaFX の ListView では、比較的簡単にインスタンスのリストを表示することができたのですが、wxPython の wx.ListBox では同じようには出来なかったので、少し調べたところ、やり方は異なるものの、やりたいことが実現できることが判りました [1]

ということで、備忘録として簡単なサンプルを作りました。都道府県クラス PrefObj のインスタンスを ListBox のアイテムに追加しています。ListBox のアイテムには文字列の name プロパティを表示し、マウスのクリックイベントで message プロパティをステータスバーに表示しています。マウスのクリックイベントだけでは、PrefObj のインスタンスを取得できなかったので別の方法でインスタンスを取得しています。

動作環境は次の通りです。

  • OS: Fedora 24 (x86_64, Beta)
  • python-2.7.11-4.fc24.x86_64
  • wxPython-3.0.2.0-10.fc24.x86_64
  • IDE: eclipse-pydev-4.6.0-1.fc24.x86_64
# -*- coding: utf-8 -*- 
import wx

class MyFrame(wx.Frame):
    def __init__(self, parent):
        wx.Frame.__init__(self, parent, title=u"都道府県リスト", size=(250, 200))
        self.CreateStatusBar()
        self.create_listbox()

    def create_listbox(self):
        self.lbox = wx.ListBox(self, wx.ID_ANY)
        self.lbox.Bind(wx.EVT_LISTBOX, self.listbox_select)

        elem_01 = PrefObj(u"北海道", u"札幌市")
        self.lbox.Append(elem_01.name, elem_01)

        elem_02 = PrefObj(u"青森県", u"青森市")
        self.lbox.Append(elem_02.name, elem_02)

        elem_03 = PrefObj(u"岩手県", u"盛岡市")
        self.lbox.Append(elem_03.name, elem_03)

    def listbox_select(self, event):
        obj1 = event.GetEventObject()
        obj2 = self.lbox.GetClientData(self.lbox.GetSelection())
        self.SetStatusText(obj1.GetStringSelection() + u"の県庁所在地は" + obj2.message + u"です。")

class PrefObj():
    def __init__(self, name, message):
        self.name = name
        self.message = message

class MyApp(wx.App):
    def OnInit(self):
        ui = MyFrame(None)
        ui.Show(True)
        return True

if __name__ == "__main__":
    app = MyApp(False)
    app.MainLoop()

実行例を以下に示しました。

まだまだ初心者ですが、Python でプログラミングをするようになってから不思議な感覚にとらわれています。インデントが構文規則に含まれていることで、不思議なコーディングの美しさというものを感じるようになってきたからです。今のところ、JavaFX で作っているアプリケーションを、wxPython に置き換えたらパフォーマンスがどのぐらい変化するかを評価するために四苦八苦しながら移植していますが、もしも(対象のアプリケーションについて)wxPython のパフォーマンスの方が良ければ、ひょっとすると JavaFX を使わなくなってしまうかもしれません。

参考サイト

  1. wxPython: Storing Objects in ComboBox or ListBox Widgets | The Mouse Vs. The Python

 

ブログランキング・にほんブログ村へ
にほんブログ村