本日初のMovable Typeの更新案件が完了したので、
次回以降のため備忘録を残しておきます。
Movable TypeはCMS(WordPressが有名)です。
今回は、制作会社の方に教えてもらいながらやりましたが、
まだあまり理解ができていないのでこれから深めていくところです。
ファイルの構成などは案件によって異なると思うので、
皆に役立つものではないかも・・・
今回の更新作業の内容
今回の更新作業のミッションは、
カード決済開始に関するお知らせバナーなど
を既存のサイトに追加することです。
Movable TypeとWordPressの違い
主な違いが下記です。
| Movable Type | WordPress | |
| 仕組み | 「再構築」という手順を通して、静的なhtmlファイルを生成する | データベースからテンプレートファイルを通してページをブラウザに出力する |
| html | htmlファイルが生成される | htmlファイルの実態なし |
| 料金 | 有料 | 無料 |
その他、WordPressはオープンソース（※）なので、商用利用や再配布が可能ですが、
それゆえのセキュリティの脆弱性などもあるようです。
私がこれらの違いを知らなかったために戸惑った点が、
サーバー内のファイル構成です。
これは、上記表の中の「仕組み」の違いにより、
WordPressとはかなり違いました。
以下、作業ステップに記載します。
※オープンソースとは：ソースコードを商用、非商用の目的を問わず利用、修正、頒布することを許し、それを利用する個人や団体の努力や利益を遮ることがないソフトウェア開発の手法。（ウィキペディアより）
作業ステップ
今回の作業ステップは、
①サーバーから現在の静的ファイルを取り出して、ローカルで開発する準備
②取り出した静的ファイルをローカルで開発する
③テスト環境で確認してもらう
④Movable Typeシステムへ組み込む
サーバーからファイルを取り出す
とりあえずFTP（FileZilla使用）でサーバーにアクセスできたのはいいものの、
ファイル構成を見て手が止まってしまいました。
WordPressとはファイル構成がかなり異なります。
Movable Typeでは「再構築」という手順を通して
静的htmlファイルが生成されるため、
ルート内にhtmlファイルが並びます。
今回はこのhtmlを一旦全て取り出して、
環境構築用ファイルにコピーの上、
ローカルでの開発環境を作成しました。
また、ルート内に
「/mt」（おそらくMT本体が格納されてるディレクトリ）
「/mt6bk」（おそらくMT本体が格納されてるディレクトリ）
「/html」（テスト環境用）
があったのですが、
開発環境用には不要なファイルのため、
これらはコピーしませんでした。
静的ファイルをローカルで編集する
ここはhtml/cssファイルの編集のみでした。
テスト環境で確認してもらう
編集した静的html/cssファイルをテスト環境へ再度アップロードして、
確認してもらいます。
Movable Type内へ組み込む
開発環境分のOKが出たら、いよいよMovable Type（以下MT）内へ組み込みです。
今回の変更点は、
・フッターにバナーを追加（全ページ共通）
・特定のページ内にセクション追加
です。
大きな流れとしては、
①CSS（js等）のスタイル関係を組み込み
②写真の組み込み
③htmlの組み込み
です。
CSSとフッターの場所
MTへログインしてダッシュボードへ→対象のサイトをクリック→→デザイン
→テンプレート→フッターファイルとCSSファイル
写真の組み込み
FTPで写真をフォルダへ追加
ページ内場所
MTへログインしてダッシュボードへ→対象のサイトをクリック→ウェブページ
→対象ページファイル
それぞれ更新後は、「更新」ボタンがあるのでそちらで保存します。
全ての作業が済んだら「再構築」（画面の左上）ボタンをクリックすると、
MTがhtml/cssファイルを作成してくれます。
（規模にもよると思うけど、5分くらい待つ・・・）
※イメージやリンクはMT専用タグで相対リンクにしておくこと。
（忘れると一部リンクが切れてしまったりする可能性あり）
以上で、サイトが正常に表示されていれば問題なしです。
その他 使用したショートカット（Mac）
・⌘＋F
→テンプレートや対象ページを探すとき、出てきた検索窓に探しているファイル名入力
・⌘＋shift＋R
→Google Chromeなどでキャッシュを上書きして読み込みする（スーパーリロード）
以上です。次回以降は多分一人でやることになると思うので・・・
次回の自分頑張れ☺️
