Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Site updated at 2012-12-02 22:20:21 UTC

  • Loading branch information...
commit 45520dc1d4032642d35873573d671c7fe0d4476d 1 parent bb23abb
@Watson1978 authored
Showing with 19,116 additions and 1 deletion.
  1. BIN  assets/jwplayer/glow/controlbar/background.png
  2. BIN  assets/jwplayer/glow/controlbar/blankButton.png
  3. BIN  assets/jwplayer/glow/controlbar/divider.png
  4. BIN  assets/jwplayer/glow/controlbar/fullscreenButton.png
  5. BIN  assets/jwplayer/glow/controlbar/fullscreenButtonOver.png
  6. BIN  assets/jwplayer/glow/controlbar/muteButton.png
  7. BIN  assets/jwplayer/glow/controlbar/muteButtonOver.png
  8. BIN  assets/jwplayer/glow/controlbar/normalscreenButton.png
  9. BIN  assets/jwplayer/glow/controlbar/normalscreenButtonOver.png
  10. BIN  assets/jwplayer/glow/controlbar/pauseButton.png
  11. BIN  assets/jwplayer/glow/controlbar/pauseButtonOver.png
  12. BIN  assets/jwplayer/glow/controlbar/playButton.png
  13. BIN  assets/jwplayer/glow/controlbar/playButtonOver.png
  14. BIN  assets/jwplayer/glow/controlbar/timeSliderBuffer.png
  15. BIN  assets/jwplayer/glow/controlbar/timeSliderCapLeft.png
  16. BIN  assets/jwplayer/glow/controlbar/timeSliderCapRight.png
  17. BIN  assets/jwplayer/glow/controlbar/timeSliderProgress.png
  18. BIN  assets/jwplayer/glow/controlbar/timeSliderRail.png
  19. BIN  assets/jwplayer/glow/controlbar/unmuteButton.png
  20. BIN  assets/jwplayer/glow/controlbar/unmuteButtonOver.png
  21. BIN  assets/jwplayer/glow/display/background.png
  22. BIN  assets/jwplayer/glow/display/bufferIcon.png
  23. BIN  assets/jwplayer/glow/display/muteIcon.png
  24. BIN  assets/jwplayer/glow/display/playIcon.png
  25. BIN  assets/jwplayer/glow/dock/button.png
  26. +115 −0 assets/jwplayer/glow/glow.xml
  27. BIN  assets/jwplayer/glow/playlist/item.png
  28. BIN  assets/jwplayer/glow/playlist/itemOver.png
  29. BIN  assets/jwplayer/glow/playlist/sliderCapBottom.png
  30. BIN  assets/jwplayer/glow/playlist/sliderCapTop.png
  31. BIN  assets/jwplayer/glow/playlist/sliderRail.png
  32. BIN  assets/jwplayer/glow/playlist/sliderThumb.png
  33. BIN  assets/jwplayer/glow/sharing/embedIcon.png
  34. BIN  assets/jwplayer/glow/sharing/embedScreen.png
  35. BIN  assets/jwplayer/glow/sharing/shareIcon.png
  36. BIN  assets/jwplayer/glow/sharing/shareScreen.png
  37. BIN  assets/jwplayer/player.swf
  38. +2,946 −0 atom.xml
  39. +795 −0 blog/2012/05/03/creating-an-ios-application-using-rubymotion_en/index.html
  40. +820 −0 blog/2012/05/03/creating-an-ios-application-using-rubymotion_ja/index.html
  41. +403 −0 blog/2012/05/03/first-step-in-rubymotion_ja/index.html
  42. +380 −0 blog/2012/05/08/specs-for-stopwatch-app/index.html
  43. +357 −0 blog/2012/05/08/using-interactive-shell/index.html
  44. +432 −0 blog/2012/05/09/mixing-the-ruby-and-objc/index.html
  45. +396 −0 blog/2012/05/10/benchmark-result/index.html
  46. +326 −0 blog/2012/05/12/translating-rubymotion-guide/index.html
  47. +381 −0 blog/2012/06/07/create-static-library/index.html
  48. +321 −0 blog/2012/07/22/meet-up-rubymotionjp/index.html
  49. +312 −0 blog/2012/08/01/translating-rubymotion-articles/index.html
  50. +474 −0 blog/2012/08/22/make-a-gradient/index.html
  51. +402 −0 blog/2012/08/23/make-a-sublime-text-environment/index.html
  52. +374 −0 blog/2012/08/29/make-an-application-which-target-the-ios-4/index.html
  53. +449 −0 blog/2012/08/30/use-google-analytics/index.html
  54. +414 −0 blog/2012/09/10/bonjour-rubymotion/index.html
  55. +451 −0 blog/2012/09/19/using-parse/index.html
  56. +489 −0 blog/2012/09/20/push-notifiation-with-rubymotion/index.html
  57. +353 −0 blog/2012/10/19/rubymotion-can-not-launch-simulator-in-tmux/index.html
  58. +613 −0 blog/2012/12/03/dtrace/index.html
  59. +498 −0 blog/archives/index.html
  60. +326 −0 blog/categories/dtrace/atom.xml
  61. +234 −0 blog/categories/dtrace/index.html
  62. +84 −0 blog/categories/library/atom.xml
  63. +234 −0 blog/categories/library/index.html
  64. +97 −0 blog/categories/macruby/atom.xml
  65. +234 −0 blog/categories/macruby/index.html
  66. +475 −0 blog/categories/rubymotion-/atom.xml
  67. +262 −0 blog/categories/rubymotion-/index.html
  68. +536 −0 blog/categories/rubymotion/atom.xml
  69. +444 −0 blog/categories/rubymotion/index.html
  70. +669 −0 blog/page/2/index.html
  71. BIN  favicon.png
  72. BIN  images/bird_32_gray.png
  73. BIN  images/bird_32_gray_fail.png
  74. BIN  images/blog/analytics_add_account.png
  75. BIN  images/blog/analytics_create_account.png
  76. BIN  images/blog/analytics_result.png
  77. BIN  images/blog/analytics_sdk.png
  78. BIN  images/blog/bonjour.png
  79. BIN  images/blog/cocoa_touch_static_library.png
  80. BIN  images/blog/gradient.png
  81. BIN  images/blog/hello.png
  82. BIN  images/blog/install_ios43_simulator.png
  83. BIN  images/blog/parse.png
  84. BIN  images/blog/parse_app_id_client_key.png
  85. BIN  images/blog/parse_choose_platform.png
  86. BIN  images/blog/parse_download_sdk.png
  87. BIN  images/blog/parse_get_started.png
  88. BIN  images/blog/parse_push/app_id.png
  89. BIN  images/blog/parse_push/app_id_configure.png
  90. BIN  images/blog/parse_push/certificate_signing_request.png
  91. BIN  images/blog/parse_push/download_install_certificate.png
  92. BIN  images/blog/parse_push/download_provisioning.png
  93. BIN  images/blog/parse_push/enable_push_notification.png
  94. BIN  images/blog/parse_push/export_p12.png
  95. BIN  images/blog/parse_push/export_p12_password.png
  96. BIN  images/blog/parse_push/generate_certificate_signing_request.png
  97. BIN  images/blog/parse_push/keychain_export.png
  98. BIN  images/blog/parse_push/parse_dashboard.png
  99. BIN  images/blog/parse_push/provisioning.png
  100. BIN  images/blog/parse_push/receive_push.png
  101. BIN  images/blog/parse_push/submit_certificate_signing_request.png
  102. BIN  images/blog/parse_push/xcode_organizer.png
  103. BIN  images/blog/parse_sign_up.png
  104. BIN  images/blog/parse_test.png
  105. BIN  images/blog/select_uiview.png
  106. BIN  images/blog/stopwatch.png
  107. BIN  images/blog/sublime-RubyMotionBuilder.png
  108. BIN  images/blog/sublime-SublimeLinter.png
  109. BIN  images/blog/sublime-browse-package.png
  110. BIN  images/blog/sublime-install-package.png
  111. BIN  images/code_bg.png
  112. BIN  images/dotted-border.png
  113. BIN  images/email.png
  114. BIN  images/line-tile.png
  115. BIN  images/noise.png
  116. BIN  images/rss.png
  117. BIN  images/search.png
  118. BIN  images/watson.jpg
  119. +658 −1 index.html
  120. +45 −0 javascripts/ender.js
  121. +37 −0 javascripts/github.js
  122. +1,497 −0 javascripts/libs/ender.js
  123. +85 −0 javascripts/libs/jXHR.js
  124. +298 −0 javascripts/libs/swfobject-dynamic.js
  125. +5 −0 javascripts/modernizr-2.0.js
  126. +161 −0 javascripts/octopress.js
  127. +56 −0 javascripts/pinboard.js
  128. +78 −0 javascripts/twitter.js
  129. +99 −0 sitemap.xml
  130. +1 −0  stylesheets/screen.css
View
BIN  assets/jwplayer/glow/controlbar/background.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/blankButton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/divider.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/fullscreenButton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/fullscreenButtonOver.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/muteButton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/muteButtonOver.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/normalscreenButton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/normalscreenButtonOver.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/pauseButton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/pauseButtonOver.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/playButton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/playButtonOver.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/timeSliderBuffer.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/timeSliderCapLeft.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/timeSliderCapRight.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/timeSliderProgress.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/timeSliderRail.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/unmuteButton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/controlbar/unmuteButtonOver.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/display/background.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/display/bufferIcon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/display/muteIcon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/display/playIcon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/jwplayer/glow/dock/button.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
115 assets/jwplayer/glow/glow.xml
@@ -0,0 +1,115 @@
+<?xml version="1.0"?>
+<skin version="1.1" name="Glow" author="LongTail Video">
+
+ <settings>
+ <setting name="backcolor" value="0x000000" />
+ <setting name="frontcolor" value="0xeeeeee" />
+ <setting name="lightcolor" value="0xeeeeee" />
+ <setting name="screencolor" value="0x000000" />
+ </settings>
+
+ <components>
+ <component name="controlbar">
+ <settings>
+ <setting name="margin" value="0" />
+ <setting name="fontsize" value="11" />
+ <setting name="fontcolor" value="0xEEEEEE" />
+ <setting name="buttoncolor" value="0xEEEEEE" />
+ </settings>
+
+ <layout>
+ <group position="left">
+ <button name="play" />
+ <text name="elapsed" />
+ </group>
+ <group position="center">
+ <slider name="time" />
+ </group>
+ <group position="right">
+ <text name="duration" />
+ <button name="blank" />
+ <button name="mute" />
+ <button name="fullscreen" />
+ </group>
+ </layout>
+
+ <elements>
+ <element name="background" src="background.png" />
+ <element name="capLeft" src="divider.png" />
+ <element name="capRight" src="divider.png" />
+ <element name="divider" src="divider.png" />
+ <element name="blankButton" src="blankButton.png" />
+ <element name="fullscreenButton" src="fullscreenButton.png" />
+ <element name="fullscreenButtonOver" src="fullscreenButtonOver.png" />
+ <element name="muteButton" src="muteButton.png" />
+ <element name="muteButtonOver" src="muteButtonOver.png" />
+ <element name="pauseButton" src="pauseButton.png" />
+ <element name="pauseButtonOver" src="pauseButtonOver.png" />
+ <element name="playButton" src="playButton.png" />
+ <element name="playButtonOver" src="playButtonOver.png" />
+ <element name="timeSliderBuffer" src="timeSliderBuffer.png" />
+ <element name="timeSliderCapLeft" src="timeSliderCapLeft.png" />
+ <element name="timeSliderCapRight" src="timeSliderCapRight.png" />
+ <element name="timeSliderProgress" src="timeSliderProgress.png" />
+ <element name="timeSliderRail" src="timeSliderRail.png" />
+ <element name="normalscreenButton" src="normalscreenButton.png" />
+ <element name="normalscreenButtonOver" src="normalscreenButtonOver.png" />
+ <element name="unmuteButton" src="unmuteButton.png" />
+ <element name="unmuteButtonOver" src="unmuteButtonOver.png" />
+ <element name="volumeSliderRail" src="divider.png" />
+ <element name="volumeSliderProgress" src="divider.png" />
+ </elements>
+ </component>
+
+ <component name="display">
+ <settings>
+ <setting name="bufferinterval" value="250" />
+ <setting name="bufferrotation" value="90" />
+ </settings>
+ <elements>
+ <element name="background" src="background.png" />
+ <element name="playIcon" src="playIcon.png" />
+ <element name="muteIcon" src="muteIcon.png" />
+ <element name="errorIcon" src="bufferIcon.png" />
+ <element name="bufferIcon" src="bufferIcon.png" />
+ </elements>
+ </component>
+
+ <component name="dock">
+ <settings>
+ <setting name="fontcolor" value="0xFFFFFF" />
+ </settings>
+ <elements>
+ <element name="button" src="button.png" />
+ </elements>
+ </component>
+
+ <component name="playlist">
+ <settings>
+ <setting name="fontcolor" value="0xEEEEEE" />
+ <setting name="overcolor" value="0xFFFFFF" />
+ <setting name="activecolor" value="0xFFFFFF" />
+ <setting name="backgroundcolor" value="0x333333" />
+ </settings>
+ <elements>
+ <element name="item" src="item.png" />
+ <element name="itemOver" src="itemOver.png" />
+ <element name="sliderCapBottom" src="sliderCapBottom.png" />
+ <element name="sliderCapTop" src="sliderCapTop.png" />
+ <element name="sliderRail" src="sliderRail.png" />
+ <element name="sliderThumb" src="sliderThumb.png" />
+ </elements>
+ </component>
+
+ <component name="sharing">
+ <elements>
+ <element name="embedIcon" src="embedIcon.png" />
+ <element name="embedScreen" src="embedScreen.png" />
+ <element name="shareIcon" src="shareIcon.png" />
+ <element name="shareScreen" src="shareScreen.png" />
+ </elements>
+ </component>
+
+ </components>
+
+</skin>
View
BIN  assets/jwplayer/glow/playlist/item.png
Diff not rendered
View
BIN  assets/jwplayer/glow/playlist/itemOver.png
Diff not rendered
View
BIN  assets/jwplayer/glow/playlist/sliderCapBottom.png
Diff not rendered
View
BIN  assets/jwplayer/glow/playlist/sliderCapTop.png
Diff not rendered
View
BIN  assets/jwplayer/glow/playlist/sliderRail.png
Diff not rendered
View
BIN  assets/jwplayer/glow/playlist/sliderThumb.png
Diff not rendered
View
BIN  assets/jwplayer/glow/sharing/embedIcon.png
Diff not rendered
View
BIN  assets/jwplayer/glow/sharing/embedScreen.png
Diff not rendered
View
BIN  assets/jwplayer/glow/sharing/shareIcon.png
Diff not rendered
View
BIN  assets/jwplayer/glow/sharing/shareScreen.png
Diff not rendered
View
BIN  assets/jwplayer/player.swf
Binary file not shown
View
2,946 atom.xml
2,946 additions, 0 deletions not shown
View
795 blog/2012/05/03/creating-an-ios-application-using-rubymotion_en/index.html
@@ -0,0 +1,795 @@
+
+<!DOCTYPE html>
+<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
+<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
+<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <title>Creating an iOS Application using RubyMotion - Watson's Blog</title>
+ <meta name="author" content="Watson">
+
+
+ <meta name="description" content="In this article I will explain how to create a simple iOS application using RubyMotion. I will call this application &#8220;StopWatch&#8221;, and &hellip;">
+
+
+ <!-- http://t.co/dKP3o1e -->
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+ <link rel="canonical" href="http://Watson1978.github.com/blog/2012/05/03/creating-an-ios-application-using-rubymotion_en/">
+ <link href="/favicon.png" rel="icon">
+ <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
+ <script src="/javascripts/modernizr-2.0.js"></script>
+ <script src="/javascripts/ender.js"></script>
+ <script src="/javascripts/octopress.js" type="text/javascript"></script>
+ <link href="/atom.xml" rel="alternate" title="Watson's Blog" type="application/atom+xml">
+ <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
+<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-31153551-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+
+
+</head>
+
+<body >
+ <header role="banner"><hgroup>
+ <h1><a href="/">Watson's Blog</a></h1>
+
+</hgroup>
+
+</header>
+ <nav role="navigation"><ul class="subscription" data-subscription="rss">
+ <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
+
+</ul>
+
+<form action="http://google.com/search" method="get">
+ <fieldset role="search">
+ <input type="hidden" name="q" value="site:Watson1978.github.com" />
+ <input class="search" type="text" name="q" results="0" placeholder="Search"/>
+ </fieldset>
+</form>
+
+<ul class="main-navigation">
+ <li><a href="/">Blog</a></li>
+ <li><a href="/blog/archives">Archives</a></li>
+ <li><a href="/MacRuby-DoJo/">MacRuby DoJo</a></li>
+</ul>
+
+</nav>
+ <div id="main">
+ <div id="content">
+ <div>
+<article class="hentry" role="article">
+
+ <header>
+
+ <h1 class="entry-title">Creating an iOS Application Using RubyMotion</h1>
+
+
+ <p class="meta">
+
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-05-03T00:02:00+09:00" pubdate data-updated="true">May 3<span>rd</span>, 2012</time>
+
+ | <a href="#disqus_thread">Comments</a>
+
+ </p>
+
+ </header>
+
+
+<div class="entry-content"><p>In this article I will explain how to create a simple iOS application using RubyMotion. I will call this application &#8220;StopWatch&#8221;, and MacRuby version of this application is explained in <a href="https://github.com/MacRuby/MacRuby/wiki/Creating-a-simple-application">&#8220;Creating a simple application&#8221;</a>.</p>
+
+<p>The &#8220;StopWatch&#8221; application has the following features.</p>
+
+<ul>
+<li>This application has the user interface which are start buttion, stop button and label.</li>
+<li>Run the timer if the start button is clicked.</li>
+<li>Stop the timer if the stop button is clicked.</li>
+<li>The timer value is displayed in the label.</li>
+</ul>
+
+
+<!-- more -->
+
+
+<h2>Creating a New Application</h2>
+
+<p>The command-line interface is created as <code>/usr/bin/motion</code> if you install RubyMotion.
+Runs as following command in Terminal, you may create the application template.</p>
+
+<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+</pre></td><td class='code'><pre><code class=''><span class='line'>$ motion create StopWatch
+</span><span class='line'> Create StopWatch
+</span><span class='line'> Create StopWatch/.gitignore
+</span><span class='line'> Create StopWatch/Rakefile
+</span><span class='line'> Create StopWatch/app
+</span><span class='line'> Create StopWatch/app/app_delegate.rb
+</span><span class='line'> Create StopWatch/resources
+</span><span class='line'> Create StopWatch/spec
+</span><span class='line'> Create StopWatch/spec/main_spec.rb</span></code></pre></td></tr></table></div></figure>
+
+
+<ul>
+<li>Rakefile: This file contains the configuration of the project, as well as a default set of tasks.</li>
+<li>app: This directory contains the Ruby code of the project.</li>
+<li>resources: This directory contains the resources files of the project, such as images or sounds.</li>
+<li>spec: This directory contains the specification files of the application.</li>
+</ul>
+
+
+<p>You can know detail of the configurations with <a href="http://www.rubymotion.com/developer-center/guides/project-management">Project Management</a>.</p>
+
+<h2>Implements the application</h2>
+
+<p>Opens the app/app_delegate.rb with your editor.</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">AppDelegate</span>
+</span><span class='line'> <span class="k">def</span> <span class="nf">application</span><span class="p">(</span><span class="n">application</span><span class="p">,</span> <span class="n">didFinishLaunchingWithOptions</span><span class="ss">:launchOptions</span><span class="p">)</span>
+</span><span class='line'> <span class="kp">true</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'><span class="k">end</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Implements the code which contains actions or user interface for iOS into this file.
+<a href="http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIKit_Framework/_index.html">UIKit Framework Reference</a> may help you to implement user interface.</p>
+
+<h3>1. Create the UIWindow object</h3>
+
+<p>First step, creates the UIWindow object. The UIWindow class defines objects that manage and coordinate the windows an application displays on the screen.</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">AppDelegate</span>
+</span><span class='line'> <span class="k">def</span> <span class="nf">application</span><span class="p">(</span><span class="n">application</span><span class="p">,</span> <span class="n">didFinishLaunchingWithOptions</span><span class="ss">:launchOptions</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@window</span> <span class="o">=</span> <span class="no">UIWindow</span><span class="o">.</span><span class="n">alloc</span><span class="o">.</span><span class="n">initWithFrame</span><span class="p">(</span><span class="no">UIScreen</span><span class="o">.</span><span class="n">mainScreen</span><span class="o">.</span><span class="n">bounds</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'> <span class="c1"># Sets the StopWatchViewController as rootViewController</span>
+</span><span class='line'> <span class="vi">@window</span><span class="o">.</span><span class="n">rootViewController</span> <span class="o">=</span> <span class="no">StopWatchViewController</span><span class="o">.</span><span class="n">alloc</span><span class="o">.</span><span class="n">init</span>
+</span><span class='line'>
+</span><span class='line'> <span class="vi">@window</span><span class="o">.</span><span class="n">makeKeyAndVisible</span>
+</span><span class='line'> <span class="kp">true</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'><span class="k">end</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Sets the StopWatchViewController which inherited the UIViewController as rootViewController.
+The UIViewController provides basic functions for view-management.</p>
+
+<h3>2. Implement the StopWatchViewController</h3>
+
+<p>Prepares the StopWatchViewController as following.</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">StopWatchViewController</span> <span class="o">&lt;</span> <span class="no">UIViewController</span>
+</span><span class='line'> <span class="k">def</span> <span class="nf">viewDidLoad</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'><span class="k">end</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p><code>viewDidLoad</code> method is called after the controller’s view is loaded into memory. Implements the user interface into <code>viewDidLoad</code> method. The UIView is used when lays out the user interface. You may retrive the UIView as following.</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># retrive the UIView</span>
+</span><span class='line'><span class="n">view</span> <span class="o">=</span> <span class="nb">self</span><span class="o">.</span><span class="n">view</span>
+</span><span class='line'><span class="c1"># configure background color</span>
+</span><span class='line'><span class="n">view</span><span class="o">.</span><span class="n">backgroundColor</span> <span class="o">=</span> <span class="no">UIColor</span><span class="o">.</span><span class="n">whiteColor</span>
+</span><span class='line'>
+</span><span class='line'><span class="c1"># retrive the screen size</span>
+</span><span class='line'><span class="n">frame</span> <span class="o">=</span> <span class="n">view</span><span class="o">.</span><span class="n">bounds</span>
+</span><span class='line'><span class="n">height</span> <span class="o">=</span> <span class="n">frame</span><span class="o">.</span><span class="n">size</span><span class="o">.</span><span class="n">height</span>
+</span><span class='line'><span class="n">width</span> <span class="o">=</span> <span class="n">frame</span><span class="o">.</span><span class="n">size</span><span class="o">.</span><span class="n">width</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h4>Lays out the user interface</h4>
+
+<p>Creates the user interface object after retriving the UIView, and you may lay out the user interface that invokes <code>addSubview</code>.</p>
+
+<p>Let&#8217;s lay out the start/stop button and label.</p>
+
+<h5>Lays out the start button</h5>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># start button</span>
+</span><span class='line'><span class="vi">@start</span> <span class="o">=</span> <span class="no">UIButton</span><span class="o">.</span><span class="n">buttonWithType</span><span class="p">(</span><span class="no">UIButtonTypeRoundedRect</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@start</span><span class="o">.</span><span class="n">frame</span> <span class="o">=</span> <span class="no">CGRectMake</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">300</span><span class="p">,</span> <span class="n">width</span><span class="o">/</span><span class="mi">2</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@start</span><span class="o">.</span><span class="n">setTitle</span><span class="p">(</span><span class="s2">&quot;start&quot;</span><span class="p">,</span> <span class="n">forState</span><span class="p">:</span> <span class="no">UIControlStateNormal</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'><span class="c1"># connect an action method for start button</span>
+</span><span class='line'><span class="vi">@start</span><span class="o">.</span><span class="n">addTarget</span><span class="p">(</span><span class="nb">self</span><span class="p">,</span>
+</span><span class='line'> <span class="n">action</span><span class="p">:</span> <span class="s2">&quot;startTimer:&quot;</span><span class="p">,</span>
+</span><span class='line'> <span class="n">forControlEvents</span><span class="p">:</span> <span class="no">UIControlEventTouchUpInside</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'><span class="n">view</span><span class="o">.</span><span class="n">addSubview</span><span class="p">(</span><span class="vi">@start</span><span class="p">)</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h5>Lays out the stop button</h5>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># stop button</span>
+</span><span class='line'><span class="vi">@stop</span> <span class="o">=</span> <span class="no">UIButton</span><span class="o">.</span><span class="n">buttonWithType</span><span class="p">(</span><span class="no">UIButtonTypeRoundedRect</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@stop</span><span class="o">.</span><span class="n">frame</span> <span class="o">=</span> <span class="no">CGRectMake</span><span class="p">(</span><span class="n">width</span><span class="o">/</span><span class="mi">2</span> <span class="o">+</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">300</span><span class="p">,</span> <span class="n">width</span><span class="o">/</span><span class="mi">2</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@stop</span><span class="o">.</span><span class="n">setTitle</span><span class="p">(</span><span class="s2">&quot;stop&quot;</span><span class="p">,</span> <span class="n">forState</span><span class="p">:</span> <span class="no">UIControlStateNormal</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'><span class="c1"># connect an action method for stop button</span>
+</span><span class='line'><span class="vi">@stop</span><span class="o">.</span><span class="n">addTarget</span><span class="p">(</span><span class="nb">self</span><span class="p">,</span>
+</span><span class='line'> <span class="n">action</span><span class="p">:</span> <span class="s2">&quot;stopTimer:&quot;</span><span class="p">,</span>
+</span><span class='line'> <span class="n">forControlEvents</span><span class="p">:</span> <span class="no">UIControlEventTouchUpInside</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'><span class="n">view</span><span class="o">.</span><span class="n">addSubview</span><span class="p">(</span><span class="vi">@stop</span><span class="p">)</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h5>Lays out the label</h5>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># label for displaying timer value</span>
+</span><span class='line'><span class="vi">@label</span> <span class="o">=</span> <span class="no">UILabel</span><span class="o">.</span><span class="n">alloc</span><span class="o">.</span><span class="n">init</span>
+</span><span class='line'><span class="vi">@label</span><span class="o">.</span><span class="n">frame</span> <span class="o">=</span> <span class="no">CGRectMake</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="n">width</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@label</span><span class="o">.</span><span class="n">font</span> <span class="o">=</span> <span class="no">UIFont</span><span class="o">.</span><span class="n">fontWithName</span><span class="p">(</span><span class="s2">&quot;AppleGothic&quot;</span><span class="p">,</span><span class="n">size</span><span class="p">:</span><span class="mi">24</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@label</span><span class="o">.</span><span class="n">textAlignment</span> <span class="o">=</span> <span class="no">UITextAlignmentCenter</span>
+</span><span class='line'><span class="n">view</span><span class="o">.</span><span class="n">addSubview</span><span class="p">(</span><span class="vi">@label</span><span class="p">)</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h4>Implements the action methods</h4>
+
+<p>We can define the <code>startTimer</code> and <code>stopTimer</code> methods as following.</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+<span class='line-number'>12</span>
+<span class='line-number'>13</span>
+<span class='line-number'>14</span>
+<span class='line-number'>15</span>
+<span class='line-number'>16</span>
+<span class='line-number'>17</span>
+<span class='line-number'>18</span>
+<span class='line-number'>19</span>
+<span class='line-number'>20</span>
+<span class='line-number'>21</span>
+<span class='line-number'>22</span>
+<span class='line-number'>23</span>
+<span class='line-number'>24</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'> <span class="k">def</span> <span class="nf">startTimer</span><span class="p">(</span><span class="n">sender</span><span class="p">)</span>
+</span><span class='line'> <span class="k">if</span> <span class="vi">@timer</span> <span class="o">==</span> <span class="kp">nil</span>
+</span><span class='line'> <span class="vi">@time</span> <span class="o">=</span> <span class="mi">0</span><span class="o">.</span><span class="mi">0</span>
+</span><span class='line'> <span class="vi">@timer</span> <span class="o">=</span> <span class="no">NSTimer</span>
+</span><span class='line'> <span class="o">.</span><span class="n">scheduledTimerWithTimeInterval</span><span class="p">(</span><span class="mi">0</span><span class="o">.</span><span class="mi">1</span><span class="p">,</span>
+</span><span class='line'> <span class="n">target</span><span class="p">:</span> <span class="nb">self</span><span class="p">,</span>
+</span><span class='line'> <span class="n">selector</span><span class="p">:</span> <span class="s2">&quot;timerHandler:&quot;</span><span class="p">,</span>
+</span><span class='line'> <span class="n">userInfo</span><span class="p">:</span> <span class="kp">nil</span><span class="p">,</span>
+</span><span class='line'> <span class="n">repeats</span><span class="p">:</span> <span class="kp">true</span><span class="p">)</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'>
+</span><span class='line'> <span class="k">def</span> <span class="nf">stopTimer</span><span class="p">(</span><span class="n">sender</span><span class="p">)</span>
+</span><span class='line'> <span class="k">if</span> <span class="vi">@timer</span>
+</span><span class='line'> <span class="vi">@timer</span><span class="o">.</span><span class="n">invalidate</span>
+</span><span class='line'> <span class="vi">@timer</span> <span class="o">=</span> <span class="kp">nil</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'>
+</span><span class='line'> <span class="k">def</span> <span class="nf">timerHandler</span><span class="p">(</span><span class="n">userInfo</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@time</span> <span class="o">+=</span> <span class="mi">0</span><span class="o">.</span><span class="mi">1</span>
+</span><span class='line'> <span class="n">string</span> <span class="o">=</span> <span class="nb">sprintf</span><span class="p">(</span><span class="s2">&quot;%.1f&quot;</span><span class="p">,</span> <span class="vi">@time</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@label</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="n">string</span>
+</span><span class='line'> <span class="k">end</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>The above code creates and schedules a timer in <code>startTimer</code> that will execute the <code>timerHandler</code> method repetitively each 0.1 seconds. The <code>timerHandler</code> displays value into label, and <code>stopTimer</code> stops the timer by <code>@timer.invalidate</code>.</p>
+
+<div class="note">
+<strong>** IMPORTANT **</strong>: <br/>
+Currently, if you use the data for a long time, you must keep as instance variables.
+
+<br/>
+Refer: <a href="http://www.rubymotion.com/developer-center/guides/runtime#_memory_management">Runtime</a>
+</div>
+
+
+<h2>Runs the StopWatch application</h2>
+
+<p>You may run the StopWatch application by <code>rake</code> command in Terminal.</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="err">$</span> <span class="n">rake</span>
+</span><span class='line'> <span class="no">Build</span> <span class="o">.</span><span class="n">/build</span><span class="o">/</span><span class="n">iPhoneSimulator</span><span class="o">-</span><span class="mi">5</span><span class="o">.</span><span class="mi">1</span><span class="o">-</span><span class="no">Development</span>
+</span><span class='line'> <span class="no">Compile</span> <span class="o">.</span><span class="n">/app</span><span class="o">/</span><span class="n">app_delegate</span><span class="o">.</span><span class="n">rb</span>
+</span><span class='line'> <span class="no">Create</span> <span class="o">.</span><span class="n">/build</span><span class="o">/</span><span class="n">iPhoneSimulator</span><span class="o">-</span><span class="mi">5</span><span class="o">.</span><span class="mi">1</span><span class="o">-</span><span class="no">Development</span><span class="o">/</span><span class="no">StopWatch</span><span class="o">.</span><span class="n">app</span>
+</span><span class='line'> <span class="no">Link</span> <span class="o">.</span><span class="n">/build</span><span class="o">/</span><span class="n">iPhoneSimulator</span><span class="o">-</span><span class="mi">5</span><span class="o">.</span><span class="mi">1</span><span class="o">-</span><span class="no">Development</span><span class="o">/</span><span class="no">StopWatch</span><span class="o">.</span><span class="n">app</span><span class="o">/</span><span class="no">StopWatch</span>
+</span><span class='line'> <span class="no">Create</span> <span class="o">.</span><span class="n">/build</span><span class="o">/</span><span class="n">iPhoneSimulator</span><span class="o">-</span><span class="mi">5</span><span class="o">.</span><span class="mi">1</span><span class="o">-</span><span class="no">Development</span><span class="o">/</span><span class="no">StopWatch</span><span class="o">.</span><span class="n">app</span><span class="o">/</span><span class="no">Info</span><span class="o">.</span><span class="n">plist</span>
+</span><span class='line'> <span class="no">Create</span> <span class="o">.</span><span class="n">/build</span><span class="o">/</span><span class="n">iPhoneSimulator</span><span class="o">-</span><span class="mi">5</span><span class="o">.</span><span class="mi">1</span><span class="o">-</span><span class="no">Development</span><span class="o">/</span><span class="no">StopWatch</span><span class="o">.</span><span class="n">app</span><span class="o">/</span><span class="no">PkgInfo</span>
+</span><span class='line'> <span class="no">Create</span> <span class="o">.</span><span class="n">/build</span><span class="o">/</span><span class="n">iPhoneSimulator</span><span class="o">-</span><span class="mi">5</span><span class="o">.</span><span class="mi">1</span><span class="o">-</span><span class="no">Development</span><span class="o">/</span><span class="no">StopWatch</span><span class="o">.</span><span class="n">dSYM</span>
+</span><span class='line'> <span class="no">Simulate</span> <span class="o">.</span><span class="n">/build</span><span class="o">/</span><span class="n">iPhoneSimulator</span><span class="o">-</span><span class="mi">5</span><span class="o">.</span><span class="mi">1</span><span class="o">-</span><span class="no">Development</span><span class="o">/</span><span class="no">StopWatch</span><span class="o">.</span><span class="n">app</span>
+</span><span class='line'><span class="p">(</span><span class="n">main</span><span class="p">)</span><span class="o">&gt;&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p><img src="/images/blog/stopwatch.png" alt="StopWatch application" /></p>
+
+<h2>Appendix</h2>
+
+<p>There is full code which created in this article as following.</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+<span class='line-number'>12</span>
+<span class='line-number'>13</span>
+<span class='line-number'>14</span>
+<span class='line-number'>15</span>
+<span class='line-number'>16</span>
+<span class='line-number'>17</span>
+<span class='line-number'>18</span>
+<span class='line-number'>19</span>
+<span class='line-number'>20</span>
+<span class='line-number'>21</span>
+<span class='line-number'>22</span>
+<span class='line-number'>23</span>
+<span class='line-number'>24</span>
+<span class='line-number'>25</span>
+<span class='line-number'>26</span>
+<span class='line-number'>27</span>
+<span class='line-number'>28</span>
+<span class='line-number'>29</span>
+<span class='line-number'>30</span>
+<span class='line-number'>31</span>
+<span class='line-number'>32</span>
+<span class='line-number'>33</span>
+<span class='line-number'>34</span>
+<span class='line-number'>35</span>
+<span class='line-number'>36</span>
+<span class='line-number'>37</span>
+<span class='line-number'>38</span>
+<span class='line-number'>39</span>
+<span class='line-number'>40</span>
+<span class='line-number'>41</span>
+<span class='line-number'>42</span>
+<span class='line-number'>43</span>
+<span class='line-number'>44</span>
+<span class='line-number'>45</span>
+<span class='line-number'>46</span>
+<span class='line-number'>47</span>
+<span class='line-number'>48</span>
+<span class='line-number'>49</span>
+<span class='line-number'>50</span>
+<span class='line-number'>51</span>
+<span class='line-number'>52</span>
+<span class='line-number'>53</span>
+<span class='line-number'>54</span>
+<span class='line-number'>55</span>
+<span class='line-number'>56</span>
+<span class='line-number'>57</span>
+<span class='line-number'>58</span>
+<span class='line-number'>59</span>
+<span class='line-number'>60</span>
+<span class='line-number'>61</span>
+<span class='line-number'>62</span>
+<span class='line-number'>63</span>
+<span class='line-number'>64</span>
+<span class='line-number'>65</span>
+<span class='line-number'>66</span>
+<span class='line-number'>67</span>
+<span class='line-number'>68</span>
+<span class='line-number'>69</span>
+<span class='line-number'>70</span>
+<span class='line-number'>71</span>
+<span class='line-number'>72</span>
+<span class='line-number'>73</span>
+<span class='line-number'>74</span>
+<span class='line-number'>75</span>
+<span class='line-number'>76</span>
+<span class='line-number'>77</span>
+<span class='line-number'>78</span>
+<span class='line-number'>79</span>
+<span class='line-number'>80</span>
+<span class='line-number'>81</span>
+<span class='line-number'>82</span>
+<span class='line-number'>83</span>
+<span class='line-number'>84</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">StopWatchViewController</span> <span class="o">&lt;</span> <span class="no">UIViewController</span>
+</span><span class='line'> <span class="k">def</span> <span class="nf">viewDidLoad</span>
+</span><span class='line'> <span class="c1"># retrive the UIView</span>
+</span><span class='line'> <span class="n">view</span> <span class="o">=</span> <span class="nb">self</span><span class="o">.</span><span class="n">view</span>
+</span><span class='line'> <span class="c1"># configure background color</span>
+</span><span class='line'> <span class="n">view</span><span class="o">.</span><span class="n">backgroundColor</span> <span class="o">=</span> <span class="no">UIColor</span><span class="o">.</span><span class="n">whiteColor</span>
+</span><span class='line'>
+</span><span class='line'> <span class="c1"># retrive the screen size</span>
+</span><span class='line'> <span class="n">frame</span> <span class="o">=</span> <span class="n">view</span><span class="o">.</span><span class="n">bounds</span>
+</span><span class='line'> <span class="n">height</span> <span class="o">=</span> <span class="n">frame</span><span class="o">.</span><span class="n">size</span><span class="o">.</span><span class="n">height</span>
+</span><span class='line'> <span class="n">width</span> <span class="o">=</span> <span class="n">frame</span><span class="o">.</span><span class="n">size</span><span class="o">.</span><span class="n">width</span>
+</span><span class='line'>
+</span><span class='line'> <span class="c1">#--------------------</span>
+</span><span class='line'> <span class="c1"># start button</span>
+</span><span class='line'> <span class="vi">@start</span> <span class="o">=</span> <span class="no">UIButton</span><span class="o">.</span><span class="n">buttonWithType</span><span class="p">(</span><span class="no">UIButtonTypeRoundedRect</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@start</span><span class="o">.</span><span class="n">frame</span> <span class="o">=</span> <span class="no">CGRectMake</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">300</span><span class="p">,</span> <span class="n">width</span><span class="o">/</span><span class="mi">2</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@start</span><span class="o">.</span><span class="n">setTitle</span><span class="p">(</span><span class="s2">&quot;start&quot;</span><span class="p">,</span> <span class="n">forState</span><span class="p">:</span> <span class="no">UIControlStateNormal</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'> <span class="c1"># connect an action method for start button</span>
+</span><span class='line'> <span class="vi">@start</span><span class="o">.</span><span class="n">addTarget</span><span class="p">(</span><span class="nb">self</span><span class="p">,</span>
+</span><span class='line'> <span class="n">action</span><span class="p">:</span> <span class="s2">&quot;startTimer:&quot;</span><span class="p">,</span>
+</span><span class='line'> <span class="n">forControlEvents</span><span class="p">:</span> <span class="no">UIControlEventTouchUpInside</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'> <span class="n">view</span><span class="o">.</span><span class="n">addSubview</span><span class="p">(</span><span class="vi">@start</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'> <span class="c1">#--------------------</span>
+</span><span class='line'> <span class="c1"># stop button</span>
+</span><span class='line'> <span class="vi">@stop</span> <span class="o">=</span> <span class="no">UIButton</span><span class="o">.</span><span class="n">buttonWithType</span><span class="p">(</span><span class="no">UIButtonTypeRoundedRect</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@stop</span><span class="o">.</span><span class="n">frame</span> <span class="o">=</span> <span class="no">CGRectMake</span><span class="p">(</span><span class="n">width</span><span class="o">/</span><span class="mi">2</span> <span class="o">+</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">300</span><span class="p">,</span> <span class="n">width</span><span class="o">/</span><span class="mi">2</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@stop</span><span class="o">.</span><span class="n">setTitle</span><span class="p">(</span><span class="s2">&quot;stop&quot;</span><span class="p">,</span> <span class="n">forState</span><span class="p">:</span> <span class="no">UIControlStateNormal</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'> <span class="c1"># connect an action method for stop button</span>
+</span><span class='line'> <span class="vi">@stop</span><span class="o">.</span><span class="n">addTarget</span><span class="p">(</span><span class="nb">self</span><span class="p">,</span>
+</span><span class='line'> <span class="n">action</span><span class="p">:</span> <span class="s2">&quot;stopTimer:&quot;</span><span class="p">,</span>
+</span><span class='line'> <span class="n">forControlEvents</span><span class="p">:</span> <span class="no">UIControlEventTouchUpInside</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'> <span class="n">view</span><span class="o">.</span><span class="n">addSubview</span><span class="p">(</span><span class="vi">@stop</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'> <span class="c1">#--------------------------</span>
+</span><span class='line'> <span class="c1"># label for displaying timer value</span>
+</span><span class='line'> <span class="vi">@label</span> <span class="o">=</span> <span class="no">UILabel</span><span class="o">.</span><span class="n">alloc</span><span class="o">.</span><span class="n">init</span>
+</span><span class='line'> <span class="vi">@label</span><span class="o">.</span><span class="n">frame</span> <span class="o">=</span> <span class="no">CGRectMake</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="n">width</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@label</span><span class="o">.</span><span class="n">font</span> <span class="o">=</span> <span class="no">UIFont</span><span class="o">.</span><span class="n">fontWithName</span><span class="p">(</span><span class="s2">&quot;AppleGothic&quot;</span><span class="p">,</span><span class="n">size</span><span class="p">:</span><span class="mi">24</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@label</span><span class="o">.</span><span class="n">textAlignment</span> <span class="o">=</span> <span class="no">UITextAlignmentCenter</span>
+</span><span class='line'> <span class="n">view</span><span class="o">.</span><span class="n">addSubview</span><span class="p">(</span><span class="vi">@label</span><span class="p">)</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'>
+</span><span class='line'> <span class="k">def</span> <span class="nf">startTimer</span><span class="p">(</span><span class="n">sender</span><span class="p">)</span>
+</span><span class='line'> <span class="k">if</span> <span class="vi">@timer</span> <span class="o">==</span> <span class="kp">nil</span>
+</span><span class='line'> <span class="vi">@time</span> <span class="o">=</span> <span class="mi">0</span><span class="o">.</span><span class="mi">0</span>
+</span><span class='line'> <span class="vi">@timer</span> <span class="o">=</span> <span class="no">NSTimer</span>
+</span><span class='line'> <span class="o">.</span><span class="n">scheduledTimerWithTimeInterval</span><span class="p">(</span><span class="mi">0</span><span class="o">.</span><span class="mi">1</span><span class="p">,</span>
+</span><span class='line'> <span class="n">target</span><span class="p">:</span> <span class="nb">self</span><span class="p">,</span>
+</span><span class='line'> <span class="n">selector</span><span class="p">:</span> <span class="s2">&quot;timerHandler:&quot;</span><span class="p">,</span>
+</span><span class='line'> <span class="n">userInfo</span><span class="p">:</span> <span class="kp">nil</span><span class="p">,</span>
+</span><span class='line'> <span class="n">repeats</span><span class="p">:</span> <span class="kp">true</span><span class="p">)</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'>
+</span><span class='line'> <span class="k">def</span> <span class="nf">stopTimer</span><span class="p">(</span><span class="n">sender</span><span class="p">)</span>
+</span><span class='line'> <span class="k">if</span> <span class="vi">@timer</span>
+</span><span class='line'> <span class="vi">@timer</span><span class="o">.</span><span class="n">invalidate</span>
+</span><span class='line'> <span class="vi">@timer</span> <span class="o">=</span> <span class="kp">nil</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'>
+</span><span class='line'> <span class="k">def</span> <span class="nf">timerHandler</span><span class="p">(</span><span class="n">userInfo</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@time</span> <span class="o">+=</span> <span class="mi">0</span><span class="o">.</span><span class="mi">1</span>
+</span><span class='line'> <span class="n">string</span> <span class="o">=</span> <span class="nb">sprintf</span><span class="p">(</span><span class="s2">&quot;%.1f&quot;</span><span class="p">,</span> <span class="vi">@time</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@label</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="n">string</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'><span class="k">end</span>
+</span><span class='line'>
+</span><span class='line'><span class="k">class</span> <span class="nc">AppDelegate</span>
+</span><span class='line'> <span class="k">def</span> <span class="nf">application</span><span class="p">(</span><span class="n">application</span><span class="p">,</span> <span class="n">didFinishLaunchingWithOptions</span><span class="ss">:launchOptions</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@window</span> <span class="o">=</span> <span class="no">UIWindow</span><span class="o">.</span><span class="n">alloc</span><span class="o">.</span><span class="n">initWithFrame</span><span class="p">(</span><span class="no">UIScreen</span><span class="o">.</span><span class="n">mainScreen</span><span class="o">.</span><span class="n">bounds</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'> <span class="c1"># Sets the StopWatchViewController as rootViewController</span>
+</span><span class='line'> <span class="vi">@window</span><span class="o">.</span><span class="n">rootViewController</span> <span class="o">=</span> <span class="no">StopWatchViewController</span><span class="o">.</span><span class="n">alloc</span><span class="o">.</span><span class="n">init</span>
+</span><span class='line'>
+</span><span class='line'> <span class="vi">@window</span><span class="o">.</span><span class="n">makeKeyAndVisible</span>
+</span><span class='line'> <span class="kp">true</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'><span class="k">end</span>
+</span></code></pre></td></tr></table></div></figure>
+
+</div>
+
+
+ <footer>
+ <p class="meta">
+
+
+
+<span class="byline author vcard">Posted by <span class="fn">Watson</span></span>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-05-03T00:02:00+09:00" pubdate data-updated="true">May 3<span>rd</span>, 2012</time>
+
+
+<span class="categories">
+
+ <a class='category' href='/blog/categories/rubymotion/'>RubyMotion</a>
+
+</span>
+
+
+ </p>
+
+ <div class="sharing">
+
+ <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
+
+
+ <a href="http://www.delicious.com/save" class="delicious-bookmark-button" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="http://www.delicious.com/static/img/delicious.small.gif" height="20" width="20" style="border: none;" alt="Delicious" /></a>
+
+
+ <script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
+ <a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/site-mem-32.png" height="20" width="20" style="border: none;" alt="Clip to Evernote" /></a>
+
+
+ <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://Watson1978.github.com/blog/2012/05/03/creating-an-ios-application-using-rubymotion_en/" data-via="watson1978" data-counturl="http://Watson1978.github.com/blog/2012/05/03/creating-an-ios-application-using-rubymotion_en/" >Tweet</a>
+
+
+ <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="true"></div>
+
+
+ <div class="g-plusone" data-size="medium"></div>
+
+</div>
+
+
+ <p class="meta">
+
+ <a class="basic-alignment left" href="/blog/2012/05/03/creating-an-ios-application-using-rubymotion_ja/" title="Previous Post: RubyMotion で簡単な iOS アプリを作ってみよう">&laquo; RubyMotion で簡単な iOS アプリを作ってみよう</a>
+
+
+ <a class="basic-alignment right" href="/blog/2012/05/08/using-interactive-shell/" title="Next Post: UIView のオブジェクトを Interactive Shell を使って修正する">UIView のオブジェクトを Interactive Shell を使って修正する &raquo;</a>
+
+ </p>
+ </footer>
+</article>
+
+ <section>
+ <h1>Comments</h1>
+ <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+</div>
+ </section>
+
+</div>
+
+<aside class="sidebar">
+
+ <section>
+ <h1>About Me</h1>
+ <img src="/images/watson.jpg"/>
+ <ul>
+ <li>Author: Watson</li>
+ <li><a href="https://github.com/MacRuby/MacRuby">MacRuby</a> / <a href="http://www.rubymotion.com/">RubyMotion</a> チームのメンバー</li>
+ <li><a href="https://twitter.com/watson1978">Twitter</a>, <a href="https://github.com/Watson1978">Github</a></li>
+ </ul>
+</section>
+<section>
+ <h1>Recent Posts</h1>
+ <ul id="recent_posts">
+
+ <li class="post">
+ <a href="/blog/2012/12/03/dtrace/">RubyMotion アプリで DTrace を使ってみよう</a>
+ </li>
+
+ <li class="post">
+ <a href="/blog/2012/10/19/rubymotion-can-not-launch-simulator-in-tmux/">tmux を使用しているとシミュレータでアプリが起動しない</a>
+ </li>
+
+ <li class="post">
+ <a href="/blog/2012/09/20/push-notifiation-with-rubymotion/">RubyMotion と Parse で Push Notifiation してみたよ〜</a>
+ </li>
+
+ <li class="post">
+ <a href="/blog/2012/09/19/using-parse/">RubyMotion で Parse を使ってみました</a>
+ </li>
+
+ <li class="post">
+ <a href="/blog/2012/09/10/bonjour-rubymotion/">Bonjour RubyMotion</a>
+ </li>
+
+ </ul>
+</section>
+
+
+<section>
+ <h1>Latest Tweets</h1>
+ <ul id="tweets">
+ <li class="loading">Status updating...</li>
+ </ul>
+ <script type="text/javascript">
+ $.domReady(function(){
+ getTwitterFeed("watson1978", 4, false);
+ });
+ </script>
+ <script src="/javascripts/twitter.js" type="text/javascript"> </script>
+
+ <a href="http://twitter.com/watson1978" class="twitter-follow-button" data-show-count="false">Follow @watson1978</a>
+
+</section>
+
+
+
+
+
+
+</aside>
+
+
+ </div>
+ </div>
+ <footer role="contentinfo"><p>
+ Copyright &copy; 2012 - Watson -
+ <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
+</p>
+
+</footer>
+
+
+<script type="text/javascript">
+ var disqus_shortname = 'watsonsblog';
+
+
+ // var disqus_developer = 1;
+ var disqus_identifier = 'http://Watson1978.github.com/blog/2012/05/03/creating-an-ios-application-using-rubymotion_en/';
+ var disqus_url = 'http://Watson1978.github.com/blog/2012/05/03/creating-an-ios-application-using-rubymotion_en/';
+ var disqus_script = 'embed.js';
+
+ (function () {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ }());
+</script>
+
+
+
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+ var js, fjs = d.getElementsByTagName(s)[0];
+ if (d.getElementById(id)) {return;}
+ js = d.createElement(s); js.id = id;
+ js.src = "//connect.facebook.net/en_US/all.js#appId=212934732101925&xfbml=1";
+ fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+
+
+ <script type="text/javascript">
+ (function() {
+ var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
+ script.src = 'https://apis.google.com/js/plusone.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
+ })();
+ </script>
+
+
+
+ <script type="text/javascript">
+ (function(){
+ var twitterWidgets = document.createElement('script');
+ twitterWidgets.type = 'text/javascript';
+ twitterWidgets.async = true;
+ twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
+ document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
+ })();
+ </script>
+
+
+
+
+
+</body>
+</html>
View
820 blog/2012/05/03/creating-an-ios-application-using-rubymotion_ja/index.html
@@ -0,0 +1,820 @@
+
+<!DOCTYPE html>
+<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
+<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
+<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <title>RubyMotion で簡単な iOS アプリを作ってみよう - Watson's Blog</title>
+ <meta name="author" content="Watson">
+
+
+ <meta name="description" content="今回は、RubyMotion で簡単なアプリを作ってみます。ここでは簡単な「StopWatch」アプリケーションを作成し、RubyMotion でどのように iOS アプリを作成するのか説明したいと思います。 StopWatch アプリの簡単な仕様は、 start ボタン、stop &hellip;">
+
+
+ <!-- http://t.co/dKP3o1e -->
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+ <link rel="canonical" href="http://Watson1978.github.com/blog/2012/05/03/creating-an-ios-application-using-rubymotion_ja/">
+ <link href="/favicon.png" rel="icon">
+ <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
+ <script src="/javascripts/modernizr-2.0.js"></script>
+ <script src="/javascripts/ender.js"></script>
+ <script src="/javascripts/octopress.js" type="text/javascript"></script>
+ <link href="/atom.xml" rel="alternate" title="Watson's Blog" type="application/atom+xml">
+ <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
+<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+
+
+ <script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-31153551-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ </script>
+
+
+</head>
+
+<body >
+ <header role="banner"><hgroup>
+ <h1><a href="/">Watson's Blog</a></h1>
+
+</hgroup>
+
+</header>
+ <nav role="navigation"><ul class="subscription" data-subscription="rss">
+ <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
+
+</ul>
+
+<form action="http://google.com/search" method="get">
+ <fieldset role="search">
+ <input type="hidden" name="q" value="site:Watson1978.github.com" />
+ <input class="search" type="text" name="q" results="0" placeholder="Search"/>
+ </fieldset>
+</form>
+
+<ul class="main-navigation">
+ <li><a href="/">Blog</a></li>
+ <li><a href="/blog/archives">Archives</a></li>
+ <li><a href="/MacRuby-DoJo/">MacRuby DoJo</a></li>
+</ul>
+
+</nav>
+ <div id="main">
+ <div id="content">
+ <div>
+<article class="hentry" role="article">
+
+ <header>
+
+ <h1 class="entry-title">RubyMotion で簡単な iOS アプリを作ってみよう</h1>
+
+
+ <p class="meta">
+
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-05-03T00:01:00+09:00" pubdate data-updated="true">May 3<span>rd</span>, 2012</time>
+
+ | <a href="#disqus_thread">Comments</a>
+
+ </p>
+
+ </header>
+
+
+<div class="entry-content"><p>今回は、RubyMotion で簡単なアプリを作ってみます。ここでは簡単な「StopWatch」アプリケーションを作成し、RubyMotion でどのように iOS アプリを作成するのか説明したいと思います。</p>
+
+<p>StopWatch アプリの簡単な仕様は、</p>
+
+<ul>
+<li>start ボタン、stop ボタンとタイマーの値を表示するラベルを持っています。</li>
+<li>start ボタンが押されると、タイマーがスタートします。</li>
+<li>stop ボタンが押されると、タイマーを停止します。</li>
+<li>タイマーが動作中の値を 0.1 秒刻みでラベルに表示します。</li>
+</ul>
+
+
+<p>です。</p>
+
+<!-- more -->
+
+
+<h2>新規アプリを作成する</h2>
+
+<p>RubyMotion をインストールしたときに、<code>/usr/bin/motion</code> というコマンドがインストールされます。このコマンドを使用して、新規アプリのひな形を作成します。Terminal で次のようにコマンドを実行するとひな形が用意されます。</p>
+
+<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+</pre></td><td class='code'><pre><code class=''><span class='line'>$ motion create StopWatch
+</span><span class='line'> Create StopWatch
+</span><span class='line'> Create StopWatch/.gitignore
+</span><span class='line'> Create StopWatch/Rakefile
+</span><span class='line'> Create StopWatch/app
+</span><span class='line'> Create StopWatch/app/app_delegate.rb
+</span><span class='line'> Create StopWatch/resources
+</span><span class='line'> Create StopWatch/spec
+</span><span class='line'> Create StopWatch/spec/main_spec.rb</span></code></pre></td></tr></table></div></figure>
+
+
+<ul>
+<li>Rakefile: アプリ名などの設定に利用します。</li>
+<li>app: アプリを実装するファイルを置くためのディレクトリです。</li>
+<li>resources: 音声や画像などのリソースを置くためのディレクトリです。</li>
+<li>spec: アプリのテストケースを記述したファイルを置くためのディレクトリです。</li>
+</ul>
+
+
+<p>Rakefile で設定できる内容などについては、<a href="http://www.rubymotion.com/developer-center/guides/project-management">Project Management</a> に詳しく書かれていますので、目を通されておくと良いでしょう。</p>
+
+<p><code>motion</code> コマンドの簡単な使い方は <code>motion -h</code> で確認できます。</p>
+
+<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+</pre></td><td class='code'><pre><code class=''><span class='line'>$ motion -h
+</span><span class='line'>Usage:
+</span><span class='line'> motion [-h, --help]
+</span><span class='line'> motion [-v, --version]
+</span><span class='line'> motion &lt;command&gt; [&lt;args...&gt;]
+</span><span class='line'>
+</span><span class='line'>Commands:
+</span><span class='line'> create Create a new project
+</span><span class='line'> activate Activate the software license
+</span><span class='line'> update Update the software
+</span><span class='line'> support Create a support ticket</span></code></pre></td></tr></table></div></figure>
+
+
+<h2>アプリを実装する</h2>
+
+<p>さっそくアプリを実装していきましょう。app/app_delegate.rb をエディタで開いてみます。</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">AppDelegate</span>
+</span><span class='line'> <span class="k">def</span> <span class="nf">application</span><span class="p">(</span><span class="n">application</span><span class="p">,</span> <span class="n">didFinishLaunchingWithOptions</span><span class="ss">:launchOptions</span><span class="p">)</span>
+</span><span class='line'> <span class="kp">true</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'><span class="k">end</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>このファイルに、<a href="http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIKit_Framework/_index.html">UIKit Framework リファレンス</a> を参考に UI 部品を配置するためのコードや、アクションを記述していきます。</p>
+
+<h3>1. UIWindow を配置する</h3>
+
+<p>UIWindow のオブジェクトがないと何もできないといっても良いくらい重要なものです。まず、UIWindow のオブジェクトを用意します。</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">AppDelegate</span>
+</span><span class='line'> <span class="k">def</span> <span class="nf">application</span><span class="p">(</span><span class="n">application</span><span class="p">,</span> <span class="n">didFinishLaunchingWithOptions</span><span class="ss">:launchOptions</span><span class="p">)</span>
+</span><span class='line'> <span class="vi">@window</span> <span class="o">=</span> <span class="no">UIWindow</span><span class="o">.</span><span class="n">alloc</span><span class="o">.</span><span class="n">initWithFrame</span><span class="p">(</span><span class="no">UIScreen</span><span class="o">.</span><span class="n">mainScreen</span><span class="o">.</span><span class="n">bounds</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'> <span class="c1"># UIViewController を継承した StopWatchViewController をルートコントローラーに設定</span>
+</span><span class='line'> <span class="vi">@window</span><span class="o">.</span><span class="n">rootViewController</span> <span class="o">=</span> <span class="no">StopWatchViewController</span><span class="o">.</span><span class="n">alloc</span><span class="o">.</span><span class="n">init</span>
+</span><span class='line'>
+</span><span class='line'> <span class="vi">@window</span><span class="o">.</span><span class="n">makeKeyAndVisible</span>
+</span><span class='line'> <span class="kp">true</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'><span class="k">end</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>UIViewController を継承した StopWatchViewController をルートコントローラーに設定しています。
+UIViewController は一画面分のコンテンツを管理したり、表示するための基本な機能を提供してくれます。</p>
+
+<h3>2. StopWatchViewController を用意する</h3>
+
+<p>StopWatchViewController を以下のように用意します。UIViewController を継承し、<code>viewDidLoad</code> メソッドを用意しておけば良いでしょう。初期化が終わり画面が表示される段階になると <code>viewDidLoad</code> メソッドが呼び出されるので、このメソッドで UI の配置を行います。</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">StopWatchViewController</span> <span class="o">&lt;</span> <span class="no">UIViewController</span>
+</span><span class='line'> <span class="k">def</span> <span class="nf">viewDidLoad</span>
+</span><span class='line'> <span class="k">end</span>
+</span><span class='line'><span class="k">end</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p><code>viewDidLoad</code> メソッドに、UI 部品を配置するコードを記述していきます。UI 部品の配置は、UIView に対して行います。</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># UIView を取得</span>
+</span><span class='line'><span class="n">view</span> <span class="o">=</span> <span class="nb">self</span><span class="o">.</span><span class="n">view</span>
+</span><span class='line'><span class="c1"># 背景色を設定</span>
+</span><span class='line'><span class="n">view</span><span class="o">.</span><span class="n">backgroundColor</span> <span class="o">=</span> <span class="no">UIColor</span><span class="o">.</span><span class="n">whiteColor</span>
+</span><span class='line'>
+</span><span class='line'><span class="c1"># 画面のサイズ</span>
+</span><span class='line'><span class="n">frame</span> <span class="o">=</span> <span class="n">view</span><span class="o">.</span><span class="n">bounds</span>
+</span><span class='line'><span class="n">height</span> <span class="o">=</span> <span class="n">frame</span><span class="o">.</span><span class="n">size</span><span class="o">.</span><span class="n">height</span>
+</span><span class='line'><span class="n">width</span> <span class="o">=</span> <span class="n">frame</span><span class="o">.</span><span class="n">size</span><span class="o">.</span><span class="n">width</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h4>UI 部品の配置</h4>
+
+<p>上記のように UIView を取得したあと、UI 部品の設定などを行い <code>addSubview</code> を実行すると UI 部品が配置されます。それでは、start ボタン、stop ボタンとラベルを配置してみましょう。</p>
+
+<h5>start ボタンを配置</h5>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># start ボタン</span>
+</span><span class='line'><span class="vi">@start</span> <span class="o">=</span> <span class="no">UIButton</span><span class="o">.</span><span class="n">buttonWithType</span><span class="p">(</span><span class="no">UIButtonTypeRoundedRect</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@start</span><span class="o">.</span><span class="n">frame</span> <span class="o">=</span> <span class="no">CGRectMake</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">300</span><span class="p">,</span> <span class="n">width</span><span class="o">/</span><span class="mi">2</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@start</span><span class="o">.</span><span class="n">setTitle</span><span class="p">(</span><span class="s2">&quot;start&quot;</span><span class="p">,</span> <span class="n">forState</span><span class="p">:</span> <span class="no">UIControlStateNormal</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'><span class="c1"># start ボタンがクリックされたとき、startTimer アクションメソッドが呼ばれるようにする</span>
+</span><span class='line'><span class="vi">@start</span><span class="o">.</span><span class="n">addTarget</span><span class="p">(</span><span class="nb">self</span><span class="p">,</span>
+</span><span class='line'> <span class="n">action</span><span class="p">:</span> <span class="s2">&quot;startTimer:&quot;</span><span class="p">,</span>
+</span><span class='line'> <span class="n">forControlEvents</span><span class="p">:</span> <span class="no">UIControlEventTouchUpInside</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'><span class="n">view</span><span class="o">.</span><span class="n">addSubview</span><span class="p">(</span><span class="vi">@start</span><span class="p">)</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h5>stop ボタンを配置</h5>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># stop ボタン</span>
+</span><span class='line'><span class="vi">@stop</span> <span class="o">=</span> <span class="no">UIButton</span><span class="o">.</span><span class="n">buttonWithType</span><span class="p">(</span><span class="no">UIButtonTypeRoundedRect</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@stop</span><span class="o">.</span><span class="n">frame</span> <span class="o">=</span> <span class="no">CGRectMake</span><span class="p">(</span><span class="n">width</span><span class="o">/</span><span class="mi">2</span> <span class="o">+</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">300</span><span class="p">,</span> <span class="n">width</span><span class="o">/</span><span class="mi">2</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@stop</span><span class="o">.</span><span class="n">setTitle</span><span class="p">(</span><span class="s2">&quot;stop&quot;</span><span class="p">,</span> <span class="n">forState</span><span class="p">:</span> <span class="no">UIControlStateNormal</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'><span class="c1"># stop ボタンがクリックされたとき、stopTimer アクションメソッドが呼ばれるようにする</span>
+</span><span class='line'><span class="vi">@stop</span><span class="o">.</span><span class="n">addTarget</span><span class="p">(</span><span class="nb">self</span><span class="p">,</span>
+</span><span class='line'> <span class="n">action</span><span class="p">:</span> <span class="s2">&quot;stopTimer:&quot;</span><span class="p">,</span>
+</span><span class='line'> <span class="n">forControlEvents</span><span class="p">:</span> <span class="no">UIControlEventTouchUpInside</span><span class="p">)</span>
+</span><span class='line'>
+</span><span class='line'><span class="n">view</span><span class="o">.</span><span class="n">addSubview</span><span class="p">(</span><span class="vi">@stop</span><span class="p">)</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h5>ラベルを配置</h5>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1"># タイマーの値を表示するラベル</span>
+</span><span class='line'><span class="vi">@label</span> <span class="o">=</span> <span class="no">UILabel</span><span class="o">.</span><span class="n">alloc</span><span class="o">.</span><span class="n">init</span>
+</span><span class='line'><span class="vi">@label</span><span class="o">.</span><span class="n">frame</span> <span class="o">=</span> <span class="no">CGRectMake</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="n">width</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@label</span><span class="o">.</span><span class="n">font</span> <span class="o">=</span> <span class="no">UIFont</span><span class="o">.</span><span class="n">fontWithName</span><span class="p">(</span><span class="s2">&quot;AppleGothic&quot;</span><span class="p">,</span><span class="n">size</span><span class="p">:</span><span class="mi">24</span><span class="p">)</span>
+</span><span class='line'><span class="vi">@label</span><span class="o">.</span><span class="n">textAlignment</span> <span class="o">=</span> <span class="no">UITextAlignmentCenter</span>
+</span><span class='line'><span class="n">view</span><span class="o">.</span><span class="n">addSubview</span><span class="p">(</span><span class="vi">@label</span><span class="p">)</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h4>アクションメソッドを実装</h4>
+
+<p>start ボタンがクリックされたときには <code>startTimer</code> アクションメソッドが、stop ボタンがクリックされたときには <code>stopTimer</code> アクションメソッドが呼ばれるようにしましたので、それらのアクションメソッドを用意します。</p>
+
+<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>