Hatena::Grouptikeda

100508

100508

プレゼンテーション

100508tikeda合宿プレゼン

f:id:tikeda:20100508113142j:image

100508tikeda合宿プレゼン

ipadを買って業務効率アップ!

f:id:tikeda:20100508113141j:image

tikeda発表

業務に欠かせないはてなグループのiPad対応をしました

f:id:tikeda:20100508115923j:image

デモ

デモ

http://gtikeda.hatena.ne.jp/USERNAME/

iPadを持ってる人はアクセスしてみてください。

ない人は前によってもらうか、近くでiPadを持っている人に見せてもらってください

f:id:tikeda:20100508145343j:image

f:id:tikeda:20100508132142p:image

f:id:tikeda:20100508132259p:image

f:id:tikeda:20100508132234p:image

f:id:tikeda:20100508144754p:image

f:id:tikeda:20100508144755p:image

f:id:tikeda:20100508144754p:image

できてること

  • ユーザーページからグループドメイン以下がほとんど。後は放置
  • モジュール系からのリンクは一部本番へ行きます
  • 縦横によって日記のビューなど最適化されたり、ページによってサイドバーが消えたり調整しています
  • ズーム機能は事情により外してます(後で説明)

コンセプトとか・意図とか

  • スマートフォンでも普段グループをよく使うのでイメージがわきやすい
  • iPadはノートのよう。はてなダイアリーのコンセプトにまさにぴったり
  • 複数グループができて横断的にグループを見ることが多い。横断的に日記も見る
  • 機能的にやりたい事は色々あったけどtikedaができるかぎり一人でやれる範囲でやりました
  • ダイアリーの複数ブログ系のネタとかにしてもらえれば
  • 5/28に発売も決まった訳ですし、先行して手に入れたことだし、社内iPadのノウハウ蓄積になれば

制作面のポイント

viewportでの拡大率の変更

縦横のcssの切り替え

<link rel="stylesheet" type="text/css" media="all" href="/css/ipad.css">
<!-- ウインドウの縦横比を比較して縦長の場合のみ -->
<link
 rel="stylesheet"
 type="text/css"
 media="all and (orientation:portrait)"
 href="/css/ipad-tate.css"
/>

viewportの指定方法

<meta name="viewport"
 content="
 width=device-width,
 minimum-scale=1,
 maximum-scale=1,
 initial-scale=1,
 user-scalable=yes
">

メインカラム・サイドバーの独立スクロール対応

  • jkondoさん、chris4403さんに少し手伝ってもらいましたが、断念
  • mobile safariはiframeやoverflowによるスクロールはスクロールバーでなく2本指スクロール
  • ipadユーザーガイドやiPadがよくできてますので今後の参考に

参考

終わり