「HTML5」カテゴリーアーカイブ

HTML5, JavaScript

アプリのランキング取得

2014/11/25 admin

アプリのランキングは以下のサイトで取得できます．

自分の必要なランキングを作成，そのアドレスにアクセスするとXML形式で戻ってきます．これを解析します．

https://rss.itunes.apple.com/jp/?urlDesc=

例えば，無料ゲームのランキングは

https://itunes.apple.com/jp/rss/topfreeapplications/limit=10/genre=6014/xml

のアドレスで取得できます．

これの解析は

http://labo.520328.jp/javascript/google_feed_api_sample/

などはいかがでしょうか？

少しいじると（黄色い１行の部分）

<!DOCTYPE html>
<html>
<head>
<title>おてんき</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで　スマホの挙動を制限している -->
<script src="./jquery-1.11.1.min.js"></script>
</head>
<body>
    <div id="feed"></div>

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var xmlUrl = "https://itunes.apple.com/jp/rss/topfreeapplications/limit=10/genre=6014/xml";
var setNum = 5;
var setID = "feed";
google.load("feeds", "1");
function initialize() {
    var html = '';
    var feed = new google.feeds.Feed(xmlUrl);
    feed.setNumEntries(setNum);
    feed.load(function(result) {
        if (!result.error){
            var container = document.getElementById(setID);
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                var title = entry.title;
                var link = entry.link;
                var description = entry.contentSnippet;
                html += '<p>' + (i+1) +':位<a href="' + link + '">' + title +　'</a><br />' + description + '</p>';
            }
            container.innerHTML = html;
        }
    });
}
google.setOnLoadCallback(initialize);
</script>


</body>
</html>

○位：〜〜〜

と表示できます．

HTML5, JavaScript

気象警報をAPIで取得

2014/11/25 admin

以下のAPIでjsonがとれるようです．

使用の注意を読んでから使ってください

注意事項（必ず読む）

http://api.aitc.jp/#attention

そのAPI（愛知県）

http://api.aitc.jp/jmardb/search?areacode=230000&order=new

使用例

愛知県の10月6日〜10月7日には実際に警報が出ている．日付指定は

http://api.aitc.jp/jmardb/search?areacode=230000&datetime=2014-10-06%2000:00:00&datetime=2014-10-07%2000:00:00

このうち，linkのタグの中にはURLが入っているので，ここからさらに情報を取ってくる．
http://api.aitc.jp/jmardb/reports/990185c2-0a28-30cc-9779-a8396d3e0c7b

このリンクは，このままアクセスするとXML形式ですが，末尾に.jsonをつけるとJSON形式となり，同じスクリプトで扱えるかと思われます．

http://api.aitc.jp/jmardb/reports/990185c2-0a28-30cc-9779-a8396d3e0c7b.json

このデータ，暴風警報は”code”: “05”で”status”に発表か継続か解除がある．

両方がマッチしているものをカウントする，時間で区切る，関係ない地域を無視するーである程度の判別は可能かと．

なお，時間で区切ったり，最新版を呼び出すなどは以下の仕様表で

http://api.aitc.jp/jmardb-api/help

パタン

東三河北部及び東三河南部を除く愛知県下
に
暴風警報、暴風特別警報、大雨特別警報
の単語をindexOfする

結果 n が >0なら警報出ていると判断

ーーーパタンの判別ーーー
現在時 < 07:59:59
解除＝講義有り
発令もしくは継続中＝休講

現在時08:00:00 < 現在時 && 現在時 <10:59:59
解除＝3限より講義有り
発令もしくは継続中＝休講

現在時 > 11:00:00
解除＝講義有り
発令もしくは継続中＝休講

HTML5, JavaScript, プログラミングお作法

ブラウザにデータを保存できるwebstorageのサンプル

2014/11/24 admin

ここのサンプルを少し改造しています．

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<script>
//変数storageにlocalStorageを格納
var myData = localStorage;//たぶん”localstorage”というのは変えてはいけない

//myDataに保存する
function dataSave() {
  var myKey = document.getElementById("mykey").value;
  var myValue = document.getElementById("myvalue").value;
  myData.setItem(myKey, myValue);
  show_result();
}

//データを消去
function myclear() {
  myData.clear();
 show_result();
}

//保存されているデータをリスト表示する
function show_result() {
 var result = "";
  //保存されているデータの数だけループ
  for(var i=0; i<myData.length; i++){
    //i番目のキーを取得
  //  var k = myData.key(i);
    var calledData = myData.key(i);

    result += calledData + "は" + myData.getItem(calledData) + "です<br>";
  }
  //上のループで作成されたテキストを表示する
  document.getElementById("show_result").innerHTML = result;
}


  // 
  function removeStorage() {
    var key = document.getElementById("sakujoKey").value;
    myData.removeItem(key);
    key = "";
    show_result();
  }

</script>
<title>Web Storage　サンプル</title>
</head>
<body onload="show_result();"><!--　←ここで結果を自動表示させている-->
<p>
キー：<input id="mykey" type="text">
値：<input id="myvalue" type="text">
<input type="button" value="ストレージに保存" onClick="dataSave()">
</p>
<p>
<div id="show_result"></div>
<input type="button" value="ストレージをクリア" onClick="myclear()">

<input type="button" value="リスト表示" onClick="show_result()">
<br />
削除するキー：<input id="sakujoKey" type="text">
  <button id="button" onclick="removeStorage()">このキーを削除</button>
</p>
</body>
</html>

このデータは共有できるので，同じサーバ（で判別している）であれば別のページからでもこのデータをみられる．

そこで，書き込み用ページと，読み出しようページを分けて，普段は読み出し用ページ，特別な時に書き込みようページへ移動してデータを追加というのも可能です．

データはクリア以外にも，キーワードを指定して削除という方法があります．

「削除するキー」の横に削除したいキーワードを入れて，削除ボタンを押すと，そのキーと値が削除されます．

なお，同じキーの場合は，上書きされますので，日付などで固有化させてください．

例えば，「2014年11月電気代」という風に．

配列に入れているので並び替え可能かと思われますが（ソート）その場合は配列への書き込み方法を変更する必要があるかも．

HTML5, JavaScript, プログラミングお作法

ローカルファイルにデータ保存（実験）

2014/11/24 admin

Webアプリで入力を行わせる場合，通常はサーバ側に記録するのですが，それではデータベースが必要となります．

HTML5ではWeb Storageという機能があり，URLに紐付けてデータをブラウザ側に保存できるようです．ユーザの購買傾向を見てお奨め商品を出してくる通販サイトはこの技術を利用しているようです．

参考

このデータは何かの拍子に消える可能性もありますので，通販のお奨め商品といったレベルで重要な要素には使わない方がいいかもしれませんが，データベースを構築するよりは簡単そうです．

「保存するデータを見るのは自分だけ」「単に数値や文字といった軽いデータだけ」であればこの方法を使ってみてください．

つづく（できなかったら消す）

HTML5, JavaScript

ネットの使用時間抑制アプリ

2014/11/24 admin

全てのネットワークを監視するのは難しいですが，まずはブラウザを開いた時間を取得し，設定時間でタイマーを鳴らしてみては？

バイブを鳴らすことも可能です．

これ，能動的にアクセスするしかないんですよね．

自動でアクセスする方法は，，ないかな？

iPhoneのSafariでは（正しい意味での）ホームページを追加する項目がないので，そのサイトをホーム画面に追加し，Safariを起動するんじゃなく，そのページを毎回起動し，隠しておくというのがいいのかな？

HTML5, JavaScript, プログラミングお作法

みんなで書き込むーを実現するには

2014/11/24 admin

「みんなで書き込む」を実現するには，データベースの構築あたりが必要かと．

PHPを使って，サーバ側に置いた○○.txtを書き換えるスクリプトをコントロールすれば良いかと．

そして，PHP，html，css，javascriptのファイルを組み合わせればできそうです．

ただphpの実行ができるサーバ環境を準備してください．

HTML5, プログラミングお作法

CSSの例

2014/11/22 admin

CSSの例です

今回はクラス名でcssを作成します

文字代入でかなりIDを多用します．このID指定と混乱を避けるためあえてクラスで指定します．

サンプルです．CSSはmycss.cssという名前で，HTMLと同じ階層に保存してください．HTMLの方は好きな名前でかまいません．

@charset "UTF-8";
/*
CSSのコメントの書き方
*/

.cat{/*クラス名の宣言*/
	background: #b3b3b3;/*背景色の設定*/
	border-radius: 10px 10px 10px 10px;/*角を丸める*/
	height: 100px;/*高さは100ピクセル*/
	margin: 40px;/*余白*/
	width: 80%;/*幅はピクセルでも全体に対しての割合でもOK*/
	text-align: center;/*文字の横方向をセンタリング*/
}/*catクラスここまで*/

つづいてHTMLです．

開く際はこのHTMLを開いてください．

<!DOCTYPE html>
<html>
<head>
<link href="mycss.css" rel="stylesheet" type="text/css">
<!-- CSSを読み込む-->

<title>CSSの使い方</title>
<meta charset="UTF-8">
</head>
<body>

<div>ここには表示されない</div>

<div class="cat">ここにはCSSが適用される</div>


</body>
</html>

次のように表示されます．

これを応用すると，動くボタンなどが作成できます

CSS デザイン

や

CSS アニメーション

で検索し，使えそうなクラスを探してみましょう．

ちなみにブロック要素とインライン要素で適用できないCSSもありますので注意を．

アニメーションなど一部機能のうちスマートホンでは，-webkit-　を頭につけないと動かないものもあります．

PC版とスマホ版を共用したい場合は，併記しましょう．

HTML5, JavaScript, プログラミングお作法

配列の例５つ

2014/11/22 admin

配列の例を５つあげます

<!DOCTYPE html>
<html>
<head>

<title>外部ライブラリの使い方</title>
<meta charset="UTF-8">
</head>
<body>

<div id="hyouji"></div>
<!--idを探させる場合，探す前にそのID付きのタグを書いておくこと（この場合，下のdocumen.getElementの前ってこと）-->


<script type="text/javascript">

var animal = new Array("豊田市","梅坪","上豊田","浄水","三好ヶ丘","米野木","日進","赤池");//変数に配列を入れ込む．この配列を

//----（１）配列の長さを調べる
var kazu = animal.length;
console.log("長さ"+kazu);//webコンソールで確認
//「長さ8」と表示される

//----（２）配列を検索する（浄水駅が何番目か調べる）
var nanban = animal.indexOf("浄水");
console.log("浄水駅は" + nanban);//webコンソールで確認
//「浄水駅は３」と表示される　実際には4番目ですが，順番は0から始まっている３と表示


//---（３）配列の要素を指定（5番目の駅を表示させる）
var banme = animal[4];//0から始まるので5番目は4です
console.log(banme + "駅です");//webコンソールで確認
//「三好ヶ丘駅です」と表示される


//---（４）（３）の応用（変数eki番目の駅を表示する）
var eki = 5;
var banme = animal[eki];//0から始まるので5番目は4です
console.log(eki + "番目の駅は" + banme + "駅です");//webコンソールで確認
//「"5番目の駅は米野木駅です"」と表示される


//--（５）今17分で，次の電車の時間（22分）を検索する
var jikoku = new Array(10,15,22,29);//rinjiって変数に配列を入れ込む
var mytime = 17;//今の時間を仮に17分とする

function myKensaku(nowTime){
for (i = 0; i < jikoku.length; i++) {//jikokuの要素を1つずつ取り出す．最大値はjikokuの長さまで
   if(nowTime < jikoku[i]){//もしmytime(17分）より大きい要素が入ったら
   nextTram = jikoku[i];//nextTramはその要素ね
   return nextTram;//22がnextTramに入って戻る．returnは処理を止める
   }
   }
   }
mynext = myKensaku(mytime);//変数mynextには，myKensakuを実行した戻り値を入れなさい
var nokorijikan = mynext - mytime + "分残り";//残り時間を変数nokorijikanに入れる
document.getElementById("hyouji").innerHTML = nokorijikan;//ID hyoujiのあるタグを探して，umaを代入せよ．
//「5分残り」表示されます
//---ここまで

</script>


</body>
</html>

HTML5, JavaScript, プログラミングお作法

外部ライブラリを自作して使う

2014/11/21 admin

面倒くさい関数は外部ライブラリ化してシンプルにします．

tora.jsという外部ライブラリ（ファイル名はかならずtora.jsに）

function neko(){
var cat = 300;//変数catに300を入れる
return cat;//変数catを返す（返事するってこと）
}

このライブラリは次のhtmlから呼び出します

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="tora.js"></script>
<!-- ここで外部のJavaScriptライブラリを読み込む-->

<title>外部ライブラリの使い方</title>
<meta charset="UTF-8">
</head>
<body>

<div id="hyouji"></div>
<!--idを探させる場合，探す前にそのID付きのタグを書いておくこと（この場合，下のdocumen.getElementの前ってこと）-->


<script type="text/javascript">
var uma = neko();//JavaScriptライブラリを読み込んでおけば，関数（function neko()）をいきなり呼び出せる．その結果を変数umaに入れる
document.getElementById("hyouji").innerHTML = uma;//ID hyoujiのあるタグを探して，umaを代入せよ．
</script>


</body>
</html>

tora.jsとこのhtmlファイルは同じ階層に置いてください．

tora.jsで変数に入れた300がhtmlから読み込めていますね．

面倒な処理は外部ライブラリ化すると，htmlの記述も減ってすっきりしますよ〜（整理にもなり，バグの場所も分かりやすくなります）

HTML5, JavaScript, プログラミングお作法