スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

PSPで藍色通信を閲覧してみた

私は今までWebページはPCからしか閲覧していなかったんだけど、今日「PSPで閲覧したらどんな風にみえるんだろう?」って思ったので早速試してみたので少し感想などを書いてみる。閲覧条件はシステムソフトウェアバージョンCFW5.50GEN-D2で、ブラウザの設定は文字サイズ「」、画面表示「標準」で閲覧した。

更新: 2010-12-15

閲覧しやすいページとしにくいページ

可変幅レイアウトページのスクリーンショット
参考画像1(PNG, 480x272 px)

色々なサイトを見て回ってみたら閲覧しやすいページから非常に不便に感じるページまで様々だった(ちなみに私がお手本にしているサイトはいずれも予想通り問題なく表示された)。簡単に感想とか特徴などを挙げてみる。

まず閲覧しやすかったのは可変幅レイアウトのページ、PSPの横幅は480ピクセルなんだけどぴったりと合わせてくれていい感じだった(参考画像1)。あとは画像やJavaScriptをあまり使っていないページは当然ながら表示が速くてストレス無く閲覧できた。逆に固定幅レイアウトのページではけっこうな横方向へのスクロールが発生し閲覧しにくいものの、大抵はfloatによる複数段組でのレイアウトのため記事本文は丁度画面に収まる形になり最初に位置を合わせておけば、まあ普通に閲覧はできた(画像は用意しないよ、だって感じ悪いもの。珍しくもないし)。画像やスクリプトは量にもよるけど読み込みにかなり時間が掛かり予想外のストレスを感じてしまった。このblogも記事によっては多くの画像を利用しているので少し減らそうかと考えている。

ちなみに横スクロールの発生については表示モードを変更すれば対処は可能、ただしカラム落ちというおまけつき。他に始めは気付かなかったけどPSPのWebブラウザはタブでの複数ページ表示ができるタイプみたい。target="_blank"指定されているアンカーリンクを参照すると新規にページが表示される。でも同時に表示できるページは三つまでで、それ以上開こうとするとその都度現在開いているページを閉じるよう選択させられた。

また、可変幅レイアウト+floatによる複数段組を行っているページの場合、テキストが重なって表示されてしまいまともに閲覧できなかった。

藍色通信の場合

よそはよそ、うちはうちってことでここから本題、このblog『藍色通信』を閲覧してみての気付いた点などをメモしておく。

参考画像2,3はトップページでのスクリーンショットでそれぞれ位置を変えて写している。これはPSPのWebブラウザがCSSスタイルシートへどの程度対応しているのか気になったからで、これらを見る限り気付いたのは以下の点。

  1. min-widthプロパティへ対応していない。
  2. :first-letter 疑似要素へ対応していない。
  3. :after 擬似要素、contentプロパティへ対応していない。
  4. CSS Multi-column Layout Moduleに対応していない。

参考画像4~6は個別の記事ページなどのスクリーンショット。これらのページは大きい画像を使ってないから表示にあまり時間は掛からなかったけど、他の画像を複数表示させているページではけっこう長い時間読み込みを示すbusyアイコンが表示されていた(参考画像5の右下)。また、ページ描画は画面に合わせ変更されて表示されたが、画像はそのままのサイズを保持するためかなりの違和感がある(参考画像5)。

参考画像7はコメント表示のスクリーンショットで、これには疑問点がある。それはコメント本文が画面内に収まらずオーバーフローしていること。コメントを読もうとすると横スクロールをくり返すことになり非常に閲覧しにくかった。参考によそのblogのコメントを見てみたら画面幅に合わせて折り返されていたので、マークアップが悪いのかCSSが悪いのかどこかに原因があるんだろう。それがどこなのかはよく分からななかったけど。これも表示モードを変更すれば強制的に折り返してくれるようにはなる、けれど何とかしたいところ。

それで、PSPのブラウザの仕様を知りたくてちょっと調べてみたらSCEIが『PSPインターネットブラウザ向けコンテンツ作成ガイドライン』というものを公開していた。PDF形式で。調べてみたら予想通りPS3向けのガイドも公開されていたのでこちらも保存しておいた。ざっと内容を確認して気になる点があれば適当に纏めてみるつもり。

そもそもPSPから閲覧してる人がいるのかどうかは、気にしない。

追記: 2010-12-15

参考画像7で示したコメント本文のオーバーフロー現象について、原因判明及び解決したので追記しておく。

原因はコメント本文に width: 60em; というスタイルを指定していたせいだった。元々ウィンドウサイズが大きいときにコメント本文が横に伸びすぎてしまうのを防ぐ目的で指定していたのだけど、ウィンドウサイズが小さい場合を考慮していなかった。今はそれを max-width: 60em; に変更している。

参考画像8(PNG, 480x272 px): 修正後のコメント表示部分のスクリーンショット

PSPもそうだけどiPhoneなどの閲覧環境を考えたら、コメント部分だけのwidth指定は安易だったなと反省。

もう一つ、このブログは記事全体を包括しているdiv要素に min-width: 800px; を指定していたんだけど、それを body {min-width: 600px;} に変更した。あまり大きな数値を取るとディスプレイサイズの小さい機器で不便かと思ったので。逆に指定無しは本文が圧縮されすぎて非常に閲覧し辛いのでは? ということで暫定的に600pxとした。ちなみにPSPはmax(min)-width(height)には対応していないので関係無かった。CSS3のMedia Queryを利用してスタイルを振り分けるって方法もあるけど今はまだ手を出さない、CSS3はまだほとんどかじってもいないので。

まあ暫定なのでころころ変えてしまうかも、なんだけれども。

公開: 2010年12月12日, カテゴリ: ぶろぐばなし

現在の書き込みは、-件です。

現在の書き込みは、10件です。

552 :Lazy:2010/12/12(日) 18:48:51 ID:IdHmKniM
以前PSPでインターネットを使っていた時期がありましたが
非常に見づらいHPと見やすいHPがありました。
軽いから、重いからもあるかも知れませんがやはりレイアウトです。

藍色さんのおっしゃるように、HPによっては文字が重なったり、
画像が多すぎて快適に見ることができないHPも多々ありました。
当時はCFW5.00だったのですが、システムバージョンが上がれば
インターネットの動作の安定性も向上しているのでしょうか?

以前、PSP用のレイアウトで同じHPを別ドメインで設けて
いるHPも見かけましたよ。

何が言いたいのかよく分からないコメントですみませんorz
553 :藍色:2010/12/13(月) 01:24:53 ID:aV/dabIU
@Lazyさん
わざわざPSP向けにページを用意しなくてもユーザー設定で画像オフや画面表示変えたりで十分対応は出来るんですけど、標準の状態で問題ないのが望ましいかなあとか思ったり。blogサービスの仕組みじゃPSPブラウザ(User Agent)を判別してスタイル切替えとかも無理っぽいですし、このblogに関しては画像の使用に気を付ければそうひどい閲覧障害は無さそうかなって思ってます。
公式のWebコンテンツ作成ガイドには将来的にバージョンアップで性能向上する可能性はあるみたいなことは書いてありましたけど、そのガイド自体が古いですからね、実際どうなんでしょう。
554 :kirby@:2010/12/13(月) 16:19:05 ID:-
久しぶりにお邪魔したら全記事消えててあれー!?って思っていたら
PC版で見たところ問題なく見れたので安心しました(-。-;
スマートフォン版で表示しているとこうなるみたいです。
詳しく言うと、1ページ目の二つ目の記事が最初の記事(藍色通信創刊号)に置き換えられ、それだけ表示されて
それ以外は記事のスペースだけあって、中身の無い状態になっています。
すべて消えたと思っていましたが、2ページ目以降は時系列順に古い記事から見ることができました。

気づいたので一応報告させて頂きました( ̄^ ̄)ゞ
555 :藍色:2010/12/14(火) 00:41:41 ID:aV/dabIU
>>kirby@ さん
お知らせ頂き有難うございます。スマートフォンだと表示がおかしくなるんですか、それは困りますね。このままでは藍色通信休刊(?)の誤解を与えてしまうことに。kirby@さんは確かiPod touchで閲覧されてましたっけ。私も確認したいのですができないので、とりあえずはテンプレートをもっと簡略化していく方向で編集していこうかなと思います。
556 :カツヤマ:2010/12/14(火) 01:28:08 ID:-
先日記事を「古い順」にしたと仰っていたので、単にモバイルテンプレで初期の記事が先頭に来ているからでしょうね。
557 :藍色:2010/12/15(水) 01:31:30 ID:aV/dabIU
@カツヤマさん
モバイルテンプレートの存在は頭になかったです。試しにPCからモバイルページにアクセスしてみたら状況を理解できました。これは過去に内容を消してしまった記事を管理しやすいようにと最初の投稿日に纏めていたのが原因ですね。となるとあの空白記事をさっさと最新記事(またはその他の用途)として使ってしまわないといけないということになりますか、残り4つなので次から優先してそちらを使おうと思います。お陰ですっきりしました、有難うございます。

しかし、link要素のprev,nextの件で並び順を変更しましたが単純にそれだけで古い順にするというのもどうかという気がしてきましたね。一応新しい順でもprev,next入替えればいいわけですし。

追記:
記事の状態を『下書き』にすればとりあえずは非表示にできたのをすっかり失念していました。他の使い道を思い付いたので最新記事じゃなくて過去記事としてしれっと投下していくことにしました。
558 :カツヤマ:2010/12/15(水) 12:48:57 ID:-
ここのHTMLなら、いっそのことモバイルからのアクセスも通常テンプレを採用するという手法も有りかもしれませんよ。

あと、ついでに画像7のやつはソースをざっと見たら
div.enclosure {
min-width: 800px;
margin: 0 1em;
border: dashed #706756 1px;
}
多分「min-width: 800px;」この部分でしょう。横幅が800px以下で固定されることになります。
※ひょっとしたら「max-width: 800px;」の書き損じかなと思いましたが。
559 :藍色:2010/12/15(水) 23:16:47 ID:aV/dabIU
通常テンプレっていうとPC向けのテンプレってことですかね。つい先程試してみました。自分の携帯電話から見た限りでは見やすくなったんですけど異様に読み込みが長くなってしまいまして、script要素削除したりCSSの記述削ってみたりしたんですけど変わらないので今は元に戻しています。モバイル向けのページ作成は全くやったこと無いのですが何だかHTMLの一部の要素が無視されているものがあるような気がしました。まあ携帯機器のUAを気にしだすと収拾付かなくなりそうですけど。

あとmin-widthの件は記事に追記したんですけど他の箇所が原因でした。結局はコメント本文にwidth指定していたのをmax-widthに変更しておきました。PSPは仕様を確認しましたけどCSS2も微妙に対応していないプロパティがあるみたいですね。あまり気になるような項目はありませんでしたが。

※ ちなみにmax-widthはどのくらいが妥当か思い付かなかったので今は指定していません。min-widthを指定したのはあまりに小さいウィンドウサイズで極端に圧縮されるのを防ぎたかったためです。反対に大きい場合はマルチカラムを採用したいのですが、逆に閲覧環境が悪くなる記事がかなり出てきそうなのでごく一部で実験的に適用しているに留めています。
560 :カツヤマ:2010/12/16(木) 09:22:34 ID:-
全然違うプロパティでしたか。適当な事言って申し訳ないです。

もう一点、異様に読み込みが長くなるのはおそらくFC2の自動広告あたりかなあという気がします。自分の携帯電話ではスクリプトをオフにしているのを失念してまして気づきませんでした。大半の人はそんなことしてないと考えられるのでモバイルテンプレに戻す方が確かに良いですね。
561 :藍色:2010/12/17(金) 00:58:49 ID:aV/dabIU
いえ、カツヤマさんの助言のお陰で気付けたんですよ。自分でwidth指定しておいてすっかり忘れ去っていましたから。感謝してます。

広告もスクリプトでしたね、そう言えば。試しにスクリプトoffにしたら読み込み速度けっこう向上しました。