Xojo日本語ブログ

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

Xojoで作るWebアプリケーションの特徴

Xojoではデスクトップアプリケーションの他、WebアプリケーションやiOSアプリも開発できます。今回はその一つ、Webアプリケーション開発について紹介します。

デバッグブレークポイントが使えます

f:id:moongift:20170511152012p:plain

Xojoで開発するWebアプリケーションではデスクトップアプリケーション開発時と同様にブレークポイントを差し込んでデバッグできます。しかもデバッグするのはJavaScriptではなくXojoのコードになります。

これはどういった仕組みになっているのでしょうか。今回は例としてWebページ上でボタンを押すと、数字を足し算して結果を返すアプリケーションで紹介します。

すべてのデータをサーバに転送する

まずボタンを押した際には入力されているテキストボックスの情報、押したボタンのイベントをサーバに送信します。

f:id:moongift:20170511152021p:plain

サーバ側でイベント判定、計算処理の実行

サーバ側では押されたボタンの名前を使ってどのイベントが実行されたのかをキャッチします。

サーバ側で計算処理

そしてサーバ側で数字を足し算します。

結果をWebブラウザに転送

f:id:moongift:20170511152033p:plain

最後にWebブラウザに対して画面上のどの部分をどう更新するかを送信します。


つまりWebブラウザ側で行っているのは「入力された情報の送信」「受け取ったレスポンスに応じて画面を書き換え」だけになります。他はすべてサーバ側で処理を行っているので、ブレークポイントを差し込んだりするのも簡単にできます。

もちろんこうした仕組みができるのはXojoのUIコンポーネントを使っている場合のみになります。jQueryのUIコンポーネントなどを使っている場合はクライアントサイドだけで動作する形になりますし、XojoをWeb APIサーバとして使っている場合もこの限りではありません。

注意点としてはXojo側でUI変更について処理を行っているので、一連の処理が終わるまで画面上に情報が反映できないという点が挙げられます。例えば長時間処理される場合、「処理中です」といった文字を出したいと思うかも知れませんが、Xojoのコード上でラベルを書き換えてもすぐに反映されません。UI上の処理などはJavaScriptで行うのが良いでしょう。方法は面倒なWeb UIの操作はJavaScriptで行ってみましょう - Xojo日本語ブログを参照してください。

UI側の操作とロジックを完全に切り離すことでXojoではWebアプリケーションであっても従来と同じ方法でデバッグできるようになります。Web業務システムについてもぜひXojoを使って開発してください。

macOS/Linuxアプリの64bitデバッグに対応しました

先日リリースされた2017リリース1でmacOSLinuxの64bitでのデバッグに対応しました。これまではビルドはできましたが、デバッグができませんでした。今後は32bit、64bitともにデバッグ可能になります。なおWindowsはまだ対応していないのでご注意ください。

32bitと64bitの違いについて

32bitと64bitの大きな違いとしては扱える数値の桁数になるでしょう。32bitの場合、-2,147,483,648 ~ 2,147,483,647になります。対して64bitの場合は-9,223,372,036,854,775,808 ~ 9,223,372,036,854,775,807になります。

f:id:moongift:20170423203347p:plain

また、よく言われるのはメモリの利用可能量が増大することです。32bitの場合は2GBまでですが、64bitは8TBまで拡大されます。通常は1TBも搭載されませんので、ほぼ無尽蔵に使えます。

ビルド設定で選ぶだけ

これまで32bitで作ってきたアプリケーションであれば、ビルド設定においてアーキテクチャx86 64bitにするだけです。これだけで生成されるアプリケーションが64bit版になります。

f:id:moongift:20170423203405p:plain

デバッグ時の注意

Xojoアプリでは32bitの時には Target32Bit が Trueに、64bitの時には Target64Bit が Trueになります。この値を見て処理の判別ができます。

例えば32bit版で符号付き整数で 2,147,483,648 を定義すると、 -2,147,483,648 となります。ユーザが自由に入力する数字などを整数型に変換したりすると処理をミスしてしまう可能性がありますので注意してください。


macOSなどは64bitが基本になっていますので、開発するアプリケーションも64bitの方が主流になっていくでしょう。ぜひご利用ください。

macOSのHTMLViewアプリで外部リンクを標準ブラウザで開く

前回の記事で紹介したHTMLViewを使ったアプリの場合、対象としているアプリケーションのドメイン以外のURLはアプリ内では開きたくないでしょう。どんなURLでも開いてしまったら単なるブラウザになってしまいます。

そこでクリックされたURLを判別してHTMLViewで開くか、外部ブラウザで開くかを判別したいと思います。また、macOS版のHTMLViewでは外部ドメインのクリックが有効になっていないので、その問題も解決します。

JavaScriptを使う

例えば前回のMastodonアプリの場合、jQueryが使われています。そこで、HTMLViewのExecuteScriptでもjQueryが使えます。コードとしては以下のようになります。

$('body').on('click', 'a', function(e) {
  var url = $(e.target).parents('a');
  if (url.attr('target') == '_blank') {
    $('textarea').val(url.attr('href'));
    document.title = 'url: ' + url.attr('href');
    return false;
  }
});

クリックされたDOMのリンクが target="_blank" であれば(別タブなどで開く設定であれば)、そのURLをtitleタグに設定します。この方法は以前書いたHTMLViewerで表示されているURLを取得する - Xojo日本語ブログのやり方になります。

HTMLのタイトルを変更すると、TitleChangedイベントが呼ばれます。後は送られてきた新しいタイトルのURL部分だけを取り出してShowURLを実行します。

if instr(newTitle,"url: ")>0 then
  Dim myURL() as string = split(newTitle, "url: ")
  ShowURL(myURL(1))
end if

これで外部URLの場合だけ、標準ブラウザでそのURLを開けるようになります。


XojoからHTMLView内のコンテンツに触ることはできません。そこでtitleタグを使ってメッセージを送ります。HTMLViewアプリの場合はこの方法を使ってみてください。

なお、WindowsmacOS用にビルドしたファイルをRelease Base · moongift/MastdonClientにアップロードしてあります。参考にしてください。

XojoならVisual Basicの知識でiOS/Web/macOSアプリが作れます!

Visual Basicはとても優れたプログラミング言語で、今なお社内システムとしてメンテナンスされているケースが多々あります。乗り換えるには既存の資産があまりにも大きく、さらにWindows 10でも動作するとあって今なお使われています。

そうして培ってきたVisual BasicのプログラミングスキルはWindowsアプリ開発でしか活かせません。VB.NETC#.NETは構文が大きく異なりますし、開発手法も変わってきます。せっかくの開発スキルを他でも活かしたい、そう考える方にお勧めなのがXojoです。

構文はVisual Basic/VBに似ています

XojoはVBに似た構文をベースに、本格的なオブジェクト指向を追加したプログラミング言語となっています。若干の違いはありますが、基本的にVBの構文がそのまま使えます。

WindowsだけでなくmacOSLinux、WebさらにRaspberry PiiOSも!

Xojoは一つの言語で複数のプラットフォームに対して開発ができます。デスクトップであればmacOSLinux、さらにWeb、Raspberry PiiOSと対応しています。2017年度中(予定)にはAndroid向けにも開発できるようになります。

f:id:moongift:20170325002308p:plain

つまりこれまで培ってきたVisual Basicの開発スキルであらゆる環境に対してソフトウェアが開発できるようになります。

IDEを使って簡単に画面作成

VBの特徴とも言える、効率的なIDEがXojoにも備わっています。あらかじめ用意されている多数のコンポーネントドラッグ&ドロップするだけで画面の設計ができます。

f:id:moongift:20170325002320p:plain

イベントドリブンな開発

さらにボタンをクリックした、ドロップリストから選択したなどユーザのアクションに応じてコーディングしていけば良いだけで、とても簡単に開発が進められます。この辺りはVBプログラマーであればよく知る方法と言えます。

さらにオブジェクト指向

VBでプログラミングしていると、オブジェクト指向がサポートされていないことでコードの再利用性が悪かったり、オブジェクトのカプセル化などが使えないのにストレスを感じるでしょう。最近のプログラミング言語は大抵オブジェクト指向が搭載されているので尚更です。

Xojoでは本格的なオブジェクト指向が実装されていますので、クラスやモジュールを使ってコードを適切に管理したり、再利用性の高いコードが書けるようになります。


Visual Basicを今なお使い続けなければならないのは大変ですが、Xojoを使うことでそのスキルを今のトレンドの中で活かせるようになります。折角のVB開発スキル、Xojoを使ってもっと活かしてみませんか?

一行で作るMastodonクライアント

分散型SNSMastodonの人気が急激に高まっています。Webブラウザから使うのが基本ですが、より本格的に使っていくためには専用クライアントソフトウェアの存在が欠かせません。

そこで今回はたった一行のコードでできるMastodonクライアントの作り方を紹介します。

HTMLViewerを使います

Xojoのメインウィンドウの上にHTMLViewerを貼り付けます。サイズはウィンドウと同じです。今回は1200x800としています。

イベントを追加する

次にウィンドウが開いた時のイベントとして、HTMLViewerでMastodonのURLを読み込みます。

htmlView.LoadURL("https://mstdn.jp/")

コーディングはこれだけです。

実行してみる

では実際に実行してみます。ちゃんとMastodonのサイトが表示されて、ログインできればOKです。

f:id:moongift:20170423171655p:plain

セッション自体は通常のWebブラウザとは切り離されますので、常時立ち上げておいても安心です。


この手のソフトウェアはElectronでよく見られますが、Xojoであればたった一行のコードで完結します。なお、WindowsmacOS用にビルドしたファイルをRelease Base · moongift/MastdonClientにアップロードしてあります。参考にしてください。

シチズンデベロッパーの業務改善例

シチズンデベロッパーは一般的に自分の業務に対する満足度が高いと言われています。それは面倒だったり、手間がかかる業務を自動化、簡素化することによって本来行うべき価値ある業務にフォーカスできるためでしょう。

今回はシチズンデベロッパーがどのような業務改善を行えるか、その一旦を紹介します。

ソーシャルデータの収集を自動化する

マーケティング担当者でよくあるのがTwitterなどのソーシャルメディアでの自社製品に関する情報収集です。毎日繰り返し検索したり、書き留めたりするのはとても大変なので、自動化する方法を考えるようになります。

使えるのはGoogleスプレッドシートのMHGYgT-unu1fC7zXOkNfBUVSHJARy_IP7というキーのライブラリです。これを使うとあらかじめ設定したキーワードにマッチするツイートを自動的にGoogleスプレッドシートに追記してくれるようになります。

一度データを蓄積してしまえば、後はいくらでも自由に分析できるようになるでしょう。使い方はTwitter 検索の結果を Google Drive のスプレッドシートに出力する (2016年春版) · hikarock blogが参考になります。

PDFからデータを抜き出す

PDFで送られてくる請求書などレポートから必要なデータを集めてデータベースに登録したりする作業があります。これを定期的に行うのは意外と骨の折れる作業です。PDFは特に編集しづらいのが問題です。

そこでPDFTOHTML/PDF2TXTというソフトウェア(コマンド)があります。これを使えばPDFをもっと扱いやすいHTMLやテキストにしてくれます。そして一旦変換してしまえば、目的の数字を正規表現などで取り出すのも難しくなくなります。

コマンドと正規表現の組み合わせになりますが、一度使えるようになると応用が利きやすいはずです。

データベースアプリケーションを作る

業務というのは何らかのデータベースが必ず存在するものです。データベースというと大げさに聞こえますが、Excelのような表計算のシートが多数集まって、シート同士が関連したものと言えます。MS Accessであったり、kintone、Filemakerなどがデータベースアプリケーションとして有名です。

表計算ソフトウェアではできないデータの検索であったり、入力フォーマットなども指定したデータ登録などがしたくなったならばデータベースアプリケーションの出番となります。データはレポートとして帳票やレポートにできますので、毎回データを整形したりする手間がなくなります。

表計算ソフトウェアに登録しているデータをデータベースに登録し直すのはさほど難しいものではありません。まず表計算ソフトウェアに蓄積しておき、分析やレポートが出したいと思ったらデータベースアプリケーションにしてみるのがお勧めです。

データをCSVファイルにする

メールであったり、テキストファイルに書き留められた内容を表計算形式に変換したいと考える時は多々あります。一つ一つコピー&ペースとしても良いですが、とても手間のかかる作業です。モチベーションが上がるものでもないでしょう。

一定のフォーマットに沿って記述されているのであれば正規表現の出番です。正規表現によって記述できれば、後はマッチした文字をカンマ区切りなどで繋いであげるだけでCSVファイルができあがります。

正規表現はこの他、HTMLファイルから特定の情報(URLやメールアドレスなど)を抜き出したり、テキストファイルから必要な情報(会社名など)を抽出するのにも使えます。シチズンデベロッパーにとって必須の習得スキルと言えるでしょう。

Webページの入力を自動化する

業務システムでWebページ上に情報を入力する機会は多いでしょう。しかし毎日同じ内容を入力するというのはとても面倒です。例えば日報などで日付を今日にしなければならなかったり、部署や名前を都度入力するのは苦痛にすらなります。

そこで使えるのがブックマークレットです。Web画面上の指定された部分に対して指定した文字を入力するようにプログラムを書けば、後はブックマークレットを実行するだけで文字が入力できるようになります。今日の日付といったような実行されたタイミングによって入力する情報を変化させることもできます。

ブックマークレットJavaScriptというプログラミング言語によって作成できます。プログラミング言語なので多少覚えるのは大変ですが、様々な場面で役立つテクニックになります。例えば画面上のすべてのチェックボックスをつけるといった作業もブックマークレットなら簡単にできます。


いかがでしょうか。他にも多くの改善例が考えられるでしょう。シチズンデベロッパーであれば、自分が普段面倒だと感じていることもツールやプログラミングによって一気に改善できる可能性があります。

Xojoはシチズンデベロッパーも対象としています。分かりやすいプログラミング言語体系、GUIで簡単に画面が作れる、WebもデスクトップもiOSアプリまで幅広くこなせるといった特徴があります。言語体系が分かりやすい、すぐに使いこなせるというのはシチズンデベロッパーにとって大事な要素になります。ぜひ皆さんの業務改善にXojoを使ってみてください。

Xojoを使ったRaspberry Piのリモートデバッグについて

Raspberry Pi向けのソフトウェアを開発する場合、多くはPythonかNode.jsを使うかと思います。そして、Raspberry PiSSHで接続してコードを編集するでしょう。その際、viやEmacsを使ってコーディングを行うと思います。つまり、普段のソフトウェア開発とは全く異なるスタイルでの開発を強いられているはずです。さらにデバッグ機能がうまく使えないことも多く、標準出力を使ったデバッグで一つ一つ確認していくことになるでしょう。これは生産性が高いやり方とは言えません。

今回はXojoの新機能であるRaspberry Piのリモートデバッグ機能を紹介します。これを使えば普段使っているXojo IDEからRaspberry Piアプリの開発やブレークポイントを使ったデバッグができるようになります。

X Window必須

f:id:moongift:20170406080312p:plain

一点注意点として、Raspberry Pi側でX WindowGTK)が必須になります。これはコンソールアプリしか開発しない場合でも必要です。そのため、Rasbian Liteでは動かないので、別途apt-getを使うか、フルのRaspberry Piを使ってください。後はデフォルトでSSHDが立ち上がっていないので、raspi-configを使って立ち上げた方が良いでしょう。

f:id:moongift:20170406080409p:plain

リモートデバッガーを転送する

次にリモートデバッガーのLinux ARM.zipをSCPなどを使って転送します。このリモートデバッガーはXojoのExtraフォルダに入っています。macOSであれば次のようなコマンドになります。複数のデバッガーがありますが、ARMなので注意してください。

scp /Applications/Xojo\ 2017\ Release\ 1/Extras/Remote\ Debugger\ Desktop/Linux\ ARM.zip pi@your_raspi_address:/home/pi/Desktop

リモートデバッガーを起動する

f:id:moongift:20170406080607p:plain

リモートデバッガーを転送したら、Zipを解凍して起動します。下の画像のようなウィンドウが表示されればOKです。コンソールアプリの場合は、ここでRaspberry Piのディスプレイは不要になります。

f:id:moongift:20170406080640p:plain

Xojoで開発する

後は自分のメインマシンに戻ってXojo IDEで開発を行っていきます。ビルド環境としてARM 32bitとしておくのを忘れないでください。

リモートデバッガーを登録する

デバッグしたいと思ったら、まずリモートデバッガーのアドレスを設定します。これはXojo IDEの設定画面で行えます。

f:id:moongift:20170406080702p:plain

IPアドレスを設定して、分かりやすい名称をつければ完了です。

f:id:moongift:20170406080713p:plain

リモートデバッグを実行する

ではいよいよリモートデバッグを開始します。プロジェクトメニューのリモート端末で実行を選択し、先ほど作ったリモートデバッガーを選択します。

f:id:moongift:20170406080721p:plain

実行するとコンパイルされて、Raspberry Piに転送されます。

f:id:moongift:20170406080759p:plain

デスクトップアプリの場合は、そのまま起動します。コンソールアプリの場合、リモートデバッガーのあるディレクトリにDebugと頭についてビルドされた実行ファイルができますので、これをコンソールから実行します。

$ ./DebugRaspberryPiDemo

そうするとブレークポイントがあるところで実行処理が停止します。

f:id:moongift:20170406080825p:plain

注意点

コンソールアプリの場合、ビルドされたアプリをデバッグできるのは一度だけになります。もう一度デバッグする場合はリモートデバッグを再実行してください。

転送に若干時間がかかることがあります。何度も頻繁に行うのには向かないかも知れません。


Raspberry Piアプリの開発はコンソールベースで行うことが多く、普段の使い慣れた環境が使えず面倒に感じることが多々あります。そんな中、Xojoであれば日常的に使っているXojo IDEを使って、デバッガーを組み合わせて効率的にアプリ開発できるようになります。ぜひRaspberry PiのXojoを使ってIoT開発をはじめてみてください。