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