jquery mobileがあれば簡単スマホ対応
いや、本当に。先日も同じことを書いたんだけど、jquery mobileを使えば、ほとんど何も考えることなくスマホ対応できる。スマホアプリと見た目も変わらないんじゃないか、これ。
フレームワークというと、phpだとcakePHPとかsymphonyとか、perlもCatalystとか、定評のあるフレームワークがあって webアプリ開発のコスト軽減になっている。という話。たしかに規則・お作法さえ理解して、その通りにスクリプトを書いていけば、あえて書かなくてもいいことがたくさんあるっぽい。ひとつのことを決めて書けば、それに付随するもろもろまで書いたことになる。
で、この jquery.mobileだ。
先日ちょっと触っただけで、踏み込んだことは言えないんだけど、自作のブログ(https://t2aki.doncha.net/mobile.pl)とお言葉データベース(https://t2aki.doncha.net/mobile_books.pl)をスマホへの移植に使ったレベルで言うと。
これはデザイナーのかわりをしてくれる、デザインのフレームワーク。
わたしは、データをごそごそ加工したり引っ張り出したりする部分に関しては、好きだし面白くて、データをあれこれいじってる時は時間を忘れてやってる、いわばデータヲタク。さらに、シムシティじゃないけど、使う側のことを考えて、サイトの動線やUIを考えて想像するのも楽しい。
サイトを作っていてうんざりするのが、そこから先。
ボタンが1pxズレてる?んなぐらい、いいじゃん。
アイコンがジャギってる?んなの気にしないって。
どうしてロゴの位置はここなの?なんとなくだ。
というのは、まるでダメ。
デザインの神さまは細部に宿るし、デザインはいちいちちゃんと説明できる理屈がある。データとかサイトの動線などとは別のレイヤー・別次元。そこんとこ、苦手なんだよねえ。
漫画でいうと、データを用意する・サイトの動線などの骨格・設計を決めるところは、絵コンテ、下書き。これでは完成してないし、読者は見向きもしてくれない。ここから先、デザインワーク=ペン入れ、仕上げがあって初めて希求力のあるサイトになる。
同じ情報を画面上に表示しても、1pxにこだわったサイトと、そこがぬるいサイト(たとえば、ページを移動したら1pxだかで画面が揺れるとか)では、「ぱっと見」の印象が違う。この「ぱっと見」は大事で、WEBを見ていて、そのサイトを「読む」に値するかどうかを判断するのは「ぱっと見」(そこまで、こだわるんか、というのは、なにをサイトに要求するのか、てことなので、また別の話。ここでは、そこ、こだわるところだろ、て話)
てことで、jquery.mobileだ。こちらが書いたラフ画を、一気に仕上げまで持って行ってくれるスグレモノで、感謝感動。専属のデザイナーをひとり雇ったようなもの。スクリーンショットのページなんて、わたしはなにもしていない。テキストをセンタリングするために1行~3行ほどcssに書いただけ。これをいちから書いたら、と思うとぞっとする。リストの区切り線とか、ボタンの影とか、テキストの位置とか、こんなのをcssで書けとか言われたら、いらいらしながら一週間がかり。jquery.mobileのおかげで、移植は各々実質1日で、なおかつ、スマホネイティブアプリのような画面のできあがり、となる。
で、javascirpt は、油断してたらすっかり主流でこんなことまでできるのか!?という存在感。クライアント側でなにをやったところで、信用できないし、結局はサーバー側でやるよね、と思ってたわたしが悪かったすまんかった。
html5になると、web storageとか。javascript がデータベースまで手に入れてるらしい。すごく今さらだけど、javascriptも勉強しなきゃいけないんだなあ。うううむ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
ajaxを強制終了する
名セリフ集、というともっともらしいけど。感想文が苦手で、ダ・カーポや、お楽しみはこれからだ、のように、読んだ本の印象に残ったフレーズを抜書きするようにしている。抜けがあったり、サボってたりしつつも、データとして蓄積されてるのが400弱。当然ながら、アマゾンに問い合わせにいって、書影など書誌情報詳細を引っ張ってくるスクリプトにしてある。
んだけど。アマゾンへの問い合わせが帰ってくるのを待つ時間が冊数分必要で、検索などで多数の本をリクエストすることになると、フリーズしたんか、ハングしたんか、というぐらい待つことになる。
なので、
著者名で検索の場合、とりあえず登録されているタイトルだけ別のコンテナに表示して、そのタイトルをクリックしたら、その一冊だけの分を表示するようにしよう。
と考えた。
1.著者名検索で、まずajaxでアマゾンに問い合わせにいく。
2.時間がかかるので、別コンテナに、ajaxでウチのDBに問い合わせてタイトルだけ表示する。
3.1がまだ終わってなくて、2で表示されたタイトルで気になったのをクリック。
新たに ajaxでアマゾンに問い合わせに行く。
4.一冊だけなので、すぐにアマゾンからの返答があって、メインエリアに表示される。
5.しばらく眺めてると、1でアマゾンに行ってたのが帰ってきて、メインエリアが書き換わる
6.びっくりする。
びっくりするのは困るので、3で別コンテナのタイトルをクリックしたら、まだ終わってない1の問い合わせを強制終了させたい。
という要件。
グーグルで検索して解決。ありがとうございます。
var req
req = $.ajax()
としておいて、ajaxで問い合わせるときに、
req.abort();
で、今、走ってるajaxの強制終了となる。
強制終了させて、新たに ajaxを走らせたら、その結果は success ではなくて、error で受け取る。これで、とりあえず問題解決。
そんなこんなの小説名セリフ集のページは こちら
ちなみに、こんなフレーズを抜粋。ときどき眺めてはニンマリしております。
歩き去っていく男に、ぼくは呼びかけた。
「あなたは神を信じていますか?」
男は立ち止まって、しばらくじっとぼくを見つめた。その質問になにか裏がないか、疑っているかのように--ぼくがこの教区民に雇われて、男の信仰の深さを調べてでもいるかのように。もしかすると男はただ、深夜に町の広場にすわって、赤の他人に信仰の確証を乞うほど絶望的になっている人間を、如才なくあしらおうとしていただけかもしれない。
男はかぶりをふった。
「子どものころは信じてた。だが、いまは違う。神ってのは、なかなかいい思いつきだが……まるで意味をなさん」
男はまだぼくの動機をはかりかねるように、疑い深げな目でこちらを見ていた。ぼくはきいた。
「では、生きることがつらすぎはしませんか?」
男は笑って、「四六時中ってわけじゃないさ」
[06/01 10:37:49]
そういや。きちんと考えずに作っていったもんだから、気がついたらajaxだけのページ遷移のないページになってしまった。
SEOを考えるとまずいので、ECサイトなんかだとこんな作りは却下。
集客に関しては、googleさま yahooさまから一見さんを拾い集めるのがセオリー。この名セリフ集は検索エンジンから見ると1ページだけの存在で、ユーザーにとって価値は低い、と判断される。外部リンクもないし。
ajaxについては、流れを追うのがけっこう面倒で、デバッグしにくい、という面と、ページをいちいち作る必要がなくてラクチン、という面が、作る側にはあって、無問題に大歓迎とは言い切れない。でも、使う側から見ると。スマホな感覚というか、そのページの中だけで済むので、ページ全体が書き換わるのを待つ必要がなく、コンテンツを読み込む間にほかのコンテンツを眺めてればいい。錯覚かもしれないけど、待たされないってことで、疲れない・ストレスが少ないページになるような気がする。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」