和田憲幸のブログ

札幌市白石区在住、個人事業のWebエンジニア 和田憲幸(45歳)のブログです。

グローバルサイトをつくるCGI(4)

iOS、Androidなどのスマートフォンへの対応と管理画面の調整。

2011-12-25 09:30:17
入力時間 / 10:42

各種スマートフォンに完全対応
ソーシャル関連の設定
ドラッグ&ドロップで並び替え
ファイル・画像関連の設定

いやぁ今日は日曜日ですね。いつもの日曜日ですね。ということでスマートフォンに対応。対応と書くのもおこがましいですが、最初からスマートフォンできれいに表示できるようにHTMLを組んでおいたので、スマートフォン用のHTMLを起こしたりはしてません。CSSを切り替えてるだけ。これこそが本来あるべき姿のスマートフォン対応だよね!!

グローバルサイトをつくる管理画面 ※パスワードはwada123
スマートフォンに対応したグローバルサイト

あとは管理画面。動かないけど見た目を調整して、設定項目を整理してみました。

スマートフォン対応

スマートフォン対応は前述の通りHTMLを変更する事なくCSSのmediaだけで対応しています。読み込むCSSを分岐させるのも面倒だったのでPCのCSSを上書きする形での実装ですね。手抜き全開。文字がとても大きくてすごく見やすいです。iPadではviewport指定のみでPC版と同じ表示。これが一番美しいから。

ソーシャル関連の設定

こうやって改めてソーシャル関連の設定を見なおしてみるとFacebookが超うざいという事実。昨今のFacebookはIPOを意識してるせいか、方向性にまとまりがないんだよなぁ。簡潔に言うなら美しくない。でもまあぁ時流だしね。グローバルサイトなのでmixiやはてなは抜き。かわりにLinkedInを入れてみた。Google Plusははやくガジェットを用意して頂きたいところだ。ハングアウトに期待大。

ページの並び替え

これはすごく悩んだ。数値入れてソートさせる方がいろんな意味で手っ取り早いんだけど、ドラッグ&ドロップでソートは一度やってみたかったので、並び替えは別ペインにしてしまいました。まぁ高頻度で並び替える事も無いだろうし、これはこれでよかったかな。jqueryのライブラリを使いました。

ファイル・画像関連

最初はドラッグ&ドロップAPIを使ってブラウザにドロップでアップロードにしてIEを殺そうと考えていましたが、ドラッグ&ドロップAPIの恩恵ってそういう部分じゃないんだよなぁ。複数ファイルのアップロードであれば、それもアリだけど単発であればファイル選択ダイアログで十分かなと。でもdefaultのファイル選択ボタンはダッサイのでちゃんと画像ボタンにしてます。

ということであらかたできてきた。

TAG

P.1026