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