Boston Rain Diary

flexroll　というサービスを見つけた。 私のやりたい、ページ内の子要素をスクロールさせる事ができる。 Androidでも試していただいたら，動いた。 これだ。 ところが。 商用利用はライセンスが必要。 制作中のこのサイト、今はまだ小規模だけど、販促用なのでどちらかというと商用にあたるのではないでしょうか（どうだろ）。 おまけに最終更新日が2010年。動いているのなら悪くはないけど、Androidサポート以前に書かれたスクリプトのようなので、即時コメントに対応してくれるiscroll4のようなサポート的なもの＆今後のアップデートはあまり期待できない。 こんなに便利で充実しているのに、やっと探して見つかったぐらいだから、機能以外の所に、こういったハードルがあったのね。 あきらめた。 そして戻ってきたのが、やはりflickable。 こちらもここしばらく全くサポートされていないし、アップデートもなく、有志の改善プログラムを利用するまでだったんだけど。（その改善コードを加えるのが苦手だから、候補から外したけど） 考えてみれば、ここのデモページ自体はAndroidでも動いている。 そんなら、ダウンロードページから落とすんではなく、動いてるページのソースから落とせば絶対確実じゃないか。 なんちゃって。 さあ、またしても確認待ちだけど、どうだったかな…。 これがだめなら… ？？？ iscroll4を、ヘッダからフッタまで含めて全部入れ子にしてトライしようと思ってる。 それがだめなら、また考える。 ++++ Now playing.... Dreadlock Holiday / 10cc ++++

って言うことなのか… icrollはヘッダとフッターの位置を固定してるのがウリのようだけど、いじっても問題ないよね？と思ってたけど、説明も何度も読んで仕組みを理解したら、なんか、私の用途と違うかもしれないことに気づいた。 今日読んだ、ビギナーのためのicroll講座 http://mobile.tutsplus.com/tutorials/mobile-web-apps/introduction-to-iscroll/ このiscroll4はヘッダとフッタを固定。 それは、よくあるウェブサイトはだいたいこの構造が多いから。それにのっとって、真ん中のスクロールできるようにしたエリアにコンテンツをぽいぽいと入れていって、ウェブサイトを作る。 この、真中のスクロールが、「ページ全体のスクロール」という機能にあたるのではないでしょうか 私の目的は、該当ページ内にある、１つの画像ボックスをスクロールさせること。スクロールできる画像BOXの下には、メニューやら他のコンテンツを入れたい。入れたいけど、そこは画像ボックスのスクロールとは関係ない。普通のサイトみたいにページ全体がスクロールされればいい。 だから、ヘッダとフッタのpositionをabsoluteからrelativeに動かしてなんだりかんだり…いじっていたけど…それが、そもそもの間違いなのでは…。 それとも、スクロールの機能を入れ子にできる方法などあるのだろうか。いやそれはありそうだけど、それにしてももしフッターは絶対固定だよ♪っていう仕様なら、今回のサイトには使えない。 （ちなみに、今朝iscorllを入れてつくったページは、やはり、というべきか、Androidでは動きませんでした。） ++++ Now playing.... Out Of This World / ANGRA ++++

さっきのボックス、flickableじゃだめだったの忘れてた。 理由は、jQueryの最新バージョンを読み込むには、flickable.jsの中身を修正する必要があること（苦手）。 そこでiscroll 4。 iscroll-4 （ cubiq.org から） デモページは動いたので、今制作中のサイトにより近づけた形のデモを現在確認してもらっているところ。少なくともiPhoneでは望みのとおりに動いている。 お返事待ってる間に、画像とテキストのセットを表示させる製品紹介的なページのスマホ版を整えておきましょう。 ああーーーーろんどん〜〜 オリンピックーー … hold tight till the end〜〜 ++++ Now playing.... Lights Out / UFO ++++

へたっぴな図解をゆるしてくださいね。 こういうことがやりたい。 Webにアクセスした時、紫のボックスを表示させたい。だけどその中には、ボックスより天地幅の長い画像がおさまっている。ちなみにiframeではなく、ただのdiv。 で、この半分隠れた画像を、上下スクロールさせたい。スクロールさせることで、画像を見せたい。 方法は…iPhoneとiPadでは、cssで紫のボックスの天地幅を指定し、overflow:autoにしてhtmlの該当ボックスにimg srcで画像を貼り付ければ、問題なし、だった。 でも、これだとAndroidでは動かないみたい。スクロールできないらしい。 なので、今これを試している。 jQuery flickable コレ、サイト作る時に一度検討したけど、パソコンで上手いこといかなかったか何かでやめちゃったんだよね… 今はwp_is_mobileでスマホとパソコンの表示内容自体をふりわけたので、これでスマホ全般に対応できれば。 ところが、今のところiPhoneでは動かない。Androidもあまり動いてないっぽい。しかもiPhoneでは、このdivの真下にあるメインメニューが消えてしまった。（Androidは出てる！） …あ、これは解決。１つのスクリプトのタグのなかに複数のjQueryを羅列して書いていたので、いったんflickableのソースだけ単独で＜script＞＜/script＞で囲んでみたら、ちゃんとメインメニュー復活。 ま、それはおいといて… はぁ… 続きはまた夜かな… 今年は、山口県は宇部鴻城が甲子園出場なんだ〜。 ちなみに、母校の光高は準々決勝で山口県鴻城高等学校に敗れ、その山口県鴻城は決勝で宇部鴻城に敗れたようです。なるほど、がんばったんじゃね！ 宇部とかあの内陸のあたりは、いつも強いイメージがあるなあ。 がんばれ〜

http://www.connect-with.biz/memo-blog/2011/coding/googlemapsapi/526/ 軽さを追求するならこっち？ 今やりたいのは、Googleマップのマイマップを読み込んで表示させること。 もう実現してるんだけど、状況がこんなかんじ。 ぱそこん:ふつー埋め込みで問題なし ガラケー:静的MAPで問題なし スマートフォン:iOSは問題なし、でもXperiaでは落ちる ってわけです

http://musilog.net/webdesign/my-works/jquery-mobile-google-maps-api.php 追記 これ、使えるかと思ったら、jQuery Mobileっていうプラグインでスマホ用のWeb Site作るためのものなんだ？ がーん それ早く知っておけばもうちょっと楽だったのかしら。 でも、そのままだとどこかで見たテンプレートみたいになっちゃう。デザインのコンセプトは決まってるから、このまま１から作ったので良かったのかな。

やっぱり書いとかないと忘れる。 今朝のページ（PC用！）をサーバーにアップしたら、全然関係ないスマホ用メニューが消えた。わあー！ 多分原因は、jQueryの動きを入れようとしてPC用のヘッダーファイルをいじってるつもりがスマホ用のヘッダーを間違えて触っていたこと。もとに戻すようにアンドゥを何度も押したんだけど、完全に元通りになってない…とおもわれる。 で、どこだっけ？　ナンのjQuery参考にしたんだっけ？　シンプルなレスポンシブのドロップダウンメニューだったよね？　たぶんフランス語のページだった…のだが、これかと思われるファイルの動きが違う。 とりあえず履歴がついていたリンクをのこしておこう。 [JS]jQueryのプラグイン100選 -2011年総集編 from コリス [JS]jQueryのプラグイン100選 -2009年総集編 from コリス jQuery+CSSで実装するナビゲーションメニュー総集編 from Kachibito.net …今Evernote見て、クリップしたはずのデータを探したら、なんも保存されてなかった。 ログインしてなかったってこと…？　なんじゃー！（笑） ==============追記１=============== あった、これだ Demo: Mobile Navigation from Web Designers Wall ここもさんざんお世話になっているな。何かと参考にしたいページが多い。 ここから飛びました↓ [JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション from コリス ==============追記2 解決=============== ｝　っていうカッコが１個おおかった。消したらメニューが元通り。 あほっ