TitaniumMobile勉強記

Web系エンジニア向けのキャリアアドバイザーやってましたが現在はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連(Node.js、Titanium)あたり

勉強会用のサンプルアプリで簡易Webブラウザ作りました

はじめようTitanium+JavaScriptでスマホアプリ開発カフェという形で、全6回にわたる勉強会をやることにしました

勉強会やることにした背景

今回参加者で想定してるのはHTML/CSSはわかるというWebデザイナーな人でこういう方に、少しでもスマフォアプリ開発のとっかかりを掴んでもらえれば、その後のキャリアにも広がりが持てるじゃないかと思ったから。

実際自分がそうだったけど、iPhone向けのアプリ作るのに、Objective-Cの記法を覚えつつ、標準ライブラリの使い方とか覚えるには、あまりにも敷居が高く断念したけど、Titanium Mobileでの開発方法を覚えて最初の一歩を踏み出す方法もあるっていうことを知ってもらってもいいかなと思ってます。

※最初の一歩を踏み出してもらえる人が増えてもらうことで、結果としてうちの会社のビジネスにもつながる可能性もあるわけだしww

作ったアプリのソース

最近シングルコンテキストな書き方をベースにコード書いているけど、今回の勉強会でいきなりそんな書き方すると、説明する自分もしどろもどろになりそうだし、参加してもらう人にも何のことかさっぱりわからないと思ったので、ひとまずこういう書き方にしました。

※アカウントだけ取得したものの、Gitの使い方をイマイチ理解してなかったため使うのをためらっていたGithubですが、バックアップ目的で利用することにして、ひとまずこちらにpushしました

Titanium.UI.setBackgroundColor('#FFF');
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
   title:'簡易ブラウザ',
   backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

// 1.URLを入力できるテキストフィールドを準備
var urlBox = Titanium.UI.createTextField({
  color:'#336699',
  top:10,
  left:10,
  width:200,
  height:30,
  hintText:'enter url',
  keyboardType:Titanium.UI.KEYBOARD_URL,
  returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
  autocapitalization: false,
  borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
urlBox.addEventListener('blur',function(e){
  actInd.show();
  webView.url = e.value;
  webView.reload();

});
win1.add(urlBox);

// 2.読み込み処理を中止するボタンを準備
var stopBtn = Ti.UI.createButton({
  title:'stop',
  top:10,
  left:220,
  width:60,
  height:30,
  systemButton:Titanium.UI.iPhone.SystemButton.STOP
});
stopBtn.addEventListener('click',function(e){
  webView.stopLoading();
  actInd.hide();
});
win1.add(stopBtn);

// 3.HTMLコンテンツを表示するためのWebViewを準備
var webView = Titanium.UI.createWebView({
  top:50,
  left:0,
  width:'auto',
  height:'auto'
});
webView.addEventListener('beforeload',function(e){
  actInd.show();
});
webView.addEventListener('load',function(e){
  actInd.hide();
});
win1.add(webView);

// 4.「読み込み中」ということを示すためのActivityIndicatorを準備
var actInd = Titanium.UI.createActivityIndicator({
  top:50,
  height:55,
  width:'auto',
  opacity:0.5,
  color:'#FFFFFF',
  backgroundColor:'#000',
  borderRadius:5,
  borderColor:'#000',
  font:{fontFamily:'Helvetica Neue', fontSize:13},
  message:' Loading...',
  style:Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN
});
win1.add(actInd);

tabGroup.addTab(tab1);
tabGroup.open();