Just another WordPress site
PhoneGapのイベント
PhoneGapでは、戻るボタンやメニューボタンの操作
オンライン、オフライン
サスペンド
レジュームなどの端末の状態の切り替えのタイミングで様々なイベントが利用できる
イベント処理は、以下のように記述する
$(document).on("backbutton",function(e){
//戻る処理
});
PhoneGapで利用できるイベントは
backbutton
戻るボタンが押されたら実行
menubutton
メニューボタンが押されたら実行
searchbutton
検索ボタンが押されたら実行
online
ネットワークへ接続したら実行
offline
ネットワークが切断されたら実行
pause
他のアプリに切り替わったり、スリープしたら実行
resume
アプリを復帰したら実行
batterycritical
バッテリーがなくなりそうになったら実行
現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール
を購入してみました
元々の購入のきっかけは最近のトレンドを知ること
そして学習するものを絞るため
ドットインストールである程度の基礎を学習することができるので
これで学習してから書籍を購入したり
サイトをみたほうが効率的
ただし、どれを重点をおいてやるかによって学習する効率も変わる
フレームワークを使えば効率は上がるけど
そもそもその元の言語が分かっていないとせっかくのフレームワークも
使いこなせないし、フレームワークに固定されるのは結構リスクが高い
当面、使いそうなものとしては
HTML
CSS
java script
jquery-mobile
レスポンシブweb サイト
compass
git
今回は、去年購入した kindle fire で購入
kindle で購入したものは
アプリを使うことで
Android でも ipod touch でも閲覧可能
電車での移動のときにも読めるし
お昼の休憩の合間にも見ることができるし
なによりかさばらないので
自宅でみるなら kindle や タブレット
出先でみるのなら kindle アプリとすれば
効率よく学習することができます
AndroidでPhoneGap
まずは、EclipseへADTプラグインをいれ
Android開発ができるようにする
次に、PhoneGapプラグインをインストール
https://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/trunk/download/
からインストール
そして、
ツールバーのPhoneGapのアイコンをクリックして
ウィザードに従いPhoneGapプロジェクト作成
作成されたプロジェクトのAndroidmanifestにエラーがでたら
android:xlargeScreens=”true”
を削除する
あとは、
assets/www/
へ
HTML
css
Javascriptで
Webアプリを作成する
PhoneGapのAPI
Accelerometer
加速度センサーの値を取得
Capture
画像、ビデオ、音声などの取得、録音
Compass
方角の取得
Contacts
OS標準の電話帳、連絡帳の操作
File
端末のファイルの読み書き
FileTransfer
ネットワークを利用したファイルの取得、送信
GeoLocation
位置情報取得
Notification
バイブやビープ音、警告、確認メッセージなど
ユーザへの通知関連
Event
ネットワーク、スリーブなどの状態取得
戻るボタンなどのイベント取得
http://www.winlearning.jp/course/phonegap/phonegap.php
も参考にするとわかりやすい
phone gapについて
Phone gapの情報を探すときには
PhoneGap
Apache callback
Apache Cordova
などのキーワードで検索
PhoneGapの特徴としては
HTML5+Javascriptでネイティブアプリが作れること
App Store Google Play App hubに登録てきるアプリを作れる
あと、ある程度ならデバイス操作も可能
加速度センサー
コンパス
カメラ
電話帳なども使える
デバイス操作関連のAPIは
PhoneGapAPIというJavascriptAPIが使えるので
これを使えば、各プラットフォームで動作するアプリを作れる
PhoneGapは、jQueryMobileと
相互補完関係にあるので
jQueryMobileでUIを作成して
処理は PhoneGapで行うようになる
PhoneGapは、ver1.41以前と
ver1.5以降ではパッケージ名やクラス名が変わっているので注意
markdown で段落改行水平線
p
br
で表現されるパラグラフとか改行について
パラグラフは簡単で
適当な文章を空行をいれて表現すればパラグラフになる
これをReText でみるには
編集 > HTML コードを表示
とすれば
別のウインドウでHTMLコードが表示される
これなら、わざわざブラウザ立ち上げして
developer tools で確認しなくてもいい
そして続き
改行をいれないとひとまとめて p 要素扱いになる
変更した場合には再度おなじ手順で表示しないと
ダメで
HTMLコード確認まではリアルタイムでないのは
残念
なお markdown で改行を入れるには
文章の後ろにスペースを２つ以上入れること
次に hr を markdown でかく方法
これは
– * _ のどれかを３つ以上書けばいい
連続じゃなくて
• – – と離して書いても適用される
ubuntu で markdown
ドットインストールの環境がMac で
私の環境が Ubuntu
ということで
まずは
http://ubuntuapps.blog67.fc2.com/blog-entry-247.html
を参考に
ReText をインストール
ReText の場合
リアルタイムで表示できる Live peview 機能があるので
これを使うため
メニューから
編集 > ライブプレビュー
で画面が分割されリアルタイム表示できるようになる
まずは実験で
#02 見出しを書いてみよう
を実践
試しに 左側の画面に
#Title1
とすると
右側の画面で
h1 要素で Title1 と表示される
##title2
だと
h2 で title2 になる
h3 から h6 までは # の数をその分増やすことで対処できる
h1 は別の書き方があり
title
=====
というように文字の下へ = を１つ以上書けば
それで h1 とみなす
h2 も別の書き方があり
title
—–
というように今度は – を１つ以上書けば
それが h2 とみなす
とりあえず h1から h3 まで試したけど
問題なくリアルタイムで変更をみることができたので
これを使って
MarkDown を実践する
コードの記述には emmet-vim のほうが使い慣れているので
まだこっちを使う予定
jekyll のページの一部を部品化
wp 見たいにページの一部を部品化することができる
例えばレイアウトの中にフッターメニューを入れる
これにはHome へのリンク
About へのリンクを
default.html
の
{{content}}
の下に追加する
<hr><p><a href="/">Home</a> | <a href="/about.html"></a></p>
とする
ちなみに hr タグは横に罫線を引くタグ
http://www.htmq.com/html/hr.shtml
の解説を参考に
これでリンクと罫線がでる
このフッターメニューを default.html 以外のレイアウトで使うのなら
フッターメニューを部品化しておく
これで共通化して管理できる
これをやるには
部品を入れる特殊フォルダを作成する
名前は
_includes
そしてこの中に部品ファイルを作成する
今回はフッターメニューなので
footer_menu.html
とした
default.html のほうから
<hr><p><a href="/">Home</a> | <a href="/about.html"></a></p>
を切り取り
ここへ貼り付ける
そして
子の部品を呼び出すには
{% %}で囲む
これは ruby の記法なので覚えておく
つまり作成したファイルを呼び出すのなら
<% _include footer_menu.html %}
となる
書くときのファイルパスに注意すること
カメラアプリで撮影
まずは構文のメモ
void takePicture(Camera,ShuterCallback shutter,
Camera.PictureCallback raw,
camera.PictureCallback jpeg)
カメラの撮影をする
void takePicture(
Camera.ShutterCallback shutter,
Camera.PictureCallback raw,
Camera.PictureCallback postpreview,
Camera.PictureCallback jpeg)
カメラの撮影を行う
void onShutter()
シャッターが押されたときに呼び出すコールバック
void onPictureTaken(byte[] data,
Camera camera )
JPEGイメージ生成後に呼び出されるコールバック
それぞれの引数の意味は
shutter
シャッターが押されたときによばれるコールバックを受け取る
camera.ShutterCallbackインスタンス
raw
Rawイメージ生成時に呼ばれるコールバックを受け取る
Camera.PictureCallbackインスタンス
postview
postview のイメージデータ生成時に呼ばれるコールバックを欝ケトル
Camera.Picturecallback インスタンス
jpeg
JPEG イメージ生成自に呼ばれるコールバックを受け取る
Camera.PictureCallback インスタンス
takePicture()を呼び出すと
SurfaceView へのプレビュー表示がストップする
なので
引き続きプレビュー画面を表示するには
写真撮影処理の終わりで
startPreview() を呼び出すこと
プレビュー画面の表示には
SurfaceView を使う
これは
onCreate() で
SurfaceView を作成し
カメラのプレビュー画面を用意する
次に SurfaceView の SurfaceHolder を生成して
callback メソッドを実装する
実装した SurfaceHolder のcallbackメソッドでは
surfaceCreated() の中で
カメラを open()
プレビューディスプレイをセットする
surfaceChanged() では
カメラのパラメータでプレビューサイズをセットする
surfaceDestroyed() で
カメラプレビュー停止とリリースをしてカメラを開放する
surfaceview は
メインスレッドとは別のスレッドを描画専用で割り当てるので頻繁に画面を表示するときに使う
次に写真撮影関連
撮影するには
onCreate() の中で撮影ボタンを設置して
リスナーを登録する
次に
撮影ボタンのリスナー OnClickListener へ
takePicture() と
撮影した画像をSDカードに保存する処理 saveSD を記述する
tkePicture() では
shutter
raw
jpeg
の３つのコールバックを設定する
画像の保存はSDカードなどの外部ストレージ
ファイル名は現在時刻を使ったものにする
すでにプレビュー画面表示のアプリを作成しているのでこれを改造する
まずはシャッターが押されたときのコールバックK実装
public void surfaceDestroyed(){
}
の下へ実装する
//シャッターが押されたときの処理
private Camera.ShutterCallback mShutterListener = new Camera.ShutterCallback() {
@Override
public void onShutter() {
// TODO Auto-generated method stub
}
};
を追加
そしてJPEGイメージ生成後に呼び出す処理
つまり写真をとったときの処理
//JPEG イメージ生成語の処理
private Camera.PictureCallback mPictureListener = new Camera.PictureCallback() {
@Override
public void onPictureTaken(byte[] data, Camera camera) {
// TODO Auto-generated method stub
//sd card jpeg データを保存
if(data != null){
FileOutputStream myFOS=null;
try {
myFOS = new FileOutputStream("/sdcard/camera_test.jpeg");
myFOS.write(data);
myFOS.close();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
//preview start
camera.startPreview();
}
}
};
となる
そして最後に写真をとる処理
これは
onTouchEvent() で実装
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
//camera preview end
if(event.getAction() == MotionEvent.ACTION_DOWN){
if(mCamera !=null){
//写真撮影
mCamera.takePicture(mShutterListener, null, mPictureListener);
return true;
}
}
return super.onTouchEvent(event);
}
あと、外部ストレージ保存するので
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
が必要になる
とりあえずできたけど
nexus7 外部ストレージがなかった
あと、カメラの向きおかしいので修正の必要があるので
今後修正
次はオートフォーカスにチャレンジ予定
jekyII
読み方はジキル
これは静的サイト作成ジェネレータ
記法として markdown が使える
ブログなどでも活用できる
公式サイトは
http://jekyllrb.com/
jekyll は ruby の gem で提供されている
これを使うための知識は
html
css
ruby
そして markdown
開発環境は vagrant
作業用ディレクトリとして
mkdir jekyll_lessons
を作成
ruby ver 2.1.1
gem ver 2.2.2
IP は ifconfig で確認する
インストールは
gem install jekyll
でOK
時間がかかるので余裕のあるときに行うようにすること
あと、ドットインストールでは
Markdown には
sublime text を使っているけど
私の環境は Ubuntu
そして今までほとんど vim オンリーだったので
Ubuntu markdown で検索した結果
ReText MarkDownに対応 PDF, ODT, HTMLにエクスポートできるテキストエディタ
を発見
この記事での ver は Ubuntu 10.04 LTS だけど
今は Ubuntu 12.04 LTS なので
Ubuntu ソフトウェアセンターを起動し
ReText で調べればすぐにヒット
あとはインストールするだけでOKでした
Jekyll でつまづいたら
先に markdown をやろうと思います