D-WEBトップニューススポーツ芸能2024年カレンダーベストセラー料理レシピ百科ログファイル一覧

Web - サイトをiPhone、スマホ対応にする (2015/9/11)


・スマホ対応を始めます
現在運用しているサイトのスマホ対応を始めようと考えています。当面アクセスの多い人気記事をやってみます。今までスマホには関わりたくないと考えていましたが、既に40%くらいがスマホだという資料がGoogleから出ていました。スマホを考えないとWebがなりたたなくなりつつあるようです。遅ればせながら、手をつけようと思います。WordPressには、プラグインがあるようですので、ブログはそれを利用しようと思います。一般のサイトに関しては、useragentで切り替えるようにします。必要に応じて、スマホ用のデザインが必要になると思います。

・スマホは4分の1
現在、カレンダー、今日は何の日、ウェブログをスマホ対応にしました。アクセスカウントを見ると、スマホのアクセスは4対1くらいの割合です。Web全体では40%くらいといわれていますから、やはり当サイトはスマホ用の検索エンジンからはずされているのでしょう。それはそれとして、引き続き主なコンテンツは順次スマホ対応を進めていく予定です。
スマホフレンドリーチェック

・iPhoneを使う
iPhoneを借りてきました。しばらく使って返す予定です。サイトの開発用なので、電話機能は必要なく、WiFiを使うテストをしています。WiFiはうまくいったので、最終的には、中古品店でiPhoneかスマホを買ってきて、開発用にする予定です。

・速くなければネットワークではない
WiFiを使ってみて、逆に内蔵のLTEというがすごく速いということが分かりました。少し驚きです。WiFiは無線だから遅いのは当たり前という言い訳が通用しなくなりつつあります。技術は進化しています。しかし、相変わらず外線(インターネット)と内線(LAN)との速度の差は大きいものがあります。この差が縮まらない限りクラウドコンピューティングは大きな矛盾を抱えることになります。その判断ができるかどうかはネットワーク技術力に依存します。インターネットは便利ですが、全てをWebサーバーで賄おうというクラウドには速度的に無理があります。「速さは力」という古いCMキャッチフレーズがありますが、時代が変わっても、コンピュータシステムには必要不可欠なものが「速さ」です。

・iPhoneでフォントのサイズがバラバラになる
ポータルサイトのスマホ対応が主なページに関しては、ほぼ終了しました。iPhone5を借りてきて、確認もしました。実際表示してみると、不備なところが目立ち、かなり直しをしました。一番ひどかったのは、ブロック毎にフォントのサイズが拡大、縮小されてしまうことです。
最初はstyleのfont-sizeの設定の不備かと思っていましたが、iphone-safariの仕様だと分かりました。最後はネットで調べて、「-webkit-text-size-adjust: 100%;」をbodyあたりに入れてやることで、やっと解決しました。ネットで問題になっているということは、iphone-safariのバグといってもいいかもしれません。

・ページのサイズの違い
JavaScriptでページのサイズを取得して、親のiframeのサイズを自動で調整するという処理をおこなっているページ(パーツ)があります。通常はscrollHeightで取得できますが、iphone-safariではそれができなくて、offsetHeightに直して、動作するようになりました。通常のブラウザでもoffsetHeightは使用できるので、これに統一しています。ドキュメントの座標に関しては、ipad等のタブレットでも違いがあるので、JavaScriptで扱うときは要注意です。上記の「フォントサイズがバラバラになる問題」とは違って、一応想定内の問題だったので対応できました。

タブレットとChromeの問題

・Androidのタッチイベント
先日、特定のページで、Androidタブレットのクリックが動作しなくなるという現象がおきました。多分下記のChrome41の問題と原因が同じではないかと思います。結論はそのページに書いてあったjavascriptのtouchendハンドラが何もしないときfalseを返していたのが原因でした。trueを返すようにして解決しましたが…。
詳細は別記事にします。

・古いHTMLは切捨て
陽気がよくなってから、サイトのスマホ対応や、古いHTMLの4.01へのバージョンアップに追われています。HTMLの問題は、Chrome41が古いHTML(css)の切捨てを始めたからです。JavaScriptでスタイルを操作しているところなどが機能しなくなっています。アプリのサイトはほとんど影響を受けます。最新のエディタで作成しているページ(新アドメディア等)やDOCTYPE宣言してあるページは大丈夫だと思います。古いホームページは一度チェックした方がいいかもしれません。
主には、「width:100」のような部分を修正しています。ただし、HTML4.01宣言をすると、margin、padding等も崩れる可能性があるので、結構大変です。今後作成するページは「」のHTML5にするのがいいようです。

 共有元ページ


スポンサー リンク



注目のタイトル

黒木華 (出演), 樹木希林 (出演), 大森立嗣 (監督) /日日是好日 通常版 [DVD]

お茶がもたらす人生訓を綴ったエッセイを黒木華、樹木希林、多部未華子共演で映画化した感動作。おっちょこちょいな典子は従姉妹の美智子と「タダモノじゃない」と噂される武田先生の下でお茶を習うことに。意味の分からない所作にふたりは戸惑うが…。



D-web ランキング ベスト

ベストセラー 危険なビーナス 東野 圭吾
音楽 【メーカー特典あり】 馬と鹿 ) ) 米津玄師
DVD 5×20 All the BEST!! CLIPS 1999-2019

ニュース
スポーツ
芸能 19歳グラドル石井優希「ぴちぴち」スクール水着に「かわええええええええ」「これは反則」の声

旬の話題 サッカー日本代表 新ユニフォーム

  共有ブログ


Copyright © 2024 D-web Portal. All Rights Reserved.

当サイトへのリンクは自由です。 D-web ポータル