読者です 読者をやめる 読者になる 読者になる

Xojo日本語ブログ

マルチプラットフォーム対応アプリが開発できるXojoのブログです。

HTMLViewerで表示されているURLを取得する

Tips HTMLViewer JavaScript

HTMLViewerはHTMLコンテンツを簡単に表示できる便利なライブラリなのですが、その中でブラウジングしていたり、リダイレクトしたりすると表示されているURLが分からなくなります。

HTMLViewerのプロパティにURLがあれば良いのですが、それもないのでURLを使って何か処理をしたいときに不便です。

そこで使ってみたいのが ExecuteJavaScript です。

htmlViewerの DocumentComplete イベントを使います。

Self.htmlView.ExecuteJavaScript("document.title='zurl '+document.URL;")

ここではzurlとなっていますが実際には何でも大丈夫です。こうするとHTMLのtitleタグの内容が zurl http://(表示されているURL) になります。

次に TitleChanged イベントを追加します。

if instr(newTitle,"zurl")>0 then
  dim myURL() as string = split(newTitle, "zurl")
  // myURL(1)が表示されているURL
end if

このようにタイトルを使って情報を受け渡すのが良いようです。


意外とこの方法は便利で、JavaScriptを使って任意の情報を取得し、それをXojoのプログラムに渡せるようになります。活用できるポイントとして、スクレイピング的な利用も考えられるでしょう。HTTPSocketやHTTPSecureSocketではJavaScriptを動かせませんが、HTMLViewerであれば可能です。JavaScriptで情報を取りだしてXojoで使うといった利用ができるでしょう。

via Getting correct URL for HTMLViewer - Xojo Forum

XojoでFacebook認証を行うサンプルアプリを作りました

Facebook OAuth2 Web API

目指すところはOAuth2クラス(GitHubなど)なのですが、とりあえずFacebook認証に対応して、Graph APIを使えるようにしました。

XojoMania/FacebookOAuth: Facebook OAuth and get user information demo using Xojo.

使い方

クラス自体は次のように使います。

// プロバイダ(facebook、githubなど文字列で指定)
Dim provider as string = pmProvider.Text

// OAuth2のクライアントキー
Dim clientKey as String = txtClientKey.Text

// OAuth2のクライアントシークレット
Dim clientSecret as String = txtClientSecret.Text

// インスタンスを作成します。プロバイダは今のところ使えません。
App.oauth2 = new OAuth2(provider, clientKey, clientSecret)

// 認証するためのURLが返ってきます
Dim url as string =  App.oauth2.getOAuthUrl

// ブラウザで開きます
popupBrowser.htmlView.LoadURL url

// モーダルで表示します
popupBrowser.ShowModal

認証で取得できるURLはHTMLViewerで表示します。アクセストークンが取得されるので、外部ブラウザで開いてはいけません。

f:id:moongift:20160902230256p:plain

認証するとアクセストークンが取得できます。

dim myURL() as string = split(newTitle, "zurl")
if App.oauth2.isComplete(myURL(1)) then
  // アクセストークン
  mainWindow.lblAccessToken.Text = App.oauth2.accessToken
  mainWindow.btnGetUserName.Enabled = true
  MsgBox "Close this window"
  Self.btnClose.Enabled = true
end if

zurlというのはXojoでHTMLViewerを使っている時にURLを取得したいという場合に使う苦労の証なのですが、これは別な記事で紹介します。

f:id:moongift:20160902230313p:plain

アクセストークンが取得できたら、Graph APIがコールできます。今はユーザ情報が取得できます。

Dim userInfomation as JSONItem = App.oauth2.getUserInformation

txtName.Text = userInfomation.Value("name")

JSONItem型で返ってきますので、それをプログラムで利用できます。

f:id:moongift:20160902230322p:plain


今後の予定としてはGraph APIの他の機能にも対応し、他のプロバイダにも対応していく予定です。ピュアなXojoのコードで書いてあるので、プラットフォームを選ばず動作するはずです。ぜひお試しください。

XojoMania/FacebookOAuth: Facebook OAuth and get user information demo using Xojo.

XojoアプリでカスタムURLスキーマを使う方法(Mac OSX編)

Tips Mac OSX

カスタムURLスキーマというのは xojo://〜 と言ったURLでアプリケーションを起動できる仕組みです。iOSアプリ間におけるデータ連係などでよく使われています。

今回はそれをMac OSXアプリで実装する方法を紹介します。

新しいプロジェクトを作成する

この時、アプリケーション識別子を設定しますので、覚えておきましょう(例:com.example.urlscheme)。

UIを変更する

今回はテストとして、ウィンドウにテキストフィールドを追加しておきます。名前は EditField1 とします。

f:id:moongift:20160822112747p:plain

アプリケーションのイベントハンドラを設定する

Appのイベントハンドラを設定します。ハンドラはHandleAppleEventです。

コードは次の通りです。カスタムURLスキーマで渡される文字列を先ほど追加したテキストフィールドに表示します。

if eventClass = "GURL" and eventID = "GURL" then
  dim s as string = theEvent.StringParam("----")
  s = DecodeURLComponent(s)
  window1.EditField1.text = s
end if

アプリをビルドする

普通にアプリをビルドします。実行ではないので注意してください。

info.plistを編集する

ビルドしたアプリの内容を見て(パッケージの内容を表示、を選択します)、 Contents/Info.plist をテキストエディタで開きます。

f:id:moongift:20160822112805p:plain

</dict> の上に次のように追加します。 com.example.urlscheme は最初に決めたアプリケーション識別子になります。helloがURLスキーマになりますので、好きな文字に変更してください。

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>com.example.urlscheme</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>hello</string>
    </array>
  </dict>
</array>

アプリケーションを一度起動する

アプリケーションを起動することでURLスキーマが認識されます。後は終了しても大丈夫です。

Safariから実行する

後は任意のアプリケーションから実行できますが、例えばSafariのURLに次のように記述してエンターキーを押してみましょう。

hello://world

そうするとアプリケーションが立ち上がり、URLで指定した文字列がテキストフィールドに入っているはずです。

f:id:moongift:20160822112816p:plain


カスタムURLスキーマを利用することでアプリケーション間連携ができるようになったり、OAuth2のコールバックが受け取れるようになります。ぜひ活用してください。

注意点としてはアプリケーションをビルドする度に更新されてしまいます。専用のコマンド(sedなどを使って)を用意しておき、ビルド後に自動で書き換えるのが良さそうです。

via MBS Real Studio Plugin Tutorial Videos - URL Scheme

XojoをWebアプリケーションとして実行する際の2つの方法

Tips Web

XojoはGUI/CUIアプリケーションはもちろん、Webアプリケーションも開発できます。開発したWebアプリケーションを動作させる方法は2種類あります。

1. CGIとして動作させる

一つはCGIアプリケーションとして動作させる方法です。これは アプリケーションのバイナリに加えて、アプリケーション名 + ".cgi" というファイルが生成されます。CGIスクリプトPerl向けのものになっています。スクリプトファイル単体で動作するものではなく、アプリケーションのバイナリを実行してその結果をサーバに伝える役割になっています。ApacheといったCGIが利用できるHTTPサーバが別途必要になります。

2. スタンドアローンとして動作させる

もう一つはスタンドアローンとしてビルドする方法です。この方法で生成されたファイルはHTTPサーバとしての機能も備わっており、利用するポート番号も指定できます。自分でHTTPサーバを準備する必要がありませんので、とても手軽です。コンパイル先をWindows/Mac OSX/LinuxRaspberry Pi含む)それぞれに切り替えるのも簡単です。

ビルド方法を変える

CGIスタンドアローンの設定を変えるのはビルド設定の共有にて行います。

f:id:moongift:20160812135919p:plain

展開方式がCGIとStand Aloneのそれぞれが選べるようになっています。これを切り替えるだけでビルド方法が変わります。他にもポート番号も設定できます。

f:id:moongift:20160812135938p:plain


CGIとして動作させる場合にはスクリプトの実行権限や実行ユーザに注意してください。スタンドアローン版の場合、そういった点も気にする必要がないので安心です。すでに別のシステムでHTTPサーバを利用している場合にはCGI版を使っても良いでしょう。それぞれの環境において最適な方法を選択してください。

Xojoのリストボックスを使う

Tips リストボックス

Xojoライブラリの一つ、リストボックスはテーブルのようにデータを一覧表示するのに使えます。今回はその初期設定について紹介します。

ライブラリから追加する

まず画面への配置はライブラリからListBoxをドラッグ&ドロップで追加します。

f:id:moongift:20160815154230p:plain

デフォルトではこのような白い枠だけが表示されます。

f:id:moongift:20160815154136p:plain

ヘッダーを追加する

次にインスペクタを表示して、HasHeadingをオンにします。

f:id:moongift:20160815154346p:plain

これで0というヘッダーが追加されました。

f:id:moongift:20160815154427p:plainf:id:moongift:20160815154455p:plain

さらにColumnCountを設定して、任意の数のカラムにします(今回は3としています)。

f:id:moongift:20160815154455p:plain

ヘッダーを編集する

ListBoxの右下にマウスを当てて、鉛筆アイコンを表示&クリックします。

f:id:moongift:20160815154529p:plain

表示されたモーダルのAddボタンをクリックします。

f:id:moongift:20160815154638p:plain

そうするとヘッダー行の編集状態になるので、任意のカラム名を入力します。

f:id:moongift:20160815154700p:plain

終わったら右上のバツアイコンをクリックします。

f:id:moongift:20160815154714p:plain

これで初期設定が完了です。

f:id:moongift:20160815154723p:plain


インスペクタにあるInitialValueプロパティでも編集できるのですが、各カラムの区切りにTab文字を使わないといけないので若干面倒です(Tabを押すとHeadingIndexにフォーカスが移動してしまいます)。鉛筆アイコンをクリックして編集するようにしてください。

Xojo × Raspberry Piでの開発を楽に行うテクニック

Tips Raspberry Pi

XojoはRaspberry Pi向けのビルドにも対応しています。Raspberry Piといえば、小型PCの一つでRasbianというDebianベースのOSが動きます(他のOSも出ています)。しかし現状、XojoのRaspberry Pi向けにはデバッグビルド機能がなく、ブレークポイントを差し込んだり変数をチェックするのが困難です。

また、各種センサーの値を取得するためのサンプルコードも多くないため、配線やデータの取得に苦戦するのではないでしょうか。そこで、すでに数多ある外部の資産を使いつつXojoらしい使い方を考えてみたいと思います。

Xojo × Raspberry Piの組み合わせについて

1. XojoでGPIO/I2Cを直接操作する

一つはXojoでGPIO、I2Cを操作する方法です。もちろんこれはできない訳ではありません。しかしサンプルになるコードが多くないため、新しいセンサーを使おうと思うと仕様を調べたり、Xojoでの結果の受け取り方を調べた上で計算処理が必要になります。

デジタルデータのIN/OUTといった程度であればさほど難しくありません。例えば以下はLEDを光らせるサンプルです。

GPIO.SetupGPIO
  
Const kLEDPin = 4
  
GPIO.PinMode(kLEDPin, GPIO.OUTPUT)

GPIO.DigitalWrite(kLEDPin, GPIO.ON)

しかしアナログセンサーから値をとったり、LCDにメッセージを出したりするのは複雑なコードが必要になります。そのためにはセンサーの仕様を調べたり、ビット演算の伴うコーディングが必要になるでしょう。

2. シェルを使う

センサーのデータを授受する部分についてはPythonやNode.jsで作られた既存の資産がたくさん存在します。それらをXojoにトランスコードすることもできますが、直接シェルコマンドとして実行してしまうことで簡略化可能です。

Dim sh as new Shell
sh.Execute("hostname") // コマンドを実行

// sh.ReadAll で結果が受け取れます

開発中はリモートシェルを使いましょう

シェルコマンドを実行するとして、そのまま実行するとWindowsやMac OSX(またはLinux)上で実行されてしまい、Raspberry Piに繋がったセンサーの値は取得できません。そこで、開発時にはリモートシェルを使ってRaspberry Pi上でコマンドを実行するようにします。

リモートシェルは簡単で、SSHでログインしながらコマンドを実行するだけです。

$ ssh pi@raspberrypi.local ls -al
total 40
drwxr-xr-x 5 pi   pi   4096 Aug  1 05:47 .
drwxr-xr-x 3 root root 4096 May 27 11:09 ..
-rw------- 1 pi   pi    330 Aug  1 05:54 .bash_history
-rw-r--r-- 1 pi   pi    220 May 27 11:09 .bash_logout
-rw-r--r-- 1 pi   pi   3540 Aug  1 05:35 .bashrc
drwx------ 3 pi   pi   4096 Aug  1 05:26 .emacs.d
-rw-r--r-- 1 pi   pi    675 May 27 11:09 .profile
drwxr-xr-x 2 pi   pi   4096 Aug  1 05:26 .ssh

後は開発時(デスクトップ)と本番実行時(Raspberry Pi)が区別できるように処理を追加します。なお、公開鍵認証に設定しておく必要があります(そうしないとパスワードが求められるようになります)。

// XOJO_ENVは自分で追加した環境変数です
if System.EnvironmentVariable("XOJO_ENV") = "development" then
  App.command = "ssh pi@raspberrypi.local "
end

後はコマンドを実行する際にApp.commandを追加するだけです。デフォルトでは空文字なので、

  • Mac OSX : ssh pi@raspberrypi.local hostname
  • Raspberry Pi : hostname

が実行されるようになります。

Dim sh as new Shell
sh.Execute(App.command + "hostname")

// sh.ReadAll

後は普通に開発するだけです。デスクトップで実行した結果をそのままRaspberry Piで受け取れるようになります。ブレークポイントも使えますし、実際にセンサーの値も使えますので実データを使った開発ができるようになるはずです。

ライセンスの違い

ここで挙げておきたいのがやり方によってXojoのライセンスが異なるという点です。Raspberry Pi向けのCUIアプリケーションを作る場合、Raspbery Piのライセンスが必要になります。しかし例えばRaspberry Pi上で動作するWebアプリケーションを開発するのであればWebライセンスになります。つまりすでにWeb開発のライセンスを持っているのであれば、Raspberry Pi用のライセンスを買い足すことなく、IoTに関係するプロジェクトに踏み出せるようになります。


シェルやリモートシェルを使った方法であれば、これまでの一般的なシステム開発とは少し毛色の違うIoT/センサー部分を疎結合にし、実行結果だけをこれまでのXojoらしく使えるようになります。ブレークポイントデバッグも使えますので、従来の生産性の高い方法を使ったRaspberry Piアプリケーションの開発が実現するでしょう。

XojoでEndとEnd If、どちらがオススメか

Tips

Xojoは外部のプログラミング言語から良いところを取り込んで成長してきました。そのため、様々な書き方ができます。例えばコメントも、

' コメント
// コメント
REM コメント

のいずれも使えます。 'を使ったコメントはVBA風、//はJavaScriptなど、REMはBasic風です。

If 〜 Thenについても同様で、EndまたはEnd Ifが使えます。どちらが正しいという訳ではありませんが、

If ... Then

まで書いた後、Shift + Enterを押すと、

If ... Then
  
End If

と入力補完されます。他にも、

While ... do

と書いたところでShift + Enterを押すと、

While true do 
  
Wend

が入力されます。Shift + Enterで入力がぐっと楽になりますのでぜひお試しください。標準の方式として End If が補完されますので、そちらを使っていくのがXojoの基本構文と言えそうです。