Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Movable typeでモバイルギャラリーサイト

3,880 views

Published on

  • Be the first to comment

Movable typeでモバイルギャラリーサイト

  1. 1. Movable Typeでモバイルギャラリーサイト構築
  2. 2. 自己紹介• 塚口祐司• 職業:Webデザイナー• ゆるふわ勉強会運営• Movable Type歴 – Movable Type3で個人ブログ – Movable Type4~メインにテンプレート制作 – MT Cafe Tokyo 第1回&第2回参加• ブログ – http://creator-life.net/ – http://code-life.net/• ソーシャル – twitter:@regret_raym – facebook:regretraym
  3. 3. 今日のテーマMTでモバイルギャラリーサイト
  4. 4. 写真ギャラリーサイト MOBATASO
  5. 5. MOBATASO?
  6. 6. 無料写真素材サイトPAKUTASO MTで作られています! 管理人はsusi-paku(@susipaku)さん
  7. 7. 無料写真素材サイトPAKUTASO ろくろまわしてる写真があります。
  8. 8. 無料写真素材サイトPAKUTASO おいしそうな写真もいっぱいあります
  9. 9. 見ていて飽きない写真が多い
  10. 10. で、
  11. 11. これのモバイルをざっくり考えてみる
  12. 12. PAKUTASO を MOBATASO に
  13. 13. 管理人はnise-pakuさんに
  14. 14. モバイルギャラリーサイト MOBATASO / もばたそ は
  15. 15. PAKUTASO/ぱくたその写真が 閲覧できます。
  16. 16. 更新は?• 1日5枚程度の同種類写真を追加更新する• 1日1記事更新• 入力する内容はタイトル、本文、記事ファイル 名、タグ(ジャンル分け)など。
  17. 17. コンテンツ遷移とMT構成を考えます TOP このサイトにつ いて ジャンル別 新着写真一覧 一覧 写真一覧 写真一覧 写真 写真
  18. 18. コンテンツ遷移とMT構成を考えます インデックス TOP テンプレート ブログのみで構成 このサイトにつ ウェブページ いて ジャンル別 インデックス 新着写真一覧 一覧 テンプレート 写真一覧 写真一覧 写真 写真 エントリーアーカイブ
  19. 19. プラグインはこれを使います• ケータイキット(モバイル対応) – http://keitaikit.jp/• EntryImExporter(CSV登録) – http://www.skyarc.co.jp/engineerblog/entry/entryimexporter.html
  20. 20. (1)デザインを作ります• スマートフォンサイト• トップ写真はスライド• おすすめ写真• ブログ記事で管理
  21. 21. (2)デザインを作ります• フィーチャーフォンサイト• おすすめ写真• ブログ記事で管理
  22. 22. アイテムで管理…?• 記事別にアイテム一括アップロード&登録が できなかったので、FTPでアップしてファイル名 で記事と関連付けました。
  23. 23. と思っていたら
  24. 24. というのを本日発見しました。
  25. 25. 写真を加工します• 大きいサイズの画像とサムネイル用を用意 640px×縦可変 80px×縦可変
  26. 26. 写真を加工します• Photoshopのアクションでサイズ一括変換
  27. 27. ファイル名を変更します• 命名規則をつけて、ファイル名一括変更ソフトなどで変換 する。 元ファイル名:SSK_utoutosuruneko.jpg リネーム後:neko0001_001.jpg~ ※記事のbasenameをこれにする ※テンプレート記述例 <img src=“/images/<$mt:EntryBasename$>_001.jpg” alt=“画像” /> 001などの番号は、ループ内でカウントなどさせたり。
  28. 28. FTPで画像アップします
  29. 29. コーディングします• ガラケー特有コーディング – spacer.gifの活躍 – pタグはちょっと・・・ – フォントサイズはmediumとsmallで – h1、h2タグとかはmargin、paddingとfont-size調整• スマートフォンコーディング – HTML5 / CSS3(Sass+Compass) – sprite.png – ratina対応 – text-shadowの罠
  30. 30. コーディングします• ガラケー特有コーディング – spacer.gifの活躍 – pタグはちょっと・・・ モジュールなどで、変数セットなど – フォントサイズはmediumとsmallで あらかじめ用意しておくと便利! – h1、h2タグとかはmargin、paddingとfont-size調整• スマートフォンコーディング – HTML5 / CSS3(Sass+Compass) – sprite.png – ratina対応 – text-shadowの罠
  31. 31. コーディングします• ガラケー特有コーディング – spacer.gifの活躍 – pタグはちょっと・・・ モジュールなどで、変数セットなど – フォントサイズはmediumとsmallで あらかじめ用意しておくと便利! – h1、h2タグとかはmargin、paddingとfont-size調整• スマートフォンコーディング – HTML5 / CSS3(Sass+Compass) – sprite.png HTTPリクエスト数を減らしたり、 – ratina対応 画像のサイズなどを「JPEGmini」など使って削減 – text-shadowの罠
  32. 32. モジュール記述例• Spacer.gifの場合 <mt:SetVarBlock name="spacer"> <div style="height:10px;"> <img src="spacer.gif" alt="" width="1" height=“10" /> </div> </mt:SetVarBlock> <$mt:GetVar name=“spacer”>で呼び出し
  33. 33. テンプレートを構築します• テーマを使う サーバのthemesフォルダ に自分のテーマを入れる
  34. 34. テンプレートを構築します• テーマの作り方は?
  35. 35. スマートフォン振り分け• ケータイキットならMTKeitaiIfSmartphoneタグ <mt:KeitaiIfSmartphone> <!-- スマートフォンの内容 --> <mt:KeitaiElse> <!-- フィーチャーフォンの内容 --> ※3キャリアやそのほかに分けるなら <mt:KeitaiIfCarrier in=“i"></mt:KeitaiIfCarrier> <mt:KeitaiIfCarrier in=“ez"></mt:KeitaiIfCarrier> <mt:KeitaiIfCarrier in=“s"></mt:KeitaiIfCarrier> <mt:KeitaiIfCarrier in=“other"></mt:KeitaiIfCarrier> </mt:KeitaiIfSmartphone>
  36. 36. スマートフォン振り分け
  37. 37. コンテンツを登録します• 最初はEntryImExporter プラグインを使ってCSVで一括登録
  38. 38. まとめ• このサイトはダミーです。実在しません。• サイトの運用の仕方・構築はいろいろある。どう作ったら効 率がいいのかを考えるのも楽しい。• MTのマルチサイト構成はとても便利。
  39. 39. ご清聴ありがとうございました

×