AndroidでWebアプリのプログラミング
の環境を整えています
外出時や電車の中などで
コードを書けないか試してみました
便利なエディタ
Android web editor 有料版
を購入しました
いままでは
Jota text editor
がメインでしたが
さすがに、ソースコードを
すべて手打ちは疲れます
このアプリで
タグを打つことができるようになりました
黄色はHTML
青がPHP
赤がjava script
緑がCSS
となります
ただし、すべては入っていないため、ある程度は
自分で打たないとだめです
また、このエディタを使い
新規ファイルで
HTMLや
PHPファイルを作成すると
テンプレートで作成もできます
しかし、HTC J(ISW13HT)の場合
画面の大きさと
ソフトウェアキーボードのデザインにより
残念ながら非常に見えにくくなります
今回、入力アプリで検証したのは
デフォルトでインストールされているアプリ
Google日本語入力
hackers keybord
ATOK
です
検証結果から
ATOK以外なら入力に問題はありませんでした
これは、ATOKのみ、画面が大きかったからです
これで、テキストエディタには
Android web editor
ファイル転送には
andFTP pro
サーバー管理を
connect bot
で公開鍵認証ログインで操作
ここまではできるようになったので
また追加可能になったらまとめてみます
カテゴリー: 未分類
伊勢神宮へ旅行
伊勢神宮に旅行です
まず、交通機関ですが
電車を使いました
毎回、廃止が噂される青春18切符ですが
今年も無事に購入できました
この切符はJRならば
乗り降り自由の切符で5枚つづりで売られてます
なお、売り場は駅や緑の窓口などとなります
今回、快速みえを使い、伊勢市までいきました
ちなみに、正規料金なら
近鉄の急行でいくほうがやすくなります
近鉄だと1410円ぐらいです
ちなみに、伊勢市や鳥羽の
JRの駅で4枚つづりの切符が売られていて
こちらの場合、一枚あたりに換算すると
1400円の切符が売られてます
ただし、まとめて購入なので
実際には5600円です
伊勢神宮は
外宮と内宮と二カ所あり距離はかなり離れているため
外宮と内宮の移動にはバスを使います
値段は420円
ただし、帰りのバスが夜6時ぐらいになるとほとんどないので
帰りの時間には要注意です
近くのおかげ横町では
有名な赤福があります
夏場には
かき氷赤福がでてますが
お腹の弱めな私にはちょっと無理でした
私がたべたのは
赤福のふつうの方で3個で280円です
お茶もサービスしてくださるので
美味しく頂けました
おかげ横町にある銀行のATMでは
明細におみくじがついてます
いろいろと楽しめましたが
一つ、気になることもありました
それは
iPod touchの乗り換え案内のアプリ
これで、いままでは特に不便はありませんでしたが
今回名古屋から伊勢市まで乗り換えを
調べたとき、なぜか必要のない乗り換えが表示されました
本来、近鉄の急行で伊勢市まで行けますが
なぜか途中で乗り換えるように表示されました
カーナビと同じで、またまだ万能ではないので
自分で調べることも必要と感じました
最近はお盆などで忙しかったので
ゆっくりしてみます
telnetでメール送受信処理確認
telnetでメール送受信処理確認
telnetを使えば
端末上からメールサーバ
(POP3サーバ)
にアクセスできる
ただし、ポートがあいてないとだめだけど
まずは手入力
暗号化なしの110ポート
telnet サーバIP 110
例えば
telnet 192.168.1.120 110
これで、+OKの応答まち
応答を受信したら USERコマンドで
ユーザ名
PASSコマンドで
パスワード
を送信
これで、どちらにも
+OK
の応答が返ってくれば接続完了
STATコマンドで
受信されているメッセージを確認し
PTERコマンドで
メッセージ受信
受信が終わったら
QUITコマンドで
POP3サーバとの接続を切る
POP3通信
POP3のセッション内の処理
1 認証をリクエストして応答
2 メールの件数をリクエストして結果の表示
3 メールのヘッダ一覧をリクエストして応答
4 何番と何番のメールをほしいとリクエスト
5 指定したメールの受信
6 終了を送って応答
ネイティブ側からwebviewへの通知
ネイティブからwebviewへ通知
ネイティブ側からwebviewへイベントを通知するのは
Webviewオブジェクトの
evalJS()を使う
evalJS()
は
javascriptのプログラムコードを
引数として渡す
evalJS()
で渡された文字列は
webview内のjavascriptとして扱われる
基本的には
あらかじめwebview側のjavascript
で呼び出したい機能を定義
その上で
webview.evalJS()
の引数に
処理を
実行するjavascriptを記述
ただし、これは予想できるように
XSSの弱点が存在する
もし、web APIとかを使い
外部から取得したデータを基に
文字列を組み立てるなら
無害化するなどしないと、Webサイト同様に改ざんされるリスクがある
pnメソッド解説
onメソッド解説
on()は
第1引数にイベント名の文字列
第2引数にイベントハンドラー
を設定
今回は
タッチして動かしたときに使う
touchmoveイベント
これのイベントハンドラーを設定
コードをみてわかるように
jQueryを使っている
おさらいすると
$は
jQueryを呼び出すのに使う
イベントハンドラーでは
タッチされた位置や
イベントの発生源などが格納されている
オブジェクトe
のメソッドとして
preventDefault()
を、使っている
ちなみに、eじゃなくてもできるらしいけど
実際にはほとんどeなので、
慣例に倣った方がコードが読みやすいし
メンテもしやすい
preventDefault()は
イベントのデフォルト動作を無効化
preventDefault()で無効化した
touchmoveイベントのデフォルトの動作は
画面スクロール機能
今回はこれをけしたいので
これを消してみました
これで、スクロール機能が無効になります
スクロール無効化
スクロールの抑制
Titanium MobileのWebviewでは
表示画面の右側に
スクロールバーがでることがある
これがアプリだと
違和感があるため
javascriptでこの機能を 停 止する
画面スクロールの禁止は
アプリ起動直後にする
具体的には
ページの枠組みであるDOMの判別が終了したときに呼ばれる処理として記述する
DOMは
Document
Object
Model
の略
DOMの構築終了
ボタンクリック
などの特定のタイミングを条件に実行する機能をイベントという
ボタン、リンクという
ページの要求にイベントを追加するのは
DOMの構築後でないとダメ
イベント作成には
documentオブジェクトの
on()
を使う
on()は
イベントと
そのイベントが発生したときに
呼ばれる処理
つまり
イベントハンドラーを
設定するメソッド
ハイライト無効化
タップ時の強調表示を消す
webviewでUI作成のときの問題点
それは
画面をタップしたときのハイライト
ハイライトは強調表示のこと
この効果は
リンクボタンとかをタップすると
ユーザーにわかりやすく知らせるために
色が変わるというもの
これは、スマホでWebコンテンツを
表示すると体験できる
ハイライトはネットをみるだけなら問題ないけど
アプリにすると微妙になる
原因は
アプリの挙動がサイト EXILE CATCHY BEST 2008
アプリっぽくないから
ハイブリッドアプリのUIの場合
CSS3を使って
Webコンテンツ独特のクセをつぶしていく
ハイライトを無効化するには
-webkit-highlight-color
これはそのなの通り
タップ時のハイライトの色を指定する
これの関数は
左から
赤
緑
青
透明度
となる
透明度は0~1で指定して
0なら透明
1なら不透明
つまり、rgba(0,0,0,0)
なら無色透明になる
これで
ハイライト無効になる
タップ時の強調表示を消す
webviewでUI作成のときの問題点
それは
画面をタップしたときのハイライト
ハイライトは強調表示のこと
この効果は
リンクボタンとかをタップすると
ユーザーにわかりやすく知らせるために
色が変わるというもの
これは、スマホでWebコンテンツを
表示すると体験できる
ハイライトはネットをみるだけなら問題ないけど
アプリにすると微妙になる
原因は
アプリの挙動がサイト EXILE CATCHY BEST 2008
アプリっぽくないから
ハイブリッドアプリのUIの場合
CSS3を使って
Webコンテンツ独特のクセをつぶしていく
ハイライトを無効化するには
-webkit-highlight-color
これはそのなの通り
タップ時のハイライトの色を指定する
これの関数は
左から
赤
緑
青
透明度
となる
透明度は0~1で指定して
0なら透明
1なら不透明
つまり、rgba(0,0,0,0)
なら無色透明になる
これで
ハイライト無効になる
JSON
JSONで文字列変換
JSONは
java
script
object
notation
の略
JSONは
XMLのようなデータを記述するための言語
特徴として
javascriptのオブジェクト表記法がベース
にしていること
JSONは
データを記述しているものなので
文字列として扱える
これを使い
オブジェクト配列を
JSONに変換して格納する
オブジェクトのJSONへの変換は
JSON.stringify()
JSONからオブジェクトへの復元は
JSON.parse()
を使う
JSONが一番使われるのは
Web API関連
でレスポンスでよく使われるデータ形式
とくに、マッシュアップでよく使う
localStorageの構文
local storageを操作する構文
まずは書き込み
localStorage.setItem(キー,保存するデータ);
次に呼び出し
localStorage.getItem(キー);
削除するなら
localStorage.removeItem(キー);
データ数取得なら
localStorage.length;
n項目のキーの値を取得なら
localStorage.key(n);
ストレージそのものを削除なら
(DBのテーブル削除みたいにする)
localStorage.clear();
解説もメモすると
localStorageは
ブラウザーの
window.localStorage
というオブジェクトで提供される
ちなみに、
window.
は省略可能
jQueryでもそうだけど
結構省略できたりする
localStorageにデータ保存するなら
setItemメソッドを使う
保存してあるデータを読み出したいなら
getItemメソッドを使う
このあたりは
setで保存
getで呼び出し
と覚えるといいかも
ちなみに、キーをセットしてないと
nullが返る
nullはなしという意味で
よくsqlとかでDBのデータ入力で使われる
PHP +MYSQLの組合せだと使用頻度高め
キーの値削除ボタンには
removeItemを使う
javascriptでも、removeあるから
意味は近い
removeは削除という意味
.lengthは
ストレージに格納されているデータの数を返す
ちなみに、プロパティなので()はつかない
.key()
は
要素番号を指定しキーを取得
.clear()
はストレージ全体を削除