a-blog...

!a-blog cmsのバージョンを1系から2系へアップデートするときに気をつけておきたいこと

有限会社アップルップル 森田かすみa-blog cms Training Camp 2014 Autumn

アップデートしたほうがいい理由

「アップデート大変そうだなー」

と感じていませんか？

アップデートは積極的にしていきましょう

とくにVer.2系にはいっぱい便利な機能がある

IFブロック ユニットのレスポンシブ対応

バージョン管理メディア管理

画像のリサイズ

動的フォーム

カスタムユニット

・・・他にもいろいろ

IFブロック ユニットのレスポンシブ対応

バージョン管理メディア管理

画像のリサイズ

動的フォーム

カスタムユニット

逆にVer.1系のカスタマイズをする方がまどろっこしくなってきました

いろんな新機能をみていると、

実際に受託案件では、IFブロック使いたさにアップデートしました

Web制作を助けてくれる新機能がいっぱい

というわけで本日はVer.1系から2系へのアップデート方法をご紹介します

本日の進め方

• 実際に行ったアップデート手順

• テンプレートの修正手順

• アップデートにかかる時間は？

• アップデートの難易度

実際に行ったアップデート手順

実際に行ったアップデート手順

‣ ダウンロード‣ テンプレートの修正‣ インストール

ダウンロード

「Ver.1系からのアップデート版」を使用

ダウンロード

おすすめ！

Ver.1系に入っていないファイルが入っているのでアップデートが楽なようになっている

!

ダウンロード

おすすめ！

Ver.1系に入っていないファイルが入っているのでアップデートが楽なようになっている

!

ファイルの内容

‣ archives_rev‣ media‣ v1.7からのアップデートマニュアル.pdf

など

テンプレート修正

段階としては3つ

テンプレート修正

表側を正常に表示する

管理画面を整える

新しい機能を追加する

段階としては3つ

第1段階

第2段階

第3段階

テンプレート修正

段階としては3つ

表側を正常に表示する

管理画面を整える

新しい機能を追加する

第1段階

第2段階

第3段階

主に第1・第2段階まで対応できれば十分!

テンプレート修正

段階としては3つ

主に第1・第2段階まで対応できれば十分

表側を正常に表示する

管理画面を整える

新しい機能を追加する

第1段階

第2段階

第3段階

新しい機能を追加したい（動的フォーム・承認機能）場合に追加する

!!

第1段階 表側を正常に表示する

第1段階 表側を正常に表示する

‣ Entry_Bodyのインクルードをcolumn.htmlからunit.htmlに変更

‣ Column_ListモジュールはUnit_Listへ変更‣ column.htmlをカスタマイズしてテーマに持ってきている場合、unit.htmlに修正

第1段階 表側を正常に表示する

対策： column.htmlをカスタマイズしている場合以外はテキストエディターの一括変換で対応可能

!

‣ Entry_Bodyのインクルードをcolumn.htmlからunit.htmlに変更

‣ Column_ListモジュールはUnit_Listへ変更‣ column.htmlをカスタマイズしてテーマに持ってきている場合、unit.htmlに修正

Coulumn_Listの挙動

そのままでも表示側では正常に機能しているので大丈夫そうに見えますが、モジュールの表示設定では真っ白になるので、今後のためにも修正しておきます

第2段階 管理画面を整える

第2段階 管理画面を整える

‣ テーマの中に持ってきている管理画面のテンプレートを要修正

‣ カスタムフィールドの編集ボタンをblog_index

からblog_editへ変更

‣ 気になるなら管理画面のカスタムフィールドのスタイルを修正

管理画面のカスタムフィールドは崩れる

読み込んでいたacms.cssの中身がガラッと変わってしまったのでレイアウトが崩れてしまいますが、機能はしています。

第2段階 管理画面を整える

‣ /admin/action.html

‣ /admin/○○/edit.html（field.htmlがないバージョンではカスタマイズされている可能性あり）

‣ /admin/config/function.html

カスタマイズがよくされていそうなテンプレート

第2段階 管理画面を整える

‣ /admin/action.html

‣ /admin/○○/edit.html（field.htmlがないバージョンではカスタマイズされている可能性あり）

‣ /admin/config/function.html

カスタマイズがよくされていそうなテンプレート

対策：どこをカスタマイズしているか分からない場合はDiffツールで差分を探しましょう

!

第3段階 新しい機能を追加する

第3段階 新しい機能を追加する

‣ 動的フォーム・承認機能を利用するならEntry_Bodyに専用のインクルードの記述が必要

‣ column.htmlの中身をカスタマイズしている場合はユニットのレスポンシブ対応やカスタムユニットの対応をしたいなら追記が必要

第3段階 新しい機能を追加する

‣ 動的フォーム・承認機能を利用するならEntry_Bodyに専用のインクルードの記述が必要

‣ column.htmlの中身をカスタマイズしている場合はユニットのレスポンシブ対応やカスタムユニットの対応をしたいなら追記が必要

とくに追加していないからといってレイアウトが崩れることはないので、追加したい機能だけ追加するのをおすすめします

!

テンプレート修正　まとめ

ツールを上手く使って効率よくテンプレートを修正しましょう

!

テンプレートを修正する際は、どこまで対応するのかを明確にしておくと、より楽・迅速に対応できます

!

インストール

‣ /private/config.system.yaml‣ /php/ACMS/User/

上書きしてはいけないテンプレート

インストール

‣ /private/config.system.yaml‣ /php/ACMS/User/

上書きしてはいけないテンプレート

カスタマイズしていないければ上書きしても大丈夫！

!

アップデート手順まとめ

Ver.1系から2系へのアップデートではテンプレートの修正が主な作業になってくる

!

一番の難所！

Ver.1系から2系へのアップデートではテンプレートの修正が主な作業になってくる

!

一番の難所！

‣ テキストエディターの一括変換機能を活用する‣ Diffツールで差分を探す

テンプレート修正はツール活用して解決！

アップデート手順まとめ

テンプレートの修正手順

テンプレートの修正手順

制作者としてはアップデート中はこの画面が見えているので、表側はなるべく迅速に対応したい！

テンプレートの事前準備をしておくと安心

制作者としてはアップデート中はこの画面が見えているので、表側はなるべく迅速に対応したい！

テンプレートの修正手順

テンプレートの事前準備

テンプレートの事前準備

‣ Entry_Body‣ Unit_List

表のテンプレートに関するところ

まずは表のテンプレートを修正して、アップデートしてからあとの管理画面の部分を直す

テンプレートの事前準備

先に表側を直すことで、メンテナンス画面を表示している時間が短縮できる

まずは表のテンプレートを修正して、アップデートしてからあとの管理画面の部分を直す

‣ Entry_Body‣ Unit_List

表のテンプレートに関するところ

作業方法

主な2つの方法

作業方法

‣ テスト環境を用意してアップデート‣ ローカル環境でテンプレートのみ編集

主な2つの方法

テスト環境を用意してアップデート

テーマ・テンプレートが多い、カスタマイズをしているサイトはコードだけの確認では心細い

テスト環境を用意してアップデート

テスト環境でウェブサイトを表示しながらアップデートを試すと安心

テーマ・テンプレートが多い、カスタマイズをしているサイトはコードだけの確認では心細い

まずはローカル環境でテンプレート編集

• あまり時間をかけられない• 予算が足りない• 他、テスト環境が用意できない

まずはローカル環境でテンプレート編集

• あまり時間をかけられない• 予算が足りない• 他、テスト環境が用意できない

以上のような場合はローカル環境でテンプレートに関するところだけ直すだけでも十分

まずはローカル環境でテンプレート編集

• あまり時間をかけられない• 予算が足りない• 他、テスト環境が用意できない

以上のような場合はローカル環境でテンプレートに関するところだけ直すだけでも十分

テスト環境が用意できない分、アップデート後は要チェック！

!

Q.アップデートにかかる時間は？

Q.アップデートにかかる時間は？

A. サイト次第で変わります。

アップデートにかかる時間

私が担当している受託案件では1日外部の方から頼まれたサイトでは1時間（確認を含めて）

アップデートにかかる時間

私が担当している受託案件では1日外部の方から頼まれたサイトでは1時間（確認を含めて）

同じアップデートでも時間は違ってくる!

アップデートにかかる時間

受託案件

‣ 修正テーマ数50以上

‣ 管理画面カスタマイズあり‣ テスト環境あり

サポート案件

‣ 修正テーマ数は3つ

‣ 管理画面カスタマイズなし‣ テスト環境なし・ローカルでテンプレート編集

アップデートにかかる時間

こんなサイトは時間がかかるかも

‣ テーマ・テンプレートの数がおおい‣ 管理画面をカスタマイズをしている‣ テスト環境を用意する

アップデートにかかる時間

それでも

‣ 自分が携わっていない案件でも対応できる‣ マークアップエンジニアの作業の範囲内

アップデートにかかる時間

それでも

‣ 自分が携わっていない案件でも対応できる‣ マークアップエンジニアの作業の範囲内

a-blog cmsに慣れてるならデザイナーさんにも手伝ってもらうこともできる

!

アップデートの難易度

アップデートの難易度

イメージをしにくいと思うので、実際にVer.1.7に同梱しているsite2013テーマをアップデートしてみました

アップデートの難易度

‣ 最新バージョンをインストール‣ Entry_Bodyのunit.html一括変換

‣ カスタムフィールドの編集ボタン一括変換

作業内容

アップデートの難易度

作業内容 第1段階まで対応

‣ 最新バージョンをインストール‣ Entry_Bodyのunit.html一括変換

‣ カスタムフィールドの編集ボタン一括変換

アップデートの難易度

10分あれば余裕でアップデートは終了！

作業内容

!

第1段階まで対応

‣ 最新バージョンをインストール‣ Entry_Bodyのunit.html一括変換

‣ カスタムフィールドの編集ボタン一括変換

アップデートの難易度

一括変換で対応可能な部分だけなら簡単にアップデートできる

アップデートの難易度

一括変換で対応可能な部分だけなら簡単にアップデートできる

‣ テーマの中に管理画面のテンプレートを持ってきてカスタマイズしている場合

‣ Entry_Bodyの動的フォームなどの新機能の追加

一括変換が難しいもの!

今日のまとめ

今日のまとめ

ツールをうまく使えばテンプレート修正も楽になる

さきに表側のテンプレートを修正してアップデートしてから管理画面を整えると時間短縮

簡単なサイトであれば10分以内でアップデートは完了する

以上です

ありがとうございました！