Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

「寝ながら作るXojo」ハンズオンテキスト

2016/07/04 (月) 11:00 ~ 14:00 株式会社XSHELLで行った、
「寝ながら作るXojo #1 ~最初の一歩・ランチオンハンズオン~」
https://atnd.org/events/79095
のハンズオンテキストです。

プログラムパートは、旧くなっていたりバグがあったりするのでリライトしたこちらを参照してください。
Xojo でプログラムやってみる
https://qiita.com/nanbuwks/items/a5b9c8645b4f3e263f7b

  • Be the first to comment

  • Be the first to like this

「寝ながら作るXojo」ハンズオンテキスト

  1. 1. 交差する世界Programming Of Everyware: 〜プログラミング言語Xojo〜 2016.07.04 寝ながら学ぶXojo @nanbuwks 河野 悦昌
  2. 2. Windows3.1の 輝かしい未来 1993年 File:Win 3.1 Startup.jpg CC BY SA 4.0 International
  3. 3. マルチメディア!! フロッピー→CD-ROM 640kBytes→16MBytes 16色→256色
  4. 4. 素晴らしいWindows PC-9801とDos/Vの差が取り払われる PC-9801には膨大なMS-DOS資産が あり、それをWindows3.1でマルチタス クにできる。 Dos/VはVL-Busを使うと圧倒的な速 度、80486/66MHzマシンが20万円で!
  5. 5. キラーアプリ VBとExcelとAccess 一太郎と花子とATOK
  6. 6. VisualBasicでかんたんに Visual Basic 2.0(1992) Visual Basic 4.0(1995) Visual Basic 5.0(1997) Visual Basic 6.0(1998) 「笑って、お仕事」 えっVB.NetとVBは違うの?
  7. 7. Accessで かんたんに Visual Basic for Applications (1994,Excel5.0~) Access 95 (VBA搭載) Visual Basic for Applications 7.0 (Office2010~)
  8. 8. プログラミング! シェアウェアで儲けよう! PACK for WIN
  9. 9. 大波 インターネットが全てを押し流した
  10. 10. それから   無限 の       時が 流れて シンクライアント Javaチップ ライトワンランエニウェア Nimda CodeRed WinG Netscape OLE ActiveX J++ Silverlight NetworkComputer Java applet Flashpaper
  11. 11. 文明が繁栄している間に 世界の片隅で ひっそりとVB/Accessの花は 咲き続ける・・・     ( Y )⌒ ⌒    ( * * )⌒ ☆ ⌒    ~(__人__)~       | ,、  _    |/ノ  \`ヽ、|    \, V      `L,,_         ( Y )⌒ ⌒      |ヽ、)       ( * * )⌒ ☆ ⌒       |        ~(__人__)~     ./        r''ヽ、 | .,、     /          `ー-ヽ|/ノ     .|             `|    |              |     |                 |    ヽ,      ノ´⌒ヽ,,  |       ヽ, ,γ ´⌒      ヽ,ノ       ∨ / ""⌒⌒\  )        i /   \  / ヽ )        !゛  (  )` ´( ) i/        |    (__人__)  |       \     \__| / ┼    ヽ  -|r‐、.  レ |    d⌒) ./| _ノ  __ノ File:Social networks.jpg CC-BY-SA 4.0
  12. 12. VB/Access直したいんだけど – うーん、仮想マシンに旧OSとVB入れて開発環境を整えよう! ● Windows10/64bitで動かしたいんだけど – うーん、処理系はOffice VBAに移行しよう! ● Accessをネットワークで使いたいんだけど – うーん、DBをMicrosoft SQL Serverに移行しよう! ● ODBC接続ができなくなるんだけど – うーん・・・
  13. 13. 問題点 Access+Microsoft SQL Serverの わけのわからない挙動 ● プリンタがオフラインだとビューがおかしい ● 主キーをつけると勝手にソートされる ● ・ ● ・ ● ・ さあどうする?
  14. 14. いまどきWebアプリ化しようよ ● ネックは開発環境 ● 誰でも開発できて – VBぐらいの難易度で ● わけのわからないことなしで – スタンダードなSQL使えて ● 何かない?
  15. 15. Xojoとは ● CrossBasic→REALbasic→REAL Studio → Xojo ● Win/Mac/Linux/iOS/RasPi/Webアプリを作成 ● VisualBasicとほぼ同じ感覚 – VisualBasicからの移行アシスタントツールあり ● 日本語化が充実 ● WebアプリについてはXojo以外無い – 操作簡単なRADとして – まともなアプリ作れるものとして – 俺様調べ
  16. 16. 欠点 ● 高い ● Pro版¥135000 – 英語版なら安い ● デスクトップ専用なら安いが – いまどきWeb版の開発ができなければ意味がない
  17. 17. XojoでWebアプリをつくろう ● いまどきローカルアプリ開発しても意味が無い ● Webアプリ作成→ローカル/クラウドいずれでも 動く – Raspberry Piも? ● Android対応するならどうせWebアプリなのだから ● 今のソフトはどうせネットワーク接続必要なのだか ら ● どうせ配信めんどくさいのだから
  18. 18. XojoでWebアプリ開発するには ● ● CGIとして動作 – その場合Apacheで動作 ● Xojoクラウドも使える ● スタンドアローンWebサーバとして動作で きる – その場合localhostにアクセス
  19. 19. 触ってみる
  20. 20. Ubuntu 16.04 LTS 64bitで動かしてみる ● 「システム要件」ページを参考に – http://developer.xojo.com/ja/system-requiremen ts ● 64bit対応は↙↘ $ cd xojo2016r1.1/ $ ls Documentation Plugins Scripts Xojo Resources appicon_48.png Example Projects Project Templates Xojo appicon_128.png xojo.xpm Extras Read Mes Xojo Libs appicon_32.png webkitの設定 sudo apt-get install libwebkitgtk-1.0.0 としても $ ./Xojo Exception Message: HTMLViewer requires libwebkit/libwebkitgtk or libgtkhtml と出たので、 r1.1$ sudo apt-get install libwebkitgtk-1.0.0:i386 とした。 $ ./Xojo Failed to find/load Framework library libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory となるので $ sudo apt-get install libgtk2.0-0:i386 で対応
  21. 21. 起動
  22. 22. サンプルアプリケーション ● サンプルアプリケーション→Sample Applications – デスクトップアプリ ● Simplebrowser.xojo_binary_project – Webアプリ ● MapLocation.xojo_binary_project – 同じ内容をデスクトップとWebアプリで ● XojoNotes – XojoNotesDesktop.xojo_binary_project – XojoNotesWeb.xojo_binary_project
  23. 23. サンプル作ってみる ● 開発ガイド – https://xojo.grapecity.com/support/developguide – デスクトップアプリ ● http://docs.grapecity.com/help/xojo/TutorialDesktop.pdf – Webアプリ ● http://docs.grapecity.com/help/xojo/QuickStartWeb.pdf
  24. 24. Helloつくってみる ● 「プロジェクトの選択」→「デスクトッ プアプリケーション」 ● ボタン配置→ダブルクリック →Action→OK ● コードウィンドウ内に ● MsgBox("Hello")と書く
  25. 25. Helloつくってみる ● 結果
  26. 26. Webブラウザつくってみる ● 「プロジェクトの選択」→「デスクトップアプ リケーション」 ● ボタン、TextField,HTMLVIewer配置→ボタ ンをダブルクリック→Action→OK ● コードウィンドウ内に ● HTMLViewer.LoadURL(TextField1.Text) ● と書く
  27. 27. Webブラウザつくってみる ● 結果
  28. 28. 画像取得つくってみる Try Self.Send("GET","http://thecatapi.com/api/images/get") Catch t As UnsupportedOperationException Return End Try 2.「挿入」-「クラス」で GatCloudをつくり、 親をxojo.Net.HTTPSocketとする。 「挿入」-「メソッド」でGetCatを つくり、コードを書く 3.クラスCatCloudを ビューにドラッグ&ドロップ 4.CatCloud1ができるので 画面下のマークをクリック →PageRecievedでOK コードを追加 Dim picBlock As New MemoryBlock(Content.Size) Dim lastByteIndex As integer = Content.Size - 1 For i As Integer = 0 To lastByteIndex picBlock.Byte(i) = Content.Data.Byte(i) Next Dim catPic As Picture catPic = Picture.FromData(picBlock) ImageWell1.Image = catPic 1.ボタンとImageWallを配置 5.ボタンをダブルクリックして Action→コードを追加 CatCloud1.GetCat ● https://xojo.grapecity.com/topics/article-20151014
  29. 29. 画像取得つくってみる ● https://xojo.grapecity.com/topics/article-20151014 猫画像配信サービスから 取ってきた猫画像
  30. 30. 画像の加工つくってみる CatCloud1のPageRecievedを 書き換える Dim picBlock As New MemoryBlock(Content.Size) Dim lastByteIndex As integer = Content.Size - 1 Dim file As FolderItem For i As Integer = 0 To lastByteIndex picBlock.Byte(i) = Content.Data.Byte(i) Next Dim catPic As Picture Dim thumbnail As New Picture(100, 100, 32) catPic = Picture.FromData(picBlock) thumbnail.Graphics.DrawPicture(catPic, 0, 0, 100,100, 0, 0,catPic.Width, catPic.Height) ImageWell1.Image = thumbnail file = SpecialFolder.Pictures.Child("ThumbCat.jpg") ImageWell1.Image.Save(file, Picture.SaveAsJPEG) サムネイル作る 保存 表示
  31. 31. 画像の表示つくってみる ● Picturesにある画像の一覧を出す ● 犯罪になる場合は別フォルダを指定!! 6 x ImageWall 6 x Label 1 x PushButton を配置
  32. 32. Dim itemIdx, dirCount as Integer Dim dir as FolderItem dim item as FolderItem Dim Pic As Picture Dim thumbnail As New Picture(100, 100, 32) dir = SpecialFolder.Pictures dirCount = dir.Count For itemIdx = 1 to 6 item = dir.Item(itemIdx) If item <> nil Then dim thisExt as string = item.Name.Right(4) if thisExt = ".jpg" Then Pic = Picture.Open(item) thumbnail = new Picture(100,100,32) thumbnail.Graphics.DrawPicture(catPic, 0, 0, 100,100, 0, 0,catPic.Width, Pic.Height) ImageWell1(itemIdx-1).Image = thumbnail end If Label1(itemIdx-1).text=item.Name end if Next ボタンのActionに つけるコード ImageWallと Labelをそれぞれ配列にする 同じ名前にすると 自動的に配列になる
  33. 33. Webアプリつくってみる ● 「プロジェクトの選択」→「Webアプリ」 ● ボタン配置→ダブルクリック→Action→OK ● コードウィンドウ内に ● MsgBox("Hello")と書く
  34. 34. 注意 ● デスクトップアプリとWebアプリ ● 最初のプロジェクトタイプが違う ● コントロールの違い – タブパネル (デスクトップのみ) – リストボックス (デスクトップのみ) – マップビューワ (Webのみ) – など ● 複数ウィンドウができない ● 他 ● http://docs.grapecity.com/help/xojo/UserGuide-Development.pdf ● 参照「Xojo ユーザーガイド Book 4: 開発」 Chapter3 ウェブ の開発
  35. 35. DBアクセスしてみる
  36. 36. DBを使う意味 ● 永続的データを扱う ● 今回はRaspberry PiでMySQLが動 作しています。
  37. 37. shell呼び出ししてみる ● Dim Command As New Shell ● Command.Execute( "ls" ) ● MsgBox( Command.Result ) ● CUIに皮を被せられるので便利!
  38. 38. おしまい

×