HOME  前　次

 

プログラムの製作4

 

 

ボタン、フレーム設置

 

製作したプログラムをボタンから起動できるようにします。

また、ボタンとメモ表示部を独立させるため、フレームを設置します。

 

<body>

簡易メモ<br>

<div>

<input type="button" value="追加" onclick="tsuika()">&nbsp;

<input type="button" value="検索" onclick="kensaku()">&nbsp;

</div>

<iframe name="myFrame" height=400 width=350 frameborder="1"></iframe>

 

<script type="text/javascript">

var hi= new Array();

var tx= new Array();

 

こんな感じになります。

 

プログラムのまとめ

 

今まで作ったプログラムを設置し、一部修正します。(赤部)

名称を memo.htm として保存します。

 

<html>

<meta charset="utf-8">

<head>

<meta name="viewport" content="width=device-width", initial-scale=1, maximum-scale=1">

<title>簡易メモ</title><style>

</style>

</head>

<body>

簡易メモ<br>

<div>

<input type="button" value="追加" onclick="tsuika()">&nbsp;

<input type="button" value="検索" onclick="kensaku()">&nbsp;

</div>

<iframe name="myFrame" height=400 width=350 frameborder="1"></iframe>

 

<script type="text/javascript">

var hi= new Array();

var tx= new Array();

sread(); //ローカルストレージを配列へ読み込み

hoji(); //配列表示

clickset();//クリック設定

 

//検索

function kensaku(){

              hoji(); //配列表示

              clickset();//クリック設定

                   var kstr = prompt("検索する文字を入力してください","");

                   if (kstr==""||kstr==null) return; //入力なく終了

                   for (var i in tx){

                                     if (tx[i].indexOf( kstr , 0 )>=0){ //文字を見つけた

                                                        myFrame.document.getElementById(dddd(i)).innerHTML =('<div id='+ dddd(i)+' style="color:blue;">'+ hi[i] + '　' +tx[i] +'</div>');  //検索結果を青色で表示

                                                        return;//終了

                                     }

                   }

                   alert(kstr+'は見つかりませんでした');

}

// クリックでhenko実行

function clickset(){

                   for (var i in hi){

                                     myFrame.document.getElementById(dddd(i)).addEventListener( "click" , henko , false );

                   }

}

// クリックしたメモを修正し配列を変更 修正

function henko(){

//                 alert('変更するid='+event.target.id)

                   var i=Number(event.target.id); //idを数値化

                   var str=tx[i];//現在のメモ

                   str = prompt("メモを変更してください",str);//現在のメモを表示&修正

                   if (str==""||str==null) return; //入力なく終了

                   hi[i]=hizeke();//現在の時間

                   tx[i]=str;//変更したメモ

                   myFrame.document.getElementById(dddd(i)).innerHTML =('<div id='+ dddd(i)+'>'+ hi[i] + '　' +tx[i] +'</div>');  //変更内容を画面に表示

                   swrite();//ストーリッジに登録

}

//メモを入力し、配列に追加

function tsuika(){

                   var str = prompt("メモを入力してください","");

                   if (str==""||str==null) return; //入力なく終了

                   hi.push(hizeke());

                   tx.push(str);

                   hoji(); //配列表示

                   clickset();//クリック設定

                   swrite();//ストーリッジに登録

}

 

//現在の日時を　YYYY/MM/DD HH:MMのフォーマット で作成

function hizeke(){

                   var hiduke=new Date(); var year = hiduke.getFullYear();var month = hiduke.getMonth()+1;var day = hiduke.getDate();

                   var hour = hiduke.getHours();var minute = hiduke.getMinutes();

                   var hi= year+"/"+ dd(month) +"/"+ dd(day) +" "+ dd(hour) +":"+ dd(minute) ;

                   return hi;

}

// 00フォーマット終了

function dd(a){

                   return ("00"+a).slice(-2);

}

 

function swrite(){

                   var txt="";

                   for (var i in hi){

                                     txt += hi[i] + tx[i] +"\n"; //配列をつなぐ　改行\nで区切り

                   }

                   txt=txt.substr(0,txt.length-1); //最後の1文字をとる

                   localStorage.setItem("メモ" , txt); //ローカルストレージへの書き込み

}

function sread(){

                   hi=[]; //配列消す

                   tx=[]; //配列消す

                   var txt = localStorage.getItem("メモ");//ローカルストレージ読み込み

                   var htx = txt.split("\n"); //\nで区切り配列へ

                   for (var da of htx){

                                     hi.push(da.substr(0,16));　//日時 配列へ追加

                                     tx.push(da.substr(16));  //メモ16文字目から

                   }

}

function hoji(){

                   myFrame.document.open();

                   for (var i in hi){

                                     myFrame.document.write('<div id='+ dddd(i)+'>'+ hi[i] + '　' +tx[i] +'</div>');  //画面に表示

                   }

                   myFrame.document.close();

 

}

function dddd(n){

 return ('0000'+n).slice(-4);  // iを 0000のフォーマットに変換

}

</script>

</body>

</html>

 

修正箇所

<head>の下の

<meta name="viewport" content="width=device-width", initial-scale=1, maximum-scale=1">

は、スマホで画面のサイズを調整するためのものです。

 

メモを作成したフレームmyFrameに表示するため、

すべてのdocumentをmyFrame.documentに修正します。

 

kensaku()に下記を追加し、再表示することで前の検索による色替え部を元に戻します。

              hoji(); //配列表示

              clickset();//クリック設定

 

henko()に下記を追加し、修正後のストーリッジへの登録を行います。

              swrite();//ストーリッジに登録

 

tsuika()に下記を追加し、追加後の表示、ストーリッジへの登録を行います。

              hoji(); //配列表示

              clickset();//クリック設定

              swrite();//ストーリッジに登録

 

hoji()に下記を追加し、再表示のとき、画面を消してから表示するようにします。

              myFrame.document.open();

              myFrame.document.close();

 

 

Chrome を立ち上げ、URLの入力欄に　

\C:\prog\memo.htm

と入力します。

 

 

追加を押すと、新しいメモを追加できます。

検索を押すと、メモの一部で検索し、見つけると色を変えて表示します。

メモをクリックすると、修正できます。

 

参考　その他の変更

 

キーワードが複数ある場合、次も検索できるようkensaku()を改定します。

 

//検索

function kensaku(){

              hoji(); //配列表示

              clickset();//クリック設定

              var kstr = prompt("検索する文字を入力してください","");

              if (kstr==""||kstr==null) return; //入力なく終了

              var ff=0;//見つからない

              for (var i in tx){

                            if (tx[i].indexOf( kstr , 0 )>=0){ //文字を見つけた

                                          myFrame.document.getElementById(dddd(i)).innerHTML =('<div id='+ dddd(i)+' style="color:blue;">'+ hi[i] + '　' +tx[i] +'</div>');  //検索結果を青色で表示

                                          ff=1;//見つけた

                                          flg = confirm(tx[i] +"\n次を検索しますか？");

                                          if (flg == false) return;//終了

                            }

              }

              if (ff==0){

                            alert(kstr+'は見つかりませんでした');

              }

}

 

iphoneではバグのため、フレーム高さの指定ができません。全行表示されてしまう。

下記赤部にすると、フレーム高さを設定できます。(infoScoop開発者ブログより)

 

<head>

<meta name="viewport" content="width=device-width", initial-scale=1, maximum-scale=1">

<style>

    .ifrm-container {

      width:340px;

      height:400px;

      overflow:auto;

      -webkit-overflow-scrolling:touch;

      display: inline-block;

      margin: 0px;

      border: solid 1px ;

    }

    .ifrm {

      width:100%;

      height:100%;

      border:none;

      display:block;

</style>

<title>簡易メモ</title>

</head>

<body>

簡易メモ<br>

<div>

<input type="button" value="追加" onclick="tsuika()">&nbsp;

<input type="button" value="検索" onclick="kensaku()">&nbsp;

</div>

<div class="ifrm-container">

  <iframe name="myFrame" class="ifrm" scrolling="auto" frameborder="1"></iframe>

</div>

 

スマホで実行

 

製作した memo.htmをスマホで実行してみましょう。

memo.htmをスマホに保存して実行しても動作しません。

(何か方法はあるのかもしれませんが)

サーバーにアップロードし、そこから読み込みます。

 

インストールしたffftpを立ち上げます。

[接続][ホストの設定]で

プロバイダーより提供されるユーザー名、パスワードを設定します。

 

 

左がパソコンのホルダc:\prog

右がサーバーのホルダ

左にあるmemo.htm をつかみ右にドロップすると、アップロードされます。

 

スマホにて、

Chromeなどのブラウザ を立ち上げ、URLの入力欄に　

memo.htm

(kanacom2.la.coocan.jpに契約しているサーバーのurlを入力)

と入力する。

 

製作したシステムが立ち上がります。

メモはスマホ内のストーリッジに保存されます。

urlはブックマークしておきます。

 

以上でシステムが完成、スマホで利用できるようになりました。

 

次回、使用した命令について見ていきましょう。

 

HOME  前　次