Titaniumで簡易RSSリーダーをつくる01
完成図。
機能
・コーディング時に指定しておいたRSSフィードを解析して表示
・デフォルトでは画面の高さ分しか取得&表示しない
・「続きを読む」をタップしたタイミングで続きを読み込む
・セルをタップするとナビゲーションバーつきのWebページを表示
・Webページ閲覧後はナビゲーションバー左上をタップしたらRSS一覧に戻ることができる
ポイント
・フィードの解析にTitanium.Yahoo.yqlを使う
ソース
app.js
// Win1を作る var win1 = Titanium.UI.createWindow({ title: 'news', }); // tableView1を作る var tableView1 = Titanium.UI.createTableView({ data: [] }); // win1の中身には、TabView1を割り当て win1.add( tableView1 ); // Win2を作る var win2 = Titanium.UI.createWindow({ title: 'test', }); // tableViewを作る var tableView2 = Titanium.UI.createTableView({ data: [] }); // win2の中身には、TabView2を割り当て win2.add( tableView2 ); // tab1を作る。中身はwin1 var tab1 = Titanium.UI.createTab({ window: win1, icon: 'KS_nav_ui.png', title: '最新情報', }); var tab2 = Titanium.UI.createTab({ window: win2, icon: 'KS_nav_ui.png', title: '未制作', }); // TabGroupを作る var tabGroup = Titanium.UI.createTabGroup(); // tabGroupにtab1,tab2を追加 tabGroup.addTab( tab1 ); tabGroup.addTab( tab2 ); // TabGroupを表示 tabGroup.open(); // 読み込むfeedのURL var feedUrl = 'http://b.hatena.ne.jp/hotentry.rss'; // 画面表示されている全てのfeedアイテム var feedItems = []; // YQLで読み込むfeedの位置 var offset = 1; // YQLで一度に読み込むfeedの数 var limit = 3; // TableView1内がタップされたときの動作を定義する tableView1.addEventListener( 'click', function( e ) { if (e.index < (offset - 1) ) { var entryWindow; var entryView; // 新しくWindowを作ってWebViewを表示します entryWindow = Titanium.UI.createWindow({ title: feedItems[ e.index ].title }); entryView = Titanium.UI.createWebView({ url: feedItems[ e.index ].link }); entryWindow.add( entryView ); // 現在のTabでWebViewのWindowを表示 tab1.open( entryWindow ); } else { feedGet(); } } ); feedGet(); // feedを取得して、TableView1に表示する function feedGet() { // RSS を取得して、TableViewに表示する var query = 'SELECT * FROM rss WHERE url="' + feedUrl + '" limit ' + limit + ' offset ' + offset; // alert(query); Titanium.Yahoo.yql(query, function ( e ) { if (feedItems.length > 0) { // tableView1の最後の項目を消す tableView1.deleteRow( tableView1.data[0].rowCount - 1 ); } if ( !( e.data ) ) { // YQLのレスポンスが失敗の時 alert( 'YQLのレスポンスエラー。エラーメッセージ:' + e.message ); } else { // YQLのレスポンスが成功の時 var rssitems = e.data.item; rssitems.forEach ( function( item ){ feedItems.push( item ); _appendRow( tableView1, item ); offset++; }); _appendRowReadNext( tableView1 ); } }); } // feed項目をtableViewに追加する function _appendRow( tableView, item ) { var row = Titanium.UI.createTableViewRow(); row.className = 'entry'; row.height = 'auto'; row.layout = 'vertical'; row.add(Titanium.UI.createLabel({ text: item.title, top: '4dp', left: '4dp', right: '4dp', height: 'auto', color: 'red', font: { fontWeight: 'bold', fontSize: '15dp', }, })); row.add(Titanium.UI.createLabel({ text: item.description.slice( 0, 50 ) + '……', top: '0dp', left: '4dp', right: '4dp', height: 'auto', font: { fontSize: '13dp', }, })); row.add(Titanium.UI.createLabel({ text: item.date.replace( 'T', ' ' ) .replace( '+09:00', '' ), left: '4dp', height: 'auto', })); tableView.appendRow( row ); return; } // 「続きを読む」項目をtableViewに追加する function _appendRowReadNext( tableView ) { var row = Titanium.UI.createTableViewRow(); row.className = 'entry'; row.height = 'auto'; row.layout = 'vertical'; row.add(Titanium.UI.createLabel({ text: '続きを読む', textAlign: 'center', top: '4dp', left: '4dp', right: '4dp', height: '42dp', color: 'blue', font: { fontWeight: 'bold', fontSize: '15dp', }, })); tableView.appendRow( row ); return; }
上記ベタ書きソースの参考リンク
見やすくオブジェクトにまとめたコーディング方法の参考
改良したいところとか
・タブ、ナビゲーションバーを必要に応じて表示させるようにする。
-> 表示領域は広いほうがいいため。ただでさえ狭い画面なんだから有効活用したい。
・表示内容を、タイトルだけ or タイトル+記事冒頭の文章のいずれかを選択可能にする
-> 表示情報量を増やせるようにするため。タイトルとブログ名くらいあれば十分って人(自分)用
・好みのRSSフィードをアプリ内から設定できるようにする
・NG機能。
-> 見たくないブログの記事は反映させないようにする
・オブジェクトにまとめたコーディング方法を参考にしてコードをすっきりさせる
・表示したページの拡大縮小。
-> 1画面内の情報量を増やす。
・オフライン時の処理を親切なものに。
-> 現状アラートダイアログだけでエラーメッセージをナマのまんま出しちゃってるので。
・セルの幅を均一にする。好みによる?
・ブログ名と記事のタイトルを分ける。
-> 記事のタイトルだけでも表示可能にするとか
・続きを読み込むタイミングの改善
-> 最下部までスクロールしたら自動的に読み込むor流行りのひっぱって更新とか
・色、デザインの変更
->単純に見づらいので