今日も引き続き、モバイル対応に関する修正をちょっと。

7インチタブレットの縦向き程度の画面でははみ出さないようにしたいかなと考えてるんですが、
大きめの<textarea>使ってる所でmax-width指定していない所ではみ出しちゃう感じだったんで、いくつか修正。
まだはみ出すところ残ってると思いますが、
現状CSSの@viewportに対応したブラウザがOperaしかないようなんで、
小さい画面の端末でOpera以外だと縮小表示されちゃうと思います。

<meta name="viewport">設定すればOpera以外でも縮小表示を回避できるんですが、
縮小表示を回避したとしても、現状ではブログエディタはタッチパネル厳しいんで、
CSSの@viewportに各ブラウザが対応するまで待とうと思います。
CSSでできればサイト全体を一括設定できるんで。


ブログエディターの方は、何度か書いてますけど、
Opera = contenteditableが機能しないのでどうんいもならない。
Webkit(標準ブラウザ) = contenteditableに日本語入力ができない。（英語キーボードだと問題ないんだが、複数試してるが、日本語IMだと全部ダメ）
Firefox = 入力はできるが、文字選択ができず、コンテキストメニューも出せない。
ってな状況です。

マウスが無いのでコンテキストメニューは厳しい感じなんですが、
コンテキストメニューなしでもある程度は編集できますし、
この件に対応することでPCで操作しにくくなっても困りますんで、
コンテキストメニューはブラウザが普通に対応しなければ放置かなと思います。

contenteditableへの入力の方も、ブラウザが対応していないんじゃどうしようも無いので放置。
こっちはそのうちブラウザも対応してくるんじゃないかと。

Firefoxはコンテキストメニューは別として、現状で入力はできるので、
@viewportに対応してくれれば結構使えるようになると思います。
@viewportの実装もそんなに時間はかからないんじゃないかと・・・

Google Chromeのbetaが21になっていたので試してみました。
うちで使う機能には影響なさそうな感じで、
まだ新エディタの方には対応できません。

また"モバイル最適化1カラム"テンプレート修正しました。

PC（画面サイズが大きい場合）には記事タイトルはリンクになりますが、
リンククリック時もページ移動の前に「開く」「閉じる」処理が発生していたので、リンクの際は処理が発生しないようにした。
小画面端末で記事を開いて閉じた後に画面サイズが大きくなった場合に記事が消えていたんで、横幅1000px以上の場合は!importantで常に表示にした。

androidのコンテキストメニュー周りもう少し実験してみたんですが、
<a>の場合、Firefoxでは長押しでoncontextmenuイベントは発動するみたい。
けど、この方法でも他のブラウザはダメで、
contextmenu属性と<menu>でのコンテキストメニュー拡張は機能せず、「リンクをブックマーク」の標準一項目しかでない。
<a>以外だと長押ししてもoncontextmenuイベントは発生しない。

というか、<a>でコンテキストメニューが出せたとしても何も解決しないかな・・・

ブログ管理ページのコメント管理等が、
onmouseoverでマウスカーソルが重なった時にポップアップ表示する仕様なんでタッチパネル機で表示できない・・・

ってのをどうにかしようと思ったんですが、
タップした際にonmouseoverは発生するみたい。
Opera、Firefox、Chromeで確認したけどどれも発生する。

で、先日ブログエディターでmousedownからのドラッグ要素移動がタッチパネルでできなかったので修正しましたが、
mouseoverが発生するのにmousedownが発生しない？
ってわけでイベント発生するかちゃんと試したんですが、
mousedownもタップの際に発生した。
mousedownの後の移動のmousemoveが問題だったらしい。
ちょっと発生させにくい感じだが、mouseupもタップで発生する。
mousemoveは多分発生しない。
drag系も修正の前に試したがダメだったはず。


ってわけで、
mouseover系の処理は修正する必要ない感じで、
先日修正したmousedownからのドラッグ要素移動はmousemoveがダメだからやっぱ修正する必要あった。
あとcontenteditableとcontextmenuがどうにかなればタッチパネル完全対応できる感じではあるんだが・・・

XML-RPCアプリ作って配信しちゃうってのも考えてるが、
HTMLのcontenteditableが使えないといい感じのエディタ作るのはめんどい。

先日、コメントのURLへのhttp:又はhttps:以外から始まるアドレスを受け付けていたのを制限しましたが、
エスケープ処理は入っていたのでスクリプト駆動はできませんでしたが、
ダブルクォート入りのアドレスを受け付けていたので再度修正しました。
URLを入力した場合で通常URLに使われないような文字が含まれている場合はエラーになります。

これはトラックバックの方も同じようになっていたので、
今回はトラックバックの方も同じような修正を入れました。

viewportを設定しないとモバイル機器で勝手に縮小されてしまう問題で、
Opera以外は対応していないようなんですが、公式サイトのCSSに、
@-o-viewport
を設定しました。
@viewport
やってみても予想通り他のブラウザはダメでした。

これでモバイル機器のOperaで公式サイト見た際に縮小表示されなくなったので見やすくなったと思います。

Operaで各ページ確認しましたが、
ブログ記事編集ページのタイトル入力部分が横幅収まらない可能性があるので修正しました。
あと、
エディタの方で、幅が狭いと「ソース←→プレビュー」のモード切り替えのボタンが左のボタンと重なる。
って問題がありましたが、
修正しようかとも思いましたが、
旧エディタを修正しちゃうとメインテスト環境のFirefoxでは急エディタが使用されないので、
不具合が生じた場合に気づきにくいのでやめました。
Firefoxが @viewportに対応するか、Operaが新エディタに対応するまでは放置にします。
現状、タッチパネル機でのエディタ使用は色々無理ありますし。

ブログ記事のタイトルの長さは上限255byteなんですが、
メール投稿の場合255文字（765byte程度）まで受理されてしまっていました。
長いの投稿されて気づいたんですが、255byteまでに制限しました。
すでに投稿されてしまってるのは放置になると思いますが、問題が生じるようなら削除します。

記事タイトルが2行以上になった場合に問題があったので修正しましたが、
その修正により画面サイズが大きい場合でもタイトルクリックで記事ページへの移動ができなくなっていました。

2行になった場合でも高さ100％になる感じに出来たので、そんな感じで再修正しました。

先日の管理ページの記事一覧のキーワード抽出の仕様変更ですが、
公開サイト側の検索しようも同様に変更しました。

Wikiも管理ページには検索機能はありませんが、公開側には検索機能があるので、
そこも修正するかもしれません。