Embed Size (px)
Citation preview
ミニ勉強会
• 長内毅志
• 2011年～ Movable Typeプロダクトマネージャー
• 2014年～ ディベロッパーリレーションマネージャー
• ダンス、ジョギング、家族が大好きです。
本日の資料
http://goo.gl/G6GhtQ
ハンズオン用ファイル類
https://movabletype.net/blog/20150316.zip
本日の予定
• MovableType.netの特長や活用例などのご説明 60分程度その後、質疑応答
MovableType.netの特徴
小中規模のウェブサイト制作・運営に最適な月額2500円から登録すればすぐに使えるメンテナンスフリーのウェブサービス型高機能CMS
SA製品内のMovableType.netの位置づけ
自由度と管理運用によって使い分けます。「CMSとして使い、小中規模のウェブサイトを作りたい。価格を抑えてすぐはじめたい」という場合にMovableType.netは最適です。また、サービスはシックス・アパートが管理運営しているため、セキリティ対策やサーバー管理の心配はありません。
ソフトウェア版との主な違い
• ウェブサービス型である• ページの生成が完全に動的化されている（再構築不要）• GitHub連携、メール投稿機能、カスタマイズしやすいレスポンシブテーマなど独自の機能やテーマがある
• カテゴリとフォルダはそれぞれ1階層まで• カスタムフィールドは制限はあるが利用可能• コメント、トラックバックがない• DataAPIがない（将来的に対応予定）• プラグインは利用できない
比較表https://movabletype.net/features/compare.html
ソフトウェア版との違い一覧
ソフトウェア版 MovableType.net
指定日非公開 ○ △（対応予定）
定型文 ○ ☓
スマートフォン用投稿アプリ × △（対応予定）
メール投稿 ☓ ○
コミュニティ機能 ◯ ×
エントリータグ（シークレット）タグ ◯ ×（対応検討中）
カテゴリ ◯ ◯（第一階層まで）
フォルダ ◯ ◯（第一階層まで）
カスタムフィールド ◯ ◯（制限あり）
サーバーサイドインクルード ◯ ×（対応検討中）
テーマ機能（インポート・エクスポート） ◯ △（実装予定）
カテゴリとカスタムフィールド連携 ◯ ×（対応検討中）
ソフトウェア版との違い一覧
ソフトウェア版 MovableType.net
カテゴリの並べ替え ○ ×
動的化 △ ◯
GitHub連携 × ◯
Data API ◯ ×（対応予定）
バックアップ・復元 ◯ ×
パスワード保護 × ◯
サーバー配信機能 ◯（Movable TypeAdvanced のみ） ×
サーバー管理 必要 サービスなので不要
プラグイン ◯ ×
コメント ◯ ×
トラックバック ◯ ×
OpenID認証 ◯ ×
デザイン
Movable Type互換のタグとGitHub連携
MTタグというMovable Type互換のタグを使い、HTML
レベルでの柔軟なデザイン作成が可能です。また、GitHub連携機能を使うと、GitHubにコミットした最新のテンプレートファイルとMovableType.net上のテンプレートを自動的に同期することができます。バージョン管理を利用し、安全で確実な運用を行えます。
レスポンシブレイアウトのベーステーマでスマホ対応
コーポレートサイト フォトギャラリー ブログ
アプリ製品紹介 メディアサイト
ベーステーマを利用すれば素早くスマートフォン対応のサイトが作成可能です！
カスタムフィールド
投稿ページを拡張
ブログ、記事、ウェブページに追加フィールドを設定可能です。数の制限はありますが、ウェブサイト全体で共有することなども可能です。
ファイル管理
FTPを使わずにブラウザだけでファイル管理
ファイル管理をするための、ファイルマネージャーという機能があります。FTP等の別のツールでアクセスすることなく、ブラウザだけでセキュアに管理画面上でファイルを管理できます。
閲覧制限（パスワード保護）
管理画面から簡単に閲覧制限
管理画面からパスワード保護機能を設定すると、ページへのアクセスにIDとパスワードをきかれるようにできます。開発途中で見られたくない場合や、簡易的な会員向けページとしての運用など可能です。
メール投稿
フィーチャーフォンからの投稿も簡単
設定したメールアドレスからメールを送信するだけで、投稿できるメール投稿機能が標準で使えます。スマートフォン用にはアプリが提供予定ですが、フィーチャーフォンからはメール投稿をご利用ください。
独自ドメインによるサイト運営
自社ドメインなどの独自ドメインが利用可能
独自ドメイン機能を使えば、自社のドメインでサイトを運用することが可能です。例えば、アプリケーションの紹介をしたい場合は、application.example.jpなどサブドメインでMovableType.netで作成したサイトを表示することができます。
複数人でサイトを管理
適切な権限を割り振った複数人での運用
サイトの管理を複数人で行うことができます。ブログ毎に適切な権限を割り振ることによって、サイトを管理する人、特定のブログで下書きの記事を書く人、といったように細かな権限設定を行ってサイトを運用できます。
サーバー管理不要
ウェブサービスなのでサーバー管理不要でセキュリティ対応も万全
シックス・アパートがサーバーのプロセス監視を行っており、問題発生時には素早く対応します。管理、メンテナンスのコストを大幅に削減できます。 OSの脆弱性対応なども素早く対応します。
ユーザー事例
操体サロン東京様
http://www.sotai-salon.jp/
鈴木様のコメントMovableType.netを選んだ理由は、"サーバー管理やソフトウェアのセキュリティ対応を自分でしなくてよい"という運営の気楽さ、自分のイメージしたサイトを作り込める"柔軟なカスタマイズ性"の2点に尽きます。
ベースファイルhttps://movabletype.net/blog/2014/12/github.html
プランと価格
プラン名 ブログ数 ユーザー数 容量 月額料金（税抜）年間一括料金（税抜）
ライト 5 5 5GB 2,500円25,000円
（2ヶ月分お得）
スタンダード 10 10 10GB 4,500円45,000円
（2ヶ月分お得）
※ ウェブサイト単位でのサイト・ライセンスの購入になり、ウェブサイト作成時に14日間のトライアル期間がありますので、その間に購入手続きをお願いいたします。
※ 1アカウントで複数のウェブサイトをご契約いただけます。※決済方法は銀行振り込み・クレジットカード払い・請求書払いなど、複数の方法よりお選びいただけます。
サポートコンテンツ
MovableType.net活用ブログhttps://movabletype.net/blog/
使いための様々な情報を随時更新しています。
サポートサイトhttps://movabletype.net/support/
各機能の使い方などのドキュメントサイトです。
MTタグマニュアルhttps://movabletype.net/tags/
MovableType.netで利用可能なタグ一覧と説明です。
MovableType.net MTタグ逆引き辞典絶賛準備中です
質疑・応答
休憩
ハンズオン小規模向けテーマ Simple Product を使って
コーヒーショップのサイトを作る
ハンズオン
サインアップ
https://movabletype.net/
無料サインアップして、ウェブサイトを作ります。作成したウェブサイトは１４日間無料で使えます。テーマはSimple Productを選びます。
パスワード保護
ウェブサイト＞設定＞公開のパスワード保護を有効にして、ユーザー名とパスワードを設定する。
ロゴとメインイメージ部分の変更
ロゴ画像、メイン画像、背景画像を変更します。画像はデザイン＞ファイルマネージャのimagesフォルダ内にはいっています。• logo.png（高さ 50px 推奨）• main-img.png
• bg-top-main.jpg （背景画像）• favicon.ico （ファビコン）• ogimage.png （facebook などにシェアした時に表示される og:image）
テキスト部分はデザイン＞テンプレート＞インデックスページ内の<p id=“main-text"></p>の中身を変更します。
参考：https://movabletype.net/blog/2014/12/simple-corporate-1.html
カフェ紹介ページの追加
ウェブページ＞新規から新規ウェブページを追加。•タイトル：Cafe
•本文に画像をテキストを入力画像：cafe01.jpg
テキストサンプル：筑波山麓のとある場所に存在する喫茶店。
一杯ずつ丁寧に淹れたハンドドリップコーヒーとスフレパンケーキでゆっくりした時間が流れる空間。日常から離れてのんびりとお過ごしください。
見出しと画像のCSSの調整
デザイン＞テンプレートのスタイルシートファイルに以下を追加。img {
height:auto;
}
.webpages h3{
border-bottom: 2px solid;
font-size: 32px;
padding-bottom: 5px;
width: 300px;
}
メニューページの追加
ウェブページ＞新規から新規ウェブページを追加•タイトル：Menu
•本文でHTMLの編集にチェックをいれ以下のソースをはりつける<p>メニューは以下をご用意しております。</p>
<table class="table table-striped">
<tbody>
<tr><th>ホットドリンク</th><th>S</th><th>M</th></tr>
<tr><td>カフェラテ</td><td>¥340</td><td>¥390</td></tr>
<tr><td>豆乳ラテ</td><td>¥400</td><td>¥450</td></tr>
<tr><td>カフェモカ</td><td>¥330</td><td>¥380</td></tr>
<tr><td>カプチーノ</td><td>¥260</td><td>¥310</td></tr>
<tr><td>ココア</td><td>¥290</td><td>¥340</td></tr>
</tbody>
</table>
Contactページの追加
ウェブページ＞新規から新規ウェブページを追加•タイトル：Contact
•本文でフォーマットをなしに変更し以下のソースをはりつける<div class="row">
<div class="col-md-4">左カラム</div>
<div class="col-md-8">
<p>お問い合わせ先</br>コーヒーショップ</p>
<p>〒300-4352 茨城県つくば市筑波１ 筑波山頂駅から徒歩１分</p>
<p>[email protected]</p>
</div>
•左カラムの部分を選択しcafe02.jpgの画像をアップロードする
このテーマはBootstrapをベースにしているため、Bootstrapのルールにの
っとった表記を使うことにより、レスポンシブレイアウトにそった確実なレイアウトを行うことができます。参考： http://getbootstrap.com/css/
活用例
ユーザー事例
操体サロン東京様
http://www.sotai-salon.jp/
鈴木様のコメントMovableType.netを選んだ理由は、"サーバー管理やソフトウェアのセキュリティ対応を自分でしなくてよい"という運営の気楽さ、自分のイメージしたサイトを作り込める"柔軟なカスタマイズ性"の2点に尽きます。
ベースファイルhttps://movabletype.net/blog/2014/12/github.html
スマホアプリ紹介サイト
Lekumoビジネスブログスマートフォン紹介＆ダウンロードサイト
Simple Product
テーマをベース
美容室の例
美容室
ベーステーマ SimpleCorporate またはSimpleProduct
スマホ対応のテーマを使えば、短期間でリニューアル可能。
提案時の運用例
メールアドレス
さくらインターネットメールサーバー専用サービス
メールボックス• http://www.sakura.ne.jp/mail/
• 年額1,029円容量10GB
• メールアドレス無制限• メーリングリスト10個
年額運営料金
さくらインターネットメールボックス
年額（税込）1,029円
さくらインターネット独自ドメイン
年額（税込）1,852円~
MovableType.net
年額（税込） 27000円〜CMS利用料
サーバー費用など込
独自ドメインメールアドレス
CMS（サーバー費用）合計年額
29,881円〜
ホーム・ページおまかせパックのような販売運用例
フロー例
デザインテーマを選択エクセルシートに内容を記述
実作業時間2時間程度
GitHubにテーマを複数用意しておく
GitHub連携で適用する
コンテンツの適応とデザイン画像差し替え
顧客作業
入力シートと出来上がり例
顧客入力用エクセルシート例 出来上がったウェブサイト
リニューアル・引越の場合
静的サイトの美容室のサイトをリニューアルする場合
リニューアル前ホームページ・ビルダーでがんばってつくりました
テーマをベースに既存コンテンツをウェブページなどに移行
リニューアル後Simple Corporate
テーマがベース
HTMLとCSSの知識があれば１日ほどで移行可能
データ移行について
ブログのような記事が多い場合はZIP展開機能を利用する
基本的な流れ1.手元にMT形式のファイルと画像をまとめて用意しておく2.MovableType.netでサイトやブログ等を作り、MT形式のファイルをインポート3.用紙した画像をzipで固めておき、それをファイルマネージャーからアップロードして展開する。
4.検索置換でURLのパスを書き換える
詳細は以下の活用ブログを参照https://movabletype.net/blog/2015/03/movabletypenet.html
https://movabletype.net/blog/2015/03/movabletypenet-1.html
