本日、jQuery入門講座の読者様よりサンプルが機能しないとの連絡があり
これに対応いたしましたので、ここでお知らせいたします。
該当箇所はjQueryとDOM要素の最初のサンプルです。
このサンプルではjavaScriptのinterTextを利用していたのですが、これは
firefoxでは機能しないためinnerHTMLに変更しました。
サイトには「追記：2014.11/25」として変更内容を記述しておきました。
→参考：google検索「firefox innertext 使えない」
jQuery（textメソッド）を利用すれば、この様なこのようなブラウザ間の
問題には煩わされないので、改めてjQueryの有用性を感じました。
現在作成中のスマホアプリ（後述）が実機テスト段階でアニメが再生されない問題に
ぶつかりました。先週追加したCSSアニメのテクニックを利用したのに何故？
原因はCSSアニメのtransitionはiOS6ではベンダープリフィックス-webkit-が
必要なためでした。CSSアニメの記事2ページ目では動画で動作していることが
確認できますが、これはiOS7のシミュレーションのため-webkit-が無くても
機能したようです。私の実機はiOS6のためアニメしなかったので問題が発覚。
ということでCSSアニメの記事とサンプルで、transitionの部分にすべて
-webkit-を追加しました。これだけでは記事が寂しいので、以下の記事を追加。
今作成しているアプリで長文を表示する箇所があり、読みやすくするために
1文字ずつ表示数仕組みを作成しました。
googleで検索するとプラグインやサンプルが結構見つかるのですが、
スマートフォン用なのでフェードは使わない方向で自作することにしました。
→サンプル：1文字ずつ表示する
startボタンをクリックすると表示がはじまります。即興で作成したので
説明ページは作成していません（この先作成するかも分かりません…）。
しかし、ソース内に説明を書いておきました。
仕組みとしては「typeRoutine」内で文字を追加、このときテキストをグレー
に設定するクラス（spanタグ）を付けることで、最初は半透明っぽく表示します。
その後「spanRemoveFunc」でspanタグを削除してグレーを解除します。
つまりグレー→黒の2段階だけなのですが、実際に確認するとフェードっぽく
なっているのではないでしょうか？
スクリプトも初心者には難しい正規表現は使っていないので解読しやすいと思います。
文字中の「@」で「改行と待ち」、「$」だけだと「待ち」だけをするようになっています。
でもって、これを利用するのが以下のアプリ。「七並べ占い」です。実は10年ほど前に
趣味で作成したコンテンツの焼き回しです。占いの結果に上記の仕組みを利用します。
今、こんな感じになっています。↓（クリックで拡大）
上図左で出すことのできるカードをcss3のドロップシャドーで光らせているのですが、
PCのブラウザだと問題ないのにシミュレータ/実機だとカード全体がぼやけてしまいます。
さらに動作がとても重くなってしまい実用的でありません…。
光らすのはやめよう…。
スマートフォンアプリの作成でjQueryのanimateメソッドが使いものにならない
（動作が重い）のを受けてcssアニメを学びました。cssアニメといっても色々あって
混乱したのでチュートリアルにまとめることにしました。
PCのコンテンツ作成では使わないと思いますがスマートフォン用のサイトを
作成していて「animateメソッドが重い」と感じたら、このテクニックを
利用してみてください。
→使い方：研究「cssアニメとの連携(1)」
→使い方：研究「cssアニメとの連携(2)」
→使い方：研究「cssアニメとの連携(3)」
すでに新たなスマートフォンアプリの作成に入っているのですが、そこでcssアニメの不具合？
を発見。jQueryのappendメソッドで要素を配置した後ですぐにアニメを実行すると
アニメせずに直接指定座標に移動してします。
これもブラウザの仕様のような感じなので、setTimeoutを利用して生成したあと少し間を
開けてからアニメするようにしました。
形になったら、またブログで報告します。
SEOには余り興味が持てない（変に頑張っても効果がないと思っている）のですが、
時々思いつきでページランクが上がりそうなことを試しています。
最近googleで「jQuery」と検索した際に表示されるページが4ページ目から
2ページ目に上がったので、これまで試したことをメモしておこうと思います。
なんで上がったのかは分かりません。また直ぐに下がるのかもしれません…。
リファレンスの和訳を載せているサイトは沢山あるのですが、最新のv1.11に対応した
サイトは多くありません。そこでリファレンスに「v1.11」とバージョンを入れたのですが
1ヶ月位してもページランクは上がりません。それどころか少しページビューが下がりました。
v1.11という番号は「ぱっと見」でv1.1と見えてしまい、凄く古い情報なのかな？
と勘違いさせてしまっているような気がしたので、v1.11の表記は削除しました。
GoogleでjQueryと入力した時の検索候補で「使い方」というのが表示されるのをみて、
この言葉を使ったらページランクが上がるかな？と思ったので
「チュートリアル」を「使い方」に変更してみました。
バッチをかけてから「チュートリアル」を「使い方」に変換すると、文章が変に
つながって意味が通らなくなりそうと思い立ち、ログから変換された場所（220箇所）を
手動で確認することに…。
でも思ったほど問題はなく、問題のあるところは「使い方」のように前後に「」を
付けることでコンテンツとして理解できるようにしました。
はてさて、ページビューは上がるかな？
これまでブログでAndroidアプリの学習状況を書いてきましたが、やっとアプリを
リリースすることができました。iOSの時と同じようにリリース記念価格で300円の
ところを200円で販売中です。無料のLite版もあるので、まずはそちらで動作確認や
内容確認をしてください。
Androidではメールのアプリ側で送信確認ができないので、メールを起動した時点で
復習データを削除しています。メーラを起動したら破棄せずきちんと送付してください。
アプリの登録はiOSよりもはるかにラクでした。ここで備忘録的にメモ。
apple storeへの登録に比べるととっても簡単でビックリ。
クレジットカードがあれば1日で登録できます。
以下のサイトが詳しいです。
→参考：Developers.IOさま「Android アプリのリリース手順のまとめ」
・検索タグを設定できない。説明文を上手く作成しないといけないのかな？
・販売地域を限定できる（jQuery問題集は日本のみにしました）
・価格も販売地域ごとに変更できる。
最終的な動作検証はgoogle playからダウンロードしたアプリで行いたい。
googleではベータテスト用のアプリをアップできるので便利。
ただしベータ版のみを無料にはできないところは不便。
appleにあるようなプロモートコードがありません。
電子著名が正しくないと怒られる。これに引っかかる方は多いのでは？
住所にカンマを利用してはいけません。
→参考：ボクノライフ様「Androidアプリに電子署名をしてapkを書き出す際にkeytoolエラー」
Androidアプリってインストールする際に、インターネットへのアクセスや
GPSへのアクセスなどの権限への同意が表示され、なんか怖いって思うのですが
jQuery問題集は何の権限も必要ありません。
権限を何も必要としない場合は下図の右のように表示されます。
でもLite版では有料版へのリンクを貼っており、これはインターネット接続の権限が
必要そうなのに権限を得なくてもリンクできてます。ちょっと不思議。
やっとhtmlコンテンツをAndroid上に表示できるようになりました。
eclipseから実機のスクリーンショットを取ることができるので便利。
以下はis11tでコンテンツを表示した時のスクリーンショット。
nexus7のスクリーンショットは1920×1200もあるので省略。
nexus7の実機でviewportの設定（width=320）が効かなくて色々試行錯誤しました。
エミュレータなら問題なく表示されるのですが実機ではダメなのです！
やはり実機を購入しておいて良かったかも。
androidのwebViewはデフォルトではviewportの設定を無視するので
以下の処理を追加する必要があります。
しかし下記を設定しても実機のnexus7ではviewportを設定できません。
—————————————————–
Webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
—————————————————–
→参考：幽霊飛行船さま「WebViewでviewportサイズを指定する」
色々試行錯誤した結果、viewportが効かないのではなく320px以下の設定を
するとdevice-widthの値に強制的に設定される仕様ということが分かりました。
nexus7のdevice-widthは600px。コンテンツを正しく表示する値は320px
nexus7はミニタブレットのカテゴリなので、最悪の場合、対象から外しても良いかな？
と思ったのですが、以下の記事ではgalaxyS3/noteなども同じ問題があり
また、最近リリースされたスマホの解像度もgalaxy noteと同じなので、同じ問題が
あるかもしれず無視するわけにはいかなくなりました。
→参考：galaxy S3.. viewport meta tag doesn’t work
上記のサイトを参考にwidthの値を321に設定すれば、nexus7は理想に近くなるのですが
（右端に1pxの隙間ができます）。is11tでは正しく表示されなくなってしまいました。
なのでAndroid2.xでのみviewportを無効にするようにしたらposition:fixedが
効かなくなってフッターが正しく配置されません…。
上記のposition:fixedの問題を調べていたらandroid2.xではposition:fixedを
利用するためにはviewportでuser-scalable=no”を設定する必要がとのことです。
しかしviewportを設定しない場合、上記の記述が無くてもposition:fixedが効きました。
（is11tにて確認）
→参考：iPhone、Android position:fixed 対応状況と対応方法
上記のように「あっちを押せば、こっちが引っ込む」状態になり、どうするか困りました。
結局viewportの設定は一切利用せず、jQuery（javaScript）によってwindowの
幅から拡大率を算出して、動的にコンテンツを拡大するようにしました。
これなら検証できない未知の機種でも。対応できると思いますし。
以下のサイトが参考になりました。
→参考：iPhone / Andoird向けサイト制作のjQuery小技集
viewportではないのですが、画面の向きを固定するのにも少しハマッタのでメモ。
画面の向きを固定するためには以下の設定をAndroidManifestに追加するのですが
—————————————————–
android:screenOrientation=”portrait”
—————————————————–
上記の設定はapplicationタグで行うのではなくactivityタグで行わないと
いけません。
先週からjQuery問題集をAndroidアプリの作成方法を学んでいるわけですが
いよいよjQuery問題集のhtml&jQueryを読み込ませるところまで来ました！
実機のis11t（Android2.3）ではhtmlコンテンツを表示することができたのですが
nexus7エミュレータ(Android4.3)ではコンテンツが表示されせん！
htmlの読込自体は成功しているのですが、jQueryの処理の途中で止まってしまっている
のです。これは心当たりがあり、たぶん以下の問題だと検討を付けました。
→参考：永遠ログさま「Google ChromeでローカルファイルのAjax読み込みができない件」
だからエミュレータだと機能しないけれど、実機では機能するんだよ！きっと！
と甘く考えていた先週末…。
Android2.xのシェアが16%ほどある現在、私のスマホis11tは検証機として有用です。
しかし2年前の実機でしか検証しないのも問題なので、新たな実機の購入を決意。
前述のエミュレータの問題が気になっていることも大きかったです。
iPhoneに対するiPodTouchのような機種がAndroidにも有ればよいのですが
見つからず、結局ミニタブレット機のnexus7を購入することにしました。
接続に少し戸惑いました。タブレット情報のビルド番号を7回タップしないと
接続できないなんて…。以下のサイトが参考になりました。
→参考：時々、失業SEの開発日誌さま「eclipseにNexus7を繋げてみた」
nexus7でも実機ならis11tのように、問題なくローカルファイルが読み込めると
思っていたのですが、そうはいきませんでした。エミュレータとまったく同じ結果。
日本語キーワードでググっても情報が見つからず、英語で探すことに…。
そしたら簡単に見つかりました。以下の1行を追加するだけです。
※myWebViewはユーザーが作成したwebViewオブジェクト。
—————————————————–
myWebView.settings.setAllowUniversalAccessFromFileURLs(true);
—————————————————–
→参考：WebView Javascript cross domain from a local HTML file
1年前に購入したWindowsタブレット機は検証機としての他に、弥生会計で
会社の会計管理に役立っています。しかし、今回購入したミニタブレットって
検証以外に何の役に立つのだろう…。
今夏に予定されている新しい「kindle paperwhite」を購入しようと思っていた
けれど、その代わりになるかな？早速kindleアプリを入れて青空文庫を幾つか
ダウンロード。
なんだかしっくりしません。
私は文庫本を購入すると直ぐにカバーをはがして、結構ラフに本を扱うのですが
電子書籍だとラフに扱うこともできず気を使ってしまいます…。
ラフに扱っても壊れないで、ジーンズの後ポケット入れても安心な
電子書籍リーダーが有ればよいのに。
真ん中がnexus7。必要性には疑問ですがレスポンスも良いですし機能的には満足です。
とくに電源を切る時に古いブラウン管のような演出がステキ。
→参考：google検索「タブレット 必要性」
これからjQuery問題集をandroidに移植するための学習を始めます。
環境の構築はxcodeよりも簡単なのでwebコンテンツが作成できる方は
試しに挑戦してみると良いかもしれません。
xcodeでは有料のdévelopper programに加入しないと実機テストができませんが
eclipsではUSB接続しただけで簡単に実機テストができました。
私の実機はToshiba is11tで下図の最初にリストアップ。その下はエミュレータ。
とはいえ、少し躓いた部分があるのでメモ。まず参考にしたのは以下のサイト
掲載日時も新しく分かりやすいサイトです。
→参考：テックアカデミー様「MacでAndroidアプリの開発環境を構築する方法」
eclipsにAndroidのSDKをインストールするところで躓きました。
上記ページで「https://dl-ssl.google.com/android/eclipse/」を設定する部分が
あるのですが、ここでNextボタンがアクティブにならずクリックできない問題に悩みました。
で、色々確認したら何故か設定済みなようなのでスルーしました。
以下の様に「All items are installed」となっていたらスルーしてOKです。
※クリックで拡大
googleで検索するとたくさん出てくるのですが上手くいきません。
→参考：google検索「mac android エミュレータ 高速化」
最初はエミュレータが起動し「Android」のロゴまで表示されたのですが、その先に
進みませんでした。色々試していたら、機能していた高速化していないエミュレータまで
立ち上がらなくなってしまいました。
アプリを再起動してもエミュレータが起動せず困り果てたのですが、Macを再起動する
ことで回復しました。それ以来、高速化は諦めました…。
以下のサイトを参考にwebページを表示しようとしたのですが躓きました。
→参考：okomedaNet様「WebViewを使ったアプリ作成その１」
これはeclipseの利用バージョンの違いのためだと思います。私の利用している
eclipseのバージョンではレイアウトは以下の様に2種類あります。
このうち「hello world」が設定されているのはfragment_main.xmlの方なのですが
こちらにwebViewを配置してもアプリが起動できません。
activity_main.xmlの方に配置すればOKです。
これはxcodeのストーリーボードのように複数の画面を扱うようになったから？
xcodeではRUNボタンをクリックするとSTOPボタンになり、簡単にアプリを停止できる
のですがeclipsではSTOPボタンが分かりにくいところにありました。
以下のサイトが参考になりました。
→参考：日々の糧さま「android、eclipseでのデバッグ停止方法」
以下がDDMSの画面で、ここで停止したいアプリを選択し（下図ではcom.example.hello）
上部のSTOPボタンをクリック。
プロジェクトを作成する度に「appcompat_v7」が増殖していく…。
この問題は以下のサイトで解決。
→参考：もぐら王国さま「“appcompat_v7″フォルダの自動作成ってバグなの？仕様なの」
今回はここまで、次回はjQueryとAndroid間のデータのやり取りを学ぶ予定です。
先週はチュートリアルの2章までしかチェックできなかったので、今週は3章を
チェックしたのですが細かい文言を構成しただけで、内容を変更する事はありませんでした。
チュートリアルをチェックしている時に、新しくサンプルを作成したのですが
チュートリアルで紹介するほどシンプルにできなかったので、サンプルページに追加することに
しました。追加したのは以下の2ページです。
サンプルの最初に追加したのでチュートリアルの記事と絡めて丁寧に説明しました。
toggleメソッドが廃しされたことによってスイッチの作成が少し難しくなったので
サンプルページで作成方法を紹介するようにしました。
フラグは使わずcssクラスの有無でスイッチの状態を管理します。
→サンプル：スイッチの作成
マウスオーバーすると画像にキャプションを表示するサンプルです。これは他サイトでも
良く紹介されているのですが、いろいろ修飾され意外と複雑になっています。
ですので差別化のために、必要最低限のjQueryで作成するようにしました。
→サンプル：キャプションの表示
さて来週からはjQuery問題集をAndroidに移植するための勉強を開始します。
まずは開発環境からだ！
リファレンスの更新ばかりしていたので、次はチュートリアルの更新をしたいと思います。
今週更新したのは以下のページ。
対応ブラウザの内容を更新しました。
→チュートリアル：top
readyイベントを利用しなかった場合のサンプルを追加しました。
→チュートリアル1章：readyイベント「readyイベントを利用しないと…」
廃止になってしまったtoggleメソッドを利用したサンプルを削除しました。
→チュートリアル1章：初歩的なサンプル
廃止されたtoggleメソッドを利用していたので、これらをhoverを利用したサンプルに
作りかえました。ついでに説明を丁寧にしたのでページが長くなりました。
→チュートリアル2章：汎用的なアニメ(1)
→チュートリアル2章：汎用的なアニメ(2)
今週はチュートリアルの2章までしかチェックできませんでした。
チュートリアルのチェックが完了したら、初心者向けのサンプルを少し追加したいと思います。
それが終わったらjQuery問題集をAndroidに移植するための勉強をしようかな。