Xojo日本語ブログ

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

CDC #3が開催されました

CDC(シチズンデベロッパー・コミュニティ)はシチズンデベロッパー(非開発者ながらちょっとしたプログラミングやツールを使って業務改善を行っている方)のためのコミュニティになります。多くの企業ではシチズンデベロッパーは一人ないし二人しかおらず、情報が共有できていません。そこでCDCではシチズンデベロッパーの方々を集め、そのナレッジを発表、共有するのを目的としています。

三回目となる今回はSQL系の話題がたくさん出る回となりました。

Xojoについて

筆者がエヴァンジェリストをつとめる Xojo について、その利用者であるKKBOXの植田さんから紹介がありました。中の方が語るのとはまた違う、実践的な内容となっています。

f:id:moongift:20170525195938j:plain

KKBOXさんの中でのXojoの使われ方についてはこちらの導入事例 KKBOX Japan様 | Xojo|グレープシティ株式会社を参照してもらうのが良いかと思います。データベースを扱うシステムをほんの数日で作成し、その後もメンテナンスを重ねることで実用性を高めています。

Xojo ではデータベースに接続するのが簡単であったり、画面の作成もD&Dで行えるなど、その魅力を語ってもらいました。Xojoはプログラミング言語でもあるので、シチズンデベロッパーとしては若干高度なツールではありますが、それでも大量のコードを書くことなく業務で役立つツールを作れるのは大きな利点です。

Redashについて

Redashはデータベースを検索するSQLを保存して何度でも実行したり、SQLを共有できるソフトウェアになります。Loco Partnersさんでは殆どの方がSQLを書けるそうで、ベースになるSQLをコピーして自分で好きなように修正して使い回しているそうです。

f:id:moongift:20170525200818j:plain

データベースはレプリケーションしていて、すぐに本番データと変わらない内容で調査できるようになっています。なお、パスワードや個人情報に関連するカラムは触れないようアカウントを設定されているそうです。

マーケターや営業の方が必要な情報を自分たちですぐに取り出して検索できることで、業務スピードが速まったり開発側の負担が減る効果があります。なお、SQLの書き方について開発者にすぐ聞かないような体制であったり、Slackチャンネルを使ったSQLのサポートを提供しているそうです。

シートカルクの紹介

LTとしてシートカルクの紹介がありました。シートカルクは表計算型の電卓アプリケーションです。数字を入れて、加減乗除の記号を指定すれば計算を行います。小学生でも仕えるよう、様々な工夫が凝らされています。

f:id:moongift:20170525204540j:plain

基本的には電卓なのですが、表計算ソフトウェアでよく見られるようにセルの値を変えると自動的に答えも更新されるようになっていたり、縦横自由に計算式が書けるようになっています。さらに為替の換算もできるようになっているのも特徴です。


シチズンデベロッパーというのはあまり表に出て登壇されたりすることがないので、まだまだ認知度が低いのが実状です。特定の職種がある訳ではなく、事務職であったりマーケター、営業の方々などの追加要素としてある形なのも分かりづらさを増しているでしょう。

しかし今後プログラミングは誰でも当たり前のように行うものになっていきます。そうした時にシチズンデベロッパーとしてのナレッジは大いに役立つはずです。CDCは今後も定期的に開催していきますので、興味がありましたらぜひご参加ください!

Xojoで作るMarkdownエディタ

ここ最近の開発者向けドキュメント記法として一般的になってきているMarkdown。世の中には多くのMarkdownエディタが存在します。今回はそんなMarkdownエディタを簡単にXojoで作成する方法を紹介します。

f:id:moongift:20170522055659p:plain

画面について

画面のコントロールはテキストエリアとHTMLViewerになります。テキストエリアで編集し、MarkdownからHTMLに変換した結果をHTMLViewerに反映します。

f:id:moongift:20170522055637p:plain

Markdownの変換について

XojoでMarkdownテキストを解析する方法も考えられますが、すでに世の中にはそういったライブラリは多数ありますので、車輪の再発明は控えます。今回はJavaScriptで変換してくれるShowdownを使います。

HTMLファイルを作成し、その内容を次のようにします。CDN版のShowdownを読み込み、その変換エンジンであるコンバータを準備しておきます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
    <link rel="stylesheet" href="">
  </head>
  <body>
    <div id="preview"></div>
    <script>
      var converter = new showdown.Converter();
    </script>
  </body>
</html>

このファイルをXojoのリソースファイルとして登録しておきます(今回はindexとして登録されました)。

イベントハンドラについて

まずメインウィンドウが開いた時のイベントで、HTMLViewerの中に上記HTMLファイルを読み込みます。

Dim f As FolderItem = GetTemporaryFolderItem

markdownPreview.LoadPage(index, f)

次にテキストエリアの入力内容が変化したらShowdownで変換します。この時ポイントになるのがExecuteJavaScriptです。変換した内容(html)を #preview の中に流し込めば完了です。

Dim markdown as String = Me.Text
Dim javascript as String
javascript = "var html = converter.makeHtml(`"+markdown+"`); "
javascript = javascript + "document.getElementById('preview').innerHTML = html;"
markdownPreview.ExecuteJavaScript(javascript)

たったこれだけのコードでちゃんと動くMarkdownエディタができます。

f:id:moongift:20170522055708g:plain


無理してXojoですべて行うのではなく、既存のライブラリ(Xojoに限らず)を使うことで簡単に目的が達成できるようになります。最近ではWebベースのソフトウェアも増えていますので、こういった応用は様々なところで使えそうです。

Xojoで作るSlackクライアント

Webアプリケーションをデスクトップアプリケーションのように扱える技術としてElectronが有名ですが、先日日本語入力に不具合が発生しました。

Backspace can not erase the last one character during Japanese IME conversion (macOS) · Issue #9173 · electron/electron

Backspaceキーを押しても文字が消せないという不具合で、ストレスを感じている人も多いのではないかと思います。これがSlackの公式アプリで発生したのが大きな問題になっていました。

そこで代替手段としてXojoでSlackクライアントを作ってみました。

f:id:moongift:20170602130027p:plain

複数チームに対応させる

Slackといえばチーム切り替えが肝になります。そこでリストボックスを使ってチームを切り替えられるようにします。

まずメインウィンドウ(mainWindow)に+ボタンを付けます。押した時のイベントはチーム追加用のウィンドウを開くことです。モーダルとして開きます。

f:id:moongift:20170602130112p:plain

teamWindow.ShowModal

teamWindowは次のような画面です。

f:id:moongift:20170602130132p:plain

チーム名を入力してOKボタンを押した時には、mainWindowのaddTeamメソッドを呼びます。

if Self.txtTeamName.Text = "" then
  MsgBox("チーム名を入力してください")
  return
end if
mainWindow.addTeam(Self.txtTeamName.Text)
Self.Close

addTeamメソッドでは幾つかの処理を行っています。

  1. リストに追加する
  2. すでに表示しているチームを非表示にする
  3. 新しいチームを表示する
  4. 設定ファイルに書き出す

処理としては次のようになります。

// 1. リストに追加する
Self.lstTeam.AddRow(teamName)

// 2. すでに表示しているチームを非表示にする
Self.allTeamDisable()

// 3. 新しいチームを表示する
Self.showTeam(teamName)

// 4. 設定ファイルに書き出す
Self.writeConfig(teamName)

メンバー変数を追加する

今回はすべてのチーム情報をmainWindowに紐付けて管理します。そのため、 HTMLViewerをメンバーとして管理します(chatViewerとします)。

f:id:moongift:20170602130219p:plain

この配列の中に各チーム毎のHTMLViewerを入れていきます。

すでに表示しているチームを非表示にする

この処理ではすでに表示しているチーム情報の HTMLViewer を非表示(VisibleプロパティをFalse)にしていきます。

Dim chatView as HTMLViewer
if aryChat = nil then
  return
end if
For i as integer = 0 to aryChat.Ubound
  chatView = aryChat(i)
  chatView.Visible = False
Next

新しいチームを表示する

新しいチームを表示するのはHTMLViewerの役割になります。動的にchatViewerを追加していきます。注意点としてはユーザエージェントを変更しているということでしょうか。

Dim chatView as HTMLViewer = new HTMLViewer
Dim url as string = "https://" + teamName + ".slack.com"

chatView = new chatViewer

chatView.Top = 0
chatView.Left = 105
chatView.Height = Me.Height
chatView.Width = Me.Width  - chatView.Left
chatView.Enabled = True
chatView.Visible = True
chatView.UserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.1.1 Safari/603.2.4"
chatView.LoadURL(url)
chatView.HelpTag = teamName

aryChat.append(chatView)

設定ファイルに書き出す

登録した内容は設定ファイルに書き出すことで、起動時に再現できるようにします。

Dim OutPut as TextOutputStream
Dim OutFile as FolderItem
Dim content as String
Dim comma as string

For i as integer = 0 to aryChat.Ubound
  content = content + comma + aryChat(i).HelpTag
  comma = ","
Next

OutFile = SpecialFolder.UserHome.child(Self.configName)
Try
  OutPut = TextOutputStream.Create(OutFile)
  OutPut.Write(ConvertEncoding(content, Encodings.UTF8))
  OutPut.Close
Catch e As IOException
  
End Try

起動時に復元する

逆に起動時は設定ファイルの内容を読み込んで復元します。

Dim InPut as TextInputStream
Dim InFile as FolderItem
Dim content as String
Dim teams() as string

InFile = SpecialFolder.UserHome.child(Self.configName)
Try
  InPut = TextInputStream.Open(InFile)
  content = InPut.ReadAll
  InPut.Close
  teams = content.Split(",")
  For i as integer = 0 to teams.Ubound
    Self.lstTeam.AddRow(teams(i))
    Self.showTeam(teams(i))
    Self.allTeamDisable()
  Next
  Dim chatView as HTMLViewer = Self.aryChat(0)
  chatView.Visible = True
Catch e As IOException
  
End Try

ここまでの実装で複数チームを追加できるようになります。後はリストをクリックした時にチームを切り替えるだけです。

Self.allTeamDisable()
Dim chatView as HTMLViewer = Self.aryChat(row)
chatView.Visible = True

f:id:moongift:20170602130242p:plain


なお、macOS版での制限としてファイルダイアログを使ったファイル添付ができません。ただし、ドラッグ&ドロップによるファイルアップロードはできますので大きな問題はないでしょう。

最新版のElectronでは不具合も解消されたようですが、手元の環境でエラーが続いてしまっている方はお試しください。なお、コードはmoongift/xojo_slackにアップロードしてあります。実装時の参考にしてください。

URLをパースするクラスを作りました

XojoでURLをパースするクラスがなかったので作成しました。

URLクラスの使い方

例えば次のようにURLを渡します。

url = new URL("http://rob:abcd1234@www.example.co.uk/path/index.html?query1=test&silly=willy&field[0]=zero&field[2]=two#test=hash&chucky=cheese")

そうするとデータが次のように取れます。

url.shema    // http
url.domain   // www.example.co.uk
url.userName // rob
url.password // abcd1234
url.path     // /path/index.html
url.params   // {query1=test, silly=willy, field[0]=zero, field[2]=two}
url.hashes   // {test=hash, chucky=cheese}

paramsとhashesはDictionaryなので、値を次のように取得できます。

url.params.Value("query1") // test

コードはGitHubリポジトリにアップロードしてあります。まだ異常系のテストが不十分かも知れませんので、不具合があればIssuesに登録をお願いします。

HTMLViewerに限らずURLを解析する機会は多いかと思います。ぜひご活用ください。

MS AccessとXojoの違いについて

Xojoを採用しようか悩んでいる企業の方から聞く質問の一つに「MS Accessと何が違うんですか」があります。確かにどちらもVBA(Xojoは風ですが)でアプリケーションを作れるという点は同じです。しかし幾つかの相違点があります。

f:id:moongift:20170511152644p:plain

MS Accessはデータベース、Xojoはプログラミング言語

MS Accessはデータベースアプリケーションを開発するための環境になります。そのためデータベースを使わないものでMS Accessを採用するという選択はほぼないでしょう。その代わりデータベースアプリケーションを開発する際には使いやすい機能が幾つも揃っています。

対するXojoは汎用的なプログラミング言語になります。特にデータベースに依らず、ファイルを操作するソフトウェアであったり、ネットワークを利用するソフトウェアも開発できます。データベースアプリケーション開発に用いることができますし、それ以外のソフトウェア開発でも利用できます。

XojoはWindows以外の環境でも利用できる

MS AccessWindows用のソフトウェアになります。MS OfficemacOS向けにも出ていますが、MS Accessはありません。社内にWindows以外のコンピュータを使っている方がいる場合、その人たちにはアプリケーションが提供できません。

XojoはWindows以外、macOSLinuxでも開発を行ったり、アプリケーションを提供できます。クロスプラットフォームに対応しており、WindowsmacOS向けに作ったり、macOSWindows向けにアプリケーションを作ることができます。コードは共通であり、それぞれのプラットフォーム向けにコードを書き換える必要はありません。

Xojoならデスクトップ以外にも

MS Accessで作れるのはWindows向けのデータベースアプリケーションのみです。Xojoはデスクトップアプリケーションの他、iOSやWeb、IoT向けのアプリケーションも開発できます。より適用範囲が広くなります。

テクニカルサポートの存在

MicrosoftはMS Accessの利用について、テクニカルサポートを提供していません。多くはフォーラムなどで質問するでしょう。フォーラムも公式ではなく、有志によるものです。そうしたフォーラムで解決できれば良いですが、できない場合は解決に多くの時間を費やすことになります。

Xojoではテクニカルサポートを提供しており、開発時に困ったらすぐに聞けるようになっています。サポートがあることで安心してXojo開発に専念できるようになります。


いずれのプログラミング環境、言語においても得手不得手があります。ごく単純なデータベースアプリケーションであればMS Accessで十分というケースは多いかと思います。しかしデータベースアプリケーション以外も開発するのであればXojoのが利点があるでしょう。

また、MS Accessは大抵のオフィス内のコンピュータにインストールされているとあって、はじめやすいプログラミング言語であると言えます。最初はVBAで慣れて、より本格的に作り込んでいく際には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の方が主流になっていくでしょう。ぜひご利用ください。