tag:blogger.com,1999:blog-2762883122911278402024-03-13T20:05:55.131+09:00y.okano blogUnknownnoreply@blogger.comBlogger11125tag:blogger.com,1999:blog-276288312291127840.post-8041007534829123422013-06-20T18:00:00.000+09:002013-06-20T18:00:02.839+09:00Use multiline strings with Go For decelerate the string that contain line breaks, you close back quart.<br />
If you use the double quart, it arise error.<br />
<pre class="prettyprint">// string of multiline
var str string
str = `Welcome!
Multi lines message!
Good job!`
</pre>
<br />
<br />
You can put the back quart by Shift + @ if you use Mac.<br />
<div>
<br /></div>
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-276288312291127840.post-52673196047435587972013-06-19T18:00:00.000+09:002013-06-19T18:00:05.215+09:00Go can't looks static files on GAE My work was disrupted by the problem that can't read files in static_dir from Go scripts.<br />
<br />
Be careful to below points.<br />
<ul>
<li>Set "static" to files that are readed by web browsers from a user.</li>
<li>Must not set "static" to files that are read by go scripts.</li>
</ul>
Files in static_dir can not read by go scripts. these read by web browsers.<br />
<br />
<blockquote class="tr_bq">
by <a href="https://developers.google.com/appengine/docs/go/config/appconfig#Static_File_Handlers">G</a>oogle App Engine documents<br />
For efficiency, App Engine stores and serves static files separately from application files. Static files are not available in the application's file system. If you have data files that need to be read by the application code, the data files must be application files, and must not be matched by a static file pattern.</blockquote>
<br />
Therefore, must not put html files to static_dir if you will output a html file dynamically by use of template package.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-276288312291127840.post-88446616864744326472013-06-18T18:00:00.000+09:002013-06-18T18:00:06.756+09:00Color Go source codes in Xcode 4.xBy default, Xcode does not syntax hightlight.<br />
But, we can configure in the following way.<br />
<br />
<span style="color: #0b5394; font-size: large;">HOW TO</span><br />
<div>
<ol>
<li>Download the shell script</li>
<li>Config the path</li>
<li>Execute the shell script</li>
<li>Check</li>
</ol>
<div>
<br /></div>
<span style="color: #0b5394; font-size: large;">
1. Download the shell script</span><br />
<div>
<br />
The script that empower Xcode syntax highlighting is distributed.<br />
<br /></div>
</div>
<div>
Download <b><span style="color: red;">go4xcode.sh</span></b> from here.</div>
<div>
<div>
<a href="http://golang.org/misc/xcode/4/"><span style="font-family: inherit;">http://golang.org/misc/xcode/4/</span></a></div>
<div>
</div>
<br />
There is no need to download <b>go.sclangspec</b>, because it is contained in SDK of Google App Engine.<br />
By default, it is here.</div>
<div>
<pre class="prettyprint">/Applications/google_appengine/goroot/misc/xcode/4/go.xclangspec</pre>
</div>
<div>
<br />
<br /></div>
<span style="color: #0b5394; font-size: large;">
2. Config the path</span><br />
<div>
<br />
The script uses the environment variable <span style="color: red;"><b>$GOROOT</b></span>.<br />
Check whether it is configured correct path.<br />
</div>
<pre class="prettyprint">$ su
$ echo $GOROOT
</pre>
<div>
If displayed path to goroot, there is no problem.<br />
If else, set the path to goroot.</div>
<div>
<pre class="prettyprint">$ export GOROOT=/Applications/google_appengine/goroot/</pre>
</div>
<div>
<br />
<br /></div>
<span style="color: #0b5394; font-size: large;">
3. Execute the shell script</span><br />
<div>
<br />
Let's execute the shell script.</div>
<pre class="prettyprint">$ sh go4xcode.sh
Backing up plugindata file.
Adding Go language specification entry.
Duplicate Entry Was Skipped: Xcode.SourceCodeLanguage.Go
Installing Go language specification file for Xcode.
Run 'sudo rm -rf /var/folders/*' and restart Xcode to update change immediately.
Syntax coloring must be manually selected from the Editor - Syntax Coloring menu in Xcode. </pre>
<div>
<div style="font-family: Arial;">
<br /></div>
Remove trashes according to message.</div>
<pre class="prettyprint">$ rm -rf /var/folders/*
</pre>
<div style="font-family: Arial;">
<br />
it's complete.</div>
<div style="font-family: Arial;">
<br />
<br /></div>
<div style="font-family: Arial;">
<span style="color: #0b5394; font-size: large;">
4. Check</span><br />
<div style="font-family: Times;">
<br />
Launch the Xcode.</div>
<div style="font-family: Times;">
If installing is succeed, there is a new menu<b><span style="color: red;"> Editor -> Syntax Coloring -> Go</span></b>.</div>
<div style="font-family: Times;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDIDYcNJGKmuzTaN2QDBWYVyG7TBc5E0zKPGjqXXemrMqbdu_YASRc25VqT0hzec7ETeOW6fevvzSDZFDMD00lwSVu0ZUVJqerxqWWYG1GGQ3py8IOg0Zp80nwW2qXx0TdbcUeGUK-v0/s1600/xcode_ss.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVDIDYcNJGKmuzTaN2QDBWYVyG7TBc5E0zKPGjqXXemrMqbdu_YASRc25VqT0hzec7ETeOW6fevvzSDZFDMD00lwSVu0ZUVJqerxqWWYG1GGQ3py8IOg0Zp80nwW2qXx0TdbcUeGUK-v0/s320/xcode_ss.png" width="311" /></a></div>
<br /></div>
<div style="font-family: Times;">
<br />
When click this, Xcode syntax highlighting source code.<br />
But this is not configure automatic.<br />
<br /></div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-276288312291127840.post-39932472928634572842013-04-21T18:00:00.000+09:002013-04-21T18:00:00.723+09:00Apply the MIT License to softwareThis is a method to publish software that applied the MIT License.<br />
In order to declare the software license,<br />
<br />
<ul>
<li>Describe license in the file header comment</li>
<li>Include license text as text file</li>
<li>Display license text on the installer</li>
</ul>
<br />
And so on.<br />
<br />
An easy way is to include text file.<br />
Template of the MIT license is open to the public at the following websites.<br />
<br />
Open Source Initiative<br />
<a href="http://opensource.org/licenses/mit-license.php">http://opensource.org/licenses/mit-license.php</a><br />
<br />
Japanese translation by Open Source Group Japan<br />
<a href="http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license">http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license</a><br />
<br />
Copy the template and put your name in <copyright holders="">, and put also development year in <year>. </year></copyright><br />
Save the file as "LICENSE.txt" and distribute software, and this method is complete.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-276288312291127840.post-67439017865947793662013-04-20T20:00:00.000+09:002013-04-20T20:00:12.446+09:00Loop playback BGM with enchant.jsThis is how to loop playback the BGM with <a href="http://enchantjs.com/">enchant.js</a>.<br />
<br />
<pre class="prettyprint">// Loop playback the bgm
game.assets['bgm.mp3'].play();
game.assets['bgm.mp3'].src.loop = true;
</pre>
<br />
Be careful because loop parameter <b>must</b> set after play.<br />
<br />
<pre class="prettyprint">// This case not loop playback the bgm
game.assets['bgm.mp3'].src.loop = true;
game.assets['bgm.mp3'].play();
</pre>
<div>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-276288312291127840.post-25882457729824259832013-04-19T18:00:00.000+09:002013-04-19T18:00:08.261+09:00Trim images with Preview of Mountain LionThis method is convenient to removing blank spaces from images.<br />
<br />
Open the image with Preview.<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="http://1.bp.blogspot.com/-9mmVnPmCMmo/URpKPYIu7JI/AAAAAAAAAFs/F-lqqvUVYmE/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+22.56.48.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="267" src="http://1.bp.blogspot.com/-9mmVnPmCMmo/URpKPYIu7JI/AAAAAAAAAFs/F-lqqvUVYmE/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+22.56.48.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click the pencil icon to show tools.</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://2.bp.blogspot.com/-jwRhtemLopY/URpK07Srp7I/AAAAAAAAAF0/2xP0juuHyGs/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+22.59.20.png" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" height="47" src="http://2.bp.blogspot.com/-jwRhtemLopY/URpK07Srp7I/AAAAAAAAAF0/2xP0juuHyGs/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+22.59.20.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Click the magical stick icon (instant alpha). If the icon is invisibility, widen window.</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://4.bp.blogspot.com/-ZbxFE_Dibw8/URpLd3HF2nI/AAAAAAAAAF8/xxd3YNsVM_g/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.02.17.png" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://4.bp.blogspot.com/-ZbxFE_Dibw8/URpLd3HF2nI/AAAAAAAAAF8/xxd3YNsVM_g/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.02.17.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Drag area that you want remove, and make selected.</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://4.bp.blogspot.com/-ploBhWebl-g/URpLrFjo_-I/AAAAAAAAAGE/kdsvgQzneF0/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.02.59.png" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://4.bp.blogspot.com/-ploBhWebl-g/URpLrFjo_-I/AAAAAAAAAGE/kdsvgQzneF0/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.02.59.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Press the Delete key and remove the area.</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://3.bp.blogspot.com/-jbbnv24yr6s/URpMdp6poOI/AAAAAAAAAGM/xmPwJLgee3g/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.06.29.png" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="http://3.bp.blogspot.com/-jbbnv24yr6s/URpMdp6poOI/AAAAAAAAAGM/xmPwJLgee3g/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.06.29.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can invert the selected area by <b>command + shift + I</b>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Select the blank space with magical stick.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-u3VQ5DSLRRA/URpNGrzrxJI/AAAAAAAAAGU/pKiY7yweZSk/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.09.05.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="266" src="http://4.bp.blogspot.com/-u3VQ5DSLRRA/URpNGrzrxJI/AAAAAAAAAGU/pKiY7yweZSk/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.09.05.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Press <b>command + shift + I</b> and invert the area.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ITSdCzlFnJ8/URpNUWmToiI/AAAAAAAAAGc/EexeTfFHuaw/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.09.15.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="266" src="http://2.bp.blogspot.com/-ITSdCzlFnJ8/URpNUWmToiI/AAAAAAAAAGc/EexeTfFHuaw/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-02-12+23.09.15.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
You can remove the area that not selected by <b>command + K</b>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-276288312291127840.post-61208464703009780392013-03-13T23:36:00.004+09:002013-03-13T23:36:50.726+09:00Line-height is ignored on Canvas<br />
You can't set line-height on HTML5 Canvas. You can set the font of canvas in the same manner as CSS, but number of line-height is ignored.<br />
<br />
I bump into a this problem.<br />
<br />
<div style="text-align: center;">
<a href="http://3.bp.blogspot.com/-7J_v7qqOJOA/URjcufqEGaI/AAAAAAAAAFU/U8uWZuPe3Nc/s1600/canvas_bad.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="http://3.bp.blogspot.com/-7J_v7qqOJOA/URjcufqEGaI/AAAAAAAAAFU/U8uWZuPe3Nc/s320/canvas_bad.png" width="320" /></a></div>
<pre class="prettyprint">// output statements are skipped.
var message = 'Where is a pig! I am very hungry... Give me a pig!';
var label = new Label();
label.color = 'black';
label.text = message;
// both font-size and line-height are 75px, but those are ignored.
label.font = '75px/75px fantasy';
game.currentScene.addChild(message);
</pre>
<br />
<br />
On Canvas API Specification, line-height number is automatically set 'normal'.<br />
I done deal in such a way as to using array by hand.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-qYIdbvG4QVw/URjdXNzdAAI/AAAAAAAAAFc/hyJTayxjkY8/s1600/canvas_good.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="261" src="http://1.bp.blogspot.com/-qYIdbvG4QVw/URjdXNzdAAI/AAAAAAAAAFc/hyJTayxjkY8/s320/canvas_good.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<pre class="prettyprint">var messages = [
'Where is a pig!',
'I am very hungry...',
'Give me a pig!'
];
for(var i = 0; i < messages.length; i++) {
var label = new Label();
label.color = 'black';
label.text = message;
label.font = '75px fantasy';
label.y = 75 * i; // 手動で高さを調整
game.currentScene.addChild(message);
}
</pre>
<br />
Reference<br />
- W3C HTML Canvas 2D Context, Level 2 Nightly<span style="color: #005a9c; font-family: sans-serif; font-size: 27px; text-align: left;"> </span><br />
<span style="color: #005a9c; text-align: left;"><span style="font-family: inherit;"><a href="http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#text-styles">http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#text-styles</a></span></span><br />
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-276288312291127840.post-68467952987124991172013-02-15T19:54:00.001+09:002013-02-15T19:56:15.366+09:00Minesweeper Gyakushiki I published a new browser game, "<a href="http://gyakushiki.appspot.com/">Minesweeper Gyakushiki</a>". Gyakushiki is a japanese word that meanes "Reverse". Bombs are shown on display from the start of game. Your object is to open all number panels. This game is compatible with PC and SmartPhone. And it's MIT License.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLxsv-xwEGqrtlbPzpsb2PTBflgWnttqqww-lfi-WzGoPKmoqieVQXLzB8IBBjqUC0oFOyRHtgX_zPrf84OomgoNUTdHXMuy1PmNSGVxlRBr9vsY2gwd8pklGmhdoLtQmub8LO_enAmk/s1600/mine_ss.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLxsv-xwEGqrtlbPzpsb2PTBflgWnttqqww-lfi-WzGoPKmoqieVQXLzB8IBBjqUC0oFOyRHtgX_zPrf84OomgoNUTdHXMuy1PmNSGVxlRBr9vsY2gwd8pklGmhdoLtQmub8LO_enAmk/s320/mine_ss.png" width="320" /></a></div>
<br />
Source codes are opend on <a href="http://yokano.github.com/mine/">github page</a>. The game is powered by <a href="http://enchantjs.com/">enchant.js</a> that is JavaScript library for HTML5 browser games from japan.<br />
<br />Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-276288312291127840.post-7992290302093568282012-12-21T19:01:00.002+09:002013-02-15T19:54:59.596+09:00OkaTimer is released<br />
<div style="border: 0px; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 15px; padding: 0px;">
Application Page: <a href="http://yokano.github.com/okatimer/">http://yokano.github.com/okatimer/</a></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/2nSq2KTAhR4?feature=player_embedded' frameborder='0'></iframe></div>
<div style="border: 0px; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 15px; padding: 0px;">
<br /></div>
<div style="border: 0px; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 15px; padding: 0px;">
OkaTimer is timer application for doing your task more quickly.<br />
It display the target time and elapsed time from start.<br />
You can use this application by either desktop or smartphone.</div>
<h2 style="-webkit-font-smoothing: antialiased; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-width: 0px 0px 1px; cursor: text; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 24px; margin: 20px 0px 10px; padding: 0px; position: relative;">
<a class="anchor" href="https://github.com/yokano/okatimer#usage" name="usage" style="border: 0px; bottom: 0px; color: #4183c4; cursor: pointer; display: block; left: 0px; margin: 0px 0px 0px -30px; padding: 0px 0px 0px 30px; position: absolute; text-decoration: none; top: 0px;"></a>Usage</h2>
<ol style="border: 0px; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; margin: 15px 0px; padding: 0px 0px 0px 30px;">
<li style="border: 0px; margin: 0px; padding: 0px;"><div style="border: 0px; margin-bottom: 15px; padding: 0px;">
Open this URL<br />
<a href="http://okatimer.appspot.com/" style="border: 0px; color: #4183c4; margin: 0px; padding: 0px; text-decoration: none;">http://okatimer.appspot.com/</a></div>
</li>
<li style="border: 0px; margin: 0px; padding: 0px;"><div style="border: 0px; margin-bottom: 15px; padding: 0px;">
After input to task name and choose target times, push start button.</div>
</li>
<li style="border: 0px; margin: 0px; padding: 0px;"><div style="border: 0px; margin-bottom: 15px; padding: 0px;">
You can switch RUN and Stop by toggle switch.</div>
</li>
<li style="border: 0px; margin: 0px; padding: 0px;"><div style="border: 0px; margin-bottom: 15px; padding: 0px;">
Finish your task, check the elapsed time.</div>
</li>
<li style="border: 0px; margin: 0px; padding: 0px;"><div style="border: 0px; margin-bottom: 15px; padding: 0px;">
If you want next task, push back button and input next one.</div>
</li>
</ol>
<h2 style="-webkit-font-smoothing: antialiased; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-width: 0px 0px 1px; cursor: text; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 24px; margin: 20px 0px 10px; padding: 0px; position: relative;">
<a class="anchor" href="https://github.com/yokano/okatimer#notice" name="notice" style="border: 0px; bottom: 0px; color: #4183c4; cursor: pointer; display: block; left: 0px; margin: 0px 0px 0px -30px; padding: 0px 0px 0px 30px; position: absolute; text-decoration: none; top: 0px;"></a>Notice</h2>
<ul style="border: 0px; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; margin: 15px 0px; padding: 0px 0px 0px 30px;">
<li style="border: 0px; margin: 0px; padding: 0px;">This application can runs one task only.</li>
<li style="border: 0px; margin: 0px; padding: 0px;">Target time is limited from "0h 5min" to "24h 55min".</li>
<li style="border: 0px; margin: 0px; padding: 0px;">No alert when the smartphone is slept.</li>
</ul>
<h2 style="-webkit-font-smoothing: antialiased; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-width: 0px 0px 1px; cursor: text; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 24px; margin: 20px 0px 10px; padding: 0px; position: relative;">
<a class="anchor" href="https://github.com/yokano/okatimer#contact" name="contact" style="border: 0px; bottom: 0px; color: #4183c4; cursor: pointer; display: block; left: 0px; margin: 0px 0px 0px -30px; padding: 0px 0px 0px 30px; position: absolute; text-decoration: none; top: 0px;"></a>Contact</h2>
<div style="border: 0px; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px; padding: 0px;">
<a href="mailto:yuta.okano@gmail.com" style="border: 0px; color: #4183c4; margin: 0px; padding: 0px; text-decoration: none;">yuta.okano@gmail.com</a></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-276288312291127840.post-53440306423702125602012-12-20T17:21:00.001+09:002013-02-15T19:54:37.356+09:00Janken Shooting is released<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/bB8Rd3gD6U0?feature=player_embedded' frameborder='0'></iframe></div>
<br />
I released Janken Shooting on GitHub.<br />
<a href="http://yokano.github.com/JankenShooting/" style="font-family: Arial;">http://yokano.github.com/JankenShooting/</a><br />
<br />
It is browser game for Google Chrome written by Javascript.<br />
And it working on <a href="http://appengine.google.com/">Google App Engine</a>.<br />
<br />
You can see source codes form my <a href="https://github.com/yokano/JankenShooting">GitHub page</a>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-276288312291127840.post-79860844891110417552012-11-30T04:15:00.001+09:002013-02-04T21:10:22.110+09:00How to hide the keyboard when user taps the return key When user taps UITextField object, then soft keyboard appears from bottom. But there is no way to hide the keyboard by default. Let's make hide the keyboard when user taps the return key.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5A74s31d61N-uMeIt3uI27oEI4u2bEkdOmQmMXN7cyhg049hshC3S8wgiTF8B-umB2Qj9r2s1Dpk8D05ZWzLbmPIoEuZsSY9sBnMzMJM_o1YUpQzctwtwsIHQOxi9eJt2Wlk2QUxSAU/s320/20121129_213144.jpg" width="240" /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpu4VSHqMhDCHgdfpR2R3gDlXukZUGW4X_O_UK0o6uRLT7aQDq1rn3GqvoteI3SoZsOP5_g_L8Q0UkCe1AwQ1jVJAK17d3iOeWATteSN6s0PaHc99RIL3HuaFWgAaIHpJ1NdA42jiV5Ls/s1600/20121129_213340.jpg" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: right;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpu4VSHqMhDCHgdfpR2R3gDlXukZUGW4X_O_UK0o6uRLT7aQDq1rn3GqvoteI3SoZsOP5_g_L8Q0UkCe1AwQ1jVJAK17d3iOeWATteSN6s0PaHc99RIL3HuaFWgAaIHpJ1NdA42jiV5Ls/s320/20121129_213340.jpg" width="240" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We can be achieved in 4 steps.</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ol>
<li>Set ViewController as delegate of UITextField</li>
<li>Adopt UITextFieldDelegate Protocol</li>
<li>Get a message of return key from UITextField</li>
<li>Hide the keyboard</li>
</ol>
<h2>
<span style="color: #274e13;">1. Set ViewController as delegate of UITextField</span></h2>
<div>
UITextField object sends a message for its delegate when user taps the return key. First, we set VewController as the delegate. </div>
<div>
<br /></div>
<div>
Please open Xcode, and click a storyboard file. And drag from UITextField to ViewController while holding down the control key. There is a blue line on screen while you holding down the control key.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0iOAKEf17UOmAeNr6OIIH-o3HP0EJjgwlh43nhDCkql7QZdSmfQEfaUVsgqPLCErSwQXf3xZrlCCcG_t6Rd_7yf_91uEM0CvZ58AUn4l_FcrQp_82V_c-q3x1jh5OGt-VxD9hiIrPYc/s1600/drag_to_viewcontroller.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0iOAKEf17UOmAeNr6OIIH-o3HP0EJjgwlh43nhDCkql7QZdSmfQEfaUVsgqPLCErSwQXf3xZrlCCcG_t6Rd_7yf_91uEM0CvZ58AUn4l_FcrQp_82V_c-q3x1jh5OGt-VxD9hiIrPYc/s320/drag_to_viewcontroller.jpg" width="196" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Click "delegate" from pop up menu.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Zz0OxXxkLQhLAYfHi_bjqnCakSMk_71TvCW2MbfoY_3JwUUh0pTFW8mQhD9Jkhor1SAMCTW2t14OF3buNQpjoEK3C4KI1RmJwaTJnJnkCmBGF1dHGJLiprTZChMXzGt43oNj4n11QnU/s1600/select_delegate.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Zz0OxXxkLQhLAYfHi_bjqnCakSMk_71TvCW2MbfoY_3JwUUh0pTFW8mQhD9Jkhor1SAMCTW2t14OF3buNQpjoEK3C4KI1RmJwaTJnJnkCmBGF1dHGJLiprTZChMXzGt43oNj4n11QnU/s320/select_delegate.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
OK. It's done. You can look see the connection of delegate on Utilities pane.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhQXWPCTQtskOlvl3wBtV7wnNEeKcak_XAKtf1VRX_njIbZqV_GvX_Uk_YVNBszxx_3GYy-SHhMIoKgs4PwXhuRYnKpV0l76dKUGksKs6JeRuvXmA4dROWIU8ZrOdynhQyNEyiuDiv1c/s1600/check_delegate_connection.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhQXWPCTQtskOlvl3wBtV7wnNEeKcak_XAKtf1VRX_njIbZqV_GvX_Uk_YVNBszxx_3GYy-SHhMIoKgs4PwXhuRYnKpV0l76dKUGksKs6JeRuvXmA4dROWIU8ZrOdynhQyNEyiuDiv1c/s320/check_delegate_connection.jpg" width="320" /></a></div>
<div>
<br />
<br />
<h2>
<span style="color: #274e13;">2. Adopt UITextFieldDelegate Protocol</span></h2>
</div>
<div>
UITextField and its delegate communicate each other with <i>UITextFieldDelegate Protocol</i>. Adopt UITextFieldDelegate protocol to ViewController by writing following code.<br />
<pre class="prettyprint">#import <UIKit/UIKit.h>
@interface TaskViewController : UIViewController <UITextFieldDelegate>
@end
</pre>
UIViewController declared that is adopting UITextFieldDelegateProtocol itself.<br />
<br /></div>
<div>
<h2>
<span style="color: #274e13;">3. Get a message of return key from UITextField</span></h2>
</div>
<div>
UITextField sends <i>"textfieldShouldReturn:"</i> message to its delegate when user taps the return key. Now, implement to this method to confirmation whether a message has actually arrived. Edit ViewController as below.<br />
<br />
xxxxViewController.h<br />
<pre class="prettyprint">#import <UIKit/UIKit.h>
@interface TaskViewController : UIViewController <UITextFieldDelegate><uitextfielddelegate>
// ADD HERE
- (BOOL)textFieldShouldReturn:(UITextField *)textField;
@end
</uitextfielddelegate></pre>
<br />
xxxxViewController.m</div>
<pre class="prettyprint">#import "TaskViewController.h"
@interface TaskViewController ()
@end
@implementation TaskViewController
// ADD HERE
-(BOOL)textFieldShouldReturn:(UITextField *)textField {
NSLog(@"tapped return key!");
return YES;
}
- (void)viewDidLoad
{
[super viewDidLoad];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
@end</pre>
<div>
Run this code, and tap UITextField. When you tap the return key, log is output in debug area.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5JW89VeOQ_wOmYlflN_MPi0mowRXociLMzM-IsV-ir-6KkxGE6x-OA7HIeHKi2xnSXUAHFA-91kanSCv7Beshyphenhyphenwla3uaInAD9_wYGzI87_U1mtfDEozQKir5ghAWDhYqhXf2HkdBP7CY/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-11-30+3.54.37.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5JW89VeOQ_wOmYlflN_MPi0mowRXociLMzM-IsV-ir-6KkxGE6x-OA7HIeHKi2xnSXUAHFA-91kanSCv7Beshyphenhyphenwla3uaInAD9_wYGzI87_U1mtfDEozQKir5ghAWDhYqhXf2HkdBP7CY/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-11-30+3.54.37.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<h2>
<span style="color: #274e13;">4. Hide the keyboard</span></h2>
</div>
<div>
Finally, add the process of hiding the keyboard. Edit textFieldShouldReturn: method as below.</div>
<pre class="prettyprint">-(BOOL)textFieldShouldReturn:(UITextField *)textField {
[textField resignFirstResponder];
return YES;
}
</pre>
<div style="font-family: Times; white-space: normal;">
If we want to hide the keyboard, send <i>resignFirstResponder:</i> message to the keyboard object.<br />
<br /></div>
<div style="font-family: Times; white-space: normal;">
</div>
<h2>
<span style="color: #274e13;">
References - iOS Developer Library</span></h2>
<ul>
<li><a href="http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UITextField_Class/Reference/UITextField.html">UITextField Class Reference</a></li>
<li><a href="http://developer.apple.com/library/ios/#documentation/uikit/reference/UITextFieldDelegate_Protocol/UITextFieldDelegate/UITextFieldDelegate.html">UITextFieldDelegate Protocol Reference</a></li>
</ul>
Unknownnoreply@blogger.com0