ラベル ブログ の投稿を表示しています。 すべての投稿を表示
ラベル ブログ の投稿を表示しています。 すべての投稿を表示

2018/03/23

Seesaa ブログでスマホでも強制的にパソコン用ページを表示させる

Seesaa のブログはスマホからアクセスすると自動的にスマートフォン専用のページに移動する仕様になっています。

しかし、私のブログ「アポロ漫録」では縦書き表示に最適化していてスマートフォン専用ページに移動するのは都合が悪いので、コンテンツをカスタマイズして JavaScript で強制的にパソコン用のページに移動するようにしてありました。

ところが、今までのスクリプトでは移動がうまくいかずに無限にリロードを繰り返してしまう不具合がありました。一度うまく移動できれば二度目からは不具合の発生頻度は減るので問題ないかと思っていたのですが、何度かテストしてみると思っていた以上に発生頻度が高いので対処が必要だと思われました。

今までのスクリプトは以下のようになっていました。

document.cookie = 'force_pc=1; max-age=157680000; path=/';
document.cookie = 'force_sp=0; max-age=157680000; path=/';
if(navigator.cookieEnabled){
    location.reload();
}

最初の 2 行でブラウザの Cookie に PC 表示のフラグをオン、スマホ表示のフラグをオフにする書き込みをしています。その後、ブラウザの Cookie が有効ならページを再読み込み、無効なら何もせずに終了していました。これだけのシンプルなスクリプトですが、理論上は問題なく動作して PC 表示が強制されるはずです。

いろいろと試行錯誤してみたのですが、どうやらページを再読み込みする際に端末に保存されているキャッシュを表示してしまうのが原因だったようです。以下のように location.reload() に true という引数を追加することでデータをサーバーから読み込むことができるようになります。

document.cookie = 'force_pc=1; max-age=157680000; path=/';
document.cookie = 'force_sp=0; max-age=157680000; path=/';
if(navigator.cookieEnabled){
    location.reload(true);
}

こうすることで安定してほぼ確実にパソコン用のページが表示されるようになりました。

2015/04/17

SlideShare を利用して PDF 文書をウェブサイトに埋め込む

PDF 文書を作成する際に、スマホの縦長の画面でも読みやすいように PDF 文書のレイアウトも縦長の長方形(縦置き)にすることがあります。

縦置きレイアウト PDF 文書のサンプル
FILE103.pdf

上記のサンプルはパソコン等でダウンロードして Adobe Reader で開くと、横長の画面の場合には 2 ページ分を左右に並べた見開きレイアウトになります。画面が縦長のスマホでも横長のパソコンでも自動的に読みやすいレイアウトになるように設定してあります。

(Google Chrome などのブラウザに内蔵されている PDF 閲覧機能を使用する場合には見開きレイアウトで表示できないので、この文書の閲覧には適していません。)

ウェブ上で共有される PDF 文書の場合、通常はリンク先からダウンロードして端末内のアプリ等で開いて閲覧するのですが、SlideShare というウェブサービスを利用することでウェブサイトに埋め込んでウェブブラウザで直接表示させることもできます。

2013/06/19

縦書きのブログをリキッドデザインにしてみる

縦書きのブログ「アポロ漫録」はもともと横幅が 1000 ピクセルくらいまでは画面の幅に合わせて伸縮する半リキッド(可変)デザインだったのですが、その設定を少し変えて、横幅がどんなに広くなっても常に 100% の横幅で表示するようにしてみました。

縦書きの場合は画面が横に広くなればなるほど読みやすくなりますからね。高解像度のワイドスクリーンで表示するようなときには縦書きのメリットが最大限に生かされると思います。
ただ、IE 以外のブラウザでは横書きで表示されるので、その場合には横幅が広すぎると読みづらくなってしまいます。

そこで、IE 以外のブラウザの場合には今まで通り 1000 ピクセルくらいまでを上限としました。

ついでに IE 以外のブラウザについては記事の高さを可変に変更しました。
(というか、本当はこちらの対応のついでに IE の横幅を可変にしてみたんですけどね。)

今まではブラウザの種類に関係なく全て高さを固定して、はみ出た部分はスクロールして読むようになっていました。

これはこれで便利だとは思っていたのですが、アンドロイドのスマートフォンのブラウザで見たときにスクロールできなくて記事の全文が表示できなかったりしたので、このような問題の対処もかねて、IE 以外のブラウザの表示を修正しました。

最新の CSS3 では縦書きの対応が進んでいて、Safari や Chrome でも縦書きができるということで話題になっていたりもしますが、現段階では実装が中途半端で使い物にならないので、アポロ漫録での採用は見送っています。

iPhone のブラウザ iOS5 の Safari でも縦書きに対応したというような記事を見かけたような気がしますが、実用レベルに達したものとなっているのでしょうか?

Chrome の縦書き対応については割といいところまで来ているのですが、長文の記事が画面からはみ出て横にスクロールしなければ読めないようなときに、IE ならマウスホイールで普通にスクロールできるのですが、Chrome の場合はスクロールバーをドラッグしたりしないとスクロールできないというのが致命的でした。

Firefox においては縦書きに手をつける気配すらありません。将来的に WebKit に切り替わる Opera は自動的に縦書き対応となることを期待してもいいのかな?

最近の EPUB などの電子書籍の流行のせいもあってか、WebKit 系のウェブブラウザで今さらになってやっと縦書きができるようになったことが注目されているようですが、IE ではもう何年も前から実用的な縦書きの実装が完了していたことの方がよっぽどすごいと思いますけどね。

縦書きに関する情報も、今のところほとんどが「縦書きにできます」という解説記事ばかりで、実際にニュースやブログで標準的なスタイルとして採用しているサイトは全く見かけません。

ちょっと前は「ウェブで縦書きなんてありえない」「縦書きは読みづらいから必要ない」などという意見が多かったと思いますが、今では「どうしても縦書きで読みたい」というような人も増えてきていると思います。

日本人は本当は縦書きが好きなんだってこともそろそろ気づいてきたと思うので、縦書きのサイトもどんどん増えてくれるといいんですけどね。

2012/05/11

Seesaaブログの携帯での表示に対処する

メインのブログ「アポロ漫録Seesaa)」を携帯(ガラケー)で見ると改行が削除されてしまうので非常に読みづらい。

HTMLレベルの話をすると、改行の BR タグならば削除はされないのだが、DIV だとか P といったブロック要素のタグが削除されてしまうようだ。私は Seesaa でブログを書く時は Windows Live Writer を使うので、改行はほぼ必然的に P タグを使うことになる。今まではそうしてきたし、この方が CSS でデザインしたりするときには何かと都合が良かったりもするのだが、携帯での閲覧に配慮するとなると何か手立てを考えねばならぬ。

BR タグで改行した場合に問題になるのが、段落一行目の字下げと、段落間のマージン。いずれもスタイルシートで対処してきたものなのだが、そのポリシーを曲げて、字下げに全角空白を使うことと、マージンには空白行を挿入することで対処することで何とかなる。

PC 向けのページは見た目だけならこの対処法で何とかなる。しかし、実際に試してみたところ、携帯表示で削除されるのはブロックレベルのタグだけじゃなくて、なぜか行頭に字下げのために挿入した全角空白まで削除されてしまう。そのため、改行は反映されても字下げは反映されない。閲覧性を高めるためには空白行の挿入は必須条件となりそうだ。

ただ、過去の投稿もすべて修正するのは大変なので、今後の投稿のみに適用する CSS クラスを新たに設定して、当面の間はそれで対処しようかと思う。

携帯だけでなくスマホの場合にもデザインは変更されてしまうのだが、改行は反映されているので P タグなどはそのまま残っていると思われる。スタイルシートはほぼ無効化されているのでデザインはいまいちだが、文書としては最低限の体裁はどうにか保っている。

将来的にガラケーが絶滅してスマホのみの対応でいいという時代が来れば BR タグを使った改行で記事を書く必要もなくなるのだが、それまでの一時的な(といってもいつまでなのか見当もつかないが)対処として、この方法で投稿していこうかと思う。

やっぱりメインのブログは重要なお知らせとかもあるから携帯でもちゃんと見てもらいたいからね。

Seesaa 以外のブログはどうかと思って表示を確認してみたけど、どこも似たり寄ったりかな。改行が反映されるところもあるんだけどね。見づらいことには変わりない。

最悪なのは、この Blogger のブログ。文字化けで読むことすらできない。ダメね、Google!

2011/11/11

ウェブサイトのiPhoneでの表示をパソコンで確認する方法

ウェブサイトの iPhone での表示をパソコンで確認するには Apple のウェブブラウザ Safari を使うと簡単にできます。

Safari の開発メニューを有効にして、ユーザーエージェントから iPhone を選択するだけです。

スマートフォンでのウェブサイトの表示はパソコンとそれほど変わらないのではと思っていたのですが、最近はブログサイト等でスマートフォン用のテンプレートが導入されているところが増えてきていて、スマートフォンではどんな風に表示されているのか気になっていたのです。

そこで Safari を使ってみたのですが、スマートフォン用にデザインが変わるサイトは意外にたくさんありましたね。

携帯サイトのようなデザインになってしまうところが多かったので、そういったことも考慮してブログの記事を書いたりする必要がありそうですね。

2011/11/06

ブログに携帯の絵文字が表示できるかどうか実験

auの携帯からメール投稿で本文に絵文字のある記事を作成してみました。
  • Yahoo!ブログ … パーフェクト! すべての絵文字が表示されました。
  • gooブログ … 半分ほど表示できてました。
  • アメブロ … 半分ほど表示できてました。 
  • Blogger … 全滅。読めない記号に置き換わってました。
  • WordPress.com …全滅。絵文字の部分は削除されてました。
  • freemlブログ … 最悪。絵文字の部分はすべて文字化けしていました。
SeesaaとFC2は未調査です。

Yahoo!ブログで表示された絵文字

2011/02/11

三点リーダーは文字化け

Seesaaのブログで記事のタイトルに三点リーダーを使うと文字化けしちゃいました。
文字化けというか、文字参照のコードみたいなのが表示されちゃってるわけね。
代わりにこれ「・」を使った方がいいのかな。

2011/02/10

ブログの画像を横に並べる

偶然パノラマ写真」で2枚の画像を並べて表示するために、IEとそれ以外のブラウザでの表示を同じにするのに苦労した。

2枚の画像を段落で分けて横に並べるとIE以外では縦に並んでしまうので、テーブル(表)を使ってみたら、今度はIEで縦に並んでしまう。

そこで、IEの縦書きモードを解除してみたら、今度は右側に余白ができてしまう。

テーブルの横幅をきちんと設定したらようやく意図した形になった。

2011/01/17

YouTube の動画の共有ボタンから Blogger に投稿してみる



YouTubeの動画のページにある共有ボタンの中にBloggerに投稿するボタンもあったのでためしにそこから投稿してみます。

ポップアップウィンドウが開いてシンプルな投稿画面が出ました。

2011/01/14

FriendFeed でブログの記事をサイトに埋め込んでみる

フィードを埋め込むためのブログパーツはいろいろあるのですが、とりあえず FriendFeed を使ってみることにしました。

FriendFeed は沢山あるブログの記事を一つにまとめることもできて便利なのですが、ここではアポラボログの記事だけにしておきたいと思います。