カテゴリー: 未分類

jQueryMobileのイベント処理

$(#mybutton).on("click",function(e){
alert("スイッチオン!");
});

これだと
イベントを追加する要素の読み込み完了後でないと
イベント追加ができない

このため、追加したいイベントの前に
イベント追加scriptを書くと
正しく動作しない

このため、イベント追加したい要素の後へscriptを書くことになる

これが静的、つまりあらかじめ書いておくやり方

次に、動的、つまりプログラミングによる制御でイベント追加するやり方

これは、最初はHTMLに書かれてなくて
後から表示されるときに追加される

Twitter、Facebook、メール閲覧ソフトなどは
情報の更新で新しい情報表示しているのは
後から要素を追加している

あと、ほとんどの場合
JavascriptはHTMLのbodyの中じゃなくて
headの中へ書いている

こういった場合のイベント追加には

Javascriptの構文で

$(document).on(イベント名, セレクタ, ハンドラ)

となる
イベント名は、clickとかで
セレクタは対象のid
ハンドラは行う処理

例えば

<button id="save">保存</button>

このボタンへイベント追加するなら

$(document).on("click",""save",function(e){
   //保存する処理
});

とする

この追加したイベントを削除するには
off()を使う

通常は、Webアプリならイベントを削除はやらない

これは、画面遷移すると、すべてのイベントがクリアされるから

しかし、jQueryMobileだと
デフォルト動作で最初に読み込まれた画面がAjaxで次々と別画面を読み込んで画面を切り替え表示してしまう

つまり
通常のwebアプリとは違い
jQueryMobileの場合は
イベントを削除しない限りずっと残る

ボタンやテキストボックスなどのイベントは
コンポーネント固有なのであまり影響ないけど
スクロールイベントとか
各種センサー、位置情報などは
必要のない画面へ遷移しても処理し続け
思わぬ動作をすることがある

このため、一度追加したイベントは
off()で削除する

構文は

$(window).off("イベント名")

イベントの削除は
画面遷移して、今の画面を離れるときに使うことが多い

$(document).on("追加したいイベント","追加対象のid",function(e){
$(window).off("削除するイベント");
});

日付入力UI変更

スロット画面みたいな日付入力以外にも
カレンダーから入力する方法もある

予約サイトとかだと
この方がわかりやすい

日付入力方法を変えるには
data-options=””
でmodeを指定する

data-role=”fieldcontain”
でjQueryMobileのフォーム作成

<div data-role="fieldcontain">
<label for="date">カレンダー</label>
<input type="date" name="date" id="date" data-role="datebox" data-options='
{"mode":"callbox",
"dateFormat","YYYY/MM/DD"}'/>
</div>

となる

グリッドレイアウトの利用

jQueryMobileでは、グリッドレイアウト支援機能がある

グリッドレイアウトは
均等な長さで部品を並べるときに使える
グリッドレイアウトを使うには

class=”ui-grid-a”
というように
カラム数を指定して
並べたい要素へ
class=”ui-block-a”というように指定する

ちなみに、
ui-gridで指定できるのは a~dになる
aが2
dが5
というようにカラム数を指定する

並べたい要素へ指定する
ui-block は、カラム数+1なので
ui-grid-d
なら
使えるui-blockは
ui-block-e
までになる

もし、
グリッドレイアウトで
ボタンを2つ並べたいのなら

<div class="ui-grid-a">

<div class="ui-block-a">
<button>保存</button>
</div>

<div class="ui-block-b">
<button>キャンセル</button>
</div>

</div>

となる

もし、ボタンを3つ並べて表示するなら

<div class="ui-grid-b">

<div class="ui-block-a">
<button>ホーム</button>
</div>

<div class="ui-grid-b">
<button>お気に入り</button>
</div>

<div class="ui-grid-c">
<button>検索</button>
</div>

</div>

となる

さらに、複数行にして
テレビのリモコンみたいにするなら
子要素の
class=”ui-block”を繰り返すことで簡単にできる

[/html]
このように、
class=”ui-block-a”
から
class=”ui-block-c”
の繰り返しを3回することで
3×3のマスになるように配置している

ただ、グリッドレイアウトに関しては導入するなら
jQueryMobileよりも
Bootstrapのほうが楽かもしれない

リストの動的変更

リスト要素を動的に追加、つまりプログラムでコントロールするなら
listview(“refresh”)
を使ってリストを更新すること

理由は、通常の要素追加だけだと
jQueryMobileのスタイルが追加されないため

なので、jQueryMobileを適用するには
通常の要素追加のあとに
listview(“refresh”)
を仕掛けることになる

これほ、マッシュアップで使うことになる
あとは、API関連とか

<div data-role="page" id="listview-add">
<div data-role="container">
<h1>要素を動的に追加</h1>
<form>
<ol data-role="listview" data-inset="true" id=addlist"">
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
</ol>
</form>
<button id="addbtn">要素を追加</button>
</div>
</div>

//リストの要素を動的に追加
$(document).on("pageinit","#listview-add",function(e){

$(this).on("click","#addbtn",function(e){
var target b= $("#addlist");
target.append("<li>追加要素</li>");
target.listview("refresh");
});

});

これで、要素追加のボタンである
#addbtnをタップすると
append()により
li要素の一番下へ要素が追加される
追加されるのは

<li>追加要素</li>

になる

また、通常のHTMLならこれでokだけど
jQueryMobileではデザインを適用するには
今回のように
listviewに対して refreshをかける

refreshし忘れると、ただのHTMLになってしまうので注意

コンテンツの折りたたみ

jQueryMobileでは
collapsibleを使うことで
簡単に折りたたみ可能なコンテンツを作成できる

モバイル版Wikipediaみたいなかんじ
ソースでは
data-role=”collapsible”
で指定する

<div data-role="collapsible">
<h3>見出し</h3>
<p>本文</p>
</div>

これだけで、簡単にタップすると
展開、折りたたみの動作をするコンテンツが作成できる

これだと、最初は閉じた状態になるけど
最初から展開状態にしたいのなら
data-collapsed=”false”
を指定する

今回の場合なら

<div data-role="collapsible" data-collapsed="false">
<h3>見出し</h3>
<p>本文</p>
</div>

また、折りたたみ可能なコンテンツと組み合わせて、アコーディオンが作れる
Wikipediaがそのいい例

では、ソース
今回のは最初から開いているのと
閉じているのを組み合わせている

途中の
data-role=”collapsible”
で折りたたみ可能にして

data-collapsed=”false”
で開いた状態にしている

<div data-role="collapsible-set"
<div data-role="collapsible" data-collapsed="false">
<h3>見出し</h3>
<p>本文、ここは最初から表示される</p>
</div>

<div data-role="collapsible">
<h3>見出し その2</h3>
<p>本文、最初は見えないよ</p>
</div>

<div data-role="collapsible">
<h3>見出し　その3</h3>
<p>本文、これも最初は見えないよ</h3>
</div>

</div>

先日、静岡でランチパスポートシリーズの新刊がでていたので購入しました

このランチパスポートですが
すでにシリーズとなり全国２５エリアで発行中です

この本をもっていくことで掲載されているお店では
５００円でランチを食べることができます

曜日の指定はありますが、最近は日曜日にこれをつかってランチにいっています

同じもので、バルパスポートというものが発売されていますが
こちらは夜専用
こちらは１０００円で食べられるところが掲載されています

ただし、掲載されているものの既に閉店されたお店もあったり
営業日の変更があったりするので
実際にいってみないとわからないということもありますが….

バルパスポートやランチパスポートは
安く食べれるというのもありますが、いままで行ったことのないお店をしることができること

そしてお試しで入れるというのが最大のメリットだと思います
最近は書店で本を購入することが減りましたが
体験できるようなこういった書籍、雑誌などは残りそうです

静岡市では、子の他に、おまちバルというものが開催されるときがあり
このイベントでは夜の飲みにいくお店で
1品とワンドリンクのチケットを使いながら5店舗まで使えるというものがあります

ネットでの買い物が増える中、実際に体験できるイベントというものは
今後も需要がありそうです

最近では、電子書籍関連で購入することが多くなりました

去年 kindle を購入し
そして、いつも購読している日経Linux はPDF版にしました

仕事の転勤、移動などで引越しをするときに
たまってしまった書籍はかなりの量になります

最近ではラノベはほぼ kindle で購入しています

音楽関連は、ほぼ ipod 経由で iTunes で購入することがほとんどです
（iTunes は基本的にはサークルKのカルワザクーポンで割引でまとめて購入します）

以前なら大量のCD、そして本だったのが
今ではほとんど電子化です

電子化の一番のメリット
それはデータの紛失リスクが減ることだと思います

書籍の場合破れたり、紛失することで続きが読めないこともありますし
私の場合、近くに専門書籍を取り扱う本屋さんがないため
電車で1時間以上かけて購入することがほとんどでした

音楽関連も同じく、レンタルできるのはTSUTAYAのみで
レンタルのあと返却するのにかなり手間がかかります

ipod で購入すればあとは端末を新しくしても音楽をそのまま引き継ぐことができますし
kindle で購入した本は
Android や ipod touch の kindle アプリでみることができます

地方になるほど、Amazon のネットショッピングや
kindle ipod touch などデジタルのものが役立つのかもしれません

Nexus 7 を使うようになり、一番つかうのが
kindle アプリです

これを使えばリファレンス関連を簡単に持ち運べるし
なによりかさばりません

ただし最近の問題点として 毎回持っているのは面倒ということ

また充電中だと寝かせたままになります

以前アームのものを買ったのですが
最近は寒いため作業がコタツになっているので
さすがにアームは使えないのでスタンドを購入してみました

今回は、さらに Qi 搭載の置くだけで充電できるものです

使ってみた感想ですが
Nexus7 以外に置けたのが ipod touch の第5世代（2012年12月のもの）
場所もとらず
スリムなのですが、代償としてスマホや他のタブレットをおくことができません

また2013年版の Nexus7 対応のため 2012 年のものをおくことができません

購入するときには注意が必要です

Ubutu へ calibre インストール

日経Linux でweb情報を組み合わせて
電子書籍にして
kindle に自動配信するのがあったので
これを実践

これにはまず
calibre が必要なので
インストール

インストールは

sudo python -c "import sys; py3 = sys.version_info[0] > 2; u = __import__('urllib.request' if py3 else 'urllib', fromlist=1); exec(u.urlopen('http://status.calibre-ebook.com/linux_installer').read()); main()"

で行う

このインストールコマンドは
calibreのダウンロードページ
http://calibre-ebook.com/download_linux
に掲載されているので
そのまま実行

Enter the installation directory for calibre [/opt]:
と聞かれるので
そのままEnter でOK

これでインストールされる

calibreを立ち上げると
ライブラリをどこに置くのか聞かれる
デフォルトでは
calibreライブラリだけど
日本語が入っていると高確率で後々面倒がおきるので
新しく
calibrelib を作成して、ここへ指定

次に扱う電子デバイスを聞かれるので
kindle にしたいので
Amazon > kindle Fire and Fire HD
を選択

次に配信のためのメールアドレスを聞かれるので
Gmailをつかう
をクリックし
Gmail のアカウントを入力

kindle メールがわからなかったので
［ま］Calibreを使って日経新聞の無料ニュースを毎朝Kindle paperwhite に自動配信する方法 @kun_maa

を参考に
Amazon へログインして
アカウントサービス > My Kindle
で
パーソナル・ドキュメント設定
で確認

次にレシピファイルをつくるけど
どこにつくればいいのか載っていない

このため
第3回　Calibreに新しいニュースサイトを追加する

を参考に
ニュースを取得 > ニュースソースをカスタマイズして追加
を選択

画面右上の
詳細モードへ切り替え
を選択すると
python スクリプトのレシピを入力できるようになる

class AdvancedUserRecipe1392711471(BasicNewsRecipe):
    title          = u'\u4e0d\u660e\u306a\u30cb\u30e5\u30fc\u30b9\u30bd\u30fc\u30b9'
    oldest_article = 7
    max_articles_per_feed = 100
    auto_cleanup = True

    feeds          = []

となっているので
これを編集していく

注意点として python は改行が java などの ; のように
区切り扱いなので、適当に改行してしまうとバグになる

書籍どおりやったけどエラーになるので

http://aquilla.way-nifty.com/reading/files/ngj.recipe
のレシピサンプルを参考に修正

まず
title は日本語のままだとエラーになるので
これは題名をいれてから詳細モードにすることで
エンコードさせる
もしくは英語にする

次に
feeds の項目は

feeds = [ (u'Linux Hacks', u'http://netbuffalo.doorblog.jp/atom.xml')]

というように
[] の中を () で囲む

use_embedded_content= None
を
use_embedded_content= False
へ変更

これでエラーなく登録可能に

そして
ebook-convert コマンドで電子書籍を作成するけど
ここも修正

ebook-convert /path/to/MyKindleDaily.recipe MyKindleDaily.mobi --output-profile=kindle_pw

これは

ebook-convert .recipeファイルの場所 電子書籍の名前.mobi --output-file=kindle

にする

.mobi は
kindle でつかわれているフォーマット

また
–output-profile=kindle_pw
だと Kindle Pmuaperwhite 向けなので
–output-profile=kindle
とする

元になる .recipe ファイルは
ubuntu の場合、隠しファイルなので
~/.config/calibre/custom_recipes/
に存在します

今回、

 ebook-convert /home/snowpool/.config/calibre/custom_recipes/Watashi\ nodakeno\ inta\ netto\ Shinbun_1000.recipe MyKindleDialy.mobi --output-profile=kindle

としたので
ホームディレクトリに
MyKindleDialy.mobi
が作成されています

ebook-convert の使い方については
Calibre を使って全文変換した RSS フィード を Kindle へ自動配信する方法

第4回　サーバー上のCalibreから，Kindleへニュースを自動プッシュする

Lambda the Ultimate を Kindle で読む

を参考にさせていただきました

これで電子書籍作成ができ、
calibre や e-book viewer で見れるようになります

ここまでできたので次に作成したこのテスト電子書籍を kindle へ配信してみることにします

Calibre を使って全文変換した RSS フィード を Kindle へ自動配信する方法

を参考に行ってみました

配信には
caibre-smtp コマンドをつかいます

calibre-smtp -a .mobiファイルのパス--relay smtp.gmail.com --port 587 
-u GmailのユーザID -p Gmailの２段階認証のパスワード -e TLS Gmailアドレス kindleメールアドレス''

で送信

このときGmail のパスワードを入力するけどe
２段階認証を有効にしている場合
アプリ固有のパスワードを設定し
これをつかわないと

SMTPAuthenticationError:
となるので注意

プラグインでリアルタイムアクセス解析ができるプラグインがあるので

WP SlimStat – リアルタイムにアクセス解析ができるWordPressプラグイン
を参考につかってみた

いろいろとプラグインがおもしろいのが多いので
今後導入予定