この雑記帖はスマホ版もあって、アクセスログをみると最近（世間さまのトレンドどおり）スマホ版へのアクセスが増えている。仕事がらみでもスマホ版のリクエストがあったりするだろう、ということで改めて見直し＆調べてみた。

この雑記帖のスマホ版を作ったのは2011年頃だから３年ぐらい前になる。

その頃、スマホ版といえばjQueryMobileというJavascriptのフレームワークを使うのが主流…というかコレはかなりスグレもので、ほとんど何も考えずにデータだけを流せば、ページ遷移などの機能面はもちろん、アイコンや部品などのデザインパーツなども当時流行りのものにしてくれて感謝・感激したものだった。

ところが、今週ちょっと（ほんとうにちょっと、ぐーぐる様小一時間程度）調べたところ、今やモバイル版はHTML5とCSSを駆使したレスポンシブデザインとやらで対応するのが主流。

そこまでのデザインは求めてないけど、どうせサーバー側で出力するデータを制御するわけだし、それに合わせたCSSを作って読み込ませるだけ、というのは魅力的。丸投げできるjQueryMobileに感謝しつつも、ちょっとクセのあるJavascriptの使い方（特にAjaxまわり）は、素人のわたしには難しかった。

てことで、今日は朝からごそごそと午前中をつぶして雑記帖モバイルを作り直した。

USER AGENTで判定して振り分け。モバイル専用のスクリプトへリダイレクトする必要もなく（＝URLが同じ、というのはネットだとポイントが高い）運用できることとなった。

表示系で少しひっかかったのでメモしておくと。

・表示がPC版を縮小しただけに見える

→viewport を device-width に設定すると勝手によろしくやってくれて解決

・イメージがハミ出してレイアウトが乱れる

→ imgに max-width:100% で解決

その他、モバイル用には width をピクセルなどの絶対値指定してあったところを％やemなど相対値で指定するだけでほぼモバイル対応は完了だった。

情報的にはPC版からサイドメニューなど削ったけど、特に問題もなさそう。

jQueryMobileの管理下でうまく動かせなかった（←わたしのスキルが足りなくて）Javascirptも今回のモバイル版ではPC版同様に動かせることとなった。

サンプルの表示

PC版

モバイル版（iPhone4S）

PC版だと横スクロールバーをマウスで動かすのがありえないインターフェイスなんだけど、モバイルだと指をスライドさせるだけで読めるので、これなら全然OKだった。驚いた。うーん、タッチパネルがページをめくる感じにしてくれるんだな。

あ。突っ込まれる前に。

特にリンクはスマホに最適化したものではないので使いにくくてUI的にありえない状態です、はい。

先週の木、金で行ってきたアフターミドル世代（45歳〜54歳）のためのキャリアデザイン研修。２日間行ってみて初日の印象とあまり変わりなく、正直なところ求めていたものとはちょっと違っていた。

わたしが求めていたのはもっと具体的なことで、自分の年齢やキャリアと求人状況、企業名が出て仕事内容が語られる・前例が語られるような講座、セミナーだと思った。そもそも、いまさらこの歳で自分探ししてるようでは人生詰んでるだろ。

『ミドル世代のキャリアデザイン研修』（初日） http://t2aki.doncha.net/?id=1366277947

「東京しごとセンター」 http://www.tokyoshigoto.jp

とはいえ、産業カウンセラーでコンサルティングもする講師の話が面白かったことも確か。なんせ、ひと前でしゃべり慣れてるし、カウンセラーとしての訓練、教育も積んでいる。

ひとつこれはいいかも、と思ったのが自己振り返りシート。

左から右に時系列。上下するグラフもどき。このとき良かった、このとき悪かったと人生の振り返り、というやつだ。

良いと思った時、悪いと思った時をこういうグラフにして、おのおの何がその時に起こったのか・やったのかをできるだけ細かく記入していく。あくまでも主観だ。上がった時下がった時の自己評価をすることで、自分になにがあるのか、自分の中の材料を探す。ということらしい。

意外にこれはハマった。へええ、そんなもんか、おれ。ということが出てきたので面白かった。「絵」にするのがいいんだろうか（時系列をどの幅でやるのか、それももしかすると自由に設定してその時の気分でこの時期限定とかやるのも面白いかもしれない）

ちょっとコレはオススメ。時間があったらやってみても損はないと思う。

という同じ世代の失業者たちと研修のスケジュールをこなしてきた。

特に交流会などがあるわけでもなく、お互い名前と顔が一致する程度。自分も含めてだけど、この時点で失業状態、会社組織にハマるかどうかかなり疑問。わたし自身は請負や業務委託をいくつか複数こなして帳尻合わせ、と思ってる。

研修でもワークライフバランスという言葉が使われたように、この歳になると、今後なにを重視していくかを考えつつ、その中のひとつとして仕事を入れていく、んだろう。

[更新]2026-02-02 07:42:03

Appleとgoogleが中心となって開発、採用してきたレンダリングエンジンのwebkit。今度googleがそのwebkit陣営から分かれて独自のBlinkというレンダリングエンジンの開発、採用するというニュースにびっくり、というかげんなりというか。

この結果、webkitは少数派に転落。今後はBlinkがシェアを握る、とか。

http://ascii.jp/elem/000/000/778/778554/

今まで、WEBサイトを作っていて、表示や動作をチェックするのは

・webkit → chrome safari

・gekko → firefox

・trident → IE

の３つだった（って、IEはもうほとんどノーチェック）のが今後はBlinkが増えて４つでチェックすることになる。

動画配信のECサイトのに在籍していた頃の悪夢が再びみたび。当時はアクセスログからもユーザーの8割はIE。

IEをターゲットに作ってWEB標準に合わせる vs WEB標準で作ってIEを別扱いにする

どっちにするか議論した結果、開発時点ではWEB標準の firefoxとchromeをターゲットに作って、IE用に別スタイルシート、ということでやっていた。そちらの方があちこちにノウハウもあって断然効率的だった。

同じソースを表示させてなんでこんなに違うんだ、と。IEの素行の悪さに殺意さえ覚えつつ。

webkitもBlinkも、FireFoxのGekkoに代わる？新しいServoも、WEB標準だろうからそんなに酷い違いは出ないと思いたい。

電子書籍もまったく同じ。アプリやデバイス、リーディングシステムで見た目が変わるのは勘弁してくれ。

「いつどこでだれが見ても同じものを」というのは紙媒体にはかなわない。

ユーザーに優しいかどうかは別の話になるけどね

無職50代の請負仕事に、電子書籍EPUB3ファイル制作もやってる（年金まで食っていかないと）

以前も書いたように元になるデータはHTMLだったりワードだったり。

電子「書籍」ということで、目次も凝ったデザインレイアウトを求められることがある。でも、いわゆる書籍の目次と違って電子書籍の目次は「ナビゲーション」で、アプリやデバイスなどのリーディングシステムと密接密着。

使えるタグが限られている。

http://www.idpf.org/epub/30/spec/epub30-contentdocs.htmlec-xhtml-nav

使えるのは、hタグ、リストタグ（ol li）、ハイパーリンク aタグに、spanタグぐらい。

WEBのHTMLのようにdivタグ使ってコンテナごとにデザインレイアウトはできないっぽい。また、リストタグの中はaタグかspanタグで装飾されている必要があって、テキストをナマで置いたり改行のbrもエラーとなる。

クライアント、デザイナーさんに説明してもらえるとありがたいんだけど、それが難しい場合もあるようで…となると、本来やっちゃいけないと思いつつ、下請けに「No」はない。

ナビゲーション文書（nav.xhtml）とは別に「目次」を作って並べてしまう。その時、ナビゲーション文書がspineに入っていると（kindleの場合？）「linear＝no」にしても表示されてしまうので、spineから外しておく。

epubcheckでエラーにこそならないものの、しっかり警告されるし、mobi化してプレビューワーでチェックすると、ナビゲーションは未定義になってしまう。

内容が変更になった場合など、目次をふたつ書き換えることになり、ミスの元となる。

電子書籍の特性を認知してもらうにはまだまだ時間がかかりそうで。そうこうしているうちにいろんなEPUB3ファイルが出回ることになるなぁ。

…うーむ。こりゃ石を投げられてもしょうがない、おれ。

twitterで情報をいただきました。ありがとうございます！

https://twitter.com/lost_and_found/status/326161673155121153

ナビゲーション（nav.xhtml）のlandmarksでHTML目次を指定すればイケる、とのこと。

（でも、変更時のメンテが面倒なので、ナビゲーション文書ひとつでやりたいなあ）

てことで、無事、ど腐れクロウラーのBecomeBotを撃退できてるようだ。

[client 64.124.85.211] client denied by server configuration:

読書SNSの方は、まだ人数が少ないのでなんとも判断のしようがないけれど、バグの検証なんかも進みつつ、かな。

ケータイの固体識別番号を取得するのってどうやってんのか、セッション管理はどうやってんのか、てなところを調べてみて可能ならケータイからのアクセスもしたいところ。

最低でも、自分の本棚チェックはしたい。ていうか、そもそもこいつの目的のひとつに「一度読んだ本の２度買いを防ぐ」というのがあって。ケータイでアクセスしてチェックできれば本屋で無駄づかいすることもなくなる、と。

まだ負荷チェックになるほどアクセスがないので、そこんとこをクリアしてから、の話かなぁ。

[更新]2026-02-04 10:32:07