appMobi ローカルストレージ(アプリ)
前回のローカルストレージを使って、簡単なアプリを作成☆-(ノﾟДﾟ)八(ﾟДﾟ )ノｲｴｰｲ
（アプリ）RSSを取得し、表示の仕方を変化させる。
参考ページJavaScript で外部サイトのフィードを取得 - Google AJAX Feed API を利用 | すぐに忘れる脳みそのためのメモ
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
/* Set up the page with a default background image */
body {
background-color:#fff;
color:#000;
font-family:Arial;
font-size:48pt;
margin:0px;padding:0px;
background-image:url('images/background.jpg');
}
</style>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=(取得したキー)"></script>
<script type="text/javascript">
/* This function runs once the page is loaded, but appMobi is not yet active */
var init = function(){
};
window.addEventListener("load",init,false);
/* This code prevents users from dragging the page */
var preventDefaultScroll = function(event) {
event.preventDefault();
window.scroll(0,0);
return false;
};
document.addEventListener('touchmove', preventDefaultScroll, false);
/* This code is used to run as soon as appMobi activates */
var onDeviceReady=function(){
//Size the display to 768px by 1024px
AppMobi.display.useViewport(768,1024);
//hide splash screen
AppMobi.device.hideSplashScreen();
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
function list(){
AppMobi.cache.setCookie("select-detail",0,-1);
window.location.reload();
}
function detail(){
AppMobi.cache.setCookie("select-detail",1,-1);
window.location.reload();
}
function dis1(){
AppMobi.cache.setCookie("select-num",1,-1);
window.location.reload();
}
function dis5(){
AppMobi.cache.setCookie("select-num",5,-1);
window.location.reload();
}
function dis10(){
AppMobi.cache.setCookie("select-num",10,-1);
window.location.reload();
}
// エントリーのタイトルをリンク付きにして div 要素に入れて返す。
function createTitleWithLink(entry, idx){
var div = document.createElement("div");
var anchor = document.createElement("a");
anchor.href = entry.link;
anchor.setAttribute("name", idx);
anchor.appendChild(document.createTextNode(entry.title));
div.className = "title";
div.appendChild(anchor);
return div;
}
// エントリーの内容を div 要素に入れて返す。
function createContent(entry){
var div = document.createElement("div");
div.innerHTML = entry.content;
div.className = "content";
return div;
}
//feedの表示
google.load("feeds", "1");
function initialize() {
//Cookieの取得
var value = AppMobi.cache.getCookie("select-detail");
var num = AppMobi.cache.getCookie("select-num");
var feed = new google.feeds.Feed("http://ie.u-ryukyu.ac.jp/news-ie/feed/");
feed.setNumEntries(num)
feed.load(function(result) {
if (!result.error) {
var divFeedTitle = document.getElementById("feedTitle");
var divFeed = document.getElementById("feed");
var divNextLink = document.getElementById("nextLink");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
// フィードのタイトルを生成
divFeed.appendChild(createTitleWithLink(entry, i));
// フィードの内容を生成
if(value == 1) divFeed.appendChild(createContent(entry));
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<!-- content goes here-->
<div id="top"> 琉球大学情報工学科 News-ie </div>
<div id="botton">
<button id="list" ontouchstart="list();">一覧表示</button>
<button id="list" ontouchstart="detail();">詳細表示</button>
<br>
<button id="list" ontouchstart="dis1();"> １件</button>
<button id="list" ontouchstart="dis5();"> ５件</button>
<button id="list" ontouchstart="dis10();">１０件</button>
</div>
<div id="feed"></div>
</body>
</html>html,body{
height:100%;
}
#top {
margin-top:30px;
font-size:40px;
color:#f00;
text-align:center;
}
#feed{
margin-left:10px;
font-size:15px;
}
#botton{
text-align:center;
}
#list{
font-size:20px;
text-align:center;
}
「一覧表示」をタッチ。
「詳細表示」をタッチ。
「５件」をタッチ。
「１０件」をタッチ。
以上のようにRSSで取得した情報を一覧or詳細、１or５or１０件で表示できるようにした。
さらにローカルストレージを使うことで、状態を保存することできる。
例えば、、、
「一覧表示」「５件」
でアプリを終了する。
アプリを起動すると、
「一覧表示」「５件」
の状態で表示される。
のように自分の好きな表示の仕方に保存できる。
電源を切ってもCookieは保存されているそうですよ( ´ﾉω｀)ｺｯｿﾘ
ソースの解説は疲れたので、後で追記で書こうかな(´・ω・｀)
一応重要なことは…
var value = AppMobi.cache.getCookie("select-detail");
var num = AppMobi.cache.getCookie("select-num");の書くところかな。
呼び出すタイミングが早いと宣言されてないって怒られるんだよね(´・ω・｀)ｼｮﾎﾞｰﾝ
どうやって呼び出すタイミングを合わせるのかが大変でしたね〜
最初Javascript内で書いていたんだけど、怒られて(∀｀*ゞ)ﾃﾍｯ
呼び出される順番を考えて、initialize() の関数内に書きました！！
苦労した点はこんな感じ。。。
あと細かいのは面倒くさいからいいよね(ﾉ´∀｀*)←
まぁ需要があれば書くってことでｗｗｗ
今回は簡単なアプリを作成でしたが、今後はもっといろいろなことにローカルストレージを利用していこうと思います。
ローカルストレージのいいところはオフラインでも使えるってこと( ´∀｀)bｸﾞｯ!
なんかいいアプリ作りたいなぁ〜
いろいろ考え中なのです(・∀・)
よし！次回はGoogleカレンダーとの連携でもやりますかね(b´∀｀)ﾈｯ!
