2014年1月15日水曜日

ChromeDevToolsのMobile emulationを触ってみた

GoogleChromeのDevToolsの機能でMobile emulationなるものが出来ていたのでちらっと確認したのでそのメモ。

以下に出来る事の抜粋を記載します。もっと出来る事がありそうですが、詳細はMobile emulationを確認下さい。

各種スマホのエミュレーション
ピンチイン、ピンチアウト、スワイプ操作が出来る
画面サイズ及びピクセル比の変更が可能
メディアタイプの切り替えが可能
User-Agentの変更も可能
現在地の変更が可能

参考サイト

GoogleDevelopersのChromeDevToolsのページ

Mobile emulation

HTML5Rocksでの紹介ページ

Chrome DevTools for Mobile: Screencast and Emulation

1.準備

2014年1月14日現在では通常のMacのGoogleChrome(v31)では確認できなかったのでGoogle Chrome Canaryをインストールします。

インストール後、Chromeを起動し、右上の3本線のボタンを押下後、Tools→DeveloperToolsを起動させます。

DeveloperToolsを起動後、DeveloperToolsの右上の歯車のアイコンを押下します。

GeneralのShow ‘Emulation’ view in console drawer.の欄のチェックを有効化させます。

その後、画面下部にEmulationタブが出現しているのが確認できます。もし、画面下部のタブが表示されない場合にはEscキーを押下して表示させてください。

2.エミュレーターを起動させる

Emulatorタブの画面左にある

Device
Screen
User Agent
Sensors

をクリックする事でミュレーターの詳細を設定する事が出来ます。

とりあえずGoogle Nexus4のエミュレーションを起動します。

EmulatorタブのDeviceを選択し、セレクトボックスからGoogle Nexus4を選択します。
Emulateボタンを押下します。

上記２ステップでChromeの画面が選択したスマホのエミュレーションを行う画面となります。

3.操作

PCのスクロールでスクロールできますが、タッチイベントのエミュレートも出来るのでクリックしながらスクロールする事でスワイプも可能です。

また、Shiftキーを押下しながらスクロールさせる事でピンチイン、ピンチアウトの操作も可能です。

なお、以下でタッチ操作のエミュレーションを無効化出来ます。

EmulatorタブのSensorsを選択し、Emulate touch screenのチェックを外します

3.画面サイズ及び縦横サイズを変える

EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
Resolutionの値を変更する事で画面サイズを変更できます。

縦と横の画面サイズを設定する真ん中にあるボタンを押下する事で縦横のサイズを逆にする事が出来ます。

4.ピクセル比を変える

ピクセル比を変更できます。これでMediaQueryでratioに関する記述を行った場合の確認も簡単に出来ます。

EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
Device pixel ratioの値を変更します。

例えば以下のようなコードを書きます。(dataURIは略)

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #image {
        background-repeat:no-repeat;background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
    }
}

上記の場合、ratioが2の場合にはid属性がimageの箇所に表示されますが、1に変更すると表示されなくなる事が確認出来ます。

5.メディアタイプの切り替え

EmulatorタブのScreenを選択し、CSS mediaにチェックを入れます
セレクトボックスから任意のmediaタイプを選択します。

こちらについては実際動作は未確認となっております。。。

6.UserAgentの変更

EmulatorタブのUser Agentを選択し、Spoof user agentにチェックを入れます。
セレクトボックスから任意の端末名を設定するかテキストボックスの値を直接書き換えます。

User Agent String.Comにアクセスすると適当に設定した値が表示されているのが確認出来ます。

7.現在地(緯度経度)の変更

現在地(緯度経度)のが変更が出来ます。

EmulatorタブのSensorsを選択し、Emulate geolocation coordinatesにチェックを入れます。
Lat、Lonにそれぞれ値を入れます。

上記の状態でGPSを取得するようなページに遷移します。 Geolocation Demoに遷移するとブラウザから現在地取得して良いかの確認が表示されるので許可すると東京タワーの場所に移動した事が確認できます。

また、測位に失敗した(navigator.geolocation.getCurrentPositionでエラー)とさせたい場合にはEmulate position unavailableにチェックを入れます。

8.その他

加速度の設定だったり、ViewPortの設定?などその他色々出来るようですが、今日はとりあえずここまで。時間があったら調べよう。。

2014年1月13日月曜日

HTML5プロフェッショナル認定試験を受験してみた

HTML5プロフェッショナル認定試験のレベル1を受験してきて一応合格できたので自分のやった学習方法とか色々メモします。

以下参考サイトです。

LPI-Japanの公式サイト HTML5 Professional Certificaiton　HTML5プロフェッショナル認定試験

HTML5認定試験策定で利用されている(?)wiki HTML5プロフェッショナル認定試験 (HTML5 Professional Certification)　試験開発Wikiサイト

1.HTML5プロフェッショナル認定試験とは?

以下ざっくり記載します。詳細は公式サイトを見てください。

LPI-Japanがやっている。
受験料金は15000円(税抜き)。
受験申し込みは基本的にいつでも受験出来る。実際の試験はピアソンのテストセンターに行って受験する。
受験の際にLPI-IDとピアソンのIDが必要となる。(どちらもWebからID作成可能)
Level1とLevel2があるが、2013年1月時点では受験できるのはLevel1のみ。Level2は現在策定中。
試験時間は90分で問題数は約60問。
約7割正解で合格。
認定の優位性の期限があって5年間らしい。

また、以下にLevel1の試験範囲を記述します。

Webの基本知識
CSS3
要素
レスポンシブWebデザイン
オフラインWebアプリケーション（概要とマニフェスト）

詳細は出題範囲（案）Detailed Objectivesを見てください。なお、それぞれに重要度があるので、勉強する際に確認しておくと良いと思われます。

また、上記の通り、Level1の場合、JavaScriptに関する詳細は範囲外です。(JSの読み込み方法とかは出てきますが)

2.やってみた勉強方法

上記を書く前に自分の状況を。

所謂フロントエンジニアではないのでゴリゴリHTML/CSS書いた経験はない。たまに書く時はググりながら何とか書けるレベル。
Webシステムの作成経験はあり。(主にサーバーサイド)
HTML5自体は興味あって勉強会や情報を仕入れたりは積極的にしている。つもり。

以下に実際に僕がやった勉強法などを記載します。

勉強期間は１ヶ月程度
勉強のベースは公式テストHTML5プロフェッショナル認定資格　レベル１　教科書を読みながら知らなかった事や詳細はググってもっと調べてみる。
挙動を確認する場合には実際にコード書いてみる。
飽きたときはHTML5クックブック読んだり。(本試験とは関係ない事も書いてあるけど面白い。)
これまた飽きた時はドットインストールのHTML,CSS,CSS3を見たり。

また、以下に学習する上で大切だと思うポイントを記載します。

自分の実力と試験範囲を把握する

受験する人のスキルでどれぐらいどこの箇所を学習すれば良いか全然違ってくるのでまずは自分の実力を確認しましょう。

例えばフロントエンジニアの人でHTML/CSSゴリゴリ書いてますって人はwikiで試験範囲などを確認して少し復習するだけで良いかもしれません。

逆にWebシステム作成経験がない、HTML/CSSなどをほとんど書いた事がない人などの場合は、Webの基礎知識からまず学習した方が良いと思いますし、いきなり公式テキストをやるのではなく、ドットインストールの動画を見ながら初歩的な所から学習した方が良い気がします。(ドットインストールは初心者向けに説明してくれているので)

自分の場合、Webの基礎知識はある程度知っていたのであまりやらず、それ以外の箇所(特にHTML5要素/CSS3)を重点的に学習しました。

コードを書く

ただ内容を暗記してもそれはただの受験勉強になってしまって、全く意味がないのでしっかりコードを書いて、挙動を確認しましょう。

実際に書いてプロパティを変更するとどのような挙動になるかなど確認した方が頭にも入りやすいかと思います。(animationやtransitionら辺はコード書くと面白いです)

個人的には書くときのテキストエディタはSublime Textがおすすめです。 GruntのLiveReload機能を使って書くとエディタで保存するタイミングでブラウザが自動更新されたりするので便利ですが、そもそもGrunt何って人ははまりそうですし、別にやらなくて良いかと思います。

英語で覚える

タグ名やプロパティは基本的に英語の名称(または略語)だったりするのですが、その名称もしっかり覚えるべきだと個人的には思います。

例えば<ol>、<li>要素もそのまま覚えるのではなくてそれぞれOrdered list、Unordered listと覚えるとそれぞれの要素の挙動も忘れる事がないと思います。

3. 受験をしてみて

78点(えっ!)というそこまで余裕ではない点数ではありましたが、合格できました。

HTML5の試験だけどそれだけに特化してる訳ではなく、Webの基礎知識だったり、HTML/CSSの基礎も学習をする事が出来るのでその辺りの知識を整理出来たのは良かった。
本資格を持っている=書ける、という訳ではない。実際の業務ではレガシーブラウザへの対応だったり、JavaScriptを使うことがほとんどあると思われるがその辺りの話はないため。また、試験内容も基本的には知識を問うものが中心となっているため。(知識は知識で大切)

また、受験を踏まえ、どのような人が受験すると良いと思ったかも記載しておきます。

HTML5に興味ある人
デザイナーだったりフロントエンジニアの人
サーバーサイドエンジニアでたまにHTML/CSS書いたりする人でもっと知識を整理したい人

資格の有用性?という意味ではまだ試行された日が経ってないので、よく分かりませんが、個人的には勉強するきっかけになったので良かったかなーと。

2013年10月6日日曜日

"Harp"ってフロントエンドエンジニアに良さげなWebサーバーを試してみた

HarpってWebサーバーがイケてそうなのでとりあえず試してみました。 YouTubeで紹介された奴を割とそのまま試しただけなので何もすごくないですが。

少し確認してみたのですが、インストールも１コマンドで出来て手軽だし、Markdown,LESSとかTwitterBootstrap使ってるWebエンジニアにとってはかなり有用なのではないかと思いました。

以下参考サイトです。

Harp公式サイト Harp

Harpの紹介サイト（多分作者の人？） Introducing Harp

Harpの紹介YouTube Introduction to Harp Web Server

1.Harpって?

Webサーバーですよ
インストールはNodeのnpm使うよー
Markdown,EJS,CoffeeScript,LESS,Stylusとか解釈してくれますよー
コンパイルしてPureなHTMLとかCSS生成できるよー

他にも色々あるのかもしれませんが、とりあえず自分が試してみたのは上記機能のみです。

2.インストールしてみる

npm使うのでNodeを予めインストールしておく必要があります。どのバージョンが必要であるかという明記はなかったような気がしましたが、とりあえず自分はv0.10.11とかでとりあえず動きました。

以下のコマンドでOKです。

$sudo npm install harp -g

終わり!!!

3.とりあえず試す

公式に従ってharpコマンドを使ってテンプレートプロジェクト作ってみます。

$harp init myproject

とするとカレントディレクトリにmyprojectってフォルダが出来て、中に色々ファイルが出来てます。

-rwxr-xr-x  1 toshihirock  staff   52 Oct  6 08:08 404.jade
-rwxr-xr-x  1 toshihirock  staff   81 Oct  6 08:08 _layout.jade
-rwxr-xr-x  1 toshihirock  staff   52 Oct  6 08:08 index.jade
-rwxr-xr-x  1 toshihirock  staff  259 Oct  6 08:08 main.less

まあ、とりあえずWebサーバー起動して見てみると。

$harp server myproject

          _____                    _____                    _____                    _____          
         /l    l                  /l    l                  /l    l                  /l    l         
        /::l____l                /::l    l                /::l    l                /::l    l        
       /:::/    /               /::::l    l              /::::l    l              /::::l    l       
      /:::/    /               /::::::l    l            /::::::l    l            /::::::l    l      
     /:::/    /               /:::/l:::l    l          /:::/l:::l    l          /:::/l:::l    l     
    /:::/____/               /:::/__l:::l    l        /:::/__l:::l    l        /:::/__l:::l    l    
   /::::l    l              /::::l   l:::l    l      /::::l   l:::l    l      /::::l   l:::l    l   
  /::::::l    l   _____    /::::::l   l:::l    l    /::::::l   l:::l    l    /::::::l   l:::l    l  
 /:::/l:::l    l /l    l  /:::/l:::l   l:::l    l  /:::/l:::l   l:::l____l  /:::/l:::l   l:::l____l 
/:::/  l:::l    /::l____l/:::/  l:::l   l:::l____l/:::/  l:::l   l:::|    |/:::/  l:::l   l:::|    |
l::/    l:::l  /:::/    /l::/    l:::l  /:::/    /l::/   |::::l  /:::|____|l::/    l:::l  /:::|____|
 l/____/ l:::l/:::/    /  l/____/ l:::l/:::/    /  l/____|:::::l/:::/    /  l/_____/l:::l/:::/    / 
          l::::::/    /            l::::::/    /         |:::::::::/    /            l::::::/    /  
           l::::/    /              l::::/    /          |::|l::::/    /              l::::/    /   
           /:::/    /               /:::/    /           |::| l::/____/                l::/____/    
          /:::/    /               /:::/    /            |::|  ~|                       ~~          
         /:::/    /               /:::/    /             |::|   |                                   
        /:::/    /               /:::/    /              l::|   |       Harp v0.9.3                 
        l::/    /                l::/    /                l:|   |       Asset Pipeline Framework    
         l/____/                  l/____/                  l|___|       By Chloi Inc. 2012-2013     

Your server is listening at http://localhost:9000...

デフォルトだと9000ポートでWebサーバーが起動するみたいなのでhttp://localhost:9000早速アクセス。

すごい、簡単だー。

4.Markdown見てみる

今度はテンプレート使わずやってみましょう。

$mkdir markdowntest
$cd markdowntest
$vi index.md

#Hello World
##Hello World2
    
+ test
+ test

$harp server --port 9000

これで同じくアクセス。

すばらしい。

5.BootstrapのLESSをコンパイルしてみる

YouTuebの紹介でもBootstrapのLESS使ってコンパイルしてーみたいな事をやっていたので、全く同じ方法でやります。

とりあえずTwitter Bootstrapをダウンロードしてくる。

Bootstrap

で解凍。

あと今回用にサンプルプロジェクト作って解凍したBootstrapからLESSを持ってきます。あと名前も変えます。

$mkdir bootstraptest
$cd bootstraptest
$cp -r ~/Downloads/bootstrap-3.0.0/less ./_bootstrap

TwitterBootstrapのLESSを読み込む用のlessを作成します。

$vi main.less

@import "_bootstrap/bootstrap";
body {
  background: @brand-primary;
}

１行目でBootstrapのすべてのLESSをインポートしているbootstrap.lessを読み込んでいます。 3行目ではBootstrapで定義してる変数を利用して背景色を指定しています。

テスト用のHTML作ってみます。

$vi index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

見てみます。

おー、しっかり背景色が変わっています。

さて、compileコマンドを使ってコンパイルします。

$harp compile --output ../www

終わるとwwwディレクトリが出来ています。

$ll ../www/
-rw-r--r--  1 toshihirock  staff     224 Oct  6 08:55 index.html
-rw-r--r--  1 toshihirock  staff  100869 Oct  6 08:55 main.css

綺麗にコンパイルされてます。あら、素敵！

6.最後に

個人的にですが、Gruntとか使ってみたいけど敷居高そうだなーと考えている人には良いのでは？という感じでした。

上記ぐらいの利用法であれば特に詰まる事なくできたので、そいう手軽さもすごい良いなと。

2013年9月28日土曜日

[Tizen]よく使うsdb(Smart Development Bridge)コマンドの使い方メモ

Tizenのエミュレーターや実機へのアプリ転送などをコマンドライン上で行えるsdb(Smart Development Bridge)がTizen SDKに同梱されています。これはAndroidでいうadbコマンドのTizen版になります。

上記を利用する事でIDEを介さず、エミュレーターや実機にして操作が出来るのでよく使う機能などをメモを記載します。 (詳細はsdb helpコマンドで見れます)

sdbコマンドの場所
接続されているTizenデバイスの確認
sdbコマンドの対象デバイスの指定
Tizenデバイスへのアプリ(tpk,wgt)のインストール
Tizenデバイスへのリモートログイン
Tizenデバイスからのファイル取得
Tizenデバイスへのファイル転送
その他

sdbコマンドの場所

Macの場合、$TIZEN_HOME/tools/sdbです。パスは忘れてしまいましたが、Ubuntu、Windowsでも同様にsdbコマンド自体は利用可能です。(Windowsの場合にはコマンドプロンプト)

予め、.bashrcなどでパスを通しておくと便利です。私の環境では以下のような感じ。

$export PATH=$PATH:/Users/toshihirock/tizen-sdk/tools

接続されているTizenデバイスの確認

エミュレーターや実機で現在PCに接続されていると認識しているTizenデバイス一覧を表示するにはsdb devicesコマンドを利用します。

$ sdb devices
* daemon not running. starting it now on port 26099 *
* daemon started successfully *
List of devices attached 
emulator-26100  device  mini
emulator-26110  device  abc1

List of devices attached配下に端末一覧が表示されています。上記例ではmini、abc1という名称のエミュレーターを2つ起動しています。

実機の場合にも、上記と同じように表示されます。もし、実機が表示されない場合、端末のUSBデバッグモードが有効化されていない、もしくはUSBドライバがインストールされていない可能性があります。

なお、上記例ではdaemon not running. starting it now on port 26099ということでsdbサーバが同時に起動しています。

コマンドで明示的に起動する場合、sdb start-serverとすることで対応できますが、上記のように起動していなければ勝手に起動してくれるみたいなので個人的にはあまり使いません。（逆に停止する場合にはsdb kill-serverコマンドを利用します）

sdbコマンドの対象デバイスの指定

複数のTizenデバイスを接続している場合、どの端末に対してsdbコマンドを発行するか指定する必要があります。

対象が実機であるか、エミュレーターの違いかである場合にはオプションで-d、-eを利用するのが便利です。（installコマンドについては後述）

$sdb -d install example.wgt
$sdb -e install example.wgt

-dオプションで実機(device)、-eオプションでエミュレーター(emulator)に対して指定したコマンドを実行しています。

実機を2台以上接続してる、エミュレーターを2台以上接続してる時はどうするかというとsdb devicesコマンドを利用してそれぞれのSerial Numberを取得し、オプションで-sを利用して指定します。

$sdb devices
List of devices attached 
emulator-26100  device  mini
emulator-26110  device  abc1
$sdb -s emulator-26100 install example.wgt

上記例ではまず、sdb devicesコマンドでそれぞれのSerial Numberを確認しています。 Serial Numberは一番左の名称が該当しています。(この例ではemulator–26100とemulator–26110)その後、-sオプションんを使用してSerial Numberが「emulator–26100」の方にアプリをインストールしています。

Tizenデバイスへのアプリ(tpk,wgt)のインストール

作成したtpk、wgtをTizenデバイスにインストールする場合にはsdb installコマンドを利用します。

$sdb -e install example.wgt

上記例ではexample.wgtというアプリをエミュレーターインストールしています。既に上記アプリがインストールされている場合にも上記コマンドで上書き更新してくれます。

Tizenデバイスへのリモートログイン

Tizenデバイスにリモートログインする場合、sdb shellコマンドを利用します。なお、TizenIDEのConnection ExploerでもGUIでファイル構成などが確認できます。

$sdb -e shell
sh-4.1$

上記例ではエミュレーターにリモートログインしています。

普通にコマンドも使えます。

sh-4.1$ ls -la
total 88
dr-xr-xr-x  24 root root  4096 2013-07-17 20:38 .
dr-xr-xr-x  24 root root  4096 2013-07-17 20:38 ..
dr-xr-xr-x   2 root root  4096 2013-07-17 20:37 bin
dr-xr-xr-x   2 root root  4096 2013-06-14 10:38 boot
drwxr-xr-x   2 root root  4096 2013-07-17 20:36 cache
drwxr-xr-x   2 root root  4096 2013-08-03 23:36 csa
drwxr-xr-x   2 root root  4096 2013-07-17 20:36 data
drwxr-xr-x  15 root root  3700 2013-09-28 06:17 dev
drwxr-xr-x  39 root root  4096 2013-08-03 23:36 etc
lrwxrwxrwx   1 root root     9 2013-07-17 20:36 home -> /opt/home
dr-xr-xr-x   9 root root  4096 2013-07-17 20:37 lib
drwx------   2 root root 16384 2013-07-17 20:36 lost+found
drwxr-xr-x   2 root root    40 2013-09-28 06:17 media
drwxr-xr-x   9 root root  4096 2013-07-17 20:37 mnt
drwxr-xr-x  14 root root  4096 2013-07-17 20:37 opt
dr-xr-xr-x 108 root root     0 2013-09-28 06:17 proc
lrwxrwxrwx   1 root root    14 2013-07-17 20:36 root -> /opt/home/root
drwxr-xr-x  12 root root   340 2013-09-28 06:17 run
dr-xr-xr-x   2 root root  4096 2013-07-17 20:38 sbin
lrwxrwxrwx   1 root root     8 2013-07-17 20:36 sdcard -> /mnt/mmc
drwxr-xr-x   2 root root     0 2013-09-28 06:17 smack
drwxr-xr-x   2 root root  4096 2013-06-14 10:38 srv
dr-xr-xr-x  12 root root     0 2013-09-28 06:17 sys
drwxr-xr-x   2 root root  4096 2013-07-17 20:36 system
drwxrwxrwt  12 root root  1700 2013-09-28 06:43 tmp
drwxr-xr-x  16 root root  4096 2013-07-17 20:38 usr
drwxr-xr-x  16 root root  4096 2013-07-17 20:36 var

suコマンドでスーパーユーザーにもなれます。

上記より、例えばIDEのコンソールなどでhogeっていうファイルを吐き出したよって言っているけどそれってどこなんだって言うときにはsdb shellでリモートログインしてfindコマンドで探すっていうのが手っ取り早いです。

sdb shell -ls -laなどとコマンドを指定するとリモートログインすることなく、コマンドの実行も可能なようです。

Tizenデバイスからのファイル取得

Tizenデバイスからファイルを取得する場合、sdb pullコマンドを利用します。

$sdb -e pull /opt/usr/media/Images/Default.jpg ~/Downloads/
1 file(s) pulled. 0 file(s) skipped.
/opt/usr/media/Images/Default.jpg   5834 KB/s (632118 bytes in 0.105s)

上記例ではTizen端末の/opt/usr/media/Images/Default.jpgファイルをローカルPCの~/Downloads/においてね、という操作をしています。

Tizenデバイスへのファイル転送

Tizenデバイスへファイルを配置する場合、sdb pushコマンドを利用します。

$sdb -e push ~/Downloads/icon.jpg /opt/usr/media/Images/
1 file(s) pushed. 0 file(s) skipped.
/Users/toshihirock/Downloads/icon.jpg   210 KB/s (2799 bytes in 0.013s)

上記例ではローカルPCの~/Downloads/icon.jpgというファイルをTizen端末の/opt/usr/media/Images/においてね、という操作をしています。

sdb pullとsdb pushでは第１引数と第２引数の意味が違うので注意です。

その他

上記以外でもsdb uninstallでアプリをアンインストールしたり、やsdb dlogでログを見たりできますが、個人的にあまり使わないので割愛します。その他にもコマンドなどありますが、詳細はsdb helpで確認下さい。

[TIzen]アプリ転送時に「There is no device to launch」というダイアログが表示される場合

エミュレーターを起動しているにも関わらず、IDEからRun Asでアプリをエミュレーターに転送しようとした際にThere is no device to launchというダイアログが表示される事があります。

上記の場合、Tizen IDEでConnection Exploerウィンドウを開けば問題が解消されます。

Tizen IDEをインストールした場合にはデフォルトで上記Windowは表示している状態だったと思いますが、消してしまった場合、Tizen IDEのWindow→Show View→Other→Tizen→Connection Exploerで再表示可能です。

また、上記ウィンドウでエミュレーターを含む現在sdbで認識しているデバイスが表示されるので、そこにエミュレーター(実機)があるかも確認できます。

sdbコマンドを利用することでアプリの転送も可能ですが、別の機会に!

2013年8月10日土曜日

[Tizen][Jenkins]TizenネイティブアプリをJenkinsでビルドした時のメモ

Tizenネイティブアプリ(C++)のビルドをUbuntuのJenkinsでビルド出来るようにした時のメモを記載します。

結論から言うとEclipse CDT Headless build機能を利用する事で簡単に出来ました。（その結論まで辿り着くのに時間が掛かったけど。。。。)

また、上記での運用の場合、.project及び.cprojectファイルもあわせてリポジトリにコミットする事でEclipse(TizenIDE)での設定（平行ビルドやincludeするプロジェクトなどなど)をそのまま使え、新たにmakefile作成ようにシェルを作成しなくても良いのがとても楽です。

環境は以下の通りとなります。

Ubuntu 12.10
TizenSDK 2.2

また、私の環境では以下のように運用しています。

30分ごとにリポジトリをポーリングし、更新があれば再ビルド
ビルドによってtpkまで作成する
ビルドの成功可否をIRCで通知
Doxygenでドキュメント生成
Cppcheckによる静的解析

なお、実施の際には以下を参考にさせて頂きました。

JenkinsでEclipse CDT (C++) プロジェクトをビルドする

C言語/C++でJenkins実践入門してみるよ

1.UbuntuへのTizenSDKインストール

Tizenの公式サイトに記載の通り実施します。 java.lang.NoClassDefFoundError: Could not initialize class org.eclipse.swt.widgets.Displayというエラーが出る事がありますが、対応方法は

UbuntuにTizenをインストールする際に「java.lang.NoClassDefFoundError: Could not initialize class org.eclipse.swt.widgets.Display」というエラーが出た場合

として以前のエントリに記載したのでご確認ください。上記以外は特に点はないかと思いますので、詳細は省きます。

インストール後、TizenIDEが利用できる所までを確認してください。

2.UbuntuへのJenkinsのインストール

以下のコマンドでOK。

sudo apt-get install jenkins

あとはブラウザでJenkinsにアクセスし、適当な名称でジョブを追加します。

3.Xvfbのインストール

Eclipse Headless Buildをコマンドラインから実行する場合に、Xvfbがないとエラーが出るのでインストールします。

>sudo apt-get install xvfb

Xvfbの起動起動及び停止はJenkinsのXvfb Pluiginを利用する事でプラグイン側で自動でやってくれるので、今回はそれを利用します。

Jenkisnのプラグイン管理から上記プラグインをインストールして、パスを設定します。その後、予め作成したジョブの設定でXvfbに関する設定にチェックを入れればビルド開始時にXvfbの起動を行い、ビルド終了時にXvfbの停止を行ってくれます。

上記を利用しない場合には以下のようなコマンドで実行可能なので一応メモっておきます。

Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
export DISPLAY=:99

4. JenkinsでEclipse Headless Build

いよいよHeadless Buildを利用してビルドします。 Jenkinsのシェル実行の箇所で以下のように記載します。

# move workspace
cd ../
# headless build
/home/toshihirock/tizen-sdk/ide/eclipse -data workspace --launcher.suppressErrors -nosplash -application org.eclipse.cdt.managedbuilder.core.headlessbuild -import Utility -build Utility/Debug

上記例ではUtilityというネイティブプロジェクトをDebugプロファイルでビルドしています。

/home/toshihirock/tizen-sdk/ide/eclipse→TizenIDE(Eclipse)の場所を指定。Windowsの場合、eclipse.exeを指定。Macの場合、TizenIDE.app/Contents/MacOS/TizenIDEを指定。
-data workspace→workspaceを指定。
–launcher.suppressErrors→ポップアップ画面を抑制し、メッセージをコンソールへ出力する。おまじない。
-nosplash→スプラッシュ画面抑制。おまじない。
-application org.eclipse.cdt.managedbuilder.core.headlessbuild→headless buildを指定。おまじない。
-import→Utility ビルド対象のネイティブプロジェクトを指定
-build→Utility/Debug Debugビルドを実施。

上記を実行すると.project及び.cprojetの設定に従い、makefileの生成、実行を自動で実施し、ビルドを行います。 (TizenIDEでプロジェクトを右クリック→Build Projetと実行した場合と同じ挙動)

上記実行後、Utility/Debugフォルダが作成され、ビルドがうまくいけばexeファイルの作成が確認できます。

5.tpkファイルの作成

ビルドを行う事でexeファイルは作成できますが、最終的にアプリとして動作させる為にはネイティブアプリの場合にはtpkにパッケージングする必要があります。

上記はTizenから提供されるnative-packagingコマンドを利用します。

コマンドは$TIZEN_SDK_HOME/tools/ide/bin配下に存在します。

なお、tpk作成時の設定ファイル(build_data)については上記と同じ場所に存在するnative-genコマンドを利用して事前に作成します。

cd workspace/Utility
/home/toshihirock/tizen-sdk/tools/ide/bin/native-gen makefile -t app

上記でCommandLineBuildフォルダが作成され、その中にbuild_dataという設定ファイルが作成されるので、適当な場所にコミットします。 (native-genやnative-makeコマンドを利用してビルドも出来ますが、バグっぽいのがあってうまく出来ない事があったので今回はその方法を利用していません。)

また、もし、証明書(p12)を作成していない場合には、予め作成してこちらも適当な場所にコミットします。

これで準備ができたので、native-packaginコマンドを利用してtpkを作成するシェルを作成します。

# Debugフォルダに移動
cd workspace/Utility/Debug
# build_dataをDebugフォルダに移動
cp ../build_data .
# パッケージング
/home/toshihirock/tizen-sdk/tools/ide/bin/native-packaging -ak ../../ryan.p12 -ap mypassword

これで成功すればtpkファイルがDebugフォルダに作成されます。

-akオプションで証明書の場所を指定し、-apコマンドで証明書のパスワードをしております。各コマンドの詳細はTizenの公式サイトをご確認下さい。

6.Jenkinsプラグインの導入

一応、これでビルドからtpk作成までをJenkisnのジョブとして実行できますが、せっかくなので便利だったJenkinsプラグインもこちらに記載します。（詳細は省きます）

Cppcheck Plugin:C++の静的解析が可能です。かなり便利！
Doxygen Plugin:連携させておくとDoxygen形式のドキュメントが見れます。
IRC Plugin:ビルドの正否をIRCで通知できます。コミットログも合わせてPOSTしてくれるのが意外と便利。
Task Scanner Plugin:TODOを集計できます。

2013年8月4日日曜日

[Tizen]ネイティブアプリ開発をコマンドラインで実施する為のメモ

Tizenでは基本的にIDEを利用してソースコードのビルドやパッケージングが出来ますが、IDEを利用せず、コマンドラインでも実施可能なので、そのやり方について記載します。

利用準備
プロジェクトの作成
makefileの作成
makefileの実行
tpkファイルの作成
tpkファイルを端末（エミュレータ）にインストール
tpkを実行させる

確認した際のTizenSDKは2.2で、OSはMacOSXとなります。

なお、詳細なコマンドオプションなどについては公式ドキュメントのCommand Line Interfaceという欄に記載があります。

利用準備

利用する為にはTizenSDKのインストールが必要となります。インストール後、コマンドにパスを通す事で利用が出来ます。私の場合、TizenSDKはhome配下に配置したので以下のようにました。

vi .bashrc
# export Tizen CLI Tools
export PATH=$PATH:/Users/toshihirock/tizen-sdk/tools/ide/bin

プロジェクトの作成

native-genコマンドを利用する事で新規にTizenプロジェクトが作成できます。例えば、Helloというプロジェクト名、テンプレートでEmptyApplication（起動は可能だが、白い画面が出るのみ）を選ぶ場合には以下のコマンドとなります。

native-gen -n Hello -s empty
Creating a project: Hello...
A project was created successfully in /Users/toshihirock/tizen_workspace/Hello 
To build a project, run native-make in /Users/toshihirock/tizen_workspace/Hello/CommandLineBuild.

上記によってカレントディレクトリにHelloというフォルダが作成され、その配下にテンプレートのコードや設定ファイルが存在します。

-nでプロジェクト名称、-sでテンプレートを選択しています。（その他オプションもありますが、割愛）詳細なオプションはマニュアルを確認頂ければと思います。

IDEでプロジェクトを作成した時との違いとして、プロジェクト配下にCommandLineBuildというコマンドラインでビルドなどを行う為のフォルダが作成されます。

makefileの作成

デフォルトのソースコードに対応したmakefileはCommandLineBuildフォルダ配下に存在しますが、ソースコードが追加、削除になった場合、makefileを修正する必要があります。

上記についてはプロジェクト作成時同様にnative-genコマンドを利用する事で、makefileのみ更新する事が出来ます。(ただし、現状はTizenのバグなのか分かりませんが、src直下のコードのビルドしか対応しておらず、srcの下にさらにフォルダがある場合には正しいmakefileが作成されないようでした。。。)

先ほどのHelloプロジェクトのmakeifleを再作成する場合、以下のようにします。

cd Hello
native-gen makefile -t app
A makefile was created successfully in /Users/toshihirock/tizen_workspace/Hello/CommandLineBuild.
To build a project, run native-make in /Users/toshihirock/tizen_workspace/Hello/CommandLineBuild.

上記によってmakefileが再作成されます。（既にmakefileが存在する場合でもOKです)

-tオプションでプロジェクトの種類を指定します。

app
static
shared

なお、TizenIDEでプロジェクトを作成したが、CLI用のmakefileを作成したい場合、IDEで

対象のプロジェクトを右クリック→Generate Command Line Configuration

でCommandLineBuildフォルダ配下のファイルを作成する事も可能です。

makefileの実行

makefileの実行はCommandLineBuildフォルダに移動し、native-makeコマンドを利用して実行します。

cd CommandLineBuild
native-make

成功するとCommandLIneBuild配下にexeファイルが作成されます。

tpkファイルの作成

Tizenのネイティブアプリは.tpkというファイルにパッケージングする必要があります。上記についてはnative-packagingコマンドを利用します。なお、利用の際に証明書の場所及びパスワードについて指定して実行します。

native-packaging -ak /Users/toshihirock/tizen-sdk/tools/certificate-generator/ryan.p12 -ap mypassword

-akオプションでは証明書のパスを指定し、-apオプションで証明書のパスワードを設定しています。上記実行後、CommandLIneBuild配下にtpkファイルが作成されます。

tpkファイルを端末（エミュレータ）にインストール

native-installコマンドを利用する事でエミュレータにtpkをインストールできます。

native-install -p vqZpHSuVeq-1.0.0-i386.tpk

-pオプションでインストール対象のtpkファイルを指定しています。また、上記はエミュレーターが一つのみ起動している場合のコマンドとなります。

端末がないので分かりませんが、端末を接続し、エミュレーターも起動している場合にはどちらにインストールするか指定する必要があります。その場合には-sオプションを利用してserial numberを指定する必要がありそうです。

tpkを実行させる

native-runコマンドを利用する事でtpkを実行できます。

native-run -p vqZpHSuVeq

-pオプションでパッケージ名称を指定することでエミュレーターでアプリが起動する事を確認できます。

最後に

native-uninstall、native-debugというコマンドも存在しますが、調査しきれなかったので割愛します。。。。

登録: 投稿 (Atom)