Movable typeでモバイルギャラリーサイト
39
Movable Typeで モバイルギャラリーサイト構築
-
Upload
regret-raym -
Category
Documents
-
view
3.169 -
download
5
Transcript of Movable typeでモバイルギャラリーサイト
Movable Typeで モバイルギャラリーサイト構築
自己紹介
• 塚口祐司 • 職業：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
今日のテーマ
MTでモバイルギャラリーサイト
写真ギャラリーサイト MOBATASO
MOBATASO？
無料写真素材サイトPAKUTASO
管理人はsusi-paku（@susipaku）さん
MTで作られています！
無料写真素材サイトPAKUTASO
ろくろまわしてる写真があります。
無料写真素材サイトPAKUTASO
おいしそうな写真もいっぱいあります
見ていて飽きない写真が多い
で、
これのモバイルをざっくり考えてみる
PAKUTASO を MOBATASO に
管理人はnise-pakuさんに
モバイルギャラリーサイト MOBATASO / もばたそ
は
PAKUTASO/ぱくたその写真が 閲覧できます。
更新は？
• 1日5枚程度の同種類写真を追加更新する
• 1日1記事更新
• 入力する内容はタイトル、本文、記事ファイル名、タグ（ジャンル分け）など。
コンテンツ遷移とMT構成を考えます
TOP
新着写真一覧
写真一覧
写真
ジャンル別 一覧
写真一覧
写真
このサイトについて
コンテンツ遷移とMT構成を考えます
TOP
新着写真一覧
写真一覧
写真
ジャンル別 一覧
写真一覧
写真
このサイトについて
ブログのみで構成
インデックス テンプレート
ウェブページ
インデックス テンプレート
エントリーアーカイブ
プラグインはこれを使います
• ケータイキット（モバイル対応） – http://keitaikit.jp/
• EntryImExporter（CSV登録） – http://www.skyarc.co.jp/engineerblog/entry/entryimexporter.html
（１）デザインを作ります
• スマートフォンサイト
• トップ写真はスライド
• おすすめ写真
• ブログ記事で管理
（２）デザインを作ります
• フィーチャーフォンサイト
• おすすめ写真
• ブログ記事で管理
アイテムで管理…？
• 記事別にアイテム一括アップロード＆登録ができなかったので、FTPでアップしてファイル名で記事と関連付けました。
と思っていたら
というのを本日発見しました。
写真を加工します
• 大きいサイズの画像とサムネイル用を用意
640px×縦可変 80px×縦可変
写真を加工します
• Photoshopのアクションでサイズ一括変換
ファイル名を変更します
• 命名規則をつけて、ファイル名一括変更ソフトなどで変換する。
元ファイル名：SSK_utoutosuruneko.jpg リネーム後：neko0001_001.jpg～ ※記事のbasenameをこれにする ※テンプレート記述例 <img src=“/images/<$mt:EntryBasename$>_001.jpg” alt=“画像” /> 001などの番号は、ループ内でカウントなどさせたり。
FTPで画像アップします
コーディングします
• ガラケー特有コーディング – spacer.gifの活躍 – pタグはちょっと･･･ – フォントサイズはmediumとsmallで – h1、h2タグとかはmargin、paddingとfont-size調整
• スマートフォンコーディング – HTML5 / CSS3（Sass+Compass） – sprite.png – ratina対応 – text-shadowの罠
コーディングします
• ガラケー特有コーディング – spacer.gifの活躍 – pタグはちょっと･･･ – フォントサイズはmediumとsmallで – h1、h2タグとかはmargin、paddingとfont-size調整
• スマートフォンコーディング – HTML5 / CSS3（Sass+Compass） – sprite.png – ratina対応 – text-shadowの罠
モジュールなどで、変数セットなど あらかじめ用意しておくと便利！
コーディングします
• ガラケー特有コーディング – spacer.gifの活躍 – pタグはちょっと･･･ – フォントサイズはmediumとsmallで – h1、h2タグとかはmargin、paddingとfont-size調整
• スマートフォンコーディング – HTML5 / CSS3（Sass+Compass） – sprite.png – ratina対応 – text-shadowの罠
モジュールなどで、変数セットなど あらかじめ用意しておくと便利！
HTTPリクエスト数を減らしたり、 画像のサイズなどを「JPEGmini」など使って削減
モジュール記述例
• 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”>で呼び出し
テンプレートを構築します
• テーマを使う
サーバのthemesフォルダに自分のテーマを入れる
テンプレートを構築します
• テーマの作り方は？
スマートフォン振り分け
• ケータイキットなら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>
スマートフォン振り分け
コンテンツを登録します
• 最初はEntryImExporter プラグインを使ってCSVで一括登録
まとめ
• このサイトはダミーです。実在しません。
• サイトの運用の仕方・構築はいろいろある。どう作ったら効率がいいのかを考えるのも楽しい。
• MTのマルチサイト構成はとても便利。
ご清聴ありがとうございました
